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