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

}

/* clearfix ========================= */

.cf:before, .cf:after {

   content: ' ';
   display: table;

}

.cf:after {

   clear: both;

}

.cf, .trigger-haslayout {

   zoom: 1;

}

/* eu cookie law popup ============== */

1. EUCookie p {

   z-index: 0!important; /* place it above the global header */

}

/* global header

  ========================================================================== */

1. gl-outer-wrapper {

   display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
   position: relative; /* enables precision centering on noscript message */
   width: 100%;
   font-family: "gennifer", Helvetica, sans-serif;

}

1. gl-inner-wrapper {

   overflow: hidden;

}

1. gl-header * {

   margin: 0;
   padding: 0;

background:none;

   z-index: 999999999;

}

1. gl-header,
2. gl-header-bg {

   display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
   width: 100%;
   height: 70px; /* should always match gl_HeaderFullHeight in /common/javascript/gl-head-scripts.en.js */
   background: #222;
   z-index: 999999999;
   transition: height 0.3s ease;

}

1. gl-header-bg,
2. gl-header-offset {

   display: none;
   background: #222;

}

1. gl-header.gl-header-fixed,
2. gl-header-bg.gl-header-fixed {

   display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
   position: fixed;
   top: 0;
   left: 0;

}

1. gl-header.gl-header-fixed {

   background: none; /* background only needed here in non-js environments */

}

1. gl-header-bg.gl-header-fixed {

   z-index: 999999998

}

1. gl-header-offset.gl-header-fixed {

   display: block;
   width: 100%;
   height: 70px;

}

.gl-anchor {

   display: block;
   box-sizing: border-box;
   content: ' ';
   height: 60px; /* should always match gl_HeaderOffset in /common/javascript/gl-head-scripts.en.js */
   margin: -60px 0 0;
   overflow: visible;

}

/* variations ======================= */

body.gl-header-nocompact #gl-header {

   position: static !important;
   height: 70px !important;
   background: #222;

}

body.gl-header-always-compact-nofooter #gl-outer-wrapper {

   height: 100%; /* enables precision centering on noscript message without distorting the page's vertical height */

}

body.gl-header-always-compact #gl-header, body.gl-header-always-compact #gl-header.gl-header-fixed, body.gl-header-always-compact #gl-header-bg.gl-header-fixed, body.gl-header-always-compact-nofooter #gl-header, 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;

}

body.gl-header-nocompact #gl-header-bg, 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;

}

body.gl-header-no-submenus #gl-header .gl-open .gl-submenu {

   top: -900px !important;
   left: 0;

}

body.gl-footer-compact #gl-footer-menu {

   display: none;

}

body.gl-footer-compact #gl-footer-copyright {

   border-top: none;

}

/* top ============================== */

1. gl-header-top {

   position: relative;
   width: 100%;
   min-width: 998px;
   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 =========================== */

1. gl-header-bottom {

   width: 100%;
   height: 70px;
   margin: 0 auto ;

}

1. gl-logo {

   float: left;
   width: 220px;

margin-left:5%; }

1. gl-logo a {

   display: block;

}

1. gl-logo img {

   box-sizing: border-box;
   border: none; /* ie */

}

1. gl-logo-red {

   display: block;
   float: left;
   width: 48px;
   height: 50px;
   transition: all 0.3s ease;

}

1. gl-logo-ZJU {

   display: block;
   float: left;
   width: 160px;
   height: 22px;
   margin: 8px 0 0 6px;
   transition: all 0.3s ease;

}

1. gl-logo-MEETIGEM {

   display: block;
   float: left;
   width: 160px;
   height: 6px;
   margin: 6px 0 0 6px;
   opacity: 1;
   transition: all 0.3s ease;

} /* global menu

  ========================================================================== */

1. gl-menu {

   float: right;
   transition: all 0.3s ease;

}

1. gl-menu-divider {

   float: left;
   height: 33px;
   margin: 12px 0 0 0;
   border-left: 1px solid #444;

}

1. gl-menu .gl-has-submenu {

   float: left;

}

/* tabs ============================= */

1. gl-menu .gl-submenu-wrapper {

   display: block;
   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;

}

1. gl-outer-wrapper.gl-es #gl-menu .gl-submenu-wrapper,
2. gl-outer-wrapper.gl-ja #gl-menu .gl-submenu-wrapper,
3. gl-outer-wrapper.gl-fr #gl-menu .gl-submenu-wrapper,
4. gl-outer-wrapper.gl-ru #gl-menu .gl-submenu-wrapper {

   font-size: 15px !important; /* prevents word wrap */

}

1. gl-menu .gl-open .gl-submenu-wrapper {

   border-top: 3px solid #c02942;
   background: #333;
   color: #fff;

}

1. gl-menu #gl-menu-search.gl-open .gl-submenu-wrapper {

   background: #666;

}

1. gl-menu .gl-has-submenu > ul > li {

   display: block;
   float: left;
   list-style: none;

}

/* submenu ========================== */

1. gl-menu .gl-submenu {

   position: absolute;
   width: 100%;
   top: -900px;
   left: 0;
   background: #333;

}

1. gl-menu .gl-open .gl-submenu {

   top: 87px;
   left: 0;

}

1. gl-menu .gl-hover:hover {

   background: #444;

}

1. gl-menu .gl-col-wrapper {

   display: table;
   width: 100%;
   margin: 0 auto;
   padding: 16px 0;

}

1. gl-menu .gl-col {

   display: table-cell;
   box-sizing: border-box;
   padding: 12px 24px;
   border-right: 1px solid #545454;

}

1. gl-menu .gl-col div{

   width:100%;

padding: 12px 24px; color: #ddd; }

1. gl-menu .gl-col div:hover,
2. gl-menu .gl-col div:active {

background: #444; }

1. gl-menu .gl-col.gl-last {

   border: none;

}

1. gl-menu .gl-col a:link,
2. gl-menu .gl-col a:visited {

   color: #ddd;
   text-decoration: none;

}

1. gl-menu .gl-col a:hover,
2. gl-menu .gl-col a:active {

   color: #fff;
   text-decoration: none;

}

1. gl-menu .gl-col ul,
2. gl-menu .gl-col li {

   display: block;
   padding: 0; /* m8 override */
   list-style: none;

}

1. gl-menu .gl-col ul li a {

   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 ================== */

1. gl-menu .gl-col > li {

   color: #ddd;
   font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;

}

1. gl-menu .gl-col > li > a {

   display: block;

}

1. gl-menu .gl-col > li > a:link,
2. gl-menu .gl-col > li > a:visited {

   color: #ddd;

}

1. gl-menu .gl-col > li > a:hover,
2. gl-menu .gl-col > li > a:active {

   color: #fff;

}

1. gl-menu .gl-col > li > ul {

   display: block;
   margin: 6px 0 0 0;

}

/* submenu footer =================== */

1. gl-menu .gl-col-footer {

   font-family:  "gennifer", Helvetica, sans-serif; /* m8 override */
   font-size: 11px;
   line-height: 13px;
   font-weight: 400; /* m8 override */
   letter-spacing: 2px;
   text-transform: uppercase;
   text-align: center;

}

1. gl-menu .gl-col-footer a:link,
2. gl-menu .gl-col-footer a:visited {

   display: block;
   padding: 12px 0;
   background: #222;
   color: #eee;
   text-decoration: none;

}

1. gl-menu .gl-col-footer a:hover,
2. gl-menu .gl-col-footer a:active {

   background: #111;
   color: #fff;

}

/* submenu icons ==================== */

1. gl-menu .gl-icon,
2. gl-menu .gl-rtall,
3. gl-footer .gl-icon {

   display: block;
   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;

}

1. gl-menu .gl-r1-c1 { background-position: 0 0; }
2. gl-menu .gl-r1-c2 { background-position: -24px 0; }
3. gl-menu .gl-r1-c3 { background-position: -48px 0; }
4. gl-menu .gl-r1-c4 { background-position: -72px 0; }
5. gl-menu .gl-r1-c5 { background-position: -96px 0; }
6. gl-menu .gl-r1-c6 { background-position: -120px 0; }
7. gl-menu .gl-r1-c7 { background-position: -144px 0; }
8. gl-menu .gl-r1-c8 { background-position: -168px 0; }
9. gl-menu .gl-r1-c9 { background-position: -192px 0; }
10. gl-menu .gl-r2-c1 { background-position: 0 -24px; }
11. gl-menu .gl-r2-c2 { background-position: -24px -24px; }
12. gl-menu .gl-r2-c3 { background-position: -48px -24px; }
13. gl-menu .gl-r2-c4 { background-position: -72px -24px; }
14. gl-menu .gl-r2-c5 { background-position: -96px -24px; }
15. gl-menu .gl-r2-c6 { background-position: -120px -24px; }
16. gl-menu .gl-r2-c7 { background-position: -144px -24px; }
17. gl-menu .gl-r2-c8 { background-position: -168px -24px; }
18. gl-menu .gl-r2-c9 { background-position: -192px -24px; }
19. gl-menu .gl-r3-c1 { background-position: 0 -48px; }
20. gl-menu .gl-r3-c2 { background-position: -24px -48px; }
21. gl-menu .gl-r3-c3 { background-position: -48px -48px; }
22. gl-menu .gl-r3-c4 { background-position: -72px -48px; }
23. gl-menu .gl-r3-c5 { background-position: -96px -48px; }
24. gl-menu .gl-r3-c6 { background-position: -120px -48px; }
25. gl-menu .gl-r4-c1 { background-position: 0 -72px; }
26. gl-menu .gl-r4-c2 { background-position: -24px -72px; }
27. gl-menu .gl-r4-c3 { background-position: -48px -72px; }
28. gl-menu .gl-r4-c4 { background-position: -72px -72px; }
29. gl-menu .gl-r5-c1 { background-position: 0 -96px; }
30. gl-menu .gl-r5-c2 { background-position: -24px -96px; }
31. gl-menu .gl-r5-c3 { background-position: -48px -96px; }
32. gl-menu .gl-r6-c1 { background-position: 0 -120px; width: 16px; height: 16px; margin: 5px 8px 0 0; cursor: pointer; }
33. gl-footer .gl-r7-c1 { background-position: 0 -136px; width: 56px; height: 16px; margin: 0; cursor: pointer; }
34. gl-footer .gl-r7-c2 { background-position: -56px -136px; display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 0; }

/* one submenu ================= */

1. gl-submenu-one .gl-col {

   width: 25%;

}

1. gl-submenu-one .gl-col1 .gl-icon {

   margin: 0 8px 0 0;

}

1. gl-submenu-one .gl-col1 > li > a {

   padding: 6px 0;
   font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;

}

1. gl-submenu-one .gl-col1 > li.gl-last > a {

   border: none;

}

/* three submenu ============= */

1. gl-submenu-three .gl-col {

   width: 33.33333333333333%;
   border: none;

}

1. gl-submenu-three .gl-col a {

   display: block;
   padding: 12px 24px;

}

1. gl-submenu-three .gl-col span {

   display: block;
   margin: 6px 0 0 32px;
   font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
   font-size: 14px;
   line-height: 16px;
   font-weight: 300;

}

1. gl-submenu-three .gl-col span:first-child {

   margin: 0;
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;

}

/* two submenu ================ */

1. gl-submenu-two .gl-col {

   width: 25%;

}

1. gl-submenu-two .gl-col.gl-col2,
2. gl-submenu-two .gl-col.gl-col4 {

   padding: 0;

}

1. gl-submenu-two .gl-col.gl-col2 .gl-hover,
2. gl-submenu-two .gl-col.gl-col4 .gl-hover {

   padding: 12px 24px;

}

/* four submenu ================== */

1. gl-submenu-four .gl-col {

   width: 25%;

}

/* five submenu ================== */

1. gl-submenu-five .gl-col {

   width: 25%;

}

1. gl-submenu-five > div > .gl-hover {

   display: table-cell;

}

/* global header, compact version

  ========================================================================== */

1. gl-header.gl-compact,
2. gl-header-bg.gl-compact,

body.gl-header-always-compact #gl-header, 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 */

}

1. gl-header.gl-compact #gl-header-top,

body.gl-header-always-compact #gl-header #gl-header-top, body.gl-header-always-compact-nofooter #gl-header #gl-header-top {

   margin-top: -30px;
   opacity: 0;

}

1. gl-header.gl-compact #gl-header-bottom,

body.gl-header-always-compact #gl-header #gl-header-bottom, body.gl-header-always-compact-nofooter #gl-header #gl-header-bottom {

   height: 42px;

}

1. gl-header.gl-compact #gl-logo-red,

body.gl-header-always-compact #gl-header #gl-logo-red, body.gl-header-always-compact-nofooter #gl-header #gl-logo-red {

   width: 32px;
   height: 33px;
   margin: 5px 0 0 0;

}

1. gl-header.gl-compact #gl-logo-ZJU,

body.gl-header-always-compact #gl-header #gl-logo-ZJU, body.gl-header-always-compact-nofooter #gl-header #gl-logo-ZJU {

   width: 110px;
   height: 15px;
   margin: 13px 0 0 6px;

}

1. gl-header.gl-compact #gl-logo-MEETIGEM,

body.gl-header-always-compact #gl-header #gl-logo-MEETIGEM, body.gl-header-always-compact-nofooter #gl-header #gl-logo-MEETIGEM {

   width: 110px;
   margin-top: -42px;
   opacity: 0;

}

1. gl-header.gl-compact #gl-menu,

body.gl-header-always-compact #gl-header #gl-menu, body.gl-header-always-compact-nofooter #gl-header #gl-menu {

   margin: 0;

}

1. gl-header.gl-compact #gl-menu .gl-r6-c1,

body.gl-header-always-compact #gl-header #gl-menu .gl-r6-c1, body.gl-header-always-compact-nofooter #gl-header #gl-menu .gl-r6-c1 {

   margin: 13px 8px 0 0;

}

1. gl-header.gl-compact #gl-menu-divider,

body.gl-header-always-compact #gl-header #gl-menu-divider, body.gl-header-always-compact-nofooter #gl-header #gl-menu-divider {

   height: 30px;
   margin: 6px 0 0 0;

}

1. gl-header.gl-compact #gl-menu .gl-has-submenu .gl-submenu-wrapper,

body.gl-header-always-compact #gl-header #gl-menu .gl-has-submenu .gl-submenu-wrapper, 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;

}

1. gl-header.gl-compact #gl-menu .gl-has-submenu > a:hover,
2. gl-header.gl-compact #gl-menu .gl-has-submenu > a:active,

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;

}

1. gl-header.gl-compact .gl-submenu,

body.gl-header-always-compact #gl-header .gl-submenu, body.gl-header-always-compact-nofooter #gl-header .gl-submenu {

   top: -900px;
   left: 0;

}

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

}

1. gl-header.gl-compact #gl-search-wrapper form > div,

body.gl-header-always-compact #gl-header #gl-search-wrapper form > div, body.gl-header-always-compact-nofooter #gl-header #gl-search-wrapper form > div {

   top: 0;

}