govuk_template 0.7.1 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
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' %>);