|
|
(161 intermediate revisions not shown) |
Line 1: |
Line 1: |
| __NOTOC__<html lang="en"> | | __NOTOC__<html lang="en"> |
| + | |
| <head> | | <head> |
| + | <!-- wiki hacks --> |
| <style type="text/css"> | | <style type="text/css"> |
- | body {background: #FFFFFF;
| + | #globalwrapper { |
- | background-image: url('https://static.igem.org/mediawiki/2011/c/cb/Bg1.jpg');
| + | width:975px; |
- | background-position: center;
| + | padding:20px 0px; |
- | background-repeat: repeat-y;}
| + | margin: 0 auto; |
- | | + | background-color:#ffffff; |
- | #p-logo {height:1px; overflow:hidden; display: none;} | + | height:100%; |
- | | + | |
- | #top-section {
| + | |
- | background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
| + | |
- | background-position: top;
| + | |
- | height:230px ;
| + | |
- | background-repeat: no-repeat;
| + | |
- | border-left-width:0px;
| + | |
- | border-right-width:0px;
| + | |
- | | + | |
| } | | } |
- | | + | .firstHeading { |
- | #content {
| + | height:0px; |
- | border-left-width:0px;
| + | visibility:hidden; |
- | border-right-width:0px;
| + | |
| } | | } |
- | | + | body { |
- | #menubar { background-color: white; }
| + | background: #E8E8E8; |
- | | + | background-image: url('https://static.igem.org/mediawiki/2011/b/be/Background-gradient.jpg'); |
- | | + | background-position: center; |
- | #menubar ul li a { color: black; }
| + | background-repeat: repeat-y; |
- | | + | |
- | | + | |
- | .right-menu li a {
| + | |
- | color: black;
| + | |
- | background-color: white; | + | |
| } | | } |
- | </style>
| + | #p-logo { |
- | | + | height:1px; overflow:hidden; display: none; |
- | | + | |
- | <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. */
| + | |
- | | + | |
- | .kwicks {
| + | |
- | /* recommended styles for kwicks ul container */
| + | |
- | list-style: none;
| + | |
- | position: relative;
| + | |
- | margin: 0px;
| + | |
- | padding: 0px;
| + | |
- | | + | |
- | margin-left:auto;
| + | |
- | margin-right:auto;
| + | |
- | padding-top:1px;
| + | |
- | padding-bottom:1px;
| + | |
| } | | } |
| + | #top-section { |
| + | |
| + | background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg'); |
| + | background-position: top; |
| + | height:200px ; |
| + | background-repeat: no-repeat; |
| + | border-width:0px; |
| + | border-top-width:1px; |
| | | |
- | .kwicks li{
| |
- | /* these are required, but the values are up to you (must be pixel) */
| |
- | width: 190px;
| |
- | 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;
| |
| } | | } |
| | | |
| | | |
- | .kwicks.horizontal li {
| + | #content { |
- | /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
| + | border-left-width:0px; |
- | margin-right: 5px; /*Set to same as spacing option. */
| + | border-right-width:0px; |
- | float: left;
| + | padding:5px; |
| + | width:965px; |
| } | | } |
- | .kwicks.vertical li{
| + | #menubar { |
- | /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
| + | background-color: white; |
- | margin-bottom: 5px; /*Set to same as spacing option. */
| + | |
| } | | } |
- | | + | #menubar ul li a { |
- | | + | color: #999999; } |
- | #kwick_1 { | + | .right-menu li a { |
- | background-color: #828282;
| + | color: black; |
- | background-color: #616161;
| + | background-color: white; |
- | /* background-color: #53b388;*/
| + | |
- | } | + | |
- | #kwick_1.active {
| + | |
- | background-color: #B3B3B3;
| + | |
- | background-color: #828282;
| + | |
- | }
| + | |
- | #kwick_2 {
| + | |
- | background-color: #5a69a9;
| + | |
- | background-color: #828282;
| + | |
- | background-color: #616161;
| + | |
- | }
| + | |
- | #kwick_2.active {
| + | |
- | background-color: #B3B3B3;
| + | |
- | background-color: #828282;
| + | |
- | }
| + | |
- | #kwick_3 {
| + | |
- | background-color: #c26468;
| + | |
- | background-color: #828282;
| + | |
- | background-color: #616161;
| + | |
- | }
| + | |
- | #kwick_3.active {
| + | |
- | background-color: #B3B3B3;
| + | |
- | background-color: #828282;
| + | |
- | }
| + | |
- | #kwick_4 {
| + | |
- | background-color: #bf7cc7;
| + | |
- | background-color: #828282;
| + | |
- | background-color: #616161;
| + | |
- | }
| + | |
- | #kwick_4.active {
| + | |
- | background-color: #B3B3B3;
| + | |
- | background-color: #828282;
| + | |
- | }
| + | |
- | #kwick_5 {
| + | |
- | background-color: #FFAD42;
| + | |
- | background-color: #828282;
| + | |
- | background-color: #616161;
| + | |
- | }
| + | |
- | #kwick_5.active {
| + | |
- | background-color: #B3B3B3;
| + | |
- | background-color: #828282;
| + | |
| } | | } |
| | | |
- | .kwicks.horizontal #kwick_5 { | + | #navbar |
- | margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
| + | ul.navbar { |
- | }
| + | float:left; |
- | .kwicks.vertical #kwick_5 {
| + | width:100%; |
- | margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
| + | padding:0; |
| + | margin:0; |
| + | list-style-type:none; |
| } | | } |
| | | |
- | .section { | + | ul.navbar a { |
- | | + | float:left; |
- | color:white;
| + | text-align:center; |
- | font-weight:normal;
| + | width:7em; |
- | border-right-style:solid;
| + | text-decoration:none; |
- | border-width:1px;
| + | color:white; |
- | width:185px;
| + | background-color:#1A2B32; |
- | float:left;
| + | padding:0.2em 0.6em; |
- | /* padding-top: 30px;*/
| + | border-right:1px solid white; |
- | padding-left:5px;
| + | |
- | text-transform:uppercase;
| + | |
- | font-size: 15px;
| + | |
- | letter-spacing:.2em;
| + | |
- | position:absolute;
| + | |
- | /* top:50%;
| + | |
- | height:4.5em;
| + | |
- | margin-top:-2.25em;*/
| + | |
- | text-align:center;
| + | |
- | | + | |
| } | | } |
| + | ul.navbar a:hover {background-color:#A3ABAE;} |
| + | ul.navbar li {display:inline;} |
| | | |
- | .section table, .section-links table {
| + | #long { |
- | color: white;
| + | width:10em; |
- | width: 100%;
| + | |
- | height: 50px;
| + | |
- | text-align: center;
| + | |
- | background-color: #616161;
| + | |
| } | | } |
| | | |
- | .section table:hover, .section-links table:hover {
| |
- | color: white;
| |
- | background-color: #828282;
| |
| | | |
| + | .navbar { |
| + | padding:0 20px; |
| } | | } |
| | | |
- | .section td, .section-links td {
| |
- | vertical-align: middle;
| |
- | }
| |
- |
| |
- | .section-contain {
| |
- | position:relative;
| |
- | width:100%;height:100%;
| |
- | }
| |
- |
| |
- |
| |
- | .section-links {
| |
- | position:absolute;
| |
- | margin-left:195px;
| |
- | /* padding:5px;*/
| |
- | /* top:15%;*/
| |
- |
| |
- | font-size:12px;
| |
- | color:white;
| |
- | width: 190px;
| |
- | text-align:center;
| |
- | }
| |
| </style> | | </style> |
| + | </head> |
| | | |
- |
| |
- |
| |
- | <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 type="text/javascript">
| |
- | $().ready(function() {
| |
- | $('.kwicks').kwicks({
| |
- | min : 140,
| |
- | spacing : 2,
| |
- | sticky : false,
| |
- | defaultKwick : 0,
| |
- | });
| |
- | });
| |
- | </script>
| |
- | </head>
| |
| <body> | | <body> |
| | | |
| | | |
- | <div id="navigation"> | + | <!--navigation menu--> |
- | | + | <ul class="navbar"> |
- | <ul class="kwicks horizontal" > | + | <li><a href="https://2011.igem.org/Team:MIT">HOME</a></li> |
- |
| + | <li><a href="https://2011.igem.org/Team:MIT/Project/">PROJECT</a></li> |
- | <li id="kwick_1"> | + | <li><a href="https://2011.igem.org/Team:MIT/Results/">DATA</a></li> |
- | <a href=#> | + | <li><a href="https://2011.igem.org/Team:MIT/Notebook/">NOTEBOOK</a></li> |
- | <div class="section">
| + | <li><a href="https://2011.igem.org/Team:MIT/Tools/">MODEL</a></li> |
- | <table><tr><td>Home</td></tr></table>
| + | <li><a href="https://2011.igem.org/Team:MIT/Partners/">PARTNERS</a></li> |
- | </div></a> | + | <li><a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">TEAM</a></li> |
- | <a href=#> | + | <li><a id="long" href="https://2011.igem.org/Team:MIT/HumanPractices/">HUMAN PRACTICES</a></li> |
- | <div class="section-contain">
| + | |
- | <div class="section-links">
| + | |
- | <table><tr><td>A brief introduction to iGEM</td></tr></table>
| + | |
- | </div>
| + | |
- | </div></a>
| + | |
- | </li> | + | |
- |
| + | |
- | <li id="kwick_2"> | + | |
- | <a href=#> | + | |
- | <div class="section">
| + | |
- | <table><tr><td>Team</td></tr></table>
| + | |
- | </div></a> | + | |
- | <a href=#> | + | |
- | <div class="section-contain">
| + | |
- | <div class="section-links">
| + | |
- | <table><tr><td>The people behind it all</td></tr></table>
| + | |
- | </div>
| + | |
- | </div></a>
| + | |
- | </li> | + | |
- | | + | |
- | <li id="kwick_3"> | + | |
- | <a href=#> | + | |
- | <div class="section">
| + | |
- | <table><tr><td>Project</td></tr></table>
| + | |
- | </div></a>
| + | |
- | <a href=#> | + | |
- | <div class="section-contain">
| + | |
- | <div class="section-links">
| + | |
- | <table><tr><td>Overview of project ideas and results</td></tr></table>
| + | |
- | </div>
| + | |
- | </div></a>
| + | |
- | </li> | + | |
- | | + | |
- | <li id="kwick_4"> | + | |
- | <a href=#> | + | |
- | <div class="section"><table><tr><td>Notebook</td></tr></table>
| + | |
- | </div></a>
| + | |
- | <a href=#>
| + | |
- | <div class="section-contain">
| + | |
- | <div class="section-links">
| + | |
- | <table><tr><td>Our day to day results</td></tr></table>
| + | |
- | </div>
| + | |
- | </div></a>
| + | |
- | </li> | + | |
- | | + | |
- | <li id="kwick_5"> | + | |
- | <a href=#> | + | |
- | <div class="section"><table><tr><td>Beyond iGEM</td></tr></table>
| + | |
- | </div></a>
| + | |
- | <a href=#>
| + | |
- | <div class="section-contain">
| + | |
- | <div class="section-links">
| + | |
- | <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
| + | |
- | </div>
| + | |
- | </div></a>
| + | |
- | </li> | + | |
- | | + | |
| </ul> | | </ul> |
- | </div>
| |
| | | |
| </body> | | </body> |
| + | </html> |