Difference between revisions of "Team:NTU-LIHPAO-Taiwan/Design"

(Prototype team page)
 
 
(57 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{NTU-LIHPAO-Taiwan}}
 
 
<html>
 
<html>
 +
<head>
  
<h2>Design</h2>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  
<p>
+
<script type="text/javascript" charset="utf-8">
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page. If you are going for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Applied Design award</a>, you should also complete this page and tell us what you did.
+
</p>
+
  
<div class="highlightBox">
+
//-----Hover Facebook Icon-----//
<h4>Note</h4>
+
$(document).ready(function(){
<p>In order to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Applied Design award</a> and/or the <a href="https://2015.igem.org/Judging/Awards#Medals">functional prototype gold medal criterion</a>, you must fill out this page.</p>
+
$('#Facebook_icon_hover').hover(function () {
</div>
+
this.src = "https://static.igem.org/mediawiki/2015/3/35/NTU-Top-Facebook_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png";
 +
});
 +
});
 +
 
 +
//-----Hover iGem Icon-----//
 +
$(document).ready(function(){
 +
$('#iGEM_icon_hover').hover(function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/0/0a/NTU-Top-iGEM_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png";
 +
});
 +
});
 +
 
 +
//-----Hover NTU Icon-----//
 +
$(document).ready(function(){
 +
$('#NTU_icon_hover').hover(function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/6/6e/NTU-Top-NTU_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png";
 +
});
 +
});
 +
 
 +
</script>
 +
 
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>NTU-LIHPAO-Taiwan</title>
 +
<style type="text/css">
 +
 
 +
/*-------------------------------------------*/
 +
/*--------------Wiki Page Reset--------------*/
 +
/*-------------------------------------------*/
 +
 
 +
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {
 +
display: none;
 +
}
 +
 
 +
#globalWrapper, #content {
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 
 +
html, body, .wrapper {
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 
 +
/*-------------------------------------------*/
 +
/*-------------------Body--------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
body {
 +
background-color: #FFF;
 +
}
 +
body,td,th {
 +
font-size: 14px;
 +
font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi";
 +
}
 +
 
 +
#Wrapper {
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #FFF;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 90%;
 +
height: auto;
 +
top: 0px;
 +
left: 5%;
 +
right: 5%;
 +
position: absolute;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 0;
 +
}
 +
 
 +
#Wrapper_Left {
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #F0F0F0;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 5%;
 +
height: 100%;
 +
top: 0px;
 +
left: 0%;
 +
right: auto;
 +
position: fixed;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 0;
 +
}
 +
 
 +
#Wrapper_Right {
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #F0F0F0;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 5%;
 +
height: 100%;
 +
top: 0px;
 +
left: auto;
 +
right: 0%;
 +
position: fixed;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 0;
 +
}
 +
 
 +
#Wrapper_TopPic {
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #FFF;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 100%;
 +
height: 58px;
 +
top: 0px;
 +
left: 0px;
 +
right: 0px;
 +
position: fixed;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 9998;
 +
border-bottom-style: solid;
 +
border-bottom-color: #fe5838;
 +
border-bottom-width: 2px;
 +
z-index: 9998;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
#Wrapper_Bottom {
 +
width: 100%;
 +
height: 100px;
 +
bottom: 0px;
 +
top: auto;
 +
background-color: #FFF;
 +
border-top-style: solid;
 +
border-top-color: #079235;
 +
border-top-width: 3px;
 +
margin-right: auto;
 +
margin-left: auto;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
z-index: 9998;
 +
position: absolute;
 +
}
 +
 
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*-----------------Top icons-----------------*/
 +
/*-------------------------------------------*/
 +
#Facebook_icon_pic {
 +
height: 30px;
 +
width: 30px;
 +
position: absolute;
 +
left: auto;
 +
top: 23px;
 +
right: 5.5%;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 
 +
#iGEM_icon_pic {
 +
height: 30px;
 +
width: 38px;
 +
position: absolute;
 +
left: auto;
 +
top: 23px;
 +
right: 1%;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 
 +
#NTU_icon_pic {
 +
height: 30px;
 +
width: 69px;
 +
position: absolute;
 +
left: auto;
 +
top: 23px;
 +
right: 9%;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 
 +
#NTUXLIHPAO_icon {
 +
height: 40px;
 +
width: 200px;
 +
position: absolute;
 +
left: 3%;
 +
top: 18px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*-----------------Slide Menu----------------*/
 +
/*-------------------------------------------*/
 +
.Slidemenu {
 +
z-index: 9999;
 +
position: absolute;
 +
top: 32px;
 +
bottom: 0px;
 +
left: 51%;
 +
right: 15%;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
position: absolute;
 +
margin-left: -350px;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 +
}
 +
 
 +
.Slidemenu ul {
 +
*zoom:1;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 +
}
 +
 
 +
.Slidemenu ul:before,.Slidemenu ul:after {
 +
content:"";
 +
display:table;
 +
}
 +
 
 +
.Slidemenu ul:after {
 +
clear:both;
 +
}
 +
 
 +
.Slidemenu a {
 +
text-decoration:none;
 +
display:block;
 +
padding:4px 4px;
 +
line-height:1em;
 +
color:#000;
 +
text-align: center;
 +
vertical-align: middle;
 +
height: auto;
 +
width: auto;
 +
font-family: "Agency FB";
 +
font-size: 1em;
 +
}
 +
 
 +
.Slidemenu a:hover {
 +
text-decoration:none;
 +
background:rgba(0,0,0,0.03);
 +
text-align: center;
 +
vertical-align: middle;
 +
}
 +
 
 +
.Slidemenu li ul {
 +
position:absolute;
 +
left:0;
 +
top:26px;
 +
z-index:1;
 +
}
 +
 
 +
.Slidemenu li ul li {
 +
overflow:hidden;
 +
height: 0px;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
.Slidemenu li ul a {
 +
border:none;
 +
-webkit-transition:background 300ms ease-in-out;
 +
-moz-transition:background 300ms ease-in-out;
 +
-o-transition:background 300ms ease-in-out;
 +
transition:background 300ms ease-in-out;
 +
line-height:1.1em;
 +
}
 +
 
 +
.Slidemenu li ul a:hover {
 +
background-color: rgba(240,240,240,1);
 +
}
 +
 
 +
.Slidemenu ul > li {
 +
text-decoration:none;
 +
float: left;
 +
position: relative;
 +
height: 27px; /*--改主要選單高度--*/
 +
}
 +
 
 +
.width_small {
 +
width: 100px; /*--改主要選單寬度--*/
 +
}
 +
 
 +
.Slidemenu ul > li:hover ul.subs {
 +
height: auto;
 +
width: 150px; /*--改拉出的選單寬度--*/
 +
border-left-width: 3px;
 +
border-left-style: solid;
 +
border-left-color: #3300FF;
 +
background:rgba(255,255,255,1); /*--改拉出選單顏色--*/
 +
}
 +
 
 +
.Slidemenu ul > li:hover ul li {
 +
text-decoration:none;
 +
height: 26px; /*--改拉出的選單高度--*/
 +
width: 150px; /*--改拉出的選單寬度--*/
 +
text-align: center;
 +
vertical-align: middle;
 +
-webkit-transition:height 250ms ease-in;
 +
-moz-transition:height 250ms ease-in;
 +
-o-transition:height 250ms ease-in;
 +
transition:height 250ms ease-in;
 +
}
 +
 
 +
#Position_Now {
 +
background:rgba(0,0,0,0.03);
 +
}
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*------------------Content------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
#Content * {
 +
list-style: none;
 +
}
 +
 
 +
#Content_Container {
 +
position: fixed;
 +
width: 17.8%;
 +
height: 100%;
 +
left: 5.2%;
 +
right: auto;
 +
background: #f7fbff;
 +
z-index: 5;
 +
}
 +
 
 +
#Content {
 +
position: absolute;
 +
top: 60px;
 +
width: 100%;
 +
height: auto;
 +
padding: 0;
 +
margin: 0;
 +
transition: 0.5s;
 +
font-size: 0.8rem;
 +
font-family: Calibri;
 +
}
 +
 
 +
#Content-title {
 +
position: absolute;
 +
width: 100%;
 +
top: 0.5rem;
 +
font-size: 1.5rem;
 +
text-align: center;
 +
}
 +
 
 +
#Content ul {
 +
margin: 0.5rem 0rem 0.5rem;
 +
}
 +
 
 +
.main-Content {
 +
position: absolute;
 +
top: 5rem;
 +
left: 10%;
 +
width: 90%;
 +
}
 +
 
 +
.main-Content #title {
 +
color: #ABCDEF;
 +
}
 +
 
 +
.main-Content > li {
 +
cursor: pointer;
 +
color: #369CF5;
 +
font-size: 25px;
 +
padding-top: 5px;
 +
padding-bottom: 5px;
 +
line-height: 30px;
 +
}
 +
 
 +
.sub-Content {
 +
font-size: 18px;
 +
overflow-y: auto;
 +
transition: 0.5s;
 +
width: 85%;
 +
left: 15%;
 +
position: relative;
 +
}
 +
 
 +
.sub-Content > li {
 +
padding-top: 10px;
 +
padding-bottom: 10px;
 +
}
 +
 
 +
.sub-Content > li a{
 +
display: block;
 +
color: #0791DB;
 +
text-decoration: none;
 +
transition: 0.5s;
 +
}
 +
 
 +
.sub-Content > li a:hover {
 +
opacity: 0.5;
 +
}
 +
 
 +
#Healthin_Logo_Content {
 +
width: 100%;
 +
height: auto;
 +
}
 +
 
 +
#Healthin_Logo {
 +
top: 55px;
 +
padding-left: 3%;
 +
padding-right: 3%;
 +
position: absolute;
 +
width: 94%;
 +
height: 94%;
 +
}
 +
 
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*---------------Introduction----------------*/
 +
/*-------------------------------------------*/
 +
 
 +
.Container_Bottom1 {
 +
height: 70px;
 +
width: 100%;
 +
}
 +
 
 +
.Container_Bottom2 {
 +
height: 70px;
 +
width: 100%;
 +
padding-top: 10px;
 +
border-top-style: solid;
 +
border-top-color: #079235;
 +
border-top-width: 3px;
 +
}
 +
 
 +
.Intro_Picture {
 +
width: 100%;
 +
height: auto;
 +
background-color: #FFF;
 +
position: absolute;
 +
}
 +
 
 +
#NTUschool_logo {
 +
background-color: #FFF;
 +
padding-left: 9.6%;
 +
padding-right: 60.4%;
 +
position: absolute;
 +
width: 30%;
 +
height: 100%;
 +
}
 +
 
 +
#LIHPAO_logo {
 +
background-color: #FFF;
 +
padding-left: 66.4%;
 +
padding-right: 9.6%;
 +
position: absolute;
 +
width: 24%;
 +
height: 100%;
 +
}
 +
 
 +
#NTUBST_logo {
 +
background-color: #FFF;
 +
padding-left: 49.2%;
 +
padding-right: 43.2%;
 +
position: absolute;
 +
width: 7.6%;
 +
height: 100%;
 +
}
 +
 
 +
.Text_Sponsor {
 +
color: #767676;
 +
font-size: 15px;
 +
font-family: Calibri;
 +
text-align: center;
 +
line-height: 20px;
 +
}
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*---------------Article Picture-------------*/
 +
/*-------------------------------------------*/
 +
 
 +
.Container_Article_Picture {
 +
height: 280px;
 +
width: 100%;
 +
padding-top: 25px;
 +
padding-bottom: 25px;
 +
}
 +
 
 +
.Article_Picture {
 +
width: 480px;
 +
height: auto;
 +
left: 50%;
 +
right: auto;
 +
background-color: #FFF;
 +
margin: 0 0 0 -240px;
 +
position: absolute;
 +
}
 +
 
 +
.Article_PictureText {
 +
width: 430px;
 +
height: auto;
 +
padding-left: 25px;
 +
padding-right: 25px;
 +
border-top-width: 2px;
 +
border-top-style: dashed;
 +
border-top-color: #fe5838;
 +
}
 +
 
 +
.Container_Article_Picture1 {
 +
height: 75px;
 +
width: 100%;
 +
padding-top: 25px;
 +
padding-bottom: 25px;
 +
}
 +
 
 +
.Article_Picture1 {
 +
width: 500px;
 +
height: auto;
 +
left: 50%;
 +
right: auto;
 +
background-color: #FFF;
 +
margin: 0 0 0 -250px;
 +
position: absolute;
 +
}
 +
 
 +
.Article_Spacing1 {
 +
width: 100%;
 +
height: 5px;
 +
}
 +
 
 +
.Article_PictureText1 {
 +
width: 450px;
 +
height: auto;
 +
padding-left: 25px;
 +
padding-right: 25px;
 +
border-top-width: 2px;
 +
border-top-style: dashed;
 +
border-top-color: #fe5838;
 +
}
 +
 
 +
.Container_Article_Picture2 {
 +
height: 570px;
 +
width: 100%;
 +
padding-top: 25px;
 +
padding-bottom: 25px;
 +
}
 +
 
 +
.Container_Article_Picture3 {
 +
height: 560px;
 +
width: 100%;
 +
padding-top: 25px;
 +
padding-bottom: 25px;
 +
}
 +
 
 +
.Container_Article_Picture4 {
 +
height: 400px;
 +
width: 100%;
 +
padding-top: 25px;
 +
padding-bottom: 25px;
 +
}
 +
 
 +
.Article_Picture4 {
 +
width: 368px;
 +
height: auto;
 +
left: 50%;
 +
right: auto;
 +
background-color: #FFF;
 +
margin: 0 0 0 -184px;
 +
position: absolute;
 +
}
 +
 
 +
.Article_PictureText4 {
 +
width: 318px;
 +
height: auto;
 +
padding-left: 25px;
 +
padding-right: 25px;
 +
border-top-width: 2px;
 +
border-top-style: dashed;
 +
border-top-color: #fe5838;
 +
}
 +
 
 +
.Text_Picture {
 +
font-size: 18px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
line-height: 26px;
 +
color: #08923a;
 +
}
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*-----------------Articles------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
#Articles {
 +
width: 100%;
 +
height: auto;
 +
top: -10px;
 +
position: absolute;
 +
background-color: #FFF;
 +
z-index: 1;
 +
color: #000;
 +
}
 +
 
 +
.ContentBox {
 +
width: 76%;
 +
height: auto;
 +
left: 22%;
 +
right: 2%;
 +
position: absolute;
 +
background-color: #FFF;
 +
}
 +
 
 +
.Text1 {
 +
font-size: 28px;
 +
font-family: Calibri;
 +
left: 20px;
 +
right: 20px;
 +
padding-top: 80px;
 +
padding-right: 20px;
 +
padding-bottom: 10px;
 +
padding-left: 20px;
 +
border-bottom-width: 2px;
 +
border-bottom-style: dashed;
 +
border-bottom-color: #fe5838;
 +
color: #c00000;
 +
}
 +
 
 +
.Text2 {
 +
font-size: 24px;
 +
font-family: Calibri;
 +
padding-top: 30px;
 +
padding-right: 50px;
 +
padding-bottom: 10px;
 +
padding-left: 50px;
 +
color: #00b050;
 +
}
 +
 
 +
.Text3 {
 +
font-size: 20px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
padding-top: 10px;
 +
padding-right: 80px;
 +
padding-bottom: 10px;
 +
padding-left: 80px;
 +
line-height: 26px;
 +
}
 +
 
 +
.Text_TitleUnderline {
 +
font-size: 22px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
padding-top: 10px;
 +
padding-bottom: 0px;
 +
line-height: 26px;
 +
color: #0070c0;
 +
text-decoration: underline;
 +
}
 +
 
 +
.Text_italic {
 +
font-style: italic;
 +
}
 +
 
 +
ol.part1 {
 +
list-style-type: none;
 +
margin-left: 0px;
 +
}
 +
 
 +
ol.part2 {
 +
list-style-type: decimal;
 +
padding-left: 50px;
 +
padding-right: 30px;
 +
margin-left: 0px;
 +
}
 +
 
 +
ol.part2 li {
 +
padding-top: 5px;
 +
padding-bottom: 5px;
 +
}
 +
 
 +
ol.part3 {
 +
list-style-type: lower-alpha;
 +
}
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*-------------------Media-------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
@media screen and (min-width: 0px) and (max-width: 1200px) {
 +
 
 +
#NTUXLIHPAO_icon {
 +
height: 40px;
 +
width: 200px;
 +
position: absolute;
 +
left: 1%;
 +
top: 18px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 
 +
 
 +
#width_small {
 +
width: 95px; /*--改主要選單寬度--*/
 +
}
 +
 
 +
.Slidemenu {
 +
z-index: 9999;
 +
position: absolute;
 +
top: 32px;
 +
bottom: 0px;
 +
left: 49%;
 +
right: auto;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
position: absolute;
 +
margin-left: -320px;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 +
}
 +
}
 +
 
 +
@media screen and (min-width: 901px) and (max-width: 1050px) {
 +
 
 +
.Container_Bottom2 {
 +
height: 60px;
 +
width: 100%;
 +
padding-top: 10px;
 +
border-top-style: solid;
 +
border-top-color: #079235;
 +
border-top-width: 3px;
 +
}
 +
}
 +
 
 +
@media screen and (min-width: 0px) and (max-width: 900px) {
 +
 
 +
.Container_Bottom2 {
 +
height: 50px;
 +
width: 100%;
 +
padding-top: 10px;
 +
border-top-style: solid;
 +
border-top-color: #079235;
 +
border-top-width: 3px;
 +
}
 +
}
 +
 
 +
 
 +
</style>
 +
</head>
 +
 
 +
 
 +
<!---------------------------------------->
 +
<!---------------------------------------->
 +
<!------------------BODY------------------>
 +
<!---------------------------------------->
 +
<!---------------------------------------->
 +
 
 +
<body>
 +
 
 +
<div id="Wrapper_Left"></div>
 +
<div id="Wrapper_Right"></div>
 +
 
 +
<div id="Wrapper">
 +
<div id="Wrapper_TopPic">
 +
<div id="NTUXLIHPAO_icon"><img src="https://static.igem.org/mediawiki/2015/c/c7/NTU-Top-NTUXLIHPAO.png"  height="40" /></div>
 +
<div id="Facebook_icon_pic">
 +
<a href="https://www.facebook.com/NationalTaiwanUniversityiGEM"><img id="Facebook_icon_hover" src="https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png" /></a></div>
 +
<div id="iGEM_icon_pic">
 +
<a href="https://igem.org/Main_Page"><img id="iGEM_icon_hover" src="https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png" /></a></div>
 +
<div id="NTU_icon_pic">
 +
<a href="http://www.ntu.edu.tw/english/index.html"><img id="NTU_icon_hover" src="https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png" /></a></div>
 +
 
 +
<div class="Slidemenu">
 +
<ul>
 +
<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></div>
 +
</li>
 +
 
 +
<li><div class=width_small span style="cursor:default"><a>Team</a></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><div class=width_small span style="cursor:default"><div id=Position_Now><a>Project</a></div></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description">Description</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Design">Design</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Results">Results</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling">Modeling</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Experiments">Protocols</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><div class=width_small span style="cursor:default"><a>Parts</a></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Parts">Team Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Basic_Part">Basic Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Composite_Part">Composite Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Notebook">Notebook</a></div>
 +
</li>
 +
       
 +
<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Safety">Safety</a></div>
 +
</li>
 +
 +
<li><div class=width_small span style="cursor:default"><a>Society</a></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices">Human Practices</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Entrepreneurship">Entrepreneurship</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
 +
 
 +
 
 +
<div id="Content_Container">
 +
<div id="Healthin_Logo_Content"><div id="Healthin_Logo"><img src="https://static.igem.org/mediawiki/2015/6/69/Healthin_White.png" style="max-width: 100%; height: auto"/></div></div>
 +
<div id="Content">
 +
<ul class="main-Content">
 +
<li>
 +
<span class="title">Design</span>
 +
<ul class="sub-Content">
 +
<li><a href="#First0">Background</a></li>
 +
<li><a href="#First1">CPP-PYY Fusion Protein Design</a></li>
 +
<li><a href="#First2">Nisin Selection</a></li>
 +
<li><a href="#First3">Suicide</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<span class="title">References</span>
 +
<ul class="sub-Content">
 +
<li><a href="#Second1">References</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
<script>
 +
(function() {
 +
var main_Contents = document.querySelectorAll("ul.main-Content>li");
 +
function ContentOpen(index) {
 +
for (var i = 0; i < main_Contents.length; i++) {
 +
var sub_Content = main_Contents[i].querySelector(".sub-Content");
 +
if (i === index) {
 +
sub_Content.style.height = '11rem';
 +
} else {
 +
sub_Content.style.height = '0';
 +
}
 +
}
 +
}
 +
function makeContentOpenFunc(index) {
 +
return function() {
 +
ContentOpen(index);
 +
};
 +
}
 +
for (var i = 0; i < main_Contents.length; i++) {
 +
main_Contents[i].onclick = makeContentOpenFunc(i);
 +
}
 +
ContentOpen(0);
 +
})();
 +
</script>
 +
 
 +
<div id="Articles">
 +
<div class="ContentBox">
 +
<div class="ContentHolder">
 +
 
 +
<div class="Text1">Design</div>
 +
<div class="Text2" id="First0">Background</div>
 +
<div class="Text3">
 +
With the background of our designed Healthin components <a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling/Conclusion"><b>[Click on here back to Description]</b></a>, here we present more detailed design on gene circuits:
 +
</div>
 +
 
 +
<div class="Text2" id="First1">CPP-PYY Fusion Protein Design</div>
 +
<div class="Text3">
 +
A fusion protein that combines the main product peptide YY with signaling peptide, cell penetrating peptide and a thrombin-cleavable linker is designed. These additional parts all have individual functions.
 +
</div>
 +
<div class="Container_Article_Picture1">
 +
<div class="Article_Picture1">
 +
<img src="https://static.igem.org/mediawiki/2015/6/6a/NTU_Healthin_Design.jpg" width="500px"/>
 +
<div class="Article_Spacing1"></div>
 +
<div class="Article_PictureText1"><div class="Text_Picture">[Fig.1-1] Healthin Design</div></div>
 +
</div>
 +
</div>
 +
<div class="Text3">
 +
<ol class="part2">
 +
<li><u>Signaling peptide:</u> Give bacteria the signal to secret Healthin after producing it. At the present stage, the signaling peptide for <i>E.coli</i> is used, however our ultimate goal is to express this fusion protein in <i>Lactobacillus casei</i> and another different signaling peptide is needed.</li>
 +
<li><u>Cell penetrating peptide:</u> Carry the whole fusion protein across membrane burden. The first discovered and the most widely studied cell penetrating peptide, TAT peptide, is used in this design. Its amino acid sequence is GRKKRRQRRRPQ.</li>
 +
<li><u>Peptide YY:</u> The main hormone in appetite controlling. For more detail, please check project description.</li>
 +
<li><u>Thrombin cleavable linker:</u> The linker is composed of the following amino acids: LEAGCKNFFPRSFTSCGSLE. The two Cysteine will bind together with a disulfide bind, and a dithiocyclopeptide linker is formed. This linker design can be adapted to diverse recombinant fusion proteins where in vivo separation of protein domains is required to achieve an improved therapeutic effect, and a desirable pharmacokinetic profile and biodistribution, of the functional domain.</li>
 +
</ol>
 +
</div>
 +
<div class="Text2" id="First2">Nisin Selection</div>
 +
<div class="Container_Article_Picture">
 +
<div class="Article_Picture">
 +
<img src="https://static.igem.org/mediawiki/2015/3/34/NTU-Team-nisI.jpg" width="480px"/>
 +
<div class="Article_PictureText"><div class="Text_Picture">[Fig.1-2] Nisin Selection</div></div>
 +
</div>
 +
</div>
 +
<div class="Text3">
 +
Studies have showed that for nisin resistance, the immunity lipoprotein NisI as well as the ABC transporter-homologous system NisF/E/G is involved. Functional analysis suggests that NisI acts as nisin-intercepting protein, while NisF/E/G complex acts as exporter that expels the unwanted nisin molecules from cytoplasm to the outer environment.<a href="#Reference1">[1]</a> Researchers find that NisI seems to play a more crucial role in nisin immunity than the NisF/E/G complex.<a href="#Reference2">[2]</a> Through experiments, either of each expressing in the heterologous bacteria is able to protect the host cells.<a href="#Reference1">[1]</a> Moreover, the expression of <i>nisI</i> in <i>Lactobacillus plantarum</i> was assessed to be at the same level as in <i>Lactococcus lactis</i>.<a href="#Reference2">[2]</a>
 +
</div>
 +
<div class="Text3">
 +
The figure above shows our gene circuit for nisin selection. The promoter we chose was pUO19 from <i>Escherichia coli</i> which is also functional in <i>Lactobacillus casei</i> and the gene <i>nisI</i> helps <i>Lactobacillus casei</i> transform from nisin-sensitive into nisin-resistant. The fraction enlarged was latter proceeded ligation with CPP-PYY circuit, enabling the following selection.
 +
</div>
 +
 
 +
<div class="Text2" id="First3">Suicide</div>
 +
<div class="Text3">
 +
We introduced the part in the iGEM biobricks, NucA, as our main suicide gene. NucA codes for the mature form of nuclease from <i>Staphylococcus aureus</i>. This secreted enzyme is 5’-phosphodiesterase, which means it can cleave either single- or double-stranded DNA or RNA; therefore, it plays an vital role in the programmed cell death that involves DNA and RNA degradation.<a href="#Reference3">[3]</a>
 +
</div>
 +
<div class="Container_Article_Picture">
 +
<div class="Article_Picture">
 +
<img src="https://static.igem.org/mediawiki/2015/3/3a/NTU-Team-nuca-promoter.jpg" width="480px"/>
 +
<div class="Article_PictureText"><div class="Text_Picture">[Fig.1-3-1] promoter-RBS-NucA-Ter</div></div>
 +
</div>
 +
</div>
 +
<div class="Text3">
 +
The problem encountered was that we hope our host cells alive in the product, while want them to die after producing moderate quantities of PYY in human intestines; also, when they are evacuated, back to the outside environment, the suicide gene must be turn on. We later searched the iGEM biobricks and found CI repressor that can bind to its regulated promoter, pCI, to repress the transcription.<a href="#Reference4">[4]</a><a href="#Reference5">[5]</a>
 +
</div>
 +
<div class="Container_Article_Picture">
 +
<div class="Article_Picture">
 +
<img src="https://static.igem.org/mediawiki/2015/9/9a/NTU-Team-nuca.jpg" width="480px"/>
 +
<div class="Article_PictureText"><div class="Text_Picture">[Fig.1-3-2] Suicide Kill Part</div></div>
 +
</div>
 +
</div>
 +
<div class="Text3">
 +
Now that the suicide gene NucA is inhibited by CI, the amount of CI protein inside the bacteria comes out to be immensely significant. To elaborate, we ought to carefully control the yield of CI produced by <i>Lactobacillus casei</i> ATCC393. The excess can make sure the cells are vigorous so that our main CPP-PYY gene circuit can function properly; on the other hand, the lack will turn on the transcription of thermonuclease which leads to the death of the host cells. To well control the quantity of CI repressor, we introduced the promoter of lac operon of <i>Lactobacillus casei</i> ATCC393 which is regulated by the ratio of lactose and glucose.
 +
</div>
 +
<div class="Container_Article_Picture2">
 +
<div class="Article_Picture">
 +
<img src="https://static.igem.org/mediawiki/2015/6/68/NTU_Safety_Alive.jpg" width="480px"/>
 +
<div class="Article_PictureText"><div class="Text_Picture">[Fig.1-3-3] Alive Path</div></div>
 +
</div>
 +
</div>
 +
<div class="Container_Article_Picture3">
 +
<div class="Article_Picture">
 +
<img src="https://static.igem.org/mediawiki/2015/1/17/NTU_Safety_Dead.jpg" width="480px"/>
 +
<div class="Article_PictureText"><div class="Text_Picture">[Fig.1-3-4] Dead Path</div></div>
 +
</div>
 +
</div>
 +
 
 +
<div class="Text1">References</div>
 +
<div class="Text2" id="Second1">References</div>
 +
<div class="Text3" id="Reference1">
 +
[1] Torsten Stein, Stefan Heinzmann, Irina Solovieva, and Karl-Dieter Entian. Function of Lactococcus lactis nisin immunity genes nisI and nisFEG after coordinated expression in the surrogate host Bacillus subtilis. The Journal of Biological Chemistry, Vol. 278, No. 1, Issue of January 3, p.89–94. Germany. (2003)
 +
</div>
 +
<div class="Text3" id="Reference2">
 +
[2] T. M. Takala · P. E. J. Saris. A food-grade cloning vector for lactic acid bacteria based on the nisin immunity gene nisI. Appl Microbiol Biotechnol 59, p.467–471. U.S.A. (2003)
 +
</div>
 +
<div class="Text3" id="Reference3">
 +
[3] Yu Hua, Jianghong Mengb, Chunlei Shia, Kirstin Hervina, Pina M. Fratamicoc, Xianming Shia. Characterization and comparative analysis of a second thermonuclease from Staphylococcus aureus. Microbiological Research, Volume 168, Issue 3, 30 March 2013, P.174–182. U.S.A. (2012)
 +
</div>
 +
<div class="Text3" id="Reference4">
 +
[4] iGEM Part: <a href="http://parts.igem.org/Part:BBa_C0051">http://parts.igem.org/Part:BBa_C0051</a>
 +
</div>
 +
<div class="Text3" id="Reference5">
 +
[5] iGEM Part: <a href="http://parts.igem.org/Part:BBa_R0051">http://parts.igem.org/Part:BBa_R0051</a>
 +
</div>
  
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
+
<div class="Container_Bottom1"></div>
 +
<div class="Container_Bottom2">
 +
<div class="Intro_Picture">
 +
<div id="NTUschool_logo"><a href="http://www.ntu.edu.tw/english/index.html"><img src="https://static.igem.org/mediawiki/2015/d/de/NTUschool_icon.png"  style="max-width: 100%; max-height: 70px"/></a></div>
 +
<div id="LIHPAO_logo"><a href="http://www.llsc.com.tw/"><img src="https://static.igem.org/mediawiki/2015/d/d4/LIHPAO_logo.png" style="max-width: 100%; max-height: 70px"/></a></div>
 +
<div id="NTUBST_logo"><a href="http://www.bst.ntu.edu.tw/BST-new/NTUBST.html"><img src="https://static.igem.org/mediawiki/2015/6/68/NTUBST_logo.png" style="max-width: 100%; max-height: 70px"/></a></div>
 +
</div>
 +
</div>
 +
<div class="Text_Sponsor">
 +
Maintained by the iGEM team NTU-LIHPAO-Taiwan&nbsp;&nbsp;&nbsp;&nbsp;©2015 NTU-LIHPAO-Taiwan
 +
</div>
  
<p>
+
</div>
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
</div>
</p>
+
</div>
  
 +
<script>
 +
$('.sub-Content>li a').click(function() {
 +
console.log(this.hash);
 +
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
 +
var target = $('[id="'+this.hash.substring(1)+'"]');
 +
target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]');
 +
if (target.length) {
 +
$('html,body').animate({
 +
scrollTop: target.offset().top-55
 +
}, 700);
 +
return false;
 +
}
 +
}
 +
});
 +
 +
$('.title').click(function() {
 +
console.log(this.hash);
 +
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
 +
var target = $('[id="'+this.hash.substring(1)+'"]');
 +
target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]');
 +
if (target.length) {
 +
$('html,body').animate({
 +
scrollTop: target.offset().top-55
 +
}, 700);
 +
return false;
 +
}
 +
}
 +
});
 +
 +
$('.Text3 > a').click(function() {
 +
console.log(this.hash);
 +
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
 +
var target = $('[id="'+this.hash.substring(1)+'"]');
 +
target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]');
 +
if (target.length) {
 +
$('html,body').animate({
 +
scrollTop: target.offset().top-55
 +
}, 700);
 +
return false;
 +
}
 +
}
 +
});
 +
</script>
 
</div>
 
</div>
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 15:26, 18 September 2015

NTU-LIHPAO-Taiwan

Design
Background
With the background of our designed Healthin components [Click on here back to Description], here we present more detailed design on gene circuits:
CPP-PYY Fusion Protein Design
A fusion protein that combines the main product peptide YY with signaling peptide, cell penetrating peptide and a thrombin-cleavable linker is designed. These additional parts all have individual functions.
[Fig.1-1] Healthin Design
  1. Signaling peptide: Give bacteria the signal to secret Healthin after producing it. At the present stage, the signaling peptide for E.coli is used, however our ultimate goal is to express this fusion protein in Lactobacillus casei and another different signaling peptide is needed.
  2. Cell penetrating peptide: Carry the whole fusion protein across membrane burden. The first discovered and the most widely studied cell penetrating peptide, TAT peptide, is used in this design. Its amino acid sequence is GRKKRRQRRRPQ.
  3. Peptide YY: The main hormone in appetite controlling. For more detail, please check project description.
  4. Thrombin cleavable linker: The linker is composed of the following amino acids: LEAGCKNFFPRSFTSCGSLE. The two Cysteine will bind together with a disulfide bind, and a dithiocyclopeptide linker is formed. This linker design can be adapted to diverse recombinant fusion proteins where in vivo separation of protein domains is required to achieve an improved therapeutic effect, and a desirable pharmacokinetic profile and biodistribution, of the functional domain.
Nisin Selection
[Fig.1-2] Nisin Selection
Studies have showed that for nisin resistance, the immunity lipoprotein NisI as well as the ABC transporter-homologous system NisF/E/G is involved. Functional analysis suggests that NisI acts as nisin-intercepting protein, while NisF/E/G complex acts as exporter that expels the unwanted nisin molecules from cytoplasm to the outer environment.[1] Researchers find that NisI seems to play a more crucial role in nisin immunity than the NisF/E/G complex.[2] Through experiments, either of each expressing in the heterologous bacteria is able to protect the host cells.[1] Moreover, the expression of nisI in Lactobacillus plantarum was assessed to be at the same level as in Lactococcus lactis.[2]
The figure above shows our gene circuit for nisin selection. The promoter we chose was pUO19 from Escherichia coli which is also functional in Lactobacillus casei and the gene nisI helps Lactobacillus casei transform from nisin-sensitive into nisin-resistant. The fraction enlarged was latter proceeded ligation with CPP-PYY circuit, enabling the following selection.
Suicide
We introduced the part in the iGEM biobricks, NucA, as our main suicide gene. NucA codes for the mature form of nuclease from Staphylococcus aureus. This secreted enzyme is 5’-phosphodiesterase, which means it can cleave either single- or double-stranded DNA or RNA; therefore, it plays an vital role in the programmed cell death that involves DNA and RNA degradation.[3]
[Fig.1-3-1] promoter-RBS-NucA-Ter
The problem encountered was that we hope our host cells alive in the product, while want them to die after producing moderate quantities of PYY in human intestines; also, when they are evacuated, back to the outside environment, the suicide gene must be turn on. We later searched the iGEM biobricks and found CI repressor that can bind to its regulated promoter, pCI, to repress the transcription.[4][5]
[Fig.1-3-2] Suicide Kill Part
Now that the suicide gene NucA is inhibited by CI, the amount of CI protein inside the bacteria comes out to be immensely significant. To elaborate, we ought to carefully control the yield of CI produced by Lactobacillus casei ATCC393. The excess can make sure the cells are vigorous so that our main CPP-PYY gene circuit can function properly; on the other hand, the lack will turn on the transcription of thermonuclease which leads to the death of the host cells. To well control the quantity of CI repressor, we introduced the promoter of lac operon of Lactobacillus casei ATCC393 which is regulated by the ratio of lactose and glucose.
[Fig.1-3-3] Alive Path
[Fig.1-3-4] Dead Path
References
References
[1] Torsten Stein, Stefan Heinzmann, Irina Solovieva, and Karl-Dieter Entian. Function of Lactococcus lactis nisin immunity genes nisI and nisFEG after coordinated expression in the surrogate host Bacillus subtilis. The Journal of Biological Chemistry, Vol. 278, No. 1, Issue of January 3, p.89–94. Germany. (2003)
[2] T. M. Takala · P. E. J. Saris. A food-grade cloning vector for lactic acid bacteria based on the nisin immunity gene nisI. Appl Microbiol Biotechnol 59, p.467–471. U.S.A. (2003)
[3] Yu Hua, Jianghong Mengb, Chunlei Shia, Kirstin Hervina, Pina M. Fratamicoc, Xianming Shia. Characterization and comparative analysis of a second thermonuclease from Staphylococcus aureus. Microbiological Research, Volume 168, Issue 3, 30 March 2013, P.174–182. U.S.A. (2012)
Maintained by the iGEM team NTU-LIHPAO-Taiwan    ©2015 NTU-LIHPAO-Taiwan