|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | | | |
| − | <html>
| |
| − | <script>
| |
| − | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
| − |
| |
| − | $(document).ready(function () {
| |
| − |
| |
| − | $("#HQ_page").attr('id', '');
| |
| − |
| |
| − |
| |
| − | //highlight current page on the menu
| |
| − | highlight_current_page_menu();
| |
| − |
| |
| − | //accessing submenus
| |
| − | $(".menu_item").click(function () {
| |
| − | $(".submenu_control_icon", this).toggleClass("open");
| |
| − | $(this).next(".submenu").fadeToggle(400);
| |
| − | });
| |
| − |
| |
| − | //mobile menu access
| |
| − | $(".igem_2018_team_mobile_bar").click(function () {
| |
| − | $(this).next().toggleClass("displaying_menu");
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | function highlight_current_page_menu() {
| |
| − |
| |
| − | var page_url = "https://2018.igem.org/";
| |
| − | page_url = page_url + wgPageName;
| |
| − | $("a[href$='" + page_url + "']").children().addClass("current_page");
| |
| − |
| |
| − | //if the page is in a submenu, open the submenu and make the appropiate changes
| |
| − | if ($(".current_page").hasClass("submenu_item")) {
| |
| − |
| |
| − | $(".current_page").parent().parent().fadeToggle(400);
| |
| − | $(".current_page").parent().parent().prev().addClass("current_page");
| |
| − | $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <style>
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − | /* DEFAULT WIKI SETTINGS */
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | #home_logo, #sideMenu { display:none; }
| |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| |
| − | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
| |
| − | body {background-color:white; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − |
| |
| − | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − | /* MENU */
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | /*this wraps the whole of the menu*/
| |
| − | .igem_2018_team_menu {
| |
| − | background-color:#c4baba;
| |
| − | border-left: 1px solid #c4baba;
| |
| − | display:block;
| |
| − | float:right;
| |
| − | height:100vh;
| |
| − | max-width: 270px;
| |
| − | overflow-y: auto;
| |
| − | overflow-x: hidden;
| |
| − | padding:0px;
| |
| − | position:fixed;
| |
| − | right:0%;
| |
| − | text-align:left;
| |
| − | width: 15%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu.displaying_menu{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu a {
| |
| − | color: #484848;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu img {
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item {
| |
| − | background-color: #c4baba;
| |
| − | border-bottom: 1px solid #928b8b;
| |
| − | clear: both;
| |
| − | color: #484848;
| |
| − | cursor: pointer;
| |
| − | float: left;
| |
| − | font-size: 120%;
| |
| − | font-weight: bold;
| |
| − | padding: 15px 0px 15px 5%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item.direct_link {
| |
| − | color: #484848;
| |
| − | padding-left: 15%;
| |
| − | }
| |
| − | .igem_2018_team_menu .menu_item:hover {
| |
| − | background-color: #ecb656;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon {
| |
| − | color: #484848;
| |
| − | float: left;
| |
| − | width: 10%;
| |
| − | }
| |
| − |
| |
| − | /* submenu icon "+" "-"*/
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon::before {
| |
| − | content: "+";
| |
| − | }
| |
| − |
| |
| − | /* submenu icon "+" "-"*/
| |
| − | .igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
| |
| − | content: "-";
| |
| − | }
| |
| − |
| |
| − | /*submenu wrapper*/
| |
| − | .igem_2018_team_menu .submenu{
| |
| − | background-color: #e4dede;
| |
| − | clear:both;
| |
| − | display:none;
| |
| − | float: left;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | /*styling for a submenu item*/
| |
| − | .igem_2018_team_menu .submenu .submenu_item {
| |
| − | border-bottom: 1px solid #c4baba;
| |
| − | color: #635d5d;
| |
| − | height: 30px;
| |
| − | float: left;
| |
| − | font-size: 110%;
| |
| − | font-weight: bold;
| |
| − | padding: 12px 0px 0px 15%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_menu .submenu .submenu_item:hover {
| |
| − | background-color: #f3bd5d;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_menu .submenu .submenu_item.current_page,
| |
| − | .igem_2018_team_menu .menu_item.current_page,
| |
| − | .igem_2018_team_menu .menu_item.direct_link.current_page {
| |
| − | background-color:#7acbd8;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*mobile menu bar styling*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_mobile_bar {
| |
| − | background-color:#e4dede;
| |
| − | border-bottom: 1px solid #c4baba;
| |
| − | cursor:pointer;
| |
| − | display:none;
| |
| − | float:left;
| |
| − | margin-top: 0;
| |
| − | padding: 5px 0;
| |
| − | position:fixed;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | .igem_logo_mobile img {
| |
| − | width:70px;
| |
| − | }
| |
| − |
| |
| − | .igem_logo_mobile {
| |
| − | float:left;
| |
| − | padding-left: 5%;
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .igem_menu_control_mobile img {
| |
| − | width:25px;
| |
| − | }
| |
| − |
| |
| − | .igem_menu_control_mobile {
| |
| − | float:right;
| |
| − | padding-right:5%;
| |
| − | padding-top:5px;
| |
| − | text-align:right;
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − | /* CONTENT OF THE PAGE */
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | /* general wrapper for the content */
| |
| − | .igem_2018_team_content {
| |
| − | background-color:white;
| |
| − | display:block;
| |
| − | width: 87%;
| |
| − | }
| |
| − |
| |
| − | /* subwrapper to center content */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper {
| |
| − | margin:auto;
| |
| − | max-width: 1400px;
| |
| − | width:90%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*general styling*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
| |
| − |
| |
| − |
| |
| − | /* styling for the titles h1, h2*/
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
| |
| − | border-bottom:0px;
| |
| − | color: #635d5d;
| |
| − | font-family: "Arial Black", Gadget, sans-serif;
| |
| − | padding: 10px 0px;
| |
| − | }
| |
| − |
| |
| − | /* styling for the titles h3, h3, h5, h6 */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h3,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h4,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h5,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper h6 {
| |
| − | border-bottom:0px;
| |
| − | color: #928b8b;
| |
| − | font-family: "Arial Black", Gadget, sans-serif;
| |
| − | padding: 5px 0px;
| |
| − | }
| |
| − |
| |
| − | /* text */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper p {
| |
| − | font-size: 130%;
| |
| − | font-family: Arial, Helvetica, sans-serif;
| |
| − | padding: 5px 0px;
| |
| − | text-align: left;
| |
| − | color: #484848;
| |
| − | }
| |
| − |
| |
| − | /* Links */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper a {
| |
| − | color: #5bc7d8;
| |
| − | font-weight: bold;
| |
| − | text-decoration: underline;
| |
| − | text-decoration-color:#5bc7d8;
| |
| − | transition: all 0.4s ease;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | /* hover for the links */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper a:hover {
| |
| − | color: #f8b732;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Table */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper table {
| |
| − | border: 1px solid #928b8b;
| |
| − | border-collapse: collapse;
| |
| − | font-size: 130%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /* table cells */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper td {
| |
| − | border: 1px solid #c4baba;
| |
| − | border-collapse: collapse;
| |
| − | font-size: 105%;
| |
| − | padding: 10px;
| |
| − | vertical-align: text-top;
| |
| − | }
| |
| − |
| |
| − | /* table headers */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper th {
| |
| − | background-color:#c4baba;
| |
| − | border: 1px solid #928b8b;
| |
| − | border-collapse: collapse;
| |
| − | font-size: 110%;
| |
| − | padding: 10px;
| |
| − | vertical-align: text-top;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* non numbered lists */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
| |
| − | font-size: 130%;
| |
| − | font-family: Arial, Helvetica, sans-serif;
| |
| − | padding:0px 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*layout classes*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − | /*main layout class */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column {
| |
| − | float:left;
| |
| − | margin: 1% 2%;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | /* 100% */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
| |
| − |
| |
| − | /* 66% */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
| |
| − |
| |
| − | /* 33% */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*styling for all images*/
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
| |
| − | margin-bottom: 15px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* page break */
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .clear {
| |
| − | clear:both;
| |
| − | }
| |
| − | /*add extra space to page break with clear class*/
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
| |
| − | height: 30px;
| |
| − | }
| |
| − |
| |
| − | /* horizontal line to divide the page*/
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
| |
| − | border-top: 1px solid #c4baba;
| |
| − | margin: auto;
| |
| − | width: 98%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*support classes*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /*Button */
| |
| − | /************************************************/
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
| |
| − | font-size: 130%;
| |
| − | margin: 30px auto;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a {
| |
| − | background-color: #5bc7d8;
| |
| − | color: #635d5d !important;
| |
| − | font-weight: bold;
| |
| − | margin: auto;
| |
| − | text-decoration: none !important;
| |
| − | padding: 10px 15px;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
| |
| − | background-color: #f8b732 !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight {
| |
| − | padding: 15px 20px;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
| |
| − | padding: 5px 15px;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
| |
| − | background-color: #e4dede;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
| |
| − | border-top: 4px solid #5bc7d8;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
| |
| − | border: 4px solid #5bc7d8;
| |
| − | }
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
| |
| − | border-top: 4px solid #f8b732
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
| |
| − | border: 4px solid #f8b732;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*mobile*/
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /* 1800px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1800px) {
| |
| − | .igem_2018_team_content { width: 85%;}
| |
| − | .igem_2018_team_menu {display:block;}
| |
| − | }
| |
| − |
| |
| − | /* 1400px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1400px) {
| |
| − | .igem_2018_team_menu .menu_item { font-size:100%;}
| |
| − | .igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
| |
| − | .igem_2018_team_menu {display:block;}
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 1001px) {
| |
| − | .igem_2018_team_menu {display:block;}
| |
| − | }
| |
| − |
| |
| − | /* 1000px */
| |
| − | /************************************************/
| |
| − | @media only screen and (max-width: 1000px) {
| |
| − | .igem_2018_team_content {width:100%; margin-left:0px;}
| |
| − | .igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
| |
| − | .igem_2018_team_mobile_bar {display:block;}
| |
| − | .igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (max-width: 500px) {
| |
| − | .igem_2018_team_menu {min-width:100%; width:100%; }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /**************************************************************************************************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <head>
| |
| − |
| |
| − | <meta charset="utf-8">
| |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <title>Title Page</title>
| |
| − | <!-- Bootstrap CSS -->
| |
| − | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
| |
| − | <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
| |
| − | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
| |
| − | </head>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Menu --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <div class="igem_2018_team_mobile_bar">
| |
| − |
| |
| − | <div class="igem_logo_mobile">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div class="igem_menu_control_mobile">
| |
| − | <img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Content of the page --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <style>
| |
| − | .bs-docs-nav {
| |
| − | background-color: #38c5e5;
| |
| − | border-color: #e7e7e7;
| |
| − | }
| |
| − | .nav .navbar-nav>li .dropdown-menu {margin:0;}
| |
| − | .nav .navbar-nav>li:hover .dropdown-menu{display:block;}
| |
| − | .navbar .nav > li .dropdown-menu {margin: 0;}
| |
| − | .navbar .nav > li:hover .dropdown-menu {
| |
| − | display: block;
| |
| − | background-color: #38c5e5;
| |
| − | }
| |
| − | .rightbottom{position:fixed;bottom:50px;right:50px;}
| |
| − | .nav>li>a {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | color:#ffffff;
| |
| − | }
| |
| − | </style>
| |
| − | <header class="navbar navbar-static-top bs-docs-nav" style="margin-top: 15px" id="top">
| |
| − | <div class="container">
| |
| − | <div class="navbar-header">
| |
| − | <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar"
| |
| − | aria-expanded="false">
| |
| − | <span class="sr-only">Toggle navigation</span>
| |
| − | <span class="icon-bar"></span>
| |
| − | <span class="icon-bar"></span>
| |
| − | <span class="icon-bar"></span>
| |
| − | </button>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B" class="navbar-brand">NEU_China_B</a>
| |
| − | </div>
| |
| − | <nav id="bs-navbar" class="collapse navbar-collapse">
| |
| − | <ul class="nav navbar-nav navbar-right">
| |
| − | <li class="dropdown">
| |
| − | <a href="#">Project<span class="caret"></span></a>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="https://2018.igem.org/Team:NEU_China_B/background">Background</a></li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Description">
| |
| − | Description
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Design">
| |
| − | Applied Design
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Results">
| |
| − | Results
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Improve">
| |
| − | Improve
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Model">
| |
| − | Models
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="#">Lab<span class="caret"></span></a>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/InterLab">
| |
| − | InterLab
| |
| − | </a>
| |
| − | </li>
| |
| − | <li><a href="https://2018.igem.org/Team:NEU_China_B/protocols">Protocols</a></li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Notebook">
| |
| − | Notebook
| |
| − | </a>
| |
| − | </li>
| |
| − | <li><a href="https://2018.igem.org/Team:NEU_China_B/Safety">Safety</a></li>
| |
| − |
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="#">Parts<span class="caret"></span></a>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Basic_Part">
| |
| − | Basic Parts
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Composite_Part">
| |
| − | Composite Parts
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="#">Human practice<span class="caret"></span></a>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Human_Practices">
| |
| − | Human Practices
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Collaborations">
| |
| − | Collaborations
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a href="#">Team<span class="caret"></span></a>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Team">
| |
| − | Team Members
| |
| − | </a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:NEU_China_B/Attributions">
| |
| − | Attributions
| |
| − | </a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | <ul class="nav navbar-nav navbar-right">
| |
| − | </ul>
| |
| − | </nav>
| |
| − | </div>
| |
| − | </header>
| |
| − |
| |
| − | <div class="rightbottom">
| |
| − | <a class="btn btn-default" href="#top" role="button">got to top</a>
| |
| − | </div>
| |
| − | <div class="container" style="margin-top: 20px">
| |
| − |
| |
| − | <canvas id="base_page" width="800" height="400" style="border:1px solid #c3c3c3;">
| |
| − | 您的浏览器不支持 HTML5 canvas 标签。
| |
| − | </canvas>
| |
| − | <script>
| |
| − | var width = 800;
| |
| − | var height = 400;
| |
| − |
| |
| − | var c = document.getElementById("base_page");
| |
| − | var ctx = c.getContext("2d");
| |
| − | var img = new Image();
| |
| − | img.src = "http://placehold.it/1080x320/c4baba/e4dede";
| |
| − | that = ctx;
| |
| − | var i = 0;
| |
| − | var pi = Math.PI;
| |
| − | var basex = 400;
| |
| − | var basey = 200;
| |
| − | var imgx;
| |
| − | var imgy;
| |
| − |
| |
| − | img.onload = function () {
| |
| − | var timer = setInterval(function () {
| |
| − | // ctx.clearRect(0, 0, width, height);
| |
| − | i += 0.0001;
| |
| − | imgx = 400 * Math.cos(i * 180 * 2) + basex;
| |
| − | imgy = 200 * Math.sin(i * 180 * 4) + basey;
| |
| − | ctx.drawImage(img, imgx, imgy, 5, 5);
| |
| − | // if (y > 400) {
| |
| − | // clearInterval(timer);
| |
| − | // }
| |
| − | }, 1);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| | <h1> | | <h1> |
| | Applied Design | | Applied Design |
Our inspiration came from the industrial fermentation. Among of fermentation bacteria Lactobacillus is the most
well-known, which is mainly used in manufacturing yogurt and its derivatives. In modern life, yogurt has been
considered as the indispensable food for your daily life.
Speaking of the yogurt, there is an ancient story said that nomads living in the Anatolian (now Turkish) plateau
had made and drank yogurt as early as 3000 B.C. The original yogurt may be made by chance. Goat milk often spoiled
in stocks since the bacteria contaminated the milk. However, in one case, air born lactic bacteria accidentally
entered into the milk and lead to the milk deterioration. Unexpectedly, the “deteriorated milk” became more sour
and sweet palatable, this is the earliest yogurt. Shepherds found the yogurt so good to drink that they inoculated
the sample into the uncontaminated milk in order to retrieving the yogurt. After a period of culture and
fermentation, a new yogurt was obtained.
Although fermenter is a great place for microorganisms rapidly grow, reproduce, and accumulate metabolized organic
matter, it also could generate many by-products. The excess lactate not only inhibited the growth of fermentation
bacteria, but also reduced the quality of the product. Additionally, high concentration of industrial lactate may
corrode human skin and epithelium. So we came up with the idea of making a real-time biophysical receptor to
measure in real time whether the culture fluid in the fermenter need to be refilled.
Currently, the industrial companies commonly use the pH meter and pH paper to detect the concentration of lactate
in the producing. But using the pH meter or pH paper require the nutrient fluid flow out from the fermenter first,
which enhance the risk of getting polluted by microorganism. Also, as we all knew that using pH value to detect
Lactate only allow the factories get a rough data since the nutrient fluid has other acidic molecules like formic
acid. The current method is no deny that inefficient also because it requires hand operation of industrial workers.
With the presence of D-Lactate Dehydrogenase (D-LDH), D-Lactate was oxidized by nicotinamide dinucleotide (NAD)
into pyruvate. In the similar situation, L-Lactate could be oxidized in the presence of L-Lactate Dehydrogenase
(L-LDH).
The reaction equilibrium depends on the amount of lactate. In the presence of L-glutamic acid (L-glutamate) in the
following reactions, the formation of pyruvate (pyruvate) and NADH are catalyzed by Glutamate Pyruvate Transaminase
(GPT).
The amount of D-Lactate/L-Lactate and nicotinamide adenine dinucleotide (NADH) formed in the above reactions are
chemical stoichiometry. And by measuring the absorbance of the generated NADH at the wavelength of 334/340/365 nm,
the concentration of lactate can be determined.
Even though the data is accurate using the lactate detection Kit, this method is time consuming. Also, it requires
equipment such as Ultraviolet(UV) spectrophometer in the procedure. Thus, from the aspects of convenience and
industrial cost, we design a swifter and real-time lactate detect model with Bio-synthetic methods.
Optical fiber is a sort of artificial fiber made from glasses or plastic, widely used in the light conducting.
The principle of transmission is the overall reflection of light.
Optical fiber spectrometer is usually used as signal coupler, which is coupled to spectrometer for spectral
analysis. Because of its convenience, we can set up spectrum acquisition system flexibly.
The Optical Fiber Probe works as a sensor which can transform the targets in the same or other phases into
light signals as a feedback. The incident ray would be sent from the the fiber, in the meanwhile the targets
capture the light source and reflect backward to fiber probe.
In our design proposal, the Optical Fiber Probe embodies one laser emitter which gives out the incident light
source in the head. Along with it were the cladding glasses with lower refractive index which keep the light signal
inside the core. And a thin plastic material surrounds outside the cladding is coating layer, usually used as
protector of fiber.
The fiber linked with a spectrometer and a galvanometer(GALV) liked dial. Due to the stoichiometry between the
light intensity and the concentration of Lactate, light signals would be processed in spectrometer. Later then the
dial would be capable to outlet the scales of lactate. By mathematical calculation, we reprogrammed the dial scales
into visualized scales of lactate concentration.
The optical fiber detector is mainly constructed by the students from Information Institution. By this way, we
have the chance to realize the cross disciplines and peer learning with different fields.
We designed a lactate monitoring circuit to imitate the conditions that triggered Quorum Sensing of Escherichia
coli. By constructing a biophysical loop with the second Quorum Sensing system of Escherichia coli K12 strain, we
would be able to use optical fiber probe to detect Green Fluorescent Protein intensity.
We have known that the second Quorum Sensing system of Escherichia coli k12 strain takes DPD (4, 5-dihydroxy-2,
3-pentanedione), which is expressed by LuxS gene, as its signal molecule [1]. The DPD can bind to the repressor
protein LsrR after methylation and phosphorylation. Next, the conformation of repressor protein changes and loses
its function, hence the Quorum Sensing system activates. We integrated the Green Fluorescent Protein(GFP) gene
behind the promoter LsrA which operates the Quorum Sensing (Fig.2). Forasmuch as the expression of GFP gene and the
concentration of lactate show a proportional relationship, detecting the intensity of GFP equals to determine the
concentration of lactate in the environment.
We used 3D printing technology in the construction of the container model. We chose to use the photosensitive resin
material.
The reason why we used photosensitive resin is it has certain light cure property, in which a certain UV
initiator or photosensitive agent is added. And the polymerization reaction is immediately arising under a constant
UV light irradiation. After the curing process is completed, the whole process of product molding is realized. It
is well known that UV has a good bactericidal effect in the medical field. The utilization of photosensitive resin
material can largely guarantee the sterile condition of the experimental device.
In addition, the quality of photosensitive resin material printing is very high and elaborate. The container’s
advantages include lightness, relatively high-temperature endurance (120 Celsius degree) and its convenience in
sterilization. The last but the least, it has no adverse effect on the bacterium growth, which allows it to be a
suitable container.
After discussion and research, we adapt the water droplet model built by 3D modeling software. A diameter of 2
mm hole was reserved in the top of the container in order to insert the Optical fiber. And in both of the left and
right sides by the apical hole, there would be two more holes in a diameter of 0.5 mm reserved to add the sample.
The container received special paint spray treatment to ensure the impermeability and avoid the early stimulation
of GFP.
(Fig. 6 3D container)
[1]: Xianxuan, Zhou, Baolin, Sun. Cell-Cell Communication and Signal Transduction in Escherichia coli[D]. Anhui,
China: University of science and technology of China, 2008.
[2]: Laura, Aguilera, Evangelina, Campos, Rosa, Gime´nez, Josefa, Badı´a, Juan, Aguilar, Laura, Baldoma. Dual
Role of LldR in Regulation of the lldPRD Operon, Involved in L-Lactate Metabolism in Escherichia coli[J]. JOURNAL
OF BACTERIOLOGY, 2008, 190(8): 2997-3005.
[3]: Lisa, Goers, Catherine, Ainsworth, Cher, Hui, Goey, Cleo, Kontoravdi, Paul, S, Freemont, Karen, M,
Polizzi. Whole-Cell Escherichia coli Lactate Biosensor for Monitoring Mammalian Cell Cultures During
Biopharmaceutical Production[J]. Biotechnology and Bioengineering, 2017, 114(6): 1290-1300.
(Fig.1 QS System[2])
(Fig.2 BBa_k2824007 )
(Fig.3 LldPRD OPERON)
(Fig.4 BBa_K2824009)
(Fig. 6 3D container)