.img-box {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: none;
    border: 2px solid #fff;
}

/* grid */
.sidebar { grid-area: sidebar; }
.content { grid-area: content;}
.header { grid-area: header; }
.footer { grid-area: footer; }
.grid {
    display: grid;
    grid-gap: 1px;
    grid-template-areas:
        "header"
        "sidebar"
        "content"
        "footer"
}

@media only screen and (min-width: 500px)  {
.img-box{display: block;}
.grid {
	grid-template-columns: 20% auto;
        grid-template-areas:
"header   header   header"
"sidebar  content  content"
"footer   footer   footer";
    }
}

@media only screen and (min-width: 750px)   {
.img-box{display: block;}
.grid {
        grid-gap: 5px;
        grid-template-columns: 150px auto 150px;
        grid-template-areas:
"header  header  header  header  header"
"sidebar content content content content"
"footer  footer  footer  footer  footer";
    }
}
.box { border-radius: 5px; padding: 5px; }

/* colors */
.header, .footer { background-color: #999; color: #fff}
.sidebar, .content{background-color: #444; color: #fff;}

/*Score Pad*/
.score-tab tr:nth-child(even) td {color: #444; background-color: #fff}
.score-tab tr:nth-child(odd) td {background-color: #999}
.score-tab input {
    padding:    2px auto;
    border: none;
    background-color:   transparent;
    text-align: center;
    width:  100%;
    font-size:  inherit;
}
h2,h3 {display: inline;}

/* Dropdown Selection*/
.dropdown {
    position: relative;
    width:100%;
    display: inline-block; 
}
.dropbtn {
    background-color: #999; color: #fff;
    border: none;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #777;}

#expansion li { list-style-type:none; }