Team:Imperial College/skin.css
From 2013.igem.org
@import "reset.css"; body { color:#333; font:75%/1.35em georgia,times,serif; } h1,h2, h3, h4, h5, h6 {
color:rgb(230,85,39);
font-family:'Helvetica',sans-serif;
font-weight:normal; line-height:1.5em;
} h1 { font-family:'Helvetica',sans-serif; font-size:24px;
text-transform:uppercase;
} h2 { font-size:36px; } h3 { color:rgb(0,112,106); font-size:22px; text-shadow:1px 1px 0 #fff; } h4 {
font-size:20px;
} h5 { color:#00A99D;
font-size:2em;
font-weight:bold; padding-top:30px; line-height:1.2em; } h6 { color:#de3c1a;
font-size:1.3em;
font-weight:bold; padding-top:30px; }
p { color:#111;
font-family:georgia,serif; font-size:16px; line-height:1.7em; margin-bottom:1.5em; text-shadow:1px 1px 0px #fff;
}
.more { text-decoration:underline !important; }
/* Spacing
*/
hr { border:0 #fff solid; border-top-width:1px; clear:both; height:0; } blockquote { margin-right:10px; padding:5px 0 20px 0; } ul, ol {
margin-top:20px;
padding-left:20px; } ul li { font-size:15px;
list-style:disc;
}
li { line-height:1.35;
margin-bottom:1.35em; margin-left:20px;
}
/* Layout
*/
html { background:transparent url('../images/background.png') repeat; } body { margin-bottom:20px; width:960px; margin:0 auto; border:none; }
header { background-image:url('../images/header_bg.png'); background-repeat:no-repeat;
border:none; margin-top:10px; padding-top:50px; width:100%;
} header h1 { background-image:url('../images/logo.png');
background-repeat:no-repeat; height:70px; margin-left:20px; padding-left:300px; padding-top:17px; text-align:right; text-shadow:0 1px white; text-transform:uppercase; width:610px;
} header nav { background:rgb(0,162,153) url('../images/nav_bar_bg.png') 0 0 no-repeat; clear:both; display:block; min-height:360px; font-family:'Helvetica', sans-serif; } header nav a { background-color:transparent;
background-image:url(../images/header_navigation.png); background-repeat:no-repeat; color:rgba(255,255,255,.75);
display:block; float:left; font-family:'Helvetica', sans-serif; font-size:2em; font-weight:normal; line-height:1.35em;
margin:40px 60px 0;
padding:220px 0 0; text-align:center; text-decoration:none; text-shadow:0px 2px #007560; text-transform:uppercase; vertical-align:baseline; width:200px; } header nav a.welcome_tile { background-position:0 0; } header nav a.welcome_tile:hover { background-position:-200px 0; } header nav a.welcome_tile.selected { background-position:-400px 0; } header nav a.hardcore_tile { background-position:-600px 0; } header nav a.hardcore_tile:hover { background-position:-800px 0; } header nav a.hardcore_tile.selected { background-position:-1000px 0; } header nav a.tips_tile { background-position:-1200px 0; } header nav a.tips_tile:hover { background-position:-1400px 0; } header nav a.tips_tile.selected { background-position:-1600px 0; } header nav a.selected,header nav a:hover { color:rgba(255,255,255,1); }
article, form { background:url(../images/body_bg.png); border:none; display:block; overflow:auto; padding:40px; width:880px; } article a {
color:rgb(222,60,26); }
article a {
font-weight:bold; font-size:.95em; outline:none; }
article a:visited {
color:rgb(222,60,26);; text-decoration:none; }
article a:hover {
color:rgb(30,30,30); }
article a:active {
text-decoration:none; }
article div { float:left; width:400px; } article div:nth-of-type(2) { margin-left:80px; } article strong {
font-size:.95em; }
article div img {
margin:0 0 30px; }
article div p + img {
margin:0 0 20px;
} article div ul {
margin-right:30px; }
- shortcuts {
width:880px; }
- shortcuts p {
margin-bottom:1.5em; }
- shortcuts ul {
margin:0; padding:0; }
- shortcuts > ul > li {
color:#de3c1a; float:left; font-family:'Helvetica',sans-serif; font-size:22px; list-style:none; margin:0 0 1.35em; padding:0; width:270px; }
- shortcuts > ul > li:nth-child(3n+2) {
margin:0 23px; }
- shortcuts > ul > li:nth-child(3n+1) {
clear:left; }
- shortcuts ul ul {
background-color:rgba(255,255,255,.75); border-radius:10px; color:#333; margin:10px 0 30px; overflow:auto; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
- shortcuts ul ul li {
color:#333; font-family:Helvetica,sans-serif; font-size:14px; font-weight:normal; list-style:square; }
- shortcuts ul ul li span {
color:#000; font-family:monospace; }
footer { background:url('../images/footer_bg.png') no-repeat; clear:both; height:150px; padding-bottom:20px; width:960px; } footer nav {
margin:0 auto; text-align:center; width:640px;
} footer nav a {
background-image:url(../images/footer_navigation.png); background-repeat:no-repeat; color:rgba(255,255,255,1); display:block; float:left; font-family:'Helvetica', sans-serif; font-size:1em; font-weight:normal; margin:20px 60px 0; padding:85px 0 0; text-align:center; text-decoration:none; text-shadow:1px 0 0 #007560; text-transform:uppercase; vertical-align:baseline; width:80px; }
footer nav a.welcome_tile { background-position:0 0; } footer nav a.welcome_tile:hover { background-position:-80px 0; } footer nav a.welcome_tile.selected { background-position:-160px 0; } footer nav a.hardcore_tile { background-position:-240px 0; } footer nav a.hardcore_tile:hover { background-position:-320px 0; } footer nav a.hardcore_tile.selected { background-position:-400px 0; } footer nav a.tips_tile { background-position:-480px 0; } footer nav a.tips_tile:hover { background-position:-560px 0; } footer nav a.tips_tile.selected { background-position:-640px 0; } footer nav a.selected,header nav a:hover { color:rgba(255,255,255,1); }
/* Form styles */ form fieldset {
margin:0 auto; width:640px; }
form label {
color:rgb(222, 60, 26); display:block; font-family:'Helvetica', sans-serif; font-size:1.5em; font-weight:normal; padding-bottom:5px; }
form input, form textarea {
border:1px solid #222; border-radius:4px; font-size:16px; padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; } #item3,#item4,#item5,#item6 { margin-bottom:20px; } #item3 input, #item6 textarea { width:100%; } #item4 { margin-right:40px; } #item4,#item5 { float:left; width:300px; } #item4 input,#item5 input { width:100%; } #item6 textarea { height:200px; } .fb-hint { color:rgba(0,0,0,.6); font-size:15px; font-style:italic; font-weight:normal; margin:5px; } #fb-submit-button { color:rgb(222, 60, 26); font-family:'Helvetica',sans-serif; font-size:20px; padding:4px 0 0px 0; margin-top:20px; border:none; width:120px; height:40px; text-shadow:0 1px 0 #222; cursor:pointer; background:url(../images/btn_submit.png) no-repeat; margin-right:50px !important; } #fb-submit-button:hover { background:url(../images/btn_submit_hov.png) no-repeat; } #fb_confirm_inline, #fb_error_report { display:none; }