Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
{{Team:Calgary/Main_Header|home}}
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
 
 +
<html>
 +
 
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<script type="text/javascript">
-
<title>无标题文档</title>
+
$(document).ready(function(){
-
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
+
-
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
+
$('#promoter').hover(
 +
function(){
 +
$('#subdefault').hide();
 +
$('#subpromoter').show();
 +
},
 +
function(){
 +
$('#subpromoter').hide();
 +
$('#subdefault').show();
 +
});
 +
 +
$('#reporter').hover(
 +
function(){
 +
$('#subdefault').hide();
 +
$('#subreporter').show();
 +
},
 +
function(){
 +
$('#subreporter').hide();
 +
$('#subdefault').show();
 +
});
-
<style type="text/css">
+
$('#chassis').hover(
-
#schoolbadge {
+
function(){
-
position:absolute;
+
$('#subdefault').hide();
-
width:50px;
+
$('#subchassis').show();
-
height:50px;
+
},
-
z-index:4;
+
function(){
-
left:100px;
+
$('#subchassis').hide();
-
top:3px;
+
$('#subdefault').show();
-
padding-left:20px;
+
});
-
font-size:30px;
+
-
color: #006dab;
+
-
font-family:Tahoma, Geneva, sans-serif;
+
-
text-align:center;
+
-
}
+
});
-
#leftnavig {
+
</script>
-
position:absolute;
+
 
-
width:145px;
+
<style>
-
height:115px;
+
 
-
z-index:2;
+
h1, h2, h3, h4, h5{
-
left: 100px;
+
text-decoration: none;
-
top: 55px;
+
border: 0;
}
}
-
#titlebar {
+
#titlebar{
-
font-size: 13px;
+
position: relative;
-
color: #006DAB;
+
margin-top: 0px;
-
background-image: url(pictures/index.png);
+
margin-left: 30px;
-
background-repeat: no-repeat;
+
-
position: absolute;
+
z-index: 1;
z-index: 1;
-
width: 900px;
 
-
left: 245px;
 
-
top: 55px;
 
-
display: table;
 
-
letter-spacing: 0px;
 
}
}
-
#photo {
+
 
-
position:absolute;
+
#pagetitle{
-
width:840px;
+
position: relative;
-
height:100px;
+
color: white;
-
z-index:3;
+
margin-left: 50px;
-
left:245px;
+
margin-top: -45px;
-
top:80px;
+
z-index: 1;
-
visibility:inherit;
+
width: 600px;
-
padding:30px;
+
}
 +
 
 +
#box1{
 +
margin-top: 24px;
 +
}
 +
#box1 img.boxtop1{
 +
position: relative;
 +
margin-left: 30px;
 +
margin-top: -25px;
}
}
-
#description {
+
 
-
position: absolute;
+
#box1 img.boxbottom1{
-
width:840px;
+
position: relative;
-
left: 245px;
+
margin-left: 30px;
-
top: 210px;
+
margin-top: -6px;
-
margin:30px;
+
-
table-layout:fixed;
+
-
height:350px;
+
-
overflow: scroll;
+
}
}
-
</style>
 
 +
#box1pwrap{
 +
background-image: url(https://static.igem.org/mediawiki/2011/5/5c/UCalgary_MainPageBox1Repeater.png);
 +
background-repeat: repeat-y;
 +
width: 600px;
 +
height: 250px;
 +
margin-left: 30px;
 +
margin-top: -4px;
 +
padding-right: 155px;
 +
}
 +
 +
#box1 p{
 +
padding-left: 20px;
 +
padding-top: 15px;
 +
padding-bottom: 2px;
 +
float: left;
 +
width: 560px;
 +
color: black;
 +
}
 +
 +
#likebutton{
 +
float: left;
 +
margin-left: 30px;
 +
margin-top: -270px;
 +
}
 +
 +
#twitterwidget{
 +
float: left;
 +
margin-top: -670px;
 +
padding-left: 30px;
 +
}
 +
 +
#box2{
 +
background-image: url(https://static.igem.org/mediawiki/2011/0/09/UCalgary_MainPageBox2Repeater.png);
 +
background-repeat: repeat-y;
 +
margin-left: 80px;
 +
margin-top: -160px;
 +
padding-bottom: 80px;
 +
}
 +
 +
#box2 h2{
 +
margin-top: -20px;
 +
padding-top: 40px;
 +
padding-left: 19px;
 +
}
 +
 +
#box2 p{
 +
width: 500px;
 +
padding-left: 20px;
 +
color: black;
 +
}
 +
 +
#chassis{
 +
position: absolute;
 +
background-image: url(https://static.igem.org/mediawiki/2011/d/d8/UCalgary2011_MainPageBacterialChassis.png);
 +
width: 400px;
 +
height: 206px;
 +
background-position: top;
 +
text-indent: -99999px;
 +
z-index: 1;
 +
margin-top: 75px;
 +
margin-left: 30px;
 +
}
 +
 +
#chassis:hover{
 +
background-position: bottom;
 +
}
 +
 +
#circuit{
 +
position: absolute;
 +
z-index: 2;
 +
margin-top: 170px;
 +
margin-left: 100px;
 +
}
 +
 +
#promoter{
 +
position: absolute;
 +
background-image: url(https://static.igem.org/mediawiki/2011/1/1d/UCalgary2011_MainPageBacterialPromoter.png);
 +
width: 90px;
 +
height: 44px;
 +
background-position: top;
 +
text-indent: -99999px;
 +
z-index: 3;
 +
margin-top: 155px;
 +
margin-left: 80px;
 +
}
 +
 +
#promoter:hover{
 +
background-position: bottom;
 +
}
 +
 +
#reporter{
 +
position: absolute;
 +
background-image: url(https://static.igem.org/mediawiki/2011/3/3b/UCalgary2011_MainPageBacterialGene.png);
 +
width: 90px;
 +
height: 53px;
 +
background-position: top;
 +
text-indent: -99999px;
 +
z-index: 4;
 +
margin-top: 150px;
 +
margin-left: 205px;
 +
}
 +
 +
#reporter:hover{
 +
background-position: bottom;
 +
}
 +
 +
#sensorimage{
 +
margin-left: 40px;
 +
margin-top: 20px;
 +
}
 +
 +
#pulloutbox{
 +
position: absolute;
 +
margin-left: -75px;
 +
margin-top: 60px;
 +
}
 +
 +
 +
 +
#box3{
 +
position: relative;
 +
margin-left: 230px;
 +
margin-top: -20px;
 +
}
 +
 +
#box3 p, table{
 +
background-image: url(https://static.igem.org/mediawiki/2011/2/29/UCalgary_MainPageBox3Repeater.png);
 +
background-repeat: repeat-y;
 +
width: 673px;
 +
padding-left: 85px;
 +
padding-right: 20px;
 +
}
 +
 +
#box3 table tr td{
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
padding-top: 10px;
 +
padding-bottom: 10px;
 +
margin: 0;
 +
}
 +
 +
#notsmalltable tr td img{
 +
width: 240px;
 +
}
 +
 +
#smalltable{
 +
padding-left: 85px;
 +
padding-right: 35px;
 +
width: 650px;
 +
}
 +
 +
#smalltable tr td img{
 +
width: 155px;
 +
padding-top: 10px;
 +
padding-bottom: 5px;
 +
padding-left: 10px;
 +
}
 +
 +
 +
#box3 h2{
 +
background-image: url(https://static.igem.org/mediawiki/2011/2/29/UCalgary_MainPageBox3Repeater.png);
 +
background-repeat: repeat-y;
 +
padding-left: 95px;
 +
padding-bottom: 20px;
 +
margin-bottom: -5px;
 +
}
 +
 +
#box4{
 +
background-image:url(https://static.igem.org/mediawiki/2011/2/26/UCalgary_MainPageBox4.png);
 +
width: 314px;
 +
height: 264px;
 +
position: relative;
 +
margin-left: 620px;
 +
margin-top: -110px;
 +
}
 +
 +
#box4 div h3, #box4 div p{
 +
color: white;
 +
margin-left: 15px;
 +
margin-right: 10px;
 +
}
 +
#box4 div h3{
 +
padding-top: 15px;
 +
}
 +
 +
#subdefault{
 +
display:block;
 +
}
 +
#subpromoter{
 +
display:none;
 +
}
 +
#subreporter{
 +
display:none;
 +
}
 +
#subchassis{
 +
display:none;
 +
}
 +
 +
 +
</style>
</head>
</head>
<body>
<body>
-
<div id="schoolbadge"><img src="https://static.igem.org/mediawiki/2012/6/67/Schoolbadge.gif" width="100%"  /></div>
+
<a style="position: absolute; float: right; margin-left: 788px; margin-top: 11px;" href="https://2011.igem.org/Team:Calgary/Notebook/PostRegionals"><img style="width: 150px;" src="https://static.igem.org/mediawiki/2011/0/0d/UCalgary2011_Fred_Flag.png"></img></a>
-
<div id="leftnavig"><table border="0" cellspacing="0" cellpadding="0" background="https://static.igem.org/mediawiki/2012/a/a2/Left-navigbar.png"  width="100%">
+
<a style="position: relative; float: right; left: -46px; margin-top: 75px;" href="https://2011.igem.org/Team:Calgary/Project/DataPage"><img style="width: 150px;" src="https://static.igem.org/mediawiki/2011/7/7f/UCalgary2011_Fred_Data_Page.png"></img></a>
-
    <tr>
+
<div id="box1">
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Project description</td>
+
<img id="titlebar" src="https://static.igem.org/mediawiki/2011/4/42/UCalgary_TitleBar.png"></img>
-
    </tr>
+
<h1 id="pagetitle">Welcome!</h1>
-
    <tr>
+
<img class="boxtop1" src="https://static.igem.org/mediawiki/2011/c/cf/UCalgary_MainPageBox1.png"></img>
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Main results</td>
+
<div id="box1pwrap">
-
    </tr>
+
<p>
-
    <tr>
+
This year, the University of Calgary iGEM team aims to build a biosensor for naphthenic acids (NAs). NAs are organic acids that are toxic to terrestrial and aquatic wildlife. Because they are waste products of the bitumen extraction process that mines petroleum from the Alberta oil sands, the accumulation of NAs in the on-site settling ponds (tailings ponds) is an environmental concern requiring constant monitoring and eventual remediation. In addition to harming the environment, NAs also contribute to refinery equipment corrosion, directly increasing maintenance and replacement costs. Currently, sophisticated and expensive procedures, such as Fourier Transform Infrared Spectrometer (FTIR) or gas chromatography-mass spectrometry, are needed to identify and assess NA concentrations in the environment. A bacterial sensor, if developed, could greatly improve the cost- and time-efficiency of NA detection, and facilitate a workable approach for remediation.
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data</td>
+
</p>
-
    </tr>
+
</div>
-
    <tr>
+
<img class="boxbottom1" src="https://static.igem.org/mediawiki/2011/1/11/UCalgary_MainPageBox1Bottom.png"></img>
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Protocals</td>
+
</div>
-
    </tr>
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team members</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td><img src="https://static.igem.org/mediawiki/2012/a/a5/Leftbar.png" alt="pictures/leftbar.png" width="145" /></td>
+
-
    </tr>
+
-
  </table></div>
+
-
<ul id="titlebar" class="MenuBarHorizontal" style="background:url(pictures/navigbar.png) ;">
+
-
  <li><a href="#https://2012.igem.org/Team:XMU-China">Home</a></li>
+
-
  <li><a class="MenuBarItemSubmenu" href="#" >Team</a>
+
-
    <ul>
+
-
      <li><a href="#">Instructors</a></li>
+
-
      <li><a href="#">Advisors</a></li>
+
-
      <li><a href="#">Team members</a></li>
+
-
      <li><a href="#">Acknowledgement</a></li>
+
-
      <li><a href="#">Collaborations</a></li>
+
-
      <li><a href="#">Our city&amp;Our university</a></li>
+
-
    </ul>
+
-
  </li>
+
-
    <li><a class="MenuBarItemSubmenu" href="#" >Project</a>
+
-
    <ul>
+
-
      <li><a href="#">Background
+
-
      (Approach/
+
-
      Program)</a></li>
+
-
      <li><a href="#">Section A</a></li>
+
-
      <li><a href="#">Section B</a></li>
+
-
      <li><a href="#">Accomplishment</a></li>
+
-
      <li><a href="#">Data page</a></li>
+
-
      <li><a href="#">Future plan</a></li>
+
-
      <li><a href="#">Reference</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li><a class="MenuBarItemSubmenu" href="#">Parts</a>
+
-
    <ul>
+
-
      <li><a href="#">Parts submitted</a></li>
+
-
      <li><a href="#">Attrivutions</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li><a class="MenuBarItemSubmenu" href="#">Notebook</a>
+
-
    <ul>
+
-
      <li><a href="#">Brainstorm</a></li>
+
-
      <li><a href="#">Wet lab journal</a></li>
+
-
      <li><a href="#">Protocols</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li><a href="#">Safety</a></li>
+
-
  <li><a class="MenuBarItemSubmenu" href="#">HumanPractice</a>
+
-
    <ul>
+
-
      <li><a href="#">Exhibition</a></li>
+
-
      <li><a href="#">Communication</a></li>
+
-
    </ul>
+
-
  <li><a href="#https://2012.igem.org">iGEM</a></li>
+
-
  </li>
+
-
</ul>
+
-
<!--<div id="photo"><img src="" alt="放图~" name="用来放图~" width="100%" height="100%"  id="photo2"  /></div> -->
+
<div id="box4">
 +
<div id="subdefault">
 +
<h3>Our Naphthenic Acid Biosensor</h3>
 +
<p><br><br>A detailed description of our project can be seen <a style="color:#42ffd9;" href="https://2011.igem.org/Team:Calgary/Project">here</a>! Below is a picture of what our final product will look like. We will have our biosensing bacterium in a container that the sample to be measured can be added to.</p><br><br><p style="font-size: 14px;"><b>Roll over the bacterium below!</b></p>
 +
</div>
-
<div id="description"><table width="100%" border="0" cellspacing="0" cellpadding="0" >
+
<div id="subpromoter">
-
<tr>
+
<h3>An NA-Sensitive Promoter</h3>
-
<p>Description</p>
+
<p>The most critical component of our biosensor is a naphthenic acid sensory element. This would likely be a promoter element. The major challenge for this was that given the lack of available information on NA degradation, there was no NA sensitive promoter available in the literature for us to use. We needed to develop methods to search for such an element. These included our novel “fishing” method as well as our bioinformatics approach. Click on the promoter to learn more about this!</p>
-
<hr />
+
</div>
-
</tr>
+
-
  <tr>
+
<div id="subreporter">
-
    <td><img src="https://static.igem.org/mediawiki/2012/c/cd/Fig2.png" width="108" height="168" /></td>
+
<h3>An Electrochemical Reporter</h3>
-
    <td><p>&nbsp;&nbsp;&nbsp;&nbsp;The aim of this study is to construct a fluorescent digital display device of genetic circuits with synthetic logic gates. The finished device will display and switch numbers. Similar to electronic circuits, logic regulation operation in cells integrates the extracellular and intracellular signals. We assemble several pairs of promoters and their activators (or repressors) into computing building block of the circuit: <I>P<font size="1px">BAD</font></I>-Arabinose,<I>P<font size="1px">cI</font></I>-CI, and <I>P<font size="1px">tetR</font></I>-TetR. These computation units act as genetic logic gates perform AND, OR and NOT gates function. In order to light up our digital numbers, we put Green Fluorescent Protein (GFP) in the downstream expression, which is ubiquitous in the field of biological signal protein. Considering that the common types of GFP usually tend to be very stable and hard to "quench", we choose unstable GFP to make our device reusable and convert in a fast speed. This unstable GFP is tagged with a C-terminal extension, which will be recognized and degraded by tail-specific proteases, leading to a short half-life and fast degradation of the protein. Degradation rate should be confined at a suitable range, otherwise the device would either have no light or take a long time to change numbers. </a><br />
+
<p>We need a reliable reporter for our system. Given the highly variable and often turbid nature of oil sands tailings ponds however, we needed a special kind of reporter. We chose to use the <i>lacZ</i> gene, but characterize it as an electrochemical reporter. Click the gene to learn more!</p>
-
       
+
</div>
-
        &nbsp;&nbsp;&nbsp;&nbsp;Moreover, we intend to develop a unique display device in such a way that each unit lights up one after another. To meet the challenge, we set out to engineer a series of cells with variable time-delayed expression characters under the inspiration of Feed Forward Loops (FFLs) in transcription network. As shown in Figure 1, both X and Y are transcriptional activators of coherent type 1 FFL with "AND-gate" function. When signal Sx appears, X becomes active and stimulates the downstream promoters, which are capable of inducing the production of Y and Z. Due to the "AND gate" function, Z starts to accumulate only when Y yields at a threshold. By controlling the Y production and the activation threshold for the <I>Z</I> promoter, we can alter the duration of time-delay in the expression of GFP. Lux system will still play an important role based on our project last year. Promoter <I>luxpR</I> with various modifications in threshold will be created by site-directed mutagenesis.
+
-
        </a><br />
+
<div id="subchassis">
-
    </td>
+
<h3>A Suitable Chassis</h3>
-
</tr>
+
<p>We need a chassis in which to house our system. Given that we intended to get our sensory element from either <i>Pseudomonas</i> or microalgae, and that these organisms are both naturally present within tailings ponds, we chose to focus on them. As such, we contributed and characterized several parts for future work in microalgae, and to move plasmids efficiently from <i>E. coli</i> to <i>Pseudomonas</i>. Click the chassis to learn more!</p>
-
  </tr>
+
</div>
 +
</div>
 +
 
 +
<div id="box2">
 +
<h2>The Vision: A Naphthenic Acid Biosensor</h2>
 +
<p>We plan to create a relatively small, cheap biosensing device that can respond to naphthenic acids and produce an electrochemical output. Roll over the individual parts for more details.</p>
 +
 +
<img id="sensorimage" src="https://static.igem.org/mediawiki/2011/f/f8/UCalgary2011_MainPageDevice.png"></img>
 +
<img id="pulloutbox" src="https://static.igem.org/mediawiki/2011/b/b4/UCalgary2011_MainPageBacterialZoomBox.png"></img>
 +
<img id="circuit" src="https://static.igem.org/mediawiki/2011/8/80/UCalgary2011_BacterialCircuitBase.png"></img>
 +
<a id="promoter" href="https://2011.igem.org/Team:Calgary/Project/Promoter">Promoter</a>
 +
<a id="reporter" href="https://2011.igem.org/Team:Calgary/Project/Reporter">Reporter</a>
 +
<a id="chassis" href="https://2011.igem.org/Team:Calgary/Project/Chassis">Chassis</a>
</div>
</div>
-
<script type="text/javascript">
+
 
-
var MenuBar1 = new Spry.Widget.MenuBar("titlebar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
+
<div id="box3">
 +
<img class="boxtop3" src="https://static.igem.org/mediawiki/2011/2/22/UCalgary_MainPageBox3.png"></img>
 +
<h2>Our Sponsors</h2>
 +
<table id="notsmalltable">
 +
<tr>
 +
<td><a href="http://www.ucalgary.ca/"><img src="https://static.igem.org/mediawiki/2011/c/c1/UCalgary_UofCLogo.png"></img></a></td>
 +
<td><a href="http://www.albertatechfutures.ca/"><img src="https://static.igem.org/mediawiki/2011/3/3f/UCalgary2011_AITF_Logo_Small.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.osli.ca/"><img style="width: 510px;" src="https://static.igem.org/mediawiki/2011/d/da/UCalgary2011_OSLI_Banner_Logo_Small.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table id="smalltable" style="margin-top: -20px;">
 +
<tr>
 +
<td><a href="http://www.osrin.ualberta.ca/"><img src="https://static.igem.org/mediawiki/2011/9/9a/UCalgary_OSRIN_Logo.png"></img></a></td>
 +
<td><a href="http://www.neb.com/nebecomm/default.asp"><img src="https://static.igem.org/mediawiki/2011/d/d6/UCalgary_NEB_Logo.png"></img></a></td>
 +
<td><a href="http://www.ucalgary.ca/bhsc/"><img src="https://static.igem.org/mediawiki/2011/c/c7/UCalgary_BHSc_Logo.png"></img></a></td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://www.vwr.com/"><img src="https://static.igem.org/mediawiki/2011/6/65/UCalgary_VWR_Logo.png"></img></a></td>
 +
<td><a href="http://www.nexeninc.com/"><img src="https://static.igem.org/mediawiki/2011/a/a8/UCalgary_Nexen_Logo.png"></img></a></td>
 +
<td><a href="http://www.sarstedt.com/php/main.php"><img src="https://static.igem.org/mediawiki/2011/e/ee/UCalgary_Sarstedt_Logo.png"></a></img></td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://www.sigmaaldrich.com/canada-english.html?cm_mmc=Google_eBusiness-_-search-_-SIAL+Countries_Countries-_-sigma+aldrich+canada_BROAD&cm_guid=1-_-100000000000000025748-_-7408517799"><img src="https://static.igem.org/mediawiki/2011/8/8a/UCalgary_Sigma_Aldrich_Logo.png"></img></a></td>
 +
<td><a href="http://www.mhc.ab.ca/"><img src="https://static.igem.org/mediawiki/2011/7/78/UCalgary2011_Medicine_Hat_College_Logo.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<img class="boxbottom3" src="https://static.igem.org/mediawiki/2011/6/6c/UCalgary_MainPageBox3Bottom.png"></img>
 +
</div>
 +
 
 +
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
 +
<div id="twitterwidget">
 +
<script>
 +
new TWTR.Widget({
 +
  version: 2,
 +
  type: 'profile',
 +
  rpp: 5,
 +
  interval: 30000,
 +
  width: 250,
 +
  height: 300,
 +
  theme: {
 +
    shell: {
 +
      background: '#006ebd',
 +
      color: '#ffffff'
 +
    },
 +
    tweets: {
 +
      background: '#003961',
 +
      color: '#ffffff',
 +
      links: '#42ffd9'
 +
    }
 +
  },
 +
  features: {
 +
    scrollbar: true,
 +
    loop: false,
 +
    live: false,
 +
    hashtags: true,
 +
    timestamp: true,
 +
    avatars: false,
 +
    behavior: 'all'
 +
  }
 +
}).render().setUser('iGEMCalgary').start();
</script>
</script>
 +
</div>
 +
 +
<a id="likebutton" href="http://www.facebook.com/pages/Calgary-iGEM/215971681759173">
 +
<img src="https://static.igem.org/mediawiki/2011/5/57/UCalgary_FacebookLikeButton_Small.png"></img>
 +
</a>
 +
</body>
</body>
 +
</html>
</html>

Revision as of 09:18, 30 July 2012

Template:Team:Calgary/Main Header

Welcome!

This year, the University of Calgary iGEM team aims to build a biosensor for naphthenic acids (NAs). NAs are organic acids that are toxic to terrestrial and aquatic wildlife. Because they are waste products of the bitumen extraction process that mines petroleum from the Alberta oil sands, the accumulation of NAs in the on-site settling ponds (tailings ponds) is an environmental concern requiring constant monitoring and eventual remediation. In addition to harming the environment, NAs also contribute to refinery equipment corrosion, directly increasing maintenance and replacement costs. Currently, sophisticated and expensive procedures, such as Fourier Transform Infrared Spectrometer (FTIR) or gas chromatography-mass spectrometry, are needed to identify and assess NA concentrations in the environment. A bacterial sensor, if developed, could greatly improve the cost- and time-efficiency of NA detection, and facilitate a workable approach for remediation.

Our Naphthenic Acid Biosensor



A detailed description of our project can be seen here! Below is a picture of what our final product will look like. We will have our biosensing bacterium in a container that the sample to be measured can be added to.



Roll over the bacterium below!

An NA-Sensitive Promoter

The most critical component of our biosensor is a naphthenic acid sensory element. This would likely be a promoter element. The major challenge for this was that given the lack of available information on NA degradation, there was no NA sensitive promoter available in the literature for us to use. We needed to develop methods to search for such an element. These included our novel “fishing” method as well as our bioinformatics approach. Click on the promoter to learn more about this!

An Electrochemical Reporter

We need a reliable reporter for our system. Given the highly variable and often turbid nature of oil sands tailings ponds however, we needed a special kind of reporter. We chose to use the lacZ gene, but characterize it as an electrochemical reporter. Click the gene to learn more!

A Suitable Chassis

We need a chassis in which to house our system. Given that we intended to get our sensory element from either Pseudomonas or microalgae, and that these organisms are both naturally present within tailings ponds, we chose to focus on them. As such, we contributed and characterized several parts for future work in microalgae, and to move plasmids efficiently from E. coli to Pseudomonas. Click the chassis to learn more!

The Vision: A Naphthenic Acid Biosensor

We plan to create a relatively small, cheap biosensing device that can respond to naphthenic acids and produce an electrochemical output. Roll over the individual parts for more details.

Promoter Reporter Chassis

Our Sponsors