@charset "UTF-8";
/* CSS Document */

/* MOBILE 1ST, FOLLOWED BY NAVIGATION, FOLLOWED BY MEDIA QURIES FOR DESKTOP */
/* General styling */

* {box-sizing: border-box;} /* so that padding and border are included in calculating every element’s width and height universally */

body {
	margin: 0 auto 0.5em;  /* CENTER HORIZONTALLY WITH AUTO */
	width: 98%;
	max-width: 52em; /* MAJOR SECTIONS WILL ALIGN WITH THIS MAX WIDTH 52em; width will change with font size; specify 832 pixels to keep width fixed */
	font-family: verdana, sans-serif;
	font-size: 1em;
	line-height: 150%;
	background-color: #dbdee3; /* the nice light gray color */
	border: 1px solid #b6bfc8; /* blue med */
	word-break: normal;
}

a:link {color: #b6bfc8; color: SlateGray; text-decoration: underline; } /* 234a5f = blue dark text */
a:visited {color: SlateGray; text-decoration-line: underline; } /
a:active {color: MediumOrchid;}
a:hover {text-decoration-line: underline; text-decoration-style: wavy;}

article, nav {border-bottom: 1px solid SlateGray;} /* 234a5f = blue dark */
article {background: White;}
article, footer {padding:0.5em;}
article, section {text-align: left;}
footer {
	font-size:0.8rem;
	text-align: center;
	background-color:WhiteSmoke;
	background:-webkit-gradient(linear, 0 0, 0 100%, from(White), to(LightGray));
	background:-moz-linear-gradient(bottom, LightGray, White 100%);
	line-height:135%;
}
XXarticle > * {
	margin:1em 0;
} /* MAYBE ELIMINATE THIS?? */

header {background-color:SlateGray;
	border-top: 1px solid #b6bfc8;
	border-bottom: 1px solid #b6bfc8;} /* temp border; for some reason, a border eliminates the gap between header and article; do not know why */

/* basic, nested, and paragraph-style lists */
ul {list-style-type:square; padding-left:7.5%; margin-top: 0.5em;}
ol {list-style-type:decimal; padding-left:7.5%; margin-top: 0.5em;}
ul.nest2 {list-style-type: circle; padding-left:3%; margin-top: 0;}
ol.nest2 {list-style-type:lower-alpha; padding-left:3%; margin-top: 0;}
ul.para li, ol.para li, .para ul li, .para ol li {padding-top: 0.5em;} /* adds vertical space between li elements */
.nomark ul, ul.nomark {list-style-type:none;}
ul.para p, ol.para p {margin-top: 0;} /* makes a paragraph within unordered or ordered list align with list items; is this legit? maybe should use a couple of br breaks instead */
li > ul, li > ol {margin-top: 0;} /* removes default top space from first of nested li's, both ordered and unordered; not needed if nested ul or ol is class nest2 */
ol.abc {list-style-type: lower-alpha;}
ol.marked
	::marker {font-weight:bold; color:SlateGray;}

/* to style description lists, names, and terms */
dl {margin-left: 1em; font-size:0.9em; line-height: 130%;}
dt {color: SlateGray; font-weight: 600; padding-top: 0.75em;}
dd {margin-left: 2em;}
dd.two {margin-top: 0.375em; margin-bottom: 0.375em;} /* this class used only with second or subsequent dd element to insert a little space above and below */
dd.firstb:first-letter {font-weight:bold; color: SlateGray;}

/* place in a div; makes hanging paragraphs with initial first letter; the qa class amends styling for question, for question and answer paragraphs, bolding first letter */
.hangletter p {
	padding-left:2em;
}
.hangletter p:first-letter {
	margin-left: -1.5em;
}
.qa p:nth-of-type(odd) {
	font-style:italic;
}
.qa p:first-letter {
	margin-left: -1.5em;
	font-weight:bold;
	font-style:normal;
}

/* general styles of headings, and headings preceding headings and certain other elements (combinator +; child elements) */
h1, h2, h3, h4, h5, h6 {
	display: block;
	color: SlateGray;
	font-weight: 500;
	line-height: 120%;
	margin: 1.5em 0 .5em;} /* MARGINS HAD PREVIOUSLY BEEN SET AS margin: 1.0em 0 -0.25em; */

h1 {font-size:2em;}
h2 {font-size:1.5em; }
h3 {font-size:1.17em; }
h4 {font-size:1.0em;}
Xh5 {font-size:1.2em;}
Xh6 {font-size:1.1em; }

h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, h1 + ul, h1 + ol, h2 + ul, h2 + ol, h3 + ul, h3 + ol {margin-top:0;} /* maybe not necessary for h's because of margin-collapse? */
h3 + p.aside {color: #666; margin-top: 0;}
article h1:first-child, article h2:first-child {margin-top: 0;}

/* styling and behavior of the page-top and page-bottom navigation triangles */
.triangle {font-size:1.2rem; font-style:normal; text-transform: none;}
a.triangle {text-decoration:none;}
a:hover.triangle, a:focus.triangle {text-decoration:none; color:#ccc;}

.rt {float:right; display: block;}
.lft {float:left; display: block;}

/* for passages of smaller, lighter colored, italics text (such as modification time) */
.unobtrusive {color:#666; font-size: .8rem; font-style: italic;}

/* centered block of prominent text with yellow background */
.obtrusive {background-color: rgba(251,255,0,0.37); border: 1px solid black; margin: 1em 10%; padding: .5em 1em;}
.obtrusive *:first-child {margin-top: .25em;}
ul.obtrusive, ol.obtrusive {padding-left:2em;}

/* nice, skinny, main-color rules, in short and long lengths */
.rule {width: 33%; border-collapse: collapse; border-top: 1px solid SlateGray; height: 0.5em;}
.rulefull {width: 100%; border-collapse: collapse; border-top: 1px solid SlateGray; height: 0.5em;}

/* HANDY-DANDY ALIGNMENTS AND INDENTS AND SHOW OR NOT SHOW */
.center {text-align:center; }
.rital {text-align:right; font-style:italic;}
.noshow {display:none;}
.indentlr, blockquote, .blockquote {margin-left: 5%; margin-right: 5%;}
blockquote, .blockquote {
	color: #666; /* lighter text than surrounding */
	font-size: 0.9em;
}

/* site stying of basic, common elements in next three groups */
p {margin:1em 0 0.5em;}
p.tight {margin-top: 0;}
.b, b {font-weight:600; color:#SlateGray; } /* color gray */
.strong, strong {font-weight:bold; color:SlateGray;}
.i, i {font-style: italic; color: #555555;} /* color dark gray */
.em, em {font-style:italic; color:SlateGray;}
.big {font-size: 1.5em; line-height:150%}
.small {font-size: 0.9em; line-height: 125%;}
cite {font-style:italic; color:SlateGray;}

img {
	width: 100%;
}

figure {
	margin: 0;
}

figure figcaption {
	color: #666;
	font-style: italic;
	font-size: 0.8em;
}

/* Grid styling */
.container {
	display: grid;
	grid-column-gap: 1%;
	Xgrid-row-gap: 0.5em;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"h h h h h"
		"m m m m m"
		"c c c c c"
		"f f f f f";
}

header {
	grid-area: h; /* but not in container, ergo not in grid area? */
}

nav {
	grid-area: m;
	text-align: center;
}

article {
	grid-area: c;
}

footer {
	grid-area: f;
}

article > figure {
	grid-column: 1 / -1;
	margin: 20px 0;
}

aside {
	color: #666; /* lighter text than surrounding */
	font-size: 0.8em;
	font-style: italic;
	margin-left: 5%; margin-right: 5%;
}

/* to style entries in table-like two-column rows */
.itemleft {
	margin:1em 0 0 0;
	color:SlateGray;
}
.itemright {
	margin:0 0 0 1em;
}
p.itemright:first-line {
	font-weight:600;
	color:SlateGray;
}
/* end  table-like two-column rows styles */

.copyleft, .copyright {float: none; width: 100%; margin: 0.5rem 0 .25rem; text-align: left;
}

.flexor {margin: .5rem 0; /* to make a flex container within other elements or divs */
	-webkit-flex-flow: column; /* = flex-direction + implied no-wrap, though wrap seems to be of no consequence for mobile here */
	        flex-flow: column;
}

.flexor > .copyleft, .flexor > .copyright, .flexor > .left50, .flexor > .right50 {
-webkit-flex: 50%; /* grow + shrink + basis; only basis needed in this context */
        flex: 50%; /* grow + shrink + basis; only basis needed in this context */
}
/* ALTERNATE LAYOUT IN PLACE OF TABLES FOR FOR 2-COLUMNS WHOSE ENTRIES MUST ALIGN IN DESKTOP; DIFFERS FOR DESKTOP */
.flexleft {
	padding-top: 0.75em;
	color:SlateGray;
	margin-top: 0;
}
.flexright {
	padding-left: 2em;
	margin-top: -0.5em;
}

/* styles the title, i.e., "logo," in page headers; fine-tuned for mobile and desktop */
.logop {
	font-family: nova-oval, Xsans-serif, serif;
	font-size:1.25rem;
	font-weight:700;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: normal;
	color:white;
	padding: 1.0rem 0.1rem;
	text-decoration:none;
	text-align:center;
}
p.logop a, p.logop a:visited, p.logop a:active {color: white; text-decoration: none; }
p.logop a:hover, p.logop a:focus {color: #eee; text-decoration: none; }

/* THE NEXT PORTION OF THE STYLESHEET STYLES THE MAIN AND SUBORDINATE MENUS FOR NAVIGATION, INCLUDING THOSE OF THE FOOTER. AT THE END, ALL MEDIA QUERIES FOR DESKTOP */

nav {background: SlateGray; margin:0 auto; width:100%;
	column-count: 2; column-gap: 1px; column-rule: 1px solid #dbdee3;
	-webkit-column-count: 2; -webkit-column-gap: 1px; -webkit-column-rule: 1px solid #dbdee3;
	-moz-column-count: 2; -moz-column-gap: 1px; -moz-column-rule: 1px solid #dbdee3;
} /* sets relative width and centers */

/* ===== mobile list navigation ======================================================= */

nav ul {
	font-size:0;
	list-style-type: none;
	margin-top: 0;
	padding:0;
} /* sets style and appearance of navigation lists, and eliminates inter-block white space when inline by setting font-size to zero (to be overridden) */

nav a {
	display: block;
	padding:0.1em 0.25em;
	font-size:0.9rem;
	text-transform: uppercase;
	text-align:center;
	border-bottom: 1px solid #dbdee3; /* same gray as body background */
}

div.desktop {display: none;} /* for hiding elements that are desktop only */

/* ===== end mobile list navigation ================================================== */

/* THE FOLLOWING GROUPS HANDLE THE VISIBILITY AND STYLE OF SUBMENUS IN THE MAIN NAVIGATION, AND REQUIRE EACH PAGE TO HAVE A BODY CLASS ASSIGNED */

ul.nlr, ul.exh {display:none;} /* sets default invisibilty of submenus */

body.lie ul.lie, body.hom ul.hom, body.nlr ul.nlr, body.exh ul.exh, body.uni ul.uni, body.lin ul.lin, body.pla ul.pla, body.con ul.con, body.noh ul.noh, body.not ul.not, body.gag ul.gag, body.fal ul.fal, body.out ul.out, body.hof ul.hof, body.set ul.set, body.sex ul.sex, body.per ul.per, body.faq ul.faq, body.pos ul.pos {display:block; background: #b6bfc8; XXfont-size:0;} /* sets block appearance of submenus and eliminates inter-block white space by setting font-size to zero (to be overriden; though probably not necessary since neither mobile nor desktop menus are inlinw) */

nav a:link, nav a:visited {color:White; text-decoration:none; } /* sets default color and style for links and visited-links in nav menus; color for submenus to be overriden */

nav a:hover {background:#b6bfc8; } /* sets default hoverlink color and bg for (un)selected main tabs; to be overridden for selected tab and displayed submenu */

body.lie a.lie:link, body.lie a.lie:visited,
body.hom a.hom:link, body.hom a.hom:visited,
body.nlr a.nlr:link, body.nlr a.nlr:visited,
body.exh a.exh:link, body.exh a.exh:visited,
body.uni a.uni:link, body.uni a.uni:visited,
body.lin a.lin:link, body.lin a.lin:visited,
body.pla a.pla:link, body.pla a.pla:visited,
body.con a.con:link, body.con a.con:visited,
body.noh a.noh:link, body.noh a.noh:visited,
body.not a.not:link, body.not a.not:visited,
body.gag a.gag:link, body.gag a.gag:visited,
body.fal a.fal:link, body.fal a.fal:visited,
body.out a.out:link, body.out a.out:visited,
body.hof a.hof:link, body.hof a.hof:visited,
body.set a.set:link, body.set a.set:visited,
body.sex a.sex:link, body.sex a.sex:visited,
body.per a.per:link, body.per a.per:visited,
body.faq a.faq:link, body.faq a.faq:visited,
body.pos a.pos:link, body.pos a.pos:visited {color: DarkSlateGray; background: #b6bfc8; border-bottom: 2px solid WhiteSmoke;} /* sets link and visited-link color for selected main tab */

body.nlr ul.nlr a:link, body.nlr ul.nlr a:visited,
body.exh ul.exh a:link, body.exh ul.exh a:visited {color: DarkSlateGray; text-transform: lowercase; }  /* sets link and visited-link color for displayed submenu */

body.lie a.lie:hover, body.lie ul.lie a:hover,
body.hom a.hom:hover, body.hom ul.hom a:hover,
body.nlr a.nlr:hover, body.nlr ul.nlr a:hover,
body.exh a.exh:hover, body.exh ul.exh a:hover,
body.uni a.uni:hover, body.uni ul.uni a:hover,
body.lin a.lin:hover, body.lin ul.lin a:hover,
body.pla a.pla:hover, body.pla ul.pla a:hover,
body.con a.con:hover, body.con ul.con a:hover,
body.noh a.noh:hover, body.noh ul.noh a:hover,
body.not a.not:hover, body.not ul.not a:hover,
body.gag a.gag:hover, body.gag ul.gag a:hover,
body.fal a.fal:hover, body.fal ul.fal a:hover,
body.out a.out:hover, body.out ul.out a:hover,
body.hof a.hof:hover, body.hof ul.hof a:hover,
body.set a.set:hover, body.set ul.set a:hover,
body.sex a.sex:hover, body.sex ul.sex a:hover,
body.per a.per:hover, body.per ul.per a:hover,
body.faq a.faq:hover, body.faq ul.faq a:hover,
body.pos a.pos:hover, body.pos ul.pos a:hover {color:White; background:#99a6b2; } /* sets hoverlink color white and hoverlink bg color (slightly darker than HS version of light slate #b6bfc8) for selected main tab and displayed submenu */

/* End of fancy submenu styling for main navigation */

/* FOOTER MENU FROM MG: */
footer ul {
	list-style-type:none;
	margin:0;
	padding:0;
	font-size:0;
	text-transform:capitalize;
	text-align:center; } /* sets style and appearance of footer menu list, and eliminates inter-block white space by setting font-size to zero (to be overridden) */
footer li { display:inline; } /* sets footer menu list items to display horizontally */
footer li a {
	display: inline-block;
	font-size:0.75rem;
	padding:.0 1em; } /* sets style and appearance of footer menu links; needs both inline and block (invisible) inline, padded blocks; restores a visible font size based on root */

/* END OF FOOTER MENU FROM MG */




/* ===== begin media queries, for DESKTOP  ======================================================== */
/* CHANGE @media screen and (max-width:xx) or (min-width:xx) BACK TO MAX-DEVICE-WIDTH:500 OR MIN-DEVICE-WIDTH:XX WHEN ALL TESTING IS DONE */
/* EVIDENTLY MEDIA QUERY NEEDS TO BE ON ONLY A FINAL, SINGLE CSS STYLESHEET */

@media screen and (min-width: 500px) {
	body {font-weight: 300; color: #4c4c4c;}
	.container {
		grid-template-areas:
		"h h h h h"
		"c c c c m"
		"f f f f f";
	}
	h1, h2, h3, h4, h5, h6 {
		margin: 2.0em 0 0.5em;
	}
	h1 {
		font-size: 1.75em; font-size: 2.0em;
		margin: 0.25em 0;
	}
	h2 {font-size: 1.40em; font-size: 1.5em;}
	h3 {font-size: 1.30em; font-size: 1.25em;}
	h4 {font-size:1.3em; font-size:1.1em;}
	h5 {font-size:1.2em; font-size:1.0em;}
	h6 {font-size:1.1em; font-size:0.9em; }
	h3 + p.aside {
		color: #666;
		margin-top: -.75em;
		}
	dl {margin-left:5%;}
	footer li a {
		padding:.25em 1em;
		font-size: .8rem;
		}
	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top:1em;} /* used to make desktop sidebar navigation menu be always visible */


/* TO MAKE A FLEX CONTAINER WITHIN OTHER ELEMENTS OR DIVS */
.flexor {margin: .5rem 0; /* the flex container */
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-flow: row wrap; /* = flex-direction for desktop */
        	flex-flow: row wrap; /* = flex-direction for desktop */
}

/* USED IN FOOTERS FOR COPYRIGHT AND CONTACT INFO; DIFFERS FOR DESKTOP */
address {display: block; margin: 1em 0;}
.copyleft, .copyright {
	width: 48%;
	text-align: left;
	margin-top: 0;
}
/* USED IN PLACE OF TABLES FOR FOR 2-COLUMNS WHOSE ENTRIES MUST ALIGN IN DESKTOP; DIFFERS FROM MOBILE */
.flexleft {
	flex: 25%;
	padding-top: 0em;
	padding-left: 0.75em;
}
.flexright {
	flex: 75%;
	padding-left: 1em;
	margin-top: 0; /* is negative 0.5 in mobile */
}
.flexleft.memo {flex: 15%; padding-left:0;} /* as for to/from in memo */
.flexright.memo {flex: 85%; padding-left:0;} /* as for to/from in memo */

/* ===== desktop list navigation to undo mobile ============================ */

div.desktop {display: inherit;}

nav {column-count: 1;
	-webkit-column-count: 1;
	-moz-column-count: 1; }

	nav a {
		font-size: .8rem;
		padding: 0.1em 0.5em;
	} /* sets default style and appearance for all navigation links; restores a visible font size based on root */

body.nlr nav ul.subm, body.exh nav ul.subm, {XXdisplay: none;} /* necessary for every menu that has a sub-menu to cancel mobile display of the sub-menu immediately after columnar listed menu ; otherwise the sub-menu will appear twice in desktop, and break the line of the main menu items as well; REMEMBER TO LIST HERE IF A NEW SUB-MENU IS ADDED. ACTUALLY, I'M NOT SURE THIS IS NECESSARY? -- MAYBE NOT WITH SIDEBAR MENU??? */


/* ===== end desktop list navigation to undo mobile ========================= */


}