@charset "utf-8";
/* CSS Document */

/* narrow screen */

.logoBar {
	background-color: #fff;
	width: 100%;
	padding-bottom: 5px;
}
.logoBarImages {
	background-color: #fff;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.countyImg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.deptImg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.responsiveImg {
	max-width: 100%;
	height: auto;
}
.title {
	font-family: 'Open Sans', helvetica, arial, sans-serif;
	font-weight: bold;
	padding-right: 0;
	padding-left: 15px;
	background-color: #fff;
}
.nav ul {
	list-style: none;
	background-color: #E3DDC7;
	text-align: center;
	padding: 0;
	margin: 0;
}
.nav li {
	font-family: 'Open Sans', helvetica, arial, sans-serif;
	font-size: 20px !important;
	text-align: left;
	
	border-right: 1px solid #888;
	border-bottom: none;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	margin-left: -4px;	
}
.nav a {
	font-size: 20px !important;
	text-decoration: none;
	color: #23596C;
	display: block;
	padding-left: 15px;
	border-bottom: 1px solid #888;
	transition: .3s background-color;
}
.nav a:hover {
	background-color: #457783;
	color: #fff;
}
.nav a.active {
	background-color: #aaa;
	color: #444;
	cursor: default;
}
/* BEGIN - Sub Menus */
.nav li li {
	font-size: .9em;
	padding-left: 15px;
}
/* END - Sub Menus */

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 620px) {
.logoBar {
	background-color: #fff;
	width: 100%;
	padding-bottom: 5px;	
	overflow: hidden;
}
.countyImg {
	float: left;
}
.deptImg {
	float: right;
	padding-top: 5px;
}
.title {
	font-weight: bold;
	padding-right: 30px;
	padding-left: 5px;
	background-color: #E3DDC7;
}
.nav a {
	border-bottom: none;
}
.nav > ul > li {
	text-align: center;
}
.nav > ul > li > a {
	padding-right: 30px;
	padding-left: 30px;
}
/* BEGIN - Sub Menus */
.nav li ul {
	position: absolute;
	display: none;
	width: inherit;
    z-index: 99999;
}
.nav li:hover ul {
	display: block;
	padding: 0;
	
}
.nav li ul li {
	display: block;
	font-size: .7em;
	border-right: none;
	border-top: 1px solid #888;
	margin-left: 0;
}
.nav li li {
	font-size: .9em;
	padding-left: 0;
}
.nav li ul a {
	padding-right: 15px;
	padding-left: 15px;
}

/*.triangle-down {
	position: absolute;
	margin-top: 16px;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 16px solid #23596C;
} */

/* END - Sub Menus */

}

/* medium screens */

@media (min-width:621px) and (max-width:904px) {

.title {
	font-size: 1.2em !important;
	padding-right: 5px;
}
.nav li {
	font-size: 20px !important;
	line-height: 40px;
	height: 40px;
}
.nav > ul > li > a {
	padding-right: 5px;
	padding-left: 5px;
}
/* .triangle-down {
	position: absolute;
	margin-top: 12px;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 16px solid #23596C;
} */
}