/*
 * Mobile compatibility layer for vBulletin 3.8.11 / Sultanaby2.
 * Conservative rules preserve the desktop design while making legacy tables,
 * forms, media, navigation, and post content usable on smaller screens.
 */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

textarea,
input,
select,
button {
	max-width: 100%;
}

.postbody,
.postbit,
.alt1,
.alt2,
.panel,
.panelsurround {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

@media screen and (max-width: 820px) {
	html,
	body {
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden;
	}

	body,
	td,
	th,
	p,
	li,
	input,
	select,
	textarea,
	button {
		font-size: 16px !important;
		line-height: 1.55;
	}

	.smallfont,
	.time,
	.shade {
		font-size: 14px !important;
		line-height: 1.45;
	}

	#container,
	#page,
	.page,
	.pagebody,
	.body_wrapper,
	#content,
	.content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	table {
		max-width: 100% !important;
	}

	table.tborder,
	table[width="100%"] {
		width: 100% !important;
	}

	/*
	 * Large legacy data tables remain readable by scrolling inside the table
	 * instead of widening the entire browser page.
	 */
	.tborder,
	.panelsurround,
	.panel {
		max-width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	td,
	th {
		height: auto !important;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="search"],
	textarea,
	select {
		min-height: 42px;
		padding: 8px;
	}

	textarea {
		width: 100% !important;
		box-sizing: border-box;
	}

	input[type="submit"],
	input[type="button"],
	button {
		min-height: 42px;
		padding: 8px 14px;
		cursor: pointer;
	}

	.navbar,
	.vbmenu_control,
	.vbmenu_option,
	.tcat,
	.thead {
		white-space: normal !important;
	}

	.vbmenu_control,
	.vbmenu_option {
		min-height: 40px;
		padding: 8px !important;
	}

	/* Make embedded media and AME/YouTube players fit the phone screen. */
	iframe,
	object,
	embed,
	video,
	.ame_container,
	.container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Prevent fixed-size avatars, signatures, and attachments from overflowing. */
	.avatar img,
	.signature img,
	.attachments img,
	.postbody img {
		max-width: 100% !important;
		height: auto !important;
	}

	/*
	 * The desktop header consists of five fixed-width background cells.
	 * On phones, keep only the center title panel and let it fill the row.
	 */
	td[background*="mhkhost_01.gif"],
	td[background*="mhkhost_02.gif"],
	td[background*="mhkhost_04.gif"],
	td[background*="mhkhost_05.gif"] {
		display: none !important;
	}

	td[background*="mhkhost_03.gif"] {
		display: table-cell !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 129px !important;
		background-color: #103f73 !important;
		background-size: 300px 129px !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}

	/*
	 * Navbar login row: the original desktop template gives almost all of the
	 * width to the breadcrumb cell and leaves the login form in a 250px cell.
	 * Give the login cell most of the row on smaller screens, then center and
	 * enlarge only this form. Keep table semantics intact to avoid the tall
	 * empty panel produced by block-level table overrides.
	 */
	table.tborder:has(#navbar_username) {
		table-layout: fixed !important;
	}

	table.tborder:has(#navbar_username) > tbody > tr > td.alt1 {
		width: 36% !important;
	}

	table.tborder:has(#navbar_username) > tbody > tr > td.alt2 {
		width: 64% !important;
		padding: 12px 8px !important;
		white-space: normal !important;
	}

	table.tborder:has(#navbar_username) form[action*="login.php"] {
		width: 100% !important;
		max-width: 430px !important;
		margin: 0 auto !important;
	}

	table.tborder:has(#navbar_username) form[action*="login.php"] > table {
		width: 100% !important;
		margin: 0 auto !important;
	}

	table.tborder:has(#navbar_username) #navbar_username,
	table.tborder:has(#navbar_username) #navbar_password {
		width: 150px !important;
		min-width: 150px !important;
		height: 42px !important;
		box-sizing: border-box !important;
		font-size: 16px !important;
	}

	table.tborder:has(#navbar_username) label,
	table.tborder:has(#navbar_username) input[type="submit"] {
		font-size: 16px !important;
	}

	/* Remove wide spacer cells commonly used by older custom templates. */
	td[width="100%"]:empty,
	td.nowrap:empty {
		width: 0 !important;
		padding: 0 !important;
	}
}

@media screen and (max-width: 480px) {
	body,
	td,
	th,
	p,
	li {
		font-size: 15px !important;
	}

	.smallfont,
	.time,
	.shade {
		font-size: 13px !important;
	}

	.tborder {
		border-left-width: 0 !important;
		border-right-width: 0 !important;
	}

	td[background*="mhkhost_03.gif"] {
		height: 110px !important;
		background-size: 256px 110px !important;
	}

	table.tborder:has(#navbar_username) > tbody > tr > td.alt1 {
		width: 30% !important;
	}

	table.tborder:has(#navbar_username) > tbody > tr > td.alt2 {
		width: 70% !important;
		padding: 10px 5px !important;
	}

	table.tborder:has(#navbar_username) #navbar_username,
	table.tborder:has(#navbar_username) #navbar_password {
		width: 132px !important;
		min-width: 132px !important;
	}

	/* Hide low-priority statistical columns when templates provide class names. */
	.forumstats,
	.forumlastpost,
	.threadstats,
	.threadlastpost {
		display: none !important;
	}
}