Difference between revisions of "Team:NUS Singapore-A/InterLab"

Line 1: Line 1:
−
{{NUS_Singapore-A}}
 
−
{{:Team:NUS_Singapore-A/Templates/Style}}
 
 
<html>
 
<html>
−
   
+
<head>
−
    <head>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
        <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
+
<meta charset="utf-8">
−
        <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
−
    </head>
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
  
−
<!-- <script type="text/javascript" src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>  -->
+
</head>
  
−
<script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
<style>
−
<script type="text/x-mathjax-config">
+
/*Remove standard formatting of iGEM HQ */
−
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
/* set page to fill window*/
−
</script>
+
  
 +
html {
 +
    height: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
    overflow-y: scroll;
 +
}
  
−
<body>
+
body {
 +
    height: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
    background-color: white;
 +
}
  
−
<div class="inner-border" style="border-top: none;">
+
#globalWrapper {
−
<div class="all-wrapper">
+
    min-height: 100%;
−
<div class="content-wrapper">
+
    margin: 0;
 +
    padding: 0!important;
 +
    font-size: initial;
 +
}
  
−
  <img src="https://static.igem.org/mediawiki/2018/2/27/T--NUS_Singapore-A--Interlab_Header_s.png" class="header">
+
#content {
 +
    width:100%;
 +
    min-width: 100%!important;
 +
    margin: 0;
 +
    padding: 0;
 +
    top: -10px;
 +
}
 +
#mw-content-text {
 +
    position:relative;
 +
    margin: 0;
 +
    padding: 0;
 +
    left: 0;   
 +
    font-size: 100%;
 +
    z-index:0;
 +
}
 +
/* set all basic objects to neutral formatting, removes all padding, margins, etc and sets the fontsize to 100%*/
  
−
  <h1>OVERVIEW</h1>
+
h1,
−
  <div class="row">
+
h2,
−
    <div class="column left">
+
h3,
−
        <p>A challenge of synthetic biology is repeating measurements in different laboratories. For example, fluorescence data is difficult to compare either because it is reported in different units, or because different groups handle raw data differently.
+
h4
−
          iGEM’s Measurement Committee thus aims to use the InterLab Study to eventually develop absolute units for measurements of green fluorescent protein (GFP) in a plate reader. This will improve the measurement tools of synthetic biologists.
+
{
−
        </p>
+
    font-family: 'Arial', sans-serif;
−
        <br>
+
    color: black;
−
        <p> This year, the Committee aims to discover if it is possible to reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of optical density (OD). For this, we were required
+
    background: none;
−
          to measure the cell density of Escherichia coli (<i>E. coli</i>) DH5⍺ cells using the methods below.
+
    font-weight: normal;
−
        </p>
+
    margin-bottom: 0;
−
      </div>
+
    text-align: left;
−
      <div class="column right">
+
    overflow: visible;
−
        <p> <i> Method 1: Converting between absorbance of cells to absorbance of a known concentration of beads </i>
+
    border: none;
−
        </p>
+
}
−
        <br>
+
/*as a script gets a paragraph, by default, no formatting for p */
−
        <p> In the first method, silica beads are used to estimate the actual amount of cells during fluorescence measurement. These beads are modeled after a typical <i> E. coli </i> cell and are thus expected to scatter light in a similar way to <i> E. coli </i>          cells. As a sample of these silica beads gives a consistent and known absorbance measurement at 600 nm, absorbance measurements from a sample’s cell density can be converted into an “equivalent concentration of beads” measurement that should
+
−
          be more universal and comparable between different labs.</p>
+
−
        <br>
+
−
        <p> <i>Method 2: Counting colony-forming units (CFUs) from the sample</i></p>
+
−
        <br>
+
−
        <p> In the second method, cell concentration is approximated is by plating a known volume of the sample and letting bacterial colonies grow. As each bacterial colony is assumed to represent a single cell (for cells that do not stick together), the
+
−
          cell concentration in the sample is then directly proportional to the number of CFUs. Using a scaling factor computed from negative and positive control CFUs, a conversion factor from absorbance to CFU can be computed.</p>
+
−
      </div>
+
−
      <br>
+
−
    </div>
+
  
−
    <br>
 
−
    <hr>
 
−
  <h1> PARTS RECEIVED </h1>
 
−
  <table style="width:70%;">
 
−
      <tr>
 
−
        <th><i>Device</i></th>
 
−
        <th><i>Part Number</i></th>
 
−
        <th><i>Usage</i></th>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Negative control</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_R0040">BBa_R0040</a></td>
 
−
        <td>TetR repressible promoter, medium strength promoter</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Positive Control</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_I20270">BBa_I20270</a></td>
 
−
        <td>Promoter MeasKit (J23151)</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 1</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364000">BBa_J364000</a></td>
 
−
        <td>GFP expressing constitutive device</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 2</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364001">BBa_J364001</a></td>
 
−
        <td>GFP expressing constitutive device</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 3</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364002">BBa_J364002</a></td>
 
−
        <td>GFP expressing constitutive device</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 4</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364007">BBa_J364007</a></td>
 
−
        <td>Expresses GFP under the control of a constitutive promoter</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 5</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364008">BBa_J364008</a></td>
 
−
        <td>Expresses GFP under the control of a constitutive promoter</td>
 
−
      </tr>
 
−
      <tr>
 
−
        <td>Test Device 6</td>
 
−
        <td><a href="http://parts.igem.org/Part:BBa_J364009">BBa_J364009</a></td>
 
−
        <td>Expresses GFP under the control of a constitutive promoter</td>
 
−
      </tr>
 
−
    </table>
 
−
    <br>
 
  
−
    <hr>
+
.caption-justify {
−
   <h1> EXPERIMENTS </h1>
+
   text-align: justify;
−
   <button class="accordion"> PLATE READER SETUP </button>
+
   margin: 0 auto;
−
    <div class="panel" style="line-height: 17em;">
+
  width: 70%;
 +
  font-style: italic;
 +
  font-size: 16px;
 +
}
  
−
      <div class="row">
+
.reference {
−
        <div class="column left">
+
    font-family: Arial;
−
          <table>
+
    font-size: 16px;
−
            <tr>
+
    font-weight: 100;
−
              <td style="padding:0;">
+
    line-height: 22px;
−
                <h3><i>Abs<sub>600</sub></i></h3>
+
    text-align: left;
−
              </td>
+
}
−
              <td>
+
−
                <ul style="list-style: none; margin: 0; padding: 1em; text-align:left; border-left: .5px solid black">
+
−
                  <li> Wavelength: 600nm </li>
+
−
                  <li> Read Speed: Normal </li>
+
−
                  <li> Delay: 100 msec </li>
+
−
                </ul>
+
−
              </td>
+
−
            </tr>
+
−
          </table>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <table>
+
−
            <tr>
+
−
              <td style="padding:0;">
+
−
                <h3><i>Fluorescence</i></h3>
+
−
              </td>
+
−
              <td>
+
−
                <ul style="list-style: none; margin: 0; padding: 1em; text-align:left; border-left: .5px solid black">
+
−
                  <li> Excitation: 485 </li>
+
−
                  <li>Emission: 525</li>
+
−
                  <li>Optics: Top</li>
+
−
                  <li>Gain: 50</li>
+
−
                  <li>Light Source: Xenon Flash</li>
+
−
                  <li>Lamp Energy: High</li>
+
−
                  <li>Read Speed: Normal</li>
+
−
                  <li>Delay: 100 msec</li>
+
−
                  <li>Read Height: 7 mm</li>
+
−
                </ul>
+
−
              </td>
+
−
            </tr>
+
−
          </table>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <button class="accordion"> OD600 REFERENCE POINT (CALIBRATION 1) </button>
+
.all-wrapper{
−
    <div class="panel">
+
  max-width: 1200px;
−
      <div class="row">
+
  position: relative;
−
        <div class="column left">
+
  margin: auto;
−
          <h3><i> Materials </i></h3>
+
  background-color: rgba(255, 255, 255, 1.00);
−
          <ul style="list-style: none;">
+
}
−
            <li>1 ml LUDOX CL-X</li>
+
−
            <li>ddH<sub>2</sub>O</li>
+
−
            <li>96-well plate (black)</li>
+
−
          </ul>
+
−
          <br>
+
−
          <h3><i> Method </i></h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;">100 µl of LUDOX was added into wells A1, B1, C1 and D1. </li>
+
−
            <li style="padding-left: 1em;">100 µl of ddH20 was added into wells A2, B2, C2 and D2.</li>
+
−
            <li style="padding-left: 1em;">Abs<sub>600nm</sub> was measured for all samples.</li>
+
−
          </ol>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <table style="width: 70%; font-size:1em;">
+
−
            <caption><i>Table 1: Abs<sub>600</sub> of LUDOX CL-X and blank replicates. Their corresponding arithmetic means were calculated and included, along with the corrected Abs<sub>600</sub>, reference OD<sub>600</sub> and conversion factor.</caption>
+
−
                    <tr>
+
−
                        <td> <i> Results </i> </td>
+
−
              <td style="background-color: #f2f2f2"> <i> LUDOX CL-X </i> </td>
+
−
              <td style="background-color: #f2f2f2"> <i> H<sub>2</sub>O </i></td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Replicate 1 </i> </td>
+
−
                <td> 0.056 </td>
+
−
                <td> 0.037 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Replicate 2 </i> </td>
+
−
                <td> 0.056 </td>
+
−
                <td> 0.038 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Replicate 3 </i> </td>
+
−
                <td> 0.056 </td>
+
−
                <td> 0.038 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Replicate 4 </i> </td>
+
−
                <td> 0.055 </td>
+
−
                <td> 0.038 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Arth. Mean </i> </td>
+
−
                <td> 0.056 </td>
+
−
                <td> 0.038 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Corrected Abs<sub>600</sub> </i> </td>
+
−
                <td> 0.018 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> Reference OD<sub>600</sub> </i> </td>
+
−
                <td> 0.063 </td>
+
−
              </tr>
+
−
              <tr>
+
−
                <td style="background-color: #f2f2f2"> <i> OD<sub>600</sub>/Abs<sub>600</sub> </i> </td>
+
−
                <td> 0.063 </td>
+
−
              </tr>
+
−
          </table>
+
−
          <br>
+
−
        </div>
+
−
      </div>
+
−
      <button class="accordion-closer">CLOSE</button>
+
−
    </div>
+
  
−
    <button class="accordion">PARTICLE STANDARD CURVE (CALIBRATION 2)</button>
+
.content-wrapper{
−
    <div class="panel">
+
  width: 90%;
 +
  position: relative;
 +
  margin: auto;
 +
}
  
−
      <div class="row">
+
.header{
−
        <div class="column left">
+
  width: 55%;
−
          <h3><i> Materials </i></h3>
+
  height: auto;
−
          <ul style="list-style:none;">
+
  margin: auto;
−
            <li>300 µl Silica beads (4.7 x 108 microspheres)</li>
+
  display: block;
−
            <li>ddH<sub>2</sub>O</li>
+
} 
−
            <li>96-well plate (black)</li>
+
−
          </ul>
+
−
          <br>
+
−
          <h3><i> Methods </i> </h3>
+
−
          <h3><i> <u> (A) To prepare the Microsphere Stock Solution </u> </i></h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;">Tube labelled “Silica Beads” was vortexed vigorously for 30 s.</li>
+
−
            <li style="padding-left: 1em;">96 µl of microspheres was immediately pipetted into a 1.5 ml eppendorf tube.</li>
+
−
            <li style="padding-left: 1em;">904 µl of ddH<sub>2</sub>0 was added to the microspheres. The eppendorf was vortexed well.</li>
+
−
          </ol>
+
−
          <img src="https://static.igem.org/mediawiki/2018/3/32/T--NUS_Singapore-A--InterLab_Fig1.png" alt="Fig 1" style="width: 100%; height: auto; margin: auto;">
+
−
          <p style="text-align: center;"><i> Figure 1: Graph of Abs<sub>600</sub> against particle count.</i><br><br></p>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <h3> <i> <u> (B) To prepare the serial dilution of microsphere </u> </i> </h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;">100 µl of ddH20 was added into wells A2, B2, C2, D2...A12, B12, C12, D12.</li>
+
−
            <li style="padding-left: 1em;">The microsphere stock solution was vortexed vigorously for 10 s before immediately adding 200 µl of microspheres into A1.</li>
+
−
            <li style="padding-left: 1em;">100 µl of microsphere stock solution was transferred from A1 to A2.</li>
+
−
            <li style="padding-left: 1em;">Mix A2 by pipetting up and down 3 times and transfer 100 µl into A3.</li>
+
−
            <li style="padding-left: 1em;">The subsequent dilutions were prepared as illustrated on Image A (below).</li>
+
−
            <li style="padding-left: 1em;">Samples were re-mixed immediately before putting it in the plate reader. Fluorescence<sub>(Abs600)</sub> all samples were measured. </li>
+
−
            <li style="padding-left: 1em;"> Fluorescence (Abs<sub>600</sub> ) of all samples were measured. Our results are reflected by Fig. 2 and Fig. 3. </li>
+
−
          </ol>
+
−
            <img src="https://static.igem.org/mediawiki/2018/5/50/T--NUS_Singapore-A--InterLab_Fig2.png" alt="Fig 2" style="width: 100%; height: auto; margin: auto;">
+
−
            <p style="text-align: center;"><i> Figure 2: Graph of Abs<sub>600</sub> against particle count, logarithmic scale.</i><br><br></p>
+
−
        </div>
+
−
      </div>
+
−
      <button class="accordion-closer">CLOSE</button>
+
−
    </div>
+
  
−
    <button class="accordion"> FLUORESCENCE STANDARD CURVE (CALIBRATION 3)</button>
 
−
    <div class="panel">
 
  
−
      <div class="row">
+
/********************* Add our own style here ********************************/
−
        <div class="column left">
+
−
          <h3><i> Materials </i></h3>
+
−
          <ul style="list-style:none;">
+
−
            <li>Fluorescein</li>
+
−
            <li>10 ml 1X PBS pH 7.4 - 7.6</li>
+
−
            <li>96-well plate (black)</li>
+
−
          </ul>
+
−
          <br>
+
−
          <h3><i> Methods </i> </h3><br>
+
−
          <h3><i> <u> (A) To prepare the fluorescein stock solution </u> </i></h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;">The fluorescein kit tube was spun down to make sure that the pellet was collected at the bottom of the tube. </li>
+
−
            <li style="padding-left: 1em;">10X fluorescein stock solution (100 µM) was prepared by resuspending fluorescein in 1 ml of 1X PBS. Fluorescein was checked to be properly dissolved in PBS by checking for no more visible particulates in the pipette tip when resuspending.</li>
+
−
            <li style="padding-left: 1em;"> 10X fluorescein stock solution was diluted with 1X PBS to make a 1X fluorescein solution (10 µM): 100 µl of 10X fluorescein stock solution was mixed with 900 µl of 1X PBS. </li>
+
−
          </ol>
+
−
          <img src="https://static.igem.org/mediawiki/2018/0/01/T--NUS_Singapore-A--InterLab_Fig3.png" alt="Fig 3" style="width: 100%; height: auto; margin: auto;">
+
−
          <p style="text-align: center;"><i> Figure 3: Graph of fluorescence against fluorescein concentration. </i><br><br></p>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <h3><i> <u> (B) To prepare the serial dilution of fluorescein </u> </i></h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;">100 µl of PBS was added into wells A2, B2, C2, D2...A12, B12, C12, D12.</li>
+
−
            <li style="padding-left: 1em;">200 µl of 1X fluorescein stock solution was added into A1, B1, C1 and D1. </li>
+
−
            <li style="padding-left: 1em;">100 µl of 1X fluorescein stock solution was transferred from A1 to A2. </li>
+
−
            <li style="padding-left: 1em;">Mix A2 by pipetting up and down 3 times and transfer 100 µl into A3. </li>
+
−
            <li style="padding-left: 1em;">The subsequent dilutions were prepared as illustrated by Fig. 4. </li>
+
−
            <li style="padding-left: 1em;">Fluorescence of all samples were measured, and our results are reflected by Fig. 5. </li>
+
−
          </ol>
+
−
          <img src="https://static.igem.org/mediawiki/2018/2/24/T--NUS_Singapore-A--InterLab_Fig4.png" alt="Fig 4" style="width: 100%; height: auto; margin: auto;">
+
−
          <p style="text-align: center;"><i> Figure 4: Graph of fluorescence against fluorescein concentration, logarithmic scale. </i><br><br></p>
+
−
        </div>
+
−
      </div>
+
−
      <button class="accordion-closer">CLOSE</button>
+
−
    </div>
+
  
−
    <button class="accordion">  CELL MEASUREMENTS  </button>
+
/****************************BASIC CSS STUFF ****************************************/
−
    <div class="panel">
+
h1 {
−
      <div class="row">
+
    font-family: Arial;
−
        <div class="column left">
+
    font-size: 36px;
−
          <h3><i> Materials </i></h3>
+
    font-style: normal;
−
          <ul style="list-style: none;">
+
    font-variant: normal;
−
            <li>Competent cells (Escherichia coli strain DH5α)</li>
+
    font-weight: 700;
−
            <li>Luria Bertani (LB) media</li>
+
    line-height: 38px;
−
            <li>Chloramphenicol (stock concentration 25 mg/ml dissolved in ethanol) </li>
+
}
−
            <li>50 ml Falcon tube (wrapped with a thick layer of paper towel to block light)</li>
+
h2 {
−
            <li>1.5 ml eppendorf tubes</li>
+
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
−
            <li>Incubator at 37 °C</li>
+
    font-size: 28px;
−
            <li>Ice bucket with ice </li>
+
    font-style: normal;
−
            <li>96-well plate (black)</li>
+
    font-variant: normal;
−
          </ul>
+
    font-weight: 700;
−
          <h3><i> Methods </i></h3>
+
    line-height: 34px;
−
          <h3><i> <u> Day 1: Transforming Escherichia coli strain DH5α with devices provided in the Distribution Kit </u> </i></h3>
+
}
−
          <ol>
+
−
            <li style="padding-left: 1em;"> Each device (powder form) was resuspended in 10 µl of ddH<sub>2</sub>O.</li>
+
−
            <li style="padding-left: 1em;"> 1 µl of each respective plasmid was transformed into 50 µl <i> E. coli </i> DH5α via electroporation.</li>
+
−
            <li style="padding-left: 1em;"> 500 µl of LB was immediately added into each tube for recovery of the transformed cells.</li>
+
−
            <li style="padding-left: 1em;"> Each sample tube was incubated with shaking at 37 °C for 30 mins before 100 µl of each sample was plated onto LB + Chlor agar plates and grown overnight at 37 °C.</li>
+
−
          </ol>
+
−
          <h3><i> <u> Day 2: Selecting Colonies and Growing Cells Overnight </u> </i></h3>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;"> 2 colonies were selected for being both relatively bigger and more separated from the other colonies. </li>
+
−
            <li style="padding-left: 1em;"> The selected colonies were then inoculated into 5 ml of LB + Chlor and grown overnight at 37 °C at 220 rpm. </li>
+
−
          </ol>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <h3 style="padding:none;"><i> <u> Day 3: Cell Growth, Sampling and Assay </u> </i></h3>
+
−
          <p><i> Part 1: Abs<sub>600</sub>nm and Fluorescence Measurement </i></p>
+
−
          <ol>
+
−
            <li style="padding-left: 1em;"> A cell stock of each overnight culture was made in glycerol for storage, in case there is a need to use them again. To make this stock, 850 µl of culture was added to 350 µl of glycerol.</li>
+
−
            <li style="padding-left: 1em;"> A 1:10 dilution of each overnight culture was made in LB + Chlor (0.5 mL culture + 4.5 mL media).</li>
+
−
            <li style="padding-left: 1em;"> Abs<sub>600</sub>nm of the 1:10 diluted cultures were measured. </li>
+
−
            <li style="padding-left: 1em;"> Cultures were diluted further to a target Abs600nm of 0.02 in a final volume of 12 ml LB + Chlor in a 50 ml falcon tube that was covered with tissue paper.</li>
+
−
            <li style="padding-left: 1em;"> 500 µl of samples of the diluted cultures at 0 h were transferred into 1.5 ml eppendorf tubes labelled A and B. The tubes were placed on ice until they were ready to be laid out according to the plate diagram to measure fluorescence and Abs600.
+
−
              Fluorescence readings at T = 0 h are shown in Fig. 6.</li>
+
−
            <li style="padding-left: 1em;"> The rest of the cultures were incubated at 37 °C and 220 rpm for 6 hours.</li>
+
−
            <li style="padding-left: 1em;"> After the 6-hour-incubation, 500 µl of these cultures were transferred into 1.5 ml eppendorf tubes before being laid out according to the plate diagram below. The samples’ fluorescence and Abs600nm were measured again. Fluorescence readings
+
−
              at T = 6 h are shown in Fig. 7.</li>
+
−
          </ol>
+
−
          <br>
+
−
          <p><i> Part 2: Colony Forming Units per 0.1 OD600 E. coli Cultures </i></p>
+
−
          <p>Only Positive Control (BBa_I20270) cultures and Negative Control (BBa_R0040) were involved in this part.</p>
+
−
          <ol>
+
−
            <li style="padding-left: 3em;">Overnight cultures were diluted 10-fold in LB + Chlor media to ensure they lay in the linear detection range of our plate reader.</li>
+
−
            <li style="padding-left: 3em;">The OD<sub>600</sub>nm of cell cultures were measured. Our results are reflected by Fig. 8.</li>
+
−
            <li style="padding-left: 3em;"> Overnight cultures were diluted to OD<sub>600</sub> = 0.1 in 1 ml of LB + Chlor media. Each culture was done in triplicate.</li>
+
−
            <li style="padding-left: 3em;"> Diluted overnight cultures were checked to ensure that OD600 = 0.1, excluding the blank measurement</li>
+
−
            <li style="padding-left: 3em;"> For each starting sample, serial dilutions were prepared as shown in Fig. 9.</li>
+
−
            <li style="padding-left: 3em;"> 100 µl of Dilutions 3, 4 and 5 were aseptically spread on LB + Chlor agar plates.</li>
+
−
            <li style="padding-left: 3em;"> The plates were incubated overnight at 37 °C.</li>
+
−
            <li style="padding-left: 3em;"> Colonies on each plate were counted. Our results are reflected by Fig. 10.</li>
+
−
          </ol>
+
−
        </div>
+
−
      </div>
+
−
      <br>
+
  
−
      <table class="measurement_table">
+
h3 {
−
        <caption><i>Table 2: Fluorescence raw readings.</i></caption>
+
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
−
        <tr style="background-color: #f2f2f2">
+
    font-size: 24px;
−
          <td> <i> Hour 0 </i> </td>
+
    font-style: normal;
−
          <td> <i> Nge. Control </i> </td>
+
    font-variant: normal;
−
          <td> <i> Pos. Control </i> </td>
+
    font-weight: 700;
−
          <td> <i> Device 1 </i> </td>
+
    line-height: 29px;
−
          <td> <i> Device 2 </i> </td>
+
}
−
          <td> <i> Device 3 </i> </td>
+
−
          <td> <i> Device 4 </i> </td>
+
−
          <td> <i> Device 5 </i> </td>
+
−
          <td> <i> Device 6 </i> </td>
+
−
          <td> <i> LB + Chlor (blank) </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 1 </i> </td>
+
−
          <td> 34 </td>
+
−
          <td> 76 </td>
+
−
          <td> 361 </td>
+
−
          <td> 122 </td>
+
−
          <td> 53 </td>
+
−
          <td> 318 </td>
+
−
          <td> 289 </td>
+
−
          <td> 88 </td>
+
−
          <td> 47 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 2 </i> </td>
+
−
          <td> 71 </td>
+
−
          <td> 67 </td>
+
−
          <td> 418 </td>
+
−
          <td> 131 </td>
+
−
          <td> 42 </td>
+
−
          <td> 338 </td>
+
−
          <td> 283 </td>
+
−
          <td> 57 </td>
+
−
          <td> 34 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 3 </i> </td>
+
−
          <td> 52 </td>
+
−
          <td> 66 </td>
+
−
          <td> 386 </td>
+
−
          <td> 127 </td>
+
−
          <td> 44 </td>
+
−
          <td> 309 </td>
+
−
          <td> 304 </td>
+
−
          <td> 90 </td>
+
−
          <td> 27 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Colony 1,  Replicate 4 </i> </td>
+
−
          <td> 53 </td>
+
−
          <td> 101 </td>
+
−
          <td> 391 </td>
+
−
          <td> 112 </td>
+
−
          <td> 45 </td>
+
−
          <td> 367 </td>
+
−
          <td> 314 </td>
+
−
          <td> 94 </td>
+
−
          <td> 33 </td>
+
−
        </tr>
+
  
−
        <tr>
+
h4 {
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Repplicate 1 </i> </td>
+
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
−
          <td> 65 </td>
+
    font-size: 20px;
−
          <td> 61 </td>
+
    font-style: normal;
−
          <td> 357 </td>
+
    font-variant: normal;
−
          <td> 100 </td>
+
    font-weight: 700;
−
          <td> 8 </td>
+
    line-height: 29px;
−
          <td> 329 </td>
+
}
−
          <td> 277 </td>
+
−
          <td> 76 </td>
+
−
          <td> 35 </td>
+
−
        </tr>
+
  
−
        <tr>
+
p{
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 2</i> </td>
+
    font-family: Arial;
−
          <td> 47 </td>
+
    font-size: 20px;
−
          <td> 83 </td>
+
    font-style: normal;
−
          <td> 389 </td>
+
    font-variant: normal;
−
          <td> 144 </td>
+
    font-weight: 100;
−
          <td> 24 </td>
+
    line-height: 29px;
−
          <td> 339 </td>
+
    text-align: justify;
−
          <td> 2278 </td>
+
}
−
          <td> 91 </td>
+
−
          <td> 38 </td>
+
−
        </tr>
+
  
−
        <tr>
+
p~ul li, p~ol li {
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 3 </i> </td>
+
    font-family: Arial;
−
          <td> 79 </td>
+
    font-size: 20px;
−
          <td> 74 </td>
+
    font-style: normal;
−
          <td> 377 </td>
+
    font-variant: normal;
−
          <td> 138 </td>
+
    font-weight: 100;
−
          <td> 33 </td>
+
    line-height: 29px;
−
          <td> 335 </td>
+
    text-align: justify;
−
          <td> 280 </td>
+
}
−
          <td> 85 </td>
+
−
          <td> 45 </td>
+
−
        </tr>
+
  
−
        <tr>
+
.row ul li, p~ol li {
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 4 </i> </td>
+
    font-family: Arial;
−
          <td> 61 </td>
+
    font-size: 20px;
−
          <td> 65 </td>
+
    font-style: normal;
−
          <td> 350 </td>
+
    font-variant: normal;
−
          <td> 142 </td>
+
    font-weight: 100;
−
          <td> 45 </td>
+
    line-height: 29px;
−
          <td> 327 </td>
+
    text-align: justify;
−
          <td> 282 </td>
+
}
−
          <td> 72 </td>
+
−
          <td> 31 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Hour 6 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Nge. Control </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Pos. Control </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 4 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 5 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 6 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> LB + Chlor (blank) </i> </td>
+
−
        </tr>
+
  
−
        <tr>
+
blockquote {
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 1 </i> </td>
+
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
−
          <td> 36 </td>
+
    font-size: 27px;
−
          <td> 461 </td>
+
    font-style: normal;
−
          <td> 1252 </td>
+
    font-variant: normal;
−
          <td> 920 </td>
+
    font-weight: 400;
−
          <td> 58 </td>
+
    line-height: 36px;
−
          <td> 2389 </td>
+
}
−
          <td> 338 </td>
+
pre {
−
          <td> 436 </td>
+
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
−
          <td> 35 </td>
+
    font-size: 18px;
−
        </tr>
+
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
}
  
−
        <tr>
 
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 2 </i> </td>
 
−
          <td> 45 </td>
 
−
          <td> 500 </td>
 
−
          <td> 1351 </td>
 
−
          <td> 988 </td>
 
−
          <td> 55 </td>
 
−
          <td> 2621 </td>
 
−
          <td> 354 </td>
 
−
          <td> 433 </td>
 
−
          <td> 54 </td>
 
−
        </tr>
 
  
−
        <tr>
 
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 3 </i> </td>
 
−
          <td> 53 </td>
 
−
          <td> 501 </td>
 
−
          <td> 1390 </td>
 
−
          <td> 1014 </td>
 
−
          <td> 60 </td>
 
−
          <td> 2757 </td>
 
−
          <td> 393 </td>
 
−
          <td> 446 </td>
 
−
          <td> 24 </td>
 
−
        </tr>
 
  
−
        <tr>
+
/********************** CSS FROM DESIGN *****************************************************/
−
          <td style="background-color: #f2f2f2"> <i> Colony 1,  Replicate 4 </i> </td>
+
−
          <td> 61 </td>
+
−
          <td> 488 </td>
+
−
          <td> 1332 </td>
+
−
          <td> 1039 </td>
+
−
          <td> 36 </td>
+
−
          <td> 2793 </td>
+
−
          <td> 351 </td>
+
−
          <td> 448 </td>
+
−
          <td> 31 </td>
+
−
        </tr>
+
  
−
        <tr>
+
    .figures{
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Repplicate 1 </i> </td>
+
    margin: auto auto;
−
          <td> 30 </td>
+
    max-width: 80%;
−
          <td> 429 </td>
+
    }
−
          <td> 971 </td>
+
    .figures img{
−
          <td> 821 </td>
+
    display: inline-block;
−
          <td> 44 </td>
+
    }
−
          <td> 2142 </td>
+
    .figures2{
−
          <td> 371 </td>
+
    margin: auto auto;
−
          <td> 437 </td>
+
    max-width: 80%;
−
          <td> 8 </td>
+
    }
−
        </tr>
+
    .figures2 figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
    .figures2{
 +
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    }
 +
    .figures figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
    .no-italics {
 +
    font-style: normal; 
 +
    }
  
−
        <tr>
 
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 2</i> </td>
 
−
          <td> 55 </td>
 
−
          <td> 516 </td>
 
−
          <td> 1199 </td>
 
−
          <td> 832 </td>
 
−
          <td> 96 </td>
 
−
          <td> 2390 </td>
 
−
          <td> 378 </td>
 
−
          <td> 401 </td>
 
−
          <td> 24 </td>
 
−
        </tr>
 
  
−
        <tr>
 
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 3 </i> </td>
 
−
          <td> 38 </td>
 
−
          <td> 483 </td>
 
−
          <td> 1239 </td>
 
−
          <td> 838 </td>
 
−
          <td> 74 </td>
 
−
          <td> 2401 </td>
 
−
          <td> 425 </td>
 
−
          <td> 423 </td>
 
−
          <td> 40 </td>
 
−
        </tr>
 
  
−
        <tr>
+
/****************************THIS IS CSS FROM INTERLAB*******************************/
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 4 </i> </td>
+
/* The accordion is the class given to the drop-down menu thingy */
−
          <td> 49 </td>
+
.accordion {
−
          <td> 460 </td>
+
  background-color: #3498db;
−
          <td> 1129 </td>
+
  color: #fff;
−
          <td> 896 </td>
+
  cursor: pointer;
−
          <td> 57 </td>
+
  padding: 15px;
−
          <td> 2528 </td>
+
  width: 100%;
−
          <td> 384 </td>
+
  text-align: left;
−
          <td> 423 </td>
+
  border: none;
−
          <td> 51 </td>
+
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
−
        </tr>
+
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
−
      </table>
+
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
−
      <br>
+
  outline: none;
 +
  /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 +
  /*  transition: 0.4s linear;    */
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  margin-bottom: 6px;
 +
}
  
−
      <br>
+
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
−
      <table class="measurement_table">
+
.active,
−
        <caption><i>Table 3: OD<sub>600</sub> raw readings. </i></caption>
+
.accordion:hover {
−
        <tr>
+
  font: bold 20px "Montserrat", sans-serif;
−
          <td style="background-color: #f2f2f2"> <i> Hour 0: </i> </td>
+
  background-color: #2980b9;
−
          <td style="background-color: #f2f2f2"> <i> Nge. Control </i> </td>
+
}
−
          <td style="background-color: #f2f2f2"> <i> Pos. Control </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 4 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 5 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 6 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> LB + Chlor (blank) </i> </td>
+
−
        </tr>
+
  
−
        <tr>
+
/* Style the accordion panel. Note: hidden by default */
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 1 </i> </td>
+
.panel {
−
          <td> 0.061 </td>
+
  background-color: transparent;
−
          <td> 0.06 </td>
+
  text-align: center;
−
          <td> 0.061 </td>
+
  margin-top: 0;
−
          <td> 0.063 </td>
+
  max-height: 0;
−
          <td> 0.059 </td>
+
  overflow: hidden;
−
          <td> 0.059 </td>
+
  transition: max-height 0.2s ease-out;
−
          <td> 0.063 </td>
+
}
−
          <td> 0.061 </td>
+
.panel-inside{
−
          <td> 0.043 </td>
+
  display: inline-block;
−
        </tr>
+
  text-align: justify;
 +
  max-width: 100%;
 +
}
  
−
        <tr>
+
.accordion:after {
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 2 </i> </td>
+
  font-family: FontAwesome;
−
          <td> 0.062 </td>
+
  font-size: 27px;
−
          <td> 0.062 </td>
+
  font-weight: 800;
−
          <td> 0.063 </td>
+
  color: #fff;
−
          <td> 0.063 </td>
+
  content: "\f067";
−
          <td> 0.063 </td>
+
  float: right;
−
          <td> 0.062 </td>
+
  margin-left: 5px;
−
          <td> 0.065 </td>
+
}
−
          <td> 0.063 </td>
+
.active:after {
−
          <td> 0.043 </td>
+
  font-family: FontAwesome;
−
        </tr>
+
  content: "\f068";
 +
}
 +
.accordion-closer{
 +
  background-color: #ed1144;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  outline: none;
 +
  padding: 8px;
 +
  width: 12.0%;
 +
  border-radius: 25px;
 +
  text-align: left;
 +
  border-color: transparent;
 +
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  margin: 6px 0px;
 +
}
 +
.accordion-closer:hover {
 +
  font: bold 20px "Montserrat", sans-serif;
 +
  background-color: #a80d31;
 +
}
 +
.accordion-closer:after{
 +
  font-family: FontAwesome;
 +
  font-size: 27px;
 +
  content:"\f00d";
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
table,
 +
th,
 +
td {
 +
  border: none;
 +
  border-collapse: collapse;
 +
}
 +
table {
 +
  font-family: "Arial";
 +
  font-size: 18px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width: 95%;
 +
}
  
−
        <tr>
+
th,
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 3 </i> </td>
+
td {
−
          <td> 0.063 </td>
+
  text-align: left;
−
          <td> 0.062 </td>
+
  padding: 3px;
−
          <td> 0.064 </td>
+
}
−
          <td> 0.065 </td>
+
−
          <td> 0.064 </td>
+
−
          <td> 0.061 </td>
+
−
          <td> 0.063 </td>
+
−
          <td> 0.061 </td>
+
−
          <td> 0.043 </td>
+
−
        </tr>
+
  
−
        <tr>
+
img {
−
          <td style="background-color: #f2f2f2"> <i> Colony 1,  Replicate 4 </i> </td>
+
  display: block;
−
          <td> 0.062 </td>
+
  margin-left: auto;
−
          <td> 0.062 </td>
+
  margin-right: auto;
−
          <td> 0.065 </td>
+
  max-width:100%;
−
          <td> 0.063 </td>
+
}
−
          <td> 0.063 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.063 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.043 </td>
+
−
        </tr>
+
  
−
        <tr>
+
.graph,
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Repplicate 1 </i> </td>
+
.measurement_table {
−
          <td> 0.06 </td>
+
  width: 70%;
−
          <td> 0.063 </td>
+
  height: auto;
−
          <td> 0.064 </td>
+
  margin: auto;
−
          <td> 0.063 </td>
+
}
−
          <td> 0.062 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.064 </td>
+
−
          <td> 0.045 </td>
+
−
        </tr>
+
  
−
        <tr>
+
.interlab-header {
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 2</i> </td>
+
  width: 47.5%;
−
          <td> 47 </td>
+
  height: auto;
−
          <td> 83 </td>
+
  margin: auto;
−
          <td> 389 </td>
+
}
−
          <td> 144 </td>
+
.center-justified {
−
          <td> 24 </td>
+
  text-align: justify;
−
          <td> 339 </td>
+
  margin: 0 auto;
−
          <td> 2278 </td>
+
  width: 70%;
−
          <td> 91 </td>
+
}
−
          <td> 38 </td>
+
−
        </tr>
+
  
−
        <tr>
+
/**********************
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 3 </i> </td>
+
    Start of two columns */
−
          <td> 0.061 </td>
+
* {
−
          <td> 0.063 </td>
+
  box-sizing: border-box;
−
          <td> 0.061 </td>
+
}
−
          <td> 0.065 </td>
+
−
          <td> 0.061 </td>
+
−
          <td> 0.065 </td>
+
−
          <td> 0.06 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.046 </td>
+
−
        </tr>
+
  
−
        <tr>
+
/* Create two columns that floats next to each other */
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 4 </i> </td>
+
.column {
−
          <td> 0.061 </td>
+
  float: left;
−
          <td> 0.063 </td>
+
  text-align: left;
−
          <td> 0.061 </td>
+
}
−
          <td> 0.065 </td>
+
−
          <td> 0.061 </td>
+
−
          <td> 0.065 </td>
+
−
          <td> 0.06 </td>
+
−
          <td> 0.062 </td>
+
−
          <td> 0.046 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> Hour 6 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Nge. Control </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Pos. Control </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 4 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 5 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Device 6 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> LB + Chlor (blank) </i> </td>
+
−
        </tr>
+
  
−
        <tr>
+
.left {
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 1 </i> </td>
+
  width: 48%;
−
          <td> 0.428 </td>
+
  margin-right: 2%;
−
          <td> 0.415 </td>
+
}
−
          <td> 0.174 </td>
+
−
          <td> 0.445 </td>
+
−
          <td> 0.455 </td>
+
−
          <td> 0.418 </td>
+
−
          <td> 0.074 </td>
+
−
          <td> 0.432 </td>
+
−
          <td> 0.042 </td>
+
−
        </tr>
+
  
−
        <tr>
+
.right {
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 2 </i> </td>
+
  width: 48%;
−
          <td> 0.452 </td>
+
  margin-left: 2%;
−
          <td> 0.435 </td>
+
}
−
          <td> 0.19 </td>
+
−
          <td> 0.481 </td>
+
−
          <td> 0.481 </td>
+
−
          <td> 0.46 </td>
+
−
          <td> 0.08 </td>
+
−
          <td> 0.469 </td>
+
−
          <td> 0.042 </td>
+
−
        </tr>
+
  
−
        <tr>
+
/* Clear floats after the columns */
−
          <td style="background-color: #f2f2f2"> <i> Colony 1, Replicate 3 </i> </td>
+
.row:after {
−
          <td> 0.459 </td>
+
  content: "";
−
          <td> 0.434 </td>
+
  display: table;
−
          <td> 0.198 </td>
+
  clear: both;
−
          <td> 0.495 </td>
+
}
−
          <td> 0.487 </td>
+
−
          <td> 0.462 </td>
+
−
          <td> 0.081 </td>
+
−
          <td> 0.46 </td>
+
−
          <td> 0.042 </td>
+
−
        </tr>
+
  
−
        <tr>
+
/********************
−
          <td style="background-color: #f2f2f2"> <i> Colony 1,  Replicate 4 </i> </td>
+
    End of two columns */
−
          <td> 0.461 </td>
+
−
          <td> 0.439 </td>
+
−
          <td> 0.185 </td>
+
−
          <td> 0.495 </td>
+
−
          <td> 0.479 </td>
+
−
          <td> 0.477 </td>
+
−
          <td> 0.076 </td>
+
−
          <td> 0.467 </td>
+
−
          <td> 0.043 </td>
+
−
        </tr>
+
  
−
        <tr>
+
/**************************************CSS FOR NOTEBOOK***************************************************/
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Repplicate 1 </i> </td>
+
−
          <td> 0.446 </td>
+
−
          <td> 0.414 </td>
+
−
          <td> 0.138 </td>
+
−
          <td> 0.434 </td>
+
−
          <td> 0.443 </td>
+
−
          <td> 0.406 </td>
+
−
          <td> 0.079 </td>
+
−
          <td> 0.419 </td>
+
−
          <td> 0.043 </td>
+
−
        </tr>
+
  
−
        <tr>
 
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 2</i> </td>
 
−
          <td> 0.467 </td>
 
−
          <td> 0.447 </td>
 
−
          <td> 0.149 </td>
 
−
          <td> 0.452 </td>
 
−
          <td> 0.484 </td>
 
−
          <td> 0.437 </td>
 
−
          <td> 0.076 </td>
 
−
          <td> 0.435 </td>
 
−
          <td> 0.043 </td>
 
−
        </tr>
 
  
−
         <tr>
+
    img {
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 3 </i> </td>
+
         display: block;
−
          <td> 0.496 </td>
+
        margin-left: auto;
−
          <td> 0.448 </td>
+
        margin-right: auto;
−
          <td> 0.153 </td>
+
    }
−
          <td> 0.449 </td>
+
−
          <td> 0.485 </td>
+
−
          <td> 0.455 </td>
+
−
          <td> 0.082 </td>
+
−
          <td> 0.435 </td>
+
−
          <td> 0.043 </td>
+
−
        </tr>
+
  
−
        <tr>
+
    .discussion_graph, .measurement_table{
−
          <td style="background-color: #f2f2f2"> <i> Colony 2, Replicate 4 </i> </td>
+
         width: 70%;
−
          <td> 0.483 </td>
+
         height: auto;
−
          <td> 0.444 </td>
+
         margin: auto;
−
          <td> 0.148 </td>
+
    }
−
          <td> 0.475 </td>
+
−
          <td> 0.467 </td>
+
−
          <td> 0.455 </td>
+
−
          <td> 0.079 </td>
+
−
          <td> 0.409 </td>
+
−
          <td> 0.04 </td>
+
−
        </tr>
+
−
      </table>
+
−
      <br>
+
−
      <br>
+
−
      <table class="measurement_table">
+
−
         <caption><i>Table 4: Counts for colony-forming units (CFUs).</i></caption>
+
−
         <tr style="background-color: #f2f2f2">
+
−
          <td> <i> D4 </i> </td>
+
−
          <td> <i> 8 x 10<sup>5</sup> </i> </td>
+
−
          <td> <i> NCAI </i> </td>
+
−
          <td> <i> NCA2 </i> </td>
+
−
          <td> <i> NCA3 </i> </td>
+
−
          <td> <i> NCB1 </i> </td>
+
−
          <td> <i> NCB2 </i> </td>
+
−
          <td> <i> NCB3 </i> </td>
+
−
          <td> <i> Avg NCA </i> </td>
+
−
          <td> <i> Avg NCB </i> </td>
+
−
         </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 445 </td>
+
−
          <td> 286 </td>
+
−
          <td> 649 </td>
+
−
          <td> 173 </td>
+
−
          <td> 608 </td>
+
−
          <td> 945 </td>
+
−
          <td> 4.60E + 02 </td>
+
−
          <td> 5.75E + 02 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 195 </td>
+
−
          <td> 219 </td>
+
−
          <td> 245 </td>
+
−
          <td> 232 </td>
+
−
          <td> 250 </td>
+
−
          <td> 253 </td>
+
−
          <td> 2.20E + 02 </td>
+
−
          <td> 2.45E + 02 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> D5 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> 8 x 10<sup>5</sup> </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg NCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg NCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 49 </td>
+
−
          <td> 32 </td>
+
−
          <td> 89 </td>
+
−
          <td> 32 </td>
+
−
          <td> 153 </td>
+
−
          <td> 418 </td>
+
−
          <td> 5.67E + 01 </td>
+
−
          <td> 2.01E + 02 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 36 </td>
+
−
          <td> 54 </td>
+
−
          <td> 35 </td>
+
−
          <td> 29 </td>
+
−
          <td> 4 </td>
+
−
          <td> 27 </td>
+
−
          <td> 4.17E + 02 </td>
+
−
          <td> 2.00E + 02 </td>
+
−
        </tr>
+
−
      </table>
+
  
−
      <br>
+
    .tablinks{
−
      <table class="measurement_table">
+
    cursor: pointer;
−
        <caption><i>Table 5: Cell concentration calculated by multiplying CFUs with the corresponding dilution factors.</i></caption>
+
    }
−
        <tr>
+
    .months-container{
−
          <td style="background-color: #f2f2f2"> <i> D4 </i> </td>
+
    text-align: justify;
−
          <td style="background-color: #f2f2f2"> <i> 8 x 10<sup>5</sup> </i> </td>
+
    margin:6px 18% 6px 18%;
−
          <td style="background-color: #f2f2f2"> <i> NCAI </i> </td>
+
    }
−
          <td style="background-color: #f2f2f2"> <i> NCA2 </i> </td>
+
    .months-container div{
−
          <td style="background-color: #f2f2f2"> <i> NCA3 </i> </td>
+
    width: auto;
−
          <td style="background-color: #f2f2f2"> <i> NCB1 </i> </td>
+
    margin: 0 2px 2px 0;
−
          <td style="background-color: #f2f2f2"> <i> NCB2 </i> </td>
+
    text-align: center;
−
          <td style="background-color: #f2f2f2"> <i> NCB3 </i> </td>
+
    font-family: "Montserrat";
−
          <td style="background-color: #f2f2f2"> <i> Avg NCA </i> </td>
+
    font-size: 18px;
−
          <td style="background-color: #f2f2f2"> <i> Avg NCB </i> </td>
+
    display:inline-block;
−
        </tr>
+
    }
−
        <tr>
+
    .months-container:after{
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
    content: '';
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
−
          <td> 3.52E + 09 </td>
+
    display: inline-block;
−
          <td> 2.24E + 09 </td>
+
     }
−
          <td> 5.14E + 09 </td>
+
−
          <td> 1.41E + 09 </td>
+
−
          <td> 4.72E + 09 </td>
+
−
          <td> 7.49E + 09 </td>
+
−
          <td> 3.64E + 09 </td>
+
−
          <td> 4.54E + 09 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 1.61E + 09 </td>
+
−
          <td> 1.95E + 09 </td>
+
−
          <td> 2.11E + 09 </td>
+
−
          <td> 1.70E + 09 </td>
+
−
          <td> 1.85E + 09 </td>
+
−
          <td> 2.25E + 09 </td>
+
−
          <td> 1.89E + 09 </td>
+
−
          <td> 1.93E + 09 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> D5 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> 8 x 10<sup>5</sup> </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg NCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg NCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 3.88E + 09 </td>
+
−
          <td> 2.51E + 09 </td>
+
−
          <td> 7.05E + 09 </td>
+
−
          <td> 2.61E + 09 </td>
+
−
          <td> 1.19E + 10 </td>
+
−
          <td> 3.31E + 10 </td>
+
−
          <td> 4.48E + 09 </td>
+
−
          <td> 1.59E + 10 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCAI </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB1 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB2 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB3 </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCA </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg PCB </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i>        </i> </td>
+
−
          <td> 2.97E + 09 </td>
+
−
          <td> 4.80E + 09 </td>
+
−
          <td> 3.01E + 09 </td>
+
−
          <td> 2.13E + 09 </td>
+
−
          <td> 2.96E + 08 </td>
+
−
          <td> 2.40E + 09 </td>
+
−
          <td> 3.59E + 09 </td>
+
−
          <td> 1.61E + 09 </td>
+
−
        </tr>
+
−
      </table>
+
−
      <br>
+
−
      <br>
+
−
      <table class="measurement_table">
+
−
        <caption><i>Table 6: CFU/mL/OD.</i></caption>
+
−
        <tr>
+
−
          <td> <i>      </i> </td>
+
−
          <td style="background-color: #f2f2f2"> <i> Avg of D4 and D5 </i> </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> NCA </i> </td>
+
−
          <td> 4.06E + 09 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> NCB </i> </td>
+
−
          <td> 1.02E + 10 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> PCA </i> </td>
+
−
          <td> 2.74E + 09 </td>
+
−
        </tr>
+
−
        <tr>
+
−
          <td style="background-color: #f2f2f2"> <i> PCB </i> </td>
+
−
          <td> 1.77E + 09 </td>
+
−
        </tr>
+
−
      </table>
+
−
      <br>
+
−
      <button class="accordion-closer">CLOSE</button>
+
−
     </div>
+
  
−
    <button class="accordion"> FLOW CYTOMETRY </button>
+
/* Style the main tab content */
−
    <div class="panel">
+
.tabcontent {
−
      <div class="row">
+
    display: none;
−
        <div class="column left">
+
    border: none;
−
          <h3><i> Materials </i></h3>
+
    margin: none;
−
          <ol>
+
    -webkit-animation: fadeEffect 1s;
−
            <li>SpheroTech Rainbow calibration beads, type RCP-30-5A (Lot Number: AAF02) </li>
+
     animation: fadeEffect 1s;
−
            <li>Flow cytometer set to collect 10,000 events per well or a read time of 1 min per well</li>
+
     min-height: 500px;
−
          </ol>
+
}
−
        </div>
+
−
        <div class="column right">
+
−
          <h3><i> Methods </i></h3>
+
−
          <ol>
+
−
            <li>A sample of SpheroTech beads was prepared according to the manufacturer instructions</li>
+
−
            <li>Plate setup was as shown below.</li>
+
−
          </ol>
+
−
        </div>
+
−
      </div>
+
−
      <button class="accordion-closer">CLOSE</button>
+
−
     </div>
+
−
     <br>
+
  
−
    <hr>
+
/* Fade in tabs */
−
    <h1>DISCUSSION</h1>
+
@-webkit-keyframes fadeEffect {
−
     <h2> Abs<sub>600</sub> nm </h2>
+
     from {opacity: 0;}
−
     <p>We inferred the rate of colony growth from net Abs600 values - a common method for measuring cell concentration. All cells except for cells transformed with Devices 1 and 5 had comparable rates of growth. In cells transformed with Devices 1 and 5,
+
     to {opacity: 1;}
−
      the increase in net Abs600 was significantly slower than cells transformed with the rest of the devices (Fig. 5, 6).</p>
+
}
−
    <br>
+
  
−
    <img src="https://static.igem.org/mediawiki/2018/f/fa/T--NUS_Singapore-A--InterLab_Fig5.png" alt="Fig 5" class="discussion_graph">
+
@keyframes fadeEffect {
−
     <div style="margin: auto; max-width: 70%; text-align: center;">
+
     from {opacity: 0;}
−
      <p style="text-align: center;"><i> Figure 5: Graph comparing the net Abs<sub>600</sub> at T = 0 h for each colony using each control/device.</i>
+
    to {opacity: 1;}
−
      </p>
+
}
−
    </div>
+
−
    <br>
+
  
−
    <img src="https://static.igem.org/mediawiki/2018/7/7c/T--NUS_Singapore-A--InterLab_Fig6.png" alt="Fig 6" class="discussion_graph">
+
/**************************THIS IS CSS FOR SAFETY*************************************/
−
    <div style="margin: auto; max-width: 70%; text-align: center;">
+
 
−
      <p style="text-align: center;"><i> Figure 6: Graph comparing the net Abs<sub>600</sub> at T = 6 h for each colony using each control/device.</i>
+
.pictures{
−
      </p>
+
  width: 50px;
−
    </div>
+
  height: 50px;
−
    <br>
+
  background-color: grey;
 +
}
  
−
        <h2> µM Fluorescein per OD </h2>
 
−
        <p>Cells transformed with Devices 1, 4 and 5 had the highest fluorescein readings per OD (Fig. 7, 8). The µM of fluorescein per OD of cells transformed with Device 3 were very low and at levels comparable to cells transformed with the negative control.
 
−
          On the other hand, cells transformed with Devices 2 and 6 had similar µM fluorescein per OD to that of cells transformed with the positive control. Similar trends were observed for Molecules of Equivalent Fluorescence Level (MEFL)/particle (Fig.
 
−
          9, 10).
 
−
        </p>
 
−
        <br>
 
−
        <img src="https://static.igem.org/mediawiki/2018/7/79/T--NUS_Singapore-A--InterLab_Fig7.png" alt="Fig 7" class="discussion_graph">
 
−
        <div style="margin: auto; max-width: 70%; text-align: center;">
 
−
          <p style="text-align: center;"><i> Figure 7: Graph comparing the net mM fluorescein per OD at T = 0 h for each colony using each control/device.</i>
 
−
          </p>
 
−
        </div>
 
−
        <br>
 
  
−
        <img src="https://static.igem.org/mediawiki/2018/6/6c/T--NUS_Singapore-A--InterLab_Fig8.png" alt="Fig 8" class="discussion_graph">
+
/*****************************CSS FROM EXPERT INT *******************************************/
−
        <div style="margin: auto; max-width: 70%; text-align: center;">
+
.carousel-3d-slide {
−
          <p style="text-align: center;"><i> Figure 8: Graph comparing the net mM fluorescein per OD at T = 6 h for each colony using each control/device.</i>
+
      height: auto !important;
−
          </p>
+
      background-color: rgba(0, 0, 0, 0.25) !important;
−
        </div>
+
}
−
        <br>
+
.carousel-3d-container figure {
 +
  margin:0;
 +
}
 +
.carousel-3d-container figcaption {
 +
  position: absolute;
 +
  background-color: rgba(0, 0, 0, 0.5);
 +
  color: #fff;
 +
  bottom: 0;
 +
  position: absolute;
 +
  bottom: 0;
 +
  padding: 15px;
 +
  font-size: 12px;
 +
  min-width: 100%;
 +
  box-sizing: border-box;
 +
}
 +
/***********************************END OF STYLING FOR CAROUSEL*******************************/
 +
   
 +
    /* Style the tab */
  
−
        <img src="https://static.igem.org/mediawiki/2018/f/f1/T--NUS_Singapore-A--InterLab_Fig9.png" alt="Fig 9" class="discussion_graph">
+
/* Style the tab boxes */
−
        <div style="margin: auto; max-width: 70%; text-align: center;">
+
.sponsor-boxes{
−
          <p style="text-align: center;"><i> Figure 9: Graph comparing the Molecules of Equivalent Fluorescent Level (MEFL) per particle at T = 0 h for each colony using each control/device.</i>
+
  vertical-align: 50%;
−
          </p>
+
  outline: none;
−
        </div>
+
  border: none;
−
        <br>
+
  cursor: pointer;
 +
  padding: 0px;
 +
  background-color: inherit;
  
−
        <img src="https://static.igem.org/mediawiki/2018/0/01/T--NUS_Singapore-A--InterLab_Fig10.png" alt="Fig 10" class="discussion_graph">
+
}
−
        <div style="margin: auto; max-width: 70%; text-align: center;">
+
−
          <p style="text-align: center;"><i> Figure 10: Graph comparing the Molecules of Equivalent Fluorescent Level (MEFL) per particle at T = 6 h for each colony using each control/device.</i>
+
−
          </p>
+
−
        </div>
+
−
        <br>
+
  
−
      <div class="row">
+
/* Style the img inside the buttons */
−
        <div class="column left">
+
.sponsors-overview-rows button img{
−
          <h3><i> Derivations/Inferences made about devices </i></h3>
+
  max-height:100%;
−
          <br>
+
  max-width:100%;
−
          <ol>
+
}
−
            <li> Despite growing at a considerably slower rate, fluorescein readings per OD of cells transformed with Devices 1 and 5 were among the highest. The high GFP production in cells transformed with Devices 1 and 5 might have caused a unhealthy metabolic stress on the cells, which, in turn, could have impeded the growth of the cells.
+
−
            </li>
+
−
            <li> Cells transformed with Device 4 had a slightly lower fluorescein reading per OD as compared to cells transformed with Devices 1 and 5. Since there was no compromise on the cell growth rate despite the high GFP production, the slightly lower GFP production (as compared to cells transformed with Devices 1 and 5) was inferred to have permitted the cells to grow at normal rates, leading to an overall higher net fluorescein reading.  
+
−
            </li>
+
−
            <li> Cells transformed with Device 3 was observed to produce very little to no GFP. Promoter within Device 3 might have been repressed by a molecule present in the cells, or not activated, to result in minimal GFP expression.
+
−
            </li>
+
−
          </ol>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <h3><i> Conclusion about devices </i></h3>
+
−
          <br>
+
−
          <p>Devices 1 and 5 were inferred to have highest promoter strength upstream of the GFP gene. While they produced the highest fluorescein readings per OD, overexpression of GFP as a result of Devices 1 and 5 do not seem to be healthy for cells: cells were not observed to be able to cope with the overly high expression of GFP. In the same argument, Device 4 seemed to be the most advantageous for the experimenter: there was a high GFP production without a compromise
+
−
of growth rate. Cells transformed with Device 4 seemed to be able to manage the level of metabolic stress and grow normally.
+
−
          </p>
+
−
        </div>
+
−
      </div>
+
−
      <br>
+
  
−
      <div class="row">
+
/* Create an active/current tablink class */
−
        <div class="column left">
+
.sponsors-overview-rows button.active {
−
          <h3><i> CFU/mL/OD </i></h3>
+
    background-color: transparent;
−
          <br>
+
}
−
          <p>Based on the data, NCA, NCB, PCA, PCB averages were computed based on counted CFU units. The percentage errors computed based on the known concentrations of beads against their respective averages showed high error levels.
+
−
          </p>
+
−
          <br>
+
−
          <p>Based on the data, NCA, NCB, PCA, PCB averages were computed based on counted CFU units. The percentage errors computed based on the known concentrations of beads against their respective averages showed high error levels (Table 7).
+
−
          </p>
+
−
          <br>
+
  
−
          <table><table align="center">
+
.tabcontent-wrapper{
−
            <caption><i>Table 7: Percentage errors of calculated based on the known concentrations of beads against their respective averages. </i></caption>
+
  text-align: center;
−
            <tr>
+
  max-width: 100%;
−
              <td> <i>            </i> </td>
+
  background-color: rgba(255, 255, 255, 0.6);
−
              <td style="background-color: #f2f2f2"> <i> Avg Colony Count </i> </td>
+
}
−
              <td style="background-color: #f2f2f2"> <i> % error </i> </td>
+
/* Style the tab content */
−
            </tr>
+
.tabcontent {
−
            <tr>
+
    display: none;
−
              <td style="background-color: #f2f2f2"> <i> NCA </i> </td>
+
    max-width: 85%;
−
              <td> <i> 4.6E + 09 </i> </td>
+
    margin: auto auto;
−
              <td> <i> 1,132.24 <i> </td>
+
    padding: 6px 12px;
−
            </tr>
+
/*
−
            <tr>
+
    border-radius: 12px;
−
              <td style="background-color: #f2f2f2"> <i> NCB </i> </td>
+
    background-color: rgba(255, 255, 255, 0.6);
−
              <td> <i> 1.02E + 10 </i> </td>
+
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
−
              <td> <i> 3,018.92 <i> </td>
+
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
−
            </tr>
+
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
−
            <tr>
+
*/
−
              <td style="background-color: #f2f2f2"> <i> PCA </i> </td>
+
    flex-direction: row;
−
              <td> <i> 2.74E + 09 </i> </td>
+
    justify-content: flex-start;
−
              <td> <i> 803.42 <i> </td>
+
    align-items: center;
−
            </tr>
+
}
−
            <tr>
+
.sponsor-pic{
−
              <td style="background-color: #f2f2f2"> <i> NCB </i> </td>
+
  display: flex;
−
              <td> <i> 1.77E + 09 </i> </td>
+
  width: 235px;
−
              <td> <i> 432.61 <i> </td>
+
  max-width: 235px;
−
            </tr>
+
  min-width: 235px;
−
          </table>
+
  height: auto;
−
          <br>
+
}
−
          <p>This suggests that the concentration of microsphere beads cannot be used to reliably predict cell concentration levels. It is possible that the silica beads are not a good model of E. coli cells and thus were unable to reproduce results characteristic of the cells.</p>
+
.sponsor-description{
−
        </div>
+
  display: flex;
−
        <div class="column right">
+
  margin-left: 24px;
−
          <p>Our team proceeded to calculate a conversion factor k to relate cell concentration to optical density.</p>
+
  font-family: "Lora", sans-serif;
−
          <br>
+
  font-weight: 400;
−
          <!--
+
  font-size: 1.25em;
−
            <p> Math equations When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+
  line-height: normal;
−
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ </p>  -->
+
  text-align: justify;
−
          <br>
+
}
−
          <table class="measurement_table">
+
−
            <caption><i>Table 8: Conversion factor from absorbance to CFU was computed for each sample. </i></caption>
+
−
            <tr>
+
−
              <td></td>
+
−
              <td style="background-color: #f2f2f2"> <i> OD<sub>600</sub>/Abs<sub>600</sub> </i> </td>
+
−
              <td style="background-color: #f2f2f2"> <i> Cell Conc/OD </i> </td>
+
−
              <td style="background-color: #f2f2f2"> <i> CFU/Cell density </i> </td>
+
−
              <td style="background-color: #f2f2f2"> <i> Conversion Factor </i> </td>
+
−
            </tr>
+
−
            <tr>
+
−
              <td style="background-color: #f2f2f2"> <i> NCA </i> </td>
+
−
              <td> <i> 3.5 </i> </td>
+
−
              <td> <i> 4.11E + 08 <i> </td>
+
−
              <td> <i> 1.00E - 04 </i> </td>
+
−
              <td> <i> 1.44E + 05 <i> </td>
+
−
            </tr>
+
−
            <tr>
+
−
              <td style="background-color: #f2f2f2"> <i> NCB </i> </td>
+
−
              <td> <i> 3.5 </i> </td>
+
−
              <td> <i> 1.05E + 10 <i> </td>
+
−
              <td> <i> 1.00E - 04 </i> </td>
+
−
              <td> <i> 3.68E + 06 <i> </td>
+
−
            </tr>
+
−
            <tr>
+
−
              <td style="background-color: #f2f2f2"> <i> PCA </i> </td>
+
−
              <td> <i> 3.5 </i> </td>
+
−
              <td> <i> 2.60E+09 <i> </td>
+
−
              <td> <i> 1.00E-04 </i> </td>
+
−
              <td> <i> 9.10E+05 <i> </td>
+
−
            </tr>
+
−
            <tr>
+
−
              <td style="background-color: #f2f2f2"> <i> NCB </i> </td>
+
−
              <td> <i> 3.5 </i> </td>
+
−
              <td> <i> 1.84E+09 <i> </td>
+
−
              <td> <i> 1.00E-04 </i> </td>
+
−
              <td> <i> 6.44E+05 <i> </td>
+
−
            </tr>
+
−
          </table>
+
−
        </div>
+
−
      </div> 
+
−
      <br>     
+
−
      <hr>
+
−
      <br>
+
−
      <div class="interlab_conclusion">
+
−
        <h1>CONCLUSION</h1>
+
−
        <br>
+
−
        <p style="margin: 0 10%"> The results from our experiment seem to indicate that normalizing fluorescence measurements to absolute cell count using the Study’s two methods will not be able to reduce lab-to-lab variability because counting colony-forming units do not return the expected cell concentration, i.e. the cell concentration modeled by the silica beads in Method 1. While both methods cannot be used independently to establish a robust fluorescence measurement system, it may be possible that lab-to-lab variability can be reduced if a different method of normalizing to absolute cell count is devised, replacing Method 1, Method 2, or both.
+
−
        </p>
+
−
<br>
+
  
−
      </div>
+
/*************************************CSS FOR COLLAB *********************************/
−
    </div></div>
+
  
−
   
+
.tabcontent p{
−
</body>
+
font-size: 1.25em;
−
   
+
}
−
<script>
+
.collab-content{
−
        /***************************************************JAVASCRIPT STARTS HERE**************************************************/
+
  text-align: justify;
 +
}
 +
.collab-img-center{
 +
  display: block;
 +
  max-width: 60%;
 +
  height: auto;
 +
  margin: 12px auto 3px auto;
 +
}
  
−
var acc = document.getElementsByClassName("accordion");
+
/*********************************CSS FOR PUBLIC ENGAGEMENT*****************************/
−
var close = document.getElementsByClassName("accordion-closer");
+
−
var i;
+
  
−
for (i = 0; i < acc.length; i++) {
 
−
  acc[i].addEventListener("click", function() {
 
−
    /* Toggle between adding and removing the "active" class,
 
−
                                    to highlight the button that controls the panel */
 
−
    this.classList.toggle("active");
 
  
−
     /* Toggle between hiding and showing the active panel */
+
     .button-things{
 +
    vertical-align: -50%;
 +
    height: 100%;
 +
    background: none;
 +
    color: inherit;
 +
    border: none;
 +
    padding: 0;
 +
    font: inherit;
 +
    cursor: pointer;
 +
    outline: inherit;
 +
    }
  
−
     var panel = this.nextElementSibling;
+
     .column {
−
    if (panel.style.display === "block") {
+
 
−
      panel.style.display = "none";
+
        background-color: inherit;
−
    } else {
+
−
      panel.style.display = "block";
+
 
     }
 
     }
−
     if (panel.style.maxHeight) {
+
     .column h1{
−
      panel.style.maxHeight = null;
+
    border-bottom:none;
−
     } else {
+
     padding-left: 0px;
−
      panel.style.maxHeight = panel.scrollHeight + "px";
+
 
     }
 
     }
−
   });
+
 
 +
/************************************CSS FOR TEAM *******************************************/
 +
 
 +
.members-gallery{
 +
   max-width: 80%;
 +
  position: relative;
 +
  margin: auto;
 +
  padding: 10px;
 
}
 
}
−
for (i = 0; i < close.length; i++) {
+
.members-gallery img{
−
   close[i].addEventListener("click", function(acc) {
+
  max-width: 100%;
−
   
+
}
−
    this.parentElement.previousElementSibling.classList.toggle("active");
+
.overlay{
−
    var panel = this.parentElement;
+
  position: absolute;
−
    panel.style.display = "none";
+
}
−
    if (panel.style.maxHeight) {
+
.nanda{
−
      panel.style.maxHeight = null;
+
   position: absolute;
−
    } else {
+
  top: 4.5%;
−
      panel.style.maxHeight = panel.scrollHeight + "px";
+
  left: 42.5%;
−
    }
+
  width: 12%;
−
   });
+
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ting2{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 29%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.marcus{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 56.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.rita{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 14%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.walter{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 72%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.liyana{
 +
  position: absolute;
 +
  top: 37%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.aaronl{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 26.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.russell{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 58.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.hyhy{
 +
   position: absolute;
 +
  top: 54.5%;
 +
  left: 9.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ryan{
 +
  position: absolute;
 +
  top: 54.5%;
 +
  left: 76%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.beatrix{
 +
  position: absolute;
 +
  top: 65%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.jiacheng{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 27%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.me{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 59%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 
}
 
}
−
    /***************************************************JAVASCRIPT ENDS HERE****************************************************/
 
−
</script>
 
−
   
 
−
     
 
−
</html>
 
  
−
{{:Team:NUS_Singapore-A/Templates/Footer}}
+
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content/Box */
 +
.profile-content {
 +
    margin: 5% auto; /* 10% from the top and centered */
 +
    padding: 2.5%;
 +
    border: 2px solid
 +
      rgba(133,133,133,.15);
 +
    background-color: #fff;
 +
    -moz-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    width: 100%; /* Could be more or less, depending on screen size */
 +
}
 +
.the-middle {
 +
  height:1px;
 +
  position: relative;
 +
}
 +
/* The Close Button */
 +
.close {
 +
    color: #aaa;
 +
    float: right;
 +
    font-size: 28px;
 +
    font-weight: bold;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: black;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
.profile{
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: center;
 +
  align-items: flex-start;
 +
  justify-content: space-evenly;
 +
 
 +
}
 +
.profile-description{
 +
  display: flex;
 +
  flex-wrap: no-wrap;
 +
  flex-grow: 3;
 +
  flex-direction: column;
 +
  justify-content: space-between;
 +
  text-align: justify;
 +
  max-width: 80%;
 +
}
 +
.profile-description h2{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
}
 +
.profile-title{
 +
  margin: auto auto 10px -15px;
 +
  padding-right:35px;
 +
  border-bottom: 1px solid black;
 +
}
 +
.profile-description-item{
 +
  display:flex;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
.profile-picture{
 +
  margin-right: 15px;
 +
  position: relative;
 +
  text-align: center;
 +
  color: #fff;
 +
  display: flex;
 +
  flex-grow: 1;
 +
  flex-basis: 0;
 +
}
 +
.namecard{
 +
  line-height: 80%;
 +
  padding: none;
 +
}
 +
.namecard h1{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
  border: none;
 +
}
 +
.namecard p{
 +
  font-family: 'lora';
 +
  font-weight: 700;
 +
  font-style: italic;
 +
}
 +
.portrait1{
 +
  height: 360px;
 +
  width: 250px;
 +
  border: 1px solid #aaa;
 +
  border-radius: .5%;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  background-position: center;
 +
}
 +
.portrait_jc{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/18/T--NUS_Singapore-A--Jiacheng_formal.jpg");
 +
}
 +
.portrait_jc:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/12/T--NUS_Singapore-A--Jiacheng_informal.jpg");
 +
}
 +
.portrait_nanda{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/74/T--NUS_Singapore-A--Nanda_formal.jpg");
 +
}
 +
.portrait_nanda:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fc/T--NUS_Singapore-A--Nanda_informal.jpg");
 +
}
 +
.portrait_ting2{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--NUS_Singapore-A--Tingting_formal.jpg");
 +
}
 +
.portrait_ting2:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/c/c2/T--NUS_Singapore-A--Tingting_informal.jpg");
 +
}
 +
.portrait_marcus{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/7c/T--NUS_Singapore-A--Marcus_formal.jpg");
 +
}
 +
.portrait_marcus:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/56/T--NUS_Singapore-A--Marcus_informal.jpg");
 +
}
 +
.portrait_rita{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/b/be/T--NUS_Singapore-A--Rita_formal.jpg");
 +
}
 +
.portrait_rita:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/a/a5/T--NUS_Singapore-A--Rita_informal.jpg");
 +
}
 +
.portrait_walter{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/02/T--NUS_Singapore-A--Walter_formal.jpg");
 +
}
 +
.portrait_walter:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/6/6a/T--NUS_Singapore-A--Walter_informal.jpg");
 +
}
 +
.portrait_liyana{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/3/3d/T--NUS_Singapore-A--Liyana_formal.jpg");
 +
}
 +
.portrait_liyana:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/91/T--NUS_Singapore-A--Liyana_informal.jpg");
 +
}
 +
.portrait_aaronl{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2f/T--NUS_Singapore-A--AaronL_formal.jpg");
 +
}
 +
.portrait_aaronl:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/71/T--NUS_Singapore-A--AaronL_informal.jpg");
 +
}
 +
.portrait_russell{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/08/T--NUS_Singapore-A--Russell_formal.jpg");
 +
}
 +
.portrait_russell:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2b/T--NUS_Singapore-A--Russell_informal.jpg");
 +
}
 +
.portrait_hyhy{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1b/T--NUS_Singapore-A--Haoyuan_formal.jpg");
 +
}
 +
.portrait_hyhy:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--NUS_Singapore-A--Haoyuan_informal.jpg");
 +
}
 +
.portrait_beatrix{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/8/87/T--NUS_Singapore-A--Beatrix2.jpg");
 +
}
 +
.portrait_beatrix:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/f4/T--NUS_Singapore-A--Beatrix_informal.jpg");
 +
}
 +
.portrait_me{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/9f/T--NUS_Singapore-A--Me_formal.jpg");
 +
}
 +
.portrait_me:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--Me_informal.jpg");
 +
}
 +
.portrait_ryan{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/db/T--NUS_Singapore-A--Ryan_formal.jpg");
 +
}
 +
.portrait_ryan:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1e/T--NUS_Singapore-A--Ryan_informal.jpg");
 +
}
 +
 
 +
/***************************** CSS FOR SUPERVISORS *********************************************/
 +
 
 +
.namecard_column {
 +
  max-width: 98%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 30px;
 +
  padding: 20px;
 +
}
 +
 
 +
 
 +
#card-left {
 +
  margin-left:12.5%;
 +
}
 +
 
 +
#card-right {
 +
  margin-right:12.5%;
 +
}
 +
 
 +
 
 +
@media (max-width: 650px) {
 +
  .namecard_column {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
}
 +
 
 +
.card {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 
 +
.intro_container {
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-between;
 +
  align-items: flex-start;
 +
  margin-top: 16px;
 +
  padding: 0 5px;
 +
}
 +
.intro-item{
 +
  display: flex;
 +
  flex: 1;
 +
  flex-direction: column;
 +
}
 +
.intro-item h2, .intro-item p{
 +
  text-align: center;
 +
  margin-right: 0px;
 +
  margin-left: 0px;
 +
}
 +
 
 +
.intro_container::after, .row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
 
 +
.title {
 +
  color: grey;
 +
}
 +
 
 +
img.social_link {
 +
    margin:2%;
 +
    position:relative;
 +
    float:left;
 +
    width:15%;
 +
    height:15%;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
/*******************************************CSS FOR SPONSORS ******************************/
 +
 
 +
.sponsors-wrapper{
 +
  width: 80%;
 +
}
 +
.sponsors-overview{
 +
  display: block;
 +
  border-bottom: 1px solid black;
 +
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 5px 15px;
 +
}
 +
.sponsors-overview-title{
 +
  display: block;
 +
  font-family: "Montserrat" ,serif;
 +
  font-size: 30px;
 +
  font-weight: 600;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top: 15px;
 +
  margin-bottom: 15px;
 +
  text-align: center
 +
}
 +
.sponsors-overview-rows{
 +
  display: inline-block;
 +
  margin: 15px 0px 15px 0px;
 +
  text-align: center;
 +
}
 +
.sponsors-overview-rows button{
 +
display: inline-block;
 +
vertical-align:middle;
 +
}
 +
/* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes1,.sponsor-boxes2,.sponsor-boxes3{
 +
  display: inline-block;
 +
  margin: 15px;
 +
  color: #fff;
 +
  text-align: center;
 +
  vertical-align: 0%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  background-color: inherit;
 +
}
 +
.sponsor-boxes1{
 +
  max-width:50%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes2{
 +
  max-width:40%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes3{
 +
  max-width:30%;
 +
  height:auto;
 +
}
 +
/* Change background color of buttons on hover */
 +
/* How about no
 +
.sponsors-overview-rows button:hover {
 +
    background-color: #ddd;
 +
*/
 +
}
 +
 
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: #ccc;
 +
}
 +
 
 +
/***********************************CSS For Medals ***************************************/
 +
 
 +
.checklist {
 +
  margin: auto 5%;
 +
  padding: 12px;
 +
  font-family: "Lora", serif;
 +
}
 +
.checklist table{
 +
  margin: 6px auto auto auto;
 +
}
 +
.checklist table th, .checklist table td{
 +
  float:left;
 +
  margin: 3px;
 +
}
 +
.checklist table th{
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 800;
 +
  font size: 20px;
 +
}
 +
.tick {
 +
  font-size: 64px;
 +
  color: #228b22;
 +
}
 +
.description{
 +
  width: 70%;
 +
  text-align: justify;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
</html>

Revision as of 19:00, 12 October 2018