body{
	width:950px;
	margin:0 auto;
	font-family:serif;
	line-height:1.7em;
	background-color:rgba(255,192,192,.4);
}
h1,h2,h3,h4,b{
	font-family:sans-serif;
}
h2{
	font-size:1.4em;
}
p,li,dd,aside{
	text-align:justify;
}
p{
	text-indent:1em;
}

section{
	box-shadow:0 0 0 1px black,3px 3px 0 1px black;
	margin:50px 0 0 0;
	padding:75px;
	background-color:white;
}

body script:not(.hidden),body style:not(.hidden){
	display:block;
	white-space:pre;
	text-overflow:ellipsis;
	overflow:hidden;
}
script[type^="math/tex"]{
	display:none !important;
}
script,style,code{
	font-family:monospace;
	color:darkgreen;
}
script:not(.hidden),style:not(.hidden){
	background-color:rgba(0,0,0,.1);
	tab-size:2;-moz-tab-size:2;
	padding:5px;
	line-height:1.2em;
}
.codeset>script,.codeset>style{
	font-size:0.9em;
}
script:before{
	font-weight:bold;
	color:navy;
	content:"JavaScriptコード\A"
}
script[type]:before{
	font-weight:bold;
	color:navy;
	content:attr(type)"コード\A";
}
style:before{
	font-weight:bold;
	color:navy;
	content:"CSSコード\A";
}

h2,h3,h4{
	margin-top:50px;
}
aside{
	margin:5px 0 5px 70px;
	background-color:rgba(255,255,0,.2);
	padding:10px;
}
aside:before{
	font-family:sans-serif;
	font-weight:bold;
	content:"Hint:  ";
}
dt{
	font-family:sand-serif;
	font-weight:bold;
}
li,dd,dt{
	padding:2px 5px;
}
section ul,section ol,section dl{
	background-color:rgba(0,255,0,.2);
}
.codeset{
	position:relative;
	margin-top:20px;
}
.codeset>script,.codeset>style,.codeset>div:not(.canvaslike){
	margin-left:210px;
}
.codeset>canvas,.codeset>svg,.codeset>img,.codeset>.canvaslike{
	background-color:white;
	border:2px black outset;
	float:left;
	width:200px;
	height:200px;
}
.codeset:after{
	clear:both;
	display:block;
	content:"";
}
figure{
	text-align:center
}
figure object{
	width:100%;
	display:block;
}
figure:not(.simple)>figcaption{
	margin-top:10px;
}

#history{
	max-height:200px;
	overflow:auto;
}

nav>ol{
	column-count:3;-moz-column-count:3;-webkit-column-count:3;-ms-column-count:3;
}

/*table*/
table{
	font-size:0.9em;
	margin:0 auto;
	border-collapse:collapse;
	caption-side:bottom;
}
th{
	font-family:sans-serif;
}
table,td,th{
	border:solid 1px black;
	vertical-align:top;
}
th,td{
	padding:2px 7px;
}
tr td{
	line-height:1.5em;
}
thead,th{
	background-color:purple;
	color:white;
}

span.list{
	counter-reset:list;
}
span.list>span{
	counter-increment:list;
}
span.list>span:before{
	content: "「("counter(list) ") ";
}
span.list>span:after{
	content: "」";
}

/*counter*/
body{
	counter-reset:section;	
}
section{
	counter-increment:section;
	counter-reset:article,tables,figure,codeset;
}
section>h1:before{
	content:counter(section) ". ";
}
section h2{
	counter-increment:article;
	counter-reset:topix;
}
section h2:before{
	content:counter(section) "." counter(article) ". ";
}
section h3{
	counter-increment:topix;
}
section h3:before{
	content:counter(section) "." counter(article) "." counter(topix) ". ";
}
caption{
	white-space:pre;
}
caption:before{
	counter-increment:tables;
	content:"表 ("counter(section) "-" counter(tables) ") ";
}
h4:before{
	content:"○";
}
section figure:not(.simple){
	counter-increment:figure;
}
section figure:not(.simple)>figcaption:before{
	content: "図 ("counter(section) "-" counter(figure) ") ";
}
section .codeset,script[title],style[title]{
	counter-increment:codeset;
}
section .codeset:before,script[title]:before,style[title]:before{
	display:block;
	font-family:sans-serif;
	font-weight:bold;
	content: "(コード "counter(section) "-" counter(codeset) ") "attr(title);
}

div.error{
	padding:5px;
	background-color:rgb(255,220,220);
	color:red;
	font-size:10px;
	line-height:1em;
}
div.error:before{
	content: "笆ｶ";
}

@media print{
	body{
		width:100%;
	}
	body,section,article{
		box-shadow:none;
	}
	section,article{
		padding:0;
	}
	canvas,video{
		width:100px;
		height:100px;
	}
	#history{
		height:200px;
	}
	table{
		font-size:0.8em;
	}
	.codeset>canvas,.codeset>.canvaslike,.codeset>svg,.codeset>video{
		width:100px !important;height:100px !important;
	}
	.codeset>canvas:not(:first-of-type),.codeset>.canvaslike:not(:first-of-type){
		width:20px !important;height:20px !important;
	}
	.codeset>script,.codeset>style{
		margin-left:110px;
	}
	.codeset,table,figure{
		page-break-inside:avoid;
	}
	section{
		page-break-before:always;
		margin:0;
		padding:0;
	}
}