html { font-family: "Trebuchet MS",sans-serif; font-size: 0.8em; line-height: 1.6em; text-align: justify; background-color: gray; }
body { padding: 2em; margin: 2em auto; max-width: 45em; background-color: white; border: 1px black solid;}

h1 { color: #b51f1e; font-size: 2.5em; line-height: 1em; border-bottom: 1px solid;}
h1 span { line-height: 1em; font-size: 0.6em; text-transform: uppercase; color: gray;}
h2 { margin-top: 2em; counter-reset: steps; font-size: 1.8em;}
h3 { counter-increment: steps; color: #b51f1e; font-size: 1.4em; text-transform: uppercase; margin-top: 3em;}
h3:before { content: "Step " counter(steps) " "; color: gray; }
h4 { margin-top: 2em; margin-bottom: 0px; border-bottom: 1px dotted #000000; }
h4 + p { margin-top: 0.5em; }

acronym { border-bottom: 0px;}
acronym[title]::before { content: attr(title) " ("; }
acronym[title]::after { content: ")"; }

q { font-style: italic; }
code { color: green; }

span.menu { font-family: monospace; }

dt { display: inline-block; font-weight: bold; width: 25%;}
dd { display: inline-block; width: 70%; margin-left: 0px;}

div.nb { border: 1px gray dotted; background-color: #EFEFEF; padding: 1em;}
div.nb::before { content: "NB "; font-weight: bold; display: run-in; }

div#main > a { float:left;}
div#main > a + * { clear: left; }

/*
img[alt] { position:relative; display:block; }
img[alt]::after { content: "Figure " counter(figuur) ": " attr(alt); color: black; background-color: white; position: absolute; left: 0px; bottom: 0.6em; padding: 0.2em 0.2em; border: 0.1em black solid; font-size: 0.8em; }
img[alt].popup::after { left: auto; right: 0px; }
*/

img[alt] { position:relative; display:block; margin-bottom: 2em; }
img[alt]::after { content: "Figure " counter(figuur) ": " attr(alt); color: black; background-color: white; position: absolute; left: 0px; bottom: -1.3em; right: 0em; padding: 0.2em 0.2em; border: 0.1em black solid; border-top-style: none; font-size: 0.8em; line-height: 1.4em;}

img { counter-increment: figuur; }
img.right { float: right; margin: 0em 0em 1em 1em; }
img.left { float: left; margin: 0em 1em 1em 0em; }
img.scale { max-width: 50%; }

a { color: navy; text-decoration: none; }
a:visited { color: navy; text-decoration: none; }
a:active, a:hover { color: red; text-decoration: underline; }

kbd { border: 2px gray outset; padding: 0em 0.2em; background-color: white; }
kbd:active { border-style: inset; }

small.copyright { text-align: right; color: gray; display:block; }

h2[id]:hover::after, h3[id]:hover::after, h4[id]:hover::after { content: "#" attr(id); color:gray; float: right; }

div#toc { display:none; border: 1px black solid; padding: 1em; background-color: #EEEEEE;}
div#toc a { display: list-item; list-style-type:none; margin-left: 0em; font-size: 1em; font-weight: bold; }
div#toc a.h3 { margin-left: 2em; font-size: 0.9em; font-weight:bold;}
div#toc a.h4 { margin-left: 4em; font-size: 0.9em; font-weight:normal;}

#toggle { margin-bottom: 1px; font-style: italic; cursor: pointer; }


@media print {
body { padding:0px; margin:0px; border-style:none; width:100%;}
}