Team:Freiburg/Project/unibox
From 2013.igem.org
Line 9: | Line 9: | ||
############################################################################## --> | ############################################################################## --> | ||
+ | |||
+ | |||
+ | <!-- ******************************************************************* --> | ||
+ | <!-- STYLESCHEET --> | ||
+ | <!-- ******************************************************************* --> | ||
+ | |||
<style> | <style> | ||
+ | p{color:white;} | ||
+ | |||
+ | |||
+ | #1{ | ||
+ | height:500; | ||
+ | } | ||
+ | |||
+ | #tabelle{ | ||
+ | height:500; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #preample { | ||
+ | font-size: 20px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #overview_pic { | ||
+ | width: 500px; | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | #left_column { | ||
+ | margin-top:50px; | ||
+ | font-size:18px; | ||
+ | float:left; | ||
+ | text-align:justify; | ||
+ | width:300px; | ||
+ | margin-left;20px; | ||
+ | } | ||
+ | |||
+ | #right_column { | ||
+ | margin-top:50px; | ||
+ | font-size:18px; | ||
+ | text-align:justify; | ||
+ | width:550px; | ||
+ | padding-left:5px; | ||
+ | } | ||
+ | |||
+ | #headline { | ||
+ | font-size:22px; | ||
+ | color: #ffcc00; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | * jQuery FlexSlider v2.0 | ||
+ | * http://www.woothemes.com/flexslider/ | ||
+ | * | ||
+ | * Copyright 2012, Julia Voß | ||
+ | * Free to use under the MIT license. | ||
+ | * http://www.opensource.org/licenses/mit-license.php | ||
+ | */ | ||
+ | |||
+ | /* Browser Resets */ | ||
+ | .flex-container a:active, | ||
+ | .flexslider a:active, | ||
+ | .flex-container a:focus, | ||
+ | .flexslider a:focus {outline: none;} | ||
+ | .slides, | ||
+ | .flex-control-nav, | ||
+ | .flex-direction-nav {margin: 0; padding: 0; list-style: none;} | ||
+ | |||
+ | /* FlexSlider Necessary Styles | ||
+ | *********************************/ | ||
+ | .flexslider {margin: 0; padding: 0;} | ||
+ | .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ | ||
+ | .flexslider .slides img {display: block;} | ||
+ | .flex-pauseplay span {text-transform: capitalize;} | ||
+ | |||
+ | /* Clearfix for the .slides element */ | ||
+ | .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} | ||
+ | html[xmlns] .slides {display: block;} | ||
+ | * html .slides {height: 1%;} | ||
+ | |||
+ | /* No JavaScript Fallback */ | ||
+ | /* If you are not using another script, such as Modernizr, make sure you | ||
+ | * include js that eliminates this class on page load */ | ||
+ | .no-js .slides > li:first-child {display: block;} | ||
+ | |||
+ | |||
+ | /* FlexSlider Default Theme | ||
+ | *********************************/ | ||
+ | .flexslider { | ||
+ | background-color: transparent; border: 8px solid transparent; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; | ||
+ | } | ||
+ | .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} | ||
+ | .loading .flex-viewport {max-height: 300px;} | ||
+ | .flexslider .slides {zoom: 1;} | ||
+ | |||
+ | .carousel li {margin-right: 5px} | ||
+ | |||
+ | |||
+ | /* Direction Nav */ | ||
+ | |||
+ | .flex-direction-nav {*height: 0;} | ||
+ | .flex-direction-nav a { | ||
+ | width: 35px; | ||
+ | height: 32px; | ||
+ | margin: -20px 0 0; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/e/eb/Controls1.png) no-repeat 0 0; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | cursor: pointer; | ||
+ | text-indent: -9999px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .flex-direction-nav .flex-next {background-position: -35px 0; right: 0px; } | ||
+ | .flex-direction-nav .flex-prev {background-position: 0px 0; left: 0px;} | ||
+ | .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} | ||
+ | |||
+ | |||
+ | |||
+ | /* Control Nav */ | ||
+ | .flex-control-nav { | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | bottom: 30px; | ||
+ | left: 58px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} | ||
+ | .flex-control-nav li:first-child {margin: 0;} | ||
+ | .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url() no-repeat 0 0; cursor: pointer; text-indent: -9999px;} | ||
+ | .flex-control-nav li a:hover {background-position: 0 -13px;} | ||
+ | .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .flexslider { | ||
+ | width:850px; | ||
+ | height:400px; | ||
+ | margin-left:3px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.frontpage-slide { | ||
+ | height: 500px; | ||
+ | background-color: transparent; | ||
+ | width:950px; | ||
+ | margin-left:40px; | ||
+ | } | ||
+ | |||
+ | div.frontpage-slide img{ | ||
+ | width:480px; | ||
+ | float: left; | ||
+ | margin-right:10px; | ||
+ | margin-left:5px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.slide-right-col { | ||
+ | color: black; | ||
+ | float: right; | ||
+ | width:550px; | ||
+ | font-size: 16px; | ||
+ | |||
+ | |||
+ | line-height: 1.5em; | ||
+ | text-align:justify; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | div.slide-heading { | ||
+ | color: black; | ||
+ | font-size: 18px; | ||
+ | font-weight: bold; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | div.slide-right-col p a{ | ||
+ | color:white; | ||
+ | } | ||
+ | table{margin-left:-10px;} | ||
</style> | </style> | ||
+ | |||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | ||
+ | <script src="http://2012.igem-bielefeld.de/includes/wiki/flex/js/jquery.flexslider.js"></script> | ||
+ | |||
+ | <script type="text/javascript" charset="utf-8"> | ||
+ | $(window).load(function() { | ||
+ | $('.flexslider').flexslider({ | ||
+ | animation: "slide", // slide or fade | ||
+ | slideshow:false, | ||
+ | |||
+ | controlsContainer: ".flex-container" // the container that holds the flexslider | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
</head> | </head> | ||
Line 86: | Line 293: | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="flexslider"> | ||
+ | <ul class="slides"> | ||
+ | |||
+ | |||
+ | <!-- dCas9 Heart --> | ||
+ | <li> | ||
+ | <div class="frontpage-slide" style="margin-top:-11px;"> | ||
+ | <div id="left_column"> <p id="headline"> <a href="http://parts.igem.org/Part:BBa_K1150000"><img src="https://static.igem.org/mediawiki/2013/9/90/Freiburg-2013-Highlights-Heart.png" style="width:65px; margin-top:-17px; margin-left:-4px; "> </a> | ||
+ | dCas9 - The heart of our toolkit | ||
+ | </p> | ||
+ | <p>The CRISPR/Cas9 system relies on a protein-RNA-DNA interaction between the Cas9 protein, two non-coding RNAs and the appropriate DNA. The 160 kDa Cas9 protein was <a id="link" href="https://2013.igem.org/Team:Freiburg/Notebook/standardisation#august">mutated</a> to inactivate the DNA cleavage site. <i>Read more in the next slides</i>.</p> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div class="slide-right-col" style="margin-top:-500px; margin-right:-1px;"> | ||
+ | <div id="right_column"> <div style="text-align: center;"> | ||
+ | |||
+ | |||
+ | <a href="http://parts.igem.org/Part:BBa_K1150000"><img src="https://static.igem.org/mediawiki/2013/b/b6/Poster_Cas_Freiburg_2013.png" style="width:500px; margin-left:30px;"> </a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div class=clear></div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- dCas9 Heart --> | ||
+ | <li> | ||
+ | <div class="frontpage-slide" style="margin-top:-11px;"> | ||
+ | <div id="left_column"> <p id="headline"> <a href="http://parts.igem.org/Part:BBa_K1150000"><img src="https://static.igem.org/mediawiki/2013/9/90/Freiburg-2013-Highlights-Heart.png" style="width:65px; margin-top:-17px; margin-left:-4px; "> </a> | ||
+ | dCas9 - The heart of our toolkit | ||
+ | </p> | ||
+ | <p>The CRISPR/Cas9 system relies on a protein-RNA-DNA interaction between the Cas9 protein, two non-coding RNAs and the appropriate DNA. The 160 kDa Cas9 protein was <a id="link" href="https://2013.igem.org/Team:Freiburg/Notebook/standardisation#august">mutated</a> to inactivate the DNA cleavage site. <i>Read more in the next slides</i>.</p> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div class="slide-right-col" style="margin-top:-500px; margin-right:-1px;"> | ||
+ | <div id="right_column"> <div style="text-align: center;"> | ||
+ | |||
+ | |||
+ | <a href="http://parts.igem.org/Part:BBa_K1150000"><img src="https://static.igem.org/mediawiki/2013/b/b6/Poster_Cas_Freiburg_2013.png" style="width:500px; margin-left:30px;"> </a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div class=clear></div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
<div id="usage"> | <div id="usage"> |
Revision as of 19:27, 27 October 2013
uniBOX - A lightbox build from lego!
Idea
Light inducible systems are more and more used in iGEM and synthetic biology in general. Team Munich for example uses a light inducible killswitch, while Shanghai uses light-controlled expression systems. Even our uniCAS gene regulation system is controllable via light. Therefore we thought of a easy and cheap way to build a light box to illuminate our cells with a certain wavelength. But construction of such a light box can be hard because there are certain problems you fave to face like dimout but still enough oxygen supply or illumination with the right wavelength. Our so called uniBOX can be build by using common things like Lego bricks, glass, foil and LEDs. We were able to show that light systems can be controlled efficiently and we now provide a do-it-yourself manual for building your own uniBOX for less than 60 €!
Construction