/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_variable4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* ---------------------------------------
// Popup Category for Opencart v1.5.1.x
// By Best-Byte
// www.best-byte.com
// --------------------------------------- */   
.box .box-cat {
  padding-bottom: 5px;
	background: #f5f5f5;	             /* box background */
	border-left: 1px solid #ddd;       /* box borders */
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	-webkit-border-radius: 0px 0px 7px 7px;
	-moz-border-radius: 0px 0px 7px 7px;
	-khtml-border-radius: 0px 0px 7px 7px;
	border-radius: 0px 0px 7px 7px;
}
#nav {padding: 0; margin: 0; list-style:none; font-size: 12px; line-height:23px; font-size:14px}
#nav ul {float: left; position: absolute; left: -9999px; top: -9999px; padding: 0; margin: 0; list-style: none;}
#nav li ul {padding-left: 0; margin-left: 0; border-top: 1px solid #58B01B;border-right: 1px solid #58B01B; border-bottom: 1px solid #58B01B; z-index: 300;} 
#nav li {padding: 0; margin: 0;}
#nav li li {float: none; padding: 0; margin: 0; min-width: 200px; border-left: 1px solid #58B01B;}
#nav li a.down {}
#nav li li a.fly {}
#nav li li.last {border-bottom: none}
#nav li li.first {border-left: 0;}
#nav li a {display: block; padding: 10px 10px 10px 20px; color:#444; text-decoration:none; background: #CEE2F2 url("/images/popupcategory2.jpg") bottom no-repeat; border-bottom: 1px solid #8F8E8E; font-weight:600;}  /* main categories */
#nav li li a {display:block; padding:10px 10px 10px 20px; color:#444; text-decoration:none;    background: #CEE2F2 url("/images/left_ico.gif") 10px center no-repeat;border: 0; }  /* sub categories */
#nav li:hover {position: relative; z-index: 300;text-decoration:none;}
#nav li.cssplay_hover {position: relative; z-index: 300;}
#nav li.cssplay_hover a {color: #000;}
#nav li li.cssplay_hover a {color: #000;}
#nav li:hover ul {left: 188px; top: -1px; z-index: 500;}
#nav li.cssplay_hover ul {left: 0; top: 33px; z-index: 500;}
* html #nav ul {width: 2px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left: 0; margin-left: 100%; top: -1px; z-index: 500;text-decoration:none;}
/* keep further levels hidden */
#nav li:hover > ul ul {position: absolute; left: -9999px; top: -9999px; width: auto;}
/* show path followed */
#nav li li:hover > a {text-decoration:  none; color: #000;  background:#CCC;}   /* sub categories hover */
#nav li:hover > a {text-decoration:  none; color: #000; background:#CCC;} 
a.onSelectedLi {color: #000;}

/* a hack for  IE6 */
* html #nav li li {float: left;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
#nav li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a
{color: #000; background-color: #fff;}

#nav li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
{color: #000; background-color: #fff;}

/* show next level */
#nav li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{left: 100%; margin-left: -5px; top: -1px;}

/* keep further levels hidden */
#nav li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{position: absolute; left: -9999px; top: -9999px;}