Team:Freiburg:CSSnavigation
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*html{
height:100%;*/ /*zentriert nav menu unten mittig */
} body{
text-align:center; -webkit-background-size: cover;
-moz-background-size: cover; background-size: cover;
background-position:50% 50%; height:100%; font-family: 'Open Sans Condensed', sans-serif;
} body:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; }
- menu{
display: inline-block;
height:135px; width:80%; vertical-align: middle; white-space: nowrap;
}
- menu li {
position: relative; z-index: 2; display: block; float: left; width: 15%; height: 135px; line-height: 220px; margin-right: 1.42857%; white-space: nowrap; background-position: 50%; /* zentriert Icons über Text */ } .rocket { background: url('http://one-div.com/codepen/menu/rocket-large.png')no-repeat; margin-left: 1.42857%; } .wine{
background:url('http://one-div.com/codepen/menu/wine-large.png')no-repeat;
} .burger{
background:url('http://one-div.com/codepen/menu/burger-large.png')no-repeat;
} .comment{
background:url('http://one-div.com/codepen/menu/comment-large.png')no-repeat;
} .sport{
background:url('http://one-div.com/codepen/menu/sport-large.png')no-repeat;
} .earth{
background:url('http://one-div.com/codepen/menu/earth-large.png')no-repeat;
}
- menu ul{
position:relative;
}
- menu ul:after{
content:""; display:block; clear:both;
}
- menu a{
color:#D8D8D8; text-decoration:none; display:block; width:100%; height:100%; text-shadow: 0 -1px 0 #000;
}
- menu li:after {
content: ""; width: 9.5238%; height: 100%; position: absolute; top: 0; right: -9.5238%; background: url('http://one-div.com/codepen/menu/menu-bg.png'); /* disabling creates space betwenn single navigation elements */ } .rocket:before { content: ""; width: 9.5238%; height: 100%; position: absolute; top: 0; left: -9.5238%; background: url('http://one-div.com/codepen/menu/menu-bg.png'); border-radius: 5px 0px 0px 5px; } .earth:after{
border-radius:0px 5px 5px 0px;
} .current{
position:absolute; top:-13px; left:8.92857%; margin-left: -49px; width:95px; height:165px; -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); transition: all 400ms cubic-bezier(.16,1.23,.87,1.18); } .current-back{
width:100%; height:100%; position:absolute; background:#c39449; border-radius:5px; border-bottom: 2px solid rgba(0, 0, 0, 0.09); border-top: 2px solid rgba(255,255,255,0.1);
} /* arrow like element above slider */ .top-arrow{
position:absolute; overflow:hidden; width:100%; height:12px; top:13px; left:0; z-index:2;
} /* Funktion unbekannt */ .top-arrow:before{
content:""; position:absolute; width:80%; height:10px; top:-10px; left:10%; border-radius:20%; box-shadow:0 0 10px black;
} /* Funktion unbekannt */ .top-arrow:after{
content:""; position:absolute; width:0; height:0; top:0px; border-top:8px solid #c39449; border-left:6px solid transparent; border-right:6px solid transparent; margin-left:-6px; left:50%;
}
/* arrow like element beneath slider */ .bottom-arrow{
position:absolute; overflow:hidden; width:100%; height:12px; bottom:17px; left:0; z-index:2;
}*/ .bottom-arrow:before{
content:""; position:absolute; width:80%; height:10px; bottom:-10px; left:10%; border-radius:20%; box-shadow:0 0 10px black;
} .bottom-arrow:after{
content:""; position:absolute; width:0; height:0; bottom:0; border-bottom:12px solid #c39449; border-left:8px solid transparent; border-right:8px solid transparent; margin-left:-8px; left:50%;
}
.wine:hover ~ .current{
left: 25.5%;
} .burger:hover ~ .current{
left: 42%;
} .comment:hover ~ .current{
left: 58.5%;
} .sport:hover ~ .current{
left: 75%;
} .earth:hover ~ .current{
left: 91.1%;
}
- iGEMloginbar {
height: 20px; width: 100%; background-color: #383838;
border-bottom: 2px solid #000
text-decoration-color: #FFF;
}