added webrdp public code

2 files changed, 819 insertions, 0 deletions

diff --git a/www/css/style-debug.css b/www/css/style-debug.css
new file mode 100644
index 0000000..4dd11a0
--- /dev/null
+++ b/www/css/style-debug.css
@@ -0,0 +1,537 @@
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+html, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+body { margin: 0; font-size: 1em; line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+
+button, input { line-height: normal; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled], input[disabled] { cursor: default; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0;}
+td { vertical-align: top; }
+
+
+/* =============================================================================
+   Chrome Frame Prompt
+   ========================================================================== */
+
+.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+html {
+	width: 100%;
+	height: 100%;
+}
+body {
+	font-family: Verdana,Arial,Helvetica,sans-serif;
+	font-size: 10pt;
+	width: 100%;
+	height: 100%;
+	margin:0;
+
+}
+fieldset {
+	border: 1px solid #CCCCCC;
+	margin: 0 10px 10px;
+	padding: 5px;
+	text-align: left;
+}
+input:focus, select:focus, textarea:focus {
+	background-color: #FFFFDD;
+}
+input, select {
+	border: 1px solid silver;
+	font-size: 10pt;
+}
+legend {
+	font-family: 'Quicksand', sans-serif;
+	color: #3B445E;
+	font-size: 20px;
+	font-weight: normal;
+	letter-spacing: normal;
+}
+table td {
+	vertical-align: middle;
+	padding: 5px;
+}
+table td.buttons {
+	font: 12px/20px "Arial", Arial, Helvetica, sans-serif;
+	margin-top: 20px;
+	text-align: right;
+}
+table td.key {
+	font-family:Arial;
+	font-size:13px;
+	font-style:normal;
+	background-color: #F6F6F6;
+	border-bottom: 1px solid #E9E9E9;
+	border-right: 1px solid #E9E9E9;
+	color: #3B445E;
+	font-weight: bold;
+	text-align: right;
+	white-space: nowrap;
+	width: 230px;
+}
+
+.dialog {
+	background-color: white;
+}
+.tab-wrapper
+{
+	padding:				5px 5px;
+	margin:					0;
+	border:					1px solid #eee;
+	clear:					both;
+}
+.tab-menu
+{
+	margin:					0;
+	padding:				0;
+	list-style:				none;
+	/* overflow:				auto; */
+}
+.tab-menu li
+{
+	margin:					0;
+	padding:				0;
+	float:					left;
+	line-height:			1.5em;
+}
+.tab-menu li a
+{
+	background-color: #DDD;
+	text-decoration:		none;
+	padding:				5px;
+	font-weight:			bold;
+	color:					black;
+	border:					2px solid #fff;
+	margin-top:				2px;
+}
+.tab-menu li a:hover,
+.tab-menu li a:focus
+{
+	background-color: #eee;
+	border:					2px solid #000;
+	color:					black;
+	/* your effect here */
+}
+.tab-menu li.tab-selected a
+{
+	background-color: #FFF;
+	text-decoration:		none;
+	color:					black;
+	/* your effect here */
+	border:					2px solid #eee;
+}
+.tab-menu li.tab-selected a:hover
+.tab-menu li.tab-selected a:focus
+{
+	border:					2px solid #eee;
+}
+
+.about {
+	border:					1px solid #000;
+	margin: 10px;
+	text-align: center;
+	font-size: 14pt;
+}
+
+.error {
+	color: #FFF;
+	background-color: #F00;
+	font-size: 14pt;
+	font-weight:			bold;
+}
+
+label.big {
+	font-size: 14pt;
+	font-weight: bold;
+}
+
+#mousedialog {
+	margin: 10px !important;
+	padding: 10px !important;
+}
+
+#screen {
+	border: 0;
+	display: block;
+	position: absolute;
+	padding: 0;
+}
+
+/* ====== extra commands bar ================================================
+   ========================================================================== */
+
+#extracommands ul
+{
+  list-style-type: none;
+  display: inline;
+  cursor: default;
+}
+
+#extracommands ul li
+{
+  display: inline-block;
+  margin-top: 4px;
+  margin-right: 16px;
+  font-size: 13px;
+  text-decoration: none;
+  text-align: center;
+  color: #a1a1a1;
+
+  cursor: hand;
+  cursor:pointer;
+
+  /*unselectable*/
+  -webkit-user-select: none; /* Chrome/Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+ */
+
+  /* Rules below not implemented in browsers yet */
+  -o-user-select: none;
+  user-select: none;
+
+  /*color change on hover*/
+  -moz-transition-property: color;  /* FF4+ */
+  -moz-transition-duration: 0.5s;
+  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
+  -webkit-transition-duration: 0.5s;
+  -o-transition-property: color;  /* Opera 10.5+ */
+  -o-transition-duration: 0.5s;
+  -ms-transition-property: color;  /* IE10? */
+  -ms-transition-duration: 0.5s;
+  transition-property: color;  /* Standard */
+  transition-duration: 0.5s;
+}
+
+#extracommands ul li:hover
+{
+  color:#717171;
+  cursor:hand;
+}
+
+.extracommandshold
+{
+  background-color: #d7d7d7;
+}
+
+/* ==|== media queries ======================================================
+   EXAMPLE Media Query for Responsive Design.
+   This example overrides the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */
+}
+
+#cbdcontent {
+    visibility: hidden;
+    max-width: 600px;
+    background-color: rgb(241, 241, 241);
+    color: black;
+    text-align: left;
+    border-radius: 1px;
+    border: black;
+    border-style: solid;
+    border-width: thin;
+    padding: 5px 0;
+    margin-top: 28px;
+    /* Position the tooltip */
+    position: absolute;
+    font-size: 16px;
+    font-weight: normal !important;
+    z-index: 1;
+}
+
+#clipboard:hover #cbdcontent {
+    visibility: visible;
+}
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+
+
+/* Pop up message box
+ */
+
+.popupwrapper {
+  background-color: transparent;
+  width: 50%;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.popupmessage {
+  border-style: solid;
+  border-radius: 15px;
+  border-width: 0;
+  padding: 15px;
+  width: auto;
+  height: auto;
+  z-index: 1234;
+  position: relative;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#drop_zone {
+  border: 2px dashed #bbb;
+  border-radius: 5px;
+  #padding: 25px;
+  text-align: center;
+  font: 40pt bold;
+  color: #bbb;
+  width: auto;
+  height: auto;
+}
diff --git a/www/css/vkb-debug.css b/www/css/vkb-debug.css
new file mode 100644
index 0000000..c6d2434
--- /dev/null
+++ b/www/css/vkb-debug.css
@@ -0,0 +1,282 @@
+#keyboardInputMaster {
+  position:absolute;
+  font:normal 11px Arial,sans-serif;
+  border-top:1px solid #eeeeee;
+  border-right:1px solid #888888;
+  border-bottom:1px solid #444444;
+  border-left:1px solid #cccccc;
+  -webkit-border-radius:0.6em;
+  -moz-border-radius:0.6em;
+  border-radius:0.6em;
+  -webkit-box-shadow:0px 2px 10px #444444;
+  -moz-box-shadow:0px 2px 10px #444444;
+  box-shadow:0px 2px 10px #444444;
+  opacity:0.95;
+  filter:alpha(opacity=95);
+  background-color:#dddddd;
+  text-align:left;
+  z-index:1000000;
+  width:auto;
+  height:auto;
+  min-width:0;
+  min-height:0;
+  margin:0px;
+  padding:0px;
+  line-height:normal;
+  -moz-user-select:none;
+  cursor:default;
+}
+#keyboardInputMaster * {
+  position:static;
+  color:#000000;
+  background:transparent;
+  font:normal 11px Arial,sans-serif;
+  width:auto;
+  height:auto;
+  min-width:0;
+  min-height:0;
+  margin:0px;
+  padding:0px;
+  border:0px none;
+  outline:0px;
+  vertical-align:baseline;
+  line-height:1.3em;
+}
+#keyboardInputMaster table {
+  table-layout:auto;
+}
+#keyboardInputMaster.keyboardInputSize1,
+#keyboardInputMaster.keyboardInputSize1 * {
+  font-size:9px;
+}
+#keyboardInputMaster.keyboardInputSize3,
+#keyboardInputMaster.keyboardInputSize3 * {
+  font-size:13px;
+}
+#keyboardInputMaster.keyboardInputSize4,
+#keyboardInputMaster.keyboardInputSize4 * {
+  font-size:16px;
+}
+#keyboardInputMaster.keyboardInputSize5,
+#keyboardInputMaster.keyboardInputSize5 * {
+  font-size:20px;
+}
+
+#keyboardInputMaster thead tr th {
+  padding:0.3em 0.3em 0.1em 0.3em;
+  background-color:#999999;
+  white-space:nowrap;
+  text-align:right;
+  -webkit-border-radius:0.6em 0.6em 0px 0px;
+  -moz-border-radius:0.6em 0.6em 0px 0px;
+  border-radius:0.6em 0.6em 0px 0px;
+}
+#keyboardInputMaster thead tr th div {
+  float:left;
+  font-size:130% !important;
+  height:1.3em;
+  font-weight:bold;
+  position:relative;
+  z-index:1;
+  margin-right:0.5em;
+  cursor:pointer;
+  background-color:transparent;
+}
+#keyboardInputMaster thead tr th div ol {
+  position:absolute;
+  left:0px;
+  top:90%;
+  list-style-type:none;
+  height:9.4em;
+  overflow-y:auto;
+  overflow-x:hidden;
+  background-color:#f6f6f6;
+  border:1px solid #999999;
+  display:none;
+  text-align:left;
+  width:12em;
+}
+#keyboardInputMaster thead tr th div ol li {
+  padding:0.2em 0.4em;
+  cursor:pointer;
+  white-space:nowrap;
+  width:12em;
+}
+#keyboardInputMaster thead tr th div ol li.selected {
+  background-color:#ffffcc;
+}
+#keyboardInputMaster thead tr th div ol li:hover,
+#keyboardInputMaster thead tr th div ol li.hover {
+  background-color:#dddddd;
+}
+#keyboardInputMaster thead tr th span,
+#keyboardInputMaster thead tr th strong,
+#keyboardInputMaster thead tr th small,
+#keyboardInputMaster thead tr th big {
+  display:inline-block;
+  padding:0px 0.4em;
+  height:1.4em;
+  line-height:1.4em;
+  border-top:1px solid #e5e5e5;
+  border-right:1px solid #5d5d5d;
+  border-bottom:1px solid #5d5d5d;
+  border-left:1px solid #e5e5e5;
+  background-color:#cccccc;
+  cursor:pointer;
+  margin:0px 0px 0px 0.3em;
+  -webkit-border-radius:0.3em;
+  -moz-border-radius:0.3em;
+  border-radius:0.3em;
+  vertical-align:middle;
+  -webkit-transition:background-color .15s ease-in-out;
+  -o-transition:background-color .15s ease-in-out;
+  transition:background-color .15s ease-in-out;
+}
+#keyboardInputMaster thead tr th strong {
+  font-weight:bold;
+}
+#keyboardInputMaster thead tr th small {
+  -webkit-border-radius:0.3em 0px 0px 0.3em;
+  -moz-border-radius:0.3em 0px 0px 0.3em;
+  border-radius:0.3em 0px 0px 0.3em;
+  border-right:1px solid #aaaaaa;
+  padding:0px 0.2em 0px 0.3em;
+}
+#keyboardInputMaster thead tr th big {
+  -webkit-border-radius:0px 0.3em 0.3em 0px;
+  -moz-border-radius:0px 0.3em 0.3em 0px;
+  border-radius:0px 0.3em 0.3em 0px;
+  border-left:0px none;
+  margin:0px;
+  padding:0px 0.3em 0px 0.2em;
+}
+#keyboardInputMaster thead tr th span:hover,
+#keyboardInputMaster thead tr th span.hover,
+#keyboardInputMaster thead tr th strong:hover,
+#keyboardInputMaster thead tr th strong.hover,
+#keyboardInputMaster thead tr th small:hover,
+#keyboardInputMaster thead tr th small.hover,
+#keyboardInputMaster thead tr th big:hover,
+#keyboardInputMaster thead tr th big.hover {
+  background-color:#dddddd;
+}
+
+#keyboardInputMaster tbody tr td {
+  text-align:left;
+  padding:0.2em 0.3em 0.3em 0.3em;
+  vertical-align:top;
+}
+#keyboardInputMaster tbody tr td div {
+  text-align:center;
+  position:relative;
+  zoom:1;
+}
+#keyboardInputMaster tbody tr td table {
+  white-space:nowrap;
+  width:100%;
+  border-collapse:separate;
+  border-spacing:0px;
+}
+#keyboardInputMaster tbody tr td#keyboardInputNumpad table {
+  margin-left:0.2em;
+  width:auto;
+}
+#keyboardInputMaster tbody tr td#keyboardInputCursor table {
+  margin-left:0.2em;
+  width:auto;
+}
+#keyboardInputMaster tbody tr td table.keyboardInputCenter {
+  width:auto;
+  margin:0px auto;
+}
+#keyboardInputMaster tbody tr td table tbody tr td {
+  text-align: center;
+  vertical-align:middle;
+  padding:0px 0.45em;
+  white-space:pre;
+  height:1.8em;
+  font-family:'Lucida Console','Arial Unicode MS',monospace;
+  border-top:1px solid #e5e5e5;
+  border-right:1px solid #5d5d5d;
+  border-bottom:1px solid #5d5d5d;
+  border-left:1px solid #e5e5e5;
+  background-color:#eeeeee;
+  cursor:default;
+  min-width:0.75em;
+  -webkit-border-radius:0.2em;
+  -moz-border-radius:0.2em;
+  border-radius:0.2em;
+  -webkit-transition:background-color .15s ease-in-out;
+  -o-transition:background-color .15s ease-in-out;
+  transition:background-color .15s ease-in-out;
+}
+#keyboardInputMaster tbody tr td table tbody tr td.last {
+  width:99%;
+}
+#keyboardInputMaster tbody tr td table tbody tr td.space {
+  padding:0px 4em;
+}
+#keyboardInputMaster tbody tr td table tbody tr td.deadkey {
+  background-color:#ccccdd;
+}
+#keyboardInputMaster tbody tr td table tbody tr td.target {
+  background-color:#ddddcc;
+}
+#keyboardInputMaster tbody tr td table tbody tr td:hover,
+#keyboardInputMaster tbody tr td table tbody tr td.hover {
+  border-top:1px solid #d5d5d5;
+  border-right:1px solid #555555;
+  border-bottom:1px solid #555555;
+  border-left:1px solid #d5d5d5;
+  background-color:#cccccc;
+}
+#keyboardInputMaster thead tr th span.pressed,
+#keyboardInputMaster tbody tr td table tbody tr td:active,
+#keyboardInputMaster tbody tr td table tbody tr td.pressed {
+  border-top:1px solid #555555 !important;
+  border-right:1px solid #d5d5d5;
+  border-bottom:1px solid #d5d5d5;
+  border-left:1px solid #555555;
+  background-color:#cccccc;
+}
+#keyboardInputMaster tbody tr td table tbody tr td.none,
+#keyboardInputMaster tbody tr td table tbody tr td.none:hover,
+#keyboardInputMaster tbody tr td table tbody tr td.none:active {
+  border: 1px none !important;
+  background-color:#dddddd;
+}
+#keyboardInputMaster thead tr th span:active,
+
+#keyboardInputMaster tbody tr td table tbody tr td small {
+  display:block;
+  text-align:center;
+  font-size:0.6em !important;
+  line-height:1.1em;
+}
+
+#keyboardInputMaster tbody tr td div label {
+  position:absolute;
+  bottom:0.2em;
+  left:0.3em;
+}
+#keyboardInputMaster tbody tr td div label input {
+  background-color:#f6f6f6;
+  vertical-align:middle;
+  font-size:inherit;
+  width:1.1em;
+  height:1.1em;
+}
+#keyboardInputMaster tbody tr td div var {
+  position:absolute;
+  bottom:0px;
+  right:3px;
+  font-weight:bold;
+  font-style:italic;
+  color:#444444;
+}
+
+.keyboardInputInitiator {
+  margin:0px 3px;
+  vertical-align:middle;
+  cursor:pointer;
+}