/*	Layout
	================================================ */

	body, html {
		padding: 0;
		margin: 0 auto;
		max-width: 48em;
	}
	header, main, footer {
		qmax-width: 48em;
		qmargin: 0 auto;
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	main {
	  flex: 1;
	}

/*	Core
	================================================ */

	html {
		font-family: "Source Sans Pro", sans-serif;
		font-size: 100%;
		color: #333;
		background-color: #111;
	}

	main {
		max-width: 48em;
		qmargin: auto;
		background-color: #111;
		color: white;
	}
	p {
		margin: .5em 1em;
		line-height: 1.5;
	}
	td, th {
		vertical-align: top;
		text-align: left;
	}

	h1,h2 {

	}

	h1 {
		font-size: 4em;
		background-color: rgba(47, 79, 79, 1);
		background-color: #022;
		color: white;
		margin: 0.5em 0 .25em 0;
		padding: .125em .25em .25em .25em;
		line-height: 1;
		text-shadow: 0 -2px 1px #587272;
	}


	h2 {
		color: white;
		margin: .25em 0em .25em 0em;
	}

/*	Header
	================================================ */

	header {
		background-color: #587272;
		width: 100%;
	}
	header>div {
		color: white;
		font-size: 1.2em;
		qborder: thin solid orange;
		padding: .5em 1em;
	}

/*	Footer
	================================================ */

	footer {
		background-color: #587272;
		background-color: black;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	footer>p {
		color: white;
		font-size: 1.2em;
		padding: .5em 1em;
	}

	a[href="index.html"] {
		text-decoration: none;
		color: white;
		font-weight: bold;
		padding-bottom: .125em;
	}
	a[href="index.html"]:hover {
		border-bottom: thin solid;
	}

/*	Misc
	================================================ */

	span.nonenglish {
		font-style: italic;
		font-family: "Source Serif Pro", serif;
	}



/*	Dialog Boxes
	================================================
	================================================ */

	dialog {
		padding: 0;
		background: none;
	}
	dialog::backdrop {
		background-color: rgb(0,0,0,0.5);
	}
	dialog>form {
		--background-color: #0074E8;
		--color: white;
		display: grid;

		box-sizing: content-box;
		width: 16em;


		border: thin solid var(--background-color);
		background-color: #f8f8f8;
		padding: 0.5em;

		qgrid-template-rows: 2fr 2fr 1fr 2fr;
		grid-template-columns: 3fr 1fr 1fr;
		column-gap: 1em;
		row-gap: 0;
		padding: 1em;
		border-radius: 0.25em;
	}
	dialog>form>output {
		font-family: sans-serif;
		grid-column: 1/6;
		margin: 0 0 0.5em 0;
	}
	dialog>form>output[name="title"] {
		grid-row: 1/2;
		font-weight: bold;
		font-size: 0.8em;
	}
	dialog>form>output[name="message"] {
		grid-row: 2/3;
		font-size: 0.8em;
	}
	dialog>form>input[name="data"] {
		grid-row: 3/4;
		grid-column: 1/6;
		border: thin solid var(--background-color);
		font-family: monospace;
		margin: 0em 0 1em 0;
		padding: 0.25em 0.5em;
	}
	dialog>form>button {
		border: medium solid var(--background-color);
		background-color: var(--background-color);
		color: var(--color);
		border-radius: 0.25em;

		grid-row: 4/5;
		width: 6em;
	}
	dialog>form button[name="ok"] {
		grid-column: 5/6;
	}
	dialog>form button[name="cancel"] {
		grid-column: 4/5;
		background-color: #dddddd;
		color: #333;
		border: #dddddd;
	}