Template:CM css
From 2010.igem.org
(Difference between revisions)
(284 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
<link rel="stylesheet" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" media="screen" /> | <link rel="stylesheet" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" media="screen" /> | ||
<script type="text/javascript" src="http://www.google.com/jsapi"></script> | <script type="text/javascript" src="http://www.google.com/jsapi"></script> | ||
- | + | <script src="http://d2o0t5hpnwv4c1.cloudfront.net/004_Moo/tutorial/demo/sliding_effect.js"></script> | |
- | <script src="http:// | + | |
- | + | ||
<script> google.load("jquery", "1.4.2"); </script> | <script> google.load("jquery", "1.4.2"); </script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$('#rightMenu a') | $('#rightMenu a') | ||
Line 39: | Line 32: | ||
); | ); | ||
}); | }); | ||
+ | $(document).ready(function(){ | ||
+ | if($("#nav")) { | ||
+ | $("#nav dd").hide(); | ||
+ | $("#nav dt b").click(function() { | ||
+ | if(this.className.indexOf("clicked") != -1) { | ||
+ | $(this).parent().next().slideUp(200); | ||
+ | $(this).removeClass("clicked"); | ||
+ | } | ||
+ | else { | ||
+ | $("#nav dt b").removeClass(); | ||
+ | $(this).addClass("clicked"); | ||
+ | $("#nav dd:visible").slideUp(200); | ||
+ | $(this).parent().next().slideDown(500); | ||
+ | } | ||
+ | return false; | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
</script> | </script> | ||
+ | <!--[if IE]> | ||
+ | <style> | ||
+ | #header { | ||
+ | width: 900px; | ||
+ | } | ||
+ | </style> | ||
+ | <![endif]--> | ||
<style type="text/css"> | <style type="text/css"> | ||
.toggler { width: 500px; height: 200px; position: relative;} | .toggler { width: 500px; height: 200px; position: relative;} | ||
Line 49: | Line 68: | ||
#header { | #header { | ||
position: relative; | position: relative; | ||
- | left: | + | left: 2px; |
text-align: left; | text-align: left; | ||
margin: 0px; | margin: 0px; | ||
Line 60: | Line 79: | ||
#content { | #content { | ||
- | + | background-color: transparent; | |
+ | border: none; | ||
} | } | ||
Line 72: | Line 92: | ||
} | } | ||
- | # | + | #groupparts { |
- | + | position:relative; | |
- | + | left: 21px; | |
- | font-family: | + | top: 5px; |
+ | } | ||
+ | |||
+ | .baby { | ||
+ | padding: 5px; | ||
+ | font-family: Arial Black, Gadget, sans-serif; | ||
font-size: medium; | font-size: medium; | ||
} | } | ||
- | + | .bodybaby { | |
padding: 5px; | padding: 5px; | ||
- | font-family: | + | font-family: Arial Black, Gadget, sans-serif; |
font-size: medium; | font-size: medium; | ||
- | border-bottom: | + | border-bottom: 2px solid black; |
color: black; | color: black; | ||
} | } | ||
- | + | .bodybaby a { | |
- | color: | + | color: black; |
} | } | ||
Line 98: | Line 123: | ||
font-size: x-small; | font-size: x-small; | ||
border: 1px solid #b0c4de; | border: 1px solid #b0c4de; | ||
+ | } | ||
+ | |||
+ | .outline { | ||
+ | display: inline; | ||
+ | padding: 5px; | ||
+ | background-color: #boc4de; | ||
+ | width: 250px; | ||
+ | float: left; | ||
+ | font-size: x-small; | ||
+ | border: 1px solid #b0c4de; | ||
+ | } | ||
+ | |||
+ | #procedure, | ||
+ | #procedure a { | ||
+ | display: relative; | ||
+ | text-decoration: none; | ||
+ | color: black; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #procedure a:hover { | ||
+ | color: white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .bolded { | ||
+ | font-size: 16px; | ||
} | } | ||
Line 110: | Line 162: | ||
position: relative; | position: relative; | ||
left: -20px; | left: -20px; | ||
- | top: | + | top: 8px; |
display: block; | display: block; | ||
list-style: none; | list-style: none; | ||
text-align: left; | text-align: left; | ||
- | color: | + | color: black; |
- | background-color: | + | background-color: honeydew; |
- | font-family: | + | font-family: Osaka, verdana, Sans-Serif; |
font-size: 16px; | font-size: 16px; | ||
} | } | ||
Line 122: | Line 174: | ||
text-align: left; | text-align: left; | ||
padding-left: 7px; | padding-left: 7px; | ||
+ | color: #330066 | ||
} | } | ||
#freedom li a:hover { | #freedom li a:hover { | ||
background-color: #b2b2cc; | background-color: #b2b2cc; | ||
+ | |||
} | } | ||
#freedom li a.selected { | #freedom li a.selected { | ||
Line 144: | Line 198: | ||
top: 1px; | top: 1px; | ||
} | } | ||
+ | |||
+ | /* ================================================================ | ||
+ | This copyright notice must be untouched at all times. | ||
+ | Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved. | ||
+ | =================================================================== */ | ||
+ | |||
+ | #nav {padding:0; margin:0; background: transparent;; width: 230px} | ||
+ | #nav a:hover {text-decoration:underline;} | ||
+ | #nav dt b, #nav dt a {display:block; font-weight:normal; font-size:14px; color:#fff; padding: 5px 10px; cursor:pointer; width:230px; background-color: #016b9d;} | ||
+ | #nav dt a {color:#000; text-decoration:none;} | ||
+ | #nav dd {padding:0; margin:0;} | ||
+ | #nav dd ul {padding:0; margin:0; list-style:none;} | ||
+ | #nav dd ul li {padding-left:20px; width:230px} | ||
+ | #nav dd ul li a {font-size:12px; color:#000; text-decoration:none;} | ||
+ | |||
+ | |||
input.searchButton { | input.searchButton { | ||
Line 181: | Line 251: | ||
border: none; } | border: none; } | ||
- | |||
- | |||
#top-section { | #top-section { | ||
Line 200: | Line 268: | ||
#footer { | #footer { | ||
border: none; | border: none; | ||
- | + | background-color: transparent; | |
margin: 0; | margin: 0; | ||
padding: 0; } | padding: 0; } | ||
+ | |||
+ | #footer-box { | ||
+ | border:none; | ||
+ | background-color: transparent; | ||
+ | } | ||
.firstHeading { | .firstHeading { | ||
Line 212: | Line 285: | ||
.indent1 { padding-left: 1em; } | .indent1 { padding-left: 1em; } | ||
.indent2 { padding-left: 2em; } | .indent2 { padding-left: 2em; } | ||
+ | |||
+ | /* sidenav styling */ | ||
+ | #sidenav { | ||
+ | clear: both; | ||
+ | line-height: 50%; | ||
+ | } | ||
+ | |||
+ | #sidenav li { | ||
+ | list-style-type: none; | ||
+ | display: block; | ||
+ | margin: 8px 0px; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | #sidenav li li { | ||
+ | padding-left: 16px; | ||
+ | } | ||
+ | |||
+ | #sidenav li a { | ||
+ | color: #333; | ||
+ | padding: 0px 4px 0px 10px; | ||
+ | background-color: transparent; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #sidenav ul a { | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | #sidenav li li a, | ||
+ | #sidenav li.sel li a { | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | #sidenav li.sel a, | ||
+ | #sidenav li a:hover, | ||
+ | #sidenav li a:active, | ||
+ | #sidenav.col li.sel ul li a:hover, | ||
+ | #sidenav.col li.sel ul li a:active { | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
Line 380: | Line 495: | ||
} | } | ||
- | + | #stones { | |
+ | position: fixed; | ||
+ | top: 45px; | ||
+ | left: 0px; | ||
+ | width: 43px; | ||
+ | padding: 2px; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2010/3/34/Transparency50.png'); | ||
+ | background-repeat: repeat-y; | ||
+ | } | ||
/* MIT ChemE Menu */ | /* MIT ChemE Menu */ | ||
Line 390: | Line 513: | ||
#topnav { | #topnav { | ||
- | height: | + | height: 65px; |
overflow: hidden; | overflow: hidden; | ||
} | } | ||
Line 401: | Line 524: | ||
#topnav li a { | #topnav li a { | ||
display: block; | display: block; | ||
- | width: | + | width: 183px; |
- | height: | + | height: 65px; |
margin-right: 2px; | margin-right: 2px; | ||
background-color: #2e2e2e; | background-color: #2e2e2e; | ||
- | + | font-family: "Arial", Verdana, sans-serif; | |
+ | font-size: medium; | ||
line-height: 1.25em; | line-height: 1.25em; | ||
color: #fff; | color: #fff; | ||
+ | font-weight: 900; | ||
} | } | ||
Line 419: | Line 544: | ||
body.people #topnav li.people ul, | body.people #topnav li.people ul, | ||
body.academics #topnav li.academics ul, | body.academics #topnav li.academics ul, | ||
- | body. | + | body.notebook #topnav li.notebook ul, |
- | body. | + | body.contributions #topnav li.contributions ul { |
display: block; | display: block; | ||
} | } | ||
Line 427: | Line 552: | ||
body.people #topnav li.people ul, | body.people #topnav li.people ul, | ||
body.academics #topnav li.academics ul, | body.academics #topnav li.academics ul, | ||
- | body. | + | body.notebook #topnav li.notebook ul, |
- | body. | + | body.contributions #topnav li.contributions ul { |
z-index: 1; | z-index: 1; | ||
} | } | ||
Line 441: | Line 566: | ||
clear: both; | clear: both; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 65px; |
left: 0px; | left: 0px; | ||
width: 950px; | width: 950px; | ||
Line 471: | Line 596: | ||
width: auto; | width: auto; | ||
font-weight: normal; | font-weight: normal; | ||
- | + | font-size: small; | |
- | + | border-right: 1px solid white; | |
} | } | ||
Line 478: | Line 603: | ||
background-image: none; | background-image: none; | ||
padding-right: 0px; | padding-right: 0px; | ||
+ | border-right: none; | ||
} | } | ||
Line 483: | Line 609: | ||
#topnav li li a:active, | #topnav li li a:active, | ||
#topnav li li.sel a { | #topnav li li.sel a { | ||
- | + | text-transform: uppercase; | |
} | } | ||
Line 499: | Line 625: | ||
#topnav li.about ul { | #topnav li.about ul { | ||
- | width: | + | width: 923px; |
} | } | ||
Line 517: | Line 643: | ||
#topnav li.people ul { | #topnav li.people ul { | ||
- | width: | + | width: 848px; |
padding-left: 75px; | padding-left: 75px; | ||
} | } | ||
Line 538: | Line 664: | ||
#topnav li.academics ul { | #topnav li.academics ul { | ||
- | width: | + | width: 698px; |
padding-left: 225px; | padding-left: 225px; | ||
} | } | ||
- | #topnav li. | + | #topnav li.notebook a:hover, |
- | #topnav li. | + | #topnav li.notebook a:active, |
- | #topnav li. | + | #topnav li.notebook ul, |
- | body. | + | body.notebook #topnav li.notebook a:link, |
- | body. | + | body.notebook #topnav li.notebook a:visited, |
- | + | #sidenav li.sel a:link, | |
- | + | #sidenav li.sel a:visited, | |
- | + | #sidenav li.sel li a:hover, | |
- | + | #sidenav li.sel li a:active, | |
- | + | #sidenav li a:hover, | |
- | + | #sidenav li a:active, | |
- | + | #sidenav li.sel li a:hover, | |
- | + | #sidenav li.sel li a:active { | |
background-color: #016b9d; | background-color: #016b9d; | ||
} | } | ||
- | #topnav li. | + | #topnav li.notebook ul { |
- | width: | + | width: 463px; |
- | padding-left: | + | padding-left: 460px; |
} | } | ||
- | #topnav li. | + | #topnav li.contributions a:hover, |
- | #topnav li. | + | #topnav li.contributions a:active, |
- | #topnav li. | + | #topnav li.contributions ul, |
- | body. | + | body.contributions #topnav li.contributions a:link, |
- | body. | + | body.contributions #topnav li.contributions a:visited, |
- | body. | + | body.contributions #sidenav li.sel a:link, |
- | body. | + | body.contributions #sidenav li.sel a:visited, |
- | body. | + | body.contributions #sidenav li a:hover, |
- | body. | + | body.contributions #sidenav li a:active, |
- | body. | + | body.contributions #sidenav li.sel li a:hover, |
- | body. | + | body.contributions #sidenav li.sel li a:active { |
- | background-color: # | + | background-color: #4ca14c; |
} | } | ||
- | #topnav li. | + | #topnav li.contributions ul { |
- | width: | + | width: 293px; |
- | padding-left: | + | padding-left: 630px; |
} | } | ||
+ | |||
+ | #specialnav {padding:0; margin:0; background: transparent;; width: 230px} | ||
+ | #specialnav a:hover {text-decoration:underline;} | ||
+ | #specialnav dt b, #nav dt a {display:block; font-weight:normal; font-size:14px; color:#fff; padding: 5px 10px; cursor:pointer; width:230px; background-color: #016b9d;} | ||
+ | #specialnav dt a {color:#000; text-decoration:none;} | ||
+ | #specialnav dd {padding:0; margin:0;} | ||
+ | #specialnav dd ul {padding:0; margin:0; list-style:none;} | ||
+ | #specialnav dd ul li {padding-left:20px; width:230px} | ||
+ | #specialnav dd ul li a {font-size:12px; color:#000; text-decoration:none;} | ||
Line 586: | Line 721: | ||
</style> | </style> | ||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
<div id="header"> | <div id="header"> | ||
+ | <div id="whitespace" style="background-color: transparent; height: 60px; font-size: large; color: white;"> <a href="http://mit.edu"><img style="vertical-align: -35px;" src="http://web.mit.edu/img/MIT_logo.gif"> <b style="vertical-align:-15px;">iGEM 2010</b></a></div> | ||
<div id="navwrapper"> | <div id="navwrapper"> | ||
<ul id="topnav"> | <ul id="topnav"> | ||
- | <li class="about"><a href="https://2010.igem.org/Team:MIT">< | + | <li class="about"><a href="https://2010.igem.org/Team:MIT"><table style="padding: 5px; background-color: transparent; color:white;"><tr><td>Home</td></table> |
+ | </a> | ||
<ul> | <ul> | ||
- | <li><a href="https://2010.igem.org/Team:MIT">Home</a></li> | + | <li class="last"><a href="https://2010.igem.org/Team:MIT">Home</a></li> |
</ul></li> | </ul></li> | ||
- | <li class="people"><a href="https://2010.igem.org/Team: | + | <li class="people"><a href="https://2010.igem.org/Team:MIT/Team"><table style="padding: 5px; background-color: transparent; color:white;"><tr><td>Team</td></table> |
+ | </a> | ||
<ul> | <ul> | ||
Line 606: | Line 746: | ||
<li class="last"><a href="https://2010.igem.org/Team:MIT_sponsors">Sponsors</a></li> | <li class="last"><a href="https://2010.igem.org/Team:MIT_sponsors">Sponsors</a></li> | ||
</ul></li> | </ul></li> | ||
- | <li class="academics"><a href="https://2010.igem.org/Team:MIT_overview">< | + | <li class="academics"><a href="https://2010.igem.org/Team:MIT_overview"><table style="padding: 5px; background-color: transparent; color:white;"><tr><td>Project</td></table> |
+ | </a> | ||
<ul> | <ul> | ||
<li><a href="https://2010.igem.org/Team:MIT_overview">Overview</a></li> | <li><a href="https://2010.igem.org/Team:MIT_overview">Overview</a></li> | ||
- | <li><a href="https://2010.igem.org/Team:MIT_toggle"> | + | <li><a href="https://2010.igem.org/Team:MIT_toggle">Bacteria</a></li> |
<li><a href="https://2010.igem.org/Team:MIT_phage">Phage</a></li> | <li><a href="https://2010.igem.org/Team:MIT_phage">Phage</a></li> | ||
<li><a href="https://2010.igem.org/Team:MIT_mammalian">Mammalian</a></li> | <li><a href="https://2010.igem.org/Team:MIT_mammalian">Mammalian</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:MIT_results">Results</a></li> | ||
<li><a href="https://2010.igem.org/Team:MIT_summary">Summary</a></li> | <li><a href="https://2010.igem.org/Team:MIT_summary">Summary</a></li> | ||
- | <li class="last"><a href="https://2010.igem.org/Team:MIT_acknowledgements"> | + | <li class="last"><a href="https://2010.igem.org/Team:MIT_acknowledgements">Acknowledgments</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
- | <li class=" | + | <li class="notebook"><a href="https://2010.igem.org/Team:MIT/Notebook"><table style="padding: 5px; background-color: transparent; color:white;"><tr><td>Notebook</td></table> |
+ | </a> | ||
<ul> | <ul> | ||
<li><a href="https://2010.igem.org/Team:MIT_mm">Materials & Methods</a></li> | <li><a href="https://2010.igem.org/Team:MIT_mm">Materials & Methods</a></li> | ||
- | <li><a href=" | + | <li><a href="https://2010.igem.org/Team:MIT_parts">Parts</a></li> |
- | + | <li class="last"><a href ="https://2010.igem.org/Team:MIT_safety">Safety</a></li> | |
- | + | ||
</ul></li> | </ul></li> | ||
- | <li class=" | + | <li class="contributions"><a href="https://2010.igem.org/Team:MIT_contributions" class="last"><table style="padding: 5px; background-color: transparent; color:white;"><tr><td>Beyond Biobrick</td></table></a> |
<ul> | <ul> | ||
- | <li><a href=" | + | <li><a href="https://2010.igem.org/Team:MIT_mammalian_Standard">New Mammalian Standard</a></li> |
- | + | <li class="last"><a href="https://2010.igem.org/Team:MIT_bioethics">Bioethics</a></li> | |
- | + | ||
- | + | ||
- | <li class="last"><a href=" | + | |
</ul></li> | </ul></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | <div id="whitespace" style="height: | + | <div id="whitespace" style="height: 100px;"></div> |
- | </div> | + | </div> |
+ | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 02:53, 28 October 2010