/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Contains Site Specific Layout and Navigation related definitions.  
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#page
{
	margin: 			0 auto;   /* center */
	background:			transparent none;
	width:				100%;
	min-width:			640px;
	max-width:			1080px;
}

#header 
{
	background:			white url("../image/header_background.png") 240px 0 no-repeat;
	padding:			0;
	background-size:	cover;
}
#header .Logo 
{
	position: 			static;
	display:			block;
	height: 			150px;
	cursor: 			pointer;
}


#searchAndLoginContainer 
{
	position: 			absolute;
	top: 				35px;
	right: 				0;
	max-width: 			700px;
}
#searchAndLoginContainer > span
{
	display: 			inline-block;
	padding: 			15px 0px 15px 60px;
	background-color: 	var(--data-color);
	clip-path: 			polygon(42px 0, 100% 0, 100% 100%, 0 100%);
}
#searchAndLoginContainer > span > a
{
	padding:			0.5rem;
	font-weight: 		bold;
}

#searchAndLoginContainer a
{
	margin:				0 1em;
}


#siteSearch 
{
	display: 			inline-block;
	top:				0;
	width:				140px;
	position: 			relative;
	opacity:			0.7;
}
#siteSearch:focus-within 
{
	width:				400px;
}
#siteSearch #siteSearchInput 
{
	margin-top: 		5px;
	padding: 			8px 5px 0px 5px;
	width: 				calc(100% - 50px);
	height: 			25px;
	border: 			0;
	background-color: 	transparent;
}
#siteSearch button[type="submit"] 
{
	margin: 1px 3px 5px 2px;
}
#siteSearch button[type="submit"]::before
{
	margin: 			0;
}



#siteNavigationMenu.HorizontalMenu 
{
    background-color: 	var(--heading-color);
    background-color: 	#12515ecc;
}

#siteNavigationMenu 
{
	padding: 			0.25em 0rem 0.2em 1rem;
}

/* GARTH TODO: remove 
#xxxxsiteNavigationMenu > li:last-child::after 
{
    background-color: white;
    width: calc(100% - 670px);
    height: 60px;
    transform: skew(-20deg);
    content: " ";
    position: absolute;
    top: 0px;
    margin-left: 50px;
}
*/

#siteNavigationMenu.HorizontalMenu > li
{
	border: 			none;
	line-height: 		24px;
}
#siteNavigationMenu > li > label,
#siteNavigationMenu > li > a
{
	background-color: 	white;
	text-decoration:	none;
}
#siteNavigationMenu.HorizontalMenu > li:hover 
{
	border-radius: 		0;
}
#siteNavigationMenu.HorizontalMenu > li:hover > label,
#siteNavigationMenu.HorizontalMenu > li:hover > a
{
	background-color: #348e81;
    color: var(--hover-color);
    background-color: var(--hover-background-color);
}

/*
#siteNavigationMenu.HorizontalMenu > li > label,
*/
#siteNavigationMenu.HorizontalMenu > li #homeMenu a
{
	line-height: 20px;
}

#siteNavigationMenu #homeMenu 
{
	height: 38px;
}
#siteNavigationMenu #homeMenu a 
{
	padding: 2px 5px;
	font-size: 24px;
}
#siteNavigationMenu.HorizontalMenu > #homeMenu:hover 
{
	color: var(--hover-background-color);
	border: none;
}


#siteNavigationMenu.HorizontalMenu > li > a, 
#siteNavigationMenu.HorizontalMenu > li > a:visited, 
#siteNavigationMenu.HorizontalMenu > li > .Title, 
#siteNavigationMenu.HorizontalMenu > li > label 
{
	padding: 8px 10px 6px 10px;
}
#siteNavigationMenu.HorizontalMenu > li > input[type="radio"] + label::after 
{
	vertical-align:	bottom;
}
	

#siteNavigationMenu > li > input[type="checkbox"]:checked + label, 
#siteNavigationMenu > li > input[type="radio"]:checked + label 
{
	color:			#0f515f;
	font-weight: bold;
	border-radius: 0;
}

#siteNavigationMenu > li 
{
	margin: 0.5em 0.5rem 0.5em 0;
}




/* GARTH TODO: REMOVE MEGAMENU ONCE RESOURCES IS CONVERTED TO LANDING PAGE. */

#siteNavigationMenu .MegaMenu 
{
	top: 50px;
	background-color: #348e81;  /* orig 84cec1, then bretts 78dcc7 #; */
}


#siteNavigationMenu .MegaMenu .Body .Block 
{
	border-left: 1px dotted #0f515f;
}
#siteNavigationMenu .MegaMenu .Body .Block h3, 
#siteNavigationMenu .MegaMenu .Body .Block h4, 
#siteNavigationMenu .MegaMenu .Body .Block h5 
{
    background-color: #247e71;
	border: 0;
}
#siteNavigationMenu .MegaMenu .Body .Block ul li a 
{
/*	color:	 #0f515f;*/
}


#content
{
	margin: 0;
	padding-top: 0.25em;
}
#content > header 
{
    margin-top: 1.5em;
}


#content section h3
{
	position: 			relative;
	margin-top:			calc(2 * var(--block-spacing));
	margin-bottom: 		20px;
}
#content section h3::after,
{
	content : 			" ";
	position: 			absolute;
	bottom: 			-8px;
	left: 				0;
	height: 			5px;
	width: 				100px;  
	border-bottom: 		5px solid var(--hover-background-color);
}

#content section .DataViz h3
{
	margin-top:			auto;
	margin-bottom: 		auto;
}
#content section .DataViz h3::after
{
	display:			none;
}


#footer
{
	border-top:	10px solid #fbd33e;
	background-color: #0f515f;
}

#footer h3
{
	margin-bottom: 0;
}

#footer nav .Block
{
	vertical-align: top;
}


#footer .SocialMedia li
{
	margin-left: -10px;
}

#footer .SocialMedia li a:hover::before
{
	color: var(--hover-background-color);
}

#footer .SocialMedia li a::before
{
	background-color: white;
	border-radius: 50%;
	border: 1px solid #4e2683;
	padding: 4px;
}

#footer .SocialMedia a.Instagram::before
{
	content:		"\e500";
	color:			#2d80a7;
}

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