/* CMSIMPLE (Dave's) styles */
body {
	margin: 0;
	padding: 0;
	font-family: Georgia; 
	color: #666;
}
/* 	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 {font-size : 1.4em; font-weight:normal;}
.NAV-MENU { font-family: sans-serif; background-color: #024037; color: #baccdb; opacity: 0.95;} /* nav menu bkgd and text color */
.NAV-MENU ul :hover { background-color: #496d89;} /* 'box' color on hover */
.NAV-MENU ul li:hover { color: white; 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: white;} /* 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-family:sans-serif; font-size:1em; }
.login {font-family:sans-serif; font-size:.8em; }
.login a { color:#DDD; }
/* UTILITY CLASSES */
.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;}
.black { background:black; }
/* this makes submenus invisible in the nav but show up in the submenu area of the content */
/* keep in mind if the pages are hidden with #CMSIMPLE HIDE# they will NOT show up in the submenu */
.menulevel2, .menulevel3 { display: none; }
/* 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: .85em; 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: left; } /* 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, .twoup {
	/* background: yellow; */
	width:30%;
	font-size:1.2em;
	display:inline-block;
	vertical-align: top;
	text-align: center;
	margin:0;
	padding:8px;
}
.twoup { width:60%; text-align:left; }
.threeup img {
	display: block;
	margin: 0 auto;
	width:100%;
	height:auto;
}
/* IDs / CLASSes pertinent to the NAV menu */
	
#nav ul {
	overflow: hidden; 			
	padding: 0;
	text-align: right; /* left/right/center determines the alignment of the horz nav menu */
	padding-right:30px;
	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;
}
#BANNER { 
	float:left;
	padding-top: 9px;
	padding-bottom: 0px;
	padding-left:5px;
	margin:5px;
	}
/* MOBILE MENU */
#menubutton { /* the mobile menu header */
	width: 100%;
	text-align: center; /* alternatively make it left ... */
	box-sizing: border-box;
	padding: 15px 10px;
	cursor: pointer;
	display: none;
}
#lines {  /* the mobile menu icon */
    border-bottom: 13px double #ccf324; /* ccf324 is blended planet green */
    border-top: 4px solid #ccf324; 
    content:"";
    height: 5px; 
    width:28px;
	float:right;
}
/****************** 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: 850px)
{
	#content { width:800px;}
}
/* MEDIUM - TABLET? */
@media screen and (min-width: 580px) and (max-width: 850px)
{
	#content { width:90%; }
	#content img { max-width:100%;}
}	
/* SMALL SCREEN (PHONE ETC) */
@media screen and (max-width: 580px){
	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 */
	}
	#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: center; /* center makes for more intuitive touch navigation than flush left */
	}
	#menubutton {
		display: block;
		text-align:left;
		padding-left:30px;
	}
	
	#content img { max-width:100%; }
	#content ul { margin-left:-20px; }
	#content ul li { font-family:sans-serif; font-size:1.2em; line-height:2em; }
	
	#BANNER {display:none;} /* for mobile a different version of the banner appears */
	.flexi { text-align: center; }
	.twoup { width:100%;}
	.threeup { display:inline; width:100%;} /* makes threeups stack in mobile */
	.threeup img { width:100%; height:auto;}
	
	.login { display:none; } /* you cannot log in thru mobile */
}
/*************************************************/
/* 3rd party styles
**************************************************/
/* Skeleton */