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.

9 files changed, 351 insertions, 339 deletions

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;
   },