"
Team:Heidelberg/Templates/style2-css
From 2013.igem.org
(Difference between revisions)
Nils.kurzawa (Talk | contribs) m |
m |
||
| (19 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: | + | width: 9.5%; |
text-align:center; | text-align:center; | ||
position:relative; | position:relative; | ||
| Line 17: | Line 20: | ||
a.icon{ | a.icon{ | ||
| - | width: | + | width:57px; |
| - | height: | + | height:53px; |
cursor:pointer; | cursor:pointer; | ||
display:inline-block; | display:inline-block; | ||
| Line 42: | 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 48: | Line 54: | ||
.item img.circle{ | .item img.circle{ | ||
position:relative; | position:relative; | ||
| + | border-radius:50%; | ||
width:52px; | width:52px; | ||
height:52px; | height:52px; | ||
| Line 67: | Line 74: | ||
font-size:20px; | font-size:20px; | ||
font-weight:400; | font-weight:400; | ||
| - | color:# | + | color:#ffcc00; |
| - | z-index: | + | z-index:2500; |
| - | + | text-align:left; | |
} | } | ||
.item ul{ | .item ul{ | ||
| Line 76: | Line 83: | ||
top:100px; | top:100px; | ||
display:none; | display:none; | ||
| - | z-index: | + | z-index:2000; |
margin:0; | margin:0; | ||
} | } | ||
| Line 88: | 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; | ||
} | } | ||
| Line 109: | Line 128: | ||
font-weight:400; | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
| - | z-index: | + | z-index:2500; |
} | } | ||
.item-human ul{ | .item-human ul{ | ||
| Line 117: | 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 129: | 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; | ||
} | } | ||
| Line 140: | Line 165: | ||
font-weight:400; | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
| - | z-index: | + | z-index:2500; |
} | } | ||
.item-project ul{ | .item-project ul{ | ||
| Line 148: | 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 157: | 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; | ||
} | } | ||
| Line 171: | Line 202: | ||
font-weight:400; | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
| - | z-index: | + | z-index:2500; |
} | } | ||
.item-team ul{ | .item-team ul{ | ||
| Line 179: | 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 191: | 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{ | ||
| Line 202: | Line 233: | ||
font-weight:400; | font-weight:400; | ||
color:#EEDF3E; | color:#EEDF3E; | ||
| - | z-index: | + | z-index:2500; |
} | } | ||
.item-softnote ul{ | .item-softnote ul{ | ||
| Line 210: | Line 241: | ||
left:0px; | left:0px; | ||
display:none; | display:none; | ||
| - | z-index: | + | z-index:2000; |
} | } | ||
.item-softnote ul li a{ | .item-softnote ul li a{ | ||
| Line 222: | 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
