From 2013.igem.org

       <link rel="stylesheet" type="text/css" href="https://2012.igem.org/common/tablesorter/themes/groupparts/style.css" />
       <link rel="stylesheet" type="text/css" href="https://2012.igem.org/common/table_styles.css" />
       <link rel="stylesheet" type="text/css" href="https://2012.igem.org/forum/forum_styles.css" />

   var $current = $('#slides IMG.current');

   if ( $current.length == 0 ) $current = $('#slides IMG:last');
   var $next =  $current.next().length ? $current.next()
       : $('#slides IMG:first');

     $current.addClass('previous');
   $next.css({opacity: 0.0})
       .addClass('current')
       .animate({opacity: 1.0}, 2500, function() {
           $current.removeClass('current previous');
       });

var $navicurrent = $('.progress li.current');
if($navicurrent.length ==0) $navicurrent = $('.progress li:last');
var $navinext = $navicurrent.next().length ? $navicurrent.next() : $('.progress li:first');
$navicurrent.addClass('previous');
$navicurrent.removeClass('current previous');
$navinext.addClass('current').animate({opacity: 1.0}, 2500, function() {
       });

$('.progress li').click(function(){
   
	var $ncurrent = $(this);
       $('.progress li').removeClass('current').removeClass('previous');
       $('#slides IMG').removeClass('current').removeClass('previous'); 
       $ncurrent.addClass('current');
       var ncurrentindex = $ncurrent.index();

if( ncurrentindex=== 0) $current = $('#slides IMG:first');

       if(  ncurrentindex=== 1) $current = $('#slides IMG:eq(1)');
       if(  ncurrentindex=== 2) $current = $('#slides IMG:eq(2)');
       if(  ncurrentindex=== 3) $current = $('#slides IMG:last');
       $current.addClass('current');

});

} $(function() {

   setInterval( "slider()", 5000 );

});

$(document).ready(function(){

 $('a.lightbox').click(function(e) {
   $('body').css('display', 'inherit'); // hide scrollbars!

$('

')

    .css('opacity', '0')
     .animate({'opacity': '0.7'}, 'slow')
    .click(function(){
      removeLightbox();
     })
     .appendTo('body');

$('')

     .hide()
     .appendTo('body');

   $('<img>')
     .attr('src', $(this).attr('href'))
     .load(function() {
       positionLightboxImage();
     })
     .click(function() {
       removeLightbox();
     })
     .appendTo('#lightbox');

   return false;
 });

});

function positionLightboxImage() {

 var top = ($(window).height()  - $('#lightbox').height())/2;
 var left = ($(window).width() - $('#lightbox').width())/2;

 $('#lightbox')
   .css({
     'top': top,
     'left':left-80
   })
   .fadeIn();

}

function removeLightbox() {

 $('#overlay, #lightbox')
   .fadeOut('slow', function() {
     $(this).remove();
     $('body').css('overflow-y', 'auto'); // show scrollbars!
   });

}

</script> <style type="text/css">

globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%;

height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ }

content { z-index: 1; background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; top:-3px; margin-top: -45px !important;

height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ }

bodyContent { border: none; padding:0; margin:0; width:100%;

height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ }

top-section { z-index: 2; height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
p-logo { height:1px; overflow:hidden; display: none;}
search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}

.left-menu { width: 500px !important; display:block; margin-top:-80px; border: none; text-align: right;} .left-menu ul { border: none; }

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

.right-menu ul { border: none; width: 300px;}

footer-box { background-color: #216085; border: none; width: 850px; height: 30px; margin: -10px auto 0 auto; padding: 20px 0;}

.visualClear { display: none; }

footer { border: none; width: 850px; margin: 0 auto; padding: 0;}

.firstHeading { display: block;}

f-list a { color: #333; font-size: 10px;}
f-list a:hover { color: #666;}

.printfooter { display: none; }

footer ul { margin: 0; padding: 0;}
footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
search-controls { display:none; }

h3#siteSub { display: none;}

contentSub {display: none;}

p:first-child { display: block;} h1{border:none; width: 100%; clear: both;}

globalWrapper {

   position: relative;
   font-size: 127%;
   width: 850px //100%;
   margin: 0;
   padding: 0;
   padding-bottom: 10px;

background:url();
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% auto;

}

main-content {

   position: relative;
   width:  850px;
   margin: 0 auto;
   padding: 5px 5px 5px 5px;;
   background: transparent;
   color: black;

border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
line-height: 1.5em;

}

body { background-color: rgba(255,255,255,1); background-image: url('https://static.igem.org/mediawiki/2012/c/cc/UCD_Bg_1.jpg'); background-size: 100%; background-repeat: no-repeat; background-attachment:fixed;

   color: black;
   font: x-small sans-serif;
   margin: 0;
   padding: 0;

height:100%;

}

topmenubar {

   position: relative;
   white-space: nowrap;
   top: -3px;
   width: 850px;
   z-index: 5;
   font-family: sans-serif;
   font-size: 80%;
   line-height: 1em;

}

.topleft-menu, .topleft-menu a {

   left: 0px;
   text-align: right;
   text-transform: lowercase;

}

.topleft-menu:hover {

   color: white;
   background-color: #bbbbbb

} .topright-menu, .right-menu a {

   right: 0px;
   text-align: right;
   color: white;

}

topmenubar ul {

   color: #555555;
   list-style: none;

}

topmenubar li {

   display: inline;
   position: relative;
   cursor: pointer;
   padding-left: 0px;
   padding-right: 0px;

} .topleft-menu li a {

   padding: 0px 7px 0px 0px;

} .topleft-menu .selected {

color: white;

}

.left-menu .selected:hover {
color: #5555FF;
}

.topleft-menu:hover a {

   color: white;

}

newnavi {

       position:relative;
       height:42px;
       width: 850px;
       margin-left: -2px;
       display:block;
       background:transparent;

}

newnavi .newmenu {

       display:inline;
       overflow:hidden;
       padding:0px; 
       margin:2px solid transparent; 
       list-style-type:none; 
       height:24px;
       width: 107px;
       list-style-image:none;
       background: #004b85;

}

newnavi .newmenu li {

       float:right; 
       background: #004b85;
       text-align:center;

}

newnavi .newmenu .selected {

       background: #ba9108;

}

newnavi .newmenu li a {

text-align:center; vertical-align:middle; width:86px; padding:5px 10px 5px 10px; display:block; color:#fff; text-decoration:none; font:14px arial, verdana, sans-serif; font-weight: bold; }

newnavi .newmenu li:hover a {

       text-decoration:none;

}

newnavi .newmenu ul {

position:absolute; left:-9999px; top:-9999px; list-style-type:none; list-style-image:none; margin:0px; border:0px; padding:0px; background: #05bcea; }

newnavi .newmenu li:hover {

position:relative; background: #05bcea; }

newnavi .newmenu li:hover ul {

left:0px; top:26px; background: #05bcea; width:150px; opacity:1.0 ; z-index:4; }

newnavi .newmenu li:hover ul li {

       background: #05bcea;

}

newnavi .newmenu li:hover ul li a {

text-align:left; padding:5px 0px 5px 0px;display:block; font-size:12px; width:150px; text-indent:10px; color:#444; background-color: #05bcea; text-decoration:none; }

newnavi .newmenu li:hover ul li a:hover {

background: #05bcea; color:#ffffff; width:150px; }

newnavi .newmenu li ul li ul {

       height:40px;
       left:299px;
       top:-26px;
       margin: 0;

padding: 0; list-style: none; width: 150px;

       position:absolute;

display:none; }

newnavi .newmenu li ul li ul li {

position:relative;

background: #05bcea;

width: 150px;

}

newnavi .newmenu li ul li ul li a {

padding:5px 0px 5px 0px;display:block; font-size:12px; width:100px; text-indent:10px; color:#444; background-color: #05bcea; text-decoration:none; }

newnavi .newmenu li ul li:hover ul {

display:block; color:#ffffff; width:150px; background:transparent; }

newnavi .newmenu li ul li:hover ul li {

top:-25px; left:150px; margin-bottom:-1px; height:26px; }

newnavi .newmenu li ul li:hover ul li a {

padding:5px 0px 5px 0px;display:block; font-size:12px; text-indent:10px; color:#444; background-color: #05bcea; text-decoration:none;border:0px solid; }

slides {

   position:relative;
   height:280px;
   width: 840px

}

slides IMG {

       position:absolute;
       opacity:0.0;
       top:0px;    
       left:0px;
       z-index:1;

}

slides .current {

   z-index:3;
   opacity:1.0;

}

slides .previous {

   z-index:2;

}

.progress {

margin-top:-270px; margin-left:20px; position:absolute;

}

.progress li{ border:1px solid rgba(0,0,0,0.9); border-radius:3px; margin-left: 5px; float:left; display:block; position:relative; z-index:10; background-color:rgba(255,255,255,0.4); }

.progress li a{

   padding-left: 6px;
   padding-right: 6px;

}

.progress li a:hover {

text-decoration:none; }

.progress .current { background-color:white; }

myleftrightbox

{ position:relative; width:850px; float:left; background-color:transparent; margin-top: 0px; margin-left:3.75px solid transparent; margin-right:3.75px solid transparent; border-radius: 4px; padding: 0px; font: sans-serif; font-size: 13px; color: white; }

myleftrightbox .fourboxes