/* =======================================================
RESOLUTION - 0 to 379px (SMALL MOBILE, PORTRAIT):
	NAV BAR 100% & EXPANDING VERTICAL
==========================================================*/

/* ### THE WHOLE MENUBAR ITSELF ###
-----------------------------------*/
.menubar {
	border: 0px solid orange;
	text-align: center;
	clear: both;
	/* The following is dependent upon resolution... */
	background: #173578; /* dark blue */
	line-height: 1.3;
	box-shadow: 0px 2px 5px 2px rgba(90,90,90,0.5) /* horiz vertical blur <spread> color */
}
.menubarInStickyMode {
	position: fixed;
	top: 0;
	width: 100%;
	 z-index: 1;
}
.menubarInStickyMode + .content { /* For the .content class element which appears IMMEDIATELY AFTER the .menubarInStickyMode class element... */
	padding-top: 38px; /* ...add padding equal to the height of the menubar so that the content doesn't "jump" when menubar is taken out of the flow. */
}

/* ### THE MENU BUTTON ###
--------------------------*/
#menuButton { background: #4784D7; text-shadow: 2px 2px 1px #1E4882; } /* bkgrd is a slightly lighter blue for the menu button, shadow is a dark blue */

/* ### THE "MAIN MENU" DROPDOWN/CONTAINER ###
---------------------------------------------*/
.mainmenuContainer { /* The default display mode for the menu dropdown is hidden */
	display: none;
	overflow: auto;
}
.mainmenuContainerShown { display: block; } /* This class is applied in order to show the menu dropdown when the Menu button is clicked */

/* ### THE INDIVIDUAL "MAIN MENU" BUTTONS ###
---------------------------------------------*/
.mainmenuButtons {
	/* The following is dependent upon resolution... */
	background: #2F71C8; /* medium blue from logo */
	border-top: 1px solid #548CD8; /* a lighter version of the med blue */
	border-bottom: 1px solid #265BA2;  /* a darker version of the med blue */
	display: block;
	xborder: 1px solid red;
}
.mainmenuButtons a {
	white-space: nowrap;
	text-decoration: none;
	font-weight: bold;
	width: 100%;
	xborder: 1px dashed yellow;
	/* The following is dependent upon resolution... */
	font-size: 1.6rem;
	padding: 10px 0px;
	display: inline-block;
	color: white;
}
.mainmenuButtons:hover { border-top-color: #2F71C8; border-bottom-color: #2F71C8; background: #3979D1; /* a slightly lighter version of the med blue */ }
.mainmenuButtons a:visited	{  }
.mainmenuButtons a:hover		{ color: #E78931; /* orange from logo */ }
.mainmenuButtons a:active		{ color: #173578; /* dark blue */ }

/* ### THE MORE v BUTTON ###
----------------------------*/
#moreButton { position: relative; } /* This ensures that the absolutely-positioned dropdown menu can be positioned relative to this, its parent button */
	/* These are all supporter classes for creating down/up triangles or arrows to be used on a menu that shows/hides a dropdown child menu */
	.chevron-down {
		border: solid white;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 3px;
		margin: 2px;
		transform: rotate(45deg); -webkit-transform: rotate(45deg);
	}
	.triangle-down {
		display: inline-block;
		width: 0; height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 0px solid transparent;
		border-top: 6px solid white;
		margin: 0px 0px 1px 4px;
	}
	.triangle-up {
		display: inline-block;
		width: 0; height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid white;
		border-top: 0px solid transparent;
		margin: 0px 0px 1px 4px;
	}
/* ### THE "MOREv MENU" DROPDOWN/CONTAINER ###
----------------------------*/
.moremenuContainer { /* The default display mode for the "more dropdown" is hidden */
	display: none;
	overflow: auto;
}
.moremenuContainerShown { display: block; } /* This class is applied in order to show the "more dropdown" when the More button is clicked */

/* ### THE INDIVIDUAL "MOREv MENU" BUTTONS ###
--------------------------------------------------------*/
.moremenuButtons {
	width: 100%;
	background: #2A64B2; /* a slightly darker blue */
}
.moremenuButtons a {
	color: white;
}

/*  "Highlight" active menubar button: When on page A, the button A "tab" appears white and "attached" to the body, etc. */
#body_home #homeButton,  #body_about #aboutButton,  #body_services #servicesButton,  #body_contact  #contactButton,
#body_servicearea #serviceareaButton,  #body_pics #petpicsButton /*,
#body_faq      #faqButton,		#body_reviews  #reviewsButton,			#body_blog     #blogButton*/ {
	background: #E78931; /* orange from logo */
	border-color: #EEA966 #C66D16 #C66D16 #EEA966;
}

#body_home #homeButton a,  #body_about #aboutButton a,  #body_services #servicesButton a,  #body_contact  #contactButton a,
#body_servicearea #serviceareaButton a,  #body_pics #petpicsButton a /*,
#body_faq #faqButton a,  #body_reviews #reviewsButton a,  #body_blog #blogButton a*/ {
	color: #173578; /* dark blue */
	cursor: default;
}

#body_servicearea #moreButton, #body_pics #moreButton { background: #E78931; border-top-color: #EEA966; border-bottom-color: #C66D16; } /* orange from logo */
#body_servicearea #moreButton:hover, #body_pics #moreButton:hover { background: #EEA966; border-top-color: #F4C79C; border-bottom-color: #E88B30; } /* a lighter orange */
#body_servicearea #moreButton + a, #body_pics #moreButton + a { color: #173578; /* dark blue */ }
#body_servicearea #moreButton + a:hover, #body_pics #moreButton + a:hover { color: #2F71C8; /* medium blue from logo */ }
/*
====================================================
RESOLUTION - 380px+ (LARGE MOBILE, TABLET): 
	NAV BAR HORIZONTAL
====================================================*/
@media only screen and (min-width: 380px) {
	.menubar {
		background: #173578; /* dark blue */
		xline-height: 1.3;
	}
	.menubarInStickyMode { /* inherited 100% */ }
	.mainmenuButtons {
		background: #2F71C8; /* medium blue from logo */
		border-left: 1px solid #548CD8; /* a lighter version of the med blue */
		border-right: 1px solid #265BA2;  /* a darker version of the med blue */
		display: inline-block;
		box-shadow: none; /*0px 0px 8px -1px SandyBrown inset; /* horiz vertical blur <spread> color */
		xwidth: 20%;
	}
	#homeButton.mainmenuButtons { width: 16%; }
	#aboutButton.mainmenuButtons { width: 22%; }
	#servicesButton.mainmenuButtons { width: 22%; }
	#contactButton.mainmenuButtons { width: 20%; }
	#moreButton.mainmenuButtons { width: 20%; }
	.mainmenuButtons a {
		font-size: 1.4rem;
		xpadding: 10px 0px; /* 8 & 15 */
		color: white; /*#173578; /* dark blue */
	}
	.mainmenuButtons:hover	{ border-left-color: #2F71C8; border-right-color: #2F71C8; background: #4381D5; }
	.mainmenuButtons a:hover	{ xtext-shadow: 1px 1px 1px BurlyWood; }
	.mainmenuButtons a:active	{ text-shadow: none; }
	#menuButton { display: none; }
	.mainmenuContainer {
		display: inline;
		position: relative;
		xright: -1px;
		xmargin-top: 1px;
		xmin-width: 180px;
		z-index: 10;
		xbox-shadow: 0px 2px 5px 2px rgba(90,90,90,0.5) /* horiz vertical blur <spread> color */
	}
	.moremenuContainer {
		position: absolute;
		right: -1px;
		margin-top: 1px;
		width: 20%;
		min-width: 150px;
		z-index: 10;
		box-shadow: 0px 2px 5px 2px rgba(90,90,90,0.5) /* horiz vertical blur <spread> color */
	}
}
/*
==========================================================
RESOLUTION - 800px+ (DESKTOP):
	NAV BAR STILL HORIZONTAL
==========================================================*/	
@media only screen and (min-width: 800px) {
	.menubarInStickyMode { width: 720px; }
	#homeButton.mainmenuButtons, #aboutButton.mainmenuButtons, #servicesButton.mainmenuButtons, #contactButton.mainmenuButtons, #moreButton.mainmenuButtons { width: auto; } /* This makes the buttons only take up as much space as they need */
	.mainmenuButtons a {
		font-size: 1.5rem;
		padding-left: 20px; padding-right: 20px;
	}
	.moremenuContainer {
		width: auto;
	}
}
/*
==========================================================
RESOLUTION - 1024px+ (HD DESKTOP):
	NAV BAR STILL HORIZONTAL
==========================================================*/
@media only screen and (min-width: 1024px) {
	.menubarInStickyMode { width: 900px; }
	.mainmenuButtons a {
		font-size: 1.6rem;
		padding-left: 30px; padding-right: 30px;
	}
}
/*
==========================================================
RESOLUTION - 1440px+ (XHD DESKTOP):
	NAV BAR STILL HORIZONTAL
==========================================================*/
@media only screen and (min-width: 1440px) {
	.menubarInStickyMode { width: 1100px; }
	.mainmenuButtons a {
		font-size: 1.6rem;
		padding-left: 40px; padding-right: 40px;
	}
}