/* ----------< Standart color orange >---------------- */

.sc-player {
	font: .7em Arial, sans-serif;
	background-color: #eee;
	background:      linear-gradient( top, black, #ccc 0%, #fff 70%);
	background:   -o-linear-gradient( top, black, #ccc 0%, #fff 70%);
	background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%);
	background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff));
	color: #333;
	line-height: 1.6em;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-player a {
	text-decoration: none;
}

/* Artworks */

.sc-artwork-list {
	background-color: #eee;
	background:      linear-gradient( left bottom, #eee 20px, #333 350px );
	background:   -o-linear-gradient( left bottom, #eee 20px, #333 350px );
	background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
	background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee));
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

/* Scrubber */

.sc-scrubber {
	background-color: #e5e5e5;
	border-radius: 8px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-time-span {
	background-color: #ddd;
}

.sc-buffer,
.sc-played {
	background-color: #adadad;
	position: absolute;
}

.sc-played {
	background-color: #e74c14;
	background:      linear-gradient( top, black, #e74c14 0, #f6a400 90% );
	background:   -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
	background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400));
}

.sc-waveform-container {
	position: absolute;
	width: 100%;
}

/* Controls */

.sc-controls {
	border-radius: 100%;
	border: 2px solid white;
	background-color: #f6a400;
	background:      linear-gradient( 45deg, #e74c14, #f6a400 );
	background:   -o-linear-gradient( 45deg, #e74c14, #f6a400 );
	background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 );
	background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400));
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-controls:hover {
	background:      linear-gradient( 225deg, #e74c14, #f6a400 );
	background:   -o-linear-gradient( 225deg, #e74c14, #f6a400 );
	background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 );
	background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400));
}

.sc-controls > * {
	color: transparent;
}

.sc-play {
	background: url('img/play-standart.svg') no-repeat center center / 30%;
}
.sc-pause {
	background: url('img/pause-standart.svg') no-repeat center center / 30%;
}

/* Track list */

.sc-trackslist li.active {
	color: #fff;
	background: #e74c14;
}

.sc-track-duration {
	text-align: right;
	padding: 0 5px;
	margin-left: 5px;
}

.sc-trackslist li.active,
.sc-trackslist li:hover {
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-trackslist li:hover {
	background-color: #f6a400;
}

.sc-trackslist li.active a {
	color: #fff;
}

.sc-trackslist li a {
	color: #333;
}

/* Track info */

.sc-info.active {
	background: #fff;
	opacity: .9;
}

.sc-info a {
	color: #e74c14;
}

.sc-info p a {
	text-decoration: underline;
}

.sc-info a:hover {
	color: #f6a400;
}

.sc-info-toggle,
.sc-time-indicators {
	background: #f6a400;
	color: #ab3104;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	padding: 4px;
}
.sc-info-close,
.sc-info-close:hover {
	padding: 2px 4px;
	font-weight: bold;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-info-close:hover {
	background: #f6a400;
	color: #ab3104;
}

.sc-info-toggle:hover,
.sc-info-close {
	background: #fff;
	color: #e74c14;
}

/* Volume control */

.sc-volume-slider {
	background-color: #e5e5e5;
	border-radius: 2px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}

.sc-volume-slider .sc-volume-status {
	background-color: #666;
	border-right: 1px solid #f6a400;
}
