.sf-menu, .sf-menu *{margin:0;padding:0;list-style:none;}
.sf-menu li{position:relative;}
.sf-menu ul{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{top:0;left:100%;}
.sf-menu{float:left;}
.sf-menu ul{box-shadow:2px 2px 6px rgba(0,0,0,.2);min-width:12em;*width:12em;}
.sf-menu a{color:#fff;padding:.75em 1em;text-decoration:none;font:1.2em Arial;text-transform:uppercase;zoom:1;}
.sf-menu li li a ,.sf-menu li li li a{border-bottom:1px solid #41bbc4;text-transform:none;margin:auto 5px;}
.sf-menu li li:last-child > a{border-top:none;}
.sf-menu li{background:#20aeb9;white-space:nowrap;*white-space:normal;-webkit-transition:background 0s;transition:background 0s;}
.sf-menu ul li{background:#20aeb9;min-width:14em;}
.sf-menu li:hover,
.sf-menu li.sfHover{background:#20aeb9;-webkit-transition:none;transition:none;}
.sf-menu li li:hover,
.sf-menu li li.sfHover{background:#1799a3;}
.sf-arrows .sf-with-ul{padding-right:2em;*padding-right:1em;}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;right:.5em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#dFeEFF;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;}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:#dFeEFF;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;}

/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  min-width: 12em; max-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 {
  width: 100%;
}

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

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
	background: #BDD2FF;
	position: relative;
	margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;
	background-color: #BDD2FF;
	height: 200%;
	width: 100%;
}
.sf-navbar ul {
	box-shadow: none;
}
.sf-navbar li {
	background: #AABDE6;
	position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
	border: none;
}
.sf-navbar > li > ul {
	min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
	background: #BDD2FF;
	position: relative;
}
.sf-navbar ul ul {
	left: 0;
	top: 100%;
}
.sf-navbar ul ul li {
	width: 100%;
}
.sf-navbar > li > ul > li {
	float: left;
}
.sf-navbar li.current {
	background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
	background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
	background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
	background: #E6EEFF;
}
.sf-navbar ul li.current > a {
	font-weight: bold;
}

/*** point all arrows down ***/
.sf-arrows.sf-navbar ul .sf-with-ul:after {
	margin-top: -3px;
	margin-right: 0;
	border-color: transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}

.sf-arrows.sf-navbar ul > li > .sf-with-ul:focus:after,
.sf-arrows.sf-navbar ul > li:hover > .sf-with-ul:after,
.sf-arrows.sf-navbar ul > .sfHover > .sf-with-ul:after {
	border-color: transparent;
	border-top-color: white;
}


/*** ESSENTIAL STYLES ***/
.sf-megafish {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-megafish .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}
.sf-megafish > li {
  float: left;
}
.sf-megafish li:hover > .sf-mega,
.sf-megafish li.sfHover > .sf-mega {
  display: block;
}

.sf-megafish > li > a {
  display: block;
  position: relative;
}


/*** DEMO SKIN ***/
.sf-megafish {
  float: left;
  
  width: 100%;
}
.sf-megafish .sf-mega {
  box-shadow: 2px 3px 6px rgba(0,0,0,.2);
  width: 100%; /* allow long menu items to determine submenu width */
}
.sf-megafish .sf-mega.sf-mega-overflow-y{
	
}
.sf-megafish > li > a {   
  text-decoration: none;
  zoom: 1; /* IE7 */
  color: #13a;
}
.sf-megafish > li {
  background: #BDD2FF;
  -webkit-transition: background 0s;
  transition: background 0s;
  position: static;
}
 
.sf-megafish li:hover,
.sf-megafish li.sfHover{background:#20aeb9;-webkit-transition:none;transition:none;}
/*** mega menu dropdown ***/
.sf-megafish .sf-mega {
  background-color: #fff;
  padding: 1em;
  box-sizing: border-box;
  width: 100%;
}
.sf-megafish .sf-mega-section {
  float: left;
  width: 8em; /* optional */
  padding: 0 1em 1em 0;
  margin-right: 1em;
  border-right: 1px solid #b4c8f5;
}


/*** arrows (for all except IE7) **/
.sf-megafish .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-megafish .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-megafish .sf-arrows > li > .sf-with-ul:focus:after,
.sf-megafish .sf-arrows > li:hover > .sf-with-ul:after,
.sf-megafish .sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: white; /* IE8 fallback colour */
}