diff --git a/airsonic-main/src/main/webapp/style/buuftheme.css b/airsonic-main/src/main/webapp/style/buuftheme.css
index bfdca610..f6193910 100644
--- a/airsonic-main/src/main/webapp/style/buuftheme.css
+++ b/airsonic-main/src/main/webapp/style/buuftheme.css
@@ -6,7 +6,7 @@
  * Icons used are released under Creative Commons.
  * Heading icons are part of the Albook icon pack created by Laurent Baumann (http://lbaumann.com/)
  * Main theme icon part of itunes icon pack created by Michael Flarup (http://pixelresort.com)
- * 
+ *
  *
  * Edited for BUUF Theme by Fractal Systems
  * BUUF artwork: Based on icons by Paul Davey aka Mattahan. All rights reserved.
@@ -109,4 +109,3 @@ body {
     margin: 5px;
     padding: 5px;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/coolandclean.css b/airsonic-main/src/main/webapp/style/coolandclean.css
index c256208c..50e62a4c 100644
--- a/airsonic-main/src/main/webapp/style/coolandclean.css
+++ b/airsonic-main/src/main/webapp/style/coolandclean.css
@@ -105,4 +105,3 @@ body {
     margin: 5px;
     padding: 5px;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/default-without-mediaelement-light.css b/airsonic-main/src/main/webapp/style/default-without-mediaelement.css
similarity index 100%
rename from airsonic-main/src/main/webapp/style/default-without-mediaelement-light.css
rename to airsonic-main/src/main/webapp/style/default-without-mediaelement.css
diff --git a/airsonic-main/src/main/webapp/style/default.css b/airsonic-main/src/main/webapp/style/default.css
index 9fd95fb3..9036ef7d 100644
--- a/airsonic-main/src/main/webapp/style/default.css
+++ b/airsonic-main/src/main/webapp/style/default.css
@@ -1,3 +1,2 @@
+@import "default-without-mediaelement.css";
 @import "mediaelement-light.css";
-@import "default-without-mediaelement-light.css";
-
diff --git a/airsonic-main/src/main/webapp/style/denim.css b/airsonic-main/src/main/webapp/style/denim.css
index 1ad3f192..836349b8 100644
--- a/airsonic-main/src/main/webapp/style/denim.css
+++ b/airsonic-main/src/main/webapp/style/denim.css
@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/groove.css b/airsonic-main/src/main/webapp/style/groove.css
index 7ca09506..1d49178d 100644
--- a/airsonic-main/src/main/webapp/style/groove.css
+++ b/airsonic-main/src/main/webapp/style/groove.css
@@ -99,4 +99,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/hd.css b/airsonic-main/src/main/webapp/style/hd.css
index 9e0e86a7..e8164354 100644
--- a/airsonic-main/src/main/webapp/style/hd.css
+++ b/airsonic-main/src/main/webapp/style/hd.css
@@ -80,4 +80,3 @@ input, select {
 .albumComment, .log {
     font-size: 12pt;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/hd1080.css b/airsonic-main/src/main/webapp/style/hd1080.css
index b11e7f1e..61ce93d4 100644
--- a/airsonic-main/src/main/webapp/style/hd1080.css
+++ b/airsonic-main/src/main/webapp/style/hd1080.css
@@ -14,4 +14,3 @@ body {
 .detail, .albumComment, .log {
     font-size: 12pt;
 }
-
diff --git a/airsonic-main/src/main/webapp/style/hiconi.css b/airsonic-main/src/main/webapp/style/hiconi.css
index cac7b769..f3af641b 100644
--- a/airsonic-main/src/main/webapp/style/hiconi.css
+++ b/airsonic-main/src/main/webapp/style/hiconi.css
@@ -4,7 +4,8 @@
  * Author: Jeebs (Fisher Evans)
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 table {
 	color: #a3a3a3;
diff --git a/airsonic-main/src/main/webapp/style/hitech.css b/airsonic-main/src/main/webapp/style/hitech.css
index 986057d7..9aa8ae0b 100644
--- a/airsonic-main/src/main/webapp/style/hitech.css
+++ b/airsonic-main/src/main/webapp/style/hitech.css
@@ -87,4 +87,4 @@ body {
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-position:bottom right;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/jquery.contextMenu.css b/airsonic-main/src/main/webapp/style/jquery.contextMenu.css
index e8e32b07..1a703422 100644
--- a/airsonic-main/src/main/webapp/style/jquery.contextMenu.css
+++ b/airsonic-main/src/main/webapp/style/jquery.contextMenu.css
@@ -13,9 +13,9 @@
  */
 
 .context-menu-list {
-    margin:0; 
+    margin:0;
     padding:0;
-    
+
     min-width: 120px;
     max-width: 250px;
     display: inline-block;
@@ -24,13 +24,13 @@
     
     border: 1px solid #DDD;
     background: #EEE;
-    
+
     -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
         -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
          -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-    
+
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
 }
@@ -85,7 +85,7 @@
 /* icons
     #protip:
     In case you want to use sprites for icons (which I would suggest you do) have a look at
-    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
     .context-menu-item.icon:before {}
  */
 .context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
@@ -115,7 +115,7 @@
 .context-menu-input > label > select {
     display: block;
     width: 100%;
-    
+
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
diff --git a/airsonic-main/src/main/webapp/style/mediaelement-dark.css b/airsonic-main/src/main/webapp/style/mediaelement-dark.css
new file mode 100644
index 00000000..566241fd
--- /dev/null
+++ b/airsonic-main/src/main/webapp/style/mediaelement-dark.css
@@ -0,0 +1,11 @@
+.mejs__container {
+  background: transparent;
+}
+
+.mejs__container .me_cannotplay a {
+  background: transparent;
+}
+
+.mejs__controls:not([style*="display: none"]) {
+  background: transparent;
+}
diff --git a/airsonic-main/src/main/webapp/style/mediaelement-light.css b/airsonic-main/src/main/webapp/style/mediaelement-light.css
index b8d8abf1..c192acfe 100644
--- a/airsonic-main/src/main/webapp/style/mediaelement-light.css
+++ b/airsonic-main/src/main/webapp/style/mediaelement-light.css
@@ -1,4 +1,3 @@
-
 .mejs__overlay-loading-bg-img {
     background-image: url("mejs-controls-dark.svg");
 }
@@ -12,15 +11,15 @@
 }
 
 .mejs__container {
-    background: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__container .me_cannotplay a {
-    color: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__controls:not([style*="display: none"]) {
-    background: #F1F1F1;
+  background: transparent;
 }
 
 .mejs__time {
diff --git a/airsonic-main/src/main/webapp/style/midnight.css b/airsonic-main/src/main/webapp/style/midnight.css
index 5da081da..b47dfbc7 100644
--- a/airsonic-main/src/main/webapp/style/midnight.css
+++ b/airsonic-main/src/main/webapp/style/midnight.css
@@ -4,7 +4,8 @@
  * Author: Sindre Mehus
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 /* The primary background color. */
 .bgcolor1, table.music tr:nth-of-type(even) {
diff --git a/airsonic-main/src/main/webapp/style/monochrome.css b/airsonic-main/src/main/webapp/style/monochrome.css
index 50b238ae..f86b3c40 100644
--- a/airsonic-main/src/main/webapp/style/monochrome.css
+++ b/airsonic-main/src/main/webapp/style/monochrome.css
@@ -88,4 +88,4 @@ body {
     padding: 5px;
     color: #FFFFFF;
     background-color: #C0C0C0;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/monochrome_black.css b/airsonic-main/src/main/webapp/style/monochrome_black.css
index 7bc670f7..30413d42 100644
--- a/airsonic-main/src/main/webapp/style/monochrome_black.css
+++ b/airsonic-main/src/main/webapp/style/monochrome_black.css
@@ -4,7 +4,8 @@
  * Author: David D ddavis1@gmail.com
  */
 
-@import "default-without-mediaelement-light.css";
+@import "default-without-mediaelement.css";
+@import "mediaelement-dark.css";
 
 /* The primary background colour. */
 .bgcolor1, table.music tr:nth-of-type(even) {
@@ -107,4 +108,4 @@ body {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/pinkpanther.css b/airsonic-main/src/main/webapp/style/pinkpanther.css
index 9ce873de..4efbe2f4 100644
--- a/airsonic-main/src/main/webapp/style/pinkpanther.css
+++ b/airsonic-main/src/main/webapp/style/pinkpanther.css
@@ -88,4 +88,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/simplify.css b/airsonic-main/src/main/webapp/style/simplify.css
index ea79be4f..a9715ad7 100644
--- a/airsonic-main/src/main/webapp/style/simplify.css
+++ b/airsonic-main/src/main/webapp/style/simplify.css
@@ -87,4 +87,4 @@ html {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic.css b/airsonic-main/src/main/webapp/style/sonic.css
index 6e79388c..7b027fd3 100644
--- a/airsonic-main/src/main/webapp/style/sonic.css
+++ b/airsonic-main/src/main/webapp/style/sonic.css
@@ -85,4 +85,4 @@ html {
 
 label, p {
 	color: #696969;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic_blue.css b/airsonic-main/src/main/webapp/style/sonic_blue.css
index 8b95db81..4a6e6bb2 100644
--- a/airsonic-main/src/main/webapp/style/sonic_blue.css
+++ b/airsonic-main/src/main/webapp/style/sonic_blue.css
@@ -74,4 +74,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #CCC;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/sonic_white.css b/airsonic-main/src/main/webapp/style/sonic_white.css
index 2a7322b7..92893558 100644
--- a/airsonic-main/src/main/webapp/style/sonic_white.css
+++ b/airsonic-main/src/main/webapp/style/sonic_white.css
@@ -75,4 +75,4 @@ a:hover, a:hover * {
 
 label, p {
 	color: #696969;
-}
\ No newline at end of file
+}
diff --git a/airsonic-main/src/main/webapp/style/subStandard.css b/airsonic-main/src/main/webapp/style/subStandard.css
index b015699b..278e20e7 100644
--- a/airsonic-main/src/main/webapp/style/subStandard.css
+++ b/airsonic-main/src/main/webapp/style/subStandard.css
@@ -79,7 +79,7 @@ a:hover, a:hover * {
 /* Selected Headers. */
 .headerSelected {
     color: #FFDA23;
-    text-shadow: 0.1em 0.1em 0.2em grey;    
+    text-shadow: 0.1em 0.1em 0.2em grey;
     background-color: transparent;
     border: 0px
 }
@@ -133,11 +133,11 @@ a:hover, a:hover * {
 }
 ::-webkit-scrollbar-button {
     display:none;
-    background: 
+    background:
         -webkit-gradient(
-        linear, 
-        0 0, 
-        100% 0, 
+        linear,
+        0 0,
+        100% 0,
         from(#464646),
         to(#383838)
         );
@@ -155,12 +155,12 @@ a:hover, a:hover * {
 ::-webkit-scrollbar-thumb:horizontal{
     height: 12px;
     -webkit-border-radius:12px;
-    background: 
+    background:
         -webkit-gradient(
-        linear, 
-        0 0, 
-        0 100%, 
-        from(rgba(0,0,0,0.1)), 
+        linear,
+        0 0,
+        0 100%,
+        from(rgba(0,0,0,0.1)),
         to(rgba(0,0,0,0.25))
         );
     border: 6px solid transparent;
@@ -177,4 +177,4 @@ a:hover, a:hover * {
     background: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,.1)) 0 0 repeat, url(images/webkit-arrows-vert.png) -19px 50% no-repeat, #bfb6a3 url(images/bg-blog-repeat.png) 0 0 no-repeat;
     background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) 0 0 repeat, url(images/webkit-arrows-vert.png) -19px 50% no-repeat, #bfb6a3 url(images/bg-blog-repeat.png) 0 0 no-repeat;
     -webkit-border-radius: 0 0 6px 0;
-}
\ No newline at end of file
+}