/*
 * WebTelek site header for phpBB.
 *
 * Ported from styles/prosilver/theme/webtelek.css on the old t1.micro box.
 * That file was a 6.6 KB slice of the main site's stylesheet and carried far
 * more than the header - footer, title buttons, tv-channel rules and so on -
 * none of which the injected markup uses. Only the logo row and menu bar are
 * kept here.
 *
 * Two changes from the original:
 *
 *  - Every rule is scoped under .top-logo / .header-menu. The original had a
 *    bare `.logo { padding-left:31px; width:181px }`, and prosilver 3.3 puts
 *    class="logo" on its own site-logo link in the headerbar, so unscoped it
 *    would restyle a phpBB element that did not exist in 3.0.
 *
 *  - The IE-only `width: expression(...)` hacks are dropped. They stopped
 *    doing anything in IE 11 (2013) and are a scripting vector in the
 *    browsers that did honour them; `min-width` already covers the case.
 *
 * The background images live in the main site's docroot at /images/, outside
 * the forum, and are referenced by absolute path exactly as the original did.
 *
 * The footer rules are scoped under .footer for a reason beyond tidiness:
 * prosilver 3.3 puts class="footer-copyright" on its own credit-line spans in
 * overall_footer.html, so an unscoped .footer-copyright rule would float and
 * pad phpBB's copyright block as well. prosilver uses none of these class
 * names in its stylesheets, only in that markup.
 */

/* --- page box ------------------------------------------------------------ */

/*
 * prosilver 3.3 sets `body { padding: 12px 0 }`; prosilver 3.0 on the old box
 * used `padding: 0`. That 12px shows up as a white strip above the WebTelek
 * logo bar and another below the site footer, neither of which exists on the
 * old forum or anywhere else on webtelek.com - the logo bar and footer are
 * meant to sit flush against the top and bottom of the page.
 *
 * Zeroing it costs nothing internally: phpBB's own .wrap carries `padding:
 * 15px` of its own, so the board panel keeps its spacing either way.
 *
 * This stylesheet is emitted after prosilver's (INCLUDECSS puts it last in
 * {$STYLESHEETS}), so a plain rule of equal specificity wins the cascade and
 * no !important is needed.
 */
body {
	padding: 0;
}

/* --- logo row ------------------------------------------------------------ */

.top-logo {
	background: url(/images/bg_head_1.jpg) #ffffff bottom repeat-x;
	width: 100%;
	min-width: 996px;
}

.top-logo table {
	width: 100%;
	height: 109px;
}

.top-logo td {
	text-align: center;
}

/*
 * wt-logo / wt-access, not the logo / access of the original markup: prosilver
 * 3.3 has its own `.logo { float: left; padding: 10px 13px 0 10px }` for the
 * headerbar link, and it applied to this cell. Scoping our rules under
 * .top-logo does not help - it stops us leaking out, not prosilver leaking in.
 * The float blockified the cell (it stopped filling the 109px row) and the
 * padding-top put the logo 10px from the top rather than centred, 28px above
 * where it sits everywhere else on the site.
 */
.top-logo td.wt-logo {
	padding-left: 31px;
	padding-right: 38px;
	width: 181px;
	text-align: left;
}

/* --- menu bar ------------------------------------------------------------ */

.header-menu {
	width: 100%;
	min-width: 996px;
}

.header-menu table {
	height: 40px;
	width: 100%;
	border-collapse: collapse;
}

.header-menu td {
	text-align: center;
	height: 40px;
}

.header-menu a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	font: bold 13px Arial, Helvetica, sans-serif;
	height: 32px;
	line-height: 31px;
	white-space: nowrap;
	padding: 3px 0;
}

.header-menu .menu-begincap {
	background: transparent url(/images/menu_begincap_blue.gif) no-repeat scroll 0 0;
	width: 25px;
}

.header-menu .menu-item {
	background: transparent url(/images/menu_backdrop_blue.gif) repeat-x scroll 0 0;
}

.header-menu .menu-item a:hover {
	background: transparent url(/images/menu_backdrop_blue_hover.gif) repeat-x scroll 0 0;
}

.header-menu .menu-item-selected {
	background: transparent url(/images/menu_backdrop_blue_selected.gif) repeat-x scroll 0 0;
}

.header-menu .menu-item-selected a {
	color: #000000;
}

.header-menu .menu-divider {
	font-size: 1px;
	width: 2px;
	background: transparent url(/images/menu_divider_blue.gif) no-repeat scroll 0 0;
}

.header-menu .menu-endcap {
	background: transparent url(/images/menu_endcap_blue.gif) no-repeat scroll 0 0;
	width: 28px;
}

/* --- prosilver's own headerbar ------------------------------------------- */

/*
 * Hidden: it duplicates what the WebTelek logo bar above it already says, and
 * the 3.0.9 forum on the old box did not have one - its page went straight
 * from the site menu to phpBB's navbar. The search box that prosilver 3.3
 * keeps inside the headerbar is relocated into the logo row by
 * overall_header_body_before.html, so hiding this does not remove search.
 */
#page-header .headerbar {
	display: none;
}

/* --- search box, relocated into the logo row ----------------------------- */

.top-logo td.wt-access {
	width: 214px;
	padding-right: 30px;
	text-align: right;
}

/* prosilver floats .search-header right within the headerbar; inside a table
   cell the cell's own alignment does the job. */
.top-logo .search-box {
	float: none;
	margin: 0;
	display: inline-block;
	text-align: left;
}

/* --- site footer --------------------------------------------------------- */

.footer {
	clear: both;
	border-top: 1px solid #ffffff;
	border-bottom: 9px solid #bebdb7;
	color: #acacac;
	font-size: 13px;
	width: 100%;
	min-width: 996px;
}

/* font-size is set explicitly because prosilver's base font size differs from
   the main site's; the old forum's copy of this stylesheet carried the same
   override for the same reason, while the main site's copy does not need it. */

.footer a {
	color: #acacac;
}

.footer .footer-inner {
	border-bottom: 2px solid #858480;
}

.footer .footer-inner:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.footer .footer-logo {
	float: left;
	padding: 27px 0 18px 34px;
	width: 233px;
}

.footer .footer-copyright {
	float: left;
	padding: 24px 0 0 24px;
}

.footer .footer-counters {
	float: right;
	padding: 19px 0 0 18px;
	width: 236px;
	text-align: left;
}

/* --- narrow screens ------------------------------------------------------- */

/*
 * prosilver 3.3 emits <meta name="viewport" content="width=device-width,
 * initial-scale=1"> and reflows correctly on a phone. The rules above do not:
 * they carry min-width:996px, inherited from the main site's fixed-width
 * layout. On a 390px screen that forces a horizontal scrollbar across the
 * whole page and pushes the board off to the right - so the forum was broken
 * on mobile by this stylesheet, not by phpBB.
 *
 * Note the main site is fixed the other way round: it pins the viewport to
 * width=996 because styles.css sets min-width:996px in six places and the
 * layout genuinely cannot reflow. Here the surrounding board can reflow, so
 * the right fix is to let this chrome shrink instead of pinning the viewport.
 */
@media (max-width: 996px) {

	.top-logo,
	.header-menu,
	.footer {
		min-width: 0;
	}

	/* The 109px row is sized for a desktop logo; let it size to content. */
	.top-logo table {
		height: auto;
	}

	.top-logo td.wt-logo {
		padding-left: 10px;
		padding-right: 10px;
		width: auto;
	}

	/*
	 * The search box relocated into the logo row costs more width than it earns
	 * on a phone. prosilver keeps its own search in the navbar just below, so
	 * hiding this one removes nothing the visitor cannot reach.
	 */
	.top-logo td.wt-access {
		display: none;
	}

	/*
	 * Menu links are white-space:nowrap and there are enough of them to exceed
	 * a phone's width whatever the font size. Scroll the bar itself rather than
	 * the page, so the board below still sits at device width.
	 */
	.header-menu {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.header-menu table {
		width: auto;
		min-width: 100%;
	}

	.header-menu a {
		font-size: 12px;
		padding: 3px 6px;
	}

	/* Decorative end caps are fixed-width and earn nothing once scrolling. */
	.header-menu .menu-begincap,
	.header-menu .menu-endcap {
		display: none;
	}

	/* Footer columns are floated three-across; stack them. */
	.footer .footer-logo,
	.footer .footer-copyright,
	.footer .footer-counters {
		float: none;
		width: auto;
		padding: 10px 10px 0;
		text-align: center;
	}
}