Template:Regional Europe 2012 Page CSS
From 2012.igem.org
(Difference between revisions)
(134 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | /* | ||
+ | Downtown by Adonis Ronquillo for Free Website Templates | ||
+ | www.freewebsitetemplat.es / www.doni.us | ||
+ | Images by Image Base http://imagebase.davidniblack.com/ | ||
+ | Released under the Creative Commons Attribution 3.0 License. | ||
+ | */ | ||
+ | |||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Reset | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | |||
+ | /* | ||
+ | YUI 3.4.1 (build 4118) | ||
+ | Copyright 2011 Yahoo! Inc. All rights reserved. | ||
+ | Licensed under the BSD License. | ||
+ | http://yuilibrary.com/license/ | ||
+ | */ | ||
+ | html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000} | ||
* { | * { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
- | + | Outline: 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
body { | body { | ||
- | font-size: | + | font-size: 8pt; |
line-height: 1.75em; | line-height: 1.75em; | ||
color: #2B2B2B; | color: #2B2B2B; | ||
Line 38: | Line 48: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Typography and links and headings | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | |||
+ | a { | ||
+ | font-weight: bold; | ||
+ | color: #F37321; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
} | } | ||
h2 { | h2 { | ||
- | font-size: 1. | + | font-size: 1.5em; |
} | } | ||
Line 49: | Line 75: | ||
font-family: Philosopher, sans-serif; | font-family: Philosopher, sans-serif; | ||
color: #FFF; | color: #FFF; | ||
+ | text-decoration: none; | ||
} | } | ||
h3 { | h3 { | ||
- | font-size: 1. | + | font-size: 1.25em; |
} | } | ||
+ | |||
h4 { | h4 { | ||
- | font-size: 1. | + | font-size: 1.0em; |
+ | } | ||
+ | |||
+ | h5 { | ||
+ | font-weight: bold; | ||
+ | color: #F37321; | ||
} | } | ||
Line 67: | Line 100: | ||
margin: 8px 0 20px 0; | margin: 8px 0 20px 0; | ||
} | } | ||
+ | |||
+ | img.center { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto | ||
+ | } | ||
label.login { | label.login { | ||
Line 75: | Line 114: | ||
p { | p { | ||
margin-bottom: 1.5em; | margin-bottom: 1.5em; | ||
+ | } | ||
+ | |||
+ | p.news { | ||
+ | height: 150px; | ||
} | } | ||
ul { | ul { | ||
margin-bottom: 1.5em; | margin-bottom: 1.5em; | ||
+ | padding: 0 0px 0px 20px; | ||
+ | list-style-image:url('https://static.igem.org/mediawiki/2010/6/6c/Grey_circle_bullet_10px.png'); | ||
} | } | ||
Line 99: | Line 144: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/* /////////////////////////////////////////////////////////////////////////// | /* /////////////////////////////////////////////////////////////////////////// | ||
Line 168: | Line 150: | ||
#columns { | #columns { | ||
- | background: #bbbbbb | + | background: #bbbbbb; |
- | padding: 28px 0; | + | padding: 28px 0 10px 0; |
} | } | ||
#columns .column { | #columns .column { | ||
- | width: | + | width: 260px; |
+ | background: #bbbbbb; | ||
float: left; | float: left; | ||
} | } | ||
- | + | #columns .column1 { | |
- | + | ||
padding: 0 37px 0 28px; | padding: 0 37px 0 28px; | ||
} | } | ||
#columns .column1 p { | #columns .column1 p { | ||
- | background: url( | + | height: 265px; |
+ | background: url(https://static.igem.org/mediawiki/2012/b/bc/RegionalEurope_Linkbg3b.png);no-repeat; | ||
background-size: 400px | background-size: 400px | ||
Line 188: | Line 171: | ||
#columns .column1 h2 { | #columns .column1 h2 { | ||
- | background: url( | + | background: url(https://static.igem.org/mediawiki/2012/7/7a/RegionalEurope_Linkbg3.jpg) repeat-x top left; |
padding: 15px; | padding: 15px; | ||
font-weight: normal; | font-weight: normal; | ||
Line 199: | Line 182: | ||
#columns .column2 p { | #columns .column2 p { | ||
- | background: url( | + | height: 265px; |
- | background-size: 400px | + | background: url(https://static.igem.org/mediawiki/2012/c/c9/RegionalEurope_Linkbg4b.png);no-repeat; |
- | + | background-size: 400px 400px; | |
} | } | ||
#columns .column2 h2 { | #columns .column2 h2 { | ||
- | background: url( | + | background: url(https://static.igem.org/mediawiki/2012/0/03/RegionalEurope_Linkbg4.jpg) repeat-x top left; |
padding: 15px; | padding: 15px; | ||
font-weight: normal; | font-weight: normal; | ||
Line 216: | Line 199: | ||
#columns .column3 p { | #columns .column3 p { | ||
- | background: url( | + | height: 265px; |
- | background-size: 400px | + | background: url(https://static.igem.org/mediawiki/2012/2/27/RegionalEurope_Linkbg5b.png);no-repeat; |
+ | background-size: 400px 400px; | ||
} | } | ||
#columns .column3 h2 { | #columns .column3 h2 { | ||
- | background: url( | + | background: url(https://static.igem.org/mediawiki/2012/6/61/RegionalEurope_Linkbg5.jpg) repeat-x top left; |
padding: 15px; | padding: 15px; | ||
font-weight: normal; | font-weight: normal; | ||
margin: 0; | margin: 0; | ||
+ | } | ||
+ | |||
+ | #columns .column4 { | ||
+ | padding: 0 37px 0 28px; | ||
} | } | ||
+ | #columns .column4 h2 { | ||
+ | padding: 15px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #columns .column5 { | ||
+ | padding: 0 | ||
+ | } | ||
+ | |||
+ | #columns .column6 { | ||
+ | padding: 0 37px 0 28px; | ||
+ | } | ||
+ | |||
#columns ul { | #columns ul { | ||
margin: 0; | margin: 0; | ||
Line 238: | Line 240: | ||
margin: 0; | margin: 0; | ||
padding: 15px; | padding: 15px; | ||
- | background: url( | + | background: url(https://static.igem.org/mediawiki/2012/6/60/EuropeanJamboree_Linkbg6b.png) repeat-x bottom left; |
+ | } | ||
+ | |||
+ | #columns li a { | ||
+ | color: #555555; | ||
+ | } | ||
+ | |||
+ | #columns li a:hover { | ||
+ | color: #FF8000; | ||
+ | font-size: 115%; | ||
+ | text-decoration: none; | ||
} | } | ||
Line 246: | Line 258: | ||
margin: 0; | margin: 0; | ||
} | } | ||
+ | |||
+ | #columns p a { | ||
+ | color: #232323; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #columns p a:hover { | ||
+ | color: #232323; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
#columns h2 a { | #columns h2 a { | ||
Line 252: | Line 275: | ||
} | } | ||
- | #columns a { | + | #columns h2 a:hover { |
- | + | color: #FFFFFF; | |
- | + | text-decoration: underline; | |
} | } | ||
- | |||
+ | |||
+ | #boxes { | ||
+ | padding: 0 0 0 0; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | # | + | #boxes .box { |
- | + | width: 260px; | |
- | + | float: left; | |
- | + | ||
- | + | } | |
- | padding: | + | #boxes .box1 { |
+ | padding: 0 37px 0 0; | ||
- | } | + | } |
- | #box2 | + | #boxes .box2 { |
- | + | margin: 0 0 0 5px; | |
+ | padding: 0; | ||
- | } | + | } |
- | #box3 { | + | #boxes .box3 { |
+ | margin: 0 0 0 0; | ||
+ | overflow: hidden; | ||
+ | width: 260px; | ||
+ | float: left; | ||
+ | padding: 0 0 0 37px; | ||
+ | } | ||
+ | |||
+ | #boxes .box h2 { | ||
+ | margin: 0 0 0 0; | ||
+ | padding: 0 0 0 20px; | ||
+ | } | ||
+ | |||
+ | #boxes .box h3 { | ||
+ | padding: 30px 15px 0 15px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #boxes .box p { | ||
+ | padding: 15px 15px 15px 15px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #box2 { | ||
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
overflow: hidden; | overflow: hidden; | ||
- | width: | + | width: 850px; |
float: left; | float: left; | ||
+ | padding: 0 0 0 5px; | ||
} | } | ||
- | # | + | #box2 h2 { |
- | + | margin: 0 0 0 0; | |
- | + | padding: 0 0 0 20px; | |
- | + | ||
- | + | } | |
- | + | ||
- | + | ||
- | } | + | |
- | |||
- | |||
- | |||
- | + | /* /////////////////////////////////////////////////////////////////////////// | |
- | + | // Buttons | |
- | + | /////////////////////////////////////////////////////////////////////////// */ | |
- | + | table .pbrROL{border-collapse:collapse;border-spacing:0;} | |
- | + | /*Text Link*/ | |
- | + | .ROLtxt a | |
- | text-align: center; | + | { |
- | color: # | + | font:bold 16px Arial; |
+ | text-align:center; | ||
+ | margin-bottom:7px; | ||
+ | text-decoration:underline; | ||
+ | color:#FFF; | ||
} | } | ||
- | + | .ROLtxt a:hover | |
- | + | { | |
- | color: # | + | text-decoration:underline; |
+ | color:#3300FF; | ||
} | } | ||
+ | .tt | ||
+ | { | ||
+ | margin-top:18px; | ||
+ | } | ||
+ | .ROLtxt {text-align:center;} | ||
+ | /*Generic PBR link*/ | ||
+ | .pbrROL-basic .tt{font:10px Arial, Helvetica, sans-serif; background:none; color:#000; text-align:center;} | ||
+ | .pbrROL-basic .tt a{ background:none; color:#3300FF; text-decoration:underline; } | ||
+ | |||
+ | /* Button 4 */ | ||
+ | .pbrROL-04{display:block;} | ||
+ | .pbrROL-04 .ROLbtn {display:block; clear:both;} | ||
+ | .pbrROL-04 .ROLbtn ul{margin:0; padding:0;} | ||
+ | .pbrROL-04 .ROLbtn ul li{list-style:none; margin: 0; padding:0; clear:both; text-align:center;} | ||
+ | .pbrROL-04 .ROLbtn li a{ | ||
+ | background:url(../images/ui/button/btn-g04-right.jpg) no-repeat top right; | ||
+ | color:#FFFFFF; display: inline-block; text-decoration:none; margin-left:auto; margin-right:auto; | ||
+ | color:#FFFFFF; font:bold 16px Arial, Helvetica, sans-serif; white-space:nowrap;} | ||
+ | .pbrROL-04 .ROLbtn li span{ | ||
+ | background:url(../images/ui/button/btn-g04-left.jpg) no-repeat top left; | ||
+ | display: block; line-height:46px; padding:0 31px 0 30px; } | ||
+ | .pbrROL-04 .ROLbtn li a:hover{background:url(../images/ui/button/btn-g04-right.jpg) no-repeat bottom right; | ||
+ | display: inline-block; text-decoration:none; margin-left:auto; margin-right:auto; | ||
+ | color:#FFFFFF; font:bold 16px Arial, Helvetica, sans-serif; } | ||
+ | .pbrROL-04 .ROLbtn li a:hover span{background:url(../images/ui/button/btn-g04-left.jpg) no-repeat bottom left; | ||
+ | display: block; line-height:46px; padding:0 31px 0 30px; } | ||
+ | .pbrROL-04 .tt{display:block; clear:both; font:10px Arial, Helvetica, sans-serif; background:none; color:#000; text-align:center;} | ||
+ | .pbrROL-04 .tt a{ background:none; color:#3300FF; text-decoration:underline; } | ||
+ | |||
+ | /* Button 5 */ | ||
+ | .pbrROL-05{display:block;} | ||
+ | .pbrROL-05 .ROLbtn {display:block; clear:both;} | ||
+ | .pbrROL-05 .ROLbtn ul{margin:0; padding:0;} | ||
+ | .pbrROL-05 .ROLbtn ul li{list-style:none; margin: 0; padding:0; clear:both; text-align:center;} | ||
+ | .pbrROL-05 .ROLbtn li a{ | ||
+ | background:url(../images/ui/button/btn-g05-right.jpg) no-repeat top right; | ||
+ | display: inline-block; text-decoration:none; margin-left:auto; margin-right:auto; | ||
+ | color:#000; font:bold 16px Arial, Helvetica, sans-serif; white-space:nowrap;} | ||
+ | .pbrROL-05 .ROLbtn li span{ | ||
+ | background:url(../images/ui/button/btn-g05-left.jpg) no-repeat top left; | ||
+ | display: block; line-height:44px; padding:0 31px 0 30px; } | ||
+ | .pbrROL-05 .ROLbtn li a:hover{background:url(../images/ui/button/btn-g05-right.jpg) no-repeat bottom right; | ||
+ | display: inline-block; text-decoration:none; margin-left:auto; margin-right:auto; | ||
+ | color:#000; font:bold 16px Arial, Helvetica, sans-serif; } | ||
+ | .pbrROL-05 .ROLbtn li a:hover span{background:url(../images/ui/button/btn-g05-left.jpg) no-repeat bottom left; | ||
+ | display: block; line-height:44px; padding:0 31px 0 30px; } | ||
+ | |||
+ | .pbrROL-05 .tt{display:block; clear:both; font:10px Arial, Helvetica, sans-serif; background:none; color:#000; text-align:center;} | ||
+ | .pbrROL-05 .tt a{ background:none; color:#3300FF; text-decoration:underline; } | ||
- | # | + | |
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Content holder | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | #outer { | ||
position: relative; | position: relative; | ||
- | + | width: 910px; | |
- | + | margin: 32px auto 0 auto; | |
- | + | ||
} | } | ||
+ | |||
#main { | #main { | ||
position: relative; | position: relative; | ||
padding: 0; | padding: 0; | ||
- | width: | + | width: 100%; |
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
} | } | ||
Line 345: | Line 445: | ||
} | } | ||
- | # | + | #main2 { |
position: relative; | position: relative; | ||
- | width: | + | padding: 28px 0 0 0; |
- | margin: | + | width: 100%; |
+ | margin: 20px 0 0 28px; | ||
} | } | ||
- | # | + | #main2 a { |
- | + | color: #F37321; | |
- | + | text-decoration: none | |
- | color: # | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #main2 a:hover { |
- | + | color: #F37321; | |
- | + | text-decoration: underline | |
} | } | ||
- | + | #main2 h2, #main2 h3, #main2 h4 { | |
- | + | color: #0F0F0F; | |
} | } | ||
+ | #main3 { | ||
+ | position: relative; | ||
+ | padding: 28px 0 0 0; | ||
+ | width: 700px; | ||
+ | margin: 0 28px 0 37px; | ||
+ | } | ||
- | + | #main3 a { | |
- | + | color: #F37321; | |
- | + | text-decoration: none | |
- | + | ||
} | } | ||
- | + | #main3 a:hover { | |
- | + | color: #F37321; | |
- | + | text-decoration: underline | |
- | + | } | |
- | + | ||
+ | #main3 h2, #main3 h3, #main3 h4 { | ||
+ | color: #0F0F0F; | ||
} | } | ||
Line 399: | Line 503: | ||
border-radius: 10px; | border-radius: 10px; | ||
background: #fff; | background: #fff; | ||
- | text-align: | + | text-align:left; |
} | } | ||
#sponsorsbox img {padding: 10px; } | #sponsorsbox img {padding: 10px; } | ||
Line 428: | Line 532: | ||
#happeningnow .widget-url {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center;} | #happeningnow .widget-url {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center;} | ||
+ | |||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // pitch slideshow | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | #pitch { | ||
+ | clear: both; | ||
+ | height: 296px; | ||
+ | margin: 0 0 25px; | ||
+ | } | ||
+ | #slideshow { | ||
+ | position:relative; | ||
+ | height: 310px; | ||
+ | } | ||
+ | #slideshow img { | ||
+ | float: left; | ||
+ | } | ||
+ | #slideshow div { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 8; | ||
+ | } | ||
+ | #slideshow div.active { | ||
+ | z-index: 10; | ||
+ | } | ||
+ | #slideshow div.last-active { | ||
+ | z-index: 9; | ||
+ | } | ||
+ | |||
/* /////////////////////////////////////////////////////////////////////////// | /* /////////////////////////////////////////////////////////////////////////// | ||
Line 434: | Line 569: | ||
/*--Menu Bar CSS--*/ | /*--Menu Bar CSS--*/ | ||
- | #navbarcontainer { width: 100%; height: 35px; background: #666; margin-top:0px;} | + | #navbarcontainer { width: 100%; |
- | #navbar {width:975px; margin-left: auto; margin-right: auto; position:relative; height: 35px;} | + | height: 35px; |
- | #navbarsocial {float:right; padding-top: 4px;} | + | background: #666; |
- | #flashylink { | + | margin-top:0px; |
- | + | font-size: 9.3pt; | |
- | + | } | |
- | #flashylink a:hover {color: # | + | #navbar { width:975px; |
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | position:relative; | ||
+ | height: 35px; | ||
+ | } | ||
+ | #navbarsocial { float:right; | ||
+ | padding-top: 4px; | ||
+ | } | ||
+ | #flashylink { | ||
+ | float: left; | ||
+ | border: 0px solid #fff; | ||
+ | color: #F37321; | ||
+ | text-shadow: #000 1px 1px 1px; | ||
+ | padding:0px; line-height: 100%; | ||
+ | text-align: center; | ||
+ | font-weight: bold; font-size: .8em; | ||
+ | -webkit-border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | #flashylink a:hover { color: #fff; | ||
+ | } | ||
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | /*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | ||
ul#topnav { | ul#topnav { | ||
- | margin: 0; padding: 0; | + | margin: 0; padding: 0 0 0 37px; |
float: left; | float: left; | ||
/*-- width: 960px;--*/ | /*-- width: 960px;--*/ | ||
Line 451: | Line 609: | ||
font-size: 1em; | font-size: 1em; | ||
background: #666/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/; | background: #666/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/; | ||
- | z-index: 6; | + | z-index: 6; |
} | } | ||
ul#topnav li { | ul#topnav li { | ||
Line 463: | Line 621: | ||
display: block; | display: block; | ||
color: #fff; | color: #fff; | ||
- | font-weight: bold; | + | font-weight: bold; |
- | letter-spacing: 1px; | + | letter-spacing: 1px; |
- | text-shadow: #333 1px 1px 1px; | + | text-shadow: #333 1px 1px 1px; |
+ | text-decoration: none; | ||
+ | } | ||
+ | ul#topnav li a:hover{ | ||
+ | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
Line 474: | Line 636: | ||
position: absolute; | position: absolute; | ||
z-index:10; | z-index:10; | ||
- | left: | + | left: 37px; top:35px; |
display: none; /*--Hide by default--*/ | display: none; /*--Hide by default--*/ | ||
- | width: | + | width: 758px; |
background: #F37321; | background: #F37321; | ||
color: #fff; | color: #fff; | ||
Line 490: | Line 652: | ||
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ | ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ | ||
ul#topnav li span a { display: inline; } | ul#topnav li span a { display: inline; } | ||
- | ul#topnav li span a:hover {text-decoration: underline;} | + | ul#topnav li span a:hover {text-decoration: underline;color: #fff} |
/*--Menu Ends Here--*/ | /*--Menu Ends Here--*/ | ||
Line 497: | Line 659: | ||
display: block; | display: block; | ||
padding: 8px; | padding: 8px; | ||
- | font-size: | + | font-size: 1em; |
font-weight: bold; | font-weight: bold; | ||
border-bottom: solid 1px #ccc; | border-bottom: solid 1px #ccc; | ||
Line 505: | Line 667: | ||
} | } | ||
.textboxes { | .textboxes { | ||
- | |||
position: relative; | position: relative; | ||
border: 1px solid #f0f0f0; | border: 1px solid #f0f0f0; | ||
Line 525: | Line 686: | ||
background: #fff; | background: #fff; | ||
} | } | ||
+ | |||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Timeline | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | /* Design provided by <a href="https://2010.igem.org/Team:TU_Delft#page=Home/">iGEM TU Delft 2010</a> */ | ||
+ | |||
+ | table { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | } | ||
+ | table td { | ||
+ | padding: 0px; | ||
+ | } | ||
+ | table .head { | ||
+ | background-color: none; | ||
+ | font-weight: normal; | ||
+ | color: #fff; | ||
+ | } | ||
+ | table .odd { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | #timeline_container { | ||
+ | overflow-x: scroll; | ||
+ | width: 600px; | ||
+ | /* border: 1px solid #216085; */ | ||
+ | height: 250px; | ||
+ | overflow-y:hidden; | ||
+ | scrollbar-face-color:#266c96; | ||
+ | scrollbar-shadow-color:#216085; | ||
+ | scrollbar-highlight-color:#216085; | ||
+ | scrollbar-3dlight-color:#216085; | ||
+ | scrollbar-darkshadow-color:#216085; | ||
+ | scrollbar-track-color:#d0f1fa; | ||
+ | scrollbar-arrow-color:#fff; | ||
+ | } | ||
+ | |||
+ | #timeline_content { | ||
+ | width: 1650px; | ||
+ | height: 380px; | ||
+ | } | ||
+ | |||
+ | #content-block { | ||
+ | width: 210px; | ||
+ | padding: 10px; | ||
+ | float: left; | ||
+ | } | ||
+ | .fastlink { | ||
+ | font-size: 9px; | ||
+ | font-weight: bold; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | .fastlink:hover { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | .month { | ||
+ | margin: 10px; | ||
+ | background-color: #108812; | ||
+ | text-align: center; | ||
+ | font-weight:bold; | ||
+ | display:block; | ||
+ | width: 100%; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | .month-summary { | ||
+ | font-size: 11px; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | display: block; | ||
+ | margin-bottom: -10px; | ||
+ | line-height: 12px; | ||
+ | } | ||
+ | |||
+ | .month-summary img { | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .timeline-item { | ||
+ | display:block; | ||
+ | padding: 3px; | ||
+ | border: 1px solid #eee; | ||
+ | font-size: 10px; | ||
+ | float: left; | ||
+ | margin: 3px 10px; | ||
+ | line-height: 19px; | ||
+ | width: 210px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .timeline-item .date { | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | font-size: 12px; | ||
+ | float: left; | ||
+ | line-height: 15px; | ||
+ | color: #fff; | ||
+ | background-color: #c4e438; | ||
+ | padding: 2px; | ||
+ | width: 20px; | ||
+ | text-align: center; | ||
+ | margin-right: 3px; | ||
+ | } | ||
+ | #content-block a { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #content-block a:hover { | ||
+ | text-decoration: underline; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 18:04, 7 October 2012