Team:Dundee

From 2013.igem.org

(Difference between revisions)
 
(145 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Dundee/Templates/Navigationbar}}
 +
<html>
<html>
-
 
+
<html lang="en">
-
<!-- Adapted from -->
+
-
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+
-
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+
-
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+
-
<head>
+
-
  <meta charset="utf-8" />
+
-
 
+
-
  <!-- Set the viewport width to device width for mobile -->
+
-
  <meta name="viewport" content="width=device-width" />
+
-
 
+
-
  <title>Dundee iGem 2012</title>
+
    
    
-
<style type="text/css">
+
<!-- Begin page content -->
 +
<div class="container">
 +
      <div class="span12" style="margin-left:0px;margin-top: 10px;">
-
  /* These styles create the dropdown menus. */
+
            <!-- a very basic slider, note the structure of each item. you can add too but not take away (classes and id's that is) -->
-
 
+
            <div id="slider" class="carousel slide">
-
.nav-bar { height: 40px; background: #4d4d4d; margin-left: 0; margin-top: 20px; padding: 0; }
+
-
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid #333333; border-right: none; line-height: 38px; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; z-index: 1000}
+
-
.nav-bar > li:first-child { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
+
-
.nav-bar > li:last-child { border-right: solid 1px #333333; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); }
+
-
.nav-bar > li.active { background: #2ba6cb; border-color: #2284a1; }
+
              <div class="carousel-inner">
-
.nav-bar > li.active > a { color: white; cursor: default; }
+
                <div class="item active"><!-- add the active class to any slider you want shown first -->
-
.nav-bar > li.active:hover { background: #2ba6cb; cursor: default; }
+
                  <img src="https://static.igem.org/mediawiki/2013/thumb/1/1e/BannerToximop.jpg/800px-BannerToximop.jpg" style="width:100%;height:100%">
 +
                </div>
-
.nav-bar > li:hover { background: #333333; }
+
                <div class="item"><!-- add the active class to any slider you want shown first -->
-
.nav-bar > li > a { color: #e6e6e6; }
+
                  <img src="https://static.igem.org/mediawiki/2013/thumb/a/a4/Algal_Bloom3.jpg/800px-Algal_Bloom3.jpg" style="width:100%;height:100%">
-
.nav-bar > li ul { margin-bottom: 0; }
+
                </div>
-
.nav-bar > li .flyout { display: none; }
+
-
.nav-bar > li.has-flyout > a:first-child { padding-right: 40px; position: relative; }
+
-
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #e6e6e6 transparent transparent transparent; position: absolute; right: 20px; top: 17px; }
+
-
.nav-bar > li.has-flyout > a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 20px; z-index: 2; display: block; }
+
-
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 55px; }
+
-
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #666; }
+
-
.nav-bar > li > a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: 14px; }
+
-
.nav-bar > li > input { margin: 0 10px; }
+
-
.nav-bar.vertical { height: auto; margin-top: 0; }
+
-
.nav-bar.vertical > li { float: none; border-bottom: none; border-right: solid 1px #333333; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+
-
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #e6e6e6; }
+
-
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
+
-
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }
+
-
.nav-bar.vertical > li.active { border-right: solid 1px #2284a1; }
+
-
.nav-bar.vertical > li:last-child { border-bottom: solid 1px #333333; }
+
-
+
-
ul#subnavlist { display: none; }
+
-
ul#subnavlist li { float: none; }
+
-
ul#subnavlist li a
 
-
{
 
-
padding: 0px;
 
-
margin: 0px;
 
-
font-size:16px;
 
-
}
 
-
ul.nav-bar li:hover ul#subnavlist
+
                <div class="item"><!-- add the active class to any slider you want shown first -->
-
{
+
                  <img src="https://static.igem.org/mediawiki/2013/thumb/2/25/Solution3.jpg/800px-Solution3.jpg" style="width:100%;height:100%">
-
display: block;
+
                </div>
-
position: absolute;
+
              </div>
-
font-size: 8pt;
+
-
padding-top: 5px;
+
-
}
+
-
ul.nav-bar li:hover ul#subnavlist li a
+
              <!-- the controls for our sliders -->
-
{
+
              <a class="left carousel-control " href="#slider" data-slide="prev">&lsaquo;</a>
-
display: block;
+
              <a class="right carousel-control " href="#slider" data-slide="next">&rsaquo;</a>
-
width: 10em;
+
-
border: none;
+
-
padding: 2px;
+
-
padding-left: 10px;
+
-
padding-bottom: 5px;
+
-
padding-top: 5px;
+
-
}
+
-
ul.nav-bar li:hover ul#subnavlist li a:before { content: "    "; }
+
            </div>
 +
      </div>
-
ul.nav-bar li a:active
+
      <div class="row">
-
{
+
      <!-- the main content -->
-
color: #cccccc;
+
-
border: 1px #ffffff inset;
+
-
background: #2ba6cb;
+
-
border-color: #2284a1;
+
-
z-index:1000;
+
-
}
+
-
   
+
        <div class="span6" style="text-align:justify">
-
</style>
+
        <h2 style="margin-top:-10px;"> Targeting a Deadly Toxin</h2>
-
+
-
  <!-- Included CSS Files -->
+
-
  <link rel="stylesheet" href="http://kyleharrison.co.uk/css/igemMain.css" >
+
-
</head>
+
        <p>
-
<body>
+
        Explosions in the population of cyanobacteria can produce toxic algal blooms. Microcystin-LR the most potent and common algal bloom toxin, binds Protein Phosphatase 1. The average cyanobacteria infested lake in America contains over 1000 times the Microcystin safe drinking water limit set by the World Health Organisation. <br><br>
-
<div class="row">
+
        Concerned by a harmful algal bloom in the local community, we used synthetic biology to target the toxin. We exploited the mechanism of Microcystin's toxicity to develop our Mop; by expressing Protein Phosphatase 1 we can mop up Microcystin. The interaction was also the basis for developing a biological Detector. To deploy our Detector and to consider the root causes of algal blooms we created the electronic Moptopus. It sits on a lake and monitors conditions relevant to cyanobacterial growth to help predict future blooms.
-
<div class="twelve columns">
+
        </p>
-
<!-- Temporary Fix -->
+
-
<div style ="margin-bottom:-15px;margin-top:5px">
+
-
<!--<img src="http://placehold.it/1000x100&text=iGem Dundee 2013">-->
+
-
<img src="https://static.igem.org/mediawiki/2013/2/2d/DundeeBaner.jpg">
+
-
</div>
+
-
</div>
+
-
</div>
+
-
  <div class="row">
+
        <br>
-
    <div class="twelve columns">
+
        </div>
-
       <!-- Navigation -->
+
        <div class="span6" style="padding-top:40px" >
 +
              <iframe src="http://player.vimeo.com/video/69609812?color=c9ff23" width="460" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 +
          </div>
 +
       </div><!-- Row End -->
-
<ul class="nav-bar">
 
-
          <li class="active"><a href="/Team:Dundee">Home</a></li>
 
-
 
 
-
          <li id="active"><a href="#" id="current">Team</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">About Us</a></li>
 
-
<li><a href="#">Team Information</a></li>
 
-
<li><a href="#">Gallery</a></li>
 
-
<li><a href="#">Acknowledgements</a></li>
 
-
<li><a href="#">Attributions</a></li>
 
-
<li><a href="#">Contact</a></li>
 
-
</ul>
 
-
 
-
<li id="active"><a href="/Team:Dundee/Team" id="current">Project</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">Overview</a></li>
 
-
<li><a href="#">Data Page</a></li>
 
-
<li><a href="#">Lab</a></li>
 
-
<li><a href="#">Modelling</a></li>
 
-
<li><a href="#">Software</a></li>
 
-
<li><a href="#">Notebook</a></li>
 
-
</ul>
 
-
 
 
-
  <li id="active"><a href="/Team:Dundee/Parts" id="current">Parts</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">Our Biobricks</a></li>
 
-
<li><a href="#">Improvements</a></li>
 
-
<li><a href="#">In Development</a></li>
 
-
</ul>
 
-
 
-
  <li id="active"><a href="/Team:Dundee/Safety" id="current">Safety</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">General Safety</a></li>
 
-
<li><a href="#">In The Lab</a></li>
 
-
<li><a href="#">Public Safety</a></li>
 
-
<li><a href="#">Enviroment</a></li>
 
-
</ul>
 
-
 
-
  <li id="active"><a href="/Team:Dundee/HumanPractice" id="current">Human Practice</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">Overview</a></li>
 
-
<li><a href="#">Media Channel</a></li>
 
-
<li><a href="#">Outreach</a></li>
 
-
<li><a href="#">Presentations</a></li>
 
-
<li><a href="#">Collaboration</a></li>
 
-
<li><a href="#">Comic</a></li>
 
-
<li><a href="#">Game</a></li>
 
-
<li><a href="#">Survey</a></li>
 
-
<li><a href="#">Blog</a></li>
 
-
</ul>
 
-
 
-
  <li id="active"><a href="/Team:Dundee/Sponsors" id="current">Sponsors</a>
 
-
<ul id="subnavlist">
 
-
<li id="subactive"><a href="#" id="subcurrent">Our Sponsors</a></li>
 
-
<li><a href="#">Sponsorship Levels</a></li>
 
-
<li><a href="#">Public Safety</a></li>
 
-
<li><a href="#">Enviroment</a></li>
 
-
</ul>
 
-
        </ul>
 
-
      <!-- End Navigation -->
+
<!--
 +
      <div class="row" style="padding-bottom:20px">
 +
      <div class="span6">text</div>
 +
      <div class="span6"><img src="https://static.igem.org/mediawiki/2013/c/cc/Digi-Poster-Ad-Dundee.jpg"></div>
 +
      </div>
 +
-->
-
       <!-- Header Content -->
+
       <!-- Row Three -->
 +
      <div class="row">
-
         <div class="row">
+
      <div class="span3" style="height:275px">
 +
         <div id="mainwrapper">
 +
        <a href="https://2013.igem.org/Team:Dundee/Project">
 +
                    <!-- Image Caption 6 -->
 +
              <div id="box-6" class="box">
 +
                <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c2/MOP-ICO-Dundee.jpg" style="width:220px;height:220px;"/>
 +
              <span class="caption scale-caption" style="text-align:justify">
 +
                          <p><b style="font-size:16px">Mop</b><br><br> Mopping up a toxin (microcystin) by engineering a bacterium to produce the human PP1 protein, the protein to which microcystin binds.</p>
 +
                </span>
 +
              </div>
 +
            </div> </a>
 +
      </div>
-
<!-- Left Panel -->
+
      <div class="span3" style="height:275px">
-
           <div class="six columns">
+
           <div id="mainwrapper">
-
 
+
        <a href="https://2013.igem.org/Team:Dundee/Project/Detector">
-
            <h3 class="show-for-small">Abstract<hr/></h3>
+
                  <!-- Image Caption 6 -->
-
 
+
             <div id="box-6" class="box">
-
             <div class="panel">
+
               <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c3/DETECTOR-ICO-Dundee.jpg" style="width:220px;height:220px;"/>
-
               <h4 class="hide-for-small">Website Under Construction<hr/></h4>
+
              <span class="caption scale-caption" style="text-align:justify">
-
            <h5 class="subheader">Algal blooms are an ever-growing problem in freshwater systems. The main concern is the level of toxin called microcystin, which is released by cyanobacteria when they die. Currently, the method of detection takes a day to produce results, so our aim as a team is to develop a 60 minute microcystin detection system, as well as a method to combat the rising levels of the toxin.</h5>
+
                          <p><b style="font-size:16px;">Detector</b><br><br> Detecting microcystin by manipulation of the <i>E. coli</i> osmoregulator EnvZ.</p>
 +
              </span>
             </div>
             </div>
-
 
+
           </div></a>
-
           <div class="row">
+
-
              <div class="six mobile-two columns">
+
-
                <div class="panel">
+
-
                  <h5>Catcher</h5>
+
-
                <h6 class="subheader">Praesent placerat dui tincidunt elit suscipit sed.</h6>
+
-
                <a href="#" class="small button">Read More!</a>
+
-
                </div>
+
-
              </div>
+
-
 
+
-
              <div class="six mobile-two columns">
+
-
                <div class="panel">
+
-
                  <h5>Cleaner</h5>
+
-
                <h6 class="subheader">Praesent placerat dui tincidunt elit suscipit sed.</h6>
+
-
                <a href="#" class="small button">Read More!</a>
+
-
                </div>
+
-
              </div>
+
-
   
+
-
          </div>
+
-
 
+
-
          </div>
+
-
 
+
-
  <!--Right Panel-->
+
-
  <div class="six columns">
+
-
+
-
<!-- Temporary Fix -->
+
-
<div style ="margin-bottom:22px">
+
-
<img src="http://placehold.it/500x327&text=Image">
+
-
</div>
+
-
+
-
<div class="panel">
+
-
<h5 class="subheader">Fusce ullamcorper mauris in eros dignissim molestie posuere felis blandit. Aliquam erat volutpat. Mauris ultricies posuere vehicula. Sed sit amet posuere erat. Quisque in ipsum non augue euismod dapibus non et eros. Pellentesque consectetur tempus mi iaculis.</h5>
+
-
</div>
+
-
+
-
 
+
-
             
+
-
              </div>
+
-
   
+
-
          </div>
+
-
+
-
+
-
+
-
          </div>
+
-
 
+
         </div>
         </div>
-
       <!-- End Header Content -->
+
       <div class="span3" style="height:275px">
-
 
+
        <div id="mainwrapper">
-
 
+
        <a href="https://2013.igem.org/Team:Dundee/Project/SoftwareTheory">
-
      <!-- Thumbnails -->
+
                  <!-- Image Caption 6 -->
-
 
+
            <div id="box-6" class="box">
-
        <div class="row">
+
              <img id="image-6" src="https://static.igem.org/mediawiki/2013/9/9f/MOPTOPUS-ICO-Dundee.jpg" style="width:220px;height:220px;"/>
-
 
+
              <span class="caption scale-caption" style="text-align:justify">
-
          <div class="twelve show-for-small columns">
+
                          <p><b style="font-size:16px;">Moptopus</b><br><br>  An electronic sensing device that provides a platform for toxin detection. It relates a range of environmental conditions to algal bloom formation and toxicity.</p>
-
          <h3>Header</h3><hr>
+
              </span>
 +
            </div>
 +
          </div></a>
         </div>
         </div>
-
          <div class="three mobile-two columns">
+
      <div class="span3" style="height:275px">
-
            <img src="http://placehold.it/250/C6E546/000000&text=Algae">
+
          <div id="mainwrapper">
-
             <div class="panel">
+
        <a href="https://2013.igem.org/Team:Dundee/HumanPractice">
-
              <p><b>Description</b> - Aliquam erat volutpat. Mauris ultricies et iusto odio dignissimos ducimus posuere vehicula.</p>
+
                  <!-- Image Caption 6 -->
-
            </div>
+
             <div id="box-6" class="box">
-
          </div>
+
              <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/ca/HMP-ICO-Dundee.jpg" style="width:220px;height:220px;"/>
 +
              <span class="caption scale-caption" style="text-align:justify">
-
          <div class="three mobile-two columns">
+
                          <p><b style="font-size:16px;">Human Practices</b><br><br>This project has been carried out in collaboration with the community. By informing, listening and responding to their input, our project is based around community defined need, and is not merely a technical exercise. </p>
-
            <img src="http://placehold.it/250/0699C1/000000&text=Ponds">
+
              </span>
-
            <div class="panel">
+
-
              <p><b>Description</b> - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
+
             </div>
             </div>
-
           </div>
+
           </div></a>
-
 
+
-
          <div class="three mobile-two columns">
+
-
            <img src="http://placehold.it/250/FEE685/000000&text=Problem">
+
-
            <div class="panel">
+
-
              <p><b>Description</b> - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
-
            </div>
+
-
          </div>
+
-
 
+
-
          <div class="three mobile-two columns">
+
-
            <img src="http://placehold.it/250/338C73/000000&text=Solution">
+
-
            <div class="panel">
+
-
              <p><b>Description</b> - Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores.</p>
+
-
            </div>
+
-
          </div>
+
-
 
+
         </div>
         </div>
 +
      </div>
-
       <!-- End Thumbnails -->
+
       </div><!-- End Page Content -->
 +
      <!-- Le javascript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <!-- the neccessary javascript -->
 +
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
-
        <footer class="row">
+
      <div id="push"></div>
-
        <div class="twelve columns"><hr />
+
    </div>
-
            <div class="row">
+
-
              <div class="six columns">
+
    <div id="footer">
-
                  <p>&copy; Copyright iGem 2013 - Dundee </p>
+
      <div class="container">
-
              </div>
+
        <p class="muted credit"> Created for <a href="https://igem.org/Main_Page">iGEM 2013</a> Dundee. Based upon <a href ="http://twitter.github.io/bootstrap/">Bootstrap</a> and <a href="http://jquery.com/">JQuery</a>. Design by <a href="http://www.kyleharrison.co.uk">Kyle Harrison </a>. </p>
 +
      </div>
 +
    </div>
-
              <div class="six columns">
 
-
                  <ul class="link-list right">
 
-
                    <li><a href="#">Link 1</a></li>
 
-
                    <li><a href="#">Link 2</a></li>
 
-
                    <li><a href="#">Link 3</a></li>
 
-
                    <li><a href="#">Link 4</a></li>
 
-
                  </ul>
 
-
              </div>
 
-
            </div>
 
-
        </div>
 
-
      </footer>
 
-
      <!-- End Footer -->
+
  </body>
 +
</html>
-
 
+
{{:Team:Dundee/Templates/Footer}}
-
    </div>
+
-
  </div>
+
-
  <!-- Included JS Files -->
+
-
  <script src="../public/assets/templates.js"></script>
+
-
</body>
+
-
</html>
+

Latest revision as of 23:35, 28 October 2013

iGEM Dundee 2013 · ToxiMop

Targeting a Deadly Toxin

Explosions in the population of cyanobacteria can produce toxic algal blooms. Microcystin-LR the most potent and common algal bloom toxin, binds Protein Phosphatase 1. The average cyanobacteria infested lake in America contains over 1000 times the Microcystin safe drinking water limit set by the World Health Organisation.

Concerned by a harmful algal bloom in the local community, we used synthetic biology to target the toxin. We exploited the mechanism of Microcystin's toxicity to develop our Mop; by expressing Protein Phosphatase 1 we can mop up Microcystin. The interaction was also the basis for developing a biological Detector. To deploy our Detector and to consider the root causes of algal blooms we created the electronic Moptopus. It sits on a lake and monitors conditions relevant to cyanobacterial growth to help predict future blooms.