/* Main Menu Code (Home Page)-------------------------------------------*/
		#nav {
		position: absolute;
		height: 48px;
		width: 630px;
		left:144px;
		z-index:10;
		margin: 0;
		padding: 0;
		}
	
		#nav li ul, #nav li ul {
			margin: 0;
			padding: 0;
		}
	
		#nav a {
			text-decoration: none;
			
		}
	
		#nav li { /*float the main list items    the padding below is the space between menu items*/
			margin: 0;
			float: left;
			display: block;
			padding-right: 0px;
		}
	
		#nav li ul {
			display: none;
			
		}
	
		#nav li.off ul, #nav li.on ul  { /*Submenu dimensions and such*/
			background: #78BDE7 url(../Images/submenu.jpg) no-repeat top left;
			position: absolute;
			top: 24px;
			left: 0;
			margin-top:0px;
			margin-bottom:0px;
			Border-bottom:0px;
			Border-top:0px;
			padding-top: 0px;
			padding-bottom: 0px;
			height: 24px;
			width: 629px;
			padding-left: 0px;
			
			
		}
	
		#nav li.on ul { /*when a list item is on it makes the BG of the submenu a different color then the rest */
			background: #78BDE7;
			 /*the color orange*/
		}
	
		#nav li.on:hover ul, #nav li.over ul { /*for ie*/
			background: #78BDE7;
			
		}
	
		#nav li a {
			color: #78BDE7; /*the BG color of the tabs  and add below font info to effect the fonts*/
			display: block;
			 /*the width of the main menu item windows Take this out and add it to lines 118 - 140 to make each menu item a custom width!!*/
			padding: 0;
			
		}
	
		#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-right: 0px; /*space to the right of each sub menu item?*/
			margin-top: 0px;  /*this adds some spacing about the text in the submenu. I moved it below to the list items inline*/
			
		}
	
		#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
			background: #78BDE7;
		}
	
		#nav li.on ul {
			display: block;
		}
	
		#nav li.off:hover ul, #nav li.over ul {
			display: block;
			z-index: 99;
		}
	
		#nav li.off a:hover, #nav li.on a:hover { 
			color: white;
		}
	
		/*do the image replacement*/
	
		#nav li span {
			position: absolute;
			left: -9384px;
		}
	
		#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a, #lilast a {
			display: block;
			position: relative;
			height: 24px;
			background: url(../Images/mainmenubg.jpg) no-repeat; /*contains all hover states*/
		}
	
	/*first, put the initial states in place*/
	
	#liRenaissance a {
		background-position: 0 0;
		width: 120px; 
	}
	
	#liArtNouveau a {
		background-position: -120px 0;
		width: 115px; 
	}
	
	#liModern a {
		background-position: -235px 0;
		width: 95px; 
	}
	
	#liPostModern a {
		background-position: -330px 0;
		width: 90px; 
	}
	
	#liDigital a {
		background-position: -420px 0;
		width: 90px; 
	}
	
	#lilast a {
		background-position: -510px 0;
		width: 120px; 
	}
	
	/*active area - for this demo - the code could be based on a body class, and probably work better.*/
	
	 #liRenaissance.on a {
	 	background-position: -0px -24px;
	 } /*add selectors for the other li's and background-positions*/
	 
	 #liArtNouveau.on a {
	 	background-position: -120px -24px;
	 } 
	 
	 #liModern.on a {
	 	background-position: -235px -24px;
	 } 
	 
	 #liPostModern.on a {
	 	background-position: -330px -24px;
	 } 
	 
	 #liDigital.on a {
	 	background-position: -420px -24px;
	 } 
	 
	 #lilast.on a {
	 	background-position: -510px -24px;
	 } 
	
	/*hover states*/
	
	#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
		background-position: 0 -48px;
	}
	
	#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
		background-position: -120px -48px;
	}
	
	#liModern a:hover, #liModern:hover a, #liModern.over a {
		background-position: -235px -48px;
	}
	
	#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
		background-position: -330px -48px;
	}
	
	#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
		background-position: -420px -48px;
	}
	
	#lilast a:hover, #lilast:hover a, #lilast.over a {
		background-position: -510px -48px;
	}
	
	
	/*subnav formatting*/
	
	#nav li.off ul a, #nav li.on ul a {
		display: block;
		background: transparent;  /*submenu background color behind the text*/
		color: #000000;
		font-family: Trebuchet MS, arial, verdana, sans-serif;
		font-size: 9pt;
		font-weight: bold;
	}		
	
	#nav li.on ul a {
		background: #78BDE7;
	}
	
	div.MenuTextPositionLeft {
	position: relative;	
	top:3px;
}

div.MenuTextPosition {
	position: relative;	
	top:3px;
}

div.MenuTextPositionSelected {
	position: relative;	
	color: #ffffff;
	top:3px;
}