@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

:root {
    --heading-col: #d98020;
}

html, body {
    background-color: white;
    color: black;
    font-family: Lato, 'Open Sans', Arial, sans-serif;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

.hoverlinks a {
    text-decoration: none;
}
    .hoverlinks a:hover {
        text-decoration: underline;
    }
.AddedByLine {
    text-align: right;
    font-style: italic;
    color: #333;
    font-size: 9pt;
    margin-top: 0;
}

.picheading {
    background-color: #EEE;
    color: #000;
    font-size: x-large;
    font-weight: bold;
    background-image: url(/icons/heading-background.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: solid 5px mediumvioletred;
}
    .picheading > div {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-gap: 1rem;
        align-items: center;
        padding: 10px;
        background-color: rgba(255,255,255,0.5);
        color: #b02024;
        font-size: x-large;
    }


section > div {
    max-width: 1200px;
    margin: auto;
    font-size: 12pt;
    padding-left: 1rem;
    padding-right: 1rem;
}
nav {
    background-color: mediumvioletred;
    color: white;
    /* margin-bottom: 1rem; */
}
    nav > div {
        max-width: 1200px;
        margin: auto;
    }
    nav div.pinkmenubar a {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 16px;
        padding-left: 1rem;
        text-decoration: none;
        color: white;
        border-left: solid 1px white; /* #940e63 */
        border-right: solid 1px white; /* #940e63 */
    }
    nav div.pinkmenubar a:hover {
        background-color: #ee189e;
        text-decoration: none;
    }

.footer {
    margin-top: 2rem;
    color: black;
    background-color: #ffe5f5;
    border-top: solid 5px mediumvioletred;
    padding: 1rem 0;
}
    .footer a {
        text-decoration: none;
    }

h1, h2, h3 {
    color: #b02024;
}
h2 {
    font-size: 1.2rem;
}
table.tableform {
    width: 100%;
    margin-bottom: 1rem;
}
    table.tableform td {
        padding: 6px 3px;
        background-color: #ff86cf33;
    }
        table.tableform td:first-child {
            background-color: #ffcfec;
        }
table.tablelist {
    width: 100%;
}
    table.tablelist td {
        background-color: #ff86cf33;
        padding: 3px;
        font-size: smaller;
    }
    table.tablelist tr:nth-child(even) td {
        background-color: #ff86cf22;
    }
    table.tablelist td:nth-child(3), table.tablelist td:nth-child(4) {
        text-align: right;
    }
    table.tablelist th {
        background-color: mediumvioletred;
        color: white;
        padding: 6px;
    }
table.memberlist {
    width: 100%;
}

    table.memberlist td {
        background-color: #ff86cf33;
        padding: 3px;
    }

    table.memberlist tr:nth-child(even) td {
        background-color: #ff86cf22;
    }

    table.memberlist th {
        background-color: mediumvioletred;
        color: white;
        padding: 6px;
    }

    table.memberlist a {
        text-decoration: none;
    }
#VolumeSelector {
    align-items:center;
}
#VolumeSelector input[type=number] {
    width: 3rem;
    padding: 5px;
    text-align:center;
}
#VolumeSelector input[type=number]{
    width: 3rem;
    padding: 5px;
}
#VolumeSelector input[type=submit] {
    padding: 5px 3rem;
}
.purpledetails {
    background-color: rebeccapurple;
    color: white;
    border-radius: 4px;
    margin-bottom: 5px;
    box-shadow: 5px 5px 5px #CCC;
}
    .purpledetails[open] {
        padding: 3px;
        background-color: rebeccapurple;
        border-radius: 4px;
        color: white;
    }
    .purpledetails summary {
        padding: 3px 6px;
        font-size: small;
        border-radius: 4px;
        border: solid 2px rebeccapurple;
    }
    .purpledetails[open] summary {
        padding: 3px 3px;
    }
    .purpledetails > *:not(summary) {
        background-color: #eee5ff;
        color: black;
        border-radius: 4px;
        padding: 6px;
    }

    #ResultsDiv a {
        display: block;
    }
.SelectedNavLink {
    background-color: rebeccapurple !important;
}
.pinktable {
    width: 100%;
    display: grid;
    grid-gap: 1px;
    margin-bottom: 1rem;
}
    .pinktable > div {
        background-color: #ffe5f5;
        padding: 4px;
    }
        .pinktable > div.altrow {
            background-color: #fdeffd;
        }
        .pinktable a {
            text-decoration: none;
        }
    .pinktable a:hover {
        text-decoration: underline;
    }
.pinkheader {
    width: 100%;
    display: grid;
    grid-gap: 1px;
    margin-bottom: 1px;
}
.pinkheader > div {
    background-color: mediumvioletred;
    padding: 4px;
    color: white;
}
#RoseSearchResults {
    border: solid 1px #ccc;
    padding: 3px;
}
    #RoseSearchResults a {
        font-size: small;
        display: block;
        text-decoration: none;
    }
        #RoseSearchResults a:hover {
            text-decoration: underline;
        }
#PlaceSearchResults {
    border: solid 1px #ccc;
    padding: 3px;
}

    #PlaceSearchResults a {
        font-size: small;
        display: block;
        text-decoration: none;
    }
        #PlaceSearchResults a:hover {
            text-decoration: underline;
        }
#PersonSearchResults {
    border: solid 1px #ccc;
    padding: 3px;
}

    #PersonSearchResults a {
        font-size: small;
        display: block;
        text-decoration: none;
    }

        #PersonSearchResults a:hover {
            text-decoration: underline;
        }

.paddedform input, .paddedform select, .paddedform textarea, input[type=file]::file-selector-button {
    padding: 8px;
}
    .paddedform input[type=submit] {
        padding: 8px 16px;
    }
.indexlist {
    column-width: 25rem;
}
    .indexlist a {
        display: block;
        text-decoration: none;
    }
    .indexlist :hover {
        text-decoration: underline;
    }
.linkslist {
    
}
    .linkslist a {
        text-decoration: none;
    }
    .linkslist a:hover {
        text-decoration: underline;
    }
.purplebutton {
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    padding: 8px 30px;
    color: white;
    background-color: rebeccapurple;
    box-shadow: 5px 5px 5px #CCC;
    margin: 0.25rem 0;
}
    .purplebutton:hover {
        box-shadow: 0px 0px 10px #CCC;
        background-color: #b38cd9;
    }
.coverslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.directorybox {

}
    .directorybox > div {
        background-color: #fbf1fa;
        padding: 5px;
        border-bottom: solid 1px #EEE;
    }
        .directorybox > div:nth-child(odd) {
            background-color: #ffe9fb;
        }
    .directorybox .namebox {
        font-weight: bold;
        color: rebeccapurple;
        font-size: larger;
        background-color: white !important;
    }
    .directorybox .twobox {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
#BreederSearchResults, #RoseTypeSearchResults {
    max-height: 5.5rem;
    overflow-y: auto;
    background-color: white;
    padding: 3px;
}
    #BreederSearchResults a, #RoseTypeSearchResults a {
        text-decoration: none;
        display: block;
        color: navy;
    }
        #BreederSearchResults a:hover, #RoseTypeSearchResults a:hover {
            text-decoration: underline;
        }

#FormStep2_Journal input, #FormStep2_Journal select, #FormStep2_Catalogue input, #FormStep2_Catalogue select {
    font-family: inherit;
    font-size: inherit;
    padding: 6px;
}
.roseeditform input {
    font-family: inherit;
    font-size: inherit;
}

::placeholder {
    font-style: italic;
}

.HomeScreenItemContainer {
    display: flex;
    flex-wrap:wrap;
    gap:10px;
}
.HomeScreenItem {
    border: solid 2px mediumvioletred;
    padding: 6px;
    background-color: #ff86cf1a;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1rem;
    flex-flow: column;
    gap: 10px;
    flex: 1;
    min-width: 300px;
}
    .HomeScreenItem > div:first-child {
        background-color: mediumvioletred;
    }

.HomeScreenButton {
    background-color: mediumvioletred;
    color: white;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
    border-radius: 4px;
    text-align: center;
}
.HomeItemButtonBox {
    gap: 6px;
    display: flex;
    flex-direction: column;
}
.GoHomeBox {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: auto 1fr;
    border: solid 4px purple;
    padding: 8px;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    background-color: #fddaff;
    font-size: large;
    box-shadow: 2px 6px 8px 0px #CCC;
    margin: 1rem 0;
}
.quicktip {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin: 1rem 0;
    grid-gap: 1rem;
    font-size: large;
    padding: 4px;
    padding: 4px;
    color: mediumvioletred;
    font-style: italic;
}
.LibraryItem {
    text-decoration: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1rem;
    align-items: center;
    padding: 3px;
    border: solid 1px #999;
    color: black;
}
    .LibraryItem > img {
        border: solid 1px mediumvioletred;
    }