h1	{
		color:		Maroon;
		font-family: 	Verdana,Arial,Helvetica,"sans-serif";
		font-style:	italic
	}


h2	{
		color:		Maroon;
		font-family: 	Verdana,Arial,Helvetica,"sans-serif";
	}

h3	{
		color:		Maroon;
		font-family: 	Verdana,Arial,Helvetica,"sans-serif";
	}

body	{
		margin:		0;
		padding:	0;
		font-family: 	Georgia,Verdana,Arial,Helvetica,"sans-serif";
		font-size:	12pt
	}

td	{
		font-family: 	Georgia,Verdana,Arial,Helvetica,"sans-serif";
		font-size:	12pt
	}

pre	{
		background:	#EEEEEE;
		padding-left:	2%;
		padding-right:	2%;
		padding-top:	1%;
		padding-bottom:	1%;
		border-left-style:	solid;
		border-right-style:	solid;
		font-family: 	"Lucida Console",Courier;
		font-size:	10pt;
		overflow-x:	auto
	}

.copyright {
		font-family: 	Georgia,Verdana,Arial,Helvetica,"sans-serif";
		font-size:	9pt;
		font-weight: 	bold
	}

.copyright a {
		color:		black
	}

.notice {
		background-color: #ffffe0;
		padding:	5px;
		text-align:	center
	}

.nav-bar {
		width:		100%;
		border-collapse: collapse
	}

.nav-bar td {
		background-color: #aaaaff;
		width:		25%;
		height:		30px;
		text-align:	center
	}

.nav-bar td:first-child {
		text-align:	left
	}

.nav-bar td:last-child {
		text-align:	right
	}

.timestamp {
		font-family: 	Georgia,Verdana,Arial,Helvetica,"sans-serif";
		font-size:	9pt
	}

/* Sidebar navigation layout */
.page-wrapper {
		display:	flex;
		min-height:	100vh
	}

.sidebar {
		width:		200px;
		min-width:	200px;
		box-sizing:	border-box;
		padding:	12px 10px;
		border-right:	1px solid #ccc;
		background-color: #f7f6f3;
		font-family:	Georgia,Verdana,Arial,Helvetica,"sans-serif";
		font-size:	14px;
		line-height:	1.4;
		overflow-y:	auto;
		position:	sticky;
		top:		0;
		height:		100vh
	}

.sidebar-header {
		font-weight:	bold;
		color:		Maroon;
		border-bottom:	1px solid #bbb;
		padding-bottom:	6px;
		margin-bottom:	10px;
		font-size:	15px
	}

.sidebar-footer {
		border-top:	1px solid #bbb;
		padding-top:	8px;
		margin-top:	12px;
		font-size:	13px;
		color:		#777;
		line-height:	1.6
	}

.sidebar-footer a {
		color:		#777
	}

.content {
		flex:		1;
		max-width:	900px;
		margin-left:	3%;
		margin-right:	3%;
		padding:	4px 8px;
		min-width:	0
	}

.nav-tree, .nav-tree ul {
		list-style:	none;
		padding-left:	0;
		margin:		0
	}

.nav-tree ul {
		padding-left:	14px
	}

.nav-tree li {
		margin:		2px 0
	}

.nav-tree a {
		color:		#0000AA;
		text-decoration: none;
		display:	inline-block;
		padding:	1px 3px;
		border-radius:	3px
	}

.nav-tree a:visited {
		color:		#660088
	}

.nav-tree a:hover {
		background-color: #e8e6df;
		text-decoration: none
	}

.nav-tree a.current {
		font-weight:	bold;
		background-color: #e0dfd8
	}

.nav-tree details {
		margin:		2px 0
	}

.nav-tree summary {
		cursor:		pointer;
		user-select:	none;
		color:		#333;
		font-weight:	bold;
		padding:	1px 3px;
		border-radius:	3px
	}

.nav-tree summary:hover {
		background-color: #e8e6df
	}

.nav-tree summary::marker {
		color:		#555;
		font-size:	14px
	}

/* Mobile layout */
.menu-toggle {
		display:	none;
		position:	fixed;
		top:		8px;
		left:		8px;
		z-index:	200;
		background:	#f7f6f3;
		border:		1px solid #ccc;
		border-radius:	4px;
		padding:	6px 10px;
		font-family:	Verdana,Arial,Helvetica,sans-serif;
		font-size:	14px;
		cursor:		pointer;
		color:		Maroon
	}

@media screen and (max-width: 700px) {
	.menu-toggle {
		display:	block
	}

	.sidebar {
		position:	fixed;
		left:		-220px;
		top:		0;
		height:		100vh;
		width:		200px;
		min-width:	200px;
		z-index:	100;
		transition:	left 0.2s ease;
		border-right:	1px solid #ccc;
		box-shadow:	2px 0 8px rgba(0,0,0,0.15)
	}

	.sidebar.open {
		left:		0
	}

	.sidebar-overlay {
		display:	none;
		position:	fixed;
		top:		0;
		left:		0;
		width:		100%;
		height:		100%;
		background:	rgba(0,0,0,0.3);
		z-index:	50
	}

	.sidebar-overlay.open {
		display:	block
	}

	.content {
		margin-left:	3%;
		margin-right:	3%;
		padding-top:	40px
	}

	img {
		max-width:	100%;
		height:		auto
	}

	.nav-bar td {
		font-size:	10pt
	}
}