Team:Washington/LightSensing

From 2013.igem.org

(Difference between revisions)
(→Backgrounds)
Line 1: Line 1:
-
<html>
+
{{:Team:Washington/WA_Template}}
-
<style type="text/css">
 
-
.firstHeading {                                                    /* Gets rid of the default iGEM picture*/
 
-
    height:2px;
 
-
    visibility:hidden;
 
-
}
 
-
#catlinks {
 
-
    display: none;
 
-
}
 
-
#content {
 
-
    border-left-width:0px;
 
-
    border-right-width:0px;
 
-
    padding: 0px 5px 0px 5px;
 
-
    width:965px;                                                    /* Content width*/
 
-
}
 
-
#menubar {
 
-
    background-color:  #FFFFFF;                              /* left menu bar color*/
 
-
}
 
-
#menubar ul li a {
 
-
    color: #545353; }                                            /* menu text color*/
 
-
    .right-menu li a {
 
-
    color: red; 
 
-
    background-color: #FFFFFF;                              /* right menu bar color*/
 
-
}
 
-
#p-logo { height 1px; overflow:hidden; display: none;
 
-
}
 
-
#top-section {     
 
-
        background-position: center center;
 
-
        background-repeat: no-repeat;
 
-
        background-color: #FFFFFF;                        /* top header background color*/
 
-
        border-width:0px;
 
-
        height:10px;                        /* top header height (determines how low content will start to appear)*/
 
-
}
 
-
#siteSub {
 
-
display:none;
 
-
}
 
-
#search-controls {                                                /* gets rid of the search bar (it was ugly) */
 
-
display:none;
 
-
margin-top:0px;
 
-
}
 
-
#contentSub {
 
-
display:none;
 
-
}
 
-
 
-
/*Now to set heading and body fonts*/
 
-
body {
 
-
background:#4B0082;
 
-
background-image: url("https://static.igem.org/mediawiki/2012/1/1b/Gradientback.jpg");
 
-
background-position: center;
 
-
background-repeat: repeat-y;
 
-
}               
 
-
h1
 
-
{
 
-
color:#262626;
 
-
text-align:left;
 
-
font-family:"Trebuchet";
 
-
font-size:25px;
 
-
line-height:100%;
 
-
border-bottom: none;
 
-
padding:0px 0px 0px 0px; 
 
-
margin: 0px 0px 0px 0px;
 
-
}
 
-
h2
 
-
{
 
-
color:#262626;
 
-
text-align:left;
 
-
font-family:"Trebuchet";
 
-
font-size:20px;
 
-
line-height: 100%;
 
-
border-bottom: none; 
 
-
padding:0px 0px 0px 0px; 
 
-
margin: 0px 0px 0px 0x;
 
-
}
 
-
h3
 
-
{
 
-
color:#262626;
 
-
text-align:left;
 
-
font-family:"Trebuchet";
 
-
font-size:17px;
 
-
line-height: 100%;
 
-
border-bottom: none; 
 
-
padding:0px 0px 0px 0px; 
 
-
margin: 0px 0px 0px 0x;
 
-
}
 
-
p
 
-
{
 
-
color:#262626;
 
-
text-align: justify;
 
-
font-family:"Arial";
 
-
font-size:14px;
 
-
line-height:100%
 
-
border-bottom: none;
 
-
padding:0px 0px 0px 0px; 
 
-
margin: 0px 0px 0px 0x;
 
-
border:0px
 
-
}
 
-
body {
 
-
color:#808080;
 
-
line-height: 1;
 
-
font-family:"Arial";
 
-
font-size:11px; 
 
-
}
 
-
 
-
.whitebox {
 
-
  -moz-box-shadow:  0px 0px 0px #ccc;
 
-
  -webkit-box-shadow:  0px 0px 0px #ccc;
 
-
  box-shadow:  0px 0px 15px #ccc;
 
-
  background-color: #FFFFFF;
 
-
  -moz-border-radius: 1px;
 
-
  border-radius: 15px;
 
-
  margin-top: 20px;
 
-
  padding-top: 20px;
 
-
  padding-left: 20px;
 
-
  padding-right: 20px;
 
-
  padding-bottom: 20px;
 
-
  margin-left: 15px;
 
-
  margin-right: 25px;
 
-
}
 
-
.thumbnail
 
-
{
 
-
margin-bottom:0px;
 
-
padding-bottom:0px;
 
-
position:relative;
 
-
}
 
-
 
-
#igemuwmenu, #igemuwmenu ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
list-style: none;
 
-
}
 
-
 
-
#igemuwmenu {
 
-
width: 820px;
 
-
margin: 10px auto;
 
-
border: 1px solid #222;
 
-
background-color: #111;
 
-
background-image: -moz-linear-gradient(#444, #111);
 
-
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 
-
background-image: -webkit-linear-gradient(#444, #111);
 
-
background-image: -o-linear-gradient(#444, #111);
 
-
background-image: -ms-linear-gradient(#444, #111);
 
-
background-image: linear-gradient(#444, #111);
 
-
-moz-border-radius: 6px;
 
-
-webkit-border-radius: 6px;
 
-
border-radius: 6px;
 
-
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
                display: inline-block;
 
-
                white-space: nowrap;
 
-
}
 
-
 
-
#igemuwmenu:before,
 
-
#igemuwmenu:after {
 
-
content: "";
 
-
display: table;
 
-
}
 
-
 
-
#igemuwmenu:after {
 
-
clear: both;
 
-
}
 
-
 
-
#igemuwmenu {
 
-
zoom:1;
 
-
}
 
-
 
-
#igemuwmenu li {
 
-
border-right: 1px solid #222;
 
-
-moz-box-shadow: 1px 0 0 #444;
 
-
-webkit-box-shadow: 1px 0 0 #444;
 
-
box-shadow: 1px 0 0 #444;
 
-
position: relative;
 
-
                display: inline-block;
 
-
                white-space: nowrap;
 
-
}
 
-
 
-
#igemuwmenu a {
 
-
padding: 12px 20px;
 
-
color: #999;
 
-
text-transform: uppercase;
 
-
font: bold 11.4px Arial, Helvetica;
 
-
text-decoration: none;
 
-
text-shadow: 0 1px 0 #000;
 
-
                display: inline-block;
 
-
                white-block: nowrap;
 
-
}
 
-
       
 
-
    #igemuwmenu li:hover > a {
 
-
color: #fafafa;
 
-
}
 
-
 
-
*html #igemuwmenu li a:hover { /* IE6 only */
 
-
color: #fafafa;
 
-
}
 
-
 
-
#igemuwmenu ul {
 
-
margin: 20px 0 0 0;
 
-
_margin: 0; /*IE6 only*/
 
-
opacity: 0;
 
-
visibility: hidden;
 
-
position: absolute;
 
-
top: 38px;
 
-
left: 0;
 
-
z-index: 1;   
 
-
background: #444;
 
-
background: -moz-linear-gradient(#444, #111);
 
-
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 
-
background: -webkit-linear-gradient(#444, #111);   
 
-
background: -o-linear-gradient(#444, #111);
 
-
background: -ms-linear-gradient(#444, #111);
 
-
background: linear-gradient(#444, #111);
 
-
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 
-
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 
-
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 
-
-moz-border-radius: 3px;
 
-
-webkit-border-radius: 3px;
 
-
border-radius: 3px;
 
-
-webkit-transition: all .2s ease-in-out;
 
-
-moz-transition: all .2s ease-in-out;
 
-
-ms-transition: all .2s ease-in-out;
 
-
-o-transition: all .2s ease-in-out;
 
-
transition: all .2s ease-in-out; 
 
-
}
 
-
 
-
#igemuwmenu li:hover > ul {
 
-
opacity: 1;
 
-
visibility: visible;
 
-
margin: 0;
 
-
}
 
-
 
-
#igemuwmenu ul ul {
 
-
top: 0;
 
-
left: 150px;
 
-
margin: 0 0 0 20px;
 
-
_margin: 0; /*IE6 only*/
 
-
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 
-
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 
-
box-shadow: -1px 0 0 rgba(255,255,255,.3);
 
-
}
 
-
 
-
#igemuwmenu ul li {
 
-
float: none;
 
-
display: block;
 
-
border: 0;
 
-
_line-height: 0; /*IE6 only*/
 
-
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
}
 
-
#igemuwmenu ul li.active {
 
-
float: none;
 
-
display: block;
 
-
border: 0;
 
-
_line-height: 0; /*IE6 only*/
 
-
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 
-
}
 
-
 
-
 
-
#igemuwmenu ul li:last-child { 
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;   
 
-
}
 
-
 
-
#igemuwmenu ul a {   
 
-
padding: 10px;
 
-
width: 130px;
 
-
_height: 10px; /*IE6 only*/
 
-
display: block;
 
-
white-space: nowrap;
 
-
float: none;
 
-
text-transform: none;
 
-
}
 
-
     
 
-
        #igemuwmenu ul a.selected {   
 
-
padding: 10px;
 
-
width: 130px;
 
-
_height: 10px; /*IE6 only*/
 
-
display: block;
 
-
white-space: nowrap;
 
-
float: none;
 
-
text-transform: none;
 
-
}
 
-
 
-
#igemuwmenu ul a:hover {
 
-
background-color: #785D84;
 
-
background-image: -moz-linear-gradient(#B6A0BA,  #785D84);
 
-
background-image: -webkit-gradient(linear, left top, left bottom, from(#B6A0BA), to(#785D84));
 
-
background-image: -webkit-linear-gradient(#B6A0BA, #785D84);
 
-
background-image: -o-linear-gradient(#B6A0BA, #785D84);
 
-
background-image: -ms-linear-gradient(#B6A0BA, #785D84);
 
-
background-image: linear-gradient(#B6A0BA, #785D84);
 
-
}
 
-
 
-
#igemuwmenu ul li:first-child > a {
 
-
-moz-border-radius: 3px 3px 0 0;
 
-
-webkit-border-radius: 3px 3px 0 0;
 
-
border-radius: 3px 3px 0 0;
 
-
}
 
-
 
-
#igemuwmenu ul li:first-child > a:after {
 
-
content: '';
 
-
position: absolute;
 
-
left: 40px;
 
-
top: -6px;
 
-
border-left: 6px solid transparent;
 
-
border-right: 6px solid transparent;
 
-
border-bottom: 6px solid #444;
 
-
}
 
-
 
-
#igemuwmenu ul ul li:first-child a:after {
 
-
left: -6px;
 
-
top: 50%;
 
-
margin-top: -6px;
 
-
border-left: 0;
 
-
border-bottom: 6px solid transparent;
 
-
border-top: 6px solid transparent;
 
-
border-right: 6px solid #3b3b3b;
 
-
}
 
-
 
-
#igemuwmenu ul li:first-child a:hover:after {
 
-
border-bottom-color: #B6A0BA;
 
-
}
 
-
 
-
#igemuwmenu ul ul li:first-child a:hover:after {
 
-
border-right-color: #0299d3;
 
-
border-bottom-color: transparent;
 
-
}
 
-
 
-
#igemuwmenu ul li:last-child > a {
 
-
-moz-border-radius: 0 0 3px 3px;
 
-
-webkit-border-radius: 0 0 3px 3px;
 
-
border-radius: 0 0 3px 3px;
 
-
}
 
-
 
-
/* Mobile */
 
-
#igemuwmenu-trigger {
 
-
display: none;
 
-
}
 
-
 
-
@media screen and (max-width: 600px) {
 
-
 
-
/* nav-wrap */
 
-
#igemuwmenu-wrap {
 
-
position: relative;
 
-
}
 
-
 
-
#igemuwmenu-wrap * {
 
-
-moz-box-sizing: border-box;
 
-
-webkit-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
 
-
/* menu icon */
 
-
#igemuwmenu-trigger {
 
-
display: block; /* show menu icon */
 
-
height: 40px;
 
-
line-height: 40px;
 
-
cursor: pointer;
 
-
padding: 0 0 0 35px;
 
-
border: 1px solid #222;
 
-
color: #fafafa;
 
-
font-weight: bold;
 
-
background-color: #111;
 
-
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
 
-
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
 
-
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
 
-
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
 
-
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
 
-
-moz-border-radius: 6px;
 
-
-webkit-border-radius: 6px;
 
-
border-radius: 6px;
 
-
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 
-
}
 
-
 
-
/* main nav */
 
-
#igemuwmenu {
 
-
margin: 0; padding: 10px;
 
-
position: absolute;
 
-
top: 40px;
 
-
width: 100%;
 
-
z-index: 1;
 
-
background-color: #444;
 
-
display: none;
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;
 
-
}
 
-
 
-
#igemuwmenu:after {
 
-
content: '';
 
-
position: absolute;
 
-
left: 25px;
 
-
top: -8px;
 
-
border-left: 8px solid transparent;
 
-
border-right: 8px solid transparent;
 
-
border-bottom: 8px solid #444;
 
-
}
 
-
 
-
#igemuwmenu ul {
 
-
position: static;
 
-
visibility: visible;
 
-
opacity: 1;
 
-
margin: 0;
 
-
background: none;
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;
 
-
}
 
-
 
-
#igemuwmenu ul ul {
 
-
margin: 0 0 0 20px !important;
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;
 
-
}
 
-
 
-
#igemuwmenu li {
 
-
position: static;
 
-
display: block;
 
-
float: none;
 
-
border: 0;
 
-
margin: 5px;
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;
 
-
}
 
-
 
-
#igemuwmenu ul li{
 
-
margin-left: 20px;
 
-
-moz-box-shadow: none;
 
-
-webkit-box-shadow: none;
 
-
box-shadow: none;
 
-
}
 
-
 
-
#igemuwmenu a{
 
-
display: block;
 
-
float: none;
 
-
padding: 0;
 
-
color: #999;
 
-
}
 
-
 
-
#igemuwmenu a:hover{
 
-
color: #fafafa;
 
-
}
 
-
 
-
#igemuwmenu ul a{
 
-
padding: 0;
 
-
width: auto;
 
-
}
 
-
 
-
#igemuwmenu ul a:hover{
 
-
background: none;
 
-
}
 
-
 
-
#igemuwmenu ul li:first-child a:after,
 
-
#igemuwmenu ul ul li:first-child a:after {
 
-
border: 0;
 
-
}
 
-
 
-
}
 
-
 
-
@media screen and (min-width: 600px) {
 
-
#igemuwmenu {
 
-
display: block !important;
 
-
}
 
-
}
 
-
 
-
/* iPad */
 
-
.no-transition {
 
-
-webkit-transition: none;
 
-
-moz-transition: none;
 
-
-ms-transition: none;
 
-
-o-transition: none;
 
-
transition: none;
 
-
opacity: 1;
 
-
visibility: visible;
 
-
display: none; 
 
-
}
 
-
 
-
#igemuwmenu li:hover > .no-transition {
 
-
display: block;
 
-
}
 
-
 
-
</style>
 
-
 
-
<a href="https://2013.igem.org/Team:Washington"><img class="thumbnail"  src='https://static.igem.org/mediawiki/2013/c/cb/Redlightgreenlight2.jpg' width= "965"/></A>
 
-
 
-
<a href="http://www.washington.edu/"><img src='https://static.igem.org/mediawiki/2012/2/25/UW_W-Logo_smallRGB.jpg' align="left" width= "57" style="padding-top: 12px; padding-left: 5px;"/></a>
 
-
 
-
<a href="https://2012.igem.org/Main_Page"><img src='https://static.igem.org/mediawiki/igem.org/c/c8/IGEM_desat.png' align="right" width= "70"/></a>
 
-
 
-
<style type="text/css">
 
-
#content {z-index:4;}
 
-
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
 
-
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}
 
-
.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
 
-
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
 
-
</style>
 
-
 
-
<nav id="igemuwmenu-wrap">   
 
-
 
-
<ul id="igemuwmenu">
 
-
 
-
<li><a href="https://2013.igem.org/Team:Washington">Home</a>
 
-
<ul>
 
-
<li><a href="https://2013.igem.org/Team:Washington">UW 2013</a></li>
 
-
<li><a href="https://2012.igem.org/Team:Washington">UW 2012</a></li>
 
-
<li><a href="https://2011.igem.org/Team:Washington">UW 2011</a></li>
 
-
<li><a href="https://2010.igem.org/Team:Washington">UW 2010</a></li>
 
-
<li><a href="https://2009.igem.org/Team:Washington">UW 2009</a></li>
 
-
<li><a href="https://2008.igem.org/Team:University_of_Washington">UW 2008</a></li>
 
-
<li><a href="https://2013.igem.org/Main_Page">iGEM Homepage</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<!--
 
-
<li>
 
-
<a </a> main menu on plastic degradation
 
-
<ul>
 
-
 
-
for the drop down of plastic degradation
 
-
format <li><a href="https://2012.igem.org/Team:Washington/Plastics#Background">Background</a></li>
 
-
 
-
 
-
</ul>
 
-
</li>
 
-
-->
 
-
 
-
 
-
 
-
<li>
 
-
<a href="https://2013.igem.org/Team:Washington/LightSensing">Light Sensing Experiments</a>
 
-
<ul>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Background">Background</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Systems">Our Systems</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Methods">Methods</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Results">Results</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Future">Future Plans</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Parts">Parts Submitted</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/LightSensing#Sources">Scientific Sources</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
 
-
<li>
 
-
<a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE">e.colightTune</a>
 
-
<ul>
 
-
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Background">Background</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Usage">App</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Benefits">Methods</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/ECOLIGHTTUNE#Results">Results Summary</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li>
 
-
<a href="https://2013.igem.org/Team:Washington/Outreach">Outreach</a>
 
-
<ul>
 
-
<li><a href="https://2013.igem.org/Team:Washington/Outreach#Activities">Activities</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/Outreach#Pictures">Pictures</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li>
 
-
<a href="https://2013.igem.org/Team:Washington/Protocols">Protocols</a>
 
-
</li>
 
-
 
-
<li>
 
-
<a href="https://2013.igem.org/Team:Washington/MoreLinks">Links</a>
 
-
<ul>
 
-
<li><a href="https://2013.igem.org/Team:Washington/MoreLinks#Safety">Safety Form</a></li>
 
-
<li><a href="http://parts.igem.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2012&group=Washington">Parts Registry</a></li>
 
-
<li><a href="https://2013.igem.org/Team:Washington/MoreLinks#Documentation">Parts Documentation</a></li>
 
-
 
-
</ul>
 
-
</li>
 
-
 
-
<li style="border-right:0; box-shadow:0px 0 0;">
 
-
<a href="https://2013.igem.org/Team:Washington/Funding">Funding</a>
 
-
</li>
 
-
 
-
</li>
 
-
                                                                                               
 
-
</ul>
 
-
</nav>
 
-
 
-
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
-
<script type="text/javascript">
 
-
    $(function() {
 
-
if ($.browser.msie && $.browser.version.substr(0,1)<7)
 
-
{
 
-
$('li').has('ul').mouseover(function(){
 
-
$(this).children('ul').css('visibility','visible');
 
-
}).mouseout(function(){
 
-
$(this).children('ul').css('visibility','hidden');
 
-
})
 
-
}
 
-
 
-
/* Mobile */
 
-
$('#igemuwmenu-wrap').prepend('<div id="igemuwmenu-trigger">igemuwmenu</div>');
 
-
$("#igemuwmenu-trigger").on("click", function(){
 
-
$("#menu").slideToggle();
 
-
});
 
-
 
-
// iPad
 
-
var isiPad = navigator.userAgent.match(/iPad/i) != null;
 
-
if (isiPad) $('#igemuwmenu ul').addClass('no-transition');     
 
-
    });
 
-
// selection
 
-
 
-
</script>
 
-
 
-
<script type="text/javascript">
 
-
        $("#content").find("a[href='"+location.href+"']").each(function(){
 
-
        $(this).find("a").addClass("selected")
 
-
        })
 
-
</script>
 
-
 
-
<script type="text/javascript">
 
-
 
-
  var _gaq = _gaq || [];
 
-
  _gaq.push(['_setAccount', 'UA-26265208-1']);
 
-
  _gaq.push(['_trackPageview']);
 
-
 
-
  (function() {
 
-
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
-
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
-
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
-
  })();
 
-
 
-
</script>
 
-
</html>
 

Revision as of 01:21, 25 September 2013


Contents

Background

Recently, techniques have been developed that afford researchers the ability to control gene expression with light. To date, sensors that respond to red, green, and blue wavelengths of light have been reported. Light induced expression of genes has a number of advantages over chemical induction methods.  For example, light induced expression is cheaper than chemical methods, can be used to finely tune expression levels through modulations of intensity, and can be rapidly removed -- a feature lacking in chemical induction systems. Furthermore, many light expression systems are reversible, depending on the wavelength of light used.  Finally, the ability to control the expression levels of multiple genes of interest simultaneously could have far reaching implications for tuning biosynthetic pathways. The use of chemical inducers for this application would likely prove to be difficult and cost prohibitive, but multichromatic gene induction represents a potential solution to this problem. To this end, the 2013 University of Washington iGEM team chose to continue a project we began in 2012 that is aimed at the development and characterization of a set of tools that bring multichromatic gene expression into the realm of possibility for synthetic biologists.

In 2012, the University of Washington iGEM Team developed a freely available app for the Android operating system that affords spatiotemporal control over light wavelengths and intensities. When installed on an appropriate tablet (see XXXXX section) the app could be useful for carrying out complex light induced expressions. In 2012, we were unable to fully characterize the app’s ability to control expression of light inducible genes. Thus, the 2013 iGEM Team’s goals include fully characterizing the app’s ability to control gene expression with light, and the development of a toolkit of light induced expression biobricks that are confirmed to work with the tablet app.


[Top]

Our System

[Top]

Methods

[Top]

Results

[Top]

Future Plans

The potential for the use of mobile devices to facilitate light-induced expression of proteins could have far reaching impacts for synthetic biologists, iGEM teams, for those hoping to conduct biological research with limited resources. Complex spatial patterning and even simple gradients of light intensity and color would likely be of great use to the synthetic biology community. Spatial control allows the induction of cellular patterns to simulate signalling gradients in tissue development and are useful in lithography and other pattern related technology.

Expanding the development of our light-inducing app will give iGEM researchers the ability to express gene products and initiate circuits simply with light in varying intensities for a range of expression levels. The 96-well format allows for the testing of many different constructs at the same time, greatly increasing the potential experimental throughput.

Our proposal of a ‘hot-swappable’ designer Biobrick will allow researchers to exchange sfGFP with any custom output desired. For example,  a LacZ reporter could be used with the to create conventional ‘Coliroid’ images. Additional fluorescent outputs such as RFP and CFP could be used to create separate and distinguishable signals. This will allow us to extend testing of red and green light sensors together on the same plate.

Additionally, we would test the tablet App using a blue light inducible construct for instance the LovTAP system presented in 2009 by EPF-Lausanne. Our app allows the simultaneous expression on three separate chromatic channels and is thus compatible with blue light systems. Ultimately,  these three signals could be used to create trichromatic output using RFP, GFP and CFP to recreate a full color image, from black and white Coliroid to vivid color bacterial photography.

Finally, we are testing the tablet for it’s capacity to be used as a portable incubator and expression system based on it's heat output. Because of the high cost of purchasing a new incubator, we foresee this will be a boon to any iGEM team just starting out and will allow more teams to enter the competition and synthetic biology more accessible to high school programs.  It also reduces the space requirements to run both educational and high-throughput expression experiments, as well as could be utilized in resource-limited settings for example to induce and record data from biosensors in remote locations. The app can be set up easily owing to the fact that many people already own a mobile tablet device and can turn it into an incubator by simply downloading it from the Google App Store.

[Top]

Parts Submitted


[Top]

Scientific Sources

J. J. Tabor, A. Levskaya, and C. A. Voigt, “Multichromatic control of gene expression in Escherichia coli,” J. Mol. Biol., vol. 405, no. 2, pp. 315–324, Jan. 2011.

C. Voigt, Synthetic Biology, Part A: Methods for Part/Device Characterization and Chassis Engineering. Academic Press, 2011.


Retrieved from "http://2013.igem.org/Team:Washington/LightSensing"