Team:WashU/Saffroninakanecoli

From 2012.igem.org

(Difference between revisions)
Line 2: Line 2:
== Saffron in a Kan, ''E. coli'' ==
== Saffron in a Kan, ''E. coli'' ==
-
 
+
=The Problem=
-
Put
+
{{WashUprojectbar}}
-
Some
+
<br><br>
-
Text
+
-
In
+
-
This
+
-
Space
+
-
So
+
-
It
+
-
Doesn't
+
-
Look
+
-
Bad
+
-
 
+
-
 
+
-
 
+
<html>
<html>
-
<style type="text/css">
+
<head>
-
  body {background-color:#8f0222;background-repeat:repeat; }
+
<script type="text/javascript">
-
   .firstHeading {display: none;}
+
$(document).ready(function(){
-
   #content {padding-left:1px; padding-right:1px; background-color:#FFEFD5;}
+
  var title = new Array();
-
   #footer-box {background-color:#FFEFD5; border-color:#8b0000;}
+
  title[0] = "Saffron Overview";
-
   #bodyContent {background-color: #FFEFD5;}
+
  title[1] = "Flower of Crocus sativus";
-
 
+
  title[2] = "Harvesting saffron";
-
   p {color:#000000;}
+
  title[3] = "Final product";
-
   p {font-size:14px;}
+
  title[4] = "Synechocystis";
-
/* Red Border */
+
  title[5] = "Gene construct";
-
   div#top-section {border-width:1px 1px; border-color:#ffefd5;}  
+
  var text = new Array();
-
  div#footer-box {border-width: 1px 1px; border-color:#ffffff;}
+
  text[0] = "Hover to learn about saffron production and our project";
-
   div#content {border-width:0px; border-color: #FFEFD5}
+
  text[1] = "Saffron is a spice derived from the flowers of the saffron crocus, more formally known as <i>Crocus sativus</i>. Each saffron crocus produces up to four flowers, each of which has three stigmas. The saffron spice is the end product of drying those stigmas. The spice harvested from the flowers possesses many uses. Along with being an additive in foods in order to provide both color and taste, saffron also possesses anticarcinogenic and antidepressant properties. Saffron is also used as a fabric dye,  (FINISH THE ABOUT THE PLANT)";
-
</style>
+
  text[2] = "Saffron is currently the most expensive spice in the world. Around 75,000 flowers of saffron are needed to produce just one pound of the spice. The vast amount of manual labor required to hand-pick the stigmas out of the flowers explains the exorbitant price of the spice. (FINISH THE ABOUT WHY IT IS EXPENSIVE)";
-
 
+
  text[3] = "Saffron makes an appearance in multiple cultures, and can be seen in European, African, Asian, and Indian cuisines. It is used in the production of cheeses, curries, meat dishes, soups, and liquors, among other products. In past eras, many used saffron extensively in dishes as a sign of wealth. Currently, per pound, saffron costs anywhere from $1600 to $5000. Authentic saffron is usually sold in one-gram or one-ounce packets. (FINISH THE ABOUT SAFFRON'S WEALTH)";
-
<nav>
+
  text[4] = "<i>Synechocystis</i> is a freshwater cyanobacterium capable of producing carotenoids that are the precursors to the products of saffron that give it the characteristic color and fragrance - namely, safranal, crocin and picrocin. (FINISH THE ABOUT THE BUG PAGE)";
-
<font face = "Palatino Linotype, Book Antiqua">
+
  text[5] = "about our idea";
-
    <div class="menu-item3">
+
  $("#empty1").mouseenter(function() {
-
      <h5><a href="#">Overview</a></h5>
+
  $("#box1").show();
-
    </div>
+
  $("#maptitle").empty();
-
+
   $("#maptext").empty();
-
    <div class="menu-item3">
+
   $("#maptitle").append(title[1]);
-
      <h5><a href="#">Design</a></h5>
+
  $("#maptext").append(text[1]);
-
    </div>
+
  });
-
+
  $("#empty1").mouseleave(function() {
-
<div class="menu-item3">
+
  $("#box1").hide();
-
      <h5><a href="#">Modeling</a></h5>
+
  $("#maptitle").empty();
-
    </div>
+
  $("#maptext").empty();
-
 
+
   $("#maptitle").append(title[0]);
-
<div class="menu-item3">
+
  $("#maptext").append(text[0]);
-
      <h5><a href="#">Parts</a></h5>
+
  });
-
      <ul><a href="#">Characterization</a></ul>
+
  $("#empty2").mouseenter(function() {
-
    </div>
+
  $("#box2").show();
-
 
+
  $("#maptitle").empty();
-
<div class="menu-item3">
+
   $("#maptext").empty();
-
      <h5><a href="#">Testing and Results</a></h5>
+
  $("#maptitle").append(title[2]);
-
    </div>
+
  $("#maptext").append(text[2]);
-
 
+
  });
-
 
+
  $("#empty2").mouseleave(function() {
-
<div class="menu-item3">
+
   $("#box2").hide();
-
      <h5><a href="#">Future Work</a></h5>
+
   $("#maptitle").empty();
-
    </div>
+
  $("#maptext").empty();
-
</nav>
+
   $("#maptitle").append(title[0]);
 +
  $("#maptext").append(text[0]);
 +
  });
 +
  $("#empty3").mouseenter(function() {
 +
  $("#box3").show();
 +
  $("#maptitle").empty();
 +
   $("#maptext").empty();
 +
  $("#maptitle").append(title[3]);
 +
  $("#maptext").append(text[3]);
 +
  });
 +
  $("#empty3").mouseleave(function() {
 +
  $("#box3").hide();
 +
  $("#maptitle").empty();
 +
  $("#maptext").empty();
 +
  $("#maptitle").append(title[0]);
 +
  $("#maptext").append(text[0]);
 +
  });
 +
  $("#empty4").mouseenter(function() {
 +
  $("#box4").show();
 +
  $("#maptitle").empty();
 +
  $("#maptext").empty();
 +
  $("#maptitle").append(title[4]);
 +
  $("#maptext").append(text[4]);
 +
  });
 +
  $("#empty4").mouseleave(function() {
 +
  $("#box4").hide();
 +
  $("#maptitle").empty();
 +
  $("#maptext").empty();
 +
  $("#maptitle").append(title[0]);
 +
  $("#maptext").append(text[0]);
 +
  });
 +
  $("#empty5").mouseenter(function() {
 +
  $("#box5").show();
 +
  $("#maptitle").empty();
 +
  $("#maptext").empty();
 +
  $("#maptitle").append(title[5]);
 +
  $("#maptext").append(text[5]);
 +
  });
 +
  $("#empty5").mouseleave(function() {
 +
  $("#box5").hide();
 +
  $("#maptitle").empty();
 +
  $("#maptext").empty();
 +
  $("#maptitle").append(title[0]);
 +
  $("#maptext").append(text[0]);
 +
  });
 +
});
 +
</script>
<style type="text/css">
<style type="text/css">
-
* {
+
#mapmain {
-
   margin: 0px;
+
   width:925px;
-
   padding: 0px;
+
   position:relative;
-
}
+
   left:20px;
-
 
+
   z-index:0;}
-
 
+
#mappic {
-
nav {
+
   width:600px;
-
   font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+
   height:460px;
-
   font-size: 14px;
+
   position:relative;
-
   float: left;
+
   top:0px;
-
   line-height: 1.5;
+
  z-index:1;}
-
   margin: 1px;
+
#mapbox {
-
   -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
   width:325px;
-
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
   height:460px;
-
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
   position:absolute;
-
}
+
   left:600px;
-
 
+
   top:0px;
-
.menu-item3 {
+
   color:#ffffff;
-
   background: #fff;
+
   background-color:#000000;
-
   width: 150px;
+
   z-index:0;}
-
   float: left;
+
#maptitle {
-
}
+
   width:285px;
-
 
+
   position:relative;
-
/*Menu Header Styles*/
+
   left:20px;
-
.menu-item3 h5 {
+
   top:20px;
-
   border-bottom: 1px solid rgba(0,0,0,0.3);
+
   font-family: arial,sans-serif;
-
   border-top: 1px solid rgba(255,255,255,0.2);
+
   font-size:1.5em;
-
   color: #fff;
+
  font-weight:bold;
-
   font-size: 15px;
+
   background-color:#000000;
-
   font-weight: 500;
+
   z-index:0;}
-
   padding: 7px 12px;
+
  #maptext {
-
 
+
   width:285px;
-
    
+
   height:390px;
-
  /*Gradient*/
+
   position:relative;
-
  background: #a90329; /* Old browsers */
+
   left:20px;
-
   background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
+
   top:40px;
-
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
+
   font-family: arial,sans-serif;
-
   background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
+
   background-color:#000000;
-
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
+
   z-index:0;}
-
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
+
#empty1 {
-
   background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
+
   width:150px;
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
+
   height:192px;
-
}
+
-
 
+
-
.menu-item3 h5:hover { 
+
-
  background: #cc002c; /* Old browsers */
+
-
   background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
+
-
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
+
-
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
+
-
   background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
+
-
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
+
-
  background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
+
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
+
-
 
+
-
}
+
-
 
+
-
.menu-item3 h5 a {
+
-
   color: white;
+
-
   display: block;
+
-
   text-decoration: none;
+
-
   width: 200px;
+
-
   list-style: none;
+
-
}
+
-
 
+
-
/*ul Styles*/
+
-
.menu-item3 ul {
+
-
  background: #fff;
+
-
   font-size: 13px;
+
-
   line-height: 30px;
+
-
   height: 0px;
+
-
  list-style-type: none;
+
-
  overflow: hidden;
+
-
   padding: 0px;
+
-
   display:block;
+
   position:absolute;
   position:absolute;
-
 
+
   left:10px;
-
   /*Animation*/
+
   top:10px;
-
   -webkit-transition: height 1s ease;
+
  z-index:2;
-
    -moz-transition: height 1s ease;
+
  background-image:url('https://static.igem.org/mediawiki/2011/c/cd/ICL_blank.png');
-
      -o-transition: height 1s ease;
+
}
-
      -ms-transition: height 1s ease;
+
#empty2 {
-
          transition: height 1s ease;
+
  width:145px;
-
}
+
  height:158px;
-
 
+
  position:absolute;
-
 
+
  left:226px;
-
.menu-item3:hover ul {
+
   top:10px;
-
   height: 93px;
+
   z-index:2;
-
   list-style: none;
+
  background-image:url('https://static.igem.org/mediawiki/2011/c/cd/ICL_blank.png');}
-
}
+
#empty3 {
-
 
+
   width:172px;
-
.menu-item3 ul a {
+
   height:142px;
-
   margin-left: 20px;
+
   position:absolute;
-
   text-decoration: none;
+
   left:394px;
-
   color: #aaa;
+
   top:12px;
-
   display: block;
+
   z-index:2;
-
   width: 160px;
+
  background-image:url('https://static.igem.org/mediawiki/2011/c/cd/ICL_blank.png');}
-
   float: left;
+
#empty4 {
-
 
+
   width:174px;
-
}
+
   height:174px;
-
 
+
  position:absolute;
-
/*li Styles*/
+
  left:12px;
-
.menu-item3 li {
+
   top:232px;
-
   border-bottom: 1px solid #eee;
+
   z-index:2;
-
   list-style: none;
+
  background-image:url('https://static.igem.org/mediawiki/2011/c/cd/ICL_blank.png');
-
}
+
}
-
 
+
#empty5 {
-
.menu-item3 li:hover {
+
  width:180px;
-
   background: #eee;
+
  height:164px;
-
 
+
  position:absolute;
-
   list-style: none;
+
  left:250px;
-
}
+
  top:256px;
-
 
+
  z-index:2;
-
/*First Item Styles*/
+
  background-image:url('https://static.igem.org/mediawiki/2011/c/cd/ICL_blank.png');
-
.alpha p {
+
}
-
padding: 8px 12px;
+
-
color: #aaa;
+
-
}
+
-
 
+
-
.alpha p a {
+
-
color: #aaa;
+
-
font-style: italic;
+
-
}
+
-
 
+
-
.alpha p a:hover {
+
-
color: #ccc;
+
-
}
+
</style>
</style>
-
</nav>
+
</head>
-
</html>
+
-
<html>
+
-
<head>
+
-
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
  <style type="text/css">
+
-
    #BackToTop {
+
<body>
-
  position:fixed;
+
<hr style="color:#BDCBBD; height:3px;" />
-
  bottom:0;
+
-
  right:0;
+
-
  }
+
-
  #Sitemap {
 
-
  position:fixed;
 
-
  bottom:0;
 
-
  left:0;
 
-
  }
 
-
  </style>
+
<br>
-
   </head>
+
<br>
 +
<br>
 +
<div id="mapmain">
 +
  <img id="mappic" style="border:1px solid #000000" src="https://static.igem.org/mediawiki/2012/7/76/WashUsaffron_ecoli.jpg" />
 +
  <div id="box1">
 +
  </div>
 +
  <div id="dot_box1">
 +
  </div>
 +
  <div id="empty1">
 +
  </div>
 +
  <div id="box2">
 +
  </div>
 +
  <div id="dot_box2">
 +
  </div>
 +
  <div id="empty2">
 +
  </div>
 +
  <div id="box3">
 +
  </div>
 +
  <div id="dot_box3">
 +
  </div>
 +
  <div id="empty3">
 +
  </div>
 +
  <div id="box4">
 +
  </div>
 +
  <div id="dot_box4">
 +
  </div>
 +
  <div id="empty4">
 +
  </div>
 +
  <div id="box5">
 +
  </div>
 +
  <div id="dot_box5">
 +
  </div>
 +
  <div id="empty5">
 +
   </div>
-
</html>
+
  <div id="mapbox">
 +
  <div id="maptitle">Saffron Background
 +
  </div>
 +
  <div id="maptext">Hover to learn about saffron
 +
  </div>
 +
</div>
-
<html>
+
<p>
-
<body>
+
<br>
-
 
+
-
<div id="BackToTop">
+
-
<a href="#top">
+
-
<img src="http://aux.iconpedia.net/uploads/11879496962061246695.png" width="48px" />
+
-
</a>
+
-
</div>
+
-
 
+
-
<div id="Sitemap">
+
-
<a href="https://2012.igem.org/Team:WashU/Sitemap">
+
-
<img src="http://www.pimicleaning.co.uk/images/pimi-sitemap.png" width="80px" />
+
-
</a>
+
-
</div>
+
</body>
</body>
</html>
</html>
-
<br><br>
 

Revision as of 16:10, 14 June 2012


Saffron in a Kan, E. coli

The Problem






Saffron Background
Hover to learn about saffron


Retrieved from "http://2012.igem.org/Team:WashU/Saffroninakanecoli"