/*================================================================
				SUPERFISH MENU ESSENTIAL STYLES
================================================================*/

/* Make sure to use specificity below rather than changing these styles*/
.sf-menu,
.sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sf-menu {
	line-height: 1.0;
}

.sf-menu ul {
	position: absolute;
	top: 57px;
	width: 14em; /* left offset of submenus need to match (see below) */
}

.sf-menu ul li {
	width: 100%;
}

.sf-menu li {
	float: left;
}

.sf-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu a {
	display: block;
	position: relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: 0;
	top: 33px; /* match top ul list item height */
	z-index: 99;
}

.sf-menu li:hover li ul,
.sf-menu li.sfHover li ul {
	top: 57px;
}

.sf-menu li li:hover ul,
.sf-menu li li.sfHover ul {
	left: 14em; /* match ul width */
	top: 0;
}

.sf-menu li li:hover li ul,
.sf-menu li li.sfHover li ul {
	top: 57px;
}

.sf-menu li li li:hover ul,
.sf-menu li li li.sfHover ul {
	left: 14em; /* match ul width */
	top: 0;
}

/* shadows for all but IE6 */
.sf-shadow ul {
	background: url(/cms/images/layout/menu/shadow.png) no-repeat bottom right;
	padding: 0 9px 9px 0;
}

.sf-shadow .sf-shadow-off {
	background: transparent;
}

/* arrows */
.sf-menu a.sf-with-ul {
	padding-right: 2.25em;
	min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}

.sf-sub-indicator {
	display: block;
	position: absolute;
	right: 0.75em;
	top: 0.8em;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
	background: url(/cms/images/arrows-ffffff.png) no-repeat 0 -100px;
}

a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px;
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator {
	background-position: -10px 0;
}

.sf-menu ul a > .sf-sub-indicator {
	background-position: 0 0;
}

/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers */
}


/*================================================================
						MAIN MENU SKIN
================================================================*/
.mainNav {
	position: relative;
	z-index: 99999999;
	font-size: 0.8em;
	clear: both;
}

.mainNav ul {
	margin: 0;
	padding: 0;
}

.icon-menu {
	display: block;
	float: right;
	font-size: 1.8em;
	padding: 30px 0 2%;
	margin: -95px 5% 0 0;
}

/* Temporary clearfix since we don't actually have a clearfix on sf-menu ( ONLY USE IF SWITCHING TO FLOATS ) */
.mainNav .sf-menu:before,
.mainNav .sf-menu:after {
	content: "";
	display: table;
}

.mainNav .sf-menu:after {
	clear: both;
}

.mainNav .sf-menu {
	zoom: 1;
}

/* Main Tier */
.mainNav .sf-menu {
	display: none;
	float: right;
	width: 100%;
	background: #333;
	-webkit-transition: padding 0.2s linear;
	   -moz-transition: padding 0.2s linear;
		 -o-transition: padding 0.2s linear;
			transition: padding 0.2s linear;
}
.mainNav .sf-menu li {
	float: none;
	-webkit-transition: padding 0.2s linear;
	   -moz-transition: padding 0.2s linear;
		 -o-transition: padding 0.2s linear;
			transition: padding 0.2s linear;
}

.mainNav .sf-menu a {
	display: block;
	padding: 10px 5%;
	font-family: verdana, arial, sans-serif;
	font-size: 1em;
	color: #fff;
	text-transform: uppercase;
	text-align: right;
}

.mainNav .sf-menu a.on,
.mainNav .sf-menu a:hover,
.mainNav .sf-menu a:focus,
.mainNav .sf-menu a:active {
	color: #9ba190;
	text-decoration: none;
}

.mainNav .sf-menu li span {
	display: block;
	float: right;
	margin: -2px 0 0 5px;
	padding: 5px;
	width: 15px;
	height: 10px;
	font-family: arial;
	font-weight: bold;
	text-align: center;
	text-indent: -99999em;
	color: #fff;
	line-height: 11px;
	background: url(/content/images/navdrop.png) no-repeat 5px 0;
}

.mainNav .sf-menu li span.open {
	background-position: 5px -20px;
}

.mainNav .sf-menu li li span {
	margin: -25px 5% 0 0;
}

/* Sub Tier */
.mainNav .sf-menu li .subMenu {
	position: relative;
}

.mainNav .sf-menu li:hover .subMenu > ul,
.mainNav .sf-menu li.sfHover .subMenu > ul {
	top: 60px;
}

.mainNav .sf-menu li ul {
	min-width: 100%;
}

.mainNav .sf-menu li li {
	border-top: 1px solid #999;
}

.mainNav .sf-menu li li:first-child {
	border-top: 0;
}

.mainNav .sf-menu li li a {
	padding: 10px;
	height: auto;
	color: #fff;
	text-decoration: none;
}

/* Sub Sub Tier */
.js .mainNav .sf-menu li li ul {
	display: none;
	visibility: hidden;
}

.mainNav .sf-menu li li:hover > ul,
.mainNav .sf-menu li li.sfHover > ul {
	top: 0;
	left: 100%;
}

.mainNav .sf-menu li li.sfHover > a,
.mainNav .sf-menu li li a:hover,
.mainNav .sf-menu li li a:focus,
.mainNav .sf-menu li li a:active {
	color: #828488;
}

.mainNav .sf-menu li > a:active {
	background: transparent !important;
}

/* last Nav Item Adjustments */
.mainNav .sf-menu .lastnavitemli .subMenu > ul {
	left: auto;
	right: 0;
}

.mainNav .sf-menu .lastnavitemli li:hover > ul,
.mainNav .sf-menu .lastnavitemli li.sfHover > ul {
	left: auto;
	right: 100%;
}

/* ------- Mega Menu adjustments ----------- */
.megaMenu .sf-menu > li > a {
	display: table;
	margin: 5px 0;
	padding: 2%;
	width: 96%;
	height: auto;
	background: transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-transition: background 0.33s ease-in, color 0.3s linear;
	   -moz-transition: background 0.33s ease-in, color 0.3s linear;
		 -o-transition: background 0.33s ease-in, color 0.3s linear;
			transition: background 0.33s ease-in, color 0.3s linear;
}
.megaMenu .sf-menu > li > a .menuText {
	display: table-cell;
	padding: 10px;
	height: 40px;
	vertical-align: middle;
	text-align: center;
}

.megaMenu .sf-menu li .subNav {
	display: none;
	left: 0;
	padding: 0 2%;
	margin-top: 7px;
	min-width: 0;
	width: 96%;
	z-index: 999999;
	overflow: hidden;
}

.megaMenu .sf-menu li ul {
	position: static;
	width: 100%;
	min-width: 100%;
}

.megaMenu .sf-menu li ul:first-child {
	width: 100%;
	min-width: 100%;
	border-left: 0;
}

.megaMenu .sf-menu li ul ul {
	display: none;
	visibility: visible !important;
	min-width: 100%;
	width: auto;
	margin: 10px 0;
}

.megaMenu .sf-menu li ul:first-child ul {
	border-left: 0;
}

.megaMenu .sf-menu li li {
	float: left;
	border: 0;
	margin: 0 1%;
	width: 100%;
}

.megaMenu .sf-menu li li a {
	padding: 5px 6.1em 5px 10px;
	text-align: right;
	text-transform: none;
	font-size: 0.9em;
	font-weight: bold;
	font-family: arial, sans-serif;
}

.megaMenu .sf-menu li li strong {
	display: block;
	padding: 10px 6.2em 10px 0;
	text-align: right;
	font-family: verdana, arial, sans-serif;
	color: #3b964b;
	font-size: 0.9em;
}

.megaMenu .sf-menu li li li {
	float: none;
	border: 0;
	margin: 0;
	width: 100%;
}

.megaMenu .sf-menu li li li a {
	border-bottom: 0;
}

@media only screen and (min-width:42em) {
	.icon-menu {
		display: none;
	}

	.mainNav {
		margin: 0;
		clear: none;
	}

	.mainNav .sf-menu li.first,
	.mainNav .sf-menu li.first + li,
	.mainNav .sf-menu li.first + li + li,
	.mainNav .sf-menu li.splitBefore {
		border-bottom: 1px solid #959595;
	}

	.megaMenu .sf-menu li li span {
		display: none;
	}

	.megaMenu .sf-menu li ul {
		width: 29%;
		min-width: 29%;
		margin-right: 1%;
		float: left;
	}

	.megaMenu .sf-menu li ul:first-child {
		width: 35%;
		min-width: 35%;
	}

	.megaMenu .sf-menu li ul ul {
		border-left: 1px solid #fff;
		display: block !important;
		margin: 0;
	}

	.mainNav .sf-menu {
		display: inline-block;
		margin-top: 8px;
		background: transparent;
	}

	.mainNav .sf-menu a {
		text-align: center;
		padding: 0 0 10px;
	}

	.megaMenu .sf-menu > li > a {
		margin: 5px 0;
		padding: 5px;
		width: 100%;
	}

	.megaMenu .sf-menu li .subNav {
		position: absolute;
		top: 65px;
		background: #9ba190;
		padding: 2%;
	}

	.megaMenu .sf-menu li:hover .subNav,
	.megaMenu .sf-menu li.sfHover .subNav {
		top: 65px;
	}

	.mainNav .sf-menu > li {
		float: left;
		clear: none;
		width: 25%;
	}

	.megaMenu .sf-menu li li strong,
	.megaMenu .sf-menu li li a {
		text-align: left;
	}

	.megaMenu .sf-menu li li strong {
		color: #393d54;
		padding: 5px 10px;
	}

	.megaMenu .sf-menu li li a {
		padding: 5px 10px;
		line-height: 1.3em;
	}

	.mainNav .sf-menu li.sfHover > a {
		background: #9ba190;
		color: #fff;
	}
}

@media only screen and (min-width:61.5em) {
	.mainNav .sf-menu {
		width: 95%;
	}

	.mainNav .sf-menu > li.first,
	.mainNav .sf-menu > li.splitAfter {
		width: 22%;
		clear: both;
		margin-left: 3%;
	}

	.megaMenu .sf-menu > li > a {
		text-align: left;
	}

	.mainNav .sf-menu li a span {
		margin: -4px 6px 0 0;
		display: inline-block;
		float: none;
	}
}