Team:Peking

From 2012.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
<html></p>
+
<html>
<style type="text/css">
<style type="text/css">
/*
/*
  * Peking 2012 Header
  * Peking 2012 Header
-
  * by Sun Sibai
+
  * Copyleft (C) Sun Sibai <sun.niasw@gmail.com>
-
  * this = /Team:Peking/Gallery
+
  * this = /Template:Peking2012_Color_Prologue
-
* this = /Team:Peking (for temporary)
+
  */
  */
body /* UltraGlobal Environment (origin item) */
body /* UltraGlobal Environment (origin item) */
{
{
-
   background-color: #01010d; /*#222222;*//*#221900;*//*#01010d;*/
+
   background-color: #020f40;
}
}
#blank ,
#blank ,
Line 25: Line 24:
#globalWrapper /* Global Environment (origin item) */
#globalWrapper /* Global Environment (origin item) */
{
{
-
   background-color: transparent;
+
   background-color: #021c35;
   background-attachment: fixed;
   background-attachment: fixed;
   background-position: 50% 0;
   background-position: 50% 0;
   background-repeat: no-repeat;
   background-repeat: no-repeat;
-
   background-image: url("/wiki/images/b/bd/Peking2012_N_Home_Background.jpg");
+
   background-image: url("/wiki/images/5/50/Peking2012_Color_Background.jpg");
   overflow: hidden;
   overflow: hidden;
}
}
Line 57: Line 56:
   overflow: hidden;
   overflow: hidden;
   border-style: none;
   border-style: none;
 +
}
 +
#bodyContent
 +
{
 +
  z-index: 0;
}
}
#footer-box
#footer-box
Line 63: Line 66:
   background-image: none;
   background-image: none;
   border-style: none;
   border-style: none;
-
   margin-top: 100px;
+
   z-index: 0;
}
}
#catlinks
#catlinks
Line 72: Line 75:
#content a:hover
#content a:hover
{
{
-
   color: #b3f3ff;
+
   color: #fff350;
   display: inline;
   display: inline;
}
}
#content a:link,
#content a:link,
-
#content a:visited
+
#content a:visited,
-
{
+
-
  text-decoration: none;
+
-
}
+
#content a:hover,
#content a:hover,
#content a:active
#content a:active
{
{
-
   text-decoration: underline;
+
   text-decoration: none;
}
}
Line 94: Line 94:
   display: inline;
   display: inline;
}
}
-
 
+
ul,li
-
ul
+
{
{
 +
  margin: 0;
 +
  padding: 0;
   list-style-image: none;
   list-style-image: none;
   list-style-type: none;
   list-style-type: none;
-
  margin: 0;
 
-
  padding: 0;
 
}
}
-
li
+
table
{
{
-
   margin: 0;
+
   border-collapse:collapse;
-
   padding: 0;
+
  background-color: transparent;
 +
  color: #ffffff;
 +
  text-align: justify;
 +
}
 +
h3
 +
{
 +
   padding: 20px 30px 10px;
}
}
Line 111: Line 116:
{
{
   font-family: Arial, sans-serif;
   font-family: Arial, sans-serif;
-
  color: #ffffff;
 
-
  margin: 0;
 
-
  padding: 0;
 
}
}
Line 160: Line 162:
{
{
   display: block;
   display: block;
-
}
 
-
 
-
ul.horizontal > li
 
-
{
 
-
  display: block;
 
-
  float: left;
 
-
  clear: none;
 
-
  overflow: hidden;
 
-
}
 
-
ul.vertical > li
 
-
{
 
-
  display: block;
 
-
  float: left;
 
-
  clear: both;
 
-
  overflow: hidden;
 
}
}
Line 184: Line 171:
   background-attachment: fixed;
   background-attachment: fixed;
   background-repeat: repeat-x;
   background-repeat: repeat-x;
-
   background-image: url("");
+
   background-image: url("/wiki/images/8/8b/Peking2012_Color_Topbar.png");
-
   background-color: #01010d;
+
   background-color: #020033;
   overflow: hidden;
   overflow: hidden;
   position: fixed;
   position: fixed;
Line 198: Line 185:
   line-height: 20px;
   line-height: 20px;
   z-index: 100;
   z-index: 100;
-
  filter: Alpha(Opacity=70%);
+
   opacity: 0.8;
-
  -moz-opacity: 0.7;
+
-
   opacity: 0.7;
+
}
}
 +
#PKU_menubar *
 +
{
 +
  font-family: Arial, sans-serif;
 +
  font-size: 15px;
 +
  font-weight: bold;
 +
}
 +
#PKU_menubar a:link,
#PKU_menubar a:link,
#PKU_menubar a:visited
#PKU_menubar a:visited
Line 229: Line 221:
   margin: 0;
   margin: 0;
}
}
-
#PKU_menubar_Watch ,
+
#PKU_menubar li
-
#PKU_menubar_Unwatch ,
+
-
#PKU_menubar_User ,
+
-
#PKU_menubar_Account ,
+
-
#PKU_menubar_LogOut
+
-
{
+
-
  display: none;
+
-
}
+
-
#PKU_menubar_iGEM ,
+
-
#PKU_menubar_ViewSource ,
+
-
#PKU_menubar_History ,
+
-
#PKU_menubar_LogIn
+
{
{
   display: inline;
   display: inline;
}
}
-
   /***--- Gallery ---***/
+
   /***--- Top Banner ---***/
-
#PKU_gallery .PKU_Box11
+
#PKU_banner_container
{
{
-
   width: 34px;
+
   padding: 0;
-
   height: 34px;
+
   margin: 0 auto;
-
   background-image: url("/wiki/images/9/94/Peking2012_N_Home_Mask_11.png");
+
   text-align: center;
 +
  z-index: 1;
 +
  position: relative;
 +
  top: 0;
}
}
-
#PKU_gallery .PKU_Box12
+
#PKU_banner_menu
{
{
-
   width: 682px;
+
   width: 700px;
-
   height: 34px;
+
   height: 30px;
-
   background-image: url("/wiki/images/2/2c/Peking2012_N_Home_Mask_12.png");
+
   margin-right: 50px;
}
}
-
#PKU_gallery .PKU_Box13
+
#PKU_banner_menu ,
 +
#PKU_banner_submenu
{
{
-
   width: 34px;
+
   padding: 0;
-
   height: 34px;
+
   margin: 0;
-
   background-image: url("/wiki/images/6/6b/Peking2012_N_Home_Mask_13.png");
+
   text-align: center;
 +
  font-size: 15px;
 +
  font-family: Georgia, serif;
 +
  overflow: hidden;
}
}
-
#PKU_gallery .PKU_Box21
+
#PKU_banner_menu a ,
 +
#PKU_banner_menu a:link ,
 +
#PKU_banner_menu a:visited
{
{
-
   width: 34px;
+
   color: #e3e3e3;
-
   height: 202px;
+
   font-size: 15px;
-
   background-image: url("/wiki/images/4/45/Peking2012_N_Home_Mask_21.png");
+
   text-decoration: none;
}
}
-
#PKU_gallery .PKU_Box22
+
#PKU_banner_menu a:hover ,
 +
#PKU_banner_menu a:active
{
{
-
   width: 682px;
+
   color: #ffffff;
-
   height: 202px;
+
   font-size: 17px;
-
   background-image: url("/wiki/images/c/ca/Peking2012_N_Home_Mask_22.png");
+
   text-decoration: none;
}
}
-
#PKU_gallery .PKU_Box23
+
#PKU_banner_submenu > li,
 +
#PKU_banner_submenu > li ul
{
{
-
   width: 34px;
+
   height: 120px;
-
   height: 202px;
+
   overflow: hidden;
-
   background-image: url("/wiki/images/f/fc/Peking2012_N_Home_Mask_23.png");
+
   text-align: center;
}
}
-
#PKU_gallery .PKU_Box31
+
#PKU_banner_menu > li
{
{
-
  width: 34px;
+
   height: 30px;
-
   height: 34px;
+
-
  background-image: url("/wiki/images/9/96/Peking2012_N_Home_Mask_31.png");
+
}
}
-
#PKU_gallery .PKU_Box32
+
#PKU_banner_submenu > li ul > li
{
{
-
   width: 682px;
+
   height: 25px;
-
   height: 34px;
+
   width: 100%;
-
   background-image: url("/wiki/images/8/80/Peking2012_N_Home_Mask_32.png");
+
   background-color: #3570ff;
 +
  opacity: 0.85;
}
}
-
#PKU_gallery .PKU_Box33
+
#PKU_banner_submenu > li ul > li:hover
{
{
-
   width: 34px;
+
   background-color: #80aaff;
-
   height: 34px;
+
   opacity: 1.0;
-
  background-image: url("/wiki/images/9/99/Peking2012_N_Home_Mask_33.png");
+
}
}
-
 
+
#PKU_banner_submenu > li ul > li a ,
-
#PKU_gallery_logo
+
#PKU_banner_submenu > li ul > li a:link ,
 +
#PKU_banner_submenu > li ul > li a:visited
{
{
-
   width: 100px;
+
   color: #f0f0f0;
-
   height: 100px;
+
   text-decoration: none;
-
   margin: 0 31px 0 32px;
+
   padding-top: 2px;
-
   padding: 33px 0px 27px 0px;
+
   vertical-align: middle;
-
  filter: Alpha(Opacity=100%);
+
}
-
   -moz-opacity: 1.0;
+
#PKU_banner_submenu > li ul > li a:hover ,
-
   opacity: 1.0;
+
#PKU_banner_submenu > li ul > li a:active
 +
{
 +
   color: #ffffcc;
 +
   text-decoration: none;
}
}
-
.PKU_gallery_button
+
  /***--- Block Style ---***/
 +
#text-body
{
{
-
   width: 160px;
+
   position: relative;
-
   height: 160px;
+
   top: -90px;
-
  margin: 0 7px 0 7px;
+
   z-index: 1;
-
  filter: Alpha(Opacity=70%);
+
   padding: 0 50px;
-
   -moz-opacity: 0.7;
+
-
   opacity: 0.7;
+
}
}
-
.PKU_gallery_buttonLN
+
#text-body .PKU_context
{
{
-
   width: 90px;
+
   background-color: transparent;
-
   height: 90px;
+
   color: #ffffff;
-
   filter: Alpha(Opacity=100%);
+
   padding: 25px;
-
   -moz-opacity: 1.0;
+
   margin: 20px 0;
-
   opacity: 1.0;
+
  border-style: solid;
 +
  border-width: 1px;
 +
   border-color: #70a0ff;
 +
  text-align: center;
 +
  font-family: Arial, sans-serif;
}
}
-
.PKU_gallery_buttonLN:hover
+
#text-body .PKU_context.first
{
{
-
   cursor: hand;
+
   margin-top: 0;
}
}
-
 
+
#text-body .PKU_context *
-
.PKU_gallery_row1
+
{
{
-
   margin: 3px 0 3px 0;
+
   margin: 0;
}
}
-
 
+
#text-body .PKU_context table
-
.PKU_gallery_row2
+
{
{
-
   margin: -9px 29px 0 2px;
+
   margin: 0 auto;
 +
  width: 560px;
 +
  font-size: 15px;
}
}
-
 
+
#text-body .PKU_context table td
-
#PKU_gallery_row2col1 > li
+
{
{
-
   margin: 0 0 -10px 0;
+
   border-style: solid;
 +
  border-color: #ffffff;
 +
  border-width: 1px;
}
}
-
 
+
#text-body .PKU_context p
-
#PKU_gallery_row2col2
+
{
{
-
   margin: 0 0 -1px 0;
+
   font-size: 16px;
 +
  padding: 10px;
 +
  text-align: justify;
}
}
-
 
+
#text-body .PKU_context h3
-
#PKU_gallery_row2col2row2
+
{
{
-
   margin: 0 0 -22px 0;
+
   text-align: left;
-
   height: 270px;
+
  color: #70d0ff;
 +
  font-size: 30px;
 +
   padding: 10px;
 +
  line-height: 28px;
}
}
-
 
+
#text-body .PKU_context ul,
-
#PKU_gallery_pkuname img
+
#text-body .PKU_context li
{
{
-
   width: 230px;
+
   text-align: justify;
-
   height: 46px;
+
   font-size: 16px;
}
}
-
#PKU_gallery_pkuname
+
#text-body .PKU_context ul.refer li
{
{
-
   margin: 0 33px 0 7px;
+
   font-size: 15px;
-
  padding: 57px 0 57px;
+
-
  filter: Alpha(Opacity=100%);
+
-
  -moz-opacity: 1.0;
+
-
  opacity: 1.0;
+
}
}
-
 
+
#text-body .PKU_context ul
-
#PKU_gallery_title img
+
{
{
-
   width: 750px;
+
   padding-left: 20px;
-
   height: 160px;
+
   width: 570px;
}
}
-
#PKU_gallery_title
+
#text-body .PKU_context.floatC p
{
{
-
   margin: 0 0 -55px 0;
+
   width: 887px;
-
  filter: Alpha(Opacity=100%);
+
-
  -moz-opacity: 1.0;
+
-
  opacity: 1.0;
+
}
}
-
 
+
#text-body .PKU_context.floatR p
-
#PKU_gallery_container
+
{
{
-
   filter: Alpha(Opacity=100%);
+
   width: 600px;
-
  -moz-opacity: 1.0;
+
-
  opacity: 1.0;
+
}
}
-
 
+
#text-body .PKU_context.floatR p.description
-
#PKU_gallery_context
+
{
{
-
   overflow: hidden;
+
   font-style: italic;
-
   width: 682px;
+
   font-size: 14px;
-
   height: 202px;
+
   margin: 0 auto;
 +
  padding: 10px 10px;
 +
  text-align: justify;
 +
  width: 500px;
}
}
-
 
+
#text-body .PKU_context img ,
-
#PKU_gallery_context p
+
#text-body .PKU_context object
{
{
-
   color: #ffffff;
+
   padding: 0;
}
}
-
#PKU_gallery_pagenavi
+
#text-body p.title_block
{
{
-
   padding: 23px 182px 23px 182px;
+
   color: #ffffff;
-
   filter: Alpha(Opacity=100%);
+
   overflow: hidden;
-
   -moz-opacity: 1.0;
+
   line-height: 25px;
-
   opacity: 1.0;
+
  font-size: 28px;
 +
  padding: 0;
 +
   margin: 0;
 +
  vertical-align: middle;
 +
  text-align: justify;
 +
  font-family: Eras Medium ITC, Verdana, sans-serif;
}
}
-
#PKU_gallery_navi
+
#text-body p.context_block
{
{
-
   width: 206px;
+
   background-color: transparent;
-
   height: 44px;
+
  border-style: solid;
-
   padding: 0 11px 0 11px;
+
  border-width: 1px;
 +
   border-color: #70a0ff;
 +
  color: #ffffff;
 +
  font-size: 15px;
 +
   padding: 0;
 +
  margin: 0;
 +
  vertical-align: middle;
 +
  text-align: justify;
 +
  font-family: Arial, sans-serif;
}
}
-
#PKU_gallery_navi li
+
#text-body div.addpad
{
{
-
  width: 34px;
+
   padding: 20px;
-
  height: 44px;
+
-
   padding: 0 1px 0 1px;
+
}
}
-
.PKU_gallery_section_v,
+
ul.horizontal > li
-
.PKU_gallery_section_h
+
{
{
-
   width: 682px;
+
   display: block;
-
   height: 202px;
+
   float: left;
 +
  clear: none;
   overflow: hidden;
   overflow: hidden;
}
}
 +
ul.vertical > li
 +
{
 +
  display: block;
 +
  float: left;
 +
  clear: both;
 +
  overflow: hidden;
 +
}
 +
</style>
</style>
<ul id="PKU_menubar" class="noprint">
<ul id="PKU_menubar" class="noprint">
-
   <li id="PKU_menubar_iGEM" class="PKU_menubar_left" >
+
   <li class="PKU_menubar_left" >
-
     <a id="PKU_menubar_iGEM_img" href="/Main_Page" title="iGEM Home Page"><img src="/wiki/images/2/27/Peking2012_iGEM18.png" alt="iGEM Home" /></a>
+
     <a href="/Main_Page" title="iGEM Home Page"><img src="/wiki/images/2/27/Peking2012_iGEM18.png" alt="iGEM Home" /></a>
-
     <a id="PKU_menubar_iGEM_span" href="/Main_Page" title="iGEM Home Page" >iGEM</a>
+
     <a href="/Main_Page" title="iGEM Home Page" >iGEM</a>
   </li>
   </li>
-
   <li id="PKU_menubar_ViewSource" class="PKU_menubar_left" >
+
   <li class="PKU_menubar_left" >
-
     <a id="PKU_menubar_ViewSource_img" href="#" title="View Page Source"><img src="/wiki/images/7/7e/Peking2012_ViewSource18.png" alt="View source" /></a>
+
     <a href="#" title="View Page Source"><img src="/wiki/images/7/7e/Peking2012_ViewSource18.png" alt="View source" /></a>
-
     <a id="PKU_menubar_ViewSource_span" href="#" title="View Page Source" >View source</a>
+
     <a href="#" title="View Page Source" >View source</a>
   </li>
   </li>
-
   <li id="PKU_menubar_Watch" class="PKU_menubar_left" >
+
   <li class="PKU_menubar_left" >
-
     <a id="PKU_menubar_Watch_img" href="#" title="Watch this Page"><img src="/wiki/images/3/31/Peking2012_Watch18.png" alt="Watch" /></a>
+
     <a href="#" title="Watch this Page"><img src="/wiki/images/3/31/Peking2012_Watch18.png" alt="Watch" /></a>
-
     <a id="PKU_menubar_Watch_span" href="#" title="Watch this Page" >Watch</a>
+
     <a href="#" title="Watch this Page" >Watch</a>
   </li>
   </li>
-
   <li id="PKU_menubar_Unwatch" class="PKU_menubar_left" >
+
   <li class="PKU_menubar_left" >
-
     <a id="PKU_menubar_Unwatch_img" href="#" title="Cancel Watching State"><img src="/wiki/images/d/d5/Peking2012_Unwatch18.png" alt="Unwatch" /></a>
+
     <a href="#" title="Cancel Watching State"><img src="/wiki/images/d/d5/Peking2012_Unwatch18.png" alt="Unwatch" /></a>
-
     <a id="PKU_menubar_Unwatch_span" href="#" title="Cancel Watching State" >Unwatch</a>
+
     <a href="#" title="Cancel Watching State" >Unwatch</a>
   </li>
   </li>
-
   <li id="PKU_menubar_History" class="PKU_menubar_left" >
+
   <li class="PKU_menubar_left" >
-
     <a id="PKU_menubar_History_img" href="#" title="View Page History"><img src="/wiki/images/b/bc/Peking2012_History18.png" alt="History" /></a>
+
     <a href="#" title="View Page History"><img src="/wiki/images/b/bc/Peking2012_History18.png" alt="History" /></a>
-
     <a id="PKU_menubar_History_span" href="#" title="View Page History" >History</a>
+
     <a href="#" title="View Page History" >History</a>
   </li>
   </li>
-
   <li id="PKU_menubar_LogOut" class="PKU_menubar_right" >
+
   <li class="PKU_menubar_right" >
-
     <a id="PKU_menubar_LogOut_img" href="#" title="Bye!"><img src="/wiki/images/1/10/Peking2012_LogOut18.png" alt="Log out" /></a>
+
     <a href="#" title="Bye!"><img src="/wiki/images/1/10/Peking2012_LogOut18.png" alt="Log out" /></a>
-
     <a id="PKU_menubar_LogOut_span" href="#" title="Bye!" >Log out</a>
+
     <a href="#" title="Bye!" >Log out</a>
   </li>
   </li>
-
   <li id="PKU_menubar_LogIn" class="PKU_menubar_right" >
+
   <li class="PKU_menubar_right" >
-
     <a id="PKU_menubar_LogIn_img" href="#" title="Hello!"><img src="/wiki/images/a/a8/Peking2012_LogIn18.png" alt="Log in" /></a>
+
     <a href="#" title="Hello!"><img src="/wiki/images/a/a8/Peking2012_LogIn18.png" alt="Log in" /></a>
-
     <a id="PKU_menubar_LogIn_span" href="#" title="Hello!" >Log in</a>
+
     <a href="#" title="Hello!" >Log in</a>
   </li>
   </li>
-
   <li id="PKU_menubar_Account" class="PKU_menubar_right" >
+
   <li class="PKU_menubar_right" >
-
     <a id="PKU_menubar_Account_img" href="https://igem.org/User_Information" title="My Profile"><img src="/wiki/images/6/64/Peking2012_Account18.png" alt="Account" /></a>
+
     <a href="https://igem.org/User_Information" title="My Profile"><img src="/wiki/images/6/64/Peking2012_Account18.png" alt="Account" /></a>
-
     <a id="PKU_menubar_Account_span" href="https://igem.org/User_Information" title="My Profile" >Account</a>
+
     <a href="https://igem.org/User_Information" title="My Profile" >Account</a>
   </li>
   </li>
-
   <li id="PKU_menubar_User" class="PKU_menubar_right" >
+
   <li class="PKU_menubar_right" >
-
     <a id="PKU_menubar_User_img" href="#" title="My Page"><img src="/wiki/images/0/0e/Peking2012_User18.png" alt="User" /></a>
+
     <a href="#" title="My Page"><img src="/wiki/images/0/0e/Peking2012_User18.png" alt="User" /></a>
-
     <a id="PKU_menubar_User_span" href="#" title="My Page" ></a>
+
     <a href="#" title="My Page" ></a>
   </li>
   </li>
</ul>
</ul>
Line 484: Line 495:
  */
  */
var thispage = document.location.toString().slice("https://2012.igem.org/".length); /* relative location */
var thispage = document.location.toString().slice("https://2012.igem.org/".length); /* relative location */
-
document.getElementById('PKU_menubar_ViewSource_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
+
var pkutopbar = document.getElementById('PKU_menubar');
-
document.getElementById('PKU_menubar_Watch_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch';
+
var pkutopli = pkutopbar.getElementsByTagName('li');
-
document.getElementById('PKU_menubar_Unwatch_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch';
+
var pkutopa = pkutopbar.getElementsByTagName('a');
-
document.getElementById('PKU_menubar_History_span').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history';
+
pkutopa[3].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
-
document.getElementById('PKU_menubar_LogOut_span').href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage;
+
pkutopa[5].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch';
-
document.getElementById('PKU_menubar_LogIn_span').href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage;
+
pkutopa[7].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch';
-
document.getElementById('PKU_menubar_ViewSource_img').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
+
pkutopa[9].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history';
-
document.getElementById('PKU_menubar_Watch_img').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch';
+
pkutopa[11].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage;
-
document.getElementById('PKU_menubar_Unwatch_img').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch';
+
pkutopa[13].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage;
-
document.getElementById('PKU_menubar_History_img').href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history';
+
pkutopa[2].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=edit';
-
document.getElementById('PKU_menubar_LogOut_img').href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage;
+
pkutopa[4].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=watch';
-
document.getElementById('PKU_menubar_LogIn_img').href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage;
+
pkutopa[6].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=unwatch';
 +
pkutopa[8].href = 'https://2012.igem.org/wiki/index.php?title=' + thispage + '&'.substring(0,1) + 'action=history';
 +
pkutopa[10].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogout' + '&'.substring(0,1) + 'returnto=' + thispage;
 +
pkutopa[12].href = 'https://2012.igem.org/wiki/index.php?title=Special:UserLogin' + '&'.substring(0,1) + 'returnto=' + thispage;
-
var tmpstr = document.getElementById('pt-userpage').innerHTML;
+
var userbar = document.getElementById('pt-userpage');
var username;
var username;
 +
var userstr;
-
if (tmpstr!=undefined)
+
if (userbar!=null)
{
{
-
   username = tmpstr.substring(tmpstr.lastIndexOf('<'),tmpstr.indexOf('>')+1);
+
  userstr = userbar.innerHTML;
-
   document.getElementById('PKU_menubar_User_span').innerHTML = username;
+
   username = userstr.substring(userstr.lastIndexOf('<'),userstr.indexOf('>')+1);
-
   document.getElementById('PKU_menubar_User_span').href = 'https://2012.igem.org/User:' + username;
+
   pkutopa[17].innerHTML = username;
-
   document.getElementById('PKU_menubar_User_img').href = 'https://2012.igem.org/User:' + username;
+
   pkutopa[17].href = 'https://2012.igem.org/User:' + username;
-
   document.getElementById('PKU_menubar_User').style.display='inline';
+
   pkutopa[16].href = 'https://2012.igem.org/User:' + username;
-
   document.getElementById('PKU_menubar_Account').style.display='inline';
+
   pkutopli[8].style.display='inline';
-
   document.getElementById('PKU_menubar_LogOut').style.display='inline';
+
   pkutopli[7].style.display='inline';
-
   document.getElementById('PKU_menubar_LogIn').style.display='none';
+
   pkutopli[5].style.display='inline';
-
   tmpstr = document.getElementById('menubar').innerHTML;
+
   pkutopli[6].style.display='none';
-
   if (tmpstr.search('unwatch')!=-1)
+
   userstr = document.getElementById('menubar').innerHTML;
 +
   if (userstr.search('unwatch')!=-1)
   {
   {
-
     document.getElementById('PKU_menubar_Watch').style.display='none';
+
     pkutopli[2].style.display='none';
-
     document.getElementById('PKU_menubar_Unwatch').style.display='inline';
+
     pkutopli[3].style.display='inline';
   }
   }
-
   else if (tmpstr.search('watch')!=-1)
+
   else if (userstr.search('watch')!=-1)
   {
   {
-
     document.getElementById('PKU_menubar_Watch').style.display='inline';
+
     pkutopli[2].style.display='inline';
-
     document.getElementById('PKU_menubar_Unwatch').style.display='none';
+
     pkutopli[3].style.display='none';
   }
   }
   else
   else
   {
   {
-
     document.getElementById('PKU_menubar_Watch').style.display='none';
+
     pkutopli[2].style.display='none';
-
     document.getElementById('PKU_menubar_Unwatch').style.display='none';
+
     pkutopli[3].style.display='none';
   }
   }
}
}
else
else
{
{
-
   document.getElementById('PKU_menubar_User').style.display='none';
+
   pkutopli[8].style.display='none';
-
   document.getElementById('PKU_menubar_Account').style.display='none';
+
   pkutopli[7].style.display='none';
-
   document.getElementById('PKU_menubar_LogOut').style.display='none';
+
   pkutopli[5].style.display='none';
-
   document.getElementById('PKU_menubar_LogIn').style.display='inline';
+
   pkutopli[6].style.display='inline';
-
   document.getElementById('PKU_menubar_Watch').style.display='none';
+
   pkutopli[2].style.display='none';
-
   document.getElementById('PKU_menubar_Unwatch').style.display='none';
+
   pkutopli[3].style.display='none';
}
}
</script>
</script>
-
 
+
<div class="floatC"><p class="blank" style="height:20px;">&#32;</p></div>
-
<div class="PKU_gallery_row1 floatL">
+
<div id="PKU_banner_container">
-
<ul class="horizontal">
+
<div class="floatL">
-
  <li class="button" id="PKU_gallery_logo">
+
  <img style="width:700px;margin:0 0 0 20px;" src="/wiki/images/e/ef/Peking2012_Color_Banner_Huge.png" alt="Programming Cells though Light" />
-
  <a href="/Team:Peking" onmouseover="ButtonMouseOver(this);" onmouseout="ButtonMouseOut(this);" >
+
</div>
-
    <img src="/wiki/images/f/fd/Peking2012_Logo100.png" alt="Logo" />
+
<div class="floatR">
-
    <img src="/wiki/images/f/fd/Peking2012_Logo100.png" alt="" />
+
  <img style="width:128px;margin:15px 60px 0 0;" src="/wiki/images/8/85/Peking2012_Color_Logo_128.png" alt="" />
-
  </a>
+
</div>
-
  </li>
+
  <div class="floatR">
-
  <li class="button PKU_gallery_button">
+
   <ul id="PKU_banner_menu" class="button horizontal">
-
  <a name="PKU_gallery_button" href="/Team:Peking/Modeling" title="Click to Modeling Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(1);}" >
+
  <li style="width:75px;">
-
    <img src="/wiki/images/c/c4/Peking2012_N_Home_Button_Modeling.png" alt="Modeling" />
+
    <a onmouseover="TriggerSubmenu(0);" href="/Team:Peking">
-
    <img src="/wiki/images/8/81/Peking2012_N_Home_Button_Active_Modeling.png" alt="" />
+
Home
-
  </a>
+
    </a>
-
  </li>
+
  </li>
-
  <li class="button PKU_gallery_button">
+
  <li style="width:75px;">
-
  <a name="PKU_gallery_button" href="/Team:Peking/HumanPractice" title="Click to Human Practice Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(2);}" >
+
    <a onmouseover="TriggerSubmenu(1);" onmouseout="TriggerSubmenu(0);" href="/Team:Peking/Team">
-
    <img src="/wiki/images/8/87/Peking2012_N_Home_Button_HumanPractice.png" alt="HumanPractice" />
+
Team
-
    <img src="/wiki/images/4/42/Peking2012_N_Home_Button_Active_HumanPractice.png" alt="" />
+
    </a>
-
  </a>
+
  </li>
-
  </li>
+
  <li style="width:85px;">
-
  <li class="button PKU_gallery_button">
+
    <a onmouseover="TriggerSubmenu(2);" onmouseout="TriggerSubmenu(0);" href="/Team:Peking/Project">
-
  <a name="PKU_gallery_button" href="/Team:Peking/Safety" title="Click to Safety Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(3);}" >
+
Project
-
    <img src="/wiki/images/2/2f/Peking2012_N_Home_Button_Safety.png" alt="Safety" />
+
     </a>
-
    <img src="/wiki/images/a/a3/Peking2012_N_Home_Button_Active_Safety.png" alt="" />
+
   </li>
-
  </a>
+
  <li style="width:100px;">
-
  </li>
+
     <a onmouseover="TriggerSubmenu(0);" href="/Team:Peking/DataPage">
-
  <li>
+
Data Page
-
  <div id="PKU_gallery_pkuname">
+
    </a>
-
    <img src="/wiki/images/6/68/Peking2012_N_Home_PekingUniv.png" alt="" />
+
  </li>
-
  </div>
+
  <li style="width:95px;">
-
  </li>
+
    <a onmouseover="TriggerSubmenu(3);" onmouseout="TriggerSubmenu(0);" href="/Team:Peking/Modeling">
-
  </ul>
+
Modeling
-
</div>
+
    </a>
-
<div class="PKU_gallery_row2 floatL">
+
  </li>
-
<ul class="horizontal">
+
  <li style="width:145px;">
-
   <li>
+
    <a onmouseover="TriggerSubmenu(4);" onmouseout="TriggerSubmenu(0);" href="/Team:Peking/HumanPractice">
-
  <ul id="PKU_gallery_row2col1" class="vertical">
+
Human Practice
-
    <li class="button PKU_gallery_button">
+
    </a>
-
    <a name="PKU_gallery_button" href="/Team:Peking/Team" title="Click to Team Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(4);}">
+
  </li>
-
      <img src="/wiki/images/5/5f/Peking2012_N_Home_Button_Team.png" alt="Team" />
+
  <li style="width:80px;">
-
      <img src="/wiki/images/7/77/Peking2012_N_Home_Button_Active_Team.png" alt="" />
+
    <a onmouseover="TriggerSubmenu(0);" href="/Team:Peking/Safety">
-
    </a>
+
Safety
-
    </li>
+
    </a>
-
    <li class="button PKU_gallery_button">
+
  </li>
-
    <a name="PKU_gallery_button" href="/Team:Peking/Project" title="Click to Project Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(5);}" >
+
  </ul>
-
      <img src="/wiki/images/3/31/Peking2012_N_Home_Button_Project.png" alt="Project" />
+
</div>
-
      <img src="/wiki/images/8/88/Peking2012_N_Home_Button_Active_Project.png" alt="" />
+
<div class="floatC">
-
    </a>
+
  <ul id="PKU_banner_submenu" class="button horizontal">
-
    </li>
+
  <li class="blank">
-
    <li class="button PKU_gallery_button">
+
    &#32;
-
    <a name="PKU_gallery_button" href="/Team:Peking/Parts" title="Click to Parts Wiki" onmouseover="if (!IsBusy) {TrigleDemoSection(6);}" >
+
  </li>
-
      <img src="/wiki/images/4/47/Peking2012_N_Home_Button_Parts.png" alt="Parts" />
+
  <li>
-
      <img src="/wiki/images/e/e7/Peking2012_N_Home_Button_Active_Parts.png" alt="" />
+
    <ul onmouseover="TriggerSubmenu(1);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:120px;display:block;">
-
    </a>
+
    <li class="submenu_team">
-
     </li>
+
      <a href="/Team:Peking/Team/Members">
-
   </ul>
+
Members
-
  </li>
+
      </a>
-
  <li id="PKU_gallery">
+
    </li>
-
  <ul id="PKU_gallery_row2col2" class="vertical">
+
    <li class="submenu_team">
-
     <li id="PKU_gallery_title">
+
      <a href="/Team:Peking/Team/Attribution">
-
    <div>
+
Attribution
-
      <img src="/wiki/images/b/ba/Peking2012_N_Home_Title.png" alt="" />
+
      </a>
-
    </div>
+
    </li>
-
    </li>
+
    <li class="submenu_team">
-
    <li id="PKU_gallery_row2col2row2">
+
      <a href="/Team:Peking/Team/Diary">
-
    <ul id="PKU_gallery_container" class="vertical">
+
Diary
-
      <li>
+
      </a>
-
      <ul class="horizontal">
+
    </li>
-
        <li>
+
    <li class="submenu_team">
-
        <p class="PKU_Box11"></p>
+
      <a href="/Team:Peking/Team/History">
-
        </li>
+
History
-
        <li>
+
      </a>
-
        <p name="PKU_gallery_BoxTB" class="PKU_Box12"></p>
+
    </li>
-
        </li>
+
    </ul>
-
        <li>
+
  </li>
-
        <p class="PKU_Box13"></p>
+
  <li>
-
        </li>
+
    <ul onmouseover="TriggerSubmenu(2);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:200px;display:block;">
-
      </ul>
+
    <li class="submenu_project">
-
      </li>
+
      <a href="/Team:Peking/Project/Luminesensor">
-
      <li>
+
Luminesensor
-
      <ul class="horizontal">
+
      </a>
-
        <li>
+
    </li>
-
        <p name="PKU_gallery_BoxLR" class="PKU_Box21"></p>
+
    <li class="submenu_project">
-
        </li>
+
      <a href="/Team:Peking/Project/Communication">
-
        <li>
+
Light Communication
-
        <ul id="PKU_gallery_context" name="PKU_gallery_BoxC" class="PKU_Box22 vertical">
+
      </a>
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
    </li>
-
          <ul id="PKU_gallery_section_modeling" class="horizontal">
+
    <li class="submenu_project">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
      <a href="/Team:Peking/Project/3D">
-
<p>Modeling Quickview and Wiki Page is comming soon...</p>
+
Synbio in 2D & 3D
-
            </li>
+
      </a>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </li>
-
<p></p>
+
    <li class="submenu_project">
-
            </li>
+
       <a href="/Team:Peking/Project/Phototaxis">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
Phototaxis
-
<p></p>
+
      </a>
-
            </li>
+
    </li>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </ul>
-
<p></p>
+
  </li>
-
            </li>
+
  <li>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
     <ul onmouseover="TriggerSubmenu(3);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:250px;display:block;">
-
<p></p>
+
    <li class="submenu_modeling">
-
            </li>
+
      <a href="/Team:Peking/Modeling/Luminesensor">
-
          </ul>
+
Luminesensor Optimization
-
          </li>
+
      </a>
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
    </li>
-
          <ul id="PKU_gallery_section_humanpractice" class="horizontal">
+
    <li class="submenu_modeling">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
      <a href="/Team:Peking/Modeling/Phototaxis">
-
<p>Our Human Practice Page has been partially constructed. <br /> click the circle above to Wiki Page.</p>
+
Phototaxis Simulation
-
            </li>
+
      </a>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </li>
-
<p>Human Practice Quickview is comming soon...</p>
+
    <li class="submenu_modeling">
-
            </li>
+
      <a href="/Team:Peking/Modeling/Background/ODE">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
Appendix
-
<p>Human Practice Quickview is comming soon...</p>
+
      </a>
-
            </li>
+
    </li>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </ul>
-
<p>Human Practice Quickview is comming soon...</p>
+
  </li>
-
            </li>
+
  <li>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    <ul onmouseover="TriggerSubmenu(4);" onmouseout="TriggerSubmenu(0);" class="vertical" style="width:320px;display:block;">
-
<p></p>
+
    <li class="submenu_humanpractice">
-
            </li>
+
      <a href="/Team:Peking/HumanPractice/Sowing">
-
          </ul>
+
Sowing Tomorrow Synthetic Biologists
-
          </li>
+
      </a>
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
    </li>
-
          <ul id="PKU_gallery_section_safety" class="horizontal">
+
    <li class="submenu_humanpractice">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
      <a href="/Team:Peking/HumanPractice/Review">
-
<p>Our Safety Page has been constructed. <br /> click the circle above to Wiki Page.</p>
+
Historic iGEM Projects Review
-
            </li>
+
      </a>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </li>
-
<p></p>
+
    <li class="submenu_humanpractice">
-
            </li>
+
      <a href="/Team:Peking/HumanPractice/Outreach">
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
Outreach & Workshop
-
<p></p>
+
      </a>
-
            </li>
+
    </li>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
    </ul>
-
<p></p>
+
  </li>
-
            </li>
+
  </ul>
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
  </div>
-
<p></p>
+
-
            </li>
+
-
          </ul>
+
-
          </li>
+
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
-
          <ul id="PKU_gallery_section_team" class="horizontal">
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p>Team Quickview and Wiki Page is comming soon...</p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
          </ul>
+
-
          </li>
+
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
-
          <ul id="PKU_gallery_section_project" class="horizontal">
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p>Optogenetic tools have made significant impact on life sciences and beyond. However, several serious issues remain:
+
-
cytotoxicy, narrow dynamic range, and dependency on laser and exogenous chromophore. To circumvent these, Peking
+
-
iGEM has rationally constructed a hypersensitive sensor of luminance- Luminesensor. Primarily, the sensor was designed
+
-
by fusing blue-light-sensing protein domain from Neurospora with DNA binding domain of LexA from E.coli, following which
+
-
protein structure inspection and kinetic simulation were conducted to rationally perform optimization. Amazingly,
+
-
Luminesensor was proved to be as sensitive as to sense natural light and even bioluminescence. With this sensor,
+
-
spatiotemporal control of cellular behavior, such as phototaxis, high-resolution 2-D and 3-D bio-printing using dim light and
+
-
even luminescence of iPad were shown to be very easy. What’s more, we successfully implemented cell-cell signaling
+
-
using light, which is the very first time in synthetic biology and of great importance for biotechnological use.</p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p>/*During the last few decades, chemically regulated genetic systems have been thoroughly developed and analyzed. Though remarkable endeavors were made towards this issue, the disadvantages of chemical regulation remain: the high cost of chemical synthesis, the diffusion limits, the insecurity and the limited choices of chemicals. <br /><br /> Light, in contrast, is more controllable to regulate molecular and cellular behavior. However, most optogenetics methods rely on laser, which limits their field application. <br /><br /> This summer, Peking iGEM is endeavoring on developing a new ultra-sensitive luminescence sensor and has programmed cells to talk through light.*/ </p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p><br /> Project Quickview and Wiki Page is comming soon...</p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p><br /><br />Project Quickview and Wiki Page is comming soon...</p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p><br /><br /><br />Project Quickview and Wiki Page is comming soon...</p>
+
-
            </li>
+
-
          </ul>
+
-
          </li>
+
-
          <li name="PKU_gallery_section_v" class="PKU_gallery_section_v">
+
-
          <ul id="PKU_gallery_section_parts" class="horizontal">
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p>Parts Quickview and Wiki Page is comming soon...</p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
            <li name="PKU_gallery_section_h" class="PKU_gallery_section_h">
+
-
<p></p>
+
-
            </li>
+
-
          </ul>
+
-
          </li>
+
-
        </ul>
+
-
        </li>
+
-
        <li>
+
-
        <p name="PKU_gallery_BoxLR" class="PKU_Box23"></p>
+
-
        </li>
+
-
      </ul>
+
-
       </li>
+
-
      <li>
+
-
      <ul class="horizontal">
+
-
        <li>
+
-
        <p class="PKU_Box31"></p>
+
-
        </li>
+
-
        <li>
+
-
        <p name="PKU_gallery_BoxTB" class="PKU_Box32"></p>
+
-
        </li>
+
-
        <li>
+
-
        <p class="PKU_Box33"></p>
+
-
        </li>
+
-
      </ul>
+
-
      </li>
+
-
    </ul>
+
-
    </li>
+
-
     <li>
+
-
    <ul class="horizontal">
+
-
      <li class="button PKU_gallery_buttonLN">
+
-
      <a id="PKU_gallery_ButtonL" onmouseover="ButtonMouseOverL();" onmouseout="ButtonMouseOutL();" onclick="if (!IsBusy) {TrigleDemoLast();}">
+
-
        <img src="/wiki/images/b/b3/Peking2012_N_Home_Button_Last.png" alt="" />
+
-
        <img src="/wiki/images/0/0c/Peking2012_N_Home_Button_Active_Last.png" alt="" />
+
-
        <img src="/wiki/images/5/52/Peking2012_N_Home_Button_Invalid_Last.png" alt="" />
+
-
<!--    <img id="PKU_gallery_opac_L" class="mask" src="/wiki/images/5/52/Peking2012_N_Home_Button_Invalid_Last.png" alt="" />  -->
+
-
      </a>
+
-
      </li>
+
-
      <li class="button" id="PKU_gallery_pagenavi">
+
-
      <ul class="horizontal" id="PKU_gallery_navi">
+
-
        <li class="button">
+
-
        <a onclick="if (!IsBusy) {TrigleDemo(1);}">
+
-
          <img src="/wiki/images/b/b8/Peking2012_N_Home_Button_Page.png" alt="" />
+
-
          <img src="/wiki/images/4/46/Peking2012_N_Home_Button_Page_Active.png" alt="" />
+
-
        </a>
+
-
        </li>
+
-
        <li class="button">
+
-
        <a onclick="if (!IsBusy) {TrigleDemo(2);}">
+
-
          <img src="/wiki/images/b/b8/Peking2012_N_Home_Button_Page.png" alt="" />
+
-
          <img src="/wiki/images/4/46/Peking2012_N_Home_Button_Page_Active.png" alt="" />
+
-
        </a>
+
-
        </li>
+
-
        <li class="button">
+
-
        <a onclick="if (!IsBusy) {TrigleDemo(3);}">
+
-
          <img src="/wiki/images/b/b8/Peking2012_N_Home_Button_Page.png" alt="" />
+
-
          <img src="/wiki/images/4/46/Peking2012_N_Home_Button_Page_Active.png" alt="" />
+
-
        </a>
+
-
        </li>
+
-
        <li class="button">
+
-
        <a onclick="if (!IsBusy) {TrigleDemo(4);}">
+
-
          <img src="/wiki/images/b/b8/Peking2012_N_Home_Button_Page.png" alt="" />
+
-
          <img src="/wiki/images/4/46/Peking2012_N_Home_Button_Page_Active.png" alt="" />
+
-
        </a>
+
-
        </li>
+
-
        <li class="button">
+
-
        <a onclick="if (!IsBusy) {TrigleDemo(5);}">
+
-
          <img src="/wiki/images/b/b8/Peking2012_N_Home_Button_Page.png" alt="" />
+
-
          <img src="/wiki/images/4/46/Peking2012_N_Home_Button_Page_Active.png" alt="" />
+
-
        </a>
+
-
        </li>
+
-
      </ul>
+
-
      </li>
+
-
      <li class="button PKU_gallery_buttonLN">
+
-
      <a id="PKU_gallery_ButtonN" onmouseover="ButtonMouseOverN();" onmouseout="ButtonMouseOutN();" onclick="if (!IsBusy) {TrigleDemoNext();}">
+
-
        <img src="/wiki/images/0/07/Peking2012_N_Home_Button_Next.png" alt="" />
+
-
        <img src="/wiki/images/4/43/Peking2012_N_Home_Button_Active_Next.png" alt="" />
+
-
        <img src="/wiki/images/4/4d/Peking2012_N_Home_Button_Invalid_Next.png" alt="" />
+
-
<!--    <img id="PKU_gallery_opac_N" class="mask" src="/wiki/images/4/4d/Peking2012_N_Home_Button_Invalid_Next.png" alt="" />  -->
+
-
      </a>
+
-
      </li>
+
-
    </ul>
+
-
    </li>
+
-
  </ul>
+
-
  </li>
+
-
  </ul>
+
</div>
</div>
<script type="text/javascript" >
<script type="text/javascript" >
/*
/*
-
  * Peking 2012 Gallery
+
  * Peking 2012 MenuBar
  * by Sun Sibai
  * by Sun Sibai
  * E-mail: sun.niasw@gmail.com
  * E-mail: sun.niasw@gmail.com
-
*
 
-
* If you want to copy or modify this code, please declare: "This code is copied/modified from 2012 Peking iGEM Wiki."
 
  */
  */
-
var IsBusy = true;
 
-
var buttonLastExist = 0;
+
var Submenu_Size_Cur = [120, 0, 0, 0, 0];
-
var buttonNextExist = 1;
+
var Submenu_Item_Num = 4;
 +
var Submenu_Item_Des = 0;
 +
var Submenu_Item_Cur = 0;
 +
var Submenu_BlankWidth = [0, 318, 360, 528, 612]; //Unit: Pixel
 +
var Submenu_ListHeight = [120, 100, 100, 75, 75]; //Unit: Pixel
 +
var Submenu_Handle_State = 0; //0:Null, 1:Growth, 2:Waiting, 3:Wither
 +
var Submenu_Handle = null;
 +
var Submenu_Parent = document.getElementById('PKU_banner_container');
 +
var Submenu = document.getElementById('PKU_banner_submenu');
 +
var Submenu_Obj = Submenu.getElementsByTagName('ul');
 +
var Submenu_Blank = Submenu.getElementsByTagName('li')[0];
 +
for (var it=0;it<Submenu_Item_Num;++it)
 +
{
 +
  Submenu_Obj[it].style.height=Submenu_Size_Cur[it+1]+'px';
 +
  Submenu_Obj[it].style.display='none';
 +
}
-
function FadeObj(obj_Point, Alpha_Des = 1, Alpha_Cur = 0)
+
/* Automatic Function */
 +
function ItemGrowth()
{
{
-
   this.obj = obj_Point;
+
   Submenu_Size_Cur[Submenu_Item_Cur] = Submenu_Size_Cur[Submenu_Item_Cur] * 0.6 + Submenu_ListHeight[Submenu_Item_Cur] * 1.2 * 0.4;
-
  this.alphaDes = Alpha_Des;
+
   if (Submenu_Size_Cur[Submenu_Item_Cur]>=Submenu_ListHeight[Submenu_Item_Cur])
-
  this.alphaCur = Alpha_Cur;
+
-
  var self = this;
+
-
  if (this.obj.style.filter.alpha!=undefined)
+
-
  {
+
-
    this.obj.style.filter.alpha.opacity = 100 * this.alphaCur + '%';
+
-
   }
+
-
  else if (this.obj.style.MozOpacity!=undefined)
+
   {
   {
-
     this.obj.style.MozOpacity = this.alphaCur;
+
     Submenu_Size_Cur[Submenu_Item_Cur]=Submenu_ListHeight[Submenu_Item_Cur];
 +
    Submenu_Handle_State = 0;
 +
    Submenu_Handle = null;
   }
   }
   else
   else
   {
   {
-
     this.obj.style.opacity = this.alphaCur;
+
     Submenu_Handle = setTimeout(ItemGrowth,50);
   }
   }
-
 
+
   Submenu_Obj[Submenu_Item_Cur-1].style.height=Submenu_Size_Cur[Submenu_Item_Cur]+'px';
-
   this.FadeOut = function(speed=1) {
+
-
    self.alphaCur -= 0.03*speed;
+
-
    if (self.alphaCur>self.alphaDes)
+
-
    {
+
-
      setTimeout(self.FadeOut,50);
+
-
    }
+
-
    else
+
-
    {
+
-
      self.alphaCur = self.alphaDes;
+
-
    }
+
-
    self.Fresh();
+
-
  };
+
-
  this.FadeIn = function(speed=1) {
+
-
    self.alphaCur += 0.03*speed;
+
-
    if (self.alphaCur<self.alphaDes)
+
-
    {
+
-
      setTimeout(self.FadeIn,50);
+
-
    }
+
-
    else
+
-
    {
+
-
      self.alphaCur = self.alphaDes;
+
-
    }
+
-
    self.Fresh();
+
-
  };
+
}
}
-
FadeObj.prototype.Fresh = function() {
+
function ItemWither()
-
  if (this.obj.style.filter.alpha!=undefined)
+
-
  {
+
-
    this.obj.style.filter.alpha.opacity = 100 * this.alphaCur + '%';
+
-
  }
+
-
  else if (this.obj.style.MozOpacity!=undefined)
+
-
  {
+
-
    this.obj.style.MozOpacity = this.alphaCur;
+
-
  }
+
-
  else
+
-
  {
+
-
    this.obj.style.opacity = this.alphaCur;
+
-
  }
+
-
};
+
-
FadeObj.prototype.Reset = function() {
+
-
  this.alphaCur = 0;
+
-
  this.Fresh();
+
-
};
+
-
 
+
-
var galleryFadeTitle = new FadeObj(document.getElementById("PKU_gallery_title"));
+
-
var galleryFadeButton = new Array();
+
-
for (var objit=0,objs=document.getElementsByName("PKU_gallery_button");objit<objs.length;++objit)
+
{
{
-
   galleryFadeButton[objit] = new FadeObj(objs[objit],0.8);
+
   Submenu_Size_Cur[Submenu_Item_Cur] = Submenu_Size_Cur[Submenu_Item_Cur] * 0.6 - 5 * 0.4;
-
}
+
   if (Submenu_Size_Cur[Submenu_Item_Cur]<=0)
-
var galleryFadeContext = new FadeObj(document.getElementById("PKU_gallery_container"));
+
-
var galleryFadeButtonL = new FadeObj(document.getElementById("PKU_gallery_ButtonL"));
+
-
var galleryFadeButtonN = new FadeObj(document.getElementById("PKU_gallery_ButtonN"));
+
-
var galleryFadePageNavi = new FadeObj(document.getElementById("PKU_gallery_pagenavi"));
+
-
var galleryFadePKUname = new FadeObj(document.getElementById("PKU_gallery_pkuname"));
+
-
var galleryFadeLogo = new FadeObj(document.getElementById("PKU_gallery_logo"));
+
-
 
+
-
function FadeInGallery()
+
-
{
+
-
   setTimeout(galleryFadeTitle.FadeIn,500);
+
-
  for (var objit=0;objit<galleryFadeButton.length;++objit)
+
   {
   {
-
     setTimeout(galleryFadeButton[objit].FadeIn,1200);
+
     Submenu_Size_Cur[Submenu_Item_Cur]=0;
-
  }
+
     Submenu_Obj[Submenu_Item_Cur-1].style.display='none';
-
  setTimeout(galleryFadeContext.FadeIn,1600);
+
    Submenu_Obj[Submenu_Item_Cur-1].style.height=0;
-
  for (var objit=0;objit<galleryWidthContext.length;++objit)
+
     Submenu_Item_Cur = Submenu_Item_Des;
-
  {
+
     Submenu_Blank.style.width=Submenu_BlankWidth[Submenu_Item_Cur]+'px';
-
     setTimeout(galleryWidthContext[objit].Growth,1900);
+
     if (Submenu_Item_Des!=0)
-
  }
+
-
  setTimeout(galleryFadeButtonL.FadeIn,2000);
+
-
  setTimeout(galleryFadeButtonN.FadeIn,2000);
+
-
  setTimeout(galleryFadePageNavi.FadeIn,2200);
+
-
  setTimeout(galleryFadePKUname.FadeIn,2800);
+
-
  setTimeout(galleryFadeLogo.FadeIn,3000);
+
-
  setTimeout("IsBusy=false;",3000);
+
-
}
+
-
 
+
-
function WidthObj(obj_Point, Width_Des, Width_Cur)
+
-
{
+
-
  this.obj = obj_Point;
+
-
  this.widthDes = Width_Des;
+
-
  this.widthCur = Width_Cur;
+
-
  var self = this;
+
-
  this.obj.style.width = this.widthCur + 'px';
+
-
 
+
-
  this.Reset = function() {
+
-
     self.widthCur = 0;
+
-
     self.obj.style.width = self.widthCur + 'px';
+
-
  };
+
-
  this.Growth = function() {
+
-
    self.widthCur += 40;
+
-
     if (self.widthCur<self.widthDes)
+
     {
     {
-
       setTimeout(self.Growth,50);
+
       if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;}
 +
      Submenu_Obj[Submenu_Item_Cur-1].style.display='block';
 +
      Submenu_Handle_State = 1;
 +
      ItemGrowth();
     }
     }
     else
     else
     {
     {
-
       self.widthCur = self.widthDes;
+
       Submenu_Handle_State = 0;
 +
      Submenu_Handle = null;
 +
      Submenu_Parent.style.zIndex = 0;
     }
     }
-
    self.obj.style.width = self.widthCur + 'px';
 
-
  };
 
-
  this.Wither = function() {
 
-
    self.widthCur -= 100;
 
-
    if (self.widthCur>self.widthDes)
 
-
    {
 
-
      setTimeout(self.Wither,50);
 
-
    }
 
-
    else
 
-
    {
 
-
      self.widthCur = self.widthDes;
 
-
    }
 
-
    self.obj.style.width = self.widthCur + 'px';
 
-
  };
 
-
}
 
-
WidthObj.prototype.Fresh = function () {
 
-
    this.obj.style.width = this.widthCur + 'px';
 
-
};
 
-
 
-
var galleryWidthContext = new Array();
 
-
galleryWidthContext[0] = new WidthObj(document.getElementById("PKU_gallery_context"),682,0);
 
-
for (var objit=1,objs=document.getElementsByName("PKU_gallery_BoxTB");objit<=objs.length;++objit)
 
-
{
 
-
  galleryWidthContext[objit]=new WidthObj(objs[objit-1],682,0);
 
-
}
 
-
var galleryWidthPages = new Array();
 
-
for (var objit=0,objs=document.getElementsByName("PKU_gallery_section_h");objit<objs.length;++objit)
 
-
{
 
-
  galleryWidthPages[objit]=new WidthObj(objs[objit],0,0);
 
-
}
 
-
 
-
function HeightObj(obj_Point, Height_Des, Height_Cur)
 
-
{
 
-
  this.obj = obj_Point;
 
-
  this.heightDes = Height_Des;
 
-
  this.heightCur = Height_Cur;
 
-
  var self = this;
 
-
  this.obj.style.height = this.heightCur + 'px';
 
-
 
-
  this.Reset = function() {
 
-
    self.heightCur = 0;
 
-
    self.obj.style.height = self.heightCur + 'px';
 
-
  };
 
-
  this.Growth = function() {
 
-
    self.heightCur += 20;
 
-
    if (self.heightCur<self.heightDes)
 
-
    {
 
-
      setTimeout(self.Growth,50);
 
-
    }
 
-
    else
 
-
    {
 
-
      self.heightCur = self.heightDes;
 
-
    }
 
-
    self.obj.style.height = self.heightCur + 'px';
 
-
  };
 
-
  this.Wither = function() {
 
-
    self.heightCur -= 20;
 
-
    if (self.heightCur>self.heightDes)
 
-
    {
 
-
      setTimeout(self.Growth,50);
 
-
    }
 
-
    else
 
-
    {
 
-
      self.heightCur = self.heightDes;
 
-
    }
 
-
    self.obj.style.height = self.heightCur + 'px';
 
-
  };
 
-
}
 
-
HeightObj.prototype.Fresh = function () {
 
-
    this.obj.style.height = this.heightCur + 'px';
 
-
};
 
-
 
-
var galleryHeightContext = new Array();
 
-
galleryHeightContext[0] = new HeightObj(document.getElementById("PKU_gallery_context"),202,202);
 
-
for (var objit=1,objs=document.getElementsByName("PKU_gallery_BoxLR");objit<=objs.length;++objit)
 
-
{
 
-
  galleryHeightContext[objit]=new HeightObj(objs[objit-1],202,202);
 
-
}
 
-
var galleryHeightPages = new Array();
 
-
for (var objit=0,objs=document.getElementsByName("PKU_gallery_section_v");objit<objs.length;++objit)
 
-
{
 
-
  galleryHeightPages[objit]=new HeightObj(objs[objit],0,0);
 
-
}
 
-
 
-
function ButtonMouseOver(objPointer)
 
-
{
 
-
  var Img = objPointer.getElementsByTagName("img");
 
-
  Img[1].style.display = "block";
 
-
  Img[0].style.display = "none";
 
-
}
 
-
 
-
function ButtonMouseOut(objPointer)
 
-
{
 
-
  var Img = objPointer.getElementsByTagName("img");
 
-
  Img[0].style.display = "block";
 
-
  Img[1].style.display = "none";
 
-
}
 
-
 
-
function AllButtonsReset()
 
-
{
 
-
  for (var it=0;it<galleryFadeButton.length;++it)
 
-
  {
 
-
    ButtonMouseOut(galleryFadeButton[it].obj);
 
-
    galleryFadeButton[it].alphaDes = 0.7;
 
-
  }
 
-
}
 
-
 
-
function ButtonMouseOverL()
 
-
{
 
-
  var Img = document.getElementById("PKU_gallery_ButtonL").getElementsByTagName("img");
 
-
  if (buttonLastExist)
 
-
  {
 
-
    Img[0].style.display = "none";
 
-
    Img[1].style.display = "block";
 
-
    Img[2].style.display = "none";
 
   }
   }
   else
   else
   {
   {
-
     Img[0].style.display = "none";
+
     Submenu_Obj[Submenu_Item_Cur-1].style.height=Submenu_Size_Cur[Submenu_Item_Cur]+'px';
-
    Img[1].style.display = "none";
+
     Submenu_Handle = setTimeout(ItemWither,50);
-
     Img[2].style.display = "block";
+
   }
   }
}
}
-
 
+
function ToWither()
-
function ButtonMouseOutL()
+
{
{
-
   var Img = document.getElementById("PKU_gallery_ButtonL").getElementsByTagName("img");
+
   Submenu_Handle_State = 3;
-
   if (buttonLastExist)
+
   ItemWither();
-
  {
+
-
    Img[0].style.display = "block";
+
-
    Img[1].style.display = "none";
+
-
    Img[2].style.display = "none";
+
-
  }
+
-
  else
+
-
  {
+
-
    Img[0].style.display = "none";
+
-
    Img[1].style.display = "none";
+
-
    Img[2].style.display = "block";
+
-
  }
+
}
}
-
 
+
/* Trigger Function */
-
function ButtonMouseOverN()
+
function TriggerSubmenu(i)
{
{
-
  var Img = document.getElementById("PKU_gallery_ButtonN").getElementsByTagName("img");
+
   if (Submenu_Handle_State==0)
-
   if (buttonNextExist)
+
   {
   {
-
     Img[0].style.display = "none";
+
     if (Submenu_Item_Des==0)
-
    Img[1].style.display = "block";
+
-
    Img[2].style.display = "none";
+
-
  }
+
-
  else
+
-
  {
+
-
    Img[0].style.display = "none";
+
-
    Img[1].style.display = "none";
+
-
    Img[2].style.display = "block";
+
-
  }
+
-
}
+
-
 
+
-
function ButtonMouseOutN()
+
-
{
+
-
  var Img = document.getElementById("PKU_gallery_ButtonN").getElementsByTagName("img");
+
-
  if (buttonNextExist)
+
-
  {
+
-
    Img[0].style.display = "block";
+
-
    Img[1].style.display = "none";
+
-
    Img[2].style.display = "none";
+
-
  }
+
-
  else
+
-
  {
+
-
    Img[0].style.display = "none";
+
-
    Img[1].style.display = "none";
+
-
    Img[2].style.display = "block";
+
-
  }
+
-
}
+
-
 
+
-
function Gallery()
+
-
{
+
-
  this.secCur = 4;
+
-
  this.secDes = 4;
+
-
  this.secAll = 6;
+
-
  this.pageCur = 0;
+
-
  this.pageDes = 0;
+
-
  this.pageAll = [1,4,1,1,5,1];
+
-
  this.navis = document.getElementById("PKU_gallery_navi").getElementsByTagName("img");
+
-
  this.contextWidth = galleryWidthContext;
+
-
  this.contextWidth_Des = [682,682,682,682,682,682];
+
-
  this.contextHeight = galleryHeightContext;
+
-
  this.contextHeight_Des = [202,202,202,202,202,202];
+
-
  this.pagesWidth = galleryWidthPages;
+
-
  this.pagesHeight = galleryHeightPages;
+
-
  var self = this;
+
-
  this.pagesHeight[this.secCur].heightDes=this.contextHeight_Des[this.secCur];
+
-
  this.pagesWidth[5*this.secCur+this.pageCur].widthDes=this.contextWidth_Des[this.secCur];
+
-
  this.pagesHeight[this.secCur].Growth();
+
-
  this.pagesWidth[5*this.secCur+this.pageCur].Growth();
+
-
  for (var objit=0;objit<2*5;++objit)
+
-
  {
+
-
    this.navis[objit].style.display = "none";
+
-
  }
+
-
  for (var objit=0;objit<this.pageAll[this.secDes];++objit)
+
-
  {
+
-
    if (objit!=this.pageDes)
+
     {
     {
-
       this.navis[2*objit].style.display = "block";
+
       if (i!=0)
 +
      {
 +
        Submenu_Parent.style.zIndex = 5;
 +
        Submenu_Item_Des = i;
 +
        Submenu_Item_Cur = i;
 +
        Submenu_Handle_State = 1;
 +
        Submenu_Blank.style.width=Submenu_BlankWidth[Submenu_Item_Cur]+'px';
 +
        Submenu_Obj[Submenu_Item_Cur-1].style.display='block';
 +
        if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;}
 +
        ItemGrowth();
 +
      }
     }
     }
-
  }
+
     else
-
  this.navis[2*this.pageDes+1].style.display = "block";
+
-
 
+
-
  this.ShrinkContextWidth = function() {
+
-
     for (var objit=0;objit<self.contextWidth.length;++objit)
+
     {
     {
-
       self.contextWidth[objit].widthDes=0;
+
       Submenu_Item_Des = i;
-
       self.contextWidth[objit].Wither();
+
      if (i==0)
 +
      {
 +
        Submenu_Handle_State = 2;
 +
        Submenu_Handle = setTimeout(ToWither,1000);
 +
       }
 +
      else if (i!=Submenu_Item_Cur)
 +
      {
 +
        if (Submenu_Handle) {clearTimeout(Submenu_Handle);Submenu_Handle = null;}
 +
        Submenu_Handle_State = 3;
 +
        ItemWither();
 +
      }
     }
     }
-
   };
+
   }
-
   this.ShrinkContextHeight = function() {
+
   else if (Submenu_Handle_State==2)
-
    for (var objit=0;objit<self.contextHeight.length;++objit)
+
   {
-
    {
+
     Submenu_Item_Des = i;
-
      self.contextHeight[objit].heightDes=0;
+
     if (i!=0)
-
      self.contextHeight[objit].Wither();
+
-
    }
+
-
  };
+
-
  this.RefillContextWidth = function() {
+
-
    for (var objit=0;objit<self.contextWidth.length;++objit)
+
-
    {
+
-
      self.contextWidth[objit].widthDes=self.contextWidth_Des[self.secDes];
+
-
      self.contextWidth[objit].Growth();
+
-
    }
+
-
  };
+
-
  this.RefillContextHeight = function() {
+
-
    for (var objit=0;objit<self.contextHeight.length;++objit)
+
-
    {
+
-
      self.contextHeight[objit].heightDes=self.contextHeight_Des[self.secDes];
+
-
      self.contextHeight[objit].Growth();
+
-
    }
+
-
  };
+
-
  this.ApplyPage = function() {
+
-
    buttonLastExist = self.CheckLastExist();
+
-
    buttonNextExist = self.CheckNextExist();
+
-
    ButtonMouseOutN();ButtonMouseOutL();
+
-
    self.pagesWidth[self.secCur*5+self.pageCur].widthDes = 0;
+
-
    self.pagesWidth[self.secDes*5+self.pageDes].widthDes = self.contextWidth_Des[self.secDes];
+
-
    self.navis[2*self.pageCur].style.display = 'block';
+
-
    self.navis[2*self.pageCur+1].style.display = 'none';
+
-
    self.navis[2*self.pageDes+1].style.display = 'block';
+
-
    self.navis[2*self.pageDes].style.display = 'none';
+
-
    setTimeout(self.pagesWidth[5*self.secCur+self.pageCur].Wither,30);
+
-
    setTimeout(self.pagesWidth[5*self.secDes+self.pageDes].Growth,30);
+
-
    IsBusy = true;
+
-
    setTimeout("IsBusy = false;", 500);
+
-
    setTimeout(self.Update,500);
+
-
   };
+
-
  this.ApplySection = function() {
+
-
     self.pageDes = 0;
+
-
     buttonLastExist = self.CheckLastExist();
+
-
    buttonNextExist = self.CheckNextExist();
+
-
    ButtonMouseOutN();ButtonMouseOutL();
+
-
    self.pagesHeight[self.secCur].heightDes = 0;
+
-
    self.pagesHeight[self.secDes].heightDes = self.contextHeight_Des[self.secDes];
+
-
    self.pagesWidth[self.secCur*5+self.pageCur].widthDes = 0;
+
-
    self.pagesWidth[self.secDes*5+self.pageDes].widthDes = self.contextWidth_Des[self.secDes];
+
-
    for (var objit=0;objit<2*5;++objit)
+
-
    {
+
-
      self.navis[objit].style.display = "none";
+
-
    }
+
-
    for (var objit=0;objit<self.pageAll[self.secDes];++objit)
+
     {
     {
-
       if (objit!=self.pageDes)
+
      clearTimeout(Submenu_Handle);Submenu_Handle = null;
 +
       if (i==Submenu_Item_Cur)
       {
       {
-
         self.navis[2*objit].style.display = "block";
+
         Submenu_Handle_State = 0;
 +
      }
 +
      else
 +
      {
 +
        Submenu_Handle_State = 3;
 +
        ItemWither();
       }
       }
     }
     }
-
    self.navis[2*self.pageDes+1].style.display = "block";
+
  }
-
 
+
  else if (Submenu_Handle_State==3)
-
    setTimeout(self.ShrinkContextWidth,0);
+
   {
-
    setTimeout(self.ShrinkContextHeight,400);
+
     Submenu_Item_Des = i;
-
    setTimeout(self.pagesWidth[5*self.secCur+self.pageCur].Reset,450);
+
     if (i==Submenu_Item_Cur)
-
    setTimeout(self.pagesHeight[self.secCur].Reset,450);
+
-
    setTimeout(self.RefillContextHeight,500);
+
-
    setTimeout(self.RefillContextWidth,600);
+
-
    setTimeout(self.pagesHeight[self.secDes].Growth,800);
+
-
    setTimeout(self.pagesWidth[5*self.secDes+self.pageDes].Growth,900);
+
-
    IsBusy = true;
+
-
    setTimeout("IsBusy = false;", 1000);
+
-
    setTimeout(self.Update,1000);
+
-
   };
+
-
  this.Update = function() {
+
-
     self.secCur = self.secDes;
+
-
     self.pageCur = self.pageDes;
+
-
  };
+
-
  this.PageLast = function() {
+
-
    if (self.CheckLastExist())
+
     {
     {
-
       self.pageDes = self.pageCur - 1;
+
       clearTimeout(Submenu_Handle);Submenu_Handle = null;
-
       self.ApplyPage();
+
      Submenu_Handle_State = 1;
 +
       ItemGrowth();
     }
     }
-
   };
+
   }
-
   this.PageNext = function() {
+
   else
-
     if (self.CheckNextExist())
+
  {
 +
     if (i!=Submenu_Item_Cur)
     {
     {
-
       self.pageDes = self.pageCur + 1;
+
       Submenu_Item_Des = i;
-
       self.ApplyPage();
+
       clearTimeout(Submenu_Handle);Submenu_Handle = null;
 +
      Submenu_Handle_State = 3;
 +
      ItemWither();
     }
     }
-
   };
+
   }
-
  this.PageTo = function(n) {
+
-
    if (n!=self.pageCur)
+
-
    {
+
-
      self.pageDes = n;
+
-
      self.ApplyPage();
+
-
    }
+
-
  };
+
-
  this.SectionTo = function(n) {
+
-
    if (n!=self.secCur)
+
-
    {
+
-
      self.pageDes = 0;
+
-
      self.secDes = n;
+
-
      self.ApplySection();
+
-
    }
+
-
  };
+
}
}
-
Gallery.prototype.CheckNextExist = function() {
 
-
  return (this.pageDes<this.pageAll[this.secDes]-1);
 
-
};
 
-
Gallery.prototype.CheckLastExist = function() {
 
-
  return (this.pageDes>0);
 
-
};
 
-
 
-
var pkuHomeGallery = new Gallery();
 
-
 
-
function Initialization()
 
-
{
 
-
  ButtonMouseOut(document.getElementById("PKU_gallery_logo"));
 
-
  ButtonMouseOutL();ButtonMouseOutN();
 
-
  AllButtonsReset();
 
-
  FadeInGallery();
 
-
  setTimeout('TrigleDemoSection(5);',3000);
 
-
}
 
-
 
-
function TrigleDemoLast()
 
-
{
 
-
  pkuHomeGallery.PageLast();
 
-
}
 
-
function TrigleDemoNext()
 
-
{
 
-
  pkuHomeGallery.PageNext();
 
-
}
 
-
function TrigleDemo(n)
 
-
{
 
-
  pkuHomeGallery.PageTo(n-1);
 
-
}
 
-
function TrigleDemoSection(n)
 
-
{
 
-
  AllButtonsReset();
 
-
  ButtonMouseOver(galleryFadeButton[n-1].obj);
 
-
  galleryFadeButton[n-1].alphaCur = 1;
 
-
  galleryFadeButton[n-1].alphaDes = 0.9;
 
-
  galleryFadeButton[n-1].FadeOut(0.05);
 
-
  pkuHomeGallery.SectionTo(n-1);
 
-
}
 
-
 
-
Initialization();
 
-
 
</script>
</script>
 +
<script type="text/javascript">
 +
document.getElementById("PKU_banner_menu").getElementsByTagName("a")[0].style.color="#60b0f0";
 +
</script>
 +
<div id="text-body">
 +
<div class="floatC">
 +
  <div class="floatL"><p class="title_block" style="width:250px;height:250px;background-image:url('/wiki/images/b/be/Peking2012_Color_Title_AquaBlue.jpg');"><br /><br />Abstract</p></div>
 +
  <div class="floatR addpad"><p class="context_block" style="width:600px;">
 +
Optogenetic tools have made significant impact on life sciences and beyond. However, several serious issues remain: cytotoxicy, narrow dynamic range, and dependency on laser and exogenous chromophore. To circumvent these, Peking iGEM has rationally constructed a hypersensitive sensor of luminance -- <i>Luminesensor</i>. Primarily, the sensor was designed by fusing blue-light-sensing protein domain from <i>Neurospora</i> with DNA binding domain of LexA from <i>E. coli</i>, following which protein structure inspection and kinetic simulation were conducted to rationally perform optimization. Amazingly, <i>Luminesensor</i> was proved to be as sensitive as to sense natural light and even bioluminescence. With this sensor, spatiotemporal control of cellular behavior, such as phototaxis, high-resolution 2D and 3D bio-printing using dim light and even luminescence of iPad were shown to be very easy. What’s more, we successfully implemented cell-cell signaling using light, which is the very first time in synthetic biology and of great importance for biotechnological use.
 +
  </p></div>
 +
</div>
 +
<div class="floatL">
 +
  <div class="floatL"><p class="title_block" style="width:200px;height:150px;background-image:url('/wiki/images/a/a4/Peking2012_Color_Title_FlameYellow.jpg');"><br /><br />Luminesensor</p></div>
 +
  <div class="floatR"><img src="/wiki/images/4/4f/Peking2012_LuminesensorMechanism.jpg" alt="" style="width:200px;"/></div>
 +
  <div class="floatC addpad"><p class="context_block" style="width:400px;">
 +
With strong motivation to raise a new generation of optogenetics, the Peking iGEM team has rationally constructed a hypersensitive sensor of luminance – what we call the <i>Luminesensor</i>. Primarily, the sensor was designed by fusing a blue-light-sensing protein domain from <i>Neurospora</i> with a DNA binding domain LexA from <i>E. coli</i>. Following this, protein structure inspection and kinetic simulations were conducted to rationally perform optimization. Amazingly, the <i>Luminesensor</i> proved to be as sensitive to sense natural light and even bioluminescence. With this sensor, spatiotemporal control of cellular behavior, such as phototaxis, high-resolution 2D and 3D bio-printing using dim light, and even utilizing the luminescence of an iPad were shown to be quite possible. What’s more, we successfully implemented cell-cell communication using light for the very first time in synthetic biology, which will prove to be of great importance for biotechnological use.
 +
  </p></div>
 +
</div>
 +
<div class="floatR">
 +
  <div class="floatL"><p class="title_block" style="width:200px;height:150px;background-image:url('/wiki/images/a/a2/Peking2012_Color_Title_FreshGreen.jpg');"><br /><br />Light Communication</p></div>
 +
  <div class="floatR"><img src="/wiki/images/7/77/Peking2012_LightCommunication.jpg" alt="" style="width:200px;"/></div>
 +
  <div class="floatC addpad"><p class="context_block" style="width:400px;">
 +
The ultrasensitive <i>Luminesensor</i> is able to respond to very dim light and still maintain a high dynamic range. That encouraged Peking iGEM to explore the possibility of cell-cell communication through light. Similar to other universal signals, the delivery of light signals is not limited by diffusion or by variation of organisms across species or even kingdoms. By carefully selecting the lux operon as the light sender module, Peking iGEM successfully demonstrated that Luminesensor is able to sense the blue light of the lux operon. This is the first time that light-communication between cells has been achieved without direct physical contact. As a proof of concept, a video was recorded to reveal the timing-course change of the sender and the receiver cells. Quantitative data was also obtained to evaluate the efficiency of light-communication. To build a complete light-communication system, a Light-On system was also constructed to achieve both positive and negative control by light. As the application of synthetic biology is becoming of age, Peking iGEM has probed into the bright future of light-communication.
 +
  </p></div>
 +
</div>
 +
<div class="floatC"><p></p></div>
 +
<div class="floatL">
 +
  <div class="floatL"><p class="title_block" style="width:200px;height:200px;background-image:url('/wiki/images/f/fe/Peking2012_Color_Title_GrapePurple.jpg');"><br /><br />Syn Bio in 2D & 3D</p></div>
 +
  <div class="floatR"><img src="/wiki/images/3/3b/Peking2012_PrintParagraph_Square.jpg" alt="" style="width:200px;"/></div>
 +
  <div class="floatC addpad"><p class="context_block" style="width:400px;">
 +
3D printing is a new technology that has been rising for many years. The methods for 3D printing in manufacturing are quite developed, but in the realm of synthetic biology, there have been only a few attempts made. We believe that 3D printing can be utilized in many applications in both medical and manufacturing, such as with the synthesis of artificial vessels, organs, or bone tissues, and the creation of high-order biomaterials based on the high spatial resolution of the light. With more precise control of the response threshold of the optic biosensor, we can obtain holographic images from a solid medium.
 +
  </p></div>
 +
</div>
 +
<div class="floatR">
 +
  <div class="floatL"><p class="title_block" style="width:200px;height:200px;background-image:url('/wiki/images/5/50/Peking2012_Color_Title_CherryPink.jpg');"><br /><br />Phototaxis</p></div>
 +
  <div class="floatR"><img src="/wiki/images/b/b6/Peking2012_PhototaxisSPECSdot.gif" alt="" style="width:200px;"/></div>
 +
  <div class="floatC addpad"><p class="context_block" style="width:400px;">
 +
The 2012 Peking iGEM has successfully built "Phototatic" bacteria by programming the chemotaxis system in <i>E. coli</i> through light with the <i>Luminesensor</i>. By controlling the expression level of the cheZ protein with light, the tumbling frequency is coupled to the intensity of light signals. On the border of the light and dark fields on the plate, the motility difference of the cells in a single colony on the two sides is sufficient to form an uneven colony. The light-controlled cell motion that we have achieved has a very promising environmental and medical application for the future, <i>e.g.</i> the delivery of drugs to target concerns.
 +
  </p></div>
 +
</div>
 +
</div>
</html>
</html>

Revision as of 10:12, 19 September 2012



Abstract

Optogenetic tools have made significant impact on life sciences and beyond. However, several serious issues remain: cytotoxicy, narrow dynamic range, and dependency on laser and exogenous chromophore. To circumvent these, Peking iGEM has rationally constructed a hypersensitive sensor of luminance -- Luminesensor. Primarily, the sensor was designed by fusing blue-light-sensing protein domain from Neurospora with DNA binding domain of LexA from E. coli, following which protein structure inspection and kinetic simulation were conducted to rationally perform optimization. Amazingly, Luminesensor was proved to be as sensitive as to sense natural light and even bioluminescence. With this sensor, spatiotemporal control of cellular behavior, such as phototaxis, high-resolution 2D and 3D bio-printing using dim light and even luminescence of iPad were shown to be very easy. What’s more, we successfully implemented cell-cell signaling using light, which is the very first time in synthetic biology and of great importance for biotechnological use.



Luminesensor

With strong motivation to raise a new generation of optogenetics, the Peking iGEM team has rationally constructed a hypersensitive sensor of luminance – what we call the Luminesensor. Primarily, the sensor was designed by fusing a blue-light-sensing protein domain from Neurospora with a DNA binding domain LexA from E. coli. Following this, protein structure inspection and kinetic simulations were conducted to rationally perform optimization. Amazingly, the Luminesensor proved to be as sensitive to sense natural light and even bioluminescence. With this sensor, spatiotemporal control of cellular behavior, such as phototaxis, high-resolution 2D and 3D bio-printing using dim light, and even utilizing the luminescence of an iPad were shown to be quite possible. What’s more, we successfully implemented cell-cell communication using light for the very first time in synthetic biology, which will prove to be of great importance for biotechnological use.



Light Communication

The ultrasensitive Luminesensor is able to respond to very dim light and still maintain a high dynamic range. That encouraged Peking iGEM to explore the possibility of cell-cell communication through light. Similar to other universal signals, the delivery of light signals is not limited by diffusion or by variation of organisms across species or even kingdoms. By carefully selecting the lux operon as the light sender module, Peking iGEM successfully demonstrated that Luminesensor is able to sense the blue light of the lux operon. This is the first time that light-communication between cells has been achieved without direct physical contact. As a proof of concept, a video was recorded to reveal the timing-course change of the sender and the receiver cells. Quantitative data was also obtained to evaluate the efficiency of light-communication. To build a complete light-communication system, a Light-On system was also constructed to achieve both positive and negative control by light. As the application of synthetic biology is becoming of age, Peking iGEM has probed into the bright future of light-communication.



Syn Bio in 2D & 3D

3D printing is a new technology that has been rising for many years. The methods for 3D printing in manufacturing are quite developed, but in the realm of synthetic biology, there have been only a few attempts made. We believe that 3D printing can be utilized in many applications in both medical and manufacturing, such as with the synthesis of artificial vessels, organs, or bone tissues, and the creation of high-order biomaterials based on the high spatial resolution of the light. With more precise control of the response threshold of the optic biosensor, we can obtain holographic images from a solid medium.



Phototaxis

The 2012 Peking iGEM has successfully built "Phototatic" bacteria by programming the chemotaxis system in E. coli through light with the Luminesensor. By controlling the expression level of the cheZ protein with light, the tumbling frequency is coupled to the intensity of light signals. On the border of the light and dark fields on the plate, the motility difference of the cells in a single colony on the two sides is sufficient to form an uneven colony. The light-controlled cell motion that we have achieved has a very promising environmental and medical application for the future, e.g. the delivery of drugs to target concerns.

Retrieved from "http://2012.igem.org/Team:Peking"