Team:OUC-China

From 2012.igem.org

(Difference between revisions)
 
(149 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<style type="text/css">                         /*change the original page*/
+
<meta charset="UTF-8">
-
#search-controls,#p-logo,#footer,#footer-box,#catlinks{
+
<meta name="viewport" content="width=device-width initial-scale=1"/>
-
display:none;
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/homemain.css"><!--nav logo demo css-->
 +
<link rel="stylesheet" type="text/css" href="http://1.oucigem.sinaapp.com/slideshowdemo.css" /><!--slideshow demo css-->
 +
<link rel="stylesheet" type="text/css" href="http://1.oucigem.sinaapp.com/slideshowstyle.css" /><!--slideshow style css-->
 +
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
 +
<noscript>
 +
<link rel="stylesheet" type="text/css" href="http://1.oucigem.sinaapp.com/nojs.css"/>
 +
</noscript>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!--jquery js-->
 +
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/OUC-nav.js"></script><!--nav js-->
 +
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/jquery.cslider.js"></script><!--slideshow jquery js-->
 +
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/modernizr.custom.28468.js"></script><!--slideshow main js-->
 +
<div>
 +
        <script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-home-hof.js"></script><!--hof js-->
 +
        <link href='http://1.oucigem.sinaapp.com/ouc-home-hof.css' rel='stylesheet' type='text/css'>
 +
</div>
 +
<style>
 +
h3 {
 +
font-size: 27px;
}
}
-
.right-menu li a { background:transparent;top:-6px;}
+
#top-section{
-
.firstHeading{display:none;}                                                 
+
  width:99%;
-
#content{width:100%;
+
-
        padding:0px;      }
+
-
#contentSub{display:none;}
+
-
#top-section {
+
-
        border-bottom:0px;
+
-
height:0px;
+
-
background:transparent;
+
-
        width:100%;
+
-
}                                                                        /* General Demo Style */
+
-
body{
+
-
background: #fff;
+
-
color: #000;
+
-
font-size: 13px;
+
-
}
+
-
a{
+
-
color: #555;
+
-
text-decoration: none;
+
-
}
+
-
.wrapper{
+
-
position: relative;
+
-
width: 100%;
+
-
}
+
-
.wrapper p{
+
-
clear: both;
+
-
font-size: 24px;
+
-
line-height: 40px;
+
-
text-align: center;
+
-
}
+
-
.reference{
+
-
padding-top: 40px;
+
-
}
+
-
h1{
+
-
font-size: 34px;
+
-
position:relative;
+
-
color: #000;
+
-
font-weight: 400;
+
-
text-shadow: 0px 0px 1px rgba(0,0,0,0.3);
+
-
        padding: 20px;
+
-
z-index:1000;
+
-
text-transform: uppercase;
+
-
text-align: center;
+
}
}
-
h1 span{
+
#menubar{
-
font-family: 'Playfair Display', serif;
+
      top:0;
-
font-style: italic;
+
-
text-transform: none;
+
-
font-size: 20px;
+
}
}
-
.index_header_wrp {
+
a:hover {
-
     padding: 4px 0px 0px 0px;
+
     text-decoration: none;
-
    background: url("https://static.igem.org/mediawiki/igem.org/1/1b/OUC-China-home_header_backgroundimg.png")  repeat-x scroll 0% 0% transparent;
+
-
    border-bottom:1px solid #dbdee3;
+
}
}
-
.index_header {
+
#footer-box{
height: 50px;
height: 50px;
-
    margin: 13px auto;
+
width:100%;
-
    position: relative;
+
margin-top:10px;
-
}
+
margin-bottom:-10px;
-
#nav{
+
background-color:#1487DF;
-
margin:0;
+
border:none;
-
padding:0 0 0 1px;
+
padding-left:0;
-
list-style:none;
+
padding-right:0;
-
position:absolute;
+
-
top:0;
+
-
right:120px;
+
-
background:url(https://static.igem.org/mediawiki/2012/b/b2/Ouc-China-home-sep.gif) no-repeat;
+
}
}
-
#nav li {
+
#ouc-footer{
-
padding:0 1px 0 0;
+
      text-align: center;  
-
float:left;
+
      margin-top: 100px;
-
width:100px;
+
}
-
display:inline;
+
#footer a
-
background:url(https://static.igem.org/mediawiki/2012/b/b2/Ouc-China-home-sep.gif) no-repeat 100% 0;
+
{
 +
color:#ffffff;
 +
        font-size:16px;
 +
        line-height: 22px;
}
}
-
#nav a{
+
#ouc-tools ul li {
-
color: #000000;
+
    display: inline-block;
-
display:block;
+
    margin-right: 20px;
-
text-decoration: none;  
+
    vertical-align: middle;
-
font-weight: bold;
+
-
font-size:17px;
+
-
font-family: 'Playfair Display', serif;
+
-
font-style:italic;
+
-
background:url(https://static.igem.org/mediawiki/2012/2/2a/Ouc-China-home-btn-nav_.png) no-repeat 0 -9999px;
+
-
padding:46px 5px 15px 16px;
+
}
}
-
#nav a:hover{/* 鼠标悬停的样式 */
+
.nr {
-
background-position:0 0; /* 背景图被放到了 看得见的地方。 */
+
padding-left: 240px;
-
text-decoration:none;
+
-
color:#777777;  
+
}
}
-
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
+
.hmoverview{
-
margin:0;
+
height:394px;
-
padding:0;
+
background: url(https://static.igem.org/mediawiki/2012/e/ea/Ouc-home-humanpractice.jpg) 50% 0 no-repeat;
 +
margin: 20px auto 0;
}
}
-
html,body {
+
.hmguide{
-
margin:0;
+
width: 1000px;
-
padding:0;
+
height: 430px;
-
}
+
-
table {
+
-
border-collapse:collapse;
+
-
border-spacing:0;
+
-
}
+
-
fieldset,img {
+
-
border:0;
+
-
}
+
-
input{
+
-
border:1px solid #b0b0b0;
+
-
padding:3px 5px 4px;
+
-
color:#979797;
+
-
width:190px;
+
-
}
+
-
address,caption,cite,code,dfn,th,var {
+
-
font-style:normal;
+
-
font-weight:normal;
+
-
}
+
-
ol,ul {
+
-
list-style:none;
+
-
}
+
-
caption,th {
+
-
text-align:left;
+
-
}
+
-
h1,h2,h3,h4,h5,h6 {
+
-
font-size:100%;
+
-
font-weight:normal;
+
-
}
+
-
q:before,q:after {
+
-
content:'';
+
-
}
+
-
abbr,acronym { border:0;
+
-
}
+
-
 
+
-
.ei-slider{
+
-
position: relative;
+
-
width: 100%;
+
-
max-width: 1920px;
+
-
height: 400px;
+
margin: 0 auto;
margin: 0 auto;
 +
padding: 0 10px;
}
}
-
.ei-slider-loading{
+
.hmguide h3{
-
width: 100%;
+
line-height:50px;
-
height: 100%;
+
-
position: absolute;
+
-
top: 0px;
+
-
left: 0px;
+
-
z-index:999;
+
-
background: rgba(0,0,0,0.9);
+
-
color: #fff;
+
-
text-align: center;
+
-
line-height: 400px;
+
}
}
-
.ei-slider-large{
+
.hmguide ul{
-
height: 100%;
+
         list-style:none;
-
width: 100%;
+
-
position:relative;
+
-
overflow: hidden;
+
-
}
+
-
.ei-slider-large li{
+
-
position: absolute;
+
-
top: 0px;
+
-
left: 0px;
+
-
overflow: hidden;
+
-
height: 100%;
+
-
width: 100%;
+
-
}
+
-
.ei-slider-large li img{
+
-
width: 100%;
+
-
}
+
-
.ei-title{
+
-
position: absolute;
+
-
right: 50%;
+
-
margin-right: 13%;
+
-
top: 30%;
+
-
}
+
-
.ei-title h2, .ei-title h3{
+
-
text-align: right;
+
-
}
+
-
.ei-title h2{
+
-
font-size: 40px;
+
-
line-height: 50px;
+
-
font-family: 'Playfair Display', serif;
+
-
font-style: italic;
+
-
color: #b5b5b5;
+
-
         border-bottom-style:none;
+
-
}
+
-
.ei-title h3{
+
-
font-size: 70px;
+
-
line-height: 70px;
+
-
font-family: 'Open Sans Condensed', sans-serif;
+
-
text-transform: capitalize;
+
-
color: #000;
+
-
}
+
-
.ei-slider-thumbs{
+
-
height: 13px;
+
-
margin: 0 auto;
+
-
position: relative;
+
}
}
-
.ei-slider-thumbs li{
+
.hmguide ul li{
-
position: relative;
+
width: 250px;
 +
height: 365px;
float: left;
float: left;
-
height: 100%;
+
margin-left: 70px;
}
}
-
.ei-slider-thumbs li.ei-slider-element{
+
.hmguide ul li img{
-
top: 0px;
+
width: 240px;
-
left: 0px;
+
height: 180px;
-
position: absolute;
+
border: 5px solid #f3f3f3;
-
height: 100%;
+
-
z-index: 10;
+
-
text-indent: -9000px;
+
-
background: #000;
+
-
background: rgba(0,0,0,0.9);
+
}
}
-
.ei-slider-thumbs li a{
+
.hmguide ul li h4{
-
display: block;
+
width: 250px;
-
text-indent: -9000px;
+
line-height: 16px;
-
background: #666 ;
+
font-size: 16px;
-
width: 100%;
+
margin-top:5px;
-
height: 100%;
+
text-align: center;
-
cursor: pointer;
+
height:32px;
-
-webkit-box-shadow:  
+
color:black;
-
        0px 1px 1px 0px rgba(0,0,0,0.3),
+
-
        0px 1px 0px 1px rgba(255,255,255,0.5);
+
-
-moz-box-shadow:  
+
-
        0px 1px 1px 0px rgba(0,0,0,0.3),
+
-
        0px 1px 0px 1px rgba(255,255,255,0.5);
+
-
box-shadow:  
+
-
        0px 1px 1px 0px rgba(0,0,0,0.3),
+
-
        0px 1px 0px 1px rgba(255,255,255,0.5);
+
-
-webkit-transition: background 0.2s ease;
+
-
    -moz-transition: background 0.2s ease;
+
-
    -o-transition: background 0.2s ease;
+
-
    -ms-transition: background 0.2s ease;
+
-
    transition: background 0.2s ease;
+
}
}
-
.ei-slider-thumbs li a:hover{
+
.hmguide ul li h4 a{
-
background-color: #f0f0f0;
+
color:#000;
}
}
-
.ei-slider-thumbs li img{
+
.hmguide ul li h4 a:hover{
-
position: absolute;
+
color:#168eda;
-
bottom: 50px;
+
-
opacity: 0;
+
-
z-index: 999;
+
-
max-width: 100%;
+
-
-webkit-transition: all 0.4s ease;
+
-
    -moz-transition: all 0.4s ease;
+
-
    -o-transition: all 0.4s ease;
+
-
    -ms-transition: all 0.4s ease;
+
-
    transition: all 0.4s ease;
+
-
-webkit-box-reflect:
+
-
        below 0px -webkit-gradient(
+
-
            linear,
+
-
            left top,
+
-
            left bottom,
+
-
            from(transparent),
+
-
            color-stop(50%, transparent),
+
-
            to(rgba(255,255,255,0.3))
+
-
            );
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+
}
}
-
.ei-slider-thumbs li:hover img{
+
.hmguide ul li p span{
-
opacity: 1;
+
        color:#0d7ad5;
-
bottom: 13px;
+
float: right;
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+
-
}
+
-
.text{
+
-
      margin:0px 200px 0px 200px;
+
-
      font-family:'Arial','Times Roma',serif;
+
-
      width: 960px;
+
-
}
+
-
.text h1{
+
-
        margin:10px 0px 0px 0px;
+
-
        text-align:left;
+
-
        font-size:30px;
+
-
        border-bottom-style:none;
+
-
        text-transform:none;
+
-
}
+
-
.text h2{
+
         font-weight:bold;
         font-weight:bold;
-
        font-size:18px;
 
}
}
-
.text p{
+
.hmguide ul li p span a{
-
         text-indent:30px;    
+
         color:#0d7ad5;
}
}
-
.bottom{
+
.hmguide ul li p span a:visited{
-
      border-top: 1px solid #CCC;
+
color:#168eda;
-
      padding: 20px 15px;
+
-
      width: 1000px;
+
-
      margin:0 auto;
+
-
      color: #999;
+
-
      font-size: 13px;
+
-
      font-family: 'Playfair Display','Georgia',serif;
+
-
      line-height:22px;
+
-
}
+
-
.bottom-right{
+
-
    text-align:right;
+
-
}
+
-
.bottom-left{
+
-
      float: left;
+
-
}
+
-
a:visited {
+
-
color: #999;
+
-
}
+
-
.map{
+
-
margin-top:auto;
+
-
margin-left:300px;
+
-
margin-bottom:25px;
+
-
}
+
-
.myname{
+
-
      font-style: italic;
+
-
}
+
-
@media screen and (max-width: 830px) {
+
-
.ei-title{
+
-
position: absolute;
+
-
right: 0px;
+
-
margin-right: 0px;
+
-
width: 100%;
+
-
text-align: center;
+
-
top: auto;
+
-
bottom: 10px;
+
-
background: #fff;
+
-
background: rgba(255,255,255,0.9);
+
-
padding: 5px 0;
+
-
text-transform:none;
+
-
}
+
-
.ei-title h2, .ei-title h3{
+
-
text-align: center;
+
-
}
+
-
.ei-title h2{
+
-
font-size: 20px;
+
-
line-height: 24px;
+
-
                border-bottom:0px;
+
-
}
+
-
.ei-title h3{
+
-
font-size: 30px;
+
-
line-height: 40px;
+
-
}
+
-
}
+
-
@font-face {
+
-
  font-family: 'Playfair Display';
+
-
  font-style: italic;
+
-
  font-weight: 400;
+
-
  src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'), url(http://themes.googleusercontent.com/static/fonts/playfairdisplay/v6/9MkijrV-dEJ0-_NWV7E6N3aqFElqJjV-H5EUExnZgmU.woff) format('woff');
+
-
}
+
-
@font-face {
+
-
  font-family: 'Open Sans Condensed';
+
-
  font-style: normal;
+
-
  font-weight: 300;
+
-
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
+
}
}
</style>
</style>
-
<body>
 
-
<div class="index_header_wrp">
 
-
    <div class="index_header">
 
-
        <a href="" class="login_logo"></a>
 
-
    </div>
 
-
</div>
 
-
<div class="index_bg">
 
-
<ul id="nav">
 
-
<li><a href="">Home</a></li>
 
-
<li><a href="">Team</a></li>
 
-
<li><a href="">Project</a></li>
 
-
<li><a href="">Modeling</a></li>
 
-
<li><a href="">Notebook</a></li>
 
-
<li><a href="">Safety</a></li>
 
-
</ul>
 
-
<div class="wrapper">
 
-
                <div id="ei-slider" class="ei-slider">
 
-
                    <ul class="ei-slider-large">
 
-
<li>
 
-
                            <img src="https://static.igem.org/mediawiki/2012/e/e2/OUC-China-KangLi.jpg" alt="Kang Li"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>Captain </h2>
 
-
                                <h3>Kang Li</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/b/b8/OUC-China-GongMinghao.jpg" alt="GongMinghao" />
 
-
                            <div class="ei-title">
 
-
                                <h2>Friendly</h2>
 
-
                                <h3>Gong Minghao</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/e/ef/Laiweihong.jpg" alt="Lai Weihong" />
 
-
                            <div class="ei-title">
 
-
                                <h2>Gentle</h2>
 
-
                                <h3>Lai Weihong</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/3/3b/OUC-China-Z.jpg" alt="Zhang Peiran"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>a regular guy</h2>
 
-
                                <h3>Zhang Peiran</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/9/92/OUC-China-LiJiaheng.jpg" alt="Li Jiaheng"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>cool</h2>
 
-
                                <h3>Li Jiaheng</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/b/b4/OUC-China-WangTianhe.jpg" alt="Wang Tianhe"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>Loving</h2>
 
-
                                <h3>Wang Tianhe</h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/2/20/OUC-China-YangZhongzhou.jpg" alt="Yang Zhongzhou"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>Diligent</h2>
 
-
                                <h3>Yang Zhongzhou</a></h3>
 
-
                            </div>
 
-
                        </li>
 
-
                      <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/6/67/OUC-China-ChangLei.jpg" alt="Chang Lei"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>charming smile</h2>
 
-
                                <h3>Chang Lei</a></h3>
 
-
                            </div>
 
-
                        </li>
 
-
                        <li>
 
-
                            <img src="https://static.igem.org/mediawiki/igem.org/b/b3/OUC-China-ZhangC.Y..jpg" alt="Zhang Cunyan"/>
 
-
                            <div class="ei-title">
 
-
                                <h2>innocent</h2>
 
-
                                <h3>Zhang Chunyan</a></h3>
 
-
                            </div>
 
-
                        </li>
 
-
                    </ul>
 
-
                    <ul class="ei-slider-thumbs">
 
-
                        <li class="ei-slider-element">Current</li>
 
-
<li><a href="#">Slide 6</a><img src="https://static.igem.org/mediawiki/2012/d/d5/Kanglimini.jpg" alt="KangLi" /></li>
 
-
                        <li><a href="#">Slide 1</a><img src="https://static.igem.org/mediawiki/igem.org/6/68/GongMinghaomini.jpg" alt="GongMinghao" /></li>
 
-
                        <li><a href="#">Slide 2</a><img src="https://static.igem.org/mediawiki/igem.org/3/37/OUC-China-Laiweihongmini.jpg" alt="GongMinghao" /></li>
 
-
                        <li><a href="#">Slide 3</a><img src="https://static.igem.org/mediawiki/igem.org/8/8a/OUC-China-ZhangPeiranmini.jpg" alt="ZhangPeiranmini" /></li>
 
-
                        <li><a href="#">Slide 4</a><img src="https://static.igem.org/mediawiki/igem.org/7/78/OUC-China-LiJiahengmini.jpg" alt="LiJiaheng" /></li>
 
-
                        <li><a href="#">Slide 5</a><img src="https://static.igem.org/mediawiki/igem.org/6/6e/WangTianhemini.jpg" alt="WangTianhe" /></li>
 
-
                        <li><a href="#">Slide 7</a><img src="https://static.igem.org/mediawiki/igem.org/d/d1/OUC-China-YangZhongzhoumini.jpg" alt="YangZhongzhou" /></li>
 
-
                        <li><a href="#">Slide 7</a><img src="https://static.igem.org/mediawiki/igem.org/6/66/OUC-China-ChangLeimini.jpg" alt="ChangLei" /></li>
 
-
                        <li><a href="#">Slide 7</a><img src="https://static.igem.org/mediawiki/2012/1/1e/OUC-China-ZhangC.Y.mini.jpg" alt="ZhangC.Y." /></li>
 
-
                    </ul><!-- ei-slider-thumbs -->
 
-
                </div><!-- ei-slider -->
 
-
            </div><!-- wrapper -->
 
-
<div class="text">
+
<div id="menu-wrapper">
 +
<div id="logo">
 +
</div>
 +
<ul class="menu">
 +
<li> <a href="#">Index</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/Project/Overview">Project</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/Modeling/Overview">Modeling</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Overview">Human Practice</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/Team/members">Team</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/Parts">Parts</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/Safety">Safety</a> </li>
 +
<li> <a href="https://2012.igem.org/Team:OUC-China/labnote">Note</a> </li>
 +
</ul>
 +
</div>
 +
<div id="submenu-wrapper">
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China">
 +
<img src="https://static.igem.org/mediawiki/2012/a/af/Projectoverview.jpg" />
 +
Home
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China#hmo">
 +
<img src="https://static.igem.org/mediawiki/2012/4/49/Humanpracticeoverview.jpg" />
 +
HumanPractice index
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Judgingform">
 +
<img src="https://static.igem.org/mediawiki/2012/6/6e/Juding-form.jpg" />
 +
JudgingForm
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/contactus">
 +
<img src="https://static.igem.org/mediawiki/2012/1/1e/Contact-us.jpg" />
 +
Contact Us
 +
</a>
 +
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/Overview">
 +
<img src="https://static.igem.org/mediawiki/2012/5/59/Ouc-nav-project-overview.jpg" />
 +
Project Overview
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/Sensor/AbstractandBackground">
 +
<img src="https://static.igem.org/mediawiki/2012/1/15/Ouc-nav-project-secsor.jpg" />
 +
Sensor
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/DesignMaking/Abstract">
 +
<img src="https://static.igem.org/mediawiki/2012/3/34/Ouc-nav-device.jpg" />
 +
Decision-making Device
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/GVP/GasandBackground">
 +
<img src="https://static.igem.org/mediawiki/2012/5/57/Ouc-nav-project-gvp.jpg" />
 +
Gas vesicle
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Modeling/ODEModel">
 +
<img src="https://static.igem.org/mediawiki/2012/f/f6/Ouc-nav-modeling-ode.jpg" />
 +
ODEModel
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Modeling/ParameterSensitivityAnalysis">
 +
<img src="https://static.igem.org/mediawiki/2012/c/cf/Ouc-nav-modeling-sensertitive.jpg" />
 +
Parameter Sensitivity Analysis
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Modeling/ParameterSweep">
 +
<img src="https://static.igem.org/mediawiki/2012/0/07/Ouc-nav-modeling-sweep.jpg" />
 +
Parameter Sweep
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Modeling/NoiseAnalysis">
 +
<img src="https://static.igem.org/mediawiki/2012/0/04/Ouc-nav-modeling-noise.jpg" />
 +
Noise Analysis
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Overview">
 +
<img src="https://static.igem.org/mediawiki/2012/6/61/Ouc-nav-humanoverview.jpg" />
 +
HumanPractice Overview
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Communication">
 +
<img src="https://static.igem.org/mediawiki/2012/c/cc/Ouc-nav-Communication.jpg" />
 +
Meeting and Academic Communication
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Camps">
 +
<img src="https://static.igem.org/mediawiki/2012/8/8d/Ouc-nav-humcamp.jpg" />
 +
Camps, Class and Lectures
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/SpecialHM">
 +
<img src="https://static.igem.org/mediawiki/2012/b/b7/Ouc-nav-hmspcial.jpg" />
 +
Special HP
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Team/members">
 +
<img src="https://static.igem.org/mediawiki/2012/6/6d/Ouc-nav-team.jpg" />
 +
Team Members
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Team/instructor">
 +
<img src="https://static.igem.org/mediawiki/2012/3/35/Ouc-nav-instructor.jpg" />
 +
Instructors
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Team/AcknowledgementandCooperation">
 +
<img src="https://static.igem.org/mediawiki/2012/a/a6/Ouc-nav-co.jpg" />
 +
Acknowledgement&Cooperation
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Team/Lab">
 +
<img src="https://static.igem.org/mediawiki/2012/a/a7/Ouc-nav-lab.jpg" />
 +
Lab
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Parts">
 +
<img src="https://static.igem.org/mediawiki/2012/f/f9/Ouc-nav-parts.jpg" />
 +
Parts
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/Safety">
 +
<img src="https://static.igem.org/mediawiki/2012/5/5d/Ouc-nav-safety.jpg" />
 +
Safety
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/labnote">
 +
<img src="https://static.igem.org/mediawiki/2012/8/8b/Ouc-nav-labnote.jpg" />
 +
Labnote
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://skydrive.live.com/redir?resid=6A13E80E2A176A23!249&authkey=!AGsNOi9excznIt8">
 +
<img src="https://static.igem.org/mediawiki/2012/4/4e/Ouc-nav-modelingnote.jpg" />
 +
Modeling Note
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/protocol">
 +
<img src="https://static.igem.org/mediawiki/2012/7/7d/Ouc-pro.png" />
 +
Protocols
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="container">
 +
<div id="da-slider" class="da-slider">
 +
<div class="da-slide">
 +
<h2 >Overview</h2>
 +
<p>Red tide detector:
 +
Facilitate small RNA as information processing media;
<br/>
<br/>
 +
and gas vesicle as a novel output actuator...
<br/>
<br/>
-
<h1>Description of our project</h1>
+
Response to the overloading phosphate or nitrate when they exceeds warning limit...<br/>
-
<h2>Introduction: motivation and background</h2>
+
</p>
-
<p>This year, our projects focus on biological methods for warning and countermeasure against water bloom and red tide. As we know, this ecological disaster, due to
+
<a href="https://2012.igem.org/Team:OUC-China/Project/Overview" class="da-link">Read more</a>
 +
<div class="da-img"><img src="https://static.igem.org/mediawiki/2012/1/19/Ouc-final.png" alt="overview" /></div>
 +
</div>
 +
<div class="da-slide">
 +
<h2>Sensor</h2>
 +
<p>The sensors for next-generation detector of red tide!</p>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/Sensor/AbstractandBackground" class="da-link">Read more</a>
 +
<div class="da-img"><img src="https://static.igem.org/mediawiki/2012/3/32/Home-sensor.png" alt="sensor" /></div>
 +
</div>
 +
<div class="da-slide">
 +
<h2>Model-Driven Design</h2>
 +
<p>
 +
Get specific directions for ternary system design from simulation...
 +
</p>
 +
<a href="https://2012.igem.org/Team:OUC-China/Modeling/Overview" class="da-link">Read more</a>
 +
<div class="da-img"><img src="https://static.igem.org/mediawiki/2012/2/26/Home-modeling.png" alt="Home-modeling" /></div>
 +
</div>
 +
<div class="da-slide">
 +
<h2>Making decision through sRNA</h2>
 +
<p>The sophisticated  'CPU' of our red tide detector...<br/>
 +
Engineering CPU for your own "synthia"!</p>
 +
<a href="https://2012.igem.org/Team:OUC-China/Project/DesignMaking/Abstract" class="da-link">Read more</a>
 +
<div class="da-img"><img src="https://static.igem.org/mediawiki/2012/2/2c/Home-decision-making-device.png" alt="Home-decision-making-device" /></div>
 +
</div>
-
nutrient overload and followed by oxygen deprivation, tortured many countries and caused gigantic economic loss and ecological disruption. We propose that to prevent
+
<div class="da-slide">
-
 
+
<h2>Floating Device</h2>
-
it happen, a precise sensor for alarming the arrival of water bloom and an effective actuator to solve it are needed. So our projects can be summarized as two parts:
+
<p>The output actuator of our red tide detector...<br/>
-
The first goal is to develop a synthetic system which can sense the outer signal and have a precise decision-making about to what degree will there be a water bloom.
+
Gas vesicle as our floating device</p>
-
 
+
<a href="https://2012.igem.org/Team:OUC-China/Project/GVP/GasandBackground" class="da-link">Read more</a>
-
We will facilitate a fine-tuned ratio sensor sensing the ratio of nitrogen and phosphorus to achieve this.</p>
+
<div class="da-img"><img src="https://static.igem.org/mediawiki/2012/a/a2/Ouc-home-floating-device.png" /></div>
-
<p>The second goal is to construct an actuator with ‘portable’ gas vesicles which enable our engineered microbes to float on the water surface.</p>
+
</div>
-
<p>The third goal is to provide our actuator with several functions making it a versatile cleaner to contain the water bloom.</p>
+
<nav class="da-arrows">
-
<br/>
+
<span class="da-arrows-prev"></span>
-
<h2>What trigger water bloom?</h2>
+
<span class="da-arrows-next"></span>
-
<p>The well-recognized culprit of water bloom is overload of nutrient (eutrophication).Take the Baltic Sea as example, dumping from sewage-treatment plants, farming
+
</nav>
-
 
+
</div>
-
and industry has poured about 20 million tons of nitrogen and 2 million tons of phosphorus into the Baltic over the past 50 years, which give rise to long-lasting
+
        </div>
-
 
+
<div id="project_intro_box">
-
algal blooms. The net effect is an excess of phosphorous, which fuels nitrogen-fixing cyanobacteria and triggers algal blooms as the essential condition. Another
+
<div class="project_intro">
-
 
+
<h2>Oceanfloat and Oceanfeel<br/><span>——a floating biosensor</span></h2>
-
crucial factor is an excess of nitrogen which can amplify the effect and enhance overgrowth of the cyanobacteria and alga. And many research indicate that many a
+
</div>
-
 
+
</div>
-
particular ratio of this two element, relatively stable, coincide with the water bloom. It suggests that a ratio sensor to alarm for water bloom is reliable.</p>
+
<section id="project_step">
-
<br/>
+
<div class="moduletable">
-
<h2>What is a ratio sensor?</h2>
+
<h3>Our Project</h3>
-
<p>As we have mentioned, a ratio sensor could be an indicator for the arrival of water bloom. But only when we make a fine-tuned ratio sensor which can sense the two
+
<div>
-
 
+
<ul id="tab">
-
different signals(nitrogen&phosphorus) precisely, account the ratio accurately and perform a remarkable reporting signal, can we assure that it is a fine-tuned and
+
<li class="on" id="tab_1" onclick="switchTab(1)"><img src="https://static.igem.org/mediawiki/2012/8/8f/Ouc-home-step1.png" /><span>Part1</span></li>
-
 
+
<li id="tab_2" onclick="switchTab(2)"><img src="https://static.igem.org/mediawiki/2012/d/de/Ouc-home-step3.png" /><span>Part2</span></li>
-
reliable alarm.<br/>
+
<li id="tab_3" onclick="switchTab(3)"><img src="https://static.igem.org/mediawiki/2012/a/a4/Ouc-home-steplast.png" /><span>Part3</span></li>
-
a) We will facilitate phoB promoter and NtrB promoter for sensing phosphorus and nitrogen respectively.<br/>
+
</ul>
-
b) Ratio accounting is implemented with an artificial system of RNA –mediated regulation.<br/>
+
<div style="clear: both;">&nbsp;</div>
-
c) We choose GFP as the reporter to show our result.<br/>
+
<div class="tuxing"><img src="https://static.igem.org/mediawiki/2012/e/e2/Ouc-hometab_arrow.png" /></div>
-
<br/>
+
<ul id="tab_con">
-
<h2>What is gas vesicle?</h2>
+
<li id="tab_con_1">
-
<p>To facilitate our E.coli to float on the water surface, we should equip our engineered E.coli with portable generators of gas vesicles. The gas vesicle is a hollow
+
<div class="tup"><img src="https://static.igem.org/mediawiki/2012/3/3a/Ouc-home-step1-2.png" /></div>
-
 
+
<div class="nr">
-
structure made of protein. It usually has the form of a cylindrical tube closed by conical end caps. Gas vesicles provide aquatic microbes with buoyancy so that they
+
<h1>Sensor</h1>
-
 
+
<p>Our phosphate- and nitrate-sensitive devices are responsible for detection of environmental phosphate and nitrate. Besides that they transform the input signals into "readable information" for decision-making devices.</p>
-
can control their vertical migration. It could have been a great tool to hold our engineered E.coli on the water surface, as the previous teams had shown us. However,
+
<p>much work has been done for characterization and modification of nitrate- and phosphate-sensitive promoters. A whole set of design ideas for TCS modifications are also presented for other igemers. Additionally an actuator that can remove the phosphate is recommended.</p>
-
 
+
<p><a href="https://2012.igem.org/Team:OUC-China/Project/Sensor/AbstractandBackground"><strong>learn more</strong></a>
-
due to the horrible length of its coding genes and the heavy burden it brought about to its host, the practical application remain difficult and uncertain. Our team
+
-
 
+
-
determines to break through the task by fine-tuning the expression pattern of gvpA and gvpC which test the most economical way to provide buoyancy.</p>
+
-
<br/>
+
-
<h2>How can our actuator curb the water bloom?</h2>
+
-
<p>So if the two projects above go well, we will focus on constructing a versatile warrior which can stifle the water bloom in the cradle. We may take advantage of
+
-
 
+
-
some genetic parts  to absorb and fix the nutrients , release toxins restricted to the toxic cyanobacteria and alga and even facilitate the mechanism of vertical
+
-
 
+
-
migration thereby bring the nutrients to the deeper area.</p>
+
-
<br/>
+
-
<br/>
+
-
<br/>
+
-
<br/>
+
</div>
</div>
-
<div class="map">
+
<div style="clear: both;">&nbsp;</div>
-
<div id="clustrmaps-widget"></div>
+
</li>
-
<script type="text/javascript">var _clustrmaps = {'url' : 'https://2012.igem.org/Team:OUC-China', 'user' : 1034709, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2012-08-07', 'lang' : 'zh', 'corners' : 'square' };
+
<li id="tab_con_2">
-
(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();
+
<div class="tup"><img src="https://static.igem.org/mediawiki/2012/a/a1/Ouc-home-step3-02.png" /></div>
-
</script>
+
<div class="nr">
-
<noscript>
+
<h1>Decision-making Device</h1>
-
<a href="http://www4.clustrmaps.com/user/c56fc9d5"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2012.igem.org-Team-OUC-China-thumb.jpg" alt="Locations of visitors to this page" /></a>
+
<p>Our decision-making device aims at processing the concentration change of nitrate or phosphate into visible buoyancy increase. Comparator recognizes the difference of two inputs quantitatively ,while ratio sensor could senses a particular ratio between two inputs.</p>
-
</noscript>
+
<p>Both comparator and ratio sensor facilitate a ternary system consisted of two small RNA and GFP mRNA. The concentration change of external two inducers leads to the transcription rate change of small RNA(alpha s)in this ternary system, the interactions between three RNAs will lead to interesting behaviors of our system like sensing the difference between two inputs quantitatively(Comparator) or the ratio of two inputs(Ratio senor).</p>
 +
<p><a href="https://2012.igem.org/Team:OUC-China/Project/DesignMaking/Abstract"><strong>learn more</strong></a>
</div>
</div>
-
<div class="bottom">
+
<div style="clear: both;">&nbsp;</div>
-
  <div class="bottom-right">
+
</li>
-
    <span class="bottom-left"> <a href="https://2012.igem.org/Special:Upload"  target="_blank">Upload file</a>
+
<li id="tab_con_3">
-
    ·
+
<div class="tup"><img src="https://static.igem.org/mediawiki/2012/f/fa/Ouc-step3-last.png" /></div>
-
    <a href="mailto:oucigem@163.com" target="_blank">Contact us</a>
+
<div class="nr">
-
    ·
+
<h1>Floating Device</h1>
-
    <a href="http://blog.sina.com.cn/u/1598511912" target="_blank">Find us</a>
+
<p>In our project, by transforming the buoyancy device BBa_K737010(designed by ourselves), the gas vesicle cluster from the genome of Planktothrix rubescens into E.Coli, we succeed in making Escherichia.Coli floating on the surface of the water. It can help the cells produce the gas vesicle inside, which could make densities significant stratification in the culture. Not only the gene cluster but the two parts BBa_K737006 and BBa_K737007, which produce the gas vesicle structure protein, can also make the Escherichia.Coli floating. We use the shorter length of the part achieve a better effect than BBa_K190033 and the gas vesicle application prospect.</p>
-
    ·
+
<p><a href="https://2012.igem.org/Team:OUC-China/Project/GVP/GasandBackground"><strong>learn more</strong></a>
-
    <span class="myname">designed by <a href="mailto:pengyongouc@gmail.com">Peng Yong  </a>
+
-
                                    <a href="mailto:dolorespark1228@gmail.com"> Bao Yingying </a></span></span>
+
-
</span>
+
-
<a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Attribution 3.0 Unported" width="88" height="31"></a>
+
-
<a href="http://www.mediawiki.org/"><img src="/wiki/skins/common/images/poweredby_mediawiki_88x31.png" height="31" width="88" alt="Powered by MediaWiki"></a>
+
-
 
+
-
  </div>
+
</div>
</div>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+
<div style="clear: both;">&nbsp;</div>
-
<script>
+
</li>
-
    (function( window, $, undefined ) {
+
</ul></div>
 +
</div>
 +
</section>
 +
<div class="hmoverview" id="hmo"></div>
 +
<div class="hmguide">
 +
<h3>Human practice</h3>
 +
<ul>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Communication" title="Meeting and Academic Communication" target="_blank"><img src="https://static.igem.org/mediawiki/2012/d/d7/Ouc-homehp01.jpg" alt="Meeting and Academic Communication" title="Meeting and Academic Communication" /></a>
 +
<h4><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Communication" title="Meeting and Academic Communication" target="_blank">Meeting and Academic Communication</a></h4>
 +
<p>As a new born iGEM team,questions below puzzled us for a very long time. However,Peking Univerisity iGEM team helped us a lot by giving us dire……<span><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Communication" title="Meeting and Academic Communication" target="_blank">[Learn more]</a></span></p>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Camps" title="Camps, Class and Lectures" target="_blank"><img src="https://static.igem.org/mediawiki/2012/a/a5/Ouc-homehp02.jpg" alt="Camps, Class and Lectures" title="Camps, Class and Lectures" /></a>
 +
<h4><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Camps" title="Camps, Class and Lectures" target="_blank">Camps, Class and Lectures</a></h4>
 +
<p>Last year, we held 1st summer camp of life science and technology. Through this camp, most of the participants……<span><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/Camps" title="Camps, Class and Lectures" target="_blank">[Learn more]</a></span></p>
 +
</li>
 +
<li>
 +
<a href="https://2012.igem.org/Team:OUC-China/HumanPractice/SpecialHM" title="Special OUC-China HP" target="_blank"><img src="https://static.igem.org/mediawiki/2012/4/40/Ouc-homehp03.jpg" alt="Special OUC-China HP" title="Special OUC-China HP" /></a>
 +
<h4><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/SpecialHM" title="Special OUC-China HP" target="_blank">Special OUC-China HP</a></h4>
 +
<p>Because our project of this focuses on the ratio of N and P and cyanobacteria in the sea water, we consulted professors who study on ecology……<span><a href="https://2012.igem.org/Team:OUC-China/HumanPractice/SpecialHM" title="Special OUC-China HP" target="_blank">[Learn more]</a></span></p>
 +
</li>
 +
</ul>
 +
</div>
 +
<br/>
 +
<div id="ouc-footer">
 +
        <div id="ouc-tools">
 +
         
 +
            <ul>
 +
                <li id="ouc-clustrmaps-wrapper">
 +
                    <div id="clustrmaps-widget"></div><script type="text/javascript">var _clustrmaps = {'url' : 'https://2012.igem.org/Team:OUC-China', 'user' : 1034709, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2012-09-22', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www4.clustrmaps.com/user/c56fc9d5"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2012.igem.org-Team-OUC-China-thumb.jpg" alt="Locations of visitors to this page" /></a></noscript>
 +
                </li>
 +
                <li>
 +
<a href="http://www.renren.com/296396903/profile?ref=opensearch_normal"><img src="https://static.igem.org/mediawiki/2012/d/d2/Ouc-footer-cmlsast.jpg" alt="OUC CMLS AST" border="0"></a> 
 +
                </li>
 +
                <li>
 +
                    <a href="https://2012.igem.org/Team:OUC-China/contactus"><img src="https://static.igem.org/mediawiki/2012/5/5e/OUC-footer-contact.jpg" alt="Contact Us" border="0"></a>
 +
                </li>
 +
                <li style="width:160px;">
 +
<form action="/Special:Search" id="searchform" style=" border-color:#000;">
 +
<input id="searchInput" name="search" type="text" title="Search 2011.igem.org [f]" accesskey="f" value="">
 +
<input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" />&nbsp;
 +
<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
 +
</form>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
     
 +
    </div>
-
var $event = $.event, resizeTimeout;
+
<script type="text/javascript">
-
 
+
$(function() {
-
$event.special.smartresize = {
+
-
setup: function() {
+
-
$(this).bind( "resize", $event.special.smartresize.handler );
+
-
},
+
-
teardown: function() {
+
-
$(this).unbind( "resize", $event.special.smartresize.handler );
+
-
},
+
-
handler: function( event, execAsap ) {
+
-
// Save the context
+
-
var context = this,
+
-
args = arguments;
+
-
 
+
-
// set correct event type
+
-
event.type = "smartresize";
+
-
 
+
-
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
+
-
resizeTimeout = setTimeout(function() {
+
-
jQuery.event.handle.apply( context, args );
+
-
}, execAsap === "execAsap"? 0 : 100 );
+
-
}
+
-
};
+
-
 
+
-
$.fn.smartresize = function( fn ) {
+
-
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
+
-
};
+
-
+
-
$.Slideshow = function( options, element ) {
+
-
+
-
this.$el = $( element );
+
-
+
-
/***** images ****/
+
-
+
-
// list of image items
+
-
this.$list = this.$el.find('ul.ei-slider-large');
+
-
// image items
+
-
this.$imgItems = this.$list.children('li');
+
-
// total number of items
+
-
this.itemsCount = this.$imgItems.length;
+
-
// images
+
-
this.$images = this.$imgItems.find('img:first');
+
-
+
-
/***** thumbs ****/
+
-
+
-
// thumbs wrapper
+
-
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
+
-
// slider elements
+
-
this.$sliderElems = this.$sliderthumbs.children('li');
+
-
// sliding div
+
-
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
+
-
// thumbs
+
-
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
+
-
+
-
// initialize slideshow
+
-
this._init( options );
+
-
+
-
};
+
-
+
-
$.Slideshow.defaults = {
+
-
// animation types:
+
-
// "sides" : new slides will slide in from left / right
+
-
// "center": new slides will appear in the center
+
-
animation : 'sides', // sides || center
+
-
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
+
-
autoplay : false,
+
-
// interval for the slideshow
+
-
slideshow_interval : 3000,
+
-
// speed for the sliding animation
+
-
speed : 800,
+
-
// easing for the sliding animation
+
-
easing : '',
+
-
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
+
-
titlesFactor : 0.60,
+
-
// titles animation speed
+
-
titlespeed : 800,
+
-
// titles animation easing
+
-
titleeasing : '',
+
-
// maximum width for the thumbs in pixels
+
-
thumbMaxWidth : 120
+
-
    };
+
-
+
-
$.Slideshow.prototype = {
+
-
_init : function( options ) {
+
-
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
+
$('#da-slider').cslider({
-
+
autoplay : true,
-
// set the opacity of the title elements and the image items
+
bgincrement : 450
-
this.$imgItems.css( 'opacity', 0 );
+
-
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
+
-
+
-
// index of current visible slider
+
-
this.current = 0;
+
-
+
-
var _self = this;
+
-
+
-
// preload images
+
-
// add loading status
+
-
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
+
-
+
-
$.when( this._preloadImages() ).done( function() {
+
-
+
-
// hide loading status
+
-
_self.$loading.hide();
+
-
+
-
// calculate size and position for each image
+
-
_self._setImagesSize();
+
-
+
-
// configure thumbs container
+
-
_self._initThumbs();
+
-
+
-
// show first
+
-
_self.$imgItems.eq( _self.current ).css({
+
-
'opacity' : 1,
+
-
'z-index' : 10
+
-
}).show().find('div.ei-title > *').css( 'opacity', 1 );
+
-
+
-
// if autoplay is true
+
-
if( _self.options.autoplay ) {
+
-
+
-
_self._startSlideshow();
+
-
+
-
}
+
-
+
-
// initialize the events
+
-
_self._initEvents();
+
-
+
-
});
+
-
+
-
},
+
-
_preloadImages : function() {
+
-
+
-
// preloads all the large images
+
-
+
-
var _self = this,
+
-
loaded = 0;
+
-
+
-
return $.Deferred(
+
-
+
-
function(dfd) {
+
-
+
-
_self.$images.each( function( i ) {
+
-
+
-
$('<img/>').load( function() {
+
-
+
-
if( ++loaded === _self.itemsCount ) {
+
-
+
-
dfd.resolve();
+
-
+
-
}
+
-
+
-
}).attr( 'src', $(this).attr('src') );
+
-
+
-
});
+
-
+
-
}
+
-
+
-
).promise();
+
-
+
-
},
+
-
_setImagesSize : function() {
+
-
+
-
// save ei-slider's width
+
-
this.elWidth = this.$el.width();
+
-
+
-
var _self = this;
+
-
+
-
this.$images.each( function( i ) {
+
-
+
-
var $img = $(this);
+
-
imgDim = _self._getImageDim( $img.attr('src') );
+
-
+
-
$img.css({
+
-
width : imgDim.width,
+
-
height : imgDim.height,
+
-
marginLeft : imgDim.left,
+
-
marginTop : imgDim.top
+
});
});
-
 
});
});
-
+
</script> <!--slide show-->
-
},
+
<!-- GA -->
-
_getImageDim : function( src ) {
+
<script type="text/javascript">
-
+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-
var $img    = new Image();
+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-
+
</script>
-
$img.src    = src;
+
<script type="text/javascript">
-
+
try {
-
var c_w = this.elWidth,
+
var pageTracker = _gat._getTracker("UA-2260508-2");
-
c_h = this.$el.height(),
+
pageTracker._trackPageview();
-
r_w = c_h / c_w,
+
} catch(err) {}</script>
-
+
-
i_w = $img.width,
+
-
i_h = $img.height,
+
-
r_i = i_h / i_w,
+
-
new_w, new_h, new_left, new_top;
+
-
+
-
if( r_w > r_i ) {
+
-
+
-
new_h = c_h;
+
-
new_w = c_h / r_i;
+
-
+
-
}
+
-
else {
+
-
+
-
new_h = c_w * r_i;
+
-
new_w = c_w;
+
-
+
-
}
+
-
+
-
return {
+
-
width : new_w,
+
-
height : new_h,
+
-
left : ( c_w - new_w ) / 2,
+
-
top : ( c_h - new_h ) / 2
+
-
};
+
-
+
-
},
+
-
_initThumbs : function() {
+
-
+
-
// set the max-width of the slider elements to the one set in the plugin's options
+
-
// also, the width of each slider element will be 100% / total number of elements
+
-
this.$sliderElems.css({
+
-
'max-width' : this.options.thumbMaxWidth + 'px',
+
-
'width' : 100 / this.itemsCount + '%'
+
-
});
+
-
+
-
// set the max-width of the slider and show it
+
-
this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
+
-
+
-
},
+
-
_startSlideshow : function() {
+
-
+
-
var _self = this;
+
-
+
-
this.slideshow = setTimeout( function() {
+
-
+
-
var pos;
+
-
+
-
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
+
-
+
-
_self._slideTo( pos );
+
-
+
-
if( _self.options.autoplay ) {
+
-
+
-
_self._startSlideshow();
+
-
+
-
}
+
-
+
-
}, this.options.slideshow_interval);
+
-
+
-
},
+
-
// shows the clicked thumb's slide
+
-
_slideTo : function( pos ) {
+
-
+
-
// return if clicking the same element or if currently animating
+
-
if( pos === this.current || this.isAnimating )
+
-
return false;
+
-
+
-
this.isAnimating = true;
+
-
+
-
var $currentSlide = this.$imgItems.eq( this.current ),
+
-
$nextSlide = this.$imgItems.eq( pos ),
+
-
_self = this,
+
-
+
-
preCSS = {zIndex : 10},
+
-
animCSS = {opacity : 1};
+
-
+
-
// new slide will slide in from left or right side
+
-
if( this.options.animation === 'sides' ) {
+
-
+
-
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
+
-
animCSS.left = 0;
+
-
+
-
}
+
-
+
-
// titles animation
+
-
$nextSlide.find('div.ei-title > h2')
+
-
  .css( 'margin-right', 50 + 'px' )
+
-
  .stop()
+
-
  .delay( this.options.speed * this.options.titlesFactor )
+
-
  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
+
-
  .end()
+
-
  .find('div.ei-title > h3')
+
-
  .css( 'margin-right', -50 + 'px' )
+
-
  .stop()
+
-
  .delay( this.options.speed * this.options.titlesFactor )
+
-
  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
+
-
+
-
$.when(
+
-
+
-
// fade out current titles
+
-
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
+
-
// reset style
+
-
$(this).show().css( 'opacity', 0 );
+
-
}),
+
-
+
-
// animate next slide in
+
-
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
+
-
+
-
// "sliding div" moves to new position
+
-
this.$sliderElem.stop().animate({
+
-
left : this.$thumbs.eq( pos ).position().left
+
-
}, this.options.speed )
+
-
+
-
).done( function() {
+
-
+
-
// reset values
+
-
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
+
-
_self.current = pos;
+
-
_self.isAnimating = false;
+
-
+
-
});
+
-
+
-
},
+
-
_initEvents : function() {
+
-
+
-
var _self = this;
+
-
+
-
// window resize
+
-
$(window).on( 'smartresize.eislideshow', function( event ) {
+
-
+
-
// resize the images
+
-
_self._setImagesSize();
+
-
+
-
// reset position of thumbs sliding div
+
-
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
+
-
+
-
});
+
-
+
-
// click the thumbs
+
-
this.$thumbs.on( 'click.eislideshow', function( event ) {
+
-
+
-
if( _self.options.autoplay ) {
+
-
+
-
clearTimeout( _self.slideshow );
+
-
_self.options.autoplay = false;
+
-
+
-
}
+
-
+
-
var $thumb = $(this),
+
-
idx = $thumb.index() - 1; // exclude sliding div
+
-
+
-
_self._slideTo( idx );
+
-
+
-
return false;
+
-
+
-
});
+
-
+
-
}
+
-
};
+
-
var logError = function( message ) {
+
<!--project step js-->
-
+
<script>
-
if ( this.console ) {
+
function goto(id) {
-
+
        $("#" + id).ScrollTo(750);
-
console.error( message );
+
}
-
+
function switchTab(n){
-
}
+
    /*for(var i = 1; i <= 3; i++){
-
+
document.getElementById("tab_" + i).className = "";
-
};
+
document.getElementById("tab_con_" + i).style.display = "none";
-
+
}  
-
$.fn.eislideshow = function( options ) {
+
document.getElementById("tab_" + n).className = "on";  
-
+
document.getElementById("tab_con_" + n).style.display = "block";*/
-
if ( typeof options === 'string' ) {
+
var li = $("#tab li").removeClass("on").eq(n-1).addClass("on");
-
+
    $("#tab_con li").hide("normal").eq(n-1).show("normal");
-
var args = Array.prototype.slice.call( arguments, 1 );
+
    var left = li.position().left + 142;
-
 
+
    $(".tuxing").animate({marginLeft:left+"px"},300);
-
this.each(function() {
+
}
-
+
-
var instance = $.data( this, 'eislideshow' );
+
-
+
-
if ( !instance ) {
+
-
logError( "cannot call methods on eislideshow prior to initialization; " +
+
-
"attempted to call method '" + options + "'" );
+
-
return;
+
-
}
+
-
+
-
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+
-
logError( "no such method '" + options + "' for eislideshow instance" );
+
-
return;
+
-
}
+
-
+
-
instance[ options ].apply( instance, args );
+
-
+
-
});
+
-
+
-
}
+
-
else {
+
-
+
-
this.each(function() {
+
-
+
-
var instance = $.data( this, 'eislideshow' );
+
-
if ( !instance ) {
+
-
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
+
-
}
+
-
+
-
});
+
-
+
-
}
+
-
+
-
return this;
+
-
+
-
};
+
-
+
-
})( window, jQuery );
+
-
</script>
+
-
<script>
+
-
jQuery.easing['jswing'] = jQuery.easing['swing'];
+
-
 
+
-
jQuery.extend( jQuery.easing,
+
-
{
+
-
def: 'easeOutQuad',
+
-
swing: function (x, t, b, c, d) {
+
-
//alert(jQuery.easing.default);
+
-
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+
-
},
+
-
easeInQuad: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t + b;
+
-
},
+
-
easeOutQuad: function (x, t, b, c, d) {
+
-
return -c *(t/=d)*(t-2) + b;
+
-
},
+
-
easeInOutQuad: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t + b;
+
-
return -c/2 * ((--t)*(t-2) - 1) + b;
+
-
},
+
-
easeInCubic: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t + b;
+
-
},
+
-
easeOutCubic: function (x, t, b, c, d) {
+
-
return c*((t=t/d-1)*t*t + 1) + b;
+
-
},
+
-
easeInOutCubic: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t + b;
+
-
return c/2*((t-=2)*t*t + 2) + b;
+
-
},
+
-
easeInQuart: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t*t + b;
+
-
},
+
-
easeOutQuart: function (x, t, b, c, d) {
+
-
return -c * ((t=t/d-1)*t*t*t - 1) + b;
+
-
},
+
-
easeInOutQuart: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+
-
return -c/2 * ((t-=2)*t*t*t - 2) + b;
+
-
},
+
-
easeInQuint: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t*t*t + b;
+
-
},
+
-
easeOutQuint: function (x, t, b, c, d) {
+
-
return c*((t=t/d-1)*t*t*t*t + 1) + b;
+
-
},
+
-
easeInOutQuint: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+
-
return c/2*((t-=2)*t*t*t*t + 2) + b;
+
-
},
+
-
easeInSine: function (x, t, b, c, d) {
+
-
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+
-
},
+
-
easeOutSine: function (x, t, b, c, d) {
+
-
return c * Math.sin(t/d * (Math.PI/2)) + b;
+
-
},
+
-
easeInOutSine: function (x, t, b, c, d) {
+
-
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+
-
},
+
-
easeInExpo: function (x, t, b, c, d) {
+
-
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+
-
},
+
-
easeOutExpo: function (x, t, b, c, d) {
+
-
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+
-
},
+
-
easeInOutExpo: function (x, t, b, c, d) {
+
-
if (t==0) return b;
+
-
if (t==d) return b+c;
+
-
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+
-
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+
-
},
+
-
easeInCirc: function (x, t, b, c, d) {
+
-
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+
-
},
+
-
easeOutCirc: function (x, t, b, c, d) {
+
-
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+
-
},
+
-
easeInOutCirc: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+
-
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+
-
},
+
-
easeInElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
-
},
+
-
easeOutElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+
-
},
+
-
easeInOutElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
-
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+
-
},
+
-
easeInBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;
+
-
return c*(t/=d)*t*((s+1)*t - s) + b;
+
-
},
+
-
easeOutBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;
+
-
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+
-
},
+
-
easeInOutBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;
+
-
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+
-
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+
-
},
+
-
easeInBounce: function (x, t, b, c, d) {
+
-
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+
-
},
+
-
easeOutBounce: function (x, t, b, c, d) {
+
-
if ((t/=d) < (1/2.75)) {
+
-
return c*(7.5625*t*t) + b;
+
-
} else if (t < (2/2.75)) {
+
-
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+
-
} else if (t < (2.5/2.75)) {
+
-
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+
-
} else {
+
-
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+
-
}
+
-
},
+
-
easeInOutBounce: function (x, t, b, c, d) {
+
-
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+
-
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+
-
}
+
-
});
+
</script>
</script>
-
<script type="text/javascript">
 
-
            $(function() {
 
-
                $('#ei-slider').eislideshow({
 
-
animation : 'center',
 
-
autoplay : true,
 
-
slideshow_interval : 3000,
 
-
titlesFactor : 0
 
-
                });
 
-
            });
 
-
        </script>
 
-
</body>
 
</html>
</html>

Latest revision as of 13:25, 26 October 2012

Overview

Red tide detector: Facilitate small RNA as information processing media;
and gas vesicle as a novel output actuator...
Response to the overloading phosphate or nitrate when they exceeds warning limit...

Read more
overview

Sensor

The sensors for next-generation detector of red tide!

Read more
sensor

Model-Driven Design

Get specific directions for ternary system design from simulation...

Read more
Home-modeling

Making decision through sRNA

The sophisticated 'CPU' of our red tide detector...
Engineering CPU for your own "synthia"!

Read more
Home-decision-making-device

Floating Device

The output actuator of our red tide detector...
Gas vesicle as our floating device

Read more

Oceanfloat and Oceanfeel
——a floating biosensor

Our Project

  • Part1
  • Part2
  • Part3
 

  • Sensor

    Our phosphate- and nitrate-sensitive devices are responsible for detection of environmental phosphate and nitrate. Besides that they transform the input signals into "readable information" for decision-making devices.

    much work has been done for characterization and modification of nitrate- and phosphate-sensitive promoters. A whole set of design ideas for TCS modifications are also presented for other igemers. Additionally an actuator that can remove the phosphate is recommended.

    learn more

     

  • Decision-making Device

    Our decision-making device aims at processing the concentration change of nitrate or phosphate into visible buoyancy increase. Comparator recognizes the difference of two inputs quantitatively ,while ratio sensor could senses a particular ratio between two inputs.

    Both comparator and ratio sensor facilitate a ternary system consisted of two small RNA and GFP mRNA. The concentration change of external two inducers leads to the transcription rate change of small RNA(alpha s)in this ternary system, the interactions between three RNAs will lead to interesting behaviors of our system like sensing the difference between two inputs quantitatively(Comparator) or the ratio of two inputs(Ratio senor).

    learn more

     

  • Floating Device

    In our project, by transforming the buoyancy device BBa_K737010(designed by ourselves), the gas vesicle cluster from the genome of Planktothrix rubescens into E.Coli, we succeed in making Escherichia.Coli floating on the surface of the water. It can help the cells produce the gas vesicle inside, which could make densities significant stratification in the culture. Not only the gene cluster but the two parts BBa_K737006 and BBa_K737007, which produce the gas vesicle structure protein, can also make the Escherichia.Coli floating. We use the shorter length of the part achieve a better effect than BBa_K190033 and the gas vesicle application prospect.

    learn more

     

Human practice


Retrieved from "http://2012.igem.org/Team:OUC-China"