From ae59d3fa7ec288832bd8a0e6b41428e66b5ab1e0 Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Mon, 31 Oct 2011 20:45:46 -0700
Subject: In response to issue 363 I Adjusted the CSS for
 .internalVimiumHintMarker for greater specificity so linkhints won't be so
 easily tampered with by the sites CSS.

---
 background_page.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/background_page.html b/background_page.html
index 51f9d462..7b14f11b 100644
--- a/background_page.html
+++ b/background_page.html
@@ -51,20 +51,23 @@
     '.internalVimiumHintMarker {' +
       'position:absolute;' +
       'background-color:yellow;' +
-      'color:black;' +
-      'font-weight:bold;' +
-      'font-size:12px;' +
       'padding:0 1px;' +
-      'line-height:100%;' +
       'width:auto;' +
       'display:block;' +
       'border:1px solid #E3BE23;' +
       'z-index:99999999;' +
-      'font-family:"Helvetica Neue", "Helvetica", "Arial", "Sans";' +
       'top:-1px;' +
       'left:-1px;' +
       'white-space:nowrap;' +
     '}' +
+    'div .internalVimiumHintMarker span {' +
+      'color: black;' +
+      'font-weight: bold;' +
+      'font-size: 12px;' +
+      'font-style: normal;' +
+      'line-height: 100%;' +
+      'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
+    '}' +
     '.internalVimiumHintMarker > .matchingCharacter {' +
       'color:#C79F0B;' +
     '}';
-- 
cgit v1.2.3


From d8342ce8bef66c882f197c64189dacc45d3b38c5 Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Tue, 1 Nov 2011 15:57:27 -0700
Subject: Added additional css properties to span definition that could
 possibly be overwritten by websites.

---
 background_page.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/background_page.html b/background_page.html
index 7b14f11b..c0332d7f 100644
--- a/background_page.html
+++ b/background_page.html
@@ -60,13 +60,23 @@
       'left:-1px;' +
       'white-space:nowrap;' +
     '}' +
-    'div .internalVimiumHintMarker span {' +
+    '.internalVimiumHintMarker span {' +
       'color: black;' +
+      'text-decoration: none;' +
       'font-weight: bold;' +
       'font-size: 12px;' +
       'font-style: normal;' +
+      'letter-spacing: 0;' +
+      'text-transform: none;' +
+      'text-align: left;' +
+      'text-indent: 0;' +
       'line-height: 100%;' +
       'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
+      'padding: 0;' +
+      'margin: 0;' +
+      'float: none;' +
+      'border: none;' +
+      'background: none;' +
     '}' +
     '.internalVimiumHintMarker > .matchingCharacter {' +
       'color:#C79F0B;' +
-- 
cgit v1.2.3


From 2f6f875a68ab3d312c570010d6902ede8508627a Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Tue, 1 Nov 2011 22:16:04 -0700
Subject: Changed the default settings for css links options page. Includes the
 new declaration for span and entries for the properties users are most likely
 to want to change to make it easier to know where their changes should be
 applied.

---
 background_page.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/background_page.html b/background_page.html
index c0332d7f..ada4b70c 100644
--- a/background_page.html
+++ b/background_page.html
@@ -29,7 +29,8 @@
     linkHintCharacters: "sadfjklewcmpgh",
     filterLinkHints: false,
     userDefinedLinkHintCss:
-      ".vimiumHintMarker {\n\n}\n" +
+      ".vimiumHintMarker \n/* linkhint boxes */ {\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
+      ".vimiumHintMarker span \n/* linkhints text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
       ".vimiumHintMarker > .matchingCharacter {\n\n}",
     excludedUrls: "http*://mail.google.com/*\n" +
                   "http*://www.google.com/reader/*\n",
-- 
cgit v1.2.3


From 7745b49e9e90f043f4e494f1fe024cbd5b833de5 Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Tue, 1 Nov 2011 22:46:55 -0700
Subject: Defined margin as 0 on .vimiumHintMarker and .vimiumHUD to protect
 against margin settings on the base div element by sites

---
 background_page.html | 1 +
 vimiumFrontend.js    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/background_page.html b/background_page.html
index ada4b70c..73ffd77f 100644
--- a/background_page.html
+++ b/background_page.html
@@ -53,6 +53,7 @@
       'position:absolute;' +
       'background-color:yellow;' +
       'padding:0 1px;' +
+      'margin: 0;' +
       'width:auto;' +
       'display:block;' +
       'border:1px solid #E3BE23;' +
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 4ab01d2a..edc67709 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -796,6 +796,7 @@ HUD = {
       "text-align: left;" +
       "background-color: #ebebeb;" +
       "padding: 3px 3px 2px 3px;" +
+      "margin: 0; " +
       "border: 1px solid #b3b3b3;" +
       "border-radius: 4px 4px 0 0;" +
       "font-family: Lucida Grande, Arial, Sans;" +
-- 
cgit v1.2.3


From 44c36c6ab1c6111f25e535fabfd3b5c75fb4120e Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Wed, 2 Nov 2011 14:10:54 -0700
Subject: Adjusted CSS for linkhints, help menu, text search, and bookmarks
 search UI elements. They should now be able to stand up to base element
 declarations created by a website. Added comments to the linkhints css
 settings on the options page and set default properties that a user would
 change to make it clear where they should be modified. Added a dropshadow to
 the linkhints to make them stand out better against similarly colored site
 backgrounds.

---
 background_page.html | 28 ++++++++++++++++++++++++++--
 completionDialog.js  | 26 ++++++++++++++++----------
 helpDialog.html      | 44 ++++++++++++++++++++++++++++++++++++++++++--
 vimiumFrontend.js    |  9 +++++++++
 4 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/background_page.html b/background_page.html
index 73ffd77f..7ba2471d 100644
--- a/background_page.html
+++ b/background_page.html
@@ -30,7 +30,7 @@
     filterLinkHints: false,
     userDefinedLinkHintCss:
       ".vimiumHintMarker \n/* linkhint boxes */ {\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
-      ".vimiumHintMarker span \n/* linkhints text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
+      ".vimiumHintMarker span \n/* linkhint text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
       ".vimiumHintMarker > .matchingCharacter {\n\n}",
     excludedUrls: "http*://mail.google.com/*\n" +
                   "http*://www.google.com/reader/*\n",
@@ -55,27 +55,51 @@
       'padding:0 1px;' +
       'margin: 0;' +
       'width:auto;' +
+      'height:auto;' +
       'display:block;' +
       'border:1px solid #E3BE23;' +
+      'opacity: 1;' +
       'z-index:99999999;' +
       'top:-1px;' +
       'left:-1px;' +
-      'white-space:nowrap;' +
+      'bottom: auto;' +
+      'right: auto;' +
+      'text-indent: 0;' +
+      // set font-size and line-height to ensure the box height adjust to the span height
+      'font-size: 0px;' +
+      'line-height: 100%;' +
+      // Add drop shadow in case the linkhint color is the same as the page color
+      'box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;' +
+      'max-width: none;' +
+      'min-width: 0;' +
+      'max-height: none;' +
+      'min-height: 0;' +
     '}' +
     '.internalVimiumHintMarker span {' +
       'color: black;' +
+      'opacity: 1;' +
       'text-decoration: none;' +
       'font-weight: bold;' +
       'font-size: 12px;' +
+      'font-size-adjust: normal;' +
       'font-style: normal;' +
+      'font-width: normal;' +
       'letter-spacing: 0;' +
       'text-transform: none;' +
       'text-align: left;' +
       'text-indent: 0;' +
+      'text-shadow: none;' +
       'line-height: 100%;' +
       'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
       'padding: 0;' +
       'margin: 0;' +
+      'width: auto;' +
+      'height: auto;' +
+      'min-height: 0;' +
+      'max-height: none;' +
+      'min-width: 0;' +
+      'max-width: none;' +
+      'display: inline;' +
       'float: none;' +
       'border: none;' +
       'background: none;' +
diff --git a/completionDialog.js b/completionDialog.js
index f264eb2a..7a01a10d 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -149,30 +149,36 @@
     "color: black;" +
     "padding:10px;"+
     "border-radius: 4px;" +
-    "font-family: Lucida Grande, Arial, Sans;" +
     "}"+
+    
     ".vimium-completions {"+
-    "width:400px;"+
+      "width:400px;"+
     "}"+
+    
     ".vimium-completions .vimium-searchBar {"+
-    "height: 15px;"+
-    "border-bottom: 1px solid #b3b3b3;"+
+      "height: 15px;"+
+      "border-bottom: 1px solid #b3b3b3;"+
     "}"+
+    
     ".vimium-completions .vimium-searchResults {"+
     "}"+
+
     ".vimium-completions .vimium-searchResults .vimium-selected{"+
-    "background-color:#aaa;"+
-    "border-radius: 4px;" +
+      "background-color:#aaa;"+
+      "border-radius: 4px;" +
     "}"+
+    
     ".vimium-completions div{"+
-    "padding:4px;"+
+      "padding:4px;"+
     "}"+
+
     ".vimium-completions div strong{"+
-    "color: black;" +
-    "font-weight:bold;"+
+      "color: black;" +
+      "font-weight:bold;"+
     "}"+
+    
     ".vimium-completions .vimium-noResults{"+
-    "color:#555;"+
+      "color:#555;"+
     "}";
 
   window.CompletionDialog = CompletionDialog;
diff --git a/helpDialog.html b/helpDialog.html
index aa534640..aae8b619 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -4,11 +4,46 @@
 -->
 <div id="vimiumHelpDialog">
   <style>
+    /* Reset the elements on this page */
+    #vimiumHelpDialogContainer,
+    #vimiumHelpDialog,
+    #vimiumHelpDialog a,
+    #vimiumTitle,
+    #vimiumTitle span,
+    #vimiumHelpDialogFooter, 
+    .vimiumColumn,
+    .vimiumColumn span,
+    .vimiumDivider,
+    .optionsPage,
+    .closeButton {
+      opacity: 0.92;
+      letter-spacing: 0;
+      height: auto;
+      width: auto;
+      max-width: none;
+      max-height: none;
+      min-width: 0;
+      min-height: 0;
+      text-shadow: none;
+      padding: 0;
+      margin: 0;
+      position: static;
+      top: auto;
+      left: auto;
+      bottom: auto;
+      right: auto;
+      line-height: 100%;
+      font-size:11px;
+      font-weight: normal;
+      font-width: normal;
+      font-size-adjust: none;
+    }
     #vimiumHelpDialog * {
       font-size:11px;
       line-height:130%;
       color:black;
       background-color:transparent;
+      opacity: 1;
     }
     #vimiumHelpDialog {
       text-align:left;
@@ -16,12 +51,14 @@
       opacity:0.92;
       background-color:#eee;
       position:fixed;
-      width:600px;
       font-family:helvetica, arial, sans;
       border:2px solid #b3b3b3;
       border-radius:6px;
       padding:8px 12px;
       width:640px;
+      max-width:none;
+      height: auto;
+      max-height:none;
       left:50%;
       /* This needs to be 1/2 width to horizontally center the help dialog */
       margin-left:-320px;
@@ -31,7 +68,7 @@
       overflow-y: scroll;
     }
     #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle * { font-size:20px; }
+    #vimiumTitle, #vimiumTitle span,  #vimiumTitle * { font-size:20px; }
     .vimiumColumn {
       width:50%;
       float:left;
@@ -72,6 +109,9 @@
       padding-left:10px;
       font-size:16px;
     }
+    #vimiumHelpDialog a {
+      text-decoration: underline;
+    }
     #vimiumHelpDialog a.optionsPage {
       position: absolute;
       right: 60px;
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index edc67709..9b93b4dd 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -784,12 +784,17 @@ HUD = {
       "line-height: 100%;" +
       "font-size: 11px;" +
       "font-weight: normal;" +
+      "letter-spacing: 0;" +
+      "text-decoration: none;" +
     "}" +
     ".vimiumHUD {" +
       "position: fixed;" +
+      "top: auto;" +
+      "left: auto;" +
       "bottom: 0px;" +
       "color: black;" +
       "height: 13px;" +
+      "min-height: 13px;" +
       "width: auto;" +
       "max-width: 400px;" +
       "min-width: 150px;" +
@@ -806,6 +811,10 @@ HUD = {
       "line-height: 1.0;" +
       "opacity: 0;" +
     "}" +
+    // Hide the span between search box letters
+    ".vimiumHUD span {" +
+      "display: none;" +
+    "}" +
     ".vimiumHUD a, .vimiumHUD a:hover {" +
       "background: transparent;" +
       "color: blue;" +
-- 
cgit v1.2.3


From d2118277a39ddb89e95dbcc2c339b15923caea74 Mon Sep 17 00:00:00 2001
From: Peter Parks
Date: Sat, 14 Jan 2012 22:17:56 -0800
Subject: Harden and move CSS declarations out of the code. Remove CSS from
 background_page.html and change getLinkHintCss to only return the user's
 overrides. Add vimiumReset class to html generated by completionDialog,
 helpDialog, linkHints and vimiumFrontEnd Add vimium.css to the manifest and
 link to it in the tests_harnesses/automated.html and options.html. Add an id,
 vimiumLinkHintsContainer, to linkhints div to allow user overrides to have a
 higher specificity. Change the default for the user CSS override.

---
 background_page.html          |  83 ++-----------
 completionDialog.js           |  57 ++-------
 helpDialog.html               | 174 ++++-----------------------
 linkHints.js                  |  10 +-
 manifest.json                 |   1 +
 options.html                  |   1 +
 test_harnesses/automated.html |  23 ++++
 vimium.css                    | 272 ++++++++++++++++++++++++++++++++++++++++++
 vimiumFrontend.js             |  69 +----------
 9 files changed, 351 insertions(+), 339 deletions(-)
 create mode 100644 vimium.css

diff --git a/background_page.html b/background_page.html
index 7ba2471d..d436c51e 100644
--- a/background_page.html
+++ b/background_page.html
@@ -29,9 +29,11 @@
     linkHintCharacters: "sadfjklewcmpgh",
     filterLinkHints: false,
     userDefinedLinkHintCss:
-      ".vimiumHintMarker \n/* linkhint boxes */ {\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
-      ".vimiumHintMarker span \n/* linkhint text */ {\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
-      ".vimiumHintMarker > .matchingCharacter {\n\n}",
+      "#vimiumHintMarkerContainer .vimiumHintMarker \n/* linkhint boxes */ " +
+      "{\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
+      "#vimiumHintMarkerContainer .vimiumHintMarker span \n/* linkhint text */ " +
+      "{\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
+      "#vimiumHintMarkerContainer .vimiumHintMarker > .matchingCharacter {\n\n}",
     excludedUrls: "http*://mail.google.com/*\n" +
                   "http*://www.google.com/reader/*\n",
 
@@ -46,69 +48,6 @@
     nextPatterns: "next,more,>,\u2192,\xbb,\u226b,>>",
   };
 
-  // This is the base internal link hints CSS. It's combined with the userDefinedLinkHintCss before
-  // being sent to the frontend.
-  var linkHintCss =
-    '.internalVimiumHintMarker {' +
-      'position:absolute;' +
-      'background-color:yellow;' +
-      'padding:0 1px;' +
-      'margin: 0;' +
-      'width:auto;' +
-      'height:auto;' +
-      'display:block;' +
-      'border:1px solid #E3BE23;' +
-      'opacity: 1;' +
-      'z-index:99999999;' +
-      'top:-1px;' +
-      'left:-1px;' +
-      'bottom: auto;' +
-      'right: auto;' +
-      'text-indent: 0;' +
-      // set font-size and line-height to ensure the box height adjust to the span height
-      'font-size: 0px;' +
-      'line-height: 100%;' +
-      // Add drop shadow in case the linkhint color is the same as the page color
-      'box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;' +
-      'max-width: none;' +
-      'min-width: 0;' +
-      'max-height: none;' +
-      'min-height: 0;' +
-    '}' +
-    '.internalVimiumHintMarker span {' +
-      'color: black;' +
-      'opacity: 1;' +
-      'text-decoration: none;' +
-      'font-weight: bold;' +
-      'font-size: 12px;' +
-      'font-size-adjust: normal;' +
-      'font-style: normal;' +
-      'font-width: normal;' +
-      'letter-spacing: 0;' +
-      'text-transform: none;' +
-      'text-align: left;' +
-      'text-indent: 0;' +
-      'text-shadow: none;' +
-      'line-height: 100%;' +
-      'font-family: "Helvetica Neue", "Helvetica", "Arial", "Sans";' +
-      'padding: 0;' +
-      'margin: 0;' +
-      'width: auto;' +
-      'height: auto;' +
-      'min-height: 0;' +
-      'max-height: none;' +
-      'min-width: 0;' +
-      'max-width: none;' +
-      'display: inline;' +
-      'float: none;' +
-      'border: none;' +
-      'background: none;' +
-    '}' +
-    '.internalVimiumHintMarker > .matchingCharacter {' +
-      'color:#C79F0B;' +
-    '}';
-
-
   // Port handler mapping
   var portHandlers = {
     keyDown:              handleKeyDown,
@@ -246,12 +185,12 @@
       bindings = (commandsToKey[command] || [""]).join(", ");
       if (showUnboundCommands || commandsToKey[command]) {
         html.push(
-          "<tr class='" + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
-          "<td>", escapeHtml(bindings), "</td>",
-          "<td>:</td><td>", availableCommands[command].description);
+          "<tr class='vimiumReset " + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
+          "<td class='vimiumReset'>", escapeHtml(bindings), "</td>",
+          "<td class='vimiumReset'>:</td><td>", availableCommands[command].description);
 
         if (showCommandNames)
-          html.push("<span class='commandName'>(" + command + ")</span>");
+          html.push("<span class='vimiumReset commandName'>(" + command + ")</span>");
 
         html.push("</td></tr>");
       }
@@ -316,10 +255,10 @@
   }
 
   /*
-   * Returns the core CSS used for link hints, along with any user-provided overrides.
+   * Returns the user-provided CSS overrides.
    */
   function getLinkHintCss(request) {
-    return { linkHintCss: linkHintCss + (localStorage['userDefinedLinkHintCss'] || "") };
+    return { linkHintCss: (localStorage['userDefinedLinkHintCss'] || "") };
   }
 
   /*
diff --git a/completionDialog.js b/completionDialog.js
index 7a01a10d..eec089a0 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -14,6 +14,7 @@
         handlerStack.push({ keydown: this.onKeydown });
         render.call(this);
         clearInterval(this._tweenId);
+        this.container.style.display = "block";
         this._tweenId = Tween.fade(this.container, 1.0, 150);
       }
     },
@@ -41,7 +42,6 @@
 
   var initialize = function() {
     var self = this;
-    addCssToPage(completionCSS);
 
     self.currentSelection = 0;
 
@@ -94,27 +94,27 @@
       container.style.display = "";
 
       if (searchString === undefined) {
-        this.container.className = "vimium-dialog";
+        this.container.className = "vimiumReset vimium-dialog";
         createDivInside(container).innerHTML = this.options.initialSearchText || "Begin typing";
       }
       else {
-        this.container.className = "vimium-dialog vimium-completions";
+        this.container.className = "vimiumReset vimium-dialog vimium-completions";
         var searchBar = createDivInside(container);
         searchBar.innerHTML=searchString;
-        searchBar.className="vimium-searchBar";
+        searchBar.className="vimiumReset vimium-searchBar";
 
         searchResults = createDivInside(container);
-        searchResults.className="vimium-searchResults";
+        searchResults.className="vimiumReset vimium-searchResults";
         if (completions.length<=0) {
           var resultDiv = createDivInside(searchResults);
-          resultDiv.className="vimium-noResults";
+          resultDiv.className="vimiumReset vimium-noResults";
           resultDiv.innerHTML="No results found";
         }
         else {
           for (var i = 0; i < completions.length; i++) {
             var resultDiv = createDivInside(searchResults);
             if (i === this.currentSelection) {
-              resultDiv.className="vimium-selected";
+              resultDiv.className="vimiumReset vimium-selected";
             }
             resultDiv.innerHTML=this.options.renderOption(searchString, completions[i]);
           }
@@ -127,6 +127,7 @@
   };
   var createDivInside = function(parent) {
     var element = document.createElement("div");
+    element.className = "vimiumReset";
     parent.appendChild(element);
     return element;
   }
@@ -139,48 +140,6 @@
     }
   }
 
-  var completionCSS = ".vimium-dialog {"+
-    "position:fixed;"+
-    "background-color: #ebebeb;" +
-    "z-index: 99999998;" +
-    "border: 1px solid #b3b3b3;" +
-    "font-size: 12px;" +
-    "text-align:left;"+
-    "color: black;" +
-    "padding:10px;"+
-    "border-radius: 4px;" +
-    "}"+
-    
-    ".vimium-completions {"+
-      "width:400px;"+
-    "}"+
-    
-    ".vimium-completions .vimium-searchBar {"+
-      "height: 15px;"+
-      "border-bottom: 1px solid #b3b3b3;"+
-    "}"+
-    
-    ".vimium-completions .vimium-searchResults {"+
-    "}"+
-
-    ".vimium-completions .vimium-searchResults .vimium-selected{"+
-      "background-color:#aaa;"+
-      "border-radius: 4px;" +
-    "}"+
-    
-    ".vimium-completions div{"+
-      "padding:4px;"+
-    "}"+
-
-    ".vimium-completions div strong{"+
-      "color: black;" +
-      "font-weight:bold;"+
-    "}"+
-    
-    ".vimium-completions .vimium-noResults{"+
-      "color:#555;"+
-    "}";
-
   window.CompletionDialog = CompletionDialog;
 
 }(window, document))
diff --git a/helpDialog.html b/helpDialog.html
index aae8b619..7bd08829 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -2,173 +2,49 @@
   This is shown when typing "?". This HTML is loaded by the background page and then populated with the
   latest keybindings information before displaying.
 -->
-<div id="vimiumHelpDialog">
-  <style>
-    /* Reset the elements on this page */
-    #vimiumHelpDialogContainer,
-    #vimiumHelpDialog,
-    #vimiumHelpDialog a,
-    #vimiumTitle,
-    #vimiumTitle span,
-    #vimiumHelpDialogFooter, 
-    .vimiumColumn,
-    .vimiumColumn span,
-    .vimiumDivider,
-    .optionsPage,
-    .closeButton {
-      opacity: 0.92;
-      letter-spacing: 0;
-      height: auto;
-      width: auto;
-      max-width: none;
-      max-height: none;
-      min-width: 0;
-      min-height: 0;
-      text-shadow: none;
-      padding: 0;
-      margin: 0;
-      position: static;
-      top: auto;
-      left: auto;
-      bottom: auto;
-      right: auto;
-      line-height: 100%;
-      font-size:11px;
-      font-weight: normal;
-      font-width: normal;
-      font-size-adjust: none;
-    }
-    #vimiumHelpDialog * {
-      font-size:11px;
-      line-height:130%;
-      color:black;
-      background-color:transparent;
-      opacity: 1;
-    }
-    #vimiumHelpDialog {
-      text-align:left;
-      border:3px solid red;
-      opacity:0.92;
-      background-color:#eee;
-      position:fixed;
-      font-family:helvetica, arial, sans;
-      border:2px solid #b3b3b3;
-      border-radius:6px;
-      padding:8px 12px;
-      width:640px;
-      max-width:none;
-      height: auto;
-      max-height:none;
-      left:50%;
-      /* This needs to be 1/2 width to horizontally center the help dialog */
-      margin-left:-320px;
-      top:50px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
-      z-index:99999998;
-      overflow-y: scroll;
-    }
-    #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle span,  #vimiumTitle * { font-size:20px; }
-    .vimiumColumn {
-      width:50%;
-      float:left;
-    }
-    .vimiumColumn table, .vimiumColumn td, .vimiumColumn tr { padding:0; margin:0; }
-    .vimiumColumn table { width:100%; table-layout:auto; }
-    .vimiumColumn td { vertical-align:top; padding:1px; }
-    #vimiumHelpDialog .vimiumColumn tr > td:first-of-type {
-      text-align:right;
-      font-weight:bold;
-      color:#2f508e;
-      white-space:nowrap;
-    }
-    /* Make the description column as wide as it can be. */
-    #vimiumHelpDialog .vimiumColumn tr > td:nth-of-type(3) { width:100%; }
-    #vimiumHelpDialog .vimiumDivider {
-      height:1px;
-      width:92%;
-      margin:10px auto;
-      background-color:#9a9a9a;
-    }
-    #vimiumHelpDialog .vimiumHelpSectionTitle {
-      font-weight:bold;
-      padding-top:3px;
-    }
-    #vimiumHelpDialog .commandName { font-family:"courier new"; }
-    /* Advanced commands are hidden by default until you show them. */
-    #vimiumHelpDialog .advanced { display: none; }
-    #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; }
-    #vimiumHelpDialog .closeButton {
-      position:absolute;
-      right:10px;
-      top:5px;
-      font-family:"courier new";
-      font-weight:bold;
-      color:#555;
-      text-decoration:none;
-      padding-left:10px;
-      font-size:16px;
-    }
-    #vimiumHelpDialog a {
-      text-decoration: underline;
-    }
-    #vimiumHelpDialog a.optionsPage {
-      position: absolute;
-      right: 60px;
-      top: 8px;
-    }
-    #vimiumHelpDialog .closeButton:hover {
-      color:black;
-      cursor:default;
-      -webkit-user-select:none;
-    }
-    #vimiumHelpDialogFooter { position: relative; }
-    #vimiumHelpDialogFooter * { font-size:10px; }
-    #vimiumHelpDialogFooter .toggleAdvancedCommands {
-      position: absolute;
-      right: 2px;
-      top: -34px;
-    }
-  </style>
-
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-  <a class="optionsPage" href="#">Options</a>
-  <a class="closeButton" href="#">x</a>
-  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>
+  <div id="vimiumHelpDialog" class="vimiumReset">
+  <a class="vimiumReset optionsPage" href="#">Options</a>
+  <a class="vimiumReset closeButton" href="#">x</a>
+  <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium {{title}}</div>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset">
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
       {{pageNavigation}}
+      </tbody>
     </table>
   </div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Using find</td></tr>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset" >
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
       {{findCommands}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating history</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
       {{historyNavigation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Manipulating tabs</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
       {{tabManipulation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Miscellaneous</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
       {{misc}}
+      </tbody>
     </table>
   </div>
 
   <br clear="both"/>
-  <div class="vimiumDivider"></div>
+  <div class="vimiumReset vimiumDivider"></div>
 
-  <div id="vimiumHelpDialogFooter">
-    <a href="#" class="toggleAdvancedCommands">Show advanced commands</a>
+  <div id="vimiumHelpDialogFooter" class="vimiumReset">
+    <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
 
-    <div class="vimiumColumn">
+    <div class="vimiumReset vimiumColumn">
       Enjoying Vimium?
-      <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+      <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
           feedback</a>.<br/>
-      Found a bug? <a href="http://github.com/philc/vimium/issues">Report it here</a>.
+      Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
     </div>
-    <div class="vimiumColumn" style="text-align:right">
-      <span>Version {{version}}</span><br/>
+    <div class="vimiumReset vimiumColumn" style="text-align:right">
+      <span class="vimiumReset">Version {{version}}</span><br/>
     </div>
   </div>
 
diff --git a/linkHints.js b/linkHints.js
index 0181436b..2c0f6504 100644
--- a/linkHints.js
+++ b/linkHints.js
@@ -54,7 +54,8 @@ var linkHints = {
 
   activateMode: function(openInNewTab, withQueue, copyLinkUrl) {
     if (!this.cssAdded)
-      addCssToPage(linkHintCss); // linkHintCss is declared by vimiumFrontend.js
+      // linkHintCss is declared by vimiumFrontend.js and contains the user supplied css overrides.
+      addCssToPage(linkHintCss); 
     this.linkHintCssAdded = true;
     this.setOpenLinkMode(openInNewTab, withQueue, copyLinkUrl);
     this.buildLinkHints();
@@ -95,7 +96,8 @@ var linkHints = {
     // that if you scroll the page and the link has position=fixed, the marker will not stay fixed.
     // Also note that adding these nodes to document.body all at once is significantly faster than one-by-one.
     this.hintMarkerContainingDiv = document.createElement("div");
-    this.hintMarkerContainingDiv.className = "internalVimiumHintMarker";
+    this.hintMarkerContainingDiv.id = "vimiumHintMarkerContainer";
+    this.hintMarkerContainingDiv.className = "vimiumReset internalVimiumHintMarker";
     for (var i = 0; i < this.hintMarkers.length; i++)
       this.hintMarkerContainingDiv.appendChild(this.hintMarkers[i]);
 
@@ -533,7 +535,7 @@ var hintUtils = {
   spanWrap: function(hintString) {
     var innerHTML = [];
     for (var i = 0; i < hintString.length; i++)
-      innerHTML.push("<span>" + hintString[i].toUpperCase() + "</span>");
+      innerHTML.push("<span class='vimiumReset'>" + hintString[i].toUpperCase() + "</span>");
     return innerHTML.join("");
   },
 
@@ -542,7 +544,7 @@ var hintUtils = {
    */
   createMarkerFor: function(link) {
     var marker = document.createElement("div");
-    marker.className = "internalVimiumHintMarker vimiumHintMarker";
+    marker.className = "vimiumReset internalVimiumHintMarker vimiumHintMarker";
     marker.clickableItem = link.element;
 
     var clientRect = link.rect;
diff --git a/manifest.json b/manifest.json
index 5207e1c5..4b14f444 100644
--- a/manifest.json
+++ b/manifest.json
@@ -25,6 +25,7 @@
              "completionDialog.js",
              "bookmarks.js"
             ],
+      "css": ["vimium.css"],
       "run_at": "document_start",
       "all_frames": true
     }
diff --git a/options.html b/options.html
index 8dfd23e8..3d4033e3 100644
--- a/options.html
+++ b/options.html
@@ -79,6 +79,7 @@
       /* Boolean options have a tighter form representation than text options. */
       td.booleanOption { font-size: 12px; }
     </style>
+  <link rel="stylesheet" type="text/css" href="vimium.css" />
 
   <script type="text/javascript">
   $ = function(id) { return document.getElementById(id); };
diff --git a/test_harnesses/automated.html b/test_harnesses/automated.html
index 764b0d2f..ac9b9d37 100644
--- a/test_harnesses/automated.html
+++ b/test_harnesses/automated.html
@@ -26,6 +26,7 @@
         border-bottom: dashed 1px #999;
       }
     </style>
+    <link rel="stylesheet" type="text/css" href="../vimium.css" />
     <script type="text/javascript" src="../lib/utils.js"></script>
     <script type="text/javascript" src="../lib/keyboardUtils.js"></script>
     <script type="text/javascript" src="../linkHints.js"></script>
@@ -223,6 +224,28 @@
             assert.equal("5: a label", linkHints.hintMarkers[4].textContent.toLowerCase());
           })
 
+        ),
+
+        context("Input focus",
+
+          setup(function() {
+            var testContent =
+              "<input type='text' id='first'/>" +
+              "<input style='display:none;' id='second'/>" +
+              "<input type='password' id='third' value='some value'/>";
+            document.getElementById("test-div").innerHTML = testContent;
+          }),
+
+          tearDown(function() {
+            document.getElementById("test-div").innerHTML = "";
+          }),
+
+          should("focus the right element", function() {
+            focusInput(1);
+            assert.equal('first', document.activeElement.id);
+            focusInput(100);
+            assert.equal('third', document.activeElement.id);
+          })
         )
 
       );
diff --git a/vimium.css b/vimium.css
new file mode 100644
index 00000000..376fe331
--- /dev/null
+++ b/vimium.css
@@ -0,0 +1,272 @@
+/* All of these declarations contain more specifiers than nesscesary to increase their specificity and help to
+   ensure they override broad CSS declarations by the website vimium overlays. */
+.vimiumReset,
+div.vimiumReset,
+span.vimiumReset,
+table.vimiumReset,
+a.vimiumReset,
+a:visited.vimiumReset,
+a:link.vimiumReset,
+a:hover.vimiumReset,
+td.vimiumReset,
+tr.vimiumReset {
+  background: none;
+  border: none;
+  border: none;
+  bottom: auto;
+  box-shadow: none;
+  color: black;
+  cursor: auto;
+  display: inline;
+  float: none;
+  font-family : "Helvetica Neue", "Helvetica", "Arial", "Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: auto;
+  left: auto;
+  letter-spacing: 0;
+  line-height: 100%;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  min-height: 0;
+  min-width: 0;
+  opacity: 1;
+  padding: 0;
+  position: static;
+  right: auto;
+  text-align: left;
+  text-decoration: none;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  top: auto;
+  vertical-align: baseline;
+  white-space: normal;
+  width: auto;
+  z-index: 99999999;
+}
+
+/* Linkhints CSS */
+div.internalVimiumHintMarker {
+  position: absolute;
+  background-color: yellow;
+  border: 1px solid #E3BE23;
+  display: block;
+  top: -1px;
+  left: -1px;
+  padding: 0 1px;
+  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;
+}
+
+div.internalVimiumHintMarker span {
+  font-weight: bold;
+}
+
+div.internalVimiumHintMarker > .matchingCharacter {
+  color: #C79F0B;
+}
+
+/* Help Dialog CSS */
+
+div#vimiumHelpDialog {
+  border:3px solid red;
+  opacity:0.92;
+  background-color:#eee;
+  position:fixed;
+  border:2px solid #b3b3b3;
+  border-radius:6px;
+  padding:8px 12px;
+  width:640px;
+  left:50%;
+  /* This needs to be 1/2 width to horizontally center the help dialog */
+  margin-left:-320px;
+  top:50px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
+  overflow-y: scroll;
+  z-index:99999998;
+}
+  
+div#vimiumHelpDialog a { color:blue; }
+div#vimiumTitle, div#vimiumTitle span,  div#vimiumTitle * { font-size:20px; }
+#vimiumTitle {
+  display: block;
+  line-height: 130%;
+}
+div.vimiumColumn {
+  width:50%;
+  float:left;
+  font-size: 11px;
+  line-height: 130%;
+}
+
+div.vimiumColumn tr {
+    display: table-row;
+}
+
+div.vimiumColumn td {
+    display: table-cell;
+    font-size: 11px;
+    line-height: 130%;
+}
+div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; margin:0; }
+div.vimiumColumn table { width:100%; table-layout:auto; }
+div.vimiumColumn td { vertical-align:top; padding:1px; }
+div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type {
+  text-align:right;
+  font-weight:bold;
+  color:#2f508e;
+  white-space:nowrap;
+}
+/* Make the description column as wide as it can be. */
+div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; }
+div#vimiumHelpDialog div.vimiumDivider {
+  display: block;
+  height:1px;
+  width:92%;
+  margin:10px auto;
+  background-color:#9a9a9a;
+}
+div#vimiumHelpDialog td.vimiumHelpSectionTitle {
+  font-weight:bold;
+  padding-top:3px;
+}
+div#vimiumHelpDialog div.commandName { font-family:"courier new"; }
+/* Advanced commands are hidden by default until you show them. */
+div#vimiumHelpDialog div.advanced { display: none; }
+div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; }
+div#vimiumHelpDialog a.closeButton {
+  position:absolute;
+  right:10px;
+  top:5px;
+  font-family:"courier new";
+  font-weight:bold;
+  color:#555;
+  text-decoration:none;
+  padding-left:10px;
+  font-size:16px;
+}
+div#vimiumHelpDialog a {
+  text-decoration: underline;
+}
+
+div#vimiumHelpDialog .optionsPage {
+  position: absolute;
+  display: block;
+  font-size: 11px;
+  line-height: 130%;
+  right: 60px;
+  top: 8px;
+}
+div#vimiumHelpDialog a.closeButton:hover {
+  color:black;
+  cursor:default;
+  -webkit-user-select:none;
+}
+div#vimiumHelpDialogFooter { 
+  display: block;
+  position: relative;
+}
+div#vimiumHelpDialogFooter * { font-size:10px; }
+div#vimiumHelpDialogFooter .toggleAdvancedCommands {
+  position: absolute;
+  right: 2px;
+  top: -34px;
+}
+
+/* Vimium HUD CSS */
+
+div.vimiumHUD { 
+  display: block;
+  position: fixed; 
+  top: auto; 
+  left: auto; 
+  bottom: 0px; 
+  color: black; 
+  height: 13px; 
+  min-height: 13px; 
+  width: auto; 
+  max-width: 400px; 
+  min-width: 150px; 
+  text-align: left; 
+  background-color: #ebebeb; 
+  padding: 3px 3px 2px 3px; 
+  margin: 0;  
+  border: 1px solid #b3b3b3; 
+  border-radius: 4px 4px 0 0; 
+  font-family: "Lucida Grande", "Arial", "Sans"; 
+  // One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button.
+  z-index: 99999998; 
+  text-shadow: 0px 1px 2px #FFF; 
+  line-height: 1.0; 
+  opacity: 0; 
+} 
+// Hide the span between search box letters
+div.vimiumHUD span { 
+  display: none; 
+} 
+div.vimiumHUD a:link, div.vimiumHUD a:hover { 
+  background: transparent; 
+  color: blue; 
+  text-decoration: underline; 
+} 
+div.vimiumHUD a:link.close-button { 
+  float:right; 
+  font-family:courier new; 
+  font-weight:bold; 
+  color:#9C9A9A; 
+  text-decoration:none; 
+  padding-left:10px; 
+  margin-top:-1px; 
+  font-size:14px; 
+} 
+div.vimiumHUD a.close-button:hover { 
+  color:#333333; 
+  cursor:default; 
+  -webkit-user-select:none; 
+}
+
+/* Bookmarks completion dialog CSS */
+
+div.vimium-dialog {
+  background-color: #ebebeb; 
+  display: block;
+  position:fixed;
+  z-index: 99999998; 
+  border: 1px solid #b3b3b3; 
+  padding:10px;
+  border-radius: 4px; 
+}
+
+div.vimium-completions {
+  width:400px;
+}
+
+div.vimium-completions .vimium-searchBar {
+  display: block;
+  height: 15px;
+  border-bottom: 1px solid #b3b3b3;
+}
+
+div.vimium-completions div.vimium-searchResults div {
+  display: block;
+}
+
+div.vimium-completions div.vimium-searchResults div.vimium-selected{
+  background-color:#aaa;
+  border-radius: 4px; 
+}
+
+div.vimium-completions div{
+  padding:4px;
+}
+
+div.vimium-completions div strong{
+  font-weight:bold;
+}
+
+div.vimium-completions div.vimium-noResults{
+  color:#555;
+};
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 9b93b4dd..8d924ac7 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -744,6 +744,7 @@ function showHelpDialog(html, fid) {
   isShowingHelpDialog = true;
   var container = document.createElement("div");
   container.id = "vimiumHelpDialogContainer";
+  container.className = "vimiumReset";
 
   document.body.appendChild(container);
 
@@ -779,64 +780,6 @@ HUD = {
   // This HUD is styled to precisely mimick the chrome HUD on Mac. Use the "has_popup_and_link_hud.html"
   // test harness to tweak these styles to match Chrome's. One limitation of our HUD display is that
   // it doesn't sit on top of horizontal scrollbars like Chrome's HUD does.
-  _hudCss:
-    ".vimiumHUD, .vimiumHUD * {" +
-      "line-height: 100%;" +
-      "font-size: 11px;" +
-      "font-weight: normal;" +
-      "letter-spacing: 0;" +
-      "text-decoration: none;" +
-    "}" +
-    ".vimiumHUD {" +
-      "position: fixed;" +
-      "top: auto;" +
-      "left: auto;" +
-      "bottom: 0px;" +
-      "color: black;" +
-      "height: 13px;" +
-      "min-height: 13px;" +
-      "width: auto;" +
-      "max-width: 400px;" +
-      "min-width: 150px;" +
-      "text-align: left;" +
-      "background-color: #ebebeb;" +
-      "padding: 3px 3px 2px 3px;" +
-      "margin: 0; " +
-      "border: 1px solid #b3b3b3;" +
-      "border-radius: 4px 4px 0 0;" +
-      "font-family: Lucida Grande, Arial, Sans;" +
-      // One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button.
-      "z-index: 99999998;" +
-      "text-shadow: 0px 1px 2px #FFF;" +
-      "line-height: 1.0;" +
-      "opacity: 0;" +
-    "}" +
-    // Hide the span between search box letters
-    ".vimiumHUD span {" +
-      "display: none;" +
-    "}" +
-    ".vimiumHUD a, .vimiumHUD a:hover {" +
-      "background: transparent;" +
-      "color: blue;" +
-      "text-decoration: underline;" +
-    "}" +
-    ".vimiumHUD a.close-button {" +
-      "float:right;" +
-      "font-family:courier new;" +
-      "font-weight:bold;" +
-      "color:#9C9A9A;" +
-      "text-decoration:none;" +
-      "padding-left:10px;" +
-      "margin-top:-1px;" +
-      "font-size:14px;" +
-    "}" +
-    ".vimiumHUD a.close-button:hover {" +
-      "color:#333333;" +
-      "cursor:default;" +
-      "-webkit-user-select:none;" +
-    "}",
-
-  _cssHasBeenAdded: false,
 
   showForDuration: function(text, duration) {
     HUD.show(text);
@@ -853,8 +796,8 @@ HUD = {
 
   showUpgradeNotification: function(version) {
     HUD.upgradeNotificationElement().innerHTML = "Vimium has been updated to " +
-      "<a href='https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb'>" +
-      version + "</a>.<a class='close-button' href='#'>x</a>";
+      "<a class='vimiumReset' href='https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb'>" +
+      version + "</a>.<a class='vimiumReset close-button' href='#'>x</a>";
     var links = HUD.upgradeNotificationElement().getElementsByTagName("a");
     links[0].addEventListener("click", HUD.onUpdateLinkClicked, false);
     links[1].addEventListener("click", function(event) {
@@ -896,12 +839,8 @@ HUD = {
   },
 
   createHudElement: function() {
-    if (!HUD._cssHasBeenAdded) {
-      addCssToPage(HUD._hudCss);
-      HUD._cssHasBeenAdded = true;
-    }
     var element = document.createElement("div");
-    element.className = "vimiumHUD";
+    element.className = "vimiumReset vimiumHUD";
     document.body.appendChild(element);
     return element;
   },
-- 
cgit v1.2.3