/*	Pager
	================================================ */

	@keyframes intro {
		from	{ opacity: 0;}
		to		{ opacity: 1; }
	}

	html {
		animation: intro 1s;
		-webkit-user-select: none;
		-webkit-app-region: drag;
	}

/*	Variables
	================================================ */

	body {
		--top-colour: #204564;
		--bottom-colour: #3c617f;
		--document-panel-background: linear-gradient(to bottom, var(--top-colour), var(--bottom-colour));

    	--top-inset: hsl(207, 60%, 40%);
    	--bottom-inset: #2D618C;
    	--highlight-inset: #63829B;
    	--highlight-inset: hsl(207, 60%, 56%);

		--text-colour: white;
		--text-colour-hover: white;

		--monospace: "Source Code Pro", monospace;
	}

/*	Layout
	================================================
	body
		header
		main
			ul#tabs
			div#pager
				nav#documents
					ul
				span.resize
				div#index
					h2
					ul
					p#raw-message
				span.resize
				div#content
					h2
					iframe
			p#content-footer
		footer


			div#pager
				nav#documents
					ul
				span.resize
				div#document
					div#index
						h2
						ul
						p#raw-message
					span.resize
					div#content
						p#navigation
						h2
						iframe
			p#content-footer
		footer

	================================================ */

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

	header,aside,main,footer {
		box-sizing: border-box;
		margin: 0em;
	}
	header {
		height: 2.5em;
	}

	main {
		flex: 1;
		width: 100vw;
	}

/*	Main
	================================================
	main
		ul#tabs
		div#pager
		p#content-footer
	================================================ */

	main, ul#tabs, div#pager, p#content-footer {
		box-sizing: border-box;
	}

	main {
		display: grid;
		grid-template-rows: 1.875rem 1fr 2rem;
		grid-template-columns: 1fr;
	}
	form#control {
		grid-row: 1/2;
	}
	div#pager {
		grid-row: 2/3;
	}
	p#content-footer {
		grid-row: 3/4;
	}

/*	Pager
	================================================
	div#pager
		nav#documents
		span.resize
		div#document
			div#index
			span.resize
			div#content
	================================================ */

	div#pager {
		display: grid;
		qgrid-template-columns: auto 1px 1fr;
		margin: 0;

		nav#documents,
		div#index,
		div#content {
			box-sizing: border-box;
			max-height: calc(100vh - 6.5em);
		}

		div#document {
			display: grid;
			grid-template-columns: auto 1px 1fr;

			div#index,
			div#content {
				background-color: white;
				outline: none;
				&>h2 {
					box-sizing: border-box;
					margin: 0;
					width: 100%;
					height: 2.75rem;
					padding: .25em .25em .25em .75em;
				}
			}

			div#index {
				width: 18em;
				overflow: auto;
			}
		}
	}


	main {
		div#pager {
			nav#documents,
			nav#documents+span.resize {
				display: none;
			}
		}
		&.show-documents {
			div#pager {
				grid-template-columns: auto 1px 1fr;

				nav#documents,
				nav#documents+span.resize {
					display: block;
				}

			}
		}
	}

/*	Index Grid
	================================================
	div#index
		h2
		ul
		p#raw-message
	================================================ */

		div#index {
			display: grid;
			grid-template-areas:
				"h2 h2"
				"ul ul"
				"p p";
			grid-template-rows: 2.75rem 1fr 1.75rem;
			grid-template-columns: 1fr 8px;
		}
		div#index>h2	{ grid-area: h2; }
		div#index>ul	{ grid-area: ul; }
		div#index>p		{ grid-area: p; }

		p#raw-message {
			box-sizing: border-box;
			margin-left: 1em;
			padding: .25em .5em .25em 1em;
			margin: 0 0 0 0;
		}

	div#content {
		overflow: hidden;
		flex: 1;
	}

/*	Content Grid
	============================================ */

	div#content {
		border: thin #ccc;
		border-style: none none none none;
		padding: 1em;
		padding: 0;
		display: grid;
		grid-template-areas: "content-h2" "content-iframe" "content-footer";
		grid-template-rows: 2.75rem 1fr 0.25rem;
	}

	div#content h2					{grid-area: content-h2;}
	div#content>iframe				{grid-area: content-iframe;}
	div#content>p#content-footer	{grid-area: content-footer;}

	div#content>iframe {
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 2.75rem - 0px);
		height: 100%;
	}


	div#content>iframe {
		border: none;
	}

	p#content-footer {
		box-sizing: border-box;
		height: 2.5rem;
		background-color: #eee;
		padding: .25em .5em;
		margin: 0;
		border: thin solid #aaa;
		border-style: solid none;
		display: grid;
		grid-template-columns: 1fr auto auto;
		background-color: var(--bottom-colour);
		colour: white;
		text-shadow: none;
	}

	footer {
		background-color: #eee;
		margin: 0;
		colour: white;
		text-shadow: none;
		background-color: var(--bottom-colour);
	}

/*	Documents
	================================================ */

	nav#documents {
		background-color: #f8f8f8;
		background: var(--document-panel-background);
		color: white;
		color: var(--text-colour);
	}

/*	Pager
	================================================ */

	body {
		background-color: rgb(221, 221, 221);
	}

	header {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: .125em .5em .125em;
		background: linear-gradient(to bottom, #eee, #ddd);
		background: var(--document-panel-background);

		border-bottom: thin solid var(--top-inset);
		box-shadow: inset 0 -1px 0px var(--top-inset);

	}
		header>h1 {
			flex: 1;
			padding-left: 4em;
			text-align: left;
		}
		header>form {

		}
		header>form#prompt {
			flex: 3;
			display: none;
		}
		header>form#control {
			flex: 2;
		}

	div#index>h2,
	div#content>h2 {
		color: #333;
		font-weight: normal;
		border-bottom: thin solid #666;
	}

	main {

	}



	footer>p {
		margin: 0;
		display: flex;
		justify-content: flex-end;
		padding: .25rem;
	}
	footer span {
		box-sizing: border-box;
	}
	span#footer-message,
	span#footer-language,
	span#footer-file,
	span#footer-heading {
		border: thin solid #ccc;
		qborder: none;
		border-style: none none none solid;
		font-size: .8rem;
		color: #666;
		min-width: 8em;
		text-align: center;
		padding: .25em .5em .375em .5em;
		background-color: transparent;
		font-family: var(--monospace);
		text-shadow: 0 1px 0 white;
		text-align: left;

		background-color: var(--bottom-colour);
		color: white;
		color: var(--text-colour);
		text-shadow: none;
	}
	span#footer-file {
		border: none;
	}
	span#footer-language {

	}
	span#footer-heading {

	}
	footer span:empty {
		display: none;
	}

/*	Control
	================================================ */
	form#control {
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		background-color: var(--top-inset);
		width: 100%;

	/*	Button Appearances
		============================================ */
		label {
			background-color: var(--top-inset);
			border: thin solid #ccc;
			padding: .25em .75em;
			font-size: .85rem;
			color: var(--text-colour);
			margin: .125em 0 0 0;
			box-sizing: border-box;
			display: inline-block;
			font-family: "Source Sans Pro", sans-serif;
			border: none;
			line-height: 1.25rem;
			&:has(:checked) {
				background-color: var(--highlight-inset);
			}
			&:has(:hover) {
				background-color: #c8c8c8;
				animation: none;
			}
		}
		button:hover {
			color: white;
			color: var(--text-colour-hover);
			background-color: #bbb;
			border: thick solid green;
		}

		/*	Highlighted
			============================================
			============================================ */

			input[name="show-highlight"],
			input[name="show-documents"],
			input[name="full-screen"] {
				display: none;
				appearance: none;
				-webkit-appearance: none;
				&+label {

				}
				&:hover+label {
					background-color: #c8c8c8;
					animation: none;
				}
				&:checked+label {
					background-color: var(--highlight-inset);
				}
			}
			input[name="show-documents"]+label {
				margin-left: 0.5em;
				margin-right: 0.5em;
			}
		}

/*	Tabs
	============================================ */

	ul#tabs {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		background: linear-gradient(to bottom, var(--top-inset), var(--bottom-inset));
		font-size: .8rem;
		height: 2rem;
		&>li {
			padding: .5em .25em .25em .75em;
			text-align: center;
			display: flex;
			justify-content: space-between;
			border: thin solid;
			border-style: none solid none solid;
			border-color: transparent var(--bottom-inset) transparent transparent;
			color: var(--text-colour);
			&.selected {
				background-color: var(--highlight-inset);
			}
			&>button {
				box-sizing: border-box;
				border: thin solid transparent;
				margin-left: .25em;
				display: inline-block;
				background-color: transparent;
				border-radius: .125em;
				position: relative;
				top: .125em;
				font-weight: light;
				color: var(--text-colour);
				font-size: 1.2em;
				padding: .125em;
				qbackground-color: orange;
				height: 1em;
				line-height: 0.25;
				&:hover {
					background-color: var(--highlight-inset);
					border: thin solid transparent;
				}
			}
		}
	}

/*	Index Properties
	============================================ */

	div#index {
		box-sizing: border-box;
		qpadding: .25em 1em;
		padding: 0 0 0 0;
		overflow: hidden;
		border: thin #ccc;
		border-style: none none none none;
	}
	div#index>h2 {

	}
	div#index>ul {
		overflow: auto;
		list-style: none;
		margin: 0 0 0 1em;
		padding: 0;
		border: thin #666;
		border-style: none none solid none;
		border: none;
	}
	div#index>ul>li {
		cursor: default;
	}
	div#index>ul>li:nth-child(n+2) {
		border-top: thin solid #999;
	}

	div#index ul>li:not(.selected)>span {
		background-color: none;
	}

	div#index ul>li.selected>span {
		background-color: #eee;
	}
	div#index ul>li:not(.selected) {
		background-color: white;
	}
	div#index ul>li>span {
		display: block;
	}
	div#index>ul>li>span {
		padding: .25em .5em;
	}
	div#index>ul>li>ul>li>span {
		padding: .25em .5em .25em 1.25em;
	}
	div#index ul>li>span:hover {
		background-color: #ddd !important;
	}

/*	Major & Minor
	============================================ */

	div#index>ul>li {
		font-weight: bold;
	}

	div#index>ul>li>ul {
		list-style: none;
		padding: 0;
	}

	div#index>ul>li>ul>li {
		border-top: thin solid #999;
		font-weight: normal;
		margin: 0;
	}

/*	resize
	============================================ */

	span.resize {
		qbox-sizing: border-box;
		cursor: col-resize;
		background: none;
		border: none;
		background-color: white;
		border-left: thin solid #999;
		position: relative;
	}
	span.resize:after {
		content: "a";
		left: 0;
	}
	span.resize:before {
		content: "b";
		right: 0;
	}
	span.resize:after, span.resize:before {
		opacity: 0;
		width: 4px;
		display: block;
		height: 100%;
		position: absolute;
		background-color: red;
	}

/*	Raw Message
	============================================ */

	p#raw-message {
		border: thin #aaa;
		border-style: solid none none none;
		background-color: #eee;
		font-size: .8rem;
	}

/*	Content
	============================================
	See also: content.css
	============================================ */

	div#content h2:hover {
		background-color: #eee;
		text-shadow: 0 1px white;
	}

	div#content>iframe {
		qborder: none;
	}
	div#content>form#search {
		display: flex;
		display: none;
	}

	button#previous,
	button#next {
		border: thin solid;
		color: #2F5FA1;
		background-color: white;
		border-radius: .125em;
	}

	div#content.empty>p#navigation {
		display: none;
	}

	p#navigation {
		position: absolute;
		right: 1em;
		top: 3em;
		padding: .5em;
	}
	button#previous,
	button#next {
		font-size: 2em;
		padding: 0 .25em .1875em;
		line-height: .5em;
		opacity: .25;
		transition: opacity .25s;
		outline: none;
		margin-top: .5em;
		border: none;
	}
	p#navigation:hover>button#previous,
	p#navigation:hover>button#next {
		opacity: 1;
	}

/*	About
	================================================ */

	aside#about {
		border: thin solid darkgreen;
	}

	aside#about {
		position: fixed;
		top: 0; bottom: 0; left: 0; right: 0;
		width: 400px; height: 600px;
		margin: auto;
		background-color: white;
		border: thick solid rgb(47, 79, 79);
		padding: 1em;
		box-shadow: 4px 4px 4px #666;
		overflow: auto;
		-moz-tab-size: 4;
		tab-size: 4;
		z-index: 2;
		display: none;
	}

	aside#about p.about {
		font-weight: bold;
	}
	aside#about li {
		line-height: 1.8;
	}

	aside#about pre {
		margin: 0 2em;
	}

	aside#about h2, aside#about h3 {
		color: rgb(47, 79, 79);
	}
	aside#about a {
		text-decoration: none;
		color: rgb(47, 79, 79);
		font-weight: bold;
	}
	aside#about a::after {
		content: attr(href);
		font-weight: normal;
		margin-left: .5em;
	}
	div#about-background {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(127,127,127,.5);
		top: 0;
		left: 0;

		z-index: 1;
		display: none;
	}

/*	Search
	================================================ */

	form#search {
		display: none;
		display: flex;
		background-color: #f8f8f8;
		padding: .25rem .25rem;
		font-size: .8rem;
		width: 100%;
	}
	form#search>div {
		flex: 1;
		display: flex;
	}
	form#search input[name="text"],form#search input[name="replacement"] {
		font-family: var(--monospace);
		padding: .125em .5em .25em;
		flex: 1;
	}
	form#search input[id="search-case-sensitive"] {
		display: none;
	}
	form#search input[id="search-case-sensitive"]+label {
		border: thin solid #ddd;
		background: linear-gradient(to bottom, #f8f8f8, #eee);
		box-shadow:
			inset 1px 1px 1px white,
			inset -1px -1px 1px #ddd
			;
		padding: .125em .5em .25em;
		margin-right: 2em;
	}
	form#search input[id="search-case-sensitive"]:checked+label {
		color: white;
		color: var(--text-colour);
		border: thin solid #666;
		background: linear-gradient(to bottom, #777, #666);
		box-shadow:
			inset 1px 1px 1px #666;
	}

/*	Search
	================================================ */

	nav#documents ul {
		list-style: none;
		padding: 0;
	}

	nav#documents>ul {
		font-weight: bold;
		margin: .25em .5em;
	}

	nav#documents>ul>li {
		padding: .5em .5em;
	}
	nav#documents>ul>li>ul {
		margin: .5em 0 0 0;
		font-weight: normal;
	}
	nav#documents>ul>li>ul>li {
		border-top: thin solid #ccc;
	}
	nav#documents>ul>li>ul>li:last-of-type {
		border-bottom: thin solid #ccc;
	}
	nav#documents>ul>li>ul>li,
	nav#documents li>a {
		font-size: .9rem;
		text-decoration: none;
		display: block;
		color: #333;
		padding: .25em 0 .125em .5em;
		qtext-shadow: 0 1px 0 white;
		color: white;
		color: var(--text-color);
        display: flex;
        justify-content: space-between;
	}
	nav#documents>ul>li>ul>li:hover,
	nav#documents li>a:hover {
		background-color: var(--top-inset);
	}

	nav#documents>ul>li>ul>li>button,
	nav#documents li>a>button {
	    box-sizing: border-box;
	    border: thin solid transparent;
	    display: inline-block;
	    background-color: transparent;
	    position: relative;
	    top: .0625em;
	    font-weight: light;
	    color: var(--highlight-inset);
	    font-size: 1.2em;
	    padding: .125em;
	    line-height: 1;
	}

	nav#documents>ul>li>ul>li>button:hover,
	nav#documents li>a>button:hover {
		color: var(--text-color);
	}

/*	Tabs
	================================================ */

	ul#tabs>li[draggable] {
		qbackground-color: #f8f8f8;
		user-select: none;
		box-sizing: border-box;
		qborder: thin solid transparent;
	}
	ul#tabs>li.tabgroup-start {
		cursor: move;
	}
	ul#tabs>li.tabgroup-before {
		border-left-color: #666;
	}
	ul#tabs>li.tabgroup-after {
		border-right-color: #666;
	}

/*	Document Tabs
	================================================ */

	nav#documents>ul>li {
		padding: 0;
	}
	nav#documents>ul>li>ul {
		display: none;
		margin-left: 1em;
	}
	nav#documents>ul>li.open>ul {
		display: block;
	}

	nav#documents {

	}

	nav#documents>ul>li::before {
		font-size: 1.6em;
		content: "»";
		display: inline-block;
		width: .5em;
		position: relative;
		font-weight: bold;
		transition: transform .125s;
		top: .0625em;
	}
	nav#documents>ul>li.open:before {
		top: .25em;
		transform: rotate(90deg);
	}

/*	Index Headings
	================================================ */

	div#index>ul>li>button {
		box-sizing: border-box;
		background-color: transparent;
		display: inline-block;
		height: 1em;
		width: 1em;
		padding: .0em .0625em .125em .125em;
		border: none;
		font-weight: bold;
		font-size: 1.4em;
		line-height: 0;
		position: relative;
		text-align: center;
		outline: none;
	}
	div#index>ul>li.open>button {
		transform: rotate(90deg);
		padding-bottom: .125em
	}
	div#index>ul>li>span {
		display: inline-block;
	}

	div#index>ul>li>ul {
		display: none;
	}


	div#index>ul>li.open>ul {
		display: block;
	}

	div#index>ul>li>ul {
		margin-left: .625em;
	}


	div#index ul>li.subtitle {
    	margin-left: 1.25em;
		display: flex;
		justify-content: flex-start;
	}
	div#index ul>li.subtitle:before {
		content: "»";
		display: inline-block;
		width: .25em;
		margin-top: .125em;
	}
	div#index ul>li.subtitle>span {
        padding: .25em .5em
	}