@import url(../style.css);
html, body, main, header { margin: 0; padding: 0; }
body{ padding-right: 0.5ex; padding-left: 0.5ex; }

pre, code { font-family: monospace; white-space: pre-wrap; }
script{ margin: 0; padding: 0; margin-bottom: 1em; 
	color: navy; background-color: white; }
p.buttons { line-height: 1.7em; }
.buttons input { margin: 4px; }

.CodeComment { color: gray; }
.CodeLiteral { color: red; }
.CodeUser { color: maroon; }
.CodeKeyword { color: green; }
.CodeBuiltIn { color: olive; }

body#TOC { background-color: transparent; }
body#TOC li { margin: 0; margin-left: 0.2ex; margin-bottom: 0.75ex; }
#toc iframe {
	border: none;
}
/* ------------------- small screens ---------------------- */
@media screen and (max-width: 480px) {
	.cover { 
		position: absolute; left: 0; top: 0;
		width: 100%;
		visibility: hidden;
		background-size: cover;
		z-index: 1000;
	}
	.cover:target { 
		visibility: visible;
	}
	header#toc {
		height: 100%;
	}
	#toc iframe {
		/*position: relative;*/
		width: 100%;
		/*top: 0px; left: 0;*/
		background: white;
		height: 18em;
	}
	#TOC ul {
		margin: 0; margin-left: 0ex; padding-bottom: 0.25ex;
		padding-left: 2ex;
		margin-top: 35px;
		height: 100%; 
	}
	header.icon {
		display: block;
		margin: 0;
		padding: 0;
		position: fixed;
		top: 0; right: 0;
		height: 35px; width: 35px;
		float: right;
	}
	#menu-icon, #close-icon {
		display: block;
		height: 35px; width: 35px;
	}
	#menu-icon {
		background: gray; /* for those that don't do gradients */
		background: linear-gradient( to bottom, white 50%, black 50% ); 
		background-size: 30px 10px;
		background-repeat: repeat-y;
	}
	#close-icon {
		position: absolute;
		top: 0; right: 0;
		z-index: 2000;
	}
	#close-icon:before {
		font-family: sans-serif;
		font-size: 24pt;
		content: "×";
		text-decoration: none;
	}
	main { clear: none; 
		padding-left: 0.5ex; padding-right: 0.5ex;
	}
	main h1 {
		margin-top: 0.3ex;
		margin-right: 40px;
	}
	main h2 {
		margin-left: 0;
		padding-left: 0.5ex; padding-right: 0.5ex;
		padding-bottom: 0.2ex; padding-top: 0.2ex;
	}
	main h3 {
		margin-bottom: 0.5ex;
	}
	ul { margin-left: 0ex; }
	dd { padding-left: 1ex; }
	pre { margin-left: 0ex; }
}
/* ------------------- full-width screens ---------------------- */
@media screen and (min-width: 481px) {
	header#toc {
		background-color: #BBF; 
		background-size: cover;
		position: fixed;      /* for good browsers */
		top: 0; left: 0;
		width: 32ex;
		height: 100%;
	}
	header#toc iframe {
		margin: 0;
		padding-left: 0.5ex; padding-top: 0.5ex;
		overflow-y: auto;
		width: 32ex;
		height: 100%;
	}
	#menu-icon, #close-icon { display: none; }
	main>div{/* display: flex; align-items: stretch;*/
			max-width: 80ex;
			margin: auto;
			}
	main { /*margin-left: 32ex;*/
		overflow-y: auto;
		margin-left: 32ex;
		text-align: center;
		padding-left: 0.5ex; padding-right: 0.5ex; }
	main h1 {
		margin: 0; margin-bottom: 0.75em;
	}
	dd { padding-left: 3em; }
}
/* ------------------- printers ---------------------- */
@media print {
	header#toc {
		display: none;
	}
	header#toc iframe {
		display: none;
	}
	#menu-icon, #close-icon { display: none; }
	main { margin-left: 0.5ex;
		padding-left: 0.5ex; padding-right: 0.5ex; }
	main h1 {
		margin: 0; margin-bottom: 0.75em;
	}
	dd { padding-left: 3em; }
}
@media screen and (prefers-color-scheme: dark)
{
	script{ color: aqua; 
		background-color: black; }
	.CodeComment { color: silver; }
	.CodeLiteral { color: pink; }
	.CodeUser { color: orange; }
	.CodeKeyword { color: olive; }
	.CodeBuiltIn { color: lime; }
	#toc iframe {
		background-color: #330;
	}
	header#toc {
		background-color: #330;
	}
	#menu-icon {
		background: linear-gradient( to bottom, white 50%, red 50% ); 
		background-size: 30px 10px;
		background-repeat: repeat-y;
	}
}