Difference between revisions of "Team:ZJU-China/css/ZJU-stylesheet.css"

Line 1: Line 1:
−
/* global footer
+
@font-face {
−
  ========================================================================== */
+
font-family:gennifer;
 +
src: url('https://static.igem.org/mediawiki/2015/8/84/Zju-china_jennifer-webfont.eot'); /* IE9 Compat Modes */
 +
src: url('https://static.igem.org/mediawiki/2015/8/84/Zju-china_jennifer-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
 +
  url('https://static.igem.org/mediawiki/2015/8/85/Zju-china_jennifer-webfont.woff') format('woff'), /* Modern Browsers */
 +
  url('https://static.igem.org/mediawiki/2015/9/94/ZJU-CHINA_jennifer.ttf')  format('truetype'), /* Safari, Android, iOS */
 +
  url('https://static.igem.org/mediawiki/2015/0/0d/Zju-china_jennifer-webfont.svg') format('svg'); /* Legacy iOS */
 +
}
  
  
−
#gl-footer {
+
body {
−
    display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
+
background: #A7A4A1 url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);
−
    width: 100%;
+
    font-family: "gennifer", Helvetica, sans-serif;
−
    background: #fff;
+
−
    color: #666;
+
−
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+
−
    font-weight: 400;
+
−
border:2px solid #ddd;
+
−
border-radius:2em;
+
−
-moz-box-shadow: 10px 10px 5px #888888;
+
−
box-shadow: 0px 0px 2em #888888;
+
−
text-align:center;
+
−
+
 
}
 
}
  
−
#gl-footer a:link,
 
−
#gl-footer a:visited {
 
−
    color: #666;
 
−
    text-decoration: none;
 
−
}
 
  
−
#gl-footer a:hover,
+
 
−
#gl-footer a:active {
+
.shadow-hp-ov{
−
    color: #c02942;
+
background-color:#FFF;
 +
border:2px solid #ddd;
 +
padding-left:6%;
 +
padding-right:6%;
 +
margin-left:2%;
 +
margin-right:2%;
 +
-moz-box-shadow: 10px 10px 5px #888888;
 +
box-shadow: 2px 2px 5px #888888;
 +
border-radius:2em;
 
}
 
}
  
−
/* menu ============================= */
+
.shadow{
 +
border:2px solid #ddd;
 +
border-radius:2em;
 +
padding-left:3%;
 +
padding-right:3%;
 +
-moz-box-shadow: 10px 10px 5px #888888;
 +
box-shadow: 0px 0px 2em #888888;
 +
}
  
−
#gl-footer-menu {
+
article {
−
     width: 90%;     
+
     padding-top: 5px;
−
     margin-left:auto;
+
     padding-bottom: 5%;
−
margin-right:auto;
+
     padding-left: auto;
−
}
+
    padding-right:auto;
 +
    font-size: 16px;
 +
    width:70%;
 +
    min-width:600px;
 +
  }
  
−
#gl-footer-menu .gl-col {
 
−
    float: left;
 
−
    width: 20%;
 
−
}
 
  
−
#gl-footer-menu .gl-col-1 {
+
h3, h4, h5, h6 {
−
    margin-left: 0%;
+
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 
}
 
}
  
−
#gl-footer-menu .gl-col-5 {
+
h1 {
−
    margin-right: 0%;
+
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 6em;
 
}
 
}
  
−
#gl-footer-menu ul {
+
h2 {
−
     margin: 0px 0px;
+
  font-family: "gennifer", Helvetica, sans-serif;
−
text-align:center;
+
  border-bottom: none;
 +
  font-size: 2.5em;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
  text-align: center;
 +
}
 +
.hh2 {
 +
     width: 100%;
 +
    font-size: 35px;
 +
text-align: center;
 +
    font-family: "gennifer", Helvetica, sans-serif;
 
}
 
}
  
−
#gl-footer-menu li {
+
.hh2-left{
−
     font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;  
+
     width: 100%;
−
     list-style: none;
+
     font-size: 30px;
−
margin-left:12%;
+
text-align:left;
−
height:80px;
+
}
 +
.wherno{
 +
    border:2px solid #ddd;
 +
border-bottom:0px solid #ddd;
 
}
 
}
  
  
−
/* set======================== */
+
.hh3{
−
#gl-footer-menu li.footIDT,
+
    width: 100%;
−
#gl-footer-menu li.footSynenergene,
+
    border: 2px solid #ddd;
−
#gl-footer-menu li.footZJU1,
+
    color: #666;
−
#gl-footer-menu li.footZJU2,
+
    font-size: 20px;
−
#gl-footer-menu li.footZJU3,
+
padding-top:0.2em;
−
#gl-footer-menu li.footZJU4,
+
    padding-bottom: 0.2em;
−
#gl-footer-menu li.footZJU5,
+
−
#gl-footer-menu li.footZJU6,
+
−
#gl-footer-menu li.footZJU7,
+
−
#gl-footer-menu li.footZJU8
+
−
{
+
−
width:100%;
+
−
float: left;
+
−
background-repeat: no-repeat;
+
−
background-position:left;
+
−
cursor:pointer;
+
−
z-index:9999;
+
−
background-size:140px 50px;
+
−
transition-property:all;
+
−
transition-duration:0.3s;
+
−
transition-timing-function:linear;
+
−
/* Firefox 4 */
+
−
-moz-transition-property:all;
+
−
-moz-transition-duration:0.3s;
+
−
-moz-transition-timing-function:linear;
+
−
/* Safari and Chrome */
+
−
-webkit-transition-property:all;
+
−
-webkit-transition-duration:0.3s;
+
−
-webkit-transition-timing-function:linear;
+
−
/* Opera */
+
−
-o-transition-property:all;
+
−
-o-transition-duration:0.3s;
+
−
-o-transition-timing-function:linear;
+
−
 
+
 
}
 
}
  
−
#gl-footer-menu li.footIDT{
+
.hh4{
−
background-image:url(https://static.igem.org/mediawiki/2015/2/2f/IDT-Logo-0.png);
+
    width: 100%;
 +
    font-size: 30px; 
 +
padding-top:0;
 +
    padding-bottom: 0.2em;
 +
text-align: center;
 +
color: #666;
 +
border-bottom:2px solid #ddd;
 +
}
 +
.p1{
 +
text-align:justify; text-justify:inter-word;
 +
font-size:22px;
 
}
 
}
 +
.p1bord{
 +
font-size:25px;
 +
text-align: center;
 +
padding-top:0.5em;
 +
    padding-bottom: 0.5em;
 +
    padding-bottom: 0.5em;
  
−
#gl-footer-menu li.footIDT:hover{
+
}
−
background-image:url(https://static.igem.org/mediawiki/2015/0/0f/IDT-Logo-1.png);
+
.p2{
 +
text-align:justify;
 +
text-justify:inter-word;
 +
padding-left:1em;
 +
padding-right:1em;
 +
line-height:150%;
 
}
 
}
  
−
#gl-footer-menu li.footSynenergene{
+
.p3{
−
 
+
text-align:justify;
−
background-image:url(https://static.igem.org/mediawiki/2015/2/29/Synenergene-logo-0.png);
+
text-justify:inter-word;
 +
padding-left:1em;
 +
padding-right:3em;
 +
line-height:150%;
 +
}
 +
 +
.p4{
 +
text-align:justify;
 +
text-justify:inter-word;
 +
padding-left:1em;
 +
padding-right:1em;
 +
line-height:150%;
 +
font-size:20px;
 +
}
 +
.li3{
 +
text-align:justify; text-justify:inter-word;
 +
font-size:20px;
 +
font-weight:2000;
 +
padding-right:3em;
 
}
 
}
−
#gl-footer-menu li.footSynenergene:hover{
+
.li4{
−
background-image:url(https://static.igem.org/mediawiki/2015/7/77/Synenergene-logo-1.png);
+
text-align:justify; text-justify:inter-word;
 +
font-size:22px;
 +
padding-top:1em;
 +
padding-bottom:1em;
 +
 +
}
 +
.p2,.p3{
 +
font-size:20px;
 +
}
 +
.ul1{
 +
text-align:justify; text-justify:inter-word;
 +
font-size:22px;
 
}
 
}
  
−
#gl-footer-menu li.footZJU1{
+
.qanda{
−
background-image:url(https://static.igem.org/mediawiki/2015/6/6c/ZJU-logo-0.gif);
+
padding-top:0.2em;
 +
    padding-bottom: 0.2em;
 +
border-bottom: 1px solid #ddd;
 +
}
 +
.question{
 +
  font-family:"gennifer", Helvetica, sans-serif;
 +
  font-size:22px;
 
}
 
}
−
#gl-footer-menu li.footZJU1:hover{
+
.answer{
−
background-image:url(https://static.igem.org/mediawiki/2015/1/19/ZJU-logo-1.gif);
+
  font-family:"gennifer", Helvetica, sans-serif;
 +
  font-size:18px;
 
}
 
}
  
  
−
#gl-footer-menu li.footZJU2{
+
 
−
background-size:180px 50px;
+
.row {
−
background-image:url(https://static.igem.org/mediawiki/2015/9/91/ZJU-BKSY-0.gif);
+
  overflow: hidden;
 +
  position: relative;
 +
  width: 100%;
 +
  margin: 1em 0;
 +
  padding: 0;
 
}
 
}
−
#gl-footer-menu li.footZJU2:hover{
+
 
−
background-image:url(https://static.igem.org/mediawiki/2015/e/e1/ZJU-BKSY-1.gif);
+
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
 +
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 +
  padding: 0;
 
}
 
}
  
−
#gl-footer-menu li.footZJU3{
+
.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3,
−
background-image:url(https://static.igem.org/mediawiki/2015/d/d8/ZJU-JJH-0.gif);
+
.col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4,
−
}
+
.col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 {
−
#gl-footer-menu li.footZJU3:hover{
+
  margin-top: 0em;
−
background-image:url(https://static.igem.org/mediawiki/2015/8/83/ZJU-JJH-1.gif);
+
 
}
 
}
  
−
#gl-footer-menu li.footZJU4{
+
.text-col-right {
−
background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-LI-0.gif);
+
  padding-left: 2em;
 
}
 
}
−
#gl-footer-menu li.footZJU4:hover{
+
 
−
background-image:url(https://static.igem.org/mediawiki/2015/2/2d/ZJU-LI-1.gif);
+
.text-col-left {
 +
  padding-right: 2em;
 
}
 
}
  
−
#gl-footer-menu li.footZJU5{
+
.kuvateksti {
−
background-size:180px 40px;
+
  font-size: small;
−
background-image:url(https://static.igem.org/mediawiki/2015/b/b2/ZJU-NONG-0.gif);
+
  margin-top: 1em;
 +
  text-align: center;
 
}
 
}
−
#gl-footer-menu li.footZJU5:hover{
+
.kuvateksti-left {
−
background-image:url(https://static.igem.org/mediawiki/2015/d/d3/ZJU-NONG-1.gif);
+
  font-size: small;
 +
  margin-top: 1em;
 +
  text-align: center;
 +
  padding-right:5em;
 
}
 
}
−
 
+
.img-center {
−
#gl-footer-menu li.footZJU6{
+
  text-align: center;
−
background-size:180px 50px;
+
  margin-top: 0;
−
background-image:url(https://static.igem.org/mediawiki/2015/3/36/ZJU-SKSY-0.gif);
+
  width:100%;
 
}
 
}
−
#gl-footer-menu li.footZJU6:hover{
+
.img-center-left{
−
background-image:url(https://static.igem.org/mediawiki/2015/b/b8/ZJU-SKSY-1.gif);
+
  text-align: center;
 +
  margin-top: 0;
 +
  width:100%;
 +
  padding-right:5em;
 
}
 
}
  
−
#gl-footer-menu li.footZJU7{
+
.img-center-pad{
−
background-image:url(https://static.igem.org/mediawiki/2015/6/65/ZJU-SKY-0.gif);
+
  text-align: center;
 +
  margin-top: 0;
 +
  width:100%;
 +
  padding-left:3px;
 +
  padding-right:3px;
 
}
 
}
−
#gl-footer-menu li.footZJU7:hover{
+
.img-table {
−
background-image:url(https://static.igem.org/mediawiki/2015/d/df/ZJU-SKY-1.gif);
+
  text-align: center;
 +
  margin-top: 0;
 +
  width:100%;
 +
  height:400px;
 
}
 
}
  
−
#gl-footer-menu li.footZJU8{
+
 
−
background-image:url(https://static.igem.org/mediawiki/2015/4/44/ZJU-YXY-0.gif);
+
.img-center .img-responsive {
 +
  display: inline;
 
}
 
}
−
#gl-footer-menu li.footZJU8:hover{
+
 
−
background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-YXY-1.gif);
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.apph1{
 +
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 1.75em;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
  font-weight:1300px;
 
}
 
}
  
 +
.apph2{
 +
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 1.5em;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
}
  
 +
.apph3{
 +
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 1.75em;
  
 +
  text-align:center;
 +
}
  
 +
.appp1{
 +
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 25px;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
}
  
 +
.textcenter{
 +
    text-align: center;
 +
}
 +
.textleft{
 +
    text-align: left;
 +
}
 +
.textright{
 +
    text-align: right;
 +
}
 +
.bbar{
 +
position:relative;
 +
width:100%;
 +
max-width:500px;
 +
margin-top:-50px;
 +
}
  
−
/* copyright ======================== */
+
.hpover-p{
 +
text-align:justify;
 +
text-justify:inter-word;
 +
line-height:150%;
 +
font-size: 18px;
 +
font-family: "gennifer", Helvetica, sans-serif;
 +
}
  
−
#gl-footer-copyright {
+
.in-h{
−
    width: 90%;
+
text-align:center;
−
    margin: 0 auto;
+
line-height:175%;
−
    padding: 8px 0 32px 0;
+
font-size: 25px;
−
    border-top: 1px solid #ccc;
+
padding-top:0;
 +
  padding-bottom:0;
 
}
 
}
  
−
#gl-footer-copyright .gl-col1 {
+
.div-img{
−
    display: block;
+
  width:100%;
−
    float: left;
+
  /* background-image:url(https://static.igem.org/mediawiki/2015/2/26/Background.png);*/
−
    margin: 0 0 6px 24px;
+
  background-color:#fff;
−
    font-size: 12px;
+
  background-position:left;
−
    line-height: 14px;
+
  background-size:100% 100%;
 +
  background-repeat: no-repeat;
 +
  border:2px solid #ddd;
 +
 
 +
  -moz-box-shadow: 10px 10px 5px #888888;
 +
  box-shadow: 2px 2px 5px #888888;
 +
  border-radius:2em;
 +
  margin-top:7px;
 
}
 
}
  
−
#gl-footer-copyright .gl-col1 span {
+
.zju-china{
−
    display: block;
+
      text-align: center;
−
    float: left;
+
      margin-top: 0;
−
    padding: 4px 0;
+
      width:100%;
 
}
 
}
  
 +
.word-under{
 +
      text-align:center;
 +
      margin-top: 0;
 +
      width:100%;
 +
}
 +
.img-left {
 +
  width:100%;
 +
  padding-left:10%;
 +
}
 +
.img-right {
 +
  width:100%;
 +
  padding-right:10%;
 +
}
 +
 +
.img-under {
 +
  width:30%;
  
−
#gl-footer-copyright .gl-col2 {
 
−
    display: block;
 
−
    float: right;
 
−
    margin: 0 24px 6px 0;
 
 
}
 
}
 +
.div-img-h{
 +
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 3.5em;
 +
  padding-top:0em;
 +
  padding-bottom: 0em;
 +
  text-align: left;
  
−
#gl-footer-copyright .gl-col2 li {
 
−
    display: block;
 
−
    float: left;
 
−
    color: #666;
 
−
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; /* m8 override */
 
−
    font-size: 12px;
 
−
    line-height: 14px;
 
−
    font-weight: 400; /* m8 override */
 
−
    list-style: none;
 
 
}
 
}
  
−
#gl-footer-copyright .gl-col2 a {
+
.div-img-p{
−
    display: block;
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    float: left;
+
  border-bottom: none;
−
    padding: 4px 0;
+
  font-size: 18px;
 +
 
 +
  }
 +
 
 +
.img-up{
 +
      text-align:center;
 +
      margin-top: 0;
 +
      width:35%;
 +
}
 +
.img-title{
 +
      margin-top: 0;
 +
      width:100%;
 +
 
 
}
 
}
  
−
#gl-footer-copyright .gl-col2 li:after {
+
.img-in{
−
    display: block;
+
      margin-top: 0;
−
    float: left;
+
      width:80%;
−
    content: '|';
+
}
−
    margin: 4px 10px;
+
.hpoverview{
 +
      text-align:center;
 +
      margin-top: 0;
 +
      width:100%;
 +
  padding-top:2%
 
}
 
}
  
−
#gl-footer-copyright .gl-col2 li.gl-last:after {
+
.p-in{
−
    content: '';
+
text-align:justify;
−
    margin: 0;
+
text-justify:inter-word;
 +
font-size:20px;
 +
line-height:150%;
 
}
 
}

Revision as of 03:33, 7 September 2015

@font-face { font-family:gennifer; src: url('https://static.igem.org/mediawiki/2015/8/84/Zju-china_jennifer-webfont.eot'); /* IE9 Compat Modes */ src: url('https://static.igem.org/mediawiki/2015/8/84/Zju-china_jennifer-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 

 url('https://static.igem.org/mediawiki/2015/8/85/Zju-china_jennifer-webfont.woff') format('woff'), /* Modern Browsers */ 
 url('https://static.igem.org/mediawiki/2015/9/94/ZJU-CHINA_jennifer.ttf')  format('truetype'), /* Safari, Android, iOS */ 
 url('https://static.igem.org/mediawiki/2015/0/0d/Zju-china_jennifer-webfont.svg') format('svg'); /* Legacy iOS */

}


body { background: #A7A4A1 url(ZJU-background.jpg); 

    font-family: "gennifer", Helvetica, sans-serif;

}


.shadow-hp-ov{ background-color:#FFF; border:2px solid #ddd; padding-left:6%; padding-right:6%; margin-left:2%; margin-right:2%; -moz-box-shadow: 10px 10px 5px #888888; box-shadow: 2px 2px 5px #888888; border-radius:2em; }

.shadow{ border:2px solid #ddd; border-radius:2em; padding-left:3%; padding-right:3%; -moz-box-shadow: 10px 10px 5px #888888; box-shadow: 0px 0px 2em #888888; }

article { 

   padding-top: 5px;
   padding-bottom: 5%;
   padding-left: auto;
   padding-right:auto;
   font-size: 16px;
   width:70%;
   min-width:600px;
 }


h3, h4, h5, h6 { 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 padding-top:1em;
 padding-bottom: 1em;

}

h1 { 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 6em;

}

h2 { 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 2.5em;
 padding-top:1em;
 padding-bottom: 1em;
 text-align: center;

} .hh2 { 

   width: 100%;
   font-size: 35px;

text-align: center; 

   font-family: "gennifer", Helvetica, sans-serif;

}

.hh2-left{ 

   width: 100%;
   font-size: 30px;

text-align:left; } .wherno{ 

   border:2px solid #ddd;

border-bottom:0px solid #ddd; }


.hh3{ 

   width: 100%;
   border: 2px solid #ddd;
   color: #666;
   font-size: 20px;

padding-top:0.2em; 

   padding-bottom: 0.2em;

}

.hh4{ 

   width: 100%;
   font-size: 30px;

padding-top:0; 

   padding-bottom: 0.2em;

text-align: center; color: #666; border-bottom:2px solid #ddd; } .p1{ 

text-align:justify; text-justify:inter-word;
font-size:22px;

} .p1bord{ 

font-size:25px;
text-align: center;
	padding-top:0.5em;
   padding-bottom: 0.5em;
   padding-bottom: 0.5em;

} .p2{ 

text-align:justify;
text-justify:inter-word;
padding-left:1em;
padding-right:1em;
line-height:150%;

}

.p3{ 

text-align:justify;
text-justify:inter-word;
padding-left:1em;
padding-right:3em;
line-height:150%;
}

.p4{
text-align:justify;
text-justify:inter-word;
padding-left:1em;
padding-right:1em;
line-height:150%;
font-size:20px;
}

.li3{ 

text-align:justify; text-justify:inter-word;
font-size:20px;
font-weight:2000;
padding-right:3em;

} .li4{ 

text-align:justify; text-justify:inter-word;
font-size:22px;
padding-top:1em;
padding-bottom:1em;

} .p2,.p3{ font-size:20px; } .ul1{ 

text-align:justify; text-justify:inter-word;
font-size:22px;

}

.qanda{ padding-top:0.2em; 

   padding-bottom: 0.2em;

border-bottom: 1px solid #ddd; } .question{ 

 font-family:"gennifer", Helvetica, sans-serif;
 font-size:22px;

} .answer{ 

 font-family:"gennifer", Helvetica, sans-serif;
 font-size:18px;

}


.row { 

 overflow: hidden;
 position: relative;
 width: 100%;
 margin: 1em 0;
 padding: 0;

}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 

 padding: 0;

}

.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3, .col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4, .col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 { 

 margin-top: 0em;

}

.text-col-right { 

 padding-left: 2em;

}

.text-col-left { 

 padding-right: 2em;

}

.kuvateksti { 

 font-size: small;
 margin-top: 1em;
 text-align: center;

} .kuvateksti-left { 

 font-size: small;
 margin-top: 1em;
 text-align: center;
 padding-right:5em;

} .img-center { 

 text-align: center;
 margin-top: 0;
 width:100%;

} .img-center-left{ 

 text-align: center;
 margin-top: 0;
 width:100%;
 padding-right:5em;

}

.img-center-pad{ 

 text-align: center;
 margin-top: 0;
 width:100%;
 padding-left:3px;
 padding-right:3px;

} .img-table { 

 text-align: center;
 margin-top: 0;
 width:100%;
 height:400px;

}


.img-center .img-responsive { 

 display: inline;

}




.apph1{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 1.75em;
 padding-top:1em;
 padding-bottom: 1em;
 font-weight:1300px;

}

.apph2{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 1.5em;
 padding-top:1em;
 padding-bottom: 1em;

}

.apph3{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 1.75em;

 text-align:center;

}

.appp1{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 25px;
 padding-top:1em;
 padding-bottom: 1em;

}

.textcenter{ 

   text-align: center;

} .textleft{ 

   text-align: left;

} .textright{ 

   text-align: right;

} .bbar{ position:relative; width:100%; max-width:500px; margin-top:-50px; }

.hpover-p{ 

text-align:justify;
text-justify:inter-word;
line-height:150%;
font-size: 18px;
font-family: "gennifer", Helvetica, sans-serif;

}

.in-h{ 

text-align:center;
line-height:175%;
font-size: 25px;
padding-top:0;
 padding-bottom:0;

}

.div-img{ 

  width:100%;
  /* background-image:url(https://static.igem.org/mediawiki/2015/2/26/Background.png);*/
  background-color:#fff;
  background-position:left;
  background-size:100% 100%;
  background-repeat: no-repeat; 
  border:2px solid #ddd;

  -moz-box-shadow: 10px 10px 5px #888888; 
  box-shadow: 2px 2px 5px #888888; 
  border-radius:2em;
  margin-top:7px;

}

.zju-china{ 

     text-align: center;
     margin-top: 0;
     width:100%;

}

.word-under{ 

     text-align:center;
     margin-top: 0;
     width:100%;

} .img-left { 

 width:100%;
 padding-left:10%;

} .img-right { 

 width:100%;
 padding-right:10%;

}

.img-under { 

 width:30%;

} .div-img-h{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 3.5em;
 padding-top:0em;
 padding-bottom: 0em;
 text-align: left;

}

.div-img-p{ 

 font-family: "gennifer", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 18px;
 
 }

.img-up{ 

     text-align:center;
     margin-top: 0;
     width:35%;

} .img-title{ 

     margin-top: 0;
     width:100%;

}

.img-in{ 

     margin-top: 0;
     width:80%;

} .hpoverview{ 

     text-align:center;
     margin-top: 0;
     width:100%;

padding-top:2% }

.p-in{ 

text-align:justify;
text-justify:inter-word;
font-size:20px;
line-height:150%;

}