html, body{margin:0; padding:0; background-color:black}
body{padding-bottom:20px; text-align:center}
#container{text-align:left; margin:0 auto}

@media handheld{#container{width:480px}
#footer{margin:10px 20px 0 20px; padding:20px; clear:left}
#footer ul li{display:inline}
}

@media screen{#sidebar{text-align:center; width:480px}
#container{width:800px}
#content{width:480px; float:left}
#footer{margin:20px; padding:0; width:180px; float:right}
}

#header{ color:white;  background-image:url("beethoven-background.jpg");  background-position:bottom center;  background-repeat:no-repeat;  background-color:black; border:1px solid black; margin:20px; padding:20px;  padding-bottom:0; text-align:center}
#sidebar{background-color:#baa; border:1px solid black; margin:20px; padding:20px; float:left; display:inline; /* floats are handled as block elements,this is to fix    a margin collapsing bug in IE */}
#sidebar ul li{display:inline}
#sidebar ul{margin:0 20px; padding:0 20px}
#content{background-color:white; margin:20px; padding:20px;  padding-bottom:0; border:1px solid black; clear:both}
#footer{background-color:white; border:1px solid black}
.note{color:#707831}
.ctr{text-align:center}