Team:Fudan D/css/style.css

From 2012.igem.org

Revision as of 16:18, 25 September 2012 by Chocolatenw (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* Torn v.1.2

  • /

/* IMPORTS ------------------------------------------------------------*/

@import url('reset.css');

@import url('social-icons.css');

/* HACKS ------------------------------------------------------------*/

.clear{ clear:both; height:1px; }

.inv{ display:none; }

/* prettyPhoto fix */ .pp_description, .currentTextHolder{ color: #606060; }

/* TOOLTIP ------------------------------------------------------------*/

.tooltip, .tooltip-right, .tooltip-bottom, .tooltip-left { display:none; font-size:12px; height:70px; width:160px; padding:25px; color: #ffffff; line-height: 1.3em; z-index: 600; }

.tooltip {background:transparent url(../img/tooltip.png);} .tooltip-right {background:transparent url(../img/tooltip-right.png);} .tooltip-bottom {background:transparent url(../img/tooltip-bottom.png);} .tooltip-left {background:transparent url(../img/tooltip-left.png);}

/* GENERAL ------------------------------------------------------------*/

html{ height: 100%; }

body { line-height: 1; 

	font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 100%; height: 100%; background: #1f1f1f url(../img/bgs/strips-bold.png); color: #1f1f1f; }

.wrapper-header{ width: 800px; position: absolute; top: 0px; left: 200px;

}

  1. header{

position: relative; width: 800px; height: 135px; font-size: 14px; z-index: 10; }

.torn-top{ position: absolute; height: 6px; width: 100%; top: 130px; background: url(../img/borders/torn-top.png) repeat-x bottom ; z-index: 130; }

  1. logo{

position: absolute; top: 20px; left: -5px; }

  1. main{

position: relative; width: 100%; min-height: 700px; font-size: 14px; background: white; padding-top: 22px; }

.wrapper{ width: 800px; margin-left: 20px; position: relative; overflow: hidden; }

.page-title-holder{ width: 100%; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px #ccc dashed; }

.page-title{ font-size: 40px; color: #1f1f1f; margin-left: 10px; }

.page-subtitle{ font-size: 26px; color: #555555; margin-left: 10px; }


.page-title-holder > .page-title, .page-title-holder > .page-subtitle{ margin-left: 30px; }

.page-title-holder .link-button{ margin-left: 30px; }

h1{ font-size: 40px;}

h2{ font-size: 36px;}

h3{ font-size: 30px;}

h4{ font-size: 26px;}

h5{ font-size: 20px;}

h6{ font-size: 16px;}

h7{ font-family:Mistral; font-size: 20px; text-transform: none; } h8{font-family:"Staccato222 BT"; font-size:25px; } h9{font-family:"Copperplate Gothic Light"; font-size:17px; font-weight:700; color:#FEC709; }

h1, h2, h3, h4, h5, h6{ margin-bottom: .0em; }

a{ text-decoration: none; color: #fec709; }

.headline, .custom, .title .big{ word-spacing: 0.2em; }

div.headline{ font-size: 32px; line-height: 1.5em; color: #fff; width: 960px; text-transform: uppercase; text-align: center; text-shadow: #000 1px 1px 1px; margin-bottom: 20px; }

.title{ display: block; overflow: hidden; color: #665d4e; height: 90px; width: 960px; margin: 0 auto 0px auto; background: url(../img/title-bg.png) no-repeat; color: #12262d; }

.sub-header{ font-size: 30px; }

.title span.big{ display: block; float: left; font-size: 24px; margin: 22px 0px 0px 25px; }

.title span.small{ display: block; float: left; font-size: 14px; margin-left: 15px; margin-top: 31px; }

a.more{ display: block; overflow: hidden; color: #fff; font-size: 14px; line-height: 1.3em; text-decoration: none; }

a.more:hover{ color: white; }

.separator{ border-top: 1px solid #e2e6e7; margin-bottom: 1.5em; }

.top-gap{ margin-top:20px; }

/* page-content--------------------------------------------------------*/

.page-content{ overflow: visible; width: 950px; margin: 10px 10px 20px 10px; line-height: 1.5em; }

.page-content p{ margin-bottom: 18px; }

/* page-introduction--------------------------------------------------------*/

.page-introduction{ overflow: visible; width: 950px; margin: 10px 10px 20px 10px; line-height: 1.5em; }

.page-introduction p{ margin-bottom: 18px; }

/* page-contact--------------------------------------------------------*/

.page-contact{ overflow: hidden; width: 960px; margin: 10px 10px 20px 10px; line-height: 1.5em; }

.page-contact p{ margin-bottom: 18px; }


/* COLUMNS LAYOUT----------------------------------------------------------*/

.one-half, .one-third, .two-third, .three-fourth, .one-fourth { float:left; margin-right:20px; position:relative; }

.one-half{width: 458px;}

.one-third{width: 300px;}

.one-fourth{width: 220px;}

.two-third{width: 620px;}

.three-fourth{width: 700px; }

.last { clear:right; margin-right:0 !important; }

/* LINK BUTTON ------------------------------------------------------------*/

.link-button{ display: table; height: 31px; padding-left: 5px; font-size: 20px; margin-top: 10px; color: #1f1f1f; background: url(../img/yellow/sprites.png) -40px -170px no-repeat; }

.link-button span{ display: block; height: 100% ; padding-top: 8px; padding-right: 10px; padding-left: 5px; background: url(../img/yellow/sprites.png) no-repeat right -132px; }

/* SEARCH ------------------------------------------------------------*/

.top-search{ position: absolute; left: 800px; top: 20px; }

form#searchform{ position: relative; width: 230px; height: 50px; }

form#searchform input#s{ color: #1f1f1f; font-size: 14px; width: 210px; height: 26px; margin: 0px 0px 5px 0px; padding: 0px 5px 0px 5px; border: 0; background: #d2d2d2 url(../img/bgs/strips-thin.png); }


form#searchform input#searchsubmit{ position: absolute; top: 0px; left: 220px; width: 33px; height: 31px; border: 0px; background: url(../img/yellow/sprites.png) no-repeat transparent -100px -92px; }

form#searchform input#searchsubmit:hover{ background-position: -137px -92px; }

/* STYLED ------------------------------------------------------------*/

img.left-align{ float:left; margin:8px 18px 18px 0; display: block; }

img.right-align{ float:right; margin:0px 0px 0px 10px; display: block; }

img.boxed{ background: white; padding: 5px; border: 1px solid #cccccc; }

img.border{ border: 2px solid white; }

.shadow-img{ display: block; padding-bottom: 22px; background: url(../img/thumb-shadow.png) no-repeat bottom center ; }

.dropcap { display:block; float:left; font-size:40px; line-height:40px; margin:0 8px 0 0; }

.highlight { background:yellow; color:#111111; padding:1px 4px; }

.pullquote-right, .pullquote-left { border-left: #555555 2px solid; float:right; font-size:16px; line-height:1.5em; margin: 20px 0px 20px 20px; padding:0 0 0 20px; width:33%; font-style: italic; }

.pullquote-left { float:left; margin: 20px 20px 20px 0px; }

.pullquote-right{ border-left: none; border-right: #555555 2px solid; }


/* TABLE ------------------------------------------------------------*/

table, td, th { vertical-align:middle; }

table { border-collapse:separate; border-spacing:0; border-top:1px solid white; margin-bottom:28px; width:100%; text-align: left; }

th{ border-top:5px solid #555555; color: #ffffff; padding:10px; text-transform:uppercase; background-color: #1f1f1f; }

td{ padding:10px; }

td, th{ border-bottom: 1px solid #1f1f1f; }

/* INFO BOXES ------------------------------------------------------------*/

.info, .success, .warning, .error, .validation{ border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

.info{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Info.png'); }

.success{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Valid Green.png'); }

.warning{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Attention.png'); }

.error{ color: #D8000C; background-color: #FFBABA; background-image: url('../img/knobs-icons/Knob Cancel.png'); }

/* TOGGLE & ACCORDION ------------------------------------------------------------*/

h5.accordion-trigger, h5.toggle-trigger { padding: 0 0 0 20px; margin: 0 0 5px 0; height: 46px; line-height: 46px; width: 100%; float: left; border-bottom: 1px solid #cccccc; }

h5.accordion-trigger a, h5.toggle-trigger a { text-decoration: none; display: block; color: #1f1f1f; }

h5.accordion-trigger a:hover, h5.toggle-trigger a:hover { color: #cccccc; }

div.accordion-container, div.toggle-container { margin: 0 0 5px 0px; padding: 0; overflow: hidden; width: 95%; clear: both; }

div.accordion-container .block, div.toggle-container .block { padding: 10px; }

div.accordion-container .block , div.toggle-container .block { font-size: 14px; line-height: 1.5em; }

div.accordion-container .block p, div.toggle-container .block p{ margin-bottom: 1.5em; }

/*-- NAV ---------------------------------------------------------------*/

  1. nav{

display: block; position: absolute; right: 0px; top: 63px; height: 72px; }

  1. nav li{

display: block; float: left; height: 100%; margin-left: 4px; margin-right: 4px; z-index: 8; }

  1. nav>li>a{

color: #fec709; height: 47px; padding: 25px 8px 0px 8px; font-size: 20px; }

  1. nav li a:hover{ color: #FFFFFF; }
  1. nav li.current_page_item{

background: url(../img/yellow/sprites.png) no-repeat right -27px ; }

  1. nav li.current_page_item a{ color: #1f1f1f; }

/* sub nav */

  1. nav li ul{

padding:0px; background: #fec709; }

  1. nav>li>ul{

margin: 47px 0px 0px 0px; }

  1. nav li ul li{

padding: 0px; margin: 0px; border-bottom: 1px solid #fff; }

  1. nav li ul li:last-child{

border-bottom: none; }

  1. nav li ul li a{

padding: 10px; margin: 0px; font-size: 14px; color: #1f1f1f; }

  1. nav li ul li:hover{ background: #1f1f1f; }
  1. nav li ul li:hover a{ color: #fff; }


/* SLIDESHOW ------------------------------------------------------------*/

.wrapper-slideshow{ width: 975px; margin-left: 30px; overflow: hidden; }

  1. slideshow{

overflow: hidden; position: relative; margin-top: 15px; margin-bottom: 15px; width: 100%; z-index: 0; }

  1. slideshow ul#slides{

width: 970px; height: 345px; }

  1. slideshow-nav-holder{

display: block; position: absolute; overflow: hidden; height: 31px; bottom: 0px; right: 0px; z-index: 30; }

  1. slideshow-nav{

display: block; overflow: hidden; height: 31px; background: url(../img/yellow/sprites.png) -45px -132px; float: left; }

  1. slideshow-nav-holder .nav-left{

width: 13px; height: 31px; float: left; background: url(../img/yellow/sprites.png) -1px -132px; }

  1. slideshow-nav-holder .nav-right{

width: 13px; height: 31px; float: left; background: url(../img/yellow/sprites.png) -963px -132px; }

  1. slideshow-nav a {

display: block; float: left;

background: url(../img/yellow/sprites.png) -91px -52px; width: 14px; height: 15px; margin-top: 11px; text-indent: -9000px; margin-right: 3px; margin-left: 3px; }

  1. slideshow-nav a:hover{

background: url(../img/yellow/sprites.png) -91px -31px; }

  1. slideshow-nav a.activeSlide {

background: url(../img/yellow/sprites.png) -69px -31px; }

/* BLOCKS ------------------------------------------------------------*/

.blocks-holder{ display: block; overflow: hidden; margin-bottom: 15px; }

.blocks-holder li{ display: block; float: left; width: 460px; margin: 10px 10px; }

.blocks-holder .img-holder{ overflow: hidden; position: relative; }

.blocks-holder .img-holder .block-title{ display: block; position: absolute; bottom: 0px; left: 10px; width: 430px; padding: 10px 10px 0px 10px; font-size: 26px; background: white; }

.blocks-holder .block-text{ line-height: 1.5em; padding: 0px 20px 10px 20px; }

/* FILTER ---------------------------------------------------*/

  1. portfolio-filter{

display: block; overflow: hidden; width: 970px; height: 22px; padding-top: 3px; margin-left: 0px; margin-bottom: 8px; background: url(../img/yellow/sprites.png) no-repeat right top; }

  1. portfolio-filter li{

display: block; float: left; margin-right: 10px; font-size: 20px; }

  1. portfolio-filter li:first-child{

color: #FFF; padding-right: 10px; margin-left: 30px; border-right: 1px solid white; }

  1. portfolio-filter li a{

color: #1f1f1f; text-decoration: none; }

  1. portfolio-filter li a:hover{

color: #fff; }

/* GALLERY ------------------------------------------------------------*/

/* 3 cols default */ .gallery{ overflow: hidden; width: 100%; }

.gallery li{ display: block; position: relative; overflow: hidden; width: 300px; height: 200px; float: left; margin: 10px 10px; }

.gallery.two-cols li{ width: 458px; }

.gallery.three-cols li{ width: 300px; }

.gallery.four-cols li{ width: 220px; }

.gallery li span{ display: none; position: absolute; top: 0px; right: 0px; width: 44px; height: 44px; background: url(../img/yellow/sprites.png) no-repeat -0px -31px; }

.gallery li:hover span{ display: block; }

.gallery li em{ display: block; position: absolute; width: 280px; bottom: 0px; left: 10px; padding: 10px 10px 0px 10px; background: white; color: #1f1f1f; font-size: 20px; font-style: normal; }

.gallery.two-cols li em{ width: 428px; }

.gallery.three-cols li em{ width: 280px; }

.gallery.four-cols li em{ width: 190px; }

/* GALLERY PAGER ------------------------------------------------------------*/

.gallery-pager{ overflow: hidden; display: block; height: 16px; margin-left: 0px; margin-top: 18px; margin-bottom: 20px; }

.gallery-pager li{ display: block; width: 17px; height: 16px; float: left; background: url(../img/yellow/sprites.png) no-repeat; background-position: -90px -31px; margin-left: 5px; }

.gallery-pager li:hover, .gallery-pager li.active{ background-position: -69px -31px; }

.gallery-pager li a{ display: block; width: 100%; height: 100%; text-indent: -9000px; }

.gallery-pager li:first-child{ background-position: -47px -31px; }

.gallery-pager li:last-child{ background-position: -110px -31px; }


/* BLOG ------------------------------------------------------------*/

.wrapper-blog{ width: 960px; overflow: hidden; margin-top: 20px; }

  1. posts{

width: 710px; min-height: 650px; float: left; }

  1. posts .post{

width: 100%; margin-bottom: 30px; overflow: hidden; }

  1. posts .post .meta{

display: block; overflow: hidden; float: left; height: 88px; width: 80px; padding-left: 10px; color: #ffffff; background: url(../img/yellow/sprites.png) no-repeat -443px -30px; }

  1. posts .post .meta li{

display: block; }

  1. posts .post .meta .day{

font-size: 40px; margin-top: 5px; margin-bottom: -7px; }

  1. posts .post .meta .month-year{

font-size: 16px; margin-bottom: 7px; }

  1. posts .post .meta .comments{

font-size: 16px; text-indent: 22px; background: url(../img/comments-icon.png) no-repeat 0px 2px; }

  1. posts .post .post-content{

width: 620px; float: left; }

  1. posts .post .post-img{

display: block; position: relative; }

  1. posts .post .post-img img{

margin-bottom: 5px; }

  1. posts .post .post-title {

background: #ffffff; position: absolute; left: 10px; padding: 10px; width: 590px; }

  1. posts .post .post-title{}
  1. posts .post .post-title-1{

font-size: 30px; color: #1f1f1f; }

  1. posts .post .post-title-2{

font-size: 16px; color: #555555; }

  1. posts .post .excerpt{

line-height: 1.5em; }

  1. posts .post .link-button{

float: right; }

/* BLOG PAGER ------------------------------------------------------------*/

.blog-pager{ display: block; width: 835px; height: 24px; margin-left: 90px; margin-top: 20px; margin-bottom: 20px; }

.blog-pager li{ height: 24px; }

.blog-pager li a{ display: block; font-size: 20px; padding-top: 4px; color: #1f1f1f; height: 100%; width: 100%; background: url(../img/yellow/sprites.png) no-repeat; }

.blog-pager li:first-child{ display: block; float: left; }

.blog-pager li:last-child{ display: block; float: right; }

.blog-pager li:first-child a{ background-position: -4px -201px; padding-left: 26px; }

.blog-pager li:last-child a{ background-position: right -201px; padding-right: 14px; }

/* PORTFOLIO PAGER ------------------------------------------------------------*/

.portfolio-pager{ margin-left: 30px; }


/* SIDEBAR ------------------------------------------------------------*/

  1. sidebar{

width: 230px; float: left; margin-top: 0px; margin-left: 20px; }

  1. sidebar a{

color: #1f1f1f; text-decoration: none; }

  1. sidebar li h2{

display: block; font-size: 20px; line-height: 1.5em; color: #1f1f1f; background: url(../img/yellow/sprites.png) no-repeat -205px -30px; height: 38px; text-indent: 15px; width: 100%; }

  1. sidebar li.sidemenu{

margin-bottom: 20px; }

  1. sidebar li.sidemenu ul li{

display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; text-indent: 10px; border-bottom: 1px solid #cccccc; }

  1. sidebar li.sidemenu ul li:last-child{

border: none; }

/* RECENT-POSTS ------------------------------------------------------------*/

  1. sidebar li.recent-posts{

}

  1. sidebar li.recent-posts li{

display: block; overflow: hidden; padding: 5px 0px; margin: 5px 0px 5px 10px; border: none 0px; }


  1. sidebar li.recent-posts img{

float: left; margin-right: 10px; padding: 1px; border: 1px solid #e2e6e7; width: 48px; height: 48px; }

  1. sidebar li.recent-posts div.recent-excerpt{

display: block; font-size: 14px; line-height: 1.5em; width: 150px; float: left; }

ul#sidebar li.recent-posts div.recent-excerpt a{ font-weight: bold; font-size: 14px; line-height: 1.5em; text-decoration: none; }

/* BLOG-SINGLE ------------------------------------------------------------*/

  1. posts .post-single{

width: 100%; margin-bottom: 30px; overflow: hidden; }

  1. posts .post-single .post-content{

width: 620px; margin-left: 90px; float: left; }

  1. posts .post-single .post-title{

margin-bottom: 10px; }

  1. posts .post-single .post-title-1{

font-size: 30px; color: #1f1f1f; }

  1. posts .post-single .post-title-2{

font-size: 16px; color: #555555; }

  1. posts .post-single{

line-height: 1.5em; }

/* COMMENTS ------------------------------------------------------------*/

.comments-list{ display: block; margin-left: 90px; }

.comments-header{ font-size: 30px; line-height: 1.3em; margin-left: 90px; margin-bottom: 25px; background: url(../img/yellow/sprites.png) no-repeat -7px -227px; text-indent: 45px; }

.comments-list li{ display: block; margin-bottom: 0px; padding: 10px 10px; line-height: 1.5em; }

.comments-list .children li{ margin-left:1.2em; }

.comments-list li .comment-wrap{ overflow: visible; position: relative; padding: 0px 0px 20px 0px; }

.comments-list li a{ color: #1f1f1f; text-decoration: none; }

.comments-list li .comments-right{ min-height: 80px; overflow: hidden; padding-left: 20px; position: relative; }

.comments-list li img{ display: block; float: left; margin: 0px 12px 20px 0px; }

.comments-list .meta-date{ display: block; float: right; color: #999999; font-style: italic; }

.comments-list li div.brief{ font-size: 14px; line-height: 1.5em; }

.comments-list .edit-comment a{ font-size: 14px; color: #999999; }

/* LEAVE COMMENT -------------------------------------------------------*/

.leave-comment{ margin-left: 90px; }

/* FORMS ------------------------------------------------------------*/

  1. contactForm,
  2. commentform,
  3. contactForm{

margin-bottom: 18px; }

  1. commentform p,
  2. contactForm p{

margin-bottom: 0px; }

  1. contactForm input,
  2. contactForm textarea,
  3. commentform input,
  4. commentform textarea{

color: #1f1f1f; font-size: 14px; padding: 4px 5px; background: #d2d2d2 url(../img/bgs/strips-thin.png); border: none transparent; }

  1. contactForm input,
  2. contactForm textarea,
  3. commentform input,
  4. commentform textarea{

width: 97%; margin-bottom: 6px; font-family: Tahoma, Arial; }

  1. commentform input,
  2. commentform textarea{

width: 97%; }

  1. contactForm #submit,
  2. commentform input#submit{

width: 70px; height: 39px; background: url(../img/yellow/sprites.png) no-repeat 0px -273px; border: none; margin-top: 0px; }

  1. contactForm label,
  2. commentform label{

display: block; font-size: 14px; line-height: 1.5em; font-weight: light; }

/* PORTFOLIO ------------------------------------------------------------*/

.wrapper-portfolio{ width: 520px; overflow: hidden; margin-top: 20px; margin-left: 30px; }

.wrapper-portfolio .portfolio-item{ overflow: hidden; margin-bottom: 20px; }

.wrapper-portfolio .portfolio-feature{ float: left; width: 280; overflow:hidden; }

.wrapper-portfolio .portfolio-content{ float: left; width: 180px; margin-left: 20px; }

.wrapper-portfolio .portfolio-content .portfolio-title{ font-size: 30px; color: #1f1f1f; }

.wrapper-portfolio .portfolio-content .client-title{ font-size: 16px; color: #555555; }

.wrapper-portfolio .portfolio-content .excerpt{ line-height: 1.5em; }


.wrapper-portfolio2{ width: 520px; overflow: hidden; margin-top: 20px; margin-left: 90px; }

.wrapper-portfolio2 .portfolio-item{ overflow: hidden; margin-bottom: 20px; }

.wrapper-portfolio2 .portfolio-feature{ float: left; width: 280; overflow:hidden; }

.wrapper-portfolio2 .portfolio-content{ float: left; width: 180px; margin-left: 20px; }

.wrapper-portfolio2 .portfolio-content .portfolio-title{ font-size: 30px; color: #1f1f1f; }

.wrapper-portfolio2 .portfolio-content .client-title{ font-size: 16px; color: #555555; }

.wrapper-portfolio2 .portfolio-content .excerpt{ line-height: 1.5em; }

/* TWITTER READER ------------------------------------------------------------*/

.twitter-reader{ width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px #ccc dashed; padding-bottom: 18px; color: #555555; background: url(../img/twiiter-bird.png) no-repeat 30px 10px; min-height: 60px; }

  1. twitter-holder{

margin-left: 130px; line-height: 1.5em; font-size: 18px; }

  1. twitter-holder .twitter-entry,
  2. twitter-holder .follow-me{

}

.twitter-time{ color: #ccc; }

/*-- FOOTER ---------------------------------------------------------------*/

  1. footer{

position: relative; width: 100%; font-size: 14px; color: #ffffff; }

  1. footer .torn-bottom{

position: absolute; height: 6px; width: 100%; top: 0px; background: url(../img/borders/torn-bottom.png) repeat-x top; border-top: 24px solid white; z-index: -5; }

  1. footer .follow-us{

display: block; height: 45px; overflow: hidden; z-index: 130; }

  1. footer .follow-us li{

display: block; float: left; height: 100%; font-size: 26px; background: #fec709; }

.icon{ display: block; background-repeat: no-repeat; background-position: left top; width: 32px; margin-right: 5px; margin-top: 7px; height: 100%; text-indent: -9000px; }

  1. footer .follow-us li:first-child{

font-size: 26px; padding-left: 30px; padding-right: 10px; }

  1. footer .follow-us li:first-child span{

display: block; margin-top: 10px; color: #1c1c1c; }

  1. footer .follow-us li:last-child{

background: url(../img/yellow/sprites.png) no-repeat -162px -32px; width: 37px; }

.wrapper-footer{ width: 1300px; margin-left: 20px; }

/* FOOTER-COLS ------------------------------------------------------------*/

  1. footer ul.footer-cols{

display: block; overflow: hidden; }

  1. footer ul.footer-cols a{

color: #FFF; }

  1. footer ul.footer-cols li.col{

display: block; width: 300px; float: left; margin-bottom: 20px; margin-right: 10px; margin-left: 10px; }

  1. footer ul.footer-cols li.col ul{}
  1. footer ul.footer-cols li.col ul li{

margin-bottom: .1em; }

  1. footer ul.footer-cols li.col ul li a{

text-decoration: none; font-size: 14px; line-height: 1.5em; font-weight: lighter; color: #fff; }

  1. footer ul.footer-cols li.col h6{

color: #fff; text-decoration: none; font-size: 26px; margin: 20px 15px 0 0px; }

  1. footer ul.footer-cols li.col ul li a:hover{

text-decoration: underline; }

  1. footer ul.footer-cols li.col p{

line-height: 1.5em; }

  1. footer ul.footer-cols li.col a{

color: #fec709; }

/* FOOTER-BOTTOM ------------------------------------------------------------*/

  1. footer div.footer-bottom{

height: 20px; color: white; padding-left: 10px; margin-bottom: 20px; }

  1. footer div.footer-bottom a{

color: #7a7a7a; }

  1. footer div.footer-bottom p{

display: block; font-size: 14px; line-height: 1.5em; color: #7a7a7a; }

Retrieved from "http://2012.igem.org/Team:Fudan_D/css/style.css"