ul.playlist {
width:600px;
list-style-type:none;
margin:0px;
padding:0px;
margin-left: -20px;
}

ul.playlist li {
/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
position:relative;
display:block;
width:auto;
font-size:11px;
color:#FFF;
padding:4px;
border:none;
background:#666 url(btn_play.png) no-repeat left top;
}

ul.playlist li a {
display:block;
text-decoration:none;
font-weight:normal;
color:#FFF;
font-size:11px;
outline:none;
position:relative;
padding-left:16px;
z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
color:#fff;
}

ul.playlist li:hover {
display:block;
background-color:#FC6;
}

ul.playlist li:hover a {
color:#333;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
background:#AAA url(btn_stop.png) no-repeat left top;
}

ul.playlist li.sm2_paused {
background:#999 url(btn_pause.png) no-repeat left top;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
color:#fff;
}

ul.playlist li .controls {
display:none;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
position:relative;
display:block;
}

ul.playlist li.sm2_paused .controls {
background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
position:relative;
cursor:ew-resize;
cursor:-moz-grab;
cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
background-color:#ccc;
}

ul.playlist li .controls {
position:relative;
margin-top:0.25em;
margin-bottom:0.25em;
background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
position:relative;
height:4px;
background-color:#CCC;
border:1px solid #fff;
overflow:hidden;
cursor:-moz-grab;
cursor:grab;
}

ul.playlist li .controls .dragging .statusbar {
cursor:-moz-grabbing;
cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
position:absolute;
left:0px;
top:0px;
height:0.5em;
}

ul.playlist li .controls .statusbar .position {
background-color:#FC6;
border-right:1px solid #666;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
background-color:#666;
border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
width:0px;
}

ul.playlist li .timing {
position:absolute;
display:none;
right:2px;
top:2px;
width:auto;
height:auto;
padding:2px;
font:11px;
}

ul.playlist li:hover .timing {
z-index:2;
}

ul.playlist li .timing div.sm2_timing {
margin:0px;
padding:0px;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing {
color:#FC6;
}

#control-template {
display:none;
}