Team:NJAU China/Background

From 2014.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 1: Line 1:
<html lang="en">
<html lang="en">
<head>
<head>
-
<meta charset="utf-8">
+
    <meta charset="utf-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
-
<meta name="description" content="">
+
    <meta name="description" content="">
-
<meta name="author" content="">
+
    <meta name="author" content="">
-
<link rel="icon" href="../../favicon.ico">
+
    <link rel="icon" href="../../favicon.ico">
-
<title>Carousel Template for Bootstrap</title>
+
    <title>Home</title>
-
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
    <style type="text/css">
-
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
+
*{
-
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
padding:0;
 +
text-decoration:none;
 +
margin:0;}
 +
        body {
 +
            padding-bottom: 40px;
 +
            background:#a2dcf3;
 +
            color: #5a5a5a;
 +
            font-size: 16px;
 +
            font-family:Andalus;
 +
        }
 +
pre{
 +
font-size:14px;
 +
font-family:Andalus;}
 +
        #myheader{
 +
            width:1366px;
 +
    height:500px;
 +
    margin:0 auto;
 +
    position:relative;
 +
    font-family:Arial, Helvetica, sans-serif;
 +
            background:#a2dcf3 url("https://static.igem.org/mediawiki/2014/3/34/Header_bg.png");
 +
        }
 +
        #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
 +
            display: none;
 +
        }
-
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
        /*-- hides default wiki settings --*/
-
<!--[if lt IE 9]>
+
     
-
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
-
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
-
    <![endif]-->
+
-
<!-- Custom styles for this template -->
+
        h1, h2, h3, h4, h5 {
-
<link href="carousel.css" rel="stylesheet">
+
            font-family: Georgia, Times, "Andalus", serif;
-
<style type="text/css">
+
        }
-
body {
+
 
-
padding-bottom: 40px;
+
        #top-section {
-
background: #333333;
+
            /*-- styling for default menu bar (edit, page, history, etc.) --*/
-
color: #5a5a5a;
+
            background-color: #383838;
-
font-size: 12px;
+
            border: 0 none;
 +
            height: 14px;
 +
            z-index: 100;
 +
            top: 0;
 +
            position: fixed;
 +
            width: 975px;
 +
            left: 50%;
 +
            margin-left: -487px;
 +
        }
 +
.firstHeading {
 +
            width: 975px;
 +
            margin: 0px auto;
 +
            padding-top: 100px;
 +
            margin-bottom: 20px;display:none;
 +
            font-family: Georgia, Times, "Andalus", serif;
 +
        }
 +
        #top-section-bar {
 +
            /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
 +
            background-color: #383838;
 +
            height: 14px;
 +
            display: block;
 +
            z-index: 10;
 +
            position: fixed;
 +
            width: 100%;
 +
            top: 0;
 +
        }
 +
 
 +
        body {
 +
            background-color: #f60;
 +
        }
 +
 
 +
        #globalWrapper, #content {
 +
            /*-- changes default wiki settings --*/
 +
            width: 100%;
 +
            height: 100%;
 +
            border: 0px;
 +
            background-color: transparent;
 +
            margin: 0px;
 +
            padding: 0px;
 +
        }
 +
 
 +
        html, body, .wrapper {
 +
            /*-- changes default wiki settings --*/
 +
            width: 100%;
 +
            height: 100%;
 +
            background-color: transparent;
 +
        }
 +
 
 +
        #container {
 +
            /*-- creates container for all content on page --*/
 +
            font-family: Arial, Helvetica, sans-serif;
 +
            font-weight: normal;
 +
            font-size: 14px;
 +
            color: #414141;
 +
            width: 960px;
 +
            margin-left: auto;
 +
            margin-right: auto;
 +
            background-color: #transparent;
 +
            margin-top: 0px;
 +
        }
 +
 
 +
        .container {
 +
            font-size: 14px;
 +
            width:700px;
 +
            float:right;
 +
        }
 +
 
 +
        .buttontext {
 +
            color: #FFF
 +
        }
 +
#my_h1{position:absolute;top:70px;left:170px;border:none;}
 +
#my_h1 a{display:block;width:190px;height:130px;text-indent:-9999px;}
 +
#my_nav{position:absolute;top:402px;left:200px;width:990px;height:50px;}
 +
#my_nav ul{width:100%;margin:0;padding:0;list-style:none;font-size:24px;}
 +
#my_nav ul li{display::inline-block;padding:9px 30px;float:left;list-style:none;position:relative;}
 +
#my_nav ul li:hover{background:#e3f7ff;}#my_nav ul li a{color:#00586b;text-decoration:none;}#project{display:none;position:absolute;z-index:100;top:47px;left:0px;background:#CF6;width:100px;}#project dd{width:135px;font-size:16px;
 +
background:#c9efff;height:40px;margin:0;}#project dd a{width:100%;height:40px;display:block;text-decoration:none;text-align:center;line-height:40px;}#project dd a:hover{background:#a1dbf0;}#achievement{display:none;position:absolute;top:47px;z-index:100;left:0px;background:#CF6;width:100px;}#achievement dd{width:198px;font-size:16px;background:#c9efff;height:40px;margin:0;}#achievement dd a{width:100%;height:40px;display:block;text-decoration:none;text-align:center;line-height:40px;}#achievement dd a:hover{background:#a1dbf0;}#prctice{display:none;position:absolute;top:47px;z-index:100;left:0px;background:#CF6;width:100px;}#prctice dd{width:300px;font-size:16px;background:#c9efff;height:40px;margin:0;}#prctice dd a{width:100%;height:40px;display:block;text-decoration:none;text-align:center;line-height:40px;}#prctice dd a:hover{background:#a1dbf0;}#ackonwledgement{display:none;position:absolute;top:47px;z-index:100;left:0px;background:#CF6;width:100px;}#ackonwledgement dd{width:257px;font-size:16px;background:#c9efff;height:40px;margin:0;}#ackonwledgement dd a{width:100%;height:40px;display:block;text-decoration:none;text-align:center;line-height:40px;}#ackonwledgement dd a:hover{background:#a1dbf0;}
 +
#my_content{
 +
width:1030px;
 +
margin:0px auto;}
 +
#my_abstract{
 +
width:300px;
 +
margin:0 0 0 25px;
 +
        float:left;
 +
}
 +
#my_abstract h2{
 +
height:50px;
 +
line-height:50px;
 +
text-indent:50px;
 +
border:none;
 +
background:#999;
 +
margin:0 0 20px 0;
 +
padding:0;
}
}
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
+
#my_abstract p{
-
display: none;
+
text-indent:30px;
-
} /*-- hides default wiki settings --*/
+
height:240px;
-
.firstHeading {
+
overflow-y:scroll;
-
width: 975px;
+
-
margin: 0px auto;
+
-
padding-top: 100px;
+
-
margin-bottom: 20px;
+
-
font-family: Georgia, Times, "Times New Roman", serif;
+
}
}
-
h1, h2, h3, h4, h5 {
+
#my_contents{
-
font-family: Georgia, Times, "Times New Roman", serif;
+
width:1030px;
 +
position:relative;
 +
margin:0 auto;
}
}
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
#my_contents h1{
-
background-color: #383838;
+
width:90%;
-
border: 0 none;
+
margin:10px auto;
-
height: 14px;
+
}
-
z-index: 100;
+
#my_contents h4{
-
top: 0;
+
width:90%;
-
position: fixed;
+
margin:10px auto;
-
width: 975px;
+
}
-
left: 50%;
+
#my_contents p{
-
margin-left: -487px;
+
width:90%;
-
}
+
margin:10px auto;
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
font-size:16px;
-
background-color: #383838;
+
text-indent:30px;}
-
height: 14px;
+
pre{
-
display: block;
+
width:90%;
-
z-index: 10;
+
margin:0 auto;}
-
position: fixed;
+
        /*-- hides default wiki settings --*/
-
width: 100%;
+
    </style>
-
top: 0;
+
<script type="text/javascript">
-
}
+
window.onload = function(){
-
body {
+
xialashow('project_li','project');
-
background-color: #fff;
+
xialahidden('project_li','project');
-
}
+
xialashow('achievement_li','achievement');
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
xialahidden('achievement_li','achievement');
-
width: 100%;
+
xialashow('prctice_li','prctice');
-
height: 100%;
+
xialahidden('prctice_li','prctice');
-
border: 0px;
+
xialashow('ackonwledgement_li','ackonwledgement');
-
background-color: transparent;
+
xialahidden('ackonwledgement_li','ackonwledgement');}
-
margin: 0px;
+
function xialashow(li_id,dl_id){var li_id = document.getElementById(li_id);var dl_id = document.getElementById(dl_id);li_id.onmouseover = function(){dl_id.style.display = 'block';}}
-
padding: 0px;
+
function xialahidden(li_id,dl_id){var li_id = document.getElementById(li_id);var dl_id = document.getElementById(dl_id);li_id.onmouseout = function(){dl_id.style.display = 'none';}}
-
}
+
</script>
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
 
-
width: 100%;
+
-
height: 100%;
+
-
background-color: transparent;
+
-
}
+
-
#container { /*-- creates container for all content on page --*/
+
-
font-family: Arial, Helvetica, sans-serif;
+
-
font-weight: normal;
+
-
font-size: 14px;
+
-
color: #414141;
+
-
width: 960px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
background-color: #transparent;
+
-
margin-top: 0px;
+
-
}
+
-
.container {
+
-
font-size:14px
+
-
}
+
-
.buttontext {
+
-
color:#FFF
+
-
}
+
-
</style>
+
-
<style>
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {
+
-
display: none;
+
-
} /*-- hides default wiki settings --*/
+
-
</style>
+
</head>
</head>
 +
<!-- NAVBAR
<!-- NAVBAR
================================================== -->
================================================== -->
<body>
<body>
-
<div class="container-fluid">  
+
<div id="myheader">
-
  <!-- Brand and toggle get grouped for better mobile display -->
+
<h1 id="my_h1"><a href="#">IGEM</a></h1>
-
  <div class="navbar-header">
+
     <div id="my_nav">
-
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+
         <ul>
-
    <a class="navbar-brand" href="#">Brand</a> </div>
+
          <li><a href="https://2014.igem.org/Team:NJAU_China">Home</a></li>
-
  <div class="navbar-wrapper">
+
          <li id="project_li"><a href="#">Project</a>
-
     <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+
                <dl id="project">
-
      <div class="container">
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Background">Background</a></dd>
-
         <div class="navbar-header">
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/System Design">System Design</a></dd>
-
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Safety">Safety</a></dd>
-
          <a class="navbar-brand" href="#">iGem 2014 NJAU_China</a> </div>
+
                </dl>
-
        <div class="collapse navbar-collapse">
+
          </li>
-
          <ul class="nav navbar-nav">
+
          <li id="achievement_li"><a href="#">Achievement</a>
-
            <li><a href="https://2014.igem.org/Team:NJAU_China" class="unselect">Home</a></li>
+
                <dl id="achievement">
-
            <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Introduction<span class="caret"></span></a>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Wet Labs">Wet Lab</a></dd>
-
              <ul class="dropdown-menu" role="menu">
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Modeling">Model</a></dd>
-
                <li class="active"><a href="https://2014.igem.org/Team:NJAU_China/Background">Background</a></li>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Protocol/Notebooks">Protocol/Notebooks</a></dd>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Challenge">Challenge</a></li>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Biobricks">Biobricks</a></dd>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/OurIdea">Our Idea</a></li>
+
                 </dl>
-
              </ul>
+
          </li>
-
            </li>
+
          <li id="prctice_li"><a href="#">Practice</a>
-
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<span class="caret"></span></a>
+
                <dl id="prctice">
-
              <ul class="dropdown-menu" role="menu">
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/iGEM and Synthetic Biology Exhibition">Exhibitions and Workshops</a></dd>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Overview">Overview</a></li>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Questionnaire Survey">Questionnaire Survey</a></dd>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Sensor">Part1: Sensor</a></li>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Collaboration">Collaboration</a></dd>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/System">System</a></li>
+
                </dl>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Product">Product</a></li>
+
          </li>
-
                 <li><a href="https://2014.igem.org/Team:NJAU_China/Summary">Summary</a></li>
+
          <li><a href="https://2014.igem.org/Team:NJAU_China/Team">Team</a></li>
-
              </ul>
+
          <li id="ackonwledgement_li"><a href="#">Acknowledgement</a>
-
            </li>
+
                <dl id="ackonwledgement">
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Modeling" class="unselect">Modeling</a></li>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Inside Campus">Inside Campus&Arrtibutions</a></dd>
-
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outreach<span class="caret"></span></a>
+
                    <dd><a href="https://2014.igem.org/Team:NJAU_China/Outside Campus">Outside Campus</a></dd>
-
              <ul class="dropdown-menu" role="menu">
+
                </dl>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/HumanPractice">Human Practice</a></li>
+
          </li>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Safety">Safety</a></li>
+
      </ul>
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Collaboration">Collaboration</a></li>
+
-
              </ul>
+
-
            </li>
+
-
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements<span class="caret"></span></a>
+
-
              <ul class="dropdown-menu" role="menu">
+
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/BioBricks">BioBricks</a></li>
+
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/JudgingCriteria">Judging Criteria</a></li>
+
-
              </ul>
+
-
            </li>
+
-
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook<span class="caret"></span></a>
+
-
              <ul class="dropdown-menu" role="menu">
+
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Protocol">Protocol</a></li>
+
-
                <li><a href="https://2014.igem.org/Team:NJAU_China/Lablog">Lablog</a></li>
+
-
              </ul>
+
-
            </li>
+
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Acknowledgement"  class="unselect">Acknowledgement</a></li>
+
-
          </ul>
+
-
        </div>
+
-
        <!-- /.nav-collapse -->
+
-
      </div>
+
-
      <!-- /.container -->  
+
     </div>
     </div>
-
    <!-- /.navbar -->
 
-
   
 
-
  </div>
 
</div>
</div>
-
<!-- Carousel
+
<!------------------------------------------->
-
    ================================================== -->
+
<div id="my_contents">
-
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
<p>Copper has existed on earth since the birth of this planet, which is an essential element for creatures because of its special chemical property and function. Besides, as a critical material, it has been utilized by human for a long time as large amount of copper is mined, processed and applied to our life. However, many a "copper-made" is abandoned nowadays, which leads to the accumulation of copper ion in fresh water and other places, resulting in jeopardizing the copper cycle on earth. Once the concentration reaches a high level then it will become destructive and cannot be cleared by ecosystem itself, causing the phenomenon what we called “copper contamination”.</p>
-
  <!-- Indicators -->
+
    <h1>Copper is indispensable for life.</h1>
-
  <ol class="carousel-indicators">
+
    <p>Generally, the chemical property of copper was embodied by transformation between its redox states, Cu(II)and Cu(I).The redox potential Cu(II)/Cu(I)determined copper can easily oxidized some substrates such as superoxide, phenols<sup> [1] </sup>.And that’s why several enzymes involving in some vital processes such as photosynthesis, respiration adopt copper to transfer electrons. Moreover some arthropods and molluscs even utilizes a kind of copper protein, hemocyanin, to deliver deoxygen instead of known hemoglobin.</p>
-
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
    <h1>The copper contamination.</h1>
-
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
    <p>Today, from a spoon to a skyscraper, the uses of copper is extending everywhere. For meeting the increasing demand of copper in the world, the massive copper ores are mined every year [Figure 2.1.1].</p>
-
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
     <div style="text-align:center"><img src="https://static.igem.org/mediawiki/2014/2/25/FH1.png" /></div>
-
  </ol>
+
    <p>And most copper is mined as copper sulfides such as chalcopyrite.Those type of mines are more likely to produce acid mine drainage (AMD) which refers to the outflow of acidic water from metal mines or coal mines [Figure 2.1.2].</p>
-
  <div class="carousel-inner" role="listbox">
+
<div style="text-align:center"><img src="https://static.igem.org/mediawiki/2014/3/34/F2.png" /></div>
-
    <div class="item active text-center"> <img src="https://static.igem.org/mediawiki/2014/d/d3/Njau_slide1.jpg" alt="First slide" class="text-center">
+
    <p>The specific process of generating AMD includes three chemical reactions:</p>
-
      <div class="container">
+
    <p>The oxidization of pyrite which is iron-sulfide is primary contributor to AMD, the major process is:</p>
-
        <div class="carousel-caption">
+
    <p>2FeS<sub>2</sub>(s) + 7O<sub>2</sub>(g) + 2H<sub>2</sub>O(l) = 2Fe<sup>2+</sup>(aq) + 4SO<sub>4</sub><sup>2−</sup>(aq) + 4H<sup>+</sup>(aq)</p>
-
          <h1>Example headline.</h1>
+
    <p>The ferrous iron (II) generated from oxidization of pyrite is oxidized to ferric iron(III).<p>
-
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
+
    <p>4Fe<sup>2+</sup> (aq) + O<sub>2</sub> (g) + 4H<sup>+</sup> (aq) = 4Fe<sup>3+</sup>(aq) + 2H<sub>2</sub>O(l)</p>
-
          <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Sign up today</a></p>
+
    <p>And another process happens simultaneously with oxidization of pyrite and need to be catalyzed by microbes.</p>
-
        </div>
+
     <p>FeS<sub>2</sub> (s) + 14Fe<sup>3+</sup> (aq) + 8H<sub>2</sub>O(l) = 15Fe<sup>2+</sup> (aq) + 2 SO<sub>4</sub><sup>2−</sup> (aq) + 16H<sup>+</sup> (aq)</p>
-
      </div>
+
    <p>Those reactions jointly lower the PH of water and produce soluble ferric iron(III),and finally the acid mine drainage emerges [Figure 2.1.3].</p>
-
     </div>
+
     <div style="text-align:center"><img src="https://static.igem.org/mediawiki/2014/9/96/F3.png" /></div>
-
    <div class="item text-center"> <img src="https://static.igem.org/mediawiki/2014/2/24/Njau_slide2.jpg" alt="Second slide">
+
    <p>Associating with water and air, the metal mines where the ore is sulfide mineral or comprises pyrite can easily produce the highly acidic effusion. Usually the predominant metal ion isn’t iron but copper, zinc. The most common ore mined is chalcopyrite which is a copper-iron-sulfide and occurs with a range of other sulfides. Thus, copper mines are primary crime of AMD.</p>
-
      <div class="container">
+
    <h1>Copper tolerance of <i>E.coli</i>.</h1>
-
        <div class="carousel-caption">
+
    <p>Massive mining and extensive using of copper results in serious contamination to environment, and then copper contamination threaten the balance of the whole ecosystem. Even the low concentration of copper is toxic to the organism  <a href="https://2014.igem.org/Team:NJAU_China/Wet_Labs"><b>(Look at our algae experiment.)</b></a></td></p>  
-
          <h1>Another example headline.</h1>
+
    <p>But there is an exception, <i>Escherichia coli</i> ,which has several sophisticated and powerful systems to maintain the copper homeostasis so it can survive in skyhigh concentration <a href="https://2014.igem.org/Team:NJAU_China/Wet_Labs"><b>(Look at our MIC(minimum inhibitory concentration, MIC)experiment)</b></a></td>. Basing on this characteristic of <i>E.coli</i>, we start to design an bio-machine to solve the problem of copper contamination effectively.</p>
-
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
    <h3>Refrences:</h3>
-
          <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Learn more</a></p>
+
    <p>[1] Rensing, C., & Grass, G. (2003). Escherichia coli mechanisms of copper homeostasis in a changing environment. FEMS microbiology reviews,27(2‐3), 197-213.</p>
-
        </div>
+
    <p>All Pictures come from Wikipedia.</p>
-
      </div>
+
-
    </div>
+
-
    <div class="item text-center"> <img src="https://static.igem.org/mediawiki/2014/6/62/Njau_slide3.jpg" alt="Third slide">
+
-
      <div class="container">
+
-
        <div class="carousel-caption">
+
-
          <h1>One more for good measure.</h1>
+
-
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
-
          <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Browse gallery</a></p>
+
-
        </div>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
+
-
<!-- /.carousel -->  
+
-
 
+
-
<!-- Marketing messaging and featurettes
+
-
    ================================================== -->  
+
-
<!-- Wrap the rest of the page in another container to center all the content. -->
+
-
 
+
-
<div class="container marketing">  
+
-
 
+
-
  <!-- START THE FEATURETTES -->
+
-
 
+
-
  <hr class="featurette-divider">
+
-
  <div class="row featurette">
+
-
    <div class="col-md-7">
+
-
      <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
+
-
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
-
     </div>
+
-
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
+
-
  </div>
+
-
  <hr class="featurette-divider">
+
-
  <div class="row featurette">
+
-
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
+
-
    <div class="col-md-7">
+
-
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
+
-
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
-
     </div>
+
-
  </div>
+
-
  <hr class="featurette-divider">
+
-
  <div class="row featurette">
+
-
    <div class="col-md-7">
+
-
      <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+
-
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
-
    </div>
+
-
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
+
-
  </div>
+
-
  <hr class="featurette-divider">
+
-
 
+
-
  <!-- /END THE FEATURETTES -->  
+
-
 
+
-
  <!-- FOOTER -->
+
-
  <footer>
+
-
    <p class="pull-right"><a href="#">Back to top</a></p>
+
-
    <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+
-
  </footer>
+
</div>
</div>
-
<!-- /.container -->
 
-
<!-- Bootstrap core JavaScript
 
-
    ================================================== -->
 
-
<!-- Placed at the end of the document so the pages load faster -->
 
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
</body>
</body>
</html>
</html>

Latest revision as of 23:07, 17 October 2014

Home

Copper has existed on earth since the birth of this planet, which is an essential element for creatures because of its special chemical property and function. Besides, as a critical material, it has been utilized by human for a long time as large amount of copper is mined, processed and applied to our life. However, many a "copper-made" is abandoned nowadays, which leads to the accumulation of copper ion in fresh water and other places, resulting in jeopardizing the copper cycle on earth. Once the concentration reaches a high level then it will become destructive and cannot be cleared by ecosystem itself, causing the phenomenon what we called “copper contamination”.

Copper is indispensable for life.

Generally, the chemical property of copper was embodied by transformation between its redox states, Cu(II)and Cu(I).The redox potential Cu(II)/Cu(I)determined copper can easily oxidized some substrates such as superoxide, phenols [1] .And that’s why several enzymes involving in some vital processes such as photosynthesis, respiration adopt copper to transfer electrons. Moreover some arthropods and molluscs even utilizes a kind of copper protein, hemocyanin, to deliver deoxygen instead of known hemoglobin.

The copper contamination.

Today, from a spoon to a skyscraper, the uses of copper is extending everywhere. For meeting the increasing demand of copper in the world, the massive copper ores are mined every year [Figure 2.1.1].

And most copper is mined as copper sulfides such as chalcopyrite.Those type of mines are more likely to produce acid mine drainage (AMD) which refers to the outflow of acidic water from metal mines or coal mines [Figure 2.1.2].

The specific process of generating AMD includes three chemical reactions:

The oxidization of pyrite which is iron-sulfide is primary contributor to AMD, the major process is:

2FeS2(s) + 7O2(g) + 2H2O(l) = 2Fe2+(aq) + 4SO42−(aq) + 4H+(aq)

The ferrous iron (II) generated from oxidization of pyrite is oxidized to ferric iron(III).

4Fe2+ (aq) + O2 (g) + 4H+ (aq) = 4Fe3+(aq) + 2H2O(l)

And another process happens simultaneously with oxidization of pyrite and need to be catalyzed by microbes.

FeS2 (s) + 14Fe3+ (aq) + 8H2O(l) = 15Fe2+ (aq) + 2 SO42− (aq) + 16H+ (aq)

Those reactions jointly lower the PH of water and produce soluble ferric iron(III),and finally the acid mine drainage emerges [Figure 2.1.3].

Associating with water and air, the metal mines where the ore is sulfide mineral or comprises pyrite can easily produce the highly acidic effusion. Usually the predominant metal ion isn’t iron but copper, zinc. The most common ore mined is chalcopyrite which is a copper-iron-sulfide and occurs with a range of other sulfides. Thus, copper mines are primary crime of AMD.

Copper tolerance of E.coli.

Massive mining and extensive using of copper results in serious contamination to environment, and then copper contamination threaten the balance of the whole ecosystem. Even the low concentration of copper is toxic to the organism (Look at our algae experiment.)

But there is an exception, Escherichia coli ,which has several sophisticated and powerful systems to maintain the copper homeostasis so it can survive in skyhigh concentration (Look at our MIC(minimum inhibitory concentration, MIC)experiment). Basing on this characteristic of E.coli, we start to design an bio-machine to solve the problem of copper contamination effectively.

Refrences:

[1] Rensing, C., & Grass, G. (2003). Escherichia coli mechanisms of copper homeostasis in a changing environment. FEMS microbiology reviews,27(2‐3), 197-213.

All Pictures come from Wikipedia.