* {
    /*outline: 1px solid red;*/
}

/* Global settings */

:root {
    --color-text: black;
    --color-background: white;
    --color-hover: lightgrey;
    --button-background: white;
}

/*:root {
    --color-text: white;
    --color-background: black;
    --color-hover: grey;
}
*/

/*
    Need to work out how to change the color of the inline icons.

    https://www.getfishtank.com/insights/change-svg-colors-using-css-filters

    One option, probably the simplest is to suck all the SVG code 
    into the service when it starts up and emit inline. This allows the color
    to be changed with a simple fill attribute:

    .fish:hover .st0 {
    fill: red;
    }
*/


/* Font, decoration, etc. */

Body {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin: 0px;
    border: 0px;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* Styling for Navigation buttons, also the default styling, eg for the button 'Any'
        <div class="Navigation Button Any">
            <a href="SignIn.html" class="Navigation ButtonAnchor Any">
              <img class="Navigation Any ButtonIcon" src="Resources/Icons/Any.svg" alt="Sign In"/>
              <div class="Navigation ButtonText">Sign In</div>
            </a>
        </div>
*/



.Button {
    justify-content: left;
    display: flex;
    background-color: var(--button-background);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    text-align: left;
    align-items: center;
    height: 30px;
    margin: 5px;
}

    .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: 5px;
    font-size: 16px;
    text-align: left;
    align-items: center;
    height: 30px;
    margin: 5px;
}



.ButtonAnchor {
    display: flex;
    padding-left: 8px;
    align-items: center;
    height: 24px;
    width: 100%;
    text-decoration: none;
}

    .ButtonAnchor:visited {
        text-decoration: none;
        color: var(--color-text);
    }
    .ButtonAnchor:link {
        text-decoration: none;
        color: var(--color-text);
    }

.ButtonDummyAnchor {
    display: flex;
    padding-left: 8px;
    align-items: center;
    height: 24px;
    width: 100%;
    text-decoration: none;
    color: var(--color-text);
}


.ButtonIcon {
    display: flex;
    width: 24px;
    height: 24px;
    text-align: left;
    align-items: center;
}

.ButtonText {
    display: flex;
    padding-left: 8px;
    text-align: left;
    align-items: center;
    height: 24px;
    text-decoration: none;
}







/* Buttons are always on a white background, turn grey on hover and icons are 24x24 */
button {
    background-color: white;
    border-radius: 10px;
    text-decoration: none;
    align-items: center;
    font-size: 18px;
    border: 0px;
}

    button:hover {
        background-color: lightgray;
    }

.dropdown {
    position: relative;
    display: inline-block;
    align-items: center;
    align-self: center;
}

button.dropdown-button {
    align-self: center;
    align-items: center;
    display: flex;
}

button.dropdown-subbutton {
    display: flex;
    flex-direction: row;
    padding: 8px;
    width: 100%;
}



.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

    .dropdown-content img {
        width: 18px;
        height: 18px;
        padding-right: 4px;
    }

        .dropdown:hover .dropdown-content {
            display: block;
        }

.dropdown:hover .dropdown-button {

}





/* Slice and dice the Main section into three parts */

/* The home page consists of a banner for the place followed by a list of brief entries */
.HomePage {
    display: grid;
    grid-template-areas:
        "Nav First"
        "Nav Items"
        "Nav Blank";
    grid-template-columns: 180px 420px;
    align-content: flex-start;
    grid-auto-rows: max-content;
    gap: 1px;
    margin: 0px;
    border: 0px;
    justify-content: center;
}

    .HomePage > div.Title {
        display: none;
    }

    .HomePage > div.Navigation {
        grid-area: Nav;
        align-self: start;
        top: 0;
        left: 0;
        position: sticky;
        padding: 10px;
    }

    .HomePage > div.MainEntry {
        grid-area: First;
        align-self: start;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        padding: 15px;
    }

    .HomePage > div.Entries {
        grid-area: Items;
        align-self: start;
        border-left: 1px solid black;
        border-right: 1px solid black;
        padding: 15px;
    }

    .HomePage > div.TopSettings {
        display: none;
    }









.FlowPage {
    display: grid;
    grid-template-areas:
        "Nav Title"
        "Nav First"
        "Nav Items"
        "Nav Blank";
    grid-template-columns: 180px 420px;
    align-content: flex-start;
    grid-auto-rows: max-content;
    gap: 1px;
    margin: 0px;
    border: 0px;
    justify-content: center;
}
    .FlowPage > div.Title {
        grid-area: Title;
        display: block;
        align-self: start;
        top: 0;
        left: 0;
        position: sticky;
        align-self: start;
        padding: 10px;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }


    .FlowPage > div.Navigation {
        grid-area: Nav;
        align-self: start;
        top: 0;
        left: 0;
        position: sticky;
        align-self: start;
        padding: 10px;
    }

    .FlowPage > div.MainEntry {
        grid-area: First;
        border-left: 1px solid black;
        border-right: 1px solid black;
        padding: 15px;
        align-self: start;
    }

    .FlowPage > div.Entries {
        grid-area: Items;
        border-left: 1px solid black;
        border-right: 1px solid black;
        padding: 15px;
        align-self: start;
    }

    .FlowPage > div.TopSettings {
        grid-area: Top;
        top: 0;
        padding: 0px;
        position: sticky;
        text-align: right;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

.EntryPage {
    display: grid;
    grid-template-areas:
        "NavMenu Title"
        "NavMenu SubMenu"
        "NavMenu Empty";
    grid-template-columns: 180px 420px;
    align-content: flex-start;
    gap: 1px;
    margin: 0px;
    border: 0px;
    grid-auto-rows: max-content;
    justify-content: center;
}
    .EntryPage > div.Title {
        grid-area: Title;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        position: sticky;
        padding: 10px;
    }


    .EntryPage > div.Navigation {
        grid-area: NavMenu;
        top: 0;
        left: 0;
        position: sticky;
        padding: 10px;
    }

    .EntryPage > div.SetingsCategory {
        grid-area: SubMenu;
        top: 0;
        left: 0;

        align-self: start;
        padding: 10px;
    }

    .EntryPage > form.Form {
        grid-area: SubMenu;

        top: 0;
        left: 0;
        padding: 10px;
        height: 100%
    }


/* Grid to display a Place entry */

.PlaceReference {
    display: grid;
    grid-template-areas:
        "Avatar Banner"
        "Blank Title"
        "Blank Body";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
}


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


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

    .PlaceReference div.DNS {
        display: none;
    }


    .PlaceReference > section.Avatar {
        grid-area: Avatar;
        height: 28px;
        width: 28px;
    }

    .PlaceReference img.Avatar {
        height: 28px;
        width: 28px;
    }

    .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 Title"
        "Blank Body";
    align-content: flex-start;
    grid-auto-rows: max-content;
    grid-template-columns: 48px;
    border-bottom: 1px solid black;
}

    .PostSummary > section.Avatar {
        grid-area: Avatar;
        height: 28px;
        width: 28px;
    }
    .PostSummary div.Author {
        display: inline;
        font-weight: bold;
    }
    .PostSummary div.Title {
        display: inline;
        font-weight: bold;
    }
    .PostSummary > section.Body {
        grid-area: Body;
    }


.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;
        height: 28px;
        width: 28px;
        align-self: start;
    }

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

    .PostFull div.Title {
        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;
        height: 28px;
        width: 28px;
    }

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

    .CommentFull div.Title {
        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;
    }


div.Form {
    /*display: block;*/
}

.InputLabel {
    display: block;
}

.InputForm {
    display: block;
}


.DNS input {
    width: 100%;
}

.Title  input {
    width: 100%;
}

.Description textarea {
    width: 100%;
    height: 60px;
}

textarea.InputForm {
    font-family: "Arial", sans-serif; /* Change the font */
}

.Summary textarea {
    width: 100%;
    height: 60px;
}

.Text textarea {
    width: 100%;
    height: 60px;
}

.Body div {
    width: 100%;
}

input,
.ql-editor {
    padding: 4px;
    font-size: 14px;
}

#richtext {
    /*width: 420px;*/
    height: 230px;
}



.Support {
    display: grid;
    grid-template-areas:
        "Menu" "Text";

    gap: 1px;
    margin: 0px;
    border: 0px;
}


    .Support > div.SupportNav {
        grid-area: Menu;
        display: inline-flex;
        top: 0;
        padding: 0px;
        text-align: right;
    }

    .Support > div.Text {
        grid-area: Text;
    }


.SupportNav .Button {

}


.SupportNav .Home .ButtonIcon {
    display: none;
}
.SupportNav .TermsOfService .ButtonIcon {
    display: none;
}
.SupportNav .Contributors .ButtonIcon {
    display: none;
}

.SupportNav .Repository .ButtonText {
    display: none;
}

/* All the stuff relating to JUST the Navigation grid */
button.Navigation {
    display: flex;
    flex-direction: row;
    padding: 8px;
    width: 100%;
}



/* All the stuff relating to JUST the Settings grid */

div.TopSettings {
    display: flex;
    flex-direction: row-reverse;
    /*width: 100%;*/
}


.TopSettings.ButtonText {
    display: none;
}



/* The per post grids */
form.Main {
    display: grid;
    grid-template-areas:
        "isrepost reposter"
        "left author"
        "rule body"
        "rule detail"
        "rule responses";
    grid-template-columns: 36px auto;
}

    .Main > section.RepostIndicator {
        grid-area: isrepost;
        vertical-align: middle;
        display: flex;
    }

    .Main > section.Reposter {
        grid-area: reposter;
        vertical-align: middle;
        display: inline;
    }

    .Main > section.Avatar {
        grid-area: left;
        vertical-align: middle;
        align-self: center;
    }

    .Main > section.Author {
        grid-area: author;
        vertical-align: middle;
        align-self: center;
        display: inline;
    }

    .Main > section.Rule {
        grid-area: rule;
    }

    .Main > section.Body {
        grid-area: body;
        width: 100%
    }

    .Main > section.Detail {
        grid-area: detail;
        display: none;
    }

    .Main > section.Responses {
        grid-area: responses;
        justify-content: space-between;
    }

section.Quoted {
    outline: 1px solid black;
    display: grid;
    grid-template-areas:
        "left author"
        "rule body";
    grid-template-columns: 36px auto;
    border-radius: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
}

    .Quoted > section.Avatar {
        grid-area: left;
        vertical-align: middle;
        align-self: center;
    }

    .Quoted > section.Author {
        grid-area: author;
        vertical-align: middle;
        align-self: center;
        display: inline;
    }

    .Quoted > section.Body {
        grid-area: body;
        width: 100%
    }


/* Everything to do with the Avatar section */

/*div.Avatar {
    height: 32px;
    width: 32px;
    align-items: center;
}*/

/* Reposter is similar to Author */

div.Main.RepostIndicator {
    display: inline;
    margin-left: auto;
    align-items: center;
}

img.RepostIndicator {
    width: 12px;
    height: 12px;
    align-self: center;
    padding-right: 4px;
}

div.ReposterDisplayName {
    font-size: 12px;
    display: inline;
    align-items: center;

}

div.ReposterDisplayHandle {
    font-size: 12px;
    display: inline;
}

div.ReposterDisplayName::before {
    content: "Reposted by";
}
/* Everything to do with the Author section */
div.Author {
    display: inline !important;
}

div.UserDisplayName {
    font-weight: bold;
    display: inline;
    align-items: center;
}

div.UserDisplayHandle {
    display: inline;
}


div.Created {
    display: inline;
}

    div.Created:before {
        content: "-";
    }


section.Detail {
    display: none;
}



/* Everything to do with the Responses section */

div.Responses {
    display: flex;
    justify-content: space-between;
    background-color: white;
    align-items: center;
}

button.Responses {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
}

img.Responses.ButtonIcon {
    align-self: center;
    width: 18px;
    width: 18px;
}



div.Responses.ButtonText {
    display: none;
}


/* This has been used to do a vertical rule in testing */

hr.rulethang {
    height: 100%;
    width: 1px;
    color: black;
}