/* paletton.com is a good place to explore color schemes */
/* custom font faces - the font file is kept in the template root folder alongside the template & stylesheet */
@font-face { font-family: Gothic_Lite; src: url("fonts/Goth720l.ttf");}

/******************************************/
/* temp styles I am inserting, knowing they will be overridden, but this allows them to appear in the tinymce menu */
/******************************************/
.three_to_one_box {}



* { box-sizing: border-box; } /* good practice but will demand I go back and get specific with padding & margins */

body {
	overflow-x:hidden; /* fixes obscure issue where the content is slightly too wide and :. has horz scrollbars */
	margin: 0 auto;
	padding: 0;
	text-align: left;
	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:bold; 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 { 
	margin:0 auto;
	background-size: contain;
	background-color : white; /* ###!!! background for the ENTIRE window, not just content area */
	padding-top:0em
	opacity:0.9;
	}

#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 */
#CONTENT ul {padding-bottom:20px;}
#CONTENT ul li, #CONTENT ul li ul { font-size:0.96em; line-height:1.5em; }
#CONTENT img {display:inline-block;} /* back to default display b/c block style makes centering impossible */
#CONTENT {
	line-height: 1.7em;
	font-size: 1em;
	padding: 70px;
	margin: 0 auto;
	padding-top: 0px;
	background-color:inherit; /* ###!!! use inherited to allow the overall window bkgd color to show thru */ 
}

#login {font-family:sans-serif; font-size:.8em;}
#login a:link { color: #ccc; }
.doc, .docs, .sdoc, .sdocs { cursor: pointer; } /* so when you hover you get a finger pointer cursor */

/* UTILITY CLASSES */
.centered {text-align:center; margin:0 auto;}
.row { width: 100%; display:block; padding:0; margin:0;}
.hidden {display:none;}
.slideshow img, .daves_slideshow img {width:100%;} /* so that slideshow images fill their container */


/******************************************************************/
/******************** NAVIGATION **********************************/
/******************************************************************/

/* BROWSER nav-menu height - search #NAV ul li and set the padding (eg 50px 20px 50px 20px )*/

.nav-menu { /* CLASS for the containing div that holds the entire nav system */

	font-size: 1em; /* ###!!! size of menu items text - browser */
	color : #black; /* ###!!! text color for nav menu items */ 
	background-color:#e4e4e4; /* ###!!! overall background color for the entire navigation menu */
	height:48px;
	width:100%;
	/* 	the following two settings force the popdown menu to stay above any slideshows - 
		you MUST use position:relative OR position:absolute in order to gain access to z-index
		ie without position explicitly set, z-index does NOTHING */
	position:relative;
	z-index:100;
	/* box-shadow: 5px 5px 5px #777;  ###!!! optional shadow under entire nav menu area */
	} /* nav menu bkgd and text color */

.nav-menu ul li:hover, #SUBMENU li:hover { 
	background-color: gray; 	/* ###!!! 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; 
	} 

/* to remove submenus from the nav menu (but still have them show up on the in-page submenu) - display:none */
/* keep in mind if the sub-pages are hidden with #CMSIMPLE HIDE# they will still NOT show up in the submenu */
.menulevel3, .menulevel2  { display:none; }

/* defining a browser pop up menu */

#SUBCONTAINER { /* container div that holds the popdown submenu */
	display:normal; 
	background-color: inherit; /* seems to do nothing bc overridden by #SUBMENU styles */
	position:relative;
	top:-1px;
	width:200px;
	/* box-shadow: 5px 5px 5px #777;  ###!!! optional shadow under the popdown menu */
}

#SUBMENU { /* div containing the popdown menu items themselves */
	height:100%;
	background-color: #e4e4e4; 	/* ###!!! the box that contains each individual popdown menu item */ 
	color: black; 				/* ###!!! the text of the popdown menu items */
	font-size: 0.9em;
	text-align: center; 			/* ###!!! alignment of popdown menu items */
	list-style:none;
	display:normal; 			/* ###!!! change to display:none to GET RID OF POPDOWN MENUS */
}

#SUBMENU li {	
	padding:8px 10px 12px 20px;
} /* last item is left padding - needed if text-align (above) is left but not if center */

/* stylin' the submenu that appears on the content page */

	h4 { margin-bottom:0px;}
	
	/* 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;
	}
		
#NAV ul { /* deals with the overall box that CONTAINS the standard nav menu*/
	overflow: hidden; 			
	padding: 0;
	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 */
	margin: 0;
	text-align:center;
	}
	
#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 */
	font-size : .9em; 		/* ###!!! a matter of taste  this is the size of the actual text in the nav menu */
	display: inline-block; 	/* kind of like float left but better */
	padding: 15px 10px 11px 20px; /* ###!!! Top, Right, Bottom, Left - menu 'thickness' */
	vertical-align : text-top;
	text-align: center;		/* text alignment of individual menu items (as opposed to the entir emenu block as a whole) */
	height:48px; /*this has to match the submenu*/
}



/*************************************************/
/* MEDIA QUERIES */
/*************************************************/

/**********************************************************************************/
/* FULL SIZE BROWSER */
/**********************************************************************************/
@media screen and (min-width: 960px) /* full size browser */
{
	#CONTENT { 
	width:100%; 
	padding-top:10px;
	}
	
	#NAV_ICON { 				/* ###!!! icon that appears in nav menu, typically a company logo */
		/* position:absolute; */
		/* width:20%; */
		max-width:200px;
		padding-top:50px;
		padding-bottom:40px;
		width:150px;
		/* display:block; */
		/* height:auto; */
		/* box-shadow: 5px 5px 5px #555; /* ###!!! with this it has a shadow that allows it to nicely overlap the nav menu*/
		}
		
	#MOBILE_MENU_TITLE{display:none;} /* otherwise text menu label shows up in full size browser */
}

/**********************************************************************************/
/* SMALLER SCREEN (TABLETS ETC) */
/**********************************************************************************/
@media screen and (max-width: 960px){

		/* h5 {text-align:center;}###!!! in some cases, headlines look better on mobile if centered */

	/* MOBILE MENU */
	#MENU_BUTTON { /* the mobile menu header */
		width: 100%;
		height:60px;
		box-sizing: border-box;
		padding: 15px 15px;
		cursor: pointer;
		display: block;
	}
	#MOBILE_MENU_TITLE { display:none;} /* ###!!! in some cases the company logo is all you need */
	#MOBILE_MENU_LINES {  /* the mobile menu icon */
		border-bottom: 13px double white; 
		border-top: 4px solid white; 
		content:"";
		height: 5px; 
		width:28px;
		float:left; 
		margin-top:0px; /* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -20px */
		padding:2.3px;
	}

	p { 	font-size:1.2em; line-height:1.2em;}
	
		
	#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: 0px; 	/* change to 60px-ish if you're including an icon in the mobile menu */
	}
	
	#NAV ul li {
		box-sizing: border-box; /* without this each box would add the padding we have in the large screen nav */
		max-width:100%;
		width: 25%; 			/* counteracts the (presumably) fixed width in browser */
		padding: 15px 30px 15px 10px; /* ###!!! TOP RIGHT BOTTOM LEFT - Use this to massage mobile menu item positioning */
		margin: 0px 0px 0px 0px;
		text-align: left; 		/* ###!!! text alignment of mobile menu items */
		display: block;
		font-size:1.0em;
		background-color:#e4e4e4;
	}
	
	.nav-menu {box-shadow:none; margin-top: 75px;} /* ###!!! 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 */ 
		}
	
	#CONTENT {padding:10px 30px 40px 30px;}
	#CONTENT img, #BANNER img { max-width:100%; }
	#CONTENT ul { margin-left:-20px; }
	#CONTENT ul li, #CONTENT ul li ul { font-size:0.96em; line-height:1.5em; }
	
	/* it simply makes no sense to have pop ups in a mobile menu */
	#SUBMENU { display: none; }
	
	.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 */
}


	


.h4_class {
	text-align:center;
	color:#6c6c6c;
	font-size:2em;
	font-family:times new roman;
	font-weight:bolder;
}

.h5_class {
	text-align:center;
	color:#6c6c6c;
	font-size:1.5em;
	font-family:times new roman;
	font-weight:bolder;
}

.twentyFiveWidth {width:25%;}

.moveLeft {left:-100px; position:relative;}
#CONTENT ul {
	list-style-type:none;
}

#bannerDiv {
	background-image: url("./../../images/tintedBannerImg.png");
	background-position:80% 34%;
	background-repeat:no-repeat;
	background-size:100%;
	height:25em;
	overflow:hidden;
	margin: 0px -90px 0px -90px;
}

#bannerDiv h6 {
	color:white;
	font-family: 'CAC Champagne', arial;	
	font-size:6.25em;
	font-weight:normal;
	text-align:center;
	line-height:0.75em;
	margin-top:100px;
	}