TeamNRP-UEA Norwich/Template

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
body {
+
html, body {
-
background: #4e4241;
+
height: 100%;
-
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
+
}
 +
 
 +
body {
 +
margin: 0px;
 +
padding: 0px;
 +
background: #202223;
 +
font-family: 'Open Sans', sans-serif;
 +
font-size: 10pt;
 +
color: #707070;
 +
}
 +
 
 +
 
 +
h1, h2, h3 {
 +
margin: 0;
padding: 0;
padding: 0;
-
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 
-
color: #4e4241;
 
-
font-family: Verdana, Arial, Helvetica, sans-serif;
 
-
font-size: 100%;
 
}
}
-
#image_ecclestone {
+
 
-
height: 180px;
+
p, ol, ul {
-
width: 205px;
+
margin-top: 0px;
-
margin-left: 475px;
+
-
margin-top: 260px;
+
-
position: absolute;
+
}
}
-
#image_sneddon {
+
 
-
height: 180px;
+
p {
-
width: 205px;
+
line-height: 180%;
-
margin-left: 475px;
+
-
position: absolute;
+
-
margin-top: 40px;
+
}
}
-
#container {  
+
 
-
width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
+
strong {
-
background: #FFFFFF;
+
-
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
+
-
border: 1px solid #000000;
+
-
text-align: left; /* this overrides the text-align: center on the body element. */
+
}
}
 +
a {
 +
color: #FEE722;
 +
}
-
#floatright { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
+
a:hover {
-
float: right;
+
text-decoration: none;
-
margin-left: 8px;
+
}
}
-
#floatleft { /* this class can be used to float an element left in your page */
+
 
 +
a img {
 +
border: none;
 +
}
 +
 
 +
img.border {
 +
}
 +
 
 +
img.alignleft {
float: left;
float: left;
-
margin-right: 8px;
 
}
}
-
#clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
+
 
-
clear:both;
+
img.alignright {
-
    height:0;
+
float: right;
-
    font-size: 1px;
+
-
    line-height: 0px;
+
}
}
 +
 +
img.aligncenter {
 +
margin: 0px auto;
 +
}
 +
 +
hr {
 +
display: none;
 +
}
 +
 +
/** WRAPPER */
 +
 +
#wrapper {
 +
}
 +
 +
#banner-wrapper
 +
{
 +
overflow: hidden;
 +
height: 25em;
 +
background: url(images/img01.jpg) no-repeat top center;
 +
background-size: cover;
 +
}
 +
 +
#header-wrapper
 +
{
 +
background: #181818;
 +
}
 +
 +
.container {
 +
width: 1200px;
 +
margin: 0px auto;
 +
}
 +
 +
.clearfix {
 +
clear: both;
 +
}
 +
 +
/** HEADER */
 +
 +
#header {
 +
overflow: hidden;
 +
height: 60px;
 +
}
 +
 +
/** LOGO */
 +
#logo {
#logo {
-
height: 82px;
+
position: relative;
-
width: 104px;
+
float: left;
 +
width: 480px;
 +
}
 +
 
 +
#logo h1, #logo p {
 +
margin: 0px;
 +
line-height: normal;
 +
}
 +
 
 +
#logo h1 a {
 +
display: block;
position: absolute;
position: absolute;
-
background-color: #FFFFFF;
+
top: 0px;
 +
left: 0px;
 +
width: 100%;
 +
height: 100%;
 +
font-weight: 400;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
line-height: 60px;
 +
color: #FFF;
}
}
-
#header {
+
 
-
height: 82px;
+
/** MENU */
-
width: 640px;
+
 
-
margin-left: 120px;
+
#menu {
-
background-color: #00CC00;
+
float: right;
}
}
-
#title {
+
#menu ul {
-
font-family: "Lucida Calligraphy";
+
margin: 0px;
-
font-size: 46px;
+
-
text-align: center;
+
-
height: 60px;
+
-
margin-top: 10px;
+
padding: 0px;
padding: 0px;
 +
list-style: none;
 +
line-height: normal;
}
}
 +
#menu li {
 +
float: left;
 +
padding: 0px 2em;
 +
}
-
#main_content {
+
#menu a {
-
font-family: "Lucida Sans";
+
display: block;
-
font-size: 16px;
+
line-height: 60px;
-
color: 4e4241;
+
text-decoration: none;
-
height: 430px;
+
text-transform: uppercase;
-
width: 280px;
+
color: #FFF;
-
margin-left: 95px;
+
}
-
margin-top: 40px;
+
 
-
letter-spacing: normal;
+
#menu a:hover {
 +
text-decoration: underline;
 +
}
 +
 
 +
/** PAGE */
 +
 
 +
#page {
 +
overflow: hidden;
 +
padding: 5em 0em 0em 0em;
 +
}
 +
 
 +
/** CONTENT */
 +
 
 +
#content {
 +
float: left;
 +
width: 800px;
 +
}
 +
 
 +
.post {
 +
overflow: hidden;
 +
padding: 50px 50px 30px 50px;
 +
margin-bottom: 40px;
 +
border: 1px solid #E7EBED;
 +
border-radius: 8px;
 +
background: #FFF;
 +
}
 +
 
 +
.post a
 +
{
 +
color: #262626;
 +
}
 +
 
 +
.post .title {
 +
padding: 7px 0px 0px 0px;
 +
letter-spacing: -1px;
 +
}
 +
 
 +
.post .title a {
 +
border: none;
 +
font-size: 1.5em;
 +
letter-spacing: -2px;
 +
text-decoration: none;
 +
font-weight: 600;
 +
color: #222222;
 +
}
 +
 
 +
.post .meta {
 +
margin-bottom: 30px;
 +
padding: 10px 0px 0px 0px;
 +
text-align: left;
 +
font-weight: 300;
 +
}
 +
 
 +
.post .meta .date {
 +
float: left;
 +
}
 +
 
 +
.post .meta .posted {
 +
float: right;
 +
}
 +
 
 +
.post .meta a {
 +
}
 +
 
 +
.post .entry {
 +
padding: 0px 0px 40px 0px;
 +
text-align: justify;
 +
}
 +
 
 +
.links {
 +
padding-top: 20px;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
.more {
 +
display: block;
 +
float: left;
 +
width: 88px;
 +
padding: 5px 5px;
 +
margin-right: 10px;
 +
background: #222222;
 +
border-radius: 8px;
 +
color: #FFFFFF !important;
text-align: center;
text-align: center;
-
word-spacing: normal;
+
text-decoration: none;
-
padding: 0px;
+
}
}
-
#home_btn {
+
 
-
height: 49px;
+
.comments {
-
width: 107px;
+
display: block;
-
margin-top: 25px;
+
float: left;
-
margin-right: 0px;
+
width: 88px;
-
margin-bottom: 0px;
+
padding: 5px 5px;
-
margin-left: 95px;
+
background: #222222;
 +
color: #FFFFFF !important;
 +
border-radius: 8px;
 +
text-align: center;
 +
text-decoration: none;
}
}
-
#artists_btn {
+
 
-
height: 49px;
+
/** SIDEBAR */
-
width: 107px;
+
 
-
margin-left: 252px;
+
#sidebar {
-
margin-top: -49px;
+
float: right;
 +
width: 350px;
 +
padding-top: 5em;
}
}
-
#gallery_btn {
+
 
-
height: 49px;
+
#sidebar ul {
-
width: 107px;
+
margin: 0;
-
margin-top: -49px;
+
padding: 0;
-
margin-left: 409px;
+
list-style: none;
}
}
-
#contact_btn {
+
 
-
height: 49px;
+
#sidebar li {
-
width: 107px;
+
margin: 0;
-
margin-top: -49px;
+
padding: 0;
-
margin-left: 566px;
+
}
 +
 
 +
#sidebar li ul {
 +
margin: 0px 0px;
 +
padding-bottom: 60px;
 +
}
 +
 
 +
#sidebar li li {
 +
line-height: 40px;
 +
border-bottom: 1px solid #282A2B;
 +
margin: 0px 0px;
 +
border-left: none;
 +
}
 +
 
 +
#sidebar li li span {
 +
display: block;
 +
margin-top: -20px;
 +
padding: 0;
 +
font-size: 11px;
 +
font-style: italic;
 +
}
 +
 
 +
#sidebar li li a {
 +
color: #707070;
 +
}
 +
 
 +
#sidebar h2 {
 +
height: 38px;
 +
padding: 0px 0px 30px 0px;
 +
letter-spacing: -.5px;
 +
font-size: 1.8em;
 +
font-weight: 600;
 +
color: #FFFFFF;
 +
}
 +
 
 +
#sidebar p {
 +
margin: 0 0px;
 +
padding: 0px 30px 20px 30px;
 +
text-align: justify;
 +
}
 +
 
 +
#sidebar a {
 +
border: none;
 +
}
 +
 
 +
#sidebar a:hover {
 +
text-decoration: underline;
 +
}
 +
/* Footer */
 +
 
 +
#footer {
 +
overflow: hidden;
 +
padding: 3em 0em;
 +
border-top: 1px solid #282A2B;
 +
}
 +
 
 +
#footer p {
 +
text-align: center;
 +
}
 +
 
 +
#footer a {
 +
color: #6B6B6B;
}
}

Revision as of 19:55, 8 July 2013

html, body { height: 100%; }

body { margin: 0px; padding: 0px; background: #202223; font-family: 'Open Sans', sans-serif; font-size: 10pt; color: #707070; }


h1, h2, h3 { margin: 0; padding: 0; }

p, ol, ul { margin-top: 0px; }

p { line-height: 180%; }

strong { }

a { color: #FEE722; }

a:hover { text-decoration: none; }

a img { border: none; }

img.border { }

img.alignleft { float: left; }

img.alignright { float: right; }

img.aligncenter { margin: 0px auto; }

hr { display: none; }

/** WRAPPER */

  1. wrapper {

}

  1. banner-wrapper

{ overflow: hidden; height: 25em; background: url(images/img01.jpg) no-repeat top center; background-size: cover; }

  1. header-wrapper

{ background: #181818; }

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

.clearfix { clear: both; }

/** HEADER */

  1. header {

overflow: hidden; height: 60px; }

/** LOGO */

  1. logo {

position: relative; float: left; width: 480px; }

  1. logo h1, #logo p {

margin: 0px; line-height: normal; }

  1. logo h1 a {

display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-weight: 400; text-decoration: none; text-transform: uppercase; line-height: 60px; color: #FFF; }

/** MENU */

  1. menu {

float: right; }

  1. menu ul {

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

  1. menu li {

float: left; padding: 0px 2em; }

  1. menu a {

display: block; line-height: 60px; text-decoration: none; text-transform: uppercase; color: #FFF; }

  1. menu a:hover {

text-decoration: underline; }

/** PAGE */

  1. page {

overflow: hidden; padding: 5em 0em 0em 0em; }

/** CONTENT */

  1. content {

float: left; width: 800px; }

.post { overflow: hidden; padding: 50px 50px 30px 50px; margin-bottom: 40px; border: 1px solid #E7EBED; border-radius: 8px; background: #FFF; }

.post a { color: #262626; }

.post .title { padding: 7px 0px 0px 0px; letter-spacing: -1px; }

.post .title a { border: none; font-size: 1.5em; letter-spacing: -2px; text-decoration: none; font-weight: 600; color: #222222; }

.post .meta { margin-bottom: 30px; padding: 10px 0px 0px 0px; text-align: left; font-weight: 300; }

.post .meta .date { float: left; }

.post .meta .posted { float: right; }

.post .meta a { }

.post .entry { padding: 0px 0px 40px 0px; text-align: justify; }

.links { padding-top: 20px; margin-bottom: 30px; }

.more { display: block; float: left; width: 88px; padding: 5px 5px; margin-right: 10px; background: #222222; border-radius: 8px; color: #FFFFFF !important; text-align: center; text-decoration: none; }

.comments { display: block; float: left; width: 88px; padding: 5px 5px; background: #222222; color: #FFFFFF !important; border-radius: 8px; text-align: center; text-decoration: none; }

/** SIDEBAR */

  1. sidebar {

float: right; width: 350px; padding-top: 5em; }

  1. sidebar ul {

margin: 0; padding: 0; list-style: none; }

  1. sidebar li {

margin: 0; padding: 0; }

  1. sidebar li ul {

margin: 0px 0px; padding-bottom: 60px; }

  1. sidebar li li {

line-height: 40px; border-bottom: 1px solid #282A2B; margin: 0px 0px; border-left: none; }

  1. sidebar li li span {

display: block; margin-top: -20px; padding: 0; font-size: 11px; font-style: italic; }

  1. sidebar li li a {

color: #707070; }

  1. sidebar h2 {

height: 38px; padding: 0px 0px 30px 0px; letter-spacing: -.5px; font-size: 1.8em; font-weight: 600; color: #FFFFFF; }

  1. sidebar p {

margin: 0 0px; padding: 0px 30px 20px 30px; text-align: justify; }

  1. sidebar a {

border: none; }

  1. sidebar a:hover {

text-decoration: underline; } /* Footer */

  1. footer {

overflow: hidden; padding: 3em 0em; border-top: 1px solid #282A2B; }

  1. footer p {

text-align: center; }

  1. footer a {

color: #6B6B6B; }

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