Team:Trieste/static/main.css
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | html, body { | |
- | + | margin: 0px; | |
- | + | padding: 0px; | |
- | + | border: 0px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #menu a { | |
- | + | color: white; | |
- | + | text-decoration: none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #header { | |
- | + | top: 0px; | |
- | + | right: 0px; | |
- | + | width: 100%; | |
- | + | height: 100px; | |
- | + | color: white; | |
- | + | background-image: url('img/header_bg.jpg'); | |
- | + | } | |
- | + | #header > h1 { | |
- | + | width: 28em; | |
- | + | position: relative; | |
- | + | left: 25%; | |
- | + | margin-left: 5%; | |
- | + | margin-bottom: 0px; | |
- | + | margin-top: 0.2em; | |
- | + | } | |
- | + | ||
- | + | #header > h3 { | |
- | + | width: 10em; | |
- | + | position: relative; | |
- | + | left: 25%; | |
- | + | margin-top: 0px; | |
- | + | padding-top: 0.5em; | |
- | + | margin-bottom: 0.2em; | |
+ | } | ||
- | + | #logo { | |
- | + | position: absolute; | |
- | + | top: 0px; | |
- | + | left: 10%; | |
- | + | width: 120px; | |
- | + | height: 200px; | |
- | + | background-image: url('img/logo_bg.png'); | |
+ | background-repeat: no-repeat; | ||
+ | } | ||
- | + | #menu { | |
- | + | width: 100%; | |
- | + | padding-top: 0.5em; | |
- | + | padding-bottom: 0.5em; | |
- | + | background-color: black; | |
- | + | color: white; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | #menu ul li{ | |
- | + | display: inline; | |
- | + | font-variant: small-caps; | |
- | + | font-size: 1.2em; | |
- | + | margin-left: 0.5em; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | #menu ul { | |
- | + | margin: 0px auto; | |
- | + | text-align: center; | |
- | + | } | |
- | + | ||
- | + | #menu img { | |
- | + | float: right; | |
- | + | position: relative; | |
- | + | bottom: 35px; | |
- | + | right: 10%; | |
- | + | background-color: white; | |
- | + | padding: 5px; | |
- | + | border-radius: 5px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | #container { | |
- | + | width: 100%; | |
- | + | background-color: #e7e7e7; | |
- | + | background-image: url('img/container_bg.jpg'); | |
- | + | background-repeat: no-repeat; | |
- | + | padding-bottom: 2em; | |
- | + | } | |
- | + | #content { | |
- | + | margin-left: auto; | |
- | + | margin-right: auto; | |
- | + | padding-top: 10em; | |
- | + | width: 970px; | |
- | + | background-image: url('img/content_bg.jpg'); | |
- | + | background-color: white; | |
- | + | background-repeat: no-repeat; | |
- | + | border-bottom-right-radius: 5px; | |
- | + | border-bottom-left-radius: 5px; | |
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | #footer { | ||
+ | width: 990px; | ||
+ | background-color: white; | ||
+ | padding-top: 0.2em; | ||
+ | margin-top: 2px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | #footer img { | ||
+ | margin-top: 0px; | ||
+ | margin-left: 2em; | ||
+ | margin-bottom: 2em; | ||
+ | } | ||
+ | |||
+ | #footer h1 { | ||
+ | margin-left: 1.5em; | ||
+ | } | ||
+ | |||
+ | .column { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #col1 { | ||
+ | width: 36%; | ||
+ | right: 10px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | #col1 .inner_column { | ||
+ | border-top-right-radius: 25px; | ||
+ | } | ||
+ | |||
+ | #col2 { | ||
+ | width: 36%; | ||
+ | margin-left: 35%; | ||
+ | z-index: 3 | ||
+ | } | ||
+ | |||
+ | #col3 { | ||
+ | width: 30%; | ||
+ | margin-top: 5em; | ||
+ | left: 10px; | ||
+ | float: right; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | .inner_column { | ||
+ | position: relative; | ||
+ | padding: 0.5em 2em; | ||
+ | border-radius: 5px; | ||
+ | background-color: white; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | div.column h2 { | ||
+ | font-variant: small-caps; | ||
+ | font-size: 1.3em; | ||
+ | font-style: normal; | ||
+ | padding-bottom: 0.8em; | ||
+ | border-bottom: 1px dotted; | ||
+ | } | ||
+ | |||
+ | #content h1 { | ||
+ | position: relative; | ||
+ | top: 25px; | ||
+ | right: 10px; | ||
+ | height: 2em; | ||
+ | color: white; | ||
+ | background-image: url('img/blue_bg.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | padding-top: 0.7em; | ||
+ | padding-left: 1em; | ||
+ | margin: 0px; | ||
+ | } |
Revision as of 08:56, 31 July 2012
html, body {
margin: 0px; padding: 0px; border: 0px;
}
- menu a {
color: white; text-decoration: none;
}
- header {
top: 0px; right: 0px; width: 100%; height: 100px; color: white; background-image: url('img/header_bg.jpg');
}
- header > h1 {
width: 28em; position: relative; left: 25%; margin-left: 5%; margin-bottom: 0px; margin-top: 0.2em;
}
- header > h3 {
width: 10em; position: relative; left: 25%; margin-top: 0px; padding-top: 0.5em; margin-bottom: 0.2em;
}
- logo {
position: absolute; top: 0px; left: 10%; width: 120px; height: 200px; background-image: url('img/logo_bg.png'); background-repeat: no-repeat;
}
- menu {
width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; background-color: black; color: white;
}
- menu ul li{
display: inline; font-variant: small-caps; font-size: 1.2em; margin-left: 0.5em;
}
- menu ul {
margin: 0px auto; text-align: center;
}
- menu img {
float: right; position: relative; bottom: 35px; right: 10%; background-color: white; padding: 5px; border-radius: 5px;
}
- container {
width: 100%; background-color: #e7e7e7; background-image: url('img/container_bg.jpg'); background-repeat: no-repeat; padding-bottom: 2em;
}
- content {
margin-left: auto; margin-right: auto; padding-top: 10em; width: 970px; background-image: url('img/content_bg.jpg'); background-color: white; background-repeat: no-repeat; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; text-align: justify;
}
- footer {
width: 990px; background-color: white; padding-top: 0.2em; margin-top: 2px; margin-right: auto; margin-left: auto; border-radius: 5px;
}
- footer img {
margin-top: 0px; margin-left: 2em; margin-bottom: 2em;
}
- footer h1 {
margin-left: 1.5em;
}
.column {
position: relative;
}
- col1 {
width: 36%; right: 10px; float: left;
}
- col1 .inner_column {
border-top-right-radius: 25px;
}
- col2 {
width: 36%; margin-left: 35%; z-index: 3
}
- col3 {
width: 30%; margin-top: 5em; left: 10px; float: right; z-index: 5;
}
.inner_column {
position: relative; padding: 0.5em 2em; border-radius: 5px; background-color: white; z-index: 1;
}
div.column h2 {
font-variant: small-caps; font-size: 1.3em; font-style: normal; padding-bottom: 0.8em; border-bottom: 1px dotted;
}
- content h1 {
position: relative; top: 25px; right: 10px; height: 2em; color: white; background-image: url('img/blue_bg.png'); background-repeat: no-repeat; padding-top: 0.7em; padding-left: 1em; margin: 0px;
}