/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
ul.sf-vertical a
{
	padding: 3px 6px;	/* padding: .75em 1em; */
	text-decoration: none;
	font: 12px/16px Tahoma, Arial, Helvetica, Sans-Serif;
	color: #40531D;
	
	border-left: none;

	background: url(right-darkgreen.gif) no-repeat center left;
	padding-left: 10px;
}
	ul.sf-vertical ul li a
	{
		padding-left: 6px;
		background-image: none;
		border-left: none;	/* Reset left border for child menus */
	}

ul.sf-vertical li
{
}
	ul.sf-vertical li li
	{
		padding-left: 0px;
	}

ul.sf-vertical ul		/* All child menus */
{
	border-top: solid 1px #607736;
	border-right: solid 1px #607736;
	border-bottom: none;
	border-left: solid 1px #607736;
}
	ul.sf-vertical ul li a
	{
		border-bottom: solid 1px #607736;
	}
	
	
.sf-vertical li li a
{
	/*
	border-right: solid 1px #607736;
	border-bottom: none 0px;
	*/
}

.sf-vertical li a, .sf-vertical li a:visited
{
	/* visited pseudo selector so IE6 applies text colour*/
	color: #000000;
	font-weight: bold;
}
.sf-vertical li li a, .sf-vertical li li a:visited
{
	/* visited pseudo selector so IE6 applies text colour*/
	color: #000000;
	font-weight: bold;
}

.sf-vertical li
{
	background: #8DAA5B;
}
.sf-vertical li li
{
	background: #8DAA5B;
}
.sf-vertical li li li
{
	background: #8DAA5B;
}
ul.sf-vertical li:hover, 
ul.sf-vertical li.sfHover, 
ul.sf-vertical li a:focus, 
ul.sf-vertical li a:hover, 
ul.sf-vertical li a:active
{
	background: #C6D4AD url(right-darkgreen.gif) no-repeat center left;
	outline: 0;
	color: #000000;
}
	ul.sf-vertical li li:hover, 
	ul.sf-vertical li li.sfHover, 
	ul.sf-vertical li li a:focus, 
	ul.sf-vertical li li a:hover, 
	ul.sf-vertical li li a:active
	{
		background-color: #C6D4AD;
		background-image: none;
		outline: 0;
		color: #000000;
	}

.sf-vertical, .sf-vertical li
{
	width: 152px;
}
/* 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: 152px; /* match ul width */
	top: 5px;
}

/*** 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*/
}

