/*= Flex Navigation
=======================================================*/
nav { width: 100%; z-index: 50; }

[role='navigation'] { margin: 0 auto; padding: 0; width: 100%; }

.js [role='navigation'] { display: none; }

.nav-button { display: block; padding: 1em; background: none; font-size: .875em; font-weight: 700; color: #fff; background: #175bd2 url("/images/layout/bg-menu-button.jpg") repeat-x right bottom; }

[role='navigation']:after { /* clearfix */ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;  }



/*= Top Level
=======================================================*/
[role='navigation'] li {
	z-index:50;
	background: #175bd2 url("/images/layout/bg-nav.jpg") left bottom repeat-x;
	position: relative;
	list-style: none;
	display: block;
	width:100%;
	font-size:.9em;
	/*font-size:14px;*/
	font-weight:500;
	text-shadow: 1px 1px 2px #1a5ed5;
	text-align: center;
}

[role='navigation'] li a { margin: 0; display: block; color: #fff; text-decoration: none; z-index: 50; }

[role='navigation'] li a:hover, [role='navigation'] ul li a:hover { background: #0948b5 url("/images/layout/bg-nav-over.png") no-repeat right bottom; }

[role='navigation'] .top-level a, [role='navigation'] ul li a {
	position: relative;
	display: block;
	background: #175bd2 url("/images/layout/bg-nav-out.png") no-repeat bottom right;
	padding:.7em .05em;
	z-index: 50;
	height:100%;
}

[role='navigation'] .last-item { border-right: none; }

[role='navigation'] .first-item { border-left: none; }



/*= Second Level
=======================================================*/
[role='navigation'] li ul { width: 100%; position: relative; }

[role='navigation'] li ul li { float: none; width: 100%; text-align: left; }

[role='navigation'] li ul.sub-menu li a { background: #0d56bd; background-image: none; display: block; font-size: 1em; font-weight: 400; padding:10px 7px; }

[role='navigation'] li ul li a:hover { background: #fff; background-image: none; color: #00aeef; text-shadow: none; }

[role='navigation'] ul.sub-menu {
	width: 125%;
	background: #0d56bd url("/images/layout/bg-sub-menu.jpg") top repeat-x;
	display: none;
	margin: 0;
	padding: 5% 0;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	border: 1px solid #0948b5;
	height: auto;
}



/*= Smaller Screens
=======================================================*/

@media only screen and (max-width: 1000px) {
	[role='navigation'] .top-level a,
	[role='navigation'] ul li a { padding-left: .15em; padding-right: .15em; }
}

@media all and (min-width: 769px) {

	.row .fourcol.search-social { padding-top: 61px; padding-right:10px; text-align: right; float: right; width:34%; margin-right:0px; }

	.js [role='navigation'] { display: block; }

	.nav-button{ display: none; }

	[role='navigation'] li, [role='navigation'] ul li {
		position: relative;
		list-style: none;
		float: left;
		display: block;
		width: 16.15%;
		/*width: 16.666666667%;*/
		min-width:80px;
	}

	.no-touch [role='navigation'] li ul, [role='navigation'] ul li ul {
		position: absolute;
		top: auto;
		left: 0;
		opacity: 0;
		visibility: hidden;
		z-index: 50;
		-webkit-transition: .25s opacity ease;
		-moz-transition: .25s opacity ease;
		-o-transition: .25s opacity ease;
		-ms-transition: .25s opacity ease;
		transition: .25s opacity ease;
	}

	[role='navigation'] li ul li a, [role='navigation'] ul li ul.sub-menu li a { border-bottom: none; }

	.touch [role='navigation'] li ul.sub-menu, [role='navigation'] ul li ul.sub-menu { position: absolute; top: auto; left: 0; display: block; z-index: 50; }

	.no-touch .item-with-ul:hover > ul, .no-touch [role='navigation'] ul li:hover > ul {
		visibility: visible;
		opacity: 1;
		display: block;
	}

}

/*= Browsers
=======================================================*/
@media only screen and (max-width: 1000px) and (min-width: 767px) {

	.webkit [role='navigation'] li { font-size: .85em;  }

	.webkit [role='navigation'] .top-level a { padding: .7em; z-index: 50; }

	.row .fourcol.search-social { padding-top: 14px; padding-right:1px; text-align: right; float: right; width:67%; margin-right:0px; padding-left: 25px;}

	.top-nav.fourcol { width: 71.25%; }

}

/*= Mobile
=======================================================*/
@media handheld, only screen and (max-width: 768px) {

	.nav-button { font-size: 1.5em; background: url("/images/layout/button-menu-toggle.png") no-repeat right bottom; }

	[role='navigation'] li, [role='navigation'] ul { background: #175bd2; position: relative; list-style: none; display: block; width: 100%; font-size: .875em; font-weight: 600; text-shadow: 1px 1px 2px #1a5ed5; text-align: center; }

	[role='navigation'] li.item-with-ul, [role='navigation'] ul li.menu-item { background: #175bd2 url("/images/layout/button-arrow-down.png") no-repeat right; }

	[role='navigation'] li, [role='navigation'] ul li ul li.menu-item { background: #0d56bd url("/images/layout/button-arrow-up.png") no-repeat right; font-size: 1.25em; text-align: left }

	[role='navigation'] li.top-level a.link-with-ul, [role='navigation'] ul li a { background-image: none; background-color: #175bd2; }

	[role='navigation'] li a, [role='navigation'] ul a { background-image: none; background-color: #175bd2; margin: 0 30% 0 0; }

	[role='navigation'] li a:hover, [role='navigation'] ul li a:hover { background-image: none; background-color: #175bd2; }

	[role='navigation'] .top-level a, [role='navigation'] ul li a { position: relative; display: block; background: #175bd2; padding: .8em; z-index: 50; }

	[role='navigation'] ul.sub-menu { width: 100%; margin: 0px; padding: 0; border: none; }

	[role='navigation'] li ul.sub-menu li a, [role='navigation'] ul li ul.sub-menu a { background-image: none; background-color: #0d56bd; font-size: 0.9em;}

	[role='navigation'] li ul li a:hover, [role='navigation'] ul li ul a:hover { background-image: none; background-color: #0d56bd; color: #fff; text-shadow: none;}

}


/*= Browsers
=======================================================*/
@media only screen and (max-width: 1000px) {

	.webkit [role='navigation'] li { font-size: .85em;  }

	.webkit [role='navigation'] .top-level a { padding: .7em; z-index: 50; }

}