:root {
    --main-color: black;
    --color-text: black;
    --color-background: white;
    --color-hover: lightgrey;
    --button-background: white;
    --button-display: block;
    --button-high: 30pt;
    --button-radius: 5px;
    --navigation-display: block;
    --font-size: 100%;
    --adjusted-width: 800;
    --size-icon: 8px;
    --size-h1: 20pt;
    --size-h2: 16x;
    --size-h3: 12px;
    --size-p: 10px;
    --size-c: 8px;
    --pt8: 8px;
    --pt10: 10px;
    --pt12: 12px;
    --pt14: 14px;
    --pt16: 16px;
    --pt18: 18px;
    --pt20: 20px;
    --pt24: 24px;
    --width-navigation: 180px;
    --width-main: 180px;
    --width-icon: 180px;
    --border: 2px solid LightGray;
    --header-height: 30px;
    --header-height-pad: 40px;
    --header-position: 0px;
    --left-offset: 0px;
    --right-offset: 0px;
    --left-wide: 0px;
    --right-wide: 0px;
    --main-pad: 20px;
    --window-height: 30px;
    --form-labels: 100%;
    --form-input: 100%;
    --hamburger-display: inline;
    --end-kludge: 50px;
}

/* Font, decoration, etc. */


body {
    /*height: 100%;*/
    margin: 0;
    color: var(--color-text);
    background: var(--color-background);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--size-p);
/*    font-size: 1em;
    font: -apple-system-body;*/
}



#OpenNav {
    float: left;
    display: var(--hamburger-display);

}

#CloseNav {
    float: left;
    display: var(--hamburger-display);
    float: right;
    height: var(--button-high);
    margin: var(--button-radius);
    align-content: center;
}

/* Styling for Navigation buttons */
.Button {
    justify-content: left;
    display: flex;
    background-color: var(--button-background);
    color: white;
    text-decoration: none;
    border-radius: var(--button-radius);
    font-size: var(--size-p);
    text-align: left;
    align-items: center;
    height: var(--button-high);
    margin: var(--button-radius);

}

    .Button:hover {
        background-color: var(--color-hover);
    }

.ButtonDummy {
    justify-content: left;
    display: flex;
    background-color: var(--button-background);
    color: white;
    text-decoration: none;
    border-radius: var(--button-radius);
    font-size: var(--size-p);
    text-align: left;
    align-items: center;
    height: var(--button-high);
    margin: var(--button-radius);
}

.ButtonIcon {
    width: var(--pt14);
}

.ButtonText {
    display: var(--button-display);
    font-size: var(--size-h3);
}

.ButtonClose {
    font-size: var(--size-h1);
    float: right;
}

.Desktop .ButtonClose {
    display: none;
}

.ButtonAnchor {
    display: flex;
    align-items: center;
    height: var(--pt14);
    width: 100%;
    text-decoration: none;
}

    .ButtonAnchor:visited {
        text-decoration: none;
    }

    .ButtonAnchor:link {
        text-decoration: none;
    }

.ButtonDummyAnchor {
    display: flex;
    align-items: center;
    height: var(--pt10);
    width: 100%;
    text-decoration: none;
    color: var(--color-text);
}

#Main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    font-size: var(--size-p);
}

.Settings .closeNav {
    display: none;
    
}


#Navigation {
    display: var(--navigation-display);
    /*height: 100%;*/
    position: fixed;
    z-index: 2;
    top: 0;
    left: var(--left-offset);
    width: var(--left-wide);
    /*overflow-x: hidden;*/
    padding: var(--main-pad);
    /*position: sticky;*/
    background-color: white;
}


#SupportNav {
    display: var(--navigation-display);
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: var(--left-offset);
    width: var(--left-wide);
    /*overflow-x: hidden;*/
    border-right: var(--border);
    padding: var(--main-pad);
    position: sticky;
}

#Heading {
    font-weight: bold;
    position: fixed;
    padding: var(--main-pad);
    left: var(--right-offset);
    width: var(--right-wide);
    text-align: center;
    align-content: center;
    font-size: var(--size-h2);
    height: var(--header-height);
    border-bottom: var(--border);
    padding-top: 0;
    padding-bottom: 0;
    border-left: var(--border);
    z-index: 1;
    background-color: white;
}


 #Main {
    position: fixed;
    margin-left: var(--right-offset);
    width: var(--right-wide);
    padding: var(--main-pad);
    top: var(--header-height);
    height: 100vh;
    overflow-y: scroll;
    flex-grow: 1;
    border-left: var(--border);
}



img.Avatar {
    height: var(--size-icon);
    width: var(--size-icon);
}


.InputLabel {
    font-weight: normal;
}


.Rule {
    height: 2pt;
}


.Author {
    display: inline;
    font-weight: bold;
    align-content: center;
}

/* Grid to display a Place entry */


.Entries > .start {
    /*background-color: red;*/
    /*height: 50px;*/
}
.Entries > .end {
    background-color: white;
    height: var(--end-kludge);
}
.PlaceReference {
    display: grid;
    grid-template-areas:
        "Divider Divider"
        "Avatar Banner"
        "Blank Title"
        "Blank Body";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid LightGray;
}


/*.Entries > .PlaceReference::before {
    grid-area: Divider;
    position: relative;
    content: '';
    top: 0;
    display: block;
    left: 5%;
    width: 90%;*/ /* Adjust the width for partial effect */
    /*height: 2px;*/ /* Thickness of the border */
    /*background-color: LightGray;*/ /* Border color */
    /*margin-bottom: 10px;
}*/


    .PlaceReference > section.Title {
        display:block;
        grid-area: Title;
        font-size: var(--size-h3);
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 5px;
    }


    .PlaceReference div.Heading {
        display: inline;
        font-weight: bold;
    }

    .PlaceReference div.DNS {
        display: none;
    }


    .PlaceReference > section.Avatar {
        grid-area: Avatar;
        width: var(--size-icon);
    }


    .PlaceReference > section.Banner {
        grid-area: Banner;
        height: 200px;
        max-width: 100%;
    }


    .PlaceReference img.Banner {
        height: 200px;
        max-width: 100%;
    }


    .PlaceReference > section.Body {
        grid-area: Body;
    }



.PostSummary {
    display: grid;
    grid-template-areas:
        "Avatar Author"
        "Avatar Body"
        "Blank Body";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
    border-bottom: 2px solid LightGray;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .PostSummary > section.Avatar {
        grid-area: Avatar;
    }

    .PostSummary div.Author {
        grid-area: Author;
        display: inline;
        font-weight: bold;
        align-content: center;
    }

    .PostSummary div.Heading {
        display: inline;
        font-weight: bold;
    }

    .PostSummary > section.Body {
        grid-area: Body;

    }

.sectionLink {
    text-decoration: none;
}

.PostTitle {
    font-size: 18px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 5px;
}

.PostFull {
    display: grid;
    grid-template-areas:
        "Avatar Author"
        "Avatar Title"
        "Blank Summary"
        "Blank Body"
        "Blank Responses";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
    border-bottom: 1px solid black;
}

    .PostFull > section.Avatar {
        grid-area: Avatar;
        align-self: start;
    }

    .PostFull div.Author {
        display: inline;
        font-weight: bold;
        align-self: start;
    }

    .PostFull div.Heading {
        display: inline;
        font-weight: bold;
        align-self: start;
    }

    .PostFull > section.Summary {
        grid-area: Summary;
        align-self: start;
    }

    .PostFull > section.Body {
        grid-area: Body;
        align-self: start;
    }

    .PostFull > section.Responses {
        grid-area: Responses;
        align-self: start;
        display: flex;
        width: 100%;
    }

    .PostFull div.ButtonText {
        display: none;
    }

.CommentFull {
    display: grid;
    grid-template-areas:
        "Avatar Author"
        "Avatar Title"
        "Blank Body"
        "Blank Responses";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
    border-bottom: 1px solid black;
}

    .CommentFull > section.Avatar {
        grid-area: Avatar;
    }

    .CommentFull div.Author {
        display: inline;
        font-weight: bold;
    }

    .CommentFull div.Heading {
        display: inline;
        font-weight: bold;
    }

    .CommentFull > section.Body {
        grid-area: Body;
    }

    .CommentFull > section.Responses {
        grid-area: Responses;
        align-self: start;
        display: flex;
        width: 100%;
    }

    .CommentFull div.ButtonText {
        display: none;
    }

form {
    text-align: left;
    align-content:end;
    overflow-y: auto;
}

.InputLabel {
    display: inline-block;
    width: var(--form-labels);
}

.InputForm {


    display: inline-block;
    width: var(--form-input);
}

#richtext {
    width: 100%;
}