$bar-color: #efefef;
$text-color: #6a6a6a;
$accent-color: #ed1c24;

$time-color: darken($bar-color, 10);
$buffer-color: darken($bar-color, 25);
$border-color: darken($bar-color, 10);

@mixin sprites { background-image: url("/images/sc-sprites.png"); }

.sc-stratus{
	
	// stratus bar
	background-color: $bar-color;
	border-color: $border-color;
	border-style: solid;
	color: $text-color;		
	font: normal normal 12px 'Lucida Grande', Helvetica, Arial, sans-serif;
	
	// link color
	a{ color: $accent-color; }
	
	// border after each button	
	.sc-border{ background-color: $border-color; }
	
	// sprite background	
	.sc-logo, .sc-volume, .sc-info, .sc-download, .sc-buy, .sc-prev, .sc-next, .sc-play, .sc-pause{ @include sprites; }
	
	// set up gradient
	.sc-circle, .sc-time, .sc-played, .sc-buffer{		
		background-image: url("/images/sc-gradient.png");
		background-repeat: repeat-x;
	}
	
	// play/pause button circle
	.sc-circle{ background-color: $accent-color; }
	
	// waveform time span
	.sc-time{		
		background-color: $time-color;		
		.sc-played{ background-color: $accent-color; }	
		.sc-buffer{ background-color: $buffer-color; }		
	}
	
}

.sc-volume-bar{
	
	// volume bar
	background-color: $bar-color;	
	border-color: $border-color;
	border-style: solid;
	
	&, .ui-slider-handle{ @include sprites; }
	
}