"
TeamNRP-UEA Norwich/Template
From 2013.igem.org
html, body { height: 100%; }
body { margin: 0px; padding: 0px; background: rgba(0,0,0,.04); font-family: 'Source Sans Pro', sans-serif; font-size: 12pt; font-weight: 300; color: #363636; }
h1, h2, h3 {
margin: 0;
padding: 0;
}
p, ol, ul { margin-top: 0px; }
p { line-height: 190%; }
strong { }
a { color: #171717; }
a:hover { text-decoration: none; }
a img { border: none; }
.image { display: inline-block; }
.image img { display: block; width: 100%; }
.image-full { display: block; width: 100%; margin: 0 0 2em 0; }
.image-left { float: left; margin: 0 2em 2em 0; }
.image-centered { display: block; margin: 0 0 2em 0; }
.image-centered img { margin: 0 auto; width: auto; }
hr { display: none; }
/*********************************************************************************/
/* List Styles */
/*********************************************************************************/
ul.style1 { margin: 0; padding: 0; list-style: none; }
ul.style1 li { border-top: solid 1px #E5E5E5; padding: 0.80em 0; }
ul.style1 li:first-child { border-top: 0; padding-top: 0; }
ul.style2 { margin: 0; padding: 0; list-style: none; }
ul.style2 li { border-top: solid 1px #E5E5E5; padding: 0.80em 0; }
ul.style2 li:first-child { border-top: 0; padding-top: 0; }
/*********************************************************************************/ /* Social Icon Styles */ /*********************************************************************************/
ul.contact { margin: 0; padding: 1.5em 0em 2.5em 0em; list-style: none; }
ul.contact li { display: inline-block; padding: 0em 0.30em; font-size: 1em; }
ul.contact li span { display: none; margin: 0; padding: 0; }
ul.contact li a { color: #FFF; }
ul.contact li a:before { display: inline-block; background: #3f3f3f; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; color: #FFFFFF; }
ul.contact li a.icon-twitter:before { background: #2DAAE4; } ul.contact li a.icon-facebook:before { background: #39599F; } ul.contact li a.icon-dribbble:before { background: #C4376B; } ul.contact li a.icon-tumblr:before { background: #31516A; } ul.contact li a.icon-rss:before { background: #F2600B; }
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
.title { margin-bottom: 2em; text-transform: uppercase; }
.title h2 { letter-spacing: 0.20em; font-weight: 700; font-size: 2em; color: #9B0808; }
.title .byline { letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; font-size: 0.90em; color: #6F6F6F; }
/** WRAPPER */
- wrapper {
background: #FFFFFF url(images/bg01.png) repeat; }
- footer-wrapper
{ background: #0F0F0F; }
.container { width: 1200px; margin: 0px auto; }
.clearfix { clear: both; }
/*********************************************************************************/
/* Wrappers */
/*********************************************************************************/
- header-wrapper
{ overflow: hidden; height: 350px; background: url('images/banner.jpg') no-repeat top center; background-size: 100%; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header { position: relative; overflow: hidden; text-align: center; }
/*********************************************************************************/ /* Logo */ /*********************************************************************************/
#logo { width: 500px; height: 100px; margin: 0 auto; padding: 2em 0em; text-transform: uppercase; background: #9B0808; }
#logo h1 { letter-spacing: 0.10em; font-size: 3em; }
#logo p { letter-spacing: 0.10em; color: #FFF; }
#logo a { text-decoration: none; color: #FFF; }
/*********************************************************************************/ /* Banner */ /*********************************************************************************/
#banner { position: absolute; left: 0; overflow: hidden; z-index: 1; }
#banner .image { border: 5px solid #FFFFFF; }
/** MENU */
- menu-wrapper
{ background: #9B0808; }
- menu {
overflow: hidden; height: 100px; }
- menu ul {
margin: 0; padding: 0px 0px 0px 0px; list-style: none; line-height: normal; text-align: center; }
- menu li {
display: inline-block; }
- menu a {
display: block; letter-spacing: 1px; line-height: 100px; padding: 0 40px; text-decoration: none; text-align: center; text-transform: uppercase; font-size: 0.80em; font-weight: 600; border: none; color: #FFF; }
- menu a:hover, #menu .current_page_item a {
text-decoration: none; }
- menu .current_page_item a {
background: #800707; }
/** PAGE */
- page
{ position: relative; overflow: hidden; padding: 6em 0em 5em 0em; }
/** CONTENT */
- content
{ float: right; width: 790px; }
/*********************************************************************************/ /* Sidebar */ /*********************************************************************************/
#sidebar { float: left; width: 345px; }
#sidebar .title h2 { font-size: 1.6em; }
#sidebar .box1 { margin-bottom: 3em; }
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright { overflow: hidden; padding: 5em 0em; text-align: center; }
#copyright p { letter-spacing: 0.20em; text-align: center; text-transform: uppercase; font-size: 0.80em; color: #6F6F6F; }
#copyright a { text-decoration: none; color: #8C8C8C; }
/*********************************************************************************/ /* Welcome */ /*********************************************************************************/
#welcome { overflow: hidden; padding: 5em 0em; border-bottom: 1px solid #E5E5E5; text-align: center; }
#welcome h2 { letter-spacing: 0.20em; text-transform: uppercase; font-size: 2.6em; }
#welcome p { font-size: 1.3em; }
#welcome .byline { display: block; padding: 0em 0em 1.5em 0em; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; font-size: 1.2em; color: #6F6F6F; }
/*********************************************************************************/ /* Portfolio */ /*********************************************************************************/
#portfolio-wrapper { background: rgba(0,0,0,.04); padding: 6em 0em; }
#portfolio { overflow: hidden; }
#portfolio .title h2 { font-size: 1.2em; color: #9B0808; }
#portfolio .byline { font-size: 1em; color: #EEA7C1; }
#column1, #column2, #column3, #column4 { width: 282px; }
#column1, #column2 { float: left; margin-right: 24px; }
#column3 { float: left; }
#column4 { float: right; }
/*********************************************************************************/ /* Button Style */ /*********************************************************************************/
.button { display: inline-block; margin-top: 1.5em; padding: 0.50em 3em 0.50em 2em; background: #9B0808; letter-spacing: 0.20em; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 0.90em; color: #FFF; }
.button:before { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; color: #FFF; }
/*********************************************************************************/ /* Footer */ /*********************************************************************************/
#footer-wrapper { overflow: hidden; padding: 5em 0em; background: #1E1B1A; }
#footer { color: #ADADAD; }
#footer .title h2 { font-weight: 400; font-size: 1.2em; color: #FFF; }
#footer .title { border-color: #2D2926 !important; }
#footer .style1 li { border-color: #2D2926 !important; }
#footer .style1 a { letter-spacing: 0.10em; font-size:1em; color: #B1B1B1; }
#box1 { float: left; width: 354px; margin-right: 24px; padding-right: 30px; }
#box2 { float: left; width: 354px; margin-left: 24px; padding-right: 30px; }
#box3 { float: right; width: 344px; padding-left: 40px; }
