/* This is a companion to 'main_page_header.css' and contains the responsive
 * '@media' directives associated with styling specified in that file. */

/* For width 960px to 1278px: ---------------------------------------------- */

@media only screen
	and (max-width: 1278px)
{

div.page-header
{
	width:						936px;
}

div.page-header div.search-box-container,
div#primary-nav-mini div.search-box-container
{
	width:						300px;
}

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

}

/* For width 720px to 959px: ----------------------------------------------- */

@media only screen
	and (max-width: 959px)
{

div#page-header-mini
{
	display:					block;
}

div.page-header-container
{
	display:					none;
}

div.page-header-mini-bar,
div.page-header
{
	width:						698px;
}

div.page-header div.search-box-container
{
	width:						225px;
}

div.page-header div.search-box-container input#searchTerm
{
	width:						175px;
}

div#primary-nav-mini div.search-box-container
{
	padding-left:				25px;
	width:						300px;
}

div#primary-nav-mini div.search-box-container input#searchTermMini
{
	width:						200px;
}

}

/* For width 620px to 719px: ----------------------------------------------- */

@media only screen
	and (max-width: 719px)
{

div.page-header-mini-bar,
div.page-header
{
	width:						600px;
}

div.page-header
{
	display:					block;
	padding:					10px;
	text-align:					center;
}

div.page-header-toggle-hideable,
div.page-header > div.hideable
{
	display:					block;
	padding:					5px;
}

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

div.page-header div.search-box-container
{
	width:						250px;
}

div.page-header div.search-box-container input#searchTerm
{
	width:						200px;
}

}

/* For width < 620px: ------------------------------------------------------ */

@media only screen
	and (max-width: 619px)
{

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

div.page-header-mini-bar,
div.page-header
{
	width:						310px;
}

}