Difference between revisions of "Team:ASTWS-China/InterLab"

Line 1: Line 1:
 
<html>
 
<html>
<script>
+
    <head>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
        <meta charset="utf-8">
 
+
        <style>
$(document).ready(function() {
+
            h1,h2{
 
+
                text-align: center;
$("#HQ_page").attr('id','');
+
            }
+
           
 
+
            img{
//highlight current page on the menu
+
                display: block;
highlight_current_page_menu();
+
                margin-left: auto;
+
                margin-right: auto;
//accessing submenus
+
                width: 70%;
$(".menu_item").click(function(){
+
            }
$(".submenu_control_icon", this).toggleClass("open");
+
        </style>
$(this).next(".submenu").fadeToggle(400);
+
    </head>
});
+
+
//mobile menu access
+
$(".igem_2018_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
+
var page_url="https://2018.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
+
}
+
}
+
 
+
 
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
</script>
+
 
+
 
+
<style>
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* DEFAULT WIKI SETTINGS */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
#home_logo, #sideMenu { display:none; }
+
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
body {background-color:white; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
 
+
{ border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* MENU */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*this wraps the whole of the menu*/
+
.igem_2018_team_menu {
+
background-color:#c4baba;
+
border-left: 1px solid #c4baba;
+
display:block;
+
float:right;
+
height:100vh;
+
max-width: 270px;
+
overflow-y: auto;
+
overflow-x: hidden;
+
padding:0px;
+
position:fixed;
+
right:0%;
+
text-align:left;
+
width: 15%;
+
}
+
 
+
 
+
.igem_2018_team_menu.displaying_menu{
+
display:block;
+
}
+
 
+
.igem_2018_team_menu  a {
+
color: #484848;
+
text-decoration:none;
+
}
+
 
+
.igem_2018_team_menu img {
+
width:100%;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item {
+
    background-color: #c4baba;
+
    border-bottom: 1px solid #928b8b;
+
    clear: both;
+
color: #484848;
+
    cursor: pointer;
+
float: left;
+
    font-size: 120%;
+
    font-weight: bold;
+
    padding: 15px 0px 15px 5%;
+
  width: 100%;
+
}
+
 
+
.igem_2018_team_menu .menu_item.direct_link {
+
color: #484848;
+
padding-left: 15%;
+
}
+
.igem_2018_team_menu .menu_item:hover {
+
background-color: #ecb656;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
color: #484848;
+
float: left;
+
width: 10%;
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
content: "+";
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
content: "-";
+
}
+
 
+
/*submenu wrapper*/
+
.igem_2018_team_menu .submenu{
+
background-color: #e4dede;
+
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
 
+
/*styling for a submenu item*/
+
.igem_2018_team_menu .submenu .submenu_item {
+
border-bottom: 1px solid #c4baba;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
 
+
.igem_2018_team_menu .submenu .submenu_item:hover {
+
background-color: #f3bd5d;
+
}
+
 
+
 
+
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.igem_2018_team_menu .menu_item.current_page,
+
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
background-color:#7acbd8;
+
}
+
 
+
 
+
 
+
/*mobile menu bar styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
.igem_2018_team_mobile_bar {
+
background-color:#e4dede;
+
border-bottom: 1px solid #c4baba;
+
cursor:pointer;
+
display:none;
+
float:left;
+
margin-top: 0;
+
padding: 5px 0;
+
position:fixed;
+
width:100%;
+
}
+
 
+
.igem_logo_mobile img {
+
width:70px;
+
}
+
 
+
.igem_logo_mobile {
+
float:left;
+
padding-left: 5%;
+
width: 30%;
+
}
+
 
+
.igem_menu_control_mobile img {
+
width:25px;
+
}
+
 
+
.igem_menu_control_mobile {
+
float:right;
+
padding-right:5%;
+
padding-top:5px;
+
text-align:right;
+
width: 30%;
+
}
+
 
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* CONTENT OF THE PAGE */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/* general wrapper for the content */
+
.igem_2018_team_content {
+
background-color:white;
+
display:block;
+
width: 87%;
+
}
+
 
+
/* subwrapper to center content */
+
.igem_2018_team_content .igem_2018_team_column_wrapper {
+
margin:auto;
+
max-width: 1400px;
+
width:90%;
+
}
+
 
+
 
+
 
+
/*general styling*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
+
 
+
 
+
/* styling for the titles h1, h2*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
+
border-bottom:0px;
+
color: #635d5d;
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 10px 0px;
+
}
+
 
+
/* styling for the titles h3, h3, h5, h6 */
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 {
+
border-bottom:0px;
+
color: #928b8b; 
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 5px 0px;
+
}
+
 
+
/* text */
+
.igem_2018_team_content .igem_2018_team_column_wrapper p {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding: 5px 0px;
+
text-align: left;
+
color: #484848;
+
}
+
 
+
/* Links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a {
+
color: #5bc7d8;
+
font-weight: bold;
+
text-decoration: underline;
+
text-decoration-color:#5bc7d8;
+
transition: all 0.4s ease;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a:hover {
+
color: #f8b732;
+
text-decoration:none;
+
}
+
 
+
 
+
/* Table */
+
.igem_2018_team_content .igem_2018_team_column_wrapper table {
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 130%;
+
width: 100%;
+
}
+
 
+
/* table cells */
+
.igem_2018_team_content .igem_2018_team_column_wrapper td {
+
border: 1px solid #c4baba;
+
border-collapse: collapse;
+
font-size: 105%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
/* table headers */
+
.igem_2018_team_content .igem_2018_team_column_wrapper th {
+
background-color:#c4baba;
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 110%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
 
+
 
+
/* non numbered lists */
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding:0px 20px;
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
 
+
 
+
 
+
/*layout classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*main layout class */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {
+
float:left;
+
margin: 1% 2%;
+
padding: 0px;
+
}
+
 
+
/* 100% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
+
 
+
/* 66% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
 
+
/* 33% */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
+
 
+
 
+
 
+
 
+
/*styling for all images*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
+
margin-bottom: 15px;
+
width: 100%;
+
}
+
 
+
 
+
/* page break */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
+
clear:both;
+
}
+
/*add extra space to page break with clear class*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
+
height: 30px;
+
}
+
 
+
/* horizontal line to divide the page*/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
+
    border-top: 1px solid #c4baba;
+
  margin: auto;
+
  width: 98%;
+
}
+
 
+
 
+
 
+
+
/*support classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/*Button  */
+
/************************************************/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
+
font-size: 130%;
+
margin: 30px auto;
+
text-align: center;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a  {
+
background-color: #5bc7d8;
+
color: #635d5d !important;
+
font-weight: bold;
+
margin: auto;
+
text-decoration: none !important;
+
padding: 10px 15px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
+
background-color: #f8b732 !important; 
+
}
+
 
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight {
+
padding: 15px 20px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
+
padding: 5px 15px;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
+
background-color: #e4dede;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
+
    border-top: 4px solid #5bc7d8;
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
+
    border: 4px solid #5bc7d8;
+
}
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
+
    border-top: 4px solid #f8b732
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
+
    border: 4px solid #f8b732;
+
}
+
 
+
 
+
 
+
 
+
/*mobile*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/* 1800px  */
+
/************************************************/
+
@media only screen and (max-width: 1800px) {
+
.igem_2018_team_content { width: 85%;}
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
/* 1400px  */
+
/************************************************/
+
@media only screen and (max-width: 1400px) {
+
.igem_2018_team_menu .menu_item { font-size:100%;}
+
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
@media only screen and (max-width: 1001px) {
+
.igem_2018_team_menu {display:block;}
+
}
+
 
+
/* 1000px  */
+
/************************************************/
+
@media only screen and (max-width: 1000px) {
+
.igem_2018_team_content {width:100%; margin-left:0px;}
+
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
+
.igem_2018_team_mobile_bar {display:block;}
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
+
 
+
}
+
 
+
 
+
@media only screen and (max-width: 500px) {
+
.igem_2018_team_menu {min-width:100%; width:100%; }
+
       
+
}
+
 
      
 
      
     p{
+
     <body>
    font-size: 23px;
+
        <!--content-->
    }
+
         <h1>InterLab</h1>
   
+
    /*image styling*/
+
    #InterLab_Image{
+
        width: 1150px;
+
    }
+
   
+
    #cell_measurement_list{
+
        font-size: 19px;
+
    }
+
 
+
 
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
 
+
 
+
 
+
</style>
+
 
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- THIS IS WHERE THE HTML BEGINS --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
<head>
+
 
+
<!-- This tells the browser that your page is responsive -->
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
 
+
</head>
+
 
+
 
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Menu --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
 
+
 
+
 
+
<div class="igem_2018_team_mobile_bar">
+
+
<div class="igem_logo_mobile">
+
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
+
</div>
+
 
+
 
+
<div class="igem_menu_control_mobile">
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
+
</div>
+
 
+
</div>
+
 
+
 
+
 
+
 
+
<div class="igem_2018_team_menu displaying_menu">
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China">
+
<img src="http://placehold.it/350x150/e4dede/c4baba">
+
</a>
+
 
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China">
+
<div class="menu_item direct_link">
+
HOME
+
</div>
+
</a>
+
 
+
<!-- Team -->
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
TEAM
+
</div>
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:ASTWS-China/Team">
+
<div class="submenu_item">
+
Team Members
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Collaborations">
+
<div class="submenu_item">
+
Collaborations
+
</div>
+
</a>
+
</div>
+
 
+
 
+
<!-- Project -->
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
PROJECT
+
</div>
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:ASTWS-China/Description">
+
<div class="submenu_item">
+
Description
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Design">
+
<div class="submenu_item">
+
Design
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Experiments">
+
<div class="submenu_item">
+
Experiments
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Notebook">
+
<div class="submenu_item">
+
Notebook
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/InterLab">
+
<div class="submenu_item">
+
InterLab
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Model">
+
<div class="submenu_item">
+
Model
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Results">
+
<div class="submenu_item">
+
Results
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Demonstrate">
+
<div class="submenu_item">
+
Demonstrate
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Improve">
+
<div class="submenu_item">
+
Improve
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Attributions">
+
<div class="submenu_item">
+
Attributions
+
</div>
+
</a>
+
 
+
</div>
+
 
+
 
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
PARTS
+
</div>
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:ASTWS-China/Parts">
+
<div class="submenu_item">
+
Parts Overview
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Basic_Part">
+
<div class="submenu_item">
+
Basic Parts
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Composite_Part">
+
<div class="submenu_item">
+
Composite Parts
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Part_Collection">
+
<div class="submenu_item">
+
Part Collection
+
</div>
+
</a>
+
</div>
+
 
+
+
+
+
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Safety">
+
<div class="menu_item direct_link">
+
SAFETY
+
</div>
+
</a>
+
 
+
 
+
 
+
 
+
 
+
 
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
HUMAN PRACTICES
+
</div>
+
 
+
<div class="submenu">
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Human_Practices">
+
<div class="submenu_item">
+
Human Practices
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Public_Engagement">
+
<div class="submenu_item">
+
Education & Engagement
+
</div>
+
</a>
+
 
+
</div>
+
 
+
 
+
 
+
 
+
 
+
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>
+
AWARDS
+
</div>
+
 
+
<div class="submenu">
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Applied_Design">
+
<div class="submenu_item">
+
Applied Design
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Entrepreneurship">
+
<div class="submenu_item">
+
Entrepreneurship
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Hardware">
+
<div class="submenu_item">
+
Hardware
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Measurement">
+
<div class="submenu_item">
+
Measurement
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Model">
+
<div class="submenu_item">
+
Model
+
</div>
+
</a>
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Plant">
+
<div class="submenu_item">
+
Plant
+
</div>
+
</a>
+
 
+
 
+
<a href="https://2018.igem.org/Team:ASTWS-China/Software">
+
<div class="submenu_item">
+
Software
+
</div>
+
</a>
+
 
+
</div>
+
 
+
 
+
 
+
<a href="https://igem.org/2018_Judging_Form?team=ASTWS-China">
+
<div class="menu_item direct_link">
+
JUDGING FORM ⇗
+
</div>
+
</a>
+
 
+
 
+
</div>
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Content of the page  --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
 
+
<div class="igem_2018_team_content">
+
<div class="igem_2018_team_column_wrapper">
+
<div class="clear extra_space"></div>
+
<div class="clear extra_space"></div>
+
               
+
         <div class="column full_size">
+
            <img src="https://static.igem.org/mediawiki/2018/5/50/T--ASTWS-China--InterLab_pic1.jpg">
+
            <h1 style="text-align: center; font-size: 40">InterLab</h1>
+
            <p>The most direct aim of the entire InterLab is to standardize the fluorescence measurements. And the topic of standardization varies every year to be more specific and comprehensive. </p>
+
        </div>
+
 
          
 
          
         <!--Overall description-->
+
         <p>The most direct aim of the entire InterLab is to standardize the fluorescence measurements. And the topic of standardization varies every year to be more specific and comprehensive. </p>
        <div class="column full-size">
+
        <h2>Standardization</h2>
            <h2 style="text-align: center">Overall Description</h2>
+
        <p>Standardization plays an extremely important role in science experiments. There are multiple kinds of methods which will keep the lab results accurate.</p>
            <h3>Standardization</h3>
+
        <ol>
            <p>Standardization plays an extremely important role in science experiments. There are multiple kinds of methods which will keep the lab results accurate. </p>
+
            <li>Every protocol is read and followed carefully by group members and checked by each member.</li>
            <ol>
+
            <li>Any indices should be the same unit and same figure.</li>
                <li>Every protocol is read and followed carefully by group members and checked by each member. </li>
+
            <li>Any experiment is better to hold two control groups (one is 100% source, the other is 100% solution).</li>
                <li>Any indices should be the same unit and same figure. </li>
+
            <li>An ideal standardization experiment needs more than 3 repeating experiments.</li>
                <li>Any experiment is better to hold two control groups. (one is 100% source, the other is 100% solution) </li>
+
        </ol>
                <li>An ideal standardization experiment needs more than 3 repeating experiments. </li>
+
        <p>Standardization is the process of developing and implementing technical standards. It can help to maximize compatibility, interoperability, safety, repeatability, or quality as well.</p>
            </ol>
+
       
            <p>Standardization is the process of developing and implementing technical standards. It can help to maximize compatibility, interoperability, safety, repeatability, or quality as well. </p>
+
        <h2>Goals</h2>
           
+
        <p>As a whole, the InterLab is trying to minimize variability across labs. Trying to further contribute amenity to the synthetic biological study, instead of measuring one fluorescent molecule, this year the IGEM teams are standardizing the optical measurement of the entire population of GFP (Green Fluorescent Protein) cells. Because ordinarily means to measure populated cells in optical devices have complicated process and uncertain results, this year, we are using massive data to verify if there is a method that can simplify the process and increase comparability. </p>
            <h3>Goals</h3>
+
        <p>The method that is been proving by teams is the one that if we can reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD.</p>
            <p>As a whole, the InterLab is trying to minimize variability across labs. Trying to further contribute amenity to the synthetic biological study, instead of measuring one fluorescent molecule, this year the IGEM teams are standardizing the optical measurement of the entire population of GFP (Green Fluorescent Protein) cells. Because ordinarily means to measure populated cells in optical devices have complicated process and uncertain results, this year, we are using massive data to verify if there is a method that can simplify the process and increase comparability.</p>
+
 
+
            <p style="color: blue">The method that is been proving by our team is the one that if we can reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD</p>
+
        </div>
+
 
          
 
          
         <!--Experiment Process-->
+
         <h2>Experiment Process</h2>
        <div class="column full-size">
+
        <h3>Materials</h3>
            <h2 style="text-align: center">Experiment Process</h2>
+
        <p>Provided in Kit: LUDOX CL-X, Silica beads, Fluorescein, Devices (R0040, I20270, J364000, J364001, J364002, J364007, J364008, J364009)<br/>Provided by ourselves: 96 well plate (black with clear flat bottom preferred), ddH2O, PBS (pH 7.4-7.6), Competent cells (Escherichia coli strain DH5α), LB media, Chloramphenicol (stock concentration 25 mg/mL dissolved in EtOH).</p>
            <h3>Preparation</h3>
+
        <h3>Methods</h3>
            <p>Carefully reading through the protocol is necessary for the preparation of the entire lab and getting materials that we need is required as well. </p>
+
        <p>We used a Tecan Infinite M200pro plate reader to measure OD600 and fluorescence values. Excitation wavelength is 485 nm, Emission wavelength is 530 nm, and the Firmware is V 3.37. OD600 measurements were taken in Corning 96 well assay plates (black with clear flat bottom). The experiments were performed at the College of Life Science, Zhejiang University, under supervision of our instructor. We followed the standard protocols including LUDOX Protocol, Microsphere Protocol, Fluorescein Protocol, Cell Measurement Protocol and Colony Forming Units Study, etc (Detailed protocol information can be found <a href="https://static.igem.org/mediawiki/2018/0/09/2018_InterLab_Plate_Reader_Protocol.pdf">here</a>). During the whole InterLab study process, everyone, instructed by the team PI, studied the protocol carefully and worked on providing accurate and reliable experiment data to the Measurement Committee.</p>
            <h3>Setting Standards</h3>
+
            <p>We standardized the OD600 Reference point, Particle Standard Curve, and Fluorescence standard curve. We used E. coli K-12 DH5-alpha as well for the sake of consistency and reproducibility.</p>
+
            <h3>Cell Measurement</h3>
+
            <p>After the three steps of calibration, cell measurements should be starting. We followed <a href="https://static.igem.org/mediawiki/2018/0/09/2018_InterLab_Plate_Reader_Protocol.pdf">2018 iGEM’s InterLab Protocol</a> to do the lab and to collect our results.</p>
+
            <ul>
+
                <li>Installation</li>
+
                <p id="cell_measurement_list">We first transformed E.coli DH5α with plasmids provided in the IGEM tool box.</p>
+
               
+
                <li>Cultivation</li>
+
                <p id="cell_measurement_list">We picked 2 colonies from each of the transformation plates and inoculated in 5-10 mL LB medium and Chloramphenicol. The cells grew overnight (16-18 hours) at 37°C and 220 rpm. And we measured the OD600 of both initial and final cells. </p>
+
               
+
                <li>Dilution</li>
+
                <p id="cell_measurement_list">We poured in 1900μL of LB and Cam to make a 1:20 dilution for three times. Then we poured in 900μL of LB and Cam to make a 1:10 dilution twice and got three numbers of colonies and dilution factors from the last three dilution.</p>
+
               
+
                <li>Counting Colonies</li>
+
                <p id="cell_measurement_list">We counted the number of colonies after dilution and multiplied it by the final dilution factor to calculate the total number of colonies.</p>
+
            </ul>
+
        </div>
+
 
          
 
          
         <!--Graph and Analysis-->
+
         <h2>Results</h2>
         <div calss="column full-size">
+
        <p>We submitted the completed spreadsheet and four online forms to the iGEM measurement committee before the deadline (July 27), and received confirmation that the results were accepted on the August 16.</p>
             <h2 style="text-align: center">Graph and Analysis</h2>
+
         <h3>Calibration</h3>
             <div calss="column full-size">
+
        <ol>
                <p>These are the graphs for the results.</p>
+
             <li>OD600 Reference Point</li>
                <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/7/7b/T--ASTWS-China--Particles_Standard_Curve.jpg">
+
             <img src="https://static.igem.org/mediawiki/2018/9/93/T--ASTWS-China--Table_1-InterLab.jpg"><br />
                <div class="clear extra_space"></div>
+
            <li>Particle Standard Curve</li>
                <div class="clear extra_space"></div>
+
            <img src="https://static.igem.org/mediawiki/2018/8/84/T--ASTWS-China--Figure_1-InterLab.jpg"><br />
                <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/3/3e/T--ASTWS-China--Fluorescein_Standard_Curve_Measurement.jpg">
+
            <li>Fluorescein standard curve</li>
                <div class="clear extra_space"></div>
+
            <img src="https://static.igem.org/mediawiki/2018/c/c7/T--ASTWS-China--Figure_2-InterLab.jpg"><br />
                <div class="clear extra_space"></div>
+
        </ol>
                <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/e/e5/T--ASTWS-China--Fluorescence_Measurement.jpg">
+
        <h3>Cell Measurement</h3>
            </div>
+
        <ol>
         </div>
+
            <li>Transformation of the devices</li>
 +
            <p>In the first day, we transformed the required plasmids (all in pSB1C3) in Escherichia coli strain DH5α, followed is the pictures after incubating overnight at 37 °C.</p>
 +
            <li>After transformation, cell growth, sampling and assay, we collected the raw plate reader measurements including Fluorescence raw readings and Abs600 raw readings. Then the experimental values were gained as follows:</li>
 +
            <img src="https://static.igem.org/mediawiki/2018/9/94/T--ASTWS-China--Table_2--InterLab.jpg"><br />
 +
            <img src="https://static.igem.org/mediawiki/2018/4/4a/T--ASTWS-China--Table_3-InterLab.jpg"><br />
 +
        </ol>
 +
         <h3>Colony Forming Units per 0.1 OD600 E. coli cultures</h3>
 +
        <p>Following to the protocol provided by iGEM measurement, we accomplished this part and the results is as follows.</p>
 
          
 
          
         <!--Conclusion-->
+
         <h2>Collaboration</h2>
         <div calss="column full-size">
+
         <p>Our interlab study was done in collaboration with two other teams (<a href="https://2018.igem.org/Team:HFLS_ZhejiangUnited">HFLS_ZhejiangUnited</a>, <a href="https://2018.igem.org/Team:Worldshaper-XSHS">Worldshaper-XSHS</a>). Before beginning the experiment, we carefully studied and discussed the official protocol provided by iGEM measurement together. Worldshaper-XSHS lends us their 96-well plates when ours are not adequately prepared. Moreover, when our first submission was failed, we together with worldshaper-XSHS and HFLS_ZhejiangUnited to analyze the data and find what is the problem is. Thank you for their help given to us. On the other hand, we offered the plate reader for them to do the InterLab study.<br/>Click our collaborations page for more details.</p>
            <h2 style="text-align: center">Conclusion</h2>
+
            <p>To sum up, the result of this InterLab Study is quite satisfying. All the related replicates shared the similar curve(posted in the previous section)and we were able to figure out that the number of each colony was positively related to the corresponding absorbance. So we roughly concluded that it is possible to simplify the original process with calculated formula(the transition from Absorbance to colony amount). However, the data we could aggregate was quite limited, and thus, the specific equation, if we have generated, would be both atypical and inaccurate.</p>
+
        </div>
+
 
          
 
          
 +
        <h2>Conclusion</h2>
 +
        <p>To sum up, the result of this InterLab Study is quite satisfying. All the related replicates shared the similar curve(posted in the previous section)and we were able to figure out that the number of each colony was positively related to the corresponding absorbance. So we roughly concluded that it is possible to simplify the original process with calculated formula(the transition from Absorbance to colony amount). We are honored to participate in this session of InterLab. We hope that our work could help advance the development of engineering biology.</p>
 
          
 
          
<!--
+
    </body>
NewPP limit report
+
CPU time usage: 0.002 seconds
+
Real time usage: 0.002 seconds
+
Preprocessor visited node count: 4/1000000
+
Preprocessor generated node count: 20/1000000
+
Post‐expand include size: 0/2097152 bytes
+
Template argument size: 0/2097152 bytes
+
Highest expansion depth: 2/40
+
Expensive parser function count: 0/100
+
-->
+
 
+
<!-- Saved in parser cache with key 2018_igem_org:pcache:idhash:9636-0!*!*!*!*!*!* and timestamp 20180725025742 and revision id 67315
+
-->
+
</div>             <div class="visualClear"></div>
+
            </div>
+
 
</html>
 
</html>

Revision as of 04:19, 16 October 2018

InterLab

The most direct aim of the entire InterLab is to standardize the fluorescence measurements. And the topic of standardization varies every year to be more specific and comprehensive.

Standardization

Standardization plays an extremely important role in science experiments. There are multiple kinds of methods which will keep the lab results accurate.

  1. Every protocol is read and followed carefully by group members and checked by each member.
  2. Any indices should be the same unit and same figure.
  3. Any experiment is better to hold two control groups (one is 100% source, the other is 100% solution).
  4. An ideal standardization experiment needs more than 3 repeating experiments.

Standardization is the process of developing and implementing technical standards. It can help to maximize compatibility, interoperability, safety, repeatability, or quality as well.

Goals

As a whole, the InterLab is trying to minimize variability across labs. Trying to further contribute amenity to the synthetic biological study, instead of measuring one fluorescent molecule, this year the IGEM teams are standardizing the optical measurement of the entire population of GFP (Green Fluorescent Protein) cells. Because ordinarily means to measure populated cells in optical devices have complicated process and uncertain results, this year, we are using massive data to verify if there is a method that can simplify the process and increase comparability.

The method that is been proving by teams is the one that if we can reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD.

Experiment Process

Materials

Provided in Kit: LUDOX CL-X, Silica beads, Fluorescein, Devices (R0040, I20270, J364000, J364001, J364002, J364007, J364008, J364009)
Provided by ourselves: 96 well plate (black with clear flat bottom preferred), ddH2O, PBS (pH 7.4-7.6), Competent cells (Escherichia coli strain DH5α), LB media, Chloramphenicol (stock concentration 25 mg/mL dissolved in EtOH).

Methods

We used a Tecan Infinite M200pro plate reader to measure OD600 and fluorescence values. Excitation wavelength is 485 nm, Emission wavelength is 530 nm, and the Firmware is V 3.37. OD600 measurements were taken in Corning 96 well assay plates (black with clear flat bottom). The experiments were performed at the College of Life Science, Zhejiang University, under supervision of our instructor. We followed the standard protocols including LUDOX Protocol, Microsphere Protocol, Fluorescein Protocol, Cell Measurement Protocol and Colony Forming Units Study, etc (Detailed protocol information can be found here). During the whole InterLab study process, everyone, instructed by the team PI, studied the protocol carefully and worked on providing accurate and reliable experiment data to the Measurement Committee.

Results

We submitted the completed spreadsheet and four online forms to the iGEM measurement committee before the deadline (July 27), and received confirmation that the results were accepted on the August 16.

Calibration

  1. OD600 Reference Point

  2. Particle Standard Curve

  3. Fluorescein standard curve

Cell Measurement

  1. Transformation of the devices
  2. In the first day, we transformed the required plasmids (all in pSB1C3) in Escherichia coli strain DH5α, followed is the pictures after incubating overnight at 37 °C.

  3. After transformation, cell growth, sampling and assay, we collected the raw plate reader measurements including Fluorescence raw readings and Abs600 raw readings. Then the experimental values were gained as follows:


Colony Forming Units per 0.1 OD600 E. coli cultures

Following to the protocol provided by iGEM measurement, we accomplished this part and the results is as follows.

Collaboration

Our interlab study was done in collaboration with two other teams (HFLS_ZhejiangUnited, Worldshaper-XSHS). Before beginning the experiment, we carefully studied and discussed the official protocol provided by iGEM measurement together. Worldshaper-XSHS lends us their 96-well plates when ours are not adequately prepared. Moreover, when our first submission was failed, we together with worldshaper-XSHS and HFLS_ZhejiangUnited to analyze the data and find what is the problem is. Thank you for their help given to us. On the other hand, we offered the plate reader for them to do the InterLab study.
Click our collaborations page for more details.

Conclusion

To sum up, the result of this InterLab Study is quite satisfying. All the related replicates shared the similar curve(posted in the previous section)and we were able to figure out that the number of each colony was positively related to the corresponding absorbance. So we roughly concluded that it is possible to simplify the original process with calculated formula(the transition from Absorbance to colony amount). We are honored to participate in this session of InterLab. We hope that our work could help advance the development of engineering biology.