/* 
The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the 
screen size is 800px wide or smaller.
----- 3 columns -----

--- #ab9678  color - paperbag

*/
.gray-75{background-color: #333333; } /*  25% very dark shade of gray */
.brown-bag{background-color: #ab9678; } /*  brown paper bag */
.color-white{background-color: white; } /* white */

.emptybox{width: 100%;  height: 40px;  border: 2px black solid;}

* {box-sizing: border-box;}

/*  -----  Site Nav Header - will be on every web page on the site ---------------  */
/*  -----  Site Nav Header - Contains a navigation section -------             --------  */

.spread{padding-left:5px; padding-right:5px}
.header-nav-title-ham{font-size:25px; cursor: pointer;  color:white;}   /* ------Set the style of the hambuger icon---------------------------------------------------- */

.header-nav-boxflex-container {
		display: flex;
		flex-direction: row;
		font-size: 22px;
		vertical-align: middle;
		text-align: center;
		background-color: #333333; 
		font-family: "Copperplate Gothic", Tahoma, Arial;
		height:55px;
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		flex-wrap: wrap;
}

.header-nav-boxflex-left { padding-top:2.5px; width: 25%; height:47px; margin-top:0; vertical-align: middle; text-align: left;}
.header-nav-boxflex-middle { padding: 3px;  width:650px;  height:47px;  background-color: yellow; }
.header-nav-boxflex-right {  padding: 3px;   width: 25%;  height:47px;}

/*-- ------ define style for inside the flex boxes  ----------------- */

.header-nav-boxcon-left{ padding-top:2.5px; margin-top:0; vertical-align: middle; text-align: left;}
.header-nav-boxcon-center{ padding-top:0px; margin-top:0; vertical-align: middle; text-align: center;}
.header-nav-boxcon-right{ margin-top:0;	 padding-top:2.5px; vertical-align: middle; text-align: right;}

/*  -----  Page Headers - will be on every web page on the site -----------------------------------------------------  */
/*  -----  Contains the page title and a naviagtion link on the left for large dropdown menu ---------------  */

.header-nav-page-ham{font-size:25px; cursor: pointer;  color:black;}   /* ------Set the style of the hambuger icon---------------------------------------------------- */

.header-page-boxflex-container {
		display: flex;
		flex-direction: row;
		font-size: 22px;
		vertical-align: middle;
		text-align: center;
		background-color: #ab9678; 
		font-family: "Copperplate Gothic", Tahoma, Arial;
		height:55px;
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		flex-wrap: wrap;
}

.header-page-boxflex-left       {padding-top:2.5px; width: 10%; height:47px; margin-top:0; vertical-align: middle; text-align: left;}
.header-page-boxflex-middle { padding: 3px; width: 80%; height:47px; flex-wrap: wrap;}
.header-page-boxflex-right     { padding: 3px;  width: 10%; height:47px;}

/*  -----  Page Headers - will be on every web page on the site ---------------  */
/* ------------------------------------------------------------------------------------------------- */
/*  Used for Page Heading Text*/

.header-pagetitle-left-flex      { padding-top:2.5px; margin-top:0; vertical-align: middle; text-align: left;}
.header-pagetitle-center-flex {padding-top:2.5px; margin-top:0;  vertical-align: middle; text-align: center;}
.header-pagetitle-right-flex    {padding-top:2.5px; margin-top:0;	vertical-align: middle; text-align: right;}
/* ---------------------------------------------------------- */

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) { .header-page-flex-container { flex-direction: column; }
}