Difference between revisions of "Team:Uppsala"

 
(156 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
+
{{Uppsala_NewTemplate}}
 
<html>
 
<html>
−
<head>
 
  
−
<link href="" type="text/css" rel="stylesheet">
+
<style>
  
−
<script src="Faiyaz.js"></script>
+
#home_image {
−
<script type="text/javascript" src="jquery-latest.js"></script>
+
  margin: 0 auto;
−
<script type="text/javascript" src="jquery.tablesorter.js"></script>
+
  display: block;
−
<script>$(document).ready(function()
+
  margin-top: -16px;
−
    {  
+
}
−
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );  
+
−
    }
+
−
);  
+
−
 
+
−
</script>
+
  
−
<style>
 
  
−
body {
+
/*Design for the buttons*/
−
background-color: #FFFFFF;
+
 
−
padding: 0 15%;
+
/*Div with the project buttons*/
 +
#buttonbox {
 +
      border: 2px black solid;
 
}
 
}
  
−
#main {
+
/*Buttons that lead to the project page*/
−
background-color: #FFFFFF;
+
.buttons {
−
margin-left:auto;
+
/*border: 3px solid black;
−
margin-right:auto;
+
border-radius: 20px;*/
−
width:1100px;
+
        box-shadow: 10px 10px 20px #888888;
−
padding: 5px;
+
        /*margin-right: 15px;*/
 +
        background-color: #E84243;
 +
        margin-right: 20px;
 +
        margin-top:15px;
 +
width: 350px;
 +
height: 583px;
 +
        overflow: hidden;
 +
        z-index:0;
 
}
 
}
  
−
.header {
+
/*Button effects*/
−
font-family:"Trebuchet MS", Helvetica;
+
 
−
color: #FF3300;
+
.buttons img:hover, #nic img, #med img {
−
text-shadow: 2px 2px 5px #888888;
+
        opacity: 1;
 
}
 
}
  
−
#home_image {
+
.buttons img:hover, #nic img:hover, #med img:hover {
−
  width: 100%;
+
        opacity: 0.2;
 
}
 
}
  
−
hr {
+
.description {
−
background-color: #FF3300;
+
        position: absolute;
 +
        top: inherit;
 +
        bottom: inherit;
 +
        left: inherit;
 +
        right: inherit;
 +
        visibility:  hidden;
 +
        opacity: 0;
 +
        text-align: center;
 +
        width: 350px;
 +
        font-family: "Fira Sans";
 +
        font-size: 200%;
 +
        color: #F8F8FF;
 +
        -webkit-transition: all 300ms ease-out;
 +
-moz-transition: all 300ms ease-out;
 +
transition: all 300ms ease-out
 +
       
 
}
 
}
  
−
p {
+
.buttons .description {
−
font-family:Garamond, "Times New Roman";
+
padding: 3px;
−
font-size: 150%;
+
font-size: 170%;
 +
}
 +
#nic .description, #med .description {
 +
        width:75%;
 +
        margin: auto;
 
}
 
}
  
−
/*
+
.buttons:hover .description, #nic:hover .description, #med:hover .description {
−
html, body {
+
        visibility: visible;
−
  min-height: 100%;  
+
        opacity: 1;
−
  position: relative;  
+
        -moz-transform: translateY(140px);
−
  height: 100%;
+
-webkit-transform: translateY(140px);
−
  margin: 0;
+
transform: translateY(140px);
 
}
 
}
−
*/
+
 
−
/* What are these for?*/
+
#med:hover .description {
−
.grid-container{
+
        visibility: visible;
−
  max-width: 600px;  
+
        opacity: 1;
−
  min-height: 10%;  
+
        -moz-transform: translateY(40px);
−
  background-color: #c7c7c7;
+
-webkit-transform: translateY(40px);
−
  margin: 0 auto;  
+
transform: translateY(40px);
−
  text-align: justify;  
+
 
}
 
}
  
−
.grid-container:after{
+
/*Affects all effects on the buttons (opacity, resize). Makes a smooth 300ms transition.*/
−
  content:'';
+
.button_grid img {
−
  display: inline-block;  
+
        -webkit-transition: all 300ms;
−
  width: 100%;
+
-moz-transition: all 300ms;
 +
transition: all 300ms;
 
}
 
}
  
−
.grid-item{
+
/*Resize of the buttons on hover*/
−
  width: 25%;
+
.button_grid td:hover img {
−
  min-width: 50px;
+
        -webkit-transform: scale(1.2);
−
  display: inline-block;
+
-moz-transform: scale(1.2);
−
  vertical-align: top;  
+
transform: scale(1.2);
−
  height: 125px;
+
−
  background-color: #ff3819;
+
−
  margin-bottom: 20px;  
+
−
  margin-top: 25px;  
+
 
}
 
}
  
  
 +
#results_button {
 +
box-shadow: 3px 3px 10px #888888;
 +
margin-left: 10px;
 +
}
  
−
/*ul .listelem {
+
#nic {
−
    list-style-type: none;
+
/*border: 3px solid black;
−
    margin: 0;
+
border-radius: 20px;*/
−
    padding: 0;
+
box-shadow: 10px 10px 20px #888888;
−
    overflow: hidden;
+
/*background-color: #d3dfe4;*/
 +
background-color: #E84243;
 +
margin-top: 17px;
 +
width: 1100px;
 +
height: 263px;
 +
overflow: hidden;
 +
 
}
 
}
  
−
li {
+
/*Text on the button*/
−
    float: left;
+
#textbox {
 +
color: white;
 +
padding: 5px;
 +
background: rgba(0, 0, 0, 0.6);
 +
display:table;
 +
margin: 0 auto;
 
}
 
}
  
−
.listelem a {
+
#medal {
−
    display: block;
+
/*padding: 25px 0px;*/
−
    width: 135px;
+
/*box-shadow: 10px 10px 20px #888888;*/
−
    font-weight: bold;
+
/*margin-top: 14px;
−
    color: #FFFFFF;
+
margin-bottom: 3px;*/
−
    background-color: #EFEFEF;
+
−
    text-align: center;
+
−
    padding: 25px;
+
−
    text-decoration: none;
+
−
    text-transform: uppercase;
+
 
}
 
}
  
−
.listelem a:hover, .listelem a:active {
+
#med {
−
    background-color: #333385;
+
width: 1100px;
 +
height: 103px;
 +
box-shadow: 10px 10px 20px #888888;
 +
overflow: hidden;
 +
margin-top: 10px;
 +
background-color: #E84243;
 
}
 
}
−
*/
 
  
  
 +
*flipping images*/
  
−
/*Hide the sub-menus*/
+
/* entire container, keeps perspective */
−
nav ul ul {  
+
.flip-container{
−
display: none;
+
/*perspective*/
 +
-webkit-perspective:1000;
 +
  -moz-perspective:1000;
 +
    -ms-perspective:1000;
 +
    -o-perspective:1000;
 +
        perspective:1000;
 
}
 
}
−
/*Show the sub-menus when you hover over the bar elements*/
+
/* flip the pane when hovered */
−
nav ul li:hover > ul {  
+
.flipped {
−
display: block;
+
/*transform*/
 +
-webkit-transform:rotateY(180deg);
 +
  -moz-transform:rotateY(180deg);
 +
    -ms-transform:rotateY(180deg);
 +
    -o-transform:rotateY(180deg);
 +
        transform:rotateY(180deg);
 
}
 
}
−
/*Change of the box around the bar*/
+
 
−
nav ul {
+
.flip-container, .front, .back{
−
background-color: #A5A5C1;
+
width: 100%;
−
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
+
height: 461px;
−
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
+
−
font-family: serif;
+
−
text-align: center;
+
−
        list-style: none;
+
−
+
−
padding: 0 15px;
+
−
display: inline-table;
+
 
}
 
}
−
nav ul:after {
+
 
−
content: ""; clear: both; display: block;
+
 
−
}
+
/* flip speed goes here */
−
nav > ul {
+
.flipper {
−
margin-top: 0px;
+
/*transition*/
−
margin-left: auto;
+
-webkit-transition:1s;
−
margin-right: auto;
+
  -moz-transition:1s;
−
}
+
    -o-transition:1s;
−
nav ul li {
+
        transition:1s;
−
float: left;
+
/*transform-style*/
 +
-webkit-transform-style:preserve-3d;
 +
  -moz-transform-style:preserve-3d;
 +
    -ms-transform-style:preserve-3d;
 +
    -o-transform-style:preserve-3d;
 +
        transform-style:preserve-3d;
 +
position:relative;
 
}
 
}
  
−
/*Only affects links in the first ul, the bar*/
+
/* hide back of pane during swap */
−
nav ul li:hover > a{
+
.front, .back{
−
        background-color: #4b545f;
+
/*backface-visibility*/
−
color: #CC0000;
+
-webkit-backface-visibility:hidden;
−
        text-decoration: none;
+
  -moz-backface-visibility:hidden;
−
background-color: #99FF33;
+
    -ms-backface-visibility:hidden;
 +
    -o-backface-visibility:hidden;
 +
        backface-visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 
}
 
}
  
−
/* Change of link text in the bar*/
+
 
−
nav ul li a {
+
 
−
display: block;
+
/* front pane, placed above back */
−
padding: 2px 15px;
+
.front{
−
text-decoration: none;
+
z-index:2;
−
        color: #757575;
+
−
}
+
−
/*List of sub-menus*/
+
−
nav ul ul {  
+
−
background: #5f6975;
+
−
border-radius: 0px;
+
−
padding: 0;
+
−
position: absolute;
+
−
        top: 100%;
+
−
}
+
−
/*The individual sub-menu elements*/
+
−
nav ul ul li {
+
−
float: none;
+
−
background-color: #5f6975;
+
−
border-top: 1px solid #6b727c;
+
−
border-bottom: 1px solid #575f6a;
+
−
position: relative;
+
−
}
+
−
/*The individual link texts in the sub-menus*/
+
−
nav ul ul li a {
+
−
padding: 15px 20px;
+
 
}
 
}
  
−
nav ul ul li a:hover {
+
 
−
background: #4b545f;
+
/* back, initially hidden pane */
 +
.back{
 +
/*transform*/
 +
-webkit-transform:rotateY(180deg);
 +
  -moz-transform:rotateY(180deg);
 +
    -ms-transform:rotateY(180deg);
 +
    -o-transform:rotateY(180deg);
 +
        transform:rotateY(180deg);
 
}
 
}
  
Line 191: Line 223:
 
</head>
 
</head>
 
<body>
 
<body>
−
<nav>
 
−
<ul class="navbar">
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala">Home</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Team">Team</a></li>
 
−
  <li class="listelem"><a href="#">Project
 
−
      <ul>
 
−
<a href="https://2015.igem.org/Team:Uppsala/Description"><li>Description</li></a>
 
−
<a href="https://2015.igem.org/Team:Uppsala/Experiments"><li>Experiments &amp; Protocols</li></a> 
 
−
<a href="https://2015.igem.org/Team:Uppsala/Results"><li>Results</li></a> 
 
−
<a href="https://2015.igem.org/Team:Uppsala/Design"><li>Design</li></a>
 
−
      </ul>
 
−
  </a></li>
 
−
  <li class="listelem"><a href="#">Parts</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Notebook">Notebook
 
−
      <ul>
 
−
<a href="https://2015.igem.org/Team:Uppsala/Parts"><li>Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Uppsala/Basic_Part"><li>Basic Parts</li></a> 
 
−
<a href="https://2015.igem.org/Team:Uppsala/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Uppsala/Part_Collection"><li>Part Collection</li></a> 
 
−
      </ul>
 
−
  </a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Attributions">Attributions</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Collaborations">Collaborations</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Practices">Human Practices</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Safety">Safety</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Modeling">Modeling</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Measurement">Measurement</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Software">Software</a></li>
 
−
  <li class="listelem"><a href="https://2015.igem.org/Team:Uppsala/Entrepreneurship">Entrepreneurship</a></li>
 
−
</ul>
 
−
</nav>
 
  
−
<div id="main">
+
    <!--<img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;height:100%;">-->
−
<img id="home_image" src="" alt="iGem Uppsala 2015" width:"140" height:"50">
+
 
 +
<div class="flip-container">
 +
<div class="flipper" onclick="this.classList.toggle('flipped')">
 +
<div class="front">
 +
<img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;">
 +
</div>
 +
<div class="back">
 +
<img id="home_image" src="https://static.igem.org/mediawiki/2015/7/72/Uppsala_MansFront.png" alt="iGEM Uppsala" style="width:100%;">
 +
</div>
 +
</div>
 
</div>
 
</div>
−
     <h1 class="header">Home</h1>
+
 
 +
     <div id="main">
 +
 
 +
   
 
     <h2 class="header">Abstract</h2>
 
     <h2 class="header">Abstract</h2>
 
     <hr>
 
     <hr>
−
     <p>
+
      
−
     Welcome to the iGem Uppsala team 2015! Polycyclic aromatic hydrocarbons are hydrocarbons—organic compounds containing only carbon and hydrogen—that are composed of multiple aromatic rings. Formally, the class is further defined as lacking further branching substituents off of these ring structures. Polycyclic aromatic hydrocarbons are a part of the pollution cycle and are found fossil fuels. PAHs containing up to six fused aromatic rings are often known as "small" PAHs, and those containing more than six aromatic rings are called "large" PAHs. These pose a longterm threat to the environment due to their sedimentation capabilites. Our team has engaged in finding pathways for degradation of PAHs.
+
  <table>
−
     </p>
+
    <tr>
 +
    <td>
 +
      <p>
 +
     Polycyclic aromatic hydrocarbons (PAHs) are potent carcinogens produced by various activities ranging from grilling meat to coal gasification. Our project aims to degrade high molecular weight PAHs present in industrial waste from district heating plants. There is currently no sustainable way to handle this waste and therefore it is deposited in landfills. We want to solve this problem by  employing a bacterial based system.
 +
    </p>
 +
    <p>Our cells need to be able to detect the PAHs for direct degradation. However the high molecular weight PAHs do not readily pass through the cell membrane. We solved this obstacle by using the low weight PAH, naphthalene, as an indicator for the presence of heavier PAHs. The degradation of this small PAH inside the cell relieves repression of genes under the control of the NahR/Psal promoter system. This causes the expression of a series of enzymes for PAH degradation which are secreted outside the cell where they can oxidize and cleave the ring structures of the carcinogenic compounds. This in turn makes them available for downstream biodegradation. To increase the degradation efficiency, our system also produces rhamnolipids. These are biosurfactants that prevent the PAHs from aggregating, making them easier for the enzymes to access.
 +
      </p>
 +
      </td>
 +
      <td>
 +
      <a href="https://2015.igem.org/Team:Uppsala/Results">
 +
        <img id="results_button" src="https://static.igem.org/mediawiki/2015/e/eb/Uppsala_ResultsButton.png" style="width:90px;">
 +
      </a>
 +
      </td>
 +
    </tr>
 +
     </table>
 
     <hr>
 
     <hr>
−
    </div>
+
  
−
<div id="footer">
 
−
Copyright © Wiki Team
 
−
</div>
 
  
 +
<table class="button_grid">
 +
        <tr>
 +
             
 +
                <td colspan="3" >
 +
                    <div id="med" >
 +
<a href="https://2015.igem.org/Team:Uppsala/Journey">
 +
                              <p class="description">Click here to read about our journey to gold!</p>
 +
      <img id="medal" src="https://static.igem.org/mediawiki/2015/f/f7/Uppsala_goldmedal.png">
 +
                              <!--<h2><span id="textbox">Nordic iGEM Conference</span></h2>-->
 +
</a>
 +
</div>
 +
                </td>
 +
        </tr>
 +
    <tr>
 +
<td >
 +
<div class="buttons">
 +
  <a href="https://2015.igem.org/Team:Uppsala/Enzymes">
 +
                                        <p class="description">Laccase and dioxygenase are enzymes that are central to our project. Click here to learn more about how we use them!</p>
 +
<img class="button" src="https://static.igem.org/mediawiki/2015/9/95/Uppsala_Degradation.png" alt="Enyzmatic degradation" style="width:350px;height:583px">
 +
                                        <!--<h2><span id="textbox">Enzymatic Degradation</span></h2>-->
 +
    </a>
 +
</div>
 +
</td>
 +
<td >
 +
<div class="buttons">
 +
<a href="https://2015.igem.org/Team:Uppsala/Naphthalene">
 +
                              <p class="description">The degradation of naphthalene is what activates our whole construct. Click here to learn more about how this happens!</p>
 +
      <img src="https://static.igem.org/mediawiki/2015/9/92/Uppsala_NewNahButton.png" alt="Naphthalene pathway" style="width:350px;height:583px">
 +
                              <!--<h2><span id="textbox">Naphthalene Pathway</span></h2>-->
 +
</a>
 +
</div>
 +
</td>
 +
                <td >
 +
<div class="buttons">
 +
<a href="https://2015.igem.org/Team:Uppsala/Biosurfactants">
 +
                                <p class="description">We used rhamnolipids to increase our enzymes' accessibility to the PAH:s. Click here to find out more about how we incorporated them into our system!</p>
 +
<img src="https://static.igem.org/mediawiki/2015/7/73/Uppsala_NewBiosurfButton.png" alt="Biosurfactants" style="width:350px;height:583px">
 +
                                <!--<h2><span id="textbox">Biosurfactants</span></h2>-->
 +
</a>
 +
</div>
 +
</td>
 +
</tr>
 +
        <tr>
 +
             
 +
                <td colspan="3" >
 +
                    <div id="nic" >
 +
<a href="https://2015.igem.org/Team:Uppsala/Software">
 +
                              <p class="description">We needed a fluorometer to measure the efficiency of our system, but we quickly noticed that getting hold of one was not that easy. Therefore, we built our own!</p>
 +
      <img  src="https://static.igem.org/mediawiki/2015/2/27/Uppsala_fluorometer.png" alt="NiC" style="width:1100px; height:263px">
 +
                              <!--<h2><span id="textbox">Nordic iGEM Conference</span></h2>-->
 +
</a>
 +
</div>
 +
                </td>
 +
        </tr>
 +
        <tr>
 +
             
 +
                <td colspan="3" >
 +
                    <div id="nic" >
 +
<a href="https://2015.igem.org/Team:Uppsala/nic">
 +
                              <p class="description">We collaborated with the iGEM team from Stockholm to arrange a meetup of nordic teams in Uppsala. Click here to learn more about the Nordic iGEM Conference!</p>
 +
      <img  src="https://static.igem.org/mediawiki/2015/a/ac/Uppsala_NewNiCButton.png" alt="NiC" style="width:1100px; height:263px">
 +
                              <!--<h2><span id="textbox">Nordic iGEM Conference</span></h2>-->
 +
</a>
 +
</div>
 +
                </td>
 +
        </tr>
 +
</table>
 +
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
 +
{{Uppsala_NewFooter}}

Latest revision as of 22:45, 20 November 2015

iGEM Uppsala
iGEM Uppsala

Abstract

Polycyclic aromatic hydrocarbons (PAHs) are potent carcinogens produced by various activities ranging from grilling meat to coal gasification. Our project aims to degrade high molecular weight PAHs present in industrial waste from district heating plants. There is currently no sustainable way to handle this waste and therefore it is deposited in landfills. We want to solve this problem by employing a bacterial based system.

Our cells need to be able to detect the PAHs for direct degradation. However the high molecular weight PAHs do not readily pass through the cell membrane. We solved this obstacle by using the low weight PAH, naphthalene, as an indicator for the presence of heavier PAHs. The degradation of this small PAH inside the cell relieves repression of genes under the control of the NahR/Psal promoter system. This causes the expression of a series of enzymes for PAH degradation which are secreted outside the cell where they can oxidize and cleave the ring structures of the carcinogenic compounds. This in turn makes them available for downstream biodegradation. To increase the degradation efficiency, our system also produces rhamnolipids. These are biosurfactants that prevent the PAHs from aggregating, making them easier for the enzymes to access.

Laccase and dioxygenase are enzymes that are central to our project. Click here to learn more about how we use them!

Enyzmatic degradation

The degradation of naphthalene is what activates our whole construct. Click here to learn more about how this happens!

Naphthalene pathway

We used rhamnolipids to increase our enzymes' accessibility to the PAH:s. Click here to find out more about how we incorporated them into our system!

Biosurfactants