diff --git a/public/js/hint.js b/public/js/hint.js
index 96f08a3..1e5f6ec 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -1,10 +1,11 @@
 "use strict";
 
 /*
-Todo:
-- limit the view based on prefix matches
-- highlight matching substrings
-*/
+ * Todo:
+ * - limit the view based on prefix matches
+ * - highlight matching substrings
+ * - http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
+ */
 
 // Don't let events bubble up
 Event.prototype.halt = function () {
@@ -236,10 +237,10 @@
  */
 var PrefixAnalyzer = {
   _regex : new RegExp(
-    "(?:^|[^-a-zA-Z0-9])" +   // Anchor
-    "((?:[-a-zA-Z0-9]+?)\/" + // Foundry
+    "(?:^|[^-_a-zA-Z0-9])" +   // Anchor
+    "((?:[-_a-zA-Z0-9]+?)\/" + // Foundry
     "(?:" +
-    "(?:[-a-zA-Z0-9]+?)=" +   // Layer
+    "(?:[-_a-zA-Z0-9]+?)=" +   // Layer
     "(?:(?:[^:=\/ ]+?):)?" +  // Key
     ")?" +
     ")$"),
@@ -250,19 +251,36 @@
   }
 };
 
+function codeFromEvent (e) {
+  if ((e.charCode) && (e.keyCode==0))
+    return e.charCode
+  return e.keyCode;
+};
 
-/**
- * Event handling after a key pressed
+
+/*
+ * Event handling after a key is down
+ * for arrows!
  */
-function updateKey (that, e) {
+function updateKeyDown (that, e) {
+  var code = codeFromEvent(e);
   var menu = that.menu();
 
-  switch (e.key) {
-  case 'Esc':
+  /*
+   * keyCodes:
+   * - Down  = 40
+   * - Esc   = 27
+   * - Up    = 38
+   * - Enter = 13
+   * - shift = 16
+   * for characters use e.key
+   */
+  switch (code) {
+  case 27: // 'Esc'
     // Hide menu
     menu.hide();
     break;
-  case 'Down':
+  case 40: // 'Down'
     e.halt(); // No event propagation
 
     // Menu is not active
@@ -276,20 +294,20 @@
     };
 
     break;
-  case "Up":
+  case 38: // "Up"
     if (!menu.active)
       break;
     e.halt(); // No event propagation
     that.removePrefix();
     menu.prev();
     break;
-  case "Enter":
+  case 13: // "Enter"
     if (!menu.active)
       break;
     e.halt(); // No event propagation
     that.insertText(menu.getActiveItem().getAction());
     that.removePrefix();
-
+    
     // Remove menu
     menu.hide();
 
@@ -302,41 +320,43 @@
         e.target.getBoundingClientRect().right
       );
     };
-
+    
     break;
   default:
     if (!menu.active)
-      break;
+      return;
 
-    // key stroke is not a character
-    if (e.key.length != 1) {
-
-      // Key stroke is not a text modifying key
-      if (e.key != 'Shift' &&
-          e.key != 'Up'    &&
-          e.key != 'Down'  &&
-          e.key != 'Enter' &&
-	  e.key != 'Alt'   &&
-	  e.key != 'AltGraph' &&
-	  e.key != 'CapsLock') {
-	that.insertPrefix();
-	menu.hide();
-      };
-      break;
+    // Surpress propagation in firefox
+    if (e.key !== undefined && e.key.length != 1) {
+      menu.hide();
     };
-
-    e.halt(); // No event propagation
-    
-    // Try to identify prefix
-    if (menu.skipToPrefix(e.key))
-      break;
-
-    // Prefix not found
-    that.insertPrefix();
-    menu.hide();
   };
 };
 
+/**
+ * Event handling after a key pressed
+ * for characters!
+ */
+function updateKeyPress (that, e) {
+  var character = String.fromCharCode(codeFromEvent(e));
+  var menu = that.menu();
+
+  if (!menu.active)
+    return;
+
+  e.halt(); // No event propagation
+    
+  // Try to identify prefix
+  if (menu.skipToPrefix(character))
+    return;
+
+  // Prefix not found
+  that.insertPrefix();
+  menu.hide();
+};
+
+
+
 // new hint object
 var Hint = {
   _search   : undefined,   // Return the search element
@@ -369,9 +389,18 @@
 
     // Add event listener for key pressed down
     this._search.addEventListener(
+      "keypress",
+      function (e) {
+	updateKeyPress(that, e)
+      },
+      false
+    );
+
+    // Add event listener for key pressed down
+    this._search.addEventListener(
       "keydown",
       function (e) {
-	updateKey(that, e)
+	updateKeyDown(that, e)
       },
       false
     );
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
index 5210fa7..bcf3d85 100644
--- a/public/sass/hint.scss
+++ b/public/sass/hint.scss
@@ -9,8 +9,11 @@
   top: 0;
   font-size: 120%;
   line-height: 120%;
-  padding: 3pt;
+  margin-top: 1pt;
+  padding-top: 2pt;
+  padding-bottom: 1pt;
   color: $dark-orange;
+  background-color: white;
   &:hover, &.active {
     color: $light-green;
     cursor: pointer;
@@ -80,6 +83,9 @@
         background-color: $light-green;
         text-shadow: none;
         color: $dark-green;
+	&:hover {
+	  color: white;
+	}
       }
       &:first-of-type:not(.no-more) {
         border-top-color: $dark-orange;
diff --git a/public/sass/style.scss b/public/sass/style.scss
index c26c053..40d4ab2 100644
--- a/public/sass/style.scss
+++ b/public/sass/style.scss
@@ -123,7 +123,7 @@
   display: inline-block;
   position: relative;
   color: white;
-  background-color: transparent;
+  background-color: $light-green;
   -webkit-appearance: none;
   border-width: 0;
   border-radius: 0;