/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }


/* Styles */
body                      { background-color: white; font-size: 11pt }

body,
button                    { font-family: Geneva, sans-serif }

.body-content             { margin: 0 auto; min-width: 640px; max-width: 1000px }

.scrollHelper             { position: fixed; bottom: 65px; right: 8px; opacity: .7; text-decoration: none;
                            transition-property: width, height, opacity; transition-duration: .3s; transition-timing-function: ease;
                            background: #003366 url("elements/scrollHelper.png") no-repeat }
.scrollHelper.hide        { width: 0; height: 0; opacity: 0 }

.scrollHelper,
.scrollHelper:focus       { width: 32px; height: 32px}

.scrollHelper:hover,
.scrollHelper:focus       { outline: 0 solid white; opacity: 1 }


/* Header */
.header                   { padding: 15px 10px 10px 10px; color: white; background-color: #6699CC; font-weight: bold }
.header .heading          { margin-bottom: .2em; font-size: 2em; line-height: normal }

.skip                     { position: absolute; top: 10px; right: 10px }
.skip a                   { padding: 1px 3px; color: #6699CC; text-decoration: none }
.skip a:hover,
.skip a:focus             { outline: 2px solid white; outline-offset: 0; background-color: white }


/* Main */
.main                     { margin-top: 4px }
.main .body-content       { display: table; border-collapse: collapse; width: 100% }

.nav,
.content                  { display: table-cell }


/* Navigation */
.nav                      { width: 25%; padding-bottom: 100px }

.nav .menu                { display: none }

.nav li                   { border-bottom: 1px solid white }

.nav a                    { display: block; color: white; background-color: #003366; padding: 8px 12px 8px 10px;
                            text-decoration: none; font-weight: bold }
.nav a.highlight          { background-color: #7C0068 }
.nav li li a              { background-color: #6699CC; font-weight: normal }

.nav a:hover,
.nav a:focus              { background-color: #336699; color: white }

.nav a:focus-visible      { outline: 2px solid white; outline-offset: 0 }


/* Content */
.content                  { width: 75%; padding: 5px 10px 10px 20px; line-height: 1.3 }

.content h1,
.content h2,
.content h3,
.content h4               { color: #003366; font-weight: bold; margin-bottom: .6em }

.content h1               { font-size: 150% }

.content h2               { font-size: 125%; margin-top: 2em }
.content h1 + h2          { margin-top: 1em }

.content h3               { font-size: 110%; margin-top: 2em; color: #336699 }
.content h2 + h3          { margin-top: .6em }

.content h4               { margin-top: 1.1em }

.content .section         { margin-top: 2em }

.content p                { margin-bottom: .6em }

.content p.subtitle,
.content p.series         { font-weight: bold; font-size: 120% }

.content blockquote       { margin: 1em 1.5em }
.content .box             { padding: .4em .6em .2em .6em; border: 1pt black solid }

.content cite,
.content i,
.content em               { font-style: italic }

.content strong,
.content b                { font-weight: bold }

.content hr               { height: 2px; margin: 1.5em 0; border: 0; color: #003366; background-color: #003366 }

.content a.ref            { font-size: 80%; vertical-align: super }

.content ol,
.content ul               { padding-left: 25px; margin-bottom: .8em; margin-top: .5em }
.content ol               { list-style: decimal }
.content ul               { list-style: disc }
.content li               { margin-bottom: .5em }

.content dt               { margin-top: .7em; margin-bottom: .2em }
.content dd               { padding-left: 25px }

.content .address         { font-size: 90%; color: #444 }

.content .figure          { padding: 10px 0 }
.content .figcaption      { font-size: 90%; font-weight: bold }

.content img              { width: auto !important; height: auto !important; max-width: 100% }
.content .inline-image    { float: right; margin: 0 0 1em 1em }
.content a:has(> img)     { display: inline-block; line-height: 0 }

.content .highlight       { color: #6699CC }

.content .index           { float: right; width: 30%; margin: 1.5em 0 1em 35px;
                            border-bottom: 2px solid #003366; border-top: 2px solid #003366 }
.content .index h2        { margin-top: .5em }
.content .index ul        { list-style: none; padding: 0 }

.content .toc             { padding-left: 0; list-style-type: none }
.content .toc > li ol     { list-style-type: none }
.content .toc td          { border-width: 0 }

.content a:link           { color: #003366 }

.content a:visited        { color: #444 }

.content a:focus,
.content a:link:hover,
.content a:visited:hover,
.content a:active         { color: #336699 }

.content a[href^="http"]  { background: url("elements/external.png") center right no-repeat; padding: 0 13px 0 0 }
.content a.plain          { background: none; padding: 0 }

.content table            { display: block; overflow-x: auto; margin-bottom: .8em }
.content table th,
.content table td         { padding: .5em; border: 1pt black solid; vertical-align: middle }
.content table th         { font-weight: bold }
.content table p          { margin: 0 }
.content caption          { margin-bottom: .2em; text-align: left; font-weight: bold }

.content .stats th,
.content .stats td        { vertical-align: top; text-align: left }
.content .stats p + p     { margin-top: .6em }

/* Panels */
.panels                   { display: table; border-collapse: collapse; width: 100% }
.panels .panel            { display: table-cell; vertical-align: top }
.panels .main             { width: 66%; padding-right: 2em }
.panels .side             { width: 34%; padding: 8px 0 5px 0; border-color: #003366; border-style: solid; border-top-width: 2pt; border-bottom-width: 2pt }
.content .side h2         { margin-top: 0 }


/* Reading list */
.content .books dt        { margin-top: 1.5em; margin-bottom: .3em; font-weight: bold; color: #003366 }
.content .books .title    { font-weight: bold }
.content .books dd        { margin-bottom: .8em; padding-left: 4em }
.content .books dd p      { margin-bottom: .3em }


/* Timeline */
.content .timeline h2,
.timeline .events         { display: inline-block; margin-top: 10px; vertical-align: top }

.content .timeline h2     { width: 12% }
.timeline .events         { width: 86% }

.content .timeline .event { margin-bottom: 1.5em }
.content .timeline h3     { margin-top: 0; margin-bottom: .2em }


/* Footer */
.footer                   { padding: 5px 10px 2px 10px; margin-top: 20px; color: white; background-color: #003366;
                            font-weight: bold; line-height: normal }

.footer p                 { margin-bottom: .3em }
.footer p.copyright       { letter-spacing: 1px }

.footer a:link,
.footer a:visited         { color: white; text-decoration: none }
.footer a:focus,
.footer a:link:hover,
.footer a:visited:hover,
.footer a:active          { text-decoration: underline }


/* Small screens */
@media screen and (max-width: 899px)
{
.content .inline-image    { float: none; margin: 1em 0 }
}

@media screen and (max-width: 640px)
{
.body-content             { min-width: 320px }

.scrollHelper             { bottom: 90px }

.main .body-content,
.nav,
.content,
.panels,
.panels .panel,
.panels .main,
.panels .side             { display: block; width: auto }

.main                     { margin-top: 1px }

.nav                      { padding-bottom: 0 }

.nav .menu                { display: block; width: 100%; padding: .4em 10px; background-color: #336699; color: white;
                            border: 0; border-bottom: 1px white solid; font-size: 125%; font-weight: bold; text-align: left }
.nav .menu:enabled        { cursor: pointer }

.nav .menu:enabled:hover,
.nav .menu:focus-visible  { background-color: #003366 }

.nav .menu:focus-visible  { border-bottom-color: #003366; outline: 2px solid white }


.nav ul.hide              { display: none }
.nav li ul                { display: none }

.content                  { padding: 10px }

.content .index           { float: none; width: auto; margin-left: 0; border: 0 }

.panels .main             { padding-right: 0 }
.panels .side             { padding-top: 1.5em }
}

@media screen and (max-width: 420px)
{
.content .timeline h2,
.timeline .events         { display: block; width: auto }

.content .timeline h2     { margin-top: 2em }

.content .books dd        { padding-left: 2em }
}