@charset "utf-8";
/*The above just sets up what character set the browser needs to use to read this css*/

/*This rule tells the contents of the page to align down the center, and sets the background color*/
body {
	text-align:center;
	background-color:#2b2b2b;
}
/*this describes a div that I'm using to contain all the page content within a certain width at a certain postition*/
#layoutContainer {
	position:relative;
	width:900px;
	height:auto;
	margin:1em auto;
}
/*this gets rid of those ugly default image borders on image links*/
#layoutContainer img {
	border:none;
}
/*The following rules starting with #mainMenu are setting the rules that applies the formating to build the drop down menus*/
#mainMenu {
	z-index: 75;
	width:100%;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:600;
	font-size:11px;
	color:#FFFFFF;
	background-color:#3b3b3b;
	border-bottom:ridge #0099FF;
}
#mainMenu a {
	text-decoration:none;
	padding:0.4em 0.6em 0.4em 0.6em;
	display:block;
}
#mainMenu a:link {
	color:#FFFFFF;
}
#mainMenu a:visited {
	color:#FFFFFF;
}
#mainMenu a:hover {
	color:#0099FF;
}
#mainMenu ul {
	list-style-type:none;
	float:left;
	padding:0;
	margin:0;	
}
#mainMenu ul li {
	display:block;
	position:relative;	
}
#mainMenu ul li ul {
	position:absolute;
	top:100%;
	left:0;
	width:auto;
	height:auto;
	background-color:#4b4b4b;
	text-align:left;
	border:none;
}
#mainMenu ul li ul li ul {
	position:absolute;
	top:0;
	left:100%;
	width:auto;
	height:auto;
	background-color:#5b5b5b;
	text-align:left;
	border:none;
}
#mainMenu ul ul {
	display:none;
}
#mainMenu ul li:hover ul {
	display:block;
}
#mainMenu ul li:hover ul ul {
	display:none;
}
#mainMenu ul li ul li:hover ul {
	display:block;
}
/*This is a little menu where the chat button currently lives all by itself*/
#rightMenu {    
	text-align:right;
	margin-left:auto;
	width:6em;	
}
/*The rules starting with #secondaryMenu are defining the box that has those little right aligned links underneath the main header and creating the empty space between the header and the content*/
#secondaryMenu {
	text-align:right;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	height:75px;
}
#secondaryMenu a {
	text-decoration:none;
	padding:1em;
}
#secondaryMenu a:link {
	color:#FFFFFF;
}
#secondaryMenu a:visited {
	color:#FFFFFF;
}
#secondaryMenu a:hover {
	color:#0099FF;
}
/*The rules starting with #anchorMenu create the blue colored, left-aligned menu that has the page title followed by any anchor links that might be on the page.*/
#anchorMenu {
	text-align:left;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	padding: 0em 0em 0.4em 0em;
	color:#0099FF;
}
#anchorMenu a {
	text-decoration:none;
	padding:1em;
}
#anchorMenu a:link {
	color:#0099FF;
}
#anchorMenu a:visited {
	color:#0099FF;
}
#anchorMenu a:hover {
	color:#FFFFFF;
}
/*Because there may be multiple instances of contentBox I couldn't make it a named div so I had to make a class called contentBox the key difference being that there can only be one div NAMED contentBox but there can be many generic/nameless divs with the CLASS contentBox assigned to them.  With that out of the way, the purpose of content box is to create the layout of the content of the page. this lays out the general rules for headings, paragraphs, images, links, etc. This job is done by the next several rules starting with div.contentBox*/
div.contentBox {
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#CCCCCC;
	background-color:#3b3b3b;
	border-bottom:ridge #0099FF;
	height:auto;
	text-align:justify;
	/*padding-top: 1pc;*/
}
div.contentBox a {
	text-decoration:underline;
}
div.contentBox a:link {
	color:#0099FF;
}
div.contentBox a:visited {
	color:#0099FF;
}
div.contentBox a:hover {
	color:#FFFFFF;
}
div.contentBox p {
	padding:0em 40px 1em 40px;
	background-color:#353535;
}
div.contentBox p:first-letter {
	font-size:24px;
	color:#0099FF;
	font-weight:bold;
	padding:0 .1em 0 0;
}
div.contentBox h1 {
	padding:1em 40px 0 20px;
	color:#FFFFFF;
	background-color:#444444;
	font-weight:400;
	font-size:24px;
	text-align:left;
}
div.contentBox h1 a:link {
	color:#FFFFFF;
}
div.contentBox h1 a:visited {
	color:#FFFFFF;
}
div.contentBox h1 a:hover {
	color:#0099ff;
}
div.contentBox h2 {
	padding:0em 40px 0em 30px;
	color:#0099FF;
	background-color:#3b3b3b;
	font-weight:400;
	text-align:left;
}
div.contentBox h2 a:link {
	color:#0099FF;
}
div.contentBox h2 a:visited {
	color:#0099FF;
}
div.contentBox h2 a:hover {
	color:#FFFFFF;
}
div.contentBox img {
	float:right;
	margin:.5em 0px .5em 1em;
	background-color:#2b2b2b;
	padding: .1em;
}
div.contentBox a img {
	background-color:#0099ff;
}
div.contentBox a img:hover {
	background-color:#ffffff;
}
div.contentBox hr {
	color:#0099ff;
}
/*The rules starting with div.imgContainer are what make image captions work.  Again we use a class because we may want to have many imgContainers on the page. To use this rule you will have to build a div with the class imgContainer around your image and its caption*/
div.imgContainer {
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#FFFFFF;
	margin:.5em 0px 2em 1em;
	padding: .1em;
	font-style:italic;
	text-align:right;
}
div.imgContainer img {
	float:none;
	margin:0 0 0 0;
	background-color:#2b2b2b;
	padding: .1em;
	clear:left;
}
/*The rules starting with div.thumbnails are meant to set up small images to align to the left and be followed by text.  These work in a way similar to how imgContainer handles image captions.  IMPORTANT:  Your thumbnails MUST be 64px wide for this to work properly.  The only way to use a different width is to overwrite the width style for the div and for the img tags in your html.*/
div.thumbnail {
	padding:0em 40px 1em 40px;
	font-size:10px;
	color:#CCCCCC;
	display:inline;
	width:64px;
	float:left;
	text-align:center;
}
div.thumbnail a {
    text-decoration:none;
}
div.thumbnail a:link {
	color:#0099FF;	
}
div.thumbnail a:visited {
	color:#0099FF;
}
div.thumbnail a:hover {
	color:#FFFFFF;
}
div.thumbnail img {
	float:none;
	width: 64px;
}
/*The rules starting with #footerMenu format the footer menu.  pretty simple.*/
#footerMenu {
	text-align:center;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	width:100%;
	height:auto;
	background-color:#3b3b3b;
	padding:1em 0 1em 0;
	border-bottom:solid #6b6b6b thick;
}
#footerMenu a {
	text-decoration:none;
	padding:0 6em 0 6em;
}
#footerMenu a:link {
	color:#0099FF;
}
#footerMenu a:visited {
	color:#0099FF;
}
#footerMenu a:hover {
	color:#FFFFFF;
}
/*The #subFooter rules control all the stuff falling below the footer navigation.*/
#subFooter {
	text-align:center;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#999999;
	height:auto;
}
#subFooter a {
	text-decoration:none;
}
#subFooter a:link {
	color:#FFFFFF;
}
#subFooter a:visited {
	color:#FFFFFF;
}
#subFooter a:hover {
	color:#0099FF;
}
#subFooter img {
	padding:0 1em;
}