/*** ESSENTIAL STYLES ***/
.sf-menu ul {
  position: absolute;
  top: -999em;
/*width:			10em; /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
  width: 100%;
}

.sf-menu li:hover {
  visibility: inherit;/* fixes IE7 'sticky bug' */
}

.sf-menu li {
/*float:			left;*/
  position: relative;
}

.sf-menu a {
  display: block;
  position: relative;
}

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
  left: 0;
  top: 2.5em;/* match top ul list item height */
  z-index: 99;
}

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

ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
  left: 184px;/* match ul width */
  top: 0;
}

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

ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
  left: 184px;/* match ul width */
  top: 0;
}
/*** DEMO SKIN ***/

.sf-menu {
/*	float:			left;
	margin-bottom:	1em;*/}

.sf-menu a {
  text-decoration: none;
}

.sf-menu a, .sf-menu a:visited {/* visited pseudo selector so IE6 applies text colour*/
  color: white;
}

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: #757575;
  outline: 0;
}
* html .sf-menu li {
  height: 40px;
}

.sf-menu li.sfHover a {
  color: white;
  height: 31px;
  padding-top: 10px;
}

.sf-menu li.sfHover a span {
  display: none;
}
/*** shadows for all but IE6 ***/

.sf-shadow ul {
/*background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;*/}

.sf-shadow ul.sf-shadow-off {
  background: transparent;
}
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.sf-vertical {
  display: block;
  height: 83px;
  width: 184px;
}

.sf-vertical li {
  background: url(../images/new-images/nav-arrow.gif) 158px 15px no-repeat;
}

.sf-vertical li a {
  border-bottom: 1px solid #010101;
  color: #c4c2c2;
  display: block;
  font-size: 1.33em;
  font-weight: bold;
  height: 39px;
  padding: 2px 0 0 29px;
}

.sf-vertical li a span {
  color: white;
  display: block;
  font-size: 0.69em;
  font-weight: normal;
  margin-top: -1px;
}

.sf-vertical li a span.sf-sub-indicator {
  display: none !important;
}

.sf-vertical li a:hover {
  background: #757575;
  color: white;
  height: 31px;
  padding-top: 10px;
}



.sf-vertical li a:hover span {
  display: none;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */

.sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
  background: url(../images/new-images/sub-nav-bg.png) 0 0 no-repeat;
  display: block;
  left: 184px;/* match ul width */
  top: -15px;
  width: 612px;
}

* html .sf-vertical li:hover ul, * html .sf-vertical li.sfHover ul {
  background: url(../images/new-images/sub-nav-bg.gif) 0 0 no-repeat;
}

.sf-vertical li:hover ul li, .sf-vertical li.sfHover ul li {
  background: transparent;
  display: inline;
}

.sf-vertical li:hover ul li h2, .sf-vertical li.sfHover ul li h2{
  background: url(../images/new-images/dot.gif) bottom repeat-x;
  color: #c4c4c4;
  font-size: 1em;
  margin: 0 10px 7px 10px;
  padding: 9px 14px 8px;
  text-transform: uppercase;
}

.sf-vertical li:hover ul li a, .sf-vertical li.sfHover ul li a {
  border-bottom: none;
  float: left;
  font-size: 1em;
  font-weight: normal;
  height: auto !important;
  padding: 4px 0 5px 23px;
  width: 173px;
  margin-left: 1px;
}

*:first-child + html .sf-vertical li:hover ul li, *:first-child + html li.sfHover ul li {
  position: static;
}
* html .sf-vertical li:hover ul li, * html li.sfHover ul li {
  position: static;
}

.sf-vertical li:hover ul li a:hover, .sf-vertical li.sfHover ul li a:hover {
  color: #c4c4c4;
  background: #363636;
}
* html .sf-vertical li:hover ul li a:hover, * html .sf-vertical li.sfHover ul li a:hover {
  height: 6px;
  padding: 4px 0 5px 23px;
}

.sf-vertical li:hover li.clear, .sf-vertical li.sfHover li.clear{
  background: url(../images/new-images/sub-nav-bg.png) left bottom no-repeat;
  bottom: -6px;
  clear: both;
  display: block;
  float: none;
  height: 6px;
}
*:first-child + html .sf-vertical li:hover li.clear, *:first-child + html li.sfHover li.clear {
  position: relative;
}
* html .sf-vertical li:hover li.clear, * html .sf-vertical li.sfHover li.clear {
  background: url(../images/new-images/sub-nav-bg.gif) left bottom no-repeat;
}