"

From 2012.igem.org

/*------------------------- Layout styles ------------------------*/ body{ margin:0; background:url(../images/DNA_Background.png); } .page{ background:url(../images/header.png) no-repeat center top; }

/*------------------------- Font ------------------------*/ @font-face {

   font-family: 'RokkittRegular';
   src: url('rokkitt-regular-webfont.eot');
   src: url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('rokkitt-regular-webfont.woff') format('woff'),
        url('rokkitt-regular-webfont.ttf') format('truetype'),
        url('rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
   font-weight: normal;
   font-style: normal;

}

/*------------------------- Header ------------------------*/ .header{ background:url(../images/divider.png) no-repeat center 124px; width:962px; margin:0 auto; height:126px; padding:0px 0px 0; } .header a#logo{ display:block; float:left; outline:none; } .header a#logo img{ border:0; } .header ul{ margin:0; list-style:none; padding:100px 0 0; float:right; } .header ul li{ float:left; margin:0 0 0 36px; } .header ul li.selected a,.header ul li a:hover{ color:#f78117; } .header ul li a{ font-size:16px; text-decoration:none; color:#5e5e5e; font-family: 'RokkittRegular'; outline:none; }

/*------------------------- Body ------------------------*/ .body{ background:url(../images/body.png); width:962px; margin: 0px auto; padding:0 0px; overflow:hidden; } .body div#featured{ background:url(../images/DNA.png) no-repeat right top; height:448px; padding:0 0 17px; } .body div#featured h3{ color:#f78117; font-size:36px; font-family: 'RokkittRegular'; margin:0 0 30px; width:490px; padding:100px 0 0; font-weight:normal; } .body div#featured p{ width:400px; color:#5d5d5d; font-family: 'RokkittRegular'; font-size:16px; line-height:25px; text-shadow: 0 1px 0 #fcfcfc; text-align:justify; margin:0; } .body div#featured input{ background:url(../images/interface.jpg) no-repeat; border:0;

   height:48px;
   width:216px;

font-family: 'RokkittRegular'; color:#fff; font-size:30px; margin:28px 0 0 125px; cursor:pointer; outline:none; } .body ul.blog{ list-style:none; margin:40px 0 0; padding:0 0 50px; background:url(../images/separator.jpg) no-repeat center top; overflow:hidden; } .body ul.blog li:first-child{ margin:60px 0 0; } .body ul.blog li{ float:left; background:url(../images/interface.jpg) no-repeat 0 -86px!important; margin:60px 0 0 48px; height:400px; padding:0; } .body ul.blog li div{ width:281px; height:380px; text-align:center; padding: 8px 0 20px 0; float:none; margin:0; background:none; } .body ul.blog li div a img{ border:0; margin:0 0 0 -3px; } .body ul.blog li div a img:hover{ filter:alpha(opacity=80); opacity:0.8; } .body ul.blog li div p{ width:258px; text-align:justify; color:#828081; font-family: 'RokkittRegular'; margin:17px 0 0 10px; line-height:20px; font-size:14px; background:none; padding:0; } .body ul.blog li div a:first-child{ margin:0; padding:0; background:none; width:auto; } .body ul.blog li div a:hover{ color:#F78117; } .body ul.blog li div a{ color:#606060; font-family: 'RokkittRegular'; font-style:italic; text-decoration:none; padding:98px 0 0; margin:32px auto 0; display:block; width: 150px; background:url(../images/button-more.jpg) no-repeat center top; outline:none; font-size:16px; font-weight:normal; text-shadow: 0 1px 0 #fcfcfc; } .body h3{ font-family: 'RokkittRegular'; font-size:16px; font-weight:bold; color:#636363; margin:15px 0 0; line-height:21px; } .body p{ font-family: 'RokkittRegular'; font-size:16px; text-align:justify; color:#636363; margin:0 0 20px; line-height:21px; } .body p a{ outline:none; color:#636363; } .body ul{ list-style:none;

   margin:0;
   padding:0;

overflow:hidden; } .body ul li:first-child{ background:none; padding:0 0 30px; } .body ul li{ overflow:hidden; background:url(../images/separator.jpg) no-repeat center top; padding:30px 0; } .body ul li div.featured{ background:url(../images/interface.jpg) no-repeat 0 -68px; width:281px; height:292px; text-align: center; margin:0; } .body ul li div.featured img{ margin:10px 0 0 -3px; border:0; } .body ul li div.featured ul{ overflow:hidden; margin:2px 0 0 10px;

} .body ul li div.featured ul li:first-child{ margin:0; } .body ul li div.featured ul li{ float:left; margin:0 0 0 18px; background:none; padding:0; } .body ul li div.featured ul li a{ padding:0; } .body ul li div.featured ul li a img{ margin:0; } .body ul li div.featured ul li a img:hover{ filter:alpha(opacity=80); opacity:0.8; } .body ul li div.featured a{ clear:both; display:block; font-size:13px; font-family: 'RokkittRegular'; text-decoration:none; color:#8a8889; font-weight:bold; padding:5px 0 0; width:auto; outline:none; } .body ul li div{ float:left; margin:0 0 0 50px; width:609px; background:url(../images/button-more.jpg) no-repeat left bottom; } .body ul li div h3{ margin:0; font-size:20px; font-weight:bold; font-family: 'RokkittRegular'; color:#f28220; line-height:22px; } .body ul li div p{ line-height:22px; font-family: 'RokkittRegular'; font-size:14px; color:#5D5D5D; padding:0 0 90px; margin:0; } .body ul.paging{ margin:15px 0 10px 210px; } .body ul.paging li{ float:left; padding:0 5px; background:none; } .body ul.paging li a{ text-decoration:none; color:#ff7e0d; font-family: arial; font-size:12px; } .body ul.paging li a:hover{ color:#5D5D5D; }

/*------------------------- Footer ------------------------*/ .footer{ width:940px; background:url(../images/footer.png) no-repeat center top; padding:65px 10px 207px; margin:0 auto; overflow:hidden; } .footer ul{ list-style:none; margin:0 0 0 60px; padding:0; overflow:hidden; float:left; } .footer ul li:first-child a{ border:none; padding:0 6px 0 0; } .footer ul li{ float:left; } .footer ul li a:hover{ color:#F78117; } .footer ul li a{ border-width: 1px; border-color:#5b5b5b; border-style: none none none solid; color:#5b5b5b; font-size:10px; font-family: Trebuchet MS; text-decoration:none; font-weight:bold; padding:0 6px; outline:none; } .footer p{ color:#5b5b5b; font-size:10px; font-family: Trebuchet MS; font-weight:bold; float:left; margin:6px 0 0 135px; } .footer div.connect{ float:left; margin:0 0 0 92px; } .footer div.connect a{ float:left; outline:none; } .footer div.connect a#facebook{ width:27px; height:28px; display:block; text-indent:-9999px; background:url(../images/icons.gif) no-repeat; } .footer div.connect a#twitter{ width:36px; height:28px; display:block; text-indent:-9999px; background:url(../images/icons.gif) no-repeat 0 -48px; margin:0 0 0 68px; } .footer div.connect a#vimeo{ width:32px; height:28px; display:block; text-indent:-9999px; background:url(../images/icons.gif) no-repeat 0 -96px; margin:0 0 0 73px; }