﻿
.mainNav {}
.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul.sf-menu {}
.mainNav ul.sf-menu li {position: relative;}
.mainNav ul.sf-menu li a,
.mainNav ul.sf-menu li a:link,
.mainNav ul.sf-menu li a:visited {display:block; position:relative; text-decoration: none; }
.mainNav ul.sf-menu li a:hover,
.mainNav ul.sf-menu li a:active {}

.mainNav ul.sf-menu > li > a {}
.mainNav ul.sf-menu > li ul {}
.mainNav ul.sf-menu > li ul li {}

.mainNav .sf-menu > li > a, 
.mainNav .sf-menu > li > a:focus, 
.mainNav .sf-menu > li > a:hover, 
.mainNav .sf-menu > li > a:active, 
.mainNav .sf-menu > li > a:visited {}


/* 16px baseline (180px - 767px) */
@media only screen and (min-width:11.250em) and (max-width:47.938em) {	
	.outerContainer {position:relative; overflow-x: hidden;}
	.menuLink-wrapper {position: absolute; top: 6px; left: 20px; height:34px; width:42px; text-align:center;}
	
	.menuLink {
		cursor: pointer;
		display: inline-block;
		height: 25px;
		position: relative;
		vertical-align: middle;
		width: 25px;
		z-index: 9000;
	}
	.menuIcon {
		
		float: left;
		line-height: 38px !important;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.menuLink .menuIcon:before {
	    background: #ffffff;
		content: "";
		display: block;
		height: 2px;
		left: 0;
		position: absolute;
		top: -10px;
		-webkit-transition: transform 0.4s ease 0s;
		transition: transform 0.4s ease 0s;
		width: 25px;
	}
	
	
	
	
	.menuLink .menuIcon {
		background: #ffffff;
		content: "";
		display: block;
		height: 2px;
		left: 0;
		position: absolute;
		top: 50%;
		-webkit-transition: all 0.2s linear 0s;
		transition: all 0.2s linear 0s;
		width: 25px;
		color:#fff; font-size:0.70em; text-indent:-2px; text-transform:uppercase; font-weight:bold;
	}
	.menuLink .menuIcon:after {
	    background: #ffffff none repeat scroll 0 0;
		content: "";
		display: block;
		height: 2px;
		left: 0;
		position: absolute;
		top: 10px;
		-webkit-transition: transform 0.4s ease 0s;
		transition: transform 0.4s ease 0s;
		width: 25px;
	}
	.menuLink.activeMenu .menuIcon::before {left: 0;top: 0;-webkit-transform: rotate(45deg); transform: rotate(45deg); height:3px;}
	.menuLink.activeMenu .menuIcon{background: transparent none repeat scroll 0 0;}
	.menuLink.activeMenu .menuIcon::after {right: 0;top: 0;-webkit-transform: rotate(-45deg); transform: rotate(-45deg); height:3px;}
	.menuLink.menuIcon.activeMenu {background: url(/cms/images/layout/menuIcon-active.png) no-repeat center center;}
	
	.mainNavAll {background: #11689e}
	.mainNav {
		background: #11689e;
		font-family: 'Open Sans', Arial, sans-serif;
		height:auto; 
		position:absolute; 
		left:-80%; 
		top:0; 
		margin: 0;
		width:80%;
		z-index:100;
    }
	.mainNav:after {content: ''; display: block; position: absolute; right: 0; top: 0; width: 5px; height: 100%; -webkit-box-shadow:inset -8px 0 8px -8px rgba(1,1,1,0.5); box-shadow:inset -8px 0 8px -8px rgba(1,1,1,0.5); z-index: 101;}
	
	.mainNav ul.sf-menu {background: #0a4f81;}
	.mainNav .sf-menu > li {}
	.mainNav ul.sf-menu > li > a,
	.mainNav ul.sf-menu > li > a:link,
	.mainNav ul.sf-menu > li > a:visited {color: #ffffff; font-size: 1.125em; font-weight: 600;padding: 10px 15px; display: inline-block; position: relative;}
	
	.mainNav .sf-menu li .sf-sub-indicator {display: none;}
	.mainNav .sf-menu li .navMore {position: absolute; width: 30px; height: 30px;right: -30px}
	.mainNav .sf-menu li .navMore:after {
		border-left: 6px solid Transparent; 
		border-right: 6px solid Transparent; 
		border-top: 6px solid #ffffff; 
		right: 15px; 
		top: 12px; 
		width: 0; 
		height: 0;
		display:inline-block;
		position: absolute;
		content: '';
		z-index: 1;
	}
	.mainNav .sf-menu li.navActive .navMore {}
	.mainNav .sf-menu li.navActive .navMore:after {border-top: 0 none; border-bottom: 6px solid #ffffff;}
	
	.mainNav .sf-menu li.navActive li .navMore {width: 18px; height: 18px; background: url(/cms/images/layout/mob-nav-indicator.png) no-repeat center center; right: 15px; top: 8px; border: 0 none;}
	.mainNav .sf-menu li.navActive li.navActive .navMore  {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
	.mainNav .sf-menu li.navActive li .navMore:after {display: none;}
	
	.mainNav .sf-menu li.navActive li.navActive ul li .navMore {-webkit-transform: rotate(0); transform: rotate(0);}
	.mainNav .sf-menu li.navActive li.navActive ul li.navActive .navMore  {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
	
	.mainNav .sf-menu li ul {display: none !important; background: #083d63; border-top: 1px solid #062b46;}
	.mainNav .sf-menu .navActive > ul {display:block !important; visibility:visible !important;}
	.mainNav .sf-menu li ul a,
	.mainNav .sf-menu li ul a:link,
	.mainNav .sf-menu li ul a:visited {font-size: 1.063em; font-weight: 600; color: #ffffff; display: block; padding: 5px 35px 5px 15px; border-bottom: 1px solid #062b46;}
	.mainNav .sf-menu li ul > li:nth-child(even) > a {background: #073759;}
	
	.mainNav .sf-menu li ul ul {background: #282828;}
	.mainNav .sf-menu li ul ul li:nth-child(even) a {background: #333333;}
	.mainNav .sf-menu li ul ul a,
	.mainNav .sf-menu li ul ul a:link,
	.mainNav .sf-menu li ul ul a:visited {font-size: 1em; font-weight: 400; border-bottom: 0 none; padding-left: 20px}
	
	.mainNav .sf-menu li ul ul ul li a,
	.mainNav .sf-menu li ul ul ul li a:link,
	.mainNav .sf-menu li ul ul ul li a:visited {background: #000; font-size: 0.813em;}

	.mainNav .sf-menu a, .mainNav .sf-menu a:link, .mainNav .sf-menu a:visited {display: block;}
}

/* 16px baseline (768px) */
@media only screen and (min-width:48em) {	
	.mainNav {min-height: 0 !important;}
    .navMore,
	.menuLink {display: none;}
	.mainNavAll {float:left; display:block; position:relative;height:52px;width: 100%;background: url(/cms/images/layout/mainNavAll.png) no-repeat center top; margin: 5px 0 0}

	/* navigation */

	.mainNav {float:left; display:block; position:relative; min-height:1px; margin-bottom:0px; z-index:100;}
	.mainNav ul {margin: 0px 0px 0px 0px; padding:0; border-bottom-left-radius:3px; border-bottom-right-radius:3px;}
	.mainNav > ul > li > a {text-transform:normal;}
	.mainNav li:first-child {background: none;}
	.mainNav li {float:left; margin-left:0px; margin-right:0px; background: url(/cms/images2/navdev.png) no-repeat left 1px;}
	.mainNav li:last-child {border-right:none;}
	.mainNav li li {background: none; margin-left:0px; margin-right:0px; }
	.mainNav a, .mainNav a:link, .mainNav a:visited {display:block;}
	.mainNav a:hover, .mainNav a:active {background-position:0 0;}
	.mainNav a.active, .mainNav a.active:link, .mainNav a.active:visited {background-position:0 0;}

	.mainNav ul li.lastnavitemli ul {margin-left:0px;}
	.mainNav ul li.lastnavitemli ul ul {margin-left:-430px;}
	
	/*** ESSENTIAL STYLES ***/
	.sf-menu, .sf-menu * {margin:0; padding:0; list-style:none;}
	.sf-menu {line-height:1.0;}
	.sf-menu ul {position:absolute;	top:-999em;	width:215px; /* left offset of submenus need to match (see below) */}
	.sf-menu ul li {width:100%;}
	.sf-menu li:hover {	visibility:inherit; /* fixes IE7 'sticky bug' */}
	.sf-menu li {float:left; position:relative;}	
	.sf-menu a {display:block; position:relative;}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {left:0px;top:51px; /* match top ul list item height */z-index:99;}
	.sf-menu > li.sfHover:first-child > ul {left:0px;}
	ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {	top:-999em;	}
	ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:215px; /* match ul width */top:0px;}
	ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { left:215px; /* match ul width */top:-999em;}
	ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left:215px; /* match ul width */	top:0;}
	
	ul.sf-menu li:last-child li:hover ul, 
	ul.sf-menu li:last-child li.sfHover ul,
	ul.sf-menu li:last-child li:hover li ul, 
	ul.sf-menu li:last-child li.sfHover li ul,
	ul.sf-menu li:last-child li li:hover ul, 
	ul.sf-menu li:last-child li li.sfHover ul,
	ul.sf-menu li:nth-last-child(3) li:hover ul, 
	ul.sf-menu li:nth-last-child(3) li.sfHover ul,
	ul.sf-menu li:nth-last-child(3) li:hover li ul, 
	ul.sf-menu li:nth-last-child(3) li.sfHover li ul,
	ul.sf-menu li:nth-last-child(3) li li:hover ul, 
	ul.sf-menu li:nth-last-child(3) li li.sfHover ul {right:215px; left: auto;}
	
	
	.sf-shadow ul {	background:	url('/cms/images/layout/menu/shadow.png') no-repeat bottom right;padding:0 9px 9px 0;}
	.sf-shadow ul.sf-shadow-off {background: transparent;}
	.sf-menu a.sf-with-ul {	padding-right:2.25em;min-width:1px; /* trigger IE7 hasLayout so spans position accurately */}
	.sf-sub-indicator {
		position:absolute;
		display:block;
		right:.75em;
		top:1.09em; /* IE6 only */
		width:10px;
		height:10px;
		text-indent:-999em;
		overflow:hidden;
		background:url(/cms/images/layout/arrow_right.png) no-repeat center right;
	}
	a > .sf-sub-indicator {  /* give all except IE6 the correct values */top:.8em;background-position:0 -100px; /* use translucent arrow for modern browsers*/}
	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; /* arrow hovers for modern browsers*/}
	.sf-menu ul .sf-sub-indicator {background-position: 0px 0;}
	.sf-menu ul a > .sf-sub-indicator {background-position: 0 0;}
	.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: 0px 0; /* arrow hovers for modern browsers*/}

	/*** QUICK VIEW SKIN ***/
	
	.quickView .sf-menu {float:left;}
	.quickView .sf-menu a,
	.quickView .sf-menu a:link,
	.quickView .sf-menu a:visited {height:51px; text-decoration:none; text-indent:-9999em;}
	
	 /* visited pseudo selector so IE6 applies text colour*/
	.quickView .sf-menu a,
	.quickView .sf-menu a:visited  {color:#13a;}
	.quickView .sf-menu li {}
	.quickView .sf-menu li ul {background-color:#fff; border:1px solid #bfbfbf;}
	.quickView .sf-menu li li {background-color:#fff;}
	.quickView .sf-menu li li li {}
	
	.quickView .sf-menu li li a,
	.quickView .sf-menu li li a:link,
	.quickView .sf-menu li li a:visited {height:auto; padding:5px 10px; text-indent:0; background:url(/cms/images/layout/arrow_right.png) no-repeat center right;}
	
	.quickView .sf-menu li.sfHover a {background-position:0 0px;}


	.quickView .sf-menu li li a:hover,
	.quickView .sf-menu li li a:active {background-position:3px 8px;}
	
	.quickView .sf-menu li:hover,
	.quickView .sf-menu li.sfHover,
	.quickView .sf-menu a:focus,
	.quickView .sf-menu a:hover,
	.quickView .sf-menu a:active {outline:0;}
	
	
	.mainNav .sf-menu {display:block; float:left;}
	.mainNav .sf-menu a,
	.mainNav .sf-menu a:link,
	.mainNav .sf-menu a:visited {text-decoration:none;}
	
	 /* visited pseudo selector so IE6 applies text colour*/
	.mainNav .sf-menu a,
	.mainNav .sf-menu a:visited  {}
	.mainNav .sf-menu > li > a, 
	.mainNav .sf-menu > li > a:focus, 
	.mainNav .sf-menu > li > a:hover, 
	.mainNav .sf-menu > li > a:active, 
	.mainNav .sf-menu > li > a:visited {
		display:block; 
		height:36px;
		color:#ffffff; 
		font-weight: 600; 
		font-family: 'Open Sans', Arial, sans-serif; 
		font-size: 1em; 
		padding: 16px 14px 0px 14px; 
		line-height: 17px; 
		text-transform:uppercase; 
		text-shadow: 1px 1px #000000; 
		letter-spacing:0px;
	}
	.mainNav .sf-menu > li > a:hover, 
	.mainNav .sf-menu > li.sfHover > a {background:url(/cms/images/layout/sfHover.gif) left top; color:#ffffff;}
	.mainNav .sf-menu > li+li > a {margin-left:0px;}
	
	.mainNav .sf-menu li ul {background:#31657d; padding-top:0px; padding-bottom:0px;}
	.mainNav .sf-menu li li { border-bottom: 1px solid #568398;}
	.mainNav .sf-menu li li li {}
	
	.mainNav .sf-menu li li a,
	.mainNav .sf-menu li li a:link,
	.mainNav .sf-menu li li a:visited {height:auto; padding:10px 15px; text-indent:0; background:url() no-repeat center right; font-weight:normal; color:#fff !important; font-size: 0.813em; text-shadow: 1px 1px #000000;}
	
	.mainNav .sf-menu li.sfHover a {background-position:0 0px;}

	.mainNav .sf-menu li li a:hover,
	.mainNav .sf-menu li li a:active {color:#fff;}
	
	.mainNav .sf-menu > li li > a:hover, 
	.mainNav .sf-menu > li li.sfHover > a {background-color:#0d4e6c; color:#4bbef4 !important;}
	
	.mainNav .sf-menu li:hover,
	.mainNav .sf-menu li.sfHover,
	.mainNav .sf-menu a:focus,
	.mainNav .sf-menu a:hover,
	.mainNav .sf-menu a:active {outline:0;}

	.mainNav li.on a {background:url(/cms/images/layout/sfHover.gif) left top; color:#ffffff;}

	li.mND {float:left; background: url(/cms/images/layout/mnavdev.png) no-repeat right center; width:2px; height:50px;}
	li.mND:last-child {background:none; display:none;}	
}

/* 16px baseline (861px) */
@media only screen and (min-width: 53.813em) {
	.mainNav .sf-menu > li > a, 
	.mainNav .sf-menu > li > a:focus, 
	.mainNav .sf-menu > li > a:hover, 
	.mainNav .sf-menu > li > a:active, 
	.mainNav .sf-menu > li > a:visited {font-size: 1.063em; padding: 16px 20px 0px 20px; }
}

/* 16px baseline (960px) */
@media only screen and (min-width: 60.000em) {
	.mainNav .sf-menu > li > a, 
	.mainNav .sf-menu > li > a:focus, 
	.mainNav .sf-menu > li > a:hover, 
	.mainNav .sf-menu > li > a:active, 
	.mainNav .sf-menu > li > a:visited {padding: 16px 21px 0px 21px; }

}



/*283705*/

.menuLink .menuIcon {top:37%;}
.menuLink .menuIcon:before {top: -5px;}
.menuLink .menuIcon:after {top: 5px;}