/*

*******************************************************************************************************

Navigation CSS -- Health and Disability Advocates

Two divisions of Navigation are styled in this document: the "mainlist" and the "sidelist"...
Remember that styles cascade down to child elements...

For the Sidelist:

	Styling here is very simple, only one level deep. Active and Inactive states are styled.
	
For the Mainlist:

	Styling here encompasses three levels of nesting.
	Note that our terminology means anything that is labeled "active" is to be "clickable",
	while anything labeled "inactive" means it is NOT clickable (i.e., is the current page.)
	An "ActiveParent" is clickable, but is styled similarly (but not the same!) to how it
	was when it was inactive.
	
	First-level involves:
		Active items (links & rollovers), ActiveParent items (links & rollover), and Inactive items.
	Second-level involves:
		Active items (links & rollovers), ActiveParent items (links & rollover), and Inactive items.
	Third-level involves:
		Active items (links & rollovers) and Inactive items. There are no "ActiveParent" states.

*******************************************************************************************************

*/





/* ******** general mainlist setup *************************** */

#mainlistdiv {
	float:left;
	display:inline;						/* to fix IE double-margin bug */
	/* width: 14em;						-- rough estimate of desired initial width */
	/* width:165px; */
	width:20%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #FFFFFF;
	margin-top: 10px;
	margin-left: 0px;			/* was: 15px */
}

#mainlistbottomcolor {
	background-color:#DFEAF0;
}


#mainlistdiv ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#mainlistdiv ul li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#mainlistdiv a, #mainlistdiv span.inactive {
	display:block;
	width:auto;
	text-decoration: none;
}

#mainlistdiv span.inactive, #mainlistdiv a.activeparent {
	text-transform:uppercase;
}

/*
html>body #mainlistdiv ul li a {
	width: auto;
}
html>body #mainlistdiv ul li span.inactive {
	width: auto;
}
html>body #mainlistdiv ul li ul li a {
	width: auto;
}
html>body #mainlistdiv ul li ul li span.inactive {
	width: auto;
}
html>body #mainlistdiv ul li ul li ul li a {
	width: auto;
}
html>body #mainlistdiv ul li ul li ul li span.inactive {
	width: auto;
}
*/





/* ******** first level items *************************** */

#mainlistdiv ul li {
	font-size:1.2em;
	font-weight:bold;
	border: 0; 					/* 1px solid #999; */
	margin: 2px 0;
}
#mainlistdiv ul li a, #mainlistdiv ul li span {
	/* padding: 0.3em 0.9em; */
	padding: 0.3em 0.5em 0.3em 0.9em;
}


#mainlistdiv ul li span.inactive {
	background-color:#DFEAF0;
	color: #82ACC4;
}
#mainlistdiv ul li a {
	background-color:#82ACC4;
	color: #FFFFFF;
}
#mainlistdiv ul li a:hover {
	background-color: #9CC3DA;
	color: #FFFFFF;
}
#mainlistdiv ul li a.activeparent {
	background-color:#DFEAF0;
	color: #82ACC4;
}
#mainlistdiv ul li a.activeparent:hover {
	background-color: #9ABCD0;
	color: #FFFFFF;
}





/* ******** second level items *************************** */

#mainlistdiv ul li ul li {
	font-size:0.9em;					/* this setting acts upon parent font-size as base */
	font-weight:normal;
}
#mainlistdiv ul li ul li a,  #mainlistdiv ul li ul li span {
	padding-left:1.5em;					/* override and increase from whatever set for parent */
}


#mainlistdiv ul li ul li span.inactive {
	background-color:#DFEAF0;
	color:#888;
	font-weight:bold;
}
#mainlistdiv ul li ul li a {
	background-color:#DFEAF0;
	color:#888;
}
#mainlistdiv ul li ul li a:hover {
	background-color: #CEDEE7;
	color:#666;
}
#mainlistdiv ul li ul li a.activeparent {
	background-color:#DFEAF0;
	color:#888;
}
#mainlistdiv ul li ul li a.activeparent:hover {
	background-color: #CEDEE7;
	color:#000;
}



/* ******** THIRD level items *************************** */

#mainlistdiv ul li ul li ul li {
	/* font-size:1em;	*/				/* this setting acts upon parent font-size as base */
	font-weight:normal;
}
#mainlistdiv ul li ul li ul li a,  #mainlistdiv ul li ul li ul li span {
	padding-left:2.2em;					/* override and increase from whatever set for parent */
}


#mainlistdiv ul li ul li ul li span.inactive {
	background-color:#F5F5F5;
	color: #82ACC4;
	font-weight:bold;
	text-transform:none;
}
#mainlistdiv ul li ul li ul li a {
	background-color:#F5F5F5;
	color: #82ACC4;
}
#mainlistdiv ul li ul li ul li a:hover {
	background-color: #EBEBEB;
	color: #82ACC4;
}



/* ******** Peristent "SideNav" items *************************** */


#sidelistdiv {
	/* float:left; */
	/* display:inline;					-- to fix IE double-margin bug */
	/* width: 14em;						-- rough estimate of desired initial width */
	/* width:165px; */
	position:absolute;
	top:0;
	left:0;
	width:20%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: left;
	margin-top: 185px;
	margin-left: 0px;			/* was: 15px */
	margin-bottom: 1em;
}
#sidelistdiv ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color:#F5F5F5;
	border:1px solid #DFE9F0;
}
#sidelistdiv ul li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#sidelistdiv a, #sidelistdiv span.inactive {
	display:block;
	width:auto;
	text-decoration: none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:0.95em;
	padding: 0.1em 0.5em 0.1em 0.9em;
}

#sidelistdiv ul li span.inactive {
	color:#AAA;
	text-decoration:underline;
}
#sidelistdiv ul li a {
	color:#999;
}
#sidelistdiv ul li a:hover {
	background-color: #FFF;
	color: #666;
}