/*
Skin Name: Fancy
*/
/*  Table of Contents 
01. Responsive Max Width
02. Main Backgrounds
03. Borders
04. Button/Font Colors
05. Playlist Backgrounds & Fonts
06. Progress/Volume Bar Backgrounds
07. Player Height
08. Button Sizes
*/
/*
=============================================== 01. Responsive Max Width ===============================================
*/
/* body .responsive-wrapper {max-width:550px;} */
/*
=============================================== 02. Main Backgrounds ===============================================
*/
/* Main Background Color */
body .mejs-container.progression-skin.progression-fancy .mejs-controls {
    background: #f1f1f1;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#deddde), to(#f2f2f2));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #deddde, #f2f2f2);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #deddde, #f2f2f2);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #deddde, #f2f2f2);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #deddde, #f2f2f2);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #deddde 0%, #f2f2f2 100%)
    }
/* Button Hover Background Color */
body .progression-skin.progression-fancy .mejs-controls .mejs-nexttrack:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-prevtrack:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-show-playlist:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-hide-playlist:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-mute button:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-fullscreen-button:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-fancy .mejs-controls .mejs-playpause-button:hover {
    background: #deddde;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#f2f2f2), to(#deddde));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #f2f2f2, #deddde);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #f2f2f2, #deddde);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #f2f2f2, #deddde);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #f2f2f2, #deddde);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #f2f2f2 0%, #deddde 100%)
    }
/*
=============================================== 03. Borders ===============================================
*/
/* Main Outline Border */
body .mejs-container.progression-skin.progression-fancy, body .mejs-container.progression-skin.progression-fancy .mejs-controls {
    border-color: #c2c2c2
    }
/* Button Borders */
body .progression-skin.progression-fancy .mejs-controls .mejs-playpause-button, body .progression-skin.progression-fancy .mejs-inner .mejs-controls .mejs-time, body .progression-skin.progression-fancy .mejs-controls .mejs-fullscreen-button, body .progression-skin.progression-fancy .mejs-controls .mejs-show-playlist, body .progression-skin.progression-fancy .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-fancy .mejs-controls .mejs-prevtrack button, body .progression-skin.progression-fancy .mejs-controls .mejs-nexttrack button {
    border-color: #c2c2c2
    }
/*
=============================================== 04. Button/Font Colors ===============================================
*/
/* Main Button Color */
body .progression-skin.progression-fancy .mejs-controls button {
    color: #6b6b6b;
    text-shadow: 1px 1px 1px #fff
    }
/* Main Button Hover Color */
body .progression-skin.progression-fancy .mejs-controls button:hover {
    color: #6b6b6b
    }
/* Timer Color 00:00 */
body .progression-skin.progression-fancy .mejs-inner .mejs-time .mejs-currenttime, body .progression-skin.progression-fancy .mejs-inner .mejs-time .mejs-duration {
    color: #777
    }
/*
=============================================== 05. Playlist Backgrounds & Fonts ===============================================
*/
/* PlayList Borders */
body .progression-skin.progression-fancy .mejs-playlist ul, body .progression-skin.progression-fancy .mejs-playlist li {
    border-color: #c2c2c2
    }
/* PlayList Background */
body .progression-skin.progression-fancy .mejs-playlist, body .progression-skin.progression-fancy .mejs-playlist ul {
    background: #efefef
    }
/* PlayList Font Color */
body .progression-skin.progression-fancy .mejs-playlist li {
    color: #777
    }
/* PlayList Hover Background */
body .progression-skin.progression-fancy .mejs-playlist li:hover {
    background-color: rgba(0, 0, 0, 0.06)
    }
/* PlayList Current Selected Item */
body .progression-skin.progression-fancy .mejs-playlist li.current {
    color: #fff;
    background: #bbb;
    background: rgba(0, 0, 0, 0.35)
    }
/*
=============================================== 06. Progress/Volume Bar Backgrounds ===============================================
*/
/* Main Progress Bar Background */
body .progression-skin.progression-fancy .mejs-controls div.mejs-time-rail {
    padding-top: 11px
    }
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail span {
    height: 9px
    }
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail span.mejs-time-float {
    height: 17px
    }
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-total {
    background: #9a9a9a;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#bcbcbc), to(#9a9a9a));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #bcbcbc 0%, #9a9a9a 100%);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4)
    }
/* Main Progress Bar Loading Background */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-loaded {
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    background: #8a8a8a;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#b1b1b1), to(#8a8a8a));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #b1b1b1, #8a8a8a);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #b1b1b1, #8a8a8a);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #b1b1b1, #8a8a8a);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #b1b1b1, #8a8a8a);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #b1b1b1 0%, #8a8a8a 100%)
    }
/* Main Progress Bar Currently Played Background */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-current {
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    background: #737373;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#88888b), to(#737373));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #88888b, #737373);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #88888b, #737373);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #88888b, #737373);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #88888b, #737373);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #88888b 0%, #737373 100%)
    }
/* Main Progress Bar Handle */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-handle {
    display: block;
    margin: 0;
    padding: 0 !important;
    border: 0;
    width: 15px;
    height: 15px;
    top: -3px;
    left: -8px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    background: #fff url(../build/timer-handle.png) 1px 1px no-repeat;
    background-color: transparent	;
    /* IE8 and below */
    }
/* Volume Bar Background Default */
body .progression-skin.progression-fancy .mejs-controls div.mejs-horizontal-volume-slider {
    margin-top: 5px;
    height: 2px
    }
body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    height: 9px;
    top: 11px;
    background: #9a9a9a;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#bcbcbc), to(#9a9a9a));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #bcbcbc, #9a9a9a);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #bcbcbc 0%, #9a9a9a 100%);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4)
    }
/* Volume Bar Background Volume On */
body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    background: #737373;
    /* IE Fall-Back */
    background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#88888b), to(#737373));
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(bottom, #88888b, #737373);
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(bottom, #88888b, #737373);
    /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(bottom, #88888b, #737373);
    /* IE 10+ */
    background-image: -o-linear-gradient(bottom, #88888b, #737373);
    /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #88888b 0%, #737373 100%)
    }
/* Volume Bar Volume Handle */
body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    display: block;
    position: absolute;
    margin-left: 0;
    top: 8px;
    text-align: center;
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    background: #fff url(../build/timer-handle.png) 1px 1px no-repeat;
    background-color: transparent	;
    /* IE8 and below */
    }