Difference between revisions of "Team:NYU Shanghai/Design"

Line 2: Line 2:
  
 
<html>
 
<html>
<script type="text/javascript">
 
  window.onload = revealProject();
 
</script>
 
 
 
<style type="text/css">
 
<style type="text/css">
  @font-face {
+
@font-face {
     font-family: "helvetica neue light";
+
     font-family: "helveticaNL";
 
     src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype");
 
     src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype");
 
}
 
}
 
   h3 {
 
   h3 {
     color: goldenrod;
+
     color: #d66;
 
     text-decoration: none;
 
     text-decoration: none;
 
     margin: 0px;
 
     margin: 0px;
     padding: 15px 0px;
+
     padding: 20px 0px;
 
     font-size: 48px;
 
     font-size: 48px;
 
     font-family: "bebas";
 
     font-family: "bebas";
 
   }
 
   }
 
   h4 {
 
   h4 {
     font-family: "HelveticaNT";
+
     font-size: 35px;
     color: white;
+
     color: #d66;
    margin: 0px;
+
     font-family: "bebasneue";   
    padding: 0px;
+
     font-size: 24px;   
+
    overflow: visible 
+
 
   }
 
   }
 
   h5 {
 
   h5 {
     font-size: 28px;
+
     font-size: 24px;
     color: goldenrod;
+
     color: white;
     font-family: "bebas";
+
     font-family: "bebasneue";
 
   }
 
   }
 
   h6 {
 
   h6 {
     font-size: 22px;
+
     font-family: "helveticaNL";
 
     color: white;
 
     color: white;
     font-family: "helvetica neue light";
+
    margin: 0px;
 +
     font-size: 18px; 
 +
    text-align: left;
 +
    line-height: 110%;
 +
    word-spacing: 2.5px;
 +
    letter-spacing: 0.5px;
 +
}
 +
  .column {
 +
  font-family: "helveticaNL";
 +
  font-size: "16px";
 +
  font-color: "white";
 +
  width: 400px;
 +
  margin: 0 20px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  text-align: left;
 
   }
 
   }
   span {
+
   .column p {
    font-size: 22px;
+
  font-family: "helveticaNL";
    color: white;
+
    font-family: "helvetica neue light";
+
 
   }
 
   }
   p {
+
   span:hover {
    font-size: 22px;
+
  color: #d66;
    color: white;
+
    font-family: "helvetica neue light";
+
}
+
  #video {
+
    width: 982px;
+
    margin: 0 auto;
+
    margin-bottom: 28px;
+
 
   }
 
   }
   #video video {
+
   #sponsors a:hover {
     margin: 0 auto;
+
     color: #d66;
    margin-left: 90px;
+
    border: 1px solid goldenrod;
+
    border-radius: 32px;
+
    padding: 20px;
+
    margin-bottom: 20px;
+
 
   }
 
   }
   #video p {
+
   #Plate li {
    color: white;
+
     text-decoration: none;
     text-align: justify;
+
     font-family: "helveticaNL";
  } 
+
  #overview {
+
    width: 982px;
+
    margin: 0 auto;
+
     margin-bottom: 40px;
+
 
   }
 
   }
   #overview img {
+
   #SOC li {
     width: 480px;
+
     text-decoration: none;
    margin: 0 auto;
+
     font-family: "helveticaNL";
    padding: 20px;
+
     margin-left: 230px;
+
 
   }
 
   }
   #overview p {
+
   #transform li {
    background-color: transparent;
+
     text-decoration: none;
    color: transparent;
+
     font-family: "helveticaNL";
    opacity: 0.9;
+
    position: absolute;
+
     text-align: center;  
+
     font-size: 14px;
+
 
   }
 
   }
   #overview p:hover {
+
   #mp li {
     background-color: white;
+
     text-decoration: none;
     color: black;
+
     font-family: "helveticaNL";
 
   }
 
   }
   #tubeOverlay {
+
   #rd li {
     width: 312px;
+
     text-decoration: none;
     height: 114px;
+
     font-family: "helveticaNL";
    margin: -305px 250px;
+
    border-radius: 10px;
+
    padding: 10px;
+
 
   }
 
   }
   #cameraOverlay {
+
   #ligate li {
     width: 108px;
+
     text-decoration: none;
     height: 230px;
+
     font-family: "helveticaNL";
    margin: -347px 600px;
+
    border-radius: 10px;
+
    padding: 10px;
+
 
   }
 
   }
   #buttonOverlay {
+
   #gel li {
     width: 210px;
+
     text-decoration: none;
     height: 45px;
+
     font-family: "helveticaNL";
    margin: -150px 365px;
+
    border-radius: 10px;
+
    padding: 5px;
+
 
   }
 
   }
   #smallOverlay {
+
   #gelex li {
     width: 100px;
+
     text-decoration: none;
     height: 50px;
+
     font-family: "helveticaNL";
    margin: -155px 250px;
+
    border-radius: 10px;
+
    padding: 5px;
+
 
   }
 
   }
   #stepSequencer{
+
   #PCR li {
     margin-bottom: 40px;
+
     text-decoration: none;
 +
    font-family: "helveticaNL";
 
   }
 
   }
   #stepSequencer video {
+
   #PCRclean li {
     vertical-align: top;
+
     text-decoration: none;
     display: inline-block;
+
     font-family: "helveticaNL";
 
   }
 
   }
   #stepSequencer ol {
+
   #luc li {
    font-size: 24px;
+
     text-decoration: none;
     text-align: left;
+
     font-family: "helveticaNL";
     margin: 0px;
+
    padding: 0px;
+
    margin-left: 20px;
+
    vertical-align: top;
+
 
   }
 
   }
   #stepSequencer li {
+
   #chromo li {
     color: white;
+
     text-decoration: none;
     font-family: "helveticaneue", Arial;
+
     font-family: "helveticaNL";
    margin-left: 35px;
+
 
   }
 
   }
   #stepSequencer li p {
+
   #ligate a {
     color: white;
+
     text-decoration: none;
    font-size: 18px;
+
     color: #6db;
     margin-left: -35px;
+
    display: none;
+
 
   }
 
   }
   #stepSequencer a {
+
   #rd a {
 +
    font-family: "helveticaNL";
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: #6db;
 
     color: #6db;
 
   }
 
   }
 
+
   #PCR a {
   #tubeRack {
+
     font-family: "helveticaNL";
    margin-bottom: 40px;
+
  }
+
  #tubeRack img {
+
    vertical-align: top;
+
    display: inline-block;
+
  }
+
  #tubeRack ol {
+
    font-size: 24px;
+
    text-align: left;
+
    margin: 0px;
+
    padding: 0px;
+
    margin-left: 20px;
+
  }
+
  #tubeRack li {
+
    color: white;
+
     font-family: Arial;
+
    margin-left: 35px;
+
  }
+
  #tubeRack li p {
+
    color: white;
+
    font-size: 18px;
+
    margin-left: -35px;
+
    display: none;
+
  }
+
  #tubeRack a {
+
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: #6db;
 
     color: #6db;
 
   }
 
   }
 
+
   #PCRclean a {
   #buttonControl {
+
     font-family: "helveticaNL";
    margin-bottom: 40px;
+
     text-decoration: none;
  }
+
     color: #6db;
  #buttonControl img {
+
    vertical-align: top;
+
    display: inline-block;
+
  }
+
  #buttonControl ol {
+
     font-size: 24px;
+
     text-align: left;
+
     margin: 0px;
+
    padding: 0px;
+
    margin-left: 20px;
+
 
   }
 
   }
   #buttonControl li {
+
   #lucText b {
    color: white;
+
     margin-top: 1em;
    font-family: Arial;
+
     margin-left: 35px;
+
 
   }
 
   }
   #buttonControl li p {
+
   table {
 +
    background-color: black;
 
     color: white;
 
     color: white;
     font-size: 18px;
+
     border-color: white;
     margin-left: -35px;
+
     margin-bottom: 2em;
     display: none;
+
    font-family: "helveticaNL";
 +
    font-size:15px; 
 +
    border-collapse: collapse;
 +
     padding:3px;
 
   }
 
   }
   #buttonControl a {
+
   table, td, th {
     text-decoration: none;
+
     border: 1px solid white;
    color: #6db;
+
 
   }
 
   }
   #minute {
+
   th, td {
     margin-bottom: 40px;
+
     padding: 5px;
  }
+
  #minute img {
+
    vertical-align: top;
+
    display: inline-block;
+
  }
+
  span:hover {
+
    color: #6db;
+
}
+
  #sponsors a:hover {
+
    color: goldenrod;
+
 
   }
 
   }
 
</style>
 
</style>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
   function collapse() {
+
   window.onload = revealNotebook();
    /*document.getElementById("step1").style.color = "white";
+
    document.getElementById("step2").style.color = "white";
+
    document.getElementById("step3").style.color = "white";
+
    document.getElementById("step4").style.color = "white";
+
    document.getElementById("step5").style.color = "white";
+
    document.getElementById("step1Text").style.display = "none";
+
    document.getElementById("step2Text").style.display = "none";
+
    document.getElementById("step3Text").style.display = "none";
+
    document.getElementById("step4Text").style.display = "none";
+
    document.getElementById("step5Text").style.display = "none";
+
 
+
    document.getElementById("tube1").style.color = "white";
+
    document.getElementById("tube2").style.color = "white";
+
    document.getElementById("tube3").style.color = "white";
+
    document.getElementById("tube4").style.color = "white";
+
    document.getElementById("tube5").style.color = "white";
+
    document.getElementById("tube1Text").style.display = "none";
+
    document.getElementById("tube2Text").style.display = "none";
+
    document.getElementById("tube3Text").style.display = "none";
+
    document.getElementById("tube4Text").style.display = "none";
+
    document.getElementById("tube5Text").style.display = "none";
+
 
+
    document.getElementById("button1").style.color = "white";
+
    document.getElementById("button2").style.color = "white";
+
    document.getElementById("button1Text").style.display = "none";
+
    document.getElementById("button2Text").style.display = "none";
+
 
+
    if (document.getElementsByClassName("expanded").length > 0) {
+
    document.getElementsByClassName("expanded")[0].className = "collapsing";
+
    };*/
+
  }
+
  
   /*function expandStep1() {
+
   function expandPlate() {
     if (document.getElementById("step1").className === "collapsing") {
+
     if (document.getElementById("Plate").className === "collapsed") {
       document.getElementById("step1").className = "collapsed";
+
       document.getElementById("Plate").style.color = "white";
 +
      document.getElementById("PlateText").style.display = "inline-block";
 +
      document.getElementById("Plate").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step1Text").style.display = "inline-block";
+
       document.getElementById("Plate").style.color = "white";
       document.getElementById("step1").style.color = "#6db";
+
       document.getElementById("PlateText").style.display = "none";
       document.getElementById("step1").className = "expanded";
+
       document.getElementById("Plate").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandStep2() {
+
   function expandLB() {
     if (document.getElementById("step2").className === "collapsing") {
+
     if (document.getElementById("LB").className === "collapsed") {
       document.getElementById("step2").className = "collapsed";
+
       document.getElementById("LB").style.color = "white";
 +
      document.getElementById("LBText").style.display = "inline-block";
 +
      document.getElementById("LB").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step2Text").style.display = "inline-block";
+
       document.getElementById("LB").style.color = "white";
       document.getElementById("step2").style.color = "#6db";
+
       document.getElementById("LBText").style.display = "none";
       document.getElementById("step2").className = "expanded";
+
       document.getElementById("LB").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandStep3() {
+
   function expandSOC() {
     if (document.getElementById("step3").className === "collapsing") {
+
     if (document.getElementById("SOC").className === "collapsed") {
       document.getElementById("step3").className = "collapsed";
+
       document.getElementById("SOC").style.color = "white";
 +
      document.getElementById("SOCText").style.display = "inline-block";
 +
      document.getElementById("SOC").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step3Text").style.display = "inline-block";
+
       document.getElementById("SOC").style.color = "white";
       document.getElementById("step3").style.color = "#6db";
+
       document.getElementById("SOCText").style.display = "none";
       document.getElementById("step3").className = "expanded";
+
       document.getElementById("SOC").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandStep4() {
+
   function expandtransform() {
     if (document.getElementById("step4").className === "collapsing") {
+
     if (document.getElementById("transform").className === "collapsed") {
       document.getElementById("step4").className = "collapsed";
+
       document.getElementById("transform").style.color = "white";
 +
      document.getElementById("transformText").style.display = "inline-block";
 +
      document.getElementById("transform").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step4Text").style.display = "inline-block";
+
       document.getElementById("transform").style.color = "white";
       document.getElementById("step4").style.color = "#6db";
+
       document.getElementById("transformText").style.display = "none";
       document.getElementById("step4").className = "expanded";
+
       document.getElementById("transform").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandStep5() {
+
   function expandmp() {
     if (document.getElementById("step5").className === "collapsing") {
+
     if (document.getElementById("mp").className === "collapsed") {
       document.getElementById("step5").className = "collapsed";
+
       document.getElementById("mp").style.color = "white";
 +
      document.getElementById("mpText").style.display = "inline-block";
 +
      document.getElementById("mp").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step5Text").style.display = "inline-block";
+
       document.getElementById("mp").style.color = "white";
       document.getElementById("step5").style.color = "#6db";
+
       document.getElementById("mpText").style.display = "none";
       document.getElementById("step5").className = "expanded";
+
       document.getElementById("mp").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
 
+
   function expandrd() {
   function expandTube1() {
+
     if (document.getElementById("rd").className === "collapsed") {
     if (document.getElementById("tube1").className === "collapsing") {
+
       document.getElementById("rd").style.color = "white";
       document.getElementById("tube1").className = "collapsed";
+
      document.getElementById("rdText").style.display = "inline-block";
 +
      document.getElementById("rd").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("tube1Text").style.display = "inline-block";
+
       document.getElementById("rd").style.color = "white";
       document.getElementById("tube1").style.color = "#6db";
+
       document.getElementById("rdText").style.display = "none";
       document.getElementById("tube1").className = "expanded";
+
       document.getElementById("rd").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandTube2() {
+
   function expandligate() {
     if (document.getElementById("tube2").className === "collapsing") {
+
     if (document.getElementById("ligate").className === "collapsed") {
       document.getElementById("tube2").className = "collapsed";
+
       document.getElementById("ligate").style.color = "white";
 +
      document.getElementById("ligateText").style.display = "inline-block";
 +
      document.getElementById("ligate").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("tube2Text").style.display = "inline-block";
+
       document.getElementById("ligate").style.color = "white";
       document.getElementById("tube2").style.color = "#6db";
+
       document.getElementById("ligateText").style.display = "none";
       document.getElementById("tube2").className = "expanded";
+
       document.getElementById("ligate").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandTube3() {
+
   function expandgel() {
     if (document.getElementById("tube3").className === "collapsing") {
+
     if (document.getElementById("gel").className === "collapsed") {
       document.getElementById("tube3").className = "collapsed";
+
       document.getElementById("gel").style.color = "white";
 +
      document.getElementById("gelText").style.display = "inline-block";
 +
      document.getElementById("gel").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("tube3Text").style.display = "inline-block";
+
       document.getElementById("gel").style.color = "white";
       document.getElementById("tube3").style.color = "#6db";
+
       document.getElementById("gelText").style.display = "none";
       document.getElementById("tube3").className = "expanded";
+
       document.getElementById("gel").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandTube4() {
+
   function expandgelex() {
     if (document.getElementById("tube4").className === "collapsing") {
+
     if (document.getElementById("gelex").className === "collapsed") {
       document.getElementById("tube4").className = "collapsed";
+
       document.getElementById("gelex").style.color = "white";
 +
      document.getElementById("gelexText").style.display = "inline-block";
 +
      document.getElementById("gelex").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("tube4Text").style.display = "inline-block";
+
       document.getElementById("gelex").style.color = "white";
       document.getElementById("tube4").style.color = "#6db";
+
       document.getElementById("gelexText").style.display = "none";
       document.getElementById("tube4").className = "expanded";
+
       document.getElementById("gelex").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandTube5() {
+
   function expandPCR() {
     if (document.getElementById("tube5").className === "collapsing") {
+
     if (document.getElementById("PCR").className === "collapsed") {
       document.getElementById("tube5").className = "collapsed";
+
       document.getElementById("PCR").style.color = "white";
 +
      document.getElementById("PCRText").style.display = "inline-block";
 +
      document.getElementById("PCR").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("tube5Text").style.display = "inline-block";
+
       document.getElementById("PCR").style.color = "white";
       document.getElementById("tube5").style.color = "#6db";
+
       document.getElementById("PCRText").style.display = "none";
       document.getElementById("tube5").className = "expanded";
+
       document.getElementById("PCR").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
 
+
   function expandPCRclean() {
   function expandButton1() {
+
     if (document.getElementById("PCRclean").className === "collapsed") {
     if (document.getElementById("button1").className === "collapsing") {
+
       document.getElementById("PCRclean").style.color = "white";
       document.getElementById("button1").className = "collapsed";
+
      document.getElementById("PCRcleanText").style.display = "inline-block";
 +
      document.getElementById("PCRclean").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("button1Text").style.display = "inline-block";
+
       document.getElementById("PCRclean").style.color = "white";
       document.getElementById("button1").style.color = "#6db";
+
       document.getElementById("PCRcleanText").style.display = "none";
       document.getElementById("button1").className = "expanded";
+
       document.getElementById("PCRclean").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
 
     };
 
     };
 
   }
 
   }
   function expandButton2() {
+
   function expandluc() {
     if (document.getElementById("button2").className === "collapsing") {
+
     if (document.getElementById("luc").className === "collapsed") {
       document.getElementById("button2").className = "collapsed";
+
       document.getElementById("luc").style.color = "white";
 +
      document.getElementById("lucText").style.display = "inline-block";
 +
      document.getElementById("luc").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("button2Text").style.display = "inline-block";
+
       document.getElementById("luc").style.color = "white";
      document.getElementById("button2").style.color = "#6db";
+
       document.getElementById("lucText").style.display = "none";
      document.getElementById("button2").className = "expanded";
+
       document.getElementById("luc").className = "collapsed";
      if (document.getElementsByClassName("collapsing").length > 0) {
+
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
+
      };
+
    };
+
  }*/
+
 
+
  //The functions below collapse and expand only when the specific item is clicked
+
 
+
  function expandStep1() {
+
    if (document.getElementById("step1").className === "expanded") {
+
      document.getElementById("step1").style.color = "white";
+
       document.getElementById("step1Text").style.display = "none";
+
       document.getElementById("step1").className = "collapsed";
+
    } else{
+
      document.getElementById("step1Text").style.display = "inline-block";
+
      document.getElementById("step1").style.color = "#6db";
+
      document.getElementById("step1").className = "expanded";
+
 
     };
 
     };
 
   }
 
   }
   function expandStep2() {
+
   function expandchromo() {
     if (document.getElementById("step2").className === "expanded") {
+
     if (document.getElementById("chromo").className === "collapsed") {
       document.getElementById("step2").style.color = "white";
+
       document.getElementById("chromo").style.color = "white";
       document.getElementById("step2Text").style.display = "none";
+
       document.getElementById("chromoText").style.display = "inline-block";
       document.getElementById("step2").className = "collapsed";
+
       document.getElementById("chromo").className = "expanded";
 
     } else{
 
     } else{
       document.getElementById("step2Text").style.display = "inline-block";
+
       document.getElementById("chromo").style.color = "white";
      document.getElementById("step2").style.color = "#6db";
+
       document.getElementById("chromoText").style.display = "none";
      document.getElementById("step2").className = "expanded";
+
       document.getElementById("chromo").className = "collapsed";
    };
+
  }
+
  function expandStep3() {
+
    if (document.getElementById("step3").className === "expanded") {
+
      document.getElementById("step3").style.color = "white";
+
       document.getElementById("step3Text").style.display = "none";
+
       document.getElementById("step3").className = "collapsed";
+
    } else{
+
      document.getElementById("step3Text").style.display = "inline-block";
+
      document.getElementById("step3").style.color = "#6db";
+
      document.getElementById("step3").className = "expanded";
+
    };
+
  }
+
  function expandStep4() {
+
    if (document.getElementById("step4").className === "expanded") {
+
      document.getElementById("step4").style.color = "white";
+
      document.getElementById("step4Text").style.display = "none";
+
      document.getElementById("step4").className = "collapsed";
+
    } else{
+
      document.getElementById("step4Text").style.display = "inline-block";
+
      document.getElementById("step4").style.color = "#6db";
+
      document.getElementById("step4").className = "expanded";
+
    };
+
  }
+
  function expandStep5() {
+
    if (document.getElementById("step5").className === "expanded") {
+
      document.getElementById("step5").style.color = "white";
+
      document.getElementById("step5Text").style.display = "none";
+
      document.getElementById("step5").className = "collapsed";
+
    } else{
+
      document.getElementById("step5Text").style.display = "inline-block";
+
      document.getElementById("step5").style.color = "#6db";
+
      document.getElementById("step5").className = "expanded";
+
    };
+
  }
+
 
+
  function expandTube1() {
+
    if (document.getElementById("tube1").className === "expanded") {
+
      document.getElementById("tube1").style.color = "white";
+
      document.getElementById("tube1Text").style.display = "none";
+
      document.getElementById("tube1").className = "collapsed";
+
    } else{
+
      document.getElementById("tube1Text").style.display = "inline-block";
+
      document.getElementById("tube1").style.color = "#6db";
+
      document.getElementById("tube1").className = "expanded";
+
    };
+
  }
+
  function expandTube2() {
+
    if (document.getElementById("tube2").className === "expanded") {
+
      document.getElementById("tube2").style.color = "white";
+
      document.getElementById("tube2Text").style.display = "none";
+
      document.getElementById("tube2").className = "collapsed";
+
    } else{
+
      document.getElementById("tube2Text").style.display = "inline-block";
+
      document.getElementById("tube2").style.color = "#6db";
+
      document.getElementById("tube2").className = "expanded";
+
    };
+
  }
+
  function expandTube3() {
+
    if (document.getElementById("tube3").className === "expanded") {
+
      document.getElementById("tube3").style.color = "white";
+
      document.getElementById("tube3Text").style.display = "none";
+
      document.getElementById("tube3").className = "collapsed";
+
    } else{
+
      document.getElementById("tube3Text").style.display = "inline-block";
+
      document.getElementById("tube3").style.color = "#6db";
+
      document.getElementById("tube3").className = "expanded";
+
    };
+
  }
+
  function expandTube4() {
+
    if (document.getElementById("tube4").className === "expanded") {
+
      document.getElementById("tube4").style.color = "white";
+
      document.getElementById("tube4Text").style.display = "none";
+
      document.getElementById("tube4").className = "collapsed";
+
    } else{
+
      document.getElementById("tube4Text").style.display = "inline-block";
+
      document.getElementById("tube4").style.color = "#6db";
+
      document.getElementById("tube4").className = "expanded";
+
    };
+
  }
+
  function expandTube5() {
+
    if (document.getElementById("tube5").className === "expanded") {
+
      document.getElementById("tube5").style.color = "white";
+
      document.getElementById("tube5Text").style.display = "none";
+
      document.getElementById("tube5").className = "collapsed";
+
    } else{
+
      document.getElementById("tube5Text").style.display = "inline-block";
+
      document.getElementById("tube5").style.color = "#6db";
+
      document.getElementById("tube5").className = "expanded";
+
    };
+
  }
+
 
+
  function expandButton1() {
+
    if (document.getElementById("button1").className === "expanded") {
+
      document.getElementById("button1").style.color = "white";
+
      document.getElementById("button1Text").style.display = "none";
+
      document.getElementById("button1").className = "collapsed";
+
    } else{
+
      document.getElementById("button1Text").style.display = "inline-block";
+
      document.getElementById("button1").style.color = "#6db";
+
      document.getElementById("button1").className = "expanded";
+
    };
+
  }
+
  function expandButton2() {
+
    if (document.getElementById("button2").className === "expanded") {
+
      document.getElementById("button2").style.color = "white";
+
      document.getElementById("button2Text").style.display = "none";
+
      document.getElementById("button2").className = "collapsed";
+
    } else{
+
      document.getElementById("button2Text").style.display = "inline-block";
+
      document.getElementById("button2").style.color = "#6db";
+
      document.getElementById("button2").className = "expanded";
+
 
     };
 
     };
 
   }
 
   }
Line 540: Line 291:
  
 
<div id="overview">
 
<div id="overview">
   <h3>Overview</h3>
+
   <h3>Protocols</h3>
  <h4>We've created an interactive beat generating machine.</h4>
+
<p style="font-size: 17px">We built our constructs from pre-made biobrick parts. Our overall conclusion is that 3A assembly is generally inefficient, and an insufficient method for adding small parts (such as a terminator) to a larger construction within pSB1C3. We learned that ratios were extremely important in the process of 3A Assembly, and we made a summary sheet of the equations we used in pre-digest and pre-ligation that accounts for digest dilution and amount needed to ensure results are seen on a gel, not just ligation ratios. We wished we used gibson assembly. </p>
  <br>
+
<br>
  <img src="https://static.igem.org/mediawiki/2015/thumb/c/cf/NYU_Shanghai_Designpage.png/767px-NYU_Shanghai_Designpage.png">
+
    <p id="tubeOverlay"><br>The tube rack generates the background beat. Tubes contain colorful bacteria, and each color corresponds to a different bass sound. Sound is read left to right.</p>
+
    <p id="cameraOverlay">Bacterial colonies are translated into a step sequencer. Bacteria express fluorescent or chromoproteins. Different colors correspond to different instruments.</p>
+
    <p id="buttonOverlay">Allows user to control cameras and volume.</p>
+
    <p id="smallOverlay">Represents an oscillator.</p>
+
  </img>
+
 
</div>
 
</div>
<div id="stepSequencer">
+
 
   <h5>Step Sequencer</h5>
+
<div id="recipes">
   <video width="440" controls autoplay muted loop>
+
   <h4>Recipes</h4>
   <source src="https://static.igem.org/mediawiki/2015/9/92/NYU_Shanghai_New_Blue.mp4" type="video/mp4">
+
 
   Your browser does not support the video tag.
+
<div id="Plate" class="collapsed">
   </video>
+
<h5 style="display:inline-block" onclick="expandPlate()"><span class="noselect">LB-Agar Plates</span></h5
   <div style="width: 440px; display: inline-block;">
+
<br>
 +
<div id="PlateText" style="display:none">
 +
   <p>
 +
    <ol>
 +
      <li>Calculate total amount of volume of LB agar you would need to use
 +
        <ul>
 +
          <li>You need about 25mL for every 10cm plate and 10mL for every 6cm plate. (e.g. To make 20 x 10cm plates, you need 500mL of LB.)</li>
 +
        </ul>
 +
      </li>
 +
      <li>For every 100mL of LB agar needed, measure out 4g of LB Agar Powder.
 +
        <ul>
 +
          <li>e.g. if you were to make 500mL of LB, you need 20g of LB Agar Powder</li>
 +
        </ul>
 +
      </li>
 +
      <li>Put the agar powder in a flask
 +
        <ul>
 +
          <li>Note: Use a much bigger flask to prevent overflow when autoclaiving. </li>
 +
          <li>e.g. If  you are making 500mL of LB, use a 750mL or 1L flask.</li>
 +
        </ul>
 +
      </li>
 +
      <li>Put deionized water into the flask up to the desired volume.
 +
        <ul>
 +
          <li>Note: <strong>Do not mix.</strong> LB Agar is not supposed to dissolve in room temperature. If you mix the powder it will get stuck on the walls of the flask</li>
 +
        </ul>
 +
      </li>
 +
      <li>Autoclave. </li>
 +
      <li>After autoclave, <b>move to the hood</b>. Let the LB agar cool until it’s less than 60ºC or until you can touch the flask. While waiting, you can start labeling the plates.</li>
 +
      <li>Insert any antibiotics/sugars needed. If you are not sure about the ratio, you can follow this simple example:
 +
      <p style="text-align: center;"><b>50mL LB + 500µL Arabinose* + 50µL Ampicillin**</b><span style="font-size: 10;"><br><i>
 +
      *2mg/mL of Arabinose Stock Solution<br>
 +
      **100mg/mL of Ampicillin Stock Solution</i></span></p>
 +
      </li>
 +
      <li>Swirl the antibiotics/sugars that you just added for a minute.</li>
 +
      <li>Plate the LB agar into the petri dishes until it is about ⅓ of the level. Do not forget to keep the lid on before and after you plate.</li>
 +
      <li> Let it cool for about 5 minutes.</li>
 +
      <li>Invert each plate so that it is upside down</li>
 +
      <li>Store in the 4ºC freezer</li>
 +
    </ol>
 +
   </p>
 +
</div>
 +
</div>
 +
 
 +
<div id="LB" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandLB()"><span class="noselect">LB Broth</span></h5> 
 +
<br>
 +
<div id="LBText" style="display:none">
 +
    <table>
 +
    <tr style="text-align: center; font-weight: bold;">
 +
      <td>Total Amount of Reagent</td>
 +
      <td>100mL</td>
 +
      <td>250mL</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Deionized Water</td>
 +
      <td>100mL</td>
 +
      <td>250mL</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Yeast</td>
 +
      <td>1g</td>
 +
      <td>2.5g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Tryptone</td>
 +
      <td>0.5g</td>
 +
      <td>1.25g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>NaCl</td>
 +
      <td>1g</td>
 +
      <td>2.5g</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
</div>
 +
 
 +
<div id="SOC" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandSOC()"><span class="noselect">SOC Media</span></h5> 
 +
<br>
 +
<div id="SOCText" style="display:none">
 +
   <p>
 +
    Materials
 +
    <li>0.5% (w/v) yeast extract</li>
 +
    <li>2% (w/v) tryptone</li>
 +
    <li>10 mM NaCl</li>
 +
    <li>2.5 mM KCl</li>
 +
    <li>20 mM MgSO4</li>
 +
  <br><br>Per liter:
 +
    <li>5 g yeast extract</li>
 +
    <li>20 g tryptone</li>
 +
    <li>0.584 g NaCl</li>
 +
    <li>0.186 g KCl</li>
 +
    <li>2.4 g MgSO4</li>
 +
  <br><br>
 +
  </p>
 +
  <p><em>Note:</em> Some formulations of SOB use 10 mM MgCl2 and 10 mM MgSO4 instead of 20 mM MgSO4.
 +
SOB medium is also available dry premixed from Difco, 0443-17.<br>Adjust to pH 7.5 prior to use. This requires approximately 25 ml of 1M NaOH per liter.<br><br><b>15/10 medium</b><br><br>Growth of competent TOP10 cells in Example 2 of the Bloom05 patent is performed in 15/10 broth, which is similar to SOB:</p>
 +
<ul>
 +
  <li>1.5% yeast extract</li>
 +
   <li>1% Bacto-Tryptone</li>
 +
   <li>10mM NaCl</li>
 +
  <li>2mM KCl</li>
 +
  <li>10 mM MgCl2</li>
 +
  <li>10 mM MgSO4</li>
 +
</ul>
 +
<br>
 +
  <table border="1">
 +
    <tr style="text-align: center; font-weight: bold;">
 +
      <td>Reagent</td>
 +
      <td>50 mL (in Mols)</td>
 +
      <td>100 mL (in M)</td>
 +
      <td>100 mL (in Grams)</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Tryptone</td>
 +
      <td>(2% w/v) 1 g</td>
 +
      <td>2 g</td>
 +
      <td>2 g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Yeast Extract</td>
 +
      <td>(0.5% w/v) 0.25 g</td>
 +
      <td>0.5 g</td>
 +
      <td>0.5 g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>NaCl</td>
 +
      <td>0.0005 M</td>
 +
      <td>0.01 mol</td>
 +
      <td>0.0584g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>KCl</td>
 +
      <td>0.000125 M</td>
 +
      <td>0.0025 M</td>
 +
      <td>0.0186 g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>MgCl2</td>
 +
      <td>0.0005 M</td>
 +
      <td>0.01 M</td>
 +
      <td>0.09521 g</td>
 +
    </tr>
 +
    <tr>
 +
      <td>Glucose</td>
 +
      <td>0.001 M</td>
 +
      <td>0.02 M</td>
 +
      <td>0.36032 g</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div id="3a">
 +
  <h4>3A Assembly</h4>
 +
<div id="transform" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandtransform()"><span class="noselect">Transformation</span></h5> 
 +
<br>
 +
<div id="transformText" style="display:none">
 +
  <p>
 +
  Estimated time: 3 hours (plus 14-18 hour incubation)
 +
  <br><br>Materials
 +
    <li>2µl resuspended DNA</li>
 +
    <li>Competent cells (50ul per transformation)</li>
 +
    <li>Ice</li>
 +
    <li>2ml tube</li>
 +
    <li>42ºC water bath</li>
 +
    <li>SOC or LB media</li>
 +
    <li>1 LB plate and 1 LB+antibiotic per transformation</li>
 +
    <li>Spreader</li>
 +
    <li>37ºC incubator</li>
 +
    <li>Shaker</li>
 +
  <br><br>Procedure
 
   <ol>
 
   <ol>
     <h6 class="noselect">How did we make the step sequencer?</h6>
+
     <li>Thaw competent cells on ice.</li>
     <li id="step1" class="collapsed" onclick="collapse();expandStep1()"><span class="noselect">Make bacteria plate</span>
+
     <li>Add 50µL of thawed competent cells into pre-chilled 2ml tube.</li>
      <p id="step1Text">With bacteria expressing chromoproteins or fluorescent proteins. All parts taken from the Registry. See constructs <a href="Parts">here</a>. See protocols <a href="Protocols">here</a>.</p>
+
    <li>Add 2µL of resuspended DNA to the 2ml tube. Pipet up and down a few times, gently. Keep the competent cells on ice.</li>
     </li><li id="step2" class="collapsed" onclick="collapse();expandStep2()"><span class="noselect">Take picture</span>
+
     <li>Close tubes and incubate the cells on ice for 30 minutes.</li>
      <p id="step2Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p>
+
    <li>Heat shock the cells by immersion in a pre-heated water bath at 42ºC for 60 seconds.</li>
     </li><li id="step3" class="collapsed" onclick="collapse();expandStep3()"><span class="noselect">Processing</span>
+
    <li>Incubate the cells on ice for 5 minutes.</li>
      <p id="step3Text">Processing is a coding language and environment that allows us to translate data from an image into binary data. Blob detection is an open-source code that allows us to detect areas of high contrast (bacterial colonies). We obtain the RGB value of the blobs detected, and convert the positions into a 16X16 grid. Click <a href="Code">here</a> to see our code.</p>
+
     <li>Add 200 μl of SOC or LB media to each transformation</li>
     </li><li id="step4" class="collapsed" onclick="collapse();expandStep4()"><span class="noselect">Sound mapping</span>
+
    <li>Incubate the cells at 37ºC for 2 hours at 260rpm in the shaker.</li>
      <p id="step4Text">Each position on the grid is mapped to a different note. Each row is the same note. Notes increase by half-steps in the column.</p>
+
    <li>Label petri dishes with the appropriate antibiotic with the part number, plasmid backbone, antibiotic resistance, and date. Plate 200 µl of the transformation onto the labeled antibiotic dishes, and spread. This helps ensure that you will be able to pick out a single colony. </li>
     </li><li id="step5" class="collapsed" onclick="collapse();expandStep5()"><span class="noselect">Music<br></span>
+
     <li>Spread remaining transformation onto labeled LB agar plate and spread, approx 50µl.</li>
      <p id="step5Text" style="font-size: 22px;">&#x266a; &#x266b; &#x266a; &#x266b;</p>
+
    <li>Incubate the plates at 37ºC for 12-18 hours, making sure the agar side of the plate is up. If incubated for too long the antibiotics start to break down and un-transformed cells will begin to grow. This is especially true for ampicillin - because the resistance enzyme is excreted by the bacteria, and inactivates the antibiotic outside of the bacteria.</li>
    </li>
+
     <li>You can pick a single colony, make a glycerol stock, grow up a cell culture and miniprep.</li>
 
   </ol>
 
   </ol>
 +
  <br>Controls
 +
    <li>Competent cells on LB plate</li>
 +
    <li>Competent cells on LB + antibiotic plate</li>
 +
    <li>Competent cells + plasmid on LB plate</li>
 +
  </p>
 
   </div>
 
   </div>
 
</div>
 
</div>
<div id="tubeRack">
+
 
<h5>Tube Rack</h5>
+
<div id="mp" class="collapsed">
  <img src="https://static.igem.org/mediawiki/2015/thumb/7/7e/NYU_Shanghai_Tube_Rack.png/800px-NYU_Shanghai_Tube_Rack.png" width="440"></img>
+
<h5 style="display:inline-block" onclick="expandmp()"><span class="noselect">Miniprep</span></h5>
  <div style="width: 440px; display: inline-block;">
+
<br>
  <ol><h6 class="noselect">How did we make the tube rack?</h6>
+
<div id="mpText" style="display:none">
    <li id="tube1" class="collapsed" onclick="collapse();expandTube1()"><span class="noselect">Laser cut tube rack </span>
+
  <p>
       <p id="tube1Text">Using a laser cutter, we created a custom tube rack. 8 slots allow our system to run on 4/4 time.</p>
+
      Estimated time
     </li><li id="tube2" class="collapsed" onclick="collapse();expandTube2()"><span class="noselect">Fill tubes with colorful bacteria</span>
+
      <br><br>Materials
       <p id="tube2Text">Our initial intention was to use bioluminescent, luciferase-generating bacteria. We realized the light from these constructs was dim and could only be seen in the dark, and thus not practical for our music generator. In the end, we switched to chromoprotein expressing bacteria. See constructs <a href="Parts">here</a>. See protocols <a href="Protocols">here</a>.</p>
+
       <li>Biomiga Miniprep Kit</li>
    </li><li id="tube3" class="collapsed" onclick="collapse();expandTube3()"><span class="noselect">Take picture </span>
+
     </p>
       <p id="tube3Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p>
+
    <p>
    </li><li id="tube4" class="collapsed" onclick="collapse();expandTube4()"><span class="noselect">Processing </span>
+
      <br>Procedure
       <p id="tube4Text">Processing is a coding language and environment that allows us to identify the RGB value of a specific position and correlate that value with a drum sound. Click <a href="Code">here</a> to see our code.</p>
+
      <ol>
    </li><li id="tube5" class="collapsed" onclick="collapse();expandTube5()"><span class="noselect">Beats<br></span>
+
       <li>Harvest the bacterial culture by centrifugation for 1 min at 10,000 rpm. Pour off the supernatant and blot the inverted tube on a paper towel to remove residue medium. Remove the residue medium completely. </li>
       <p id="tube5Text">Boots and cats and boots and cats.</p>
+
      <li>Add 250 µL Buffer A1 (Add RNase A to Buffer A1 before use) and completely resuspend bacterial pellet by vortexing or pipetting </li>
    </li>
+
      <li>Add 250 µL Buffer B1, mix gently by inverting the tube 10 times (do not vortex), and incubate at room temperature for 5 minutes. </li>
  </ol>
+
      <li>Add 350 µL Buffer N1, mix completely by inverting/shaking the vial for 5 times and sharp hand shaking for 2 times. <br>Note: Incubating the lysate in ice for 1 min will improve the yield. </li>
   </div>
+
       <li>Centrifuge the lysate at 13,000 rpm for 10 minutes at room temperature. If the lysate doesn’t appear clean, reverse the tube angle, centrifuge for 5 more minutes and then transfer the clear lysate to DNA column. </li>
 +
      <li>Carefully transfer the clear lysate into a DNA column with a collection tube, avoid the precipitations, spin at 13,000 rpm for 1 minute, discard the flow-through and put the column back to the collection tube. </li>
 +
       <li>Add 500 µL Buffer KB into the spin column, centrifuge at 13,000 rpm for 1 minute. Remove the spin column from the tube and discard the flow-through. Put the column back to the collection tube. </li>
 +
      <li>Add 650 µL DNA Wash Buffer (Add ethanol to DNA wash buffer before use) into the spin column, centrifuge at 13,000 rpm for 1 minute at room temperature. Remove the spin column from the tube and discard the flowthrough.</li>
 +
      <li>Reinsert the spin column, with the lid open, into the collection tube and centrifuge for 2 minutes at 13,000 rpm. </li>
 +
       <li>Carefully transfer the spin column into a sterile 1.5 mL tube and add 50-100 µL (> 50 µL) Sterile ddH20 or Elution Buffer into the center of the column and let it stand for 2 minutes. Elute the DNA by centrifugation at 13,000 rpm for 1 minute. Reload the eluate into the column and elute again.</li>
 +
      <li>Check results on Nanodrop.</li>
 +
      </ol>
 +
      <br>
 +
   </p>
 
</div>
 
</div>
<div id="buttonControl">
+
</div>
<h5>Button Control</h5>
+
 
  <img src="https://static.igem.org/mediawiki/2015/thumb/5/5f/NYU_Shanghai_Arduino_UNO.png/800px-NYU_Shanghai_Arduino_UNO.png" width="440"></img>
+
<div id="rd" class="collapsed">
  <div style="width: 440px; display: inline-block;">
+
<h5 style="display:inline-block" onclick="expandrd()"><span class="noselect">Restriction Digest</span></h5>
  <ol><h6 class="noselect">How did we make the button control?</h6>
+
<br>
    <li id="button1" class="collapsed" onclick="collapse();expandButton1()"><span class="noselect">Obtain equipment</span>
+
<div id="rdText" style="display:none">
       <p id="button1Text">We used equipment from the awesome company DFRobot. An Arduino board allows us to take the data from physical interaction (i.e pushing a button) into commands such as adding a sound layer or decreasing the volume.
+
    <p>Link to <a href="https://www.neb.com/tools-and-resources/usage-guidelines/optimizing-restriction-endonuclease-reactions"> NEB Protocol </a>
    <br><br>Specifically we used:
+
 
    <br>7 buttons
+
    <br><br>To determine buffer for <a href="https://www.neb.com/tools-and-resources/interactive-tools/double-digest-finder"> double digests</a>
    <br> 5 sliders
+
 
    <br>1 Arduino Leonardo
+
    <br><br>Guide to <a href="https://www.neb.com/tools-and-resources/usage-guidelines/heat-inactivation">heat inactivation</a>
    <br>3 bread boards
+
 
    <br>Lots of wires
+
    <br><br>General reaction set-up:
    <br>Lots of screws
+
      <table border="1">
    <br>Lots of resistors
+
      <tr>
     <br>Lots of sodering
+
          <td>Restriction enzyme</td>
 +
          <td>10units, generally 1uL</td>
 +
      </tr>
 +
       <tr>
 +
          <td>DNA</td>
 +
          <td>1ug</td>
 +
      </tr>
 +
      <tr>
 +
          <td>10X NEB Buffer</td>
 +
          <td>5uL (1X)</td>
 +
      </tr>
 +
      <tr>
 +
          <td>Total Reaction Volume</td>
 +
          <td>50uL</td>
 +
      </tr>
 +
      <tr>
 +
          <td>Incubation Time</td>
 +
          <td>1hr</td>
 +
      </tr>
 +
      <tr>
 +
          <td>Incubation Temperature</td>
 +
          <td>Enzyme Dependent</td>
 +
      </tr>
 +
     </table>
 
     </p>
 
     </p>
    </li><li id="button2" class="collapsed" onclick="collapse();expandButton2()"><span class="noselect">Create code<br></span>
 
      <p id="button2Text">Click <a href="Code">here</a> to see the code.</p>
 
    </li>
 
  </ol>
 
  </div>
 
 
</div>
 
</div>
<div id="minute">
+
</div>
<h5>40 Minute Sound</h5>
+
 
   <img src="https://static.igem.org/mediawiki/2015/3/31/NYU_Shanghai_Waves2.png" width="440"></img>
+
<div id="ligate" class="collapsed">
  <div style="width: 440px; display: inline-block; margin-left: 20px;" >
+
<h5 style="display:inline-block" onclick="expandligate()"><span class="noselect">Ligation</span></h5> 
  <h6 class="noselect">What is the 40min sound?</h6>
+
<br>
      <p id="button1Text">We wanted to represent a real-time biological oscillator, the natural form of a beat-generator.  
+
<div id="ligateText" style="display:none">
 +
 
 +
</div>
 +
</div>
 +
 
 +
<div id="gel" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandgel()"><span class="noselect">Gel Electrophoresis</span></h5> 
 +
<br>
 +
<div id="gelText" style="display:none">
 +
    This is how you do gel electrophoresis.
 +
</div>
 +
</div>
 +
 
 +
<div id="gelex" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandgelex()"><span class="noselect">Gel Extraction</span></h5> 
 +
<br>
 +
<div id="gelexText" style="display:none">
 +
<p>
 +
Estimated time:
 +
  <br><br>Materials
 +
  <br>MinElute Midi Gel Extraction Kit
 +
  <br>Procedure
 +
    <ol>
 +
    <li>Pre-weigh a 2.0mL microcentrifuge tube</li>
 +
    <li>Excise DNA fragment from agarose gel with clean, sharp scalpel. Place in the pre-weighed microcentrifuge tube. Minimize the exposure of the DNA samples under UV and amount of gel cut with DNA.</li>
 +
    <li>Weigh the tube and calculate the weight of the gel. For every 1 volume of gel (100mg = 100µl) add 3 times the volume of Buffer QG. The maximum amount of gel slice per spin column is 400mg.For >2% agarose gels, add 6 volumes of Buffer QG.</li>
 +
    <li>Incubate at 50ºC for 10 minutes (or until the gel has completely dissolved). Vortex the tube every 2-3 minutes during incubation to help dissolve the gel. If color is orange or violet after gel slice has dissolved, add 10µl 3M sodium acetate, pH 5.0. The color of the mixture will turn to yellow. </li>
 +
    <li>Add 1 gel volume of isopropanol to the sample and mix by inverting.</li>
 +
    <li>Place a MinElute spin column in a provided 2mL collection tube. Apply the sample in the 2.0mL microcentrifuge tube to the MinElute column and centrifuge for 1 min at 13,000 rpm. Discard the flow-through and place the MinElute column back into the same collection tube. If the sample volume exceeds 800µl, simply reload and spin again.</li>
 +
    <li>Add 500µl Buffer QG to the MinElute column and centrifuge for 1 minute at 13,000 rpm. Discard flow-through and place the MinElute column back into the same collection tube.</li>
 +
    <li>Add 750µl Buffer PE to MinElute column and centrifuge for 1 minute at 13,000 rpm. Discard flow-through and place the MinElute column back into the same collection tube. If the DNA will be used for salt-sensitive applications, such as direct sequencing and blunt-ended ligation, let the column stand 2-5 minute after addition of Buffer PE.</li>
 +
    <li>Centrifuge the column in the 2mL collection tube for 1 minute at 13,000 rpm again to remove residual ethanol.</li>
 +
    <li>Place each MinElute column into a clean 1.5mL microcentrifuge tube. To elute DNA, add 10µl Buffer EB or water to the center of the MinElute membrane. Let the column stand for 1 minute, and centrifuge the column for 1 minute at 13,000rpm.</li>
 +
    <li>Repeat step 12 but this time load the flow-through back to the membrane. Let the column stand for 1 minute, and centrifuge the column for 1 minute at 13,000rpm.</li>
 +
    <li>Check Gel extraction product with Nanodrop</li>
 +
    </ol>
 +
    <br>
 +
  </p>
 +
</div>
 +
</div>
 +
 
 +
<div id="PCR" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandPCR()"><span class="noselect">PCR</span></h5
 +
<br>
 +
<div id="PCRText" style="display:none">
 +
    <p>These are the conditions we used to PCR the gBlocks received from IDT. We used <a href="http://www.snapgene.com"> Snapgene </a> to design the primers. We used <a href="https://www.neb.com/protocols/2013/12/13/pcr-using-q5-high-fidelity-dna-polymerase-m0491">Q5 High-Fideltiy Polymerase</a>from New England Biolabs.
 +
    <table border="1">
 +
      <tr>
 +
          <td><font color="#d66">Component</font></td>
 +
          <td><font color="#d66">50uL Reaction</font></td>
 +
          <td><font color="#d66">Concentration</font></td>
 +
      </tr>
 +
      <tr>
 +
          <td>5X Q5 Reaction Mix</td>
 +
          <td>25uL</td>
 +
          <td>1X</td>
 +
      </tr>
 +
      <tr>
 +
          <td>10X NEB Buffer</td>
 +
          <td>5uL</td>
 +
          <td>1X</td>
 +
      </tr>
 +
      <tr>
 +
          <td>10uM Forward primer</td>
 +
          <td>2.5uL</td>
 +
          <td>0.5uM</td>
 +
      </tr>
 +
      <tr>
 +
          <td>10uM Forward primer</td>
 +
          <td>2.5uL</td>
 +
          <td>0.5uM</td>
 +
      </tr>
 +
      <tr>
 +
          <td>Template DNA</td>
 +
          <td>10uL</td>
 +
          <td>100ng</td>
 +
      </tr>
 +
      <tr>
 +
          <td>Nuclease-free water</td>
 +
          <td>10uL or none</td>
 +
          <td></td>
 +
      </tr>
 +
    </table>
 +
   </p>
 +
  <p>Controls
 +
  <li>No template control</li>
 +
  <li>No enzyme control</li>
 +
  </p>
 +
</div>
 +
</div>
 +
 
 +
<div id="PCRclean" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandPCRclean()"><span class="noselect">PCR Cleanup</span></h5> 
 +
<br>
 +
<div id="PCRcleanText" style="display:none">
 +
    <p>We used <a href="https://static.igem.org/mediawiki/2015/d/d1/NYU_Shanghai_Tianquick.pdf">TIANquick Mini Purification Kit</a>.
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div id="makingColor">
 +
  <h4>Making Color</h4>
 +
 
 +
<div id="luc" class="collapsed">
 +
<h5 style="display:inline-block" onclick="expandluc()"><span class="noselect">Luciferase</span></h5>
 +
<br>
 +
<p><img width="800" src="https://static.igem.org/mediawiki/2015/1/12/NYU_Shanghai_Luciferase_Protein.png"></p>
 +
<br>
 +
<div id="lucText" style="display:none">
 +
    <p>
 +
    Overview
 +
    <ol>
 +
      <li>Luciferin substrate must be added.</li>
 +
      <li>D-Luciferin is too large of a chemical to cross the plasma membrane of E. Coli so cell lysis is required to extract luciferase.</li>
 +
      <li>After cell lysis, the reagent solution can be added to the lysis buffer. Light should be emitted within 5 to 10 seconds of adding the reagent solution.</li>
 +
      <li>The luciferase/luciferin reaction at 22.5 ºC theoretically offers the greatest light intensity.</li>
 +
      <li>Solutions of D-Luciferin should be aliquotted and stored in darkness at -80 ºC</li>
 +
    </ol>
 +
    </p>
 +
    <p>
 +
    <br>Materials
 +
      <li>D-Luciferin free acid</li>
 +
      <li>ATP</li>
 +
      <li>MgSO4 &#xB7; 7H2O</li>
 +
      <li>1M HEPES Buffer</li>
 +
      <li>Lysozyme</li>
 +
      <li>10 mM Tris-HCl</li>
 +
    </p>
 +
    <p>
 +
    <br>Lysis Buffer
 +
    <br>For E. coli cell lysis, use a freshly prepared lysozyme solution (10 mg/ml) in 10 mM Tris-HCl, pH 8.0.
 +
    </p>
 +
    <p>
 +
    <br>Reagent Solution
 +
    <br>Prepare using ATP free water. Combine 1 mM luciferin or luciferin salt, 3 mM ATP and 15 mM MgSO4 in 30mM HEPES buffer, pH 7.8.  Store substrate solution at -20ºC in polypropylene or glass.
 +
    </p>
 +
    <p>
 +
    <br>Preparing 1mM D-Luciferin
 +
    <br>Directions for a 5 mg sample: Dissolve 0.034 gr dithiothreitol in 22 mL of QH2O. Add 0.2 mL of this DTT solution to the 5 mg d-luciferin. Add 4 uL of 10M NaOH to dissolve the luciferin. Dilute this into the remaining 21.8 mL of DTT solution and store as aliquots at - 80 ºC in darkness until use.
 +
    </p>
 +
    <p>
 +
    <br>Procedure<br>
 +
    Bacterial lysis:
 +
    <ol>
 +
      <li>After 12-18 hours of inoculation of bacteria expressing luciferase plasmid, pipette 2 mL of cell culture into a clean 2 mL tube. Centrifuge at 10,000 rpm for 1 minute. Pour out liquid into a collection beaker. Continue this process until all of the cell culture (in the inoculation tube) is gone.</li>
 +
      <li>Resuspend the pellets in 350 ml of STET buffer (10 mM Tris-HCl with 1 mM EDTA)</li>
 +
      <li>Add 25 uL - 30 uL of lysozyme buffer to the resuspended pellet.</li>
 +
      <li>Mix by vortexing for 3 seconds.</li>
 +
      <li>Incubate for 2 hours at room temperature.</li>
 +
      <li>If the reagent is not added immediately, store the lysed bacteria in the -20 ºC freezer until use.</li>
 +
    </ol>
 +
    </p>
 +
    <p>
 +
    Addition of Reagent Solution:
 +
    <ol>
 +
      <li>Following the above instructions, prepare a 1mM sample of D-Luciferin.</li>
 +
      <li>Following the above recipe, prepare the reagent solution.</li>
 +
      <li>In a dark room, add about 250-350 uL of reagent solution to each sample of lysis product.</li>
 +
      <li>Light should be emitted within two-three seconds.</li>
 +
    </ol>
 +
    </p>
 +
    <p>
 +
    <br>Example Calculations<br>
 +
    Lysis Buffer (Desired Total Volume: 15mL)<br>
 +
    <table border="1">
 +
      <tr>
 +
        <td><font color="#d66">Chemical Name</font></td>
 +
        <td>Tris-HCl</td>
 +
        <td>EDTA</td>
 +
        <td>NaCl</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Molecular Weight</font></td>
 +
        <td>N/A</td>
 +
        <td>292.23 g/mol</td>
 +
        <td>58.44 g/mol</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Molarity Desired</font></td>
 +
        <td>10 mM</td>
 +
        <td>1mM</td>
 +
        <td>0.1M</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Calculation</font></td>
 +
        <td>Dilute 1M Tris-HCl:</td>
 +
        <td> </td>
 +
        <td> </td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Final Amount</font></td>
 +
        <td>150 uL (+14.85 mL ddH2O)</td>
 +
        <td>0.00438 g</td>
 +
        <td>0.08766 g</td>
 +
      </tr>
 +
    </table>
 +
    </p>
 +
    <p>
 +
    Lysozyme Solution (Desired Total Volume: 15mL)<br>
 +
    <table border="1">
 +
      <tr>
 +
        <td><font color="#d66">Lysozyme Solubility</font> </td>
 +
        <td>10 mg lysozyme in 1 mL of 10 mM Tris-HCl</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Desired Amount of Lysozyme Solution to Make</font></td>
 +
        <td>15 mL</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Amount of Lysozyme Needed</font></td>
 +
        <td>10 mg x 15 = <b>150 mg</b></td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Amount of 10 mM Tris-HCl Needed</font> </td>
 +
        <td><b>15 mL</b></td>
 +
      </tr>
 +
    </table>
 +
    </p>
 +
    <p>
 +
    Reagent Solution (Desired total volume: 22 mL)<br>
 +
    <table border="1">
 +
      <tr>
 +
        <td><font color="#d66">Chemical Name</font></td>
 +
        <td>ATP disodium salt trihydrate</td>
 +
        <td>MgSO4•7H2O</td>
 +
        <td>HEPES Buffer</td>
 +
        <td>D-Luciferin free acid</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Molecular Weight</font></td>
 +
        <td>605.24 g/mol</td>
 +
        <td>246.5 g/mol</td>
 +
        <td>238.3 g/mol</td>
 +
        <td>280.33 g/mol</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Molarity Desired</font></td>
 +
        <td>3 mM</td>
 +
        <td>15 mM</td>
 +
        <td>30 mM</td>
 +
        <td>1 mM</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Calculation</font></td>
 +
        <td> </td>
 +
        <td> </td>
 +
        <td> </td>
 +
        <td>Use the 1 mM stock solution created earlier</td>
 +
      </tr>
 +
      <tr>
 +
        <td><font color="#d66">Final Amount</font></td>
 +
        <td>0.039945 g</td>
 +
        <td>0.081345 g</td>
 +
        <td>0.1573 g</td>
 +
        <td>22 mL</td>
 +
      </tr>
 +
    </table>
 +
    </p>
 
     </p>
 
     </p>
 
   </div>
 
   </div>
 
</div>
 
</div>
<div id="hardware">
+
 
  <h3>Hardware</h3>
+
<div id="chromo" class="collapsed">
  <h4>These are our diagrams we made to laser-cut the hardware we needed.</h4>
+
<h5 style="display:inline-block" onclick="expandchromo()"><span class="noselect">Chromoproteins</span></h5>
  <br>
+
  <h5>Camera Stand</h5>
+
  <img src="https://static.igem.org/mediawiki/2015/c/c2/NYU_Shanghai_Camstand.png" width="700"></img>
+
  <br>
+
  <br>
+
  <br>
+
  <h5>Button Box</h5>
+
  <img src="https://static.igem.org/mediawiki/2015/4/40/NYU_Shanghai_Buttonbox.png" width="700"></img>
+
  <br>
+
  <br>
+
  <br>
+
  <h5>Tube Rack</h5>
+
  <img src="https://static.igem.org/mediawiki/2015/8/87/NYU_Shanghai_New_Tube_Rack.png" width="700"></img>
+
  <br>
+
  <br>
+
  <br>
+
  <h5>Tube Rack Bottom</h5>
+
  <img src="https://static.igem.org/mediawiki/2015/a/a6/NYU_Shanghai_Tuberackbottom.png" width="700"></img>
+
 
  <br>
 
  <br>
  <br>
+
<div id="chromoText" style="display:none">
  <br>
+
    This is the conditions we used to express chromoproteins.
  <h5>Disk Rack</h5>
+
  <img src="https://static.igem.org/mediawiki/2015/e/e3/NYU_Shanghai_diskrack.png" width="700"></img>
+
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
 
</html>
 
</html>
  
 
{{NYU_Shanghai/Sponsors}}
 
{{NYU_Shanghai/Sponsors}}

Revision as of 05:11, 17 September 2015

Protocols

We built our constructs from pre-made biobrick parts. Our overall conclusion is that 3A assembly is generally inefficient, and an insufficient method for adding small parts (such as a terminator) to a larger construction within pSB1C3. We learned that ratios were extremely important in the process of 3A Assembly, and we made a summary sheet of the equations we used in pre-digest and pre-ligation that accounts for digest dilution and amount needed to ensure results are seen on a gel, not just ligation ratios. We wished we used gibson assembly.


Recipes

3A Assembly

Making Color