/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical{
	width:	236px;
	padding:0;
}
.sf-vertical li,.sf-vertical li a {
	width:	236px;
	height:	47px;
	padding:0;
	border:0px;
}
.sf-vertical li a {
	text-indent:-10000px;
	background:url(../images/navi.png);
	display:block;
}

li#derladen a{	background-position:0 0;}
li#spielundspass a{	background-position:0 -47px;}
li#purzelwunschkiste a{	background-position:0 -94px;}
li#gutschein a{	background-position:0 -141px;}
li#aktuelles a{	background-position:0 -188px;}

li#derladen a:hover{	background-position:-236px 0;}
li#spielundspass a:hover{	background-position:-236px -47px;}
li#purzelwunschkiste a:hover{	background-position:-236px -94px;}
li#gutschein a:hover{	background-position:-236px -141px;}
li#aktuelles a:hover{	background-position:-236px -188px;}

li#derladen a.active{	background-position:-472px 0;}
li#spielundspass a.active{	background-position:-472px -47px;}
li#purzelwunschkiste a.active{	background-position:-472px -94px;}
li#gutschein a.active{	background-position:-472px -141px;}
li#aktuelles a.active{	background-position:-472px -188px;}

li#derladen a.active:hover{	background-position:-708px 0;}
li#spielundspass a.active:hover{	background-position:-708px -47px;}
li#purzelwunschkiste a.active:hover{	background-position:-708px -94px;}
li#gutschein a.active:hover{	background-position:-708px -141px;}
li#aktuelles a.active:hover{	background-position:-708px -188px;}

ul#navi-sub{
	position:absolute;
	z-index:20000;
	}
ul#navi-sub li, ul#navi-sub li a{
	width:246px;
	height:25px;
}
ul#navi-sub li a{
	text-indent:-10000px;
	background:url(../images/navi-sub.png) transparent;
}

ul#navi-sub li#welchesspiel{
	height:42px;}
ul#navi-sub li#welchesspiel a{	background-position:0 0;
	height:42px;}
ul#navi-sub li#spielemieten a{	background-position:0 -42px;}
ul#navi-sub li#spieldesjahres a{	background-position:0 -67px;}
ul#navi-sub li#spielempfehlungen a{	background-position:0 -92px;}
ul#navi-sub li#geschenkideen{
	height:42px;}
ul#navi-sub li#geschenkideen a{	background-position:0 -117px;
	height:42px;}


ul#navi-sub li#welchesspiel a:hover{	background-position:-246px 0;}
ul#navi-sub li#spielemieten a:hover{	background-position:-246px -42px;}
ul#navi-sub li#spieldesjahres a:hover{	background-position:-246px -67px;}
ul#navi-sub li#spielempfehlungen a:hover{	background-position:-246px -92px;}
ul#navi-sub li#geschenkideen a:hover{	background-position:-246px -117px;}
	
ul#navi-sub li#welchesspiel a.active{	background-position:-492px 0;}
ul#navi-sub li#spielemieten a.active{	background-position:-492px -42px;}
ul#navi-sub li#spieldesjahres a.active{	background-position:-492px -67px;}
ul#navi-sub li#spielempfehlungen a.active{	background-position:-492px -92px;}
ul#navi-sub li#geschenkideen a.active{	background-position:-492px -117px;}

ul#navi-sub li#welchesspiel a.active:hover{	background-position:-738px 0;}
ul#navi-sub li#spielemieten a.active:hover{	background-position:-738px -42px;}
ul#navi-sub li#spieldesjahres a.active:hover{	background-position:-738px -67px;}
ul#navi-sub li#spielempfehlungen a.active:hover{	background-position:-738px -92px;}
ul#navi-sub li#geschenkideen a.active:hover{	background-position:-738px -117px;}

/* 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:	-242px; /* match ul width */
	top:	-11px;
}

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