:root
{
    --slide-font-size: var(--post-font-size);
    --slide-column-gap: 5%;
    --slide-header-background-colour: var(--header-bars-background-colour);
    --slide-header-text-colour: white;
    --slide-header-font-size: calc(var(--slide-font-size)*1.75);
    --slide-header-line-height: calc(--slide-header-font-size * 2);
    --slide-header-height: calc(var(--slide-header-font-size) * 1.75);
    --slide-header-border-bottom-width: calc(0.1 * var(--slide-header-height));
    --slide-header-padding-left: 4%;
    --slide-header-padding-right: var(--slide-header-padding-left);

    --slide-navigation-path-font-size-multiplier: 0.75;
    --slide-navigation-path-font-size: calc(var(--slide-navigation-path-font-size-multiplier) * var(--slide-font-size));
    --slide-navigation-path-line-height: calc(1.5 * var(--slide-font-size));
    --slide-navigation-path-separator-margin-left-multiplier: 0.3;
    --slide-navigation-path-separator-margin-left: calc(var(--slide-navigation-path-separator-margin-left-multiplier) * var(--slide-font-size));
    --slide-navigation-path-separator-margin-right-multiplier: var(--slide-navigation-path-separator-margin-left-multiplier);
    --slide-navigation-path-separator-margin-right: var(--slide-navigation-path-separator-margin-left);

    --slide-body-line-height: calc(var(--slide-font-size) * 1.75);

    /* INPUTS */
    --slide-body-input-min-width: calc(0.6 * var(--slide-font-size));
    --slide-body-input-width: calc(0.6 * var(--slide-font-size));
    --slide-body-input-min-height: calc(0.6 * var(--slide-font-size));
    --slide-body-input-height: calc(0.6 * var(--slide-font-size));
    --slide-body-input-margin-top: calc(0.575 * var(--slide-font-size));
    --slide-body-input-margin-bottom: calc(0.575 * var(--slide-font-size));
    --slide-body-input-margin-right: calc(2 * var(--slide-font-size) / 3);
    --slide-body-input-margin-left: calc(3 * var(--slide-font-size) / 3);
    --slide-body-pre-input-group-margin-top: calc(0.5 * var(--slide-font-size));
    --slide-body-post-input-group-margin-top: calc(1.5 * var(--slide-font-size));

    /* TABLES */
    --slide-body-table-padding: calc(0.5 * var(--slide-font-size));
    --slide-body-table-padding-top: calc(0.5 * var(--slide-body-table-padding));
    --slide-body-table-padding-bottom: calc(0.5 * var(--slide-body-table-padding));
    --slide-body-table-inner-border-width: 1px;
    --slide-body-table-outer-border-width: 3px;
    --slide-body-table-chart-menu-padding: calc(var(--slide-font-size) * 0.25);
    --slide-body-table-chart-menu-width: calc(var(--slide-font-size)*1.25);
    --slide-body-table-chart-menu-height: var(--slide-body-table-chart-menu-width);

    /* LISTS */
    --slide-body-list-bullet-colour: var(--accent-colour);
    --slide-body-list-min-width: calc(0.33 * var(--slide-font-size));
    --slide-body-list-width: calc(0.33 * var(--slide-font-size));
    --slide-body-list-min-height: calc(0.33 * var(--slide-font-size));
    --slide-body-list-height: calc(0.33 * var(--slide-font-size));
    --slide-body-list-margin-left: calc(3*var(--slide-font-size)/3);
    --slide-body-list-margin-right: calc(3*var(--slide-font-size)/3);
    --slide-body-list-margin-top: calc(2*var(--slide-font-size)/3);
    --slide-body-list-margin-bottom: calc(2*var(--slide-font-size)/3);

    /* SOURCE CODE */
    --slide-source-code-line-height: calc(var(--slide-font-size) * 1.5);
    --slide-source-code-tool-icon-width: var(--slide-font-size);
    --slide-source-code-tool-icon-height: var(--source-code-tool-icon-width);
    --slide-source-code-tool-icon-margin-right: calc(var(--slide-font-size) / 2);

    --slide-footer-background-colour: var(--footer-background-colour);
    --slide-footer-text-colour: var(--footer-paragraph-text-colour);

    --slide-border-radius: 2px;
    --slide-aspect-ratio: 16/9;

    --slide-box-shadow-width: 8px;

    --thumbnail-ratio: 0.2;
    --thumbnail-ratio-percent: 20%;

    --slideshow-column-width: var(--webpage-column-width);
}

#PostContent.Slideshow
{
    padding-top: 20px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: row;
    font-size: var(--slide-font-size);
    width: var(--slideshow-column-width);
    margin-left: auto;
    margin-right: auto;
}

#PostContent.Slideshow #PostHeader
{
    padding-bottom: 0px;
}

#PostContent.Slideshow #SlideSet
{
    aspect-ratio: var(--slide-aspect-ratio);
    max-height: 100%;
    min-height: 10%;
    padding-bottom: 0px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    flex-basis: calc(1 / (1 + var(--thumbnail-ratio)) * 100%);
    flex-grow: 0;
    flex-shrink: 0;
    padding-left: calc(var(--slide-column-gap) * 1 / (1 + var(--thumbnail-ratio)));
}

#PostContent.Slideshow #SlideSet:fullscreen
{
    padding-left: 0px;
}

#PostContent.Slideshow:fullscreen
{
    padding: 0px;
    border: none;
}

#PostContent.Slideshow #SlideToolbar
{
    background-color: inherit;
}

#SlideFontSizeSlider
{
    display: none;
}

#PostContent.Slideshow #SlideFontSizeSlider
{
    display: block;
    position: absolute;
    top: 0%;
    right: 0px;
}

#PostContent.Slideshow .Slide
{
    position: relative;
    background-color: var(--background-colour);
    aspect-ratio: var(--slide-aspect-ratio);
    max-height: 100%;
    border: 1px solid var(--section-border-colour);
    border-radius: var(--slide-border-radius);
    display: flex;
    flex-direction: column;
    box-shadow: 0px var(--slide-box-shadow-width) var(--slide-box-shadow-width) var(--section-border-colour);
    margin: auto;
}

#PostContent.Slideshow #SlideSet:fullscreen .Slide
{
    border: none;
    box-shadow: none;
}

#PostContent.Slideshow .Slide .Body h1
{
    text-align: left;
    font-size: calc(var(--slide-font-size) * 2.0);
    line-height: calc(var(--slide-font-size) * 2.0);
}

#PostContent.Slideshow .Slide .Body h1:not(.PostH1)
{
    margin-top: calc(2*var(--slide-font-size));
    margin-bottom: var(--slide-font-size);
}

#PostContent.Slideshow .Slide header
{
    flex-grow: 0;
    background-color: var(--slide-header-background-colour);
    color: var(--slide-header-text-colour);
    padding-top: 1%;
    padding-left: var(--slide-header-padding-left);
    padding-right: var(--slide-header-padding-right);
    vertical-align: middle;
    min-height: var(--slide-header-height);
    max-height: var(--slide-header-height);
    flex-basis: 0.15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--slide-header-font-size);
    line-height: var(--slide-header-line-height);
    border-radius: var(--slide-border-radius) var(--slide-border-radius) 0px 0px;
    font-weight: bold;
    border-bottom: var(--slide-header-border-bottom-width) solid var(--accent-colour);
}

#PostContent.Slideshow .Slide .NavigationPath
{
    padding-left: var(--slide-header-padding-left);
    line-height: var(--slide-navigation-path-line-height);
    height: var(--slide-navigation-path-line-height);
    opacity: 0.5;
}

#PostContent.Slideshow .Slide .NavigationPath:hover
{
    opacity: 1;
}

#PostContent.Slideshow .Slide .NavigationPath p
{
    display: inline-block;
    margin-left: var(--slide-navigation-path-separator-margin-left);
    margin-right: var(--slide-navigation-path-separator-margin-right);
    line-height: var(--slide-navigation-path-line-height);
}

#PostContent.Slideshow .Slide .NavigationPath button
{
    outline: none;
    background: none;
    border: none;
    padding: 0px;
    color: var(--text-colour);
    font-family: var(--post-font-family);
}

#PostContent.Slideshow .Slide .NavigationPath p, #PostContent.Slideshow .Slide .NavigationPath button
{
    font-size: var(--slide-navigation-path-font-size);
}

#PostContent.Slideshow .Slide .NavigationPath button:hover
{
    color: var(--accent-colour);
}

#PostContent.Slideshow .Slide .Body
{
    flex-grow: 1;
    padding: calc(var(--slide-font-size) * 2);
    height: 80%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 2%;
}

#PostContent.Slideshow .Slide table thead th, #PostContent.Slideshow .Slide table td
{
    padding: var(--slide-body-table-padding);
    padding-top: var(--slide-body-table-padding-top);
    padding-bottom: var(--slide-body-table-padding-bottom);
    line-height: calc(var(--slide-font-size) * var(--thumbnail-ratio));
    border-width: calc(1px * var(--thumbnail-ratio));
}

#PostContent.Slideshow .Slide .Body table tbody tr
{
    border-bottom: var(--slide-body-table-inner-border-width) solid var(--table-row-border-colour);
}

#PostContent.Slideshow .Slide .Body input
{
    min-width: var(--slide-body-input-min-width);
    width: var(--slide-body-input-width);
    min-height: var(--slide-body-input-min-height);
    height: var(--slide-body-input-height);
    margin-top: var(--slide-body-input-margin-top);
    margin-bottom: var(--slide-body-input-margin-bottom);
    margin-right: var(--slide-body-input-margin-right);
    margin-left: var(--slide-body-input-margin-left);
}

#PostContent.Slideshow .Slide .Body :not(.RadioButtonLine) + .RadioButtonLine, #PostContent.Slideshow .Slide .Body :not(.CheckboxLine) + .CheckboxLine
{
    margin-top: var(--slide-body-pre-input-group-margin-top);
}

#PostContent.Slideshow .Slide .Body .RadioButtonLine + *:not(.RadioButtonLine), #PostContent.Slideshow .Slide .Body .CheckboxLine + *:not(.CheckboxLine)
{
    margin-top: var(--slide-body-post-input-group-margin-top);
}

#PostContent.Slideshow .Slide .Body *
{
    font-size: var(--slide-font-size);
}

#PostContent.Slideshow .Slide .Body table
{
    display: inline-block;
    margin: auto;
    min-width: auto;
}

#PostContent.Slideshow .Slide .Body *:not(.SourceCodeBlock *, h1, .ChartMenu *)
{
    line-height: var(--slide-body-line-height); 
}

#PostContent.Slideshow .Slide .Body .SourceCodeBlock *
{
    line-height: var(--slide-source-code-line-height);
}

#PostContent.Slideshow .Slide .Body .CodeLeftBorder
{
    padding-left: calc(1.0 * var(--slide-font-size));
    padding-right: calc(0.5 * var(--slide-font-size));
}

#PostContent.Slideshow .Slide .FooterContainer
{
    line-height: var(--slide-font-size);
}

#PostContent.Slideshow .Slide .Body .SourceCodeTools
{
    margin-top: 0px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#PostContent.Slideshow .Slide .Body .SourceCodeTools button
{
    padding-top: 0px;
    padding-bottom: 0px;
}

#PostContent.Slideshow .Slide .Body .SourceCodeTools svg
{
    width: var(--slide-source-code-tool-icon-width);
    height: var(--slide-source-code-tool-icon-height);
    margin-right: var(--slide-source-code-tool-icon-margin-right);
}

#PostContent.Slideshow .Slide .Body li
{
    padding-left: calc(5 / 3 * var(--slide-font-size));
    text-indent: calc(-5 / 3 * var(--slide-font-size));
}

#PostContent.Slideshow .Slide .Body li *
{
    line-height: calc(1.75 * var(--slide-font-size));
}

#PostContent.Slideshow .Slide .Body li::before
{
    min-width: var(--slide-body-list-min-width);
    width: var(--slide-body-list-width);
    min-height: var(--slide-body-list-min-height);
    height: var(--slide-body-list-height);
    margin-left: var(--slide-body-list-margin-left);
    margin-right: var(--slide-body-list-margin-right);
    margin-top: var(--slide-body-list-margin-top);
    margin-bottom: var(--slide-body-list-margin-bottom);
}

#PostContent.Slideshow .Slide footer
{
    flex-grow: 0;
    background-color: var(--slide-footer-background-colour);
    color: var(--slide-footer-text-colour);
    margin: 1%;
    margin-top: 0px;
    margin-bottom: .5%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0px 0px var(--slide-border-radius) var(--slide-border-radius);
}

#PostContent.Slideshow .Slide footer .FooterContainer
{
    display: flex;
    flex-direction: row;
    flex-grow: 0;
}

#PostContent.Slideshow .Slide footer .LeftComponent
{
    text-align: left;
    flex-basis: 33%;
    flex-grow: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#PostContent.Slideshow :not(#SlideshowThumbnails) .Slide footer .LeftComponent:hover
{
    opacity: 1;
}

#PostContent.Slideshow .Slide footer .LeftComponent a
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#PostContent.Slideshow .Slide footer .MiddleComponent
{
    text-align: center;
    flex-grow: 0;
}

#PostContent.Slideshow .Slide footer .RightComponent
{
    text-align: right;
    flex-basis: 33%;
    flex-grow: 0;
}

#PostContent.Slideshow .Slide footer p
{
    font-size: calc(0.75 * var(--slide-font-size));
    line-height: calc(0.75 * var(--slide-font-size));
}

#PostContent.Slideshow .Slide footer p img
{
    width: calc(0.75 * var(--slide-font-size));
    height: calc(0.75 * var(--slide-font-size));
    margin-right: calc(0.1 * var(--slide-font-size));
}

#PostContent.Slideshow .Slide footer p a
{
    color: inherit;
}

#PostContent.Slideshow .Slide p
{
    margin: 0px;
}

#PostContent.Slideshow #ChartWindow
{
    border: none;
}

#PostContent.Slideshow table thead th .ChartMenu
{
    top: calc(var(--slide-font-size) * -1.75);
    border-radius: calc(var(--slide-font-size));
    padding: var(--slide-body-table-chart-menu-padding);
}

#PostContent.Slideshow .ButtonGroup img
{
    width: var(--slide-font-size);
    height: var(--slide-font-size);
}

#PostContent.Slideshow #SlideshowThumbnails
{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
    flex-basis: calc(var(--thumbnail-ratio) / (1 + var(--thumbnail-ratio)) * 100%);
    flex-grow: 0;
    flex-shrink: 0;
    padding-bottom: 10%;
    padding-right: calc(var(--slide-column-gap) * var(--thumbnail-ratio) / (1 + var(--thumbnail-ratio)));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide
{
    margin-top: 20px;
    box-shadow: 0px calc(var(--slide-box-shadow-width) * var(--thumbnail-ratio)) calc(var(--slide-box-shadow-width) * var(--thumbnail-ratio)) var(--section-border-colour);
    border-width: calc(1px * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide:hover
{
    cursor: pointer;
}

#PostContent.Slideshow #SlideshowThumbnails .Slide:hover header, #PostContent.Slideshow #SlideshowThumbnails .Slide.SelectedSlide header
{
    background-color: var(--accent-colour);
}

#PostContent.Slideshow #SlideshowThumbnails .Slide:first-child
{
    margin-top: 0px;
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body
{
    padding: calc(var(--slide-font-size) * 2 * var(--thumbnail-ratio));
    overflow-y: hidden;
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body h1
{
    font-size: calc(var(--slide-font-size) * 2.0 * var(--thumbnail-ratio));
}

#PostContent.Slideshow .Slide .Body h1:not(.PostH1)
{
    margin-top: calc(2*var(--slide-font-size) * var(--thumbnail-ratio));
    margin-bottom: calc(var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide header
{
    font-size: calc(var(--slide-header-font-size) * var(--thumbnail-ratio));
    line-height: calc(var(--slide-header-line-height) * var(--thumbnail-ratio));
    border-bottom-width: calc(var(--slide-header-border-bottom-width) * var(--thumbnail-ratio));
    min-height: calc(var(--slide-header-height) * var(--thumbnail-ratio));
    max-height: calc(var(--slide-header-height) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .NavigationPath, #PostContent.Slideshow #SlideshowThumbnails .Slide .NavigationPath p
{
    line-height: calc(var(--slide-navigation-path-line-height) * var(--thumbnail-ratio));
    height: calc(var(--slide-navigation-path-line-height) * var(--thumbnail-ratio));
    font-size: calc(var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .NavigationPath p, #PostContent.Slideshow #SlideshowThumbnails .Slide .NavigationPath button
{
    font-size: calc(var(--slide-navigation-path-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .NavigationPath p
{
    margin-left: calc(var(--slide-navigation-path-separator-margin-left) * var(--thumbnail-ratio));
    margin-right: calc(var(--slide-navigation-path-separator-margin-right) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body *
{
    font-size: calc(var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .InlinedCode
{
    border-radius: calc(var(--inlined-code-border-radius) * var(--thumbnail-ratio));
    padding: calc(var(--inlined-code-padding) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide table thead th, #PostContent.Slideshow #SlideshowThumbnails .Slide table td
{
    padding: calc(var(--slide-body-table-padding) * var(--thumbnail-ratio));
    padding-top: calc(var(--slide-body-table-padding-top) * var(--thumbnail-ratio));
    padding-bottom: calc(var(--slide-body-table-padding-bottom) * var(--thumbnail-ratio));
    line-height: calc(var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails table thead th .ChartMenu
{
    padding: calc(var(--slide-body-table-chart-menu-padding) * var(--thumbnail-ratio));
    column-gap: calc(var(--post-font-size) * 0.75 * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails table thead th .ChartMenu button
{
    padding-left: 0px;
    padding-right: 0px;
}

#PostContent.Slideshow #SlideshowThumbnails .TableContainer .ChartMenuRow th
{
    padding-top: calc(var(--chart-menu-row-padding-top) * var(--thumbnail-ratio));
    padding-bottom: calc(var(--chart-menu-row-padding-bottom) * var(--thumbnail-ratio));
    border-radius: calc(var(--chart-menu-row-border-radius) * var(--thumbnail-ratio)) calc(var(--chart-menu-row-border-radius) * var(--thumbnail-ratio)) 0px 0px;
}

#PostContent.Slideshow #SlideshowThumbnails .TableContainer .ChartMenuRow th button svg
{
    width: calc(var(--post-font-size) * var(--thumbnail-ratio));
    height: calc(var(--post-font-size) * var(--thumbnail-ratio));
    margin-right: calc(var(--post-font-size) * 0.25 * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body table tbody tr
{
    border-bottom-width: calc(var(--slide-body-table-inner-border-width) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body table thead, #PostContent.Slideshow #SlideshowThumbnails .Slide .Body table tbody tr:last-of-type
{
    border-bottom-width: calc(var(--slide-body-table-outer-border-width) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body input
{
    min-width: calc(var(--slide-body-input-min-width) * var(--thumbnail-ratio));
    width: calc(var(--slide-body-input-width) * var(--thumbnail-ratio));
    min-height: calc(var(--slide-body-input-min-height) * var(--thumbnail-ratio));
    height: calc(var(--slide-body-input-height) * var(--thumbnail-ratio));
    margin-top: calc(var(--slide-body-input-margin-top) * var(--thumbnail-ratio));
    margin-bottom: calc(var(--slide-body-input-margin-bottom) * var(--thumbnail-ratio));
    margin-right: calc(var(--slide-body-input-margin-right) * var(--thumbnail-ratio));
    margin-left: calc(var(--slide-body-input-margin-left) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body :not(.RadioButtonLine) + .RadioButtonLine, #PostContent.Slideshow #SlideshowThumbnails .Slide .Body :not(.CheckboxLine) + .CheckboxLine
{
    margin-top: calc(var(--slide-body-pre-input-group-margin-top) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .RadioButtonLine + *:not(.RadioButtonLine), #PostContent.Slideshow #SlideshowThumbnails .Slide .Body .CheckboxLine + *:not(.CheckboxLine)
{
    margin-top: calc(var(--slide-body-post-input-group-margin-top) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .SourceCodeTools
{
    border-radius: calc(var(--source-code-tools-border-radius) * var(--thumbnail-ratio)) calc(var(--source-code-tools-border-radius) * var(--thumbnail-ratio)) 0px 0px;
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .SourceCodeTools button svg
{
    width: calc(var(--slide-source-code-tool-icon-width) * var(--thumbnail-ratio));
    height: calc(var(--slide-source-code-tool-icon-height) * var(--thumbnail-ratio));
    margin-right: calc(var(--slide-source-code-tool-icon-margin-right) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body *:not(.SourceCodeBlock *, h1, .ChartMenu *)
{
    line-height: calc(var(--slide-body-line-height) * var(--thumbnail-ratio)); 
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body table thead .ChartMenu button img
{
    width: calc(var(--slide-body-table-chart-menu-width) * var(--thumbnail-ratio));
    height: calc(var(--slide-body-table-chart-menu-height) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .SourceCodeBlock *
{
    line-height: calc(var(--slide-source-code-line-height) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body li
{
    padding-left: calc(5 / 3 * var(--slide-font-size) * var(--thumbnail-ratio));
    text-indent: calc(-5 / 3 * var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body li *
{
    line-height: calc(1.75 * var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body li::before
{
    min-width: calc(var(--slide-body-list-min-width) * var(--thumbnail-ratio));
    width: calc(var(--slide-body-list-width) * var(--thumbnail-ratio));
    min-height: calc(var(--slide-body-list-min-height) * var(--thumbnail-ratio));
    height: calc(var(--slide-body-list-height) * var(--thumbnail-ratio));
    margin-left: calc(var(--slide-body-list-margin-left) * var(--thumbnail-ratio));
    margin-right: calc(var(--slide-body-list-margin-right) * var(--thumbnail-ratio));
    margin-top: calc(var(--slide-body-list-margin-top) * var(--thumbnail-ratio));
    margin-bottom: calc(var(--slide-body-list-margin-bottom) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .RadioButtonBlock
{
    margin-bottom: calc(var(--radiobutton-block-margin-bottom) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .CheckboxLine input, #PostContent.Slideshow #SlideshowThumbnails .Slide .RadioButtonLine input,  #PostContent.Slideshow #SlideshowThumbnails .Slide li::before
{
    border-width: calc(var(--input-border-width) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide footer p
{
    font-size: calc(0.75 * var(--slide-font-size) * var(--thumbnail-ratio));
    line-height: calc(0.75 * var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide footer p img
{
    width: calc(0.75 * var(--slide-font-size) * var(--thumbnail-ratio));
    height: calc(0.75 * var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body table tbody tr:hover
{
    background-color: var(--background-colour);
    color: var(--text-colour);
}

#PostContent.Slideshow #SlideshowThumbnails .MultiVersionSection
{
    margin-top: calc(var(--post-font-size) * var(--thumbnail-ratio));
    margin-bottom: calc(var(--post-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .MultiVersionSectionMenu button
{
    padding: calc(var(--post-font-size) / 2 * var(--thumbnail-ratio));
    padding-top: calc(var(--post-font-size) / 4 * var(--thumbnail-ratio));
    padding-bottom: calc(var(--post-font-size) / 4 * var(--thumbnail-ratio));
    border-radius: calc(2px * var(--thumbnail-ratio)) calc(2px * var(--thumbnail-ratio)) 0px 0px;
}

#PostContent.Slideshow #SlideshowThumbnails .MultiVersionSectionEntries
{
    border-width: calc(1px * var(--thumbnail-ratio));
    border-top-width: calc(4px * var(--thumbnail-ratio));
    border-bottom-width: calc(4px * var(--thumbnail-ratio));
    border-radius: 0px 0px calc(var(--post-font-size) / 4 * var(--thumbnail-ratio)) calc(var(--post-font-size) / 4 * var(--thumbnail-ratio));
    padding: calc(var(--post-font-size) * var(--thumbnail-ratio));
}

/* SOURCE CODE */
#PostContent.Slideshow #SlideshowThumbnails .InlinedCode
{
    border-width: calc(1px * var(--thumbnail-ratio));
    border-radius: calc(0.5 * var(--post-font-size) * var(--thumbnail-ratio));
    padding: calc(0.5 * var(--post-font-size) * var(--thumbnail-ratio));
    padding-top: calc(0.25 * var(--post-font-size) * var(--thumbnail-ratio));
    padding-bottom: calc(0.25 * var(--post-font-size) * var(--thumbnail-ratio));
    margin-right: calc(0.25 * var(--post-font-size) * var(--thumbnail-ratio));
    margin-left: calc(0.25 * var(--post-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .SourceCodeBlock
{
    border-width: calc(1px * var(--thumbnail-ratio));
    margin-bottom: calc(20px * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .Slide .Body .CodeLeftBorder
{
    padding-left: calc(1.0 * var(--slide-font-size) * var(--thumbnail-ratio));
    padding-right: calc(0.5 * var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .CodeLine:hover .CodeLeftBorder::after
{
    border-width: calc(5px * var(--thumbnail-ratio));
}
/* END OF SOURCE CODE */

#PostContent.Slideshow .Slide .Body dt .DescriptionTermIcon
{
    line-height: 0px;
    width: var(--slide-font-size);
    height: var(--slide-font-size);
    margin-right: calc(var(--slide-font-size) * 2 / 3);
}

#PostContent.Slideshow #SlideshowThumbnails dt .DescriptionTermIcon
{
    width: calc(var(--slide-font-size) * var(--thumbnail-ratio));
    height: calc(var(--slide-font-size) * var(--thumbnail-ratio));
    margin-right: calc(var(--slide-font-size) * 2 / 3 * var(--thumbnail-ratio));
}

#PostContent dt:not(:first-child)
{
    margin-top: calc(var(--slide-font-size) * var(--thumbnail-ratio));
}

#PostContent.Slideshow dd
{
    margin-left: calc(5 * var(--slide-font-size) / 3);
}

#PostContent.Slideshow #SlideshowThumbnails dd
{
    margin-left: calc(5 * var(--slide-font-size) / 3 * var(--thumbnail-ratio));
}

#PostContent.Slideshow #SlideshowThumbnails .LinkToButton
{
    padding: calc(var(--linktobutton-padding) * var(--thumbnail-ratio));
    border-radius: calc(2px * var(--thumbnail-ratio));
}

.LinkToButton + .LinkToButton
{
    margin-left: calc(var(--post-font-size) * var(--thumbnail-ratio));
}

/* MOBILE */
@media only screen and (max-width: 768px)
{
    #PostContent.Slideshow
    {
        width: 100%;
    }

    #PostContent.Slideshow #SlideshowThumbnails
    {
        display: none;
    }

    #PostContent.Slideshow #SlideSet
    {
        width: 100%;
        padding-left: 0px;
        flex-grow: 1;
        margin: 0px;
    }
}
/* END OF MOBILE */