Team:Northwestern

From 2013.igem.org

(Difference between revisions)
 
(97 intermediate revisions not shown)
Line 17: Line 17:
<style>
<style>
-
.container {
+
/* Thanks to Matthew Mombrea for the following code!! Link: http://www.itworld.com/development/354027/how-build-drop-down-menu-css-and-html"*/
-
display: inline-block;
+
#main-nav {width: 850px;height: 50px;background: #C3C3E5; margin:auto; margin-top: 0px; border-radius: 20px}
-
background-color: #C3C3E5;
+
#main-nav .subnav {
-
width: 100%;
+
    display: none;
-
height: 50px;
+
    position: absolute;
 +
    top: 67px;
 +
    left: 0px;
 +
    width: 100%;
 +
    list-style-type: none;
 +
    background: #fff;
 +
    margin: 0;
 +
    border:solid 1px #eeeeee;
 +
    z-index:5;
 +
    padding:0;
}
}
-
.menu {
+
#main-nav .subnav li {
-
text-align: right;
+
    display: block;
-
}
+
    border-bottom: solid 1px #eeeeee;
-
+
    margin:0;
-
.menu ul ul {
+
-
display: none;
+
}
}
-
 
+
#main-nav .subnav li a {
-
.menu ul li:hover > ul {
+
    color: #333;
-
display: block;
+
    height:18px;
 +
    padding:10px 0;
 +
    font-size:13px;
}
}
-
 
+
#main-nav .subnav li a:hover {
-
.menu ul {  
+
    background:#f9f9f9;
-
background: #C3C3E5;
+
-
list-style: none;
+
-
position: relative;
+
-
display: inline-table;
+
}
}
-
 
+
#nav-primary {
-
.menu ul:after {
+
    list-style-type: none;
-
content: ""; clear: both; display: block;
+
    margin: 0;
 +
    float: left;
 +
    padding:0;
}
}
-
 
+
#nav-primary li {
-
.menu ul li {
+
    float: left;
-
float: left;
+
    position: relative;
}
}
-
 
+
#nav-primary li a {
-
.menu ul li:hover {
+
    float: left;
-
background: #443266;
+
    color: #000;
 +
    text-align: center;
 +
    font-size: 14px;
 +
    height: 48px;
 +
    padding-top: 19px;
 +
    line-height: 16px;
 +
    width: 164px;
 +
    text-decoration:none;
}
}
-
 
+
#nav-primary li a:hover {
-
.menu ul li:hover a{  
+
    text-decoration:none;
-
color: black;
+
}
}
-
 
+
#nav-primary li:hover .subnav {
-
.menu ul li a {
+
    display: block;
-
display: block; padding: 5px 20px;
+
-
color: black; text-decoration: none;
+
}
}
 +
/** END OF HEADER **/
-
.menu ul ul {
+
body {
-
background: #F1F0FF;
+
margin: 0;
-
position: absolute; top: 100%;
+
padding: 0;
 +
background: #222;
 +
color: #EEE;
 +
text-align: center;
 +
font: normal 9pt Verdana;
}
}
-
 
+
a:link, a:visited {
-
.menu ul ul li{
+
color: #EEE;  
-
float: none;
+
-
border-top: 1px solid #6b727c;
+
-
border-bottom: 1px solid #575f6a;
+
-
position: relative;
+
}
}
-
 
+
img {
-
nav ul ul li a {
+
border: none;
-
padding: 5px 20px;
+
-
color: #fff;
+
-
}
+
-
 
+
-
nav ul ul li a:hover {
+
-
background: #4b545f;
+
}
}
-
 
+
#normal2, #normal3, #normal4, #normal5 {
-
nav ul ul ul {
+
display: none;
-
position: absolute; left: 100%; top:0;
+
}
}
-
 
+
#gallery {
-
/*div {
+
margin: 0 auto;
-
    : center;
+
width: 800px;
-
    vertical-align: middle;
+
-
}*/
+
-
 
+
-
* {
+
-
/*background-color: #FFF;*/
+
-
font-family: "Helvetica", "Lucida Grande", sans-serif;
+
}
}
-
/*
+
#thumbs {
-
.menu-bar {  
+
margin: 10px auto 10px auto;
-
    text-align: right;  
+
text-align: center;
-
    font-size: 14px;
+
width: 800px;
-
    width: 100%;
+
-
    height: 20px;
+
-
    display: block;
+
-
    vertical-align: bottom;  
+
}
}
-
 
+
#bigimages {
-
.menu-bar a {  
+
width: 770px;
-
    color: #6A0888;
+
float: left;
-
    text-decoration: none;
+
-
    margin-left: 15px;
+
}
}
-
*/
+
#thumbs img {
-
 
+
width: 130px;
-
#header {
+
height: 130px;
-
    width: 1000px;  
+
-
    height: 90px;  
+
-
    margin-left: auto;
+
-
    margin-right: auto;
+
-
    margin-top: 0px;
+
-
    display: block;
+
-
/*    margin-top: 20px;
+
-
    margin-bottom: 20px; */
+
-
  vertical-align: middle;
+
-
 
+
}
}
-
 
+
#bigimages img {
-
#title {  
+
border: 4px solid #555;
-
    font-size: 24px;  
+
margin-top: 5px;
-
    font-style: bold;
+
width: 750px;
-
    display: inline-block;
+
}
}
-
 
+
#thumbs a:link, #thumbs a:visited {
-
#warning {  
+
width: 130px;
-
color: red;  
+
height: 130px;
-
text-align: center;
+
border: 6px solid #555;
-
display: block;
+
margin: 6px;
-
vertical-align: bottom;
+
float: left;
-
        font-size: 20px;
+
}
}
 +
#thumbs a:hover {
 +
border: 6px solid #888;
 +
}
-
.gallery{
+
/**END of gallery**/
-
width: 500px;
+
-
height: 300px;
+
-
margin: auto;
+
-
display: block;
+
-
}
+
-
 
+
-
div.gallery img {
+
-
        width: 100%;
+
-
        margin-left: auto;
+
-
        margin-right: auto;
+
-
}
+
#picture {  
#picture {  
Line 159: Line 132:
#project-description-title {  
#project-description-title {  
-
width: 900px;  
+
width: 800px;  
margin: auto;  
margin: auto;  
display: block;
display: block;
-
text-decoration: underline;
 
font-style: bold;  
font-style: bold;  
-
font-size: 18px;  
+
font-size: 23px;  
-
margin-top: 10px;
+
margin-top: 55px;
 +
        font-family: "Impact";
}
}
#project-description {  
#project-description {  
-
width: 900px;  
+
width: 850px;  
-
height: 200px;
+
height: 500px;
-
margin: auto;  
+
        margin : auto;
display: block;  
display: block;  
font-size: 16px;
font-size: 16px;
 +
      font-family: "Georgia";
 +
      text-align: left;
}
}
.first-row {  
.first-row {  
width: 100%;  
width: 100%;  
-
height: 300px;  
+
height: 350px;  
display: block;  
display: block;  
-
background-color: #6A0888;  
+
background-color: #C972D0;  
margin-bottom: 0px;
margin-bottom: 0px;
 +
        border-radius: 20px;
}
}
#problem {  
#problem {  
color: #FFF;
color: #FFF;
-
width: 25%;
+
width: 22%;
display: inline-block;
display: inline-block;
-
background-color: #6A0888;
+
background-color: #C972D0;
height: 270px;
height: 270px;
-
padding-left: 125px;
+
padding-left: 57px;
 +
padding-right: 25px;
vertical-align: middle;
vertical-align: middle;
margin:auto;  
margin:auto;  
         font-size: 16px;
         font-size: 16px;
 +
        border-radius: 20px
 +
}
}
Line 199: Line 178:
#pH {  
#pH {  
color: #FFF;
color: #FFF;
-
width: 25%;
+
width: 22%;
display: inline-block;
display: inline-block;
-
background-color: #6A0888;
+
background-color: #C972D0;
vertical-align: middle;
vertical-align: middle;
height: 270px;
height: 270px;
Line 208: Line 187:
margin: auto;
margin: auto;
         font-size: 16px;
         font-size: 16px;
 +
}
}
#dual-state {  
#dual-state {  
color: #FFF;
color: #FFF;
-
width: 25%;
+
width: 22%;
display: inline-block;
display: inline-block;
-
background-color: #6A0888;
+
background-color: #C972D0;
height: 270px;
height: 270px;
 +
padding-left: 25px;
 +
padding-right: 50px;
vertical-align: middle;  
vertical-align: middle;  
margin: auto;
margin: auto;
         font-size: 16px;
         font-size: 16px;
 +
}
}
#first-row-title {  
#first-row-title {  
text-align: center;
text-align: center;
-
background-color: #6A0888;
+
background-color:#C972D0;
vertical-align: middle;
vertical-align: middle;
-
padding-top: 70px;
+
padding-top: 30px;
text-align: center;
text-align: center;
}
}
Line 231: Line 214:
#first-row-description {  
#first-row-description {  
text-align: center;  
text-align: center;  
-
background-color: #6A0888;
+
background-color: #C972D0;
vertical-align: middle;
vertical-align: middle;
text-align: center;
text-align: center;
Line 240: Line 223:
height: 500px;  
height: 500px;  
display: block;  
display: block;  
-
background-color: black;  
+
background-color: #8AB8E6;  
-
margin: 0px 0px 0px 0px;
+
margin: 10px 0px 0px 0px;
 +
border-radius: 20px
}
}
Line 248: Line 232:
display: inline-block;
display: inline-block;
text-align: center;
text-align: center;
-
background-color: black;
+
background-color: #8AB8E6;
width: 100%;
width: 100%;
font-size: 24px;
font-size: 24px;
 +
        border-radius:20px
 +
border-radius: 20px
}
}
Line 257: Line 243:
display: inline-block;
display: inline-block;
text-align: center;
text-align: center;
-
background-color: black;
+
background-color: #8AB8E6;
width: 100%;
width: 100%;
font-size: 20px;
font-size: 20px;
Line 265: Line 251:
color: white;  
color: white;  
display: block;  
display: block;  
-
background-color: black;  
+
background-color: #8AB8E6;  
width: 100%;  
width: 100%;  
text-align: center;  
text-align: center;  
-
font-size: 20px;}
+
font-size: 20px;
 +
        border-radius: 20px}
 +
p{
 +
text-indent: 40px;}
</style>  
</style>  
-
<!--
+
<script type="text/javascript">
-
<div class = "menu-bar">  
+
-
+
function changeImage(current) {
-
    <a href = "https://2013.igem.org/Team:Northwestern"> Home </a>
+
var imagesNumber = 5;
-
    <a href = "https://2013.igem.org/Team:Northwestern/Team"> Team </a>
+
-
    <a href = "https://igem.org/Team.cgi?year=2013&team_name=Northwestern"> Official Team Profile </a>
+
for (i=1; i<=imagesNumber; i++) {
-
    <a href = "https://2013.igem.org/Team:Northwestern/Project"> Project </a>
+
if (i == current) {
-
    <a href = "https://2013.igem.org/Team:Northwestern/Parts"> Parts Submitted </a>
+
document.getElementById("normal" + current).style.display = "block";
-
    <a href = "https://2013.igem.org/Team:Northwestern/Modeling"> Modeling </a>
+
} else {
-
    <a href = "https://2013.igem.org/Team:Northwestern/Notebook"> Notebook </a>
+
document.getElementById("normal" + i).style.display = "none";
-
    <a href = "https://2013.igem.org/Team:Northwestern/Safety"> Safety </a>
+
}
-
    <a href = "https://2013.igem.org/Team:Northwestern/Attributions"> Attributions </a>
+
}
-
+
}
-
</div>
+
-
-->
+
</script>
-
<div class = "container">
 
-
<div class = "menu">
 
-
<ul>
 
-
<li><a href="#">Home</a></li>
 
-
<li><a href="#">Team</a>
 
-
<ul>
 
-
<li><a href="#">Official Profile</a></li>
 
-
<li><a href="#">Meet Us!</a></li>
 
-
<li><a href="#">Attribution</a></li>
 
-
</ul>
 
-
</li>
 
-
<li><a href="#">Project</a>
 
-
<ul>
 
-
<li><a href="#">Parts Submitted</a></li>
 
-
<li><a href="#">Notebook</a></li>
 
-
<li><a href="#">Description</a></li>
 
-
</ul>
 
-
</li>
 
-
<li><a href="#">Modeling</a></li>
 
-
<li><a href= "#"> Safety </a></li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<div id= "header">
 
-
<p id = "title"> Northwestern iGEM </p>
 
-
<p id = "warning"> The site is currently under construction. The page will be pretty later. I promise!</p>
 
-
</div>
 
 +
</br>
 +
<body>
-
<div class = "gallery">
+
<div id="gallery">
-
    <img src = "https://static.igem.org/mediawiki/2013/5/54/Group-photo-horizontal.jpg" height = "300px">
+
<div id="bigimages">
 +
<div id="normal1">
 +
<a href = "https://2013.igem.org/Team:Northwestern/Project"> <img src="https://static.igem.org/mediawiki/2013/c/cc/NorthwesternDual-state-gallery.gif" alt=""/> </a>
 +
</div>
 +
 +
<div id="normal2">
 +
<a href = "https://2013.igem.org/Team:Northwestern/Human_Practice"> <img src="https://static.igem.org/mediawiki/2013/1/1c/NorthwesternHuman-practices-gallery.gif" alt=""/> </a>
 +
</div>
 +
 +
<div id="normal3">
 +
<a href = "https://2013.igem.org/Team:Northwestern/Team"> <img src="https://static.igem.org/mediawiki/2013/8/89/Meet-the-team.gif" alt=""/> </a>
 +
</div>
 +
 +
<div id="normal4">
 +
<img src="https://static.igem.org/mediawiki/2013/3/39/NorthwesternOral-health-gallery.gif" alt=""/>
 +
</div>
 +
 +
<div id="normal5">
 +
<a href = "https://2013.igem.org/Team:Northwestern/methods"> <img src="https://static.igem.org/mediawiki/2013/7/73/NorthwesternMETHODS-GALLERY.gif" alt=""/> </a>
 +
</div>
 +
</div>
 +
 +
<div id="thumbs">
 +
<a href="javascript: changeImage(1);"><img src="https://static.igem.org/mediawiki/2013/e/ef/Dual-state-gallery-small.gif" alt="" /></a>
 +
<a href="javascript: changeImage(2);"><img src="https://static.igem.org/mediawiki/2013/1/13/NorthwesternHuman-practices-gallery-small.gif" alt="" /></a>
 +
<a href="javascript: changeImage(3);"><img src="https://static.igem.org/mediawiki/2013/b/b6/Meet-the-team-small.gif" alt="" /></a>
 +
<a href="javascript: changeImage(4);"><img src="https://static.igem.org/mediawiki/2013/4/4b/Oral-health-gallery-small.gif" alt="" /></a>
 +
<a href="javascript: changeImage(5);"><img src="https://static.igem.org/mediawiki/2013/b/b5/METHODS-GALLERY-small.gif" alt="" /></a>
 +
</div>
 +
</div>
</div>
-
<p id = "project-description-title"> Project Description </p>  
+
 
 +
</body>
 +
 
 +
<p id = "project-description-title"> <!--<font size=1>N</font> <font size=2>N</font> <font size=3>N</font> <font size=4>N</font> <font size=5>N</font>--> NUtralize! </p>
<div id = "project-description">  
<div id = "project-description">  
-
    This year the Northwestern iGEM team has decided to focus on oral health care as the theme of our project. It has been well characterized that lactic acid secreted by natural bacteria in the human mouth decreases pH, leading to cavity formation. The enamel demineralization threshold is known to be around pH 5.5. Previous research has found that the genes asr and gadA are highly expressed near pH 5.5 and below. Our project aims to take a two-pronged approach at combating the natural lactic acid secretion. We plan to create a promoter that is always on at a basal level as well as one that is induced to express at a high level as a result of low pH. This project will lay the foundation for a significant amount of research as the dual-state promoter that we develop could then be incorporated with a gene related to lactic acid catabolism or neutralization.  
+
  <p>  Poor oral health (tooth decay and infection) can lead to many painful symptoms and complicated treatments. Mouth bacteria are a primary culprit in tooth decay, as lactic acid secreted by natural bacteria in the human mouth decreases pH, leading to cavity formation. The enamel demineralization threshold is known to be around pH 5.5.  The overall vision of our project is to prevent mouth pH from falling below 5.5 by engineering bacteria to sense pH and respond by increasing the alkalinity. To do this, we aimed to create genetic pH sensing elements that would work in the mouth. <p/>
 +
<p>Our project laid the foundation for a dual-state promoter consisting of two promoters in series: a constitutive promoter active at a (tunable) basal level and an upstream, pH-inducible promoter. Previous research has found that the E. coli genes Asr and GadA are highly expressed when pH drops below 5.5. This research drove us to choose the promoter elements for GadA and Asr as our pH-inducible promoters. </p>
 +
<p>We have characterized a new pH-responsive promoter (Asr) as well as an iGEM-characterized promoter (GadA) and a constitutive promoter (Lpp). Ongoing work will evaluate how promoters in series affect each other and further characterize the dual state phenomenon. Here we used E. coli  for the ease at which it is genetically manipulated to provide proof of principle. Additionally, we tested these promoters with GFP for an easy visual output. Ultimately the aim is to engineer bacteria native to the oral microbiome to sense and respond to drops in pH. We envision that these bacteria will induce enzymes that catalyze reactions to counteract the decrease in pH, preventing the demineralization of the tooth. </p>
 +
 
</div>  
</div>  
<div class = "first-row">  
<div class = "first-row">  
<div id = "problem">  
<div id = "problem">  
-
<p id = "first-row-title"> Summary of Problem </p>  
+
<p id = "first-row-title"> Summary of Problem </p>
-
<p id = "first-row-description"> Following any meals, the pH within the mouth usually drop substantially which can lead to cavities. </p>
+
                <center> <a href = "https://2013.igem.org/Team:Northwestern/problem"> <img src="https://static.igem.org/mediawiki/2013/thumb/2/2c/Summary-of-problem.gif/600px-Summary-of-problem.gif" width="120" height="120"/> </a></center>
 +
<p id = "first-row-description"> Following meals, the pH within the mouth drops substantially which leads to cavities. </p>
 +
             
</div>
</div>
<div id = "pH">  
<div id = "pH">  
<p id = "first-row-title"> pH </p>   
<p id = "first-row-title"> pH </p>   
 +
                <center> <a href = "https://2013.igem.org/Team:Northwestern/detectpH"><img src="https://static.igem.org/mediawiki/2013/thumb/1/1e/Ph-image.gif/120px-Ph-image.gif" width="120" height="120"/></center>
<p id = "first-row-description"> The first step in combating cavities is to create a bacteria that can detect pH. </p>
<p id = "first-row-description"> The first step in combating cavities is to create a bacteria that can detect pH. </p>
</div>
</div>
-
<div id = "dual-state">  
+
<div id = "dual-state">
<p id = "first-row-title"> Dual State Promoter </p>  
<p id = "first-row-title"> Dual State Promoter </p>  
-
<p id = "first-row-description"> In order to be able to produce quick response in addition to a basal level, the team has designed the dual state promoter. </p>
+
                <center> <a href = "https://2013.igem.org/Team:Northwestern/dualstate"><img src="https://static.igem.org/mediawiki/2013/thumb/1/14/Dual-state-image.gif/180px-Dual-state-image.gif" width="120" height="120"/></center> </a>
 +
<p id = "first-row-description"> In order for a quick response from basal level, we designed the dual state promoter. </p>
</div>
</div>
</div>
</div>
-
<div id= "sponsors">
 
-
<!-- Make clickable logos!!! -->
 
-
 
-
<p id = "thanks"> We thank our sponsors for making everything possible! </p> </br>
 
-
<p id = "logos-warning"> Logos coming soon! </p>
 
-
<p id = "companies"> Northwestern University </p>
 
-
        <p id = "companies"> Northwestern Center for Talent Development </p>
 
-
<p id = "companies"> VWR </p>
 
-
<p id = "companies"> Epoch </p> 
 
-
<p id = "companies"> IDT </p> 
 
-
<p id = "companies"> NU Genomics Core </p> 
 
-
<p id = "companies"> Fischer </p>
 
-
        <p id = "companies"> 3M </p>
 
-
 
-
 
-
</div>
 
</html>
</html>

Latest revision as of 04:04, 28 September 2013



NUtralize!

Poor oral health (tooth decay and infection) can lead to many painful symptoms and complicated treatments. Mouth bacteria are a primary culprit in tooth decay, as lactic acid secreted by natural bacteria in the human mouth decreases pH, leading to cavity formation. The enamel demineralization threshold is known to be around pH 5.5. The overall vision of our project is to prevent mouth pH from falling below 5.5 by engineering bacteria to sense pH and respond by increasing the alkalinity. To do this, we aimed to create genetic pH sensing elements that would work in the mouth.

Our project laid the foundation for a dual-state promoter consisting of two promoters in series: a constitutive promoter active at a (tunable) basal level and an upstream, pH-inducible promoter. Previous research has found that the E. coli genes Asr and GadA are highly expressed when pH drops below 5.5. This research drove us to choose the promoter elements for GadA and Asr as our pH-inducible promoters.

We have characterized a new pH-responsive promoter (Asr) as well as an iGEM-characterized promoter (GadA) and a constitutive promoter (Lpp). Ongoing work will evaluate how promoters in series affect each other and further characterize the dual state phenomenon. Here we used E. coli for the ease at which it is genetically manipulated to provide proof of principle. Additionally, we tested these promoters with GFP for an easy visual output. Ultimately the aim is to engineer bacteria native to the oral microbiome to sense and respond to drops in pH. We envision that these bacteria will induce enzymes that catalyze reactions to counteract the decrease in pH, preventing the demineralization of the tooth.

Summary of Problem

Following meals, the pH within the mouth drops substantially which leads to cavities.

Dual State Promoter

In order for a quick response from basal level, we designed the dual state promoter.

Retrieved from "http://2013.igem.org/Team:Northwestern"