Team:UESTC-China

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<style type="text/css">
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
/* hiding the top section*/
+
<head>
-
body{position:absolute; top:0px; width:100%; height:1300px;}
+
<title>IGEM</title>
-
#top-section{
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
  height:0px;
+
<meta http-equiv="Content-Style-Type" content="text/css" />
-
    border:none;
+
<!--<link href="style.css" rel="stylesheet" type="text/css" />
-
    width:980px;
+
<link rel="stylesheet" type="text/css" href="buttons/buttons.css" />-->
-
    margin:0 auto;
+
<style>
-
    padding:0 0 0 0;
+
.button{
-
    background-color:transparent;
+
font:15px Calibri, Arial, sans-serif;
-
    overflow:hide;
+
-
}
+
/* A semi-transparent text shadow */
-
#p-logo{display:none;}
+
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
-
#search-controls{display:none;}
+
-
#top{display:none;}
+
/* Overriding the default underline styling of the links */
-
.firstHeading{display:none;}
+
text-decoration:none !important;
-
/* end of hiding the top section*/
+
white-space:nowrap;
 +
 +
display:inline-block;
 +
vertical-align:baseline;
 +
position:relative;
 +
cursor:pointer;
 +
padding:10px 20px;
 +
 +
background-repeat:no-repeat;
-
/* global setting*/
+
/* The following two rules are fallbacks, in case
-
#globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri， Arial, Helvetica, sans-serif;}
+
  the browser does not support multiple backgrounds. */
-
#content{
+
-
    background-color:transparent;
+
-
    border:none;
+
-
    width:1200px;
+
-
    height:700px;
+
-
    marign:0 auto;
+
-
    padding:0 0 0 0;
+
-
    top:-40px;
+
-
    }
+
-
#bodyContent{
+
-
    background-color:transparent;
+
-
    border:none;
+
-
   
+
-
    }
+
-
siteSub{
+
-
    display:none;
+
-
    border:none;
+
-
    }
+
-
contentSub{
+
-
    display:none;
+
-
    }
+
-
/* end of global setting*/
+
-
/*hiding the footer-box*/
+
background-position:bottom left;
-
#footer-box{display:none;}
+
background-image:url('./images/button_bg.png');
-
#catlinks{display:none;}
+
-
/*end of hiding the footer book*/
+
/* Multiple backgrounds version. The background images
-
 
+
  are defined individually in color classes */
-
/* menu (page, edit ...) */
+
-
#menubar {
+
background-position:bottom left, top right, 0 0, 0 0;
-
    background-color:transparent;
+
background-clip:border-box;
-
    position: relative;
+
-
    float:left;
+
/* Applying a default border raidus of 8px */
-
    white-space: nowrap;
+
-
    top:-6px;
+
-moz-border-radius:8px;
-
    width: 490px;
+
-webkit-border-radius:8px;
-
    z-index: 5000;
+
border-radius:8px;
-
    font-family: sans-serif;
+
-
    font-size: 95%;
+
/* A 1px highlight inside of the button */
-
    line-height: 1em;
+
-
    z-index:99;
+
-moz-box-shadow:0 0 1px #fff inset;
 +
-webkit-box-shadow:0 0 1px #fff inset;
 +
box-shadow:0 0 1px #fff inset;
 +
 +
/* Animating the background positions with CSS3 */
 +
/* Currently works only in Safari/Chrome */
 +
 +
-webkit-transition:background-position 1s;
 +
-moz-transition:background-position 1s;
 +
transition:background-position 1s;
}
}
-
 
+
.button:hover{
-
.left-menu, .left-menu a {
+
-
    text-align: left;
+
/* The first rule is a fallback, in case the browser
-
    color:#999999;
+
  does not support multiple backgrounds
-
    text-transform: lowercase;
+
*/
 +
 +
background-position:top left;
 +
background-position:top left, bottom right, 0 0, 0 0;
}
}
-
.left-menu:hover {
+
.button:active{
-
    color: #D00000;
+
/* Moving the button 1px to the bottom when clicked */
-
    background-color: transparent;
+
bottom:-1px;
}
}
-
.right-menu{width:400px; float:right}
+
/* The three buttons sizes */
-
.right-menu, .right-menu a {
+
-
    right: 0px;
+
-
    text-align: right;
+
-
    color: #999999;
+
-
}
+
-
#menubar ul {
+
-
    color: #999999;
+
-
    list-style: none;
+
-
}
+
-
#menubar li {
+
-
    display: inline;
+
-
    position: relative;
+
-
    cursor: pointer;
+
-
    padding-left: 0px;
+
-
    padding-right: 0px;
+
-
}
+
-
.left-menu li a {
+
-
    padding: 0px 10px 0px 0px;
+
-
}
+
-
.left-menu .selected {
+
-
#    color: #999999;
+
-
}
+
-
#.left-menu .selected:hover {
+
-
#    color: #999999;
+
-
#}
+
-
.left-menu:hover a {
+
.button.big { font-size:30px;}
-
    color: #999999;;
+
.button.medium { font-size:18px;}
-
}
+
.button.small { font-size:13px;}
-
.left-menu li a:hover {
+
/* A more rounded button */
-
    color: #D00000;
+
-
    text-decoration: underline;
+
-
}
+
-
 
+
.button.rounded{
-
.right-menu li {
+
-moz-border-radius:4em;
-
#    background-color: transparent;
+
-webkit-border-radius:4em;
-
}
+
border-radius:4em;
-
.right-menu li a {
+
-
    padding: 0px 15px 0px 0px;
+
-
    color: #999999;;
+
-
    background-color: transparent;
+
-
}
+
-
.right-menu li a:hover {
+
-
    color: #D00000;
+
-
    text-decoration: underline;
+
}
}
-
/* end menu (edit, page ...) */
 
-
/* navigation bar*/
 
-
#navigationblock{background-color:#fafaf8; position:fixed; top:0px; width:1200px; height:130px; overflow:hidden; font-family:Calibri, Arial; float:left; margin:0px; padding:0px; z-index:1000; border-bottom:1px solid #d3d7d8;}
+
/* Defining four button colors */
-
#navbarlogo{position:absolute; top:0px; left:0px; width:1200px}
+
-
#navigationbar{position:absolute; left:460px; top:38px; font-size:16px; font-weight:100; color:black;}
+
-
#navigationbar > li {display:block; list-style-type:none; float:left; width:75px; height:30px; text-align:center; }
+
-
.Navbar_Item{background-color:transparent;}
 
-
.Navbar_Item a {color:black; text-decoration:none;}
 
-
.Navbar_Item > ul {display:none; width:900px; height:80px; text-align:center; color:black; z-index:1100; }
 
-
.Navbar_Item > ul > li {float:left; list-style:none; text-align:center; background-color:transparent; position:relative; top:10px; padding:0 10px;}
 
-
.Navbar_Item:hover{ border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
 
-
.Navbar_Item:hover > ul{zoom:1; display:block;}
 
-
.Navbar_Item:hover >a {color:#D00000; background-color:#fafaf8;}
 
-
.Navbar_Item > ul > li:hover {border-bottom:1px solid #D00000; color:#D00000; background-color:#fafaf8;}
 
-
.Navbar_Item > ul > li:hover >a {color:#D00000}
 
-
.BackgroundofSublist{position:absolute; left:-1000px; width:2000px; height:80px; background-color:#ffffff; opacity:0;}
 
 +
/* BlueButton */
-
#Home_Sublist{position:relative; top:0px; left:-50px;}
+
.blue.button{
-
#Team_Sublist{position:relative; top:0px; left:-110px;}
+
color:#0f4b6d !important;
-
#Project_Sublist{position:relative; top:0px; left:-180px;}
+
-
#Model_Sublist{position:relative; top:0px; left:-140px;}
+
border:1px solid #84acc3 !important;
-
#DataPage_Sublist{position:relative; top:0px; left:-60px;}
+
-
#Safety_Sublist{position:relative; top:0px; left:-180px;}
+
/* A fallback background color */
-
#HumanPractice_Sublist{position:relative; top:0px; left:-470px;}
+
background-color: #48b5f2;
 +
 +
/* Specifying a version with gradients according to */
 +
 +
background-image: url('./images/button_bg.png'), url('./images/button_bg.png'),
 +
-moz-radial-gradient( center bottom, circle,
 +
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
 +
-moz-linear-gradient(#4fbbf7, #3faeeb);
-
#iGEM_logo{position:absolute; top:30px; left:1090px; height:80px;}
+
background-image: url('./images/button_bg.png'), url('./images/button_bg.png'),
-
/*end navigation bar*/
+
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 +
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
 +
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
 +
}
-
/*Major body*/
+
.blue.button:hover{
-
#MajorBody{position:absolute; top:0px; left:0px; width:1200px; height:1380px; background-color:#f9f9f7;}
+
background-color:#63c7fe;
-
#ProjectTitle{position:absolute; left:0px; width:1200px; height:184px; top:150px; z-index:600;}
+
-
#TitleBackground{position:absolute; left:0px; top:0px; width:1200px;}
+
background-image: url('./images/button_bg.png'), url('./images/button_bg.png'),
-
#LittleScout{position:relative; left:0px; top:-3px; width:70px;}
+
-moz-radial-gradient( center bottom, circle,
-
#ProjectName{position:absolute; left:405px; top:20px; border-bottom:0px; color:#FFFFFF; font-size:48px; font-family:calibri,Arial, Helvetica, sans-serif;}
+
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-
#ProjectSubname{position:absolute; left:0px; width:1200px; top:105px; border-bottom:0px; color:#FFFFFF; font-size:18px;  font-family: calibri， Arial, Helvetica, sans-serif; text-align:center;}
+
-moz-linear-gradient(#63c7fe, #58bef7);
 +
 +
background-image: url('./images/button_bg.png'), url('./images/button_bg.png'),
 +
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 +
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
 +
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
 +
}
-
#MajorBodyBackground{position:absolute; top:334px; left:0px; width:1200px;}
+
/* Green Button */
-
#PreLocation{font-size:14px; font-family:arial,helvetica,sans-serif; color:#ca4321;position:absolute;top:190px;left:0px;text-align:center;width:1200px;line-height:20px; font-weight:bold;}
+
.green.button{
 +
color:#345903 !important;
 +
border:1px solid #96a37b !important;
 +
background-color: #79be1e;
 +
 +
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 +
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
 +
}
-
#AbstractBox{position:absolute; left:430px; top:390px; width:710px; height:540px; background-color:transparent;}
+
.green.button:hover{
-
#AbstractBackground{width:100%; height:100%; background-color:#FFFFFF; opacity:0.8;}
+
background-color:#89d228;
-
#AbstractContent{position:absolute; left:40px; top:25px; width:630px; font-size:18px; line-height:25px ; font-family: calibri, Arial, sans-serif; text-align:justify;}
+
-
#AbstractContent:first-letter{font-size:30px;}
+
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
-
.SmallBoxes{width:340px; height:250px;background-color:#FFFFFF; overflow:hidden;font-family: calibri， Arial, Helvetica, sans-serif; }
+
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
-
.SmallBoxes > img{position:absolute; left:0px; top:0px;}
+
}
-
.SmallBoxes p{position:absolute; left:20px; top:75px; width:300px; font-size:14px; color:#ffffff; text-align:justify;}
+
-
.SmallBoxes a{position:absolute; left:240px; top:220px; width:300px; font-size:12px; color:#ffffff; text-align:justify;}
+
 +
/* Orange Button */
-
#AppendixBox1{position:absolute; left:60px; top:390px; background-color:#aa4630;}
+
.orange.button{
-
#Appendix1Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
+
color:#693e0a !important;
-
#Appendix1Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
+
border:1px solid #bea280 !important;
-
#AppendixBox2{position:absolute; left:60px; top:680px; background-color:#e98d70;}
+
background-color: #e38d27;
-
#Appendix2Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
+
-
#Appendix2Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
+
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
-
#AppendixBox3{position:absolute; left:60px; top:970px; background-color:#f37021;}
+
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
-
#Appendix3Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
+
}
-
#Appendix3Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
+
-
#AppendixBox4{position:absolute; left:430px; top:970px; background-color:#1f8a70;}
+
-
#Appendix4Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
+
-
#Appendix4Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
+
-
#AppendixBox5{position:absolute; left:800px; top:970px; background-color:#004258;}
+
-
#Appendix5Title{position:absolute; left:0px; top:70px; width:340px; text-align:center; color:#ffffff; font-size:16px; border-bottom:0px; line-height:28px;}
+
-
#Appendix5Cover{position:absolute; left:0px; top:170px; width:370px; height:280px;}
+
-
.AppendixHeadLine{position:absolute; left:20px; top:20px; width:250px;border-bottom:0px; font-size:23px; color:#ffffff;}
+
.orange.button:hover{
-
.AppendixIcon{position:absolute; left:270px; top:20px; width:50px; }
+
background-color:#ec9732;
 +
 +
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 +
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
 +
}
 +
.gray.button{
 +
color:#525252 !important;
 +
border:1px solid #a5a5a5 !important;
 +
background-color: #a9adb1;
 +
 +
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 +
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
 +
}
-
/*end of Major body*/
+
.gray.button:hover{
-
#AcknowledgementBox{ position:absolute; left:0px; top:1280px; width:1200px;}
+
background-color:#b6bbc0;
 +
 +
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 +
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
 +
}
 +
* {margin:0;padding:0}
 +
body {font-family:Tahoma, Geneva, sans-serif;font-size:100%;line-height:.9375em;color:#fff;position:relative;background:url(images/body-bg.gif) center top repeat-y}
 +
input, textarea, select {font-family:Tahoma, Geneva, sans-serif;font-size:1em}
 +
.fleft {float:left}
 +
.fright {float:right}
 +
.clear {clear:both}
 +
.col-1, .col-2, .col-3 {float:left}
 +
.alignright {text-align:right}
 +
.aligncenter {text-align:center}
 +
.wrapper {width:100%;overflow:hidden}
 +
.container {width:100%}
 +
p {margin-bottom:15px}
 +
/* GLOBAL */
 +
#main {width:910px;margin:0 auto;height:auto !important;height:100%;min-height:100%;position:relative}
 +
#header, #content, #footer {font-size:0.75em}
 +
.top-bg {background:url(images/bg-top2.jpg) no-repeat center top;position:relative;min-height:100%;height:auto !important;height:100%}
 +
.bot-bg {background:url(images/bg-bottom.jpg) no-repeat center bottom;position:relative;min-height:100%;height:auto !important;height:100%}
 +
.tail-top {background:url(images/tail-top.gif) left top repeat-x #028ecc;min-height:100%;height:auto !important;height:100%}
 +
.tail-bottom {background:url(images/tail-bottom.gif) left bottom repeat-x;position:relative;min-height:100%;height:auto !important;height:100%}
 +
.tail-bg {background:url(images/bg-tail.jpg) center top repeat-y;position:relative;min-height:100%;height:auto !important;height:100%}
 +
.tail-right-top {background:url(images/tail-right.gif) right top repeat-x;position:absolute;height:550px;right:0;top:0;width:50%}
 +
.tail-right-bot {background:url(images/tail-right-bottom.gif) right bottom repeat-x;position:absolute;height:459px;right:0;bottom:0;width:50%}
 +
.tail-right {background:#0ab7e0;height:100%;position:absolute;right:0;top:0;width:50%}
 +
/* txt, links, lines, titles */
 +
a {color:#abe3fd;outline:none}
 +
a:hover{text-decoration:none}
 +
h1 {padding:28px 0 0 10px;font-size:3em;line-height:1em;float:left}
 +
h1 a {display:block;background: no-repeat left top;width:237px;height:40px;text-indent:-9999px}
 +
h1 span {background:url(images/slogan.jpg) no-repeat left top;text-indent:-9999px;display:block;height:22px;width:437px}
 +
h2 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:2.08em;line-height:1.1em;text-transform:uppercase;font-weight:normal;margin-bottom:23px}
 +
h3 {font-size:1em;padding:2px 0 0 0;margin-bottom:10px}
 +
/* header */
 +
#header {height:120px}
 +
#header .top-links {float:right;padding-top:37px}
 +
#header .top-links li {float:left}
 +
/* nav */
 +
#nav {float:left;width:209px;margin-right:40px;padding:40px 0 0 0;position:relative}
 +
#nav ul li {width:100%}
 +
#nav ul li a {display:block;background:url(images/nav-bg.png) no-repeat left top;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:209px;height:32px;line-height:32px;font-size:18px;text-transform:uppercase;color:#fff;text-decoration:none;text-indent:30px;margin-bottom:7px;position:relative;z-index:10}
 +
#nav ul li a:hover {color:#011032}
 +
.extra-img {position:absolute;top:316px;left:-11px}
 +
/* content */
 +
#content {float:left;width:661px;min-height:680px;height:auto !important;height:680px}
 +
#content {padding:40px 0}
 +
#content .section {padding:0 0 34px 0}
 +
/* list */
 +
ul {list-style:none}
 +
#content ul {padding-bottom:15px}
 +
#content ul li {font-weight:bold;padding-bottom:8px}
 +
#content ul li a {color:#fff}
 +
#content ul li ul {padding:10px 0 0 12px}
 +
#content ul li ul li {font-weight:normal}
 +
#content .items-list {padding:0}
 +
#content .items-list li {width:100%;overflow:hidden;padding-bottom:20px;font-weight:normal}
 +
#content .items-list li img {float:left;margin-right:20px}
 +
#content .articles {padding:0}
 +
#content .articles li {width:100%;overflow:hidden;padding-bottom:30px; font-weight:normal}
 +
#content .articles li img {float:left;margin-right:20px}
 +
#content .articles li a {color:#abe3fd}
 +
/* forms */
 +
input, select {vertical-align:middle;font-weight:normal}
 +
img {border:0;vertical-align:top;text-align:left}
 +
#contacts-form {clear:right;width:100%;overflow:hidden;padding:15px 0 0 0}
 +
#contacts-form fieldset {border:none;float:left}
 +
#contacts-form .field {clear:both}
 +
#contacts-form label {float:left;width:97px;line-height:20px;padding-bottom:5px;font-weight:bold}
 +
#contacts-form input {width:246px;padding:2px 0 2px 3px;background:#16acf1;border:1px solid #91dcfe;color:#fff}
 +
#contacts-form textarea {width:475px;height:293px;padding:2px 0 2px 3px;background:#16acf1;border:1px solid #91dcfe;color:#fff;margin-bottom:15px;overflow:auto}
 +
/* boxes */
 +
.box .left-top-corner {background:url(images/left-top-corner.png) no-repeat left top;padding-left:10px}
 +
.box .right-top-corner {background:url(images/right-top-corner.png) no-repeat right top;padding-right:10px}
 +
.box .border-top {background:url(images/border-top.png) left top repeat-x;height:10px;overflow:hidden;font-size:0;line-height:0}
 +
.box .border-left {background:url(images/border-side.png) left top repeat-y;padding-left:1px}
 +
.box .border-right {background:url(images/border-side.png) right top repeat-y;padding-right:1px}
 +
.box .inside {background:url(images/box-bg.png) left top;padding:14px 39px 23px 39px}
 +
.box .left-bot-corner {background:url(images/left-bot-corner.png) no-repeat left top;padding-left:10px}
 +
.box .right-bot-corner {background:url(images/right-bot-corner.png) no-repeat right top;padding-right:10px}
 +
.box .border-bot {background:url(images/border-bot.png) left top repeat-x;height:10px;overflow:hidden;font-size:0;line-height:0}
 +
.button {float:right;font-size:1.5em;line-height:1.1em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:234px;text-align:center}
 +
.button span {display:block;background:url(images/button-left.png) no-repeat left top;padding-left:11px}
 +
.button span span {background:url(images/button-right.png) no-repeat right top;padding-right:12px;padding-left:0}
 +
.button span span a {display:block;background:url(images/button-bg.png) left top repeat-x;padding:6px;color:#fff;text-decoration:none;text-transform:uppercase}
 +
.button span span a:hover {color:#000}
 +
/* footer */
 +
#footer {height:80px;position:relative;margin:-80px auto 0 auto;width:910px}
 +
#footer {color:#acc3de}
 +
#footer .indent {padding:15px 0 0 249px}
 +
#footer a {color:#fff}
 +
#footer img {position:relative;top:-4px}
 +
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
</style>
</style>
-
 
+
<script>
-
 
+
    var i = 0;
-
<!--navigationbar-->
+
function gain()
-
 
+
{
-
<div id="navigationblock">
+
i=i+1;
-
<img id="navbarlogo" src="https://static.igem.org/mediawiki/igem.org/c/c9/Peking_Logo.jpg"/>
+
}
-
       
+
-
<ul id="navigationbar">
+
-
<li id="PKU_navbar_Home" class="Navbar_Item">
+
-
                       
+
-
<a href="https://2013.igem.org/Team:Peking">Home</a>
+
-
<ul id="Home_Sublist" >
+
-
</ul>
+
-
</li>
+
-
<li id="PKU_navbar_Team" class="Navbar_Item">
+
-
<a href="">Team</a>
+
-
<ul id="Team_Sublist">
+
-
                                <div class="BackgroundofSublist"></div>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Team/Members">Members</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Team/Notebook">Notebook</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Team/Attributions">Attributions</a></li>
+
-
</ul>
+
-
</li>
+
-
<li id="PKU_navbar_Project" class="Navbar_Item">
+
-
<a href="https://2013.igem.org/Team:Peking/Project">Project</a>
+
-
<ul id="Project_Sublist">
+
-
                                <div class="BackgroundofSublist"></div>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/Project/SensorMining">Biosensor Mining</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Project/BioSensors">Biosensors</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Project/Plugins">Adaptors</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/Project/BandpassFilter">Band-pass Filter</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/Project/Devices">Devices</a></li>
+
-
</ul>
+
-
</li>
+
-
<li id="PKU_navbar_Model" class="Navbar_Item">
+
-
<a href="">Model</a>
+
-
<ul id="Model_Sublist">
+
-
                                <div class="BackgroundofSublist"></div>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/Model">Band-pass Filter</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/ModelforFinetuning">Biosensor Fine-tuning</a></li>
+
-
</ul>
+
-
</li>
+
-
                        <li id="PKU_navbar_HumanPractice" class="Navbar_Item" style="width:90px">
+
-
<a href="">Data page</a>
+
-
<ul id="DataPage_Sublist">
+
-
                                <div class="BackgroundofSublist"></div>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/DataPage/Parts">Parts</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/DataPage/JudgingCriteria">Judging Criteria</a></li>
+
-
 
+
-
</ul>
+
-
</li>
+
-
<li id="PKU_navbar_Safety" class="Navbar_Item">
+
-
<a href="https://2013.igem.org/Team:Peking/Safety">Safety</a>
+
-
<ul id="Safety_Sublist">
+
-
</ul>
+
-
</li>
+
-
<li id="PKU_navbar_HumanPractice" class="Navbar_Item" style="width:120px">
+
-
<a href="https://2013.igem.org/Team:Peking/HumanPractice">Human Practice</a>
+
-
<ul id="HumanPractice_Sublist">
+
-
                                <div class="BackgroundofSublist"></div>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/HumanPractice/Questionnaire">Questionnaire Survey</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/HumanPractice/FactoryVisit">Visit and Interview</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:Peking/HumanPractice/ModeliGEM">Practical Analysis</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Peking/HumanPractice/iGEMWorkshop">Team Communication</a></li>
+
-
 
+
-
</ul>
+
-
</li>
+
-
+
-
</ul>
+
-
        <a href="https://2013.igem.org/Main_Page"><img id="iGEM_logo" src="https://static.igem.org/mediawiki/igem.org/4/48/Peking_igemlogo.jpg"/></a>
+
-
</div>
+
-
<!--end navigationbar-->
+
-
 
+
-
<!--MajorBody-->
+
-
<div id="MajorBody"> 
+
-
<div id="ProjectTitle">
+
-
                <img id="TitleBackground" src="https://static.igem.org/mediawiki/igem.org/c/c5/Peking2013_home_title.jpg" />
+
-
               
+
-
<h1 id="ProjectName">Aromatics Scouts<img id="LittleScout" src="https://static.igem.org/mediawiki/igem.org/8/8a/Peking2013_home_Telescope.png" /></h1>
+
-
                <h1 id="ProjectSubname">A Comprehensive Biosensor Toolkit for Profiling Aromatic Compounds in the Environment</h1>
+
-
+
-
<p id="PreLocation">
+
-
<B>★Presentation:</B> Room 34-101, Saturday 12:30 PM, Session 2
+
-
      &ensp;&ensp;&ensp;&ensp;<B>★Poster:</B> Sunday, #13 (Stata)
+
-
</p>
+
-
 
+
-
 
+
-
 
+
-
</div>
+
-
        <img id="MajorBodyBackground" src="https://static.igem.org/mediawiki/igem.org/9/97/Peking2013_Home_background.jpg" />
+
-
        <div id="AbstractBox">
+
-
            <div id="AbstractBackground"></div>
+
-
              <p id="AbstractContent">Monitoring aromatic compounds in the environment remains a substantial challenge today. Noting the power of biosensors for quick and convenient testing, Peking iGEM has developed a functionally comprehensive biosensor toolkit to profile aromatics in the environment.
+
-
<br/><br/>
+
-
Transcriptional regulators that each detect a specific class of aromatics were first bioinformatically determined; and then utilized to build a comprehensive set of biosensor circuits. Characterization on the detection profiles of individual biosensors and the orthogonality/crosstalk between them proved that these biosensors are very capable at profiling aromatics present in water.
+
-
<br/><br/>
+
-
Moreover, for the ease of practical applications, two types of genetic devices were also developed as plug-ins for biosensors: "Adaptors", a set of conceptually novel devices to convert undetectable compounds into detectable compounds, and "Band-pass Filter", a "concentration filter" that allows the detection of analyte concentration within a specific range.
+
-
<br/><br/>
+
-
We expect that these novel biosensors, together with the plug-in devices, will serve as intriguing synthetic biological tools for diverse practical applications.
+
-
</p>
+
-
        </div>
+
-
        <div id="AppendixBox1" class="SmallBoxes" >
+
-
              <h1 id="Appendix1Title"><i>Mining aromatics-sensing Biobricks <br/>from the genomic database</i></h1>
+
-
              <div id="Appendix1Cover" >
+
-
                    <img id="AppendixImg1" src="https://static.igem.org/mediawiki/igem.org/e/ec/Peking2013_homepage_appendix1.jpg" />
+
-
                    <h1 class="AppendixHeadLine">Biosensor Mining</h1>
+
-
                    <img id="Appendix1Icon" class="AppendixIcon" src="https://static.igem.org/mediawiki/igem.org/1/13/Peking2013_home_appendix1icon.png" />
+
-
                    <p>The core component of our biosensor toolkit is the transcriptional regulators that sense aromatics. For the comprehensiveness of aromatics-sensing, a data-mining process was conducted to mine transcriptional regulators for each typical class of aromatics from the database Uniprot. </p>
+
-
                    <a href="https://2013.igem.org/Team:Peking/Project/SensorMining">LEARN MORE</a>
+
-
              </div>
+
-
        </div>
+
-
        <div id="AppendixBox2" class="SmallBoxes">
+
-
              <h1 id="Appendix2Title"><i>High-performance, profile-<br/>specific biosensors</i> </h1>
+
-
              <div id="Appendix2Cover" >
+
-
                    <img id="AppendixImg2" src="https://static.igem.org/mediawiki/igem.org/1/17/Peking2013_home_appendix2.jpg" />
+
-
                    <h1 class="AppendixHeadLine">Biosensors</h1>
+
-
                    <img id="Appendix2Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/b/b2/Peking2013_home_appendix2icon.png" />
+
-
                    <p>A comprehensive set of biosensor circuits have been implemented using the aromatics-sensing transcriptional regulators. Each biosensor has a specific aromatics-sensing profile. Furthermore, the orthogonality of their sensing profiles was carefully assessed for practical applications.</p>
+
-
                    <a href="https://2013.igem.org/Team:Peking/Project/BioSensors">LEARN MORE</a>
+
-
              </div>
+
-
        </div>
+
-
        <div id="AppendixBox3" class="SmallBoxes">
+
-
              <h1 id="Appendix3Title"><i>Converting the undetectable into<br/>the detectable</i></h1>
+
-
              <div id="Appendix3Cover" >
+
-
                    <img id="AppendixImg3" src="https://static.igem.org/mediawiki/igem.org/1/1b/Peking2013_home_appendix3.jpg" />
+
-
                    <h1 class="AppendixHeadLine">Adaptors</h1>
+
-
                    <img id="Appendix3Icon"  class="AppendixIcon" src="https://static.igem.org/mediawiki/igem.org/c/cd/Peking2013_home_appendix3icon.png" />
+
-
                    <p> To expand the detection profiles of some biosensors, aromatics-metabolizing enzymes were taken from natural metabolic pathways, working as Adaptors to convert undetectable chemicals into detectable aromatics when coupled with biosensor circuits.</p>
+
-
                    <a href="https://2013.igem.org/Team:Peking/Project/Plugins">LEARN MORE</a>
+
-
              </div>
+
-
        </div>
+
-
        <div id="AppendixBox4" class="SmallBoxes">
+
-
              <h1 id="Appendix4Title"><i>Rapidly determining <br/> the analyte concentration</i></h1>
+
-
              <div id="Appendix4Cover" >
+
-
                    <img id="AppendixImg4" src="https://static.igem.org/mediawiki/igem.org/e/e6/Peking2013_home_appendix4.jpg" />
+
-
                    <h1 class="AppendixHeadLine">Band-pass Filter</h1>
+
-
                    <img id="Appendix4Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/4/42/Peking2013_home_appendix4icon.png" />
+
-
                    <p>For the ease of practical analysis, a genetic device called "Band-pass Filter" has been constructed to allow the detection of analyte concentration within a specific range. Biosensors equipped with the Band-pass Filter can robustly quantify the aromatics in environmental samples. </p>
+
-
                    <a href="https://2013.igem.org/Team:Peking/Project/BandpassFilter">LEARN MORE</a>
+
-
              </div>
+
-
        </div>
+
-
        <div id="AppendixBox5" class="SmallBoxes">
+
-
              <h1 id="Appendix5Title"><i>Communications, Questionnaire survey,  <br/>Factory Visit</i> and interview</h1>
+
-
              <div id="Appendix5Cover" >
+
-
                    <img id="AppendixImg5" src="https://static.igem.org/mediawiki/igem.org/d/da/Peking2013_home_appendix5.jpg" />
+
-
                    <h1 class="AppendixHeadLine">Human Practice</h1>
+
-
                    <img id="Appendix5Icon" class="AppendixIcon"  src="https://static.igem.org/mediawiki/igem.org/8/85/Peking2013_home_appendix5icon.png" />
+
-
                    <p>To obtain the information about public awareness and the situation of aromatics pollution, a survey including factory visit and questionnaires has been conducted. We also guided an iGEM HS team and held "Model iGEM" as a competition without competitiveness.</p>
+
-
                    <a href="https://2013.igem.org/Team:Peking/HumanPractice">LEARN MORE</a>
+
-
              </div>
+
-
        </div>       
+
-
</div><!--end of major body-->
+
    function show_result()
-
<img id="AcknowledgementBox" src="https://static.igem.org/mediawiki/igem.org/c/c4/Peking_Sponsors.jpg">
+
    {
-
<!--end of acknowledgement box-->
+
        var result = "http://127.0.0.1:8000/survey/1/"+i;
-
 
+
        var link = '<a href="'+result+'">再次点击显示结果</a>';
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+
        document.getElementById("demo").innerHTML = link;
-
<script type="text/javascript">
+
    }
-
$(window).scroll(function(){
+
   
-
  if(0==document.getElementById("content").offsetLeft){ $('#navigationblock').css('left',-$(window).scrollLeft());}
+
-
  else{$('#navigationblock').css('left',document.getElementById("content").offsetLeft); }
+
-
});
+
-
 
+
-
$(window).resize(function(){
+
-
  if(0==document.getElementById("content").offsetLeft){ $('#navigationblock').css('left',-$(window).scrollLeft());}
+
-
  else{$('#navigationblock').css('left',document.getElementById("content").offsetLeft); }
+
-
});
+
-
 
+
-
document.getElementById("AppendixBox1").onmouseover=function(){MoveInSlide("#Appendix1Cover")};
+
-
document.getElementById("AppendixBox1").onmouseout=function(){MoveOutSlide("#Appendix1Cover")};
+
-
document.getElementById("AppendixBox2").onmouseover=function(){MoveInSlide("#Appendix2Cover")};
+
-
document.getElementById("AppendixBox2").onmouseout=function(){MoveOutSlide("#Appendix2Cover")};
+
-
document.getElementById("AppendixBox3").onmouseover=function(){MoveInSlide("#Appendix3Cover")};
+
-
document.getElementById("AppendixBox3").onmouseout=function(){MoveOutSlide("#Appendix3Cover")};
+
-
document.getElementById("AppendixBox4").onmouseover=function(){MoveInSlide("#Appendix4Cover")};
+
-
document.getElementById("AppendixBox4").onmouseout=function(){MoveOutSlide("#Appendix4Cover")};
+
-
document.getElementById("AppendixBox5").onmouseover=function(){MoveInSlide("#Appendix5Cover")};
+
-
document.getElementById("AppendixBox5").onmouseout=function(){MoveOutSlide("#Appendix5Cover")};
+
-
 
+
-
function MoveInSlide(SlideId)
+
-
{
+
-
$(SlideId).stop().animate({top:"0px"},"fast");
+
-
         
+
-
};
+
-
 
+
-
 
+
-
 
+
-
function MoveOutSlide(SlideId)
+
-
{
+
-
$(SlideId).stop().animate({top:"170px"},"fast");
+
-
       
+
-
};
+
-
 
+
-
 
+
</script>
</script>
 +
</head>
 +
<body id="page1">
 +
<div class="tail-right"></div>
 +
<div class="tail-right-top"></div>
 +
<div class="tail-top">
 +
<div class="tail-bottom">
 +
<div class="tail-bg">
 +
<div class="top-bg">
 +
<div class="tail-right-bot"></div>
 +
<div class="bot-bg">
 +
<div id="main">
 +
<!-- header -->
 +
<div id="header">
 +
<h1><a>问卷调查</a></h1>
 +
<ul class="top-links">
 +
<li><a><img alt="home" src="images/icon-home.gif" /></a></li>
 +
<li><a><img alt="mail" src="images/icon-mail.gif" /></a></li>
 +
<li><a><img alt="map" src="images/icon-map.gif"/></a></li>
 +
</ul>
 +
</div>
 +
<div class="extra-img"><img alt="extra-img" src="images/extra-img.png" class="png"/></div>
 +
<div class="wrapper">
 +
<!-- nav -->
 +
<div id="nav">
 +
<ul>
 +
<li><a>主页</a></li>
 +
<li><a href="result.html">结果</a></li>
 +
<li><a href="#">关于我们</a></li>
 +
</ul>
 +
</div>
 +
<!-- content -->
 +
<div id="content">
 +
<div class="section">
 +
<!-- box begin -->
 +
<div class="box">
 +
<div class="left-top-corner png"><div class="right-top-corner png"><div class="border-top png"></div></div></div>
 +
<div class="border-left png">
 +
<div class="border-right png">
 +
<div class="inside png">
 +
<div id="buttonContainer">
 +
<h2>{{tittle}}</h2>
 +
<hr/>
 +
<big>{{message}}</big>
 +
<hr/>
 +
<strong>{{tip}}</strong>
 +
    <p>{{content1}}</p>
 +
    <a class="button medium blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content2}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content3}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content4}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content5}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content6}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content7}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content8}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content9}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content10}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content11}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content12}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content13}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content14}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content15}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <p>{{content16}}</p>
 +
    <a class="button small blue">No</a><a class="button small blue" onclick="gain()">Yes</a>
 +
    <p>{{content17}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
<p>{{content18}}</p>
 +
    <a class="button small blue" onClick="gain()">No</a><a class="button small blue" >Yes</a>
 +
    <button onClick="show_result()" id="demo">点击提交</button>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="left-bot-corner png"><div class="right-bot-corner png"><div class="border-bot png"></div></div></div>
 +
</div>
 +
<!-- box end -->
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
<!-- footer -->
 +
<div id="footer">
 +
<div class="indent">
 +
<div class="fleft">Copyrights - </div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</body>
</html>
</html>

Revision as of 04:08, 14 May 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IGEM

extra-img

{{tittle}}

{{message}}
{{tip}}

{{content1}}

NoYes

{{content2}}

NoYes

{{content3}}

NoYes

{{content4}}

NoYes

{{content5}}

NoYes

{{content6}}

NoYes

{{content7}}

NoYes

{{content8}}

NoYes

{{content9}}

NoYes

{{content10}}

NoYes

{{content11}}

NoYes

{{content12}}

NoYes

{{content13}}

NoYes

{{content14}}

NoYes

{{content15}}

NoYes

{{content16}}

NoYes

{{content17}}

NoYes

{{content18}}

NoYes

Retrieved from "http://2014.igem.org/Team:UESTC-China"