idsk_template 0.24.1 → 0.24.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,638 +0,0 @@
1
- /* idsk_frontend_toolkit includes */
2
- #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-link:after,
3
- #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after {
4
- content: "";
5
- display: block;
6
- clear: both; }
7
-
8
- #global-cookie-message p, #footer .footer-wrapper {
9
- max-width: 960px;
10
- width: 960px;
11
- margin: 0 15px;
12
- margin: 0 30px;
13
- margin: 0 auto; }
14
-
15
- #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-link:after,
16
- #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after {
17
- content: "";
18
- display: block;
19
- clear: both; }
20
-
21
- /* local styleguide includes */
22
- @-ms-viewport {
23
- width: device-width; }
24
-
25
- html, body, button, input, table, td, th {
26
- font-family: "Source Sans Pro", "Arial", sans-serif; }
27
-
28
- html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
29
- margin: 0;
30
- padding: 0;
31
- vertical-align: baseline; }
32
-
33
- main {
34
- display: block; }
35
-
36
- .group:before,
37
- .group:after {
38
- content: "\0020";
39
- display: block;
40
- height: 0;
41
- overflow: hidden; }
42
-
43
- .group:after {
44
- clear: both; }
45
-
46
- .group {
47
- zoom: 1; }
48
-
49
- .content-fixed {
50
- top: 0;
51
- position: fixed; }
52
-
53
- .shim {
54
- display: block; }
55
-
56
- /*
57
- * 1. Prevents iOS text size adjust after orientation change, without disabling
58
- * user zoom.
59
- */
60
- html {
61
- -webkit-text-size-adjust: 100%;
62
- /* 1 */
63
- -ms-text-size-adjust: 100%;
64
- /* 1 */
65
- background-color: #EAEAEA; }
66
-
67
- /*
68
- Force the scrollbar to always display in IE10/11
69
- */
70
- html {
71
- -ms-overflow-style: scrollbar; }
72
-
73
- body {
74
- background: #fff;
75
- color: #0b0c0c;
76
- line-height: 1.5;
77
- font-weight: 400;
78
- -webkit-font-smoothing: antialiased;
79
- -moz-osx-font-smoothing: grayscale; }
80
-
81
- ol, ul, nav ol, nav ul {
82
- list-style: inherit; }
83
-
84
- fieldset {
85
- border: none;
86
- padding: 0; }
87
-
88
- a:link {
89
- color: #215DA8; }
90
-
91
- a:visited {
92
- color: #4c2c92; }
93
-
94
- a:hover {
95
- color: #2b8cc4; }
96
-
97
- a:active {
98
- color: #2b8cc4; }
99
-
100
- /*
101
- * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
102
- * http://clagnut.com/blog/348/#c790
103
- * note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
104
- * http://snook.ca/archives/html_and_css/font-size-with-rem
105
- * 2. Keeps page centred in all browsers regardless of content height
106
- * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
107
- * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
108
- */
109
- html {
110
- font-size: 62.5%;
111
- /* 1 */
112
- overflow-y: scroll;
113
- /* 2 */
114
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
115
- /* 3 */ }
116
-
117
- /*
118
- * 1. Font-size increased to compensate for change to html element font-size in
119
- * order to support beta typography which was set in ems
120
- * (62.5% * 160% = 100%)
121
- * 2. Addresses margins handled incorrectly in IE6/7
122
- */
123
- body {
124
- font-size: 160%;
125
- /* 1 */
126
- margin: 0;
127
- /* 2 */ }
128
-
129
- b,
130
- strong {
131
- font-weight: 600; }
132
-
133
- img {
134
- border: 0; }
135
-
136
- abbr[title] {
137
- cursor: help; }
138
-
139
- /*
140
- * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
141
- * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
142
- * (include `-moz` to future-proof).
143
- */
144
- input[type="search"] {
145
- -webkit-appearance: textfield;
146
- /* 1 */
147
- -moz-box-sizing: content-box;
148
- -webkit-box-sizing: content-box;
149
- /* 2 */
150
- box-sizing: content-box; }
151
-
152
- input[type="search"]::-webkit-search-cancel-button {
153
- -webkit-appearance: searchfield-cancel-button;
154
- margin-right: 2px; }
155
-
156
- input[type="search"]::-webkit-search-decoration {
157
- -webkit-appearance: none; }
158
-
159
- /* For image replacement */
160
- .ir {
161
- display: block;
162
- text-indent: -999em;
163
- overflow: hidden;
164
- background-repeat: no-repeat;
165
- text-align: left;
166
- direction: ltr; }
167
- .ir br {
168
- display: none; }
169
-
170
- /* Hide for both screenreaders and browsers */
171
- .hidden,
172
- .js-enabled .js-hidden {
173
- display: none;
174
- visibility: hidden; }
175
-
176
- /* Hide only visually, but have it available for screenreaders */
177
- .visually-hidden,
178
- .visuallyhidden {
179
- position: absolute;
180
- left: -9999em;
181
- top: auto;
182
- width: 1px;
183
- height: 1px;
184
- overflow: hidden;
185
- /*
186
- * Extends the .visuallyhidden class to allow the element to be
187
- * focusable when navigated to via the keyboard
188
- */ }
189
- .visually-hidden.focusable:active, .visually-hidden.focusable:focus,
190
- .visuallyhidden.focusable:active,
191
- .visuallyhidden.focusable:focus {
192
- clip: auto;
193
- height: auto;
194
- margin: 0;
195
- overflow: visible;
196
- position: static;
197
- width: auto; }
198
-
199
- /* Hide visually and from screenreaders, but maintain layout */
200
- .invisible {
201
- visibility: hidden; }
202
-
203
- /* Give a strong clear visual idea as to what is currently in focus */
204
- a {
205
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }
206
-
207
- a:focus {
208
- background-color: #ffbf47;
209
- outline: 3px solid #ffbf47; }
210
-
211
- /* Make links slightly darker when focused to improve contrast. */
212
- a:link:focus {
213
- color: #1f579d; }
214
-
215
- /* Make skiplinks visible when they are tabbed to */
216
- .skiplink {
217
- position: absolute;
218
- left: -9999em;
219
- /* Default link colour doesn't have enough contrast against $focus-colour */ }
220
- .skiplink:focus, .skiplink:visited {
221
- color: #0b0c0c; }
222
-
223
- .skiplink:focus {
224
- left: 0;
225
- z-index: 1; }
226
-
227
- #skiplink-container {
228
- text-align: center;
229
- background: #0b0c0c; }
230
- #skiplink-container div {
231
- text-align: left;
232
- margin: 0 auto;
233
- max-width: 1020px; }
234
- #skiplink-container .skiplink {
235
- display: -moz-inline-stack;
236
- display: inline-block;
237
- margin: 0.75em 0 0 30px; }
238
-
239
- input:focus,
240
- textarea:focus,
241
- select:focus,
242
- button:focus {
243
- outline: 3px solid #ffbf47;
244
- outline-offset: 0; }
245
-
246
- #global-header input[type=search]:focus {
247
- outline: 3px solid #ffbf47;
248
- /* Focus appears inside the input */
249
- outline-offset: -2px; }
250
-
251
- #global-header h1 a:focus {
252
- background-color: transparent;
253
- outline: none; }
254
-
255
- #global-header a:focus {
256
- color: #0b0c0c; }
257
-
258
- #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-link:after,
259
- #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after {
260
- content: "";
261
- display: block;
262
- clear: both; }
263
-
264
- #global-header {
265
- background-color: #313133;
266
- width: 100%; }
267
- #global-header .header-wrapper {
268
- background-color: #313133;
269
- max-width: 990px;
270
- margin: 0 auto;
271
- padding-top: 21px;
272
- padding-bottom: 21px;
273
- padding-left: 15px;
274
- padding-right: 15px;
275
- width: 990px; }
276
- #global-header .header-wrapper .header-global .header-logo {
277
- float: left;
278
- width: 30%; }
279
- @media screen and (max-width: 379px) {
280
- #global-header .header-wrapper .header-global .header-logo {
281
- width: auto;
282
- float: none; } }
283
- #global-header .header-wrapper .header-global .header-logo .content {
284
- margin: 0 15px; }
285
- #global-header .header-wrapper .header-global .header-logo {
286
- margin-top: 2px; }
287
- #global-header.with-proposition .header-wrapper .header-global {
288
- float: left;
289
- width: 25%;
290
- min-width: 240px; }
291
- #global-header.with-proposition .header-wrapper .header-global .header-logo,
292
- #global-header.with-proposition .header-wrapper .header-global .site-search {
293
- width: 100%; }
294
- #global-header.with-proposition .header-wrapper .header-proposition {
295
- width: 55%;
296
- float: left; }
297
- #global-header.with-proposition .header-wrapper .header-proposition .content {
298
- margin: 8px 15px 0 15px; }
299
- #global-header.with-proposition.with-user .header-wrapper .header-proposition {
300
- width: 45%; }
301
- #global-header #logo {
302
- float: left;
303
- overflow: visible;
304
- color: #fff;
305
- font-weight: bold;
306
- font-size: 30px;
307
- line-height: 1;
308
- text-decoration: none;
309
- text-rendering: optimizeLegibility;
310
- border-bottom: 1px solid transparent; }
311
- #global-header #logo:hover, #global-header #logo:focus {
312
- text-decoration: none;
313
- border-bottom-color: #fff; }
314
- #global-header .header-proposition {
315
- padding-top: 10px;
316
- padding-top: 0; }
317
- #global-header .header-proposition #proposition-name {
318
- font-family: "Source Sans Pro", "Arial", sans-serif;
319
- font-weight: 400;
320
- text-transform: none;
321
- font-size: 18px;
322
- line-height: 1.2;
323
- font-size: 20px;
324
- line-height: 1.25;
325
- font-weight: bold;
326
- color: #fff;
327
- text-decoration: none; }
328
- #global-header .header-proposition a#proposition-name:hover {
329
- text-decoration: underline; }
330
- #global-header .header-proposition a#proposition-name:focus {
331
- color: #0b0c0c; }
332
- #global-header .header-proposition a.menu {
333
- font-family: "Source Sans Pro", "Arial", sans-serif;
334
- font-weight: 400;
335
- text-transform: none;
336
- font-size: 14px;
337
- line-height: 1.14286;
338
- font-size: 16px;
339
- line-height: 1.25;
340
- color: #fff;
341
- display: block;
342
- float: right;
343
- text-decoration: none;
344
- padding-top: 4px;
345
- margin-left: 10px;
346
- padding-top: 6px;
347
- margin-left: 0;
348
- display: none; }
349
- #global-header .header-proposition a.menu:hover {
350
- text-decoration: underline; }
351
- #global-header .header-proposition a.menu:after {
352
- display: inline-block;
353
- font-size: 8px;
354
- height: 8px;
355
- padding-left: 5px;
356
- vertical-align: middle;
357
- content: " \25BC"; }
358
- #global-header .header-proposition a.menu.js-visible:after {
359
- content: " \25B2"; }
360
- #global-header .header-proposition #proposition-menu {
361
- margin-top: 2px;
362
- border-top: 1px #515153 solid; }
363
- #global-header .header-proposition #proposition-menu.no-proposition-name {
364
- margin-top: 37px; }
365
- #global-header .header-proposition #proposition-link,
366
- #global-header .header-proposition #proposition-links {
367
- clear: both;
368
- margin: 2px 0 0 0;
369
- padding: 0;
370
- list-style-type: none; }
371
- .js-enabled #global-header .header-proposition #proposition-link, .js-enabled
372
- #global-header .header-proposition #proposition-links {
373
- display: none;
374
- display: block; }
375
- .js-enabled #global-header .header-proposition #proposition-link.js-visible, .js-enabled
376
- #global-header .header-proposition #proposition-links.js-visible {
377
- display: block; }
378
- #global-header .header-proposition #proposition-link li,
379
- #global-header .header-proposition #proposition-links li {
380
- float: left;
381
- width: 50%;
382
- padding: 3px 0;
383
- border-bottom: 1px solid #2e3133;
384
- display: block;
385
- width: auto;
386
- padding: 0 20px 0 0;
387
- border-bottom: 0; }
388
- #global-header .header-proposition #proposition-link li.clear-child,
389
- #global-header .header-proposition #proposition-links li.clear-child {
390
- clear: left; }
391
- #global-header .header-proposition #proposition-link a,
392
- #global-header .header-proposition #proposition-links a {
393
- color: #C1D0E2;
394
- text-decoration: none;
395
- font-family: "Source Sans Pro", "Arial", sans-serif;
396
- font-weight: 400;
397
- text-transform: none;
398
- font-size: 14px;
399
- line-height: 1.14286;
400
- font-size: 16px;
401
- line-height: 1.25;
402
- line-height: 23px; }
403
- #global-header .header-proposition #proposition-link a:hover,
404
- #global-header .header-proposition #proposition-links a:hover {
405
- text-decoration: underline; }
406
- #global-header .header-proposition #proposition-link a.active,
407
- #global-header .header-proposition #proposition-links a.active {
408
- color: #fff; }
409
- #global-header .header-proposition #proposition-link a:focus,
410
- #global-header .header-proposition #proposition-links a:focus {
411
- color: #0b0c0c; }
412
- #global-header .header-proposition #proposition-link {
413
- float: right;
414
- line-height: 22px;
415
- float: none; }
416
- .js-enabled #global-header .header-proposition #proposition-link {
417
- display: block; }
418
- #global-header .header-user {
419
- width: 100%;
420
- min-width: 155px;
421
- width: 20%;
422
- float: right;
423
- text-align: right; }
424
- #global-header .header-user .user-menu {
425
- position: absolute;
426
- display: block;
427
- right: 15px;
428
- top: 25px;
429
- display: inline-block;
430
- width: 28px;
431
- height: 28px;
432
- margin-top: 5px;
433
- vertical-align: top;
434
- position: static; }
435
- #global-header .header-user .user-menu #user-icon {
436
- background: url("images/icon_user.png") no-repeat;
437
- display: block;
438
- width: 28px;
439
- height: 28px; }
440
- #global-header .header-user #user-signup {
441
- position: absolute;
442
- font-size: 12px;
443
- width: 80px;
444
- height: 30px;
445
- line-height: 30px;
446
- top: 25px;
447
- right: 15px;
448
- border: 1px #fff solid;
449
- display: block;
450
- float: right;
451
- color: #fff;
452
- text-decoration: none;
453
- text-align: center;
454
- top: 20px;
455
- width: 125px;
456
- height: 40px;
457
- font-size: 20px;
458
- line-height: 40px;
459
- position: static; }
460
- #global-header .header-user #user-signup:hover {
461
- background: rgba(0, 0, 0, 0.4);
462
- text-decoration: none;
463
- color: #fff;
464
- outline: none; }
465
- #global-header .header-user #user-links {
466
- background: rgba(0, 0, 0, 0.4);
467
- display: block;
468
- padding: 15px;
469
- margin: 20px 0 -20px 0;
470
- text-align: right;
471
- margin-left: -15px;
472
- margin-right: -15px;
473
- display: inline-block;
474
- padding: 0;
475
- text-align: left;
476
- margin: 0 0 0 9px;
477
- background: transparent;
478
- max-width: 65%; }
479
- #global-header .header-user #user-links a#user-name {
480
- display: block;
481
- color: #fff;
482
- font-size: 16px;
483
- line-height: 20px;
484
- font-weight: 600;
485
- text-decoration: none; }
486
- #global-header .header-user #user-links a#user-name:active, #global-header .header-user #user-links a#user-name:hover {
487
- text-decoration: underline;
488
- outline: none;
489
- background: transparent; }
490
- #global-header .header-user #user-links a#user-logout {
491
- display: block;
492
- color: #C1D0E2;
493
- font-size: 14px;
494
- line-height: 18px;
495
- text-decoration: none; }
496
- #global-header .header-user #user-links a#user-logout:active, #global-header .header-user #user-links a#user-logout:hover {
497
- text-decoration: underline;
498
- outline: none;
499
- background: transparent; }
500
- .js-enabled #global-header .header-user #user-links {
501
- display: none;
502
- display: inline-block; }
503
- .js-enabled #global-header .header-user #user-links.js-visible {
504
- display: block; }
505
-
506
- /* Global header bar */
507
- #global-header-bar {
508
- height: 3px;
509
- background: url("images/stripe.png");
510
- font-size: 0; }
511
-
512
- /* Global cookie message */
513
- .js-enabled #global-cookie-message {
514
- display: none;
515
- /* shown with JS, always on for non-JS */ }
516
-
517
- #global-cookie-message {
518
- width: 100%;
519
- background-color: #d5e8f3;
520
- padding-top: 10px;
521
- padding-bottom: 10px; }
522
- #global-cookie-message p {
523
- font-family: "Source Sans Pro", "Arial", sans-serif;
524
- font-weight: 400;
525
- text-transform: none;
526
- font-size: 14px;
527
- line-height: 1.14286;
528
- font-size: 16px;
529
- line-height: 1.25;
530
- margin-top: 0;
531
- margin-bottom: 0; }
532
-
533
- /* Global footer */
534
- #footer {
535
- background-color: #EAEAEA; }
536
- #footer.with-logo .open-government-licence {
537
- padding-left: 85px; }
538
- #footer .footer-wrapper {
539
- background-color: #EAEAEA;
540
- padding-top: 30px; }
541
- #footer a {
542
- color: #005EA5; }
543
- #footer a:hover {
544
- color: #0b0c0c; }
545
- #footer h2 {
546
- font-family: "Source Sans Pro", "Arial", sans-serif;
547
- font-weight: 400;
548
- text-transform: none;
549
- font-size: 18px;
550
- line-height: 1.2;
551
- font-size: 20px;
552
- line-height: 1.25;
553
- font-weight: bold;
554
- color: #0b0c0c;
555
- margin: 0; }
556
- #footer h2 a {
557
- color: inherit; }
558
- #footer .footer-meta {
559
- padding-bottom: 60px;
560
- clear: both;
561
- font-size: 0;
562
- color: #0b0c0c; }
563
- #footer .footer-meta .footer-meta-inner {
564
- display: inline-block;
565
- vertical-align: bottom;
566
- width: 100%;
567
- width: 75%; }
568
- #footer .footer-meta .footer-meta-inner ul {
569
- font-family: "Source Sans Pro", "Arial", sans-serif;
570
- font-weight: 400;
571
- text-transform: none;
572
- font-size: 14px;
573
- line-height: 1.5;
574
- font-size: 16px;
575
- line-height: 1.5;
576
- display: inline-block;
577
- list-style: none;
578
- margin: 5px 0;
579
- padding: 0;
580
- margin: 5px 0; }
581
- #footer .footer-meta .footer-meta-inner ul li {
582
- display: inline-block;
583
- margin: 0 15px 0 0; }
584
- #footer .footer-meta .footer-meta-inner .open-government-licence {
585
- clear: left;
586
- position: relative; }
587
- #footer .footer-meta .footer-meta-inner .open-government-licence .logo {
588
- margin-bottom: 1em;
589
- padding-top: 0;
590
- position: absolute;
591
- left: 0;
592
- top: 0;
593
- width: 41px;
594
- height: 100%; }
595
- #footer .footer-meta .footer-meta-inner .open-government-licence .logo a {
596
- display: block;
597
- width: 41px;
598
- height: 17px;
599
- overflow: hidden;
600
- text-indent: -999em;
601
- background: image-url("images/open-government-licence.png") 0 0 no-repeat; }
602
- @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) {
603
- #footer .footer-meta .footer-meta-inner .open-government-licence .logo a {
604
- background-image: image-url("images/open-government-licence_2x.png");
605
- background-size: 41px 17px; } }
606
- #footer .footer-meta .footer-meta-inner .open-government-licence p {
607
- font-family: "Source Sans Pro", "Arial", sans-serif;
608
- font-weight: 400;
609
- text-transform: none;
610
- font-size: 14px;
611
- line-height: 1.14286;
612
- font-size: 16px;
613
- line-height: 1.25;
614
- margin: 0;
615
- padding-top: 0.1em; }
616
- #footer .footer-meta .copyright {
617
- font-family: "Source Sans Pro", "Arial", sans-serif;
618
- font-weight: 400;
619
- text-transform: none;
620
- font-size: 14px;
621
- line-height: 1.14286;
622
- font-size: 16px;
623
- line-height: 1.25;
624
- text-align: left;
625
- margin: 0 0 30px 0;
626
- width: 100%;
627
- display: block;
628
- vertical-align: top;
629
- display: inline-block;
630
- text-align: inherit;
631
- width: 25%;
632
- padding-top: 0;
633
- margin-bottom: 0; }
634
- #footer .footer-meta .copyright a {
635
- display: block;
636
- text-decoration: none; }
637
- #footer .footer-meta .copyright a img.logo {
638
- max-width: 218px; }