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,650 @@
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
+ background-color: #d53880;
185
+ color: #fff;
186
+ font-family: "nta", Arial, sans-serif;
187
+ font-size: 16px;
188
+ line-height: 1.25;
189
+ font-weight: 300;
190
+ text-transform: none;
191
+ font-weight: 700;
192
+ text-transform: uppercase;
193
+ letter-spacing: 1px;
194
+ text-decoration: none;
195
+ margin: 3px 10px 0 5px;
196
+ padding: 2px 5px 0; }
197
+ @media (max-width: 640px) {
198
+ header.page-header h1 .alpha {
199
+ font-size: 14px;
200
+ line-height: 1.14286; } }
201
+ header.page-header h1 .beta {
202
+ display: -moz-inline-stack;
203
+ display: inline-block;
204
+ background-color: #f47738;
205
+ color: #fff;
206
+ font-family: "nta", Arial, sans-serif;
207
+ font-size: 16px;
208
+ line-height: 1.25;
209
+ font-weight: 300;
210
+ text-transform: none;
211
+ font-weight: 700;
212
+ text-transform: uppercase;
213
+ letter-spacing: 1px;
214
+ text-decoration: none;
215
+ margin: 3px 10px 0 5px;
216
+ padding: 2px 5px 0; }
217
+ @media (max-width: 640px) {
218
+ header.page-header h1 .beta {
219
+ font-size: 14px;
220
+ line-height: 1.14286; } }
221
+ header.page-header h1 .alpha, header.page-header h1 .beta {
222
+ float: none;
223
+ display: inline;
224
+ vertical-align: middle;
225
+ margin-left: 1em; }
226
+
227
+ h2, h3, h4 {
228
+ font-weight: 400; }
229
+
230
+ #content {
231
+ margin: auto;
232
+ max-width: 1020px;
233
+ width: auto;
234
+ _width: 1020px;
235
+ min-height: 400px; }
236
+
237
+ #wrapper {
238
+ background-color: white;
239
+ padding: 0 0 60px 0;
240
+ border-bottom: 10px solid #0b0c0c; }
241
+ body.alpha #wrapper {
242
+ border-color: #d53880; }
243
+ body.beta #wrapper {
244
+ border-color: #f47738; }
245
+
246
+ .inner {
247
+ width: auto;
248
+ padding: 0 1em;
249
+ padding: 0 2em; }
250
+
251
+ body.alpha .indicator {
252
+ padding: 8px 0;
253
+ background-color: #d53880; }
254
+ body.alpha .indicator p {
255
+ max-width: 960px;
256
+ margin: 0 auto;
257
+ padding: 0 15px;
258
+ color: #0b0c0c;
259
+ font-family: "nta", Arial, sans-serif;
260
+ font-size: 16px;
261
+ line-height: 1.25;
262
+ font-weight: 300;
263
+ text-transform: none; }
264
+ @media (max-width: 640px) {
265
+ body.alpha .indicator p {
266
+ font-size: 14px;
267
+ line-height: 1.14286; } }
268
+ body.alpha .indicator a, body.alpha .indicator a:link, body.alpha .indicator a:visited, body.alpha .indicator a:active {
269
+ color: #0b0c0c; }
270
+ body.alpha .indicator a:hover {
271
+ color: #0b0c0c; }
272
+ body.beta .indicator {
273
+ padding: 8px 0;
274
+ background-color: #f47738; }
275
+ body.beta .indicator p {
276
+ max-width: 960px;
277
+ margin: 0 auto;
278
+ padding: 0 15px;
279
+ color: #0b0c0c;
280
+ font-family: "nta", Arial, sans-serif;
281
+ font-size: 16px;
282
+ line-height: 1.25;
283
+ font-weight: 300;
284
+ text-transform: none; }
285
+ @media (max-width: 640px) {
286
+ body.beta .indicator p {
287
+ font-size: 14px;
288
+ line-height: 1.14286; } }
289
+ body.beta .indicator a, body.beta .indicator a:link, body.beta .indicator a:visited, body.beta .indicator a:active {
290
+ color: #0b0c0c; }
291
+ body.beta .indicator a:hover {
292
+ color: #0b0c0c; }
293
+
294
+ #global-header .header-proposition {
295
+ padding-top: 8px; }
296
+ #global-header .header-proposition #proposition-name {
297
+ line-height: 1em;
298
+ display: inline-block; }
299
+ #global-header .header-proposition #proposition-name:hover {
300
+ border-bottom: 1px solid white; }
301
+ body.alpha #global-header .header-proposition .proposition-phase {
302
+ display: -moz-inline-stack;
303
+ display: inline-block;
304
+ background-color: #d53880;
305
+ color: #fff;
306
+ font-family: "nta", Arial, sans-serif;
307
+ font-size: 16px;
308
+ line-height: 1.25;
309
+ font-weight: 300;
310
+ text-transform: none;
311
+ font-weight: 700;
312
+ text-transform: uppercase;
313
+ letter-spacing: 1px;
314
+ text-decoration: none;
315
+ margin: 3px 10px 0 5px;
316
+ padding: 2px 5px 0; }
317
+ @media (max-width: 640px) {
318
+ body.alpha #global-header .header-proposition .proposition-phase {
319
+ font-size: 14px;
320
+ line-height: 1.14286; } }
321
+ body.beta #global-header .header-proposition .proposition-phase {
322
+ display: -moz-inline-stack;
323
+ display: inline-block;
324
+ background-color: #f47738;
325
+ color: #fff;
326
+ font-family: "nta", Arial, sans-serif;
327
+ font-size: 16px;
328
+ line-height: 1.25;
329
+ font-weight: 300;
330
+ text-transform: none;
331
+ font-weight: 700;
332
+ text-transform: uppercase;
333
+ letter-spacing: 1px;
334
+ text-decoration: none;
335
+ margin: 3px 10px 0 5px;
336
+ padding: 2px 5px 0; }
337
+ @media (max-width: 640px) {
338
+ body.beta #global-header .header-proposition .proposition-phase {
339
+ font-size: 14px;
340
+ line-height: 1.14286; } }
341
+ body.alpha #global-header .header-proposition .proposition-phase, body.beta #global-header .header-proposition .proposition-phase {
342
+ margin-left: 1em;
343
+ text-decoration: none;
344
+ position: relative;
345
+ top: -3px; }
346
+
347
+ #global-breadcrumb {
348
+ background-color: white;
349
+ max-width: 1020px;
350
+ margin: 0 auto;
351
+ z-index: 50; }
352
+ #global-breadcrumb nav ol {
353
+ max-width: 960px;
354
+ margin: 0 30px;
355
+ padding: 0.75em 0; }
356
+ #global-breadcrumb nav ol li {
357
+ font-family: "nta", Arial, sans-serif;
358
+ font-size: 16px;
359
+ line-height: 1.25;
360
+ font-weight: 300;
361
+ text-transform: none;
362
+ background: url(https://assets.digital.cabinet-office.gov.uk/static/separator-73822610794bc3a64871f144d93d6526.png) 100% 50% no-repeat;
363
+ float: left;
364
+ list-style: none;
365
+ margin-left: 0;
366
+ margin-right: 0.5em;
367
+ padding-right: 1em; }
368
+ @media (max-width: 640px) {
369
+ #global-breadcrumb nav ol li {
370
+ font-size: 14px;
371
+ line-height: 1.14286; } }
372
+ #global-breadcrumb nav ol li:last-child {
373
+ background-image: none;
374
+ margin-right: 0; }
375
+ #global-breadcrumb nav ol li a {
376
+ color: #0b0c0c; }
377
+ #global-breadcrumb nav ol li a:hover {
378
+ color: #2e8aca; }
379
+
380
+ .button {
381
+ background-color: #00823b;
382
+ position: relative;
383
+ display: -moz-inline-stack;
384
+ display: inline-block;
385
+ padding: 0.35em 0.5em 0.15em 0.5em;
386
+ border: none;
387
+ -webkit-border-radius: 0;
388
+ -moz-border-radius: 0;
389
+ border-radius: 0;
390
+ -webkit-appearance: none;
391
+ -webkit-box-shadow: 0 2px 0 #003518;
392
+ -moz-box-shadow: 0 2px 0 #003518;
393
+ box-shadow: 0 2px 0 #003518;
394
+ border-bottom: 2px solid #003518;
395
+ font-size: 1em;
396
+ line-height: 1.25;
397
+ text-decoration: none;
398
+ -webkit-font-smoothing: antialiased;
399
+ cursor: pointer;
400
+ color: white; }
401
+ .button:visited {
402
+ background-color: #00823b; }
403
+ .button:hover, .button:focus {
404
+ background-color: #00692f; }
405
+ .button:active {
406
+ top: 2px;
407
+ -webkit-box-shadow: 0 0 0 #00823b;
408
+ -moz-box-shadow: 0 0 0 #00823b;
409
+ box-shadow: 0 0 0 #00823b; }
410
+ .button.disabled, .button[disabled="disabled"], .button[disabled] {
411
+ zoom: 1;
412
+ filter: alpha(opacity=50);
413
+ opacity: 0.5; }
414
+ .button.disabled:hover, .button[disabled="disabled"]:hover, .button[disabled]:hover {
415
+ cursor: default;
416
+ background-color: #00823b; }
417
+ .button.disabled:active, .button[disabled="disabled"]:active, .button[disabled]:active {
418
+ top: 0;
419
+ -webkit-box-shadow: 0 2px 0 #003518;
420
+ -moz-box-shadow: 0 2px 0 #003518;
421
+ box-shadow: 0 2px 0 #003518;
422
+ border-bottom: 2px solid #003518; }
423
+ .button:link, .button:hover, .button:focus, .button:visited {
424
+ color: white; }
425
+ .button:before {
426
+ content: "";
427
+ height: 110%;
428
+ width: 100%;
429
+ display: block;
430
+ background: transparent;
431
+ position: absolute;
432
+ top: 0;
433
+ left: 0; }
434
+ .button:active:before {
435
+ top: -10%;
436
+ height: 120%; }
437
+ .button[rel="external"]:after {
438
+ display: none;
439
+ content: none;
440
+ margin-left: 0;
441
+ margin-right: 0; }
442
+ .button[type="submit"], .button[type="reset"], .button[type="button"] {
443
+ filter: chroma(color=black); }
444
+ .button[type=submit].button {
445
+ filter: none; }
446
+
447
+ .button-secondary {
448
+ background-color: #dee0e2;
449
+ position: relative;
450
+ display: -moz-inline-stack;
451
+ display: inline-block;
452
+ padding: 0.35em 0.5em 0.15em 0.5em;
453
+ border: none;
454
+ -webkit-border-radius: 0;
455
+ -moz-border-radius: 0;
456
+ border-radius: 0;
457
+ -webkit-appearance: none;
458
+ -webkit-box-shadow: 0 2px 0 #b5babe;
459
+ -moz-box-shadow: 0 2px 0 #b5babe;
460
+ box-shadow: 0 2px 0 #b5babe;
461
+ border-bottom: 2px solid #b5babe;
462
+ font-size: 1em;
463
+ line-height: 1.25;
464
+ text-decoration: none;
465
+ -webkit-font-smoothing: antialiased;
466
+ cursor: pointer;
467
+ color: #0b0c0c; }
468
+ .button-secondary:visited {
469
+ background-color: #dee0e2; }
470
+ .button-secondary:hover, .button-secondary:focus {
471
+ background-color: #d0d3d6; }
472
+ .button-secondary:active {
473
+ top: 2px;
474
+ -webkit-box-shadow: 0 0 0 #dee0e2;
475
+ -moz-box-shadow: 0 0 0 #dee0e2;
476
+ box-shadow: 0 0 0 #dee0e2; }
477
+ .button-secondary.disabled, .button-secondary[disabled="disabled"], .button-secondary[disabled] {
478
+ zoom: 1;
479
+ filter: alpha(opacity=50);
480
+ opacity: 0.5; }
481
+ .button-secondary.disabled:hover, .button-secondary[disabled="disabled"]:hover, .button-secondary[disabled]:hover {
482
+ cursor: default;
483
+ background-color: #dee0e2; }
484
+ .button-secondary.disabled:active, .button-secondary[disabled="disabled"]:active, .button-secondary[disabled]:active {
485
+ top: 0;
486
+ -webkit-box-shadow: 0 2px 0 #b5babe;
487
+ -moz-box-shadow: 0 2px 0 #b5babe;
488
+ box-shadow: 0 2px 0 #b5babe;
489
+ border-bottom: 2px solid #b5babe; }
490
+ .button-secondary:link, .button-secondary:hover, .button-secondary:focus, .button-secondary:visited {
491
+ color: #0b0c0c; }
492
+ .button-secondary:before {
493
+ content: "";
494
+ height: 110%;
495
+ width: 100%;
496
+ display: block;
497
+ background: transparent;
498
+ position: absolute;
499
+ top: 0;
500
+ left: 0; }
501
+ .button-secondary:active:before {
502
+ top: -10%;
503
+ height: 120%; }
504
+ .button-secondary[rel="external"]:after {
505
+ display: none;
506
+ content: none;
507
+ margin-left: 0;
508
+ margin-right: 0; }
509
+ .button-secondary[type="submit"], .button-secondary[type="reset"], .button-secondary[type="button"] {
510
+ filter: chroma(color=black); }
511
+ .button-secondary[type=submit].button {
512
+ filter: none; }
513
+
514
+ .button-warning {
515
+ background-color: #b10e1e;
516
+ position: relative;
517
+ display: -moz-inline-stack;
518
+ display: inline-block;
519
+ padding: 0.35em 0.5em 0.15em 0.5em;
520
+ border: none;
521
+ -webkit-border-radius: 0;
522
+ -moz-border-radius: 0;
523
+ border-radius: 0;
524
+ -webkit-appearance: none;
525
+ -webkit-box-shadow: 0 2px 0 #6a0812;
526
+ -moz-box-shadow: 0 2px 0 #6a0812;
527
+ box-shadow: 0 2px 0 #6a0812;
528
+ border-bottom: 2px solid #6a0812;
529
+ font-size: 1em;
530
+ line-height: 1.25;
531
+ text-decoration: none;
532
+ -webkit-font-smoothing: antialiased;
533
+ cursor: pointer;
534
+ color: white; }
535
+ .button-warning:visited {
536
+ background-color: #b10e1e; }
537
+ .button-warning:hover, .button-warning:focus {
538
+ background-color: #990c1a; }
539
+ .button-warning:active {
540
+ top: 2px;
541
+ -webkit-box-shadow: 0 0 0 #b10e1e;
542
+ -moz-box-shadow: 0 0 0 #b10e1e;
543
+ box-shadow: 0 0 0 #b10e1e; }
544
+ .button-warning.disabled, .button-warning[disabled="disabled"], .button-warning[disabled] {
545
+ zoom: 1;
546
+ filter: alpha(opacity=50);
547
+ opacity: 0.5; }
548
+ .button-warning.disabled:hover, .button-warning[disabled="disabled"]:hover, .button-warning[disabled]:hover {
549
+ cursor: default;
550
+ background-color: #b10e1e; }
551
+ .button-warning.disabled:active, .button-warning[disabled="disabled"]:active, .button-warning[disabled]:active {
552
+ top: 0;
553
+ -webkit-box-shadow: 0 2px 0 #6a0812;
554
+ -moz-box-shadow: 0 2px 0 #6a0812;
555
+ box-shadow: 0 2px 0 #6a0812;
556
+ border-bottom: 2px solid #6a0812; }
557
+ .button-warning:link, .button-warning:hover, .button-warning:focus, .button-warning:visited {
558
+ color: white; }
559
+ .button-warning:before {
560
+ content: "";
561
+ height: 110%;
562
+ width: 100%;
563
+ display: block;
564
+ background: transparent;
565
+ position: absolute;
566
+ top: 0;
567
+ left: 0; }
568
+ .button-warning:active:before {
569
+ top: -10%;
570
+ height: 120%; }
571
+ .button-warning[rel="external"]:after {
572
+ display: none;
573
+ content: none;
574
+ margin-left: 0;
575
+ margin-right: 0; }
576
+ .button-warning[type="submit"], .button-warning[type="reset"], .button-warning[type="button"] {
577
+ filter: chroma(color=black); }
578
+ .button-warning[type=submit].button {
579
+ filter: none; }
580
+
581
+ #footer h2 {
582
+ font-family: "nta", Arial, sans-serif;
583
+ font-size: 24px;
584
+ line-height: 1.25;
585
+ font-weight: 400;
586
+ text-transform: none;
587
+ font-weight: 700; }
588
+ @media (max-width: 640px) {
589
+ #footer h2 {
590
+ font-size: 20px;
591
+ line-height: 1.2; } }
592
+ #footer .footer-categories {
593
+ font-size: 0;
594
+ float: left;
595
+ border: 1px solid #a1acb2;
596
+ border-width: 0 0 1px 0;
597
+ margin-bottom: 30px;
598
+ padding: 0 0 60px 0;
599
+ width: 100%; }
600
+ #footer .footer-categories ul {
601
+ font-family: "nta", Arial, sans-serif;
602
+ font-size: 16px;
603
+ line-height: 1.25;
604
+ font-weight: 300;
605
+ text-transform: none;
606
+ list-style: none;
607
+ border-top: 1px solid #a1acb2;
608
+ margin: 20px 0 0 0;
609
+ padding: 20px 0 0 0;
610
+ min-height: 210px;
611
+ vertical-align: top; }
612
+ @media (max-width: 640px) {
613
+ #footer .footer-categories ul {
614
+ font-size: 14px;
615
+ line-height: 1.14286; } }
616
+ #footer .footer-categories ul li {
617
+ display: block;
618
+ float: left;
619
+ clear: left;
620
+ margin: 0 0 15px 0;
621
+ width: 45.5%; }
622
+ #footer .footer-categories ul li:nth-child(even) {
623
+ float: right;
624
+ clear: none; }
625
+ #footer .footer-explore {
626
+ float: left;
627
+ margin-right: 7%;
628
+ width: 62%; }
629
+ #footer .footer-inside-government {
630
+ float: left;
631
+ width: 31%; }
632
+ #footer .footer-inside-government ul {
633
+ margin-right: 0; }
634
+ #footer .footer-inside-government ul li {
635
+ margin-right: 0;
636
+ width: 100%; }
637
+
638
+ /* Phase indicator alignment fixes */
639
+ .indicator {
640
+ padding: 0.5em 2em !important;
641
+ /* Set alpha bar to white text */ }
642
+ .indicator p {
643
+ padding: 0 !important;
644
+ /* Set uppercase font for indicator phase */ }
645
+ .indicator p strong {
646
+ text-transform: uppercase; }
647
+ body.alpha .indicator p,
648
+ body.alpha .indicator a:visited,
649
+ body.alpha .indicator a:link {
650
+ color: white; }