Team:Peking/test

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Peking iGEM Home</title>


<style type="text/css">
#top-section{
   height:0px;
    border:none;
    width:980px;
    margin:0 auto;
    padding:0 0 0 0;
    background-color:transparent;
    overflow:hide;

}
#p-logo{display:none;}
#search-controls{display:none;}
#top{display:none;}
.firstHeading{display:none;}
/* end of hiding the top section*/

/* global setting*/
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
#content{
    background-color:transparent;
    border:none;
    width:1200px;
    height:700px;
    marign:0 auto;
    padding:0 0 0 0;
    top:-40px;
    }
#bodyContent{
    background-color:transparent;
    border:none;
    
    }
siteSub{
    display:none;
    border:none;
    }
contentSub{
    display:none;
    }
/* end of global setting*/

/*hiding the footer-box*/
#footer-box{display:none;}
#catlinks{display:none;}
/*end of hiding the footer book*/

/*!!!!!!!!!!!!!!!!!*/
body {
	float: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	background-attachment: fixed;
	text-align: center;
	background-image: url(https://static.igem.org/mediawiki/2014/0/09/Peking2014wcg_body2.jpg);
}
#mainbody {
	width: 85%;
	max-width: 1600px;
	min-width: 1000px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

#top1 {
	width: 100%;
	margin-bottom: 10px;
}
#topnav {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	width: 100%;
	height: 70px;
	background-color: #FFFFFF;
	display: block;
	overflow-y: hidden;
	margin-bottom: 10px;
}
#topnav ul {
	list-style-type: none;
}



#topnav ul li {
	list-style-type: none;
	float: left;
	width: 10%;
	color: #000000;
	text-align: center;
}
#topnav ul .a1a  {
	color: #80c269;
	text-decoration: none;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: large;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 65px;
	display: block;

}
#topnav ul .a2a  {
	color: #80c269;
	text-decoration: none;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: large;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	display: block;
}



#topnav .sublist {
	display: none;
	color: #000000;
	position: absolute;
	z-index: 5;
}
#topnav ul .sublist li  {
	text-align: left;
	background-color: #FFFFFF;
	width: 100%;
	position: relative;
	border-left: thick solid #80c269;
	margin-top: 8px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	line-height: 0.8em;
	z-index: 1;
	float: none;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	left: -2.6em;
}
#topnav ul li:hover > .sublist {
	display: block;
}
#top1 #topnav ul li:hover > .a1a  {
	display: block;
	color: #339999;
	border-bottom: thick solid #339999;
}

#top1 #topnav ul .sublist li:hover > .a2a {
	color: #339999;
}

#top1 #topnav ul .sublist li:hover  {
	border-left: medium solid #339999;
}

#top1 #title {
	width: 100%;
	z-index: 0;
}
#top1 #title img {
	width: 60%;
	height: 100px;
}
#mid1 {
	width: 100%;
	float: left;
	margin-bottom: 30px;
}
#mid1 #mid1left {
	width: 58%;
	float: left;
	background-image: url(https://static.igem.org/mediawiki/2014/e/e0/Peking2014wcg_algal.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	border-radius: 15px;
}
#mid1 #mid1left #cover {
	background-color: rgba(0,0,0,0.6);
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
	color: #FFFFFF;
	opacity: 0.8;
	bottom: 0px;
	width: 100%;
	position: absolute;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
#mid1 #mid1left #cover .habstract {
	line-height: 60px;
        color:white;
}

#mid1 #mid1left #cover #pabstract  {
	padding-right: 2em;
	padding-left: 2em;
	text-align: left;
}

#mid1 #mid1right {
	width: 40%;
	float: right;
	position: relative;
}
#mid1 #mid1right #slider #SliderName_2 img {
	border-radius: 15px;

}







#mid2 {
	float: left;
	width: 100%;
}



#mainbody #mid2 #mid2left {
	width: 37%;
	float: left;
	margin-top: 50px;
}
#mainbody #mid2 p    {
	text-align: left;
	padding-top: 27px;
	padding-right: 27px;
	padding-bottom: 27px;
	padding-left: 32px;
	color: #FFFFFF;
}
#mainbody .subgroupl  {
	background-image: url(img/lframe.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
#mainbody #mid2 #mid2center img {
	width: 24%;
	float: left;
	margin-left: 0.5%;
}
#mainbody #mid2 #mid2right {
	width: 37%;
	float: right;
}
#mainbody .subgroupr  {
	background-image: url(img/rframe.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


#mid3 {
	float: left;
	width: 100%;
	margin-top: 15px;
}

#mainbody #mid3 p    {
	text-align: left;
	padding-top: 27px;
	padding-right: 27px;
	padding-bottom: 27px;
	padding-left: 32px;
	color: #FFFFFF;
}

#mainbody #mid3 #mid3left {
	width: 37%;
	float: left;
}

#mainbody #mid3 #mid3center img {
	width: 24%;
	float: left;
	margin-left: 0.5%;
}
#mainbody #mid3 #mid3right {
	width: 37%;
	float: right;
}

*{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
}

#clc {
	float: none;
	clear: both;
}
.c {
	clear: both;
}
#bottom {
	width: 100%;
	margin-top: 30px;
}
#bottom img {
	width: 100%;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
</style>

//<link rel="stylesheet" href="https://2014.igem.org/Team:Peking/test/css/!!!0926.css?action=raw&ctype=text/css" type="text/css" >

<script type="text/javascript" src="https://2014.igem.org/Team:Peking/test/js/jquery.js?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:Peking/test/js/home.js?action=raw&ctype=text/javascript"></script>
	
<!-- sliderman.js -->
    <script type="text/javascript" src="https://2014.igem.org/Team:Peking/test/js/sliderman.1.3.8.js?action=raw&ctype=text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Peking/test/css/sliderman.css?action=raw&ctype=text/css" />
<!-- /sliderman.js -->

</head>


<body>
<div id="mainbody">
<div id="top1">
  <nav id="topnav">
      <ul>
      	<li id="logo" > <img src="https://static.igem.org/mediawiki/2014/0/04/Peking_igemlogo.png" width="80" height="65"  alt=""/></li>
      	<li id="home"> <a class="a1a" href="https://2014.igem.org/Team:Peking/test">Home</a></li>
        <li id="Team"> <a class="a1a" href="#">Team</a>
        	<ul class="sublist">
            <li id="Teamsublist"> <a class="a2a" href="https://2014.igem.org/Team:Peking/test/menbers.html">Members</a></li><li id="Teamsublist"> <a class="a2a" href="#">Notebook</a></li>			<li id="Teamsublist"> <a class="a2a" href="#">Attributions</a></li>     </ul>
        </li>
        <li id="Project"> <a class="a1a" href="#">Project</a>
       	  <ul class="sublist">
            <li id="Teamsublist"> <a class="a2a" href="#">Killing</a></li><li id="Teamsublist"> <a class="a2a" href="#">Killing Improvements </a></li>			<li id="Teamsublist"> <a class="a2a" href="#">Degradation</a></li>      <li id="Teamsublist"> <a class="a2a" href="#">Suicide</a></li>       	</ul>
        </li>
        <li id="Modeling"> <a class="a1a" href="#">Modeling</a>
       	  <ul class="sublist">
            <li id="Teamsublist"> <a class="a2a" href="#">Binding Evaluation </a></li>	<li id="Teamsublist"> <a class="a2a" href="#">Project Application</a></li>   <li id="Teamsublist"> <a class="a2a" href="#">Cellular Burdern </a></li>      </ul>
        </li>
        <li id="Achievements" style="width:18%"> <a class="a1a" href="#">Achievements</a>
        	<ul class="sublist">
            <li id="Teamsublist"> <a class="a2a" href="#">Parts</a></li>
            <li id="Teamsublist"> <a class="a2a" href="#">Judging Criteria </a></li>     </ul>
        </li>
        <li id="Safety "> <a class="a1a" href="#">Safety</a></li>
        <li id="Human" style="width:18%"> <a class="a1a" href="#">Human Practice</a></li>
    </ul>
  </nav>
  <div id="title"><img src="https://static.igem.org/mediawiki/2014/7/7f/Peking2014wcg_title.png"  alt=""/></div>
</div>

<div id="mid1">
	<div id="mid1left">
        <div id="cover">
            <h1 class="habstract">Harmful algal bloom</h1>
            <p id="pabstract">Widespread water bloom leads to extensive damage in ecosystems. Compared to physical or chemical methods, biological treatment for water bloom is less expensive and more environmentally friendly. Hence Peking iGEM is dedicated to constructing engineered microorganisms for the elimination of algae and recovery of ecosystems.
    A specific antimicrobial peptide is secreted to disrupt the outer membrane of algae. In addition, we equip our transgenic cells with features that allow for buoyancy and attachment, making our project more efficient. During this process, an enzyme is also secreted to degrade a deleterious product of algae. After eradicating the algae, our engineered bacteria will commit suicide, and the ecosystem is finally restored.
    This project is an innovative treatment for water bloom, and has potential applications in the field of ecosystem remediation.
    		</p>
		</div>
      <div class="c"></div>
	</div>
	<div id="mid1right">
 	 	<div id="slider">
			<div id="SliderName_2" class="SliderName_2">
					<img src="https://static.igem.org/mediawiki/2014/e/ef/Peking2014wcg_show1.jpg"  alt="Demo2 first" />

					<div class="SliderName_2Description">Peking iGEM Club 1: <strong>Promoting iGEM</strong></div>
					<img src="https://static.igem.org/mediawiki/2014/2/23/Peking2014wcg_show2.jpg"  />
					<div class="SliderName_2Description">Peking iGEM Club 2: <strong>Promoting iGEM</strong></div>
					
		  </div>
		  <div class="c"></div>
		  <div class="c"></div>

				<script type="text/javascript">
					var w=$("#mid1right").width();
					var h=$("#mid1left").width()*480/640;
					$(document).ready(function(){
						
						//	alert(height);     
					});
					effectsDemo2 = 'rain,stairs,fade';
					var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: w, height: h, effects: effectsDemo2,
						display: {
							autoplay: 3000,
							loading: {background: '#000000', opacity: 0.5, image: 'img/loading.gif'},
							buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, 
															   next: {className: 'SliderNameNext_2', label: ''}
										},
							description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'}
						}
					});
				</script>
               
      		<div class="c"></div>	
      </div>
      <div class="c"></div>
    </div>
  <div class="c"></div>
</div>

<div id="mid2">
	<div id="mid2left">
      <div class="subgroup">
        <p class="subgroupl">
        <strong>Killing:</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
      <div class="subgroupl">
        <p >
        <strong>Killing Improvements:</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
    </div>
    <div id="mid2center">
    <img src="https://static.igem.org/mediawiki/2014/1/19/Peking2014wcg_process.png"  alt=""/>
    </div>
    <div id="mid2right">
    <div class="subgroupr">
        <p>
        <strong>This year Peking iGEM aims at dealing with the problem of water bloom with the tool of Synthetic Biology, to engineer bacterial that can restore the ecosystem, both reduce the algal biomass and degrade the toxin.
</strong>
        </p></div>
      <div class="subgroupr">
        <p>
        <strong>Degradation :</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
        <div class="subgroupr">
        <p>
        <strong>Suicide :</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
    </div>
</div>
<div id="mid3">
	<div id="mid3left">
     <div class="subgroupl">
        <p>
        <strong>Modeling :</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
    </div>
    <div id="mid3center">
    <img src="https://static.igem.org/mediawiki/2014/6/60/Peking2014wcg_process2.png"  alt=""/>
    </div>
    <div id="mid3right">
      <div class="subgroupr">
        <p>
        <strong>Human Practice :</strong><br>Algal blooms threaten the ecological integrity and sustainability of aquatic ecosystems, they can not only deplete oxygen upon bloom senescence thus being harmful to the phytoplankton, but also produce a variety of toxic secondary metabolites.
    There are some methods to deal with water bloom, such as physical methods, chemical methods, and biological methods. They each offer their own advantages, but also have their own disadvantages as the following table shows.
        </p></div>
    </div>
    
	<div class="c"></div>
</div>

<div id="bottom">
<img src="https://static.igem.org/mediawiki/2014/a/a4/Peking2014wcg_sponsors.png" alt=""/> </div>

</div>
</body>


</html>