Difference between revisions of "Team:Munich"

Line 1: Line 1:
 +
<!-- #919191 Grau1 -->
 +
<!-- #787878 Grau2 -->
 +
<!-- #51A7f9 Blau1 -->
 +
<!-- #3c7cb9 Blau2 -->
 +
<!-- #ffffff weiss -->
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<style>
−
    <meta name="viewport" content="width=device-width" />
+
#home_logo, #sideMenu { display:none; }
−
    <script src = "https://2017.igem.org/Template:Munich/Javascript?action=raw&ctype=text/javascript"></script>
+
−
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Munich/CSS?action=raw&ctype=text/css">
+
−
 
+
−
 
+
−
 
+
−
<style type="text/css">
+
−
    #home_logo, #sideMenu { display:none; }
+
 
     #sideMenu, #top_title, .patrollink  {display:none;}
 
     #sideMenu, #top_title, .patrollink  {display:none;}
 
     #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
     #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
−
     body {background-color:white; }
+
     body {background-color:white; font-size: 14px; }
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
    .navigation-bar{
+
#HQ_page td not(#myContent){
−
  background-color: white !important;
+
padding: 0;
 
}
 
}
  
−
  #HQ_page p{
+
#HQ_page table{
−
  color: rgb(147,149,152);
+
font-size: 14px;
−
  font-family: Helvetica, Arial, sans-serif;
+
−
  font-size: initial; 
+
−
  }
+
−
 
+
−
.ui.secondary.menu.navigation-bar > div.ui.item{
+
−
  padding: 0;
+
 
}
 
}
  
−
 
+
hr{
−
.cascaid{
+
height: 1px !important;
−
  width: 150px;
+
−
  height: auto;
+
 
}
 
}
−
 
+
#HQ_page td{
−
section{
+
border-style: none ;
−
  width: 66%;
+
vertical-align: middle;
−
  margin: auto;
+
 
}
 
}
  
−
#introduction{
+
#HQ_page table{
−
  margin-bottom: 10vh;
+
border-style: none !important;
 +
margin: 0 !important;
 
}
 
}
  
−
.mybutton{
+
html, body
−
  border-radius: 5px;
+
{
−
  color: white;
+
margin: 0;
−
  border-color: transparent;
+
padding: 0;
 +
font-family: "Helvetica", Arial, Serif;
 
}
 
}
−
 
+
.dropdown {
−
h1.myHeader1{
+
    width: 137px;
−
  font-size: 4vw;
+
    margin: auto;
−
  text-align: center;
+
    position: relative;
−
  margin-top: 10vh;
+
    display: inline-block;
 
}
 
}
  
−
#introImgContainer{
 
−
  text-align: center;
 
−
}
 
  
−
img.introImg{
 
−
  width: 70%;
 
−
  height: auto;
 
−
  margin-top: 10vh; /*Changed in comparision to the main structure, since there is no title here, but instead just an img*/
 
−
}
 
  
−
.text{
+
.dropbtnCascAid {
−
  color: rgb(147,149,152) !important;
+
    background-image: url("https://static.igem.org/mediawiki/2017/b/ba/T--Munich--wiki_image_menu_cascaid_low.gif");
 +
    position: relative;
 +
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 
}
 
}
−
.myImg{
+
.dropdown:hover .dropbtnCascAid {
−
  width: 100%;
+
    background-image: url("https://static.igem.org/mediawiki/2017/1/1f/T--Munich--wiki_image_menu_cascaid_high.gif");
−
  height: auto;
+
 
}
 
}
  
−
p.myParagraph{
 
−
  text-align: justify;
 
  
  
 +
.dropbtnProject {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/b/ba/T--Munich--wiki_image_menu_project_low.gif");
 +
    position: relative;
 +
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 
}
 
}
−
 
+
.dropdown:hover .dropbtnProject {
−
.topicContainer > .figureContainer{
+
    background-image: url("https://static.igem.org/mediawiki/2017/5/5d/T--Munich--wiki_image_menu_project_high.gif");
−
  width: 66%;
+
−
  margin: auto;
+
−
  margin-top: 5vh;
+
−
  margin-bottom: 5vh;
+
 
}
 
}
  
  
−
.float-right.figureContainer{
+
 
−
  width: 33%;
+
.dropbtnWetlab {
−
  border: 2px solid black;
+
    background-image: url("https://static.igem.org/mediawiki/2017/9/9d/T--Munich--wiki_image_menu_wetlab_low.gif");
−
  margin: 1rem;
+
    position: relative;
−
  padding: 1rem;
+
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 +
}
 +
.dropdown:hover .dropbtnWetlab {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--Munich--wiki_image_menu_wetlab_high.gif");
 
}
 
}
  
−
p.introP{
 
−
  margin-top: 5vh;
 
−
  margin-bottom: 5vh;
 
  
−
}
 
  
−
.float-right{
+
.dropbtnSoftHardware {
−
  float: right;
+
    background-image: url("https://static.igem.org/mediawiki/2017/b/bb/T--Munich--wiki_image_menu_softhardware_low.gif");
 +
    position: relative;
 +
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 
}
 
}
−
 
+
.dropdown:hover .dropbtnSoftHardware {
−
/* Lightbox CSS*/
+
    background-image: url("https://static.igem.org/mediawiki/2017/1/18/T--Munich--wiki_image_menu_softhardware_high.gif");
−
.lightbox{
+
−
  display: none;
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  background-color: rgba(0,0,0,.7);
+
−
  position: fixed;
+
−
  top: 0;
+
−
  left: 0;
+
−
  z-index: 102;
+
−
  padding-top: 30px;
+
−
  box-sizing: border-box;
+
 
}
 
}
  
−
.lightboxContainer{
 
−
  position: relative;
 
−
  top: 50%;
 
−
  transform: translateY(-50%);
 
  
  
 +
.dropbtnModel {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/7/7b/T--Munich--wiki_image_menu_model_low.gif");
 +
    position: relative;
 +
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 
}
 
}
−
 
+
.dropdown:hover .dropbtnModel {
−
.lightbox img{
+
    background-image: url("https://static.igem.org/mediawiki/2017/3/3d/T--Munich--wiki_image_menu_model_high.gif");
−
  display: block;
+
−
  margin: auto;
+
−
  max-width: 33vw;
+
 
}
 
}
  
−
.lightbox .caption{
 
−
  margin: 15px auto;
 
−
  width: 50%;
 
−
  text-align: center;
 
−
  font-size: 1em;
 
−
  line-height: 1.5;
 
−
  font-weight: 700;
 
−
  color: #eee;
 
−
}
 
−
   
 
−
.tooltip-line{
 
−
      stroke: rgb(147,149,152);
 
−
    }
 
  
−
  .myvisible{
 
−
    -webkit-animation: myvisible 1s linear;
 
−
    -webkit-animation-fill-mode: forwards;
 
−
  }
 
  
−
  @keyframes myvisible{
+
.dropbtnHP {
−
     0%{
+
     background-image: url("https://static.igem.org/mediawiki/2017/7/78/T--Munich--wiki_image_menu_hp_low.gif");
−
      opacity: 0;
+
    position: relative;
−
     }
+
     padding: 0px;
−
     100%{
+
     border: none;
−
      opacity: 1;
+
    cursor: pointer;
−
     }
+
     width: 137px;
−
  }
+
    height: 32px;
 +
}
 +
.dropdown:hover .dropbtnHP {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/d/df/T--Munich--wiki_image_menu_hp_high.gif");
 +
}
  
−
  .colorNegative{
 
−
    -webkit-animation: colorNegative 2s linear;
 
−
    -webkit-animation-fill-mode: forwards;
 
−
  }
 
  
−
  @keyframes colorNegative{
 
−
    0%{
 
−
      fill: white;
 
−
    }
 
  
−
    100%{
+
.dropbtnTeam {
−
      fill: rgb(0,174,239);
+
    background-image: url("https://static.igem.org/mediawiki/2017/f/fd/T--Munich--wiki_image_menu_team_low.gif");
−
     }
+
     position: relative;
−
  } /* Because CSS is such a wonderful language, it is imperative to have the colorNegative definitions AFTER the visible one; otherwise the visible overwrites the colorNegative and the circles expand at the end, but don't change color.*/
+
    padding: 0px;
 +
    border: none;
 +
    cursor: pointer;
 +
    width: 137px;
 +
    height: 32px;
 +
}
 +
.dropdown:hover .dropbtnTeam {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/5/57/T--Munich--wiki_image_menu_team_high.gif");
 +
}
  
  
−
  .invisible{
 
−
    opacity: 0;
 
−
  }
 
  
−
  .appear{
+
.dropdown-contentDescription {
−
     -webkit-animation: appear 1s linear;
+
     background-image: url("wiki_image_menu_description_low.gif");
−
  }
+
    display: none;
 +
    position: absolute;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentDescription {
 +
    background-image: url("wiki_image_menu_description_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentDescription a {
 +
    background-image: url("wiki_image_menu_description_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentDescription a:hover {
 +
    background-image: url("wiki_image_menu_description_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  @keyframes appear {
 
−
    0%{
 
−
      opacity: 0;
 
−
    }
 
  
−
    100%{
 
−
      opacity: 1;
 
−
    }
 
−
  }
 
−
  .white{
 
−
    -webkit-animation: white 1s linear;
 
−
    -webkit-animation-fill-mode: forwards;
 
−
  }
 
  
−
  @keyframes white{
+
.dropdown-contentDesign {
−
     0%{
+
     background-image: url("wiki_image_menu_design_low.gif");
−
      fill: rgb(255,149,152);
+
    display: none;
−
     }
+
    position: absolute;
−
     100%{
+
    top: 64;
−
      fill: white;
+
    height: 32px;
−
     }
+
    width: 137px;
−
  }
+
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentDesign {
 +
    background-image: url("wiki_image_menu_design_high.gif");
 +
     height: 32px;
 +
     width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentDesign a {
 +
    background-image: url("wiki_image_menu_design_low.gif");
 +
     height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentDesign a:hover {
 +
    background-image: url("wiki_image_menu_design_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
.colorPositive{
 
−
    -webkit-animation: colorPositive 2s linear;
 
−
    -webkit-animation-fill-mode: forwards;
 
−
  }
 
  
−
  @keyframes colorPositive{
 
−
    0%{
 
−
      fill:white;
 
−
    }
 
  
−
    100%{
+
.dropdown-contentProofofConcept {
−
      fill: #70BF41;
+
    background-image: url("wiki_image_menu_proofofconcept_low.gif");
−
     }
+
     display: none;
−
  }
+
    position: absolute;
−
 
+
    top: 96;
−
.explanation{
+
    height: 32px;
−
     /*border-width: 30px;
+
     width: 137px;
−
      border-radius: 10%; For when there is svg canvas in the divs */
+
    z-index: 1;
−
      border-radius: 30px;
+
}
−
      border: 5px solid rgb(147,149,152);
+
.dropdown:hover .dropdown-contentProofofConcept {
−
      padding: 10px;
+
    background-image: url("wiki_image_menu_proofofconcept_high.gif");
−
      margin-left: -1rem;  
+
    height: 32px;
−
      color: rgb(147,149,152);
+
    width: 137px;
−
      position: absolute;
+
    display: block;
−
      top: 0;
+
}
−
      left:0;
+
.dropdown-contentProofofConcept a {
−
      background-color: white;
+
    background-image: url("wiki_image_menu_proofofconcept_low.gif");
−
      display: flex;    
+
    height: 32px;
−
  }
+
    width: 137px;
−
 
+
    padding: 0px 0px;
−
.explanation-text{
+
    text-decoration: none;
−
  max-width: 25vw;
+
    display: block;
 +
}
 +
.dropdown-contentProofofConcept a:hover {
 +
    background-image: url("wiki_image_menu_proofofconcept_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 
}
 
}
  
−
  .pretty-picture{
 
−
    width: auto;
 
−
    height: 20vh;
 
−
  }
 
  
−
  button{
 
−
      font-family: Helvetica, Arial, sans-serif !important;
 
−
      position: absolute;
 
−
      right: 16.67%;
 
−
      z-index: 41;
 
−
  }
 
  
 +
.dropdown-contentDemonstration {
 +
    background-image: url("wiki_image_menu_demonstration_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 128;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentDemonstration {
 +
    background-image: url("wiki_image_menu_demonstration_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentDemonstration a {
 +
    background-image: url("wiki_image_menu_demonstration_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentDemonstration a:hover {
 +
    background-image: url("wiki_image_menu_demonstration_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  line{
 
−
    stroke: rgb(147,149,152);
 
−
  }
 
  
−
  .skip-animation{
 
−
    background-color: rgb(0,174,239) !important;
 
−
  }
 
  
−
@media screen and (max-width: 992px){
+
.dropdown-contentApplication {
−
  h1.myHeader1{
+
    background-image: url("wiki_image_menu_application_low.gif");
−
     font-size: 40px;
+
    display: none;
−
      
+
    position: absolute;
−
  }
+
    top: 160;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentApplication {
 +
    background-image: url("wiki_image_menu_application_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentApplication a {
 +
    background-image: url("wiki_image_menu_application_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentApplication a:hover {
 +
     background-image: url("wiki_image_menu_application_high.gif");
 +
     height: 32px;
 +
    width: 137px;
 +
}
  
−
  .float-right.figureContainer{
 
−
    width: 100%;
 
−
    padding: 1rem;
 
−
    margin: 0;
 
−
  }
 
  
  
−
  .topicContainer> .figureContainer{
+
.dropdown-contentFinalResults {
−
     width: 100%;
+
    background-image: url("wiki_image_menu_finalresults_low.gif");
−
     padding: 1rem;
+
    display: none;
−
     margin: 0;
+
    position: absolute;
−
  }
+
    top: 192;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentFinalResults {
 +
    background-image: url("wiki_image_menu_finalresults_high.gif");
 +
    height: 32px;
 +
     width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentFinalResults a {
 +
    background-image: url("wiki_image_menu_finalresults_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
     padding: 0px 0px;
 +
     text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentFinalResults a:hover {
 +
    background-image: url("wiki_image_menu_finalresults_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  .float-right{
 
−
    float: none;
 
−
  }
 
  
−
 
 
−
 
 
−
  .mybutton{
 
−
   
 
−
  }
 
  
 +
.dropdown-contentEntrepreneurship {
 +
    background-image: url("wiki_image_menu_entrepreneurship_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 224;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentEntrepreneurship {
 +
    background-image: url("wiki_image_menu_entrepreneurship_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentEntrepreneurship a {
 +
    background-image: url("wiki_image_menu_entrepreneurship_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentEntrepreneurship a:hover {
 +
    background-image: url("wiki_image_menu_entrepreneurship_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 
}
 
}
−
@media screen and (max-width: 769px){
 
−
  .lightbox img{
 
−
    max-width: 90vw;
 
−
  }
 
  
−
  .lightbox .caption{
 
−
    width: 90vw;
 
−
  }
 
  
−
  .explanation-text{
+
 
 +
.dropdown-contentAchievements {
 +
    background-image: url("wiki_image_menu_achievements_low.gif");
 
     display: none;
 
     display: none;
−
  }
+
    position: absolute;
−
  .pretty-picture{
+
    top: 256;
−
     width: auto;
+
    height: 32px;
−
     height: 10vh;
+
    width: 137px;
−
  }  
+
    z-index: 1;
−
  .explanation{
+
}
−
     border-width: 2px;
+
.dropdown:hover .dropdown-contentAchievements {
−
     border-radius: 3px;
+
     background-image: url("wiki_image_menu_achievements_high.gif");
−
  }
+
     height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentAchievements a {
 +
     background-image: url("wiki_image_menu_achievements_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
     padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentAchievements a:hover {
 +
    background-image: url("wiki_image_menu_achievements_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 
}
 
}
  
−
</style>
 
  
−
</head>
 
−
<body onresize="renderDevice();calculateEndsteps();skipAnimation()">
 
−
<div class=" ui fixed secondary menu grid">
 
−
    <div class="ui computer only fixed seven item secondary menu row navigation-bar">
 
−
      <div class="ui just item">
 
−
            <img class="ui cascaid image" src="https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png">
 
−
        </div>
 
−
        <div class="ui dropdown item" tabindex="0">
 
−
            <div class="text">Project</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="active item">Description</a>
 
−
                <a class="disabled item">Interlab</a>
 
−
            </div>
 
−
        </div>
 
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Design</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Overall</a>
 
−
                <a class="item">Parts</a>
 
−
                <a class="item">Hardware</a>
 
−
                <a class="item">Software</a>
 
−
                <a class="item">Modeling</a>
 
−
            </div>
 
−
        </div>
 
−
        <div class="ui dropdown item" tabindex="0">
 
−
            <div class="text">Lab</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Lab journal</a>
 
−
                <a class="disabled item">Experiments</a>
 
−
                <a class="disabled item">Results</a>
 
−
                <a class="disabled item">Safety</a>
 
−
            </div>
 
−
        </div>
 
  
−
        <div class="ui dropdown item" tabindex="0">
+
.dropdown-contentProtocolsMethods {
−
            <div class="text">Team</div>
+
    background-image: url("wiki_image_menu_protocolsmethods_low.gif");
−
            <div class="ui menu" tabindex="-1">
+
    display: none;
−
                <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
+
    position: absolute;
−
                <a class="disabled item">Attributions</a>
+
    top: 32;
−
                <a class="disabled item">Collaborations</a>
+
    height: 32px;
−
            </div>
+
    width: 137px;
−
        </div>
+
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentProtocolsMethods {
 +
    background-image: url("wiki_image_menu_protocolsmethods_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentProtocolsMethods a {
 +
    background-image: url("wiki_image_menu_protocolsmethods_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentProtocolsMethods a:hover {
 +
    background-image: url("wiki_image_menu_protocolsmethods_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Human Practices</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Awards</a>
 
−
                <a class="item">Medals</a>
 
−
            </div>
 
−
        </div>
 
  
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Awards</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Special prizes</a>
 
−
                <a class="item">Medals</a>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
−
    <div class="ui mobile only fixed two item secondary menu row navigation-bar">
 
−
      <div class="ui just item">
 
−
            <img class="ui cascaid image" src="https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png">
 
−
        </div>
 
−
        <div class="ui dropdown item" tabindex="0">
 
−
          <div class="text">
 
−
            Menu
 
−
          </div>
 
−
          <div class="ui menu" tabindex="-1">
 
−
            <div class="ui item accordion">
 
−
              <div class="title">Project</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Description</div>
 
−
                <div class="">Interlab</div>
 
−
              </div>
 
−
             
 
−
              <div class="title">Design</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Overall</div>
 
−
                <div class="">Parts</div>
 
−
                <div class="">Hardware</div>
 
−
                <div class="">Software</div>
 
−
                <div class="">Modeling</div>
 
−
              </div>
 
−
             
 
−
              <div class="title">Lab</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Lab journal</div>
 
−
                <div class="">Experiments</div>
 
−
                <div class="">Safety</div>
 
−
              </div>
 
−
             
 
−
              <div class="title">Team</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Team Members</div>
 
−
                <div class="">Attributions</div>
 
−
                <div class="">Collaboration</div>
 
−
              </div>
 
−
             
 
−
              <div class="title">Human Practices</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Awards</div>
 
−
                <div class="">Medals</div>
 
−
              </div>
 
−
             
 
−
              <div class="title">Awards</div>
 
−
              <div class="ui content bulleted list">
 
−
                <div class="">Special prizes</div>
 
−
                <div class="">Medals</div>
 
−
              </div>
 
−
             
 
−
            </div>         
 
−
          </div>
 
−
        </div>
 
−
       
 
−
    </div>
 
−
    <div class="ui tablet only fixed seven item secondary menu row navigation-bar">
 
−
      <div class="ui just item">
 
−
            <img class="ui cascaid image" src="https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png">
 
−
        </div>
 
−
        <div class="ui dropdown item" tabindex="0">
 
−
            Tablet
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="active item">Description</a>
 
−
                <a class="disabled item">Interlab</a>
 
−
            </div>
 
−
        </div>
 
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Design</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Overall</a>
 
−
                <a class="item">Parts</a>
 
−
                <a class="item">Hardware</a>
 
−
                <a class="item">Software</a>
 
−
                <a class="item">Modeling</a>
 
−
            </div>
 
−
        </div>
 
−
        <div class="ui dropdown item" tabindex="0">
 
−
            <div class="text">Lab</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Lab journal</a>
 
−
                <a class="disabled item">Experiments</a>
 
−
                <a class="disabled item">Results</a>
 
−
                <a class="disabled item">Safety</a>
 
−
            </div>
 
−
        </div>
 
  
−
        <div class="ui dropdown item" tabindex="0">
+
.dropdown-contentMaterials {
−
            <div class="text">Team</div>
+
    background-image: url("wiki_image_menu_materials_low.gif");
−
            <div class="ui menu" tabindex="-1">
+
    display: none;
−
                <a class="item" href="https://2017.igem.org/Team:Munich/Team">The Team</a>
+
    position: absolute;
−
                <a class="disabled item">Attributions</a>
+
    top: 64;
−
                <a class="disabled item">Collaborations</a>
+
    height: 32px;
−
            </div>
+
    width: 137px;
−
        </div>
+
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentMaterials {
 +
    background-image: url("wiki_image_menu_materials_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentMaterials a {
 +
    background-image: url("wiki_image_menu_materials_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentMaterials a:hover {
 +
    background-image: url("wiki_image_menu_materials_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Human Practices</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Awards</a>
 
−
                <a class="item">Medals</a>
 
−
            </div>
 
−
        </div>
 
  
−
        <div class="ui disabled dropdown item" tabindex="0">
 
−
            <div class="text">Awards</div>
 
−
            <div class="ui menu" tabindex="-1">
 
−
                <a class="item">Special prizes</a>
 
−
                <a class="item">Medals</a>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
−
  </div>
 
  
−
<section id="introduction">
+
.dropdown-contentLabJournal {
−
  <div id="introImgContainer">
+
    background-image: url("wiki_image_menu_labjournal_low.gif");
−
     <img class="myImg introImg" src="https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png"/ alt="intro Picture">
+
     display: none;
−
  </div>
+
    position: absolute;
−
  <div id="introPContainer">
+
    top: 96;
−
     <p class="myParagraph introP">
+
     height: 32px;
−
The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S RNA from E. coli. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout. Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics. Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.
+
    width: 137px;
−
     </p>
+
    z-index: 1;
−
  </div>
+
}
−
</section>
+
.dropdown:hover .dropdown-contentLabJournal {
−
<div style="position: relative;"> <!-- Dont' be lazy and change this at some point... -->
+
    background-image: url("wiki_image_menu_labjournal_high.gif");
−
  <button onclick="skipAnimation()" class ="mybutton skip-animation" >
+
     height: 32px;
−
      <b>Skip animation</b>
+
    width: 137px;
−
  </button>
+
    display: block;
−
  <div id="canvas-container" >
+
}
−
     <svg id="svg-canvas" >
+
.dropdown-contentLabJournal a {
 +
    background-image: url("wiki_image_menu_labjournal_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentLabJournal a:hover {
 +
     background-image: url("wiki_image_menu_labjournal_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
      <circle fill="rgb(147,149,152)" id="top-circle" class="circle" />
 
−
     
 
−
     
 
−
   
 
−
      <line class="line-vertical" id="top-line" y1="-3"/>
 
−
      <line class="line-vertical" id="bottom-line1" y1="-1"/>
 
−
      <line class="line-vertical" id="bottom-line2" y1="-1"/>
 
−
      <line class="line-vertical" id="bottom-line3" y1="-1"/>    <!-- It is important to put the bottom lines before the rect so the latter covers any gaps appearing due to rounding erros -->
 
  
−
      <rect fill="rgb(0,174,239)" rx="10" ry="10" id="device-body" fill="rgb(147,149,152)"/> <!-- Maybe the corners are too rounded? -->
 
  
−
      <line class="line-horizontal" id="horizontal-line1"/>
+
.dropdown-contentSafety {
−
      <line class="line-horizontal" id="horizontal-line2"/>
+
    background-image: url("wiki_image_menu_safety_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 128;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentSafety {
 +
    background-image: url("wiki_image_menu_safety_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentSafety a {
 +
    background-image: url("wiki_image_menu_safety_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentSafety a:hover {
 +
    background-image: url("wiki_image_menu_safety_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
      <line class="line-vertical2" id="bottom-line4" y1="-1"/>
 
−
      <line class="line-vertical2" id="bottom-line5" y1="-1"/>
 
  
−
      <circle fill="rgb(147,149,152)" id="bottom-circle1" class="circlebottom" />
 
−
      <circle fill="rgb(147,149,152)" id="bottom-circle2" class="circlebottom" />
 
−
      <circle fill="rgb(147,149,152)" id="bottom-circle3" class="circlebottom" />
 
  
−
+
.dropdown-contentParts {
−
      <line class="tooltip-line" id="tooltip-line2" />
+
    background-image: url("wiki_image_menu_parts_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 160;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentParts {
 +
    background-image: url("wiki_image_menu_parts_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentParts a {
 +
    background-image: url("wiki_image_menu_parts_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentParts a:hover {
 +
    background-image: url("wiki_image_menu_parts_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
 
−
      <line class="tooltip-line" id="tooltip-line3" />
 
  
−
 
−
      <line class="tooltip-line" id="tooltip-line4" />
 
  
−
+
.dropdown-contentInterlab {
−
      <line class="tooltip-line" id="tooltip-line5" />
+
    background-image: url("wiki_image_menu_interlab_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 192;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentInterlab {
 +
    background-image: url("wiki_image_menu_interlab_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentInterlab a {
 +
    background-image: url("wiki_image_menu_interlab_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentInterlab a:hover {
 +
    background-image: url("wiki_image_menu_interlab_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
      <circle class="pulse" fill="rgb(255,149,152)" id="pulse" />
 
−
      <circle class="sample" fill="rgb(255,149,152)" id="sample" />
 
  
−
      <circle class="invisible pulse" fill="white" id="pulse2" />
 
−
      <circle class="invisible sample"  fill="white" id="sample2" />
 
  
−
      <circle class="invisible pulse" fill="white" id="pulse3" />
+
.dropdown-contentSoftware {
−
      <circle class="invisible sample" fill="white" id="sample3" />
+
    background-image: url("wiki_image_menu_software_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 32;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentSoftware {
 +
    background-image: url("wiki_image_menu_software_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentSoftware a {
 +
    background-image: url("wiki_image_menu_software_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentSoftware a:hover {
 +
    background-image: url("wiki_image_menu_software_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
 
−
      <line class="tooltip-line" id="tooltip-line1" />  <!-- The first tooltip and circle are put here so they are on top of the sample -->
 
−
    </svg>
 
−
  </div>
 
  
−
    <div class="explanation explanation-left invisible" id="tip1">
 
−
    <div class="pretty-picture-container">
 
−
      <img class="pretty-picture lightboxAble" src="https://static.igem.org/mediawiki/2017/thumb/6/6b/T--Munich--FrontPage001.jpeg/800px-T--Munich--FrontPage001.jpeg" alt="<b>Step 1:</b><br>
 
−
      A sample, such as blood or saliva, is placed into the device.">
 
−
    </div>
 
−
    <p class="explanation-text">
 
−
      <b>Step 1:</b><br>
 
−
      A sample, such as blood or saliva, is placed into the device.
 
−
    </p>
 
−
  </div>
 
−
 
 
−
   
 
−
  <div class="explanation explanation-left invisible" id="tip3">
 
−
    <div class="pretty-picture-container">
 
−
      <img class="pretty-picture lightboxAble" src="https://static.igem.org/mediawiki/2017/thumb/6/68/T--Munich--FrontPage003.jpeg/800px-T--Munich--FrontPage003.jpeg">
 
−
    </div>
 
−
    <p class="explanation-text">
 
−
      <b>Step 3: </b><br>
 
−
      Cas13a binds the target sequence and cuts it in smaller fragments. After this inital digestion, the enzyme changes into a RNAase-active conformation.
 
−
    </p>
 
−
  </div>
 
−
 
 
−
  <div class="explanation explanation-left invisible" id="tip5">
 
−
    <div class="pretty-picture-container">
 
−
      <img class="pretty-picture" src="https://static.igem.org/mediawiki/2017/thumb/f/f6/T--Munich--FrontPage005.jpeg/800px-T--Munich--FrontPage005.jpeg">
 
−
    </div>
 
−
    <p class="explanation-text">
 
−
      <b>Step 5:</b><br>
 
−
      An easy to interpret read-out tells whether a specific pathogen was present in the sample.
 
−
    </p>
 
−
  </div>
 
−
 
 
−
    <div class="explanation explanation-right invisible" id="tip2">
 
−
      <div class="pretty-picture-container">
 
−
        <img class="pretty-picture lightboxAble" src="https://static.igem.org/mediawiki/2017/e/e1/T--Munich--FrontPage002.svg" alt="<b>Step 2:</b><br>
 
−
        RNA is purified with the help of our reusable, 3D-printed microfluidic device.">
 
−
      </div>
 
−
      <p class="explanation-text">
 
−
        <b>Step 2:</b><br>
 
−
        RNA is purified with the help of our reusable, 3D-printed microfluidic device.
 
−
      </p>
 
−
    </div>
 
−
    <div class="explanation explanation-right invisible" id="tip4">
 
−
      <div class="pretty-picture-container">
 
−
        <img class="pretty-picture lightboxAble" src="https://static.igem.org/mediawiki/2017/thumb/f/f0/T--Munich--FrontPage004.jpeg/800px-T--Munich--FrontPage004.jpeg">
 
−
      </div>
 
−
      <p class="explanation-text">
 
−
        <b>Step 4:</b><br>
 
−
        While in this conformation, Cas13a degrades the read-out RNA, producing a visible signal.
 
−
      </p>
 
−
    </div>
 
−
 
 
  
−
<div class="ui bottom fixed icon menu">
+
.dropdown-contentHardware {
−
  <a class="item" href="https://www.facebook.com/Munich.iGEM/">
+
    background-image: url("wiki_image_menu_hardware_low.gif");
−
     <i class="facebook icon"></i>
+
     display: none;
−
  </a>
+
    position: absolute;
−
  <a class="item" href="https://www.instagram.com/igem.munich.2017/">
+
    top: 64;
−
     <i class="instagram icon"></i>
+
    height: 32px;
−
  </a>
+
    width: 137px;
−
  <a class="item" href="mailto:igem.munich@gmail.com">
+
    z-index: 1;
−
     <i class="mail icon"></i>
+
}
−
  </a>
+
.dropdown:hover .dropdown-contentHardware {
−
</div>
+
     background-image: url("wiki_image_menu_hardware_high.gif");
−
     <script>
+
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentHardware a {
 +
    background-image: url("wiki_image_menu_hardware_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentHardware a:hover {
 +
     background-image: url("wiki_image_menu_hardware_high.gif");
 +
    height: 32px;
 +
     width: 137px;
 +
}
  
−
//This script configures the svg-image to have a proportional size relative to the window-size
 
−
  var animationstep;
 
  
−
  var pulsestep;
 
  
−
  var shiftcanvas;
+
.dropdown-contentHPSilver {
 +
    background-image: url("wiki_image_menu_hpsilver_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 32;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentHPSilver {
 +
    background-image: url("wiki_image_menu_hpsilver_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentHPSilver a {
 +
    background-image: url("wiki_image_menu_hpsilver_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentHPSilver a:hover {
 +
    background-image: url("wiki_image_menu_hpsilver_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  var canvaswidth;
 
  
−
  var devicewidth;
 
  
−
  var circleradius;
+
.dropdown-contentIHPgold {
 +
    background-image: url("wiki_image_menu_ihpgold_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 64;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentIHPgold {
 +
    background-image: url("wiki_image_menu_ihpgold_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentIHPgold a {
 +
    background-image: url("wiki_image_menu_ihpgold_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentIHPgold a:hover {
 +
    background-image: url("wiki_image_menu_ihpgold_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  var cycircle;
 
  
−
  var linewidth;
 
  
−
  var linelength;
+
.dropdown-contentPublicEngagement {
 +
    background-image: url("wiki_image_menu_publicengagement_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 96;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentPublicEngagement {
 +
    background-image: url("wiki_image_menu_publicengagement_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentPublicEngagement a {
 +
    background-image: url("wiki_image_menu_publicengagement_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentPublicEngagement a:hover {
 +
    background-image: url("wiki_image_menu_publicengagement_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  var deviceheight;
 
  
−
  var linelengthHor;
 
  
−
  var tooltipradius;
+
.dropdown-contentCollaborations {
 +
    background-image: url("wiki_image_menu_collaborations_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 128;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentCollaborations {
 +
    background-image: url("wiki_image_menu_collaborations_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentCollaborations a {
 +
    background-image: url("wiki_image_menu_collaborations_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentCollaborations a:hover {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/1/1c/T--Munich--wiki_image_menu_teammembers_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  var tooltiplinelength;
 
  
−
  var heightexplanation;
 
  
−
  var svgheight;
+
.dropdown-contentTeamMembers {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/2/2b/T--Munich--wiki_image_menu_teammembers_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 32;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentTeamMembers {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/1/1c/T--Munich--wiki_image_menu_teammembers_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentTeamMembers a {
 +
    background-image: url("wiki_image_menu_teammembers_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentTeamMembers a:hover {
 +
    background-image: url("wiki_image_menu_teammembers_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  var baserightLinelength; //This variable is responsible for setting a baselength for the tooltip lines. Changing it changes all tooltip lines, but keeping their ratios.
 
  
−
  var firstrender = true; //Boolean to differentiate whether it is the first time the device is being rendered or resizing is taking place.
 
  
−
  renderDevice();
+
.dropdown-contentSupervisors {
 +
    background-image: url("wiki_image_menu_supervisors_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 64;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentSupervisors {
 +
    background-image: url("wiki_image_menu_supervisors_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentSupervisors a {
 +
    background-image: url("wiki_image_menu_supervisors_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentSupervisors a:hover {
 +
    background-image: url("wiki_image_menu_supervisors_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
  
  
 +
.dropdown-contentPIs {
 +
    background-image: url("wiki_image_menu_pis_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 96;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentPIs {
 +
    background-image: url("wiki_image_menu_pis_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentPIs a {
 +
    background-image: url("wiki_image_menu_pis_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentPIs a:hover {
 +
    background-image: url("wiki_image_menu_pis_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
}
  
−
  function renderDevice(){
 
−
    var hola;
 
−
    if(!firstrender){
 
−
     
 
−
      hola = $("#sample").attr("cy")/svgheight; 
 
−
    }
 
−
 
−
 
 
−
 
−
    deviceheightbefore = deviceheight //deviceheightbefore is only there to save a value before the resizing, so the elements of the device can be positioned accordingly.
 
  
−
    canvaswidth = window.innerWidth*0.80;
 
−
   
 
  
−
    shiftcanvas = canvaswidth*0.1; //Shift canvas is there so make it easy to horizontally move the whole construct of svg-canvas and explanation
+
.dropdown-contentCollaboratingInstitutions {
−
 
+
     background-image: url("wiki_image_menu_collaboratinginstitutions_low.gif");
−
     devicewidth = window.innerWidth*0.0534;    //Defining the width of the deviece-rectangle, around which the whole desing is based.
+
    display: none;
−
 
+
     position: absolute;
−
     circleradius = devicewidth*0.5;
+
    top: 128;
−
 
+
     height: 32px;
−
     circleradiusbottom = circleradius * 0.7;
+
    width: 137px;
−
 
+
     z-index: 1;
−
     linewidth = devicewidth*0.1;
+
}
−
 
+
.dropdown:hover .dropdown-contentCollaboratingInstitutions {
−
    linelength = devicewidth*0.33;
+
     background-image: url("wiki_image_menu_collaboratinginstitutions_high.gif");
−
 
+
    height: 32px;
−
     if(window.innerWidth <= 768){
+
    width: 137px;
−
      deviceheight = window.innerHeight*0.6;
+
     display: block;
−
      tooltiplinelength = canvaswidth;
+
}
−
      baserightLinelength = linelength*4.5;
+
.dropdown-contentCollaboratingInstitutions a {
−
     } else {
+
    background-image: url("wiki_image_menu_collaboratinginstitutions_low.gif");
−
      deviceheight = window.innerHeight*0.9;
+
    height: 32px;
−
      tooltiplinelength = canvaswidth*0.1;
+
    width: 137px;
−
      baserightLinelength = linelength*2;
+
     padding: 0px 0px;
−
     }  
+
    text-decoration: none;
−
 
+
    display: block;
−
     linelengthbottom = linelength*2.3;     
+
}
−
 
+
.dropdown-contentCollaboratingInstitutions a:hover {
−
     linelengthHor = linelength*2.5;
+
     background-image: url("wiki_image_menu_collaboratinginstitutions_high.gif");
 +
     height: 32px;
 +
     width: 137px;
 +
}
  
−
    tooltipradius = circleradius*0.20;
 
  
−
   
 
  
−
     heightexplanation = parseInt($(".explanation").css("height"));  
+
.dropdown-contentSponsors {
−
 
+
     background-image: url("wiki_image_menu_sponsors_low.gif");
−
      
+
     display: none;
−
 
+
     position: absolute;
−
    svgheight = deviceheight+devicewidth*6;  
+
     top: 160;
−
 
+
     height: 32px;
−
     cycircle = svgheight*0.05;
+
    width: 137px;
−
 
+
    z-index: 1;
−
     animationstep = Math.ceil(9000/deviceheight); //Time in ms that each step of the animation needs. Increasing makes the animation slower.
+
}
−
 
+
.dropdown:hover .dropdown-contentSponsors {
−
     pulsestep = Math.ceil(2563/circleradius); //Time of the step in the pulse animation. Has to be different to animationstep, because the pulse cycle should be the same regardless of deivce size.
+
    background-image: url("wiki_image_menu_sponsors_high.gif");
−
 
+
     height: 32px;
−
  $("#svg-canvas").attr("height",svgheight); //This two lines are to make sure the footer stays relatively close to the end of the device.
+
     width: 137px;
−
 
+
    display: block;
−
 
+
}
−
  $("#svg-canvas").attr("width",canvaswidth+''); //The Width of the canvas is defined
+
.dropdown-contentSponsors a {
−
 
+
    background-image: url("wiki_image_menu_sponsors_low.gif");
−
 
+
    height: 32px;
−
 
+
    width: 137px;
−
  $(".circle").attr("r",circleradius);   
+
    padding: 0px 0px;
−
  $(".circlebottom").attr("r",circleradiusbottom); //The radius of the circles are defined.
+
    text-decoration: none;
−
  $("#top-circle").attr("cx",canvaswidth*0.1+'');
+
    display: block;
−
  $("#top-circle").attr("cy",cycircle+'');            //The position of the top-circle is defined.
+
}
−
 
+
.dropdown-contentSponsors a:hover {
−
 
+
     background-image: url("wiki_image_menu_sponsors_high.gif");
−
 
+
     height: 32px;
−
 
+
     width: 137px;
−
  $("#sample").attr("cx",canvaswidth*0.1);
+
−
  if(firstrender) $("#sample").attr("cy",cycircle);              //The sample circle is defined. 
+
−
  $("#sample").attr("r",circleradius);
+
−
 
+
−
 
+
−
 
+
−
  $("#pulse").attr("r",Math.max(circleradius*0.04,1));  
+
−
     $("#pulse").attr("cx",canvaswidth*0.1);
+
−
     if(firstrender) $("#pulse").attr("cy",cycircle);                //The inital size and position of the pulse circle are defined.
+
−
firstrender = false;   
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  $("line").css("stroke-width",linewidth+''); //The width of the lines is defined.
+
−
 
+
−
  $(".line-vertical").attr("y2",linelength+1+''); //The length of the vertical lines is defined. +1 is needed due to roundig errors.
+
−
 
+
−
  $(".line-vertical2").attr("y2",linelengthbottom+''); //The length of the other bottom lines is defined
+
−
 
+
−
  $("#top-line").css("transform","translate("+canvaswidth*0.1+"px,"+(cycircle+circleradius)+"px)"); //The top line is correctly positioned.
+
−
 
+
−
 
+
−
  $("#device-body").attr("width",devicewidth);
+
−
  $("#device-body").attr("height",deviceheight);
+
−
  $("#device-body").attr("x",canvaswidth*0.1-devicewidth*0.5+'');
+
−
  $("#device-body").attr("y",cycircle+circleradius+linelength+'');          //The width and position of the device-rectangle are defined.
+
−
 
+
−
  $("#sample2").attr("r",parseInt(circleradius*0.15));
+
−
  $("#sample2").attr("cx",canvaswidth*0.1);
+
−
  $("#sample2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)+1);
+
−
  $("#pulse2").attr("r",circleradius*0.04);
+
−
  $("#pulse2").attr("cx",canvaswidth*0.1);
+
−
  $("#pulse2").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)+1);
+
−
 
+
−
  $("#sample3").attr("r",parseInt(circleradius*0.15));
+
−
  $("#sample3").attr("cx",canvaswidth*0.1);
+
−
  $("#sample3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)+1);
+
−
  $("#pulse3").attr("r",circleradius*0.04);
+
−
  $("#pulse3").attr("cx",canvaswidth*0.1);
+
−
  $("#pulse3").attr("cy",parseInt(cycircle+linelength+circleradius+0.65*deviceheight)+1); //Defining the two other circles that will show later in the animation.
+
−
 
+
−
 
+
−
 
+
−
  $("#bottom-line1").css("transform","translate("+parseInt(canvaswidth*0.1-0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");  
+
−
 
+
−
  $("#bottom-line2").attr("y2",linelength+linelengthbottom); //The line of the seconds line is increased
+
−
  $("#bottom-line2").css("transform","translate("+(canvaswidth*0.1)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)");
+
−
 
+
−
  $("#bottom-line3").css("transform","translate("+parseInt(canvaswidth*0.1+0.3*devicewidth)+"px,"+(cycircle+deviceheight+linelength+circleradius)+"px)"); //The position of the three bottom lines is defined.
+
−
 
+
−
 
+
−
  $(".line-horizontal").attr("x2",linelengthHor);
+
−
  $("#horizontal-line1").css("transform","translate("+(parseInt(canvaswidth*0.1-0.3*devicewidth)-linelengthHor+0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
+
−
  $("#horizontal-line2").css("transform","translate("+(parseInt(canvaswidth*0.1+0.3*devicewidth)-0.5*linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two horizontal lines are defined and positioned.
+
−
 
+
−
  $("#bottom-line4").css("transform","translate("+(parseInt(canvaswidth*0.1-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)");
+
−
  $("#bottom-line5").css("transform","translate("+(parseInt(canvaswidth*0.1+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+2*linelength+circleradius)+"px)"); //The two other vertical lines positioned.
+
−
 
+
−
  $("#bottom-circle1").css("transform","translate("+(parseInt(canvaswidth*0.1-0.3*devicewidth)-linelengthHor+linewidth)+"px,"+(cycircle+deviceheight+2*linelength+linelengthbottom+circleradius+circleradiusbottom-1)+"px)");
+
−
  $("#bottom-circle2").css("transform","translate("+canvaswidth*0.1+"px,"+(cycircle+deviceheight+2*linelength+linelengthbottom+circleradius+circleradiusbottom-1)+"px)");
+
−
  $("#bottom-circle3").css("transform","translate("+(parseInt(canvaswidth*0.1+0.3*devicewidth)+linelengthHor-linewidth)+"px,"+(cycircle+deviceheight+2*linelength+linelengthbottom+circleradius+circleradiusbottom-1)+"px)"); //The three bottom circles are positioned.
+
−
 
+
−
+
−
+
−
 
+
−
  if(window.innerWidth <= 768){
+
−
     $(".tooltip-line").css("stroke-width",2);
+
−
  } else {
+
−
     $(".tooltip-line").css("stroke-width",5);
+
−
  }
+
−
 
+
−
      
+
−
  $(".tooltip-line").attr("x2",tooltiplinelength);  //The width and length of the tooltip lines are defined.
+
−
  $(".tooltip-line").attr("stroke-linecap","round");
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  $("#tooltip-line1").css("transform","translate("+(canvaswidth*0.1+circleradius-1)+"px,"+cycircle+"px)");
+
−
  $("#tooltip-line1").attr("x2",0);
+
−
 
+
−
  $("#tooltip-line2").css("transform","translate("+(canvaswidth*0.1+circleradius-1)+"px,"+(cycircle+circleradius+linelength+0.225*deviceheight)+"px)");
+
−
  $("#tooltip-line2").attr("x2",0);
+
−
 
+
−
  $("#tooltip-line3").css("transform","translate("+(canvaswidth*0.1+circleradius-1)+"px,"+(cycircle+circleradius+linelength+0.55 *deviceheight)+"px)");
+
−
  $("#tooltip-line3").attr("x2",0); 
+
−
 
+
−
  $("#tooltip-line4").css("transform","translate("+(canvaswidth*0.1+circleradius-1)+"px,"+(cycircle+circleradius+linelength+0.85*deviceheight)+"px)");
+
−
  $("#tooltip-line4").attr("x2",0);
+
−
  $("#tooltip-line5").css("transform","translate("+(canvaswidth*0.1+circleradius+linelengthHor+circleradiusbottom-0.3*devicewidth)+"px,"+(cycircle+deviceheight+2*linelength+linelengthbottom+circleradius+circleradiusbottom)+"px)");
+
−
  $("#tooltip-line5").attr("x2",0);      //Depending whether the line point right or left, either x1 or x2 is changed to match the other value so the inial length of the lines is 0, rendering them invisible. This is later changed through the extendLine() function.
+
−
 
+
−
//Here we configure the tip boxes with javascript, because CSS sucks.
+
−
//Important: unless every explanation has the same height, this won't work;
+
−
 
+
−
  $("#tip1").css("left",(canvaswidth*0.1+circleradius-1)+baserightLinelength+shiftcanvas+11); // For whatever reason, +11 alings the line with the
+
−
  $("#tip1").css("top",cycircle-heightexplanation*0.5);
+
−
 
+
−
  $("#tip2").css("left",(canvaswidth*0.1+circleradius-1)+baserightLinelength*5+shiftcanvas);
+
−
  $("#tip2").css("top",(cycircle+circleradius+linelength+0.225*deviceheight)-heightexplanation*0.5);
+
−
 
+
−
  $("#tip3").css("left",(canvaswidth*0.1+circleradius-1)+baserightLinelength*2.5+shiftcanvas+11);
+
−
  $("#tip3").css("top",(cycircle+circleradius+linelength+0.55 *deviceheight)-heightexplanation*0.5);
+
−
 
+
−
  $("#tip4").css("left",(canvaswidth*0.1+circleradius-1)+baserightLinelength*6+shiftcanvas);
+
−
  $("#tip4").css("top",(cycircle+circleradius+linelength+0.85*deviceheight)-heightexplanation*0.5);
+
−
 
+
−
  $("#tip5").css("left",(canvaswidth*0.1+circleradius+linelengthHor+circleradiusbottom-0.3*devicewidth)+baserightLinelength*2+shiftcanvas);
+
−
  $("#tip5").css("top",(cycircle+deviceheight+2*linelength+linelengthbottom+circleradius+circleradiusbottom)-heightexplanation*0.5);
+
−
  $(".button-container").css("left",$(".header-container").css("margin-left"));//Change this so it is calculated faster.
+
−
  $(".button-container").css("top",cycircle-0.5*heightexplanation); //I literally don't know where to put the button...
+
−
 
+
−
  $("#svg-canvas").css("transform","translate("+shiftcanvas+"px,"+0);
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
var animatinoCounter = 0;  //This counter saves the number of animation that have already been triggered. If an animation is not triggering, check if the counter-count is done propertly.
+
−
var accu = 0;
+
−
 
+
−
$(window).on("scroll",checkPosition);    //Checks on every scroll whether a certain animation should be triggered or not.
+
−
 
+
−
var finalshrink = parseInt(circleradius*0.15);    //This variable is here so the shrink function doesn't have to evaluate parseIn(etc) every single time.
+
−
 
+
−
 
+
−
var startMovement = false;                //This variable is the responsible for triggering the first moveCircleY. It's declared here so it is within scoope of all functions.
+
−
 
+
−
 
+
−
 
+
−
var endstep1; //This variable tells the first set of animations where they should end.
+
−
var endstep2;              //This variable tells the second set of animations where they should end.
+
−
var endstep3;
+
−
 
+
−
var endstep4;
+
−
 
+
−
var endstep5;
+
−
 
+
−
var endstep6;
+
−
 
+
−
calculateEndsteps();
+
−
 
+
−
function calculateEndsteps(){
+
−
  finalshrink = parseInt(circleradius*0.15);
+
−
  endstep1 = (cycircle+linelength+circleradius+0.1*deviceheight);
+
−
  endstep2 = endstep1+0.25*deviceheight;;
+
−
  endstep3 = endstep2+0.30*deviceheight;
+
−
  endstep4 = (endstep3+0.25*deviceheight);
+
−
  endstep5 = endstep4 +linelength +0.1*deviceheight;
+
−
  endstep6 = parseInt(endstep5 + linelengthbottom + circleradiusbottom);
+
 
}
 
}
  
−
function checkPosition(){
 
−
  var yOffSet = window.pageYOffset;
 
−
  if(and(animatinoCounter == 0, yOffSet > 0)){        //First animation-round: circle shrinks, first tip appears and circle moves to inside the device
 
−
    animatinoCounter = 1;
 
−
    var id = setInterval(function(){
 
−
      shrink("sample",id,finalshrink);
 
−
      startMovement = $("#sample").attr("r") == finalshrink;    //After every call of shrink, startMovement is refreshed to check if the trigger condition is already met.
 
−
    },animationstep*3);            //The shrinking is triggered immediatly after scrolling down.
 
−
 
−
     
 
−
 
−
 
−
    var id2 = setInterval(function(){
 
−
      if(startMovement){
 
−
        moveCircleY("sample",id2,endstep1,4);
 
−
        moveCircleY("pulse",id2,endstep1,4);
 
−
      }
 
−
    },animationstep);            //Once the shrinking is done, both the sample and pulse start moving down.
 
−
 
−
    var id32 = setInterval(function(){
 
−
      if(startMovement){
 
−
        accu++;
 
−
        pulse("pulse",accu,id32,circleradius*0.45,$("#sample3").attr("cx") >= parseInt(canvaswidth*0.1+0.3*devicewidth));  //$("#sample").attr("cy") == endstep3
 
−
       
 
−
      }
 
−
    },pulsestep);            //After the shrinkage is done, the pulsing starts. Doesn't end.
 
−
   
 
−
    var id3 = setInterval(function(){
 
−
      extendLineRight("tooltip-line1",(baserightLinelength),id3);
 
−
      if($("#tooltip-line1").attr("x2") >= baserightLinelength){
 
−
        appear("tip1");
 
−
 
−
      };
 
−
    },animationstep);
 
−
  }
 
−
 
−
  if(and(animatinoCounter == 4, yOffSet > 100) ){ //Second round of animation: circle turns white, goes down and second tip appears
 
−
    animatinoCounter = 5;
 
−
    var id = setInterval(function(){
 
−
      moveCircleY("sample",id,endstep2,7);
 
−
      if($("#sample").attr("cy") >= (cycircle+circleradius+linelength+0.20*deviceheight));{
 
−
        clearcolor("sample");
 
−
      }
 
−
    },animationstep);
 
−
 
−
    var id2 = setInterval(function(){
 
−
      moveCircleY("pulse",id2,endstep2,7);
 
−
      if($("#pulse").attr("cy") >- (cycircle+circleradius+linelength+0.20*deviceheight));{
 
−
        clearcolor("pulse");
 
−
      }
 
−
    },animationstep);
 
−
 
−
      var id3 = setInterval(function(){
 
−
      extendLineRight("tooltip-line2",baserightLinelength*5+4,id3);
 
−
      if($("#tooltip-line2").attr("x2") >= (baserightLinelength+4)){
 
−
        appear("tip2");
 
−
 
−
      };
 
−
    },Math.floor(animationstep*0.2));
 
−
 
−
  }
 
−
 
−
  if(and(animatinoCounter == 7, yOffSet > 200)){    //Third round of animations: Third tip appears and circle past the mid point and stips 3/4 of the device length
 
−
    animatinoCounter = 8;
 
−
    var id = setInterval(function(){
 
−
      var id22;
 
−
      moveCircleY("sample",id,endstep3,10);
 
−
    },animationstep);
 
−
 
−
    var id2 = setInterval(function(){
 
−
      moveCircleY("pulse",id2,endstep3,10);
 
−
    },animationstep);
 
−
 
−
    var id3 = setInterval(function(){
 
−
      extendLineRight("tooltip-line3",(baserightLinelength*2.5),id3);
 
−
      if($("#tooltip-line3").attr("x2") >= baserightLinelength){
 
−
        appear("tip3");
 
−
 
−
      };
 
−
    },Math.floor(animationstep*0.01));
 
−
  }
 
−
 
−
  if(and(animatinoCounter == 10, yOffSet > 300)){  //Fourth round of animations: circle divides into three and goes down. Fourth tip appears
 
−
    animatinoCounter = 11;
 
−
    $("#sample2").removeClass("invisible");
 
−
    $("#sample2").addClass("myvisible");
 
−
    $("#pulse2").removeClass("invisible");
 
−
   
 
−
   
 
−
    $("#sample3").addClass("myvisible");
 
−
    $("#sample3").removeClass("invisible");
 
−
    $("#pulse3").removeClass("invisible");
 
−
   
 
−
   
 
−
 
−
    var id = setInterval(function(){
 
−
      moveCircleX("sample3",id,canvaswidth*0.1+0.3*devicewidth,true,19);
 
−
      moveCircleX("pulse3",id,canvaswidth*0.1+0.3*devicewidth,true,19);
 
−
      moveCircleX("sample2",id,canvaswidth*0.1-0.3*devicewidth,false,19);
 
−
      moveCircleX("pulse2",id,canvaswidth*0.1-0.3*devicewidth,false,19);
 
−
     
 
−
 
−
     
 
−
    },animationstep*5);
 
−
 
−
    var hola = false
 
−
    var id2 = setInterval(function(){
 
−
      if( and(animatinoCounter == 19,(hola || (accu % 20) - 1 == 0 ))  ){
 
−
        hola = true;
 
−
        moveCircleY("sample",id2,endstep4,21);
 
−
        moveCircleY("pulse",id2,endstep4,21);
 
−
        moveCircleY("sample2",id2,endstep4,21);
 
−
        moveCircleY("pulse2",id2,endstep4,21);
 
−
        moveCircleY("sample3",id2,endstep4,21);
 
−
        moveCircleY("pulse3",id2,endstep4,21);
 
−
 
−
      }
 
−
    },animationstep);
 
−
    var adios = false;
 
−
    var id3= setInterval(function(){
 
−
      if(and($("#sample2").attr("cx") <= canvaswidth*0.1-0.3*devicewidth, (adios || (accu % 20) - 1 == 0 ))){
 
−
        adios =true ;
 
  
−
        accu++;
 
−
        pulse("pulse",accu,id3,circleradius*0.45,false);
 
−
        pulse("pulse2",accu, id3,circleradius*0.45,false);
 
−
        pulse("pulse3",accu, id3,circleradius*0.45,false);
 
−
      }
 
−
    },pulsestep);
 
−
 
−
      var id3 = setInterval(function(){
 
−
      extendLineRight("tooltip-line4",baserightLinelength*6,id3);
 
−
      if($("#tooltip-line4").attr("x2") >= (baserightLinelength+4)){
 
−
        appear("tip4");
 
−
 
−
      };
 
−
    },Math.floor(animationstep*0.1));
 
−
 
−
  }
 
−
 
 
−
 
−
  if(and(animatinoCounter ==21, yOffSet > 300)){      //Fifth round of animations:
 
−
    animatinoCounter = 22;
 
−
 
−
    var id = setInterval(function(){
 
−
      moveCircleY("sample",id,endstep5,28);
 
−
      moveCircleY("pulse",id,endstep5,28);
 
−
      moveCircleY("sample2",id,endstep5,28);
 
−
      moveCircleY("pulse2",id,endstep5,28);
 
−
      moveCircleY("sample3",id,endstep5,28);
 
−
      moveCircleY("pulse3",id,endstep5,28);
 
−
    },animationstep);
 
−
  }
 
−
 
 
−
  if(and(animatinoCounter == 28, yOffSet > 300)){
 
−
    animatinoCounter = 29;
 
−
    var id = setInterval(function(){
 
−
      moveCircleX("sample2",id,canvaswidth*0.1-0.3*devicewidth-linelengthHor+linewidth,false,33);
 
−
      moveCircleX("pulse2",id,canvaswidth*0.1-0.3*devicewidth-linelengthHor+linewidth,false,33);
 
−
      moveCircleX("sample3",id,canvaswidth*0.1+0.3*devicewidth+linelengthHor-linewidth,true,33);
 
−
      moveCircleX("pulse3",id,canvaswidth*0.1+0.3*devicewidth+linelengthHor-linewidth,true,33);
 
−
    },animationstep);
 
−
 
−
  }
 
−
 
−
  if(and(animatinoCounter == 33, yOffSet >300)){
 
−
    animatinoCounter = 34;
 
−
    var id = setInterval(function(){
 
−
      moveCircleY("sample",id,endstep6,40);
 
−
      moveCircleY("pulse",id,endstep6,40);
 
−
      moveCircleY("sample2",id,endstep6,40);
 
−
      moveCircleY("pulse2",id,endstep6,40);
 
−
      moveCircleY("sample3",id,endstep6,40);
 
−
      moveCircleY("pulse3",id,endstep6,40);
 
−
    },animationstep);
 
−
  }
 
−
 
−
 
−
  if(and(animatinoCounter == 40, yOffSet > 300)){
 
−
    animatinoCounter = 41;
 
−
    var id = setInterval(function(){
 
−
      expandNegative("sample2",id,parseInt(circleradiusbottom)+2);
 
−
    },animationstep*5);
 
−
 
−
    var id2 = setInterval(function(){
 
−
      if(animatinoCounter == 42){
 
−
        expandPositive("sample",id2,parseInt(circleradiusbottom)+2);
 
−
      }
 
−
    },animationstep*5);
 
−
 
−
    var id3 = setInterval(function(){
 
−
      if(animatinoCounter == 43){
 
−
        expandNegative("sample3",id3,parseInt(circleradiusbottom)+2);
 
−
      }
 
−
    },animationstep*5);
 
−
    var id4 = setInterval(function(){
 
−
      extendLineRight("tooltip-line5",baserightLinelength*2+4,id4);
 
−
      if($("#tooltip-line5").attr("x2") >= baserightLinelength){
 
−
        appear("tip5");
 
−
 
−
      };
 
−
    },Math.floor(animationstep*0.5));
 
−
  }
 
−
 
 
  
 +
.dropdown-contentAttributions {
 +
    background-image: url("wiki_image_menu_attributions_low.gif");
 +
    display: none;
 +
    position: absolute;
 +
    top: 192;
 +
    height: 32px;
 +
    width: 137px;
 +
    z-index: 1;
 +
}
 +
.dropdown:hover .dropdown-contentAttributions {
 +
    background-image: url("wiki_image_menu_attributions_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    display: block;
 +
}
 +
.dropdown-contentAttributions a {
 +
    background-image: url("wiki_image_menu_attributions_low.gif");
 +
    height: 32px;
 +
    width: 137px;
 +
    padding: 0px 0px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
.dropdown-contentAttributions a:hover {
 +
    background-image: url("wiki_image_menu_attributions_high.gif");
 +
    height: 32px;
 +
    width: 137px;
 
}
 
}
  
−
function shrink(circle, id, rfinal){
 
−
  var r = parseInt($("#"+circle).attr("r"));
 
−
  if(r != rfinal){
 
−
    $("#"+circle).attr("r",r-1);
 
−
  } else {
 
−
    animatinoCounter++;
 
−
    clearInterval(id);
 
−
   
 
−
  }
 
−
}                          //This function shrinks a circle to a final radius.
 
−
 
−
 
−
function appear(elementId){
 
−
  $("#"+elementId).addClass("appear");
 
−
  $("#"+elementId).removeClass("invisible");
 
−
}                          //this function makes an element gradually change its opacity to 1 by adding the appear class in css and removing the invisible class. See style for class descriptions.
 
−
 
−
function extendLineRight(line,finalvalue,id){
 
−
  var value = parseInt($("#"+line).attr("x2"));
 
−
  if(value < finalvalue){
 
−
    $("#"+line).attr("x2",value+1);
 
−
  } else {
 
−
    clearInterval(id);
 
−
  }
 
−
}                          //This function extends a line by increasing the x2 value until the final value is reached. To be used in conjuction with setInterval.
 
−
 
−
function clearcolor(circle){
 
−
  $("#"+circle).addClass("white");
 
−
}                          //This function changes the color of an Element to white using css transitions. See white class for class definition.
 
  
−
function animation(){
+
.no-padding{
−
  expand("sample");
+
padding: 0 !important;
 
}
 
}
  
−
function expandNegative(circle,id,rfinal){
+
</style>
−
  $("#"+circle).addClass("colorNegative");
+
</head><body>
−
  var r = parseInt($("#"+circle).attr("r"));
+
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
−
  if(r != rfinal + 1 ){
+
−
   
+
−
    $("#"+circle).attr("r",r+1);
+
−
  } else {
+
−
    animatinoCounter++;
+
−
    clearInterval(id);
+
−
   
+
−
  }
+
−
}
+
  
−
function expandPositive(circle,id,rfinal){
+
<!-- Bar -->
−
  $("#"+circle).addClass("colorPositive");
+
<tr><td class="no-padding" height="32" bgcolor=#51A7f9></td><td class="no-padding" bgcolor=#51A7f9 height="32" width="960" align=center>
−
     var r = parseInt($("#"+circle).attr("r"));
+
<div class="dropdown">
−
   if(r != rfinal + 1 ){
+
  <a href="index"><button class="dropbtnCascAid"><img src="overlay.png"></button></a>
−
      
+
  <div class="dropdown-content">
−
     $("#"+circle).attr("r",r+1);
+
  </div>
−
      
+
</div><div class="dropdown">
−
   } else {
+
  <a href="project" target=content><button class="dropbtnProject"><img src="overlay.png"></button></a>
−
     animatinoCounter++;
+
  <div class="dropdown-contentDescription">
−
     clearInterval(id);
+
     <a href="description" target=content></a>
−
      
+
  </div>
 +
  <div class="dropdown-contentDesign">
 +
    <a href="design" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentProofofConcept">
 +
    <a href="proofofconcept" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentDemonstration">
 +
    <a href="demonstration" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentApplication">
 +
    <a href="application" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentFinalResults">
 +
    <a href="finalresults" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentEntrepreneurship">
 +
    <a href="entrepreneurship" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentAchievements">
 +
    <a href="achievements" target=content></a>
 +
  </div>
 +
</div><div class="dropdown" valign=center>
 +
  <a href="wetlab" target=content><button class="dropbtnWetlab" valign=center><img src="overlay.png"></button></a>
 +
  <div class="dropdown-contentProtocolsMethods">
 +
    <a href="protocolsmethods" target=content></a>
 +
   </div>
 +
  <div class="dropdown-contentMaterials">
 +
     <a href="materials" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentLabJournal">
 +
     <a href="labjournal" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentSafety">
 +
    <a href="safety" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentParts">
 +
    <a href="parts" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentInterlab">
 +
    <a href="interlab" target=content></a>
 +
  </div>
 +
</div><div class="dropdown">
 +
  <a href="model" target=content><button class="dropbtnModel"><img src="overlay.png"></button></a>
 +
  <div class="dropdown-content">
 +
  </div>
 +
</div><div class="dropdown">
 +
  <a href="softhardware" target=content><button class="dropbtnSoftHardware"><img src="overlay.png"></button></a>
 +
  <div class="dropdown-contentSoftware">
 +
     <a href="software" target=content></a>
 +
   </div>
 +
  <div class="dropdown-contentHardware">
 +
     <a href="hardware" target=content></a>
 +
  </div>
 +
</div><div class="dropdown">
 +
  <a href="hp" target=content><button class="dropbtnHP"><img src="overlay.png"></button></a>
 +
  <div class="dropdown-contentHPSilver">
 +
     <a href="hpsilver" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentIHPgold">
 +
     <a href="ihpgold" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentPublicEngagement">
 +
    <a href="publicengagement" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentCollaborations">
 +
    <a href="collaborations" target=content></a>
 +
  </div>
 +
</div><div class="dropdown">
 +
  <a href="Team" target=content><button class="dropbtnTeam"><img src="overlay.png"></button></a>
 +
  <div class="dropdown-contentTeamMembers">
 +
    <a href="teammembers" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentSupervisors">
 +
    <a href="supervisors" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentPIs">
 +
    <a href="pis" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentCollaboratingInstitutions">
 +
    <a href="collaboratinginstitutions" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentSponsors">
 +
    <a href="sponsors" target=content></a>
 +
  </div>
 +
  <div class="dropdown-contentAttributions">
 +
    <a href="attributions" target=content></a>
 +
  </div>
 +
</div>
 +
</td><td class="no-padding" height="32" bgcolor=#51A7f9></td></tr>
 +
<!-- Content -->
 +
<tr><td width="100%" colspan=3>
 +
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
 +
<tr>
 +
<td width="40%">
 +
</td>
 +
<td id="myContent" width="20%" valign=top align=center>
 +
<br>
 +
<!-- Head End -->
 +
<!-- Content Begin -->
 +
<video height="270" width="960" autoplay="autoplay">
 +
<source src="https://static.igem.org/mediawiki/2017/4/44/T--Munich--FrontPageVideo.mp4" type="video/mp4">
 +
Your browser does not support the video tag.
 +
</video>
 +
<table width="900" border=0 cellspacing=0 cellpadding=10>
 +
<tr><td colspan=2 align=left valign=center>
 +
<font size=7 color=#444444><b>Abstract</b></font>
 +
</td></tr>
 +
<tr><td align=center valign=center>
 +
<p style="text-align:justify">
 +
<font size=3 color=#444444>
 +
The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S RNA from E. coli. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.
 +
</font>
 +
</p>
 +
</font>
 +
</td><td align=center valign=center>
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/a/af/T--Munich--Logo_Final.svg/739px-T--Munich--Logo_Final.svg.png" width="420">
 +
</td></tr>
 +
<tr><td align=center valign=center>
 +
<p style="text-align:justify">
 +
<font size=3 color=#444444>
 +
Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics.
 +
</font>
 +
</p>
 +
</td><td align=center valign=center>
 +
<p style="text-align:justify">
 +
<font size=3 color=#444444>
 +
Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.
 +
</font>
 +
</p>
 +
</td></tr>
 +
<tr><td class="no-padding" colspan=2 align=right valign=center height=10>
 +
<font size=2>| The iGem Munich 2017 Team | 2017.07.13 |</font><br><br><br><center><hr></center>
 +
</td></tr>
 +
</table>
 +
<!-- Content End -->
  
−
  }
 
−
}
 
  
−
function moveCircleY(circle, id, cyfinal, setcounter){
 
−
  var cy = parseInt($("#"+circle).attr("cy"));
 
−
  if( cy <= cyfinal){
 
−
   
 
−
    $("#"+circle).attr("cy", cy+1);
 
  
−
  } else{
 
−
    animatinoCounter = setcounter;
 
−
    clearInterval(id);
 
  
−
   
 
−
  }
 
−
} //Moves a circle to cyfianl by and upon finishing clears id. Set counter is needed to propertly coordinate the animation counters so different screen sizes (which result in slightly different values) don't ruin the animation triggerin.
 
  
  
  
−
function moveCircleX(circle, id, cxfinal, plus, setcounter){
 
  
−
  var cx = parseInt($("#"+circle).attr("cx"));
 
−
  if(plus == true){
 
−
    if(cx <= cxfinal){
 
−
      $("#"+circle).attr("cx",cx+1);
 
−
    } else{
 
−
     
 
−
      animatinoCounter = setcounter;
 
−
      clearInterval(id);
 
  
  
−
    }
 
−
  } else {
 
−
    if(cx >= cxfinal){
 
−
      $("#"+circle).attr("cx",cx-1);
 
−
    } else {
 
−
     
 
−
      animatinoCounter = setcounter;
 
−
      clearInterval(id);
 
  
−
    }
 
−
  }
 
−
 
 
−
}
 
  
  
−
function pulse(circle,accu,id,maxr,endcondition){
 
−
    if(and(endcondition, ((accu % maxr) - 1 == 0))){
 
−
            accu =0;
 
−
                        clearInterval(id);
 
−
     
 
−
    } else{
 
−
                        $("#"+circle).css("opacity",(1-((accu % maxr)/100)+''));
 
−
      $("#"+circle).attr("r",(2 + (accu % maxr))+'');
 
−
    }
 
  
−
}                          //This function takes a circle and changes periodically its opacity and radius. An accumualtor is needed for it to work propertly.
+
<!-- Foot Begin -->
 +
<table width=960 height=35 cellpadding=0 cellspacing=0 border=0><tr><td class="no-padding" align=right valign=center>
  
 +
<table width=300 height=35 cellpadding=0 cellspacing=0 border=0><tr>
  
−
function and(a, b){
+
<td align=center valign=center>
−
  return (!(!(a || a) || !(b || b)));
+
<a href="https://www.en.uni-muenchen.de/index.html" target="_blank3" >
−
}  //Calculates the value of a and b, because why should the && operator work?
+
<img src="https://static.igem.org/mediawiki/2017/8/83/T--Munich--wiki_image_coop_lmu_low.svg" border=0 height="20" onmouseover="this.src='https://static.igem.org/mediawiki/2017/f/fd/T--Munich--wiki_image_coop_lmu_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/8/83/T--Munich--wiki_image_coop_lmu_low.svg'">
 +
</a>
 +
</td>
  
 +
<td align=center valign=center>
 +
<a href="https://www.tum.de/" target="_blank4" >
 +
<img src="https://static.igem.org/mediawiki/2017/a/ae/T--Munich--wiki_image_coop_tum_low.svg" border=0 height="20" onmouseover="this.src='https://static.igem.org/mediawiki/2017/1/1e/T--Munich--wiki_image_coop_tum_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/a/ae/T--Munich--wiki_image_coop_tum_low.svg'">
 +
</a>
 +
</td>
  
−
$sample = $("#sample");
+
<td align=center valign=center>
−
$pulse = $("#pulse");
+
<a href="http://www.e14.ph.tum.de/en/home/" target="_blank5" >
−
$sample2 = $("#sample2");
+
<img src="https://static.igem.org/mediawiki/2017/a/a3/T--Munich--wiki_image_coop_e14_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/7/72/T--Munich--wiki_image_coop_e14_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/a/a3/T--Munich--wiki_image_coop_e14_low.svg'">
−
$pulse2 = $("#pulse2");
+
</a>
−
$sample3 = $("#sample3");
+
</td>
−
$pulse3 = $("#pulse3");
+
−
function skipAnimation(){
+
−
  animatinoCounter=-99;  //Just to be sur
+
−
    var id = setInterval(function(){
+
−
      extendLineRight("tooltip-line1",(baserightLinelength-3),id);
+
−
      if($("#tooltip-line1").attr("x1") >= baserightLinelength){
+
−
        appear("tip1");
+
  
−
      };
+
<td align=center valign=center>
−
    },animationstep);
+
<a href="http://www.biochem.mpg.de/en" target="_blank5" >
 +
<img src="https://static.igem.org/mediawiki/2017/d/da/T--Munich--wiki_image_coop_maxplanck_low.svg" border=0 height="30" onmouseover="this.src='https://static.igem.org/mediawiki/2017/d/df/T--Munich--wiki_image_coop_maxplanck_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/d/da/T--Munich--wiki_image_coop_maxplanck_low.svg'">
 +
</a>
 +
</td>
  
−
      var id2 = setInterval(function(){
+
<td align=center valign=center>
−
      extendLineRight("tooltip-line2",baserightLinelength*5+4,id2);
+
<a href="https://www.helmholtz-muenchen.de/" target="_blank5" >
−
      if($("#tooltip-line2").attr("x2") >= (baserightLinelength+4)){
+
<img src="https://static.igem.org/mediawiki/2017/0/05/T--Munich--wiki_image_coop_helmholtzzentrum_low.svg" border=0 height="20" onmouseover="this.src='https://static.igem.org/mediawiki/2017/6/6b/T--Munich--wiki_image_coop_helmholtzzentrum_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/0/05/T--Munich--wiki_image_coop_helmholtzzentrum_low.svg'">
−
        appear("tip2");
+
</a>
 +
</td>
  
−
      };
+
<td align=center valign=center>
−
    },animationstep*0.2);
+
<a href="https://igem.org/Main_Page" target="_blank6" >
 +
<img src="https://static.igem.org/mediawiki/2017/0/0f/T--Munich--wiki_image_coop_igem_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/7/79/T--Munich--wiki_image_coop_igem_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/0/0f/T--Munich--wiki_image_coop_igem_low.svg'">
 +
</a>
 +
</td>
  
−
    var id3 = setInterval(function(){
+
</tr></table></td><td class="no-padding" align=center valign=center><table width=35 height=35 cellpadding=0 cellspacing=0 border=0><tr><td width="35" align=center valign=center></td></tr></table></td><td class="no-padding" align=left valign=center><table width=200 height=35 cellpadding=0 cellspacing=0 border=0><tr>
−
      extendLineRight("tooltip-line3",(baserightLinelength*2.5-3),id3);
+
−
      if($("#tooltip-line3").attr("x2") >= baserightLinelength){
+
−
        appear("tip3");
+
  
−
      };
+
<td align=center valign=center>
−
    },animationstep*0.4);
+
<a href="https://www.facebook.com/Munich.iGEM" target="_blank7" >
 +
<img src="https://static.igem.org/mediawiki/2017/7/76/T--Munich--wiki_image_sm_facebook_low.svg" border=0 height="25" onmouseover="https://static.igem.org/mediawiki/2017/6/6e/T--Munich--wiki_image_sm_instagram_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/7/76/T--Munich--wiki_image_sm_facebook_low.svg'">
 +
</a>
 +
</td>
  
−
      var id4 = setInterval(function(){
+
<td align=center valign=center>
−
      extendLineRight("tooltip-line4",baserightLinelength*6+4,id4);
+
<a href="https://twitter.com/iGEM_Munich" target="_blank8" >
−
      if($("#tooltip-line4").attr("x2") >= (baserightLinelength+4)){
+
<img src="https://static.igem.org/mediawiki/2017/8/8b/T--Munich--wiki_image_sm_twitter_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/c/cc/T--Munich--wiki_image_sm_twitter_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/8/8b/T--Munich--wiki_image_sm_twitter_low.svg'">
−
        appear("tip4");
+
</a>
 +
</td>
  
−
      };
+
<td align=center valign=center>
−
    },animationstep*0.1);
+
<a href="mailto:igem.munich@gmail.com">
 +
<img src="https://static.igem.org/mediawiki/2017/7/79/T--Munich--wiki_image_sm_mail_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/9/93/T--Munich--wiki_image_sm_mail_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/7/79/T--Munich--wiki_image_sm_mail_low.svg'">
 +
</a>
 +
</td>
  
−
    var id5 = setInterval(function(){
+
<td align=center valign=center>
−
      extendLineRight("tooltip-line5",baserightLinelength*2,id5);
+
<a href="https://www.instagram.com/igem.munich.2017/" target="_blank9" >
−
      if($("#tooltip-line5").attr("x2") >= baserightLinelength){
+
<img src="https://static.igem.org/mediawiki/2017/e/e9/T--Munich--wiki_image_sm_instagram_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/6/6e/T--Munich--wiki_image_sm_instagram_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/e/e9/T--Munich--wiki_image_sm_instagram_low.svg'">
−
        appear("tip5");
+
</a>
 +
</td>
  
−
      };
+
<td align=center valign=center>
−
    },animationstep*0.5);
+
<a href="https://2017.igem.org/Team:Munich" target="_blank10" >
 +
<img src="https://static.igem.org/mediawiki/2017/1/1d/T--Munich--wiki_image_sm_web_low.svg" border=0 height="25" onmouseover="this.src='https://static.igem.org/mediawiki/2017/6/61/T--Munich--wiki_image_sm_web_high.svg'" onmouseout="this.src='https://static.igem.org/mediawiki/2017/1/1d/T--Munich--wiki_image_sm_web_low.svg'">
 +
</a>
 +
</td>
  
−
   
+
</tr></table>
 +
</td></table>
 +
</td>
 +
<td width="40%">
 +
</td>
 +
</tr>
 +
</table>
 +
</body>
 +
</td></tr>
 +
<tr><td height="25" bgcolor=#ffffff></td><td class="no-padding" bgcolor=#ffffff height="25" width="960" align=center>
 +
<hr>
 +
<table height=25 cellpadding=0 cellspacing=2 border=0><tr>
  
−
    $sample.attr("cy",endstep6);
+
<td bgcolor=#ffffff height="25" width="90" align=center valign=center>
−
    $sample.attr("cx",canvaswidth*0.1)
+
<a href="https://www.eurofinsgenomics.eu/" target="_blank1" ><img src="https://static.igem.org/mediawiki/2017/c/c7/T--Munich--wiki_image_sponsors_eurofins.svg" border=0 height="15"></a>
−
    $sample.removeClass("white");
+
</td>
−
    $sample.css("fill","rgb(100,255,0)");
+
−
    $sample.attr("r",circleradiusbottom+1);
+
−
    $pulse.remove();
+
−
    $sample.removeAttr("id");
+
  
−
     
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
    $sample2.attr("cx",parseInt(canvaswidth*0.1-0.3*devicewidth-linelengthHor+linewidth));
+
−
    $sample2.attr("cy",endstep6);
+
−
    $sample2.attr("r",circleradiusbottom+1);
+
−
    $sample2.css("fill","rgb(0,174,239)");
+
−
    $pulse2.attr("cx",parseInt(canvaswidth*0.1-0.3*devicewidth-linelengthHor+linewidth));
+
−
    $pulse2.attr("cy",endstep6+2);
+
−
    $sample2.removeAttr("id");
+
−
    $pulse2.removeAttr("id");  //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
+
  
 +
<td bgcolor=#ffffff height="25" width="60" align=center valign=center>
 +
<a href="https://www.neb.com/" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/8/87/T--Munich--wiki_image_sponsors_neb.svg" border=0 height="21"></a>
 +
</td>
  
−
    $sample3.attr("cx",parseInt(canvaswidth*0.1+0.3*devicewidth+linelengthHor-linewidth));
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
    $sample3.attr("cy",endstep6);
+
−
    $sample3.attr("r",circleradiusbottom+1)
+
−
    $sample3.css("fill","rgb(0,174,239)");
+
−
    $pulse3.attr("cx",parseInt(canvaswidth*0.1+0.3*devicewidth+linelengthHor-linewidth));
+
−
    $pulse3.attr("cy",endstep6+2);
+
−
    $pulse3.removeAttr("id");
+
−
    $sample3.removeAttr("id"); //This is a patch work solution to force stop the animation when it's cancelled while the cirlces are moving horizontally. Change if needed.
+
−
    $(".sample").css("opacity","1");
+
−
  }
+
  
 +
<td bgcolor=#ffffff height="25" width="60" align=center valign=center>
 +
<a href="https://www.biomers.net" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/a/a9/T--Munich--wiki_image_sponsors_biomers.png" border=0 height="21"></a>
 +
</td>
  
 +
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
  
−
var id = setInterval(function() { 
+
<td bgcolor=#ffffff height="25" width="60" align=center valign=center>
−
  if(and(($(window).scrollTop() + $(window).height()) / $(document).height() >= 0.9,animatinoCounter >0)) {
+
<a href="https://www.gatc-biotech.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/5/59/T--Munich--wiki_image_sponsors_gatc.png" border=0 height="21"></a>
−
      checkPosition();
+
</td>
−
  }
+
−
},100);    //This part here makes it so the animation continues without the need to scroll if the view port is at the bottom of the document.
+
−
    </script>
+
−
    <script>
+
  
 +
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
  
 +
<td bgcolor=#ffffff height="25" width="70" align=center valign=center>
 +
<a href="https://www3.gehealthcare.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/1/1b/T--Munich--wiki_image_sponsors_gehealthcare.svg" border=0 height="21"></a>
 +
</td>
  
 +
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
  
−
$('.dropdown').dropdown({on:'hover',
+
<td bgcolor=#ffffff height="25" width="85" align=center valign=center>
−
                    action: 'nothing'
+
<a href="https://eu.idtdna.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/1/1a/T--Munich--wiki_image_sponsors_idt.png" border=0 height="21"></a>
−
                          });
+
</td>
−
  $('.ui.accordion')
+
−
    .accordion()
+
−
  ;
+
  
−
  // Create a lightbox
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
  (function() {
+
−
    var $lightbox = $("<div class='lightbox'></div>");
+
−
    var $container = $("<div class='lightboxContainer'</div>");
+
−
    var $img = $("<img>");
+
−
    var $caption = $("<p class='caption'></p>");
+
  
−
    // Add image and caption to lightbox
+
<td bgcolor=#ffffff height="25" width="60" align=center valign=center>
 +
<a href="https://www.nano-initiative-munich.de/" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/a/a7/T--Munich--wiki_image_sponsors_nim.png" border=0 height="21"></a>
 +
</td>
  
−
    $container
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
      .append($img)
+
−
      .append($caption);
+
  
−
    $lightbox
+
<td bgcolor=#ffffff height="25" width="120" align=center valign=center>
−
      .append($container);
+
<a href="https://www.promega.de/" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/3/3f/T--Munich--wiki_image_sponsors_promega.png" border=0 height="21"></a>
 +
</td>
  
−
    // Add lighbox to document
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
  
−
    $('body').append($lightbox);
+
<td bgcolor=#ffffff height="25" width="40" align=center valign=center>
 +
<a href="https://www.qiagen.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/9/99/T--Munich--wiki_image_sponsors_qiagen.svg" border=0 height="21"></a>
 +
</td>
  
−
    $('.lightboxAble').parent().click(function(e) {
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
      e.preventDefault();
+
  
−
      // Get image link and description
+
<td bgcolor=#ffffff height="25" width="40" align=center valign=center>
−
      var $imgelement = $(this).children("img");
+
<a href="https://www.carlroth.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/d/d6/T--Munich--wiki_image_sponsors_roth.png" border=0 height="21"></a>
 +
</td>
  
−
      var src = $imgelement.attr("src");
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
−
      var cap = $imgelement.attr("alt");
+
−
      // Add data to lighbox
+
−
      $img.attr('src', src);
+
−
      $caption.append(cap);
+
  
−
      // Show lightbox
+
<td bgcolor=#ffffff height="25" width="130" align=center valign=center>
 +
<a href="https://www.scienova.com" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/3/3b/T--Munich--wiki_image_sponsors_scienova.png" border=0 height="21"></a>
 +
</td>
  
−
      $lightbox.fadeIn('fast');
+
<td bgcolor=#ffffff height="25" width="10" align=center valign=center></td>
  
−
      $lightbox.click(function() {
+
<td bgcolor=#ffffff height="25" width="120" align=center valign=center>
−
        $lightbox.fadeOut('fast', function(){
+
<a href="https://www.unternehmertum.de" target="_blank2" ><img src="https://static.igem.org/mediawiki/2017/b/b2/T--Munich--wiki_image_sponsors_unternehmertum.png" border=0 height="21"></a>
−
          $caption.empty();
+
</td>
−
        });
+
−
      });
+
−
    });
+
  
−
  }());
+
</tr></table>
−
    </script>
+
  
−
</body>
+
 
−
</html>
+
</td><td height="25" bgcolor=#ffffff></td></tr>
 +
</table></body></html>

Revision as of 16:21, 13 September 2017


Abstract

The ongoing crisis of increasing antibiotic resistance demands innovative preventive strategies. Recently, the RNA-targeting protein CRISPR-Cas13a has been used for highly sensitive DNA and RNA detection, promising diverse applications in point-of-care diagnostics. We integrated Cas13a in the detection unit of CascAID, our GMO-free diagnostic platform. CascAID combines an automated microfluidic device for rapid lysis and extraction of nucleic acids with a paper-based readout system. We demonstrated the performance of our device by targeting the 16S RNA from E. coli. We improved the detection limit of our platform, using simulations to optimize our amplification scheme and the final readout.

Conceived as a distributable platform for rapid point-of-care diagnostics, CascAID can be used to distinguish between bacterial and viral infections, thus minimizing the widespread use of antibiotics.

Furthermore, Cas13a allows the fast design of target sequences, making our system adaptive to the emergence of new viral outbreaks or fast mutating pathogens.

| The iGem Munich 2017 Team | 2017.07.13 |