Template:Team:TU-Eindhoven Standard CSS

/* General CSS ----------------------------------------------------------------------------------------------*/ .Toggle_Header{ padding: 10px 0px 0px 0px; text-shadow:1px 1px 1px black; color: #083645; font-size: 20px; letter-spacing: 0px; } .size{ line-height:46px; } .source{ color:blue; cursor:pointer; } #emaillink{ color:black; text-decoration: none; } .email{ position: absolute; right:92px; width:46px; height:46px; font-size: 46px } #TUE_Logo{ position:absolute; top: 10px; left:10px; height: 80px; width: auto; } .Sub_Header{ padding: 10px 0px 0px 0px; margin: 20px 20px 0px 20px; text-shadow:1px 1px 1px black; color: #083645; font-size: 20px; letter-spacing: 0px; } .sub-arrow_2{ display:inline-block; transform:rotate(90deg); } .Toggle .sub-arrow_2:before{ content:"\203A"; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } .Toggle.tap .sub-arrow_2:before{ content:"\2039"; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } .Toggled{ display: none; margin-left: 20px; font-style:italic; } .Inline{ margin: .4em 0 .5em 0; display: inline; line-height: 1.5em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .Toggle{ font-weight: bold; color:#083645; } .References{ font-style: italic; list-style: none; font-size: 11px; padding:0; margin:0; line-height: 15px; } li{ margin:0; } .Website{ width:1200px; margin:0px auto; } .Website_Top{ width:1200px; margin:40px auto 0px; } .clear{ clear:both; } .Content_Row{ display: flex; position: relative; z-index: 1; width:1000px; min-height: 100px; overflow: hidden; } .Column{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:100%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Column_50{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:50%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Column_60{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:60%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Column_70{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:70%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Column_30{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:30%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Column_40{ font-size: 15px; font-family: verdana; padding: 0px 20px 0px 20px; text-align: justify; position: relative; float:left; width:40%; box-sizing: border-box; min-height: 10px; overflow: hidden; line-height: 1.5em; } .Caption{ font-size:13px; line-height:14px; font-style:italic; color: #44546a; padding-bottom:5px; padding-left:5px; padding-right:5px; text-align:left; } .P_Header_Top{ border-bottom: dashed rgba(0,0,0,0.5) 1px; padding: 0px 0px 10px 0px; margin: 10px 20px; text-shadow:1px 1px 1px black; color: #083645; font-size: 35px; letter-spacing: 0px; } .P_Header{ border-bottom: dashed rgba(0,0,0,0.5) 1px; padding: 40px 0px 10px 0px; margin: 10px 20px; text-shadow:1px 1px 1px black; color: #083645; font-size: 35px; letter-spacing: 0px; } #Height{ min-height: 300px; } /* Logo header---------------------------------------------------------------------------------------------- */ .Logo_Panel{ margin:0px 0px 10px 0px; width:1200px; height:100px; } .Logo{ position:relative; float:right; width:200px; height: 100px } .Title{ position:relative; vertical-align: middle; line-height: 100px; color:white; float:left; height: 100px; width:1000px; font-size:25px; } #TU_iGEM_Logo{ width:110px; height:100px; position:absolute; left:50%; top:50%; margin-left:0px; margin-top: -50px; } /* The Horizontal Menu Bar ----------------------------------------------------------------------------------------------*/ .The_Menu{ margin:0px 0px 10px 0px; width:1200px; height:46px; font-size: 16px; } .Menu_List { height:46px; position: relative; list-style: none; margin: 0; padding: 0; background-color: rgba(0, 0, 0, 0.3); } .Menu_List li { width:170px; position:relative; float: left; height:46px; } .Menu_List li:hover{ background-color: rgba(0, 0, 0, 0.5); } .Menu_List li a { display: block; color: white; text-align: center; padding: 11px 16px; text-decoration: none; } .hover:hover > .dropdown{ display:block; } .dropdown{ width:170px; list-style: none; z-index: 999; display:none; position:absolute; top:100%; left:0; background-color: rgba(0, 0, 0, 0.9); padding:0; } .dropdown li:hover{ background:rgba(255,255,255,0.1); } .dropdown2{ width:170px; list-style: none; z-index: 999; display:none; position:absolute; top:0; left:100%; background-color: rgba(0, 0, 0, 0.9); padding:0; } .hover2:hover > ul { display:block } .dropdown2 li:hover{ background:rgba(255,255,255,0.1); } .arrow_right:before{ content:"\2039"; float: right; margin-right: 5px; transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);} .Facebook{ right:0; position: absolute; width:46px; height:46px; } .iGEM{ position: absolute; right:46px; width:46px; height:46px; } #iGEM_Logo{ width:46px; height:46px; } #Facebook_Logo{ width:46px; height:46px; } /* The Page Panel ----------------------------------------------------------------------------------------------*/ .Header_Panel{ position: relative; height:150px; width:1200px; background: rgba(163, 16, 48, 1); } .Filler{ margin-top:10px; } .Filler_Menu{ position: relative; float:left; width:200px; height:50px; } .Filler_Content{ float:right; width:1000px; height: 50px; background:white; } .Panel{ background: -webkit-radial-gradient(top left,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -moz-radial-gradient(top left,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -o-radial-gradient(top left,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -ms-radial-gradient(top left,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: radial-gradient(top left,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); } .Panel_Image{ background: -webkit-radial-gradient(top right,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -moz-radial-gradient(top right,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -o-radial-gradient(top right,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: -ms-radial-gradient(top right,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); background: radial-gradient(top right,200px 200px,rgba(255,255,255,0.2),rgba(255,255,255,0)); } .Header_Panel:after, .Header_Panel:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .Header_Panel:after { border-color: rgba(136, 183, 213, 0); border-top-color: rgba(163, 16, 48, 1); border-width: 50px; margin-left: -550px; } .Header_Panel:before { border-color: rgba(194, 225, 245, 0); border-top-color: transparent; border-width: 60px; margin-left: -461px; } .Panel_Image{ position: relative; z-index:1; float:left; width:200px; height:150px; } .Panel_Image:before{ content : ""; position: absolute; right : 0; top : 25px; width : 1px; height : 75%; /* or 100px */ border-right: 1px dashed black; } .Panel{ float:right; width:1000px; height:150px; } .Panel_Title{ font-family: arial; font-weight: bold; padding:40px 20px 10px 20px; font-size:55px; color: white; } .Panel_Description{ padding:20px 100px 0px 20px; color:white; } /* The Vertical Menu Bar---------------------------------------------------------------------------------------------- */ .wrap{ background:#083645; min-height: 100px; overflow: hidden; } .Sub_Menu{ position: relative; float:left; min-height:500px; width:200px; background:#083645; } .active_Side_Menu { background-color: rgba(0, 0, 0, 0.5); } .Top_Arrow { border:50px solid #aaa; border-bottom:none; border-color:transparent #083645 transparent #083645; position:absolute; left:50px; bottom:-60px; } .Top_Arrow:before, .Top_Arrow:after { content:''; position:absolute; width:50px; bottom:0; height:50px; background:#083645; } .Top_Arrow:before { right:50px; } .Top_Arrow:after { left:50px; } .Side_Menu{ list-style-type: none; margin: 20px 0px 0px 0px; padding: 0; width: 200px; background-color: #083645; min-height:200px; overflow: auto; font-family: arial; font-weight: bold; } .Side_Menu li{ border-bottom: dotted 1px black; } .Side_Menu li a { display: block; color: white; padding: 8px 16px; text-decoration: none; } .Side_Menu li a.active { background-color: rgba(0, 0, 0, 0.5); color: white; } .Side_Menu li a:hover:not(.active) { background-color: rgba(0, 0, 0, 0.5); color: white; } .Side_Menu ul{ display:none; } .Side_Menu li.tap ul{ display: block; } .Side_Menu .sub-arrow:before{ content:"\203A"; float: right; margin-right: 5px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } .Side_Menu li.tap .sub-arrow:before{ content:"\2039"; } .Slide_Menu { list-style: none; margin: 0; padding: 0; width: 200px; background-color: rgba(0, 0, 0, 0.3); overflow: hidden; -webkit-transition: all 5s ease-out; } .Slide_Menu li{ border-top: 1px dotted black; } .Slide_Menu li a { display: block; color: white; padding: 8px 16px; text-decoration: none; } .Slide_Menu li a.active { background-color: rgba(0, 0, 0, 0.5); color: white; } .Slide_Menu li a:hover:not(.active) { background-color: rgba(0, 0, 0, 0.5); color: white; } /* The Content Page */ .The_Content{ float:right; min-height:1000px; width:1000px; background: rgba(255,255,255,1); position:relative; } /* The Footer ----------------------------------------------------------------------------------------------*/ .Footer{ position: relative; margin:60px 0px 0px 0px; width:1200px; height:200px; background:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.6)); } .Transparent_Arrow { border:50px solid #083645; border-top:none; border-color:transparent #083645 transparent #083645; position:absolute; left:50px; top:0px; } .Transparent_Arrow:before, .Transparent_Arrow:after { content:''; position:absolute; width:50px; top:0; height:50px; background:#083645; } .Transparent_Arrow:before { right:50px; } .Transparent_Arrow:after { left:50px; } .Footer:after, .Footer:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .Footer:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: rgba(0, 0, 0, 1); border-width: 50px; margin-left: -550px; } .Footer:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: transparent; border-width: 60px; margin-left: -461px; } .Sponsor{ position: relative; float:left; width:200px; height:200px; margin: 0px 20px 0px 20px; } #ICMS{ width: 190px; height: 80px; position:absolute; left:50%; top:50%; margin-left: -95px; margin-top: -40px; } #PAMM{ width: 190px; height: 114px; position:absolute; left:50%; top:50%; margin-left: -95px; margin-top: -57px; } #KPMG{ width: 190px; height: 140px; position:absolute; left:50%; top:50%; margin-left: -95px; margin-top: -70px; } #GenScript{ width: 190px; height: 58px; position:absolute; left:50%; top:50%; margin-left: -95px; margin-top: -29px; } #IDT{ width: 190px; height: 50px; position:absolute; left:50%; top:50%; margin-left: -95px; margin-top: -25px; } /* Back to Top ---------------------------------------------------------------------------------------------------*/ .back-to-top { display:none; width: 60px; height: 60px; text-indent: -9999px; position: fixed; z-index: 999; right: 20px; bottom: 10px; background: black url("https://static.igem.org/mediawiki/2016/8/82/Team_Eindhoven_Arrow_Up.png") no-repeat center 43%; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } :hover.back-to-top { background-color: rgba(163, 16, 48, 1); } .tue{ font-size:60px; float: right; color:white; margin-right:10px; }