Difference between revisions of "Team:BGIC-Union/Safety"

Line 1: Line 1:
  
<html>
 
  <head>
 
  <html>
 
  <head>
 
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
    
 
    
Line 9: Line 5:
  
  
     <title>Team:BGIC-Union/Practices-Design</title>
+
     <title>Safety</title>
  
 
   <head>
 
   <head>
 
    
 
    
 +
        <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
 +
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500' rel='stylesheet' type='text/css'>
  
 
   <!-- Bootstrap core CSS -->
 
   <!-- Bootstrap core CSS -->
Line 21: Line 19:
 
   <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 
   <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&amp;ctype=text/css" rel="stylesheet">
   <!-- light -->
+
    
<style type="text/css">
+
/* fixed line holder */
+
.timelineLight .timeline_line {c
+
margin-top:50px;
+
margin-bottom:10px;
+
width:900px;
+
}
+
.timelineLight
+
{color: #fff;
+
background: #ffe4e1;}
+
/* full (including months that are not shown) line holder */
+
.timelineLight .t_line_holder {
+
height:80px;
+
background:url('https://static.igem.org/mediawiki/2017/3/35/Line.jpg') repeat-x 0px 39px;
+
}
+
 
+
/* 2 months are stored in one view */
+
.timelineLight .t_line_view {
+
height:20px;
+
width:900px;
+
}
+
 
+
/* holder for year number */
+
.timelineLight h3.t_line_year {
+
margin:0;
+
color:#545454;
+
}
+
 
+
/* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */
+
.timelineLight .t_line_m {
+
margin-top:35px;
+
height:10px;
+
border-left:1px solid #545454;
+
border-right:1px solid #545454;
+
width:448px;
+
}
+
 
+
/* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */
+
.timelineLight .t_line_m.right {
+
left:449px;
+
width:449px;
+
}
+
 
+
/* month caption */
+
.timelineLight h4.t_line_month {
+
margin:-30px 0 0;
+
color:#545454;
+
}
+
 
+
/* used in responsive layout when only one month is shown (it is span containing year) */
+
.t_line_month_year {
+
display:none;
+
}
+
 
+
/* node on the timeline */
+
.timelineLight a.t_line_node {
+
text-decoration:none;
+
padding:38px 0 4px;
+
height:10px;
+
font-size:12px;
+
top:-25px;
+
background:url('https://static.igem.org/mediawiki/2017/2/2a/Dot.png') no-repeat center 24px;
+
color:#141817;
+
}
+
.timelineLight a.t_line_node:hover {
+
background:url('https://static.igem.org/mediawiki/2017/6/65/Dot-rollover.png') no-repeat center 24px;
+
}
+
.timelineLight a.t_line_node.active {
+
background:url('https://static.igem.org/mediawiki/2017/d/d7/Dot-selected.png') no-repeat center 24px;
+
}
+
 
+
/* node description */
+
.timelineLight .t_node_desc {
+
background: rgba(26,134,172,0.9);
+
top:0;
+
color:#fff;
+
padding:1px 5px;
+
}
+
 
+
/* descriptions on right side go from right to left */
+
.timelineLight .t_node_desc.pos_right {
+
right:0;
+
}
+
 
+
/* line arrow left */
+
.timelineLight #t_line_left {
+
cursor:pointer;
+
left:-30px;
+
top:30px;
+
width:14px;
+
height:19px;
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left top;
+
}
+
 
+
.timelineLight #t_line_left:hover {
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left bottom;
+
}
+
 
+
/* line arrow right */
+
.timelineLight #t_line_right {
+
cursor:pointer;
+
right:-30px;
+
top:30px;
+
width:14px;
+
height:19px;
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right top;
+
}
+
 
+
.timelineLight #t_line_right:hover {
+
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right bottom;
+
}
+
.timelineLight {
+
display:none;
+
}
+
 
+
/* items container */
+
.timelineLight .timeline_items {
+
padding:10px 0;
+
}
+
 
+
/* single item (margines set from javascript) */
+
.timelineLight .item {
+
height:380px;
+
text-align:center;
+
+
color: #fff;
+
background: #f7dae7;
+
+
-moz-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
-webkit-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
+
width:200px;
+
}
+
 
+
/* ----- content - non-plugin elements ----- */
+
.timelineLight .item img {
+
margin-top:0;
+
width:200px;
+
}
+
 
+
.timelineLight .item span{
+
display:block;
+
margin:0px 20px 10px;
+
height:150px;
+
}
+
.timelineLight .item .read_more {
+
padding:2px 8px 2px 10px;
+
font-family:Comic Sans MS;
+
font-size:20px;
+
float:right;
+
color:#ffffff;
+
background: rgba(0,0,0,0.35);
+
cursor:pointer;
+
}
+
.timelineLight .item .read_more:hover {
+
background:rgb(26,134,172);
+
}
+
/* ----------------------------------------- */
+
 
+
/* item details (margines set from javascript) */
+
.timelineLight .item_open {
+
height:380px;
+
background:url('../images/timeline/light/background.jpg') repeat;
+
position:relative;
+
color:#545454;
+
z-index:2;
+
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
+
width:490px;
+
+
}
+
 
+
/* item details content wrapper (used for animation - shuld have same width as .item_open) */
+
.timelineLight .item_open_cwrapper {
+
width:490px;
+
}
+
 
+
/* ----- content - non-plugin elements ----- */
+
.timelineLight .timeline_open_content {
+
padding:20px;
+
}
+
 
+
.timelineLight .item_open h2 {
+
margin-top:10px;
+
padding-top:0;
+
font-size:28px;
+
}
+
.timelineLight .item_open .t_close {
+
position:absolute;
+
top:10px;
+
right:10px;
+
padding:2px 8px 2px 10px;
+
font-family: Comic Sans MS;
+
font-size:20px;
+
color:#ffffff;
+
background: rgba(0,0,0,0.25);
+
cursor:pointer;
+
}
+
.timelineLight .item_open .t_close:hover {
+
background:rgb(26,134,172);
+
}
+
/* ----------------------------------------- */
+
 
+
/* left/right controles */
+
.timelineLight .t_controles {
+
margin:10px auto;
+
text-align:center;
+
}
+
.timelineLight .t_left,
+
.timelineLight .t_right {
+
display:inline-block;
+
height:50px;
+
width:29px;
+
margin:10px;
+
cursor:pointer;
+
}
+
.timelineLight .t_left, 
+
.timelineLight .t_left:hover:active {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left top;
+
}
+
.timelineLight .t_left:hover {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left bottom;
+
}
+
 
+
.timelineLight .t_right,
+
.timelineLight .t_right:hover:active{
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right top;
+
}
+
 
+
.timelineLight .t_right:hover {
+
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right bottom;
+
}
+
 
+
/* -----------------------------------------------------------------------*/
+
/* ------------------------------ RESPONSIVE -----------------------------*/
+
/* -----------------------------------------------------------------------*/
+
 
+
 
+
 
+
/* --- 768px --- */
+
@media screen and (max-width:980px) {
+
+
.timelineLight .timeline_line {
+
width:680px;
+
}
+
+
.timelineLight .t_line_view {
+
width:680px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 338px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 339px;
+
width: 339px;
+
}
+
}
+
 
+
 
+
/* --- 610px --- */
+
@media screen and (max-width:767px) {
+
+
.timelineLight .timeline_line {
+
width:530px;
+
}
+
+
.timelineLight .t_line_view {
+
width:1060px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 528px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 530px;
+
width: 528px;
+
}
+
.timelineLight .t_line_year {
+
opacity:0;
+
filter:alpha(opacity=0)
+
}
+
.timelineLight .t_line_month_year {
+
display:inline;
+
}
+
+
.timelineLight .t_line_node span {
+
+
}
+
.timelineLight .t_node_desc {
+
font-size:8px;
+
}
+
.timelineLight .t_node_desc.pos_right {
+
right:auto;
+
left:0;
+
}
+
}
+
 
+
 
+
/* --- 300px --- */
+
@media screen and (max-width:
+
 
+
) {
+
.timelineLight .timeline_line {
+
width:240px;
+
}
+
+
.timelineLight .t_line_view {
+
width:480px;
+
}
+
+
.timelineLight .t_line_m {
+
width: 238px;
+
}
+
.timelineLight .t_line_m.right {
+
left: 240px;
+
width: 238px;
+
}
+
+
.timelineLight .item_open {
+
width:280px;
+
height:390px;
+
}
+
.timelineLight .item_open_cwrapper {
+
width:280px;
+
}
+
}
+
 
+
 
+
 
+
 
+
</style>
+
  
 
   <!-- main -->
 
   <!-- main -->
 
   <style type="text/css">
 
   <style type="text/css">
 
    
 
    
 
+
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
 
#top_title,#sideMenu { display: none !important; }
 
#top_title,#sideMenu { display: none !important; }
 
         #content {
 
         #content {
Line 368: Line 33:
 
         }
 
         }
  
#bodyContent
+
 
{
+
margin-top:0px !important;
+
}
+
  
  
Line 379: Line 41:
  
  
.mainstyle
+
{
+
font-family: Comic Sans MS;
+
}
+
 
html, body {
 
html, body {
     margin: 0 ;
+
     margin: 0 !important;
     padding: 0 ;
+
     padding: 0 !important;
 
}
 
}
 
body {
 
body {
   background-color: #ffa07a;
+
   background-color: #FFe4e1;
  
+
   font-family: 'Montserrat', sans-serif;
 
     font-weight: 400;
 
     font-weight: 400;
 
     font-size: 14px;
 
     font-size: 14px;
Line 400: Line 59:
 
/* Titles */
 
/* Titles */
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
font-family: Comic Sans MS;
+
font-family: 'Montserrat', sans-serif;
 
     font-weight: 700;
 
     font-weight: 700;
 
     color: #333;
 
     color: #333;
Line 413: Line 72:
  
  
 
+
/* Paragraph &amp; Typographic */
 
p {
 
p {
 
     line-height: 28px;
 
     line-height: 28px;
 
     margin-bottom: 25px;
 
     margin-bottom: 25px;
 
     font-size: 16px;
 
     font-size: 16px;
font-family: Comic Sans MS;
 
 
}
 
}
  
Line 476: Line 134:
  
 
.navbar-inverse {
 
.navbar-inverse {
padding-bottom: 30px;
+
padding-bottom: 70px;
padding-top: 0;
+
padding-top: 70px;
 
}
 
}
  
Line 487: Line 145:
 
.navbar-inverse .navbar-nav > li > a {
 
.navbar-inverse .navbar-nav > li > a {
 
color: white;
 
color: white;
 
 
}
 
}
 
  
 
.navbar-inverse .navbar-nav > li > a:hover {
 
.navbar-inverse .navbar-nav > li > a:hover {
Line 497: Line 153:
 
.navbar-brand {
 
.navbar-brand {
 
font-weight: 700;
 
font-weight: 700;
font-size: 40px;
+
font-size: 20px;
 
letter-spacing: 2px;
 
letter-spacing: 2px;
backgroud: white;
 
 
}
 
}
  
 
.navbar-inverse .navbar-brand {
 
.navbar-inverse .navbar-brand {
 
color: white;
 
color: white;
background-color: #FFA07A;
 
 
 
}
 
}
  
 
.navbar-inverse .navbar-toggle {
 
.navbar-inverse .navbar-toggle {
 
border-color: transparent;
 
border-color: transparent;
font-size: 12px;
 
 
}
 
}
  
Line 548: Line 200:
 
#footer p {
 
#footer p {
 
color: white;
 
color: white;
font-family: Comic Sans MS;
 
 
}
 
}
  
Line 635: Line 286:
 
   </style>
 
   </style>
 
    
 
    
  <!-- script -->
 
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 
  <script type="text/javascript">
 
  /*
 
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 
*
 
* Uses the built in easing capabilities added In jQuery 1.1
 
* to offer multiple easing options
 
*
 
* TERMS OF USE - jQuery Easing
 
*
 
* Open source under the BSD License.
 
*
 
* Copyright © 2008 George McGinley Smith
 
* All rights reserved.
 
*
 
* Redistribution and use in source and binary forms, with or without modification,
 
* are permitted provided that the following conditions are met:
 
*
 
* Redistributions of source code must retain the above copyright notice, this list of
 
* conditions and the following disclaimer.
 
* Redistributions in binary form must reproduce the above copyright notice, this list
 
* of conditions and the following disclaimer in the documentation and/or other materials
 
* provided with the distribution.
 
*
 
* Neither the name of the author nor the names of contributors may be used to endorse
 
* or promote products derived from this software without specific prior written permission.
 
*
 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 
* OF THE POSSIBILITY OF SUCH DAMAGE.
 
*
 
*/
 
 
// t: current time, b: begInnIng value, c: change In value, d: duration
 
jQuery.easing['jswing'] = jQuery.easing['swing'];
 
 
jQuery.extend( jQuery.easing,
 
{
 
def: 'easeOutQuad',
 
swing: function (x, t, b, c, d) {
 
//alert(jQuery.easing.default);
 
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 
},
 
easeInQuad: function (x, t, b, c, d) {
 
return c*(t/=d)*t + b;
 
},
 
easeOutQuad: function (x, t, b, c, d) {
 
return -c *(t/=d)*(t-2) + b;
 
},
 
easeInOutQuad: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t + b;
 
return -c/2 * ((--t)*(t-2) - 1) + b;
 
},
 
easeInCubic: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t + b;
 
},
 
easeOutCubic: function (x, t, b, c, d) {
 
return c*((t=t/d-1)*t*t + 1) + b;
 
},
 
easeInOutCubic: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 
return c/2*((t-=2)*t*t + 2) + b;
 
},
 
easeInQuart: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t*t + b;
 
},
 
easeOutQuart: function (x, t, b, c, d) {
 
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 
},
 
easeInOutQuart: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 
},
 
easeInQuint: function (x, t, b, c, d) {
 
return c*(t/=d)*t*t*t*t + b;
 
},
 
easeOutQuint: function (x, t, b, c, d) {
 
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 
},
 
easeInOutQuint: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 
return c/2*((t-=2)*t*t*t*t + 2) + b;
 
},
 
easeInSine: function (x, t, b, c, d) {
 
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 
},
 
easeOutSine: function (x, t, b, c, d) {
 
return c * Math.sin(t/d * (Math.PI/2)) + b;
 
},
 
easeInOutSine: function (x, t, b, c, d) {
 
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 
},
 
easeInExpo: function (x, t, b, c, d) {
 
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 
},
 
easeOutExpo: function (x, t, b, c, d) {
 
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 
},
 
easeInOutExpo: function (x, t, b, c, d) {
 
if (t==0) return b;
 
if (t==d) return b+c;
 
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 
},
 
easeInCirc: function (x, t, b, c, d) {
 
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 
},
 
easeOutCirc: function (x, t, b, c, d) {
 
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 
},
 
easeInOutCirc: function (x, t, b, c, d) {
 
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 
},
 
easeInElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 
},
 
easeOutElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 
},
 
easeInOutElastic: function (x, t, b, c, d) {
 
var s=1.70158;var p=0;var a=c;
 
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 
if (a < Math.abs(c)) { a=c; var s=p/4; }
 
else var s = p/(2*Math.PI) * Math.asin (c/a);
 
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 
},
 
easeInBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
return c*(t/=d)*t*((s+1)*t - s) + b;
 
},
 
easeOutBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 
},
 
easeInOutBack: function (x, t, b, c, d, s) {
 
if (s == undefined) s = 1.70158;
 
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 
},
 
easeInBounce: function (x, t, b, c, d) {
 
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 
},
 
easeOutBounce: function (x, t, b, c, d) {
 
if ((t/=d) < (1/2.75)) {
 
return c*(7.5625*t*t) + b;
 
} else if (t < (2/2.75)) {
 
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 
} else if (t < (2.5/2.75)) {
 
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 
} else {
 
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 
}
 
},
 
easeInOutBounce: function (x, t, b, c, d) {
 
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 
}
 
});
 
 
/*
 
*
 
* TERMS OF USE - EASING EQUATIONS
 
*
 
* Open source under the BSD License.
 
*
 
* Copyright © 2001 Robert Penner
 
* All rights reserved.
 
*
 
* Redistribution and use in source and binary forms, with or without modification,
 
* are permitted provided that the following conditions are met:
 
*
 
* Redistributions of source code must retain the above copyright notice, this list of
 
* conditions and the following disclaimer.
 
* Redistributions in binary form must reproduce the above copyright notice, this list
 
* of conditions and the following disclaimer in the documentation and/or other materials
 
* provided with the distribution.
 
*
 
* Neither the name of the author nor the names of contributors may be used to endorse
 
* or promote products derived from this software without specific prior written permission.
 
*
 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 
* OF THE POSSIBILITY OF SUCH DAMAGE.
 
*
 
*/
 
</script>
 
 
    
 
    
 
   <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&amp;ctype=text/javascript"></script>
  <!-- SLIDER_TIMELINE -->
 
<script type="text/javascript" src="https://2017.igem.org/Template:BGIC-Union/timeline-js?action=raw&amp;ctype=text/javascript"></script>
 
<script type="text/javascript">
 
  
$(window).load(function() {
 
// dark
 
$('.timelineLight').timeline({
 
openTriggerClass : '.read_more',
 
startItem : '15/08/2012'
 
});
 
});
 
</script>
 
 
  <!-- hover    -->   
 
  <!-- hover    -->   
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&amp;ctype=text/javascript"></script>
 
   <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&amp;ctype=text/javascript"></script>
 
   </head>
 
   </head>
 
 
 
  <body>
 
  <body>
 
<div class="column_full_size top1">
 
<div class="column_full_size top1">
Line 882: Line 311:
 
                     <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li>
 
                     <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li>
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Sponsors">sponsors</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li>
 
                             </ul>
 
                             </ul>
Line 894: Line 323:
 
                             <ul class="dropdown-menu" >
 
                             <ul class="dropdown-menu" >
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li>
<li><a href="https://2017.igem.org/Team:BGIC-Union/Design">design</a></li>
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Design”></a>design</li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li>
                         
+
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Model">model</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li>
Line 905: Line 334:
 
                         <li class="dropdown ">    <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                         <li class="dropdown ">    <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                             <ul class="dropdown-menu" role="menu">
 
                             <ul class="dropdown-menu" role="menu">
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">protocols</a></li>
+
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">experiments</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul>
Line 917: Line 346:
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
 
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Measurement">measurement</a></li>
  
 
                             </ul>
 
                             </ul>
Line 925: Line 354:
 
                           <li class="dropdown ">  <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                           <li class="dropdown ">  <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 
                             <ul class="dropdown-menu" role="menu">
 
                             <ul class="dropdown-menu" role="menu">
                             
+
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design">timeline</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li>
 
                                 <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li>
+
<li><a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">integrated</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li>
Line 934: Line 363:
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li>
 
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li>
 
                             </ul>
 
                             </ul>
                        </li>
 
<li class="dropdown ">
 
                            <a href="https://2017.igem.org/Team:BGIC-Union/Model">Model </a>
 
 
                         </li>
 
                         </li>
 
<li class="dropdown ">
 
<li class="dropdown ">
Line 948: Line 374:
 
     </div>
 
     </div>
 
</nav>
 
</nav>
 
<!-- BEGIN TIMELINE -->
 
 
 
</div> <!-- /END TIMELINE -->
 
 
<!-- +++++ Projects Section +++++ -->
 
 
 
<!-- +++++ Projects Section +++++ -->
 
<!-- +++++ Projects Section +++++ -->
 
 
Line 966: Line 384:
  
 
</br></br>
 
</br></br>
 +
<div class="row">
 +
<div class="col-md-6">
 +
<video width="450" height="340"
 +
src="https://static.igem.org/mediawiki/2017/8/8e/BGIC-Union_HP_Video-_This_is_Biosafety.mp4" type="video/mp4">
 +
 
 +
</video></br></br>
 +
 +
 +
<div class="col-md-6">
 +
 +
  <video width="450" height="340"
 +
src="https://static.igem.org/mediawiki/2017/e/ef/Sfls-biosafety.mp4" type="video/mp4">
 +
 
 +
</br></br>
 +
</video>
 +
</div>
 +
<div>
 
<h3>2 Safe lab work</h3></br>
 
<h3>2 Safe lab work</h3></br>
 
</br></br>
 
</br></br>
Line 982: Line 417:
 
">biosafety!</a></h4>
 
">biosafety!</a></h4>
  
BSL-1 lab is the lowest biosafety level, but that doesn’t mean we can be casual in our lab. The “This is biosafety” from safety hub pictures lab technicians who make themselves at home in their lab, and we shot this into a video and reversed all the mistakes in the picture by “freezing the time” and then fixing everything. Our muse comes from the manga Jojo’ s bizarre adventure.
+
BSL-1 lab is the lowest biosafety level, but that doesn’t mean we can be casual in our lab. The “This is biosafety" from safety hub pictures lab technicians who make themselves at home in their lab, and we shot this into a video and reversed all the mistakes in the picture by “freezing the time" and then fixing everything. Our muse comes from the manga Jojo’ s bizarre adventure.
 
</br></br> <h3>3 Biosafety</h3> </br>
 
</br></br> <h3>3 Biosafety</h3> </br>
Biosafety and biosecurity are the top priorities to be considered in the IGEM competition. By definition, biosafety is “the containment principles, technologies and practices that are implemented to prevent unintentional exposure to pathogens and toxins, or their accidental release”<span class="mui-badge mui-badge-inverted">1</span>
+
Biosafety and biosecurity are the top priorities to be considered in the IGEM competition. By definition, biosafety is “the containment principles, technologies and practices that are implemented to prevent unintentional exposure to pathogens and toxins, or their accidental release"<span class="mui-badge mui-badge-inverted">1</span>
 
</br>
 
</br>
 
We use DH5α and BL21 (DE3) E.coli strain, which are non-pathogenic to normal healthy individuals, for the cloning part of our project, and none of our parts are toxic or contain virulent factors. The single strand RNA used to guide dCas9 proteins are synthesized by ourselves from human cell line H2228; the split T7 polymerase switch and the T7 promoter come from the BL21(DE3) strain; Cas9 is originally a part of bacteria’s immune mechanism and is able to cleave invading DNA, but the split dCas9 does not possess the ability of cleaving DNA; the toxic level of the several signal outputs do not have any threats towards healthy human beings. And after all, the detection is in vitro.</br>
 
We use DH5α and BL21 (DE3) E.coli strain, which are non-pathogenic to normal healthy individuals, for the cloning part of our project, and none of our parts are toxic or contain virulent factors. The single strand RNA used to guide dCas9 proteins are synthesized by ourselves from human cell line H2228; the split T7 polymerase switch and the T7 promoter come from the BL21(DE3) strain; Cas9 is originally a part of bacteria’s immune mechanism and is able to cleave invading DNA, but the split dCas9 does not possess the ability of cleaving DNA; the toxic level of the several signal outputs do not have any threats towards healthy human beings. And after all, the detection is in vitro.</br>
Line 994: Line 429:
 
</br></br> <h3>4 Biosecurity:</h3>  
 
</br></br> <h3>4 Biosecurity:</h3>  
 
</br>
 
</br>
Biosecurity (laboratory biosecurity) is “the protection, control and accountability for valuable biological materials within laboratories, in order to prevent their unauthorized access, loss, theft, misuse, diversion or intentional release.<span class="mui-badge mui-badge-inverted">2</span>Our lab locates at the top floor of the Shenzhen BGI headquarter and all the biological materials and equipment within the lab are secured. If any member of the team does not reorganize the lab after use, we will ensure he/she won’t do so by the following scheme: Upon departure, photos of the organized lab after use must be taken by the lab technicians and uploaded to the chat group to be viewed by all team members. If he/she does not clean up the lab after experiments for more than three times, he/she will be prohibited from entering the lab again. Fortunately, this has not happen.
+
Biosecurity (laboratory biosecurity) is “the protection, control and accountability for valuable biological materials within laboratories, in order to prevent their unauthorized access, loss, theft, misuse, diversion or intentional release." <span class="mui-badge mui-badge-inverted">2</span>Our lab locates at the top floor of the Shenzhen BGI headquarter and all the biological materials and equipment within the lab are secured. If any member of the team does not reorganize the lab after use, we will ensure he/she won’t do so by the following scheme: Upon departure, photos of the organized lab after use must be taken by the lab technicians and uploaded to the chat group to be viewed by all team members. If he/she does not clean up the lab after experiments for more than three times, he/she will be prohibited from entering the lab again. Fortunately, this has not happen.
 
</br></br>
 
</br></br>
 
<h3>5 The safe use of our product</h3>
 
<h3>5 The safe use of our product</h3>
Line 1,011: Line 446:
  
 
</br></br><h3> 6 Safe shipment</h3></br>
 
</br></br><h3> 6 Safe shipment</h3></br>
<div class=" row">
+
<div class="center row">
<div vclass="col-md-6">
+
<img src="https://static.igem.org/mediawiki/2017/5/56/Safeshipmentbgic.jpg" height="600px"/>  
<img src="https://static.igem.org/mediawiki/2017/5/56/Safeshipmentbgic.jpg" height="600px"/> </div>
+
<div vclass="col-md-6">
+
<img src="https://static.igem.org/mediawiki/2017/e/ee/Shipment.jpg" height="600px"/> </div></div>
+
 
</br></br><h3>7 References</h3>
 
</br></br><h3>7 References</h3>
</br><a href="http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_CSR_LYO_2004_11/en/">1 WHO,<i> Laboratory Biosafety Manual – Third Edition</i>, </a>
+
1 WHO,<i> Laboratory Biosafety Manual – Third Edition</i>, </br>http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_CSR_LYO_2004_11/en/
</br><a href="http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_EPR_2006_6.pdf">2 WHO, <i>Biorisk Management: Laboratory Biosecurity Guidance</i>, September 2006</a>
+
2 WHO, <i>Biorisk Management: Laboratory Biosecurity Guidance</i>, September 2006
</br><a href="http://www.doc88.com/p-9502338703955.html">3 <i>National Standard of The People’s Republic of China, Laboratories-General Requirements for Biosafety.</i>
+
</br>http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_EPR_2006_6.pdf
</a>
+
3 <i>National Standard of The People’s Republic of China, Laboratories-General Requirements for Biosafety.</i>
 
+
</br>http://www.doc88.com/p-9502338703955.html
 
</p>
 
</p>
 
</div>
 
</div>
Line 1,027: Line 459:
 
</div><!-- /container -->
 
</div><!-- /container -->
 
 
 +
 +
<!-- +++++ Footer Section +++++ -->
 +
 +
<div id="footer">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-lg-4">
 +
    <p>F12 BGI-College,146 Beishan Road,Yantian District 518083
 +
                                    </br> Shenzhen,Guangdong Province, China,Asia
 +
                                </br>Phone:+86-755-36307888
 +
                                </br>Email: info@genomics.cn
 +
</br>Fax:+86-755-36307273</p>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>Links</h4>
 +
<p>
 +
<a href="#">SAFETY</a><br/>
 +
<a href="#">PARTS</a><br/>
 +
<a href="#">EVALUATION</a>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>BGIC-COLLEGE 2017</h4>
 +
<img src="https://static.igem.org/mediawiki/2017/d/de/Repute-logo-light.png" width="60px" height="72px"></img>
 +
<p></br><i class="fa-twitter">TWITTER:@BGIC-Union</i> </p>
 +
 +
</div><!-- /col-lg-4 -->
 +
 +
</div>
 +
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
    <!-- Bootstrap core JavaScript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <script src="assets/js/bootstrap.min.js"></script>
 +
  </body>
 +
</html>
 +
 +
        <!-- END PAGE CONTENT -->
 +
 +
<!-- +++++ Footer Section +++++ -->
 +
 +
<div id="footer">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-lg-4">
 +
    <p>F12 BGI-College,146 Beishan Road,Yantian District 518083
 +
                                    </br> Shenzhen,Guangdong Province, China,Asia
 +
                                </br>Phone:+86-755-36307888
 +
                                </br>Email: info@genomics.cn
 +
</br>Fax:+86-755-36307273</p>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
 +
<p>
 +
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">Applied Design</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">Entreprenuership</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">Integrated HP</a><br/>
 +
                      <a href="https://2017.igem.org/Team:BGIC-Union/Engagement">Education & Public Engagement</a><br/>
 +
  <a href="https://2017.igem.org/Team:BGIC-Union/Model">Model</a><br/>
 +
<a href="https://2017.igem.org/Team:BGIC-Union/Evaluation">EVALUATION</a>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>BGIC-COLLEGE 2017</h4>
 +
<img src="https://static.igem.org/mediawiki/2017/d/de/Repute-logo-light.png" width="60px" height="72px"></img>
 +
<p></br><i class="fa-twitter">TWITTER:@BGIC-Union</i> </p>
 +
 +
</div><!-- /col-lg-4 -->
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 
    
 
    
 
    
 
    
 
   </body>
 
   </body>
 +
 +
 +
 +
     
  
 
</html>
 
</html>

Revision as of 18:36, 1 November 2017

   <meta charset="utf-8">
  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">


   <title>Safety</title>
  <head>
  
       <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
       <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500' rel='stylesheet' type='text/css'>
   <link href="https://2017.igem.org/Template:BGIC-Union/bootstrap-css?action=raw&ctype=text/css" rel="stylesheet">

<link href="https://2017.igem.org/Template:BGIC-Union/animate-css?action=raw&ctype=text/css" rel="stylesheet">

 <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&ctype=text/css" rel="stylesheet">
  <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&ctype=text/css" rel="stylesheet">
 
  <style type="text/css">
  

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

  1. top_title,#sideMenu { display: none !important; }
       #content {
           width: 100%;
           margin: 0;
           padding: 0;
           
       }



  1. content{
  background-color: #FFe4e1; !important;

}


html, body {

   margin: 0 !important;
   padding: 0 !important;

} body {

 	background-color: #FFe4e1;
 	font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #555;
   ;
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;

}

/* Titles */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif;

   font-weight: 700;
   color: #333;

}

h1 { font-size: 35px; margin-top: 30px; margin-bottom: 30px; }


/* Paragraph & Typographic */ p {

   line-height: 28px;
   margin-bottom: 25px;
   font-size: 16px;

}

.centered {

   text-align: center;

}

/* Links */ a {

   color: #20B2AA;
   word-wrap: break-word;
   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;

}

a:hover, a:focus {

   color: #7b7b7b;
   text-decoration: none;
   outline: 0;

}

a:before, a:after {

   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;

}

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;

}

.copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; }

.navbar { text-transform: uppercase; margin-bottom: 0px; }

.navbar-inverse { padding-bottom: 70px; padding-top: 70px; }

.navbar-inverse { background-color: #FFA07A; border-color: #FA8072; }

.navbar-inverse .navbar-nav > li > a { color: white; }

.navbar-inverse .navbar-nav > li > a:hover { color: #222222; }

.navbar-brand { font-weight: 700; font-size: 20px; letter-spacing: 2px; }

.navbar-inverse .navbar-brand { color: white; }

.navbar-inverse .navbar-toggle { border-color: transparent; }

.progress-bar-theme {

 background-color: 	#FFA07A;

}


/* Helpers */

.mt { margin-top: 40px; margin-bottom: 40px; }

.pt { padding-top: 50px; padding-bottom: 50px; }


/* +++++ WRAP SECTIONS +++++ */

  1. ww {

padding-top: 0px; padding-bottom: 70px; background-color: #f2f2f2; }


  1. footer {

background-color: #ADD8E6; padding-top: 50px; padding-bottom: 50px; }

  1. footer p {

color: white; }

  1. footer h4 {

color: white; text-transform: uppercase; padding-bottom: 20px; }


/* +++++ Color Wraps / Blog Page +++++ */

  1. grey {

padding-top: 60px; padding-bottom: 60px; background-color: #f2f2f2; }

  1. white {

padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; }


/* Blog Date*/ bd { font-size: 12px; text-transform: uppercase; color: #d2d2d2; font-weight: 700; }

/* Blog Author*/ ba { font-size: 12px; text-transform: uppercase; }

/* Blog Quote */ .bq { font-size: 22px; padding-top: 30px; }

/* Blog Tags */ bt { font-size: 12px; }

/* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */ /* Effects also are controled by hover.zoom.js */ .zoom {

   display:block; 
   position:relative; 
   overflow:hidden; 
   background:transparent url(Bgic_loader.gif) no-repeat center;

}


   .zoomOverlay {
       position:absolute;
       top:0; left:0;
       bottom:0; right:0;
       display:none;
       background-image:url(../img/zoom.png);
       background-repeat:no-repeat;
       background-position:center;
   }

.zoom2 { opacity: 1; }

.zoom2:hover { opacity: 0.5; }

/* glyphicon Configuration */

.glyphicon { font-size: 40px; color: #1abc9c; }

  </style>
 
 
  <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&ctype=text/javascript"></script>
 <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&ctype=text/javascript"></script>
  <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&ctype=text/javascript"></script>
  </head>
<body>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

</nav>

1 Introduction

</br>

We adhered to the requirements of “Safe project design, safe lab work and safe shipment” throughout the project and focused intensely on safe lab work. We submitted the safety form as required on time. We had a discussion with one of the member of the biosafety department at Shenzhen Beijing Genomics Institute to ensure the safety of our project design. In terms of lab safety, we collaborated with Shenzhen_SFLS to produce <a href="https://www.bilibili.com/video/av15839079/?from=search&seid=7025331502860186826">Biosafety level videos</a> and created a video version of the “This is biosafety” from the IGEM safety hub. In addition, we also concluded all the lab practice mistakes we had made to give the next year’s IGEMers at BGI College a remainder.

</br></br>

<video width="450" height="340"

src="https://static.igem.org/mediawiki/2017/8/8e/BGIC-Union_HP_Video-_This_is_Biosafety.mp4" type="video/mp4">
 

</video></br></br>


 <video width="450" height="340"
src="https://static.igem.org/mediawiki/2017/e/ef/Sfls-biosafety.mp4" type="video/mp4">
 

</br></br> </video>

2 Safe lab work

</br>

</br></br>

<img src="Safe.jpg" height="500px"/>
<img src="Eearrange.jpg" height="500px"/>

</br></br> The lab we conducted our experiments in is classified as biosafety levelⅠ, according to China’s biosafety guideline3, applicable to operate microorganisms that will not cause human or animal diseases generally. Before starting the IGEM lab work, all members have participated in synthetic biology summer camps in previous year at BGI College where they are taught the lab safety rules and conducted molecular cloning experiments under the guidance of our instructor and advisor. Despite the preparation for lab work, we still made mistakes when actually working in the lab. Some of the mistakes lead to failure in experiments, some are just laughable mistakes that pose no safety threat or result in failure. We marked these mistakes in notebook as well as in the mistakes collection we concluded. We also highlighted some of the important safety measures that need to be taken in the lab because of non-biological hazards: </br></br> • The use of Ethidium Bromide, which is a carcinogen, requires lab technicians to wear personal protective equipment. (PPE). And the disposal of EB solution would be strictly monitored. </br></br>• The use of TEMED, Ammonium Persulfate to catalyze the polymerization of acrylamide when making SDS-page gels require lab technicians to wear PPE and conduct the work in a fume hood. </br></br>• When analyzing gels we use this board to protect our eyes from UV light. </br></br>• When sterilizing the clean bench we make sure the glass panel is pulled down. </br>

This is <a href="https://youtu.be/lNVhrsvEHMc ">biosafety!</a>

BSL-1 lab is the lowest biosafety level, but that doesn’t mean we can be casual in our lab. The “This is biosafety" from safety hub pictures lab technicians who make themselves at home in their lab, and we shot this into a video and reversed all the mistakes in the picture by “freezing the time" and then fixing everything. Our muse comes from the manga Jojo’ s bizarre adventure.

</br></br>

3 Biosafety

</br>

Biosafety and biosecurity are the top priorities to be considered in the IGEM competition. By definition, biosafety is “the containment principles, technologies and practices that are implemented to prevent unintentional exposure to pathogens and toxins, or their accidental release"1 </br> We use DH5α and BL21 (DE3) E.coli strain, which are non-pathogenic to normal healthy individuals, for the cloning part of our project, and none of our parts are toxic or contain virulent factors. The single strand RNA used to guide dCas9 proteins are synthesized by ourselves from human cell line H2228; the split T7 polymerase switch and the T7 promoter come from the BL21(DE3) strain; Cas9 is originally a part of bacteria’s immune mechanism and is able to cleave invading DNA, but the split dCas9 does not possess the ability of cleaving DNA; the toxic level of the several signal outputs do not have any threats towards healthy human beings. And after all, the detection is in vitro.</br> Here is the link to our safety forms:
<a href="https://static.igem.org/mediawiki/2017/9/96/BGIC-Union_Safety2017_Spreadsheet.xls">Safety spreadsheet-BGIC-Union</a>

</br> We adhere to BSL-1 lab practices strictly, when handling bacterial samples. We did not test our design with blood samples containing ctDNA with our biosensor, so no threats come from this aspect.

</br></br>

4 Biosecurity:

</br> Biosecurity (laboratory biosecurity) is “the protection, control and accountability for valuable biological materials within laboratories, in order to prevent their unauthorized access, loss, theft, misuse, diversion or intentional release." 2Our lab locates at the top floor of the Shenzhen BGI headquarter and all the biological materials and equipment within the lab are secured. If any member of the team does not reorganize the lab after use, we will ensure he/she won’t do so by the following scheme: Upon departure, photos of the organized lab after use must be taken by the lab technicians and uploaded to the chat group to be viewed by all team members. If he/she does not clean up the lab after experiments for more than three times, he/she will be prohibited from entering the lab again. Fortunately, this has not happen. </br></br>

5 The safe use of our product

</br> The fusion of the anaplastic lymphoma kinase (ALK) with the echinoderm microtubule-associated protein-like 4 (EML4) was found in approximately 5% of all NSCLC cases worldwide, equivalent to over 70,000 patients diagnosed annually. EML4-ALK positive lung cancer can be treated with crizotinib. There is currently no standard method for EML4-ALK detection, and several methods including polymerase chain reaction (PCR), immunohistochemistry (IHC) and fluorescence in situ hybridization (FISH) are currently being evaluated. Our project, which is a biosensor applied in liquid biopsy to detect EML4-ALK on the circulating tumor DNA, only requires blood sample instead of tissue specimen, minimizing the pain incurred to the patient. To further develop our project, we devise a detection kit that includes hemostix, a mini hand-held centrifuge, NASBA reaction reagents and test chips. </br> • 1. Hemostix: the blood sample and the hemostix can be discarded without special processing </br> • 2.Centrifuge: the hand-held centrifuge is safe-to use by simply pulling the string </br> • 3. NASBA reaction reagents: no toxic materials are included. </br> • 4.test chip: we constructed a cell-free system on test chips thus no microbes are involved, and the components involved in the cell-free system, as discussed in the biosafety section, does not pose threats to humans’ health. </br> (For more info. on the product, see Applied Design.)

</br></br>

6 Safe shipment

</br>

<img src="Safeshipmentbgic.jpg" height="600px"/>

</br></br>

7 References

1 WHO, Laboratory Biosafety Manual – Third Edition, </br>http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_CSR_LYO_2004_11/en/ 2 WHO, Biorisk Management: Laboratory Biosecurity Guidance, September 2006 </br>http://www.who.int/csr/resources/publications/biosafety/WHO_CDS_EPR_2006_6.pdf 3 National Standard of The People’s Republic of China, Laboratories-General Requirements for Biosafety. </br>http://www.doc88.com/p-9502338703955.html </p>



   <script src="assets/js/bootstrap.min.js"></script>
 </body>

</html>


</div>


 </body>



</html>