Team:Marburg SYNMIKRO:Template:stylesheet.css
From 2012.igem.org
(Difference between revisions)
(18 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | # | + | <html> |
- | display:none;} | + | <style> |
+ | /*kasten*/ | ||
+ | |||
+ | #synmikrolink { | ||
+ | position: absolute; | ||
+ | top:-160px; | ||
+ | right:40px; | ||
+ | z-index: 7; | ||
+ | height: 60px; | ||
+ | width:240px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | #mainpagelink{ | ||
+ | position: absolute; | ||
+ | top:-230px; | ||
+ | left:5px; | ||
+ | z-index: 7; | ||
+ | } | ||
+ | |||
+ | .conboxs{ | ||
+ | -moz-border-bottom-colors: none; | ||
+ | -moz-border-left-colors: none; | ||
+ | -moz-border-right-colors: none; | ||
+ | -moz-border-top-colors: none; | ||
+ | background: none repeat scroll 0 0 rgba(233, 243, 217, 0.7); | ||
+ | border-color: rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5); | ||
+ | border-image: none; | ||
+ | border-radius: 2em 2em 2em 2em; | ||
+ | border-style: solid solid solid solid; | ||
+ | border-width: medium; | ||
+ | box-shadow: 0 1px 3px black; | ||
+ | float: left; | ||
+ | width: 45%; | ||
+ | padding: 10px; | ||
+ | margin:1%; | ||
+ | } | ||
+ | |||
+ | .conboxb{ | ||
+ | -moz-border-bottom-colors: none; | ||
+ | -moz-border-left-colors: none; | ||
+ | -moz-border-right-colors: none; | ||
+ | -moz-border-top-colors: none; | ||
+ | background: none repeat scroll 0 0 rgba(233, 243, 217, 0.7); | ||
+ | border-color: rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5); | ||
+ | border-image: none; | ||
+ | border-radius: 2em 2em 2em 2em; | ||
+ | border-style: solid solid solid solid; | ||
+ | border-width: medium; | ||
+ | box-shadow: 0 1px 3px black; | ||
+ | float: left; | ||
+ | width: 95%; | ||
+ | padding: 10px; | ||
+ | margin:1%; | ||
+ | } | ||
+ | |||
+ | .conbox20{ | ||
+ | -moz-border-bottom-colors: none; | ||
+ | -moz-border-left-colors: none; | ||
+ | -moz-border-right-colors: none; | ||
+ | -moz-border-top-colors: none; | ||
+ | background: none repeat scroll 0 0 rgba(233, 243, 217, 0.7); | ||
+ | border-color: rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5); | ||
+ | border-image: none; | ||
+ | border-radius: 2em 2em 2em 2em; | ||
+ | border-style: solid solid solid solid; | ||
+ | border-width: medium; | ||
+ | box-shadow: 0 1px 3px black; | ||
+ | float: left; | ||
+ | width: 20.25%; | ||
+ | padding: 10px; | ||
+ | margin:1%; | ||
+ | } | ||
+ | |||
+ | .conbox28{ | ||
+ | -moz-border-bottom-colors: none; | ||
+ | -moz-border-left-colors: none; | ||
+ | -moz-border-right-colors: none; | ||
+ | -moz-border-top-colors: none; | ||
+ | background: none repeat scroll 0 0 rgba(233, 243, 217, 0.7); | ||
+ | border-color: rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5); | ||
+ | border-image: none; | ||
+ | border-radius: 2em 2em 2em 2em; | ||
+ | border-style: solid solid solid solid; | ||
+ | border-width: medium; | ||
+ | box-shadow: 0 1px 3px black; | ||
+ | float: left; | ||
+ | width: 28.5%; | ||
+ | padding: 10px; | ||
+ | margin:1%; | ||
+ | } | ||
+ | |||
+ | .conbox60{ | ||
+ | -moz-border-bottom-colors: none; | ||
+ | -moz-border-left-colors: none; | ||
+ | -moz-border-right-colors: none; | ||
+ | -moz-border-top-colors: none; | ||
+ | background: none repeat scroll 0 0 rgba(233, 243, 217, 0.7); | ||
+ | border-color: rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5) rgba(233, 243, 217, 0.5); | ||
+ | border-image: none; | ||
+ | border-radius: 2em 2em 2em 2em; | ||
+ | border-style: solid solid solid solid; | ||
+ | border-width: medium; | ||
+ | box-shadow: 0 1px 3px black; | ||
+ | float: left; | ||
+ | width: 62%; | ||
+ | padding: 10px; | ||
+ | margin:1%; | ||
+ | } | ||
+ | |||
+ | /* Vertical Navigation */ | ||
+ | #vertical-navigation { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-size: 1.2em; | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | background: tranparent; | ||
+ | top: -32px; | ||
+ | left: 0px; | ||
+ | width: 975px; | ||
+ | z-index:7; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* CSS for each Parent Item */ | ||
+ | #vertical-navigation li { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 150.5px; | ||
+ | background: #E9F3D9; | ||
+ | margin-left: 2px; | ||
+ | margin-right: 2px; | ||
+ | padding-right:8px; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.home{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.team{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.project{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.notebook{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.safety{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.attributions{ | ||
+ | background-color: #B8C881; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li a | ||
+ | { | ||
+ | float: left; | ||
+ | display: block; | ||
+ | padding: 4px; | ||
+ | text-decoration: none; | ||
+ | color: black; | ||
+ | margin-right: 10px; | ||
+ | text-align: center; | ||
+ | width: 150.5px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Change background color and font color | ||
+ | of parent items when mouse hover | ||
+ | */ | ||
+ | #vertical-navigation li:hover a, | ||
+ | #vertical-navigation li a:hover | ||
+ | { | ||
+ | width: 150.5px; | ||
+ | background: #E9F3D9; | ||
+ | position:relative; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.home:hover a, | ||
+ | #vertical-navigation li home:hover{ | ||
+ | background-color: #E077A7; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.team:hover a, | ||
+ | #vertical-navigation li team:hover{ | ||
+ | background-color: #41A9E0; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.project:hover a, | ||
+ | #vertical-navigation li project:hover{ | ||
+ | background-color: #A0B919; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.notebook:hover a, | ||
+ | #vertical-navigation li notebook:hover{ | ||
+ | background-color: #F1DC00; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.safety:hover a, | ||
+ | #vertical-navigation li safety:hover{ | ||
+ | background-color: #D33F18; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.attributions:hover a, | ||
+ | #vertical-navigation li attributions:hover{ | ||
+ | background-color: #8865A7; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | Applie to group of Child Items | ||
+ | Each Child Item will be invisible by default | ||
+ | */ | ||
+ | #vertical-navigation ul {display: none;} | ||
+ | |||
+ | /* Each Child Item will be visible if mouse hover */ | ||
+ | #vertical-navigation li:hover ul {display: block;} | ||
+ | |||
+ | #vertical-navigation li.child { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 146.5px; | ||
+ | background: #00f; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li.child a { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 146.5px; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation ul | ||
+ | { | ||
+ | float: none; | ||
+ | position: absolute; | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | top: 2em; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation ul li | ||
+ | { | ||
+ | float: none; | ||
+ | clear: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 146.5; | ||
+ | color: #999; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | Reset and re style | ||
+ | link of each child item | ||
+ | */ | ||
+ | #vertical-navigation li:hover ul li a, | ||
+ | #vertical-navigation ul li a | ||
+ | { | ||
+ | line-height: 200%; | ||
+ | display: block; | ||
+ | padding: 6px 6px 0px 6px; | ||
+ | float: none; | ||
+ | color: #000; | ||
+ | background: #bc5e0a; | ||
+ | width: 146.5; | ||
+ | white-space:nowrap; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #vertical-navigation li:hover ul li a:hover, | ||
+ | #vertical-navigation ul li a:hover | ||
+ | { | ||
+ | color: #000; | ||
+ | text-decoration: underline; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | #footer-box, #p-logo, #search-controls | ||
+ | */ | ||
+ | #contentSub, .firstHeading, #catlinks{ | ||
+ | display:none;} | ||
#top-section { | #top-section { | ||
border: none; | border: none; | ||
height: 0px;} | height: 0px;} | ||
- | |||
- | |||
- | + | ||
body { | body { | ||
Line 14: | Line 306: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
- | background | + | background: #333333 url('https://static.igem.org/mediawiki/2012/c/cf/Syn_MR_bgr.jpg') repeat fixed; |
} | } | ||
Line 34: | Line 326: | ||
#top-section { | #top-section { | ||
position: relative; | position: relative; | ||
- | height: | + | height: 254px; |
width: 975px; | width: 975px; | ||
# margin-left: 10px; | # margin-left: 10px; | ||
Line 52: | Line 344: | ||
#p-logo { | #p-logo { | ||
- | + | height: 254px; | |
- | + | background: #000000 url('https://static.igem.org/mediawiki/2012/8/8f/Syn_MR_banner2.png'); | |
- | + | ||
- | + | ||
} | } | ||
+ | |||
+ | #p-logo img { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #p-logo a { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
#p-logo h5 { | #p-logo h5 { | ||
display: none; | display: none; | ||
Line 68: | Line 368: | ||
#search-controls { | #search-controls { | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 170px; |
- | right: | + | right: -8px; |
- | width: | + | width: 180px; |
height: 40px; | height: 40px; | ||
background-color: transparent; | background-color: transparent; | ||
Line 81: | Line 381: | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
- | color: | + | color: black; |
- | + | ||
} | } | ||
+ | |||
input.searchButton:hover { | input.searchButton:hover { | ||
- | color: | + | font-weight: bold; |
+ | color: black; | ||
+ | text-decoration: underline; | ||
} | } | ||
+ | |||
#searchInput { | #searchInput { | ||
width: 10.9em; | width: 10.9em; | ||
Line 96: | Line 399: | ||
#menubar { | #menubar { | ||
position: absolute; | position: absolute; | ||
- | |||
top: -6px; | top: -6px; | ||
- | |||
z-index: 5; | z-index: 5; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
font-size: 95%; | font-size: 95%; | ||
line-height: 1em; | line-height: 1em; | ||
+ | width:340px; | ||
+ | |||
} | } | ||
+ | .left-menu li { | ||
+ | font-size: 0%; | ||
+ | } | ||
+ | |||
+ | .left-menu li a { | ||
+ | font-size: small; | ||
+ | } | ||
+ | |||
+ | .left-menu ul{ | ||
+ | width:370px; | ||
+ | white-space: normal; | ||
+ | } | ||
- | .left-menu, .left-menu a { | + | .left-menu, .left-menu a { |
left: 0px; | left: 0px; | ||
text-align: left; | text-align: left; | ||
- | color: | + | text-decoration:none; |
+ | color: #DAE3B7 !important; | ||
text-transform: lowercase; | text-transform: lowercase; | ||
+ | background-color: transparent; | ||
+ | left: -10px; | ||
} | } | ||
- | .left-menu:hover { | + | .left-menu:hover, .left-menu:hover a{ |
- | + | background-color: transparent; | |
- | + | color: green !important; | |
+ | font-size: small; | ||
+ | text-decoration:none; | ||
} | } | ||
+ | |||
+ | .left-menu a:hover { | ||
+ | background-color: transparent; | ||
+ | color: black; | ||
+ | font-size: small; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
.right-menu, .right-menu a { | .right-menu, .right-menu a { | ||
right: 0px; | right: 0px; | ||
text-align: right; | text-align: right; | ||
color: white; | color: white; | ||
+ | text-decoration:none; | ||
+ | color: black; | ||
+ | text-transform: lowercase; | ||
+ | background-color: transparent; | ||
} | } | ||
- | + | ||
- | color: | + | .right-menu li a { |
- | + | background-color: transparent; | |
+ | color: black; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .right-menu li a:hover { | |
- | + | background-color: transparent; | |
- | + | color: black; | |
- | .right-menu li | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background-color: | + | |
- | + | ||
- | + | ||
- | color: | + | |
- | + | ||
} | } | ||
+ | |||
/* footer */ | /* footer */ | ||
Line 303: | Line 612: | ||
****************************************************************************************************/ | ****************************************************************************************************/ | ||
#content { | #content { | ||
- | |||
width: 965px; | width: 965px; | ||
+ | z-index: -1999 | ||
# margin-left: 10px; | # margin-left: 10px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 5px 5px 5px 5px;; | padding: 5px 5px 5px 5px;; | ||
- | background: | + | background-color:rgba(255,255,255,0.8); |
color: black; | color: black; | ||
border-left: 1px solid #444444; | border-left: 1px solid #444444; | ||
Line 316: | Line 625: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/* general styles */ | /* general styles */ | ||
Line 615: | Line 917: | ||
#toc .toctoggle, | #toc .toctoggle, | ||
.toc .toctoggle { | .toc .toctoggle { | ||
- | font-size: | + | font-size: 120%; |
- | } | + | } |
Line 1,161: | Line 1,463: | ||
background-color: #f0f0ff; | background-color: #f0f0ff; | ||
} | } | ||
+ | </style> | ||
+ | </html> |
Latest revision as of 14:48, 26 September 2012