div#headerbox {
    position: relative;
    background-color: #D3BC8D;
    width: 97%;
    min-width: 97%;
    max-width: 97%;
    height:17%;
    min-height: 17%;
    max-height: 17%;
    margin: 4px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-radius: 10px;
    z-index:100;
}
    div#headerbox:hover { background-color: #FFFFFF; /* #F19833; */ }
/* Use different shades of blue for links, to look nice depending on the background of the container. */
    div#headerbox a:visited { color: #0000FF; }
    div#headerbox a:link { color: #0000FF; }

div#songbox {
    position: relative;
    background-color: lightblue;
    width: 97%;
    min-width: 97%;
    max-width: 97%;
    height: 20%;
    min-height: 20%;
    max-height: 20%;
    margin: 4px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-radius: 10px;
    z-index: 100;
    /* cursor: url('https://www.gocek.org/icons/info.gif'), auto; */
}
    div#songbox:hover { background-color: #FFFFFF; /* #F19833; */ }
    div#songbox a:visited { color: #0000FF; }
    div#songbox a:link { color: #0000FF; }

div#spiritbox {
    position: relative;
    background-color: lightpink;
    width: 97%;
    min-width: 97%;
    max-width: 97%;
    height: 25%;
    min-height: 25%;
    max-height: 25%;
    margin: 4px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-radius: 10px;
    z-index: 100;
}
    div#spiritbox:hover { background-color: #FFFFFF; /* #F19833; */ }
    div#spiritbox a:visited { color: #0000FF; }
    div#spiritbox a:link { color: #0000FF; }

div#stembox {
    position: relative;
    background-color: black;
    color: lightgreen;
    width: 97%;
    min-width: 97%;
    max-width: 97%;
    height: 20%;
    min-height: 20%;
    max-height: 20%;
    margin: 4px;
    /* extra padding-top to pisition the couriet font text like the other boxes */
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-radius: 10px;
    z-index: 100;
}
    div#stembox:hover { background-color: #AAAAAA; /* #F19833; */ }
    div#stembox a:visited { color: lightgreen; }
    div#stembox a:link { color: lightgreen; }

div#footerbox {
    position: relative;
    background-color: #D3BC8D;
    width: 97%;
    min-width: 97%;
    max-width: 97%;
    height: 11%;
    min-height: 11%;
    max-height: 11%;
    margin: 4px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-radius: 10px;
    z-index: 100;
}
    div#footerbox:hover { background-color: #FFFFFF; /* #F19833; */ }
    div#footerbox a:visited { color: #0000FF; }
    div#footerbox a:link { color: #0000FF; }

/* Tooltip container - https://www.w3schools.com/css/css_tooltip.asp */
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 300px;
        background-color: #aaaaaa;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        top: 38px;
        left: 20px;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }