Line 2: | Line 2: | ||
+ | <style> | ||
+ | body { | ||
+ | margin: 0; | ||
+ | background-color: #03ece4!important; | ||
+ | } | ||
+ | |||
+ | |||
+ | #content { | ||
+ | margin-left: auto; | ||
+ | align-self: center; | ||
+ | } | ||
+ | |||
+ | .navdiv-wrapper { | ||
+ | height: 40px; | ||
+ | background: #03ece4; | ||
+ | } | ||
+ | |||
+ | .navdiv-cover { | ||
+ | height: 40px; | ||
+ | position: absolute; | ||
+ | background: #000000; | ||
+ | width: 100vw; | ||
+ | left: 0vw; | ||
+ | |||
+ | } | ||
+ | |||
+ | #content .navdiv { | ||
+ | float: none; | ||
+ | margin: 0 auto; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #content .navdiv>a { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul{ | ||
+ | width: 100%; | ||
+ | height: 40px; | ||
+ | background: rgb(82, 81, 81); | ||
+ | line-height: 20px; | ||
+ | color: white; | ||
+ | margin-right: 15px; | ||
+ | margin-top: 40px; | ||
+ | margin-left: 0px; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | #content .navdiv ul li a { | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li a:hover{ | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | background: #000000; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li{ | ||
+ | list-style-type: none; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | color: white; | ||
+ | padding-bottom: 10px; | ||
+ | padding-top: 10px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li:hover{ | ||
+ | background: #1E90FF; | ||
+ | color: black; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .navdiv h1{ | ||
+ | width: 300px; | ||
+ | float: left; | ||
+ | cursor: pointer; | ||
+ | margin-left: 15px; | ||
+ | } | ||
+ | |||
+ | .navdiv .logo-wrapper { | ||
+ | position: absolute; | ||
+ | top: -30px; | ||
+ | background: white; | ||
+ | height: 40px; | ||
+ | border: 10px solid rgb(82, 81, 81);; | ||
+ | height: 100px; | ||
+ | border-radius: 100px; | ||
+ | } | ||
+ | |||
+ | .igem_logo_mobile img { | ||
+ | width:70px; | ||
+ | } | ||
+ | |||
+ | .igem_logo_mobile { | ||
+ | float:left; | ||
+ | padding-left: 5%; | ||
+ | width: 30%; | ||
+ | } | ||
+ | |||
+ | .igem_menu_control_mobile img { | ||
+ | width:25px; | ||
+ | } | ||
+ | |||
+ | .igem_menu_control_mobile { | ||
+ | float:right; | ||
+ | padding-right:5%; | ||
+ | padding-top:5px; | ||
+ | text-align:right; | ||
+ | width: 30%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navdiv .logo-wrapper img { | ||
+ | height: 100px; | ||
+ | width: 100px; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #content .submenu { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 40px; | ||
+ | } | ||
+ | |||
+ | #content .submenu a { | ||
+ | color: black; | ||
+ | background: #AEF9AE; | ||
+ | text-decoration: none; | ||
+ | text-align: left; | ||
+ | display: block; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .submenu a:hover{ | ||
+ | color: black; | ||
+ | background: #1E90FF; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li:hover .submenu { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
+ | |||
+ | |||
+ | ul.header a { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | ul.header a:hover { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*STYLING */ | ||
+ | |||
+ | |||
+ | /*Button */ | ||
+ | /************************************************/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link { | ||
+ | font-size: 130%; | ||
+ | margin: 30px auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a { | ||
+ | background-color: #03ece4; | ||
+ | color: #000000 !important; | ||
+ | font-weight: bold; | ||
+ | margin: auto; | ||
+ | text-decoration: none !important; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover { | ||
+ | background-color: #f8b732 !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* styling for the titles */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 230%;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 200%;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 130%;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 200%;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 200%;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 200%;} | ||
+ | |||
+ | |||
+ | /* styling for the titles h1, h2, h3*/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2, | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { | ||
+ | border-bottom:0px; | ||
+ | color: #000000; | ||
+ | font-family: "Arial Black", Gadget, sans-serif; | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | |||
+ | /* styling for the titles h4, h5, h6 */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h4 | ||
+ | { | ||
+ | border-bottom:0px; | ||
+ | color: #000000; | ||
+ | font-family: "Elephant", Gadget, sans-serif; | ||
+ | padding: 5px 0px; | ||
+ | } | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h5 | ||
+ | { | ||
+ | border-bottom:0px; | ||
+ | color: #51A8A5; | ||
+ | font-family: "Elephant", Gadget, sans-serif; | ||
+ | padding: 5px 0px; | ||
+ | } | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper h6 | ||
+ | { | ||
+ | border-bottom:0px; | ||
+ | color: #000000; | ||
+ | font-family: "Elephant", Gadget, sans-serif; | ||
+ | padding: 5px 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* font and text */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper p { | ||
+ | font-size: 130%; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | padding: 5px 0px; | ||
+ | text-align: left; | ||
+ | color: #000000; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Links */ | ||
+ | .content_wrapper a { | ||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | text-decoration-color:#72c9b6; | ||
+ | color: #72c9b6; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* hover for the links */ | ||
+ | .content_wrapper a:hover { | ||
+ | text-decoration:none; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | /* non numbered lists */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol { | ||
+ | font-size: 130%; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | padding:0px 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* numbered lists */ | ||
+ | .content_wrapper ol { | ||
+ | padding:0px; | ||
+ | font-size: 13px; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Table */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper table { | ||
+ | border: 1px solid #928b8b; | ||
+ | border-collapse: collapse; | ||
+ | font-size: 130%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* table cells */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper td { | ||
+ | border: 1px solid #c4baba; | ||
+ | border-collapse: collapse; | ||
+ | font-size: 105%; | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | /* table headers */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper th { | ||
+ | background-color:#c4baba; | ||
+ | border: 1px solid #928b8b; | ||
+ | border-collapse: collapse; | ||
+ | font-size: 110%; | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Wrapper for the content */ | ||
+ | .content_wrapper { | ||
+ | width: 85%; | ||
+ | margin-left:150px; | ||
+ | padding:10px 0px; | ||
+ | float:left; | ||
+ | background-color:03ece4; | ||
+ | } | ||
+ | |||
+ | /*LAYOUT */ | ||
+ | .column { | ||
+ | padding: 10px 0px; | ||
+ | float:left; | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | /*styling for all images*/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img, | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img, | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img { | ||
+ | margin-bottom: 15px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /*main layout class */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column { | ||
+ | float:left; | ||
+ | margin: 1% 2%; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | /* 100% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; } | ||
+ | |||
+ | /* 66% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; } | ||
+ | |||
+ | /* 33% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; } | ||
+ | /* 75% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.three_quarter_size { width: 71%; } | ||
+ | /* 50% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.half_size { width: 46%; } | ||
+ | /* 25% */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.quarter_size { width: 21%; } | ||
+ | |||
+ | /* page break */ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | /*add extra space to page break with clear class*/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space { | ||
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | /* horizontal line to divide the page*/ | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider { | ||
+ | border-top: 1px solid #c4baba; | ||
+ | margin: auto; | ||
+ | width: 98%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background { | ||
+ | background-color: #e4dede; | ||
+ | } | ||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top { | ||
+ | border-top: 4px solid #5bc7d8; | ||
+ | } | ||
+ | |||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full { | ||
+ | border: 4px solid #5bc7d8; | ||
+ | } | ||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top { | ||
+ | border-top: 4px solid #f8b732 | ||
+ | } | ||
+ | |||
+ | |||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full { | ||
+ | border: 4px solid #f8b732; | ||
+ | } | ||
+ | |||
+ | /* 1800px */ | ||
+ | /************************************************/ | ||
+ | @media only screen and (max-width: 1800px) { | ||
+ | .igem_2018_team_content { width: 85%;} | ||
+ | .igem_2018_team_menu {display:block;} | ||
+ | } | ||
+ | |||
+ | /* 1400px */ | ||
+ | /************************************************/ | ||
+ | @media only screen and (max-width: 1400px) { | ||
+ | .igem_2018_team_menu .menu_item { font-size:100%;} | ||
+ | .igem_2018_team_menu .submenu .submenu_item { font-size:90%;} | ||
+ | .igem_2018_team_menu {display:block;} | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 1001px) { | ||
+ | .igem_2018_team_menu {display:block;} | ||
+ | } | ||
+ | |||
+ | /* 1000px */ | ||
+ | /************************************************/ | ||
+ | @media only screen and (max-width: 1000px) { | ||
+ | .igem_2018_team_content {width:100%; margin-left:0px;} | ||
+ | .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;} | ||
+ | .igem_2018_team_mobile_bar {display:block;} | ||
+ | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media only screen and (max-width: 500px) { | ||
+ | .igem_2018_team_menu {min-width:100%; width:100%; } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .judges-will-not-evaluate { | ||
+ | border: 4px solid #72c9b6; | ||
+ | display: block; | ||
+ | margin: 5px 15px; | ||
+ | width: 95%; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- HTML --> | ||
+ | <div class="navdiv-wrapper"> | ||
+ | <div class="navdiv-cover"></div> | ||
+ | <div class="navdiv"> | ||
+ | <ul> | ||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Team">TEAM</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Team"> Team Members </a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Collaborations"> Collaborations </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Project">PROJECT</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Description ">Description</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Design"> Design</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Experiments ">Experiments</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Notebook">Notebook</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/InterLab">InterLab</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Model">Model</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Results">Results</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Demonstrate">Demonstrate</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Improve">Improve</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Attributions">Attributions</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Parts">PARTS</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Parts">Parts Overview</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Basic_Part">Basic Parts</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Composite_Part">Composite Parts</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Part_Collection">Part Collection</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Safety">SAFETY</a> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Human_Practices">HUMAN PRACTICES</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Human_Practices">Human Practices</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Public_Engagement">Education and Engagement</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <li><a href="https://2018.igem.org/Team:RHIT/Awards">AWARDS</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Applied_Design">Applied Design</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Entrepreneurship">Entrepreneurship</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Hardware">Hardware</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Measurement">Measurement</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Model">Model</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Plant">Plant</a> | ||
+ | <a href="https://2018.igem.org/Team:RHIT/Software">Software</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li><a href="https://igem.org/2018_Judging_Form?team=RHIT">JUDGING FORM</a> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> | ||
Revision as of 21:46, 12 June 2018
<script> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function() {
$("#HQ_page").attr('id',);
//highlight current page on the menu
highlight_current_page_menu();
//accessing submenus $(".menu_item").click(function(){ $(".submenu_control_icon", this).toggleClass("open"); $(this).next(".submenu").fadeToggle(400); });
//mobile menu access $(".igem_2018_team_mobile_bar").click(function(){ $(this).next().toggleClass("displaying_menu"); });
});
function highlight_current_page_menu() {
var page_url="https://2018.igem.org/"; page_url = page_url + wgPageName; $("a[href$='"+ page_url +"']").children().addClass("current_page");
//if the page is in a submenu, open the submenu and make the appropiate changes if( $( ".current_page" ).hasClass( "submenu_item" )){
$(".current_page").parent().parent().fadeToggle(400); $(".current_page").parent().parent().prev().addClass("current_page"); $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>
<style>
/**************************************************************************************************************************************************************************************************/
/**************************************************************************************************************************************************************************************************/ /* DEFAULT WIKI SETTINGS */ /**************************************************************************************************************************************************************************************************/
#home_logo, #sideMenu { display:none; }
#sideMenu, #top_title, .patrollink {display:none;}
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
body {background-color:white; }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
/**************************************************************************************************************************************************************************************************/
/* MENU */
/**************************************************************************************************************************************************************************************************/
/*this wraps the whole of the menu*/ .igem_2018_team_menu { background-color:#03ECE4; border-left: 1px solid #c4baba; display:block; float:right; height:100vh; max-width: 270px; overflow-y: auto; overflow-x: hidden; padding:0px; position:fixed; right:0%; text-align:left; width: 15%; }
.igem_2018_team_menu.displaying_menu{
display:block;
}
.igem_2018_team_menu a { color: #000000; text-decoration:none; }
.igem_2018_team_menu img { width:100%; }
.igem_2018_team_menu .menu_item {
background-color: #32CD32; border-bottom: 1px solid #FFFFFF; clear: both;
color: #000000;
cursor: pointer;
float: left;
font-size: 120%; font-weight: bold; padding: 15px 0px 15px 5%; width: 100%;
}
.igem_2018_team_menu .menu_item.direct_link { color: #000000; padding-left: 15%; } .igem_2018_team_menu .menu_item:hover { background-color: #1E90FF; }
.igem_2018_team_menu .menu_item .submenu_control_icon {
color: #000000;
float: left;
width: 10%;
}
/* submenu icon "+" "-"*/ .igem_2018_team_menu .menu_item .submenu_control_icon::before { content: ">"; }
/* submenu icon "+" "-"*/ .igem_2018_team_menu .menu_item .submenu_control_icon.open::before { content: "-"; }
/*submenu wrapper*/ .igem_2018_team_menu .submenu{ background-color: #AEF9AE; clear:both; display:none; float: left; width:100%; }
/*styling for a submenu item*/ .igem_2018_team_menu .submenu .submenu_item { border-bottom: 1px solid #FFFFFF;
color: #000000; height: 30px; float: left; font-size: 110%;
font-weight: bold;
padding: 12px 0px 0px 15%; width: 100%;
}
.igem_2018_team_menu .submenu .submenu_item:hover { background-color: #1E90FF; }
.igem_2018_team_menu .submenu .submenu_item.current_page,
.igem_2018_team_menu .menu_item.current_page,
.igem_2018_team_menu .menu_item.direct_link.current_page {
background-color:#7acbd8;
}
/*mobile menu bar styling*/ /**************************************************************************************************************************************************************************************************/
.igem_2018_team_mobile_bar {
background-color:#e4dede;
border-bottom: 1px solid #c4baba;
cursor:pointer;
display:none;
float:left;
margin-top: 0;
padding: 5px 0;
position:fixed;
width:100%;
}
.igem_logo_mobile img { width:70px; }
.igem_logo_mobile { float:left; padding-left: 5%; width: 30%; }
.igem_menu_control_mobile img { width:25px; }
.igem_menu_control_mobile { float:right; padding-right:5%; padding-top:5px; text-align:right; width: 30%; }
/**************************************************************************************************************************************************************************************************/ /* CONTENT OF THE PAGE */ /**************************************************************************************************************************************************************************************************/
/* general wrapper for the content */ .igem_2018_team_content { background-color:#E0FDFC; display:block; width: 87%; }
/* subwrapper to center content */ .igem_2018_team_content .igem_2018_team_column_wrapper { margin:auto; max-width: 1400px; width:90%; }
/*general styling*/ /**************************************************************************************************************************************************************************************************/
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 230%;} .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 200%;} .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 130%;} .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 200%;} .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 200%;} .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 200%;}
/* styling for the titles h1, h2, h3*/
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2,
.igem_2018_team_content .igem_2018_team_column_wrapper h3 {
border-bottom:0px; color: #000000; font-family: "Arial Black", Gadget, sans-serif; padding: 10px 0px; }
/* styling for the titles h4, h5, h6 */ .igem_2018_team_content .igem_2018_team_column_wrapper h4 { border-bottom:0px; color: #000000; font-family: "Elephant", Gadget, sans-serif; padding: 5px 0px; }
.igem_2018_team_content .igem_2018_team_column_wrapper h5 {
border-bottom:0px; color: #51A8A5; font-family: "Elephant", Gadget, sans-serif; padding: 5px 0px; } .igem_2018_team_content .igem_2018_team_column_wrapper h6
{
border-bottom:0px; color: #000000; font-family: "Elephant", Gadget, sans-serif; padding: 5px 0px; }
/* text */ .igem_2018_team_content .igem_2018_team_column_wrapper p { font-size: 130%; font-family: Arial, Helvetica, sans-serif; padding: 5px 0px; text-align: left; color: #000000; }
/* Links */ .igem_2018_team_content .igem_2018_team_column_wrapper a { color: #034FEC; font-weight: bold; text-decoration: underline; text-decoration-color:#034FEC; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; }
/* hover for the links */ .igem_2018_team_content .igem_2018_team_column_wrapper a:hover { color: #f8b732; text-decoration:none; }
/* Table */
.igem_2018_team_content .igem_2018_team_column_wrapper table {
border: 1px solid #928b8b;
border-collapse: collapse;
font-size: 130%;
width: 100%;
}
/* table cells */ .igem_2018_team_content .igem_2018_team_column_wrapper td { border: 1px solid #c4baba; border-collapse: collapse; font-size: 105%; padding: 10px; vertical-align: text-top; }
/* table headers */ .igem_2018_team_content .igem_2018_team_column_wrapper th { background-color:#c4baba; border: 1px solid #928b8b; border-collapse: collapse; font-size: 110%; padding: 10px; vertical-align: text-top; }
/* non numbered lists */ .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol { font-size: 130%; font-family: Arial, Helvetica, sans-serif; padding:0px 20px; }
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
/*layout classes*/ /**************************************************************************************************************************************************************************************************/
/*main layout class */ .igem_2018_team_content .igem_2018_team_column_wrapper .column { float:left; margin: 1% 2%; padding: 0px; }
/* 100% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
/* 66% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
/* 33% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
/* 75% */
.igem_2018_team_content .igem_2018_team_column_wrapper .column.three_quarter_size { width: 71%; } /* 50% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.half_size { width: 46%; } /* 25% */ .igem_2018_team_content .igem_2018_team_column_wrapper .column.quarter_size { width: 21%; }
/*styling for all images*/
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
margin-bottom: 15px;
width: 100%;
}
/* page break */
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
clear:both;
}
/*add extra space to page break with clear class*/
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
height: 30px;
}
/* horizontal line to divide the page*/ .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
border-top: 1px solid #c4baba;
margin: auto;
width: 98%;
}
/*support classes*/
/**************************************************************************************************************************************************************************************************/
/*Button */
/************************************************/
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
font-size: 130%;
margin: 30px auto;
text-align: center;
}
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a { background-color: #03ece4; color: #000000 !important; font-weight: bold; margin: auto; text-decoration: none !important; padding: 10px 15px; }
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover { background-color: #f8b732 !important; }
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight { padding: 15px 20px; }
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5, .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 { padding: 5px 15px; }
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background { background-color: #e4dede; }
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
border-top: 4px solid #5bc7d8;
}
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
border: 4px solid #5bc7d8;
}
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
border-top: 4px solid #f8b732
}
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
border: 4px solid #f8b732;
}
/*mobile*/
/**************************************************************************************************************************************************************************************************/
/* 1800px */
/************************************************/
@media only screen and (max-width: 1800px) {
.igem_2018_team_content { width: 85%;}
.igem_2018_team_menu {display:block;}
}
/* 1400px */ /************************************************/ @media only screen and (max-width: 1400px) { .igem_2018_team_menu .menu_item { font-size:100%;} .igem_2018_team_menu .submenu .submenu_item { font-size:90%;} .igem_2018_team_menu {display:block;} }
@media only screen and (max-width: 1001px) { .igem_2018_team_menu {display:block;} }
/* 1000px */ /************************************************/ @media only screen and (max-width: 1000px) { .igem_2018_team_content {width:100%; margin-left:0px;} .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;} .igem_2018_team_mobile_bar {display:block;} .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
}
@media only screen and (max-width: 500px) {
.igem_2018_team_menu {min-width:100%; width:100%; }
}
/**************************************************************************************************************************************************************************************************/
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>