/*** ESSENTIAL STYLES ***/
.sf-menu, 
.sf-menu * {margin: 0;padding: 0;list-style: none;}
.sf-menu li {position: relative;}
.sf-menu ul {position: absolute;display: none;z-index: 99;}
.sf-menu > li {float: left;padding: 0 18px;}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {display: block;}
.sf-menu a {display: block;position: relative;}
.sf-menu ul ul {top: 0;left: 100%;}
/*** DEMO SKIN ***/
.sf-menu {float: left;}

.sf-menu ul {
    -webkit-box-shadow: 2px 2px 6px #000000;
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    -ms-box-shadow: 2px 2px 6px #000000;
    -ms-box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 6px #000000;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    -moz-min-width: 12em;
    -ms-min-width: 12em;
    -o-min-width: 12em;
    -webkit-min-width: 12em;
    min-width: 12em; /* allow long menu items to determine submenu width */*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}

.sf-menu a {color: #333;font-size: 14px;padding: 4px 0;text-decoration: none;text-transform: uppercase;font-family: "UVNHongHaHepBold";zoom: 1; /* IE7 */}
.sf-menu li {
    white-space: nowrap;font-weight: bold; /* no need for Supersubs plugin */*white-space: normal; /* ...unless you support IE7 (let it wrap) */-webkit-transition: background .2s;
    -moz-transition: background .2s;
    -ms-transition: background .2s;
    -o-transition: background .2s;
    transition: background .2s;
}

.sf-menu ul li {background: #326e78;background: rgba(50, 110, 120, 0.9);}

/*.sf-menu ul ul li {background: #9AAEDB;}*/
.sf-menu li:hover,
.sf-menu li.sfHover{ /* only transition out, not in */-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}

.sf-menu li.sfHover a,
.sf-menu li:hover a { color: #d82f2f;background: url(bg_bottomMenu.png) bottom repeat-x;}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {padding-right: 2.5em;*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: 1em;margin-top: -3px;height: 0;width: 0;/* order of following 3 rules important for fallbacks to work */border: 5px solid transparent;border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */border-top-color: rgba(255,255,255,.5);}
.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: white; /* 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: #dFeEFF; /* edit this to suit design (no rgba in IE8) */border-left-color: rgba(255,255,255,.5);}
.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: white;}