Template:CM css

<html>
<head>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"></script>
<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 src="http://d2o0t5hpnwv4c1.cloudfront.net/004_Moo/tutorial/demo/sliding_effect.js"></script>
<script> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript">
$('#rightMenu a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 -250px)"}, 
			{duration:500})
		})
	.mouseout(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 0)"}, 
			{duration:500})
		})
</script>
	<script type="text/javascript">
	$(function() {
		$("#button").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
			}
		);
	});
$(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>
<!--[if IE]>
	<style>
#header {
 width: 900px;
}
</style>
<![endif]-->
<style type="text/css">
		.toggler { width: 500px; height: 200px; position: relative;}
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }


#header {
 position: relative;
 left: 2px;
 text-align: left;
 margin: 0px;
 width: 955px;
}

#header a {
 color: white;
 }

#content {
 background-color: transparent;
 border: none;
 }

.mainContent {
 width: 943px;
 position: absolute;
 padding:5px;
 top: 160px;
 font-size: 14px;
 margin:5px;
 }

#groupparts {
 position:relative;
 left: 21px;
 top: 5px;
 }

.baby {
 padding: 5px;
 font-family: Arial Black, Gadget, sans-serif;
 font-size: medium;
 }

.bodybaby {
 padding: 5px;
 font-family: Arial Black, Gadget, sans-serif;
 font-size: medium;
 border-bottom: 2px solid black;
 color: black;
 }

.bodybaby a {
 color: black;
 }

.sidep {
 display: inline;
 background-color: #boc4de;
 width: 170px;
 float: right;
 font-size: x-small;
 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;
 }

#unique {
 margin: 5px 21px !important;
 border: none !important;
 background-color: white;
 }

#freedom {
 width: 105px;
 position: relative;
 left: -20px;
 top: 8px;
 display: block;
 list-style: none;
 text-align: left;
 color: black;
 background-color: honeydew;
 font-family: Osaka, verdana, Sans-Serif;
 font-size: 16px;
}
#freedom li a {
 text-align: left;
 padding-left: 7px;
 color: #330066
 }

#freedom li a:hover {
  background-color: #b2b2cc;

}
#freedom li a.selected {
 position: relative;
 left: 10px;
 color: black;
}

.tabContainer {
 position: relative;
 top: 0px;
 left: 4px;
 height: 23px;
 width: 99%;
}
.tabContainer p {
  text-align:left;
 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 {
background:none repeat scroll 0 0 transparent;
border:medium none;
color:#000066;
font-size:100%;
font-weight:bold;
margin:1px 10px 0;
}

#search-controls {
 display: block;
 background: none;
 position: absolute;
 top: -100px;
 left: -50px;}

.left-menu {
 width: 300px;
 margin-top: -75px;
 border: none; }

.left-menu ul {
 border: none; }

#searchform {
 background: none;
 display: block;
 float: right;}

#menubar.right-menu {
 width: 300px;
 display: block;
 float: left;
 margin-top: -75px;
 border: none; }


#top-section {
 height: 0px;
 margin-top: -5px;
 margin-bottom: 0 !important;
 margin-left: auto;
 padding:0;
 border: none;}

#p-logo {
 height: 0px;
 overflow: hidden;
 display: none;
 border:  }

#footer {
 border: none;
 background-color: transparent;
 margin: 0;
 padding: 0; }

#footer-box {
 border:none;
 background-color: transparent;
}

.firstHeading {
 display: none; }

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.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;
}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

#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 */

#navwrapper {
	position: absolute;
	width: 955px;
}

#topnav {
	height: 65px;
	overflow: hidden;
}

#topnav li {
	list-style: none;
	float: left;
}

#topnav li a {
	display: block;
	width: 183px;
	height: 65px;
	margin-right: 2px;
	background-color: #2e2e2e;
 font-family: "Arial", Verdana, sans-serif;
 font-size: medium;
	line-height: 1.25em;
	color: #fff;
        font-weight: 900;
}

#topnav li a.last {
	margin-right: 0px;
}

#topnav li.over ul,
#topnav li:hover ul,
body.about #topnav li.about ul,
body.people #topnav li.people ul,
body.academics #topnav li.academics ul,
body.notebook #topnav li.notebook ul,
body.contributions #topnav li.contributions ul {
	display: block;
}

body.about #topnav li.about ul,
body.people #topnav li.people ul,
body.academics #topnav li.academics ul,
body.notebook #topnav li.notebook ul,
body.contributions #topnav li.contributions ul {
	z-index: 1;
}

#topnav li.over ul,
#topnav li:hover ul {
	z-index: 100;
}

#topnav li ul {
	display: none;
	clear: both;
	position: absolute;
	top: 65px;
	left: 0px;
	width: 950px;
	overflow: hidden;
}

#topnav li li {
	float: none;
	display: block;
}

#topnav li a:hover,
#topnav li a:active {
	text-decoration: none;
}

#topnav li li {
	display: block;
	float: left;
	padding-top: 11px;
	padding-bottom: 9px;
}

#topnav li li a {
	margin: 0;
	padding: 0 8px;
	background-color: transparent;
	height: auto;
	width: auto;
	font-weight: normal;
        font-size: small;
        border-right: 1px solid white;
}

#topnav li li.last a {
	background-image: none;
	padding-right: 0px;
        border-right: none;
}

#topnav li li a:hover,
#topnav li li a:active,
#topnav li li.sel a {
	text-transform: uppercase;
}



/* specific styles */

#topnav li.about a:hover,
#topnav li.about a:active,
#topnav li.about ul,
body.about #topnav li.about a:link,
body.about #topnav li.about a:visited {
	background-color: #8b0000;
}

#topnav li.about ul {
	width: 923px;
}

#topnav li.people a:hover,
#topnav li.people a:active,
#topnav li.people ul,
body.people #topnav li.people a:link,
body.people #topnav li.people a:visited,
body.people #sidenav .sel a:link,
body.people #sidenav .sel a:visited,
body.people #sidenav a:hover,
body.people #sidenav a:active,
body.people #sidenav li.sel li a:hover,
body.people #sidenav li.sel li a:active {
	background-color: #e6881a;
}

#topnav li.people ul {
	width: 848px;
	padding-left: 75px;
}

#topnav li.academics a:hover,
#topnav li.academics a:active,
#topnav li.academics ul,
body.academics #topnav li.academics a:link,
body.academics #topnav li.academics a:visited,
body.academics #sidenav li.sel a:link,
body.academics #sidenav li.sel a:visited,
body.academics #sidenav li.sel li a:hover,
body.academics #sidenav li.sel li a:active,
body.academics #sidenav li a:hover,
body.academics #sidenav li a:active,
body.academics #sidenav li.sel li a:hover,
body.academics #sidenav li.sel li a:active {
	background-color: #2e2e91;
}

#topnav li.academics ul {
	width: 698px;
	padding-left: 225px;
}

#topnav li.notebook a:hover,
#topnav li.notebook a:active,
#topnav li.notebook ul,
body.notebook #topnav li.notebook a:link,
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;
}

#topnav li.notebook ul {
	width: 463px;
	padding-left: 460px;
}

#topnav li.contributions a:hover,
#topnav li.contributions a:active,
#topnav li.contributions ul,
body.contributions #topnav li.contributions a:link,
body.contributions #topnav li.contributions a:visited,
body.contributions #sidenav li.sel a:link,
body.contributions #sidenav li.sel a:visited,
body.contributions #sidenav li a:hover,
body.contributions #sidenav li a:active,
body.contributions #sidenav li.sel li a:hover,
body.contributions #sidenav li.sel li a:active {
	background-color: #4ca14c;
}

#topnav li.contributions ul {
	width: 293px;
	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;}


/* Thanks to MIT ChemE dept. Your site is lovely. */

</style>


</head>
<body>
<div id="header">
<div id="whitespace" style="background-color: transparent; height: 60px; font-size: large; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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">
		<ul id="topnav">
			<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>
				<li class="last"><a href="https://2010.igem.org/Team:MIT">Home</a></li>
			</ul></li>
			<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>
				<li><a href="https://2010.igem.org/Team:MIT_undergraduates">Undergraduates</a></li>
				<li><a href="https://2010.igem.org/Team:MIT_instructors">Instructors</a></li>
				<li><a href="https://2010.igem.org/Team:MIT_advisors">Advisors</a></li>
				<li><a href="https://2010.igem.org/Team:MIT_fun">Fun</a></li>
                                <li><a href="https://2010.igem.org/Team:MIT_gallery">Gallery</a></li>
                                <li class="last"><a href="https://2010.igem.org/Team:MIT_sponsors">Sponsors</a></li>
			</ul></li>
			<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>
				<li><a href="https://2010.igem.org/Team:MIT_overview">Overview</a></li>
				<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_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 class="last"><a href="https://2010.igem.org/Team:MIT_acknowledgements">Acknowledgments</a></li>
		    </ul>

			</li>
			<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>
				<li><a href="https://2010.igem.org/Team:MIT_mm">Materials & Methods</a></li>
				<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>
			<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>
				<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>
			</ul></li>

		</ul>
</div>
<div id="whitespace" style="height: 100px;"></div>
</div>    

</body>
</html>