/* General Styles */
body                      { margin: 0 auto; min-width: 300px; max-width: 1000px; background-color: #F2E0CD }

body,
button                    { font-family: Arial, Helvetica, sans-serif }


/* Header */
header                    { position: relative; height: 170px; background: #E58E37 url("../images/logo.png") no-repeat top right }
header .heading           { position: absolute; left: 10px; bottom: 10px; margin: 0; padding-right: 140px; font-family: "Times New Roman", Times, serif;
                            font-size: 400%; font-weight: bold; color: white; text-shadow: #333 0.06em 0.06em 0.08em; line-height: 1 }

.skip                     { margin: 0; padding: 5px 10px }

.skip a:link,
.skip a:visited           { padding: 1px 3px; color: #E58E37; text-decoration: none; font-weight: bold; letter-spacing: .03em }

.skip a:focus,
.skip a:active,
.skip a:hover             { outline: 2px solid white; outline-offset: 0; background-color: white }


/* Overall */
.overall                  { display: table; border-collapse: collapse; width: 100%; background-color: white }

nav,
main                      { display: table-cell }


/* Navigation */
nav                       { width: 20%; padding: 10px 15px 10px 5px }

nav .menu                 { display: none }
nav ol                    { margin: 0; padding: 0; list-style: none }

nav a                     { display: block; padding: 7px 10px; text-decoration: none; font-weight: bold;
                            border-bottom: 1px white solid; background-color: #EDE7E1; color: #303030 }
nav a:hover,
nav a.current             { background-color: #E58E37; color: white }

nav a:focus-visible       { outline: 2px solid #888; outline-offset: -1px }


/* Main */
main                      { width: 80%; padding: 0 10px 20px 0; line-height: 1.5 }

main h1,
main h2,
main h3,
main h4                   { line-height: 1.2; font-family: "Times New Roman", Times, serif; font-weight: bold; margin: 0 0 .4em 0 }

main h1,
main h2                   { background-color: white; color: #CC7F33 }

main h1                   { font-size: 170% }

main h2                   { font-size: 145%; margin-top: 1.5em }
main h1 + h2              { margin-top: 1em }

main h3                   { background-color: white; color: black; font-size: 130%; margin-top: 1.2em }
main h2 + h3              { margin-top: .8em }

main h4                   { background-color: white; color: black; font-size: 120%; margin-top: 1em }

main ol,
main ul,
main dl,
main p                    { margin: 0 0 .7em 0 }

main blockquote           { margin: 1em 1.5em }

main .disperse li         { margin-bottom: .3em }

main figure               { margin: 0 }
main figure.gallery       { padding: 0; margin-top: .5em }
main .gallery figure      { display: inline-block; margin: .2em 25px 20px 0; vertical-align: top; text-align: center; width: 235px }
main .gallery.large figure { width: auto }
main figure img           { border: 2px solid white }
main figure a             { display: inline-block; line-height: 0 }
main figure a img         { border-color: #CC7F33 }

main .inline-left         { float: left; padding: 0 10px 5px 0 }
main .inline-right        { float: right; padding: 0 0 5px 10px }

main dt                   { margin-top: .7em; font-weight: bold }
main dd                   { margin-left: 2em }
main dd p                 { margin: 0 }

main a:link               { color: #512E10 }
main a:visited            { color: #444 }

main a:focus,
main a:link:hover,
main a:visited:hover,
main a:active             { color: #7A4C1E }

main a:focus-visible      { outline: 2px solid #CC7F33; outline-offset: 1px }

/* Home page */
main .sponsors            { list-style: none; padding: 0 }
main .sponsors li         { display: inline-block; min-width: 300px; margin: 5px 50px 15px 0; vertical-align: middle }

main .sponsors .text      { border: black 1px solid; font-size: 150%; font-weight: bold }

main .sponsors a          { display: inline-block; line-height: 0 }

main .sponsors .text a:link,
main .sponsors .text a:visited  { display: inline-block; vertical-align: top; color: black; text-decoration: none }

main .sponsors .text a:link img,
main .sponsors .text a:visited img  { display: inline-block; margin: 0 5px -5px 0 }


/* Emblem */
main .emblem              { position: relative; height: 370px; margin-top: 1.7em; font-size: 95% }

main .emblem img          { position: absolute; top: 2px; left: 175px; border: 0 }

main .emblem dt           { display: none }

main .emblem dd           { position: absolute; width: 170px; margin: 0; line-height: 1.3 }
main .emblem dd.tl        { top: 0; left: 0; text-align: right }
main .emblem dd.tr        { top: 0; left: 450px }
main .emblem dd.bl        { top: 200px; left: 0; text-align: right }
main .emblem dd.br        { top: 180px; left: 450px }


/* Footer */
footer                    { padding: 15px 10px; line-height: 1.5; background-color: #E58E37; color: white; letter-spacing: .05em }
footer p                  { margin: 0 }


/* Listing-styled table */
.listing                  { border-collapse: collapse; text-align: left }

.listing th,
.listing td               { padding: 0 1em 0 0; vertical-align: top }

.listing td:first-child   { text-align: right }


/* Simple Horizontal-styled Table */
.hor-simple               { border-collapse: collapse; text-align: left; margin-bottom: .7em }

.hor-simple caption       { padding-bottom: .3em; text-align: left; font-weight: bold; font-size: 110% }

.hor-simple th,
.hor-simple td            { padding: .4em 1em .4em 0; vertical-align: top; text-align: left }

.hor-simple thead th      { border-bottom: 2px solid black; border-top: 2px solid black; font-weight: bold }

.hor-simple tbody,
.hor-simple tfoot         { border-bottom: 2px solid black }

.hor-simple tbody         { border-top: 2px solid black }

.hor-simple tbody th,
.hor-simple td            { border-bottom: 1px solid black }


/* Small screen devices */
@media screen and (max-width: 1000px)
{
header,
nav,
main,
footer                    { padding-left: 5px; padding-right: 5px }

header .heading           { font-size: 300%; left: 5px }

.skip                     { padding-left: 0; padding-right: 0 }
}

@media screen and (max-width: 720px)
{
.overall,
nav,
main                      { display: block; width: auto }

header .heading           { position: static; white-space: pre-line; font-size: 250% }

nav                       { padding: 0 }

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

nav .menu:enabled:hover,
nav .menu:focus-visible   { background-color: #E58E37; color: white }

nav .menu:focus-visible   { outline: 2px solid #888; outline-offset: -1px }

nav ol.hide               { display: none }
nav a                     { padding: 8px 5px}

main                      { min-height: 200px; margin-top: 15px }
}

@media screen and (max-width: 640px)
{
main .emblem              { height: auto; font-size: inherit }

main .emblem,
main .emblem img,
main .emblem dd           { position: static }

main .emblem dt           { display: block }

main .emblem dd           { width: auto }
main .emblem dd.tl,
main .emblem dd.bl        { text-align: left }
}

@media screen and (max-width: 428px)
{
main .inline-left.large,
main .inline-right.large  { float: none; padding-left: 0; padding-right: 0 }
}

@media screen and (max-width: 360px)
{
header .heading           { white-space: inherit }
}


/* Lightbox styles */

body.lightbox-active            { overflow: hidden }

.lightbox                       { opacity: 0; z-index: 9999; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                                  background-color: black; color: #f0f0f0; font-style: normal; font-weight: normal;
                                  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: medium }

.lightbox.show                  { opacity: 1; transition: opacity .5s }

.lightbox .hide                 { display: none }

.lightbox p,
.lightbox figure                { margin: 0 }

.lightbox figure img            { z-index: 1; position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; margin: auto }
.lightbox figure .next-image    { opacity: 0 }
.lightbox figure .fade-out      { opacity: 0 }
.lightbox figure .fade-in       { opacity: 1 }
.lightbox figure .fade-out,
.lightbox figure .fade-in       { transition: opacity 1s linear }

.lightbox figure .error,
.lightbox figcaption            { z-index: 2; position: fixed; left: 0; bottom: 0; right: 0; padding: 2em .2em; text-align: center;
                                  background-color: rgba(0,0,0,0.6) }

.lightbox figcaption .number + .title { border-left: 2px solid #f0f0f0; margin-left: .6em; padding-left: .7em }

.lightbox button,
.lightbox div                   { position: fixed; display: block }

.lightbox div.hide              { display: none }

.lightbox button                { visibility: visible; opacity: 1; z-index: 3; width: 4em; height: 4em; border: 0; cursor: pointer;
                                  background-color: rgba(0,0,0,0.6) }
.lightbox button.hide           { display: block; opacity: 0; transition: opacity 1.5s }

.lightbox button:focus-visible  { outline: 2px dotted #ffc129 }
.lightbox button.hide:focus-visible { opacity: 1; transition: opacity 0s }

.lightbox button:focus-visible .icon,
.lightbox button:hover .icon    { stroke: #ffc129 }

.lightbox button[disabled]      { display: none }

.lightbox button.close          { top: 2px; right: 2px }
.lightbox button.prev           { top: calc(50% - 2em); left: 2px }
.lightbox button.next           { top: calc(50% - 2em); right: 2px }
.lightbox button .text          { display: none }

.lightbox .icon                 { position: relative; display: block; width: 3em; height: 3em;
                                  fill: none; stroke: #f0f0f0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 48px }

.lightbox button.playpause      { top: 2px; left: 2px }
.lightbox .playpause .icon      { fill: #f0f0f0; stroke: #f0f0f0; stroke-width: 0 }
.lightbox .playpause:focus-visible .play,
.lightbox .playpause:hover .play    { fill: #ffc129 }
.lightbox .playpause .pause         { fill: none }
.lightbox .playpause.pressed .play  { fill: none }
.lightbox .playpause.pressed .pause { stroke-width: 32px }

.lightbox .loading              { visibility: hidden; opacity: 0; z-index: 3; position: fixed; top: calc(50% - 2.5em); left: calc(50% - 2.5em) }
.lightbox .loading.show         { visibility: visible; opacity: 1; transition: visibility 0s, opacity 1s; transition-delay: 250ms }
.lightbox .loading .icon        { width: 5em; height: 5em; animation: rotating 2s linear infinite; transform-origin: 50% 50%;
                                  stroke: none; stroke-width: 24px }
.lightbox .loading .arc         { stroke: #e0e0e0; stroke-dasharray: 700 900 }

@keyframes rotating {
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
}

@media screen and (max-width: 800px)
{
.lightbox button                { width: 3em; height: 3em }
.lightbox button.prev           { top: calc(50% - 1.5em) }
.lightbox button.next           { top: calc(50% - 1.5em) }
.lightbox .icon                 { width: 2.25em; height: 2.25em }
}

@media screen and (max-height: 800px)
{
.lightbox figure .error,
.lightbox figcaption            { padding: .3em .2em }
}

@media print
{
.lightbox.show,
.lightbox .loading.show,
.lightbox button                { visibility: hidden }
}

/* Lightbox styles - user customisation */