Team:KU Leuven/Template:Style

<html> 
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iGem</title>
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Bootstrap?action=raw&ctype=text/css" type="text/css" />
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Bootstrapresponsive?action=raw&ctype=text/css" type="text/css" />
    <link href="http://www.designingtest.org/iGem/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://www.designingtest.org/iGem/style.css" rel="stylesheet">
    <link href="http://www.designingtest.org/iGem/timeline.css" rel="stylesheet">
	<link href="http://www.designingtest.org/iGem/bjqs.css"rel="Stylesheet"/>
    
    <!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
	<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  	
	<script src="http://www.designingtest.org/iGem/raphael-min.js"></script>
	<script src="http://www.designingtest.org/iGem/livicons-1.2.min.js"></script>
	<script src="http://www.designingtest.org/iGem/bjqs.min.js"></script>
	
	<!--[if lt IE 8]>
		<script src="http://www.designingtest.org/iGem/json2.min.js"></script>
	<![endif]-->
  	
  	<script>
		var ww = document.body.clientWidth;
		
		$(document).ready(function() {
			 $('#banner-fade').bjqs({
		        'height' : 200,
		        'width' : 340,
		        'responsive' : true,
		        'showcontrols' : false,
		        'showmarkers' : false,
		        'usecaptions' : false,
		        'animspeed' : 6000
		    });
		    
		    $('.secret').click(function(event){
event.preventDefault();
			   $('#secret').toggle('slow');
		    });
			
			$(".nav li a").each(function() {
				if ($(this).next().length > 0) {
					$(this).addClass("parent");
				};
			})
			
			$(".toggleMenu").click(function(e) {
				e.preventDefault();
				$(this).toggleClass("active");
				$(".nav").toggle();
			});
			adjustMenu();
		})
		
		$(window).bind('resize orientationchange', function() {
			ww = document.body.clientWidth;
			adjustMenu();
		});
		
		var adjustMenu = function() {
			if (ww < 768) {
				$(".toggleMenu").css("display", "inline-block");
				if (!$(".toggleMenu").hasClass("active")) {
					$(".nav").hide();
				} else {
					$(".nav").show();
				}
				$(".nav li").unbind('mouseenter mouseleave');
				$(".nav li a.parent").unbind('click').bind('click', function(e) {
					// must be attached to anchor element to prevent bubbling
					e.preventDefault();
					$(this).parent("li").toggleClass("hover");
				});
			} 
			else if (ww >= 768) {
				$(".toggleMenu").css("display", "none");
				$(".nav").show();
				$(".nav li").removeClass("hover");
				$(".nav li a").unbind('click');
				$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
				 	// must be attached to li so that mouseleave is not triggered when hover over submenu
				 	$(this).toggleClass('hover');
				});
			}
		}
  	</script>

    <script type="text/javascript">
		  WebFontConfig = {
		    google: { families: [ 'PT+Sans::latin' ] }
		  };
		  (function() {
		    var wf = document.createElement('script');
		    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
		    wf.type = 'text/javascript';
		    wf.async = 'true';
		    var s = document.getElementsByTagName('script')[0];
		    s.parentNode.insertBefore(wf, s);
		  })(); 
	</script>
	
  </head>

</html>