.spectrum-container {
  display: none; }

#content {
  margin: 0; }
  #content 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;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; }
  #content ul.use-spectrum .spectrum-box {
    position: relative;
    width: 255px;
    font-size: 1em;
    padding: 2px 0px;
    height: 1.2em;
    overflow: hidden; }
    #content 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: white; }
  #content ul.playlist {
    list-style-type: none;
    margin: 0px;
    padding: 0px; }
    #content 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: 20px;
      color: #666666;
      padding: 0.25em 0.5em 0.25em 0.5em;
      border: none;
      letter-spacing: -1px;
      /* ZOMG WEB X.0. ;) */
      background-color: #eeeeee;
      border: 1px solid #999999;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      -webkit-transition-property: hover;
      -webkit-transition: background-color 0.15s ease-in-out; }
      #content ul.playlist li a {
        display: block;
        text-decoration: none;
        font-weight: normal;
        color: black;
        outline: none;
        position: relative;
        z-index: 2; }
      #content ul.playlist li.sm2_playing, #content ul.playlist li.sm2_paused, #content ul.playlist li.sm2_playing a {
        color: black;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        font-size: 19px; }
      #content ul.playlist li:hover {
        background-color: #cccccc;
        border-color: black; }
        #content ul.playlist li:hover a {
          color: black; }
      #content ul.playlist li.sm2_playing {
        background-color: #edd549; }
      #content ul.playlist li.sm2_paused {
        background-color: #f4e99e;
        color: black; }
      #content ul.playlist li.sm2_playing:hover a, #content ul.playlist li.sm2_paused a {
        color: #b99c26; }
      #content ul.playlist li .controls {
        display: none; }
      #content ul.playlist li .peak {
        display: none;
        position: absolute;
        top: 0.55em;
        right: 0.5em; }
    #content ul.playlist.use-peak li .peak {
      display: none;
      position: absolute;
      top: 0.55em;
      right: 0.5em; }
    #content ul.playlist li.sm2_playing .controls, #content ul.playlist li.sm2_paused .controls {
      position: relative;
      display: block; }
    #content ul.playlist.use-peak li.sm2_playing .peak, #content ul.playlist.use-peak li.sm2_paused .peak {
      display: inline;
      display: inline-block; }
    #content ul.playlist.use-peak li .peak {
      display: none;
      /* IE 7 */ }
    #content ul.playlist li.sm2_paused .controls {
      background-color: #666666; }
    #content ul.playlist li:hover .controls .statusbar {
      position: relative;
      cursor: ew-resize;
      cursor: -moz-grab;
      cursor: grab; }
    #content ul.playlist li.sm2_paused .controls .statusbar {
      background-color: #b99c26; }
    #content ul.playlist li .controls {
      position: relative;
      margin-top: 0.25em;
      margin-bottom: 0.25em;
      background-color: #99ccff; }
      #content ul.playlist li .controls .statusbar {
        position: relative;
        height: 0.5em;
        background-color: #ccddff;
        border: 2px solid white;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        overflow: hidden;
        cursor: -moz-grab;
        cursor: grab; }
      #content ul.playlist li .controls.dragging .statusbar {
        cursor: -moz-grabbing;
        cursor: grabbing; }
      #content ul.playlist li .controls .statusbar .position, #content ul.playlist li .controls .statusbar .loading, #content ul.playlist li .controls .statusbar .annotation {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 0.5em; }
      #content ul.playlist li .controls .statusbar .position {
        background-color: #b99c26;
        border-right: 3px solid #b99c26;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px; }
    #content ul.playlist li.sm2_paused .controls .statusbar .position {
      background-color: #b99c26;
      border-color: #b99c26; }
    #content ul.playlist li .controls .statusbar .loading {
      background-color: #eeeeee; }
    #content ul.playlist li .controls .statusbar .position, #content ul.playlist li .controls .statusbar .loading {
      width: 0px; }
    #content ul.playlist li.sm2_playing a.sm2_link, #content ul.playlist li.sm2_paused a.sm2_link {
      margin-right: 4.5em;
      /* room for timing stuff */ }
    #content ul.playlist li .timing {
      position: absolute;
      display: none;
      text-align: right;
      right: 1em;
      top: 1em;
      width: auto;
      height: 1em;
      padding: 3px 5px;
      background-color: white;
      border: 1px solid #b99c26;
      color: black;
      -moz-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      letter-spacing: 0px;
      font: 55% monaco, "VT-100", terminal, "lucida console", courier, system;
      line-height: 1em;
      vertical-align: middle; }
    #content ul.playlist.use-peak li .timing {
      right: 4.25em; }
    #content ul.playlist li:hover .timing {
      z-index: 2; }
    #content ul.playlist li .timing div.sm2_timing {
      margin: 0px;
      padding: 0px;
      margin-top: -1em; }
    #content ul.playlist li.sm2_playing .timing {
      display: block; }
    #content ul.playlist li.sm2_paused .timing {
      display: block;
      background-color: white;
      border-color: #b99c26;
      color: #b99c26; }
      #content ul.playlist li.sm2_paused .timing .sm2_position {
        text-decoration: blink;
        /* hee hee. first actual appropriate use? :D */ }
    #content ul.playlist.use-peak li.sm2_paused .peak {
      background-color: #888888;
      border-color: #cccccc; }
    #content ul.playlist.use-peak li .peak {
      display: none;
      zoom: 1;
      border: 1px solid #99ccff;
      padding: 2px;
      height: 0.55em;
      -moz-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      background-color: #5588bb;
      width: 0.8em;
      height: 0.55em;
      margin-top: -3px; }
    #content ul.playlist.use-peak li .peak-box {
      position: relative;
      width: 100%;
      height: 0.55em;
      overflow: hidden; }
    #content ul.playlist li .peak .l, #content ul.playlist li .peak .r {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 7px;
      height: 50px;
      background: white;
      border: 1px solid white;
      -moz-border-radius: 1px;
      -khtml-border-radius: 1px;
      margin-top: 1em; }
    #content ul.playlist li .peak .l {
      margin-right: 1px; }
    #content ul.playlist li .peak .r {
      left: 10px; }

/* peak data */
/* ul.playlist ... */
#control-template {
  display: none; }
