.left { float: left; }
.right { float: right; }

#background {padding:0 14px 92px 14px; background: url(../images/musicbg.jpg) no-repeat center bottom #2b38a8; width:691px; margin:52px auto 0;}
#background h1{ margin:0; line-height:45px; color:#fff; font-size:22px;}

#player { background:url(../images/playerbg.jpg) repeat-x left top;height: 91px; overflow:hidden;position: relative; padding:0 36px;}
#player .cover { display:none;}
#player .ctrl .tag{ display:none;}
#player .ctrl .tag strong, #player .ctrl .tag span { display: block; text-overflow: ellipsis; }
#player .ctrl .tag span { font-size: 12px; margin-top: 5px; color: #ccc; }

#player .ctrl .icon {
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: 0.3s;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
  vertical-align:middle;
}
#player .ctrl .icon:hover, #player .ctrl .icon.enable { opacity: 1; }

#player .ctrl .control { padding:5px 0; height: 44px; }
#player .ctrl .control .rewind { background-image: url(../images/rewind.jpg);width:35px; height:35px; }
#player .ctrl .control .playback { background-image: url(../images/play.jpg); width:45px; height:45px; }
#player .ctrl .control .playback.playing { background-image: url(../images/pause.jpg); width:45px; height:45px; }
#player .ctrl .control .fastforward { background-image: url(../images/fastforward.jpg);width:35px; height:35px; }
#player .ctrl .control .volume .mute { background-image: url(../images/vbg.gif); background-position: center 14px; } /* 下移背景位置，使图标与条对齐 */
#player .ctrl .control .volume .mute.enable { background-image: url(../images/volume.jpg);background-position: center 14px; } /* 下移背景位置，使图标与条对齐 */
#player .ctrl .control .volume .slider { margin-top: 8px; width: 100px; }

#player .ctrl .progress {
	 border-top:1px solid #9a661a;
  padding-top: 8px; padding-right:245px;
}
#player .ctrl .progress .timer { font-size: 12px; color: #ccc; margin-top: 3px; }
#player .ctrl .progress .timer.right { float: right; margin-right: 10px; } 
#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle { background-position: center bottom; display:none; }
#player .ctrl .progress .repeat { background-image: url(../images/repeat.png); }
#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all { opacity: 1; }
#player .ctrl .progress .repeat.once { position: relative; }
#player .ctrl .progress .repeat.once:before { content: "1"; position: absolute; top: 3px; right: -2px; font-size: 8px; }
#player .ctrl .progress .shuffle { background-image: url(../images/shuffle.png); }

.control .right{ margin-top:2px;}
.control .left{ float:none; text-align:center;}
.control .volume .left{ float:left;}
/*.control .volume{ background:url(../images/vbg.gif) no-repeat right 9px; padding-right:20px; }*/

/* ==================== 调整后进度条 & 音量条设计 ==================== */

.slider {
  position: relative;
  height: 20px; /* 为手柄留出垂直空间 */
  cursor: default;
}

/* 所有 range 输入通用样式 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 83%;
  height: 6px;
  background: #000000; /* 未播放/未调节部分为黑色 */
  border-radius: 10px;
  outline: none;
  transition: all 0.3s;
  cursor: pointer;
}

/* 轨道 */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #000000; /* 未播放/未调节部分为黑色 */
  border-radius: 10px;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: #000000; /* 未播放/未调节部分为黑色 */
  border-radius: 10px;
  border: none;
}

/* 已播放进度 - 金色 */
input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #e7bc4d 0%, #e7bc4d var(--value), #000000 var(--value)); /* 金色已播放 + 黑色未播放 */
}
input[type="range"]::-moz-range-progress {
  background: #e7bc4d; /* 金色 */
  border-radius: 10px;
  height: 6px;
}
input[type="range"]::-ms-fill-lower {
  background: #e7bc4d; /* 金色 */
  border-radius: 10px;
}

/* 手柄 - 大圆形 + 金色辉光 + 垂直居中 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff, #e7bc4d); /* 金色渐变 */
  border: none;
  box-shadow: 0 0 12px rgba(231, 188, 77, 0.8); /* 金色辉光 */
  cursor: pointer;
  transition: all 0.3s;
  margin-top: -6px; /* 上移手柄，使圆心在轨道中央（轨道6px高，手柄18px → -6px 居中） */
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff, #e7bc4d); /* 金色渐变 */
  border: none;
  box-shadow: 0 0 12px rgba(231, 188, 77, 0.8); /* 金色辉光 */
  cursor: pointer;
}
input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff, #e7bc4d); /* 金色渐变 */
  border: none;
  box-shadow: 0 0 12px rgba(231, 188, 77, 0.8); /* 金色辉光 */
  cursor: pointer;
}

/* Hover & Active 增强辉光 */
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 20px rgba(231, 188, 77, 1);
  transform: scale(1.15);
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 20px rgba(231, 188, 77, 1);
  transform: scale(1.15);
}

/* 移除焦点轮廓 */
input[type="range"]:focus { outline: none; }

/* 指定滑块、滑杆为手形 */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track,
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
  cursor: pointer;
}



#playlist { min-height:227px; padding-top:35px; background:url(../images/ico_music.jpg) no-repeat 36px top #f7f1e8;}
#playlist li { line-height:35px; height:35px;padding-left: 52px;cursor: pointer; list-style:none;background: url(../images/side_a.gif) no-repeat 35px center;}
#playlist li.playing {background: url(../images/m_on2.jpg) no-repeat 0 center #ebe1d2;}