/* ================  TOP NAVIGATION AND PULLDOWN MENU ===================== */
		
		/* ----- set navigation area */
		
		#navAREA {
			width: 181px;
			padding-bottom: 30px;
			background-color: #ed7443;
			background-image: url($cms.media("nav_bottomborder.gif", "designimages").url);
			background-position: bottom;
			background-repeat: repeat-x;
		}
		
		/* ----- general and functional menu propeties (using Lists function) area */
		
		#nav_MENUBAR { 
			margin: 0;
			padding-left: 0px;
			font-size: 10px;
			list-style: none;
		}
		
/* jg: this padding causes a 5px gap b/w background color and grey line, and causes grey line to extned right too far*/	
		#nav_MENUBAR a {
			text-decoration: none;
			font-size: 12px;
			/*padding: 5 0 0 10; */
			color: #fff;
		}
		
		#nav_MENUBAR a:hover, #nav_MENUBAR a:active {
			color: #fff;
		}
	
		#nav_MENUBAR ul {
			z-index: 200;
			display: none;
			position: absolute;
			padding: 0;
			margin: 0;
			list-style: none;
			width: 181px;
		}
		
		#nav_MENUBAR ul.current {
			display: block;
			position: relative;
		}
		
		#nav_MENUBAR li {
			position: relative;
			z-index: 200;
			text-align: left;
			float: left;
		}
		
		#nav_MENUBAR li:hover ul, #nav_MENUBAR .ieOVER ul {
			display: block;
		}
		
		#nav_MENUBAR .navTOP {
			float: left;
/*	The below are critical for making sure the list items wrap to the next line		*/
			height: 27px;
			width: 180px;
			border-bottom: solid 1px #ccc;	
		}
		
		#nav_MENUBAR .navTOP_Highlight {
			height: 27px;
/* Not sure if the width here is needed, but nor does it do any damage */
			width:180px;
			background: #cb5d27;
		} 
		
		#nav_MENUBAR #menu_LEFT {
			top: 0px;
			left: 0px;
		}
		
		#nav_MENUBAR #menu_LEFT .navTOP_Highlight {
			float: left;
		}

#nav_MENUBAR a.navTOP:hover, #nav_MENUBAR a.navTOP a:active {
	background: #cb5d27;
}
		
		#nav_MENUBAR #menu_RIGHT {
			right: 0px;
			top: 0px;
		}
		
		#nav_MENUBAR #menu_RIGHT .navTOP_Highlight {
			float: right;
		}
		
		/* ----- Pulldown Properties */
		
		#nav_MENUBAR .menuPULLDOWN {
			width: 181px; /* 179 */
			border-top:solid #b8b8b8 1px;
			border-bottom: solid #b8b8b8 1px;
			background-color: #A2A7C6;
			border-right: solid #b8b8b8 1px;
			border-left: solid #b8b8b8 1px;
			float: left;
			top:-27px;
			left:181px;
		}
		
		#nav_MENUBAR ul.current .menuPULLDOWN {
		/* assigning a width here makes this extend too far right in FF
width: 179px; 
*/		
			top:0px;
			left:0px;
		}
		
		#nav_MENUBAR .menuPULLDOWN a:link, #nav_MENUBAR .menuPULLDOWN a:visited {
			display: block;
			font-weight: normal;
			color: #333333;
			padding-left: 14px;
			padding-top: 3px;
			padding-bottom: 3px;
			text-decoration: none;
			/* assigning a width here makes this extend too far right in FF
	width: 179px;		*/
			/* assignign this font-size makes the row too high for the background fill in FF? nope, seems to be ok */	
				font-size:11px;

		}
		
		#nav_MENUBAR .menuPULLDOWN a:hover, #nav_MENUBAR .menuPULLDOWN a:active {
			padding-left: 14px;
			padding-top: 3px;
			padding-bottom: 3px;
			background-color: #999999;
			border-width: 5px;
			font-weight: normal;
			color: #FFFFFF;
			text-decoration: none;
			/*
	width: 179px;
				font-size:11px;
		*/			
		}