moj_template 0.11.0 → 0.11.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,664 @@
1
+ @font-face {
2
+ font-family: GDS-Logo;
3
+ src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
4
+
5
+ @-ms-viewport {
6
+ width: device-width; }
7
+
8
+ @-o-viewport {
9
+ width: device-width; }
10
+
11
+ @-ms-viewport {
12
+ width: device-width; }
13
+
14
+ @-o-viewport {
15
+ width: device-width; }
16
+
17
+ /* CSS 3 Mixins
18
+
19
+ Add them as you need them. This should let us manage vendor prefixes in one place.
20
+ */
21
+ /* Cross-browser shims
22
+
23
+ Ways of normalising properties across browsers.
24
+ */
25
+ @-ms-viewport {
26
+ width: device-width; }
27
+
28
+ @-o-viewport {
29
+ width: device-width; }
30
+
31
+ /* Usage:
32
+ @include inline-block
33
+
34
+ or
35
+
36
+ @include inline-block("250px")
37
+
38
+ which gives a min-height to the inline-block elements.
39
+ */
40
+ /* Contain floats usage:
41
+
42
+ .this-has-floated-children {
43
+ @extend %contain-floats;
44
+ }
45
+
46
+ */
47
+ /* Cross-browser shims
48
+
49
+ Ways of normalising properties across browsers.
50
+ */
51
+ @-ms-viewport {
52
+ width: device-width; }
53
+
54
+ @-o-viewport {
55
+ width: device-width; }
56
+
57
+ /* Usage:
58
+ @include inline-block
59
+
60
+ or
61
+
62
+ @include inline-block("250px")
63
+
64
+ which gives a min-height to the inline-block elements.
65
+ */
66
+ /* Contain floats usage:
67
+
68
+ .this-has-floated-children {
69
+ @extend %contain-floats;
70
+ }
71
+
72
+ */
73
+ /* CSS 3 Mixins
74
+
75
+ Add them as you need them. This should let us manage vendor prefixes in one place.
76
+ */
77
+ @-ms-viewport {
78
+ width: device-width; }
79
+
80
+ @-o-viewport {
81
+ width: device-width; }
82
+
83
+ /*
84
+
85
+ Mixin and defaults for making buttons on GOV.UK services.
86
+
87
+ For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
88
+
89
+ Example usage:
90
+
91
+ .button{
92
+ @include button;
93
+ }
94
+ .button-secondary{
95
+ @include button($grey-3);
96
+ }
97
+ .button-warning{
98
+ @include button($red);
99
+ }
100
+
101
+ */
102
+ @font-face {
103
+ font-family: GDS-Logo;
104
+ src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); }
105
+
106
+ @-ms-viewport {
107
+ width: device-width; }
108
+
109
+ @-o-viewport {
110
+ width: device-width; }
111
+
112
+ /* Cross-browser shims
113
+
114
+ Ways of normalising properties across browsers.
115
+ */
116
+ @-ms-viewport {
117
+ width: device-width; }
118
+
119
+ @-o-viewport {
120
+ width: device-width; }
121
+
122
+ /* Usage:
123
+ @include inline-block
124
+
125
+ or
126
+
127
+ @include inline-block("250px")
128
+
129
+ which gives a min-height to the inline-block elements.
130
+ */
131
+ /* Contain floats usage:
132
+
133
+ .this-has-floated-children {
134
+ @extend %contain-floats;
135
+ }
136
+
137
+ */
138
+ .clearfix, .cf {
139
+ zoom: 1; }
140
+ .clearfix:before, .cf:before, .clearfix:after, .cf:after {
141
+ content: "";
142
+ display: block;
143
+ height: 0;
144
+ overflow: hidden; }
145
+ .clearfix:after, .cf:after {
146
+ clear: both; }
147
+
148
+ header.page-header h1 {
149
+ font-family: "nta", Arial, sans-serif;
150
+ font-size: 48px;
151
+ line-height: 1.04167;
152
+ font-weight: 400;
153
+ text-transform: none;
154
+ padding-top: 10px;
155
+ padding-bottom: 10px;
156
+ padding-top: 7px;
157
+ padding-bottom: 13px;
158
+ font-weight: 700;
159
+ padding-top: 24px;
160
+ padding-bottom: 8px;
161
+ padding-top: 32px;
162
+ padding-bottom: 10px;
163
+ padding-top: 48px;
164
+ padding-bottom: 16px; }
165
+ @media (max-width: 640px) {
166
+ header.page-header h1 {
167
+ font-size: 32px;
168
+ line-height: 1.09375; } }
169
+ header.page-header h1 span {
170
+ font-family: "nta", Arial, sans-serif;
171
+ font-size: 27px;
172
+ line-height: 1.11111;
173
+ font-weight: 400;
174
+ text-transform: none;
175
+ display: block;
176
+ color: #6f777b; }
177
+ @media (max-width: 640px) {
178
+ header.page-header h1 span {
179
+ font-size: 18px;
180
+ line-height: 1.11111; } }
181
+ header.page-header h1 .alpha {
182
+ display: -moz-inline-stack;
183
+ display: inline-block;
184
+ zoom: 1;
185
+ display: inline;
186
+ background-color: #d53880;
187
+ color: #fff;
188
+ font-family: "nta", Arial, sans-serif;
189
+ font-size: 16px;
190
+ line-height: 1.25;
191
+ font-weight: 300;
192
+ text-transform: none;
193
+ font-weight: 700;
194
+ text-transform: uppercase;
195
+ letter-spacing: 1px;
196
+ text-decoration: none;
197
+ margin: 3px 10px 0 5px;
198
+ padding: 2px 5px 0; }
199
+ @media (max-width: 640px) {
200
+ header.page-header h1 .alpha {
201
+ font-size: 14px;
202
+ line-height: 1.14286; } }
203
+ header.page-header h1 .beta {
204
+ display: -moz-inline-stack;
205
+ display: inline-block;
206
+ zoom: 1;
207
+ display: inline;
208
+ background-color: #f47738;
209
+ color: #fff;
210
+ font-family: "nta", Arial, sans-serif;
211
+ font-size: 16px;
212
+ line-height: 1.25;
213
+ font-weight: 300;
214
+ text-transform: none;
215
+ font-weight: 700;
216
+ text-transform: uppercase;
217
+ letter-spacing: 1px;
218
+ text-decoration: none;
219
+ margin: 3px 10px 0 5px;
220
+ padding: 2px 5px 0; }
221
+ @media (max-width: 640px) {
222
+ header.page-header h1 .beta {
223
+ font-size: 14px;
224
+ line-height: 1.14286; } }
225
+ header.page-header h1 .alpha, header.page-header h1 .beta {
226
+ float: none;
227
+ display: inline;
228
+ vertical-align: middle;
229
+ margin-left: 1em; }
230
+
231
+ h2, h3, h4 {
232
+ font-weight: 400; }
233
+
234
+ #content {
235
+ margin: auto;
236
+ max-width: 1020px;
237
+ width: auto;
238
+ _width: 1020px;
239
+ min-height: 400px; }
240
+
241
+ #wrapper {
242
+ background-color: white;
243
+ padding: 0 0 60px 0;
244
+ border-bottom: 10px solid #0b0c0c; }
245
+ body.alpha #wrapper {
246
+ border-color: #d53880; }
247
+ body.beta #wrapper {
248
+ border-color: #f47738; }
249
+
250
+ .inner {
251
+ width: auto;
252
+ padding: 0 1em;
253
+ padding: 0 2em; }
254
+
255
+ body.alpha .indicator {
256
+ padding: 8px 0;
257
+ background-color: #d53880; }
258
+ body.alpha .indicator p {
259
+ max-width: 960px;
260
+ margin: 0 auto;
261
+ padding: 0 15px;
262
+ color: #0b0c0c;
263
+ font-family: "nta", Arial, sans-serif;
264
+ font-size: 16px;
265
+ line-height: 1.25;
266
+ font-weight: 300;
267
+ text-transform: none; }
268
+ @media (max-width: 640px) {
269
+ body.alpha .indicator p {
270
+ font-size: 14px;
271
+ line-height: 1.14286; } }
272
+ body.alpha .indicator a, body.alpha .indicator a:link, body.alpha .indicator a:visited, body.alpha .indicator a:active {
273
+ color: #0b0c0c; }
274
+ body.alpha .indicator a:hover {
275
+ color: #0b0c0c; }
276
+ body.beta .indicator {
277
+ padding: 8px 0;
278
+ background-color: #f47738; }
279
+ body.beta .indicator p {
280
+ max-width: 960px;
281
+ margin: 0 auto;
282
+ padding: 0 15px;
283
+ color: #0b0c0c;
284
+ font-family: "nta", Arial, sans-serif;
285
+ font-size: 16px;
286
+ line-height: 1.25;
287
+ font-weight: 300;
288
+ text-transform: none; }
289
+ @media (max-width: 640px) {
290
+ body.beta .indicator p {
291
+ font-size: 14px;
292
+ line-height: 1.14286; } }
293
+ body.beta .indicator a, body.beta .indicator a:link, body.beta .indicator a:visited, body.beta .indicator a:active {
294
+ color: #0b0c0c; }
295
+ body.beta .indicator a:hover {
296
+ color: #0b0c0c; }
297
+
298
+ #global-header .header-proposition {
299
+ padding-top: 8px; }
300
+ #global-header .header-proposition #proposition-name {
301
+ line-height: 1em;
302
+ display: inline-block; }
303
+ #global-header .header-proposition #proposition-name:hover {
304
+ border-bottom: 1px solid white; }
305
+ body.alpha #global-header .header-proposition .proposition-phase {
306
+ display: -moz-inline-stack;
307
+ display: inline-block;
308
+ zoom: 1;
309
+ display: inline;
310
+ background-color: #d53880;
311
+ color: #fff;
312
+ font-family: "nta", Arial, sans-serif;
313
+ font-size: 16px;
314
+ line-height: 1.25;
315
+ font-weight: 300;
316
+ text-transform: none;
317
+ font-weight: 700;
318
+ text-transform: uppercase;
319
+ letter-spacing: 1px;
320
+ text-decoration: none;
321
+ margin: 3px 10px 0 5px;
322
+ padding: 2px 5px 0; }
323
+ @media (max-width: 640px) {
324
+ body.alpha #global-header .header-proposition .proposition-phase {
325
+ font-size: 14px;
326
+ line-height: 1.14286; } }
327
+ body.beta #global-header .header-proposition .proposition-phase {
328
+ display: -moz-inline-stack;
329
+ display: inline-block;
330
+ zoom: 1;
331
+ display: inline;
332
+ background-color: #f47738;
333
+ color: #fff;
334
+ font-family: "nta", Arial, sans-serif;
335
+ font-size: 16px;
336
+ line-height: 1.25;
337
+ font-weight: 300;
338
+ text-transform: none;
339
+ font-weight: 700;
340
+ text-transform: uppercase;
341
+ letter-spacing: 1px;
342
+ text-decoration: none;
343
+ margin: 3px 10px 0 5px;
344
+ padding: 2px 5px 0; }
345
+ @media (max-width: 640px) {
346
+ body.beta #global-header .header-proposition .proposition-phase {
347
+ font-size: 14px;
348
+ line-height: 1.14286; } }
349
+ body.alpha #global-header .header-proposition .proposition-phase, body.beta #global-header .header-proposition .proposition-phase {
350
+ margin-left: 1em;
351
+ text-decoration: none;
352
+ position: relative;
353
+ top: -3px; }
354
+
355
+ #global-breadcrumb {
356
+ background-color: white;
357
+ max-width: 1020px;
358
+ margin: 0 auto;
359
+ z-index: 50; }
360
+ #global-breadcrumb nav ol {
361
+ max-width: 960px;
362
+ margin: 0 30px;
363
+ padding: 0.75em 0; }
364
+ #global-breadcrumb nav ol li {
365
+ font-family: "nta", Arial, sans-serif;
366
+ font-size: 16px;
367
+ line-height: 1.25;
368
+ font-weight: 300;
369
+ text-transform: none;
370
+ background: url(https://assets.digital.cabinet-office.gov.uk/static/separator-73822610794bc3a64871f144d93d6526.png) 100% 50% no-repeat;
371
+ float: left;
372
+ list-style: none;
373
+ margin-left: 0;
374
+ margin-right: 0.5em;
375
+ padding-right: 1em; }
376
+ @media (max-width: 640px) {
377
+ #global-breadcrumb nav ol li {
378
+ font-size: 14px;
379
+ line-height: 1.14286; } }
380
+ #global-breadcrumb nav ol li:last-child {
381
+ background-image: none;
382
+ margin-right: 0; }
383
+ #global-breadcrumb nav ol li a {
384
+ color: #0b0c0c; }
385
+ #global-breadcrumb nav ol li a:hover {
386
+ color: #2e8aca; }
387
+
388
+ .button {
389
+ background-color: #00823b;
390
+ position: relative;
391
+ display: -moz-inline-stack;
392
+ display: inline-block;
393
+ zoom: 1;
394
+ display: inline;
395
+ padding: 0.35em 0.5em 0.15em 0.5em;
396
+ border: none;
397
+ -webkit-border-radius: 0;
398
+ -moz-border-radius: 0;
399
+ border-radius: 0;
400
+ -webkit-appearance: none;
401
+ -webkit-box-shadow: 0 2px 0 #003518;
402
+ -moz-box-shadow: 0 2px 0 #003518;
403
+ box-shadow: 0 2px 0 #003518;
404
+ border-bottom: 2px solid #003518;
405
+ font-size: 1em;
406
+ line-height: 1.25;
407
+ text-decoration: none;
408
+ -webkit-font-smoothing: antialiased;
409
+ cursor: pointer;
410
+ color: white; }
411
+ .button:visited {
412
+ background-color: #00823b; }
413
+ .button:hover, .button:focus {
414
+ background-color: #00692f; }
415
+ .button:active {
416
+ top: 2px;
417
+ -webkit-box-shadow: 0 0 0 #00823b;
418
+ -moz-box-shadow: 0 0 0 #00823b;
419
+ box-shadow: 0 0 0 #00823b; }
420
+ .button.disabled, .button[disabled="disabled"], .button[disabled] {
421
+ zoom: 1;
422
+ filter: alpha(opacity=50);
423
+ opacity: 0.5; }
424
+ .button.disabled:hover, .button[disabled="disabled"]:hover, .button[disabled]:hover {
425
+ cursor: default;
426
+ background-color: #00823b; }
427
+ .button.disabled:active, .button[disabled="disabled"]:active, .button[disabled]:active {
428
+ top: 0;
429
+ -webkit-box-shadow: 0 2px 0 #003518;
430
+ -moz-box-shadow: 0 2px 0 #003518;
431
+ box-shadow: 0 2px 0 #003518;
432
+ border-bottom: 2px solid #003518; }
433
+ .button:link, .button:hover, .button:focus, .button:visited {
434
+ color: white; }
435
+ .button:before {
436
+ content: "";
437
+ height: 110%;
438
+ width: 100%;
439
+ display: block;
440
+ background: transparent;
441
+ position: absolute;
442
+ top: 0;
443
+ left: 0; }
444
+ .button:active:before {
445
+ top: -10%;
446
+ height: 120%; }
447
+ .button[rel="external"]:after {
448
+ display: none;
449
+ content: none;
450
+ margin-left: 0;
451
+ margin-right: 0; }
452
+ .button[type="submit"], .button[type="reset"], .button[type="button"] {
453
+ filter: chroma(color=black); }
454
+ .button[type=submit].button {
455
+ filter: none; }
456
+
457
+ .button-secondary {
458
+ background-color: #dee0e2;
459
+ position: relative;
460
+ display: -moz-inline-stack;
461
+ display: inline-block;
462
+ zoom: 1;
463
+ display: inline;
464
+ padding: 0.35em 0.5em 0.15em 0.5em;
465
+ border: none;
466
+ -webkit-border-radius: 0;
467
+ -moz-border-radius: 0;
468
+ border-radius: 0;
469
+ -webkit-appearance: none;
470
+ -webkit-box-shadow: 0 2px 0 #b5babe;
471
+ -moz-box-shadow: 0 2px 0 #b5babe;
472
+ box-shadow: 0 2px 0 #b5babe;
473
+ border-bottom: 2px solid #b5babe;
474
+ font-size: 1em;
475
+ line-height: 1.25;
476
+ text-decoration: none;
477
+ -webkit-font-smoothing: antialiased;
478
+ cursor: pointer;
479
+ color: #0b0c0c; }
480
+ .button-secondary:visited {
481
+ background-color: #dee0e2; }
482
+ .button-secondary:hover, .button-secondary:focus {
483
+ background-color: #d0d3d6; }
484
+ .button-secondary:active {
485
+ top: 2px;
486
+ -webkit-box-shadow: 0 0 0 #dee0e2;
487
+ -moz-box-shadow: 0 0 0 #dee0e2;
488
+ box-shadow: 0 0 0 #dee0e2; }
489
+ .button-secondary.disabled, .button-secondary[disabled="disabled"], .button-secondary[disabled] {
490
+ zoom: 1;
491
+ filter: alpha(opacity=50);
492
+ opacity: 0.5; }
493
+ .button-secondary.disabled:hover, .button-secondary[disabled="disabled"]:hover, .button-secondary[disabled]:hover {
494
+ cursor: default;
495
+ background-color: #dee0e2; }
496
+ .button-secondary.disabled:active, .button-secondary[disabled="disabled"]:active, .button-secondary[disabled]:active {
497
+ top: 0;
498
+ -webkit-box-shadow: 0 2px 0 #b5babe;
499
+ -moz-box-shadow: 0 2px 0 #b5babe;
500
+ box-shadow: 0 2px 0 #b5babe;
501
+ border-bottom: 2px solid #b5babe; }
502
+ .button-secondary:link, .button-secondary:hover, .button-secondary:focus, .button-secondary:visited {
503
+ color: #0b0c0c; }
504
+ .button-secondary:before {
505
+ content: "";
506
+ height: 110%;
507
+ width: 100%;
508
+ display: block;
509
+ background: transparent;
510
+ position: absolute;
511
+ top: 0;
512
+ left: 0; }
513
+ .button-secondary:active:before {
514
+ top: -10%;
515
+ height: 120%; }
516
+ .button-secondary[rel="external"]:after {
517
+ display: none;
518
+ content: none;
519
+ margin-left: 0;
520
+ margin-right: 0; }
521
+ .button-secondary[type="submit"], .button-secondary[type="reset"], .button-secondary[type="button"] {
522
+ filter: chroma(color=black); }
523
+ .button-secondary[type=submit].button {
524
+ filter: none; }
525
+
526
+ .button-warning {
527
+ background-color: #b10e1e;
528
+ position: relative;
529
+ display: -moz-inline-stack;
530
+ display: inline-block;
531
+ zoom: 1;
532
+ display: inline;
533
+ padding: 0.35em 0.5em 0.15em 0.5em;
534
+ border: none;
535
+ -webkit-border-radius: 0;
536
+ -moz-border-radius: 0;
537
+ border-radius: 0;
538
+ -webkit-appearance: none;
539
+ -webkit-box-shadow: 0 2px 0 #6a0812;
540
+ -moz-box-shadow: 0 2px 0 #6a0812;
541
+ box-shadow: 0 2px 0 #6a0812;
542
+ border-bottom: 2px solid #6a0812;
543
+ font-size: 1em;
544
+ line-height: 1.25;
545
+ text-decoration: none;
546
+ -webkit-font-smoothing: antialiased;
547
+ cursor: pointer;
548
+ color: white; }
549
+ .button-warning:visited {
550
+ background-color: #b10e1e; }
551
+ .button-warning:hover, .button-warning:focus {
552
+ background-color: #990c1a; }
553
+ .button-warning:active {
554
+ top: 2px;
555
+ -webkit-box-shadow: 0 0 0 #b10e1e;
556
+ -moz-box-shadow: 0 0 0 #b10e1e;
557
+ box-shadow: 0 0 0 #b10e1e; }
558
+ .button-warning.disabled, .button-warning[disabled="disabled"], .button-warning[disabled] {
559
+ zoom: 1;
560
+ filter: alpha(opacity=50);
561
+ opacity: 0.5; }
562
+ .button-warning.disabled:hover, .button-warning[disabled="disabled"]:hover, .button-warning[disabled]:hover {
563
+ cursor: default;
564
+ background-color: #b10e1e; }
565
+ .button-warning.disabled:active, .button-warning[disabled="disabled"]:active, .button-warning[disabled]:active {
566
+ top: 0;
567
+ -webkit-box-shadow: 0 2px 0 #6a0812;
568
+ -moz-box-shadow: 0 2px 0 #6a0812;
569
+ box-shadow: 0 2px 0 #6a0812;
570
+ border-bottom: 2px solid #6a0812; }
571
+ .button-warning:link, .button-warning:hover, .button-warning:focus, .button-warning:visited {
572
+ color: white; }
573
+ .button-warning:before {
574
+ content: "";
575
+ height: 110%;
576
+ width: 100%;
577
+ display: block;
578
+ background: transparent;
579
+ position: absolute;
580
+ top: 0;
581
+ left: 0; }
582
+ .button-warning:active:before {
583
+ top: -10%;
584
+ height: 120%; }
585
+ .button-warning[rel="external"]:after {
586
+ display: none;
587
+ content: none;
588
+ margin-left: 0;
589
+ margin-right: 0; }
590
+ .button-warning[type="submit"], .button-warning[type="reset"], .button-warning[type="button"] {
591
+ filter: chroma(color=black); }
592
+ .button-warning[type=submit].button {
593
+ filter: none; }
594
+
595
+ #footer h2 {
596
+ font-family: "nta", Arial, sans-serif;
597
+ font-size: 24px;
598
+ line-height: 1.25;
599
+ font-weight: 400;
600
+ text-transform: none;
601
+ font-weight: 700; }
602
+ @media (max-width: 640px) {
603
+ #footer h2 {
604
+ font-size: 20px;
605
+ line-height: 1.2; } }
606
+ #footer .footer-categories {
607
+ font-size: 0;
608
+ float: left;
609
+ border: 1px solid #a1acb2;
610
+ border-width: 0 0 1px 0;
611
+ margin-bottom: 30px;
612
+ padding: 0 0 60px 0;
613
+ width: 100%; }
614
+ #footer .footer-categories ul {
615
+ font-family: "nta", Arial, sans-serif;
616
+ font-size: 16px;
617
+ line-height: 1.25;
618
+ font-weight: 300;
619
+ text-transform: none;
620
+ list-style: none;
621
+ border-top: 1px solid #a1acb2;
622
+ margin: 20px 0 0 0;
623
+ padding: 20px 0 0 0;
624
+ min-height: 210px;
625
+ vertical-align: top; }
626
+ @media (max-width: 640px) {
627
+ #footer .footer-categories ul {
628
+ font-size: 14px;
629
+ line-height: 1.14286; } }
630
+ #footer .footer-categories ul li {
631
+ display: block;
632
+ float: left;
633
+ clear: left;
634
+ margin: 0 0 15px 0;
635
+ width: 45.5%; }
636
+ #footer .footer-categories ul li:nth-child(even) {
637
+ float: right;
638
+ clear: none; }
639
+ #footer .footer-explore {
640
+ float: left;
641
+ margin-right: 7%;
642
+ width: 62%; }
643
+ #footer .footer-inside-government {
644
+ float: left;
645
+ width: 31%; }
646
+ #footer .footer-inside-government ul {
647
+ margin-right: 0; }
648
+ #footer .footer-inside-government ul li {
649
+ margin-right: 0;
650
+ width: 100%; }
651
+
652
+ /* Phase indicator alignment fixes */
653
+ .indicator {
654
+ padding: 0.5em 2em !important;
655
+ /* Set alpha bar to white text */ }
656
+ .indicator p {
657
+ padding: 0 !important;
658
+ /* Set uppercase font for indicator phase */ }
659
+ .indicator p strong {
660
+ text-transform: uppercase; }
661
+ body.alpha .indicator p,
662
+ body.alpha .indicator a:visited,
663
+ body.alpha .indicator a:link {
664
+ color: white; }