/* DETAILS SUMMARY */
summary {
    cursor: pointer;
    border: none;
}

summary::-webkit-details-marker {
    color: #69c773;
    font-size: 200%;
}

details {
    border-radius: 3px;
    background: transparent;
}

details[open] {
    padding: 20px;
    border: 3px solid #eeeeff;
    background-color: #ffffff;
}

summary a {
    color: #eaaa33;
}

summary a:hover {
    color: orange;
}

summary a:visited {
    color: #803333;
    background-color: #aaaaaa;
}

details summary {
    font-size: 17px;
    vertical-align: top;
    background: #eeeeee;
    color: brown;
    border-radius: 8px;
    margin: 8px;
    padding: 5px 10px;
    outline: none;
}

details[open] summary {
    background: #7fe198;
    color: #222233;
}

details[open] summary.top {
    /* Put top level summaries into class .top so show the nested levels */
    background: #1951e6;
    color: #ffffff;
}

details[open] summary.empty {
    /* If PHP knows there are no details - Show this colour */
    background: #ec9913;    
    color: #ffffff;
}

details[open] summary.query {
    /* If PHP knows there are no details - Show this colour */
    background: #ddffff;
    color: #111111;
}

details[open] summary a {
    color: maroon;
}

/* Hide the default marker. */    
details summary::-webkit-details-marker {
    display: none;
}

/* Add the custom marker in the default state. */    
details summary:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    content: "";
    background-image: url(img/treehouse-icon-sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* Move the sprite image when the details box is open. */
details[open] summary:before {
    background-position: -18px 0;
}

details:not([open]) summary {
    background-color: #cfcfb9;
    color: #222244;
}
/* A simple button style summary to open details */
summary.button ,.small-summary {
    background: transparent;
    color: black;
    font-size: 25px;
    line-height: 30px;
    border: 1px solid gray;
    width: auto;
    display: inline;
    box-shadow: 2px 2px 2px;
}