@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700");

:root {
    background: hsl(164,66%,10%);
}

@media (prefers-color-scheme: light) {
    :root {
	--body-fg: hsl(0,100%,10%);
	--body-bg: hsl(44,80%,87%);
	--pale-bg: hsl(30,100%,95%);
	--accent: hsl(0,100%,30%);
	--a-link: hsl(240,60%,50%);
	--a-visited: hsl(180,33%,30%);
	--a-active: hsl(0,100%,50%);
	--a-hover: hsl(0,100%,40%);
	--ref-title: hsl(330,100%,25%);
	--header-fg: hsl(0,100%,30%);
	--weak: hsl(0,19%,50%);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
	--body-fg: hsl(44,100%,90%);
	--body-bg: hsl(30,60%,10%);
	--pale-bg: hsl(30,100%,20%);
	--accent: hsl(0,50%,50%);
	--a-link: hsl(240,60%,90%);
	--a-visited: hsl(180,33%,80%);
	--a-active: hsl(0,100%,80%);
	--a-hover: hsl(0,100%,90%);
	--ref-title: hsl(300,60%,65%);
	--header-fg: hsl(44,100%,72%);
	--weak: hsl(44,50%,80%);
    }
}

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    max-width: 55em;
    margin: 8px auto 8px;
    padding: 6px;
    background-color: var(--body-bg);
    color: var(--body-fg);
    border-radius: 6px;
}

b { font-weight: 600; }

body.top nav, #left {
	width:			152px;
	clear:			both;
	float:			left;
	margin-left:		10px;
	z-index:		1;
}

body.top main, div.unleft {
	margin-right:		10px;
	margin-left:		165px;
	border-left:		4px solid var(--accent);
	padding-left:		6px;
	position:		relative;
}

footer, p.foot {
	font-size:		smaller;
	padding-top:		1px;
	border-top:		1px solid var(--accent);
	clear:			both;
}

p.first {
        margin-top:		0px;
}

dt { margin-top:0.5em; }
dd>p, dt>p { margin: 0.3em 0 0; }

nav {
	margin-top:		6px;
}

a.doi { font-size: 70%; }

nav a {
	font-size:		smaller;
	border:			thin solid transparent;
	text-decoration:	none;
}

nav ul { padding-left: 0; }
nav ul ul { padding-left: 15px; }
nav li { display: block; margin-top: 0.4em; line-height: 1.0; }

@media (prefers-color-scheme: light) {
    nav a:hover, nav a:active {
	border:			thin solid var(--accent);
	background:		hsl(60,50%,96%);
    }
}

@media (prefers-color-scheme: dark) {
    nav a:hover, nav a:active {
	border:			thin solid hsl(60,50%,96%);
	background:		hsl(0,100%,20%);
	color: hsl(60,100%,80%)
    }
}

a:link { color: var(--a-link); }
a:visited { color: var(--a-visited); }
a:active { color: var(--a-active); }
a:hover { color: var(--a-hover); }

a::after {
    color: var(--accent);
    font-size:67%;
    font-weight: normal;
    vertical-align: super;
}
a[href$=".pdf"]::after { content: " pdf"; }

h1, h2, h3, h4, h5, h6, .h { color: var(--header-fg); }
.t, .t a { color: var(--ref-title) }
dt.h { font-weight: bold; }
h1, h2, h3, h4, h5, h6 {
  margin-top: 2em;
  margin-bottom: 0em; }
h1:first-child, h1.first { margin-top: 0em; }
h1.paleb, h2.paleb, h3.paleb, h4.paleb, h5.paleb, h6.paleb {
  background: var(--pale-bg);
  padding: 6pt;
}
/* IE is much too fond of wrapping even where there is no whitespace.
   I.e., at parentheses, equals signs, and various other places. */
.nowrap { white-space: nowrap; }
.smaller { font-size: smaller; }
tt.code { color: var(--accent); }
.deepred   { color: var(--accent); }
.weak      { color: var(--weak); }
.pale { background: var(--pale-bg); border: none; }

div.rightbox {
  width: 20%;
  float: right;
  text-align: right;
  margin: 1em;
  padding: 1em;
  border: medium solid var(--accent);
  background-color: hsl(40,100%,90%);
  color: hsl(90,100%,13%);
}

img.bordered { border: 1px solid black; }
img.framed { border-width: 20px 20px 30px; border-style: solid; border-color: hsl(0,0%,20%); }

p.math { text-align: center; }
span.math { white-space: nowrap; }
.math { font-family: serif; }

body.photo {
  background-color: hsl(0,0%,20%);
  color: hsl(60,100%,40%);
}
body.photo :link { color: hsl(240,100%,70%) }
body.photo :visited { color: hsl(180,100%,90%) }
body.photo :active { color: hsl(0,100%,40%) }
body.photo h1, body.photo h2, body.photo h3, body.photo h4, body.photo h5, body.photo h6, body.photo b.h, body.photo th.h { color: hsl(36,100%,50%); }
body.photo p { color: hsl(60,100%,40%); }