* { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; margin-top: 16px; font-size: 12px; }
h1 { font-size: 20px; text-transform: lowercase; letter-spacing: 0.1em; position: absolute; top: -2px; left: 2px; line-height: 20px; }
#header {
    background: #eef; border-top: 2px solid #ccf;
    padding-left: 5px; padding-right: 3px;
}
#header h2 { font-size: 12px; float: left; }
#menu { list-style-type: none; font-size: 10px; position: absolute; overflow: hidden; height: 11px; right: 0; padding: 4px; padding-top: 0; }
#menu:hover { height: auto; border-left: 2px solid #ccf; border-bottom: 2px solid #ccf; background: #eef; padding-left: 2px; z-index: 30; }
#menu a { color: blue; text-decoration: none; }
/*#menu { font-size: 10px; text-align: right; display: block; text-decoration: none; color: blue; }*/
#header h3 { clear: both; line-height: 14px; font-size: 14px; color: #900; }
#song { padding-left: 3px; }
#song #time { display: block; font-size: 11px; text-align: right; }
#song #bitrate { display: block; font-size: 0.9em; float: left; }
#seekbar { width: 100%; clear: both; height: 6px; border: 1px solid #ccf;}
#seekbar span { display: none; }
#seekbar .seek { width: 4%; height: 6px; text-indent: -100em; overflow: hidden; display: block; float: left; }
#seekbar .seek.inactive { background: #fff; }
#seekbar .seek.active { background: #009; }
#seekbar .seek.livestream { text-indent: -100em; overflow: hidden; }

#seekbar_js { width: 100%; clear: both; height: 6px; border: 1px solid #ccf; background: #fff; }
#seekbar_js { position: relative; z-index: 1; }
#seekbar_js span { display: block; height: 6px; background: #009; }

#options { clear: left; list-style-type: none; }
#repeat a.enabled { background: url(repeat.png); }
#repeat a.disabled { background: url(repeat2.png); }
#random a.enabled { background: url(shuffle.png); }
#random a.disabled { background: url(shuffle2.png); }
#crossfade a.enabled { background: url(crossfade.png); }
#crossfade a.disabled { background: url(crossfade2.png); }
#options li { text-indent: -100em; overflow: hidden; width: 16px; height: 16px; background-repeat: no-repeat; float: right; }
#options a { width: 16px; display: block; height: 16px; }
#options li:hover { background-color: #fff; }

#commands { clear: left; list-style-type: none; width: 75%; }
#commands li { float: left; width: 24px; margin-left: 3px; height: 24px; }
#commands a,#commands li.disabled { text-decoration: none; display: block; }
#commands a:hover { background-color: #fff; }
#commands li { width: 18%; height: 24px; text-indent: -100em; overflow: hidden; background-repeat: no-repeat; }
#commands a { height: 24px; width: 24px; background-repeat: no-repeat; }
#commands #prev a { background-image: url(prev.png); }
#commands #prev.disabled { background-image: url(prev2.png); }
#commands #play a { background-image: url(play.png); }
#commands #play.disabled { background-image: url(play2.png); }
#commands #next a { background-image: url(next.png); }
#commands #next.disabled { background-image: url(next2.png); }
#commands #stop a { background-image: url(stop.png); }
#commands #stop.disabled { background-image: url(stop2.png); }
#commands #pause a { background-image: url(pause.png); }
#commands #pause.disabled { background-image: url(pause2.png); }

#volume { clear: both; margin-top: 2px; background: url(volume.png) no-repeat; padding-left: 20px; padding-top: 4px; height: 16px; }
#volume h4 { display: none; }
#volume a { text-indent: -100em; overflow: hidden; width: 10px; height: 10px; display: block; float: right;
    border: 1px solid #ccf; }
#volume #decrease { background: url(minus.png) no-repeat 2px 2px; margin-left: 2px; }
#volume #increase { background: url(plus.png) no-repeat 2px 1px; }
#volumebar { width: 80%; height: 9px; border: 1px solid #99f; background: #fff; display: block; float: left; }
#volumebar span { display: block; background: #ccf; height: 9px; }

#volumebar_js { width: 99%; clear: both; height: 8px; border: 1px solid #99f; background: #fff; position: relative; }
#volumebar_js span { display: block; height: 8px; background: #ccf; }

#playlist h4 { padding-left: 5px; margin-top: 12px; }
#list_commands { list-style-type: none; font-size: 11px; background: #eef; border-top: 2px solid #ccf; }
#list_commands li { width: auto; float: right; padding-right: 5px; }
#list_commands a { text-decoration: none; display: block; color: #000; }
#list_commands a:hover { text-decoration: underline; }
#browse { clear: both; display: block; text-decoration: none; border-top: 2px solid #ccf; color: #900; padding-right: 5px; font-size: 11px; text-align: right; }
#list { list-style-type: none; margin-top: 6px; font-size: 10px; margin-left: 5px; clear: both; }
#list a { display: block; text-decoration: none; color: #000; }
#list li.odd { background: #eef; }
#list li#current { background: #fcc; }
#list li:hover { background: #ccf; }