Difference between revisions of "Team:Czech Republic"

 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{:Team:Czech_Republic/Template:Stylesheet}}
 
{{:Team:Czech_Republic/Template:Stylesheet}}
 
{{:Team:Czech_Republic/Template:Menu}}
 
{{:Team:Czech_Republic/Template:Menu}}
 +
<html>
  
−
 
+
<div id="title">
−
<html>
+
 
<style>
 
<style>
  
−
html, body {
+
#title hr
−
margin: 0;
+
{
−
padding: 0;
+
  border: 0;
−
font-family: 'Roboto', sans-serif;
+
  height: 300px;
−
position: relative;
+
  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;
 
}
 
}
  
−
.page {
+
#title section
−
position: relative;
+
{
−
width: 1170px;
+
  background-color: white;
−
margin: 0 auto;
+
  width: 100%;
 +
  position: relative;
 
}
 
}
  
−
.page h2, .page h3 {
+
#title .page  
−
padding: 0;
+
{
−
margin: 0;
+
  position: relative;
−
font-weight: normal;
+
  width: 1200px;
 +
  margin: 0 auto;
 +
  background-color: white;
 
}
 
}
  
−
.page p {
+
#title .page h2, #title .page h3
−
padding: 0;
+
{
−
margin: 0;
+
  padding: 0;
 +
  margin: 0;
 +
  font-weight: normal;
 +
  line-height: normal;
 +
  color: #303030;
 
}
 
}
  
−
#page1 {
+
#title .page p
−
width: 100%;
+
{
−
background-image: url(/wiki/images/2/23/Czech_Republic_home-bg.jpg);
+
  padding: 0;
−
background-position: center center;
+
  margin: 0;
−
background-size: cover;
+
−
background-repeat: no-repeat;
+
−
text-align: center;
+
−
position: relative;
+
−
height: calc(100vh - 43px);
+
 
}
 
}
  
−
#page1 #logo {
+
</style>
−
padding-top: calc(50vh - 200px);
+
 
−
height: 200px;
+
<section>
 +
<style>
 +
 
 +
#title #page1
 +
{
 +
  width: 100%;
 +
  text-align: center;
 +
  position: relative;
 +
  height: calc(100vh - 20px);
 
}
 
}
  
−
#page1 h1 {
+
#title #page1 > div.bg
−
padding: 10px 0;
+
{
−
display: block;
+
  background-image: url(/wiki/images/2/23/Czech_Republic_home-bg.jpg);
−
text-align: center;
+
  background-position: center top;
−
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%);
+
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 100%;
 +
  width: 100%;
 +
  /*position: fixed;*/
 +
  top: 0;
 
}
 
}
  
−
#page1 #sponsors {
+
#title #page1 #logo
−
position: absolute;
+
{
−
top: calc(100vh - 203px);
+
  padding-top: calc(50vh - 200px);
−
height: 140px;
+
  height: 200px;
−
width: 100%;
+
}
−
padding: 10px 0;
+
 
−
background-color: #303030;
+
#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;
 
}
 
}
  
Line 65: Line 102:
  
 
<div class="page" id="page1">
 
<div class="page" id="page1">
−
<div id="logo">
+
  <div class="bg">
−
<h1><img src="/wiki/images/1/15/Czech_Republic_home-logo.png" alt="The IOD Band" width="600" /></h1>
+
    <div id="logo">
−
</div>
+
      <h1><img src="/wiki/images/1/15/Czech_Republic_home-logo.png" alt="The IOD Band" width="600" /></h1>
−
<div id="sponsors">
+
    </div>
−
  <img src="/wiki/images/b/bd/Czech_Republic_sponsors.png" alt="Sponsors" width="700" />
+
  </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>
−
</html>
+
</section>
  
 +
<section>
 +
<style>
  
 +
#title #page2
 +
{
 +
  color: #ab1917;
 +
  padding: 20px 20px 40px 30px;
 +
  height: 820px;
 +
}
 +
 +
#title #page2 > div
 +
{
 +
  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;
 +
}
 +
 +
#title #page2 > div > div:first-child
 +
{
 +
    width: 610px;
 +
    margin: 30px 0 0 0;
 +
}
 +
 +
#title #page2 > div > div:last-child
 +
{
 +
    width: 615px;
 +
    margin: 15px 0 0 auto;
 +
}
 +
 +
#title #page2 ul
 +
{
 +
  font-size: 23.5px;
 +
  padding: 0;
 +
  margin: 15px 0 0 0;
 +
  list-style: none;
 +
}
 +
 +
#title #page2 ul li
 +
{
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 +
#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
 +
{
 +
  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>
 
{{:Team:Czech_Republic/Template:Scripts}}
 
{{:Team:Czech_Republic/Template:Scripts}}
 
{{:Team:Czech_Republic/Template:Footer}}
 
{{: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