View source for Template:Main2017

<html>

<script>

// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.



	$(document).ready(function() {



		hide_show_menu();

		$("#HQ_page").attr('id','');

			$( "#load_menu_here" ).load( "https://2017.igem.org/HQ:Menu #Menu" , function() {

				//executes menu functionality ( accordion and toggles) once the menu is loaded
				menu_functionality(); 

				// highlights on which page/hub you are currently in 
				highlight_current_page();

			});


			$(".month_access").click(function(){

				$(this).next().next().fadeToggle(400);
				$(this).toggleClass("plus");
			});
		
			$(".expand_content.control_button").click(function(){

				$(this).next(".expand_content.more").fadeToggle(400);
				$(this).toggleClass("less");
			});



		function highlight_current_page () {

			wgPageName = wgPageName.replace(/\//g,"-");  // remove dashes from page name and turn them into "-"


			$('#' + wgPageName).addClass("current_page");

			switch ( (wgPageName.match( /-/g ) || []).length  ) {  // check how many "tiers" (  /  ) the page name has in order to nest it

				case 0:  // this is a main menu item



					$(".current_page > .submenu_access").addClass("less");
					$(".current_page > .submenu").fadeIn(400);
					break;



				case 1:  // this is a link inside a submenu

					$('#' + wgPageName.substr(0, wgPageName.indexOf('-') )).addClass("current_page");
					$(".current_page > .submenu_access").addClass("less");
					$(".current_page > .submenu").fadeIn(400);
				break;

				case 2:  // this is a link inside a submenu

					$('#' + wgPageName.substr(0, wgPageName.lastIndexOf('-') )).addClass("current_page");
					$('#' + wgPageName.substr(0, wgPageName.indexOf('-') )).addClass("current_page");
					
					$(".current_page > .submenu_access").addClass("less");
					$(".current_page > .submenu").fadeIn(400);


					$("#" + wgPageName.slice(wgPageName.indexOf("-")+1, wgPageName.lastIndexOf("-")) +"_submenu" ).fadeIn(400);
					$("#" + wgPageName.slice(wgPageName.indexOf("-")+1, wgPageName.lastIndexOf("-")) +"_submenu" ).prev().addClass("less");

				break;

			}


		}


	//menu functionality
		function menu_functionality() {

			$(".submenu_access").click(function(){
				$(this).next().fadeToggle(400);
				$(this).toggleClass("less");
			});

			$(".collapsable_menu_control").click(function() {	
				$("#all_menu_items").fadeToggle(400);
			});


			$("#main_menu_control").click(function() {	

				if($('.igem_menu_wrapper .submenu').is(':visible')) {
					$(".igem_menu_wrapper .submenu").hide();
					$(".submenu_access").removeClass("less");
				}
				else {
					$(".igem_menu_wrapper .submenu").show();
					$(".submenu_access").addClass("less");
				}
			});
		}




		function hide_show_menu() {

  			if (document.getElementById('bars_item')) {
				$("#bars_item").click(function() {
					$("#sideMenu").hide();
					$(".igem_menu_wrapper").fadeToggle("100");
					$(".content_wrapper").toggleClass("full_screen");
				});		
  			} 
			else {
    				setTimeout(hide_show_menu, 15);
			}
		}



	//make boxes same height 

		function make_boxes_same_height() {
			$(".same_height").css('height', Math.max(($(".same_height.A").height()),($(".same_height.B").height()), ($(".same_height.C").height()) ) );
		}


	//image slider

		$(function () {

			var change_img_time   = 4500; 
			var transition_speed    = 450;

			var simple_slideshow  = $(".image_slider"),
			listItems  = simple_slideshow.children('li'),
			listLen = listItems.length,
			i = 0,

			change_images = function () {

				listItems.eq(i).fadeOut(transition_speed, function () {

					i += 1;
					if (i === listLen) {
						i = 0;
					}

					listItems.eq(i).fadeIn(transition_speed);
				});
			};

			listItems.not(':first').hide();
			setInterval( change_images, change_img_time);

		});

		make_boxes_same_height();



	});





</script>


<style>



/********************************* DEFAULT WIKI SETTINGS  ********************************/
	#home_logo, #sideMenu { display:none; }
	#sideMenu, #top_title, .patrollink  {display:none;}
	#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
	body {background-color:white; }
	#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/********************************* MENU ********************************/
	/* Wrapper for the menu */
	.igem_menu_wrapper { 
		background-color:#dddddd; 
		float:right; 
		height:100vh; 
		max-width: 270px;
		overflow-y: auto;
		overflow-x: hidden;
		padding:0px;
		position:fixed; 
		right:0%;
		text-align:left;
		width: 15%; 
	}


	/* styling for the images in the side menu */
	.igem_menu_wrapper img { 
		width: 70%;
		margin: auto;
		padding-left: 20%;
	}


	.logo_container { float:left; width:80%; }

	/* class that shows the menu is displayed while the menu is loading */
	.menu_is_loading {
		text-align:center;
	}


	.menu_bottom_padding { 
		background-color: #f2f2f2; 
		padding: 10px 0px;  
		float: left; 
		height:40px; 
	}


	.menu_item_wrapper { 
		width:100%; 
		float: left;  
		border-bottom: 1px solid #d3d3d3; 
		background-color: #dddddd; 
		padding: 2px 0px 0px 0px; 
	}

	.menu_item_wrapper:hover, .submenu_item:hover , .sub_submenu_item:hover, .submenu > .submenu_access:hover,  menu_item:hover {
		background-color:#00bdcd; 
		text-decoration: none; 
		cursor:pointer;
	

	}

	.submenu_access:hover { background-color: #f2f2f2;}

 	.submenu > .submenu_access:hover { background-color: #ffffff;}


	.menu_icon { width: 20%; float:left;}


	.igem_menu_wrapper .menu_icon img { 
		width: 20px;
		padding: 5px 10px 5px 5px; 
	}
 
	/* styling for menu items in the menu */
	.menu_item { float:left; padding: 9px 0px 7px 0px; font-weight: bold;  color: #000000;}

	.submenu_item.current_page, .menu_item_wrapper.current_page, .sub_submenu_item.current_page { background-color: #00bdcd;}

	.submenu_item.with_submenu_items { width: 70%;}

	/* defines width - for menu items that take you to a page */
	.page_link {
		width: 80%;
	}

	/* defines width - for menu items that take you to a hub */
	.hub_link  {
    		width: 60%;
	}

	/*hides submenus by default */
	.submenu {
		display: none;	
	}

	.submenu > .menu_item > .submenu  {
		color: #666666;
		font-weight: normal;
	}


	.sub_submenu_item {
		background-color: white;
		float: left;
		width: 100%;
		padding: 10px 0px 10px 15%;
		color: black;
		font-weight: bold;
		border-bottom: 1px solid #dddddd;
	}

	.submenu_access { 
		float: right;
		color: #000000;
		padding: 10px 0px;
		font-size: 16px;
		font-weight: bold;
		width:20%;
		background-color: #dddddd;
		text-align: center;
		margin-bottom: -2px;
		margin-top: -2px;
	}

	/* this is the icon for when the content is collapsed */
	.submenu_access::before {
		content: "+"; 
	}

	.submenu > .submenu_access { background-color: #f2f2f2;     border-bottom: 1px solid #d3d3d3; margin:0px;}

	.menu_title {
		float: left;
		width: 100%;
		font-size: 12px;
		color: #000000;
		padding: 10px 0px;
		background-color: #f2f2f2;
		padding-left: 5%;
		border-bottom: 1px solid #d3d3d3;
	}


.submenu_item {    width: 100%;
    background-color: #f2f2f2;
    padding: 10px 0px 10px 10%;
    float: left;
    border-bottom: 1px solid #d3d3d3;
    color: black;
    font-weight: bold;}
	

	/* this is the icon for when the content is expanded */
	.less::before {
		content: "–"; 
	}	


.collapsable_menu_control {
    width: 100%;
    padding: 15px 0px;
    display: none;
float:left;
    background-color: #f2f2f2;
    text-align: center;
    font-weight: bold;
    color: #5e5f5f;
    cursor: pointer;
}


.collapsable_menu_control:hover {
background-color: #00bdcd;
color: #ffffff;
}

/********************************* CONTENT OF THE PAGE ********************************/

	/* Wrapper for the content */
	.igem_content_wrapper {
		/*width: 88.9%;*/
		width: -webkit-calc(100% -270px);
		width:    -moz-calc(100% - 270px);
 		width:  calc(100% - 270px);
		display:block;
		background-color:white; 
	}



	/* subwrapper to center content */
	.igem_column_wrapper {
		margin:auto;
		max-width: 1400px;
		width:90%;
	}



/* class for when the menu is not shown and the content occupies the whole screen */
	.igem_content_wrapper.full_screen {
		width: 96%; 
	}


	/*LAYOUT */
	.column  { 
		padding: 10px 0px;
		float:left; 
	}


	/*main layout class */
	.column  { 
		float:left;
		margin: 1% 2%;
		padding: 0px;
	}

	/* 100% */
	.full_size { width:96%; }
	/* 66% */
	.two_thirds_size { width: 62.6%; }
	/* 33% */
	.third_size { width: 29.3%; }
	/* 75% */
	.three_quarter_size {  width: 71%; }
	/* 50% */
	.half_size {  width: 46%; }
	/* 25% */
	.fourth_size {	width: 21%; }

	/*styling for all images*/
	.full_size img, 
	.half_size img, 
	.two_thirds_size img, 
	.third_size img,  
	.three_quarters_size img, 
	.fourth_size img { 
		margin-bottom: 15px;
		width: 100%; 
	}


	.clear {
		clear:both;
	}

.clear.extra_space {
height: 30px;
}


.line_divider {
    border-top: 1px solid #d3d3d3;
    width: 98%;
    margin: auto;
}



	.highlight { 
		padding: 15px 0px;
		margin: 0px 15px;
	}


	.highlight.link_box:hover{
		background-color: #666666;
		-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;  
	} 

	.highlight.link_box a { 
		text-decoration: none;
		color: black;
		font-weight: 100;
	}


	.highlight.gray {
		background-color: #f2f2f2; 
	}

	.highlight.turquoise_top {
    		border-top: 4px solid #00bdcd;
	}


	.highlight.turquoise_border {
    		border: 4px solid #00bdcd;
	}



.patrollink {display:none;}


.turquoise_full {
border: 4px solid #00bdcd;
}

.yellow_full {
border: 4px solid #ffe000;
}

.blue_full {
border: 4px solid #00bccc;
}


.highlight.news_item {
    border: 2px solid #d3d3d3;
    margin: auto;
    height: auto;
    overflow: auto;
 width: 97%;
}

.news_date {
font-style: italic;
    display: inline-block;
    color: #333333;
    float: right;
    padding-top: 5px;
    padding-right: 15px;
}


	.expand_content.first{
		float:left; 
		margin-right: -15px;
	}


	.expand_content.control_button {
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
		float: left;
		margin: 0px 5px;
		border: 2px solid #00bdcd;
		background-color:#00bdcd;
		color:#ffffff;
		width: 20px;
		padding-bottom: 1px;
		cursor:pointer;
	}

	.expand_content.control_button:hover {
		color:#00bdcd;
		background-color:#ffffff;
		border: 2px solid #00bdcd;
		float: left;
	}


	.expand_content.control_button::before {
		content: "+"; 
	}

	/* this is the icon for when the content is expanded */
	.expand_content.control_button.less::before {
		content: "–"; 
	}

	.expand_content.more { 
		float:left; 
		display: none;
	}



	.button {
		margin: auto;
		text-align: center;
		font-size: 15px;
		margin: 30px 0px;
	}

	.button a,  #bodyContent a[href ^="https://"], .link-https {
		color: #000000 !important;
		font-weight: bold;
		margin: auto;
		text-decoration: none !important;
		background-color: #00bdcd;
		padding: 10px 15px;
	}

	.button a:hover , #bodyContent a[href ^="https://"]:hover, .link-https {
		background-color: #000000;  
		color: #00bdcd !important;
	}

.multiple_links a{
color: black !important;
}

.multiple_links a:hover {
color: #004789 !important;
}



/* image slider styling */
	ul.image_slider {
		list-style: none;
		margin: 0px -19px;
		padding:0px;
	}

	.image_slider ul {
		padding: 0px;
	}



.column.full_size.navigation_support {
    padding: 0px 0px 0px 20px;
}

.navigation_button {   
    background-color: #ffffff;
    border: 2px solid #5e5f5f;
    color: #5e5f5f;
    max-width: 40px;
    text-align: center;
    padding: 3px 0px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 50%;
    float: left;
    width: 25px;
    margin-right: 10px;
margin-top: 3px;
}


.navigation_button.arrow_navigation {
border: 2px solid white;
margin-top: 0px;
}

.navigation_button.arrow_navigation:hover {
 color: #00bdcd; 
background-color: #ffffff;
border: 2px solid white;
}

.navigation_button.arrow_navigation.previous_item::before {
		content: url(https://static.igem.org/mediawiki/2017/f/ff/Previous_demo_icon-14-21.svg); 
}


.navigation_button.arrow_navigation.next_item::before {
		content: url(https://static.igem.org/mediawiki/2017/1/12/Next_demo_icon-14-21-22.svg); 
}


.navigation_button:hover , .title_extra:hover +  .navigation_button, .navigation_button.active_navigation_button:hover  { 
background-color: #00bdcd; 
color: #ffffff; 
border: 2px solid #00bdcd;
}




.title_extra {color: #5e5f5f; float:left; padding: 7px 0px; margin-right: 20px; display:none;}

.title_extra.main_item { display:block; text-decoration: underline;} 
.title_extra.support_item {display:block;margin-right:0px; margin-left: -17px;}
.title_extra.support_item:hover { color: #5e5f5f;}
.navigation_button:hover + .title_extra , .title_extra:hover {   color: #00bdcd; display:block; }

.navigation_button.active_navigation_button {
background-color: #d3d3d3; 
color: #5e5f5f;
border: 2px solid #5e5f5f;
}




.igem_menu_wrapper::-webkit-scrollbar { 
    display: none; 
}



	/*STYLING */





	/* styling for the titles */
	.igem_content_wrapper h1, .igem_content_wrapper h2 {
		padding:5px 15px; 
		border-bottom:0px; 
		color: #00bdcd;
	}



	.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 { 
		padding:5px 15px; 
		border-bottom:0px; 
		color: #000000;  
	}


	/* font and text */
	.igem_content_wrapper p { 
		padding:0px 15px; 
		font-size: 13px;
		font-family:Tahoma, Geneva, sans-serif; 
	}

	/* Links */
	.igem_content_wrapper a { 
		font-weight: bold; 
		text-decoration: underline;
		text-decoration-color:#004789;
		color: #004789;
		-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 */
	.igem_content_wrapper a:hover { 
		text-decoration:none;
		 color:#000000;
	}

	/* non numbered lists */
	.igem_content_wrapper ul {
		padding:0px 20px;
		font-size: 13px;
		font-family:Tahoma, Geneva, sans-serif; 
	}

	/* numbered lists */
	.igem_content_wrapper ol {
		padding:0px; 
		font-size: 13px;
		font-family:Tahoma, Geneva, sans-serif; 
	}

	/* Table */
	.igem_content_wrapper table { 
		width: 97%; 
		margin:15px 10px; 
		border: 1px solid #d3d3d3; 
		border-collapse: collapse; 
	}

	/* table cells */
	.igem_content_wrapper  td { 
		padding: 10px;
		vertical-align: text-top; 
		border: 1px solid #d3d3d3; 
		border-collapse: collapse; 
	}

	/* table headers */
	.igem_content_wrapper th { 
		padding: 10px; 
		vertical-align: text-top; 
		border: 1px solid #d3d3d3; 
		border-collapse: collapse; 
		background-color:#f2f2f2; 
	}








.vertical_line {
  position: absolute;
  width: 5px;
  background-color: #ccc;
  left: 20px;
  height: 100%;
  z-index: -1;
}

.left_column {
width: 12%;
    border: 4px solid #d3d3d3;
    text-align: center;
    font-size: 25px;
    float: left;
    border-radius: 10px;
    color: #666666;
    padding: 4% 0;
font-weight: bold;

}


.left_column.month_access{
  border: 4px solid #00bdcd;

    color: #00bdcd;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.left_column.month_access::before {
content: "-"; 
}

	.left_column.month_access.plus::before {
		content: "+"; 
	}	


.left_column.month_access:hover {
background-color: #00bdcd;
color: white;
		-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;
}


.right_column  h1{
font-size: 40px;
padding: 15px 10px;
}


.right_column {
    padding: 10px 0px 15px 0px;
    float: left;
width: 80%;
}

.right_column.event_content {
border-top:  1px solid #d3d3d3;
}


		#all_menu_items{ display:block;}



	.full_size_image { margin-top:-55px; width: calc(100% - 270px); } 





/********************************* RESPONSIVE STYLING ********************************/


	/* 1784px  */
	/************************************************/
	@media only screen and (max-width: 1784px) {
		.igem_content_wrapper { width:85%;}
		.full_size_image {  width:85%;}


	}




	/* IF THE SCREEN IS LESS THAN 1400PX */
	@media only screen and (max-width: 1400px) {
		.long_menu_name { font-size: 10px;}
	}








	/* IF THE SCREEN IS LESS THAN 1200PX */

	@media only screen and (max-width: 1200px) {

		#content {width:100%; }
		.igem_menu_wrapper {width:15%; right:0%;}
		.highlight {padding:10px 0px;}
		.load_menu_here, .menu_icon {display:none;}
		ul.image_slider {  padding:0px; width: 100%;  margin: auto;}
		.menu_item, .submenu_item, .sub_submenu_item,  .menu_title { padding:9px 0px 7px 6%; font-size: 10px;}
		.menu_item.hub_link, .submenu_item.with_submenu_items { width: 73.9%;}
 		.submenu > .submenu_access { font-size: 10px; padding: 8px 0px; }
		.submenu_access{  font-size: 10px;  padding: 10px 0px;}
		#all_menu_items{ display:block;}
		.full_size_image { margin-top:-55px; width:85%;}
	}


	/* IF THE SCREEN IS LESS THAN 885PX */

	@media only screen and (max-width: 885px) {

		.collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
		.load_menu_here, .menu_bottom_padding {display:none;}
 		.igem_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
		.igem_content_wrapper {width:100%; margin-left:0px;}
		.column.half_size, .column.third_size, .column.fourth_size {width:100%; }
		.column img { width: 100%; padding: 5px 0px;}
		.highlight {padding:15px 5px;}
		.igem_menu_wrapper img { width: 30%;  margin-left: 35%;}
		.menu_item, .submenu_item, .sub_submenu_item,  .menu_title, .long_menu_name {  padding:10px 0px 10px 10%; font-size: 13px; }
		.submenu > .submenu_access { font-size: 13px; padding: 10px 0px;}
		.submenu_access{ font-size: 13px; padding: 12px 0px; }
		.submenu_item {  padding-left: 15%;}
		.sub_submenu_item { padding-left: 20%;}
		.menu_item {width:70%;}
		.submenu_item.with_submenu_items  {width: 65%;}		
		.menu_item.hub_link { width:50%;}
		#all_menu_items {display:none;}
		.full_size_image { margin-top: -30px; width:100%;}
	}

</style>




<!--- THIS IS WHERE THE HTML BEGINS --->


<!-- This tells the browser that your page is responsive -->

<head> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 


</head>





<div class="igem_menu_wrapper" >


	<div>
		 <a href="https://2017.igem.org/Main_Page"> 
			<div class="logo_container">
				<img src="https://static.igem.org/mediawiki/2017/0/09/2017igem_demo_icon-13-22.svg"></a>
			</div>
		</a>
		<div class="submenu_access less" id="main_menu_control"></div>
	</div>

	<div class="collapsable_menu_control"> MENU  </div>

	<div id="all_menu_items">
		<div id="load_menu_here">

			<div class="menu_is_loading"> 
		
				<div class="menu_title"> <b> Loading... </b></div>

			</div>

		</div>
	</div>
</div>





<div class="igem_content_wrapper">

	<div class=" igem_column_wrapper">

</html>