|
|
(46 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:Scripts}}
| |
| {{:Team:Czech_Republic/Template:Menu}} | | {{:Team:Czech_Republic/Template:Menu}} |
− |
| |
− |
| |
| <html> | | <html> |
| + | |
| + | <div id="title"> |
| <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 66: |
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> |
| | | |
− | {{:Team:Czech_Republic/Template:Footer}} | + | #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 & |
| + | if (skrollr) |
| + | { |
| + | var s = skrollr.init(); |
| + | } |
| + | } |
| + | //]]> |
| + | </script> |
| + | |
| + | </div> |
| + | </html> |
| + | {{:Team:Czech_Republic/Template:Scripts}} |
| {{:Team:Czech_Republic/Template:Footer}} | | {{:Team:Czech_Republic/Template:Footer}} |