"
Team:AHUT China/CSS
From 2014.igem.org
- {
margin:0; padding:0; } body{ position:relative; z-index:0; }
section, footer, header, aside{
display: block;
}
p {
margin:0;
}
/************************index page************************/
- index_main{
position:relative;
z-index:5;
background:url(
) top repeat-x;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#f0eee5;
box-shadow:0px 5px 20px 5px #2d2d2d;
}
- index_main #AHUT_content {
width:960px; margin:0 auto; }
- left_bar {
width:64px; height:194px; position:fixed; top:220px; right:60px; z-index:10; }
- left_bar li {
list-style:none; }
- left_bar li a {
display:block; width:64px; height:64px; }
- left_bar li:hover {
filter:alpha(opacity=80); /*IE滤镜，透明度50%*/ -moz-opacity:0.8; /*Firefox私有，透明度50%*/ opacity:0.8;/*其他，透明度50%*/ }
- left_bar .navi1 {
background:url(
) 0 0;
margin-bottom:1px;
}
- left_bar .navi2 {
background:url() 0 -65px;
margin-bottom:1px;
}
- left_bar .navi2:hover {
background:url(
) 0 -65px;
}
- left_bar .navi3 {
background:url() 0 -130px;
CURSOR: pointer;
}
- click_me {
width:218px; height:219px; position:relative; margin:0 auto; }
- click_me a {
display:block;
width:218px;
height:219px;
background-image:url(
);
}
- click_me a:hover {
background-image:url(
);
}
- detail {
width:210px; height:91px; position:relative; margin:0 auto; }
- detail a {
display:block;
width:210px;
height:91px;
background-image:url(
);
}
- detail a:hover {
background-image:url(
);
}
- index_navi {
width:960px; bottom:100px; clear:both; position:absolute; z-index:9; }
- index_navi > ul {
width:652px; height:45px;
margin:0 auto;
}
- index_navi > ul >li {
list-style:none; float:left;
}
- index_navi >ul > li >a {
display:block; height:45px; }
- index_navi .navi1 a {
width:117px;
margin-right:2px;
background-image:url(
);
background-position:0x 0;
}
- index_navi .navi2 a {
width:117px;
margin-right:2px;
background-image:url();
background-position:-119px 0;
}
- index_navi .navi3 a {
width:117px;
margin-right:2px;
background-image:url();
background-position:-238px 0;
}
- index_navi .navi4 a {
width:117px;
margin-right:2px;
background-image:url();
background-position:-357px 0;
}
- index_navi .navi5 a {
width:117px;
margin-right:2px;
background-image:url();
background-position:-476px 0;
}
- index_navi .navi6 a {
width:57px;
background-image:url();
background-position:-595px 0;
}
- index_navi .navi1 a:hover,#index_navi .navi2 a:hover,#index_navi .navi3 a:hover,#index_navi .navi4 a:hover,#index_navi .navi5 a:hover,#index_navi .navi6 a:hover {
background-image:url(
);
}
/************************index foot************************/
- index_footer{
height:407px; color:#ccc; font-size:12px; position:relative; z-index:3; background-color:#3c3e3f; }
- index_footer .conent{
width:960px; position:fixed; left:50%; bottom:0; margin-left:-480px; z-index:2; }
- index_foot_list {
width:759px; height:170px; float:left; padding-top:10px; }
- index_foot_list li{
float:left; text-align:left; width:135px; margin-left:0; margin-right:10px;
line-height:20px; display:block; color:#FFF; font-size:16px;
text-decoration: none; font-family:Arial, Helvetica, sans-serif; }
- index_foot_list li ul li:first-child {
font-size:22px; color:#b4b4b4; line-height:28px; }
- index_foot_list li ul li a {
font-size:13px; color:#a1a1a1; line-height:18px; text-decoration:none; }
- index_foot_list li ul li a:hover {
color:#fff; transition: color 0.3s ease 0s; }
- index_foot_igem{
padding:38px 33px 24px 18px; float:right; }
- index_foot_igem > a {
width:150px;
height:118px;
display:block;
background-image:url(
);
}
- index_foot_igem > a:hover {
background-image:url(
);
}
- index_foot_ahut {
padding:8px 0 11px 56px; float:left; }
- index_foot_ahut > a {
width:144px;
height:144px;
display:block;
background-image:url(
);
}
- index_foot_ahut > a:hover {
background-image:url(
);
}
- index_foot_ahut_info {
width:760px; height:163px; float:right; }
- index_foot_ahut_info p {
padding-top:30px; padding-left:50px; width:640px; text-align:justify; line-height:20px; color:#777777; font-size:14px; font-family:Arial, Helvetica, sans-serif; }
- index_foot_copyright {
clear:both; width:960px; line-height:36px; text-align:center; vertical-align:middle; color:#777777; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
/************************jump block************************/
- jump_window_close {
height:50px; width:100%; clear:both; }
- jump_window_close a {
display:block;
width:150px;
height:50px;
background:url(
);
float:right;
}
- jump_window_close a:hover {
background:url(
);
}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
} .white_content {
display: none;
position: absolute;
top: 15%;
left: 25%;
width: 50%;
height: 50%;
padding: 5px;
border: 5px solid #000;
background-color: white;
z-index:1002;
overflow: auto;
} .black_overlay_info{ display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
} .white_content_info { display:none;
position: absolute;
top: 15%;
left: 25%;
width: 50%;
height: 50%;
padding: 5px;
border: 5px solid #000;
background-color: black;
z-index:1002;
-moz-opacity: 1;
opacity:1;
filter: alpha(opacity=100);
overflow: auto;
}
/************************sec page************************/
- sec_main{
position:relative; z-index:5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#414141; box-shadow:0px 5px 20px 5px #2d2d2d; }
- sec_main #sec_content {
margin:0 auto; }
- sec_top {
width:100%;
height:60px;
background:url(
);
position:fixed;
top:0; left:0; z-index:11; }
- sec_top_navi {
width:560px;
padding-left:400px;
height:100%;
margin:0 auto;
background-image:url(
);
list-style:none;
line-height:60px;
}
- sec_top_navi li {
float:left; margin:0 10px; line-height:60px; font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:500; }
- sec_top_navi li a {
color:#a7a7a7; text-decoration:none; display:block; }
- sec_top_navi li:hover a {
color:#686868; transition: color 0.3s ease 0s; }
- sec_top_navi li ul {
display:none; list-style:none; position:absolute; background:#f2f2f2; width:100px; }
- sec_top_navi li:hover ul {
display:block; }
- sec_top_navi li ul li {
float:left; width:100px; height:30px; line-height:30px; font-size:16px; text-align:left; background:#ffffff; }
- sec_top_navi li ul li a {
color:#a7a7a7; text-decoration:none; display:block; }
- sec_top_navi li:hover ul li a {
color:#686868; }
- block_pic_1 {
width:100%;
height:400px;
background:url(
) center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 60px auto 0 auto;
}
.topic {
width:100%;
height:120px;
line-height:120px;
text-align:center;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:72px;
font-weight:600;
background-color:#414141;
}
.content_topic {
line-height:50px;
text-align:center;
color:#72c0cc;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
margin:15px 0;
}
.content_word {
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
}
.block_blue {
width:100%;
height:auto;
background-color:#68b8c2;
}
.block_white {
width:100%;
height:auto;
background-color:#ffffff;
}
.block_content { width:960px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; } .safety_qa { height:150px; padding-top:20px; padding-bottom:20px; } .block_content_q { font-family:Impact, Charcoal, sans-serif; font-size:24px; color:#ffffff; width:600px; margin:0 50px; } .block_content_a { font-family:'Comic Sans MS', cursive; font-size:18px; color:#ffffff; width:600px; margin:0 50px; }
.triangle { width:143px; margin:0 auto; position:relative; top:-10px; } .hp_pic img { border:none; margin:0 10px; } .hp_pic a img { border:solid #393939 4px; margin:0 10px; } .hp_pic a:hover img { border:solid #98bcdb 4px; margin:0 10px; } .speechmarksleft {
color: #98d2db; display: block; float: left; font-size: 250px;
font-family:Arial, Helvetica, sans-serif;
height: 150px; letter-spacing: normal; line-height: ; vertical-align: text-top; width: 150px;
} .speechmarksright {
color: #98d2db; display: block; float: left; font-size: 250px;
font-family:Arial, Helvetica, sans-serif;
height: 150px; letter-spacing: normal; line-height: ; vertical-align: text-top; width: 150px;
} .content_table { margin: 15px 0; font-size:14px; text-align:justify; color:#414141; } .content_table_pro a { text-decoration:none; } .content_table_pro td,.content_table_pro th { font-size:14px; color:#414141; border:1px #414141 solid; background: #ffffff; }
.content_table td { padding:3px; } .content_table ,.content_table tr, .content_table tr td { border: 3px solid #414141; } .member { width:960px; height:470px; margin-bottom:20px; } .member li { width:280px; padding:10px; margin:0 10px; background:#414141; list-style:none; float:left; } .member .name { width:280px; font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; line-height:28px; height:28px; text-align:center; } .member .major { width:280px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fcb866; line-height:18px; height:18px; text-align:center; font-weight:600; overflow:hidden; } .member .mail { width:280px; background:#2c2c2c; height:24px; line-height:24px; margin:0 auto; text-align:center; font-size:14px; color:#aaaaaa; } .member li{ display:inline; overflow:hidden; position:relative; } .member li .photo{ width:280px; height:380px; overflow:hidden; } .member .rsp{ width:280px; height:380px; overflow:hidden; position: absolute; background:#000; top:10px; left:10px; } .member .instro{ position:absolute; width:260px; height:360px; padding:10px; left:-280px; top:10px; overflow:hidden; color:#ffffff; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-align:justify; }
.f_left { float:left; } .f_right { float:right; } .w_700 { width:700px; } .w_260 { width:260px; text-align:center; } .c_b { clear:both; }
