body { 
	font-family: Helvetica, Arial, sans-serif;
	background: url('/images/bg.jpg') repeat-x;
	margin: 0;
	padding: 0;
}



	/*---RK---Carousel padding changes for mobile---*/
.carouselMain
	{
		margin-left: 0px;
	}


.stationery {
	width: 90%; 
	background: floralwhite; 
	border: solid 1px #aaaaaa; 
	margin-left: auto; 
	margin-right: auto; 
	padding: 25px; 
	margin-bottom: 24px;
}

.stationery label {
	background:  lightgray;
}


h1,h2,h3,h4,h5,h6
{
	color: #800;	
}

.maroonbackground {
	background-color:  #800 !important;
}

h6 {
	font-weight: bold;
}

a {
	text-decoration: underline;
}

label {
	background: #eeeeee;
	width: 100%;
}

label.required
{
	border-left: 7px solid #333;
	padding-left: 8px;
}

label.notrequired
{
	border-left: 7px solid #ccc;
	padding-left: 8px;
}

li .description {
	
}

#navigationMenus {
  background: #880000;
}  


/*---RK--- 5/5/2022:  This section is all new stuff that I've added*/
/*---RK--- side menu desktop/mobile visibility toggle*/

.sidemenuDesktop
{
	/*visibility: visible !important;*/
}


.sidemenuMobile
{
	/*visibility: hidden !important;*/
}




.btn-secondary {
    color:#363636;
    background-color: white;
    border: hidden;
}


.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color:#777777;
    border: hidden;
}


menuToggle.dropdown
{
	visibility: hidden;
	
	
}

/* Somehow this lives on PROD but no where else ... why is it there?  It's breaking the calendar. --->
/*.btn-group
{
	float: right;
	visibility: hidden;
}*/




a.dropdown-item::after
{
	visibility: hidden;
}



#itemParent.dropdown-item
{

}



.dropdown-submenu {
    position: relative;
	
}


.dropdown-submenu > a.dropdown-item:after {
    
    content: "\f054";
    float: right;
}


.dropdown-submenu > .dropdown-menu {
    top: 0;
    
    margin-top: 0px;
    margin-left: 0px;
}


.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/*End of new stuff*/



.table .total {
	font-weight: bold !important;
	border-top: 3px double black !important;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.form-check-label {background: none;}

/*.sticky {
    position: sticky;
    top: 0;
 }*/

 .icon-left {
 	float: left; font-size: 2em; margin-right: 12px; padding-top: 6px
 }

.stickyscroll
 {
  	height:500px;
 }

.stickyscroll thead {
 	position: sticky !important;
    top: 0 !important;
 }

.dataDisplay .row {
	margin-bottom: 3px;
}

.dataDisplay button {
	float:  right;
}	

.dataLabel {
	background-color:  #e1e1e1;
	padding-left: 15px;
}

.dataValue {
	font-weight: 600;
	margin-left: 15px;
}

.dataSection {
	background-color: black;
	color:  white;
	padding: 6px;
	padding-left: 9px;
	clear:  both;
	margin-top:  12px;
}

/* RK --- I've changed the background color of the section-headers to better match the rest of the page*/
.section-header {
	padding: 6px;
	padding-left: 9px;
	background:  #4373a2;
	color: white;
	text-align: left;
}

.section-header2 {
	padding: 6px;
	padding-left: 9px;
	background:  #303030;
	color: white;
	text-align: left;
}

.section-header3 {
	
	color: #3c4142;
	text-align: left;
	border-bottom: 1px solid #3c4142;
	width: 100%;
	display: block;
}

.pageLink {
	margin-bottom: 12px; 
	text-align: right
}

.infoBar {
	background-color:  #e1e1e1;
	padding:  5px;
	margin-top:  12px;
	margin-bottom:  12px;
	font-size:  smaller;
}

.menuBox {
	padding:  6px;
	background: #b4c2d2; 
	margin-bottom:  12px;

}

.menuBox a {
	margin-left:  12px;
	color:  black !important;
}


.highlight {
	background: #ffffcc;
	font-weight: bold;
}

.highlightredtext {
	background: #ffffcc;
	font-weight: bold;
	color:  red;
}

.shaded {
	background: #e1e1e1;
}

#lodgeLocator legend {
	display: none;
}

.contentBox {
	background-color: #f4f4f4;
	border-radius: 10px !important; 
	padding: 10px 10px 10px 10px;
	border: 1px solid #c0c0c0;
	margin-bottom: 12px;
}

.lodgeBox {
	border: solid 1px #e1e1e1; 
	border-radius: 0px !important;
	background: white;
	padding: 10px;
}	

.shading {
	background-color:#4373a214 !important; 
	border: 2px solid #4373a22e !important;
}

.circle-img{
	background-size: cover;
	border-radius:50%;
	border:1px solid #333;
	width:100px;height:100px;
}

.newsBox {
	background: url(/images/gravel.png); 
	margin-top: -11px; 
	padding-top: 10px
}	

.promoBanner {
	text-align: center; 
	margin-top: 1em; 
	width: 100%;
}

.homePageUpdates {
	border-right: solid 1px #c0c0c0;
}

.new {
	background: yellow;
	color: red;
	vertical-align: super;
  	font-size: smaller;
  	font-weight: bold;
}

.menuCount {
	background: yellow;
	color: red;
  	font-size: smaller;
  	font-weight: bold;
}

.simpleForm {
	border: solid 1px #000000;
	background: #e1e1e1;
	padding: 5px;
	max-width:600px; 
	margin-left: auto; 
	margin-right: auto;
	margin-top: 18px;
	margin-bottom: 18px;
}

.simpleForm label {
	color: white;
	background: black;
	padding-left: 8px;
}

.filterForm {
	background: #e1e1e1;
	padding: 5px;
	margin-top: 18px;
	margin-bottom: 18px;
	
}

.filterForm input[type=submit] {
    font-size: large;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-top:  2px;
   v
}

.instructions {
	background: #fffdbd;
	color: maroon;
	padding: 10px;
	margin: 12px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.hoverShadow:hover 
{
	box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

input[type=button].cobalt, input[type=submit].cobalt
{
	background-color: #336699;
	color: white;
}

.bulletedNews
{
	list-style: none;
	margin-left: 0;
	padding-left: 10px;
	text-indent: 0;
	padding-bottom: 0;
	border-bottom: 1px solid #939393;
}

.bulletedNews li
{
	font-size: 13px;
	padding-bottom: 13px;
	padding-left: 6px;
}

.bulletedNews a
{
	color: #004080;
	font-weight: bold;
}

.bulletedNews a:hover
{
	color: #800;
}

.howlinks
{
	width: 230px;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
	font-weight: bolder;
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
}

.howlinks .big
{
	width: 400px;
	font-size: 20px;
}




.howlinks li a
{
	display: block;
	border: 1px solid #939393;
	padding: 9px;
	border-radius:4px;
	margin-bottom: 10px;
	text-decoration: none;
	background: #fff;
}

.howlinks li a:hover
{
	text-decoration: underline;
}


#lodgeLocator span 
{
	border: 0;
	outline: none;
}

#lodgeLocator button.submit
{
	color: #fff;
	border: 1px solid #124578;
	border-top-color: #7cafe2;
	border-left-color: #7cafe2;
	background: #6497ca;	
}



#header, .lodgeheader
{
	width: 1140px;
	height: 148px;
	background-color: #80acf5;
	background: url('/images/pdNewHeaderFlag.png') no-repeat; 
	background-size: cover;
}

/* 5/5/2022: ---RK--- Added a possible attribute here in case we want to change the hamburger color from the default Bootstrap styling*/
button.navbar-toggler
{
	background: white !important;
}

.nav-link {font-size: 15px !important;}
.nav-link {margin-right: 15px;}

.navbar {
	height: 36px;
	/*background: url('/images/navbg.jpg') repeat-x;*/
}

.leftmenu .navbar {
	background: inherit !important;
	margin-left: -16px;
	margin-top: -8px;
}

.navbar a {
	text-decoration: none;
}

#sidemenu {
	display: inline-block;

}


#menuToggle {
	display: none;
	margin-top:  -5px;  /* 5/5/2022:   had been - 11 */
}

#menuIcon {
	font-size:  30px;

}
#menuText  {
	vertical-align: super;
	font-size:  15px;
	text-decoration:  underline;
}

.nav .active {
	background: #e1e1e1;

}

.nav a {
	text-decoration: none;
}

.tos {
	padding: 10px;
}

.tos button {
	width: 100px !important;
}

.tos h6 {
	background: #eeeeee;
	border-bottom: solid 1px black;
	text-transform: uppercase;
	font-weight: bold;
}

.rowLabel {
	background: black;
	color: white;
}

.editedData {
	/*background: #e6f5ff;*/
	font-weight: bold;
}

.inactiveMember {
	color: silver;
}

.inactiveMember a {
	color: silver !important;
}

.inactiveLabel {
	color:  red;
	font-size: smaller;
}

.max1000 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.StateList ul li
{
	list-style: none;
	display: inline;
}

/* 01/17/20222 roster styles, invoked from soon-to-be deprecated tag, <cf_ftmGetMembershipGroup */


#rosterList h2 {
	padding: 6px !important;
	padding-left: 9px !important;
	background:  #05699B !important;
	color: white !important;
	text-align: left !important;
}

#rosterList h3 {
	font-size:  20px;
	padding: 6px !important;
	padding-left: 9px !important;
	background:  black !important;
	color: white !important;
	text-align: left !important;

}

/* end of roster styles */


.siteHeaderImage
{
	text-align:  center;
	margin-bottom:  12px;
}
.siteHeaderImage img {
  width: 100%;
  height: auto;
}  


/*  styles that lived on the page in the /programs/ourPrograms.cfm page:   */

	.circle{
		background-size:cover;
		margin-right:10px;
		background-color:white;
		display:inline-block;
		width:90px;
		height:90px;
		border-radius:50%;
		border:1px solid #333;
	}


	.overlay{
		opacity: 0;
		transition: visibility 0s, opacity 0.3s linear;
		visibility:hidden;
		height:100%;
		text-align:center;
		line-height:90px;
		font-size:233%;
	    background: rgba(0, 0, 0, 0.43);
	    border-radius: 50%;
		text-shadow: 2px 2px black;
	    color: white;
	}

	.circle:hover > .overlay{
		visibility: visible;
	  	opacity: 1;
		cursor:pointer;
	}

	.inner{
		padding:18px 6px 12px 6px;
	}

	.inner-text{
		display:inline-block;
		width:250px;
		vertical-align:top;
	}




/*  end of ourPrograms.cfm styles */


@media (min-width: 1px) and (max-width: 1199px) {
 #header, .lodgeheader
	{
		background: url('/images/elksmobile.png') no-repeat; 
		width: 100%;
		height: 80px;
		display: block; 
		vertical-align:middle; 
		margin: 0 auto;
		background-color: black;
		background-color: #28345e;
		background-position: center;
	}	


	#mapContainer {
		display:  none;
	}	
}



@media (min-width: 1px) and (max-width: 991px) {
	.navbar {
		height: inherit;
		background: inherit;
		/*---RK--- I've increaded the line height to make these tabs more easily selectable on mobile*/
		line-height: 2.0;
	}
	
	
	/*---RK---I've added this toggler styling to change the button size and ultimately the red bar it's nsted in*/
	.navbar-toggler{
	   padding: 0px 5px 0px 5px !important;
	}
	
	
/*---RK---I've added this attribute to hide the menu button on desktop view*/
	menuToggle.dropdown
{
	visibility: visible !important;
	padding: 0px 100px 0px 0px;
}
	
	
/*---RK--- sidemenu Desktop/Mobile toggle*/

	
.sidemenuDesktop
{
	/*visibility: hidden !important;*/
}


.sidemenuMobile
{
	/*visibility: visible !important;*/
}

	
	
/*---RK---I've added this attribute to change the mobile menu styling*/	
	.leftmenu .nav-link  {
	background: #4373a2;
	color: white;
	width:  190px; 
	/*border-top: solid 1px #2d5884;*/
	/*border-bottom: solid 1px #2d5884; */
	font-size: 18px !important;
	margin-top: 0px;
	margin-bottom: 1px;
	}
		
/*---RK---I've also added this attribute to change the mobile menu styling inside of tabs*/		
.leftmenu .dropdown-menu .dropdown-item {
	color: black;
	font-size: 16px !important;
	font-weight: normal;
}		
		
		

	.lsmenu ul li {
		width: 100%;
		margin: 0px !important;
		padding: 0px !important;
	}


	#sidemenu {
		display: none;
		width: 100%;
		min-height: 0px; 
		padding-right: 0px;
	}
	

	.leftmenu .dropdown-menu {
		width: 100% !important;
		

	}

	#pagecontent {   /* new */
		min-width: 100% !important;
	}

	.lsmenu .nav {
		padding: 0px !important;
		margin: 0px !important;
	}

	.lsmenu .nav-link {
		width: 100% !important;
	}


	#menuToggle {
		display: inline;
		float: right;
	}

	.howlinks
	{
		width: 100%;
	}

	.newsBox {
		margin-top: 8px;
	}

	.homePageUpdates { 
		border-right: none;
	}

}	

@media (max-width: 1199px) {
	.headerlinks {
		display: none;
	}
}



.container {
	background: white;
	padding-bottom: 5px;
	
}

.container-fluid {
	background: white;
	padding-bottom: 5px;
}

.breadcrumb {
	background: white;
}



#userLinks {
   /*width:1200px;margin:0 auto;background-color:#eee;*/
   width: 100%;
   /*
   background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.33) 50%,    
   rgba(255, 255, 255, 0.0) 21%, rgba(162, 162, 162, 0.2) 95%);
   */
   background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.33) 50%,    
rgba(255, 255, 255, 0.0) 21%, rgba(162, 162, 162, 0.2) 95%);
	height: 33px;
	line-height:33px;
	margin: 0 auto;
	background-color: #eee; 
	padding: 0;
}

a[href]
{
	color: #336699;	
}

a[href]:hover
{
	color: #800;
}


#userLinks ul
{
	height: 20px;
	margin: 0;
	padding: 0;
}

#userLinks li
{
	float: left;
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}

#userLinks li a
{
	display: block;
	outline: none;
    padding: 0px 10px 0px 10px;
	text-decoration: none;
	text-align: center;
	font-size: 12px;
}

#userLinks li a.login
{
	background-color: #800;
	color: #fff;
	font-weight: bold;
}

#userLinks li a.login:hover, #topmenu li:hover a.login, #leftusermenu li a.login:hover
{
	background-color: #333;
	color: #fff;
}

#userLinks .login {
	background-color: #800;
	color: #fff;
	font-weight: bold;
}

#leftusermenu
{
	float: left;
	list-style: none;
	height: 20px !important;
	margin: 0;
	display: block;
	margin: 0;
	padding: 0;
}

#rightusermenu
{
	float: right;
}

.mobileShow {
	display: none;
}

@media (min-width: 1px) and (max-width: 576px) {
	
	
	.disposable {
		display: none;
	}

	.mobileHide {
		display: none;
	}

	.mobileShow {
		display: inline-block;
	}

	#userLinks {
		background-image: none !important;
		background-color: #800;
	}

	#userLinks a {
		color: white !important;
	}

}

.navbar {
	background-color: #800 !important;
}	

.navbar .nav-link {
	color: white !important;
	font-weight: bold; 
	cursor: pointer;
}

.leftmenu .navbar .nav-link {
	font-weight: normal; 
}

.leftmenu {
	background:#b4c2d2;
	padding-left: 0px;
	z-index: 1;
	min-height: 600px;
}

@media (min-width: 1px) and (max-width: 1199px) {
	.leftmenu {
		width: 190px; 
		
	}

}

.leftmenu .nav-link  {
	background: #4373a2;
	color: white;
	width:  190px; 
	/*border-top: solid 1px #2d5884;*/
	/*border-bottom: solid 1px #2d5884; */
	font-size: 14px !important;
	margin-top: 0px;
	margin-bottom: 1px;

}


/*.leftmenu .nav-link .active {
	
	background: yellow !important;
	
	margin-top: 10px; 
}*/


.leftmenu .nav-link:hover {
	color: #e1e1e1 !important;
}

.leftmenu .dropdown-menu {
	width: 190px;
	background: white;
	z-index: 0;
	position: relative;
	margin-top: 0px;

}

.leftmenu .dropdown-menu .dropdown-item {
	color: black;
	font-size: 13px;
	font-weight: normal;
}






/************************ FOOTER *********************************/

#footer
{
	clear: both;
	position: relative;
	float: left;
	/* width: 994px; */
	width: 100%;
	margin: 0 auto;
	padding: 3px;
	background: url('/images/footerbg.gif') repeat-x;
	background-color: #232323;
	color: #939393;
	border-top: 2px solid #800;
	font: 12px solid Tahoma, Geneva, sans-serif;
	font-size: 12px !important;
	line-height: 22px !important;
	font-weight: bold;
}

#footer div.addy
{
	text-align: right;
	padding-bottom: 10px;
}

#footer div.line
{
	position: absolute;
	float: left;
	right: 10px;
	padding: 0;
	margin: 0;
	width: 240px;
	height: 1px;
	border-bottom: 1px solid #fff;
}

#footer div.legal
{
	float: right;
	width: 230px;
	padding: 10px;
	text-align: left;
}

#footer ul
{
	padding: 0;
	margin: 0;
}

#footer li
{
	float: left;
	list-style: none;
	padding: 0;
	padding-left: 40px;
	padding-top:10px;
	margin: 0;
}
#address-block-body-elkshp{display:block;float:right;width:250px;text-align:left!important;color:#ccc;}
#address-information-elkshp{line-height:1.5!important;display:block;padding:10px;font-weight:normal;}
#address-information-elkshp a{font-weight:normal;}
#social-media-elkshp{padding:0px 10px 10px 10px;font-size:28px;color:#d3d3d3;font-weight:normal;}
#social-media-elkshp i{padding-left:4px;padding-right:4px;}

#footer li a
{
	display: block;
	width: 180px;
	padding: 4px 1px 5px 15px;
	border-bottom: 1px solid #3d3d3d;
	font-weight: bold;
	font-size: 12px !important;
	text-align: left;
}

#footer a
{
	text-decoration: none;
	font-weight: bold;
	color: #ccc;
	background: none;
}

#footer a:hover
{
	color: #fff;
	text-decoration: underline;	
}





/***** for bootstap nav bar override, drop on hover vs. click:  https://webdesign.tutsplus.com/tutorials/how-to-make-the-bootstrap-navbar-dropdown-work-on-hover--cms-33840; ******/
.dropdown-menu {
  margin-top: -5px;
  z-index: 10;  
}

/* other boostrop nav overrides */
@media (min-width: 992px) and (max-width: 1199px) {
	#searchwrapper {
		display: none;
	}
}

.dropdown-menu legend {
	font-size: 12px;
	color: #bbbbbb;
	margin-top: -5px;
	margin-bottom: -4px;
}

.dropdown-menu {
  background: #333333;
}  

/*---RK--- Adden this to ensure that edit tools in VHP pages did not have dark grey menus*/
.note-dropdown-menu
{
	background: #e1e1e1;
}


.dropdown-menu a {
  color: white;
  font-weight: bold;
}  

.dropdown-menu a[href]:hover {
	 background: black;
	 color: white;
} 

.mainDropdownColumn {
	width: 400px;
	overflow: auto;

}	

.leftDropdownColumn {
	width: 50%;
	float: left;
	border-right: solid .5px white;	
}

.leftDropdownColumn .dropdown-item {
	margin-left: -15px;

}

.rightDropdownColumn {
	width: 50%;
	float: right;
	
}

.rightDropdownColumn .dropdown-item {
	
	padding-left:  10px;
}



@media (min-width: 0px) and (max-width: 1199px) {

	.dropdown-menu {
	    background: #e1e1e1;
	}

	.dropdown-menu a {
 		color: black;
  		font-weight: bold;
	}

	.mainDropdownColumn {
		width: inherit;
	}
	.leftDropdownColumn  {
		width: 100%;
	}
	.rightDropdownColumn  {
		width: 100%;
	}
}

/*buttons*/
.link-button,
.basic-button,
.simple-button,
.simple-form input[type="submit"]
{
margin:2px;
border-radius:3px;
border-style:initial;
border:1px solid;
border-color:#989898;
color:#232323;
background-color:#f1f1f1;
width:auto;
padding:8 12px 8px 12px;
text-decoration:none;
text-align:center;
vertical-align:middle;
display: inline-block;
text-decoration: none;
-moz-box-shadow: #565656 0px 0px 3px;
-webkit-box-shadow: #565656 0 1px 2px;
padding:10px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(162, 162, 162, 0.2) 100%);
}
.link-button:hover,
.basic-button:hover,
.simple-form input[type="submit"]:hover,
.simple-button:hover{
	color:#232323 !important;
	background-color:#e8e8e8 !important;
	cursor:pointer !important;
}

.link-button.green, .simple-button.green
{
background-color:#2d8006 !important;
border-color:#005600 !important;
color:white !important;
}
.link-button.maroon, .simple-button.maroon
{background-color:#800 !important;
border-color:#790000 !important;
color:white !important;
}
.link-button.blue, .simple-button.blue
{background-color:#4373a2 !important;
border-color:#396188 !important;
color:white !important;}


.link-button.green:hover, .simple-button.green:hover
{background-color:#236305 !important;}
.link-button.maroon:hover, .simple-button.maroon:hover
{background-color:#690000 !important; }
.link-button.blue:hover, .simple-button.blue:hover
{background-color:#355a80 !important;}



/********************** LOGIN FORM *********************************/

.loginForm fieldset
{
	position: relative;
	width: 350px;
	padding: 5px;
	margin: 0 30px 0;
	text-align: center;
	-moz-border-radius: 5px; 
	border-radius: 5px;
}

.loginForm label
{
	float: left;
	display: inline-block;
	padding: 3px 4px 4px 15px;
	width: 135px;
	text-align: left;
	background: #ccc;
}

.loginForm label.required
{
	border-left: 7px solid #333;
	padding-left: 8px;
}

.loginForm input[type=text], .loginForm input[type=password]
{
	float: left;
    display: block;
	margin: 0 2px 20px 2px;
    width: 180px;
    font-size: 12px;
}

.loginForm input[type=submit]
{
	clear: both;
    font-size: 12px;
	padding: 2px 5px 2px;
    border: 1px solid #333;
	background-color: #800;
	color: #fff;
}

.loginForm input[type=submit]:hover
{
    border: 1px solid #800;
	background-color: #333;
	color: #fff;
}


/********************** Site Alerts *********************************/

.info { background:url('/images/siteAlert.gif') 15px 10px no-repeat #fff9d8; }
.error { background:url('/images/siteAlert_error.gif') 15px 10px no-repeat #ffe0e0; }

.rightFloat { float:right; padding:0px 0px 20px 20px; text-align:center; clear:both; }
.rightImage { float:right; margin:2px 0 0 20px; }
.iconLeft { float:left; padding:0 15px 5px 0; }
.goButton { height:20px; width:40px; }


.siteAlert {
	width:80%;
	margin:10px auto 20px;
	padding:10px 10px 5px 10px;

	border:1px solid #ccc;

	min-height:65px;

	display:none;
	font-size: 12px; 
	line-height: 26px;
}

.show {
	display:block;
}

.siteAlert img {
	float:left;
}

.siteAlert ul { padding-left:70px; }
.siteAlert ul li { margin-bottom:5px; }

.siteAlert div h2 {
	clear:none;

	font-size:18pt;
	font-family:Helvetica,Arial,sans-serif;
	letter-spacing:-1px;
	font-weight:bold;

	margin:0 0 5px 0;
}

.siteAlert p {
	padding:0 0 0 70px;
	margin:0;
}

/********************** PASSWORD STRENGTH ************************/


#passwordBox{ /*CSS for pop up hint box */
	display: none;
}

.strength0
{
        background:#ff0000;
        color: white;
        padding-left: 5px;
}
 
.strength1
{
        background:#ff5f5f;
        color: white;
        padding-left: 5px;
}
 
.strength2
{
        /*background:#56e500;*/
        background:#ff5f5f;
        color: white;
        padding-left: 5px;
}
 
.strength3
{
        /*background:#4dcd00;*/
        background:#ff5f5f;
        color: black;
        padding-left: 5px;
}
 
.strength4
{
        background:#399800;
        color: white;
        padding-left: 5px;
}

.strength5
{
        background:#399800;
        color: white;
        padding-left: 5px;

}

/********************** accordion overrides ************************/

#accordion .card-header {
    /* background: #336699 !important; */
   /* background: black !important;
    color: white !important;*/
}

#accordion .card-header button {
    /*color: white;*/
    color: #800;
    font-weight: bold;
} 


/********************** elk button stuff ************************/

.btn-elks-list {
	padding-left:  15px;
}

.btn-elks-list .btn-elks{
	margin-bottom:  12px;
	width:  100%;
	text-align:  left;


}

.btn-elks {
	background-color: #800 !important;	
	color: white !important;
}

.btn-elks:hover {
	background-color: #bb0000;	
	color: white;
}

.btn-elks-text {
	color: white !important;	
	font-weight:  bold;
	text-decoration:  none;
}

.buttonMenu {
	padding-left:  12px;
}

.buttonMenu button {
	width:  250px; 
	text-align: left;
	margin-bottom:  12px;
}

.buttonBox {
	width: 100% !important; 
	
}

.desktop
{
	padding:15px;
	padding-top:  10px;
	color:black!important;
	background: #eee;
	border-radius: 2px;
	display: block;
	background-color:#f3f3f3;
	width:  100%;
	margin-left:  auto;
	margin-right:  auto;
	border: solid 1px black;
	margin-top:  12px;
	margin-bottom:  12px;
}




/* BEGIN styles adapted from card classes in /scripts/style.css

RK --- I have made changes to cardPanel attributes*/

#cardPanel
{
	padding: 10px;
	margin-bottom: 10px;
	color: black!important;
	background: #eee;
	border-radius: 2px;
	display: block;
	background-color:#f3f3f3;
	width:  100%;
	height: auto;
	
}



.cardPanel a {text-decoration:none;}
.cardPanel p {line-height:1.39;}


.cardPanel .section-header {
	text-align:  center;
	
}

/*RK --- I've changes the padding size*/
.card-1 
{
	margin-bottom: 10px;
	background-color: white;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.0s ease-in-out;
	float: left;
	width:  100%;
	padding:  10px;
}

.card-1:hover 
{
	box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.cardPhoto
{
	background-repeat: no-repeat;
	background-position: 50%;
	border-radius: 50%;
	border: 1px solid #ccc;
	width: 120px;
	height: 120px;
	float: left;
	margin-left:5px;
	margin-right: 12px;
	background-size:contain!important;
}

.card-1:hover #card-bubble
{
	opacity: .85;
}



/*Stuff from the State Projects pages (some stuff can be universal if applicable)*/

#top-proj-text
{
width:60%;
line-height: 1.5;
padding-left:3px;
padding-top:6px;
}

#top-proj-navigation
{
width:35%;
float:right;
margin-top:-25px;
text-align:right;
}

#proj-categories-bod
{
padding:0 15px 0 15px;
height:auto;
background-color:#f1f1f1;
}

ul#proj-list
{
margin: 6px 0 0 0;
padding: 0 0 41px 0;
background-color:transparent;
float:left;
list-style-type: none;
}

ul li.states
{
height:149px;
margin-bottom:20px!important;
}

ul li.states,
ul li#childrens,
ul li#medical,
ul li#research,
ul li#education,
ul li#therapy,
ul li#disabilities,
ul li#recreation
{
margin: 10px 10px 0 0;
line-height: 1.4;
float: left;
width: 210px;
height: 220px;
padding: 10px;
border: 1px solid #DDD;
color: #333;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color:white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.0s ease-in-out;
}

ul li.states:hover,
ul li#childrens:hover,
ul li#medical:hover,
ul li#research:hover,
ul li#education:hover,
ul li#therapy:hover,
ul li#disabilities:hover,
ul li#recreation:hover
{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

ul li#childrens,
ul li#medical,
ul li#research,
ul li#education,
ul li#therapy,
ul li#disabilities,
ul li#recreation
{
height:300px!important;
}

ul li#childrens a span.label {
background: url(/Programs/images/project_categories/childrens-services.png) repeat-x center bottom;
}
ul li#medical a span.label {
background: url(/Programs/images/project_categories/medical.png) repeat-x center bottom;
}
ul li#research a span.label {
background: url(/Programs/images/project_categories/research.png) repeat-x center bottom;
}
ul li#education a span.label {
background: url(/Programs/images/project_categories/education.png) repeat-x center bottom;
}
ul li#disabilities a span.label {
background: url(/Programs/images/project_categories/disabilities.png) repeat-x center bottom;
}
ul li#therapy a span.label {
background: url(/Programs/images/project_categories/therapy.png) repeat-x center bottom;
}
ul li#recreation a span.label {
background: url(/Programs/images/project_categories/recreation.png) repeat-x center bottom;
}


ul li a span.label {
display: block;
text-decoration:none!important;
padding: 2px 0 105px 0;
font-size: 14px;
font-weight: normal;
font-style: normal;
color: #000;
}
.statelabel > h3
{
font-size:12px!important;
padding:2px;
color:#000;
text-transform:uppercase;
margin-top:-4px;
}
#projectbubble
{
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
border:2px solid #ccc;
width: 80px;
height: 80px;
float:right;
margin-right:-7px;
margin-top: 19px;
}

.statelabelcontainer
{
padding:5px 5px 5px 10px;
}

ul li a span.statelabel {
display: block;
text-decoration:none!important;
font-size: 13px;
font-weight: normal;
font-style: normal;
color: #000;
}

.catcard
{
text-decoration: none!important;
}

.statelabel > p
{
font-family:sans-serif!important;
font-size:12px;
line-height:1.5;
letter-spacing:0.4px;
}
    
    
    
    /*The Stuff That Riley Is Adding:*/
    
.scalingHeader
{
    width: 100%;
    height: auto; 
    max-width: none;
}
    
.flexImageLeft
        {
            flex-wrap:wrap;
            float: left;
            width: 40%;
        }
        
.flexImageRight
        {
            flex-wrap:wrap;
            float: right;
            width: 40%;
        }
        
.flexImage
        {
            display: block;
            margin: auto !important;
            width: 60%;
        }
.flexImageColum
        {
            flex-wrap:wrap;
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }
        
.featureCard {
    box-shadow: 8px 8px 10px #aaa;
    border: 8px solid #E3E3E3;
    margin: 5px 25px 15px 5px;
    -webkit-box-shadow: rgba(0,0,0,1) 1px 2px 5px;

        }
        
@media (min-width: 1px) and (max-width: 767px) {
	.featureCard 
    {
    width: 90%;
    }
}
        
   
        
        
.youtubeEmbed
        {
            display: block;
            width: 560px;
            height: 340px;
            margin: 0 auto;
        }
        
@media (min-width: 1px) and (max-width: 676px) {
	.youtubeEmbed
        {
            width: 440px;
            height: 220px;

        }
}    


/* END styles adapted from card classes in /scripts/style.css */

/* Start of METRICS */

.metrics  td {
	font-size:  smaller !important;
	font-weight:  bold;
}

/*.metrics h6 {
	text-decoration:  underline;
	text-align: center;
}*/

.good {
	color: green !important;
}

.bad {
	color: red !important;
}

/* END of METRICS */


/* Q & A styles */
.topic-header a {
	text-decoration:  none !important;
}

h4.topic-header  {
	font-size:  18px;
}

/* vhp headers */
.lodgeheader1 {background: url('/images/lodgeheader1.jpg') no-repeat !important;}
.lodgeheader2 {background: url('/images/lodgeheader2.jpg') no-repeat !important;}
.lodgeheader3 {background: url('/images/lodgeheader3.jpg') no-repeat !important;}
.lodgeheader4 {background: url('/images/lodgeheader4.jpg') no-repeat !important;}
.lodgeheader5 {background: url('/images/lodgeheader5.jpg') no-repeat !important;}
.lodgeheader6 {background: url('/images/lodgeheader6.jpg') no-repeat !important;}
.lodgeheader7 {background: url('/images/lodgeheader7.jpg') no-repeat !important;}
.lodgeheader8 {background: url('/images/lodgeheader8.jpg') no-repeat !important;}
.lodgeheader9 {background: url('/images/lodgeheader9.jpg') no-repeat !important;}
.lodgeheader10 {background: url('/images/lodgeheader10.jpg') no-repeat !important;}
.lodgeheader11 {background: url('/images/lodgeheader11.jpg') no-repeat !important;}
.lodgeheader12 {background: url('/images/lodgeheader12.jpg') no-repeat !important;}
.lodgeheader13 {background: url('/images/lodgeheader13.jpg') no-repeat !important;}
.lodgeheader1 h2, .lodgeheader2 h2, .lodgeheader4 h2, .lodgeheader6 h2 {color: #000 !important;}