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/app/assets/stylesheets/govuk-template-ie8.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,66 +15,40 @@
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:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
30
+ #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 {
49
31
  content: "";
50
32
  display: block;
51
33
  clear: both; }
52
34
 
53
- /* CSS 3 Mixins
54
-
55
- Add them as you need them. This should let us manage vendor prefixes in one place.
56
- */
57
35
  @-ms-viewport {
58
36
  width: device-width; }
59
37
 
60
38
  @-o-viewport {
61
39
  width: device-width; }
62
40
 
63
- /*
64
-
65
- Mixin and defaults for making buttons on GOV.UK services.
66
-
67
- For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
41
+ #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 {
42
+ content: "";
43
+ display: block;
44
+ clear: both; }
68
45
 
69
- Example usage:
46
+ @-ms-viewport {
47
+ width: device-width; }
70
48
 
71
- .button{
72
- @include button;
73
- }
74
- .button-secondary{
75
- @include button($grey-3);
76
- }
77
- .button-warning{
78
- @include button($red);
79
- }
49
+ @-o-viewport {
50
+ width: device-width; }
80
51
 
81
- */
82
52
  /* local styleguide includes */
83
53
  /* Old depricated greys, new things should use the toolkit greys */
84
54
  html, body, button, input, table, td, th {
@@ -310,33 +280,13 @@ button:focus,
310
280
  #global-header a:focus {
311
281
  color: #0b0c0c; }
312
282
 
313
- /* Cross-browser shims
314
-
315
- Ways of normalising properties across browsers.
316
- */
317
283
  @-ms-viewport {
318
284
  width: device-width; }
319
285
 
320
286
  @-o-viewport {
321
287
  width: device-width; }
322
288
 
323
- /* Usage:
324
- @include inline-block
325
-
326
- or
327
-
328
- @include inline-block("250px")
329
-
330
- which gives a min-height to the inline-block elements.
331
- */
332
- /* Contain floats usage:
333
-
334
- .this-has-floated-children {
335
- @extend %contain-floats;
336
- }
337
-
338
- */
339
- #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 {
289
+ #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 {
340
290
  content: "";
341
291
  display: block;
342
292
  clear: both; }
@@ -354,8 +304,11 @@ button:focus,
354
304
  background-color: #0b0c0c;
355
305
  max-width: 990px;
356
306
  margin: 0 auto;
357
- padding: 0.5em 15px;
358
- width: 960px; }
307
+ padding-top: 8px;
308
+ padding-bottom: 8px;
309
+ padding-left: 15px;
310
+ padding-right: 15px;
311
+ width: 990px; }
359
312
  #global-header .header-wrapper .header-global .header-logo {
360
313
  float: left;
361
314
  width: 33.33%; }
@@ -503,40 +456,66 @@ button:focus,
503
456
  #global-header .header-proposition #proposition-links li a.active {
504
457
  color: #28a197; }
505
458
 
459
+ /* Global header bar */
460
+ #global-header-bar {
461
+ margin: 0 auto;
462
+ width: auto;
463
+ max-width: 1020px;
464
+ width: 1020px; }
465
+ #global-header-bar .inner-block {
466
+ padding-left: 15px;
467
+ padding-right: 15px;
468
+ padding-left: 30px;
469
+ padding-right: 30px; }
470
+ #global-header-bar .header-bar {
471
+ height: 10px;
472
+ background-color: #005ea5;
473
+ font-size: 0; }
474
+
506
475
  /* Global cookie message */
507
476
  .js-enabled #global-cookie-message {
508
477
  display: none;
509
478
  /* shown with JS, always on for non-JS */ }
510
479
 
511
480
  #global-cookie-message {
512
- padding: 8px 15px;
513
481
  background-color: #d5e8f3;
514
- padding-left: 30px;
515
- padding-right: 30px; }
482
+ padding-top: 10px;
483
+ padding-bottom: 10px; }
484
+ #global-cookie-message .outer-block {
485
+ margin: 0 auto;
486
+ width: auto;
487
+ max-width: 1020px;
488
+ width: 1020px; }
489
+ #global-cookie-message .inner-block {
490
+ padding-left: 15px;
491
+ padding-right: 15px;
492
+ padding-left: 30px;
493
+ padding-right: 30px; }
516
494
  #global-cookie-message p {
517
495
  font-family: "nta", Arial, sans-serif;
518
- font-size: 19px;
519
- line-height: 1.31579;
520
- font-weight: 400;
496
+ font-size: 16px;
497
+ line-height: 1.25;
498
+ font-weight: 300;
521
499
  text-transform: none;
522
- margin: 0 auto;
523
- max-width: 960px; }
500
+ margin: 0; }
524
501
  @media (max-width: 640px) {
525
502
  #global-cookie-message p {
526
- font-size: 16px;
527
- line-height: 1.25; } }
503
+ font-size: 14px;
504
+ line-height: 1.14286; } }
528
505
 
529
506
  /* Global footer */
530
507
  #footer {
531
508
  background-color: #dee0e2;
532
509
  border-top: 1px solid #a1acb2; }
533
510
  #footer .footer-wrapper {
534
- background-color: #dee0e2;
535
- max-width: 990px;
536
511
  margin: 0 auto;
537
- padding: 20px 0 0;
538
- width: 960px;
539
- padding: 60px 15px 0; }
512
+ width: auto;
513
+ max-width: 1020px;
514
+ width: 1020px;
515
+ padding-top: 20px;
516
+ padding-top: 60px;
517
+ background-color: #dee0e2;
518
+ margin: 0 auto; }
540
519
  #footer a {
541
520
  color: #454a4c; }
542
521
  #footer a:hover {
@@ -557,13 +536,18 @@ button:focus,
557
536
  #footer h2 a {
558
537
  color: inherit; }
559
538
  #footer .footer-meta {
539
+ padding-left: 15px;
540
+ padding-right: 15px;
541
+ padding-left: 30px;
542
+ padding-right: 30px;
543
+ padding-bottom: 60px;
560
544
  clear: both;
561
545
  font-size: 0;
562
- color: #454a4c;
563
- padding: 0 15px 60px; }
546
+ color: #454a4c; }
564
547
  #footer .footer-meta .footer-meta-inner {
565
548
  display: inline-block;
566
549
  vertical-align: bottom;
550
+ width: 100%;
567
551
  width: 75%; }
568
552
  #footer .footer-meta .footer-meta-inner ul {
569
553
  font-family: "nta", Arial, sans-serif;
@@ -573,8 +557,9 @@ button:focus,
573
557
  text-transform: none;
574
558
  display: inline-block;
575
559
  list-style: none;
576
- margin: 0 0 1em;
577
- padding: 0; }
560
+ margin: 0 0 1.5em 0;
561
+ padding: 0;
562
+ margin: 0 0 1em 0; }
578
563
  @media (max-width: 640px) {
579
564
  #footer .footer-meta .footer-meta-inner ul {
580
565
  font-size: 14px;
@@ -587,6 +572,7 @@ button:focus,
587
572
  position: relative;
588
573
  padding-left: 53px; }
589
574
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
575
+ margin-bottom: 1em;
590
576
  position: absolute;
591
577
  left: 0;
592
578
  top: 0;
@@ -621,21 +607,28 @@ button:focus,
621
607
  line-height: 1.25;
622
608
  font-weight: 300;
623
609
  text-transform: none;
610
+ margin: 30px 0 0 0;
611
+ width: 100%;
612
+ display: block;
624
613
  display: inline-block;
625
- float: none;
626
614
  text-align: inherit;
627
615
  width: 25%;
628
- padding-top: 15px; }
616
+ padding-top: 15px;
617
+ margin-top: 0; }
629
618
  @media (max-width: 640px) {
630
619
  #footer .footer-meta .copyright {
631
620
  font-size: 14px;
632
621
  line-height: 1.14286; } }
633
622
  #footer .footer-meta .copyright a {
634
623
  display: block;
635
- padding: 115px 0 0 0;
636
- background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
624
+ background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
625
+ background-repeat: no-repeat;
626
+ background-position: 50% 0%;
627
+ background-position: 100% 0%;
628
+ text-align: center;
629
+ text-decoration: none;
637
630
  text-align: right;
638
- text-decoration: none; }
631
+ padding: 115px 0 0 0; }
639
632
  @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) {
640
633
  #footer .footer-meta .copyright a {
641
634
  background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);
data/app/assets/stylesheets/govuk-template.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,66 +15,40 @@
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:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-links:after {
30
+ #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 {
49
31
  content: "";
50
32
  display: block;
51
33
  clear: both; }
52
34
 
53
- /* CSS 3 Mixins
54
-
55
- Add them as you need them. This should let us manage vendor prefixes in one place.
56
- */
57
35
  @-ms-viewport {
58
36
  width: device-width; }
59
37
 
60
38
  @-o-viewport {
61
39
  width: device-width; }
62
40
 
63
- /*
64
-
65
- Mixin and defaults for making buttons on GOV.UK services.
66
-
67
- For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
41
+ #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 {
42
+ content: "";
43
+ display: block;
44
+ clear: both; }
68
45
 
69
- Example usage:
46
+ @-ms-viewport {
47
+ width: device-width; }
70
48
 
71
- .button{
72
- @include button;
73
- }
74
- .button-secondary{
75
- @include button($grey-3);
76
- }
77
- .button-warning{
78
- @include button($red);
79
- }
49
+ @-o-viewport {
50
+ width: device-width; }
80
51
 
81
- */
82
52
  /* local styleguide includes */
83
53
  /* Old depricated greys, new things should use the toolkit greys */
84
54
  html, body, button, input, table, td, th {
@@ -316,33 +286,13 @@ button:focus,
316
286
  #global-header a:focus {
317
287
  color: #0b0c0c; }
318
288
 
319
- /* Cross-browser shims
320
-
321
- Ways of normalising properties across browsers.
322
- */
323
289
  @-ms-viewport {
324
290
  width: device-width; }
325
291
 
326
292
  @-o-viewport {
327
293
  width: device-width; }
328
294
 
329
- /* Usage:
330
- @include inline-block
331
-
332
- or
333
-
334
- @include inline-block("250px")
335
-
336
- which gives a min-height to the inline-block elements.
337
- */
338
- /* Contain floats usage:
339
-
340
- .this-has-floated-children {
341
- @extend %contain-floats;
342
- }
343
-
344
- */
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 {
295
+ #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
296
  content: "";
347
297
  display: block;
348
298
  clear: both; }
@@ -360,10 +310,12 @@ button:focus,
360
310
  background-color: #0b0c0c;
361
311
  max-width: 990px;
362
312
  margin: 0 auto;
363
- padding: 0.5em 15px; }
364
- @media (max-width: 640px) {
313
+ padding-top: 8px;
314
+ padding-bottom: 8px; }
315
+ @media (min-width: 641px) {
365
316
  #global-header .header-wrapper {
366
- padding: 0.5em 0; } }
317
+ padding-left: 15px;
318
+ padding-right: 15px; } }
367
319
  #global-header .header-wrapper .header-global .header-logo {
368
320
  float: left; }
369
321
  @media (min-width: 769px) {
@@ -525,43 +477,68 @@ button:focus,
525
477
  #global-header .header-proposition #proposition-links li a.active {
526
478
  color: #28a197; }
527
479
 
480
+ /* Global header bar */
481
+ #global-header-bar {
482
+ margin: 0 auto;
483
+ width: auto;
484
+ max-width: 1020px; }
485
+ #global-header-bar .inner-block {
486
+ padding-left: 15px;
487
+ padding-right: 15px; }
488
+ @media (min-width: 641px) {
489
+ #global-header-bar .inner-block {
490
+ padding-left: 30px;
491
+ padding-right: 30px; } }
492
+ #global-header-bar .header-bar {
493
+ height: 10px;
494
+ background-color: #005ea5; }
495
+
528
496
  /* Global cookie message */
529
497
  .js-enabled #global-cookie-message {
530
498
  display: none;
531
499
  /* shown with JS, always on for non-JS */ }
532
500
 
533
501
  #global-cookie-message {
534
- padding: 8px 15px;
535
- background-color: #d5e8f3; }
502
+ background-color: #d5e8f3;
503
+ padding-top: 10px;
504
+ padding-bottom: 10px; }
505
+ #global-cookie-message .outer-block {
506
+ margin: 0 auto;
507
+ width: auto;
508
+ max-width: 1020px; }
509
+ #global-cookie-message .inner-block {
510
+ padding-left: 15px;
511
+ padding-right: 15px; }
512
+ @media (min-width: 641px) {
513
+ #global-cookie-message .inner-block {
514
+ padding-left: 30px;
515
+ padding-right: 30px; } }
536
516
  #global-cookie-message p {
537
517
  font-family: "nta", Arial, sans-serif;
538
- font-size: 19px;
539
- line-height: 1.31579;
540
- font-weight: 400;
518
+ font-size: 16px;
519
+ line-height: 1.25;
520
+ font-weight: 300;
541
521
  text-transform: none;
542
- margin: 0 auto;
543
- max-width: 960px; }
522
+ margin: 0; }
544
523
  @media (max-width: 640px) {
545
524
  #global-cookie-message p {
546
- font-size: 16px;
547
- line-height: 1.25; } }
548
- @media (min-width: 641px) {
549
- #global-cookie-message {
550
- padding-left: 30px;
551
- padding-right: 30px; } }
525
+ font-size: 14px;
526
+ line-height: 1.14286; } }
552
527
 
553
528
  /* Global footer */
554
529
  #footer {
555
530
  background-color: #dee0e2;
556
531
  border-top: 1px solid #a1acb2; }
557
532
  #footer .footer-wrapper {
558
- background-color: #dee0e2;
559
- max-width: 990px;
560
533
  margin: 0 auto;
561
- padding: 20px 0 0; }
534
+ width: auto;
535
+ max-width: 1020px;
536
+ padding-top: 20px;
537
+ background-color: #dee0e2;
538
+ margin: 0 auto; }
562
539
  @media (min-width: 641px) {
563
540
  #footer .footer-wrapper {
564
- padding: 60px 15px 0; } }
541
+ padding-top: 60px; } }
565
542
  #footer a {
566
543
  color: #454a4c; }
567
544
  #footer a:hover {
@@ -582,21 +559,23 @@ button:focus,
582
559
  #footer h2 a {
583
560
  color: inherit; }
584
561
  #footer .footer-meta {
562
+ padding-left: 15px;
563
+ padding-right: 15px;
564
+ padding-bottom: 60px;
585
565
  clear: both;
586
566
  font-size: 0;
587
- color: #454a4c;
588
- padding: 0 15px 60px; }
589
- @media (max-width: 640px) {
567
+ color: #454a4c; }
568
+ @media (min-width: 641px) {
590
569
  #footer .footer-meta {
591
- margin: 0; } }
570
+ padding-left: 30px;
571
+ padding-right: 30px; } }
592
572
  #footer .footer-meta .footer-meta-inner {
593
573
  display: inline-block;
594
574
  vertical-align: bottom;
595
- width: 75%; }
596
- @media (max-width: 640px) {
575
+ width: 100%; }
576
+ @media (min-width: 641px) {
597
577
  #footer .footer-meta .footer-meta-inner {
598
- display: block;
599
- width: 100%; } }
578
+ width: 75%; } }
600
579
  #footer .footer-meta .footer-meta-inner ul {
601
580
  font-family: "nta", Arial, sans-serif;
602
581
  font-size: 16px;
@@ -605,37 +584,33 @@ button:focus,
605
584
  text-transform: none;
606
585
  display: inline-block;
607
586
  list-style: none;
608
- margin: 0 0 1em;
587
+ margin: 0 0 1.5em 0;
609
588
  padding: 0; }
610
589
  @media (max-width: 640px) {
611
590
  #footer .footer-meta .footer-meta-inner ul {
612
591
  font-size: 14px;
613
592
  line-height: 1.5; } }
593
+ @media (min-width: 641px) {
594
+ #footer .footer-meta .footer-meta-inner ul {
595
+ margin: 0 0 1em 0; } }
614
596
  #footer .footer-meta .footer-meta-inner ul li {
615
597
  display: inline-block;
616
598
  margin: 0 15px 0 0; }
617
- @media (max-width: 640px) {
618
- #footer .footer-meta .footer-meta-inner ul {
619
- width: auto;
620
- margin: 0 0 1.5em 0; } }
621
599
  #footer .footer-meta .footer-meta-inner .open-government-licence {
622
600
  clear: left;
623
- position: relative;
624
- padding-left: 53px; }
625
- @media (max-width: 640px) {
601
+ position: relative; }
602
+ @media (min-width: 641px) {
626
603
  #footer .footer-meta .footer-meta-inner .open-government-licence {
627
- padding-left: 0; } }
604
+ padding-left: 53px; } }
628
605
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
629
- position: absolute;
630
- left: 0;
631
- top: 0;
632
- width: 41px;
633
- height: 100%; }
634
- @media (max-width: 640px) {
606
+ margin-bottom: 1em; }
607
+ @media (min-width: 641px) {
635
608
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 {
636
- position: static;
637
- width: auto;
638
- margin-bottom: 1em; } }
609
+ position: absolute;
610
+ left: 0;
611
+ top: 0;
612
+ width: 41px;
613
+ height: 100%; } }
639
614
  #footer .footer-meta .footer-meta-inner .open-government-licence h2 a {
640
615
  display: block;
641
616
  width: 41px;
@@ -665,31 +640,35 @@ button:focus,
665
640
  line-height: 1.25;
666
641
  font-weight: 300;
667
642
  text-transform: none;
668
- display: inline-block;
669
- float: none;
670
- text-align: inherit;
671
- width: 25%;
672
- padding-top: 15px; }
643
+ margin: 30px 0 0 0;
644
+ width: 100%;
645
+ display: block; }
673
646
  @media (max-width: 640px) {
674
647
  #footer .footer-meta .copyright {
675
648
  font-size: 14px;
676
649
  line-height: 1.14286; } }
650
+ @media (min-width: 641px) {
651
+ #footer .footer-meta .copyright {
652
+ display: inline-block;
653
+ text-align: inherit;
654
+ width: 25%;
655
+ padding-top: 15px;
656
+ margin-top: 0; } }
677
657
  #footer .footer-meta .copyright a {
678
658
  display: block;
679
- padding: 115px 0 0 0;
680
- background: transparent url(<%= asset_path 'images/govuk-crest.png' %>) no-repeat 100% 0;
681
- text-align: right;
682
- text-decoration: none; }
659
+ background-image: url(<%= asset_path 'images/govuk-crest.png' %>);
660
+ background-repeat: no-repeat;
661
+ background-position: 50% 0%;
662
+ text-align: center;
663
+ text-decoration: none;
664
+ padding: 115px 0 0 0; }
665
+ @media (min-width: 641px) {
666
+ #footer .footer-meta .copyright a {
667
+ background-position: 100% 0%; } }
683
668
  @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) {
684
669
  #footer .footer-meta .copyright a {
685
670
  background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>);
686
671
  background-size: 125px 102px; } }
687
- @media (max-width: 640px) {
688
- #footer .footer-meta .copyright {
689
- width: 100%;
690
- display: block;
691
- padding: 0;
692
- margin: 30px 0 0 0; }
672
+ @media (min-width: 641px) {
693
673
  #footer .footer-meta .copyright a {
694
- text-align: center;
695
- background-position: 50% 0%; } }
674
+ text-align: right; } }