/*
 * Phone / narrow-screen layout for the portal template xp.winupdate.like (all Joomla pages; the forum and the blog have their own skins).
 * The template is built from fixed-width tables. Below 860 px this file stacks its columns and lets wide content shrink.
 * Desktop (wider than 860 px) is not changed at all. No images, no external resources.
 * Specificity note: the template stylesheets are linked before this file, but rules that compete with them use td./table. selectors anyway.
 */

@media (max-width: 860px) {
	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* header: logo and login form one under another; the login form scrolls sideways inside its own box if it is still too wide */
	table.header,
	table.header > tbody,
	table.header > tbody > tr,
	table.header > tbody > tr > td {
		display: block;
		width: auto;
		height: auto;
	}

	table.header > tbody > tr > td[width] {
		display: none;
	}

	table.header > tbody > tr > td {
		padding: 4px 10px;
		overflow-x: auto;
	}

	table.header img {
		max-width: 100%;
		height: auto;
	}

	/* top menu wraps into lines */
	#mainlevel-nav,
	#mainlevel-nav > tbody,
	#mainlevel-nav > tbody > tr,
	#mainlevel-nav > tbody > tr > td {
		display: block;
		width: auto;
	}

	#mainlevel-nav td {
		padding: 0 8px;
	}

	#mainlevel-nav td span {
		display: inline-block;
		margin: 0 8px 4px 0;
	}

	/* page body: content first, then the right-hand modules */
	#ipbwrapper {
		margin: 8px 8px 12px;
		overflow-x: hidden;
	}

	#ipbwrapper > table,
	#ipbwrapper > table > tbody,
	#ipbwrapper > table > tbody > tr,
	#ipbwrapper > table > tbody > tr > td,
	#ipbwrapper > table > tbody > tr > td > table,
	#ipbwrapper > table > tbody > tr > td > table > tbody,
	#ipbwrapper > table > tbody > tr > td > table > tbody > tr,
	#ipbwrapper > table > tbody > tr > td > table > tbody > tr > td {
		display: block;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	td.maincontent {
		padding-right: 0;
	}

	td.legals,
	td.right,
	td.left {
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}

	/* wide things inside articles and modules */
	#ipbwrapper img,
	#ipbwrapper iframe,
	#ipbwrapper embed,
	#ipbwrapper object,
	#ipbwrapper video {
		max-width: 100%;
		height: auto;
	}

	td.maincontent {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	td.maincontent pre {
		max-width: 100%;
		overflow-x: auto;
	}

	td.maincontent input[type="text"],
	td.maincontent input[type="search"],
	td.maincontent textarea,
	td.maincontent select {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* footer */
	table.footer,
	table.footer > tbody,
	table.footer > tbody > tr,
	table.footer > tbody > tr > td {
		display: block;
		width: auto;
	}

	table.footer td[width] {
		display: none;
	}

	table.footer td {
		padding: 4px 10px;
		text-align: left;
	}
}