div#nav {margin: 75px auto -30px auto; /* div#nav instead of just #nav needed for another win IE bug */
											width: 750px;
											height: 25px;
											z-index: 10;
											border-top: 1px #000000 solid;
											visibility: visible;
											position: relative;
											top: 0px;
											left: 0px;
											padding-bottom: 0px; 
										}		

div#nav ul {
											padding: 0; /* applied down the whole list -- move all menu items to size of container div-- these styles are inherited on sublists!*/
											/* notice that this creates around the list itself, not the list elements */
											text-align: center;
											margin: 0px; 
										} 
div#nav li {
											list-style: none; /* applied down whole list -- every list item will act as a starting point for the position of its descendent submenus by creating a containing block  (all absolutely positioned blocks will use this as a positioning context -- this is for the list items theselves -- float is used to make this a horizontal menu*/
float: left;											
position: relative;
/* explicitly stated so that submenus can line up (vertically) correctly */
											text-align: left;
											}



div#nav li a {display: block; padding: 0.25em .5px 0.25em 0.5em; text-decoration: none;
/* converts the look and behavior (not the nature) of links from inline to blaock - this allows the clickable link area to fill the whole part of the list  item */
width: 6.5em; /* must set explicit width for IE win */
									
											font-family: Verdana, Helvetica, Arial, sans-serif;
											font-size: 12px;
											color: #000000;
											font-weight: 600;
											line-height: 18px; 
										} 

div#nav>ul a {width: auto; /* IE doesn't understand this rule -- in actuality we want the links to be automatically sized (in other browsers besieds IE */} 

div#nav ul ul {position: absolute;
											display: none
/* for anly list inside another list, places the top of the submenu is aligned with the top of the list item that contains it -- and the left edge of the submenu is placed on the right edge of its container -- since these items are absolutely positioned, theyr are no longer part of the content flow of the div#nav */
											}

div#nav li li { /*width of 2nd level and below menu items */
											width: 100px;
											}



div#nav ul ul {
										display: none;
											width: 135px;
											}

 div#nav ul ul li{
											border-left: 3px #000000 double;
											border-right: 1px #000000 solid; 
										}
div#nav ul ul li a{border-bottom: 1px #000000 dotted;
											}

div#nav li.hassubmenu:hover, div#nav li.hassubmenu.sfhover  {/* keep level one hassubmenu highlighted */
											border: 2px #000000 solid;
											background-color: #ffffff; 
										}

div#nav li.hassubmenu li.hassubmenu {background:    url('../global_images/navimages/hassubmenu.gif') no-repeat 95% 50%; /*error in htc file to fix win IE bugs, so we need to rediclare some values */ 
}



div#nav li.hassubmenu li.hassubmenu:hover, div#nav li.hassubmenu li.hassubmenu.sfhover {/* keep level two hassubmenu highlighted */
											border: 2px #ffffff solid;
											 
										}

div#nav li.hassubmenu li.hassubmenu li.hassubmenu:hover, div#nav li.hassubmenu li.hassubmenu li.hassubmenu.sfhover  {/* keep level three hassubmenu highlighted */
											background-image:    url('../global_images/navimages/hassubmenu.gif');
											border: 2px solid #ffffff; 
										}

div#nav ul.level1 li.hassubmenu:hover ul.level2,
div#nav ul.level2 li.hassubmenu:hover ul.level3,
div#nav ul.level3 li.hassubmenu:hover ul.level4, 
div#nav ul.level1 li.hassubmenu.sfhover ul.level2,
div#nav ul.level2 li.hassubmenu.sfhover ul.level3,
div#nav ul.level3 li.hassubmenu.sfhover ul.level4  {
											display: block; 
/* we use display to show the hidden items instead of visibility:hiden and then visibility: visible beause visibiilty values aren't there, and then are created - therefore regular document flow can be disturbed */}

div#nav li ul{
											border-bottom: 7px #000000 solid;
											width: 150px !important; 
										}

div#nav li ul ul{
											border-bottom: 7px #000000 solid;
											width: 145px !important; 
										}

div#nav li ul ul ul{
											border-bottom: 7px #000000 solid;
											width: 115px !important; 
										}

div#nav ul.level1 li {
											background-image:    url('../global_images/navimages/nib.gif');
											width: 90px;
											text-align: center;
											background-repeat: no-repeat
											}

div#nav ul.level2 li, div#nav ul.level2 a  {
background-image:    url('../global_images/navimages/blank.gif');
											text-align: left;
width: 140px  
										}

div#nav ul.level2 {width: 140px; 
left: -2px; 
/* explicitly puts 2nd level items in thier right place (vertically) and compensates (horizontally) for the fact that div#nav li elements dont' have a boarder on ther left, but div#nav ul li elements do */
											z-index: 7;
											position: absolute;
											top: 25px;
											margin-top: -10px; 

										}
div#nav ul.level3 li, div#nav ul.level3 a { width: 135px; }
div#nav ul.level3 {width: 135px; 
top: -1px; left: 140px;
											margin: 0px;
											z-index: 8;
											position: absolute; 
										}

div#nav ul.level4 li, div#nav ul.level4 a {width: 105px; }

div#nav ul.level4 {width: 105px; 
top: -1px; left: 137px;
											border-top: px solid #ccc;
											z-index: 9;
											position: absolute; 
										}
div#nav li#home a:hover, div#nav li#home a.sfhover { /*cad cam all levels on hover state */

		background-color: #ff9933;
											
											}






div#nav li#cadcam li{ /* 2nd level of cad cam menu */

		background-color: #3a85c9;
											padding: 3px;
											}

div#nav ul.level1 li#cadcam.hassubmenu:hover, div#nav ul.level1 li#cadcam.hassubmenu.sfhover  {
											background-image:    url('../global_images/navimages/nibcadcam.gif');
											background-repeat: no-repeat 
										}

div#nav li#cadcam a:hover, div#nav li#cadcam a.sfhover { /*cad cam all levels on hover state */

		background-color: #6a8dbd;
											color: #ffffff;
											}



div#nav li#tooling li { /* first level of tooling menu */

		background-color: #999999;
											padding: 3px;
											}

div#nav ul.level1 li#tooling.hassubmenu:hover, div#nav ul.level1 li#tooling.hassubmenu.sfhover  {
											background-image:    url('../global_images/navimages/nibtools.gif');
											background-repeat: no-repeat 
										}

div#nav li#tooling a:hover, div#nav li#tooling a.sfhover  { /* first level of tooling menu */

		background-color: #c3c3c3;
											color: #ffffff; 
										}



div#nav li#machines li{

		background-color: #669933;
											}

div#nav li#machines ul.level4 a{

		background-color: #669933;
											}

div#nav ul.level1 li#machines.hassubmenu:hover, div#nav ul.level1 li#machines.hassubmenu.sfhover {
											background-image:    url('../global_images/navimages/nibmachines.gif');
											background-repeat: no-repeat 
										}

div#nav li#machines ul.level4 a:hover, div#nav li#machines ul.level4 a.sfhover{

		background-color: #9ebf79;
											}

div#nav li#machines a:hover, div#nav li#machines a.sfhover  {

		background-color: #a0c17c;
											}





div#nav li#inspection a:hover, div#nav li#inspection a.sfhover {

		background-color: #977c5f;
											}





div#nav li#requestquote a:hover, div#nav li#requestquote a.sfhover{

		background-color: #a94e50;
											}





div#nav li#purchase a:hover, div#nav li#purchase a.sfhover{

		background-color: #9a69a0;
											}







div#nav li#contact a:hover, div#nav li#contact a.sfhover{

		background-color: #ff9c36;
											}