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;
}

.form-canvas {
	background: #e1e1e1; 
	padding: 10px; 
	border: solid 1px #000000;
}

.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;
}

donateButton.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;
}

.elksnews a {
	color: #800 !important;
	text-decoration: none;
}

.elksnews a:hover {
	color: #300 !important;
	
}

/*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;
}

.section-header4 {
	padding: 6px;
	padding-left: 9px;
    text-shadow: 0 12px 12px rgba(0,0,0,0.9), 0 2px 2px rgba(0,0,0,0.9);
/*	background: TBD on CFM file, as an image*/
	color: white;
	text-align: left;
}

.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: 100%;
	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/pd2024HeaderFlag.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;
}


/*2/21/2023: ---RK--- Added a new button in the top horizontal nav to allow the searchbar to appear on iPad width (or merely that size of page)*/
.search-m
{
    display: none;
}



#sidemenu {
	display: inline-block;

}


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

#donateButton {
	display: none;
	margin-top:  -5px;  /* 11/1/2023:  new donate button for ENF mobile */
}

#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;
	}
    
.search-m
{
    display: block !important;
}

}

.nav-link
{
    padding-right: 3px !important;
}



@media (min-width: 1px) and (max-width: 991px) {
    

    .search-m
{
    display: none !important;
}
    
	.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;
}

donateButton.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;
	}

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

	.howlinks
	{
		width: 100%;
	}

	.newsBox {
		margin-top: 8px;
	}

	.homePageUpdates { 
		border-right: none;
	}

}	




.headerlinks a
{
	float: right;
	display: block;
}

.headerlinks a:hover
{
	background-color: transparent !important;
}


@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: 96px;
	height: 96px;
	float: left;
	margin-left:5px;
	margin-right: 12px;
	background-size:contain!important;
}


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


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

.card-2 
{
	margin-bottom: 1px;
	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;
	padding:  5px;
}

.card-3 
{
	border:  solid 1px #999;
    min-height: 40px;
}

/*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;

        }
        
.youtubeEmbed
        {
            display: block;
            width: 560px;
            height: 340px;
            margin: 0 auto;
        }


@media (min-width: 1px) and (max-width: 767px) {
.featureCard 
    {
    width: 90%;
    }
    
.youtubeEmbed
    {
    width: 440px;
    height: 220px;

    }
}
        
   


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


/* - - - EMAS - - - */


.emasLogo
{
    display: visible;
    ertical-align: middle;
    float: left;
    margin-right: 10px;
}



/* - - - EMAS - - - (via "emas/proposer.cfm")*/


.emasInput
{
    font-size:14px; 
    width:280px;
    padding:10px;
    margin-left:20px;
}

.emasElk
{
    display: visible;
}


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

@media (min-width: 1px) and (max-width: 991px)
{   
.emasInput
    {
    width:50%
    }
    
.emasElk
{
    display: none;
}
}
@media (min-width: 1px) and (max-width: 767px)
{   
    .emasLogo
{
    height: 170px;
}
    
.emasInput
    {
    width:90%
    }
}

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

    
/* - - - Start of EMAS - - - (via "emas/invite.cfm")*/    


.inviteBackground
{

    display: block; 
    width: 100%; 
    background: url('emas/images/invite_background.jpg') no-repeat; 
    padding: 10px;
    margin-left: 50px !important;
    
}
    
.inviteCard    
{
    display: block; 
    padding: 10px;
    background: #F3F3F3; /*#CCCCCC*/
    height: 720px;
    width: 60%;     
}

   
@media (min-width: 1px) and (max-width: 1199px)
{
.inviteBackground
{
    margin-left: 0px !important;    
}
    
.inviteCard  
{
    width:69%; 
}
}

@media (min-width: 1px) and (max-width: 991px)
{
.inviteBackground
{
    background: url('000.jpg') no-repeat !important;
}
    
.inviteCard    
{
    width:100%;
    height: auto;
}    
    
}


/* - - - EMAS - - - (via "emas/apply.cfm")*/


.emasInputDisabled
{
    font-size:14px; 
    width:300px;
    padding:10px;
    margin: 5px 0 15px 0;
    background-color: #eeeeee;
}

.emasInputApply
{
    font-size:14px; 
    width:300px;
    padding:10px;
    margin: 5px 0 15px 0;
}


.emasInputApplyMisc
{
    font-size:14px; 
    padding:10px;
    margin: 5px 0 15px 0;
}

.AnswerImage
{
    margin: 0 20px 0 20px;
    display: block;
}

.saveBox
{
    width: 400px;
}

/*
.labelApply
{
    width: 100% !important;
    height: 30px;
    padding-left: 8px;
    padding-top: 4px;
    margin-top: 10px;
    border-left: 7px solid #333;

}
*/



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

}

@media (min-width: 1px) and (max-width: 991px)
{ 
.emasInputDisabled
{
    width:100%;
    margin-top:-4px !important;
}
.emasInputApply
{
    width:100%;
    margin-top:-4px !important;
}


.labelApply
{

}
}
@media (min-width: 1px) and (max-width: 767px)
{ 
.emasInputDisabled
{
     
    width:400px;
    
}
.emasInputApply
{
     
    width:400px;
    
}
    
.AnswerImage
{
    display: none;
}
    
    
}
@media (min-width: 1px) and (max-width: 575px)
{ 
.emasInputDisabled
{   
    width:300px; 
}
.emasInputApply
{   
    width:300px; 
} 
.saveBox
{
    width: 300px !important;
}
    
}

@media (min-width: 1px) and (max-width: 400px)
{ 
.emasInputDisabled
{
    width:220px;
}
.emasInputApply
{
    width:220px;
}

}


    
    
/* - - - EMAS - - - ("invalid" page, via "emas/default.cfm")*/      
    
    
 .invalidBackground
{
    display: block;
/*  background: url('/emas/images/flag_background.jpg') no-repeat;*/
    text-align: center; 
    width: 100%; 
    margin-left: 50px !important;
    height: 720px;
}

.invalidWhite
{
    color: white;
}
.invalidWhiteLarge
{
    color: white;
}
    
.emasInputInvalid
{
    font-size:14px; 
    width:280px;
    padding: 5 10 5 10;
    margin-bottom: 10px;
}

.inalidLabel
{
    width:280px; 
}
    
.invalidCard 
{
    display: block; 
    padding: 10px;
    margin-right: 100px;
    /*background: #F3F3F3; or #CCCCCC*/
    height: 720px;
    width: 75%; 
    float: right;
}

.invalid-alert
{
    padding-top: 10px; 
    padding-left: 70px;
    padding-right: 40px;
    padding-bottom: 5px;
}
    
.invalidContent
{
    margin-top:10px;
    margin-right: 130px;
    float: right; 
    padding: 10px;
    width: 60%;
}


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

.invalidBackground
{
    margin-left: 0px !important;    
}
.invalidCard 
{
    display: block; 
    padding: 10px;
    /*background: #F3F3F3; or #CCCCCC*/
    width: 90%; 
    float: none;
}    
.invalidContent
{ 
    float: none; 
    margin-right: 0px;
    padding: 10px;
}
}


@media (min-width: 1px) and (max-width: 991px)
{   
 .invalidBackground
    {
    background: url('00.jpg') no-repeat !important;
    }
.emasInputInvalid
    {
    width:50%;
    padding: 10px;
    }
    
.inalidLabel
{
    width:50%; 
}
    
.invalidCard    
{
    width:100%;
    height: auto;
}   
    .invalidContent
{
    vertical-align: middle; 
    float: none; 
    width: 100%;
}
    
.invalidWhite
{
    color: black;
}
       
.invalidWhiteLarge
{
    color: #880000 !important;
    text-decoration-style: solid;
}    
    
    
}

@media (min-width: 1px) and (max-width: 767px)
{   

.emasInputInvalid
    {
    width:90%
    }
.inalidLabel
{
    width:90%; 
}
}

 
@media (min-width: 1px) and (max-width: 515px)
{      
.invalidAlert    
{
    height: 120px;    
}
}    
    


/* END of EMAS */

.mediaGallery-play-button {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	text-decoration:none; 
	opacity: .7; 
	filter: alpha(opacity=70); 
	-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; 
	font-size: 200%; 
	color: white;
}

.play-button-test
	{ 
    color: white !important;
    display: block;
    box-sizing: content-box;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 60px;
	opacity:.7;
	position: absolute;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 25%;
    /*border-radius: 50%;*/
    background-color: rgba(204, 209, 217, 0.8);
    transform: translate(-50%,-50%);
}

.video-play-button
	{ 
    color: white !important;
    display: block;
    box-sizing: content-box;
    top: 49%;
    left: 49%;
    width: 64px;
    height: 64px;
	opacity:.7;
	position: absolute;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 25%;
    /*border-radius: 50%;*/
    background-color: rgba(204, 209, 217, 0.3);
    transform: translate(-50%,-50%);
	}
    
.video-play-button:hover
	{
        opacity:.85;
    }
    
.play-button
    {
        padding-top: 8px;    
    }
    
    
@media (min-width: 0px) and (max-width: 450px) 
{
    
.video-play-button   
    {
    width: 50px;
    height: 50px;
    }
    
.play-button  
    {
    padding-top: 1px;       
    }
}




    
/* MY JOURNEY */    
    

.journeyInput
{
    font-size:14px; 
    width:300px;
    padding:10px;
    margin: 5px 0 15px 0;
}

.journeyInputMisc
{
    font-size:14px; 
    padding:10px;
    margin: 5px 0 15px 0;
}

@media (min-width: 1px) and (max-width: 991px)
{ 

.journeyInput
{
    width:48%;
}

}
@media (min-width: 1px) and (max-width: 767px)
{ 

.journeyInput
{
     
    width:400px;
    
}
   
}
@media (min-width: 1px) and (max-width: 575px)
{ 

.journeyInput
{   
    width:300px; 
} 
  
}

@media (min-width: 1px) and (max-width: 400px)
{ 

.journeyInput
{
    width:220px;
}

}






/* END of MY JOURNEY */


.btn-light
{
    background-color: #F0F0F0;
    text-decoration:  none !important;
	color:  #333 !important;
	font-weight:  normal !important;
    color: #444;
    border-color: #999;
    margin-bottom: 5px;
}

.btn-light a {
	text-decoration:  none !important;
	color:  #333 !important;
	font-weight:  normal !important;
}

.btn-light:hover
{
    background-color:#DFDFDF;
    color: #333 !important;
    border-color: #999;
}


.table .thead-light th
{
    background-color: #EEEEEE !important;
}

.table-bordered th
{
    border: 1px solid #CDCDCD !important;
}

.table-bordered td
{
    border: 1px solid #D2D2D2 !important;
}




/* 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;}

/*  DD Dashboard */

.pendingButton {
	width:  150px;
	background: #99CC99;
}

.newButton {
	width:  150px;
	background: #e1e1e1;
}

.submittedButton {
	width:  150px;
	background: #FF9797;
}

.wideButton {
	width:  300px;
}

/* end of DD dashboard */


/* Home Page Elks Magazine 100 Years Highlight */
.YearsBanner
{
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    -webkit-filter: drop-shadow(2px 2px 3px #555);
}

@media (min-width: 1px) and (max-width: 575px)
{ 
.YearsBanner
{
    width: 94%; 
    height: auto;
}
}

.YearsMagazineBox
{
    border: solid 1px #dddddd;
    font-family: 'Oswald', sans-serif;
    padding: 10px;
    background: whitesmoke;
    margin-top: 30px;
}
/* end of Elks Magazine 100 Years Highlight */


/* for Hello Bill messaging system */
.hellobillin {
	background:  lightblue;
	border:  solid 1px #eeeeee;
	float:  right;
	padding:  10px;
	clear:  both;
	width:  50%;
	border-radius: 7px;
	padding: 8px;
}

.hellobillout {
	background:  lightpink;
	border:  solid 1px #eeeeee;
	float:  left;
	padding:  10px;
	clear:  both;
	width:  50%;
	border-radius: 7px;
	padding: 8px;
}

.membershipyears {
	/*background-color:#800 !important;
	border-color:#790000 !important;*/
	background-color: black;
	color: AntiqueWhite;
/*	color:white !important;*/
	font-size:  smaller;
	padding:  5px;
	margin-top:  10px;
	margin-bottom:  10px;

}

.messageread {
	font-size: 10px;
	font-style: italic;
	text-align: right;
	font-weight: bold;
}

.tobill {
	background-color: #e1e1e1;
	
	float: left;
	border-radius: 7px;
	border: 1px solid #ccc;
}

.frombill {
	
	background-color: #e1e1e1;
	
	float: right;
	border-radius: 7px;
	border: 1px solid #ccc;
}

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

.userProfile {
/*	font-family: 'Open Sans', sans-serif!important;*/
	text-align: center;
}

/*.userProfile h1 h2 h3 {
	letter-spacing:-1px;
	color:#696969;
	font-weight: bold;
}*/

.userProfile h1 {
	letter-spacing:-1px;
	color:#696969;
	font-weight: bold;
	font-size:34px;color:#696969;
}
.userProfile h2 {
	letter-spacing:-1px;
	color:#696969;
	font-weight: bold;
	font-size:24px!important;

}
.userProfile h3 {
	letter-spacing:-1px;
	color:#696969;
	font-weight: bold;
	font-size:18px;border-bottom:1px solid #f1f1f1; background: #e1e1e1;
}

.userProfile .photo
{
	background-repeat: no-repeat;
	background-position: 50%;
	border-radius: 50%;
	border: 1px solid #ccc;
	width: 180px;
	height: 180px;
	background-size: 100%;
	background-size:contain!important;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 18px;
}

.userProfile .redlink{color:#800;text-decoration:underline;}