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

Line 27: Line 27:
 
}
 
}
 
body,td,th {
 
body,td,th {
−
font-family: Calibri, "新細明體", serif;
+
font-size: 16px;
−
font-size: 12px;
+
font-family: Calibri, "新細明體", "Arial Narrow", "Agency FB";
 
}
 
}
−
p {
 
−
  margin-top: 0em;
 
−
  margin-bottom: 1.3em;
 
−
}
 
−
 
−
 
 
#Wrapper {
 
#Wrapper {
 
margin-right: auto;
 
margin-right: auto;
 
margin-left: auto;
 
margin-left: auto;
−
padding: 10px;
 
 
background-color: #FFF;
 
background-color: #FFF;
 
margin-top: 0px;
 
margin-top: 0px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
−
width: 1130px;
+
width: 1150px;
−
height: 1000px;
+
height: 2000px;
−
top: -20px;
+
top: 0px;
 
left: 100px;
 
left: 100px;
 
right: auto;
 
right: auto;
Line 52: Line 45:
 
padding-top: 0px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
padding-bottom: 0px;
 +
}
 +
#Wrapper_TOP {
 +
z-index: 9998;
 +
background: #FFF;
 +
height: 86px;
 +
width: 1150px;
 +
position: fixed;
 +
top: 0px;
 +
left: 100px;
 +
right: auto;
 +
}
 +
#Wrapper_TopPic{
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #000;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 1150px;
 +
height: 90px;
 +
top: 0px;
 +
left: 100px;
 +
right: auto;
 +
position: fixed;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 9999;
 
}
 
}
  
−
.title {
+
/*-------------------------------------------*/
−
        font-size: 1.6em;
+
/*--------------------nav--------------------*/
 +
/*-------------------------------------------*/
 +
.nav {
 +
z-index: 9999;
 +
position: fixed;
 +
top: 50px;
 +
left: 100px;
 +
right: auto;
 +
    list-style:none;
 +
    margin:0;
 +
    padding:0;
 +
    background:rgba(100%,100%,100%,0.2);
 
}
 
}
−
.subtitle {
+
 
−
        top: 10px;
+
.nav ul {
−
        font-size: 1.3em;
+
    *zoom:1;
−
position: relative;
+
    list-style:none;
 +
    margin:0;
 +
    padding:0;
 +
    background:rgba(100%,100%,100%,0.2);
 
}
 
}
  
−
</style>
+
.nav ul:before,.nav ul:after {
 +
    content:"";
 +
    display:table;
 +
}
  
−
</head>
+
.nav ul:after {
 +
    clear:both;
 +
}
  
−
<body>
+
.nav a {
−
<div id="Wrapper">
+
text-decoration:none;
 +
display:block;
 +
padding:10px 10px;
 +
line-height:1em;
 +
color:#000;
 +
text-align: center;
 +
vertical-align: middle;
 +
height: auto;
 +
width: auto;
 +
font-family: "Agency FB";
 +
font-size: 19px;
 +
}
  
−
<p class="title">CPP-PYY complex for appetite suppression</p>
+
.nav a:hover {
 +
text-decoration:none;
 +
background:rgba(0,0,0,0.05);
 +
text-align: center;
 +
vertical-align: middle;
 +
}
  
−
<p class="subtitle">Abstract:</p>
+
.nav li ul {
−
<p>    As the problem of obesity is becoming a serious issue in Taiwan, more and more unverified weight loss pills are rampant on market. Therefore, we aim to target at the key signal of appetite suppression, Peptide YY, with the help of probiotic Lactobacillus casei as a vector, combining with the most potentially developing delivery drug for cellular uptake of various molecular cargo, Cell Penetrating Peptide (CPP). Ultimately, we expect to design a novelly oral peptide vector where Lactobacillus casei secreting CPP-PYY complex for appetite suppression.</p>
+
    position:absolute;
 +
    left:0;
 +
    top:36px;
 +
    z-index:1;
 +
}
  
−
<p class="subtitle">Introduction:</p>
+
.nav li ul li {
−
<p>Peptide YY (PYY) is a protein that suppresses appetite, with the amino acid sequence both beginning and ending with tyrosine (Y), shown as follows:</p>
+
    overflow:hidden;
−
<p>YPIKPEAPGEDASPEELNRYYASLRHYLNLVTRQRY</p>
+
    height:0;
−
<p>As a gastrointestinal (GI) hormones, PYY is released for circulation after meals mainly from the L cells of jejunum ileum and colon. Upon reaching hypothalamus by circulation, PYY binds to neuropeptide Y receptor (NPY receptor) in the ventromedial nuclei, which gives fullness feelings.</p>
+
}
  
−
<p>Cell penetrating peptide (CPP) is a short peptide that is able to bring DNA or protein as cargo for spontaneous penetration through cell membrane, characterized by two mechanisms: Direct penetration and Endocytosis. They share 3 steps in common: membrane interaction, membrane permeation, and CPPs releasing into cytosol.</p>
+
.nav li ul a {
 +
    border:none;
 +
    background:rgba(0,0,0,0.05);
 +
-webkit-transition:background 500ms ease-in-out;
 +
    -moz-transition:background 500ms ease-in-out;
 +
    -o-transition:background 500ms ease-in-out;
 +
    transition:background 500ms ease-in-out;
 +
}
 +
 
 +
.nav li ul a:hover {
 +
    background: rgba(0,0,0,0.2);
 +
}
 +
 
 +
.nav ul > li {
 +
text-decoration:none;
 +
    float:left;
 +
    position:relative;
 +
height: 36px; /*--改主要選單高度--*/
 +
width: 100px; /*--改主要選單寬度--*/
 +
}
 +
 
 +
.nav ul > li:hover ul.subs {
 +
    height: auto;
 +
    width: 200px; /*--改拉出的選單寬度--*/
 +
}
 +
 
 +
.nav ul > li:hover ul li {
 +
line-height: 24px;
 +
text-decoration:none;
 +
height:36px;
 +
width: 200px; /*--改拉出的選單寬度--*/
 +
text-align: center;
 +
vertical-align: middle; /*--改BAR選單邊條--*/
 +
border-left:2px solid #8583B4;
 +
-webkit-transition:height 250ms ease-in;
 +
-moz-transition:height 250ms ease-in;
 +
-o-transition:height 250ms ease-in;
 +
transition:height 250ms ease-in;
 +
}
 +
 
 +
 
 +
/*--------------------------------------------*/
 +
/*--------------------nav2--------------------*/
 +
/*--------------------------------------------*/
 +
.nav2 {
 +
z-index: 9999;
 +
position: fixed;
 +
top: 50px;
 +
left: auto;
 +
right: 99px;
 +
    list-style:none;
 +
    margin:0;
 +
    padding:0;
 +
background:#FFF;
 +
}
 +
 
 +
.nav2 ul {
 +
    *zoom:1;
 +
    list-style:none;
 +
    margin:0;
 +
    padding:0;
 +
    background:#FFF;
 +
}
 +
 
 +
.nav2 ul:before,.nav ul:after {
 +
    content:"";
 +
    display:table;
 +
}
 +
 
 +
.nav2 ul:after {
 +
    clear:both;
 +
}
 +
 
 +
.nav2 a {
 +
text-decoration:none;
 +
display:block;
 +
padding:10px 10px;
 +
line-height:1em;
 +
color:#000;
 +
text-align: center;
 +
vertical-align: middle;
 +
height: auto;
 +
width: auto;
 +
font-family: "Agency FB";
 +
font-size: 19px;
 +
}
 +
 
 +
.nav2 a:hover {
 +
text-decoration:none;
 +
background:rgba(0,0,0,0.05);
 +
text-align: center;
 +
vertical-align: middle;
 +
}
 +
 
 +
.nav2 li ul {
 +
    position:absolute;
 +
    right:0;
 +
    top:36px;
 +
    z-index:1;
 +
}
 +
 
 +
.nav2 li ul li {
 +
    overflow:hidden;
 +
    height:0;
 +
}
 +
 
 +
.nav2 li ul a {
 +
    border:none;
 +
    background:rgba(0,0,0,0.05);
 +
-webkit-transition:background 500ms ease-in-out;
 +
    -moz-transition:background 500ms ease-in-out;
 +
    -o-transition:background 500ms ease-in-out;
 +
    transition:background 500ms ease-in-out;
 +
}
 +
 
 +
.nav2 li ul a:hover {
 +
    background:rgba(0,0,0,0.2);
 +
}
 +
 
 +
.nav2 ul > li {
 +
text-decoration:none;
 +
    float:right;
 +
    position:relative;
 +
height:36px; /*--改主要選單高度--*/
 +
width: 123px; /*--改主要選單寬度--*/
 +
}
 +
 
 +
.nav2 ul > li:hover ul.subs {
 +
    height: auto;
 +
    width: 200px; /*--改拉出的選單寬度--*/
 +
}
 +
 
 +
.nav2 ul > li:hover ul li {
 +
line-height: 24px;
 +
text-decoration:none;
 +
height:36px;
 +
width: 200px; /*--改拉出的選單寬度--*/
 +
text-align: center;
 +
vertical-align: middle;
 +
    border-right:2px solid #8583B4;
 +
    -webkit-transition:height 250ms ease-in;
 +
    -moz-transition:height 250ms ease-in;
 +
    -o-transition:height 250ms ease-in;
 +
    transition:height 250ms ease-in;
 +
}
 +
 
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*----------------flexslider-----------------*/
 +
/*-------------------------------------------*/
 +
 
 +
@font-face {
 +
  font-family: 'flexslider-icon';
 +
  src: url('fonts/flexslider-icon.eot');
 +
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
 +
  font-weight: normal;
 +
  font-style: normal;
 +
}
 +
.flex-container a:hover,
 +
.flex-slider a:hover,
 +
.flex-container a:focus,
 +
.flex-slider a:focus {
 +
  outline: none;
 +
}
 +
.slides,
 +
.slides > li,
 +
.flex-control-nav,
 +
.flex-direction-nav {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
.flex-pauseplay span {
 +
  text-transform: capitalize;
 +
}
 +
.Container_flexslider {
 +
position: absolute;
 +
top: 90px;
 +
left: 0px;
 +
right: 0px;
 +
margin:0px;
 +
padding:0px;
 +
height: 600px;
 +
width: 1150px;
 +
background-color:#FFFFFF;
 +
}
 +
.flexslider {
 +
margin: 0;
 +
}
 +
.flexslider .slides > li {
 +
  display: none;
 +
  -webkit-backface-visibility: hidden;
 +
}
 +
.flexslider .slides img {
 +
  width: 100%;
 +
  display: block;
 +
}
 +
.flexslider .slides:after {
 +
  content: "\0020";
 +
  display: block;
 +
  clear: both;
 +
  visibility: hidden;
 +
  line-height: 0;
 +
  height: 0;
 +
}
 +
html[xmlns] .flexslider .slides {
 +
  display: block;
 +
}
 +
* html .flexslider .slides {
 +
  height: 1%;
 +
}
 +
.no-js .flexslider .slides > li:first-child {
 +
  display: block;
 +
}
 +
.flexslider {
 +
  margin: 0 0 60px;
 +
  background: #ffffff;
 +
  border: 4px solid #ffffff;
 +
  position: absolute;
 +
  zoom: 1;
 +
  -webkit-border-radius: 4px;
 +
  -moz-border-radius: 4px;
 +
  border-radius: 4px;
 +
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
 +
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
 +
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
 +
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
 +
}
 +
.flexslider .slides {
 +
  zoom: 1;
 +
}
 +
.flexslider .slides img {
 +
  height: auto;
 +
}
 +
.flex-viewport {
 +
  max-height: 2000px;
 +
  -webkit-transition: all 1s ease;
 +
  -moz-transition: all 1s ease;
 +
  -ms-transition: all 1s ease;
 +
  -o-transition: all 1s ease;
 +
  transition: all 1s ease;
 +
}
 +
.loading .flex-viewport {
 +
  max-height: 300px;
 +
}
 +
.carousel li {
 +
  margin-right: 5px;
 +
}
 +
.flex-direction-nav {
 +
  *height: 0;
 +
}
 +
.flex-direction-nav a {
 +
  text-decoration: none;
 +
  display: block;
 +
  width: 40px;
 +
  height: 40px;
 +
  margin: -20px 0 0;
 +
  position: absolute;
 +
  top: 50%;
 +
  z-index: 10;
 +
  overflow: hidden;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
  color: rgba(0, 0, 0, 0.8);
 +
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
 +
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  -ms-transition: all 0.3s ease-in-out;
 +
  -o-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
}
 +
.flex-direction-nav a:before  {
 +
    content: " ";
 +
    display: block;
 +
    background: url('Symbol_P.png') no-repeat;
 +
    width: 40px;
 +
    height: 40px;
 +
}
 +
.flex-direction-nav a.flex-next:before  {
 +
    content: " ";
 +
    display: block;
 +
    background: url('Symbol_Y.png') no-repeat;
 +
    width: 40px;
 +
    height: 40px;
 +
}
 +
.flex-direction-nav .flex-prev {
 +
  left: 25px;
 +
}
 +
.flex-direction-nav .flex-next {
 +
  right: 25px;
 +
  text-align: right;
 +
}
 +
.flexslider:hover .flex-direction-nav .flex-prev {
 +
  opacity: 0.7;
 +
  left: 10px;
 +
}
 +
.flexslider:hover .flex-direction-nav .flex-prev:hover {
 +
  opacity: 1;
 +
}
 +
.flexslider:hover .flex-direction-nav .flex-next {
 +
  opacity: 0.7;
 +
  right: 10px;
 +
}
 +
.flexslider:hover .flex-direction-nav .flex-next:hover {
 +
  opacity: 1;
 +
}
 +
.flex-direction-nav .flex-disabled {
 +
  opacity: 0!important;
 +
  filter: alpha(opacity=0);
 +
  cursor: default;
 +
}
 +
.flex-pauseplay a {
 +
  display: block;
 +
  width: 20px;
 +
  height: 20px;
 +
  position: absolute;
 +
  bottom: 5px;
 +
  left: 10px;
 +
  opacity: 0.8;
 +
  z-index: 10;
 +
  overflow: hidden;
 +
  cursor: pointer;
 +
  color: #000;
 +
}
 +
.flex-pauseplay a:before {
 +
  font-family: "flexslider-icon";
 +
  font-size: 20px;
 +
  display: inline-block;
 +
  content: '\f004';
 +
}
 +
.flex-pauseplay a:hover {
 +
  opacity: 1;
 +
}
 +
.flex-pauseplay a.flex-play:before {
 +
  content: '\f003';
 +
}
 +
.flex-control-nav {
 +
  width: 100%;
 +
  position: absolute;
 +
  bottom: -40px;
 +
  text-align: center;
 +
}
 +
.flex-control-nav li {
 +
  margin: 0 6px;
 +
  display: inline-block;
 +
  zoom: 1;
 +
  *display: inline;
 +
}
 +
.flex-control-paging li a {
 +
  width: 11px;
 +
  height: 11px;
 +
  display: block;
 +
  background: #666;
 +
  background: rgba(0, 0, 0, 0.5);
 +
  cursor: pointer;
 +
  text-indent: -9999px;
 +
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
 +
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
 +
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
 +
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
 +
  -webkit-border-radius: 20px;
 +
  -moz-border-radius: 20px;
 +
  border-radius: 20px;
 +
}
 +
.flex-control-paging li a:hover {
 +
  background: #333;
 +
  background: rgba(0, 0, 0, 0.7);
 +
}
 +
.flex-control-paging li a.flex-active {
 +
  background: #000;
 +
  background: rgba(0, 0, 0, 0.9);
 +
  cursor: default;
 +
}
 +
.flex-control-thumbs {
 +
  margin: 5px 0 0;
 +
  position: static;
 +
  overflow: hidden;
 +
}
 +
.flex-control-thumbs li {
 +
  width: 25%;
 +
  float: left;
 +
  margin: 0;
 +
}
 +
.flex-control-thumbs img {
 +
  width: 100%;
 +
  height: auto;
 +
  display: block;
 +
  opacity: .7;
 +
  cursor: pointer;
 +
  -webkit-transition: all 1s ease;
 +
  -moz-transition: all 1s ease;
 +
  -ms-transition: all 1s ease;
 +
  -o-transition: all 1s ease;
 +
  transition: all 1s ease;
 +
}
 +
.flex-control-thumbs img:hover {
 +
  opacity: 5;
 +
}
 +
.flex-control-thumbs .flex-active {
 +
  opacity: 1;
 +
  cursor: default;
 +
}
 +
@media screen and (max-width: 860px) {
 +
  .flex-direction-nav .flex-prev {
 +
    opacity: 1;
 +
    left: 10px;
 +
  }
 +
  .flex-direction-nav .flex-next {
 +
    opacity: 1;
 +
    right: 10px;
 +
  }
 +
}
 +
 
 +
 
 +
/*-------------------------------------------*/
 +
/*-------------------intro-------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
.Container_intro {
 +
width: 1150px;
 +
height: 590px;
 +
top: 580px;
 +
right: 0px;
 +
left: 0px;
 +
position: absolute;
 +
background-color: rgba(0,0,0,0);
 +
}
 +
.Container_intro_title {
 +
width: 1150px;
 +
height: 100px;
 +
top: 0px;
 +
right: 0px;
 +
left: 0px;
 +
position: absolute;
 +
background-color: rgba(0,0,0,0);
 +
}
 +
.Container_intro_video {
 +
padding-left: 50px;
 +
padding-top: 50px;
 +
padding-bottom: 50px;
 +
width: 520px;
 +
height: 390px;
 +
top: 100px;
 +
right: 0px;
 +
left: 0px;
 +
position: absolute;
 +
background-color: rgba(0,0,0,0);
 +
}
 +
.Container_intro_text {
 +
padding-left: 50px;
 +
width: 530px;
 +
height: 490px;
 +
top: 100px;
 +
right: 0px;
 +
left: 570px;
 +
position: absolute;
 +
background-color: rgba(0,0,0,0);
 +
}
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body>
 +
<div id="Wrapper_TOP"></div>
  
−
<p>Our project design devotes to combining CPP and PYY, with Lactobacillus. casei as a vector, for constructing a dietary supplement for appetite suppression. The CPP-PYY complex secreted from L. casei can effectively pass through the intestine to increase PYY circulation, thus results in appetite inhibition and decrease in food intake, which serves as a cure for obesity.</p>
+
<div id="Wrapper">
 +
<div id="Wrapper_TopPic">
 +
           
 +
<div class="nav">
 +
    <ul>
 +
        <li><a href="#">Home</a>
 +
            <ul class="subs">
 +
              <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
       
 +
        <li><a href="#">Team</a>
 +
            <ul class="subs">
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
       
 +
        <li><a href="#">Project</a>
 +
            <ul class="subs">
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
       
 +
        <li><a href="#">Results</a>
 +
            <ul class="subs">
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
    </ul>
 +
</div>
  
−
<p class="subtitle">Experiments:</p>
+
<div class="nav2">
−
<p>There parts are being tested in E. coli for initial examination:</p>
+
    <ul>
−
    <ul>
+
        <li><a href="#">Modeling</a>
−
         <li>CPP-PYY complex production</li>
+
            <ul class="subs">
−
         <li>Nisin selection</li>
+
                <li><a href="#">Subnav Item</a></li>
−
         <li>Suicide device for safety</li>
+
                <li><a href="#">Subnav Item</a></li>
−
     </ul>
+
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
          
 +
        <li><a href="#">Notebook</a>
 +
            <ul class="subs">
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
          
 +
        <li><a href="#">Safety</a>
 +
            <ul class="subs">
 +
              <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
          
 +
        <li><a href="#">Human Practice</a>
 +
            <ul class="subs">
 +
                <li><a href="#">Subnav Item</a></li>
 +
                <li><a href="#">Subnav Item</a></li>
 +
              <li><a href="#">Subnav Item</a></li>
 +
            </ul>
 +
        </li>
 +
    </ul>
 +
</div>
 +
     </div>
 +
   
 +
<div class="Container_flexslider">
 +
<div class="flexslider">
 +
<ul class="slides">
 +
<li>
 +
<img src="slide1.jpg" />
 +
</li>
 +
            <li>
 +
<img src="slide2.jpg" />
 +
</li>
 +
            <li>
 +
<img src="slide3.jpg" />
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
    <div class="Container_intro">
 +
<div class="Container_intro_title">
 +
       
 +
</div>
 +
       
 +
        <div class="Container_intro_video">
 +
        <video width="520" height="390" controls>
 +
<source src="https://static.igem.org/mediawiki/2015/2/2e/Team-HKUST-Rice-Ethical_debate_part_1.mp4" type="video/ogg">
 +
<source src="https://static.igem.org/mediawiki/2015/2/2e/Team-HKUST-Rice-Ethical_debate_part_1.mp4" type="video/mp4">
 +
        </div>
 +
       
 +
        <div class="Container_intro_text">
 +
       
 +
        </div>
 +
       
 +
       
 +
    </div>
 +
   
  
 +
   
 
</div>
 
</div>
 
</body>
 
</body>

Revision as of 14:40, 22 July 2015