Team:Heidelberg/Templates/style2-css
From 2013.igem.org
(Difference between revisions)
Nils.kurzawa (Talk | contribs) |
m |
||
(36 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | #nav { | ||
+ | height:110px; | ||
+ | } | ||
.navigation{ | .navigation{ | ||
margin: 0px auto; | margin: 0px auto; | ||
Line 11: | Line 14: | ||
.navigation .item{ | .navigation .item{ | ||
display:inline-block; | display:inline-block; | ||
- | + | width: 9.5%; | |
+ | text-align:center; | ||
+ | position:relative; | ||
} | } | ||
- | |||
- | |||
- | |||
a.icon{ | a.icon{ | ||
- | + | width:57px; | |
height:53px; | height:53px; | ||
- | |||
- | |||
- | |||
cursor:pointer; | cursor:pointer; | ||
+ | display:inline-block; | ||
} | } | ||
.team a.icon{ | .team a.icon{ | ||
Line 29: | Line 29: | ||
} | } | ||
.project a.icon{ | .project a.icon{ | ||
- | background:transparent url("https://static.igem.org/mediawiki/2013/b/b0/Heidelberg_symbol_project3.png") no-repeat 0px 0px; | + | background:transparent url("https://static.igem.org/mediawiki/2013/b/b0/Heidelberg_symbol_project3.png") no-repeat 0px 0px; |
} | } | ||
.notebook a.icon{ | .notebook a.icon{ | ||
Line 45: | Line 45: | ||
.human a.icon{ | .human a.icon{ | ||
background:transparent url("https://static.igem.org/mediawiki/2013/5/5b/Heidelberg_symbol_human.png") no-repeat 0px 0px; | background:transparent url("https://static.igem.org/mediawiki/2013/5/5b/Heidelberg_symbol_human.png") no-repeat 0px 0px; | ||
+ | } | ||
+ | .model a.icon{ | ||
+ | background:transparent url("https://static.igem.org/mediawiki/2013/7/78/Heidelberg_model.png") no-repeat 0px 0px; | ||
} | } | ||
.navigation .item a.active{ | .navigation .item a.active{ | ||
Line 50: | Line 53: | ||
} | } | ||
.item img.circle{ | .item img.circle{ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
position:relative; | position:relative; | ||
- | + | border-radius:50%; | |
+ | width:52px; | ||
height:52px; | height:52px; | ||
- | + | opacity:0; | |
- | + | top:0; | |
- | + | left:0; | |
- | top: | + | |
- | left: | + | |
- | + | ||
- | + | ||
} | } | ||
+ | .item h2{ | ||
- | |||
- | |||
- | |||
white-space:nowrap; | white-space:nowrap; | ||
- | |||
color:#222; | color:#222; | ||
font-size:13px; | font-size:13px; | ||
font-family: Arial, sans-serif; | font-family: Arial, sans-serif; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
text-transform:uppercase; | text-transform:uppercase; | ||
+ | margin-top:0px; | ||
} | } | ||
.item h2.active{ | .item h2.active{ | ||
- | color:# | + | position:relative; |
- | z-index: | + | font-size:20px; |
- | + | font-weight:400; | |
+ | color:#ffcc00; | ||
+ | z-index:2500; | ||
+ | text-align:left; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.item ul{ | .item ul{ | ||
list-style:none; | list-style:none; | ||
position:absolute; | position:absolute; | ||
top:100px; | top:100px; | ||
- | |||
display:none; | display:none; | ||
- | z-index: | + | z-index:2000; |
+ | margin:0; | ||
} | } | ||
.item ul li a{ | .item ul li a{ | ||
Line 155: | Line 95: | ||
color:#fff; | color:#fff; | ||
/*text-shadow: -0.4px 0 black, 0 0.4px black, 0.4px 0 black, 0 -0.4px black;*/ | /*text-shadow: -0.4px 0 black, 0 0.4px black, 0.4px 0 black, 0 -0.4px black;*/ | ||
- | + | ||
+ | padding:3px; | ||
float:left; | float:left; | ||
clear:both; | clear:both; | ||
- | width: | + | width:auto; |
- | + | white-space: nowrap; | |
} | } | ||
.item ul li a:hover{ | .item ul li a:hover{ | ||
- | + | background-color:#fff; | |
- | + | color:#444; | |
- | + | -moz-border-radius:5px; | |
- | + | -webkit-border-radius:5px; | |
+ | border-radius:5px; | ||
+ | -moz-box-shadow:1px 1px 4px #666; | ||
+ | -webkit-box-shadow:1px 1px 4px #666; | ||
+ | box-shadow:1px 1px 4px #666; | ||
+ | |||
} | } | ||
.item-human ul li a:hover{ | .item-human ul li a:hover{ | ||
- | + | background-color:#fff; | |
- | color:# | + | color:#444; |
- | + | -moz-border-radius:5px; | |
+ | -webkit-border-radius:5px; | ||
+ | border-radius:5px; | ||
+ | -moz-box-shadow:1px 1px 4px #666; | ||
+ | -webkit-box-shadow:1px 1px 4px #666; | ||
+ | box-shadow:1px 1px 4px #666; | ||
+ | |||
} | } | ||
.item-human h2.active{ | .item-human h2.active{ | ||
+ | font-size:20px; | ||
+ | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
- | z-index: | + | z-index:2500; |
} | } | ||
.item-human ul{ | .item-human ul{ | ||
Line 182: | Line 136: | ||
left:-52px; | left:-52px; | ||
display:none; | display:none; | ||
- | z-index: | + | z-index:2000; |
} | } | ||
.item-human ul li a{ | .item-human ul li a{ | ||
Line 194: | Line 148: | ||
clear:both; | clear:both; | ||
width:130px; | width:130px; | ||
- | z-index: | + | z-index:1800; |
} | } | ||
.item-project ul li a:hover{ | .item-project ul li a:hover{ | ||
- | + | background-color:#fff; | |
- | color:# | + | color:#444; |
- | + | -moz-border-radius:5px; | |
+ | -webkit-border-radius:5px; | ||
+ | border-radius:5px; | ||
+ | -moz-box-shadow:1px 1px 4px #666; | ||
+ | -webkit-box-shadow:1px 1px 4px #666; | ||
+ | box-shadow:1px 1px 4px #666; | ||
+ | |||
} | } | ||
.item-project h2.active{ | .item-project h2.active{ | ||
+ | font-size:20px; | ||
+ | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
- | z-index: | + | z-index:2500; |
} | } | ||
.item-project ul{ | .item-project ul{ | ||
Line 211: | Line 173: | ||
left:-52px; | left:-52px; | ||
display:none; | display:none; | ||
- | z-index: | + | z-index:2000; |
} | } | ||
.item-project ul li a{ | .item-project ul li a{ | ||
Line 220: | Line 182: | ||
color:#000; | color:#000; | ||
padding:3px; | padding:3px; | ||
- | + | ||
clear:both; | clear:both; | ||
width:130px; | width:130px; | ||
- | z-index: | + | z-index:1800; |
} | } | ||
.item-team ul li a:hover{ | .item-team ul li a:hover{ | ||
- | + | background-color:#fff; | |
- | color:# | + | color:#444; |
- | + | -moz-border-radius:5px; | |
+ | -webkit-border-radius:5px; | ||
+ | border-radius:5px; | ||
+ | -moz-box-shadow:1px 1px 4px #666; | ||
+ | -webkit-box-shadow:1px 1px 4px #666; | ||
+ | box-shadow:1px 1px 4px #666; | ||
+ | |||
} | } | ||
.item-team h2.active{ | .item-team h2.active{ | ||
+ | font-size:20px; | ||
+ | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
- | z-index: | + | z-index:2500; |
} | } | ||
.item-team ul{ | .item-team ul{ | ||
Line 240: | Line 210: | ||
left:-52px; | left:-52px; | ||
display:none; | display:none; | ||
- | z-index: | + | z-index:1800; |
} | } | ||
.item-team ul li a{ | .item-team ul li a{ | ||
Line 252: | Line 222: | ||
clear:both; | clear:both; | ||
width:130px; | width:130px; | ||
- | z-index: | + | z-index:1800; |
} | } | ||
.item-softnote ul li a:hover{ | .item-softnote ul li a:hover{ | ||
background-color:#eeeeee; | background-color:#eeeeee; | ||
color:#000000; | color:#000000; | ||
- | + | ||
} | } | ||
.item-softnote h2.active{ | .item-softnote h2.active{ | ||
+ | font-size:20px; | ||
+ | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
- | z-index: | + | z-index:2500; |
} | } | ||
.item-softnote ul{ | .item-softnote ul{ | ||
Line 267: | Line 239: | ||
position:absolute; | position:absolute; | ||
top:70px; | top:70px; | ||
- | left: | + | left:0px; |
display:none; | display:none; | ||
- | z-index: | + | z-index:2000; |
} | } | ||
.item-softnote ul li a{ | .item-softnote ul li a{ | ||
Line 281: | Line 253: | ||
clear:both; | clear:both; | ||
width:130px; | width:130px; | ||
- | z-index: | + | z-index:1800; |
+ | } | ||
+ | |||
+ | .highlight_button { | ||
+ | background-repeat:no-repeat; | ||
+ | width:80px; | ||
+ | height:80px; | ||
+ | background-size:160px 80px; | ||
+ | background-position:left; | ||
+ | display:inline-block; | ||
+ | margin-left:15%; | ||
+ | } | ||
+ | |||
+ | .highlight_button:hover { | ||
+ | background-position:right; | ||
+ | } | ||
+ | |||
+ | .fancybox_p_centered > img { | ||
+ | margin: 0% 25%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .fancybox_p_centered > figcaption { | ||
+ | margin: 0% 10%; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 00:34, 29 October 2013