/*************************
    - Basic settings -
*************************/
.HTML5AudioPlayer-wrapper, .HTML5AudioPlayer-wrapper * {
	display:block;
	cursor:default;
	border:none;
	overflow:visible;
	position:static;
	background:none;
	float:none;
	z-index:auto;
	list-style:none;
	line-height:0;
	direction:ltr;
	text-align:center;
	opacity:1;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
	margin:0;
	padding:0;
}

.HTML5AudioPlayer-wrapper {
	overflow:hidden;
	width:300px;
	height:29px;
}

.HTML5AudioPlayer-wrapper li {
	float:left;
	height:100%;
}

/******************
    - Buttons -
******************/
.HTML5AudioPlayer-wrapper .play-btn, 
.HTML5AudioPlayer-wrapper .volume-btn, 
.HTML5AudioPlayer-wrapper .volume-bar-container, 
.HTML5AudioPlayer-wrapper .volume-bar, 
.HTML5AudioPlayer-wrapper .seek-bar, 
.HTML5AudioPlayer-wrapper .play-bar, 
.HTML5AudioPlayer-wrapper .progress-bar-wrapper {
	cursor:pointer;
}

.HTML5AudioPlayer-wrapper .play-btn, 
.HTML5AudioPlayer-wrapper .volume-btn {
	height:100%;
	width:30px;
}

.HTML5AudioPlayer-wrapper .play-btn:hover {
	background-position:-34px 0;
}

.HTML5AudioPlayer-wrapper .progress-bar-container, 
.HTML5AudioPlayer-wrapper .volume-bar-container {
	height:8px;
	margin:11px;
	padding:1px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

.HTML5AudioPlayer-wrapper .volume-bar-container {
	width:30px;
	margin-left:0;
}

.HTML5AudioPlayer-wrapper .progress-bar-wrapper {
	position:relative;
	width:100%;
	height:100%;
}

.HTML5AudioPlayer-wrapper .seek-bar {
	height:100%;
	width:0;
	-webkit-transition:width 1s ease;
	-khtml-transition:width 1s ease;
	-moz-transition:width 1s ease;
	-o-transition:width 1s ease;
	transition:width 1s ease;
	-webkit-transform:translateZ(0);
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

.HTML5AudioPlayer-wrapper .play-bar, 
.HTML5AudioPlayer-wrapper .seek-bar {
	position:absolute;
	top:0;
	left:0;
}

.HTML5AudioPlayer-wrapper .volume-bar, 
.HTML5AudioPlayer-wrapper .play-bar {
	width:0;
	height:100%;
	-webkit-transform:translateZ(0);
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

.HTML5AudioPlayer-wrapper .play-bar.transition {
	-webkit-transition:width 0.5s ease;
	-khtml-transition:width 0.5s ease;
	-moz-transition:width 0.5s ease;
	-o-transition:width 0.5s ease;
	transition:width 0.5s ease;
}

.HTML5AudioPlayer-wrapper .duration-txt, 
.HTML5AudioPlayer-wrapper .time-txt {
	width:35px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color: #999 !important;
	font-weight:normal;
	line-height:29px;
	-webkit-font-smoothing:subpixel-antialiased;
	padding:0 12px 0 0px;
}

.HTML5AudioPlayer-wrapper .volume-btn:hover {
	background-position:-34px -60px;
}

/********************
    - Separator -
********************/
.HTML5AudioPlayer-wrapper .seperator {
	width:0;
	height:100%;
}

/******************
    - Playing -
******************/
.HTML5AudioPlayer-wrapper.playing .play-btn {
	background-position:-1px -30px;
}

.HTML5AudioPlayer-wrapper.playing .play-btn:hover {
	background-position:-34px -30px;
}

/***************
    - Mute -
***************/
.HTML5AudioPlayer-wrapper.mute .volume-btn {
	background-position:-1px -90px;
}

.HTML5AudioPlayer-wrapper.mute .volume-btn:hover {
	background-position:-34px -90px;
}

/****************
    - Error -
****************/
.HTML5AudioPlayer-wrapper.error .duration-txt, 
.HTML5AudioPlayer-wrapper.error .seperator, 
.HTML5AudioPlayer-wrapper.error .volume-btn, 
.HTML5AudioPlayer-wrapper.error .progress-bar-container, 
.HTML5AudioPlayer-wrapper.error .volume-bar-container {
	display:none;
}

.HTML5AudioPlayer-wrapper.error .for-play {
	display:block;
}

.HTML5AudioPlayer-wrapper.error .play-btn {
	cursor:default;
	background-position:-1px -120px;
}