Team:Cambridge/Templates/boxesprototypenew

From 2010.igem.org

(Difference between revisions)
 
(42 intermediate revisions not shown)
Line 5: Line 5:
<div id="leftcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
<div id="leftcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
-
<p style="line-height:120%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">We placed genes from <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Bioluminescence">fireflies</a> and bioluminescent <a style="color:#6bbe00 !important"  href="https://2010.igem.org/Team:Cambridge/Bioluminescence/Bacterial_Luciferases">prokaryotes</a> into E.coli to add brighter bacterial light to the registry. We used site-directed mutagenesis to create a wide range of coloured bioluminescent BioBricks.</p>
+
<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;"> We placed genes from <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Bioluminescence">fireflies</a> and bioluminescent <a style="color:#6bbe00 !important"  href="https://2010.igem.org/Team:Cambridge/Bioluminescence/Bacterial_Luciferases">bacteria</a> into E.coli. Codon optimisation and single amino acid mutagenesis allowed us to generate bright light output in a range of different colours. Future applications include  and quantitative <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Tools/microMeasure">biosensors</a> and biological <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Tools/Lighting">alternatives</a> to conventional lighting.</p>
-
<p style="line-height:120%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">We  pioneered and documented the recently described <a style="color:#6bbe00 !important" href="https://2010.igem.org/Team:Cambridge/Gibson/Introduction">Gibson Assembly</a> technique, building hardware and software tools to help future teams.</p></div>
+
</div>
</div>
</div>
Line 14: Line 14:
<div id="ccontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
<div id="ccontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
-
<p style="line-height:120%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">If you want a break from hard-core science, check out our Gibson Assembly  <a  style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/WCWjJFU1be8?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">music video</a>.<br /><br />You can also see a video which shows off our <a style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/tUFscEVK5Ks?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">bacterial bubble lamp</a>.
+
<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">If you want a break from hard-core science, check out our Gibson Assembly  <a  style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/WCWjJFU1be8?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">music video</a>.<br /><br />You can also see view videos of our <a style="color:#d9b400 !important" onclick="displayGibson('http://www.youtube.com/v/tUFscEVK5Ks?fs=1&amp;hl=en_GB'); return false;" href="http://www.youtube.com/watch?v=WCWjJFU1be8">bacterial bubble lamp</a> and <a style="color:#d9b400 !important" onclick="displayGibson('http://www.cambridgeigem.org/video.php'); return false;" href="http://www.cambridgeigem.org/video.php?nojs=true">project overview</a>.
<script>
<script>
 +
var dontclose=false;
function displayGibson(youTubeURL){
function displayGibson(youTubeURL){
var newDiv = document.createElement('div');
var newDiv = document.createElement('div');
newDiv.setAttribute('id',"GibsonVidOverlay");
newDiv.setAttribute('id',"GibsonVidOverlay");
-
newDiv.setAttribute('style',"width:100%;height:100%;background:black; position:fixed; left:0; top:0;z-index:100; background:url(https://static.igem.org/mediawiki/2010/e/e9/Opacity9.png) ;");
+
newDiv.setAttribute('style',"width:100%;height:100%;background:black; position:fixed; left:0; top:0;z-index:100;  text-align:center; background:url(https://static.igem.org/mediawiki/2010/e/e9/Opacity9.png) ;");
-
newDiv.setAttribute('onclick',";$('body')[0].removeChild($('#GibsonVidOverlay')[0]);");
+
newDiv.setAttribute('onclick',";hideOverlay();");
-
newDiv.innerHTML='<div align="center" style="margin-top:100px;"><object width="640" height="385"><param name="movie" value="'+youTubeURL+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+youTubeURL+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></div>';
+
newDiv.innerHTML='<div style="margin-top:100px; z-index:1000;padding:10px; background:#080808;width:640px; margin-left: auto; margin-right:auto;" onclick="dontclose=true;"><object width="640" height="385"><param name="movie" value="'+youTubeURL+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+youTubeURL+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></div><a href="#" style="color:white !important; margin-top:20px; font-size:15px;" onclick="hideOverlay()">close</a>';
$('body')[0].appendChild(newDiv);
$('body')[0].appendChild(newDiv);
 +
}
 +
function hideOverlay(){
 +
if(dontclose){
 +
dontclose=false;
 +
}
 +
else{
 +
$('body')[0].removeChild($('#GibsonVidOverlay')[0]);
 +
}
}
}
</script>
</script>
Line 30: Line 39:
<div id="rightbox" style="float:left;  height:200px; margin-left:5px; width:242px;" class="tophome">
<div id="rightbox" style="float:left;  height:200px; margin-left:5px; width:242px;" class="tophome">
-
<div id="rtop" style="background:#fb5c2b;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader">Updates</div>
+
<div id="rtop" style="background:#fb5c2b;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader">Tools</div>
<div id="rcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
<div id="rcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f8f8f8));  
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px; margin-top:5px; position:relative;">
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px; margin-top:5px; position:relative;">
-
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
+
<div style="position:relative; top:10px;">
-
<style>
+
<a href="http://www.gibthon.org" id="leftbox" style="background:url('https://static.igem.org/mediawiki/2010/5/53/Cambridge-Gibthon.png'); position:absolute; width:120px; height:100px; left:0;top:0; background-repeat:no-repeat; display:block;text-align:center; padding-top:70px; background-position: center top; color:#e53500 !important;" >
-
.twtr-hd{display:none;}
+
Gibson<br />Assembly
-
.twtr-ft{display:none;}
+
</a>
-
.twtr-tweet-text p{text-align:left; font-size:90%}
+
<a href="http://www.gibthon.org/ligate.html" id="rightbox" style="background:url('https://static.igem.org/mediawiki/2010/b/b1/Cambridge-Flask.png'); position:absolute; width:120px; height:100px; left:120px; text-align:center;top:0; background-repeat:no-repeat;display:block; padding-top:70px; background-position: center top; color:#e53500 !important;" />
-
.twtr-tweet{border-bottom:0;}
+
Ligation<br />Calculator
-
</style>
+
</a>
-
<script>
+
</div>
-
new TWTR.Widget({
+
-
  version: 2,
+
-
  type: 'profile',
+
-
  rpp: 2,
+
-
  interval: 2000,
+
-
  width: 236,
+
-
  height: 130,
+
-
  theme: {
+
-
    shell: {
+
-
      background: 'transparent',
+
-
      color: '#333333'
+
-
    },
+
-
    tweets: {
+
-
      background: 'transparent',
+
-
      color: '#333333',
+
-
      links: '#000000'
+
-
    }
+
-
  },
+
-
  features: {
+
-
    scrollbar: false,
+
-
    loop: false,
+
-
    live: true,
+
-
    hashtags: true,
+
-
    timestamp: true,
+
-
    avatars: false,
+
-
    behavior: 'default'
+
-
  }
+
-
}).render().setUser('camgem').start();
+
-
</script>
+
-
<a href="http://twitter.com/camgem" style="position:absolute;z-index:100; left:10px; bottom:5px;"><img width="100" src="https://static.igem.org/mediawiki/2010/a/aa/Cambridge-twitter.png" /></a>
+
-
<a href="http://facebook.com/cambridgeigem" style="position:absolute;z-index:100; right:10px; bottom:5px;"><img src="https://static.igem.org/mediawiki/2010/a/a1/Cambridge-facebook.png" style="border:2px solid #3b5998"/></a>
+
</div>
</div>
</div>
</div>
</html>
</html>

Latest revision as of 19:43, 7 June 2011

Abstract

We placed genes from fireflies and bioluminescent bacteria into E.coli. Codon optimisation and single amino acid mutagenesis allowed us to generate bright light output in a range of different colours. Future applications include and quantitative biosensors and biological alternatives to conventional lighting.

Multimedia

If you want a break from hard-core science, check out our Gibson Assembly music video.

You can also see view videos of our bacterial bubble lamp and project overview.