@font-face {
  font-family: 'Caslon Antique Regular';
  font-style: normal;
  font-weight: 400;
  src: url(caslon-antique.regular.woff) format('woff');
  font-display: swap;
}

:root {color-scheme: light dark}
body {
	background-color: #f2e0c4;
	color: #000;
	font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}
header	{color: #510000}
h1, h2, h3, h4 {font-family: 'Caslon Antique Regular',Garamond,Palatino,Georgia,Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol}
h1 {margin-top:0;margin-bottom:0}
header p {margin-top:0}
h2 {margin-top:0}

h3, h4 {margin-top: .25em}
h3 {border-top: 1px #ccc solid; margin-top: 1em; padding-top: .5em}
a:link {color:#069}
a:visited {color:#555}
a:hover {color: #c33}
a:active {color: #f00}

header p, nav, footer, .postslist .detail {font-size: .9em}
.alternates {text-align:right}
main {
	background-color: #fff;
	padding: 1em;
	line-height: 1.5em;
}
.e-content {
	line-height: 1.75em;
	font-family:Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	font-size:14pt;
}
main img {
	max-width: 100%;
	max-height: auto;
	float: right;
	margin: .5em;
}
main img.opposite {
	float: left;
}
main img.full {
	float:none;
	display:block;
	margin:auto;
}
.clear {
	clear:both;
}

main footer {border-top: 1px #ccc solid; clear:both}

nav.crumbs .prev {float:left}
nav.crumbs .next {float:right}
nav.crumbs .done {display: block;clear: both}

nav ul {margin-left:0; padding:0; font-size: 12pt}
nav li {display:inline}
nav li a {
	display:inline-block;
	background-color: #dca;
	padding: 1px .5em;
	text-decoration:none;
	color: #000;
	border: 1px #dca solid;
}
nav li a:hover {
	background: #fff;
	border: 1px #510000 solid;
}
nav li a:active {
	background: #ddd;
	border: 1px #000 solid;
}
nav li a:visited, nav li a:link {
	color: #000;
}

.postslist li {list-style-type: none; margin-bottom: .5em}
.postslist .detail {display: block}

aside {font-size: 83%}

.reviewtable th {border-bottom: 2px black solid}
.reviewtable td, .reviewtable th {padding-top: .5em; padding-bottom: .5em; padding-left: 1em}
.reviewtable tbody tr:nth-child(even) td {border-bottom: 1px #ccc solid}
.reviewtable tr td:nth-child(1), .reviewtable tr td:nth-child(2),
	.reviewtable tr th:nth-child(1), .reviewtable tr th:nth-child(2)
	 {padding-left: 0}

@media screen and (min-width: 600px)  {
	h1 {font-size: 30pt}
	h2 {font-size: 24pt}
	h3 {font-size: 18pt} 
	h4 {font-size: 14pt} 
	main {
  		box-shadow: 5px 5px 5px #999;
  		margin-left: .5in;
		margin-right:.5in;
	}
	main img {
		max-width: 50%;
		max-height: auto;
	}
	main img.full {
		max-width: 100%;
	}
}
@media screen and (min-width: 800px) {
	main {
		margin-left: 1in;
		margin-right: 1in;
		padding: 2em;
	}

}
@media screen and (min-width: 960px)  {
	h1 {font-size: 36pt}
	main {
		max-width: 45em;
		padding: .5in;
	}
}

@media screen and (max-width: 600px)  {
	h1 {font-size: 2.25em}
	h2 {font-size: 1.75em}
	h3 {font-size: 1.5em} 
	h4 {font-size: 1.25em} 
	body {
		margin:1ex;
	}
	main {
		margin-left: -1ex;
		margin-right: -1ex;
	}
	main img, main img.opposite {
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}

}
@media screen and (prefers-contrast: more) {
	header {color: black}
	h2, h3, h4 {font-family: Garamond,Palatino,Georgia,Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol}
	a {font-weight: bold}
	a:link {color: #09c}
	a:visited {color: #309}
	a:hover {color: #c00}
	a:active {color: #fff; background:#900}
	nav li a:visited, nav li a:link {background: white; color: blue; border: 3px black solid; padding: 6px}
	nav li a:hover {background: black; color: white; border: 3px black solid; padding: 6px}
	nav li a:active {background: red; color: white; border: 3px black solid; padding: 6px}
}


@media (prefers-color-scheme: dark) {
	body {background-color: #302515; color: #fec}
	main {background: #1f1810; color: #fec; box-shadow: none}
	header {color: #dca}

	a:link {color: #0cf}
	a:visited {color: #8af}
	a:hover {color: #c33}
	a:active {color: #f00}

	nav li a:visited, nav li a:link {background: #1f1810; color: #fff; border-color: #1f1810}
	nav li a:hover {background: #dca; color: #000; border-color: #dca}
	nav li a:active {background: #fff; color: #000; border-color: #fff}
} 
@media (prefers-color-scheme: dark) and (min-width: 600px) {
	main {border: 1px black solid}
}
@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
	body, html, header, main {color: white; background: black}
	a:active {color: #000; background:#c00}
	nav li a:visited, nav li a:link {background: black; color: #8af; border: 3px #8af solid; padding: 6px}
	nav li a:hover {background: white; color: black; border: 3px white solid; padding: 6px}
	nav li a:active {background: red; color: white; border: 3px red solid; padding: 6px}
}

@media print {
	h1 {font-size: 36pt}
	h2 {font-size: 24pt}
	h3 {font-size: 18pt} 
	h4 {font-size: 14pt} 
	main {padding: 0}
	main .e-content {
		line-height: 1.25em;
		font-size:12pt;
	}
	main img {
		float: right;
		margin: .5em;
	}
	main img.opposite {
		float: left;
	}
	nav, .noprint {display:none}
	h3, main footer {border-color: #000}
	header	{color: #000; border-bottom: 2px solid #000; margin-bottom: 1em}
	a:link,	a:visited {color:#000; text-decoration: none}
}