Template:ETH Zurich/page css

main {

   box-shadow: 0;
   background-color: var(--light-background-color);
   color: var(--dark-text-color);
   font-family: var(--cate-sf-font);
   font-size: var(--text-font-size);
   margin: 0 auto;
   max-width: 1280px; /* HD standard */
   padding: 20px 0;
   width: 100%;

}

main address {

   font-size: var(--address-font-size);
   font-style: normal;
   margin: 10px auto;
   padding: 0 20px;

}

main figure {

   /* Refer to: https://codepen.io/sdthornton/pen/wBZdXq */
   margin: auto;
   max-width: 100%;

}

main dl {

   border: 5px double var(--medium-background-color);
   clear: both;
   display: block;
   margin: 20px auto;
   overflow: auto;
   padding: 0 15px;

}

main dd, dt {

   display: block;
   float: left;
   margin: 5px auto;
   padding: 0;
   line-height: var(--large-line-height);

}

main dt {

   clear: left;
   font-weight: bold;
   text-align: center;
   padding: 0 10px 0 0;

}

main dt::after {

   content: ":";

}

main section {

   clear: both;
   margin: 20px 0;
   padding-bottom: 20px;

}

main section > h1 {

   border-style: solid;
   border-width: 0 0 0 10px;
   border-color: var(--dark-green);
   color: var(--h1-color);
   font-family: var(--h1-font);
   font-weight: bold;
   margin-left: 20px;
   padding: 5px 10px;
   text-transform: uppercase;

}

main h1 {

 color: var(--h1-color);
 font-family: var(--header-font);
 font-size: var(--h1-font-size);
 font-weight: normal;
 padding: 10px;

}

main h2 {

   color: var(--h2-color);
   font-family: var(--header-font);
   font-size: var(--h2-font-size);
   font-weight: normal;
   padding: 10px 20px 0 20px;

}

main p {

   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: var(--text-line-height);
   margin: 10px 0;
   padding: 0 20px;
   text-align: justify;

}

main summary {

   cursor: pointer;

}

main img {

   box-shadow: 0;
   display: block;
   height: auto;
   margin: 0 auto;
   padding: 10px 20px;
   width: calc(100% - 40px);

}

main ul, main ol {

   line-height: var(--text-line-height);
   list-style-image: none;
   list-style-position: outside;
   margin: 10px auto;
   padding: 0 0 0 40px;

}

main ol {

   list-style-type: decimal;

}

main ul {

   list-style-type: disc;

}

main li > p {

   padding-left: 0;

}

main table {

   color: var(--dark-background-color);

}

.bacterium, .gene {

   font-style: italic;

}

.headline {

   color: var(--headline-color);
   font-size: var(--headline-font-size);
   margin: 0;
   padding: 0;
   text-align: center;

}

.emphasize {

   font-size: 22.5px;
   border-radius: 20px;
   color: var(--light-text-color);
   background: var(--dark-green);
   margin: 20px;
   padding-top: 10px;
   padding-bottom: 10px;

}

.emphasize h1 {

   color: var(--light-text-color);
   border-color: var(--dark-green);

}

.emphasize a {

   color: var(--light-text-color);
   font-weight: bold;

}

.fig-generic {

   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float { /* DEPRECATED */

   float: right;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float-right {

   float: right;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

.fig-float-left {

   float: left;
   margin: 0 auto;
   padding: 10px 20px;
   max-width: 400px;

}

main figcaption {

   font-size: var(--caption-font-size);
   margin: 10px auto;

}

.fig-nonfloat {

   margin: 20px auto;
   max-width: 800px;

}

.fig-nonfloat > figcaption {

   padding: 0 20px;

}

.top-fig-single {

   margin: 40px auto;
   padding: 20px;
   max-width: 250px;

}

.top-fig-multi {

   margin: 40px auto;
   max-width: 800px;

}

.first {

   margin-top: 0;

}

.multi-summary {

   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   margin: 10px 0 0 0;
   padding: 0;

}

.multi-summary > details {

   display: block;
   flex: 1 1 0;
   margin: 10px 0;
   padding: 0 20px;

}

.multi-summary > details:first-child {

   margin-top: 0;

}

.multi-summary > details:last-child {

   margin-bottom: 0;

}

.multi-summary > details > summary {

   background-color: var(--blue);
   color: var(--light-text-color);
   padding: 10px;

}

.multi-summary > details[open] > summary {

   background-color: var(--very-dark-blue);

}

.references {

   font-size: var(--references-font-size);

}

.references li {

   margin: 5px auto;

}

.pro-contra {

   display: flex;
   flex-flow: row wrap;

}

.pro-contra > div {

   flex: 1 1 0;
   min-width: 250px;

}

.pro > p, .contra > p {

   font-weight: bold;

}

.pro > p {

   color: var(--green);

}

.contra > p {

   color: var(--reddish);

}

.query {

   padding-bottom: 0;
   padding-top: 20px;

}

header {

   background-color: var(--header-background-color);
   box-shadow: var(--material-shadow-2dp);
   color: var(--dark-text-color);
   display: flex;
   flex-flow: row wrap;
   font-family: var(--cate-sf-font);
   margin-top: 16px;
   position: static;
   top: 16px;
   z-index: 1;

}

nav a, nav a:visited {

   color: inherit;

}

.dry {

   color: var(--dark-text-color);

}

.wet {

   color: var(--dark-text-color);

}

.logo {

   display: block;
   flex: 0 1 auto;
   padding: 0px;

}

.logo > img {

   display: block;
   padding: 10px 5px;
   width: 80px;

}

.main-menu {

   align-items: normal;
   display: flex;
   flex-flow: column wrap;
   justify-content: normal;
   letter-spacing: 0.5px;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   padding: 0;

}

.main-menu > li {

   display: block;
   flex: 1 1 auto;
   margin: 0;
   position: relative;
   white-space: nowrap;

}

.main-menu li:last-child > .submenu {

   left: auto;
   right: 0;

}

.main-menu > li > .menu-entry, .submenu li > a {

   display: block;
   font-weight: normal;
   padding: 10px;
   text-decoration: none;
   text-transform: uppercase;

}

.main-menu > li:hover::before {

   background: linear-gradient(
   90deg,
   var(--light-background-color),
   var(--medium-background-color) 50%,
   var(--light-background-color) 100%
   );
   content: "";
   height: 2px;
   left: 0;
   width: 100%;
   position: absolute;
   top: 0;

}

.main-menu > li:hover > .submenu {

   display: flex;

}

.submenu {

   background-color: var(--light-background-color);
   box-shadow: var(--material-shadow-3dp);
   display: none;
   flex-flow: column nowrap;
   justify-content: center;
   left: 10px;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   min-width: 100%;
   opacity: 1;
   padding: 0;   
   position: relative;
   z-index: 2;

}

div.submenu {

   align-items: flex-start;
   flex-flow: row nowrap;

}

.submenu li {

   color:  var(--dark-text-color);
   display: block;
   flex: 1 1 auto;
   margin: 0;
   position: relative;
   white-space: nowrap;

}

.submenu li > a {

   text-transform: none;

}

.submenu li:hover > a {

   /* border-left-color: var(--light-gray); */
   background-color: var(--dark-background-color);
   color: var(--light-text-color);

}

.subsubmenu {

   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   padding: 0;

}

.subsubmenu span {

   display: block;
   padding: 10px;
   font-weight: bold;

}

@media (min-height: 500px) {

   header {
       align-items: center;
       justify-content: space-between;
       position: -webkit-sticky; /* Unpleasant safari hack */
       position: sticky;
   }

}

@media (min-width: 500px) {

   .col-to-row {
       flex-direction: row;
   }

   .logo {
       padding: 5px;
   }

   .enlarge-line-height {
       line-height: 1.5em;
   }

   .submenu {
       box-shadow: var(--material-shadow-2dp);
       left: 0px;
       position: absolute;
   }

   .submenu, .subsubmenu {
       line-height: 1em;
   }

} footer {

   background-color: var(--footer-background-color);
   align-items: center;
   box-shadow: var(--material-shadow-2dp);
   color: var(--dark-text-color);
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   margin: auto;
   max-width: 1280px;
   width: 100%;

}

footer a {

   display: block;

}

.contact {

   display: flex;
   flex: 0 1 auto;
   flex-flow: row nowrap;
   list-style-type: none;
   margin: 0;
   padding: 0;

}

.contact img {

   width: 30px;

}

.hover_group:hover {

 opacity: 1;

}

projectsvg {

 position: relative;
 width: 100%;
 padding-bottom: 77%;
 vertical-align: middle;
 margin: 0;
 overflow: hidden;

}

projectsvg svg {

 display: inline-block;
 position: absolute;
 top: 0;
 left: 0;

}

.imprint {

   display: flex;
   flex: 0 1 0;
   flex-flow: column nowrap;
   min-width: 300px;

}

.sponsor-list {

   display: none;
   flex: 1 1 0;
   min-width: 400px;

}

.sponsor-list > ul {

   align-items: center;
   display: flex;
   flex-flow: row wrap;

}

.sponsor-list > ul > li {

   display: block;
   flex: 0 1 auto;
   margin: 10px auto;
   padding: 0 10px;

}

.sponsor-list img {

   max-width: 150px;

}

.sponsor-a {

   color: var(--dark-text-color);
   display: block;
   text-decoration: none;
   text-transform: uppercase;

}

ETHZ {

   background-color: var(--light-background-color);
   display: block;
   flex: 0 1 auto;

}

ETHZ img {

   margin: 20px auto;
   max-width: 150px;

}

SISF img {

   max-width: 300px;

}

goto-top {

   background-color: var(--dark-blue);
   border: none; /* Remove borders */
   border-radius: 10px; /* Rounded corners */
   bottom: 10px;
   color: var(--light-text-color);
   cursor: pointer;
   display: none;
   opacity: 0.5;
   padding: 10px;
   position: fixed;
   right: 10px;
   z-index: 10;

}

goto-top:hover {

   opacity: 1;

}