:root
{
	/* global variables */
	/* height of top navbar: 2x vertical padding + 18px font x 1.5 line height (=27px) */
	--dyPadBar: 7px;
	--dyBar: calc(var(--dyPadBar)*2 + 27px);
	--dxSidebar: 50px; /* just used for margin */
	--clrLight: #F8FEF6;	/* page background #e8f0f8 */
	--clrDark: #19420B;		/* HR, top bar */
	--clrBarText: #E0DDB8; /*#FFFAC7; F9F6CD D7D3A2*/
}
/* scroll-padding-top doesn't work in Safari (as of 3/31/21) macOS or iOS; .bookmark is workaround
	html {scroll-padding-top: var(--dyBar)}
	*/
body {background-color: var(--clrLight); color: #333}
body,h1,h2,h3,h4,h5,h6 {font-family:Arial,sans-serif}
h1,h2 {font-weight:600}
hr {border-top: 1px solid var(--clrDark)}
.contact A {color: #00c}

.menu-icon {font-size: 70%; vertical-align: middle}
.toggle-visible-icon {color: #aaa; margin-left: 5px}

/* adjust target location to account for top nav bar (otherwise content starts under bar) */
.bookmark {padding-top: var(--dyBar); margin-top: calc(var(--dyBar) * -1)}

.w3-bar {background-color: var(--clrDark); color: var(--clrBarText)}
.w3-bar .w3-bar-item {padding: var(--dyPadBar) 12px}
.w3-bar .corner {width: var(--dxSidebar)}
.w3-bar-block .w3-bar-item {padding: 4px 26px}

.w3-main {margin-left: var(--dxSidebar); margin-top: calc(var(--dyBar) + 7px)}


.intro { max-width: 50em }
.item { display: inline-block; border: 1px solid #444;
	width: 250px;
	cursor: pointer;
	margin: 0 1em 1em 0; padding: 0 1em 1em 1em; background-color: white;
	text-align: center;	vertical-align: top }
.unavail { filter: brightness(75%); cursor: default }
.item h2  { font-size: 120% }
.item-detail { display: inline-block; border: 1px solid #444;
	max-width: 50em;
	margin: 0 1em 1em 0; padding: 0 1em 1em 1em; background-color: white;
	vertical-align: top }
.request { border: 1px solid #884;
	margin: 0 1em 1em 0; padding: 0 1em 1em 1em; background-color: lightyellow;
	vertical-align: top }
.item IMG, .item-detail IMG { border: 2px darkgray solid }


/*
*	page content, general stuff
*/

/* JavaScript; if it's enabled, these classes are changed via js-util.js */
.jsdisabled { font-weight: normal }	/* changed to 'display: none' */
.jsenabled { display: none }		/* changed to 'display: block' */

/* message box via closable panel */
.msgbox {background-color: snow; border: 3px solid darkgreen; margin: calc(var(--dyBar) + 2em) 2em 2em 2em; padding-right: 3em;
	max-width: 40em }
.closebtn {font-size: 120%; font-weight: bold}
.closebtn:hover {background-color:#333!important; color: white!important}

/*
*	forms
*/

/* results from form submit/etc (shown at top of page) */
/* margin calc provides spacing below top bar */
.resultok {background-color: snow; border-color: darkgreen}
.resulterr {background-color: #ffe4e4; border-color: darkred}

/* input form */
.formtable { border-spacing: 0; padding: 0; margin: 0 }
.dottedline { border-style: dotted }
.divtext, .notetext, .fieldctl, .fielddesc { vertical-align: top; text-align: left }
.labelopt, .labelreq { vertical-align: top; text-align: right; white-space: nowrap }
.labelreq { font-weight: bold }
.divtext { font-style: italic; font-family: sans-serif }
/*.notetext { font-style: italic } */
/* nested table holding form field and description */
.formfield { border-spacing: 0; padding: 0; margin: 0 }
.fielddesc { padding-left: 0.5em }
/*.fielddesc { padding-left: 0.5em; xfont-style: italic } */

/*
*	table formatting
*/

/* table with alternating lt/dk backgrounds for each row */
.striped, .stripe-cell, .stripe-footer { border-style: solid; border-color: #b3b3b3 }
.striped { border-width: 0 1px 1px 0; border-spacing: 0 }
.stripe-cell { border-width: 1px 0 0 1px; padding: 0 0.5em; vertical-align: top }
.stripe-header { font-weight: bold; background-color: #565245; color: #ffffff; vertical-align: bottom }
.stripe-light { background-color: #ffffff }
.stripe-dark { background-color: #f7f7f7 }
.stripe-footer { border-width: 1px 0 0 1px; padding: 0 0.5em; border-top: 2px solid #999999 }

/*
*	page menu
*/
.pagemenubar { margin: 1em 0; padding: 0; width: 100%; font-family: sans-serif; font-size: 95%; 
	border-color: #c1e0c1; border-style: solid; border-width: 1px 0; background: #f0faf0; color: #0f4d0f }
.pagemenu { border-spacing: 0; padding: 0; margin: 0 }
.pagemenuitem { padding: 0 0.6em 0.1em 0.6em }
.pagemenudisable { color: #c1e0c1 }
.pagemenuhidden { color: #f0faf0 }

/*
*	review / debugging
*/
.emailpanel {border: solid darkgoldenrod 3px; background-color: cornsilk}
.review { color: maroon; background-color: yellow; }