div.slide_wrap {background:#ccc;width:370px;display:block;margin:0;}

div.slide_wrap div.info {vertical-align:top;display:block;width:auto;float:left;font-size:14px;line-height:20px;border:1px solid #ccc;padding:3px 8px;border-radius:4px;}

/* Slider  */
.slider {width:220px;padding:0 26px 0 0;height:28px;display:block;float:left;margin-left:-8px;}
.slider-volume {width:220px;display:block;float:left;}
.slider > .dragger {
	float:left;
	background: #AAC866;
	-webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
	box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #496805;
	width: 16px;
	height: 16px;
}

.slider > .dragger:hover {
  background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
}

.slider > .track, .slider > .highlight-track {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #aaa;
  height: 4px;
}

.slider > .highlight-track {
	border: 1px solid #496805;
	background: #AAC866;
}

@media (max-width: 480px) { 
	div.slide_wrap {width:380px;}
	.slider {width:220px;}
	.slider-volume {width:220px;}
}