TeamNRP-UEA Norwich/Template

From 2013.igem.org

(Difference between revisions)
(Created page with " - →Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License: body { margin: 0; padding: 0; backgroun...")
Line 1: Line 1:
-
 
+
html, body {
-
/*
+
height: 100%;
-
Design by Free CSS Templates
+
}
-
http://www.freecsstemplates.org
+
-
Released for free under a Creative Commons Attribution 2.5 License
+
-
*/
+
body {
body {
-
margin: 0;
+
margin: 0px;
-
padding: 0;
+
padding: 0px;
-
background: #0048B3 url(images/img01.png) repeat;
+
background: rgba(0,0,0,.04);
-
font-family: Tahoma, Geneva, sans-serif;
+
font-family: 'Source Sans Pro', sans-serif;
-
font-size: 13px;
+
font-size: 12pt;
-
color: #626262;
+
font-weight: 300;
 +
color: #363636;
}
}
 +
h1, h2, h3 {
h1, h2, h3 {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
-
text-transform: lowercase;
 
-
font-family: 'Oswald', sans-serif;
 
-
font-weight: 300;
 
-
color: #7D7764;
 
-
}
 
-
 
-
h1 {
 
-
font-size: 2em;
 
-
}
 
-
 
-
h2 {
 
-
font-size: 2.8em;
 
}
}
-
h3 {
+
p, ol, ul {
-
font-size: 1.6em;
+
margin-top: 0px;
}
}
-
p, ul, ol {
+
p {
-
margin-top: 0;
+
line-height: 190%;
-
line-height: 180%;
+
}
}
-
ul, ol {
+
strong {
}
}
a {
a {
-
text-decoration: none;
+
color: #171717;
-
color: #C1002D;
+
}
}
a:hover {
a:hover {
 +
text-decoration: none;
}
}
-
#wrapper {
+
a img {
-
overflow: hidden;
+
border: none;
-
background: #FFFFFF url(images/img02.png) no-repeat center top;
+
}
}
-
.container {
+
.image
-
width: 1200px;
+
{
-
margin: 0px auto;
+
display: inline-block;
-
}
+
}
 +
 +
.image img
 +
{
 +
display: block;
 +
width: 100%;
 +
}
-
/* Header */
+
.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;
 +
}
-
#header-wrapper {
+
.image-centered img
-
overflow: hidden;
+
{
-
height: 600px;
+
margin: 0 auto;
-
}
+
width: auto;
 +
}
-
#header {
+
hr {
-
width: 1200px;
+
display: none;
-
height: 550px;
+
-
margin: 0 auto;
+
}
}
-
/* Logo */
 
-
#logo {
+
/*********************************************************************************/
-
overflow: hidden;
+
/* List Styles                                                                  */
-
font-family: 'Oswald', sans-serif;
+
/*********************************************************************************/
-
}
+
-
#logo h1, #logo p {
+
ul.style1
-
text-transform: uppercase;
+
{
-
}
+
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;
 +
}
-
#logo h1 {
+
ul.style2
-
padding: 200px 0px 0px 50px;
+
{
-
letter-spacing: -1px;
+
margin: 0;
-
font-size: 100px;
+
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                                                            */
 +
/*********************************************************************************/
-
#logo p {
+
ul.contact
-
margin-top: -20px;
+
{
-
padding: 0px 0px 0px 55px;
+
margin: 0;
 +
padding: 1.5em 0em 2.5em 0em;
 +
list-style: none;
 +
}
-
font-size: 20px;
+
ul.contact li
-
font-weight: 300;
+
{
-
color: #B8D1EE;
+
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; }
-
#logo p a {
 
-
color: #696969;
 
-
}
 
-
#logo a {
+
/*********************************************************************************/
-
border: none;
+
/* Heading Titles                                                                */
-
background: none;
+
/*********************************************************************************/
-
text-decoration: none;
+
-
color: #FFFFFF;
+
-
}
+
-
/* Menu */
+
.title
 +
{
 +
margin-bottom: 2em;
 +
text-transform: uppercase;
 +
}
-
#menu-wrapper {
+
.title h2
-
overflow: hidden;
+
{
-
height: 80px;
+
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;
 +
}
-
#menu {
+
/** WRAPPER */
-
overflow: hidden;
+
-
height: 80px;
+
-
background: #b2002a;
+
-
}
+
-
#menu ul {
+
#wrapper {
-
margin: 0;
+
background: #FFFFFF url(images/bg01.png) repeat;
-
padding: 0px 0px 0px 0px;
+
-
list-style: none;
+
-
line-height: normal;
+
-
font-family: 'Oswald', sans-serif;
+
}
}
-
#menu li {
+
#footer-wrapper
-
display: inline-block;
+
{
-
border-right: 1px solid #fc2c5d;
+
background: #0F0F0F;
}
}
-
#menu a {
+
.container {
-
display: block;
+
width: 1200px;
-
height: 80px;
+
margin: 0px auto;
-
margin: 0px;
+
-
padding: 0px 30px;
+
-
line-height: 80px;
+
-
text-decoration: none;
+
-
text-transform: lowercase;
+
-
text-transform: uppercase;
+
-
font-size: 20px;
+
-
font-weight: 300;
+
-
color: #FFFFFF;
+
-
border: none;
+
}
}
-
#menu a:hover, #menu .current_page_item a {
+
.clearfix {
-
background: #d50032;
+
clear: both;
-
text-decoration: none;
+
-
color: #FFFFFF;
+
}
}
-
#menu .current_page_item a {
 
-
}
 
-
/* Page */
+
/*********************************************************************************/
 +
/* Wrappers                                                                      */
 +
/*********************************************************************************/
-
#page {
+
#header-wrapper
 +
{
overflow: hidden;
overflow: hidden;
-
padding: 50px 0px 40px 0px;
+
height: 350px;
 +
background: url('images/banner.jpg') no-repeat top center;
 +
background-size: 100%;
}
}
-
/* Content */
 
-
#content {
+
/*********************************************************************************/
-
float: left;
+
/* Header                                                                        */
-
width: 690px;
+
/*********************************************************************************/
-
margin-right: 24px;
+
-
padding: 0px 0px 0px 0px;
+
-
}
+
-
#content h2 {
+
#header
-
padding: 0px 0px 20px 0px;
+
{
-
text-transform: uppercase;
+
position: relative;
-
font-size: 3em;
+
overflow: hidden;
-
font-weight: 200;
+
text-align: center;
-
color: #262626;
+
}
-
}
+
-
/* Sidebar */
+
/*********************************************************************************/
 +
/* Logo                                                                          */
 +
/*********************************************************************************/
-
#sidebar1 {
+
#logo
-
float: left;
+
{
-
width: 180px;
+
width: 500px;
-
margin: 0px;
+
height: 100px;
-
padding: 0px 0px 0px 0px;
+
margin: 0 auto;
-
color: #787878;
+
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;
 +
}
-
#sidebar1 h2 {
+
/*********************************************************************************/
-
padding: 0px 0px 20px 0px;
+
/* Banner                                                                        */
-
text-transform: uppercase;
+
/*********************************************************************************/
-
font-size: 1.5em;
+
-
font-weight: 200;
+
-
color: #C1002D;
+
-
}
+
-
#sidebar2 {
+
#banner
-
float: right;
+
{
-
width: 282px;
+
position: absolute;
-
margin: 0px;
+
left: 0;
-
padding: 0px 0px 0px 0px;
+
overflow: hidden;
-
color: #787878;
+
z-index: 1;
-
}
+
}
 +
 +
#banner .image
 +
{
 +
border: 5px solid #FFFFFF;
 +
}
 +
-
#sidebar2 h2 {
+
/** MENU */
-
padding: 0px 0px 20px 0px;
+
-
text-transform: uppercase;
+
-
font-size: 1.5em;
+
-
font-weight: 200;
+
-
color: #C1002D;
+
-
}
+
-
#sidebar2 a {
+
#menu-wrapper
-
border: none;
+
{
 +
background: #9B0808;
}
}
-
#sidebar2 a:hover {
+
#menu {
-
text-decoration: underline;
+
-
}
+
-
 
+
-
/* Three Column Footer Content */
+
-
 
+
-
 
+
-
#footer-bg {
+
overflow: hidden;
overflow: hidden;
-
padding: 50px 0px;
 
-
}
 
-
 
-
#footer-content {
 
-
color: #FFB3C5;
 
-
}
 
-
 
-
#footer-content h2 {
 
-
margin: 0px;
 
-
padding: 0px 0px 20px 0px;
 
-
letter-spacing: 1px;
 
-
text-transform: uppercase;
 
-
font-size: 20px;
 
-
font-weight: 200;
 
-
color: #FFFFFF;
 
-
}
 
-
 
-
#footer-content a {
 
-
color: #FFB3C5;
 
-
}
 
-
 
-
#footer-content a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
 
-
#column1 {
 
-
float: left;
 
-
width: 280px;
 
-
margin-right: 30px;
 
-
}
 
-
 
-
#column1 p {
 
-
line-height: 1;
 
-
}
 
-
 
-
#column2 {
 
-
float: left;
 
-
width: 280px;
 
-
margin-right: 30px;
 
-
}
 
-
 
-
#column3 {
 
-
float: left;
 
-
width: 280px;
 
-
}
 
-
 
-
#column4 {
 
-
float: right;
 
-
width: 260px;
 
-
}
 
-
 
-
 
-
/* Footer */
 
-
 
-
#footer {
 
height: 100px;
height: 100px;
-
margin: 0 auto;
 
-
padding: 50px 0px 0px 0px;
 
}
}
-
#footer p {
+
#menu ul {
margin: 0;
margin: 0;
-
padding-top: 10px;
+
padding: 0px 0px 0px 0px;
 +
list-style: none;
line-height: normal;
line-height: normal;
text-align: center;
text-align: center;
-
color: #C59C9C;
 
}
}
-
#footer a {
+
#menu li {
-
color: #C59C9C;
+
display: inline-block;
}
}
-
#marketing {
+
#menu a {
-
overflow: hidden;
+
-
margin-bottom: 30px;
+
-
padding: 20px 0px 10px 0px;
+
-
border-top: 1px solid #E3E3E3;
+
-
border-bottom: 1px solid #E3E3E3;
+
-
}
+
-
 
+
-
#marketing .text1 {
+
-
float: left;
+
-
margin: 0px;
+
-
padding: 0px;
+
-
letter-spacing: -2px;
+
-
text-transform: lowercase;
+
-
font-size: 34px;
+
-
color: #345E9B;
+
-
}
+
-
 
+
-
#marketing .text2 {
+
-
float: right;
+
-
}
+
-
 
+
-
#marketing .text2 a {
+
display: block;
display: block;
-
width: 252px;
+
letter-spacing: 1px;
-
height: 38px;
+
line-height: 100px;
-
padding: 15px 0px 0px 0px;
+
padding: 0 40px;
-
background: url(images/img07.jpg) no-repeat left top;
+
text-decoration: none;
-
letter-spacing: -2px;
+
text-align: center;
text-align: center;
-
text-transform: lowercase;
+
text-transform: uppercase;
-
font-size: 30px;
+
font-size: 0.80em;
-
color: #FFFFFF;
+
font-weight: 600;
 +
border: none;
 +
color: #FFF;
}
}
-
.box1 {
+
#menu a:hover, #menu .current_page_item a {
-
overflow: hidden;
+
text-decoration: none;
-
height: 300px;
+
}
}
-
.list-style1 {
+
#menu .current_page_item a {
-
margin: 0px;
+
background: #800707;
-
padding: 0px;
+
-
list-style: none;
+
}
}
-
.list-style1 li {
+
/** PAGE */
-
padding: 7px 0px 7px 0px;
+
-
border-top: 1px dashed #E7E2DC;
+
-
}
+
-
.list-style1 .first {
+
#page
-
padding-top: 0px;
+
{
-
border-top: none;
+
position: relative;
 +
overflow: hidden;
 +
padding: 6em 0em 5em 0em;
}
}
-
.list-style2 {
+
/** CONTENT */
-
margin: 0px;
+
-
padding: 0px;
+
-
list-style: none;
+
-
}
+
-
.list-style2 li {
+
#content
-
padding: 5px 0px 5px 0px;
+
{
-
border-top: 1px solid #EEEEEE;
+
float: right;
 +
width: 790px;
}
}
-
.list-style2 a {
+
/*********************************************************************************/
-
padding-left: 15px;
+
/* Sidebar                                                                      */
-
background: url(images/img10.png) no-repeat left 50%;
+
/*********************************************************************************/
-
color: #717171;
+
-
}
+
-
.list-style2 a:hover {
+
#sidebar
-
text-decoration: underline;
+
{
-
color: #606060;
+
float: left;
-
}
+
width: 345px;
 +
}
 +
 +
#sidebar .title h2
 +
{
 +
font-size: 1.6em;
 +
}
 +
 +
#sidebar .box1
 +
{
 +
margin-bottom: 3em;
 +
}
-
.list-style2 .first {
 
-
padding-top: 0px;
 
-
border: none;
 
-
}
 
-
.list-style3 {
+
/*********************************************************************************/
-
margin: 0px;
+
/* Copyright                                                                    */
-
padding: 0px;
+
/*********************************************************************************/
-
list-style: none;
+
-
}
+
-
.list-style3 li {
+
#copyright
-
padding: 5px 0px 5px 0px;
+
{
-
border-top: 1px solid #890020;
+
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;
 +
}
-
.list-style3 a {
+
/*********************************************************************************/
-
padding-left: 15px;
+
/* Welcome                                                                      */
-
background: url(images/img10.png) no-repeat left 50%;
+
/*********************************************************************************/
-
color: #FFB3C5;
+
-
}
+
-
.list-style3 a:hover {
+
#welcome
-
text-decoration: underline;
+
{
-
}
+
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;
 +
}
-
.list-style3 .first {
+
#welcome .byline
-
padding-top: 0px;
+
{
-
background: none;
+
display: block;
-
border: none;
+
padding: 0em 0em 1.5em 0em;
-
}
+
letter-spacing: 0.15em;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-size: 1.2em;
 +
color: #6F6F6F;
 +
}
 +
/*********************************************************************************/
 +
/* Portfolio                                                                    */
 +
/*********************************************************************************/
-
/* Three Column Content */
+
#portfolio-wrapper
 +
{
 +
background: rgba(0,0,0,.04);
 +
padding: 6em 0em;
 +
}
 +
 +
#portfolio
 +
{
 +
overflow: hidden;
 +
}
 +
 +
#portfolio .title h2
 +
{
 +
font-size: 1.2em;
 +
color: #9B0808;
 +
}
-
#four-column {
+
#portfolio .byline
-
overflow: hidden;
+
{
-
padding: 30px 0px 30px 0px;
+
font-size: 1em;
-
border-top: 1px solid #EEEEEE;
+
color: #EEA7C1;
-
color: #626262;
+
}
-
}
+
 +
#column1,
 +
#column2,
 +
#column3,
 +
#column4
 +
{
 +
width: 282px;
 +
}
 +
 +
#column1,
 +
#column2
 +
{
 +
float: left;
 +
margin-right: 24px;
 +
}
 +
 +
#column3
 +
{
 +
float: left;
 +
}
 +
 +
#column4
 +
{
 +
float: right;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Button Style                                                                  */
 +
/*********************************************************************************/
-
#four-column #tbox1 {
+
.button
-
float: left;
+
{
-
width: 282px;
+
display: inline-block;
-
margin-right: 24px;
+
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;
 +
}
-
#four-column #tbox2 {
+
/*********************************************************************************/
-
float: left;
+
/* Footer                                                                        */
-
width: 282px;
+
/*********************************************************************************/
-
margin-right: 24px;
+
-
}
+
#footer-wrapper
 +
{
 +
overflow: hidden;
 +
padding: 5em 0em;
 +
background: #1E1B1A;
 +
}
-
#four-column #tbox3 {
+
#footer
-
float: left;
+
{
-
width: 282px;
+
color: #ADADAD;
-
}
+
}
 +
 +
#footer .title h2
 +
{
 +
font-weight: 400;
 +
font-size: 1.2em;
 +
color: #FFF;
 +
}
-
#four-column #tbox4 {
+
#footer .title
-
float: right;
+
{
-
width: 282px;
+
border-color: #2D2926 !important;
-
}
+
}
-
 
+
-
.box-style {
+
#footer .style1 li
-
background: #191919 url(images/img05.jpg) repeat;
+
{
-
}
+
border-color: #2D2926 !important;
-
 
+
}
-
.box-style h2 {
+
-
padding: 10px 0px;
+
#footer .style1 a
-
letter-spacing: -1px;
+
{
-
text-transform: uppercase;
+
letter-spacing: 0.10em;
-
font-size: 20px;
+
font-size:1em;
-
font-weight: 200;
+
color: #B1B1B1;
-
color: #515151;
+
}
-
}
+
-
 
+
#box1
-
.box-style .image {
+
{
-
width: 320px;
+
float: left;
-
}
+
width: 354px;
-
 
+
margin-right: 24px;
-
.box-style .arrow {
+
padding-right: 30px;
-
background: url(images/img06.png) no-repeat right top;
+
}
-
}
+
-
 
+
#box2
-
.box-style .content {
+
{
-
overflow: hidden;
+
float: left;
-
padding: 30px;
+
width: 354px;
-
}
+
margin-left: 24px;
-
 
+
padding-right: 30px;
-
 
+
}
-
.divider {
+
-
overflow: hidden;
+
#box3
-
height: 50px;
+
{
-
background: url(images/img04.png) no-repeat center top;
+
float: right;
-
}
+
width: 344px;
 +
padding-left: 40px;
 +
}

Revision as of 19:50, 8 July 2013

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 */

  1. wrapper {

background: #FFFFFF url(images/bg01.png) repeat; }

  1. footer-wrapper

{ background: #0F0F0F; }

.container { width: 1200px; margin: 0px auto; }

.clearfix { clear: both; }


/*********************************************************************************/ /* Wrappers */ /*********************************************************************************/

  1. 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 */

  1. menu-wrapper

{ background: #9B0808; }

  1. menu {

overflow: hidden; height: 100px; }

  1. menu ul {

margin: 0; padding: 0px 0px 0px 0px; list-style: none; line-height: normal; text-align: center; }

  1. menu li {

display: inline-block; }

  1. 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; }

  1. menu a:hover, #menu .current_page_item a {

text-decoration: none; }

  1. menu .current_page_item a {

background: #800707; }

/** PAGE */

  1. page

{ position: relative; overflow: hidden; padding: 6em 0em 5em 0em; }

/** CONTENT */

  1. 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; }

Retrieved from "http://2013.igem.org/TeamNRP-UEA_Norwich/Template"