/* Mainlevel */
ul.menu-sf {
	z-index: 1;
	float: left;
	margin: 0;
	background: none;
	padding: 0;
	list-style: none;
}

ul.menu-sf li {
	float: left;
	display: inline;
	background: none;
	margin: 0;
	padding: 0;
}

ul.menu-sf li span
{
	/* play here */
	padding		: 0;
	margin		: 0;
	text-align	: center;
	padding		: 4px 14px 5px 14px;
	display		: block;
	background	: url(../images/menu-sep.jpg) top right no-repeat;
}

ul.menu-sf li li span
{
	padding		: 3px 1.5em 3px 0;
	text-align	: left;
	border		: none;
	background	: none;	
}

ul.menu-sf li li
{

}

ul.menu-sf li a span:hover
{
	background-color: #ccc;
}

/*parent A behaviour */
ul.menu-sf a:link,
ul.menu-sf a:visited {
	display: block;
	margin: 0;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration: none;
	padding			: 0;
	font-size		: 10px;
	

}

ul.menu-sf li  li a:hover {
	
}

ul.menu-sf li.active a
{
	color		: #000;
}

ul.menu-sf li.active span
{
	
}

ul.menu-sf li.active li span
{
	background	: none;
}

ul.menu-sf li li.active a {
	background-color: #333333;
	border-bottom: 1px solid #1e1e1e;
}


/* first Parent */
ul.menu-sf ul {
	position: absolute;
	left: -999em;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top	: 1px solid #1e1e1e;
}

/*  Second Parent style for UL */
ul.menu-sf ul ul {
	margin: -26px 0 0 184px;
	z-index: 3;
}

/* menu items LI styling */
ul.menu-sf ul li {
	position: relative;
	width: 185px;
	margin: 0;
	background: none;
	padding: 0;
}

ul.menu-sf ul a:link,
ul.menu-sf ul a:visited {
	display: block;
	border-bottom: 1px solid #1e1e1e;
	border-right: none;
	border-top: 1px solid #1e1e1e;
	border-left: 1px solid #1e1e1e;
	background: #282828;
	color: #FFF;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	height: 1%;
}

ul.menu-sf ul a:hover,
ul.menu-sf ul li.parent a:hover,
ul.menu-sf ul li a span:hover,
ul.menu-sf ul li.parent li.parent a:hover {
	background-color: #f4f5f5;
	color: #000;
}

/* A only when active basesd on href a*/
ul.menu-sf ul li.active a,
ul.menu-sf ul li.active li.active a,
ul.menu-sf ul li.active li.active li.active a {
	font-weight: bold;
	color: #FFF;
}

/* we need to clear the active behaviour here */
ul.menu-sf ul li.active li a,
ul.menu-sf ul li.active li.active li a {
	font-weight: normal;
	color: #FFF;
}

/* display nice arrow when a parent is having child */
ul.menu-sf ul li.parent a,
ul.menu-sf ul li.parent li.parent a {
	background	: #282828 url(images/top-menu-arrow.png) no-repeat 95% center;
	padding-right: 10px;
}


ul.menu-sf ul li.parent li a,
ul.menu-sf ul li.parent li.parent li a {
	background-image: none;
}


/* hover behaviours */
ul.menu-sf li:hover ul,
ul.menu-sf li.hover ul,
ul.menu-sf li:hover ul li:hover ul,
ul.menu-sf li.hover ul li.hover ul,
ul.menu-sf li:hover ul li:hover ul li:hover ul,
ul.menu-sf li.hover ul li.hover ul li.hover ul {
	left: auto;
}

ul.menu-sf li:hover ul ul,
ul.menu-sf li.hover ul ul,
ul.menu-sf li:hover ul li:hover ul ul,
ul.menu-sf li.hover ul li.hover ul ul,
ul.menu-sf li:hover ul li:hover ul li:hover ul ul,
ul.menu-sf li.hover ul li.hover ul li.hover ul ul {
	left: -999em;
}

ul.menu-sf,
ul.menu-sf li li {
	clear: left;
}

/* fix for ie 7 */
ul.menu-sf li:hover, ul.menu-sf li.hover {
    position: static;
}