/* ===========================================================================
   www.getlazarus.org - narrow screens

   Loaded after site.css. Everything here is by width only: nothing in this
   file applies to a window wider than 800 pixels, where the site is the
   thousand pixel page with the curved header that site.css draws.

   A narrow screen gets the same page laid out in one column. The curve and
   the steps which carry words round it are put away, the page is as wide as
   the screen, and anything set side by side is stacked.

   Font sizes are the five of site.css (docs/plan.txt).
   =========================================================================== */

@media (max-width: 800px) {

	/* ----- The page ----- */

	/* The header and the page beneath it are pictures two thousand pixels
	   wide with the page in their middle. They are moved so that the left
	   edge of the page in them is the left edge of the screen. */
	html, body {
		background-position: -462px 0, -462px 0;
	}

	/* The script which centres the page writes its place onto it, so this
	   has to insist. */
	#box {
		left: 0 !important;
		width: 100%;
		margin-left: 0;
	}

	#wrapper {
		width: 100%;
	}

	#page {
		box-sizing: border-box;
		width: 100%;
		padding-left: 0;
		margin-bottom: 30px;
	}

	/* The curve of the header, and the steps which carry words round it. */
	#clouds, #clouds.static, #page > span {
		display: none;
	}

	#content, #content-after {
		margin: 10px 12px;
	}

	/* ----- The header ----- */

	#breadcrumb {
		overflow: hidden;
		white-space: nowrap;
	}

	#breadcrumb > a {
		float: none;
		padding-right: 22px;
	}

	/* The two buttons of the banner go under the name of the site, side by
	   side, and the page begins beneath them. */
	#signin {
		left: 12px;
		top: 76px;
	}

	#download {
		left: 124px;
		top: 76px;
	}

	ul#editor {
		margin-top: 88px;
		padding-left: 12px;
	}

	.confirm, #editConfirm {
		box-sizing: border-box;
		width: auto;
		max-width: none;
		height: auto;
		min-height: 40px;
		margin: 12px;
		line-height: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.confirm .button {
		position: static;
		margin: 6px 6px 0 0;
	}

	/* ----- The words of a page ----- */

	#content img, #content video, #content iframe, #content object, #content embed {
		max-width: 100%;
		height: auto;
	}

	#content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	#content pre {
		max-width: 100%;
		overflow-x: auto;
	}

	.leftout, .rightout {
		float: none;
		display: block;
		max-width: none;
		margin: 12px 0;
	}

	#toc, #toc.mini {
		float: none;
		width: auto;
		margin: 12px 0;
	}

	#opening {
		padding-left: 0;
	}

	.block {
		padding-left: 1em;
	}

	#frame3d, #template {
		width: 100%;
		max-width: 100%;
	}

	/* ----- The footer ----- */

	#footer {
		height: auto;
		padding-bottom: 12px;
	}

	#footer > div, #footer > div:nth-child(2) {
		float: none;
		display: block;
		width: auto;
		margin: 0 12px 12px 12px;
	}

	#footer > p#account {
		position: static;
		margin: 0 12px;
	}

	/* ----- The page for an address which names nothing ----- */

	.lost-code {
		font-size: 96px;
		line-height: 90px;
	}

	.lost-pascal {
		display: block;
		overflow-x: auto;
	}

	.lost-links {
		justify-content: flex-start;
	}

	/* ----- The page editor ----- */

	#wikititle, #pasttitle, .edit-pane #wikititle, .edit-pane #pasttitle {
		width: 100%;
		max-width: none;
	}

	#edit-form.is-history .edit-panes {
		grid-template-columns: minmax(0, 1fr);
	}

	#wikieditor, #pastcontent {
		height: 300px;
	}

	#editConfirm .edit-buttons {
		flex-wrap: wrap;
	}

	/* ----- Code samples ----- */

	.source-head {
		flex-wrap: wrap;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	pre.source, .source-block .source-editor {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* ----- The sign in page ----- */

	.login {
		box-sizing: border-box;
		width: auto;
		max-width: 420px;
		margin-left: 0;
	}

	.captcha-row {
		flex-wrap: wrap;
	}

	/* ----- The administration pages and the consoles ----- */

	.console .admin-tools li {
		display: block;
		width: auto;
		min-height: 0;
		margin-right: 0;
	}

	.admin-columns {
		flex-direction: column;
		align-items: stretch;
	}

	.admin-detail {
		flex: 0 0 auto;
	}

	.admin-toolbar {
		flex-wrap: wrap;
	}

	.admin-toolbar #account-search {
		flex: 1 1 100%;
	}

	.admin-create .admin-field, .admin-create .admin-field.wide, .admin-create .admin-field.narrow {
		flex: 1 1 100%;
	}

	.admin-table {
		display: block;
		overflow-x: auto;
	}

	.console .account-panels,
	.console .account-panels.settings,
	.console .admin-posts,
	.console .mail-sent,
	.console .sql-console,
	.console .tpl-console,
	.console .admin-fields {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
	}

	.console .sql-schema {
		position: static;
		max-height: 40vh;
	}

	.console .tpl-files {
		max-height: 40vh;
	}

	.console .limit-row {
		grid-template-columns: minmax(0, 1fr) 90px;
	}

	.console .css-editor textarea {
		min-height: 300px;
	}

	/* ----- The mail room ----- */

	.console .mailroom .mail-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.console .mailroom .mail-list {
		max-height: 40vh;
	}

	.console .mailroom .mail-search {
		flex: 1 1 100%;
		max-width: none;
		margin-left: 0;
	}

	.console .mailroom .mail-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.console .mailroom #mail-replying,
	.console .mailroom .mail-send-row,
	.console .mailroom .mail-file-list,
	.console .mailroom #mail-message {
		margin-left: 0;
	}

	#mail-root .mail-filter-row input[type="search"] {
		flex: 1 1 100%;
		max-width: none;
	}

	/* ----- The forum ----- */

	.console .board-card, .console .topic-row {
		flex-wrap: wrap;
	}

	.console .board-count, .console .topic-meta {
		justify-items: start;
	}

	.console .message-when, .console .post-author {
		margin-left: 0;
	}
}