Team:Groningen/DesignTest

From 2012.igem.org

(Difference between revisions)
m
 
(29 intermediate revisions not shown)
Line 1: Line 1:
-
{{HeaderGroningen2012}}
+
<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>
-
<html>
+
<head>
-
<head>
+
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" />  
-
<style>
+
<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;
 +
-
body {
 
-
font-family: Helvetica, Arial, sans-serif;
 
-
                }
+
}
-
z1 {
+
#navigation > li.sub {
-
font-size:21pt;
+
position: relative;
-
line-height:21pt;
+
-
color:white;
+
-
}
+
-
                .ctd {
+
-
                        width: 240px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
}
-
background-color: rgba(0,0,0,0.3);
+
#navigation > li.sub ul {
-
                        padding: 10px ;
+
width: 130px;
-
                        margin: 30px auto;
+
margin: 0;
-
                     
+
padding: 0.0em 0;
-
                        color: #FFF;
+
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
-
                .cte {
+
.expand-down span
-
                        width: 300px;
+
{
-
text-align: center;
+
font-family: Arial,Helvetica,sans-serif;
-
                        background: #000;
+
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;
 +
}
-
padding-right:10px;
+
/*Body*/
-
padding-left:10px;
+
body{
-
                        margin: 0 auto;
+
background-attachment:fixed;
-
background-color: transparent;
+
background-color:rgb(118,28,17);
-
  background-color: rgba(0,0,0,0.3);
+
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;
 +
}
-
                        color: #FFF;
 
-
                }
+
/*Suppress iGEM defaults*/
-
</style>
+
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 class="cte">
+
<div style="position:absolute; left: 197px; top: 30px;opacity:0.4;
-
<div class="ctd">
+
filter:alpha(opacity=40);">
-
<z1 >MEET THE TEAM</z1><br>
+
<img  id="cog1" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
</div>
</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>
-
</body>
 
-
</head>
 
-
</html>
 
-
<html>
+
<div style="position:absolute; left: 429px; top: 30px;opacity:0.4;
-
<head>
+
filter:alpha(opacity=40);">
-
<style type="text/css">
+
<img  id="cog3" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
-
p
+
</div>
-
{
+
-
margin-left:250px;
+
-
font-size:14pt;  
+
-
line-height:14pt;  
+
-
color:white;
+
-
}
+
-
p.margin
+
-
{
+
-
font-size:14pt;  
+
-
line-height:14pt;  
+
-
color:white;
+
-
margin-bottom:620px;
+
-
}
+
-
</style>
+
-
</head>
+
-
<body>
+
<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" />
-
 
+
-
<p>for enquires please email us at: team(at)igemgroningen.com</p>
+
-
<p class="margin"></p>
+
-
<p style="margin-left: 0px;">test</p>
+
-
</body>
+
-
</html>
+
-
 
+
-
 
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px; position:absolute;">
+
-
<a href="https://static.igem.org/mediawiki/2012/4/42/AD_20120802_Elbrich.png" onMouseOver="document.elbrich.src='https://static.igem.org/mediawiki/2012/6/61/AD_20120802_Elbrich2.png';" onMouseOut="document.elbrich.src='https://static.igem.org/mediawiki/2012/4/42/AD_20120802_Elbrich.png';">
+
-
<img style="margin: auto; border: 5px double black;" name="elbrich" src="https://static.igem.org/mediawiki/2012/4/42/AD_20120802_Elbrich.png" ></a></div>
+
-
 
+
-
</html>
+
-
 
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px;position:absolute;margin-left: 170px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/4/48/AD_20120819_Renske.png" onMouseOver="document.renske.src='https://static.igem.org/mediawiki/2012/6/68/AD_20120819_Renske2.png';" onMouseOut="document.renske.src='https://static.igem.org/mediawiki/2012/4/48/AD_20120819_Renske.png';">
+
-
<img style=" border: 5px double black;" name="renske" src="https://static.igem.org/mediawiki/2012/4/48/AD_20120819_Renske.png" ></a></div>
+
-
</html>
+
-
 
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px;position:absolute;margin-left: 340px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/b/b3/AD_20120802_Wlada.png"
+
-
onMouseOver="document.wlada.src='https://static.igem.org/mediawiki/2012/0/06/AD_20120802_Wlada2.png';"
+
-
onMouseOut="document.wlada.src='https://static.igem.org/mediawiki/2012/b/b3/AD_20120802_Wlada.png';">
+
-
<img style=" border: 5px double black;" name="wlada" src="https://static.igem.org/mediawiki/2012/b/b3/AD_20120802_Wlada.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px;position:absolute;margin-left: 510px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/8/8b/AD_20120802_Ismael.png"
+
-
onMouseOver="document.ismael.src='https://static.igem.org/mediawiki/2012/8/84/AD_20120802_Ismael2.png';" onMouseOut="document.ismael.src='https://static.igem.org/mediawiki/2012/8/8b/AD_20120802_Ismael.png';">
+
-
<img style=" border: 5px double black;" name="ismael" src="https://static.igem.org/mediawiki/2012/8/8b/AD_20120802_Ismael.png" ></a></div>
+
-
</html>
+
-
 
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px;position:absolute;margin-left: 680px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/9/93/AD_20120802_Alicja.png"  
+
-
onMouseOver="document.alicja.src='https://static.igem.org/mediawiki/2012/7/7f/AD_20120802_Alicja2.png';" onMouseOut="document.alicja.src='https://static.igem.org/mediawiki/2012/9/93/AD_20120802_Alicja.png';">
+
-
<img style=" border: 5px double black;" name="alicja" src="https://static.igem.org/mediawiki/2012/9/93/AD_20120802_Alicja.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:500px;position:absolute;margin-left: 850px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/1/12/AD_20120802_Jon.png"
+
-
onMouseOver="document.jon.src='https://static.igem.org/mediawiki/2012/0/01/AD_20120802_Jon2.png';" onMouseOut="document.jon.src='https://static.igem.org/mediawiki/2012/1/12/AD_20120802_Jon.png';">
+
-
<img style=" border: 5px double black;" name="jon" src="https://static.igem.org/mediawiki/2012/1/12/AD_20120802_Jon.png" ></a></div>
+
-
</html>
+
-
 
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:810px;position:absolute;margin-left: 70px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/8/87/AD_20120802_Arjan.png"
+
-
onMouseOver="document.arjan.src='https://static.igem.org/mediawiki/2012/e/e9/AD_20120802_Arjan2.png';" onMouseOut="document.arjan.src='https://static.igem.org/mediawiki/2012/8/87/AD_20120802_Arjan.png';">
+
-
<img style=" border: 5px double black;" name="arjan" src="https://static.igem.org/mediawiki/2012/8/87/AD_20120802_Arjan.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:810px;position:absolute;margin-left: 240px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/e/e4/AD_20120802_Nisa.png"
+
-
onMouseOver="document.nisa.src='https://static.igem.org/mediawiki/2012/7/7a/AD_20120802_Nisa2.png';" onMouseOut="document.nisa.src='https://static.igem.org/mediawiki/2012/e/e4/AD_20120802_Nisa.png';">
+
-
<img style=" border: 5px double black;" name="nisa" src="https://static.igem.org/mediawiki/2012/e/e4/AD_20120802_Nisa.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:810px;position:absolute;margin-left: 410px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/0/0d/AD_20120802_Emeraldo.png"
+
-
onMouseOver="document.ema.src='https://static.igem.org/mediawiki/2012/6/6f/AD_20120802_Emeraldo2.png';" onMouseOut="document.ema.src='https://static.igem.org/mediawiki/2012/0/0d/AD_20120802_Emeraldo.png';">
+
-
<img style=" border: 5px double black;" name="ema" src="https://static.igem.org/mediawiki/2012/0/0d/AD_20120802_Emeraldo.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:810px;position:absolute;margin-left: 580px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/3/39/AD_20120802_Tom.png"
+
-
onMouseOver="document.tom.src='https://static.igem.org/mediawiki/2012/3/30/AD_20120802_Tom2.png';" onMouseOut="document.tom.src='https://static.igem.org/mediawiki/2012/3/39/AD_20120802_Tom.png';">
+
-
<img style=" border: 5px double black;" name="tom" src="https://static.igem.org/mediawiki/2012/3/39/AD_20120802_Tom.png" ></a></div>
+
-
</html>
+
-
 
+
-
<html>
+
-
<div style="width: 100%; top:810px;position:absolute;margin-left: 750px;">
+
-
<a href="https://static.igem.org/mediawiki/2012/b/bf/AD_20120802_Yonathan.png"
+
-
onMouseOver="document.yon.src='https://static.igem.org/mediawiki/2012/c/cc/AD_20120802_Yonathan2.png';" onMouseOut="document.yon.src='https://static.igem.org/mediawiki/2012/b/bf/AD_20120802_Yonathan.png';">
+
-
<img style=" border: 5px double black;" name="yon" src="https://static.igem.org/mediawiki/2012/b/bf/AD_20120802_Yonathan.png" ></a></div>
+
-
</html>
+
-
 
+
-
 
+
-
<html>
+
-
<head>
+
-
<style>
+
-
 
+
-
body {
+
-
font-family: Helvetica, Arial, sans-serif;
+
-
 
+
-
                }
+
-
z2 {
+
-
font-size:21pt;
+
-
line-height:21pt;
+
-
color:white;
+
-
}
+
-
                .ctf {
+
-
+
-
+
-
                        width: 440px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        padding: 10px ;
+
-
                        margin: 0px auto;
+
-
                     
+
-
                        color: #FFF;
+
-
 
+
-
}
+
-
                .ctg {
+
-
left: 300px;
+
-
top:1200px;
+
-
position:absolute;
+
-
+
-
                        width: 500px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
 
+
-
}
+
-
</style>
+
-
 
+
-
 
+
-
<div class="ctg">
+
-
<div class="ctf">
+
-
<z2 >ADVISORS & SUPERVISORS</z2><br>
+
</div>
</div>
-
</div>
 
-
</body>
 
-
</head>
 
-
</html>
 
-
<html>
+
<div style="position:absolute; left: 661px; top: 30px;opacity:0.4;
-
<head>
+
filter:alpha(opacity=40);">
-
<style>
+
<img  id="cog5" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" />
-
 
+
-
body {
+
-
font-family: Helvetica, Arial, sans-serif;
+
-
 
+
-
                }
+
-
elbrichP {
+
-
font-size:12pt;
+
-
                        line-height:12pt;
+
-
                        color:white;
+
-
}
+
-
                .elbrich1 {
+
-
                        width: 110px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        padding: 10px ;
+
-
                        margin: 0px auto;
+
-
                        color: #FFF;
+
-
}
+
-
                .elbrich2 {
+
-
left: 0px;
+
-
top:750px;
+
-
position:absolute;
+
-
                        width: 130px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
 
+
-
}
+
-
</style>
+
-
 
+
-
<div class="elbrich2">
+
-
<div class="elbrich1">
+
-
<elbrichP >Elbrich<br>team leader</elbrichP><br>
+
</div>
</div>
-
</div>
 
-
</body>
 
-
</head>
 
-
</html>
 
-
 
+
<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" />
-
<html>
+
-
<head>
+
-
<style>
+
-
 
+
-
body {
+
-
font-family: Helvetica, Arial, sans-serif;
+
-
 
+
-
                }
+
-
renskeP {
+
-
font-size:12pt;
+
-
                        line-height:12pt;
+
-
                        color:white;
+
-
}
+
-
                .renske1 {
+
-
                        width: 110px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        padding: 10px ;
+
-
                        margin: 0px auto;
+
-
                        color: #FFF;
+
-
}
+
-
                .renske2 {
+
-
left: 170px;
+
-
top:750px;
+
-
position:absolute;
+
-
                        width: 130px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
 
+
-
}
+
-
</style>
+
-
 
+
-
 
+
-
<div class="renske2">
+
-
<div class="renske1">
+
-
<renskeP >Renske<br>secretary ,PR</renskeP><br>
+
</div>
</div>
-
</div>
 
-
</body>
 
-
</head>
 
-
</html>
 
-
<html>
+
<div class="expand-down">
-
<head>
+
<ul id="navigation" >
-
<style>
+
<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>
-
body {
+
<div class="cogbig">
-
font-family: Helvetica, Arial, sans-serif;
+
<img id="cogbighome" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
 +
</div>
-
                }
+
</li>
-
WladaP {
+
<li class="sub" id="menuteam">
-
font-size:12pt;
+
<div class="cogbig">
-
                        line-height:12pt;
+
<img id="cogbigteam" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80">
-
                        color:white;
+
</div>
-
}
+
<a href="https://2012.igem.org/Team:Groningen/Team" title="Team" rel="nofollow" >
-
                .Wlada1 {
+
<img src="https://static.igem.org/mediawiki/2012/f/fc/Groningen2012_ID_20120808_Menu_Team.png" alt="team" title="Team" />
-
                        width: 110px;
+
<span>team</span>
-
text-align: center;
+
<ul>
-
                        background: #000;
+
<li><a href="https://2012.igem.org/Team:Groningen/Team">about us</a></li>
-
background-color: transparent;
+
<li><a href="https://igem.org/Team.cgi?id=818" TARGET="_blank">official profile</a></li>
-
background-color: rgba(0,0,0,0.3);
+
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Gallery">gallery</a></li>
-
                        padding: 10px ;
+
                                                       
-
                        margin: 0px auto;
+
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Attributions">attributions</a></li>
-
                        color: #FFF;
+
                                                        <li><a href="https://2012.igem.org/Team:Groningen/acknowledgements">acknowledgements</a></li>
-
}
+
-
                .Wlada2 {
+
-
left: 340px;
+
-
top:750px;
+
-
position:absolute;
+
-
                        width: 130px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
}
+
                                                        <li><a href="https://2012.igem.org/Team:Groningen/Contact">contact</a></li>
-
</style>
+
</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" />
-
<div class="Wlada2">
 
-
<div class="Wlada1">
 
-
<WladaP >Wlada<br>treasurer, PR</WladaP><br>
 
-
</div>
 
-
</div>
 
-
</body>
 
-
</head>
 
-
</html>
 
-
<html>
+
</script>
-
<head>
+
</li>
-
<style>
+
</ul>
 +
</div>
-
body {
 
-
font-family: Helvetica, Arial, sans-serif;
 
-
                }
 
-
IsmaelP {
 
-
font-size:12pt;
 
-
                        line-height:12pt;
 
-
                        color:white;
 
-
}
 
-
                .Ismael1 {
 
-
                        width: 110px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        padding: 10px ;
 
-
                        margin: 0px auto;
 
-
                        color: #FFF;
 
-
}
 
-
                .Ismael2 {
 
-
left: 510px;
 
-
top:750px;
 
-
position:absolute;
 
-
                        width: 130px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
padding-right:10px;
 
-
padding-left:10px;
 
-
                        margin: 0 auto;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        color: #FFF;
 
-
}
 
-
</style>
 
 +
</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;
-
<div class="Ismael2">
+
var target = ".cogbig";
-
<div class="Ismael1">
+
setInterval(function(){
-
<IsmaelP >Ismaêl<br>web developer</IsmaelP><br>
+
      cogangle-=cog;
-
</div>
+
    $(target).rotate(cogangle);
-
</div>
+
if (target=="#cogbigsponsors")
-
</body>
+
  {
-
</head>
+
$("#img1").rotate(cogangle);
-
</html>
+
$("#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";
-
<html>
+
} 
-
<head>
+
},30);
-
<style>
+
-
body {
 
-
font-family: Helvetica, Arial, sans-serif;
 
-
                }
 
-
AlicjaP {
 
-
font-size:12pt;
 
-
                        line-height:12pt;
 
-
                        color:white;
 
-
}
 
-
                .Alicja1 {
 
-
                        width: 110px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        padding: 10px ;
 
-
                        margin: 0px auto;
 
-
                        color: #FFF;
 
-
}
 
-
                .Alicja2 {
 
-
left: 680px;
 
-
top:750px;
 
-
position:absolute;
 
-
                        width: 130px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
padding-right:10px;
 
-
padding-left:10px;
 
-
                        margin: 0 auto;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        color: #FFF;
 
-
}
+
</script>
-
</style>
+
-
 
-
<div class="Alicja2">
 
-
<div class="Alicja1">
 
-
<AlicjaP >Alicja<br>web designer</AlicjaP><br>
 
-
</div>
 
-
</div>
 
-
</body>
 
-
</head>
 
</html>
</html>
-
<html>
 
-
<head>
 
-
<style>
 
-
body {
 
-
font-family: Helvetica, Arial, sans-serif;
 
-
                }
 
-
JonP {
 
-
font-size:12pt;
 
-
                        line-height:12pt;
 
-
                        color:white;
 
-
}
 
-
                .Jon1 {
 
-
                        width: 110px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        padding: 10px ;
 
-
                        margin: 0px auto;
 
-
                        color: #FFF;
 
-
}
 
-
                .Jon2 {
 
-
left: 850px;
 
-
top:750px;
 
-
position:absolute;
 
-
                        width: 130px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
padding-right:10px;
 
-
padding-left:10px;
 
-
                        margin: 0 auto;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        color: #FFF;
 
-
}
 
-
</style>
 
-
<div class="Jon2">
 
-
<div class="Jon1">
 
-
<JonP >Jonathan<br>modeler</JonP><br>
 
-
</div>
 
-
</div>
 
-
</body>
 
-
</head>
 
-
</html>
 
<html>
<html>
<head>
<head>
<style>
<style>
 +
#img2{
 +
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;
 +
}             
-
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>
-
                }
 
-
ArjanP {
 
-
font-size:12pt;
 
-
                        line-height:12pt;
 
-
                        color:white;
 
-
}
 
-
                .Arjan1 {
 
-
                        width: 110px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        padding: 10px ;
 
-
                        margin: 0px auto;
 
-
                        color: #FFF;
 
-
}
 
-
                .Arjan2 {
 
-
left: 70px;
 
-
top:1060px;
 
-
position:absolute;
 
-
                        width: 130px;
 
-
text-align: center;
 
-
                        background: #000;
 
-
padding-right:10px;
 
-
padding-left:10px;
 
-
                        margin: 0 auto;
 
-
background-color: transparent;
 
-
background-color: rgba(0,0,0,0.3);
 
-
                        color: #FFF;
 
-
 
-
}
 
-
</style>
 
-
 
-
<div class="Arjan2">
 
-
<div class="Arjan1">
 
-
<ArjanP >Arjan<br>lab manager</ArjanP><br>
 
-
</div>
 
-
</div>
 
-
</body>
 
</head>
</head>
</html>
</html>
<html>
<html>
-
<head>
+
<script type="text/javascript">
-
<style>
+
-
body {
+
  var _gaq = _gaq || [];
-
font-family: Helvetica, Arial, sans-serif;
+
  _gaq.push(['_setAccount', 'UA-34029773-1']);
 +
  _gaq.push(['_trackPageview']);
-
                }
+
  (function() {
-
NisaP {  
+
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-
font-size:12pt;
+
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-
                        line-height:12pt;
+
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-
                        color:white;
+
  })();
-
}
+
-
                .Nisa1 {
+
-
                        width: 110px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        padding: 10px ;
+
-
                        margin: 0px auto;
+
-
                        color: #FFF;
+
-
}
+
-
                .Nisa2 {
+
-
left: 240px;
+
-
top:1060px;
+
-
position:absolute;
+
-
                        width: 130px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
}
+
</script>
-
</style>
+
-
 
+
-
<div class="Nisa2">
+
-
<div class="Nisa1">
+
-
<NisaP >Nisa<br>lab manager</NisaP><br>
+
-
</div>
+
-
</div>
+
-
</body>
+
-
</head>
+
</html>
</html>
<html>
<html>
-
<head>
+
<head>
-
<style>
+
<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;
-
body {
+
margin-top:0px;
-
font-family: Helvetica, Arial, sans-serif;
+
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;
-
EmaP {  
+
margin-bottom:0px;
-
font-size:12pt;
+
margin-right:300px;
-
                        line-height:12pt;
+
margin-left:300px;
-
                        color:white;
+
}
-
}
+
a.inlink{
-
                 .Ema1 {
+
font-size: 12pt;
-
                        width: 110px;
+
                line-height: 12pt;
-
text-align: center;
+
                color: rgb(255,103,0);
-
                        background: #000;
+
}
-
background-color: transparent;
+
a.menulink{
-
background-color: rgba(0,0,0,0.3);
+
font-size:12pt;
-
                        padding: 10px ;
+
line-height:12pt;
-
                        margin: 0px auto;
+
color:white;
-
                        color: #FFF;
+
font-weight: 500;
-
}
+
}
-
                .Ema2 {
+
a.menulink:hover{
-
left: 410px;
+
font-size:12pt;
-
top:1060px;
+
line-height:12pt;
-
position:absolute;
+
color: rgb(255,103,0);
-
                        width: 130px;
+
font-weight: 700;
-
text-align: center;
+
}
-
                        background: #000;
+
a:link {
-
padding-right:10px;
+
color: #FFFFFF;
-
padding-left:10px;
+
}
-
                        margin: 0 auto;
+
a:visited {
-
background-color: transparent;
+
color: #FFFFFF;
-
background-color: rgba(0,0,0,0.3);
+
}
-
                        color: #FFF;
+
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>
-
</style>
+
<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>
-
<div class="Ema2">
+
<a name="MainAcc"></a>
-
<div class="Ema1">
+
<div class="cte2">
-
<EmaP >Emeraldo<br>lab manager</EmaP><br>
+
<div class="ctd2">
-
</div>
+
<a name="MainAcc"></a><z2 >Our main accomplishments</z2><br><br>
-
</div>
+
</div>
-
</body>
+
</div>
-
</head>
+
<br>
-
</html>
+
<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">
-
<html>
+
<tr>
-
<head>
+
<td class="accPic">
-
<style>
+
<ul class="hoverbox">
-
 
+
<li>
-
body {
+
<a href="#">
-
font-family: Helvetica, Arial, sans-serif;
+
<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>
-
TomP {
+
</li>
-
font-size:12pt;
+
</ul>
-
                        line-height:12pt;
+
</td>
-
                        color:white;
+
<td class="accPic">
-
}
+
<ul class="hoverbox">
-
                .Tom1 {
+
<li>
-
                        width: 110px;
+
<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>
-
text-align: center;
+
</li>
-
                        background: #000;
+
</ul>
-
background-color: transparent;
+
</td>
-
background-color: rgba(0,0,0,0.3);
+
</tr>
-
                        padding: 10px ;
+
<tr>
-
                        margin: 0px auto;
+
<td class="accCap">
-
                        color: #FFF;
+
<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>.
-
                .Tom2 {
+
</p>
-
left: 580px;
+
</td>
-
top:1060px;
+
<td class="accCap">
-
position:absolute;
+
<p class="small">
-
                        width: 130px;
+
<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>
-
text-align: center;
+
</p>
-
                        background: #000;
+
</td>
-
padding-right:10px;
+
</tr>
-
padding-left:10px;
+
<tr>
-
                        margin: 0 auto;
+
<td class="accPic">
-
background-color: transparent;
+
<ul class="hoverbox">
-
background-color: rgba(0,0,0,0.3);
+
<li>
-
                        color: #FFF;
+
<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 />
-
</style>
+
</a>
-
 
+
</li>
-
<div class="Tom2">
+
</ul>
-
<div class="Tom1">
+
</td>
-
<TomP >Tom<br>lab hero</TomP><br>
+
<td class="accPic">
-
</div>
+
<ul class="hoverbox">
-
</div>
+
<li>
-
</body>
+
<a href="#">
-
</head>
+
<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>
</html>
-
<html>
+
{{Template:SponsorsGroningen2012}}
-
<head>
+
-
<style>
+
-
 
+
-
body {  
+
-
font-family: Helvetica, Arial, sans-serif;
+
-
 
+
-
                }
+
-
YonP {  
+
-
font-size:12pt;
+
-
                        line-height:12pt;
+
-
                        color:white;
+
-
}
+
-
                .Yon1 {
+
-
                        width: 110px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        padding: 10px ;
+
-
                        margin: 0px auto;
+
-
                        color: #FFF;
+
-
}
+
-
                .Yon2 {
+
-
left: 750px;
+
-
top:1060px;
+
-
position:absolute;
+
-
                        width: 130px;
+
-
text-align: center;
+
-
                        background: #000;
+
-
padding-right:10px;
+
-
padding-left:10px;
+
-
                        margin: 0 auto;
+
-
background-color: transparent;
+
-
background-color: rgba(0,0,0,0.3);
+
-
                        color: #FFF;
+
-
 
+
-
}
+
-
</style>
+
-
 
+
-
<div class="Yon2">
+
-
<div class="Yon1">
+
-
<YonP >Yonathan<br>lab hero</YonP><br>
+
-
</div>
+
-
</div>
+
-
</body>
+
-
</head>
+
-
</html>
+
-
 
+
-
 
+
-
https://static.igem.org/mediawiki/2011/7/72/Facebook_logo_25px.png [http://facebook.com/igemgroningen2012 Follow us on Facebook!]
+
-
 
+
-
 
+
-
== '''Advisors & Supervisors''' ==
+
-
{|border = "0"|
+
-
|-
+
-
{|rowspan="3"|
+
-
|-
+
-
|
+
-
{|
+
-
|-
+
-
|'''Instructors:'''         
+
-
|-
+
-
|&bull; [http://www.molgenrug.nl/members/member.php#1 Oscar Kuipers]       
+
-
|-
+
-
|&bull; [http://www.molgenrug.nl/members/member.php#3 Jan-Willem Veening] 
+
-
|-
+
-
|&bull; [http://www.rug.nl/fmns-research/molecularsystemsbiology/index Matthias Heinemann] 
+
-
|-
+
-
|-
+
-
|'''Advisors:'''
+
-
|-
+
-
|&bull; [http://www.molgenrug.nl/members/member.php#42 Robin Sorg]
+
-
|-
+
-
|&bull; [http://www.molgenrug.nl/members/member.php#36 Sjoerd van der Meulen]
+
-
|-
+
-
|&bull; [http://www.molgenrug.nl/members/member.php#31 Auke van Heel]
+
-
|}
+
-
|}
+
-
 
+
-
== '''Contact details''' ==
+
-
 
+
-
team(at)igemgroningen.com
+
-
 
+
-
 
+
-
iGEM Groningen 2012
+
-
 
+
-
Molecular Genetics (6th floor)
+
-
 
+
-
Nijenborgh 7
+
-
 
+
-
9747 AG Groningen
+
-
 
+
-
The Netherlands
+
-
 
+
-
 
+
-
== '''iGEM Groningen 2012 in press''' ==
+
-
 
+
-
[[File: Groningen2012_EH_20120808_GGezinsbode.jpg|500px|thumb|left|Front page of the Groninger Gezinsbode]]
+
-
 
+
-
[[File: Groningen_RR_20120627_Faculty_newsletter.jpg|400px|thumb|left|iGEM Groningen in the Faculty Newsletter of  Mathematics and Natural Sciences]]
+
-
 
+
-
[[File: Groningen2012_EH_08082012_P7060575.JPG|500px|thumb|left|iGEM Groningen in the Lifeline magazine of GLV Idun, the Biology and Life Science & Technology student association.]]
+

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"