#divNav {

		/*background: transparent url(bk-nav.jpg) no-repeat top left;*/

		margin: 0;

		padding: 0;

		height: 2.2em; /*80px; - original Hybrid setting*/

		width: 100% /* "100%" setting taken from: http://www.seoconsultants.com/css/menus/tutorial/ on "horizontal css" example. Originally used 66.5em; because with 750px; (instead of 66.5em) it strangely caused the divNav shifts to left of screen(!)*/

	}





	#nav {

	position: relative; /*"relative;" as per original hybrid css. originally removed "center;" in favor of making centering it in BODY and using "center;" on 2nd horiz nav bar*/

	width: 750px; /*66.5em; - nav1 and nav2 must use same measurement eg. px/em otherwise slight edge imperfection*/

	height: 2.2em;

	top: -5px; /*this takes divNav+nav and lowers it 55px from top of screen*/

	font: 12px arial, helvetica, serif;

	list-style: none;

	line-height: 2.0em;

	background: #deb887; /*light brown main nav color*/

	font-weight: bold;

	padding: 0; /*0.35em; this is thickness of overall menu bar border - if set to 0 then level 2 bar lines up perfectly below level 1!*/

	border: solid #eda;

	border-width: 1px 0px; /*these 2 lines give very thin light brown border line around navbar 1*/

	margin: auto; /* THIS CENTERS THE MENU BAR EVEN IN TEST 6Bv4- idea from http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.html suggested to use auto to enable centering; instead of using original: 0 0 1em 0;*/

	}

 

/*	#nav {

		position: relative;

		top: 55px;

		height: 80px;

		width: 800px;

	}*/

 

	#nav li ul, #nav li ul {

		margin: 0; /*0 setting ensures navbar 2 lines up exactly with navbar 1*/

		padding: 0;

	}

 

	#nav a {

		text-decoration: none;

		margin-left: 5px; /*originally not set at all here - NOW PRESENTLY GIVES EXTRA SPACING FOR navbar 1+2 without adversely affecting levels 3+*/

	}

 

	#nav li { /*float the main list items*/

		margin: 0; /* although setting "margin-left: 5px;" here will spruce up navbars 1+2, it adversely affects level 3, so do it above in "nav a"*/

		float: left;

		display: block;

		/*padding-right: 15px; - adds padding to the right end of the 1st navbar*/

	}

 

	#nav li ul {

		display: none;

		position: absolute; /*newly added in Test7v2, taken from original H css*/

	}

 

 /* START LEVEL 2 (horizontal) */

	#nav li.off ul, #nav li.on ul { /*put the subnav below*/

		position: absolute; /*with present settings elsewhere, using "center", "relative" and "static" cause nav 1 parent to take up all of width when displaying nav 2 children and this ruins all of nav, causing flickering and fixed display of levels 3+*/

		top: 24px; /*24px seems to be best match for IE and FF for lining up "a" links between Nav 1 and 2 */

		left: 0; /*auto; "left:0" + "position: absolute" causes nav2 to shift to far left; WITH PRESENT SETTINGS NEITHER "0" or "auto" PREVENT SHIFTING OF BAR, "margin-left" etc also dont solve shift problem*/

		/*margin: -1px 0 0 0; top-rt-btm-left - top setting seems to be from position of bar above; SET TO "-1px" FOR TESTING PURPOSES, set to around 5px instead BUT MAKE NAV 1 "a" LARGER SO MOUSE CAN ACCESS NAV 2! Using "auto" doesn't solve the shifting problem*/

		/*padding-top: 15px; - removing this makes navbar2 same size heightwise as navbar 1 per "height: 2.2em" setting below*/

		background: #224d6f;

		height: 2.2em; /*28px;*/

		width: 750px; /*using "100%;" extends nav2 rightward to end of screen*/

		/*padding-left: 60px; - NOT NECESSARY FOR MAKING NAV 2 STAY IN PLACE; hence I made width same as Nav 1*/

		/* setting padding: 0; makes nav2 very thin; without setting it it inherits padding from above and looks better*/

	}

 

	#nav li.on ul {

		background: #f90;

	}

 

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/

		background: #224d6f;

	}

 

	#nav li a {

		color: #a0522d; /*#224d6f; - gray-blue*/

		font-weight: bold;

		display: block;

		width: 85px;

		padding: 0;

	}

 

	#nav li.on a {

		color: #f90;

	}

 

	#nav li.on ul a, #nav li.off ul a { /*seems to control navbar 2 text*/

		border: 0;

		float: left; /*ie doesn't inherit the float*/

		color: #f90;

		width: auto;

		/*line-height: 1em; - removed from here because called up at bottom of css*/

		margin-right: 15px; /*gives space between menu items on navbar 2*/

	}

 

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/

		background: #224d6f;

	}

 

	#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;

	}



	



/* START LEVEL 3+ (vertical) derived from: http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html and http://htmldog.com/articles/suckerfish/dropdowns/example/bones3.html*/

/* THIS PART SO FAR NECESSARY - without it levels 3+ appear horizontal!*/

/*#nav li.off ul ul, #nav li.on ul ul, #nav li.off ul ul ul, #nav li.on ul ul ul, #nav li.off ul ul a, #nav li.on ul ul a, #nav li.off ul ul ul a, #nav li.on ul ul ul a*/

/* 14 Aug - TEST 7v2: replaced "margin: 0;" with 2 types (for FF and IE) because I added up above "#nav li ul {display: none; position: absolute;". For now I removed "left: -999em" and am testing settings for IE. FF looks great - but has overhang on level 4; IE has overhangs on levels 3-4*/

#nav li.off ul ul, #nav li.on ul ul, #nav li.off ul ul a, #nav li.on ul ul a { /*these 2 callups cause vertical appearance; adding "a" bits gives attributes to listed items; using "#nav li ul ul" yields only horizontal appearance!; removing "on/off" references causes these levels to be horizontal and shift rightwards*/

		/*display: block; - HAS NO EFFECT(?) in IE + FF; COMMENTED OUT FOR NOW */

		margin: 0; /*positioning for FF*/

		!margin: 0 0 0 -6em; /*positioning for IE; removed because attempt to locate child below parent with -4em causes 1st cell to have right side overhang (using now left -999em and top: 10px for temp. fix) ; originally "0;" - top-bottom-right-left, these setting mess things up in FF*/

		/*list-style: none;*/

		/*float: left; == DON'T KNOW IF I NEED TO USE "float" or "left" in this section; no visible effects!*/

		!padding: 0; /*this solves the left overhand on 1st vertical line-item problem BUT IN FF IT CAUSES LEVEL 4 TO APPEAR RIGHT BELOW LEVEL 3 IN VERTICAL LINE! (hence TEST 5a below)*/

		/*position: absolute; - taken from "second-level lists" in son of SF 3-level example but causes level 3+ here to be crunched into 1 cell and without the text*/ 

		/*!left: -999em; /*WORKS IN IF + FF!  "auto;" causes items to appear before parent is moused over; "0;" causes item to show up initially on far left and only after horiz nav bar parent is moused over does it appear in right place - causes flickering! */

		background: #deb887;

		color: #a0522d;

		width: 175px; /*if set to "auto" like on nav2, then level3 is displayed horizontally (but not in fixed position)*/

		height: 2em; /*smaller cell height than navbars 1+2*/

		line-height: 1.9em; /*est. space for text in cells but not hight of cells themselves*/

		/*!top: 10px;  /*at 10px, still enough room to mouseover to next parent on nav2; 22px; - lowers to base of nav 2; at 0px it makes nav 3 appear right on same line as nav2 (but in IE it is to right of parent, in FF it is on top of parent!) */

/*border design removed for now - adversely affects linkability between nav2 and level 3:*/

/*		border-width: 1px; 

		border-style:solid;

		border-color:#224d6f;*/

	}

	

	

	

/*TEST 5a: SPLIT OUT FROM ABOVE TO FIX FF POSITIONING PROBLEM ON 4th LEVEL*/

/*#nav li.off ul ul ul, #nav li.on ul ul ul, #nav li.off ul ul ul a, #nav li.on ul ul ul a*/

#nav li.off ul ul ul, #nav li.on ul ul ul, #nav li.off ul ul ul a, #nav li.on ul ul ul { /*removing on/off references causes more alignment problems*/

	/*position: absolute; REMOVING "position: absolute;" enables 4th level to appear in full with text in IE but not in FF; "relative;" ruins positioning in IE; "static" shows level 3+4 items in 1 long vertical list in IE*/

	/*display: block;

	list-style: none;

	padding: 0;*/

	margin: 0 0 0 7.3em;

	!margin: 0 0 0 -1px;

	/*margin-left: 7.3em; for FF - the 2 "margin-left" callups are a hack from post "9/7/2008 2:22 AM y-greg" at http://geekswithblogs.net/TimH/archive/2006/04/19/75606.aspx; only IE understands the ! symbol, thats why it comes AFTER the FF readable one. Proposed solution using "margin-left: -moz-1em;" didn't work for me (maybe because I used a number and not "center") */

	/*!margin-left: -1px; for IE; set -1px so border lines of levels 3+4 overlap rather than double the space*/

	/*margin: 0 0 0 0; -removing "margin" completely or setting left setting to "0" fixes level 4 position in IE but causes it to show up in same vertical line of level 3 when parent mounsed over; I may need "margin" (top-rt-btm-lft) after all to solve FF - also used by 3level+ example of son of SF: http://htmldog.com/articles/suckerfish/dropdowns/example/bones3.html (see snippet "third-and-above-level lists")*/

	/*margin-left: 0.75em;*/

	/*float: left; - has no effect in IE or FF even if set to "right"*/

	/*left: auto; if set to "auto" 4th level text appears in IE + FF*/

	width: 175px; /*"100%" makes more problems in FF*/

	/*height: 1.2em; - no effect as yet but if set to "auto;" then level 4 doesn't appear at all*/

	background: #deb887;

	color: #a0522d; /*dark brown*/

	/*top: auto; "auto;" lines up 4th level with correct parent in 3rd level - idea from: http://www.htmldog.com/reference/cssproperties/top/ */

	}

	

	

/*next 2 snippets from son of SF 3 level dropdown example*/

/*removed references to first levels, otherwise causes horizontal levels above to not remain fixed in place!*/

/*#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul - PROBABLY BEST TO CHANGE ".sfhover" to ".over":*/

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.over ul ul, #nav li.over ul ul ul {

	left: -999em; /*if use "auto" here, causes 3rd+ levels to be visible at same time - clumpy, not good*/

}

 

/*removed references to first levels, otherwise causes horizontal levels above to not remain fixed in place!*/ 

/*#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul - PROBABLY BEST TO CHANGE ".sfhover" to ".over":*/

/*#nav li:hover ul,*/ #nav li li:hover ul, #nav li li li:hover ul, /*#nav li.sfhover ul,*/ #nav li li.over ul, #nav li li li.over ul { /* lists nested under hovered list items */

	left: auto;

}



/* THESE 2 ORIGINAL SNIPPETS FROM HYBRID ACCIDENTALLY MISSING FROM TEST 6B AND BEFORE! - affect nav2*/

#nav li.off ul a, #nav li.on ul a {

	display: block;

	background: #224d6f;

	color: #fff; /*white?*/

	/*font-family: arial, verdana, sans-serif;

	font-size: small;*/

	font: 12px arial, helvetica, serif;

	font-weight: bold;

	line-height: 2em; /*this sets the vertical positioning of next on navbar 2*/

}		



#nav li.on ul a {

	background: #f90;

}



/*use verdana font on small sized text in IE7 and up because it looks better than arial*/

#ie-7up-mini-text {

	font: 11px verdana;

}



/*use verdana font on small sized text in any NON 'IE7 and up' browser because it looks better than verdana*/

#non-ie-7up-mini-text {

	font: 11px arial;

}



/*brown unclicked; still brown when clicked*/	

A.textlink1:link {color:#A0522D; text-decoration:none;}

A.textlink1:visited {color:#A0522D; text-decoration:none;}

A.textlink1:hover {color:#0000FF; text-decoration:underline;}

A.textlink1:active {color:#A0522D; text-decoration:none;}

/*blue unclicked; still blue when clicked*/	

A.textlink2:link {color:#0A4896; text-decoration:none;}

A.textlink2:visited {color:#0A4896; text-decoration:none;}

A.textlink2:hover {color:#0000FF; text-decoration:underline;}

A.textlink2:active {color:#0A4896; text-decoration:none;}