.audioplayer {
height: 10px; color: #fff; position: relative;
z-index: 1;    }
.audioplayer-mini {
width: 20px; margin: 0 auto;
}
.audioplayer > div {
position: absolute;
}
.audioplayer-playpause {
width: 20px; height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 2px;
left: 0;
}
.audioplayer:not(.audioplayer-mini) .audioplayer-playpause { z-index: 11;
}
.audioplayer-mini .audioplayer-playpause {
width: 100%;
}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
background-color: transparent;
}
.audioplayer-playpause a {
display: block;
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
width: 0;
height: 0;
border: 6px solid transparent;
border-right: none;
border-left-color: #54beba;
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 0px;
}
.audioplayer-playing .audioplayer-playpause a {
width: 10px; height: 10px; position: absolute;
top: 50%;
left: 50%;
margin:-10px 0 0 -5px; }
.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after {
width: 40%;
height: 100%;
background-color: #54beba;
content: '';
position: absolute;
top: 0;
}
.audioplayer-playing .audioplayer-playpause a:before {
left: 0;
}
.audioplayer-playing .audioplayer-playpause a:after {
right: 0;
}
.audioplayer-time {
width: 4.375em; height: 100%;
line-height: 2.375em; text-align: center;
z-index: 2;
top: 5px;
color: #111;
font-size: 13px
}
.audioplayer-time-current { left: 10px; }
.audioplayer-time-duration { right: 15px; }
.audioplayer-novolume .audioplayer-time-duration {
border-right: 0;
right: 0;
}
.audioplayer-bar {
height: 2px;
background-color: #c5c5c5;
cursor: pointer;
z-index: 1;
top: 2px;
right: 30px;
left: 20px;
margin-top: 0;
}
.audioplayer-novolume .audioplayer-bar {
right: 4.375em; }
.audioplayer-bar div {
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.audioplayer-bar-loaded {
background-color: #c5c5c5;
z-index: 1;
}
.audioplayer-bar-played {
background: #54beba; z-index: 2;
}
.audioplayer-volume {
width: 30px; height: 100%; text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: -3px;
right: 0;
}
.audioplayer-volume:hover,
.audioplayer-volume:focus {
background-color: transparent;
}
.audioplayer-volume-button {
width: 100%;
height: 100%;
}
.audioplayer-volume-button a {
width: 8px;
height: 5px;
background-color: #54beba;
display: block;
position: relative;
z-index: 1;
top: 38%;
left: 25%;
}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after {
content: '';
position: absolute;
}
.audioplayer-volume-button a:before {
width: 0;
height: 0;
border: 6px solid transparent;
border-left: none;
border-right-color: #54beba;
z-index: 2;
top: 50%;
right: 0;
margin-top: -6px;
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
width: 8px;
height: 8px;
border: 0.25em double #54beba;
border-width: 0.25em 0.25em 0 0;
left: 10px;
top: -2px;
-webkit-border-radius: 0 0.938em 0 0;
-moz-border-radius: 0 0.938em 0 0;
border-radius: 0 0.938em 0 0;
-webkit-transform: rotate( 45deg);
-moz-transform: rotate( 45deg);
-ms-transform: rotate( 45deg);
-o-transform: rotate( 45deg);
transform: rotate( 45deg);
}
.audioplayer-volume-adjust {
height:40px;
margin-bottom: 10px;  cursor: default;
position: absolute;
left: 10px;
right: -5px; bottom: 0px;  }
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
opacity: 0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust {
top: auto;
bottom: 100%;
}
.audioplayer-volume-adjust > div {
width: 3px;
height: 50px;
background-color: #c5c5c5;
cursor: pointer;
position: relative;
z-index: 1;
margin: 0 auto 0;
}
.audioplayer-volume-adjust div div {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #54beba; }
.audioplayer-novolume .audioplayer-volume {
display: none;
}
.audioplayer-play,
.audioplayer-pause,
.audioplayer-volume a { }
.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div { }
.audioplayer-bar,
.audioplayer-volume-adjust > div { }
.audioplayer-volume-adjust div div,
.audioplayer-bar-played { }
.audioplayer-volume-adjust { }
.audioplayer *,
.audioplayer *:before,
.audioplayer *:after { }