/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li { width: 210px; z-index:99999; }

/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
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:0px; /* 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:0px; /* 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*/
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.categories .sf-vertical, .categories .sf-vertical li {  z-index:99999;  }
* html .categories .sf-vertical, * html .categories .sf-vertical li { z-index:99999; margin-right:0px;  }

/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.categories .sf-vertical li a {
	padding:10px 0px 10px 20px;
	text-decoration:none;
	text-align:left;
	list-style-type:none;
	font-size:14px;
	font-weight: bolder;
}
.categories .sf-vertical li li a, .categories .sf-vertical li li li a, .categories .sf-vertical li li li li a, .categories .sf-vertical li li li li li a { padding:8px 12px; 
list-style-type:none;  }


.categories .sf-vertical li ul {  left: 190px; /* match ul width */ top:0px; }
.categories .sf-vertical li.sfHover ul li ul  { left:150px; }

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

.categories .sf-vertical a.sf-with-ul {/* padding-right: 	2.25em;*/	min-width:1px; /* trigger IE7 hasLayout so spans position accurately */}
.categories .sf-sub-indicator { position:absolute; display:block; right:.75em; top:0.7em; /* IE6 only */ width:10px; height:10px; text-indent:-999em; overflow:hidden; }


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