body {
	color:#666; 		/* ###!!! overall body text color */
	font-family:arial; 	/* ###!!! overall site font */
}

p { font-size : 1.1em; line-height: 1.5em; } 											/* ###!!! Body text font size */
h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#558; display:none;} 				/* ###!!! automatic page headings, display:none to hide */
h5 { font-size : 1.5em; font-weight: 900; line-height:1.2em; margin:10px 0 20px 0;} 		/* ###!!! TRBL for headlines within the content in the easiest possible way for users */

#SEARCHBOX {display:normal;} 															/* ###!!! SEARCHBOX - only make visible for sites with LOTS of content */
#BREADCRUMBS {display:normal; padding-bottom:10px;} 										/* ###!!! locator function generally not needed to be seen */
#CONTENT_CONTAINER { 	
	background-color : #fff; 															/* ###!!! background for the ENTIRE window, not just content area */
}
#CONTENT {
	line-height: 1.7em;
	font-size: 1em;
	background-color:inherit; 															/* ###!!! use inherited to allow the overall window bkgd color to show thru */ 
}
#CONTENT a:link {text-decoration:underline; color:#666;} 								/* ###!!! color / decoration for links IN THE CONTENT */
#CONTENT a:hover { color:#3d506d; }														/* ###!!! hover color for links IN THE CONTENT */

																				/*******************************/
																				/* nav menu bkgd and text */
																				/*******************************/


.nav-menu { 																				/* CLASS for the containing div that holds the entire nav system */
	font-weight: bold;
	font-size: 1em; 																	/* ###!!! size of menu items text - browser */
	color : #8cc0dc; 																	/* ###!!! text color for nav menu items */
	opacity: 0.95; 
	background-color:#3d506d; 															/* ###!!! overall background color for the entire navigation menu */
	box-shadow: 5px 5px 5px #333;														/* ###!!! optional shadow under entire nav menu area */
	} 
	
.nav-menu ul li:hover, #SUBMENU li:hover { 
	background-color: #8cc0dc; 															/* ###!!! BOX color on hover */
	color: white; 																		/* ###!!! text color on hover */ 
	} 	
	
/* the box that you click to pop open the mobile menu */

.mobile_nav_menu {
	color: white; 																		/* ###!!! color of the mobile menu TITLE text, NOT the menu items */
	font-weight: bold; 
	} 	
	
#SUBCONTAINER { 																		/* container div that holds the popdown submenu */
	box-shadow: 5px 5px 5px #333;  												/* ###!!! optional shadow under the popdown menu */
}

#SUBMENU { 																			/* div containing the popdown menu items themselves */
	height:100%;
	background-color: #3d506d; 															/* ###!!! the box that contains each individual popdown menu item */ 
	color: #8cc0dc; 																	/* ###!!! the text of the popdown menu items */
	font-size: .8em;
	text-align: left; 																	/* ###!!! alignment of popdown menu items */
	display:normal; 																	/* ###!!! change to display:none to GET RID OF POPDOWN MENUS */
}




/* STYLES SPECIFIC TO FULL SCREEN BROWSERS */

@media screen and (min-width: 960px) /* full size browser */
{
	/* the next two styles are in media query fullscreen bc otherwise they override the mobile menu and would require more overrides below */
	
	#NAV ul { 																			/* deals with the overall box that CONTAINS the standard nav menu*/
		text-align: right; 																	/* ###!!! overall flush of the ENTIRE nav menu as a unit */
		padding-right: 30px;																/* w/ flush right, you prob want some padding */
		padding-left: 0px; 																	/* keeps it from bumping into a graphic in the non-mobile menu */
		}
		
	#NAV ul li { 																			/* deals with individual nav menu items - depends largely on whether the client has LOOOOOOONG menu titles*/
		max-width: 150px;																	/* ###!!! width limit of individual menu items - if they are too long, they wrap to multiple lines */
		height : 90px; 																		/* ###!!! "thickness" of the menu  */
		font-size : .9em; 																	/* ###!!! a matter of taste  this is the size of the actual text in the nav menu */
		padding: 15px 10px 60px 20px; 														/* ###!!! Top, Right, Bottom, Left - menu 'thickness' */
		text-align: center;																	/* text alignment of individual menu items (as opposed to the entir emenu block as a whole) */
	}

	#CONTENT { width:960px; padding-top:10px;}
	#NAV_ICON { 																			/* ###!!! icon that appears in nav menu, typically a company logo */
		position:absolute;
		left:2%;
		top:10px;
		width:35%;
		max-width:280px;
		/* box-shadow: 5px 5px 5px #555;*/ 												/* ###!!! with this it has a shadow that allows it to nicely overlap the nav menu*/
		}
}
		
/* SMALLER SCREEN (TABLETS ETC) */
@media screen and (max-width: 960px){

	h5 { font-size : 1.2em; font-weight: 900; line-height:1.2em; margin:10px 0 20px 0;} /* ###!!! headlines generally want to be a bit smaller on mobile */
	
	#CONTENT ul { font-size:1em;}		/* ###!!! an unordered list can be tiny-ish on  big screen but generally bigger for mobile bc of touch clicking */
	

	#MOBILE_MENU_TITLE { display:none;} 													/* ###!!! in some cases the company logo is all you need */

	#MOBILE_MENU_LINES {  															/* the mobile menu icon */
		margin-top:0px; 																/* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -20px */
	}
	
	#NAV ul li {
		padding: 15px 30px 15px 10px; 													/* ###!!! TOP RIGHT BOTTOM LEFT - Use this to massage mobile menu item positioning */
		text-align: right; 																/* ###!!! text alignment of mobile menu items */
		font-size:1.0em;																/* ###!!! mobile menu font size */
	}	
	
	.nav-menu {box-shadow:none;} 														/* ###!!! generally shadows look cheesy on a mobile nav menu */

																					/* the icon (or logo) that appears in the nav manu is generally made smaller for mobile */
	#NAV_ICON { 
		position:absolute;
		left:10px;
		top:10px;
		width:180px; 																	/* ###!!! usually the logo sizing needs tweaking for mobile */ 
		}
}