Template:Team:Amsterdam/stylesheet
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
- | #top-section { height: 0px; margin: 0px; margin-left: auto; margin-right: auto; background-color:black; margin-bottom: 0 !important;} | + | /* |
- | #menubar.left-menu { background-color:black; width:975px; float:left; border: none;} | + | //html,body { height:100%; } |
- | #menubar.right-menu li a{ background-color:black;} | + | |
- | #menubar.left-menu a {color:white;} | + | #globalWrapper { |
- | #menubar.right-menu a {color:white;} | + | padding: 0; |
- | #search-controls {display:none; } | + | } |
- | #contentgrid {padding-left:25px;padding-right:25px;width:900px;border: 1px solid #529bc7 background-color: black; margin-left:-6px; margin-bottom:-5px; } | + | */ |
- | .firstHeading{width: 0px; height: 0px; margin-bottom: 0px; display: none; position: relative; top:0; left:0; margin:0;} | + | |
+ | html, body, #globalWrapper{ | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | height: 100% | ||
+ | } | ||
+ | |||
+ | #contentSub { | ||
+ | margin-bottom: 1em; | ||
+ | } | ||
+ | |||
+ | #content{ | ||
+ | min-height: 100%; | ||
+ | border-left: 1px solid #919396; | ||
+ | border-right: 1px solid #919396; | ||
+ | box-shadow: 0 0 5px #000000, 0 0 120px 10px #000000; | ||
+ | background: -moz-linear-gradient(left, rgba(255,255,255,0.75) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0.75) 100%); | ||
+ | background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.75)), color-stop(25%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.75))); | ||
+ | background: -webkit-linear-gradient(left, rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.75) 100%); | ||
+ | background: -o-linear-gradient(left, rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.75) 100%); | ||
+ | background: -ms-linear-gradient(left, rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.75) 100%); | ||
+ | background: linear-gradient(to right, rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.75) 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#bfffffff',GradientType=1 ); | ||
+ | } | ||
+ | |||
+ | #footer-box, #catlinks, #bodyContent > p, #p-logo{ /* Hide couple of default elements */ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #top-section { | ||
+ | height: 0px; | ||
+ | margin: 0px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color:black; | ||
+ | margin-bottom: 0 !important; | ||
+ | } | ||
+ | |||
+ | #menubar.left-menu { | ||
+ | background-color:black; | ||
+ | width:975px; | ||
+ | float:left; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #menubar.right-menu li a{ | ||
+ | background-color:black; | ||
+ | } | ||
+ | |||
+ | #menubar.left-menu a { | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | #menubar.right-menu a { | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #contentgrid { | ||
+ | padding-left:25px; | ||
+ | padding-right:25px; | ||
+ | width:900px; | ||
+ | border: 1px solid #529bc7 background-color: black; | ||
+ | margin-left:-6px; | ||
+ | margin-bottom:-5px; | ||
+ | } | ||
+ | |||
+ | .firstHeading{ | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | display: none; | ||
+ | position: relative; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
body { | body { | ||
- | text-align: center; | + | text-align: center; |
- | font-family: Arial, Helvetica, sans-serif; | + | font-family: Arial, Helvetica, sans-serif; |
- | font-size: 11px; | + | font-size: 11px; |
- | + | //font-family: Gill Sans, Gill Sans MT, sans-serif; | |
+ | //font-size: 13px; | ||
+ | background: #004083 url(https://static.igem.org/mediawiki/2012/thumb/2/23/DNATilingBGv1GrayscaleInverseO25.png/152px-DNATilingBGv1GrayscaleInverseO25.png) repeat; | ||
} | } | ||
+ | |||
/*Defining the columns */ | /*Defining the columns */ | ||
#total { | #total { | ||
- | background-color: white; | + | background-color: white; |
- | width: 100%; | + | width: 100%; |
- | margin-right: 0em; | + | margin-right: 0em; |
- | margin-left: 0em; | + | margin-left: 0em; |
- | margin-top: 0em; | + | margin-top: 0em; |
- | text-align: left; | + | text-align: left; |
- | z-index: 0; | + | z-index: 0; |
} | } | ||
- | # | + | |
- | float: left; | + | #menu { |
- | + | float: left; | |
- | width: | + | width: 100%; |
- | text-align: center; | + | text-align: center; |
- | background-color: | + | //background-color: black; |
+ | background-color: #004083; | ||
+ | padding: 10px 0; | ||
} | } | ||
- | # | + | |
- | + | #main { | |
- | + | overflow: hidden; | |
- | width: | + | border-style:solid; |
- | + | border-width:2px 1px; | |
- | + | border-radius: 30px; | |
+ | color: #333333; | ||
+ | box-shadow: 0 0 3px 1px #000000; | ||
} | } | ||
- | # | + | |
- | float: left; | + | #main-bg { |
- | + | float: left; | |
- | + | //background: rgba(255, 255, 255, 0.5); | |
- | + | background: -moz-linear-gradient(top, rgba(0,64,131,1) 0%, rgba(0,64,131,0) 35%, rgba(0,64,131,0) 65%, rgba(0,64,131,1) 100%); | |
- | background- | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,64,131,1)), color-stop(35%,rgba(0,64,131,0)), color-stop(65%,rgba(0,64,131,0)), color-stop(100%,rgba(0,64,131,1))); |
+ | background: -webkit-linear-gradient(top, rgba(0,64,131,1) 0%,rgba(0,64,131,0) 35%,rgba(0,64,131,0) 65%,rgba(0,64,131,1) 100%); | ||
+ | background: -o-linear-gradient(top, rgba(0,64,131,1) 0%,rgba(0,64,131,0) 35%,rgba(0,64,131,0) 65%,rgba(0,64,131,1) 100%); | ||
+ | background: -ms-linear-gradient(top, rgba(0,64,131,1) 0%,rgba(0,64,131,0) 35%,rgba(0,64,131,0) 65%,rgba(0,64,131,1) 100%); | ||
+ | background: linear-gradient(to bottom, rgba(0,64,131,1) 0%,rgba(0,64,131,0) 35%,rgba(0,64,131,0) 65%,rgba(0,64,131,1) 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004083', endColorstr='#004083',GradientType=0 ); | ||
+ | |||
} | } | ||
- | # | + | |
- | float: left; | + | #main-content{ |
- | + | display: block; | |
- | + | float: left; | |
- | border: | + | width: 667px; |
- | text-align: | + | background-color: white; |
- | + | background-color: rgba(255, 255, 255, 0.90); | |
+ | border-style:solid; | ||
+ | border-width:1px; | ||
+ | margin: 4px; | ||
+ | margin-right: 2px; | ||
+ | padding: 15px; | ||
+ | text-align:justify; | ||
+ | box-shadow: inset 0 0 1px 0.4px | ||
} | } | ||
- | # | + | |
- | float: | + | #main-sidebar-right{ |
- | width: | + | display: block; |
- | + | float: right; | |
- | background-color: | + | width: 240px; |
- | + | align: center; | |
+ | background-color: white; | ||
+ | background-color: rgba(255, 255, 255, 0.90); | ||
+ | border-style:solid; | ||
+ | border-width:1px; | ||
+ | margin: 4px; | ||
+ | margin-left: 2px; | ||
+ | padding: 15px 5px; | ||
+ | box-shadow: inset 0 0 1px 0.4px | ||
} | } | ||
- | + | ||
- | + | #footer { | |
- | + | font-size: 10px; | |
- | + | width:100%; | |
- | + | clear:both; | |
- | # | + | //background-color: black; |
- | font-size: 10px; | + | background-color: #004083; |
- | + | padding: 5px 0; | |
- | width: 100%; | + | |
- | clear:both; | + | |
- | + | ||
- | background-color: | + | |
} | } | ||
/* Text styles */ | /* Text styles */ | ||
p { | p { | ||
- | padding: 0px; | + | padding: 0px; |
- | margin-top: 5px; | + | margin-top: 5px; |
- | margin-right: 0px; | + | margin-right: 0px; |
- | margin-bottom: 7px; | + | margin-bottom: 7px; |
- | margin-left: 0px; | + | margin-left: 0px; |
} | } | ||
+ | |||
h3 { | h3 { | ||
- | font-size: 36px; | + | font-size: 36px; |
- | font-weight: bold; | + | font-weight: bold; |
- | margin-top: 0px; | + | margin-top: 0px; |
- | margin-right: 0px; | + | margin-right: 0px; |
- | margin-bottom: 0px; | + | margin-bottom: 0px; |
- | margin-left: 0px; | + | margin-left: 0px; |
- | padding-top: 10px; | + | padding-top: 10px; |
- | padding-right: 0px; | + | padding-right: 0px; |
- | padding-bottom: 10px; | + | padding-bottom: 10px; |
- | padding-left: 0px; | + | padding-left: 0px; |
} | } | ||
+ | |||
h4 { | h4 { | ||
- | font-size:20px; | + | font-size:20px; |
} | } | ||
+ | |||
m1 { | m1 { | ||
- | font-size: 36px; | + | font-size: 36px; |
- | font-weight: bold; | + | font-weight: bold; |
- | margin-top: 0px; | + | margin-top: 0px; |
- | margin-right: 0px; | + | margin-right: 0px; |
- | margin-bottom: 0px; | + | margin-bottom: 0px; |
- | margin-left: 0px; | + | margin-left: 0px; |
- | padding-top: 10px; | + | padding-top: 10px; |
- | padding-right: 0px; | + | padding-right: 0px; |
- | padding-bottom: 10px; | + | padding-bottom: 10px; |
- | padding-left: 0px; | + | padding-left: 0px; |
} | } | ||
/* Menu */ | /* Menu */ | ||
- | #nav, #nav | + | #nav, #nav ul{ |
+ | display:inline-block; | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
list-style-type:none; | list-style-type:none; | ||
+ | list-style-image:none; | ||
list-style-position:outside; | list-style-position:outside; | ||
position:relative; | position:relative; | ||
Line 133: | Line 242: | ||
color:white; | color:white; | ||
} | } | ||
- | #nav | + | #nav li{ |
float:left; | float:left; | ||
position:relative; | position:relative; | ||
width: 8em; | width: 8em; | ||
+ | margin-bottom: 0; | ||
} | } | ||
- | #nav | + | #nav ul { |
position:absolute; | position:absolute; | ||
width:8em; | width:8em; | ||
display:none; | display:none; | ||
} | } | ||
- | #nav | + | #nav li ul a{ |
width:100%; | width:100%; | ||
border:1px solid black; | border:1px solid black; | ||
float:left; | float:left; | ||
} | } | ||
- | #nav | + | #nav ul ul{ |
top:auto; | top:auto; | ||
} | } | ||
- | #nav | + | #nav li ul ul { |
top: 0.5em; | top: 0.5em; | ||
left:8em; | left:8em; | ||
Line 158: | Line 268: | ||
} | } | ||
- | #nav | + | #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ |
display:none; | display:none; | ||
} | } | ||
- | #nav | + | #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ |
display:block; | display:block; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Revision as of 22:50, 4 July 2012