Team:Groningen/DesignTest

From 2012.igem.org

(Difference between revisions)
m
 
(53 intermediate revisions not shown)
Line 5: Line 5:
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></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="js/lightbox.js"></script>
-
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
+
    <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<head>
<head>
 +
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" />
<style>
<style>
div.cogbig{
div.cogbig{
Line 57: Line 58:
#navigation > li > a:hover {
#navigation > li > a:hover {
color: Black;
color: Black;
-
text-decoration: underline;
+
Line 70: Line 71:
padding: 0.0em 0;
padding: 0.0em 0;
list-style: none;
list-style: none;
-
 
position: absolute;
position: absolute;
top: -800em;
top: -800em;
-
+
text-align:center;
-
text-align:center;
+
padding-left:13px;                                           
-
 
+
background-color: rgba(0,0,0,0.5);
-
padding-left:15px;                                           
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.5);
+
}
}
#navigation > li.sub ul li {
#navigation > li.sub ul li {
width: 90%;
width: 90%;
-
background-color: transparent;
+
background-color: rgba(0,0,0,0.9);
-
background-color: rgba(0,0,0,0.9);
+
}
}
#navigation > li.sub ul li a {
#navigation > li.sub ul li a {
height: 100%;
height: 100%;
-
 
display: block;
display: block;
padding: 0.0em;
padding: 0.0em;
-
 
color: #fff;
color: #fff;
text-decoration: none;
text-decoration: none;
}
}
#navigation > li.sub ul li a:hover {
#navigation > li.sub ul li a:hover {
-
                        color: rgb(255,103,0);
+
color: rgb(255,103,0);
-
                        font-weight: 700;
+
font-weight: 700;
}
}
#navigation > li.sub:hover ul {
#navigation > li.sub:hover ul {
top: 100px;
top: 100px;
-
left:-35px;
+
left:-35px;
}
}
Line 111: Line 105:
margin-top: 0px;
margin-top: 0px;
z-index:1;
z-index:1;
-
                                font-weight: 300;  
+
font-weight: 300;  
}
}
.expand-down * {
.expand-down * {
Line 129: Line 123:
text-decoration:none;
text-decoration:none;
z-index:1;
z-index:1;
-
 
}
}
.expand-down ul li a img {
.expand-down ul li a img {
Line 136: Line 129:
border:none;
border:none;
z-index:1;
z-index:1;
-
 
}
}
.expand-down ul li a span {
.expand-down ul li a span {
//span bar under picture text
//span bar under picture text
z-index:1;
z-index:1;
-
 
+
text-align:center;
-
text-align:center;
+
font-size:14px;
-
font-size:14px;
+
-
 
+
display: block;
display: block;
padding: 0.0em;
padding: 0.0em;
color: #fff;
color: #fff;
-
                       
 
-
 
-
 
}
}
.expand-down ul li:hover a span {
.expand-down ul li:hover a span {
display:block;
display:block;
-
font-size:14px;
+
font-size:14px;
-
+
z-index:1;
z-index:1;
-
color: rgb(255,103,0);
+
color: rgb(255,103,0);
-
                        font-weight: 700;
+
font-weight: 700;
-
                        background-color: black;
+
background-color: rgba(0,0,0,0.5);
-
                     
+
-
background-color: transparent;
+
-
  background-color: rgba(0,0,0,0.5);
+
}
}
.expand-down ul li:hover a img {
.expand-down ul li:hover a img {
Line 168: Line 151:
height:82px;
height:82px;
z-index:1;
z-index:1;
-
 
}
}
.expand-down ul li:hover + li a img {
.expand-down ul li:hover + li a img {
Line 174: Line 156:
height:82px;
height:82px;
z-index:1;
z-index:1;
-
 
}
}
.expand-down ul li:hover + li + li a img {
.expand-down ul li:hover + li + li a img {
Line 183: Line 164:
/*Body*/
/*Body*/
-
body
+
body{
-
{
+
background-attachment:fixed;
background-attachment:fixed;
-
background-image:url(https://static.igem.org/mediawiki/2012/6/66/Groningen2012_AD_20120802_Background.png);
+
background-color:rgb(118,28,17);
text-align: justify;
text-align: justify;
border: none;
border: none;
}
}
-
#content  
+
#content{
-
{
+
position: relative;
position: relative;
top:-5px;
top:-5px;
Line 199: Line 178:
border: none;
border: none;
}
}
-
#bodyContent
+
#bodyContent{
-
{
+
width: 1024px;
width: 1024px;
position: relative;
position: relative;
Line 212: Line 190:
a[title="Main Page"]{display: none;}
a[title="Main Page"]{display: none;}
.firstHeading{display: none;}
.firstHeading{display: none;}
-
#menubar{display: none;}
+
.noprint{display: none;}
 +
#menubar{
 +
display: block;
 +
background-color:transparent;
 +
}
#search-controls{display: none;}
#search-controls{display: none;}
#contentSub{display: none;}
#contentSub{display: none;}
#catlinks{display: none;}
#catlinks{display: none;}
#footer-box{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>
</style>
</head>
</head>
Line 228: Line 221:
</div>
</div>
-
<div style="position:absolute; left: 313px; top: 29px;opacity:0.4;
+
<div style="position:absolute; left: 313px; top: 30px;opacity:0.4;
filter:alpha(opacity=40);">
filter:alpha(opacity=40);">
<img  id="cog2" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
<img  id="cog2" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
</div>
</div>
-
<div style="position:absolute; left: 429px; top: 28px;opacity:0.4;
+
<div style="position:absolute; left: 429px; top: 30px;opacity:0.4;
filter:alpha(opacity=40);">
filter:alpha(opacity=40);">
<img  id="cog3" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
<img  id="cog3" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
</div>
</div>
-
<div style="position:absolute; left: 545px; top: 27px;opacity:0.4;
+
<div style="position:absolute; left: 545px; top: 30px;opacity:0.4;
filter:alpha(opacity=40);">
filter:alpha(opacity=40);">
<img  id="cog4" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
<img  id="cog4" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
</div>
</div>
-
<div style="position:absolute; left: 661px; top: 110px;opacity:0.4;
+
<div style="position:absolute; left: 661px; top: 30px;opacity:0.4;
filter:alpha(opacity=40);">
filter:alpha(opacity=40);">
<img  id="cog5" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
<img  id="cog5" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
</div>
</div>
-
<div style="position:absolute; left: 777px; top: 110px;opacity:0.4;
+
<div style="position:absolute; left: 777px; top: 30px;opacity:0.4;
filter:alpha(opacity=40);">
filter:alpha(opacity=40);">
<img  id="cog6" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
<img  id="cog6" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
Line 257: Line 250:
<li class="sub" id="menuhome">
<li class="sub" id="menuhome">
-
<a href="https://2012.igem.org/Team:Groningen" title="Home" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/6/61/Groningen2012_ID_20120808_Menu_Home.png" alt="Home"  title="Home" />
<span>home</span>
<span>home</span>
Line 271: Line 264:
<img id="cogbigteam" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigteam" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/Team" title="Team" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/f/fc/Groningen2012_ID_20120808_Menu_Team.png" alt="team" title="Team" />
<span>team</span>
<span>team</span>
<ul>
<ul>
-
<li><a href="https://2012.igem.org/Team:Groningen/about us">about us</a></li>
+
<li><a href="https://2012.igem.org/Team:Groningen/Team">about us</a></li>
-
<li><a href="https://2012.igem.org/Team:Groningen/official team profile">official team profile</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>
</ul>
</a>
</a>
Line 284: Line 283:
<img id="cogbigproject" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigproject" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/Project" title="Project" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/1/19/Groningen2012_ID_20120808_Menu_Project.png" alt="Project" title="Project" />
<span>project</span>
<span>project</span>
<ul>
<ul>
-
<li><a href="https://2012.igem.org/Team:Groningen/description">description</a></li>
+
<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/wetwork">wetwork</a></li>
+
<li><a href="https://2012.igem.org/Team:Groningen/Sticker">sticker</a></li>
-
<li><a href="https://2012.igem.org/Team:Groningen/modeling">modeling</a></li>
+
<li><a href="https://2012.igem.org/Team:Groningen/volatiles">volatiles</a></li>
-
<li><a href="https://2012.igem.org/Team:Groningen/notebook">notebook</a></li>
+
<li><a href="https://2012.igem.org/Team:Groningen/Sensor">sensor</a></li>
-
<li><a href="https://2012.igem.org/Team:Groningen/attributions">attributions</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>     
</ul>     
</a>
</a>
Line 300: Line 304:
<img id="cogbigparts" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigparts" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/Parts" title="Parts" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/0/06/Groningen2012_ID_20120808_Menu_Parts.png" alt="Parts" title="Parts" />
<span>parts</span>
<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>
</a>
</li>
</li>
Line 309: Line 318:
<img id="cogbigsafety" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigsafety" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/Safety" title="Safety" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Safety.png" alt="Safety" title="Safety" />
<span>safety</span>
<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>
</a>
</li>
</li>
Line 318: Line 335:
<img id="cogbigpr" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigpr" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/PublicRelations" title="Public Relation" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/6/6f/Groningen2012_ID_20120808_Menu_Public_Relations.png" alt="Public Relation" title="Public Relation" />
-
<span>public<br>relations</span>
+
<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>
</a>
</li>
</li>
Line 327: Line 354:
<img id="cogbigsponsors" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
<img id="cogbigsponsors" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
</div>
</div>
-
<a href="https://2012.igem.org/Team:Groningen/Sponsors" title="Sponsors" rel="nofollow" target="_blank">
+
<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" />
<img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Sponsors.png" alt="Sponsors" title="Sponsors" />
<span>sponsors</span>
<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>
</a>
Line 349: Line 380:
         cog = 1;
         cog = 1;
     });
     });
-
     $("ul#navigation").mouseleave(function(){
+
     $("li#navigation").mouseleave(function(){
         cog = 0;
         cog = 0;
         angle = 0;  
         angle = 0;  
Line 387: Line 418:
if (target=="#cogbigsponsors")
if (target=="#cogbigsponsors")
   {
   {
-
$("#img1").rotate(-cogangle);
+
$("#img1").rotate(cogangle);
$("#cogbighome").rotate(cogangle);
$("#cogbighome").rotate(cogangle);
$("#cogbigteam").rotate(cogangle);
$("#cogbigteam").rotate(cogangle);
Line 394: Line 425:
$("#cogbigparts").rotate(cogangle);
$("#cogbigparts").rotate(cogangle);
$("#cogbigpr").rotate(cogangle);
$("#cogbigpr").rotate(cogangle);
-
$("#cog1").rotate(-cogangle);
+
$("#cog1").rotate(-cogangle*3);
-
$("#cog2").rotate(-cogangle);
+
$("#cog2").rotate(-cogangle*3);
-
$("#cog3").rotate(-cogangle);
+
$("#cog3").rotate(-cogangle*3);
-
$("#cog4").rotate(-cogangle);
+
$("#cog4").rotate(-cogangle*3);
-
$("#cog5").rotate(-cogangle);
+
$("#cog5").rotate(-cogangle*3);
-
$("#cog6").rotate(-cogangle);
+
$("#cog6").rotate(-cogangle*3);
document.getElementById('cog1').style.display = "block";
document.getElementById('cog1').style.display = "block";
document.getElementById('cog2').style.display = "block";
document.getElementById('cog2').style.display = "block";
Line 415: Line 446:
   document.getElementById('cog5').style.display = "none";
   document.getElementById('cog5').style.display = "none";
   document.getElementById('cog6').style.display = "none";
   document.getElementById('cog6').style.display = "none";
 +
}   
}   
},30);
},30);
 +
 +
 +
</script>
</script>
Line 433: Line 468:
position:absolute;
position:absolute;
z-index:0;
z-index:0;
-
left:-50px;
+
left:0px;
-
top:100px;
+
top:80px;
-
}              
+
margin-bottom: 20px;
 +
} 
 +
#img3{
 +
position:absolute;
 +
z-index:0;
 +
left:800px;
 +
top:130px;
 +
margin-bottom: 20px;
 +
}            
-
body {
+
</style>
-
font-family: Helvetica, Arial, sans-serif;
+
<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>
-
l1 {
+
</html>
-
font-size:21pt;
+
-
line-height:21pt;
+
-
color:white;
+
-
}
+
-
l2 {
+
-
font-size:14pt;
+
-
line-height:14pt;
+
-
                        color:white;
+
-
}
+
<html>
-
                .ctb {
+
<script type="text/javascript">
-
                        width: 520px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
  var _gaq = _gaq || [];
-
   background-color: rgba(0,0,0,0.3);
+
   _gaq.push(['_setAccount', 'UA-34029773-1']);
-
                        padding: 10px ;
+
  _gaq.push(['_trackPageview']);
-
                        margin: 30px auto;
+
-
                     
+
-
                        color: #FFF;
+
-
                }
+
  (function() {
-
                .ctc {
+
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-
                        width: 580px;
+
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-
text-align: center;
+
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-
                        background: #000;
+
  })();
-
padding-right:10px;
+
</script>
-
padding-left:10px;
+
</html>
-
                        margin: 50px auto;
+
-
background-color: transparent;
+
-
  background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
<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;
-
</style>
+
margin-bottom:200px;
 +
margin-right:0px;
 +
margin-left:300px;
 +
margin-right:300px;
 +
}
 +
p.centered{
 +
font-size:13pt;
 +
line-height:15pt;
 +
color:white;
-
<body>
+
margin-top:0px;
-
<div class="ctc">
+
margin-bottom:0px;
-
<div class="ctb">
+
margin-right:300px;
-
<l1 >Become our sponsor!</l1><br>
+
margin-left:300px;
-
<l2>support us <FONT COLOR=#ff6700>directly</FONT> or at <A HREF="http://www.indiegogo.com/FoodWarden" TARGET="_blank"><FONT COLOR=#ff6700>www.indiegogo.com/FoodWarden</FONT></A></l2>
+
}
-
</div>
+
a.inlink{
-
</div>
+
font-size: 12pt;
-
<img id="img2" img src="https://static.igem.org/mediawiki/2012/4/41/Groningen_2012_logoFW.png" width="300px"/>
+
                line-height: 12pt;
-
</body>
+
                color: rgb(255,103,0);
-
</head>
+
}
-
</html>
+
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"