Difference between revisions of "Template:Team:MIT/Header"

(Created page with "__NOTOC__<html lang="en"> <head> <script> $(document).ready(function(){ $('p:empty').css('display','none'); }); function nav_notebook( dest ){ if (window.location.pathname =...")
 
Line 1: Line 1:
−
__NOTOC__<html lang="en">
+
<!-- Declare that you are going to use html code instead of wiki code -->
−
<head>
+
<html>
−
<script>
+
−
$(document).ready(function(){
+
−
$('p:empty').css('display','none');
+
−
});
+
  
−
function nav_notebook( dest ){
+
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Cantarell:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
−
  if (window.location.pathname == "/Team:MIT/Notebook"){
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
−
    window.location.hash=dest;
+
<style type="text/css">
−
    window.location.reload();
+
 
−
  }
+
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
−
  else{
+
 
−
    window.location.href="https://2014.igem.org/Team:MIT/Notebook#" + dest;
+
.topWikiNavBackground {
−
  }
+
    height:18px;
 +
    margin-top: -32px;
 +
    background-color:transparent;
 
}
 
}
  
−
</script>
+
.headerimage {
−
</head>
+
position: relative;
−
<!-- wiki hacks --><style type="text/css"><!--
+
top:26px;
−
/*------------------------------------*\
+
margin: auto;
−
RESET
+
width: 100%;
−
\*------------------------------------*/
+
height: 100%;
−
table{
+
 
−
border-collapse:collapse;
+
−
border-spacing:0;
+
−
background-color:transparent;
+
 
}
 
}
−
a {
+
 
−
color:teal;
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 
}
 
}
−
a:visited {
+
 
−
color:teal;
+
/*Title fonts*/
 +
#title, .subtitle{
 +
margin: 40px;
 +
text-align: center;
 +
font-family: 'Permanent Marker', cursive;
 +
color: white;
 
}
 
}
−
fieldset,img{
+
 
−
border:0;
+
.subtitle{
 +
font-size: 30px;
 
}
 
}
−
address,caption,cite,code,dfn,th,var{
+
 
−
font-style:normal;
+
#title{
−
font-weight:normal;
+
font-size: 40px;
 
}
 
}
−
caption,th{
+
 
−
text-align:left;
+
/*Text font for regular paragraph text on all pages*/
 +
.text{
 +
font-size: 15px;
 +
font-family: 'Cantarell', sans-serif;
 
}
 
}
−
q:before,q:after{
 
−
content:'';
 
−
}
 
−
abbr,acronym{
 
−
border:0;
 
−
}
 
−
/*End reset*/
 
  
−
OL {
+
html, body, .wrapper { /*-- changes default wiki settings --*/
−
padding-left:2em;
+
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 
}
 
}
  
−
#top-section
+
body{
−
{
+
        background-color: black
−
    height: 1em;
+
−
    background-color: #FFFFFF;
+
−
}
+
−
#search-controls
+
−
{
+
−
    display: none;
+
 
}
 
}
  
−
#globalwrapper {
+
.navmenu {
−
    width:1000px;
+
position:fixed;
−
    padding:20px 0px;
+
top:16px;
−
    margin: 0 auto;
+
left:0;
−
    /*background-color:#ffffff;*/
+
right:0;
−
    height:100%;
+
background:black;
 +
        z-index : 100;
 +
        height : 50px;
 +
        align : center;
 
}
 
}
−
#footer-box {
+
#mainLogo {  
−
    width:990px;
+
 
}
 
}
−
.firstHeading {
+
#navmenubox {
−
    height:0px;
+
padding:0;
−
display:none;
+
margin-left:0;
 +
margin-right:0;
 +
width:100%;
 +
height:45px;
 
}
 
}
−
body {
+
.sidelogos {
−
    background: #404040;
+
float:left;
−
    /*background-image: url('https://static.igem.org/mediawiki/2014/a/aa/MIT_2014_Background_gradient_1050px.png');*/
+
display:block;
−
    /*MIT_2014_Background_gradient_1050px.png*/
+
margin-left:auto;
−
    background-position: center;
+
height:100%;
−
    background-repeat: repeat-y;
+
width:auto;
−
    height:100%;
+
top : 0;  
 
}
 
}
−
/*page title*/
+
#logos{
−
h1 {
+
float:right;
−
font-weight:bold;
+
−
padding-top:20px;
+
 
}
 
}
−
/*page sections*/
+
#home {
−
h2 {
+
    width : 40px;
 +
    top : 0;
 
}
 
}
−
/*title on header*/
+
#mainpage {
−
h5 {
+
    float : left;
−
font-size:20pt;
+
    margin-left : 50px;
 +
    margin-top : 7px;
 
}
 
}
−
 
+
#facebookicon{
−
#p-logo {
+
margin-right: 0.75em;
−
    height:1px; overflow:hidden; display: none;
+
width:1.9em;
 
}
 
}
−
 
+
#twittericon{
−
#content {
+
width:2.375em;
−
    border-left-width:0px;
+
margin-right:auto;
−
    border-right-width:0px;
+
−
    padding:0;
+
−
    padding-top: 0;
+
−
    width:1000px;
+
−
    border-top: none;
+
−
    background: #f3f3f3;
+
−
    height:100%;
+
−
    font-family: verdana;
+
−
    font-weight: 300;
+
 
}
 
}
−
#menubar {  
+
#igemlogo img{
−
     background-color: #FFFFFF;  
+
width:2.3em;
 +
     position: relative;
 +
background-color: white;
 
}
 
}
−
#menubar ul li a {
+
#igemlogo:hover img {
−
    color: #999999; }
+
background-color:rgb(0,153,102);
−
    .right-menu li a {
+
−
    color: black;
+
−
    background-color: #FFFFFF;
+
 
}
 
}
−
 
+
#twittericon img, #facebookicon img, #igemlogo img{
−
.nav{
+
margin-top:8px;
−
float:left;
+
margin-bottom:2px;
−
width:100%;
+
−
margin:0;
+
−
color:#FFFFFF;
+
−
list-style:none;
+
−
position:relative;
+
−
z-index:5;
+
−
text-align:center;
+
−
/*CHANGE THIS TO CENTER*/
+
−
padding:0 0px; /*12px;*/
+
 
}
 
}
−
 
+
#twitapp, #fbapp {
−
.nav table{
+
display:none;
−
background-color:#505050;
+
width:250px;
−
clear:both;
+
height:auto;
−
align:center;
+
 
}
 
}
−
.nav tr{
+
#fbapp{
−
background-color:#505050;
+
margin-left:-149px;
 
}
 
}
−
.nav tbody tr td{
+
#twitapp{
−
float:left;
+
margin-left:-111px;
−
position:relative;
+
−
display:inline;
+
−
width:16%;
+
−
line-height: 2.2em;
+
 
}
 
}
−
 
+
#nav, #nav ul{
−
.nav a{
+
padding:0;
−
height:1.5em;
+
margin:0;
−
padding: 0.2em;
+
list-style:none;
−
color:#FFF;;
+
    text-align : center;
−
font-size:13pt;
+
−
background-color:#505050;
+
−
border-right:0px solid white;
+
−
white-space:nowrap;
+
−
text-decoration:none;
+
−
display:block;
+
−
width:100%;
+
 
}
 
}
−
 
+
#nav li{
−
.nav a:hover{
+
font-family:'Permanent Marker', cursive;
−
background-color:#303030!important;
+
display:inline-block;
 +
color: white;
 +
position:relative;
 +
top : 12px;
 +
font-size : 16px;
 +
height : 40px;
 +
    vertical-align : middle;
 +
    padding : 0;
 +
    margin : 0;
 
}
 
}
−
 
+
#nav li ul{
−
/*--- DROPDOWN ---*/
+
    vertical-align : bottom;
−
.nav ul{
+
−
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
+
−
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
+
−
list-style:none;
+
−
position:absolute;
+
−
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
+
−
margin-top: 0;
+
−
margin-left:0;
+
−
margin-right:0;
+
−
 
+
 
}
 
}
−
 
+
#nav li ul li {
−
 
+
font-family: 'Cantarell', sans-serif;
−
.nav ul li{
+
    height : 60px;
−
padding-top:1px;
+
    vertical-align : top;
 +
    width : 170px;
 +
    background : rgba(0,0,0,0.65);
 +
    padding : 15px 0;
 +
    color : rgb(0,0,0);
 +
    border-bottom: 1px solid rgba(255,255,255,.2);
 +
    display: block;
 
}
 
}
−
 
+
#nav ul{
−
.nav ul a{
+
    display : block;
−
padding-top: 0px;
+
    width : 125px;
−
float:left;
+
max-height:0px;
−
padding-bottom:0px; /*Introducing a padding between the li and the a give the illusion spaced items */
+
left: 0;
−
white-space:normal;
+
right: 0;
−
text-decoration:none;
+
visibility:hidden;
−
height:auto;
+
-moz-transition: .0s all .0s;
−
width: 13em;
+
-webkit-transition: .0s all .0s;
−
line-height: 1.5em;
+
transition: .0s all .0s;
 
}
 
}
−
 
+
#nav li:hover ul{
−
.nav td:hover ul{ /* Display the dropdown on hover */
+
visibility: visible;
−
left:0; /* Bring back on-screen when needed */
+
overflow: visible;
−
text-decoration:none;
+
max-height:30em;
 
}
 
}
−
 
+
#nav a{
−
.nav td:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
+
text-decoration:none;
−
background:#505050;
+
display:block;
−
text-decoration:none;
+
font-weight : bold;
 +
color : white;
 +
vertical-align : middle;
 
}
 
}
−
 
+
#nav li:hover a {
−
.nav td:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
+
        color : #ccff00;
−
text-decoration:none;
+
 
}
 
}
−
 
+
#nav li:hover ul .liste {
−
.nav td:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
+
        color : white;
−
background:#000;
+
−
text-decoration:none;
+
 
}
 
}
−
 
+
#nav li ul li .liste:hover {
−
.links {
+
    color : #ccff00;
−
background-color:#c5c5c5;
+
−
float:left;
+
−
width:125px;
+
−
height:100%;
+
−
padding-top:10px;
+
 
}
 
}
−
.links ul{
+
.side-by-side{
−
width:100%;
+
display: inline;
 
}
 
}
−
 
+
#nav li ul div{
−
 
+
display: inline;
−
 
+
−
#long {
+
−
width:10em;
+
 
}
 
}
−
#project_title a:hover { text-decoration: none; }
+
</style>
−
#project_title { margin: 0; padding: 0; }
+
−
--></style>
+
  
 +
<div class="navmenu">
 +
<div id="navmenubox">
 +
<ul id="nav" class = "col-md-10">
 +
<!--<li>
 +
<a id = "mainLogo" href="https://2015.igem.org/Team:MIT" title="MIT iGEM" target="_blank"><img src="https://static.igem.org/mediawiki/2015/6/61/Team-MIT-MainLogo1.png" height="45px">
 +
</a>
 +
</li>
 +
-->
 +
<li><a href="https://2015.igem.org/Team:MIT">Home</a></li>
  
−
<body>
+
<li><a href="https://2015.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Project</a>
−
<div style="margin-top:-50px;Background-color:#FFF"> <br><br><br></div>
+
<ul class = "side-by-side" style = "white-space: nowrap;">
−
<div id="project_header" style="margin-top: -1em; position:relative;align:center;">
+
<div style = "display: inline-block">
−
<img id="headerImage" src="https://static.igem.org/mediawiki/2014/5/59/MIT_monolith_header_image.png" border="0" width="1000" height="77" orgWidth="1000" orgHeight="77" usemap="#image-maps-2014-10-16-234534" alt="" />
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/Cellulose">Cellulose</a></li>
−
<map name="image-maps-2014-10-16-234534" id="ImageMapsCom-image-maps-2014-10-16-234534">
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/Chutch">C. Hutchinsonii</a></li>
−
<area  alt="" title="" href="https://www.facebook.com/mitigem2014" shape="rect" coords="887,17,935,61" style="outline:none;" target="_self"     />
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/Ecoli">E. Coli</a></li>
−
<area  alt="" title="" href="https://twitter.com/MIT_iGEM" shape="rect" coords="938,17,981,60" style="outline:none;" target="_self"     />
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/Coculture">The Co-Culture</a></li>
−
<area  alt="" title="" href="https://2014.igem.org" shape="rect" coords="797,7,874,69" style="outline:none;" target="_self"     />
+
</div>
−
<area  alt="" title="" href="https://2014.igem.org/Team:MIT" shape="rect" coords="0,0,794,77" style="outline:none;" target="_self"     />
+
<div style = "display: inline-block; vertical-align: top;">
−
<area shape="rect" coords="998,75,1000,77" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/Biodiesel">Biodiesel Production</a></li>
−
</map>
+
<li><a class = liste href="https://2015.igem.org/Team:MIT/PartsAndCircuits">Parts and Circuits</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Modeling">Modeling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Measurement">Measurement</a></li>
 +
</div>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Practices"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Policy + Practice</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Practices">Practices</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Economics">Economics</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Notebooks"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Notebooks</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/WetlabNotes">Wetlab Notes</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/DrylabNotes">Drylab Notes</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Medals">Medals</a></li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">About Us</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Team">Team Bios</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Acknowledgements">Acknowledgements</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Attributions">Attributions</a></li>
 +
</ul>
 +
            </li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Outreach"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Externals</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Collaborations">Collaborations</a></li>
 +
<li><a class = liste href="https://2014.igem.org/Team:MIT/InterlabStudy">Interlab Study</a></li>
 +
        </ul>
 +
            </li>
 +
</ul>
 +
<div class= "col-md-2">
 +
<div id = "logos">
 +
<div id="twittericon" class="sidelogos">
 +
<a href="http://twitter.com/MIT_iGEM" target="_blank">
 +
<img id="twitterimg" src="https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png" height="30px"/>
 +
<div id="twitapp">
 +
<a class="twitter-timeline" href="https://twitter.com/MIT_iGEM" data-widget-id="608663252705374209">@MIT_iGEM</a>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="facebookicon" class="sidelogos">
 +
<a href="https://www.facebook.com/MITiGEM" target="_blank">
 +
<img id="fblogo" src="https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png" height="30px"/>                      
 +
<div id="fbapp">
 +
<div class="fb-like-box" data-href="https://www.facebook.com/MITiGEM" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="igemlogo" class="sidelogos">
 +
<a href="https://2015.igem.org/Main_Page" title="iGEM 2015" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0a/Team_MIT_iGEM_logo.gif" height="30px">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
  
−
<div style="float:left; clear:left;  margin-top: -2.5em; z-index:1; position:relative;">
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  
−
</div>
+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  
 +
<script>
  
−
<div id="project_title" style="text-align: center; margin-top: -0.8em; float:left; z-index:1; position:relative;
+
$(document).ready(function(){
−
margin-left:3em;">
+
$('div #twittericon').mouseover(function(){
−
<a href="https://2014.igem.org/Team:MIT">
+
div = $('#twitapp');
−
<!--<h5 style="border: none; line-height: 1.2em; margin: 0; padding: 0; padding-top: 0.7em;">
+
div.show();
 +
}).mouseout(function(){
 +
div.hide();
 +
});
 +
});
  
−
Genetic Diagnosis and Treatment of Alzheimer's Disease
+
//On hover the twitter logo turns clear and the blue shows through
−
</h5>-->
+
$(document).ready(function(){
−
</a>
+
    $('#twitterimg').hover(function () {
−
</div></div>
+
        this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png";
−
<table class="nav">
+
     }, function () {
−
<tr>
+
        this.src = "https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png";
−
  <td><a href="https://2014.igem.org/Team:MIT">Home</a></td>
+
     });
−
  <td><a href="https://2014.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Our Project</a>
+
});
−
  <ul>
+
−
     <li><a href="https://2014.igem.org/Team:MIT/Project">Motivation</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Protein_sensor">Native Receptor</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/BCR">B-Cell Receptor</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/miRNA">miRNA Detection</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Treatment">Treatment Module</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Delivery">Delivery</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Modeling">Modeling</a></li>
+
−
  </ul>
+
−
  </td>
+
−
  <td><a href="https://2014.igem.org/Team:MIT/Parts"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Lab Work</a>
+
−
  <ul>
+
−
     <li><a href="https://2014.igem.org/Team:MIT/Parts">Parts</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Safety">Safety</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Notebook">Notebook</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Protocols">Protocols</a></li>
+
−
  </ul>
+
  
−
  </td>
+
//On hover faceboook logo turns blue (changes images)
−
  <td><a href="https://2014.igem.org/Team:MIT/Outreach"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Outreach</a>
+
$(document).ready(function(){
−
  <ul>
+
    $('#fblogo').hover(function () {
−
    <li><a href="https://2014.igem.org/Team:MIT/Outreach">Outreach</a></li>
+
        this.src = "https://static.igem.org/mediawiki/2015/2/20/Team-MIT-FacebookIcon2.png";
−
    <li><a href="https://2014.igem.org/Team:MIT/2014.igem.org/Team:MIT/Interviews">Interviews</a></li>
+
     }, function () {
−
     <li><a href="https://2014.igem.org/Wiki/2014.igem.org/Team:MIT/Survey">Survey</a></li>
+
        this.src = "https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png";
−
    <li><a href="https://2014.igem.org/Team:MIT/Manifold">DIY Vacuum Manifold</a></li>
+
     });
−
  </ul>
+
  });
−
  </td>
+
</script>
−
  <td><a href="https://2014.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> About Us</a>
+
−
  <ul>
+
−
     <li><a href="https://2014.igem.org/Team:MIT/Team">Student Bios</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Attributions">Acknowledgements</a></li>
+
−
    <li><a href="https://2014.igem.org/Team:MIT/Actually Attributions">Attributions</a></li>
+
−
    <li><a href="https://igem.org/Team.cgi?year=2014&team_name=MIT">Official iGEM page</a></li>
+
−
  </ul>
+
−
  </td>
+
−
  <td><a href="https://2014.igem.org/Team:MIT/Medals">Medals</a>
+
−
  </td>
+
−
  <tr>
+
−
</table>
+
−
 
+
−
<br />
+
−
 
+
−
</body>
+
−
</html>
+

Revision as of 13:53, 2 September 2015