Team:LZU-China/background

From 2014.igem.org

(Difference between revisions)
(Created page with "- →This page is background: ")
Line 1: Line 1:
-
/*This page is background*/
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns=" http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 +
<title>LZU-China 2014</title>
 +
<style type="text/css">
 +
 
 +
body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;font-family:微软雅黑;}
 +
img{border:0px;}
 +
.picList{width:100%;float:left;}
 +
.picList .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList .col img{width:100%;}
 +
.picList .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList2{width:100%;float:left;}
 +
.picList2 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList2 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList2 .col img{width:100%;}
 +
.picList2 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList3{width:100%;float:left;}
 +
.picList3 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList3 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList3 .col img{width:100%;}
 +
.picList3 .col a{
 +
display:block;
 +
width:580;
 +
height:377px;
 +
top:357px;
 +
background:rgba(0,0,0,0.7);
 +
color:white;
 +
font-style:normal;
 +
line-height:25px;
 +
padding:10px;
 +
opacity:0.8;
 +
text-decoration:none;
 +
}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList4{width:100%;float:left;}
 +
.picList4 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList4 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList4 .col img{width:100%;}
 +
.picList4 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList5{width:100%;float:left;}
 +
.picList5 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList5 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList5 .col img{width:100%;}
 +
.picList5 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList6{width:100%;float:left;}
 +
.picList6 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList6 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList6 .col img{width:100%;}
 +
.picList6 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList7{width:100%;float:left;}
 +
.picList7 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList7 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList7 .col img{width:100%;}
 +
.picList7 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
.picList8{width:100%;float:left;}
 +
.picList8 .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
 +
.picList8 .col img,.col a{position:absolute;top:0px;left:0px;}
 +
.picList8 .col img{width:100%;}
 +
.picList8 .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 
 +
*{margin:0px;padding:0px;}
 +
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
 +
b#p1, b#p2, b#p3, b#p4, b#p5 {display:none;}
 +
#accordian {padding:0; margin:20px auto; list-style:none; width:730px; height:300px; overflow:hidden; position:relative; border:1px solid #682;}
 +
#accordian li {width:50px; height:300px; float:left;
 +
-moz-transition: 0.7s;
 +
-ms-transition: 0.7s;
 +
-o-transition: 0.7s;
 +
-webkit-transition: 0.7s;
 +
transition: 0.7s;
 +
}
 +
#accordian div {width:530px; height:300px; position:relative;}
 +
#accordian div span {display:block; background:rgba(0,0,0,.3); width:460px; height:30px; position:absolute; bottom:300px; right:0; padding:10px; color:#fff; font:normal 13px/30px 'georgia', serif; border-top:1px solid #000;
 +
}
 +
#accordian div span a {color:#fff;}
 +
#accordian li div > a {display:block; width:49px; height:300px; float:left; position:relative; color:#fff; text-decoration:none;box-shadow:-10px 0 10px -10px rgba(0,0,0,0.6);}
 +
#accordian li div > a b {display:block; width:280px; padding-left:20px; height:50px; position:absolute; left:50px; bottom:0; font:bold 24px/50px 'georgia', serif; text-shadow:0 0 2px rgba(0, 0, 0, 0.6);
 +
transform: rotate(-90deg);
 +
transform-origin:bottom left;
 +
-ms-transform: rotate(-90deg);
 +
-ms-transform-origin:bottom left;
 +
-webkit-transform: rotate(-90deg);
 +
-webkit-transform-origin:bottom left;
 +
-moz-transform: rotate(-90deg);
 +
-moz-transform-origin:bottom left;
 +
-o-transform: rotate(-90deg);
 +
-o-transform-origin:bottom left;
 +
}
 +
#accordian li div > a b {*left:0;}
 +
#accordian li img {display:block; float:left;}
 +
#accordian li.p1 {width:530px;}
 +
#accordian li.p1 div span {bottom:0;}
 +
#accordian li a.a1 {background:#b33866; border-left:1px solid #682;}
 +
#accordian li a.a2 {background:#8d4984; border-left:1px solid #9b5;}
 +
#accordian li a.a3 {background:#6559a1; border-left:1px solid #ce5;}
 +
#accordian li a.a4 {background:#3c6cc0; border-left:1px solid #ef7;}
 +
#accordian li a.a5 {background:#187adb; border-left:1px solid #28b;}
 +
#p1:target ~ #accordian li {width:50px;}
 +
#p1:target ~ #accordian li div span {bottom:300px;}
 +
#p1:target ~ #accordian li.p1 {width:530px;}
 +
#p1:target ~ #accordian li.p1 div span {bottom:0;}
 +
#p2:target ~ #accordian li {width:50px;}
 +
#p2:target ~ #accordian li div span {bottom:300px;}
 +
#p2:target ~ #accordian li.p2 {width:530px;}
 +
#p2:target ~ #accordian li.p2 div span {bottom:0;}
 +
#p3:target ~ #accordian li {width:50px;}
 +
#p3:target ~ #accordian li div span {bottom:300px;}
 +
#p3:target ~ #accordian li.p3 {width:530px;}
 +
#p3:target ~ #accordian li.p3 div span {bottom:0;}
 +
#p4:target ~ #accordian li {width:50px;}
 +
#p4:target ~ #accordian li div span {bottom:300px;}
 +
#p4:target ~ #accordian li.p4 {width:530px;}
 +
#p4:target ~ #accordian li.p4 div span {bottom:0;}
 +
#p5:target ~ #accordian li {width:50px;}
 +
#p5:target ~ #accordian li div span {bottom:300px;}
 +
#p5:target ~ #accordian li.p5 {width:530px;}
 +
#p5:target ~ #accordian li.p5 div span {bottom:0;}
 +
 
 +
 
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
 +
 
 +
.firstHeading {
 +
width: 975px;
 +
margin: 0px auto;
 +
padding-top: 100px;
 +
margin-bottom: 20px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
 +
 
 +
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
 +
 
 +
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
background-color: #383838;
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
 +
}
 +
 
 +
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
 +
background-color: #383838;
 +
height: 14px;
 +
display: block;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}
 +
 
 +
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
 +
color: #727272;
 +
text-decoration: none;
 +
background-color: transparent;
 +
}
 +
 
 +
body {
 +
background-color: #fff;
 +
}
 +
 
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 
 +
#contentcontainer { /*-- creates container for all content on page --*/
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: normal;
 +
font-size: 14px;
 +
color: #414141;
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #transparent;
 +
margin-top: 0px;
 +
}
 +
 
 +
.sidemenu, .sidemenu li {
 +
list-style-type: none;
 +
list-style-image: none;
 +
font-family: verdana;
 +
text-decoration: none;
 +
color:#000;
 +
font-size: 14px;
 +
}
 +
 
 +
.sidemenu li {display: block;}
 +
 
 +
.sidemenu a {
 +
text-decoration:none;
 +
color: #000;
 +
display: block;
 +
width: 180px;
 +
height: 100%;
 +
padding: 3px 5px;
 +
transition: .25s ease-in-out;
 +
-moz-transition: .25s ease-in-out;
 +
-webkit-transition: .25s ease-in-out;
 +
}
 +
 
 +
.sidemenu a.greyout { color: #909090; }
 +
 
 +
.sidemenu a:hover {
 +
color:#666;
 +
background-color: #d9f5aa;
 +
}
 +
 
 +
.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;}
 +
.sub-sidemenu a {color: #666;}
 +
 
 +
div.underconst
 +
{
 +
padding:10px;
 +
border-radius:5px;
 +
background-color:pink;
 +
text-align:center;
 +
}
 +
 
 +
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
 +
 
 +
.contentpara {margin-bottom: 30px;}
 +
 
 +
span.email{font-family: monospace; font-weight: normal;}
 +
 
 +
fieldset {border: 1px solid #337f53;}
 +
 
 +
.greyout {color: #A0A0A0;}
 +
.highlightme {background-color: #FFFF00;}
 +
 
 +
#alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
 +
#annContainer {margin-left: 8px;}
 +
#newsContainer {border: 1px solid #ccc;}
 +
 
 +
.newsTitle {
 +
display: block;
 +
color: #414141;
 +
font-size: 25px; 
 +
        font-family: Georgia, Times, "Times New Roman", serif;
 +
padding: 10px 15px 5px 10px;
 +
border-bottom: 1px solid #ccc;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
.newsItem {
 +
border-bottom: 1px solid #ccc;
 +
display: block;
 +
padding: 5px 15px 0px 10px;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
.newsItem h3 {
 +
width: auto;
 +
display: inline;
 +
font-size: 14px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
 
 +
.newsItem img {
 +
float: right;
 +
clear: right;
 +
width: 80px;
 +
padding-left: 15px;
 +
display: inline-block;
 +
}
 +
 
 +
.newsItem .newsDate {
 +
font-style: italic;
 +
font-size: 14px;
 +
display: inline-block;
 +
color: #999;
 +
float: right;
 +
padding: 0px 0px 10px 15px;
 +
}
 +
 
 +
.newsItem p, .newsItem ul, .newsItem li {
 +
padding: 0px;
 +
margin-left: 20px;
 +
font-size: 12px;
 +
line-height: 1.2;
 +
}
 +
 
 +
.newsItem p {margin-top: 10px;}
 +
 
 +
.annItem {
 +
border: 2px solid #49b677;
 +
display: block;
 +
padding: 0px 15px 10px 10px;
 +
margin-bottom: 18px;
 +
position: relative;
 +
height: 160px;
 +
vertical-align: middle;
 +
}
 +
 
 +
.annItem .annCentered {
 +
display: table-cell;
 +
vertical-align: middle;
 +
height: 160px;
 +
}
 +
 
 +
.annCentered h3 {
 +
padding: 0px;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
text-align: center;
 +
}
 +
 
 +
.annItem ul, .annItem li {padding: 0px; margin: 0px;}
 +
.annItem li {list-style: none; margin: 5px}
 +
 
 +
@charset "utf-8";
 +
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{
 +
margin:0;
 +
padding:0;
 +
font-size: 14px;
 +
text-align: left;
 +
}
 +
html{background-color:#e9ecec}
 +
table{table-layout:fixed;border-collapse:collapse}
 +
section,article,aside,header,footer,nav,dialog,figure{display:block}
 +
.clearfix:after{content:"\20";display:block;height:0;line-height:0;font-size:0;clear:both}
 +
body,button,input,select,textarea,td,th{color:#333;font:12px/1.5 tahoma,arial,\5b8b\4f53}
 +
h1,h2,h3,h4,h5,h6{font-size:100%}
 +
address,cite,dfn,em,var{font-style:normal}
 +
code,kbd,pre,samp{font-family:courier new,courier,monospace}
 +
small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#06C}
 +
a:hover{text-decoration:underline;color:#06C}
 +
sup{vertical-align:text-top}
 +
sub{vertical-align:text-bottom}
 +
legend{color:#000}
 +
fieldset,img{border:0 none}
 +
button,input,select,textarea{font-size:100%}
 +
table{
 +
border-collapse:collapse;
 +
border-spacing:0;
 +
text-align: center;
 +
}
 +
input:focus{outline:none}
 +
.hd-main{height:60px;background:#fff;z-index:15;border-bottom:#b3b3b3 1px solid;box-shadow:0 0 5px #333}
 +
.f-icon{background-image:url('http://www.codefans.net/jscss/demoimg/201403//frame-icon.png');background-repeat:no-repeat}
 +
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
 +
.hd-main .has-pulldown{cursor:pointer;position:relative;*z-index:10000}
 +
.hd-main .pulldown{position:absolute;cursor:default;display:none;top:30px;left:0}
 +
.hd-main .pulldown .arrow{*margin-bottom:-1px;_margin-bottom:0;height:0;width:0;font-size:0;line-height:0;border-width:7px;border-style:solid;border-color:transparent transparent rgba(255, 255, 255,0.8) transparent;_filter:chroma(color=tomato);_border-color:tomato tomato rgba(255, 255, 255,0.8) tomato;position:relative;display:block;left:20px;z-index:7}
 +
.hd-main .pulldown .content{background:rgba(255, 255, 255,0.8);color:#333;text-align:left;border-radius:3px;border:rgb(175,175,175) 1px solid;border-width:0 1px 1px 1px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:6}
 +
.hd-main .pulldown-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;filter:alpha(opacity=0)}
 +
.hd-main .logo{background-image:url('https://static.igem.org/mediawiki/2014/7/72/2014logomin.png');background-repeat:no-repeat;display:block;height:36px;width:175px;float:left;margin-left:10px;background-position:0 0;margin-top:5px;display:inline}
 +
.hd-main .navs{padding:0 0 3px 25px;height:45px;float:left}
 +
.hd-main .navs a,.hd-main .info a,.hd-main .navs a:visited,.hd-main .info a:visited,.hd-main .navs a:active,.hd-main .info a:active{color:#d8d8d8}
 +
.hd-main .navs a:hover,.hd-main .navs a:active{text-decoration:none;background-color:#0f0f0f}
 +
.hd-main .navs .def-nav,.hd-main .navs .pulldown-nav,.hd-main .navs .separate{display:block;float:left;height:48px;font:18px/30px "Microsoft YaHei","Microsoft JhengHei";color:#d8d8d8;text-align:center;width:125px;line-height:48px}
 +
.hd-main .navs .def-nav .app-url{left:185px;width:425px;top:48px}
 +
.hd-main .navs .def-nav .pulldown-canvas-url{width:575px;height:109px}
 +
.hd-main .navs .def-nav .app-url .arrow{left:140px}
 +
.hd-main .navs .app-url .content{padding:17px 0 0 22px;height:91px}
 +
.hd-main .navs .app-url .content a,.hd-main .navs .app-url .content a:hover{color:#333}
 +
.hd-main .navs .app-url .li{cursor:pointer;padding-top:8px;width:66px;height:66px;border-radius:3px;display:block;float:left;text-align:center}
 +
.hd-main .navs .app-url .li:hover{background-color:#e0e1e5}
 +
.hd-main .navs .app-url .li .icon{margin:0 auto;width:50px;height:50px;display:block;background:url('https://static.igem.org/mediawiki/2014/9/94/Icons50X50nb.png') no-repeat}
 +
.hd-main .navs .app-url .li:hover .icon{background-image:url('https://static.igem.org/mediawiki/2014/9/94/Icons50X50nb.png')}
 +
.hd-main .navs .app-url .tongxunlu .icon{background-position:-50px 0}
 +
.hd-main .navs .app-url .xiangce .icon{background-position:-100px 0}
 +
.hd-main .navs .app-url .note .icon{background-position:-150px 0}
 +
.hd-main .navs .app-url .duanxin .icon{background-position:-200px 0}
 +
.hd-main .navs .app-url .zhaohui .icon{background-position:-250px 0}
 +
.hd-main .navs .app-url .youxi .icon{background-position:-300px 0}
 +
.hd-main .navs .app-url .li .text{height:30px;display:block;font:10px/30px "Microsoft YaHei","Microsoft JhengHei"}
 +
.hd-main .navs .separate{margin:0;height:48px;width:2px;background:#2A2B2D}
 +
.hd-main .navs .pulldown-nav{position:relative}
 +
.hd-main .navs .pulldown-nav em{
 +
position:absolute;
 +
display:block;
 +
left:99px;
 +
top:18px;
 +
height:12px;
 +
width:12px;
 +
font-size:0;
 +
background-position:-89px -45px
 +
}
 +
.hd-main .navs .pulldown-nav:hover .f-icon,.hd-main .navs .pulldown-nav:active .f-icon{position:absolute;display:block;right:11px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -55px}
 +
.hd-main .navs .current,.hd-main .navs .current .pulldown-nav{font-weight:bold;color:#FFF;display:inline-block;width:125px;height:49px;background-color:#0f0f0f;text-align:center;line-height:48px}
 +
.hd-main .navs .current:hover{color:#ECECEC}
 +
.hd-main .navs .current .hover{background-color:#dedede;color:#333;}
 +
.hd-main .info,.hd-main .info ul{height:36px;float:right;text-align:right;margin-top:3px;white-space:nowrap}
 +
.hd-main .info a{color:#d8d8d8}
 +
.hd-main .info a:hover{color:#FFF;text-decoration:underline}
 +
.hd-main .info .info-i{padding:0 10px;margin:10px 0;display:inline-block;*display:inline;*zoom:1;height:16px;border-right:#393939 1px solid;color:#d8d8d8;font:12px/16px "SimSun"}
 +
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
 +
.hd-main .info .has-pulldown{padding-right:28px}
 +
.hd-main .info .has-pulldown .pull-arrow{position:absolute;display:block;right:10px;top:1px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
 +
.hd-main .info .no-separate{border:none}
 +
.hd-main .info .user-name{position:relative;padding-left:24px}
 +
.hd-main .info .user-name .name{display:inline-block;display:inline\0;white-space:nowrap;max-width:75px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
 +
.hd-main .info .user-name .identity{position:absolute;top:0;left:0;height:16px;width:16px;background-position:-89px -88px}
 +
.hd-main .info .user-name .is-vip{background-position:-89px -68px}
 +
.hd-main .info .user-info,.hd-main .info .more-info{top:9px;left:auto;right:-24px;width:170px} /*User栏目宽度*/
 +
.hd-main .info .notice-nu{display:inline-block;padding-left:4px;background-position:-86px -109px;height:14px;-webkit-text-size-adjust:none;font-size:10px;font-style:normal}
 +
.hd-main .info .notice-nu .f-icon{display:inline-block;padding-right:4px;background-position:right -109px;color:#FFF}  /*此处原为#FFF*/
 +
.hd-main .info .user-info .arrow{left:70px;*left:-32px}
 +
.hd-main .info .user-info .content,.hd-main .info .more-info .content{padding:10px 0;height:180px}
 +
.hd-main .info .more{padding:0;display:inline;line-height:inherit;background:none}
 +
.hd-main .info .more-info .content{height:150px}
 +
.hd-main .info .user-info .content a,.hd-main .info .more-info .content a{display:block;padding-left:33px;height:30px;line-height:30px;color:#888}
 +
.hd-main .info .user-info .content a:hover,.hd-main .info .more-info .content a:hover{color:#333;text-decoration:none;background:#e0e1e5}
 +
.hd-main .info .user-info .li,.hd-main .info .more-info .li{display:block;padding:2px 0;height:30px}
 +
.hd-main .info .user-info .separate-li,.hd-main .info .more-info .separate-li{display:block;margin:3px 11px;border-top:#EBEBEC 1px solid;border-bottom:#FFF 1px solid}
 +
.hd-main .info .more-info{right:0}
 +
.hd-main .info .more-info .arrow{left:94px;*left:-8px}
 +
#apDiv1 {
 +
position:absolute;
 +
left:3px;
 +
top:4px;
 +
width:100%;
 +
height:900px;
 +
z-index:0;
 +
background-color: #66CCFF;
 +
}
 +
/*<![CDATA[*/
 +
body {
 +
margin:0;
 +
padding:0 10px 0 10px;
 +
border:0;
 +
height:100%;
 +
overflow:auto;
 +
background-color: #FFF;
 +
}
 +
#menu {right:0; top:0; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:rgba(0,83,163,0);}
 +
* html #menu {position:absolute; right:16px; top:0;}/*only for ie*/
 +
html {overflow:auto !important; overflow:hidden;}
 +
 
 +
#apDiv2 {
 +
position:absolute;
 +
left:0;
 +
top:50px;
 +
width:100%;
 +
height:265px;
 +
z-index:0;
 +
background-color: #187BDB;
 +
}
 +
#apDiv3 {
 +
position:absolute;
 +
left:0px;
 +
top:328px;
 +
width:100%;
 +
height:704px;
 +
z-index:0;
 +
}
 +
#apDiv3 table tr td p {
 +
font-size: 16px;
 +
text-align: left;
 +
}
 +
#apDiv4 {
 +
position:absolute;
 +
left:0;
 +
top:9704px;
 +
width:100%;
 +
height:56px;
 +
z-index:0;
 +
}
 +
#apDiv5 {
 +
position:absolute;
 +
left:0;
 +
top:3488px;
 +
width:100%;
 +
height:25;
 +
z-index:1;
 +
background-color: #5FC1C5;
 +
}
 +
#apDiv3 div {
 +
font-size: 46px;
 +
text-align: center;
 +
}
 +
#apDiv4 table tr td div {
 +
font-size: 45px;
 +
color: #000;
 +
text-align: left;
 +
}
 +
#apDiv4 table tr td table tr td {
 +
font-size: 16px;
 +
line-height: 30px;
 +
}
 +
body,td,th {
 +
color: #000;
 +
}
 +
#apDiv6 {
 +
position:absolute;
 +
left:575px;
 +
top:3377px;
 +
width:220px;
 +
height:221px;
 +
z-index:2;
 +
}
 +
#apDiv2 table tr td p {
 +
font-size: 45px;
 +
text-align: center;
 +
color: #FFF;
 +
font-weight: bold;
 +
}
 +
#apDiv7 {
 +
position:absolute;
 +
left:50%;
 +
top:226px;
 +
width:257px;
 +
height:151px;
 +
z-index:auto;
 +
}
 +
#apDiv3 div {
 +
font-size: 14px;
 +
}
 +
#apDiv8 {
 +
position:absolute;
 +
left:0;
 +
top:680px;
 +
width:100%;
 +
height:470px;
 +
z-index:0;
 +
}
 +
#apDiv4 table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 32px;
 +
}
 +
#apDiv8 table tr td table tr td {
 +
font-size: 45px;
 +
}
 +
#apDiv8 table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 31px;
 +
}
 +
#apDiv9 {
 +
position:absolute;
 +
left:0px;
 +
top:6251px;
 +
width:100%;
 +
height:55px;
 +
z-index:4;
 +
}
 +
#apDiv9 table tr td table tr td table tr td {
 +
font-size: 35px;
 +
}
 +
#apDiv9 table tr td table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 31px;
 +
}
 +
#apDiv4 table tr td table tr td div div {
 +
font-size: 15px;
 +
}
 +
#apDiv4 table tr td table tr td table tr td {
 +
font-size: 15px;
 +
}
 +
#apDiv4 table tr td table tr td table tr td {
 +
font-size: 15px;
 +
}
 +
#apDiv8 table tr td table tr td table tr td {
 +
font-size: 18px;
 +
}
 +
#apDiv10 {
 +
position:absolute;
 +
left:0;
 +
top:6956px;
 +
width:1004px;
 +
height:539px;
 +
z-index:5;
 +
}
 +
#apDiv9 table tr td table tr td table tr td table tr td {
 +
font-size: 18px;
 +
}
 +
#apDiv11 {
 +
position:absolute;
 +
left:0;
 +
top:7440px;
 +
width:100%;
 +
height:140px;
 +
z-index:5;
 +
}
 +
#apDiv11 table tr td table tr td {
 +
font-size: 35px;
 +
}
 +
#apDiv11 table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 32px;
 +
}
 +
#apDiv11 table tr td table tr td table tr td {
 +
font-size: 18px;
 +
}
 +
#apDiv3 table tr td {
 +
font-size: 18px;
 +
line-height: 32px;
 +
}
 +
</style>
 +
</head>
 +
 
 +
<body id="" class="">
 +
<div id="apDiv2">
 +
  <table width="100%" border="0" >
 +
    <tr>
 +
      <td width="1201" height="265" rowspan="2"><p><img src="https://static.igem.org/mediawiki/2014/d/de/6members.top.jpg" width="1366" height="270" /></p></td>
 +
      <td width="100%" height="199" bgcolor="#187ADB">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td height="70">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv3">
 +
  <table width="100%" border="0">
 +
    <tr>
 +
      <td width="22%">&nbsp;</td>
 +
      <td width="56%"><p>&nbsp;</p>
 +
        <p>&nbsp;</p>
 +
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;China, as the world largest developing country, suffers serious pollution in 21 century. Lanzhou, a capital city in northwest of China, bears serious contaminations. For example, in April 2014, this city has started panic-buying bottled water after city authorities confirmed that lethal chemical compound benzene contaminated the city's drinking water system. We have conducted a survey about how the population's concern about the water contaminations. It shows that compared with UK where exactly 70.59% of the residents announce that did not suffer from any kinds of water pollution, 69.23% of the Chinese respondents admitted that their hometown has effected by water pollution. In particular, 15.38% of them said that they had suffered serious pollution. Meanwhile, over 78.46% of the residents in China suggest it should be meaningful to develop microbial fuel cells for power generation. So those are why we want to start the topic about sewage treatment using membrane and power generation using microorganisms.        </p>
 +
        <p>&nbsp;</p>
 +
        <div><img src="bga1.png" width="586" height="451" /></div>
 +
        <div><img src="bga2.png" width="600" height="400" /></div>
 +
<div><img src="bga3.png" width="754" height="312" /></div>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Microorganisms can degrade pollutants and produce electricity, so we aimed to produce microbial fuel cells (MFCs) to deal with the pollutant and generate electricity. This is really a new kind of technology for human because the world best MFCs can only run a tiny toy engine, so this should be have a bright future when it comes into practice.<br />
 +
        At first, we construct a normal MFC, using Shewanella oneidensi to generate electricity and reduce sewage with heavy metal ions, during several experiments we found that MFCs running in traditional way have many disadvantages. These two we will mention as following are extremely serious.<br />
 +
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;One is that pollutant, for example, p-Nitrophenol(PNP), exists in common sewage, always impede the electricity generation of MFC. </p>
 +
      <div><img src="bga4.png" width="579" height="255" /></div>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Another drawback is that all kinds of traditional  MFCs are hard to show the contaminants concentrations. In the past, some  scientist and engineers had to use costly method for example High Performance  Liquid Chromatography (HPLC) measure the substrate concentration. This is also a  major drawback for MFCs applications.</p>
 +
<p>&nbsp;</p>
 +
<div><img src="bga5.png" width="325" height="274" /></div>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;But how can we deal with these two kinds of  problems? We noticed that if we could modify the gene of bacteria used in MFCs  to fight against the negative effect of pollutant and invented a series of  hardware and software to monitor the substrate concentration of MFCs, these two  kinds of problems would be overcame successfully. So we registered iGEM 2014 to  develop a novel MFCs system that can measure substrates concentrations using genetic  engineered bacteria. This is a new concept not only  simply for PNP problem, but also it is a standard model for all kinds of  pollutant treatment and real-time substrate concentration monitoring.</p>
 +
<p><div><img src="bga6.png" width="500" height="115" /></div>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p><p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p>&nbsp;</p>
 +
<p><br />
 +
</p></td>
 +
      <td width="22%">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
  <p>&nbsp;</p>
 +
</div>
 +
<p>&nbsp;</p>
 +
  <table width="100%" border="0" align="center">
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv5">
 +
  <table width="1365" border="0"">
 +
    <tr>
 +
      <td background="https://static.igem.org/mediawiki/2014/a/a6/Huils.jpg" width="1365" height="463"><img src="https://static.igem.org/mediawiki/2014/0/07/Dblbluebar.jpg" width="1365" height="463" /></td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv6"><img src="https://static.igem.org/mediawiki/2014/6/6e/Lzulogo.png" width="220" height="221" /></div>
 +
<div >
 +
  <div style=" height:890px;"> </div>
 +
<div id="menu">
 +
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$(".def-nav,.info-i").hover(function(){
 +
$(this).find(".pulldown-nav").addClass("hover");
 +
$(this).find(".pulldown").show();
 +
},function(){
 +
$(this).find(".pulldown").hide();
 +
$(this).find(".pulldown-nav").removeClass("hover");
 +
});
 +
});
 +
</script>
 +
<div class="hd-main clearfix" id="header">
 +
<a class="logo" href=""></a>
 +
<div class="navs">
 +
<a class="def-nav" href="">Home</a>
 +
<span class="separate"></span>
 +
<div class="def-nav current has-pulldown-special">
 +
<a class="pulldown-nav" href=""><em class="f-icon"></em>Project</a>
 +
<div class="pulldown app-url">
 +
<div class="content">
 +
<a class="li disk" href="">
 +
<span class="icon"></span>
 +
<span class="text">Background</span>
 +
</a>
 +
<a class="li tongxunlu" href="">
 +
<span class="icon"></span>
 +
<span class="text">Wet Lab</span>
 +
</a>
 +
<a class="li xiangce" href="">
 +
<span class="icon"></span>
 +
<span class="text">Dry Lab</span>
 +
</a>
 +
<a class="li note" href="">
 +
<span class="icon"></span>
 +
<span class="text">Parts</span>
 +
</a>
 +
                    <a class="li duanxin" href="">
 +
<span class="icon"></span>
 +
<span class="text">Interlab</span>
 +
</a>
 +
<a class="li zhaohui" href="">
 +
<span class="icon"></span>
 +
<span class="text">Future Work</span>
 +
</a>
 +
</div>
 +
  </div>
 +
</div>
 +
    <span class="separate"></span>
 +
<a class="def-nav" href="">Note Book</a>
 +
        <span class="separate"></span>
 +
<a class="def-nav" href="">Safety</a>
 +
        <span class="separate"></span>
 +
<a class="def-nav" href="">H. Practice</a>
 +
</div>
 +
<div class="info">
 +
<ul>
 +
<li class="info-i user-name has-pulldown">
 +
<em class="f-icon pull-arrow"></em>
 +
<a class="f-icon identity" href="" title="Our team"></a>
 +
<span class="name top-username">Our Team</span>
 +
<div class="pulldown user-info">
 +
<em class="arrow"></em>
 +
<div class="content">
 +
<span class="li"><a href="">Team Members</a></span>
 +
<span class="li"><a href="">Advisors</a></span>
 +
<span class="li"><a href="">Instructors</a></span>
 +
                        <span class="separate-li no-height"></span>
 +
<span class="li"><a href="">Attribution</a></span>
 +
                <span class="li"><a href="">Acknowledgement</a></span>
 +
<span class="separate-li no-height"></span>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="info-i no-separate default-text has-pulldown">
 +
<em class="f-icon pull-arrow"></em>
 +
<span class="more" hideFocus="hideFocus">More</span>
 +
<div class="pulldown more-info">
 +
<em class="arrow"></em>
 +
<div class="content">
 +
<span class="separate-li no-height"></span>
 +
<span class="li"><a href="">Team Profile</a></span>
 +
<span class="li"><a href="">Lanzhou University</a></span>
 +
<span class="li"><a href="">LZU-CHINA 2013</a></span>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</div>
 +
</div>
 +
</body>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<script type="text/javascript">
 +
function MM_showHideLayers() { //v9.0
 +
  var i,p,v,obj,args=MM_showHideLayers.arguments;
 +
  for (i=0; i<(args.length-2); i+=3)
 +
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
 +
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 +
    obj.visibility=v; }
 +
}
 +
</script>

Revision as of 20:51, 16 October 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> LZU-China 2014

 
 
 

 

 

       China, as the world largest developing country, suffers serious pollution in 21 century. Lanzhou, a capital city in northwest of China, bears serious contaminations. For example, in April 2014, this city has started panic-buying bottled water after city authorities confirmed that lethal chemical compound benzene contaminated the city's drinking water system. We have conducted a survey about how the population's concern about the water contaminations. It shows that compared with UK where exactly 70.59% of the residents announce that did not suffer from any kinds of water pollution, 69.23% of the Chinese respondents admitted that their hometown has effected by water pollution. In particular, 15.38% of them said that they had suffered serious pollution. Meanwhile, over 78.46% of the residents in China suggest it should be meaningful to develop microbial fuel cells for power generation. So those are why we want to start the topic about sewage treatment using membrane and power generation using microorganisms.

 

 

       Microorganisms can degrade pollutants and produce electricity, so we aimed to produce microbial fuel cells (MFCs) to deal with the pollutant and generate electricity. This is really a new kind of technology for human because the world best MFCs can only run a tiny toy engine, so this should be have a bright future when it comes into practice.
At first, we construct a normal MFC, using Shewanella oneidensi to generate electricity and reduce sewage with heavy metal ions, during several experiments we found that MFCs running in traditional way have many disadvantages. These two we will mention as following are extremely serious.
       One is that pollutant, for example, p-Nitrophenol(PNP), exists in common sewage, always impede the electricity generation of MFC.

 

       Another drawback is that all kinds of traditional MFCs are hard to show the contaminants concentrations. In the past, some scientist and engineers had to use costly method for example High Performance Liquid Chromatography (HPLC) measure the substrate concentration. This is also a major drawback for MFCs applications.

 

 

      But how can we deal with these two kinds of problems? We noticed that if we could modify the gene of bacteria used in MFCs to fight against the negative effect of pollutant and invented a series of hardware and software to monitor the substrate concentration of MFCs, these two kinds of problems would be overcame successfully. So we registered iGEM 2014 to develop a novel MFCs system that can measure substrates concentrations using genetic engineered bacteria. This is a new concept not only simply for PNP problem, but also it is a standard model for all kinds of pollutant treatment and real-time substrate concentration monitoring.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


  

 

 

 
 
 

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