Template:WashU/Layout

From 2014.igem.org

Revision as of 17:08, 20 June 2014 by Benjaminhuang (Talk | contribs)

/* Template Name: Ost Magazine File: Layout CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>

  • /

/* Template Name: Ost Magazine File: Navigation CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>

  • /
  1. topnav{

display:block; float:right; margin-top:22px; width:600px; font-size:14px; font-family:Georgia, "Times New Roman", Times, serif; }

  1. topnav ul, #topnav li{

margin:0; padding:0; list-style:none; }

  1. topnav li{

float:right; margin-right:30px; }

  1. topnav li li{

margin-right:0; }

  1. topnav li span{

display:block; margin:5px 0 0 0; padding:0; font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-transform:lowercase; color:#666666; background-color:#000000; font-weight:normal; line-height:normal; }

  1. topnav li a:link, #topnav li a:visited, #topnav li a:hover{

display:block; margin:0; padding:20px 0 0 0; color:#FFFFFF; background-color:#000000; text-transform:uppercase; border-top:2px solid #000000; font-weight:bold; }

  1. topnav ul ul li a:link, #topnav ul ul li a:visited{

border:none; }

  1. topnav li a:hover, #topnav li.active a{

color:#FFFF00; background-color:#000000; border-top-color:#FFFF00; }

  1. topnav li li a:link, #topnav li li a:visited{

width:150px; float:none; margin:0; padding:7px 10px; font-size:12px; font-weight:normal; color:#FFFFFF; background-color:#000000; border:none; }

  1. topnav li li a:hover{

color:#FFFF00; background-color:#000000; }

  1. topnav ul ul{

z-index:9999; position:absolute; left:-999em; height:auto; width:170px; border-left:1px solid #666666; border-bottom:1px solid #666666; }

  1. topnav ul ul a{width:140px;}
  1. topnav li:hover ul{left:auto;}
  1. topnav li:hover{position:static;}
  1. topnav li.last{margin-right:0;}


/* ----------------------------------------------Column Navigation-------------------------------------*/

.column .subnav{display:block; width:218px; padding:20px; border:1px solid #F9F9F9; margin-bottom:30px;}

.column .subnav h2{ margin:0 0 15px 0; padding:0 0 8px 0; font-size:16px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dotted #666666; }

.column .subnav ul{ margin:0; padding:0; list-style:none; }

.column .subnav li{ margin:0 0 3px 0; padding:0; }

.column .subnav ul ul, .column .subnav ul ul ul, .column .subnav ul ul ul ul, .column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}

.column .subnav a{ display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/blue_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted #666666; }

.column .subnav a:hover{color:#660000; background-color:#FFFFFF;}

.column .subnav ul ul a, .column .subnav ul ul ul a, .column .subnav ul ul ul ul a, .column .subnav ul ul ul ul ul a{background:url("../images/black_file.gif") no-repeat #FFFFFF;} .column .subnav ul ul a{padding-left:40px; background-position:30px center;} .column .subnav ul ul ul a{padding-left:50px; background-position:40px center;} .column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;} .column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;} /* Template Name: Ost Magazine File: Forms CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>

  • /

form, fieldset, legend{margin:0; padding:0; border:none;} legend{display:none;} input, textarea, select{font-size:12px; font-family:Georgia, "Times New Roman", Times, serif;}

/* ----------------------------------------------Search Form-------------------------------------*/

  1. topline input{

display:block; float:left; width:155px; margin:0 5px 0 0; padding:5px; color:#B6B6B6; background-color:#525252; border:1px solid #B6B6B6; font-size:12px; font-family:Arial, Helvetica, sans-serif; }

  1. topline input#go{

width:68px; height:26px; margin:0; padding:4px 0; text-transform:uppercase; color:#FFFFFF; background-color:#525252; border:1px solid #B6B6B6; cursor:pointer; font-weight:bold; font-family:Arial, Helvetica, sans-serif; }

/* ----------------------------------------------Forms in Content Area-------------------------------------*/

.container #respond{display: block; width:100%;}

.container #respond input{width:170px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0;}

.container #respond textarea{width:98%; border:1px solid #CCCCCC; padding:2px; overflow:auto;}

.container #respond p{margin:5px 0;}

.container #respond #submit, .container #respond #reset{ margin:0; padding:5px; color:#666666; background-color:#F7F7F7; border:1px solid #CCCCCC; cursor:pointer; } /* Template Name: Ost Magazine File: Tables CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>

  • /

table{ width:100%; border-collapse:collapse; table-layout:auto; vertical-align:top; margin-bottom:15px; border:1px solid #CCCCCC; }

table thead th{ color:#FFFFFF; background-color:#666666; border:1px solid #CCCCCC; border-collapse:collapse; text-align:center; table-layout:auto; vertical-align:middle; }

table tbody td{ vertical-align:top; border-collapse:collapse; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }

table thead th, table tbody td{ padding:5px; border-collapse:collapse; }

table tbody tr.light{ color:#666666; background-color:#F7F7F7; }

table tbody tr.dark{ color:#666666; background-color:#E8E8E8; } /* Template Name: Ost Magazine File: Featured Slider CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>

  • /
  1. featured_slide {

position:relative; margin:0 auto 0; display:block; width:960px; height:390px; overflow:hidden; font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background:url("../images/trans_top.png") top left no-repeat #E3E5E5; }

  1. featured_slide a, #featured_slide ul, #featured_slide img, #featured_slide p{

margin:0; padding:0; border:none; outline:none; list-style:none; text-decoration:none; line-height:normal; }

  1. featured_slide h1, #featured_slide h2, #featured_slide h3, #featured_slide h4, #featured_slide h5, #featured_slide h6{

margin:0 0 8px 0; padding:0; line-height:normal; font-size:14px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; border-bottom:none; }

/* ----------------------------------------------Content-------------------------------------*/

.featured_box{ position:relative; display:block; width:930px; height:375px; margin:15px 0 0 15px; }

.featured_box img{ width:930px; height:375px; }

.featured_box .floater{ position:absolute; bottom:30px; width:590px; height:60px; margin:0 0 0 30px; padding:3px 5px; overflow:hidden; background:url("../images/fs_txt_trans_bg.png"); }

  1. featured_slide p.readmore{

position:absolute; bottom:30px; right:30px; margin:0 0 25px 0; }

  1. featured_slide p.readmore a{

color:#FFFF00; background:url("../images/fs_txt_trans_bg.png"); padding:25px; }

/* ----------------------------------------------Navigation Buttons-------------------------------------*/

/*

Navigation dynamically created using: jquery.cycle.setup.js and jquery.cycle.min.js

HTML Output:

  • <a href="javascript:void()">1</a>
  • <a href="javascript:void()">2</a>
  • <a href="javascript:void()">3</a>
  • <a href="javascript:void()">4</a>
  • <a href="javascript:void()">5</a>
  • /
  1. fsn{

position:relative; margin:0 auto 0; display:block; width:960px; height:44px; text-align:center; color:#666666; background:url("../images/trans.png") #E3E5E5; z-index:1000; }

  1. fsn ul{

position:relative; margin:0 auto 0; display:block; width:200px; height:20px; padding:12px 0 0 0; overflow:hidden; list-style:none; }

  1. fsn ul li, #fsn ul li a{

display:block; float:left; width:20px; height:20px; margin:0 20px 0 0; padding:0; }

  1. fsn ul li a{

float:none; border:none; margin:0; outline:none; text-indent:-5000px; text-decoration:none; background:url("../images/slide.png") 50% 50% no-repeat; }

  1. fsn .activeSlide{

background:url("../images/slide.png") 0% 50% no-repeat; }


body{ margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#FFFFFF; }

img{display:block; margin:0; padding:0; border:none;} .justify{text-align:justify;} .bold{font-weight:bold;} .center{text-align:center;} .right{text-align:right;} .nostart{list-style-type:none; margin:0; padding:0;} .clear{clear:both;} br.clear{clear:both; margin-top:-15px;}

a{outline:none; text-decoration:none; color:#660000; background-color:#FFFFFF;}

.fl_left{float:left;} .fl_right{float:right;}

.imgl, .imgr{border:1px solid #C7C5C8; padding:5px;} .imgl{float:left; margin:0 8px 8px 0; clear:left;} .imgr{float:right; margin:0 0 8px 8px; clear:right;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{ display:block; width:100%; text-align:left; }

div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{ margin:0 0 15px 0; padding:0; font-size:20px; font-weight:normal; line-height:normal; }

.col0, .col0 a{color:#999999; background-color:#333333;} .col1{color:#666666; background-color:#000000; border-bottom:1px solid #363636;} .col2{color:#FFFFFF; background-color:#191919; padding:20px 0;} .col2 a{color:#FFFFFF; background-color:#191919;} .col3{margin:1px 0; border-top:1px solid #363636; border-bottom:1px solid #363636;} .col4{color:#FFFFFF; background-color:#000000;} .col4 a{color:#FFFF00; background-color:#000000;} .col5, .col5 a{color:#999999; background-color:#1B1B1B;} .col4, .col5{font-family: Verdana, Geneva, sans-serif;} .col4 h2, .col5 h2{font-family: Georgia, "Times New Roman", Times, serif;}

/* ----------------------------------------------Generalise-------------------------------------*/

  1. header, #topline, #topbar, #breadcrumb, .container, #hpage_cats, #adblock, #socialise, #footer, #copyright{

position:relative; margin:0 auto 0; display:block; width:960px; }

/* ----------------------------------------------TopBar-------------------------------------*/

  1. topline{

padding:10px 0; }

  1. topline ul{

float:left; margin:6px 0 0 0; padding:0; list-style:none; }

  1. topline li{

display:inline; margin:0 8px 0 0; padding:0 10px 0 0; border-right:1px solid #999999; }

  1. topline li.last{

margin-right:0; padding-right:0; border:none; }

  1. topline #search{

display:block; float:right; margin:0; padding:0; overflow:hidden; }

/* ----------------------------------------------Header-------------------------------------*/

  1. header{

padding:10px 0 20px; z-index:1000; }

  1. header h1, #header p, #header ul{

margin:0; padding:0; list-style:none; line-height:normal; }

  1. header #logo{

display:block; float:left; margin-top:7px; overflow:hidden; }

  1. header #logo h1 a{

font-size:46px; color:#999999; background-color:#000000; }

  1. header h1 strong{

font-weight:normal; color:#FFFF00; background-color:#000000; }

  1. header #logo p{

text-align:right; margin-top:5px; font-family:Arial, Helvetica, sans-serif; text-transform:lowercase; }

/* ----------------------------------------------BreadCrumb-------------------------------------*/

  1. breadcrumb ul{

margin:0; padding:0; list-style:none; }

  1. breadcrumb ul li{display:inline;}
  1. breadcrumb ul li.current a{text-decoration:underline; color:#FFFF00; background-color:#191919;}

/* ----------------------------------------------Content-------------------------------------*/

.container{ padding:20px 0; }

.content{ display:block; float:left; width:630px; }

/* ------Comments-----*/

  1. comments{margin-bottom:40px;}
  1. comments .commentlist {margin:0; padding:0;}
  1. comments .commentlist ul{margin:0; padding:0; list-style:none;}
  1. comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
  1. comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
  2. comments .commentlist li.comment_odd a{color:#660000; background-color:#F7F7F7;}
  1. comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
  2. comments .commentlist li.comment_even a{color:#660000; background-color:#E8E8E8;}
  1. comments .commentlist .author .name{font-weight:bold;}
  2. comments .commentlist .submitdate{font-size:smaller;}
  1. comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
  1. comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Column-------------------------------------*/

.column{ display:block; float:right; width:270px; }

.column .holder{ display:block; width:260px; margin-bottom:20px; padding-left:10px; }

/* Sponsors Block */

.column .sponsors{ display:block; width:270px; margin-bottom:20px; }

.column .sponsors h2{ margin:0 0 15px 10px; padding:0 0 8px 0; border-bottom:2px solid #E3E3E3; }

.column .sponsors .b_250{ display:block; width:250px; margin:0 0 10px 10px; padding:4px; border:1px solid #C7C5C8; }

.column .sponsors .b_125 ul{ margin:0; padding:0; list-style:none; }

.column .sponsors .b_125 ul{ margin:0; padding:0; list-style:none; }

.column .sponsors .b_125 li{ float:right; margin:0 0 10px 10px; }

/* ----------------------------------------------Homepage Specific-------------------------------------*/

  1. topstory{

display:block; width:100%; margin-bottom:25px; }

  1. topstory h2, #latestnews h2{

margin:0 0 15px 0; padding:0 0 8px 0; border-bottom:2px solid #E3E3E3; }

  1. topstory ul{

margin:0; padding:0; list-style:none; display:inline; }

  1. topstory li{

display:block; float:left; width:200px; margin:0 15px 0 0; padding:0; }

  1. topstory li.last{

margin-right:0; }

  1. topstory img{

margin:0; padding:4px; border:1px solid #C7C5C8; }

  1. topstory .readmore{

font-weight:bold; text-align:right; }

  1. latestnews{

display:block; width:630px; margin-bottom:35px; }

  1. latestnews .latestnews h2{

margin:0; padding:0; font-size:16px; font-weight:bold; border-bottom:none; }

  1. latestnews ul, #latestnews li{

display:block; width:100%; margin:0; padding:0; list-style:none; }

  1. latestnews li{

margin:0 0 15px 0; padding:0 0 15px 0; border-bottom:1px dotted #666666; }

  1. latestnews div.imgholder{

display:block; float:left; width:125px; height:125px; margin:0; padding:4px; border:1px solid #666666; }

  1. latestnews div.latestnews{

display:block; float:right; width:475px; margin:0; padding:0; }

  1. latestnews p.readmore{

display:block; margin-top:10px; text-align:right; font-weight:bold; }

/* ----------------------------------------------Footer-------------------------------------*/

  1. footer{

padding:20px 0; }

  1. footer ul{

margin:0; padding:0; list-style:none; }

  1. footer h2{

margin:0 0 15px 0; padding:0 0 8px 0; font-size:18px; color:#CCCCCC; background-color:#000000; border-bottom:1px dotted #CCCCCC; }

  1. footer .box{

display:block; float:right; width:250px; margin:0 0 0 25px; padding:0; }

  1. footer .box1{

display:block; float:left; width:400px; line-height:1.6em; }

  1. footer .box1 .imgl{border:1px solid #CCCCCC; padding:5px; color:#FFFFFF; background-color:#000000;}
  1. footer .contactdetails li{

margin:0 0 8px 0; }

  1. footer .flickrbox, #footer .flickrbox .wrap{display:block; width:260px;}
  2. footer .flickrbox .wrap .fix{clear:both;}
  3. footer .flickrbox .wrap .flickr_badge_image{display:block; float:left; margin:0 10px 10px 0; width:80px; height:80px;}
  4. footer .flickrbox .wrap #flickr_badge_image3, #footer .flickrbox .wrap #flickr_badge_image6{margin-right:0;}

/* ----------------------------------------------Copyright-------------------------------------*/

  1. copyright{

padding:10px 0; }

  1. copyright p{

margin:0; padding:0; 

       }
Retrieved from "http://2014.igem.org/Template:WashU/Layout"