Template: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; }

1. menu{

display: inline-block;

 height:135px;
 width:80%;
 vertical-align: middle;
 white-space: nowrap;

}

1. 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;  

}

1. menu ul{

 position:relative;

}

1. menu ul:after{

 content:"";
 display:block;
 clear:both;

}

1. menu a{

 color:#D8D8D8;
 text-decoration:none;
 display:block;
 width:100%;
 height:100%;
 text-shadow: 0 -1px 0 #000;

}

1. 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%; 

}

1. iGEMloginbar {

   height: 20px;
   width: 100%;
   background-color: #383838;

border-bottom: 2px solid #000

   text-decoration-color: #FFF;

}