Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

Revision as of 11:31, 10 August 2015

body{ line-height: normal; /*background-color: #FCFCD5; background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-attachment: fixed; background-size: 100%; background-repeat: no-repeat;*/ } a:focus {outline: 0;} h1{ font-family: Lato_Bold, Arial, sans-serif; font-size:40px; margin: 0; font-weight: normal; display: inline; } h2{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size: 25px; margin: 0; font-weight: normal; display: inline; } h3 { font-family: Lato_Italic, Arial, sans-serif; font-size:26px; margin: 0; font-weight: normal; display: inline; } h4{ font-family: Lato_Bold, Arial, sans-serif; font-size:26px; margin:0; font-weight: normal; display: inline; } h5 { font-family: Lato_Italic, Arial, sans-serif; font-size:20px; text-decoration: underline; margin: 0; font-weight: normal; display: inline; } .buttons{ display:inline-block; } .tekst1 { font-family: Lato_Regular, Arial, sans-serif; font-size:20px; } .tekst1B{ font-family: Lato_Bold, Arial, sans-serif; font-size:20px; } .tekst1BI{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size:20px; } .caption{ font-family: Lato_Italic, Arial, sans-serif; font-size:16px; } .spoilerbutton { display:inline; } .spoiler { display:none; margin-top: 20px; margin-bottom:20px; overflow:hidden; background: #f5f5f5; margin-left:50px; } .spoilerimage { float: right; margin: 5px 5px 0px 30px; text-align: justify; } .spoilerimagec { display: block; margin-top:10px; margin-left: auto; margin-right: auto } #background{ height:100%; width:100%; position:fixed; /*background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-size: cover;*/ top:0; left:0; } #body{ z-index:1; position:absolute; top:60px; width:100%; line-height: normal; } #container{ margin:0 auto; margin-bottom: 110px; 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%; } #menuigemlogo{ height:100%; width:76px; float: left; display:block; background-image: url('https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_iGEM_Logo.png'); background-size: cover; background-repeat: no-repeat; } #menuwrapper{ z-index:2; position:relative; /*background: #ddeebb;*/ width:100%; } #menulinks,#menurechts{ position:absolute; top:0; height:60px; width:calc((100% - 1200px) / 2); background-color: rgba(255,255,255,0.3); } #menulinks{ left:0; } #menurechts{ right:0; } #menu{ position:relative; width:1200px; height:60px; margin:0 auto; display:block; background-color: rgba(255,255,255,0.3); } #submenuwrapper{ position:relative; z-index:2; width:100%; } #submenulinks,#submenurechts{ position:absolute; top:0; height:100%; width:calc((100% - 1200px) / 2); background-color: rgba(255,255,255,0.5); } #submenulinks{ left:0; } #submenurechts{ right:0; } #submenu{ background-color: rgba(255,255,255,0.5); overflow: hidden; position:relative; width:1200px; height:0px; margin:0 auto; transition: height 0.2s; } #menu1{ margin-left:calc(((100% - (6 * 12% + 3%)) / 2) - 76px); } #menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a, #menu3, #menu2, #menu4, #menu5 { position:relative; font-family: Lato_Bold, Arial, sans-serif; /*font-weight: bold;*/ text-align: center; line-height: 60px; height:60px; display:block; text-decoration: none; float: left; color: #004415; } #submenu a{ width:12%; } #menu1{ width:12%; } #menu2{ width:12%; } #menu3{ width:12%; } #menu4{ width:15%; } #menu5{ width:12%; } #menu6{ width:12%; } #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 * 12% + 3%)) / 2)); } #sub3a{ margin-left:calc(((100% - (6 * 12% + 3%)) / 2)); } #sub4a{ margin-left:calc(((100% - (6 * 12% + 3%)) / 2) + 2 * 12% + 1.5%); } #sub5a{ margin-left:calc(((100% - (6 * 12% + 3%)) / 2) + 3.5 * 12% + 3%); } #sub2,#sub3,#sub5{ display:none; } /*Twitter #facebookandtwitter{ width:calc((100% - (5 * 15%)) / 2); height:100%; float:right; background-color: red; } */ #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; } /* Content Menu*/ .contentLink{ text-decoration: underline; } .contentList{ list-style: initial; margin-left: 30px; margin-bottom: 0; margin-top: 0; } #infoTab{ top:35%; z-index:10; margin-left: calc(100% - 350px); position: fixed; width:350px; transition: transform 1s; } #infoTabTitle{ border-bottom: solid 1px black; float:right; width:80%; height:50px; background: rgba(255, 255, 255, 0.5); line-height:40px; text-align:center; font-size:20px; } #infoTabContent{ float:right; width:80%; background: rgba(230, 230, 230, 0.5); text-align:left; } .contentMenuImg{ margin-right:2px; transform: rotate(-180deg); transform-origin: 50% 50%; height:20px; vertical-align: 8%; } #contentToggle{ box-sizing: border-box; background: rgba(255, 255, 255, 0.5); width:20%; float:left; border-right: solid 1px black; } #contentToggleImg{ position:relative; display:block; width:25px; height:38px; margin: 0 auto; transform: rotate(180deg); top: calc((100% - 38px) / 2); }