/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	10pt;
}
/* 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:	10pt; /* 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 s2-vertical in addition to s2-menu creates a vertical menu ***/
.s2-vertical, .s2-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s2-vertical li:hover ul,
.s2-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s2-vertical a:focus > .s2-sub-indicator,
.s2-vertical a:hover > .s2-sub-indicator,
.s2-vertical a:active > .s2-sub-indicator,
.s2-vertical li:hover > a > .s2-sub-indicator,
.s2-vertical li.sfHover > a > .s2-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s3-vertical in addition to s3-menu creates a vertical menu ***/
.s3-vertical, .s3-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s3-vertical li:hover ul,
.s3-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s3-vertical a:focus > .s3-sub-indicator,
.s3-vertical a:hover > .s3-sub-indicator,
.s3-vertical a:active > .s3-sub-indicator,
.s3-vertical li:hover > a > .s3-sub-indicator,
.s3-vertical li.sfHover > a > .s3-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s4-vertical in addition to s4-menu creates a vertical menu ***/
.s4-vertical, .s4-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s4-vertical li:hover ul,
.s4-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s4-vertical a:focus > .s4-sub-indicator,
.s4-vertical a:hover > .s4-sub-indicator,
.s4-vertical a:active > .s4-sub-indicator,
.s4-vertical li:hover > a > .s4-sub-indicator,
.s4-vertical li.sfHover > a > .s4-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s5-vertical in addition to s5-menu creates a vertical menu ***/
.s5-vertical, .s5-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s5-vertical li:hover ul,
.s5-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s5-vertical a:focus > .s5-sub-indicator,
.s5-vertical a:hover > .s5-sub-indicator,
.s5-vertical a:active > .s5-sub-indicator,
.s5-vertical li:hover > a > .s5-sub-indicator,
.s5-vertical li.sfHover > a > .s5-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s6-vertical in addition to s6-menu creates a vertical menu ***/
.s6-vertical, .s6-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s6-vertical li:hover ul,
.s6-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s6-vertical a:focus > .s6-sub-indicator,
.s6-vertical a:hover > .s6-sub-indicator,
.s6-vertical a:active > .s6-sub-indicator,
.s6-vertical li:hover > a > .s6-sub-indicator,
.s6-vertical li.sfHover > a > .s6-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s7-vertical in addition to s7-menu creates a vertical menu ***/
.s7-vertical, .s7-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s7-vertical li:hover ul,
.s7-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s7-vertical a:focus > .s7-sub-indicator,
.s7-vertical a:hover > .s7-sub-indicator,
.s7-vertical a:active > .s7-sub-indicator,
.s7-vertical li:hover > a > .s7-sub-indicator,
.s7-vertical li.sfHover > a > .s7-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s8-vertical in addition to s8-menu creates a vertical menu ***/
.s8-vertical, .s8-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s8-vertical li:hover ul,
.s8-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

/* hover arrow direction for modern browsers*/
.s8-vertical a:focus > .s8-sub-indicator,
.s8-vertical a:hover > .s8-sub-indicator,
.s8-vertical a:active > .s8-sub-indicator,
.s8-vertical li:hover > a > .s8-sub-indicator,
.s8-vertical li.sfHover > a > .s8-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** adding s9-vertical in addition to s9-menu creates a vertical menu ***/
.s9-vertical, .s9-vertical li {
	width:	10pt;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.s9-vertical li:hover ul,
.s9-vertical li.sfHover ul {
	left:	10pt; /* match ul width */
	top:	0;
}

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

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