﻿
/*NAVIGATION*/
ul {padding: 0; margin: 0;}

	#divNav {
		background: transparent url(../images/navPanel.gif) no-repeat top left;
		margin: 0;
		padding: 0;
		height: 58px;
	}

	#nav {
		position: relative;
		top: 0px;
		height: 58px;
	}

	#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: 0px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 28px;
		left: 0;
		padding-top: 9px;
		background: url(../images/navPanel.gif) no-repeat bottom left;
		background-position: 0 -28px;
		height: 28px;
		width: 700px;
		padding-left: 5px;
		
	}

	#nav li.on ul {
		background: url(../images/navPanel.gif) no-repeat bottom left;
		background-position: 0 -28px;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: url(../images/navPanel.gif) no-repeat bottom left;
		background-position: 0 -28px;
	}

	#nav li a {
		color: #224d6f;
		font-weight: bold;
		display: block;		
		padding: 0px;
	}

	#nav li.on a {
		color: #f90;
	}

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

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: url(../images/navPanel.gif) no-repeat bottom left;
		background-position: 0 -37px;
	}

	#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 { 
		color: #f90;
	}

	/*do the image replacement*/

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

	#liHome a, #liCompany a, #liInvestor a, #liProducts a, #liContact a {
		display: block;
		position: relative;
		height: 28px;
		background: url(../images/bk-dropdownNav.gif) no-repeat; /*contains all hover states*/
	}

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

#liHome a {
	background-position: 0px 0px;	
	width:152px;
}

#liCompany a {
	background-position: -152px 0px;	
	width:152px;
}

#liInvestor a {
	background-position: -304px 0px;
	width:152px;
}

#liProducts a {
	background-position: -456px 0px;
	width:152px;
}

#liContact a {
	background-position: -608px 0px;
	width:152px;
}


#liHome.on a {
	background-position: 0px -39px;	
	width:152px;
}

#liCompany.on a {
	background-position: -152px -39px;	
	width:152px;
}

#liInvestor.on a {
	background-position: -304px -39px;	
	width:152px;
}

#liProducts.on a {
	background-position: -456px -39px;	
	width:152px;
}

#liContact.on a {
	background-position: -608px -39px;	
	width:152px;
}



/*hover states*/

#liHome a:hover, #liHome:hover a, #liHome.over a {
	background-position: 0 -78px;
}

#liCompany a:hover, #liCompany:hover a, #liCompany.over a {
	background-position: -152px -78px;
}

#liInvestor a:hover, #liInvestor:hover a, #liInvestor.over a {
	background-position: -304px -78px;
}

#liProducts a:hover, #liProducts:hover a, #liProducts.over a {
	background-position: -456px -78px;
}

#liContact a:hover, #liDContact:hover a, #liContact.over a {
	background-position: -608px -78px;
}


/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: url(../images/navPanel.gif) no-repeat top left;
	background-position: 0 -37px;
	color: #498BB5;
	font: normal 12px arial,helvetica,sans-serif;
}		

#nav li.on ul a {
	background: url(../images/navPanel.gif) no-repeat bottom left;
		background-position: 0 -37px;
}
	