/* CSS Document */


/* -----------------------------------------------------------------------------------
ZERO EVERYTHING OUT

This defaults everything to zero so that all browsers render as close to the same
as possible.

/* -------------------------------------------------------------------------------- */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
/* -----------------------------------------------------------------------------------
APPLY GENERAL DEFAULTS

Apply's the background and in addition applys the general defaults that aren't
specified later on. Basically keeps Times New Roman from displaying in case you forget
something.

NOTE: Focus isn't supported by IE of any version. You can leave it out but due to
future compatability and the fact that just about every other browser does support it
it should be declaired alongside Hover.

NOTE: Changing the link colors here does NOT effect the leftNav as they are declaired 
specifically later on.

/* -------------------------------------------------------------------------------- */
html body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:url(../graphics/page_bkg.gif) top center repeat-y;
}

a:Link, a:Visited, a:Active {
	color:#3b5882;
}

a:Hover, a:Focus {
	color:#09C;
}

/* -----------------------------------------------------------------------------------
CENTER AND FAUX COLUMN

This centers everything by auto aligning the left and right margins. Specifying a
width keeps the div the size we need. Essentially making it the same as a center
aligned Table.

Also I applied a faux-column graphic that stretches the entire length of 
the page for the columns.

/* -------------------------------------------------------------------------------- */
#container {
	margin:0 auto;
	width:760px;
	background:url(../graphics/faux_columns_2col.gif) top center repeat-y;
}


/* -----------------------------------------------------------------------------------
TOP LINKS

This is like the mini-header on the page. I aligned the text right for the links.
Made a div for the abilene text which I could then float back to the left. 

To get the list to display horizontal rather than vertical I used display:inline
also to hide the faux-columns so that they won't appear behind here I just set the
background to white.

NOTE : I specifically target the list in here so just know that if there is a list
anywhere outside the topNav div none of the styles declaired here would take effect
on it. Nothing will inherit these styles unless they are inside the #topNav Div.

/* -------------------------------------------------------------------------------- */

#topNav {	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:right;
	padding:5px 0;
	background:#FFF;
}

#abilene h1 {
	float:left;
	font-size:10px;
	color:#4e4e4e;
	padding:0px 5px;
}

#topNav ul li {
	font-size:10px;
	font-weight:bold;
	padding:0 10px;
	display:inline;
}
/*---TopBar was added at a later date becuase MHS wanted the affiliates names listed across the top---*/

#topbar ul li{
	text-align: center;
	display: inline;
	margin:auto 5;
	width: 760px;
	padding:20px 3px; 
	font-size: 10px;
	font-weight: bold;
	font-family: Veranda, Arial, Helvetica, sans-serif;		}
	
#topbar {
text-align: center;
font-size: 12px;
font-weight: normal;
padding:7px 7px;
background: #FFF ;
background-position:bottom;}

/* -----------------------------------------------------------------------------------
LEFT MENU AND ITEMS OF INTEREST

To create the left menu we first need to float it left to set it side by side with
the contentHolder Div declaired further down. We also apply a background that doesn't
repeat to the top edge which gives it a "cap." Quite a few Specific targets used here
but we have attempted to comment them well enough to give an idea of what they do.

/* -------------------------------------------------------------------------------- */
/*--Flyout Vertical Menu--*/
#leftNav {/*- Places Menu and Specifies width and makes sure that the level the menu is on is higher than the surrounding items-*/
	float:left;
	width:205px;
	background:url(../graphics/leftNav_bkg.gif) top center no-repeat;
	z-index: 10;
}

#leftNav h1 {/*- Specifies the look of H1 tags inside the leftNav-*/
	margin-top:10px;
	padding:10px 20px;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	background:url(../graphics/leftNav_h1.gif) top center no-repeat;
}

#leftNav ul{/*- Specifies width of unordered lists and sets margin and padding to 0 and turns off bullets-*/
	width:175px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#leftNav li {/*- adds the margins to force the box over to allow for placing of OUR bullet, also creates the vertical padding between the items -*/
	list-style:none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	margin-left: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
} 

#leftNav ul li ul{/*-adds background color for flyouts instead of leaving them transparent also specifies the level to display on so that we are sure to display above the previous menu items-*/
	width:175px;
	list-style: none;
	padding: 5px;
	margin: 0;
	background-color: #FFF;
	z-index: 15;
	border: 1px solid #CCC;
}

#leftNav ul li ul li{/*- adds divider lines between menu selections-*/
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	list-style:none;
	margin: 0px;
	padding: 0px;
}  
 
#leftNav h2 {/*- here we add our own bullet and shift the content over to allow room for it so that it looks much more like what the original did.  we also specify the font size as well as color and no underline-*/
	display: block;
	font-size:12px;
	font-weight:normal;
	padding-left: 25px;
	background-image: url(../graphics/leftNav_li.gif);
	background-repeat: no-repeat;
	background-position: left;
	color:#4e4e4e;
	text-decoration:none;
	width:90%;
}
#leftNav a {
	font-size:12px;
	font-weight:normal;
	color:#4e4e4e;
	text-decoration:none;/*- here we add our own bullet and shift the content over to allow room for it so that it looks much more like what the original did.  we also specify the font size as well as color and no underline-*/
}
#leftNav ul li ul li.flyout_subheader { /*- this is where we define the look of the flyout "headers"-*/
	display: block;
	font-size:12px;
	font-weight:bold;
	padding: 5px;
	background-color: #9CBAD6;
	color: #FFFFFF;
}
#leftNav ul li ul a, #leftNav ul li ul h2 {/*-here we redefine the look of the headers and the anchors  for the flyouts. removing the bullets and stuff-*/
	display: block;
	font-size:12px;
	font-weight:normal;
	background-image: none;
	padding: 5px;
}

#leftNav a:hover,
#leftNav h2:hover {/*- we specify a different color for text when the cursor is hovering over it-*/
	color:#09C;
}

#leftNav li {
position: relative;}/*-we make sure that the menu list items stay within the menu area by making them relative to thier insertion point-*/


#leftNav ul ul {/*-forcing the flyouts to display at the right most position with regards to their menu item-*/
position: absolute;
top: 0;
left: 100%;
width: 100%;
}



div#leftNav ul ul,
div#leftNav ul li:hover ul ul {/*-force the flyouts to hide initially-*/
display: none;
	z-index: 10;}



div#leftNav ul li:hover ul,
div#leftNav ul ul li:hover ul {/*-force the flyouts to display when the "parent" is hovered over-*/
display: block;
	z-index: 10;}


/* -----------------------------------------------------------------------------------
ITEMS OF INTEREST BOX

This is located inside the leftNav Div in the markup but requires even more specific
styles. You'll probably notice that h2 is styled before h1 here. Thats because in the
mark-up h2 is actually a Date while h1 is the actual message. Most Seach Engines rank
h1 tags higher than h2 tags, and because of that I opted to make the actual message
take more weight than the date does.

NOTE: Some of this code seems rather redundant but it's required to overwrite the
inherited styles from the #leftNav - since #interest is located inside of #leftNav
and we still use h1 tags, I have to make sure the background is set to none, 
otherwise it would show the rounded box backgrounds like the h1 tags in #leftNav do.

/* -------------------------------------------------------------------------------- */
#interest ul.date {
margin:5px 10px}

#interest ul.date li {
	padding:5px 15px 5px 0;
	color:#900;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:10px;
	background:none;
	margin:0px;
	width: 155px;
	}
#interest ul.date li:hover {
	padding:5px 15px 5px 0;
	color:#900;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:10px;
	background:none;
	margin:0px;
	width: 155px;
	}
#interest h3 a{
	margin:0px;
	padding:0px;
	color:#369;
	background:#FFFFFF url(none);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:10px;
	width: 155px;
	text-transform:none;
}
/* -----------------------------------------------------------------------------------
FLASH HEADER

While obvious this is just a Div around the Flash Animation. At first glance you may
wonder if its even required but you'll notice I do set some padding and a background
color. Explaining the reason for this is somewhat difficult to explain, so if you are
really curious comment out the background color and run a test you'll see why it is 
needed.

/* -------------------------------------------------------------------------------- */

#flashHeader {
	float:right;
	padding-bottom:8px;
	background:#FFF;
}


/* -----------------------------------------------------------------------------------
Right Column Specs

this is a similar Div to the container, in that its basically just a holder container
for two content items that are going to float over and under. It's floated right to correspond
to the #leftNav's left float. The background image here is to cap the top on the 
column.

/* -------------------------------------------------------------------------------- */

#contentHolder {
	width:547px;
	float:right;
	background:url(../graphics/contentHolder_bkg_2col.gif) top right no-repeat;
}




/* -----------------------------------------------------------------------------------
FINALLY SOME LOREM IPSUM I MEAN CONTENT!

Content is the actual column that has the Welcome Text and pictures. You may notice
the text-alignment is centered, this is just so images don't have to use mark-up to
stay centered. By specific targetting you can see I re-align the text back to the 
left.

/* -------------------------------------------------------------------------------- */

#content {
	float:left;
	width:547px;
	padding-top:10px;
	text-align:center;
}

#content h1 {/*- places the long blue box behind the heading text and formats the text appropriately-*/
	background:url(../graphics/content_h1_2col.gif) top center no-repeat;
	padding:10px 20px;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	color:#FFF;
	text-transform:uppercase;
}

#content h2 {
	padding:10px 20px 0px;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	color:#069;
	text-transform:capitalize;
}

#content h3 {
	padding:10px 20px 0px;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	color:#069;
	text-transform:capitalize;
}

#content h4 {
	padding:20px 20px 0px 10px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-transform:capitalize;
}
#content p {
	padding:5px 20px;
	text-align:left;
	text-indent: 25px;
}
#content p img.imgNoBorder {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#content p img {
	padding:1px;
	text-align:center;
	border: 1px solid #3b5882;
}

#content ul {
	padding:5px 20px 5px 40px;
	text-align:left;
	list-style-type: square;
}

#content ol {
	padding:5px 20px 5px 40px;
	text-align:left;
	list-style-type: decimal;
}
#content dl {
	padding:5px 20px 5px 40px;
	text-align:left;
}
#content dt {
font-weight:bolder
}
#content hr{
	width: 80%;
}
#content .backToTop {
	background-image: none;
}
#content .nobullets {
	list-style-type: none;
}
#content .linklist {
	list-style-type: none;
}
#content .alert {/*-used for EXTREME emphasis on an item can be used with a span div or p-*/
	font-size: 11px;
	font-weight: bolder;
	color: #FF0000;
	padding: 10px;
	margin: 10px;
	background-color: #CCFFFF;
	text-align: center;
	text-indent: 0px;
}
/* -----------------------------------------------------------------------------------
ADS

Nothing really Special here, all the stuff in here just aligns images in the right
spot. 

/* -------------------------------------------------------------------------------- */

#advertisements {
	width:547px;
	float:left;
	padding-top:10px;
	text-align:center;
}

#adContainer {/*- adds the footer to the container above it and the header to advertisments-*/
	background-image: url(../graphics/contentHolder_divider_2col.gif);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 46px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width: 547px;
}

#adContainer a { /*- forces borders off and puts all links inline-*/
	display: inline;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#adContainer .divider {/*-used to divide each of the above links and seperate them appropriately-*/
	display: inline;
	padding: 10px;
}
/* -----------------------------------------------------------------------------------
FOOTER AND WEBCAC TAG

Footers are always tricky, primarily due to cross-browser support. Most of the stuff
here is just general formatting to get it to the right spot, and apply the bottom caps
to the faux-column background. 

/* -------------------------------------------------------------------------------- */

#footer {
	text-align:center;
	margin:0 auto;
	padding:20px 0px;
	width:760px;
	font-weight:bold;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#FFF url(../graphics/footer_bkg_2col.gif) top center no-repeat;
}
#footer hr {
	width: 95%;
	color: #00659C;
	height: 1px;
}


#footer ul li {
	display:inline;
	padding:0 5px;
}

#footer #subfooter{
	width: 100%;
	color: #999999;
	text-decoration: none;
}

#footer #subfooter #webcac {
	display:inline;
	float: right;
}
 #footer #subfooter #webcac a, #footer #subfooter #webcac a:hover {
	color: #999999;
	text-decoration: none;
}
#footer #subfooter #copyright {
	display:inline;
	float: left;
}
/* -----------------------------------------------------------------------------------
CLASSES

I try to vear away from needing to many of these anymore, as they add to the mark-up
however one of these two I almost ALWAYS use to get things aligned right.

.clearIt is a div I can add whenever I need to make sure that text and images won't 
"bleed" into area's they aren't supposed to. Additionally it also adds bulk to
relative Div sizes in FireFox. Whenever you Float stuff FireFox doesn't auto-size
parent div's around them. Since almost all the content inside container is floated
FireFox assumes container to be the size of the topNav div only. Adding this class
on the footer forces FireFox to stretch the container the full length which we need
because of the faux-column background it contains. Just take this class off the footer
and view in FireFox and you'll see what I mean

.imgEdge is a class I made that just is used on the welcome image to apply some space
around so it wouldn't be smashed up against the h1 tag there. I don't know for sure
if the image will be there in final so I did this as a temporary way that can easily
be taken out as opposed to assigning additional margins to the h1 tag. Depending
on the layout it may declare a border.

/* -------------------------------------------------------------------------------- */

.clearIt{
	clear:both;
}

.imgEdge {
	margin:5px;
}