Team:HIT-Harbin/css/teamstyle.css
From 2014.igem.org
/* CSS Document */
body{background-color:#183D46;}
- top-section {
background-color: transparent; }
- topCentent{
width:1117px; margin:-8px auto;
padding:0;
}
- nav span{color:#2F798C}
- nav { position:absolute;top:125px;width:1351px;left:0;z-index:2;
height:67px; font-family: Ebrima;
} .nav1{float:left;width:85px;margin-top:41px;}
- rnav{display:none;}
- nav a {text-decoration:none;color:#183D46;font-size:22px;}
- nav li a {font-size:18px;}
- nav #project ul{width:80px;}
- nav ul {margin-top:10px;font-size:20px;padding-top:10px;display:none;text-align:center;border: #909090 1px solid;
background: #F9F6E7;filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); -moz-box-shadow: 2px 2px 10px #909090; -webkit-box-shadow: 2px 2px 10px #909090; box-shadow: 2px 2px 10px #909090;}
- nav ul{filter:aphla(opacity=80); background:#F9F6E7; background:rgba(294,246,231,0.8); important!}
- nav ul li:hover{background:#F9F6E7;}
- nav ul li { color:#183D46; position:relative;border-bottom: #909090 1px solid;}
- nav ul li a{font-size:14px;}
- nav ul li a:hover{color:#11979C;}
- nav #project ul {
width: 102px; margin-left: -20px; }
- nav #judging ul {
width: 108px; margin-left: -20px; }
- wetlab {
margin-left: 61px; }
- nav #wetlab ul {
width: 100px; margin-left: -15px; }
- software {
margin-left: 278px; }
- team {
margin-left: 32px; }
- nav #team ul {
width: 100px; margin-left: -22px; }
- humanPractices {
margin-left: 10px; }
- nav #humanPractices ul {
width: 129px; margin-left: 20px; }
- nav a:hover {color:#2F798C}
- overview {
text-align: center; }
- overview p {
padding-left: 48px; font-family: "Microsoft YaHei"; padding-top: 10px; text-align: justify; text-justify: inter-ideograph; color: #04979D; border-bottom: 2px solid #04979D; font-size: 19px;}
- bottomNav {
z-index:999; position:fixed; bottom:0; left:1100px; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }
- bottomNav a{text-decoration:none;font-family:Ebrima;color:#183D46;font-size:20px;}
- bottomNav a:hover{color:#2F798C;}
- team {
width: 74px;} /* for mainarea */
- mainarea{padding-top:264px;z-index: 0 ;margin:0 20px;}
.alignleft { width: 645px; float: left;} .cta-box { /* padding-top: 0px; */ height: 60px; border-top: #F2E3C6 2px dashed; border-bottom: #F2E3C6 2px dashed; margin-top: 49px; } a.custom-button { float: right; } a.custom-button { margin: 19px;font: bold 13px/34px Arial; } .cta-box p { margin: 19px;font: italic 25px/34px "Times New Roman"; } .container_12 {
margin-left: auto; margin-right: auto; width: 960px;
}
/*MYstyle*/
- bodyContent{background-color: #EEEADE;}
- nav{background: url(
) no-repeat center 9%;
position: relative; width: 1131px; z-index: 2; height: 67px; font-family: Ebrima; margin: 0 auto; float: left; }
- nav #top-section {
background-color: transparent; }
- nav #project {
margin-left: 59px; }
- nav #judging {
margin-left: 57px;
- nav #wetlab {
margin-left:53px; }
- nav #software {
margin-left: 309px; }
- nav #team {
width: 57px; margin-left: 27px; }
- nav #humanPractices {
margin-left: 24px; }
- body{background-color:#183D46;}
/* for mainarea */
- mainarea{padding-top:264px;z-index: 0 ;margin:0 20px;}
.alignleft { width: 645px; float: left;} .cta-box { /* padding-top: 0px; */ height: 60px; border-top: #F2E3C6 2px dashed; border-bottom: #F2E3C6 2px dashed; margin-top: 49px; } a.custom-button { float: right; } a.custom-button { margin: 19px;font: bold 13px/34px Arial; } .cta-box p { margin: 19px;font: italic 25px/34px "Times New Roman"; }
- mainarea h2{font-family: 'Microsoft YaHei';font-weight:normal;}
.team_content #overview p {font-size: 20px; font-family: cursive;}
- rnav{display:none;}
- nav{background: url(
) no-repeat center 100%;
position: relative; width: 1131px; z-index: 2; height: 67px; font-family: Ebrima; margin: 0 auto; padding-top: 99px; float: left; }
- Family{margin:0 auto;}
- bodyContent{background-color:#EEEADE}
/* `Grid >> Global
*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline; float: left; margin-left: 10px; margin-right: 10px;
}
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {
position: relative;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 12 Columns
*/
.container_12 .grid_1 {
width: 60px;
}
.container_12 .grid_2 {
width: 140px;
}
.container_12 .grid_3 {
width: 220px;
}
.container_12 .grid_4 {
width: 300px;
}
.container_12 .grid_5 {
width: 380px;
}
.container_12 .grid_6 {
width: 460px;
}
.container_12 .grid_7 {
width: 540px;
}
.container_12 .grid_8 {
width: 620px;
}
.container_12 .grid_9 {
width: 700px;
}
.container_12 .grid_10 {
width: 780px;
}
.container_12 .grid_11 {
width: 860px;
}
.container_12 .grid_12 {
width: 940px;
}
/* `Prefix Extra Space >> 12 Columns
*/
.container_12 .prefix_1 {
padding-left: 80px;
}
.container_12 .prefix_2 {
padding-left: 160px;
}
.container_12 .prefix_3 {
padding-left: 240px;
}
.container_12 .prefix_4 {
padding-left: 320px;
}
.container_12 .prefix_5 {
padding-left: 400px;
}
.container_12 .prefix_6 {
padding-left: 480px;
}
.container_12 .prefix_7 {
padding-left: 560px;
}
.container_12 .prefix_8 {
padding-left: 640px;
}
.container_12 .prefix_9 {
padding-left: 720px;
}
.container_12 .prefix_10 {
padding-left: 800px;
}
.container_12 .prefix_11 {
padding-left: 880px;
}
/* `Suffix Extra Space >> 12 Columns
*/
.container_12 .suffix_1 {
padding-right: 80px;
}
.container_12 .suffix_2 {
padding-right: 160px;
}
.container_12 .suffix_3 {
padding-right: 240px;
}
.container_12 .suffix_4 {
padding-right: 320px;
}
.container_12 .suffix_5 {
padding-right: 400px;
}
.container_12 .suffix_6 {
padding-right: 480px;
}
.container_12 .suffix_7 {
padding-right: 560px;
}
.container_12 .suffix_8 {
padding-right: 640px;
}
.container_12 .suffix_9 {
padding-right: 720px;
}
.container_12 .suffix_10 {
padding-right: 800px;
}
.container_12 .suffix_11 {
padding-right: 880px;
}
/* `Push Space >> 12 Columns
*/
.container_12 .push_1 {
left: 80px;
}
.container_12 .push_2 {
left: 160px;
}
.container_12 .push_3 {
left: 240px;
}
.container_12 .push_4 {
left: 320px;
}
.container_12 .push_5 {
left: 400px;
}
.container_12 .push_6 {
left: 480px;
}
.container_12 .push_7 {
left: 560px;
}
.container_12 .push_8 {
left: 640px;
}
.container_12 .push_9 {
left: 720px;
}
.container_12 .push_10 {
left: 800px;
}
.container_12 .push_11 {
left: 880px;
}
/* `Pull Space >> 12 Columns
*/
.container_12 .pull_1 {
left: -80px;
}
.container_12 .pull_2 {
left: -160px;
}
.container_12 .pull_3 {
left: -240px;
}
.container_12 .pull_4 {
left: -320px;
}
.container_12 .pull_5 {
left: -400px;
}
.container_12 .pull_6 {
left: -480px;
}
.container_12 .pull_7 {
left: -560px;
}
.container_12 .pull_8 {
left: -640px;
}
.container_12 .pull_9 {
left: -720px;
}
.container_12 .pull_10 {
left: -800px;
}
.container_12 .pull_11 {
left: -880px;
}
/* `Clear Floated Elements
*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {
content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;
}
.clearfix:after, .container_12:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem.
- /
.clearfix, .container_12 {
zoom: 1;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
border: 0; margin: 0; padding: 0; font-size: 100%;
}
html, body {
height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { /*
Override the default (display: inline) for browsers that do not recognize HTML5 tags.
IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
- /
display: block;
}
b, strong { /*
Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder.
- /
font-weight: bold;
}
img {
color: transparent; font-size: 0; vertical-align: middle;
/*
For IE. http://css-tricks.com/ie-fix-bicubic-scaling-for-images
- /
-ms-interpolation-mode: bicubic;
}
ol, ul {
list-style: none;
}
li { /*
For IE6 + IE7:
"display: list-item" keeps bullets from disappearing if hasLayout is triggered.
- /
display: list-item;
}
table {
border-collapse: collapse; border-spacing: 0;
}
th, td, caption {
font-weight: normal; vertical-align: top; text-align: left;
}
q {
quotes: none;
}
q:before, q:after {
content: ""; content: none;
}
sub, sup, small {
font-size: 75%;
}
sub, sup {
line-height: 0; position: relative; vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
svg { /*
For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle.
- /
overflow: hidden;
} /*
- =content
- /
.team_content { background: transparent; margin: 0px auto; padding: 0px; color: black; line-height: 1.5em; }
/*
- =overview
- /
div #overview { width: 960px; margin:0 auto; }
div #overview { border-bottom: solid 2px #000; }
/*
- =team_content
- /
/*
- =background
- /
div #YIFAN {
background:url() no-repeat;
}
div #JING {
background:url() no-repeat;
}
div #YUMING {
background: url() no-repeat;
}
div #KAIXUAN {
background: url() no-repeat;
}
div #DAWEI {
background: url() no-repeat;
}
/*
- =frame
- /
div .out_frame { float: left; position: relative; left: 50px; width: 400px; height: 256px; margin: 30px 16px; box-shadow: 0px 0px 8px 2px #888888; }
div .flash_button { background: url() 90% 25% no-repeat; position: absolute; z-index: 2; width: 100px; height: 256px; }
div .quote { float: right; position: relative; right: 50px; width: 256px; height: 256px; margin: 30px 16px; border-bottom: 1px solid #f3f3f3; }
/*
- =font
- /
h1, h3 { font-family: Arial, Helvetica, sans-serif; border: none; }
h2 { font-family: Arial, Helvetica, sans-serif; margin:5px 0 20px 0; padding-top: .5em; color: black; text-align: justify; border: none; display: block; }
- bodyContent h1, h2, h3 {
margin-bottom: .6em; }
.team_content h1{ clear: both; color: #612802; }
.out_frame h1 { position: absolute; z-index: 0; text-align: left; font-size: 20px; line-height: 20px; left: 162px; font-weight: bold; top: 15px; width: 256px; margin: 0; padding: 0; }
.team_content h2 { color: #612802; background-color: #f3f3f3; width: 180px; padding: 30px 15px; text-align: center; }
.out_frame p {
position: absolute;
z-index: 0;
left: 135px;
top: 45px;
margin-top: 13px;
width: 256px;
margin: 0;
padding: 0;
line-height: 1.4em;
}
blockquote { font-size: 15px; line-height: 20px; font-style: italic; color: #0e0e0e; position: relative; }
blockquote p { padding-left: 30px; padding-right: 20px; }
blockquote p:first-child:before { content: '“'; font-size: 40px; color: #bfbfbf; font-style: italic; position: absolute; top: 5px; left: 0; }
blockquote p:last-child:after { content: '”'; font-size: 40px; color: #bfbfbf; font-style: italic; float: right; position: absolute; right: 0; bottom: -7px; }
.speaker h6{ color: #0e0e0e; } /*
960 Grid System ~ Text CSS. Learn more ~ http://960.gs/
Licensed under GPL and MIT.
- /
/* `Basic HTML
*/
body {
font: 13px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
pre, code {
font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
hr {
border: 0 solid #ccc; border-top-width: 1px; clear: both; height: 0;
}
/* `Headings
*/
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
/* `Spacing
*/
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
- mainarea li {
margin-left: 30px;
}
- mainarea p,
- mainarea dl,
- mainarea hr,
- mainarea h1,
- mainarea h2,
- mainarea h3,
- mainarea h4,
- mainarea h5,
- mainarea h6,
- mainarea ol,
- mainarea ul,
- mainarea pre,
- mainarea table,
- mainarea address,
- mainarea fieldset,
- mainarea figure {
margin-bottom: 20px;
}
- globalWrapper #content .out_frame h1 {
display: block; }
- globalWrapper #content .team_content h1 {
display: block; }
- body{background-color:#EEEADE}
- top-section {
background-color: transparent; }
- topCentent{
width:1117px; margin:-8px auto;
padding:0;
}
- nav span{color:#2F798C}
.nav1{float:left;width:85px;margin-top:41px;}
- rnav{display:none;}
- nav a {text-decoration:none;color:#183D46;font-size:22px;}
- nav li a {font-size:15px;}
- project{margin-left:138px;}
- nav #project ul{width:80px;}
- nav ul {font-size:20px;padding-top:10px;width:72px;display:none;}
- nav #humanPractices ul{width:124px;}
- nav a:hover {color:#2F798C}
- rhome a {text-decoration:none;
color: #FECA9E;
font-size: 17px;}
body {
background:#183D46 url() no-repeat scroll 50% 0%;
}
- bottomNav {
z-index:999; position:fixed; bottom:0; left:1100px; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }
- bottomNav a{text-decoration:none;font-family:Ebrima;color:#183D46;font-size:20px;}
- bottomNav a:hover{color:#2F798C;}
- rnav{height:1300px;font-family:Ebrima;text-decoration:none;font-weight:bold;
z-index:999; position:fixed; top:20%; left:0;; width:0; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
- rnav .rnav1 {margin-top:9px;font-size: 16px;}
- rnav .rnav1 a {text-decoration:none;color:#F2E3C6;}
- rnav .rnav1 a:hover {color:#FECA9E;}
- rnav .rnav1 ul{width:108px;display:none;}
- rnav .rnav1 .rfoot{margin-bottom:10px;}
- rnav li a {
font-size: 10px; }
- rnav #home a {color:white;text-decoration:none;}
- rnav #home:hover a {color:red;}
- team {
width: 74px;}
/* for mainarea */
- mainarea{padding-top:264px;z-index: 0 ;margin:0 20px;}
.alignleft { width: 645px; float: left;} .cta-box { /* padding-top: 0px; */ height: 60px; border-top: #F2E3C6 2px dashed; border-bottom: #F2E3C6 2px dashed; margin-top: 49px; } a.custom-button { float: right; } a.custom-button { margin: 19px;font: bold 13px/34px Arial; } .cta-box p { margin: 19px;font: italic 25px/34px "Times New Roman"; }