Difference between revisions of "Team:Czech Republic"

 
(67 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Czech_Republic}}
+
{{:Team:Czech_Republic/Template:Stylesheet}}
 +
{{:Team:Czech_Republic/Template:Menu}}
 
<html>
 
<html>
−
<h2>Project description</h2>
 
−
We will develop two different yeast haploids - one mating type for the input and the other one for the output cells. By their mating, diploids that react to specific input and produce the desired output can be rapidly constructed. By the use of orthogonal signals, we will be also able to use them in more complex circuits in order to detect specified input combinations (e.g. markers on a cancer cell).
 
−
<!--
 
−
<h2> Welcome to iGEM 2015! </h2>
 
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
 
  
−
<h4>Before you start: </h4>
+
<div id="title">
−
<p> Please read the following pages:</p>
+
<style>
−
<ul>
+
−
<li>  <a href="https://2015.igem.org/Requirements">Requirements page </a> </li>
+
−
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
−
</ul>
+
  
−
<div class="highlightBox">
+
#title hr
−
<h4> Styling your wiki </h4>
+
{
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
  border: 0;
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>  
+
  height: 300px;
 +
  width: 100%;
 +
  background-image: url(/wiki/images/8/87/Czech_Republic_bubbles.png);
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  margin: -100px 0;
 +
  position: relative;
 +
  z-index: 10;
 +
  background-color: white;
 +
}
 +
 
 +
#title section
 +
{
 +
  background-color: white;
 +
  width: 100%;
 +
  position: relative;
 +
}
 +
 
 +
#title .page
 +
{
 +
  position: relative;
 +
  width: 1200px;
 +
  margin: 0 auto;
 +
  background-color: white;
 +
}
 +
 
 +
#title .page h2, #title .page h3
 +
{
 +
  padding: 0;
 +
  margin: 0;
 +
  font-weight: normal;
 +
  line-height: normal;
 +
  color: #303030;
 +
}
 +
 
 +
#title .page p
 +
{
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 
 +
</style>
 +
 
 +
<section>
 +
<style>
 +
 
 +
#title #page1
 +
{
 +
  width: 100%;
 +
  text-align: center;
 +
  position: relative;
 +
  height: calc(100vh - 20px);
 +
}
 +
 
 +
#title #page1 > div.bg
 +
{
 +
  background-image: url(/wiki/images/2/23/Czech_Republic_home-bg.jpg);
 +
  background-position: center top;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 100%;
 +
  width: 100%;
 +
  /*position: fixed;*/
 +
  top: 0;
 +
}
 +
 
 +
#title #page1 #logo
 +
{
 +
  padding-top: calc(50vh - 200px);
 +
  height: 200px;
 +
}
 +
 
 +
#title #page1 h1
 +
{
 +
  padding: 10px 0;
 +
  display: block;
 +
  text-align: center;
 +
  background: linear-gradient(to right, rgba(48,48,48,0) 0%,rgba(48,48,48,1) 35%,rgba(48,48,48,1) 65%,rgba(48,48,48,0) 100%);
 +
}
 +
 
 +
#title #page1 #sponsors
 +
{
 +
  position: absolute;
 +
  top: calc(100vh - 180px);
 +
  height: 140px;
 +
  width: 100%;
 +
  padding: 10px 0;
 +
  background-color: #303030;
 +
}
 +
 
 +
</style>
 +
 
 +
<div class="page" id="page1">
 +
  <div class="bg">
 +
    <div id="logo">
 +
      <h1><img src="/wiki/images/1/15/Czech_Republic_home-logo.png" alt="The IOD Band" width="600" /></h1>
 +
    </div>
 +
  </div>
 +
  <div id="sponsors">
 +
    <img src="/wiki/images/b/bd/Czech_Republic_sponsors.png" alt="Sponsors" width="1094" usemap="#sponsors" />
 +
 
 +
    <map name="sponsors">
 +
      <area shape="rect" coords="15,30,195,50" href="http://ccy.zcu.cz" alt="GeorgievLab" target="_blank" />
 +
    </map>
 +
  </div>
 
</div>
 
</div>
 +
</section>
  
−
<h4> Editing your wiki </h4>
+
<section>
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
<style>
−
<p> <a href="https://2015.igem.org/wiki/index.php?title=Team:Czech_Republic&action=edit"> Click here to edit this page! </a></p>
+
−
<p>See tips on how to edit your wiki on the <a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation</a> page.</p>  
+
  
 +
#title #page2
 +
{
 +
  color: #ab1917;
 +
  padding: 20px 20px 40px 30px;
 +
  height: 820px;
 +
}
  
−
<h4>Templates </h4>
+
#title #page2 > div
−
<p> This year we have created templates for teams to use freely. More information on how to use and edit the templates can be found on the
+
{
−
<a href="https://2015.igem.org/TemplatesforTeams_Code_Documentation">Template Documentation </a> page.</p>
+
  background-image: url(/wiki/images/f/ff/Czech_Republic_title-cells.p2.png);
 +
  background-repeat: no-repeat;
 +
  background-position: 26px -27px;
 +
  background-size: 100%;
 +
  width: 100%;
 +
  height: 700px;
 +
  opacity: 1;
 +
}
  
 +
#title #page2 h2
 +
{
 +
  font-size: 38px;
 +
  color: #cc1d24;
 +
}
  
−
<h4>Tips</h4>
+
#title #page2 > div > div:first-child
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
{
−
<ul>
+
    width: 610px;
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    margin: 30px 0 0 0;
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
}
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2015.igem.org/Calendar_of_Events">iGEM 2015 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
  
 +
#title #page2 > div > div:last-child
 +
{
 +
    width: 615px;
 +
    margin: 15px 0 0 auto;
 +
}
  
−
<h4>Inspiration</h4>
+
#title #page2 ul
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
{
−
<ul>
+
  font-size: 23.5px;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
  padding: 0;
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
  margin: 15px 0 0 0;
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
  list-style: none;
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
}
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
  
−
<h4> Uploading pictures and files </h4>
+
#title #page2 ul li
−
<p> You can upload your pictures and files to the iGEM 2015 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
{
−
When you upload, set the "Destination Filename" to <code>Team:YourOfficialTeamName/NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
  padding: 0;
 +
  margin: 0;
 +
}
  
−
<a href="https://2015.igem.org/Special:Upload">CLICK HERE TO UPLOAD FILES</a>
+
#title #page2 div.block
 +
{
 +
  color: white;
 +
  background-color: #67c5df;
 +
  width: 180px;
 +
  height: 165px;
 +
  margin-right: 25px;
 +
  border-radius: 30px;
 +
  padding: 10px;
 +
}
  
 +
#title #page2 div.block p
 +
{
 +
  text-align: center;
 +
  font-size: 25px;
 +
}
  
−
-->
+
#title #page2 div.block strong
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
{
 +
  display: block;
 +
  font-weight: normal;
 +
  text-transform: uppercase;
 +
  font-size: 35px;
 +
  margin: 5px 0;
 +
  color: white;
 +
}
  
 +
#title #page2 div.block span
 +
{
 +
  display: block;
 +
  font-size: 1.2em;
 +
}
 +
 +
#title #page2 div.blocks1
 +
{
 +
  height: 200px;
 +
  padding: 25px 0 0 25px;
 +
}
 +
 +
#title #page2 div.blocks1 p
 +
{
 +
  line-height: 1.5em;
 +
}
 +
 +
#title #page2 div.blocks1 div.block
 +
{
 +
  float: left;
 +
}
 +
 +
#title #page2 div.blocks2
 +
{
 +
  height: 200px;
 +
  padding: 35px 0 0 90px;
 +
}
 +
 +
#title #page2 div.blocks2 p
 +
{
 +
  line-height: 1.2em;
 +
}
 +
 +
#title #page2 div.blocks2 div.block
 +
{
 +
  float: left;
 +
}
 +
 +
#title #sep2-3
 +
{
 +
  width: 1200px;
 +
  background-color: transparent;
 +
  top: -200px;
 +
  background-position: 150px center;
 +
  margin: 0px auto -250px;
 +
}
 +
 +
</style>
 +
 +
<div class="page" id="page2">
 +
  <div data-anchor-target="#page2" data--400-top="opacity: 1" data--600-top="opacity: 0">
 +
    <div>
 +
      <h2>Find where a tumor is from and where it's headed...</h2>
 +
      <ul>
 +
        <li>The first clinically relevant tumor mobility test.</li>
 +
        <li>Designed to be engineered by the non-synthetic biologist.</li>
 +
      </ul>
 +
 +
      <div class="blocks1">
 +
        <div class="block">
 +
          <p><strong>Zero</strong> diagnostic tests for general tumor mobility</p>
 +
        </div>
 +
 +
        <div class="block">
 +
          <p><strong>One</strong> tumor cell per <span>5 million</span> blood cells</p>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 +
    <div>
 +
      <h2>Localization of tumors and analysis of metastasis is critical to survival...</h2>
 +
 +
      <div class="blocks2">
 +
        <div class="block">
 +
          <p>as low as <strong>4%</strong> survival for metastasized cancer</p>
 +
        </div>
 +
 +
        <div class="block">
 +
          <p><strong>56%</strong> survival for lung cancer detected before metastasis</p>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</section>
 +
 +
<hr id="sep2-3" data-anchor-target="#sep2-3" data-500-center="opacity: 0" data-center="opacity: 1" data--500-center="opacity: 0" />
 +
 +
<section>
 +
<style>
 +
 +
#title #page3
 +
{
 +
  margin-top: 50px;
 +
  padding-bottom: 100px;
 +
  height: 800px;
 +
  color: #303030;
 +
  position: relative;
 +
  background-color: white;
 +
}
 +
 +
#title #page3 h2
 +
{
 +
  padding-top: 50px;
 +
  color: #cc1d24;
 +
  font-size: 58px;
 +
  text-transform: uppercase;
 +
}
 +
 +
#title #page3 header
 +
{
 +
  padding: 0 55px;
 +
}
 +
 +
#title #page3 header p
 +
{
 +
  font-size: 25px;
 +
}
 +
 +
#title #page3 .block
 +
{
 +
  position: absolute;
 +
  width: 235px;
 +
  border: 5px solid #303030;
 +
  background-color: white;
 +
  border-radius: 30px;
 +
  padding: 15px;
 +
}
 +
 +
#title #page3 .block h3
 +
{
 +
  text-align: center;
 +
  text-transform: uppercase;
 +
  font-size: 30px;
 +
  margin-top: -15px;
 +
}
 +
 +
#title #page3 .block p
 +
{
 +
  text-align: left;
 +
  font-size: 18px;
 +
  margin-bottom: -5px;
 +
}
 +
 +
#title #page3 .block.receive
 +
{
 +
  top: 170px;
 +
  left: 120px;
 +
}
 +
 +
#title #page3 .block.transmit
 +
{
 +
  top: 170px;
 +
  left: 835px;
 +
}
 +
 +
#title #page3 .block.localise
 +
{
 +
  top: 640px;
 +
  left: 420px;
 +
}
 +
 +
#title #page3 ul
 +
{
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
 +
#title #page3 ul li
 +
{
 +
  margin: 0;
 +
  padding: 0;
 +
  position: absolute;
 +
  font-size: 18px;
 +
  line-height: 1.4em;
 +
}
 +
 +
#title #page3 ul li:first-child
 +
{
 +
  top: 290px;
 +
  left: 955px;
 +
  width: 155px;
 +
}
 +
 +
#title #page3 ul li:nth-child(2)
 +
{
 +
  top: 625px;
 +
  left: 75px;
 +
  width: 230px;
 +
}
 +
 +
#title #page3 ul li:nth-child(3)
 +
{
 +
  top: 624px;
 +
  left: 890px;
 +
  width: 220px;
 +
}
 +
 +
#title #page3 #yeast-red
 +
{
 +
  position: absolute;
 +
  top: 235px;
 +
  left: 185px;
 +
  width: 365px;
 +
  height: 430px;
 +
  background-image: url(/wiki/images/3/3e/Czech_Republic_title-yeast-red.png);
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
}
 +
 +
#title #page3 #yeast-blue
 +
{
 +
  position: absolute;
 +
  top: 260px;
 +
  left: 565px;
 +
  width: 345px;
 +
  height: 430px;
 +
  background-image: url(/wiki/images/a/a0/Czech_Republic_title-yeast-blue.png);
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
}
 +
 +
#title #page3 div.lines
 +
{
 +
  position: absolute;
 +
  top: 230px;
 +
  left: 260px;
 +
  width: 600px;
 +
  height: 450px;
 +
  background-image: url(/wiki/images/0/0c/Czech_Republic_title-lines.p3.png);
 +
  background-repeat: no-repeat;
 +
}
 +
 +
</style>
 +
 +
<div class="page" id="page3">
 +
  <div data-anchor-target="#page3" data--400-top="opacity: 1" data--600-top="opacity: 0">
 +
    <header data-anchor-target="#page3" data-200-top="opacity: 1" data-500-top="opacity: 0">
 +
      <h2>These Are The IODs</h2>
 +
      <p>intelligent <strong>Input-to-Output Diploid</strong> units that work together to solve complex problems</p>
 +
    </header>
 +
 +
    <div id="yeast-red" data-anchor-target="#page3 header h2" data-100-top="left: 185px; opacity: 1" data-500-top="left: 0px; opacity: 0"></div>
 +
 +
    <div id="yeast-blue" data-anchor-target="#page3 header h2" data-100-top="left: 565px; opacity: 1" data-500-top="left: 700px; opacity: 0"></div>
 +
 +
    <div data-anchor-target="#page3 header h2" data-50-top="opacity: 1" data-150-top="opacity: 0">
 +
      <div class="lines"></div>
 +
 +
      <div class="block receive">
 +
        <h3>Receive</h3>
 +
        <p>orthogonal receptors and signal transduction modules</p>
 +
      </div>
 +
 +
      <div class="block transmit">
 +
        <h3>Transmit</h3>
 +
        <p>complementary signal generators with tunable range</p>
 +
      </div>
 +
 +
      <div class="block localise">
 +
        <h3>Localise</h3>
 +
        <p>locational tags target communication to specific IOD pairs</p>
 +
      </div>
 +
 +
      <ul>
 +
        <li>IOD systems utilize location limited communication and simple signal processing to generate powerful decision networks.</li>
 +
        <li>IODs interface with each other and with the environment using three types of technologies: receptors, local signals, and locational tags.</li>
 +
        <li>IODs are naturally insulated from one another by their membranes and hence their design and engineering presents a greater degree of modularity.</li>
 +
      </ul>
 +
    </div>
 +
  </div>
 +
</div>
 +
</section>
 +
 +
<hr id="sep3-4" data-anchor-target="#sep3-4" data-500-center="opacity: 0" data-center="opacity: 1" data--500-center="opacity: 0" />
 +
 +
<section>
 +
<style>
 +
 +
#title #page4
 +
{
 +
  margin-top: 50px;
 +
  padding-bottom: 100px;
 +
  height: 800px;
 +
  color: #303030;
 +
  position: relative;
 +
  background-color: white;
 +
}
 +
 +
#title #page4 div.img
 +
{
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 768px;
 +
  background-image: url(/wiki/images/9/9a/Czech_Republic_title-yeast-diploid.png), url(/wiki/images/2/21/Czech_Republic_title-desk.png);
 +
  background-repeat: no-repeat, no-repeat;
 +
  background-position: 200px 265px, 215px 300px;
 +
}
 +
 +
#title #page4 h2
 +
{
 +
  color: #cc1d24;
 +
  font-size: 58px;
 +
  text-transform: uppercase;
 +
  padding-top: 50px;
 +
}
 +
 +
#title #page4 header
 +
{
 +
    padding: 0 0px 0 55px;
 +
}
 +
 +
#title #page4 header p
 +
{
 +
  font-size: 25px;
 +
}
 +
 +
#title #page4 .block
 +
{
 +
  position: absolute;
 +
  width: 205px;
 +
  border: 5px solid #303030;
 +
  background-color: white;
 +
  border-radius: 30px;
 +
  padding: 15px;
 +
}
 +
 +
#title #page4 .block h3
 +
{
 +
  text-align: center;
 +
  text-transform: uppercase;
 +
  font-size: 30px;
 +
  margin-top: -10px;
 +
}
 +
 +
#title #page4 .block p
 +
{
 +
  text-align: left;
 +
  font-size: 18px;
 +
  margin-bottom: -5px;
 +
  line-height: 1.4em;
 +
}
 +
 +
#title #page4 .block.ihl
 +
{
 +
  top: 185px;
 +
  left: 0px;
 +
  width: 375px;
 +
}
 +
 +
#title #page4 .block.conj
 +
{
 +
  top: 635px;
 +
  left: 140px;
 +
  width: 290px;
 +
}
 +
 +
#title #page4 .block.ohl
 +
{
 +
  top: 185px;
 +
  left: 745px;
 +
  width: 385px;
 +
}
 +
 +
#title #page4 div.text > p
 +
{
 +
  position: absolute;
 +
  top: 625px;
 +
  left: 615px;
 +
  width: 485px;
 +
  height: 60px;
 +
  font-size: 18px;
 +
  line-height: 1.3em;
 +
}
 +
 +
#title #page4 div.lines
 +
{
 +
  position: absolute;
 +
  top: 235px;
 +
  left: 255px;
 +
  width: 700px;
 +
  height: 450px;
 +
  background-image: url(/wiki/images/7/78/Czech_Republic_title-lines.p4.png);
 +
  background-repeat: no-repeat;
 +
}
 +
 +
</style>
 +
 +
<div class="page" id="page4">
 +
  <div data-anchor-target="#page4" data--400-top="opacity: 1" data--600-top="opacity: 0">
 +
    <header data-anchor-target="#page4" data-200-top="opacity: 1" data-500-top="opacity: 0">
 +
      <h2>this Is How They're Made</h2>
 +
      <p>a unique <strong>clone-free assembly</strong> feature brings limitless design flexibility to the non-synthetic biologist</p>
 +
    </header>
 +
 +
    <div class="img" data-anchor-target="#page4 header h2"  data-top="opacity: 1" data-200-top="opacity: 0"></div>
 +
 +
    <div class="text" data-anchor-target="#page4 header h2" data-50-top="opacity: 1" data-150-top="opacity: 0">
 +
      <div class="lines"></div>
 +
 +
      <div class="block ihl">
 +
        <h3>Input Haploid Library</h3>
 +
        <p>a library of input haploids is constructed to detect various signals at specified locations</p>
 +
      </div>
 +
 +
      <div class="block conj">
 +
        <h3>Conjugation</h3>
 +
        <p>input haploids and output haploids are of opposite mating types permitting their easy conjugation and thus making an IOD</p>
 +
      </div>
 +
 +
      <div class="block ohl">
 +
        <h3>Output Haploid Library</h3>
 +
        <p>output haploids interface with input haploids and generate various intercellular signals</p>
 +
      </div>
 +
 +
      <p>
 +
        the IOD assembly feature is similar to the solder-free breadboard used by electrical engineers. Conjugation and IOD amplification are complete in a single day. Quick prototyping and optimization are possible using INPUT and OUTPUT libraries that encompass unique and differentially tuned elements akin to collections of resistors, capacitors, and transistors.
 +
      </p>
 +
    </div>
 +
  </div>
 +
</div>
 +
</section>
 +
 +
<hr id="sep4-5" data-anchor-target="#sep4-5" data-500-center="opacity: 0" data-center="opacity: 1" data--500-center="opacity: 0" />
 +
 +
<section>
 +
<style>
 +
 +
#title #page5
 +
{
 +
  margin-top: 50px;
 +
  padding-bottom: 100px;
 +
  height: 800px;
 +
  color: #303030;
 +
  position: relative;
 +
  background-color: white;
 +
}
 +
 +
#title #page5 h2
 +
{
 +
  color: #cc1d24;
 +
  font-size: 58px;
 +
  text-transform: uppercase;
 +
  padding-top: 50px;
 +
}
 +
 +
#title #page5 header
 +
{
 +
    padding: 0 0px 0 55px;
 +
}
 +
 +
#title #page5 header p
 +
{
 +
  font-size: 25px;
 +
}
 +
 +
#title #page5 .block
 +
{
 +
  position: absolute;
 +
  width: 205px;
 +
  border: 5px solid #303030;
 +
  background-color: white;
 +
  border-radius: 30px;
 +
  padding: 15px;
 +
}
 +
 +
#title #page5 .block h3
 +
{
 +
  text-align: center;
 +
  text-transform: uppercase;
 +
  font-size: 30px;
 +
  margin-top: -10px;
 +
}
 +
 +
#title #page5 .block p
 +
{
 +
  text-align: left;
 +
  font-size: 18px;
 +
  margin-bottom: -5px;
 +
  line-height: 1.4em;
 +
}
 +
 +
#title #page5 .block.ps
 +
{
 +
  top: 425px;
 +
  right: 40px;
 +
  width: 290px;
 +
}
 +
 +
#title #page5 .block.gl
 +
{
 +
  top: 590px;
 +
  left: 20px;
 +
  width: 290px;
 +
}
 +
 +
#title #page5 .block.tc
 +
{
 +
  top: 595px;
 +
  right: 40px;
 +
  width: 290px;
 +
}
 +
 +
#title #page5 .tube-info
 +
{
 +
  position: absolute;
 +
  left: 395px;
 +
  top: 725px;
 +
  width: 385px;
 +
  font-size: 19px;
 +
  text-align: center;
 +
}
 +
 +
#title #page5 .note
 +
{
 +
  position: absolute;
 +
  right: 45px;
 +
  top: 785px;
 +
}
 +
 +
#title #page5 .procedure
 +
{
 +
  position: absolute;
 +
  top: 200px;
 +
  left: 45px;
 +
  width: 235px;
 +
}
 +
 +
#title #page5 .procedure h3
 +
{
 +
  text-transform: uppercase;   
 +
  font-weight: bold;
 +
  font-size: 22px;
 +
}
 +
 +
#title #page5 .procedure p
 +
{   
 +
  font-size: 19px;
 +
  margin-top: 10px;
 +
}
 +
 +
#title #page5 .tubes
 +
{
 +
  position: absolute;
 +
  top: 190px;
 +
  left: 310px;
 +
  width: 545px;
 +
  height: 500px;
 +
  border: 5px solid #303030;
 +
  background-color: white;
 +
  border-radius: 15px;
 +
  background-image: url(/wiki/images/f/f0/Czech_Republic_title-tubes.jpg);
 +
  background-position: 0;
 +
  background-repeat: no-repeat;
 +
}
 +
 +
#title #page5 .tubes img
 +
{
 +
  position: absolute;
 +
  bottom: 0;
 +
}
 +
 +
#title #page5 .lines
 +
{   
 +
  position: absolute;
 +
  background-image: url(/wiki/images/9/99/Czech_Republic_title-lines.p5.png);
 +
  background-position: 0;
 +
  background-repeat: no-repeat;
 +
  width: 800px;
 +
  height: 600px;
 +
  top: 305px;
 +
  left: 265px;
 +
}
 +
 +
#title #page5
 +
{
 +
  counter-reset: steps;
 +
}
 +
 +
#title #page5 ol
 +
{
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-size: 19px;
 +
  line-height: 24px;
 +
}
 +
 +
#title #page5 ol li
 +
{
 +
  margin: 0;
 +
}
 +
 +
#title #page5 ol li::before
 +
{
 +
  counter-increment: steps;             
 +
  content: "STEP " counter(steps) ": ";
 +
}
 +
 +
</style>
 +
 +
<section>
 +
<div class="page" id="page5">
 +
  <div data-anchor-target="#page5" adata--400-top="opacity: 1" adata--700-top="opacity: 0">
 +
    <header data-anchor-target="#page5" data-200-top="opacity: 1" data-500-top="opacity: 0">
 +
      <h2>This Is What They Do</h2>
 +
      <p>IODs use group logic to <strong>find in blood samples and make visible</strong> tumor cells with a given marker profile.</p>
 +
    </header>
 +
 +
    <div class="test" data-anchor-target="#page5 header h2" data-top="opacity: 1" data-500-top="opacity: 0">
 +
      <div class="tubes">
 +
        <img src="/wiki/images/5/53/Czech_Republic_title-agg.gif" alt="Agglutination test" width="545" />
 +
      </div>
 +
 +
      <p class="tube-info"><strong>IOD bands do in a test tube what normally requires days and expensive equipment to do in the lab.</strong></p>
 +
    </div>
 +
 +
    <div class="text" data-anchor-target="#page5 header h2" data-50-top="opacity: 1" data-150-top="opacity: 0">
 +
      <div class="procedure">
 +
        <h3>Procedure*</h3>
 +
        <ol>
 +
          <li>combine two part IOD powder with a prepared sample of peripheral blood.</li>
 +
          <li>incubate for 60 minutes at room temp.</li>
 +
          <li>analyse the sample for visible solid clumps.</li>
 +
        </ol>
 +
 +
        <p>The number of round clumps of at least 5mm in diameter indicates the number of circulating tumor cells of type matching the package label.</p>
 +
      </div>
 +
 +
      <p class="note"><small>* sample protocol</small></p>
 +
 +
      <div class="lines"></div>
 +
 +
      <div class="block tc">
 +
        <h3>Tumor Cell</h3>
 +
        <p>circulating tumor cells are denoted by a combination of expressed surface markers indicating their origin and destination</p>
 +
      </div>
 +
 +
      <div class="block ps">
 +
        <h3>Positive Signal</h3>
 +
        <p>affirmative identification of target triggers coordinated IOD clumping that quickly becomes visible without further instrumentation</p>
 +
      </div>
 +
 +
      <div class="block gl">
 +
        <h3>Group Logic</h3>
 +
        <p>
 +
          Antigen recognition and intercellular communication create a logical network by which a single cell with a given surface marker profile is identified in a background of millions.
 +
        </p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</section>
 +
 +
<section>
 +
<style>
 +
 +
#title #page6
 +
{
 +
  margin: 50px 0 0 0;
 +
  padding: 0 0 50px 0;
 +
  position: relative;
 +
  width: 100%;
 +
  background-color: #303030;
 +
  min-height: 725px;
 +
  height: calc(100vh - 40px);
 +
}
 +
 +
#title #page6 > div
 +
{
 +
  width: 960px;
 +
  margin: 0 auto;
 +
}
 +
 +
#title #page6 header
 +
{
 +
    margin: 0;
 +
    text-align: left;
 +
    padding: 0 48px;
 +
}
 +
 +
#title #page6 h2
 +
{
 +
  color: white;
 +
  font-size: 58px;
 +
  text-transform: uppercase;
 +
  padding: 50px 0 0 0;
 +
}
 +
 +
#title #page6 p
 +
{
 +
  color: white;
 +
  font-size: 15px;
 +
  padding: 0 0 15px 0;
 +
  margin: -5px 0 0 5px;
 +
  text-transform: uppercase;
 +
}
 +
 +
</style>
 +
 +
<div class="page" id="page6" data-anchor-target="#page6" data-200-top="opacity: 1" data-900-top="opacity: 0">
 +
  <div>
 +
    <header>
 +
      <h2>These are the IOD inventors</h2>
 +
      <p>The first Czech iGEM team</p>
 +
    </header>
 +
    <img alt="The IOD inventors" src="/wiki/images/5/54/Czech_Republc_TeamTitle.jpg" width="960" />
 +
  </div>
 +
</div>
 +
</section>
 +
<!-- It's not possible to upload JS file and inlining doesn't work. This is only solution. In case removing this file from Inet, application have fallback (like for mobile version). -->
 +
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
 +
<script type="text/javascript">
 +
//<![CDATA[
 +
  // Detect mobile browser
 +
  var isMobile = function() {
 +
    var check = false;
 +
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
 +
    return check;
 +
  };
 +
 +
  if (!isMobile())
 +
  {
 +
    // Mediawiki escapes & to &amp;
 +
    if (skrollr)
 +
    {
 +
      var s = skrollr.init();
 +
    }
 +
  }
 +
//]]>
 +
</script>
 +
 +
</div>
 
</html>
 
</html>
 +
{{:Team:Czech_Republic/Template:Scripts}}
 +
{{:Team:Czech_Republic/Template:Footer}}

Latest revision as of 14:28, 20 November 2015

Sponsors GeorgievLab

Find where a tumor is from and where it's headed...

  • The first clinically relevant tumor mobility test.
  • Designed to be engineered by the non-synthetic biologist.

Zero diagnostic tests for general tumor mobility

One tumor cell per 5 million blood cells

Localization of tumors and analysis of metastasis is critical to survival...

as low as 4% survival for metastasized cancer

56% survival for lung cancer detected before metastasis

These Are The IODs

intelligent Input-to-Output Diploid units that work together to solve complex problems

Receive

orthogonal receptors and signal transduction modules

Transmit

complementary signal generators with tunable range

Localise

locational tags target communication to specific IOD pairs

  • IOD systems utilize location limited communication and simple signal processing to generate powerful decision networks.
  • IODs interface with each other and with the environment using three types of technologies: receptors, local signals, and locational tags.
  • IODs are naturally insulated from one another by their membranes and hence their design and engineering presents a greater degree of modularity.

this Is How They're Made

a unique clone-free assembly feature brings limitless design flexibility to the non-synthetic biologist

Input Haploid Library

a library of input haploids is constructed to detect various signals at specified locations

Conjugation

input haploids and output haploids are of opposite mating types permitting their easy conjugation and thus making an IOD

Output Haploid Library

output haploids interface with input haploids and generate various intercellular signals

the IOD assembly feature is similar to the solder-free breadboard used by electrical engineers. Conjugation and IOD amplification are complete in a single day. Quick prototyping and optimization are possible using INPUT and OUTPUT libraries that encompass unique and differentially tuned elements akin to collections of resistors, capacitors, and transistors.

This Is What They Do

IODs use group logic to find in blood samples and make visible tumor cells with a given marker profile.

Agglutination test

IOD bands do in a test tube what normally requires days and expensive equipment to do in the lab.

Procedure*

  1. combine two part IOD powder with a prepared sample of peripheral blood.
  2. incubate for 60 minutes at room temp.
  3. analyse the sample for visible solid clumps.

The number of round clumps of at least 5mm in diameter indicates the number of circulating tumor cells of type matching the package label.

* sample protocol

Tumor Cell

circulating tumor cells are denoted by a combination of expressed surface markers indicating their origin and destination

Positive Signal

affirmative identification of target triggers coordinated IOD clumping that quickly becomes visible without further instrumentation

Group Logic

Antigen recognition and intercellular communication create a logical network by which a single cell with a given surface marker profile is identified in a background of millions.

These are the IOD inventors

The first Czech iGEM team

The IOD inventors