.audioplayer{
    width: 100%;
    height: 30px;
    border: 1px solid black;
	box-shadow: 2px 2px 3px #bbb;
}

.play,.pause{
    height:30px; 
    width: 30px;
    border: none;
    float:left;
    outline:none;
}

.play{background: url(play_pause_24.png) no-repeat 4px 3px;}
.pause{background: url(play_pause_24.png) no-repeat -32px 3px;}

.timeline{
    width: calc(100% - 50px);
    height: 4px;
    margin: 12px 0 0 10px;
    float: left;
	border:1px solid #999;
    background: rgba(100,100,100,1);
    box-shadow: 2px 2px 2px #bbb;
}

.playhead {
    width: 0px;
    height: 4px;
    margin: 0;
    float: left;
    background: rgba(255,213,86,1);
}

.vol_control_background {
    display:none;
    width:36px;
	height:16px;
	position:absolute;
    margin-top:4px;
    margin-left:243px;
	background:#000;
	float:left;
}
.vol_control_background_2 {
    display:none;
    width:29px;
	height:16px;
	position:absolute;
    margin-top:4px;
    margin-left:243px;
	background:#ffd556;
	float:left;
}

.vol_control {
    display:none;
    width: 40px;
	height:24px;
    margin:2px 0 0 -20px;
    background: transparent url(volume2.png) no-repeat;
	outline:none;
	position:absolute;
	float:left;
}
input[type='range'] {
  -webkit-appearance: none !important;
}
input[type=range]::-moz-range-track {
    width: 40px;
    height: 0px;
    border: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent;
  height: 16px;
  width: 10px;
  cursor: pointer;
}
input[type='range']::-moz-range-thumb {
  -moz-appearance: none !important;
  background: transparent;
  height: 16px;
  width: 10px;
  border: none;
  cursor: pointer;
}