2014hs.igem.org/Team:RAMNOTIREN CALGARY/Team

<html>
<head>
	<link rel='stylesheet' type='text/css' href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Stylesheets/indexcss.css?action=raw&ctype=text/css"/>
	
	<style>
		h1{
			font-size: 2.5em;
		}

		h2{
			font-size: 25.5px;
		}

		p {
			text-indent:50px;
		}

		#box1{
			width: 968px;
			margin-top: 8px;
			background: #E6E6E6; /*threedface*/
			float: left;
			padding-bottom: 20px;
			margin-bottom: 13px;
		}

		#box1 h2{
			padding: 0px 0px 0px 0px;
			text-align: center;
			font-family: arial, verdana, "lucida sans";
		}

		#box1 p{
			padding: 0px 50px 0px 350px;
			font-family: arial, verdana, "lucida sans";
			font-size: 15px;
		}

		#content { 
			z-index: 1; 
			background-color: transparent; 
			border: none; 
			padding-bottom: 0; 
			margin: 0; 
			width: 100%; 
			overflow: hidden; 
			margin-top: -45px !important;
			height:auto !important; /* real browsers */
			height:100%; /* IE6: treaded as min-height*/
			min-height:100%; /* real browsers */
		}

		#top-section { 
			z-index: 2; 
			height: 15px; 
			margin: 0px; 
			margin-left: auto; 
			margin-right: auto; 
			margin-bottom: 0 !important; 
			padding:0; 
			border: none; 
			font-size: 10px;
		}

		#p-logo { 
			height:1px; 
			overflow:hidden; 
			display: none;
		}

		#search-controls { 
			overflow:hidden; 
			display:block; 
			background: none; 
			position: absolute; 
			top: 100px; 
			right: 40px;
		}
		
		.left-menu { 
			width: 500px !important; 
			display:block; 
			margin-top:-80px; 
			border: none; 
			text-align: right;
		}

		.left-menu ul { 
			border: none; 
		}

		#menubar.right-menu { 
			width:300px; 
			display:block; 
			float:left; 
			margin-top:-80px; 
			border: none;
		}

		.right-menu ul { 
			border: none; 
			width: 300px;
		}

		#footer-box { 
			background-color: #216085; 
			border: none; 
			width: 850px; 
			height: 30px; 
			margin: -10px auto 0 auto; 
			padding: 20px 0;
		}

		.visualClear { 
			display: none; 
		}

		#footer { 
			border: none; 
			width: 850px; 
			margin: 0 auto; 
			padding: 0;
		}

		.firstHeading { 
			display: block;
		}

		#f-list a { 
			color: #333; 
			font-size: 10px;
		}

		#f-list a:hover { 
			color: #666;
		}

		.printfooter { 
			display: none; 
		}

		#footer ul { 
			margin: 0; 
			padding: 0;
		}

		#footer ul li { 
			margin-top: 0; 
			margin-bottom: 0; 
			margin-left: 10px; 
			margin-right: 10px; 
			padding: 0;
		}

		#search-controls { 
			display:none; 
		}

		h3#siteSub { 
			display: none;
		}

		#contentSub {
			display: none;
		}

		p:first-child { 
			display: block;
		}

		h1{
			border:none; 
			width: 100%; 
			clear: both;
		}

		.progress{
			display: none;
		}

		.plus {  
        display: inline-block;  
        -webkit-transition: 1s ease-in-out;  
        -moz-transition: 1s ease-in-out;  
        -o-transition: 1s ease-in-out;  
    	}  
      
    	.menu:hover .plus {  
        -webkit-transform: rotate(1000deg);  
        -moz-transform: rotate(1000deg);  
        -o-transform: rotate(1000deg);  
    	}  

    	#teamcon {
		  width:860px;
		  position:absolute;
		  left: 205px;
		  top: 393px;  /*390 is thte ideal top value for teamcon and teambox*/
		  z-index:0;}
		 #teampic {
		  width:600px;
		  position:absolute;
		  z-index:1;}
		 #teambox {
		  width:260px;
		  height:440px;
		  position:absolute;
		  left:790px;
		  top:393px;
		  background-color:#555555;
		  color:#ffffff;
		  z-index:0;}
		 #teamnam {
		  width:220px;
		  position:relative;
		  left:20px;
		  top:40px;
		  font-weight:bold;
		  z-index:0;}
		 #teamful {
		  width:220px;
		  position:relative;
		  left:20px;
		  top:60px;
		  z-index:0;}
		 #teamdes {
		  width:220px;
		  position:relative;
		  left:20px;
		  top: 20px;
		  font-size:2em;
		  z-index:0;}
		 #face1 {
		  width:44px;
		  height:59px;
		  position:absolute;
		  left:177px;
		  top:106px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face2 {
		  width:34px;
		  height:57px;
		  position:absolute;
		  left:121px;
		  top:97px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face3 {
		  width:38px;
		  height:53px;
		  position:absolute;
		  left:254px;
		  top:78px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face4 {
		  width:42px;
		  height:53px;
		  position:absolute;
		  left:331px;
		  top:111px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face5 {
		  width:37px;
		  height:52px;
		  position:absolute;
		  left:415px;
		  top:109px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face6 {
		  width:40px;
		  height:48px;
		  position:absolute;
		  left:489px;
		  top:101px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face7 {
		  width:46px;
		  height:56px;
		  position:absolute;
		  left:59px;
		  top:153px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face8 {
		  width:50px;
		  height:57px;
		  position:absolute;
		  left:160px;
		  top:217px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face9 {
		  width:32px;
		  height:43px;
		  position:absolute;
		  left:267px;
		  top:226px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face10 {
		  width:31px;
		  height:47px;
		  position:absolute;
		  left:347px;
		  top:220px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');}
		 #face11 {
		  width:47px;
		  height:51px;
		  position:absolute;
		  left:421px;
		  top:226px;
		  z-index:2;
		  background-image:url('https://static.igem.org/mediawiki/2010/b/b7/ICblank.png');} 

		#description1{
			position: absolute;
			width: 805px;
			left: 205px;
			top: 844px;
			background: #E6E6E6; /*threedface*/
			/*float: right;*/
			padding-bottom: 20px;
			margin-bottom: 13px;
			padding-left: 20px;
			padding-right: 20px;
		}

	</style>

<script type="text/javascript" src ="https://2014hs.igem.org/common/jquery-latest.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    function slider() {
        var $current = $('#slides IMG.current');

        if ( $current.length == 0 ) $current = $('#slides IMG:last');
        var $next =  $current.next().length ? $current.next()
            : $('#slides IMG:first');

          $current.addClass('previous');
        $next.css({opacity: 0.0})
            .addClass('current')
            .animate({opacity: 1.0}, 2500, function() {
                $current.removeClass('current previous');
    });

     var $navicurrent = $('.progress li.current');
     if($navicurrent.length ==0) $navicurrent = $('.progress li:last');
     var $navinext = $navicurrent.next().length ? $navicurrent.next() : $('.progress li:first');
     $navicurrent.addClass('previous');
     $navicurrent.removeClass('current previous');
     $navinext.addClass('current').animate({opacity: 1.0}, 2500, function() {
            });

     $('.progress li').click(function(){
        
        var $ncurrent = $(this);
            $('.progress li').removeClass('current').removeClass('previous');
            $('#slides IMG').removeClass('current').removeClass('previous'); 
            $ncurrent.addClass('current');
            var ncurrentindex = $ncurrent.index();
        if(  ncurrentindex=== 0) $current = $('#slides IMG:first');
            if(  ncurrentindex=== 1) $current = $('#slides IMG:eq(1)');
            if(  ncurrentindex=== 2) $current = $('#slides IMG:eq(2)');
            if(  ncurrentindex=== 3) $current = $('#slides IMG:last');
            $current.addClass('current');

    });

    }

    $(function() {
        setInterval( "slider()", 5000 );
    });
 
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

<script type="text/javascript">
 
</head>
<body>
	<div id="globalWrapper"/>

    <div id="main-content"/> 

    <div id="topmenubar" class="topleft-menu"/>
    	<ul>
    		<li><a href="https://igem.org/Team_List?year=2014&division=high_school" style='color:#014457; cursor:pointer' target="blank">teams</a></li>
    		<li class='selected'><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY">Page</a></li>
			<li class='new'><a href="https://2014hs.igem.org/wiki/index.php?title=Talk:Team:RAMNOTIREN_CALGARY&action=edit&redlink=1">Discussion</a></li>
		    <li><a href="https://2014hs.igem.org/wiki/index.php?title=2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Team&action=edit">View Source</a></li>
		    <li><a href="https://2014hs.igem.org/wiki/index.php?title=Team:RAMNOTIREN_CALGARY&action=history">History</a></li>
		    <li><a href="https://igem.org/Login">Log in</a></li>
 	 	</ul>
 	</div>

	<header>
		<div id="slides">
		    <img  src="https://static.igem.org/mediawiki/2014hs/9/96/Banner1.jpg" width="968" height="272" alt="" class="current" />
		    <img  src="https://static.igem.org/mediawiki/2014hs/0/00/Dnabg.jpg" width="968" height="272" alt="" />
		    <img  src="https://static.igem.org/mediawiki/2014hs/9/96/Banner1.jpg" width="968" height="272" alt="" />
		    <img  src="https://static.igem.org/mediawiki/2014hs/0/00/Dnabg.jpg" width="968" height="272" alt="" />
		</div>
		<ul class="progress">
		    <li class="current"><a href="#n_0">1</a> </li>
		    <li><a href="#n_1">2</a> </li>
		    <li><a href="#n_2">3</a> </li>
		    <li><a href="#n_3">4</a> </li>
		</ul> 

		<div>
			<ul id="menu">

				<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY" id="homelink">Home</a></li>

				<li><a href="2014hs.igem.org/Team:RAMNOTIREN_CALGARY‎/Team" id="teamlink">Team</a>
					<ul>
						<li><a href="2014hs.igem.org/Team:RAMNOTIREN_CALGARY‎/Team">Members</a></li>
						<li><a href="https://igem.org/Team.cgi">Official Profile</a></li>
						<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/AboutCMHS">About CMHS</a></li>
					</ul>
				</li>

				<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Project" id="projectlink">Project </a>
					<ul>
						<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Project/Content">Content</a></li>
						<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/HumanPractices">Human Practices</a></li>
						<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/References">References</a></li>
						<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Attributions">Attributions</a></li>
					</ul>
				</li>

				<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Parts" id="partslink">Parts</a></li>

				<li><a class="drop" href="http://https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Notebook" id="notebooklink">Notebook</a>
					<ul>
						<li><a href="http://https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Notebook">Journal</a></li>
					</ul>
				</li>

				<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Sponsors" id="sponsorslink">Sponsors</a></li>

				<li><a href="https://2014hs.igem.org" target="_blank">iGEM</a></li>										
			</ul>
		</div>
	</header>

	<div id="sidebar">
	    <div style="margin-left: 2em">
	        <div id="list">
	            <ul>
	                <li> <a href="#top">Top</a></li>
                    <li> <a href="#JE1">jQuery (animated)</a></li>	                    
	                <li> <a href="#JE2">CSS (fixed)</a></li>	                    
	                <li> <a href="#JE3">CSS (reveal)</a></li>	                    
	                <li> <a href="#JE4">TEST</a></li>	                    
	                <li> <a href="#JE5">TEXT</a></li>	                    
	            </ul>
	        </div>
	    </div>
	</div>


	<div id="teamcon">
	  <img id="teampic" src="https://static.igem.org/mediawiki/2014hs/d/d9/Group2.JPG" width="600" height="440 alt="
	  group="" />
		  <div id="face1"></div>
		  <div id="face2"></div>
		  <div id="face3"></div>
		  <div id="face4"></div>
		  <div id="face5"></div>
		  <div id="face6"></div>
		  <div id="face7"></div>
		  <div id="face8"></div>
		  <div id="face9"></div>
		  <div id="face10"></div>
		  <div id="face11"></div>
	</div>

	<div id="teambox">
	  <div id="teamdes">
	    Description
	  </div>
	  <div id="teamnam">
	    Mouse over our faces to find out more...
	  </div>
	  <div id="teamful"></div>
	</div>
<!--
	<div id="description1"></div>
-->
<body>

</body>
</html>