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

(Created page with "→‎TEMP: /* #top_menu_14 { background-color: #ff9800; border-bottom: 2px solid #ff9800; transition: all .25s ease-in-out; z-index: 3; } #top_menu_14:hover,...")
 
Line 1: Line 1:
−
/* TEMP */
+
/* Removing default wiki layout */
  
−
/*
+
/**************************************************************************************************************************************************************************************************/
−
#top_menu_14 {
+
 
−
    background-color: #ff9800;
+
#home_logo,
−
    border-bottom: 2px solid #ff9800;
+
#sideMenu {
−
    transition: all .25s ease-in-out;
+
display: none;
−
    z-index: 3;
+
 
}
 
}
  
−
#top_menu_14:hover,
+
#sideMenu,
−
#top_menu_14.hover {
+
#top_title,
−
    background-color: black;
+
.patrollink {
−
    border-bottom: 2px solid black;
+
display: none;
 
}
 
}
−
*/
 
  
 +
#content {
 +
margin-left: 0px;
 +
margin-top: -7px;
 +
padding: 0px;
 +
width: 100%;
 +
background: none !important;
 +
}
  
−
/*  Media wiki removal
+
body {
−
**********************************/
+
background-image: url("https://static.igem.org/mediawiki/2018/3/3d/T--TUDelft--2018_cutoff2.png") !important;
 +
background-repeat: no-repeat;
 +
background-position: bottom left;
 +
background-attachment: fixed;
 +
position: relative;
 +
margin-top: 40px;
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif;
 +
font-weight: 300;
 +
}
  
−
nav ul {
+
 
−
    line-height: 56px;
+
#bodyContent h1,
 +
#bodyContent h2,
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5,
 +
#bodyContent h6, {
 +
margin-bottom: 0px;
 
}
 
}
  
−
#content {
+
 
−
    margin-top: 0px !important;
+
.judges-will-not-evaluate {
 +
border: 4px solid #e4dede;
 +
padding: 2% !important;
 +
width: 92%!important;
 
}
 
}
  
−
#top_menu_inside #user_item {
+
html {
−
    padding-top: 0;
+
scroll-behavior: smooth !important;
 
}
 
}
  
−
#top_menu_inside #bars_item {
+
.adopeicon {
 +
height: 40px;
 +
width: auto;
 +
margin: 10px;
 +
}
 +
 
 +
 
 +
/* TOPNAV */
 +
nav, footer, #myScrollspy, .content, .blockquoteadpbl, .blockquotegrnbl, blockquoteorngcrl {
 +
-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);
 +
}
 +
 
 +
.content {
 +
padding: 25px;
 +
background-color: #FFFFFF;
 +
}
 +
 
 +
.navbar {
 +
z-index: 500 !important;
 +
}
 +
 
 +
.dropdown-menu {
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif;
 +
}
 +
 
 +
@media (max-width: 1200px) {
 +
    .navbar-header {
 +
        float: none;
 +
    }
 +
    .navbar-left,.navbar-right {
 +
        float: none !important;
 +
    }
 +
    .navbar-toggle {
 +
        display: block;
 +
    }
 +
    .navbar-collapse {
 +
        border-top: 1px solid transparent;
 +
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
 +
    }
 +
    .navbar-fixed-top {
 +
top: 0;
 +
border-width: 0 0 1px;
 +
}
 +
    .navbar-collapse.collapse {
 +
        display: none!important;
 +
    }
 +
    .navbar-nav {
 +
        float: none!important;
 +
margin-top: 12px;
 +
}
 +
.navbar-nav>li {
 +
        float: none;
 +
    }
 +
    .navbar-nav>li>a {
 +
        padding-top: 10px;
 +
        padding-bottom: 10px;
 +
    }
 +
    .collapse.in{
 +
  display:block !important;
 +
}
 +
}
 +
 
 +
 
 +
 
 +
/* FOOTER */
 +
.footer {
 +
background-color: #F8F8F8;
 +
position: relative;
 +
right: 0;
 +
bottom: -30px;
 +
left: 0;
 +
padding: 1rem;
 +
}
 +
 
 +
legend {
 +
background-color: rgba(249, 251, 251, 1);
 +
border: none;
 +
color: #797979;
 +
}
 +
 
 +
.logo
 +
{
 +
-webkit-transition: all .5s ease;
 +
-moz-transition: all .5s ease;
 +
-o-transition: all .5s ease;
 +
-ms-transition: all .5s ease;
 +
transition: all .5s ease;
 +
cursor:pointer;
 +
}
 +
 
 +
.sponsorimg {
 +
max-height: 80px;
 +
width: auto;
 +
}
 +
.sponsorimg2 {
 +
max-height: 150px;
 +
width: auto;
 +
}
 +
.sponsorimg3 {
 +
max-height: 50px;
 +
width: auto;
 +
}
 +
 
 +
.sponsimgg {
 +
    float: right;
 +
    max-width: 30%;
 +
    height: auto;
 +
    padding-left: 10px;
 +
    margin-left: 25px;
 +
    max-height: 250px;
 +
}
 +
 
 +
 
 +
/* SIDEBAR */
 +
 
 +
ul.nav-pills {
 +
top: 160px;
 +
left: 45px;
 +
position: fixed;
 +
color: #006C84 !important;
 +
font-size: 15px;
 +
margin-right: 30px;
 +
}
 +
 
 +
 
 +
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
 +
    color: #fff;
 +
    background-color: #E2E8E4;
 +
}
 +
 
 +
div.col-sm-9 div {
 +
height: 250px;
 +
font-size: 28px;
 +
}
 +
 
 +
.sponsors img {
 +
height: 6em;
 +
padding: 1em;
 +
}
 +
 
 +
.sponsors > div > a {
 +
display: block;
 +
position: relative;
 +
/*    top: -2.5em;*/
 +
}
 +
 
 +
 
 +
/* GENERAL LAYOUT STUFF */
 +
 
 +
h1 {
 +
    font-size: 45px;
 +
    font-weight: lighter !important;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif !important;
 +
}
 +
 
 +
}
 +
h2 {
 +
    font-size: 35px !important;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif !important;
 +
    font-weight: 100 !important;
 +
}
 +
 
 +
h3 {
 +
    font-size: 30px;
 +
    font-weight: lighter !important;
 +
}
 +
 
 +
 
 +
h4 {
 +
    font-size: 25px;
 +
    font-weight: lighter !important;
 +
}
 +
 
 +
h5 {
 +
    font-size: 22px;
 +
    font-weight: lighter !important;
 +
}
 +
   
 +
h6 {
 +
    font-size: 20px;
 +
    font-weight: lighter !important;
 +
}
 +
       
 +
/* GREEN-BLUE */
 +
.grnbl {
 +
            color: #006C84;
 +
        }
 +
 
 +
a.grnbl {
 +
color: #006C84 !important;
 +
}
 +
       
 +
 
 +
h1.grnbl {
 +
    border-bottom: 2px solid #006C84 !important;
 +
    padding:5px;
 +
}
 +
 
 +
 
 +
/* ADOPE BLUE */
 +
.adpbl {
 +
    color: #0092CB;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
    sans-serif !important;
 +
        }
 +
 
 +
a.adpbl {
 +
color: #0092CB !important;
 +
}
 +
 
 +
h1.adpbl {
 +
    border-bottom: 2px solid #0092CB !important;
 +
    padding:5px;
 +
 
 +
}
 +
 
 +
/* ORANGE-CORAL */
 +
 
 +
.orngcrl {
 +
    color: #FFCCBB;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif !important;
 +
        }
 +
 
 +
a.orngcrl {
 +
color: #FFCCBB !important;
 +
}
 +
 
 +
h1.orngcrl {
 +
    border-bottom: 2px solid #FFCCBB !important;
 +
    padding:5px;
 +
 
 +
}
 +
 
 +
/* THE GREYS */
 +
 
 +
    .thgrys {
 +
    color: #777777;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif !important;
 +
}
 +
 
 +
a.thgrys {
 +
color: #777777 !important;
 +
}
 +
 
 +
h1.thgrys {
 +
    border-bottom: 2px solid #777777 !important;
 +
    padding: 5px;
 +
 
 +
}
 +
 
 +
/* JANINE's BLUE */
 +
    .jnnbl {
 +
    color: #00B4C7;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
    sans-serif !important;
 +
}
 +
 
 +
a.jnnbl {
 +
color: #00B4C7 !important;
 +
}
 +
       
 +
h1.jnnbl {
 +
    border-bottom: 2px solid #00B4C7 !important;
 +
    padding:5px;
 +
 
 +
}
 +
 
 +
p {
 +
font-size: 19px !important;
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
sans-serif !important;
 +
text-align: justify;
 +
}
 +
 
 +
p.DNAstyle {
 +
    font-family: "Courier New", Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace! important;
 +
    word-wrap: break-word;
 +
}
 +
 
 +
.blockquotegrnbl {
 +
  text-align: justify;
 +
  margin: 20px 0;
 +
  padding: 20px;
 +
  border-left: 5px solid #006C84;
 +
  color: #006C84;
 +
  background-color: #F8F8F8;
 +
  line-height: 35px;
 +
  font-size: 26px !important;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
}
 +
 
 +
.opinions
 +
{font-size: 20px !important;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
  text-align: right !important;
 +
  width:100%;
 +
  font-style: italic !important;
 +
}
 +
 
 +
 
 +
.blockquoteorngcrl {
 +
  text-align: justify;
 +
  margin: 20px 0;
 +
  padding: 20px;
 +
  border-left: 5px solid #FFCCBB;
 +
  color: #FFCCBB;
 +
  background-color: #F8F8F8;
 +
  line-height: 35px;
 +
  font-size: 26px !important;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
 
 +
}
 +
 
 +
.blockquoteadpbl {
 +
  text-align: justify;
 +
  margin: 20px 0;
 +
  padding: 20px;
 +
  border-left: 5px solid #0092CB;
 +
  color: #0092CB;
 +
  background-color: #F8F8F8;
 +
  line-height: 35px;
 +
  font-size: 26px !important;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
 
 +
.figadpbl {
 +
    color: #0092CB;
 +
    text-align: justify;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
    sans-serif !important;
 +
        }
 +
 
 +
.figgrnbl {
 +
    color: #006C84;
 +
    text-align: justify;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
    sans-serif !important;
 +
        }
 +
 
 +
.figjnnbl {
 +
    color: #00B4C7;
 +
    text-align: justify;
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
    sans-serif !important;
 +
        }
 +
 
 +
/* BARCODING */
 +
.backgroundbarcoding{  background:#F8F8F8 !important;
 +
                                padding: 5px;
 +
                                border: 1px solid #00B4C7;
 +
                              }
 +
.textDNAbarcoding {       
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: left!important;
 +
                                color: #00B4C7 !important;
 +
                              }
 +
.textboxesDNAbarcoding {       
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 16px  !important;
 +
                                text-align: left!important;
 +
                                color: #00B4C7 !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 5px;
 +
                                border: 2px solid #00B4C7;:
 +
                              } 
 +
 
 +
.headerDNAbarcoding {       
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: center !important;
 +
                                color: #00B4C7 !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 5px;
 +
                              }
 +
 
 +
.DNAbarcoding {      font-family: "Courier New" !important;
 +
                                font-size: 13.8px !important;
 +
                                text-align: left !important;
 +
                                color: #00B4C7 !important;
 +
                                background:#FFFFFF !important;
 +
                                padding: 5px;
 +
                        }
 +
 
 +
.jnnblbarcoding {
 +
                                font-family: "Courier New" !important;
 +
                                font-size: 13.8px !important;
 +
                                color: #00B4C7;
 +
                              }
 +
 
 +
.adpblbarcoding {
 +
                                font-family: "Courier New" !important;
 +
                                font-size: 13.8px !important;
 +
                                color: #0092CB;
 +
                              }
 +
.grnblbarcoding {
 +
                                font-family: "Courier New" !important;
 +
                                font-size: 13.8px !important;
 +
                                color: #006C84;
 +
                                background:#F8F8F8 !important;
 +
                              }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#myCarousel {   
 +
max-width: 800px;
 +
max-height: 600px;
 +
}
 +
.carousel-caption {
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
 +
sans-serif;}
 +
 
 +
.peopleCarouselImg img {
 +
height: 400px;
 +
max-height: 400px;
 +
width: auto;
 +
}
 +
 
 +
.container {
 +
/*background-color: rgba(249, 251, 251, 1);*/
 +
}
 +
.container-fluid {
 +
/*background-color: rgba(249, 251, 251, 1);*/
 +
}
 +
 
 +
.img-top {
 +
  max-width: 50% !important;
 +
  height: auto;
 +
}
 +
 
 +
.imgprotocols {
 +
  width: 5% !important;
 +
  height: 5% !important;
 +
}
 +
 
 +
.spcmkr {
 +
height: 65px;
 +
}
 +
 
 +
ol, ul.ourlist {
 +
font-size:17px;
 +
}
 +
.nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{
 +
background: none !important;
 +
}
 +
 
 +
.tableheadergrnbl {
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px !important;
 +
                                text-align: left !important;
 +
                                color: #006C84 !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 15px;
 +
}
 +
         
 +
.tableunevengrnbl {       
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: left !important;
 +
                                color: #006C84 !important;
 +
                                background:#FFFFFF !important;
 +
                                padding: 15px;
 +
}
 +
 
 +
.tableevengrnbl {
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: left !important;
 +
                                color: #006C84 !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 15px;
 +
}
 +
 
 +
.tableheaderadpbl {
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px !important;
 +
                                text-align: left !important;
 +
                                color: #0092CB !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 15px;
 +
}
 +
         
 +
.tableunevenadpbl {       
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: left !important;
 +
                                color: #0092CB !important;
 +
                                background:#FFFFFF !important;
 +
                                padding: 15px;
 +
}
 +
 
 +
.tableevenadpbl {
 +
                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
                                font-size: 18px  !important;
 +
                                text-align: left !important;
 +
                                color: #0092CB !important;
 +
                                background:#F8F8F8 !important;
 +
                                padding: 15px;
 +
}
 +
 
 +
 
 +
/* THIS IS FOR DROPDOWNMENU */
 +
 
 +
 
 +
.collapsible {
 +
  cursor: pointer;
 +
  padding: 16px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline:;
 +
  font-size: 17px;
 +
  background-color: #FFFFFF:
 +
}
 +
 
 +
.cadpbl {
 +
  color: white;
 +
  background-color: #0092CB;
 +
}
 +
.cgrnbl {
 +
    color: white;
 +
    background-color: #006C84;
 +
}
 +
.corngcrl {
 +
    color: #777777;
 +
    background-color: #FFCCBB;
 +
}
 +
.cthgrys {
 +
    color: white;
 +
    background-color: #777777;
 +
}
 +
.cjnnbl {
 +
    color: white;
 +
    background-color: #00B4C7;
 +
}
 +
 
 +
 
 +
.activedropdownadpbl.collapsible:hover {
 +
  background-color: #F8F8F8;
 +
  color: #0092CB;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.cadpbl.collapsible:hover {
 +
  background-color: #F8F8F8;
 +
  color: #0092CB;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.corngcrl.collapsible:hover {
 +
  background-color: #F8F8F8;
 +
  color: #FFCCBB;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.activedropdownadpblprotocols.collapsible:hover {
 +
  background-color: #F8F8F8;
 +
  color: #0092CB;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.activedropdownorngcrl.collapsible:hover {
 +
  background-color: #F8F8F8;
 +
  color: #FFCCBB;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.collapsible:after {
 +
  content: '\002B';
 +
  color: none;
 +
  font-weight: bold;
 +
  float: right;
 +
  margin-left: 5px;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.activedropdownadpblprotocols:after, activedropdownadpbl:after{
 +
  content: "\2212";
 +
  /* color: #F8F8F8; */
 +
  /* background-color: #0092CB; */
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
.activedropdownorngcrl:after{
 +
  content: "\2212";
 +
  /* color: #F8F8F8; */
 +
  /* background-color: #FFCCBB; */
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
.content {
 +
  padding: 0 18px;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
  background-color: #777777
 +
  color: white;
 +
  font-size: 17px !important;
 +
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande",
 +
  sans-serif !important;
 +
  text-align: justify;
 +
}
 +
 
 +
#CircleLife {
 +
  max-height:600px !important;
 +
  length:auto !important;
 +
}
 +
 
 +
button{ position:relative; }
 +
button span, { position:absolute; top:-85px;}
 +
 
 +
a.repositioner{ position:absolute; top:-85px;}
 +
 
 +
 
 +
 
 +
 
 +
<!------------------ Slideshow container FROM KAVISH--------------------->
 +
 
 +
 
 +
<!------------------ Timeline container --------------------->
 +
 +
section#timeline {
 +
    width: 80%;
 +
    margin: 20px auto;
 +
    position: relative;}   
 +
section#timeline:before {
 +
    content: '';
 +
    display: block;
 +
    position: absolute;
 +
    left: 51.7%;
 
     top: 0;
 
     top: 0;
 +
    margin: 0 0 0 -1px;
 +
    top: 8%;
 +
    bottom: 80%;
 +
    width: 2px;
 +
    height: 90%;
 +
    background: #0092CB;} 
 +
section#timeline article {
 +
    width: 80%;
 +
    margin: 0 0 20px 0;
 +
    left: 12%;
 +
    right: -4%;
 +
    position: relative;} 
 +
section#timeline article:after {
 +
    content: '';
 +
    display: block;
 +
    clear: both;} 
 +
section#timeline article div.inner {
 +
    width: 43%;
 +
    float: left;
 +
    margin: 20px 0 0 0;
 +
    border-radius: 6px;} 
 +
section#timeline article div.inner span.date {
 +
    display: block;
 +
    width: 60px;
 +
    height: 60px;
 +
    padding: 5px 0;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 50%;
 +
    margin: 0 0 0 -32px;
 +
    border-radius: 110%;
 +
    font-size: 10px;
 +
    font-weight: 900;
 +
    line-height: normal;
 +
    text-transform: uppercase;
 +
    background: #25303B;            /*Date circle color*/
 +
    color: #FFCCBB;                /*date letter color*/
 +
/*  border: 4px solid red;      inner ring r*/
 +
    box-shadow: 0 0 0 7px #0092CB;} /*outer ring color*/ 
 +
section#timeline article div.inner span.date span {
 +
  display: block;
 +
  text-align: center;}
 +
section#timeline article div.inner span.date span.day {font-size: 10px;}
 +
section#timeline article div.inner span.date span.month {font-size: 16px;}
 +
section#timeline article div.inner span.date span.year {font-size: 10px;}
 +
section#timeline article div.inner h2 {
 +
  padding: 15px;
 +
  margin: 0;
 +
  color: #f7f7f7;
 +
  font-size: 18px;
 +
  text-transform: uppercase;
 +
  letter-spacing: -1px;
 +
  border-radius: 6px 6px 0 0;
 +
  position: relative;} 
 +
section#timeline article div.inner h2:after {
 +
  content: '';
 +
  position: absolute;
 +
  top: 10px;
 +
  right: -5px;
 +
  width: 10px;
 +
  height: 10px;
 +
  -webkit-transform: rotate(-45deg);}
 +
section#timeline article div.inner p {
 +
  padding: 10px;
 +
  margin: 0;
 +
  font-size: 10px;
 +
  background: #f7f7f7;
 +
  color: #656565;
 +
  border-radius: 0 0 6px 6px;} 
 +
section#timeline article:nth-child(2n+2) div.inner {float: right;}
 +
section#timeline article:nth-child(2n+2) div.inner h2:after {left: -5px;}
 +
section#timeline article:nth-child(5n) div.inner h2 {background: #006C84;} /*COLOR OF CONTAINER*/
 +
section#timeline article:nth-child(5n) div.inner h2:after {background: #006C84;/*COLOR OF ARROW*/}
 +
section#timeline article:nth-child(5n+1) div.inner h2 {background: #00B4C7;/*COLOR OF CONTAINER*/}
 +
section#timeline article:nth-child(5n+1) div.inner h2:after {background: #00B4C7;/*COLOR OF ARROW*/}
 +
section#timeline article:nth-child(5n+2) div.inner h2 {background: #FFCCBB;/*COLOR OF CONTAINER*/}
 +
section#timeline article:nth-child(5n+2) div.inner h2:after {background: #FFCCBB;/*COLOR OF ARROW*/}
 +
section#timeline article:nth-child(5n+3) div.inner h2 {background: #0092CB;/*COLOR OF CONTAINER*/}
 +
section#timeline article:nth-child(5n+3) div.inner h2:after {background: #0092CB;/*COLOR OF ARROW*/}
 +
section#timeline article:nth-child(5n+4) div.inner h2 {background: #008284;/*COLOR OF CONTAINER*/}
 +
section#timeline article:nth-child(5n+4) div.inner h2:after {background: #008284;}/*COLOR OF ARROW*/
 +
 +
 +
 +
/* ------ TEAM MEMBERS ------ */
 +
 +
#team .card {
 +
border: none;
 +
background: #ffffff;
 +
padding: 40px;
 +
padding-bottom: 20px;
 +
overflow: auto;
 
}
 
}
  
−
#globalWrapper {
+
#supervisors .card_sup {
−
    padding-bottom: 0px;
+
border: none;
−
    z-index: 30;
+
height: 430px;
 +
background: #ffffff;
 +
padding: 30px;
 +
padding-bottom: 20px;
 +
overflow: auto;
 +
margin: 20px;
 +
position: relative;
 +
z-index: 1;
 +
margin-bottom: 30px;
 +
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 
}
 
}
  
−
#top_menu_inside {
+
.img_sup {
−
    opacity: 0;
+
max-width: 60%;
−
     -webkit-transition: opacity .25s ease-in-out;
+
height: auto;
−
    transition: opacity .25s ease-in-out;
+
border-radius: 50%;
 +
}   
 +
      
 +
.image-flip:hover .backside,
 +
.image-flip.hover .backside {
 +
-webkit-transform: rotateY(0deg);
 +
-moz-transform: rotateY(0deg);
 +
-o-transform: rotateY(0deg);
 +
-ms-transform: rotateY(0deg);
 +
transform: rotateY(0deg);
 +
border-radius: .25rem;
 
}
 
}
  
−
#top_menu_inside,
+
.image-flip:hover .frontside,
−
#top_menu_14.hover {
+
.image-flip.hover .frontside {
−
    opacity: 1;
+
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg);
 +
-o-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 
}
 
}
  
−
.igem_2017_menu_wrapper {
+
.mainflip {
−
    z-index: 10;
+
-webkit-transition: 2s;
−
    display: none;
+
-webkit-transform-style: preserve-3d;
 +
-ms-transition: 2s;
 +
-moz-transition: 2s;
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
transition: 2s;
 +
transform-style: preserve-3d;
 +
position: relative;
 
}
 
}
  
−
ul {
+
.frontside {
−
     margin-left: 0;
+
position: relative;
 +
-webkit-transform: rotateY(0deg);
 +
-ms-transform: rotateY(0deg);
 +
z-index: 1;
 +
margin-bottom: 30px;
 +
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
}
 +
   
 +
 
 +
.backside {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: white;
 +
-webkit-transform: rotateY(-180deg);
 +
-moz-transform: rotateY(-180deg);
 +
-o-transform: rotateY(-180deg);
 +
-ms-transform: rotateY(-180deg);
 +
transform: rotateY(-180deg);
 +
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 +
}
 +
   
 +
 
 +
.frontside,
 +
.backside {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
-webkit-transition: 2s;
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transition: 2s;
 +
-moz-transform-style: preserve-3d;
 +
-o-transition: 2s;
 +
-o-transform-style: preserve-3d;
 +
-ms-transition: 2s;
 +
-ms-transform-style: preserve-3d;
 +
transition: 2s;
 +
transform-style: preserve-3d;
 +
}
 +
 
 +
.frontside .card,
 +
.backside .card {
 +
height: 500px;
 +
width: auto;
 +
}
 +
 
 +
.frontside .card .card-title,
 +
.backside .card .card-title {
 +
color: #007b5e !important;
 +
}
 +
 +
.frontside .card .card-body img {
 +
max-width: 60%;
 +
height: auto;
 +
border-radius: 50%;
 +
}
 +
 
 +
.sup_title {
 +
        margin: -3px !important;
 +
}
 +
 
 +
 
 +
/* KATEX */
 +
 
 +
.katex-display {
 +
  position: relative;
 +
}
 +
 
 +
.katex-display .katex .eqno {
 +
  display: block;
 +
  position: absolute;
 +
  right: 0;
 +
  top: 50%;
 +
  line-height: 0;
 +
}
 +
 
 +
/* ------ SUB-DROPDOWNS ------ */
 +
/*hide the inputs/checkmarks*/
 +
input.inputhide {
 +
  display: none;
 +
}
 +
 
 +
/*hide the submenu*/
 +
ul.submenu {
 +
  max-height: 0;
 +
  overflow: hidden;
 +
}
 +
.subcontent {
 +
    margin-top: 20px;
 +
    font-size: 17px;
 +
}   
 +
   
 +
.subdropdown{
 +
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
 +
    font-size: 17px;
 +
    text-decoration: none !important;
 +
    font-weight: 300 !important;
 +
    padding: 18px;
 +
    margin: -11px;
 +
}   
 +
 
 +
/*position the label*/
 +
label {
 +
    position: relative;
 +
    display: block;
 +
    cursor: pointer;
 +
}
 +
 
 +
/*show the submenu when checked*/
 +
input:checked~ul.submenu {
 +
  max-height: 300px;
 +
}
 +
 
 +
.content {
 +
    overflow: auto;
 +
}
 +
 
 +
 
 +
/*bullet points in our colours*/
 +
    ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl {
 +
            list-style: none;
 +
    } 
 +
ul.uladpbl li::before {
 +
    content: "\2022"; color: #0092CB;
 +
    display: inline-block; width: 1em;
 +
     margin-left: -1em
 +
}
 +
ul.ulorngcrl li::before {
 +
    content: "\2022"; color: #FFCCBB;
 +
    display: inline-block; width: 1em;
 +
    margin-left: -1em
 +
}
 +
ul.uljnnbl li::before {
 +
    content: "\2022"; color: #00B4C7;
 +
    display: inline-block; width: 1em;
 +
    margin-left: -1em
 +
}
 +
ul.ulgrnbl li::before {
 +
    content: "\2022"; color: #006C84;
 +
    display: inline-block; width: 1em;
 +
    margin-left: -1em
 +
}
 +
 
 +
 
 +
/* MEDALS */
 +
 
 +
    img.medals {float: right;
 +
    max-width: 30%;
 +
    height: auto;
 +
    padding: 20px;
 +
    margin-top: -10px;
 +
}   
 +
    img.medals2 {float: left;
 +
    max-width: 30%;
 +
    height: auto;
 +
    padding: 20px;
 +
    margin-right: 20px;
 +
    margin-top: -20px;
 +
}
 +
ol p {
 +
    font-size: 16px !important;   
 +
    }
 +
 
 +
.medalicon {
 +
  height: 25px !important;
 +
}
 +
 
 +
#to_dna.input {
 +
visibility: visible !important;
 +
}
 +
 
 +
ul.acklist li {
 +
    list-style: none !important;
 +
    font-size: 20px;
 +
    font-weight: bold;
 +
}
 +
ol p i {
 +
    font-size: 16px;   
 +
} 
 +
 
 +
ul.reflist li {
 +
    list-style: none !important;
 +
    font-size: 16px;
 +
}
 +
   
 +
.looove {
 +
margin: 20px;
 +
padding: 20px;
 +
max-height: 500px !important;
 
}
 
}
  
−
#top_menu_under {
+
.loooove {
−
    height: 0px;
+
margin: 20px;
 +
padding: 20px;
 +
max-height: 600px !important;
 
}
 
}
  
−
nav ul a:hover {
+
figcaption {
−
    text-decoration: none;
+
text-align: justify !important;
 
}
 
}

Revision as of 00:23, 14 October 2018

/* Removing default wiki layout */

/**************************************************************************************************************************************************************************************************/

  1. home_logo,
  2. sideMenu {

display: none; }

  1. sideMenu,
  2. top_title,

.patrollink { display: none; }

  1. content {

margin-left: 0px; margin-top: -7px; padding: 0px; width: 100%; background: none !important; }

body { background-image: url("T--TUDelft--2018_cutoff2.png") !important; background-repeat: no-repeat; background-position: bottom left; background-attachment: fixed; position: relative; margin-top: 40px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }


  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5,
  6. bodyContent h6, {

margin-bottom: 0px; }


.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; }

html { scroll-behavior: smooth !important; }

.adopeicon { height: 40px; width: auto; margin: 10px; }


/* TOPNAV */ nav, footer, #myScrollspy, .content, .blockquoteadpbl, .blockquotegrnbl, blockquoteorngcrl { -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); }

.content { 

padding: 25px;
background-color: #FFFFFF;

}

.navbar { z-index: 500 !important; }

.dropdown-menu { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

@media (max-width: 1200px) { 

   .navbar-header {
       float: none;
   }
   .navbar-left,.navbar-right {
       float: none !important;
   }
   .navbar-toggle {
       display: block;
   }
   .navbar-collapse {
       border-top: 1px solid transparent;
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }
   .navbar-fixed-top {

top: 0; border-width: 0 0 1px; } 

   .navbar-collapse.collapse {
       display: none!important;
   }
   .navbar-nav {
       float: none!important;

margin-top: 12px; } .navbar-nav>li { 

       float: none;
   }
   .navbar-nav>li>a {
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .collapse.in{
 		display:block !important;

} }


/* FOOTER */ .footer { background-color: #F8F8F8; position: relative; right: 0; bottom: -30px; left: 0; padding: 1rem; }

legend { background-color: rgba(249, 251, 251, 1); border: none; color: #797979; }

.logo { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor:pointer; }

.sponsorimg { max-height: 80px; width: auto; } .sponsorimg2 { max-height: 150px; width: auto; } .sponsorimg3 { max-height: 50px; width: auto; }

.sponsimgg { 

   float: right;
   max-width: 30%;
   height: auto; 
   padding-left: 10px;
   margin-left: 25px;
   max-height: 250px;

}


/* SIDEBAR */

ul.nav-pills { top: 160px; left: 45px; position: fixed; color: #006C84 !important; font-size: 15px; margin-right: 30px; }


.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { 

   color: #fff;
   background-color: #E2E8E4;

}

div.col-sm-9 div { height: 250px; font-size: 28px; }

.sponsors img { height: 6em; padding: 1em; }

.sponsors > div > a { display: block; position: relative; /* top: -2.5em;*/ }


/* GENERAL LAYOUT STUFF */

h1 { 

   font-size: 45px;
   font-weight: lighter !important;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; }

} h2 { 

   font-size: 35px !important;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; 

   font-weight: 100 !important;

}

h3 { 

   font-size: 30px;
   font-weight: lighter !important;

}


h4 { 

   font-size: 25px;
   font-weight: lighter !important;

}

h5 { 

   font-size: 22px;
   font-weight: lighter !important;

}

h6 { 

   font-size: 20px;
   font-weight: lighter !important;

}

/* GREEN-BLUE */ .grnbl { 

           color: #006C84;
       }

a.grnbl { color: #006C84 !important; }


h1.grnbl { 

   border-bottom: 2px solid #006C84 !important;
   padding:5px;

}


/* ADOPE BLUE */ 

.adpbl {
   color: #0092CB;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

a.adpbl { color: #0092CB !important; }

h1.adpbl { 

   border-bottom: 2px solid #0092CB !important;
   padding:5px;

}

/* ORANGE-CORAL */

.orngcrl { 

   color: #FFCCBB;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; 

       }

a.orngcrl { color: #FFCCBB !important; }

h1.orngcrl { 

   border-bottom: 2px solid #FFCCBB !important;
   padding:5px;

}

/* THE GREYS */ 

   .thgrys {
   color: #777777;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; }

a.thgrys { color: #777777 !important; }

h1.thgrys { 

   border-bottom: 2px solid #777777 !important; 
   padding: 5px;

}

/* JANINE's BLUE */ 

   .jnnbl {
   color: #00B4C7;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
    sans-serif !important;

}

a.jnnbl { color: #00B4C7 !important; }

h1.jnnbl { 

   border-bottom: 2px solid #00B4C7 !important;
   padding:5px;

}

p { font-size: 19px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify; }

p.DNAstyle { 

    font-family: "Courier New", Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace! important;
    word-wrap: break-word;

}

.blockquotegrnbl { 

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #006C84;
 color: #006C84;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

} 

.opinions 
{font-size: 20px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
 text-align: right !important;
 width:100%;
 font-style: italic !important;

}


.blockquoteorngcrl { 

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #FFCCBB;
 color: #FFCCBB;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

}

.blockquoteadpbl { 

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #0092CB;
 color: #0092CB;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

} 



.figadpbl {
   color: #0092CB;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

.figgrnbl {
   color: #006C84;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

.figjnnbl {
   color: #00B4C7;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

/* BARCODING */ .backgroundbarcoding{ background:#F8F8F8 !important; 

                                padding: 5px;
                                border: 1px solid #00B4C7;
                             }

.textDNAbarcoding { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left!important;
                                color: #00B4C7 !important;
                             }

.textboxesDNAbarcoding { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 16px  !important;
                                text-align: left!important;
                                color: #00B4C7 !important;
                                background:#F8F8F8 !important; 
                                padding: 5px;
                                border: 2px solid #00B4C7;:
                             }

.headerDNAbarcoding { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: center !important;
                                color: #00B4C7 !important;
                                background:#F8F8F8 !important; 
                                padding: 5px;
                             }

.DNAbarcoding { font-family: "Courier New" !important; 

                                font-size: 13.8px !important;
                                text-align: left !important;
                                color: #00B4C7 !important;
                                background:#FFFFFF !important;
                                padding: 5px;
                       }

.jnnblbarcoding { 

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #00B4C7;
                             }

.adpblbarcoding { 

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #0092CB;
                             }

.grnblbarcoding { 

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #006C84;
                                background:#F8F8F8 !important;
                             }




  1. myCarousel {

max-width: 800px; max-height: 600px; } .carousel-caption { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}

.peopleCarouselImg img { height: 400px; max-height: 400px; width: auto; }

.container { /*background-color: rgba(249, 251, 251, 1);*/ } .container-fluid { /*background-color: rgba(249, 251, 251, 1);*/ }

.img-top { 

 max-width: 50% !important;
 height: auto;

}

.imgprotocols { 

 width: 5% !important;
 height: 5% !important;

}

.spcmkr { 

height: 65px;

}

ol, ul.ourlist { 

font-size:17px;

} .nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{ background: none !important; }

.tableheadergrnbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableunevengrnbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#FFFFFF !important; 
                                padding: 15px;

}

.tableevengrnbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableheaderadpbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableunevenadpbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#FFFFFF !important; 
                                padding: 15px;

}

.tableevenadpbl { 

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}


/* THIS IS FOR DROPDOWNMENU */


.collapsible { 

 cursor: pointer;
 padding: 16px;
 width: 100%;
 border: none;
 text-align: left;
 outline:;
 font-size: 17px;
 background-color: #FFFFFF:

}

.cadpbl { 

  color: white;
  background-color: #0092CB;

} .cgrnbl { 

   color: white;
   background-color: #006C84;

} .corngcrl { 

   color: #777777;
   background-color: #FFCCBB;

} .cthgrys { 

   color: white;
   background-color: #777777;

} .cjnnbl { 

   color: white;
   background-color: #00B4C7;

}


.activedropdownadpbl.collapsible:hover { 

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.cadpbl.collapsible:hover { 

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.corngcrl.collapsible:hover { 

 background-color: #F8F8F8;
 color: #FFCCBB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownadpblprotocols.collapsible:hover { 

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownorngcrl.collapsible:hover { 

 background-color: #F8F8F8;
 color: #FFCCBB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.collapsible:after { 

 content: '\002B';
 color: none;
 font-weight: bold;
 float: right;
 margin-left: 5px; 
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownadpblprotocols:after, activedropdownadpbl:after{ 

 content: "\2212";
 /* color: #F8F8F8; */
 /* background-color: #0092CB; */
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

} .activedropdownorngcrl:after{ 

 content: "\2212";
 /* color: #F8F8F8; */
 /* background-color: #FFCCBB; */
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.content { 

 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 background-color: #777777
 color: white;
 font-size: 17px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

  1. CircleLife {
 max-height:600px !important;
 length:auto !important;

}

button{ position:relative; } button span, { position:absolute; top:-85px;}

a.repositioner{ position:absolute; top:-85px;}




section#timeline { 

   width: 80%;
   margin: 20px auto;
   position: relative;}

section#timeline:before { 

   content: ;
   display: block;
   position: absolute;
   left: 51.7%;
   top: 0;
   margin: 0 0 0 -1px;
   top: 8%;
   bottom: 80%;
   width: 2px;
   height: 90%;
   background: #0092CB;}

section#timeline article { 

   width: 80%;
   margin: 0 0 20px 0;
   left: 12%;
   right: -4%;
   position: relative;}

section#timeline article:after { 

   content: ;
   display: block;
   clear: both;}

section#timeline article div.inner { 

   width: 43%;
   float: left;
   margin: 20px 0 0 0;
   border-radius: 6px;}

section#timeline article div.inner span.date { 

   display: block;
   width: 60px;
   height: 60px;
   padding: 5px 0;
   position: absolute;
   top: 0;
   left: 50%;
   margin: 0 0 0 -32px;
   border-radius: 110%;
   font-size: 10px;
   font-weight: 900;
   line-height: normal;
   text-transform: uppercase;
   background: #25303B;            /*Date circle color*/
   color: #FFCCBB;                 /*date letter color*/

/* border: 4px solid red; inner ring r*/ 

   box-shadow: 0 0 0 7px #0092CB;} /*outer ring color*/

section#timeline article div.inner span.date span { 

 display: block;
 text-align: center;}

section#timeline article div.inner span.date span.day {font-size: 10px;} section#timeline article div.inner span.date span.month {font-size: 16px;} section#timeline article div.inner span.date span.year {font-size: 10px;} section#timeline article div.inner h2 { 

 padding: 15px;
 margin: 0;
 color: #f7f7f7;
 font-size: 18px;
 text-transform: uppercase;
 letter-spacing: -1px;
 border-radius: 6px 6px 0 0;
 position: relative;}

section#timeline article div.inner h2:after { 

 content: ;
 position: absolute;
 top: 10px;
 right: -5px;
 	width: 10px;

height: 10px; 

 -webkit-transform: rotate(-45deg);}

section#timeline article div.inner p { 

 padding: 10px;
 margin: 0;
 font-size: 10px;
 background: #f7f7f7;
 color: #656565;
 border-radius: 0 0 6px 6px;}

section#timeline article:nth-child(2n+2) div.inner {float: right;} section#timeline article:nth-child(2n+2) div.inner h2:after {left: -5px;} section#timeline article:nth-child(5n) div.inner h2 {background: #006C84;} /*COLOR OF CONTAINER*/ section#timeline article:nth-child(5n) div.inner h2:after {background: #006C84;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+1) div.inner h2 {background: #00B4C7;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+1) div.inner h2:after {background: #00B4C7;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+2) div.inner h2 {background: #FFCCBB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+2) div.inner h2:after {background: #FFCCBB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+3) div.inner h2 {background: #0092CB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+3) div.inner h2:after {background: #0092CB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+4) div.inner h2 {background: #008284;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+4) div.inner h2:after {background: #008284;}/*COLOR OF ARROW*/


/* ------ TEAM MEMBERS ------ */

  1. team .card {

border: none; background: #ffffff; padding: 40px; padding-bottom: 20px; overflow: auto; }

  1. supervisors .card_sup {

border: none; height: 430px; background: #ffffff; padding: 30px; padding-bottom: 20px; overflow: auto; margin: 20px; position: relative; z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }

.img_sup { max-width: 60%; height: auto; border-radius: 50%; }

.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); border-radius: .25rem; }

.image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }

.mainflip { -webkit-transition: 2s; -webkit-transform-style: preserve-3d; -ms-transition: 2s; -moz-transition: 2s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 2s; transform-style: preserve-3d; position: relative; }

.frontside { position: relative; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }


.backside { position: absolute; top: 0; left: 0; background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }


.frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 2s; -webkit-transform-style: preserve-3d; -moz-transition: 2s; -moz-transform-style: preserve-3d; -o-transition: 2s; -o-transform-style: preserve-3d; -ms-transition: 2s; -ms-transform-style: preserve-3d; transition: 2s; transform-style: preserve-3d; }

.frontside .card, .backside .card { height: 500px; width: auto; }

.frontside .card .card-title, .backside .card .card-title { color: #007b5e !important; }

.frontside .card .card-body img { max-width: 60%; height: auto; border-radius: 50%; }

.sup_title { 

       margin: -3px !important;

}


/* KATEX */

.katex-display { 

 position: relative;

}

.katex-display .katex .eqno { 

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

}

/* ------ SUB-DROPDOWNS ------ */ /*hide the inputs/checkmarks*/ input.inputhide { 

 display: none;

}

/*hide the submenu*/ ul.submenu { 

 max-height: 0;
 overflow: hidden;

} .subcontent { 

   margin-top: 20px;
   font-size: 17px;

}

.subdropdown{ 

   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
   font-size: 17px;
   text-decoration: none !important;
   font-weight: 300 !important;
   padding: 18px;
   margin: -11px;

}

/*position the label*/ label { 

   position: relative;
   display: block;
   cursor: pointer;

}

/*show the submenu when checked*/ input:checked~ul.submenu { 

 max-height: 300px;

}

.content { 

   overflow: auto;

}


/*bullet points in our colours*/ 

   ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl {
           list-style: none;
   }

ul.uladpbl li::before { 

   content: "\2022"; color: #0092CB;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.ulorngcrl li::before { 

   content: "\2022"; color: #FFCCBB;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.uljnnbl li::before { 

   content: "\2022"; color: #00B4C7;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.ulgrnbl li::before { 

   content: "\2022"; color: #006C84;
   display: inline-block; width: 1em;
   margin-left: -1em

}


/* MEDALS */ 

   img.medals {float: right;
   max-width: 30%;
   height: auto; 
   padding: 20px;
   margin-top: -10px;

} 

   img.medals2 {float: left;
   max-width: 30%;
   height: auto; 
   padding: 20px;
   margin-right: 20px;
   margin-top: -20px;

} 

ol p {
   font-size: 16px !important;    
   }

.medalicon { 

 height: 25px !important;

}

  1. to_dna.input {

visibility: visible !important; }

ul.acklist li { 

   list-style: none !important; 
   font-size: 20px;
   font-weight: bold;

} ol p i { 

   font-size: 16px;

}

ul.reflist li { 

   list-style: none !important; 
   font-size: 16px;

}

.looove { margin: 20px; padding: 20px; max-height: 500px !important; }

.loooove { margin: 20px; padding: 20px; max-height: 600px !important; }

figcaption { text-align: justify !important; }