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


@mixin transit-video-player($bg-image){ position:relative;
	div.media-video { font-size: 1em; line-height: 1.6; }	
	div.media-interface { position:absolute; bottom:0px; left:0px; width:100%; height:40px; }
	div.media-interface ul.media-controls { @include inline-block-list; height:100%; padding:0px 10px; position:relative;
		li{ margin:0 3px 0 0; }
		li:first-child{ width:30px; }
		
		a { overflow:hidden; text-indent: -9999px; display:block;
			&.media-play, &.media-pause, &.media-mute, &.media-unmute{ height:30px; width:30px; z-index: 1; 
				@include border-radius(3px); background-image:url($bg-image); background-repeat:no-repeat; position:absolute;
			}
			&.media-stop{ display:none; }
			&.media-play{ background-position:0px 0px; 
				&:hover{ background-position:-41px 0px; }
			}
			&.media-pause{ background-position:0px -42px; 
				&:hover{ background-position:-41px -42px; }
			}
			&.media-play, &.media-pause{ top:4px; left:10px; }
			&.media-mute, &.media-unmute{ top:4px; left:45px; }
		} 
	}
	
}