/*
   Styles for Display
*/

/* General styles. */

body { font-family: 'Source Sans', helvetica, arial, sans-serif; margin: 0; background-color: white; }
img, table, tr, td, div, a, form { border: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: black; }


/* Identity. */

#identity { position: fixed; top: 0; width: 100%; height: 60px; text-align: center;
            background-color: white; border-bottom: 1px solid #d0d0d0; }
#identity img { width: auto; max-width: 95%; height: auto; max-height: 50px; padding: 5px 0; }


/* Main menu. */

#display-menu { position: fixed; bottom: 0; width: 100%; height: 60px; background-color: #eeeeee;
                border-top: 1px solid #d0d0d0; }
#display-menu #inner { position: fixed; width: 100%; bottom: 10px; left: auto; right: auto;
                       text-align: center; }
#display-menu a { font-weight: 800; font-size: 32px; padding: 0px 12px; margin: 0 32px; }
#display-menu a.current { color: white; background-color: black; border-radius: 4px; }


/* Filters. */

#filters { position: fixed; left: 20px; bottom: 80px; width: 180px; }
#filters .filterhead { font-weight: 500; font-size: 22px; margin-top: 1em; margin-bottom: 0.25em; line-height: 125%; }
#filters .filtertext { font-weight: 300; font-size: 18px; line-height: 120%; }

#filters #facultyshortcuts, #filters #staffshortcuts
   { width: 100%; margin-bottom: 1em; }
#filters #facultyshortcuts a, #filters #staffshortcuts a
   { display: inline-block; width: 30px; padding: 2px 4px; border-radius: 4px; margin: 0 2px 4px 0;
     text-align: center; font-size: 22px; font-weight: 500; background-color: #eee; }
#filters input[type="radio"] { opacity: 0; position: fixed; width: 0; }
#filters label { display: block; margin: 0 0 5px 0; padding: 6px; border-radius: 4px;
                 font-size: 20px; font-weight: 300; background-color: #eee; line-height: 125%; }
#filters input[type="radio"]:checked + label { color: white; background-color: black; }
#filters img { width: 100%; height: auto; }


/* Scroll controls. */

#scrollcontrols { position: fixed; right: 20px; bottom: 80px; width: 80px; }
#scrollcontrols img { width: 100%; height: auto; margin-top: 6px; }


/* Main page container. */

#container { width: 100%; height: 100%; background-color: white; }


/* Content! */

#content { margin: 80px 10px 150px 220px; }
#content.withscroll { margin-right: 120px; }
#content.craftivism { height: 100vh; width: 100vw; margin: 0; }


/* Idle screen. */

#idlecontainer { position: fixed; width: 100%; top: 0; bottom: 0; background-color: black; }
#idlecontent { position: fixed; height: 100%; left: 0; right: 250px; }

#idleflyers { display: flex; flex-direction: row; width: 100%; height: 100%; }
#idleflyers .idleflyer { flex-basis: 50%; height: 100%; width: 100%; margin: auto; }
#idleflyers .idleflyer img { height: 100%; width: 100%; object-fit: contain; }

#idle-prompt { position: fixed; height: 100%; right: 0; width: 220px;
               margin-left: 10px; padding: 0 10px; line-height: 200%; }
#idle-prompt p { font-weight: 700; font-size: 30px; color: #a0a0a0; }


/* People. */

.displayperson { display: flex; flex-direction: row; margin-bottom: 20px; }
.displayperson .personimage { flex-basis: 12%; }
.displayperson .personimage img { width: 100%; height: auto; }
.displayperson .personinfo { flex-basis: 88%; padding: 0 50px 0 20px; }
.displayperson .personinfo .personname { font-weight: 300; font-size: 200%; line-height: 125%;
                                         margin: 0; padding: 3px 0 5px 0; }
.displayperson .personinfo .personjob { font-weight: 300; font-size: 150%; line-height: 125%;
                                        color: #909090; margin: 0; padding: 0; }
.displayperson .personinfo .personlocation { margin: 0; padding-top: 5px; font-weight: 400; font-size: 140%; }
.displayperson span.map-pin
{ padding-left: 24px; background-image: url(/assets/chan/icons/map-pin-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }


/* Flyers. */

#displayflyers { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin-bottom: 20px; gap: 5px; align-items: center;}
#displayflyers .displayflyer { flex-basis: 33%; }
/* #displayflyers .displayflyer img { width: 100%; height: auto; } */
#displayflyers .displayflyer img { /* height: 100%; */ width: 100%; object-fit: contain; border: 0.5px solid #ccc}


/* Videos. */

.displayvideo { display: flex; flex-direction: row; margin-bottom: 20px; }
.displayvideo .videoscreenshot { flex-basis: 30%; }
.displayvideo .videoscreenshot img { width: 100%; height: auto; }
.displayvideo .videoinfo { flex-basis: 70%; padding: 0 50px 0 20px; }
.displayvideo .videoinfo .videotitle { font-weight: 300; font-size: 200%; margin: 0; padding: 10px 0 5px 0;
line-height: 125%; }
.displayvideo .videoinfo .videodescription { font-weight: 300; font-size: 150%; line-height: 125%;
                                             color: #909090; margin: 0; padding: 0; }
.displayvideo .videoinfo strong { color: black; }


/* Pages. */

.pagecontainer { position: fixed; top: 80px; bottom: 70px; left: 200px; right: 0; }
.page { height: 100%; width: 100%; text-align: center; }
.page img { height: 100%; width: 100%; object-fit: contain; }


/* Overlay. */

#overlay { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 10;
           background-color: white; text-align: right; }
#overlay.dark { background-color: black; }
#overlay img { height: 100%; width: 100%; object-fit: contain; }
#overlay #prompt { position: fixed; z-index: 20; top: 0; right: 0; height: 100%; width: 100%; }
#overlay #prompt #prompttext { position: fixed; z-index: 30; top: 10px; right: 10px;
                               font-size: 180%; font-weight: 800; line-height: 120%;
                               opacity: 0.4; filter: alpha(opacity=40); }
#overlay.dark #prompt { color: white; }
#overlay .video-container { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; }
#overlay .video-container iframe, .video-container object, .video-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Craftivism-specific. */

div#about-craftivism { flex-basis: 30%; padding: 0 2em 0 0; }
div#about-craftivism #chan-identity { width: 80%; height: auto; margin-bottom: 1em; }
div#about-craftivism p { font-family: 'Source Sans'; color: white; font-weight: 300; font-size: 160%;
                         line-height: 110%; margin: 0 0 0.5em 0; }
div#about-craftivism p#title { font-weight: 700; font-size: 220%; }

div#craftivism-grid { flex-basis: 52%; aspect-ratio: 1; display: flex; height: 90vh; margin-top: 75px;
                      flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
div#craftivism-grid div { flex-grow: 1; }
div#craftivism-grid div img { width: 100%; height: auto; display: block; }

.craftivism-overlay { position: fixed; height: 100%; width: 100%; top: 0; left: 0;
                      z-index: 10; background-color: black; }
.craftivism-overlay .project { height: 100%; width: 100%; display: flex; flex-direction: row; }
.craftivism-overlay .projectimage { flex-basis: 60%; }
.craftivism-overlay .projectimage img { width: 100%; height: 100%; object-fit: contain; }
.craftivism-overlay .projecttext { flex-basis: 40%; color: white; font-family: 'Source Sans';
                                   overflow: auto; padding: 0 1em 2em 1em; }
.craftivism-overlay .projecttext .name { font-weight: 500; font-size: 200%; }
.craftivism-overlay .projecttext .statement { font-weight: 300; font-size: 120%; }
.craftivism-overlay .projecttext .statement p { margin: 0 0 1em 0; line-height: 110%; }
.craftivism-overlay .projecttext .statement p.q { margin-bottom: 0.25em;
                                       font-size: 120%; font-weight: 500; color: #a0a0a0; }