/* BODY */
body {
    font-family: Verdana, "Lucida Sans", Arial, sans-serif; 
    font-size: 100%; 
    color: black; 
    background-color: lightseagreen;
    opacity: 1.0; 
}
* { box-sizing: border-box; }
.hide { display: none; }
.m2em { margin-left: 2em; margin-right: 2em; } /* indent 1em */

.doc-title {
    font-size: 16px; 
    font-weight: bold; 
    text-align: center;
    padding-top: 8px;
}

.head {position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 32px; 
    padding: 8px; 
    text-align: center; 
    color: white; 
    background-color: #9933cc; 
    z-index: 1; }

.btn {
    position: fixed; 
    top: 30px; 
    left: 0; 
    width: 100%; 
    padding: 8px;
    display: grid; 
    background-color: cornsilk;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    z-index: 2;
}
.btn a {
    padding: 6px;
}

/* songs.htm classes */ 
.main {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    max-height: 95vh; 
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.menu {
    max-height: 100vh; 
    overflow: auto;
}
.menu ul {list-style-type: none; float: left; width: 100%; padding: 8px; margin: 0; }
.menu li {padding: 6px; margin: 0 0 6px 0; background-color: #33b5e5; color: black; border-radius: 4px; }
.menu li:hover {background-color: #0099cc; }

/* audio.htm classes */
.title {
    position: fixed; 
    top: 68px; 
    left: 0; 
    width: 100%; 
    font-size: 16px; 
    font-weight: bold; 
    text-align: center;
}
@media screen and (min-width: 900px) {.title {width: 400px}}

.list {
    position: fixed; 
    top: 120px; 
    left: 0; 
    width: 100%; 
    max-height: 85vh;
    overflow: auto;
    padding: 4px;
    background-color: #33b5e5; 
    color: black; 
}
@media screen and (min-width: 900px) {.list {width: 400px}}

.list div {
    display: block;
    width: 100%;
    border: solid 2px grey;
    border-radius: 5px; 
}
.list div:hover {background-color: #0099cc; }   

.img {
    position: fixed; 
    top: 68px; 
    left: 416px;
    max-width: 1500px; 
    max-height: 90vh;
    overflow: auto;
}     
@media screen and (max-width: 1300px) {.img {max-height: 80vh;}}
@media screen and (max-width: 900px) {.img {display: none;}}