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

Revision as of 03:21, 7 September 2015 (view source) Veya (Talk | contribs) ← Older edit		Revision as of 03:30, 7 September 2015 (view source) Veya (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	@font-face {	+	/* global footer
−	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 {	+	#gl-footer {
−	background: #A7A4A1 url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);	+	display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
−	font-family: "gennifer", Helvetica, sans-serif;	+	width: 100%;
		+	background: #fff;
		+	color: #666;
		+	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
		+	font-weight: 400;
		+	border:2px solid #ddd;
		+	border-radius:2em;
		+	-moz-box-shadow: 10px 10px 5px #888888;
		+	box-shadow: 0px 0px 2em #888888;
		+	text-align:center;
		+
	}		}
		+	#gl-footer a:link,
		+	#gl-footer a:visited {
		+	color: #666;
		+	text-decoration: none;
		+	}
−		+	#gl-footer a:hover,
−	.shadow-hp-ov{	+	#gl-footer a:active {
−	background-color:#FFF;	+	color: #c02942;
−	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{	+	/* menu ============================= */
−	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 {	+	#gl-footer-menu {
−	padding-top: 5px;	+	width: 90%;
−	padding-bottom: 5%;	+	margin-left:auto;
−	margin-left: auto;	+	margin-right:auto;
−	margin-right:auto;	+	}
−	font-size: 16px;	+
−	width:70%;	+
−	min-width:600px;	+
−	}	+
		+	#gl-footer-menu .gl-col {
		+	float: left;
		+	width: 20%;
		+	}
−	h3, h4, h5, h6 {	+	#gl-footer-menu .gl-col-1 {
−	font-family: "gennifer", Helvetica, sans-serif;	+	margin-left: 0%;
−	border-bottom: none;	+
−	padding-top:1em;	+
−	padding-bottom: 1em;	+
	}		}
−	h1 {	+	#gl-footer-menu .gl-col-5 {
−	font-family: "gennifer", Helvetica, sans-serif;	+	margin-right: 0%;
−	border-bottom: none;	+
−	font-size: 6em;	+
	}		}
−	h2 {	+	#gl-footer-menu ul {
−	font-family: "gennifer", Helvetica, sans-serif;	+	margin: 0px 0px;
−	border-bottom: none;	+	text-align:center;
−	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{	+	#gl-footer-menu li {
−	width: 100%;	+	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
−	font-size: 30px;	+	list-style: none;
−	text-align:left;	+	margin-left:-10%;
−	}	+	height:80px;
−	.wherno{	+
−	border:2px solid #ddd;	+
−	border-bottom:0px solid #ddd;	+
	}		}
−	.hh3{	+	/* set======================== */
−	width: 100%;	+	#gl-footer-menu li.footIDT,
−	border: 2px solid #ddd;	+	#gl-footer-menu li.footSynenergene,
−	color: #666;	+	#gl-footer-menu li.footZJU1,
−	font-size: 20px;	+	#gl-footer-menu li.footZJU2,
−	padding-top:0.2em;	+	#gl-footer-menu li.footZJU3,
−	padding-bottom: 0.2em;	+	#gl-footer-menu li.footZJU4,
		+	#gl-footer-menu li.footZJU5,
		+	#gl-footer-menu li.footZJU6,
		+	#gl-footer-menu li.footZJU7,
		+	#gl-footer-menu li.footZJU8
		+	{
		+	width:100%;
		+	float: left;
		+	background-repeat: no-repeat;
		+	background-position:left;
		+	cursor:pointer;
		+	z-index:9999;
		+	background-size:140px 50px;
		+	transition-property:all;
		+	transition-duration:0.3s;
		+	transition-timing-function:linear;
		+	/* Firefox 4 */
		+	-moz-transition-property:all;
		+	-moz-transition-duration:0.3s;
		+	-moz-transition-timing-function:linear;
		+	/* Safari and Chrome */
		+	-webkit-transition-property:all;
		+	-webkit-transition-duration:0.3s;
		+	-webkit-transition-timing-function:linear;
		+	/* Opera */
		+	-o-transition-property:all;
		+	-o-transition-duration:0.3s;
		+	-o-transition-timing-function:linear;
		+
	}		}
−	.hh4{	+	#gl-footer-menu li.footIDT{
−	width: 100%;	+	background-image:url(https://static.igem.org/mediawiki/2015/2/2f/IDT-Logo-0.png);
−	font-size: 30px;	+
−	padding-top:0;	+
−	padding-bottom: 0.2em;	+
−	text-align: center;	+
−	color: #666;	+
−	border-bottom:2px solid #ddd;	+
−	}	+
−	.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-footer-menu li.footIDT:hover{
−	.p2{	+	background-image:url(https://static.igem.org/mediawiki/2015/0/0f/IDT-Logo-1.png);
−	text-align:justify;	+
−	text-justify:inter-word;	+
−	padding-left:1em;	+
−	padding-right:1em;	+
−	line-height:150%;	+
	}		}
−	.p3{	+	#gl-footer-menu li.footSynenergene{
−	text-align:justify;	+
−	text-justify:inter-word;	+	background-image:url(https://static.igem.org/mediawiki/2015/2/29/Synenergene-logo-0.png);
−	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;	+
−	}	+
−	.li3{	+
−	text-align:justify; text-justify:inter-word;	+
−	font-size:20px;	+
−	font-weight:2000;	+
−	padding-right:3em;	+
	}		}
−	.li4{	+	#gl-footer-menu li.footSynenergene:hover{
−	text-align:justify; text-justify:inter-word;	+	background-image:url(https://static.igem.org/mediawiki/2015/7/77/Synenergene-logo-1.png);
−	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;	+
	}		}
−	.qanda{	+	#gl-footer-menu li.footZJU1{
−	padding-top:0.2em;	+	background-image:url(https://static.igem.org/mediawiki/2015/6/6c/ZJU-logo-0.gif);
−	padding-bottom: 0.2em;	+
−	border-bottom: 1px solid #ddd;	+
−	}	+
−	.question{	+
−	font-family:"gennifer", Helvetica, sans-serif;	+
−	font-size:22px;	+
	}		}
−	.answer{	+	#gl-footer-menu li.footZJU1:hover{
−	font-family:"gennifer", Helvetica, sans-serif;	+	background-image:url(https://static.igem.org/mediawiki/2015/1/19/ZJU-logo-1.gif);
−	font-size:18px;	+
	}		}
−		+	#gl-footer-menu li.footZJU2{
−	.row {	+	background-size:180px 50px;
−	overflow: hidden;	+	background-image:url(https://static.igem.org/mediawiki/2015/9/91/ZJU-BKSY-0.gif);
−	position: relative;	+
−	width: 100%;	+
−	margin: 1em 0;	+
−	padding: 0;	+
	}		}
−		+	#gl-footer-menu li.footZJU2:hover{
−	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,	+	background-image:url(https://static.igem.org/mediawiki/2015/e/e1/ZJU-BKSY-1.gif);
−	.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,	+	#gl-footer-menu li.footZJU3{
−	.col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4,	+	background-image:url(https://static.igem.org/mediawiki/2015/d/d8/ZJU-JJH-0.gif);
−	.col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 {	+	}
−	margin-top: 0em;	+	#gl-footer-menu li.footZJU3:hover{
		+	background-image:url(https://static.igem.org/mediawiki/2015/8/83/ZJU-JJH-1.gif);
	}		}
−	.text-col-right {	+	#gl-footer-menu li.footZJU4{
−	padding-left: 2em;	+	background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-LI-0.gif);
	}		}
−		+	#gl-footer-menu li.footZJU4:hover{
−	.text-col-left {	+	background-image:url(https://static.igem.org/mediawiki/2015/2/2d/ZJU-LI-1.gif);
−	padding-right: 2em;	+
	}		}
−	.kuvateksti {	+	#gl-footer-menu li.footZJU5{
−	font-size: small;	+	background-size:180px 40px;
−	margin-top: 1em;	+	background-image:url(https://static.igem.org/mediawiki/2015/b/b2/ZJU-NONG-0.gif);
−	text-align: center;	+
	}		}
−	.kuvateksti-left {	+	#gl-footer-menu li.footZJU5:hover{
−	font-size: small;	+	background-image:url(https://static.igem.org/mediawiki/2015/d/d3/ZJU-NONG-1.gif);
−	margin-top: 1em;	+
−	text-align: center;	+
−	padding-right:5em;	+
	}		}
−	.img-center {	+
−	text-align: center;	+	#gl-footer-menu li.footZJU6{
−	margin-top: 0;	+	background-size:180px 50px;
−	width:100%;	+	background-image:url(https://static.igem.org/mediawiki/2015/3/36/ZJU-SKSY-0.gif);
	}		}
−	.img-center-left{	+	#gl-footer-menu li.footZJU6:hover{
−	text-align: center;	+	background-image:url(https://static.igem.org/mediawiki/2015/b/b8/ZJU-SKSY-1.gif);
−	margin-top: 0;	+
−	width:100%;	+
−	padding-right:5em;	+
	}		}
−	.img-center-pad{	+	#gl-footer-menu li.footZJU7{
−	text-align: center;	+	background-image:url(https://static.igem.org/mediawiki/2015/6/65/ZJU-SKY-0.gif);
−	margin-top: 0;	+
−	width:100%;	+
−	padding-left:3px;	+
−	padding-right:3px;	+
	}		}
−	.img-table {	+	#gl-footer-menu li.footZJU7:hover{
−	text-align: center;	+	background-image:url(https://static.igem.org/mediawiki/2015/d/df/ZJU-SKY-1.gif);
−	margin-top: 0;	+
−	width:100%;	+
−	height:400px;	+
	}		}
−		+	#gl-footer-menu li.footZJU8{
−	.img-center .img-responsive {	+	background-image:url(https://static.igem.org/mediawiki/2015/4/44/ZJU-YXY-0.gif);
−	display: inline;	+
	}		}
−		+	#gl-footer-menu li.footZJU8:hover{
−		+	background-image:url(https://static.igem.org/mediawiki/2015/0/08/ZJU-YXY-1.gif);
−		+
−		+
−		+
−		+
−		+
−	.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{	+	/* copyright ======================== */
−	text-align:justify;	+
−	text-justify:inter-word;	+
−	line-height:150%;	+
−	font-size: 18px;	+
−	font-family: "gennifer", Helvetica, sans-serif;	+
−	}	+
−	.in-h{	+	#gl-footer-copyright {
−	text-align:center;	+	width: 90%;
−	line-height:175%;	+	margin: 0 auto;
−	font-size: 25px;	+	padding: 8px 0 32px 0;
−	padding-top:0;	+	border-top: 1px solid #ccc;
−	padding-bottom:0;	+
	}		}
−	.div-img{	+	#gl-footer-copyright .gl-col1 {
−	width:100%;	+	display: block;
−	/* background-image:url(https://static.igem.org/mediawiki/2015/2/26/Background.png);*/	+	float: left;
−	background-color:#fff;	+	margin: 0 0 6px 24px;
−	background-position:left;	+	font-size: 12px;
−	background-size:100% 100%;	+	line-height: 14px;
−	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{	+	#gl-footer-copyright .gl-col1 span {
−	text-align: center;	+	display: block;
−	margin-top: 0;	+	float: left;
−	width:100%;	+	padding: 4px 0;
	}		}
−	.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%;
		+	#gl-footer-copyright .gl-col2 {
		+	display: block;
		+	float: right;
		+	margin: 0 24px 6px 0;
	}		}
−	.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-footer-copyright .gl-col2 li {
		+	display: block;
		+	float: left;
		+	color: #666;
		+	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; /* m8 override */
		+	font-size: 12px;
		+	line-height: 14px;
		+	font-weight: 400; /* m8 override */
		+	list-style: none;
	}		}
−	.div-img-p{	+	#gl-footer-copyright .gl-col2 a {
−	font-family: "gennifer", Helvetica, sans-serif;	+	display: block;
−	border-bottom: none;	+	float: left;
−	font-size: 18px;	+	padding: 4px 0;
−		+
−	}	+
−		+
−	.img-up{	+
−	text-align:center;	+
−	margin-top: 0;	+
−	width:35%;	+
−	}	+
−	.img-title{	+
−	margin-top: 0;	+
−	width:100%;	+
−		+
	}		}
−	.img-in{	+	#gl-footer-copyright .gl-col2 li:after {
−	margin-top: 0;	+	display: block;
−	width:80%;	+	float: left;
−	}	+	content: '|';
−	.hpoverview{	+	margin: 4px 10px;
−	text-align:center;	+
−	margin-top: 0;	+
−	width:100%;	+
−	padding-top:2%	+
	}		}
−	.p-in{	+	#gl-footer-copyright .gl-col2 li.gl-last:after {
−	text-align:justify;	+	content: '';
−	text-justify:inter-word;	+	margin: 0;
−	font-size:20px;	+
−	line-height:150%;	+
	}		}

---

Revision as of 03:30, 7 September 2015

/* global footer

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

1. gl-footer {

   display: table; /* enables it to extend beyond the viewport, makes backgrounds visible on horizontal scroll */
   width: 100%;
   background: #fff;
   color: #666;
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   font-weight: 400;

border:2px solid #ddd; border-radius:2em; -moz-box-shadow: 10px 10px 5px #888888; box-shadow: 0px 0px 2em #888888; text-align:center;

}

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

   color: #666;
   text-decoration: none;

}

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

   color: #c02942;

}

/* menu ============================= */

1. gl-footer-menu {

   width: 90%;     
   margin-left:auto;

margin-right:auto; }

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

   float: left;
   width: 20%;

}

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

   margin-left: 0%;

}

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

   margin-right: 0%;

}

1. gl-footer-menu ul {

   margin: 0px 0px;

text-align:center; }

1. gl-footer-menu li {

   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
   list-style: none;

margin-left:-10%; height:80px; }

/* set======================== */

1. gl-footer-menu li.footIDT,
2. gl-footer-menu li.footSynenergene,
3. gl-footer-menu li.footZJU1,
4. gl-footer-menu li.footZJU2,
5. gl-footer-menu li.footZJU3,
6. gl-footer-menu li.footZJU4,
7. gl-footer-menu li.footZJU5,
8. gl-footer-menu li.footZJU6,
9. gl-footer-menu li.footZJU7,
10. gl-footer-menu li.footZJU8

{ width:100%; float: left; background-repeat: no-repeat; background-position:left; cursor:pointer; z-index:9999; background-size:140px 50px; transition-property:all; transition-duration:0.3s; transition-timing-function:linear; /* Firefox 4 */ -moz-transition-property:all; -moz-transition-duration:0.3s; -moz-transition-timing-function:linear; /* Safari and Chrome */ -webkit-transition-property:all; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:linear; /* Opera */ -o-transition-property:all; -o-transition-duration:0.3s; -o-transition-timing-function:linear;

}

1. gl-footer-menu li.footIDT{

background-image:url(); }

1. gl-footer-menu li.footIDT:hover{

background-image:url(); }

1. gl-footer-menu li.footSynenergene{

background-image:url(); }

1. gl-footer-menu li.footSynenergene:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU1{

background-image:url(); }

1. gl-footer-menu li.footZJU1:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU2{

background-size:180px 50px; background-image:url(); }

1. gl-footer-menu li.footZJU2:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU3{

background-image:url(); }

1. gl-footer-menu li.footZJU3:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU4{

background-image:url(); }

1. gl-footer-menu li.footZJU4:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU5{

background-size:180px 40px; background-image:url(); }

1. gl-footer-menu li.footZJU5:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU6{

background-size:180px 50px; background-image:url(); }

1. gl-footer-menu li.footZJU6:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU7{

background-image:url(); }

1. gl-footer-menu li.footZJU7:hover{

background-image:url(); }

1. gl-footer-menu li.footZJU8{

background-image:url(); }

1. gl-footer-menu li.footZJU8:hover{

background-image:url(); }

/* copyright ======================== */

1. gl-footer-copyright {

   width: 90%;
   margin: 0 auto;
   padding: 8px 0 32px 0;
   border-top: 1px solid #ccc;

}

1. gl-footer-copyright .gl-col1 {

   display: block;
   float: left;
   margin: 0 0 6px 24px;
   font-size: 12px;
   line-height: 14px;

}

1. gl-footer-copyright .gl-col1 span {

   display: block;
   float: left;
   padding: 4px 0;

}

1. gl-footer-copyright .gl-col2 {

   display: block;
   float: right;
   margin: 0 24px 6px 0;

}

1. gl-footer-copyright .gl-col2 li {

   display: block;
   float: left;
   color: #666;
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; /* m8 override */
   font-size: 12px;
   line-height: 14px;
   font-weight: 400; /* m8 override */
   list-style: none;

}

1. gl-footer-copyright .gl-col2 a {

   display: block;
   float: left;
   padding: 4px 0;

}

1. gl-footer-copyright .gl-col2 li:after {

   display: block;
   float: left;
   content: '|';
   margin: 4px 10px;

}

1. gl-footer-copyright .gl-col2 li.gl-last:after {

   content: ;
   margin: 0;

}