Difference between revisions of "Team:EPF Lausanne/Test/css"

 
(208 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{:Team:EPF_Lausanne/Test/css}}
+
<html>
−
{{:Team:EPF_Lausanne/Test/Top_Nav}}
+
<head> <title>EPFL 2015 iGEM bioLogic Logic Orthogonal gRNA Implemented Circuits</title>
−
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
+
<!-- Latest compiled and minified CSS -->
−
<head>
+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 +
 
 
<style type="text/css">
 
<style type="text/css">
−
ul.nav-pills {
+
 
−
      top: 20px;
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
−
      position: relative;
+
 
 +
 
 +
#top_menu_under {
 +
    border-style: none;
 
}
 
}
−
table, th, td {
+
#contentSub, #footer-box, #catlinks, #search-controls,
−
     border: 1px solid grey;
+
#p-logo, .printfooter, .firstHeading, .visualClear {
−
     border-collapse: collapse;
+
     display: none;
−
}
+
}
−
th, td {
+
#globalWrapper, #content {
−
     padding: 10px;
+
    width: 100%;
 +
    height: 100%;
 +
     border: 0px;
 +
    background-color: transparent;
 +
    margin: 0px;
 +
     padding: 0px;
 +
    font-size: 100%;
 
}
 
}
−
</style>
 
−
</head>
 
  
−
<div class="classy-bar">
+
html {height: 100%;}
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-md-12 text-center">
+
−
<h2>Protocols</h2>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
<!--Protocols have to be added here-->
+
body {
−
<body id="Content" data-spy="scroll" data-target=".scrollspy" data-offset="20" data-offset-bottom="1000">
+
position: relative;
 +
font-family: 'Open Sans', sans-serif;
 +
background-color: rgba(16,151,151,0.01);
 +
  height=100%;
 +
}
 +
a {
 +
  text-decoration: none !important;
 +
  -webkit-transition: color 200ms ease-in-out;
 +
  -moz-transition: color 200ms ease-in-out;
 +
  -o-transition: color 200ms ease-in-out;
 +
  transition: color 200ms ease-in-out;
 +
}
 +
a:hover {
 +
  color: none;
 +
}
 +
.center {
 +
    width: 100%;
 +
    text-align: center;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6,
 +
p { border-bottom: none;}
  
−
<div class="prot-section">
+
.prot-section figure {
−
<div class="row">
+
  border: 1px solid black;
−
<div class="col-md-3 scrollspy">
+
  padding: 5px;
−
<ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
+
}
−
<li class="active"><a href="#agarosegel">Agarose Gel</a></li>
+
.interlab-part {
−
                <li><a href="#aminoacidsolution">Amino Acid Solution</a></li>
+
  background-color: rgba(16, 151, 152, 0.15);
−
                <li><a href="#colonypcr">Colony PCR</a></li>
+
  border-radius: 10px;
−
                <li><a href="#competentcells">Competent Cell Preparation</a></li>
+
}
−
                <li><a href="#gibsonassembly">Gibson Assembly</a></li>
+
.interlab-part h2 {
−
                <li><a href="#glycerolstock">Glycerol Stock</a></li>
+
  color: black !important;
−
                <li><a href="#lbmedium">Lysogeny Broth (LB) Medium</a></li>
+
  border-bottom: none !important;
−
                <li><a href="#lbagar">Lysogeny Broth (LB) Agar Plates</a></li>
+
}
−
                <li><a href="#miniprep">Miniprep</a></li>
+
.interlab-part img {
−
                <li><a href="#phusionpcr">Polymerase Chain Reaction (PCR)</a>
+
  margin-left: auto;
−
                <ul class="nav">
+
  margin-right: auto;
−
                <li><a href="#phusionpcr">Phusion PCR</a></li>
+
  display: block;
−
                    <li><a href="#taqpcr">Taq PCR</a></li>
+
}
−
                    <li><a href="#Q5pcr">Q5 PCR</a></li>
+
.interlab-part p {
−
                </ul>
+
  text-align: center !important;
−
            </li>
+
}
−
                <li><a href="#pcrpurification">PCR Product Purification</a></li>
+
.interlab-text figure{
−
                <li><a href="#pegliac">PEG/LiAc Solution</a></li>
+
  border: none !important;
−
                <li><a href="#restriction">Restriction Digest</a></li>
+
}
−
                <li><a href="#mutagenesis">Site-directed mutagenesis</a></li>
+
/* ==========================================================================
−
                <li><a href="#sdmedium">SD Medium</a></li>
+
    Human practices
−
                <li><a href="#tae">Tris-Acetate-EDTA (TAE) buffer 50X</a></li>
+
  ========================================================================== */
−
                <li><a href="#transformation">Transformation</a></li>
+
.human-part p {
−
            </ul>
+
  text-align: justify;
−
</div>
+
} 
−
<div class="col-md-9">
+
/* ==========================================================================
−
<!-- AGAROSE GEL -->
+
    Header
−
<section id="agarosegel" class="panel">   
+
  ========================================================================== */
−
                <h1>Agarose Gel</h1>
+
.dropdown:hover .dropdown-menu {
−
                <h2>Materials</h2>
+
  display: block;
−
                <ul>
+
  min-width: 100%;
−
                    <li>1X TAE</li>
+
  left: -22px;
−
                    <li>Agarose</li>
+
}
−
                    <li>Gel Red</li>
+
.navbar {
−
                    <li>DNA samples</li>
+
  margin-bottom: 0;
−
                    <li>6X loading dye</li>
+
  background-color: rgba(17,151,153, 1.0);
−
                    <li>Nuclease-free water</li>
+
  border-style: none;
−
                </ul>
+
  padding-top: 10px;
−
                <h2>Procedure</h2>
+
}
−
                <ol>
+
.navbar-nav {
−
                    <li>Prepare 1.2% agarose gel for small fragments and 3% agarose gel for large fragments</li>
+
  margin: 0 auto;
−
                    <li>Mix 50 mL 1X TAE and 0.6 g (1.2%) or 1.5 g (3%) agarose</li>
+
  display: table;
−
                    <li>Melt in microwave until agarose has melted (about 50 seconds)</li>
+
  table-layout: auto;
−
                    <li>Add 1.3 μL (1.2%) or 1.5 μL (3%) Gel Red</li>
+
  float: none;
−
                    <li>Pour solution into agarose gel mold with comb</li>
+
  width: 100%;
−
                    <li>Let set for 20 minutes or until solid</li>
+
  border-style: none;
−
                    <li>Place gel in 1X TAE and remove comb</li>
+
}
−
                    <li>Load samples of 200 ng (or 2  μL) DNA mixed with 2  μL 6X loading dye and nuclease-free water up to 12  μL</li>
+
.navbar-nav > li {
−
                    <li>Run gel at 100-120 Volts for 40-50 minutes (1.2%) or 80 Volts for 2 hours (3%)</li>
+
  display: table-cell;
−
                    <li>Take a picture of the gel at the UV detector</li>
+
  float: none;
−
                </ol>
+
  text-align: center;
−
            </section>
+
  vertical-align: middle;
 +
  color: white;
 +
}
 +
.navbar-nav > li:hover {
 +
background-color: rgba(255,255,255, 0.3);
 +
}
 +
.navbar-nav > li > a {
 +
  color: white;
 +
  text-transform: uppercase;
 +
  font-size: 16px;
 +
}
 +
.navbar-nav > li > a:hover {
 +
  color: #fff;
 +
  background-color: #74C1C2;
 +
}
 +
.navbar-default .navbar-nav >li >a
 +
{
 +
color: white;
 +
}
 +
.navbar-default .navbar-nav > li > a:focus,
 +
.navbar-default .navbar-nav > li > a:hover {
 +
color: white;
 +
}
 +
.dropdown-menu > li > a {
 +
text-align: center;
 +
}
 +
#full-size{
 +
margin-top: 7%;
 +
    width:100%;
 +
    height: 100%;
 +
    overflow: auto;
 +
}
 +
/* ==========================================================================
 +
    Practices
 +
  ========================================================================== */
 +
.shift {
 +
  margin-left: 25%;
 +
}
 +
/* ==========================================================================
 +
    Parts
 +
  ========================================================================== */
 +
.parts a > h3 {
 +
  color: #109798;
 +
}
 +
.parts a > h3:hover {
 +
  color: #981110;
 +
}
  
−
<!-- AMINO ACID SOLUTION -->
+
/* ==========================================================================
−
            <section id="aminoacidsolution" class="panel">
+
    Home-page
−
                <h1>Amino acid solution</h1>
+
  ========================================================================== */
−
                <h2>Materials</h2>
+
#carousel-home {
−
                <ul>
+
  padding-top: 30px;
−
                    <li>Histidine-Hcl</li>
+
  box-shadow: 0px 10px 5px #888888;
−
                    <li>Uracil</li>
+
}
−
                    <li>Leucine</li>
+
.carousel-inner {
−
                    <li>Tryptophan</li>
+
  text-align: center;
−
                </ul>
+
}
−
                <h2>Procedure</h2>
+
.carousel-control.left,
−
                <table width="90%" align="center">
+
.carousel-control.right {
−
                    <tr>
+
    background-image: none;
−
                        <th>Stock concentration</th>
+
}
−
                        <th>Final concentration</th>
+
.carousel-control .icon-next,
−
                        <th>Total quantity for 50 mL</th>
+
.carousel-control .icon-prev {
−
                    </tr>
+
   color: black;
−
                    <tr>
+
}
−
                        <td>100 mM Histidine-Hcl (209 g/mol)</td>
+
−
                        <td> 20.9 g/L</td>
+
−
                        <td> 1.045 g</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>20 mM Uracil (112 g/mol)</td>
+
−
                        <td> 2.24 g/L</td>
+
−
                        <td> 0.112 g</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>100 mM Leucine (131 g/mol)</td>
+
−
                        <td> 13.1 g/L</td>
+
−
                        <td> 0.655 g</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>40 mM Tryptophan (204 g/mol)</td>
+
−
                        <td> 8.16 g/L</td>
+
−
                        <td> 0.408 g</td>
+
−
                    </tr>    
+
−
                </table>
+
−
                <ol>
+
−
                    <li>Filter and sterilize solutions</li>
+
−
                    <li>Add 8 mL per liter of selective medium or spread 500 μL on a selective plate</li>
+
−
                </ol>   
+
−
            </section>       
+
  
−
<!-- COLONY PCR -->
+
#Tour-section {
−
            <section id="colonypcr" class="panel">
+
  padding-top: 30px;
−
        <h1>Colony PCR</h1>
+
  text-align: center;
−
            <h2>Materials</h2>
+
}
−
                <ul>
+
#Welcome-section {
−
                    <li>Materials for Taq PCR (except template plasmid DNA)</li>
+
text-align: center;
−
                    <li>Petri dish with transformed colonies</li>
+
padding-top: 3%
−
                </ul>
+
}
−
            <h2>Procedure</h2>
+
#Welcome-section h1 {
−
                <ol>
+
font-size: 95px;
−
                    <li>Prepare 25 μL reactions as in Taq PCR Protocol without template DNA</li>
+
text-align: center;
−
                    <li>With a sterile tip, under the flame, scrape part of a single colony and add to PCR tubes</lili>
+
padding-bottom: 0px;
−
                    <li>Mix by pipetting up and down or flicking the reactions </li>
+
margin-bottom: 0px;
−
                    <li>Put tubes in thermocycler with cycling conditions as described in Taq PCR Protocol with a longer initial denaturation (2 - 5 minutes)</li>
+
}
−
                </ol>
+
#Welcome-section h2 {
−
            </section>
+
font-size: 20px;
 +
padding-top: 0px;
 +
margin-top: 0px;
 +
  padding-bottom: 20px;
 +
}
 +
#Welcome-section p {
 +
font-size: 18px;
 +
  padding-top: none;
 +
  text-align: justify;
 +
}
 +
#Welcome-section a {
 +
color: black;
 +
}
 +
.home-first-section h1 {
 +
padding-top: 50px;
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
font-size: 30px;
 +
color: #981110;
 +
letter-spacing: 10px;
 +
padding-bottom: 20px;
 +
}
 +
.home-first-section h2 {
 +
text-align: center;
 +
color: #981110;
 +
  font-size: 24px;
 +
font-weight: 350px;
 +
}
 +
.home-first-section p {
 +
  margin-left: 2px;
 +
  margin-right: 2px;
 +
padding-bottom: 100px;
 +
text-align: justify;
 +
font-size: 16px;
 +
color: #2F2F2F
 +
}
 +
.home-first-section a {
 +
    color: #000;
 +
}
 +
.home-first-section .panel {
 +
  padding-top : 40px;
 +
  background-color: #fdfefe;
 +
  border: 1px solid #989898;
 +
  border-radius: 10px;
 +
  height: 320px;
 +
}
 +
.home-first-section .panel:hover {
 +
  box-shadow: 5px 5px #909090;
 +
}
 +
.home-first-section .panel > p {
 +
  margin-left: 5px;
 +
  margin-right: 5px;
 +
padding-bottom: 100px;
 +
text-align: justify;
 +
font-size: 16px;
 +
color: #2F2F2F
 +
}
 +
.DNA-banner {
 +
  position: relative;
 +
  max-height: 100px;
 +
  width: 100%;
 +
  padding-top: 100px;
 +
  padding-bottom: 100px;
 +
  background: url('https://static.igem.org/mediawiki/2015/9/94/EPF_Lausanne_Banner_DNA.png.png') no-repeat top center;
 +
  background-size: cover;
 +
}
 +
/* ==========================================================================
 +
    Button
 +
  ========================================================================== */
 +
.btn {
 +
    padding: 14px 24px;
 +
    border: 0 none;
 +
    font-weight: 700;
 +
    letter-spacing: 1px;
 +
    text-transform: uppercase;
 +
}
  
−
<!-- COMPETENT CELL -->
+
.btn:focus, .btn:active:focus, .btn.active:focus {
−
            <section id="competentcells" class="panel">
+
    outline: 0 none;
−
                <h1>Competent Cell Preparation</br> <small>Based on Open Wet Ware Protocol</small></h1>
+
}
−
                <h2>Materials</h2>
+
−
                <ul>
+
−
                    <li>Bacterial overnight liquid culture</li>
+
−
                    <li>Lysogeny broth (LB) medium</li>
+
−
                    <li>CaCl2 solution, ice cold: 60 mM CaCl2, 15% glycerol, 10 mM PIPES, pH 7, filter sterilize and store at room temperature</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Subculture overnight culture 1:100 in LB medium</li>
+
−
                    <li>Incubate at 37°C with shaking until culture reaches an OD600 of 0.375</li>
+
−
                    <li>Aliquot 20 mL if the culture into chilled 50 mL tubes</li>
+
−
                    <li>Leave tubes on ice for 5 – 10 minutes</li>
+
−
                    <li>Centrifuge cells at 1600 g for 7 minutes at 4°C</li>
+
−
                    <li>Discard supernatant and resuspend pellet in 4 mL ice cold CaCl2 solution</li>
+
−
                    <li>Centrifuge cells at 1100 g for 5 minutes at 4°C</li>
+
−
                    <li>Discard supernatant and resuspend pellet in 4 mL ice cold CaCl2 solution</li>
+
−
                    <li>Keep on ice for 30 minutes</li>
+
−
                    <li>Centrifuge cells at 1100 g for 5 minutes at 4°C</li>
+
−
                    <li>Discard supernatant and resuspend pellet in 800 μL ice cold CaCl2 solution</li>
+
−
                    <li>Aliquot 100 μL of this suspension into microcentrifuge tubes</li>
+
−
                    <li>Freeze in liquid nitrogen and store at -80°C</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!-- GIBSON ASSEMBLY -->
+
.btn-primary {
−
            <section id="gibsonassembly" class="panel">
+
    background: #0099cc;
−
                <h1>Gibson Assembly</br><small> Based on NEB Gibson Assembly Protocol</small></h1>
+
    color: #ffffff;
−
            <h2>Materials</h2>
+
}
−
                <ul>
+
−
                    <li>DNA fragments</li>
+
−
                    <li>2X Gibson Assembly Mater Mix (NEB)</li>
+
−
                    <li>2X NEBuilder Positive Control (NEB)</li>
+
−
                    <li>Deionized water</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Set up following reactions on ice, adding Gibson Assembly Master Mix last:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Component</th>
+
−
                            <th>2 – 3 Fragments Assembly</th>
+
−
                            <th>4 – 6 Fragments Assembly</th>
+
−
                            <th>Positive Control</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Total Amount of Fragments</td>
+
−
                            <td>0.02 – 0.5 pmols</td>
+
−
                            <td>0.2 – 1 pmols</td>
+
−
                            <td>10 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>2X Gibson Assembly Master Mix</td>
+
−
                            <td>10 μL</td>
+
−
                            <td>10 μL</td>
+
−
                            <td>10 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Deionized water  </td>
+
−
                            <td>to 20 μL</td>
+
−
                            <td>to 20 μL</td>
+
−
                            <td>0 μL</td>
+
−
                        </tr>
+
−
                    </table>
+
−
                    <p><small>Optimized efficiency for 50 – 100 ng of vectors and 2 – 3 fold of excess inserts</small></p>
+
−
                    <li>Incubate samples at 50°C for 15 minutes (2 – 3 fragments) or for 60 minutes (4 – 6 fragments)</li>
+
−
                    <li>Store samples on ice or at -20°C until transformation</li>
+
−
                    <li>Transform competent cells following the Transformation Protocol</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!--GLYCEROL STOCK-->
+
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
−
          <section id="glycerolstock" class="panel">
+
    background: #33a6cc;
−
            <h1>Glycerol Stock</h1>
+
}
−
                <h2>Materials</h2>
+
−
                <ul>
+
−
                    <li>50% Glycerol</li>
+
−
                    <li>Bacterial overnight liquid culture</li>
+
−
                    <li>Liquid Nitrogen</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Mix 0.5 mL 50% glycerol and 0.5 mL bacterial culture</li>
+
−
                    <li>Freeze in liquid nitrogen and store at -80°C</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!-- LB MEDIUM -->
+
.btn-primary:active, .btn-primary.active {
−
            <section id="lbmedium" class="panel">
+
    background: transparent;
−
                <h1>Lysogeny Broth (LB) Medium</h1>
+
    box-shadow: none;
−
                <h2>Materials</h2>
+
}
−
                <ul>
+
.btn.outline {
−
                    <li>Tryptone</li>
+
    background: none;
−
                    <li>Yeast extract</li>
+
    padding: 12px 22px;
−
                    <li>NaCl</li>
+
}
−
                    <li>Deionized water</li>
+
.btn-primary.outline {
−
                    <li>NaOH</li>
+
    border: 2px solid #0099cc;
−
                    <li>If necessary: antibiotics</li>
+
    color: #0099cc;
−
                </ul>
+
}
−
                <h2>Procedure (for 1 L)</h2>
+
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
−
                <ol>
+
    color: #33a6cc;
−
                    <li>Dissolve 10 g tryptone, 5 g yeast extract and 10 g NaCl in 950 mL deionized water</li>
+
    border-color: #33a6cc;
−
                    <li>Adjust pH to 7 using 1 M NaOH and bring volume to 1 L</li>
+
}
−
                    <li>Autoclave</li>
+
.btn-primary.outline:active, .btn-primary.outline.active {
−
                    <li>If necessary: let medium cool to 55°C and add atibiotic</li>
+
    border-color: #007299;
−
                    <li>Store at room temperature</li>
+
    color: #007299;
−
                </ol>
+
    box-shadow: none;
−
            </section>
+
}
 +
/* ==========================================================================
 +
    Background section
 +
  ========================================================================== */
 +
.background-section h3 {
 +
  font-weight: 500;
 +
  font-size: 30px;
 +
  color: #0E6261;
 +
}
 +
.background-section h4 {
 +
  border-bottom: solid 1px;
 +
}
 +
.background-section b {
 +
  color: #0E6261;
 +
}
 +
.background-section table {
 +
  color:#303030;
 +
font-size:12px;
 +
background:#eaebec;
 +
border:#ccc 1px solid;
 +
  margin-left: auto;
 +
  margin-right: auto;
  
−
<!-- LB AGAR -->
+
-moz-border-radius:3px;
−
            <section id="lbagar" class="panel">
+
-webkit-border-radius:3px;
−
                <h1>Lysogeny Broth (LB) Agar Plates</h1>
+
border-radius:3px;
−
            <h2>Materials</h2>
+
−
                <ul>
+
−
                    <li>Tryptone</li>
+
−
                    <li>Yeast extract</li>
+
−
                    <li>NaCl</li>
+
−
                    <li>Deionized water</li>
+
−
                    <li>NaOH</li>
+
−
                    <li>Agar</li>
+
−
                    <li>If necessary: antibiotics</li>
+
−
                    <li>Petri dishes</li>
+
−
                </ul>
+
−
            <h2>Procedure (for 1 L, ie. about 50 plates)</h2>
+
−
                <ol>
+
−
                    <li>Dissolve 10 g tryptone, 5 g yeast extract and 10 g NaCl in 950 mL deionized water</li>
+
−
                    <li>Adjust pH to 7 using 1 M NaOH and bring volume to 1 L</li>
+
−
                    <li>Add 15 g agar
+
−
                    <li>Autoclave</li>
+
−
                    <li>If necessary: let medium cool to 55°C and add atibiotic</li>
+
−
                    <li>Pour into petri dishes (about 20 mL per dish) and let set</li>
+
−
                    <li>Invert and store at 4°C</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!-- MINIPREP -->
+
-moz-box-shadow: 0 1px 2px #d1d1d1;
−
            <section id="miniprep" class="panel">       
+
-webkit-box-shadow: 0 1px 2px #d1d1d1;
−
            <h1>Miniprep</br> <small>With QIAprep Spin Miniprep Kit (QIAGEN)</small></h1>
+
box-shadow: 0 1px 2px #d1d1d1;
−
                <h2>Materials</h2>
+
}
−
                <ul>
+
.background-section table th {
−
                    <li>Bacterial overnight liquid cultures (1 - 5 mL) </li>
+
  color:#fff;
−
                    <li>QIAprep Spin Miniprep Kit </li>
+
  text-shadow: 0.5px 0.5px 0px #999999;
−
                </ul>
+
−
                   
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Pellet 1 -5 mL bacterial culture by centrifugation at more than 8000 rpm for 3 minutes</li>
+
−
                    <li>Resuspend pelleted bacterial cells in 250 μL P1 buffer and transfer to a microcentrifuge tube</li>
+
−
                    <li> Add 250 μL P2 buffer and mix by inverting tube 4 – 6 times</li>
+
−
                    <li>Add 350 μL N3 buffer and mix by inverting tube 4- 6 times</li>
+
−
                    <li>Centrifuge for 10 min at 13000 rpm</li>
+
−
                    <li>Apply supernatant to the QIAprep spin column by pipetting, centrifuge for 30 – 60 seconds and discard flow-through</li>
+
−
                    <li>Wash the QIAprep spin column by adding 0.5 mL PB buffer, centrifuge for 30 – 60 seconds and discard flow-through</li>
+
−
                    <li>Wash the QIAprep spin column by adding 0.75 mL PE buffer, centrifuge for 30 – 60 seconds and discard flow-through</li>
+
−
                    <li>Centrifuge for 1 minute to remove residual wash buffer</li>
+
−
                    <li> Elute DNA by placing QIAprep column in a clean 1.5 mL microcentrifuge tube and adding 50 μL EB buffer or water (or less for higher concentration). Let stand for 1 minute and centrifuge for 1 minute</li>
+
−
                </ol>
+
  
−
                <h2>Comments</h2>
+
padding:5px 5px 2px 5px;
−
                <p>With low copy plasmid it is often difficult to obtain high concentrations (needed for sequencing). In these cases it's possible to proceed as follows: culture bacteria in 5 x 7mL tubes of LB medium and perform the miniprep for each tube separately until step 9. Then elute DNA by applying two times step 10 to each tube with the same 50µl of EB buffer.</p>
+
border-top:1px solid #fafafa;
−
            </section>
+
border-bottom:1px solid #e0e0e0;
  
−
<!-- PHUSION PCR -->
+
background: rgba(16,151,151,0.6);
−
            <section id="phusionpcr" class="panel">               
+
background: -webkit-gradient(linear, left top, left bottom, from(rgba(16,151,153,0.6)), to(rgba(16,151,144,0.6)));
−
                <h1>Phusion PCR</br><small> Based on NEB Phusion PCR Protocol</small></h1>
+
background: -moz-linear-gradient(top, rgba(16,151,153,0.6), rgba(16,151,144,0.5));
−
                <h2>Materials</h2>
+
}
−
                <ul>
+
.background-section table th {
−
                    <li>5X Phusion HF or GC Buffer</li>
+
text-align: center;
−
                    <li>dNTPs</li>
+
}
−
                    <li>Forward and Reverse Primers</li>
+
−
                    <li>Template plasmid DNA</li>
+
−
                    <li>Phusion DNA polymerase</li>
+
−
                    <li>Nuclease-free Water</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Prepare following reaction in 0.5 mL PCR tubes on ice, adding polymerase last:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Component</th>
+
−
                            <th>20 μL reaction</th>
+
−
                            <th>50  μL reaction</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>5X Phusion HF or GC Buffer</td>
+
−
                            <td>4 μL</td>
+
−
                            <td>10 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 mM dNTPs</td>
+
−
                            <td>0.4 μL</td>
+
−
                            <td>1 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Forward Primer</td>
+
−
                            <td>1 μL</td>
+
−
                            <td>2.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Reverse Primer</td>
+
−
                            <td>1 μL</td>
+
−
                            <td>2.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Template plasmid DNA</td>
+
−
                            <td>1 pg – 10 ng</td>
+
−
                            <td>1 pg – 10 ng</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Phusion DNA Polymerase</td>
+
−
                            <td>0.2 μL</td>
+
−
                            <td>0.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Nuclease-free Water</td>
+
−
                            <td>to 20 μL</td>
+
−
                            <td>to 50 μL</td>
+
−
                        </tr> 
+
−
                    </table>
+
−
                    <p><small>Usually 100 pg – 1 ng of template DNA is sufficient</small></p>
+
−
                    <li>Mix by pipetting up and down or flicking the reactions
+
−
                    <li>Put tubes in thermocycler (with a pre-heated lid) with following cycling conditions:</li>
+
−
                    <table width="90%" align="center">
+
−
                    <tr>
+
−
                        <th>Step</th>
+
−
                        <th>  </th>
+
−
                        <th>Temperature</th>
+
−
                        <th>Time</th>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>Initial Denaturation</td>
+
−
                        <td>  </td>
+
−
                        <td>98°C</td>
+
−
                        <td>30 seconds</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>25 – 35 cycles</td>
+
−
                        <td>Denaturation</td>
+
−
                        <td>98°C</td>
+
−
                        <td>5 - 10 seconds</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>  </td>
+
−
                        <td>Annealing</td>
+
−
                        <td>45 – 72°C</td>
+
−
                        <td>10 – 30 seconds</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>  </td>
+
−
                        <td>Extension</td>
+
−
                        <td>72°C</td>
+
−
                        <td>15 -30 seconds per kb</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>Final Extension</td>
+
−
                        <td>  </td>
+
−
                        <td>72°C</td>
+
−
                        <td>5 -10 minutes</td>
+
−
                    </tr>
+
−
                    <tr>
+
−
                        <td>Hold</td>
+
−
                        <td>  </td>
+
−
                        <td>4°C </td>
+
−
                        <td>  </td>
+
−
                    </tr> 
+
−
                    </table>
+
−
                </ol>
+
−
                <h2>Guidelines</h2>
+
−
                <p>To be completed</p>
+
−
            </section>
+
  
−
<!-- TAQ PCR -->
+
.background-section table tr:first-child th:first-child {
−
            <section id="taqpcr" class="panel">
+
-moz-border-radius-topleft:3px;
−
                <h1>Taq PCR</br><small> Based on NEB Taq PCR Protocol</small></h1>
+
-webkit-border-top-left-radius:3px;
−
                <h2>Materials</h2>
+
border-top-left-radius:3px;
−
                <ul>
+
}
−
                    <li>10X Standard Taq Reaction Buffer</li>
+
−
                    <li>dNTPs</li>
+
−
                    <li>Forward and Reverse Primers</li>
+
−
                    <li>Template plasmid DNA</li>
+
−
                    <li>Taq DNA polymerase</li>
+
−
                    <li>Nuclease-free Water</li>
+
−
                </ul>
+
−
            <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Prepare following reaction in 0.5 mL PCR tubes on ice, adding polymerase last:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Component</th>
+
−
                            <th>25 μL reaction</th>
+
−
                            <th>50 μL reaction</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10X Standard Taq Reaction Buffer</td>
+
−
                            <td>2.5 μL</td>
+
−
                            <td>5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 mM dNTPs</td>
+
−
                            <td>0.5 μL</td>
+
−
                            <td>1 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Forward Primer</td>
+
−
                            <td>0.5 μL</td>
+
−
                            <td>1 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Reverse Primer</td>
+
−
                            <td>0.5 μL</td>
+
−
                            <td>1 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Template plasmid DNA</td>
+
−
                            <td>1 pg – 1 ng</td>
+
−
                            <td>1 pg – 1 ng</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Taq DNA Polymerase</td>
+
−
                            <td>0.125 μL</td>
+
−
                            <td>0.25 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Nuclease-free Water</td>
+
−
                            <td>to 25 μL</td>
+
−
                            <td>to 50 μL</td>
+
−
                        </tr> 
+
−
                    </table>
+
−
                    <p><small>Usually 100 pg – 1 ng of template DNA is sufficient</small></p>
+
−
                    <li>Mix by pipetting up and down or flicking the reactions
+
−
                    <li>Put tubes in thermocycler (with a pre-heated lid) with following cycling conditions:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Step</th>
+
−
                            <th>  </th>
+
−
                            <th>Temperature</th>
+
−
                            <th>Time</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Initial Denaturation</td>
+
−
                            <td>  </td>
+
−
                            <td>95°C</td>
+
−
                            <td>30 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>25 – 35 cycles</td>
+
−
                            <td>Denaturation</td>
+
−
                            <td>95°C</td>
+
−
                            <td>15 – 30 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>  </td>
+
−
                            <td>Annealing</td>
+
−
                            <td>45 – 68°C</td>
+
−
                            <td>15 – 60 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>  </td>
+
−
                            <td>Extension</td>
+
−
                            <td>68°C</td>
+
−
                            <td>1 minutes per kb</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Final Extension</td>
+
−
                            <td>  </td>
+
−
                            <td>68°C</td>
+
−
                            <td>5 minutes</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Hold</td>
+
−
                            <td>  </td>
+
−
                            <td>4°C </td>
+
−
                            <td>  </td>
+
−
                        </tr> 
+
−
                    </table>
+
−
                </ol>
+
−
                <h2>Guidelines</h2>
+
−
                <p>To be completed</p>
+
−
            </section>
+
  
−
<!-- Q5 PCR -->
+
.background-section table tr:first-child th:last-child {
−
            <section id="Q5pcr" class="panel">
+
-moz-border-radius-topright:3px;
−
                <h1>Q5 PCR</br><small> Based on NEB Q5 PCR Protocol</small></h1>
+
-webkit-border-top-right-radius:3px;
−
                <h2>Materials</h2>
+
border-top-right-radius:3px;
−
                <ul>
+
}
−
                    <li>5X Q5 Reaction Buffer</li>
+
.background-section table tr {
−
                    <li>dNTPs 10µM</li>
+
text-align: center;
−
                    <li>Forward and Reverse Primers</li>
+
}
−
                    <li>Template plasmid DNA</li>
+
.background-section table td:first-child {
−
                    <li>Q5 High Fidelity DNA polymerase</li>
+
text-align: center;
−
                    <li>Nuclease-free Water</li>
+
}
−
                </ul>
+
.background-section table td {
−
                <h2>Procedure</h2>
+
border-top: 1px solid #ffffff;
−
                <ol>
+
border-bottom:1px solid #e0e0e0;
−
                    <li>Prepare following reaction in 0.5 mL PCR tubes on ice, adding polymerase last:</li>
+
border-left: 1px solid #e0e0e0;
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Component</th>
+
−
                            <th>25 μL reaction</th>
+
−
                            <th>50 μL reaction</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>5X Q5 Reaction Buffer</td>
+
−
                            <td>5 μL</td>
+
−
                            <td>10 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 mM dNTPs</td>
+
−
                            <td>0.5 μL</td>
+
−
                            <td>1 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Forward Primer</td>
+
−
                            <td>1.25 μL</td>
+
−
                            <td>2.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10 μM Reverse Primer</td>
+
−
                            <td>1.25 μL</td>
+
−
                            <td>2.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Template plasmid DNA</td>
+
−
                            <td>1 < 1,000 ng</td>
+
−
                            <td>1 < 1,000 ng</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Q5 DNA Polymerase</td>
+
−
                            <td>0.25 μL</td>
+
−
                            <td>0.5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Nuclease-free Water</td>
+
−
                            <td>to 25 μL</td>
+
−
                            <td>to 50 μL</td>
+
−
                        </tr> 
+
−
                    </table>
+
−
                    <p><small>Usually 100 pg – 1 ng of template DNA is sufficient</small></p>
+
−
                    <li>Mix by pipetting up and down or flicking the reactions
+
−
                    <li>Put tubes in thermocycler (with a pre-heated lid) with following cycling conditions:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Step</th>
+
−
                            <th>  </th>
+
−
                            <th>Temperature</th>
+
−
                            <th>Time</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Initial Denaturation</td>
+
−
                            <td>  </td>
+
−
                            <td>98°C</td>
+
−
                            <td>30 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>25 – 35 cycles</td>
+
−
                            <td>Denaturation</td>
+
−
                            <td>98°C</td>
+
−
                            <td>5 – 10 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>  </td>
+
−
                            <td>Annealing</td>
+
−
                            <td>50 – 72°C</td>
+
−
                            <td>10 – 30 seconds</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>  </td>
+
−
                            <td>Extension</td>
+
−
                            <td>72°C</td>
+
−
                            <td>20 - 30 seconds per kb</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Final Extension</td>
+
−
                            <td>  </td>
+
−
                            <td>72°C</td>
+
−
                            <td>2 minutes</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Hold</td>
+
−
                            <td>  </td>
+
−
                            <td>4°C </td>
+
−
                            <td>  </td>
+
−
                        </tr> 
+
−
                    </table>
+
−
                </ol>
+
−
                <h2>Guidelines</h2>
+
−
                <p>To be completed</p>
+
−
            </section>
+
  
−
<!-- PCR PURIFICATION -->
+
background: #fafafa;
−
            <section id="pcrpurification" class="panel">       
+
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
−
                <h1>PCR Product Purification</br> <small>With QIAquick PCR Purification Kit (QIAGEN)</small></h1>
+
background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
−
                <h2>Materials</h2>
+
}
−
                <ul>
+
.background-section table tr.even td {
−
                    <li>PCR products</li>
+
background: #f6f6f6;
−
                    <li>QIAquick PCR Purification Kit</li>
+
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
−
                </ul>
+
background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
−
                <h2>Procedure</h2>
+
}
−
                <ol>
+
.background-section table tr:last-child td {
−
                    <li>Add 5 volumes PB buffer to 1 volume of PCR product and mix</li>
+
border-bottom:0;
−
                    <li>Place QIAquick column in 2 ml collection tube</li>
+
}
−
                    <li>Apply samples to QIAquick column and centrifuge for 30 – 60 seconds, discard flow-through</li>
+
.background-section table tr:last-child td:first-child {
−
                    <li>Wash by adding 750 μL PE buffer to QIAquick column and centrifuge fo 30 – 60 seconds, discard flow-through</li>
+
-moz-border-radius-bottomleft:3px;
−
                    <li>Centrifuge QIAquick column for 1 minutes to remove residual wash buffer</li>
+
-webkit-border-bottom-left-radius:3px;
−
                    <li>Elute DNA by adding 30 or 50 μL EB buffer or water to the center of the QIAquick column. Let stand for 1 minutes and centrifuge for 1 minute</li>
+
border-bottom-left-radius:3px;
−
                </ol>
+
}
−
            </section>
+
.background-section table tr:last-child td:last-child {
 +
-moz-border-radius-bottomright:3px;
 +
-webkit-border-bottom-right-radius:3px;
 +
border-bottom-right-radius:3px;
 +
}
  
−
<!-- PEG LIAC SOLUTION -->
+
.background-section table tr:hover td {
−
            <section id="pegliac" class="panel">       
+
background: #f2f2f2;
−
                <h1>PEG/LiAc Solution</h1>
+
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
−
                <h2>Materials</h2>
+
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
−
                <ul>
+
}
−
                    <li>50% PEG  (Polyethylene glycol) prepared with sterile deionized water</li>
+
−
                    <li>10X TE buffer: 0.1 M Tris-Hcl, 10 mM EDTA, ph 7.5, autoclaved</li>
+
−
                    <li>10X LiAc: 1 M lithium acetate, pH 7.5 adjusted with dilute acetic acid, autoclaved</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Prepare PEG/LiAc solution as follows:</li>
+
−
                    <table width="90%" align="center">
+
−
                        <tr>
+
−
                            <th>Stock concentration</th>
+
−
                            <th>Final concentration</th>
+
−
                            <th>Total quantity for 10 mL solution</th>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>50% PEG</td>
+
−
                            <td>40% PEG</td>
+
−
                            <td>8 mL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10X TE buffer</td>
+
−
                            <td>1X TE buffer</td>
+
−
                            <td>1 mL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10X LiAc</td>
+
−
                            <td>1X LiAc</td>
+
−
                            <td>1 mL</td>
+
−
                        </tr>
+
−
                    </table>
+
−
                </ol>   
+
−
            </section>
+
  
−
<!-- RESTRCTION DIGEST-->
+
}
−
            <section id="restriction" class="panel">
+
/* ==========================================================================
−
                <h1>Restriction Digest</br><small>"Typical" Restriction Digest based on NEB Protocol</small></h1>
+
    Description section
−
                <h2>Materials</h2>
+
  ========================================================================== */
−
                <ul>
+
.description-section {
−
                    <li>Restriction Enzyme(s)</li>
+
  text-align: center;
−
                    <li>DNA</li>
+
}
−
                    <li>10X NEBuffer (Appropriate buffer for used enzyme)</li>
+
.description-section h1 {
−
                    <li>Water</li>
+
  text-align: center;
−
                </ul>
+
  color: #109897;
−
                <h2>Procedure</h2>
+
  font-weight: 500;
−
                <ol>
+
}
−
                    <li>Prepare following reaction in 0.5 mL PCR tubes, adding enzyme(s) last:</li>
+
.description-section h2 {
−
                    <table width="90%" align="center">
+
  text-align: center;
−
                        <tr>
+
  color: #109897;
−
                            <th>Component</th>
+
  font-weight: 400;
−
                            <th>20 μL reaction</th>
+
  border-bottom-style: solid;
−
                            <th>50 μL reaction</th>
+
  border-bottom-color: black;
−
                        </tr>
+
  border-bottom-width: thin;
−
                        <tr>
+
}
−
                            <td>Restriction enzyme(s)</td>
+
.description-section p {
−
                            <td>1 μL (for each enzyme)</td>
+
  text-align: justify;
−
                            <td>1 μL (for each enzyme)</td>
+
}
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>DNA</td>
+
−
                            <td>100 ng - 1 μg</td>
+
−
                            <td>100 ng - 1 μg</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>10X NEBuffer</td>
+
−
                            <td>2 μL</td>
+
−
                            <td>5 μL</td>
+
−
                        </tr>
+
−
                        <tr>
+
−
                            <td>Water</td>
+
−
                            <td>to 20 μL</td>
+
−
                            <td>to 50 μL</td>
+
−
                        </tr>
+
−
                    </table>
+
−
                    <p><small>20 μL reactions are sufficient for restriction enzyme analysis, larger volumes are usefull if product is used for cloning</small></p>
+
−
                    <li>Incubate at temperature and for duration appropriate for used enzyme (typically 37°C for 15 minutes or 1 hour)</li>
+
−
                    <li>Optional: Inactivate enzyme by incubating reaction at temperature and for duration appropriate for used enzyme (typically 65°C for 20 minutes)</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!--SITE DIRECTED MUTAGENESIS-->
+
/* ==========================================================================
−
            <section id="mutagenesis" class="panel">
+
    Sofware section
−
                <h1>Site-directed mutagenesis</br><small>Based on NEB Q5 Site-directed Mutagensis Kit Protocol</small></h1>
+
  ========================================================================== */
−
                <h2>Materials</h2>
+
.soft-section h2 {
−
        <ul>
+
  text-align: left;
−
                    <li>Q5 Hot Start High-Fidelity 2X Master Mix (NEB)</li>
+
  color: #109897;
−
                    <li>Forward and reverse primers</li>
+
}
−
                    <li>Template DNA</li>
+
/* ==========================================================================
−
                    <li>Nuclease-free water</li>
+
    Classy bar
−
                </ul>
+
  ========================================================================== */
−
            <h2>Procedure</h2>
+
.classy-bar {
−
                <ol>
+
background: url('https://static.igem.org/mediawiki/2015/9/9a/EPF_Lausanne_Banner1.png') no-repeat bottom center;
−
                    <li>Prepare following reaction in 0.5 mL PCR tubes on ice, adding Mater Mix last:</li>
+
background-size: cover;
−
                    <table width="90%" align="center">
+
  width: 100%;
−
                        <tr>
+
padding: 60px 0px;
−
                            <th>Component</th>
+
}
−
                            <th>25 μL reaction</th>
+
.classy-bar h3 {
−
                        </tr>
+
  position: relative;
−
                        <tr>
+
color: #032222;
−
                            <td>Q5 Hot Start High-Fidelity 2X Master Mix</td>
+
font-size: 34px;
−
                            <td>12.5 μL</td>
+
font-weight: 800;
−
                        </tr>
+
text-transform: uppercase;
−
                        <tr>
+
  top: -20px;
−
                            <td>10 μM Forward Primer</td>
+
  margin-top: 50px;
−
                            <td>1.25 μL</td>
+
  letter-spacing: 6px;
−
                        </tr>
+
}
−
                        <tr>
+
.classy-bar h2 {
−
                            <td>10 μM Reverse Primer</td>
+
   position: relative;
−
                            <td>1.25 μL</td>
+
color: #032222;
−
                        </tr>
+
font-size: 34px;
−
                        <tr>
+
font-weight: 800;
−
                            <td>Template DNA (1-25 ng/μL)</td>
+
text-transform: uppercase;
−
                            <td>1 μL</td>
+
  top: -20px;
−
                        </tr>
+
  margin-top: 50px;
−
                        <tr>
+
  letter-spacing: 6px;
−
                            <td>Nuclease-free Water</td>
+
}
−
                            <td>9 μL</td>
+
/* ==========================================================================
−
                        </tr>    
+
    Protocols
−
                    </table>
+
  ========================================================================== */
−
                    <li>Put tubes in thermocycler (with a pre-heated lid) with following cycling conditions:</li>
+
.prot-section h1 {
−
                    <table width="90%" align="center">
+
text-align: center;
−
                        <tr>
+
font-weight: 600;
−
                            <th>Step</th>
+
font-size: 26px;
−
                            <th>  </th>
+
color: #109897;
−
                            <th>Temperature</th>
+
border-bottom: 1px solid;
−
                            <th>Time</th>
+
}
−
                        </tr>
+
.prot-section h2 {
−
                        <tr>
+
color: #333333;
−
                            <td>Initial Denaturation</td>
+
font-weight: 400;
−
                            <td>  </td>
+
}
−
                            <td>98°C</td>
+
.prot-section h3 {
−
                            <td>30 seconds</td>
+
text-align: center;
−
                        </tr>
+
text-transform: uppercase;
−
                        <tr>
+
font-weight: 500;
−
                            <td>25 cycles</td>
+
font-size: 24px;
−
                            <td>Denaturation</td>
+
color: #981110;
−
                            <td>98°C</td>
+
}
−
                            <td>10 seconds</td>
+
.prot-section ol{
−
                        </tr>
+
   padding-bottom: 20px;
−
                        <tr>
+
}
−
                            <td>  </td>
+
.prot-section .panel {
−
                            <td>Annealing</td>
+
padding-top: 40px;
−
                            <td>50 – 72°C</td>
+
color: #333;
−
                            <td>10 – 30 seconds</td>
+
background-color: white;
−
                        </tr>
+
border-color: #ddd;
−
                        <tr>
+
max-width: 90%;
−
                            <td>   </td>
+
margin-left: auto;
−
                            <td>Extension</td>
+
margin-right: auto;
−
                            <td>72°C</td>
+
}
−
                            <td>20 - 30 seconds per kb</td>
+
.prot-section h4 {
−
                        </tr>
+
font-size: 16px;
−
                        <tr>
+
font-weight: 600;
−
                            <td>Final Extension</td>
+
}
−
                            <td>  </td>
+
.prot-section p {
−
                            <td>72°C</td>
+
   padding: 20px;
−
                            <td>2 minutes</td>
+
text-align: justify;
−
                        </tr>
+
font-size: 16px;
−
                        <tr>
+
color: #2F2F2F;
−
                            <td>Hold</td>
+
}
−
                            <td>  </td>
+
.prot-section .panel p {
−
                            <td>4°C </td>
+
margin-left: 5px;
−
                            <td>  </td>
+
margin-right: 5px;
−
                        </tr>    
+
}
−
                    </table>
+
.prot-section .panel h5 {
−
                    <li>Assemble following reagents:</li>
+
color: #9A9EA3;
−
                    <table width="90%" align="center">
+
margin-left: 5px;
−
                        <tr>
+
font-size: 18px;
−
                            <th>Component</th>
+
font-weight: 500;
−
                            <th>Volume</th>
+
}
−
                        </tr>
+
/* ==========================================================================
−
                        <tr>
+
  Media Queries
−
                            <td>PCR Product</td>
+
  ========================================================================== */
−
                            <td>1 μL</td>
+
ul.affix {
−
                        </tr>
+
  position: fixed;
−
                        <tr>
+
  top: 20px;
−
                            <td>2X KLD Reaction Buffer</td>
+
  width: 25%;
−
                            <td>5 μL</td>
+
  margin-right: 30px;
−
                        </tr>
+
  padding-top: 50px;
−
                        <tr>
+
   margin-bottom: 40px;
−
                            <td>10X KLD Enzyme Mix</td>
+
  min-height: 20px;
−
                            <td>1 μL</td>
+
}
−
                        </tr>
+
ul.affix-top {
−
                        <tr>
+
  position: static;
−
                            <td>Nuclease-free Water</td>
+
}
−
                            <td>3 μL</td>
+
ul.affix-bottom {
−
                        </tr>    
+
  position: absolute;
−
                    </table>
+
}
−
                    <li>Mix by pipetting up and down and incubate at room temperature for 5 minutes</li>
+
/* ==========================================================================
−
                    <li>Thaw completent E. coli cells on ice</li>
+
  Sidebar
−
                    <li>Add 5 μL of KLD mix to the tube of thawed cells. Flick tube 4-5 times to mix.</li>
+
  ========================================================================== */
−
                    <li>Place mixture on ice for 30 minutes</li>
+
.affix {
−
                    <li>Heat shock at 42°C for 30 seconds</li>
+
  top: 20px;
−
                    <li>Place on ice for 5 minutes</li>
+
  width: 213px;
−
                    <li>Pipette 950 μL of room temperature SOC into the mixture</li>
+
}
−
                    <li>Incubate at 37°C for 60 minutes with shaking</li>
+
−
                    <li>Mix thouroughly by flicking the tube and inverting, then spread 50-100 μL on a plate with appropriate antibiotics and incubate overnight at 37°C</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!-- SD MEDIUM -->
+
@media (min-width: 1200px) {
−
            <section id="sdmedium" class="panel">
+
  .affix {
−
            <h1>Sd Medium</h1>
+
    width: 263px;
−
            <h2>Materials</h2>
+
  }
−
                <ul>
+
}
−
                    <li>Amino Acid Powder</li>
+
.affix-bottom {
−
                    <li>Yeast Nitrogen Base</li>
+
position: absolute;
−
                    <li>Ammonium Sulphate</li>
+
width: 213px;
−
                    <li>Adenine Sulphate</li>
+
}
−
                    <li>Water</li>
+
−
                    <li>NaOH</li>
+
−
                    <li>Agar</li>
+
−
                    <li>Glucose</li>
+
−
                </ul>
+
−
            <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Place stirrer bar in 2 L Erlenmeyer</li>
+
−
                    <li>Add 2.6 g amino acid powder, 3.4 g yeast nitrogen base, 10 g ammonium sulphate, 1 g adenine sulphate and 950 mL water</li>
+
−
                    <li>Adjust pH to 5.9 by adding a few drops of 10 M NaOH</li>
+
−
                    <li>In an other Erlenmeyer, add 35 g agar and 900 mL water</li>
+
−
                    <li>Autoclave both bottles</li>
+
−
                    <li>Transfer the content of first bottle to the agar-containing bottle</li>
+
−
                    <li>Cool to 55°C</li>
+
−
                    <li>Add 100 ml 40% glucose and 16 ml of the required amino acids</li>
+
−
                    <li>Pour plates</li>
+
−
                </ol>
+
−
            </section>
+
  
−
<!-- TAE BUFFER -->
+
@media (min-width: 1200px) {
−
            <section id="tae" class="panel">   
+
  .affix-bottom {
−
                <h1>Tris-Acetate-EDTA (TAE) buffer 50X</h1>
+
    width: 263px;
−
                <h2>Materials</h2>
+
  }
−
          <ul>
+
}
−
                    <li>Acetate 100%</li>
+
.nav .active {
−
                    <li>Tris base</li>
+
  font-weight: bold;
−
                    <li>EDTA 0,5M</li>
+
  border-left: 3px solid rgba(17,151,152,0.9);
−
                </ul>
+
}
−
                <h2>Procedure (1L)</h2>
+
.nav .nav {
−
                <ol>
+
  display: none;
−
                    <li>Add 100mL of 0,5M EDTA (pH 8.0)</li>
+
}
−
                    <li>Add 242g of Tris base </li>
+
.nav .active .nav {
−
                    <li>Add 57,1mL of glacial acetic acid (100%)</li>
+
  display: block;
−
                    <li>Fill up to 1L with water (adjust pH to ~8.3)</li>
+
}
−
                    <li>Send to autoclave</li>
+
.nav a {
−
                    <p><small>To prepare 1L of 1X TAE dilute 20mL of 50X TAE in 980mL of water.</small></p>
+
color: rgb(6, 61, 61);
−
                </ol>
+
}
−
            </section>
+
.nav a:visited {
 +
color: rgba(6, 61, 61, 0.9);
 +
}
 +
.nav .nav a {
 +
text-decoration: inherit;
 +
}
 +
.nav .nav a:visited {
 +
color: rgba(6, 61, 61, 0.9);
 +
}
 +
.prot-section .nav > li > a {
 +
padding: 5px 15px;
 +
}
 +
.nav .nav span {
 +
  margin: 0 2px 0 2px;
 +
}
  
−
<!-- TRANSFORMATION -->
+
.nav .nav .active a,
−
            <section id="transformation" class="panel">
+
.nav .nav .active:hover a,
−
                <h1>Transformation</br><small> Based on NEB Transformation Protocol</small></h1>
+
.nav .nav .active:focus a {
−
                <h2>Materials</h2>
+
  font-weight: bold;
−
                <ul>
+
  border-left: 3px solid rgba(17,151,152,0.9);
−
                    <li>Competent cells</li>
+
}
−
                    <li>DNA</li>
+
−
                    <li>SOC medium (SOB + Glucose)</li>
+
−
                    <li>Petri dish with appropriate antibiotic resistance</li>
+
−
                </ul>
+
−
                <h2>Procedure</h2>
+
−
                <ol>
+
−
                    <li>Thaw competent cells on ice</li>
+
−
                    <li>Add 2 μL DNA to the competent cells, mix by pipetting up and down or flicking the tube 4 -5 times</li>
+
−
                    <li>Place mixture on ice for 30 minutes</li>
+
−
                    <li>Heat shock at 42°C for 30 seconds</li>
+
−
                    <li>Transfer tubes to ice for 2 minutes</li>
+
−
                    <li>Add 950 μL room-temperature SOC media</li>
+
−
                    <li>Incubate at 37°C for 60 minutes with shaking</li>
+
−
                    <li>Spread 100 μL cells onto selection plates (warm plates to 37°C prior to this step for increased efficiency)</li>
+
−
                    <li>Incubate overnight at 37°C</li>
+
−
                </ol>
+
−
            </section>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
<script type="text/javascript">
+
.nav .nav .active span,
−
$('#nav').affix({
+
.nav .nav .active:hover span,
−
    offset: {
+
.nav .nav .active:focus span {
−
        top: $('#nav').offset().top
+
  display: none;
−
    }
+
}
−
});
+
/* ==========================================================================
−
$('#nav').affix({
+
  Meet section
−
   offset: {
+
  ========================================================================== */
−
     bottom: ($('#transformation').outerHeight(true) + 
+
.meet-section h4 {
−
            40)
+
  text-align: center;
−
  }
+
  color: #333333;
−
});
+
  font-size: 18px;
−
$('#nav').scrollspy({
+
  font-weight: 500;
−
    offset: 50
+
}
−
  });
+
.meet-section .row {
−
</script>
+
  padding-bottom: 100px;
−
</body>
+
}
 +
.meet-section p {
 +
  font-style: italic;
 +
  text-align: center;
 +
  color: #333333;
 +
  font-size: 16px;
 +
}
 +
#cf {
 +
  padding-bottom: 300px;
 +
}
 +
 
 +
#cf img {
 +
  position: absolute;
 +
  height: 300px;
 +
  width: 200px;
 +
  left: 16%;
 +
  -webkit-transition: opacity 1s ease-in-out;
 +
  -moz-transition: opacity 1s ease-in-out;
 +
  -o-transition: opacity 1s ease-in-out;
 +
  transition: opacity 1s ease-in-out;
 +
}
 +
 
 +
#cf img.top:hover {
 +
  opacity:0;
 +
}
 +
/* ==========================================================================
 +
  Timeline
 +
  ========================================================================== */
 +
.timeline-section h3 {
 +
  text-align: center;
 +
  text-transform: uppercase;
 +
  font-weight: 500;
 +
  font-size: 24px;
 +
  color: #000066;
 +
}
 +
.timeline-section h2 {
 +
  text-align: center;
 +
  color: #333333;
 +
  font-weight: 400;
 +
  margin: 0;
 +
}
 +
.timeline-section h4 {
 +
  font-size: 16px;
 +
  font-weight: 600;
 +
  color: black;
 +
}
 +
.timeline-section p {
 +
  text-align: justify;
 +
  font-size: 16px;
 +
  color : #2F2F2F;
 +
}
 +
.timeline-section .image-holder {
 +
  margin-top: 50px;
 +
  overflow: hidden;
 +
}
 +
.timeline {
 +
  list-style: none;
 +
  padding: 20px 0 20px;
 +
  position: relative;
 +
}
 +
.timeline:before {
 +
  top: 0;
 +
  bottom: 0;
 +
  position: absolute;
 +
  content: " ";
 +
  width: 3px;
 +
  background-color: #333333;
 +
  left: 50%;
 +
  margin-left: -1.5px;
 +
}
 +
.timeline > li {
 +
  margin-bottom: 20px;
 +
  position: relative;
 +
}
 +
.timeline > li:before,
 +
.timeline > li:after {
 +
  content: " ";
 +
  display: table;
 +
}
 +
.timeline > li:after {
 +
  clear: both;
 +
}
 +
.timeline > li:before,
 +
.timeline > li:after {
 +
  content: " ";
 +
  display: table;
 +
}
 +
.timeline > li:after {
 +
  clear: both;
 +
}
 +
.timeline > li > .timeline-panel {
 +
  width: 46%;
 +
  float: left;
 +
  border: 1px solid #333333;
 +
  border-radius: 2px;
 +
  padding: 20px;
 +
  padding-top: 0px;
 +
  position: relative;
 +
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 +
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 +
}
 +
.timeline > li > .timeline-panel:before {
 +
  position: absolute;
 +
  top: 26px;
 +
  right: -15px;
 +
  display: inline-block;
 +
  border-top: 15px solid transparent;
 +
  border-left: 15px solid #ccc;
 +
  border-right: 0 solid #ccc;
 +
  border-bottom: 15px solid transparent;
 +
  content: " ";
 +
}
 +
.timeline > li > .timeline-panel:after {
 +
  position: absolute;
 +
  top: 27px;
 +
  right: -14px;
 +
  display: inline-block;
 +
  border-top: 14px solid transparent;
 +
  border-left: 14px solid #fff;
 +
  border-right: 0 solid #fff;
 +
  border-bottom: 14px solid transparent;
 +
  content: " ";
 +
}
 +
.timeline > li > .timeline-badge {
 +
  color: #fff;
 +
  width: 25px;
 +
  height: 25px;
 +
  line-height: 50px;
 +
  font-size: 2.5em;
 +
  text-align: center;
 +
  position: absolute;
 +
  top: 29px;
 +
  left: 50%;
 +
  margin-left: -12.5px;
 +
  background-color: #999999;
 +
  z-index: 100;
 +
  border-top-right-radius: 50%;
 +
  border-top-left-radius: 50%;
 +
  border-bottom-right-radius: 50%;
 +
  border-bottom-left-radius: 50%;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel {
 +
   float: right;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel:before {
 +
  border-left-width: 0;
 +
  border-right-width: 15px;
 +
  left: -15px;
 +
  right: auto;
 +
}
 +
.timeline > li.timeline-inverted > .timeline-panel:after {
 +
  border-left-width: 0;
 +
  border-right-width: 14px;
 +
  left: -14px;
 +
  right: auto;
 +
}
 +
.timeline-badge.primary {
 +
  background-color: #2e6da4 !important;
 +
}
 +
.timeline-badge.success {
 +
  background-color: #3f903f !important;
 +
}
 +
.timeline-badge.warning {
 +
  background-color: #f0ad4e !important;
 +
}
 +
.timeline-badge.danger {
 +
  background-color: #d9534f !important;
 +
}
 +
.timeline-badge.info {
 +
  background-color: #5bc0de !important;
 +
}
 +
.timeline-title {
 +
  font-size: 28px;
 +
  margin-top: 0;
 +
  color: inherit;
 +
}
 +
.timeline-body > p,
 +
.timeline-body > ul {
 +
  margin-bottom: 0;
 +
}
 +
.timeline-body > p + p {
 +
  margin-top: 5px;
 +
}
 +
/* ==========================================================================
 +
     Sponsors / Footer
 +
  ========================================================================== */
 +
.sponsors {
 +
  color: black;
 +
  position: relative;
 +
  padding: 10px;
 +
  padding-bottom: 20px;
 +
  background-color: #fdfefe;
 +
  text-align: center;
 +
}
 +
.sponsors h1 {
 +
  padding-top: 0px;
 +
  font-size: 28px;
 +
  text-transform: uppercase;
 +
  font-weight: 600;
 +
  border: none;
 +
}
 +
.sponsors .logo {
 +
  padding: 1.5em 1.5em;
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
}
 +
.sponsors .logo img {
 +
  max-height: 150px;
 +
  max-width: 150px;
 +
}
 +
img.resize50 {
 +
  max-width:50%;
 +
  max-height:50%;
 +
}
 +
#footer {
 +
position: relative;
 +
bottom: 0;
 +
background-color: #EBEBEB
 +
}
 +
#footer-right {
 +
padding-top: 30px;
 +
}
 +
#footer-right h3 {
 +
margin-left: 23%;
 +
font-weight: 600;
 +
}
 +
#footer-right p {
 +
margin-left: 23%;
 +
}
 +
#icons a {
 +
color: black;
 +
padding: 1em;
 +
}
 +
 
 +
/*<!-- TABLE -->*/
 +
table a:link {
 +
color: #707070 ;
 +
text-decoration:none;
 +
}
 +
table a:visited {
 +
color: #707070;
 +
font-weight:bold;
 +
text-decoration:none;
 +
}
 +
table a:active,
 +
table a:hover {
 +
color: #109798;
 +
text-decoration:none;
 +
}
 +
table {
 +
    color:#303030;
 +
font-size:12px;
 +
background:#eaebec;
 +
margin:20px;
 +
border:#ccc 1px solid;
 +
 
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
 
 +
-moz-border-radius:3px;
 +
-webkit-border-radius:3px;
 +
border-radius:3px;
 +
 
 +
-moz-box-shadow: 0 1px 2px #d1d1d1;
 +
-webkit-box-shadow: 0 1px 2px #d1d1d1;
 +
box-shadow: 0 1px 2px #d1d1d1;
 +
}
 +
table th {
 +
    color:#fff;
 +
    text-shadow: 0.5px 0.5px 0px #999999;
 +
 
 +
padding:21px 25px 22px 25px;
 +
border-top:1px solid #fafafa;
 +
border-bottom:1px solid #e0e0e0;
 +
 
 +
background: rgba(16,151,151,0.6);
 +
background: -webkit-gradient(linear, left top, left bottom, from(rgba(16,151,153,0.6)), to(rgba(16,151,144,0.6)));
 +
background: -moz-linear-gradient(top, rgba(16,151,153,0.6), rgba(16,151,144,0.5));
 +
}
 +
table th:first-child {
 +
text-align: left;
 +
padding-left:10px;
 +
}
 +
table tr:first-child th:first-child {
 +
-moz-border-radius-topleft:3px;
 +
-webkit-border-top-left-radius:3px;
 +
border-top-left-radius:3px;
 +
}
 +
 
 +
table tr:first-child th:last-child {
 +
-moz-border-radius-topright:3px;
 +
-webkit-border-top-right-radius:3px;
 +
border-top-right-radius:3px;
 +
}
 +
table tr {
 +
text-align: center;
 +
padding-left:20px;
 +
}
 +
table td:first-child {
 +
text-align: left;
 +
padding-left:20px;
 +
border-left: 0;
 +
}
 +
table td {
 +
padding:18px;
 +
border-top: 1px solid #ffffff;
 +
border-bottom:1px solid #e0e0e0;
 +
border-left: 1px solid #e0e0e0;
 +
 
 +
background: #fafafa;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
 +
background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
 +
}
 +
table tr.even td {
 +
background: #f6f6f6;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
 +
background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
 +
}
 +
table tr:last-child td {
 +
border-bottom:0;
 +
}
 +
table tr:last-child td:first-child {
 +
-moz-border-radius-bottomleft:3px;
 +
-webkit-border-bottom-left-radius:3px;
 +
border-bottom-left-radius:3px;
 +
}
 +
table tr:last-child td:last-child {
 +
-moz-border-radius-bottomright:3px;
 +
-webkit-border-bottom-right-radius:3px;
 +
border-bottom-right-radius:3px;
 +
}
 +
 
 +
table tr:hover td {
 +
background: #f2f2f2;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
 +
background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
 +
}
 +
 
 +
</style>
 +
 
 +
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 +
 
 +
<!-- Latest compiled and minified JavaScript -->
 +
<script src="http://code.jquery.com/jquery.js"></script>
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 +
 
 +
 
 +
</head>
 
</html>
 
</html>
−
{{:Team:EPF_Lausanne/Test/footer}}
 

Latest revision as of 20:14, 16 September 2015

EPFL 2015 iGEM bioLogic Logic Orthogonal gRNA Implemented Circuits