/*+clearfix {*/
ul.sf-menu:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}

ul.sf-menu {
	display: inline-block;
}

ul.sf-menu {
	/*\*/
	display: block;
	/**/
	-height: 1px;
}

/*+}*/
/*superfish 2.0 reloaded*/
ul.sf-menu, ul.sf-menu * {
	/*reset the menu*/
	margin: 0;
	padding: 0;
	list-style: none;
}

/*[clearfix]*/ul.sf-menu {
	/*+placement:margin-auto 0px 0px;*/
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: 0px;
	top: 0px;
	width: auto;
}

ul.sf-menu {
	/*reset line heights*/
	line-height: 1;
}

ul.sf-menu li {
	float: left;
	position: relative;
	margin-right: 0px;
}

ul.sf-menu ul li {
	/*set submenu li widths*/
	width: 100%;
}

/*first level*/
ul.sf-menu a {
	display: block;
	position: relative;
	padding: 0px 10px;
	text-decoration: none;
	color: #F3F3F3;
	border: 0px solid #888888;
	line-height: 28px;
	background: #666;
	font-size: 12px;
}

ul.sf-menu a:hover,
ul.sf-menu li.sfHover a {
	color: #FFFFFF;
	background: #999;
}

ul.sf-menu ul li a {
	margin-right: 0;
}

/** 2nd level*/
ul.sf-menu li ul {
	position: absolute;
	top: 0;
	display: none;
	visibility: hidden;
	top: 28px; /*top = top nav bar height*/
	width: 160px;
	left: 0;
}

ul.sf-menu li:hover ul, ul.sf-menu li.sfhover ul {
	/*shows 2nd level / dropdown*/
	visibility: visible;
	display: inline-block;
	z-index: 99;
}

ul.sf-menu li:hover ul ul, ul.sf-menu li.sfhover ul ul {
	/*hide 3rd level offscreen*/
	top: -999em;
}

ul.sf-menu li ul a {
	line-height: 120%;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #999;
}

ul.sf-menu li ul a:hover,
ul.sf-menu li ul li.sfHover a {
	background: #BBB;
	color: #000000;
}

/*3rd level*/
ul.sf-menu li ul li ul {
	display: none;
	visibility: hidden;
	left: 160px; /*left = 1st level width*/
	top: 0;
}

ul.sf-menu li ul li:hover > ul, 
ul.sf-menu li ul li.sfhover > ul {
	/*shows 3rd level*/
	top: 0;
}

ul.sf-menu li ul li ul li ul {
	/*hide 4th level*/
	top: -9999px;
}

ul.sf-menu li ul li ul a,
ul.sf-menu li ul li ul li a {
	background: #BBB;
}

ul.sf-menu li ul li ul a:hover,
ul.sf-menu li ul li ul li.sfHover a {
	background: #DDD;
	color: #000000;
}

/*4th level*/
ul.sf-menu li ul li ul li ul {
	left: 10em;
	/*last level, just style, no superfish disclosure, just copy the above recipe to add more levels!*/
}

ul.sf-menu li ul li ul li:hover ul, ul.sf-menu li ul li ul li.sfhover ul {
	/*show 4th level*/
	top: 0em;
}

/*hover state / xpath*/
.sf-menu li:hover, .sf-menu li.sfhover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline: 0;
}

/*arrows*/
.sf-menu a.sf-with-ul {
	padding-right: 2.25em;
	min-width: 1px;
	/*trigger ie7 haslayout so spans position accurately*/
}

.sf-sub-indicator {
	position: absolute;
	display: none;
	right: 0.55em;
	top: 1.05em;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
	background-position: -10px 0;
	/* background: url('../images/arrows-ffffff.png') no-repeat -10px 0px; */
}

.sf-menu li.sfhover .sf-sub-indicator {
	background-position: -10px -100px;
}

/*submenu arrows right*/
ul.sf-menu li.sfhover ul li .sf-sub-indicator {
	background-position: 0px 0px;
}

.sf-menu li.sfhover li.sfhover .sf-sub-indicator {
	background-position: -10px 0px;
}

.sf-menu ul .sf-sub-indicator {
	background-position: -10px 0;
}





/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

ul.sf-vertical li {
	float: none;
	position: relative;
	margin-right: 0px;
}

/* width of main menu items */
.sf-vertical, 
.sf-vertical li {
	width: 160px;
}

ul.sf-vertical li a {
	line-height: 130%;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* 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 {
	left: 160px; /* match ul width */
	top: 0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
































/* SAMPLE CUSTOM OVERRIDES */
 
/* the main menu ul */
ul#my-menu-id {
	position: absolute;
	top: 127px;
	left: 14px;
	border: none;
	background: transparent;
}

/* Second level position and width (match top level line height) */
ul#my-menu-id.sf-menu > li > ul {
	top: 29px;
	width: 190px;
}

/* Third level position and width (match second level width) */
ul#my-menu-id.sf-menu li ul li ul {
	left: 190px;
	width: 190px;
}

/* overall menu item background */
ul#my-menu-id li {
	background-color: transparent;
}

/* overall font profile */
ul#my-menu-id.sf-menu a {
	font-size: 11px;
	line-height: 140%;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	background-color: #A5B6A1;
	color: #255472;
}

/* overall font profile (on hover) */
ul#my-menu-id.sf-menu a:hover {
	background-color: #e3c0ab;
	color: #000000;
}

/* override for top level only */
ul#my-menu-id.sf-menu > li > a {
	font-size: 11px;
	line-height: 29px;
	padding-top: 0;
	padding-right: 8px;
	padding-bottom: 0;
	padding-left: 8px;
	background-color: transparent;
	color: #255472;
	font-weight: bold;
}

/* override for top level only (on hover) */
ul#my-menu-id.sf-menu > li > a:hover {
	background-color: #A5B6A1;
	color: #000000;
} 

/* Third level font styles */
ul#my-menu-id.sf-menu > li > ul > li > ul > li > a {
	background: #e3c0ab;
	color: #255472;
}

/* Third level font styles on HOVER */
ul#my-menu-id.sf-menu > li > ul > li > ul > li > a:hover {
	background: #A5B6A1;
	color: #000000;
}