Difference between revisions of "Team:TUDelft/css/custom"

 
(33 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
/*
 
/*
−
#globalWrapper {
+
#top_menu_14 {
 
     background-color: #ff9800;
 
     background-color: #ff9800;
 +
    border-bottom: 2px solid #ff9800;
 +
    transition: all .25s ease-in-out;
 +
    z-index: 3;
 +
}
 +
 +
#top_menu_14:hover,
 +
#top_menu_14.hover {
 +
    background-color: black;
 +
    border-bottom: 2px solid black;
 
}
 
}
 
*/
 
*/
Line 10: Line 19:
 
/*  Media wiki removal
 
/*  Media wiki removal
 
**********************************/
 
**********************************/
 +
 +
nav ul {
 +
    line-height: 56px;
 +
}
 +
 +
#content {
 +
    margin-top: 0px !important;
 +
}
  
 
#top_menu_inside #user_item {
 
#top_menu_inside #user_item {
Line 20: Line 37:
  
 
#globalWrapper {
 
#globalWrapper {
−
  padding-bottom: 0px;
+
    padding-bottom: 0px;
−
  z-index: 30;
+
    z-index: 30;
 
}
 
}
  
−
#top_menu_14 {
+
#top_menu_inside {
−
     opacity: 1;
+
     opacity: 0;
−
     -webkit-transition: opacity .25 ease-in-out;
+
     -webkit-transition: opacity .25s ease-in-out;
−
     transition: opacity .25 ease-in-out;
+
     transition: opacity .25s ease-in-out;
 
}
 
}
  
−
#top_menu_14:hover {
+
#top_menu_inside,
−
  opacity: 1;
+
#top_menu_14.hover {
 +
    opacity: 1;
 
}
 
}
  
 
.igem_2017_menu_wrapper {
 
.igem_2017_menu_wrapper {
−
  z-index: 10;
+
    z-index: 10;
−
  display: none;
+
    display: none;
 
}
 
}
  
 
ul {
 
ul {
−
  margin-left: 0;
+
    margin-left: 0;
 
}
 
}
  
 
#top_menu_under {
 
#top_menu_under {
−
  height: 0px;
+
    height: 0px;
 
}
 
}
−
#top_menu_14 {
+
 
−
  position: initial;
+
nav ul a:hover {
 +
    text-decoration: none;
 +
}
 +
 
 +
/* ONE MORE THING (TO HAVE NO SHADOW ON TOP OF OUR NAV BAR) */
 +
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
 
 +
nav {
 +
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 +
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 
}
 
}
  
  
 
/* GENERAL */
 
/* GENERAL */
 +
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
−
html {
+
#up-btn {
−
      
+
     position: fixed;
 +
    color: blue;
 +
    opacity: .3;
 +
    bottom: 30px;
 +
    right: 30px;
 +
    z-index: 500;
 +
    background-repeat: no-repeat;
 +
    background-size: contain;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/e/ec/T--TUDelft--2017_top.png");
 +
/*
 +
    mask-image: url("https://static.igem.org/mediawiki/2017/e/ec/T--TUDelft--2017_top.png");
 +
    mask-size: contain;
 +
    -webkit-mask-image: url("https://static.igem.org/mediawiki/2017/e/ec/T--TUDelft--2017_top.png");
 +
    -webkit-mask-size: contain;
 +
*/
 +
 
 +
/*    background-color: blue;*/
 +
    background-size: contain;
 +
    height: 4em;
 +
    width: 4em;
 
}
 
}
 +
 +
html {}
  
 
body {
 
body {
Line 61: Line 110:
 
}
 
}
  
−
.mediawiki, #globalWrapper{
+
.mediawiki,
 +
#globalWrapper {
 
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
}
 
}
  
−
.mediawiki p, #globalWrapper p {
+
.mediawiki p,
−
     margin: 1em 0
+
#globalWrapper p {
 +
     margin: 1em 0;
 +
    text-align: justify;
 +
    text-justify: inter-word;
 
}
 
}
  
−
.mediawiki h1 {
+
.mediawiki h1, #globalWrapper h1 {
 
     border-bottom: 1px solid #aaa;
 
     border-bottom: 1px solid #aaa;
 
}
 
}
  
−
.mediawiki h3 {
+
.mediawiki h3, #globalWrapper h3 {
 
     margin-top: 3rem;
 
     margin-top: 3rem;
 
}
 
}
  
−
.mediawiki h1,
+
.mediawiki h1, #globalWrapper h1,
−
.mediawiki h2,
+
.mediawiki h2, #globalWrapper h2,  
−
.mediawiki h3,
+
.mediawiki h3, #globalWrapper h3,  
−
.mediawiki h4,
+
.mediawiki h4, #globalWrapper h4,  
−
.mediawiki h5,
+
.mediawiki h5, #globalWrapper h5,  
−
.mediawiki h6 {
+
.mediawiki h6, #globalWrapper h6 {
 
     color: rgb(34, 34, 34);
 
     color: rgb(34, 34, 34);
 
     font-weight: 300;
 
     font-weight: 300;
Line 89: Line 142:
 
}
 
}
  
−
.mediawiki p, #globalWrapper p {
+
.mediawiki p,
 +
#globalWrapper p {
 
     color: rgb(34, 34, 34);
 
     color: rgb(34, 34, 34);
 
     opacity: 0.87;
 
     opacity: 0.87;
Line 98: Line 152:
 
}
 
}
  
−
/* Lists Skeleton
+
/* BLOCKQUOTES */
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
 
 +
blockquote {
 +
   
 +
}
 +
 
 +
blockquote {
 +
  display:block;
 +
  background: #fff;
 +
  padding: 15px 20px 15px 80px;
 +
  margin: 0 0 20px;
 +
  position: relative;
 +
 
 +
  /*Font*/
 +
  font-size: 25px;
 +
  line-height: 1.2;
 +
  color: #666;
 +
  text-align: justify;
 +
 
 +
  /*Borders - (Optional)*/
 +
  border-left: 15px solid #ec407a;
 +
  border-right: 2px solid #ec407a;
 +
 
 +
  /*Box Shadow - (Optional)*/
 +
  -webkit-box-shadow: 2px 2px 15px #ccc;
 +
  box-shadow: 2px 2px 15px #ccc;
 +
}
 +
 
 +
.project blockquote {
 +
  border-left: 15px solid #26c6da;
 +
  border-right: 2px solid #26c6da;
 +
}
 +
 
 +
.HP blockquote {
 +
  border-left: 15px solid #ec407a;
 +
  border-right: 2px solid #ec407a;
 +
}
 +
 
 +
.contribution blockquote, .contribution blockquote {
 +
  border-left: 15px solid #26a69a;
 +
  border-right: 2px solid #26a69a;
 +
}
 +
 
 +
.acknowledgement bockquote, .acknowledgements blockquote {
 +
  border-left: 15px solid #ffa726;
 +
  border-left: 2px solid #ffa726;
 +
}
 +
 
 +
.team blockquote {
 +
  border-left: 15px solid #ef5350;
 +
  border-left: 2px solid #ef5350;
 +
}
 +
 
 +
.lab blockquote{
 +
  border-left: 15px solid #ab47bc;
 +
  border-left: 2px solid #ab47bc;
 +
}
 +
 
 +
.project .collapsible-header {
 +
    background-color: #00bcd4;
 +
    font-size: 1.5em;
 +
    color: white;
 +
}
 +
 
 +
.HP .collapsible-header {
 +
    background-color: #e91e63;
 +
    font-size: 1.5em;
 +
    color: white;
 +
}
 +
 
 +
.contribution .collapsible-header, .contributions .collapsible-header {
 +
    background-color: #009688;
 +
    font-size: 1.5em;
 +
    color: white;
 +
}
 +
 
 +
.acknowlegdements .collapsible-header, acknowlegdement .collapsible-header {
 +
    background-color: #ff9800;
 +
    font-size: 1.5em;
 +
    color: white
 +
}
 +
 
 +
.team .collapsible-header {
 +
    background-color: #f44336;
 +
    font-size: 1.5em;
 +
    color: white
 +
}
 +
 
 +
.lab .collapsible-header {
 +
    background-color: #9c27b0;
 +
    font-size: 1.5em;
 +
    color: white
 +
}
 +
 
 +
 
 +
 
 +
blockquote:not(.no-quote)::before{
 +
  content: "\201C"; /*Unicode for Left Double Quote*/
 +
 
 +
  /*Font*/
 +
  font-size: 60px;
 +
  font-weight: bold;
 +
      font-family: Georgia, serif;
 +
 
 +
 
 +
  /*Positioning*/
 +
  position: absolute;
 +
  left: 10px;
 +
  top:5px;
 +
}
 +
 
 +
blockquote.no-quote {
 +
    word-wrap: break-word;
 +
    text-align: left;
 +
    padding-left: 20px;
 +
}
 +
 
 +
blockquote::after{
 +
  /*Reset to make sure*/
 +
  content: "";
 +
}
 +
 
 +
blockquote cite {
 +
    text-indent: 300px;
 +
    padding-top: 20px;
 +
    font-style: italic;
 +
    display: block;
 +
}
 +
 
 +
/* KATEX */
 +
 
 +
#top_menu_14 {
 +
/*
 +
    background-color: {{{2}}};
 +
    border-bottom: 2px solid {{{2}}};
 +
*/
 +
    -webkit-transition: all .25s ease-in-out;
 +
    transition: all .25s ease-in-out;
 +
    z-index: 3;
 +
}
 +
 
 +
#top_menu_14,
 +
#top_menu_14.hover {
 +
    background-color: black;
 +
    border-bottom: 2px solid black;
 +
}
 +
   
 +
.katex-display {
 +
  position: relative;
 +
}
 +
 
 +
.katex-display .katex .eqno {
 +
  display: block;
 +
  position: absolute;
 +
  right: 0;
 +
  top: 50%;
 +
  line-height: 0;
 +
}
 +
 
 +
 
 +
/* Lists Skeleton */
 +
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
 
ol.skel {
 
ol.skel {
−
  list-style: decimal inside; }
+
    list-style: decimal inside;
−
ol.skel, ul.skel {
+
−
  padding-left: 0;
+
−
  margin-top: 0;
+
−
  list-style: disc inside;
+
 
}
 
}
 +
 +
ol.skel,
 +
ul.skel {
 +
    padding-left: 0;
 +
    margin-top: 0;
 +
    list-style: disc inside;
 +
}
 +
 
ul.skel ul.skel,
 
ul.skel ul.skel,
 
ul.skel ol.skel,
 
ul.skel ol.skel,
 
ol.skel ol.skel,
 
ol.skel ol.skel,
 
ol.skel ul.skel {
 
ol.skel ul.skel {
−
  margin: 1.5rem 0 1.5rem 3rem;
+
    margin: 1.5rem 0 1.5rem 3rem;
−
  font-size: 90%;  
+
    font-size: 90%;
−
  list-style: circle inside;
+
    list-style: circle inside;
 
}
 
}
 +
 
.skel li {
 
.skel li {
−
  margin-bottom: 1rem; }
+
    margin-bottom: 1rem;
 +
}
  
 
ul.skel ul.skel ul.skel {
 
ul.skel ul.skel ul.skel {
Line 124: Line 345:
 
     font-size: 90%;
 
     font-size: 90%;
 
}
 
}
 +
 +
/* TABLE */
 +
 +
#primers thead {
 +
    border-color: #4caf50;
 +
}
 +
 +
#primers tr:nth-child(even) {
 +
    background-color: #c8e6c9;
 +
}
 +
 +
#parts-page thead {
 +
    border-color: #4caf50;
 +
}
 +
 +
#parts-page tr:nth-child(even) {
 +
    background-color: #c8e6c9;
 +
}
 +
 +
.notebook thead {
 +
    border-color: #9c27b0;
 +
}
 +
 +
/*
 +
.notebook tr:nth-child(even) {
 +
    background-color: #e1bee7;
 +
}
 +
*/
  
 
.flex {
 
.flex {
Line 149: Line 398:
 
}
 
}
  
−
html, body {
+
html,
 +
body {
 
     max-width: 100%;
 
     max-width: 100%;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
Line 168: Line 418:
 
     }
 
     }
 
}
 
}
−
.align-center>div {
+
 
 +
.align-center > div {
 
     display: block;
 
     display: block;
 
}
 
}
Line 175: Line 426:
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
 +
}
 +
 +
.row .center-margin.col {
 +
    float: initial;
 
}
 
}
  
Line 186: Line 441:
  
 
.white-text-hack {
 
.white-text-hack {
−
     color: white; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;
+
     color: white !important;
 +
    -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
    cursor: default;
 
}
 
}
  
Line 193: Line 453:
  
 
/* OVERWRITES FOR MENU BAR */
 
/* OVERWRITES FOR MENU BAR */
 +
 +
  
 
ul {
 
ul {
Line 198: Line 460:
 
}
 
}
  
−
nav ul a:visited {
+
#nav ul a {
 +
    color: #fff;
 +
}
 +
 
 +
nav ul a:visited, #nav ul a:visited {
 
     color: #fff;
 
     color: #fff;
 
}
 
}
Line 208: Line 474:
  
 
@media only screen and (min-width: 760px) {
 
@media only screen and (min-width: 760px) {
−
     nav, nav ul:not(.dropdown-content) {
+
     nav,
 +
    nav ul:not(.dropdown-content) {
 
         height: 35px;
 
         height: 35px;
 
         line-height: 36px;
 
         line-height: 36px;
Line 215: Line 482:
  
 
@media only screen and (max-width: 1050px) {
 
@media only screen and (max-width: 1050px) {
−
     #nav-buttons>li>a {
+
     #nav-buttons > li > a {
 
         max-width: 70px;
 
         max-width: 70px;
 
         overflow: hidden;
 
         overflow: hidden;
Line 273: Line 540:
 
/* SAFARI ONLY CSS */
 
/* SAFARI ONLY CSS */
  
−
@media not all and (min-resolution:.001dpcm) { @media {
+
@media not all and (min-resolution:.001dpcm) {
−
    #nav i { top:0; }
+
    @media {
−
    #safari-phone-hack i { top: -11px;}
+
        #nav i {
 +
            top: 0;
 +
        }
 +
        #safari-phone-hack i {
 +
            top: -11px;
 +
        }
  
−
} }
+
    }
−
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media {  
+
}
−
    #nav i { top:0; }
+
 
−
    #safari-phone-hack i { top: -11px;}
+
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
−
} }
+
    @media {
 +
        #nav i {
 +
            top: 0;
 +
        }
 +
        #safari-phone-hack i {
 +
            top: -11px;
 +
        }
 +
    }
 +
}
  
 
/* ENDED HACKING */
 
/* ENDED HACKING */
Line 293: Line 573:
 
}
 
}
  
−
.menu-hover>span {
+
.menu-hover > span {
 
     max-width: 0px;
 
     max-width: 0px;
 
     display: inline-block;
 
     display: inline-block;
Line 302: Line 582:
  
 
@media only screen and (min-width: 1150px) {
 
@media only screen and (min-width: 1150px) {
−
     .menu-hover:hover>span {
+
     .menu-hover:hover > span {
 
         max-width: 200px;
 
         max-width: 200px;
 
     }
 
     }
Line 328: Line 608:
 
         display: none;
 
         display: none;
 
     }
 
     }
−
     #nav-buttons>li {
+
     #nav-buttons > li {
 
         float: none;
 
         float: none;
 
     }
 
     }
Line 334: Line 614:
 
         display: inline-block;
 
         display: inline-block;
 
     }
 
     }
−
     #nav-buttons>li>a>i,
+
     #nav-buttons > li > a > i,
−
     #contact>li>a>i {
+
     #contact > li > a > i {
 
         line-height: 64px;
 
         line-height: 64px;
 
     }
 
     }
−
     #nav-buttons>li>a,
+
     #nav-buttons > li > a,
−
     #contact>li>a {
+
     #contact > li > a {
 
         height: 64px;
 
         height: 64px;
 
     }
 
     }
−
     #nav-buttons>li>a {
+
     #nav-buttons > li > a {
 
         max-width: 275px;
 
         max-width: 275px;
 
     }
 
     }
Line 361: Line 641:
  
 
@media only screen and (max-width: 600px) {
 
@media only screen and (max-width: 600px) {
−
     img+img {
+
     img + img {
 
         margin-top: 2em;
 
         margin-top: 2em;
 
     }
 
     }
Line 412: Line 692:
 
     background-size: contain;
 
     background-size: contain;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 +
}
 +
 +
/* TOP IMAGE */
 +
 +
.top {
 +
    height: 100vh;
 +
    width: 100vw;
 +
    position: relative;
 +
}
 +
 +
#globalWrapper .top p {
 +
    font-size: 25vh;
 +
    margin: 0;
 +
    text-align: center;
 +
    height: 27vh;
 +
    margin-top: -7vh;
 +
}
 +
 +
.top img {
 +
    max-width: 100%;
 +
    max-height: 75vh;
 +
    display: block;
 +
    margin: auto;
 +
    padding: 5vh
 +
}
 +
 +
.top-c {
 +
    height: 100vh;
 +
    width: 100vw;
 +
    position: relative;
 +
}
 +
 +
.top div {
 +
    height: 75vh;
 +
}
 +
 +
.top-c div {
 +
    height: 100vh;
 +
}
 +
 +
.top-c img {
 +
    max-width: 100%;
 +
    max-height: 75vh;
 +
    display: block;
 +
    margin: auto;
 +
    padding: 5vh
 +
}
 +
 +
.topper {
 +
    height: 100vh;
 +
    width: 100vw;
 +
    padding-top: 20px;
 +
    padding-bottom: 80px;
 +
}
 +
 +
.topper img {
 +
    margin: auto;
 +
    display: block;
 +
    max-width: 100%;
 +
    max-height: 100%;
 +
}
 +
 +
.topper-inner > a {
 +
    position: absolute;
 +
    z-index: 10;
 +
}
 +
 +
.topper-inner a:hover + img {
 +
    opacity: 1;
 +
}
 +
 +
.topper-inner {
 +
    display: inline-block;
 +
    position: relative;
 +
}
 +
 +
.topper-inner img:first-child {
 +
    max-height: 90vh;
 +
}
 +
 +
.topper-inner img:not(:first-child) {
 +
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    opacity: 0;
 +
}
 +
 +
.topper-inner2 {
 +
    display: inline-block;
 +
    position: relative;
 +
}
 +
 +
.topper-inner2 img {
 +
    max-height: 90vh;
 +
}
 +
 +
.topper-inner2 > a {
 +
    position: absolute;
 +
    z-index: 10;
 
}
 
}
  
Line 437: Line 818:
 
.hero {
 
.hero {
 
     background-color: #fff;
 
     background-color: #fff;
−
 
−
   
 
 
     position: relative;
 
     position: relative;
 
     background-blend-mode: multiply;
 
     background-blend-mode: multiply;
Line 469: Line 848:
 
     font-size: 12em;
 
     font-size: 12em;
 
     z-index: 70;
 
     z-index: 70;
 +
    opacity: 1 !important;
 
}
 
}
  
 
.hero p span,
 
.hero p span,
−
.hero p i {
+
.hero p i {}
−
 
+
−
}
+
  
 
#design p {
 
#design p {
 
     top: 47%;
 
     top: 47%;
 
     left: 57%;
 
     left: 57%;
 +
    color: white;
 +
    font-size: 11em;
 
}
 
}
  
Line 488: Line 868:
 
     top: 50%;
 
     top: 50%;
 
     left: 50%;
 
     left: 50%;
−
     color: rgb(183, 28, 28);
+
     color: dimgrey;
−
     font-size: 8em;
+
     font-size: 7em;
 
}
 
}
  
Line 495: Line 875:
 
     background-image: url("https://static.igem.org/mediawiki/2017/2/26/T--TUDelft--2017_world-map-adjusted.png");
 
     background-image: url("https://static.igem.org/mediawiki/2017/2/26/T--TUDelft--2017_world-map-adjusted.png");
 
}
 
}
 +
 
/*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/
 
/*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/
 +
 
#newsletter p {
 
#newsletter p {
 
     top: 15%;
 
     top: 15%;
 
     left: 50%;
 
     left: 50%;
 
     color: #e91e63;
 
     color: #e91e63;
−
     font-size: 9em;
+
     font-size: 8em;
 +
    opacity: 1;
 
}
 
}
  
 
#newsletter {
 
#newsletter {
 
     background-image: url("https://static.igem.org/mediawiki/2017/d/d8/T--TUDelft--2017_Letter-adjusted.png");
 
     background-image: url("https://static.igem.org/mediawiki/2017/d/d8/T--TUDelft--2017_Letter-adjusted.png");
−
}  
+
}
 +
 
 
/*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/
 
/*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/
−
 
  
 
#acknowlegdement p {
 
#acknowlegdement p {
Line 513: Line 896:
 
     left: 45%;
 
     left: 45%;
 
     font-size: 4.5em;
 
     font-size: 4.5em;
 +
    color: white;
 
}
 
}
  
Line 522: Line 906:
 
     top: 49%;
 
     top: 49%;
 
     left: 46%;
 
     left: 46%;
−
     font-size: 8em;
+
     font-size: 7em;
 +
    color: white;
 
}
 
}
  
Line 539: Line 924:
 
     height: 85vh;
 
     height: 85vh;
 
}
 
}
 +
 +
#interlab p {
 +
    top: 50%;
 +
    left: 47%;
 +
    color: black;
 +
}
 +
 +
#interlab {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/3/31/T--TUDelft--2017_interlab_V3.png");
 +
}
 +
 
#IHP p {
 
#IHP p {
 
     top: 50%;
 
     top: 50%;
 
     left: 50%;
 
     left: 50%;
−
     font-size: 8em;
+
     font-size: 6em;
 +
    color: white;
 +
   
 
}
 
}
  
Line 550: Line 948:
  
 
#parts p {
 
#parts p {
−
     top: 56%;
+
     top: 35%;
−
     left: 38%;
+
     left: 47%;
 
     font-size: 9.5em;
 
     font-size: 9.5em;
 +
    color: white;
 +
   
 
}
 
}
  
 
#parts {
 
#parts {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/1/15/T--TUDelft--2017_parts_stain_V3.png");
 +
}
 +
 +
#project p {
 +
    top: 57%;
 +
    left: 40%;
 +
    font-size: 8em;
 +
    color: white;
 +
}
 +
 +
#project {
 
     background-image: url("https://static.igem.org/mediawiki/2017/a/a0/T--TUDelft--2017_parts_vlek_v3.png");
 
     background-image: url("https://static.igem.org/mediawiki/2017/a/a0/T--TUDelft--2017_parts_vlek_v3.png");
 
}
 
}
Line 561: Line 972:
  
  
−
/* MAIN HOMEPAGE*/
 
  
  
 +
/* MAIN HOMEPAGE*/
  
 
#thisList li {
 
#thisList li {
Line 576: Line 987:
 
     height: 0;
 
     height: 0;
 
}
 
}
 +
 
@media only screen and (max-width: 1050px) {
 
@media only screen and (max-width: 1050px) {
−
     #row1 div, #row2 div, #row3 div, #row4 div, #row5 div, #row6 div {
+
     #row1 div,
 +
    #row2 div,
 +
    #row3 div,
 +
    #row4 div,
 +
    #row5 div,
 +
    #row6 div {
 
         display: none;
 
         display: none;
 
     }
 
     }
Line 888: Line 1,305:
 
/* PAGE GENERALS */
 
/* PAGE GENERALS */
  
−
#references a:hover {
+
#references, #references-scroll {
−
     text-decoration: underline;
+
     margin-top: 1em;
 
}
 
}
  
−
a[href="#references"] {
+
#globalWrapper .row a {
−
     color: rgb(34, 34, 34);
+
     padding-right: 0;  
 
}
 
}
  
−
a[href="#references"]:hover {
+
#globalWrapper .navbar-fixed nav ul a {
−
     color: grey;
+
     padding-right: 15px;  
 
}
 
}
−
 
  
 
/* FOOTER */
 
/* FOOTER */
 +
 +
footer {
 +
    position: relative;
 +
    background-color: #fff;
 +
}
  
 
.sponsors img {
 
.sponsors img {
Line 915: Line 1,336:
 
     display: block;
 
     display: block;
 
     position: relative;
 
     position: relative;
−
    top: -2.5em;
+
/*    top: -2.5em;*/
 
}
 
}
  
Line 933: Line 1,354:
 
     -ms-flex: 1 0 auto;
 
     -ms-flex: 1 0 auto;
 
     flex: 1 0 auto;
 
     flex: 1 0 auto;
 +
    -ms-flex-positive: 1;
 +
    flex-grow: 1;
 +
    -ms-flex-negative: 0;
 +
    flex-shrink: 0;
 +
    -ms-flex-preferred-size: auto;
 +
    flex-basis: auto;
 +
 +
    -webkit-flex-grow: 1;
 +
    -webkit-flex-shrink: 0;
 +
    -webkit-flex-basis: auto;
 
}
 
}
 +
 +
/*
 +
body {
 +
  display: flex;
 +
  display: -webkit-flex;
 +
  min-height: 100vh;
 +
  flex-direction: column;
 +
  -webkit-flex-direction: column;
 +
}
 +
 +
main {
 +
  flex-grow: 1;
 +
  flex-shrink: 0;
 +
  flex-basis: auto;
 +
 +
  -webkit-flex-grow: 1;
 +
  -webkit-flex-shrink: 0;
 +
  -webkit-flex-basis: auto;
 +
}
 +
*/
  
  
 
/* TOC */
 
/* TOC */
  
−
#toc {
+
#tocc {
 
     padding: 0.1px;
 
     padding: 0.1px;
 +
    position: fixed;
 +
    top: 22vh;
 +
    right: 30px;
 +
   
 
}
 
}
  
−
#toc a {
+
#tocc a {
 
     color: rgb(34, 34, 34);
 
     color: rgb(34, 34, 34);
 
}
 
}
  
−
#toc a::before {
+
#tocc a::before {
 
     display: inline-block;
 
     display: inline-block;
 
     width: 20px;
 
     width: 20px;
Line 957: Line 1,412:
 
     top: 3px;
 
     top: 3px;
 
     z-index: 10;
 
     z-index: 10;
−
     background-image: url("https://static.igem.org/mediawiki/2017/f/f4/T--TUDelft--2017_vesicle.png");
+
     background-image: url("https://static.igem.org/mediawiki/2017/2/29/T--TUDelft--2017_gear2.png");
 
     opacity: 0;
 
     opacity: 0;
 
     -webkit-transition: opacity .5s ease-out 0s;
 
     -webkit-transition: opacity .5s ease-out 0s;
Line 963: Line 1,418:
 
}
 
}
  
−
#toc a.active::before {
+
#tocc a.active::before {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#toc li {
+
#tocc li {
 
     padding-left: 20px;
 
     padding-left: 20px;
 
     text-indent: -20px;
 
     text-indent: -20px;
Line 979: Line 1,434:
 
}
 
}
  
−
#team-hero>img {
+
#team-hero > img {
 
     z-index: -1;
 
     z-index: -1;
 +
}
 +
 +
#hover2 {
 +
    position: absolute;
 +
    top: 22%;
 +
    left: 50%;
 +
    height: 17%;
 +
    width: 17%;
 
}
 
}
  
Line 991: Line 1,454:
 
}
 
}
  
−
#hover1:hover>div {
+
#hover1:hover > div {
 
     width: 22em;
 
     width: 22em;
 
     opacity: 1;
 
     opacity: 1;
Line 1,016: Line 1,479:
 
}
 
}
  
−
.weetje>img {
+
.weetje > img {
 
     height: 5em;
 
     height: 5em;
 
     width: 5em;
 
     width: 5em;
Line 1,026: Line 1,489:
  
 
#hover1:hover {
 
#hover1:hover {
−
     cursor: help;
+
     cursor: pointer;
 
}
 
}
  
−
#team-members>div {
+
#team-members > div {
 
     padding: 40px;
 
     padding: 40px;
 
}
 
}
  
−
#team-members img, #supervisors img {
+
#team-members img,
 +
#supervisors img {
 
     -o-object-fit: cover;
 
     -o-object-fit: cover;
 
     object-fit: cover;
 
     object-fit: cover;
Line 1,057: Line 1,521:
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
}
 
}
 +
 
#team-members h4 + p {
 
#team-members h4 + p {
 
     margin-top: 0;
 
     margin-top: 0;
Line 1,064: Line 1,529:
  
 
#presenters img {
 
#presenters img {
−
     padding: 0 70px;
+
     padding: 0 4vw;
 
}
 
}
 +
 
#presenters .align-center {
 
#presenters .align-center {
 
     margin: 0px;
 
     margin: 0px;
Line 1,085: Line 1,551:
  
 
#newsletter-collapsible .collapsible-header {
 
#newsletter-collapsible .collapsible-header {
−
    background-color: #e91e63;
 
 
     color: #fff;
 
     color: #fff;
 
     display: inherit;
 
     display: inherit;
Line 1,092: Line 1,557:
 
     font-size: 45px;
 
     font-size: 45px;
 
}
 
}
 +
 +
#newsletter-collapsible .collapsible-header {
 +
    background-color: #e91e63;
 +
}
 +
 +
/*
 +
#protocols .collapsible-header {
 +
    background-color: #9c27b0;
 +
    line-height: 35px;
 +
    padding-top: 28px;
 +
}
 +
*/
  
 
#newsletter-collapsible li {
 
#newsletter-collapsible li {
 
     margin: 0;
 
     margin: 0;
 +
}
 +
 +
#newsletter-collapsible h1 {
 +
    border: none;
 
}
 
}
  
Line 1,102: Line 1,583:
 
     position: fixed;
 
     position: fixed;
 
     top: 10%;
 
     top: 10%;
−
     left: 7%;
+
     left: 13%;
 
     width: .13em;
 
     width: .13em;
 
     height: 70vh;
 
     height: 70vh;
Line 1,110: Line 1,591:
  
 
#timeline a div {
 
#timeline a div {
−
     height: .4em;
+
     height: .6em;
−
     width: .4em;
+
     width: .6em;
 
     border-radius: 50%;
 
     border-radius: 50%;
−
     background-color: #9c27b0;
+
     background-color: white;
−
     left: -.13em;
+
     left: -.24em;
 +
    border: 1.5px solid #9c27b0;
 
}
 
}
  
−
#timeline a.active > div {
+
#timeline a.active div {
−
     background-color: #4a148c;
+
     background-color: #9c27b0;
 
}
 
}
  
 
#timeline a > div:hover {
 
#timeline a > div:hover {
−
     background-color: #7b1fa2;
+
     background-color: #9c27b0;
 
}
 
}
  
−
#timeline a>p {
+
#timeline a > p {
 
     position: absolute;
 
     position: absolute;
 
     top: -1.5em;
 
     top: -1.5em;
−
     left: -4.1em;
+
     left: -6.1em;
 
     width: 100px;
 
     width: 100px;
 
     color: rgb(34, 34, 34);
 
     color: rgb(34, 34, 34);
 +
    z-index: -1;
 
}
 
}
  
Line 1,141: Line 1,624:
 
}
 
}
  
−
#round23 {
+
#round24 {
 
     top: 4vh
 
     top: 4vh
−
}
 
−
 
−
#round24 {
 
−
    top: 14vh
 
 
}
 
}
  
 
#round25 {
 
#round25 {
−
     top: 24vh;
+
     top: 7.5vh;
 
}
 
}
  
 
#round26 {
 
#round26 {
−
     top: 34vh;
+
     top: 11vh;
 
}
 
}
  
 
#round27 {
 
#round27 {
−
     top: 44vh;
+
     top: 14.5vh;
 
}
 
}
  
 
#round28 {
 
#round28 {
−
     top: 54vh;
+
     top: 18vh;
 
}
 
}
  
 
#round29 {
 
#round29 {
 +
    top: 21.5vh;
 +
}
 +
 +
#round30 {
 +
    top: 25vh;
 +
}
 +
 +
#round31 {
 +
    top: 28.5vh;
 +
}
 +
 +
#round32 {
 +
    top: 32vh;
 +
}
 +
 +
#round33 {
 +
    top: 35.5vh;
 +
}
 +
 +
#round34 {
 +
    top: 39.5vh;
 +
}
 +
 +
#round35 {
 +
    top: 43vh;
 +
}
 +
 +
#round36 {
 +
    top: 46.5vh;
 +
}
 +
 +
#round37 {
 +
    top: 50vh;
 +
}
 +
 +
#round38 {
 +
    top: 53.5vh;
 +
}
 +
 +
#round39 {
 +
    top: 57vh;
 +
}
 +
 +
#round40 {
 +
    top: 60.5vh
 +
}
 +
 +
#round41 {
 
     top: 64vh;
 
     top: 64vh;
 +
}
 +
 +
#round42 {
 +
    top: 67.5vh
 
}
 
}
  
 
/* NOTEBOOK */
 
/* NOTEBOOK */
  
−
#notebook-buttons .btn:not(.active){
+
#globalWrapper .row .btn {
 +
    padding-right: 2em ;
 +
}
 +
 
 +
#notebook-buttons .btn.active {
 +
    color: white;
 +
}
 +
 
 +
#notebook-buttons i {
 +
    color: white;
 +
}
 +
 
 +
#notebook-buttons .btn:not(.active) i {
 +
    display: none;
 +
}
 +
 
 +
#notebook-buttons > p {
 +
    margin: .1em;
 +
    color: grey;
 +
    font-size: 20px;
 +
}
 +
 
 +
#notebook-buttons .btn:not(.active) {
 
     background-color: rgb(255, 255, 255) !important;
 
     background-color: rgb(255, 255, 255) !important;
 
     color: rgba(0, 0, 0, 0.87);
 
     color: rgba(0, 0, 0, 0.87);
Line 1,183: Line 1,736:
 
     padding: 20px 20px 0;
 
     padding: 20px 20px 0;
 
}
 
}
 +
 +
.notebook h3, .protocol h4 {
 +
    font-size: 2.5em;
 +
    font-weight: 800
 +
}
 +
 +
.notebook h4, .protocol h3 {
 +
    font-size: 1.8em;
 +
}
 +
 +
/* FANCY THINGS */
 +
 +
/*
 +
.modal-overlay {
 +
    opacity: 0 !important;
 +
}
 +
*/
 +
 +
pre.DNA {
 +
    font-size: 1em;
 +
    background-color: white;
 +
    color: black;
 +
    line-height: 1.5;
 +
    border: 1px solid grey;
 +
    width: -webkit-fit-content;
 +
    width: -moz-fit-content;
 +
    width: fit-content;
 +
    padding: 1em;
 +
}
 +
 +
span.code {
 +
    font-family: monospace, monospace;
 +
    font-size: 1.2em;
 +
}
 +
 +
#globalWrapper .open::before {
 +
    content: "" !important;
 +
}
 +
 +
.model {
 +
    max-height: 85%;
 +
    width: 85%;
 +
}
 +
 +
@media only screen and (min-width: 760px) {
 +
    .dropdown-content {
 +
        overflow-y: visible;
 +
    }
 +
}
 +
 +
#nav .dropdown-content.nested {
 +
  overflow: visible;
 +
}
 +
 +
#nav .dropdown-content .dropdown-content {
 +
  margin-left: 100%;
 +
    -webkit-transform: translate(0px, -50px);
 +
    transform: translate(0px, -50px);
 +
}
 +
 +
.link {
 +
    position: relative;
 +
    border-top: 1px solid rgba(160, 160, 160, 0.2);
 +
    padding: 1.5em .5em 0;
 +
}
 +
 +
.link > a {
 +
    font-size: 20px;
 +
    text-transform: uppercase;
 +
}
 +
 +
#HP-Timeline {
 +
    position: relative;
 +
    width: 100%;
 +
/*
 +
    background-image: url("https://static.igem.org/mediawiki/2017/7/7d/T--TUDelft--2017_Timeline_Final_V4.jpg");
 +
    width: 100%;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: contain;
 +
*/
 +
}
 +
 +
#HP-Timeline > a {
 +
    position: absolute;
 +
}
 +
 +
.table-style1 tr > td:first-child, .table-style2 tr > td:first-child {
 +
    border-right: 1px solid #d0d0d0;
 +
    font-weight: 800;
 +
}
 +
 +
.table-style1 tr > td, .table-style2 tr > td {
 +
    padding-right: 20px;
 +
}
 +
 +
table.table-style2 {
 +
    width: auto;
 +
}
 +
 +
.table-style2 tr:nth-child(even) {
 +
    background-color: #b2ebf2;
 +
}
 +
 +
#globalWrapper .card > h1 {
 +
    border: none;
 +
}
 +
 +
table.table-style3 tr > td:first-child {
 +
    border-right: 1px solid #d0d0d0;
 +
}
 +
 +
table.table-style3 tr {
 +
    border-bottom: 1px solid #d0d0d0;
 +
}
 +
 +
#globalWrapper .no-margin-top {margin-top: 0;}
 +
 +
.borders {
 +
    position: relative;
 +
    padding: 3em;
 +
}
 +
 +
.borders > div:first-child, .borders > div:first-child + div {
 +
    position: absolute;
 +
    content: "";
 +
    background-size: contain;
 +
    background-repeat: no-repeat;
 +
    height: 12vw;
 +
    width: 12vw;
 +
}
 +
 +
.borders.b-orange > div:first-child {
 +
    top: 0;
 +
    left: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/a/ab/T--TUDelft--2017_top_left_acknowledgement.png");
 +
}
 +
 +
.borders.b-orange > div:first-child + div {
 +
    bottom: 0;
 +
    right: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/e/e2/T--TUDelft--2017_bottom_right_acknowledgements.png");
 +
}
 +
 +
.borders.b-pink > div:first-child {
 +
    top: 0;
 +
    left: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/f/f9/T--TUDelft--2017_top_left_human_practices.png");
 +
}
 +
 +
.borders.b-pink > div:first-child + div {
 +
    bottom: 0;
 +
    right: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/0/0d/T--TUDelft--2017_bottom_right_human_practices.png");
 +
}
 +
 +
.left-top, .lower-right {
 +
    position: absolute;
 +
    content: "";
 +
    background-size: contain;
 +
    background-repeat: no-repeat;
 +
    height: 8vw;
 +
    width: 8vw;
 +
}
 +
 +
.left-top {
 +
    top: 0;
 +
    left: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/5/54/T--TUDelft--2017_topborder_teampage_style2.png");
 +
}
 +
 +
.lower-right {
 +
    bottom: 0;
 +
    right: 0;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/3/3c/T--TUDelft--2017_bottomborder_teampage_style2.png");
 +
}
 +
  
 
/* SPONSORS */
 
/* SPONSORS */
Line 1,190: Line 1,920:
 
}
 
}
  
−
#tu-delft > div {
+
#tudelft .collapsible-body {
−
     margin-left: 14em;
+
    padding-top: 0;
 +
}
 +
 
 +
#tudelft .collapsible-header h5 {
 +
    -webkit-transition: all .25s ease-in-out;
 +
    transition: all .25s ease-in-out;
 +
}
 +
 
 +
#tudelft .collapsible-header.active h5 {
 +
    padding: 0 0.75rem;
 +
     margin-left: 33.3333333333333%;
 +
    float: left;
 +
    -webkit-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    min-height: 1px;
 +
}
 +
 
 +
#tudelft .collapsible-header {
 +
    padding: .75rem 2rem;
 +
}
 +
 
 +
#tudelft .collapsible-header.active {
 +
    border-bottom: none;
 +
}
 +
 
 +
#no-nav-fix i {
 +
    top: 0;
 
}
 
}
  

Latest revision as of 15:15, 14 December 2017

/* TEMP */

/*

  1. top_menu_14 {
   background-color: #ff9800;
   border-bottom: 2px solid #ff9800;
   transition: all .25s ease-in-out;
   z-index: 3;

}

  1. top_menu_14:hover,
  2. top_menu_14.hover {
   background-color: black;
   border-bottom: 2px solid black;

}

  • /


/* Media wiki removal

                                                                    • /

nav ul { 

   line-height: 56px;

}

  1. content {
   margin-top: 0px !important;

}

  1. top_menu_inside #user_item {
   padding-top: 0;

}

  1. top_menu_inside #bars_item {
   top: 0;

}

  1. globalWrapper {
   padding-bottom: 0px;
   z-index: 30;

}

  1. top_menu_inside {
   opacity: 0;
   -webkit-transition: opacity .25s ease-in-out;
   transition: opacity .25s ease-in-out;

}

  1. top_menu_inside,
  2. top_menu_14.hover {
   opacity: 1;

}

.igem_2017_menu_wrapper { 

   z-index: 10;
   display: none;

}

ul { 

   margin-left: 0;

}

  1. top_menu_under {
   height: 0px;

}

nav ul a:hover { 

   text-decoration: none;

}

/* ONE MORE THING (TO HAVE NO SHADOW ON TOP OF OUR NAV BAR) */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

nav { 

   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);

}


/* GENERAL */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

  1. up-btn {
   position: fixed;
   color: blue;
   opacity: .3;
   bottom: 30px;
   right: 30px;
   z-index: 500;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url("T--TUDelft--2017_top.png");

/* 

   mask-image: url("T--TUDelft--2017_top.png");
   mask-size: contain;
   -webkit-mask-image: url("T--TUDelft--2017_top.png");
   -webkit-mask-size: contain;
  • /

/* background-color: blue;*/ 

   background-size: contain;
   height: 4em;
   width: 4em;

}

html {}

body { 

   margin: 0;

}

.mediawiki,

  1. globalWrapper {
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.mediawiki p,

  1. globalWrapper p {
   margin: 1em 0;
   text-align: justify;
   text-justify: inter-word;

}

.mediawiki h1, #globalWrapper h1 { 

   border-bottom: 1px solid #aaa;

}

.mediawiki h3, #globalWrapper h3 { 

   margin-top: 3rem;

}

.mediawiki h1, #globalWrapper h1, .mediawiki h2, #globalWrapper h2, .mediawiki h3, #globalWrapper h3, .mediawiki h4, #globalWrapper h4, .mediawiki h5, #globalWrapper h5, .mediawiki h6, #globalWrapper h6 { 

   color: rgb(34, 34, 34);
   font-weight: 300;
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding: 0;

}

.mediawiki p,

  1. globalWrapper p {
   color: rgb(34, 34, 34);
   opacity: 0.87;

}

.mediawiki ul { 

   margin: 0;

}

/* BLOCKQUOTES */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

blockquote {

}

blockquote { 

 display:block;
 background: #fff;
 padding: 15px 20px 15px 80px;
 margin: 0 0 20px;
 position: relative;
 
 /*Font*/
 font-size: 25px;
 line-height: 1.2;
 color: #666;
 text-align: justify;
 
 /*Borders - (Optional)*/
 border-left: 15px solid #ec407a;
 border-right: 2px solid #ec407a;
 
 /*Box Shadow - (Optional)*/
 -webkit-box-shadow: 2px 2px 15px #ccc;
 box-shadow: 2px 2px 15px #ccc;

}

.project blockquote { 

 border-left: 15px solid #26c6da;
 border-right: 2px solid #26c6da;

}

.HP blockquote { 

 border-left: 15px solid #ec407a;
 border-right: 2px solid #ec407a;

}

.contribution blockquote, .contribution blockquote { 

 border-left: 15px solid #26a69a;
 border-right: 2px solid #26a69a;

}

.acknowledgement bockquote, .acknowledgements blockquote { 

 border-left: 15px solid #ffa726;
 border-left: 2px solid #ffa726;

}

.team blockquote { 

 border-left: 15px solid #ef5350;
 border-left: 2px solid #ef5350;

}

.lab blockquote{ 

 border-left: 15px solid #ab47bc;
 border-left: 2px solid #ab47bc;

}

.project .collapsible-header { 

   background-color: #00bcd4;
   font-size: 1.5em;
   color: white;

}

.HP .collapsible-header { 

   background-color: #e91e63;
   font-size: 1.5em;
   color: white;

}

.contribution .collapsible-header, .contributions .collapsible-header { 

   background-color: #009688;
   font-size: 1.5em;
   color: white;

}

.acknowlegdements .collapsible-header, acknowlegdement .collapsible-header { 

   background-color: #ff9800;
   font-size: 1.5em;
   color: white

}

.team .collapsible-header { 

   background-color: #f44336;
   font-size: 1.5em;
   color: white

}

.lab .collapsible-header { 

   background-color: #9c27b0;
   font-size: 1.5em;
   color: white

}


blockquote:not(.no-quote)::before{ 

 content: "\201C"; /*Unicode for Left Double Quote*/
 
 /*Font*/
 font-size: 60px;
 font-weight: bold;
     font-family: Georgia, serif;



 /*Positioning*/
 position: absolute;
 left: 10px;
 top:5px;

}

blockquote.no-quote { 

   word-wrap: break-word;
   text-align: left;
   padding-left: 20px;

}

blockquote::after{ 

 /*Reset to make sure*/
 content: "";

}

blockquote cite { 

   text-indent: 300px;
   padding-top: 20px;
   font-style: italic;
   display: block;

}

/* KATEX */

  1. top_menu_14 {

/* 

   background-color: {{{2}}};
   border-bottom: 2px solid {{{2}}};
  • /
   -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
   z-index: 3;

}

  1. top_menu_14,
  2. top_menu_14.hover {
   background-color: black;
   border-bottom: 2px solid black;

}

.katex-display { 

 position: relative;

}

.katex-display .katex .eqno { 

 display: block;
 position: absolute;
 right: 0;
 top: 50%;
 line-height: 0;

}


/* Lists Skeleton */ /* –––––––––––––––––––––––––––––––––––––––––––––––––– */

ol.skel { 

   list-style: decimal inside;

}

ol.skel, ul.skel { 

   padding-left: 0;
   margin-top: 0;
   list-style: disc inside;

}

ul.skel ul.skel, ul.skel ol.skel, ol.skel ol.skel, ol.skel ul.skel { 

   margin: 1.5rem 0 1.5rem 3rem;
   font-size: 90%;
   list-style: circle inside;

}

.skel li { 

   margin-bottom: 1rem;

}

ul.skel ul.skel ul.skel { 

   margin: 1.5rem 0 1.5rem 6rem;
   list-style: square inside;
   font-size: 90%;

}

/* TABLE */

  1. primers thead {
   border-color: #4caf50;

}

  1. primers tr:nth-child(even) {
   background-color: #c8e6c9;

}

  1. parts-page thead {
   border-color: #4caf50;

}

  1. parts-page tr:nth-child(even) {
   background-color: #c8e6c9;

}

.notebook thead { 

   border-color: #9c27b0;

}

/* .notebook tr:nth-child(even) { 

   background-color: #e1bee7;

}

  • /

.flex { 

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

}

.column { 

   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;

}

.flex-left { 

   -ms-flex-item-align: start;
   align-self: flex-start;

}

.flex-box { 

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

}

html, body { 

   max-width: 100%;
   overflow-x: hidden;

}

.block { 

   display: block;

}

@media only screen and (min-width: 600px) { 

   .align-center {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
   }

}

.align-center > div { 

   display: block;

}

.center-margin { 

   margin: auto;
   display: block;

}

.row .center-margin.col { 

   float: initial;

}

.no-margin-wrapper { 

   padding: 0.1px;

}

.no-margin { 

   margin: 0;

}

.white-text-hack { 

   color: white !important;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;

}


/* HEADER */

/* OVERWRITES FOR MENU BAR */


ul { 

   list-style-image: none;

}

  1. nav ul a {
   color: #fff;

}

nav ul a:visited, #nav ul a:visited { 

   color: #fff;

}

  1. nav ul {
   margin: 0;

}


@media only screen and (min-width: 760px) { 

   nav,
   nav ul:not(.dropdown-content) {
       height: 35px;
       line-height: 36px;
   }

}

@media only screen and (max-width: 1050px) { 

   #nav-buttons > li > a {
       max-width: 70px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       -webkit-transition: all 1s;
       transition: all 1s;
   }

}

  1. nav-buttons,
  2. contact {
   height: 35px;
   overflow: hidden;

}

  1. contact {
   position: absolute;
   top: 0px;
   right: 0px;

}

  1. nav-buttons a:hover {
   max-width: 300px;

}

.nav-wrapper { 

   width: 100%;
   margin: 0 auto;

}

@media only screen and (min-width: 993px) { 

   .nav-wrapper {}

}

@media only screen and (min-width: 1200px) { 

   .nav-wrapper {
       width: 95%;
   }

}

  1. nav i,
  2. nav span {
   line-height: 36px;
   height: 35px;

}

.navbar-fixed { 

   height: 35px;

}

  1. nav i {
   position: relative;
   top: -11px;

}

/* SAFARI ONLY CSS */

@media not all and (min-resolution:.001dpcm) { 

   @media {
       #nav i {
           top: 0;
       }
       #safari-phone-hack i {
           top: -11px;
       }

   }

}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 

   @media {
       #nav i {
           top: 0;
       }
       #safari-phone-hack i {
           top: -11px;
       }
   }

}

/* ENDED HACKING */

  1. nav .material-icons {
   top: 0;

}

  1. contact a {
   height: 35px

}

.menu-hover > span { 

   max-width: 0px;
   display: inline-block;
   overflow: hidden;
   -webkit-transition: all 1s;
   transition: all 1s;

}

@media only screen and (min-width: 1150px) { 

   .menu-hover:hover > span {
       max-width: 200px;
   }

}

  1. menu-btn {
   display: none;
   position: fixed;
   top: 1em;
   right: 1em;
   z-index: 15;

}

  1. cross {
   display: none;

}

@media only screen and (max-width: 760px) { 

   .navbar-fixed,
   nav,
   #nav-buttons {
       height: auto;
   }
   nav {
       display: none;
   }
   #nav-buttons > li {
       float: none;
   }
   #menu-btn {
       display: inline-block;
   }
   #nav-buttons > li > a > i,
   #contact > li > a > i {
       line-height: 64px;
   }
   #nav-buttons > li > a,
   #contact > li > a {
       height: 64px;
   }
   #nav-buttons > li > a {
       max-width: 275px;
   }
   #nav .fa {
       top: 0;
   }
   #contact {
       height: 64px;
   }
   #cross {
       display: inline-block;
   }

}

.show-nav { 

   display: block;

}

@media only screen and (max-width: 600px) { 

   img + img {
       margin-top: 2em;
   }

}


/* SLIDER */

.no-x-scrolling { 

   width: 100vw;
   height: 1px;
   overflow-x: hidden;
   overflow-y: visible;

}

.invisible { 

   visibility: hidden;

}

  1. animated-logo {
   z-index: 10;
   position: relative;
   height: 0px;
   opacity: 0;
   -webkit-transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   transition: opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease;
   transition: transform 1.5s ease 5.5s, opacity 1.5s ease 5.5s, left 1.5s ease 5.5s, top 1.5s ease 5.5s, visibility 0.5s ease, -webkit-transform 1.5s ease 5.5s;
   display: block;
   /*    overflow: hidden;*/
   left: 0;
   top: 0;
   width: 0;

}

  1. animated-logo.moved {
   -webkit-transform: scale(0.30, 0.30) translate(-50%, 0);
   transform: scale(0.30, 0.30) translate(-50%, 0);
   left: 10vw;
   top: 3vh;
   opacity: 1;
   display: block;

}

.slider .slides { 

   background-color: white;

}

  1. sliding-logo img {
   background-size: contain;
   background-repeat: no-repeat;

}

/* TOP IMAGE */

.top { 

   height: 100vh;
   width: 100vw;
   position: relative;

}

  1. globalWrapper .top p {
   font-size: 25vh;
   margin: 0;
   text-align: center;
   height: 27vh;
   margin-top: -7vh;

}

.top img { 

   max-width: 100%;
   max-height: 75vh;
   display: block;
   margin: auto;
   padding: 5vh

}

.top-c { 

   height: 100vh;
   width: 100vw;
   position: relative;

}

.top div { 

   height: 75vh;

}

.top-c div { 

   height: 100vh;

}

.top-c img { 

   max-width: 100%;
   max-height: 75vh;
   display: block;
   margin: auto;
   padding: 5vh

}

.topper { 

   height: 100vh;
   width: 100vw;
   padding-top: 20px;
   padding-bottom: 80px;

}

.topper img { 

   margin: auto;
   display: block;
   max-width: 100%;
   max-height: 100%;

}

.topper-inner > a { 

   position: absolute;
   z-index: 10;

}

.topper-inner a:hover + img { 

   opacity: 1;

}

.topper-inner { 

   display: inline-block;
   position: relative;

}

.topper-inner img:first-child { 

   max-height: 90vh;

}

.topper-inner img:not(:first-child) { 

   width: 100%;
   height: 100%;
   position: absolute;
   top: 0; 
   left: 0;
   opacity: 0;

}

.topper-inner2 { 

   display: inline-block;
   position: relative;

}

.topper-inner2 img { 

   max-height: 90vh;

}

.topper-inner2 > a { 

   position: absolute;
   z-index: 10;

}


/* HERO IMAGE */

  1. frontpage-img {
   margin-top: -18px;
   height: 90vh;
   z-index: -1;

}

.white { 

   background-color: #fff;
   z-index: 5;
   -webkit-box-shadow: 0px 0px 10px 20px #fff;
   box-shadow: 0px 0px 10px 20px #fff;

}

.white-shadow { 

   -webkit-box-shadow: 0px -40px 10px 10px white;
   box-shadow: 0px -40px 10px 10px white;

}

.hero { 

   background-color: #fff;
   position: relative;
   background-blend-mode: multiply;
   height: 100vh;
   width: 100vw;
   margin-top: -18px;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;

}

  1. fade-out {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   position: absolute;
   z-index: 50;

}

/*

  1. f7ede2
  • /

.hero p { 

   white-space: nowrap;
   position: absolute;
   text-align: center;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   margin: 0 !important;
   font-size: 12em;
   z-index: 70;
   opacity: 1 !important;

}

.hero p span, .hero p i {}

  1. design p {
   top: 47%;
   left: 57%;
   color: white;
   font-size: 11em;

}

  1. design {
   background-image: url("T--TUDelft--another-background.png");

}

  1. collaborations p {
   top: 50%;
   left: 50%;
   color: dimgrey;
   font-size: 7em;

}

  1. collaborations {
   background-image: url("T--TUDelft--2017_world-map-adjusted.png");

}

/*https://static.igem.org/mediawiki/2017/e/e8/T--TUDelft--2017_World_map_1.png*/

  1. newsletter p {
   top: 15%;
   left: 50%;
   color: #e91e63;
   font-size: 8em;
   opacity: 1;

}

  1. newsletter {
   background-image: url("T--TUDelft--2017_Letter-adjusted.png");

}

/*https://2017.igem.org/wiki/images/8/87/T--TUDelft--2017_Letter_watercolour.png*/

  1. acknowlegdement p {
   top: 52%;
   left: 45%;
   font-size: 4.5em;
   color: white;

}

  1. acknowlegdement {
   background-image: url("T--TUDelft--2017_Acknowledgement_stain_yellow_V2.png");

}

  1. contribution p {
   top: 49%;
   left: 46%;
   font-size: 7em;
   color: white;

}

  1. contribution {
   background-image: url("T--TUDelft--2017_contribution_stain_amber.png");

}

  1. sponsors p {
   top: 50%;
   left: 50%;
   color: white;

}

  1. sponsors {
   background-image: url("");
   height: 85vh;

}

  1. interlab p {
   top: 50%;
   left: 47%;
   color: black;

}

  1. interlab {
   background-image: url("T--TUDelft--2017_interlab_V3.png");

}

  1. IHP p {
   top: 50%;
   left: 50%;
   font-size: 6em;
   color: white;

}

  1. IHP {
   background-image: url("T--TUDelft--2017_tweekleurig.png");

}

  1. parts p {
   top: 35%;
   left: 47%;
   font-size: 9.5em;
   color: white;

}

  1. parts {
   background-image: url("T--TUDelft--2017_parts_stain_V3.png");

}

  1. project p {
   top: 57%;
   left: 40%;
   font-size: 8em;
   color: white;

}

  1. project {
   background-image: url("T--TUDelft--2017_parts_vlek_v3.png");

}



/* MAIN HOMEPAGE*/

  1. thisList li {
   opacity: 0;

}

  1. sliding-logo {
   z-index: 10;

}

  1. row1 {
   height: 0;

}

@media only screen and (max-width: 1050px) { 

   #row1 div,
   #row2 div,
   #row3 div,
   #row4 div,
   #row5 div,
   #row6 div {
       display: none;
   }

}

  1. row1 div {
   z-index: 1;

}

  1. row1 img {
   position: relative;

}

  1. row1-img2 {
   top: -8vw;
   left: 80px;
   width: 70%

}


  1. row1-img3 {
   top: -6vw;
   left: -40px;
   width: 40%;

}

  1. row1-img4 {
   top: -8vw;
   left: -30px;
   width: 42%

}

  1. row1-img5 {
   top: -9.5vw;
   left: 0;
   width: 90%;

}

  1. row1-img6 {
   top: -1vw;
   left: -20px;
   width: 25%;

}

  1. row2 {
   height: 0;

}

  1. row2 div {
   z-index: 1;

}

  1. row2 img {
   position: relative;

}


  1. row2-img1 {
   top: -9vw;
   left: 105px;
   width: 85%

}

  1. row2-img2 {
   top: -10vw;
   left: 70px;
   width: 45%

}

  1. row2-img3 {
   top: -14vw;
   left: 0;
   width: 95%

}

  1. row2-img4 {
   top: -12.5vw;
   left: -100px;
   width: 50%;

}

  1. row2-img5 {
   top: -9vw;
   left: -100px;
   width: 50%

}

  1. row2-img6 {
   top: -10vw;
   left: -200px;
   width: 27%;

}


  1. row3 {
   height: 0;

}

  1. row3 div {
   z-index: 1;

}

  1. row3 img {
   position: relative;

}

  1. row3-img3 {
   top: -8vw;
   left: -130px;
   width: 70%;

}

  1. row3-img4 {
   top: -6vw;
   left: -90px;
   width: 20%;

}

  1. row3-img5 {
   top: -9vw;
   left: -50px;
   width: 60%;

}

  1. row3-img6 {
   top: -5.5vw;
   left: -100px;
   width: 70%;

}

  1. row4 {
   height: 0;

}

  1. row4 div {
   z-index: 1;

}

  1. row4 img {
   position: relative;

}

  1. row4-img1 {
   top: -5.5vw;
   left: 0px;
   width: 70%;

}

  1. row4-img2 {
   top: -4vw;
   left: 0px;
   width: 56%;

}

  1. row4-img3 {
   top: -5vw;
   left: 0px;
   width: 50%;

}

  1. row4-img4 {
   top: -3.5vw;
   left: -10px;
   width: 40%;

}


  1. row4-img5 {
   top: -4.5vw;
   left: -190px;
   width: 100%;

}

  1. row4-img6 {
   top: -5vw;
   left: -190px;
   width: 50%;

}

  1. row5 {
   height: 0;

}

  1. row5 div {
   z-index: 1;

}

  1. row5 img {
   position: relative;

}

  1. row5-img2 {
   top: -9vw;
   left: 0;
   width: 33%;

}

  1. row5-img3 {
   top: -3.5vw;
   left: -57px;
   width: 67%;

}

  1. row5-img4 {
   top: -5vw;
   left: -30px;
   width: 80%;

}

  1. row5-img5 {
   top: -3vw;
   left: 0;
   width: 80%;

}

  1. row5-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. row6 {
   height: 0;

}

  1. row6 div {
   z-index: 1;

}

  1. row6 img {
   position: relative;

}

  1. row6-img1 {
   top: -3vw;
   left: 150px;
   width: 40%;

}

  1. row6-img2 {
   top: -1vw;
   left: 0;
   width: 5%;

}

  1. row6-img3 {
   top: -6vw;
   left: 0;
   width: 80%;

}

  1. row6-img4 {
   top: -0vw;
   left: 0;
   width: 20%;

}

  1. row6-img5 {
   top: -3vw;
   left: -80px;
   width: 80%;

}

  1. row6-img6 {
   top: -9vw;
   left: 0;
   width: 80%;

}

  1. abvesicle {
   width: 100px;

}

  1. vesicle-grass {
   width: 100px;

}

  1. stuffvesicle {
   width: 100px;

}

  1. vesicle-cas13a {
   width: 100px;

}

  1. budding-vesicle {
   width: 100px;

}

  1. vesicle-tdp {
   width: 100px;

}

  1. vesiclecas13a {
   width: 100px;

}


.scaleIn { 

   opacity: 0;
   -webkit-transition: opacity 1s ease 0.2s;
   transition: opacity 1s ease 0.2s;

}

.scaleIn.activated { 

   opacity: 1;

}


/* PAGE GENERALS */

  1. references, #references-scroll {
   margin-top: 1em;

}

  1. globalWrapper .row a {
   padding-right: 0;

}

  1. globalWrapper .navbar-fixed nav ul a {
   padding-right: 15px;

}

/* FOOTER */

footer { 

   position: relative;
   background-color: #fff;

}

.sponsors img { 

   height: 6em;
   padding: 1em;

}

.sponsors > div { 

   display: inline-block;

}

.sponsors > div > a { 

   display: block;
   position: relative;

/* top: -2.5em;*/ }

body { 

   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   min-height: 100vh;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;

}

main { 

   -webkit-box-flex: 1;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   -ms-flex-positive: 1;
   flex-grow: 1;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   -ms-flex-preferred-size: auto;
   flex-basis: auto;

   -webkit-flex-grow: 1;
   -webkit-flex-shrink: 0;
   -webkit-flex-basis: auto;

}

/* body { 

 display: flex;
 display: -webkit-flex;
 min-height: 100vh;
 flex-direction: column;
 -webkit-flex-direction: column;

}

main { 

 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;

 -webkit-flex-grow: 1;
 -webkit-flex-shrink: 0;
 -webkit-flex-basis: auto;

}

  • /


/* TOC */

  1. tocc {
   padding: 0.1px;
   position: fixed;
   top: 22vh;
   right: 30px;

}

  1. tocc a {
   color: rgb(34, 34, 34);

}

  1. tocc a::before {
   display: inline-block;
   width: 20px;
   height: 20px;
   content: "";
   background-size: contain;
   background-position: center;
   position: relative;
   left: -3px;
   top: 3px;
   z-index: 10;
   background-image: url("T--TUDelft--2017_gear2.png");
   opacity: 0;
   -webkit-transition: opacity .5s ease-out 0s;
   transition: opacity .5s ease-out 0s;

}

  1. tocc a.active::before {
   opacity: 1;

}

  1. tocc li {
   padding-left: 20px;
   text-indent: -20px;

}


/* TEAM */

  1. team-hero {
   position: relative

}

  1. team-hero > img {
   z-index: -1;

}

  1. hover2 {
   position: absolute;
   top: 22%;
   left: 50%;
   height: 17%;
   width: 17%;

}

  1. hover1 {
   position: absolute;
   top: 22%;
   left: 76%;
   height: 17%;
   width: 17%;

}

  1. hover1:hover > div {
   width: 22em;
   opacity: 1;

}

  1. hover1 p {
   width: 22em;

}

.weetje { 

   position: absolute;
   overflow: hidden;
   background-color: white;
   height: 5em;
   width: 0em;
   -webkit-transition: width 1s;
   transition: width 1s;
   opacity: 0;
   left: 100%;
   top: 30%;
   z-index: 2;
   border-radius: 2em;
   padding-left: 0.5em;

}

.weetje > img { 

   height: 5em;
   width: 5em;
   -o-object-fit: cover;
   object-fit: cover;
   padding: 1em;
   float: left;

}

  1. hover1:hover {
   cursor: pointer;

}

  1. team-members > div {
   padding: 40px;

}

  1. team-members img,
  2. supervisors img {
   -o-object-fit: cover;
   object-fit: cover;
   height: 20vw;
   width: 20vw;

}

.show-on-hover { 

   opacity: 0;
   z-index: 1;
   position: absolute;
   -webkit-transition: 1s;
   transition: 1s;

}

.show-on-hover:hover { 

   opacity: 1;

}

  1. team-members h4 {
   font-size: 1em;
   font-weight: 800;
   margin-bottom: 0;

}

  1. team-members h4 + p {
   margin-top: 0;

}

/* MEET UP */

  1. presenters img {
   padding: 0 4vw;

}

  1. presenters .align-center {
   margin: 0px;

}

/* NEWSLETTER */

  1. mail {
   background-color: white;

}

  1. mail .collapsible-body {
   background-color: #eee;

}

  1. mail h1 {
   border: 0;

}

  1. newsletter-collapsible .collapsible-header {
   color: #fff;
   display: inherit;
   text-align: center;
   height: 100px;
   font-size: 45px;

}

  1. newsletter-collapsible .collapsible-header {
   background-color: #e91e63;

}

/*

  1. protocols .collapsible-header {
   background-color: #9c27b0;
   line-height: 35px;
   padding-top: 28px;

}

  • /
  1. newsletter-collapsible li {
   margin: 0;

}

  1. newsletter-collapsible h1 {
   border: none;

}

/* TIMELINE */

  1. timeline {
   position: fixed;
   top: 10%;
   left: 13%;
   width: .13em;
   height: 70vh;
   background-color: #9c27b0;
   border-radius: 20px;

}

  1. timeline a div {
   height: .6em;
   width: .6em;
   border-radius: 50%;
   background-color: white;
   left: -.24em;
   border: 1.5px solid #9c27b0;

}

  1. timeline a.active div {
   background-color: #9c27b0;

}

  1. timeline a > div:hover {
   background-color: #9c27b0;

}

  1. timeline a > p {
   position: absolute;
   top: -1.5em;
   left: -6.1em;
   width: 100px;
   color: rgb(34, 34, 34);
   z-index: -1;

}

  1. timeline a p:hover {
   text-decoration: underline;

}

  1. timeline div {
   position: absolute;

}

  1. round24 {
   top: 4vh

}

  1. round25 {
   top: 7.5vh;

}

  1. round26 {
   top: 11vh;

}

  1. round27 {
   top: 14.5vh;

}

  1. round28 {
   top: 18vh;

}

  1. round29 {
   top: 21.5vh;

}

  1. round30 {
   top: 25vh;

}

  1. round31 {
   top: 28.5vh;

}

  1. round32 {
   top: 32vh;

}

  1. round33 {
   top: 35.5vh;

}

  1. round34 {
   top: 39.5vh;

}

  1. round35 {
   top: 43vh;

}

  1. round36 {
   top: 46.5vh;

}

  1. round37 {
   top: 50vh;

}

  1. round38 {
   top: 53.5vh;

}

  1. round39 {
   top: 57vh;

}

  1. round40 {
   top: 60.5vh

}

  1. round41 {
   top: 64vh;

}

  1. round42 {
   top: 67.5vh

}

/* NOTEBOOK */

  1. globalWrapper .row .btn {
   padding-right: 2em ;

}

  1. notebook-buttons .btn.active {
   color: white;

}

  1. notebook-buttons i {
   color: white;

}

  1. notebook-buttons .btn:not(.active) i {
   display: none;

}

  1. notebook-buttons > p {
   margin: .1em;
   color: grey;
   font-size: 20px;

}

  1. notebook-buttons .btn:not(.active) {
   background-color: rgb(255, 255, 255) !important;
   color: rgba(0, 0, 0, 0.87);

}

  1. notebook-buttons .btn {
   text-transform: none;

}

  1. notebook-buttons {
   padding: 20px 20px 0;

}

.notebook h3, .protocol h4 { 

   font-size: 2.5em;
   font-weight: 800

}

.notebook h4, .protocol h3 { 

   font-size: 1.8em;

}

/* FANCY THINGS */

/* .modal-overlay { 

   opacity: 0 !important;

}

  • /

pre.DNA { 

   font-size: 1em;
   background-color: white;
   color: black;
   line-height: 1.5;
   border: 1px solid grey;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   padding: 1em;

}

span.code { 

   font-family: monospace, monospace;
   font-size: 1.2em;

}

  1. globalWrapper .open::before {
   content: "" !important;

}

.model { 

   max-height: 85%;
   width: 85%;

}

@media only screen and (min-width: 760px) { 

   .dropdown-content {
       overflow-y: visible;
   }

}

  1. nav .dropdown-content.nested {
  overflow: visible;

}

  1. nav .dropdown-content .dropdown-content {
  margin-left: 100%;
   -webkit-transform: translate(0px, -50px);
   transform: translate(0px, -50px);

}

.link { 

   position: relative;
   border-top: 1px solid rgba(160, 160, 160, 0.2);
   padding: 1.5em .5em 0;

}

.link > a { 

   font-size: 20px;
   text-transform: uppercase;

}

  1. HP-Timeline {
   position: relative;
   width: 100%;

/* 

   background-image: url("T--TUDelft--2017_Timeline_Final_V4.jpg");
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
  • /

}

  1. HP-Timeline > a {
   position: absolute;

}

.table-style1 tr > td:first-child, .table-style2 tr > td:first-child { 

   border-right: 1px solid #d0d0d0;
   font-weight: 800;

}

.table-style1 tr > td, .table-style2 tr > td { 

   padding-right: 20px;

}

table.table-style2 { 

   width: auto;

}

.table-style2 tr:nth-child(even) { 

   background-color: #b2ebf2;

}

  1. globalWrapper .card > h1 {
   border: none;

}

table.table-style3 tr > td:first-child { 

   border-right: 1px solid #d0d0d0;

}

table.table-style3 tr { 

   border-bottom: 1px solid #d0d0d0;

}

  1. globalWrapper .no-margin-top {margin-top: 0;}

.borders { 

   position: relative;
   padding: 3em;

}

.borders > div:first-child, .borders > div:first-child + div { 

   position: absolute;
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   height: 12vw;
   width: 12vw;

}

.borders.b-orange > div:first-child { 

   top: 0;
   left: 0;
   background-image: url("T--TUDelft--2017_top_left_acknowledgement.png");

}

.borders.b-orange > div:first-child + div { 

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottom_right_acknowledgements.png");

}

.borders.b-pink > div:first-child { 

   top: 0;
   left: 0;
   background-image: url("T--TUDelft--2017_top_left_human_practices.png");

}

.borders.b-pink > div:first-child + div { 

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottom_right_human_practices.png");

}

.left-top, .lower-right { 

   position: absolute;
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   height: 8vw;
   width: 8vw;

}

.left-top { 

   top: 0;
   left: 0;
   background-image: url("T--TUDelft--2017_topborder_teampage_style2.png");

}

.lower-right { 

   bottom: 0;
   right: 0;
   background-image: url("T--TUDelft--2017_bottomborder_teampage_style2.png");

}


/* SPONSORS */

  1. sponsor-page .card {
   padding: 2em;

}

  1. tudelft .collapsible-body {
   padding-top: 0;

}

  1. tudelft .collapsible-header h5 {
   -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;

}

  1. tudelft .collapsible-header.active h5 {
   padding: 0 0.75rem;
   margin-left: 33.3333333333333%;
   float: left;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 1px;

}

  1. tudelft .collapsible-header {
   padding: .75rem 2rem;

}

  1. tudelft .collapsible-header.active {
   border-bottom: none;

}

  1. no-nav-fix i {
   top: 0;

}

/*

  1. testing::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  1. tudelft > div::before {
   content: "";
   height: 50px;
   width: 50px; 
   background-color: grey;

}

  • /