Difference between revisions of "Template:Team:MIT/Header"

Line 1: Line 1:
−
{{Team:MIT/Header}}
+
<!--To insert this as a template use {{Team:MIT/Header}}-->
  
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
  
−
<body>
+
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Cantarell:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
−
<div>
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
−
<img class = "headerimage" src = "https://static.igem.org/mediawiki/2015/a/ab/Team-MIT-Psbanner.jpg">
+
<style type="text/css">
−
</div>
+
−
<div id = "smallerspacer">
+
−
<img src = "https://static.igem.org/mediawiki/2015/6/67/Team-MIT-SymbolFront.png" class = "col-md-12">
+
−
</div>
+
−
<div>
+
−
<img src = "https://static.igem.org/mediawiki/2015/d/d0/Team-MIT-Homebody.jpg" class = "col-md-12">
+
−
</div>
+
−
<div id = "spacer">
+
−
<div id = "title">
+
−
Project Overview
+
−
</div>
+
  
−
<div class = "subtitle">Introduction to Microbial Consortia Engineering for Consolidated Bioprocessing
+
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
−
</div>
+
  
−
<div class = "text" align = "center">
+
.topWikiNavBackground {
−
Microbial consortia engineering has the potential to more effectively generate useful products, ranging from biofuels to specialty chemicals, than current technology based on mono-cultures of bacteria (Shong 2012). Communities of microbes can better handle the complex process of the conversion of substrates to products by dividing the metabolic load among multiple species. In addition, communities of microbes exhibit increased production rates, metabolic efficiency, and robustness to changes in environmental conditions relative to mono-cultures due to synergistic interactions between species.
+
    height:18px;
−
Currently, there are many challenges in creating synthetic microbial consortia. For instance, natural microbial communities have evolved to be capable of maintaining homeostasis, but synthetic communities are not. When creating synthetic microbial consortia, one must ensure that the members do not out-compete each other, do not exhaust the resources in their environments, and do not have unstable genetic compositions. Thus, engineering microbial consortia requires the establishment of population control systems. The use of synthetic microbial consortia for consolidated bio-processing also faces the same challenges as the use of mono-cultures, including economic feasibility relative to current methods of production.
+
    margin-top: -32px;
−
</div>
+
    background-color:transparent;
 +
}
  
−
<div class = "subtitle">Our Approach - Designing a Co-Culture for Conversion of Cellulosic Waste to Biodiesel
+
.headerimage {
−
</div>
+
position: relative;
 +
top:26px;
 +
margin: auto;
 +
width: 100%;
 +
height: 100%;
  
−
<div class = "text" align = "center">
+
}
−
We aim to create a stable and robust synthetic microbial consortia that  converts agricultural waste, lignocellulose, into a useful product, biodiesel. Our system consists of a co-culture of Cytophaga hutchinsonii, an aerobic bacteria that rapidly digests crystalline cellulose, and Escherichia coli, which can grow on the sugars produced from cellulose degradation and is genetically modified to produce the fatty acid esters that comprise biodiesel. In addition to this existing metabolic link, we introduce a synthetic communication pathway to ensure a synergistic relationship between them. Our main focus is thus to ensure stable and efficient ratios of the populations of the bacteria through synthetic biology. In order to predict the interactions between the bacteria and design the communication network, we model the dynamics of our co-culture using whole-genome scale metabolic models with an approach called dynamic flux balance analysis.
+
−
Our co-culture has many characteristics that make it better than current methods of generation of biodiesel and other products. It is a stable co-culture as opposed to a mono-culture, so it is capable of performing the complex task of conversion of the cellulosic waste into high-value products in one reactor. It does not require additional pre-processing steps of cellulosic substrate, reducing production costs. The ability of our co-culture to use cellulosic waste to produce biodiesel also makes it environmentally friendly, compared to other methods of fuel production. Also, our culture is resilient to environmental changes, which reduces operating costs because optimal operating conditions do not have to be maintained. In addition, our co-culture can be grown aerobically at room temperature, which also cuts down on operating costs.
+
−
</div>
+
  
−
<div class = "subtitle">General Applicability of Our Approach</div>
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
  
−
<div class = "text" align = "center">
+
/*Title fonts*/
−
Here, we demonstrate a robust, environmentally friendly, and economically effective system for production of biodiesel, but our system can be applied to the production of many different products. One could replace the biodiesel genes we have chosen for E. coli with genes of their choice to generate a desired product. In addition, our method of creating synthetic communication pathways to stabilize our synthetic microbial consortia is an extremely important contribution to the field of synthetic biology. One could use this approach to stabilize different co-cultures with bacteria of varying phenotypes and metabolisms, or be utilized modularly so that population ratio can be modified via inducible signal.
+
#title, .subtitle, .smallersubtitle{
 +
margin: 40px;
 +
text-align: center;
 +
font-family: 'Permanent Marker', cursive;
 +
color: white;
 +
}
 +
 
 +
.subtitle{
 +
font-size: 30px;
 +
}
 +
 
 +
#title{
 +
font-size: 40px;
 +
}
 +
 
 +
table, th, td {
 +
    border: 1px solid white;
 +
    border-collapse: collapse;
 +
    padding: 10px;
 +
}
 +
 
 +
a:link {
 +
color: white;
 +
}
 +
 
 +
a:visited{
 +
color: white;
 +
}
 +
 
 +
a:hover {
 +
color: #ccff00;
 +
text-decoration:none;
 +
}
 +
 
 +
a:active {
 +
color: white;
 +
}
 +
 
 +
.smallersubtitle{
 +
font-size:25px;
 +
}
 +
 
 +
#spacer{
 +
width: 60%;
 +
margin: auto;
 +
position: relative;
 +
}
 +
#smallerspacer{
 +
width: 50%;
 +
margin: auto;
 +
position: relative;
 +
}
 +
.col-md-6{
 +
padding: 0px;
 +
}
 +
 
 +
#contents{
 +
display: inline-block;
 +
width: 20%;
 +
text-align: right;
 +
float: left;
 +
}
 +
 
 +
/*Text font for regular paragraph text on all pages*/
 +
.text{
 +
font-size: 15px;
 +
font-family: 'Cantarell', sans-serif;
 +
margin: auto;
 +
position:relative;
 +
color: white;
 +
}
 +
 
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 
 +
body{
 +
        background-color: black
 +
}
 +
 
 +
.navmenu {
 +
position:fixed;
 +
top:16px;
 +
left:0;
 +
right:0;
 +
background:black;
 +
        z-index : 100;
 +
        height : 50px;
 +
        align : center;
 +
}
 +
#mainLogo {
 +
}
 +
#navmenubox {
 +
padding:0;
 +
margin-left:0;
 +
margin-right:0;
 +
width:100%;
 +
height:45px;
 +
}
 +
.sidelogos {
 +
float:left;
 +
display:block;
 +
margin-left:auto;
 +
height:100%;
 +
width:auto;
 +
top : 0;
 +
}
 +
#logos{
 +
float:right;
 +
}
 +
#home {
 +
    width : 40px;
 +
    top : 0;
 +
}
 +
 
 +
#mainpage {
 +
    float : left;
 +
    margin-left : 50px;
 +
    margin-top : 7px;
 +
}
 +
#facebookicon{
 +
margin-right: 0.75em;
 +
width:1.9em;
 +
}
 +
#twittericon{
 +
width:2.375em;
 +
margin-right:auto;
 +
}
 +
#igemlogo img{ 
 +
width:2.3em;
 +
    position: relative;
 +
background-color: white;
 +
}
 +
#igemlogo:hover img {
 +
background-color:rgb(0,153,102);
 +
}
 +
#twittericon img, #facebookicon img, #igemlogo img{
 +
margin-top:8px;
 +
margin-bottom:2px;
 +
}
 +
#twitapp, #fbapp {
 +
display:none;
 +
width:250px;
 +
height:auto;
 +
}
 +
#fbapp{
 +
margin-left:-149px;
 +
}
 +
#twitapp{
 +
margin-left:-111px;
 +
}
 +
#nav, #nav ul{
 +
padding:0;
 +
margin:0;
 +
list-style:none;
 +
    text-align : center;
 +
}
 +
#nav li{
 +
font-family:'Permanent Marker', cursive;
 +
display:inline-block;
 +
color: white;
 +
position:relative;
 +
top : 12px;
 +
font-size : 16px;
 +
height : 40px;
 +
    vertical-align : middle;
 +
    padding : 0;
 +
    margin : 0;
 +
}
 +
#nav li ul{
 +
    vertical-align : bottom;
 +
}
 +
#nav li ul li {
 +
font-family: 'Cantarell', sans-serif;
 +
    height : 60px;
 +
    vertical-align : top;
 +
    width : 200px;
 +
    background : rgba(0,0,0,0.65);
 +
    padding : 15px 0;
 +
    color : rgb(0,0,0);
 +
    border-bottom: 1px solid rgba(255,255,255,.2);
 +
    display: block;
 +
}
 +
#nav ul{
 +
    display : block;
 +
    width : 125px;
 +
max-height:0px;
 +
left: 0;
 +
right: 0;
 +
visibility:hidden;
 +
-moz-transition: .0s all .0s;
 +
-webkit-transition: .0s all .0s;
 +
transition: .0s all .0s;
 +
}
 +
#nav li:hover ul{
 +
visibility: visible;
 +
overflow: visible;
 +
max-height:30em;
 +
}
 +
#nav a{
 +
text-decoration:none;
 +
display:block;
 +
font-weight : bold;
 +
color : white;
 +
vertical-align : middle;
 +
}
 +
#nav li:hover a {
 +
        color : #ccff00;
 +
}
 +
#nav li:hover ul .liste {
 +
        color : white;
 +
}
 +
#nav li ul li .liste:hover {
 +
    color : #ccff00;
 +
}
 +
.side-by-side{
 +
display: inline;
 +
}
 +
#nav li ul div{
 +
display: inline;
 +
}
 +
</style>
 +
 
 +
<div class="navmenu">
 +
<div id="navmenubox">
 +
<ul id="nav" class = "col-md-10">
 +
<!--<li>
 +
<a id = "mainLogo" href="https://2015.igem.org/Team:MIT" title="MIT iGEM" target="_blank"><img src="https://static.igem.org/mediawiki/2015/6/61/Team-MIT-MainLogo1.png" height="45px">
 +
</a>
 +
</li>
 +
-->
 +
<li><a href="https://2015.igem.org/Team:MIT">Home</a></li>
 +
 
 +
<li><a href="https://2015.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Project</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Chutch">C. Hutchinsonii</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/BiodieselProduction">Biodiesel Production</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Coculture">The Co-Culture</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Parts">Parts</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Circuit">Circuit</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Modeling">Modeling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Signaling">Signaling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Promoter">Promoter Characterization</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Practices"> Human Practices</a>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/WetlabDrylab"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Notebooks</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/WetlabDrylab">Wetlab/Drylab</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">About Us</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Team">Team Bios</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Acknowledgements">Acknowledgements</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Attributions">Attributions</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Medals">Medals</a></li>
 +
</ul>
 +
            </li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Collaborations"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Externals</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Collaborations">Collaborations</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Outreach">Outreach</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/InterlabStudy">Interlab Study</a></li>
 +
        </ul>
 +
            </li>
 +
</ul>
 +
<div class= "col-md-2">
 +
<div id = "logos">
 +
<div id="twittericon" class="sidelogos">
 +
<a href="http://twitter.com/MIT_iGEM" target="_blank">
 +
<img id="twitterimg" src="https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png" height="30px"/>
 +
<div id="twitapp">
 +
<a class="twitter-timeline" href="https://twitter.com/MIT_iGEM" data-widget-id="608663252705374209">@MIT_iGEM</a>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="facebookicon" class="sidelogos">
 +
<a href="https://www.facebook.com/MITiGEM" target="_blank">
 +
<img id="fblogo" src="https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png" height="30px"/>                     
 +
<div id="fbapp">
 +
<div class="fb-like-box" data-href="https://www.facebook.com/MITiGEM" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="igemlogo" class="sidelogos">
 +
<a href="https://2015.igem.org/Main_Page" title="iGEM 2015" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0a/Team_MIT_iGEM_logo.gif" height="30px">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</body>
+
</div>
 +
 
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
 
 +
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
 
 +
<script>
 +
 
 +
$(document).ready(function(){
 +
$('div #twittericon').mouseover(function(){
 +
div = $('#twitapp');
 +
div.show();
 +
}).mouseout(function(){
 +
div.hide();
 +
});
 +
});
  
−
</html>
+
//On hover the twitter logo turns clear and the blue shows through
 +
$(document).ready(function(){
 +
    $('#twitterimg').hover(function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png";
 +
    }, function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png";
 +
    });
 +
});
  
−
{{Team:MIT/Footer}}
+
//On hover faceboook logo turns blue (changes images)
 +
$(document).ready(function(){
 +
    $('#fblogo').hover(function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/2/20/Team-MIT-FacebookIcon2.png";
 +
    }, function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png";
 +
    });
 +
});
 +
</script>

Revision as of 23:43, 18 September 2015