/* -----------------------------------------------------------------------
	MAIN
---------------------------------------------------------------------------*/
body {  
	height: 100%;
	margin: 0;
	padding: 0;
	font-family:"Noto Sans","Verdana","Arial",serif;
}

@media (min-width: 780px) {
	body {
		background-image: url("https://www.montgomerycountyny.gov/web/content/images/woodgrain_web_accessible.jpg");
		background-repeat: repeat-x;
		background-attachment: fixed;
		background-color:#000; 
		color:#FFF;
	}
}

@media (max-width: 779px) {
	body {
		background-color:#3C5F61;
	}
}

contentholderwhite a {
	color: #3A6764;
}

a {
	color: #2a95ff;
}

h4 {
	color: #705C39;
	font-weight:bold;
	padding:0px;
	margin:0px;
}

label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


/* -----------------------------------------------------------------------
	hr styles 
---------------------------------------------------------------------------*/
hr.thinblue {
	height: 2px;
	color: #9BBFBD;
	background-color: #9BBFBD;
	border: none;
	width:85%;
	margin: 0;
	padding:0;
}

@media (max-width: 779px) {
	hr.mobiletan {
		clear:both;
		height: 2px;
		color: #FBF9F5;
		background-color: #FBF9F5;
		border: none;
		display:none;
	}
}

@media (min-width: 780px) {
	hr.mobiletan {
		display:none;
	}
}


/* -----------------------------------------------------------------------
	img styles 
---------------------------------------------------------------------------*/
img {
	border:0;
}


/* -----------------------------------------------------------------------
	General Display Styles
---------------------------------------------------------------------------*/
.inlinetext {
	display:inline;
	margin:0;
	padding:0;
}

@media (max-width: 779px) {
	.inlinetext_mobilebr {
		display:block;
		margin:0;
		padding:0;
	}
}

@media (min-width: 780px) {
	.inlinetext_mobilebr {
		display:inline;
		margin:0;
		padding:0;
	}
}

.dspblock {
	display:block;	
}

.dspinline {
	display:inline;
}

.dspnone {
	display:none;
}

.strong {
	font-weight:bold;
}

.bigger {
	font-size:110%;
}

.smaller {
	font-size:90%;
}

.italic {
	font-style:italic;
}

.underline {
	text-decoration:underline;
}

.bigandstrong {
	font-weight:bold;
	font-size:110%;
}


/* -----------------------------------------------------------------------
	special styles 
---------------------------------------------------------------------------*/
#content-important {
	width:90%;
	margin: 1em auto;
	padding: .5em .2em 1em .2em;
	text-align:center;
	background-color:#FFF;
	font-weight:bold;
	font-size:110%;
}

#content-urgent {
	width:100%;
	margin: 1em auto;
	padding: .2em;
	text-align:center;
	background-color:#FAF2E3;
	font-weight:bold;

	
}

#content-urgent p {
	color:red;
}

/* -----------------------------------------------------------------------
	tabledivs
---------------------------------------------------------------------------*/
.divtable{
	display: table;
}
.divtablerow {
	display: table-row;
}
.divtableheading {
	display: table-header-group;
	font-weight: bold;
}
.divtablecell, .divtablehead {
	display: table-cell;
	padding: 6px;
}
.divtablecellblue {
	background-color: #E1F7FA;
	display: table-cell;
	padding: 6px;
}
.divtablefoot {
	display: table-footer-group;
	font-weight: bold;
}
.divtablebody {
	display: table-row-group;
}


/* -----------------------------------------------------------------------
	tabledivsborder
---------------------------------------------------------------------------*/
.divtableb{
	display: table;
	border-collapse:collapse;
}
.divtablerowb {
	display: table-row;
}
.divtableheadingb {
	display: table-header-group;
	font-weight: bold;
}
.divtablecellb, .divtableheadb {
	display: table-cell;
	padding: 6px;
	border:1px solid;
	border-collapse:collapse;
}
.divtablecellblueb {
	background-color: #E1F7FA;
	display: table-cell;
	padding: 6px;
	border:1px solid;
}
.divtablefootb {
	display: table-footer-group;
	font-weight: bold;
	border:1px solid;
}
.divtablebody {
	display: table-row-group;
}


/* -----------------------------------------------------------------------
	Mobile/Tablet/Desktop - Hide & Display Styles
---------------------------------------------------------------------------*/
@media (max-width: 779px) {
	.hidemobile {
		display:none;
	}

	div.nonmobilecenter {
		text-align:left;
	}

	div.pushtocenter {
		padding-left:0px;
		padding-right:0px;
	}


	div.sheriffpushtocenter {
		padding-left:0px;
		padding-right:0px;
	}

	.mobilenofloatleft {
		display:block;
	}

	.mobilenofloatright {
		display:block;
	}

	.centermobileonly {
		margin:auto 0;
		display:block;
		text-align:center;
	}

	.nowrapexcludemobile {
		white-space: normal;
	}

	.largescreenbr {
		display:none;
	}

	.dspdesktoponly {
		display:none;
	}

	.dspdesktoponlyinline {
		display:none;
	}

	.dspmobileonly {
		display:block;
	}

	.dspmobileonlyinline {
		display:inline;
	}

	.dspinlinemobilenone {
		display:none;
	}

	.dsptabletonly {
		display:none;
	}
}

@media (min-width: 780px) {
	.hidemobile {
		display:block;
	}

	.dspmobileonly {
		display:none;
	}

	.mobilenofloatleft {
		float:left;
	}

	.mobilenofloatright {
		float:right;
	}

	div.nonmobilecenter {
		text-align:center;
	}

	div.pushtocenter {
		padding-left:20px;
		padding-right:20px;
	}
	div.sheriffpushtocenter {
		padding-left:5px;
		padding-right:5px;
	}

	.nowrapexcludemobile {
		white-space: nowrap;
	}

	.dspmobileonlyinline {
		display:none;
	}

	.dspinlinemobilenone {
		display:inline;
	}
}

@media (min-width: 780px) and (max-width:1199px) {
	.dspdesktoponly {
		display:none;
	}

	.dspdesktoponlyinline {
		display:none;
	}

	.dsptabletonly {
		display:block;
	}
}

@media (min-width: 1200px) {
	.hidedesktop {
		display:none;
	}

	div.pushtocenter {
		padding-left:100px;
		padding-right:100px;
	}
	div.sheriffpushtocenter {
		padding-left:30px;
		padding-right:30px;
	}

	.dspdesktoponly {
		display:block;
	}

	.dspdesktoponlyinline {
		display:inline;
	}

	.dsptabletonly {
		display:none;
	}
}


/* -----------------------------------------------------------------------
	Stopfloats
---------------------------------------------------------------------------*/
div.stopfloat
{
	clear:both;
}

@media (max-width: 779px) {
	div.stopfloatmobile
	{
		clear:both;
	}
}


/* -----------------------------------------------------------------------
	skip styles 
---------------------------------------------------------------------------*/
.skip {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 1px;
	width: 1px;
	text-align: left;
	overflow: hidden;
}
    
a.skip:active, 
a.skip:focus, 
a.skip:hover {
	left: 0; 
	top: 0;
	width: auto; 
	height: auto; 
	overflow: visible; 
	background-color:#407073;
	color:#fff;
	font-weight:bold;
	z-index:1000;
}


/* -----------------------------------------------------------------------
	header styles & initial display settings for mobile/regular menu
---------------------------------------------------------------------------*/
.headerwrapper {
	width: 100%;
	margin: 0;
	padding:0;
	z-index: 4;
	background-color:#FFF;
	color: #3C5F61;
}

.bottomheader {
	width: 100%;
	margin: 0 auto;
	padding:0;
	z-index: 4;
	color: #FFFFFF;
	background-color:#3C5F61;
}

@media (max-width: 779px) {
	.centerheadercontent {
		min-width:275px;
		width:95%;
		margin:0 auto;
	}
}

@media (min-width: 780px) {
	.centerheadercontent {
		position:relative;
		margin: 0 auto;
		color: #FFFFFF;
	}
}

@media (min-width: 780px) and (max-width:1199px) {
	.centerheadercontent {
		width: 750px;
	}
}

@media (min-width: 1200px) {
	.centerheadercontent {
		width: 1100px;
	}
}

@media (max-width: 779px) {
	.setupdisplay {
		display:none;
	}
	.setupnavbar {
		display:none;
	}
	.topheader {
		width: 100%;
		margin: 0;
		padding:5px 0;
		z-index: 4;
		color: #FFFFFF;
		background-color:#3C5F61;
		min-height:15px;
	}

	.middleheader {
		width: 100%;
		margin: 0;
		padding: 5px 0;
		z-index: 4;
		color: #3C5F61;
		background-color:#FFF;
		min-height:20px;
	}
}

@media (min-width: 780px) {
	.topheader {
		width: 100%;
		margin: 0;
		padding:10px 0;
		z-index: 4;
		color: #FFFFFF;
		background-color:#3C5F61;
		min-height:35px;
	}

	.middleheader {
		width: 100%;
		margin: 0;
		padding: 10px 0;
		z-index: 4;
		color: #3C5F61;
		background-color: #FFF;
		min-height:55px;
	}

	.setupdisplay {
		display:block;
		text-align:right;
	}

	.setupnavbar {
		display:block;
	}
}


/* -----------------------------------------------------------------------
	Inside Header Styling 
---------------------------------------------------------------------------*/
#mainlogo {
	margin:0;
	padding:0;
	position:relative;
	float:left;
}

#slogan {
	margin:0;
	padding:0 10px;
	position:relative;
	float:left;
}

#socialmedia {
	padding-top:10px;
	text-align:right;
	float:right;
}

#searchbutton {
	vertical-align:bottom;
}

#quicklinks {
	padding:.5em 1em;
	margin:.5em 1em;
	background-color:#5C4925;
	color: #E6DAC8;
}

#google_translate_element {
	float:left;
	margin:0 20px;
	vertical-align:middle;
}

#searchbutton:focus {
	outline: solid 2px #FFF;
}

#socialmedia a:focus {
	border-bottom: solid 2px #000;
}

@media (max-width: 779px) {
	#slogan {
		display:none;
	}
}

@media (min-width: 780px) {
	#menu {
		display:block;
	}
	#searchbox {
		display:block;
		text-align:right;
	}

	#socialmedia {
		display:block;
	}
}


/* -----------------------------------------------------------------------
	Mobile Menu 
---------------------------------------------------------------------------*/
@media (max-width: 779px) {
	#mobilemenu {

		position:relative;
		height:100%;
		margin-left:5px;
		text-align:right;
	}

	#mobilemenu img {
		width:20%;
		max-width:40px;
		min-width:15px;
		padding-top:3px;
		margin:0;
	}

	#toplogoimg {
		width:70px;
		position:absolute;
		top:5px;
		left:5px;
	}

	.hovermobileimg {
		display:none;
	}

	#searchbox {
		float:right;
		text-align:right;
		margin-top:1em;
	}
	#idSearchString {
		border:solid 1px black;
	}

	#socialmedia {
		padding:1em 0;
		margin-top:1.5em;
		text-align:right;
	}
}

@media (min-width: 780px) {
	#mobilemenu {
		display:none;
	}
}


/* -----------------------------------------------------------------------
	MEGA MENU
---------------------------------------------------------------------------*/
.sub-nav a {
	color:#3A6764;
	text-decoration:none;
	font-size:90%;
	padding:4px 0;
}

@media (min-width: 780px) {
	.nav-menu {
		display: block;
		position: relative;
		list-style: none;	
		margin: 0 auto;
		padding: 0;
		z-index: 75;
		width:100%;
		background-color:#3C5F61;
		color:#CFE8E5;
	}

	/* a top level navigation item in the mega menu */
	.nav-item {
		list-style: none;
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	/* first descendant link within a top level navigation item */
	.nav-item > a {
		position: relative;
		display: inline-block;
		padding: 15px 8px;
		margin: 0 0 -1px 0;
		border: 1px solid transparent;
		border-right:1px solid #64888A;
		text-decoration:none;
		color:#CFE8E5;
		font-family:Georgia,sans-serif;
	}

	/* focus/open states of first descendant link within a top level navigation item */
	.nav-item > a:focus,
	.nav-item > a.open {
		border: 1px solid #dedede;
		text-decoration:underline;
	}

	/* open state of first descendant link within a top level navigation item */
	.nav-item > a.open {
		border-bottom: none;
		z-index: 50;
		background-color: #FFF;
		color: #3C5F61;
	}



	/* sub-navigation panel */
	.sub-nav {
		position: absolute;
		display: block;
		visibility: hidden;
		opacity: 0;
		left:0;
		overflow-x:hidden;
		overflow:auto !important;
		z-index:300;
		max-height:75vh;
		margin-top: -1px;
		width:100%;
		padding: 0.5em 0;
		border: 2px solid #94B7BC;
		border-top:1px solid transparent;
		background-color: #FFF;
		-webkit-transition: opacity 250ms, visibility 20ms;
		-moz-transition: opacity 250ms, visibility 20ms;
		-ms-transition: opacity 250ms, visibility 20ms;
		-o-transition: opacity 250ms, visibility 20ms;
		transition: opacity 250ms, visibility 20ms;
		transition-delay:200ms;

	}

	/* sub-navigation panel open state */
	.sub-nav.open {
		display: block;
		visibility: visible;
		opacity: 1;
		-webkit-transition: opacity 300ms, visibility 300ms;
		-moz-transition: opacity 300ms, visibility 300ms;
		-ms-transition: opacity 300ms, visibility 300ms;
		-o-transition: opacity 300ms, visibility 300ms;
		transition: opacity 300ms, visibility 300ms;
		transition-delay:370ms;
	}

	.sub-nav>.sub-nav-group-viewall {
		border-top: 1px solid #94B7BC;
		text-align:center;
		margin:.3em 0 0 0;
		padding:.3em 0 0 0;
	}

	.sub-nav-group-viewall>li {
		font-size:110%;
		font-weight:bold;
	}

	.sub-nav-group-1col {
		max-width:100%;
	}

	.sub-nav-group-2col {
		max-width:48%;
	}

	.sub-nav-group-3col {
		max-width:32.5%;
	}

	.sub-nav-group-4col {
		max-width:24.5%;
	}

	/* list of items within sub-navigation panel */
	.sub-nav ul {
		display: inline-block;
		vertical-align: top;
		margin: 0;
		padding: 0;
		width:100%;
	}

	/* list item within sub-navigation panel */
	.sub-nav li {
		display: block;
		list-style-type: none;
		margin: 0 1.5em;
		padding: .2em 0;
		color:#3C5F61;
	}

	.sub-nav li a:focus,
	.sub-nav li a:hover  {
		text-decoration:underline;
	}

	.sub-nav li.sub-nav-header{
		margin: .7em 1.5em;
		border-bottom: 1px solid #94B7BC;
	}

	.sub-nav li.sub-nav-header a{
		color: #705C39;
		text-decoration:none;
	}

	.sub-nav li.sub-nav-header a:focus,
	.sub-nav li.sub-nav-header a:hover  {
		text-decoration:underline;
		color:#3a6764;
	}


	.sub-nav li.hidedesktop {
		display:none;
	}

	.sub-nav-group.hidedesktop {
		display:none;
	}
}

@media (min-width: 1200px) {
	.nav-item > a {
		padding:12px 20px;
		font-size:1.1em;
	}
}

@media (max-width: 779px) {
	.nav-menu {
		list-style: none;
		margin:0 0 1em 0;
		padding:0 0 1em 0;	
	}

	.nav-item > a {
		color:#CFE8E5;
		font-family:Georgia,sans-serif;
		text-decoration:none;
		font-size:110%;
	}

	.nav-item {
		list-style: none;
		padding:1em 1em 0 1em;
	}

	.sub-nav {
		margin-top:1em;
		background-color: #FFF;
	}

	.sub-nav-group.hidemobile {
		display:none;
	}

	.sub-nav li {
		list-style-type: none;
		padding:.5em;
	}

	.sub-nav li.hidemobile {
		display:none;
	}

	.sub-nav li.sub-nav-header {
		display:none;
	}
}


/* -----------------------------------------------------------------------
	Positioning Boxes
---------------------------------------------------------------------------*/
.bodydivider {
	margin-top:1em;
}


/* -----------------------------------------------------------------------
	Bottom Bar
---------------------------------------------------------------------------*/
#bottombar {
	position:relative;
	width:100%;
	margin: 0 auto;
	background-color:#3C5F61;
	padding-top:10px;
	text-align:center;
	font-size:90%;
	height:180px;
}

#bottombar p {
	color: #BFE3DF;
}

#bottombar p a {
	color: #BFE3DF;
}

#bottombar a:focus {
	font-weight:bold;
}

.style-button {
    background-color: #3C5F61;   /* Matches header/footer theme */
    color: #FFFFFF;             /* White text for contrast */
    font-family: "Noto Sans","Verdana","Arial",serif;
    font-size: 1em;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;         /* Slightly rounded edges */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover and focus states */
.style-button:hover,
.style-button:focus {
    background-color: #2a4647;  /* Darker teal for hover */
    outline: none;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Active state (when clicked) */
.style-button:active {
    background-color: #5C4925;  /* Brown accent from theme */
    transform: translateY(0);   /* Reset lift */
}