/* subnav styles */
#subnav {
    width: 100%;
    height: 2.66em;
    margin-bottom: .35rem;
}

[role="subnavigation"] {
	margin-bottom: .35rem;
}

.maincontent nav {
	background-color: #474747;
    height: 2.66em;
	clear: both;
    border: 1px solid #333333;
}

.maincontent nav ul {
	list-style: none;
	width: 100%;
	margin: 0 auto;
	padding-left: 0;
	background-color: #474747;
	height: 2.55em;
	clear: both;
}

.maincontent nav ul li {
	float: left;
	display: inline;
	background-color: #474747;
	height: 2.55em; 

}

.maincontent nav a:link, .maincontent nav a:visited {
	color: #474747;
	display: inline-block;
	height: 100%; /*box-sizing 1.33em; /*20px;*/
	width: auto;
    font-family: 'BenchNine', sans-serif;
    font-weight: 400;
}

.maincontent nav a:hover, .maincontent nav a:active, .maincontent nav .active a:link, .maincontent nav .active a:visited {
	background-color: #ecb731;
	text-shadow: none;
	text-decoration: none;
	color: #4e4e4e;
}


/* Begin Media Queries */

/* width of window >400px */
@media (min-width: 26.66em) { /* 400px*/

	.maincontent nav ul li {
		background-color: #474747;
	}

	.maincontent nav a:link, .maincontent nav a:visited {
		color: #FFFFFF;
		padding: .66em .33em; /* added for box-sizing */
	}
}

/* width of window >150px and <600px */
@media (min-width: 10em) and (max-width: 38.74em) {

	.maincontent nav ul {
		padding-left: 0;
	}

	.maincontent nav ul li {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.maincontent nav a:link, .maincontent nav a:visited {
		padding: .66em 1.66em; /*10px 25px;*/
		display: block;
	}
}

/* width of window <600px */
@media (min-width: 38.75em) {

	.maincontent nav {
		background-color: #474747;
	}

	[rolele="subnavigation"] li.submenu {
		display: inline;
	}

	[role="subnavigation"] li.submenu {
		display: lisb;
	}

	[role="subnavigation"] li.submenu {
		display: inline;
	}

	[role="subnavigation"] li.submenu {
		display: list-item;
	}
}

@media (min-width: 38.75em) { /* .06 .12 628px*/

	.maincontent nav ul {
		padding-left: 15px;
	}
}

@media only screen and (min-width: 46.66em) { /*700px*/

	.maincontent nav a:link, .maincontent nav a:visited {
		padding: .66em .33em; /*10px 25px;*/
	}
}

@media only screen and (min-width: 53.33em) { /*800px*/

	.maincontent nav ul {
		padding-left: 40px;
	}

	.maincontent nav a:link, .maincontent nav a:visited {
		padding: .33em .66em; /* added for box-sizing */
	}
}