/* PRODUCTS MENU STYLES FOR WIDE LAYOUT ------------------------- */
#home #head h1, #home #head h1 a { height:300px; }
#home #head h1 { background-image:url(images/head-h1-home.jpg); }
#home #head h1 a { background-position:40px 160px; }

#nav li#productsnav { position:absolute; top:33px; left:0px; width:220px; }

/* PRODUCTS */
#nav li#productsnav a { background:#781418 url(images/menu-products-a.gif) repeat-x top left; width:180px; font-size:24px; color:#ECBFBC; line-height:50px; text-align:left; padding:0 20px; font-weight:bold; border:none; border-bottom:8px solid #000; }

/* neutralize header styles from original menu */
#nav li#productsnav li a { background:none; width:auto; font-size:100%; color:#fff; line-height:normal; padding:0; font-weight:normal; border:none; }
#nav li#productsnav:hover { background:none; }


/* PRODUCTS-UL (static menu) */
#nav li#productsnav ul,
#nav li#productsnav ul li { display:block; padding:0; width:220px; height:auto; margin:0; background:none; } /* both ul/li */
#nav li#productsnav ul { background:#585755 url(images/menu-products.gif) repeat-x top left; left:0px; }

/* links, selected and unselected */
#nav li#productsnav ul li a { width:180px; text-align:left; padding:8px 20px 3px; text-decoration:none; color:#fff; text-transform:uppercase; background:none; }
#nav li#productsnav ul li a.selected { font-weight:bold; background:transparent url(images/menu-products-li-a-selected.png) repeat top left; }
#nav li#productsnav ul li:hover a,
#nav li#productsnav ul li:hover a.selected {color:#333; background:transparent url(images/menu-products-li-a.png) repeat-y top left;  }


/* PRODUCTS-UL-UL (fly-outs) */

/* neutralize styles from above */
#nav li#productsnav ul li:hover ul li a,
#nav li#productsnav ul li:hover ul li a.selected { background-image:none; }


/* position flyouts, set them to appear */
#nav li#productsnav ul li ul { visibility:hidden; position:absolute; left:210px; top:-10px; margin:0; padding:0; }
#nav li#productsnav ul li:hover { z-index:6; direction:ltr; } /* z-index bug in IE7 requires the direction attribute */
#nav li#productsnav ul li:hover ul { visibility:visible; }

/* appearance of list items - duplicates for all li:hovers */
#nav li#productsnav ul li ul li,
#nav li#productsnav ul li:hover ul li { display:block; margin:0; padding:0; background-color:#eee; height:auto; }
#nav li#productsnav ul li ul li a,
#nav li#productsnav ul li:hover ul li a { display:block; padding:5px; height:auto; line-height:normal; width:200px; color:#000; background-color:#fff; font-weight:normal; }
#nav li#productsnav ul li ul li:hover,
#nav li#productsnav ul li:hover ul li:hover { background-color:#ddd;  }

#nav li#productsnav ul li ul li a.selected,
#nav li#productsnav ul li:hover ul li a.selected { font-weight:bold; background-color:#fff; background-image:none; }

#nav li#productsnav ul li ul li a:hover,
#nav li#productsnav ul li:hover ul li a:hover,
#nav li#productsnav ul li ul li a.selected:hover
#nav li#productsnav ul li:hover ul li a.selected:hover { background-color:#ccc; color:#000; }

/* FOOTER STYLES ------------------------- */
#foot .vcard br { display:none; }


/* IE 6 HACKS */
* html #nav li#productsnav { position:static; top:0; left:0; clear:left; }
* html #nav li#productsnav a { position:absolute; top:33px; left:0; }
* html #nav li#productsnav ul a { position:static; top:auto; left:auto; }
* html #nav li#productsnav ul { position:absolute; top:91px; left:0; }
* html #nav li#productsnav ul li ul { position:absolute; left:210px; top:-10px; }

* html #nav li#productsnav ul li.hover { z-index:10; } /* forces hovered item to top */
* html #nav li#productsnav ul li.hover ul { display:block; visibility:visible; }

* html #nav li#productsnav ul li.hover,
* html #nav li#productsnav ul li.hover a {color:#333; background:#fffffe url(images/menu-products-li-a.gif) repeat-y top left;  }
* html #nav li#productsnav ul li.hover li a { background-image:none; } /* neutralize background image */

* html #nav li#productsnav ul li.hover ul { visibility:visible; }

* html #nav li#productsnav ul li ul li.hover { background-color:#ddd;  }
* html #nav li#productsnav ul li ul li.hover a { background-color:#fff; color:#000;  }