/*
Skin Name: Default
*/

/*  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 #ffffff;
}

/* 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: #777777;
}

/*
=============================================== 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: #777777;
}

/* 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: #ffffff;
    background: #bbbbbb;
    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: 0px !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, .3), 0 1px 2px 0 rgba(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, .3), 0 1px 2px 0 rgba(0, 0, 0, .3);
    background: #ffffff url(timer-handle.png) 1px 1px no-repeat;
    background-color: transparent\9; /* 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: 0px;
    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, .3), 0 1px 2px 0 rgba(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, .3), 0 1px 2px 0 rgba(0, 0, 0, .3);

    background: #ffffff url(timer-handle.png) 1px 1px no-repeat;

    background-color: transparent\9; /* IE8 and below */

}