"
Template:Team:Michigan Software/CSS
From 2014.igem.org
(Replaced content with "TEST") |
|||
| Line 1: | Line 1: | ||
| - | + | /* | |
| + | 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; | ||
| + | } | ||
| + | } | ||
Revision as of 00:31, 8 October 2014
/* 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; } }
