Difference between revisions of "Team:CIEI-BJ/Safety"

Line 1: Line 1:
 
{{CIEI-BJ}}
 
{{CIEI-BJ}}
−
<html lang="en">
+
 
−
<head>
+
<html><head>
−
<meta charset="UTF-8">
+
<title>Safety - TAS Taipei iGEM Wiki</title>
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <style>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
.container{
−
<title>Safety</title>
+
  padding:0px !important;
 +
}
 +
 
 +
#content {
 +
  margin: 0;
 +
  margin-top:-10px;
 +
  padding: 0;
 +
  width: auto;
 +
  border: 0;
 +
  outline: 0;
 +
  font-size: 100%;
 +
  vertical-align: baseline;
 +
  background: transparent;
 +
  position: static;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  margin: 0;
 +
  padding: 0;
 +
  border: 0;
 +
  outline: 0;
 +
  background: transparent;
 +
}
 +
.printfooter,
 +
#menubar,
 +
#siteSub,
 +
#contentSub,
 +
#search-controls,
 +
.firstHeading,
 +
#footer-box,
 +
#catlinks,
 +
#p-logo {
 +
  display: none;
 +
}
 +
body,#bodyContent {
 +
  margin: 0px 0 0 0;
 +
  padding: 0;
 +
  top:0px;
 +
}
 +
#top-section {
 +
  width: 965px;
 +
  height: 0;
 +
  margin: 0 auto;
 +
  padding: 0;
 +
  border: none;
 +
}
 +
#menubar {
 +
  font-size: 65%;
 +
  top: -14px;
 +
}
 +
.left-menu:hover {
 +
  background-color: transparent;
 +
}
 +
#menubar li a {
 +
  background-color: transparent;
 +
}
 +
#menubar:hover {
 +
  color: white;
 +
}
 +
#menubar li a {
 +
  color: transparent;
 +
}
 +
#menubar:hover li a {
 +
  color: white;
 +
}
 +
body,#bodyContent
 +
html {
 +
  height: 100%;
 +
}
 +
body,#bodyContent {
 +
  background-attachment: fixed;
 +
  background-repeat: repeat;
 +
}
 +
html {
 +
  overflow-y: scroll;
 +
}
 +
header > .container {
 +
  padding-top: 25px;
 +
  padding-bottom: 15px;
 +
}
 +
.container {
 +
  max-width: 1080px;
 +
}
 +
.absolute_center {
 +
  margin: auto;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
}
 +
.sketch {
 +
  display: none;
 +
  opacity: 1;
 +
  position: fixed;
 +
  top: 0;
 +
}
 +
#masthead #big-video-wrap {
 +
  position: static;
 +
}
 +
#masthead #head_text {
 +
  margin: auto;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
  height: 100px;
 +
}
 +
#masthead h1,
 +
#masthead h2 {
 +
  font-family: Lato;
 +
  color: white;
 +
  opacity: 0.99;
 +
  text-align: center;
 +
  margin: 0;
 +
}
 +
#masthead h1 {
 +
  letter-spacing: 6px;
 +
  margin-bottom: 5px;
 +
  font-size: 60px;
 +
}
 +
#masthead h2 {
 +
  font-size: 15px;
 +
}
 +
.nav #nav_left {
 +
  display: inline-block;
 +
  vertical-align: bottom;
 +
}
 +
.nav #nav_left img {
 +
  width: 170px;
 +
}
 +
.nav #nav_right {
 +
  margin-left: 15px;
 +
  display: inline-block;
 +
  vertical-align: bottom;
 +
}
 +
.nav #nav_right h2 {
 +
  color: white;
 +
  font-size: 70px;
 +
  margin-top: 0;
 +
  margin-bottom: 0;
 +
}
 +
.nav ul {
 +
  padding: 0;
 +
  margin-top: 0;
 +
}
 +
.nav ul li {
 +
  list-style-type: none;
 +
  display: inline-block;
 +
  color: white;
 +
  border-right: 1px solid white;
 +
  padding: 0 10px;
 +
  margin-left: -4px;
 +
}
 +
.nav ul li:last-child {
 +
  border: 0;
 +
}
 +
.quotespacer {
 +
  border-top: 1px solid white;
 +
  width: 150px;
 +
  height: 1px;
 +
  display: block;
 +
  margin: 0 auto;
 +
}
 +
#missionquote {
 +
  -webkit-animation: 20s huerotate linear infinite;
 +
  margin: 15px auto;
 +
}
 +
#telomere {
 +
  width: 100%;
 +
  height: 360px;
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
  transition: 1s ease;
 +
}
 +
#telomere:hover {
 +
  -webkit-transform: scale(1.1);
 +
}
 +
#portrait_container {
 +
  border-right: 1px solid white;
 +
}
 +
#portrait_container img {
 +
  width: 15%;
 +
  padding: 5px;
 +
  transition: 0.2s ease;
 +
}
 +
#portrait_container img:hover {
 +
  cursor: pointer;
 +
  -webkit-transform: scale(1.3);
 +
}
 +
#portrait_container > .row {
 +
  padding-top: 5px;
 +
}
 +
#portrait_container > .row:last-child {
 +
  padding-bottom: 5px;
 +
}
 +
@-webkit-keyframes huerotate {
 +
  0% {
 +
    -webkit-filter: hue-rotate(0deg);
 +
  }
 +
  100% {
 +
    -webkit-filter: hue-rotate(360deg);
 +
  }
 +
}
 +
.SVG_igem_logo .PATH_tiger_logo {
 +
  fill: none;
 +
  stroke: #fdd700;
 +
  stroke-width: 2.5;
 +
  stroke-linecap: round;
 +
  stroke-linejoin: miter;
 +
  stroke-miterlimit: 4;
 +
  stroke-opacity: 1;
 +
  stroke-dashoffset: 0;
 +
}
 +
.SVG_igem_logo .PATH_igem_logo_text {
 +
  fill: none;
 +
  stroke: #252f62;
 +
  stroke-width: 2.5;
 +
  stroke-linecap: round;
 +
  stroke-linejoin: miter;
 +
  stroke-miterlimit: 4;
 +
  stroke-opacity: 1;
 +
  stroke-dashoffset: 0;
 +
}
 +
.SVG_igem_logo .PATH_igem_logo_darkgreen {
 +
  fill: none;
 +
  stroke: #096836;
 +
  stroke-width: 2.5;
 +
  stroke-linecap: round;
 +
  stroke-linejoin: miter;
 +
  stroke-miterlimit: 4;
 +
  stroke-opacity: 1;
 +
  stroke-dashoffset: 0;
 +
}
 +
.SVG_igem_logo .PATH_igem_logo_lightgreen {
 +
  fill: none;
 +
  stroke: #99cc99;
 +
  stroke-width: 2.5;
 +
  stroke-linecap: round;
 +
  stroke-linejoin: miter;
 +
  stroke-miterlimit: 4;
 +
  stroke-opacity: 1;
 +
  stroke-dashoffset: 0;
 +
}
 +
/******************* SLDIESJS ******************/
 +
#slides {
 +
  display: none;
 +
}
 +
#slides .slidesjs-navigation {
 +
  margin-top: 3px;
 +
}
 +
#slides .slidesjs-previous {
 +
  margin-right: 5px;
 +
  float: left;
 +
}
 +
#slides .slidesjs-next {
 +
  margin-right: 5px;
 +
  float: left;
 +
}
 +
.slidesjs-pagination {
 +
  margin: 6px 0 0;
 +
  float: right;
 +
  list-style: none;
 +
}
 +
.slidesjs-pagination li {
 +
  float: left;
 +
  margin: 0 1px;
 +
}
 +
.slidesjs-pagination li a {
 +
  display: block;
 +
  width: 13px;
 +
  height: 0;
 +
  padding-top: 13px;
 +
  background-position: 0 0;
 +
  float: left;
 +
  overflow: hidden;
 +
}
 +
.slidesjs-pagination li a.active,
 +
.slidesjs-pagination li a:hover.active {
 +
  background-position: 0 -13px;
 +
}
 +
.slidesjs-pagination li a:hover {
 +
  background-position: 0 -26px;
 +
}
 +
#slides a:link,
 +
#slides a:visited {
 +
  color: #333;
 +
}
 +
#slides a:hover,
 +
#slides a:active {
 +
  color: #9e2020;
 +
}
 +
.navbar {
 +
  overflow: hidden;
 +
}
 +
.slideContainer {
 +
  margin: 0 auto;
 +
}
 +
#projIntroContainer {
 +
  padding: 0px 0px 0px 0px;
 +
  text-align: center;
 +
}
 +
#projIntro {
 +
  margin-top: -8px;
 +
  padding-top: 0px;
 +
  text-align: justify;
 +
  padding-right: 40px;
 +
  font-size: 19px;
 +
  font-family: 'Poiret One', cursive;
 +
}
 +
/*************** BIGVIDEO.JS **************/
 +
#big-video-wrap {
 +
  overflow: hidden;
 +
  height: 100%;
 +
  width: 100%;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
#big-video-vid,
 +
#big-video-image {
 +
  position: absolute;
 +
}
 +
#big-video-control-container {
 +
  position: fixed;
 +
  bottom: 0;
 +
  padding: 10px;
 +
  width: 100%;
 +
  background: rgba(0, 0, 0, 0.25);
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  -ms-transition-duration: 0.6s;
 +
  -o-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
#big-video-control {
 +
  width: 100%;
 +
  height: 16px;
 +
  position: relative;
 +
}
 +
#big-video-control-middle {
 +
  margin: 0 56px 0 24px;
 +
}
 +
#big-video-control-bar {
 +
  width: 100%;
 +
  height: 16px;
 +
  position: relative;
 +
  cursor: pointer;
 +
}
 +
#big-video-control-progress {
 +
  position: absolute;
 +
  top: 7px;
 +
  height: 3px;
 +
  width: 0%;
 +
  background: #fff;
 +
}
 +
#big-video-control-track {
 +
  position: absolute;
 +
  top: 8px;
 +
  height: 1px;
 +
  width: 100%;
 +
  background: #fff;
 +
}
 +
#big-video-control-bound-left {
 +
  left: 0;
 +
}
 +
#big-video-control-bound-right {
 +
  right: -1px;
 +
}
 +
#big-video-control-track .ui-slider-handle {
 +
  opacity: 0;
 +
}
 +
#big-video-control-playhead {
 +
  left: 30%;
 +
}
 +
#big-video-control-play {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  height: 16px;
 +
  width: 16px;
 +
}
 +
#big-video-control-timer {
 +
  position: absolute;
 +
  top: 1px;
 +
  right: 0;
 +
  color: #fff;
 +
  font-size: 11px;
 +
}
 +
#big-video-control-playhead,
 +
#big-video-control-bound-left,
 +
#big-video-control-bound-right {
 +
  position: absolute;
 +
  top: 0;
 +
  height: 16px;
 +
  width: 1px;
 +
  background: #fff;
 +
}
 +
#big-video-control .ui-slider-handle {
 +
  border-left: solid 1px #fff;
 +
  width: 16px;
 +
  height: 16px;
 +
  position: absolute;
 +
  top: -8px;
 +
}
 +
.transparent {
 +
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
  filter: alpha(opacity=0);
 +
  -moz-opacity: 0;
 +
  -khtml-opacity: 0;
 +
  opacity: 0;
 +
}
 +
.vjs-big-play-button {
 +
  display: none !important;
 +
}
 +
canvas {
 +
  position: fixed;
 +
  top: 0px;
 +
  left: 0px;
 +
}
 +
.card {
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  background-color: white;
 +
  box-shadow: 0px 0px 5px black;
 +
  padding: 50px;
 +
}
 +
.card_pic {
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  background-color: white;
 +
  box-shadow: 0px 0px 5px black;
 +
  padding: 0px;
 +
}
 +
.container {
 +
  padding: 0px;
 +
  min-width: 1080px;
 +
}
 +
.container div nav {
 +
  min-width: 1080px;
 +
}
 +
button:focus {
 +
  outline: 0 !important;
 +
}
 +
a:focus {
 +
  outline: 0 !important;
 +
}
 +
img {
 +
  max-width: 100%;
 +
}
 +
a {
 +
  text-decoration: none;
 +
  color: inherit !important;
 +
}
 +
a:hover {
 +
  color: inherit;
 +
}
 +
.full {
 +
  padding: 0;
 +
}
 +
.slidesjs-pagination {
 +
  margin-top: -25px;
 +
  margin-right: 10px;
 +
  z-index: 10;
 +
  position: relative;
 +
}
 +
#slides .heroImageContainer {
 +
  background-size: cover;
 +
  padding-top: 54%;
 +
  background-position: 50% 50%;
 +
  background-repeat: no-repeat;
 +
}
 +
#slides .heroImageContainer h3 {
 +
  opacity: 0.85;
 +
  max-width: 400px;
 +
  position: absolute;
 +
  padding: 10px 20px;
 +
  font-weight: normal;
 +
  color: black;
 +
  font-size: 35px;
 +
  font-family: Lato;
 +
}
 +
#slides .heroImageContainer h3 span {
 +
  font-size: 21px;
 +
  display: block;
 +
}
 +
#slides .heroImageContainer h3.topleft {
 +
  top: 0;
 +
  left: 0;
 +
  margin-left: 20px;
 +
}
 +
#slides .heroImageContainer h3.topright {
 +
  top: 0;
 +
  right: 5px;
 +
  margin-right: 20px;
 +
}
 +
#slides .heroImageContainer h3.bottomleft {
 +
  bottom: 0;
 +
  left: 0;
 +
  margin-bottom: 35px;
 +
  margin-left: 20px;
 +
}
 +
#slides .heroImageContainer h3.bottomright {
 +
  bottom: 0;
 +
  right: 5px;
 +
  margin-bottom: 35px;
 +
  margin-right: 20px;
 +
}
 +
#slides .heroImageContainer h3.red {
 +
  background-color: #d10000;
 +
}
 +
#slides .heroImageContainer h3.purple {
 +
  background-color: #8e44ad;
 +
}
 +
#slides .heroImageContainer h3.blue {
 +
  background-color: #2c3e50;
 +
}
 +
#slides .heroImageContainer h3.belize {
 +
  background-color: #2980b9;
 +
}
 +
#slides .heroImageContainer h3.green {
 +
  background-color: #27ae60;
 +
}
 +
#slides .heroImageContainer h3.orange {
 +
  background-color: #f39c12;
 +
}
 +
#slides .heroImageContainer h3.hide {
 +
  display: none;
 +
}
 +
#slides .heroImageContainer .slidesjs-control,
 +
#slides .heroImageContainer .slidesjs-container {
 +
  width: 100% !important;
 +
}
 +
nav ul {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
nav .dropdown-menu {
 +
  border: 0px;
 +
  margin-top: 0px;
 +
  padding: 10px;
 +
  box-shadow: 0px 0px 5px black;
 +
  z-index: -1;
 +
}
 +
nav .dropdown-menu img {
 +
  width: 90px;
 +
  opacity: 0.85;
 +
  float: left;
 +
  margin-right: 5px;
 +
}
 +
nav .dropdown-menu h4 {
 +
  color: white;
 +
  padding: 5px;
 +
  margin: 0;
 +
  font-family: Lato;
 +
  font-size: 20px;
 +
}
 +
nav .dropdown-menu .subcategories_container {
 +
  display: inline-block;
 +
  width: 100%;
 +
  cursor: pointer;
 +
 
 +
}
 +
nav .dropdown-menu .subcategories_container > div {
 +
  min-width: 200px;
 +
  display: inline-block;
 +
  text-align: center;
 +
  border: 1px solid white;
 +
  padding-left:15px;
 +
  padding-right:15px;
 +
}
 +
nav .dropdown-menu .subcategories_container h5 {
 +
  font-family: Lato;
 +
  text-transform: uppercase;
 +
  font-size: 16px;
 +
  color: white;
 +
}
 +
nav li.dropdown {
 +
  width: 180px;
 +
  display: inline-block;
 +
  margin-right: -4px;
 +
  height: 40px;
 +
  margin-bottom: 0px;
 +
}
 +
nav li.dropdown > a {
 +
  height:35px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: center;
 +
  margin: 10px;
 +
}
 +
nav li.dropdown a > h4 {
 +
  color: white;
 +
  font-weight: normal;
 +
  font-size: 16px;
 +
  padding: 0;
 +
  margin: 0;
 +
  text-align: center;
 +
}
 +
nav li.dropdown {
 +
  color: white;
 +
}
 +
nav li.dropdown:nth-child(1) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(1) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 400px;
 +
  width: 1080px;
 +
}
 +
nav li.dropdown:nth-child(1) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
nav li.dropdown:nth-child(2) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(2) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 1080;
 +
  width: 1080px;
 +
  margin-left: -180px;
 +
}
 +
nav li.dropdown:nth-child(2) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
nav li.dropdown:nth-child(3) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(3) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 400px;
 +
  width: 1080px;
 +
  margin-left: -360px;
 +
}
 +
nav li.dropdown:nth-child(3) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
nav li.dropdown:nth-child(4) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(4) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 400px;
 +
  margin-left: -540px;
 +
  width: 1080px;
 +
}
 +
nav li.dropdown:nth-child(4) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
nav li.dropdown:nth-child(5) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(5) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 300px;
 +
  margin-left: -720px;
 +
  width: 1080px;
 +
}
 +
nav li.dropdown:nth-child(5) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
nav li.dropdown:nth-child(6) {
 +
  background-color: #2196f3;
 +
}
 +
nav li.dropdown:nth-child(6) > .dropdown-menu {
 +
  background-color: #2196f3;
 +
  background-size: 300px;
 +
  width: 1080px;
 +
  margin-left: -900px;
 +
}
 +
nav li.dropdown:nth-child(6) > .dropdown-menu .subcategories_container > div {
 +
  background-color: rgba(33, 150, 243, 0.6);
 +
}
 +
footer {
 +
  height: 20px;
 +
  background-color: #2c3e50;
 +
}
 +
footer .cornered {
 +
  float: left;
 +
  width: 300px;
 +
  height: 0px;
 +
  border-top: 20px solid #bdc3c7;
 +
  border-right: 45px solid transparent;
 +
}
 +
footer .footer_right {
 +
  color: white;
 +
  padding: 25px;
 +
  float: right;
 +
  height: 100%;
 +
}
 +
footer .footer_right span {
 +
  opacity: 0.5;
 +
}
 +
#bodycontainer {
 +
  min-width: 1080px;
 +
  margin: auto;
 +
  padding: 10px 0;
 +
  text-align:left;
 +
}
 +
#bodycontainer .overview_header {
 +
  text-align: center;
 +
}
 +
#bodycontainer h3,
 +
#bodycontainer h4,
 +
#bodycontainer h5 {
 +
  font-family: Lato;
 +
  text-transform: uppercase;
 +
  margin: 0px 0px 0px 0px;
 +
  padding-top: 30px;
 +
}
 +
#bodycontainer h1,
 +
#bodycontainer h2{
 +
  font-family: Lato;
 +
  text-transform: uppercase;
 +
  margin: 0px 0px 0px 0px;
 +
  padding-top: 80px; 
 +
}
 +
#bodycontainer .buttonrow {
 +
  margin-bottom: 20px;
 +
}
 +
#bodycontainer .igem_button {
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
#bodycontainer .igem_button img {
 +
  transition: 0.4s ease;
 +
  -webkit-filter: grayscale(0%);
 +
}
 +
#bodycontainer .igem_button .button_description {
 +
  transition: 0.5s ease;
 +
  background: rgba(44, 62, 80, 0.75);
 +
  position: absolute;
 +
  top: 100%;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
#bodycontainer .igem_button h2 {
 +
  margin: 0 auto;
 +
  margin-top: -27px;
 +
  color: #dddddd;
 +
  font-size: 16px;
 +
  text-align: center;
 +
  width: 100%;
 +
  padding: 5px 0px;
 +
  background: rgba(0, 0, 0, 0.41);
 +
  font-family: Lato;
 +
  text-transform: uppercase;
 +
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 +
}
 +
#bodycontainer .igem_button p {
 +
  color: #dddddd;
 +
  padding: 5px;
 +
}
 +
#bodycontainer .igem_button:hover > .button_description {
 +
  top: 27px;
 +
}
 +
#bodycontainer .igem_button:hover > img {
 +
  -webkit-filter: grayscale(100%);
 +
}
 +
#bodycontainer .red h2 {
 +
  background: #d10000;
 +
}
 +
#bodycontainer .purple h2 {
 +
  background: #8e44ad;
 +
}
 +
#bodycontainer .blue h2 {
 +
  background: #2c3e50;
 +
}
 +
#bodycontainer .belize h2 {
 +
  background: #2980b9;
 +
}
 +
#bodycontainer .green h2 {
 +
  background: #27ae60;
 +
}
 +
#bodycontainer .orange h2 {
 +
  background: #f39c12;
 +
}
 +
#category_navbar {
 +
  color: black;
 +
  padding-left: 0;
 +
  padding: 5px;
 +
}
 +
#category_navbar .active {
 +
  background: rgba(255, 156, 0, 0.17);
 +
  border: 1px solid rgba(0, 0, 0, 0.17);
 +
}
 +
#category_navbar .nav > li > a {
 +
  text-transform: uppercase;
 +
  font-size: 16px;
 +
  font-family: Lato;
 +
}
 +
#category_navbar .nav > ul > li,
 +
#category_navbar .nav > ul > ul > li {
 +
  list-style-type: none;
 +
  display: block;
 +
  color: inherit;
 +
  border: 0;
 +
  margin-left: 10px;
 +
  padding-top: 4px;
 +
  padding-bottom: 4px;
 +
}
 +
#category_navbar .nav > ul > li a,
 +
#category_navbar .nav > ul > ul > li a {
 +
  font-size: 14px;
 +
  font-family: Lato;       
 +
}
 +
#category_navbar .nav > ul > ul > li {
 +
  margin-left: 35px;
 +
}
 +
#category_navbar .nav > ul > li:hover,
 +
#category_navbar .nav > ul > ul > li:hover {
 +
  background: rgba(255, 255, 255, 0.5);
 +
}
 +
#member_spotlight h5 {
 +
  padding: 5px 7px;
 +
  color: white;
 +
}
 +
#member_spotlight .intro_large h5 {
 +
  font-size: 20px;
 +
  padding: 15px 15px;
 +
  margin-bottom: 10px;
 +
}
 +
#member_spotlight #spotlight_question_1 h5 {
 +
  background: #c0392b;
 +
  width:auto;
 +
}
 +
#member_spotlight #spotlight_question_2 h5 {
 +
  background: #8e44ad;
 +
  width:auto;
 +
}
 +
#member_spotlight #spotlight_question_3 h5 {
 +
  background: #2980b9;
 +
  width:auto;
 +
}
 +
#member_spotlight #spotlight_question_intro h5 {
 +
  background: #e67e22;
 +
  width:auto;
 +
}
 +
#lab_notes {
 +
  text-align: center;
 +
}
 +
#lab_notes img {
 +
  margin: 0 auto;
 +
  display: block;
 +
}
 +
#lab_notes :hover img {
 +
  -webkit-transform: scale(1.1);
 +
}
 +
.block_header {
 +
  display: inline-block;
 +
  color: white;
 +
  padding: 7px 11px;
 +
  padding-bottom: 5px;
 +
}
 +
.affix {
 +
  top: 60px;
 +
}
 +
.container {
 +
  min-width: 1080px;
 +
}
 +
.container div nav {
 +
  min-width: 1080px;
 +
}
 +
p,
 +
ol > li,
 +
td,
 +
th,
 +
caption,
 +
.ulstyled > li,
 +
.calendar > li {
 +
  font-family: Lato;
 +
  font-size: 15px;
 +
}
 +
p a,
 +
ol > li a,
 +
td a,
 +
th a,
 +
caption a,
 +
.ulstyled > li a,
 +
.calendar > li a {
 +
  text-decoration: underline;
 +
  color: #3b5998;
 +
}
 +
.calendar {
 +
  padding-left: 10px;
 +
}
 +
.calendar > li {
 +
  font-size: 13px;
 +
}
 +
figcaption {
 +
  color: white;
 +
  padding: 4px 5px;
 +
  display: inline-block;
 +
  font-size:14px;
 +
}
 +
figure {
 +
  margin-bottom: 10px;
 +
}
 +
.red {
 +
  background: #c0392b;
 +
}
 +
.purple {
 +
  background: #8e44ad;
 +
}
 +
.blue {
 +
  background: #2c3e50;
 +
}
 +
.belize {
 +
  background: #2980b9;
 +
}
 +
.green {
 +
  background: #27ae60;
 +
}
 +
.orange {
 +
  background: #f39c12;
 +
}
 +
.darkblue {
 +
  background: #34495e;
 +
}
 +
.table-bordered,
 +
.table-bordered > thead > tr > th,
 +
.table-bordered > tbody > tr > th,
 +
.table-bordered > tfoot > tr > th,
 +
.table-bordered > thead > tr > td,
 +
.table-bordered > tbody > tr > td,
 +
.table-bordered > tfoot > tr > td {
 +
  border: 1px solid black;
 +
}
 +
.col-lg-offset-1half {
 +
  margin-left: 11.111111111111%;
 +
}
 +
.clearfix:after {
 +
  content: " ";
 +
  display: block;
 +
  height: 0;
 +
  clear: both;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
<script>localStorage.clear();</script>
 +
 
  
 
</head>
 
</head>
−
<body>
+
 
−
<div class="container">
+
 
−
  <div class="row">
+
<body data-spy="scroll" data-target="#category_navbar">
−
    <div class="col-lg-12">
+
<div class="container" style='z-index:10;position:relative;'>
−
      <div class="jumbotron">
+
  <p>&nbsp;</p>
−
        <h1 class="text-center">Safety</h1>
+
  <div id='bodycontainer' class='row card'>
−
        <div class="row"></div>
+
    <div class="col-sm-10">
−
      </div>
+
  <div class="row">
 +
<div class="col-sm-12" id='background'>
 +
<h1>SAfety </h1>
 +
</div>
 +
</div>
 +
  <div class="row" id='environmental_safety'>
 +
  <div class="col-sm-10 col-sm-offset-1">
 +
<h3 class='block_header red' style = "padding-top: 50px"><strong>Research safety:</strong>                        </h3>
 +
<ul>
 +
                          <li>For our safety, everyone must wear lab coat, gloves and surgery masks in the lab</li>
 +
                          <li>Before carrying our project, our instructors have trained us well with lab safety and every step of the experiment to make sure that we can conduct the experiments properly and safely. </li>
 +
                          <li>Everyone must sterilize their hands before and after experiment.</li>
 +
                          <li>Because we are all teenagers, we conducted our experiment under supervision of one of our instructors. </li>
 +
                          <li>Food and drink were not allowed to bring into the lab. </li>
 +
                          <li>Emergency equipment was prepared and our instructor taught us how to use them. </li>
 +
                    </ul>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="row" id='biobrick_safety'>
 +
<div class="col-sm-12">
 +
<h3 class='block_header green' style = "padding-top: 50px"><strong>Equipment safety</strong></h3>
 +
</div>
 +
</div>
 +
 
 +
<div class="row" id=''>
 +
<div class="col-sm-11">
 +
  <ul>
 +
                        <li>We should be careful with every equipment when we conduct our experiments</li>
 +
                          <li>For every equipment we used, our instructor guided us practice using them and made sure every one of us can use them properly.</li>
 +
                          <li>Liquids should be away from equipment</li>
 +
                          <li>The equipment was unplugged and kept well after every experiment</li>
 +
                      </ul>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="row" id='local_safety'>
 +
<div class="col-sm-12">
 +
<h3 class='block_header orange' style = "padding-top: 50px"><strong>Environment safety</strong></h3>
 +
</div>
 +
</div>
 +
 
 +
<div class="row" id=''>
 +
<div class="col-sm-11">
 +
  <ul>
 +
                        <li>All lab waste must be collected and treated properly, so that they will not pollute the environment</li>
 +
                          <li>All the materials containing <em>E.coli </em>must be sterilized before disposal</li>
 +
                    <li><em>Salvia miltiorrhiza</em> and <em>E.coli</em> we used are harmless to human beings or nature. </li></ul></div>
 +
</div>
 
     </div>
 
     </div>
−
  </div>
+
 
 +
  </div>
 
</div>
 
</div>
−
<div class="container">
+
<br>
−
  <div class="row"></div>
+
<br><br>
−
</div>
+
 
−
<div class="container">
+
<script language="javascript">
−
  <div class="row"></div>
+
var c = document.getElementById("canvas-container");
−
</div>
+
var ctx = c.getContext("2d");
−
<hr>
+
var stripeFill = [];
−
<p><strong>Research safety:</strong></p>
+
var stripeVelocity = [];
−
<ul>
+
var unitSize;
−
  <li>For our safety, everyone must wear lab coat, gloves and surgery masks in the lab</li>
+
var colorText = "200, 200, 200,";
−
  <li>Before carrying our project, our instructors have trained us well with lab safety and every step of the experiment to make sure that we can conduct the experiments properly and safely. </li>
+
var stripeCount = 100;
−
  <li>Everyone must sterilize their hands before and after experiment.</li>
+
ctx.canvas.width  = window.innerWidth;
−
  <li>Because we are all teenagers, we conducted our experiment under supervision of one of our instructors. </li>
+
ctx.canvas.height = window.innerHeight;
−
  <li>Food and drink were not allowed to bring into the lab. </li>
+
var upperLimit = 100;
−
   <li>Emergency equipment was prepared and our instructor taught us how to use them. </li>
+
var lowerLimit = 0;
−
</ul>
+
 
−
<p><strong>Equipment safety</strong></p>
+
unitSize = window.innerWidth/stripeCount;
−
<ul>
+
 
−
   <li>We should be careful with every equipment when we conduct our experiments</li>
+
for (var i = 0; i < stripeCount; i++){
−
  <li>For every equipment we used, our instructor guided us practice using them and made sure every one of us can use them properly.</li>
+
  stripeFill[i] = Math.round(Math.random()*upperLimit);
−
  <li>Liquids should be away from equipment</li>
+
   stripeVelocity[i] = random(-.6,.6);
−
  <li>The equipment was unplugged and kept well after every experiment</li>
+
}
−
</ul>
+
 
−
<p><strong>Environment safety</strong></p>
+
function wiggle(){
−
<ul>
+
   for (var i = 0; i < stripeCount; i++){
−
   <li>All lab waste must be collected and treated properly, so that they will not pollute the environment</li>
+
    stripeVelocity[i] += random(-.1, .1);
−
  <li>All the materials containing <em>E.coli </em>must be sterilized before disposal</li>
+
    if(Math.abs(stripeVelocity[i]) > 3){
−
  <li><em>Salvia miltiorrhiza</em> and <em>E.coli</em> we used are harmless to human beings or nature. </li>
+
      stripeVelocity[i] = 3*Math.abs(stripeVelocity[i])/stripeVelocity[i];
−
</ul>
+
    }
−
<p>&nbsp;</p>
+
    stripeFill[i] += stripeVelocity[i];
−
<p>&nbsp;</p>
+
    if (stripeFill[i]<lowerLimit){
−
<p>&nbsp;</p>
+
      stripeFill[i] = lowerLimit;
−
<hr>
+
      stripeVelocity[i] = 3;
−
<footer class="text-center">
+
    }
−
   <div class="container">
+
    else if (stripeFill[i]>upperLimit){
−
     <div class="row">
+
      stripeFill[i] = upperLimit;
−
      <div class="col-xs-12">
+
      stripeVelocity[i] = -3;
−
        <p>Copyright © MyWebsite. All rights reserved.</p>
+
    }
−
      </div>
+
   }
−
    </div>
+
}
−
   </div>
+
 
−
</footer>
+
setInterval(execute,50);
 +
 
 +
function execute(){
 +
    wiggle();
 +
    ctx.fillStyle = "rgba(255, 255, 255, 1)";
 +
    ctx.fillRect(0,0,window.innerWidth,window.innerHeight);
 +
 
 +
    for (var i = 0; i < stripeCount; i++){
 +
      ctx.fillStyle = "rgba(180,180,180," + stripeFill[i]/255 + ")" ;
 +
      ctx.fillRect(i*unitSize,0,unitSize,window.innerHeight)
 +
    }
 +
}
 +
 
 +
function bob(item){
 +
  return function(){item.css({display:"none"});}
 +
}
 +
 
 +
function random (x, y){
 +
  var answer = Math.random()*(y-x)+x;
 +
  return answer;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
$(".dropdown").mouseenter(function(){
 +
   //console.log("bobby");
 +
     $(this).find(".dropdown-menu").css({height:"0px"});
 +
    $(this).find(".dropdown-menu").css({display:"block"});
 +
    $(this).find(".dropdown-menu").animate({height:"180px"},150,"swing",function(){});
 +
});
 +
 
 +
$(".dropdown").mouseleave(function(){
 +
  $(this).find(".dropdown-menu").animate({height:"0px"},150,"swing", bob($(this).find(".dropdown-menu")));//};
 +
});
 +
 
 +
function bob(item){
 +
   return function(){item.css({display:"none"});};
 +
}
 +
</script>
  
−
</body>
+
</body>
 
</html>
 
</html>

Revision as of 18:12, 14 October 2016

Template

Top

 

Safety - TAS Taipei iGEM Wiki

 

SAfety

Research safety:

  • For our safety, everyone must wear lab coat, gloves and surgery masks in the lab
  • Before carrying our project, our instructors have trained us well with lab safety and every step of the experiment to make sure that we can conduct the experiments properly and safely.
  • Everyone must sterilize their hands before and after experiment.
  • Because we are all teenagers, we conducted our experiment under supervision of one of our instructors.
  • Food and drink were not allowed to bring into the lab.
  • Emergency equipment was prepared and our instructor taught us how to use them.

Equipment safety

  • We should be careful with every equipment when we conduct our experiments
  • For every equipment we used, our instructor guided us practice using them and made sure every one of us can use them properly.
  • Liquids should be away from equipment
  • The equipment was unplugged and kept well after every experiment

Environment safety

  • All lab waste must be collected and treated properly, so that they will not pollute the environment
  • All the materials containing E.coli must be sterilized before disposal
  • Salvia miltiorrhiza and E.coli we used are harmless to human beings or nature.