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

Revision as of 14:08, 6 September 2015 (view source) Veya (Talk | contribs) ← Older edit		Revision as of 16:04, 6 September 2015 (view source) Veya (Talk | contribs) Newer edit →
Line 8:		Line 8:
	}		}
		+	/* clearfix ========================= */
−	body {	+	.cf:before,
−	background: #A7A4A1 url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);	+	.cf:after {
−	font-family: "gennifer", Helvetica, sans-serif;	+	content: ' ';
		+	display: table;
	}		}
		+	.cf:after {
		+	clear: both;
		+	}
−		+	.cf,
−	.shadow-hp-ov{	+	.trigger-haslayout {
−	background-color:#FFF;	+	zoom: 1;
−	border:2px solid #ddd;	+
−	padding-left:6%;	+
−	padding-right:6%;	+
−	-moz-box-shadow: 10px 10px 5px #888888;	+
−	box-shadow: 2px 2px 5px #888888;	+
−	border-radius:2em;	+
	}		}
−	.shadow{	+	/* eu cookie law popup ============== */
−	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 {	+	#EUCookie p {
−	padding-top: 5px;	+	z-index: 0!important; /* place it above the global header */
−	padding-bottom: 5%;	+	}
−	padding-left: 15%;	+
−	padding-right: 15%;	+
−	font-size: 16px;	+
−	}	+
		+	/* global header
		+	========================================================================== */
−	h3, h4, h5, h6 {	+	#gl-outer-wrapper {
−	font-family: "gennifer", Helvetica, sans-serif;	+	display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
−	border-bottom: none;	+	position: relative; /* enables precision centering on noscript message */
−	padding-top:1em;	+	width: 100%;
−	padding-bottom: 1em;	+	font-family: "gennifer", Helvetica, sans-serif;
	}		}
−	h1 {	+	#gl-inner-wrapper {
−	font-family: "gennifer", Helvetica, sans-serif;	+	overflow: hidden;
−	border-bottom: none;	+
−	font-size: 6em;	+
	}		}
−	h2 {	+	#gl-header * {
−	font-family: "gennifer", Helvetica, sans-serif;	+	margin: 0;
−	border-bottom: none;	+	padding: 0;
−	font-size: 2.5em;	+	background:none;
−	padding-top:1em;	+	z-index: 999999999;
−	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%;
−	font-size: 35px;	+	height: 70px; /* should always match gl_HeaderFullHeight in /common/javascript/gl-head-scripts.en.js */
−	text-align: center;	+	background: #222;
−	font-family: "gennifer", Helvetica, sans-serif;	+	z-index: 999999999;
		+	transition: height 0.3s ease;
	}		}
−	.hh2-left{	+	#gl-header-bg,
		+	#gl-header-offset {
		+	display: none;
		+	background: #222;
		+	}
		+
		+	#gl-header.gl-header-fixed,
		+	#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;
		+	}
		+
		+	#gl-header.gl-header-fixed {
		+	background: none; /* background only needed here in non-js environments */
		+	}
		+
		+	#gl-header-bg.gl-header-fixed {
		+	z-index: 999999998
		+	}
		+
		+	#gl-header-offset.gl-header-fixed {
		+	display: block;
	width: 100%;		width: 100%;
−	font-size: 30px;	+	height: 70px;
−	text-align:left;	+
	}		}
−	.wherno{	+
−	border:2px solid #ddd;	+	.gl-anchor {
−	border-bottom:0px solid #ddd;	+	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 ======================= */
−	.hh3{	+	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 ============================== */
		+
		+	#gl-header-top {
		+	position: relative;
	width: 100%;		width: 100%;
−	border: 2px solid #ddd;	+	min-width: 998px;
−	color: #666;	+	height: 30px;
−	font-size: 20px;	+	margin: 0 auto;
−	padding-top:0.2em;	+	opacity: 1;
−	padding-bottom: 0.2em;	+	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;
	}		}
−	.hh4{	+	/* bottom =========================== */
		+
		+	#gl-header-bottom {
	width: 100%;		width: 100%;
−	font-size: 30px;	+	height: 70px;
−	padding-top:0;	+	margin: 0 auto ;
−	padding-bottom: 0.2em;	+
−	text-align: center;	+
−	color: #666;	+
−	border-bottom:2px solid #ddd;	+
	}		}
−	.p1{	+
−	text-align:justify; text-justify:inter-word;	+	#gl-logo {
−	font-size:22px;	+	float: left;
		+	width: 220px;
		+	margin-left:5%;
	}		}
−	.p1bord{
−	font-size:25px;
−	text-align: center;
−	padding-top:0.5em;
−	padding-bottom: 0.5em;
−	padding-bottom: 0.5em;
		+	#gl-logo a {
		+	display: block;
	}		}
−	.p2{	+
−	text-align:justify;	+	#gl-logo img {
−	text-justify:inter-word;	+	box-sizing: border-box;
−	padding-left:1em;	+	border: none; /* ie */
−	padding-right:1em;	+
−	line-height:150%;	+
	}		}
−	.p3{	+	#gl-logo-red {
−	text-align:justify;	+	display: block;
−	text-justify:inter-word;	+	float: left;
−	padding-left:1em;	+	width: 48px;
−	padding-right:3em;	+	height: 50px;
−	line-height:150%;	+	transition: all 0.3s ease;
−	}	+
−		+
−	.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;	+	#gl-logo-ZJU {
−	font-size:22px;	+	display: block;
−	padding-top:1em;	+	float: left;
−	padding-bottom:1em;	+	width: 160px;
−		+	height: 22px;
		+	margin: 8px 0 0 6px;
		+	transition: all 0.3s ease;
	}		}
−	.p2,.p3{	+
−	font-size:20px;	+	#gl-logo-MEETIGEM {
		+	display: block;
		+	float: left;
		+	width: 160px;
		+	height: 6px;
		+	margin: 6px 0 0 6px;
		+	opacity: 1;
		+	transition: all 0.3s ease;
	}		}
−	.ul1{	+	/* global menu
−	text-align:justify; text-justify:inter-word;	+	========================================================================== */
−	font-size:22px;	+
		+	#gl-menu {
		+	float: right;
		+	transition: all 0.3s ease;
	}		}
−	.qanda{	+	#gl-menu-divider {
−	padding-top:0.2em;	+	float: left;
−	padding-bottom: 0.2em;	+	height: 33px;
−	border-bottom: 1px solid #ddd;	+	margin: 12px 0 0 0;
		+	border-left: 1px solid #444;
	}		}
−	.question{	+
−	font-family:"gennifer", Helvetica, sans-serif;	+	#gl-menu .gl-has-submenu {
−	font-size:22px;	+	float: left;
	}		}
−	.answer{	+
−	font-family:"gennifer", Helvetica, sans-serif;	+	/* tabs ============================= */
−	font-size:18px;	+
		+	#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;
	}		}
		+	#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 {
		+	border-top: 3px solid #c02942;
		+	background: #333;
		+	color: #fff;
		+	}
−	.row {	+	#gl-menu #gl-menu-search.gl-open .gl-submenu-wrapper {
−	overflow: hidden;	+	background: #666;
−	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,	+	#gl-menu .gl-has-submenu > ul > li {
−	.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {	+	display: block;
−	padding: 0;	+	float: left;
		+	list-style: none;
	}		}
−	.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3,	+	/* submenu ========================== */
−	.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-menu .gl-submenu {
−	margin-top: 0em;	+	position: absolute;
		+	width: 100%;
		+	top: -900px;
		+	left: 0;
		+	background: #333;
	}		}
−	.text-col-right {	+	#gl-menu .gl-open .gl-submenu {
−	padding-left: 2em;	+	top: 87px;
		+	left: 0;
	}		}
−	.text-col-left {	+	#gl-menu .gl-hover:hover {
−	padding-right: 2em;	+	background: #444;
	}		}
−	.kuvateksti {	+	#gl-menu .gl-col-wrapper {
−	font-size: small;	+	display: table;
−	margin-top: 1em;	+	width: 100%;
−	text-align: center;	+	margin: 0 auto;
		+	padding: 16px 0;
	}		}
−	.kuvateksti-left {	+
−	font-size: small;	+	#gl-menu .gl-col {
−	margin-top: 1em;	+	display: table-cell;
−	text-align: center;	+	box-sizing: border-box;
−	padding-right:5em;	+	padding: 12px 24px;
		+	border-right: 1px solid #545454;
	}		}
−	.img-center {	+
−	text-align: center;	+	#gl-menu .gl-col div{
−	margin-top: 0;	+	width:100%;
−	width:100%;	+	padding: 12px 24px;
		+	color: #ddd;
	}		}
−	.img-center-left{	+
−	text-align: center;	+	#gl-menu .gl-col div:hover,
−	margin-top: 0;	+	#gl-menu .gl-col div:active {
−	width:100%;	+	background: #444;
−	padding-right:5em;	+	}
		+	#gl-menu .gl-col.gl-last {
		+	border: none;
	}		}
−	.img-center-pad{	+	#gl-menu .gl-col a:link,
−	text-align: center;	+	#gl-menu .gl-col a:visited {
−	margin-top: 0;	+	color: #ddd;
−	width:100%;	+	text-decoration: none;
−	padding-left:3px;	+
−	padding-right:3px;	+
	}		}
−	.img-table {	+
−	text-align: center;	+	#gl-menu .gl-col a:hover,
−	margin-top: 0;	+	#gl-menu .gl-col a:active {
−	width:100%;	+	color: #fff;
−	height:400px;	+	text-decoration: none;
	}		}
		+	#gl-menu .gl-col ul,
		+	#gl-menu .gl-col li {
		+	display: block;
		+	padding: 0; /* m8 override */
		+	list-style: none;
		+	}
−	.img-center .img-responsive {	+	#gl-menu .gl-col ul li a {
−	display: inline;	+	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 ================== */
		+	#gl-menu .gl-col > li {
		+	color: #ddd;
		+	font-family: "gennifer", Helvetica, sans-serif;/* m8 override */
		+	font-size: 16px;
		+	line-height: 24px;
		+	font-weight: 600;
		+	}
		+	#gl-menu .gl-col > li > a {
		+	display: block;
		+	}
		+	#gl-menu .gl-col > li > a:link,
		+	#gl-menu .gl-col > li > a:visited {
		+	color: #ddd;
		+	}
		+	#gl-menu .gl-col > li > a:hover,
		+	#gl-menu .gl-col > li > a:active {
		+	color: #fff;
		+	}
		+	#gl-menu .gl-col > li > ul {
		+	display: block;
		+	margin: 6px 0 0 0;
		+	}
−	.apph1{	+	/* submenu footer =================== */
−	font-family: "gennifer", Helvetica, sans-serif;	+
−	border-bottom: none;	+	#gl-menu .gl-col-footer {
−	font-size: 1.75em;	+	font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
−	padding-top:1em;	+	font-size: 11px;
−	padding-bottom: 1em;	+	line-height: 13px;
−	font-weight:1300px;	+	font-weight: 400; /* m8 override */
		+	letter-spacing: 2px;
		+	text-transform: uppercase;
		+	text-align: center;
	}		}
−	.apph2{	+	#gl-menu .gl-col-footer a:link,
−	font-family: "gennifer", Helvetica, sans-serif;	+	#gl-menu .gl-col-footer a:visited {
−	border-bottom: none;	+	display: block;
−	font-size: 1.5em;	+	padding: 12px 0;
−	padding-top:1em;	+	background: #222;
−	padding-bottom: 1em;	+	color: #eee;
		+	text-decoration: none;
	}		}
−	.apph3{	+	#gl-menu .gl-col-footer a:hover,
−	font-family: "gennifer", Helvetica, sans-serif;	+	#gl-menu .gl-col-footer a:active {
−	border-bottom: none;	+	background: #111;
−	font-size: 1.75em;	+	color: #fff;
		+	}
		+
		+	/* submenu icons ==================== */
−	text-align:center;	+	#gl-menu .gl-icon,
		+	#gl-menu .gl-rtall,
		+	#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;
	}		}
−	.appp1{	+	#gl-menu .gl-r1-c1 { background-position: 0 0; }
−	font-family: "gennifer", Helvetica, sans-serif;	+	#gl-menu .gl-r1-c2 { background-position: -24px 0; }
−	border-bottom: none;	+	#gl-menu .gl-r1-c3 { background-position: -48px 0; }
−	font-size: 25px;	+	#gl-menu .gl-r1-c4 { background-position: -72px 0; }
−	padding-top:1em;	+	#gl-menu .gl-r1-c5 { background-position: -96px 0; }
−	padding-bottom: 1em;	+	#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%;
	}		}
−	.textcenter{	+	#gl-submenu-one .gl-col1 .gl-icon {
−	text-align: center;	+	margin: 0 8px 0 0;
	}		}
−	.textleft{	+
−	text-align: left;	+	#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;
	}		}
−	.textright{	+
−	text-align: right;	+	#gl-submenu-one .gl-col1 > li.gl-last > a {
		+	border: none;
	}		}
−	.bbar{	+
−	position:relative;	+	/* three submenu ============= */
−	width:100%;	+
−	max-width:500px;	+	#gl-submenu-three .gl-col {
−	margin-top:-50px;	+	width: 33.33333333333333%;
		+	border: none;
	}		}
−	.hpover-p{	+	#gl-submenu-three .gl-col a {
−	text-align:justify;	+	display: block;
−	text-justify:inter-word;	+	padding: 12px 24px;
−	line-height:150%;	+
−	font-size: 18px;	+
−	font-family: "gennifer", Helvetica, sans-serif;	+
	}		}
−	.in-h{	+	#gl-submenu-three .gl-col span {
−	text-align:center;	+	display: block;
−	line-height:175%;	+	margin: 6px 0 0 32px;
−	font-size: 25px;	+	font-family: "gennifer", Helvetica, sans-serif; /* m8 override */
−	padding-top:0;	+	font-size: 14px;
−	padding-bottom:0;	+	line-height: 16px;
		+	font-weight: 300;
		+	}
		+
		+	#gl-submenu-three .gl-col span:first-child {
		+	margin: 0;
		+	font-size: 16px;
		+	line-height: 24px;
		+	font-weight: 600;
	}		}
−	.div-img{	+	/* two submenu ================ */
−	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;	+	#gl-submenu-two .gl-col {
−	box-shadow: 2px 2px 5px #888888;	+	width: 25%;
−	border-radius:2em;	+
−	min-height:760px;	+
	}		}
−	.zju-china{	+	#gl-submenu-two .gl-col.gl-col2,
−	text-align: center;	+	#gl-submenu-two .gl-col.gl-col4 {
−	margin-top: 0;	+	padding: 0;
−	width:100%;	+
	}		}
−	.word-under{	+	#gl-submenu-two .gl-col.gl-col2 .gl-hover,
−	text-align:center;	+	#gl-submenu-two .gl-col.gl-col4 .gl-hover {
−	margin-top: 0;	+	padding: 12px 24px;
−	width:100%;	+
	}		}
−	.img-left {	+
−	width:100%;	+	/* four submenu ================== */
−	padding-left:10%;	+
		+	#gl-submenu-four .gl-col {
		+	width: 25%;
	}		}
−	.img-right {	+
−	width:100%;	+	/* five submenu ================== */
−	padding-right:10%;	+
		+	#gl-submenu-five .gl-col {
		+	width: 25%;
	}		}
−	.img-under {	+	#gl-submenu-five > div > .gl-hover {
−	width:30%;	+	display: table-cell;
		+	}
		+	/* global header, compact version
		+	========================================================================== */
		+
		+	#gl-header.gl-compact,
		+	#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 */
	}		}
−	.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-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;
	}		}
−	.div-img-p{	+	#gl-header.gl-compact #gl-header-bottom,
−	font-family: "gennifer", Helvetica, sans-serif;	+	body.gl-header-always-compact #gl-header #gl-header-bottom,
−	border-bottom: none;	+	body.gl-header-always-compact-nofooter #gl-header #gl-header-bottom {
−	font-size: 18px;	+	height: 42px;
−		+	}
−	}	+
−	.img-up{	+	#gl-header.gl-compact #gl-logo-red,
−	text-align:center;	+	body.gl-header-always-compact #gl-header #gl-logo-red,
−	margin-top: 0;	+	body.gl-header-always-compact-nofooter #gl-header #gl-logo-red {
−	width:35%;	+	width: 32px;
		+	height: 33px;
		+	margin: 5px 0 0 0;
	}		}
−	.img-title{	+
−	margin-top: 0;	+	#gl-header.gl-compact #gl-logo-ZJU,
−	width:100%;	+	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;
	}		}
−	.img-in{	+	#gl-header.gl-compact #gl-logo-MEETIGEM,
−	margin-top: 0;	+	body.gl-header-always-compact #gl-header #gl-logo-MEETIGEM,
−	width:80%;	+	body.gl-header-always-compact-nofooter #gl-header #gl-logo-MEETIGEM {
		+	width: 110px;
		+	margin-top: -42px;
		+	opacity: 0;
	}		}
−	.hpoverview{	+
−	text-align:center;	+	#gl-header.gl-compact #gl-menu,
−	margin-top: 0;	+	body.gl-header-always-compact #gl-header #gl-menu,
−	width:100%;	+	body.gl-header-always-compact-nofooter #gl-header #gl-menu {
−	padding-top:2%	+	margin: 0;
		+	}
		+
		+	#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;
		+	}
		+
		+	#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;
		+	}
		+
		+	#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;
		+	}
		+
		+	#gl-header.gl-compact #gl-menu .gl-has-submenu > a:hover,
		+	#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;
		+	}
		+
		+	#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;
		+	}
		+
		+	#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;
	}		}
−	.p-in{	+	#gl-header.gl-compact #gl-search-wrapper form > div,
−	text-align:justify;	+	body.gl-header-always-compact #gl-header #gl-search-wrapper form > div,
−	text-justify:inter-word;	+	body.gl-header-always-compact-nofooter #gl-header #gl-search-wrapper form > div {
−	font-size:20px;	+	top: 0;
−	line-height:150%;	+
	}		}

---

Revision as of 16:04, 6 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 */ 	

}

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

}