moj_template 0.15.0 → 0.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e0b743b407255edecbb3f77b86cd447b6247cbdc
-  data.tar.gz: 29148033ac82d21428ce5d26306812f0749d6891
+  metadata.gz: 42ad957157a4dfd1b590240994193af137b45f14
+  data.tar.gz: 8e118b5eeba64ef790e0827af191aa85b2cf5ccd
 SHA512:
-  metadata.gz: e197dc6c58826a1e97bc8fe0de94bb7fafe99786eeaf118c08f839e480670a186d09d7ce9085e21a8062aae95605de8e913e054e5bf3c22fbafac47e92964cd3
-  data.tar.gz: eced44a06cc8ca771b82b9665667767d0e5c0b1a1d1a1a1f1af9caa9fb240ce81f2e5b571c148069622ea197745a9bc0db9b0446375a77a14876ed2bca638bc4
+  metadata.gz: 6cb3b8234193e712cf7cc823b85e968f5182ef8103cb7449b1807891a4182b2552fe0b17e5f41240df4dcc526ab4924fc5f9909af168e855a1653c167eee042f
+  data.tar.gz: 18e14d29b153d566a2a1331643219f8277e7453659dfcfc7f47c25c944792543182dfed3270cd8d8c6eb99bca45efeff89dcfad1962bb8a5fa67cbc959505d7a

data/app/assets/stylesheets/govuk-template-ie6.css.erb

@@ -6,10 +6,6 @@
 @-o-viewport {
   width: device-width; }
 
-/* CSS 3 Mixins
-
-  Add them as you need them. This should let us manage vendor prefixes in one place.
- */
 @font-face {
   font-family: GDS-Logo;
   src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
@@ -20,68 +16,44 @@
 @-o-viewport {
   width: device-width; }
 
-/* Cross-browser shims
-
-  Ways of normalising properties across browsers.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/* Usage:
-   @include inline-block
-
-   or
-
-   @include inline-block("250px")
-
-   which gives a min-height to the inline-block elements.
-*/
-/* Contain floats usage:
+@-ms-viewport {
+  width: device-width; }
 
-   .this-has-floated-children {
-     @extend %contain-floats;
-   }
+@-o-viewport {
+  width: device-width; }
 
-*/
-#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
   zoom: 1; }
-  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
     content: "";
     display: block;
     clear: both; }
 
-/* CSS 3 Mixins
-
-  Add them as you need them. This should let us manage vendor prefixes in one place.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/*
-
-Mixin and defaults for making buttons on GOV.UK services.
-
-For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
+  zoom: 1; }
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
+    content: "";
+    display: block;
+    clear: both; }
 
-Example usage:
+@-ms-viewport {
+  width: device-width; }
 
-.button{
-  @include button;
-}
-.button-secondary{
-  @include button($grey-3);
-}
-.button-warning{
-  @include button($red);
-}
+@-o-viewport {
+  width: device-width; }
 
-*/
 /* local styleguide includes */
 /* Old depricated greys, new things should use the toolkit greys */
 html, body, button, input, table, td, th {
@@ -315,49 +287,38 @@ button:focus,
 #global-header a:focus {
   color: #0b0c0c; }
 
-/* Cross-browser shims
-
-  Ways of normalising properties across browsers.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/* Usage:
-   @include inline-block
-
-   or
-
-   @include inline-block("250px")
-
-   which gives a min-height to the inline-block elements.
-*/
-/* Contain floats usage:
-
-   .this-has-floated-children {
-     @extend %contain-floats;
-   }
-
-*/
-#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
   zoom: 1; }
-  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
     content: "";
     display: block;
     clear: both; }
 
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
 #global-header {
   background-color: #0b0c0c;
   width: 100%; }
   #global-header .header-wrapper {
+    background-color: #0b0c0c;
     max-width: 990px;
     margin: 0 auto;
-    padding: 0.5em 15px;
-    width: 960px; }
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 15px;
+    padding-right: 15px;
+    width: 990px; }
     #global-header .header-wrapper .header-global .header-logo {
-      width: 49%;
       float: left;
       width: 33.33%; }
       @media screen and (max-width: 379px) {
@@ -455,6 +416,8 @@ button:focus,
         content: " \25B2"; }
     #global-header .header-proposition #proposition-menu {
       margin-top: 5px; }
+      #global-header .header-proposition #proposition-menu.no-proposition-name {
+        margin-top: 37px; }
     #global-header .header-proposition #proposition-links {
       clear: both;
       margin: 2px 0 0 0;
@@ -502,7 +465,25 @@ button:focus,
           #global-header .header-proposition #proposition-links li a:hover {
             text-decoration: underline; }
           #global-header .header-proposition #proposition-links li a.active {
-            color: #28a197; }
+            color: #1d8feb; }
+          #global-header .header-proposition #proposition-links li a:focus {
+            color: #0b0c0c; }
+
+/* Global header bar */
+#global-header-bar {
+  margin: 0 auto;
+  width: auto;
+  max-width: 1020px;
+  width: 1020px; }
+  #global-header-bar .inner-block {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px; }
+  #global-header-bar .header-bar {
+    height: 10px;
+    background-color: #005ea5;
+    font-size: 0; }
 
 /* Global cookie message */
 .js-enabled #global-cookie-message {
@@ -510,32 +491,44 @@ button:focus,
   /* shown with JS, always on for non-JS */ }
 
 #global-cookie-message {
-  padding: 0.5em 2em;
-  background-color: #d5e8f3; }
+  background-color: #d5e8f3;
+  padding-top: 10px;
+  padding-bottom: 10px; }
+  #global-cookie-message .outer-block {
+    margin: 0 auto;
+    width: auto;
+    max-width: 1020px;
+    width: 1020px; }
+  #global-cookie-message .inner-block {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px; }
   #global-cookie-message p {
     font-family: "nta", Arial, sans-serif;
-    font-size: 19px;
-    line-height: 1.31579;
-    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.25;
+    font-weight: 300;
     text-transform: none;
-    margin: 0 auto;
-    max-width: 960px;
-    width: 960px; }
+    margin: 0; }
     @media (max-width: 640px) {
       #global-cookie-message p {
-        font-size: 16px;
-        line-height: 1.25; } }
+        font-size: 14px;
+        line-height: 1.14286; } }
 
 /* Global footer */
 #footer {
   background-color: #dee0e2;
   border-top: 1px solid #a1acb2; }
   #footer .footer-wrapper {
-    max-width: 60em;
     margin: 0 auto;
-    padding: 60px 1em 0 1em;
-    width: 928px;
-    /* we want the width for IE to max out at 960px total (including padding) */ }
+    width: auto;
+    max-width: 1020px;
+    width: 1020px;
+    padding-top: 20px;
+    padding-top: 60px;
+    background-color: #dee0e2;
+    margin: 0 auto; }
   #footer a {
     color: #454a4c; }
     #footer a:hover {
@@ -556,16 +549,21 @@ button:focus,
     #footer h2 a {
       color: inherit; }
   #footer .footer-meta {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 60px;
     clear: both;
     font-size: 0;
-    color: #454a4c;
-    padding-bottom: 60px; }
+    color: #454a4c; }
     #footer .footer-meta .footer-meta-inner {
       display: inline-block;
       vertical-align: bottom;
+      width: 100%;
       width: 75%;
-      display: block;
-      float: left; }
+      float: left;
+      display: block; }
       #footer .footer-meta .footer-meta-inner ul {
         font-family: "nta", Arial, sans-serif;
         font-size: 16px;
@@ -574,8 +572,9 @@ button:focus,
         text-transform: none;
         display: inline-block;
         list-style: none;
-        margin: 0 0 1em;
-        padding: 0; }
+        margin: 0 0 1.5em 0;
+        padding: 0;
+        margin: 0 0 1em 0; }
         @media (max-width: 640px) {
           #footer .footer-meta .footer-meta-inner ul {
             font-size: 14px;
@@ -592,6 +591,7 @@ button:focus,
         padding-left: 53px;
         zoom: 1; }
         #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
+          margin-bottom: 1em;
           position: absolute;
           left: 0;
           top: 0;
@@ -620,28 +620,20 @@ button:focus,
             #footer .footer-meta .footer-meta-inner .open-government-licence p {
               font-size: 14px;
               line-height: 1.14286; } }
-          #footer .footer-meta .footer-meta-inner .open-government-licence p a {
-            font-family: "nta", Arial, sans-serif;
-            font-size: 14px;
-            line-height: 1.42857;
-            font-weight: 400;
-            text-transform: none; }
-            @media (max-width: 640px) {
-              #footer .footer-meta .footer-meta-inner .open-government-licence p a {
-                font-size: 12px;
-                line-height: 1.25; } }
     #footer .footer-meta .copyright {
       font-family: "nta", Arial, sans-serif;
       font-size: 16px;
       line-height: 1.25;
       font-weight: 300;
       text-transform: none;
+      margin: 30px 0 0 0;
+      width: 100%;
+      display: block;
       display: inline-block;
-      float: none;
       text-align: inherit;
       width: 25%;
       padding-top: 15px;
-      display: block;
+      margin-top: 0;
       float: right;
       height: 150px;
       width: 24%; }
@@ -651,11 +643,15 @@ button:focus,
           line-height: 1.14286; } }
       #footer .footer-meta .copyright a {
         display: block;
-        padding: 115px 0 0 0;
-        background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
-        text-align: right;
+        background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
+        background-repeat: no-repeat;
+        background-position: 50% 0%;
+        background-position: 100% 0%;
+        background-image: url(<%= asset_path 'images/govuk-crest-ie.png' %>);
+        text-align: center;
         text-decoration: none;
-        background-image: url(<%= asset_path 'images/govuk-crest-ie.png' %>); }
+        text-align: right;
+        padding: 115px 0 0 0; }
         @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
           #footer .footer-meta .copyright a {
             background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);

data/app/assets/stylesheets/govuk-template-ie7.css.erb

@@ -6,10 +6,6 @@
 @-o-viewport {
   width: device-width; }
 
-/* CSS 3 Mixins
-
-  Add them as you need them. This should let us manage vendor prefixes in one place.
- */
 @font-face {
   font-family: GDS-Logo;
   src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
@@ -20,68 +16,44 @@
 @-o-viewport {
   width: device-width; }
 
-/* Cross-browser shims
-
-  Ways of normalising properties across browsers.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/* Usage:
-   @include inline-block
-
-   or
-
-   @include inline-block("250px")
-
-   which gives a min-height to the inline-block elements.
-*/
-/* Contain floats usage:
+@-ms-viewport {
+  width: device-width; }
 
-   .this-has-floated-children {
-     @extend %contain-floats;
-   }
+@-o-viewport {
+  width: device-width; }
 
-*/
-#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
   zoom: 1; }
-  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
     content: "";
     display: block;
     clear: both; }
 
-/* CSS 3 Mixins
-
-  Add them as you need them. This should let us manage vendor prefixes in one place.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/*
-
-Mixin and defaults for making buttons on GOV.UK services.
-
-For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
+  zoom: 1; }
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
+    content: "";
+    display: block;
+    clear: both; }
 
-Example usage:
+@-ms-viewport {
+  width: device-width; }
 
-.button{
-  @include button;
-}
-.button-secondary{
-  @include button($grey-3);
-}
-.button-warning{
-  @include button($red);
-}
+@-o-viewport {
+  width: device-width; }
 
-*/
 /* local styleguide includes */
 /* Old depricated greys, new things should use the toolkit greys */
 html, body, button, input, table, td, th {
@@ -315,48 +287,38 @@ button:focus,
 #global-header a:focus {
   color: #0b0c0c; }
 
-/* Cross-browser shims
-
-  Ways of normalising properties across browsers.
- */
 @-ms-viewport {
   width: device-width; }
 
 @-o-viewport {
   width: device-width; }
 
-/* Usage:
-   @include inline-block
-
-   or
-
-   @include inline-block("250px")
-
-   which gives a min-height to the inline-block elements.
-*/
-/* Contain floats usage:
-
-   .this-has-floated-children {
-     @extend %contain-floats;
-   }
-
-*/
-#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
+#global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #footer .footer-meta {
   zoom: 1; }
-  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
+  #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after {
     content: "";
     display: block;
     clear: both; }
 
+@-ms-viewport {
+  width: device-width; }
+
+@-o-viewport {
+  width: device-width; }
+
 #global-header {
   background-color: #0b0c0c;
   width: 100%; }
   #global-header .header-wrapper {
+    background-color: #0b0c0c;
     max-width: 990px;
     margin: 0 auto;
-    padding: 0.5em 15px; }
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 15px;
+    padding-right: 15px;
+    width: 990px; }
     #global-header .header-wrapper .header-global .header-logo {
-      width: 49%;
       float: left;
       width: 33.33%; }
       @media screen and (max-width: 379px) {
@@ -454,6 +416,8 @@ button:focus,
         content: " \25B2"; }
     #global-header .header-proposition #proposition-menu {
       margin-top: 5px; }
+      #global-header .header-proposition #proposition-menu.no-proposition-name {
+        margin-top: 37px; }
     #global-header .header-proposition #proposition-links {
       clear: both;
       margin: 2px 0 0 0;
@@ -501,7 +465,25 @@ button:focus,
           #global-header .header-proposition #proposition-links li a:hover {
             text-decoration: underline; }
           #global-header .header-proposition #proposition-links li a.active {
-            color: #28a197; }
+            color: #1d8feb; }
+          #global-header .header-proposition #proposition-links li a:focus {
+            color: #0b0c0c; }
+
+/* Global header bar */
+#global-header-bar {
+  margin: 0 auto;
+  width: auto;
+  max-width: 1020px;
+  width: 1020px; }
+  #global-header-bar .inner-block {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px; }
+  #global-header-bar .header-bar {
+    height: 10px;
+    background-color: #005ea5;
+    font-size: 0; }
 
 /* Global cookie message */
 .js-enabled #global-cookie-message {
@@ -509,31 +491,44 @@ button:focus,
   /* shown with JS, always on for non-JS */ }
 
 #global-cookie-message {
-  padding: 0.5em 2em;
-  background-color: #d5e8f3; }
+  background-color: #d5e8f3;
+  padding-top: 10px;
+  padding-bottom: 10px; }
+  #global-cookie-message .outer-block {
+    margin: 0 auto;
+    width: auto;
+    max-width: 1020px;
+    width: 1020px; }
+  #global-cookie-message .inner-block {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px; }
   #global-cookie-message p {
     font-family: "nta", Arial, sans-serif;
-    font-size: 19px;
-    line-height: 1.31579;
-    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.25;
+    font-weight: 300;
     text-transform: none;
-    margin: 0 auto;
-    max-width: 960px; }
+    margin: 0; }
     @media (max-width: 640px) {
       #global-cookie-message p {
-        font-size: 16px;
-        line-height: 1.25; } }
+        font-size: 14px;
+        line-height: 1.14286; } }
 
 /* Global footer */
 #footer {
   background-color: #dee0e2;
   border-top: 1px solid #a1acb2; }
   #footer .footer-wrapper {
-    max-width: 60em;
     margin: 0 auto;
-    padding: 60px 1em 0 1em;
-    width: 928px;
-    /* we want the width for IE to max out at 960px total (including padding) */ }
+    width: auto;
+    max-width: 1020px;
+    width: 1020px;
+    padding-top: 20px;
+    padding-top: 60px;
+    background-color: #dee0e2;
+    margin: 0 auto; }
   #footer a {
     color: #454a4c; }
     #footer a:hover {
@@ -554,16 +549,21 @@ button:focus,
     #footer h2 a {
       color: inherit; }
   #footer .footer-meta {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 60px;
     clear: both;
     font-size: 0;
-    color: #454a4c;
-    padding-bottom: 60px; }
+    color: #454a4c; }
     #footer .footer-meta .footer-meta-inner {
       display: inline-block;
       vertical-align: bottom;
+      width: 100%;
       width: 75%;
-      display: block;
-      float: left; }
+      float: left;
+      display: block; }
       #footer .footer-meta .footer-meta-inner ul {
         font-family: "nta", Arial, sans-serif;
         font-size: 16px;
@@ -572,8 +572,9 @@ button:focus,
         text-transform: none;
         display: inline-block;
         list-style: none;
-        margin: 0 0 1em;
-        padding: 0; }
+        margin: 0 0 1.5em 0;
+        padding: 0;
+        margin: 0 0 1em 0; }
         @media (max-width: 640px) {
           #footer .footer-meta .footer-meta-inner ul {
             font-size: 14px;
@@ -589,6 +590,7 @@ button:focus,
         position: relative;
         padding-left: 53px; }
         #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
+          margin-bottom: 1em;
           position: absolute;
           left: 0;
           top: 0;
@@ -617,28 +619,20 @@ button:focus,
             #footer .footer-meta .footer-meta-inner .open-government-licence p {
               font-size: 14px;
               line-height: 1.14286; } }
-          #footer .footer-meta .footer-meta-inner .open-government-licence p a {
-            font-family: "nta", Arial, sans-serif;
-            font-size: 14px;
-            line-height: 1.42857;
-            font-weight: 400;
-            text-transform: none; }
-            @media (max-width: 640px) {
-              #footer .footer-meta .footer-meta-inner .open-government-licence p a {
-                font-size: 12px;
-                line-height: 1.25; } }
     #footer .footer-meta .copyright {
       font-family: "nta", Arial, sans-serif;
       font-size: 16px;
       line-height: 1.25;
       font-weight: 300;
       text-transform: none;
+      margin: 30px 0 0 0;
+      width: 100%;
+      display: block;
       display: inline-block;
-      float: none;
       text-align: inherit;
       width: 25%;
       padding-top: 15px;
-      display: block;
+      margin-top: 0;
       float: right;
       height: 150px;
       width: 24%; }
@@ -648,10 +642,14 @@ button:focus,
           line-height: 1.14286; } }
       #footer .footer-meta .copyright a {
         display: block;
-        padding: 115px 0 0 0;
-        background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
+        background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
+        background-repeat: no-repeat;
+        background-position: 50% 0%;
+        background-position: 100% 0%;
+        text-align: center;
+        text-decoration: none;
         text-align: right;
-        text-decoration: none; }
+        padding: 115px 0 0 0; }
         @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
           #footer .footer-meta .copyright a {
             background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);