|
|
Line 11: |
Line 11: |
| height: 300px; | | height: 300px; |
| width: 100%; | | width: 100%; |
− | background-image: url(bubbles.svg); | + | background-image: url(/wiki/images/8/87/Czech_Republic_bubbles.png); |
| background-position: center; | | background-position: center; |
| background-repeat: no-repeat; | | background-repeat: no-repeat; |
Line 40: |
Line 40: |
| margin: 0; | | margin: 0; |
| font-weight: normal; | | font-weight: normal; |
| + | line-height: normal; |
| + | color: #303030; |
| } | | } |
| | | |
− | .page p | + | #title .page p |
| { | | { |
| padding: 0; | | padding: 0; |
Line 107: |
Line 109: |
| <div id="sponsors"> | | <div id="sponsors"> |
| <img src="/wiki/images/b/bd/Czech_Republic_sponsors.png" alt="Sponsors" width="700" /> | | <img src="/wiki/images/b/bd/Czech_Republic_sponsors.png" alt="Sponsors" width="700" /> |
| + | </div> |
| + | </div> |
| + | </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; |
| + | } |
| + | |
| + | </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: 205px; |
| + | height: 55px; |
| + | 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: 15px; |
| + | } |
| + | |
| + | #title #page3 .block.receive |
| + | { |
| + | top: 170px; |
| + | left: 120px; |
| + | } |
| + | |
| + | #title #page3 .block.transmit |
| + | { |
| + | top: 170px; |
| + | left: 835px; |
| + | } |
| + | |
| + | #title #page3 .block.localise |
| + | { |
| + | top: 640px; |
| + | left: 420px; |
| + | height: 70px; |
| + | } |
| + | |
| + | #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: 280px; |
| + | 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-top="opacity: 1" data-100-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; |
| + | height: 55px; |
| + | 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-top: -5px; |
| + | line-height: 1.4em; |
| + | } |
| + | |
| + | #title #page4 .block.ihl |
| + | { |
| + | top: 185px; |
| + | left: 0px; |
| + | width: 375px; |
| + | height: 60px; |
| + | } |
| + | |
| + | #title #page4 .block.conj |
| + | { |
| + | top: 635px; |
| + | left: 140px; |
| + | height: 115px; |
| + | width: 290px; |
| + | } |
| + | |
| + | #title #page4 .block.ohl |
| + | { |
| + | top: 185px; |
| + | left: 745px; |
| + | width: 385px; |
| + | height: 60px; |
| + | } |
| + | |
| + | #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-top="opacity: 1" data-100-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 inputs haloids 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; |
| + | height: 55px; |
| + | 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-top: -5px; |
| + | line-height: 1.4em; |
| + | } |
| + | |
| + | #title #page5 .block.ps |
| + | { |
| + | top: 425px; |
| + | right: 40px; |
| + | width: 290px; |
| + | height: 115px; |
| + | } |
| + | |
| + | #title #page5 .block.gl |
| + | { |
| + | top: 570px; |
| + | left: 20px; |
| + | width: 290px; |
| + | height: 160px; |
| + | } |
| + | |
| + | #title #page5 .block.tc |
| + | { |
| + | top: 595px; |
| + | right: 40px; |
| + | width: 290px; |
| + | height: 115px; |
| + | } |
| + | |
| + | #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 phenotype.</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">IOD bands do in a test tube what normally requires days and expensive equipment to do in the lab.</p> |
| + | </div> |
| + | |
| + | <div class="text" data-anchor-target="#page5 header h2" data-top="opacity: 1" data-100-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 back ground of millions. |
| + | </p> |
| + | </div> |
| + | </div> |
| </div> | | </div> |
| </div> | | </div> |