/*
	http://alistapart.com/articles/hybrid/
	modified to use 2 styles for the main menu rather that 3
*/
.navTd {
	background-color: #6FDCFE;
	}

#nav {
	position: relative;
	height: 52px; 
/* we need this width to accomodate all sub-menu elements + left-padding */
	width: 560px;
/*	border: 1px dashed Fuchsia;*/
	left: 0px;
	top: 0px;
	padding: 0px 0px 0px 20px;
	margin: 0px 0px 0px 0px;
	}

#nav li ul, #nav li ul {
	margin: 0;
	padding: 0;
}

#nav a {
	text-decoration: none;
}

#nav li { /*float the main list items*/
	margin: 0;
	float: left;
	display: block;
	padding-right: 7px;
}

#nav li ul {
	display: none;
}

#nav li.off ul, #nav li.on ul  {
	/* put the subnav below */
	position: absolute;
	/* distance and padding from main headings to sub headings */
	top: 25px;
	padding-top: 4px;
	padding-bottom: 4px;
	
	left: 0;
	padding-left: 20px;
	
	background: #6FDCFE;
/*	height: 20px;*/
/* we need this width to accomodate all sub-menu elements */
	width: 550px;
}

#nav li.on ul {
   background: #6FDCFE url("/includes/images/top.location.separator.4.png") repeat-x scroll top;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
   background: #6FDCFE url("/includes/images/top.location.separator.4.png") repeat-x scroll top;
}

#nav li.off ul {
   background: #6FDCFE url("/includes/images/top.location.separator.4.png") repeat-x scroll top;
}

#nav li.off:hover ul, #nav li.over ul { /*for ie*/
   background: #6FDCFE url("/includes/images/top.location.separator.4.png") repeat-x scroll top;
}

#nav li a {
	color: #dddddd;
	font-weight: bold;
	display: block;
	width: 93px;
	padding: 0;
}

#nav li.on a {
	color: #6FDCFE;
}

#nav li.on ul a, #nav li.off ul a {
	border: 0;
	float: left; /*ie doesn't inherit the float*/
	color: #ffffff;
	width: auto;
	margin-right: 5px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
/*   background: #6FDCFE url("/includes/images/top.location.separator.4.png") repeat-x scroll top;*/
}

#nav li.on ul {
	display: block;
}

#nav li.off:hover ul, #nav li.over ul {
	display: block;
	z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
	text-decoration: underline;
	color: #FFFFFF;
}

/*do the image replacement*/

#nav li span {
	position: absolute;
	left: -9384px;
}

#liNavA a, #liNavB a, #liNavC a, #liNavD a, #liNavE a {
	display: block;
	position: relative;
	/* height of top menu items */
	height: 26px;
}

#liNavA a.mainHeadingA, #liNavB a.mainHeadingA, #liNavC a.mainHeadingA, #liNavD a.mainHeadingA, #liNavE a.mainHeadingA {
	background: url("/includes/images/bk-dropdownMap.png") no-repeat; /*contains all hover states*/
}

#ulNavA, #ulNavB, #ulNavC, #ulNavD, #ulNavE {
   background: #6FDCFE url("/includes/images/top.location.separator.2.png") repeat-x scroll top;
}

#ulNavA a, #ulNavB a, #ulNavC a, #ulNavD a, #ulNavE a {
	/* height of sub menu items */
	height: 20px;
}

/*first, put the initial states in place*/

#liNavA a.mainHeadingA {
	background-position: 0 0;
}

#liNavB a.mainHeadingA {
	background-position: -94px 0;
}

#liNavC a.mainHeadingA {
	background-position: -188px 0;
}

#liNavD a.mainHeadingA {
	background-position: -282px 0;
}

#liNavE a.mainHeadingA {
	background-position: -376px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liNavA.on a.mainHeadingA {
	background-position: 0 -26px;
}

#liNavB.on a.mainHeadingA {
	background-position: -94px -26px;
}

#liNavC.on a.mainHeadingA {
	background-position: -188px -26px;
}

#liNavD.on a.mainHeadingA {
	background-position: -282px -26px;
}

#liNavE.on a.mainHeadingA {
	background-position: -376px -26px;
}

/*hover states*/

#liNavA a.mainHeadingA:hover, #liNavA:hover a.mainHeadingA, #liNavA.over a.mainHeadingA {
	background-position: 0 -52px;
}

#liNavB a.mainHeadingA:hover, #liNavB:hover a.mainHeadingA, #liNavB.over a.mainHeadingA {
	background-position: -94px -52px;
}

#liNavC a.mainHeadingA:hover, #liNavC:hover a.mainHeadingA, #liNavC.over a.mainHeadingA {
	background-position: -188px -52px;
}

#liNavD a.mainHeadingA:hover, #liNavD:hover a.mainHeadingA, #liNavD.over a.mainHeadingA {
	background-position: -282px -52px;
}

#liNavE a.mainHeadingA:hover, #liNavE:hover a.mainHeadingA, #liNavE.over a.mainHeadingA {
	background-position: -376px -52px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
/*	background: #6FDCFE;*/
	color: #ffffff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}		

#nav li.on ul a {
/*	background: #6FDCFE;*/
}