Change logo dimensions to be divisible by 2

The logo was 71x62 and resized to be 35x31.
As the ratio is slightly off because 71 is not divisible by 2
(there are no half pixels), this changes the logo to be 72x64.

This also simplifies the CSS (removing unnecessary floats and spacing)
and fixes vertical alignment of the logo in print.

source/assets/stylesheets/_core-print.scss

@@ -37,7 +37,7 @@ img { max-width: 100% !important; }
 select { background: white; }
 
 #global-header {
-  margin-bottom: 1em;
+  margin: 3px 0 1em; // 3px additional space at top for countering -3px re-positioning of #logo img
 
   #logo {
     @include bold-48;
@@ -47,10 +47,11 @@ select { background: white; }
     text-rendering: optimizeLegibility;
 
     img {
-      width: 46px;
+      width: 45px;
       height: 40px;
-      margin-right: 6px;
-      float: left;
+      position: relative;
+      top: -3px; // aligns bottom of img with bottom of "G"
+      vertical-align: bottom;
     }
   }
 

source/assets/stylesheets/_header.scss

@@ -40,7 +40,7 @@
         }
       }
       .header-logo {
-        margin: 5px 0 2px;
+        margin-top: 2px;
       }
     }
   }
@@ -71,36 +71,26 @@
 
   #logo {
     float: left;
-    position: relative;
-    top: -1px;
-
     overflow: visible;
-    vertical-align: baseline;
 
     color: $white;
     font-weight: bold;
     font-size: 30px;
     line-height: 1;
     text-decoration: none;
     text-rendering: optimizeLegibility;
-    margin-bottom: -3px;
-    padding-top: 2px;
     border-bottom: 1px solid transparent;
 
     background: image-url('images/gov.uk_logotype_crown.png') no-repeat;
-    background-size: 35px 31px;
+    background-size: 36px 32px;
     background-position: 0 0;
     @include ie-lte(8) {
       background-image: image-url('images/gov.uk_logotype_crown-1x.png');
     }
 
     img {
-      position: relative;
-      top: -2px;
-
-      margin-right: 6px;
-
-      float: left;
+      margin: 2px 1px 0 0; // top margin aligns bottom of img with bottom of "G"
+      vertical-align: bottom;
       visibility: hidden;
     }
 

source/views/layouts/govuk_template.html.erb

@@ -54,7 +54,7 @@
         <div class="header-global">
           <div class="header-logo">
             <a href="<%= content_for?(:homepage_url) ? yield(:homepage_url) : "https://www.gov.uk/" %>" title="<%= content_for?(:logo_link_title) ? yield(:logo_link_title) : "Go to the GOV.UK homepage" %>" id="logo" class="content">
-              <img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="35" height="31" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
+              <img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="36" height="32" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
             </a>
           </div>
           <%= yield :inside_header %>