"
Team:Nankai
From 2014.igem.org
(Difference between revisions)
| Line 20: | Line 20: | ||
<body> | <body> | ||
| + | <styel> | ||
@charset "utf-8"; | @charset "utf-8"; | ||
html, body, button, input, select, textarea { | html, body, button, input, select, textarea { | ||
| Line 1,680: | Line 1,681: | ||
background-position: -161px 0 | background-position: -161px 0 | ||
}/*za jindan*/ | }/*za jindan*/ | ||
| + | </style> | ||
<!--header static--> | <!--header static--> | ||
Revision as of 11:03, 10 October 2014
<!DOCTYPE html>
* * 
*
* ************************ * 圆角布局 使用 .radius * 示例》》 * * *
****************************** * * 带小三角的 按钮 /标签 * btn-tag 基本定义 * .btn-tag.red 红色 * .btn-tag.yellow 黄色 * .btn-tag.blue 蓝色 * .btn-tag.gray 灰色 * 示例》》 * //头部圆角 * * //此处 w300 为宽度 必须 定义 * *
* //此处w308为宽度 必须定义 两个角各占10像素 出去边框 多8像素 * ......... 这里是内容部分 *
* * * //此处 w300 为宽度 必须 定义 * *
* * *
* * *************************** * 圆角按钮 * 必须包含 样式 btn-base * * 20高度样式 * btn-blue-h20 20高度样式 蓝色 * btn-yellow-h20 20高度样式 黄色 * btn-gray-h20 20高度样式 灰色 * btn-red-h20 20高度样式 红色 * * 37高度样式 * btn-red-h37 37高度样式 红色 * btn-gray-h37 37高度样式 灰色 * 48高度样式 * btn-red-h48 48高度样式 红色 * btn-blue-h48 48高度样式 蓝色 * 示例》》 * * 圆角btn * * * *//*基本布局*/
body {
color: #555;
line-height: 22px;
background: #F8F8F8;
background-image:url(./images/main-bodybg.jpg);
background-repeat:repeat;
}
a {
color: rgb(150,100,85);
}
a:hover {
color:#ed5e58;
}
.wrap {
width: 960px;
margin: 0 auto;
}
.content {
width: 630px;
}
.sidebar {
width: 310px;
}
.block-list {
margin: 0 0 20px;
}
.main {
min-height: 700px;
_height: 700px;
}
.font-yen {
font-family: 'Microsoft YaHei', STXihei, MingLiu;
}/* CLEARFIX */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}/*图标*/
.common-sprite {
background-image: url('./images/icon_sprite.png');
background-repeat: no-repeat;
}
.icons {
background-image: url('./images/icons.png');
background-repeat: no-repeat;
}
.txt-err {
background-image: url('./images/icons_v1.png');
background-repeat: no-repeat;
}/*图片垂直居中*/
.vertical-middle {
overflow: hidden;
text-align: center;
font-size: 0;
}
.vertical-middle .hook {
display: inline-block;
width: 0;
height: 100%;
overflow: hidden;
margin-left: -1px;
font-size: 0;
line-height: 0;
vertical-align: middle;
}
.vertical-middle img {
vertical-align: middle;
border: 0 none;
}
.radius {
border-radius: 5px;
}/*圆角布局*/
.radius-hd, .radius-ft {
width: 100%;
height: 5px;
}
.radius-hl, .radius-hr, .radius-fl, .radius-fr {
width: 5px;
height: 5px;
line-height: 0px;
font-size: 0px;
}
.radius-hl {
float: left;
background-position: 0px 0px;
}
.radius-hr {
float: right;
background-position: -7px 0px;
}
.radius-fl {
float: left;
background-position: 0px -7px;
}
.radius-fr {
float: right;
background-position: -7px -7px;
}
.radius-hc, .radius-fc {
float: left;
height: 4px;
line-height: 0px;
font-size: 0px;
background-color: #FFF;
}
.radius-hc {
border-top: 1px solid #E5E5E5;
}
.radius-fc {
border-bottom: 1px solid #E5E5E5;
}
.radius-bd {
background-color: #FFF;
border-left: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
}/*带右下三角的按钮&标签*/
.tag {
position: relative;
width: 90px;
height: 30px;
color: #FFF;
font-size: 16px;
line-height: 30px;
text-align: center;
text-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.triangle {
width: 0;
height: 0;
overflow: hidden;
line-height: 0;
font-size: 0;
vertical-align: middle;
border-left: 10px solid #810500;
border-right: 0 none;
border-top: 0px solid transparent;
border-bottom: 10px solid transparent;
_color: #F8F8F8;
_filter: chroma(color=#FF3FFF);
position: absolute;
right: 0px;
bottom: -10px;
}/*带右下三角的按钮&标签 --- 颜色设置*/
.tag.bg-red {
background-color: #ed5f59;
}
.tag.bg-red .triangle {
border-left: 10px solid #810500;
}
.tag.bg-yellow {
background-color: #f5aa31;
}
.tag.bg-yellow .triangle {
border-left: 10px solid #945b00;
}
.tag.bg-blue {
background-color: #50a5fb;
}
.tag.bg-blue .triangle {
border-left: 10px solid #00356b;
}
.tag.bg-gray {
background-color: #a4a4a4;
}
.tag.bg-gray .triangle {
border-left: 10px solid #717171;
}/*基本按钮*/
.btn-base {
display: inline-block;
*display: inline;
zoom: 1;
padding-left: 5px;
color: #FFF;
}
.btn-base:hover {
color: #FFF;
}
.btn-base span {
display: inline-block;
*display: inline;
zoom: 1;
padding-right: 5px;
float: left;
}
.btn-red-h20 {
background-position: -223px 0px;
height: 20px;
line-height: 20px;
}
.btn-red-h20 span {
background-position: 100% -263px;
height: 20px;
line-height: 20px;
}
.btn-blue-h20 {
background-position: -223px -21px;
height: 20px;
line-height: 20px;
}
.btn-blue-h20 span {
background-position: 100% -194px;
height: 20px;
line-height: 20px;
}
.btn-yellow-h20 {
background-position: -223px -42px;
height: 20px;
line-height: 20px;
}
.btn-yellow-h20 span {
background-position: 100% -217px;
height: 20px;
line-height: 20px;
}
.btn-gray-h20 {
background-position: -223px -63px;
height: 20px;
line-height: 20px;
}
.btn-gray-h20 span {
background-position: 100% -240px;
height: 20px;
line-height: 20px;
}
.btn-red-h30 {
background-position: -223px -103px;
height: 30px;
line-height: 30px;
}
.btn-red-h30 span {
background-position: 100% -611px;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0px 10px 0px 5px;
}
.btn-gray-h30 {
background-position: -223px -137px;
height: 30px;
line-height: 30px;
}
.btn-gray-h30 span {
background-position: 100% -646px;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0px 10px 0px 5px;
}
.btn-red-h37 {
background-position: -199px 0px;
height: 37px;
line-height: 37px;
}
.btn-red-h37 span {
background-position: 100% -286px;
height: 37px;
line-height: 37px;
font-size: 18px;
padding: 0px 20px 0px 15px;
}
.btn-gray-h37 {
background-position: -199px -38px;
height: 37px;
line-height: 37px;
}
.btn-gray-h37 span {
background-position: 100% -326px;
height: 37px;
line-height: 37px;
font-size: 18px;
padding: 0px 20px 0px 15px;
}
.btn-red-h48 {
background-position: -199px -126px;
height: 48px;
line-height: 48px;
}
.btn-red-h48 span {
background-position: 100% -366px;
height: 48px;
line-height: 48px;
font-size: 18px;
padding: 0px 20px 0px 15px;
}
.btn-blue-h48 {
background-position: -199px -76px;
height: 48px;
line-height: 48px;
}
.btn-blue-h48 span {
background-position: 100% -417px;
height: 48px;
line-height: 48px;
font-size: 18px;
padding: 0px 20px 0px 15px;
}
.btn-nav {
background-position: 0px -503px;
height: 32px;
line-height: 32px;
}
.btn-nav span {
background-position: 100% -503px;
height: 32px;
line-height: 32px;
padding: 0px 20px 0px 15px;
color: #555;
font-size: 14px;
}
.select .btn-nav {
background-position: 0px -468px;
}
.select .btn-nav span {
background-position: 100% -468px;
color: #555;
}
.ratio-bar {
width: 232px;
margin: 9px 0px;
height: 16px;
line-height: 1px;
font-size: 1px;
background-position: 0px -537px;
position: relative;
}
.ratio-bar span {
height: 16px;
display: block;
line-height: 1px;
font-size: 1px;
}
.ratio-bar .ratio-red {
background: url(../images/phoenix/icon/icon-progress.gif?v=45) no-repeat 100% 0;
}
.ratio-bar .ratio-yellow {
background-position: 100% -573px;
}
.ratio-bar .ratio-gray {
background-position: 100% -592px;
}
.ratio-bar i {
width: 6px;
height: 16px;
line-height: 1px;
font-size: 1px;
background-position: 0 -119px;
position: absolute;
left: 0;
top: 0px;
_top: 1px;
}/*header*/
.header {
width: 100%;
height: 70px;
padding-top: 2px;
background: url(./images/bg-top.png) repeat-x 50% -2px rgb(126, 12, 110);
border-bottom: 0px solid #e5e5e5;
}
.header .img-logo {
float: left;
}
.img-logo {
padding: 10px 23px 17px 0;
}
.img-logo a {
width: 180px;
height: 60px;
display: block;
background: url(./images/logo.png) no-repeat 0 0;
text-indent: -9999px;
}
.header .menu {
float: left;
padding-right: 12px;
}
.menu ul {
float: left;
}
.menu ul li {
padding: 0px 8px;
float: left;
position: relative;
z-index: 5;
}
.menu ul li a {
padding: 23px 10px 14px;
height: 30px;
line-height: 30px;
display: inline-block;
font-size: 16px;
color: rgb(255,255,255);
}
.menu ul li a:hover {
color: #FC3;
border-bottom: 3px solid #ed5e58;
}
.menu ul li a i {
width: 10px;
height: 8px;
display: inline-block;
vertical-align: middle;
_flort: right;
_margin-top: 10px;
background-position: -13px -124px;
}
.menu ul li.select a {
color: rgb(255,255,255);
border-bottom: 3px solid #ed5e58;
padding: 23px 10px 14px;
}
.menu ul li ul {
position: absolute;
width: 105px;
left: 12px;
top: 70px;
border: 1px solid #D5CCCB;
border-top: none;
z-index: 10;
}
.menu ul li ul li {
margin: 0px;
padding: 0px;
background: #FFF;
}
.menu ul li ul li a {
margin: 0px;
width: 105px;
text-align: center;
padding: 6px 0px;
}
.header .search {
float: left;
}
.search {
width: 170px;
height: 26px;
margin: 25px 0px 19px;
background-position: -1px -148px;
padding-left: 5px;
}
.search-key {
width: 127px;
height: 16px;
float: left;
font-size: 14px;
line-height: 16px;
padding: 5px 5px;
border: none;
background: none;
}
.btn-search {
width: 26px;
height: 26px;
float: left;
text-indent: -9999px;
border: none;
background: url('./images/icon_sprite.png') no-repeat -53px -92px;
cursor: pointer;
}
.login-wrap {
float: right;
padding: 25px 0px 23px;
font-size: 14px;
}
.login-wrap a {
color: rgb(150,100,85);
}
.login-wrap a:hover {
color: #ed5e58;
}
.login-wrap em {
padding: 0px 10px;
color: #b0b0b0;
}
.quick-links {
float: right;
height: 22px;
padding: 40px 0px 0px;
}/*user-menu*/
.user-menu {
float: right;
position: relative;
z-index: 5;
}
.menu-hd {
width: 150px;
}
.select .menu-bd {
display: block;
}
.menu-hd a {
height: 34px;
display: block;
padding-top: 25px;
text-align: right;
}
.menu-hd img {
width: 30px;
height: 30px;
border-radius: 50%;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
position: relative;
vertical-align: middle;
z-index: 2;
}
.menu-hd span {
height: 22px;
padding-left: 10px;
line-height: 22px;
font-size: 14px;
font-weight: bold;
padding-right: 15px;
background: url('../images/phoenix/icon/icon_tnav.png?v=45') no-repeat 100% -145px;
}
.menu-hd a:hover span {
background-position: 100% -168px;
color: #000;
}
.menu-bd {
width: 120px;
padding: 10px;
position: absolute;
right: 0;
top: 65px;
background: #FFF;
border: 1px solid #D5CCCB;
display: none;
}
.menu-bd ul li {
width: 100%;
float: left;
height: 22px;
line-height: 22px;
font-size: 14px;
padding: 10px 0px;
border-bottom: 1px solid #f8f8f8;
}
.menu-bd ul li a {
height: 22px;
display: block;
padding-left: 32px;
background-image: url(../images/phoenix/icon/icon_tnav.png?v=45);
background-repeat: no-repeat;
}
.msg a {
background-position: 12px 7px;
}
.spo a {
background-position: 12px -40px;
}
.sup a {
background-position: 12px -15px;
}
.att a {
background-position: 12px -62px;
}
.set a {
background-position: 12px -90px;
}
.exit a {
background-position: 12px -120px;
}/*footer*/
.footer {
width: 100%;
background: #5a5a5a;
color: #8c8c8c;
}
.footer-section {
padding: 20px 0px;
border-bottom: 1px solid #3a3a3a;
}
.foot-map {
float: left;
width: 780px;
overflow: hidden;
}
.foot-map dl {
float: left;
padding-right: 20px;
width: 240px;
}
.foot-map dl dt {
font-size: 14px;
color: rgb(153,153,153);
line-height: 32px;
}
.foot-map dl dd a {
color: #FFF;
}
.foot-map dl dd em {
color: #707070;
padding: 0px 7px;
}
.foot-logo {
float: right;
padding-top: 20px;
}
.foot-logo h1 {
width: 156px;
height: 46px;
background: url(../images/phoenix/common/logo-ft.png?v=45) no-repeat 0 0;
}
.footer-copy {
background: #505050;
border-top: 1px solid #757575;
padding: 12px 0px;
}
.ft-links {
padding: 5px 0px;
color: #DDD;
text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
}
.ft-links .links-arrow {
float: left;
font-weight: bold;
}
.ft-links p {
margin-left: 60px;
}
.ft-links a {
font-size: 12px;
margin: 0px 5px;
color: #DDD !important;
}
.ft-links a:hover {
color: #FFF;
}/*mod title*/
.mod-title {
width: 100%;
height: 32px;
}
.mod-title h2 {
font-size: 20px;
float: left;
color: rgb(150,100,85);
line-height: 32px;
}
.mod-title .title-sub {
float: right;
padding: 6px 0px;
}
.title-sub {
font-size: 14px;
height: 20px;
line-height: 20px;
}
.title-sub ul {
float: right;
}
.title-sub a {
vertical-align: middle;
margin: 0px 5px;
}
.title-sub ul li {
float: left;
height: 20px;
line-height: 20px;
padding-left: 20px;
}
.title-sub ul li a {
float: left;
padding: 0px 3px;
margin: 0px;
}/*list-item*/
.list-item {
width: 223px;
height: 318px;
position: relative;
background: #FFF;
border: 1px solid #E6E6E6;
border-radius: 5px;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.team-list-item {
width: 223px;
height: 1550px;
position: relative;
background: #FFF;
border: 1px solid #E6E6E6;
border-radius: 5px;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.item-figure {
width: 223px;
height: 168px;
display: block;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
}
.item-figure img {
height: 168px;
width: 223px;
border-radius: 5px 5px 0px 0px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.item-figure img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.item-figure img:hover {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
opacity: 0.90;
filter: alpha(opacity=90);
}
.item-upvote {
width: auto;
height: 24px;
text-align: right;
position: absolute;
right: 10px;
top: 10px;
}
.item-upvote a {
width: auto;
height: 22px;
line-height: 22px;
float: right;
padding: 0px 8px 0px 20px;
color: rgb(126,12,110);
border: 1px solid #e6e6e6;
border-radius: 12px;
display: block;
background: #FFF url(./images/icons.png) no-repeat 3px 6px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.item-upvote a:hover, .item-upvote .liked {
background-color: rgb(126,12,110);
color: #FFF;
border: 1px solid rgb(126,12,110);
background-position: 3px -14px;
}
.list-item h3 {
padding: 0 12px;
margin: 10px 0;
font-size: 14px;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.item-caption {
padding: 0px 12px 5px;
height: 20px;
line-height: 20px;
color: #A4A4A4;
}
.item-caption .caption-title {
float: left;
}
.caption-title em {
color: #555;
}
.item-caption .btn-base {
float: right;
}
.progress-bar {
width: 223px;
height: 6px;
line-height: 0px;
font-size: 0px;
background: #F2F2F2;
overflow: hidden;
}
.progress {
height: 6px;
line-height: 0px;
font-size: 0px;
display: block;
}
.item-rate {
padding: 8px 12px 0px;
line-height: 18px;
color: #A4A4A4;
}
.item-rate em {
color: #555;
}
.item-rate em.red {
color: #ED5E58;
}
.rate1 {
display: block;
float: left;
text-align: left;
width: 50px;
}
.rate2 {
display: block;
float: left;
text-align: center;
width: 76px;
}
.rate3 {
display: block;
float: right;
text-align: right;
width: 70px;
}/*page*/
.page {
width: 100%;
}
.page a {
width: 25px;
height: 25px;
margin: 0px 1px;
font-size: 14px;
color: #FFF;
display: inline-block;
line-height: 25px;
text-align: center;
background-position: -128px -2px;
}
.page a.prev, .page a.next {
width: 45px;
padding: 0px 10px;
color: #a4a4a4;
}
.page a.select, .page a:hover {
background-position: -161px -2px;
}/*pop*/
.pop-bg {
background: url(../images/phoenix/common/bg-pop.png?v=45) repeat;
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
.pop {
box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
}
.form {
width: 490px;
}
.confirm {
width: 435px;
}
.alert {
width: 367px;
}
.pop-box {
border-radius: 5px;
background: #FFF;
border: 1px solid #d6d6d6;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.pop .title {
width: 100%;
background: rgb(126,12,110);
height: 40px;
border-radius: 5px 5px 0px 0px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.pop .title h3 {
font-size: 16px;
color: #FFF;
line-height: 40px;
padding-left: 10px;
float: left;
}
.btn-close {
position: absolute;
right: -11px;
top: -11px;
width: 22px;
height: 22px;
line-height: 0px;
font-size: 0px;
background-position: -126px -116px;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
transition: all 0.4s ease-out 0s;
}
.btn-close:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-ms-transform: rotate(0);
}
.pop-body {
background: #FFF;
padding: 0px 15px;
border-radius: 0px 0px 5px 5px;
}
.pop .info {
padding: 20px 0px;
}
.form-item {
padding: 5px 0px;
}
.form-item label {
width: 100px;
float: left;
height: 28px;
font-size: 14px;
line-height: 28px;
text-align: right;
}
.form-item input {
width: 160px;
height: 18px;
float: left;
font-size: 14px;
line-height: 18px;
color: #555;
padding: 4px 5px;
margin-left: 5px;
border: 1px solid #bababa;
border-radius: 3px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.form-item input.ads-ipt {
width: 300px;
}
.form-item .form-msg {
width: 160px;
height: 22px;
font-size: 14px;
display: block;
padding: 5px 5px;
margin-left: 105px;
}
.form-item .sex-box {
width: 180px;
height: 22px;
margin-left: 105px;
padding-left: 5px;
}
.form-item .sex-box input {
width: auto;
height: auto;
padding: 0;
border: none;
display: inline;
margin: 0 2px 0px 0px;
float: none;
}
.form-item .sex-box span {
padding: 0 10px 0 0;
vertical-align: middle;
}
.form-item .option-box {
font-size: 14px;
display: block;
margin-left: 105px;
}
.form-item .option-box select {
width: 100px;
height: 26px;
line-height: 26px;
border: 1px solid #9c9c9c;
border-radius: 3px;
color: #555;
margin-right: 5px;
}
.form-item input[type="text"]:focus, .form-item input[type="password"]:focus {
border-color: #f5a9a6;
box-shadow: 0 1px 4px rgba(255, 50, 50, 0.25) inset, 0 0 3px rgba(255, 50, 50, 0.25);
}
.up-btn {
float: left;
padding-left: 5px;
height: 30px;
}
.ipt-file {
position: relative;
height: 30px;
}
.form-item .ipt-file {
float: left;
}
.ipt-file input {
width: 78px;
height: 28px;
cursor: pointer;
display: block;
margin: 0px;
padding: 0px;
position: absolute;
left: 0;
top: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
.form-item textarea {
height: 112px !important;
padding: 5px;
margin-left: 5px;
color: #555;
font-size: 14px;
border: 1px solid #BABABA;
border-radius: 3px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.form-item .inp-w310 {
width: 310px;
}
.form-item .inp-w68 {
width: 68px;
}
.form-item .inp-w160 {
width: 160px !important;
}
.form-item .input-tips {
line-height: 28px;
float: left;
padding-left: 5px;
}
.error-text {
color: rgb(126,12,110);
line-height: 28px;
padding-left: 10px;
}
.txt-err {
width: 20px;
height: 20px;
float: left;
line-height: 1px;
font-size: 1px;
text-indent: -9999px;
margin: 3px 0px 0px 5px;
display: block;
}
.txt-err {
background-position: 0px 1px;
}
.pop .btn {
border-top: 1px solid #e0e0e0;
height: 30px;
padding: 10px 0px;
text-align: right;
}
.pop .btn .btn-base {
margin-left: 5px;
}
.pop-info {
padding: 30px 50px;
}
.pop-info h3 {
font-size: 16px;
color: rgb(126,12,110);
line-height: 26px;
}
.pop-info p {
font-size: 14px;
color: #555;
line-height: 26px;
}
.alert .pop-info h3 {
text-align: center;
}
.pop-loading {
width: 100%;
height: 200px;
border: 1px solid #ED5F59;
margin: 0px auto;
background: #FFF url(../images/phoenix/icon/loading.gif?v=45) no-repeat 50% 50px;
border-radius: 5px;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.pop-loading p {
width: 100%;
font-size: 18px;
font-weight: bold;
margin: 125px 0px 0px;
text-align: center;
}
.pop-msg {
padding: 10px 25px 20px;
}
.pop-msg h3 {
font-size: 16px;
height: 22px;
padding: 10px 0px;
}
.pop-msg textarea {
width: 390px;
height: 136px;
padding: 5px;
border: 1px solid #bababa;
border-radius: 3px;
position: relative;
behavior: url(static/css/phoenix/PIE.htc);
}/*logon css*/
.login-block {
width: 350px;
border: 1px solid #d6d6d6;
border-radius: 0px 0px 5px 5px;
border-top: none;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.login-func {
width: 100%;
height: 45px;
}
.login-func ul li {
width: 174px;
height: 43px;
float: left;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
}
.login-func ul li.lbmob {
width: 175px;
border-left: 1px solid #dfdfdf;
}
.login-func ul li span {
width: 100%;
height: 41px;
background: #f8f8f8;
display: block;
line-height: 41px;
font-size: 16px;
color: #999999;
text-align: center;
border-top: 2px solid #f8f8f8;
}
.login-func ul li.select {
border-top: 1px solid #ed5e58;
border-bottom: 1px solid #FFF;
}
.login-func ul li.select span {
background: #FFF;
border-top: 2px solid #ed5e58;
color: #000;
}
.login-form {
padding: 20px 40px;
}
.error-mid {
width: 100%;
padding: 10px 0;
}
.error-mid p {
width: 238px;
height: 30px;
line-height: 30px;
background-color: #fdefee;
border: 1px solid #f6afac;
border-radius: 3px;
padding: 0px 5px 0px 23px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.error-mid p {
background-position: 3px 6px;
}
.login-form-ipt {
width: 100%;
padding: 0px 0px 20px;
}
.login-form-ipt input {
width: 233px;
height: 20px;
font-size: 14px;
color: #555;
line-height: 20px;
border: 1px solid #d9d9d9;
border-radius: 3px;
padding: 11px 5px 11px 28px;
position: relative;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.uid {
background-position: 5px -18px;
}
.ped {
background-position: 5px -62px;
}
.phon {
background-position: 5px -105px;
}
.login-form-ipt .vcode-input {
width: 140px;
float: left;
}
.login-form-ipt .fr {
padding-top: 7px;
}
.send-info {
width: 60px;
word-break: break-all;
display: block;
text-align: center;
line-height: 16px !important;
}
.login-form-btn {
width: 100%;
padding: 10px 0px;
text-align: center;
}
.login-form-btn input {
width: 266px;
height: 38px;
background: url('../images/phoenix/icon/btn-red-h38.png?v=45') no-repeat 0 0;
border: none;
font-size: 18px;
color: #FFF;
cursor: pointer;
}
.pass-login {
padding-top: 5px;
color: #e0dfdf;
}
.pass-login .fl a {
padding-left: 22px;
display: inline-block;
margin-right: 7px;
color: #7d7d7d;
}
.pass-login .fl a:hover {
color: #ED5E58;
}
.pass-login .fl a.weibo {
background-position: 0px -153px;
}
.pass-login .fl a.tqq {
background-position: 0px -183px;
}
.signin-form .pass-login {
padding-left: 20px;
}/*tooltip css*/
.tooltip {
position: absolute;
background: #F8F8F8;
width: 260px;
text-align: left;
padding: 10px;
border: 1px solid #DFDFDF;
border-radius: 5px;
behavior: url(static/zhongchou/css/phoenix/PIE.htc);
}
.tooltip i {
display: block;
background-image: url(../images/phoenix/icon/icon_tips.png?v=45);
background-repeat: no-repeat;
}
.site-right {
width: 8px;
height: 17px;
position: absolute;
right: -8px;
top: 15px;
background-position: -23px -8px;
}
.site-left {
width: 8px;
height: 17px;
position: absolute;
left: -8px;
top: 15px;
background-position: 0 -8px;
}
.site-top {
width: 17px;
height: 8px;
position: absolute;
top: -8px;
right: 20px;
background-position: -8px 0;
}
.site-bottom {
width: 17px;
height: 8px;
position: absolute;
top: 100%;
bottom: -8px;
right: 20px;
background-position: -8px -23px;
}
.tooltip h3 {
font-size: 14px;
color: #ED5E58;
}/*public-tit*/
.tit-wrap {
width: 100%;
height: 30px;
padding: 15px 0px;
border-bottom: 1px dashed #E4E4E4;
}
.tit-wrap h3 {
font-size: 20px;
line-height: 30px;
color: #000;
text-indent: 20px;
}
.strong {
font-weight: bold;
}
.tit-hsbg {
width: 100%;
height: 30px;
background: url(../images/phoenix/icon/bg-tit.jpg?v=45) repeat;
}
.tit-hsbg h3 {
font-size: 16px;
line-height: 30px;
text-indent: 20px;
}/*operating-tips*/
.operating-tips {
width: 400px;
margin: 0px auto;
padding: 80px 0px;
}
.icon-success, .icon-error, .icon-message {
width: 60px;
height: 60px;
display: block;
float: left;
}
.icon-success {
background: url(../images/phoenix/common/icon-success.png?v=45) no-repeat 50% 50%;
}
.icon-error {
background: url(../images/phoenix/common/icon-error.png?v=45) no-repeat 50% 50%;
}
.icon-message {
background: url(../images/phoenix/common/icon-message.png?v=45) no-repeat 50% 50%;
}
.operating-tips h3 {
font-size: 18px;
line-height: 30px;
margin-left: 70px;
padding-top: 5px;
}
.operating-tips p {
font-size: 12px;
margin-left: 70px;
}/*QR Code and back Top*/
#code, #code_hover {
bottom: 63px;
width: 36px;
height: 48px;
position: fixed;
right: 10px;
cursor: pointer;
}
#code {
background: url(./images/icon.png) -276px -258px no-repeat;
}
#code_hover {
background: url(./images/icon.png) -316px -258px no-repeat;
}
#code_img {
width: 270px;
height: 355px;
background: url(./images/icon.png) -4px -3px no-repeat;
position: fixed;
z-index: 9999;
right: 55px;
bottom: 8px;
cursor: pointer;
display: none;
}
#gotop {
background: url(./images/icon.png) no-repeat -276px -310px;
width: 36px;
height: 48px;
cursor: pointer;
display: none;
position: fixed;
right: 10px;
bottom: 10px;
}/*QR Code and back Top*//**/
.pt_ban {
width: 100% !important;
z-index: 2;
padding-top: 50px !important;
text-align: center;
background-image: url(./images/main-bg.jpg);i
background-repeat: no-repeat;
background-position: 50% 0;
}
.abposi {
top: 124px !important;
z-index: 3;
}
.pop-box .ipt-file {
padding: 10px 0px 10px;
}
.uppic span.common-sprite {
height: auto;
margin: 0;
float: none;
display: inline-block;
}
.comment_user_avatar, .sup-face img {
transition: all 1.2s ease-out 0s;
}
.comment_user_avatar:hover, .sup-face img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-ms-transform: rotate(0);
}/*za jindan*/
.fuchuang a {
position: fixed;
top: 90px;
right: 10px;
z-index: 999;
display: block;
background: url(../images/fuc.png?v=45) no-repeat
}
.fuchuang a.login {
width: 140px;
height: 250px;
background-position: 0 0
}
.fuchuang a.wei {
width: 120px;
height: 286px;
background-position: -323px 0
}
.fuchuang a.za {
width: 140px;
height: 349px;
background-position: -161px 0
}/*za jindan*/
Abstract
-
Microbial enhanced oil recovery (MEOR) is a popular method which relies on microorganisms and their metabolic products to mobilize residual oil. For example, some bacteria are able to produce emulsifier, and others can produce biosurfactant. These two bio-products can work together to help form a stable water-oil mixture with good mobility, which makes it easier to remove oil. However, the bacteria producing emulsifier can feed on oil but those biosurfactant-producing kinds cannot. As a result, no matter by injecting nutrients or adding other kinds of surfactant along with water, surfactant cannot be blend with oil efficiently.
Our project is to solve this problem by constructing a bacterial strain that can utilize oil as its carbon resource as well as producing emulsifier and biosurfactant at the same time.
We start with a Pseudomonas stutter strain, a kind of bacterium that can produce a special kind of emulsifier and live well in the oil reservoirs all by itself. To make it more powerful, we plan to express the rhamnosyltransferase operon genes rhlABRI from Pseudomonas aeruginosa in it, so that it can produce rhamnolipid, a biosurfactant that can mobilize residual oil in the reservoir by reducing the oil-water interfacial tension (IFT).
-
Our Results
details
-
Our Team
people
-
Our Costs
money
