/* ------------------------MAIN --------------------------------- */

.vtem-audio {font-size:12px; font-family:Verdana, Arial, sans-serif; line-height:1.6; padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

/* --------------------- INTERFACE ---------------------------- */

.vtem-interface {position:relative; width:100%; overflow:hidden; height:75px;}
.vtem-interface .vtem-controls {list-style-type:none; padding:0; margin:0;}
.vtem-interface .vtem-controls li {display:block; float:left; margin:2px; line-height:normal;}
.vtem-interface .vtem-controls li a {display:block; overflow:hidden; text-indent:-9999px;}

/* ---------------------BUTTONS ----------------------------- */

.vtem-play, .vtem-pause {width:58px;height:56px; z-index:1;}
.vtem-play {background-position:2px 0;}
.vtem-play:hover {background-position:2px -56px;}
.vtem-pause {background-position:-57px 0; display:none;}
.vtem-pause:hover {background-position:-57px -56px;}

.vtem-previous, .vtem-next {background-position:0 -114px; width:38px; height:38px; margin-top:12px;}
.vtem-previous:hover {background-position:-38px -114px;}
.vtem-next {background-position:0 -152px;}
.vtem-next:hover {background-position:-38px -152px;}

.vtem-play, .vtem-pause, .vtem-previous, .vtem-next, .vtem-mute, .vtem-unmute {background-repeat:no-repeat; background-color:transparent; cursor:pointer; transition:opacity 0.2s ease;}

.vtem-mute, .vtem-unmute {width:27px; height:21px; margin:20px 0 0 10px;}
.vtem-mute {background-position:0 -190px;}
.vtem-mute:hover {background-position:-28px -190px;}
.vtem-unmute {background-position:0 -211px; display:none;}
.vtem-unmute:hover {background-position:-27px -211px;}

/* ------------------------ BARS -------------------------- */

.vtem-progress, .vtem-seek-bar, .vtem-play-bar {cursor:pointer; position:absolute; left:0;}
.vtem-progress {width:100%; height:6px; overflow:hidden; bottom:0; z-index:0;}
.vtem-seek-bar {width:100%; height:100%; top:0; z-index:0;}
.vtem-play-bar {width:inherit; height:100%; top:0; z-index:1; transition:width 0.1s linear;}

.vtem-volume-bar {overflow:hidden; background:#ddd; width:60px; height:5px; cursor:pointer; float:left; margin-top:30px; border-top:1px solid #aaa; border-left:1px solid #aaa; border-bottom:1px solid #fff; border-right:1px solid #fff;}
.vtem-volume-bar-value {width:0; height:5px;}
.vtem-progress, .vtem-seek-bar, .vtem-play-bar, .vtem-volume-bar, .vtem-volume-bar-value {border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}

.vtem-duration {text-align:right;}
.vtem-current-time, .vtem-duration {position:absolute; font-size:9px; bottom:5px; left:0; width:100%;}

/* --------------------- PLAYLIST ------------------------ */

.vtem-playlist {width:99%; margin-top:8px; cursor:pointer; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.vtem-playlist ul {list-style-type:none; margin:8px 0; padding:0 20px; font-size:11px;}
.vtem-playlist li {padding:5px 0; border-bottom:1px dotted #bbb; position:relative; overflow:hidden; cursor:pointer; display:block; width:100%;}
.vtem-playlist li:last-child {border-bottom:none;}
.vtem-playlist li::before {
    content: "›";
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    line-height: 1;
    color: #666;
}
.vtem-playlist li:hover, .vtem-playlist li:hover::before, .vtem-playlist li.active, .vtem-playlist li.active::before, .vtem-playlist a.vtem-playlist-current {color:#f00; background-color:transparent;}

.vtem-type-playlist .vtem-playlist li.vtem-playlist-last {border-bottom:none;}
.vtem-type-playlist .vtem-playlist .vtem-free-media {display:inline; margin-left:20px;}

.vtem-section-header {
    background: #1f3047;
    color: #fff;
    padding: 8px 15px;
    margin: 15px 0 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vtem-empty-playlist {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
    margin: 5px 0;
}

.vtem-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #ddd;
    color: #999;
}