Difference between revisions of "Template:UT-Tokyo/CSS"

Revision as of 08:10, 26 August 2015 (view source) Iosikharenko (Talk | contribs) ← Older edit		Latest revision as of 00:11, 19 September 2015 (view source) Iosikharenko (Talk | contribs)
(59 intermediate revisions by the same user not shown)
Line 1:		Line 1:
		+	/***********************************************************************
		+	/  WIKI INITIALIZATION
		+	/**********************************************************************/
		+
		+	h1.firstHeading {
		+	display: none !important;
		+	}
		+
		+	#top_menu_14 .has_submenu{
		+	height:16px;
		+	}
		+
		+	#content{
		+	width:100%;
		+	margin:0;
		+	padding:0;
		+	}
		+
		+	#content a{
		+	font-size:20px;
		+	line-height:1.2em;
		+	}
		+
		+	.panel p,
		+	.panel a{
		+	font-size:16px;
		+	line-height:1.3em;
		+	}
		+
	/***********************************************************************		/***********************************************************************
	/  GENERAL		/  GENERAL
Line 6:		Line 35:
	src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");		src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");
	}		}
−
	@font-face{		@font-face{
	font-family:'Open Sans';		font-family:'Open Sans';
	src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");		src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");
	}		}
−
	@font-face{		@font-face{
	font-family:'Open Sans';		font-family:'Open Sans';
Line 17:		Line 44:
	font-weight:bold;		font-weight:bold;
	}		}
−
	@font-face{		@font-face{
	font-family:'Open Sans';		font-family:'Open Sans';
Line 23:		Line 49:
	font-style:italic;		font-style:italic;
	}		}
−
	@font-face{		@font-face{
	font-family:'Open Sans';		font-family:'Open Sans';
Line 31:		Line 56:
	}		}
−	h1.firstHeading {	+	*{
−	display: none !important;	+
−	}	+
−		+
−	.contents{	+
−	width:100%;	+
−	height:0px;	+
−	}	+
−		+
−	* {	+
	-webkit-box-sizing: border-box;		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;		-moz-box-sizing: border-box;
Line 46:		Line 62:
	}		}
−	canvas {	+	canvas{
	display: block;		display: block;
	margin: auto;		margin: auto;
	}		}
−	body {	+	body{
	width:100%;		width:100%;
−	background: white;	+	background: #CCC;
	-webkit-font-smoothing: antialiased;		-webkit-font-smoothing: antialiased;
−	background-color:#DDDDDD;
	}		}
Line 77:		Line 92:
	}		}
−	h1 {	+	h1, h2{
	font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;		font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
	background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');		background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');
Line 88:		Line 103:
	margin:0.5em;		margin:0.5em;
	}		}
−		+	h2{
−	h2 {	+
−	font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;	+
−	background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');	+
−	background-size:contain;	+
−	background-repeat: no-repeat;	+
−	padding-left:2em;	+
	text-align: left;		text-align: left;
−	font-size:2em;
−	font-weight: Normal;
−	margin:0.5em;
	}		}
−	h3 {	+	h3, h4, h5{
	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;		font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	text-align: left;		text-align: left;
Line 108:		Line 114:
	margin:0.5em;		margin:0.5em;
	}		}
−		+	h4{
−	h4 {	+
−	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;	+
	text-align:center;		text-align:center;
−	font-weight:bold;
	font-size:1em;		font-size:1em;
−	margin:0.5em;
	}		}
−		+	h5{
−	h5 {	+
−	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;	+
−	text-align:left;	+
−	font-weight:bold;	+
	font-size:1.2em;		font-size:1.2em;
−	margin:0.5em;
	}		}
−	h4 span {	+	h4 span{
	font-weight:normal;		font-weight:normal;
	}		}
−	p {	+	p{
	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;		font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size:1em;		font-size:1em;
Line 162:		Line 159:
	.panel ul li{		.panel ul li{
−	border-left:solid 5px red;	+	border-left:solid 2px rgb(255,109,60);
	}		}
	.panel ul li p{		.panel ul li p{
−	line-height:1em;	+	line-height:1.2em;
	margin:5px;		margin:5px;
	}		}
Line 177:		Line 174:
	}		}
−	.table {	+	.table{
	display:block;		display:block;
	margin:0 auto;		margin:0 auto;
Line 186:		Line 183:
	.table img.figure{		.table img.figure{
	display: inline;		display: inline;
−	max-width:50%;	+	max-height:200px;
		+
	}		}
−	table {	+	table{
	margin:1em auto;		margin:1em auto;
	}		}
Line 197:		Line 195:
	}		}
−	table tr {	+	table tr{
	border-bottom:solid 1px black;		border-bottom:solid 1px black;
	}		}
−	table td {	+	table td{
	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;		font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
−	font-size:1em;	+	font-size:16px;
	line-height:2em;		line-height:2em;
	text-align:left;		text-align:left;
Line 210:		Line 208:
	}		}
−	hr {	+	hr{
	border: 0;		border: 0;
	height: 1px;		height: 1px;
Line 217:		Line 215:
	}		}
		+	u{
		+	}
		+
		+	#preload{
		+	display:none;
		+	}
		+
		+	#loader{
		+	width:100%;
		+	position: fixed;
		+	top:40%;
		+	text-align: center;
		+	}
		+
		+	.main{
		+	position:absolute;
		+	transition: all 0.6s;
		+	width:100%;
		+	top:60px;
		+	margin:auto;
		+	overflow-x:hidden;
		+	overflow-y:auto;
		+	}
		+
		+	.panel{
		+	position:relative;
		+	width:90%;
		+	padding:20px;
		+	margin:50px auto;
		+	height:auto;
		+	background:rgba(255,255,255,0.6);
		+	}
		+
		+	.panel img{
		+	visibility: visible;
		+	}
		+
		+	.panel-black{
		+	background-color:rgba(0,0,0,0.6);
		+	width:100%;
		+	padding-top:10px;
		+	padding-bottom:10px;
		+	-webkit-box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
		+	box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
		+	}
		+
		+	#footer h1{
		+	font-family:'Homenaje';
		+	background:none;
		+	padding:0px;
		+	font-size:1.8em;
		+	color:white;
		+	margin-bottom:0;
		+	}
		+
		+	#footer img{
		+	display:inline-block;
		+	margin:10px;
		+	width:200px;
		+	max-height:60px;
		+	filter: gray;
		+	-webkit-filter: grayscale(100%);
		+	opacity:0.5;
		+	}
		+	#footer img:hover{
		+	filter: none;
		+	-webkit-filter: grayscale(0%);
		+	opacity:1;
		+	}
		+	#footer img.sns{
		+	width:32px;
		+	height:32px;
		+	margin:5px;
		+	}
		+
		+	#footer .copyright{
		+	text-align:center;
		+	font-size:1em;
		+	line-height:2em;
		+	color:white;
		+	}
		+
		+	#footer .sns{
		+
		+	}
	/***********************************************************************		/***********************************************************************
	/  SWITCHS and BUTTONS		/  SWITCHS and BUTTONS
Line 225:		Line 308:
	width:100px;		width:100px;
	position:relative;		position:relative;
−	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;	+	font-family: 'Homenaje';
	font-size:18px;		font-size:18px;
−	background:#ccc;	+	background:#888;
	-webkit-transition: all .2s ease;		-webkit-transition: all .2s ease;
	transition: all .2s ease;		transition: all .2s ease;
Line 248:		Line 331:
	right:11px;		right:11px;
	top:12px;		top:12px;
−	color:#fff	+	color:#fff;
	}		}
	.toggle-sw:hover:after{		.toggle-sw:hover:after{
Line 258:		Line 341:
	}		}
	.toggle-sw.on{		.toggle-sw.on{
−	background:rgb(255, 79, 0);	+	background:rgb(255, 109, 64);
	}		}
	.toggle-sw.on:after{		.toggle-sw.on:after{
Line 265:		Line 348:
	.toggle-sw.on:hover:after{		.toggle-sw.on:hover:after{
	left:50px;		left:50px;
		+	}
		+	.toggle-sw.mine:after{
		+	background-size:cover;
		+	background-image:url('https://static.igem.org/mediawiki/2015/e/ee/UT_TOKYO_Mine.png')
	}		}
−	.square-sw{	+	.check{
−	display:inline-block;	+	position:relative;
−	height:40px;	+	padding-left:30px;
−	width:40px;	+	font-weight: bold;
−	position:relative;	+
−	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;	+
−	font-size:18px;	+
−	background:rgb(255,79,0);	+
−	-webkit-transition: all .2s ease;	+
−	transition: all .2s ease;	+
	}		}
−	.square-sw:hover{	+	.check::after{
−	animation:blink 0.4s ease-in-out infinite alternate;	+	content:"";
−	-webkit-animation:blink 0.4s ease-in-out infinite alternate;	+	background-image:url('https://static.igem.org/mediawiki/2015/1/17/UT_TOKYO_Check.png');
		+	background-size:contain;
		+	position:absolute;
		+	top:0;
		+	left:0;
		+	width:1.5em;
		+	height:1.5em;
	}		}
Line 286:		Line 373:
	/  PATTERN		/  PATTERN
	/**********************************************************************/		/**********************************************************************/
−	.canvas-control {	+	.canvas-control{
	display:block;		display:block;
−	margin:auto;	+	position:absolute;
−	width:300px;	+	top:1px;
−	height:45px;	+	left:1px;
−	margin-top:5px;	+	width:298px;
−	margin-bottom:5px;	+	height:298px;
		+	background-color:rgba(255,255,255,0.3);
		+	}
		+
		+	.canvas-control p{
		+	line-height:300px !important;
		+	margin:0 auto;
	font-family: 'Homenaje';		font-family: 'Homenaje';
		+	font-size:24px;
		+	color: white;
	text-align:center;		text-align:center;
−	border-right:solid 2px rgb(255, 79, 0);	+	vertical-align: middle;
−	border-bottom:solid 2px rgb(255, 79, 0);	+	}
		+
		+	.canvas-control:hover{
		+	animation:blink 0.3s ease-in-out infinite alternate;
		+	-webkit-animation:blink 0.3s ease-in-out infinite alternate;
		+	}
		+
		+	.canvas-stats{
		+	display:none;
		+	position:absolute;
		+	width:300px;
		+	padding:2px;
		+	z-index:500;
		+	}
		+
		+	.canvas-stats:hover{
		+	display:block !important;
		+	}
		+
		+	.canvas-stats .onoff{
		+	display:inline-block;
		+	}
		+
		+	.canvas-stats .reset{
		+	display:inline-block;
		+	width:40px;
		+	height:40px;
		+	background-size:cover;
		+	background-image:url('https://static.igem.org/mediawiki/2015/9/9c/UT_TOKYO_Reset.png');
		+	}
		+
		+	.canvas-stats .reset:hover{
		+	animation:blink 0.3s ease-in-out infinite alternate;
		+	-webkit-animation:blink 0.3s ease-in-out infinite alternate;
		+	}
		+
		+	.canvas-stats .msonoff{
		+	display:inline-block;
	}		}
−	#debug {	+	#debug{
	position:absolute;		position:absolute;
	width:300px;		width:300px;
Line 310:		Line 442:
	}		}
−	#panel{
−	position: relative;
−	float:left;
−	width:98px;
−	height:98px;
−	left:50%;
−	margin-top:1px;
−	margin-bottom:1px;
−	background-color: rgb(1, 215, 215);
−	}
−
−	#panel:hover{
−	background-color: white;
−	}
−
−	.button{
−	font-family: 'Open Sans',"Century Gothic", sans-serif;
−	position: relative;
−	margin: auto;
−	margin-top:1px;
−	margin-bottom:1px;
−	text-align: center;
−	font-size: 50px;
−	color: white;
−	width: 598px;
−	background-color: rgb(1, 215, 215);
−	}
−	.button:hover{
−	background-color: yellow;
−	color: red
−	}
	/**********************************************************************		/**********************************************************************
	/  MENU		/  MENU
	/**********************************************************************/		/**********************************************************************/
−	.menu-panel {	+	.logo{
		+	position: fixed;
		+	top:16px;
		+	margin:0;
		+	width:auto;
		+	height:60px;
		+	}
		+
		+	.menu-panel{
	font-family:'Homenaje', "Century Gothic", sans-serif;		font-family:'Homenaje', "Century Gothic", sans-serif;
	position:fixed;		position:fixed;
Line 352:		Line 461:
	top:16px;		top:16px;
	width:100%;		width:100%;
−	min-height:0px;	+	height:60px;
−	height:80px;	+
	margin:0px;		margin:0px;
	background-color:rgba(255,255,255,0.6);		background-color:rgba(255,255,255,0.6);
Line 362:		Line 470:
	text-align:center;		text-align:center;
	padding:0px;		padding:0px;
−	margin-top:10px;	+	margin:0px;
	width:100%;		width:100%;
−	height:80px;	+	height:60px;
	}		}
Line 374:		Line 482:
	background-size:cover;		background-size:cover;
	width:120px;		width:120px;
−	height:70px;	+	height:60px;
	font-size:20px;		font-size:20px;
	padding-top:10px;		padding-top:10px;
−	transition:top 0.4s;	+	transition:border 0.3s;
−	transition-timing-function:ease-in-out;	+	}
		+	.menu-panel li:hover,
		+	.menu-panel li.hover{
		+	border-bottom:solid 5px gray;
		+	color:gray;
		+	}
		+	.menu-panel li.active{
		+	border-bottom:solid 5px rgb(255,109,64);
		+	color:rgb(255,109,64);
	}		}
	.menu-panel li.home{		.menu-panel li.home{
−	height:60px;	+	height:50px;
−	width:60px;	+	width:50px;
		+	margin:5px;
	background-size:cover;		background-size:cover;
	background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');		background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');
		+	border:0;
		+	filter: gray;
		+	-webkit-filter: grayscale(100%);
		+	opacity:0.5;
		+	transition:all 0.3s;
		+	}
		+	.menu-panel li.home:hover{
		+	border:0;
		+	/*
		+	-webkit-animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
		+	animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
		+	*/
		+	filter: none;
		+	-webkit-filter: grayscale(0%);
		+	opacity:1;
		+	}
		+	.menu-panel li.home.active{
	border:0;		border:0;
	}		}
−
	.menu-panel li.home a{		.menu-panel li.home a{
	display:block;		display:block;
	margin-top:-10px;		margin-top:-10px;
−	height:60px;	+	height:50px;
−	width:60px;	+	width:50px;
	}		}
−		+	.menu-panel li.home a p{
−	.menu-panel li:hover,	+	display:none;
−	.menu-panel li.hover{	+	}
−	border-top:solid 5px white;	+	.menu-panel li.home:hover a p{
		+	display:block;
		+	position:absolute;
		+	width:50px;
		+	background-color:rgba(0,0,0,0.5);
	color:white;		color:white;
		+	font-size:14px;
		+	text-decoration: none;
		+	margin:0;
		+	top:50px;
		+	left:0px;
	}		}
−	.menu-panel li.home:hover{	+	.menu-panel li ol{
−	border:0;	+	z-index:1000;
−	animation:blink 0.3s ease-in-out infinite alternate;	+
−	-webkit-animation:blink 0.3s ease-in-out infinite alternate;	+
−	}	+
−		+
−	.menu-panel li.active {	+
−	border-top:solid 5px red;	+
−	}	+
−		+
−	.menu-panel li.home.active{	+
−	opacity:0.3;	+
−	border:0;	+
−	}	+
−		+
−	.menu-panel li ol {	+
	position:fixed;		position:fixed;
−	display:none;	+	display:block;
	text-align:center;		text-align:center;
	padding:10px;		padding:10px;
−	margin:0px;	+	background:rgba(255,255,255,0.8);
−	background:rgba(255,255,255,0.6);	+	top:-200px;
−	top:96px;	+
	left:0px;		left:0px;
	width:100%;		width:100%;
	height:auto;		height:auto;
		+	opacity:0;
		+	transition:opacity 0.3s;
		+	margin:0;
	}		}
	.menu-panel li:hover ol,		.menu-panel li:hover ol,
	.menu-panel li.hover ol{		.menu-panel li.hover ol{
−	display:block;	+	top:76px;
		+	opacity:1;
	}		}
	.menu-panel li ol a{		.menu-panel li ol a{
	font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;		font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
−	position:relative;
	display: inline-block;		display: inline-block;
−	vertical-align:top;	+	vertical-align:bottom;
		+	text-align:right;
	width:120px;		width:120px;
Line 447:		Line 578:
	color:black;		color:black;
	font-size:22px;		font-size:22px;
		+	opacity:0.7;
		+	padding:5px;
		+	background-size: contain;
	text-decoration: none;		text-decoration: none;
	}		}
−	.menu-panel li ol a:first-child{	+	.menu-panel li ol a.big{
	height:120px;		height:120px;
		+	margin-left:30px;
		+	opacity:1;
	}		}
	.menu-panel li.project ol a{		.menu-panel li.project ol a{
−	background:rgba(29,78,184,1);	+	background:rgba(89,160,185,1);
	background-size:cover;		background-size:cover;
	color:white;		color:white;
	}		}
	.menu-panel li.modeling ol a{		.menu-panel li.modeling ol a{
−	background:rgba(242,66,2,1);	+	background:rgba(22,79,207,1);
	background-size:cover;		background-size:cover;
		+	color:white;
	}		}
	.menu-panel li.experiment ol a{		.menu-panel li.experiment ol a{
−	background:rgba(207,234,241,1);	+	background:rgba(119,114,233,1);
	background-size:cover;		background-size:cover;
		+	color:white;
	}		}
−	.menu-panel li.parts ol a{	+	.menu-panel li.achivement ol a{
	background:rgba(183,183,183,1);		background:rgba(183,183,183,1);
	background-size:cover;		background-size:cover;
Line 478:		Line 616:
	}		}
	.menu-panel li.team ol a{		.menu-panel li.team ol a{
−	background:rgba(255,109,64);	+	background:rgba(89,160,185,1);
	background-size:cover;		background-size:cover;
		+	color:white;
	}		}
−	.menu-panel li ol a:hover {	+	.menu-panel li ol a:hover{
−	color:red;	+	color:rgb(255,109,64);
	animation:blink 0.3s ease-in-out infinite alternate;		animation:blink 0.3s ease-in-out infinite alternate;
	-webkit-animation:blink 0.3s ease-in-out infinite alternate;		-webkit-animation:blink 0.3s ease-in-out infinite alternate;
		+	}
		+
		+	.menu-panel li ol a.active{
		+	opacity:1;
	}		}
Line 493:		Line 636:
	.posnav{		.posnav{
	font-family:'Homenaje', "Century Gothic", sans-serif;		font-family:'Homenaje', "Century Gothic", sans-serif;
−	font-size:20px;	+	position: fixed;
−	position:fixed;	+	top:76px;
−	bottom:0px;	+	left:100%;
		+	display: block;
		+	-webkit-transform-origin:left top;
		+	transform-origin:left top;
		+	-webkit-transform:rotate(90deg);
		+	transform:rotate(90deg);
	}		}
Line 502:		Line 650:
	overflow-x: auto;		overflow-x: auto;
	white-space: nowrap;		white-space: nowrap;
		+	width:1000px;
	opacity:0.6;		opacity:0.6;
−	width: 100%;
	}		}
	#breadcrumbs-one a{		#breadcrumbs-one a{
−	padding: .7em 1em .7em 2em;	+	padding: .6em 1em .6em 2em;
		+	font-size:14px;
	display:inline-block;		display:inline-block;
	text-decoration: none;		text-decoration: none;
Line 522:		Line 671:
	#breadcrumbs-one a:hover,		#breadcrumbs-one a:hover,
	#breadcrumbs-one a.hover{		#breadcrumbs-one a.hover{
−	background: yellow;	+	background: yellow !important;
		+	color:black !important;
	}		}
	#breadcrumbs-one a.read{		#breadcrumbs-one a.read{
Line 554:		Line 704:
	#breadcrumbs-one a:hover::after,		#breadcrumbs-one a:hover::after,
	#breadcrumbs-one a.hover::after{		#breadcrumbs-one a.hover::after{
−	border-left-color: yellow;	+	border-left-color: yellow !important;
	}		}
	#breadcrumbs-one a.read::after{		#breadcrumbs-one a.read::after{
	border-left-color: red;		border-left-color: red;
−	}
−
−	/**********************************************************************
−	/  MAIN
−	/**********************************************************************/
−	.main {
−	position:absolute;
−	transition: all 0.6s;
−	width:100%;
−	top:116px;
−	margin:auto;
−	overflow-x:hidden;
−	overflow-y:auto;
−	}
−
−	.panel {
−	position:relative;
−	width:80%;
−	padding:20px;
−	margin:50px auto;
−	height:auto;
−	background:rgba(255,255,255,0.6);
−	}
−
−	.panel img{
−	visibility: visible;
	}		}
Line 609:		Line 733:
	}		}
		+	@-webkit-keyframes spin {
		+	0% {-webkit-transform: rotate(0deg);}
		+	25% {-webkit-transform: rotate(90deg);}
		+	50% {-webkit-transform: rotate(180deg);}
		+	75% {-webkit-transform: rotate(270deg);}
		+	100% {-webkit-transform: rotate(360deg);}
		+	}
		+
		+	@keyframes spin {
		+	0% {transform: rotate(0deg);}
		+	25% {transform: rotate(90deg);}
		+	50% {transform: rotate(180deg);}
		+	75% {transform: rotate(270deg);}
		+	100% {transform: rotate(360deg);}
		+	}
	/**********************************************************************		/**********************************************************************
Line 626:		Line 765:
	/* clear fix */		/* clear fix */
−	.grid:after {	+	.grid:after{
	content: '';		content: '';
	display: block;		display: block;
Line 634:		Line 773:
	/* ---- .grid-item ---- */		/* ---- .grid-item ---- */
−	.grid-item {	+	.grid-item{
	font-family:'Homenaje', "Century Gothic", sans-serif;		font-family:'Homenaje', "Century Gothic", sans-serif;
	float: left;		float: left;
Line 642:		Line 781:
	background-repeat:no-repeat;		background-repeat:no-repeat;
	background-size:cover;		background-size:cover;
−	/*border:solid 2px white;*/
	padding:2px;		padding:2px;
	}		}
Line 658:		Line 796:
	}		}
−	.grid-item--width2 { width: 300px; }	+	.grid-item--size2{
−	.grid-item--height2 { height: 300px; }	+	width: 300px;
−	.grid-item--width3 { width: 400px; }	+	height: 300px;
−	.grid-item--height3 { height: 400px; }	+	}
−	.grid-item--width4 { width: 300px; }	+	.grid-item--size3{
−	.grid-item--height4 { height: 400px; }	+	width: 400px;
		+	height: 400px;
		+	}
		+	.grid-item--size4{
		+	width: 300px;
		+	height: 300px;
		+	}
		+	.grid-item--title{
		+	width: 100%;
		+	height: 50px;
		+	}
		+	.grid-item--slide{
		+	width: 600px;
		+	height: 300px;
		+	}
		+	.grid-item--slide ul{
		+	margin:0;
		+	}
		+	.grid-item--small{
		+	width: 100px;
		+	height: 100px;
		+	}
	/* HOME PAGE */		/* HOME PAGE */
−	.grid-item.home span:hover {	+	.grid-item.pattern{
		+	overflow: visible;
		+	}
		+
		+	.grid-item.link span:hover::after{
		+	content: url('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png');
		+	position: absolute;
		+	right: 0;
		+	top: 0;
		+	opacity:0.6;
		+	animation:blink 0.3s ease-in-out infinite alternate;
		+	-webkit-animation:blink 0.3s ease-in-out infinite alternate;
		+	}
		+
		+	.grid-item.home span:hover{
	animation:blink 0.3s ease-in-out infinite alternate;		animation:blink 0.3s ease-in-out infinite alternate;
	-webkit-animation:blink 0.3s ease-in-out infinite alternate;		-webkit-animation:blink 0.3s ease-in-out infinite alternate;
Line 675:		Line 848:
	margin-top:5px;		margin-top:5px;
	}		}
−	.grid-item.opened.home {	+	.grid-item.opened.home{
−	padding:20px;	+	width:396px;
−	background-color:rgba(0,0,0,0.3);	+	height:396px;
−	width: 100%;	+	margin:2px;
−	height:300px;	+	background-color:rgba(255,255,255,0.2);
	}		}
	.grid-item.opened.home span{		.grid-item.opened.home span{
−	display:inline-block;	+	position:absolute;
−	background-size: 260px auto;	+	top:0;
−	width:260px;	+	left:0;
		+	margin:10px;
		+	background-size: 180px auto;
		+	height:180px;
		+	width:180px;
	}		}
	.grid-item.opened.home ul{		.grid-item.opened.home ul{
		+	position:absolute;
	display:inline-block;		display:inline-block;
−	vertical-align: top;	+	top:200px;
−	height:auto;	+	left:0;
−	width:auto;	+	margin:10px;
−	margin-left:20px;	+	padding:0;
		+	width:180px;
		+	height:180px;
		+	}
		+
		+	.grid-item.opened.home ul li{
		+	width:180px;
		+	background-color:rgba(0,0,0,0.5);
		+	margin-bottom:2px;
		+	padding:5px;
		+	}
		+
		+	.grid-item.opened.home ul li:hover{
		+	background-color:black;
	}		}
	.grid-item.opened.home ul li a{		.grid-item.opened.home ul li a{
		+	display: block;
	font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;		font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
−	font-size:1.5em;	+	font-size:1.3em;
	color:white;		color:white;
−	line-height: 1.3em;
	text-decoration: none;		text-decoration: none;
		+	width:180px;
	}		}
−	.grid-item.opened.home ul li a:hover{	+	.grid-item.opened.home ul li:hover a{
−	color:yellow;	+	color:rgb(255,109,64);
	}		}
	.grid-item.opened.home ul li a p{		.grid-item.opened.home ul li a p{
	position:absolute;		position:absolute;
		+	top:-200px;
		+	left:200px;
		+	width:180px;
		+	margin:0;
	visibility:hidden;		visibility:hidden;
	font-size:0.7em;		font-size:0.7em;
	color:white;		color:white;
−	top:20px;	+	padding:5px;
−	left:50%;	+
	}		}
Line 724:		Line 919:
	position:absolute;		position:absolute;
	background:none;		background:none;
−	padding:0px;	+	padding:0;
	top:0;		top:0;
−	font-size: 1.5em;	+	font-size: 24px;
	font-weight:normal;		font-weight:normal;
		+	visibility: hidden;
	}		}
Line 734:		Line 930:
	width:100%;		width:100%;
	height:100%;		height:100%;
−	background:url('https://2015.igem.org/File:UT_TOKYO_Team_r.png');	+	background:url('../images/team_r.png');
	background-repeat:no-repeat;		background-repeat:no-repeat;
	background-size:cover;		background-size:cover;
	}		}
−	.grid-item.team span:hover {	+	.grid-item.team span:hover{
	animation:blink 0.4s ease-in-out infinite alternate;		animation:blink 0.4s ease-in-out infinite alternate;
	-webkit-animation:blink 0.4s ease-in-out infinite alternate;		-webkit-animation:blink 0.4s ease-in-out infinite alternate;
	}		}
−	.grid-item.opened.team {	+	.grid-item.opened.team{
	width: 396px;		width: 396px;
	height: 396px;		height: 396px;
Line 756:		Line 952:
	.grid-item.opened.team h1{		.grid-item.opened.team h1{
		+	max-width:25%;
	font-size:1.2em;		font-size:1.2em;
	border-bottom:solid 1px white;		border-bottom:solid 1px white;
		+	visibility: visible;
	}		}
Line 780:		Line 978:
	.grid-item.opened.team p.jobs{		.grid-item.opened.team p.jobs{
−	/*clear:right;*/
	position:absolute;		position:absolute;
−	top:2.5em;	+	bottom:33%;
	left:0;		left:0;
	margin-left:10px;		margin-left:10px;
	text-align:left;		text-align:left;
−	font-size: 1em;	+	font-size: 16px;
	font-weight:normal;		font-weight:normal;
	}		}
Line 798:		Line 995:
	margin-left:10px;		margin-left:10px;
	text-align:left;		text-align:left;
−	font-size: 1em;	+	font-size: 16px;
	font-weight:normal;		font-weight:normal;
		+	}
		+	/**********************************************************************
		+	/  Slide Show
		+	/**********************************************************************/
		+	#slide {
		+	width:100%;
		+	height:100%;
		+	margin:0 auto;
		+	position:relative;
		+	}
		+
		+	#slide ul,
		+	#slide li{
		+	width:100%;
		+	height:100%;
		+	}
		+
		+	#slide img {
		+	position:absolute;
		+	left:0;
		+	top:0;
		+	height:100%;
		+	width:100%;
		+	visibility: visible;
	}		}
Line 805:		Line 1,026:
	/  For mobile		/  For mobile
	/**********************************************************************/		/**********************************************************************/
−	@media only screen and (max-width: 1024px) {	+	@media only screen and (max-width: 1024px){
	h1, h2, h3{		h1, h2, h3{
	font-size:1.2em;		font-size:1.2em;
	}		}
−	p, h4 {	+	p, h4{
	font-size:0.8em;		font-size:0.8em;
	}		}
Line 820:		Line 1,041:
	.panel{		.panel{
	width:90%;		width:90%;
		+	}
		+
		+	.logo{
		+	display:none;
	}		}
Line 825:		Line 1,050:
	width:auto;		width:auto;
	text-align:left;		text-align:left;
−	left:80px;	+	left:60px;
	}		}
Line 834:		Line 1,059:
	.menu-panel ul li.home{		.menu-panel ul li.home{
	position:fixed;		position:fixed;
−	top:26px;	+	top:16px;
−	left:10px;	+	left:0px;
	}		}
−	.grid-item.opened.home{	+	.menu-panel ul li ol a{
−	height:200px;	+	font-size:0.8em;
		+	height:60px;
		+	width:80px;
	}		}
−		+	.menu-panel ul li ol a.big{
−	.grid-item.opened.home span{	+	height:100px;
−	background-size: 160px auto;	+	width:100px;
−	width:160px;	+
−	}	+
−		+
−	.grid-item.opened.home ul li a{	+
−	font-size:1.2em;	+
−	}	+
−		+
−	.grid-item.opened.home ul li a p{	+
−	left:350px;	+
	}		}
Line 866:		Line 1,084:
	.posnav{		.posnav{
	font-size:14px;		font-size:14px;
		+	}
		+
		+	.grid-item--size3{
		+	width: 300px;
		+	height: 300px;
	}		}
	}		}
−	@media only screen and (max-width: 640px) {	+	@media only screen and (max-width: 640px){
−	h1, h2 {	+	h1, h2{
	text-align:right;		text-align:right;
		+	}
		+
		+	.panel{
		+	padding:10px;
	}		}
Line 877:		Line 1,104:
	padding:5px;		padding:5px;
	font-size:15px;		font-size:15px;
−	width:60px;	+	width:70px;
	height:30px;		height:30px;
	}		}
Line 888:		Line 1,115:
	}		}
−	.menu-panel ul li ol a:first-child{	+	.menu-panel ul li ol a.big{
		+	margin-left:0;
	margin-right:80px;		margin-right:80px;
		+	width:80px;
	height:80px;		height:80px;
	}		}
−		+	.menu-panel li ol{
−	.menu-panel li ol{	+	display:none;
−	z-index:1000;	+	}
		+	.menu-panel li:hover ol{
		+	display:block;
	background:none;		background:none;
	position:relative;		position:relative;
−	margin-top:-80px;	+	margin-top:-75px;
−	margin-left:-25px;	+	margin-left:-20px;
	width:100px;		width:100px;
		+	}
		+
		+	.grid-item.opened.home{
		+	width:296px;
		+	height:296px;
	}		}
	.grid-item.opened.home span{		.grid-item.opened.home span{
−	background-size: 80px auto;	+	background-size: 130px auto;
−	width:80px;	+	width:130px;
	}		}
	.grid-item.opened.home ul{		.grid-item.opened.home ul{
−	margin-top:0;	+	top:140px;
		+	}
		+
		+	.grid-item.opened.home ul li{
		+	width:130px;
	}		}
	.grid-item.opened.home ul li a{		.grid-item.opened.home ul li a{
−	font-size:1em;	+	font-size:0.8em;
	}		}
	.grid-item.opened.home ul li a p{		.grid-item.opened.home ul li a p{
−	left:20px;	+	font-size:1em;
−	top:120px;	+	width:130px;
		+	top:-140px;
		+	left:140px;
	}		}
−	.grid-item--width2 { width: 200px; }	+	.grid-item--size2{
−	.grid-item--height2 { height: 200px; }	+	width: 100px;
−	.grid-item--width3 { width: 200px; }	+	height: 100px;
−	.grid-item--height3 { height: 200px; }	+	}
−	.grid-item--width4 { width: 300px; }	+	.grid-item--size3{
−	.grid-item--height4 { height: 400px; }	+	width: 200px;
		+	height: 200px;
		+	}
		+	.grid-item--size4{
		+	width: 300px;
		+	height: 300px;
		+	}
		+	.grid-item--size5{
		+	height: 40px;
		+	}
		+	.grid-item--slide{
		+	width: 300px;
		+	height: 150px;
		+	padding:0;
		+	}
		+	.grid-item.team{
		+	width:96px;
		+	height:96px;
		+	margin:2px;
		+	}
		+
		+	.grid-item.opened.team{
		+	width:296px;
		+	height:296px;
		+	margin:2px;
		+	}
		+
		+	.grid-item.team h1,
		+	.grid-item.opened.team h1{
		+	font-size:1em;
		+	}
		+
		+	.grid-item.opened.team p.jobs,
		+	.grid-item.opened.team p.description{
		+	font-size:0.8em;
		+	}
		+
		+	#footer h1{
		+	font-size:1.5em;
		+	text-align:center;
		+	}
		+
		+	#footer img{
		+	width:100px;
		+	max-height:50px;
		+	}
	}		}

---

Latest revision as of 00:11, 19 September 2015

/*********************************************************************** / WIKI INITIALIZATION /**********************************************************************/

h1.firstHeading {

   display: none !important;

}

1. top_menu_14 .has_submenu{

   height:16px;

}

1. content{

   width:100%;
   margin:0;
   padding:0;

}

1. content a{

 font-size:20px;
 line-height:1.2em;

}

.panel p, .panel a{

 font-size:16px;
 line-height:1.3em;

}

/*********************************************************************** / GENERAL /**********************************************************************/ @font-face{

   font-family:'Homenaje';
   src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/a/a5/UT_TOKYO_OpenSans-Bold.ttf");
   font-weight:bold;

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/9/95/UT_TOKYO_OpenSans-Italic.ttf");
   font-style:italic;

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/6/6b/UT_TOKYO_OpenSans-BoldItalic.ttf");
   font-weight: bold;
   font-style: italic;

}

• {

 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

canvas{

   display: block;
   margin: auto;

}

body{

   width:100%;

background: #CCC; -webkit-font-smoothing: antialiased; }

body.is-loading *{

 -moz-transition: none !important;
 -webkit-transition: none !important;
 -o-transition: none !important;
 -ms-transition: none !important;
 transition: none !important;
 -moz-animation: none !important;
 -webkit-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;

}

p, h1, h2, h3, h4, h5, h6{

 font-size:20pt;
 color:black;
 line-height:1.5em;

}

h1, h2{

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');
 background-size:contain;
 background-repeat: no-repeat;
 padding-left:2em;
 text-align: center;
 font-size:2em;
 font-weight: Normal;
 margin:0.5em;

} h2{

 text-align: left;

}

h3, h4, h5{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 text-align: left;
 font-size:1.5em;
 font-weight: bold;
 margin:0.5em;

} h4{

 text-align:center;
 font-size:1em;

} h5{

 font-size:1.2em;

}

h4 span{

 font-weight:normal;

}

p{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1em;
 margin:1em;

}

p i{

   font-style:italic;

}

p span{

 text-decoration: underline;
 color: #222;

}

p span q{

 display: none;

}

p span:hover q, p span.hover q{

 position:absolute;
 display: inline;
 margin-top:2em;
 margin-left:-100px;
 width:200px;
 height:auto;
 padding:5px;
 color:white;
 background:rgba(0,0,0,0.6);

}

.panel ul li{

   border-left:solid 2px rgb(255,109,60);

}

.panel ul li p{

 line-height:1.2em;
 margin:5px;

}

img.figure{

 display: block;
 margin:0 auto;
 max-width:90%;
 max-height:500px;

}

.table{

 display:block;
 margin:0 auto;
 max-width:90%;
 text-align:center;

}

.table img.figure{

 display: inline;
 max-height:200px;
 

}

table{

 margin:1em auto;

}

table tr.top{

 border-top:solid 1px black;

}

table tr{

 border-bottom:solid 1px black;

}

table td{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:16px;
 line-height:2em;
 text-align:left;
 padding-left:10px;
 padding-right:10px;

}

hr{

 border: 0;
 height: 1px;
 background: #333;
 background-image: linear-gradient(to right, #ccc, #333, #ccc);

}

u{ }

1. preload{

 display:none;

}

1. loader{

 width:100%;
 position: fixed;
 top:40%;
 text-align: center;

}

.main{

 position:absolute;
 transition: all 0.6s;
 width:100%;
 top:60px;
 margin:auto;
 overflow-x:hidden;
 overflow-y:auto;

}

.panel{

 position:relative;
 width:90%;
 padding:20px;
 margin:50px auto;
 height:auto;
 background:rgba(255,255,255,0.6);

}

.panel img{

 visibility: visible;

}

.panel-black{

 background-color:rgba(0,0,0,0.6);
 width:100%;
 padding-top:10px;
 padding-bottom:10px;
 -webkit-box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
 box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);

}

1. footer h1{

 font-family:'Homenaje';
 background:none;
 padding:0px;
 font-size:1.8em;
 color:white;
 margin-bottom:0;

}

1. footer img{

 display:inline-block;
 margin:10px;
 width:200px;
 max-height:60px;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;

}

1. footer img:hover{

 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

}

1. footer img.sns{

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

}

1. footer .copyright{

 text-align:center;
 font-size:1em;
 line-height:2em;
 color:white;

}

1. footer .sns{

} /*********************************************************************** / SWITCHS and BUTTONS /**********************************************************************/ .toggle-sw{

 display:inline-block;
 height:40px;
 width:100px;
 position:relative;
 font-family: 'Homenaje';
 font-size:18px;
 background:#888;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;

} .toggle-sw:after{

 content:;
 display:inline-block;
 height:30px;
 width:40px;
 background:#fff;
 position:absolute;
 top:5px;
 left:5px;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;
 }

.toggle-sw:before{

 content:'OFF';
 position:absolute;
 right:11px;
 top:12px;
 color:#fff;

} .toggle-sw:hover:after{

 left:10px;

} .toggle-sw.on:before{

 content:'ON';
 right:60px;

} .toggle-sw.on{

 background:rgb(255, 109, 64);

} .toggle-sw.on:after{

 left:55px;

} .toggle-sw.on:hover:after{

 left:50px;

} .toggle-sw.mine:after{

 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/e/ee/UT_TOKYO_Mine.png')

}

.check{ position:relative; padding-left:30px; font-weight: bold; } .check::after{

 content:"";
 background-image:url('https://static.igem.org/mediawiki/2015/1/17/UT_TOKYO_Check.png');
 background-size:contain;
 position:absolute;
 top:0;
 left:0;
 width:1.5em;
 height:1.5em;

}

/*********************************************************************** / PATTERN /**********************************************************************/ .canvas-control{

 display:block;
 position:absolute;
 top:1px;
 left:1px;
 width:298px;
 height:298px;
 background-color:rgba(255,255,255,0.3);

}

.canvas-control p{

 line-height:300px !important;
 margin:0 auto;
 font-family: 'Homenaje';
 font-size:24px;
 color: white;
 text-align:center;
 vertical-align: middle;

}

.canvas-control:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats{

 display:none;
 position:absolute;
 width:300px;
 padding:2px;
 z-index:500;

}

.canvas-stats:hover{

 display:block !important;

}

.canvas-stats .onoff{

 display:inline-block;

}

.canvas-stats .reset{

 display:inline-block;
 width:40px;
 height:40px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/9/9c/UT_TOKYO_Reset.png');

}

.canvas-stats .reset:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats .msonoff{

 display:inline-block;

}

1. debug{

   position:absolute;
   width:300px;
   right:0px;
   top:0px;
   font-family: "Century Gothic", sans-serif;
   background-color: black;
   opacity: 0.5;
   color: white;

}

/********************************************************************** / MENU /**********************************************************************/ .logo{

 position: fixed;
 top:16px;
 margin:0;
 width:auto;
 height:60px;

}

.menu-panel{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position:fixed;
 z-index: 500;
 left:0px;
 top:16px;
 width:100%;
 height:60px;
 margin:0px;
 background-color:rgba(255,255,255,0.6);

}

.menu-panel ul{

 position:fixed;
 text-align:center;
 padding:0px;
 margin:0px;
 width:100%;
 height:60px;

}

.menu-panel li{

 position:relative;
 display: inline-block;
 text-align:center;
 vertical-align:top;
 background-size:cover;
 width:120px;
 height:60px;
 font-size:20px;
 padding-top:10px;
 transition:border 0.3s;

} .menu-panel li:hover, .menu-panel li.hover{

 border-bottom:solid 5px gray;
 color:gray;

} .menu-panel li.active{

 border-bottom:solid 5px rgb(255,109,64);
 color:rgb(255,109,64);

}

.menu-panel li.home{

 height:50px;
 width:50px;
 margin:5px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');
 border:0;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;
 transition:all 0.3s;

} .menu-panel li.home:hover{

 border:0;
 /*
 -webkit-animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 */
 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

} .menu-panel li.home.active{

 border:0;

} .menu-panel li.home a{

 display:block;
 margin-top:-10px;
 height:50px;
 width:50px;

} .menu-panel li.home a p{

 display:none;

} .menu-panel li.home:hover a p{

 display:block;
 position:absolute;
 width:50px;
 background-color:rgba(0,0,0,0.5);
 color:white;
 font-size:14px;
 text-decoration: none;
 margin:0;
 top:50px;
 left:0px;

}

.menu-panel li ol{

 z-index:1000;
 position:fixed;
 display:block;
 text-align:center;
 padding:10px;
 background:rgba(255,255,255,0.8);
 top:-200px;
 left:0px;
 width:100%;
 height:auto;
 opacity:0;
 transition:opacity 0.3s;
 margin:0;

}

.menu-panel li:hover ol, .menu-panel li.hover ol{

 top:76px;
 opacity:1;

}

.menu-panel li ol a{

 font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
 display: inline-block;
 vertical-align:bottom;
 text-align:right;

 width:120px;
 height:80px;
 margin:10px auto;

 color:black;
 font-size:22px;
 opacity:0.7;
 padding:5px;
 background-size: contain;

 text-decoration: none;

}

.menu-panel li ol a.big{

 height:120px;
 margin-left:30px;
 opacity:1;

}

.menu-panel li.project ol a{

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

} .menu-panel li.modeling ol a{

 background:rgba(22,79,207,1);
 background-size:cover;
 color:white;

} .menu-panel li.experiment ol a{

 background:rgba(119,114,233,1);
 background-size:cover;
 color:white;

} .menu-panel li.achivement ol a{

 background:rgba(183,183,183,1);
 background-size:cover;

} .menu-panel li.pp ol a{

 background:rgba(1,0,216,1);
 background-size:cover;
 color:white;

} .menu-panel li.team ol a{

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

}

.menu-panel li ol a:hover{

 color:rgb(255,109,64);
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.menu-panel li ol a.active{

 opacity:1;

}

/********************************************************************** / NAVIGATION /**********************************************************************/ .posnav{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position: fixed;
 top:76px;
 left:100%;
 display: block;
 -webkit-transform-origin:left top;
 transform-origin:left top;
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);

}

1. breadcrumbs-one{

 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 width:1000px;
 opacity:0.6;

}

1. breadcrumbs-one a{

 padding: .6em 1em .6em 2em;

font-size:14px;

 display:inline-block;
 text-decoration: none;
 color: black;
 position: relative;
 background:white;

}

1. breadcrumbs-one .posnav:first-child a{

 padding-left: 1em;
 border-radius: 5px 0 0 5px;

}

1. breadcrumbs-one a:hover,
2. breadcrumbs-one a.hover{

 background: yellow !important;
 color:black !important;

}

1. breadcrumbs-one a.read{

 background: red;
 color:white;

}

1. breadcrumbs-one a::after,
2. breadcrumbs-one a::before{

 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;

}

1. breadcrumbs-one a::after{

 z-index: 2;
 border-left-color: white;

}

1. breadcrumbs-one a::before{

 border-left-color: white;
 right: -1.1em;
 z-index: 1;

}

1. breadcrumbs-one a:hover::after,
2. breadcrumbs-one a.hover::after{

 border-left-color: yellow !important;

}

1. breadcrumbs-one a.read::after{

 border-left-color: red;

}

/********************************************************************** / ANIMATION /**********************************************************************/ @-webkit-keyframes blink{

 0% {opacity:1;}
 100% {opacity:0.7;}

} @keyframes blink{

 0% {opacity:1;}
 100% {opacity:0.7;}

}

@-webkit-keyframes iblink{

 0% {opacity:0.1;}
 100% {opacity:1;}

} @keyframes iblink{

 0% {opacity:0.1;}
 100% {opacity:1;}

}

@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);}

 25% {-webkit-transform: rotate(90deg);}
 50% {-webkit-transform: rotate(180deg);}
 75% {-webkit-transform: rotate(270deg);}

100% {-webkit-transform: rotate(360deg);} }

@keyframes spin { 0% {transform: rotate(0deg);}

 25% {transform: rotate(90deg);}

50% {transform: rotate(180deg);}

 75% {transform: rotate(270deg);}

100% {transform: rotate(360deg);} }

/********************************************************************** / GRID /**********************************************************************/ /* ---- grid ---- */ .grid.team{

 display:block;
 margin:auto;
 max-width: 1500px;

} .grid.home{

 display:block;
 margin:auto;
 max-width: 1300px;

}

/* clear fix */ .grid:after{

 content: ;
 display: block;
 clear: both;

}

/* ---- .grid-item ---- */

.grid-item{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 float: left;
 width: 200px;
 height: 200px;
 overflow:hidden;
 background-repeat:no-repeat;
 background-size:cover;
 padding:2px;

}

.grid-item img{

 visibility:hidden;

}

.grid-item span{

 display: block;
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item--size2{

 width: 300px;
 height: 300px;

} .grid-item--size3{

 width: 400px;
 height: 400px;

} .grid-item--size4{

  width: 300px;
  height: 300px;

} .grid-item--title{

  width: 100%;
  height: 50px;

} .grid-item--slide{

  width: 600px;
  height: 300px;

} .grid-item--slide ul{

 margin:0;

} .grid-item--small{

 width: 100px;
 height: 100px;

}

/* HOME PAGE */ .grid-item.pattern{

 overflow: visible;

}

.grid-item.link span:hover::after{

 content: url('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png');
 position: absolute;
 right: 0;
 top: 0;
 opacity:0.6;
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.grid-item.home span:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;
 cursor: pointer;

}

.grid-item.home ul{

   margin-top:5px;

} .grid-item.opened.home{

 width:396px;
 height:396px;
 margin:2px;
 background-color:rgba(255,255,255,0.2);

} .grid-item.opened.home span{

 position:absolute;
 top:0;
 left:0;
 margin:10px;
 background-size: 180px auto;
 height:180px;
 width:180px;

}

.grid-item.opened.home ul{

 position:absolute;
 display:inline-block;
 top:200px;
 left:0;
 margin:10px;
 padding:0;
 width:180px;
 height:180px;

}

.grid-item.opened.home ul li{

 width:180px;
 background-color:rgba(0,0,0,0.5);
 margin-bottom:2px;
 padding:5px;

}

.grid-item.opened.home ul li:hover{

 background-color:black;

}

.grid-item.opened.home ul li a{

 display: block;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1.3em;
 color:white;
 text-decoration: none;
 width:180px;

}

.grid-item.opened.home ul li:hover a{

 color:rgb(255,109,64);

}

.grid-item.opened.home ul li a p{

 position:absolute;
 top:-200px;
 left:200px;
 width:180px;
 margin:0;
 visibility:hidden;
 font-size:0.7em;
 color:white;
 padding:5px;

}

.grid-item.opened.home ul li a:hover p{

 visibility:visible;

}

/* TEAM PAGE */ .grid-item.team h1{

 position:absolute;
 background:none;
 padding:0;
 top:0;
 font-size: 24px;
 font-weight:normal;
 visibility: hidden;

}

.grid-item.team span{

 display: block;
 width:100%;
 height:100%;
 background:url('../images/team_r.png');
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item.team span:hover{

 animation:blink 0.4s ease-in-out infinite alternate;
 -webkit-animation:blink 0.4s ease-in-out infinite alternate;

}

.grid-item.opened.team{

 width: 396px;
 height: 396px;
 margin: 2px;
 background: rgba(255, 255, 255, 0.6);

}

.grid-item.opened.team span{

 display: none;

}

.grid-item.opened.team h1{

 max-width:25%;
 font-size:1.2em;
 border-bottom:solid 1px white;
 visibility: visible;

}

.grid-item.opened.team img{

 visibility:visible;
 position:absolute;

}

.grid-item.opened.team img.topright{

 width:67%;
 height:67%;
 top:0px;
 left:33%;

}

.grid-item.opened.team img.bottomleft{

 width:33%;
 height:33%;
 top:67%;
 left:0;

}

.grid-item.opened.team p.jobs{

 position:absolute;
 bottom:33%;
 left:0;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

}

.grid-item.opened.team p.description{

 /*clear:right;*/
 position:absolute;
 top:67%;
 left:33%;
 width:62%;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

} /********************************************************************** / Slide Show /**********************************************************************/

1. slide {

 width:100%;
 height:100%;
 margin:0 auto;
 position:relative;

}

1. slide ul,
2. slide li{

 width:100%;
 height:100%;

}

1. slide img {

 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 visibility: visible;

}

/********************************************************************** / For mobile /**********************************************************************/ @media only screen and (max-width: 1024px){

 h1, h2, h3{
   font-size:1.2em;
 }

 p, h4{
   font-size:0.8em;
 }

 img.figure{
   max-width:90%;
 }

 .panel{
   width:90%;
 }

 .logo{
   display:none;
 }

 .menu-panel ul{
   width:auto;
   text-align:left;
   left:60px;
 }

 .menu-panel li{
   width:80px;
 }

 .menu-panel ul li.home{
   position:fixed;
   top:16px;
   left:0px;
 }

 .menu-panel ul li ol a{
   font-size:0.8em;
   height:60px;
   width:80px;
 }
 .menu-panel ul li ol a.big{
   height:100px;
   width:100px;
 }

 .grid-item.opened.team{
   width:300px;
   height:300px;
 }

 .grid-item.opened.team p{
   font-size:0.8em;
 }

 .posnav{
   font-size:14px;
 }

 .grid-item--size3{
   width: 300px;
   height: 300px;
 }

}

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

 h1, h2{
   text-align:right;
 }

 .panel{
   padding:10px;
 }

 .menu-panel ul li{
   padding:5px;
   font-size:15px;
   width:70px;
   height:30px;
 }

 .menu-panel ul li ol a{
   font-size:14px;
   height:40px;
   width:80px;
   margin:1px;
 }

 .menu-panel ul li ol a.big{
   margin-left:0;
   margin-right:80px;
   width:80px;
   height:80px;
 }
.menu-panel li ol{
   display:none;
 }
 .menu-panel li:hover ol{
   display:block;
   background:none;
   position:relative;
   margin-top:-75px;
   margin-left:-20px;
   width:100px;
 }

 .grid-item.opened.home{
   width:296px;
   height:296px;
 }

 .grid-item.opened.home span{
   background-size: 130px auto;
   width:130px;
 }

 .grid-item.opened.home ul{
   top:140px;
 }

 .grid-item.opened.home ul li{
   width:130px;
 }

 .grid-item.opened.home ul li a{
   font-size:0.8em;
 }

 .grid-item.opened.home ul li a p{
   font-size:1em;
   width:130px;
   top:-140px;
   left:140px;
 }

 .grid-item--size2{
   width: 100px;
   height: 100px;
 }
 .grid-item--size3{
   width: 200px;
   height: 200px;
 }
 .grid-item--size4{
   width: 300px;
   height: 300px;
 }
 .grid-item--size5{
   height: 40px;
 }
 .grid-item--slide{
    width: 300px;
    height: 150px;
   padding:0;
 }

 .grid-item.team{
   width:96px;
   height:96px;
   margin:2px;
 }

 .grid-item.opened.team{
   width:296px;
   height:296px;
   margin:2px;
 }

 .grid-item.team h1,
 .grid-item.opened.team h1{
   font-size:1em;
 }

 .grid-item.opened.team p.jobs,
 .grid-item.opened.team p.description{
   font-size:0.8em;
 }

 #footer h1{
   font-size:1.5em;
   text-align:center;
 }

 #footer img{
   width:100px;
   max-height:50px;
 }

}