/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  width:100%;
  /* If you want the width of the closed menu to expand to its
  widest top-level menu item (like its "Supersubs" submenus do),
  replace the width rule above with the following two rules. */

  /*
  min-width: 12em;
  *width: 12em;
  */
}
.sf-vertical ul {
	left:	100%;
	top: 0;
}
.sf-vertical > li {
  float: none;
}
.sf-vertical li {
 
}

/*** alter arrow directions ***/
.sf-vertical.sf-arrows > li > .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-left-color: rgba(255,255,255,.5);
}
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
  border-left-color: white;
}

.sf-menu.sf-vertical li:nth-child(6n+1) a{
	border-bottom:1px solid #fff200;	
}
.sf-menu.sf-vertical li:nth-child(6n+2) a{
	border-bottom:1px solid #82c20b;	
}
.sf-menu.sf-vertical li:nth-child(6n+3) a{
	border-bottom:1px solid #1bbefb;	
}
.sf-menu.sf-vertical li:nth-child(6n+4) a{
	border-bottom:1px solid #8e45d2;	
}
.sf-menu.sf-vertical li:nth-child(6n+5) a{
	border-bottom:1px solid #ff1d24;	
}
.sf-menu.sf-vertical li:nth-child(6n+6) a{
	border-bottom:1px solid #ffb700;	
}
.sf-menu.sf-vertical ul li a{
	border-bottom:none !important;	
}


.sf-menu.sf-vertical li{
	padding:0 16px;	
}
.sf-menu.sf-vertical a {
	font:normal 1.056em 'open_sans_lightregular';
	text-shadow:0 2px 0 #000;
	padding:.25em 0 0.25em;
	text-align:center;
}
.sf-menu.sf-vertical li:hover,
.sf-menu.sf-vertical li.sfHover,
.sf-menu.sf-vertical li.selected {
	/* only transition out, not in */
	background-color:#4f5255;	
}
.sf-menu.sf-vertical li:hover a,
.sf-menu.sf-vertical li.sfHover a,
.sf-menu.sf-vertical li.selected a{
	color:#dadbdd;
}
.sf-menu.sf-vertical ul{
	-moz-box-shadow:inset 8px 0 10px 0 #000;
    -webkit-box-shadow:inset 8px 0 10px 0 #000;
    box-shadow:inset 8px 0 10px 0 #000;
}
.sf-menu.sf-vertical ul li{
	padding:0 10px;		
}
.sf-menu.sf-vertical ul li a{
	text-transform:uppercase;	
	padding: 0.3em 0 !important;
}
@media (max-width: 767px) {
	.sf-menu.sf-vertical li, .sf-menu.sf-vertical ul li, .sf-menu.sf-vertical ul ul li{
   	   padding-top:5px;	
    }	
	.sf-menu.sf-vertical ul li:nth-child(6n+1) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+1) a{
     	border-bottom:1px solid #fff200 !important;	
	}
	.sf-menu.sf-vertical ul li:nth-child(6n+2) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+2) a{
		border-bottom:1px solid #82c20b !important;	
	}
	.sf-menu.sf-vertical ul li:nth-child(6n+3) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+3) a{
		border-bottom:1px solid #1bbefb !important;	
	}
	.sf-menu.sf-vertical ul li:nth-child(6n+4) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+4) a{
		border-bottom:1px solid #8e45d2 !important;	
	}
	.sf-menu.sf-vertical ul li:nth-child(6n+5) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+5) a{
		border-bottom:1px solid #ff1d24 !important;	
	}
	.sf-menu.sf-vertical ul li:nth-child(6n+6) a, .sf-menu.sf-vertical ul ul li:nth-child(6n+6) a{
		border-bottom:1px solid #ffb700 !important;	
	}
	
	.sf-menu.sf-vertical li:hover,
	.sf-menu.sf-vertical li.sfHover,
	.sf-menu.sf-vertical li.selected {
		/* only transition out, not in */
		background:none;	
	}
}