:root {

    /* Shared measurements of the fixed areas at the top and bottom. They keep
       both rules the same distance from their viewport edge. */
    --barOuterPadding: 25px;
    --barInnerPadding: 15px;
    --logoHeight: 45px;
    /* Extra gap between the bottom edge of the logo and the rule. Through
       --barContentHeight it also feeds into the bottom bar, so both rules stay
       equally far from their viewport edge. */
    --logoBottomSpacing: 9px;
    --barContentHeight: calc(var(--logoHeight) + var(--logoBottomSpacing));
    /* Band beyond the rule that keeps covering the text. */
    --barGap: 20px;
    /* Area below the bottom rule, 94px tall. It is split into a headline row
       and a row carrying logos and links underneath. */
    --footerRowsHeight: calc(var(--barInnerPadding) + var(--barContentHeight) + var(--barOuterPadding));
    --footerHeadlineShare: calc(var(--footerRowsHeight) * 0.6);
    --footerMetaShare: calc(var(--footerRowsHeight) * 0.4);
    /* Line height of the links. On narrow viewports they move into a row of
       their own below the logos; --footerStackExtra is the height that row
       adds to the footer (see the media query below). */
    --footerLinkHeight: 14px;
    --footerStackExtra: 0px;
    --footerContentHeight: calc(var(--footerRowsHeight) + var(--footerStackExtra));
    /* Height of the whole bottom bar including the band beyond its rule. */
    --footerBarHeight: calc(var(--footerContentHeight) + 1px + var(--barGap));
    /* Distance across the boundary of the two rows. Both sides give up half of
       it, so the space gained goes to the rule above and the viewport edge.
       Sized so the leftover above the headline (row height minus font size
       minus half the gap) equals the gap itself: (56.4px - 32px) / 1.5. */
    --footerBlockGap: 16.267px;
    /* --footerHeadlineSize is the upper bound on wide viewports,
       --footerHeadlineScale the scaling below it (a share of the footer width)
       that keeps the line from wrapping. */
    --footerHeadlineSize: 32px;
    --footerHeadlineScale: 10.5cqi;
    --barHeight: calc(var(--barOuterPadding) + var(--barContentHeight) + var(--barInnerPadding) + 1px + var(--barGap));
    /* Same value Leaflet uses for .leaflet-popup-content-wrapper, so the
       content of a popup can pick up its rounding. */
    --placePopupRadius: 12px;
    /* Gallery of a place: a tenth of the viewport stays free left and right,
       while it reaches from one rule to the other. */
    --galleryInsetSide: 10%;
    /* Distance the gallery keeps from the rule above and the one below. */
    --galleryRuleGap: 20px;
    /* Where the two rules are: the top one sits below the padding, the bar
       content, the inner padding and its own line - that is --barHeight
       without the band beyond it. The bottom one is as far from its edge, but
       is put together from the values of the footer so that both stay right on
       their own. Everything between them belongs to the gallery. */
    --galleryCurtainTop: calc(var(--barHeight) - var(--barGap));
    --galleryCurtainBottom: calc(var(--footerContentHeight) + 1px);
    --galleryInsetTop: calc(var(--galleryCurtainTop) + var(--galleryRuleGap));
    --galleryInsetBottom: calc(var(--galleryCurtainBottom) + var(--galleryRuleGap));
    --galleryRadius: 12px;
    /* Bar in SIT blue along the top edge of the gallery. */
    --galleryAccentHeight: 4px;
    --galleryPadding: 24px;
    /* Same above and below the headline, so it sits in the middle of the
       header. */
    --galleryHeaderPadding: 18px;
    --galleryCountSize: 16px;
    /* Thin like the overlay scrollbar of macOS; it only shows while scrolling. */
    --galleryScrollbarWidth: 4px;
    /* How the scrollbar and the arrows of a picture come and go: there at
       once, fading out slowly. */
    --galleryFadeIn: 0.1s;
    --galleryFadeOut: 0.2s;
    /* Same as the close button. */
    --galleryStepSize: 32px;
}

/* Narrow viewports: the four footer columns get too slim for logos and links
   to sit side by side, so the links take a third row. The footer grows by
   that row plus the gap above it, which keeps the distance headline - logos
   equal to the distance logos - links. */
@media (max-width: 767.98px) {

    :root {

        --footerStackExtra: calc(var(--footerBlockGap) + var(--footerLinkHeight));
    }
}

body {

    background-color: #F3F3F3;
    color: #50504F;
    font-family: 'Lato', sans-serif;
}

.l {

    text-align: left;
}

.c {

    text-align: center;
}

.r {

    text-align: right;
}

div.specialPanoramaContainer {

    padding-right: 40px;
    padding-left: 40px;
}

.firstLinePaddingRight::first-line {

    padding-right: 50px !important;
}

.productGitHubDownloadSpacer {

    margin-bottom: 5px;
}

img.sitLinkLogo {

    height: 19px;
    vertical-align: center;
    width: 35px;
}

img.sitBuchtippsLogo {

    height: 19px;
    vertical-align: center;
    width: 58px;
}

img.gitHubLinkLogo {

    height: 19px;
    vertical-align: center;
    width: 19px;
}

#ytilsNavContainerInner {

    display: none;
    margin-top: 0;
    padding-top: 15px;
}

#ytilsNavContainerInner nav ul {

    list-style-type: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#ytilsNavContainerInner nav ul.topMargin {

    list-style-type: none;
    margin-top: 15px;
    margin-bottom: 0;
    padding-bottom: 0;
}

li.subNavLi {

    color: #009EC7;
    padding-left: 4px;
}

a.actionLink,
div.devApiParamTable a,
div#mainContent div.mainContentInner ul li a,
div#mainContent div.mainContentInner p a,
#ytilsNavContainerInner nav ul li a {

    color: #009EC7;
    font-size: 16px;
    text-decoration: none;
}

a.actionLink:hover,
a.actionLink:focus,
div.devApiParamTable a:hover,
div.devApiParamTable a:focus,
div#mainContent div.mainContentInner ul li a:hover,
div#mainContent div.mainContentInner ul li a:focus,
#ytilsNavContainerInner nav ul li a:hover,
#ytilsNavContainerInner nav ul li a:focus,
div#mainContent div.mainContentInner p a:hover,
div#mainContent div.mainContentInner p a:focus {

    color: #009EC7;
    text-decoration: underline;
}



div.devApiParamTable th.codeDocTable,
div.devApiParamTable td.codeDocTable {

    font-family: "Courier New", Courier, monospace;
}

#ytilsNavToggler:checked + #ytilsNavContainerInner {

    display: block;
}

#ytilsNavToggler {

    display: none;
}

#ytilsNavContainer {

    padding-top: 5px;
}

img#ytilsNavMenu {

    cursor: pointer;
    height: 40px;
    width: 40px;
}

img#ytilsMenu {

    cursor: pointer;
    height: 45px;
    width: 45px;
}

h1#bltcLogo {

    background: url(../img/sit-bltc-logo-50p.png) no-repeat top center;
    background-size: 100% var(--logoHeight);
    /* block instead of inline-block: avoids the baseline gap below the logo,
       so the top rule sits exactly as high as the bottom one sits low. */
    display: block;
    height: var(--barContentHeight);
    margin: 0;
    padding: 0;
    width: 138px;
}

/*
h3#ytilsLogo2 {

    background: url(../img/Ytils-logo-yellow-50p.png) no-repeat center;
    background-size: 100%;
    display: inline-block;
    height: 45px;
    padding: 0;
    width: 90px;
}
*/

h3#ytilsLogo2 a,
h1#bltcLogo a {

    display: block;
    overflow: hidden;
    text-indent: -10000px;
}

h1#bltcLogo img {

    width: 40px;
}

h2 {

    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 24px;
    margin-bottom: 16px;
}

.forceStripedLightBgColor {

    background-color: #F3F3F3 !important;
}

div#ytilsLogoAbsoluteContainer {

    background: none;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

div#ytilsLogoAbsoluteContainerInner {

    background: none;
    margin: auto;
    max-width: 120px;
    padding: 25px 0 0 25px;
    pointer-events: none;
}

div#mainNavFixLogo {

    padding: 0 20px 0 20px;
    width: 100%;
}

div#mainNavFix {

    background-color: #F3F3F3;
    left: 0;
    padding: var(--barOuterPadding) 20px var(--barGap) 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

div#mainFooterFix {

    background-color: #F3F3F3;
    bottom: 0;
    left: 0;
    padding: var(--barGap) 20px 0 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

div#mainNavFixLogo {

    position: absolute;
    z-index: 1000;
}

div#mainNavLogo {

    margin-top: 25px;
}

div#mainNavContentContainerLogo,
div#mainNavContentContainer {

    border-bottom: 1px solid #50504F;
    margin: auto;
    max-width: 980px;
    padding: 0 15px var(--barInnerPadding) 15px;
}

div#mainFooterContentContainer {

    border-top: 1px solid #50504F;
    margin: auto;
    max-width: 980px;
    padding: 0 15px 0 15px;
}

/* The whole area below the rule as a single box. Its total matches the
   previous structure, so the rule keeps its position. Inside, the height is
   split between the headline and the row of logos and links. */
div#mainFooterContentContainer div.footerContent {

    /* Reference size for the headline's cqi unit. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    height: var(--footerContentHeight);
}

h2#footerHeadline {

    /* Sits at the bottom of its row, only --footerBlockGap / 2 away from the
       boundary. The remaining room of the row goes to the rule above. */
    align-items: flex-end;
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: min(var(--footerHeadlineSize), var(--footerHeadlineScale));
    font-weight: 100;
    height: var(--footerHeadlineShare);
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0 0 calc(var(--footerBlockGap) / 2) 0;
    text-align: center;
    white-space: nowrap;
}

/* Four columns of equal width, each centring its own content. Mirrors the
   headline: it starts right below the boundary, the rest of the row is the
   distance to the bottom of the viewport. */
div#footerMeta {

    align-items: flex-start;
    display: flex;
    height: var(--footerMetaShare);
    padding-top: calc(var(--footerBlockGap) / 2);
    width: 100%;
}

div#footerMeta div.footerMetaColumn {

    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 25%;
}

/* Tighter spacing so the pipe sits 4px away from each logo. */
div#footerMeta div.footerMetaColumnLogos {

    gap: 4px;
}

/* Plain inline text instead of a flex row: the separator between the links
   then behaves like any other character, sharing their baseline and without
   a flex gap on either side. */
div#footerMeta div.footerMetaColumnLinks {

    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-align: center;
}

img.footerLogo {

    display: block;
    height: 19px;
    width: auto;
}

span.footerSeparator {

    color: #50504F;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

a.footerLink {

    color: #009EC7;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-decoration: none;
}

a.footerLink:hover,
a.footerLink:focus {

    color: #009EC7;
    text-decoration: underline;
}

/* Stacked footer, see the media query at :root: logos centred in the second
   row, links centred in a third one, --footerBlockGap apart. */
@media (max-width: 767.98px) {

    div#footerMeta {

        align-items: center;
        flex-direction: column;
        gap: var(--footerBlockGap);
        height: calc(var(--footerMetaShare) + var(--footerStackExtra));
    }

    div#footerMeta div.footerMetaColumn {

        width: auto;
    }

    /* The outer two columns only exist to push the filled ones together. */
    div#footerMeta div.footerMetaColumn:empty {

        display: none;
    }

    div#footerMeta div.footerMetaColumnLinks,
    div#footerMeta div.footerMetaColumnLinks a.footerLink {

        display: block;
        line-height: var(--footerLinkHeight);
    }
}

div#mainContent {

    /* Full viewport height minus the two fixed bars: this is the area Swiper
       pages through. On a phone 100vh is the height with the browser's bars
       retracted, which is more than can be seen while they show: the lower
       end of this area then lies behind the fixed footer. 100dvh is the
       height actually visible; the line before it serves browsers that do
       not know the unit. */
    height: 100vh;
    height: 100dvh;
    padding-bottom: var(--footerBarHeight);
    padding-top: var(--barHeight);
}

/* Image slide: same width limit as the text blocks. The image uses the full
   height between the rules without being cropped. */
div#mainContent div.swiper div.swiper-slide div.mainContentInnerImage {

    align-items: center;
    /* Reference size for the map frame's cq units. */
    container-type: size;
    display: flex;
    height: 100%;
    justify-content: center;
}

/* Frame carrying the aspect ratio of the map. It shrinks to the available
   space and is therefore congruent with the rendered image - the basis for
   positioning the place markers in percentages so they stay put at every
   viewport size. */
div#mainContent div.swiper div.swiper-slide div.mapFrame {

    aspect-ratio: 2160 / 1919;
    /* Fits like object-fit: contain - whichever comes first wins, the height
       or the height derived from the width. */
    height: min(100cqh, calc(100cqw * 1919 / 2160));
    position: relative;
    width: auto;
}

div#mainContent div.swiper div.swiper-slide img.slideImage {

    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

/* Ring in SIT grey fading in and out. Implemented as box-shadow so the pulse
   affects neither marker size nor layout. */
@keyframes placePulse {

    0% { box-shadow: 0 0 0 4px rgba(101, 105, 106, 0); }
    50% { box-shadow: 0 0 0 4px rgba(101, 105, 106, 0.6); }
    100% { box-shadow: 0 0 0 4px rgba(101, 105, 106, 0); }
}

div#mainContent div.swiper div.swiper-slide button.mapPlace {

    animation: placePulse 2.4s ease-in-out infinite;
    background-color: #65696A;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: var(--placeSize);
    padding: 0;
    position: absolute;
    /* The marker is centred on the place coordinate. */
    transform: translate(-50%, -50%);
    width: var(--placeSize);
}

/* On hover the green ring replaces the pulsing one. Switching the animation
   off is required because a running animation would otherwise take precedence
   over the box-shadow declaration. */
div#mainContent div.swiper div.swiper-slide button.mapPlace:hover,
div#mainContent div.swiper div.swiper-slide button.mapPlace:focus-visible {

    animation: none;
    box-shadow: 0 0 0 4px #779452;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    div#mainContent div.swiper div.swiper-slide button.mapPlace {

        animation: none;
    }
}

div#mainContent div.swiper {

    height: 100%;
    width: 100%;

    /* Scroll markers switched off for now, see public/js/bltc/main-swiper.js.
    --swiper-pagination-color: #65696A;
    --swiper-pagination-bullet-inactive-color: #65696A;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-vertical-gap: 8px;
    */
}

/* Scroll markers switched off for now, see public/js/bltc/main-swiper.js.
   The markers sit centred in the 35px right padding of the content area, that
   is between the edge of the text and the end of the rules.

div#mainContent div.swiper div.swiper-pagination {

    left: auto;
    right: max(20px, calc(50% - 490px));
    text-align: center;
    width: 35px;
}

div#mainContent div.swiper span.swiper-pagination-bullet {

    margin-left: auto;
    margin-right: auto;
}

div#mainContent div.swiper span.swiper-pagination-bullet-active {

    height: 12px;
    width: 12px;
}
*/

div#mainContent div.mainContentInner {

    margin: auto;
    max-width: 980px;
    /* 35px base distance to the rules plus 15px so the content does not slide
       underneath the scroll markers on narrow viewports. */
    padding: 0 50px 0 50px;
}

div#mainContent div.mainContentInnerNoPadding {

    margin: auto;
    max-width: 980px;
    padding: 0;
}

div#mainContent div.mainContentInnerTeaser {

    margin: auto;
    max-width: 980px;
    padding: 0 0 15px 0;
}

div#mainContent div.mainContentInner div.stdSpacing {

    height: 15px;
}

div#mainContent div.mainContentInner img.screenshot {

    border: 1px solid #50504F;
    max-width: 100%;
}

div#mainContent div.mainContentInnerNoPadding div.screenshotSubline,
div.mainContentInnerTeaser div.screenshotSubline,
div#mainContent div.mainContentInner div.screenshotSubline {

    font-size: 14px;
    margin-bottom: 15px;
    text-align: right;
}

div#mainContent div.mainContentInner div.screenShotNumberLegend {

    background: #72904D;
    border-radius: 50%;
    color: #F3F3F3;
    font-size: 24px;
    height: 36px;
    margin: auto;
    padding: 0 8px 8px 8px;
    text-align: center;
    width: 36px;
}

div#mainContent div.mainContentInner div.backOrForward {

    /* background: #72904D; */
    background: #009EC7;
    border-radius: 50%;
    color: #F3F3F3;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 24px;
    margin: 0 0 0 15px;
    padding: 0 0 8px 2px;
    text-align: center;
    width: 24px;
}

div#mainContent div.mainContentInner div.backOrForwardR {

    /* background: #72904D; */
    background: #009EC7;
    border-radius: 50%;
    color: #F3F3F3;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 24px;
    margin: 0 15px 0 0;
    padding: 0 0 8px 2px;
    text-align: center;
    width: 24px;
}

div#mainContent div.mainContentInner div.paginationRow {

    margin-bottom: 16px;
}

div#mainContent div.mainContentInner div.backOrForward a,
div#mainContent div.mainContentInner div.backOrForwardR a {

    color: #FFF;
    cursor: pointer;
    text-decoration: none;
}

div#mainContent div.mainContentInner a.backOrForwardLink {

    /* color: #72904D; */
    color: #009EC7;
    text-decoration: none;
}

div#mainContent div.mainContentInner a.backOrForwardLink:hover,
div#mainContent div.mainContentInner a.backOrForwardLink:focus {

    /* color: #72904D; */
    color: #009EC7;
    text-decoration: underline;
}

div#mainContent div.mainContentInner div.screenShotNumberLegendBottom {

    margin-bottom: 16px;
}

div#mainContent div.mainContentInner div.screenShotNumberLegendText {

    display: inline-block;
}

div#mainContent div.mainContentInner div.screenShotNumberLegendText p {

    font-size: 16px;
}

div#mainContent div.mainContentInner p.supDeclaration {

    color: #72904D;
    font-weight: bold;
}

div#mainContent div.mainContentInner h2 {

    font-size: 36px;
    font-weight: 300;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner div.githubMark {

    padding-top: 8px;
}

div#mainContent div.mainContentInner img.documentationMark,
div#mainContent div.mainContentInner img.githubMark {

    border: none;
    height: 28px;
    width: 28px;
}

div#mainContent div.mainContentInner img.downloadImage {

    border: none;
    margin-right: 5px;
    height: 28px;
    vertical-align: center;
    width: 28px;
}

div#mainContent div.mainContentInner h3 {

    font-size: 28px;
    font-weight: 300;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h3.flwH2 {

    font-size: 28px;
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h3.flwH2Sm {

    font-size: 20px;
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h3 a {

    color: #009EC7;
    font-size: 28px;
    font-weight: 300;
    padding: 0 15px 0 15px;
    text-decoration: none;
}

div#mainContent div.mainContentInner h3 a:hover,
div#mainContent div.mainContentInner h3 a:focus {

    color: #009EC7;
    font-size: 28px;
    font-weight: 300;
    padding: 0 15px 0 15px;
    text-decoration: underline;
}

div#mainContent div.mainContentInner h4 {

    font-size: 22px;
    font-weight: 300;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner .devApiHl h3,
div#mainContent div.mainContentInner .devApiHl h4 {

    background: #72904D;
    color: #FFF;
    font-size: 22px;
    margin: 0 15px 0 15px;
    padding: 10px 15px 10px 15px;
}

div#mainContent div.mainContentInner div.devApiParamTable table th {

    font-size: 18px;
}

div#mainContent div.mainContentInner div.devApiParamTable table td {

    font-size: 16px;
}
div#mainContent div.mainContentInner div.devApiParamTable table td.codeDocTable {

    font-size: 14px;
}

div#mainContent div.mainContentInner div.devApiParamTable table {

    margin-bottom: 0;
}

div#mainContent div.mainContentInner div.subDocTablePadding {

    padding: 5px 5px 0 5px;
}

div#mainContent div.mainContentInner div.devApiParamTable tr.subDocTable {

    background-color: #72904D;
    color: #FFF;
}

span.typedefType {

    background-color: #FFF;
    border: #72904D solid 1px;
    color: #72904D;
    font-family: "Courier New", Courier, monospace;
    padding: 2px;
}

div#mainContent div.mainContentInner .devApiParamTable {

    border: #72904D solid 1px;
    overflow-x: auto;
    margin: 0 15px 0 15px;
    padding: 0;
    width: auto;
}

div#mainContent div.mainContentInner h4.flwH3 {

    font-size: 22px;
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h4.flwH3Sm {

    font-size: 20px;
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h5 {

    font-size: 18px;
    font-weight: 300;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner h5.flwH3 {

    font-size: 18px;
    font-weight: 300;
    margin-top: -16px;
    margin-bottom: 16px;
    padding: 0 15px 0 15px;
}

div.productSubline {

    border-top: 1px solid #50504F;
    margin-top: 10px;
    padding-top: 10px;
}

div#mainContent div.mainContentInner p {

    font-size: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner p.introText {

    color: #65696A;
    padding: 0;
    text-align: left;
}

div#mainContent div.mainContentInner p.noMarginBottom {

    font-size: 16px;
    margin-bottom: 0;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner p.code {

    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    padding: 0 15px 0 15px;
}

div#mainContent div.mainContentInner ol,
div#mainContent div.mainContentInner ul {

    margin-left: 15px;
}

div#mainContent div.mainContentInner .preCode {

    /* margin-bottom: -15px; */
}

div#mainContent div.mainContentInner .afterCode {

    margin-top: -30px;
}

div#mainContent div.mainContentInner .afterCode15 {

    margin-top: -15px;
}

div#mainContent div.mainContentInner .afterCodeNoMarginBottom {

    margin-top: -30px;
    margin-bottom: 0;
}

div#mainContent div.mainContentInner pre {

    padding: 0 10px 0 10px;
}

div#mainContent div.mainContentInner div.screenShotNumberLegendText p {

    font-size: 16px;
    padding: 5px 15px 0 15px;
}

div#mainContent div.mainContentInner div.screenShotNumberLegendText strong {

    font-weight: 700;
}

div#mainContent div.mainContentInner .code {

    background-color: #FFF;
    border: 1px solid #50504F;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    padding: 0 3px 0 3px;
    text-transform: uppercase;
}

div#mainContent div.mainContentInner .codeEol {

    background-color: #FFF;
    border: 1px solid #50504F;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    margin: 0 1px 0 0;
    padding: 0 3px 0 3px;
    text-transform: uppercase;
}

div#mainContent div.mainContentInner .codeCs {

    background-color: #FFF;
    border: 1px solid #50504F;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    padding: 0 3px 0 3px;
}

div#mainContent div.mainContentInner .codeCs20 {

    background-color: #FFF;
    border: 1px solid #50504F;
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    padding: 0 3px 0 3px;
}

div#mainContent div.mainContentInner .codeCsEol {

    background-color: #FFF;
    border: 1px solid #50504F;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    margin: 0 1px 0 0;
    padding: 0 3px 0 3px;
}

.wsPre {

    white-space: pre;
}

div.contentDividerLine {

    padding: 0 40px 0 40px;
}

div.contentDividerLineInner {

    border-top: 1px solid #50504F;
    padding-top: 15px;
    margin: auto;
    max-width: 980px;
}

div.contentDividerLineInnerNoPaddingTop {

    border-top: 1px solid #50504F;
    padding-top: 0;
    margin: auto;
    max-width: 980px;
}

div.mainContentInner img.one3rd {

    height: 210px;
    margin-bottom: 15px;
    width: 210px;
}

div.stdSpacer {

    height: 15px;
}

div.bottomSpacer {

    height: 40px;
}

div.bottomSpacer15 {

    height: 15px;
}

/** Yupput Demo area */
label#yupputDemoEventLabel {

    display: none;
}

div#yupputDemoEventContainer {

    border: #72904D solid 1px;
    padding: 15px;
}

div#yupputDemoEventContainer input#yupputDemoEvent {

    background: none;
    border: none;
    color: #50504F;
    font-size: 22px;
    outline: none;
    width: 100%;
}

th.cmdDescription {

    border-bottom: 0;
    background-color: #F3F3F3 !important;
    background-image: none;
}

td.cmdDescription {

    background-color: #F3F3F3 !important;
    background-image: none;
}

th.cmdDescriptionBorder {

    border-top: #212529 solid 1px !important;
}

td.cmdDescriptionBorder {

    border-top: #212529 solid 1px !important;;
}

.fwNormal {

    font-weight: normal;
}

.fsStd {

    font-size: 16px;
}

div.hOverflw {

    max-width: 100%;
    overflow-x: scroll;
}

div.hOverflwAsP {

    max-width: 100%;
    overflow-x: scroll;
    padding: 0 15px 15px 15px;
}

span#noSpamLegalNoticeEmailAddress {

    color: #009EC7;
    cursor: pointer;
    text-decoration: none;
}

span#noSpamLegalNoticeEmailAddress:hover,
span#noSpamLegalNoticeEmailAddress:active {

    color: #009EC7;
    cursor: pointer;
    text-decoration: underline;
}

/** Yupput overrides */
div#ytilsYupputOuterContainer {

    position: fixed;
}

.maxW100 {

    max-width: 100%;
}

div.pDiv {

    padding: 0 15px 0 15px;
}

/* Transparent Leaflet layer on top of the drawn map. It only carries the
   popups, so it must not swallow the clicks meant for the place markers. */
div#placeMap {

    background: none;
    height: 100%;
    left: 0;
    /* Leaflet clips its container by default. Popups near the edge of the map
       would be cut off, and panning them into view is not an option here. */
    overflow: visible;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    /* Above the markers so a popup is never hidden behind one. */
    z-index: 2;
}

/* The popup itself stays interactive, its close button has to work. */
div#placeMap .leaflet-popup {

    pointer-events: auto;
}

/* Everything but the arrow: it points exactly at the centre of its marker,
   where Leaflet lets it take the click meant for the marker underneath - the
   click that opens the gallery. */
div#placeMap div.leaflet-popup-tip {

    pointer-events: none;
}

/* Same background as the page. The popup is already set apart by its shadow,
   so Leaflet's white would only add an unnecessary contrast. The tip has to
   follow, otherwise it would stay white against the bubble. */
div#placeMap div.leaflet-popup-content-wrapper,
div#placeMap div.leaflet-popup-tip {

    background: #F3F3F3;
    color: #50504F;
}

/* Pulled a bit further into the corner, top and right offset kept equal so
   the button moves in evenly instead of drifting sideways. The × itself
   grows within the unchanged button box, and a ring in the same colour as
   the × turns the button into a permanent circle. */
div#placeMap a.leaflet-popup-close-button {

    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #757575;
    font-size: 20px;
    line-height: 24px;
    right: 4px;
    top: 4px;
}

/* On hover, focus and click the ring and the × switch to SIT green. */
div#placeMap a.leaflet-popup-close-button:hover,
div#placeMap a.leaflet-popup-close-button:focus,
div#placeMap a.leaflet-popup-close-button:active {

    box-shadow: inset 0 0 0 1px #779452;
    color: #779452;
}

p.placePopupName {

    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

/* The border is always there, in the colour of the background, so that the
   highlight on hover and focus does not move anything around. Its radius is
   the one Leaflet gives the popup itself. */
a.placePopupLink {

    border: 2px solid #F3F3F3;
    border-radius: var(--placePopupRadius);
    display: block;
    line-height: 0;
    width: fit-content;
}

a.placePopupLink:hover,
a.placePopupLink:focus {

    border-color: #779452;
    outline: none;
}

/* The logo is 917 x 300 px, shown here at 25 percent of its dimensions and
   then reduced by another quarter. Its radius is two pixels smaller than the
   one of the frame around it, so both curves run concentric. */
img.placePopupImage {

    border-radius: calc(var(--placePopupRadius) - 2px);
    display: block;
    height: 56.25px;
    width: 171.75px;
}

/* Popups near the top edge open downwards instead, so the fixed bar above
   cannot cover them. The tip then has to sit above the bubble and point up. */
div#placeMap div.leaflet-popup.placePopupBelow div.leaflet-popup-tip-container {

    bottom: auto;
    margin-top: 0;
    top: -19px;
    transform: rotate(180deg);
}


/* Gallery of one place, opened by clicking its marker. As a modal dialog it
   lies above everything else, the two fixed bars included, so it needs no
   z-index of its own. */
dialog#placeGallery {

    background-color: #F3F3F3;
    border: none;
    border-top: var(--galleryAccentHeight) solid #0F9BC7;
    border-radius: var(--galleryRadius);
    /* No vertical offset: a shadow cast downwards filled the gap to the lower
       rule and made it look narrower than the one above. Centred and short,
       it takes the same few pixels of both gaps. */
    box-shadow: 0 0 6px rgba(80, 80, 79, 0.18);
    color: #50504F;
    flex-direction: column;
    /* The four insets alone give the size: twenty pixels below the upper rule,
       twenty above the lower one, a tenth of the viewport left and right. The
       user agent's own limits would cut that back. */
    height: auto;
    inset: var(--galleryInsetTop) var(--galleryInsetSide) var(--galleryInsetBottom);
    margin: 0;
    max-height: none;
    max-width: none;
    /* Keeps the corners of the header and the thumbnails inside the rounding. */
    overflow: hidden;
    padding: 0;
    width: auto;
}

/* display comes from the user agent as long as the dialog is closed, so the
   column may only be switched on while it is open. */
dialog#placeGallery[open] {

    display: flex;
}

/* The same ground as the page, so the gallery sits on the SIT background
   rather than on a dimmed map - but only between the two rules. A band rather
   than a filled area: the backdrop lies above everything else, the fixed bars
   included, and would otherwise cover logo, headline and both rules. */
dialog#placeGallery::backdrop {

    background-color: transparent;
    background-image: linear-gradient(#F3F3F3, #F3F3F3);
    background-position: 0 var(--galleryCurtainTop);
    background-repeat: no-repeat;
    background-size: 100% calc(100% - var(--galleryCurtainTop) - var(--galleryCurtainBottom));
}

/* Headline and close button. It keeps its height, only the area below it
   scrolls. */
dialog#placeGallery div#placeGalleryHeader {

    align-items: center;
    /* The rule of the two bars in SIT grey, toned down: inside the gallery it
       separates rather than frames. */
    border-bottom: 1px solid rgba(101, 105, 106, 0.25);
    display: flex;
    flex: none;
    gap: 16px;
    justify-content: space-between;
    padding: var(--galleryHeaderPadding) var(--galleryPadding);
}

/* Name and number of pictures next to each other, the same headline as the
   one in the footer: Lato in its thinnest cut at the same size. A flex row
   rather than one line of text, so the smaller number sits in the middle of
   the name instead of on its baseline. */
dialog#placeGallery p#placeGalleryTitle {

    /* Keeps the first line at its own height instead of sharing the box with
       the hidden second one. */
    align-content: flex-start;
    align-items: center;
    display: flex;
    /* When name and number no longer fit side by side, the number drops into
       a second line, which the height below cuts off - so on a narrow screen
       the name keeps the room it needs. It depends on the actual name rather
       than on a fixed breakpoint. */
    flex-wrap: wrap;
    font-family: 'Lato', sans-serif;
    font-size: var(--footerHeadlineSize);
    font-weight: 100;
    gap: 10px;
    /* Exactly one line, see line-height. */
    height: 1.25em;
    overflow: hidden;
    /* Just high enough for the descenders: the name cuts off whatever leaves
       its line (overflow: hidden for the ellipsis), and at 1 the tail of a
       "g" or "p" would go missing. The extra leading lands in equal parts
       above and below the letters, so the headline stays in the middle of the
       header. */
    line-height: 1.25;
    margin: 0;
    /* Lets a long name give way on a narrow screen instead of pushing the
       close button out of the header. */
    min-width: 0;
    padding: 0;
}

/* Cut short rather than wrapped: the headline stays one line high. */
dialog#placeGallery span.placeGalleryPlace {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The number of pictures stays beside the name, smaller and quieter, as long
   as both fit - otherwise it is left out entirely rather than squeezed. */
dialog#placeGallery span.placeGalleryCount {

    color: #65696A;
    flex: none;
    font-size: var(--galleryCountSize);
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
}

/* Same idea as the close button of a popup: a plain × that becomes a circle
   in SIT green as soon as it is pointed at. */
dialog#placeGallery button#placeGalleryClose {

    align-items: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: #65696A;
    cursor: pointer;
    display: flex;
    flex: none;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

dialog#placeGallery button#placeGalleryClose:hover,
dialog#placeGallery button#placeGalleryClose:focus {

    box-shadow: inset 0 0 0 1px #779452;
    color: #779452;
    outline: none;
}

dialog#placeGallery button#placeGalleryClose svg {

    height: 20px;
    width: 20px;
}

dialog#placeGallery button#placeGalleryClose svg path {

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

/* Everything below the header: the room the thumbnails and the single
   picture share. */
dialog#placeGallery div#placeGalleryStage {

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    /* Lets the thumbnails scroll instead of stretching the dialog. */
    min-height: 0;
    /* Anchor of the single picture, which covers this area exactly. */
    position: relative;
}

/* The only part that scrolls when a place brings more thumbnails than fit. */
dialog#placeGallery div#placeGalleryBody {

    flex: 1 1 auto;
    /* Holds the focus while the gallery is open so that no thumbnail has to
       carry it. As an area rather than a control it draws no ring. */
    outline: none;
    /* A swipe that reaches the first or last row ends here instead of being
       handed on to the page, where it would pull the browser's reload. */
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: var(--galleryPadding);
    /* The scrollbar is hidden like on macOS and only shows while the area
       scrolls - place-gallery.js sets scrollbarVisible for that, and briefly
       on opening to hint that there is more. The scrollbar paints in the
       text colour of this area, which holds no text of its own: pseudo
       elements of a scrollbar cannot be transitioned themselves, but they
       repaint with an inherited colour, so fading that colour fades them. */
    color: transparent;
    transition: color var(--galleryFadeOut) ease-out;
}

dialog#placeGallery div#placeGalleryBody.scrollbarVisible {

    color: #65696A;
    /* Shows at once, fades out slowly. */
    transition-duration: var(--galleryFadeIn);
}

/* Two ways to the same scrollbar in SIT grey, and they rule each other out:
   as soon as scrollbar-color or scrollbar-width is set, Chrome and Safari
   ignore the pseudo elements below - and keep their overlay scrollbar, which
   only appears while scrolling. So the standard properties are left to the
   browsers that have no pseudo elements; they switch without fading. */
@supports not selector(::-webkit-scrollbar) {

    dialog#placeGallery div#placeGalleryBody {

        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }

    dialog#placeGallery div#placeGalleryBody.scrollbarVisible {

        scrollbar-color: #65696A rgba(101, 105, 106, 0.15);
    }
}

dialog#placeGallery div#placeGalleryBody::-webkit-scrollbar {

    width: var(--galleryScrollbarWidth);
}

dialog#placeGallery div#placeGalleryBody::-webkit-scrollbar-track {

    background-color: color-mix(in srgb, currentColor 15%, transparent);
    border-radius: calc(var(--galleryScrollbarWidth) / 2);
}

dialog#placeGallery div#placeGalleryBody::-webkit-scrollbar-thumb {

    background-color: currentColor;
    border-radius: calc(var(--galleryScrollbarWidth) / 2);
}

/* As many columns as fit, all of the same width. */
dialog#placeGallery div#placeGalleryGrid {

    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* One picture in full. It lies on top of the thumbnails and covers their
   whole area, padding included, right up to the edges of the gallery. */
dialog#placeGallery div#placeGalleryDetail {

    background-color: #F3F3F3;
    display: block;
    inset: 0;
    /* Holds the focus like the thumbnail area does, without a ring. */
    outline: none;
    position: absolute;
    /* Clicking through the pictures quickly counts as a double click, which
       would select the picture and lay the tint of a selection over it. */
    -webkit-user-select: none;
    user-select: none;
}

/* display above would otherwise win over the hidden attribute. */
dialog#placeGallery div#placeGalleryDetail[hidden] {

    display: none;
}

/* Fills the area in both directions. Whatever the proportions of the picture
   leave over is cut off in equal parts on opposite sides. The rounding of the
   lower corners comes from the gallery itself. */
dialog#placeGallery img#placeGalleryImage {

    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* The arrows to the picture before and after, halfway up on either side.
   Modelled on the close button: a plain sign in SIT grey that turns SIT green
   with a ring when pointed at. Unlike it they lie on a photo, so they bring a
   disc in the colour of the page along to stay readable. Hidden until
   place-gallery.js sets controlsVisible, which it does while the pointer
   moves across the picture - with the timing of the scrollbar. */
dialog#placeGallery button.placeGalleryStep {

    align-items: center;
    background-color: rgba(243, 243, 243, 0.85);
    border: none;
    border-radius: 50%;
    color: #65696A;
    cursor: pointer;
    display: flex;
    height: var(--galleryStepSize);
    justify-content: center;
    opacity: 0;
    padding: 0;
    /* An arrow that cannot be seen must not catch a click either. */
    pointer-events: none;
    position: absolute;
    top: calc(50% - var(--galleryStepSize) / 2);
    transition: opacity var(--galleryFadeOut) ease-out;
    width: var(--galleryStepSize);
}

dialog#placeGallery button#placeGalleryPrevious {

    left: var(--galleryPadding);
}

dialog#placeGallery button#placeGalleryNext {

    right: var(--galleryPadding);
}

/* Reached with the Tab key an arrow shows as well, pointer or not. */
dialog#placeGallery div#placeGalleryDetail.controlsVisible button.placeGalleryStep,
dialog#placeGallery button.placeGalleryStep:focus-visible {

    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--galleryFadeIn);
}

dialog#placeGallery button.placeGalleryStep:hover,
dialog#placeGallery button.placeGalleryStep:focus-visible {

    box-shadow: inset 0 0 0 1px #779452;
    color: #779452;
    outline: none;
}

/* A gallery of one picture has nowhere to step to. */
dialog#placeGallery div#placeGalleryDetail.singlePicture button.placeGalleryStep {

    display: none;
}

dialog#placeGallery button.placeGalleryStep svg {

    height: 20px;
    width: 20px;
}

dialog#placeGallery button.placeGalleryStep svg path {

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Frame of a thumbnail. The diagonal stripes show until the picture has
   loaded. The border is always there, transparent, so the highlight moves
   nothing. */
dialog#placeGallery button.placeGalleryThumbnail {

    aspect-ratio: 1;
    background-color: #E3EAEF;
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.6) 0 10px,
        rgba(255, 255, 255, 0) 10px 20px);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    /* Keeps the corners of the picture inside the rounding. */
    overflow: hidden;
    padding: 0;
    width: 100%;
}

/* The thumbnails are square already, cover only guards against one that is
   not. As a block it leaves no gap for descenders below it. */
dialog#placeGallery button.placeGalleryThumbnail img {

    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

dialog#placeGallery button.placeGalleryThumbnail:hover,
dialog#placeGallery button.placeGalleryThumbnail:focus {

    border-color: #0F9BC7;
    outline: none;
}