@import "compass/css3/border-radius";
@import "compass/css3/gradient";
@import "compass/css3/pie";
@import "compass/typography/lists";


@mixin transit-audio-player($bg-image, $font-color:#fff, $bg-color:#000){
	font-size: 1em; color: $font-color; line-height: 1.6; width: 360px; height:30px; position:relative;
	
	div.player_instance{ height:100%; width:100%; }
	div.media-interface-audio { height:30px; width:100%; background: $bg-color url($bg-image) 0 -210px;
	    @include border-radius(3px); position:absolute; top:0px; left:0px; 
		ul.media-controls { @include inline-block-list; height:100%;
		    a{ position: absolute; overflow: hidden; text-indent: -9999px; background-image:url($bg-image); background-repeat:no-repeat;
				&.media-play { background-position:0px 0px;
				    &:hover{ background-position:-33px 0; } 
				}
				&.media-pause { background-position:0 -30px; display: none;
				    &:hover { background-position:-33px -30px; } 
				}
				&.media-play, &.media-pause { width: 33px; height: 30px; z-index: 1; outline: none; 
					top:0px; left:0px; border-right:1px solid lighten($bg-color, 10%);
				}
				&.media-mute, &.media-unmute { width: 17px; height: 13px; z-index: 1; outline: none; top: 9px; left: 290px; 
					background-image:url($bg-image); background-repeat:no-repeat;
				}
				&.media-mute { background-position:-10px -68px;
				    &:hover { background-position:-43px -68px; } 
				}
				&.media-unmute { background-position:-10px -98px; display: none;
					&:hover { background-position:-43px -98px; } 
				}			
			}	
		}
	}
	
	div{
	  	&.media-progress { position: absolute; overflow: hidden; 
			position: absolute; top: 0; left: 34px; width: 225px; height: 6px; padding: 12px 10px;
				border-left: 1px solid darken($bg-color, 10%); border-right: 1px solid darken($bg-color, 10%);
		}
	  	&.media-audio div.media-type-single div.media-progress { width:175px;
	    	height: 7px; padding: 1px; background: url($bg-image) 0 -192px repeat-x; }
	  	&.media-seek-bar { width: 0px; height: 5px; cursor: pointer;
	    	background: url($bg-image) 0 -163px repeat-x; @include border-radius(1px); }
		&.media-play-bar { width: 0px; height: 5px; background: url($bg-image) 0 -133px repeat-x;
	  		@include border-radius(1px);
		}
		&.media-volume-bar-container { position: absolute; top: 0; left: 281px; width: 40px; height: 6px;
	    padding: 12px 10px; border-left: 1px solid lighten($bg-color, 10%); }
		&.media-volume-bar { position: relative; overflow: hidden; top:0px; left: 20px;
	    	background: url($bg-image) 0 -192px repeat-x; width: 40px; height: 9px; cursor: pointer; }
		&.media-volume-bar-value { width: 0px; height: 5px; margin: 1px; background: url($bg-image) 0 -133px repeat-x;
	    	@include border-radius(1px);
		} 
	}
	
	div.media-current-time{ display:none; }
	div.media-duration{ display:none; }
	/* The seeking class is added/removed inside jPlayer
	div.media-seeking-bg {
		background: url("pbar-ani.gif");
	}
	*/	
}