WordPress 3.6 Media Player CSS

/* Skin for WordPress 3.6 Media Player (MediaElements.js)
*  Made for State WordPress Theme (WIP)
*  This paste is not "cleaned up" and done, it only serves as an example.
*  Usage: I this case the CSS is in a separate file called "mediaplayer.css" you can name it whatever you want.
*  The CSS file is located in a subfolder of the theme named "CSS" along with a
*  media folder (player interface elements). The CSS is then called from the theme functions.php
*  Note. You can put this CSS in your main CSS file and the interface elements could be wherever you want.
*  Screenshots: http://cl.ly/OvOu
================================================== */

.mejs-mediaelement,
 .mejs-container {
    background: #006877;
    background-image: none!important;
    font-weight: bold;
}

.mejs-controls {
    background: rgba(6,105,122,0.82) none!important;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded,
 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #87cfdc!important;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #24b4cd!important;
}

.mejs-controls .mejs-time-rail span,
 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    border-radius: 0!important;
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
}

.mejs-overlay-loading {
    background: none!important;
}

.mejs-overlay-loading span {
    background: #fff url(mediaplayer/simple-loading-animation.gif) no-repeat 50% 50%!important;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 100px!important;
    height: 100px!important;
    margin: -10px 0 0 -10px!important;
}

.mejs-controls .mejs-time-rail .mejs-time-buffering {
    background: #004d5a;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    background-image: none!important;
    background-color: #1e252f!important;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
    background-image: none!important;
    background: rgba(6,105,122,0.82)!important;
}

.mejs-overlay-button {
    background-image: url(mediaplayer/bigplay.svg)!important;
}

.no-svg .mejs-overlay-button {
    background-image: url(mediaplayer/bigplay.png)!important;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    border: solid 5px #fff!important;
    border-color: #fff transparent transparent transparent!important;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
    background: #fff!important;
    border: none!important;
    color: #06697a!important;
    font-weight: bold;
}

.mejs-controls .mejs-button button {
    background-image: url(mediaplayer/controls.svg)!important;
}

.no-svg .mejs-controls .mejs-button button {
    background-image: url(mediaplayer/controls.png)!important;
}