Line 1: | Line 1: | ||
{{CIEI-BJ}} | {{CIEI-BJ}} | ||
− | |||
− | |||
− | |||
− | < | + | <html><head> |
+ | <title>Part</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; | ||
+ | } | ||
− | |||
+ | .red1 { background: #c0392b; | ||
+ | } | ||
+ | </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="col-xs-12 text-center"> | ||
+ | <h1>pARTS</h1> | ||
+ | </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>HERE ARE ALL OF OUR PARTS</strong></h3> | ||
+ | <ul> | ||
+ | <li>SmCPS1 is a key enzyme on the biosynthesis pathway of tanshinone. Tanshinone is a compound used to treat cardiovascular diseases. The artificial synthesis of SmCPS1 may contribute to the artificial synthesis of tanshinone. | ||
+ | <li><img src="https://static.igem.org/mediawiki/2016/7/76/T--CIEI-BJ--partsgraph1.jpg" alt=""/> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2016/b/b6/T--CIEI-BJ--partsgraph3.jpg" alt=""/> | ||
+ | <li><img src="https://static.igem.org/mediawiki/2016/3/3a/T--CIEI-BJ--partsgraph4.jpg" alt=""/> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row" id='environmental_safety3'> | ||
+ | <div class="col-sm-10 col-sm-offset-1"> | ||
+ | <div class="row" id='environmental_safety2'> | ||
+ | <div class="col-sm-10 col-sm-offset-1"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </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> | + | </body> |
</html> | </html> |
Revision as of 17:21, 19 October 2016
pARTS
HERE ARE ALL OF OUR PARTS
- SmCPS1 is a key enzyme on the biosynthesis pathway of tanshinone. Tanshinone is a compound used to treat cardiovascular diseases. The artificial synthesis of SmCPS1 may contribute to the artificial synthesis of tanshinone.