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

 
(44 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
}
 
}
  
−
/* clearfix ========================= */
 
  
−
.cf:before,
+
body {
−
.cf:after {
+
background: #A7A4A1 url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);
−
    content: ' ';
+
        font-family: "gennifer", Helvetica, sans-serif;
−
    display: table;
+
        max-width:1440px
 +
     
 
}
 
}
  
−
.cf:after {
 
−
    clear: both;
 
−
}
 
  
−
.cf,
+
 
−
.trigger-haslayout {
+
.shadow-hp-ov{
−
    zoom: 1;
+
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;
 
}
 
}
  
−
/* eu cookie law popup ============== */
+
.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;
 +
}
  
−
#EUCookie p {
+
article {
−
     z-index: 0!important; /* place it above the global header */
+
     padding-top: 5px;
−
}
+
  
−
/* global header
+
    margin-left: auto;
−
  ========================================================================== */
+
    margin-right:auto;
 +
    font-size: 16px;
 +
    width:70%;
 +
    min-width:600px;
 +
  }
  
−
#gl-outer-wrapper {
+
 
−
    display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
+
h3, h4, h5, h6 {
−
    position: relative; /* enables precision centering on noscript message */
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    width: 100%;
+
  border-bottom: none;
−
    font-family: "gennifer", Helvetica, sans-serif;
+
  padding-top:1em;
 +
  padding-bottom: 1em;
 
}
 
}
  
−
#gl-inner-wrapper {
+
h1 {
−
    overflow: hidden;
+
  font-family: "gennifer", Helvetica, sans-serif;
 +
  border-bottom: none;
 +
  font-size: 6em;
 +
  text-align: center;
 
}
 
}
  
−
#gl-header * {
+
h2 {
−
    margin: 0;
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    padding: 0;
+
  border-bottom: none;
−
background:none;
+
  font-size: 2.5em;
−
    z-index: 999999999;
+
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
  text-align: center;
 
}
 
}
−
 
+
.hh2 {
−
#gl-header,
+
−
#gl-header-bg {
+
−
    display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
+
 
     width: 100%;
 
     width: 100%;
−
     height: 70px; /* should always match gl_HeaderFullHeight in /common/javascript/gl-head-scripts.en.js */
+
     font-size: 35px;
−
    background: #222;
+
text-align: center;
−
    z-index: 999999999;
+
     font-family: "gennifer", Helvetica, sans-serif;
−
     transition: height 0.3s ease;
+
 
}
 
}
  
−
#gl-header-bg,
+
.hh2-left{
−
#gl-header-offset {
+
     width: 100%;
−
     display: none;
+
     font-size: 30px;
−
     background: #222;
+
text-align:left;
 
}
 
}
−
 
+
.wherno{
−
#gl-header.gl-header-fixed,
+
     border:2px solid #ddd;
−
#gl-header-bg.gl-header-fixed {
+
border-bottom:0px solid #ddd;
−
     display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
+
−
    position: fixed;
+
−
    top: 0;
+
−
    left: 0;
+
 
}
 
}
  
−
#gl-header.gl-header-fixed {
 
−
    background: none; /* background only needed here in non-js environments */
 
−
}
 
  
−
#gl-header-bg.gl-header-fixed {
+
.hh3{
−
     z-index: 999999998
+
    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;
 
}
 
}
  
−
#gl-header-offset.gl-header-fixed {
+
.hh4-left{
−
    display: block;
+
 
     width: 100%;
 
     width: 100%;
−
     height: 70px;
+
     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;
  
−
.gl-anchor {
+
}
−
    display: block;
+
.p2{
−
    box-sizing: border-box;
+
text-align:justify;
−
    content: ' ';
+
text-justify:inter-word;
−
    height: 60px; /* should always match gl_HeaderOffset in /common/javascript/gl-head-scripts.en.js */
+
padding-left:1em;
−
    margin: -60px 0 0;
+
padding-right:1em;
−
    overflow: visible;
+
line-height:150%;
 
}
 
}
  
−
/* variations ======================= */
+
.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;
 +
}
  
−
body.gl-header-nocompact #gl-header {
+
.li1{
−
    position: static !important;
+
text-align:justify; text-justify:inter-word;
−
    height: 70px !important;
+
font-size:19px;
−
    background: #222;
+
 
}
 
}
−
 
+
.li3{
−
body.gl-header-always-compact-nofooter #gl-outer-wrapper {
+
text-align:justify; text-justify:inter-word;
−
    height: 100%; /* enables precision centering on noscript message without distorting the page's vertical height */
+
font-size:20px;
 +
font-weight:2000;
 +
padding-right:3em;
 
}
 
}
−
 
+
.li4{
−
body.gl-header-always-compact #gl-header,
+
text-align:justify; text-justify:inter-word;
−
body.gl-header-always-compact #gl-header.gl-header-fixed,
+
font-size:22px;
−
body.gl-header-always-compact #gl-header-bg.gl-header-fixed,
+
padding-top:1em;
−
body.gl-header-always-compact-nofooter #gl-header,
+
padding-bottom:1em;
−
body.gl-header-always-compact-nofooter #gl-header.gl-header-fixed,
+
−
body.gl-header-always-compact-nofooter #gl-header-bg.gl-header-fixed {
+
−
    position: static !important;
+
−
    height: 42px !important;
+
−
    background: #222;
+
 
}
 
}
−
 
+
.p2,.p3{
−
body.gl-header-nocompact #gl-header-bg,
+
font-size:20px;
−
body.gl-header-nocompact #gl-header-offset,
+
−
body.gl-header-always-compact #gl-header-bg,
+
−
body.gl-header-always-compact #gl-header-offset,
+
−
body.gl-header-always-compact #gl-header-bg.gl-header-fixed,
+
−
body.gl-header-always-compact #gl-header-offset.gl-header-fixed,
+
−
body.gl-header-always-compact-nofooter #gl-header-bg,
+
−
body.gl-header-always-compact-nofooter #gl-header-offset,
+
−
body.gl-header-always-compact-nofooter #gl-header-bg.gl-header-fixed,
+
−
body.gl-header-always-compact-nofooter #gl-header-offset.gl-header-fixed {
+
−
    display: none;
+
 
}
 
}
−
 
+
.ul1{
−
body.gl-header-no-submenus #gl-header .gl-open .gl-submenu {
+
text-align:justify; text-justify:inter-word;
−
    top: -900px !important;
+
font-size:22px;
−
    left: 0;
+
 
}
 
}
  
−
body.gl-footer-compact #gl-footer-menu {
+
.ul4{
−
    display: none;
+
text-align:justify; text-justify:inter-word;
 +
font-size:22px;
 
}
 
}
−
 
+
.qanda{
−
body.gl-footer-compact #gl-footer-copyright {
+
padding-top:0.2em;
−
     border-top: none;
+
     padding-bottom: 0.2em;
 +
border-bottom: 1px solid #ddd;
 
}
 
}
−
 
+
.question{
−
/* top ============================== */
+
  font-family:"gennifer", Helvetica, sans-serif;
−
 
+
  font-size:22px;
−
#gl-header-top {
+
}
−
    position: relative;
+
.answer{
−
    width: 100%;
+
  font-family:"gennifer", Helvetica, sans-serif;
−
    min-width: 998px;
+
  font-size:18px;
−
    height: 30px;
+
−
    margin: 0 auto;
+
−
    opacity: 1;
+
−
    color: #444; /* m8 override */
+
−
    font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
+
−
    font-size: 12px; /* m8 override */
+
−
    line-height: 14px; /* m8 override */
+
−
    font-weight: 400; /* m8 override */
+
−
    text-align: left; /* quirks mode */
+
−
    transition: all 0.3s ease;
+
 
}
 
}
  
−
/* bottom =========================== */
 
  
−
#gl-header-bottom {
 
−
    width: 100%;
 
−
    height: 70px;
 
−
    margin: 0 auto ;
 
  
 +
.row {
 +
  overflow: hidden;
 +
  position: relative;
 +
  width: 100%;
 +
  margin: 1em 0;
 +
  padding: 0;
 
}
 
}
  
−
#gl-logo {
+
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
−
    float: left;
+
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
−
    width: 220px;
+
  padding: 0;
−
margin-left:5%;
+
 
}
 
}
  
−
#gl-logo a {
+
.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3,
−
    display: block;
+
.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;
 
}
 
}
  
−
#gl-logo img {
+
.text-col-right {
−
    box-sizing: border-box;
+
  padding-left: 2em;
−
    border: none; /* ie */
+
 
}
 
}
  
−
#gl-logo-red {
+
.text-col-left {
−
    display: block;
+
  padding-right: 2em;
−
    float: left;
+
−
    width: 48px;
+
−
    height: 50px;
+
−
    transition: all 0.3s ease;
+
 
}
 
}
  
−
#gl-logo-ZJU {
+
.kuvateksti {
−
    display: block;
+
  font-size: small;
−
    float: left;
+
  margin-top: 1em;
−
    width: 160px;
+
  text-align: center;
−
    height: 22px;
+
−
    margin: 8px 0 0 6px;
+
−
    transition: all 0.3s ease;
+
 
}
 
}
−
 
+
.kuvateksti-left {
−
#gl-logo-MEETIGEM {
+
  font-size: small;
−
    display: block;
+
  margin-top: 1em;
−
    float: left;
+
  text-align: center;
−
    width: 160px;
+
  padding-right:5em;
−
    height: 6px;
+
−
    margin: 6px 0 0 6px;
+
−
    opacity: 1;
+
−
    transition: all 0.3s ease;
+
 
}
 
}
−
/* global menu
+
.img-center {
−
  ========================================================================== */
+
  text-align: center;
−
 
+
  margin-top: 0;
−
#gl-menu {
+
  width:100%;
−
    float: right;
+
−
    transition: all 0.3s ease;
+
 
}
 
}
−
 
+
.img-center-left{
−
#gl-menu-divider {
+
  text-align: center;
−
    float: left;
+
  margin-top: 0;
−
    height: 33px;
+
  width:100%;
−
    margin: 12px 0 0 0;
+
  padding-right:5em;
−
    border-left: 1px solid #444;
+
 
}
 
}
  
−
#gl-menu .gl-has-submenu {
+
.img-center-pad{
−
    float: left;
+
  text-align: center;
 +
  margin-top: 0;
 +
  width:100%;
 +
  padding-left:3px;
 +
  padding-right:3px;
 +
}
 +
.img-table {
 +
  text-align: center;
 +
  margin-top: 0;
 +
  width:100%;
 
}
 
}
  
−
/* tabs ============================= */
 
  
−
#gl-menu .gl-submenu-wrapper {
+
.img-center .img-responsive {
−
    display: block;
+
  display: inline;
−
    box-sizing: border-box;
+
−
    height: 57px;
+
−
    padding: 12px 16px 0 16px;
+
−
    border-top: 3px solid #222;
+
−
    color: #fff;
+
−
    font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
+
−
    font-size: 16px;
+
−
    line-height: 24px;
+
−
    font-weight: 400; /* m8 override */
+
−
    text-decoration: none;
+
−
    cursor: pointer;
+
 
}
 
}
  
−
#gl-outer-wrapper.gl-es #gl-menu .gl-submenu-wrapper,
 
−
#gl-outer-wrapper.gl-ja #gl-menu .gl-submenu-wrapper,
 
−
#gl-outer-wrapper.gl-fr #gl-menu .gl-submenu-wrapper,
 
−
#gl-outer-wrapper.gl-ru #gl-menu .gl-submenu-wrapper {
 
−
    font-size: 15px !important; /* prevents word wrap */
 
−
}
 
  
−
#gl-menu .gl-open .gl-submenu-wrapper {
+
.qanda{
−
    border-top: 3px solid #c02942;
+
padding-top:0.2em;
−
     background: #333;
+
     padding-bottom: 0.2em;
−
    color: #fff;
+
border-bottom: 1px solid #ddd;
 
}
 
}
−
 
+
.question{
−
#gl-menu #gl-menu-search.gl-open .gl-submenu-wrapper {
+
  font-family:"gennifer", Helvetica, sans-serif;
−
    background: #666;
+
  font-size:22px;
 
}
 
}
−
 
+
.answer{
−
#gl-menu .gl-has-submenu > ul > li {
+
  font-family:"gennifer", Helvetica, sans-serif;
−
    display: block;
+
  font-size:18px;
−
    float: left;
+
−
    list-style: none;
+
 
}
 
}
  
−
/* submenu ========================== */
 
  
−
#gl-menu .gl-submenu {
+
.Collaboration-pin{
−
    position: absolute;
+
text-align:justify; text-justify:inter-word;
−
    width: 100%;
+
font-size:24px;
−
    top: -900px;
+
line-height:150%;
−
    left: 0;
+
−
    background: #333;
+
 
}
 
}
  
−
#gl-menu .gl-open .gl-submenu {
+
.Collaboration-pout{
−
    top: 87px;
+
text-align:justify;
−
    left: 0;
+
text-justify:inter-word;
 +
font-size:22px;
 +
line-height:130%;
 +
padding-top:10px;
 +
padding-bottom:1em;
 
}
 
}
  
−
#gl-menu .gl-hover:hover {
+
.Collaboration-h{
−
    background: #444;
+
−
}
+
−
 
+
−
#gl-menu .gl-col-wrapper {
+
−
    display: table;
+
 
     width: 100%;
 
     width: 100%;
−
     margin: 0 auto;
+
     color: #666;
−
     padding: 16px 0;
+
     font-size: 30px;
 +
padding-top:10px;
 +
padding-bottom:10px;
 +
border-top:2px solid #aaa;
 +
text-align:center;
 
}
 
}
  
−
#gl-menu .gl-col {
+
.wherno{
−
     display: table-cell;
+
     border:2px solid #ddd;
−
    box-sizing: border-box;
+
border-bottom:0px solid #aaa;
−
    padding: 12px 24px;
+
−
    border-right: 1px solid #545454;
+
 
}
 
}
  
−
#gl-menu .gl-col div{
 
−
    width:100%;
 
−
padding: 12px 24px;
 
−
color: #ddd;
 
−
}
 
  
−
#gl-menu .gl-col div:hover,
 
−
#gl-menu .gl-col div:active {
 
−
background: #444;
 
−
}
 
−
#gl-menu .gl-col.gl-last {
 
−
    border: none;
 
−
}
 
  
−
#gl-menu .gl-col a:link,
+
.apph1{
−
#gl-menu .gl-col a:visited {
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    color: #ddd;
+
  border-bottom: none;
−
    text-decoration: none;
+
  font-size: 1.75em;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 +
  font-weight:1300px;
 
}
 
}
  
−
#gl-menu .gl-col a:hover,
+
.apph2{
−
#gl-menu .gl-col a:active {
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    color: #fff;
+
  border-bottom: none;
−
    text-decoration: none;
+
  font-size: 1.5em;
 +
  padding-top:1em;
 +
  padding-bottom: 1em;
 
}
 
}
  
−
#gl-menu .gl-col ul,
+
.apph3{
−
#gl-menu .gl-col li {
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    display: block;
+
  border-bottom: none;
−
    padding: 0; /* m8 override */
+
  font-size: 1.75em;
−
    list-style: none;
+
−
}
+
  
−
#gl-menu .gl-col ul li a {
+
  text-align:center;
−
    display: block;
+
−
    margin: 0 0 0 32px;
+
−
    padding: 6px 0;
+
−
    font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
+
−
    font-size: 14px;
+
−
    line-height: 16px;
+
−
    font-weight: 300;
+
 
}
 
}
  
−
/* submenu headers ================== */
+
.appp1{
−
 
+
  font-family: "gennifer", Helvetica, sans-serif;
−
#gl-menu .gl-col > li {
+
  border-bottom: none;
−
    color: #ddd;
+
  font-size: 25px;
−
    font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
+
  padding-top:1em;
−
    font-size: 16px;
+
  padding-bottom: 1em;
−
    line-height: 24px;
+
−
    font-weight: 600;
+
 
}
 
}
  
−
#gl-menu .gl-col > li > a {
+
.textcenter{
−
     display: block;
+
     text-align: center;
 
}
 
}
−
 
+
.textleft{
−
#gl-menu .gl-col > li > a:link,
+
    text-align: left;
−
#gl-menu .gl-col > li > a:visited {
+
}
−
    color: #ddd;
+
.textright{
 +
    text-align: right;
 +
}
 +
.bbar{
 +
position:relative;
 +
width:100%;
 +
max-width:500px;
 +
margin-top:-50px;
 
}
 
}
  
−
#gl-menu .gl-col > li > a:hover,
+
.hpover-p{
−
#gl-menu .gl-col > li > a:active {
+
text-align:justify;
−
    color: #fff;
+
text-justify:inter-word;
 +
line-height:150%;
 +
font-size: 18px;
 +
font-family: "gennifer", Helvetica, sans-serif;
 
}
 
}
  
−
#gl-menu .gl-col > li > ul {
+
.in-h{
−
    display: block;
+
text-align:center;
−
    margin: 6px 0 0 0;
+
line-height:175%;
 +
font-size: 25px;
 +
padding-top:0;
 +
  padding-bottom:0;
 
}
 
}
  
−
/* submenu footer =================== */
+
.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;
  
−
#gl-menu .gl-col-footer {
+
  -moz-box-shadow: 10px 10px 5px #888888;  
−
    font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
+
  box-shadow: 2px 2px 5px #888888;  
−
    font-size: 11px;
+
  border-radius:2em;
−
    line-height: 13px;
+
  margin-top:7px;
−
    font-weight: 400; /* m8 override */
+
−
    letter-spacing: 2px;
+
−
    text-transform: uppercase;
+
−
    text-align: center;
+
 
}
 
}
  
−
#gl-menu .gl-col-footer a:link,
+
.zju-china{
−
#gl-menu .gl-col-footer a:visited {
+
      text-align: center;
−
    display: block;
+
      margin-top: 0;
−
    padding: 12px 0;
+
      width:100%;
−
    background: #222;
+
−
    color: #eee;
+
−
    text-decoration: none;
+
 
}
 
}
  
−
#gl-menu .gl-col-footer a:hover,
+
.word-under{
−
#gl-menu .gl-col-footer a:active {
+
      text-align:center;
−
    background: #111;
+
      margin-top: 0;
−
    color: #fff;
+
      width:100%;
 
}
 
}
−
 
+
.img-left {
−
/* submenu icons ==================== */
+
  width:100%;
−
 
+
  padding-left:10%;
−
#gl-menu .gl-icon,
+
}
−
#gl-menu .gl-rtall,
+
.img-right {
−
#gl-footer .gl-icon {
+
  width:100%;
−
    display: block;
+
  padding-right:10%;
−
    box-sizing: border-box;
+
−
    float: left;
+
−
    width: 24px;
+
−
    height: 24px;
+
−
    margin: 0 8px 24px 0;
+
−
    background: url('/common/images/gl-menu-icons.png') no-repeat;
+
−
    font-size: 0;
+
−
    line-height: 0;
+
−
    vertical-align: top;
+
 
}
 
}
  
−
#gl-menu .gl-r1-c1 { background-position: 0 0; }
+
.img-under {
−
#gl-menu .gl-r1-c2 { background-position: -24px 0; }
+
  width:30%;
−
#gl-menu .gl-r1-c3 { background-position: -48px 0; }
+
−
#gl-menu .gl-r1-c4 { background-position: -72px 0; }
+
−
#gl-menu .gl-r1-c5 { background-position: -96px 0; }
+
−
#gl-menu .gl-r1-c6 { background-position: -120px 0; }
+
−
#gl-menu .gl-r1-c7 { background-position: -144px 0; }
+
−
#gl-menu .gl-r1-c8 { background-position: -168px 0; }
+
−
#gl-menu .gl-r1-c9 { background-position: -192px 0; }
+
−
#gl-menu .gl-r2-c1 { background-position: 0 -24px; }
+
−
#gl-menu .gl-r2-c2 { background-position: -24px -24px; }
+
−
#gl-menu .gl-r2-c3 { background-position: -48px -24px; }
+
−
#gl-menu .gl-r2-c4 { background-position: -72px -24px; }
+
−
#gl-menu .gl-r2-c5 { background-position: -96px -24px; }
+
−
#gl-menu .gl-r2-c6 { background-position: -120px -24px; }
+
−
#gl-menu .gl-r2-c7 { background-position: -144px -24px; }
+
−
#gl-menu .gl-r2-c8 { background-position: -168px -24px; }
+
−
#gl-menu .gl-r2-c9 { background-position: -192px -24px; }
+
−
#gl-menu .gl-r3-c1 { background-position: 0 -48px; }
+
−
#gl-menu .gl-r3-c2 { background-position: -24px -48px; }
+
−
#gl-menu .gl-r3-c3 { background-position: -48px -48px; }
+
−
#gl-menu .gl-r3-c4 { background-position: -72px -48px; }
+
−
#gl-menu .gl-r3-c5 { background-position: -96px -48px; }
+
−
#gl-menu .gl-r3-c6 { background-position: -120px -48px; }
+
−
#gl-menu .gl-r4-c1 { background-position: 0 -72px; }
+
−
#gl-menu .gl-r4-c2 { background-position: -24px -72px; }
+
−
#gl-menu .gl-r4-c3 { background-position: -48px -72px; }
+
−
#gl-menu .gl-r4-c4 { background-position: -72px -72px; }
+
−
#gl-menu .gl-r5-c1 { background-position: 0 -96px; }
+
−
#gl-menu .gl-r5-c2 { background-position: -24px -96px; }
+
−
#gl-menu .gl-r5-c3 { background-position: -48px -96px; }
+
−
#gl-menu .gl-r6-c1 { background-position: 0 -120px; width: 16px; height: 16px; margin: 5px 8px 0 0; cursor: pointer; }
+
−
#gl-footer .gl-r7-c1 { background-position: 0 -136px; width: 56px; height: 16px; margin: 0; cursor: pointer; }
+
−
#gl-footer .gl-r7-c2 { background-position: -56px -136px; display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 0; }
+
  
−
/* one submenu ================= */
 
−
 
−
#gl-submenu-one .gl-col {
 
−
    width: 25%;
 
 
}
 
}
 +
.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;
  
−
#gl-submenu-one .gl-col1 .gl-icon {
 
−
    margin: 0 8px 0 0;
 
 
}
 
}
 +
.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;
  
−
#gl-submenu-one .gl-col1 > li > a {
+
  -moz-box-shadow: 10px 10px 5px #888888;  
−
    padding: 6px 0;
+
  box-shadow: 2px 2px 5px #888888;  
−
    font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
+
  border-radius:2em;
−
    font-size: 16px;
+
  margin-top:7px;
−
    line-height: 24px;
+
−
    font-weight: 600;
+
−
}
+
  
−
#gl-submenu-one .gl-col1 > li.gl-last > a {
 
−
    border: none;
 
−
}
 
  
−
/* three submenu ============= */
 
  
−
#gl-submenu-three .gl-col {
 
−
    width: 33.33333333333333%;
 
−
    border: none;
 
 
}
 
}
  
−
#gl-submenu-three .gl-col a {
+
.div-img-p{
−
    display: block;
+
  font-family: "gennifer", Helvetica, sans-serif;
−
    padding: 12px 24px;
+
  border-bottom: none;
−
}
+
  font-size: 18px;
 +
 
 +
  }
  
−
#gl-submenu-three .gl-col span {
+
.img-up{
−
    display: block;
+
      text-align:center;
−
    margin: 6px 0 0 32px;
+
      margin-top: 0;
−
    font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
+
      width:35%;
−
    font-size: 14px;
+
−
    line-height: 16px;
+
−
    font-weight: 300;
+
 
}
 
}
−
 
+
.img-title{
−
#gl-submenu-three .gl-col span:first-child {
+
      margin-top: 0;
−
    margin: 0;
+
      width:100%;
−
    font-size: 16px;
+
 
−
    line-height: 24px;
+
−
    font-weight: 600;
+
 
}
 
}
  
−
/* two submenu ================ */
+
.img-in{
−
 
+
      margin-top: 0;
−
#gl-submenu-two .gl-col {
+
      width:80%;
−
    width: 25%;
+
 
}
 
}
−
 
+
.hpoverview{
−
#gl-submenu-two .gl-col.gl-col2,
+
      text-align:center;
−
#gl-submenu-two .gl-col.gl-col4 {
+
      margin-top: 0;
−
    padding: 0;
+
      width:100%;
 +
  padding-top:2%
 
}
 
}
  
−
#gl-submenu-two .gl-col.gl-col2 .gl-hover,
+
.p-in{
−
#gl-submenu-two .gl-col.gl-col4 .gl-hover {
+
text-align:justify;
−
    padding: 12px 24px;
+
text-justify:inter-word;
 +
font-size:20px;
 +
line-height:150%;
 
}
 
}
  
−
/* four submenu ================== */
+
.row2{
−
 
+
  overflow: hidden;
−
#gl-submenu-four .gl-col {
+
  position: relative;
−
    width: 25%;
+
  width: 100%;
 +
  margin: 1em 0;
 +
  padding-top:20px;
 +
  padding-bottom:20px;
 
}
 
}
  
−
/* five submenu ================== */
+
.share-ul{
−
 
+
font-size:22px;
−
#gl-submenu-five .gl-col {
+
−
    width: 25%;
+
 
}
 
}
  
−
#gl-submenu-five > div > .gl-hover {
+
.card-h1{
−
     display: table-cell;
+
     border: 2px solid #ddd;
 +
    text-align: center;
 +
    font-size:30px;
 
}
 
}
  
−
/* global header, compact version
+
.card-h2{
−
  ========================================================================== */
+
    width: 100%;
−
 
+
    font-size: 30px;
−
#gl-header.gl-compact,
+
text-align: center;
−
#gl-header-bg.gl-compact,
+
    font-family: "gennifer", Helvetica, sans-serif;
−
body.gl-header-always-compact #gl-header,
+
padding-top:20px;
−
body.gl-header-always-compact #gl-header-bg,
+
−
body.gl-header-always-compact-nofooter #gl-header,
+
−
body.gl-header-always-compact-nofooter #gl-header-bg {
+
−
    height: 42px; /* should always match gl_HeaderCompactHeight in /common/javascript/gl-head-scripts.en.js */
+
 
}
 
}
  
−
#gl-header.gl-compact #gl-header-top,
+
.card-h3{
−
body.gl-header-always-compact #gl-header #gl-header-top,
+
    line-height: 150%;
−
body.gl-header-always-compact-nofooter #gl-header #gl-header-top {
+
    padding-top: 1em;
−
     margin-top: -30px;
+
     border-bottom: 2px solid #ddd;
−
     opacity: 0;
+
     font-size:30px;
 
}
 
}
−
 
+
.row-button{
−
#gl-header.gl-compact #gl-header-bottom,
+
    width: 80%;
−
body.gl-header-always-compact #gl-header #gl-header-bottom,
+
     margin: 0 auto;
−
body.gl-header-always-compact-nofooter #gl-header #gl-header-bottom {
+
−
     height: 42px;
+
 
}
 
}
  
−
#gl-header.gl-compact #gl-logo-red,
+
.div-row-in{
−
body.gl-header-always-compact #gl-header #gl-logo-red,
+
     position: relative;
−
body.gl-header-always-compact-nofooter #gl-header #gl-logo-red {
+
     float: left;
−
     width: 32px;
+
     text-align: center
−
     height: 33px;
+
−
     margin: 5px 0 0 0;
+
 
}
 
}
−
 
+
−
#gl-header.gl-compact #gl-logo-ZJU,
+
@-webkit-keyframes bigAssButtonPulse{from{background-color:#749a02;-webkit-box-shadow:0 0 25px #333;}
−
body.gl-header-always-compact #gl-header #gl-logo-ZJU,
+
50%{background-color:#91bd09;-webkit-box-shadow:0 0 50px #91bd09;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-logo-ZJU {
+
to{background-color:#749a02;-webkit-box-shadow:0 0 25px #333;}
−
    width: 110px;
+
−
    height: 15px;
+
−
    margin: 13px 0 0 6px;
+
 
}
 
}
−
 
+
@-webkit-keyframes greenPulse{from{background-color:#57C299;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-logo-MEETIGEM,
+
50%{background-color:#6DC0A0;-webkit-box-shadow:0 0 18px #91bd09;}
−
body.gl-header-always-compact #gl-header #gl-logo-MEETIGEM,
+
to{background-color:#57C299;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-logo-MEETIGEM {
+
−
    width: 110px;
+
−
    margin-top: -42px;
+
−
    opacity: 0;
+
 
}
 
}
−
 
+
@-webkit-keyframes bluePulse{from{background-color:#5B74C5;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-menu,
+
50%{background-color:#788BC8;-webkit-box-shadow:0 0 18px #2daebf;}
−
body.gl-header-always-compact #gl-header #gl-menu,
+
to{background-color:#5B74C5;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu {
+
−
    margin: 0;
+
 
}
 
}
−
 
+
@-webkit-keyframes redPulse{from{background-color:#F28DA7;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-menu .gl-r6-c1,
+
50%{background-color:#F7ADC0;-webkit-box-shadow:0 0 18px #e33100;}
−
body.gl-header-always-compact #gl-header #gl-menu .gl-r6-c1,
+
to{background-color:#F28DA7;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu .gl-r6-c1 {
+
−
    margin: 13px 8px 0 0;
+
 
}
 
}
−
 
+
@-webkit-keyframes purplePulse{from{background-color:#9962C3;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-menu-divider,
+
50%{background-color:#A882C6;-webkit-box-shadow:0 0 18px #a9014b;}
−
body.gl-header-always-compact #gl-header #gl-menu-divider,
+
to{background-color:#9962C3;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu-divider {
+
−
    height: 30px;
+
−
    margin: 6px 0 0 0;
+
 
}
 
}
−
 
+
@-webkit-keyframes magentaPulse{from{background-color:#630030;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-menu .gl-has-submenu .gl-submenu-wrapper,
+
50%{background-color:#a9014b;-webkit-box-shadow:0 0 18px #a9014b;}
−
body.gl-header-always-compact #gl-header #gl-menu .gl-has-submenu .gl-submenu-wrapper,
+
to{background-color:#630030;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu .gl-has-submenu .gl-submenu-wrapper {
+
−
    height: 42px;
+
−
    padding: 0 16px;
+
−
    line-height: 42px;
+
−
    border: none;
+
 
}
 
}
−
 
+
@-webkit-keyframes orangePulse{from{background-color:#d45500;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact #gl-menu .gl-has-submenu > a:hover,
+
50%{background-color:#ff5c00;-webkit-box-shadow:0 0 18px #ff5c00;}
−
#gl-header.gl-compact #gl-menu .gl-has-submenu > a:active,
+
to{background-color:#d45500;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact #gl-header #gl-menu .gl-has-submenu > a:hover,
+
−
body.gl-header-always-compact #gl-header #gl-menu .gl-has-submenu > a:active,
+
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu .gl-has-submenu > a:hover,
+
−
body.gl-header-always-compact-nofooter #gl-header #gl-menu .gl-has-submenu > a:active {
+
−
    border: none;
+
 
}
 
}
−
 
+
@-webkit-keyframes orangellowPulse{from{background-color:#fc9200;-webkit-box-shadow:0 0 9px #333;}
−
#gl-header.gl-compact .gl-submenu,
+
50%{background-color:#ffb515;-webkit-box-shadow:0 0 18px #ffb515;}
−
body.gl-header-always-compact #gl-header .gl-submenu,
+
to{background-color:#fc9200;-webkit-box-shadow:0 0 9px #333;}
−
body.gl-header-always-compact-nofooter #gl-header .gl-submenu {
+
−
    top: -900px;
+
−
    left: 0;
+
−
}
+
−
 
+
−
#gl-header.gl-compact .gl-open .gl-submenu,
+
−
body.gl-header-always-compact #gl-header .gl-open .gl-submenu,
+
−
body.gl-header-always-compact-nofooter #gl-header .gl-open .gl-submenu {
+
−
    top: 42px;
+
−
    left: 0;
+
 
}
 
}
  
−
#gl-header.gl-compact #gl-search-wrapper form > div,
+
.button{
−
body.gl-header-always-compact #gl-header #gl-search-wrapper form > div,
+
margin-right:0.5em;
−
body.gl-header-always-compact-nofooter #gl-header #gl-search-wrapper form > div {
+
border-radius:2em;
−
    top: 0;
+
-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;}

Latest revision as of 02:32, 12 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;
       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;}