/*
 * mobile.css - responsive overrides for phones and small tablets.
 * Loaded after global.css. Nothing here applies above 999px wide,
 * so the desktop layout is unchanged.
 */

/* Wide tables get their own horizontal scroller (see Listview.createBands) */
.listview-scroll
{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

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

	/* ---- Page shell ---- */
	#layout
	{
		min-width:0;
		max-width:none;
		margin:0;
	}

	#sidebar,
	#header-ad
	{
		display:none;
	}

	#wrapper
	{
		margin-right:0;
	}

	/* ---- Header / logo ---- */
	#header-logo
	{
		position:static;
		background-size:contain;
		background-position:left center;
		margin:10px 10px 6px;
		height:50px;
		max-width:220px;
	}

	#header-logo a
	{
		width:100%;
		height:50px;
	}

	#toptabs
	{
		white-space:normal;
	}

	#toptabs-inner
	{
		padding-top:0;
	}

	/* Promo banner in the header: put it in normal flow instead of the
	   desktop's negative offset, and let it shrink to the screen */
	#toptabs-right
	{
		float:none;
		position:static !important;
		top:auto !important;
		height:auto;
		line-height:1.4;
		white-space:normal;
		text-align:center;
		font-size:12px;
		padding:0 10px 8px;
	}

	#toptabs-right div
	{
		position:static !important;
		right:auto !important;
	}

	#toptabs-right img
	{
		max-width:100%;
		height:auto;
		max-height:60px;
	}

	#toptabs-inner > div[style*="right:-600px"]
	{
		right:auto !important;
		text-align:center;
	}

	#toptabs-inner img
	{
		max-width:100%;
		height:auto;
	}

	#toptabs dl
	{
		padding-left:6px;
	}

	/* ---- Search bar: full-width row above the menu buttons ---- */
	#topbar-right
	{
		float:none;
		position:static;
		display:block;
		background:#383838;
		border:1px solid #484848;
		border-bottom:0;
		padding:7px 8px 0;
	}

	#topbar-right > div
	{
		position:relative;
		margin-right:24px;
	}

	#topbar-right form
	{
		display:block;
	}

	#topbar-right input
	{
		display:block;
		width:100%;
		height:28px;
		font-size:16px; /* 16px stops iOS zooming in on focus */
		box-sizing:border-box;
	}

	#topbar-right a
	{
		top:3px;
		right:-24px;
	}

	#topbar
	{
		border-top:0;
		padding:8px 0 8px 3px;
	}

	.menu-buttons a
	{
		display:inline-block;
		padding:6px 10px;
		font-size:14px;
	}

	/* ---- Main content area ---- */
	#main
	{
		padding:10px 6px 6px;
		min-height:0;
	}

	#main-contents.main-contents
	{
		padding:8px;
		min-height:0;
	}

	.path
	{
		font-size:14px;
		line-height:1.6;
		padding-bottom:8px;
	}

	/* Quick Facts box: full width above the content instead of floating */
	table.infobox
	{
		float:none;
		width:100%;
		margin:0 0 10px;
	}

	.text h1
	{
		font-size:20px;
		word-wrap:break-word;
	}

	/* Item / spell tooltips: never wider than the screen */
	.tooltip,
	.tooltip table
	{
		max-width:100%;
	}

	.text > .tooltip
	{
		max-width:calc(100% - 76px);
	}

	.tooltip td
	{
		word-wrap:break-word;
	}

	/* Spell page: icon column had a fixed 75px gap */
	.text div[style*="margin-right: 75px"]
	{
		margin-right:10px !important;
	}

	/* Generic content safety net */
	.text img,
	#main-contents img
	{
		max-width:100%;
		height:auto;
	}

	.text table
	{
		max-width:100%;
	}

	/* ---- Listviews (result tables) ---- */
	.listview-band-top,
	.listview-band-bottom
	{
		overflow:hidden;
	}

	.listview-nav a,
	.listview-nav span
	{
		display:inline-block;
		padding:4px 2px;
	}

	.listview-std td
	{
		padding-top:6px;
		padding-bottom:6px;
	}

	/* ---- Tabs ---- */
	.tabs li
	{
		margin-bottom:3px;
	}

	/* ---- Contribute / comments ---- */
	#tabs_contribute-generic
	{
		width:100% !important;
	}

	.text[style*="margin-right: 310px"]
	{
		margin-right:0 !important;
	}

	#contribute-ad
	{
		float:none;
		width:auto;
	}

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

	/* ---- Maps page ---- */
	div[style*="width: 778px"]
	{
		width:auto !important;
		max-width:778px;
	}

	/* ---- Footer ---- */
	#footer
	{
		padding:24px 10px 0;
		line-height:2;
	}

	#footer a
	{
		display:inline-block;
	}

	/* ---- Home page ---- */
	#home
	{
		margin-top:30px;
		padding:96px 12px 0;
		background-size:min(299px, 90%) auto;
	}

	#home form
	{
		display:block;
	}

	#home input[type="text"]
	{
		width:70%;
		max-width:400px;
		height:30px;
		font-size:16px;
		box-sizing:border-box;
		vertical-align:middle;
	}

	#home input[type="submit"]
	{
		height:30px;
		vertical-align:middle;
	}

	#home .menu-buttons a
	{
		padding:6px 12px;
	}

	#home .news
	{
		width:auto;
		max-width:415px;
		background-size:100% 191px;
	}

	/* ---- Sign in / sign up ---- */
	input[style*="width: 10em"]
	{
		width:100% !important;
		max-width:16em;
	}
}

@media (max-width: 480px)
{
	#home input[type="text"]
	{
		width:100%;
		margin-bottom:6px;
	}

	#toptabs dl a
	{
		font-size:13px;
		padding:0 6px 0 8px;
	}

	.text > .tooltip
	{
		/* On narrow phones stack the item tooltip under its icon */
		float:none !important;
		clear:left;
		max-width:100%;
		padding-top:6px !important;
	}
}