@charset "UTF-8";

body, td, th, pre { font-size: medium; font-family: Georgia, Garamond, "Times New Roman", Times, serif }
main, footer, .main { background-color: white; display: table; width: 96%; max-width: 950px; margin: 0 auto; border: 0; padding: 2% }
* { box-sizing: border-box }

h1, h2, h3, h4 { text-align: center; font-weight: normal }
h1 { font-size: calc(24px + 20 * ((100vw - 300px)/1300)); }
h2 { font-size: calc(20px + 10 * ((100vw - 300px)/1300)); }
h3 { font-size: calc(16px + 5 * ((100vw - 300px)/1300)); }

@media only screen and (min-width: 862px) {
	h1 {font-size: 2.5em }
	h2 {font-size: 1.8em }
	h3 {font-size: 1.4em }	
}		

p.hanging { margin-left: 0.5in; text-indent: -0.5in }
p.caption, figcaption { font-size: 0.8em; font-weight: bold }
figcaption { margin: 0.8em 0 }
p.shortcaption { text-align: center; font-size: 0.8em; font-weight: bold } /*for captions shorter than the photo's width*/
p.alert { text-align: center; color: #32CD32; font-size: 1.2em }
p.notice { font-size: 1.5em; font-style: italic; font-variant: small-caps; color: red; text-align: center }
p.author, .bold { font-weight: bold }
p.keywords { visibility: hidden; display: none }
.note, .italic { font-style: italic }
.center { text-align: center }
.right { text-align: right }
.left { text-align: left }
.signature { font-family: cursive; }
.poetry { white-space: pre-wrap; display: block; margin: auto; width: 50%; color: blue }

a:visited { color: #00BFFF }
a:link { color: blue }
a:hover, a:active { color: red }

header div p a { text-decoration: none; color: yellow }
header div p a:link, header div p a:active, header div p a:hover, header div p a:visited { color: yellow }

sub { font-size: 0.6em }
sup { vertical-align: 0.6em; font-size: 0.6em }

blockquote { margin-left: 0.5in; margin-right: 0.5in; color: blue }
abbr { color: green }
abbr:hover { color: red; cursor: help }
.linklist { line-height: 1.5em; color: blue; font-size: medium }
hr.white { width: 100px; border: 1px solid white }

.right_image { margin: 0px 0px 0px 6px; display: table; page-break-inside: avoid; float: right }
.left_image { margin: 0px 12px 0px 0px; display: table; page-break-inside: avoid; float: left }

.nav { list-style-type: none; margin: 0; padding: 0; font-size: 1.1em; font-variant: small-caps; text-align: center }
.nav li { display: inline-block; padding: 1em; vertical-align: top; color: blue }
.nav li:hover, .nav li:hover a { background-color: #00B7EB; color: #FFCCFF }
.nav li a, .nav li ul li a { text-decoration: none }
.nav li ul { display: none; position: absolute; list-style-type: none; background-color: #00B7EB; z-index: 1; padding: 1em 0.2em; margin-left: -1em }
.nav li:hover ul, .nav li:hover ul li { display: block }
.nav li:hover ul li { text-align: left; padding: 0.2em 0.5em; box-shadow: inset 0 0 0 2em #00B7EB }
.nav li:hover ul li a { color: white }
.nav li:hover ul li a:hover { color: #FFCCFF }

img:active { cursor: not-allowed } /* statement not tested - best way to indicate conditional? */
a img, img[onclick] { border: 2px solid blue; cursor: pointer }
a img:hover, img[onclick]:hover { border: 2px solid red; cursor: pointer }

button {color: white; background: blue; font-size: 12pt; font-weight: bold; border-radius: 3px; }
button:hover, button:active {color: yellow; background: red; font-style: italic }

a.blue_button:link, a.blue_button:visited { margin: 1em auto; text-align: center; text-transform: uppercase; background: blue; padding: 0.5em; border-radius: 3px; color: white; text-decoration: none; font-size: 12pt;  }
a.blue_button:hover, a.blue_button:active { background: red; font-style: italic }

/* creates a description list, where description terms are bolded, bigger, and bulleted, and description data can have  several paragraphs */

dl.bullets dd, dl.bullets dt { margin-top: 1em; margin-bottom: 1em }
dl.bullets dt { font-weight: bold; font-size: 1.1em }
dl.bullets dt::before { content: "• " }

/* Add blank line after each item in a list except for the last */

.space_after li { padding-bottom: 1em }
.space_after li:last-child { padding-bottom: 0 }

@media only screen and (min-width: 769px) {

	.large_hide { visibility: hidden; display: none; width: 0 }
	.bigger { font-size: 1.5em }
	.even_bigger { font-size: 1.8em }
}

@media only screen and (max-width: 768px) {

	.small_hide { visibility: hidden; display: none; width: 0 }
	.bigger { font-size: 1.2em }
	.even_bigger { font-size: 1.5em }
}

@media only screen and (min-width: 431px) {

	.right_or_centered { margin: 0px 0px 0px 6px; display: table; page-break-inside: avoid; float: right }
	.left_or_centered { margin: 0px 12px 0px 0px; display: table; page-break-inside: avoid; float: left }
}

@media only screen and (max-width: 430px) {

	.right_or_centered, .left_or_centered { margin: 0 auto; max-width: 80vw; display: table; page-break-inside: avoid }
	.nav li { padding: 0.5em }
	figcaption, .right_or_centered img, .left_or_centered img { max-width: 80vw }
}

@media only screen and (min-width: 950px) {

	.narrow, .medium { visibility: hidden; display: none; width: 0 }
}

@media only screen and (max-width: 949px) and (min-width: 755px) {

	.narrow, .wide { visibility: hidden; display: none; width: 0 }
}

@media only screen and (max-width: 754px) {

	.medium, .wide { visibility: hidden; display: none; width: 0 }
}

@media print {

	.print_hide { visibility: hidden; display: none; width: 0; height: 0; orphans: 2; widows: 2 }
}

@media screen {

	.screen_hide { visibility: hidden; display: none }
}