Difference between revisions of "Team:Tec-Monterrey/Templates/Tec-Monterrey General Format"

m
 
(378 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html lang="en">
+
<html>
−
   <head>
+
<head>
 +
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 +
<!--bootstrap core css-->
 +
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
<script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/interactmin?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
<!-- Para uso de MathJax, Juan Fernandez code -->
 +
<script type="text/x-mathjax-config">
 +
   MathJax.Hub.Config({
 +
  TeX: { equationNumbers: { autoNumber: "AMS" } }
 +
  });
 +
</script>
 +
<script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 +
<script type="text/x-mathjax-config">
 +
  MathJax.Hub.Config({
 +
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
 +
  });
 +
</script>
  
−
     <meta charset="utf-8">
+
     <style>
−
     <meta name="description" content="Test wiki template Team:Tec-Monterrey">
+
/****************************************** MathJax *******************************************************/
−
     <meta name="author" content="Esteban de la Peña">
+
.MathJax_Display {
 +
  text-align: left !important;
 +
}
 +
/**************************************** Clear the default wiki settings *********************************/
 +
    #home_logo, #sideMenu {
 +
        display:none;
 +
    }
 +
    #sideMenu, #top_title, .patrollink  {
 +
        display:none;
 +
    }
 +
    #content, #HQ_page {
 +
        width: 100%;
 +
        padding: 0;
 +
        margin: 0;
 +
        background-color: white;
 +
        //font-size: 100% !important;
 +
    }
 +
    #content {
 +
        margin-top: -16px;
 +
    }
 +
    #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{
 +
    height: 100%;
 +
    width: 100%;
 +
    }
 +
/*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
 +
    #top_menu_14 {
 +
        box-sizing: initial;
 +
    }
 +
    td a{
 +
        padding-right: 0px !important;
 +
    }
 +
    #globalWrapper{
 +
        padding-bottom: 0;
 +
    }
 +
    a {
 +
      color: #002bb8;
 +
    }
 +
/*************************************************** Bootstrap Stuff ************************************************/
 +
    .portfolio-item .caption .caption-content p {
 +
        font-weight: 300;
 +
        font-size: 1.2rem;
 +
    }
 +
    @media (min-width: 992px) {
 +
        .portfolio-item {
 +
            max-width: none;
 +
            margin: 0;
 +
        }
 +
        .portfolio-item .caption {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
 +
            -webkit-clip-path: inset(0px);
 +
            clip-path: inset(0px);
 +
        }
 +
        .portfolio-item .caption .caption-content {
 +
            transition: opacity 0.25s;
 +
            margin-left: 5rem;
 +
            margin-right: 5rem;
 +
            margin-bottom: 5rem;
 +
        }
 +
        .portfolio-item img {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out;
 +
            -webkit-clip-path: inset(-1px);
 +
            clip-path: inset(-1px);
 +
        }
 +
        .portfolio-item:hover img {
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 +
        .portfolio-item:hover .caption {
 +
            background-color: rgba(29, 128, 159, 0.9);
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 +
    }
 +
    a {
 +
        color: #1D809F;
 +
    }
 +
    a:hover, a:focus, a:active {
 +
        color: #155d74;
 +
    }
 +
    .btn-primary {
 +
        background-color: #1D809F !important;
 +
        border-color: #1D809F !important;
 +
        color: #fff !important;
 +
    }
 +
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
 +
        background-color: #155d74 !important;
 +
        border-color: #155d74 !important;
 +
    }
 +
    .btn {
 +
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
 +
        font-weight: 700;
 +
    }
 +
    .btn-xl {
 +
        padding: 1.25rem 2.5rem;
 +
    }
 +
/*****************************************************custom css*****************************************************/
 +
   
 +
    @font-face{
 +
        font-family: "Norwester";
 +
        src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
 +
     }
 +
    @font-face{
 +
        font-family: "Montserrat";
 +
        src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "DosisRegular";
 +
        src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
 +
    }
 +
    html {
 +
    }
 +
    ::-webkit-scrollbar {
 +
      background: #cccccc;
 +
    }
 +
    ::-webkit-scrollbar-thumb {
 +
      background: #6b916f;
 +
    }
 +
    ::-webkit-scrollbar-thumb:hover{
 +
      background: #4f8455;
 +
    }
 +
    body, html {
 +
        width: 100%;
 +
        height: 100%;
 +
    }
 +
    body {
 +
        font-family: "DosisRegular", sans-serif !important;
 +
     }
 +
    ul{
 +
        margin: 0 !important;
 +
    }
 +
    h1, h2, h3, h4, h5, h6 {
 +
        font-weight: 700;
 +
        padding: 0 0 0 0;
 +
        margin: 0 0 0 0;
 +
    }
 +
    .text-faded {
 +
        color: rgba(255, 255, 255, 0.7);
 +
    }
 +
    .full-masthead {
 +
      width: 100%;
 +
    }
 +
    .masthead {
 +
        height: 100%;
 +
        width: 100%;
 +
        box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
 +
    }
 +
    .header-top {
 +
        height: 70%;
 +
        width: 100%;
 +
        position: relative;
 +
        background: rgb(248,247,246);
 +
    }
 +
    .video-header {
 +
        right: 0;
 +
        left: 0;
 +
        width: 100%;
 +
    }
 +
    .header-bottom {
 +
        height: 30%;
 +
        position: relative;
 +
        background: white;
 +
        padding: 10px 0px 10px 10px;
 +
        margin: 0px 0px 0px 0px;"
 +
    }
 +
    .div-header-bottom {
 +
        padding:5px 0px 0px 10px;
 +
        border-left: 10px solid #2f6361;
 +
    }
 +
.header-background {
 +
  display: flex;
 +
  z-index: 1;
 +
  height: 83%;
 +
  width: 99%;
 +
  margin: 0;
 +
  padding: 0;
 +
  position: absolute;
 +
  direction: rtl;
 +
}
 +
.header-background-left, .header-background-center, .header-background-center-right, .header-background-right {
 +
  width: 18%;
 +
}
 +
.trail {
 +
  width: 100%;
 +
  height: auto;
 +
  top: 5%;
 +
}
 +
    .header-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        text-align: left !important;
 +
        font-size: 9vw;
 +
        font-weight: 700 !important;
 +
        line-height: 1em;
 +
        padding-bottom: 0;
 +
        margin-bottom: -5px;
 +
        color: #3582d2;
 +
    }
 +
    .header-subtitle {
 +
        font-family: "Montserrat", monospace;
 +
        text-align: left !important;
 +
        font-size: 3.5vw;
 +
        font-weight: 600 !important;
 +
        line-height: 1em;
 +
        padding-bottom: 4px;
 +
        color: #5da565;
 +
    }
 +
    .body-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        font-size: 4vw;
 +
        font-weight: 600 !important;
 +
        line-height: 1em;
 +
        padding: 10px 0 10px 0;
 +
        text-align: center;
 +
    }
 +
    .body-title h1 {
 +
        margin: 0 !important;
 +
    }
 +
    .body-subtitle {
 +
        font-family: "Montserrat", monospace !important;
 +
        font-size: 2.5vw;
 +
        font-weight: 400 !important;
 +
        line-height: 1.2em;
 +
        padding: 3% 0;
 +
    }
 +
    .scroll-to-top {
 +
        position: fixed;
 +
        right: 10px;
 +
        bottom: 10px;
 +
        display: none;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: white !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 45px;
 +
    }
 +
    .scroll-to-top:focus, .scroll-to-top:hover {
 +
        color: white !important;
 +
    }
 +
    .scroll-to-top:hover {
 +
        background: #343a40;
 +
    }
 +
    .scroll-to-top i {
 +
        font-weight: 800;
 +
    }
 +
    .hide {
 +
        display: none;
 +
    }
  
−
     <!-- Bootstrap Core CSS -->
+
/**************************************************************** FOOTER ****************************************/
−
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">   
+
     .footer {
−
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapStylishPortfolio?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css">
+
        padding-top: 1rem;
 +
        padding-bottom: 1rem;
 +
        background: #404040;
 +
    }
 +
    .footer p{
 +
        font-family: "DosisRegular", sans-serif !important;
 +
        font-size: 3vh;
 +
        text-align: center !important;
 +
    }
 +
    #footerCopyright{
 +
        text-align: center !important;
 +
    }
 +
    .no-padding {
 +
        padding-right: 0 !important;
 +
    }
 +
    .social-link.fa {
 +
        color: #eeeeee;
 +
        opacity: 0.5;
 +
        font-size: 6vw;
 +
        transition: all 0.4s;
 +
        -webkit-transition: all 0.4s;
 +
    }
 +
    .social-link:hover {
 +
        opacity: 0.9;
 +
    }
 +
    .sponsor {
 +
        height: 10vh;
 +
        display: inline-block;
 +
    }
 +
    .sponsor-img {
 +
        height: 100%;
 +
    }
  
−
<script>
+
/***********************************************************************************************************************/
 +
/************************************************* CONTENIDO GENERAL DE LA PAGINA **************************************/
 +
/***********************************************************************************************************************/
  
−
$(document).ready(function() {
+
.articulo {
 +
  font-size: 1.7vw;
 +
  background: url(https://static.igem.org/mediawiki/2018/c/c2/T--Tec-Monterrey--Background_Trail.jpg);
 +
  background-size: contain;
 +
  background-repeat-y: repeat;
 +
  background-repeat-x: no-repeat;
 +
  text-align: justify;
 +
  margin-top: 3%;
 +
}
 +
.seccion-responsiva {
 +
  width: 80%;
 +
  background: white;
 +
  margin: 0.5% auto;
 +
  padding: 2% 5%;
 +
  border-radius: 40px;
 +
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
 +
}
 +
.seccion-responsiva a {
 +
  color: #377bbf;
 +
  margin: 0;
 +
  font-size: 1.2em;
 +
  padding: 0 !important;
 +
}
 +
.resumen > .body-title {
 +
  text-align: center;
 +
}
 +
.introduccion > .body-title {
 +
  text-align: center;
 +
}
 +
.resumen::after, .introduccion::after {
 +
  content: "";
 +
  width: 80%;
 +
  height: 2px;
 +
  display:block;
 +
  right: 0;
 +
  background-color: #000;
 +
  padding: 0;
 +
  margin: 3% auto;
 +
}
 +
.contenido {
 +
}
 +
.leyenda {
 +
  font-size: 1.4vw;
 +
}
 +
.contenido-con-imagen-derecha, .contenido-con-imagen-izquierda {
 +
  height: auto;
 +
}
 +
.imagen-derecha > img, .imagen-izquierda > img {
 +
  width: 100%;
 +
}
 +
.imagen-derecha > img.foto, .imagen-izquierda > img.foto, .imagen-centrada-reducida > img.foto, .imagen-centrada-completa > img.foto {
 +
  border-radius: 40px;
 +
  padding-top: 1%;
 +
  padding-bottom: 1%;
 +
}
 +
.contenido-con-imagen-derecha > .imagen-derecha {
 +
  float: right;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-derecha > .texto-izquierda {
 +
  float: left;
 +
  width: 51%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-izquierda > .imagen-izquierda {
 +
  float: left;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-izquierda > .texto-derecha {
 +
  float: right;
 +
  width: 51%;
 +
  display: inline-block;
 +
}
 +
.imagen-centrada-reducida > img {
 +
  width: 50%;
 +
  margin-left: 25%;
 +
  margin-right: 25%;
 +
}
 +
.imagen-centrada-reducida > .leyenda {
 +
  text-align: center;
 +
}
 +
.imagen-centrada-completa > img {
 +
  width: 100%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
.imagen-centrada-completa > .leyenda {
 +
  text-align: center;
 +
}
 +
.conclusion {
 +
}
 +
.referencias {
 +
}
 +
/******************************************** RESIZING CONTENTS ON SCREEN SIZE *************************************/
 +
@media screen and (max-width: 900px) {
 +
  .articulo {
 +
    font-size: 3vh;
 +
    line-height: 1.2em;
 +
  }
 +
  .body-title {
 +
    font-size: 6vh;
 +
  }
 +
  .body-subtitle {
 +
    font-size: 4vh;
 +
  }
 +
  .seccion-responsiva {
 +
    border-radius: 10px;
 +
  }
 +
  .masthead {
 +
    height: auto;
 +
  }
 +
  .header-top {
 +
    display: none;
 +
  }
 +
  .header-bottom {
 +
    height: auto;
 +
  }
 +
  .header-title {
 +
    font-size: 16vw;
 +
  }
 +
  .header-subtitle {
 +
    font-size: 8vw;
 +
  }
 +
  .header-background {
 +
    display: none;
 +
  }
 +
  .imagen-centrada-reducida > img {
 +
    width: 100%;
 +
    margin: 0;
 +
  }
 +
  .leyenda {
 +
    font-size: 2vh;
 +
  }
 +
  .social-link.fa {
 +
    font-size: 10vw;
 +
  }
 +
  .sponsor {
 +
    height: 10vw;
 +
  }
 +
}
  
−
$("#HQ_page").attr('id','');
+
/******************************************************* TOPBAR MENU *********************************************/
 +
#topBarWrapper {
 +
  display: none;
 +
}
  
−
// call the functions that control the menu
+
.topBar {
−
menu_functionality();  
+
    position: fixed;
−
hide_show_menu();
+
    top: 18px;
 +
    z-index: 99;
 +
    height: 8vh;
 +
    width: 100%;
 +
}
  
−
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
#navbar {
−
function menu_functionality() {
+
    position: fixed;
 +
    z-index: 99;
 +
    height: 8vh;
 +
    width: 100%;
 +
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
 +
    transition: all 0.3s;
 +
    -webkit-transition: all 0.3s;
 +
}
  
−
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
#navbarLogoWrapper {
−
$(".menu_button").click(function(){
+
  position: absolute;
 +
  display: inline-block;
 +
  height: 100%;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
  
−
// add or remove the class "open" , this class holds the "-"
+
#navbarLogoText {
−
$(this).children().toggleClass("open");
+
  display: inline-block;
−
// show or hide the submenu
+
  font-size: 1vw;
−
$(this).next('.submenu_wrapper').fadeToggle(400);
+
  color: white;
−
});
+
  opacity: 0;
 +
  -webkit-transition: opacity 0.3s;
 +
  transition: opacity 0.3s;
 +
}
  
−
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
#navbarLogo {
−
$("#display_menu_control").click(function(){
+
  height: 80%;
−
$('#menu_content').fadeToggle(400);
+
  margin-top: 5%;
−
});
+
  margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  display: inline-block;
 +
}
  
−
// call the current page highlight function
+
#navbarGif {
−
highlight_current_page();
+
  height: 80%;
−
}
+
  margin-top: 5%;
 +
  margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  display: none;
 +
}
  
 +
#navbarGif, #navbarLogoWrapper:hover #navbarLogo {
 +
  display: none;
 +
}
  
−
// call the highlight current page function to show it on the menu with a different background color
+
#navbarLogo, #navbarLogoWrapper:hover #navbarGif {
−
function highlight_current_page() {
+
  display: inline-block;
 +
}
  
−
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
#navbarLogoWrapper:hover {
−
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
  transform: scale(1.4,1.4);
 +
  cursor: pointer;
 +
}
  
−
// now that the current_page class has been added to a menu item, make the submenu fade in
+
#navbarLogoWrapper:hover > #navbarLogoText {
−
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
  opacity: 1;
−
// change the +/- symbol of the corresponding menu button
+
}
−
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
−
+
−
}
+
  
 +
#navContainer {
 +
    z-index: 2;
 +
    height: 8vh;
 +
    width: 80%;
 +
    left: 10%;
 +
    position: fixed;
 +
    background-color: rgba(0,0,0,0);
 +
    color: #fff;
 +
}
  
 +
.navbar-linkContainer {
 +
  height: 100%;
 +
  width: 20%;
 +
  color: white;
 +
  background-color: rgba(0,0,0,0);
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
  position: relative;
 +
  float: left;
 +
  text-align: center;
 +
  cursor: default;
 +
}
 +
.navbar-linkContainerChild {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: 100%;
 +
  height: 1em;
 +
  margin: auto;
 +
  font-family: "Norwester", sans-serif;
 +
  font-weight: 700;
 +
  font-size: 1.5vw;
 +
  line-height: 1em;
 +
  border-right: 1px solid white;
 +
}
  
−
// allow button on the black menu bar to show/hide the side menu
+
#linkContainer_PeopleChild {
−
function hide_show_menu() {
+
  border: 0;
−
+
}
−
// in case you preview mode is selected, the menu is hidden for better visibility
+
−
if (window.location.href.indexOf("submit") >= 0) {
+
−
$(".igem_2017_menu_wrapper").hide();
+
−
}
+
  
−
// if the black menu bar has been loaded
+
.navbar-linkContainer.active {
−
  if (document.getElementById('bars_item')) {
+
  transform: scale(1.05,1.05);
 +
  border-radius: 5%;
 +
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 +
  background-color: #5da565;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
  z-index: 9;
 +
}
  
−
// when the "bars_item" has been clicked
+
.activeChild {
−
$("#bars_item").click(function() {
+
  border: 0;
−
$("#sideMenu").hide();
+
  z-index: 10;
 +
}
  
−
// show/hide the menu wrapper
+
.collapsed-menu {
−
$(".igem_2017_menu_wrapper").fadeToggle("100");
+
    top: calc(8vh + 18px);
−
});
+
    position: fixed;
−
  }  
+
    z-index: 1;
 +
    width: 100%;
 +
  background-color: aquamarine;
 +
}
  
−
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
.container-collapse {
−
else {
+
  padding: 0 10px 30px 10px;
−
    setTimeout(hide_show_menu, 15);
+
  width: 80%;
−
}
+
  margin-left: 10%;
−
}
+
−
});
+
−
</script>
+
−
<style>
+
−
+
−
/* Clear the default wiki settings */
+
−
+
−
#home_logo, #sideMenu {
+
−
    display:none;
+
 
}
 
}
  
−
#sideMenu, #top_title, .patrollink  {
+
.height-support {
−
    display:none;
+
    height: 20px;
 +
    width: 100%;
 
}
 
}
  
−
#content {
+
.mask {
−
    width:100%;
+
    height: 8vh;
−
    padding:0px;
+
    width:100%;
−
    margin-top:-50px;
+
    background-color: rgba(0,0,0,0);
−
    margin-left:0px;
+
    z-index: 0;
 
}
 
}
  
−
body {
+
.navbarList {
−
    background-color:lightblue;
+
  float: left;
 +
  height: 100%;
 +
  width: 20%;
 
}
 
}
  
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
.navbarItem {
−
    margin-bottom: 0px;
+
  height: 100%;
 
}
 
}
  
−
#bodyContent h4 {
+
.navbarItemHeader {
−
    font-weight: bold;
+
  display: inline-block;
 +
  position: relative;
 +
  font-family: "Norwester", sans-serif;
 +
  font-weight: 500;
 +
  font-size: 1.8vw;
 +
  color: black;
 +
  text-decoration: none;
 +
  padding-top: 10px;
 +
  width: auto;
 
}
 
}
  
−
/* Custom settings */
+
.navbarItemContent {
 +
  display: inline-block;
 +
  position: relative;
 +
  color: black;
 +
  font-size: 1.5vw;
 +
  line-height: 1.5em;
 +
  text-decoration: none;
 +
  width: auto;
 +
}
  
−
a{
+
a.navbarItemHeader::after, a.navbarItemContent::after {
−
color:black
+
  content: "";
 +
  position: absolute;
 +
  width: 0;
 +
  height: 2px;
 +
  display:block;
 +
  margin-top: 5px;
 +
  right: 0;
 +
  background-color: #000;
 +
  -webkit-transition: width 0.3s ease-in-out 0s;
 +
  transition: width 0.3s ease-in-out 0s;
 +
  padding: 0;
 +
  margin: 0;
 
}
 
}
  
−
table{
+
a.navbarItemHeader:link, a.navbarItemContent:link  {
−
border-spacing:0;
+
  color: black;
−
border-collapse:collapse
+
  text-decoration: none;
 
}
 
}
−
thead{
+
a.navbarItemHeader:visited, a.navbarItemContent:visited  {
−
display:table-header-group
+
  color: black;
 +
  text-decoration: none;
 +
}
 +
a.navbarItemHeader:active, a.navbarItemContent:active  {
 +
  color: black;
 +
  text-decoration: none;
 +
}
 +
a.navbarItemHeader:hover, a.navbarItemContent:hover  {
 +
  color: black;
 +
  text-decoration: none;
 
}
 
}
−
.table{border-collapse:collapse!important}
 
−
/**************************************************************** MENU ***************************************************************/
 
−
/* Wrapper for the menu */
 
−
.igem_2017_menu_wrapper {
 
−
width: 15%;
 
−
height:100vh;
 
−
position:fixed;
 
−
right:0%;
 
−
padding:0px;
 
−
float:right;
 
−
border-left: 1px #d3d3d3;
 
−
background-color:#dddddd;
 
−
text-align:left;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
overflow-y: auto;
 
−
overflow-x: hidden;
 
−
}
 
  
−
/* this hides the scrollbar to keep view consistency */
+
a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after  {
−
.igem_2017_menu_wrappe::-webkit-scrollbar {  
+
  width: 100%;
−
display: none;  
+
  left: 0;
−
}
+
  background: #000;
−
+
}
−
+
−
/* styling for links in the menu, removes the line under text */
+
−
.igem_2017_menu_wrapper a { 
+
−
text-decoration: none;  
+
−
}
+
  
 +
.clearBoth {
 +
  clear: both;
 +
}
 +
/********************************************************* TOPBAR MENU ENDS *********************************************/
 +
/***************************************************** SIDEBAR MENU **************************************************/
 +
#sidebar {
 +
  display: block;
 +
}
 +
#sidebar-wrapper {
 +
        position: fixed;
 +
        top: 18px;
 +
        z-index: 2;
 +
        right: 0;
 +
        width: 283px;
 +
        height: 100%;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
        transform: translateX(300px);
 +
        background: #5da565;
 +
    }
 +
    .sidebar-nav {
 +
        position: absolute;
 +
        top: 0;
 +
        width: 300px;
 +
        margin: 0;
 +
        padding: 10px;
 +
        list-style: none;
 +
    }
 +
    .sub-sidebar-nav {
 +
        width:inherit;
 +
        list-style-type: none;
 +
        margin: 0;
 +
        padding: 10px;
 +
        position:static;
 +
    }
 +
    .sidebar-nav li.sidebar-nav-item a {
 +
        display: block;
 +
        text-decoration: none;
 +
        color: #fff;
 +
        padding: 10px;
 +
    }
 +
    .sidebar-nav-subitem {
 +
        list-style-type: none;
 +
        list-style: none;
 +
        text-decoration: none;
 +
        margin: 0;
 +
        padding: 10px;
 +
        color: #fff;
 +
        background: #2f6361;
 +
        padding: 0px;
 +
    }
 +
    .sidebar-nav li a:hover {
 +
        text-decoration: none;
 +
        color: #000;
 +
        background: #2a8481;
 +
    }
 +
    .sidebar-nav li a:active,
 +
    .sidebar-nav li a:focus {
 +
        text-decoration: none;
 +
    }
 +
    .sidebar-nav > .sidebar-brand {
 +
        font-size: 1.2rem;
 +
        background: rgba(52, 58, 64, 0.1);
 +
        height: 80px;
 +
        line-height: 50px;
 +
        padding-top: 15px;
 +
        padding-bottom: 15px;
 +
        padding-left: 15px;
 +
        position:relative;
 +
        left: -32;
 +
    }
 +
    .sidebar-nav > .sidebar-brand a {
 +
        color: #fff;
 +
    }
 +
    .sidebar-nav > .sidebar-brand a:hover {
 +
        color: #fff;
 +
        background: none;
 +
    }
 +
    .brand-hider {
 +
        width: 290px;
 +
        height: 78px;
 +
        margin: 0;
 +
        padding: 0;
 +
        background: #2f6361;
 +
        position: absolute;
 +
        left: 0;
 +
        top: 1px;
 +
        -webkit-transition: all 1s ease 0s;
 +
        -moz-transition: all 1s ease 0s;
 +
        -ms-transition: all 1s ease 0s;
 +
        -o-transition: all 1s ease 0s;
 +
        transition: all 1s ease 0s;
 +
    }
 +
    .brand-hider.active {
 +
        width: 10px;
 +
        right: 10px;
 +
        -webkit-transition: all 1s ease 0s;
 +
        -moz-transition: all 1s ease 0s;
 +
        -ms-transition: all 1s ease 0s;
 +
        -o-transition: all 1s ease 0s;
 +
        transition: all 1s ease 0s;
 +
    }
 +
    #sidebar-wrapper.active{
 +
        right: 300px;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
    }
 +
    .menu-toggle {
 +
        position: fixed;
 +
        right: 10px;
 +
        top: 30px;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: #fff !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 50px;
 +
        z-index: 999;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
    }
 +
    .menu-toggle:focus, .menu-toggle:hover {
 +
        color: #fff;
 +
    }
 +
    .menu-toggle:hover {
 +
        background: #343a40;
 +
    }
 +
/********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
 +
@media screen and (min-width: 900px) {
 +
  #topBarWrapper {
 +
    display: block;
 +
  }
 +
  #sidebar {
 +
    display: none;
 +
  }
 +
  #scroll-to-top-btn {
 +
    display: none !important;
 +
    opacity: 0 !important;
 +
  }
 +
}
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ***************************************************/
 +
/**********************************************************************************************************************/
 +
.slideshow {
 +
position: relative;
 +
width: 80%;
 +
height: 30vw;
 +
        margin: 0 10%;
 +
        overflow-y: hidden;
 +
}
  
−
/* styling for the images in the menu */
+
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
−
.igem_2017_menu_wrapper img {
+
position:absolute;
−
width: 100%;
+
right:0;
−
}
+
top:0;
 +
height:100%;
 +
width:10%;
 +
background: rgba(0,0,0,0.3);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    z-index:75;
 +
    cursor:pointer;
 +
}
  
−
/* styling for the menu buttons */
+
.slideshow .left-arrow-pane {
−
.igem_2017_menu_wrapper .menu_button {
+
left:0;
−
width: 100%;
+
}
−
padding: 10px 0px 10px 15px;
+
−
float:left;
+
−
border-bottom: 1px #d3d3d3;
+
−
font-size: 12px;
+
−
font-weight: bold;  
+
−
color: #5e5f5f;
+
−
cursor: pointer;
+
−
}
+
  
 +
.slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
 +
position:absolute;
 +
top:50%;
 +
left:30%;
 +
transform:translate(-50%, -50%);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 +
}
  
−
.igem_2017_menu_wrapper .menu_bottom_padding {  
+
.slideshow .left-arrow-pane .arrow {
−
width: 100%;  
+
right:30%;
−
height: 30px;
+
left:auto;
−
float:left;
+
transform: translate(50%, -50%);
−
}
+
}
  
−
.menu_button.direct_to_page {  
+
.slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
−
padding-left: 36px;
+
height:5vw;
−
}
+
width:5vw;
 +
transform:rotate(45deg);
 +
border-style: solid;
 +
border-color: rgba(255, 255, 255, .5);
 +
border-width:5px 5px 0 0;
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
  
 +
.slideshow .left-arrow-pane .arrow div{
 +
transform:rotate(-135deg);
 +
}
  
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
−
width:10%;
+
background:rgba(0,0,0,.25);
−
float:left;
+
}
−
}
+
  
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
.slideshow .right-arrow-pane:hover .arrow {
−
content: "+"; 
+
left:35%;
−
}
+
}
−
+
−
.open::before {
+
−
content: "-" !important; 
+
−
}
+
−
+
−
/* styling for the menu buttons on hover */
+
−
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
+
−
background-color: #3399ff;
+
−
text-decoration: none;
+
−
color:#ffffff;
+
−
}
+
  
−
/* styling for the menu button when it is the current page */
+
.slideshow .left-arrow-pane:hover .arrow {
−
.current_page {
+
right:35%;
−
background-color:#7fc1f7  !important;
+
}
−
color:#5e5f5f !important;
+
−
}
+
  
−
/* styling for the submenu buttons */
+
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
−
.igem_2017_menu_wrapper .submenu_button {
+
border-color:rgb(255,255,255);
−
width: 100%;
+
}
−
padding: 10px 0px 10px 34px;
+
−
float:left;
+
−
background-color:#f2f2f2;
+
−
border-bottom: 1px #d3d3d3;
+
−
font-size: 12px;
+
−
color: #5e5f5f;  
+
−
cursor: pointer;
+
−
}
+
  
−
/* wrapper for the submenu items, they are hidden by default*/
+
.slideshow .bubbles {
−
.igem_2017_menu_wrapper .submenu_wrapper {  
+
position:absolute;
−
display:none;
+
width:100%;
−
}
+
height:10%;
 +
bottom:0;
 +
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 +
}
  
−
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
.slideshow .bubbles div {
−
.igem_2017_menu_wrapper #display_menu_control {
+
height:3vw;
−
display:none;
+
width:3vw;
−
text-align:center;
+
border-radius:5px;
−
}
+
border:solid white 3px;
−
/***************************************************** RESPONSIVE STYLING ****************************************************/
+
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
  
−
/* IF THE SCREEN IS LESS THAN 1200PX */
+
.slideshow .bubbles div:last-child {
−
@media only screen and (max-width: 1200px) {
+
margin-right: 0;
 +
}
 +
 
 +
.slideshow .bubbles div:hover {
 +
background-color: white;
 +
}
 +
 
 +
.slideshow .bubbles div.active {
 +
background-color:white;
 +
}
 +
 
 +
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:5vw;
 +
width:5vw;
 +
bottom:1%;
 +
right:12%;
 +
background:rgba(0,0,0,.7);
 +
border-radius:10px;
 +
z-index:60;
 +
}
 +
 
 +
.slideshow .pauseBtn .bars {
 +
visibility: hidden;
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:3vw;
 +
height:3vw;
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div{
 +
float:right;
 +
width:40%;
 +
height:100%;
 +
background:rgba(255,255,255,.8);
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div:first-child {
 +
float:left;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover {
 +
background: rgba(34,34,34,1);
 +
cursor: pointer;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .bars > div {
 +
background: rgba(255,255,255,1);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri {
 +
visibility: hidden;
 +
position: absolute;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri > div {
 +
width: 0;
 +
height: 0;
 +
border-top: 2vw solid transparent;
 +
border-left-style: solid;
 +
border-left-width: 3vw;
 +
border-left-color:rgba(255,255,255,.75);
 +
border-bottom: 2vw solid transparent;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
 +
 
 +
.slideshow .content {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
        overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide {
 +
visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow-y: hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
.slideshow .content .slide video, .slideshow .content .slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 
 +
.slideshow .content .slide:first-child {
 +
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
        width: 100%;
 +
}
 +
 
 +
.slideshow .content .slide > img:first-child {
 +
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide.active {
 +
left:0 !important;
 +
}
 +
 
 +
.slideshow .content .slide.left {
 +
left:-100vw !important;
 +
}
 +
 
 +
.slideshow .content .slide.right {
 +
left:100vw !important;
 +
}
 +
 
 +
.splash .slideshow .title {
 +
top:65%;
 +
left:200px;
 +
}
 +
 
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
 +
 
 +
.notransition {
 +
-webkit-transition: none !important;
 +
    -moz-transition: none !important;
 +
    -ms-transition: none !important;
 +
    -o-transition: none !important;
 +
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ENDS*************************************************/
 +
 
 +
/********************************************************Loader**************************************************/
 +
#loader-wrapper {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1000;
 +
}
 +
 
 +
#loader {
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1001;
 +
}
 +
 
 +
#loaderMessage {
 +
    position: absolute;
 +
    width: 50%;
 +
    height: 10%;
 +
    margin: 85% 25% 5% 25%;
 +
    font-size: 10%;
 +
}
 +
 
 +
#videoLoader {
 +
    position:absolute;
 +
    width: 50%;
 +
    margin: 15% 25%;
 +
}
 +
 
 +
    #loader-wrapper .loader-section {
 +
        position: fixed;
 +
        width: 100%;
 +
        height: 51%;
 +
        background: rgb(214,230,223);
 +
        z-index: 1000;
 +
        -webkit-transform: translateY(0);
 +
        -ms-transform: translateY(0);
 +
        transform: translateY(0);
 +
    }
 +
    #loader-wrapper .loader-section.section-top {
 +
        top: 0;
 +
    }
 +
    #loader-wrapper .loader-section.section-bottom {
 +
        bottom: 0;
 +
    }
 +
    /* Loaded */
 +
    .loaded #loader-wrapper .loader-section.section-top {
 +
        -webkit-transform: translateY(-100%);
 +
        -ms-transform: translateY(-100%);
 +
        transform: translateY(-100%);
 +
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
    .loaded #loader-wrapper .loader-section.section-bottom {
 +
        -webkit-transform: translateY(100%);
 +
        -ms-transform: translateY(100%);
 +
        transform: translateY(100%);
 +
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
    .loaded #loader {
 +
        opacity: 0;
 +
        -webkit-transition: all 0.3s ease-out;
 +
                -o-transition: all 0.3s ease-out;
 +
                transition: all 0.3s ease-out;
 +
    }
 +
    .loaded #loader-wrapper {
 +
        visibility: hidden;
 +
    }
 +
    /* JavaScript Turned Off */
 +
    .no-js #loader-wrapper {
 +
        display: none;
 +
    }
 +
 
 +
 
 +
/**********************************************************************************************************************/
 +
/********************************************************* VERTICAL NAVBAR ********************************************/
 +
/**********************************************************************************************************************/
 +
  .vertical-nav {
 +
    list-style: none;
 +
  }
 +
 
 +
/* --------------------------------
 +
Primary style
 +
-------------------------------- */
 +
*, *::after, *::before {
 +
  box-sizing: border-box;
 +
}
 +
 
 +
a {
 +
  color: yellow;
 +
  text-decoration: none;
 +
}
 +
 
 +
.cd-image-replace {
 +
  /* replace text with image */
 +
  display: inline-block;
 +
  overflow: hidden;
 +
  text-indent: 100%;
 +
  white-space: nowrap;
 +
  color: transparent;
 +
}
 +
 
 +
/* --------------------------------
 +
Navigation trigger - visible on small devices only
 +
-------------------------------- */
 +
.cd-nav-trigger {
 +
  display: block;
 +
  position: fixed;
 +
  z-index: 102;
 +
  bottom: 30px;
 +
  right: 5%;
 +
  height: 44px;
 +
  width: 44px;
 +
  border-radius: 0.25em;
 +
  background: rgba(234, 242, 227, 0.9);
 +
  /* reset button style */
 +
  cursor: pointer;
 +
  -webkit-appearance: none;
 +
  -moz-appearance: none;
 +
  -ms-appearance: none;
 +
  -o-appearance: none;
 +
  appearance: none;
 +
  border: none;
 +
  outline: none;
 +
}
 +
.cd-nav-trigger span {
 +
  /* central dot */
 +
  position: absolute;
 +
  height: 4px;
 +
  width: 4px;
 +
  background-color: #3a2c41;
 +
  border-radius: 10%;
 +
  left: 50%;
 +
  top: 50%;
 +
  bottom: auto;
 +
  right: auto;
 +
  -webkit-transform: translateX(-50%) translateY(-50%);
 +
  -moz-transform: translateX(-50%) translateY(-50%);
 +
  -ms-transform: translateX(-50%) translateY(-50%);
 +
  -o-transform: translateX(-50%) translateY(-50%);
 +
  transform: translateX(-50%) translateY(-50%);
 +
}
 +
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
 +
  /* bottom and top dots */
 +
  content: '';
 +
  position: absolute;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: #3a2c41;
 +
  border-radius: inherit;
 +
}
 +
.cd-nav-trigger span::before {
 +
  top: -9px;
 +
}
 +
.cd-nav-trigger span::after {
 +
  bottom: -9px;
 +
}
 +
@media only screen and (min-width: 900px) {
 +
  .cd-nav-trigger {
 +
    display: none;
 +
  }
 +
}
 +
 
 +
/* --------------------------------
 +
Vertical navigation
 +
-------------------------------- */
 +
.cd-vertical-nav {
 +
  position: fixed;
 +
  z-index: 100;
 +
  right: 5%;
 +
  bottom: 30px;
 +
  width: 90%;
 +
  max-width: 400px;
 +
  max-height: 90%;
 +
  overflow-y: auto;
 +
  -webkit-transform: scale(0);
 +
  -moz-transform: scale(0);
 +
  -ms-transform: scale(0);
 +
  -o-transform: scale(0);
 +
  transform: scale(0);
 +
  -webkit-transform-origin: right bottom;
 +
  -moz-transform-origin: right bottom;
 +
  -ms-transform-origin: right bottom;
 +
  -o-transform-origin: right bottom;
 +
  transform-origin: right bottom;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition: all 0.2s;
 +
  transition: all 0.2s;
 +
  border-radius: 0.25em;
 +
  background-color: rgba(234, 242, 227, 0.9);
 +
}
 +
.cd-vertical-nav a {
 +
  display: block;
 +
  padding: 1em;
 +
}
 +
.cd-vertical-nav a.active {
 +
  color: white;
 +
}
 +
.cd-vertical-nav.open {
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  transform: scale(1);
 +
  -webkit-overflow-scrolling: touch;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger {
 +
  background-color: transparent;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span {
 +
  background-color: rgba(58, 44, 65, 0);
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
 +
  /* transform dots in 'X' icon */
 +
  height: 3px;
 +
  width: 20px;
 +
  border-radius: 0;
 +
  left: -8px;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::before {
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  -o-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
  top: 1px;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::after {
 +
  -webkit-transform: rotate(135deg);
 +
  -moz-transform: rotate(135deg);
 +
  -ms-transform: rotate(135deg);
 +
  -o-transform: rotate(135deg);
 +
  transform: rotate(135deg);
 +
  bottom: 0;
 +
}
 +
@media only screen and (min-width: 900px) {
 +
  .cd-vertical-nav {
 +
    /* reset style */
 +
    right: 0;
 +
    top: 0;
 +
    bottom: auto;
 +
    height: 100vh;
 +
    width: 90px;
 +
    max-width: none;
 +
    max-height: none;
 +
    -webkit-transform: scale(1);
 +
    -moz-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    -o-transform: scale(1);
 +
    transform: scale(1);
 +
    background-color: transparent;
 +
    /* vertically align its content*/
 +
    display: table;
 +
  }
 +
   
 +
   
 +
   
 +
/* navbar background */
 +
  .cd-vertical-nav::before {
 +
    /* this is the navigation background */
 +
    content: '';
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: #397471;
 +
    -webkit-transform: translateX(100%);
 +
    -moz-transform: translateX(100%);
 +
    -ms-transform: translateX(100%);
 +
    -o-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    -webkit-transition: -webkit-transform 0.4s;
 +
    -moz-transition: -moz-transform 0.4s;
 +
    transition: transform 0.4s;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before {
 +
    -webkit-transform: translateX(0);
 +
    -moz-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    -o-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
  .cd-vertical-nav ul {
 +
    /* vertically align <ul> inside <nav>*/
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
  }
 +
  .cd-vertical-nav a {
 +
    position: relative;
 +
    padding: 2em 0 0;
 +
    margin: 0.5em auto;
 +
    border-bottom: none;
 +
    font-size: 1rem;
 +
    color: #FFF;
 +
    line-height: 1em;
 +
  }
 +
  .cd-vertical-nav a.active {
 +
    color: #FFF;
 +
  }
 +
  .cd-vertical-nav a::before, .cd-vertical-nav a::after {
 +
    /* used to create the filled circle and the background icon */
 +
    content: '';
 +
    position: absolute;
 +
    left: 50%;
 +
    /* Force Hardware Acceleration */
 +
    -webkit-backface-visibility: hidden;
 +
    backface-visibility: hidden;
 +
    -webkit-transform: translateZ(0);
 +
    -moz-transform: translateZ(0);
 +
    -ms-transform: translateZ(0);
 +
    -o-transform: translateZ(0);
 +
    transform: translateZ(0);
 +
  }
 +
  .cd-vertical-nav a::before {
 +
    /* filled circle */
 +
    top: 0;
 +
    height: 32px;
 +
    width: 32px;
 +
    border-radius: 50%;
 +
    background: #5DA565;
 +
    -webkit-transform: translateX(-50%) scale(0.1);
 +
    -moz-transform: translateX(-50%) scale(0.1);
 +
    -ms-transform: translateX(-50%) scale(0.1);
 +
    -o-transform: translateX(-50%) scale(0.1);
 +
    transform: translateX(-50%) scale(0.1);
 +
    -webkit-transition: -webkit-transform 0.4s, background-color 0.2s;
 +
    -moz-transition: -moz-transform 0.4s, background-color 0.2s;
 +
    transition: transform 0.4s, background-color 0.2s;
 +
  }
 +
  .cd-vertical-nav a::after {
 +
    /* icon */
 +
    opacity: 0;
 +
    top: 8px;
 +
    height: 16px;
 +
    width: 16px;
 +
    background: url(../img/cd-nav-icons.svg) no-repeat;
 +
    -webkit-transform: translateX(-50%) scale(0);
 +
    -moz-transform: translateX(-50%) scale(0);
 +
    -ms-transform: translateX(-50%) scale(0);
 +
    -o-transform: translateX(-50%) scale(0);
 +
    transform: translateX(-50%) scale(0);
 +
    -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s;
 +
    -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s;
 +
    transition: transform 0.4s 0s, opacity 0.1s 0.3s;
 +
  }
 +
  .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before {
 +
    background-color: #70C27C;
 +
  }
 +
  .cd-vertical-nav .label {
 +
    display: block;
 +
    /* Force Hardware Acceleration */
 +
    -webkit-backface-visibility: hidden;
 +
    backface-visibility: hidden;
 +
    -webkit-transform: translateZ(0);
 +
    -moz-transform: translateZ(0);
 +
    -ms-transform: translateZ(0);
 +
    -o-transform: translateZ(0);
 +
    transform: translateZ(0);
 +
    -webkit-transform: translateX(100%);
 +
    -moz-transform: translateX(100%);
 +
    -ms-transform: translateX(100%);
 +
    -o-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    -webkit-transition: all 0.4s;
 +
    -moz-transition: all 0.4s;
 +
    transition: all 0.4s;
 +
    line-height: 1em;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after {
 +
    -webkit-transform: translateX(-50%) scale(1);
 +
    -moz-transform: translateX(-50%) scale(1);
 +
    -ms-transform: translateX(-50%) scale(1);
 +
    -o-transform: translateX(-50%) scale(1);
 +
    transform: translateX(-50%) scale(1);
 +
    /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */
 +
    -moz-transform: translateX(-50%) scale(1) rotate(0.02deg);
 +
  }
 +
  .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after {
 +
    opacity: 1;
 +
    -webkit-transition: -webkit-transform 0.4s, opacity 0s;
 +
    -moz-transition: -moz-transform 0.4s, opacity 0s;
 +
    transition: transform 0.4s, opacity 0s;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label {
 +
    -webkit-transform: translateX(0);
 +
    -moz-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    -o-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 
 +
/* --------------------------------
 +
no-js
 +
-------------------------------- */
 +
.no-js .cd-nav-trigger {
 +
  display: none;
 +
}
 +
 
 +
.no-js .cd-vertical-nav {
 +
  position: static;
 +
  height: auto;
 +
  width: 100%;
 +
  max-width: none;
 +
  background-color: #2A8481;
 +
  border-radius: 0;
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  transform: scale(1);
 +
}
 +
.no-js .cd-vertical-nav::before {
 +
  display: none;
 +
}
 +
.no-js .cd-vertical-nav ul::after {
 +
  clear: both;
 +
  content: "";
 +
  display: table;
 +
}
 +
.no-js .cd-vertical-nav li {
 +
  display: inline-block;
 +
  float: left;
 +
}
 +
.no-js .cd-vertical-nav a {
 +
  padding: 0 1em;
 +
  margin: 1.5em 1em;
 +
  color: #eaf2e3;
 +
}
 +
.no-js .cd-vertical-nav a.active {
 +
  color: #c0a672;
 +
}
 +
.no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {
 +
  display: none;
 +
}
 +
.no-js .cd-vertical-nav .label {
 +
  -webkit-transform: translateX(0);
 +
  -moz-transform: translateX(0);
 +
  -ms-transform: translateX(0);
 +
  -o-transform: translateX(0);
 +
  transform: translateX(0);
 +
}
  
−
#content {width:100%; }
+
/********************************************************* TERMINA VERTICAL NAVBAR ***********************************/
−
.igem_2017_menu_wrapper {width:15%; right:0;}
+
−
.highlight {padding:10px 0px;}
+
−
.igem_2017_menu_wrapper #display_menu_control { display:none; }
+
−
#menu_content { display:none;}
+
−
.menu_button.direct_to_page {padding-left: 17px;}
+
−
+
−
}
+
  
−
/* IF THE SCREEN IS LESS THAN 800PX */
+
    </style>
−
@media only screen and (max-width: 800px) {
+
</head>
 +
<body>
 +
<!------------------------------------------------------- LOADER ------------------------------------------------------->
 +
  <div id="loader-wrapper">
 +
    <div id="loader">
 +
      <img id="videoLoader" src="https://static.igem.org/mediawiki/2018/e/e3/T--Tec-Monterrey--Page_Loader.gif">
 +
      <div id="loaderMessage"></div>
 +
    </div>
 +
    <div class="loader-section section-top"></div>
 +
    <div class="loader-section section-bottom"></div>
 +
  </div>
  
−
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
+
<!-- Navigation Bars-->
−
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
+
<!------------------------------------------------------- SIDEBAR MENU STARTS ------------------------------------------>
−
.column.half_size  {width:100%; }
+
  <div id="sidebar">
−
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
+
    <a class="menu-toggle rounded" id="menuToggle" href="#">
−
.highlight {padding:15px 5px;}
+
      <i class="fa fa-bars" style="font-size: 20px;"></i>
−
.igem_2017_menu_wrapper #display_menu_control { display:none; }
+
    </a>
−
#menu_content { display:none;}
+
    <nav id="sidebar-wrapper">
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
+
      <ul class="sidebar-nav">
−
.menu_bottom_padding {display:none;}
+
        <li class="sidebar-brand">
−
.menu_button.direct_to_page { padding-left: 36px; }
+
          <div class="brand-hider"></div>
−
}
+
          <a href="https://2018.igem.org/Team:Tec-Monterrey">Tec de Monterrey</a>
−
+
        </li>
−
/* special class that the system uses to make sure the team wants a page to be evaluated */
+
        <li class="sidebar-nav-item" id="menuProject">
−
.judges-will-not-evaluate {
+
          <a>Project</a>
−
    width: 96.6%;
+
            <ul class="sub-sidebar-nav">
−
  margin: 5px 15px;
+
                <li class="sidebar-nav-subitem" id="subProject">
−
  display: block;
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Description">Description</a>
−
border: 4px #3399ff;
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Design">Design</a>
−
    font-weight: bold;
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab">Interlab</a>
−
}
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook">Notebook</a>
−
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety">Safety</a>
−
</style>
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate">Demonstrate</a>
−
  </head>
+
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Medals">Medals</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuParts">
 +
          <a>Parts</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subParts">
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts">Parts</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve">Improved parts</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/PartsList">Parts list</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuPeople">
 +
          <a>People</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subPeople">
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Team">Team</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations">Collaborations</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions">Attribution</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Sponsors">Sponsors</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuHP">
 +
          <a>Human Practices</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subHP">
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices">Human Practices</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement">Public & Educational Engagement</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuModeling">
 +
          <a>Modeling</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subModeling">
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Overview</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Model#">D.E. System</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Quasi-Steady State</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey/Model">Protein Production</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
  </div>
 +
<!--------------------------------------------------------- SIDEBAR MENU ENDS -------------------------------------------->
 +
<!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
 +
<div id="topBarWrapper">
 +
      <div class="topBar d-flex">
 +
          <div id="navbar">
 +
            <div id="navbarLogoWrapper">
 +
              <img id="navbarLogo" src="https://static.igem.org/mediawiki/2018/7/76/T--Tec-Monterrey--ECoding_Menu_Logo_Still_200.png"/><img id="navbarGif" src="https://static.igem.org/mediawiki/2018/c/c3/T--Tec-Monterrey--ECoding_Menu_Gif.gif"/>
 +
              <h5 id="navbarLogoText">Home</h5>
 +
            </div>
 +
              <div id="navContainer">
 +
                  <a>
 +
                      <div class="navbar-linkContainer" id="linkContainer_Project">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div>
 +
                      </div>
 +
                  </a>
 +
                  <a>
 +
                      <div class="navbar-linkContainer" id="linkContainer_Parts">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div>
 +
                      </div>
 +
                  </a>
 +
                  <a>
 +
                      <div class="navbar-linkContainer" id="linkContainer_HP">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div>
 +
                      </div>
 +
                  </a>
 +
                  <a>
 +
                      <div class="navbar-linkContainer" id="linkContainer_Modeling">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div>
 +
                      </div>
 +
                  </a>
 +
                  <a>
 +
                      <div class="navbar-linkContainer" id="linkContainer_People">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div>
 +
                      </div>
 +
                  </a>
 +
              </div>
 +
          </div>
 +
           
 +
            <!-- Project collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseProject">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Description"
 +
                            class="navbarItemHeader">Description</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#overview" class="navbarItemContent">Overview</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#system" class="navbarItemContent">System</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Description#references" class="navbarItemContent">References</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design" class="navbarItemHeader">Design</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#background" class="navbarItemContent">Background</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#module1" class="navbarItemContent">Module 1</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#module2" class="navbarItemContent">Module 2</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#system" class="navbarItemContent">System</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Design#adaptation" class="navbarItemContent">Adaptation</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab" class="navbarItemHeader">InterLab</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#procedure-interlab" class="navbarItemContent">Procedure</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#results-interlab" class="navbarItemContent">Results</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#conclusion-interlab" class="navbarItemContent">Conclusion</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook" class="navbarItemHeader">Notebook</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook#logbook" class="navbarItemContent">Logbook</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Notebook#protocols" class="navbarItemContent">Protocols</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety" class="navbarItemHeader">Safety</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#biosafety" class="navbarItemContent">Biosafety</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#our-lab" class="navbarItemContent">Our Lab</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Safety#project-safety" class="navbarItemContent">Project Safety</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate" class="navbarItemHeader">Demonstrate</a>
 +
                          <br>
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey/Medals" class="navbarItemHeader">Medals</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Parts collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseParts">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts" class="navbarItemHeader">Parts</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#overview" class="navbarItemContent">Overview</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#basic_parts" class="navbarItemContent">Basic Parts</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#composite_parts" class="navbarItemContent">Composite Parts</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Parts#parts_collection" class="navbarItemContent">Collection</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve" class="navbarItemHeader">Improved Parts</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Previous Parts</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Improved Parts</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/PartsList" class="navbarItemHeader">Parts List</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- People collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapsePeople">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team" class="navbarItemHeader">Team</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#page-top" class="navbarItemContent">Header</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#teamMembers" class="navbarItemContent">Team Members</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi1" class="navbarItemContent">PI 1</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi2" class="navbarItemContent">PI 2</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#instructor" class="navbarItemContent">Instructor</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#advisors" class="navbarItemContent">Advisors</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#collaborators" class="navbarItemContent">Collaborators</a>
 +
                            <br>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations" class="navbarItemHeader">Collaborations</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations#collabs" class="navbarItemContent">Collabs</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations#meetups" class="navbarItemContent">Meetups</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions" class="navbarItemHeader">Attributions</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#tec-monterrey-work" class="navbarItemContent">What we have done</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#general-support" class="navbarItemContent">General Support</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#HP-support" class="navbarItemContent">HP Support</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#design-wiki" class="navbarItemContent">Design/Wiki</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#fund-raising" class="navbarItemContent">Fund raising</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#thanks" class="navbarItemContent">Thanks</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Sponsors" class="navbarItemHeader">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- HP collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseHP">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices" class="navbarItemHeader">Human Practices</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#page-top" class="navbarItemContent">Header</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#introduction-HP" class="navbarItemContent">Intro</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#action-HP" class="navbarItemContent">Action Plan</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#journey-HP" class="navbarItemContent">Journey</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#integrated-HP" class="navbarItemContent">Integrated</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#world-HP" class="navbarItemContent">World</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Public & Educational Engagement</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#magazine" class="navbarItemContent">Magazine articles</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#presentation" class="navbarItemContent">Presentations</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#social" class="navbarItemContent">Social Media</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#congress" class="navbarItemContent">Congress</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#tour" class="navbarItemContent">Tour</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#workshops" class="navbarItemContent">Workshops</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement#seminar" class="navbarItemContent">Seminar</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Modeling collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseModeling">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Introduction</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Biological System</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">D.E. System</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Kinetic Diagram</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Equations</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Parameters</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Quasi-Steady State</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Equations</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Protein Production</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Equations</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Experimentation</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Parameters</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
 +
            <div class="mask"></div>
 +
        </div>
 +
</div>
 +
<!--------------------------------------------------------- TOPBAR MENU ENDS ---------------------------------------------> 
 +
    <!--Scroll to top button-->
 +
    <a class="scroll-to-top rounded" href="#page-top" id="scroll-to-top-btn">
 +
      <i class="fa fa-angle-up"></i>
 +
    </a>
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:57, 18 October 2018