/*** adding sf-accordion in addition to sf-menu creates an accordion menu ***/
ul.sf-accordion, .sf-accordion li {
	width:	10em;
}

ul.sf-accordion li:hover ul,
ul.sf-accordion li.sfHover ul {
        left:                   0;
        top:                    0;

}
ul.sf-accordion li:hover li ul,
ul.sf-accordion li.sfHover li ul {
        top:                    0;
}
ul.sf-accordion li li:hover ul,
ul.sf-accordion li li.sfHover ul {
        left:                   0; /* match ul width */
        top:                    0;
}
ul.sf-accordion li li:hover li ul,
ul.sf-accordion li li.sfHover li ul {
        top:                    0;
}
ul.sf-accordion li li li:hover ul,
ul.sf-accordion li li li.sfHover ul {
        left:                   0; /* match ul width */
        top:                    0;
}



/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
ul.sf-accordion li:hover ul,
ul.sf-accordion li.sfHover ul {
	left:	0;
	top:	0;
}

ul.sf-accordion ul {
  position: relative;
  top:0px;
  left:0px;
}

ul.sf-accordion li:hover a ul.ul_accordion,
ul.sf-accordion li a:hover ul.ul_accordion,
ul.sf-accordion li a ul.ul_accordion{
  display:none;
}

ul.sf-accordion li li:hover ul, .sf-accordion li li.sfHover ul {
left:0;
top:0;
}


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


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