:root{/* Defive page colors*/
/* Page colors */
	--headerbox-bkg: rgba(242, 242, 242, 0.85);
	--headerbox-border: blue;
	--headerbox-color:  white;
	--mainbox-border: var(--headerbox-border);
	--mainbox-bkg: rgba(250, 250, 250, 0.9);
	--sidebox-bkg: var(--mainbox-bkg);
/* Nav Menu colors */
	--nav-bkg: rgba(48, 123, 163, 0.85);
	--nav-border: rgba(255, 165, 0, 0.5);
	--nav-focus: #779DAD;
	--nav-sub-bkg: rgba(61, 101, 130, 0.5);
	--nav-sub-focus: var(--nav-focus);
}
body{
	background: url('../imgs/PageBG.jpg');
	background-repeat: repeat;
	background-size: 50%;
}
h1, h2, h3, h4, h5, h6 {
	background: url('../imgs/h_bg.jpg');
	background-position: top;
	background-size: contain;
	background-repeat: repeat-x;
	border-radius: 0.3em;
	padding:0.1em 0.3em;
	color:  #222439;
}
.pSection {
	background: url('../imgs/ContentBg.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0.5em;
	padding-left: 3em;
	margin-bottom: 0.3em;
}
@media screen and (min-width: 721px){
	#headerBoxText{
		margin-top:3em;
		font-size: 150%;
	}
	#headerBoxSpaceHolder{
		height:8em;
	}
	#headerBox{
		height:7.99em;
	}
	#LogoDiv{
		height:90%;
		width: 12em;
	}
}
#headerBox{
	background-image: url('../imgs/HeaderBG.png');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: 70%;
}
#LogoDiv{
	background-image: url('../imgs/Logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 0.5em;
}
#mainBox{
	background: #F5EFF7;
	background: var(--mainbox-bkg);
	border: 1px solid brown;
	border: 1px solid var(--mainbox-border);
	border-radius: 6px;
	border-left:none;
	border-top:none;
	overflow: hidden;
}
.sideBox{
	background: rgba(255, 255, 255, 0.85);
	background: var(--sidebox-bkg);
	border: 1px solid brown;
	border: 1px solid var(--mainbox-border);
	border-radius: 6px;
	border-left:none;
	border-top:none;
}
#storeHeader, #storeHeader select{
	color:	var(--headerbox-bkg);
}