body                    { background-color: #F6EFFF }

.page                   { margin: 0 auto; max-width: 960px; min-width: 320px; background-color: white }


/* General */
h1, h2, h3, h4          { color: #6B3FA0 }

a:link                  { color: #6B3FA0 }
a:visited               { color: #444 }
a:focus-visible         { outline: 2px solid #6B3FA0 }


/* Header */
.banner                 { background-color: #6B3FA0; border-bottom: 1px white solid }

.skip                   { text-align: right; margin: 0; padding-right: 10px }
.skip a                 { padding: 3px 5px 2px 5px; color: #6B3FA0; text-decoration: none }
.skip a:focus,
.skip a:hover           { background-color: white }
.skip a:focus-visible   { outline-color: #6B3FA0 }

.logo                   { margin: 0 0 .4em 10px; font-size: 230%; color: white; text-shadow: 0.1em 0.08em 0.05em #3A3A3A }


/* Navigation */
nav                     { background-color: #4C2F72 }

nav .menu               { display: none }

nav ol                  { list-style-type: none; margin: 0; padding: .4em 0 0 10px }

nav li                  { display: inline-block; margin: 0 .6em 0 0; font-weight: bold; font-size: 92%; white-space: nowrap }

nav a                   { display: block; padding: .3em .5em .5em .5em }

nav a:link,
nav a:visited           { text-decoration: none; color: white }

nav a:hover,
nav a:focus             { background-color: #291A40 }
nav a:focus-visible     { outline: 2px solid #E2CCFF; outline-offset: -1px }

nav a.current,
nav a.current:hover     { color: #4C2F72; background-color: white }


/* Content */
main                    { padding: 20px 10px 10px 10px }

.columns                { display: grid; grid-template-columns: 1fr 370px; column-gap: 30px }


/* Footer */
.footer-info            { padding: .1em 10px; color: white; background-color: #4C2F72 }
.footer-info a          { color: white }
.footer-info a:focus    { outline-color: white }
.footer-info p          { margin: 1em 0 }


/* Hosted */
.hosted                 { padding: 2em 10px .5em 10px; background-color: #F6EFFF }


/* Images */
figure.gallery figure   { margin-bottom: 20px; background-color: #E2CCFF; border: 1px #6B3FA0 solid }

figure.gallery a,
.image a                { display: inline-block; padding: 3px; line-height: 0 }

figure.gallery a img,
.image a img            { border: 2px #6B3FA0 solid }


/* Boxes */
.box                    { margin-top: 1em; padding: 10px; background-color: #E2CCFF; border: 1px #6B3FA0 solid }
.columns .box           { margin-top: 0 }

.box h2                 { margin-top: 0 }
.box ol                 { padding-left: 1.9em }
.box ul                 { padding-left: 1.2em }


/* Home page */
.toppanel.box           { margin: 0 0 1.5em 0 }
.toppanel h1            { margin-bottom: .5em; letter-spacing: 2px }
.toppanel .last         { margin-bottom: 0 }

.midpanel               { background-color: white }

.column h2              { margin-top: 1.2em }

.col1 ul                { padding-left: 1.2em; margin: 0 0 .6em 0 }
.col1 li                { margin-bottom: .5em }
.col1 li ul             { margin-top: .5em }


/* Permanent Memorials page */
.memorial               { margin-bottom: .8em }

.memorial header        { background-color: #E2CCFF; padding: 10px 10px 10px 0;
                          display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas:
                            "icon place"
                            "icon name" }
.memorial header.js     { cursor: pointer }

.memorial header h2     { grid-area: place }
.memorial header p      { grid-area: name }

.memorial header.js h2,
.memorial header.js p   { margin: 0 }

.memorial header h2,
.memorial header p      { margin-left: 10px }

.header-icon            { grid-area: icon; display: flex; width: 30px; margin: 0 7px; border: 0; background-color: #E2CCFF; cursor: pointer }
.header-icon:focus-visible { outline: 2px solid #4C2F72 }
.header-icon svg        { fill: none; stroke: #6B3FA0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;
                          transition: transform .2s ease-out }
.hide .header-icon svg  { transform: rotate(-90deg) }
.header-icon span       { display: none }

.memorial .detail       { margin-left: 44px }
.memorial.hide .detail  { display: none }


/* Small screen devices */
@media screen and (max-width: 899px)
{
.logo                   { font-size: 165% }

nav .menu               { display: block; width: 100%; margin: 0; padding: .4em 10px; background-color: #F0F0F0; color: #4C2F72;
                          border: 0; border-bottom: 1px #4C2F72 solid; font-size: 120%; font-weight: bold; text-align: left; cursor: pointer }
nav .menu:hover,
nav .menu:focus-visible { background-color: #E2CCFF }

nav .menu:focus-visible { border-bottom-color: #F0F0F0; outline: 2px solid #4C2F72 }


nav ol                  { margin: 0 2px; padding: 0; border-bottom: 2px #4C2F72 solid }
nav ol.hide             { display: none }
nav li                  { display: block; margin: 0; font-size: 100% }
nav a:link              { display: block; padding: .7em 8px }
nav a.current:focus-visible { outline-color: #291A40 }

.columns                { display: block }

.box,
.columns .box           { margin-top: 2em }

.toppanel h1            { font-size: 140% }
.toppanel img           { margin-top: 1em; width: auto !important; height: auto !important; max-width: 100% }
}

@media screen and (max-width: 499px)
{
.logo                   { font-size: 135% }
.memorial .detail       { margin-left: 0 }
.image                  { float: inherit; margin: 0 0 5px 0; text-align: left }
}

@media screen and (max-width: 349px)
{
.logo                   { font-size: 120% }
.toppanel h1            { font-size: 120% }
}


/* 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 */