Difference between revisions of "Team:TU-Eindhoven/NavMenu"

Line 4: Line 4:
 
<html>
 
<html>
  
−
<script>
+
<!-- keep internal styles and scripts above templates -->
−
 
+
<style id="menustyle" type="text/css">
 +
</style>
 +
<script id="menuscript" type="text/javascript">
 
</script>
 
</script>
  
−
<style>
 
  
−
    #home_logo, #sideMenu { display:none; }
+
<!-- Whole igem page container, closed in separate pages-->
−
     #sideMenu, #top_title, .patrollink  {display:none;}
+
<div class="container">
−
     #content { margin-left:0px; margin-top:-7px; padding:0px; width:1280px;}
+
     <script>
−
    body {background-color:white;}
+
        bGenerateCat = true;
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
     </script>
−
    .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
    <!-- Navigation bar -->
−
      
+
    <div class="nav-bar">
 +
        <ul class="normal-menu">
 +
            <li style="margin:0px 30px;float:left;">
 +
                <a class="logo-a" href="https://2018.igem.org/Team:TU-Eindhoven">
 +
                    <img src="../images/LogoSimple500x500.png" alt="TUe logo" style="max-height:60px">
 +
                </a>
 +
            </li>
 +
            <!-- Project -->
 +
            <li class="dropdown">
 +
                <a href="javascript:void(0)" class="dropbtn">PROJECT</a>
 +
                <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Description">Description</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Design">Design</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Experiments">Experiments</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Notebook">Notebook</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/InterLab">InterLab</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Model">Model</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Results">Results</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Demonstrate">Demonstrate</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Improve">Improve</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Attributions">Attributions</a>
 +
                </div>
 +
            </li>
 +
            <!-- Team -->
 +
            <li class="dropdown">
 +
                <a href="javascript:void(0)" class="dropbtn">TEAM</a>
 +
                <div class="dropdown-content">
 +
                <a href='https://2018.igem.org/Team:TU-Eindhoven/Team'>Team Members</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Collaborations">Collaborations</a>
 +
                </div>
 +
            </li>
 +
            <!-- Parts -->
 +
            <li class="dropdown">
 +
                <a href="javascript:void(0)" class="dropbtn">PARTS</a>
 +
                <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Parts">Parts Overview</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Basic_Part">Basic Parts</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Composite_Part">Composite Parts</a>
 +
                </div>
 +
            </li>
 +
            <!-- Safety -->
 +
            <li class="dropdown">
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Safety" class="dropbtn">SAFETY</a>
 +
            </li>
 +
            <!-- Human Practice -->
 +
            <li class="dropdown">
 +
                <a href="javascript:void(0)" class="dropbtn">HUMAN PRACTICE</a>
 +
                <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices">Human Practices</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Public_Engagement">Education &amp; Engagement</a>
 +
                </div>
 +
            </li>
 +
            <!-- Awards -->
 +
            <li class="dropdown">
 +
                <a href="javascript:void(0)" class="dropbtn">AWARDS</a>
 +
                <div class="dropdown-content">
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Applied Design</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Entrepreneurship">Entrepreneurship</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Hardware">Hardware</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Measurement">Measurement</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Model">Model</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Plant">Plant</a>
 +
                <a href="https://2018.igem.org/Team:TU-Eindhoven/Software">Software</a>
 +
                <a href="https://igem.org/2018_Judging_Form?team=TU-Eindhoven" class="dropbtn">JUDGING FORM ⇗</a>
 +
                </div>
 +
            </li>
 +
            <!-- Mobile Menu -->
 +
            <li id="mobile-btn" class="mobile-btn"><a href="#">
 +
                <img id="mobileMenuBar" src="https://static.igem.org/mediawiki/2015/c/ce/Mobile-menu.png">
 +
            </a></li>
 +
        </ul>
 +
     </div>
  
−
     /* Nav bar */
+
     <!-- Mobile Menu Bar -->
−
    #cssmenu,
+
    <div class="mobile-menu">
−
    #cssmenu ul,
+
        <ul class="mobile-menu-list">
−
    #cssmenu ul li,
+
        <!-- Project -->
−
    #cssmenu ul li a,
+
        <li class="sub">
−
    #cssmenu #menu-button {
+
            <a href="javascript:void(0)" class="dropbtn">PROJECT</a>
−
      margin: 0;
+
            <ul class="child">
−
      padding: 0;
+
−
      border: 0;
+
−
      list-style: none;
+
−
      line-height: 1;
+
−
      display: block;
+
−
      position: relative;
+
−
      -webkit-box-sizing: border-box;
+
−
      -moz-box-sizing: border-box;
+
−
      box-sizing: border-box;
+
−
    }
+
−
    #cssmenu:after,
+
−
    #cssmenu > ul:after {
+
−
      content: ".";
+
−
      display: block;
+
−
      clear: both;
+
−
      visibility: hidden;
+
−
      line-height: 0;
+
−
      height: 0;
+
−
    }
+
−
    #cssmenu #menu-button {
+
−
      display: none;
+
−
    }
+
−
    #cssmenu {
+
−
      width: auto;
+
−
      //border-radius: 5px;
+
−
      font-family: 'Open Sans', Helvetica, sans-serif;
+
−
      background: #3db2e1;
+
−
      //background: -o-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      //background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      //background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      //background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      //background: linear-gradient(to bottom, #69c4e8, #21a1d4);
+
−
      //box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
+
−
    }
+
−
    #cssmenu.align-center > ul {
+
−
      font-size: 0;
+
−
      text-align: center;
+
−
    }
+
−
    #cssmenu.align-center ul ul {
+
−
      text-align: left;
+
−
    }
+
−
    #cssmenu.align-center > ul > li {
+
−
      display: inline-block;
+
−
      float: none;
+
−
    }
+
−
    #cssmenu.align-right > ul > li {
+
−
      float: right;
+
−
    }
+
−
    #cssmenu.align-right ul ul {
+
−
      text-align: right;
+
−
    }
+
−
    #cssmenu > ul > li {
+
−
      float: left;
+
−
    }
+
−
    #cssmenu > ul > li > a {
+
−
      padding: 30px 25px;
+
−
      font-size: 13px;
+
−
      color: #ffffff;
+
−
      text-transform: uppercase;
+
−
      letter-spacing: 1px;
+
−
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
      font-weight: 700;
+
−
      text-decoration: none;
+
−
      -webkit-transition: color .2s ease;
+
−
      -moz-transition: color .2s ease;
+
−
      -ms-transition: color .2s ease;
+
−
      -o-transition: color .2s ease;
+
−
      transition: color .2s ease;
+
−
    }
+
−
    #cssmenu > ul > li:hover > a,
+
−
    #cssmenu > ul > li > a:hover,
+
−
    #cssmenu > ul > li.active > a {
+
−
      color: #cae5fd;
+
−
    }
+
−
    #cssmenu > ul > li.has-sub > a {
+
−
      padding-right: 40px;
+
−
    }
+
−
    /*#cssmenu ul > li.has-sub > a:after {
+
−
      content: '';
+
−
      position: absolute;
+
−
      right: 5px;
+
−
      top: 27.5px;
+
−
      display: block;
+
−
      width: 18px;
+
−
      height: 18px;
+
−
      border-radius: 9px;
+
−
      background: #3db2e1;
+
−
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
      background-size: 36px 36px;
+
−
      background-position: 0 0;
+
−
      background-repeat: no-repeat;
+
−
      -webkit-transition: all 0.1s ease-out;
+
−
      -moz-transition: all 0.1s ease-out;
+
−
      -ms-transition: all 0.1s ease-out;
+
−
      -o-transition: all 0.1s ease-out;
+
−
      transition: all 0.1s ease-out;
+
−
    }*/
+
−
    #cssmenu ul > li.has-sub:hover > a:after {
+
−
      background-position: 0 -18px;
+
−
    }
+
−
    #cssmenu ul > li.has-sub > a:before {
+
−
      content: '';
+
−
      position: absolute;
+
−
      right: 20px;
+
−
      top: 33px;
+
−
      display: block;
+
−
      width: 0;
+
−
      height: 0;
+
−
      border: 4px solid transparent;
+
−
      border-top-color: #ffffff;
+
−
      z-index: 99;
+
−
    }
+
−
    #cssmenu ul > li.has-sub:hover > a:before {
+
−
      border-top-color: #19799f;
+
−
    }
+
−
    #cssmenu ul ul {
+
−
      position: absolute;
+
−
      left: -9999px;
+
−
      opacity: 0;
+
−
      -webkit-transition: top .2s ease, opacity .2s ease;
+
−
      -moz-transition: top .2s ease, opacity .2s ease;
+
−
      -ms-transition: top .2s ease, opacity .2s ease;
+
−
      -o-transition: top .2s ease, opacity .2s ease;
+
−
      transition: top .2s ease, opacity .2s ease;
+
−
    }
+
−
    #cssmenu > ul > li > ul {
+
−
      top: 91px;
+
−
      padding-top: 8px;
+
−
      border-radius: 5px;
+
−
    }
+
−
    #cssmenu > ul > li:hover > ul {
+
−
      left: auto;
+
−
      top: 51px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu.align-right > ul > li:hover > ul {
+
−
      right: 0;
+
−
    }
+
−
    #cssmenu ul ul ul {
+
−
      top: 40px;
+
−
    }
+
−
    #cssmenu ul ul > li:hover > ul {
+
−
      top: 0;
+
−
      left: 178px;
+
−
      padding-left: 10px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li:hover > ul {
+
−
      left: auto;
+
−
      right: 178px;
+
−
      padding-left: 0;
+
−
      padding-right: 10px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu ul ul li a {
+
−
      width: 180px;
+
−
      padding: 12px 25px;
+
−
      font-size: 13px;
+
−
      font-weight: 700;
+
−
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
      color: #ffffff;
+
−
      text-decoration: none;
+
−
      background: #3db2e1;
+
−
      -webkit-transition: color .2s ease;
+
−
      -moz-transition: color .2s ease;
+
−
      -ms-transition: color .2s ease;
+
−
      -o-transition: color .2s ease;
+
−
      transition: color .2s ease;
+
−
    }
+
−
    #cssmenu ul ul li:hover > a,
+
−
    #cssmenu ul ul li > a:hover,
+
−
    #cssmenu ul ul li.active > a {
+
−
      color: #cae5fd;
+
−
    }
+
−
    #cssmenu ul ul li:first-child > a {
+
−
      border-top-left-radius: 5px;
+
−
      border-top-right-radius: 5px;
+
−
      box-shadow: inset 0 2px 2px #88d0ed;
+
−
    }
+
−
    #cssmenu ul ul li:last-child > a {
+
−
      border-bottom-left-radius: 5px;
+
−
      border-bottom-right-radius: 5px;
+
−
      box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub > a:after {
+
−
      right: 12px;
+
−
      top: 9.5px;
+
−
      background: #3db2e1;
+
−
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
      background-size: 36px 36px;
+
−
      background-position: 0 0;
+
−
      background-repeat: no-repeat;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub > a:after {
+
−
      right: auto;
+
−
      left: 12px;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub:hover > a:after {
+
−
      background-position: 0 -18px;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub > a:before {
+
−
      top: 15.5px;
+
−
      right: 16px;
+
−
      border-top-color: transparent;
+
−
      border-left-color: #ffffff;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub > a:before {
+
−
      top: 15.5px;
+
−
      right: auto;
+
−
      left: 16px;
+
−
      border-top-color: transparent;
+
−
      border-right-color: #ffffff;
+
−
      border-left-color: transparent;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub:hover > a:before {
+
−
      border-top-color: transparent;
+
−
      border-left-color: #1c89b5;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub:hover > a:before {
+
−
      border-top-color: transparent;
+
−
      border-left-color: transparent;
+
−
      border-right-color: #1c89b5;
+
−
    }
+
−
    @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
−
      #cssmenu {
+
−
        width: 100%;
+
−
      }
+
−
      #cssmenu ul,
+
−
      #cssmenu ul ul,
+
−
      #cssmenu ul ul ul,
+
−
      #cssmenu > ul,
+
−
      #cssmenu.align-center > ul,
+
−
      #cssmenu > ul > li > ul,
+
−
      #cssmenu > ul > li:hover > ul,
+
−
      #cssmenu ul ul li:hover > ul,
+
−
      #cssmenu ul ul ul li:hover > ul,
+
−
      #cssmenu.align-right ul ul,
+
−
      #cssmenu.align-right ul ul li:hover > ul,
+
−
      #cssmenu.align-right ul ul ul li:hover > ul {
+
−
        position: relative;
+
−
        left: 0;
+
−
        right: auto;
+
−
        top: 0;
+
−
        width: 100%;
+
−
        display: none;
+
−
        padding: 0;
+
−
        opacity: 1;
+
−
        text-align: left;
+
−
      }
+
−
      #cssmenu ul li {
+
−
        width: 100%;
+
−
        border-top: 1px solid rgba(120, 120, 120, 0.2);
+
−
      }
+
−
      #cssmenu > ul > li > a,
+
−
      #cssmenu ul ul li a,
+
−
      #cssmenu ul ul li:first-child > a,
+
−
      #cssmenu ul ul li:last-child > a {
+
−
        width: 100%;
+
−
        border-radius: 0;
+
−
        box-shadow: none;
+
−
        background: none;
+
−
      }
+
−
      #cssmenu ul li a {
+
−
        padding-left: 12.5px;
+
−
      }
+
−
      #cssmenu ul ul li a {
+
−
        padding: 14px 25px 14px 27.5px;
+
−
      }
+
−
      #cssmenu ul ul ul li a {
+
−
        padding-left: 42.5px;
+
−
      }
+
−
      #cssmenu ul ul ul ul li a {
+
−
        padding-left: 57.5px;
+
−
      }
+
−
      #cssmenu > ul > li.has-sub > a:after,
+
−
      #cssmenu > ul > li.has-sub > a:before,
+
−
      #cssmenu ul ul li.has-sub > a:after,
+
−
      #cssmenu ul ul li.has-sub > a:before {
+
−
        display: none;
+
−
      }
+
−
      #cssmenu #menu-button {
+
−
        position: relative;
+
−
        display: block;
+
−
        padding: 20px;
+
−
        padding-left: 12.5px;
+
−
        cursor: pointer;
+
−
        font-size: 13px;
+
−
        color: #ffffff;
+
−
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
        font-weight: 700;
+
−
        letter-spacing: 1px;
+
−
        text-transform: uppercase;
+
−
      }
+
−
      #cssmenu .submenu-button {
+
−
        position: absolute;
+
−
        right: 0;
+
−
        display: block;
+
−
        width: 53px;
+
−
        height: 53px;
+
−
        border-left: 1px solid rgba(120, 120, 120, 0.2);
+
−
        z-index: 10;
+
−
        cursor: pointer;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button {
+
−
        height: 41px;
+
−
      }
+
−
      #cssmenu ul .submenu-button:after,
+
−
      #cssmenu #menu-button:after {
+
−
        content: '';
+
−
        position: absolute;
+
−
        right: 12.5px;
+
−
        top: 12.5px;
+
−
        display: block;
+
−
        width: 28px;
+
−
        height: 28px;
+
−
        border-radius: 15px;
+
−
        background: #3db2e1;
+
−
        background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
        background-size: 56px 56px;
+
−
        background-position: 0 0;
+
−
        background-repeat: no-repeat;
+
−
        -webkit-transition: all 0.1s ease-out;
+
−
        -moz-transition: all 0.1s ease-out;
+
−
        -ms-transition: all 0.1s ease-out;
+
−
        -o-transition: all 0.1s ease-out;
+
−
        transition: all 0.1s ease-out;
+
−
      }
+
−
      #cssmenu ul .submenu-button.submenu-opened:after,
+
−
      #cssmenu #menu-button.menu-opened:after {
+
−
        background-position: 0 -28px;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button:after {
+
−
        top: 6.5px;
+
−
      }
+
−
      #cssmenu #menu-button:before,
+
−
      #cssmenu .submenu-button:before {
+
−
        content: '';
+
−
        position: absolute;
+
−
        right: 22.5px;
+
−
        top: 25.5px;
+
−
        display: block;
+
−
        width: 0;
+
−
        height: 0;
+
−
        border: 4px solid transparent;
+
−
        border-top-color: #ffffff;
+
−
        z-index: 99;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button:before {
+
−
        top: 19.5px;
+
−
      }
+
−
      #cssmenu #menu-button.menu-opened:before,
+
−
      #cssmenu .submenu-button.submenu-opened:before {
+
−
        border-top-color: #19799f;
+
−
      }
+
−
    }
+
−
</style>
+
−
 
+
−
 
+
−
<head>
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
−
 
+
−
</head>
+
−
<div class="mainContainer">
+
−
<!-- close this div tag "mainContainer" in other pages -->
+
−
 
+
−
<div class="navContainer">
+
−
<nav id='cssmenu'>
+
−
<ul>
+
−
    <li><a href="https://2018.igem.org/Team:TU-Eindhoven" style="padding:3px">
+
−
    <img src="https://static.igem.org/mediawiki/2018/6/6b/T--TU-Eindhoven--HomeLogo.png" alt="HOME" style="height:70px">
+
−
    </a></li>
+
−
 
+
−
    <li><a href='#'>TEAM</a>
+
−
      <ul>
+
−
        <li><a href='https://2018.igem.org/Team:TU-Eindhoven/Team'>Team Members</a></li>
+
−
        <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Collaborations">Collaborations</a></li>
+
−
      </ul>
+
−
    </li>
+
−
 
+
−
    <li><a href='https://2018.igem.org/Team:TU-Eindhoven/Project'>PROJECT</a>
+
−
        <ul>
+
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Description">Description</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Description">Description</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Design">Design</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Design">Design</a></li>
Line 433: Line 107:
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Improve">Improve</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Improve">Improve</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Attributions">Attributions</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Attributions">Attributions</a></li>
−
        </ul>
+
            </ul>
−
    </li>
+
        </li>
−
 
+
        <!-- Team -->
−
    <li><a href='#'>PARTS</a>
+
        <li class="sub">
−
         <ul>
+
            <a href="javascript:void(0)" class="dropbtn">TEAM</a>
 +
            <ul class="child">
 +
            <li><a href='https://2018.igem.org/Team:TU-Eindhoven/Team'>Team Members</a></li>
 +
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Collaborations">Collaborations</a></li>
 +
            </ul>
 +
         </li>
 +
        <!-- Parts -->
 +
        <li class="sub">
 +
            <a href="javascript:void(0)" class="dropbtn">PARTS</a>
 +
            <ul class="child">
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Parts">Parts Overview</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Parts">Parts Overview</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Basic_Part">Basic Parts</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Basic_Part">Basic Parts</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Composite_Part">Composite Parts</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Composite_Part">Composite Parts</a></li>
−
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Part_Collection">Part Collection</a></li>
+
             </ul>
−
         </ul>
+
        </li>
−
    </li>
+
         <!-- Safety -->
−
 
+
        <li class="sub">
−
    <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Safety">SAFETY</a></li>
+
            <a href="https://2018.igem.org/Team:TU-Eindhoven/Safety" class="dropbtn">SAFETY</a>
−
 
+
        </li>
−
    <li><a href="#">HUMAN PRACTICES</a>
+
        <!-- Human Practice -->
−
        <ul>
+
        <li class="sub">
 +
            <a href="javascript:void(0)" class="dropbtn">HUMAN PRACTICE</a>
 +
            <ul class="child">
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices">Human Practices</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices">Human Practices</a></li>
−
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Public_Engagement">Education & Engagement</a></li>
+
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Public_Engagement">Education &amp; Engagement</a></li>
−
        </ul>
+
            </ul>
−
    </li>
+
        </li>
−
   
+
        <!-- Awards -->
−
    <li><a href="#">AWARDS</a>
+
        <li class="sub">
−
        <ul>
+
            <a href="javascript:void(0)" class="dropbtn">AWARDS</a>
 +
            <ul class="child">
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Applied Design</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Applied Design</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Entrepreneurship">Entrepreneurship</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Entrepreneurship">Entrepreneurship</a></li>
Line 463: Line 149:
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Plant">Plant</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Plant">Plant</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Software">Software</a></li>
 
             <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Software">Software</a></li>
 +
            <li><a href="https://igem.org/2018_Judging_Form?team=TU-Eindhoven">JUDGING FORM ⇗</a></li>
 +
            </ul>
 +
        </li>
 
         </ul>
 
         </ul>
−
     </li>
+
     </div>
−
   
+
−
    <li><a href="https://igem.org/2018_Judging_Form?team=TU-Eindhoven">JUDGING FORM ⇗</a><li>
+
−
</ul>
+
−
</nav>
+
−
</div>
+
−
<div id="sideContainer">
+
−
</div>
+
  
−
<!--</div>-->
+
    <!-- content start -->
 +
    <div class="contents row">
 +
        <div id="docJump" class="doc-catalogue col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3">
 +
            <div class="box-row"></div>
 +
        </div>
 +
        <div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">

Revision as of 16:54, 17 July 2018

/* Nav bar */ .navbar { 

 margin-bottom: 0;
 margin-top: 15px;
 z-index: 99;

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

 .dropdown:hover .dropdown-menu {
   display:block;
 }

} .logo { 

 padding:5px;

} .logo > img { 

 height: 100%

} .navbar-fixed-top + div { 

 margin-top:65px;

} .white { 

 background-color:white;

} .neat { 

 margin-top:0;
 margin-bottom: 0;

} .logbook { 

 background: white url("T--TU-Eindhoven--logBG.png") repeat-y;
 padding: 35px 25px 25px 85px;
 margin: 0 auto;
 max-width: 1200px;
 text-align: left;

} h1, h2 { font-weight: bold; } p { font-size: 16px; } .jumbotron { 

 text-align: center;
 /* background-color: #FFF444; */

} .jumbotron p { font-size: 20px; } .main-wrapper { 

 /*background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(164, 4, 196, 0.521));
 */
 margin-bottom: 0;

}

  1. main {
 margin-top: 54px;
 margin-bottom: 15px;

} .integrated-content, .ethics-content, .safe-content, .stakeholder-content { 

 margin-top: 15px;
 /* margin-top: 54px; */
 margin-bottom: 15px;

} .round { 

 border-radius: 6px;

} .navbar-inverse { background: #2E2F31; border: 0; } .navbar-inverse .navbar-nav li a { color: #f7f7f7; font-size: 16px; } .navbar-inverse .navbar-nav li a:hover { background: rgba(126, 0, 151); } .dropdown-menu { background: #2E2F31; border-radius: 0; border: 0; } .dropdown-menu li a { padding: 10px; } .navbar-inverse .navbar-nav .dropdown-menu li a:hover { background: rgb(40, 0, 48); }

/* footer */ .footer { 

 /* webkit example */
 /* background-image: -webkit-gradient(
   linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
   to(rgba(255, 255, 255, 0))
 ); */

 /* mozilla example - FF3.6+ */
 /* background-image: linear-gradient(
   rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0)
 ); */
 background-color:white;

 /* margin-top:7px; */
 padding:25px;
 padding-bottom: 0px;
 text-align: center;
 width: 100%;

} .footer a { 

 color: white;
 text-decoration : none;
 margin:0px 20px;
 bottom: 0px;
 width: 100%;

} .fengexian { 

 color: #CCDFCB;
 margin-top: 30px;
 margin-bottom: 30px;
 margin-right:10%;
 margin-left: 10%;

} .sponsoren { 

 width:20%;
 max-height:initial;
 margin:30px;
 vertical-align: middle;
 max-width: 200px;
 min-width: 100px;

} .contactus { 

 line-height: 1.6;
 text-align: center;
 background-color: #cc0234;
 margin-right: -25px;
 margin-left: -25px;
 font-size: 20px;

} .contactus div { 

 height: 32px;

} .contactus img { 

 height: 20px;

} /* footer mobile */ @media screen and (max-width: 800px) { 

 .sponsoren {
   width:100%;
   margin:12px 0;
 }
 .footer a {
   margin: 5px;
 }
 .contactus a span {
   display: none;
 }

}

/* document styles */ html, body { 

 height: 100%

} body { 

 min-height: 100%;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-weight: normal;
 font-size: 16px;

} h1, h2, h3, h4, h5, h6 { 

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 color: #10487c;

}

  1. HQ_page h1,
  2. HQ_page h2,
  3. HQ_page h3,
  4. HQ_page h4,
  5. HQ_page h5,
  6. HQ_page h6 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 color: #10487c;
 padding-top:1px;
 padding-bottom:1px;

}

  1. HQ_page h1,
  2. HQ_page h2 {
 padding-bottom:5px;

} .myAnswer { 

 padding-left:30px;

} .emph { 

 color:rgb(49, 49, 49);
 text-decoration: underline;

} .timeline h3 { 

 margin-top: 0px;

} .myModal-header h3 { 

 margin-top: 20px;

} p { 

 color:rgb(56, 56, 56);
 line-height: 1.6;

}

selection {
 /* color: red; */
 background: rgb(0, 149, 207);

} /* explanation quote */ .klk2elaborate { 

 cursor: help;
 color:rgb(0, 102, 255);

} .klk2elaborate::before { 

 content:"[";
 color: rgb(31, 112, 233);

} .klk2elaborate::after { 

 content: "]⇓";
 color: rgb(31, 112, 233);

} .moreinfo { 

 cursor: pointer;
 color: rgb(31, 112, 233);
 text-decoration-style: underline;

} .moreinfo::after { 

 content: "⇓";
 color: rgb(31, 112, 233);

} .moreinfo:hover { 

 text-decoration: underline;

} .disappear { 

 display: none;

} .explanation { 

 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: 0.5em 10px;
 quotes: "\201C""\201D""\2018""\2019";

} .explanation::before { 

 color: #ccc;
 /* content: open-quote; */
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.25em;
 vertical-align: -0.4em;

} /* figure */ /* .figureWrapper {

} */ .figureMiddle { 

 margin: 0.5em;

} .figureRight { 

 margin: 0.5em 0 1.3em 1.4em;
 clear: right;
 float: right;

} .figureMiddle .figureFrame{ 

 margin: 0 auto;
 max-width:75%;
 /* max-height: 300px; */
 /* max-height:400px; */
 border: 1px solid #c8ccd1;
 padding: 3px;
 background-color: #f8f9fa;

} .figureRight .figureFrame { 

 max-width:300px;
 border: 1px solid #c8ccd1;
 padding: 3px;
 background-color: #f8f9fa;
 font-size: 94%;
 overflow: hidden;

} .figureCaption p{ 

 text-align: left;
 font-size: 13px;

} .figureModal { 

 cursor: pointer;

} img.figure { 

 width: 100%;

} 

/* Style the Image Used to Trigger the Modal */

.figure:hover {opacity: 0.8;} .modal-body .figure:hover { 

 opacity: 1;

}

/* The Modal (background) */ .figureModalWindow { 

 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 999; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 /* overflow: hidden; */

}

/* Modal Content (Image) */ .figureModal-content { 

 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;

} .figureModal-content-wide { 

 margin: auto;
 display: block;
 max-width: 80%;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */ .modalCaption { 

 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;

} .modalCaption p{ 

 color: #ccc;

} /* Add Animation - Zoom in the Modal */ .figureModal-content, .modalCaption { 

 animation-name: zoomFigure;
 animation-duration: 0.3s;

}

@keyframes zoomFigure { 

 from {transform:scale(0)}
 to {transform:scale(1)}

}

/* The Close Button */ .closeFigure { 

 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;

}

.closeFigure:hover, .closeFigure:focus { 

 color: #bbb;
 text-decoration: none;
 cursor: pointer;

}

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ 

 .figureModal-content {
     width: 100%;
 }

} /* lab annotation */ .annotationImg { 

 max-width: 600px;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 border: 2px solid blue;
 padding: 3px;

} .annotationImg img { 

 width: 100%;

} .annotation-dot { 

 position: absolute;
 z-index: 100;
 width: 20px;
 height: 20px;
 /* cursor: pointer; */
 cursor: url(/images/zoom_in.png), auto;
 border: 5px solid purple;
 background-color: orangered;
 opacity: 0.3;
 border-radius: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);

} .annotation-dot:hover { 

 opacity: 1;
 animation-name: goSolid;
 animation-duration: 0.7s;

} @keyframes goSolid { 

 from {opacity: 0.5;}
 to {opacity: 1};

} /* .tooltiptext { 

 display: none;

} */ .tooltip { 

 /* position: relative; */
 display: inline-block;
 /* border-bottom: 1px dotted black; */

} .tooltip .anno-text { 

 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 150%;
 left: 50%;
 margin-left: -60px;

} .tooltip .anno-text::after { 

 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: black transparent transparent transparent;

} .tooltip:hover .anno-text { 

 visibility: visible;

} .zoomInFrame { 

 padding:0px;
 border:2px solid yellow;
 max-width:300px;
 background-color:white;

} .zoomInFrame img{ 

 width:100%;

}

/* toc */ .docs, .introduction{ 

 /* font-size: 1.2em; */
 position: relative;
 /* background-color:#FFFFFF; */
 /* box-shadow: 2px 2px 10px #919191; */

} .introduction { 

 width: 100%;
 /*text-align: center;*/

} .introduction h1 { 

 margin-left: auto;
 margin-right: auto;

} .introduction p { 

 text-align: justify;

} .introduction img{ 

 width:100px;

}

  1. introDiv, #main {
 font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;

} .toc-column { 

 padding-left: 0;
 /* background-color: #FFFFFF; */

} .toc-wrapper{ 

 position: sticky;
 top:100px;
 right: 0px;
 margin-top:20px;
 margin-bottom: 15px;
 border-radius: 7px;
 /* border: 1px solid black; */
 font-size: 20px;
 padding: 10px 0px 3px 5px;
 /* background-color: #f8f9fa; */

} .toc-wrapper a { 

 text-decoration: none;

}

.toc-wrapper > li { 

 text-align: right;

}

  1. tableOfContent {
 padding-left:0;

}

  1. tableOfContent > li {
 margin: 10px 0px;

}

  1. tableOfContent > li > a {
 color: rgb(0, 57, 133);

} .toc-wrapper ul { 

 padding-left:12px;

} /* top */ .toc-wrapper > li > ul { 

 text-align: left;
 font-size: 0.7em;

} .toc-wrapper ul, .toc-wrapper li { 

 list-style: none;
 margin:0;

} .backToTop { 

 cursor: pointer;
 margin-right:15px;

}




/* logbook accordion */ .accordion { 

 background-color: #eee;
 color: #444;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 transition: 0.4s;
 margin-bottom:3px;

}

button.active, .accordion:hover { 

 background-color: #ddd;

}

.accordion:after { 

 content: '\002B';
 color: #777;
 font-weight: bold;
 float: right;
 margin-left: 5px;

}

button.active:after { 

 content: "\2212";

}

.my-panel { 

 padding: 0 18px;
 background-color: white;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;

} .my-panel p { 

 text-align: justify;

} .all img { 

 max-width: 400px;
 display:block;
 margin:0 auto;

} .all { 

 position: relative;

} .ibp h2 { 

 color: #10487c;

} .cloning h2 { 

 color: #2E2F31;

} .biobrick h2 { 

 color: #000;

} .organiclab h2 { 

 color: #444;

}

/* Human Practice */ .myModal ul li { 

 list-style-type: '-';

} .myModal ul li ul li { 

 list-style-type: circle;

} .timelineHead { 

 text-align:center;
 padding:10px 40px;
 margin-left: auto;
 margin-right: auto;

} .timelineHead p, .timelineHead ol, .timelineHead ul { 

 /* color:#040404; */
 text-align: justify

} .reference { 

 font-size: 12px;

} .referece li{ 

 list-style-type: decimal;

} .integrated-content p { 

 text-align: justify;

} /* .integrated-content { 

 background-color:white;

} */ .integrated-content, .ethics-content, .safe-content, .stakeholder-content { 

 display:none;

} .activeTab { 

 display: block;

} .inactiveTab { 

 display: none;

} .hp-heading { 

 background-image:url(T--TU-Eindhoven--HP-bkgrd.jpeg);
 background-repeat: no-repeat;
 background-size: cover;

} .hp-tabs > ul{ 

 list-style-type: none;
 margin: 0;
 padding: 0;

} .hp-tabs ul li { 

 display:inline;

} .hp-tabs ul li a { 

 display: inline-block;
 width: 150px;

} .hp-tabs button { 

 font-size: 20px;
 height: 70px;
 width: 200px;
 white-space: normal;
 /* border-color: #cc0234; */

} .hp-tabs button:hover{ 

 opacity: 0.9;

} .int-btn.activeBtn, .int-btn:hover, .eth-btn.activeBtn, .eth-btn:hover, .saf-btn.activeBtn, .saf-btn:hover, .sta-btn.activeBtn, .sta-btn:hover { 

 background-color: #d5ff83;
 color: #505050;

}


/* Timeline */ /* The actual timeline (the vertical ruler) */ .timeline { 

 position: relative;
 max-width: 1200px;
 margin: 5px auto;

}

/* The actual timeline (the vertical ruler) */ .timeline::after { 

 content: ;
 position: absolute;
 width: 6px;
 background-color: rgb(100, 100, 100);
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -3px;

}

/* Container around content */ .tl-event { 

 padding: 10px 40px;
 position: relative;
 /* background-color: greenyellow; */
 width: 50%;
 border:1px;

}

/* The circles on the timeline */ .tl-event::after { 

 content: ;
 position: absolute;
 width: 25px;
 height: 25px;
 right: -13px;
 background-color: white;
 border: 4px solid #FF9F55;
 top: 20px;
 border-radius: 50%;
 z-index: 1;

}

/* Place the container to the left */ .left { 

 left: 0;

}

/* Place the container to the right */ .right { 

 left: 50%;

}

/* Add arrows to the left container (pointing right) */ .left::before { 

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 right: 30px;
 border: medium solid #eee;
 border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent #eee;
 /* box-sizing: content-box; */

}

/* Add arrows to the right container (pointing left) */ .right::before { 

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 left: 30px;
 border: medium solid #eee;
 border-width: 10px 10px 10px 0;
 border-color: transparent #eee transparent transparent;
 /* box-sizing: content-box; */

}

/* Fix the circle for containers on the right side */ .right::after { 

 left: -13px;

}

/* The actual content */ .tl-content { 

 padding: 20px 30px;
 background-color: #eee;
 position: relative;
 border-radius: 6px;

} .tl-content.docs > h2 { 

 margin:0;

}

/* modal window */ /* button.readmore { 

 border-radius: 10%;

} */

/* .tl-content button { 

 left:0;

} */ @media screen and (min-width:768px) { 

 .modal-dialog {
   width:60%;
 }

}

/* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { 

 /* Place the timelime to the left */
 .timeline::after {
   left: 31px;
 }
 
 /* Full-width containers */
 .tl-event {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
 }
 
 /* Make sure that all arrows are pointing leftwards */
 .tl-event::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
 }

 /* Make sure all circles are at the same spot */
 .left::after, .right::after {
   left: 15px;
 }
 
 /* Make all right containers behave like the left ones */
 .right {
   left: 0%;
 }

} /* The Modal (background) */ .myModal { 

 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 999; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */ .myModal-content { 

 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s;
 border-radius: 6px;

} @-webkit-keyframes animatetop { 

 from {top:-600px; opacity:0} 
 to {top:0; opacity:1}

} /* Add Animation */ @keyframes animatetop { 

 from {top: -600px; opacity: 0}
 to {top: 0; opacity: 1}

} /* The Close Button */ .closeModal { 

 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;

 margin-top: -2px;
 
 float: right;
 /* font-size: 21px; */
 font-weight: bold;
 line-height: 1;
 color: #000;
 text-shadow: 0 1px 0 #fff;
 filter: alpha(opacity=20);
 opacity: .2;

 appearance: none;
 padding: 0;
 cursor: pointer;
 background: transparent;
 border: 0;

}

.closeModal:hover, .closeModal:focus { 

 color: #000;
 text-decoration: none;
 cursor: pointer;

} .myModal-header { 

 padding: 2px 16px;
 color: white;
 border-bottom: 1px solid #e5e5e5;

}

.myModal-body { 

 padding: 2px 16px;

}

.myModal-footer { 

 padding: 2px 16px;
 color: white;
 border-top: 1px solid #e5e5e5;

} @media screen and (min-width:768px) { 

 .myModal-content{
   width: 60%;
 }

} @media screen and (max-width:767px) { 

 .myModal {
   padding-top:15px;
   padding-bottom:15px;
   padding-left:5px;
   padding-right:5px;
 }

} /* photo slides */ .personale { 

 position:sticky;
 top: 65px;
 background-color:white;
 height: 500px;

} .personale-wrapper { 

 height:100%;

} /* .team-wrapper { } */ .teamMembers img { 

 width:100%;

} /* .teamMembers { 

 margin: 10%;

} */ @media screen and (max-width: 992px) { 

 .teamMembers {
   margin: 5%;
 }

} @media screen and (min-width: 1440px) { 

 .teamMembers {
   margin: 5%;
 }

} .foto img { 

 border-radius: 35%;

} /* slides */ .slideshow-container { 

 max-width: 800px;
 position: relative;
 margin: auto;

}

/* Hide the images by default */ .mySlides { 

 display: none;

}

/* Next & previous buttons */ .prevbtn, .nextbtn { 

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;

} .prevbtn { 

 left:0;

}

/* Position the "next button" to the right */ .nextbtn { 

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prevbtn:hover, .nextbtn:hover { 

 background-color: rgba(0,0,0,0.8);
 text-decoration: none;

}

/* Caption text */ .slidetext { 

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 0px;
 width: 100%;
 text-align: center;
 background-color: #0009;

}

/* Number text (1/3 etc) */ .numbertext { 

 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot { 

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.dot.active, .dot:hover { 

 background-color: #717171;

}

/* Fading animation */ .myfade { 

 animation-name: myfade;
 animation-duration: 1.5s;

}

@-webkit-keyframes myfade { 

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes myfade { 

 from {opacity: .4} 
 to {opacity: 1}

} .slideJumbotron { 

 background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521));
   margin-bottom: 0;

} .team-main { 

 background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521));

} /* change images with fade effect */ .swapImage img { 

 -webkit-transition: all 0.1s ease-in-out; 
 -moz-transition: all 0.1s ease-in-out; 
 -ms-transition: all 0.1s ease-in-out; 
 -o-transition: all 0.1s ease-in-out; 
 transition: all 0.1s ease-in-out;

} .foto img { 

 width:100%;

}


/* MISC Correction */

  1. top_title{
 display:none;

}

  1. globalWrapper{
 font-size:100%;
 padding-bottom: 0;
 margin-bottom: -10px;

} div#mw-content-text.mw-content-ltr { 

 background-image: url("T--TU-Eindhoven--BGgraySpread150.png");
 background-attachment: fixed;

} body { 

 background-image: url("T--TU-Eindhoven--BGgraySpread150.png");
 background-attachment: fixed;

}

  1. content{
 width:100%;
 margin:0 auto;
 padding:0px;

} ul.normal-menu li { 

 list-style:none;

}

ul.nav.navbar-nav.navbar-right { 

 margin: 0;

}

  1. HQ_page p {
 font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 text-align: justify;

}

  1. HQ_page .figureCaption p{
 text-align: left;
 font-size: 13px;

}

  1. HQ_page .sponsors-list a {
 padding-right: 0;

}

  1. HQ_page .introduction h1,
  2. HQ_page .timelineHead h1 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 padding-top: 0;
 padding-bottom: 5px;

}

  1. HQ_page .jumbotron h1 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 /*text-shadow: 2px 2px #5d0086;*/

}

  1. HQ_page .tl-content h3 {
 padding-top: 0px;

} .jumbotron h1 { 

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 /*text-shadow: 2px 2px #5d0086;*/

} .myTooltips { 

 position:fixed;
 border-radius:5px;
 border: 2px solid #444;
 max-width:500px;
 /* min-height:100px; */
 background-color:wheat;
 padding:10px;

} .myTooltips p { 

 font-size:12px;

} .myTooltips button { 

 position: absolute;
 bottom:5px;
 right:5px;

} .tooltipsBtn { 

 cursor:help;

} .parts-table th, .parts-table td { 

 text-align: center;
 padding:5px;
 border:1px solid rgb(156, 156, 156);
 border-collapse: collapse;

} .parts-table th { 

 background-color:rgb(183, 0, 255);

} .parts-table .odd-tr { 

 background-color:wheat;

}

  1. mw-content-text a[href ^="https://"], .link-https {
   background: url(https://2018.igem.org/wiki/skins/Igem/resources/lock_icon.gif?2015-09-11T20:20:00Z) center right no-repeat;
   padding-right: 0px;

}