Template:Team:TU Eindhoven/Menu CSS

@font-face{ font-family: Aleo_Regular; src: url('https://static.igem.org/mediawiki/2015/2/27/TU_Eindhoven_aleo-regular-webfont.woff') format('woff'); } @font-face{ font-family: Aleo_Regular_Italic; src: url('https://static.igem.org/mediawiki/2015/6/66/Aleo-bold-webfont.woff') format('woff'); } @font-face{ font-family: Aleo_Bold; src: url('https://static.igem.org/mediawiki/2015/6/66/Aleo-bold-webfont.woff') format('woff'); } @font-face{ font-family: Aleo_Bold_Italic; src: url('https://static.igem.org/mediawiki/2015/9/95/TU_Eindhoven_aleo-bolditalic-webfont.woff') format('woff'); } @font-face{ font-family: Aleo_Light_Italic; src: url('https://static.igem.org/mediawiki/2015/e/e0/TU_Eindhoven_aleo-lightitalic-webfont.woff') format('woff'); } @font-face{ font-family: Aleo_Light; src: url('https://static.igem.org/mediawiki/2015/f/f9/TU_Eindhoven_aleo-light-webfont.woff') format('woff'); } body{ line-height: normal; /*background-color: #FCFCD5;*/ background-image:url("https://static.igem.org/mediawiki/2015/d/d0/TU_Eindhoven_Main_Background.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #body{ z-index:1; position:absolute; top:60px; width:100%; line-height: normal; } #container{ margin:0 auto; position:relative; /*border-radius:15px 30px 30px 15px; FB/Twitter komt er nog onder vandaan*/ background-image: url("https://static.igem.org/mediawiki/2015/c/ca/TU_Eindhoven_grey_bf.png"); background-color: white; box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); min-height:1000px; width:1200px; } #containercontent{ width:80%; margin-left: 10%; } #igem_logo{ height:60px; float: left; } #menuwrapper{ z-index:2; position:relative; background: #ddeebb; width:100%; } #menu{ background: #ddeebb; position:relative; width:1200px; height:60px; margin:0 auto; } #submenuwrapper{ position:relative; z-index:2; background: #f6f0cc; width:100%; } #submenu{ margin-left: calc(50% - 0.5 * 1200px); position:relative; width:1200px; height:0px; overflow:hidden; transition: height 0.2s; } #menu1{ margin-left:calc(((100% - (5 * 15%)) / 2) - 76px); } #menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a, #menu3 { position:relative; font-weight: bold; text-align: center; line-height: 60px; width:15%; height:60px; display:block; text-decoration: none; float: left; color: #004415; } #menutwitter, #menufacebook { padding-right: 0 !important; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5{ width:100%; height:100%; } #sub2a{ margin-left:calc(((100% - (6 * 15%)) / 2) - (0.5 * 15%)); } #sub3a{ margin-left:calc((100% - (5 * 15%)) / 2 + (1.5 * 15%)); } #sub4a{ margin-left:calc(((100% - (6 * 15%)) / 2) + (2 * 15%)); } #sub5a{ margin-left:calc(((100% - (6 * 15%)) / 2) + (4 * 15%)); } #sub2,#sub3,#sub4,#sub5{ display:none; } /*Twitter*/ #facebookandtwitter{ width:calc((100% - (5 * 15%)) / 2); height:100%; float:right; } #twitter{ z-index:-1; top:0; right:0; position:absolute; } #twitter_logo{ /*height:60px;*/ height:100%; float:right; } /*FB*/ #facebook{ z-index:-1; top:0; right:0; position:absolute; height:500px; width:500px; } #facebook_logo{ /*height:50px;*/ height:100%; float:right; } #contentpanel{ width:10%; height:100%; float:right; background-color:#222222; } #contenttable{ float:left; width:90%; height:50%; } #contentmenu { z-index: 2; height:300px; background-color:#909090; position: fixed; width:300px; left: 0; top: calc(50% - 150px); transform: translateX(0); } #contentarrow{ margin-left:4px; transform: rotate(180deg); position:absolute; top:calc(50% - 20px); width:20px; height:40px; }