/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 *
 * Original Skin Name: Zenphoto light
 *
 * Skin licensed under GPL v2 licenses.
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Malte Müller (acrylian) - maltem.de for the CMS Zenphoto - www.zenphoto.org
 * Skin Version: 1.0 (jPlayer 2.1.0)
 * Date: 21th September 2011
 *
 * rework: Sylvain Killian
 */

div.jp-audio {
    font: 0.85em 'Open Sans', sans-serif;
    width: 100%;
}

div.jp-audio-hidden {
    display: none;
}

div.jp-interface {
    width: 100%;
    padding-bottom: 40px;
}

/* @group CONTROLS */
div.jp-controls {
    display: inline;
    height: 28px;
    float: left;
}

div.jp-controls ul {
    list-style-type: none;
}

div.jp-controls ul li {
    display: inline;
    float: left;
}

div.jp-controls ul a {
    display: block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    text-indent: -9999px;
}

a.jp-play {
    background: url("index.php?tf=/img/jplayer.png") -5px -5px no-repeat;
}

a.jp-play:hover {
    background: url("index.php?tf=/img/jplayer.png") -5px -36px no-repeat;
}

a.jp-pause {
    background: url("index.php?tf=/img/jplayer.png") -108px -5px no-repeat;
    display: none;
}

a.jp-pause:hover {
    background: url("index.php?tf=/img/jplayer.png") -108px -36px no-repeat;
}

a.jp-stop {
    background: url("index.php?tf=/img/jplayer.png") -30px -5px no-repeat;
}

a.jp-stop:hover {
    background: url("index.php?tf=/img/jplayer.png") -30px -36px no-repeat;
}

a.jp-previous {
    background: url("index.php?tf=/img/jplayer.png") -55px -5px no-repeat;
}

a.jp-previous:hover {
    background: url("index.php?tf=/img/jplayer.png") -55px -36px no-repeat;
}

a.jp-next {
    background: url("index.php?tf=/img/jplayer.png") -80px -5px no-repeat;
}

a.jp-next:hover {
    background: url("index.php?tf=/img/jplayer.png") -80px -36px no-repeat;
}

/* @end */

/* @group progress bar */

div.jp-audio div.jp-progress {
    width: 100%;
    height: 6px;
    margin-top: 8px;
    border: solid 1px #b5b5b5;
    clear: both;
}

div.jp-seek-bar {
    height: 6px;
    cursor: pointer;
}

div.jp-play-bar {
    background: url("index.php?tf=/img/jplayer.png") 0 -93px repeat-x;
    height: 6px;
}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
    background: url("index.php?tf=/img/jplayer.seeking.gif");
}

/* @end */

/* @group current time and duration */
div.jp-audio div.jp-time-holder {
    padding-top: 4px;
    display: inline;
    float: right;
}

div.jp-current-time {
    float: right;
    display: inline;
}

div.jp-duration {
    float: right;
    display: inline;
}

div.jp-current-time::before {
    width: 20px;
    content: '/ ';
    float: right;
    display: inline;
    text-align: center;
}

/* @end */

/* @group playlist */

div.jp-playlist {
    width: 100%;
}

div.jp-playlist ul {
    list-style-type:none;
}

div.jp-playlist li div {
}

div.jp-playlist li {
    list-style-type:none;
}

div.jp-playlist a.jp-playlist-item div.affiche {
    display: block;
    width: 100%;
    min-height: 60px;
    border-top: solid 1px #878787;
    padding: 4px;
}

div.jp-playlist a.jp-playlist-current div.affiche {
    width: 100%;
    text-shadow: 0px 0px 4px #ffffff;
}

div.jp-playlist a.jp-playlist-item-remove {
    float:right;
    display:inline;
    text-align:right;
}

div.jp-playlist span.composer {
    display: inline-block;
    width: 18%;
    float: left;
    padding-right: 2%;
}

div.jp-playlist span.piece {
    display: inline-block;
    width: 24%;
    float: left;
    padding-right: 2%;
}

div.jp-playlist span.title {
    display: inline-block;
    width: 38%;
    float: left;
    padding-right: 2%;
}

div.jp-playlist span.date {
    display: inline-block;
    width: 14%;
    float: left;
}

div.jp-playlist span.date::before {
    content: '[';
}

div.jp-playlist span.date::after {
    content: ']';
}

/* @end */

/* @group NO SOLUTION error feedback */

.jp-no-solution {
    position:absolute;
    width:100%;
    margin-left:-202px;
    left:50%;
    top: 10px;

    padding:5px;
    font-size:11px;
    border:2px solid #009be3;
    display:none;
}

.jp-no-solution a {
}

.jp-no-solution span {
    font-size:13px;
    display: block;
    text-align:center;
    font-weight:bold;
}

/* @end */