/**
 * @brief Define the appearance of the headerbar menu.
 */
#header-bar .headerbar-hide
{
	/* Some list items we want only to appear in the Hamburger menu. Hide them for the headerbar.*/
	display: none;
}

#header-bar > form,
#header-bar > div
{
	display: inline-block;
	background-color: transparent;
	transition: background-color 0.1s ease-in-out 0.25s;
	width: 16%;
	text-align: center;
	padding: 0;
	float: left;
}

#header-bar > form
{
	/* The remaining width: 100% - (16% * 4 regular menu items) */
	width: 36%;
}

#header-bar > div:hover,
#header-bar > div.header-bar-menu-expanded
{
	background-color: #49121f;
	transition: background-color 0s;
}

#header-bar img
{
	display: none;
}

#header-bar h2
{
	font-size: 120%;
}
#header-bar h2, #header-bar h2 a
{
	padding: 0;
	display: block;
	color: #e9e6cd;
	line-height: inherit;
	text-decoration: none;
}

#header-bar ul
{
	box-sizing: border-box;
	top: 42px;
	position: absolute;
	background-color: #49121f;
	color: #e9e6cd;
	border: 1px solid rgba( 0, 0, 0, 0.5 );
	border-top: none;
	border-radius: 0 5px 5px 5px;
	margin: 0;
	z-index: 6;
	/* Should be greater than #header-bar > div{ width } */
	min-width: 17%;
	margin-top: 0;
	height: auto;
}
#header-bar div:not(:hover):not(.header-bar-menu-expanded) ul,
#header-bar div ul li:not(:hover) ul:not(.header-bar-menu-expanded)
{
	border: none;
}

#header-bar ul li
{
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.25s linear;
	background: none;
	/* Use box-shadow instead of border because
	a border will change the collapsed height of the element. */
	box-shadow: inset 0px -1px 0px 0px rgba( 0, 0, 0, 0.5 ),
		inset 0px 1px 0px 0px rgba( 255, 255, 255, 0.25 );
}

#header-bar div:hover > ul > li, #header-bar div ul li:hover ul li,
#header-bar .header-bar-menu-expanded > li, #header-bar .header-bar-menu-expanded > ul > li
{
	max-height: 42px;
}

#header-bar ul li a
{
	color: inherit;
	background-color: inherit;
	display: block;
	padding: 0 1em;
}

#header-bar ul li a:hover,
#header-bar ul li a:focus
{
	box-shadow: 0 0 15px 3px rgba( 0, 0, 0, 0.2 ) inset;
	background-color: #c8c3b0;
	color: #49121f;
	text-decoration: none;
}

#header-bar ul li:first-child
{
	border-top-right-radius: 5px;
}
#header-bar ul li:last-child
{
	border-radius: 0 0 5px 5px;
}

#header-bar div form
{
	margin: 0 1em;
}

#header-bar form input
{
	width: 90%;
	width: calc( 100% - 2em );
	border: 2px solid white;
	border-right: 0;
	border-radius: 2px;
}

/*Submenus*/
#header-bar div ul ul
{
	left: 100%;
	top: 0;
	border-radius: 5px;
}
#header-bar div ul ul li:first-child
{
	border-top-left-radius: 5px;
}

/* Autcomplete for Search Box */
#header-bar .tt-hint
{
	margin: auto;
	transform: translateY( -50% );
	-webkit-transform: translateY( -50% );
	-ms-transform: translateY( -50% );
	-moz-transform: translateY( -50% );
	-o-transform: translateY( -50% );
	right: 0;
}
#header-bar .tt-menu
{
	text-align: left;
}

@media all and ( max-width: 768px )
{
	#header-bar h2
	{
		font-size: 110%;
	}
}
@media all and ( max-width: 480px )
{
	#header-bar > div
	{
		display: none;
	}
	#header-bar > form
	{
		width: 100%;
		float: none;
	}
}
/* Prevent iPhones from getting unusable menu. */
@media ( hover: none )
{
	#header-bar div:active > ul > li, #header-bar div ul li:active ul li
	{
		max-height: 42px;
	}
}