View source for Template:2015Top

<html>
	<!-- The styling for the website is placed here -->

		
	<!-- start of css -->
	<style type="text/css">
		
		/* Clear the default wiki settings */
			
		/* Remove footer, catlinks and logos */
		#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
			display: none;
		}
			

		/* set up a dark background #58585b*/
		body { 
  			background-color: #58585b;
		}

		/*-- Make page full width and remove borders */
		#globalWrapper, #content { 
			width: 100%; 
			height: 100%;
			border: 0px;
			background-color: transparent;
			margin: 0px;
			padding: 0px;
		}
	
		/*Clear wiki default settings for the top part and create mock "black navigation bar" */
		#top-section { 
			background-color: #000000;
			border: 0 none;
			height: 14px;
			z-index: 100;
			top: 0;
			position: fixed;
			width: 100%; 
			margin:auto;
		}

	/*left align BMB */
		#top_menu_inside { 
			margin-left: 20px; 
		}



	/* General wrap for the pages*/
		#contentWrap, #contentWrap_MainPage {  
			width: 980px;
			height: auto;
			margin-left: 20px;
			float:left;
			margin-right: auto; 
			background-color: #ffffff;	
			margin-top: -10px;
		}



	/* MAIN PAGE*/

	/*General Layout */
	/*Main page left column, content will be placed here */
		#leftColumn_MainPage {
			width: 780px;
			float: left;
			padding: 12px 10px 0px 10px;
			margin-top: 0px;
		}

	/*Main page right column, the on page menu will be placed here */
		#rightColumn_MainPage {
			background-color: #f2f2f2; 
			width: 180px;
			float: left;
height:2150px;
			padding-top:5px;
		}


	/*Left Container (content) elements */

	/*Container for the main page banner, this will define the height before the image loads */
		#banner_leftColumn_MainPage {
			height:100px;
		}

	/*Class for creating a block 1/3 of the size of the left_Column in the Main page, */
		.block_leftColumn_MainPage{
    			padding: 5px 10px 10px 10px;
    			margin-bottom: 5px;
    			float: left;
    			width:215px;
    			margin-right:10px; 
    			margin-left:5px;
    			background-color: #fff;
		}

	/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
		.newsItem {
			border: 1px solid #cccccc;
			margin: 0px 5px 5px 5px;
			padding: 5px 15px 5px 15px;
			border-radius: 5px;
		}

	/*main page news RSS icon*/
    		#rss_icon { 
    			height: 25px;
    			vertical-align: text-bottom;
    		 }

	/*Style the images inside a news post */
		.newsItem img{
			float:right; 
			display:block;
		}

	/*Style the date inside a news post */
		.newsDate {
			font-style: italic; 
			display: inline-block; 
			color: #383838; 
			float: right; 
			padding-top: 5px;
			padding-right: 15px;
		}



	/*Right Container (menu) elements */

	/*Style the background for menu items*/
		.menu-header {
			background-color: #d3d3d3;
			margin-bottom: 2px;
			padding-left: 11px;
			padding-top:7px;
			padding-bottom:7px;
			color: #6D6E70;
		}

		#rightColumn_MainPage a{
			text-decoration: none;
			color: #565656;
		}

	/*Styling for the the list item */
		#rightColumn_MainPage ul {
		margin-top: -5px;
		}

	/*Styling for the the list item */
		#rightColumn_MainPage ul li{
			padding-left: 10px;
			margin-left: -19px;
			padding-top:2px;
			padding-bottom: 2px;
			margin-bottom: -1px;

			border: 1px solid #ccc;
			border-right: 0px solid white;
			border-left: 0px solid white;

			height:20px;
			font-weight: bold;
			list-style: none;

			/*animate transition */
			-webkit-transition: background 0.2s linear;
			-moz-transition: background 0.2s linear;
			-ms-transition: background 0.2s linear;
			-o-transition: background 0.2s linear;
			transition: background 0.2s linear;
		}

	/*For the list item, changes the color on hover.*/
		#rightColumn_MainPage ul li:hover{
			background-color:#c1dfa6;
		}



	/*CONTENT PAGES */

	/*Top part of the pages */
	/*Container for the iGEM logo, top left corner*/
    		#igemLogo {
    		    	width: 190px;
    		    	float:left; 
    		    	text-align:center;
    		    	display:block; 
    		    	margin-top:10px;
    		    	height:80px;
    		 }

	/*For images inside the igem logo container, changes opacity on hover */
    		#igemLogo a:hover {
    			opacity: 0.4;
    			filter: alpha(opacity=40); /* For IE8 and earlier */
    		 }


	/*Container for the page title, first heading will be added here with jquery*/
    		 #pageTitle {
    		    	width: 730px;
    		    	float: left;
    		    	padding: 5px 10px 0px 10px;
    		    	height:80px;
    		    	margin-top:10px;
    		  }
    		    	
	/*Inside the pageTitle container, styles the h1 that contains the first heading */
		#pageTitle h1{
			font-size: 25px;
			color:black;
		}

	/*Gray lines that dives the top of the page and clears */
    		  #grayLine_Clear {
    		    	width: 960px; 
    		    	height: 1px; 
    		    	background-color: #ccc; 
    		    	margin:auto;
			clear:both;
    		   }


	/*Middle/Content part of the pages */

	/*For pages with NO submenu, creates the full width container*/
		#fullWidth {
			background-color: #ffffff;
			margin-bottom: 5px;
			padding: 5px 20px 5px 20px;
		}


	/* For pages with submenus, creates the right column of the page*/
		#rightColumn {
			width: 770px;
			float: left;
			padding: 25px 15px 5px 15px;
		}



	/*For pages with submenus, creates the left column of the page, here the submenu can be placed*/
		#leftColumn {
			width: 160px;
			float: left;
			padding: 25px 10px 5px 10px;
			margin-top: 0px;
		}

	/* For submenus on the left of the page, style the links*/
		#leftColumn a {
			text-weight: bold;
			text-decoration: none;
			font-family: "Arial", Helvetica, sans-serif; 
			font-size: 13px;
			color: #434343;
		}

		#leftColumn ul ul li, #leftColumn ul li  {
			padding-left: 10px;
			margin-left: -19px;
			padding-top:4px;
			padding-bottom: 4px;
			margin-bottom: -1px;

			border: 1px solid #ccc;
			border-right: 0px solid white;
			border-left: 0px solid white;
			list-style: none;

			/*animate transition */
			-webkit-transition: background 0.2s linear;
			-moz-transition: background 0.2s linear;
			-ms-transition: background 0.2s linear;
			-o-transition: background 0.2s linear;
			transition: background 0.2s linear;

		}

	/*For left submenu items, change the background color on hover*/
		#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
			background-color: #c1dfa6;
		}




	/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */

	 /* Styling links - links are different in menu divs */
		 #rightColumn a, #fullWidth a, #leftColumn_MainPage a {
			color:#3aa76c;
			font-weight: bold;
			text-decoration: none;
		}

	 /* Styling links on hover- links are different in menu divs */
		#rightColumn a:hover, #fullWidth a:hover, #leftColumn_MainPage a:hover {
    			color: #b5dec7;
		}

	 /* styling for all the headers in all the pages */
		#contentWrap h1, h2, h3, h4, h5 { 
			font-family: "Arial", Gadget, sans-serif; border-bottom:none;
			font-weight: bold;
			color: #434343;
		}

	/* Establish font size and family for all text */
		#contentWrap p {
			font-family: "Arial", Helvetica, sans-serif; 
			font-size: 13px;
		}
	/* Styling for all the lists */
		#contentWrap ul {
			list-style:circle;
			font-family: "Arial", Helvetica, sans-serif; 
		}

	/*Styling for all the images */
		 #contentWrap img {
			padding: 5px 5px 5px 5px;
		}


	/*Styling for all the tables */
    	    	#contentWrap table {
			border: 1px solid #ccc;
			border-collapse: collapse;
			width: 90%
			margin: auto;
			margin-bottom: 15px;
			margin-top: 15px;
			margin-right: 10px;
			margin-left: 10px;
		}

	/*Styling cells inside all of the tables */
		#contentWrap  td {
			padding: 10px;
			border: 1px solid #ccc;
			border-collapse: collapse;
			vertical-align: text-top;
		}

	/*Styling table headers for all the tables */
		#contentWrap th {
			background-color: #464646;
			padding: 10px;
			color: #f2f2f2;
			border: 1px solid #ccc;
			border-collapse: collapse;
			vertical-align: text-top;
		}


	/*CLASSES */

	/*Clear class for all the pages, adds vertical spacing too*/
    		.clear {
    		    	clear: both;
    		    	height: 20px;
    		}
    
    /*Clear class without additional vertical spacing*/
    		.clear-noheight {
    			clear: both;
    		}

	/*Buttons for all of the pages */
    	    	.button {
    	    	    	width: 130px;
    			border: 2px solid #3aa76c;
    			background-color: fff;
    			height: 30px;
    			text-align: center;
        		border-radius: 5px;
        		padding: 10px 5px 0px 5px;
        		margin: auto;
			/*animate transition */
			-webkit-transition: background 0.2s linear;
			-moz-transition: background 0.2s linear;
			-ms-transition: background 0.2s linear;
			-o-transition: background 0.2s linear;
			transition: background 0.2s linear;
    		}        

	/*For the button class, change background on hover */
    	    	.button:hover {
    			background-color: #3aa76c;
    			color: white;
    		}



       	/* Class for making images with links react on hover */
    		img.imageHover:hover {
    			opacity: 0.4;
    			filter: alpha(opacity=40); /* For IE8 and earlier */
    		}


	/*Class for text that needs to be highlighted, used in span tag */
    		.highlightText {
    			color:red; 
    			font-size:110%;
    			font-weight:bold;
    		}


	/* Styling for block quotes */
		#contentWrap blockquote {
			font-style: italic;
		}

	/*Alert message for important messages */
    		  .alertMessage {
    		    	width:700px; 
    		    	margin:auto; 
    		    	text-align:center;
    		    	background-color:pink; 
    		    	border-radius:5px;
    		    	border: 1px solid #ccc;
			margin-bottom: 15px;
			margin-top: 15px;
    		   }

	/*For the alert message class, styling of the text*/
    		   .alertMessage p, #alertMessage p {
    		    	font-weight: bold;
    		    	color:red;
    		   }


	/*Styling for calendar events, used in the calendar of events page */
		.calendarEvent {
			float:left;
			width: 735px;
			margin-bottom: 15px;
			padding-right: 10px;
		}

	/*Styling for calendar dates, used in the calendar of events page */
		.calendarDate, .calendarDate_Feb, .calendarDate_Mar, .calendarDate_Apr,.calendarDate_May, .calendarDate_Jun, .calendarDate_Jul, .calendarDate_Aug, .calendarDate_Sep {
			float:left;
			width: 170px;
			background-color: #f2f2f2;
			font-weight: bold;
			margin-right: 15px;
			padding-left: 10px;
			margin-bottom: 15px;		
		}

		/*color per month */
		.calendarDate_Feb {background-color:#f1f7d5;}
		.calendarDate_Mar {background-color:#f1dfed;}
		.calendarDate_Apr {background-color: #bbe8e6;}
		.calendarDate_May {background-color:#b7e2f2;}
		.calendarDate_Jun {background-color:#d2e7bc;}
		.calendarDate_Jul {background-color:#e5c9e0;}
		.calendarDate_Aug { background-color: #a4cdeb;}
		.calendarDate_Sep {background-color: #fbcfac;}


	/* highlight box for special messages , red border*/
		.highlightBoxA {
			border: 2px solid #ee4258; 
			background-color: #f2f2f2; 
			padding: 10px;
			width: 40%; 
			float: right; 
			border-radius:5px;
		}

	/* highlight box for special messages, no border size is bigger */
		.highlightBoxB {
			background-color: #f2f2f2; 
			padding: 10px;
			width: 80%; 
			margin:auto;
			margin-top:10px;
			margin-bottom:10px;
			border-radius:5px;
			border: 1px solid #ccc; 
		}


	/*For the highlight box class, styles the title header to be centered */
		.highlightBoxA h4, .highlightBoxB h4{
			text-align:center;
		}

	/*Two-column inline divs -- should be further styled by the user*/
		div.twoColumnInline {
			display: inline-block;
			vertical-align: top;
			width: 50%;
			padding: 5px;
			border: 1px solid #ccc;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

	/*Container that centers images inside - declare as a div */
		.centerImages {
			text-align:center;
			margin:auto;
		}



    	/* Styling for pop up boxes */
	/* This is temporary fix, helps display the icon on the same line */
    		    .textBeforeWhy {
    		    	float:left;
    		    }

	/*Makes a round div that will call the pop up box*/
    		    .pop_why {
    		    	border: 1px solid #f58631;
    		    	color: #f58631;
    		    	font-weight: bold;
    		    	text-align: center;
    		    	border-radius: 50%;
    		    	float: none;
    		    	margin-right: 5px;
    		    	margin-left: 5px;
    		    	padding-left: 4px;
    		    	padding-top: 3px;
    		    	padding-right: 4px;
    		    }


	/*For the pop why class, changes the color on hover */
    		    .pop_why:hover {
    		    	color: #fff;
    		    	background-color:#f58631;
    		    	font-weight: normal;
    		    }

	/*When the pop why class is hovered, creates a div to display the content for the why pop up box */
    		    .pop_why_div {
    		    	position:fixed;
    		    	margin: auto;
    		    	left:100px;
    		    	top: 100px;
    		    	width:550px;
    		    	color:black;
    		    	background-color: white;
    		    	border: 2px solid #f58631;
    		    	border-radius: 5px;
    		    	padding: 10px 10px 10px 10px;
    		    	text-align:left;
    		    	-webkit-box-shadow: -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
    		    	-moz-box-shadow:    -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
    		    	box-shadow:         -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
    		    }


	/*Class for creating a block 1/4 of the size page */
		.block_quarter{
    			padding: 5px 10px 10px 10px;
    			margin-bottom: 5px;
    			float: left;
    			width:200px;
    			margin-right:10px; 
    			margin-left:5px;
    			background-color: #fff;
		}


	</style>


<script type="text/javascript">
	$(document).ready(function() {


	// Places first heading on top part of the page, inside a h1(#placeHeading) in #pageTitle
		$('.firstHeading').prependTo('#placeHeading');

	// Attaches a hover script to every item with the class 'pop_why'
		$('.pop_why').hover(
        		function() {
               		        // Does the pop_why need to be installed?
                		if ( ! $(this).children('.pop_why_div').length ) {
                        		$(this).append("<DIV class='pop_why_div' style='display:block'>Loading...</div>");
                       		        $(this).find('.pop_why_div').load( $(this).attr("data-poptitle") + '?action=raw' );
                		}
                		var foo = $(this).find('.pop_why_div').show();
        		} ,
	        	function() {
                		$(this).find('.pop_why_div').clearQueue();
         				$(this).find('.pop_why_div').hide();
                				$(this).find('.pop_why_div').clearQueue();
                				$(this).find('.pop_why_div').hide();
			}
        	);

	});
</script>



<div id="contentWrap"> 

			<div id="igemLogo" >			
				<a href="https://2015.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2015/e/e4/IGEM_2015logo.jpg" height="70px">  </a>	
			</div>
		
			<div id="pageTitle"> 
				<h1 id="placeHeading"> </h1>
			</div>

			<div id="grayLine_Clear"></div>
</html>