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

body {
    position         : relative;
    padding          : 0;
    margin           : 0;
    background-color : var(--body-background);
    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(--grid-header-height) auto 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;
}

#leftMenu {
    position         : fixed;
    top              : var(--header-height);
    left             : 0;
    width            : var(--left-menu-width);
    height           : 0;
    background-color : var(--menu-background-color);
    box-shadow       : 0 4px 8px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.19);
    box-shadow       : 4px 4px 8px #aaa;
    overflow         : hidden;
    transition       : 0.3s;
    z-index          : 1;
}

.menuGroup, .menuItem {
    display         : block;
    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);
}

.menuGroup {
    color            : var(--menu-group-color);
    background-color : var(--menu-group-background-color);
    font-weight      : bold;
    cursor           : none;
}

.menuItem {
    color            : var(--menu-item-color);
    background-color : var(--menu-item-background-color);
    font-weight      : normal;
    cursor           : pointer;
	border-bottom    : 1px solid var(--menu-group-background-color);
}

.menuItem:hover {
    color : var(--menu-item-color-selected);
}

.menuFiller {
    color            : var(--menu-item-color);
    background-color : var(--menu-item-background-color);
    cursor           : none;
}

.button {
    cursor : pointer;
}

.left { 
    text-align : left; 
}

.center { 
    text-align : center; 
}

.right { 
    text-align : right; 
}

.bold {
    font-weight : bold;
}

.italic {
    font-style : italic;
}

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