Team:TU-Delft/Templates/Style
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | body { | ||
+ | background: #ADD8E6 url("https://static.igem.org/mediawiki/2013/d/d7/Im04.gif") left no-repeat fixed; | ||
+ | font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; | ||
+ | text-align: center; | ||
+ | } | ||
/* Removing wiki-like stuff */ | /* Removing wiki-like stuff */ | ||
Line 41: | Line 46: | ||
/* Layout */ | /* 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: white; | |
- | + | border: 1px solid black; | |
- | + | margin-bottom: 10px; | |
- | + | padding: 0 0 20px; | |
- | + | width: 975px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #contentSub { | |
- | + | margin: 0; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #search-controls { | |
- | + | background: none repeat scroll 0 0 transparent; | |
- | text- | + | border: 0 none; |
+ | display: block; | ||
+ | height: auto; | ||
+ | margin: 0; | ||
+ | overflow: visible; | ||
+ | position: fixed; | ||
+ | right: auto; | ||
+ | text-align: right; | ||
+ | top: 24px; | ||
+ | width: 975px; | ||
} | } | ||
- | + | #searchInput { | |
- | + | border: 0 none; | |
- | + | color: #555555; | |
- | + | font-size: 85%; | |
- | font-size: | + | padding-left: 2px; |
- | + | padding-right: 2px; | |
+ | width: 100px; | ||
} | } | ||
- | + | #searchform { | |
- | + | margin: 1px; | |
- | + | ||
} | } | ||
- | + | #footer-box { | |
- | + | background-color: #D8D5D0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | input.searchButton { | |
- | font-size: | + | color: #FFFFFF; |
- | font-weight: | + | cursor: pointer; |
- | + | font-size: 80%; | |
- | + | font-weight: normal; | |
- | + | margin: 0; | |
+ | padding-left: 2px; | ||
+ | padding-right: 2px; | ||
} | } | ||
- | + | #banner{background:transparent; | |
- | + | height: 50px;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | #header { | |
- | + | background: url("https://static.igem.org/mediawiki/2013/2/2d/HeaderDelft.png") right no-repeat ; | |
- | + | 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: 150px; |
+ | width: 100%; | ||
+ | border-top: 1px solid #660000; | ||
+ | border-bottom: 1px solid #660000;} | ||
- | + | #menu, #menu ul { | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | list-style: none; | |
- | + | ||
- | padding | + | |
- | + | ||
} | } | ||
- | + | #menu { | |
- | + | width: 960px; | |
- | + | margin: 60px auto; | |
- | + | border: 1px solid #222; | |
- | background: | + | 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 { | #menu { | ||
- | + | zoom:1; | |
- | + | ||
- | + | ||
} | } | ||
- | |||
#menu li { | #menu li { | ||
- | + | float: left; | |
- | + | border-right: 1px solid #222; | |
+ | box-shadow: 1px 0 0 #444; | ||
+ | position: relative; | ||
} | } | ||
- | #menu | + | #menu a { |
- | + | float: left; | |
- | + | padding: 12px 17px; | |
+ | color: #999; | ||
+ | text-transform: uppercase; | ||
+ | font: bold 10px Arial, Helvetica; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 0 #000; | ||
} | } | ||
- | #menu li a { | + | #menu li:hover > a { |
- | + | color: #fafafa; | |
- | color: # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #menu li a:hover { | + | *html #menu li a:hover { /* IE6 only */ |
- | + | color: #fafafa; | |
} | } | ||
- | + | </style> | |
- | #menu | + | <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; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | margin | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #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: | + | 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 09:43, 19 April 2013