Difference between revisions of "Team:Fudan-TSI/Team"

(LC after)
 
Line 1: Line 1:
{{Fudan-TSI}}
+
<!--{{Fudan-TSI}}-->
 
<html>
 
<html>
  
 
+
<!-- script HQ in Template -->
<script>
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
$(document).ready(function() {
+
 
+
//remove the HQ_page id
+
$("#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_2019_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
+
var page_url="https://2019.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>
+
  
  
Line 60: Line 15:
  
  
#home_logo, #sideMenu { display:none; }
+
  #home_logo, #sideMenu { display:none; }
#sideMenu, #top_title, .patrollink  {display:none;}
+
  #sideMenu, #top_title, .patrollink  {display:none;}
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
  #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
  #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
 
+
 
  
  
Line 73: Line 28:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/*wrapping for the menu*/
+
  /*wrapping for the menu*/
.igem_2019_team_menu {  
+
  .igem_2019_team_menu {
background-color:#cecece;  
+
    background-color:#cecece;
border-left: 1px solid #635d5d;
+
    border-left: 1px solid #635d5d;
float:right;  
+
    float:right;
height:100vh;  
+
    height:100vh;
max-width: 270px;
+
    max-width: 270px;
overflow-y: auto;
+
    overflow-y: auto;
overflow-x: hidden;
+
    overflow-x: hidden;
padding:0px;
+
    padding:0px;
position:fixed;  
+
    position:fixed;
right:0%;
+
    right:0%;
text-align:left;
+
    text-align:left;
width: 15%;  
+
    width: 15%;
}
+
  }
  
/*controlling menu visibility*/
+
  /*controlling menu visibility*/
.igem_2019_team_menu.displaying_menu{
+
  .igem_2019_team_menu.displaying_menu{
display:block;
+
    display:block;
}
+
  }
  
/*links in the menu*/
+
  /*links in the menu*/
.igem_2019_team_menu  a {
+
  .igem_2019_team_menu  a {
color: #484848;
+
    color: #484848;
text-decoration:none;
+
    text-decoration:none;
}
+
  }
  
/*images in the menu*/
+
  /*images in the menu*/
.igem_2019_team_menu img {
+
  .igem_2019_team_menu img {
width:100%;
+
    width:100%;
}
+
  }
  
/*level 1 menu items*/
+
  /*level 1 menu items*/
.igem_2019_team_menu .menu_item {
+
  .igem_2019_team_menu .menu_item {
    background-color: #cecece;
+
      background-color: #cecece;
    border-bottom: 1px solid #635d5d;
+
      border-bottom: 1px solid #635d5d;
    clear: both;
+
      clear: both;
color: #484848;
+
    color: #484848;
    cursor: pointer;
+
      cursor: pointer;
float: left;
+
    float: left;
    font-size: 120%;
+
      font-size: 120%;
    font-weight: bold;
+
      font-weight: bold;
    padding: 15px 0px 15px 5%;
+
      padding: 15px 0px 15px 5%;
  width: 100%;
+
      width: 100%;
}
+
  }
  
/*level 1 menu items without submenus*/
+
  /*level 1 menu items without submenus*/
.igem_2019_team_menu .menu_item.direct_link {
+
  .igem_2019_team_menu .menu_item.direct_link {
color: #484848;
+
    color: #484848;
padding-left: 15%;
+
    padding-left: 15%;
}
+
  }
  
 
/*level 1 menu items on hover*/
 
.igem_2019_team_menu .menu_item:hover {
 
background-color: #ecb656 !important;
 
}
 
  
/*icon for expanding and collapsing level 1 menut items*/
+
  /*level 1 menu items on hover*/
.igem_2019_team_menu .menu_item .submenu_control_icon {
+
  .igem_2019_team_menu .menu_item:hover {
color: #484848;
+
    background-color: #ecb656 !important;
float: left;
+
  }
width: 10%;
+
}
+
  
/* submenu icon "-"*/
+
  /*icon for expanding and collapsing level 1 menut items*/
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
+
  .igem_2019_team_menu .menu_item .submenu_control_icon {
content: "+";  
+
    color: #484848;
}
+
    float: left;
 +
    width: 10%;
 +
  }
  
/* submenu icon  "-"*/
+
  /* submenu icon  "-"*/
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
+
  .igem_2019_team_menu .menu_item .submenu_control_icon::before {
content: "-";  
+
    content: "+";
}
+
  }
  
+
  /* submenu icon  "-"*/
/*level 2 menu (submenu) wrapper*/
+
  .igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
.igem_2019_team_menu .submenu{
+
    content: "-";
background-color: #ececec;
+
  }
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
  
/*level 2 menu (submenu) item*/
 
.igem_2019_team_menu .submenu .submenu_item {
 
border-bottom: 1px solid #cecece;
 
  color: #635d5d;
 
    height: 30px;
 
  float: left;
 
    font-size: 110%;
 
font-weight: bold;
 
    padding: 12px 0px 0px 15%;
 
    width: 100%;
 
}
 
  
/*level 2 menu (submenu) items on hover*/
+
  /*level 2 menu (submenu) wrapper*/
.igem_2019_team_menu .submenu .submenu_item:hover {
+
  .igem_2019_team_menu .submenu{
background-color: #ecb656 !important;
+
    background-color: #ececec;
}
+
    clear:both;
 +
    display:none;
 +
    float: left;
 +
    width:100%;
 +
  }
  
/*color for highlighting current page on the wiki*/
+
  /*level 2 menu (submenu) item*/
.igem_2019_team_menu .submenu .submenu_item.current_page,
+
  .igem_2019_team_menu .submenu .submenu_item {
.igem_2019_team_menu .menu_item.current_page,  
+
    border-bottom: 1px solid #cecece;
.igem_2019_team_menu .menu_item.direct_link.current_page {
+
      color: #635d5d;
background-color:#a2d3d0;
+
      height: 30px;
}
+
      float: left;
 +
      font-size: 110%;
 +
    font-weight: bold;
 +
      padding: 12px 0px 0px 15%;
 +
      width: 100%;
 +
  }
 +
 
 +
  /*level 2 menu (submenu) items on hover*/
 +
  .igem_2019_team_menu .submenu .submenu_item:hover {
 +
    background-color: #ecb656 !important;
 +
  }
 +
 
 +
  /*color for highlighting current page on the wiki*/
 +
  .igem_2019_team_menu .submenu .submenu_item.current_page,
 +
  .igem_2019_team_menu .menu_item.current_page,
 +
  .igem_2019_team_menu .menu_item.direct_link.current_page {
 +
    background-color:#a2d3d0;
 +
  }
  
  
Line 186: Line 141:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/*mobile bar that controls the menu*/
+
  /*mobile bar that controls the menu*/
.igem_2019_team_mobile_bar {
+
  .igem_2019_team_mobile_bar {
background-color:#ececec;  
+
    background-color:#ececec;
border-bottom: 1px solid #cecece;
+
    border-bottom: 1px solid #cecece;
cursor:pointer;
+
    cursor:pointer;
display:none;  
+
    display:none;
float:left;
+
    float:left;
margin-top: 0;
+
    margin-top: 0;
padding: 5px 0;
+
    padding: 5px 0;
position:fixed;
+
    position:fixed;
width:100%;  
+
    width:100%;
}
+
  }
+
/*mobile logo*/
+
.igem_logo_mobile {
+
float:left;
+
padding-left: 5%;
+
width: 30%;
+
}
+
  
/*image within the mobile logo*/
+
  /*mobile logo*/
.igem_logo_mobile img {
+
  .igem_logo_mobile {
width:70px;
+
    float:left;
}
+
    padding-left: 5%;
+
    width: 30%;
/*mobile expand collapse button*/
+
  }
.igem_menu_control_mobile {
+
float:right;  
+
padding-right:5%;  
+
padding-top:5px;
+
text-align:right;
+
width: 30%;  
+
}
+
  
/*image for mobile expand collapse button*/
+
  /*image within the mobile logo*/
.igem_menu_control_mobile img {
+
  .igem_logo_mobile img {
width:25px;
+
    width:70px;
}
+
  }
  
 +
  /*mobile expand collapse button*/
 +
  .igem_menu_control_mobile {
 +
    float:right;
 +
    padding-right:5%;
 +
    padding-top:5px;
 +
    text-align:right;
 +
    width: 30%;
 +
  }
  
/*add extra padding to the menu to improve mobile scrolling*/
+
  /*image for mobile expand collapse button*/
.menu_padding{
+
  .igem_menu_control_mobile img {
float:left;
+
    width:25px;
height:100px;
+
  }
}
+
 
 +
 
 +
  /*add extra padding to the menu to improve mobile scrolling*/
 +
  .menu_padding{
 +
    float:left;
 +
    height:100px;
 +
  }
  
  
Line 237: Line 192:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/* general wrapper for the content */
+
  /* general wrapper for the content */
.igem_2019_team_content {
+
  .igem_2019_team_content {
background-color:white;  
+
    background-color:white;
display:block;
+
    display:block;
width: 87%;
+
    width: 87%;
}
+
  }
  
/* subwrapper to center content */
+
  /* subwrapper to center content */
.igem_2019_team_content .igem_2019_team_column_wrapper {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper {
margin:auto;
+
    margin:auto;
max-width: 1400px;
+
    max-width: 1400px;
width:90%;
+
    width:90%;
}
+
  }
  
  
Line 256: Line 211:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/*size for title h tags*/
+
  /*size for title h tags*/
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
  
  
/*titles h1, h2*/
+
  /*titles h1, h2*/
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
border-bottom:0px;  
+
    border-bottom:0px;
color: white;
+
    color: white;
font-family: "Arial Black", Gadget, sans-serif;
+
    font-family: "Arial Black", Gadget, sans-serif;
padding: 10px 0px;
+
    padding: 10px 0px;
}
+
  }
  
/*titles h3, h3, h5, h6 */
+
  /*titles h3, h3, h5, h6 */
.igem_2019_team_content .igem_2019_team_column_wrapper h3,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h3,
.igem_2019_team_content .igem_2019_team_column_wrapper h4,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h4,
.igem_2019_team_content .igem_2019_team_column_wrapper h5,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h5,
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper h6 {
border-bottom:0px;  
+
    border-bottom:0px;
color: white;
+
    color: white;
font-family: "Arial Black", Gadget, sans-serif;
+
    font-family: "Arial Black", Gadget, sans-serif;
padding: 5px 0px;
+
    padding: 5px 0px;
}
+
  }
  
/* text p tag*/
+
  /* text p tag*/
.igem_2019_team_content .igem_2019_team_column_wrapper p {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper p {
font-size: 130%;
+
    font-size: 130%;
font-family: Arial, Helvetica, sans-serif;
+
    font-family: Arial, Helvetica, sans-serif;
padding: 5px 0px;
+
    padding: 5px 0px;
text-align: left;
+
    text-align: left;
color: white;
+
    color: white;
}
+
  }
  
/* Links a tag*/
+
  /* Links a tag*/
.igem_2019_team_content .igem_2019_team_column_wrapper a {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper a {
color: #00a19b;
+
    color: #00a19b;
font-weight: bold;  
+
    font-weight: bold;
text-decoration: underline;
+
    text-decoration: underline;
text-decoration-color:#00a19b;
+
    text-decoration-color:#00a19b;
transition: all 0.4s ease;
+
    transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
+
    -webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;  
+
    -moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;  
+
    -ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;  
+
    -o-transition: all 0.4s ease;
}
+
  }
  
/* hover for the links */
+
  /* hover for the links */
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
color: #085156;
+
    color: #085156;
text-decoration:none;
+
    text-decoration:none;
}
+
  }
  
  
/* Table tag*/
+
  /* Table tag*/
.igem_2019_team_content .igem_2019_team_column_wrapper table {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper table {
border: 1px solid #635d5d;  
+
    border: 1px solid #635d5d;
border-collapse: collapse;  
+
    border-collapse: collapse;
font-size: 130%;
+
    font-size: 130%;
width: 100%;  
+
    width: 100%;
}
+
  }
  
/* table cells */
+
  /* table cells */
.igem_2019_team_content .igem_2019_team_column_wrapper td {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper td {
border: 1px solid #cecece;  
+
    border: 1px solid #cecece;
border-collapse: collapse;  
+
    border-collapse: collapse;
font-size: 105%;
+
    font-size: 105%;
padding: 10px;
+
    padding: 10px;
vertical-align: text-top;  
+
    vertical-align: text-top;
}
+
  }
  
/* table headers */
+
  /* table headers */
.igem_2019_team_content .igem_2019_team_column_wrapper th {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper th {
background-color:#cecece;  
+
    background-color:#cecece;
border: 1px solid #635d5d;  
+
    border: 1px solid #635d5d;
border-collapse: collapse;  
+
    border-collapse: collapse;
font-size: 110%;
+
    font-size: 110%;
padding: 10px;  
+
    padding: 10px;
vertical-align: text-top;  
+
    vertical-align: text-top;
}
+
  }
  
  
  
/* non numbered lists */
+
  /* non numbered lists */
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
font-size: 130%;
+
    font-size: 130%;
font-family: Arial, Helvetica, sans-serif;
+
    font-family: Arial, Helvetica, sans-serif;
padding:0px 20px;
+
    padding:0px 20px;
}
+
  }
  
  
/*font sizing within list nesting*/
+
  /*font sizing within list nesting*/
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
  .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
  
  
Line 363: Line 318:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/*main layout class */
+
  /*main layout class */
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column  {
float:left;
+
    float:left;
margin: 1% 2%;
+
    margin: 1% 2%;
padding: 0px;
+
    padding: 0px;
}
+
  }
  
/* 100% */
+
  /* 100% */
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
  
/* 66% */
+
  /* 66% */
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
  
/* 33% */
+
  /* 33% */
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
  
  
  
  
/*all images*/
+
  /*all images*/
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
margin-bottom: 15px;
+
    margin-bottom: 15px;
width: 100%;  
+
    width: 100%;
}
+
  }
  
  
/* page break */
+
  /* page break */
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .clear {
clear:both;
+
    clear:both;
}
+
  }
/*add extra space to page break with clear class*/
+
  /*add extra space to page break with clear class*/
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
height: 30px;
+
    height: 30px;
}
+
  }
 +
 
 +
  /* horizontal line to divide the page*/
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
 +
      border-top: 1px solid #cecece;
 +
      margin: auto;
 +
      width: 98%;
 +
  }
  
/* horizontal line to divide the page*/
 
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
 
    border-top: 1px solid #cecece;
 
  margin: auto;
 
  width: 98%;
 
}
 
  
  
  
 
 
/*support classes*/
 
/*support classes*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
  
/*Button  */
+
  /*Button  */
/************************************************/
+
  /************************************************/
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
font-size: 130%;
+
    font-size: 130%;
margin: 30px auto;
+
    margin: 30px auto;
text-align: center;
+
    text-align: center;
}
+
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
background-color: #00a19bad !important;
+
    background-color: #00a19bad !important;
color: #000 !important;
+
    color: #000 !important;
font-weight: bold;
+
    font-weight: bold;
margin: auto;
+
    margin: auto;
text-decoration: none !important;
+
    text-decoration: none !important;
padding: 10px 15px !important;
+
    padding: 10px 15px !important;
}
+
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
background-color: #ffb819 !important;  
+
    background-color: #ffb819 !important;
}
+
  }
  
 
  
/*highlight */
 
/************************************************/
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
 
padding: 15px 20px;
 
}
 
  
 +
  /*highlight */
 +
  /************************************************/
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
 +
    padding: 15px 20px;
 +
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
 
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
 
padding: 5px 15px;
 
}
 
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
background-color: #ececec;  
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
}
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
 +
    padding: 5px 15px;
 +
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
    border-top: 4px solid #00a19bad;
+
    background-color: #ececec;
}
+
  }
  
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
 +
      border-top: 4px solid #00a19bad;
 +
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
 
    border: 4px solid #00a19bad;
 
}
 
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
    border-top: 4px solid #ffb819
+
      border: 4px solid #00a19bad;
}
+
  }
  
 +
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
 +
      border-top: 4px solid #ffb819
 +
  }
  
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
+
 
    border: 4px solid #ffb819;
+
  .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
}
+
      border: 4px solid #ffb819;
 +
  }
  
  
Line 483: Line 438:
  
  
/* 1800px  */
+
  /* 1800px  */
/************************************************/
+
  /************************************************/
@media only screen and (max-width: 1800px) {
+
  @media only screen and (max-width: 1800px) {
.igem_2019_team_content { width: 85%;}
+
    .igem_2019_team_content { width: 85%;}
.igem_2019_team_menu {display:block;}
+
    .igem_2019_team_menu {display:block;}
+
 
 
}
 
}
  
/* 1400px  */
+
  /* 1400px  */
/************************************************/
+
  /************************************************/
@media only screen and (max-width: 1400px) {
+
  @media only screen and (max-width: 1400px) {
.igem_2019_team_menu .menu_item { font-size:100%;}
+
    .igem_2019_team_menu .menu_item { font-size:100%;}
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
+
    .igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
.igem_2019_team_menu {display:block;}
+
    .igem_2019_team_menu {display:block;}
}
+
  }
  
  
/* 1100px  */
+
  /* 1100px  */
/************************************************/
+
  /************************************************/
@media only screen and (max-width: 1100px) {
+
  @media only screen and (max-width: 1100px) {
.igem_2019_team_content {width:100%; margin-left:0px;}
+
    .igem_2019_team_content {width:100%; margin-left:0px;}
+
.igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
+
+
.igem_2019_team_mobile_bar {display:block;}
+
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
+
  
}
+
    .igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
  
/* 850px  */
+
    .igem_2019_team_mobile_bar {display:block;}
/************************************************/
+
@media only screen and (max-width: 850px) {
+
.igem_2019_team_menu {width:40%;}
+
}
+
  
/*500px  */
+
    .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
/************************************************/
+
 
@media only screen and (max-width: 500px) {
+
  }
.igem_2019_team_menu {min-width:100%;width:100%;}
+
 
}
+
  /* 850px  */
 +
  /************************************************/
 +
    @media only screen and (max-width: 850px) {
 +
    .igem_2019_team_menu {width:40%;}
 +
  }
 +
 
 +
  /*500px  */
 +
  /************************************************/
 +
  @media only screen and (max-width: 500px) {
 +
    .igem_2019_team_menu {min-width:100%;width:100%;}
 +
  }
  
  
Line 539: Line 494:
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
<head>  
+
<head>
 +
 
 +
  <!-- This tells the browser that your page is responsive -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
  <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&action=raw&ctype=text/javascript"></script>
 +
 
 +
 
  
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&amp;action=raw&amp;ctype=text/javascript"></script>
 
 
 
 
 
</head>
 
</head>
  
Line 555: Line 510:
 
<!--- Menu --->
 
<!--- Menu --->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
<style>
 
 
    *{margin: 0;padding: 0;list-style: none;}
 
/* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
 
  
/** 清除内外边距 **/
+
    <style>
body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+
pre, /* text formatting elements 文本格式元素 */
+
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+
th, td /* table elements 表格元素 */ {
+
margin: 0;
+
padding: 0;
+
}
+
  
/** 设置默认字体 **/
+
        *{margin: 0;padding: 0;list-style: none;}
 +
      /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */
  
/* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
+
      /** 清除内外边距 **/
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+
      body, h1, h3, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+
      dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
/* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
+
      pre, /* text formatting elements 文本格式元素 */
 +
      form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 +
      th, td /* table elements 表格元素 */ {
 +
        margin: 0;
 +
        padding: 0;
 +
      }
  
/** 重置列表元素 **/
+
      /** 设置默认字体 **/
ul, ol { list-style: none; }
+
  
/** 重置文本格式元素 **/
+
      /* @@@@ h1, h3, h3, h4, h5, h6 { font-size: 100%; }*/
a { text-decoration: none; }
+
      address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
a:hover { text-decoration: underline; }
+
      code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 +
      /* @@@@ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
  
 +
      /** 重置列表元素 **/
 +
      ul, ol { list-style: none; }
  
/** 重置表单元素 **/
+
      /** 重置文本格式元素 **/
legend { color: #000; } /* for ie6 */
+
      a { text-decoration: none; }
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
+
      a:hover { text-decoration: underline; }
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+
/* 注:optgroup 无法扶正 */
+
  
/** 重置表格元素 **/
+
 
table { border-collapse: collapse; border-spacing: 0; }
+
      /** 重置表单元素 **/
+
      legend { color: #000; } /* for ie6 */
</style>
+
      fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
 +
      button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 +
      /* 注:optgroup 无法扶正 */
 +
 
 +
      /** 重置表格元素 **/
 +
      table { border-collapse: collapse; border-spacing: 0; }
 +
 
 +
    </style>
  
  
Line 604: Line 559:
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 
 
 
 
 
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 
 
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&amp;action=raw&amp;ctype=text/css">
 
 
<style>
 
 
body{
 
margin:0;
 
padding:0;
 
background-color:rgba(76,8,110,1.00);
 
}
 
a{
 
text-decoration:none;
 
}
 
#global_wrapper{
 
width:100%;
 
height:auto;
 
margin:0;
 
position:absolute;
 
}
 
#navUl{
 
width:100%;
 
height:110px;
 
padding:40px 0 0 0;
 
overflow:visible;
 
position:fixed;
 
list-style:none;
 
z-index:999;
 
background-color:rgba(76,8,110,1.00);
 
margin:0;
 
top:0;
 
}
 
#mobileNav{
 
width:100%;
 
height:80px;
 
padding:20px 0 0 0;
 
top:0;
 
background-color:#001d2a;
 
position:fixed;
 
display:none;
 
text-align:center;
 
z-index:999;
 
}
 
#mobileNav img{
 
display:none;
 
margin:0;
 
padding:0;
 
  
}
 
#mobileLogo{
 
display:inline-block;
 
}
 
#mobileControl{
 
float:right;
 
display:inline-block;
 
margin-right:15px;
 
margin-top:3px;
 
}
 
#mobileCtrl{
 
height:25px;
 
}
 
#mobileTeamName{
 
display:inline-block;
 
}
 
#navImg{
 
display:inline-block;
 
float:left;
 
height:70px;
 
width:auto;
 
position:relative;
 
margin-left:4%;
 
margin-top:0;
 
}
 
.logo{
 
height:55px;
 
width:auto;
 
margin-top:1.3%;
 
}
 
.teamname{
 
height:28px;
 
}
 
  
#navBar{
 
float:right;
 
position:relative;
 
width:auto;
 
display:inline-block;
 
margin-right:4%;
 
}
 
.navLi{
 
float:left;
 
display:inline-block;
 
margin-top:3%;
 
color:white;
 
font-size:20px;
 
position:relative;
 
margin-left:18px;
 
text-align:center;
 
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
 
text-decoration:none;
 
}
 
.navA{
 
display:block;
 
text-align:center;
 
color:white;
 
text-decoration:none;
 
}
 
.navA2{
 
display:block;
 
overflow:visible;
 
color:white;
 
height:auto;
 
}
 
.ul2{
 
list-style:none;
 
position:absolute;
 
display:none;
 
overflow:hidden;
 
padding:10px 0 0 0 !important;
 
margin:0 !important;
 
font-size:17px;
 
left:50%;
 
transform:translateX(-50%);
 
border-bottom-left-radius: 10px;
 
border-bottom-right-radius: 10px;
 
background:linear-gradient(rgba(76,8,110,1.00),rgba(200,107,0,1.00));
 
}
 
.li2{
 
padding:0;
 
margin:10px 20px;
 
text-align:center;
 
display:block;
 
}
 
.navA:link,.navA2:link{
 
text-decoration:none;
 
}
 
.navA:visited{
 
color:white;
 
}
 
.navA2:visited,.navA2:active{
 
color:white;
 
}
 
.navA:hover{
 
color:rgba(200,107,0,1.00);
 
}
 
.navA2:hover{
 
color:rgba(200,107,0,1.00);
 
}
 
.jqhover{
 
color:rgba(200,107,0,1.00);
 
}
 
.navA:hover{
 
text-decoration:none;
 
}
 
.navA:active{
 
text-decoration:none;
 
color:white;
 
}
 
  
</style>
 
  
 
  
+
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
+
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
 
#pageContent{
+
  <style>
margin:100px 0 0 0;
+
 
text-align:center;
+
    body{
}
+
      margin:0;
+
      padding:0;
.row{
+
      background-color:rgba(76,8,110,1.00);
clear:both!important;
+
    }
}
+
    a{
 +
      text-decoration:none;
 +
    }
 +
    #global_wrapper{
 +
      width:100%;
 +
      height:auto;
 +
      margin:0;
 +
      position:absolute;
 +
    }
 +
    #navUl{
 +
      width:100%;
 +
      height:110px;
 +
      padding:40px 0 0 0;
 +
      overflow:visible;
 +
      position:fixed;
 +
      list-style:none;
 +
      z-index:999;
 +
      background-color:rgba(76,8,110,1.00);
 +
      margin:0;
 +
      top:0;
 +
    }
 +
    #mobileNav{
 +
      width:100%;
 +
      height:80px;
 +
      padding:20px 0 0 0;
 +
      top:0;
 +
      background-color:#001d2a;
 +
      position:fixed;
 +
      display:none;
 +
      text-align:center;
 +
      z-index:999;
 +
    }
 +
    #mobileNav img{
 +
      display:none;
 +
      margin:0;
 +
      padding:0;
 +
 
 +
    }
 +
    #mobileLogo{
 +
      display:inline-block;
 +
    }
 +
    #mobileControl{
 +
      float:right;
 +
      display:inline-block;
 +
      margin-right:15px;
 +
      margin-top:3px;
 +
    }
 +
    #mobileCtrl{
 +
      height:25px;
 +
    }
 +
    #mobileTeamName{
 +
      display:inline-block;
 +
    }
 +
    #navImg{
 +
      display:inline-block;
 +
      float:left;
 +
      height:70px;
 +
      width:auto;
 +
      position:relative;
 +
      margin-left:4%;
 +
      margin-top:0;
 +
    }
 +
    .logo{
 +
      height:55px;
 +
      width:auto;
 +
      margin-top:1.3%;
 +
    }
 +
    .teamname{
 +
      height:28px;
 +
    }
 +
 
 +
    #navBar{
 +
      float:right;
 +
      position:relative;
 +
      width:auto;
 +
      display:inline-block;
 +
      margin-right:4%;
 +
    }
 +
    .navLi{
 +
      float:left;
 +
      display:inline-block;
 +
      margin-top:3%;
 +
      color:white;
 +
      font-size:20px;
 +
      position:relative;
 +
      margin-left:18px;
 +
      text-align:center;
 +
      font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
 +
      text-decoration:none;
 +
    }
 +
    .navA{
 +
      display:block;
 +
      text-align:center;
 +
      color:white;
 +
      text-decoration:none;
 +
    }
 +
    .navA2{
 +
      display:block;
 +
      overflow:visible;
 +
      color:white;
 +
      height:auto;
 +
    }
 +
    .ul2{
 +
      list-style:none;
 +
      position:absolute;
 +
      display:none;
 +
      overflow:hidden;
 +
      padding:10px 0 0 0 !important;
 +
      margin:0 !important;
 +
      font-size:17px;
 +
      left:50%;
 +
      transform:translateX(-50%);
 +
      border-bottom-left-radius: 10px;
 +
      border-bottom-right-radius: 10px;
 +
      background:linear-gradient(rgba(76,8,110,1.00),rgba(200,107,0,1.00));
 +
    }
 +
    .li2{
 +
      padding:0;
 +
      margin:10px 20px;
 +
      text-align:center;
 +
      display:block;
 +
    }
 +
    .navA:link,.navA2:link{
 +
      text-decoration:none;
 +
    }
 +
    .navA:visited{
 +
      color:white;
 +
    }
 +
    .navA2:visited,.navA2:active{
 +
      color:white;
 +
    }
 +
    .navA:hover{
 +
      color:rgba(200,107,0,1.00);
 +
    }
 +
    .navA2:hover{
 +
      color:rgba(200,107,0,1.00);
 +
    }
 +
    .jqhover{
 +
      color:rgba(200,107,0,1.00);
 +
    }
 +
    .navA:hover{
 +
      text-decoration:none;
 +
    }
 +
    .navA:active{
 +
      text-decoration:none;
 +
      color:white;
 +
    }
 +
 
 +
  </style>
 +
 
 +
 
 +
 
 +
 
 +
  <style>
 +
 
 +
    #pageContent{
 +
      margin:100px 0 0 0;
 +
      text-align:center;
 +
    }
 +
 
 +
    .row{
 +
      clear:both!important;
 +
    }
 +
 
 +
    .title1{
 +
      font-size:2.3rem;
 +
      text-align:center;
 +
      color:white;
 +
      display:block;
 +
      margin-top:10%;
 +
      margin-bottom:7%;
 +
      line-height:110%;
 +
    }
 +
    .title2{
 +
      color:white;
 +
      text-align:left;
 +
      font-size:2rem;
 +
      line-height:130%;
 +
      display:block;
 +
      width:100%;
 +
    }
 +
    .title3{
 +
      font-size:1.4rem;
 +
      color:white;
 +
      text-align:left !important;
 +
      display:block;
 +
      width:100%;
 +
      line-height:110%;
 +
      padding-left:2%;
 +
    }
 +
    .para1{
 +
      color:white;
 +
      text-align:justify !important;
 +
      align-items:flex-start;
 +
      line-height:140%;
 +
      font-size:1.3rem;
 +
      margin-bottom:50px !important;
 +
      width:100%;
 +
      margin:auto 0;
 +
    }
 +
    .para1 a{
 +
      text-decoration:underline !important;
 +
      color:white;
 +
    }
 +
    .para1 a:visited, .para1 a:active{
 +
      color:white;
 +
    }
 +
    .para1 a:hover{
 +
      color:rgba(96,255,249,1.00)!important;
 +
    }
 +
    .content1{
 +
      margin:7% auto;
 +
    }
 +
    .pic2{
 +
      width:150%;
 +
    }
 +
    .reverseDiv{
 +
      position:relative !important;
 +
      float:right !important;
 +
    }
 +
 
 +
 
 +
    .paraUl{
 +
      list-style-type:decimal !important;
 +
      list-style-position:outside;
 +
      padding-left:auto;
 +
      font-size:1rem;
 +
    }
 +
    .paraUl li{
 +
      padding-right:4% ;
 +
    }
 +
 
 +
 
 +
    #containerWithLeftNav{
 +
      display:block;
 +
      margin-left:25%;
 +
    }
 +
    .legend{
 +
      color:white;
 +
      text-align:center;
 +
    }
 +
    .legend>div{
 +
      width:100%;
 +
      text-align:justify!important;
 +
      font-size:1.1rem;
 +
    }
 +
    .legends{
 +
      margin:auto 15%;
 +
    }
 +
 
 +
 
 +
  </style>
 +
 
 +
  <style>
 +
 
 +
    @media only screen and (max-width:1200px){
 +
      #mobileBar{
 +
        margin-left:4%;
 +
      }
 +
      .navLi{
 +
        font-size:18px;
 +
        margin-top:3.5%;
 +
      }
 +
    }
 +
 
 +
 
 +
    @media only screen and (max-width:1100px){
 +
 
 +
      #navUl{
 +
        display:block;
 +
        float:right;
 +
        margin-top:0;
 +
        top:80px;
 +
        right:0;
 +
        background-color:rgba(0,0,0,0);
 +
        padding:0;
 +
      }
 +
 
 +
      #mobileNav{
 +
        display:block;
 +
      }
 +
 
 +
      #navImg{
 +
        display:none;
 +
      }
 +
 
 +
 
 +
      #navBar{
 +
        margin:0 1% 0 0;
 +
        padding-right:2%;
 +
        padding-left:1%;
 +
        position:relative;
 +
        display:none;
 +
      }
 +
 
 +
      #mobileNav img{
 +
        display:inline-block;
 +
        margin:5px 0;
 +
        padding:0;
 +
      }
 +
      #mobileControl{
 +
        margin-top:8px;
 +
      }
 +
 
 +
      .logo{
 +
        height:45px;
 +
        margin-top:7px;
 +
      }
 +
      .navLi{
 +
        display:block;
 +
        position:relative;
 +
        float:right;
 +
        clear:both;
 +
        white-space:nowrap;
 +
        text-align:right;
 +
        margin:0;
 +
        height:60px;
 +
        width:100%;
 +
        background-color:#00324a;
 +
      }
 +
      .navA{
 +
        display:block;
 +
        text-align:right;
 +
        position:relative;
 +
        float:right;
 +
        padding:20px 20px !important;
 +
      }
 +
      .n2{
 +
        display:none;
 +
        width:0;
 +
        position:relative;
 +
        float:left;
 +
        text-align:right;
 +
      }
 +
      .ul2{
 +
        background:none;
 +
        padding-top:0;
 +
        background-color:#00557b;
 +
        text-align:right;
 +
        display:block;
 +
        position:relative;
 +
        float:right;
 +
        right:100%;
 +
        transform:translateX(0%);
 +
        top:0;
 +
        transform:translateY(1%);
 +
        border-radius:0 0 0 10px;
 +
      }
 +
      .open{
 +
        display:block;
 +
      }
 +
 
 +
      .title2{
 +
        font-size:1.8rem;
 +
        line-height:140%;
 +
      }
 +
      .para1{
 +
        font-size:1.3rem;
 +
      }
 +
      .pic2{
 +
        width:120%;
 +
      }
 +
 
 +
      .highlightIcon{
 +
        margin:20% auto 10% auto;
 +
      }
 +
      .highlightTitle{
 +
        margin-bottom:15%;
 +
      }
 +
 
 +
 
 +
    }
 +
 
 +
 
 +
    @media only screen and (max-width:992px){
 +
 
 +
      #navUl{
 +
        display:block;
 +
        float:right;
 +
        margin:0;
 +
        top:80px;
 +
        right:0;
 +
      }
 +
 
 +
      #mobileNav{
 +
        display:block;
 +
      }
 +
 
 +
      #navImg{
 +
        display:none;
 +
      }
 +
 
 +
      #navTeamName{
 +
        display:none;
 +
      }
 +
 
 +
      #navBar{
 +
        margin:0 1% 0 0 ;
 +
        margin-right:2%;
 +
        padding-right:1%;
 +
        padding-left:1%;
 +
        position:relative;
 +
        display:none;
 +
      }
 +
      #mobileControl{
 +
        margin-top:10px;
 +
      }
 +
      #mobileNav img{
 +
        display:inline-block;
 +
        margin:5px 0;
 +
        padding:0;
 +
      }
 +
      .logo{
 +
        height:40px;
 +
      }
 +
      .navLi{
 +
        display:block;
 +
        position:relative;
 +
        float:right;
 +
        clear:both;
 +
        white-space:nowrap;
 +
        text-align:right;
 +
        height:60px;
 +
        width:100%;
 +
      }
 +
      .navA{
 +
        display:block;
 +
        text-align:right;
 +
        position:relative;
 +
        float:right;
 +
        font-size:15px;
 +
      }
 +
      .n2{
 +
        display:none;
 +
        width:0;
 +
        position:relative;
 +
        float:left;
 +
      }
 +
      .ul2{
 +
        font-size:13px;
 +
      }
 +
      .open{
 +
        display:block;
 +
      }
 +
 
 +
 
 +
 
 +
      #animation_container{
 +
        display:none;
 +
      }
 +
      #teamLogo{
 +
        display:block;
 +
      }
 +
 
 +
 
 +
      .title2{
 +
        font-size:1.5rem;
 +
      }
 +
      .para1{
 +
        font-size:1.2rem;
 +
      }
 +
      .pic2{
 +
        width:100%;
 +
      }
 +
 
 +
 
 +
    }
 +
 
 +
 
 +
    @media only screen and (max-width:768px){
 +
      .col-md-4{
 +
        clear:both;
 +
      }
 +
      .col-md-8{
 +
        clear:both;
 +
      }
 +
      .pic2{
 +
        margin-bottom:10%;
 +
        width:80%;
 +
      }
 +
      .title2{
 +
        font-size:1.2rem;
 +
      }
 +
      .para1{
 +
        font-size:1rem;
 +
      }
 +
      .pic2{
 +
        width:80%;
 +
      }
 +
      #sponser img {
 +
        width:60%;
 +
      }
 +
 
 +
      #containerWithLeftNav{
 +
        margin-left:auto;
 +
      }
 +
 
 +
    }
 +
 
 +
  </style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
  <style>
 +
    #footContainer{
 +
      width:90%;
 +
    }
 +
    #FudanFooter{
 +
      margin:auto 0;
 +
      width:100%;
 +
      padding:3% 0;
 +
    }
 +
    #FudanFooter #usefulLinks {
 +
      color: #cacaca;
 +
      padding-left: 1rem;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks ul {
 +
      font-size: 13px;
 +
      line-height: 14px;
 +
      border-top: solid 2px;
 +
      color: inherit;
 +
      text-decoration: none;
 +
      padding-top: 5px;
 +
      margin:0;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks div {
 +
      color: #cacaca;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks div:hover {
 +
      color: white;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks a {
 +
      color: inherit;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks a:hover {
 +
      text-decoration: underline;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks div.active,
 +
    #FudanFooter #usefulLinks div.active a {
 +
      color: white;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks div.active ul {
 +
      border-top: solid white 2px;
 +
    }
 +
 
 +
    #FudanFooter #usefulLinks li {
 +
      padding: 3px 0 6px 3px;
 +
      list-style:none;
 +
    }
 +
 
 +
    #usefulLinks span {
 +
      font-size: 20px;
 +
    }
 +
 
 +
 
 +
    #FudanFooter div.footer-copyright {
 +
      font-size: 13px;
 +
      line-height: 15px;
 +
    }
 +
    .footerUl{
 +
      margin:2% 4%;
 +
    }
 +
  </style>
 +
 
 +
  <script>
 +
 
 +
    $(document).ready(function(){
 +
 
 +
 
 +
      var winWidth=$(window).width();
 +
 
 +
      if (winWidth>1100){
 +
        $(".navA").mouseenter(function(){
 +
          $(this).parent().find(".ul2").stop().fadeIn(400);
 +
        });
 +
        $(".navLi").mouseleave(function(){
 +
          $(this).find(".ul2").stop().fadeOut(400);
 +
        });
 +
 
 +
 
 +
      }
 +
      else{
 +
        $(".navA:not(.noSubmenu)").removeAttr("href");
 +
        $("#mobileNav").click(function(){
 +
          $("#navBar").toggle();
 +
        });
 +
        $(document).click(function(event){
 +
          var m = $("#mobileNav,#navBar");
 +
          if (!m.is(event.target)){
 +
            if (m.has(event.target).length===0){
 +
              $("#navBar").hide();
 +
              $(".open").parent().find(".navA").css("color","white");
 +
              $(".open").removeClass("open");
 +
            }
 +
 
 +
          }
 +
        });
 +
        $(".navLi").click(function(){
 +
          if ($(this).find(".n2").hasClass("open")){
 +
            $(".open").parent().find(".navA").css("color","white");
 +
            $(this).find(".n2").removeClass("open");
 +
          }
 +
          else{
 +
            $(".open").parent().find(".navA").css("color","white");
 +
            $(".open").removeClass("open");
 +
            $(this).find(".n2").addClass("open");
 +
            $(this).find(".navA").css("color","#7dded4");
 +
          }
 +
        });
 +
      }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    });
 +
 
 +
 
 +
  </script>
 +
 
 +
 
 +
 
 +
  <div id="global_wrapper">
 +
    <div id="mobileNav">
 +
 
 +
      <div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/5/55/T--Fudan-TSI--logoTeam.gif" class="logo"></div>
 +
      <div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
 +
 
 +
    </div>
 +
 
 +
    <ul id="navUl">
 +
 
 +
        <li id="navImg">
 +
          <img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
 +
 
 +
        </li>
 +
 
 +
 
 +
      <ul id="navBar">
 +
 
 +
        <li class="navLi"><a class="navA noSubmenu" href="/Team:Fudan-TSI">Home</a></li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Description">Project</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Description">Description</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Design">Design</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Applied_Design" style="white-space:nowrap">Applied Design</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Experiments">Experiment</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Demonstrate">Results</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Demonstrate#ReverseTranscription">Reverse Transcription</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Demonstrate#Recombination">Recombination</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Model">Model</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Model">Modeling</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Software">Software</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Parts">Parts</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Improve">Part Improvement</a></li>
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Human_Practices">Human Practices</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Public_Engagement">Education &amp; <br />Public Engagement</a></li>
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Human_Practices">Integrated <br />Human Practice</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Safety">Safety</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi">
 +
          <a class="navA" href="/Team:Fudan-TSI/Team">Team</a>
 +
          <div class="n2">
 +
            <ul class="ul2">
 +
              <li class="li2"><a class="navA2" style="white-space:nowrap;" href="/Team:Fudan-TSI/Team">Team Members</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
 +
              <li class="li2"><a class="navA2" href="/Team:Fudan-TSI/Team#Acknowledge">Acknowledge</a></li>
 +
              <li class="li2"><a class="navA2" href="https://2018.igem.org/Team:Fudan/Heritage">Heritage</a></li>
 +
            </ul>
 +
          </div>
 +
        </li>
 +
 
 +
        <li class="navLi"><a class="navA noSubmenu" href="/Team:Fudan-TSI/Judging">Judging</a></li>
 +
 
 +
      </ul>
 +
 
 +
 
 +
      </ul>
 +
 
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
    <!---- Cover ---->
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
    <div id="pageCover">
 +
 
 +
      <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
 +
      <script>
 +
      $(document).ready(function($){
 +
        var $root = $('html, body');
 +
        $('a[href^="#"]').click(function() {
 +
          var href = $.attr(this, 'href');
 +
          $root.animate({
 +
            scrollTop: $(href).offset().top
 +
          }, 1000, function () {
 +
            window.location.hash = href;
 +
          });
 +
          return false;
 +
        });
 +
      })
 +
      </script>
 +
 
 +
      <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
 +
        <defs>
 +
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
 +
          <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
 +
        </linearGradient>
 +
        <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
 +
          <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
 +
          <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
 +
        </linearGradient>
 +
        </defs>
 +
        <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
 +
        <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
 +
      </svg>
 +
      <div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/a/aa/T--Fudan-TSI--coverTeam.gif"></div>
 +
    </div>
 +
    <style>
 +
      #pageCover{
 +
        width:100%;
 +
        margin:0;
 +
        padding-top:80px;
 +
      }
 +
      #demoCover{
 +
        width:100vw;
 +
        height:80vh;
 +
        position:absolute;
 +
        background-color:rgba(76,8,110,0.5);
 +
        top:70px;
 +
        left:0;
 +
        text-align:center;
 +
      }
 +
      #coverPic{
 +
        width:550px;
 +
        margin:20vh auto;
 +
      }
 +
      #demo{
 +
        width:100vw;
 +
        height:70vh;
 +
        position:relative;
 +
      }
 +
      #demo svg {
 +
        width: 100%;
 +
        height: 100%;
 +
        position: fixed;
 +
      }
 +
      #demo svg g {
 +
        mix-blend-mode: lighten;
 +
      }
 +
      #demo svg polygon {
 +
        stroke: none;
 +
        fill: white;
 +
      }
 +
 
 +
      @media only screen and (max-width:1100px){
 +
        #pageCover{
 +
          padding-top:55px;
 +
        }
 +
        #demoCover{
 +
          top:55px;
 +
          height:30vh;
 +
        }
 +
        #demo{
 +
          height:30vh;
 +
        }
 +
        #coverPic{
 +
          width:500px;
 +
          margin:7vh auto;
 +
        }
 +
      }
 +
      @media only screen and (max-width:992px){
 +
        #pageCover{
 +
          padding-top:55px;
 +
        }
 +
        #demoCover{
 +
          top:55px;
 +
        }
 +
        #coverPic{
 +
          width:500px;
 +
          margin:6vh auto;
 +
        }
 +
      }
 +
      @media only screen and (max-width:768px){
 +
        #pageCover{
 +
          padding-top:55px;
 +
        }
 +
        #demoCover{
 +
          top:55px;
 +
        }
 +
        #coverPic{
 +
          width:400px;
 +
          margin:8vh auto;
 +
        }
 +
      }
 +
      @media only screen and (max-width:500px){
 +
        #coverPic{
 +
          width:200px;
 +
          margin:8vh auto;
 +
        }
 +
      }
 +
    </style>
 +
        <script>
 +
      //////////////////////////////
 +
      // Demo Functions
 +
      //////////////////////////////
 +
      function bkgFunction(showStats) {
 +
        // stats
 +
        if (showStats) {
 +
        var stats = new Stats();
 +
        stats.domElement.style.position = 'absolute';
 +
        stats.domElement.style.left = '0';
 +
        stats.domElement.style.top = '0';
 +
        document.body.appendChild(stats.domElement);
 +
        requestAnimationFrame(function updateStats(){
 +
          stats.update();
 +
          requestAnimationFrame(updateStats);
 +
        });
 +
        }
 +
        // init
 +
        var svg = document.getElementById('demo');
 +
        tesselation.setup(svg);
 +
        gradients.setup();
 +
        var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
 +
        function playNextTransition() {
 +
        tesselation.next(transitionDuration);
 +
        gradients.next(transitionDuration);
 +
        };
 +
        function tick(time) {
 +
        if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
 +
          lastTransitionAt = time;
 +
          playNextTransition();
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
        }
 +
        window.requestAnimationFrame(tick);
 +
      }
 +
      //////////////////////////////
 +
      // Delaunay Triangulation
 +
      //////////////////////////////
 +
      var calcDelaunayTriangulation = (function() {
 +
        var EPSILON = 1.0 / 1048576.0;
 +
        function getSuperT(vertices) {
 +
        var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
 +
          xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
 +
          i, xDiff, yDiff, maxDiff, xCenter, yCenter;
 +
        for(i = vertices.length; i--; ) {
 +
          if(vertices[i][0] < xMin) xMin = vertices[i][0];
 +
          if(vertices[i][0] > xMax) xMax = vertices[i][0];
 +
          if(vertices[i][1] < yMin) yMin = vertices[i][1];
 +
          if(vertices[i][1] > yMax) yMax = vertices[i][1];
 +
        }
 +
        xDiff = xMax - xMin;
 +
        yDiff = yMax - yMin;
 +
        maxDiff = Math.max(xDiff, yDiff);
 +
        xCenter = xMin + xDiff * 0.5;
 +
        yCenter = yMin + yDiff * 0.5;
 +
        return [
 +
          [xCenter - 20 * maxDiff, yCenter - maxDiff],
 +
          [xCenter, yCenter + 20 * maxDiff],
 +
          [xCenter + 20 * maxDiff, yCenter - maxDiff]
 +
        ];
 +
        }
 +
        function circumcircle(vertices, i, j, k) {
 +
        var xI = vertices[i][0], yI = vertices[i][1],
 +
          xJ = vertices[j][0], yJ = vertices[j][1],
 +
          xK = vertices[k][0], yK = vertices[k][1],
 +
          yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
 +
          xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
 +
        // bail condition
 +
        if(yDiffIJ < EPSILON){
 +
          if (yDiffJK < EPSILON){
 +
            throw new Error("Can't get circumcircle since all 3 points are y-aligned");
 +
          }
 +
        }
 +
 
 +
 
 +
        // calc circumcircle center x/y, radius
 +
        m1  = -((xJ - xI) / (yJ - yI));
 +
        m2  = -((xK - xJ) / (yK - yJ));
 +
        xMidIJ = (xI + xJ) / 2.0;
 +
        xMidJK = (xJ + xK) / 2.0;
 +
        yMidIJ = (yI + yJ) / 2.0;
 +
        yMidJK = (yJ + yK) / 2.0;
 +
        xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
 +
          (yDiffJK < EPSILON) ? xMidJK :
 +
          (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
 +
        yCenter  = (yDiffIJ > yDiffJK) ?
 +
          m1 * (xCenter - xMidIJ) + yMidIJ :
 +
          m2 * (xCenter - xMidJK) + yMidJK;
 +
        xDiff = xJ - xCenter;
 +
        yDiff = yJ - yCenter;
 +
        // return
 +
        return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
 +
        }
 +
        function dedupeEdges(edges) {
 +
        var i, j, a, b, m, n;
 +
        for(j = edges.length; j; ) {
 +
          b = edges[--j]; a = edges[--j];
 +
          for(i = j; i; ) {
 +
          n = edges[--i]; m = edges[--i];
 +
          if(a === m){
 +
            if (b===n){
 +
              edges.splice(j, 2); edges.splice(i, 2);
 +
              break;
 +
            }
 +
          }
 +
          if(a === n){
 +
            if (b===m){
 +
              edges.splice(j, 2); edges.splice(i, 2);
 +
              break;
 +
            }
 +
          }
 +
          }
 +
        }
 +
        }
 +
        return function(vertices) {
 +
        var n = vertices.length,
 +
          i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
 +
        // bail if too few / too many verts
 +
        if(n < 3 || n > 2000)
 +
          return [];
 +
        // copy verts and sort indices by x-position
 +
        vertices = vertices.slice(0);
 +
        indices = new Array(n);
 +
        for(i = n; i--; )
 +
          indices[i] = i;
 +
        indices.sort(function(i, j) {
 +
          return vertices[j][0] - vertices[i][0];
 +
        });
 +
        // supertriangle
 +
        st = getSuperT(vertices);
 +
        vertices.push(st[0], st[1], st[2]);
 +
        // init candidates/locked tris list
 +
        candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
 +
        locked = [];
 +
        edges = [];
 +
        // scan left to right
 +
        for(i = indices.length; i--; edges.length = 0) {
 +
          c = indices[i];
 +
          // check candidates tris against point
 +
          for(j = candidates.length; j--; ) {
 +
          // lock tri if point to right of circumcirc
 +
          dx = vertices[c][0] - candidates[j].x;
 +
          if (dx > 0.0){
 +
            if(dx * dx > candidates[j].r){
 +
              locked.push(candidates[j]);
 +
            candidates.splice(j, 1);
 +
            continue;
 +
            }
 +
          }
 +
 
 +
 
 +
          // point outside circumcirc = leave candidates
 +
          dy = vertices[c][1] - candidates[j].y;
 +
          if(dx * dx + dy * dy - candidates[j].r > EPSILON)
 +
            continue;
 +
          // point inside circumcirc = break apart, save edges
 +
          edges.push(
 +
            candidates[j].i, candidates[j].j,
 +
            candidates[j].j, candidates[j].k,
 +
            candidates[j].k, candidates[j].i
 +
          );
 +
          candidates.splice(j, 1);
 +
          }
 +
          // new candidates from broken edges
 +
          dedupeEdges(edges);
 +
          for(j = edges.length; j; ) {
 +
          b = edges[--j];
 +
          a = edges[--j];
 +
          candidates.push(circumcircle(vertices, a, b, c));
 +
          }
 +
        }
 +
        // close candidates tris, remove tris touching supertri verts
 +
        for(i = candidates.length; i--; )
 +
          locked.push(candidates[i]);
 +
        candidates.length = 0;
 +
        for(i = locked.length; i--; )
 +
          if(locked[i].i < n){
 +
            if(locked[i].j < n){
 +
              if(locked[i].k < n){
 +
                candidates.push(locked[i].i, locked[i].j, locked[i].k);
 +
              }
 +
            }
 +
          }
 +
 
 +
 
 +
        // done
 +
        return candidates;
 +
        };
 +
      })();
 +
      var tesselation = (function() {
 +
        var svg, svgW, svgH, prevGroup;
 +
        function createRandomTesselation() {
 +
        var wW = window.innerWidth;
 +
        var wH = window.innerHeight;
 +
        var gridSpacing = 250, scatterAmount = 0.75;
 +
        var gridSize, i, x, y;
 +
        if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
 +
          gridSize = gridSpacing * svgW / wW;
 +
        } else { // window taller than svg = use height for gridSize
 +
          gridSize = gridSpacing * svgH / wH;
 +
        }
 +
        var vertices = [];
 +
        var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
 +
        for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
 +
          for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
 +
          vertices.push(
 +
            [
 +
            xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
 +
            yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
 +
            ]
 +
          );
 +
          }
 +
        }
 +
        var triangles = calcDelaunayTriangulation(vertices);
 +
        var group = document.createElementNS('http://www.w3.org/2000/svg','g');
 +
        var polygon;
 +
        for(i = triangles.length; i; ) {
 +
          polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
 +
          polygon.setAttribute('points',
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
 +
          vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
 +
          );
 +
          group.appendChild(polygon);
 +
        }
 +
        return group;
 +
        }
 +
        return {
 +
        setup: function(svgElement) {
 +
          svg = svgElement;
 +
          var vb = svg.getAttribute('viewBox').split(/\D/g);
 +
          svgW = vb[2];
 +
          svgH = vb[3];
 +
        },
 +
        next: function(t) {
 +
          var toRemove, i, n;
 +
          t /= 1000;
 +
          if(prevGroup){
 +
            if(prevGroup.children){
 +
              if(prevGroup.children.length){
 +
                toRemove = prevGroup;
 +
                n = toRemove.children.length;
 +
                for (i = n; i--; ) {
 +
                  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
 +
                }
 +
                TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
 +
              }
 +
            }
 +
          }
 +
 
 +
          var g = createRandomTesselation();
 +
          n = g.children.length;
 +
          for (i = n; i--; ) {
 +
          TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
 +
          }
 +
          svg.appendChild(g);
 +
          prevGroup = g;
 +
        }
 +
        }
 +
      })();
 +
      //////////////////////////////
 +
      // Gradients
 +
      //////////////////////////////
 +
      var gradients = (function() {
 +
        var grad1, grad2, showingGrad1;
 +
        // using colors from IBM Design Colors this time
 +
        var colors = [ // 14 colors - use 3-5 span
 +
        '#3c6df0', // ultramarine50
 +
        '#12a3b4', // aqua40
 +
        '#00a78f', // teal40
 +
        '#00aa5e', // green40
 +
        '#81b532', // lime30
 +
        '#e3bc13', // yellow20
 +
        '#ffb000', // gold20
 +
        '#fe8500', // orange30
 +
        '#fe6100', // peach40
 +
        '#e62325', // red50
 +
        '#dc267f', // magenta50
 +
        '#c22dd5', // purple50
 +
        '#9753e1', // violet50
 +
        '#5a3ec8'  // indigo60
 +
        ];
 +
        function assignRandomColors(gradObj) {
 +
        var rA = Math.floor(colors.length * Math.random());
 +
        var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
 +
        rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
 +
        gradObj.stopA.setAttribute('stop-color', colors[rA]);
 +
        gradObj.stopB.setAttribute('stop-color', colors[rB]);
 +
        }
 +
        return {
 +
        setup: function() {
 +
          showingGrad1 = false;
 +
          grad1 = {
 +
          stopA: document.getElementById('stop1a'),
 +
          stopB: document.getElementById('stop1b'),
 +
          rect:  document.getElementById('rect1')
 +
          };
 +
          grad2 = {
 +
          stopA: document.getElementById('stop2a'),
 +
          stopB: document.getElementById('stop2b'),
 +
          rect:  document.getElementById('rect2')
 +
          };
 +
          grad1.rect.style.opacity = 0;
 +
          grad2.rect.style.opacity = 0;
 +
        },
 +
        next: function(t) {
 +
          t /= 1000;
 +
          var show, hide;
 +
          if (showingGrad1) {
 +
          hide = grad1;
 +
          show = grad2;
 +
          } else {
 +
          hide = grad2;
 +
          show = grad1;
 +
          }
 +
          showingGrad1 = !showingGrad1;
 +
          TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
 +
          assignRandomColors(show);
 +
          TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
 +
        }
 +
        };
 +
      })();
 +
      //////////////////////////////
 +
      // Start
 +
      //////////////////////////////
 +
      bkgFunction();
 +
    </script>
 +
 
 +
 
 +
 
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
    <!---- Left Navigator ---->
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
 
  
.title1{
 
font-size:2.3rem;
 
text-align:center;
 
color:white;
 
display:block;
 
margin-top:10%;
 
margin-bottom:7%;
 
line-height:110%;
 
}
 
.title2{
 
color:white;
 
text-align:left;
 
font-size:2rem;
 
line-height:130%;
 
display:block;
 
width:100%;
 
}
 
.title3{
 
font-size:1.4rem;
 
color:white;
 
text-align:left !important;
 
display:block;
 
width:100%;
 
line-height:110%;
 
padding-left:2%;
 
}
 
.para1{
 
color:white;
 
text-align:justify !important;
 
align-items:flex-start;
 
line-height:140%;
 
font-size:1.3rem;
 
margin-bottom:50px !important;
 
width:100%;
 
margin:auto 0;
 
}
 
.para1 a{
 
text-decoration:underline !important;
 
color:white;
 
}
 
.para1 a:visited, .para1 a:active{
 
color:white;
 
}
 
.para1 a:hover{
 
color:rgba(96,255,249,1.00)!important;
 
}
 
.content1{
 
margin:7% auto;
 
}
 
.pic2{
 
width:150%;
 
}
 
.reverseDiv{
 
position:relative !important;
 
float:right !important;
 
}
 
  
 
.paraUl{
 
list-style-type:decimal !important;
 
list-style-position:outside;
 
padding-left:auto;
 
font-size:1rem;
 
}
 
.paraUl li{
 
padding-right:4% ;
 
}
 
 
 
#containerWithLeftNav{
 
display:block;
 
margin-left:25%;
 
}
 
.legend{
 
color:white;
 
text-align:center;
 
}
 
.legend>div{
 
width:100%;
 
text-align:justify!important;
 
font-size:1.1rem;
 
}
 
.legends{
 
margin:auto 15%;
 
}
 
  
 +
    <div id="pageContent">
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
    <!---- Content ---->
 +
    <!----------------------------------------------------------------------------------------------------------------------------------------->
 +
      <div class="members">
 +
        <div class="memberTitle theDivTitle">
 +
          Team PI
 +
        </div>
 +
        <div class="memberPhoto">
 +
          <div class="everyMem">
 +
            <div class="memImgDiv">
 +
              <img class="theImg" src="http://life.fudan.edu.cn/Assets/userfiles/sys_eb538c1c-65ff-4e82-8e6a-a1ef01127fed/images/shizi/%E5%8D%A2%E5%A4%A7%E5%84%92_%E5%89%AF%E6%9C%AC.jpg">
 +
            </div>
 +
            <div class="memberName">Daru Lu</div>
 +
          </div>
 +
          <div class="everyMem">
 +
            <div class="memImgDiv">
 +
              <img class="theImg" src="http://life.fudan.edu.cn/Assets/userfiles/sys_eb538c1c-65ff-4e82-8e6a-a1ef01127fed/images/shizi/%E8%94%A1%E4%BA%AE.jpg">
 +
            </div>
 +
            <div class="memberName">Liang Cai</div>
 +
          </div>
 +
        </div>
 +
      </div>
  
</style>
+
      <div class="members">
+
        <div class="memberTitle theDivTitle">
<style>
+
          Team Advisor
+
        </div>
@media only screen and (max-width:1200px){
+
        <div class="memberPhoto">
#mobileBar{
+
          <div class="everyMem">
margin-left:4%;
+
            <div class="memImgDiv">
}
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--photoDRR.gif">
.navLi{
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/d/de/T--Fudan-TSI--pictureDRR.gif">
font-size:18px;
+
            </div>
margin-top:3.5%;
+
            <div class="memberName">Rongrong Du</div>
}
+
          </div>
}
+
        </div>
+
      </div>
+
@media only screen and (max-width:1100px){
+
+
#navUl{
+
display:block;
+
float:right;
+
margin-top:0;
+
top:80px;
+
right:0;
+
background-color:rgba(0,0,0,0);
+
padding:0;
+
}
+
+
#mobileNav{
+
display:block;
+
}
+
+
#navImg{
+
display:none;
+
}
+
+
+
#navBar{
+
margin:0 1% 0 0;
+
padding-right:2%;
+
padding-left:1%;
+
position:relative;
+
display:none;
+
}
+
+
#mobileNav img{
+
display:inline-block;
+
margin:5px 0;
+
padding:0;
+
}
+
#mobileControl{
+
margin-top:8px;
+
}
+
  
.logo{
 
height:45px;
 
margin-top:7px;
 
}
 
.navLi{
 
display:block;
 
position:relative;
 
float:right;
 
clear:both;
 
white-space:nowrap;
 
text-align:right;
 
margin:0;
 
height:60px;
 
width:100%;
 
background-color:#00324a;
 
}
 
.navA{
 
display:block;
 
text-align:right;
 
position:relative;
 
float:right;
 
padding:20px 20px !important;
 
}
 
.n2{
 
display:none;
 
width:0;
 
position:relative;
 
float:left;
 
text-align:right;
 
}
 
.ul2{
 
background:none;
 
padding-top:0;
 
background-color:#00557b;
 
text-align:right;
 
display:block;
 
position:relative;
 
float:right;
 
right:100%;
 
transform:translateX(0%);
 
top:0;
 
transform:translateY(1%);
 
border-radius:0 0 0 10px;
 
}
 
.open{
 
display:block;
 
}
 
 
.title2{
 
font-size:1.8rem;
 
line-height:140%;
 
}
 
.para1{
 
font-size:1.3rem;
 
}
 
.pic2{
 
width:120%;
 
}
 
 
.highlightIcon{
 
margin:20% auto 10% auto;
 
}
 
.highlightTitle{
 
margin-bottom:15%;
 
}
 
  
+
      <div class="members">
}
+
        <div class="memberTitle theDivTitle">
+
          MEMBERS
+
        </div>
@media only screen and (max-width:992px){
+
        <div class="memberPhoto">
+
          <div class="everyMem">
#navUl{
+
            <div class="memImgDiv">
display:block;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/e/ef/T--Fudan-TSI--photoZCY.gif">
float:right;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--pictureZCY.gif">
margin:0;
+
            </div>
top:80px;
+
            <div class="memberName">Chuyue Zhang</div>
right:0;
+
            <div class="memberDes">Team leader</div>
}
+
          </div>
+
          <div class="everyMem">
#mobileNav{
+
            <div class="memImgDiv">
display:block;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/6/60/T--Fudan-TSI--photoLiYC.gif">
}
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/b/b2/T--Fudan-TSI--pictureLiYC.gif">
+
            </div>
#navImg{
+
            <div class="memberName">Yuchang Li</div>
display:none;
+
            <div class="memberDes">Team leader</div>
}
+
          </div>
+
          <div class="everyMem">
#navTeamName{
+
            <div class="memImgDiv">
display:none;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/8/84/T--Fudan-TSI--photoQY.gif">
}
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/a/a6/T--Fudan-TSI--pictureQY.gif">
+
            </div>
#navBar{
+
            <div class="memberName">Yi Qiao</div>
margin:0 1% 0 0 ;
+
            <div class="memberDes">Experiment master</div>
margin-right:2%;
+
          </div>
padding-right:1%;
+
          <div class="everyMem">
padding-left:1%;
+
            <div class="memImgDiv">
position:relative;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/9/92/T--Fudan-TSI--photoHYC.gif">
display:none;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/c/c3/T--Fudan-TSI--pictureHYC.gif">
}
+
            </div>
#mobileControl{
+
            <div class="memberName">Yuchao Huang</div>
margin-top:10px;
+
            <div class="memberDes">Modeling master</div>
}
+
          </div>
#mobileNav img{
+
          <div class="everyMem">
display:inline-block;
+
            <div class="memImgDiv">
margin:5px 0;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/5/5f/T--Fudan-TSI--photoZZX.gif">
padding:0;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/9/97/T--Fudan-TSI--pictureZZX.gif">
}
+
            </div>
.logo{
+
            <div class="memberName">Zixuan Zhang</div>
height:40px;
+
            <div class="memberDes">Art designer</div>
}
+
          </div>
.navLi{
+
          <div class="everyMem">
display:block;
+
            <div class="memImgDiv">
position:relative;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/4/44/T--Fudan-TSI--photoMXD.gif">
float:right;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/4/41/T--Fudan-TSI--pictureMXD.gif">
clear:both;
+
            </div>
white-space:nowrap;
+
            <div class="memberName">Xidan Miao</div>
text-align:right;
+
            <div class="memberDes">Experiments &amp; HP conductor</div>
height:60px;
+
          </div>
width:100%;
+
          <div class="everyMem">
}
+
            <div class="memImgDiv">
.navA{
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--photoLiuYC.gif">
display:block;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/2/24/T--Fudan-TSI--pictureLiuYC.gif">
text-align:right;
+
            </div>
position:relative;
+
            <div class="memberName">Yichen Liu</div>
float:right;
+
            <div class="memberDes">Experiments &amp; HP conductor</div>
font-size:15px;
+
          </div>
}
+
          <div class="everyMem">
.n2{
+
            <div class="memImgDiv">
display:none;
+
              <img class="memImg" src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--photoCJY.gif">
width:0;
+
              <img class="memPic" src="https://static.igem.org/mediawiki/2019/6/6e/T--Fudan-TSI--pictureCJY.gif">
position:relative;
+
            </div>
float:left;
+
            <div class="memberName">Jingyu Cao</div>
}
+
            <div class="memberDes">Experiment conductor</div>
.ul2{
+
          </div>
font-size:13px;
+
}
+
.open{
+
display:block;
+
}
+
+
  
+
        </div>
#animation_container{
+
      </div>
display:none;
+
      <style>
}
+
        .members{
#teamLogo{
+
          margin-bottom:3vw;
display:block;
+
        }
}
+
      .theDivTitle{
 +
          color: white;
 +
          font-family: "Verlag Book",Arial,Helvetica;
 +
          font-weight: 400;
 +
          font-size: 3vw;
 +
          padding:0;
 +
          margin: 8vw 0 3vw 0;
 +
        position: relative;
 +
        text-align: center;
 +
        }
 +
      .theDivTitle:after {
 +
        content: "";
 +
        position: absolute;
 +
        width: 4vw;
 +
        height: 0.06vw;
 +
        background-color: white;
 +
        top:3.4vw;
 +
        left: 50%;
 +
        transform: translateX(-50%);
 +
      }
 +
        .memberTitle div{
 +
          padding: 3vw 0 0 0;
 +
          color: white;
 +
          font-family:Jura;
 +
          font-size: 1.4vw;
 +
        }
 +
        .memberPhoto{
 +
          text-align: center;
 +
        }
 +
        .everyMem{
 +
          display: inline-block;
 +
          width:15vw;
 +
          position: relative;
 +
          margin:2vw 3vw;
 +
        }
 +
        .memImgDiv{
 +
          width: 100%;
 +
          height: 20vw;
 +
          position: relative;
 +
          overflow: hidden;
 +
        }
 +
        .memImgDiv img{
 +
          position: absolute;
 +
          transition: all 1s;
 +
          transform: translateY(-10%);
 +
        }
 +
        .memImgDiv .memImg{
 +
          width: 100%;
 +
          left:0;
 +
        }
 +
        .theImg{
 +
          left:0;
 +
          width:100%;
 +
          top:2vw;
 +
        }
 +
        .memImgDiv .memPic{
 +
          width: 100%;
 +
          vertical-align:middle;
 +
          left: 0;
 +
          transform: rotateY(180deg);
 +
        }
 +
        .memImgDiv:hover .memImg:not(.isor){
 +
          transform: rotateY(180deg);
 +
        }
 +
        .memImgDiv:hover .memPic{
 +
          transform: rotateY(360deg);
 +
        }
 +
        img.memImg{
 +
          z-index: 5;
 +
          backface-visibility: hidden;
 +
          top:2vw;
 +
        }
 +
        img.memPic{
 +
          backface-visibility:hidden;
 +
        }
 +
        .memberName{
 +
          font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
 +
          font-size: 2vw;
 +
          margin: 1vw 0 1vw 0;
 +
          color:white;
 +
          text-align:center;
 +
        }
 +
        .memberDes{
 +
          font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 +
          font-size: 1.5vw;
 +
          color: rgba(124,124,124,1);
 +
          margin: 1vw 0 1vw 0;
 +
          position: absolute;
 +
          top:14.8vw;
 +
          width: 12vw;
 +
          left:1.5vw;
 +
          text-align: center;
 +
          color:white;
 +
        }
 +
      </style>
  
 
.title2{
 
font-size:1.5rem;
 
}
 
.para1{
 
font-size:1.2rem;
 
}
 
.pic2{
 
width:100%;
 
}
 
  
+
<div class="container"><div class="row" id="Acknowledge">
}
+
          <div class="row para1">
+
            <div class="row">
+
              <div class="col col-lg-12">
@media only screen and (max-width:768px){
+
                <hr style="border: 2px solid white">
.col-md-4{
+
                  <b>After nearly one year's hardworking, here we express the most sincere thanks to those who have offered to help us generously. </b> Listed by alphabetical order of surnames.
clear:both;
+
                </br>
}
+
              </div>
.col-md-8{
+
            </div>
clear:both;
+
          </div>
}
+
.pic2{
+
margin-bottom:10%;
+
width:80%;
+
}
+
.title2{
+
font-size:1.2rem;
+
}
+
.para1{
+
font-size:1rem;
+
}
+
.pic2{
+
width:80%;
+
}
+
#sponser img {
+
width:60%;
+
}
+
+
#containerWithLeftNav{
+
margin-left:auto;
+
}
+
+
}
+
+
</style>
+
  
 +
          <div class="row para1">
 +
            <div class="row">
 +
              <div class="col col-lg-12">
 +
                <br>
 +
                  We thank <a href="https://after.igem.org/page/ambassador-program" target="_blank">2019 iGEM Asia Ambassador</a> <a href="mailto:dorothyzhang@igem.org"><i>Dorothy Zhang</i></a> for giving us valuable suggestions on human practices.
 +
                </br>
 +
                <br>
 +
                  We thank Professor <a href=http://utw10252.utweb.utexas.edu><i>Hal S. Alper</i></a> for discussing with us about reverse transcription and mutation system via email and face-to-face meeting.
 +
                </br>
 +
                <br>
 +
                  We thank our advisor <a href=https://2018.igem.org/Team:Fudan/Team><i>Rongrong Du</i></a> especially for her constant attention and guidance to our team and bringing joy to us as a source of funny stickers (/doge).
 +
                </br>
 +
                <br>
 +
                  We thank Professor <a href=http://life.fudan.edu.cn/Data/View/1475><i>Qiang Huang</i></a> for recommending us to use MATLAB instead of python in case we encounter some unexpected errors and giving us confidence that we can model the processes successfully.
 +
                </br>
 +
                <br>
 +
                  We thank Li Zhou and Jingyi Hu for helping us take care of our bacteria in the early morning and preparing the reagents we need.
 +
                </br>
 +
                <br>
 +
                  We thank Haotian Guo for incisive comments on our project design and posters.
 +
                </br>
 +
                <br>
 +
                  We thank Professor <a href=http://life.fudan.edu.cn/Data/View/1457><i>Jiang Zhong</i></a>, Professor <a href=http://life.fudan.edu.cn/Data/View/1391><i>Ting Ni</i></a>, Professor <a href=http://life.fudan.edu.cn/Data/View/1377><i>Boxun Lu</i></a>, Professor <a href=http://life.fudan.edu.cn/Data/View/1335><i>Xiaoming Ding</i></a>, and Professor <a href=http://hupi.fudan.edu.cn/people/anyu><i>Yu An</i></a> for giving us valuable suggestions and feedbacks at different stages of the project.
 +
                </br>
 +
                <br>
 +
                  We thank Professor <a href=http://life.fudan.edu.cn/Data/View/2509><i>Chen Ling</i></a>, Professor <a href=http://life.fudan.edu.cn/Data/View/1455><i>Binglian Zheng</i></a>, Professor <a href=http://life.fudan.edu.cn/Data/View/1822><i>Chen Ding</i></a>, and Professor <a href=http://life.fudan.edu.cn/Data/View/1413><i>Jingwen Wang</i></a> for their efforts to understand our project and giving advice based on what they are familiar with.
 +
                </br>
 +
                <br>
 +
                  We thank Yi Song for her patient guidance and stage experience which make us better speakers in front of the audience.
 +
                </br>
 +
                <br>
 +
                  We thank <a href=https://2017.igem.org/Team:Fudan/Team><i>Yiheng Wang</i></a> for giving us suggestions at the beginning of our modeling.
 +
                </br>
 +
                <br>
 +
                  We thank <a href=https://2017.igem.org/Team:Fudan/Team><i>Zijie Yang</i></a> for proposing suggestions on details of our experiments.
 +
                </br>
 +
                <br>
 +
                  We thank the Shanghai Jiuqian Volunteer Club and the Club of FDU Yuanzheng Society for helping rent the space and connecting kids for our educational human practice.
 +
                </br>
 +
              </div>
 +
            </div>
 +
          </div>
  
+
<div class="row">
+
                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/6/63/T--Fudan-TSI--Hal_S_Alper.png" width=100px;>
 +
                                    <span style="color:white">Hal S Alper</span>
 +
                                </div>
 +
                                                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/8/8f/T--Fudan-TSI--Yu_An.png" width=100px;>
 +
                                    <span style="color:white">Yu An</span>
 +
                                </div>
 +
        <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/1/1f/T--Fudan-TSI--Chen_Ding.png" width=100px;>
 +
                                    <span style="color:white">Chen Ding</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/6/61/T--Fudan-TSI--Xiaoming_Ding.png" width=100px;>
 +
                                    <span style="color:white">Xiaoming Ding</span>
 +
                                </div>
 +
        <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/2/28/T--Fudan-TSI--Haotian_Guo.png" width=100px;>
 +
                                    <span style="color:white">Haotian Guo</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/d/da/T--Fudan-TSI--Qiang_Huang.png" width=100px;>
 +
                                    <span style="color:white">Qiang Huang</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/4/49/T--Fudan-TSI--Jingyi_Hu.png" width=100px;>
 +
                                    <span style="color:white">Jingyi Hu</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/b/bc/T--Fudan-TSI--Chen_Ling.png" width=100px;>
 +
                                    <span style="color:white">Chen Ling</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/5/50/T--Fudan-TSI--Boxun_Lu.png" width=100px;>
 +
                                    <span style="color:white">Boxun Lu</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/8/8f/T--Fudan-TSI--Ting_Ni.png" width=100px;>
 +
                                    <span style="color:white">Ting Ni</span>
 +
                                </div>
 +
        <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/6/6a/T--Fudan-TSI--Yi_Song.png" width=100px;>
 +
                                    <span style="color:white">Yi Song</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/1/1d/T--Fudan-TSI--Jingwen_Wang.png" width=100px;>
 +
                                    <span style="color:white">Jingwen Wang</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/d/d0/T--Fudan-TSI--Yiheng_Wang.png" width=100px;>
 +
                                    <span style="color:white">Yiheng Wang</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/f/f1/T--Fudan-TSI--Zijie_Yang.png" width=100px;>
 +
                                    <span style="color:white">Zijie Yang</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/c/cf/T--Fudan-TSI--Binglian_Zheng.png" width=100px;>
 +
                                    <span style="color:white">Binglian Zheng</span>
 +
                                </div>
 +
        <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/8/8a/T--Fudan-TSI--Jiang_Zhong.png" width=100px;>
 +
                                    <span style="color:white">Jiang Zhong</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/1/12/T--Fudan-TSI--Jiuqian_Volunteer_Club.png" width=100px;>
 +
                                    <span style="color:white">Jiuqian Volunteer Club</span>
 +
                                </div>
 +
                                <div class="col">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Fudan-TSI--Yuanzheng_Society.png" width=100px;>
 +
                                    <span style="color:white">Yuanzheng Society</span>
 +
                                </div>
  
 +
      </div></div><!-- row container -->
 +
<p><br/><br/></p>
 +
<p><br/><br/></p>
 +
    </div>
  
<style>
 
#footContainer{
 
width:90%;
 
}
 
#FudanFooter{
 
margin:auto 0;
 
width:100%;
 
padding:3% 0;
 
}
 
#FudanFooter #usefulLinks {
 
color: #cacaca;
 
padding-left: 1rem;
 
}
 
  
#FudanFooter #usefulLinks ul {
 
font-size: 13px;
 
line-height: 14px;
 
border-top: solid 2px;
 
color: inherit;
 
text-decoration: none;
 
padding-top: 5px;
 
margin:0;
 
}
 
  
#FudanFooter #usefulLinks div {
+
    <!----------------------------------------------------------------------------------------------------------------------------------------->
color: #cacaca;
+
    <!---- Foot ---->
}
+
    <!----------------------------------------------------------------------------------------------------------------------------------------->
  
#FudanFooter #usefulLinks div:hover {
 
color: white;
 
}
 
  
#FudanFooter #usefulLinks a {
 
color: inherit;
 
}
 
  
#FudanFooter #usefulLinks a:hover {
+
  </div>
text-decoration: underline;
+
}
+
  
#FudanFooter #usefulLinks div.active,
 
#FudanFooter #usefulLinks div.active a {
 
color: white;
 
}
 
  
#FudanFooter #usefulLinks div.active ul {
+
  <script>
border-top: solid white 2px;
+
}
+
  
#FudanFooter #usefulLinks li {
+
    var winHeight=$(window).height();
padding: 3px 0 6px 3px;
+
    var winWidth=$(window).width();
list-style:none;
+
    var pagePosition=$("#pageContent").offset().top+90;
}
+
    var navHeight=$(".leftNav").height();
 +
    var footerHeight=$("#FudanFooter").height();
 +
    var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
 +
    $(".leftNav").css({"position":"absolute","top":pagePosition});
 +
    $(window).resize(function(){
 +
        var winHeight=$(window).height();
 +
        var winWidth=$(window).width();
 +
        var topDistance=$(window).scrollTop()+0.25*winHeight;
 +
        var navHeight=$(".leftNav").height();
 +
        var footerHeight=$("#FudanFooter").height();
 +
        var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
 +
        var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
      if (leftNavFromTop<0.25*winHeight){
 +
        if(topDistance<maxTopDistance){
 +
          $(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 +
        }
 +
        else{
 +
          $(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
        }
 +
      }
 +
      else{
 +
        $(".leftNav").css({"position":"absolute","top":pagePosition});
 +
      }
 +
    });
  
#usefulLinks span {
+
    $(window).scroll(function(){
font-size: 20px;
+
      var winHeight=$(window).height();
}
+
      var winWidth=$(window).width();
+
      var leftNavFromTop=pagePosition-$(window).scrollTop();
 +
      var topDistance=$(window).scrollTop()+0.25*winHeight;
 +
      if (leftNavFromTop<0.25*winHeight){
 +
        if(topDistance<maxTopDistance){
 +
          $(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 +
        }
 +
        else{
 +
          $(".leftNav").css({"position":"absolute","top":maxTopDistance});
 +
        };
 +
      }
 +
      else{
 +
        $(".leftNav").css({"position":"absolute","top":pagePosition});
 +
      }
 +
    });
  
#FudanFooter div.footer-copyright {
+
    $(".leftNav a").click(function () {
font-size: 13px;
+
      $('html, body').animate({
line-height: 15px;
+
      scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
}
+
    }, 500);
.footerUl{
+
    return false;
margin:2% 4%;
+
    });
}
+
</style>
+
  
<script>
 
 
$(document).ready(function(){
 
 
 
var winWidth=$(window).width();
 
 
if (winWidth>1100){
 
$(".navA").mouseenter(function(){
 
$(this).parent().find(".ul2").stop().fadeIn(400);
 
});
 
$(".navLi").mouseleave(function(){
 
$(this).find(".ul2").stop().fadeOut(400);
 
});
 
 
 
}
 
else{
 
$(".navA:not(.noSubmenu)").removeAttr("href");
 
$("#mobileNav").click(function(){
 
$("#navBar").toggle();
 
});
 
$(document).click(function(event){
 
var m = $("#mobileNav,#navBar");
 
if (!m.is(event.target)){
 
if (m.has(event.target).length===0){
 
$("#navBar").hide();
 
$(".open").parent().find(".navA").css("color","white");
 
$(".open").removeClass("open");
 
}
 
  
}
+
    $(window).scroll(function(){
});
+
$(".navLi").click(function(){
+
if ($(this).find(".n2").hasClass("open")){
+
$(".open").parent().find(".navA").css("color","white");
+
$(this).find(".n2").removeClass("open");
+
}
+
else{
+
$(".open").parent().find(".navA").css("color","white");
+
$(".open").removeClass("open");
+
$(this).find(".n2").addClass("open");
+
$(this).find(".navA").css("color","#7dded4");
+
}
+
});
+
}
+
+
+
+
+
+
+
});
+
+
+
</script>
+
+
+
+
<div id="global_wrapper">
+
<div id="mobileNav">
+
+
<div id="mobileLogo"><img src="https://static.igem.org/mediawiki/2019/5/55/T--Fudan-TSI--logoTeam.gif" class="logo"></div>
+
<div id="mobileControl"><img src="https://static.igem.org/mediawiki/2019/thumb/a/ae/T--Fudan-TSI--mobileCtrl.gif/683px-T--Fudan-TSI--mobileCtrl.gif" id="mobileCtrl"></div>
+
+
</div>
+
+
<ul id="navUl">
+
+
<li id="navImg">
+
<img src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--HomepageLogo.gif" class="logo">
+
+
</li>
+
+
+
<ul id="navBar">
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI">Home</a></li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Description">Project</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Description">Description</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Design">Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Applied_Design" style="white-space:nowrap">Applied Design</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Experiments">Experiment</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Results">Results</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">Reverse Transcription</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Measurement">Measurement</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Notebook">Notebook</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Model">Model</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Model">Modeling</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Software">Software</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Hardware">Hardware</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">Parts</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">Basic Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">Composite Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Improve">Improved Parts</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">Part Collection</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Human Practices</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">Education &amp; <br />Public Engagement</a></li>
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">Integrated <br />Human Practice</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">Collaboration</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Safety">Safety</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi">
+
<a class="navA" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team</a>
+
<div class="n2">
+
<ul class="ul2">
+
<li class="li2"><a class="navA2" style="white-space:nowrap;" href="https://2019.igem.org/Team:Fudan-TSI/Team">Team Members</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Attributions">Attribution</a></li>
+
<li class="li2"><a class="navA2" href="https://2019.igem.org/Team:Fudan-TSI/Acknowledgment">Acknowledgement</a></li>
+
</ul>
+
</div>
+
</li>
+
+
<li class="navLi"><a class="navA noSubmenu" href="https://2019.igem.org/Team:Fudan-TSI/Judging">Judging</a></li>
+
+
</ul>
+
+
+
</ul>
+
  
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
      var currentScroll=$(this).scrollTop();
<!---- Cover ---->
+
      var firstHeight=$("#pageCover").height();
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
      var footerFromTop=$("#FudanFooter").offset().top;
+
      var $currentSection=null;
<div id="pageCover">
+
      $(".leftNavA").each(function(){
+
        $('.leftNavA').removeClass('menu-active');
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&amp;action=raw&amp;ctype=text/javascript"></script>
+
        var hePoint=$($(this).attr("href"));
<script>
+
        var divPosition=hePoint.offset().top-$("#navUl").height()-50;
$(document).ready(function($){
+
        if (divPosition-1<currentScroll){
var $root = $('html, body');
+
          $currentSection=$(this);
$('a[href^="#"]').click(function() {
+
        }
var href = $.attr(this, 'href');
+
        if (currentScroll>firstHeight){
$root.animate({
+
          $(".leftNavA").removeClass("menu-active");
scrollTop: $(href).offset().top
+
          $currentSection.addClass("menu-active");
}, 1000, function () {
+
        }
window.location.hash = href;
+
      });
});
+
return false;
+
});
+
})
+
</script>
+
+
<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
+
  <defs>
+
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
+
  <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
+
</linearGradient>
+
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
+
  <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
+
  <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
+
</linearGradient>
+
  </defs>
+
  <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
+
  <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
+
</svg>
+
<div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/a/aa/T--Fudan-TSI--coverTeam.gif"></div>
+
</div>
+
<style>
+
#pageCover{
+
width:100%;
+
margin:0;
+
padding-top:80px;
+
}
+
#demoCover{
+
width:100vw;
+
height:80vh;
+
position:absolute;
+
background-color:rgba(76,8,110,0.5);
+
top:70px;
+
left:0;
+
text-align:center;
+
}
+
#coverPic{
+
width:550px;
+
margin:20vh auto;
+
}
+
#demo{
+
width:100vw;
+
height:70vh;
+
position:relative;
+
}
+
#demo svg {
+
  width: 100%;
+
  height: 100%;
+
  position: fixed;
+
}
+
#demo svg g {
+
  mix-blend-mode: lighten;
+
}
+
#demo svg polygon {
+
  stroke: none;
+
  fill: white;
+
}
+
+
@media only screen and (max-width:1100px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
height:30vh;
+
}
+
#demo{
+
height:30vh;
+
}
+
#coverPic{
+
width:500px;
+
margin:7vh auto;
+
}
+
}
+
@media only screen and (max-width:992px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:500px;
+
margin:6vh auto;
+
}
+
}
+
@media only screen and (max-width:768px){
+
#pageCover{
+
padding-top:55px;
+
}
+
#demoCover{
+
top:55px;
+
}
+
#coverPic{
+
width:400px;
+
margin:8vh auto;
+
}
+
}
+
@media only screen and (max-width:500px){
+
#coverPic{
+
width:200px;
+
margin:8vh auto;
+
}
+
}
+
</style>
+
<script>
+
//////////////////////////////
+
// Demo Functions
+
//////////////////////////////
+
function bkgFunction(showStats) {
+
  // stats
+
  if (showStats) {
+
var stats = new Stats();
+
stats.domElement.style.position = 'absolute';
+
stats.domElement.style.left = '0';
+
stats.domElement.style.top = '0';
+
document.body.appendChild(stats.domElement);
+
requestAnimationFrame(function updateStats(){
+
  stats.update();
+
  requestAnimationFrame(updateStats);
+
});
+
  }
+
  // init
+
  var svg = document.getElementById('demo');
+
  tesselation.setup(svg);
+
  gradients.setup();
+
  var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
+
  function playNextTransition() {
+
tesselation.next(transitionDuration);
+
gradients.next(transitionDuration);
+
  };
+
  function tick(time) {
+
if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
+
  lastTransitionAt = time;
+
  playNextTransition();
+
}
+
window.requestAnimationFrame(tick);
+
  }
+
  window.requestAnimationFrame(tick);
+
}
+
//////////////////////////////
+
// Delaunay Triangulation
+
//////////////////////////////
+
var calcDelaunayTriangulation = (function() {
+
  var EPSILON = 1.0 / 1048576.0;
+
  function getSuperT(vertices) {
+
var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
+
xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
+
i, xDiff, yDiff, maxDiff, xCenter, yCenter;
+
for(i = vertices.length; i--; ) {
+
  if(vertices[i][0] < xMin) xMin = vertices[i][0];
+
  if(vertices[i][0] > xMax) xMax = vertices[i][0];
+
  if(vertices[i][1] < yMin) yMin = vertices[i][1];
+
  if(vertices[i][1] > yMax) yMax = vertices[i][1];
+
}
+
xDiff = xMax - xMin;
+
yDiff = yMax - yMin;
+
maxDiff = Math.max(xDiff, yDiff);
+
xCenter = xMin + xDiff * 0.5;
+
yCenter = yMin + yDiff * 0.5;
+
return [
+
  [xCenter - 20 * maxDiff, yCenter - maxDiff],
+
  [xCenter, yCenter + 20 * maxDiff],
+
  [xCenter + 20 * maxDiff, yCenter - maxDiff]
+
];
+
  }
+
  function circumcircle(vertices, i, j, k) {
+
var xI = vertices[i][0], yI = vertices[i][1],
+
xJ = vertices[j][0], yJ = vertices[j][1],
+
xK = vertices[k][0], yK = vertices[k][1],
+
yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
+
xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
+
// bail condition
+
if(yDiffIJ < EPSILON){
+
if (yDiffJK < EPSILON){
+
throw new Error("Can't get circumcircle since all 3 points are y-aligned");
+
}
+
}
+
+
+
// calc circumcircle center x/y, radius
+
m1  = -((xJ - xI) / (yJ - yI));
+
m2  = -((xK - xJ) / (yK - yJ));
+
xMidIJ = (xI + xJ) / 2.0;
+
xMidJK = (xJ + xK) / 2.0;
+
yMidIJ = (yI + yJ) / 2.0;
+
yMidJK = (yJ + yK) / 2.0;
+
xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
+
  (yDiffJK < EPSILON) ? xMidJK :
+
  (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
+
yCenter  = (yDiffIJ > yDiffJK) ?
+
  m1 * (xCenter - xMidIJ) + yMidIJ :
+
  m2 * (xCenter - xMidJK) + yMidJK;
+
xDiff = xJ - xCenter;
+
yDiff = yJ - yCenter;
+
// return
+
return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
+
  }
+
  function dedupeEdges(edges) {
+
var i, j, a, b, m, n;
+
for(j = edges.length; j; ) {
+
  b = edges[--j]; a = edges[--j];
+
  for(i = j; i; ) {
+
n = edges[--i]; m = edges[--i];
+
if(a === m){
+
  if (b===n){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
if(a === n){
+
  if (b===m){
+
  edges.splice(j, 2); edges.splice(i, 2);
+
  break;
+
  }  
+
}
+
  }
+
}
+
  }
+
  return function(vertices) {
+
var n = vertices.length,
+
i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
+
// bail if too few / too many verts
+
if(n < 3 || n > 2000)
+
  return [];
+
// copy verts and sort indices by x-position
+
vertices = vertices.slice(0);
+
indices = new Array(n);
+
for(i = n; i--; )
+
  indices[i] = i;
+
indices.sort(function(i, j) {
+
  return vertices[j][0] - vertices[i][0];
+
});
+
// supertriangle
+
st = getSuperT(vertices);
+
vertices.push(st[0], st[1], st[2]);
+
// init candidates/locked tris list
+
candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
+
locked = [];
+
edges = [];
+
// scan left to right
+
for(i = indices.length; i--; edges.length = 0) {
+
  c = indices[i];
+
  // check candidates tris against point
+
  for(j = candidates.length; j--; ) {
+
// lock tri if point to right of circumcirc
+
dx = vertices[c][0] - candidates[j].x;
+
if (dx > 0.0){
+
if(dx * dx > candidates[j].r){
+
locked.push(candidates[j]);
+
  candidates.splice(j, 1);
+
  continue;
+
}
+
}
+
 
+
 
+
// point outside circumcirc = leave candidates
+
dy = vertices[c][1] - candidates[j].y;
+
if(dx * dx + dy * dy - candidates[j].r > EPSILON)
+
  continue;
+
// point inside circumcirc = break apart, save edges
+
edges.push(
+
  candidates[j].i, candidates[j].j,
+
  candidates[j].j, candidates[j].k,
+
  candidates[j].k, candidates[j].i
+
);
+
candidates.splice(j, 1);
+
  }
+
  // new candidates from broken edges
+
  dedupeEdges(edges);
+
  for(j = edges.length; j; ) {
+
b = edges[--j];
+
a = edges[--j];
+
candidates.push(circumcircle(vertices, a, b, c));
+
  }
+
}
+
// close candidates tris, remove tris touching supertri verts
+
for(i = candidates.length; i--; )
+
  locked.push(candidates[i]);
+
candidates.length = 0;
+
for(i = locked.length; i--; )
+
  if(locked[i].i < n){
+
  if(locked[i].j < n){
+
  if(locked[i].k < n){
+
  candidates.push(locked[i].i, locked[i].j, locked[i].k);
+
  }
+
  }
+
  }
+
+
+
// done
+
return candidates;
+
  };
+
})();
+
var tesselation = (function() {
+
  var svg, svgW, svgH, prevGroup;
+
  function createRandomTesselation() {
+
var wW = window.innerWidth;
+
var wH = window.innerHeight;
+
var gridSpacing = 250, scatterAmount = 0.75;
+
var gridSize, i, x, y;
+
if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
+
  gridSize = gridSpacing * svgW / wW;
+
} else { // window taller than svg = use height for gridSize
+
  gridSize = gridSpacing * svgH / wH;
+
}
+
var vertices = [];
+
var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
+
for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
+
  for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
+
vertices.push(
+
  [
+
xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
+
yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
+
  ]
+
);
+
  }
+
}
+
var triangles = calcDelaunayTriangulation(vertices);
+
var group = document.createElementNS('http://www.w3.org/2000/svg','g');
+
var polygon;
+
for(i = triangles.length; i; ) {
+
  polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
+
  polygon.setAttribute('points',
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
+
vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
+
  );
+
  group.appendChild(polygon);
+
}
+
return group;
+
  }
+
  return {
+
setup: function(svgElement) {
+
  svg = svgElement;
+
  var vb = svg.getAttribute('viewBox').split(/\D/g);
+
  svgW = vb[2];
+
  svgH = vb[3];
+
},
+
next: function(t) {
+
  var toRemove, i, n;
+
  t /= 1000;
+
if(prevGroup){
+
if(prevGroup.children){
+
if(prevGroup.children.length){
+
toRemove = prevGroup;
+
n = toRemove.children.length;
+
for (i = n; i--; ) {
+
  TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
+
}
+
TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
+
}
+
}
+
}
+
+
  var g = createRandomTesselation();
+
  n = g.children.length;
+
  for (i = n; i--; ) {
+
TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
+
  }
+
  svg.appendChild(g);
+
  prevGroup = g;
+
}
+
  }
+
})();
+
//////////////////////////////
+
// Gradients
+
//////////////////////////////
+
var gradients = (function() {
+
  var grad1, grad2, showingGrad1;
+
  // using colors from IBM Design Colors this time
+
  var colors = [ // 14 colors - use 3-5 span
+
'#3c6df0', // ultramarine50
+
'#12a3b4', // aqua40
+
'#00a78f', // teal40
+
'#00aa5e', // green40
+
'#81b532', // lime30
+
'#e3bc13', // yellow20
+
'#ffb000', // gold20
+
'#fe8500', // orange30
+
'#fe6100', // peach40
+
'#e62325', // red50
+
'#dc267f', // magenta50
+
'#c22dd5', // purple50
+
'#9753e1', // violet50
+
'#5a3ec8'  // indigo60
+
  ];
+
  function assignRandomColors(gradObj) {
+
var rA = Math.floor(colors.length * Math.random());
+
var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
+
rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
+
gradObj.stopA.setAttribute('stop-color', colors[rA]);
+
gradObj.stopB.setAttribute('stop-color', colors[rB]);
+
  }
+
  return {
+
setup: function() {
+
  showingGrad1 = false;
+
  grad1 = {
+
stopA: document.getElementById('stop1a'),
+
stopB: document.getElementById('stop1b'),
+
rect:  document.getElementById('rect1')
+
  };
+
  grad2 = {
+
stopA: document.getElementById('stop2a'),
+
stopB: document.getElementById('stop2b'),
+
rect:  document.getElementById('rect2')
+
  };
+
  grad1.rect.style.opacity = 0;
+
  grad2.rect.style.opacity = 0;
+
},
+
next: function(t) {
+
  t /= 1000;
+
  var show, hide;
+
  if (showingGrad1) {
+
hide = grad1;
+
show = grad2;
+
  } else {
+
hide = grad2;
+
show = grad1;
+
  }
+
  showingGrad1 = !showingGrad1;
+
  TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
+
  assignRandomColors(show);
+
  TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
+
}
+
  };
+
})();
+
//////////////////////////////
+
// Start
+
//////////////////////////////
+
bkgFunction();
+
</script>
+
+
  
 +
      var $currentSection2;
 +
      $('.leftNavA2').each(function(){
 +
        $('.leftNavA2').removeClass('menu-active2');
 +
        var hePoint2=$($(this).attr("href"));
 +
        var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
 +
        if (divPosition2-1<currentScroll){
 +
          $currentSection2=$(this);
 +
        }
 +
        if (currentScroll>firstHeight){
 +
          $('.leftNavA2').removeClass('menu-active2');
 +
          $currentSection2.addClass('menu-active2');
 +
        }
 +
      });
 +
    });
  
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
  </script>
<!---- Left Navigator ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
  
  
  
+
  <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&action=raw&ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div id="pageContent">
+
  <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&action=raw&ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<!---- Content ---->
+
<!----------------------------------------------------------------------------------------------------------------------------------------->
+
<div class="members">
+
<div class="memberTitle theDivTitle">
+
Team PI
+
</div>
+
<div class="memberPhoto">
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="theImg" src="https://static.igem.org/mediawiki/2019/1/1b/T--Fudan-TSI--LC.gif">
+
</div>
+
<div class="memberName">Liang Cai</div>
+
</div>
+
</div>
+
</div>
+
+
<div class="members">
+
<div class="memberTitle theDivTitle">
+
Team Advisor
+
</div>
+
<div class="memberPhoto">
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--photoDRR.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/d/de/T--Fudan-TSI--pictureDRR.gif">
+
</div>
+
<div class="memberName">Rongrong Du</div>
+
</div>
+
</div>
+
</div>
+
+
+
<div class="members">
+
<div class="memberTitle theDivTitle">
+
MEMBERS
+
</div>
+
<div class="memberPhoto">
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/e/ef/T--Fudan-TSI--photoZCY.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/d/d3/T--Fudan-TSI--pictureZCY.gif">
+
</div>
+
<div class="memberName">Chuyue Zhang</div>
+
<div class="memberDes">Team leader</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/6/60/T--Fudan-TSI--photoLiYC.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/b/b2/T--Fudan-TSI--pictureLiYC.gif">
+
</div>
+
<div class="memberName">Yuchang Li</div>
+
<div class="memberDes">Team leader</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/8/84/T--Fudan-TSI--photoQY.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/a/a6/T--Fudan-TSI--pictureQY.gif">
+
</div>
+
<div class="memberName">Yi Qiao</div>
+
<div class="memberDes">Experiment master</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/9/92/T--Fudan-TSI--photoHYC.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/c/c3/T--Fudan-TSI--pictureHYC.gif">
+
</div>
+
<div class="memberName">Yuchao Huang</div>
+
<div class="memberDes">Modeling master</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/5/5f/T--Fudan-TSI--photoZZX.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/9/97/T--Fudan-TSI--pictureZZX.gif">
+
</div>
+
<div class="memberName">Zixuan Zhang</div>
+
<div class="memberDes">Art designer</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/4/44/T--Fudan-TSI--photoMXD.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/4/41/T--Fudan-TSI--pictureMXD.gif">
+
</div>
+
<div class="memberName">Xidan Miao</div>
+
<div class="memberDes">Experiment &amp; HP conductor</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/2/2f/T--Fudan-TSI--photoLiuYC.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/2/24/T--Fudan-TSI--pictureLiuYC.gif">
+
</div>
+
<div class="memberName">Yichen Liu</div>
+
<div class="memberDes">Experiments &amp; HP conductor</div>
+
</div>
+
<div class="everyMem">
+
<div class="memImgDiv">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2019/4/43/T--Fudan-TSI--photoCJY.gif">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2019/6/6e/T--Fudan-TSI--pictureCJY.gif">
+
</div>
+
<div class="memberName">Jingyu Cao</div>
+
<div class="memberDes">Experiment conductor</div>
+
</div>
+
+
</div>
+
</div>
+
<style>
+
.members{
+
margin-bottom:3vw;
+
}
+
.theDivTitle{
+
color: white;
+
font-family: "Verlag Book",Arial,Helvetica;
+
font-weight: 400;
+
font-size: 3vw;
+
padding:0;
+
margin: 8vw 0 3vw 0;
+
position: relative;
+
text-align: center;
+
}
+
.theDivTitle:after {
+
content: "";
+
position: absolute;
+
width: 4vw;
+
height: 0.06vw;
+
background-color: white;
+
top:3.4vw;
+
left: 50%;
+
transform: translateX(-50%);
+
}
+
.memberTitle div{
+
padding: 3vw 0 0 0;
+
color: white;
+
font-family:Jura;
+
font-size: 1.4vw;
+
}
+
.memberPhoto{
+
text-align: center;
+
}
+
.everyMem{
+
display: inline-block;
+
width:15vw;
+
position: relative;
+
margin:2vw 3vw;
+
}
+
.memImgDiv{
+
width: 100%;
+
height: 20vw;
+
position: relative;
+
overflow: hidden;
+
}
+
.memImgDiv img{
+
position: absolute;
+
transition: all 1s;
+
transform: translateY(-10%);
+
}
+
.memImgDiv .memImg{
+
width: 100%;
+
left:0;
+
}
+
.theImg{
+
left:0;
+
width:100%;
+
top:2vw;
+
}
+
.memImgDiv .memPic{
+
width: 100%;
+
vertical-align:middle;
+
left: 0;
+
transform: rotateY(180deg);
+
}
+
.memImgDiv:hover .memImg:not(.isor){
+
transform: rotateY(180deg);
+
}
+
.memImgDiv:hover .memPic{
+
transform: rotateY(360deg);
+
}
+
img.memImg{
+
z-index: 5;
+
backface-visibility: hidden;
+
top:2vw;
+
}
+
img.memPic{
+
backface-visibility:hidden;
+
}
+
.memberName{
+
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
+
font-size: 2vw;
+
margin: 1vw 0 1vw 0;
+
color:white;
+
text-align:center;
+
}
+
.memberDes{
+
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
+
font-size: 1.5vw;
+
color: rgba(124,124,124,1);
+
margin: 1vw 0 1vw 0;
+
position: absolute;
+
top:14.8vw;
+
width: 12vw;
+
left:1.5vw;
+
text-align: center;
+
color:white;
+
}
+
</style>
+
  
  
 
</div>
 
 
 
 
<!----------------------------------------------------------------------------------------------------------------------------------------->
 
<!---- Foot ---->
 
<!----------------------------------------------------------------------------------------------------------------------------------------->
 
 
<footer id="FudanFooter" class="page-footer grey">
 
 
<div class="container" id="footContainer">
 
<div class="row">
 
<div class="col-md-4" id="sponser" style="padding-top:3%;">
 
<div class="row">
 
<div class="col-sm-6" style="padding:0;">
 
<div class="row align-items-center">
 
<div class="col">
 
<img class="img-fluid" alt="Team Fudan-TSI" src="https://static.igem.org/mediawiki/2019/0/0f/T--Fudan-TSI--LogoGrey.gif" />
 
</div>
 
<div class="col">
 
<img class="img-fluid" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png" />
 
</div>
 
</div>
 
</div>
 
<div class="col-sm-6" style="padding:0;">
 
<div class="row align-items-center">
 
<div class="col">
 
<img class="img-fluid" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png" />
 
</div>
 
<div class="col">
 
<img class="img-fluid" alt="Yunfeng Capital" src="https://static.igem.org/mediawiki/2018/e/e2/T--Fudan--yunfengLogo.png" />
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="row">
 
<h3 class="col s12" style="text-align: left; color: rgba(255, 255, 255, 0.8); font-size:12.5px; margin-top:5px;">R-Evolution: an <i>in vivo</i> sequence-specific toolbox for continuous mutagenesis</h3>
 
</div>
 
</div>
 
 
<div class="col-md-8" id="usefulLinks">
 
<div class="row">
 
<div class="col-lg-6" style="padding:0;">
 
<div class="row">
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center">
 
<span><a href="/Team:Fudan-TSI/Description" style="text-decoration:none;">Project</a></span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Description">Background</a></li>
 
<li><a href="/Team:Fudan-TSI/Design">Design</a></li>
 
<li><a href="/Team:Fudan-TSI/Applied_Design">Applied Design</a></li>
 
<li><a href="/Team:Fudan-TSI/Experiments">Experiments</a></li>
 
<li><a href="/Team:Fudan-TSI/Judging">Judging</a></li>
 
</ul>
 
</div>
 
</div>
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center">
 
<span><a href="/Team:Fudan-TSI/Results" style="text-decoration:none;">Results</a></span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Results/ReverseTranscription">Reverse Transcription</a></li>
 
<li><a href="/Team:Fudan-TSI/Results/Recombination">Recombination</a></li>
 
<li><a href="/Team:Fudan-TSI/Demonstrate">Demonstration</a></li>
 
<li><a href="/Team:Fudan-TSI/Measurement">Measurement</a></li>
 
<li><a href="/Team:Fudan-TSI/Notebook">Notebook</a></li>
 
</ul>
 
</div>
 
</div>
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center">
 
<span style="text-decoration:none;">Model</span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Model">Modeling</a></li>
 
<li><a href="/Team:Fudan-TSI/Software">Software</a></li>
 
<li><a href="/Team:Fudan-TSI/Hardware">Hardware</a></li>
 
</ul>
 
</div>
 
</div>
 
 
</div>
 
</div>
 
<div class="col-lg-6" style="padding:0;">
 
<div class="row">
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center">
 
  <span><a href="/Team:Fudan-TSI/Parts" style="text-decoration:none;">Parts</a></span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Basic_Part">Basic parts</a></li>
 
<li><a href="/Team:Fudan-TSI/Composite_Part">Composite parts</a></li>
 
<li><a href="/Team:Fudan-TSI/Improve">Improved parts</a></li>
 
<li><a href="/Team:Fudan-TSI/Part_Collection">Part collection</a></li>
 
</ul>
 
</div>
 
</div>
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center">
 
  <span><a href="/Team:Fudan-TSI/Human_Practices" style="text-decoration:none;">Outreach</a></span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Public_Engagement">Education &amp; Public engagement</a></li>
 
<li><a href="/Team:Fudan-TSI/Human_Practices">Integrated human practice</a></li>
 
<li><a href="/Team:Fudan-TSI/Collaborations">Collaborations</a></li>
 
<li><a href="/Team:Fudan-TSI/Safety">Safety</a></li>
 
</ul>
 
</div>
 
</div>
 
 
<div class="col-sm-4">
 
<div class="footerUl align-items-center active">
 
  <span><a href="/Team:Fudan-TSI/Team" style="text-decoration:none;">Team</a></span>
 
<ul>
 
<li><a href="/Team:Fudan-TSI/Team">Members</a></li>
 
<li><a href="/Team:Fudan-TSI/Attributions">Attributions</a></li>
 
<li><a href="/Team:Fudan-TSI">&#169; 2019</a></li>
 
</ul>
 
</div>
 
</div>
 
 
</div>
 
</div>
 
 
 
</div>
 
</div>
 
</div>
 
</div>
 
 
<div class="footer-copyright">
 
<div class="container" style="width:90%;">
 
<div class="contactUS row">
 
  <div class="col s12 m6 l6"><i class="fa fa-location-arrow"></i> Life Sci Bldg, 2005 Songhu Rd, Shanghai
 
  </div>
 
<div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727
 
  </div>
 
<div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn
 
  </div>
 
<div class="col s12 m6 l2"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM
 
  </div>
 
</div>
 
</div>
 
</div>
 
</footer>
 
 
 
  
</div>
 
  
 
 
<script>
 
 
var winHeight=$(window).height();
 
var winWidth=$(window).width();
 
var pagePosition=$("#pageContent").offset().top+90;
 
var navHeight=$(".leftNav").height();
 
var footerHeight=$("#FudanFooter").height();
 
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#top_menu_14").height()-$("#navUl").height();
 
$(".leftNav").css({"position":"absolute","top":pagePosition});
 
$(window).resize(function(){
 
var winHeight=$(window).height();
 
var winWidth=$(window).width();
 
var topDistance=$(window).scrollTop()+0.25*winHeight;
 
var navHeight=$(".leftNav").height();
 
var footerHeight=$("#FudanFooter").height();
 
var maxTopDistance=$("#FudanFooter").offset().top-$(".leftNav").height()-$("#navUl").height();
 
var leftNavFromTop=pagePosition-$(window).scrollTop();
 
if (leftNavFromTop<0.25*winHeight){
 
if(topDistance<maxTopDistance){
 
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 
}
 
else{
 
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 
}
 
}
 
else{
 
$(".leftNav").css({"position":"absolute","top":pagePosition});
 
}
 
});
 
  
$(window).scroll(function(){
 
var winHeight=$(window).height();
 
var winWidth=$(window).width();
 
var leftNavFromTop=pagePosition-$(window).scrollTop();
 
var topDistance=$(window).scrollTop()+0.25*winHeight;
 
if (leftNavFromTop<0.25*winHeight){
 
if(topDistance<maxTopDistance){
 
$(".leftNav").css({"position":"fixed","top":0.25*winHeight+$("#top_menu_14").height()});
 
}
 
else{
 
$(".leftNav").css({"position":"absolute","top":maxTopDistance});
 
};
 
}
 
else{
 
$(".leftNav").css({"position":"absolute","top":pagePosition});
 
}
 
});
 
 
$(".leftNav a").click(function () {
 
$('html, body').animate({
 
scrollTop: $($.attr(this, 'href')).offset().top-$("#navUl").height()-50
 
}, 500);
 
return false;
 
});
 
  
  
$(window).scroll(function(){
 
 
var currentScroll=$(this).scrollTop();
 
var firstHeight=$("#pageCover").height();
 
var footerFromTop=$("#FudanFooter").offset().top;
 
var $currentSection=null;
 
$(".leftNavA").each(function(){
 
$('.leftNavA').removeClass('menu-active');
 
var hePoint=$($(this).attr("href"));
 
var divPosition=hePoint.offset().top-$("#navUl").height()-50;
 
if (divPosition-1<currentScroll){
 
$currentSection=$(this);
 
}
 
if (currentScroll>firstHeight){
 
$(".leftNavA").removeClass("menu-active");
 
$currentSection.addClass("menu-active");
 
}
 
});
 
 
var $currentSection2;
 
$('.leftNavA2').each(function(){
 
$('.leftNavA2').removeClass('menu-active2');
 
var hePoint2=$($(this).attr("href"));
 
var divPosition2=hePoint2.offset().top-$("#navUl").height()-50;
 
if (divPosition2-1<currentScroll){
 
$currentSection2=$(this);
 
}
 
if (currentScroll>firstHeight){
 
$('.leftNavA2').removeClass('menu-active2');
 
$currentSection2.addClass('menu-active2');
 
}
 
});
 
});
 
  
</script>
 
 
  
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/popper.min.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bootstrap.js&amp;action=raw&amp;ctype=text/javascript" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 
 
  
  
 
 
 
 
 
 
 
  
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------    Content ends    --------------------------------------------------------------------------------------------------------------------------------->

Latest revision as of 04:36, 15 November 2019

Team PI
Daru Lu
Liang Cai
Team Advisor
Rongrong Du
MEMBERS
Chuyue Zhang
Team leader
Yuchang Li
Team leader
Yi Qiao
Experiment master
Yuchao Huang
Modeling master
Zixuan Zhang
Art designer
Xidan Miao
Experiments & HP conductor
Yichen Liu
Experiments & HP conductor
Jingyu Cao
Experiment conductor

After nearly one year's hardworking, here we express the most sincere thanks to those who have offered to help us generously. Listed by alphabetical order of surnames.

We thank 2019 iGEM Asia Ambassador Dorothy Zhang for giving us valuable suggestions on human practices.

We thank Professor Hal S. Alper for discussing with us about reverse transcription and mutation system via email and face-to-face meeting.

We thank our advisor Rongrong Du especially for her constant attention and guidance to our team and bringing joy to us as a source of funny stickers (/doge).

We thank Professor Qiang Huang for recommending us to use MATLAB instead of python in case we encounter some unexpected errors and giving us confidence that we can model the processes successfully.

We thank Li Zhou and Jingyi Hu for helping us take care of our bacteria in the early morning and preparing the reagents we need.

We thank Haotian Guo for incisive comments on our project design and posters.

We thank Professor Jiang Zhong, Professor Ting Ni, Professor Boxun Lu, Professor Xiaoming Ding, and Professor Yu An for giving us valuable suggestions and feedbacks at different stages of the project.

We thank Professor Chen Ling, Professor Binglian Zheng, Professor Chen Ding, and Professor Jingwen Wang for their efforts to understand our project and giving advice based on what they are familiar with.

We thank Yi Song for her patient guidance and stage experience which make us better speakers in front of the audience.

We thank Yiheng Wang for giving us suggestions at the beginning of our modeling.

We thank Zijie Yang for proposing suggestions on details of our experiments.

We thank the Shanghai Jiuqian Volunteer Club and the Club of FDU Yuanzheng Society for helping rent the space and connecting kids for our educational human practice.
Hal S Alper
Yu An
Chen Ding
Xiaoming Ding
Haotian Guo
Qiang Huang
Jingyi Hu
Chen Ling
Boxun Lu
Ting Ni
Yi Song
Jingwen Wang
Yiheng Wang
Zijie Yang
Binglian Zheng
Jiang Zhong
Jiuqian Volunteer Club
Yuanzheng Society