Team:TU-Delft/Templates/Style
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
<style> | <style> | ||
Line 6: | Line 5: | ||
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; | ||
- | |||
- | |||
- | |||
} | } | ||
+ | /* Removing wiki-like stuff */ | ||
+ | /****************************/ | ||
+ | /*#contentSub, #search-controls,*/ .firstHeading, /* #footer-box, #catlinks,*/ #p-logo { | ||
+ | display:none;} | ||
+ | |||
+ | /* Redesigning the topmenu */ | ||
+ | /***************************/ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#top-section { | #top-section { | ||
border: 0 none; | border: 0 none; | ||
Line 123: | Line 44: | ||
z-index: 9; | z-index: 9; | ||
} | } | ||
- | # | + | /* Layout */ |
- | + | /**********/ | |
+ | #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 150: | Line 95: | ||
margin: 1px; | margin: 1px; | ||
} | } | ||
+ | |||
+ | #footer-box { | ||
+ | background-color: #D8D5D0; | ||
+ | } | ||
+ | |||
input.searchButton { | input.searchButton { | ||
color: #FFFFFF; | color: #FFFFFF; | ||
Line 159: | Line 109: | ||
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:22, 18 April 2013