.audiojs { width: 240px; height: 35px; background: #FFF; /* background of the container */ overflow: hidden; float: left; }
.audiojs audio { position: absolute; left: -1px; }
.audiojs .play-pause { width: 35px; height: 35px; float: left; overflow: hidden; position: relative; }
.audiojs p { display: none; width: 35px; height: 35px; margin: 0; cursor: pointer; border: none; }
.audiojs .play { display: block; background: url("play-ppage.png") no-repeat; }
.audiojs .scrubber { position: relative; float: left; width: 200px; background: #EEE; /* Initial scrubber colour */ height: 4px; margin: 15px 0 0 5px; overflow: hidden; }
.audiojs .progress { position: absolute; top: 0px; left: 0px; height: 4px; width: 0px; background: #393939; /* Scrubber colour as content plays */ z-index: 1; }
.audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 4px; width: 0px; background: #E0E0E0; /* Scrubber colour when content loading/loaded */ }
.audiojs .error-message { float: left; display: none; margin: 0; height: 35px; width: 240px; overflow: hidden; line-height: 35px; white-space: nowrap; color: #fff; -o-text-overflow: ellipsis; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
.audiojs .error-message a { color: #000; text-decoration: none; padding: 0; border: none; white-space: wrap; }
.audiojs .pause { background: url("pause-ppage.png") no-repeat; }
.audiojs .loading { width: 15px; height: 15px; margin: -9px 0 0 -9px; position: absolute; top: 50%; left: 50%; background: url("loading-button.png") no-repeat; -webkit-animation: loading 1s infinite linear; -moz-animation: loading 1s infinite linear; -o-animation: loading 1s infinite linear; -ms-animation: loading 1s infinite linear; animation: loading 1s infinite linear; }
    .audiojs .time {
        display: none;
    }
.playing .play,
.playing .loading,
.playing .error { display: none; }
.playing .pause { display: block; }
.loading .play,
.loading .pause,
.loading .error { display: none; }
.loading .loading { display: block; }
.error .error { display: block; }
.error .play-pause p { cursor: auto; }
.error .error-message { display: block; }

@-moz-keyframes loading {
    0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@-webkit-keyframes loading {
    0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@-o-keyframes loading {
    0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@-ms-keyframes loading {
    0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@keyframes loading {
    0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}