@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
	--myFontColor:navy;
	--mySkinColor:darkblue;
	--myImgBrdrColor:darkblue;
	--myH2Color:maroon;
	/* myFontColor should be any dark color and may differ from the dark mySkinColor */
	/* myFontColor:darkblue; navy; black; */
	/* mySkinColor:darkred; darkslateblue; darkblue; forestgreen; #CC7700; */
	/* myImgBrdrColor:darkblue; navy; black; */
	/* As of Nov. 2017, the use of var(--myXXX) IS NOT supported by old Internet Explorer; YES Edge, Chrome, Firefox, Safari, Android Browsers */
	/* and that is why each use of var(--myXXX) is preceeded with a workable attribute.*/
}
body {
	background-color:lightgray;
	border:0px;
	color:darkblue;
	color:var(--myFontColor);
	font-family:"Open Sans", Verdana, Helvetica, Arial, Roboto, Sans-serif;
	margin:0px auto;
	max-width:1366px;
	min-width:360px;			/* min smartPhone screen width */
	padding:0px;
	text-align:center;
}
/* Banner Container Styles - - - - - - - - - - - - - - - - - - - - - - - */
#bannerAndMenu,
#footer {
	background:darkblue;
	background:var(--mySkinColor);
	background-image:url('../graphics/bkgrnd_royal_blue_stoned.jpg');
	/*background:linear-gradient(to top, royalblue 1%, blue 50%, royalblue 99%);*/
	height:auto;
	width:auto;
}
#bannerAndMenu {
	border-top:medium var(--mySkinColor) solid;
	border-right:medium var(--mySkinColor) solid;
	border-bottom: 0px;
	border-left:medium var(--mySkinColor) solid;
}
/* Content Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#mainContentWhite {
	background-color:oldlace;
	border:medium darkblue solid;
	clear:both;
	font-size:16px;
	margin:0;
	padding:0;
	width:auto;
}
#mainContentWhite a:link {
	color:blue;
	text-decoration:underline;
}
#mainContentWhite a:hover {
	background-color:antiquewhite;
	color:darkslategrey;
	transition:background .2s ease;
}
.divCenter {
	clear:both;
}
.divCenter,
.divCenter div,
.divCenter p {
	text-align:center;
}
/* img styles - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - */
img {
	border:0px;
	height:auto;
	width:auto;
	margin:0px;
	max-width:100%;
	padding:0px;
}
/* hard rule styles- - - - - - - - - - - - - - - - - - - - - - - - - - - */
hr {
	background-color:darkblue;
	background-color:var(--myImgBrdrColor);
	border:0px;
	border-top:medium darkblue solid;
	border-top:medium var(--myImgBrdrColor) solid;
	clear:both;
	padding:0px;
}
/* heading styles- - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1,
h2,
h3 {
	font-family:"Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-style:italic; 
	font-weight:bold;
	margin:1% .6% .6% .6%;
	text-shadow: 2px 1px 2px darkgray;
}
h1 span,
h2 span,
h3 span {
	white-space:nowrap;
}
h1 {
	color:darkblue;
	color:var(--myFontColor);
	font-variant:small-caps;
	font-size:26px;
	text-align:center;
}
h2 {
	color:maroon;
	color:var(--myH2Color);
	font-variant:small-caps;
	font-size:26px;
	text-align:center;
}
h3 {
	color:darkblue;
	color:var(--myFontColor);
	font-size:22px;
	text-align:left;
}
h2 a {
	color:navy;
	text-decoration:none;
}
h2 a:hover {
	text-decoration:underline;
}
/* Table Styles- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
table {
	border:0px darkblue solid;
	border-collapse:collapse;
	border-spacing:0;
	margin:auto;
	padding:0px;
	text-align:center;
}
.bodyTable {
	margin:auto;
	background-color:white;
	border:thin darkblue solid;
	border:thin var(--myImgBrdrColor) solid;
	font-size:15px;
}
.bodyTable th {
	background-color:navy;
	border:thin navy solid;
	border-left-color:white;
	border-right-color:white;
	color:white;
	padding:1% 3px;
}
.bodyTable th:first-child {
	border-left-color:navy;
}
.bodyTable th:last-child {
	border-right-color:navy;
}
.bodyTable td {
	padding:3px;
	border:thin darkblue solid;
	border:thin var(--myImgBrdrColor) solid;
}
.TrHover tr:hover {
	background-color:#DCDCDC;
	color:purple;
	transition:background .2s ease;
}
/* paragraph Styles- - - - - - - - - - - - - - - - - - - - - - - - - - - */
p {
	padding:.2% 3%;
}
p.gotError,
p.noscript {
	background-color:yellow;
	border:medium navy dashed;
	font-weight:bold;
}
p.justify {
	text-align:justify;
}
/* anchor Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
a {
	color:navy;
	cursor:pointer;
	text-decoration:underline;
}
a:hover {
	background-color:antiquewhite;
	color:darkslategrey;
	text-decoration:underline;
	transition:background .2s ease;
}
/* General Size Styles- - - - - - - - - - - - - - - - - - - - - - - - - */
.styleNormal {
	font-style:normal;
	font-weight:normal;
	text-decoration:none;
	vertical-align:auto;
}
.styleUnderline {
	text-decoration:underline;
}
.styleSuperScript {
	vertical-align:super;
}
.styleItalic {
	font-style:italic;
}
.styleSmall {
	font-family:Tahoma, serif;
	font-size:13px;
}
.styleBold {
	font-weight:bold;
}
.styleMaroon {
	color:maroon;
}
.styleRed {
	color:crimson;
}
.styleBlack {
	color:black;
}
/* Misc Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.styleCenter {
	text-align:center;
	margin:auto;
}
.styleNowrap, 
.styleNowrapHold {
	white-space:nowrap;
}
/* Footer Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#footer {
	border-top:0px;
	border-right:medium var(--mySkinColor) solid;
	border-bottom:medium var(--mySkinColor) solid;
	border-left:medium var(--mySkinColor) solid;
	clear:both;
	color:white;
	font-family:Verdana, Geneva, Tahoma, sans-serif, serif;
	font-size:13px;
	text-align:center;
}
#footer div {
	color:white;
	padding:.5%;
	vertical-align:middle;
}
#footer p {
	margin:0px;
	padding:2px;
}
#footer a {
	color:white;
	text-decoration:underline;
}
#footer a:hover {
	background-color:transparent;
	color:yellow;
	text-decoration:underline;
}
#footer span {
	white-space:nowrap;
}
/* Narrow Device Styles - - - - - - - - - - - - - - - - - - - - - - - - -*/
@media screen and (max-width:739px) {
#mainContentWhite {font-size:14px}
.bodyTable, 
.bodyTable th,
.bodyTable td {font-size:14px;white-space:normal}
}
@media screen and (max-width:501px) {
h1,h2,h3,h4,h5 {font-size:18px}
.styleNowrap {white-space:normal}
}