/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	250px;
	font-family: Helvetica, Arial, Verdana;
	font-size: 18px;
	color: #bababa;
	text-align: left;

}
.sf-vertical li a {
	
	font-family: Helvetica, Arial, Verdana;
	font-size: 18px;
	color: #bababa;
	text-align: left;

}
/* 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:	120px; /* match ul width */
	top:	0;
	width: 230px;
	background:		#181616;
	padding: 10px;
	padding-top: 15px;	
	
	
}

.sf-vertical li.sfHover ul li{
	*background-image: url(../imatges/flechita_menu.png);
	*background-repeat: no-repeat;
	*background-psition: 5px 5px;
	list-style-image: url(../imatges/flechita_menu.png);
	margin-left: 20px;
	*margin-left: 0;
	*padding-left: 20px;
	*line-height: 1;
	width: 220px;
}
.sf-vertical li.sfHover ul li a{
	color: #bababa;
	
}
#sample-menu-3 {
*margin-top: 0;
}
#sample-menu-3 a {
color: #bababa;
}
#sample-menu-4 a {
color: #bababa;
}

#sample-menu-4  li{
margin-left: 23px !important;

}

.sf-vertical li:hover, .sf-vertical li.sfHover,
.sf-vertical a:focus, .sf-vertical a:hover, ..sf-vertical a:active {
      
       z-index: 1;
}