Team:ETH Zurich/project/overview

{{:Team:ETH Zurich/tpl/head|Overview of Mosai''coli''}}
{{:Team:ETH Zurich/tpl/head/simplify}}
{{:Team:ETH Zurich/tpl/head/animbuttons}}

<center>
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Our|Project|green}}
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Pattern|Emergence|blue}}
{{:Team:ETH Zurich/tpl/scrollbuttontworows|Genetic|Circuits|red}}
</center>

<html> 
<div id="Our" class="inner2" style='padding:0;'> <article class="Our complex" style='margin-bottom:0;'> </html> 
{{:Team:ETH Zurich/project/overview/summary}}
<html> </article> <article class="Our simple" style="display:none; margin-bottom:0;"> </html> 
{{:Team:ETH Zurich/project/overview/summarysimple}} 
<html> </article> </html>
{{:Team:ETH Zurich/tpl/simpbutton|Our|green}}
<html></div>
<br/>
<br/>

<div id="Pattern" class="inner2"> </html> 
{{:Team:ETH_Zurich/project/overview/grid}}
<html> </div> 
<br/>
<br/>

<div id="Genetic" class="inner2"></html>
== Implementation in ''E. coli'' ==
<center>
Here you can see our circuit in action. More details on how it works are <html> <a class="circled scrolly" href="#implementation"> just below</a></html>. For a comprehensive inventory of all parts used, you can check our [https://2014.igem.org/Team:ETH_Zurich/data Data page].
<html>
<style>
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		border:none;
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	td { 
		/* Behave  like a "row" */
		border: none;; 
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
}
</style>
</br>
</br>
<table style='width:100%; z-index:1;'>
<tr style='border:2px solid black;'>
<td>
<div id="bloc1" style='margin-left:3em;'><h3 style='font-weight:800;'> Choose the cell type and the inputs:</h3></html>
<br/>
{{:Team:ETH_Zurich/tpl/animbuttonblue}}
{{:Team:ETH_Zurich/tpl/animbuttonred}}
<br/>
{{:Team:ETH Zurich/tpl/animbuttonnoneblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasblue|<html>width='160px' height='152.78px'</html>}}
<br/>
{{:Team:ETH Zurich/tpl/animbuttonluxblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothblue|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonnonered|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonlasred|<html>width='160px' height='152.78px'</html>}}
<br/>
{{:Team:ETH Zurich/tpl/animbuttonluxred|<html>width='160px' height='152.78px'</html>}}
{{:Team:ETH Zurich/tpl/animbuttonbothred|<html>width='160px' height='152.78px'</html>}}
</center>
<br/>
<html></div>
</td>
<td>
<div id="bloc2">
<h3 style='text-align:center; font-weight:800;'>See how the information is processed to get the right output : </h3>
<center>
<img  class='animation' id='luxred' src='https://static.igem.org/mediawiki/2014/7/73/ETH_Zurich_Animation_luxred.gif'>
<img  class='animation' id='lasred' src='https://static.igem.org/mediawiki/2014/5/5e/ETH_Zurich_Animation_lasred.gif'>
<img  class='animation' id='bothred' src='https://static.igem.org/mediawiki/2014/1/15/ETH_Zurich_Animation_bothred.gif'>
<img  class='animation' id='nonered' src='https://static.igem.org/mediawiki/2014/b/b0/ETH_Zurich_Animation_nonered.gif'>
</center>
<center>
<img class='animation' id='bothblue' src='https://static.igem.org/mediawiki/2014/4/4e/ETH_Zurich_Animation_bothblue.gif'>
<img class='animation' id='noneblue' src='https://static.igem.org/mediawiki/2014/6/6e/ETH_Zurich_Animation_noneblue.gif'>
<img class='animation' id='luxblue' src='https://static.igem.org/mediawiki/2014/c/c4/ETH_Zurich_Animation_luxblue.gif'>
<img class='animation' id='lasblue' src='https://static.igem.org/mediawiki/2014/6/64/ETH_Zurich_Animation_lasblue.gif'>
</center></div>
</td>
</tr>
</table>   
</div>

<div id="implementation" class="inner2" style='margin-top:-5%; text-align:left;'>
<article class="implementation simple" style="display:none; margin-bottom:0;  padding-top:0;"> </html> 
{{:Team:ETH Zurich/project/overview/implementationsimple}} 
<html> </article><article class="implementation complex" style='margin-bottom:0;  padding-top:0;'> </html> 
{{:Team:ETH Zurich/project/overview/implementation}}
<html> </article> </html>
{{:Team:ETH Zurich/tpl/simpbutton2|implementation|blue}}
<html></div> </html>

{{:Team:ETH Zurich/tpl/foot}}