/* CMSIMPLE (Dave's) styles */
/********************************************************************/
/* NOTES regarding searching for key styles that affect look n feel */
/********************************************************************/
/* BROWSER NAV-MENU height - search #nav ul li and set the padding (eg 50px 20px 50px 20px )*/
/********************************************************************/
* { box-sizing: border-box; } /* good practice but will demand I go back and get specific with padding & margins */
body {
	font-family: Georgia; 
	color: #222;
	background: black;
	margin: 0;
	padding: 0;
}
/* 	SITE color scheme - in the pertinent divs, add these classes instead of 
	baking specific values into the div IDs - this way by changing one CSS line, 
	you can update an entire site color scheme. I'm using CAPS bs these are CONSTANTS
*/
p { font-size : 1.4em; line-height: 1.4em; }
h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#606d93;}
img { display:block; } /* keeps imgs from being unable to tight flush with next item */
#searchbox {display:normal;} /* searchbox visibility only import for sites with LOTS of content */
.NAV-MENU { font-family: sans-serif; background-color: #26272f; color: #baccdb; opacity: 0.95; } /* nav menu bkgd and text color */
.NAV-MENU ul :hover { background-color: #353535;} /* 'box' color on hover */
.NAV-MENU ul li:hover { color: #fff; font-weight: normal; } /* text color on hover */
.MOBILE-NAV-MENU {color: white; font-weight: normal; } /* the box that you click to pop open the mobile menu */
.site-bkgd { background: #e5dbe8;} /* change this to chg default bkgdcolor for the whole site in one step */
.content-bkgd { background: inherited;}
#content a:link {text-decoration:underline; color:#666;}
#content a:hover { color:white; background-color:#496d89;}
#content ul li { font-size:1.2em; line-height:1.6;}
#content ol {font-size:1.2em}
#content img {display:inline-block;width: 100%;} /* back to default display b/c block style makes centering impossible */
.login { font-family:sans-serif; font-size:.8em; padding-left: 30px;}
.login a { color:#ccc }
.doc, .docs, .sdoc, .sdocs {cursor: pointer; } /* so when you hover you get a pointer cursor */
/* UTILITY CLASSES */
.centered {text-align:center;}
.white-text { color: white;}
.row { width: 100%;}
.with {}
.sm {font-size:.9em;}
.italic {font-style:italic;}
.padded-40px { padding: 40px 0px 40px 0px;}
.cushioned { padding: 20px 0px 40px 0px; } /* could be modded for more or less padding per media queries */
.HIDDEN {display:none;}
/* experimental filters for desaturating images */
.desaturate {filter:grayscale(100%)}
.desaturate:hover {filter:grayscale(0%)}
/* add this class to any image that you intend to make a clickable link */
.btn-img {   
	transition: 0.2s ease;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	transform: scale(0.98, 0.98);
	}
	
.btn-img:hover { /* when you hover it shrinks a bit*/
	transform: scale(1, 1);
	}
.black { background:black; }
/* SUBMENUS */
/* to remove them from the nav menu (but still show up on the in-page submenu, display:none */
/* keep in mind if the pages are hidden with #CMSIMPLE HIDE# they will still NOT show up in the submenu */
.menulevel2, .menulevel3 { display:none; }
/* the following styles can be commented OUT if the popup submenus are not wanted */
/* from here...*/
.menulevel2, .menulevel3 { position:absolute; top:260px; background-color:white; color:black; width:160px;}
 /*...to here */
/* stylin' the submenu that appears on the content page */
	/* /scripts/misc-functionality.js includes proc to change the submenu label to whatever you want */
	#subnav  h4 { margin-bottom:-6px; }
	/* uncomment the following line if you do NOT want ANY submenu appearing under the content area
	.submenu {display:none;} 
	*/
	.submenu { font-size: 1.2em; list-style: none; line-height:2em; }
	.submenu a:hover { text-decoration:underline;}
	
.NAV-MENU a { 
	text-decoration: none; /* gets rid of underlines on links in the nav menu*/
	color: inherit; /* so it simply picks up color from bkgd */
} 
.FIXED { /* add this to the navmenu's class to make it static fixed position instead of scrolling */
	position:fixed;
	width:100%;
	z-index:10;
	}
	
/* CUSTOM STYLES PLUGGED INTO FCKEDITOR */
/* Two-up and Three-up divs  and any other special cases I care to add ... */	
/* threeup is like the bootstrap style where you see three team members in a row with an image and credential, then on mobile, they all stack vertically */
/* My advice, don;t use 'em much, theya re klunky to deal with if you are not comfy editing code directly bc CMSIMPLE tends to get it wrong... */
/* HOWEVER!!! if you find the fckeditor custom configurations xml file, you can see how to add custom styles into fckeditor! The way to do it is to :
	1) add a menu item for styling
	2) declare it as a div, p, class, whatever, and specify the class name, then
	3) actually define the class' style here
*/
.flexi { text-align: center; margin: 0 auto;} /* wrapper div for two-up and three-up */
/* threeup = THREE to a page, twoup = DIV that takes up 2/3 of the width 
   leaving enough room for one more threeup to fill out the page */
   
.threeup, .threedown, .twoup , .fifty-fifty {
	background: inherited; 
	width:30%;
	font-size:1.2em;
	display:inline-block;
	vertical-align: top;
	text-align: center;
	margin:0;
	padding:8px;
}
.fifty-fifty { width:47%; } /* 50% and the padding causes the two halves to stack not inline in desktop */
.headline { font-size:2em; font-style:italic; font-weight:bold;color:gray;} /* typical use - a headline within a fifty-fifty beside an image */
.headline_small{ font-size:1.7em; font-style:italic; font-weight:bold;color:gray;} /* typical use - a headline within a fifty-fifty beside an image */
.twoup { width:60%; text-align:left; }
.threeup img, .threedown img, .fifty-fifty img {
	display: inline;
	margin: 0 auto;
	width:100%;
	height:auto;
}
/* IDs / CLASSes pertinent to the NAV menu */
	
#nav ul {
	overflow: hidden; 			
	padding: 0;
	text-align: center; /* left/right/center determines the alignment of the horz nav menu */
	padding-right: 30px;
	padding-left: 100px; /* keeps it from bumping into a graphic in the non-mobile menu */
	margin: 0;
	}
	
#nav ul li {
	font-size : 1em; /* a matter of taste  this is the size of the actual text in the nav menu */
	display: inline-block;
	padding: 20px 20px 20px 20px; /* top right bottom left - makes them a button in effect */
}
#content {
	line-height: 1.5em;
	font-size: 0.9em;
	padding: 40px;
	margin: 0 auto;
	padding-top: 8px;
	opacity: 90.3%;
	background: white;
	padding-bottom: 80px;
}
#LOGO { 
	float:left;
	padding-top: 3px;
	padding-bottom: 0px;
	padding-left:5px;
	margin:5px;
	}
#FOOTER {
	width:100%;
	height:50px;
	background-color:#c7bbcb;
	position:fixed;
	left: 0;
	bottom: 0;
}
	
/****************** SLIDESHOWS **********************************/
.slideshow { /* defaults */
	margin: 0 auto; 
	width:100%;
	overflow:hidden;
	display:hidden;
}
.slideshow img { width:100%; height:auto; display:none;}
/* testing custom fckedit styles */
.Yellow {color:red;background:yellow;}
.Green {color:green;}
/*************************************************/
/* MEDIA QUERIES */
/*************************************************/
/* FULL SIZE BROWSER */
@media screen and (min-width: 960px)
{
	#content { width:880px;}
	#BANNER {background-image:url('./../../images/site-bkgd.jpg');}
	#BANNER  img{margin:0 auto; padding-bottom:0px; padding-top:0px;} 
	#NAV_ICON { position:absolute;left:30px;top:1px;width:54px;}
	#menutitle {display:none;} /* otherwise text menu label shows up in full size browser */
#menu-icon {display:none;}	
	
	/* padding for Autumn Ridge / Cherry Hill : 20px below banner using png alpha == DOUBLE img file size */
}
/* SMALL SCREEN (PHONE ETC) */
@media screen and (max-width: 960px){
	/* MOBILE MENU */
	#menubutton { /* the mobile menu header */
		width: 100%;
		text-align: center; /* alternatively make it left ... */
		box-sizing: border-box;
		padding: 15px 15px;
		cursor: pointer;
	}
	
	#menubutton  img {  /* the mobile menu icon */
		width:50px;
		float:right;
		position:relative; /* as opposed to default position:static, this makes it so top and left work */
		display:block;
		top:-20px;
		
	}
	p { 	font-size:1.4em; line-height:1.4em;}
		
	#nav ul { /* causes menu to be hidden until clicking the menu button */
		max-height: 0;
		padding-right:0px; /* compensates for padding-right:15px in browser menu */
		padding-left: 60px;
	}
	
	#nav ul li {
		box-sizing: border-box; /* without this each box would add the padding we have in the large screen nav */
		width: 100%;
		padding: 15px;
		text-align: left; /* text alignment of mobile menu items */
	}
	
	#menubutton {
		display: block;
		text-align:center;
		padding-left:0px;
	}
	
	#NAV_ICON { /* makes the icon smaller for mobile */
		position:absolute;
		left:10px;
		top:10px;
		width:30px; 
		}
	
	#content img {width:100%;} 
	#BANNER img { max-width:100%; }
	#content ul { margin-left:-20px; }
	#content ul li { font-family:sans-serif; font-size:1.2em; line-height:1.6em; }
	
	#LOGO {display:none;} /* for mobile a different version of the banner appears */
	.flexi { text-align: center; }
	.twoup { width:100%;}
	.fifty-fifty {width:100%}
	.threeup  { display:inline; width:100%;} /* makes threeups stack in mobile */
	.fifty-fifty { display:inline; width:100%;}
	.threeup img { width:100%; height:auto;}
	#content .threedown, 
	#content .threedown img {display: none;} /* makes the extra images in a threeup disappear so in mobile there is only one */
	.fifty-fifty img { width:100%; height:auto;}
	
	#FOOTER {
	height:20px;
  } 
	
	.login { display:none; } /* you cannot log in thru mobile */
}