/*************************************************************
			Overlapping Tabbed Dropdown Menu
**************************************************************/
#nav {
	width: 885px;
	height: 59px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	position: relative; /*this lets us absolutely position the links/tabs without affecting our nav div, my favorite trick */
	background-image: url(images/menu_bg.jpg);
	background-repeat: no-repeat;
}

#nav li {
	float: left; /* causes list items to align horizontally */
	width: 102px;
}


li#tab1 a, li#tab2 a, li#tab3 a, li#tab4 a, li#tab5 a, li#tab6 a, li#tab7 a, li#tab8 a, li#tab9 a {
	background: transparent;
	position:absolute; /* important! */
	display:block; /* necessary to set width and height of the link */
	width: 105px;
	height: 59px;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #000033;
}

	/* the span is necessary to confine the text to a width smaller than the background image,  padding on the right wont work in the link for some reason so this is the fix */
#nav li a span {
	display: block;
	width: 80px;
	padding: 0px 0 0 10px; /* padding used to push text away from top */
	*padding-top: 14px; /* for IE */
	cursor: pointer; /* IE needs this to act like a link due to span */
}

#nav li a:hover span {
	display: block;
	width: 80px;
	padding: 0px 0 0 10px; /* padding used to push text away from top */
	margin-top: -8px;
	*padding-top: 14px; /* for IE */
	cursor: pointer; /* IE needs this to act like a link due to span */
}
	/* a few more special classes to get our tab text vertically aligned */
#nav li a span.oneLine { padding-top: 16px; *padding-top: 28px; }
#nav li a span.twoLines { padding-top: 10px; *padding-top: 21px; }
#nav li a:hover span.oneLine { padding-top: 16px; *padding-top: 28px }
#nav li a:hover span.twoLines { padding-top: 10px; *padding-top: 21px }


	/* align each link so that the overlaps line up,  the negative background positioning causes the rollover to load at the beginning but only show up when rolled over */
li#tab1 a 	{ left: 0px; background: url(images/tab1.jpg) 0 -59px no-repeat; }
li#tab2 a 	{ left: 98px; background: url(images/tab2.jpg) 0 -59px no-repeat; }
li#tab3 a 	{ left: 195px; background: url(images/tab3.jpg) 0 -59px no-repeat; }
li#tab4 a 	{ left: 293px; background: url(images/tab4.jpg) 0 -59px no-repeat; }
li#tab5 a 	{ left: 390px; background: url(images/tab5.jpg) 0 -59px no-repeat; }
li#tab6 a 	{ left: 488px; background: url(images/tab6.jpg) 0 -59px no-repeat; }
li#tab7 a 	{ left: 585px; background: url(images/tab7.jpg) 0 -59px no-repeat; }
li#tab8 a 	{ left: 682px; background: url(images/tab8.jpg) 0 -59px no-repeat; }
li#tab9 a 	{ left: 780px; background: url(images/tab9.jpg) 0 -59px no-repeat; }

	/* puts background positioning to zero to display the image when link is rolled over.  Padding at the top is reduced so the text appears to rise with the rollover tab */
li#tab1 a:hover, li#tab2 a:hover, li#tab3 a:hover, li#tab4 a:hover, li#tab5 a:hover, li#tab6 a:hover, li#tab7 a:hover, li#tab8 a:hover, li#tab9 a:hover {
	background-position: 0 0px;
}

	/* This is the dropdown magic part.  Uses the Suckerfish method (see the dropdown.js file if you feel so inclined).  All were doing here is pushing the dropdown menu way way over to the left, when the mouse hovers over the menu item it brings the menu back to its "normal" position.  see http://www.htmldog.com/articles/suckerfish/dropdowns/ for more info */
#nav li ul {
	position: absolute;
	width: 170px;
	margin: 0px;
	list-style-type: none;
	left: -999em;
	top: 59px;
	border-top: 1px solid #FFF;
}
	/* third level */
#nav li ul ul {
	margin-left: 177px;
	margin-top: -26px;
	top: auto;
	border: 0px;
	position: absolute;
	left: 0px;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: 0px; /*IMPORTANT!  has to be 0 so that IE wont add up all of our left absolute positionings */
}
#nav li:hover ul.farRight, #nav li li:hover ul.farRight, #nav li.sfhover ul.farRight, #nav li li.sfhover ul.farRight {
	left: -70px; /*IMPORTANT! stops far right menu dropdowns from going outside the page width */
}
	/* end of dropdown magic */

	/* styling for our sublinks */
#nav li li a {
	background-color: #9099C2;
	background-image: none;
	color:#000000;
	border-right: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	margin: 0px 0px 0px -40px;
	*margin: 0px 0px 0px 0px;
	padding: 3px;
	width: 170px;
	height: auto;
	line-height: 1.5em;
	position:relative;
}

#nav li li a.flyout { /* put this class in the list item that has a side flyout menu */
	background-image: url(images/flyout_arrow.gif);
	background-position: 165px 8px;
}

#nav li li a:hover {
	background-color: #C9C8C3;
	padding: 3px;
	height: auto;
}

	/* flyout menu styling */
#nav li li li a {
	background-color: #BFC4DF;
	height: auto;
}

#nav li li li a:hover {
	height: auto;
	background-color: #FFF;
}
	/* add class to the first link in a flyout menu */
#nav .first{ border-top: 1px solid #FFF; }

	/* end sublink styling */

#nav li:hover, #nav li.hover {
    position:static;
}


/************* End Tab Drop Down Menu *******************/

/**********************************
		 Side Link Columns
****************************************/
.columnLinks {
	width: 205px;
	padding: 0px 0px 10px 0px;
	border-bottom: 1px solid #888;
	background-color: #FDEBC5;
}

.columnLinks td {
	padding-bottom: 0px;
}

/******************************************************************
		Side Panel Accordian Menus
		uses Yahoo User Interface Libraries (http://developer.yahoo.com/yui/)
******************************************************************/
dl.accordion-menu {
	margin: 0;
	*margin: -4px 0px 0px 0px; /* for IE, as usual */
	padding: 0;
	width: 205px;
}

	/* main list non-link styling */
dl.accordion-menu dt.a-m-t {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000;
	line-height: 18px;
	text-decoration: none;
	margin: 0px;
	padding: 0px 0px 0px 17px;
	font-weight: bold;
	background-color: #FFECC7;
	background-image: url(images/link_arrow.gif);
	background-repeat:no-repeat;
	background-position: 5px 4px;
}
	/*- For sections with a green background */
dl.accordion-menu div.green dt { background-color:#ADB485; }

dl.accordion-menu dt a { /* main list link styling */
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000;
	line-height: 18px;
	text-decoration: underline;
	font-weight: normal;
	display:block;
	width: auto;
	background-image: url(images/link_arrow.gif);
	background-repeat:no-repeat;
	background-position: 5px 4px;
	padding-left: 17px;
}

	/*this is the div container that shows up when a sliding menu item is clicked */
.bd{
	padding: 10px;
	border-top :Solid 1px #AAA;
	background-color: #FFFFD7;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#000000;
}
	/* gives a different background color to the green slide down sections */
div.green .bd {
	background-color:#DADDC6;
}

	/* for links within the slide down div */
.bd a {
	color:#000000;
	padding-left: 20px;
	margin: 0px -10px 0px -10px; /* the negative margin lets the link ignore the set padding in our surrounding div.  now the rollover spans the entire column */
	text-decoration: underline;
	display:block;
}
	/* the hover property of links within the slidedown div */
.bd a:hover {
	background-color: #FFF;
	text-decoration: underline;
}
	/* list items within the slidedown div */
.bd li {
	list-style-type: none;
}

	/*- Hover properties -*/
dl.accordion-menu dt.a-m-t-hover{ background-color:#FFFCF5; }
dl.accordion-menu dt a:hover{ background-color:#FFFCF5; }
		/*- For sections with a green background */
dl.accordion-menu div.green dt.a-m-t-hover{ background-color:#CACFAE; }
dl.accordion-menu div.green dt a:hover{ background-color:#CACFAE; }

	/* when user clicks on menu item */
dl.accordion-menu dt.a-m-t-down{
	background-color:#F9FF79;
}

	/*-- the rest of this styling for the accordian menu is important for the functionality of the menu, DO NOT CHANGE! */
html.accordion-menu-js dt{
	cursor:pointer;
	zoom:1;
}

dl.accordion-menu dd.a-m-d {
	margin: 0;
	padding: 0;
	padding:0;
}

html.accordion-menu-js dd.a-m-d{
	display:none;
}


html.accordion-menu-js dd.a-m-d-expand {
	display:block;
}

html.accordion-menu-js dd.a-m-d-before-expand {
	display:block;
	position:relative;
	z-index:-1;
	opacity:0;
	height:auto !important;
	visibility:hidden;
	overflow:visible;
}


html.accordion-menu-js dt-expand {
	border-left-color:#222222;
	color: #000;
}

html.accordion-menu-js dd.a-m-d-anim {
	overflow:hidden;
	display:block;
}
/*-- End Accordian Menu --*/


/*---- End Side Links ----*/