/*
#scrollwrap { position:relative; overflow:none; width: 178px; height:60px; border:1px solid silver; margin: 3px  auto; }
#scroll { margin:1px; width: 100%; white-space: nowrap;  overflow: auto; }

.slider { position:relative; cursor:pointer; height:1px; width:178px; border: 1px solid silver; -moz-border-radius:2px; -webkit-border-radius:2px; margin: 0 auto; }

.progress { height:3px; position:absolute; width:10px; }

.handle { border:1px solid #cfcfcf; background-color:#fff; height:12px; width:50px; position:absolute; top:-12px; display:block; cursor:move;
  -moz-border-radius:5px; -webkit-border-radius:0px; }
.handle:active { background:blue;    }
.range { display:block; }
*/

#scrollwrap { position:relative; /*overflow:hidden; height:50px; */overflow: auto; height: 62px; width: 178px; border:1px solid silver; margin: 4px auto; }
#scroll { position:relative; width:100%; white-space: nowrap; padding:2px; color:#fff; }
.slider { position:relative; cursor:pointer; height:1px; border-bottom: 1px solid #000; top: 4px; width:178px; margin: 4px auto; margin-bottom: 10px;  }
.progress { background-color:#ba1b12; height:2px; position:absolute; width:0; }

.handle { border:1px solid #cfcfcf; background-color:#fff; height:12px; width:50px; position:absolute; top: -6px;
  display:block; cursor:move; -moz-border-radius:14px; -webkit-border-radius:14px; }

.range { display:none; }