Template:East Chapel Hill

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript" async 

 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style> /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/

/* Clear the default wiki settings */

#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { width:100%; padding:0px; margin-top:50px; margin-left:0px;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }


/********************************* DEFAULT WIKI SETTINGS ********************************/ body { 

 background-color: white;
 width: 100%;

}

  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5 {
 margin-bottom: 0px;

} </style>

<style> .description{ color: #7C7D7D !important; font-family: 'Josefin Sans', sans-serif; padding-left: 10%; padding-right: 10%; margin: 0 auto; position: relative; max-width: 100em; }

</style> <style> img { 

   max-width: 100%;
   height: auto;
   width: auto\9; /* ie8 */

} </style> <style> @charset "UTF-8"; .navigation { 

 height: 61px;
 margin-top:10px;
 padding:0;
 font-size: 80%;

background:white;

}

.brand { 

 position: absolute;
 float: left;
 padding-left:2%;
 line-height: 70px;
 text-transform: uppercase;
 font-size: 1.4em;

}

/* HARVARD UNIVERSITY */ .brand a, .brand a:visited{ 

 color: #8B8D8E;
 text-decoration: none;
 font-family: 'Josefin Sans', sans-serif;
 font-size: 100%;

}

.nav-container { 

 max-width: 1500px;
 margin: 0 auto;

}

nav { 

 float: right;
 background: none;

}

/* spacing between box in small window */ nav ul { 

 list-style: none;
 margin: 0;
 padding: 0;
 background: #FFFFFF;

} nav ul li { 

 float: left;
 position: relative;

}

/* text inside navbar before */ nav ul li a, nav ul li a:visited { 

 display: block;
 height: 56px;
 padding: 0 20px;
 background: #FFFFFF;
 line-height: 60px;
 color: #8B8D8E;
 text-decoration: none;
 font-family: 'Josefin Sans', sans-serif;
 font-size: 120%;

} nav ul li a:hover, nav ul li a:visited:hover { 

 background: #B3D8F5;
 color: #FFFFFF;
 text-decoration: none;

} nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after { 

 padding-left: 4px;
 content: '▾';
 text-decoration: none;

}

nav ul li ul { 

 height: 5px;

}


nav ul li ul li { 

 min-width: 150px;
 height: 40px;
 width: 100%;
 //text-align: center;
 

 /* make dropdown stick to top */
 top: -13px;

} nav ul li ul li a { 

 padding: 15px;
 line-height: 50%;
 margin: 0px;
 text-decoration: none;

}

.nav-dropdown { 

 position: absolute;
 display: none;
 left: -23px;
 top: 65px;
 z-index: 1;
 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 height: 100%;

}

/* Mobile navigation */ .nav-mobile { 

 float:right;
 display: none;
 position: absolute;
 top: 0;
 right: 0;
 height: 20px;
 width: 70px;
 background: #FFFFFF;

}

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

 .nav-mobile {
   display: block;
 }

 nav {
   width: 100%;
   padding: 0 0 0;
 }

 /* background of mobile dropdown */
 nav ul {
   display: none;

   /* width of dropdown */
   position: fixed;
   width: 180px;
   height: auto;
   
   top: 65px;
   right: 0px;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

 }
 nav ul li {
   float: none;
   text-align: center;
 }
 nav ul li a {
   padding: 15px;
   line-height: 20px;
   
 }
 nav ul li ul{
   float: right;
  
 }

  /* second toggle dropdown */
 .nav-dropdown {
  position:absolute;
  
  top: 9px;
  left: -212px;
  width: 190px;
  height: auto;
  
 }



 .brand{
   padding-left: 15px;
   font-size: 120%;
 }

}


/* background of toggle (mobile) */

  1. nav-toggle {
 position: absolute;
 left: 5px;
 top: 22px;
 cursor: pointer;
 padding: 10px 35px 16px 0px;
 background: #FFFFFF;

}

/* toggle button (mobile) */

  1. nav-toggle span,
  2. nav-toggle span:before,
  3. nav-toggle span:after {
 cursor: pointer;
 border-radius: 1px;
 height: 5px;
 width: 35px;
 background: #8B8D8E;
 position: absolute;
 display: block;
 content: ;
 transition: all 300ms ease-in-out;

}

  1. nav-toggle span:before {
 top: -10px;

}

  1. nav-toggle span:after {
 bottom: -10px;

}

  1. nav-toggle.active span {
 background-color: transparent;

}

  1. nav-toggle.active span:before, #nav-toggle.active span:after {
 top: 0;

}

  1. nav-toggle.active span:before {
 transform: rotate(45deg);

}

  1. nav-toggle.active span:after {
 transform: rotate(-45deg);

}

h1 { text-align: center; font-family: 'Josefin Sans', sans-serif !important; color: #7C7D7D; }

.panel-body { font-family: 'Arial'; font-size: small; }

ul { 

   list-style-type: disc;

}

.centerImage { text-align:center; display:block; margin: auto; width: 80%; }

</style> <style> .gallery { 

   margin: 5px;
   border: 1px solid #ccc;
   float: left;
   width: 180px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.gallery:hover { 

   border: 1px solid #777;

}

.gallery img { 

   width: 100%;
   height: auto;

}

.imagegallery{ overflow: hidden }

.desc { 

   padding: 15px;
   text-align: center;

} </style> <style>

div.polaroid { 

 width: 80%;
 background-color: white;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 margin-bottom: 25px;
 display: inline-block;

}

div.pocontainer { 

 text-align: center;
 padding: 10px 20px;

} </style>

<section class="navigation navbar-fixed-top"> 

     <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:Harvard">Harvard OPTI POLY</a>

   <nav>
<a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"></a>
   </nav>

</section>


<script> (function($) { // Begin jQuery 

 $(function() { // DOM ready
   // If a link has a dropdown, add sub menu toggle.
   $('nav ul li a:not(:only-child)').click(function(e) {
     $(this).siblings('.nav-dropdown').toggle();
     // Close one dropdown when selecting another
     $('.nav-dropdown').not($(this).siblings()).hide();
     e.stopPropagation();
   });
   // Clicking away from dropdown will remove the dropdown class
   $('html').click(function() {
     $('.nav-dropdown').hide();
   });
   // Toggle open and close nav styles on click
   $('#nav-toggle').click(function() {
     $('nav ul').slideToggle();
   });
   // Hamburger to X toggle
   $('#nav-toggle').on('click', function() {
     this.classList.toggle('active');
   });
 }); // end DOM ready

})(jQuery); // end jQuery </script> </head> </html>