|
|
| (6 intermediate revisions by the same user not shown) |
| Line 61: |
Line 61: |
| | } | | } |
| | | | |
| − | .button { | + | .tutorial_button { |
| | position: relative; | | position: relative; |
| | display: block; | | display: block; |
| Line 83: |
Line 83: |
| | } | | } |
| | | | |
| − | .button.selected { | + | .tutorial_button.selected { |
| | filter: grayscale(0%); | | filter: grayscale(0%); |
| | } | | } |
| | | | |
| − | .button.pulsing { | + | .tutorial_button.pulsing { |
| | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8); | | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8); |
| | -webkit-animation: pulse 2s infinite; | | -webkit-animation: pulse 2s infinite; |
| | } | | } |
| | | | |
| − | /*.button.pulsing:hover { | + | /*.tutorial_button.pulsing:hover { |
| | -webkit-animation: none; | | -webkit-animation: none; |
| | }*/ | | }*/ |
| Line 121: |
Line 121: |
| | .top-menu { | | .top-menu { |
| | position: fixed; | | position: fixed; |
| − | top: 0; | + | top: 18px; |
| | left: 0; | | left: 0; |
| | width: 100%; | | width: 100%; |
| Line 128: |
Line 128: |
| | overflow: hidden; | | overflow: hidden; |
| | z-index: 2; | | z-index: 2; |
| | + | line-height: 100%; |
| | } | | } |
| | | | |
| Line 155: |
Line 156: |
| | /*.top-menu .section:last-of-type { margin-right: 0; }*/ | | /*.top-menu .section:last-of-type { margin-right: 0; }*/ |
| | .top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; } | | .top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; } |
| − | .top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; } | + | .top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; color: white; } |
| | .top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; } | | .top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; } |
| | | | |
| Line 189: |
Line 190: |
| | top: 125px; | | top: 125px; |
| | left: 25px; | | left: 25px; |
| | + | line-height: 100%; |
| | } | | } |
| | | | |
| Line 210: |
Line 212: |
| | padding-left: 10px; | | padding-left: 10px; |
| | height: 100%; | | height: 100%; |
| − | color: white;
| |
| | } | | } |
| | | | |
| Line 239: |
Line 240: |
| | top: 120px; | | top: 120px; |
| | left: 400px; | | left: 400px; |
| | + | line-height: 100%; |
| | } | | } |
| | | | |
| Line 289: |
Line 291: |
| | </div> | | </div> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/MESA.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/b/bc/MESA.png"></div> |
| | <div class="text">MESA two-component system replication</div> | | <div class="text">MESA two-component system replication</div> |
| | <div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div> | | <div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div> |
| Line 299: |
Line 301: |
| | </div> | | </div> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/Modelling.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/6b/Modelling.png"></div> |
| | <div class="text">Modeling and<br />mathematics</div> | | <div class="text">Modeling and<br />mathematics</div> |
| | <div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div> | | <div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div> |
| | </div> | | </div> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/interlab1.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/63/Interlab1.png"></div> |
| | <div class="text">Interlab study participation</div> | | <div class="text">Interlab study participation</div> |
| | <div class="desc">Results and details of our measurements for the iGEM 2017 Interlab Study.</div> | | <div class="desc">Results and details of our measurements for the iGEM 2017 Interlab Study.</div> |
| Line 317: |
Line 319: |
| | </div> | | </div> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/safety.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/8/8d/Igemutrecht_safety.png"></div> |
| | <div class="text">Risks & safety-issues</div> | | <div class="text">Risks & safety-issues</div> |
| | <div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div> | | <div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div> |
| Line 330: |
Line 332: |
| | <div class="sections" data-key="team"> | | <div class="sections" data-key="team"> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/team comp.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5e/Team_comp.png"></div> |
| | <div class="text">Meet our team</div> | | <div class="text">Meet our team</div> |
| | <div class="desc">About us, our interests and roles in the team and our supervisors.</div> | | <div class="desc">About us, our interests and roles in the team and our supervisors.</div> |
| Line 340: |
Line 342: |
| | </div> | | </div> |
| | <div class="section"> | | <div class="section"> |
| − | <div class="thumb"><img height="100" src="./menu-thumbnails/Achievements.png"></div> | + | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Achievements.png"></div> |
| | <div class="text">Achievements</div> | | <div class="text">Achievements</div> |
| | <div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div> | | <div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div> |
| Line 379: |
Line 381: |
| | <center> | | <center> |
| | <div class="tutorial" style="position: relative; width: 560px; display: inline-block;"> | | <div class="tutorial" style="position: relative; width: 560px; display: inline-block;"> |
| − | <img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="tutorial_1.png"> | + | <img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png"> |
| − | <img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="tutorial_2.png"> | + | <img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png"> |
| − | <img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="tutorial_3.png"> | + | <img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png"> |
| − | <img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="tutorial_4.png"> | + | <img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png"> |
| | | | |
| | <div class="container" style="position: absolute; top: 50px; left: 0; width: 75px;"> | | <div class="container" style="position: absolute; top: 50px; left: 0; width: 75px;"> |
| − | <span id="link-1" class="button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span> | + | <span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span> |
| | </div> | | </div> |
| | | | |
| | <div class="container" style="position: absolute; top: 50px; left: 500px;"> | | <div class="container" style="position: absolute; top: 50px; left: 500px;"> |
| − | <span id="link-2" class="button">2</span> | + | <span id="link-2" class="tutorial_button">2</span> |
| | </div> | | </div> |
| | | | |
| | <div class="container" style="position: absolute; top: 300px; left: 0;"> | | <div class="container" style="position: absolute; top: 300px; left: 0;"> |
| − | <span id="link-3" class="button">3</span> | + | <span id="link-3" class="tutorial_button">3</span> |
| | </div> | | </div> |
| | | | |
| | <div class="container" style="position: absolute; top: 300px; left: 500px;"> | | <div class="container" style="position: absolute; top: 300px; left: 500px;"> |
| − | <span id="link-4" class="button">4</span> | + | <span id="link-4" class="tutorial_button">4</span> |
| | </div> | | </div> |
| | </div> | | </div> |
| Line 561: |
Line 563: |
| | var line = $$(".menu-underline")[0]; | | var line = $$(".menu-underline")[0]; |
| | | | |
| − | line.style.top = (offset.top + height) + "px"; | + | line.style.top = (offset.top + height - 19) + "px"; |
| | line.style.left = offset.left + "px"; | | line.style.left = offset.left + "px"; |
| | line.style.width = width + "px"; | | line.style.width = width + "px"; |
The OUTCASST two-component system
This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies.
The problem
Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
The system
The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal.
Binding of components with search-specific gRNA sequences.
Next
DNA sample fragment binds to one of the components.
Next
Fragment binding with both components induces co-localization.
Next
Protease cleaves, transcription factor is released from complex.
