/* 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: center;
	color:#BBB; 		/* ###!!! overall body text color */
	background-color:black;
	font-family:georgia; 	/* ###!!! overall site font */
	}

p { font-size : 1.4em; 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:none;} 															/* ###!!! SEARCHBOX - only make visible for sites with LOTS of content */
#BREADCRUMBS {display:none; padding-bottom:10px; font-size:0.7em;} /* ###!!! locator function generally not needed to be seen */
#CONTENT_CONTAINER { 	
	margin:0 auto;
	background-size: contain;
	background-color : black; /* ###!!! background for the ENTIRE window, not just content area */
	padding-top:0em
	opacity:0.9;
	}
	
#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 */
#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; max-width: 100%;} /* back to default display b/c block style makes centering impossible */
#CONTENT {
	line-height: 1.7em;
	font-size: 1em;
	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; display:none;}
#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 **********************************/
/******************************************************************/


.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 : #dbe4e9; /* ###!!! text color for nav menu items */
	opacity: 0.95; 
	background-color:#476186; /* ###!!! overall background color for the entire navigation menu */
	/* 	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 #000;		/* ###!!! optional shadow under entire nav menu area */
	} /* nav menu bkgd and text color */

.nav-menu ul li:hover, #SUBMENU li:hover { 
	background-color: #4d382d; 															/* ###!!! BOX color on hover */
	color: white; 																		/* ###!!! text color on hover */ 
	/* ###!!! here is where the css animation is and currently commented out */ 
	
	-webkit-transition: background-color 0.3s;
	transition : background-color 0.3s; 
	} 
	
/* 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:absolute;
	width:200px;
	box-shadow: 5px 5px 5px #111;  	/* ###!!! optional shadow under the popdown menu */
}

#SUBMENU { /* div containing the popdown menu items themselves */
	height:100%;
	background-color: #0f2c54; 	/* ###!!! 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 */
	list-style:none;
	display:block; 			/* ###!!! 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;
	}
	
#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 */
	display: inline-block; 	/* kind of like float left but better */
	padding: 15px 10px 60px 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) */
}



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

/**********************************************************************************/
/* FULL SIZE BROWSER */
/**********************************************************************************/
@media screen and (min-width: 960px) /* full size browser */
{
	#CONTENT { width:960px;}
	#NAV_ICON { 				/* ###!!! icon that appears in nav menu, typically a company logo */
		position:absolute;
		left:0%;
		top:0px;
		width:35%;
		max-width:150px;
		box-shadow: 5px 0px 5px #000; /* ###!!! 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 */

	#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*/
		max-width: 150px;																	/* ###!!! width limit of individual menu items - if they are too long, they wrap to multiple lines */
		height : 60px; 																		/* ###!!! "thickness" of the menu  */
		font-size : 1em; 																	/* ###!!! a matter of taste  this is the size of the actual text in the nav menu */
		padding: 40px 30px 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) */
	}	
}

/**********************************************************************************/
/* 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 */
	
	#BREADCRUMBS {display:none;}
	
	/* 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:right; 
		margin-top:0px; /* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -20px */
		padding:2.3px;
	}

	p { 	font-size:1.3em; line-height:1.2em; padding:0px 20px;}
		
	#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 {
		height:60px; /* 'thicker' menus look stupid on mobile */
		box-sizing: border-box; /* without this each box would add the padding we have in the large screen nav */
		max-width:100%;
		width: 100%; 			/* counteracts the (presumably) fixed width in browser */
		padding: 20px 30px 15px 10px; /* ###!!! TOP RIGHT BOTTOM LEFT - Use this to massage mobile menu item positioning */
		margin: 0px 0px 0px 0px;
		text-align: right; 		/* ###!!! text alignment of mobile menu items */
		display: block;
		font-size:1.0em;
	}
	
	.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:0px;
		top:0px;
		width: 90px; 	/* ###!!! usually the logo sizing needs tweaking for mobile */
		}
	
	#CONTENT {padding:0px;}
	#CONTENT img, #BANNER img { max-width:100%; }
	#CONTENT ul { margin-left:-20px; font-size:1em;}
	#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 */
}