Team:TU-Delft/Templates/Style
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <style> body { background-color: #494D51; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; text-align: center; } .firstHeading { ...") |
|||
Line 2: | Line 2: | ||
<style> | <style> | ||
body { | body { | ||
- | background | + | background: #ADD8E6 url("https://static.igem.org/mediawiki/2013/d/d7/Im04.gif") left no-repeat; |
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; | font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; | ||
text-align: center; | text-align: center; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
#top-section { | #top-section { | ||
Line 120: | Line 35: | ||
z-index: 9; | z-index: 9; | ||
} | } | ||
- | # | + | /* Layout */ |
- | + | /**********/ | |
+ | body, #heading, #innercontent { | ||
+ | background: url("https://static.igem.org/mediawiki/2011/b/ba/DTU-Denmark2011-bg2.jpg") repeat #D7D7D7;} | ||
+ | background: gray; | ||
+ | } | ||
+ | /*#content, #globalWrapper { | ||
+ | border: none; | ||
+ | width: 75%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | }*/ | ||
+ | #globalWrapper { | ||
+ | margin: 0 auto; | ||
+ | width: 975px; | ||
+ | } | ||
+ | #content { | ||
+ | background-color: #D8D5D0; | ||
+ | border: 1px solid black; | ||
+ | margin-bottom: 10px; | ||
+ | padding: 0 0 20px; | ||
+ | width: 975px; | ||
+ | } | ||
+ | |||
+ | #contentSub { | ||
+ | margin: 0; | ||
} | } | ||
#search-controls { | #search-controls { | ||
Line 147: | Line 86: | ||
margin: 1px; | margin: 1px; | ||
} | } | ||
+ | |||
+ | #footer-box { | ||
+ | background-color: #D8D5D0; | ||
+ | } | ||
+ | |||
input.searchButton { | input.searchButton { | ||
color: #FFFFFF; | color: #FFFFFF; | ||
Line 156: | Line 100: | ||
padding-right: 2px; | padding-right: 2px; | ||
} | } | ||
- | + | #header { | |
- | + | background: url("https://static.igem.org/mediawiki/2011/2/2d/DTU-Denmark2011-5element.png") no-repeat right -30px #990000; | |
- | + | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | |
- | + | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */ | |
- | + | height: 100px; | |
- | + | width: 100%; | |
+ | border-top: 1px solid #660000; | ||
+ | border-bottom: 1px solid #660000;} | ||
+ | |||
+ | #menu, #menu ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
} | } | ||
- | + | ||
- | + | #menu { | |
+ | width: 960px; | ||
+ | margin: 60px auto; | ||
+ | border: 1px solid #222; | ||
+ | background-color: #111; | ||
+ | background-image: linear-gradient(#444, #111); | ||
+ | border-radius: 6px; | ||
+ | box-shadow: 0 1px 1px #777; | ||
} | } | ||
- | + | #menu:before, | |
- | + | #menu:after { | |
+ | content: ""; | ||
+ | display: table; | ||
} | } | ||
- | + | ||
- | + | #menu:after { | |
+ | clear: both; | ||
} | } | ||
- | + | ||
- | + | #menu { | |
+ | zoom:1; | ||
} | } | ||
- | + | #menu li { | |
- | + | float: left; | |
- | + | border-right: 1px solid #222; | |
- | + | box-shadow: 1px 0 0 #444; | |
- | + | position: relative; | |
} | } | ||
- | + | ||
- | + | #menu a { | |
+ | float: left; | ||
+ | padding: 12px 30px; | ||
+ | color: #999; | ||
+ | text-transform: uppercase; | ||
+ | font: bold 10px Arial, Helvetica; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 0 #000; | ||
} | } | ||
- | a | + | |
- | + | #menu li:hover > a { | |
- | + | color: #fafafa; | |
- | + | ||
} | } | ||
- | # | + | |
- | + | *html #menu li a:hover { /* IE6 only */ | |
- | + | color: #fafafa; | |
- | + | ||
- | + | ||
} | } | ||
- | + | </style> | |
- | + | <style> | |
- | + | #menu ul { | |
- | + | margin: 20px 0 0 0; | |
- | + | _margin: 0; /*IE6 only*/ | |
- | + | opacity: 0; | |
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | top: 38px; | ||
+ | left: 0; | ||
+ | z-index: 1; | ||
+ | background: #444; | ||
+ | background: linear-gradient(#444, #111); | ||
+ | box-shadow: 0 -1px 0 rgba(255,255,255,.3); | ||
+ | border-radius: 3px; | ||
+ | transition: all .2s ease-in-out; | ||
} | } | ||
- | # | + | |
- | + | #menu li:hover > ul { | |
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | margin: 0; | ||
} | } | ||
- | # | + | |
- | + | #menu ul ul { | |
- | + | top: 0; | |
- | + | left: 150px; | |
+ | margin: 0 0 0 20px; | ||
+ | _margin: 0; /*IE6 only*/ | ||
+ | box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
} | } | ||
- | # | + | |
- | + | #menu ul li { | |
+ | float: none; | ||
+ | display: block; | ||
+ | border: 0; | ||
+ | _line-height: 0; /*IE6 only*/ | ||
+ | box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
} | } | ||
- | # | + | |
- | + | #menu ul li:last-child { | |
+ | box-shadow: none; | ||
} | } | ||
- | + | ||
- | + | #menu ul a { | |
- | + | padding: 10px; | |
- | + | width: 130px; | |
- | + | _height: 10px; /*IE6 only*/ | |
- | + | display: block; | |
- | + | white-space: nowrap; | |
- | + | float: none; | |
- | + | text-transform: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #menu ul a:hover { | |
- | + | background-color: #0186ba; | |
- | + | background-image: linear-gradient(#04acec, #0186ba); | |
- | + | ||
} | } | ||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 10:04, 18 April 2013