Have focus outline appear outside of element rather than covering it. (…

…#259)

* Add 0 offset to focus outline to fix chrome bug

* Inset focus for search inputs in header

* Make offset smaller to work around 1px border bug on inputs

source/assets/stylesheets/_accessibility.scss

@@ -91,12 +91,19 @@ a:focus {
 input:focus,
 textarea:focus,
 select:focus,
-button:focus,
-#global-header input:focus {
+button:focus {
   outline: 3px solid $focus-colour;
+  outline-offset: 0;
 }
 
 #global-header {
+
+  input[type=search]:focus {
+    outline: 3px solid $focus-colour;
+    /* Focus appears inside the input */
+    outline-offset: -2px;
+  }
+
   h1 a:focus {
     background-color: transparent;
     outline: none;