Template:MIT-header

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
__NOTOC__<html lang="en">  
__NOTOC__<html lang="en">  
<head>
<head>
 +
<!-- wiki hacks -->
<style type="text/css">
<style type="text/css">
.firstHeading {
.firstHeading {
-
      height:0px;
+
    height:0px;
-
      visibility:hidden;
+
    visibility:hidden;
}
}
-
 
+
body {
-
body {background: #E8E8E8;
+
    background: #E8E8E8;
-
      background-image: url('https://static.igem.org/mediawiki/2011/b/be/Background-gradient.jpg');
+
    background-image: url('https://static.igem.org/mediawiki/2011/b/be/Background-gradient.jpg');
-
      background-position: center;
+
    background-position: center;
-
      background-repeat: repeat-y;
+
    background-repeat: repeat-y;
 +
}
 +
#p-logo {
 +
    height:1px; overflow:hidden; display: none;
}
}
-
 
-
#p-logo {height:1px; overflow:hidden; display: none;}
 
-
 
#top-section {
#top-section {
-
        background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
+
    background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
-
        background-position: top;
+
    background-position: top;
-
height:200px ;
+
    height:200px ;
-
        background-repeat: no-repeat;
+
    background-repeat: no-repeat;
-
        border-left-width:0px;
+
    border-width:0px;
-
        border-right-width:0px;
+
    border-top-width:1px;
-
        border-bottom-width:0px;
+
}
}
-
 
#content {
#content {
-
        border-left-width:0px;
+
    border-left-width:0px;
-
        border-right-width:0px;
+
    border-right-width:0px;
 +
    padding:5px;
 +
    width:965px;
}
}
-
 
+
#menubar {  
-
#menubar { background-color: white; }
+
    background-color: white;  
-
 
+
}
-
 
+
#menubar ul li a {  
-
#menubar ul li a { color: #999999; }
+
    color: #999999; }
-
 
+
    .right-menu li a {
-
 
+
    color: black;
-
.right-menu li a {
+
    background-color: white;
-
color: black;
+
-
background-color: white;
+
}
}
</style>
</style>
-
 
+
<!-- kwicks style sheet -->
<style>
<style>
/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
-
 
.kwicks {
.kwicks {
-
/* recommended styles for kwicks ul container */
+
    /* recommended styles for kwicks ul container */
-
list-style: none;
+
    list-style: none;
-
position: relative;
+
    position: relative;
-
margin: 0px;
+
    margin: 0px;
-
padding: 0px;
+
    padding: 1px 0px;
-
margin-left:auto;
+
    margin-left:auto;
-
margin-right:auto;
+
    margin-right:auto;
-
padding-top:1px;
+
}
-
padding-bottom:1px;
+
.kwicks ul{
 +
    margin:0px;
}
}
-
 
.kwicks li{
.kwicks li{
-
/* these are required, but the values are up to you (must be pixel) */
+
    /* these are required, but the values are up to you (must be pixel) */
-
width: 190px;
+
    width: 135px;
-
height: 50px;
+
    height: 50px;
-
 
+
-
/*do not change these */
+
-
display: block;
+
-
overflow: hidden;
+
-
padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
+
-
margin:0;
+
-
font-family:'century gothic','lucida sans unicode', sans-serif;
+
-
 
+
 +
    /*do not change these */
 +
    display: block;
 +
    overflow: hidden;
 +
    padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
 +
    margin:0;
 +
    font-family:'century gothic','lucida sans unicode', sans-serif;
}
}
-
 
-
 
.kwicks.horizontal li {
.kwicks.horizontal li {
-
/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
+
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
-
margin-right: 5px; /*Set to same as spacing option. */
+
    margin-right: 5px; /*Set to same as spacing option. */
-
float: left;
+
    float: left;
}
}
.kwicks.vertical  li{
.kwicks.vertical  li{
-
/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
+
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
-
margin-bottom: 5px; /*Set to same as spacing option. */
+
    margin-bottom: 5px; /*Set to same as spacing option. */
}
}
-
 
-
 
#kwick_1 {  
#kwick_1 {  
-
background-color: #828282;
 
-
background-color: #616161;
 
-
background-color: #ffffff;
 
-
 
-
/* background-color: #53b388;*/
 
}
}
#kwick_1.active {
#kwick_1.active {
-
background-color: #B3B3B3;
+
    }
-
background-color: #828282;
+
-
background-color: #ffffff;
+
-
}
+
#kwick_2 {
#kwick_2 {
-
background-color: #5a69a9;
 
-
background-color: #828282;
 
-
background-color: #616161;
 
-
background-color: #ffffff;
 
}
}
#kwick_2.active {
#kwick_2.active {
-
background-color: #B3B3B3;
 
-
background-color: #828282;
 
-
background-color: #ffffff;
 
}
}
#kwick_3 {
#kwick_3 {
-
background-color: #c26468;
 
-
background-color: #828282;
 
-
background-color: #616161;
 
-
background-color: #ffffff;
 
}
}
#kwick_3.active {
#kwick_3.active {
-
background-color: #B3B3B3;
 
-
background-color: #828282;
 
-
background-color: #ffffff;
 
}
}
#kwick_4 {  
#kwick_4 {  
-
background-color: #bf7cc7;
 
-
background-color: #828282;
 
-
background-color: #616161;
 
-
background-color: #ffffff;
 
}
}
#kwick_4.active {
#kwick_4.active {
-
background-color: #B3B3B3;
 
-
background-color: #828282;
 
-
background-color: #ffffff;
 
}
}
#kwick_5 {
#kwick_5 {
-
background-color: #FFAD42;
 
-
background-color: #828282;
 
-
background-color: #616161;
 
-
background-color: #ffffff;
 
}
}
#kwick_5.active {
#kwick_5.active {
-
background-color: #B3B3B3;
+
}
-
background-color: #828282;
+
#kwick_6 {
-
background-color: #ffffff;
+
}
 +
#kwick_6.active {
 +
}
 +
#kwick_7 {
 +
}
 +
#kwick_7.active {
}
}
-
.kwicks.horizontal #kwick_5 {
+
.kwicks.horizontal #kwick_7 {
-
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
+
}
}
-
.kwicks.vertical #kwick_5 {
+
.kwicks.vertical #kwick_7 {
-
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
+
    margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}
}
 +
/*!--custom css for kwicks*/
.section {
.section {
-
color:#333333;
+
    border:solid 1px #999;  
-
font-weight:normal;
+
    width:130px;/*5px less than kwicks li width*/
-
border-right-style:solid;
+
    float:left;
-
border-width:1px;
+
    font-size: 16px;
-
        border-color: #999999;
+
    letter-spacing:.05em;
-
width:185px;
+
    position:absolute;
-
float:left;
+
-
padding-left:5px;
+
-
text-transform:uppercase;
+
-
font-size: 18px;
+
-
letter-spacing:.2em;
+
-
position:absolute;
+
-
text-align:center;
+
-
 
+
}
}
-
 
+
.section table {
-
.section table, .section-links table {
+
background-color: #4D4D4D;
-
        color: #333333;
+
-
width: 100%;
+
-
height: 50px;
+
-
text-align: center;
+
-
        background-color: #616161;
+
-
        background-color: transparent;
+
}
}
-
.section table:hover, .section-links table:hover, {
+
.section table, .section-description table {
-
        color: #333333;
+
    color: #fff;
-
        background-color: #828282;
+
    width: 100%;
-
        background-color: transparent;
+
    height: 49px;
 +
    text-align: center;
}
}
-
.section td, .section-links td {
+
.section-description table {
-
vertical-align: middle;
+
color: #333;
}
}
-
 
+
.section td, .section-description td {
-
.section-contain {
+
    vertical-align: middle;
-
position:relative;
+
-
width:100%;height:100%;
+
}
}
-
 
+
.section-description {
-
 
+
    margin-left:145px;
-
.section-links {
+
}
-
position:absolute;
+
#navigation {
-
margin-left:195px;
+
    padding-left:5px;
-
/* padding:5px;*/
+
    padding-bottom:0px;
-
/* top:15%;*/
+
    border-bottom:1px solid #999;
-
 
+
-
font-size:12px;
+
-
color:white;
+
-
width: 190px;
+
-
text-align:center;
+
}
}
</style>
</style>
-
 
-
 
<script src="https://2011.igem.org/Team:MIT/js/kwicks?action=raw&ctype=text/javascript" type="text/javascript" />
<script src="https://2011.igem.org/Team:MIT/js/kwicks?action=raw&ctype=text/javascript" type="text/javascript" />
<script> google.load("jquery", "1.2.6"); </script>
<script> google.load("jquery", "1.2.6"); </script>
-
<script type="text/javascript">
+
    <script type="text/javascript">
-
$().ready(function() {
+
        $().ready(function() {
-
$('.kwicks').kwicks({
+
    $('.kwicks').kwicks({
-
min : 140,
+
                max : 300,
-
spacing : 2,
+
                spacing : 2,
-
sticky : false,
+
                sticky : false,
-
defaultKwick : 0,
+
                defaultKwick : 0,
-
});
+
                duration: 200,
-
});
+
              });
-
</script>
+
        });
 +
    </script>
</head>
</head>
<body>
<body>
-
 
+
<!-- I know the layout is stupid, but it was the easiest way to vertically center the description.-->
<div id="navigation">
<div id="navigation">
-
 
+
<ul class="kwicks horizontal" >
-
<ul class="kwicks horizontal" >
+
-
+
<li id="kwick_1">
<li id="kwick_1">
<a href="https://2011.igem.org/Team:MIT">
<a href="https://2011.igem.org/Team:MIT">
     <div class="section">
     <div class="section">
-
     <table><tr><td>Home</td></tr></table>
+
     <table><tr><td>HOME</td></tr></table>
</div></a>
</div></a>
<a href="https://2011.igem.org/Team:MIT">
<a href="https://2011.igem.org/Team:MIT">
-
     <div class="section-contain">
+
     <div class="section-description">
-
    <div class="section-links">
+
     <table><tr><td>A brief introduction to iGEM</td></tr></table>
     <table><tr><td>A brief introduction to iGEM</td></tr></table>
-
</div>
 
</div></a>
</div></a>
</li>
</li>
Line 243: Line 182:
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
     <div class="section">
     <div class="section">
-
     <table><tr><td>Team</td></tr></table>
+
     <table><tr><td>TEAM</td></tr></table>
</div></a>
</div></a>
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
-
     <div class="section-contain">
+
     <div class="section-description">
-
    <div class="section-links">
+
     <table><tr><td>The people behind it all</td></tr></table>
     <table><tr><td>The people behind it all</td></tr></table>
-
</div>
 
</div></a>
</div></a>
</li>
</li>
Line 256: Line 193:
<a href="https://2011.igem.org/Team:MIT/Project/">
<a href="https://2011.igem.org/Team:MIT/Project/">
     <div class="section">
     <div class="section">
-
     <table><tr><td>Project</td></tr></table>
+
     <table><tr><td>PROJECT</td></tr></table>
</div></a>
</div></a>
<a href="https://2011.igem.org/Team:MIT/Project/">
<a href="https://2011.igem.org/Team:MIT/Project/">
-
     <div class="section-contain">
+
     <div class="section-description">
-
    <div class="section-links">
+
     <table><tr><td>Overview of project ideas</td></tr></table>
-
     <table><tr><td>Overview of project ideas and results</td></tr></table>
+
-
</div>
+
</div></a>
</div></a>
</li>
</li>
<li id="kwick_4">
<li id="kwick_4">
 +
<a href="https://2011.igem.org/Team:MIT/Project/">
 +
    <div class="section">
 +
    <table><tr><td>NOTEBOOK</td></tr></table>
 +
</div></a>
 +
<a href="https://2011.igem.org/Team:MIT/Project/">
 +
    <div class="section-description">
 +
    <table><tr><td>Overview of project ideas</td></tr></table>
 +
</div></a>
 +
</li>
 +
 +
<li id="kwick_5">
<a href="https://2011.igem.org/Team:MIT/nocontent">
<a href="https://2011.igem.org/Team:MIT/nocontent">
-
     <div class="section"><table><tr><td>Results</td></tr></table>
+
     <div class="section">
 +
    <table><tr><td>RESULTS</td></tr></table>
</div></a>
</div></a>
<a href="https://2011.igem.org/Team:MIT/nocontent">
<a href="https://2011.igem.org/Team:MIT/nocontent">
-
     <div class="section-contain">
+
     <div class="section-description">
-
    <div class="section-links">
+
     <table><tr><td>Overall results</td></tr></table>
-
     <table><tr><td>Our day to day results</td></tr></table>
+
-
</div>
+
</div></a>
</div></a>
</li>
</li>
-
<li id="kwick_5">
+
<li id="kwick_6">
<a href="https://2011.igem.org/Team:MIT/nocontent">
<a href="https://2011.igem.org/Team:MIT/nocontent">
-
     <div class="section"><table><tr><td>Beyond iGEM</td></tr></table>
+
     <div class="section">
 +
    <table><tr><td>SAFETY</td></tr></table>
 +
</div></a>
 +
<a href="https://2011.igem.org/Team:MIT/nocontent">
 +
    <div class="section-description">
 +
    <table><tr><td>Our safety practices</td></tr></table>
 +
</div></a>
 +
</li>
 +
 
 +
<li id="kwick_7">
 +
<a href="https://2011.igem.org/Team:MIT/nocontent">
 +
    <div class="section">
 +
    <table><tr><td>PARTNERS</td></tr></table>
</div></a>
</div></a>
<a href="https://2011.igem.org/Team:MIT/nocontent">
<a href="https://2011.igem.org/Team:MIT/nocontent">
-
     <div class="section-contain">
+
     <div class="section-description">
-
    <div class="section-links">
+
     <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
     <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
-
</div>
 
</div></a>
</div></a>
</li>
</li>

Revision as of 17:12, 14 August 2011

Retrieved from "http://2011.igem.org/Template:MIT-header"