/* For responsive '@media' directives associated with the styling contained in
 * this file, see 'main_page_header_r.css'. */

/* Page header for small screens, instead of 'div.page-header-container'. -- */

div#page-header-mini
{
	background-color:			#f9f9f9;
	border-bottom:				2px solid #eee;
	display:					none;
}

div.page-header-mini-bar
{
	display:					table;
	margin:						0 auto;
	padding:					12px 0;
}

div.page-header-mini-burger,
div.page-header-mini-logo
{
	display:					table-cell;
	vertical-align:				middle;
}

div.page-header-mini-burger
{
	color:						#365473;
	cursor:						pointer;
	font-size:					30px;
	text-align:					center;
	width:						75px;

	/* No double-click text selection: */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

div.page-header-mini-burger img
{
	/* When an image is 'display: inline' (the default), there a small gap
	 * underneath for character descenders, so 'block' used instead: */
	display:					block;
	/* To horizontally centre the logo; 'text-align: center' wouldn't work for
	 * an element that is 'display: block'. */
	margin:						0 auto;
	width:						30px;
}

div.page-header-mini-logo
{
}

div.page-header-mini-logo img.logo
{
	/* When an image is 'display: inline' (the default), there a small gap
	 * underneath for character descenders, so 'block' used instead: */
	display:					block;
	/* To horizontally centre the logo; 'text-align: center' wouldn't work for
	 * an element that is 'display: block'. */
	margin:						0 auto;
	width:						150px;
}

/* Page header for normal/larger displays. --------------------------------- */

div.page-header-container
{
	background-color:			#f9f9f9;
	border-bottom:				2px solid #eee;
	margin-bottom:				10px;
}

div.page-header
{
	display:					table;
	/* Horizontally centres this element: */
	margin:						0 auto;
	padding:					0 10px;
	width:						1244px;
}

div.page-header a
{
	border-bottom:				none;
	color:						#808080;
	font-size:					12px;
}

div.page-header a:focus,
div.page-header a:hover
{
	color:						#333;
}

/* Icon box. */

div.icon-box img.icon
{
	margin:						0 10px;
	padding-bottom:				12px;
	width:						40px;
}

/* Search box. */

div.page-header div.search-box
{
	width:						100%;
}

div.page-header div.search-box-container,
div#primary-nav-mini div.search-box-container
{
	/* Horizontally centres this element: */
	margin:						0 auto;
	width:						380px;
}

div.page-header div.search-box-container div.form-group,
div#primary-nav-mini div.search-box-container div.form-group
{
	padding-bottom:				15px;
	vertical-align:				middle;
}

div.page-header div.search-box-container input#searchTerm,
div#primary-nav-mini div.search-box-container input#searchTermMini
{
	margin-right:				5px;
	width:						350px;
}

div.page-header div.search-box-container input[type="submit"]
{
	background:					url("/images/icons_misc/search_96x96.png");
	background-size:			30px 30px;
	border:						none;
	height:						30px;
	width:						30px;
}

div#primary-nav-mini div.search-box-container input[type="submit"]
{
}

div.page-header div.search-box-container input[type="submit"]:focus,
div.page-header div.search-box-container input[type="submit"]:hover
{
	background-color:			#edf3f7;
}

div#primary-nav-mini div.search-box-container input[type="submit"]:focus,
div#primary-nav-mini div.search-box-container input[type="submit"]:hover
{
}

div.search-box-container div.form-group,
div.page-header div.form-group,
div.page-header div.header-group
{
	display:					inline-block;
}

div.page-header div.header-group
{
	/* To give a pointer cursor even there's no '<a>' tag used, e.g., when the
	 * response to a click is handled by JavaScript: */
	cursor:						pointer;
}

div.page-header img.logo
{
	width:						150px;
}

div.page-header-toggle-hideable
{
	display:					none;
}

div.page-header > div.hideable
{
	display:					table-cell;
	vertical-align:				bottom;
	white-space:				nowrap;
}

div.page-header-toggle-hideable,
div.page-header > div.hideable
{
	/* Explicit line height as &#9776; character appears to have a larger line
	 * height than regular ASCII characters: */
	line-height:				16px;
	padding:					12px 5px 8px 5px;
}

div.page-header div.form-group
{
	margin-bottom:				0;
}