/*===================================================================================*/
/*  JPlayer Skin
/*===================================================================================*/

div.jp-jplayer,div.jp-jplayer img { max-width:100%; }
div.jp-jplayer.jp-jplayer-video { background-color:#292a2b; }
div.jp-jplayer video { margin-bottom:0; }
div.jp-jplayer img,div.jp-jplayer-video,div.jp-jplayer-video video { height:auto!important; vertical-align:top; }
.jp-audio-container,.jp-video-container { background-color: #f1f1f1; box-shadow: 1px 1px 1px #ddd; } /* no margin on player inside post header */
.post-header .jp-audio-container,.post-header .jp-video-container { margin-bottom:0; }
div.jp-interface { position:relative; width:97%; z-index:100; }
.jp-video div.jp-interface { -webkit-border-radius:0 0 2px; -moz-border-radius:0 0 2px; border-radius:0 0 2px; }
.jp-interface,a.jp-play,a.jp-pause,.seperator-first,.seperator-second { height:34px; }
.jp-controls { list-style-type:none; padding:0; margin:0; }
.jp-controls li { display:inline; margin:0; }
.jp-controls a { color:#404040; text-shadow:1px 1px rgba(255,255,255,1); background:transparent!important; width:24px; height:34px; padding:0 0 0 10px; display:inline-block; position:absolute; top:0; border-bottom:none; font-size:14px; line-height:34px; text-decoration:none; outline:none; overflow:hidden; z-index:1; opacity:.6; }
.jp-controls a:hover { color:#262626; background:transparent!important; text-decoration:none; opacity:.8; }
.jp-controls a span { text-indent:-9999px; display: block; }
a.jp-play,a.jp-pause { #{$start}:0; }
a.jp-pause { display:none; }
a.jp-pause:hover { background-position:-33px -30px; }
a.jp-mute,a.jp-unmute { #{$end}:55px; }
.jp-progress-container,.jp-volume-bar-container { position:absolute; top:0; height:8px; padding:13px 10px; }
.jp-progress-container { #{$start}:34px; #{$end}:92px; }
.jp-progress,.jp-volume-bar { height:9px; background:#E7E7E7; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-box-shadow:inset 0 1px 2px rgba(34,34,34,.09); -moz-box-shadow:inset 0 1px 2px rgba(34,34,34,.09); box-shadow:inset 0 1px 2px rgba(34,34,34,.09); }
.jp-seek-bar { width:0; height:9px; cursor:pointer; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; background:#E0E0E0; }
.jp-progress,.jp-seek-bar { background:rgba(102,102,102,.05); }
.jp-play-bar,.jp-volume-bar-value { width:0; height:9px; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; background:#BABABA; }
.jp-volume-bar-container { #{$end}:2px; width:40px; }
.jp-volume-bar { position:relative; overflow:hidden; width:40px; cursor:pointer; background:rgba(102,102,102,.1); }
.jp-volume-bar-value { width:0; }
.seperator-first,.seperator-second { width:0; position:absolute; top:0; #{$start}:33px; border:1px solid #fff; border-#{$start}-color:#ddd; border-width:0 1px; }
.seperator-second { #{$start}:auto; #{$end}:89px; }


/* volume controls taken over by mobile devices so don't need to see them */
.no-volume .jp-progress-container { #{$end}: 0px; }
.no-volume .jp-volume-bar-container, .no-volume .seperator-second, .no-volume .jp-mute, .no-volume .jp-unmute { display: none; }