/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
 margin:0;
 padding:0;
 list-style:none;
}
.sf-menu li {
 position:relative;
}
.sf-menu ul {
 background:#020202;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 -o-border-radius:7px;
 -webkit-opacity:0.95;
 -moz-opacity:0.95;
 filter:alpha(opacity=95);
 position:absolute;
 display:none;
 top:100%;
 left:0;
 z-index:99;
}
.sf-menu > li {
 float:left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
 display:block;
}

.sf-menu a {
 display:block;
 position:relative;
}
.sf-menu ul ul {
 /*background:#efefef;*/
 top:0;
 left:100%;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 -o-border-radius:7px;
}


/*** DEMO SKIN ***/
.sf-menu {
 float:left;
 margin-bottom:1em;
}
.sf-menu ul {
 min-width:0; /* allow long menu items to determine submenu width */
 *width:0; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
 padding:.75em 1em;
 text-decoration:none;
 zoom:1; /* IE7 */
}
.sf-menu a {
 color:#020202;
}
.sf-menu li {
 white-space:nowrap; /* no need for Supersubs plugin */
 *white-space:normal; /* ...unless you support IE7 (let it wrap) */
 -webkit-transition:background .2s;
 transition:background .2s;
}
.sf-menu ul li {
 background:#020202;
 -webkit-opacity:1;
 -moz-opacity:1;
 filter:alpha(opacity=100);
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 -o-border-radius:7px;
}
.sf-menu ul ul li {
 background:#efefef;
 -webkit-opacity:1;
 -moz-opacity:1;
 filter:alpha(opacity=100);
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 -o-border-radius:7px;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
 /*background:#c00;*/
 /* only transition out, not in */
 -webkit-transition:none;
 transition:none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
 padding-right:1.1em;
 *padding-right:1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
 content:'';
 position:absolute;
 top:50%;
 right:0;
 margin-top:-3px;
 height:0;
 width:0;
 /* order of following 3 rules important for fallbacks to work */
 border:5px solid transparent;
 border-top-color:#efefef; /* edit this to suit design (no rgba in IE8) */
 border-top-color:rgba(239,239,239,.6);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
 border-top-color:#fff; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
 margin-top:-5px;
 margin-right:-3px;
 border-color:transparent;
 border-left-color:#efefef; /* edit this to suit design (no rgba in IE8) */
 border-top-color:rgba(239,239,239,.6);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
 border-left-color:#fff;
}
