Team:Nankai

From 2014.igem.org

(Difference between revisions)
Line 20: Line 20:
<body>
<body>
 +
@charset "utf-8";
 +
html, body, button, input, select, textarea {
 +
font: 12px/1.5 "\u5fae\u8f6f\u96c5\u9ed1", "\5FAE\8F6F\96C5\9ED1", "微软雅黑",tahoma, arial, "\5b8b\4f53", sans-serif;
 +
}
 +
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
caption, th {
 +
text-align: left;
 +
font-weight: normal;
 +
}
 +
html, body, fieldset, img, iframe, abbr {
 +
border: 0;
 +
}
 +
html {
 +
-webkit-text-size-adjust: 100%;
 +
-ms-text-size-adjust: 100%;
 +
}
 +
i, em {
 +
font-style: normal;
 +
}
 +
ol, ul, li {
 +
list-style: none;
 +
}
 +
h1, h2, h3, h4, h5, h6, small {
 +
font-size: 100%;
 +
font-weight: normal
 +
}
 +
textarea {
 +
overflow: auto;
 +
resize: none;
 +
}
 +
label {
 +
cursor: default;
 +
}
 +
a, button {
 +
cursor: pointer;
 +
}
 +
a, a:hover {
 +
text-decoration: none;
 +
}
 +
iframe {
 +
display: block;
 +
}
 +
input[type="submit"] {
 +
border: none;
 +
}
 +
button, input, select, textarea {
 +
font-size: 100%;
 +
}
 +
button[disabled], html input[disabled] {
 +
cursor: default;
 +
}
 +
input[type="checkbox"], input[type="radio"] {
 +
padding: 0;
 +
box-sizing: border-box;
 +
vertical-align: -2px;
 +
margin: 0px 3px 0px 0px;
 +
cursor: pointer;
 +
}
 +
.inline-block {
 +
display: inline-block;
 +
*display: inline;
 +
zoom: 1;
 +
}
 +
::-webkit-input-placeholder {
 +
color:#ccc;
 +
}
 +
:-moz-placeholder {
 +
color:#999;
 +
}
 +
::-moz-placeholder {
 +
color:#999;
 +
}
 +
:-ms-input-placeholder {
 +
color:#999;
 +
}
 +
a {
 +
outline: none;
 +
}
 +
.tl {
 +
text-align: left !important;
 +
}
 +
.tc {
 +
text-align: center;
 +
}
 +
.tr {
 +
text-align: right;
 +
}
 +
.bc {
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
.fl {
 +
float: left;
 +
}
 +
.fr {
 +
float: right;
 +
}
 +
.vm {
 +
vertical-align: middle;
 +
}
 +
.vt {
 +
vertical-align: top;
 +
}
 +
.pr {
 +
position: relative;
 +
}
 +
.pa {
 +
position: absolute;
 +
}
 +
.abs-right {
 +
position: absolute;
 +
right: 0;
 +
}
 +
.abs-left {
 +
position: absolute;
 +
left: 0;
 +
}
 +
.hidden {
 +
display: none;
 +
}
 +
.fb {
 +
font-weight: bold;
 +
}
 +
.fn {
 +
font-weight: normal;
 +
}
 +
.no-unl {
 +
text-decoration: none;
 +
}
 +
.word-break {
 +
word-break: break-all;
 +
word-wrap: break-word;
 +
}
 +
.gray {
 +
color: #A5A5A5;
 +
}
 +
.red {
 +
color: rgb(150,100,85);
 +
}
 +
.blue {
 +
color: #00f;
 +
}
 +
.yellow {
 +
color: #FDB96E;
 +
}
 +
.violet {
 +
color: #A98FAC;
 +
}
 +
.black {
 +
color: #000;
 +
}
 +
.white {
 +
color: #fff;
 +
}
 +
.link {
 +
color: #597ec5;
 +
}
 +
.w215 {
 +
width: 215px;
 +
}
 +
.w223 {
 +
width: 223px;
 +
}
 +
.w300 {
 +
width: 300px;
 +
}
 +
.w308 {
 +
width: 308px;
 +
}
 +
.w620 {
 +
width: 620px;
 +
}
 +
.w628 {
 +
width: 628px;
 +
}
 +
.w705 {
 +
width: 705px;
 +
}
 +
.w713 {
 +
width: 713px;
 +
}
 +
.w715 {
 +
width: 715px;
 +
}
 +
.w950 {
 +
width: 950px;
 +
}
 +
.w958 {
 +
width: 958px;
 +
}
 +
.pt15 {
 +
padding-top: 15px;
 +
}
 +
.bg-red {
 +
background: rgb(126,12,110);
 +
}
 +
.bg-gray {
 +
background: #BFBFBF;
 +
}
 +
.bg-yellow {
 +
background: #f6aa31;
 +
}
 +
.bg-none {
 +
background: none !important;
 +
}
 +
.bn {
 +
border: none !important;
 +
}/* 注： *  * 图片垂直居中    使用样式 .vertical-middle-val    * 内含元素：<span class="hook"></span> * 示例》》 * <div class="vertical-middle"> * <span class="hook"></span> * <img src="static/temp/0.jpg" /> *</div> * ************************ * 圆角布局    使用    .radius  * 示例》》 * <div class="radius"> * <div class="radius-hd">//头部圆角 * <div class="radius-hl common-sprite"></div> * <div class="radius-hc w300"></div>  //此处 w300 为宽度  必须 定义 * <div class="radius-hr common-sprite"></div> * </div> * <div class="radius-bd w308">    //此处w308为宽度  必须定义    两个角各占10像素 出去边框  多8像素 * .........  这里是内容部分 * </div> * <div class="radius-ft"> * <div class="radius-fl common-sprite"></div> * <div class="radius-fc w300"></div> //此处 w300 为宽度  必须 定义 * <div class="radius-fr common-sprite"></div> * </div> *</div> ****************************** *  * 带小三角的 按钮  /标签    * btn-tag  基本定义    * .btn-tag.red    红色 * .btn-tag.yellow  黄色 * .btn-tag.blue    蓝色 * .btn-tag.gray    灰色 * 示例》》 * <div class="btn-tag red"> * <span class="triangle"></span> * </div>  *  * *************************** * 圆角按钮    * 必须包含 样式  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高度样式    蓝色 * 示例》》 * <span class="btn-blue-h20 btn-base common-sprite"> * <span class="common-sprite">圆角btn</span> * </span> *  * *//*基本布局*/
 +
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*/
 +
<!--header static-->
<!--header static-->
<div class="header">
<div class="header">

Revision as of 11:01, 10 October 2014

<!DOCTYPE html> iGEM2014 Nankai @charset "utf-8"; html, body, button, input, select, textarea { font: 12px/1.5 "\u5fae\u8f6f\u96c5\u9ed1", "\5FAE\8F6F\96C5\9ED1", "微软雅黑",tahoma, arial, "\5b8b\4f53", sans-serif; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; font-weight: normal; } html, body, fieldset, img, iframe, abbr { border: 0; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } i, em { font-style: normal; } ol, ul, li { list-style: none; } h1, h2, h3, h4, h5, h6, small { font-size: 100%; font-weight: normal } textarea { overflow: auto; resize: none; } label { cursor: default; } a, button { cursor: pointer; } a, a:hover { text-decoration: none; } iframe { display: block; } input[type="submit"] { border: none; } button, input, select, textarea { font-size: 100%; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { padding: 0; box-sizing: border-box; vertical-align: -2px; margin: 0px 3px 0px 0px; cursor: pointer; } .inline-block { display: inline-block; *display: inline; zoom: 1; } ::-webkit-input-placeholder { color:#ccc; } :-moz-placeholder { color:#999; } ::-moz-placeholder { color:#999; } :-ms-input-placeholder { color:#999; } a { outline: none; } .tl { text-align: left !important; } .tc { text-align: center; } .tr { text-align: right; } .bc { margin-left: auto; margin-right: auto; } .fl { float: left; } .fr { float: right; } .vm { vertical-align: middle; } .vt { vertical-align: top; } .pr { position: relative; } .pa { position: absolute; } .abs-right { position: absolute; right: 0; } .abs-left { position: absolute; left: 0; } .hidden { display: none; } .fb { font-weight: bold; } .fn { font-weight: normal; } .no-unl { text-decoration: none; } .word-break { word-break: break-all; word-wrap: break-word; } .gray { color: #A5A5A5; } .red { color: rgb(150,100,85); } .blue { color: #00f; } .yellow { color: #FDB96E; } .violet { color: #A98FAC; } .black { color: #000; } .white { color: #fff; } .link { color: #597ec5; } .w215 { width: 215px; } .w223 { width: 223px; } .w300 { width: 300px; } .w308 { width: 308px; } .w620 { width: 620px; } .w628 { width: 628px; } .w705 { width: 705px; } .w713 { width: 713px; } .w715 { width: 715px; } .w950 { width: 950px; } .w958 { width: 958px; } .pt15 { padding-top: 15px; } .bg-red { background: rgb(126,12,110); } .bg-gray { background: #BFBFBF; } .bg-yellow { background: #f6aa31; } .bg-none { background: none !important; } .bn { border: none !important; }/* 注： * * 图片垂直居中 使用样式 .vertical-middle-val * 内含元素： * 示例》》 *

* * *
* ************************ * 圆角布局 使用 .radius * 示例》》 *
*
//头部圆角 *
*
//此处 w300 为宽度 必须 定义 *
*
*
//此处w308为宽度 必须定义 两个角各占10像素 出去边框 多8像素 * ......... 这里是内容部分 *
*
*
*
//此处 w300 为宽度 必须 定义 *
*
*
****************************** * * 带小三角的 按钮 /标签 * btn-tag 基本定义 * .btn-tag.red 红色 * .btn-tag.yellow 黄色 * .btn-tag.blue 蓝色 * .btn-tag.gray 灰色 * 示例》》 *
* *
* * *************************** * 圆角按钮 * 必须包含 样式 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

All about iGEM Nankai

  • 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

Creator：

Nankai UniversityiGEM 2014 Team

©2014 Nankai University iGEM Team

Retrieved from "http://2014.igem.org/Team:Nankai"