performance-art.fr/sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-blue.css

/* ----------< .blue >---------------- */

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

.blue .sc-player a {
	text-decoration: none;
	color: #2955ac;
}

/* Artworks */

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

/* Scrubber */

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

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

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

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

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

/* Controls */

.blue .sc-controls {
	border-radius: 100%;
	border: 2px solid white;
	background-color: #039;
	background:      linear-gradient( 135deg, #a1b8e4, #039 70% );
	background:   -o-linear-gradient( 135deg, #a1b8e4, #039 70% );
	background: -moz-linear-gradient( 135deg, #a1b8e4, #039 70% );
	background: -webkit-gradient(linear, left top, 30% 90%, from(#a1b8e4), color-stop(70%, #039), to(#039));
	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
}

.blue .sc-controls:hover {
	background:      linear-gradient( 45deg, #a1b8e4, #039 70% );
	background:   -o-linear-gradient( 45deg, #a1b8e4, #039 70% );
	background: -moz-linear-gradient( 45deg, #a1b8e4, #039 70% );
	background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a1b8e4), color-stop(70%, #039), to(#039));
}

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

/* Track list */

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

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

.blue .sc-trackslist li.active {
	background-color: #2955ac;
	color: #ddd;
}

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

/* Track info */

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

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

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

.blue .sc-info-toggle,
.blue .sc-time-indicators,
.blue .sc-info-close {
	background: #fff;
	color: #2955ac;
	border-radius: 4px;
	padding: 4px;
	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
}

.blue .sc-info-toggle:hover,
.blue .sc-info-close:hover {
	background: #2955ac;
	color: #eee;
}

.blue .sc-info-close {
	padding: 2px 4px;
	font-weight: bold;
}

/* Volume control */

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

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