Difference between revisions of "Team:DTU-Denmark/stylesheetsub"

 
(154 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
    @import url('https://fonts.googleapis.com/css?family=Quicksand');
 +
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
 
/************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/
 
/************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/
Line 7: Line 9:
 
     /* Clear the default wiki settings */
 
     /* Clear the default wiki settings */
 
    
 
    
 +
    #content, body {
 +
      background-color: #f5e1bc;
 +
      font-family: 'Quicksand', sans-serif;
 +
    }
 +
 
 +
    #HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5, #HQ_page h6 {
 +
      font-family: 'Quicksand', sans-serif;
 +
    }
 +
 
     #home_logo, #sideMenu {
 
     #home_logo, #sideMenu {
 
       display:none;
 
       display:none;
Line 22: Line 33:
 
     }
 
     }
  
−
     body {
+
     #bodyContent h1 {
−
       background-color: white;
+
       margin-bottom: 30px;
 +
    }
 +
    #bodyContent h2, #bodyContent h3 {
 +
      margin-top: 25px;
 +
      margin-bottom: 15px;
 +
    }
 +
    #bodyContent h4, #bodyContent h5 {
 +
      margin-top: 20px;
 +
      margin-bottom: 10px;
 +
    }
 +
    #bodyContent h6 {
 +
      margin-top: 15px;
 +
      margin-bottom: 5px;
 
     }
 
     }
  
−
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
 
−
       margin-bottom: 0px;
+
/****************************************************************************************************************/
 +
/*********************************************** SETS MAIN STYLES ***********************************************/
 +
/****************************************************************************************************************/
 +
 
 +
 
 +
/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/
 +
 
 +
     #windowcontent * {
 +
      box-sizing: border-box;
 +
      font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
 +
       margin: 0px;
 +
      padding: 0px;
 
     }
 
     }
  
 +
    #windowcontent ul, ol {
 +
      list-style: none;
 +
    }
  
 +
    a {
 +
      text-decoration: none;
 +
    }
  
 +
    /*makes the website span from edge to edge of the viewport*/
 +
 +
    #windowcontent body {
 +
      position: relative;
 +
      width: 100%;
 +
      margin: 0px;
 +
      padding: 0px;
 +
    }
 +
 +
    /***** centers h1 as standard *****/
 +
 +
    h1 {
 +
      text-align: center;
 +
    }
 +
 +
    /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/
 +
 +
    .col-1 {
 +
      width: 08.33%;
 +
    }
 +
    .col-2 {
 +
      width: 16.66%;
 +
    }
 +
    .col-3 {
 +
      width: 25.00%;
 +
    }
 +
    .col-4 {
 +
      width: 33.33%;
 +
    }
 +
    .col-5 {
 +
      width: 41.66%;
 +
    }
 +
    .col-6 {
 +
      width: 50.00%;
 +
    }
 +
    .col-7 {
 +
      width: 58.33%;
 +
    }
 +
    .col-8 {
 +
      width: 66.66%;
 +
    }
 +
    .col-9 {
 +
      width: 75.00%;
 +
    }
 +
    .col-10 {
 +
      width: 83.33%;
 +
    }
 +
    .col-11 {
 +
      width: 91.66%;
 +
    }
 +
    .col-12 {
 +
      width: 100.0%;
 +
    }
 +
 +
    /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/
 +
 +
    .colp-1 {
 +
      width: calc(1000px/12);
 +
    }
 +
    .colp-2 {
 +
      width: calc(1000px/12*2);
 +
    }
 +
    .colp-3 {
 +
      width: calc(1000px/12*3);
 +
    }
 +
    .colp-4 {
 +
      width: calc(1000px/12*4);
 +
    }
 +
    .colp-5 {
 +
      width: calc(1000px/12*5);
 +
    }
 +
    .colp-6 {
 +
      width: calc(1000px/12*6);
 +
    }
 +
    .colp-7 {
 +
      width: calc(1000px/12*7);
 +
    }
 +
    .colp-8 {
 +
      width: calc(1000px/12*8);
 +
    }
 +
    .colp-9 {
 +
      width: calc(1000px/12*9);
 +
    }
 +
    .colp-10 {
 +
      width: calc(1000px/12*10);
 +
    }
 +
    .colp-11 {
 +
      width: calc(1000px/12*11);
 +
    }
 +
    .colp-12 {
 +
      width: 1000px;
 +
    }
 +
 +
    /***** makes all the columns go to the left of the page and "stack" to the right if room *****/
 +
 +
    [class*="col-"] {
 +
      float: left;
 +
      padding: 15px;
 +
    }
 +
 +
    [class*="colp-"] {
 +
      float: left;
 +
      padding: 15px;
 +
    }
 +
 +
    /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
 +
    /************ (for example col-4, col-6, col-2 is a row) ***********/
 +
 +
 +
    /***** clears the row of other content *****/
 +
 +
    .row::after {
 +
      content: "";
 +
      clear: both;
 +
      display: table;
 +
    }
 +
 +
    #windowcontent .imgdisplay {
 +
      max-width: 500px;
 +
      margin: 30px auto 30px auto;
 +
    }
 +
 +
    #windowcontent .imgdisplay img {
 +
      max-width: 500px;
 +
    }
 +
 +
    #windowcontent .galleryimg img {
 +
      width: calc(1000px/12*4);
 +
      height: 230px;
 +
    }
  
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
−
/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
+
/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
  
  
−
     /***** creates the parallax effect on main page when scrooling *****/
+
     /***** removes margin and padding *****/
−
      
+
 
−
     #windowcontent .parallax {  
+
    #windowcontent .rmvpadmarg {
 +
      margin: 0px;
 +
      padding: 0px;
 +
    }
 +
 
 +
    /***** removes vertical lines on links *****/
 +
 
 +
     #windowcontent .rmvlinkstyle a {
 +
      text-decoration: none;
 +
    }
 +
 
 +
    /***** brings element to front of page, used to bring nav bar in front of everything else *****/
 +
 
 +
     #windowcontent .tofront {
 
       position: relative;
 
       position: relative;
−
       z-index: -1;
+
       z-index: 9999;
−
      background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
+
    }
−
      width: inherit;
+
  
−
      /***** height is viewport height +1.5% of viewport height (matches with the height of .parralaxfade) *****/
+
    /***** sets the position of the element to be given a bottom border *****/
−
      height: 101.5vh;
+
 
−
       background-attachment: fixed;
+
    #windowcontent .bottomborder {
−
      background-position: center;
+
       position: relative;
−
      background-repeat: no-repeat;
+
       padding: 25px 0px;
−
      background-size: cover;
+
−
       min-width: 1000px;
+
 
     }
 
     }
  
−
     /***** sets position and style for the headline text on main page *****/
+
     /***** styles borders for h1 elements *****/
  
−
     #windowcontent .homepageheadline {
+
     #windowcontent h1.bottomborder:after {
−
       display: block;
+
       content:"";
−
       margin: auto;
+
      background: black;
 +
      position: absolute;
 +
      left: 50px;
 +
      bottom: 16px;
 +
       height: 1px;  
 
       width: 700px;
 
       width: 700px;
−
      padding-top: 15vh;
 
 
     }
 
     }
  
  
−
     /***** styles line one in the headline text on main page *****/
+
     /***** styles borders for h2 elements *****/
  
−
     #windowcontent #homepageheadline1 {
+
     #windowcontent h2.bottomborder:after {
−
       font-size: 5em;
+
       content:"";
−
       color: white;
+
      background: black;
−
       font-family: sans-serif;
+
      position: absolute;  
−
       text-shadow: 2px 2px 6px #727272;
+
       left: 200px;  
−
       text-align: center;
+
       bottom: 18px;
 +
       height: 1px;  
 +
       width: 400px;
 
     }
 
     }
  
−
     /***** styles line two in the headline text on main page *****/
+
     #windowcontent .fixed {
 +
      position: fixed;
 +
    }
 +
 
 +
.rotateimg90 {
 +
  -webkit-transform:rotate(90deg);
 +
  -moz-transform: rotate(90deg);
 +
  -ms-transform: rotate(90deg);
 +
  -o-transform: rotate(90deg);
 +
  transform: rotate(90deg);
 +
}
 +
 
 +
/****************************************************************************************************************/
 +
/**************************************************** NAVBAR ****************************************************/
 +
/****************************************************************************************************************/
 +
 
 +
 
 +
    /***** defines key properties of the nav bar *****/
 +
 
 +
    #windowcontent nav {
 +
      margin: 0px;
 +
      padding: 0px;
 +
      overflow: hidden;
 +
      top: 0px;
 +
      width: 100%;
 +
      height: 40px;
 +
    }
 +
 
 +
    /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/
 +
 
 +
    #windowcontent .navbarcenter {
 +
      width: 1000px;
 +
      margin: auto;
 +
    }
 +
 
 +
    /***** sets color of nav bar when the page is scrolled to the top *****/
 +
 
 +
    #windowcontent .navbar {
 +
      background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
 +
      background-color: rgba(20,20,20,1);
 +
      box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 +
    }
 +
 
 +
    /***** sets background of navbar choice buttons when hovered *****/
 +
 
 +
    #windowcontent .dropdown:hover .dropbtn {
 +
      background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
      background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
      background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
      background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
    }
 +
 
 +
    /***** makes nav bar choices float next to each other *****/
 +
 
 +
    #windowcontent .dropdown {
 +
      float: right;
 +
      height: 40px;
 +
    }
 +
 
 +
    /***** layout of nav bar choice buttons *****/
  
−
     #windowcontent #homepageheadline2 {
+
     #windowcontent .dropdown .dropbtn {
−
       font-size: 3em;
+
       height: 40px;
 +
      display: inline-block;
 
       color: white;
 
       color: white;
−
      font-family: sans-serif;
 
−
      text-shadow: 0px 0px 5px #727272;
 
 
       text-align: center;
 
       text-align: center;
 +
      padding: 10px 16px;
 +
      width: 200px;
 +
      text-decoration: none;
 +
      font-size: 1.2em;
 +
      font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
 
     }
 
     }
  
−
     /***** creates a fade from parallax image to main content. Height fits extra height in .parallax *****/
+
     /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/
  
−
     #windowcontent .parallaxfade {
+
     #windowcontent .dropdown-content {
−
       width: inherit;
+
       -webkit-transition: background 1.5s; /* Safari */
−
       height: 1.5vh;
+
       transition: background 1.5s;
 +
      display: none;
 
       position: absolute;
 
       position: absolute;
−
       bottom: 0px;
+
       background-color: transparent;
−
       background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
+
       min-width: 200px;
−
      background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
+
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
       background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
+
      z-index: 1;
−
       background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1)); /* Standard syntax (must be last) */
+
    }
 +
 
 +
    /***** displays dropdown content when nav bar choice is hovered *****/
 +
 
 +
    #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
 +
      display: block;
 +
    }
 +
 
 +
    /***** defines nav bar dropdown link layout *****/
 +
 
 +
    #windowcontent .dropdown-content a {
 +
      color: black;
 +
       background-color: white;
 +
      padding: 10px 16px;
 +
      text-decoration: none;
 +
      display: block;
 +
      text-align: left;
 +
    }
 +
 
 +
    /***** changes navbar dropdown menu color when choice is hovered *****/
 +
 
 +
    #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
 +
       background-color: rgb(235,235,235);
 
     }
 
     }
  
Line 111: Line 382:
 
       margin: 100px auto;
 
       margin: 100px auto;
 
       width: 1000px;
 
       width: 1000px;
 +
      min-height: 95vh;
 
       text-align: justify;
 
       text-align: justify;
 
       clear: both;
 
       clear: both;
Line 116: Line 388:
 
     }
 
     }
  
−
    /***** container for the two pictures in top of main content *****/
+
     #windowcontent .maincontainer #displayvid {
−
   
+
       margin: 30px 0px 30px 66px;
−
     #windowcontent .imgmenu {
+
−
      max-width: 100%;
+
−
       margin: 70px auto 100px auto;
+
−
      overflow: hidden;
+
 
     }
 
     }
  
−
     /***** sets container for the individual pictures *****/
+
     #windowcontent .maincontainer p {font-size: 16px;!important}
  
−
     #windowcontent .imgmenuitem {
+
     #windowcontent figure {
−
       position: relative;
+
       text-align: center;
−
       width: 100%;
+
       display: table;
−
       max-width: 700px;
+
       max-width: 100%;
−
       margin: 0px auto;
+
       margin: 25px auto;
−
      height: 400px;
+
−
      border-radius: 20px;
+
−
      overflow: hidden;
+
−
      cursor: pointer;
+
 
     }
 
     }
  
−
    /***** sets layout for the pictures themselves *****/
+
     #windowcontent table {
−
   
+
       background-color: rgba(0,0,0,0);
−
     #windowcontent .imgmenucontent {
+
−
      height: 100%;
+
−
      width: 100%;
+
−
       background-size: cover;
+
−
      background-repeat: no-repeat;
+
−
      -webkit-transition: all .5s;
+
−
      -moz-transition: all .5s;
+
−
      -o-transition: all .5s;
+
−
      transition: all .5s;
+
 
     }
 
     }
  
−
     /***** the different images are styled *****/
+
     #windowcontent table th{
 +
      background-color: rgba(0,0,0,.2);
 +
      border: 1px solid black;
 +
    }
  
−
     #windowcontent .img1 {
+
     #windowcontent table td {
−
       background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--DTU-Denmark--snake_problem.jpg");
+
       background-color: rgba(0,0,0,0);
−
      opacity: 0.9;
+
       border: 1px solid black;
−
      -webkit-filter: brightness(1.2);
+
−
       filter: brightness(1.2);
+
−
      background-position: -200px center;
+
−
    }
+
−
   
+
−
    #windowcontent .img2 {
+
−
      background-image: url("https://static.igem.org/mediawiki/2017/b/bc/T--DTU-Denmark--snake_map.jpg");
+
−
      background-position: -200px -20px;
+
 
     }
 
     }
  
−
    /***** zooms picture when hovered *****/
+
     #windowcontent table tr:nth-child(even) {
−
   
+
       background-color: rgba(0,0,0,0.07);
−
     #windowcontent .imgmenuitem:hover .imgmenucontent, #windowcontent .imgmenuitem:focus .imgmenucontent {
+
       border: 1px solid black;
−
      -ms-transform: scale(1.1);
+
−
       -moz-transform: scale(1.1);
+
−
       -webkit-transform: scale(1.1);
+
−
      -o-transform: scale(1.1);
+
−
      transform: scale(1.1);
+
−
      opacity: 0.5;
+
 
     }
 
     }
  
−
    /***** sets layout of picture overlay *****/
 
  
−
    #windowcontent .imgmenuoverlay {
 
−
      position: absolute;
 
−
      transition: 0.5s ease;
 
−
      background-color: rgba(50,50,50,0.6);
 
−
      padding: 16px 12px;
 
−
      width: 100%;
 
−
      height: 40%;
 
−
      bottom: 0px;
 
−
    }
 
  
−
    /***** changes layout of overlay on pictures when hovered *****/
+
/****************************************************************************************************************/
 +
/************************************************* RIGHT NAVBAR *************************************************/
 +
/****************************************************************************************************************/
  
−
     #windowcontent .imgmenuitem:hover .imgmenuoverlay, #windowcontent .imgmenuitem:focus .imgmenuoverlay {
+
     #windowcontent .rightnavbar {
−
       background-color: rgba(50,50,50,0.9);
+
       margin-top: 80px;
 
     }
 
     }
  
−
    /***** sets style of the text in the overlay *****/
+
     #windowcontent .rightnavbar.fixedrightnavbar {
−
   
+
       margin-top: -30px;
−
     #windowcontent .imgmenuitem a * {
+
       position: fixed;
−
       color: white;
+
       width: calc(1000px/12*2);
−
       cursor: pointer;
+
−
       text-decoration: none;
+
 
     }
 
     }
  
−
     /***** sets style of the header in the overlay *****/
+
     #windowcontent .rightnavbar li {
 +
      position: relative;
 +
      text-align: justify;
 +
    }
  
−
     #windowcontent .imgmenuitem a *:first-child {
+
     #windowcontent .rightnavbar li a {
−
       width: 100%;
+
       display: block;
−
       border-bottom: 1px solid white;
+
      color: #7b5611;
−
       text-align: center;
+
      padding: 10px 15px;
 +
      margin: 5px 20px;
 +
       font-size: 1em;
 +
       text-decoration: none;
 
     }
 
     }
  
−
     /***** styles the paragraph in the overlay *****/
+
     /* Change the link color on hover */
 
      
 
      
−
     #windowcontent .imgmenuitem a p {
+
     #windowcontent .rightnavbar li a:hover {
−
       font-size: 14px;
+
       color: rgb(20,20,20);
 +
      border-left: 2px solid black;
 
     }
 
     }
 +
 +
  /* #windowcontent .rightnavbar li a:hover:after {
 +
    content:"";
 +
    background: black;
 +
    position: absolute;
 +
    left: 20px;
 +
    bottom: 8px;
 +
    height: 34px;
 +
    width: 2px;
 +
  }*/
 +
 +
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
Line 224: Line 477:
 
      
 
      
 
     #windowcontent footer {
 
     #windowcontent footer {
−
       background: #848282;
+
       background-color: background-color: #f5e1bc;
 
       color: white;
 
       color: white;
 
       width: 100%;
 
       width: 100%;
Line 230: Line 483:
 
       position: absolute;
 
       position: absolute;
 
       text-align: center;
 
       text-align: center;
−
      color: white;
 
 
       font-size: x-small;
 
       font-size: x-small;
−
       font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+
       font-family: 'Quicksand', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
      border-top: 2px solid black;
 
     }
 
     }
  
 
     /***** defines a container of same width as main content that contains footer content *****/
 
     /***** defines a container of same width as main content that contains footer content *****/
  
−
     #windowcontent .footercontainer {
+
     #windowcontent #footer .footercontainer {
 
       width: 1000px;
 
       width: 1000px;
 
       margin: 20px auto 25px auto;
 
       margin: 20px auto 25px auto;
Line 247: Line 500:
 
       align-content: center;
 
       align-content: center;
 
       text-align: center;
 
       text-align: center;
 +
      color: black;
 
     }
 
     }
  
Line 269: Line 523:
 
     #windowcontent footer img {
 
     #windowcontent footer img {
 
       margin: 10px;
 
       margin: 10px;
 +
    }
 +
 +
 +
/****************************************************************************************************************/
 +
/***************************************************** Tour *****************************************************/
 +
/****************************************************************************************************************/
 +
 +
    #windowcontent .tourNext, #windowcontent .tourPrev {
 +
      background-color: #7b5611;
 +
      color: white;
 +
      padding: 20px 20px;
 +
      border-radius: 5px;
 +
      float: right;
 +
      text-decoration: none;
 +
      font-weight: bold;
 +
      margin-top: 50px;
 +
    }
 +
 +
    #windowcontent .tourPrev {
 +
      background-color: #7b5611;
 +
      color: white;
 +
      padding: 20px 20px;
 +
      border-radius: 5px;
 +
      float: left;
 +
      text-decoration: none;
 +
      font-weight: bold;
 +
    }
 +
 +
    #windowcontent .tourNext:hover, #windowcontent .tourPrev:hover {
 +
      background-color: #5a3f0c;
 +
    }
 +
 +
    #windowcontent .tournavbar {
 +
      width: 700px;
 +
      margin: auto;
 +
      position: relative;
 +
    }
 +
 +
    #windowcontent .tournavbar img {
 +
      width: 700px;
 +
      margin: auto;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink {
 +
      position: absolute;
 +
      border: 2px solid #ac9884;
 +
      padding: 2px 4px;
 +
      color: black;
 +
      top: 57px;
 +
      border-radius: 5px;
 +
      text-decoration: none;
 +
      font-weight: bold;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink:hover {
 +
      background-color: #ac9884;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink1 {
 +
      left: -15px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink2 {
 +
      left: 105px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink3 {
 +
      left: 215px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink4 {
 +
      left: 315px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink5 {
 +
      left: 411px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink6 {
 +
      left: 541px;
 +
    }
 +
 +
    #windowcontent .tournavbar .tourlink7 {
 +
      left: 638px;
 
     }
 
     }

Latest revision as of 02:05, 2 November 2017

   @import url('https://fonts.googleapis.com/css?family=Quicksand');

/****************************************************************************************************************/ /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/ /************************************************* (iGEM CODE) **************************************************/ /****************************************************************************************************************/ 


   /* Clear the default wiki settings */
 
   #content, body {
     background-color: #f5e1bc;
     font-family: 'Quicksand', sans-serif;
   }
 
   #HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5, #HQ_page h6 {
     font-family: 'Quicksand', sans-serif;
   }

   #home_logo, #sideMenu {
     display:none;
   }
   
   #sideMenu, #top_title, .patrollink  {
     display:none;
   }
   
   #content {
     width: 100%;
     padding: 0px;
     margin-top: -7px;
     margin-left: 0px;
   }

   #bodyContent h1 {
     margin-bottom: 30px;
   }
   #bodyContent h2, #bodyContent h3 {
     margin-top: 25px;
     margin-bottom: 15px;
   }
   #bodyContent h4, #bodyContent h5 {
     margin-top: 20px;
     margin-bottom: 10px;
   }
   #bodyContent h6 {
     margin-top: 15px;
     margin-bottom: 5px;
   }


/****************************************************************************************************************/ /*********************************************** SETS MAIN STYLES ***********************************************/ /****************************************************************************************************************/


/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/ 

   #windowcontent * {
     box-sizing: border-box;
     font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
     margin: 0px;
     padding: 0px;
   }

   #windowcontent ul, ol {
     list-style: none;
   }

   a {
     text-decoration: none;
   }

   /*makes the website span from edge to edge of the viewport*/

   #windowcontent body {
     position: relative;
     width: 100%;
     margin: 0px;
     padding: 0px;
   }

   /***** centers h1 as standard *****/

   h1 {
     text-align: center;
   }

   /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/

   .col-1 {
     width: 08.33%;
   }
   .col-2 {
     width: 16.66%;
   }
   .col-3 {
     width: 25.00%;
   }
   .col-4 {
     width: 33.33%;
   }
   .col-5 {
     width: 41.66%;
   }
   .col-6 {
     width: 50.00%;
   }
   .col-7 {
     width: 58.33%;
   }
   .col-8 {
     width: 66.66%;
   }
   .col-9 {
     width: 75.00%;
   }
   .col-10 {
     width: 83.33%;
   }
   .col-11 {
     width: 91.66%;
   }
   .col-12 {
     width: 100.0%;
   }

   /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/

   .colp-1 {
     width: calc(1000px/12);
   }
   .colp-2 {
     width: calc(1000px/12*2);
   }
   .colp-3 {
     width: calc(1000px/12*3);
   }
   .colp-4 {
     width: calc(1000px/12*4);
   }
   .colp-5 {
     width: calc(1000px/12*5);
   }
   .colp-6 {
     width: calc(1000px/12*6);
   }
   .colp-7 {
     width: calc(1000px/12*7);
   }
   .colp-8 {
     width: calc(1000px/12*8);
   }
   .colp-9 {
     width: calc(1000px/12*9);
   }
   .colp-10 {
     width: calc(1000px/12*10);
   }
   .colp-11 {
     width: calc(1000px/12*11);
   }
   .colp-12 {
     width: 1000px;
   }

   /***** makes all the columns go to the left of the page and "stack" to the right if room *****/

   [class*="col-"] {
     float: left;
     padding: 15px;
   }

   [class*="colp-"] {
     float: left;
     padding: 15px;
   }

   /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
   /************ (for example col-4, col-6, col-2 is a row) ***********/



   /***** clears the row of other content *****/

   .row::after {
     content: "";
     clear: both;
     display: table;
   }

   #windowcontent .imgdisplay {
     max-width: 500px;
     margin: 30px auto 30px auto;
   }

   #windowcontent .imgdisplay img {
     max-width: 500px;
   }

   #windowcontent .galleryimg img {
     width: calc(1000px/12*4);
     height: 230px;
   }


/****************************************************************************************************************/ /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/ /****************************************************************************************************************/ 


   /***** removes margin and padding *****/

   #windowcontent .rmvpadmarg {
     margin: 0px;
     padding: 0px;
   }

   /***** removes vertical lines on links *****/

   #windowcontent .rmvlinkstyle a {
     text-decoration: none;
   }

   /***** brings element to front of page, used to bring nav bar in front of everything else *****/

   #windowcontent .tofront {
     position: relative;
     z-index: 9999;
   }

   /***** sets the position of the element to be given a bottom border *****/

   #windowcontent .bottomborder {
     position: relative;
     padding: 25px 0px;
   }

   /***** styles borders for h1 elements *****/

   #windowcontent h1.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 50px;
     bottom: 16px;
     height: 1px; 
     width: 700px;
   }



   /***** styles borders for h2 elements *****/

   #windowcontent h2.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 200px; 
     bottom: 18px;
     height: 1px; 
     width: 400px;
   }

   #windowcontent .fixed {
     position: fixed;
   }

.rotateimg90 { 

 -webkit-transform:rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);

}

/****************************************************************************************************************/ /**************************************************** NAVBAR ****************************************************/ /****************************************************************************************************************/ 


   /***** defines key properties of the nav bar *****/

   #windowcontent nav {
     margin: 0px;
     padding: 0px;
     overflow: hidden;
     top: 0px;
     width: 100%;
     height: 40px;
   }

   /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/

   #windowcontent .navbarcenter {
     width: 1000px;
     margin: auto;
   }

   /***** sets color of nav bar when the page is scrolled to the top *****/

   #windowcontent .navbar {
     background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     background-color: rgba(20,20,20,1);
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
   }

   /***** sets background of navbar choice buttons when hovered *****/

   #windowcontent .dropdown:hover .dropbtn {
     background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
   }

   /***** makes nav bar choices float next to each other *****/

   #windowcontent .dropdown {
     float: right;
     height: 40px;
   }

   /***** layout of nav bar choice buttons *****/

   #windowcontent .dropdown .dropbtn {
     height: 40px;
     display: inline-block;
     color: white;
     text-align: center;
     padding: 10px 16px;
     width: 200px;
     text-decoration: none;
     font-size: 1.2em;
     font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
   }

   /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/

   #windowcontent .dropdown-content {
     -webkit-transition: background 1.5s; /* Safari */
     transition: background 1.5s;
     display: none;
     position: absolute;
     background-color: transparent;
     min-width: 200px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
   }

   /***** displays dropdown content when nav bar choice is hovered *****/

   #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
     display: block;
   }

   /***** defines nav bar dropdown link layout *****/

   #windowcontent .dropdown-content a {
     color: black;
     background-color: white;
     padding: 10px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }

   /***** changes navbar dropdown menu color when choice is hovered *****/

   #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
     background-color: rgb(235,235,235);
   }


/****************************************************************************************************************/ /************************************************* MAIN CONTENT *************************************************/ /****************************************************************************************************************/ 


   /***** styles main text area on main page *****/

   #windowcontent .maincontainer {
     margin: 100px auto;
     width: 1000px;
     min-height: 95vh;
     text-align: justify;
     clear: both;
     display: table;
   }

   #windowcontent .maincontainer #displayvid {
     margin: 30px 0px 30px 66px;
   }

   #windowcontent .maincontainer p {font-size: 16px;!important}

   #windowcontent figure {
     text-align: center;
     display: table;
     max-width: 100%;
     margin: 25px auto;
   }

   #windowcontent table {
     background-color: rgba(0,0,0,0);
   }

   #windowcontent table th{
     background-color: rgba(0,0,0,.2);
     border: 1px solid black;
   }

   #windowcontent table td {
     background-color: rgba(0,0,0,0);
     border: 1px solid black;
   }

   #windowcontent table tr:nth-child(even) {
     background-color: rgba(0,0,0,0.07);
     border: 1px solid black;
   }


/****************************************************************************************************************/ /************************************************* RIGHT NAVBAR *************************************************/ /****************************************************************************************************************/ 

   #windowcontent .rightnavbar {
     margin-top: 80px;
   }

   #windowcontent .rightnavbar.fixedrightnavbar {
     margin-top: -30px;
     position: fixed;
     width: calc(1000px/12*2);
   }

   #windowcontent .rightnavbar li {
     position: relative;
     text-align: justify;
   }

   #windowcontent .rightnavbar li a {
     display: block;
     color: #7b5611;
     padding: 10px 15px;
     margin: 5px 20px;
     font-size: 1em;
     text-decoration: none;
   }

   /* Change the link color on hover */
   
   #windowcontent .rightnavbar li a:hover {
     color: rgb(20,20,20); 
     border-left: 2px solid black;
   }

 /* #windowcontent .rightnavbar li a:hover:after {
    content:""; 
    background: black; 
    position: absolute; 
    left: 20px;
    bottom: 8px;
    height: 34px; 
    width: 2px;
  }*/


/****************************************************************************************************************/ /**************************************************** FOOTER ****************************************************/ /****************************************************************************************************************/ 


   /***** styles main footer area *****/
   
   #windowcontent footer {
     background-color: background-color: #f5e1bc;
     color: white;
     width: 100%;
     min-width: 1000px;
     position: absolute;
     text-align: center;
     font-size: x-small;
     font-family: 'Quicksand', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     border-top: 2px solid black;
   }

   /***** defines a container of same width as main content that contains footer content *****/

   #windowcontent #footer .footercontainer {
     width: 1000px;
     margin: 20px auto 25px auto;
   }

   /***** centers footer content in the individual columns *****/
   
   #windowcontent .footercolstyle * {
     align-content: center;
     text-align: center;
     color: black;
   }

   #windowcontent .footercolstyle a {
     padding: 0px;
   }

   /***** styles left footer column *****/
   
   #windowcontent .leftfootercol {
     float: left;
   }

   /***** styles right footer column *****/

   #windowcontent .rightfootercol {
     float: right;
   }

   /***** gives space between the "find us at" icons *****/
   
   #windowcontent footer img {
     margin: 10px;
   }


/****************************************************************************************************************/ /***************************************************** Tour *****************************************************/ /****************************************************************************************************************/ 

   #windowcontent .tourNext, #windowcontent .tourPrev {
     background-color: #7b5611;
     color: white;
     padding: 20px 20px;
     border-radius: 5px;
     float: right;
     text-decoration: none;
     font-weight: bold;
     margin-top: 50px;
   }

   #windowcontent .tourPrev {
     background-color: #7b5611;
     color: white;
     padding: 20px 20px;
     border-radius: 5px;
     float: left;
     text-decoration: none;
     font-weight: bold;
   }

   #windowcontent .tourNext:hover, #windowcontent .tourPrev:hover {
     background-color: #5a3f0c;
   }

   #windowcontent .tournavbar {
     width: 700px;
     margin: auto;
     position: relative;
   }

   #windowcontent .tournavbar img {
     width: 700px;
     margin: auto;
   }

   #windowcontent .tournavbar .tourlink {
     position: absolute;
     border: 2px solid #ac9884;
     padding: 2px 4px;
     color: black;
     top: 57px;
     border-radius: 5px;
     text-decoration: none;
     font-weight: bold;
   }

   #windowcontent .tournavbar .tourlink:hover {
     background-color: #ac9884;
   }

   #windowcontent .tournavbar .tourlink1 {
     left: -15px;
   }

   #windowcontent .tournavbar .tourlink2 {
     left: 105px;
   }

   #windowcontent .tournavbar .tourlink3 {
     left: 215px;
   }

   #windowcontent .tournavbar .tourlink4 {
     left: 315px;
   }

   #windowcontent .tournavbar .tourlink5 {
     left: 411px;
   }

   #windowcontent .tournavbar .tourlink6 {
     left: 541px;
   }

   #windowcontent .tournavbar .tourlink7 {
     left: 638px;
   }