Team:HIT-Harbin/css/teamstyle.css

From 2014.igem.org

/* CSS Document */

body{background-color:#183D46;}

  1. top-section {

background-color: transparent; }

  1. topCentent{

width:1117px; margin:-8px auto; 

       padding:0;

}

  1. nav span{color:#2F798C}
  2. 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;}

  1. rnav{display:none;}
  2. nav a {text-decoration:none;color:#183D46;font-size:22px;}
  3. nav li a {font-size:18px;}
  1. nav #project ul{width:80px;}
  2. 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;}

  1. nav ul{filter:aphla(opacity=80); background:#F9F6E7; background:rgba(294,246,231,0.8); important!}
  2. nav ul li:hover{background:#F9F6E7;}
  3. nav ul li { color:#183D46; position:relative;border-bottom: #909090 1px solid;}
  4. nav ul li a{font-size:14px;}
  5. nav ul li a:hover{color:#11979C;}
  6. nav #project ul {

width: 102px; margin-left: -20px; }

  1. nav #judging ul {

width: 108px; margin-left: -20px; }

  1. wetlab {

margin-left: 61px; }

  1. nav #wetlab ul {

width: 100px; margin-left: -15px; }

  1. software {

margin-left: 278px; }

  1. team {

margin-left: 32px; }

  1. nav #team ul {

width: 100px; margin-left: -22px; }

  1. humanPractices {

margin-left: 10px; }

  1. nav #humanPractices ul {

width: 129px; margin-left: 20px; }

  1. nav a:hover {color:#2F798C}
  2. overview {

text-align: center; }


  1. overview p {

padding: 0 57px; font-family: "Microsoft YaHei"; padding-top: 10px; text-align: justify; text-justify: inter-ideograph; color: #04979D; border-bottom: 2px solid #04979D; font-size: 19px;} h2{border: none; padding: 0px 27px; color: #183D46; font-family: "Microsoft YaHei"; font-weight: bold; }

  1. 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; }

  1. bottomNav a{text-decoration:none;font-family:Ebrima;color:#183D46;font-size:20px;}
  2. bottomNav a:hover{color:#2F798C;}
  3. team {

width: 74px;} /* for mainarea */

  1. 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*/

  1. bodyContent{background-color: #EEEADE;}
  2. nav{background: url(Tnavbg.jpg) no-repeat center 9%; 
   position: relative;
   width: 1131px;
  z-index: 2;
  height: 67px;
 font-family: Ebrima;
  margin: 0 auto;
   float: left;
        }
  1. nav #top-section {

background-color: transparent; }

  1. nav #project {

margin-left: 59px; }

  1. nav #judging {

margin-left: 57px;

  1. nav #wetlab {

margin-left:53px; }

  1. nav #software {

margin-left: 309px; }

  1. nav #team {

width: 57px; margin-left: 27px; }

  1. nav #humanPractices {

margin-left: 24px; }

  1. body{background-color:#183D46;}

/* for mainarea */

  1. 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"; }

  1. mainarea h2{font-family: 'Microsoft YaHei';font-weight:normal;}

.team_content #overview p {font-size: 20px; font-family: cursive;}

  1. rnav{display:none;}
  1. nav{background: url(Tnavbg.jpg) no-repeat center 100%; 
   position: relative;
   width: 1131px;
  z-index: 2;
  height: 67px;
 font-family: Ebrima;
  margin: 0 auto;
  padding-top: 99px;
   float: left;
        }
  1. Family{margin:0 auto;}
  2. 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(Post_01_BG_yuchen.png) no-repeat; }

div #JING { background:url(Post_02_BG.png) no-repeat; }

div #YUMING { background: url(Post_03_BG.png) no-repeat; }

div #KAIXUAN { background: url(Post_04_BG.png) no-repeat; }

div #DAWEI { background: url(Post_05_BG.png) 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; }


  1. 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;

}

  1. mainarea li { 
 margin-left: 30px;

}

  1. mainarea p,
  2. mainarea dl,
  3. mainarea hr,
  4. mainarea h1,
  5. mainarea h2,
  6. mainarea h3,
  7. mainarea h4,
  8. mainarea h5,
  9. mainarea h6,
  10. mainarea ol,
  11. mainarea ul,
  12. mainarea pre,
  13. mainarea table,
  14. mainarea address,
  15. mainarea fieldset,
  16. mainarea figure { 
 margin-bottom: 20px;

}

  1. globalWrapper #content .out_frame h1 {

display: block; }

  1. globalWrapper #content .team_content h1 {

display: block; }



  1. body{background-color:#EEEADE}
  2. top-section {

background-color: transparent; }

  1. topCentent{

width:1117px; margin:-8px auto; 

       padding:0;

}

  1. nav span{color:#2F798C}

.nav1{float:left;width:85px;margin-top:41px;}

  1. rnav{display:none;}
  2. nav a {text-decoration:none;color:#183D46;font-size:22px;}
  3. nav li a {font-size:15px;}
  4. project{margin-left:138px;}
  5. nav #project ul{width:80px;}
  6. nav ul {font-size:20px;padding-top:10px;width:72px;display:none;}
  7. nav #humanPractices ul{width:124px;}
  8. nav a:hover {color:#2F798C}
  9. rhome a {text-decoration:none;

color: #FECA9E; font-size: 17px;} body { background:#183D46 url(Wikibackground.jpg) no-repeat scroll 50% 0%; }

  1. 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; }

  1. bottomNav a{text-decoration:none;font-family:Ebrima;color:#183D46;font-size:20px;}
  2. bottomNav a:hover{color:#2F798C;}
  3. 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;}

  1. rnav .rnav1 {margin-top:9px;font-size: 16px;}
  2. rnav .rnav1 a {text-decoration:none;color:#F2E3C6;}
  3. rnav .rnav1 a:hover {color:#FECA9E;}
  4. rnav .rnav1 ul{width:108px;display:none;}
  5. rnav .rnav1 .rfoot{margin-bottom:10px;}
  6. rnav li a {

font-size: 10px; }

  1. rnav #home a {color:white;text-decoration:none;}
  2. rnav #home:hover a {color:red;}
  3. team {

width: 74px;}

/* for mainarea */

  1. 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"; }

Retrieved from "http://2014.igem.org/Team:HIT-Harbin/css/teamstyle.css"