/*
	HHS Co-Branded Header
	Release Version: 1.3.0
	Release Date: 12/2/2016
	Release Notes: https://www.hhs.gov/utilities/cbh/cbh-release-notes.txt
*/

#hhsCoBrandedHeader
{
	width: 100%;
	background-color: #185394;
	padding: 0;
	font-family: Helvetica;
	font-size: 14px;
}

#hhsCoBrandedHeader #skip-link
{
	background-color: #000;
}

#hhsCoBrandedHeader #skip-link a
{
	color: #fff;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
#hhsCoBrandedHeader .element-invisible
{
    position: absolute !important;
    width: 1px;
    height: 1px;
	margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
#hhsCoBrandedHeader .element-invisible.element-focusable:active,
#hhsCoBrandedHeader .element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
}

#hhsCoBrandedHeader #topRow
{
	max-width: 940px;
	height: 40px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}

#hhsCoBrandedHeader #topRow a:focus
{
	outline: 1px solid #eef9ff;
}


#hhsCoBrandedHeader #logo
{
	float: left;
}

#hhsCoBrandedHeader #logo a:link,
#hhsCoBrandedHeader #logo a:visited
{
	display: block;
	width: 160px;
	height: 40px;
	text-indent: -1000em;
	z-index: 2000;
	background: url(https://www.hhs.gov/utilities/cbh/images/logo.png) no-repeat;
}

#hhsCoBrandedHeader #site-name
{
	display: inline-block;
	position: relative;
	left: 110px;
	padding-top: 12px;
	color: #d4eefc;
}

@media (min-width: 768px)
{
	#hhsCoBrandedHeader #topRow
	{
		text-align: center;
	}
	#hhsCoBrandedHeader #site-name
	{
		position: static;
	}
}

#hhsCoBrandedHeader #explore,
#hhsCoBrandedHeader #close
{
	display: none;
	float: right;
	padding-top: 10px;
	text-align: right;
}

#hhsCoBrandedHeader #explore.shown,
#hhsCoBrandedHeader #close.shown
{
	display: inline-block;
}

#hhsCoBrandedHeader #explore a:link,
#hhsCoBrandedHeader #explore a:visited,
#hhsCoBrandedHeader #close a:link,
#hhsCoBrandedHeader #close a:visited
{
	color: #fff;
	text-decoration: none;
}

#hhsCoBrandedHeader #explore #more img,
#hhsCoBrandedHeader #close #more img
{
	position: relative;
	top: 2px;
	margin-left: 5px;
}

#hhsCoBrandedHeader #linkRow
{
	display: none;
	height: 0;
	background:url(https://www.hhs.gov/utilities/cbh/images/cbh-bg.gif) #e9eaeb 0px -40px;
	text-align: center;
	
	-webkit-transition: all 0.5s ease; 
	-moz-transition: all 0.5s ease; 
	-ms-transition: all 0.5s ease; 
	-o-transition: all 0.5s ease; 
	transition: all 0.5s ease;
}

#hhsCoBrandedHeader #linkRow.shown
{
	display: block;
	height: 44px;
	
	-webkit-transition: all 0.5s ease; 
	-moz-transition: all 0.5s ease; 
	-ms-transition: all 0.5s ease; 
	-o-transition: all 0.5s ease; 
	transition: all 0.5s ease;
}

#hhsCoBrandedHeader #linkRow .linkBlock
{
	display: inline-block;
	width: 25%;
	max-width: 235px;
	height: 42px;
	box-sizing: border-box;
	padding-top: 12px;
}

#hhsCoBrandedHeader #linkRow a:link,
#hhsCoBrandedHeader #linkRow a:visited
{
	font-weight: bold;
}

#hhsCoBrandedHeader #linkRow a:link,
#hhsCoBrandedHeader #linkRow a:visited,
#hhsCoBrandedHeader #linkStack a:link,
#hhsCoBrandedHeader #linkStack a:visited
{
	color: #fff;
	text-decoration: none;
}

#hhsCoBrandedHeader #linkRow .linkBlock#about
{
	background-color: #185493;
}

#hhsCoBrandedHeader #linkRow .linkBlock#programs
{
	background-color: #c94747;
}

#hhsCoBrandedHeader #linkRow .linkBlock#grants
{
	background-color: #77508e;
}

#hhsCoBrandedHeader #linkRow .linkBlock#regulations
{
	background-color: #19826e;
}

#hhsCoBrandedHeader #linkStack
{
	display: none;
}


/*
	Mobile Styles (phone/tablet)
*/
@-ms-viewport
{
	width: device-width;
}

@media only screen and (max-width: 984px)
{
	#hhsCoBrandedHeader #topRow
	{
		margin-left: 12px;
		margin-right: 12px;
	}
}

@media only screen and (max-width: 767px)
{
	#hhsCoBrandedHeader .row
	{
		min-width: 296px;
	}

	#hhsCoBrandedHeader #site-name,
	#hhsCoBrandedHeader #linkRow
	{
		display: none;
	}
	
	#hhsCoBrandedHeader #linkStack
	{
		display: none;
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: 0;
		background-color: #185394;
		text-align: center;
		font-size: 17px;
	
		-webkit-transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-ms-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease; 
		transition: all 0.5s ease;
	}

	#hhsCoBrandedHeader #linkStack.shown
	{
		display: block;
		height: 210px;
		
		-webkit-transition: all 0.5s ease; 
		-moz-transition: all 0.5s ease; 
		-ms-transition: all 0.5s ease; 
		-o-transition: all 0.5s ease; 
		transition: all 0.5s ease;
	}

	#hhsCoBrandedHeader .stackItem
	{
		margin-left: 12px;
		margin-right: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, .25);
	}

	#hhsCoBrandedHeader .stackItem:last-child
	{
		border-bottom: 0;
	}

}