"

From 2013.igem.org

<script> function rollout(id) {

 var hover;
 hover = document.getElementById(id).childNodes;
 for(var i=0, ii = hover.length; i < ii; i++) {
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({height:'300px'},1000);
    var hover2;
    hover2 = document.getElementById(hover[i].id).childNodes;
    for(var a=0, aa = hover2.length; a < aa; a++) {
      if(hover2[a].nodeName == "SPAN"){ 
          if(hover2[a].className == "content-box-hover") {
            $('#'+hover2[a].id).stop().animate();
            $('#'+hover2[a].id).animate({opacity:1},500);
          }
        if(hover2[a].className == "content-box-more") {
          $('#'+hover2[a].id).stop().animate();
          $('#'+hover2[a].id).animate({opacity:0},500);
        }
       }
    }
  }}
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({width:50},500);
  }}
}
$('#'+id).stop().animate();
$('#'+id).animate({height:'300px'},500);

} function rollin(id) {

var hover;
hover = document.getElementById(id).childNodes;
for(var i=0, ii = hover.length; i < ii; i++) {
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({height:'200px'},1000);
    var hover2;
    hover2 = document.getElementById(hover[i].id).childNodes;
    for(var a=0, aa = hover2.length; a < aa; a++) {
      if(hover2[a].nodeName == "SPAN"){ 
        if(hover2[a].className == "content-box-more") {
          $('#'+hover2[a].id).stop().animate();
          $('#'+hover2[a].id).animate({opacity:1},500);
        } 
          if(hover2[a].className == "content-box-hover") {
            $('#'+hover2[a].id).stop().animate();
            $('#'+hover2[a].id).animate({opacity:0},500);
          }
       }
    }
  }}
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({width:00},500);
  }}
 }
$('#'+id).stop().animate();
$('#'+id).animate({height:'200px'},500);
document.getElementById(id).style.fontWeight = "normal";

} function fadein() {

$('.menu-button').animate({height:'20px'},500);

} function fadeout() {

$('.menu-button').stop().animate();
$('.menu-button').animate({height:'0px'},500);
$('.menu-button').fadeOut(1);

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

1. page{

margin:0;
padding:0;

}

1. menu{

color:#000000;
margin:0 auto;
border-width: 5px 0 0 0;
border-style:solid;
border-color:black;
padding: 0 0 1px 0;
width:900px;
height:50px;

}

1. menu a{

color:#000000;
padding: 5px;

} .menu-button{

float:left;
margin-right: 10px;
font-size: 15px;
background-color:grey;
text-weight:bold;

}

1. content {

margin:0 auto;
padding:0;

}

1. content-top{

width:690px;
height:100px;
margin:0 auto;
font-size:14px;
text-align: center;

} .content-box-more{

font-weight:normal;

} .content-row{

padding:20px;
height:340px;
margin:0 auto;
align:center;
width:800px;

} .content-box{

float:left;
height:200px;
border-style:solid;
border-width:1px;
color:#ffffff;
margin:0 20px 0 20px;
text-align:center;
border-radius:10px;
opacity:0.75;
font-weight:normal;
width:350px;

} .content-box-sidemenu-right{

float:right;
width:0px;
background-color:black;
height:200px;

} .content-box-sidemenu-left{

float:left;
width:0px;
background-color:black;
height:200px;

} .content-box-text{

float:left;
width:300px;
background-color:grey;
height:200px;
opacity:1;

} .content-box-hover{

margin:0 auto;
padding:10px;
opacity:0;

} .content-box-more{

color:#ffffff;

} .mw-headline{

color:#ffffff;

} .editsection{

color:#ffffff;

} </style>