/*************************

NOTES  

paletton.com is a good place to explore color schemes

*****************************/


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

p { font-size : 1.4em; line-height: 1.4em; } /* ###!!! Body text font size */
h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#558; display:none; text-align:left;}  /* ###!!! automatic page headings, display:none to hide */

/* ###!!! TRBL for ***headlines within the content*** in the easiest possible way for users */
h5 { 
	/* font-family: verdana;*/ 
	font-size : 1.4em; 
	font-weight: 800; 
	line-height:1.2em; 
	margin:10px 0 20px 0;
	} 		

#NAV {position:fixed; width:100%;} /* alt chg to position:fixed */
#BANNER  { text-align:center;}	/* if the site has a banner here you could make it flush left if there's right side content (rare) */
#SEARCHBOX {display:none; position: fixed;z-index: 100;top: 120px;left: calc(100% - 220px);} /* ###!!! SEARCHBOX - only make visible for sites with LOTS of content */
#BREADCRUMBS {display:block; padding-bottom:10px; font-family:arial; font-size:0.8em;} /* ###!!! locator function generally not needed to be seen */
#CONTENT_CONTAINER { 	
	/* ###!!! background for the ENTIRE window, not just content area */
	background-color : #fff;	
	/* background-image: url('./../userfiles/images/gradient_bkgd.jpg'); */
}
#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 / decoration for links IN THE CONTENT */
#CONTENT a:hover { color:#333; background-color:#cececd;}	/* ###!!! hover color for links IN THE CONTENT */

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

/* CLASS for the containing div that holds the entire nav system */

.nav-menu { 		
	font-family:Gothic_Lite;
	font-weight: normal;
	font-size: 1.2em; /* ###!!! size of menu items text - browser */
	color : #fefefe; /* ###!!! text color for nav menu items */
	opacity: 0.95; 
	background-color:#88A; /* ###!!! overall background color for the entire navigation menu */
	box-shadow: 5px 5px 5px #666;  /* ###!!! optional shadow under entire nav menu area */
	} 
	
.nav-menu ul li:hover, #SUBMENU li:hover { 
	background-color: #cececd; /* ###!!! BOX color on hover */
	color: #3c3b3b;  /* ###!!! 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 #555;   /* ###!!! optional shadow under the popdown menu */
}

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

#SUBNAV { /* ###!!! this is the IN PAGE automatically generated submenu */
	font-family: arial;
	font-size:0.9em;
}


/* ###!!! If th eclient wants a *contained* content area, the bootstrap band style should NOT be screenwidth */
/* this is an override from the bootstrap styles css file btw */
/* IMHO this is pretty stupid - if the content area and container are not sharing a bkgd, 
	then prob best not to use the band style */

div.band {
	padding: 20px;
    position: relative;
    width: 100vw;
    margin:-10px;
	left: calc(-50vw + 50%);
	background:#ddd;
	margin-bottom: 20px;
}

.band_content {
	margin:0 auto;
	padding:0px;
	padding-left:10px;
	max-width:860px;
}


/* 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: center; /* ###!!! overall flush of the ENTIRE nav menu as a unit */
		padding-right: 0px; /* 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*/
		width: 140px;
		max-width: 200px; /* ###!!! width limit of individual menu items - if they are too long, they wrap to multiple lines */
		height : 120px; /* ###!!! "thickness" of the menu  */
		font-size : .9em; /* ###!!! a matter of taste  this is the size of the actual text in the nav menu */
		font-weight:normal;
		padding: 45px 15px 25px 15px; /* ###!!! 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 */
		display: block;	/* display none if you don't want an icon but instead prefer just a title */
		position:absolute;
		left:2%;
		top:10px;
		width:180px;
		max-width:180px;
		/* box-shadow: 5px 5px 5px #777;  ###!!! 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){

	h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#558; display:none; text-align:center;} 	/* ###!!! automatic page headings, display:none to hide */
	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 */
	p { font-size : 1.1em; }
	
	#CONTENT ul { font-size:1em;}		/* ###!!! an unordered list can be tiny-ish on big screen but generally bigger for mobile bc of touch clicking */
	
	/* #SEARCHBOX {display:none; position: fixed;z-index: 100;top: 65px;left: calc(100% - 180px);} */
	#SEARCHBOX {display:none;} /* ###!!! SEARCHBOX - only make visible for sites with LOTS of content */
	
	#MOBILE_MENU_TITLE { /* ###!!! in some cases the company logo is all you need, but often there's a title like "MENU" */
		/* display:none; */	
		text-align:center;
		font-size: 0.8em;
		font-weight:normal;
	} 	/* note that if the title is showing, you'll have to tweak the next param to compensate */
	
	#MOBILE_MENU_LINES { /* the mobile menu icon */
		margin-top:-16px; /* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -16px */
		margin-right:10px;
	}
	
	#MENU_BUTTON {
		height:60px;	/* this is the actual mobile menu button you click to open up the mobile menu */
	}
	
	
	#NAV ul li {
		padding: 15px 10px 15px 10px; /* ###!!! TOP RIGHT BOTTOM LEFT - Use this to massage mobile menu item positioning */
		text-align: center; /* ###!!! text alignment of mobile menu items */
		font-size: 0.9em; /* ###!!! mobile menu font size */
		height : 50px; /* this is the MENU ITEMS not the HEADER! */
	}	
	
	.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 { 
		display:normal;	/* display none if you don't want an icon but instead prefer just a title */
		position:absolute;
		left:16px;
		top:10px;
		width:80px; 	/* ###!!! usually the logo sizing needs tweaking for mobile */ 
		/* box-shadow: 5px 5px 5px #777;  ###!!! with this it has a shadow that allows it to nicely overlap the nav menu*/
		}
		
	#SUBNAV ul li {line-height: 2em;} /* on a mobile, it's hard to click the right link if the lines are too close together */
	
	#SUBMENU { display: none; } /* it simply makes no sense to have pop ups in a mobile menu */
}


/************************************/
/* Bootstrap style overrides */
/************************************/
@media screen and (min-width: 960px) /* full size browser */
{
	#CONTENT div.three_to_one_box img {width:100%; max-width:400px;}
}

@media screen and (max-width: 960px)
{
	#CONTENT div.three_to_one_box img {max-width:100%; max-width:300px;}
}