@charset "utf-8";
/* CSS Document */


/* CONTROLS */
.controls {
	float: left;
	width: 700px;
	height: 20px;
	padding: 5px;
	margin: 10px 0;
	border:1px solid #DEDEDE;
	background-color: #F0F0F0;
}

	/* SWF PLAYHEAD */
	.controls .playhead {
		float: left;
		width: 250px;
		height: 14px;
		padding: 3px 5px;
		margin-left: 10px;
		background: url('mp3playlist.png?') no-repeat 0px -140px;
	}
	
	/* BUTTONS */
	.controls .icon {
		width: 20px;
		height: 20px;
		float: left;
		display: block;
		cursor: pointer;
	}
	
	.controls .play-btn {
		background: url('mp3playlist.png') no-repeat 0px 0px;
	}.controls .play-btn:hover { background-position: 0px -20px }	

	.controls .paus-btn {
		background: url('mp3playlist.png') no-repeat -20px 0px;
	}.controls .paus-btn:hover { background-position: -20px -20px }	

	.controls .next-btn {
		background: url('mp3playlist.png') no-repeat -40px 0px;
	}.controls .next-btn:hover { background-position: -40px -20px }
	
	.controls .prev-btn {
		background: url('mp3playlist.png') no-repeat -60px 0px;
	}.controls .prev-btn:hover { background-position: -60px -20px }


	/* VOLUME */
	.volume-icon {
		display: block;
		float: left;
		height: 20px;
		width: 20px;
		margin: 0px 5px 0px 10px;
		background: url('mp3playlist.png') no-repeat 0px -40px;
	}
	
	.volume-track {
		display: block;
		float: left;
		width: 200px;
		height: 20px;
		cursor: pointer;
		background: url('mp3playlist.png') no-repeat 0px -120px;
	}
		.volume-track .volume-handle {
			display: block;
			width: 10px;
			height: 20px;
			cursor: pointer;
			background: url('mp3playlist.png') no-repeat -145px -60px;
		}
		.volume-track .volume-handle:hover { background-position: -145px -80px; }
		
	
	
	/* PLAY OPTIONS */
	.play-option {
		display: block;
		float: left;
		width: 75px;
		height: 20px;
		margin: 0px 5px 0px 10px;
	}
		.play-option span {
		display: block;
		width: 75px;
		height: 20px;
		cursor: pointer;	
		}
		
		span.opt-play-once {
			background: url('mp3playlist.png') no-repeat -140px 0px;
		} span.opt-play-once:hover { background-position: -215px 0px }
		
		span.opt-repeat {
			background: url('mp3playlist.png') no-repeat -140px -20px;
		} span.opt-repeat:hover { background-position: -215px -20px }
		
		span.opt-play-all {
			background: url('mp3playlist.png') no-repeat -140px -40px;
		} span.opt-play-all:hover { background-position: -215px -40px }





/* SONG LIST */
.songlist ul {
	float: right;
	width: 600px;
	margin: 0px;
	padding: 0px;
	border-top: 1px solid #DEDEDE;
}
	.songlist li {
		float: left;
		width: 600px;
		list-style: none;
		border-bottom: 1px solid #DEDEDE;
	}
	.songlist li.alt { background-color: #FBFBFB }
	.songlist li.act { background-color: #E0ECEF }

	.songlist li span.title {
		display: block;
		float: left;
		width: 300px;
		padding: 5px 10px;
		overflow: hidden;
		color: #2E5F87;
		cursor: pointer;
		background: none no-repeat 0px 0px;
	}
		.songlist li.track span.title:hover {
			width: 290px;
			padding-left: 20px;
		}
		.songlist li span.title .play {
			block: block;
			float: left;
			width: 12px;
			height: 12px;
			margin-right: 4px;
			background: url('mp3playlist.png') no-repeat -164px -64px;
		}
		.songlist li span.title:hover .play { background-position: -164px -84px; }
		.songlist li.act span.title .play { background-position: -164px -84px; }
	
	.songlist li.error span.title {
		color: #990000;
		cursor: default;
	}
		 .songlist li.error span.title .play { background-image: none; }



/* END OF FILE */