@charset "ISO-8859-1";

/* =======================================
The following support the floating up arrow in the lower right corner of long pages 
========================================= */
#back2Top {
	width: 40px;
	line-height: 40px;
	overflow: hidden;
	z-index: 999;
	display: none;
	cursor: pointer;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	position: fixed;
	bottom: 50px;
	right: 0;
	background-color: aqua; /*  #DDD;   */;
	color: #555;
	text-align: center;
	font-size: 30px;
	text-decoration: none;
}
#back2Top:hover {
	background-color: lightgreen; /*  #DDF;  */;
	color: #000;
}

/* =======================================
The following support the top navigation buttons/links 
========================================= */
#main_nav {
	display: inline-block;
	height: auto;
	min-width: 400px;    /* auto; */
	text-align: left;
	color: inherit;
	font-size: smaller;
}
#main_nav ul {
	display: inline-block;
	background: inherit;
	transition: .5s;
	width: inherit;
	text-align: left;
	margin: 0px;
	padding: 4px;
}
#main_nav li {
	float: left;
	position: relative;
	width: inherit;
	text-align:left;
	list-style: none;
	-webkit-transition: .5s;
	transition: .5s;
	border: 1px solid black;
	margin: 0px 4px 0px 4px;
}
#main_nav > ul > li > a, h1 {
	text-transform: capitalize;
}
#main_nav a {
	display: block;
	text-decoration: none;
	padding: 5px 5px;
	color: black;
}
#main_nav ul ul {
	position: absolute;
	left: 0;
	top: 100%;
	visibility: hidden;
	opacity: 0;
}
#main_nav ul ul ul {
	left: 100%;
	top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
	background: Menu;
}
#main_nav li li:hover, #main_nav li li:hover li {
	background: Menu;
}
#main_nav li li li:hover {
	background: #999;
}
#main_nav li:hover > ul {
	visibility: visible;
	opacity: 1;
}
/* =======================================
This rule resets a core set of elements so that they will appear consistent across browsers. 
Without this rule, content styled with an h1 tag, for example, would appear in different places
in Firefox and Internet Explorer because each browser has a different top margin default value. 
By resetting these values to 0, the elements will initially be rendered in an identical fashion 
and their properties can be easily defined by the designer in any subsequent rule. 
========================================= */
html, body, div, span, applet, object, iframe, h1, h2, h4, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	font-size: inherit;
	font-weight: bold;
}
/* =====================================
The body is the outermost layout component and contains the visible page content. 
Setting properties for the body element will help to create 
consistent styling of the page content and more manageable CSS. 
Besides using the body element to set global properties, it is common to use the 
body element to set the background color of the page and create a centered container 
for the page content to display. The background of this rule 
sets the background for the actual page.
======================================== */
body {
	line-height: 1.2em;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: aqua;
    /* background-image:URL(../images/Sugar_Creek.jpg);
    background-size:cover; */
}
/* ===============================
keeps hyper linked images from having the ugly blue border
================================ */
body img {
	border-style: none;
	border-color: inherit;
	border-width: 0px;
	text-decoration: none;
	text-align: center;
}
/* ================================
Commonly used to style page titles. 
================================== */
h1, h2, h4, h4, h5, h6 {
	color: Black;
	margin: 5px 0px 5px 10px;
	font-family: "Palatine Linotype", Georgia, "Times New Roman", Times, serif;
}
/* Commonly used to style section titles. */
h1 {
	font-size: 1.7em;
}
h2 {
	font-size: 1.3em;
}
h4 {
	font-size: 1.1em;
}
h4 {
	font-size: 1.0em;
}
h5 {
	font-size: 0.9em;
}
h6 {
	font-size: 0.8em;
}
/* Sets the style for unvisited links. */
a:link {
	color: #D11919;
	font-weight: bold;
	text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
	color: blue;
	font-weight: bold;
	text-decoration: none;
}
/* Sets the style for links on mouse over. */
a:hover {
	color: blue;
	background-color: white;
	text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
	color: green;
	background-color: white;
}
a:active {
	color: blue;
}
/* ============================
This styles the middle border before the actual content starts. 
This assumes the image is within the image folder. 
Change the image and the corresponding background color in case the image does not load.
=============================== */
#container {
	background-color: orange;
	width: 1046px;
	text-align: left;
	margin: 0px auto 0px auto;
	border: 5px solid white;
}
#banner {
	display: block;
	padding: 0px 0px 0px 0px;
	background-position: center;
	background-color: transparent;
	background-repeat: no-repeat;
	color: #000000;
	font-weight: bold;
	min-height: 130px;
}
#banner .title {
	text-align: center;
	background-color: transparent;
	color: black;
	margin-top: 20px;
	font-size: 1.5em;
	font-weight: bolder;
}
#banner p, h1, h2, h4, h4, h5, h6 {
	text-align: center;
}
/* =============================
This is a container for the page content. It is common to use the container to constrain 
the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. 
For fixed layouts you may specify a container width and use auto for the left and right margin to center 
the container on the page. IE 5 browser require the use of text-align: center defined by the body element 
to center the container. For liquid layouts you may simply set the left and right margins to center the 
container on the page. The background image and color are for the innermost container. */
#outerWrapper {
	background-color: cornsilk;
	border: 5px 5px 5px 5px solid orange;
	width: 1028px;
	text-align: left;
	margin: 5px 5px 5px 5px;
	padding:4px 4px 4px 4px;
}
#contentWrapper {
	border: 5px solid blue;
	background-color: transparent;
	width: 99%;
	clear: both;
}
/* ===========================
Contains the main page content. When using a multiple column layout 
the margins will be set to account for the floated columns' width, margins, and padding. 
============================= */
#content {
	border: 5px solid black;
	background-color: transparent;
	width: 94%;
	padding: 10px 20px 10px 20px;
	margin: 5px 5px 5px 5px;
	font-size: inherit;
}
/*  =================================
Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. 
If floated elements are used without being cleared the elements following will wrap around the floated element. 
This class should be applied to an element after the last floated element 
and before the close of the container with floated elements. 
==================================== */
.clearFloat {
	display: block;
	clear: both;
}
#footer {
	border-top: 2px solid #242F24;
	clear: both;
	padding: 5px;
	background-color: inherit;
}

/*
#footer p {
	margin-top: 0px;
	margin-bottom: 8px;
}
*/

#Disclaimer {
	border-top: 2px solid #242F24;
	padding: 5px;
	background-color: inherit;
	text-align: left;
	border-bottom: 0px solid #242F24;
	clear: both;
}

/*
#Disclaimer p {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}
*/

/* --------------------    rule for general headings ----------------------- */
.heading {
	display: block;
	color: #000000;
	padding: 4px;
	text-align: center;
	text-decoration: underline;
	font-weight: bold;
}

/* ====================== rules for images ======================== */
.imglft {
	padding: 5px 5px 5px 5px;
	float: left;
	text-align: left;
}
.imgrgt {
	padding: 5px 5px 5px 5px;
	float: right;
	text-align: left;
}
.imgctr {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ==================== used to center content within a <p> tag. ====================== */
.ctr {
	text-align: center;
}

/* ======================= styling small size text ===================== */
.smltxt {
	font-size: small;
}

/* ======================  additional rules for images ======================== */
#imglft {
	height: 90px;
	float: left;
}
#imgrgt {
	height: 90px;
	float: right;
}

/* used in About-Roger-Hemdrix.html  */
.wikitable, .thumb, img {
	page-break-inside: avoid;
}
.wikitable, .thumb, img {
	page-break-inside: avoid;
}
.thumbinner {
	min-width: 100px;
}
html .thumbimage {
	border: 1px solid #ccc;
}
html .thumbimage {
	border: 1px solid #cccccc;
}
img {
	border: none;
	vertical-align: middle;
}
img {
	border: none;
	vertical-align: middle;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}
.thumbcaption {
	text-align: left;
}
.magnify {
	float: right;
}
.rellink, .dablink {
	font-style: italic;
	padding-left: 2em;
	margin-bottom: 0.5em;
}

/* used to highlight a string */

mark {
	background-color: yellow;
}