/* 
Dark Green: 	RGB-  43, 53, 52		Hex- 2B3534
Light Green: 	RGB-  89,127, 80		Hex- 597F50
Orange:			RGB- 255,128,  0		Hex- FF8000
Brown:			RGB-  61, 49, 27		Hex- 3D311B
Rose:			RGB- 152, 51, 57		Hex- 983339
prev Navy:		RGB-  24, 50,139		Hex- 18328B
LHS blue NAVY:	RGB-  57, 98,162		Hex- 3962A2		
Background gray:RGB- 206,213,187		Hex- CED5BB
bg dark gray:	RGB- 162,175,126		Hex- A2AF7E
bg light gray:  RGB- 232,235,222		Hex- E8EBDE

On the Resident Portal (Membership Toolkit):
portal green:	RGB- 162,175,126		Hex- A2AF7E
*/

:root {
    --mna_dark-green: #2B3534; 
    --mna_light-green: #597F50;
    --mna_orange: #FF8000;
    --mna_brown: #3D311B;
    --mna_rose: #983339;
    --mna_navy: #3962A2;
    --mna_background: #CED5BB;
    --mna_bg-dark: #A2AF7E;
    --mna_bg-light: #E8EBDE;
    --mna_bg-portal: #A2AF7E;
}
/*NOTE: since internet explorer does not support CSS variables, the hex is always used directly before the variable to help with future releases */

FONT {color:#2B3534;color:var(--mna_dark-green);background-color:white; font-family:Arial; font-size: large; font-weight: bold}
BODY {color:#2B3534;color:var(--mna_dark-green);background-color:white; font-family:Arial; font-size: large; font-weight: bold}
A {color:#3962A2;color:var(--mna_navy); text-decoration: none;  font-style: font-family:Arial; font-size: large; font-weight: bold}
TABLE {color:#2B3534;color:var(--mna_dark-green);margin-left:10px; background-color:transparent; border:border_width:0;font-family:Arial; font-size: large; font-weight: bold}

a[target=_blank]:after {
  content: url(external-link-16.png);
  margin-left: 2px;
  white-space: nowrap;
}

a.mna_ql-link[target=_blank]:after {
  content: url(external-link-16-green.png);
  margin-left: 2px;
  white-space: nowrap;
}


a.mna_no-external-link-symbol:after {
	content: none;
}

img.mna_banner-desktop{
	width:100%;
	max-width:1500px;
	display:none;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
	margin-top: 104px;
}

img.mna_banner-tablet{
	width:100%;
	max-width:1000px;
	display:none;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
	margin-top: 104px;
}

img.mna_banner-mobile{
	width:100%;
	max-width:400px;
	border-radius:10px;
	box-shadow:-5px 10px 8px #666666;
	margin-top: 104px;
}

img.mna_sign-desktop{
	width:100%;
	max-width:300px;
	margin-right: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
}

img.mna_sign-tablet{
	width:100%;
	max-width:200px;
	margin-right: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
}

img.mna_directory{
	width:100%;
	max-width:300px;
	margin-right: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
}

img.mna_watch{
	width:100%;
	max-width:325px;
	margin-right: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;
}

img.mna_headshot{
	margin-right:8px;
	margin-left:8px;
	margin-top:8px;
	margin-bottom:8px;
	border-radius: 10px;
}


img.mna_business-card{
	padding-right:5px;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	width:100%;
	max-width:350px;
}

.mna_hr {
	background-color:c; 
	background-color:var(--mna_orange); 
	height:4px; 
	border:none;
	border-radius:2px;
	width:50%;
}

/* START Resident Login */
.mna_portal-container {
	display: inline;
	position: fixed;
	top:0px;
	left:0px;
	background-color:#A2AF7E;
	background-color:var(--mna_bg-portal);
/*	border-bottom: 5px #597F50 ridge;
	border-bottom: 5px var(--mna_light-green) ridge; */
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	z-index: 4;
}

a.mna_portal-button {
    background-color: #FFFFFF; /* White */
    white-space: nowrap;
    width:150px;
    color:#2B3534;
    color: var(--mna_dark-green);
	border: 2px #FF8000 solid;
	border: 2px var(--mna_orange) solid;
    text-align: center;
    text-decoration: none;
/*    display: inline-block;*/
    cursor: pointer;
    display: block;
	font-weight: bold;
	font-size: medium;
	vertical-align:middle;
	padding: 5px 5px 5px 5px;
}

a.mna_portal-button:hover {
	background-color: #FF8000;
	color: white;
}


/* END Resident Login */

/*START Collapsible display */
.mna_collapsible {   /* collapsed state, doesn't include plus sign*/
  background-color:#CED5BB;
  background-color: var(--mna_background); /*light background color*/
  color:#597F50;
  color: var(--mna_light-green);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: large;
  font-weight:bold;
}

.mna_collapsible-border{
	border:1px white solid;
}

.mna_collapsible:hover { /*hover on collapsed state, doesn't include plus sign */
  background-color:#A2AF7E;
  background-color: var(--mna_bg-dark); /* dark background color */
  color:white;
}

.mna_collapsible.active { /*expanded state, doesn't include plus sign */
  background-color:#CED5BB;
  background-color: var(--mna_background); /*light background color*/
  color:#597F50;
  color: var(--mna_light-green);
}

.mna_collapsible.active:hover { /*hover on expanded state only, doesn't include plus sign */
  background-color:#A2AF7E;
  background-color: var(--mna_bg-dark); /* dark background color */
  color:white;
}


.mna_collapsible:after { /* collapsed state, plus sign only */
  content: '\002B'; /*plus sign*/
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.mna_collapsible.active:after {
  content: "\2212"; /* minus sign */
}

.mna_content {
  padding-left:35px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-in-out;
  background-color: white;
}

/*END Collapsible display */


/*START Menu Button display */
.mna_menu-container {
	display: inline;
	position: fixed;
	top:42px;
	left:0px;

	border-bottom-width: 5px;
	border-bottom-style: double;
	border-bottom-color:#A2AF7E;
	border-bottom-color: var(--mna_bg-portal);

	background-color:white;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	z-index: 4;
}

.mna_content-margin-top {
	font-size:64px;
}

.mna_social-media {
	 border:none;
	 width: 40px;
	 margin-right:5px;
	 margin-top:2px;
}

.mna_float-right {
	 right:0;
}

.mna_menu-margin-top {
	font-size:0px;
}

.mna_menu-table {
	width:10%;
	white-space:nowrap;
	vertical-align:top;
}

.mna_tablet-menu-left {
	width:13%;
}

.mna_tablet-menu-right {
	width:16%;
}

.mna_tablet-menu-fb {
	width:5%;
	vertical-align:top;
	white-space:nowrap;
	padding-left:15px;
}


.mna_active-arrow {
	color:#FF8000;
	color: var(--mna_orange);
	vertical-align: middle;
	line-height: 18px;
}


/* On smaller screens alter display of menu */
@media only screen and (min-width: 648px) and (max-width: 680px) {
	.mna_tablet-menu-fb {
	padding-left:0px;
	}
	
	.mna_active-arrow {
	font-size: small;
	vertical-align:middle;
	}
}

a.mna_menu-button {
	color:#597F50;
	color:var(--mna_light-green); 
	line-height: 34px;
	font-size: large; 
	font-weight: bold;
    padding: 10px 10px 10px 2px;
}

a.mna_menu-button-desktop {
	color:#597F50;
	color:var(--mna_light-green); 
    background-color: #FFFFFF;
    cursor: pointer;
    padding: 10px 10px 10px 2px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: large;
	font-weight: bold;
    display: inline-block;

}

.mna_quicklinks-accordion-border {
	border-radius:5px;
}

.active.mna_quicklinks-accordion-border{
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}


.mna_accordion {
    background-color: #FFFFFF;
    cursor: pointer;
    padding:  10px 10px 10px 2px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: large;
	font-weight: bold;
	color:#2B3534;
    color:var(--mna_dark-green);
}

.active, .mna_accordion:hover {
	background-color:#CED5BB;
    background-color: var(--mna_background);
}

.active, .mna_menu-button-desktop:hover {
	background-color:#CED5BB;
    background-color: var(--mna_background);
}


.mna_menu-button:hover  {
	color:#3962A2;
    color: var(--mna_navy);
    font-weight: bold;
}

.mna_menu-button-desktop:hover  {
	color:#3962A2;
    color: var(--mna_navy);
    font-weight: bold;
}

.mna_panel {
    padding-left: 8px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Used as transition effect on menu and quicklinks */
    z-index:1;
}

/* END Menu Button display */


.mna_float-right{
	float:right;
}

.mna_float-left{
	float:left;
}


.mna_quicklinks-mobile {
	width:325px;
	text-align:left;
	white-space:nowrap;
	border-width: 3px;
	border-color:#597F50;
	border-color:var(--mna_light-green);
	border-style: solid;
	border-radius:8px;
}

.mna_quicklinks-desktop {
	
	border-top-width:2px;
	border-top-color:#597F50;
	border-top-color:var(--mna_light-green);
	border-top-style:solid;
	border-bottom-width:4px;
	border-bottom-color:#597F50;
	border-bottom-color:var(--mna_light-green);
	border-bottom-style:solid;

    margin: 0px 12px 12px 12px;
    background-color: #E8EBDE;
    padding-left:3px;
    white-space:nowrap;
    border-radius: 10px;

}

a.mna_ql-button {
	color:#597F50;
	color:var(--mna_light-green); 
 
	font-size: medium; 
	font-weight: bold;
    padding-bottom: 10px;
}

.mna_ql-button:hover  {
	color:#3962A2;
    color: var(--mna_navy);
    font-weight: bold;
}

.mna_trailer {
	vertical-align:top;
	width:100%;
	background-color:#CED5BB;
	background-color:var(--mna_background);
	color:#2B3534;
	color:var(--mna_dark-green);
	font-size: small;	
	border-top-color:#597F50;
	border-top-color:var(--mna_light-green);
	border-top-style:solid;
	border-top-width:2px;

	border-bottom-style:solid;
	border-bottom-color:#597F50;
	border-bottom-color:var(--mna_light-green);
	border-bottom-width:4px;
	border-radius:10px;
}


.mna_google-map {
	vertical-align:text-top;
	width:100%;
	max-width:400px;
	max-height:300px;
	height:auto;
	border-width:2px;
	border-color:#597F50;
	border-color:var(--mna_light-green);
	border-style:solid;

	margin-right: 12px;
	margin-bottom: 12px;
	margin-top: 8px;
    border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;	
}

.mna_google-map-desktop {
	vertical-align:text-top;
	width:100%;
	max-width:400px;
	max-height:300px;
	height:auto;
	border-width:2px;
	border-color:#597F50;
	border-color:var(--mna_light-green);
	border-style:solid;

	margin-right: 12px;
	margin-bottom: 12px;
    border-radius: 10px;
	box-shadow:-5px 10px 8px #666666;	
}


/* Used to indicate that a link goes to an external website */
.mna_small-arrow {
	font-size: x-small;
	vertical-align:top;
	letter-spacing: .9px;
}


.mna_resident {
	color:#597F50;
	color:var(--mna_light-green);
	font-size:large; 
	font-weight: bold; 
	text-decoration: none;
	margin-right:15px;
}

.mna_headshot-float{
	float:right;
	vertical-align: top;
	margin-bottom: 5px;
}

/* Used as the header for each page, other than home */
.mna_pagename {
	font-weight:bold;
	font-size: x-large;
	text-decoration:none;
	color:#597F50;
	color:var(--mna_light-green);
}


/* Business Directory categories */
.mna_category2 {
	background-color:#CED5BB;
	background-color:var(--mna_background);
	font-weight:bold;
	font-size: large;
	text-decoration:none;
	color:#2B3534;
	color:var(--mna_dark-green);
	width:100%;
	display:inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}


.mna_small {
	font-weight:bold;
	font-size: small;
}

.mna_xsmall {
	font-size: x-small;
}

.mna_xxsmall {
	font-size: xx-small;
}

.mna_copyright {
	color:#2B3534;
	color:var(--mna_dark-green);
	font-weight: bold;
	font-size: xx-small;
}

.mna_emphasis {
	font-weight:bold;
	text-decoration:none;
	color:#983339;
	color:var(--mna_rose);
}

.mna_strong {
	color:#597F50;
	color:var(--mna_light-green);
	font-weight:bold;
	text-decoration:underline;
}

/* START Scroll Up Button */
#upBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 10px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    color:#597F50;
    color: var(--mna_light-green); /* Text color */
    border-color:#597F50;
    border-color: var(--mna_light-green);
    border-width: thick;
    border-style:solid;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px; /* Some padding */
    border-radius: 15px; /* Rounded corners */
    background-color: #FFFFFF; /* Add a white background */
    font-size: 16px; /* Increase font size */

}

#upBtn:hover {
    outline: none; /* Remove outline */
    background-color:#597F50;
    background-color: var(--mna_light-green); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px; /* Some padding */
    border-radius: 15px; /* Rounded corners */
    font-size: 16px; /* Increase font size */

} 
/* END Scroll Up Button */


/* BEGIN style for show more or less */
.more {
	display: none;
	/*border-top: 1px solid #666;
	border-bottom: 1px solid #666; */}
a.showLink, a.hideLink {
	text-decoration: none;
	color:#3962A2;
	color: var(--mna_navy);
	font-weight: bold;
	font-size: small;
	/*background: transparent url('down.gif') no-repeat left;*/ }
/*a.hideLink {
	background: transparent url('up.gif') no-repeat left; }*/
a.showLink:hover, a.hideLink:hover {
	border:1px dotted #3962A2;
	border-bottom: 1px dotted var(--mna_navy); }
/* END style for show more or less */
	
	
	
	
/* BEGIN Slide show  */
* {box-sizing: border-box;}

.mna_slides {display: none;}
img.mna_slideshow-image {vertical-align: middle;border-radius:8px;}

/* Slideshow container */
.mna_slideshow-container {
  max-width: 400px; /* max width of pictures */

  position: relative;
  margin: auto;
  border-radius:8px;
  box-shadow:-5px 10px 8px #666666;
}

/* Caption text */
.mna_caption-text {
  background-color:transparent;
  color: #2B3534;
  color:var(-mna_dark-green);
  font-size: 15px;
  padding-top: 8px;
  padding-bottom:12px;
  position: absolute;
  bottom: -52px;

  width: 100%;
  text-align: center;

}


/* The dots/bullets/indicators */
.mna_slideshow-dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  /* background-color: var(--mna_background);*/
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
  .mna_caption-text {font-size: 11px}
  .mna_slideshow-dot {height:6px; width:6px;}
}


/* END slide show */