@media screen {
	body {
		min-width: 320px;
		display: grid;
		grid-template-areas:
		'header header'
		'navi searchBox'
		'pageHeader pageHeader'
		'msg msg'
		'main main'
		'footer footer';
		/* grid-template-columns: 100px auto; */
		grid-template-columns: auto auto;
	}

	header { grid-area: header; }
	#pageHeader { grid-area: pageHeader; }
	#searchBox { grid-area: searchBox; height: 40px; }
	#msgBox { grid-area: msg; text-align: center; }
	navi { grid-area: navi; }
	main { grid-area: main; }
	footer { grid-area: footer; }

	header, footer, #pageheader, #searchBox, main, #msgBox div div{
		padding: 5px;
		/* border:solid 1px #f00; */
	}

	/* Navigation and Menu */
	navi div {
		float: left;
	}
	navi button {
		font-size: 110%;
		font-weight: bold;
		/* width: 40px; */
		height: 40px;
		background-color: var(--buttonBG);
	}
	navi button.selected {
		background-color: var(--buttonBGSelected);
	}
	navi div div a:hover,
	navi button:hover {
		background-color: var(--buttonBGHover);
	}
	navi div div {
		display: none;
		visibility: hidden;
		position: absolute;
		background-color: var(--buttonBG);
		min-width: 200px;
		z-index: 1;
	}
	navi div div p,
	navi div div a {
		padding: 5px;
		margin: 0px;
		display: block;
	}
	navi div:hover div {
		display: block;
		visibility: visible;
	}
	/* Navigation and Menu END */
	/* Footer */
	footer time { float: right; }
	/* Footer END */
}
/* Print */
@media print {
	tr { page-break-inside:avoid; page-break-after:auto }
	header, footer, #pageHeader, navi, #searchBox { visibility: hidden; padding: 0px; }
	.pg_break { page-break-after:always; }
	main { border-style: none;}
}
/* Print END */