body {
    /* 
     * hsl(334, 100%, 22%) is a burgundy colour like the band uniforms. 95%-10% lighter-darker.
     * hsl(44, 100%, 26%) is an orangy colour, complimentary to the burgundy
     *
     * Colours etc used by Zaden for the band logo:
     * - Font: Bell MT, regular
     * - Burgundy: #5E2534
     * - Gold: #E2A225
     *
     */
    background-color:  hsl(334, 100%, 22%); /* For browsers that do not support bg images */
    background-image: url("/images/Nationals.jpg") 
                ,radial-gradient(circle,  hsl(334, 100%, 95%), hsl(334, 100%, 22%), hsl(334, 100%, 10%));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left; 
    margin: 0;
    padding: 0;
    z-index: 0;
}

header {
    clear: both;
    width: 100%;
    height: 126px;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    background-image: url("/images/sheetmusic - maroon.jpg");
    background-size: 100%;
    z-index: 1;

}
div.mainheading {
    clear:both;
    width:800px;
    height: 65px;
    line-height: 65px;
    margin:15px auto;
/*    border: 5px solid hsl(334, 100%, 22%);
    border-radius: 35px;
    background-color: hsl(44, 100%, 90%); /*  main head background */
/*    color: #5E2534; */    /* Zaden's Maroon */
    color: #E2A225;     /* Zaden's gold */
/*    color: hsl(334, 100%, 30%);
    box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.4);
*/
    font-size: 40pt;
 /*   font-family: Gabriola; */
    font-family: Bell MT, regular;
    text-align: center;
}
div.mainheading>span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;    
}

div.navbar {
    width: 100%;
    height:25px;
    position: absolute;
    left: 0;
    top: 102px;
    text-align: center;
    z-index: 5;
}

.navitem {
    width:7em;
    height:25px;
    border-radius: 8px 8px 0 0;
    border: none;
    cursor: pointer;
    background-color: hsl(44, 100%, 40%); 
}

h1,h2,h3,h4 {
    text-align: center;
    color: hsl(44, 100%, 30%);
    margin-top: 0;
    margin-bottom: 0;
}

div.justify {
    text-align:justify;
    text-justify: inter-word;
}
div.content {
    width:900px;
    height:500px;
    overflow: auto;
    /*background-color: hsl(44, 100%, 95%);   /* if you change this change .curitem as well */
    background-color: hsla(44, 100%, 95%,0.93);   /* if you change this change .curitem as well */
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin:127px auto 0 auto;
    box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.5);
    z-index: 2;
position: relative;
left:0;
top: 0;
}

div.home {
    background-color: hsla(44, 100%, 95%,0.5);   /* use with "content" but make it more transparent */
}

footer {
    width:99%;
    height: 25px;
    text-align:center;
    position: absolute;
  /*  color: hsl(44, 100%, 20%); */
    color: #E2A225;
    left: 0;
    bottom: 0;
    z-index: 1;
}
/*
footer span {
    vertical-align: 15px;
}
*/

footer a:link {
    /*color: hsl(44, 100%, 20%);*/
    color: #E2A225;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: hsl(4, 100%, 40%); /* same as .navitem */
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    left: 20px;
    z-index: 4;
}

/* Links inside the dropdown */
.dropdown-content>button {
    color: black;
    background-color: hsl(44, 100%, 40%); /* same as .navitem */
    min-width: 180px;
    text-decoration: none;
    display: block;
    z-index: 4;
}
.dropdown-content>.dropdown>button {
    color: black;
    background-color: hsl(44, 100%, 40%); /* same as .navitem */
    min-width: 180px;
    text-decoration: none;
    display: block;
    z-index: 4;
}

/* Change color of dropdown links on hover */
.dropdown-content>button:hover {
    background-color: hsl(44, 100%, 50%);
    z-index: 4;
}
/*button:hover {background-color: hsl(44, 100%, 50%)} */

/* Show the dropdown menu on hover */
.dropdown:hover>.dropdown-content {
    display: block;
    z-index: 4;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.navitem:hover:not(.curitem) {
    background-color: hsl(44, 100%, 50%);
    z-index: 4;
}
.dropdown:hover>.dropbtn:not(.curitem) {
    background-color: hsl(44, 100%, 50%);
    z-index: 4;
}
dt {
  margin-top: 20px;
  font-weight: bold;
}

dd>dl>dt {
  margin-top: 0;
  font-weight: normal;
  font-style: italic;
}
dd>dl>dd {
  font-weight: normal;
  font-style: italic;
}
iframe {
    border: none;
    width: 99%;
}
.curitem {
    background-color: hsla(44, 100%, 95%, 0.93);   /* same colour as content background */
}
.curitem:hover {
    background-color: hsl(44, 100%, 95%);   /* same colour as content background */
}
.boxfoot {
    border: 2px solid  hsl(334, 100%, 22%);
    background-color: hsla(334, 100%, 98%,0.7);
    overflow: auto;
    padding:0.75%;
    border-radius: 5px;
    width:97%;
    text-align:center;
    position: absolute;
    left: 4px;
    bottom: 2px;
    z-index: 1;
}
.box {
    border: 2px solid  hsl(334, 100%, 22%);
    background-color: hsla(334, 100%, 98%,0.1);
    overflow: auto;
    padding:0.75%;
    border-radius: 5px;
}
.home .box { /* like box but more opaque */
    background-color: hsla(334, 100%, 98%,0.85);
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 2;
 /*   border: 2px solid  hsl(334, 100%, 22%);
    overflow: auto;
    padding:0.75%;
    border-radius: 5px; */
}

.boxfw {    /* full width */
    float: left;
    clear: both;
    width: 98%;
    margin-bottom: 1%;
}
.boxtl { /* top left */
    float: left;
    clear: left;
    width: 47.4%;
    height: 47%;
    margin-bottom: 1%;
}
.small {
    font-size: 80%;
}

.boxtr {
    float: right;
    clear: right;
    width: 47.4%;
    height: 47%;
    margin-bottom: 1%;
}
/* widths changed from 30% 2020 01 19 */ 
.boxbl {
    float: left;
    clear: left;
    width: 47.4%;
    height: auto;
    margin-bottom: 1%;
}
.boxbc {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 98%;
    height: auto;
}
.boxbr {
    float: right;
    clear: right;
    width: 47.4%;
    height: auto;
    margin-bottom: 1%;
}
/* end width change */

.row2 {
    margin-top: 10px;
}
.boxhead {
    /*color: hsl(44, 100%, 20%);
    color: #E2A225; */
    color: hsl(334, 100%, 30%);
    font-weight: bold;
    text-align: center;
    clear: both;
           font-size: 110%;
           text-transform: uppercase;
}
.small .boxhead {
    font-size: 128%;    /* inverse of 80% see .small */
}
.boxdate {
    float:left;
    clear:left;
    font-weight: bold;
}
.boxitem {
    float:right;
    clear:right;
    font-style: italic;
}

button.link:hover {
    background-color: hsl(44, 100%, 50%);
}
button.link {
    background-color: hsl(44, 100%, 95%);
    border: 0;
    font-size: 105%;
}
a.link:hover {
    background-color: hsl(44, 100%, 50%);
}
a.link {
    background-color: hsl(44, 100%, 95%);
}
button.boxlink:hover {
    background-color: hsl(44, 100%, 50%);
}
button.boxlink {
    width: 100%;
    margin:0;
    padding: 0;
    border: 0;
    font-size: 70%;
    background-color: hsl(44, 100%, 95%);
}
.fw {
    width: 100%;
    margin:0;
    padding: 0;
    border: 0;
}
.dummy {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
img.Aspon {
    display: inline-block;
    margin: 20px 0px;
}
img.don {
    display: inline-block;
    width: 145px;
    height: 35px;
    vertical-align: middle;
}
img.dons {
    display: inline-block;
    width: 100px;
    height: 24px;
    vertical-align: middle;
}
a.don {
    width: 100%;
    height: 45px;
}
img.fbicon {
    display: inline-block;
    width: 2em;
    height: auto;
    border-radius: 0px;
}
img.SmlImg {
    display: inline-block;
    max-width: 60%;
    width: 145px;
    height: auto;
}
img {
    max-width: 99%;
    width: auto;
    height: auto;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
}
img.home {
    width:70%;
}

/* table that looks like a definition list. */
table.dl td:first-child {
    text-align: right;
    font-size: 70%;
}
table.dl td:last-child {
    font-weight: bold;
    padding-left: 2em;
}