.spectrum-container {
    display: none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-left: -266px;
    margin-top: -1px;
    display: block;
    background-color: #5588bb;
    border: 1px solid #99ccff;
    border-radius: 4px;
}

ul.use-spectrum .spectrum-box {
    position: relative;
    width: 255px;
    font-size: 1em;
    padding: 2px 0px;
    height: 1.2em;
    overflow: hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
    position: absolute;
    left: 0px;
    top: -2px;
    margin-top: 20px;
    display: block;
    font-size: 1px;
    width: 1px;
    height: 1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
    overflow: hidden;
    background-color: #fff;
}

ul.playlist {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    float: left;

    display: block;
    float: left;
    font-weight: bold;
    width: 152px;

    /* font trickery */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

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;
    color: #337ab7;
    border: none;
    -webkit-transition-property: hover;
    -webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
    -o-transition-property: background-color; /* opera 10.5 */
    -o-transition-duration: 0.15s;
}

ul.playlist li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #337ab7;
    font-size: 14px;
    outline: none;
    position: relative;
    z-index: 2;
    padding-left: 10px;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused {
    padding: 0.25em 0.5em 0.25em 0.5em;
    height: 48px;
}

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

ul.playlist li:hover {
    background-color: #eee;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
    background-color: #6699cc;
    overflow: hidden;
}

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

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

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

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
    display: none;
    position: absolute;
    top: 0.55em;
    right: 0.5em;
}

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

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
    display: inline;
    display: inline-block;
}

ul.playlist.use-peak li .peak {
    display: none; /* IE 7 */
}

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

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

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

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

ul.playlist li .controls .statusbar {
    position: relative;
    height: 0.8em;
    background-color: #ccddff;
    border: 2px solid #fff;
    border-radius: 2px;
    overflow: hidden;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

ul.playlist li .controls.dragging .statusbar {
    cursor: -moz-grabbing;
    cursor: -webkit-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: #336699;
    border-right: 3px solid #336699;
    border-radius: 3px;
}

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.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 10;
    font-size: 1px;
    width: 165px;
    text-align: right;
    /* margin-right:4.5em; room for timing stuff */
}

ul.playlist li .timing {
    position: absolute;
    display: none;
    text-align: right;
    right: 5px;
    top: 5px;
    width: auto;
    padding: 3px 5px;
    background-color: #5588bb;
    border: 1px solid #99ccff;
    border-radius: 4px;
    letter-spacing: 0px;
    font: 12px monaco, "VT-100", "lucida console", courier, system;
    line-height: 1em;
    vertical-align: middle;
}

ul.playlist.use-peak li .timing {
    right: 4.25em;
}

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

ul.playlist li .timing div.sm2_timing {
    margin: 0px;
    padding: 0px;
    margin-top: -1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
    display: block;
    z-index: 5;
}

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

ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
    background-color: #888;
    border-color: #ccc;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
    display: none;
    zoom: 1;
    border: 1px solid #99ccff;
    padding: 2px;
    height: 0.55em;
    border-radius: 4px;
    background-color: #5588bb;
    width: 0.8em;
    height: 0.55em;
    margin-top: -3px;
}

ul.playlist.use-peak li .peak-box {
    position: relative;
    width: 100%;
    height: 0.55em;
    overflow: hidden;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 7px;
    height: 50px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 1px;
    margin-top: 1em;
}

ul.playlist li .peak .l {
    margin-right: 1px;
}

ul.playlist li .peak .r {
    left: 10px;
}

#control-template {
    display: none;
}