/* 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");}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	font-family: Gothic-Lite;
	color: #333;
	background: #fff;
	background-size: 100%;
	}

/* 	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;color: black;line-height: 1.4em;}
h1, h2, h3 {font-size : 1.4em; font-weight:bold; color:#558;}
h5 {font-size: 1.6em;font-weight: bold;line-height: 1.3em;padding-bottom: 0px;margin-bottom: 0px;}

#BANNER-CONTAINER{display:none;}
#BREADCRUMBS { padding-bottom:10px; font-size:0.9em; display:none;} /* ###!!! locator function generally not needed to be seen */
#NEXTPAGE {display:none;} 
#SUBNAV {display:none;} /* shows submenu under content, turned on by default in globals */
#BOOTSTRAP {display:none;}
#POST-CONTENT {display:none;}
#SEARCHBOX {display:none;} 
#FOOTER {display:none;} 
#BOTTOM-MENU {display:none;} 
#GO-TO-TOP {display:none;} 
#LOGIN {display:none;}
#SOCIAL-ICONS-CONTAINER{display:none;}
#SOCIAL-ICONS-CONTAINER-MOBILE{display:none;}

/* SEARCHBOX visibility only import for sites with LOTS of content */
#SEARCHBOX {display:normal;} 

#CONTENT-CONTAINER { 
	display:none; /* to prevent flashing, restored in the js as a final step */
	margin:0 auto;
	background-COLOR: inherited; /* from body*/
	background-size: contain;
	text-align:left;
	padding-top:0em;
	opacity:0.9;
	}

#CONTENT {
	line-height: 1.7em;
	font-size: 1em;
	padding: 70px;
	margin: 0 auto;
	padding-top: 0px;
}

#CONTENT a:link {text-decoration:underline; color:#666;}
#CONTENT a:hover { color:gray; }
#CONTENT ul li, #CONTENT ol { font-size:1.3em; line-height:1.6;}
#CONTENT img {display:inline-block;max-width: 100%;} /* back to default display b/c block style makes centering impossible */

#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;}
.footnote {font-size: 1em;font-style:italic;line-height: 1.4em;}

/* 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 */
 
.threeup {
	background: inherited; 
	width:30%;
	font-size:1.2em;
	display:inline-block;
	vertical-align: top;
	text-align: center;
	margin:0;
	padding:8px;
}


/******************************************************************/
/******************** 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-weight: normal;
	font-size: 1.2em; /* size of menu items text - browser */
	background-color: #809969; /* nav menu bkgd and text color */
	color: #FFF;
	opacity: 0.95; 
	
	/* 	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 1px #00000042;
	} /* nav menu bkgd and text color */

.nav-menu ul li:hover, #SUBMENU li:hover { 
	background-color: white; 	/* BOX color on hover */
	color: #333; 				/* text color on hover */ 
	} 

/* the box that you click to pop open the mobile menu */
.mobile-nav-menu {
	color: white; 
	font-weight: normal; 
	} 

/* 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; }

/* box to hold social icons in the full size browser */
#SOCIAL-ICONS-CONTAINER { display: none; }
#SOCIAL-ICONS p {display:inline; }
#SOCIAL-ICONS a > img  { max-width:40px; filter: grayscale(100%);}	
#SOCIAL-ICONS a > img:hover  { opacity:1.0; filter: grayscale(0%);}	



/* defining a browser pop up menu */

#SUBCONTAINER { /* container div that holds the popdown submenu */
	display:none;
	background-color: #869e70; /* background color of the entire popdown submenu */
	position:absolute;
	max-width: 600px;
	box-shadow: 5px 5px 5px 1px #00000042;
}

#SUBMENU { /* div containing the popdown menu items themselves */
	height:100%;
	background-color: inherited; 
	color: white; 
	font-size: .9em;
	text-align: left; /* alignment of popdown menu items */
	list-style:none;
}

#SUBMENU li {padding: 8px 25px 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 */

	/* /scripts/misc-functionality.js includes proc to change the submenu label to whatever you want */
	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: .75em;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: center; /* left/right/center determines the alignment of the horz nav menu */
	padding-right: 0px;
	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 */
	max-width: 300px;		/* width limit of individual menu items - if they are too long, they wrap to multiple lines */
	height: 90px; 			/* overall nav area height - adjust to accomodate varying menu item lengths */
	display: inline-block; 	/* kind of like float left but better */
	padding: 30px 20px 20px 20px; /* Top, Right, Bottom, Left - menu 'thickness' - a single value for a ll four gives sketchy results */
	vertical-align: top; /* keeps it from looking stupid if the menus have widely varying lengths */
}

/* special menu styles for the menu at the BOTTOM of the site */
#BOTTOM-MENU > ul { margin-left:-39px; margin-top:40px; }
#BOTTOM-MENU  .doc, 
#BOTTOM-MENU .docs, 
#BOTTOM-MENU .sdoc, 
#BOTTOM-MENU .sdocs { 
	cursor: pointer; 
	display : inline; 
	padding-right: 10px; 
	font-family: arial;
	font-size: 0.9em; 
	font-weight:normal;
	}

#BOTTOM-MENU a {color:grey;}


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

/* FULL SIZE BROWSER */
@media screen and (min-width: 960px)
{
	#CONTENT { width:960px; background-color:inherited; padding-top:20px;}
	#NAV-ICON {position:absolute;left: 0%;top: 50%;width: 16%;transform: translate(0, -50%);box-shadow: 5px 5px 5px #5550;}
	#MOBILE-MENU-TITLE{display:none;} /* otherwise text menu label shows up in full size browser */
	.wrap-img {float: left; padding-right :30px; padding-bottom : 30px; } /* palced here b/c if it's mobile the img would be full width */

	#SOCIAL-ICONS-CONTAINER {
	position: absolute;
	top: 20px;
	width: 240px;
	padding: 0px 0px 0px 0px;
	z-index:200;
	right: -0vw; /* the right will be 1% of the viewport size :. 1200px becomes flushed right minus 120px */
	}
}

/* SMALLER SCREEN (TABLETS ETC) */
@media screen and (max-width: 960px){ /* normally 768px, in this case might as well go mobile one the menu would collapse to 2 rows */

	#BOTTOM-MENU .doc, .docs, .sdoc, .sdocs {}
	#BOTTOM-MENU {font-size:.7em;}
	#BREADCRUMBS {display:none;}
	

	/* MOBILE MENU */
	#MENU-BUTTON { /* the mobile menu header */
		width: 100%;
		text-align: center; /* alternatively make it left ... */
		box-sizing: border-box;
		padding: 15px 15px;
		cursor: pointer;
		display: none;
	}
	
	#MOBILE-MENU-LINES { 
	width:34px;
	height:22px;
	position:absolute;
	left: calc(100vw - 50px);
	top: 16px;
	overflow:hidden;
	text-align:right;
	background : url("./../../userfiles/images/hamburger.png");
	}

	p {font-size: 1.2em;line-height:1.4em;}
	
	#NAV { height:60px;}
		
	#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 */
		padding-top: 61px;
	}
	
	#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: 100%; 			/* counteracts the (presumably) fixed width in browser */
		height:100%;
		padding: 15px 10px 15px 10px;
		margin: 0px 0px 0px 0px;
		text-align: center; /* text alignment of mobile menu items */
		display: block;
		font-size:1.2em;
		background: #809969;
	}
	
	#MENU-BUTTON {
		display: block;
		text-align:center;
		padding-left:0px;
	}
	
	/* makes the icon smaller for mobile */
	#NAV-ICON {
		position:absolute;
		left:10px;
		top: -11px;
		width: 218px;
		}
		
	#SUBCONTAINER, #SUBMENU {
	/* the popdown menu should not show at all on mobile - later mod to make the menu expand to show
		this would require total restyling so the sub menu is in line with other menu items */
		display : none;
	}
	
	#CONTENT {padding:15px 40px 40px 40px;}
	#CONTENT img, #BANNER img {max-width:100%;height: auto;}
	#CONTENT ul {margin-left: -34px;}
	#CONTENT ul li { font-size:1.2em; line-height:1.6em; }
	
	/* it simply makes no sense to have pop ups in a mobile menu */
	.menulevel2, .menulevel3 { 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 */
	
	#SOCIAL-ICONS-CONTAINER {
	position: relative;
	top: 20px;
	width: 240px;
	padding: 0px 0px 10px 30px;
	z-index:200;
	right: -0vw; /* the right will be 1% of the viewport size :. 1200px becomes flushed right minus 120px */
	}
}