@charset "utf-8";

/**
 * font declaration
 */

@font-face {
	font-family: 'VL ゴシック';
	src: local('VL ゴシック'), url('../fonts/VL-Gothic-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'VL Pゴシック';
	src: local('VL Pゴシック'), url('../fonts/VL-PGothic-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SymbolSignsBasisset';
	src: local('Symbol Signs Basis set'), local('SymbolSigns-Basisset'), url('../fonts/symbol-signs.ttf') format('truetype');
}

/*
	erase all styles about elems not in view
	to increase performance
*/
div.page:not(.onView),
div.page:not(.onView) *{
	display:none !important;
	background:none !important;
	border:none !important;
	border-radius:none !important;
	-webkit-transition:none !important;
	-webkit-background-size: auto !important;
	float:none !important;
	outline:3px solid #fff;
	-webkit-animation-name: none;
	-webkit-animation-iteration-count:0;
}

/**
 * base
 */

*{ margin:0; padding:0; list-style-type:none; }

html,body{
	/* necessary to enable bg gradient? */
	width:100%;
	height:100%;
	line-height:1.5;
}
html{
	font-family:'VL Pゴシック','メイリオ',Meiryo, sans-serif;
	line-height:1.3;
	background:#000;
	font-size:30px;
}
h1{
	text-shadow: rgba(0,0,0,1) 0 0 .1em;
	font-size:1.5em;
}
p.debugNote{
	background:rgba(255,0,0,.3);
	border:1px solid #f00;
	padding:.6em 1em .7em;
	color:#fff;
	font-size:.7em;
	line-height:1.5;
	margin:0 0 1em;
	overflow:hidden;
}
.symbol{
	font-family:'SymbolSignsBasisset',sans-serif;
	display:inline-block;
	padding:0 .2em 0 .4em;
	-webkit-transform:scale(1.8);
}
.clear{
	clear:both;
}
.nowrap{
	white-space:nowrap;
	display:inline-block;
}

.x0\.25{ transform:scale(0.25); -webkit-transform:scale(0.25); }
.x0\.5{ transform:scale(0.5); -webkit-transform:scale(0.5); }
.x1\.5{ transform:scale(1.5); -webkit-transform:scale(1.5); }
.x2{ transform:scale(2); -webkit-transform:scale(2); }
.x2\.5{ transform:scale(2.5); -webkit-transform:scale(2.5); }
.x3{ transform:scale(3); -webkit-transform:scale(3); }
.x4{ transform:scale(4); -webkit-transform:scale(4); }
.x5{ transform:scale(5); -webkit-transform:scale(5); }
.x6{ transform:scale(5); -webkit-transform:scale(6); }

.align.right{ text-align:right; }
.align.center{ text-align:center; }
.align.left{ text-align:left; }

em{
	font-style:normal;
	color:orange;
	text-shadow:0 0 4px rgba(0,0,0,1);
}

a{
	color:#fff;
}

blockquote{
	background:#111;
	color:#fff;
	border:1px solid #333;
	font-size:.8em;
	padding:1.5% 2%;
	margin:0 0 .75em;
}
.vImgs{
}
	.vImgs img{
		display:block;
		margin:.5em 0;
	}
.hImgs{
	text-align:center;
	display:box;
	display:-webkit-box;
	box-align:center;
	-webkit-box-align:center;
	box-orient:horizontal;
	-webkit-box-orient:horizontal;
}
	.hImgs img{
	}
ul.bullet{
	margin:0 0 0 1.5em;
}
	ul.bullet li{
		list-style-type: disc;
		padding:0 0 .2em .3em;
	}

/**
 * page
 */
.page{
	-webkit-transition-property:opacity,top,left,-webkit-transform;
	-webkit-transition-duration:.5s;
	-webkit-transition-timing-function:ease;
	position:fixed;
	width:100%;
	height:100%;
	color:#fff;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:4%;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	opacity:0;
	background:#222;
}
	.page p:not(*[class]){
		padding:0 0 .75em;
	}
.page.current{
	opacity:1;
	left:0;
	top:0;
	-webkit-transform:rotate(0deg);
	z-index:101;
}
.page.prev{
	left:-100%;
	top:20%;
	opacity:0;
	-webkit-transform:rotate(-60deg) scale(.5);
}
.page.next{
	left:100%;
	top:20%;
	opacity:0;
	-webkit-transform:rotate(60deg) scale(.5);
}
.page.top{
	box-align:center;
	-webkit-box-align:center;
	box-pack:center;
	-webkit-box-pack:center;
	box-orient:vertical;
	-webkit-box-orient:vertical;
	display:box;
	display:-webkit-box;
	padding:0;
}
	
	@-webkit-keyframes 'o' {
		from{ -webkit-transform: rotate(0); }
		to{ -webkit-transform: rotate(360deg); }
	}

	.page.top h1{
		font-size:3em;
		margin:-1em 0 .3em;
		width:100%;
		padding:.3em 0 .3em;
		text-align:center;
	}

	.page.top div{
		position:relative;
		width:800px;
		height:0;
	}
		.page.top p{
			position:absolute;
			right:3%;
			bottom:-130px;
			text-shadow: rgba(0,0,0,1) 0 0 .1em;
			font-size:1.5em;
		}

		.page.top img{
			position:absolute;
			left:40px;
			bottom:-100px;
			border-radius:5px;
		}

.page{
}
.page.exampleStage{
	background:#222;
}
	.page h1{
		padding:0 0 .5em;
	}
	.page p{
	}
	.page .referenceList{
		font-size:.7em;
	}
		.page .referenceList dt{
		}
		.page .referenceList dd{
			padding:0 0 0 1em;
		}
.page.break{
	font-size:1.5em;
}
	.page.break{
		box-align:center;
		-webkit-box-align:center;
		box-pack:center;
		-webkit-box-pack:center;
		box-orient:vertical;
		-webkit-box-orient:vertical;
		display:box;
		display:-webkit-box;
	}
	.page.break h1{
		text-align:center;
	}
	.page.break > p{
		display:block;
		text-align:center;
	}
	.page.break > ul{
		padding:0 0 0 1em;
	}
		.page.break > ul li{
			list-style-type:disc;
		}
		.page.break > ul li.old{
			opacity:.2;
		}
		.page.break > ul li strong{
			font-weight:bold;
		}

.page.sectionStart{
}
	.page.sectionStart ul{
		font-size:.8em;
		line-height:1.3;
		position:fixed;
		right:0;
		top:0;
		width:35%;
		height:100%;
		box-align:left;
		-webkit-box-align:left;
		box-orient:vertical;
		-webkit-box-orient:vertical;
		box-pack:center;
		-webkit-box-pack:center;
		display:box;
		display:-webkit-box;
		letter-spacing:-.1em;
	}
		.page.sectionStart ul li{
			border-bottom:1px solid #fff;
			padding:.5em 0 .5em 0;
			opacity:.5;
		}
		.page.sectionStart ul li:last-child{
			border-bottom:none;
		}
		.page.sectionStart ul li.current{
			z-index:2;
			background:#fff;
			color:#000;
			-webkit-transform:scale(1.1);
			opacity:1;
			border-radius:.2em 0 0 .2em;
			padding-left:.5em;
		}
	.page.sectionStart h1{
		position:fixed;
		right:40%;
		top:0;
		height:100%;
		width:60%;
		box-align:center;
		-webkit-box-align:center;
		box-pack:end;
		-webkit-box-pack:end;
		display:box;
		display:-webkit-box;
		text-align:right;
		font-size:2em;
	}

pre.code{
	background:#111;
	color:#fff;
	border:1px solid #fff;
	font-size:.8em;
	padding:1.5% 2%;
	margin:0 0 .75em;
}
pre.code:last-child{
	margin-bottom:0;
}
	pre.code code{
		font-family:'VL ゴシック',sans-serif;
	}
	pre.code em{
	}

/**
 * pager
 */

#pager{
	font-family: 'SymbolSignsBasisset', sans-serif;
	font-size:1.5em;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	opacity:0;
	-webkit-transition:opacity .3s;
	z-index:200;
}
#pager:hover{
	opacity:1;
}
	#pager li{
		background:rgb(255,255,255);
		border-radius:.4em;
		margin:.2em;
	}
	#pager li:first-child{
		float:left;
	}
	#pager li:last-child{
		float:right;
	}
		#pager li a{
			line-height:1;
			text-decoration:none;
			float:left;
			color:#000;
			font-weight:bold;
			padding:0 .1em .2em .3em;
			text-decoration:none;
		}

/**
 * pageNum
 */
#pageNum{
	position:fixed;
	width:100%;
	left:0;
	bottom:0;
	text-align:center;
	z-index:300;
	color:#fff;
	font-size:.5em;
	padding:0 0 .2em;
}
	#pageNum .current{
	}
	#pageNum .total{
	}

/**
 * examples
 */