@charset 'utf-8';

/*↓reset↓*/
.jplayer,
.jplayer * { padding:0; margin:0;}
/*↑reset↑*/

.jplayer { margin:8px 0;}

.jp-audio {
display:inline-block;
max-width:640px; width:100%; height:32px;
}

.jp-interface {/* 全体 */
position:relative;
width:100%; height:32px;
background:linear-gradient(#555,#444 50%,#333 50%,#222);
box-shadow:0 2px 2px rgba(0,0,0,50%);
border-radius:4px;
}
.jp-interface:before {
position:absolute; left:0; right:0; top:0; bottom:0;
border:solid 1px; border-color:#888 #444 #222;
border-radius:4px;
content:'';
}

.jp-controls { position:absolute; left:0; right:0; top:0; bottom:0;}
.jp-controls li { list-style-type:none;}
.jp-controls a { position:absolute; display:block; font-size:0;}
.jp-controls a:hover { animation:jp-controls-a 1s forwards;}
@keyframes jp-controls-a { 0% { opacity:0.75; filter:drop-shadow(0 0 4px #FFF) drop-shadow(0 0 4px #FFF);}}

a.jp-play, a.jp-pause,
a.jp-mute, a.jp-unmute {
top:8px;
width:16px; height:16px;
background:url( ../img/icon.png ) no-repeat 0 0 / auto 16px;
filter:drop-shadow(0 1px 1px rgba(0,0,0,75%));
}
a.jp-play, a.jp-pause { left:8px; z-index:1;}/* 再生・停止 */
a.jp-mute, a.jp-unmute { right:64px;}/* 音声オン・オフ */

a.jp-play { background-position:0 0;}
a.jp-pause { background-position:-16px 0; display:none;}
a.jp-mute { background-position:-32px 0;}
a.jp-unmute { background-position:-48px 0; display:none;}

.jp-progress {
position:absolute; top:8px; left:32px;
width:calc(100% - 128px); height:16px;
}
.jp-seek-bar { width:100%;}/* 経過：凹 */
.jp-volume-bar {/* 音量：凹 */
position:absolute; top:8px; right:8px;
width:48px;
}
.jp-seek-bar,
.jp-volume-bar {/* 経過,音量：凹…地 */
height:16px;
background:linear-gradient(transparent 4px, #333 4px, #333 12px, transparent 12px);
cursor:pointer;
}
.jp-seek-bar:before,
.jp-volume-bar:before {/* 経過,音量：凹…線 */
position:absolute; left:-1px; right:-1px; top:3px; bottom:3px;
border:solid 1px; border-color:#222 #444 #888;
content:'';
}
.jp-seek-bar:after,
.jp-volume-bar:after {/* 経過,音量：凹…影 */
position:absolute; left:0; right:0; top:4px; bottom:10px;
background:rgba(0,0,0,50%);
content:'';
}
.jp-play-bar,
.jp-volume-bar-value {/* 経過,音量：凸 */
background:linear-gradient(transparent 4px, #9C3 4px, #9C3 12px, transparent 12px);
width:0; height:100%;
}

/* 未使用
.jp-type-single   a.jp-stop { top:26px; left:90px;}
.jp-type-playlist a.jp-stop { top:26px; left:126px;}
a.jp-stop {
width:28px; height:28px; z-index:1;
background: url( ../img/jplayer/blue.monday.jpg ) 0 -83px no-repeat;
}
a.jp-stop:hover {
background: url( ../img/jplayer/blue.monday.jpg ) -29px -83px no-repeat;
}
*/