Difference between revisions of "Team:SDSZ-China"

Line 1: Line 1:
{{SDSZ-China}}
+
<html>
 +
<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>Background - TAS Taipei iGEM Wiki</title>
 
 
     <style type='text/css'>
 
     <style type='text/css'>
 
         #top_title, #sideMenu {
 
         #top_title, #sideMenu {
Line 48: Line 1,055:
 
         }
 
         }
 
     </style>
 
     </style>
</head>
+
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 +
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 +
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
 +
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<body data-spy="scroll" data-target="#category_navbar">
 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
  
 +
<script>localStorage.clear();</script>
 +
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 +
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
 +
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 +
        crossorigin="anonymous"></script>
  
<div class="container" style='z-index:10;position:relative;'>
+
<script type="text/javascript" async
    <!--   
+
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
        <div class="row center-block" style="text-align: left;">
+
<script type="text/x-mathjax-config">
            <nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
+
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
                <ul style='margin-left:0px'>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Background"><h4 class="dropdown-toggle disabled"
+
                                                                                      data-toggle="dropdown"><b>PROJECT</b>
+
                        </h4></a>
+
                        <div class="dropdown-menu">
+
                            <div class='subcategories_container'>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a>
+
                                    </h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
+
                                </div>
+
                            </div>
+
                            <div style='height:140px;'>
+
                                <img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
+
                                <h4><b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively
+
                                    <b>treat</b> and <b>prevent</b> cataract formation.</b></h4>
+
                            </div>
+
   
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4
+
                                class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
+
                        <div class="dropdown-menu">
+
                            <div class='subcategories_container'>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens
+
                                        Cataract Model</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention
+
                                        and Treatment Constructs </a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery
+
                                        Prototype</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
+
                                </div>
+
                            </div>
+
                            <div style='height:140px;'>
+
                                <img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
+
                                <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our
+
                                    discovery of exciting science!</h4>
+
                            </div>
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Model"><h4 class='dropdown-toggle disabled'
+
                                                                                data-toggle="dropdown"><b>MODEL</b></h4>
+
                        </a>
+
                        <div class="dropdown-menu">
+
                            <div class='subcategories_container'>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype
+
                                        Delivery</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a>
+
                                    </h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
+
                                </div>
+
   
+
                            </div>
+
                            <div style='height:140px;'>
+
                                <img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
+
                                <h4><b>Computational Biology</b> provides us models that we cannot easily test
+
                                    experimentally. Click to find out the results of our modeling, and the math behind it!
+
                                </h4>
+
                            </div>
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices"><h4 class='dropdown-toggle disabled'
+
                                                                                          data-toggle="dropdown"><b>HUMAN
+
                            PRACTICE</b></h4></a>
+
                        <div class="dropdown-menu">
+
                            <div class='subcategories_container'>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a>
+
                                    </h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a>
+
                                    </h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a>
+
                                    </h5>
+
                                </div>
+
                            </div>
+
                            <div style='height:140px;'>
+
                                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
+
                                <h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled
+
                                    <b>social aspects</b> of this project.</h4>
+
                            </div>
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Safety"><h4 class='dropdown-toggle disabled'
+
                                                                                  data-toggle="dropdown"><b>SAFETY</b></h4>
+
                        </a>
+
                        <div class="dropdown-menu">
+
                            <div style='height:100px;'>
+
                                <div class='subcategories_container'>
+
                                    <div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
+
                                    </div>
+
                                    <div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a>
+
                                        </h5>
+
                                    </div>
+
                                    <div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk
+
                                            Reduction Methods</a></h5>
+
                                    </div>
+
                                    <div>
+
                                        <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further
+
                                            Questions</a></h5>
+
                                    </div>
+
                                </div>
+
                                <img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
+
                                <h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the
+
                                    integrity and security of our work environment.</h4>
+
                            </div>
+
                        </div>
+
                    </li>
+
                    <li class="dropdown">
+
                        <a href="https://2016.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled'
+
                                                                                data-toggle="dropdown"><b>TEAM</b></h4></a>
+
                        <div class="dropdown-menu">
+
                            <div class='subcategories_container'>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
+
                                </div>
+
                                <div>
+
                                    <h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard
+
                                        Pages</a></h5>
+
                                </div>
+
                            </div>
+
                            <div style='height:140px;'>
+
                                <img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
+
                                <h4>Every iGEM project is the accumulation of an entire year's hard work by a group of
+
                                    cheerful students. <b>Meet the team!</b></h4>
+
                            </div>
+
                        </div>
+
                    </li>
+
                </ul>
+
            </nav>
+
        </div>
+
        <br>
+
        <br>
+
        <br>
+
    -->
+
    <!--
+
        <div class="row center-block" style="padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
+
            <div class="row" style="text-align:center;">
+
                <div class="col-sm-2">
+
                    <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png
+
    " alt="" style="width: 100px;"></a>
+
                </div>
+
                <div class="col-sm-8" style='text-align:center;'>
+
                    <a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
+
                        <h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;">
+
                            <b>
+
                                C&#9678;UNTERACTS</b></h2>
+
                    </a>
+
                </div>
+
                <div class="col-sm-2">
+
                    <a href="https://igem.org/HS"><img
+
                            src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt=""
+
                            style="width: 100px;"></a>
+
                </div>
+
            </div>
+
        </div>
+
        <br>
+
    -->
+
  
    <div class="row card" id='bodycontainer' class='row'>
+
</script>
        <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>
+
<script type="text/javascript">
                    <li><a href="#Purpose">Purpose</a></li>
+
    $("#category_navbar a").on('click', function (event) {
                    <li><a href="#Overview">Overview of the project</a></li>
+
        // Make sure this.hash has a value before overriding default behavior
                    <li><a href="#Goal">Our goal</a></li>
+
        if (this.hash !== "") {
 +
            // Prevent default anchor click behavior
 +
            event.preventDefault();
  
                </ul>
+
            // Store hash0
            </div>
+
            var hash = this.hash;
  
        </div>
+
            // 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
 +
            $('html, body').animate({
 +
                scrollTop: $(hash).offset().top
 +
            }, 800, function () {
  
        <div class="col-sm-10" style="padding-right:5%">
+
                // Add hash (#) to URL when done scrolling (default click behavior)
            <div class="row">
+
                window.location.hash = hash;
                <div class="col-sm-12">
+
            });
                    <h2 id='Background'>Background</h2>
+
        }  // End if
                    <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">
+
</script>
                <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>
+
 
+
<script>localStorage.clear();</script>
+
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
+
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+
        crossorigin="anonymous"></script>
+
 
+
<script type="text/javascript" async
+
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+
<script type="text/x-mathjax-config">
+
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
 
+
</script>
+
 
+
<script type="text/javascript">
+
    $("#category_navbar a").on('click', function (event) {
+
        // Make sure this.hash has a value before overriding default behavior
+
        if (this.hash !== "") {
+
            // Prevent default anchor click behavior
+
            event.preventDefault();
+
 
+
            // Store hash0
+
            var hash = this.hash;
+
 
+
            // 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
+
            $('html, body').animate({
+
                scrollTop: $(hash).offset().top
+
            }, 800, function () {
+
 
+
                // Add hash (#) to URL when done scrolling (default click behavior)
+
                window.location.hash = hash;
+
            });
+
        }  // End if
+
    });
+
 
+
</script>
+
  
 +
</head>
 +
<body>
 +
<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>
 
</body>
 
</body>
 
 
</html>
 
</html>

Revision as of 10:45, 1 November 2017