Line 1: | Line 1: | ||
{{CIEI-BJ}} | {{CIEI-BJ}} | ||
− | <html> | + | <html><head> |
+ | <title>Safety</title> | ||
+ | <style> | ||
+ | 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; | ||
+ | } | ||
+ | .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); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | /******************* 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> | ||
− | |||
− | |||
− | |||
+ | <body data-spy="scroll" data-target="#category_navbar"> | ||
+ | <div class="container" style='z-index:10;position:relative;'> | ||
+ | <div id='bodycontainer' class='row card'> | ||
+ | <div class="col-sm-10"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-12" id='background'> | ||
+ | <h1 style="left:"50%";right:"50%";"><span class="toptitle">Our Idea</span></h1> | ||
+ | <p style="left:"50%";right:"50%";"> </p> | ||
+ | </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>What's our idea?</strong></h3> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <p><strong>Our idea</strong><br> | ||
+ | <img width="415" height="331" src="https://static.igem.org/mediawiki/igem.org/0/08/T--CIEI-BJ--Route.png" alt="屏幕快照%202016-10-14%2012.41.10.png"></p> | ||
+ | <p>SmCPS1 is the first and one of the most important enzymes in Tanshinone synthesis. It converts geranyl geranyl pyrophosphate(GGPP) into copalyl diphosphate (CPP). </p> | ||
+ | <p><img width="415" height="93" src="https://static.igem.org/mediawiki/2016/f/f4/T--CIEI-BJ--Gene5.png"></p> | ||
+ | <p>To produce the enzyme SmCPS1 through synthetic biology, we constructed the gene circuit above. tac promotor, a strong hybrid promotor, is used to control and increase the <a href="https://www.isnare.com/encyclopedia/Gene_expression">expression</a> levels of a target gene and is used in the <a href="https://www.isnare.com/encyclopedia/Over-expression">over-expression</a> of <a href="https://www.isnare.com/encyclopedia/Recombinant_proteins">recombinant proteins</a>, produced from the combination of promotors from the trp and lac operons.<br> | ||
+ | Thrombin protease and TEV are the two type of restriction enzyme cleavage sites which can let SmCPS1 gene insert in between and later help the SmCPS1 enzyme to be purified. GFP was used to test the expression of our target gene SmCPS1. The target gene (SmCPS1) was obtained from Institute of Botany, Chinese academy of Science. </p> | ||
+ | <p><img width="444" height="341" src="https://static.igem.org/mediawiki/2016/3/38/T--CIEI-BJ--Gene3.png" align="left" hspace="9" alt="www.biofeng.com.img.800cdn.com.gif"></p> | ||
+ | <p>In our research, we used pGEX-KG as the vector of our Biobrick device. It basically composes of Ampicillin anti-fragment, lac promoter with different primers, and tac promoter followed by multiple cloning site, which offers a favorable system to further insert our target DNA (SmCPS1) via pre-existed thrombin protease and newly added TEV.</p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <p>To avoid our target gene be digested by the restriction enzyme after we combine it with the plasmid iGEM provide, we did site-directed mutagenesis</p> | ||
+ | <p><img border="0" width="415" height="232" src="https://static.igem.org/mediawiki/2016/e/e4/T--CIEI-BJ--Gene1.png"></p> | ||
+ | <p><strong> </strong></p> | ||
+ | <p><strong>Our method</strong></p> | ||
+ | <p><img border="0" width="415" height="230" src="https://static.igem.org/mediawiki/2016/3/32/T--CIEI-BJ--Gene4.png"></p> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row" id='environmental_safety3'> | ||
+ | <div class="col-sm-10 col-sm-offset-1"></div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
</div> | </div> | ||
+ | <br> | ||
+ | <br><br> | ||
+ | <script language="javascript"> | ||
+ | var c = document.getElementById("canvas-container"); | ||
+ | var ctx = c.getContext("2d"); | ||
+ | var stripeFill = []; | ||
+ | var stripeVelocity = []; | ||
+ | var unitSize; | ||
+ | var colorText = "200, 200, 200,"; | ||
+ | var stripeCount = 100; | ||
+ | ctx.canvas.width = window.innerWidth; | ||
+ | ctx.canvas.height = window.innerHeight; | ||
+ | var upperLimit = 100; | ||
+ | var lowerLimit = 0; | ||
+ | unitSize = window.innerWidth/stripeCount; | ||
− | </ | + | for (var i = 0; i < stripeCount; i++){ |
+ | stripeFill[i] = Math.round(Math.random()*upperLimit); | ||
+ | stripeVelocity[i] = random(-.6,.6); | ||
+ | } | ||
+ | |||
+ | function wiggle(){ | ||
+ | for (var i = 0; i < stripeCount; i++){ | ||
+ | stripeVelocity[i] += random(-.1, .1); | ||
+ | if(Math.abs(stripeVelocity[i]) > 3){ | ||
+ | stripeVelocity[i] = 3*Math.abs(stripeVelocity[i])/stripeVelocity[i]; | ||
+ | } | ||
+ | stripeFill[i] += stripeVelocity[i]; | ||
+ | if (stripeFill[i]<lowerLimit){ | ||
+ | stripeFill[i] = lowerLimit; | ||
+ | stripeVelocity[i] = 3; | ||
+ | } | ||
+ | else if (stripeFill[i]>upperLimit){ | ||
+ | stripeFill[i] = upperLimit; | ||
+ | stripeVelocity[i] = -3; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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> | ||
</html> | </html> |
Revision as of 03:46, 15 October 2016
Our Idea
What's our idea?
-
Our idea
SmCPS1 is the first and one of the most important enzymes in Tanshinone synthesis. It converts geranyl geranyl pyrophosphate(GGPP) into copalyl diphosphate (CPP).
To produce the enzyme SmCPS1 through synthetic biology, we constructed the gene circuit above. tac promotor, a strong hybrid promotor, is used to control and increase the expression levels of a target gene and is used in the over-expression of recombinant proteins, produced from the combination of promotors from the trp and lac operons.
Thrombin protease and TEV are the two type of restriction enzyme cleavage sites which can let SmCPS1 gene insert in between and later help the SmCPS1 enzyme to be purified. GFP was used to test the expression of our target gene SmCPS1. The target gene (SmCPS1) was obtained from Institute of Botany, Chinese academy of Science.In our research, we used pGEX-KG as the vector of our Biobrick device. It basically composes of Ampicillin anti-fragment, lac promoter with different primers, and tac promoter followed by multiple cloning site, which offers a favorable system to further insert our target DNA (SmCPS1) via pre-existed thrombin protease and newly added TEV.
To avoid our target gene be digested by the restriction enzyme after we combine it with the plasmid iGEM provide, we did site-directed mutagenesis
Our method