Team:Groningen/DesignTest

From 2012.igem.org

(Difference between revisions)
m
 
(142 intermediate revisions not shown)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
     
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 +
<script type="text/javascript" src="js/prototype.js"></script>
 +
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
 +
<script type="text/javascript" src="js/lightbox.js"></script>
 +
    <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
<head>
 +
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" />
 +
<style>
 +
div.cogbig{
 +
position:absolute;
 +
padding: 0px;
 +
margin: 0px 0px;
 +
opacity:0.4;
 +
filter:alpha(opacity=40);
 +
z-index:-1;
 +
}
 +
 +
/*Windmill*/
 +
#img1{
 +
width:120px;
 +
height:104px;
 +
position:absolute;
 +
z-index:10;
 +
left:-19px;
 +
top:-31px;
 +
}
 +
 +
/*Menu*/
 +
#navigation  {
 +
margin: 0;
 +
padding: 0 0em;
 +
height: 20px;
 +
list-style: none;
 +
display:block;
 +
font-size: 12px; 
 +
                                font-weight: 300;   
 +
color:#fff;
 +
z-index:2;
 +
}
 +
#navigation > li {
 +
float: left;
 +
height: 100%;
 +
margin-right: 18px;
 +
                                margin-left: 18px;
 +
left:100px;
 +
padding: 0 0em;
 +
}
 +
#navigation > li > a {
 +
float: left;
 +
height: 100%;
 +
color: #00;
 +
text-decoration: none;
 +
font-weight: 300;
 +
}
 +
#navigation > li > a:hover {
 +
color: Black;
 +
 +
 
 +
 
 +
}
 +
#navigation > li.sub {
 +
position: relative;
 +
 
 +
}
 +
#navigation > li.sub ul {
 +
width: 130px;
 +
margin: 0;
 +
padding: 0.0em 0;
 +
list-style: none;
 +
position: absolute;
 +
top: -800em;
 +
text-align:center;
 +
padding-left:13px;                                         
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
#navigation > li.sub ul li {
 +
width: 90%;
 +
background-color: rgba(0,0,0,0.9);
 +
}
 +
#navigation > li.sub ul li a {
 +
height: 100%;
 +
display: block;
 +
padding: 0.0em;
 +
color: #fff;
 +
text-decoration: none;
 +
}
 +
#navigation > li.sub ul li a:hover {
 +
color: rgb(255,103,0);
 +
font-weight: 700;
 +
}
 +
#navigation > li.sub:hover ul {
 +
top: 100px;
 +
left:-35px;
 +
}
 +
 
 +
#expand
 +
.expand-down span
 +
{
 +
font-family: Arial,Helvetica,sans-serif;
 +
line-height: normal;
 +
margin-bottom: 0px;
 +
margin-top: 0px;
 +
z-index:1;
 +
font-weight: 300;
 +
}
 +
.expand-down * {
 +
margin: 0px;
 +
padding: 0;
 +
z-index:1;
 +
}
 +
.expand-down ul {
 +
padding-top:100px;
 +
z-index:1;
 +
}
 +
.expand-down ul li {
 +
list-style-type:none;
 +
z-index:1;
 +
}
 +
.expand-down ul li a {
 +
text-decoration:none;
 +
z-index:1;
 +
}
 +
.expand-down ul li a img {
 +
width:80px;
 +
height:82px;
 +
border:none;
 +
z-index:1;
 +
}
 +
.expand-down ul li a span {
 +
//span bar under picture text
 +
z-index:1;
 +
text-align:center;
 +
font-size:14px;
 +
display: block;
 +
padding: 0.0em;
 +
color: #fff;
 +
}
 +
.expand-down ul li:hover a span {
 +
display:block;
 +
font-size:14px;
 +
z-index:1;
 +
color: rgb(255,103,0);
 +
font-weight: 700;
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
.expand-down ul li:hover a img {
 +
width:80px;
 +
height:82px;
 +
z-index:1;
 +
}
 +
.expand-down ul li:hover + li a img {
 +
width:80px;
 +
height:82px;
 +
z-index:1;
 +
}
 +
.expand-down ul li:hover + li + li a img {
 +
width:80px;
 +
height:82px;
 +
z-index:1;
 +
}
 +
 
 +
/*Body*/
 +
body{
 +
background-attachment:fixed;
 +
background-color:rgb(118,28,17);
 +
text-align: justify;
 +
border: none;
 +
}
 +
#content{
 +
position: relative;
 +
top:-5px;
 +
width: 1024px;
 +
padding: 0px 0px 0px 0px;
 +
background-color:transparent;
 +
border: none;
 +
}
 +
#bodyContent{
 +
width: 1024px;
 +
position: relative;
 +
padding: 0px 0px 0px 0px;
 +
background-color:transparent;
 +
border: none;
 +
}
 +
 
 +
 
 +
/*Suppress iGEM defaults*/
 +
a[title="Main Page"]{display: none;}
 +
.firstHeading{display: none;}
 +
.noprint{display: none;}
 +
#menubar{
 +
display: block;
 +
background-color:transparent;
 +
}
 +
#search-controls{display: none;}
 +
#contentSub{display: none;}
 +
#catlinks{display: none;}
 +
#footer-box{display: none;}
 +
#p-logo{display: block;}
 +
#top-section {
 +
display: block;
 +
position: relative;
 +
height: 98px;
 +
width: 975px;
 +
margin: -25px auto;
 +
border-left: 1px solid rgb(118,28,17);
 +
border-right: 1px solid rgb(118,28,17);
 +
border-bottom: 1px solid rgb(118,28,17);
 +
}
 +
</style>
 +
</head>
 +
 +
<body>
 +
 
 +
 
 +
<div style="position:absolute; left: 197px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog1" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div style="position:absolute; left: 313px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog2" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div style="position:absolute; left: 429px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog3" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div style="position:absolute; left: 545px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog4" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div style="position:absolute; left: 661px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog5" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div style="position:absolute; left: 777px; top: 30px;opacity:0.4;
 +
filter:alpha(opacity=40);">
 +
<img  id="cog6" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
 +
</div>
 +
 
 +
<div class="expand-down">
 +
<ul id="navigation" >
 +
<li class="sub" id="menuhome">
 +
 +
<a href="https://2012.igem.org/Team:Groningen" title="Home" rel="nofollow">
 +
<img src="https://static.igem.org/mediawiki/2012/6/61/Groningen2012_ID_20120808_Menu_Home.png" alt="Home"  title="Home" />
 +
<span>home</span>
 +
</a>
 +
 
 +
<div class="cogbig">
 +
<img id="cogbighome" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
 
 +
</li>
 +
<li class="sub" id="menuteam">
 +
<div class="cogbig">
 +
<img id="cogbigteam" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/Team" title="Team" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/f/fc/Groningen2012_ID_20120808_Menu_Team.png" alt="team" title="Team" />
 +
<span>team</span>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Team">about us</a></li>
 +
<li><a href="https://igem.org/Team.cgi?id=818" TARGET="_blank">official profile</a></li>
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Gallery">gallery</a></li>
 +
                                                       
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Attributions">attributions</a></li>
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/acknowledgements">acknowledgements</a></li>
 +
 
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Contact">contact</a></li>
 +
</ul>
 +
</a>
 +
</li>
 +
<li class="sub" id="menuproject">
 +
<div class="cogbig">
 +
<img id="cogbigproject" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/Project" title="Project" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/1/19/Groningen2012_ID_20120808_Menu_Project.png" alt="Project" title="Project" />
 +
<span>project</span>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Project">abstract</a></li>                            <li><a href="https://2012.igem.org/Team:Groningen/Data_page">data page</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Sticker">sticker</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/volatiles">volatiles</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Sensor">sensor</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/pigmentproduction">pigment</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Construct">construct</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Kill_Switch">kill switch</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Modeling">modeling</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Notebook">notebook</a></li>
 +
 +
</ul>   
 +
</a>
 +
</li>
 +
<li class="sub" id="menuparts">
 +
<div class="cogbig">
 +
<img id="cogbigparts" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/OurBiobrick" title="Parts" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/0/06/Groningen2012_ID_20120808_Menu_Parts.png" alt="Parts" title="Parts" />
 +
<span>parts</span>
 +
                                                <ul>
 +
<li><a href="https://2012.igem.org/Team:Groningen/OurBiobrick">our biobricks</a></li>
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/parts_fail">improvements</a></li>
 +
                                                        <li><a href="https://2012.igem.org/Team:Groningen/in_development">in development</a></li>
 +
</ul> 
 +
</a>
 +
</li>
 +
<li class="sub" id="menusafety">
 +
<div class="cogbig">
 +
<img id="cogbigsafety" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/Safety" title="Safety" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Safety.png" alt="Safety" title="Safety" />
 +
<span>safety</span>
 +
                                                <ul>
 +
 +
<li><a href="https://2012.igem.org/Team:Groningen/Safety">general safety</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/10com">in the lab</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/publicsafety">public safety</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/environment">environment</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/foodsafety">food safety</a></li>
 +
</ul>
 +
</a>
 +
</li>
 +
<li class="sub" id="menupr">
 +
<div class="cogbig">
 +
<img id="cogbigpr" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/overview" title="Public Relation" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/6/6f/Groningen2012_ID_20120808_Menu_Public_Relations.png" alt="Public Relation" title="Public Relation" />
 +
<span>human<br>practice</span>
 +
                                                <ul>
 +
<li><a href="https://2012.igem.org/Team:Groningen/overview">overview</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/summer_school">summerschool</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Stop_the_food_waste_initiative">stop food waste</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/market_research">market research</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Festivals">festivals</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/symposia">presentations</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/international_cooperation">collaboration</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/Media_coverage">media coverage</a></li>
 +
</ul>
 +
</a>
 +
</li>
 +
<li class="sub" id="menusponsors">
 +
<div class="cogbig">
 +
<img id="cogbigsponsors" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
 +
<a href="https://2012.igem.org/Team:Groningen/Sponsors" title="Sponsors" rel="nofollow" >
 +
<img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Sponsors.png" alt="Sponsors" title="Sponsors" />
 +
<span>sponsors</span>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Groningen/our_sponsors">our sponsors</a></li>
 +
<li><a href="https://2012.igem.org/Team:Groningen/sponsor_levels">sponsorship levels</a></li>
 +
</ul>
 +
</a>
 +
 
 +
<img id="img1" img src="https://static.igem.org/mediawiki/2012/e/e4/Groningen2012_AD_20120802_WindmillArms.png" width="120"height="104" />
 +
 
 +
 
 +
</script>
 +
</li>
 +
</ul>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
<script>
 +
$(document).ready(function(){
 +
    $("ul#navigation").mouseenter(function(){
 +
        cog = 1;
 +
    });
 +
    $("li#navigation").mouseleave(function(){
 +
        cog = 0;
 +
        angle = 0;
 +
    });
 +
    $("li#menuhome").mouseenter(function(){
 +
        target = "#cogbighome";         
 +
    }); 
 +
    $("li#menuteam").mouseenter(function(){
 +
        target = "#cogbigteam";
 +
    });
 +
    $("li#menuproject").mouseenter(function(){
 +
        target = "#cogbigproject";
 +
    });
 +
    $("li#menuparts").mouseenter(function(){
 +
        target = "#cogbigparts";
 +
    });
 +
    $("li#menusafety").mouseenter(function(){
 +
        target = "#cogbigsafety"; 
 +
    });
 +
    $("li#menupr").mouseenter(function(){
 +
        target = "#cogbigpr";   
 +
    });
 +
    $("li#menusponsors").mouseenter(function(){
 +
        target = "#cogbigsponsors";
 +
 +
    });
 +
});
 +
 +
var cogangle = 0;
 +
var cog = 0;
 +
var angle = 0;
 +
 
 +
var target = ".cogbig";
 +
setInterval(function(){
 +
      cogangle-=cog;
 +
    $(target).rotate(cogangle);
 +
if (target=="#cogbigsponsors")
 +
  {
 +
$("#img1").rotate(cogangle);
 +
$("#cogbighome").rotate(cogangle);
 +
$("#cogbigteam").rotate(cogangle);
 +
$("#cogbigproject").rotate(cogangle);
 +
$("#cogbigsafety").rotate(cogangle);
 +
$("#cogbigparts").rotate(cogangle);
 +
$("#cogbigpr").rotate(cogangle);
 +
$("#cog1").rotate(-cogangle*3);
 +
$("#cog2").rotate(-cogangle*3);
 +
$("#cog3").rotate(-cogangle*3);
 +
$("#cog4").rotate(-cogangle*3);
 +
$("#cog5").rotate(-cogangle*3);
 +
$("#cog6").rotate(-cogangle*3);
 +
document.getElementById('cog1').style.display = "block";
 +
document.getElementById('cog2').style.display = "block";
 +
document.getElementById('cog3').style.display = "block";
 +
document.getElementById('cog4').style.display = "block";
 +
document.getElementById('cog5').style.display = "block";
 +
document.getElementById('cog6').style.display = "block";
 +
  }
 +
else
 +
{
 +
  document.getElementById('cog1').style.display = "none";
 +
  document.getElementById('cog2').style.display = "none";
 +
  document.getElementById('cog3').style.display = "none";
 +
  document.getElementById('cog4').style.display = "none";
 +
  document.getElementById('cog5').style.display = "none";
 +
  document.getElementById('cog6').style.display = "none";
 +
 
 +
} 
 +
},30);
 +
 
 +
 
 +
 
 +
</script>
-
<script type="text/javascript" src="js/prototype.js"></script>
 
-
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
 
-
<script type="text/javascript" src="js/lightbox.js"></script>
 
-
 
-
<link rel="stylesheet"href="https://2012.igem.org/Team:Groningen/style.css?action=raw&amp;ctype=text/css"/>
 
</html>
</html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
 
 +
 
 +
 
 +
 
 +
 
 +
<html>
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
<style>
-
<title>Horizontal Drop-Down CSS MENU</title>
+
#img2{
-
<link href="style.css" rel="stylesheet" type="text/css" />
+
position:absolute;
 +
z-index:0;
 +
left:0px;
 +
top:80px;
 +
margin-bottom: 20px;
 +
} 
 +
#img3{
 +
position:absolute;
 +
z-index:0;
 +
left:800px;
 +
top:130px;
 +
margin-bottom: 20px;
 +
}             
 +
 
 +
</style>
 +
<img id="img2" img src="https://static.igem.org/mediawiki/2012/4/41/Groningen_2012_logoFW.png" width="220px"/><a href="https://2012.igem.org/Main_Page">
 +
<img id="img3" img src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" width="100px"/></a>
 +
 
</head>
</head>
 +
</html>
-
<body>
+
<html>
-
<p><a href="http://www.divitodesign.com/2008/09/how-to-dropdown-css-menu/">Horizontal CSS menu tutorial</a> by <a href="http://www.divitodesign.com/">DivitoDesign</a>. </p>
+
<script type="text/javascript">
-
<ul id="nav">
+
  var _gaq = _gaq || [];
-
  <li class="current"><a href="#" title="Home">Home</a></li>
+
  _gaq.push(['_setAccount', 'UA-34029773-1']);
-
  <li><a href="#" title="Services">Services</a>
+
  _gaq.push(['_trackPageview']);
-
      <ul class="sub">
+
 
-
        <li><a href="#" title="Services > Webdesign">Webdesign</a></li>
+
  (function() {
-
        <li><a href="#" title="Services > Developement">Development</a></li>
+
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-
        <li><a href="#" title="Services > Illustration">Illustration</a></li>
+
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-
        <li><a href="#" title="Services > Search Engine">Search engine</a></li>
+
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-
        <li><a href="#" title="Services > Wordpress">Wordpress</a></li>
+
  })();
-
      </ul>
+
 
-
  </li>
+
</script>
-
  <li><a href="#" title="Blog">Blog</a>
+
-
      <ul class="sub" >
+
-
        <li><a href="#" title="Services > Themes">Themes</a></li>
+
-
        <li><a href="#" title="Services > Plugins">Plugins</a></li>
+
-
      </ul>
+
-
</li>
+
-
  <li><a href="#" title="Contact">Contact</a></li>
+
-
</ul>
+
-
<p>&nbsp;</p>
+
-
</body>
+
</html>
</html>
 +
<html>
 +
<head>
 +
<style>
 +
z1 {
 +
font-size:18pt;
 +
line-height:21pt;
 +
color:white;
 +
}
 +
z2 {
 +
font-size:18pt;
 +
line-height:21pt;
 +
color:white;
 +
}
 +
div.ctd {
 +
width: 90px;
 +
text-align: center;
 +
background: #000;
 +
background-color: rgba(0,0,0,0.3);
 +
padding: 5px ;
 +
margin: 30px auto;
 +
color: #FFF;
 +
}
 +
div.cte {
 +
width: 120px;
 +
text-align: center;
 +
background: #000;
 +
padding-right:10px;
 +
padding-left:10px;
 +
margin: 0 auto;
 +
background-color: rgba(0,0,0,0.3);
 +
color: #FFF;
 +
}
 +
            div.ctd2 {
 +
width: 300px;
 +
height: 20px;
 +
text-align: center;
 +
background: #000;
 +
background-color: transparent;
 +
background-color: rgba(0,0,0,0.3);
 +
padding: 10px ;
 +
margin: 30px auto; 
 +
color: #FFF;
 +
}
 +
            div.cte2 {
 +
width: 330px;
 +
height: 40px;
 +
text-align: center;
 +
background: #000;
 +
padding-right:10px;
 +
padding-left:10px;
 +
background-color: transparent;
 +
background-color: rgba(0,0,0,0.3);
 +
margin: -30px auto;
 +
color: #FFF;
 +
}
 +
div.ctd3 {
 +
width: 430px;
 +
height: 20px;
 +
text-align: center;
 +
background: #000;
 +
background-color: transparent;
 +
background-color: rgba(0,0,0,0.3);
 +
padding: 10px ;
 +
margin: 30px auto; 
 +
color: #FFF;
 +
}
 +
            div.cte3 {
 +
width: 480px;
 +
height: 40px;
 +
text-align: center;
 +
background: #000;
 +
padding-right:10px;
 +
padding-left:10px;
 +
background-color: transparent;
 +
background-color: rgba(0,0,0,0.3);
 +
margin: -30px auto;
 +
color: #FFF;
 +
}
 +
z7{
 +
font-size:13pt;
 +
line-height:14pt;
 +
color: rgb(255,103,0);
 +
}
 +
p.nomargin{
 +
font-size:12pt;
 +
line-height:14pt;
 +
margin-right: 0px;
 +
margin-left: 0px;
 +
color: white;
 +
}
 +
p.marginleft{
 +
margin-top: 0px;
 +
margin-left:150px;
 +
font-size:13pt;
 +
line-height:15pt;
 +
margin-right:150px;
 +
color:white;
 +
}
 +
p.orange{
 +
margin-top:0px;
 +
margin-left:150px;
 +
font-size:14pt;
 +
line-height:16pt;
 +
margin-right:150px;
 +
color: #FF6700;
 +
font-weight: bold;
 +
}
 +
p.marginspace{
 +
font-size:13pt;
 +
line-height:15pt;
 +
color:white;
 +
margin-top:0px;
 +
margin-bottom:200px;
 +
margin-right:0px;
 +
margin-left:300px;
 +
margin-right:300px;
 +
}
 +
p.centered{
 +
font-size:13pt;
 +
line-height:15pt;
 +
color:white;
 +
margin-top:0px;
 +
margin-bottom:0px;
 +
margin-right:300px;
 +
margin-left:300px;
 +
}
 +
a.inlink{
 +
font-size: 12pt;
 +
                line-height: 12pt;
 +
                color: rgb(255,103,0);
 +
}
 +
a.menulink{
 +
font-size:12pt;
 +
line-height:12pt;
 +
color:white;
 +
font-weight: 500;
 +
}
 +
a.menulink:hover{
 +
font-size:12pt;
 +
line-height:12pt;
 +
color: rgb(255,103,0);
 +
font-weight: 700;
 +
}
 +
a:link {
 +
color: #FFFFFF;
 +
}
 +
a:visited {
 +
color: #FFFFFF;
 +
}
 +
a:hover {
 +
color: #FF6700;
 +
}
 +
a:active {
 +
color: #FF6700;
 +
}
 +
a.inlink{
 +
font-size: 12pt;
 +
                line-height: 12pt;
 +
                color: rgb(255,103,0);
 +
}
 +
table.accompli
 +
{
 +
background-color: transparent;
 +
margin-left: 150px;
 +
margin-right: 150px;
 +
}
 +
td.accPic
 +
{
 +
text-align: left;
 +
min-width: 350px;
 +
max-width: 350px;
 +
min-height: 400px;
 +
max-height: 400px;
 +
padding-left: 10px
 +
}
 +
td.accCap
 +
{
 +
text-align: left;
 +
min-width: 350px;
 +
max-width: 350px;
 +
min-height: 200px;
 +
max-height: 200px;
 +
padding-left: 10px
 +
}
 +
table.projectmenu{
 +
background-color: transparent;
 +
}
 +
table.centertable{
 +
background-color: transparent;
 +
width: 100%;
 +
margin-top: 0;
 +
margin-bottom: 0;
 +
}
 +
td.margincell{
 +
min-width: 150px;
 +
max-width: 150px;
 +
vertical-align: bottom;
 +
}
 +
div.bigcog{
 +
opacity:0.4;
 +
filter:alpha(opacity=40);
 +
z-index: -1;
 +
}
 +
#bigcogtopleft{
 +
position: relative;
 +
left: -10px;
 +
}
 +
#bigcogtopright{
 +
position: relative;
 +
left: 10px;
 +
}
 +
div.cogoverlay{
 +
z-index: 1;
 +
}
 +
#cogoverlaytopleft{
 +
position: relative;
 +
left: -350px;
 +
top: -150px;
 +
}
 +
#cogoverlaytopright{
 +
position: relative;
 +
left: 355px;
 +
top: -150px;
 +
}
 +
#cogoverlaybottomleft{
 +
position: relative;
 +
top: -25px;
 +
left: 185px;
 +
}
 +
#cogoverlaybottomright{
 +
position: relative;
 +
top: -25px;
 +
left: -135px;
 +
}
 +
p.small {
 +
margin-left:0px;
 +
font-size:13pt;
 +
font-weight: normal;
 +
line-height:13pt;
 +
margin-right:0px;
 +
color:white;
 +
}
 +
p.marginChecklist{
 +
font-size:12pt;
 +
line-height:16pt;
 +
color:white;
 +
margin-top:0px;
 +
margin-bottom:38px;
 +
margin-right:0px;
 +
margin-left:150px;
 +
margin-right:115px;
 +
}
 +
.hoverbox{
 +
cursor: default;
 +
list-style: none;
 +
margin-left: 70px;
 +
margin-right: 15px;
 +
}
 +
.hoverbox a {
 +
cursor: default;
 +
}
 +
.hoverbox a .preview{
 +
display: none;
 +
}
 +
.hoverbox a:hover .preview{
 +
display: block;
 +
position: absolute;
 +
top: -100px;
 +
left: -100px;
 +
z-index: 1;
 +
}
 +
.hoverbox img{
 +
background-color: rgba(0,0,0,0);
 +
color: inherit;
 +
padding: 2px;
 +
vertical-align: top;
 +
}
 +
.hoverbox li{
 +
background-color: rgba(0,0,0,0);
 +
border-width: 0px;
 +
color: inherit;
 +
display: inline;
 +
margin: 3px;
 +
position: relative;
 +
}
 +
.hoverbox .preview{
 +
background-color: #52140C;
 +
border-color: #761C11;
 +
}
 +
</style>
 +
</head>
 +
 +
<body>
 +
<br>
 +
<div class="cte">
 +
<div class="ctd">
 +
<z1>Abstract</z1>
 +
</div>
 +
</div>
 +
<table class="centertable">
 +
<tr>
 +
<td class="margincell" align="right">
 +
<div class="bigcog" id="bigcogtopleft">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="150px" height="150px">
 +
</div>
 +
</td>
 +
<td colspan="4">
 +
<p class="nomargin">
 +
Every year, one third of global food production -1.3 billion tons of food- is thrown away, partially due to the “best before” dating system.
 +
<z7>iGEM Groningen 2012</z7> seeks to provide an alternative method of assessing edibility: the <z7>Food Warden</z7>. It uses an <z7>engineered strain</z7>
 +
of <i>Bacillus subtilis</i> to detect and report volatiles in spoiling meat. The introduced <z7>genetic construct</z7> uses a promoter to trigger
 +
a pigment coding gene. This promoter, <z7>identified by microarray analysis</z7>, is significantly upregulated in the presence of
 +
<z7>volatiles from spoiling meat</z7>. The activity of the <z7>promoter</z7> regulates the expression of the <z7>pigment reporter</z7> and will
 +
be visible to the naked eye. For safe usage of the system, spores of our engineered strain are placed into one half of a semi-permeable
 +
<z7>capsule</z7>, the second containing a calibrated amount of nutrients. Breaking the barrier between the two compartments allows
 +
<z7>germination and growth</z7>, thereby activating the <z7>spoiling-meat sensor</z7>.
 +
</p>
 +
</td>
 +
<td class="margincell" align="left">
 +
<div class="bigcog" id="bigcogtopright">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="150px" height="150px">
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="margincell">
 +
<div class="cogoverlay" id="cogoverlaybottomleft">
 +
<img src="https://static.igem.org/mediawiki/2012/c/c2/Groningen2012_RR_20120909_rotting.png" width="100" height="100">
 +
</div>
 +
</td>
 +
<td align="left" >
 +
<div class="bigcog" id="bigcogbottomleft">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="150px" height="150px">
 +
</div>
 +
</td>
 +
<td align="left" >
 +
<div class="cogoverlay" id="cogoverlaytopleft">
 +
<img src="https://static.igem.org/mediawiki/2012/1/15/Groningen2012_RR20120909_construct.png"  width="100px" height="100px">
 +
</div>
 +
</td>
 +
<td align="right" >
 +
<div class="cogoverlay" id="cogoverlaytopright">
 +
<img src="https://static.igem.org/mediawiki/2012/2/29/Groningen2012_RR20120909_badmeat.png" width="100px" height="100px">
 +
</div>
 +
</td>
 +
<td align="right">
 +
<div class="bigcog" id="bigcogbottomright">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="150px" height="150px">
 +
</div>
 +
</td>
 +
<td class="margincell">
 +
<div class="cogoverlay" id="cogoverlaybottomright">
 +
<img src="https://static.igem.org/mediawiki/2012/e/e7/Groningen2012_RR20120909_capsule.png" width="100px" height="100px">
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
<br>
 +
<br>
 +
<div class="cte3">
 +
<div class="ctd3">
 +
<z2 >Completed after European Regionals</z2><br><br>
 +
</div>
 +
</div>
 +
<p class="marginChecklist">
 +
<br>
 +
<br>
 +
<a href="https://2012.igem.org/Team:Groningen/in_development" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/df/IGEMGroningen2012_AD20120915_Tick.png"> Tested a construct with downregulated promoter <i>WapA</i></a><br>
 +
<a href="https://2012.igem.org/Team:Groningen/Construct" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/df/IGEMGroningen2012_AD20120915_Tick.png"> Performed enhanced construct characterization</a><br>
 +
<a href="https://2012.igem.org/Team:Groningen/Sticker" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/df/IGEMGroningen2012_AD20120915_Tick.png"> Characterized the influence of oxygen on germination and growth within the sticker</a><br>
 +
<a href="https://2012.igem.org/Team:Groningen/market_research" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/df/IGEMGroningen2012_AD20120915_Tick.png"> Expanded the scope of the market survey</a><br>
 +
<a href="https://2012.igem.org/Team:Groningen/international_cooperation" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/df/IGEMGroningen2012_AD20120915_Tick.png"> Collaborated with Cambridge 2012</a><br>
 +
<br>
 +
</p>
 +
 +
<a name="MainAcc"></a>
 +
<div class="cte2">
 +
<div class="ctd2">
 +
<a name="MainAcc"></a><z2 >Our main accomplishments</z2><br><br>
 +
</div>
 +
</div>
 +
<br>
 +
<br>
 +
<p align=center style="color: white; font-size: 10pt;">
 +
<i>Hover your mouse over the pictures to see more!</i>
 +
</p>
 +
<br>
 +
<table class="accompli">
 +
 +
<tr>
 +
<td class="accPic">
 +
<ul class="hoverbox">
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/c/cb/Groningen2012_RR1capsule_break.png" width=200 />
 +
<img src="https://static.igem.org/mediawiki/2012/a/ac/Groningen2012_ADStickerBig.png" class="preview" width=400 />
 +
</a>
 +
</li>
 +
</ul>
 +
</td>
 +
<td class="accPic">
 +
<ul class="hoverbox">
 +
<li>
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2012/c/c2/Groningen2012_RR_20120909_rotting.png" width=150 /><img src="https://static.igem.org/mediawiki/2012/7/74/Groningen2012_ADVolatilesBig.png" class="preview" width=400 /></a>
 +
</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><br><b>1.</b></font> We designed and tested the "<a class="inlink" href="https://2012.igem.org/Team:Groningen/Sticker">Sticker</a>": a capsule in which bacteria are kept inside and volatiles can go through. We used a model to get insight on how to tweak the growth of <i>Bacillus subtilis</i>.
 +
</p>
 +
</td>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><b>2.</b></font> We explored the definition of spoiled meat and ways to check meat spoilage. We identified <a class="inlink" href="https://2012.igem.org/Team:Groningen/volatiles">various compounds</a> present in spoiled meat.<br>
 +
</p>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="accPic">
 +
<ul class="hoverbox">
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/2/29/Groningen2012_RR20120909_badmeat.png" width=200 />
 +
<img src="https://static.igem.org/mediawiki/2012/e/ec/Groningen2012_ADSensorBig.png" class="preview" width=400 />
 +
</a>
 +
</li>
 +
</ul>
 +
</td>
 +
<td class="accPic">
 +
<ul class="hoverbox">
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/2/24/Groningen2012_RRADPsac_transp.png" width=150 />
 +
<img src="https://static.igem.org/mediawiki/2012/c/c1/Groningen2012_AdBackboneBig.png" class="preview" width=400 />
 +
</a>
 +
</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><b>3.</b></font> We identified spoiled meat <a class="inlink" href="https://2012.igem.org/Team:Groningen/Sensor">sensors</a> by transcriptome analysis.<br><br><br>
 +
</p>
 +
</td>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><b>4.</b></font> <a class="inlink" href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K818000" target="_blank">Backbone pSac-Cm</a>: easy cloning in<br><i>B. subtilis</i>, the BioBrick way, for the first time! It's easy to check, BioBrick compatible, <i>E. coli</i> compatible, stabily inserted into the <i>B. subtilis</i> chromosome.
 +
</p>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="accPic">
 +
<ul class="hoverbox">
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/f/f1/Groningen2012_RRADPigments_transp.png" width=150 />
 +
<img src="https://static.igem.org/mediawiki/2012/3/35/Groningen2012_ADPigmentsBig.png"  class="preview" width=400 />
 +
</a>
 +
</li>
 +
</ul>
 +
</td>
 +
<td class="accPic">
 +
<ul class="hoverbox" style="margin-left: 30px">
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2012/9/93/Groningen2012_ADConstruct_yellow.png" width=220 />
 +
<img src="https://static.igem.org/mediawiki/2012/2/21/Groningen2012_ADConstructBig.png" class="preview" width=400 />
 +
</a>
 +
</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><br><br><b>5.</b></font> We made <a class="inlink" href="https://2012.igem.org/Team:Groningen/pigmentproduction">AmilCP and AmilGFP</a> suitable for expression in <i>Bacillus subtilis</i>.
 +
<br>
 +
These chromoproteins can be of significant value to the other <i>Bacillus subtilis</i> users in the BioBrick community.
 +
<br><br><br>
 +
</p>
 +
</td>
 +
<td class="accCap">
 +
<p class="small">
 +
<font color=#FF6700><b>6.</b></font> Most importantly: we developed a <a class="inlink" href="https://2012.igem.org/Team:Groningen/Construct">construct</a> which makes <i>Bacillus subtilis</i> sense spoiled meat and produce an output in the form of a yellow or purple pigment visible by naked eye.
 +
<br><br><br>
 +
</p>
 +
</td>
 +
</tr>
 +
</table>
 +
<br>
 +
<br>
 +
<br>
 +
</body>
 +
</html>
{{Template:SponsorsGroningen2012}}
{{Template:SponsorsGroningen2012}}

Latest revision as of 03:29, 27 October 2012





Abstract

Every year, one third of global food production -1.3 billion tons of food- is thrown away, partially due to the “best before” dating system. iGEM Groningen 2012 seeks to provide an alternative method of assessing edibility: the Food Warden. It uses an engineered strain of Bacillus subtilis to detect and report volatiles in spoiling meat. The introduced genetic construct uses a promoter to trigger a pigment coding gene. This promoter, identified by microarray analysis, is significantly upregulated in the presence of volatiles from spoiling meat. The activity of the promoter regulates the expression of the pigment reporter and will be visible to the naked eye. For safe usage of the system, spores of our engineered strain are placed into one half of a semi-permeable capsule, the second containing a calibrated amount of nutrients. Breaking the barrier between the two compartments allows germination and growth, thereby activating the spoiling-meat sensor.



Completed after European Regionals



Tested a construct with downregulated promoter WapA
Performed enhanced construct characterization
Characterized the influence of oxygen on germination and growth within the sticker
Expanded the scope of the market survey
Collaborated with Cambridge 2012

Our main accomplishments



Hover your mouse over the pictures to see more!



1. We designed and tested the "Sticker": a capsule in which bacteria are kept inside and volatiles can go through. We used a model to get insight on how to tweak the growth of Bacillus subtilis.

2. We explored the definition of spoiled meat and ways to check meat spoilage. We identified various compounds present in spoiled meat.

3. We identified spoiled meat sensors by transcriptome analysis.

4. Backbone pSac-Cm: easy cloning in
B. subtilis, the BioBrick way, for the first time! It's easy to check, BioBrick compatible, E. coli compatible, stabily inserted into the B. subtilis chromosome.



5. We made AmilCP and AmilGFP suitable for expression in Bacillus subtilis.
These chromoproteins can be of significant value to the other Bacillus subtilis users in the BioBrick community.


6. Most importantly: we developed a construct which makes Bacillus subtilis sense spoiled meat and produce an output in the form of a yellow or purple pigment visible by naked eye.





Our sponsors:

Retrieved from "http://2012.igem.org/Team:Groningen/DesignTest"