html, body {
    width      : 100%;
    height     : 100%;
    min-height : 100%;
}

body {
    position         : relative;
    padding          : 0;
    margin           : 0;
    background-color : #000;
    font-family      : Verdana,Arial;
    font-size        : 100%;
    overflow         : hidden;
}

img { 
    width          : 100%; 
    vertical-align : top;
}

#pageGrid {
    width                 : 100%;
    height                : 100%;
    min-height            : 100%;
    margin                : auto;
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-rows    : var(--header-height) var(--body-padding) auto var(--body-padding) var(--footer-height);
}

#pageHeader {
    width                 : 100%;
    height                : var(--header-height);
    line-height           : var(--header-height);
    color                 : var(--header-color);
    background-color      : var(--header-background);
    font-size             : calc(0.50 * var(--header-height));
    font-weight           : bold;
    display               : grid;
    grid-template-columns : var(--header-height) auto var(--header-height);
}

#pageHeader label {
    text-align : center;
}

#pageFooter {
    width                 : 100%;
    height                : var(--footer-height);
    line-height           : var(--footer-height);
    background-color      : var(--footer-background);
    color                 : var(--footer-color);
    font-size             : calc(0.50 * var(--footer-height));
    font-weight           : bold;
    display               : grid;
    grid-template-columns : auto;
}

#pageFooter label {
    text-align : center;
}

#pageBody {
    width            : 100%;
    padding          : 0 var(--body-padding);
    background-color : var(--body-background);
    transition       : 0.5s;
}

.pageFiller {
    background-color : var(--body-background);
    transition       : 0.5s;
}

#mainMenu {
    position         : fixed;
    top              : var(--header-height);
    right            : 0;
    width            : 0;
    height           : calc(100% - var(--header-height) - var(--footer-height));
    padding-top      : var(--menu-padding);
    background-image : var(--menu-background-image);
    background-color : var(--menu-background-color);
    overflow-x       : hidden;
    transition       : 0.5s;
    z-index          : 1;
}

#mainMenu a {
    display         : block;
    text-decoration : none;
    font-size       : 120%;
    padding         : calc(0.33 * var(--menu-padding)) calc(0.33 * var(--menu-padding)) calc(0.33 * var(--menu-padding)) var(--menu-padding);
    color           : var(--menu-color);
    transition      : 0.5s;
}

#mainMenu a:hover {
    color : var(--menu-color-selected);
}

.button {
    cursor:pointer;
}

.left { 
    text-align:left; 
}

.center { 
    text-align:center; 
}

.right { 
    text-align:right; 
}

.vertical-container { 
    display                 : -webkit-flex; 
    display                 : flex; 
    -webkit-align-items     : center; 
    align-items             : center; 
    -webkit-justify-content : center; 
    justify-content         : center; 
}