GUAC-326: Add illustration. Fix labels.

guacamole/src/main/webapp/client.xhtml

@@ -67,21 +67,23 @@
 
                 <!-- No IME -->
                 <div class="choice">
-                    <input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> None
+                    <label><input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> None</label>
                     <p class="caption"><label for="ime-none">No input method is used. Keyboard input is accepted from
                             a connected, physical keyboard.</label></p>
                 </div>
 
                 <!-- Text input -->
                 <div class="choice">
-                    <input name="input-method" type="radio" value="ime-text" id="ime-text"/> Text input
+                    <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
-                    <p class="caption"><label for="ime-text">Allow typing of text, and emulate keyboard events based on the
+                    <label><input name="input-method" type="radio" value="ime-text" id="ime-text"/> Text input</label>
+                    <p class="caption"><label for="ime-text">
+                            Allow typing of text, and emulate keyboard events based on the
                             typed text. This is necessary for devices such as mobile phones that lack a physical keyboard.</label></p>
                 </div>
 
                 <!-- Guac OSK -->
                 <div class="choice">
-                    <input name="input-method" type="radio" value="ime-osk" id="ime-osk"/> On-screen keyboard
+                    <label><input name="input-method" type="radio" value="ime-osk" id="ime-osk"/> On-screen keyboard</label>
                     <p class="caption"><label for="ime-osk">Display and accept input from the built-in Guacamole on-screen
                             keyboard. The on-screen keyboard allows typing of key combinations that may otherwise be impossible
                             (such as Ctrl-Alt-Del).</label></p>

guacamole/src/main/webapp/styles/client.css

@@ -633,6 +633,16 @@ p.hint {
 
 }
 
+#keyboard-settings .figure {
+    float: right;
+    max-width: 30%;
+    margin: 1em;
+}
+
+#keyboard-settings .figure img {
+    max-width: 100%;
+}
+
 #target {
     position: fixed;
     left: 0;