*{
		font-family:sans-serif;
		word-break:break-all;
		word-wrap:break-word;
		overflow-wrap:break-word;
		box-sizing:border-box;
		font-size:14px;
	}
	a{}
	a:normal{text-decoration:none;font-weight:normal;}
	a:visited{text-decoration:none;font-weight:normal;}
	a:link{text-decoration:none;font-weight:normal;}
	a:hover{text-decoration:none;}
	a:active{text-decoration:none;}
	h1,h2,h3,h4,h5,h6{
		margin:0px;
		padding:0px;
		display:block;
		font-weight:normal;
	}
	hr{
		height:1px;
		border:none;
		background-color:gainsboro;
	}
	body{width: 100%;margin:0;}
	header {
		color:black;
		background-color:ghostwhite;
		padding:8px;
		width: 100%;
		display: block;
	}
	header h1{display: inline-block;line-height: 20px;}
	header h1 a{
		color:black;
		font-size:28px;
		line-height:28px;
	}

	footer{
		height:40px;
		text-align:center;
		position:fixed;
		top:calc(100% - 40px);
		width:100%;
		color:black;
		background-color:ghostwhite;
		padding:8px;
	}
	nav{
		display: block;
		text-align:right;
	}

	article>nav a:hover{background-color:indianred;}

	body>nav {z-index:3;}
	body>nav a{}
	body>nav ul li:hover{background-color:indianred;}

	@media screen and (min-width:800px){	/* pc */
		body>nav {color:white;}
		body>nav ul{
			display:inline-block;
			list-style-type:none;
			list-style-position:inside;
			padding:0;
			margin: 0;
		}
		body>nav ul li{
			display:inline-block;
			margin-right:4px;
			margin-top:4px;
			text-align:center;
			padding:0 4px 0 4px;
		}
		body>nav ul li:first-child{display:none;}
	}
	@media screen and (max-width:800px){	/* mobile */
		body>nav{
			float: right;
			position:absolute;
			z-index:1;
			top:4px;
			right:16px;
		}
		body>nav ul{
			width:96px;
			text-align:center;
			margin:0px;
			padding:0px;
		/*	box-shadow: 0px 0px 8px gray;	*/
			border:solid 1px gainsboro;
			background-color:white;
		}
		body>nav ul li{
			display:none;
			width:100%;
			line-height:24pt;
		}
		body>nav a{color:black;}
		body>nav ul li:first-child{display:block;}
		body>nav ul:hover li,
		body>nav ul li:hover{display:block;}
	}
	.popup{
		display:none;
		width:90%;
		margin: 5%;
		background-color:white;
		position:absolute;
		top:32px;
		height: 90%;
		overflow: scroll;
		z-index:3;
		padding:10px;
		border:solid 4px #19519b;
		border-radius:8px;
	}
	#background{
		z-index:2;
		position:fixed;
		top:0;
		left:0;
		display:none;
		background-color:black;
		width:100%;
		opacity:0.6;
		height:100%;
	}

	section>ul {
		width:320px;
		float:left;
		margin:0;
		padding:0;
		overflow: scroll;
	}

	input[type="button"]{
		margin:0;
		width:42px;
		padding:0;
	}
	table{
		width: 100%;
	}
	table tbody tr:hover{
		background-color:beige;
	}
	@media screen and (max-width: 480px) {
		td.detail{
			display:none;
		}
	}
	@media screen and (min-width: 480px) {
		#editarea {
			background-position:0 0;
		}
	}
	section>div{
		display: grid;
		grid-template-columns: 64px 1fr;
		align-items: start;
		background-color: black;
	}
	#editarea {
		-moz-tab-size: 4;	/* Code for Firefox */
		-o-tab-size: 4;		/* Code for Opera 10.6-12.1 */
		tab-size: 4;
		font-family:monospace;
		font-size:14px;
		line-height:16px;
		display:block;
		float:left;
		resize:none;
		border:solid 0px gray;
		outline:solid 0px gray;
		color:white;

		padding:0;
		white-space: pre;
	/*	overflow:scroll;	*/
		word-wrap:break-word;
	}
	#editarea *{
		font-family:monospace;
		font-size:14px;
	}
	div#linenum{
		font-family:monospace;
		padding-right:8px;
		font-size:14px;
		line-height:16px;
		width:64px;
		float:left;
		overflow:hidden;
		text-align:right;
		border:solid 0px gray;
		color:gray;
		background-color:black;
	}
	.button{
		user-select: none;
		display:inline-block;
		border:solid 1px firebrick;
		border-radius:4px;
	/*	vertical-align: top;	*/
		height:28px;
		line-height:28px;
		margin: 4px 2px 4px 2px;
		padding:0 4px 0 4px;
		background-color:bisque;
	}
	.button:hover{
		background-color:red;
		color:white;
	}