Re-organize CSS. Remove broken IE filter statement.

include/base.css

@@ -44,25 +44,6 @@ html {
   float:right;
 }
 
-/*Mobile buttons bar.*/
-#noVNC-control-bar {
-  position:fixed;
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-
-  display:block;
-  height:44px;
-  left:0;
-  top:0;
-  width:100%;
-  z-index:200;
-}
 
 #noVNC_view_drag_button {
   display: none;
@@ -163,6 +144,107 @@ html {
   float:right;
 }
 
+/*Bubble contents divs*/
+#noVNC_settings {
+  display:none;
+  margin-top:77px;
+  right:20px;
+  position:fixed;
+}
+
+#noVNC_controls {
+  margin-top:77px;
+  right:12px;
+  position:fixed;
+}
+#noVNC_controls.top:after  {
+  right:15px;
+}
+
+#noVNC_clipboard {
+  display:none;
+  margin-top:77px;
+  right:30px;
+  position:fixed;
+}
+#noVNC_clipboard.top:after {
+  right:85px;
+}
+
+#keyboardinput {
+  width:1px;
+  height:1px;
+  background-color:#fff;
+  color:#fff;
+  border:0;
+  position: relative;
+  left: -40px;
+  z-index: -1;
+}
+
+.noVNC_status_warn {
+  background-color:yellow;
+}
+
+/*
+ * Advanced Styling
+ */
+
+/* Control bar */
+#noVNC-control-bar {
+  position:fixed;
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+
+  display:block;
+  height:44px;
+  left:0;
+  top:0;
+  width:100%;
+  z-index:200;
+}
+
+.noVNC_status_button {
+  padding: 4px 4px;
+  vertical-align: middle;
+  border:1px solid #869dbc;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+}
+
+.noVNC_status_button_selected {
+  padding: 4px 4px;
+  vertical-align: middle;
+  border:1px solid #4366a9;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  background: #779ced; /* Old browsers */
+  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
+ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+}
+
+
 /*Settings Bubble*/
 .triangle-right {
   position:relative;
@@ -213,33 +295,6 @@ html {
   border-color:transparent #E0E0E0;
 }
 
-/*Bubble contents divs*/
-#noVNC_settings {
-  display:none;
-  margin-top:77px;
-  right:20px;
-  position:fixed;
-}
-
-#noVNC_controls {
-  margin-top:77px;
-  right:12px;
-  position:fixed;
-}
-#noVNC_controls.top:after  {
-  right:15px;
-}
-
-#noVNC_clipboard {
-  display:none;
-  margin-top:77px;
-  right:30px;
-  position:fixed;
-}
-#noVNC_clipboard.top:after {
-  right:85px;
-}
-
 /*Default noVNC logo.*/
 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */
 @font-face {
@@ -270,21 +325,6 @@ html {
   color:green;
 }
 
-#keyboardinput {
-  width:1px;
-  height:1px;
-  background-color:#fff;
-  color:#fff;
-  border:0;
-  position: relative;
-  left: -40px;
-  z-index: -1;
-}
-
-.noVNC_status_warn {
-  background-color:yellow;
-}
-
 /* ----------------------------------------
  * Media sizing
  * ----------------------------------------
@@ -293,39 +333,6 @@ html {
 
 .noVNC_status_button {
   font-size: 12px;
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #869dbc;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
-}
-
-.noVNC_status_button_selected {
-  font-size: 12px;
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #4366a9;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  background: #779ced; /* Old browsers */
-  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
- /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 }
 
 #noVNC_clipboard_text {

include/black.css

@@ -1,3 +1,7 @@
+#keyboardinput {
+  background-color:#000;
+}
+
 #noVNC-control-bar {
   background: #4c4c4c; /* Old browsers */
   background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
@@ -5,7 +9,6 @@
   background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
 }
 
@@ -15,10 +18,6 @@
   color:#fff;
 }
 
-#keyboardinput {
-  background-color:#000;
-}
-
 .noVNC_status_button {
   font-size: 12px;
   vertical-align: middle;