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

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

p { font-size : 1.3em; line-height: 1.5em; font-family:georgia;color: #474747;padding-left: 0px;} 						/* ###!!! 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 0px; padding-top: 10px;} 		/* ###!!! 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 */

#BANNER-CONTAINER { color:#DDD; background-color:#111639; padding:18px; text-align:center;}
#BANNER-PHONE-NUMBER {display:inline;}
#BBB {
	position: absolute;
    left: 343px;
    top:-20px;
	}
#BBB-MOBILE {display:none;}



#CONTENT_CONTAINER { 	
	margin:0 auto;
	background-size: contain;
	background-color : #DDD; /* ###!!! 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:#FFF; 	/* ###!!! 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: 1.3em;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: 5px 30px;
	background-color:inherit; /* ###!!! use inherited to allow the overall window bkgd color to show thru */ 
}

#login {font-family:sans-serif; font-size:.8em; display:block;}
#login a:link { color: #aaa; }
.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 */
.title {height:3em; font-weight:bold; font-size:1.1em; line-height:1.3em; padding-bottom:10px;}

/* add this class to any image that you intend to make a clickable link */
.btn-img {   
	transition: 0.2s ease;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	}
	
.btn-img:hover { /* when you hover it shrinks a bit*/
	transform: scale(0.98, 0.98);
	}

/* fonts */
.arial {font-family:arial;}

/* colors */
.almost-white-text {color:#ddd;}
.light-grey-text {color:#aaa;}
.bkgd-dark-blue {background-color:#111639;}
.bkgd-med-grey-blue {background-color:#4b517b;}

/* heights */
.height-30 {height:30px;}

/* padding */
.padding-18 {padding:18px;}

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

/* one reason the styling here is a bit inscrutible is bc if you set a specific height for this box, it breaks the mobile styling */
.nav-menu { /* CLASS for the containing div that holds the entire nav system */
	font-weight: bold;
	font-size: 1.4em; /* ###!!! size of menu items text - browser */
	color : #444; /* ###!!! text color for nav menu items */
	opacity: 0.95; 
	background-color:#eef; /* ###!!! 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: #d4dde7; 															/* ###!!! BOX color on hover */
	color: #444; 																		/* ###!!! 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; }

/* box to hold social icons in the full size browser */
#SOCIAL-ICONS-CONTAINER { 
	display:block;
	position:absolute;
	top:-6px;
	width:100px;
	padding: 20px 20px 0px 0px;
	z-index:200;
	right: 0.2vw; /* the right will be 1% of the viewport size :. 1200px becomes flushed right minus 120px */
	}

#SOCIAL-ICONS {}

/* 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: #f2f2f2; 	/* ###!!! the box that contains each individual popdown menu item */ 
	color: #404040; 				/* ###!!! 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; 			
	text-align: left; 		/* ###!!! overall flush of the ENTIRE nav menu as a unit */
	padding-right: 30px;	/* w/ flush right, you prob want some padding */
	padding-left: 33vw; 		/* 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: 280px;		/* ###!!! 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 */
	vertical-align : text-top;
	text-align: center;		/* text alignment of individual menu items (as opposed to the entir emenu block as a whole) */
	height : 10px; 	/* ###!!! "thickness" of the menu  */
	padding: 32px 10px 60px 20px;	/* ###!!! Top, Right, Bottom, Left - menu 'thickness' */
}




/* special menu styles for the menu at the BOTTOM of the site */
#BOTTOM-MENU > ul { margin-left:-39px; margin-top:-10px; }
#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) /* full size browser */
{
	#CONTENT { width:960px;}
	#NAV_ICON { 				/* ###!!! icon that appears in nav menu, typically a company logo */
		position:absolute;
		left:1%;
		top:8px;
		width:35%;
		max-width:300px;
		box-shadow: 5px 5px 5px #222; /* ###!!! 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 */
	
	.horizontal-homeadvisor-reviews-widget {display:block; padding-bottom: 30px;}
	.vertical-homeadvisor-reviews-widget {display:none;}

}

/**********************************************************************************/
/* 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 */
	#BOTTOM-MENU .doc, .docs, .sdoc, .sdocs {display:block;}
	#BREADCRUMBS {display:none;}
	
	/* MOBILE MENU */
	.slogan {display:none} /* on mobile it's a bit much to include "Serving Northern Michigan!"*/
	#BANNER-CONTAINER{text-align:right; padding:10px; padding-right:30px;}
	#BANNER {font-size: 0.8em; padding: 0px;}
	#BANNER-PHONE-NUMBER {display:block; line-height: 1.618em;}
	#BBB {display:none;}
	#BBB-MOBILE {
		display:block;
		position: relative;
		}
	#SOCIAL-ICONS-CONTAINER {display:none;}
	#MENU_BUTTON { /* the mobile menu header */
		width: 100%;
		height: 42px;
		box-sizing: border-box;
		padding: 12px 15px;
		cursor: pointer;
		display: block;
	}
	#MOBILE_MENU_TITLE {color:#444;display:block;padding-top: -3px;font-size:.8em;padding-left: 1px;} /* ###!!! in some cases the company logo is all you need */
	#MOBILE_MENU_LINES {  /* the mobile menu icon */
		border-bottom: 13px double #444;
		border-top: 4px solid #444;
		content:"";
		height: 5px;
		width:28px;
		float:right;
		margin-top: -23px; /* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -20px (ish) */
		padding: 2.3px;
		margin-right: 13px;
	}

	p { 	font-size:1em; line-height:1.5em; }
		
	#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:0.85em;
	}
	
	.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: 110px; 	/* ###!!! usually the logo sizing needs tweaking for mobile */
		}
	
	#CONTENT {padding: 5px 20px; text-align:center;}
	#CONTENT img, #BANNER img { max-width:100%; }
	#CONTENT ul {margin-left:-20px;font-size: 1.6em;}
	#CONTENT ul li, #CONTENT ul li ul {font-size: 0.65em;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 */
	
	.horizontal-homeadvisor-reviews-widget {display:none;}
	.vertical-homeadvisor-reviews-widget {display:block; padding-bottom: 30px;}
}