Difference between revisions of "Team:SDSZ-China"

Line 1: Line 1:
<html>
+
{{SDSZ-China}}
<style type="text/css">
+
.container{
+
  padding:0px !important;
+
}
+
 
+
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
+
@import url("/wiki/skins/igem/top_menu_14.css");
+
 
+
#content {
+
  margin: 0;
+
  margin-top:-10px;
+
  padding: 0;
+
  width: auto;
+
  border: 0;
+
  outline: 0;
+
  font-size: 100%;
+
  vertical-align: baseline;
+
  background: transparent;
+
  position: static;
+
}
+
p{
+
 
+
}
+
 
+
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: 1250px;
+
}
+
.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: 0px;
+
}
+
.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: 1250px;
+
}
+
.container div nav {
+
  min-width: 1250px;
+
}
+
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: 250px;
+
  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: 205px;
+
  display: inline-block;
+
  margin-right: 0px;
+
  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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(1) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 400px;
+
  width: 1250px;
+
}
+
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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(2) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 400px;
+
  width: 1250px;
+
  margin-left: -209px;
+
}
+
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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(3) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 400px;
+
  width: 1250px;
+
  margin-left: -418px;
+
}
+
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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(4) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 400px;
+
  margin-left: -627px;
+
  width: 1250px;
+
}
+
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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(5) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 300px;
+
  margin-left: -836px;
+
  width: 1250px;
+
}
+
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: #1C77C3;
+
}
+
nav li.dropdown:nth-child(6) > .dropdown-menu {
+
  background-color: #1C77C3;
+
  background-size: 300px;
+
  width: 1250px;
+
  margin-left: -1045px;
+
}
+
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: 1200px;
+
  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: 80px;
+
}
+
.container {
+
  min-width: 1200px;
+
}
+
.container div nav {
+
  min-width: 1200px;
+
}
+
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;
+
}
+
 
+
 
+
 
+
 
+
button.accordion {
+
    background-color: 9CFFFA;
+
    color: #444;
+
    cursor: pointer;
+
    padding: 18px;
+
    width: 100%;
+
    border: none;
+
    text-align: left;
+
    outline: none;
+
    font-size: 15px;
+
    transition: 0.4s;
+
}
+
 
+
button.accordion.active, button.accordion:hover {
+
    background-color: #AAFAC8;
+
}
+
 
+
button.accordion:after {
+
    content: '\02795';
+
    font-size: 13px;
+
    color: #777;
+
    float: right;
+
    margin-left: 5px;
+
}
+
 
+
button.accordion.active:after {
+
    content: "\2796";
+
}
+
 
+
div.panel {
+
    padding: 0 18px;
+
    background-color: #FFE8C8;
+
    max-height: 0;
+
    overflow: hidden;
+
    transition: 0.6s ease-in-out;
+
    opacity: 0;
+
}
+
 
+
div.panel.show {
+
    opacity: 1;
+
    min-height: 300px;
+
    max-height: 2000px;
+
}
+
 
+
div.container{
+
    width:100%
+
}
+
 
+
</style>
+
</html>
+
 
+
<!-- CUT -->
+
 
+
 
<html>
 
<html>
  
 
<head>
 
<head>
 +
    <title></title>
 +
   
 
     <style type='text/css'>
 
     <style type='text/css'>
 
         #top_title, #sideMenu {
 
         #top_title, #sideMenu {
Line 1,061: Line 55:
  
  
<script>localStorage.clear();</script>
+
    <script>localStorage.clear();</script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
+
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
+
            crossorigin="anonymous"></script>
  
<script type="text/javascript" async
+
    <script type="text/javascript" async
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+
            src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
+
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
  
</script>
+
    </script>
  
<script type="text/javascript">
+
    <script type="text/javascript">
    $("#category_navbar a").on('click', function (event) {
+
        $("#category_navbar a").on('click', function (event) {
        // Make sure this.hash has a value before overriding default behavior
+
            // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
+
            if (this.hash !== "") {
            // Prevent default anchor click behavior
+
                // Prevent default anchor click behavior
            event.preventDefault();
+
                event.preventDefault();
  
            // Store hash0
+
                // Store hash0
            var hash = this.hash;
+
                var hash = this.hash;
  
            // Using jQuery's animate() method to add smooth page scroll
+
                // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
+
                $('html, body').animate({
                scrollTop: $(hash).offset().top
+
                    scrollTop: $(hash).offset().top
            }, 800, function () {
+
                }, 800, function () {
  
                // Add hash (#) to URL when done scrolling (default click behavior)
+
                    // Add hash (#) to URL when done scrolling (default click behavior)
                window.location.hash = hash;
+
                    window.location.hash = hash;
            });
+
                });
        }  // End if
+
            }  // End if
    });
+
        });
  
</script>
+
    </script>
  
 
</head>
 
</head>
<body>
+
</head>
<div class="backgroundpic">
+
 
    <img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" width="100%" height="100%" id="bg" alt="">
+
<body data-spy="scroll" data-target="#category_navbar">
</div>
+
 
 +
<div class="container" style='z-index:10;position:relative;'>
 +
    <div class="row card" id='bodycontainer' class='row'>
 +
        <div class="col-sm-2" style='padding-left:5% padding-right:10%'>
 +
            <div id="category_navbar">
 +
                <ul class="nav nav-list" data-spy="affix" data-offset-top="160"
 +
                    style='-webkit-transform: translateZ(0);width:160px;margin-left:0'>
 +
 
 +
                    <li><a href="#Background">Background</a></li>
 +
                    <li><a href="#Purpose">Purpose</a></li>
 +
                    <li><a href="#Overview">Overview of the project</a></li>
 +
                    <li><a href="#Goal">Our goal</a></li>
 +
 
 +
                </ul>
 +
            </div>
 +
 
 +
        </div>
 +
 
 +
        <div class="col-sm-10" style="padding-right:5%">
 +
            <div class="row">
 +
                <div class="col-sm-12">
 +
                    <h2 id='Background'>Background</h2>
 +
                    <p>Bear bile, one of the most famous animal drugs in Traditional Chinese Medicine (TCM), has been
 +
                        recorded in ancient Chinese medicine book as a significant method to treat hepatic and biliary
 +
                        disorders. UDCA, the effective ingredient of bear bile.Aside from the traditional use of bear
 +
                        bile in Chinese medicine, UDCA(ursodeoxycholic acid), the effective ingredient of bear bile
 +
                        acid, has a much larger pharmaceutical application. As well as the usage of UDCA in dissolving
 +
                        gallstone, its efficacy in primary biliary cirrhosis and primary sclerosing cholangitis (PSC) as
 +
                        an adjunct to medical therapy has been well established. Newer indications include its use in
 +
                        the management of chronic hepatitis, cirrhosis, post liver transplant rejection,
 +
                        graft-versus-host disease and acute viral hepatitis, where it not only relieves symptoms of
 +
                        cholestasis but also arrests ongoing hepatocyte necrosis. However, the increasing demand for
 +
                        bear bile has caused bears to be in an endangered state: bear poaching and illegal animal trade
 +
                        have greatly dwindled the number of the wild Asiatic black bear. Apart from that, bear bile
 +
                        farming industry in Asia extracts bile through “milking” from the bears, which is operated
 +
                        through surgically implanting a permanent catheter in the animal's gallbladder to obtain the
 +
                        drips. It is unquestionable that the bear bile farming process will lead to both physical and
 +
                        psychological damage in bears. </p>
 +
                </div>
 +
            </div>
 +
 
 +
            <div class="row">
 +
                <div class="col-sm-12">
 +
                    <h2 id='Purpose'>Purpose</h2>
 +
                    <p>To find substitute or alternative for bear bile farming, our team will be working on the
 +
                        biological synthesis of the main effective component of this important medicine,
 +
                        UDCA(Ursodeoxycholic Acid). This biological approach will not only be more efficient but also be
 +
                        cheaper than the original chemical approach, which is widely used in the current UDCA synthesis
 +
                        industry. </p>
 +
                </div>
 +
            </div>
 +
 
 +
            <div class="row">
 +
                <div class="col-sm-12">
 +
                    <h2 id='Overview'>Overview of the project</h2>
 +
                    <p>We found that it is possible to convert the main component of poultry bile, CDCA(Chenodeoxycholic
 +
                        Acid), into UDCA, by employing two enzyme-catalyzed the reactions. First, two enzymes was
 +
                        employed to manage the transformation of CDCA to 7oxo-LCA. In the present of
 +
                        7a-HSD(7alpha-hydroxysteroid dehydrogenase), CDCA is transformed in to 7oxo-LCA by loosing a
 +
                        pair of hydrogen(2H+ and 2e-), the pair of hydrogen is added to NAD+, the cofactor and the
 +
                        acceptor. The NAD+ is transformed into NADH during the reaction. To regenerate the NAD+ and
 +
                        recycle the reaction, to , the LDH(Lactate dehydrogenase) works on pyruvate and take the pair of
 +
                        hydrogen from NADH and transform the pyruvate to lactate and NADH to NAD+.</p>
 +
                    <p>In the second step, the 7oxo-LCA is transformed to UDCA by 7β-HSDH(7beta-hydroxysteroid
 +
                        dehydrogenase)and GDH(glutamate dehydrogenase).The 7β-HSDH works on 7oxo-LCA and take a pair of
 +
                        hydrogen from NADPH(the cofactor for the second step)and add it to 7oxo-LCA and form a beta
 +
                        position 7-hydroxyl group, which is our target product UDCA. The GDH works on glucose and take a
 +
                        pair of hydrogen from it and add it to the NADP+, to form NADPH to manage the regeneration of
 +
                        cofactor NADPH for the second step.</p>
 +
                </div>
 +
            </div>
 +
 
 +
            <div class="row">
 +
                <div class="col-sm-12">
 +
                    <h2 id='Goal'>Our goal</h2>
 +
                    <p>Our mission is to expression of the four enzymes 7α-HSDH (from ecoli DH5a), 7β-HSDH (from
 +
                        Ruminococcus Torques), GDH (from Bacillus subtilis), and LDH from (Lactobacillus delbruechii
 +
                        subsp. Bulgaricus)and test their activities. By adding the CBD( cellulose binding
 +
                        domain)sequnence to the plasmid we construct, we manage to bind our enzyme on gauze. This
 +
                        specific design excels in 3 specific ways: first, by controlling the presence of the gauze in
 +
                        the solution, we can control the process of the reaction. Second, when the target enzyme is
 +
                        bound to cellulose we manage to purify the protein we express. Third, the enzyme binding gauze
 +
                        is employed to a machine including the reaction efficiency measuring system and the enzyme
 +
                        addition controlling system .</p>
 +
                </div>
 +
            </div>
 +
            <br>
 +
            <br>
 +
            <br>
 +
        </div>
 +
    </div>
 +
 
 +
    <div class="backgroundpic">
 +
        <img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" width="100%" height="100%" id="bg" alt="">
 +
    </div>
 +
</div>
 +
 
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 10:47, 1 November 2017


Background

Bear bile, one of the most famous animal drugs in Traditional Chinese Medicine (TCM), has been recorded in ancient Chinese medicine book as a significant method to treat hepatic and biliary disorders. UDCA, the effective ingredient of bear bile.Aside from the traditional use of bear bile in Chinese medicine, UDCA(ursodeoxycholic acid), the effective ingredient of bear bile acid, has a much larger pharmaceutical application. As well as the usage of UDCA in dissolving gallstone, its efficacy in primary biliary cirrhosis and primary sclerosing cholangitis (PSC) as an adjunct to medical therapy has been well established. Newer indications include its use in the management of chronic hepatitis, cirrhosis, post liver transplant rejection, graft-versus-host disease and acute viral hepatitis, where it not only relieves symptoms of cholestasis but also arrests ongoing hepatocyte necrosis. However, the increasing demand for bear bile has caused bears to be in an endangered state: bear poaching and illegal animal trade have greatly dwindled the number of the wild Asiatic black bear. Apart from that, bear bile farming industry in Asia extracts bile through “milking” from the bears, which is operated through surgically implanting a permanent catheter in the animal's gallbladder to obtain the drips. It is unquestionable that the bear bile farming process will lead to both physical and psychological damage in bears.

Purpose

To find substitute or alternative for bear bile farming, our team will be working on the biological synthesis of the main effective component of this important medicine, UDCA(Ursodeoxycholic Acid). This biological approach will not only be more efficient but also be cheaper than the original chemical approach, which is widely used in the current UDCA synthesis industry.

Overview of the project

We found that it is possible to convert the main component of poultry bile, CDCA(Chenodeoxycholic Acid), into UDCA, by employing two enzyme-catalyzed the reactions. First, two enzymes was employed to manage the transformation of CDCA to 7oxo-LCA. In the present of 7a-HSD(7alpha-hydroxysteroid dehydrogenase), CDCA is transformed in to 7oxo-LCA by loosing a pair of hydrogen(2H+ and 2e-), the pair of hydrogen is added to NAD+, the cofactor and the acceptor. The NAD+ is transformed into NADH during the reaction. To regenerate the NAD+ and recycle the reaction, to , the LDH(Lactate dehydrogenase) works on pyruvate and take the pair of hydrogen from NADH and transform the pyruvate to lactate and NADH to NAD+.

In the second step, the 7oxo-LCA is transformed to UDCA by 7β-HSDH(7beta-hydroxysteroid dehydrogenase)and GDH(glutamate dehydrogenase).The 7β-HSDH works on 7oxo-LCA and take a pair of hydrogen from NADPH(the cofactor for the second step)and add it to 7oxo-LCA and form a beta position 7-hydroxyl group, which is our target product UDCA. The GDH works on glucose and take a pair of hydrogen from it and add it to the NADP+, to form NADPH to manage the regeneration of cofactor NADPH for the second step.

Our goal

Our mission is to expression of the four enzymes 7α-HSDH (from ecoli DH5a), 7β-HSDH (from Ruminococcus Torques), GDH (from Bacillus subtilis), and LDH from (Lactobacillus delbruechii subsp. Bulgaricus)and test their activities. By adding the CBD( cellulose binding domain)sequnence to the plasmid we construct, we manage to bind our enzyme on gauze. This specific design excels in 3 specific ways: first, by controlling the presence of the gauze in the solution, we can control the process of the reaction. Second, when the target enzyme is bound to cellulose we manage to purify the protein we express. Third, the enzyme binding gauze is employed to a machine including the reaction efficiency measuring system and the enzyme addition controlling system .