/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li						{ width:	150px; }

/* 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							{ top:	0; }
.sfmenu .sf-vertical ul.tertiary					{ list-style-type: circle; list-style-position: inside; padding: 0 0 0 10px; position: relative; }

/*** 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*/ }

/* the id inner_navigation applies to the side navigation on inner pages */
/* shrinks padding around links, spaces and colors the background of each "link" */
#inner_navigation .sf-menu a						{ padding: .2em 1em; text-decoration: none; text-indent: 0px; }
#inner_navigation .sf-menu li						{ background: #003875; margin-top: 1px; }

/* makes background light blue as a "hover-state" */
#inner_navigation .sf-menu li:hover, 
#inner_navigation .sf-menu li.sfHover, 
#inner_navigation .sf-menu a:hover					{ background: #597da5; outline: 0; color: #fff; }

/* makes background white as an "on-state" */
#inner_navigation .sf-menu a:active,
#inner_navigation .sf-menu a:focus					{ background: #fff; color: #597da5; }

/* removes float for "tertiary" level navigation */
#inner_navigation .sf-menu li li					{ float: none; margin: 0; padding: 0; }
#inner_navigation .sf-menu li li a					{ color: #597da5; }

/* pads tertiary navigation */
#inner_navigation .sf-menu li ul					{ position: relative; padding: 0; color: #597da5; background: #fff; }

/* adjusts padding around links */
#inner_navigation li ul .sf-menu a					{ padding: .2em 1em; text-decoration: none; text-indent: 0px; }

/* makes tertiary nav items blend in with selected secondary nav item */
#inner_navigation .sf-menu li ul li					{ background: #fff;	color: #597da5;	padding-top: 1px; }

/* hover state for tertiary nav item */
#inner_navigation .sf-menu li li:hover, 
#inner_navigation .sf-menu li li.sfHover, 
#inner_navigation .sf-menu li a:hover				{ background: #597da5; outline: 0; color:	#fff; }
