/* CSS box order is T R B L, T RL B, TB RL, TRBL */

:root {
/*  MUTED QUALITATIVE COLOR SCHEME for color blindness
    Paul Tol
    https://sronpersonalpages.nl/~pault/ */

    --indigo: #328;
    --cyan: #8ce;
    --teal: #4a9;
    --green: #173;
    --olive: #993;
    --sand: #dc7;
    --rose: #c67;
    --wine: #825;
    --purple: #a49;
    --palegrey #ddd;

    /* From another place */
    --near-black: #232730;

    --border: var(--palegrey);
    --draftlink: var(--green);
    --headfoot: var(--green);
    --heading: var(--wine);
    --hover: var(--wine);
    --link: var(--green);
    --outline: var(--near-black);
}

/* screen degradations */    html { font-size: 100%; }
@media (max-width:  950px) { html { font-size: 97%; } }
@media (max-width:  900px) { html { font-size: 94%; } }
@media (max-width:  850px) { html { font-size: 91%; } }
@media (max-width:  800px) { html { font-size: 89%; } }
@media (max-width:  750px) { html { font-size: 86%; } }
@media (max-width:  700px) { html { font-size: 83%; } }
@media (max-width:  650px) { html { font-size: 80%; } }
@media (max-width:  600px) { html { font-size: 77%; } }
@media (max-width:  550px) { html { font-size: 74%; } }
@media (max-width:  500px) { html { font-size: 71%; } }
@media (max-width:  450px) { html { font-size: 69%; } }
@media (max-width:  400px) { html { font-size: 66%; } }
@media (max-width:  350px) { html { font-size: 63%; } }
@media (max-width:  300px) { html { font-size: 60%; } }

body {
    font-family: prop, sans-serif;
    height: 100%;
	background-color: black;
	color: var(--near-black);
	text-align: center;
	padding: 0;
    overflow-wrap: break-word;
}

ol, ul {
	list-style: none;
    padding: 0;
    margin: 0;
}

li {
	margin-left: .5rem;
	list-style-type: none;
}

#page {
	width: 100%;
    box-sizing: border-box;
	padding: 2.3rem;
	background-color: white;
    text-align: left;
    border: .1rem solid var(--border);
}

@media (min-width: 70rem) {
    #page {
        width: 70rem;
        margin: 1.5rem auto;
    }
}

#mark::after {
    content: " *";
    color: inherit;
}

b {
    font-weight: bold;
}

i {
    font-style: italic;
}

sup {
    vertical-align: baseline;
    position: relative;
    top: -0.6em;
    font-size: .8rem;
}

a.draft {
    color: var(--draftlink);
}

a.draft:link {
    color: var(--draftlink);
}

a.draft:visited {
    color: var(--draftlink);
}

a {
    color: var(--link);
    text-decoration: none;
}

a:link {
    color: var(--link);
    text-decoration: none;
}

a:visited {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--hover);
    text-decoration: none;
}

a:focus {
    color: var(--hover);
    text-decoration: none;
}

a:active {
    color: var(--link);
    text-decoration: none;
}

article a:link {
    text-decoration: underline;
}

code {
    font-family: mono, monospace;
    margin: 0 .1rem 0 0;
}

p code {
    color: black; /* blacker than other text */
}

#meat {
    display: flex;
    align-items: flex-start;
}

article {
    flex: 1;
    min-width: 0;
	padding: 0;
    line-height: 1.55;  /* "normal" is 1.35; unitless form has best inheritance */
}

article ul {
	list-style: disc outside;
	margin: .7rem 0 0;
}

article ol {
	list-style: decimal outside;
	margin: .7rem 0 0;
}

article li {
    list-style: inherit;
    margin: 0 2.6rem;
    padding: 0 .43rem;
}

#sidebar {
	width: 16rem;
    line-height: 1.35;
}

@media (max-width:  800px) { #sidebar { width: 13.5rem; } }

p {
	margin: .7rem 0 .7rem;
}

h1 {
	color: var(--heading);
    margin: 0;
	font-size: 1.6rem;
    font-weight: bold;
}

h2 {
	color: var(--heading);
    margin: 1.5rem 0 0;
	font-size: 1.3rem;
    font-weight: bold;
}

h3 {
	color: var(--heading);
    margin: 1rem 0 0;
    font-weight: bold;
	font-size: 1.1rem;
}

pre {
    white-space: pre;
    color: black;       /* XXX This is blacker than other text. */
	overflow: auto;
	height: auto;
    font-family: mono, monospace;
	margin: 1.4rem 0;
    line-height: 1.35;
}

pre.single {            /* for one-liners */
	margin: .7rem 2.6rem 0;
}

#banner { /* <a> */
    display: inline-block;
    margin: 0 0 2rem;
}

#banner img {
    width: 100%;
    height: auto;
}

.menu1 {
    font-weight: bold;
}

.menu1 li {
    margin: .86rem 0 0 0;
}

.menu1 > li:first-child {
    margin: 0;
}

.menu2 {
    font-weight: normal;
    margin-top: .2rem;
}

.menu2 li {
    margin: 0 0 0 .7rem;
}

/* bottom branding */

hr {
	border: none;
	clear: both;
	height: .1rem;
    margin: 0;
	visibility: hidden;
}

#slogan {
    margin: 1rem 0 0;
	float: right;
	color: var(--headfoot);
    font-weight: bold;
    font-size: 1.12rem;
}

/* heavy on fonts, but this is also a marketing effort */

@font-face {
	font-family: prop;
    font-weight: normal;
    font-style: normal;
	src: url('../etc/OpenSans-Regular.woff2');
}

@font-face {
	font-family: prop;
    font-weight: normal;
    font-style: italic;
	src: url('../etc/OpenSans-Italic.woff2');
}

@font-face {
	font-family: prop;
    font-weight: bold;
    font-style: normal;
	src: url('../etc/OpenSans-Bold.woff2');
}

@font-face {
	font-family: prop;
    font-weight: bold;
    font-style: italic;
	src: url('../etc/OpenSans-BoldItalic.woff2');
}

@font-face {
	font-family: mono;
    font-weight: normal;
    font-style: normal;
	src: url('../etc/Hack-Regular.woff2');
}

@font-face {
	font-family: mono;
    font-weight: normal;
    font-style: italic;
	src: url('../etc/Hack-Italic.woff2');
}

@font-face {
	font-family: mono;
    font-weight: bold;
    font-style: normal;
	src: url('../etc/Hack-Bold.woff2');
}

@font-face {
	font-family: mono;
    font-weight: bold;
    font-style: italic;
	src: url('../etc/Hack-BoldItalic.woff2');
}

table {
    border-collapse: separate;
    border-spacing: .7rem 0; /* horiz first, not like box model */
    margin: 1.4rem auto;
    table-layout: fixed;
}    

table.want-loose-left {
    border-collapse: separate;
    border-spacing: 2.1rem 0; /* horiz first, not like box model */
    margin: 1.4rem 0;
    table-layout: fixed;
}

.scrolly {
    width: 100%;
    overflow-x: auto;
}

table td, table th {
    vertical-align: top;
}

*.want-15px-wide {
    width: 15px; /* sic. */
}

*.want-right-just {
    text-align: right;
}

*.want-bold {
    font-weight: bold;
}

*.want-mono {
    font-family: mono, monospace;
}

tr.want-head td {
    font-weight: bold;
    padding-bottom: .2rem;
}

*.want-orange {
    color: #b95f28;
}

*.want-red {
    color: #872332;
}

*.want-right-mono {
    text-align: right;
    font-family: mono, monospace;
}

*.want-right-mono-bold {
    text-align: right;
    font-family: mono, monospace;
    font-weight: bold;
}

*.want-hidden {
    opacity: 0;
}