View source for Team:Central Calgary/wiki2.0

<html lang="ja">
<!doctype html> 

	<head>
		<meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                                               
		<title>Central Memorial iGEM</title>

   	<link href="http://fonts.googleapis.com/css?family=Ubuntu:bold" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">

    	<link href="https://2015.igem.org/Team:Central_Calgary/header-footer?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
    	<link href="https://2015.igem.org/Team:Central_Calgary/main-content?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
        <link href="https://2015.igem.org/Team:Central_Calgary/teampage?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
        <link href="https://2015.igem.org/Team:Central_Calgary/loader?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
	
        </head> 

<body>  	

<!--<div id="loader-wrapper">
            <div id="loader"></div>
            <div id="loader1"></div>
         
            <div class="loader-section section-top"></div>
            <div class="loader-section section-bot"></div>
        </div>-->

     	<div id="header">
            <div id="logoDiv"><img id="logo" src ="https://static.igem.org/mediawiki/2015/8/86/CentralLogo.png" alt="logo"></div>
            <div id="homeText"><h10> Central iGEM </h10></div>
			<div id="headerLeft"></div>
             <ul id="headerMenu">
                 <li class="headerMenuItem"><a class="menuItem" id="bPractices" href="#" data-target="practices1" align="middle">Practices</a></li>
                 <li class="headerMenuItem"><a class="menuItem" id="bPolicy"    href="#" data-target="policy1"    align="middle">Policy</a></li>
                 <li class="headerMenuItem"><a class="menuItem" id="bLogbook"   href="#" data-target="logbook1"   align="middle">Logbook</a></li>
        	 <li class="headerMenuItem"><a class="menuItem" id="bEthics"    href="#" data-target="ethics1"    align="middle">Ethics</a></li>
                 <li class="headerMenuItem"><a class="menuItem" id="bSafety"    href="#" data-target="safety1"    align="middle">Safety</a></li>
        	 <li class="headerMenuItem"><a class="menuItem" id="bProject"   href="#" data-target="project1"   align="middle">Project</a></li>
       		 <li class="headerMenuItem"><a class="menuItem" id="bTeam"      href="#" data-target="team1"      align="middle">The Team</a></li>
                 <li class="headerMenuItem"><a class="menuItem" id="bHome"      href="#" data-target="home1"       align="middle">Home</a></li>

			</ul> 
        	        
        </div>  
         
        <div id="contentBg" style="width:110vw; height:100vh;"></div>

        <div id="content">

        	<div id="home1" class="panel"> <h1>Home Page</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
</p></div>


            <div id="team1" class="panel"> <h1>Team Page Main</h1> 
            
                <div style="position:relative; top:100px; left:100px;">
				  <div class="bJP rad"></div>
  				  <div class="bJP line"></div>
  				  <div class="bJP box"><img src="https://static.igem.org/mediawiki/2015/7/76/CentralCalgaryJaredPortrait.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Jared </h2> <p class="bioPara">Jared was once a no life, that is, until he joined IGEM -- of which then, he became a no life that does science. If he isn't in the lab, then in all likelihood, he would be attempting to learn idioms, reading papers, doing math, memorizing the quadratic formula, and eating cake.</p></div>
				</div>
            
                <div style="position:relative; top:100px; left:200px;">
				  <div class="bFR rad"></div>
  				  <div class="bFR line"></div>
  				  <div class="bFR box"><img src="https://static.igem.org/mediawiki/2015/3/38/CentralCalgaryJessica.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Jessica </h2> <p class="bioPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.

Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
				</div>	    
                        
                <div style="position:relative; top:100px; left:300px;">
				  <div class="bAG rad"></div>
  				  <div class="bAG line"></div>
  				  <div class="bAG box"><img src="https://static.igem.org/mediawiki/2015/b/b0/CentralCalgaryFrancis.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Francis </h2> <p class="bioPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.

Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
				</div>
                
                <div style="position:relative; top:100px; left:400px;">
				  <div class="bZC rad"></div>
  				  <div class="bZC line"></div>
  				  <div class="bZC box"><img src="https://static.igem.org/mediawiki/2015/d/d8/CentralCalgaryNatalie.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Natalie </h2> <p class="bioPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.

Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
				</div>
              
              <div style="position:relative; top:100px; left:500px;">
				  <div class="bVT rad"></div>
  				  <div class="bVT line"></div>
  				  <div class="bVT box"><img src="https://static.igem.org/mediawiki/2015/2/21/CentralCalgaryDanielle.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Danielle </h2> <p class="bioPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.

Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
				</div>
                <div style="position:relative; top:100px; left:600px;">
				  <div class="bNA rad"></div>
  				  <div class="bNA line"></div>
  				  <div class="bNA box"><img src="https://static.igem.org/mediawiki/2015/d/d3/CentralCalgaryAlexia.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Alexia </h2> <p class="bioPara">Alexia Gendron is a simple 12th grader who spends her spare time perfecting recipes and playing piano. She enjoys reading, volunteering, good soup, Italian, and having insightful conversations. Although born in Calgary, Alberta, she was brought up in French, and attended a francophone school until her 10th grade. This has given her exposure to French-Canadian culture and taught her where to find it even if she finds herself a few provinces away from its origin. For five years she took karate and developed quite a fondness for martial arts. Despite having had to stop karate this year, she plans on starting to practice judo as soon as possible. After discovering Ronda Rousey, she found the very first person ever to move her so strongly, and she considers Rousey to be an inspiration. Right now, Alexia is focusing on the present, and is trying to enjoy her final year of high school before she graduates. Although she plans on attending university next year, she has yet to figure out exactly what she wants to study. She has always loved to learn all there is to learn and do all there is to do; she hopes to travel the world someday, meet fantastical people, and have a great collection of jaw-dropping stories to tell.</p></div>
				</div>
                <div style="position:relative; top:100px; left:700px;">
				  <div class="bNB rad"></div>
  				  <div class="bNB line"></div>
  				  <div class="bNB box"><img src="https://static.igem.org/mediawiki/2015/f/f7/CentralCalgaryZenab.jpg" alt="Portrait" style="float:left; width:200px; padding:10px;"><h2> Zenab </h2> <p class="bioPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.

Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
				</div>
			</div>
            

            <div id="team2" class="panel"> <h1>Associates</h1> <p >Thank you for you generous sponsorship<img src="https://static.igem.org/mediawiki/2015/9/92/AlbertaInnovatesLogo.png" alt="Alberta Innovates" style="width:100px;"></p><p>For giving us an opportunity and something worth my spare time<img src="https://static.igem.org/mediawiki/2015/6/64/SchoolLogo.png" alt="Central Memorial Highschool" style="width:100px;"></p><p>Special Thanks to: David Lloyd, our mentor</p> <p>Iain George our other mentor</p><p>Ms.Wyshinski, who is not a biologist but kept us on track</p><p>Mr.Klemmer for his great support</p></div>
   
            <div id="project1" class="panel"> <h1>The Project; The Dream 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>

		<div id="project2" class="panel"> <h1>The Project; The Dream 2</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
		<div id="project3" class="panel"> <h1>The Project; The Dream 3</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
		<div id="project4" class="panel"> <h1>The Project; The Dream 4</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
		<div id="project5" class="panel"> <h1>The Project; The Dream 5</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
		<div id="project6" class="panel"> <h1>The Project; The Dream 6</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
<div id="project7" class="panel"> <h1>The Project; The Dream 7 </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

 </p></div>

 
 <div id="safety1" class="panel"> <h1>Safety </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

 </p></div>
 
  <div id="ethics1" class="panel"> <h1>Ethics </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 </p></div>
  <div id="logbook1" class="panel"> <h1>logbook </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

 </p></div>
  <div id="policy1" class="panel"> <h1> Policy </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

 </p></div>
  <div id="practices1" class="panel"> <h1>Practices </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

 </p></div>
 
        </div>
          
       	<div id="footerBar"> 
            <div id="back"><a href="#" data-target="back">Back</div></a>
            <div id="next"><a href="#" data-target="next">Next</div></a>
            		<div id="navBar">
                    <ul id="home" class="disableFooter">
				<li class="footerButton activePage" id="fho1"><a data-target="home1" data-group="#home">Home</a></li>
                 	</ul>
                    
    			<ul id="team" class="disableFooter">
				<li class="footerButton" id="fte1"><a data-target="team1" data-group="#team">The Team</a></li>
                        	<li class="footerButton" id="fte2"><a data-target="team2" data-group="#team">Associates</a></li>
                 	</ul>
                     
			<ul id="project" class="disableFooter">
				<li class="footerButton" id="fpr1"><a href="#" data-target="project1" data-group="#project">Project1</a></li>
                        	<li class="footerButton" id="fpr2"><a href="#" data-target="project2" data-group="#project">Project2</a></li>
                        	<li class="footerButton" id="fpr3"><a href="#" data-target="project3" data-group="#project">Project3</a></li>
                       	 	<li class="footerButton" id="fpr4"><a href="#" data-target="project4" data-group="#project">Project4</a></li>
                       		<li class="footerButton" id="fpr5"><a href="#" data-target="project5" data-group="#project">Project5</a></li>
                       		<li class="footerButton" id="fpr6"><a href="#" data-target="project6" data-group="#project">Project6</a></li>
                        	<li class="footerButton" id="fpr7"><a href="#" data-target="project7" data-group="#project">Project7</a></li>
                 	</ul>
</div>
         </div>
        
        
         <div id="canvas"></div>
        
        
        <script src="https://2015.igem.org/Team:Central_Calgary/js/jquery?action=raw&ctype=text/javascript"></script>
        <script src="https://2015.igem.org/Team:Central_Calgary/js/mousewheel?action=raw&ctype=text/javascript"></script>       
        <script src="https://2015.igem.org/Team:Central_Calgary/js/teampagejs?action=raw&ctype=text/javascript"></script>
        <script src="https://2015.igem.org/Team:Central_Calgary/three?action=raw&ctype=text/javascript"></script>
        <script src="https://2015.igem.org/Team:Central_Calgary/js/CanvasRenderer?action=raw&ctype=text/javascript"></script>

        <script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/EffectComposer?action=raw&ctype=text/javascript"></script>
	<script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/RenderPass?action=raw&ctype=text/javascript"></script>
	<script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/MaskPass?action=raw&ctype=text/javascript"></script>
	<script src="https://2015.igem.org/Team:Central_Calgary/postprocessing/ShaderPass?action=raw&ctype=text/javascript"></script>
       
       	<script src="https://2015.igem.org/Team:Central_Calgary/shaders/CopyShader?action=raw&ctype=text/javascript"></script>
        <script src="https://2015.igem.org/Team:Central_Calgary/shaders/HorizontalBlurShader?action=raw&ctype=text/javascript"></script>	
        <script src="https://2015.igem.org/Team:Central_Calgary/shaders/RGBShiftShader?action=raw&ctype=text/javascript"></script>

        <script>
		var panels = new Array("#home1","#team1","#team2","#project1","#project2","#project3","#project4","#project5","#project6","#project7","#safety1","#ethics1","#logbook1","#policy1","#practices1");
		var panelButtons = new Array("#fho1","#fte1","#fte2","#fpr1","#fpr2","#fpr3","#fpr4","#fpr5","#fpr6","#fpr7");

		var buttons = new Array("#bHome","#bTeam","#bProject","#bSafety","#bEthics","#bLogbook","#bPolicy","#bPractices");
		var footerMenus = new Array("#home", "#team","#project");
		var prevMenu = 0, activeMenu = 0;
		var currentPanel = 0;
			function update() {
				
				prevMenu = activeMenu;
				
				for(var i = 0; i <= buttons.length; i++)
				{
					$(buttons[i]).attr("class","menuItem");	
					
				}
				
				if(currentPanel === 0) {
					$("#bHome").attr("class","currentLink");
					$("#home").addClass("activeFooter");
					activeMenu = 0;
					
				} else if(currentPanel === 1 || currentPanel === 2) {
					$("#bTeam").attr("class","currentLink");
					$("#team").addClass("activeFooter");
					activeMenu = 1;
					
				} else if(currentPanel <= 9) {
					$("#bProject").attr("class","currentLink");	
					$("#project").addClass("activeFooter");
					activeMenu = 2;
					
				} else if(currentPanel === 10) {
					$("#bSafety").attr("class","currentLink");	
				} else if(currentPanel === 11) {
					$("#bEthics").attr("class","currentLink");	
				} else if(currentPanel === 12) {
					$("#bLogbook").attr("class","currentLink");	
				} else if(currentPanel === 13) {
					$("#bPolicy").attr("class","currentLink");	
				} else if(currentPanel === 14) {
					$("#bPractices").attr("class","currentLink");	
				}
				
				
				for(var i = 0; i < panelButtons.length; i++)
				{ 
					$(panelButtons[i]).removeClass('activePage');
				}
				
				$(panelButtons[currentPanel]).addClass('activePage');

				
				for(var i = 0; i<footerMenus.length; i++)
				{
					if(i === activeMenu) 
					{
						if(prevMenu != activeMenu)
						{
							$(footerMenus[i]).fadeIn("fast","linear");	
						}
					}
					else
					{
						$(footerMenus[i]).fadeOut("fast","linear");
						$(footerMenus[i]).addClass("disableFooter").removeClass("activeFooter");
					}
				}
				
				
				if(currentPanel===1) 
				{
					$("#contentBg").fadeOut(0);
					$("#contentBg").css("background","url(img/teamPhoto.png)");
					$("#contentBg").stop().fadeIn(500);	
				}
				else
				{
					$("#contentBg").stop().fadeOut(500);
				}	
				
				
			
			
		}
		
		
		window.addEventListener("keydown", function(e) {
   			if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
       			e.preventDefault();
   			 }
		}, false);
		
		(function($) {			
			$('#header a').on('click', function(e) {
				e.preventDefault();
				var target = '#'+$(this).data('target');
				var left = $(target).position().left;
				
				if(panels[currentPanel] != target) 
				{
					for(var i = 0; i < panels.length; i++)
					{
						
						if(panels[i] === target)
						{
							currentPanel=i;
							break;
						}
					}
					update();
						
					$('html, body').stop().animate({scrollLeft:left}, 1000);
				}
			});
			
			$('#footerBar a').on('click', function(e) {
				e.preventDefault();
			
				var target = '#'+$(this).data('target');
				
				if(target == "#next") 
				{
					if(currentPanel + 1 < panels.length)
					{
						currentPanel++;	
						var left = $(panels[currentPanel]).position().left;
						update();
						$('html, body').stop().animate({scrollLeft:left}, 500);
						

					}
				} else if(target == "#back") {
					if(currentPanel - 1 >= 0)
					{
						currentPanel--;	
						var left = $(panels[currentPanel]).position().left;
						update();
						$('html, body').stop().animate({scrollLeft:left}, 500);
						

					}
				} else {
					var left = $(target).position().left;
					
					if($(this).data('group') == footerMenus[activeMenu])
					{
						if(panels[currentPanel] != target) 
						{
							for(var i = 0; i < panels.length; i++)
							{
								if(panels[i] === target)
								{
									currentPanel=i;
									break;
								}
							}
							update();
							$('html, body').stop().animate({scrollLeft:left}, 1000);
						}
					}
				}
				
				
					
			});
			
			$("body").mousewheel(function(event,delta) {
	
	
				event.preventDefault();
		
				
				if(currentPanel-delta < panels.length)
				{
if(currentPanel-delta>=0)
{
					currentPanel-=delta;						
					var left = $(panels[currentPanel]).position().left;
				 
					$("html,body").stop().animate({scrollLeft:left}, 500);
					event.preventDefault();
}
				}
				update();
			
			});
			
			update();
			
			
		}(jQuery));
		
		var camera, scene, renderer, mesh, loader, material,texture,composer;
		var container;
		var sFinal;
		var json;
		
		$.ajaxSetup({ async: false });
		
		sFinal = $.ajax({
                url: "https://static.igem.org/mediawiki/2015/c/ce/Dna.txt",
        }).responseText;
		
		json = JSON.parse(sFinal);
				
		container = document.getElementById('canvas');
		document.body.appendChild(container);
		
		renderer = new THREE.CanvasRenderer();
		renderer.setSize(1920,1080);
		renderer.setClearColor( 0x90D8F0,0);
		container.appendChild(renderer.domElement);
	
		scene = new THREE.Scene();
		var ambientLight = new THREE.AmbientLight(0x404040);
		scene.add(ambientLight);
		
		var directionalLight = new THREE.DirectionalLight(0xFFFFFF,1);
		var directionalLight2 = new THREE.DirectionalLight(0xFFFFFF,1);
		directionalLight.position.set(10, 1, 3);
		directionalLight2.position.set(0, 3, 10);
		scene.add(directionalLight);
		scene.add(directionalLight2);
		
		camera = new THREE.PerspectiveCamera( 75, 1920 / 1080, 1, 10000 );
		camera.position.x = 10;
		camera.position.y = 0;
		camera.position.z = 25;
		
		composer = new THREE.EffectComposer( renderer );
		composer.addPass(new THREE.RenderPass(scene,camera));
		
		var RGBShift = new THREE.ShaderPass(THREE.RGBShiftShader);
		RGBShift.uniforms[ 'amount' ].value = 0.0;
		composer.addPass (RGBShift);
			
		var effect = new THREE.ShaderPass( THREE.HorizontalBlurShader );
		effect.renderToScreen = true;
		composer.addPass( effect );
		
		// LOAD AND CREATE STRAND
		loader = new THREE.JSONLoader();
	
		var strand = loader.parse(json, null);
		material = new THREE.MeshLambertMaterial( {color: 0x63D8FF });
		mesh = new THREE.Mesh( strand.geometry, material );
		mesh.rotation.y +=Math.PI / 2 + 0.3;
		mesh.rotation.x +=Math.PI / 6;
		mesh.position.x = 0;
		mesh.position.z = 3;
		mesh.position.y = 0;
		scene.add( mesh );

		
		var imgTexture = THREE.ImageUtils.loadTexture( "https://static.igem.org/mediawiki/2015/d/d7/Background0.jpg" );
			var imgMaterial = new THREE.MeshBasicMaterial( { 
				map : imgTexture
			} );
		var geometry = new THREE.PlaneBufferGeometry(1920*2, 1080*2,1,1);
		var plane = new THREE.Mesh(geometry, imgMaterial);
		scene.add(plane);
		plane.position.x = 0;
		plane.position.y = 0;
		plane.position.z = -1000;
		
			
		window.addEventListener('resize', function() {
		  var WIDTH = window.innerWidth,
			  HEIGHT = window.innerHeight;
		  renderer.setSize(WIDTH, HEIGHT);
		  camera.aspect = WIDTH / HEIGHT;
		  camera.updateProjectionMatrix();
		});

		function render() {

   			mesh.rotation.z -= 0.001;
    
    		composer.render();

		}

		(function animate() {

   		 requestAnimationFrame( animate );

    	 render();

		})();

$(document).ready(function() {
				setTimeout(function(){
					 $('body').addClass('loaded');
				}, 1000);
			});
		</script>
	</body>
</html>