/* 0-639 
	hamburger with pushout menu
html { 	background-color: red; }
*/

body, html
{
	min-width: 				425px;
}

#banner .DOHBanner 
{
	display: 				none;
}

#header .SiteTitle
{
	font-size:				24px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U */
#siteNavigation
{
	height:					43px;
	background-color:		#c2d7f8;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - C O N T R O L */
#siteNavigation #siteMenuPanelsControl + .FontIcon
{
	position:				absolute;
	top:					4px;
	right:					10px;
	color:					var(--color);
	background-color: 		white;
	font-size:	 			20px;
	padding: 				5px 5px 0 5px;
	border: 				1px solid var(--color);
	border-radius: 			5px;
}
#siteNavigation #siteMenuPanelsControl + .FontIcon:hover
{
	background-color:		var(--hover-background-color);
	color:					var(--hover-color);
}
#siteNavigation #siteMenuPanelsControl:not(checked) + .FontIcon::before
{
	content: 				"\e030";
}
#siteNavigation #siteMenuPanelsControl:checked + .FontIcon::before
{
	content: 				"\e11b";
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - M A I N */
#siteNavigation .HorizontalMenu 
{
	position: 			absolute;
	top: 				40px;
	right: 				0;
	visibility: 		hidden;
	width: 				220px;
	padding: 			10px 0px 8px 10px;
}
#siteNavigation .HorizontalMenu > li 
{
	position: 			relative;
	display: 			block;
	margin-right:		0.5em;
	border-radius: 		0;
}
#siteNavigation .HorizontalMenu > li:hover, 
#siteNavigation .HorizontalMenu > li:active, 
#siteNavigation .HorizontalMenu > li:focus, 
#siteNavigation .HorizontalMenu > li.On:hover 
{
	overflow: 			visible;
	border-radius: 		5px;
}


#siteNavigationMenu #homeMenu a { padding-right: 170px; }

#siteNavigation #siteMenuPanelsControl:checked ~ .HorizontalMenu
{
	visibility: 		visible;
}


#siteNavigation .HorizontalMenu  > li > input + label
{
	display: 			block;
	padding-left: 		25px;
	line-height:		35px;
}
#siteNavigation .HorizontalMenu > li > input[type="radio"]:checked + label
{
	border-radius: 		0px 5px 5px 0px;
}
#siteNavigation .HorizontalMenu > li > input[type="radio"] + label::after
{
	position: 			absolute;
	left: 				0;
	padding-left: 		0;
	content: 			"\e016";
}
#siteNavigation .HorizontalMenu > li > input[type="radio"]:checked + label::after
{
	left: 				auto;
	right: 				10px;
	content: 			"\e11b";
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S I T E   M E N U - M E G A M E N U */
#siteNavigation .HorizontalMenu li > .MegaMenu 
{
    top: 				-155px;
	left: 				auto;
    right: 				200px;
	min-width: 			420px;
	padding-top: 		0;
	background-color: 	#557799;
}

#siteNavigation .HorizontalMenu li > input:checked ~ .MegaMenu 
{
	visibility: 		hidden;
}
#siteNavigation #siteMenuPanelsControl:checked ~ .HorizontalMenu li > input:checked ~ .MegaMenu 
{
	visibility: 		visible;
}

#siteNavigation .HorizontalMenu li > .MegaMenu .Body  
{
	display: 			block;
}
#siteNavigation .HorizontalMenu li > .MegaMenu .Body .Block 
{
	display: 			block;
	padding-top: 		0;
	padding-bottom: 	0;
}
#siteNavigation .HorizontalMenu li > .MegaMenu .Body .Block li
{
	padding: 			0;		/* tightens list, but topic icons now as nice */
}
#siteNavigation .HorizontalMenu li > .MegaMenu .Body .Block h5
{
	margin-top: 		20px;
}

#siteNavigationMenu .MegaMenu .Body .Block ul li ul li > a 
{
	padding: 			17px 8px 14px 5px;
}


#siteNavigation .HorizontalMenu .MegaMenu .Body .Block .TextIconBlocks
{
	display: 			flex;
	flex-wrap: 			wrap;
/*	justify-content: 	center; */
}
#siteNavigation .HorizontalMenu .MegaMenu .Body .Block .TextIconBlocks li
{
    vertical-align: 	top;
	padding:			0 8px;
}
#siteNavigation .HorizontalMenu .MegaMenu .Body .Block .TextIconBlocks a
{
	line-height: 		1em;
	height: 			100px;
}


#siteNavigationMenu .MegaMenu .Body .Block .Icon li > a::before, 
#siteNavigationMenu .MegaMenu .Body .Block li.Icon > a::before 
{
	top: 				16px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ S E A R C H */
#siteSearch 
{
	border-radius: 		5px;
	right: 				50px;
	top: 				5px;
    width: 				calc(25rem + 35px);
    max-width: 			calc(100% - 300px);
}
#siteSearch #siteSearchInput 
{
	width: 				calc(100% - 35px);
	height:				32px;
	padding: 			3px 0 1px 7px;
}

#siteSearch button[type="submit"]
{
	margin: 			1px 0 2px 0px;
	height:				24px;
	min-width:			24px;
	max-width:			24px;
}
#siteSearch button[type="submit"]::before 
{
	font-size: 			24px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ O T H E R */
#content
{
	margin-top: 		0;
	padding: 			3px 8px 8px 8px;
}



@media only screen and (max-width:  699px)
{
	#xxxxheader .SiteTitle
	{
		padding: 28px 0px 0px 20px;
	}
	#header .SiteTitle
	{
		height: 65px;
		visibility: hidden;
	}
	#siteNavigation .HorizontalMenu li > .MegaMenu 
	{
		right: 40px;
	}
}

@media only screen and (max-width:  959px)
{
	.Aside #page #content #contentSections 
	{
		width: 				100%;
		margin:				0 auto;
	}
	#page #content .Aside 
	{
		float:				none;
		margin:				2rem auto;
		width: 				500px;
		max-width: 			90%;
	}
}

/*============================ End of Style Sheet ============================*/