/* Select Box Dropdown Menu Styles */
.select-menu {display: none;}

/* Masthead
-----------------------------*/
#phone-masthead {
	/*position: fixed;*/
	position: relative;
	z-index: 901;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 4px 4px;   -moz-box-shadow: rgba(0,0,0,0.5) 0 4px 4px;   box-shadow: rgba(0,0,0,0.5) 0 4px 4px; 
	width: 100%;
	height: 32px;
	
	background: #fff8e8; /* Old browsers */
	background: -moz-linear-gradient(top,  #fff8e8 0%, #d8d1be 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff8e8), color-stop(100%,#d8d1be)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fff8e8 0%,#d8d1be 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fff8e8 0%,#d8d1be 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fff8e8 0%,#d8d1be 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fff8e8 0%,#d8d1be 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff8e8', endColorstr='#d8d1be',GradientType=0 ); /* IE6-9 */
}

#masthead {
	-webkit-box-shadow: rgba(0,0,0,0.5) 0 4px 4px;   -moz-box-shadow: rgba(0,0,0,0.5) 0 4px 4px;   box-shadow: rgba(0,0,0,0.5) 0 4px 4px; 
	position: relative;
	background-color: #ffffff;
}

#phone-masthead { position: fixed; display: none;}

@media screen and (max-width: 800px) {
	#phone-masthead {		display: block;	}
	#masthead {		display: none;	}
}


/* Header
------------------------------------------*/
#hgroup {
	display: block;
}

#main-header-left, #main-header-right { 
	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(https://houxhandyman.com/scripts/boxsizing.htc); /* IE7 would not recognize a URL relative to stylesheet.  I had to put it relative to site root */
	padding-top: 0.5em;	
 } 

 
#main-header-left { width: 30%; float: left; padding-left: 0em}
#main-header-right { width: 70%; float: right; padding-right: 0em; text-align: right;  }

#main-header-right .widget { text-align: left; margin-bottom: 1em;}

/* Change the max-width breakpoint here to adjust how the design degrades*/
@media screen and (max-width: 800px) {
	#main-header-left {  width: 100%; float: none; padding-left: 0em; padding-right: 0em; }
	#main-header-right { width: 100%;  float: none; text-align: right; padding-left: 0em; padding-right: 0em; }
}


#mainheader {
	background: #c5ddec url('../images/headerbg.png') no-repeat center top;
	box-shadow: rgba(0,0,0,0.4) 0 8px 8px;
    -webkit-box-shadow: rgba(0,0,0,0.4) 0 8px 8px;
	min-height: 118px;
}

#mainheader .page-constraint { }
#mainheader .c1 { padding-left: 2em; padding-right: 2em; }

/* Footer
------------------------------------------ */
#footer {		
	color: #faf9e2;
	padding: 0;	 line-height: 1.7;
	background-color: #2f2f2f;
	/*margin-bottom: 40px; Look in the woahbar.css stylesheet for a #footer margin-bottom line to accomodate the bottom woahbar */
}

#footer .page-constraint { padding-left: 10px; padding-right: 10px;  }
#footer .c1 {padding-left: 2.5em; padding-right: 2.5em;}

@media screen and (max-width: 700px) {
	#footer .c1 { padding-left: 0.5em; padding-right: 0.5em; }
}

/* Primary Menu
---------------------------------------------------------------*/
 /* container div is required for Sticky navigation with waypoints.js 
 * Put your main styling on pri-nav, but put your vertical margins and other height-affecting attributes on the container */
#pri-nav-container {
	
}

@media screen and (max-width: 700px) {
	#pri-nav .c1 { padding-left: 1em; padding-right:1em; }
}

/* IE8 will use px value.  All other browsers will use the rem value. */
#primary-menu a { 	font-size: 25px; font-size: 1.3rem;} /* 1st level */
#primary-menu li li a { font-size: 25px;	font-size: 1rem;	}	/* 2nd and 3rd levels */

#primary-menu a { font-family: 'PT Sans Narrow', 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif; }
#pri-nav {
	text-align: left;
	clear: both;
	position: relative;
		
	background: #eeeeee; 

	-webkit-box-shadow:  0px 5px 3px 0px rgba(0, 0, 0, .4);
    box-shadow:  0px 5px 3px 0px rgba(0, 0, 0, .4);
}

@media print { #pri-nav { background-color: #ffffff !important; background-image: none !important; } }

#primary-menu {
	margin: 45px 0 0 0;
	text-indent: 0;
	overflow: visible;
	float: right;
}

@media screen and (max-width:800px) {
	#primary-menu {
		margin-top: 10px;
		margin-left: 10px;
		float: left;
		text-align: center;
	}
}

#primary-menu li ul {
	display: none;
	margin: 0;
	padding: 0;
	float: none;
	position: absolute;
	top: 32px;
	z-index: 20;
	width: 250px;  /*    left & right padding from {#pri-nav li ul li a}   added and the width hardcoded for IE 7 compatibility. */
	/* NOTICE:  We are NOT using border-box box sizing for the menu.  This is important.  Turning it on would mess up IE7 and change the way padding is computed */
}

#primary-menu li ul ul { top: 0;	left: 100% !important; }

#primary-menu li a {
	color:  #222222;
	padding: 0 0.5em;
	line-height: 1.7;
}

/* 1st level background color while hovering over 1st level menu*/
#primary-menu a:hover {	color: #fff; 	background-color: #555555; /* Read BUG comment further down to understand the caveats of this setting */}

#primary-menu li:first-child a {	margin-left: -0.5em; }
#primary-menu li li:first-child a {	margin-left: 0; }

/* 1st-level anchor color while hovering over expanded 2nd level menu. */
#primary-menu .sf-menu li:hover a, #primary-menu .sf-menu li.sfHover a {
		color: #222222;
}

/* 1st level background color while hovering over expanded 2nd level menu. */
/* Tip:  Looks good if its just a shade darker than the expanded menu background */
#primary-menu .sf-menu li:hover, #primary-menu .sf-menu li.sfHover,
#primary-menu .sf-menu a:focus, #primary-menu .sf-menu a:hover, #primary-menu .sf-menu a:active {
	background: #aaaaaa; /* Old browsers */

	/* BUG:  If using a gradient here instead of a single solid color background, the gradient will *always* be the background used while hovering.
           The background color set in #primary-menu a:hover won't have any effect. */
}

/* 2nd and 3rd level expanded menus. */
/* Tip:  Background color COULD be set here if you want one large background image or gradient behind the anchors. */
#primary-menu li > ul {
	border: 1px solid #edf7ff;
	-webkit-box-shadow:  1px 2px 2px 2px rgba(0, 0, 0, .3);
	 box-shadow:  1px 2px 2px 2px rgba(0, 0, 0, .3);
}

.sf-menu a.sf-with-ul { min-width: 0; padding-right: 0.5em;}

/* 2nd and 3rd level expanded menu anchors. */
/* Tip:  Setting background color here is per-anchor, so you could set a soft gradient to make the anchors look like a series of chained buttons. */
#primary-menu li ul li a {
	background: #7fb87f;  
	color: #222222;
	line-height: 1.5;
	border-bottom: 1px solid #e3c4b6;  /* Separator between menu items */
	
}

/* 2nd and 3rd level expanded menu anchors HOVER */
#primary-menu li ul li a:hover {
	background: #5f8d5f;
	line-height: 1.5;
}

/* Text corresponding to the currently displayed page. */
#primary-menu .current-menu-item > a,
#primary-menu .current-menu-ancestor > a,
#primary-menu .current_page_item > a,
#primary-menu .current_page_ancestor > a {
	 color: #222222 !important;
    font-weight: bold;
	text-decoration: underline;
}

/* Text corresponding to the currently displayed page while hovering. */
#primary-menu .current-menu-item:hover > a,
#primary-menu .current-menu-ancestor:hover > a,
#primary-menu .current_page_item:hover > a,
#primary-menu .current_page_ancestor:hover > a {
	/*color: #426e40 !important;*/
}

/* Footer Navigation
---------------------------------------------------------------*/
/* IE8 will use px value.  All other browsers will use the rem value. */
#footer-nav { 	font-size: 25px; font-size: 1.3rem;} /* 1st level */
#footer-menu li li a { font-size: 25px;	font-size: 1rem;	}	/* 2nd and 3rd levels */

#footer-nav {
	text-align: left;
	clear: both;
	position: relative;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#footer-nav .c1 { padding-top: 0.5em; }
@media print { #footer-nav { background-color: #ffffff !important; background-image: none !important; } }

#footer-menu {
	text-indent: 0;
		overflow: visible;
}

#footer-menu li ul {
	display: none;
	margin: 0;
	padding: 0;
	float: none;
	position: absolute;
	top: 32px;
	z-index: 20;
	width: 250px;  /*    left & right padding from {#footer-menu li ul li a}   added and the width hardcoded for IE 7 compatibility. */
	/* NOTICE:  We are NOT using border-box box sizing for the menu.  This is important.  Turning it on would mess up IE7 and change the way padding is computed */
}

#footer-menu li ul ul { top: 0;	left: 100% !important; }

#footer-menu li a {
	color:  #faf9e2;
	padding: 0 0.5em;
	line-height: 1.7;
}

/* 1st level background color while hovering over 1st level menu*/
#footer-menu a:hover {	color: #fff; 	background-color: #555555; /* Read BUG comment further down to understand the caveats of this setting */}

#footer-menu li:first-child a {	margin-left: -0.5em; }
#footer-menu li li:first-child a {	margin-left: 0; }

/* 1st-level anchor color while hovering over expanded 2nd level menu. */
#footer-menu .sf-menu li:hover a, #footer-menu .sf-menu li.sfHover a {
		color: #ffffff;
}

/* 1st level background color while hovering over expanded 2nd level menu. */
/* Tip:  Looks good if its just a shade darker than the expanded menu background */
#footer .sf-menu li:hover, #footer .sf-menu li.sfHover,
#footer .sf-menu a:focus, #footer .sf-menu a:hover, #footer .sf-menu a:active {
	background: #aaaaaa; /* Old browsers */

	/* BUG:  If using a gradient here instead of a single solid color background, the gradient will *always* be the background used while hovering.
           The background color set in #footer-menu a:hover won't have any effect. */
}

/* 2nd and 3rd level expanded menus. */
/* Tip:  Background color COULD be set here if you want one large background image or gradient behind the anchors. */
#footer-menu li > ul {
	border: 1px solid #edf7ff;
	-webkit-box-shadow:  1px 2px 2px 2px rgba(0, 0, 0, .3);
	 box-shadow:  1px 2px 2px 2px rgba(0, 0, 0, .3);
}

/* 2nd and 3rd level expanded menu anchors. */
/* Tip:  Setting background color here is per-anchor, so you could set a soft gradient to make the anchors look like a series of chained buttons. */
#footer-menu li ul li a {
	background: #7fb87f;  
	color: #fff;
	line-height: 1.5;
	border-bottom: 1px solid #e3c4b6;  /* Separator between menu items */
	
}

/* 2nd and 3rd level expanded menu anchors HOVER */
#footer-menu li ul li a:hover {
	background: #5f8d5f;
	line-height: 1.5;
}

/* Text corresponding to the currently displayed page. */
#footer-menu .current-menu-item > a,
#footer-menu .current-menu-ancestor > a,
#footer-menu .current_page_item > a,
#footer-menu .current_page_ancestor > a {
	 color: #fff !important;
    font-weight: bold;
	text-decoration: underline;
}

/* Text corresponding to the currently displayed page while hovering. */
#footer-menu .current-menu-item:hover > a,
#footer-menu .current-menu-ancestor:hover > a,
#footer-menu .current_page_item:hover > a,
#footer-menu .current_page_ancestor:hover > a {
	/*color: #426e40 !important;*/
}


#crumbs {
	font-size: 0.85em;	
	margin-bottom: 2em;
}

#crumbs, #crumbs a {
	color: #444444;
	text-decoration: none;
}

/* Login Form
--------------------------------- */
#loginform { margin-top: 0.5em; width: 15.1em; float: left;}
.login-username, .login-password { height: 0.7em; }
.login-username label, .login-password label { width: 5em;  float: left; clear: left;}
.login-username input, .login-password input { width: 10em; float: left;  height: 1.2em; clear: right;} 
.login-remember { width: 10em; float: left; clear: left;}
.login-submit { float: left; width: 5em; }
.login-submit input { padding-top: 0.3em; padding-bottom: 0.3em; }

@media screen and (max-width: 800px) {
	#loginform { float: none; width: auto; }
}