html, body, h2 { margin: 0; padding: 0;}
div {vertical-align: top; padding: 0; margin: 0;}
#keyboard {float: left;}

table, tr, td {
border-collapse: collapse;
vertical-align: top;
float: left;
padding: 0px;
margin: 0px;
width: 200px;
}

tr.keyboard {
background-image: url('piano.gif');
background-repeat: repeat-y;
width: 200px;
height: 100%;
position: fixed;
}

td.keyspace {
top: 44px;
position: absolute;
}

a.navkey {
 width: 135px;
 height: 34px;
 display: block;
 font-family: 'Trebuchet MS', Sans-Serif;
 font-size: 120%;
 padding-left: 60px;
 padding-top: 10px;
 vertical-align: middle;
 text-align: center;
 text-decoration: none;
 color: black;
}

a.a:hover {background-image: url('piano-nav-D_down.gif'); }
a.f:hover {background-image: url('piano-nav-C_down.gif'); }
a.e:hover {background-image: url('piano-nav-E_down.gif'); }



#content {margin-inline-start: 200px;}

h1 {text-align: center; font-size: 400%; font-weight: bold; font-style: italic; margin: 0; padding-top: 40px;}
h2 {text-align: center; font-size: 150%; font-style: italic; margin: 0; padding-top: 40px;}
#header {text-align: left; font-size: 150%; font-style: bold; margin: 0; padding-top: 40px;}
h3 {text-align: center; font-style: italic;}

ul {list-style-type: '\1F3B5'; padding: 5px; display: inline-block; text-align: left;}
li {margin-bottom: 10px; padding-left: 15px;}

img {display: block; margin-left: auto; margin-right: auto; width: 90%;}
#pic {width: auto; margin-left: 10%; margin-right: 90%;}
#end {width: auto; float: left;}

.ctxt {text-align: center;}