Formatting. Image renames/cleanup.

- Remove the images using the old font.

- Simplify the naming of the new control bar icon images.

- Change keyboard input type to 'email'. 'url' type doesn't have
  a space bar.

- Some clarifications to main LICENSE.txt file.

LICENSE.txt

@@ -5,7 +5,7 @@ Please refer to the individual source files and/or to the noVNC commit
 history: https://github.com/kanaka/noVNC/commits/master
 
 noVNC is licensed under the LGPL (GNU Lesser General Public License)
-version 3 with the following exceptions (all LGPL compatible):
+version 3 with the following exceptions (all LGPL-3 compatible):
 
     include/input.js           : LGPL-2 or any later version
    
@@ -21,14 +21,13 @@ version 3 with the following exceptions (all LGPL compatible):
 
     images/                    : Creative Commons Attribution-ShareAlike
                                  http://creativecommons.org/licenses/by-sa/3.0/
-                                 Uses of the work must be attributed
-                                 to the noVNC project.
 
-The LGPL-3 and OFL license texts are included at:
+The license texts are included at:
     docs/LICENSE.LGPL-3 and
     docs/LICENSE.GPL-3
     docs/LICENSE.OFL-1.1
 
-Or alternatively the LGPL-3 license text may be found here:
+Or alternatively the license texts may be found here:
     http://www.gnu.org/licenses/lgpl.html and
     http://www.gnu.org/licenses/gpl.html
+    http://scripts.sil.org/OFL

include/base.css

@@ -47,21 +47,22 @@ html {
 /*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 */
+  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;
@@ -143,8 +144,8 @@ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%
 }
 
 #noVNC_container, #noVNC_canvas {
-    margin: 0px;
-    padding: 0px;
+  margin: 0px;
+  padding: 0px;
 }
 
 #noVNC_canvas {
@@ -197,9 +198,9 @@ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%
   left:50px; /* controls horizontal position */
   border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
   border-style:solid;
-  border-color:#E0E0E0 transparent; 
+  border-color:#E0E0E0 transparent;
   /* reduce the damage in FF3.0 */
-  display:block; 
+  display:block;
   width:0;
 }
 
@@ -209,12 +210,12 @@ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%
   bottom:auto;
   left:auto;
   border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
-  border-color:transparent #E0E0E0; 
+  border-color:transparent #E0E0E0;
 }
 
 /*Bubble contents divs*/
 #noVNC_settings {
-  display:none; 
+  display:none;
   margin-top:77px;
   right:20px;
   position:fixed;
@@ -230,7 +231,7 @@ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%
 }
 
 #noVNC_clipboard {
-  display:none; 
+  display:none;
   margin-top:77px;
   right:30px;
   position:fixed;
@@ -307,25 +308,23 @@ background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%
 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 */
+  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;*/
 }
 

include/black.css

 #noVNC-control-bar {
-	background: #4c4c4c; /* Old browsers */
-	background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-	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 */
+  background: #4c4c4c; /* Old browsers */
+  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+  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 */
 }
 
 .triangle-right {
@@ -21,28 +21,26 @@
 
 .noVNC_status_button {
   font-size: 12px;
- 
   vertical-align: middle;
   border:1px solid #4c4c4c;
-	background: #4c4c4c; /* Old browsers */
-	background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-	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 */
-  
+
+  background: #4c4c4c; /* Old browsers */
+  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+  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 */
 }
 
 .noVNC_status_button_selected {
-
-background: #9dd53a; /* Old browsers */
-background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
-background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
-background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+  background: #9dd53a; /* Old browsers */
+  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
 }

include/ui.js

@@ -17,6 +17,7 @@ settingsOpen : false,
 connSettingsOpen : true,
 clipboardOpen: false,
 keyboardVisible: false,
+
 // Render default UI and initialize settings menu
 load: function() {
     var html = '', i, sheet, sheets, llevels;
@@ -39,26 +40,26 @@ load: function() {
     WebUtil.init_logging(UI.getSetting('logging'));
 
     UI.initSetting('stylesheet', 'default');
-    WebUtil.selectStylesheet(null); 
+    WebUtil.selectStylesheet(null);
     // call twice to get around webkit bug
     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 
     /* Populate the controls if defaults are provided in the URL */
-    UI.initSetting('host', ''); 
+    UI.initSetting('host', '');
     UI.initSetting('port', '');
     UI.initSetting('password', '');
     UI.initSetting('encrypt', false);
     UI.initSetting('true_color', true);
     UI.initSetting('cursor', false);
-    UI.initSetting('shared', true); 
+    UI.initSetting('shared', true);
     UI.initSetting('connectTimeout', 2);
-    UI.initSetting('path', ''); 
+    UI.initSetting('path', '');
 
     UI.rfb = RFB({'target': $D('noVNC_canvas'),
                   'onUpdateState': UI.updateState,
                   'onClipboard': UI.clipReceive});
     UI.updateVisualState();
- 
+
     // Unfocus clipboard when over the VNC area
     //$D('VNC_screen').onmousemove = function () {
     //         var keyboard = UI.rfb.get_keyboard();
@@ -80,15 +81,15 @@ load: function() {
         UI.initSetting('clip', false);
     }
 
-    //iOS Safari does not support CSS position:fixed. 
-    //This detects iOS devices and enables javascript workaround.  
+    //iOS Safari does not support CSS position:fixed.
+    //This detects iOS devices and enables javascript workaround.
     if ((navigator.userAgent.match(/iPhone/i)) ||
-        (navigator.userAgent.match(/iPod/i)) || 
+        (navigator.userAgent.match(/iPod/i)) ||
         (navigator.userAgent.match(/iPad/i))) {
         //UI.setOnscroll();
-        //UI.setResize(); 
+        //UI.setResize();
     }
-    
+
     $D('noVNC_host').focus();
 
     UI.setViewClip();
@@ -140,7 +141,7 @@ updateSetting: function(name, value) {
             }
         }
     } else {
-        /*Weird IE9 error leads to 'null' appearring 
+        /*Weird IE9 error leads to 'null' appearring
         in textboxes instead of ''.*/
         if (value === null) {
             value = "";
@@ -217,8 +218,8 @@ toggleConnectPanel: function() {
         $D('connectButton').className = "noVNC_status_button";
     }
     if (UI.clipboardOpen == true) {
-        UI.toggleClipboardPanel(); 
-    } 
+        UI.toggleClipboardPanel();
+    }
 
     //Toggle Connection Panel
     if (UI.connSettingsOpen == true) {
@@ -263,8 +264,8 @@ toggleSettingsPanel: function() {
 // Open menu
 openSettingsMenu: function() {
     if (UI.clipboardOpen == true) {
-        UI.toggleClipboardPanel(); 
-    } 
+        UI.toggleClipboardPanel();
+    }
     //Close connection settings if open
     if (UI.connSettingsOpen == true) {
         UI.toggleConnectPanel();
@@ -548,9 +549,9 @@ setViewDrag: function(drag) {
 
     if (UI.rfb_state === 'normal' &&
         UI.rfb.get_display().get_viewport()) {
-        $D('noVNC_view_drag_button').style.display = "inline";
+        vmb.style.display = "inline";
     } else {
-        $D('noVNC_view_drag_button').style.display = "none";
+        vmb.style.display = "none";
     }
 
     if (typeof(drag) === "undefined") {
@@ -558,10 +559,10 @@ setViewDrag: function(drag) {
         drag = !UI.rfb.get_viewportDrag();
     }
     if (drag) {
-        $D('noVNC_view_drag_button').className = "noVNC_status_button_selected";
+        vmb.className = "noVNC_status_button_selected";
         UI.rfb.set_viewportDrag(true);
     } else {
-        $D('noVNC_view_drag_button').className = "noVNC_status_button";
+        vmb.className = "noVNC_status_button";
         UI.rfb.set_viewportDrag(false);
     }
 },
@@ -569,31 +570,26 @@ setViewDrag: function(drag) {
 // On touch devices, show the OS keyboard
 showKeyboard: function() {
     if(UI.keyboardVisible == false) {
-    	$D('keyboardinput').focus();
-    	UI.keyboardVisible = true;
-    	$D('showKeyboard').className = 
-        "noVNC_status_button_selected";
+        $D('keyboardinput').focus();
+        UI.keyboardVisible = true;
+        $D('showKeyboard').className = "noVNC_status_button_selected";
     } else if(UI.keyboardVisible == true) {
-    	$D('keyboardinput').blur();
-    	$D('showKeyboard').className = 
-        "noVNC_status_button";
-    	UI.keyboardVisible = false;	
+        $D('keyboardinput').blur();
+        $D('showKeyboard').className = "noVNC_status_button";
+        UI.keyboardVisible = false;
     }
-    
 },
 
 keyInputBlur: function() {
-	$D('showKeyboard').className = 
-        "noVNC_status_button";
-        //Weird bug in iOS if you change keyboardVisible
-        //here it does not actually occur so next time 
-        //you click keyboard icon it doesnt work.
-        var t=setTimeout("UI.setKeyboard()",100)
-       
+    $D('showKeyboard').className = "noVNC_status_button";
+    //Weird bug in iOS if you change keyboardVisible
+    //here it does not actually occur so next time
+    //you click keyboard icon it doesnt work.
+    setTimeout("UI.setKeyboard()",100)
 },
 
 setKeyboard: function() {
-	UI.keyboardVisible = false;	
+    UI.keyboardVisible = false;
 },
 
 // iOS < Version 5 does not support position fixed. Javascript workaround:
@@ -621,7 +617,7 @@ addOption: function(selectbox,text,value )
 setBarPosition: function() {
     $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px';
     $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
-    
+
     var vncwidth = $D('noVNC_screen').style.offsetWidth;
     $D('noVNC-control-bar').style.width = vncwidth + 'px';
 }

vnc.html

 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
-<html>    
+<html>
 <head>
 
-   <!-- 
+   <!--
     noVNC example: simple example using default UI
     Copyright (C) 2011 Joel Martin
     Licensed under LGPL-3 (see LICENSE.txt)
@@ -20,59 +20,55 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <!-- App Start Icon  -->
-    <link rel="apple-touch-startup-image" href="images/screen_320x460.png" /> 
+    <link rel="apple-touch-startup-image" href="images/screen_320x460.png" />
     <!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
     <link rel="apple-touch-icon" href="images/screen_57x57.png">
     <!--
-    <link rel="apple-touch-icon-precomposed" href="images/screen_57x57.png" /> 
+    <link rel="apple-touch-icon-precomposed" href="images/screen_57x57.png" />
     -->
 
-    
+
     <!-- Stylesheets -->
     <link rel="stylesheet" href="include/base.css" />
     <link rel="alternate stylesheet" href="include/black.css" TITLE="Black" />
     <link rel="alternate stylesheet" href="include/blue.css" TITLE="Blue" />
 
     <!--
-    <script type='text/javascript'  
+    <script type='text/javascript'
         src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
     -->
 
     <script src="include/vnc.js"></script>
     <script src="include/ui.js"></script>
 
-</head> 
+</head>
 
 <body>
     <div id="noVNC-control-bar">
         <!--noVNC Mobile Device only Buttons-->
         <div class="noVNC-buttons-left">
-            <input type="image" src="images/drag_sml.png"
+            <input type="image" src="images/drag.png"
                 id="noVNC_view_drag_button" class="noVNC_status_button"
                 title="Move/Drag Viewport"
                 onclick="UI.setViewDrag();">
             <div id="noVNC_mobile_buttons">
-                <input type="image" src="images/nobutton_mouse.png"
-                    class="noVNC_status_button"
-                    id="noVNC_mouse_button0"
+                <input type="image" src="images/mouse_none.png"
+                    id="noVNC_mouse_button0" class="noVNC_status_button"
                     onclick="UI.setMouseButton(1);">
-                <input type="image" src="images/left_mouse.png"
-                    class="noVNC_status_button"
-                    id="noVNC_mouse_button1"
+                <input type="image" src="images/mouse_left.png"
+                    id="noVNC_mouse_button1" class="noVNC_status_button"
                     onclick="UI.setMouseButton(2);">
-                <input type="image" src="images/middle_mouse.png"
-                    class="noVNC_status_button"
-                    id="noVNC_mouse_button2"
+                <input type="image" src="images/mouse_middle.png"
+                    id="noVNC_mouse_button2" class="noVNC_status_button"
                     onclick="UI.setMouseButton(4);">
-                <input type="image" src="images/right_mouse.png"
-                    class="noVNC_status_button"
-                    id="noVNC_mouse_button4"
+                <input type="image" src="images/mouse_right.png"
+                    id="noVNC_mouse_button4" class="noVNC_status_button"
                     onclick="UI.setMouseButton(0);">
-                <input type="image" src="images/keyboard_sml.png"
-                    id="showKeyboard" class="noVNC_status_button" 
+                <input type="image" src="images/keyboard.png"
+                    id="showKeyboard" class="noVNC_status_button"
                     value="Keyboard" title="Show Keyboard"
                     onclick="UI.showKeyboard()"/>
-                <input type="url"
+                <input type="email"
                     autocapitalize="off" autocorrect="off"
                     id="keyboardinput" class="noVNC_status_button"
                     onKeyDown="onKeyDown(event);" onblur="UI.keyInputBlur();"/>
@@ -81,25 +77,25 @@
 
         <!--noVNC Buttons-->
         <div class="noVNC-buttons-right">
-            <input type="image" src="images/ctrlaltdel_sml.png"
-                class="noVNC_status_button"
-                value="CtrlAltDel" id="sendCtrlAltDelButton"
+            <input type="image" src="images/ctrlaltdel.png"
+                 id="sendCtrlAltDelButton" class="noVNC_status_button"
+                title="Send Ctrl-Alt-Del"
                 onclick="UI.sendCtrlAltDel();" />
-            <input type="image" src="images/clipboard_sml.png"
+            <input type="image" src="images/clipboard.png"
                 id="clipboardButton" class="noVNC_status_button"
-                value="Clipboard" title="Clipboard"
+                title="Clipboard"
                 onclick="UI.toggleClipboardPanel();" />
-            <input type="image" src="images/settings_sml.png"
+            <input type="image" src="images/settings.png"
                 id="settingsButton" class="noVNC_status_button"
-                value="Settings" title="Settings"
+                title="Settings"
                 onclick="UI.toggleSettingsPanel();" />
-            <input type="image" src="images/connect_sml.png"
+            <input type="image" src="images/connect.png"
                 id="connectButton" class="noVNC_status_button_selected"
-                value="Connect" title="Connect"
+                title="Connect"
                 onclick="UI.toggleConnectPanel()" />
-            <input type="image" src="images/disconnect_sml.png"
+            <input type="image" src="images/disconnect.png"
                 id="disconnectButton" class="noVNC_status_button"
-                value="Disconnect" title="Disconnect"
+                title="Disconnect"
                 onclick="UI.disconnect()" />
         </div>
 
@@ -165,7 +161,7 @@
         <div id="noVNC_status_bar" class="noVNC_status_bar">
                 <div id="noVNC_status">Loading</div>
         </div>
-        
+
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
@@ -176,7 +172,7 @@
         </div>
 
     </div>
-  
+
     <script>
         window.onload = UI.load;
     </script>