/**
Skin: Gradient Fat
Description: A thicker skin with a gradient
*/



.sm2-bar-ui.gradient-fat {
    font-family: inherit;
    min-width: 30em;
    max-width: 100%;
}

.sm2-bar-ui.gradient-fat.playlist-open {
	/*max-width: 100%;*/
}

.sm2-bar-ui.gradient-fat .sm2-inline-gradient {
    background-image: none;
}

/**
 * needed to fix possible border-box issues
 */
.gradient-fat .sm2-button-bd a {
    border: none;
}

/**
 * optional setting for bar-ui to have no borders between play and progress
 */
.sm2-bar-ui.noborder .sm2-inline-element {
    border: none;
}

a.sm2-inline-button {
    color: #2288CC;
}

.sm2-bar-ui.gradient-fat .sm2-inline-element, .sm2-bar-ui.gradient-fat .sm2-button-element .sm2-button-bd {
    min-width: 5em;
    /*this sets the overall height*/
    min-height: 5em;
}
/**
 * this may be needed if increasing height above
 */
.sm2-bar-ui.gradient-fat .sm2-playlist-target {
    top: -8px;
}

.sm2-bar-ui.gradient-fat  .sm2-progress .sm2-progress-track {
    background-color: #3caac8;
    background-color: rgba(60,170,200,.8);
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(44,124,145,.8)),to(rgba(78,183,212,.8)));
    background: -webkit-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));
    background: -moz-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));
    background: -o-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));
    background: -ms-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));
    background: linear-gradient(rgba(44,124,145,.8),rgba(78,183,212,.8));
}

.sm2-bar-ui.gradient-fat .sm2-main-controls,
.sm2-bar-ui.gradient-fat .sm2-playlist-drawer {
    background-color: rgba(0,0,0,.6);
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.8)),to(rgba(0,0,0,.8)));
    background: -webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.8));
    background: -moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.8));
    background: -o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.8));
    background: -ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.8));
    background: linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.8));
}


@media only screen and (max-width: 767px) {
    .sm2-bar-ui.gradient-fat {
        width: 100%;
        min-width: 1em;
        max-width: 750px;
    }

}