/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	290px;
	border: solid 1px #CCCCCC;
	border-bottom: none;
	background: #475E34;
}
.sf-vertical li:last-child, .sf-vertical li li:last-child {
	border-bottom: solid 1px #CCCCCC;
}
.sf-vertical li li{
	width:	290px;line-height: 16px;
}

.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	left:	290px; /* match ul width */
	top:	0;
}
ul.w1 li, ul.w1 li{
	width: 255px;float: none;
}
ul.w2 li, ul.w2 li{
	width: 280px;float: none;
}
ul.w3 li, ul.w3 li{
	width: 220px;float: none;
}
.sf-vertical, .sf-vertical li, .sf-vertical li a{
	font-size: 12px; color:#FFFFFF;
}
.sf-vertical li a:hover{
	color:#FDFE40;
}

/*** 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*/
}