govuk_template 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. data/README.md +4 -0
  2. data/app/assets/stylesheets/govuk-template-ie6.css.erb +89 -96
  3. data/app/assets/stylesheets/govuk-template-ie7.css.erb +88 -94
  4. data/app/assets/stylesheets/govuk-template-ie8.css.erb +83 -90
  5. data/app/assets/stylesheets/govuk-template.css.erb +106 -127
  6. data/app/views/layouts/govuk_template.html.erb +21 -9
  7. data/lib/govuk_template/version.rb +1 -1
  8. metadata +6 -8
  9. data/app/assets/stylesheets/images/separator-2x.png +0 -0
  10. data/app/assets/stylesheets/images/separator.png +0 -0
data/README.md CHANGED
@@ -48,6 +48,10 @@ There is a [proposal for Mustache to support template inheritance](https://githu
48
48
 
49
49
  To generate the tarball of the Mustache Inheritance templates run the `build:mustache_inheritance` rake task. This will produce a tarball in the `pkg` directory.
50
50
 
51
+ ### Jinja version
52
+
53
+ To generate the folder of Jinja templates run `bundle exec rake build:jinja`. This will produce a tarball in the `pkg` directory.
54
+
51
55
  ### Tarball version
52
56
 
53
57
  To generate the tarball, run the `bundle exec rake build:tar`. This will produce a tarball in the `pkg` directory.
data/app/assets/stylesheets/govuk-template-ie6.css.erb CHANGED
@@ -5,10 +5,6 @@
5
5
  @-o-viewport {
6
6
  width: device-width; }
7
7
 
8
- /* CSS 3 Mixins
9
-
10
- Add them as you need them. This should let us manage vendor prefixes in one place.
11
- */
12
8
  @font-face {
13
9
  font-family: GDS-Logo;
14
10
  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
@@ -19,68 +15,44 @@
19
15
  @-o-viewport {
20
16
  width: device-width; }
21
17
 
22
- /* Cross-browser shims
23
-
24
- Ways of normalising properties across browsers.
25
- */
26
18
  @-ms-viewport {
27
19
  width: device-width; }
28
20
 
29
21
  @-o-viewport {
30
22
  width: device-width; }
31
23
 
32
- /* Usage:
33
- @include inline-block
34
-
35
- or
36
-
37
- @include inline-block("250px")
38
-
39
- which gives a min-height to the inline-block elements.
40
- */
41
- /* Contain floats usage:
24
+ @-ms-viewport {
25
+ width: device-width; }
42
26
 
43
- .this-has-floated-children {
44
- @extend %contain-floats;
45
- }
27
+ @-o-viewport {
28
+ width: device-width; }
46
29
 
47
- */
48
- #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
30
+ #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 {
49
31
  zoom: 1; }
50
- #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 {
32
+ #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 {
51
33
  content: "";
52
34
  display: block;
53
35
  clear: both; }
54
36
 
55
- /* CSS 3 Mixins
56
-
57
- Add them as you need them. This should let us manage vendor prefixes in one place.
58
- */
59
37
  @-ms-viewport {
60
38
  width: device-width; }
61
39
 
62
40
  @-o-viewport {
63
41
  width: device-width; }
64
42
 
65
- /*
66
-
67
- Mixin and defaults for making buttons on GOV.UK services.
68
-
69
- For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
43
+ #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 {
44
+ zoom: 1; }
45
+ #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 {
46
+ content: "";
47
+ display: block;
48
+ clear: both; }
70
49
 
71
- Example usage:
50
+ @-ms-viewport {
51
+ width: device-width; }
72
52
 
73
- .button{
74
- @include button;
75
- }
76
- .button-secondary{
77
- @include button($grey-3);
78
- }
79
- .button-warning{
80
- @include button($red);
81
- }
53
+ @-o-viewport {
54
+ width: device-width; }
82
55
 
83
- */
84
56
  /* local styleguide includes */
85
57
  /* Old depricated greys, new things should use the toolkit greys */
86
58
  html, body, button, input, table, td, th {
@@ -314,35 +286,15 @@ button:focus,
314
286
  #global-header a:focus {
315
287
  color: #0b0c0c; }
316
288
 
317
- /* Cross-browser shims
318
-
319
- Ways of normalising properties across browsers.
320
- */
321
289
  @-ms-viewport {
322
290
  width: device-width; }
323
291
 
324
292
  @-o-viewport {
325
293
  width: device-width; }
326
294
 
327
- /* Usage:
328
- @include inline-block
329
-
330
- or
331
-
332
- @include inline-block("250px")
333
-
334
- which gives a min-height to the inline-block elements.
335
- */
336
- /* Contain floats usage:
337
-
338
- .this-has-floated-children {
339
- @extend %contain-floats;
340
- }
341
-
342
- */
343
- #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
295
+ #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 {
344
296
  zoom: 1; }
345
- #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 {
297
+ #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 {
346
298
  content: "";
347
299
  display: block;
348
300
  clear: both; }
@@ -360,8 +312,11 @@ button:focus,
360
312
  background-color: #0b0c0c;
361
313
  max-width: 990px;
362
314
  margin: 0 auto;
363
- padding: 0.5em 15px;
364
- width: 960px; }
315
+ padding-top: 8px;
316
+ padding-bottom: 8px;
317
+ padding-left: 15px;
318
+ padding-right: 15px;
319
+ width: 990px; }
365
320
  #global-header .header-wrapper .header-global .header-logo {
366
321
  float: left;
367
322
  width: 33.33%; }
@@ -509,41 +464,66 @@ button:focus,
509
464
  #global-header .header-proposition #proposition-links li a.active {
510
465
  color: #28a197; }
511
466
 
467
+ /* Global header bar */
468
+ #global-header-bar {
469
+ margin: 0 auto;
470
+ width: auto;
471
+ max-width: 1020px;
472
+ width: 1020px; }
473
+ #global-header-bar .inner-block {
474
+ padding-left: 15px;
475
+ padding-right: 15px;
476
+ padding-left: 30px;
477
+ padding-right: 30px; }
478
+ #global-header-bar .header-bar {
479
+ height: 10px;
480
+ background-color: #005ea5;
481
+ font-size: 0; }
482
+
512
483
  /* Global cookie message */
513
484
  .js-enabled #global-cookie-message {
514
485
  display: none;
515
486
  /* shown with JS, always on for non-JS */ }
516
487
 
517
488
  #global-cookie-message {
518
- padding: 8px 15px;
519
489
  background-color: #d5e8f3;
520
- padding-left: 30px;
521
- padding-right: 30px; }
490
+ padding-top: 10px;
491
+ padding-bottom: 10px; }
492
+ #global-cookie-message .outer-block {
493
+ margin: 0 auto;
494
+ width: auto;
495
+ max-width: 1020px;
496
+ width: 1020px; }
497
+ #global-cookie-message .inner-block {
498
+ padding-left: 15px;
499
+ padding-right: 15px;
500
+ padding-left: 30px;
501
+ padding-right: 30px; }
522
502
  #global-cookie-message p {
523
503
  font-family: "nta", Arial, sans-serif;
524
- font-size: 19px;
525
- line-height: 1.31579;
526
- font-weight: 400;
504
+ font-size: 16px;
505
+ line-height: 1.25;
506
+ font-weight: 300;
527
507
  text-transform: none;
528
- margin: 0 auto;
529
- max-width: 960px;
530
- width: 960px; }
508
+ margin: 0; }
531
509
  @media (max-width: 640px) {
532
510
  #global-cookie-message p {
533
- font-size: 16px;
534
- line-height: 1.25; } }
511
+ font-size: 14px;
512
+ line-height: 1.14286; } }
535
513
 
536
514
  /* Global footer */
537
515
  #footer {
538
516
  background-color: #dee0e2;
539
517
  border-top: 1px solid #a1acb2; }
540
518
  #footer .footer-wrapper {
541
- background-color: #dee0e2;
542
- max-width: 990px;
543
519
  margin: 0 auto;
544
- padding: 20px 0 0;
545
- width: 960px;
546
- padding: 60px 15px 0; }
520
+ width: auto;
521
+ max-width: 1020px;
522
+ width: 1020px;
523
+ padding-top: 20px;
524
+ padding-top: 60px;
525
+ background-color: #dee0e2;
526
+ margin: 0 auto; }
547
527
  #footer a {
548
528
  color: #454a4c; }
549
529
  #footer a:hover {
@@ -564,16 +544,21 @@ button:focus,
564
544
  #footer h2 a {
565
545
  color: inherit; }
566
546
  #footer .footer-meta {
547
+ padding-left: 15px;
548
+ padding-right: 15px;
549
+ padding-left: 30px;
550
+ padding-right: 30px;
551
+ padding-bottom: 60px;
567
552
  clear: both;
568
553
  font-size: 0;
569
- color: #454a4c;
570
- padding: 0 15px 60px; }
554
+ color: #454a4c; }
571
555
  #footer .footer-meta .footer-meta-inner {
572
556
  display: inline-block;
573
557
  vertical-align: bottom;
558
+ width: 100%;
574
559
  width: 75%;
575
- display: block;
576
- float: left; }
560
+ float: left;
561
+ display: block; }
577
562
  #footer .footer-meta .footer-meta-inner ul {
578
563
  font-family: "nta", Arial, sans-serif;
579
564
  font-size: 16px;
@@ -582,8 +567,9 @@ button:focus,
582
567
  text-transform: none;
583
568
  display: inline-block;
584
569
  list-style: none;
585
- margin: 0 0 1em;
586
- padding: 0; }
570
+ margin: 0 0 1.5em 0;
571
+ padding: 0;
572
+ margin: 0 0 1em 0; }
587
573
  @media (max-width: 640px) {
588
574
  #footer .footer-meta .footer-meta-inner ul {
589
575
  font-size: 14px;
@@ -600,6 +586,7 @@ button:focus,
600
586
  padding-left: 53px;
601
587
  zoom: 1; }
602
588
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
589
+ margin-bottom: 1em;
603
590
  position: absolute;
604
591
  left: 0;
605
592
  top: 0;
@@ -634,12 +621,14 @@ button:focus,
634
621
  line-height: 1.25;
635
622
  font-weight: 300;
636
623
  text-transform: none;
624
+ margin: 30px 0 0 0;
625
+ width: 100%;
626
+ display: block;
637
627
  display: inline-block;
638
- float: none;
639
628
  text-align: inherit;
640
629
  width: 25%;
641
630
  padding-top: 15px;
642
- display: block;
631
+ margin-top: 0;
643
632
  float: right;
644
633
  height: 150px;
645
634
  width: 24%; }
@@ -649,11 +638,15 @@ button:focus,
649
638
  line-height: 1.14286; } }
650
639
  #footer .footer-meta .copyright a {
651
640
  display: block;
652
- padding: 115px 0 0 0;
653
- background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
654
- text-align: right;
641
+ background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
642
+ background-repeat: no-repeat;
643
+ background-position: 50% 0%;
644
+ background-position: 100% 0%;
645
+ background-image: url(<%= asset_path 'images/govuk-crest-ie.png' %>);
646
+ text-align: center;
655
647
  text-decoration: none;
656
- background-image: url(<%= asset_path 'images/govuk-crest-ie.png' %>); }
648
+ text-align: right;
649
+ padding: 115px 0 0 0; }
657
650
  @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) {
658
651
  #footer .footer-meta .copyright a {
659
652
  background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);
data/app/assets/stylesheets/govuk-template-ie7.css.erb CHANGED
@@ -5,10 +5,6 @@
5
5
  @-o-viewport {
6
6
  width: device-width; }
7
7
 
8
- /* CSS 3 Mixins
9
-
10
- Add them as you need them. This should let us manage vendor prefixes in one place.
11
- */
12
8
  @font-face {
13
9
  font-family: GDS-Logo;
14
10
  src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
@@ -19,68 +15,44 @@
19
15
  @-o-viewport {
20
16
  width: device-width; }
21
17
 
22
- /* Cross-browser shims
23
-
24
- Ways of normalising properties across browsers.
25
- */
26
18
  @-ms-viewport {
27
19
  width: device-width; }
28
20
 
29
21
  @-o-viewport {
30
22
  width: device-width; }
31
23
 
32
- /* Usage:
33
- @include inline-block
34
-
35
- or
36
-
37
- @include inline-block("250px")
38
-
39
- which gives a min-height to the inline-block elements.
40
- */
41
- /* Contain floats usage:
24
+ @-ms-viewport {
25
+ width: device-width; }
42
26
 
43
- .this-has-floated-children {
44
- @extend %contain-floats;
45
- }
27
+ @-o-viewport {
28
+ width: device-width; }
46
29
 
47
- */
48
- #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
30
+ #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 {
49
31
  zoom: 1; }
50
- #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 {
32
+ #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 {
51
33
  content: "";
52
34
  display: block;
53
35
  clear: both; }
54
36
 
55
- /* CSS 3 Mixins
56
-
57
- Add them as you need them. This should let us manage vendor prefixes in one place.
58
- */
59
37
  @-ms-viewport {
60
38
  width: device-width; }
61
39
 
62
40
  @-o-viewport {
63
41
  width: device-width; }
64
42
 
65
- /*
66
-
67
- Mixin and defaults for making buttons on GOV.UK services.
68
-
69
- For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
43
+ #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 {
44
+ zoom: 1; }
45
+ #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 {
46
+ content: "";
47
+ display: block;
48
+ clear: both; }
70
49
 
71
- Example usage:
50
+ @-ms-viewport {
51
+ width: device-width; }
72
52
 
73
- .button{
74
- @include button;
75
- }
76
- .button-secondary{
77
- @include button($grey-3);
78
- }
79
- .button-warning{
80
- @include button($red);
81
- }
53
+ @-o-viewport {
54
+ width: device-width; }
82
55
 
83
- */
84
56
  /* local styleguide includes */
85
57
  /* Old depricated greys, new things should use the toolkit greys */
86
58
  html, body, button, input, table, td, th {
@@ -314,35 +286,15 @@ button:focus,
314
286
  #global-header a:focus {
315
287
  color: #0b0c0c; }
316
288
 
317
- /* Cross-browser shims
318
-
319
- Ways of normalising properties across browsers.
320
- */
321
289
  @-ms-viewport {
322
290
  width: device-width; }
323
291
 
324
292
  @-o-viewport {
325
293
  width: device-width; }
326
294
 
327
- /* Usage:
328
- @include inline-block
329
-
330
- or
331
-
332
- @include inline-block("250px")
333
-
334
- which gives a min-height to the inline-block elements.
335
- */
336
- /* Contain floats usage:
337
-
338
- .this-has-floated-children {
339
- @extend %contain-floats;
340
- }
341
-
342
- */
343
- #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links {
295
+ #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 {
344
296
  zoom: 1; }
345
- #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 {
297
+ #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 {
346
298
  content: "";
347
299
  display: block;
348
300
  clear: both; }
@@ -360,8 +312,11 @@ button:focus,
360
312
  background-color: #0b0c0c;
361
313
  max-width: 990px;
362
314
  margin: 0 auto;
363
- padding: 0.5em 15px;
364
- width: 960px; }
315
+ padding-top: 8px;
316
+ padding-bottom: 8px;
317
+ padding-left: 15px;
318
+ padding-right: 15px;
319
+ width: 990px; }
365
320
  #global-header .header-wrapper .header-global .header-logo {
366
321
  float: left;
367
322
  width: 33.33%; }
@@ -509,40 +464,66 @@ button:focus,
509
464
  #global-header .header-proposition #proposition-links li a.active {
510
465
  color: #28a197; }
511
466
 
467
+ /* Global header bar */
468
+ #global-header-bar {
469
+ margin: 0 auto;
470
+ width: auto;
471
+ max-width: 1020px;
472
+ width: 1020px; }
473
+ #global-header-bar .inner-block {
474
+ padding-left: 15px;
475
+ padding-right: 15px;
476
+ padding-left: 30px;
477
+ padding-right: 30px; }
478
+ #global-header-bar .header-bar {
479
+ height: 10px;
480
+ background-color: #005ea5;
481
+ font-size: 0; }
482
+
512
483
  /* Global cookie message */
513
484
  .js-enabled #global-cookie-message {
514
485
  display: none;
515
486
  /* shown with JS, always on for non-JS */ }
516
487
 
517
488
  #global-cookie-message {
518
- padding: 8px 15px;
519
489
  background-color: #d5e8f3;
520
- padding-left: 30px;
521
- padding-right: 30px; }
490
+ padding-top: 10px;
491
+ padding-bottom: 10px; }
492
+ #global-cookie-message .outer-block {
493
+ margin: 0 auto;
494
+ width: auto;
495
+ max-width: 1020px;
496
+ width: 1020px; }
497
+ #global-cookie-message .inner-block {
498
+ padding-left: 15px;
499
+ padding-right: 15px;
500
+ padding-left: 30px;
501
+ padding-right: 30px; }
522
502
  #global-cookie-message p {
523
503
  font-family: "nta", Arial, sans-serif;
524
- font-size: 19px;
525
- line-height: 1.31579;
526
- font-weight: 400;
504
+ font-size: 16px;
505
+ line-height: 1.25;
506
+ font-weight: 300;
527
507
  text-transform: none;
528
- margin: 0 auto;
529
- max-width: 960px; }
508
+ margin: 0; }
530
509
  @media (max-width: 640px) {
531
510
  #global-cookie-message p {
532
- font-size: 16px;
533
- line-height: 1.25; } }
511
+ font-size: 14px;
512
+ line-height: 1.14286; } }
534
513
 
535
514
  /* Global footer */
536
515
  #footer {
537
516
  background-color: #dee0e2;
538
517
  border-top: 1px solid #a1acb2; }
539
518
  #footer .footer-wrapper {
540
- background-color: #dee0e2;
541
- max-width: 990px;
542
519
  margin: 0 auto;
543
- padding: 20px 0 0;
544
- width: 960px;
545
- padding: 60px 15px 0; }
520
+ width: auto;
521
+ max-width: 1020px;
522
+ width: 1020px;
523
+ padding-top: 20px;
524
+ padding-top: 60px;
525
+ background-color: #dee0e2;
526
+ margin: 0 auto; }
546
527
  #footer a {
547
528
  color: #454a4c; }
548
529
  #footer a:hover {
@@ -563,16 +544,21 @@ button:focus,
563
544
  #footer h2 a {
564
545
  color: inherit; }
565
546
  #footer .footer-meta {
547
+ padding-left: 15px;
548
+ padding-right: 15px;
549
+ padding-left: 30px;
550
+ padding-right: 30px;
551
+ padding-bottom: 60px;
566
552
  clear: both;
567
553
  font-size: 0;
568
- color: #454a4c;
569
- padding: 0 15px 60px; }
554
+ color: #454a4c; }
570
555
  #footer .footer-meta .footer-meta-inner {
571
556
  display: inline-block;
572
557
  vertical-align: bottom;
558
+ width: 100%;
573
559
  width: 75%;
574
- display: block;
575
- float: left; }
560
+ float: left;
561
+ display: block; }
576
562
  #footer .footer-meta .footer-meta-inner ul {
577
563
  font-family: "nta", Arial, sans-serif;
578
564
  font-size: 16px;
@@ -581,8 +567,9 @@ button:focus,
581
567
  text-transform: none;
582
568
  display: inline-block;
583
569
  list-style: none;
584
- margin: 0 0 1em;
585
- padding: 0; }
570
+ margin: 0 0 1.5em 0;
571
+ padding: 0;
572
+ margin: 0 0 1em 0; }
586
573
  @media (max-width: 640px) {
587
574
  #footer .footer-meta .footer-meta-inner ul {
588
575
  font-size: 14px;
@@ -598,6 +585,7 @@ button:focus,
598
585
  position: relative;
599
586
  padding-left: 53px; }
600
587
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
588
+ margin-bottom: 1em;
601
589
  position: absolute;
602
590
  left: 0;
603
591
  top: 0;
@@ -632,12 +620,14 @@ button:focus,
632
620
  line-height: 1.25;
633
621
  font-weight: 300;
634
622
  text-transform: none;
623
+ margin: 30px 0 0 0;
624
+ width: 100%;
625
+ display: block;
635
626
  display: inline-block;
636
- float: none;
637
627
  text-align: inherit;
638
628
  width: 25%;
639
629
  padding-top: 15px;
640
- display: block;
630
+ margin-top: 0;
641
631
  float: right;
642
632
  height: 150px;
643
633
  width: 24%; }
@@ -647,10 +637,14 @@ button:focus,
647
637
  line-height: 1.14286; } }
648
638
  #footer .footer-meta .copyright a {
649
639
  display: block;
650
- padding: 115px 0 0 0;
651
- background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
640
+ background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
641
+ background-repeat: no-repeat;
642
+ background-position: 50% 0%;
643
+ background-position: 100% 0%;
644
+ text-align: center;
645
+ text-decoration: none;
652
646
  text-align: right;
653
- text-decoration: none; }
647
+ padding: 115px 0 0 0; }
654
648
  @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) {
655
649
  #footer .footer-meta .copyright a {
656
650
  background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);