$size: 30px;
$logo: 45px;
$controls: 60px;
$wave: 20px;

@import "theme.css";

.sc-stratus{
	
	*{ margin: 0; padding: 0; }

	*:focus{ outline: none; }
		
	display: none;	
	height: $size;
	left: 0px;
	position: fixed;
	text-align: left;
	width: 100%;
	z-index: 999;
	
	&.stratus-bottom{
		border-width: 1px 0 0 0;
		bottom: 0px;
	}	

	&.stratus-top{
		border-width: 0 0 1px 0;
		top: 0px;
	}
	
	a, a:hover, a:focus{
		background-color: transparent;
		font-weight: normal;
		outline: none;
		text-decoration: none;
	}
	
	& > div, & > a{	height: $size; position: absolute; }
	
	.sc-border{	width: 1px; }	
	.sc-logo + .sc-border{ right: $logo; }
	.sc-volume + .sc-border{ right: $logo + $size; }
	.sc-info + .sc-border{ right: $logo + $size * 2; }
	.sc-download + .sc-border{ right: $logo + $size * 3; }
	.sc-buy + .sc-border{ right: $logo + $size * 4; }
	
	.sc-logo, .sc-volume, .sc-info, .sc-download, .sc-buy, .sc-prev, .sc-next{		
		
		opacity: 0.9;		
		
		&:hover{ opacity: 1.0; }		
		
		&.disabled, &.disabled:hover{ opacity: 0.2; }		
		
	}
	
	.sc-logo, .sc-volume, .sc-info, .sc-download, .sc-buy{
		
		cursor: pointer;
		display: block;
		width: $size;
		
		&.disabled, &.disabled:hover{ cursor: default; }
		
	}
	
	.sc-logo{
		right: 0px;
		width: $logo;
	}
	
	.sc-volume{
		
		right: $logo;
		
		&, &.max{ background-position: -200px 0px; }
		&.high{ background-position: -200px -30px; }
		&.low{ background-position: -200px -60px; }
		&.min{ background-position: -200px -90px; }
		
	}
	
	.sc-info{
		background-position: 0px -30px;
		right: $logo + $size;
	}
	
	.sc-download{		
		background-position: 0px -60px;
		right: $logo + $size * 2;		
	}
	
	.sc-buy{		
		background-position: 0px -90px;
		right: $logo + $size * 3;		
	}
	
	.sc-controls{
		
		top: 5px;
		width: $controls;
		
		&, div{ height: $wave; }
		
		div{
			cursor: pointer;
			position: absolute;
			width: $wave;
		}
		
		.sc-prev{ background-position: -100px 0px; }
		
		.sc-circle{

			border-radius: $wave; -moz-border-radius: $wave; -webkit-border-radius: $wave;
			left: $wave;
			width: $wave;
			
			.sc-play{ background-position: -100px -40px; }
			
			.sc-pause{
				background-position: -100px -60px;
				display: none;
			}
			
		}
		
		.sc-next{
			background-position: -100px -20px;
			left: $wave * 2;
		}
		
	}
	
	&.playing .sc-controls .sc-play{ display: none; }
	
	&.playing .sc-controls .sc-pause{ display: block; }
	
	.sc-time{
		
		left: $controls;
		overflow: hidden;
		top: 5px;
		
		&, & > div{ height: $wave; }
		
		&, img{ width: $controls * 3; }
		
		& > div{ position: absolute; }
		
		img{ height: 4 + $wave * 2; }
		
		.sc-wave{ height: $wave * 2; width: 100%; z-index: 10; }
		
		.sc-played{ z-index: 8; }
		
		.sc-buffer{ z-index: 7; }
		
	}
	
	.sc-time-indicator, .sc-caption{
		cursor: default;
		line-height: $size;
	}
	
	.sc-time-indicator{
		right: $logo + 10 + ($size * 4);		
		text-align: right;
		width: $logo * 2;
	}
	
	.sc-caption{ left: $controls + 10 + ($controls * 3); }
	
}

.sc-trackslist{ display: none; }

.sc-volume-bar{
	
	background-position: 0px -150px;
	display: none;
	right: 45px;
	position: fixed;
	width: 29px;
	z-index: 1000;
	
	&.stratus-bottom{
		bottom: 30px;
		border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
		border-width: 1px 1px 0 1px;
		height: 123px;		
	}
	
	&.stratus-top{
		border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;
		border-width: 0 1px 1px 1px;
		height: 130px;
		top: 30px;				
	}
	
	.sc-slider{
		
		height: 77px;
		margin: 37px 0 0 11px;
		position: relative;
		width: 8px;		
		
		.ui-slider-handle{
			
			background-color: transparent;
			background-position: -200px -120px;
			cursor: pointer;
			height: 15px;
			position: absolute;
			width: 8px;
			z-index: 2;
			
			&:focus{ cursor: pointer; outline: none; }
			
		}
		
	}
	
}

.sc-player-engine-container{ width: 1px; height: 1px; position: fixed; top: 2px; left: 2px; }