Team:ZJU-China/css/ZJU-stylesheet.css

@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();

       font-family: "gennifer", Helvetica, sans-serif;
       max-width:1440px
     

}

.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; background-color:#FFF; }

article {

   padding-top: 5px;

   margin-left: auto;
   margin-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;
 text-align: center;

}

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;

} .h-device{

   width: 100%;
   color: #666;
   font-size: 26px;  
   padding-top:0.2em;
   padding-bottom: 0.2em;

text-align: left; } .hh4{

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

padding-top:0;

   padding-bottom: 0.2em;

text-align: center; color: #222; border-bottom:2px solid #000; }

.hh4-left{

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

padding-top:0;

   padding-bottom: 0.2em;

text-align:left; color: #222; border-bottom:2px solid #000; } .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;
}

.li1{

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

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

}

.ul4{

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%;

}

.img-center .img-responsive {

 display: inline;

}

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

}

.Collaboration-pin{

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

}

.Collaboration-pout{

text-align:justify; 
text-justify:inter-word;
font-size:22px;
line-height:130%;	
padding-top:10px;
padding-bottom:1em;

}

.Collaboration-h{

   width: 100%;
   color: #666;
   font-size: 30px;

padding-top:10px; padding-bottom:10px; border-top:2px solid #aaa; text-align:center; }

.wherno{

   border:2px solid #ddd;

border-bottom:0px solid #aaa; }

.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: 4em;
   padding-top: 0em;
   padding-bottom: 0em;
   text-align: center;
   margin-top: -10px;
   color: #001265;

} .img-attribution{

  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;

}

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

}

.row2{

 overflow: hidden;
 position: relative;
 width: 100%;
 margin: 1em 0;
 padding-top:20px;
 padding-bottom:20px;

}

.share-ul{

font-size:22px;

}

.card-h1{

   border: 2px solid #ddd;
   text-align: center;
   font-size:30px;

}

.card-h2{

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

text-align: center;

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

padding-top:20px; }

.card-h3{

   line-height: 150%;
   padding-top: 1em;
   border-bottom: 2px solid #ddd;
   font-size:30px;

} .row-button{

   width: 80%;
   margin: 0 auto;

}

.div-row-in{

   position: relative;
   float: left;
   text-align: center

}

@-webkit-keyframes bigAssButtonPulse{from{background-color:#749a02;-webkit-box-shadow:0 0 25px #333;} 50%{background-color:#91bd09;-webkit-box-shadow:0 0 50px #91bd09;} to{background-color:#749a02;-webkit-box-shadow:0 0 25px #333;} } @-webkit-keyframes greenPulse{from{background-color:#57C299;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#6DC0A0;-webkit-box-shadow:0 0 18px #91bd09;} to{background-color:#57C299;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes bluePulse{from{background-color:#5B74C5;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#788BC8;-webkit-box-shadow:0 0 18px #2daebf;} to{background-color:#5B74C5;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes redPulse{from{background-color:#F28DA7;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#F7ADC0;-webkit-box-shadow:0 0 18px #e33100;} to{background-color:#F28DA7;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes purplePulse{from{background-color:#9962C3;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#A882C6;-webkit-box-shadow:0 0 18px #a9014b;} to{background-color:#9962C3;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes magentaPulse{from{background-color:#630030;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#a9014b;-webkit-box-shadow:0 0 18px #a9014b;} to{background-color:#630030;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes orangePulse{from{background-color:#d45500;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#ff5c00;-webkit-box-shadow:0 0 18px #ff5c00;} to{background-color:#d45500;-webkit-box-shadow:0 0 9px #333;} } @-webkit-keyframes orangellowPulse{from{background-color:#fc9200;-webkit-box-shadow:0 0 9px #333;} 50%{background-color:#ffb515;-webkit-box-shadow:0 0 18px #ffb515;} to{background-color:#fc9200;-webkit-box-shadow:0 0 9px #333;} }

.button{ margin-right:0.5em; border-radius:2em; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; width: 100%; height: 100%; padding: 3px 17px; font-family: "gennifer", Helvetica, sans-serif; font-size: 40px; color: #fff; } .green.button{-webkit-animation-name:greenPulse;-webkit-animation-duration:4s;} .blue.button{-webkit-animation-name:bluePulse;-webkit-animation-duration:4s;} .red.button{-webkit-animation-name:redPulse;-webkit-animation-duration:4s;} .magenta.button{-webkit-animation-name:magentaPulse;-webkit-animation-duration:4s;} .orange.button{-webkit-animation-name:orangePulse;-webkit-animation-duration:4s;} .orangellow.button{-webkit-animation-name:orangellowPulse;-webkit-animation-duration:4s;} .purple.button{-webkit-animation-name:purplePulse;-webkit-animation-duration:4s;}