"

From 2010.igem.org

/*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ /* smart image enlarger starts here */ /* If your images are not linking to other pages leave the links as Otherwise enlarger won't work in IE6 */ .ienlarger { float: left; clear: none; /* set to left or right if needed */ padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ } .ienlarger a { display:block; text-decoration: none; /* add cursor:default; to this rule to disable the hand cursor */ } .ienlarger a:hover{ /* don't move this positioning to normal state */ position:relative; } .ienlarger span img { border: 1px solid #FFFFFF; /* adds a border around the image */ margin-bottom: 8px; /* pushes the text down from the image */ } .ienlarger a span { /* this is for the large image and the caption */ position: absolute; display:none; color: #FFCC00; /* caption text colour */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* caption text size */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .ienlarger img { /* leave or IE puts a border around links */ border-width: 0; } .ienlarger a:hover span { display:block; top: 50px; /* means the pop-up's top is 50px away from thumb's top */ left: 50px; /* means the pop-up's left is 90px far from the thumb's left */ z-index: 100; /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ /* If you want the pop-up open above the thumb, remove the top: 50px; and add bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ /* add cursor:default; to this rule to disable the hand cursor only for the large image */ } .resize_thumb { width: 150px; /* enter desired thumb width here */ height : auto; } /* smart image enlarger ends here */ /* Getting rid of IGEM elements */ #contentSub { display:none; } #siteSub { display:none; } /* #search-controls { color: white; display:none; } */ .firstHeading { display:none; } #search-controls { margin-top:30px; } #footer-box { display:none; } /* This is the bubblewrap code */ /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 120px; /* width of each image.*/ height: 60px; /* height of each image.*/ border: 0; margin-right: 0px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); } /* This is the REAL background to the whole page */ body{ background: -moz-linear-gradient(center top, #000000, #bb4444 25%, #44bb44 50%, #4444bb 75%, #000000); background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(25%, #bb4444), color-stop(50%, #44bb44), color-stop(75%, #4444bb), to(#000000)); color: white; } /* This is the next layer, on top of the body background */ #content{ background: black; color: white; } /* Code for the columns */ #contentwrapper{ float: left; width: 100%; } #contentcolumn{ margin-left: 25%; /*Set left margin to LeftColumnWidth*/ margin-right: 3%; } #leftcolumn{ float: left; width: 20%; margin-left: -97%; } #footer{ clear: left; width: 100%; padding-top: 4%; background: -moz-linear-gradient(bottom, #000000, transparent); background: -webkit-gradient(linear, center bottom, center top, from(#000000), to(transparent)); } .innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } /* Extra code to get an extra div to contain the columns inside the content */ #overall { background: -moz-linear-gradient(left, #000000, #ffffff 3%, #ffffff 96%, #000000 99%, #000000); background: -webkit-gradient(linear, left center, right center, from(#000000), color-stop(3%, #ffffff), color-stop(96%, #ffffff), color-stop(99%, #000000), to(#000000)); color: black; } /* Extra code to get the bottom three to behave */ #contentwrapper2{ float: left; width: 100%; } #contentcolumn2{ margin: 0 37.5% 0 37.5%; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/ background: #88ff88; -webkit-box-shadow: 5px 5px 8px #818181; -moz-box-shadow: 5px 5px 8px #818181; -moz-border-radius-topleft: 25px; -moz-border-radius-topright: 25px; -webkit-border-top-left-radius: 25px; -webkit-border-top-right-radius: 25px; } #leftcolumn2{ float: left; width: 25%; /*Width of left column in percentage*/ margin-left: -95%; background: #ff8888; -webkit-box-shadow: 5px 5px 8px #818181; -moz-box-shadow: 5px 5px 8px #818181; -moz-border-radius-topleft: 25px; -moz-border-radius-bottomright: 25px; -webkit-border-top-left-radius: 25px; -webkit-border-bottom-right-radius: 25px; } #rightcolumn2{ float: left; width: 25%; /*Width of right column*/ margin-left: -30%; /*Set margin to -(RightColumnWidth)*/ background: #8888ff; -webkit-box-shadow: 5px 5px 8px #818181; -moz-box-shadow: 5px 5px 8px #818181; -moz-border-radius-topright: 25px; -moz-border-radius-bottomleft: 25px; -webkit-border-top-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; } #maincontainer2{ clear: left; } .innertube2{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } .right { float:right; } .left { float:left; } .jqueryslidemenu{ font: bold 12px Verdana; background: #414141; width: 100%; } .jqueryslidemenu ul{ list-style-image:url("https://static.igem.org/mediawiki/2010/6/6e/UNAM-Genomics_Mexico_Spacer.gif"); list-style-type: square; margin: 0; padding: 0; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; }

This site is best viewed with a Webkit based Browser (eg: Google's Chrome, Apple's Safari),