Template:Regional Europe 2012 Page CSS
From 2012.igem.org
(Difference between revisions)
(68 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 | // Reset | ||
/////////////////////////////////////////////////////////////////////////// */ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
/* | /* | ||
Line 17: | Line 24: | ||
*/ | */ | ||
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} | 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} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
* { | * { | ||
Line 33: | Line 34: | ||
font-size: 8pt; | font-size: 8pt; | ||
line-height: 1.75em; | line-height: 1.75em; | ||
- | |||
color: #2B2B2B; | color: #2B2B2B; | ||
} | } | ||
Line 85: | Line 85: | ||
h4 { | h4 { | ||
font-size: 1.0em; | font-size: 1.0em; | ||
+ | } | ||
+ | |||
+ | h5 { | ||
+ | font-weight: bold; | ||
+ | color: #F37321; | ||
} | } | ||
Line 117: | Line 122: | ||
ul { | ul { | ||
margin-bottom: 1.5em; | margin-bottom: 1.5em; | ||
- | + | padding: 0 0px 0px 20px; | |
- | padding: 0 | + | |
list-style-image:url('https://static.igem.org/mediawiki/2010/6/6c/Grey_circle_bullet_10px.png'); | list-style-image:url('https://static.igem.org/mediawiki/2010/6/6c/Grey_circle_bullet_10px.png'); | ||
} | } | ||
Line 147: | Line 151: | ||
#columns { | #columns { | ||
background: #bbbbbb; | background: #bbbbbb; | ||
- | padding: 28px 0; | + | padding: 28px 0 10px 0; |
} | } | ||
#columns .column { | #columns .column { | ||
width: 260px; | width: 260px; | ||
+ | background: #bbbbbb; | ||
float: left; | float: left; | ||
} | } | ||
Line 160: | Line 165: | ||
#columns .column1 p { | #columns .column1 p { | ||
height: 265px; | height: 265px; | ||
- | background: url(https://static.igem.org/mediawiki/2012/b/bc/RegionalEurope_Linkbg3b.png); | + | background: url(https://static.igem.org/mediawiki/2012/b/bc/RegionalEurope_Linkbg3b.png);no-repeat; |
- | background-size: 400px | + | background-size: 400px |
- | + | ||
} | } | ||
Line 179: | Line 183: | ||
#columns .column2 p { | #columns .column2 p { | ||
height: 265px; | height: 265px; | ||
- | background: url(https://static.igem.org/mediawiki/2012/c/c9/RegionalEurope_Linkbg4b.png); | + | background: url(https://static.igem.org/mediawiki/2012/c/c9/RegionalEurope_Linkbg4b.png);no-repeat; |
background-size: 400px 400px; | background-size: 400px 400px; | ||
- | |||
- | |||
} | } | ||
Line 198: | Line 200: | ||
#columns .column3 p { | #columns .column3 p { | ||
height: 265px; | height: 265px; | ||
- | background: url(https://static.igem.org/mediawiki/2012/2/27/RegionalEurope_Linkbg5b.png); | + | background: url(https://static.igem.org/mediawiki/2012/2/27/RegionalEurope_Linkbg5b.png);no-repeat; |
background-size: 400px 400px; | background-size: 400px 400px; | ||
- | |||
} | } | ||
Line 279: | Line 280: | ||
} | } | ||
- | + | ||
- | + | #boxes { | |
- | # | + | padding: 0 0 0 0; |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #boxes .box { |
+ | width: 260px; | ||
float: left; | float: left; | ||
- | + | ||
} | } | ||
- | # | + | #boxes .box1 { |
padding: 0 37px 0 0; | padding: 0 37px 0 0; | ||
} | } | ||
- | # | + | #boxes .box2 { |
margin: 0 0 0 5px; | margin: 0 0 0 5px; | ||
padding: 0; | padding: 0; | ||
Line 302: | Line 302: | ||
} | } | ||
- | # | + | #boxes .box3 { |
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
overflow: hidden; | overflow: hidden; | ||
Line 310: | Line 310: | ||
} | } | ||
- | # | + | #boxes .box h2 { |
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
padding: 0 0 0 20px; | padding: 0 0 0 20px; | ||
} | } | ||
- | # | + | #boxes .box h3 { |
padding: 30px 15px 0 15px; | padding: 30px 15px 0 15px; | ||
font-weight: normal; | font-weight: normal; | ||
Line 321: | Line 321: | ||
} | } | ||
- | # | + | #boxes .box p { |
padding: 15px 15px 15px 15px; | padding: 15px 15px 15px 15px; | ||
font-weight: normal; | font-weight: normal; | ||
Line 339: | Line 339: | ||
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
padding: 0 0 0 20px; | padding: 0 0 0 20px; | ||
+ | |||
} | } | ||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Buttons | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | table .pbrROL{border-collapse:collapse;border-spacing:0;} | ||
+ | /*Text Link*/ | ||
+ | .ROLtxt a | ||
+ | { | ||
+ | font:bold 16px Arial; | ||
+ | text-align:center; | ||
+ | margin-bottom:7px; | ||
+ | text-decoration:underline; | ||
+ | color:#FFF; | ||
+ | } | ||
+ | .ROLtxt a:hover | ||
+ | { | ||
+ | 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; } | ||
Line 379: | Line 449: | ||
padding: 28px 0 0 0; | padding: 28px 0 0 0; | ||
width: 100%; | width: 100%; | ||
- | margin: 0 0 | + | margin: 20px 0 0 28px; |
- | + | ||
} | } | ||
Line 504: | Line 573: | ||
background: #666; | background: #666; | ||
margin-top:0px; | margin-top:0px; | ||
+ | font-size: 9.3pt; | ||
} | } | ||
#navbar { width:975px; | #navbar { width:975px; | ||
Line 514: | Line 584: | ||
padding-top: 4px; | padding-top: 4px; | ||
} | } | ||
- | #flashylink { | + | #flashylink { |
float: left; | float: left; | ||
border: 0px solid #fff; | border: 0px solid #fff; | ||
color: #F37321; | color: #F37321; | ||
text-shadow: #000 1px 1px 1px; | text-shadow: #000 1px 1px 1px; | ||
- | padding: | + | padding:0px; line-height: 100%; |
text-align: center; | text-align: center; | ||
font-weight: bold; font-size: .8em; | font-weight: bold; font-size: .8em; | ||
Line 525: | Line 595: | ||
-moz-border-radius: 3px; | -moz-border-radius: 3px; | ||
border-radius: 3px; | border-radius: 3px; | ||
- | margin- | + | margin-left: 10px; |
} | } | ||
#flashylink a:hover { color: #fff; | #flashylink a:hover { color: #fff; | ||
Line 568: | Line 638: | ||
left: 37px; top:35px; | 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 597: | Line 667: | ||
} | } | ||
.textboxes { | .textboxes { | ||
- | |||
position: relative; | position: relative; | ||
border: 1px solid #f0f0f0; | border: 1px solid #f0f0f0; | ||
Line 617: | 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