Difference between revisions of "Team:Delaware/notebook"

 
(87 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
 
<head>
 
<head>
 +
<script>
  
</head>
+
// This is the jquery part of your template. 
 +
// Try not modify any of this code too much since it makes your menu work.
  
<body>
+
$(document).ready(function() {
<div class="bg-primary">
+
<section>
+
<div class="col-lg-16">
+
<center>
+
            <img src="https://static.igem.org/mediawiki/2016/e/e4/T--Imperial_College--ProtoBanner.png" height="450"/>
+
          </center>
+
  
</div>
+
$("#HQ_page").attr('id','');
  
 +
// call the functions that control the menu
 +
menu_functionality();
 +
hide_show_menu();
  
  
  
<div class="col-lg-10 col-centered">
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
<p> This is our Team Notebook! Here you will find what we have done at each meeting<br><br></p>
+
function menu_functionality() {
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
            <div class="panel panel-default">
+
                <div class="panel-heading" role="tab" id="P1">
+
                    <h4 class="panel-title">
+
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P1-collapse" aria-expanded="false" aria-controls="P1-collapse">
+
<div>
+
                    <div class="col-md-11">June 5, 2017</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>
+
                    </a>
+
                    </h4>
+
  
                </div>
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
                <div id="P1-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P1">
+
$(".menu_button").click(function(){
                    <div class="panel-body">
+
<p>
+
<b>Attendance:</b><br>
+
1. Seth Martinez<br>
+
2. Kira Dzedzy<br>
+
3. Ioannis (Yianni) Zerefos<br>
+
4. Kathleen Wright<br>
+
5. Madlen Can<br>
+
6. Carissa Walkosak<br>
+
7. Dan Owens<br>
+
8. Kelsey Murray<br>
+
<br>
+
<b>Day's Agenda:</b><br>
+
<ol style="font-size:16px;">
+
  
<ul style="font-size:16px;">
+
// add or remove the class "open" , this class holds the "-"
<body> Sterile technique, taught by Tisa, and the first day inside the lab
+
$(this).children().toggleClass("open");
</p>
+
// show or hide the submenu
    </div>
+
$(this).next('.submenu_wrapper').fadeToggle(400);
  </div>
+
});
</div>
+
  
<div class="some-padding"></div>
+
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
<div class="some-padding"></div>
+
$("#display_menu_control").click(function(){
 +
$('#menu_content').fadeToggle(400);
 +
});
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
// call the current page highlight function
            <div class="panel panel-default">
+
highlight_current_page();
                <div class="panel-heading" role="tab" id="P2">
+
}
                    <h4 class="panel-title">
+
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P2-collapse" aria-expanded="false" aria-controls="P2-collapse">
+
<div>
+
                    <div class="col-md-11">June 6, 2017</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>
+
                    </a>
+
                    </h4>
+
  
                </div>
 
                <div id="P2-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P2">
 
                    <div class="panel-body">
 
<p>
 
<b>Attendance:</b><br>
 
1. Kira Dzedzy<br>
 
2. Kathleen Wright<br>
 
3. Madlen Can<br>
 
4. Ioannis (Yianni) Zerefos<br>
 
5. Sara Leung<br>
 
6.Maddie Callahan<br>
 
<br>
 
<b>Day's Agenda:</b><br>
 
<ol style="font-size:16px;">
 
  
<ul style="font-size:16px;">
+
// call the highlight current page function to show it on the menu with a different background color
<body> Sterile technique, taught by Tisa, and the first day inside the lab
+
function highlight_current_page() {
</p>
+
    </div>
+
  </div>
+
</div>
+
  
<div class="some-padding"></div>
+
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
<div class="some-padding"></div>
+
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
// now that the current_page class has been added to a menu item, make the submenu fade in
            <div class="panel panel-default">
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
                <div class="panel-heading" role="tab" id="P2">
+
// change the +/- symbol of the corresponding menu button
                    <h4 class="panel-title">
+
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P2-collapse" aria-expanded="false" aria-controls="P2-collapse">
+
 +
}
  
  </div>
 
</div>
 
</div>
 
  
<div class="some-padding"></div>
 
<div class="some-padding"></div>
 
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
// allow button on the black menu bar to show/hide the side menu
            <div class="panel panel-default">
+
function hide_show_menu() {
                <div class="panel-heading" role="tab" id="P3">
+
                    <h4 class="panel-title">
+
// in case you preview mode is selected, the menu is hidden for better visibility
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P3-collapse" aria-expanded="false" aria-controls="P3-collapse">
+
if (window.location.href.indexOf("submit") >= 0) {
<div>
+
$(".igem_2017_menu_wrapper").hide();
                    <div class="col-md-11">PCR From Plasmid DNA Template</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
}
</div>
+
                    </a>
+
                    </h4>
+
  
                </div>
+
// if the black menu bar has been loaded
                <div id="P3-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P3">
+
  if (document.getElementById('bars_item')) {
                    <div class="panel-body">
+
<p>
+
<b>Materials:</b><br>
+
2x Phusion Mastermix<br>
+
10 µM forward primer<br>
+
10 µM forward primer<br>
+
PCR tube<br>
+
Sterile water<br>
+
Plasmid DNA<br>
+
<br>
+
<b>Methods:</b><br>
+
For a 25 µL reaction<br>
+
<ol style="font-size:16px;">
+
<li>In a PCR tube on ice, combine  1-10 ng of plasmid DNA, 1.25 µL of 10 µM forward primer, 1.25 µL of 10 µM reverse primer to a PCR tube on ice, 12.5 µL of 2x Phusion Mastermix, and sterile water up to 25 µL.
+
<br><i>Note: It is important to add Phusion Master Mix last in order to prevent primer degradation
+
caused by the 3 ́→ 5 ́ exonuclease activity</i></li>
+
<li>Gently mix the reaction</li>
+
<li>If necessary, collect the liquid to the bottom of the PCR tube by spinning briefly</li>
+
<li>Transfer the PCR tube from ice to a PCR machine to begin thermocycling</li>
+
</ol>
+
  
<p><br>For a 50 µL reaction<br></p>
+
// when the "bars_item" has been clicked
<ol style="font-size:16px;">
+
$("#bars_item").click(function() {
<li>In a PCR tube on ice, combine  1-10 ng of plasmid DNA, 2.50 µL of 10 µM forward primer, 2.50 µL of 10 µM reverse primer to a PCR tube on ice, 25 µL of 2x Phusion Mastermix, and sterile water up to 50 µL.
+
$("#sideMenu").hide();
<br><i>Note: It is important to add Phusion Master Mix last in order to prevent primer degradation
+
caused by the 3 ́→ 5 ́ exonuclease activity</i></li>
+
<li>Gently mix the reaction</li>
+
<li>If necessary, collect the liquid to the bottom of the PCR tube by spinning briefly</li>
+
<li>Transfer the PCR tube from ice to a PCR machine preheated to 98°C to begin thermocycling</li>
+
</ol>
+
<p><br><b>Thermocycling</b><br>
+
The PCR machine should be set to run the following steps: </p>
+
<table class="table table-bordered table-striped">
+
<thead>
+
        <tr>
+
            <th>Step</th>
+
            <th>Temperature (°C)</th>
+
            <th>Time</th>
+
         
+
        </tr>
+
    </thead>
+
    <tbody>
+
        <tr>
+
            <td>Initial denaturation</td>
+
            <td>98</td>
+
            <td>30 seconds</td>
+
        </tr>
+
        <tr>
+
            <td>25-35 cycles</td>
+
            <td>98 (denaturation)<br>
+
                45-72 (annealing) <a href="#Note1">see Note 1</a><br>
+
                72 (extension)</td>
+
            <td>5-10 seconds <br>
+
                10-30 seconds<br>
+
                15-30 seconds per kb</td>
+
        </tr>
+
        <tr>
+
            <td>Final extension</td>
+
            <td>72</td>
+
            <td>2-5 minutes</td>
+
        </tr>
+
        <tr>
+
            <td>Hold</td>
+
            <td>4</td>
+
            <td>Indefinitely</td>
+
        </tr>
+
  
    </tbody>
+
// show/hide the menu wrapper
</table>
+
$(".igem_2017_menu_wrapper").fadeToggle("100");
 +
});
 +
  }
  
<p id="Note1">Note 1: Use the NEB Tm calculator should be used to determine the annealing temperature when using Phusion: <a target="_blank" href="http://tmcalculator.neb.com/#!/">http://tmcalculator.neb.com/#!/</a></p>
+
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 +
else {
 +
    setTimeout(hide_show_menu, 15);
 +
}
 +
}
  
  
</p>
+
});
  
  </div>
 
</div>
 
</div>
 
  
<div class="some-padding"></div>
+
</script>
<div class="some-padding"></div>
+
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
            <div class="panel panel-default">
 
                <div class="panel-heading" role="tab" id="P4">
 
                    <h4 class="panel-title">
 
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P4-collapse" aria-expanded="false" aria-controls="P4-collapse">
 
<div>
 
                    <div class="col-md-11">Colony PCR</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
 
</div>                   
 
                    </a>
 
                    </h4>
 
  
                </div>
 
                <div id="P4-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P4">
 
                    <div class="panel-body">
 
<p>
 
<b>Materials:</b><br>
 
Sterile Water<br>
 
25 µL RedTaq mastermix<br>
 
1 E. coli colony<br>
 
2.5 µL of 10 µM forward primer<br>
 
2.5 µL of 10 µM reverse primer<br>
 
<br>
 
<b>Methods:</b><br>
 
<ol style="font-size:16px;">
 
<li>Add a single colony of cells to 50 µL of water. Incubate at 95C for a minute to lyse the cells.</li>
 
<li>Combine 1 µL cell lysate, 25 µL RedTaq mastermix, 2.5 µL of 10 µM forward primer, 2.5 µL of 10 µM reverse primer, and sterile water up to 50 µL. <br>
 
<i>Note: It is important to add RedTaq Master Mix last in order to prevent primer
 
degradation caused by the 3 ́→ 5 ́ exonuclease activity</i></li>
 
<li>Incubate in the thermocycler -  Taq has a lower optimum temperature than Phusion.</li>
 
  
</ol>
 
  
<p><br><b>Thermocycling</b><br>
 
The PCR machine should be set to run the following steps: </p>
 
<table class="table table-bordered table-striped">
 
<thead>
 
        <tr>
 
            <th>Step</th>
 
            <th>Temperature (°C)</th>
 
            <th>Time</th>
 
         
 
        </tr>
 
    </thead>
 
    <tbody>
 
        <tr>
 
            <td>Initial denaturation</td>
 
            <td>98</td>
 
            <td>30 seconds</td>
 
        </tr>
 
        <tr>
 
            <td>25-35 cycles</td>
 
            <td>98 (denaturation)<br>
 
                45-72 (annealing) <a href="#Note1">see Note 1</a><br>
 
                68 (extension)</td>
 
            <td>5-10 seconds <br>
 
                10-30 seconds<br>
 
                15-30 seconds per kb</td>
 
        </tr>
 
        <tr>
 
            <td>Final extension</td>
 
            <td>72</td>
 
            <td>5-10 minutes</td>
 
        </tr>
 
        <tr>
 
            <td>Hold</td>
 
            <td>4</td>
 
            <td>Indefinitely</td>
 
        </tr>
 
  
    </tbody>
+
<style>
</table>
+
<p>Note: If loading on a gel, the RedTaq mix contains loading dye, so don’t add anything else.</p>  
+
  
  </div>
 
</div>
 
</div>
 
  
<div class="some-padding"></div>
 
<div class="some-padding"></div>
 
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
            <div class="panel panel-default">
+
                <div class="panel-heading" role="tab" id="P5">
+
/* Clear the default wiki settings */
                    <h4 class="panel-title">
+
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P5-collapse" aria-expanded="false" aria-controls="P5-collapse">
+
#home_logo, #sideMenu { display:none; }
<div>
+
#sideMenu, #top_title, .patrollink  {display:none;}
                    <div class="col-md-11">Preparation of LB Broth, Agar, and Glycerol Stocks</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
</div>                   
+
body {background-color: white; }
                    </a>
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
                    </h4>
+
  
                </div>
+
                <div id="P5-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P5">
+
                    <div class="panel-body">
+
 +
/**************************************************************** MENU ***************************************************************/
 +
/* Wrapper for the menu */
 +
.igem_2017_menu_wrapper {
 +
width: 15%;
 +
height:100vh;
 +
position:fixed;
 +
right:0%;
 +
padding:0px;
 +
float:right;
 +
border-left: 1px solid #d3d3d3;
 +
background-color:#dddddd;
 +
text-align:left;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
  
<p>
+
/* this hides the scrollbar to keep view consistency */
<specialh3>LB Broth</specialh3><br>
+
.igem_2017_menu_wrappe::-webkit-scrollbar {
<b>Materials:</b><br>
+
display: none;
25 g LB broth (powder)<br>
+
}
1 Litre Purified Water<br>
+
<br>
+
<b>Methods:</b><br>
+
/* styling for links in the menu, removes the line under text */
<ol style="font-size:16px;">
+
.igem_2017_menu_wrapper a { 
<li>Add 25g LB broth to 1 litre purified water</li>
+
text-decoration: none;  
<li>Autoclave</li>
+
}
</ol>
+
</p>
+
  
<p>
 
<specialh3>LB Agar</specialh3><br>
 
<b>Materials:</b><br>
 
37 g LB Agar (powder)<br>
 
1 Litre Purified Water<br>
 
<br>
 
<b>Methods:</b><br>
 
<ol style="font-size:16px;">
 
<li>Add 37g LB Agar to 1 litre purified water</li>
 
<li>Autoclave</li>
 
</ol>
 
</p>
 
  
<p>
+
/* styling for the images in the menu */
<specialh3>Glycerol Stocks</specialh3><br>
+
.igem_2017_menu_wrapper img {
<b>Materials:</b><br>
+
width: 100%;
500µl glycerol (80%)<br>
+
}
500µl overnight culture in LB<br>
+
<br>
+
<b>Methods:</b><br>
+
<ol style="font-size:16px;">
+
<li>Add 500µl glycerol (80%) to 1.5ml eppendorf tube</li>
+
<li>Add 500µl overnight culture in LB</li>
+
<li>Store at -80°C</li>
+
</ol>
+
</p>
+
  </div>
+
</div>
+
</div>
+
  
<div class="some-padding"></div>
+
/* styling for the menu buttons */
<div class="some-padding"></div>
+
.igem_2017_menu_wrapper .menu_button {
 +
width: 100%;
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
font-weight: bold;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
            <div class="panel panel-default">
 
                <div class="panel-heading" role="tab" id="P6">
 
                    <h4 class="panel-title">
 
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P6-collapse" aria-expanded="false" aria-controls="P6-collapse">
 
<div>
 
                    <div class="col-md-11">DNA Gel Electrophoresis</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
 
</div>
 
                    </a>
 
                    </h4>
 
  
                </div>
+
.igem_2017_menu_wrapper .menu_bottom_padding {
                <div id="P6-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P6">
+
width: 100%;
                    <div class="panel-body">
+
height: 30px;
<p>
+
float:left;
<b>Materials:</b><br>
+
}
Agarose Powder<br>
+
TAE buffer<br>
+
Gel mould<br>
+
5-10 µL SybrSafe<br>
+
Gel Tank<br>
+
8-10 µL DNA ladder<br>
+
DNA loading dye<br>
+
<br>
+
<b>Methods:</b><br>
+
<ol style="font-size:16px;">
+
<li>Prepare 8% w/v solution of agarose powder in 1/10 TAE buffer (e.g. 0.8g agarose powder in 100 mL buffer) using a conical flask</li>
+
<li>Heat the mixture until agarose is completely dissolved. Do not let the solution boil.</li>
+
<li>Pour the solution into a gel mould</li>
+
<li>Add 5-10 µL SybrSafe® to the solution. Make sure there are no bubbles in the solution.</li>
+
<li>Allows the solution to set (approx 15-20 minutes)</li>
+
<li>Transfer the agarose gel to a tank, remove the comb and apply:
+
<ul>
+
<li>8-10 µL of the DNA ladder </li>
+
<li>DNA samples with the corresponding amount of DNA loading dye (6X)</li>
+
</ul></li>
+
<li>Run the gel for 45-60 minutes at 100V</li>
+
  
</ol>
+
.menu_button.direct_to_page {
 +
padding-left: 36px;
 +
}
  
  
  </div>
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
</div>
+
width:10%;
</div>
+
float:left;
 +
}
  
<div class="some-padding"></div>
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
<div class="some-padding"></div>
+
content: "+"
 +
}
 +
 +
.open::before {
 +
content: "-" !important; 
 +
}
 +
 +
 +
 +
/* styling for the menu buttons on hover */
 +
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
color:#ffffff;
 +
}
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
/* styling for the menu button when it is the current page */
            <div class="panel panel-default">
+
.current_page {
                <div class="panel-heading" role="tab" id="P7">
+
background-color:#7fc1f7  !important;
                    <h4 class="panel-title">
+
color:#5e5f5f !important;
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P7-collapse" aria-expanded="false" aria-controls="P7-collapse">
+
}
              <div>
+
                    <div class="col-md-11">Ligation</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>
+
                    </a>
+
                    </h4>
+
  
                </div>
 
                <div id="P7-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P7">
 
                    <div class="panel-body">
 
<p>
 
<b>Materials:</b><br>
 
Microcentrifuge tube<br>
 
Ice<br>
 
1 µL T4 DNA Ligase<br>
 
2 µL 10X T4 DNA ligase buffer<br>
 
50ng Vector Plasmid<br>
 
Insert DNA<br>
 
Sterile water<br>
 
<br>
 
<b>Methods:</b><br>
 
<ol style="font-size:16px;">
 
<li>Calculate volumes of vector and insert DNA required using NEBioCalculator (<a href="http://nebiocalculator.neb.com/#!/ligation" > http://nebiocalculator.neb.com/#!/ligation</a> - required molar ratio of 1:3::vector:insert)</li>
 
<li>Add vector plasmid, insert DNA, T4 DNA ligase and T4 DNA ligase buffer to the microcentrifuge tube on ice (add T4 DNA ligase last)</li>
 
<li>Make reaction up to 20 µL using sterile water</li>
 
<li>Incubate at room temperature for 30 - 60 min for sticky ends or  1-2 hours for blunt ends</li>
 
</ol>
 
  
  </div>
+
/* styling for the submenu buttons */
</div>
+
.igem_2017_menu_wrapper .submenu_button {
</div>
+
width: 100%;
 +
padding: 10px 0px 10px 34px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
  
<div class="some-padding"></div>
+
/* wrapper for the submenu items, they are hidden by default*/
<div class="some-padding"></div>
+
.igem_2017_menu_wrapper .submenu_wrapper {
 +
display:none;
 +
}
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
            <div class="panel panel-default">
+
.igem_2017_menu_wrapper #display_menu_control {
                <div class="panel-heading" role="tab" id="P8">
+
display:none;
                    <h4 class="panel-title">
+
text-align:center;
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P8-collapse" aria-expanded="false" aria-controls="P8-collapse">
+
}
<div>
+
                    <div class="col-md-11">Restriction Digestion (Test Digest and Assembly Digest)</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>                   
+
  
                    </a>
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
                    </h4>
+
  
                </div>
+
/* Wrapper for the content */
                <div id="P8-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P8">
+
.igem_2017_content_wrapper {
                    <div class="panel-body">
+
width: 81%;
<p>
+
margin: 2%;
<b>Materials:</b><br>
+
display:block;
Restriction Enzyme:  
+
float:left;
<a href"https://www.neb.com/tools-and-resources/interactive-tools/enzyme-finder?searchType=7&recognitionSite=&matchType=1">NEB enzyme finder</a> used to see which restriction enzymes are required <br>
+
background-color:white;
10X buffer: <a href="https://www.neb.com/tools-and-resources/interactive-tools/double-digest-finder">NEB double digest finder</a> used to see which buffers are required for the particular restriction enzymes <br>
+
font-family:Tahoma, Geneva, sans-serif;
Plasmid DNA<br>
+
}
Sterile water<br>
+
<br>
+
<b>Methods:</b><br>
+
  
<table class="table table-bordered table-striped">
 
<thead>
 
        <tr>
 
            <th>Component</th>
 
            <th>Test digest<br>
 
Double digestion (20 µL, for construct analysis)
 
</th>
 
            <th>Assemble digest
 
<br>Double digestion (20-50 µL, for gene assembly)</th>
 
         
 
        </tr>
 
    </thead>
 
    <tbody>
 
        <tr>
 
            <td>Sterile water</td>
 
            <td>to 20 µL</td>
 
            <td>to 50 µL</td>
 
        </tr>
 
        <tr>
 
            <td>10X buffer</td>
 
            <td>2 µL</td>
 
            <td>2-5 µL</td>
 
        </tr>
 
        <tr>
 
            <td>Plasmid DNA</td>
 
            <td>~200 ng for test digest,
 
(DNA mass is variable dependent on insert size.<br> Smallest digestion fragment mass should be > 50ng)</td>
 
            <td>1,000 -2,000 ng</td>
 
        </tr>
 
        <tr>
 
            <td>Restriction enzyme</td>
 
            <td>0.5 µL + 0.5 µL</td>
 
            <td>1 µL + 1 µL</td>
 
        </tr>
 
  
    </tbody>
+
/********************************* HTML STYLING  *********************************/
</table>
+
<ol style="font-size:16px;">
+
<li>Set up the reaction following the instruction in the table above , depending on whether test digest or assembly digest is being performed.</li>
+
<li> Incubate digestion reaction at 37°C:
+
    <ol>
+
    <li>30 min for Test digest</li>
+
    <li>2-3 hours or overnight for Assembly digest</li>
+
    </ol>
+
</li>
+
<li>Perform heat deactivation at 80°C for 20 minutes, if not running on a gel at the end of incubation. </li>
+
</ol>
+
  
  </div>
+
/* styling for the titles h1 h2 */
</div>
+
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
</div>
+
padding:5px 15px;
 +
border-bottom: 0px;
 +
color: #3399ff;
 +
}
  
<div class="some-padding"></div>
 
<div class="some-padding"></div>
 
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
/* styling for the titles  h3 h4 h5 h6*/
            <div class="panel panel-default">
+
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
                <div class="panel-heading" role="tab" id="P9">
+
padding:5px 15px;
                    <h4 class="panel-title">
+
border-bottom:0px;
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P9-collapse" aria-expanded="false" aria-controls="P9-collapse">
+
color: #000000; 
<div>
+
}
                    <div class="col-md-11">Growth Characterisation</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>
+
                    </a>
+
                    </h4>
+
  
                </div>
 
                <div id="P9-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P9">
 
                    <div class="panel-body">
 
<p>
 
<b>Materials:</b><br>
 
Microcentrifuge tube<br>
 
Media of choice<br>
 
Overnight Culture of Cells<br>
 
96 well plate<br>
 
Plate reader<br>
 
<br>
 
<b>Methods:</b><br>
 
<ol style="font-size:16px;">
 
<li>Dilute overnight cultures to 0.1 OD. <b>Don’t forget the media control.</b></li>
 
<li>Seed your cells in the 96 well plate at 100μL per well.</li>
 
<li>Make reaction up to 20 µL using sterile water</li>
 
<li>Set the plate reader for 600OD and run it for 12 hours for bacteria or 24 hours plus for yeast
 
</li>
 
</ol>
 
  
  </div>
+
/* font and text */
</div>
+
.igem_2017_content_wrapper p {
 +
padding: 0px 15px;
 +
font-size: 13px;
 +
}
 +
 
 +
/* Links */
 +
.igem_2017_content_wrapper a {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color: #3399ff;
 +
color:  #3399ff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 
 +
/* hover for the links */
 +
.igem_2017_content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 
 +
/* non numbered lists */
 +
.igem_2017_content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 
 +
/* numbered lists */
 +
.igem_2017_content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 
 +
/* Table */
 +
.igem_2017_content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 
 +
/* table cells */
 +
.igem_2017_content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 
 +
/* table headers */
 +
.igem_2017_content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 
 +
 
 +
/**********************************LAYOUT CLASSES **********************************/
 +
 
 +
/* general class for column divs */
 +
.igem_2017_content_wrapper .column  {
 +
padding: 10px 0px;
 +
float:left;
 +
}
 +
 
 +
/* class for a full width column */
 +
.column .full_size {
 +
width:100%;
 +
}
 +
 
 +
/* styling for images in a full width column*/
 +
.column.full_size img {
 +
width:97%;
 +
padding: 10px 15px;
 +
}
 +
 
 +
/* class for a half width column */
 +
.column.half_size {
 +
width: 50%;
 +
}
 +
/* styling for images in a half width column*/
 +
.column.half_size img {
 +
width: 94.5%;
 +
padding: 10px 15px;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/********************************* SUPPORT CLASSES ********************************/
 +
 
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 +
}
 +
 +
 +
/* adds extra spacing when clearing content */
 +
.igem_2017_content_wrapper  .clear.extra_space {
 +
height: 30px;
 +
}
 +
 
 +
 
 +
/* highlight class, makes content slightly smaller */
 +
.igem_2017_content_wrapper .highlight {
 +
margin: 0px 15px;
 +
padding: 15px 0px;
 +
}
 +
 
 +
 
 +
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 +
}
 +
 
 +
/* highlight with decoration blue line on top */
 +
.igem_2017_content_wrapper .highlight.blue_top {
 +
    border-top: 4px solid #3399ff;
 +
}
 +
 
 +
/* highlight with a full blue border decoration */
 +
.igem_2017_content_wrapper .highlight.blue_border {
 +
    border: 4px solid  #3399ff;
 +
}
 +
 
 +
 
 +
/* button class */
 +
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #ffffff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
 +
 
 +
/* styling for button on hover */
 +
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 +
    color: #000000;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
 
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
 
 +
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
 
 +
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size  {width:100%; }
 +
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
.highlight {padding:15px 5px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
#menu_content { display:none;}
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 +
}
 +
 
 +
 
 +
 +
 +
/* special class that the system uses to make sure the team wants a page to be evaluated */
 +
.judges-will-not-evaluate {
 +
    width: 96.6%;
 +
  margin: 5px 15px;
 +
  display: block;
 +
border: 4px solid #3399ff;
 +
    font-weight: bold;
 +
}
 +
 +
</style>
 +
 
 +
 
 +
<style>
 +
@import url('https://fonts.googleapis.com/css?family=Montserrat|Nixie+One');
 +
</style>
 +
 
 +
<style>
 +
 
 +
p {width: 50%; margin-left: auto; margin-right: auto; font-family: 'Montserrat'; font-size: 14px; color: #454851;}
 +
h2 {font-family: 'Quicksand', sans-serif; font-size: 45px; padding-top: 30px; color:#00E0FF; padding-top: 100px;}
 +
 
 +
.nav {overflow: hidden;background-color: white;}
 +
.nav a {
 +
  float: left;
 +
  align: left;
 +
  color:#454851;
 +
  text-align: center;
 +
  margin-left: 20px;
 +
  padding: 16px 16px;
 +
  text-decoration: none;
 +
  font-family: 'Montserrat';
 +
  font-size: 16px;}
 +
.nav a:hover {background-color:  white; color:#00E0FF;}
 +
.nav a.active {background-color: white; color: #454851;}
 +
.nav .icon {display: none;}
 +
 
 +
 
 +
 
 +
</style>
 +
</head>
 +
 
 +
<body>
 +
 
 +
<div class="container nav">
 +
<div class="row">
 +
<div class="threecol">
 +
 +
<div style="float:right" "margin-top: 30px;">
 +
<a href="/team:Delaware/attributions">Attributions</a>
 +
 
</div>
 
</div>
  
<div class="some-padding"></div>
+
<div style="float:right">
<div class="some-padding"></div>
+
<a href="/team:Delaware/humanpractices">Human Practices</a>
 +
</div>
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
<div style="float:right">
            <div class="panel panel-default">
+
<a href="/team:Delaware/safety">Safety</a>
                <div class="panel-heading" role="tab" id="P10">
+
</div>
                    <h4 class="panel-title">
+
 
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P10-collapse" aria-expanded="false" aria-controls="P10-collapse">
+
  <div style="float:right">
<div>
+
<a href="/team:Delaware/parts">Parts</a>
                    <div class="col-md-11">Cell Sorting for Co-Culture Characterisation</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>
 +
 
 +
<div style="float:right">
 +
<a href="/team:Delaware/results">Results</a>
 +
</div>
 +
 
 +
  <div style="float:right">
 +
<a href="/team:Delaware/Experiments">Experiments</a>
 +
</div>
 +
 
 +
    <div style="float:right">
 +
<a href="/team:Delaware/design">Design</a>
 +
</div>
 +
 
 +
<div style="float:right">
 +
<a href="/team:Delaware/description">Description</a>
 +
</div>
 +
 
 +
<div style="float:right">
 +
<a href="/team:Delaware/notebook">Notebook</a>
 +
</div>
 +
 
 +
        <div style="float:right">
 +
<a href="/team:Delaware/team">Team</a>
 +
</div>
 +
 
 +
</div>
 +
        <div class="onecol">
 +
<a href="/Team:Delaware"><img src="https://static.igem.org/mediawiki/2017/1/19/T--delaware--logonew.jpg" height="150"/></a>
 +
</div>
 +
       
 +
        </div>
 +
       
 +
</div>
 
</div>
 
</div>
                    </a>
 
                    </h4>
 
  
                </div>
+
<div style= "background-color: white;">
                <div id="P10-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P10">
+
<center>
                    <div class="panel-body">
+
<h2>Notebook</h2>
<p>
+
 
<b>Materials:</b><br>
+
<div>
Microcentrifuge tube<br>
+
<object data="https://static.igem.org/mediawiki/2017/b/bf/T--delaware--notebook-3.pdf" width="50%" height="900px">  
Media of choice<br>
+
  <p>It appears you don't have a PDF plugin for this browser.
Overnight Culture of Cells<br>
+
  No biggie... you can <a target="_blank" href="https://static.igem.org/mediawiki/2017/b/bf/T--delaware--notebook-3.pdf">click here to
96 well plate<br>
+
  download the PDF file.</a></p>
Flow Cytometer<br>
+
</object>
PBS<br>
+
<br>
+
<b>Methods:</b><br>
+
<ol style="font-size:16px;">
+
<li>Use Flowjo to predefine the gates for the Flow cytometer. This allows the cells within the co culture to be counted based on size.</li>
+
<li>Dilute the Cultures to 1 OD (don’t forget the media control) and culture together at desired inoculation ratio</li>
+
<li>Set up samples in triplicate form on a 96 well plate. Dilute 10 fold and 100 fold in PBS.</li>
+
<li>Incubate Cells and take samples at desired time points to obtain growth curves</li>
+
</ol>
+
  
  </div>
 
 
</div>
 
</div>
 +
</center>
 +
</body>
 
</div>
 
</div>
  
<div class="some-padding"></div>
+
<style>
<div class="some-padding"></div>
+
.footer-distributed{
 +
background-color: white;
 +
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
 +
box-sizing: border-box;
 +
width: 100%;
 +
text-align: left;
 +
padding: 45px 50px;
 +
padding-top: 80px;
 +
}
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
.footer-distributed .footer-left p{
            <div class="panel panel-default">
+
        color:  #52658F;
                <div class="panel-heading" role="tab" id="P11">
+
font-size: 14px;
                    <h4 class="panel-title">
+
margin: 0;
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P11-collapse" aria-expanded="false" aria-controls="P11-collapse">
+
}
 +
.footer-distributed .footer-right p{
 +
        color:  #52658F;
 +
font-size: 14px;
 +
margin: 0;
 +
}
  
<div>
+
/* Footer links */
                    <div class="col-md-11">Quorum Characterisation Experiments</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>                   
+
                    </a>
+
                    </h4>
+
  
                </div>
+
.footer-distributed p.footer-links{
                <div id="P11-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P11">
+
font-size:18px;
                    <div class="panel-body">
+
font-weight: bold;
<p>
+
color:  white;
<b>Materials:</b><br>
+
margin: 0 0 10px;
Replica plate or glycerol stock of cells<br>
+
padding: 0;
Appropriate antibiotic<br>
+
}
LB broth<br>
+
96 well plate<br>
+
AHLs (at concentrations of 10pM, 100pM, 1nM, 10nM, 100nM, 1µM, 10µM and 100µM)<br>
+
<br>
+
<b>Methods:</b><br>
+
<ol style="font-size:16px;">
+
<li>Grow overnight culture of cells, either from replica plate or glycerol stock (see overnight culture protocol)
+
</li>
+
<li>In the morning, add 100 µL of the cell suspension to 10 mL LB and 10µL of antibiotic</li>
+
<li>Grow cells in incubator for 3-4 hours at 200rpm and 37°C</li>
+
<li>Blank spectrophotometer with 1mL LB and measure OD of cells (dilute 10x in LB)</li>
+
<li>Make up suspension of cells at OD 0.05</li>
+
<li>Add 100µL of cells to each well in the 96-well plate using the block-filler machine</li>
+
<li>Using the multi-channel pipette add 2µL of intended AHL to each well, add samples in triplicate form
+
</li>
+
<li>Using the multi-channel pipette add 2µL of intended AHL to each well, add samples in triplicate form
+
</li>Run on plate-reader for 12 hours, with fluorescence and absorbance measurements taken every 15 minutes (set plate reader to 37°C and 500rpm shaking)
+
</li>
+
</ol>
+
  
  </div>
 
</div>
 
</div>
 
  
<div class="some-padding"></div>
+
.footer-distributed p.footer-links a{
<div class="some-padding"></div>
+
display:inline-block;
 +
line-height: 1.8;
 +
text-decoration: none;
 +
color:  inherit;
 +
}
  
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
.footer-distributed .footer-right{
            <div class="panel panel-default">
+
float: right;
                <div class="panel-heading" role="tab" id="P12">
+
margin-top: 6px;
                    <h4 class="panel-title">
+
max-width: 400px;
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#P12-collapse" aria-expanded="false" aria-controls="P12-collapse">
+
}
<div>
+
                    <div class="col-md-11">PCR Purification, Gel Extraction & Miniprep</div><div class="col-md-1"><i class="fa fa-arrow-down fa-10" aria-hidden="true"></i></div>
+
</div>                 
+
                    </a>
+
                    </h4>
+
  
                </div>
 
                <div id="P12-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="P12">
 
                    <div class="panel-body">
 
<p>
 
<b>PCR purification</b> was performed according to the QIAquick PCR Purification Kit<br>
 
<b>Gel extraction</b> was performed according to the QIAquick Gel Extraction Kit<br>
 
<b>Minipreps</b> were carried out according to the QIAprep Spin Miniprep Kit<br>
 
  
  
  </div>
+
.footer-distributed .footer-right a{
</div>
+
display: inline-block;
</div>
+
width: 50px;
 +
height: 35px;
 +
background-color: white;
 +
border-radius: 2px;
  
</div>
+
font-size: 20px;
</section>
+
color: #52658F;
 +
text-align: center;
 +
line-height: 35px;
  
 +
margin-left: 3px;
 +
}
  
 +
.sponsors {
 +
            margin: 2.5px;
 +
            width: 125px;
 +
        }
 +
 +
/* If you don't want the footer to be responsive, remove these media queries */
 +
 +
@media (max-width: 600px) {
 +
 +
.footer-distributed .footer-left,
 +
.footer-distributed .footer-right{
 +
text-align: center;
 +
}
 +
 +
.footer-distributed .footer-right{
 +
float: none;
 +
margin: 0 auto 20px;
 +
}
 +
 +
.footer-distributed .footer-left p.footer-links{
 +
line-height: 1.8;
 +
}
 +
}
 +
</style>
 +
 +
<footer class="footer-distributed">
 +
 +
<div class="footer-right">
 +
                <a target="_blank" href="ailto:igem.imperial2016@gmail.com"><i class="fa fa-envelope-o fa-2x"></i></a> 
 +
    <a target="_blank" href="https://www.facebook.com/2016imperialigem/"><i class="fa fa-facebook fa-2x"></i></a>
 +
<a target="_blank" href="https://twitter.com/imperialigem"><i class="fa fa-twitter fa-2x"></i></a>
 +
<a target="_blank" href="https://github.com/IC-iGEM-2016?tab=repositories"><i class="fa fa-github fa-2x fa-fw"></i></a>
 +
<p> Email: igem.ud@gmail.com </p>
 +
</div>
 +
 +
 +
<div class="footer-left">
 +
 +
<p class="footer-links">
 +
<a target="_blank" href="http://www.dbi.udel.edu">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/2/2f/T--delaware--dbi.png">
 +
    </a>
 +
 +
<a target="_blank" href="https://www.whitedoglabs.com">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/d/d9/T--delaware--whitedog22.png">
 +
    </a>
 +
 +
<a target="_blank" href="http://www.idtdna.com/site">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/e/e2/T--delaware--idt.png">
 +
    </a>
 +
<a target="_blank" href="https://igem.org/Main_Page">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/5/54/T--delaware--igemlogo.png">
 +
    </a>
 +
                             
 +
                                        <a target="_blank" href="https://www.neb.com/?gclid=EAIaIQobChMIrf7Xqczs1QIViySBCh1auAE5EAAYASAAEgKcl_D_BwE">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/d/de/T--delaware--newengland22.png">
 +
    </a> 
 +
<a target="_blank" href="http://bioinformatics.udel.edu">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/0/0e/T--delaware--cbcblogo.png">
 +
    </a>
 +
            <a target="_blank" href="http://www.udel.edu">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/9/9d/T--delaware--UDlogo.png">
 +
    </a>
 +
 +
 +
</p>
 +
 +
 +
</div>
 +
 +
</footer>
  
</body>
 
<img class="backTop" onclick="document.documentElement.scrollTop = document.body.scrollTop = 480;" src="https://static.igem.org/mediawiki/2016/1/19/T--Imperial_College--BackTop.png" height="40px" width="40px">
 
 
</html>
 
</html>
{{:Team:Imperial_College/Templates/Footer}}
 

Latest revision as of 18:52, 17 October 2017

Notebook

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.