Difference between revisions of "Template:SMMU-China/CSS main"

Revision as of 11:35, 19 October 2019 (view source) Caiyili (Talk | contribs) ← Older edit		Revision as of 13:40, 19 October 2019 (view source) Tony27786 (Talk | contribs) Newer edit →
Line 1:		Line 1:
	/*general*/		/*general*/
−	@font-face{	+	@font-face{
−	font-family: 'SMMUFONT';	+	font-family: 'SMMUFONT';
−	src:url('https://static.igem.org/mediawiki/2019/8/8f/T--SMMU-China--SMMUFONT.ttf') format('truetype');	+	src:url('https://static.igem.org/mediawiki/2019/8/8f/T--SMMU-China--SMMUFONT.ttf') format('truetype');
−	}	+	}
−	body,h1,h2,h3,h4,h5,h6,p,th,td{font-family:"SMMUFONT"!important;}	+	body,h1,h2,h3,h4,h5,h6,p,th,td{font-family:"SMMUFONT"!important;}
−	a{color:#333; text-decoration:none;}	+	a{color:#333; text-decoration:none;}
−	h1{font-size: 27px; line-height: 50px;}	+	h1{font-size: 27px; line-height: 50px;}
−	h2{font-size: 25px; line-height: 50px;}	+	h2{font-size: 25px; line-height: 50px;}
−	h3{font-size: 23px; line-height: 50px;}	+	h3{font-size: 23px; line-height: 50px;}
−	h4{font-size: 21px; line-height: 50px;}	+	h4{font-size: 21px; line-height: 50px;}
−	h5{font-size: 19px; line-height: 50px;}	+	h5{font-size: 19px; line-height: 50px;}
−	h6{font-size: 17px; line-height: 50px;}	+	h6{font-size: 17px; line-height: 50px;}
	.big_framework {		.big_framework {
−	background-color: white;	+	background-color: white;
−	display: block;	+	display: block;
−	width: 100%;	+	width: 100%;
	}		}
	.big_framework .page_banner {		.big_framework .page_banner {
−	margin: auto;	+	margin: auto;
−	width: 100%;	+	width: 100%;
−	text-align: center;	+	text-align: center;
	}		}
	.big_framework .page_big_title_box {		.big_framework .page_big_title_box {
−	margin: 30px auto;	+	margin: 30px auto;
−	width: 1160px;	+	width: 1160px;
−	height: 180px;	+	height: 180px;
−	text-align: right;	+	text-align: right;
−	border-right: 10px solid #3B3B3B;	+	border-right: 10px solid #3B3B3B;
−	padding-right: 30px;	+	padding-right: 30px;
	}		}
	.big_framework .page_big_title_box .page_big_title{		.big_framework .page_big_title_box .page_big_title{
−	font-size: 100px;	+	font-size: 100px;
−	color: #EE2C2C;	+	color: #EE2C2C;
−	line-height: 120px;	+	line-height: 120px;
−	font-weight: 1000;	+	font-weight: 1000;
	}		}
	.big_framework .page_big_title_box .page_big_subtitle{		.big_framework .page_big_title_box .page_big_subtitle{
−	font-size: 40px;	+	font-size: 40px;
−	color: #3B3B3B;	+	color: #3B3B3B;
−	line-height: 60px;	+	line-height: 60px;
	}		}
	.big_framework .medium_framework {		.big_framework .medium_framework {
−	margin: auto;	+	margin: auto;
−	max-width: 1200px;	+	max-width: 1200px;
−	padding: 20px 0px;	+	padding: 20px 0px;
−	width: 90%;	+	width: 90%;
−	text-align: center;	+	text-align: center;
	}		}
	.big_framework .medium_framework p{		.big_framework .medium_framework p{
−	font-size: 17px!important;	+	font-size: 17px!important;
−	line-height: 30px;	+	line-height: 30px;
	}		}
	.home_banner{		.home_banner{
−	background-image: url(https://static.igem.org/mediawiki/2019/7/70/T--SMMU-China--index_bg_1.jpg);	+	background-image: url(https://static.igem.org/mediawiki/2019/7/70/T--SMMU-China--index_bg_1.jpg);
−	background-repeat:no-repeat;	+	background-repeat:no-repeat;
−	background-size: 100% auto;	+	background-size: 100% auto;
−	background-position: top;	+	background-position: top;
	background-attachment: fixed;		background-attachment: fixed;
	height: 790px;		height: 790px;
Line 71:		Line 71:
	.home_banner_title{		.home_banner_title{
−	width: 50%;	+	width: 50%;
−	padding: 100px 0vh 0vh 0vh;	+	padding: 100px 0vh 0vh 0vh;
−	text-align: center;	+	text-align: center;
−	line-height: 400px;	+	line-height: 400px;
−	font-size: 150px;	+	font-size: 150px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 700;	+	font-weight: 700;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
	}		}
	.home_banner_subtitle{		.home_banner_subtitle{
−	width: 50%;	+	width: 50%;
−	text-align: center;	+	text-align: center;
−	line-height: 50px;	+	line-height: 50px;
−	font-size: 30px;	+	font-size: 30px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 500;	+	font-weight: 500;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
	}		}
	.index_block_textbox{		.index_block_textbox{
−	width: 60%;	+	width: 60%;
	padding: 17% 5% 0 5%;		padding: 17% 5% 0 5%;
	position: absolute;		position: absolute;
Line 100:		Line 100:
	#index_block_firstword{		#index_block_firstword{
−	font-size: 40px;	+	font-size: 40px;
	}		}
	.mobile_bg{		.mobile_bg{
−	display: none;	+	display: none;
−	}	+	}
	.pc_bg{		.pc_bg{
−	display: block;	+	display: block;
	}		}
	@media only screen and (max-width:1600px) {		@media only screen and (max-width:1600px) {
−	.home_banner{	+	.home_banner{
−	height: 675px;	+	height: 675px;
−	}	+	}
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 15% 5% 0 5%;	+	padding: 15% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 24px;	+	font-size: 24px;
−	line-height: 45px;	+	line-height: 45px;
−	}	+	}
	}		}
	@media only screen and (max-width:1400px) {		@media only screen and (max-width:1400px) {
−	.home_banner{	+	.home_banner{
−	height: 593px;	+	height: 593px;
−	}	+	}
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 14% 5% 0 5%;	+	padding: 14% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 22px;	+	font-size: 22px;
−	line-height: 45px;	+	line-height: 45px;
−	}	+	}
−	.home_banner_title{	+	.home_banner_title{
−	padding: 100px 0vh 0vh 0vh;	+	padding: 100px 0vh 0vh 0vh;
−	text-align: center;	+	text-align: center;
−	line-height: 300px;	+	line-height: 300px;
−	font-size: 100px;	+	font-size: 100px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 700;	+	font-weight: 700;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
−	.home_banner_subtitle{	+	.home_banner_subtitle{
−	text-align: center;	+	text-align: center;
−	line-height: 40px;	+	line-height: 40px;
−	font-size: 22px;	+	font-size: 22px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 500;	+	font-weight: 500;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
	}		}
	@media only screen and (max-width:1200px) {		@media only screen and (max-width:1200px) {
−	.home_banner{	+	.home_banner{
−	height: 480px;	+	height: 480px;
−	}	+	}
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 13% 5% 0 5%;	+	padding: 13% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 18px;	+	font-size: 18px;
−	line-height: 35px;	+	line-height: 35px;
−	}	+	}
−	.home_banner_title{	+	.home_banner_title{
−	padding: 50px 0vh 0vh 0vh;	+	padding: 50px 0vh 0vh 0vh;
−	text-align: center;	+	text-align: center;
−	line-height: 260px;	+	line-height: 260px;
−	font-size: 80px;	+	font-size: 80px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 700;	+	font-weight: 700;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
−	.home_banner_subtitle{	+	.home_banner_subtitle{
−	text-align: center;	+	text-align: center;
−	line-height: 30px;	+	line-height: 30px;
−	font-size: 20px;	+	font-size: 20px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 500;	+	font-weight: 500;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
	}		}
	@media only screen and (max-width:1000px) {		@media only screen and (max-width:1000px) {
−	.home_banner{	+	.home_banner{
−	background-attachment: unset;	+	background-attachment: unset;
−	height: auto;	+	height: auto;
−	background-position: center;	+	background-position: center;
−	}	+	}
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 25% 5% 0 5%;	+	padding: 25% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 22px;	+	font-size: 22px;
−	line-height: 45px;	+	line-height: 45px;
−	}	+	}
−	.home_banner_title{	+	.home_banner_title{
−	padding: 30px 0vh 0vh 0vh;	+	padding: 30px 0vh 0vh 0vh;
−	text-align: center;	+	text-align: center;
−	line-height: 100px;	+	line-height: 100px;
−	font-size: 40px;	+	font-size: 40px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 700;	+	font-weight: 700;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
−	.home_banner_subtitle{	+	.home_banner_subtitle{
−	padding: 0vh 0vh 30px 0vh;	+	padding: 0vh 0vh 30px 0vh;
−	text-align: center;	+	text-align: center;
−	line-height: 25px;	+	line-height: 25px;
−	font-size: 15px;	+	font-size: 15px;
−	color: #FFF;	+	color: #FFF;
−	font-weight: 500;	+	font-weight: 500;
−	text-shadow:5px 2px 6px #000;	+	text-shadow:5px 2px 6px #000;
−	}	+	}
−	.mobile_bg{	+	.mobile_bg{
−	display: block;	+	display: block;
−	}	+	}
−	.pc_bg{	+	.pc_bg{
−	display: none;	+	display: none;
−	}	+	}
	}		}
	@media only screen and (max-width:800px) {		@media only screen and (max-width:800px) {
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 25% 5% 0 5%;	+	padding: 25% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 18px;	+	font-size: 18px;
−	line-height: 35px;	+	line-height: 35px;
−	}	+	}
	}		}
	@media only screen and (max-width:600px) {		@media only screen and (max-width:600px) {
−	.index_block_textbox{	+	.index_block_textbox{
−	width: 60%;	+	width: 60%;
−	padding: 20% 5% 0 5%;	+	padding: 20% 5% 0 5%;
−	position: absolute;	+	position: absolute;
−	font-size: 14px;	+	font-size: 14px;
−	line-height: 20px;	+	line-height: 20px;
−	}	+	}
	}		}
	.column50{		.column50{
−	display: inline-block;	+	display: inline-block;
−	width: 45%;	+	width: 45%;
−	padding: 0px 2%;	+	padding: 0px 2%;
−	margin-bottom: 0px;	+	margin-bottom: 0px;
	}		}
	.blank_framework{		.blank_framework{
−	height: 90px;	+	height: 90px;
	}		}
	.footer{		.footer{
−	height: 300px;	+	height: 300px;
−	background-color: #282828;	+	background-color: #282828;
	}		}
	.footer_left{		.footer_left{
−	width: 50%;	+	width: 50%;
−	display: inline-block;	+	display: inline-block;
	}		}
	.footer_right{		.footer_right{
−	width: 50%;	+	width: 50%;
−	display: inline-block;	+	display: inline-block;
−	float: right;	+	float: right;
	}		}
	.footer_title{		.footer_title{
−	margin: auto;	+	margin: auto;
−	padding-top: 30px;	+	padding-top: 30px;
−	height: 120px;	+	height: 120px;
−	line-height: 120px;	+	line-height: 120px;
−	font-size: 40px;	+	font-size: 40px;
−	color: #FFF;	+	color: #FFF;
−	text-align: center;	+	text-align: center;
	}		}
	.footer_text{		.footer_text{
−	display: inline-block;	+	display: inline-block;
−	height: 150px;	+	height: 150px;
−	width: 100%;	+	width: 100%;
−	line-height: 40px;	+	line-height: 40px;
−	font-size: 20px!important;	+	font-size: 20px!important;
−	color: #FFF;	+	color: #FFF;
−	text-align: center;	+	text-align: center;
	}		}
	/*header*/		/*header*/
	.index-nav{		.index-nav{
−	width: 100%;	+	width: 100%;
−	border-bottom: 3px solid #eeeeee;	+	border-bottom: 3px solid #eeeeee;
−	height: 83px;	+	height: 83px;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	background:white;	+	background:white;
−	position: fixed;	+	position: fixed;
−	margin-top: 7px;	+	margin-top: 7px;
−	z-index: 999;	+	z-index: 999;
	}		}
	.index-nav a{		.index-nav a{
−	color: #333;	+	color: #333;
	}		}
	.index-nav-frame{		.index-nav-frame{
−	margin: 0px 50px;	+	margin: 0px 50px;
	}		}
	.index-nav-frame-line{		.index-nav-frame-line{
−	color: #333333;	+	color: #333333;
−	background: #ffffff00;	+	background: #ffffff00;
−	float: left;	+	float: left;
−	position: relative;	+	position: relative;
−	display: block;	+	display: block;
−	outline: none;	+	outline: none;
−	cursor: pointer;	+	cursor: pointer;
−	width: 135px;	+	width: 135px;
−	line-height: 80px;	+	line-height: 80px;
−	text-align: center;	+	text-align: center;
−	font-weight: 700;	+	font-weight: 700;
−	font-size: 16px;	+	font-size: 16px;
	}		}
	.index-nav-frame-line.HP-button{		.index-nav-frame-line.HP-button{
−	width: 210px;	+	width: 210px;
	}		}
	.index-nav-frame-logo{		.index-nav-frame-logo{
−	background: #ffffff00;	+	background: #ffffff00;
−	float: left;	+	float: left;
−	position: relative;	+	position: relative;
−	display: block;	+	display: block;
−	outline: none;	+	outline: none;
−	width: 216px;	+	width: 216px;
−	height: 72px;	+	height: 72px;
−	padding-top: 5px;	+	padding-top: 5px;
	}		}
	.index-nav-frame-logo-mobile{		.index-nav-frame-logo-mobile{
−	display: none;	+	display: none;
	}		}
	.index-nav-frame-logo img{		.index-nav-frame-logo img{
−	width: 216px;	+	width: 216px;
	}		}
	.index-nav-frame-line.active{		.index-nav-frame-line.active{
−	color:#b63b4d;	+	color:#b63b4d;
	}		}
	.index-nav-frame-line.first-one{		.index-nav-frame-line.first-one{
−	margin-left: 3%;	+	margin-left: 3%;
−	width: 96px;	+	width: 96px;
	}		}
	.index-nav-frame-line.active > a{		.index-nav-frame-line.active > a{
−	color:#b63b4d;	+	color:#b63b4d;
	}		}
	.index-nav-frame-line-center{		.index-nav-frame-line-center{
−	opacity: 0;	+	opacity: 0;
−	height: 0;	+	height: 0;
−	position: absolute;	+	position: absolute;
−	overflow: hidden;	+	overflow: hidden;
−	width: 100%;	+	width: 100%;
−	transition: all 0.5s;	+	transition: all 0.5s;
−	-webkit-transition: all 0.5s;	+	-webkit-transition: all 0.5s;
−	-moz-transition: all 0.5s;	+	-moz-transition: all 0.5s;
−	/* Firefox 4 */	+	/* Firefox 4 */
−	-o-transition: all 0.5s;	+	-o-transition: all 0.5s;
−	/* Opera */	+	/* Opera */
	}		}
	.index-nav-frame-line-center.need-to-be-hidden{		.index-nav-frame-line-center.need-to-be-hidden{
−	display: none;	+	display: none;
	}		}
	.index-nav-frame-line-li{		.index-nav-frame-line-li{
−	width: 100%;	+	width: 100%;
−	font-weight: 500;	+	font-weight: 500;
−	text-align: center;	+	text-align: center;
−	background: white;	+	background: white;
−	color: #666666;	+	color: #666666;
−	line-height: 50px;	+	line-height: 50px;
	}		}
	.index-nav-frame-line-li:hover{		.index-nav-frame-line-li:hover{
−	background: #444359;	+	background: #444359;
−	color: white;	+	color: white;
	}		}
	.index-nav-frame-line-li:hover a{		.index-nav-frame-line-li:hover a{
−	background: #444359;	+	background: #444359;
−	color: white;	+	color: white;
	}		}
−	.index-nav-frame-line-focus:focus{	+	.index-nav-frame-line-focus:focus-within{
−	display: none;	+	display: none;
	}		}
	.index-nav-frame-line:hover .index-nav-frame-line-center{		.index-nav-frame-line:hover .index-nav-frame-line-center{
−	height:auto;	+	height:auto;
−	opacity: 1;	+	opacity: 1;
	}		}
	.nav-line{		.nav-line{
−	height: 50px;	+	height: 50px;
−	width: 100%;	+	width: 100%;
−	position: relative;	+	position: relative;
−	display: none;	+	display: none;
−	outline: none;	+	outline: none;
	}		}
	.nav-small{		.nav-small{
−	width: 30px;	+	width: 30px;
−	height: 30px;	+	height: 30px;
−	position: absolute;	+	position: absolute;
−	right: 10px;	+	right: 10px;
−	top:10px;	+	top:10px;
−	cursor: pointer;	+	cursor: pointer;
−	display: none;	+	display: none;
−	outline: none;	+	outline: none;
	}		}
	.nav-small img{		.nav-small img{
−	width: 100%;	+	width: 100%;
−	height: 100%;	+	height: 100%;
−	object-fit: cover;	+	object-fit: cover;
	}		}
	.nav-small-focus{		.nav-small-focus{
−	position: absolute;	+	position: absolute;
−	width: 100%;	+	width: 100%;
−	height: 100%;	+	height: 100%;
−	display: none;	+	display: none;
	}		}
−	.nav-small-focus:focus{	+	.nav-small-focus:focus-within{
−	display: none;	+	display: none;
	}		}
Line 470:		Line 470:
	.timeline-main,		.timeline-main,
	.timeline-container > header {		.timeline-container > header {
−	width: 95%;	+	width: 95%;
−	max-width: 1100px;	+	max-width: 1100px;
−	margin: 0 auto;	+	margin: 0 auto;
−	padding: 0 1.875em 3.125em;	+	padding: 0 1.875em 3.125em;
	}		}
	.timeline-container > header {		.timeline-container > header {
−	padding: 2.875em 1.875em 1.875em;	+	padding: 2.875em 1.875em 1.875em;
	}		}
	.timeline-container > header h1 {		.timeline-container > header h1 {
−	font-size: 2.125em;	+	font-size: 2.125em;
−	line-height: 1.3;	+	line-height: 1.3;
−	margin: 0;	+	margin: 0;
−	float: left;	+	float: left;
−	font-weight: 400;	+	font-weight: 400;
	}		}
	.timeline-container > header span {		.timeline-container > header span {
−	display: block;	+	display: block;
−	font-weight: 700;	+	font-weight: 700;
−	text-transform: uppercase;	+	text-transform: uppercase;
−	letter-spacing: 0.5em;	+	letter-spacing: 0.5em;
−	padding: 0 0 0.6em 0.1em;	+	padding: 0 0 0.6em 0.1em;
	}		}
	.timeline-container > header nav {		.timeline-container > header nav {
−	float: right;	+	float: right;
	}		}
	.timeline-container > header nav a {		.timeline-container > header nav a {
−	display: block;	+	display: block;
−	float: left;	+	float: left;
−	position: relative;	+	position: relative;
−	width: 2.5em;	+	width: 2.5em;
−	height: 2.5em;	+	height: 2.5em;
−	background: #fff;	+	background: #fff;
−	border-radius: 50%;	+	border-radius: 50%;
−	color: transparent;	+	color: transparent;
−	margin: 0 0.1em;	+	margin: 0 0.1em;
−	border: 4px solid #47a3da;	+	border: 4px solid #47a3da;
−	text-indent: -8000px;	+	text-indent: -8000px;
	}		}
	.timeline-container > header nav a:after {		.timeline-container > header nav a:after {
−	content: attr(data-info);	+	content: attr(data-info);
−	color: #47a3da;	+	color: #47a3da;
−	position: absolute;	+	position: absolute;
−	width: 600%;	+	width: 600%;
−	top: 120%;	+	top: 120%;
−	text-align: right;	+	text-align: right;
−	right: 0;	+	right: 0;
−	opacity: 0;	+	opacity: 0;
−	pointer-events: none;	+	pointer-events: none;
	}		}
	.timeline-container > header nav a:hover:after {		.timeline-container > header nav a:hover:after {
−	opacity: 1;	+	opacity: 1;
	}		}
	.timeline-container > header nav a:hover {		.timeline-container > header nav a:hover {
−	background: #47a3da;	+	background: #47a3da;
	}		}
−	.icon-drop:before,	+	.icon-drop:before,
	.icon-arrow-left:before {		.icon-arrow-left:before {
−	font-family: 'fontawesome';	+	font-family: 'fontawesome';
−	position: absolute;	+	position: absolute;
−	top: 0;	+	top: 0;
−	width: 100%;	+	width: 100%;
−	height: 100%;	+	height: 100%;
−	speak: none;	+	speak: none;
−	font-style: normal;	+	font-style: normal;
−	font-weight: normal;	+	font-weight: normal;
−	line-height: 2;	+	line-height: 2;
−	text-align: center;	+	text-align: center;
−	color: #47a3da;	+	color: #47a3da;
−	-webkit-font-smoothing: antialiased;	+	-webkit-font-smoothing: antialiased;
−	text-indent: 8000px;	+	text-indent: 8000px;
−	padding-left: 8px;	+	padding-left: 8px;
	}		}
	.timeline-container > header nav a:hover:before {		.timeline-container > header nav a:hover:before {
−	color: #fff;	+	color: #fff;
	}		}
	.icon-drop:before {		.icon-drop:before {
−	content: "\e000";	+	content: "\e000";
	}		}
	.icon-arrow-left:before {		.icon-arrow-left:before {
−	content: "\f060";	+	content: "\f060";
	}		}
	@font-face {		@font-face {
−	font-family: 'ecoico';	+	font-family: 'ecoico';
−	src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot');	+	src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot');
−	src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot?#iefix') format('embedded-opentype'),	+	src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot?#iefix') format('embedded-opentype'),
−	url('https://static.igem.org/mediawiki/2019/8/80/T--SMMU-China--timelineicons_ecoico.woff') format('woff'),	+	url('https://static.igem.org/mediawiki/2019/8/80/T--SMMU-China--timelineicons_ecoico.woff') format('woff'),
−	url('https://static.igem.org/mediawiki/2019/f/f9/T--SMMU-China--timelineicons_ecoico.ttf') format('truetype'),	+	url('https://static.igem.org/mediawiki/2019/f/f9/T--SMMU-China--timelineicons_ecoico.ttf') format('truetype'),
−	url('https://static.igem.org/mediawiki/2019/a/a7/T--SMMU-China--timelineicons_ecoico.svg#ecoico') format('svg');	+	url('https://static.igem.org/mediawiki/2019/a/a7/T--SMMU-China--timelineicons_ecoico.svg#ecoico') format('svg');
−	font-weight: normal;	+	font-weight: normal;
−	font-style: normal;	+	font-style: normal;
	} /* Made with http://icomoon.io/ */		} /* Made with http://icomoon.io/ */
	.cbp_tmtimeline {		.cbp_tmtimeline {
−	margin: 30px 0 0 0;	+	margin: 30px 0 0 0;
−	padding: 0;	+	padding: 0;
−	list-style: none;	+	list-style: none;
−	position: relative;	+	position: relative;
−	}	+	}
	/* The line */		/* The line */
	.cbp_tmtimeline:before {		.cbp_tmtimeline:before {
−	content: '';	+	content: '';
−	position: absolute;	+	position: absolute;
−	top: 0;	+	top: 0;
−	bottom: 0;	+	bottom: 0;
−	width: 10px;	+	width: 10px;
−	background: #afdcf8;	+	background: #afdcf8;
−	left: 20%;	+	left: 20%;
−	margin-left: -10px;	+	margin-left: -10px;
	}		}
	/* The date/time */		/* The date/time */
	.cbp_tmtimeline > li .cbp_tmtime {		.cbp_tmtimeline > li .cbp_tmtime {
−	display: block;	+	display: block;
−	width: 25%;	+	width: 25%;
−	padding-right: 100px;	+	padding-right: 100px;
−	position: absolute;	+	position: absolute;
	}		}
	.cbp_tmtimeline > li .cbp_tmtime span {		.cbp_tmtimeline > li .cbp_tmtime span {
−	display: block;	+	display: block;
−	text-align: right;	+	text-align: right;
	}		}
	.cbp_tmtimeline > li .cbp_tmtime span:first-child {		.cbp_tmtimeline > li .cbp_tmtime span:first-child {
−	font-size: 0.9em;	+	font-size: 0.9em;
−	color: #bdd0db;	+	color: #bdd0db;
	}		}
	.cbp_tmtimeline > li .cbp_tmtime span:last-child {		.cbp_tmtimeline > li .cbp_tmtime span:last-child {
−	font-size: 2.9em;	+	font-size: 2.9em;
−	color: #3594cb;	+	color: #3594cb;
	}		}
	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {		.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
−	color: #6cbfee;	+	color: #6cbfee;
	}		}
	/* Right content */		/* Right content */
	.cbp_tmtimeline > li .cbp_tmlabel {		.cbp_tmtimeline > li .cbp_tmlabel {
−	margin: 0 0 15px 25%;	+	margin: 0 0 15px 25%;
−	background: #3594cb;	+	background: #3594cb;
−	color: #fff;	+	color: #fff;
−	padding: 2em;	+	padding: 2em;
−	font-size: 1.2em;	+	font-size: 1.2em;
−	font-weight: 300;	+	font-weight: 300;
−	line-height: 1.4;	+	line-height: 1.4;
−	position: relative;	+	position: relative;
−	border-radius: 5px;	+	border-radius: 5px;
	}		}
	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {		.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
−	background: #6cbfee;	+	background: #6cbfee;
	}		}
−	.cbp_tmtimeline > li .cbp_tmlabel h2 {	+	.cbp_tmtimeline > li .cbp_tmlabel h2 {
−	margin-top: 0px;	+	margin-top: 0px;
−	padding: 0 0 10px 0;	+	padding: 0 0 10px 0;
−	border-bottom: 1px solid rgba(255,255,255,0.4);	+	border-bottom: 1px solid rgba(255,255,255,0.4);
−	color: #FFF;	+	color: #FFF;
−	font-weight:700;	+	font-weight:700;
	}		}
	/* The triangle */		/* The triangle */
	.cbp_tmtimeline > li .cbp_tmlabel:after {		.cbp_tmtimeline > li .cbp_tmlabel:after {
−	right: 100%;	+	right: 100%;
−	border: solid transparent;	+	border: solid transparent;
−	content: " ";	+	content: " ";
−	height: 0;	+	height: 0;
−	width: 0;	+	width: 0;
−	position: absolute;	+	position: absolute;
−	pointer-events: none;	+	pointer-events: none;
−	border-right-color: #3594cb;	+	border-right-color: #3594cb;
−	border-width: 10px;	+	border-width: 10px;
−	top: 10px;	+	top: 10px;
	}		}
	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {		.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
−	border-right-color: #6cbfee;	+	border-right-color: #6cbfee;
	}		}
	/* The icons */		/* The icons */
	.cbp_tmtimeline > li .cbp_tmicon {		.cbp_tmtimeline > li .cbp_tmicon {
−	width: 40px;	+	width: 40px;
−	height: 40px;	+	height: 40px;
−	font-family: 'ecoico';	+	font-family: 'ecoico';
−	speak: none;	+	speak: none;
−	font-style: normal;	+	font-style: normal;
−	font-weight: normal;	+	font-weight: normal;
−	font-variant: normal;	+	font-variant: normal;
−	text-transform: none;	+	text-transform: none;
−	font-size: 1.4em;	+	font-size: 1.4em;
−	line-height: 40px;	+	line-height: 40px;
−	-webkit-font-smoothing: antialiased;	+	-webkit-font-smoothing: antialiased;
−	position: absolute;	+	position: absolute;
−	color: #fff;	+	color: #fff;
−	background: #46a4da;	+	background: #46a4da;
−	border-radius: 50%;	+	border-radius: 50%;
−	box-shadow: 0 0 0 8px #afdcf8;	+	box-shadow: 0 0 0 8px #afdcf8;
−	text-align: center;	+	text-align: center;
−	left: 20%;	+	left: 20%;
−	top: 0;	+	top: 0;
−	margin: 0 0 0 -25px;	+	margin: 0 0 0 -25px;
	}		}
	.cbp_tmicon-phone:before {		.cbp_tmicon-phone:before {
−	content: "\e000";	+	content: "\e000";
	}		}
	.cbp_tmicon-screen:before {		.cbp_tmicon-screen:before {
−	content: "\e001";	+	content: "\e001";
	}		}
	.cbp_tmicon-mail:before {		.cbp_tmicon-mail:before {
−	content: "\e002";	+	content: "\e002";
	}		}
	.cbp_tmicon-earth:before {		.cbp_tmicon-earth:before {
−	content: "\e003";	+	content: "\e003";
	}		}
Line 707:		Line 707:
	@media only screen and (max-width:1400px) {		@media only screen and (max-width:1400px) {
−	.blank_framework{	+	.blank_framework{
−	height: 61px;	+	height: 61px;
−	}	+	}
−	.big_framework .page_big_title_box{	+	.big_framework .page_big_title_box{
−	height: 120px;	+	height: 120px;
−	width: 90%;	+	width: 90%;
−	margin: 20px auto;	+	margin: 20px auto;
−	text-align: left;	+	text-align: left;
−	border-left: 10px solid #3B3B3B;	+	border-left: 10px solid #3B3B3B;
−	border-right: none;	+	border-right: none;
−	padding-left: 30px;	+	padding-left: 30px;
−	padding-right: 0px;	+	padding-right: 0px;
−	}	+	}
−	.big_framework .page_big_title_box .page_big_title{	+	.big_framework .page_big_title_box .page_big_title{
−	font-size: 50px;	+	font-size: 50px;
−	color: #EE2C2C;	+	color: #EE2C2C;
−	line-height: 80px;	+	line-height: 80px;
−	font-weight: 1000;	+	font-weight: 1000;
−	}	+	}
−	.big_framework .page_big_title_box .page_big_subtitle{	+	.big_framework .page_big_title_box .page_big_subtitle{
−	font-size: 20px;	+	font-size: 20px;
−	color: #3B3B3B;	+	color: #3B3B3B;
−	line-height: 40px;	+	line-height: 40px;
−	}	+	}
−	.column50{	+	.column50{
−	display: inline-block;	+	display: inline-block;
−	width: 100%;	+	width: 100%;
−	padding: 0px;	+	padding: 0px;
−	margin-bottom: 20px;	+	margin-bottom: 20px;
−	}	+	}
−	.footer{	+	.footer{
−	height: 600px;	+	height: 600px;
−	}	+	}
−	.footer_left{	+	.footer_left{
−	width: 100%;	+	width: 100%;
−	}	+	}
−	.footer_right{	+	.footer_right{
−	width: 100%;	+	width: 100%;
−	}	+	}
−	.index-nav{	+	.index-nav{
−	height: inherit;	+	height: inherit;
−	}	+	}
−	.index-nav-frame-line-li a{	+	.index-nav-frame-line-li a{
−	display: block;	+	display: block;
−	color: white;	+	color: white;
−	}	+	}
−	.nav-line{	+	.nav-line{
−	display: block;	+	display: block;
−	border-bottom: 1px solid #eeeeee;	+	border-bottom: 1px solid #eeeeee;
−	}	+	}
−	.nav-small{	+	.nav-small{
−	display: block;	+	display: block;
−	}	+	}
−	.nav-small:focus~.index-nav-frame-line{	+	.nav-small:focus-within~.index-nav-frame-line{
−	height: auto;	+	height: auto;
−	border-bottom: 1px solid #ccc;	+	border-bottom: 1px solid #ccc;
−	}	+	}
−	.nav-small:focus .nav-small-focus{	+	.nav-small:focus-within .nav-small-focus{
−	display: block;	+	display: block;
−	}	+	}
−	.index-nav-frame{	+	.index-nav-frame{
−	width: 100%;	+	width: 100%;
−	margin: 0px;	+	margin: 0px;
−	}	+	}
−	.index-nav-frame-logo{	+	.index-nav-frame-logo{
−	display: none;	+	display: none;
−	}	+	}
−	.index-nav-frame-logo-mobile{	+	.index-nav-frame-logo-mobile{
−	background: #ffffff00;	+	background: #ffffff00;
−	position: relative;	+	position: relative;
−	display: block;	+	display: block;
−	outline: none;	+	outline: none;
−	width: inherit;	+	width: inherit;
−	height: inherit;	+	height: inherit;
−	}	+	}
−	.index-nav-frame-logo-mobile img{	+	.index-nav-frame-logo-mobile img{
−	height: inherit;	+	height: inherit;
−	}	+	}
−	.index-nav-frame-line{	+	.index-nav-frame-line{
−	width: 100%;	+	width: 100%;
−	height: 0;	+	height: 0;
−	overflow: hidden;	+	overflow: hidden;
−	}	+	}
−	.index-nav-frame-line.first-one{	+	.index-nav-frame-line.first-one{
−	margin-left: 0px;	+	margin-left: 0px;
−	width: 100%;	+	width: 100%;
−	}	+	}
−	.index-nav-frame-line.HP-button{	+	.index-nav-frame-line.HP-button{
−	width: 100%;	+	width: 100%;
−	}	+	}
−	.index-nav-frame-line-center{	+	.index-nav-frame-line-center{
−	position: relative;	+	position: relative;
−	background: #444359;	+	background: #444359;
−	}	+	}
−	.index-nav-frame-line-center.need-to-be-hidden{	+	.index-nav-frame-line-center.need-to-be-hidden{
−	display: block;	+	display: block;
−	}	+	}
−	.index-nav-frame-line:hover .index-nav-frame-line-center{	+	.index-nav-frame-line:hover .index-nav-frame-line-center{
−	height:0;	+	height:0;
−	opacity: 0;	+	opacity: 0;
−	}	+	}
−	.index-nav-frame-line-li{	+	.index-nav-frame-line-li{
−	border-bottom: 1px solid #4b4a5e;	+	border-bottom: 1px solid #4b4a5e;
−	color: #d9d9d9;	+	color: #d9d9d9;
−	background: #444359;	+	background: #444359;
−	}	+	}
−	.index-nav-frame-line-li:hover{	+	.index-nav-frame-line-li:hover{
−	background: #b63b4d;	+	background: #b63b4d;
−	}	+	}
−	.index-nav-frame-line:focus{	+	.index-nav-frame-line:focus-within{
−	height: auto;	+	height: auto;
−	border-bottom: 1px solid #ccc;	+	border-bottom: 1px solid #ccc;
−	}	+	}
−	.index-nav-frame-line:focus>.index-nav-frame-line-center{	+	.index-nav-frame-line:focus-within>.index-nav-frame-line-center{
−	height:auto;	+	height:auto;
−	opacity: 1;	+	opacity: 1;
−	}	+	}
−	.index-nav-frame-line:focus .index-nav-frame-line-header{	+	.index-nav-frame-line:focus-within .index-nav-frame-line-header{
−	color: #B63B4D;	+	color: #B63B4D;
−	}	+	}
−	.index-nav-frame-line-focus{	+	.index-nav-frame-line-focus{
−	display: none;	+	display: none;
−	width: 100%;	+	width: 100%;
−	height: 50px;	+	height: 50px;
−	position: absolute;	+	position: absolute;
−	left: 0;	+	left: 0;
−	top: 0;	+	top: 0;
−	}	+	}
−	.index-nav-frame-line:focus .index-nav-frame-line-focus{	+	.index-nav-frame-line:focus-within .index-nav-frame-line-focus{
−	display: block;	+	display: block;
−	}	+	}
−	/*Timeline*/	+	/*Timeline*/
−	.cbp_tmtimeline:before {	+	.cbp_tmtimeline:before {
−	display: none;	+	display: none;
−	}	+	}
−	.cbp_tmtimeline > li .cbp_tmtime {	+	.cbp_tmtimeline > li .cbp_tmtime {
−	width: 100%;	+	width: 100%;
−	position: relative;	+	position: relative;
−	padding: 0 0 20px 0;	+	padding: 0 0 20px 0;
−	}	+	}
−	.cbp_tmtimeline > li .cbp_tmtime span {	+	.cbp_tmtimeline > li .cbp_tmtime span {
−	text-align: left;	+	text-align: left;
−	}	+	}
−	.cbp_tmtimeline > li .cbp_tmlabel {	+	.cbp_tmtimeline > li .cbp_tmlabel {
−	margin: 0 0 30px 0;	+	margin: 0 0 30px 0;
−	padding: 1em;	+	padding: 1em;
−	font-weight: 400;	+	font-weight: 400;
−	font-size: 95%;	+	font-size: 95%;
−	}	+	}
−	.cbp_tmtimeline > li .cbp_tmlabel:after {	+	.cbp_tmtimeline > li .cbp_tmlabel:after {
−	right: auto;	+	right: auto;
−	left: 20px;	+	left: 20px;
−	border-right-color: transparent;	+	border-right-color: transparent;
−	border-bottom-color: #3594cb;	+	border-bottom-color: #3594cb;
−	top: -20px;	+	top: -20px;
−	}	+	}
−	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {	+	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
−	border-right-color: transparent;	+	border-right-color: transparent;
−	border-bottom-color: #6cbfee;	+	border-bottom-color: #6cbfee;
−	}	+	}
−	.cbp_tmtimeline > li .cbp_tmicon {	+	.cbp_tmtimeline > li .cbp_tmicon {
−	position: relative;	+	position: relative;
−	float: right;	+	float: right;
−	left: auto;	+	left: auto;
−	margin: -55px 5px 0 0px;	+	margin: -55px 5px 0 0px;
−	}	+	}
	}		}

---

Revision as of 13:40, 19 October 2019

/*general*/ @font-face{

   font-family: 'SMMUFONT';
   src:url('https://static.igem.org/mediawiki/2019/8/8f/T--SMMU-China--SMMUFONT.ttf') format('truetype');

} body,h1,h2,h3,h4,h5,h6,p,th,td{font-family:"SMMUFONT"!important;} a{color:#333; text-decoration:none;} h1{font-size: 27px; line-height: 50px;} h2{font-size: 25px; line-height: 50px;} h3{font-size: 23px; line-height: 50px;} h4{font-size: 21px; line-height: 50px;} h5{font-size: 19px; line-height: 50px;} h6{font-size: 17px; line-height: 50px;}

.big_framework {

   background-color: white;
   display: block;
   width: 100%;

}

.big_framework .page_banner {

   margin: auto;
   width: 100%;
   text-align: center;

}

.big_framework .page_big_title_box {

   margin: 30px auto;
   width: 1160px;
   height: 180px;
   text-align: right;
   border-right: 10px solid #3B3B3B;
   padding-right: 30px;

}

.big_framework .page_big_title_box .page_big_title{

   font-size: 100px;
   color: #EE2C2C;
   line-height: 120px;
   font-weight: 1000;

}

.big_framework .page_big_title_box .page_big_subtitle{

   font-size: 40px;
   color: #3B3B3B;
   line-height: 60px;

}

.big_framework .medium_framework {

   margin: auto;
   max-width: 1200px;
   padding: 20px 0px;
   width: 90%;
   text-align: center;

}

.big_framework .medium_framework p{

   font-size: 17px!important;
   line-height: 30px;

}

.home_banner{

   background-image: url();
   background-repeat:no-repeat;
   background-size: 100% auto;
   background-position: top;
   background-attachment: fixed;
   height: 790px;

}

.home_banner_title{

   width: 50%;
   padding: 100px 0vh 0vh 0vh;
   text-align: center;
   line-height: 400px;
   font-size: 150px;
   color: #FFF;
   font-weight: 700;
   text-shadow:5px 2px 6px #000;

}

.home_banner_subtitle{

   width: 50%;
   text-align: center;
   line-height: 50px;
   font-size: 30px;
   color: #FFF;
   font-weight: 500;
   text-shadow:5px 2px 6px #000;

}

.index_block_textbox{

   width: 60%;
   padding: 17% 5% 0 5%;
   position: absolute;
   font-size: 25px;
   line-height: 45px;

}

1. index_block_firstword{

   font-size: 40px;

}

.mobile_bg{

   display: none;

}

.pc_bg{

   display: block;

}

@media only screen and (max-width:1600px) {

   .home_banner{
       height: 675px;
   }

   .index_block_textbox{
       width: 60%;
       padding: 15% 5% 0 5%;
       position: absolute;
       font-size: 24px;
       line-height: 45px;
   }

}

@media only screen and (max-width:1400px) {

   .home_banner{
       height: 593px;
   }

   .index_block_textbox{
       width: 60%;
       padding: 14% 5% 0 5%;
       position: absolute;
       font-size: 22px;
       line-height: 45px;
   }

   .home_banner_title{
       padding: 100px 0vh 0vh 0vh;
       text-align: center;
       line-height: 300px;
       font-size: 100px;
       color: #FFF;
       font-weight: 700;
       text-shadow:5px 2px 6px #000;
   }

   .home_banner_subtitle{
       text-align: center;
       line-height: 40px;
       font-size: 22px;
       color: #FFF;
       font-weight: 500;
       text-shadow:5px 2px 6px #000;
   }

}

@media only screen and (max-width:1200px) {

   .home_banner{
       height: 480px;
   }

   .index_block_textbox{
       width: 60%;
       padding: 13% 5% 0 5%;
       position: absolute;
       font-size: 18px;
       line-height: 35px;
   }

   .home_banner_title{
       padding: 50px 0vh 0vh 0vh;
       text-align: center;
       line-height: 260px;
       font-size: 80px;
       color: #FFF;
       font-weight: 700;
       text-shadow:5px 2px 6px #000;
   }

   .home_banner_subtitle{
       text-align: center;
       line-height: 30px;
       font-size: 20px;
       color: #FFF;
       font-weight: 500;
       text-shadow:5px 2px 6px #000;
   }

}

@media only screen and (max-width:1000px) {

   .home_banner{
       background-attachment: unset;
       height: auto;
       background-position: center;
   }

   .index_block_textbox{
       width: 60%;
       padding: 25% 5% 0 5%;
       position: absolute;
       font-size: 22px;
       line-height: 45px;
   }

   .home_banner_title{
       padding: 30px 0vh 0vh 0vh;
       text-align: center;
       line-height: 100px;
       font-size: 40px;
       color: #FFF;
       font-weight: 700;
       text-shadow:5px 2px 6px #000;
   }

   .home_banner_subtitle{
       padding: 0vh 0vh 30px 0vh;
       text-align: center;
       line-height: 25px;
       font-size: 15px;
       color: #FFF;
       font-weight: 500;
       text-shadow:5px 2px 6px #000;
   }

   .mobile_bg{
       display: block;
   }

   .pc_bg{
       display: none;
   }

}

@media only screen and (max-width:800px) {

   .index_block_textbox{
       width: 60%;
       padding: 25% 5% 0 5%;
       position: absolute;
       font-size: 18px;
       line-height: 35px;
   }

}

@media only screen and (max-width:600px) {

   .index_block_textbox{
       width: 60%;
       padding: 20% 5% 0 5%;
       position: absolute;
       font-size: 14px;
       line-height: 20px;
   }

}

.column50{

   display: inline-block;
   width: 45%;
   padding: 0px 2%;
   margin-bottom: 0px;

}

.blank_framework{

   height: 90px;

}

.footer{

   height: 300px;
   background-color: #282828;

}

.footer_left{

   width: 50%;
   display: inline-block;

}

.footer_right{

   width: 50%;
   display: inline-block;
   float: right;

}

.footer_title{

   margin: auto;
   padding-top: 30px;
   height: 120px;
   line-height: 120px;
   font-size: 40px;
   color: #FFF;
   text-align: center;

}

.footer_text{

   display: inline-block;
   height: 150px;
   width: 100%;
   line-height: 40px;
   font-size: 20px!important;
   color: #FFF;
   text-align: center;

}

/*header*/ .index-nav{

   width: 100%;
   border-bottom: 3px solid #eeeeee;
   height: 83px;
   box-sizing: border-box;
   background:white;
   position: fixed;
   margin-top: 7px;
   z-index: 999;

}

.index-nav a{

   color: #333;

}

.index-nav-frame{

   margin: 0px 50px;

}

.index-nav-frame-line{

   color: #333333;
   background: #ffffff00;
   float: left;
   position: relative;
   display: block;
   outline: none;
   cursor: pointer;
   width: 135px;
   line-height: 80px;
   text-align: center;
   font-weight: 700;
   font-size: 16px;

}

.index-nav-frame-line.HP-button{

   width: 210px;

}

.index-nav-frame-logo{

   background: #ffffff00;
   float: left;
   position: relative;
   display: block;
   outline: none;
   width: 216px;
   height: 72px;
   padding-top: 5px;

}

.index-nav-frame-logo-mobile{

   display: none;

}

.index-nav-frame-logo img{

   width: 216px;

}

.index-nav-frame-line.active{

   color:#b63b4d;

}

.index-nav-frame-line.first-one{

   margin-left: 3%;
   width: 96px;

}

.index-nav-frame-line.active > a{

   color:#b63b4d;

}

.index-nav-frame-line-center{

   opacity: 0;
   height: 0;
   position: absolute;
   overflow: hidden;
   width: 100%;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   /* Firefox 4 */
   -o-transition: all 0.5s;
   /* Opera */

}

.index-nav-frame-line-center.need-to-be-hidden{

   display: none;

}

.index-nav-frame-line-li{

   width: 100%;
   font-weight: 500;
   text-align: center;
   background: white;
   color: #666666;
   line-height: 50px;

}

.index-nav-frame-line-li:hover{

   background: #444359;
   color: white;

}

.index-nav-frame-line-li:hover a{

   background: #444359;
   color: white;

}

.index-nav-frame-line-focus:focus-within{

   display: none;

}

.index-nav-frame-line:hover .index-nav-frame-line-center{

   height:auto;
   opacity: 1;

}

.nav-line{

   height: 50px;
   width: 100%;
   position: relative;
   display: none;
   outline: none;

}

.nav-small{

   width: 30px;
   height: 30px;
   position: absolute;
   right: 10px;
   top:10px;
   cursor: pointer;
   display: none;
   outline: none;

}

.nav-small img{

   width: 100%;
   height: 100%;
   object-fit: cover;

}

.nav-small-focus{

   position: absolute;
   width: 100%;
   height: 100%;
   display: none;

}

.nav-small-focus:focus-within{

   display: none;

}

/* Timeline */

.timeline-container *, .timeline-container *:after, .timeline-container *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }

.timeline-main, .timeline-container > header {

   width: 95%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 1.875em 3.125em;

}

.timeline-container > header {

   padding: 2.875em 1.875em 1.875em;

}

.timeline-container > header h1 {

   font-size: 2.125em;
   line-height: 1.3;
   margin: 0;
   float: left;
   font-weight: 400;

}

.timeline-container > header span {

   display: block;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5em;
   padding: 0 0 0.6em 0.1em;

}

.timeline-container > header nav {

   float: right;

}

.timeline-container > header nav a {

   display: block;
   float: left;
   position: relative;
   width: 2.5em;
   height: 2.5em;
   background: #fff;
   border-radius: 50%;
   color: transparent;
   margin: 0 0.1em;
   border: 4px solid #47a3da;
   text-indent: -8000px;

}

.timeline-container > header nav a:after {

   content: attr(data-info);
   color: #47a3da;
   position: absolute;
   width: 600%;
   top: 120%;
   text-align: right;
   right: 0;
   opacity: 0;
   pointer-events: none;

}

.timeline-container > header nav a:hover:after {

   opacity: 1;

}

.timeline-container > header nav a:hover {

   background: #47a3da;

}

.icon-drop:before, .icon-arrow-left:before {

   font-family: 'fontawesome';
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   speak: none;
   font-style: normal;
   font-weight: normal;
   line-height: 2;
   text-align: center;
   color: #47a3da;
   -webkit-font-smoothing: antialiased;
   text-indent: 8000px;
   padding-left: 8px;

}

.timeline-container > header nav a:hover:before {

   color: #fff;

}

.icon-drop:before {

   content: "\e000";

}

.icon-arrow-left:before {

   content: "\f060";

}

@font-face {

   font-family: 'ecoico';
   src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot');
   src:url('https://static.igem.org/mediawiki/2019/3/36/T--SMMU-China--timelineicons_ecoico.eot?#iefix') format('embedded-opentype'),
   url('https://static.igem.org/mediawiki/2019/8/80/T--SMMU-China--timelineicons_ecoico.woff') format('woff'),
   url('https://static.igem.org/mediawiki/2019/f/f9/T--SMMU-China--timelineicons_ecoico.ttf') format('truetype'),
   url('https://static.igem.org/mediawiki/2019/a/a7/T--SMMU-China--timelineicons_ecoico.svg#ecoico') format('svg');
   font-weight: normal;
   font-style: normal;

} /* Made with http://icomoon.io/ */

.cbp_tmtimeline {

   margin: 30px 0 0 0;
   padding: 0;
   list-style: none;
   position: relative;

}

/* The line */ .cbp_tmtimeline:before {

   content: ;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 10px;
   background: #afdcf8;
   left: 20%;
   margin-left: -10px;

}

/* The date/time */ .cbp_tmtimeline > li .cbp_tmtime {

   display: block;
   width: 25%;
   padding-right: 100px;
   position: absolute;

}

.cbp_tmtimeline > li .cbp_tmtime span {

   display: block;
   text-align: right;

}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {

   font-size: 0.9em;
   color: #bdd0db;

}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {

   font-size: 2.9em;
   color: #3594cb;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {

   color: #6cbfee;

}

/* Right content */ .cbp_tmtimeline > li .cbp_tmlabel {

   margin: 0 0 15px 25%;
   background: #3594cb;
   color: #fff;
   padding: 2em;
   font-size: 1.2em;
   font-weight: 300;
   line-height: 1.4;
   position: relative;
   border-radius: 5px;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {

   background: #6cbfee;

}

.cbp_tmtimeline > li .cbp_tmlabel h2 {

   margin-top: 0px;
   padding: 0 0 10px 0;
   border-bottom: 1px solid rgba(255,255,255,0.4);
   color: #FFF;
   font-weight:700;

}

/* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after {

   right: 100%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-right-color: #3594cb;
   border-width: 10px;
   top: 10px;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {

   border-right-color: #6cbfee;

}

/* The icons */ .cbp_tmtimeline > li .cbp_tmicon {

   width: 40px;
   height: 40px;
   font-family: 'ecoico';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   font-size: 1.4em;
   line-height: 40px;
   -webkit-font-smoothing: antialiased;
   position: absolute;
   color: #fff;
   background: #46a4da;
   border-radius: 50%;
   box-shadow: 0 0 0 8px #afdcf8;
   text-align: center;
   left: 20%;
   top: 0;
   margin: 0 0 0 -25px;

}

.cbp_tmicon-phone:before {

   content: "\e000";

}

.cbp_tmicon-screen:before {

   content: "\e001";

}

.cbp_tmicon-mail:before {

   content: "\e002";

}

.cbp_tmicon-earth:before {

   content: "\e003";

}

@media only screen and (max-width:1400px) {

   .blank_framework{
       height: 61px;
   }

   .big_framework .page_big_title_box{
       height: 120px;
       width: 90%;
       margin: 20px auto;
       text-align: left;
       border-left: 10px solid #3B3B3B;
       border-right: none;
       padding-left: 30px;
       padding-right: 0px;

   }

   .big_framework .page_big_title_box .page_big_title{
       font-size: 50px;
       color: #EE2C2C;
       line-height: 80px;
       font-weight: 1000;
   }

   .big_framework .page_big_title_box .page_big_subtitle{
       font-size: 20px;
       color: #3B3B3B;
       line-height: 40px;
   }

   .column50{
       display: inline-block;
       width: 100%;
       padding: 0px;
       margin-bottom: 20px;
   }

   .footer{
       height: 600px;
   }

   .footer_left{
       width: 100%;
   }

   .footer_right{
       width: 100%;
   }

   .index-nav{
       height: inherit;
   }

   .index-nav-frame-line-li a{
       display: block;
       color: white;
   }

   .nav-line{
       display: block;
       border-bottom: 1px solid #eeeeee;
   }

   .nav-small{
       display: block;
   }

   .nav-small:focus-within~.index-nav-frame-line{
       height: auto;
       border-bottom: 1px solid #ccc;
   }

   .nav-small:focus-within .nav-small-focus{
       display: block;
   }

   .index-nav-frame{
       width: 100%;
       margin: 0px;
   }

   .index-nav-frame-logo{
       display: none;
   }

   .index-nav-frame-logo-mobile{
       background: #ffffff00;
       position: relative;
       display: block;
       outline: none;
       width: inherit;
       height: inherit;
   }

   .index-nav-frame-logo-mobile img{
       height: inherit;
   }

   .index-nav-frame-line{
       width: 100%;
       height: 0;
       overflow: hidden;
   }

   .index-nav-frame-line.first-one{
       margin-left: 0px;
       width: 100%;
   }

   .index-nav-frame-line.HP-button{
       width: 100%;
   }

   .index-nav-frame-line-center{
       position: relative;
       background: #444359;
   }

   .index-nav-frame-line-center.need-to-be-hidden{
       display: block;
   }

   .index-nav-frame-line:hover .index-nav-frame-line-center{
       height:0;
       opacity: 0;
   }

   .index-nav-frame-line-li{
       border-bottom: 1px solid #4b4a5e;
       color: #d9d9d9;
       background: #444359;
   }

   .index-nav-frame-line-li:hover{
       background: #b63b4d;
   }

   .index-nav-frame-line:focus-within{
       height: auto;
       border-bottom: 1px solid #ccc;
   }

   .index-nav-frame-line:focus-within>.index-nav-frame-line-center{
       height:auto;
       opacity: 1;
   }

   .index-nav-frame-line:focus-within .index-nav-frame-line-header{
       color: #B63B4D;
   }

   .index-nav-frame-line-focus{
       display: none;
       width: 100%;
       height: 50px;
       position: absolute;
       left: 0;
       top: 0;
   }

   .index-nav-frame-line:focus-within .index-nav-frame-line-focus{
       display: block;
   }

   /*Timeline*/
   .cbp_tmtimeline:before {
       display: none;
   }

   .cbp_tmtimeline > li .cbp_tmtime {
       width: 100%;
       position: relative;
       padding: 0 0 20px 0;
   }

   .cbp_tmtimeline > li .cbp_tmtime span {
       text-align: left;
   }

   .cbp_tmtimeline > li .cbp_tmlabel {
       margin: 0 0 30px 0;
       padding: 1em;
       font-weight: 400;
       font-size: 95%;
   }

   .cbp_tmtimeline > li .cbp_tmlabel:after {
       right: auto;
       left: 20px;
       border-right-color: transparent;
       border-bottom-color: #3594cb;
       top: -20px;
   }

   .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
       border-right-color: transparent;
       border-bottom-color: #6cbfee;
   }

   .cbp_tmtimeline > li .cbp_tmicon {
       position: relative;
       float: right;
       left: auto;
       margin: -55px 5px 0 0px;
   }

}