"
Template:Team:ProtoCat/CSS
From 2014.igem.org
/* Theme Name: 1stwebdesigner HTML5/CSS3 Layout Date: March 2013 Description: Basic HTML5/CSS3 layout built on a responsive framework Version: 1.0 Author: Christian Vasile Author URL: http://christianvasile.com
- /
/* ===========================
======= Body style ======== =========================== */
body { background-image: url('img/bg.png'); color: black; font-size: 87.5%; /* Base font size: 14px */ font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; }
.body { clear: both; margin: 0 auto; width: 70%; }
/* ===========================
========= Headings ======== =========================== */
h2 {font-size: 1.571em} /* 22px */ h3 {font-size: 1.429em} /* 20px */ h4 {font-size: 1.286em} /* 18px */ h5 {font-size: 1.143em} /* 16px */ h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; color: black; }
/* ===========================
======= Anchor style ====== =========================== */
a { outline: 0; }
a:link, a:visited {
color: black;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active { background-color: #B9D3E3; color: #fff; text-decoration: none; }
/* ===========================
===== Main Navigation ===== =========================== */
.mainHeader h1 { font-size: 400%; text-align: center; float: none; margin: 3% 0 3% 0; color: #4682B4; }
.mainHeader nav { background: #4682B4; font-size: 1.143em; height: 40px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.mainHeader nav ul { list-style: none; margin: 0 auto; }
.mainHeader nav ul li { float: left; display: inline; }
.mainHeader nav a:link, .mainHeader nav a:visited { text-transform: uppercase; color: #FFFFFF; display: inline-block; height: 30px; padding: 5px 23px; text-decoration: none; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #B9D3E3; color: #FFFFFF; text-shadow: none !important; }
.mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
/* ===========================
======= Content Area ====== =========================== */
.mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: left; }
.mainContent img { border: 0px; text-decoration: none; float: left; width: 68%; height: auto; margin: 0 0 1% 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-bottom: 3%; float: left; }
.content { width: 68%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
/* ===========================
======== Sidebar ========== =========================== */
.top-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; }
.middle-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; }
.bottom-sidebar { width: 22%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; }
/* ===========================
========= Footer ========== =========================== */
.mainFooter { width: 100%; float: left; margin-top: 2%; margin-bottom: 2%; padding-left: 0; background-color: #4682B4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; }
.mainFooter p { width: 91%; margin: 2% auto; }
/* ===========================
====== Media Queries ====== =========================== */
@media only screen and (min-width : 150px) and (max-width : 780px) { .body { clear: both; margin: 0 auto; width: 90%; font-size: 90%; }
.mainHeader nav { background: #666; font-size: 1.143em; height: 160px; line-height: 30px; margin-bottom: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.mainHeader nav ul { list-style: none; margin: 0 auto; padding-left: 0; }
.mainHeader nav li { margin-left: 0 auto; width: 100%; }
.mainHeader nav a:link, .mainHeader nav a:visited { color: #FFF; display: block; height: 30px; padding: 5px 0; text-decoration: none; }
.mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; }
.mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.mainHeader img { width: 68%; height: auto; }
.mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 4%; margin-bottom: 2%; }
.topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2% 5%; margin-bottom: 4%; }
.content { width: 100%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.top-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; }
.top-sidebar p { width: 90%; }
.middle-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; }
.middle-sidebar p { width: 90%; }
.bottom-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0%; padding: 0 7%; margin-bottom: 1%; }
.bottom-sidebar p { width: 90%; }
.mainFooter { width: 100%; float: left; margin: 2% 0; padding-left: 0; background-color: #B9D3E3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; }
.mainFooter p { width: 86%; margin: 2% auto; } }
