/* Phones and small tablets: the original fixed 804px table layout, reflowed into a single column.
   Desktop rendering is unchanged (everything here is inside the media query). */
@media (max-width: 820px) {
	body { margin: 0; background-size: 100% auto; }
	#main, #main > tbody, #main > tbody > tr, #main > tbody > tr > td {
		display: block;
		width: auto !important;
		height: auto !important;
	}
	#main { margin: 8px; }
	#main tr.deco, #main td.deco, #main td.side { display: none; }

	/* header: title graphic and home icon */
	#main td.titleCell { padding: 12px 10px 4px; text-align: left; background: #fff; }
	#main td.titleCell .floater, #main td.titleCell .floater div { position: static !important; }
	#main td.titleCell img[src$="title.gif"] { max-width: 100%; height: auto; }
	#main td.titleCell img[src$="b.gif"] { display: none; }
	#topMenu { width: auto !important; margin: 0 10px; }

	/* inner pages: the vertical menu becomes a wrapped row of links */
	#main td.menuCell { padding: 0 !important; background: #fff; }
	#main td.menuCell > br { display: none; }
	#main td.menuCell table { width: 100% !important; }
	#main td.menuCell td { display: block; width: auto !important; height: auto !important; }
	#main td.menuCell img { display: none; }
	#menuV { background: #faf3e8; white-space: normal; padding: 6px 6px; border-bottom: 1px solid #e3d2bc; }
	#menuV A.menu, #menuV A.subMenu, #menuV A.subMenuSelected { display: inline-block; padding: 6px 8px; }

	/* home page: horizontal menu wraps; the book cover sits above the text */
	#menuH { white-space: normal; padding: 6px 6px !important; background: #faf3e8; line-height: 2.2em; }
	#menuH img { display: none; }
	#menuH A.menu { display: inline-block; padding: 0 8px; }
	#main td.bookCell { padding: 10px 0; text-align: center; background-size: 100% auto; }
	#menuH { margin: 0; }
	#main td.bookCell br { display: none; }
	#main td.bookCell img[src$="book.webp"] { width: 140px; height: auto; display: block; margin: 0 auto 8px; }

	/* content */
	#mainArea { padding: 10px 12px 20px !important; overflow-wrap: anywhere; }
	#mainArea img { max-width: 100%; height: auto; }
	#mainArea img[align="left"] { max-width: 40%; }
	#mainArea .floater { display: none; }
	#mainArea table { width: 100% !important; }
	#mainArea iframe, #mainArea embed, #mainArea object { max-width: 100%; }
	#footer { padding: 10px 12px; text-align: center; }
	P, .bdyTxt, #mainArea { font-size: 11pt; }
	H1, H2 { line-height: 1.2em; }
}