wai-website-theme 0.1.6 → 1.2

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 (54) hide show
  1. checksums.yaml +5 -5
  2. data/_includes/backtotop.html +1 -0
  3. data/_includes/body-class.html +1 -1
  4. data/_includes/box.html +2 -0
  5. data/_includes/different.html +1 -0
  6. data/_includes/doc-note-msg.html +10 -0
  7. data/_includes/excol.html +13 -12
  8. data/_includes/external.html +1 -0
  9. data/_includes/feedback-box.html +62 -0
  10. data/_includes/footer.html +55 -27
  11. data/_includes/head.html +8 -9
  12. data/_includes/header.html +127 -30
  13. data/_includes/icon.html +6 -6
  14. data/_includes/img.html +1 -1
  15. data/_includes/menuitem.html +13 -0
  16. data/_includes/navlist.html +9 -21
  17. data/_includes/path.html +6 -0
  18. data/_includes/prevnext.html +18 -16
  19. data/_includes/resources.html +3 -3
  20. data/_includes/secondarynav.html +70 -0
  21. data/_includes/sidenav.html +42 -48
  22. data/_includes/sitemap.html +29 -0
  23. data/_includes/video-link.html +5 -0
  24. data/_includes/video-player.html +12 -10
  25. data/_layouts/default.html +30 -10
  26. data/_layouts/home.html +17 -4
  27. data/_layouts/news.html +26 -8
  28. data/_layouts/policy.html +23 -9
  29. data/_layouts/sidenav.html +28 -9
  30. data/_layouts/sidenavsidebar.html +29 -9
  31. data/assets/css/style.css +1 -4407
  32. data/assets/css/style.css.map +1 -1
  33. data/assets/fonts/notosans-bold-subset.woff +0 -0
  34. data/assets/fonts/notosans-bold-subset.woff2 +0 -0
  35. data/assets/fonts/notosans-bolditalic-subset.woff +0 -0
  36. data/assets/fonts/notosans-bolditalic-subset.woff2 +0 -0
  37. data/assets/fonts/notosans-italic-subset.woff +0 -0
  38. data/assets/fonts/notosans-italic-subset.woff2 +0 -0
  39. data/assets/fonts/notosans-regular-subset.woff +0 -0
  40. data/assets/fonts/notosans-regular-subset.woff2 +0 -0
  41. data/assets/images/icons.svg +36 -1
  42. data/assets/images/social-sharing-default.jpg +0 -0
  43. data/assets/images/video-mask-16-9.svg +1 -0
  44. data/assets/images/video-mask-4-3.svg +1 -0
  45. data/assets/images/video-still-accessibility-intro-16-9.jpg +0 -0
  46. data/assets/scripts/details4everybody.js +153 -0
  47. data/assets/scripts/main.js +279 -64
  48. data/assets/search/tipuesearch.js +608 -0
  49. data/assets/search/tipuesearch_content.js +85 -0
  50. data/assets/search/tipuesearch_set.js +74 -0
  51. metadata +29 -6
  52. data/assets/images/.DS_Store +0 -0
  53. data/assets/images/teaser-image@1x.jpg +0 -0
  54. data/assets/images/teaser-image@2x.jpg +0 -0
data/_layouts/home.html CHANGED
@@ -1,10 +1,23 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" prefix="og: http://ogp.me/ns#">
3
- {% include head.html %}
4
- <body id="top" class="{% include body-class.html %}">
2
+ <html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
3
+ {%- assign timestamp = site.time | date: '%s%N' -%}
4
+ {%- assign timestamp = '?' | append: timestamp -%}
5
+ {% include_cached head.html type="start" timestamp=timestamp %}
6
+ <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
7
+ {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
8
+ {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
9
+ {%- capture seo -%}
10
+ {%- seo title=false -%}
11
+ {%- endcapture -%}
12
+ {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
13
+ {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
14
+ <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
15
+ {%- endunless -%}
16
+ {% include_cached head.html type="end" %}
17
+ <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
5
18
 
6
19
  {% include header.html %}
7
- <main id="main" tabindex="-1">
20
+ <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
8
21
  {{content}}
9
22
  </main>
10
23
 
data/_layouts/news.html CHANGED
@@ -1,18 +1,36 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" prefix="og: http://ogp.me/ns#">
3
- {% include head.html %}
4
- <body id="top" class="{% include body-class.html %}">
2
+ <html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
3
+ {%- assign timestamp = site.time | date: '%s%N' -%}
4
+ {%- assign timestamp = '?' | append: timestamp -%}
5
+ {% include_cached head.html type="start" timestamp=timestamp %}
6
+ <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
7
+ {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
8
+ {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
9
+ {%- capture seo -%}
10
+ {%- seo title=false -%}
11
+ {%- endcapture -%}
12
+ {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
13
+ {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
14
+ <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
15
+ {%- endunless -%}
16
+ {% include_cached head.html type="end" %}
17
+ <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
5
18
  {% include header.html %}
6
19
 
7
- <main id="main" tabindex="-1">
20
+ <main id="main">
8
21
  <div class="grid-five-three">
9
22
  <div class="col12">
10
- <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{page.title_icon}}"></use></svg> {% endif %}{{ page.title }}</h1>
23
+ <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{page.title_icon | relative_url}}"></use></svg> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
11
24
  </div>
12
25
  </div>
13
- {{ content }}
14
- {% include prevnext.html %}
15
- <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
26
+
27
+ {{ content }}
28
+
29
+ <p>({{page.date | date: "%Y-%m-%d"}})</p>
30
+
31
+ {% include prevnext.html %}
32
+
33
+ {% include_cached backtotop.html %}
16
34
  </main>
17
35
 
18
36
  {% include footer.html %}
data/_layouts/policy.html CHANGED
@@ -1,14 +1,27 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" prefix="og: http://ogp.me/ns#">
3
- {% include head.html %}
4
- <body id="top" class="{% include body-class.html %}">
2
+ <html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
3
+ {%- assign timestamp = site.time | date: '%s%N' -%}
4
+ {%- assign timestamp = '?' | append: timestamp -%}
5
+ {% include_cached head.html type="start" timestamp=timestamp %}
6
+ <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
7
+ {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
8
+ {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
9
+ {%- capture seo -%}
10
+ {%- seo title=false -%}
11
+ {%- endcapture -%}
12
+ {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
13
+ {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
14
+ <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
15
+ {%- endunless -%}
16
+ {% include_cached head.html type="end" %}
17
+ <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
5
18
  {% include header.html %}
6
19
 
7
- <main id="main" class="default-grid with-gap leftcol" tabindex="-1">
20
+ <div class="default-grid with-gap leftcol contentarea">
8
21
 
9
22
  {% include sidenav.html %}
10
23
 
11
- <article>
24
+ <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
12
25
  <h1 class="post-title">{% include multilang-title.html title=page.country %}</h1>
13
26
 
14
27
  <div class="post-content">
@@ -61,12 +74,13 @@
61
74
  {% endfor %}
62
75
  </div>
63
76
  {% include prevnext.html %}
64
- </article>
65
- <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
66
77
 
67
- </main>
78
+ {% include_cached backtotop.html %}
79
+ </main>
80
+
81
+ </div>
68
82
 
69
83
  {% include footer.html %}
70
- <style>@import url('{{site.github.url}}/policies/css/policies.css');</style>
84
+ <style>@import url('{{"/policies/css/policies.css" | relative_url }}');</style>
71
85
  </body>
72
86
  </html>
data/_layouts/sidenav.html CHANGED
@@ -1,25 +1,44 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" prefix="og: http://ogp.me/ns#">
3
- {% include head.html %}
4
- <body id="top" class="{% include body-class.html %}">
2
+ <html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
3
+ {%- assign timestamp = site.time | date: '%s%N' -%}
4
+ {%- assign timestamp = '?' | append: timestamp -%}
5
+ {% include_cached head.html type="start" timestamp=timestamp %}
6
+ <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
7
+ {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
8
+ {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
9
+ {%- capture seo -%}
10
+ {%- seo title=false -%}
11
+ {%- endcapture -%}
12
+ {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
13
+ {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
14
+ <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
15
+ {%- endunless -%}
16
+ {% include_cached head.html type="end" %}
17
+ <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
5
18
  {% include header.html %}
6
19
 
7
- <main id="main" class="default-grid with-gap leftcol" tabindex="-1">
20
+ <div class="default-grid with-gap leftcol">
8
21
 
9
22
  {% include sidenav.html %}
10
23
 
11
- <article>
12
- <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{page.title_icon}}"></use></svg> {% endif %}{{ page.title }}</h1>
24
+ <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
25
+ <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{page.title_icon | relative_url}}"></use></svg> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
26
+
27
+ {%- include doc-note-msg.html -%}
28
+
13
29
  {{ content }}
14
30
 
15
31
  {% if page.wcag_success_criteria or page.wcag_techniques %}
16
32
  {% include resources.html %}
17
33
  {% endif %}
18
34
 
35
+ {% include feedback-box.html %}
36
+
19
37
  {% include prevnext.html %}
20
- </article>
21
- <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
22
- </main>
38
+
39
+ {% include_cached backtotop.html %}
40
+ </main>
41
+ </div>
23
42
 
24
43
  {% include footer.html %}
25
44
 
data/_layouts/sidenavsidebar.html CHANGED
@@ -1,20 +1,40 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" prefix="og: http://ogp.me/ns#">
3
- {% include head.html %}
4
- <body id="top" class="{% include body-class.html %}">
2
+ <html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
3
+ {%- assign timestamp = site.time | date: '%s%N' -%}
4
+ {%- assign timestamp = '?' | append: timestamp -%}
5
+ {% include_cached head.html type="start" timestamp=timestamp %}
6
+ <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
7
+ {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif %}
8
+ {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
9
+ {%- capture seo -%}
10
+ {%- seo title=false -%}
11
+ {%- endcapture -%}
12
+ {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
13
+ {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
14
+ <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
15
+ {%- endunless -%}
16
+ {% include_cached head.html type="end" %}
17
+ <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
5
18
  {% include header.html %}
6
19
 
7
- <main id="main" class="default-grid with-gap leftcol" tabindex="-1">
20
+ <div class="default-grid with-gap leftcol" tabindex="-1">
8
21
 
9
22
  {% include sidenav.html %}
10
23
 
11
- <article class="content">
12
- <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{page.title_icon}}"></use></svg> {% endif %}{{ page.title }}</h1>
24
+ <main id="main" class="content"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
25
+ <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{page.title_icon | relative_url}}"></use></svg> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
26
+
27
+ {%- include doc-note-msg.html -%}
28
+
13
29
  {{ content }}
30
+
31
+ {% include feedback-box.html %}
32
+
14
33
  {% include prevnext.html %}
15
- </article>
16
- <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
17
- </main>
34
+
35
+ {% include_cached backtotop.html %}
36
+ </main>
37
+ </div>
18
38
 
19
39
  {% include footer.html %}
20
40
 
data/assets/css/style.css CHANGED
@@ -1,4408 +1,2 @@
1
- .visuallyhidden, .no-display {
2
- border: 0;
3
- clip: rect(0 0 0 0);
4
- -webkit-clip-path: inset(50%);
5
- clip-path: inset(50%);
6
- height: 1px;
7
- margin: -1px;
8
- overflow: hidden;
9
- padding: 0;
10
- position: absolute;
11
- width: 1px;
12
- white-space: nowrap
13
- }
14
-
15
- .visuallyhidden.focusable, .no-display.focusable {
16
- }
17
-
18
- .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus, .no-display.focusable:active, .no-display.focusable:focus {
19
- clip: auto;
20
- -webkit-clip-path: none;
21
- clip-path: none;
22
- height: auto;
23
- margin: 0;
24
- overflow: visible;
25
- position: static;
26
- width: auto;
27
- white-space: inherit
28
- }
29
-
30
- @font-face {
31
- font-family: 'Noto Sans';
32
- src: url('../fonts/notosans-regular.woff2') format('woff2'),
33
- url('../fonts/notosans-regular.woff') format('woff');
34
- font-weight: 400;
35
- font-style: normal;
36
- }
37
-
38
- @font-face {
39
- font-family: 'Noto Sans';
40
- src: url('../fonts/notosans-italic.woff2') format('woff2'),
41
- url('../fonts/notosans-italic.woff') format('woff');
42
- font-weight: 400;
43
- font-style: italic;
44
- }
45
-
46
- @font-face {
47
- font-family: 'Noto Sans';
48
- src: url('../fonts/notosans-bold.woff2') format('woff2'),
49
- url('../fonts/notosans-bold.woff') format('woff');
50
- font-weight: 600;
51
- font-style: normal;
52
- }
53
-
54
- @font-face {
55
- font-family: 'Noto Sans';
56
- src: url('../fonts/notosans-bolditalic.woff2') format('woff2'),
57
- url('../fonts/notosans-bolditalic.woff') format('woff');
58
- font-weight: 600;
59
- font-style: italic;
60
- }
61
-
62
- @font-face {
63
- font-family: 'Anonymous Pro';
64
- src: url('../fonts/anonymouspro-regular.woff2') format('woff2'),
65
- url('../fonts/anonymouspro-regular.woff') format('woff');
66
- font-weight: 400;
67
- font-style: normal;
68
- }
69
-
70
- @font-face {
71
- font-family: 'Anonymous Pro';
72
- src: url('../fonts/anonymouspro-italic.woff2') format('woff2'),
73
- url('../fonts/anonymouspro-italic.woff') format('woff');
74
- font-weight: 400;
75
- font-style: italic;
76
- }
77
-
78
- @font-face {
79
- font-family: 'Anonymous Pro';
80
- src: url('../fonts/anonymouspro-bold.woff2') format('woff2'),
81
- url('../fonts/anonymouspro-bold.woff') format('woff');
82
- font-weight: 600;
83
- font-style: normal;
84
- }
85
-
86
- @font-face {
87
- font-family: 'Anonymous Pro';
88
- src: url('../fonts/anonymouspro-bolditalic.woff2') format('woff2'),
89
- url('../fonts/anonymouspro-bolditalic.woff') format('woff');
90
- font-weight: 600;
91
- font-style: italic;
92
- }
93
-
94
- html {
95
- background-color: #f2f2f2;
96
- }
97
-
98
- body {
99
- font-family: "Noto Sans", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
100
- line-height: 1.5;
101
- font-size: 16px;
102
- font-size: 1rem;
103
- background-color: #FAFAFC;
104
- color: #1d1d1d;
105
- padding: 0;
106
- padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
107
- margin: 0 auto;
108
- max-width: 1250px
109
- }
110
-
111
- @supports (display: grid) {
112
-
113
- body {
114
- max-width: none;
115
- margin: 0
116
- }
117
- }
118
-
119
- code {
120
- font-size: 1em;
121
- font-family: 'Anonymous Pro', monospace;
122
- }
123
-
124
- a {
125
- color: #003366
126
- }
127
-
128
- a:hover,
129
- a:focus {
130
- color: #005A6A
131
- }
132
-
133
- a:visited {
134
- color: #660066
135
- }
136
-
137
- a.stealthy-link {
138
- text-decoration: none
139
- }
140
-
141
- a.stealthy-link:hover,
142
- a.stealthy-link:focus {
143
- color: inherit
144
- }
145
-
146
- a.stealthy-link:visited {
147
- color: inherit
148
- }
149
-
150
- .default-container, .default-grid {
151
- padding: 0 32px
152
- }
153
-
154
- @media (min-width: 35em) {
155
-
156
- .default-container, .default-grid {
157
- padding: 0
158
- }
159
- }
160
-
161
- .default-grid {
162
- }
163
-
164
- @media (min-width: 60em) {
165
-
166
- .default-grid {
167
- display: -webkit-box;
168
- display: -ms-flexbox;
169
- display: flex;
170
- padding-left: 32px;
171
- padding-right: 32px;
172
- grid-template-columns: [complete-start] minmax(16px, 1fr) [navigation-start] repeat(2, minmax(0, 130px)) [navigation-end content-start] repeat(6, minmax(0, 130px)) [content-end] minmax(16px, 1fr) [complete-end]
173
- }
174
-
175
- @supports (display: grid) {
176
-
177
- .default-grid {
178
- display: grid;
179
- grid-column-gap: 32px;
180
- padding: 0;
181
- max-width: none
182
- }
183
- }
184
-
185
- .default-grid .inner {
186
- grid-column-start: navigation-start;
187
- grid-column-end: content-end
188
- }
189
- }
190
-
191
- .grid-4 {
192
- }
193
-
194
- @media (min-width: 60em) {
195
-
196
- .grid-4 {
197
- grid-template-columns: repeat(4, minmax(0, 1fr))
198
- }
199
-
200
- @supports (display: grid) {
201
-
202
- .grid-4 {
203
- display: grid;
204
- grid-column-gap: 32px;
205
- padding: 0;
206
- max-width: none
207
- }
208
- }
209
-
210
- .grid-4.nogap {
211
- grid-column-gap: 0
212
- }
213
- }
214
-
215
- .grid-4 .col1, .grid-4 .from-col1 {
216
- grid-column-start: 1
217
- }
218
-
219
- .grid-4 .col1, .grid-4 .to-col1 {
220
- grid-column-end: 2
221
- }
222
-
223
- .grid-4 .col2, .grid-4 .from-col2 {
224
- grid-column-start: 2
225
- }
226
-
227
- .grid-4 .col2, .grid-4 .to-col2 {
228
- grid-column-end: 3
229
- }
230
-
231
- .grid-4 .col3, .grid-4 .from-col3 {
232
- grid-column-start: 3
233
- }
234
-
235
- .grid-4 .col3, .grid-4 .to-col3 {
236
- grid-column-end: 4
237
- }
238
-
239
- .grid-4 .col4, .grid-4 .from-col4 {
240
- grid-column-start: 4
241
- }
242
-
243
- .grid-4 .col4, .grid-4 .to-col4 {
244
- grid-column-end: 5
245
- }
246
-
247
- .grid-6 {
248
- }
249
-
250
- @media (min-width: 60em) {
251
-
252
- .grid-6 {
253
- grid-template-columns: repeat(6, minmax(0, 1fr))
254
- }
255
-
256
- @supports (display: grid) {
257
-
258
- .grid-6 {
259
- display: grid;
260
- grid-column-gap: 32px;
261
- padding: 0;
262
- max-width: none
263
- }
264
- }
265
- }
266
-
267
- .grid-6 .col1, .grid-6 .from-col1 {
268
- grid-column-start: 1
269
- }
270
-
271
- .grid-6 .col1, .grid-6 .to-col1 {
272
- grid-column-end: 2
273
- }
274
-
275
- .grid-6 .col2, .grid-6 .from-col2 {
276
- grid-column-start: 2
277
- }
278
-
279
- .grid-6 .col2, .grid-6 .to-col2 {
280
- grid-column-end: 3
281
- }
282
-
283
- .grid-6 .col3, .grid-6 .from-col3 {
284
- grid-column-start: 3
285
- }
286
-
287
- .grid-6 .col3, .grid-6 .to-col3 {
288
- grid-column-end: 4
289
- }
290
-
291
- .grid-6 .col4, .grid-6 .from-col4 {
292
- grid-column-start: 4
293
- }
294
-
295
- .grid-6 .col4, .grid-6 .to-col4 {
296
- grid-column-end: 5
297
- }
298
-
299
- .grid-6 .col5, .grid-6 .from-col5 {
300
- grid-column-start: 5
301
- }
302
-
303
- .grid-6 .col5, .grid-6 .to-col5 {
304
- grid-column-end: 6
305
- }
306
-
307
- .grid-6 .col6, .grid-6 .from-col6 {
308
- grid-column-start: 6
309
- }
310
-
311
- .grid-6 .col6, .grid-6 .to-col6 {
312
- grid-column-end: 7
313
- }
314
-
315
- .grid-three-five {
316
- display: -webkit-box;
317
- display: -ms-flexbox;
318
- display: flex;
319
- padding-left: 32px;
320
- padding-right: 32px;
321
- grid-template-columns: [complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]
322
- }
323
-
324
- @supports (display: grid) {
325
-
326
- .grid-three-five {
327
- display: grid;
328
- grid-column-gap: 32px;
329
- padding: 0;
330
- max-width: none
331
- }
332
- }
333
-
334
- @media (min-width: 35em) {
335
-
336
- .grid-three-five {
337
- grid-template-columns: [complete-start] minmax(16px, 1fr) [three-start] repeat(3, minmax(0, 130px)) [three-end five-start] repeat(5, minmax(0, 130px)) [five-end] minmax(16px, 1fr) [complete-end]
338
- }
339
- }
340
-
341
- .grid-three-five .col1, .grid-three-five .col2 {
342
- -ms-flex-negative: 1;
343
- flex-shrink: 1
344
- }
345
-
346
- .grid-three-five .col1 {
347
- -ms-flex-preferred-size: 35%;
348
- flex-basis: 35%;
349
- grid-column-start: three-start;
350
- grid-column-end: three-end;
351
- margin-right: 32px
352
- }
353
-
354
- @supports (display: grid) {
355
-
356
- .grid-three-five .col1 {
357
- margin-right: 0
358
- }
359
- }
360
-
361
- .grid-three-five .col2 {
362
- -ms-flex-preferred-size: 61%;
363
- flex-basis: 61%;
364
- grid-column-start: five-start;
365
- grid-column-end: five-end
366
- }
367
-
368
- .grid-three-five .col12 {
369
- -ms-flex-preferred-size: 100%;
370
- flex-basis: 100%;
371
- grid-column-start: three-start;
372
- grid-column-end: five-end
373
- }
374
-
375
- .grid-five-three {
376
- display: -webkit-box;
377
- display: -ms-flexbox;
378
- display: flex;
379
- padding-left: 32px;
380
- padding-right: 32px;
381
- grid-template-columns: [complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]
382
- }
383
-
384
- @supports (display: grid) {
385
-
386
- .grid-five-three {
387
- display: grid;
388
- grid-column-gap: 32px;
389
- padding: 0;
390
- max-width: none
391
- }
392
- }
393
-
394
- @media (min-width: 35em) {
395
-
396
- .grid-five-three {
397
- grid-template-columns: [complete-start] minmax(16px, 1fr) [five-start] repeat(5, minmax(0, 130px)) [five-end three-start] repeat(3, minmax(0, 130px)) [three-end] minmax(16px, 1fr) [complete-end]
398
- }
399
- }
400
-
401
- .grid-five-three .col1, .grid-five-three .col2 {
402
- -ms-flex-negative: 1;
403
- flex-shrink: 1
404
- }
405
-
406
- .grid-five-three .col1 {
407
- -webkit-box-flex: 1;
408
- -ms-flex: 1 1 62%;
409
- flex: 1 1 62%;
410
- grid-column-start: five-start;
411
- grid-column-end: five-end;
412
- margin-right: 32px
413
- }
414
-
415
- @supports (display: grid) {
416
-
417
- .grid-five-three .col1 {
418
- margin-right: 0
419
- }
420
- }
421
-
422
- .grid-five-three .col2 {
423
- -webkit-box-flex: 1;
424
- -ms-flex: 1 1 37%;
425
- flex: 1 1 37%;
426
- grid-column-start: three-start;
427
- grid-column-end: three-end
428
- }
429
-
430
- .grid-five-three .col12 {
431
- -ms-flex-preferred-size: 100%;
432
- flex-basis: 100%;
433
- grid-column-start: five-start;
434
- grid-column-end: three-end
435
- }
436
-
437
- .grid-4q {
438
- display: -webkit-box;
439
- display: -ms-flexbox;
440
- display: flex;
441
- padding-left: 32px;
442
- padding-right: 32px;
443
- grid-template-columns: [complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end]
444
- }
445
-
446
- @supports (display: grid) {
447
-
448
- .grid-4q {
449
- display: grid;
450
- grid-column-gap: 32px;
451
- padding: 0;
452
- max-width: none
453
- }
454
- }
455
-
456
- @media (min-width: 60em) {
457
-
458
- .grid-4q {
459
- grid-template-columns: [complete-start] minmax(16px, 1fr) [content-start q1-start] repeat(2, minmax(0, 130px)) [q1-end q2-start] repeat(2, minmax(0, 130px)) [q2-end q3-start] repeat(2, minmax(0, 130px)) [q3-end q4-start] repeat(2, minmax(0, 130px)) [q4-end content-end] minmax(16px, 1fr) [complete-end]
460
- }
461
- }
462
-
463
- .grid-4q.nogap {
464
- grid-template-columns: [complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end];
465
- grid-column-gap: 0
466
- }
467
-
468
- @media (min-width: 60em) {
469
-
470
- .grid-4q.nogap {
471
- grid-template-columns: [complete-start] minmax(16px, 1fr) [content-start q1-start] repeat(2, minmax(0, 158px)) [q1-end q2-start] repeat(2, minmax(0, 158px)) [q2-end q3-start] repeat(2, minmax(0, 158px)) [q3-end q4-start] repeat(2, minmax(0, 158px)) [q4-end content-end] minmax(16px, 1fr) [complete-end]
472
- }
473
- }
474
-
475
- .grid-4q .q1-start {
476
- -ms-flex-preferred-size: 25%;
477
- flex-basis: 25%;
478
- -ms-flex-negative: 1;
479
- flex-shrink: 1;
480
- margin-right: 32px;
481
- grid-column-start: q1-start
482
- }
483
-
484
- .grid-4q .q2-start {
485
- -ms-flex-preferred-size: 25%;
486
- flex-basis: 25%;
487
- -ms-flex-negative: 1;
488
- flex-shrink: 1;
489
- margin-right: 32px;
490
- grid-column-start: q2-start
491
- }
492
-
493
- .grid-4q .q3-start {
494
- -ms-flex-preferred-size: 25%;
495
- flex-basis: 25%;
496
- -ms-flex-negative: 1;
497
- flex-shrink: 1;
498
- margin-right: 32px;
499
- grid-column-start: q3-start
500
- }
501
-
502
- .grid-4q .q4-start {
503
- -ms-flex-preferred-size: 25%;
504
- flex-basis: 25%;
505
- -ms-flex-negative: 1;
506
- flex-shrink: 1;
507
- margin-right: 32px;
508
- grid-column-start: q4-start
509
- }
510
-
511
- .grid-4q .q1-end {
512
- grid-column-end: q1-end
513
- }
514
-
515
- .grid-4q .q2-end {
516
- grid-column-end: q2-end
517
- }
518
-
519
- .grid-4q .q3-end {
520
- grid-column-end: q3-end
521
- }
522
-
523
- .grid-4q .q4-end {
524
- grid-column-end: q4-end;
525
- margin-right: 0
526
- }
527
-
528
- .grid-4q .q1-start.q2-end,
529
- .grid-4q .q2-start.q3-end,
530
- .grid-4q .q3-start.q4-end {
531
- -ms-flex-preferred-size: 50%;
532
- flex-basis: 50%
533
- }
534
-
535
- .grid-4q .q1-start.q3-end,
536
- .grid-4q .q2-start.q4-end {
537
- -ms-flex-preferred-size: 75%;
538
- flex-basis: 75%
539
- }
540
-
541
- .grid-4q.nogap {
542
- }
543
-
544
- .grid-4q.nogap .q1-start,
545
- .grid-4q.nogap .q2-start,
546
- .grid-4q.nogap .q3-start,
547
- .grid-4q.nogap .q4-start {
548
- margin-right: 0
549
- }
550
-
551
- @supports(display: grid) {
552
-
553
- .grid-4q {
554
- }
555
-
556
- .grid-4q .q1-start,
557
- .grid-4q .q2-start,
558
- .grid-4q .q3-start,
559
- .grid-4q .q4-start {
560
- margin-right: 0
561
- }
562
- }
563
-
564
- .leftcol {
565
- }
566
-
567
- .leftcol article {
568
- grid-area: content
569
- }
570
-
571
- .grid-line-right {
572
- }
573
-
574
- @media (min-width: 35em) {
575
-
576
- .grid-line-right {
577
- border-right: 1px solid #ddd;
578
- margin-right: -17px;
579
- padding-right: 17px
580
- }
581
- }
582
-
583
- .grid-line-left {
584
- }
585
-
586
- @media (min-width: 35em) {
587
-
588
- .grid-line-left {
589
- border-left: 1px solid #ddd;
590
- margin-left: -16px;
591
- padding-left: 16px
592
- }
593
- }
594
-
595
- .media-wrapper, .able-media-container {
596
- position: relative;
597
- padding-top: 56.25%
598
- }
599
-
600
- .media-wrapper iframe, .media-wrapper video, .media-wrapper .img, .able-media-container iframe, .able-media-container video, .able-media-container .img {
601
- position: absolute;
602
- top: 0;
603
- right: 0;
604
- bottom: 0;
605
- left: 0;
606
- width: 100%;
607
- height: 100%
608
- }
609
-
610
- #main {
611
- position: relative;
612
- }
613
-
614
- img.symbol {
615
- float: right;
616
- margin-left: 1em;
617
- margin-bottom: 1em;
618
- }
619
-
620
- #main img { max-width: 100%; }
621
-
622
- figure { margin: 0 0 1em; }
623
-
624
- figcaption { font-weight: bold; border-bottom: 1px solid #ddd; margin-bottom: .5em;}
625
-
626
- blockquote {
627
- font-style: italic;
628
- margin-bottom: 1em
629
- }
630
-
631
- blockquote cite {
632
- display: block;
633
- margin-top: .55em;
634
- font-style: normal
635
- /*color: var(--w3c-blue);*/
636
- }
637
-
638
- blockquote cite:before {
639
- content: "— ";
640
- font-weight: bold
641
- }
642
-
643
- blockquote p:first-of-type::before {
644
- content: '“';
645
- margin-left: -.75ch
646
- }
647
-
648
- blockquote p:last-of-type::after {
649
- content: '”'
650
- }
651
-
652
- blockquote.special {
653
- text-align: center
654
- }
655
-
656
- button, .button {
657
- border-radius: 5px;
658
- display: inline-block;
659
- display: -webkit-inline-box;
660
- display: -ms-inline-flexbox;
661
- display: inline-flex;
662
- -webkit-box-align: center;
663
- -ms-flex-align: center;
664
- align-items: center;
665
- -webkit-box-pack: center;
666
- -ms-flex-pack: center;
667
- justify-content: center;
668
- padding: 8px 12px;
669
- border: 2px solid #005A6A;;
670
- font-size: 13px;;
671
- font-size: .8125rem;
672
- line-height: 1.4;
673
- color: #ffffff;
674
- background-color: #005A6A;
675
- text-decoration: none;
676
- font-weight: bold
677
- }
678
-
679
- button:visited, .button:visited {
680
- color: #ffffff
681
- }
682
-
683
- button.button-nobg, .button.button-nobg {
684
- background: transparent
685
- }
686
-
687
- button.button-nobg:hover,
688
- button.button-nobg:focus,
689
- .button.button-nobg:hover,
690
- .button.button-nobg:focus {
691
- background-color: transparent;
692
- border-color: #fff
693
- }
694
-
695
- button.button-noborder, .button.button-noborder {
696
- border-color: transparent
697
- }
698
-
699
- button.button-noborder:hover,
700
- button.button-noborder:focus,
701
- .button.button-noborder:hover,
702
- .button.button-noborder:focus {
703
- border-color: #fff
704
- }
705
-
706
- .stealthy-link:hover,
707
- .stealthy-link:focus {
708
- }
709
-
710
- .stealthy-link:hover span.button,
711
- .stealthy-link:focus span.button {
712
- background-color: #003366;
713
- color: #ffffff
714
- }
715
-
716
- button, .button {
717
- }
718
-
719
- button:hover,
720
- button:focus,
721
- .button:hover,
722
- .button:focus {
723
- border-color: #003366;
724
- background-color: #003366;
725
- color: #ffffff
726
- }
727
-
728
- button:disabled, .button:disabled {
729
- opacity: .75
730
- }
731
-
732
- .button-secondary {
733
- background-color: #ffffff;
734
- color: #005A6A;
735
- }
736
-
737
- .button-backtotop {
738
- position: fixed;
739
- /*position: sticky;*/
740
- bottom: 16px;
741
- right: 16px;
742
- opacity: 0.85;
743
- border-radius: 100px;
744
- background-color: #003366;
745
- border-color: #003366;
746
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
747
- opacity: 0;
748
- transition: opacity .5s linear
749
- }
750
-
751
- .button-backtotop:focus,.button-backtotop.active {
752
- opacity: 1
753
- }
754
-
755
- .button-backtotop svg {
756
- vertical-align: -1px
757
- }
758
-
759
- .button-group {
760
- display: -webkit-box;
761
- display: -ms-flexbox;
762
- display: flex;
763
- -ms-flex-wrap: wrap;
764
- flex-wrap: wrap;
765
- margin: 0 -8px
766
- }
767
-
768
- .button-group button, .button-group .button {
769
- min-width: 7em;
770
- -webkit-box-flex: 1;
771
- -ms-flex: 1;
772
- flex: 1;
773
- text-align: center;
774
- margin: 8px
775
- }
776
-
777
- img {
778
- }
779
-
780
- img.left {
781
- float: left;
782
- margin-right: 1em
783
- }
784
-
785
- img.right {
786
- clear: right;
787
- float: right;
788
- margin-left: 1em
789
- }
790
-
791
- table, caption {
792
- text-align: left;
793
- }
794
-
795
- table {
796
- border: 1px solid #ddd;
797
- border-collapse: collapse;
798
- margin-bottom: 2em;
799
- }
800
-
801
- caption {
802
- font-weight: bold;
803
- font-size: 18px;
804
- font-size: 1.125rem;
805
- color: #005A6A;
806
- line-height: 1.4;
807
- margin-bottom: 8px;
808
- }
809
-
810
- th, td {
811
- padding: 12px 18px;
812
- border: 1px solid #ddd;
813
- vertical-align: top;
814
- }
815
-
816
- th {
817
- font-weight: bold;
818
- color: #ffffff;
819
- background-color: #005A6A;
820
- }
821
-
822
- th, td {
823
- }
824
-
825
- th > :first-child, td > :first-child {
826
- margin-top: 0
827
- }
828
-
829
- th > :last-child, td > :last-child {
830
- margin-top: 0
831
- }
832
-
833
- .box {
834
- border: solid 1px #ddd;
835
- margin-bottom: 16px;
836
- background-color: #ffffff;
837
- }
838
-
839
- .box-h {
840
- padding: 8px 16px;
841
- color: #005A6A;
842
- font-weight: bold;
843
- background-color: #f2f2f2
844
- }
845
-
846
- .box-h h1, .box-h h2, .box-h h3, .box-h h4, .box-h h5, .box-h h6 {
847
- all: unset
848
- }
849
-
850
- .box-h-large {
851
- font-size: 20px;
852
- font-size: 1.25rem;
853
- color: #003366;
854
- padding-bottom: 7px;
855
- font-weight: normal;
856
- border-bottom: solid 1px #ddd;
857
- }
858
-
859
- .box-h-icon {
860
- }
861
-
862
- .box-h-icon svg {
863
- margin-right: 4px
864
- }
865
-
866
- .box-i {
867
- padding: 8px 16px;
868
- font-size: 14/16 * 16px;
869
- font-size: 14/16 * 1rem
870
- }
871
-
872
- .box-i:before, .box-i:after {
873
- content: " ";
874
- display: table
875
- }
876
-
877
- .box-i:after {
878
- clear: both
879
- }
880
-
881
- .box-i > :first-child {
882
- margin-top: 0
883
- }
884
-
885
- .box-i > :last-child {
886
- margin-bottom: 0
887
- }
888
-
889
- .box.box-list {
890
- }
891
-
892
- .box.box-list .box-i {
893
- }
894
-
895
- .box.box-list .box-i ul, .box.box-list .box-i ol {
896
- margin: 0;
897
- padding: 0;
898
- list-style: none
899
- }
900
-
901
- .box.box-linklist {
902
- }
903
-
904
- .box.box-linklist .box-i {
905
- padding: 0
906
- }
907
-
908
- .box.box-simple {
909
- }
910
-
911
- .box.box-simple .box-i {
912
- padding: 2px 8px 8px
913
- }
914
-
915
- .box.box-simple .box-h-simple {
916
- padding: 8px 8px 2px;
917
- background-color: transparent;
918
- font-size: 14px;
919
- font-size: .875rem;
920
- line-height: 1.57
921
- }
922
-
923
- .box.box-simple.box-aside .box-i {
924
- font-size: 14px;
925
- font-size: .875rem;
926
- }
927
-
928
- @media (min-width: 35em) {
929
- .box {
930
- }
931
- .box.box-left, .box.box-right {
932
- width: 25%
933
- }
934
- .box.box-left {
935
- clear: left;
936
- float: left;
937
- margin-right: 1em
938
- }
939
- .box.box-right {
940
- clear: right;
941
- float: right;
942
- margin-left: 1em
943
- }
944
- }
945
-
946
- .breadcrumb {
947
- font-size: 13px;
948
- font-size: .8125rem;
949
- background-color: #ffffff;
950
- border-bottom: 1px solid #ddd;
951
- padding: 16px 0;
952
- margin-bottom: 32px
953
- }
954
-
955
- .breadcrumb ul {
956
- margin: 0;
957
- padding: 0;
958
- grid-column: 2/7
959
- }
960
-
961
- .breadcrumb ul li {
962
- display: inline-block;
963
- margin: 0;
964
- padding: 0
965
- }
966
-
967
- .breadcrumb ul li:after {
968
- content: " / ";
969
- color: #005A6A
970
- }
971
-
972
- .breadcrumb ul li:last-child:after {
973
- content: "";
974
- display: none
975
- }
976
-
977
- .breadcrumb a {
978
- color: #003366
979
- }
980
-
981
- .breadcrumb [aria-current=page] {
982
- font-weight: bold;
983
- text-decoration: none
984
- }
985
-
986
- .content {
987
- display: grid;
988
- grid-area: content;
989
- grid-template-columns: repeat(6, minmax(0, 120px));
990
- grid-column-gap: 32px;
991
- & > .ref-side, > & .demo-side, > & .aside {
992
- grid-column: 5/7;
993
- font-size: 14px;
994
- font-size: .875rem;
995
- line-height: 1.2
996
- }
997
- & > .ref-side p:first-of-type, > & .demo-side p:first-of-type, > & .aside p:first-of-type {
998
- margin-top: 0
999
- }
1000
- }
1001
-
1002
- .content > * {
1003
- grid-column: 1/5;
1004
- grid-auto-flow: dense
1005
- }
1006
-
1007
- .content.wide {
1008
- grid-template-columns: repeat(8, minmax(0, 120px));
1009
- grid-column-start: navigation;
1010
- grid-column-end: content
1011
- }
1012
-
1013
- .content.wide > * {
1014
- grid-column: 3/9
1015
- }
1016
-
1017
- .content.wide .sn-contents {
1018
- grid-column: 1/3;
1019
- grid-row: 1/99
1020
- }
1021
-
1022
- .example-bar {
1023
- grid-template-columns: repeat(6, minmax(0, 1fr))
1024
- }
1025
-
1026
- @supports (display: grid) {
1027
-
1028
- .example-bar {
1029
- display: grid;
1030
- grid-column-gap: 32px;
1031
- padding: 0;
1032
- max-width: none
1033
- }
1034
- }
1035
-
1036
- .example-bar > * {
1037
- grid-column: 2/7
1038
- }
1039
-
1040
- .example-bar .eg {
1041
- grid-column: 1/2;
1042
- grid-row: 1/99;
1043
- text-align: right;
1044
- border-right: 2px solid #005A6A;
1045
- padding: 0 8px;
1046
- font-weight: bold;
1047
- font-style: italic;
1048
- color: #005A6A
1049
- }
1050
-
1051
- .example-sheet {
1052
- grid-template-columns: repeat(6, minmax(0, 1fr))
1053
- }
1054
-
1055
- @supports (display: grid) {
1056
-
1057
- .example-sheet {
1058
- display: grid;
1059
- grid-column-gap: 32px;
1060
- padding: 0;
1061
- max-width: none
1062
- }
1063
- }
1064
-
1065
- .example-sheet .example-sheet-inner {
1066
- grid-column: 2/6;
1067
- background-color: #ffffff;
1068
- padding: 16px 32px
1069
- }
1070
-
1071
- .decision-tree {
1072
- list-style: none;
1073
- margin: 1em 0;
1074
- padding:0
1075
- }
1076
-
1077
- .decision-tree > li {
1078
- /*border: 2px solid #999;
1079
- border-top:none;*/
1080
- }
1081
-
1082
- .decision-tree > li > strong {
1083
- display: block;
1084
- padding: 1em .5em
1085
- }
1086
-
1087
- .decision-tree > li:first-child {
1088
- /*border-top:2px solid #999;*/
1089
- }
1090
-
1091
- .decision-tree > li > ul {
1092
- padding: 0;
1093
- list-style: none
1094
- /*border-top: 1px dotted #aaa;*/
1095
- }
1096
-
1097
- @supports ((display: -webkit-box) or (display: flex)) {
1098
-
1099
- .decision-tree > li > ul {
1100
- display: -webkit-box;
1101
- display: -ms-flexbox;
1102
- display: flex;
1103
- -webkit-box-orient: horizontal;
1104
- -webkit-box-direction: reverse;
1105
- -ms-flex-direction: row-reverse;
1106
- flex-direction: row-reverse;
1107
- -ms-flex-wrap: wrap;
1108
- flex-wrap: wrap;
1109
- -webkit-box-align: stretch;
1110
- -ms-flex-align: stretch;
1111
- align-items: stretch
1112
- }
1113
- }
1114
-
1115
- .decision-tree > li > ul > li {
1116
- text-indent: 0;
1117
- box-sizing: border-box;
1118
- font-weight: normal;
1119
- padding: .5em;
1120
- //: 1px solid #aaa
1121
- }
1122
-
1123
- @supports ((display: -webkit-box) or (display: flex)) {
1124
-
1125
- .decision-tree > li > ul > li {
1126
- -ms-flex-preferred-size: 25%;
1127
- flex-basis: 25%
1128
- }
1129
- }
1130
-
1131
- .decision-tree > li > ul > li:nth-child(odd) {
1132
- }
1133
-
1134
- @supports ((display: -webkit-box) or (display: flex)) {
1135
-
1136
- .decision-tree > li > ul > li:nth-child(odd) {
1137
- -ms-flex-preferred-size: 75%;
1138
- flex-basis: 75%
1139
- }
1140
- }
1141
-
1142
- .decision-tree > li > ul > li:nth-child(odd):last-child {
1143
- display: block;
1144
- -ms-flex-preferred-size: 100%;
1145
- flex-basis: 100%
1146
- }
1147
-
1148
- .decision-tree > li > ul > li ul {
1149
- padding: 0;
1150
- margin: 0
1151
- }
1152
-
1153
- .decision-tree > li > ul > li li {
1154
- padding: 0;
1155
- padding-bottom: 0.5em;
1156
- margin-bottom: 0.5em;
1157
- border-bottom: 1px solid #3b3b3b;
1158
- list-style: none
1159
- }
1160
-
1161
- .decision-tree > li > ul > li li > em {
1162
- display: block;
1163
- padding-left: 1.5em;
1164
- position: relative;
1165
- margin-top: .25em;
1166
- font-style: normal
1167
- }
1168
-
1169
- .decision-tree > li > ul > li li > em:before {
1170
- position: absolute;
1171
- content: '';
1172
- top: .2em;
1173
- margin-left: -1.5em
1174
- }
1175
-
1176
- .decision-tree > li > ul > li li:last-child {
1177
- border-bottom-style: none;
1178
- padding-bottom: 0;
1179
- margin-bottom: 0
1180
- }
1181
-
1182
- .decision-tree .yes {
1183
- background-color: rgb(229, 242, 255);
1184
- border-bottom: none
1185
- }
1186
-
1187
- .decision-tree .yes li {
1188
- list-style: disc;
1189
- margin-left: 1em
1190
- }
1191
-
1192
- .decision-tree .yes li:only-child {
1193
- list-style: none
1194
- }
1195
-
1196
- .decision-tree .no {
1197
- /*border-right:1px dotted #aaa;*/
1198
- background-color: rgb(242, 192, 193);
1199
- border-bottom: none;
1200
- position: relative
1201
- /*&:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(119, 119, 119, 0); border-top-color: #999; border-width: 1.1rem; margin-left: -.6rem; z-index: 400; }*/
1202
- }
1203
-
1204
- .decision-tree .no:after {
1205
- top: 100%;
1206
- left: 50%;
1207
- border: solid transparent;
1208
- content: " ";
1209
- height: 0;
1210
- width: 0;
1211
- position: absolute;
1212
- pointer-events: none;
1213
- border-color: rgba(119, 119, 119, 0);
1214
- border-top-color: rgb(242, 192, 193);
1215
- border-width: 16px;
1216
- border-width: 1rem;
1217
- margin-left: -8px;
1218
- margin-left: -.5rem;
1219
- z-index: 500
1220
- }
1221
-
1222
- details {
1223
- padding-left: 32px;
1224
- padding-left: 2rem;
1225
- }
1226
-
1227
- summary {
1228
- display: block;
1229
- margin-left: -32px;
1230
- margin-left: -2rem;
1231
- }
1232
-
1233
- summary > * {
1234
- /*display: inline;*/
1235
- }
1236
-
1237
- summary::-webkit-details-marker {
1238
- display: none;
1239
- }
1240
-
1241
- summary > *:first-child::before {
1242
- content: '+';
1243
- margin-right: 8px;
1244
- margin-right: 0.5rem;
1245
- margin-bottom: 4px;
1246
- margin-bottom: .25rem;
1247
- display: inline-block;
1248
- border-radius: 5px;
1249
- width: 24px;
1250
- width: 1.5rem;
1251
- height: 24px;
1252
- height: 1.5rem;
1253
- background: #036;
1254
- color: #fff;
1255
- text-align: center;
1256
- font-weight: bold;
1257
- }
1258
-
1259
- details[open] > summary > *:first-child::before {
1260
- content: '–';
1261
- }
1262
-
1263
- details > div::after {
1264
- content: "";
1265
- display: block;
1266
- clear: both;
1267
- }
1268
-
1269
- .page-footer, .site-footer {
1270
- font-size: 12px;
1271
- font-size: .75rem;
1272
- padding-top: 16px;
1273
- padding-bottom: 16px
1274
- }
1275
-
1276
- .page-footer p:first-of-type, .site-footer p:first-of-type {
1277
- margin-top: 0
1278
- }
1279
-
1280
- .page-footer p:last-of-type, .site-footer p:last-of-type {
1281
- margin-bottom: 0
1282
- }
1283
-
1284
- .page-footer {
1285
- margin-top: 32px;
1286
- background-color: #efefef;
1287
- }
1288
-
1289
- .site-footer {
1290
- padding-top: 16px;
1291
- padding-bottom: 16px;
1292
- background-color: #3b3b3b;
1293
- color: #ffffff
1294
- }
1295
-
1296
- .site-footer a {
1297
- color: #ffffff
1298
- }
1299
-
1300
- .site-footer a.largelink {
1301
- color: #eed009;
1302
- font-size: 20px;
1303
- font-size: 1.25rem;
1304
- text-decoration: none
1305
- }
1306
-
1307
- .site-footer a.largelink:hover, .site-footer a.largelink:focus {
1308
- text-decoration: underline
1309
- }
1310
-
1311
- .site-footer .footer-list-header {
1312
- font-weight: bold;
1313
- border-bottom: 1px solid rgba(221, 221, 221, .32);
1314
- padding: 4px 0
1315
- }
1316
-
1317
- .site-footer ul {
1318
- margin: 0;
1319
- padding: 0;
1320
- }
1321
-
1322
- .site-footer ul li {
1323
- list-style:none;
1324
- padding: 4px 0;
1325
- }
1326
-
1327
- #site-header {
1328
- background-color: #003366;
1329
- color: #fff
1330
- }
1331
-
1332
- @supports (display: grid) {
1333
-
1334
- #site-header {
1335
- padding-left: 8px;
1336
- padding-right: 8px
1337
- }
1338
- }
1339
-
1340
- #site-header a {
1341
- color: #fff
1342
- }
1343
-
1344
- .wai {
1345
- line-height: 1.2
1346
- }
1347
-
1348
- @media (min-width: 35em) {
1349
-
1350
- .wai {
1351
- vertical-align: middle;
1352
- /*display: block;*/
1353
- font-size: 1.5625rem
1354
- }
1355
- }
1356
-
1357
- .logos {
1358
- padding: 16px 0;
1359
- grid-column-start: 2;
1360
- grid-column-end: 5;
1361
- grid-row-start: 1;
1362
- margin-right: 32px;
1363
- text-decoration: none;
1364
- transition: color .5s ease-in .1s
1365
- }
1366
-
1367
- @supports (display: grid) {
1368
-
1369
- .logos {
1370
- margin-right: 0
1371
- }
1372
- }
1373
-
1374
- .logos img {
1375
- vertical-align: middle;
1376
- padding-right: 8px;
1377
- margin-bottom: 8px;
1378
- color: inherit;
1379
- fill: inherit
1380
- }
1381
-
1382
- .logos:hover,
1383
- .logos:focus {
1384
- text-decoration: underline;
1385
- color: #eed009 !important
1386
- }
1387
-
1388
- h1, h2, h3, h4, h5, h6 {
1389
- padding: 0;
1390
- margin: 40px 0 20px;
1391
- }
1392
-
1393
- h1 {
1394
- font-size: 38px;
1395
- font-size: 2.375rem;
1396
- color: #005A6A;
1397
- line-height: 1.2;
1398
- font-weight: normal;
1399
- margin-top: 0;
1400
- }
1401
-
1402
- h2 {
1403
- font-size: 22px;
1404
- font-size: 1.375rem;
1405
- color: #005A6A;
1406
- line-height: 1.2;
1407
- font-weight: bold;
1408
- border-bottom: 1px solid #ddd;
1409
- }
1410
-
1411
- h3, h4 {
1412
- font-size: 18px;
1413
- font-size: 1.125rem;
1414
- color: #005A6A;
1415
- line-height: 1.4;
1416
- }
1417
-
1418
- h4 {
1419
- font-weight: normal;
1420
- }
1421
-
1422
- h5 {
1423
- font-weight: bold;
1424
- line-height: 1.6;
1425
- }
1426
-
1427
- h6 {
1428
- font-size: 14px;
1429
- font-size:.875rem;
1430
- line-height: 1.8;
1431
- }
1432
-
1433
- h1, h2, h3, h4, h5, h6 {
1434
- }
1435
-
1436
- h1.ex:before, h1.ap:before, h1 b, h2.ex:before, h2.ap:before, h2 b, h3.ex:before, h3.ap:before, h3 b, h4.ex:before, h4.ap:before, h4 b, h5.ex:before, h5.ap:before, h5 b, h6.ex:before, h6.ap:before, h6 b {
1437
- color: #003366 !important;
1438
- font-weight: bold
1439
- }
1440
-
1441
- .no-js {
1442
- }
1443
-
1444
- .no-js .ex {
1445
- counter-increment: examples;
1446
- counter-reset: approaches
1447
- }
1448
-
1449
- .no-js .ex:before {
1450
- content: 'Example ' counter(examples) ': '
1451
- }
1452
-
1453
- .no-js .ex.inap {
1454
- counter-reset: none
1455
- }
1456
-
1457
- .no-js .newap {
1458
- counter-reset: approaches
1459
- }
1460
-
1461
- .no-js .newex {
1462
- counter-reset: examples
1463
- }
1464
-
1465
- .no-js h2.first, .no-js h3.first, .no-js .newexap {
1466
- counter-reset: examples approaches
1467
- }
1468
-
1469
- .no-js .ap {
1470
- counter-increment: approaches
1471
- }
1472
-
1473
- .no-js .ap:before {
1474
- content: 'Approach ' counter(approaches) ': '
1475
- }
1476
-
1477
- [class^="icon-"], [class*=" icon-"] {
1478
- display: inline-block;
1479
- width: 1em;
1480
- height: 1em;
1481
- stroke-width: 0;
1482
- stroke: currentColor;
1483
- fill: currentColor;
1484
- }
1485
-
1486
- /* ==========================================
1487
- Single-colored icons can be modified like so:
1488
- .icon-name {
1489
- font-size: 32px;
1490
- color: red;
1491
- }
1492
- ========================================== */
1493
-
1494
- .icon-default {
1495
- width: 0.9285714285714285em;
1496
- }
1497
-
1498
- .icon-info {
1499
- width: 0.8571428571428571em;
1500
- }
1501
-
1502
- .icon-audio-description {
1503
- width: 3.5em;
1504
- height: 1.75em;
1505
- margin: -.25em;
1506
- }
1507
-
1508
- .icon-search {
1509
- width: 0.9287109375em;
1510
- }
1511
-
1512
- .icon-arrow-left {
1513
- width: 0.8928571428571428em;
1514
- }
1515
-
1516
- .icon-arrow-right {
1517
- width: 0.8214285714285714em;
1518
- }
1519
-
1520
- .icon-arrow-up {
1521
- width: 0.9285714285714285em;
1522
- }
1523
-
1524
- .icon-arrow-down {
1525
- width: 0.9285714285714285em;
1526
- }
1527
-
1528
- .icon-ex-circle {
1529
- width: 0.8571428571428571em;
1530
- }
1531
-
1532
- .icon-check-circle {
1533
- width: 0.8571428571428571em;
1534
- }
1535
-
1536
- .icon-external-link {
1537
- width: 0.8571428571428571em;
1538
- }
1539
-
1540
- .icon-readmore {
1541
- width: 0.7142857142857142em;
1542
- }
1543
-
1544
- .icon-desktop {
1545
- width: 1.0714285714285714em;
1546
- }
1547
-
1548
- .icon-laptop {
1549
- width: 1.0714285714285714em;
1550
- }
1551
-
1552
- .icon-tablet {
1553
- width: 0.6428571428571428em;
1554
- }
1555
-
1556
- .icon-mobile {
1557
- width: 0.42857142857142855em;
1558
- }
1559
-
1560
- .icon-code {
1561
- width: 1.0714285714285714em;
1562
- }
1563
-
1564
- .icon-fork {
1565
- width: 0.5714285714285714em;
1566
- }
1567
-
1568
- .icon-code-file {
1569
- width: 0.8571428571428571em;
1570
- }
1571
-
1572
- .icon-cart-plus {
1573
- width: 0.9285714285714285em;
1574
- }
1575
-
1576
- ul ::marker {
1577
- color: #c0272d;
1578
- }
1579
-
1580
- ul li, ol li {
1581
- margin-bottom: 8px;
1582
- }
1583
-
1584
- .linklist {
1585
- }
1586
-
1587
- .linklist, .linklist li {
1588
- margin: 0;
1589
- padding: 0;
1590
- list-style: none
1591
- }
1592
-
1593
- .linklist a {
1594
- display: block;
1595
- padding: 4px 16px;
1596
- border-bottom: 1px solid #ddd;
1597
- text-decoration: none
1598
- }
1599
-
1600
- .linklist a svg {
1601
- height: .65em
1602
- }
1603
-
1604
- .linklist a:hover, .linklist a:focus {
1605
- }
1606
-
1607
- .linklist a:hover svg, .linklist a:focus svg {
1608
- color: #c0272d
1609
- }
1610
-
1611
- .linklist a:hover .visual-a, .linklist a:focus .visual-a {
1612
- text-decoration: underline
1613
- }
1614
-
1615
- .linklist li:last-child a {
1616
- border-bottom: none
1617
- }
1618
-
1619
- .nolist {
1620
- margin: 0;
1621
- padding: 0
1622
- }
1623
-
1624
- .nolist li {
1625
- list-style: none;
1626
- margin: 0;
1627
- padding: 0
1628
- }
1629
-
1630
- p+ul, p+ol {
1631
- margin-top: -8px;
1632
- }
1633
-
1634
- .columns {
1635
- padding: 0
1636
- }
1637
-
1638
- .columns > * {
1639
- margin-left: 32px
1640
- }
1641
-
1642
- .two.columns, .four.columns {
1643
- -webkit-column-gap: 32px;
1644
- column-gap: 32px
1645
- }
1646
-
1647
- @media (min-width: 35em) {
1648
-
1649
- .two.columns, .four.columns {
1650
- -webkit-columns: 2;
1651
- columns: 2
1652
- }
1653
- }
1654
-
1655
- .four.columns {
1656
- padding: 0 8px
1657
- }
1658
-
1659
- @media (min-width: 60em) {
1660
-
1661
- .four.columns {
1662
- -webkit-columns: 4;
1663
- columns: 4
1664
- }
1665
- }
1666
-
1667
- .info {
1668
- background-color: #eed009;
1669
- background-image: linear-gradient(to bottom, #eed009, rgb(217, 189, 10));
1670
- background-size: 100% 20%;
1671
- background-repeat: no-repeat;
1672
- background-position: bottom;
1673
- font-weight: bold;
1674
- text-align: center
1675
- }
1676
-
1677
- .info svg {
1678
- margin-right: 8px;
1679
- font-size: 2em;
1680
- vertical-align: middle;
1681
- margin-top: -.14em
1682
- }
1683
-
1684
- #controls {
1685
- background-color: #f2f2f2;
1686
- text-align: right;
1687
- font-size: .8125em;
1688
- padding-left: 8px;
1689
- padding-right: 8px
1690
- }
1691
-
1692
- #controls ul {
1693
- padding: 8px;
1694
- grid-area: content;
1695
- display: -webkit-box;
1696
- display: -ms-flexbox;
1697
- display: flex;
1698
- -webkit-box-pack: justify;
1699
- -ms-flex-pack: justify;
1700
- justify-content: space-between
1701
- }
1702
-
1703
- @media (min-width: 23em) {
1704
-
1705
- #controls ul {
1706
- -webkit-box-pack: end;
1707
- -ms-flex-pack: end;
1708
- justify-content: flex-end
1709
- }
1710
- }
1711
-
1712
- #controls a {
1713
- color: #003366;
1714
- text-decoration: none
1715
- }
1716
-
1717
- @media (min-width: 23em) {
1718
-
1719
- #controls a {
1720
- margin-left: 16px
1721
- }
1722
- }
1723
-
1724
- #controls a:hover,
1725
- #controls a:focus {
1726
- border-bottom: none;
1727
- text-decoration: underline
1728
- }
1729
-
1730
- #controls a svg {
1731
- width: .8em;
1732
- height: .8em
1733
- }
1734
-
1735
- .mainnav {
1736
- position: relative;
1737
- font-size: 14px;
1738
- font-size: .875rem;
1739
- background-color: #003366
1740
- }
1741
-
1742
- @media (min-width: 35em) {
1743
-
1744
- .mainnav {
1745
- font-size: 16px;
1746
- font-size: 1rem
1747
- }
1748
- }
1749
-
1750
- .mainnav > ul {
1751
- width: 100%;
1752
- margin: 0;
1753
- padding: 0
1754
- }
1755
-
1756
- @media (min-width: 35em) {
1757
-
1758
- .mainnav > ul {
1759
- display: -webkit-box;
1760
- display: -ms-flexbox;
1761
- display: flex;
1762
- -webkit-box-align: end;
1763
- -ms-flex-align: end;
1764
- align-items: flex-end
1765
- }
1766
-
1767
- @supports (display: grid) {
1768
-
1769
- .mainnav > ul {
1770
- display: grid;
1771
- grid-template-rows: min-content min-content;
1772
- grid-template-columns: minmax(16px, 1fr) repeat(6, minmax(206px, max-content)) minmax(16px, 1fr);
1773
- -webkit-box-pack: justify;
1774
- -ms-flex-pack: justify;
1775
- justify-content: space-between
1776
- }
1777
- }
1778
- }
1779
-
1780
- .mainnav > ul > li {
1781
- display: block
1782
- }
1783
-
1784
- .mainnav > ul > li.active {
1785
- background: #091832;
1786
- border-radius: 3px 3px 0 0
1787
- }
1788
-
1789
- .mainnav > ul > li.active > a > span {
1790
- border-bottom: 2px solid #eed009 !important
1791
- }
1792
-
1793
- @media (min-width: 35em) {
1794
-
1795
- .mainnav > ul > li {
1796
- position: relative;
1797
- -webkit-box-flex: 1;
1798
- -ms-flex-positive: 1;
1799
- flex-grow: 1;
1800
- -ms-flex-negative: 1;
1801
- flex-shrink: 1
1802
- }
1803
- }
1804
-
1805
- .mainnav > ul > li > a {
1806
- text-decoration: none;
1807
- display: block;
1808
- width: 100%;
1809
- color: #ffffff;
1810
- text-align: center;
1811
- padding: 15px;
1812
- box-sizing: border-box
1813
- }
1814
-
1815
- @supports (display: grid) {
1816
-
1817
- .mainnav > ul > li > a {
1818
- padding-top: 8px;
1819
- padding-bottom: 8px
1820
- }
1821
- }
1822
-
1823
- .mainnav > ul > li > a > span {
1824
- display: block;
1825
- border-bottom: 2px solid transparent
1826
- /* var(--trans-line-grey);*/
1827
- }
1828
-
1829
- .mainnav > ul > li > a:hover,
1830
- .mainnav > ul > li > a:focus,
1831
- .mainnav > ul > li > a[aria-current="page"] {
1832
- }
1833
-
1834
- .mainnav > ul > li > a:hover > span,
1835
- .mainnav > ul > li > a:focus > span,
1836
- .mainnav > ul > li > a[aria-current="page"] > span {
1837
- border-bottom: 2px solid #eed009
1838
- }
1839
-
1840
- .mainnav li.active + .subnav {
1841
- display: grid
1842
- }
1843
-
1844
- .mainnav .subnav {
1845
- font-size: 14px;
1846
- font-size: .875rem;
1847
- display: none;
1848
- background-color: #091832
1849
- }
1850
-
1851
- @media (min-width: 35em) {
1852
-
1853
- .mainnav .subnav {
1854
- }
1855
-
1856
- @supports (display: grid) {
1857
-
1858
- .mainnav .subnav {
1859
- grid-row-start: 2;
1860
- grid-column-start: 1;
1861
- grid-column-end: 9;
1862
- grid-template-rows: min-content min-content;
1863
- grid-template-columns: minmax(16px, 1fr) minmax(1232px, max-content) minmax(16px, 1fr);
1864
- -webkit-box-pack: justify;
1865
- -ms-flex-pack: justify;
1866
- justify-content: space-between
1867
- }
1868
-
1869
- .mainnav .subnav ul {
1870
- grid-column-start: 2;
1871
- grid-column-end: 3
1872
- }
1873
-
1874
- .mainnav .subnav ul a:link {
1875
- color: #fff !important
1876
- }
1877
- }
1878
- }
1879
-
1880
- .subnavcontent {
1881
- -webkit-columns: 3;
1882
- columns: 3; /* Does not really work :-/ */
1883
- margin: 0;
1884
- padding: 16px 0
1885
- }
1886
-
1887
- .subnavcontent, .subnavcontent li {
1888
- list-style: none
1889
- }
1890
-
1891
- .subnavcontent a {
1892
- text-decoration: none;
1893
- color: #ffffff
1894
- }
1895
-
1896
- .subnavcontent a:hover,
1897
- .subnavcontent a:focus {
1898
- text-decoration: underline
1899
- }
1900
-
1901
- .subnavcontent > li {
1902
- margin-bottom: 16px
1903
- }
1904
-
1905
- .subnavcontent > li:last-child {
1906
- margin-bottom: 0
1907
- }
1908
-
1909
- .subnavcontent > li > a {
1910
- font-weight: bold
1911
- }
1912
-
1913
- .subnavcontent > li > ul {
1914
- border-left: 1px solid #315079;
1915
- margin: 0;
1916
- padding: 0 0 0 16px;
1917
- line-height: 1.8
1918
- }
1919
-
1920
- .subnavcontent > li > ul > li {
1921
- margin-bottom: 0
1922
- }
1923
-
1924
- .metanav {
1925
- text-transform: uppercase;
1926
- font-size: 12px;
1927
- font-size: .75rem;
1928
- font-weight: bold;
1929
- /*border-bottom: 1px solid rgba(255, 255, 255, 0.11);*/
1930
- text-align: right;
1931
- width: 100%
1932
- }
1933
-
1934
- @media (min-width: 35em) {
1935
-
1936
- .metanav {
1937
- display: -webkit-box;
1938
- display: -ms-flexbox;
1939
- display: flex;
1940
- -webkit-box-align: center;
1941
- -ms-flex-align: center;
1942
- align-items: center;
1943
- -webkit-box-pack: end;
1944
- -ms-flex-pack: end;
1945
- justify-content: flex-end
1946
- }
1947
- }
1948
-
1949
- .metanav a {
1950
- text-decoration: none;
1951
- padding: 8px 0
1952
- }
1953
-
1954
- .metanav a:hover,
1955
- .metanav a:focus,
1956
- .metanav a[aria-current="page"] {
1957
- border-bottom: 2px solid #eed009
1958
- }
1959
-
1960
- .metanav > ul {
1961
- width: 100%
1962
- }
1963
-
1964
- @media (min-width: 35em) {
1965
-
1966
- .metanav > ul {
1967
- display: -webkit-box;
1968
- display: -ms-flexbox;
1969
- display: flex;
1970
- -webkit-box-pack: end;
1971
- -ms-flex-pack: end;
1972
- justify-content: flex-end
1973
- }
1974
- }
1975
-
1976
- .metanav > ul li {
1977
- display: inline;
1978
- margin-bottom: 8px
1979
- }
1980
-
1981
- @media (min-width: 35em) {
1982
-
1983
- .metanav > ul li {
1984
- display: -webkit-box;
1985
- display: -ms-flexbox;
1986
- display: flex;
1987
- -webkit-box-align: center;
1988
- -ms-flex-align: center;
1989
- align-items: center;
1990
- margin: 0 16px 0 0 !important
1991
- }
1992
- }
1993
-
1994
- .metanav > ul li:last-child {
1995
- min-width: 300px;
1996
- margin-right: 0
1997
- }
1998
-
1999
- .metanav > ul li a {
2000
- }
2001
-
2002
- @media (min-width: 35em) {
2003
-
2004
- .metanav > ul li a {
2005
- display: block;
2006
- width: 100%;
2007
- text-align: right
2008
- }
2009
- }
2010
-
2011
- .metanav form[role=search] {
2012
- background-color: rgba(6, 30, 54, .44)
2013
- }
2014
-
2015
- .metanav form[role=search] > div {
2016
- width: 300px;
2017
- display: -webkit-box;
2018
- display: -ms-flexbox;
2019
- display: flex
2020
- }
2021
-
2022
- .metanav form[role=search] label {
2023
- text-transform: none;
2024
- font-weight: normal;
2025
- display: -webkit-box;
2026
- display: -ms-flexbox;
2027
- display: flex;
2028
- -ms-flex-line-pack: center;
2029
- align-content: center;
2030
- width: 70%;
2031
- -webkit-box-flex: 1;
2032
- -ms-flex: 1 1 70%;
2033
- flex: 1 1 70%
2034
- }
2035
-
2036
- .metanav form[role=search] label .l {
2037
- display: block;
2038
- padding: 8px 4px 8px 12px
2039
- }
2040
-
2041
- .metanav form[role=search] input {
2042
- box-sizing: border-box;
2043
- -webkit-appearance: none;
2044
- background-color: transparent;
2045
- border: 0;
2046
- border-radius: 0;
2047
- color: #ffffff;
2048
- height: 100%;
2049
- padding: 8px 0;
2050
- margin: 0;
2051
- min-width: 100px
2052
- }
2053
-
2054
- .metanav form[role=search] input::-webkit-search-cancel-button,
2055
- .metanav form[role=search] input::-webkit-search-results-button {
2056
- filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
2057
- -webkit-filter: invert(100%);
2058
- filter: invert(100%)
2059
- }
2060
-
2061
- .metanav form[role=search] button {
2062
- display: block;
2063
- margin: 0
2064
- }
2065
-
2066
- .metanav form[role=search] ::-webkit-input-placeholder {
2067
- color: #ffffff;
2068
- font-style: italic;
2069
- opacity: 1
2070
- }
2071
-
2072
- .metanav form[role=search] :-moz-placeholder {
2073
- /* Firefox 18- */
2074
- color: #ffffff;
2075
- font-style: italic;
2076
- opacity: 1
2077
- }
2078
-
2079
- .metanav form[role=search] ::-moz-placeholder {
2080
- /* Firefox 19+ */
2081
- color: #ffffff;
2082
- font-style: italic;
2083
- opacity: 1
2084
- }
2085
-
2086
- .metanav form[role=search] :-ms-input-placeholder {
2087
- color: #ffffff;
2088
- font-style: italic;
2089
- opacity: 1
2090
- }
2091
-
2092
- .navigations {
2093
- position: relative;
2094
- grid-column-start: 5;
2095
- grid-column-end: -2;
2096
- -webkit-box-flex: 1;
2097
- -ms-flex-positive: 1;
2098
- flex-grow: 1
2099
- }
2100
-
2101
- @media (min-width: 35em) {
2102
-
2103
- .navigations {
2104
- /*border: 1px solid rgba(255, 255, 255, 0.11);
2105
- border-style: none solid;*/
2106
- /*padding: 16px 0 0;*/
2107
- }
2108
- }
2109
-
2110
- .navigations .nava11y {
2111
- display: block
2112
- }
2113
-
2114
- .mainnav, .metanav, #controls {
2115
- }
2116
-
2117
- .mainnav > ul, .metanav > ul, #controls > ul {
2118
- margin: 0;
2119
- padding: 0
2120
- }
2121
-
2122
- .mainnav > ul > li, .metanav > ul > li, #controls > ul > li {
2123
- display: inline-block;
2124
- list-style: none;
2125
- margin: 0
2126
- }
2127
-
2128
- .teaser.news {
2129
- background-color: #ffffff;
2130
- }
2131
-
2132
- .news-teaser {
2133
- margin-bottom: 60px;
2134
- }
2135
-
2136
- .announcements-list {
2137
- margin-bottom: 60px;
2138
- }
2139
-
2140
- .announce-box {
2141
- background-color: #fafafa;
2142
- border: 1px solid #ddd;
2143
- border-width: 1px 0;
2144
- padding: 10px 25px !important
2145
- }
2146
-
2147
- .announce-box+.announce-box {
2148
- border-top-width: 0
2149
- }
2150
-
2151
- .announce-box>:first-child {
2152
- margin-top: 0
2153
- }
2154
-
2155
- .announce-box>:last-child {
2156
- margin-bottom: 0
2157
- }
2158
-
2159
- .notes {
2160
- font-size: .85em
2161
- }
2162
-
2163
- .notes strong:first-child {
2164
- font-weight: bold;
2165
- color: #005A6A
2166
- }
2167
-
2168
- .pager {
2169
- background-color: #ffffff;
2170
- border: 1px solid #ddd;
2171
- display: -webkit-box;
2172
- display: -ms-flexbox;
2173
- display: flex;
2174
- -webkit-box-flex: 1;
2175
- -ms-flex: 1 100%;
2176
- flex: 1 100%;
2177
- }
2178
-
2179
- .pager > ul {
2180
- -ms-flex-line-pack: center;
2181
- align-content: center;
2182
- display: -webkit-box;
2183
- display: -ms-flexbox;
2184
- display: flex;
2185
- -webkit-box-flex: 1;
2186
- -ms-flex: 1 100%;
2187
- flex: 1 100%;
2188
- -webkit-box-orient: horizontal;
2189
- -webkit-box-direction: normal;
2190
- -ms-flex-direction: row;
2191
- flex-direction: row;
2192
- -ms-flex-wrap: nowrap;
2193
- flex-wrap: nowrap;
2194
- margin: 0;
2195
- padding: 18px;
2196
- }
2197
-
2198
- .pager--item {
2199
- display: -webkit-box;
2200
- display: -ms-flexbox;
2201
- display: flex;
2202
- -webkit-box-flex: 1;
2203
- -ms-flex: 1 auto;
2204
- flex: 1 auto;
2205
- list-style: none;
2206
- }
2207
-
2208
- .pager--item a:link {
2209
- color: #005A6A;
2210
- display: -webkit-box;
2211
- display: -ms-flexbox;
2212
- display: flex;
2213
- -webkit-box-orient: horizontal;
2214
- -webkit-box-direction: normal;
2215
- -ms-flex-direction: row;
2216
- flex-direction: row;
2217
- -webkit-box-flex: 1;
2218
- -ms-flex: 1 100%;
2219
- flex: 1 100%;
2220
- text-decoration: none;
2221
- }
2222
-
2223
- .pager--item a:visited {
2224
- color: #660066;
2225
- }
2226
-
2227
- .pager--item a:hover,
2228
- .pager--item a:focus {
2229
- color: #003366;
2230
- }
2231
-
2232
- .pager--item a:active {
2233
- color: #005A6A;
2234
- }
2235
-
2236
- .pager--item.next a {
2237
- -webkit-box-orient: horizontal;
2238
- -webkit-box-direction: reverse;
2239
- -ms-flex-direction: row-reverse;
2240
- flex-direction: row-reverse;
2241
- -webkit-box-pack: end;
2242
- -ms-flex-pack: end;
2243
- justify-content: flex-end;
2244
- text-align: right;
2245
- }
2246
-
2247
- .pager--item-icon {
2248
- display: -webkit-box;
2249
- display: -ms-flexbox;
2250
- display: flex;
2251
- font-size: 33px;
2252
- }
2253
-
2254
- .pager--item-text {
2255
- display: -webkit-box;
2256
- display: -ms-flexbox;
2257
- display: flex;
2258
- -webkit-box-flex: 1;
2259
- -ms-flex: 1 auto;
2260
- flex: 1 auto;
2261
- -webkit-box-orient: vertical;
2262
- -webkit-box-direction: normal;
2263
- -ms-flex-direction: column;
2264
- flex-direction: column;
2265
- }
2266
-
2267
- .pager--item-text {
2268
- margin-right: 16px;
2269
- margin-left: 16px;
2270
- }
2271
-
2272
- .pager--item-text-direction {
2273
- color: #1d1d1d;
2274
- font-size: 13px;
2275
- }
2276
-
2277
- .pager--item-text-target {
2278
- font-size: 17px;
2279
- line-height: 1em;
2280
- }
2281
-
2282
- .quote {
2283
- background-color: #005A6A;
2284
- border-radius: 5px;
2285
- color: #ffffff;
2286
- padding: 22px;
2287
- }
2288
-
2289
- .quote--block {
2290
- display: -webkit-box;
2291
- display: -ms-flexbox;
2292
- display: flex;
2293
- -webkit-box-orient: vertical;
2294
- -webkit-box-direction: normal;
2295
- -ms-flex-direction: column;
2296
- flex-direction: column;
2297
- margin: 0;
2298
- padding: 0;
2299
- }
2300
-
2301
- .quote--block-text {
2302
- font-size: 20px;
2303
- font-style: italic;
2304
- line-height: 1.25;
2305
- margin: 0;
2306
- padding: 0;
2307
- }
2308
-
2309
- .quote--block-text::before {
2310
- content: open-quote;
2311
- }
2312
-
2313
- .quote--block-text::after {
2314
- content: close-quote;
2315
- }
2316
-
2317
- .quote--block-cite {
2318
- font-size: 15px;
2319
- font-weight: 500;
2320
- margin: 9px 0 0 0;
2321
- }
2322
-
2323
- .quote--block-cite a {
2324
- color: #FAFAFC;
2325
- }
2326
-
2327
- .related-content {
2328
- background-color: #ffffff;
2329
- border: 1px solid #ddd;
2330
- display: -webkit-box;
2331
- display: -ms-flexbox;
2332
- display: flex;
2333
- -webkit-box-flex: 1;
2334
- -ms-flex: 1 100%;
2335
- flex: 1 100%;
2336
- -webkit-box-orient: vertical;
2337
- -webkit-box-direction: normal;
2338
- -ms-flex-direction: column;
2339
- flex-direction: column;
2340
- margin: 50px;
2341
- }
2342
-
2343
- .related-content--head {
2344
- -webkit-box-align: center;
2345
- -ms-flex-align: center;
2346
- align-items: center;
2347
- background-color: #f2f2f2;
2348
- border-bottom: 1px solid #ddd;
2349
- display: -webkit-box;
2350
- display: -ms-flexbox;
2351
- display: flex;
2352
- -webkit-box-orient: horizontal;
2353
- -webkit-box-direction: normal;
2354
- -ms-flex-direction: row;
2355
- flex-direction: row;
2356
- height: 48px;
2357
- }
2358
-
2359
- .related-content--head-icon {
2360
- height: 22px;
2361
- margin-right: 10px;
2362
- margin-left: 19px;
2363
- width: 22px;
2364
- }
2365
-
2366
- .related-content--head-heading {
2367
- border: none;
2368
- color: #003366;
2369
- -webkit-box-flex: 1;
2370
- -ms-flex: 1 100%;
2371
- flex: 1 100%;
2372
- font-size: 20px;
2373
- margin: 0;
2374
- padding: 0;
2375
- }
2376
-
2377
- .related-content--content {
2378
- margin: 0;
2379
- padding: 0;
2380
- }
2381
-
2382
- .related-content--content-list {
2383
- list-style: none;
2384
- margin: 22px;
2385
- padding: 0;
2386
- }
2387
-
2388
- .related-content--content-list li {
2389
- font-size: 14px;
2390
- line-height: 2.2em;
2391
- }
2392
-
2393
- .sidenav {
2394
- grid-area: navigation;
2395
- }
2396
-
2397
- .sidenav--head {
2398
- /*background-color: var(--off-white);*/
2399
- background-color: #003366;
2400
- padding: 8px;
2401
- display:-webkit-box;
2402
- display:-ms-flexbox;
2403
- display:flex;
2404
- -webkit-box-align: end;
2405
- -ms-flex-align: end;
2406
- align-items: flex-end;
2407
- border: 2px solid #003366;
2408
- border-bottom: none;
2409
- }
2410
-
2411
- .sidenav--head-icon {
2412
- padding-bottom: .3em;
2413
- }
2414
-
2415
- .sidenav--head-icon--inner {
2416
- width: 47px;
2417
- height: 48px;
2418
- float: left;
2419
- margin-right: 8px;
2420
- }
2421
-
2422
- .sidenav--head-section {
2423
- color: #ffffff;
2424
- text-transform: uppercase;
2425
- letter-spacing: .7px;
2426
- font-size: 11px;
2427
- font-size: .6875rem;
2428
- font-weight: bold;
2429
- }
2430
-
2431
- .sidenav--head-subsection {
2432
- color: #ffffff;
2433
- font-size: 22px;
2434
- font-size: 1.375rem;
2435
- }
2436
-
2437
- .sidenav--list {
2438
- border: 2px solid #003366;
2439
- border-width: 0 1px 1px;
2440
- background-color: #003366;
2441
- margin: 0;
2442
- padding:0;
2443
- font-size: 13px;
2444
- font-size: .8125rem;
2445
- .sidenav-head + & {
2446
- border-top: none;
2447
- }
2448
- }
2449
-
2450
- .sidenav--list a {
2451
- display: block;
2452
- padding: 16px 24px;
2453
- color: #ffffff;
2454
- text-decoration: none
2455
- }
2456
-
2457
- .sidenav--list a:hover,
2458
- .sidenav--list a:focus {
2459
- text-decoration: underline;
2460
- background-color: #ffffff;
2461
- color: #005A6A
2462
- }
2463
-
2464
- .sidenav--list>li>a {
2465
- border-top: 1px solid #ffffff
2466
- }
2467
-
2468
- .sidenav--list ul {
2469
- padding: 0;
2470
- margin: 0;
2471
- padding-left: 24px
2472
- }
2473
-
2474
- .sidenav--list a + ul {
2475
- display: none
2476
- }
2477
-
2478
- .sidenav--list a[aria-current] + ul {
2479
- display: block
2480
- }
2481
-
2482
- .sidenav--list li {
2483
- margin: 0;
2484
- padding: 0;
2485
- list-style: none
2486
- }
2487
-
2488
- .sidenav--list ul li a {
2489
- border-bottom: none;
2490
- padding: 4px 4px 4px 16px;
2491
- border-radius: 2px 0 0 2px
2492
- }
2493
-
2494
- .sidenav--list a[aria-current] {
2495
- /*color: var(--w3c-blue);
2496
- background-color: var(--body-bg);*/
2497
- }
2498
-
2499
- .sidenav--list a[aria-current=location] {
2500
- padding-bottom: 4px;
2501
- font-weight: bold
2502
- }
2503
-
2504
- .sidenav--list a[aria-current=page] {
2505
- font-weight: bold;
2506
- margin-right: -1px;
2507
- color: #003366;
2508
- background-color: #FAFAFC
2509
- }
2510
-
2511
- .teaser {
2512
- padding-top: 32px;
2513
- padding-bottom: 32px;
2514
- }
2515
-
2516
- .teaser.featured {
2517
- background-size: cover;
2518
- background-position: center
2519
- }
2520
-
2521
- .teaser.featured .teaser-c {
2522
- background-color: rgba(255, 255, 255, .9);
2523
- border-top: 5px solid #c0272d;
2524
- padding: 16px 32px;
2525
- display: block
2526
- }
2527
-
2528
- .teaser-h {
2529
- }
2530
-
2531
- .teaser-h h2, .teaser-h h3, .teaser-h h4, .teaser-h h5, .teaser-h h6 {
2532
- margin: 16px 0;
2533
- padding: 0;
2534
- border: none;
2535
- color: #005A6A;
2536
- font-size: 16px;
2537
- font-size: 1rem;
2538
- line-height: 1.2
2539
- }
2540
-
2541
- .teaser-h h2.title, .teaser-h h3.title, .teaser-h h4.title, .teaser-h h5.title, .teaser-h h6.title {
2542
- font-size: 24px;
2543
- font-size: 1.5rem;
2544
- margin: 10px 0 20px
2545
- }
2546
-
2547
- @media (min-width: 35em) {
2548
-
2549
- .teaser-h h2.title, .teaser-h h3.title, .teaser-h h4.title, .teaser-h h5.title, .teaser-h h6.title {
2550
- font-size: 2rem
2551
- }
2552
- }
2553
-
2554
- @media (min-width: 60em) {
2555
-
2556
- .teaser-h h2.title, .teaser-h h3.title, .teaser-h h4.title, .teaser-h h5.title, .teaser-h h6.title {
2557
- font-size: 2.375rem
2558
- }
2559
- }
2560
-
2561
- .teaser-h .subtitle {
2562
- font-weight: bold;
2563
- margin: 0;
2564
- font-size: 14px;
2565
- font-size: .875rem;
2566
- color: #1d1d1d
2567
- }
2568
-
2569
- .teaser-h-icon {
2570
- height:1em;
2571
- width: 1em;
2572
- vertical-align: middle;
2573
- margin-right: 10px
2574
- }
2575
-
2576
- .teaser-h-icon.full {
2577
- display: block;
2578
- height: 1.8em;
2579
- width: 1.8em
2580
- }
2581
-
2582
- .teaser-tip {
2583
- text-align: center
2584
- }
2585
-
2586
- .teaser-tip .teaser-h h2 {
2587
- font-size: 28px;
2588
- font-size: 1.75rem
2589
- }
2590
-
2591
- .teaser-tip .teaser-h svg {
2592
- display: block;
2593
- margin: 0 auto;
2594
- height: 1.75em;
2595
- width: 1.75em
2596
- }
2597
-
2598
- .teaser-tip .fakelink {
2599
- margin: 0 auto
2600
- }
2601
-
2602
- .fakelink {
2603
- text-decoration: underline;
2604
- position: relative
2605
- }
2606
-
2607
- .fakelink svg {
2608
- margin-left: 5px;
2609
- width: .75em;
2610
- height: .75em
2611
- }
2612
-
2613
- .teaser-about {
2614
- }
2615
-
2616
- .teaser-about p {
2617
- color: #686868
2618
- }
2619
-
2620
- @media (min-width: 35em) {
2621
-
2622
- .teaser-about p {
2623
- font-size: 1.25rem
2624
- }
2625
- }
2626
-
2627
- @media (min-width: 60em) {
2628
-
2629
- .teaser-about p {
2630
- font-size: 1.5rem
2631
- }
2632
- }
2633
-
2634
- .teaser-about .teaser-h h2 {
2635
- font-weight: bold
2636
- }
2637
-
2638
- .teaser-media {
2639
- -webkit-box-align: center;
2640
- -ms-flex-align: center;
2641
- align-items: center;
2642
- background-color: #fff;
2643
- }
2644
-
2645
- .area-teaser {
2646
- display: block;
2647
- background-color: #ffffff;
2648
- border: 1px solid #ddd;
2649
- margin: -1px;
2650
- padding: 20px 32px
2651
- }
2652
-
2653
- @media (min-width: 35em) {
2654
-
2655
- .area-teaser {
2656
- padding: 40px 40px
2657
- }
2658
- }
2659
-
2660
- @media (min-width: 60em) {
2661
-
2662
- .area-teaser {
2663
- padding: 60px 40px
2664
- }
2665
- }
2666
-
2667
- .area-teaser .teaser-h {
2668
- display: -webkit-box;
2669
- display: -ms-flexbox;
2670
- display: flex;
2671
- -webkit-box-align: end;
2672
- -ms-flex-align: end;
2673
- align-items: flex-end
2674
- }
2675
-
2676
- .area-teaser .teaser-h h2, .area-teaser .teaser-h h3, .area-teaser .teaser-h h4, .area-teaser .teaser-h h5, .area-teaser .teaser-h h6 {
2677
- margin: 0;
2678
- font-weight: normal
2679
- }
2680
-
2681
- .area-teaser .teaser-h-icon {
2682
- margin-bottom: 10px
2683
- }
2684
-
2685
- .area-teaser:hover, .area-teaser:focus {
2686
- }
2687
-
2688
- .area-teaser:hover .teaser-h > :not(svg), .area-teaser:focus .teaser-h > :not(svg) {
2689
- text-decoration: underline
2690
- }
2691
-
2692
- /*
2693
- Able Player core styles
2694
-
2695
- Default z-index map:
2696
-
2697
- * Modal dialog
2698
- div.able-modal-dialog = 10000
2699
- div.able-modal-overlay = 9500
2700
-
2701
- * Items that should always be on top (9000):
2702
- .able-alert = 9400
2703
- .able-window-toolbar .able-button-handler-preferences = 9300
2704
- .able-popup = 9200
2705
- .able-volume-head = 9175
2706
- .able-volume-slider = 9150
2707
- .able-tooltip = 9000
2708
-
2709
- * Pop-ups with critical content: (7000 - 8000):
2710
- .able-sign-window = 8000
2711
- .able-transcript-area = 7000
2712
-
2713
- * Player controls: (5000 - 6000)
2714
- .able-controller .able-seekbar = 6900
2715
- .able-controller .buttonOff = 6800
2716
- .able-controller button > img = 6700
2717
- .able-controller button > span = 6700
2718
- .able-controller button = 6600
2719
- .able-big-play-button = 6500
2720
- div.able-captions-wrapper = 6000
2721
- .able-seekbar-head = 5500
2722
- .able-seekbar-played = 5200
2723
- .able-seekbar-loaded = 5100
2724
- .able = 5000
2725
- */
2726
-
2727
- .able-wrapper {
2728
- position: relative;
2729
- margin: 0;
2730
- padding: 0;
2731
- width: 100%;
2732
- height: auto;
2733
- box-sizing: content-box !important;
2734
- }
2735
-
2736
- .able {
2737
- position: relative;
2738
- margin: 1em 0;
2739
- width: 100%; /* will be changed dynamically as player is contructed */
2740
- z-index: 5000;
2741
- }
2742
-
2743
- .able-column-left {
2744
- float: left;
2745
- }
2746
-
2747
- .able-column-right {
2748
- float: left;
2749
- }
2750
-
2751
- .able .able-vidcap-container {
2752
- background-color: black;
2753
- /* height: 360px; */
2754
- left: 0;
2755
- margin: 0;
2756
- position: relative;
2757
- top: 0;
2758
- }
2759
-
2760
- .able-player {
2761
- font-family: inherit;
2762
- background-color: #262626; /* background color of player (appears on top & bottom) */
2763
- }
2764
-
2765
- .able-offscreen {
2766
- position:absolute;
2767
- left:-10000px;
2768
- top:auto;
2769
- width:1px;
2770
- height:1px;
2771
- overflow:hidden;
2772
- }
2773
-
2774
- .able-media-container audio {
2775
- display: none !important;
2776
- }
2777
-
2778
- .able-video {
2779
- }
2780
-
2781
- .able-video .able-now-playing {
2782
- display: none; /* not currently used for video */
2783
- }
2784
-
2785
- .able-controller {
2786
- position: relative;
2787
- border-top: 2px solid #4c4c4c;
2788
- border-bottom: 2px solid #4c4c4c;
2789
- background-color: #464646; /* background color of controller bar */
2790
- min-height: 38px; /* height of button (20px) + 4px border + 4px padding */
2791
- padding: 0;
2792
- }
2793
-
2794
- .able-poster {
2795
- position: absolute;
2796
- top: 0;
2797
- left: 0;
2798
- }
2799
-
2800
- /*
2801
- Controller Buttons & Controls
2802
- */
2803
-
2804
- .able-big-play-button {
2805
- position: absolute;
2806
- font-size: 8em;
2807
- opacity: 0.5;
2808
- filter:alpha(opacity=50); /* for IE */
2809
- color: #fdfdfd;
2810
- background-color: transparent;
2811
- border: none;
2812
- outline: none;
2813
- left: 0;
2814
- top: 0;
2815
- padding: 0;
2816
- z-index: 6500;
2817
- }
2818
-
2819
- .able-big-play-button:hover {
2820
- opacity: 100;
2821
- filter:alpha(opacity=100); /* for IE */
2822
- }
2823
-
2824
- .able-left-controls, .able-right-controls {
2825
- overflow: visible;
2826
- }
2827
-
2828
- .able-left-controls button, .able-right-controls button {
2829
- vertical-align: middle;
2830
- }
2831
-
2832
- .able-left-controls {
2833
- float: left;
2834
- }
2835
-
2836
- .able-right-controls {
2837
- float: right;
2838
- }
2839
-
2840
- .able-black-controls,
2841
- .able-black-controls button,
2842
- .able-black-controls label {
2843
- color: #000 !important;
2844
- }
2845
-
2846
- .able-black-controls .able-seekbar {
2847
- border: 2px solid #000;
2848
- }
2849
-
2850
- .able-white-controls,
2851
- .able-white-controls button,
2852
- .able-black-controls label {
2853
- color: #FFF !important;
2854
- }
2855
-
2856
- .able-white-controls .able-seekbar {
2857
- border: 2px solid #FFF;
2858
- }
2859
-
2860
- .able-controller button {
2861
- background: none;
2862
- position: relative;
2863
- display: inline-block;
2864
- border-style: none;
2865
- margin: 3px;
2866
- padding: 0;
2867
- font-size: 20px;
2868
- min-width: 24px;
2869
- outline: 2px solid #464646; /* same color as .able-controller background-color */
2870
- border: none;
2871
- overflow: visible !important;
2872
- z-index: 6600;
2873
- }
2874
-
2875
- .able-controller button > span,
2876
- .able-controller button > img {
2877
- width: 20px;
2878
- margin: 0 auto;
2879
- padding: 0;
2880
- z-index: 6700;
2881
- }
2882
-
2883
- .able-controller .buttonOff {
2884
- opacity: 0.5;
2885
- filter:alpha(opacity=50); /* for IE */
2886
- z-index: 6800;
2887
- }
2888
-
2889
- .able-controller .able-seekbar {
2890
- margin: 0 5px;
2891
- z-index: 6900;
2892
- }
2893
-
2894
- .able-controller button:hover,
2895
- .able-controller button:focus {
2896
- outline-style: solid;
2897
- outline-width: medium;
2898
- }
2899
-
2900
- .able-controller button:hover {
2901
- outline-color: #8AB839 !important; /* green */
2902
- }
2903
-
2904
- .able-controller button:focus {
2905
- outline-color: #ffbb37 !important; /* yellow */
2906
- }
2907
-
2908
- /*
2909
- Seekbar
2910
- */
2911
-
2912
- .able-seekbar-wrapper {
2913
- display: inline-block;
2914
- vertical-align: middle;
2915
- }
2916
-
2917
- .able-seekbar {
2918
- position: relative;
2919
- height: 0.5em;
2920
- border: 1px solid;
2921
- background-color: #000000;
2922
- margin: 0 3px;
2923
- border-style: solid;
2924
- border-width: 2px;
2925
- border-color: #ffffff;
2926
- }
2927
-
2928
- .able-seekbar-loaded {
2929
- display: inline-block;
2930
- position: absolute;
2931
- left: 0;
2932
- top: 0;
2933
- height: 0.5em;
2934
- background-color: #464646;
2935
- z-index: 5100;
2936
- }
2937
-
2938
- .able-seekbar-played {
2939
- display: inline-block;
2940
- position: absolute;
2941
- left: 0;
2942
- top: 0;
2943
- height: 0.5em;
2944
- background-color: #DADADA;
2945
- z-index: 5200;
2946
- }
2947
-
2948
- .able-seekbar-head {
2949
- display: inline-block;
2950
- position: relative;
2951
- left: 0;
2952
- top: -0.45em;
2953
- background-color: #FDFDFD;
2954
- width: 0.8em;
2955
- height: 0.8em;
2956
- border: 1px solid;
2957
- border-radius: 0.8em;
2958
- z-index: 5500;
2959
- }
2960
-
2961
- /*
2962
- Volume Slider
2963
- */
2964
-
2965
- .able-volume-slider {
2966
- width: 34px;
2967
- height: 50px;
2968
- background-color: #464646; /* same as .able-controller */
2969
- padding: 10px 0;
2970
- position: absolute;
2971
- right: 0px;
2972
- top: -74px;
2973
- display: none;
2974
- z-index: 9100;
2975
- }
2976
-
2977
- .able-volume-track {
2978
- display: block;
2979
- position: relative;
2980
- height: 100%; /* = 50px after padding */
2981
- width: 5px;
2982
- margin: 0 auto;
2983
- background-color: #999;
2984
- }
2985
-
2986
- .able-volume-track.able-volume-track-on {
2987
- background-color: #dadada;
2988
- position: absolute;
2989
- height: 20px; /* change dynamically; 5px per volume tick */
2990
- top: 30px; /* change dynamically; 50px - height */
2991
- }
2992
-
2993
- .able-volume-head {
2994
- display: inline-block;
2995
- background-color: #fdfdfd;
2996
- outline: 1px solid #333;
2997
- position: absolute;
2998
- height: 7px;
2999
- width: 15px;
3000
- left: -5px;
3001
- top: 23px; /* change dynamically; .able-volume-track-on top - 7 */
3002
- z-index: 9175;
3003
- }
3004
-
3005
- .able-volume-head:hover,
3006
- .able-volume-head:focus {
3007
- background-color: #ffbb37 !important; /* yellow */
3008
- }
3009
-
3010
- .able-volume-help { /* not visible; used in aria-describedby */
3011
- display: none;
3012
- }
3013
-
3014
- /*
3015
- input[type=range]:focus {
3016
- outline: none;
3017
- }
3018
- input[type=range]::-webkit-slider-runnable-track {
3019
- width: 100%;
3020
- height: 8.4px;
3021
- cursor: pointer;
3022
- animate: 0.2s;
3023
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3024
- background: #3071a9;
3025
- border-radius: 1.3px;
3026
- border: 0.2px solid #010101;
3027
- }
3028
- input[type=range]::-webkit-slider-thumb {
3029
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3030
- border: 1px solid #000000;
3031
- height: 36px;
3032
- width: 16px;
3033
- border-radius: 3px;
3034
- background: #ffffff;
3035
- cursor: pointer;
3036
- -webkit-appearance: none;
3037
- margin-top: -14px;
3038
- }
3039
- input[type=range]:focus::-webkit-slider-runnable-track {
3040
- background: #367ebd;
3041
- }
3042
- input[type=range]::-moz-range-track {
3043
- width: 100%;
3044
- height: 8.4px;
3045
- cursor: pointer;
3046
- animate: 0.2s;
3047
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3048
- background: #3071a9;
3049
- border-radius: 1.3px;
3050
- border: 0.2px solid #010101;
3051
- }
3052
- input[type=range]::-moz-range-thumb {
3053
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3054
- border: 1px solid #000000;
3055
- height: 36px;
3056
- width: 16px;
3057
- border-radius: 3px;
3058
- background: #ffffff;
3059
- cursor: pointer;
3060
- }
3061
- input[type=range]::-ms-track {
3062
- width: 100%;
3063
- height: 8.4px;
3064
- cursor: pointer;
3065
- animate: 0.2s;
3066
- background: transparent;
3067
- border-color: transparent;
3068
- border-width: 16px 0;
3069
- color: transparent;
3070
- }
3071
- input[type=range]::-ms-fill-lower {
3072
- background: #2a6495;
3073
- border: 0.2px solid #010101;
3074
- border-radius: 2.6px;
3075
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3076
- }
3077
- input[type=range]::-ms-fill-upper {
3078
- background: #3071a9;
3079
- border: 0.2px solid #010101;
3080
- border-radius: 2.6px;
3081
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3082
- }
3083
- input[type=range]::-ms-thumb {
3084
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
3085
- border: 1px solid #000000;
3086
- height: 36px;
3087
- width: 16px;
3088
- border-radius: 3px;
3089
- background: #ffffff;
3090
- cursor: pointer;
3091
- }
3092
- input[type=range]:focus::-ms-fill-lower {
3093
- background: #3071a9;
3094
- }
3095
- input[type=range]:focus::-ms-fill-upper {
3096
- background: #367ebd;
3097
- }
3098
- */
3099
-
3100
- /*
3101
- Status Bar
3102
- */
3103
-
3104
- .able-status-bar {
3105
- height: 1.5em;
3106
- min-height: 1.5em;
3107
- color: #CCC;
3108
- font-size: 0.9em;
3109
- background-color: transparent;
3110
- padding: 0.5em 0.5em 0.25em;
3111
- }
3112
-
3113
- .able-status-bar span.able-timer {
3114
- /* contains both span.elapsedTime and span.duration */
3115
- text-align: left;
3116
- float: left;
3117
- width: 32%;
3118
- }
3119
-
3120
- .able-status-bar span.able-speed {
3121
- float: left;
3122
- width: 33%;
3123
- text-align: center;
3124
- }
3125
-
3126
- .able-status {
3127
- font-style: italic;
3128
- float: right;
3129
- width: 32%;
3130
- text-align :right;
3131
- }
3132
-
3133
- /*
3134
- Captions and Descriptions
3135
- */
3136
-
3137
- div.able-captions-wrapper {
3138
- width: 100%;
3139
- margin: 0;
3140
- padding: 0;
3141
- text-align: center;
3142
- line-height: 1.35em;
3143
- display: none;
3144
- z-index: 6000;
3145
- }
3146
-
3147
- div.able-captions {
3148
- display: none;
3149
- padding: 0.15em 0.25em;
3150
- /* settings that are overridden by user prefs */
3151
- background-color: black;
3152
- font-size: 1.1em;
3153
- color: white;
3154
- opacity: 0.75;
3155
- }
3156
-
3157
- div.able-captions-overlay {
3158
- position: absolute;
3159
- margin: 0;
3160
- bottom: 0;
3161
- }
3162
-
3163
- div.able-captions-below {
3164
- position: relative;
3165
- min-height: 2.8em;
3166
- }
3167
-
3168
- div.able-descriptions {
3169
- position: relative;
3170
- color: #FF6; /* yellow, to differentiate it from captions */
3171
- background-color: #262626;
3172
- min-height: 2.8em;
3173
- border-top: 1px solid #666;
3174
- margin: 0;
3175
- padding: 3%;
3176
- width: 94%;
3177
- text-align: center;
3178
- }
3179
-
3180
- /*
3181
- Now Playing
3182
- */
3183
-
3184
- div.able-now-playing {
3185
- text-align: center;
3186
- font-weight: bold;
3187
- font-size: 1.1em;
3188
- color: #FFFFFF;
3189
- background-color: transparent;
3190
- padding: 0.5em 0.5em 1em;
3191
- }
3192
-
3193
- div.able-now-playing span {
3194
- font-size: 0.9em;
3195
- }
3196
-
3197
- div.able-now-playing span span {
3198
- display: block;
3199
- }
3200
-
3201
- /*
3202
- Modal Dialogs
3203
- */
3204
-
3205
- div.able-modal-dialog {
3206
- position: absolute;
3207
- height: auto;
3208
- max-width: 90%;
3209
- margin-left: auto;
3210
- margin-right: auto;
3211
- left: 0px;
3212
- right: 0px;
3213
- outline: 0px none;
3214
- display: none;
3215
- color: #000;
3216
- background-color: #FAFAFA;
3217
- box-sizing: content-box !important;
3218
- z-index: 10000;
3219
- }
3220
-
3221
- div.able-modal-overlay {
3222
- position: fixed;
3223
- width: 100%;
3224
- height: 100%;
3225
- background-color: #000;
3226
- opacity: 0.5;
3227
- margin: 0;
3228
- padding: 0;
3229
- top: 0;
3230
- left: 0;
3231
- display: none;
3232
- z-index: 9500;
3233
- }
3234
-
3235
- button.modalCloseButton {
3236
- position: absolute;
3237
- top: 5px;
3238
- right: 5px;
3239
- }
3240
-
3241
- button.modal-button {
3242
- margin-right: 5px;
3243
- }
3244
-
3245
- div.able-modal-dialog input:hover,
3246
- div.able-modal-dialog input:focus,
3247
- div.able-modal-dialog button:hover,
3248
- div.able-modal-dialog button:focus {
3249
- outline-style: solid;
3250
- outline-width: 2px;
3251
- }
3252
-
3253
- div.able-modal-dialog input:hover,
3254
- div.able-modal-dialog button:hover {
3255
- outline-color: #8AB839; /* green */
3256
- }
3257
-
3258
- div.able-modal-dialog input:focus,
3259
- div.able-modal-dialog button:focus {
3260
- outline-color: #ffbb37; /* yellow */
3261
- }
3262
-
3263
- div.able-modal-dialog h1 {
3264
- font-weight: bold;
3265
- font-size: 1.8em;
3266
- line-height: 1.2em;
3267
- margin: 0.75em 0;
3268
- color: #000;
3269
- text-align: center;
3270
- }
3271
-
3272
- .able-prefs-form,
3273
- .able-help-div,
3274
- .able-resize-form {
3275
- background-color: #F5F5F5;
3276
- border: medium solid #ccc;
3277
- padding: 0.5em 1em;
3278
- margin: 0 0 0 1em;
3279
- width: 25em;
3280
- display: none;
3281
- }
3282
-
3283
- /*
3284
- Preferences Form
3285
- */
3286
-
3287
- .able-prefs-form fieldset {
3288
- margin-left: 0;
3289
- padding-left: 0;
3290
- border: none;
3291
- }
3292
-
3293
- .able-prefs-form legend {
3294
- color: black;
3295
- font-weight: bold;
3296
- font-size: 1.1em;
3297
- }
3298
-
3299
- .able-prefs-form fieldset div {
3300
- display: table;
3301
- margin-left: 1em;
3302
- }
3303
-
3304
- .able-prefs-form fieldset div input {
3305
- display: table-cell;
3306
- width: 1em;
3307
- vertical-align: middle;
3308
- }
3309
-
3310
- .able-prefs-form fieldset div label {
3311
- display: table-cell;
3312
- padding-left: 0.5em;
3313
- }
3314
-
3315
- fieldset.able-prefs-keys div {
3316
- float: left;
3317
- margin-right: 1em;
3318
- }
3319
-
3320
- div.able-desc-pref-prompt {
3321
- font-weight: bold;
3322
- font-style: italic;
3323
- margin-left: 1em !important;
3324
- }
3325
-
3326
- div.able-prefDescFormat > div {
3327
- margin-left: 1.5em;
3328
- }
3329
-
3330
- .able-prefs-captions label,
3331
- .able-prefs-captions select {
3332
- display: block;
3333
- float: left;
3334
- margin-bottom: 0.25em;
3335
- }
3336
-
3337
- fieldset.able-prefs-captions label {
3338
- width: 6em;
3339
- text-align: right;
3340
- padding-right: 1em;
3341
- }
3342
-
3343
- fieldset.able-prefs-captions select {
3344
- width: 10em;
3345
- font-size: 0.9em;
3346
- border-radius: none;
3347
- }
3348
-
3349
- .able-prefs-form div.able-captions-sample {
3350
- padding: 0.5em;
3351
- text-align: center;
3352
- }
3353
-
3354
- .able-prefs-form h2 {
3355
- margin-top: 0;
3356
- margin-bottom: 0.5em;
3357
- font-size: 1.1em;
3358
- }
3359
-
3360
- .able-prefs-form ul {
3361
- margin-top: 0;
3362
- }
3363
-
3364
- /*
3365
- Keyboard Preferences Dialog
3366
- */
3367
-
3368
- able-prefs-form-keyboard ul {
3369
- list-style-type: none;
3370
- }
3371
-
3372
- span.able-modkey-alt,
3373
- span.able-modkey-ctrl,
3374
- span.able-modkey-shift {
3375
- color: #666;
3376
- font-style: italic;
3377
- }
3378
-
3379
- span.able-modkey {
3380
- font-weight: bold;
3381
- color: #000;
3382
- font-size: 1.1em;
3383
- }
3384
-
3385
- /*
3386
- Resize Window Dialog
3387
- */
3388
-
3389
- .able-resize-form h1 {
3390
- font-size: 1.15em;
3391
- }
3392
-
3393
- .able-resize-form div div {
3394
- margin: 1em;
3395
- }
3396
-
3397
- .able-resize-form label {
3398
- padding-right: 0.5em;
3399
- font-weight: bold;
3400
- }
3401
-
3402
- .able-resize-form input[type="text"] {
3403
- font-size: 1em;
3404
- }
3405
-
3406
- .able-resize-form input[readonly] {
3407
- color: #AAA;
3408
- }
3409
-
3410
- /*
3411
- Drag & Drop
3412
- */
3413
-
3414
- .able-window-toolbar {
3415
- background-color: #464646;
3416
- min-height: 15px;
3417
- padding: 10px;
3418
- border-style: solid;
3419
- border-width: 0 0 1px 0;
3420
- }
3421
-
3422
- .able-draggable:hover {
3423
- cursor: move;
3424
- }
3425
-
3426
- .able-window-toolbar .able-button-handler-preferences {
3427
- position: absolute;
3428
- top: 0;
3429
- right: 0;
3430
- font-size: 1.5em;
3431
- background-color: transparent;
3432
- border: none;
3433
- outline: none;
3434
- padding: 0;
3435
- z-index: 9300;
3436
- }
3437
-
3438
- .able-window-toolbar .able-button-handler-preferences:hover,
3439
- .able-window-toolbar .able-button-handler-preferences:focus {
3440
- outline-style: solid;
3441
- outline-width: medium;
3442
- }
3443
-
3444
- .able-window-toolbar .able-button-handler-preferences:hover {
3445
- outline-color: #8AB839 !important; /* green */
3446
- }
3447
-
3448
- .able-window-toolbar .able-button-handler-preferences:focus {
3449
- outline-color: #ffbb37 !important; /* yellow */
3450
- }
3451
-
3452
- .able-window-toolbar .able-popup {
3453
- position: absolute;
3454
- right: 0;
3455
- top: 0;
3456
- display: none;
3457
- }
3458
-
3459
- .able-drag {
3460
- border: 2px dashed #F90;
3461
- cursor: move;
3462
- }
3463
-
3464
- .able-resizable {
3465
- position: absolute;
3466
- width: 16px;
3467
- height: 16px;
3468
- padding: 5px 2px;
3469
- bottom: 0;
3470
- right: 0;
3471
- cursor: nwse-resize;
3472
- background: transparent url('../ableplayer/images/wingrip.png') no-repeat;
3473
- }
3474
-
3475
- /*
3476
- Sign Language Window
3477
- */
3478
-
3479
- .able-sign-window {
3480
- position: relative;
3481
- margin: 1em;
3482
- /* max-width: 100%; */
3483
- z-index: 8000;
3484
- }
3485
-
3486
- .able-sign-window video {
3487
- width: 100%;
3488
- }
3489
-
3490
- .able-sign-window:focus {
3491
- outline: none;
3492
- }
3493
-
3494
- /*
3495
- External chapters div
3496
- */
3497
-
3498
- div.able-chapters-div {
3499
- padding: 0;
3500
- }
3501
-
3502
- div.able-chapters-div .able-chapters-heading {
3503
- margin: 1em 0.75em;
3504
- font-size: 1.1em;
3505
- font-weight: bold;
3506
- }
3507
-
3508
- div.able-chapters-div ul {
3509
- list-style-type: none;
3510
- padding-left: 0;
3511
- }
3512
-
3513
- div.able-chapters-div ul li {
3514
- max-width: 100%;
3515
- padding: 0;
3516
- height: 2em;
3517
- }
3518
-
3519
- div.able-chapters-div button {
3520
- width: 100%;
3521
- height: 100%;
3522
- border: none;
3523
- background-color: transparent;
3524
- color: #000;
3525
- font-size: 1em;
3526
- text-align: left;
3527
- padding: 0.15em 1em;
3528
- }
3529
-
3530
- div.able-chapters-div li.able-current-chapter {
3531
- background-color: #000 !important;
3532
- }
3533
-
3534
- div.able-chapters-div li.able-current-chapter button {
3535
- color: #FFF !important;
3536
- }
3537
-
3538
- div.able-chapters-div li.able-focus {
3539
- background-color: #4C4C4C;
3540
- }
3541
-
3542
- div.able-chapters-div button:focus,
3543
- div.able-chapters-div button:hover,
3544
- div.able-chapters-div button::-moz-focus-inner {
3545
- border: 0;
3546
- outline: none;
3547
- color: #FFF !important;
3548
- }
3549
-
3550
- /*
3551
- Fullscreen settings
3552
- In v2.2.4b commented out :-webkit-full-screen style
3553
- This was causing the toolbar in fullscreen mode to be positioned slightly offscreen in webkit browsers
3554
- Safari had an additional problem in window height was being calculated (see event.js > onWindowResize())
3555
- Commenting out this style appears have no adverse effect in any browser
3556
- All other fullscreen styles were already commented out, and left here solely for reference
3557
- */
3558
-
3559
- /*
3560
- :-webkit-full-screen {
3561
- position: fixed;
3562
- width: 100%;
3563
- height: 100%;
3564
- top: 0;
3565
- background: none;
3566
- }
3567
- :-moz-full-screen {
3568
- position: fixed;
3569
- width: 100%;
3570
- height: 100%;
3571
- top: 0;
3572
- bottom: 20;
3573
- background: none;
3574
- }
3575
-
3576
- :-ms-fullscreen {
3577
- position: fixed;
3578
- width: 100%;
3579
- height: 100%;
3580
- top: 0;
3581
- background: none;
3582
- }
3583
-
3584
- :fullscreen {
3585
- position: fixed;
3586
- width: 100%;
3587
- height: 80%;
3588
- top: 0;
3589
- background: none;
3590
- }
3591
- */
3592
-
3593
- /*
3594
- Tooltips & Alerts
3595
- */
3596
-
3597
- .able-tooltip, .able-alert {
3598
- position: absolute;
3599
- padding: 5px 10px;
3600
- border-color: black;
3601
- border-width: 1px;
3602
- color: #000 !important;
3603
- background-color: #CCCCCC;
3604
- border-radius: 5px;
3605
- display: none;
3606
- }
3607
-
3608
- .able-alert {
3609
- background-color: #FFFFCC;
3610
- box-shadow: 0px 0px 16px #262626;
3611
- z-index: 9400;
3612
- }
3613
-
3614
- .able-popup {
3615
- z-index: 9200;
3616
- }
3617
-
3618
- .able-tooltip {
3619
- z-index: 9000;
3620
- }
3621
-
3622
- /*
3623
- Popup Menus
3624
- */
3625
-
3626
- .able-popup {
3627
- position: absolute;
3628
- margin: 0;
3629
- padding: 0;
3630
- border-color: black;
3631
- border-width: 1px;
3632
- background-color: #000;
3633
- opacity: 0.85;
3634
- border-radius: 5px;
3635
- display: none;
3636
- }
3637
-
3638
- .able-popup ul {
3639
- list-style-type: none;
3640
- margin: 0;
3641
- padding: 0;
3642
- }
3643
-
3644
- .able-popup li {
3645
- padding: 0.25em 1em 0.25em 0.25em;
3646
- margin: 1px;
3647
- }
3648
-
3649
- .able-popup label {
3650
- padding-left: 0.25em;
3651
- color: #FFF;
3652
- }
3653
-
3654
- .able-popup li.able-focus {
3655
- background-color: #CCC;
3656
- }
3657
-
3658
- .able-popup li.able-focus label {
3659
- color: #000;
3660
- }
3661
-
3662
- /*
3663
- Popup Menus with hidden radio buttons
3664
- e.g., chapters and preferences
3665
- */
3666
-
3667
- .able-popup-no-radio > ul > li > input {
3668
- position: absolute !important;
3669
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
3670
- clip: rect(1px, 1px, 1px, 1px);
3671
- }
3672
-
3673
- /*
3674
- Transcript
3675
- */
3676
-
3677
- .able-transcript-area {
3678
- border-width: 1px;
3679
- border-style: solid;
3680
- height: 400px;
3681
- z-index: 7000;
3682
- outline: none;
3683
- }
3684
-
3685
- .able-transcript {
3686
- position: relative; /* must be positioned for scrolling */
3687
- overflow-y: scroll;
3688
- padding-left: 5%;
3689
- padding-right: 5%;
3690
- /* width: 90%; */
3691
- background-color: #FFF;
3692
- height: 350px;
3693
- }
3694
-
3695
- .able-transcript div {
3696
- margin: 1em 0;
3697
- }
3698
-
3699
- .able-transcript-heading {
3700
- font-size: 1.4em;
3701
- font-weight: bold;
3702
- }
3703
-
3704
- .able-transcript-chapter-heading {
3705
- font-size: 1.2em;
3706
- font-weight: bold;
3707
- }
3708
-
3709
- .able-transcript div.able-transcript-desc {
3710
- background-color: #FEE;
3711
- border: thin solid #336;
3712
- font-style: italic;
3713
- padding: 1em;
3714
- }
3715
-
3716
- .able-transcript .able-unspoken {
3717
- font-weight: bold;
3718
- }
3719
-
3720
- .able-transcript .able-hidden {
3721
- position: absolute !important;
3722
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
3723
- clip: rect(1px, 1px, 1px, 1px);
3724
- }
3725
-
3726
- .able-highlight {
3727
- background: #FF6; /* light yellow */
3728
- }
3729
-
3730
- .able-previous {
3731
- background: black !important;
3732
- font-style: italic;
3733
- }
3734
-
3735
- .able-transcript span:hover,
3736
- .able-transcript span:focus,
3737
- .able-transcript span:active {
3738
- background: #CF6; /* light green */
3739
- cursor: pointer;
3740
- }
3741
-
3742
- .able-window-toolbar label {
3743
- margin-right: 10px;
3744
- color: #FFF;
3745
- }
3746
-
3747
- .able-window-toolbar input:focus,
3748
- .able-window-toolbar input:hover,
3749
- .able-controller input:focus,
3750
- .able-controller input:hover,
3751
- .able-controller button:focus,
3752
- .able-controller button:hover,
3753
- .able-seekbar-head:focus,
3754
- .able-seekbar-head:hover {
3755
- outline-style: solid;
3756
- outline-width: 2px;
3757
- }
3758
-
3759
- .able-window-toolbar input:focus,
3760
- .able-controller input:focus,
3761
- .able-controller button:focus,
3762
- .able-seekbar-head:focus {
3763
- outline-color: #ffbb37; /* yellow */
3764
- }
3765
-
3766
- .able-window-toolbar input:hover,
3767
- .able-controller input:hover,
3768
- .able-controller button:hover,
3769
- .able-seekbar-head:hover {
3770
- outline-color: #8AB839; /* green */
3771
- }
3772
-
3773
- .able-window-toolbar .transcript-language-select-wrapper {
3774
- float: right;
3775
- padding-right: 30px;
3776
- }
3777
-
3778
- /*
3779
- Playlist - Embedded
3780
- */
3781
-
3782
- .able-player .able-playlist {
3783
- font-size: 0.9em;
3784
- list-style-type: none;
3785
- margin: 0;
3786
- background-color: #FFFFFF;
3787
- padding: 5px 0;
3788
- }
3789
-
3790
- .able-player .able-playlist li {
3791
- background-color: #DDDDDD; /* default background color of each item in playlist */
3792
- margin: 5px;
3793
- padding: 5px 10px;
3794
- border-radius: 15px;
3795
- -moz-border-radius: 15px;
3796
- }
3797
-
3798
- .able-player .able-playlist li:hover,
3799
- .able-player .able-playlist li:focus,
3800
- .able-player .able-playlist li:active { /* playlist items when they have mouse or keyboard focus */
3801
- color: #FFFFFF;
3802
- background-color: #340449;
3803
- text-decoration: none;
3804
- }
3805
-
3806
- .able-player .able-playlist li.able-current { /* currently selected playlist item */
3807
- color: #000000;
3808
- background-color: #FFEEB3;
3809
- font-weight: bold;
3810
- outline: none;
3811
- text-decoration: none;
3812
- }
3813
-
3814
- .able-player .able-playlist li.able-current:after {
3815
- content: ' *';
3816
- }
3817
-
3818
- /*
3819
- Playlist - External
3820
- */
3821
-
3822
- .able-playlist {
3823
- }
3824
-
3825
- .able-playlist li {
3826
- }
3827
-
3828
- .able-playlist li:hover,
3829
- .able-playlist li:focus,
3830
- .able-playlist li:active { /* playlist items when they have mouse or keyboard focus */
3831
- text-decoration: none;
3832
- color: white;
3833
- background-color: black;
3834
- }
3835
-
3836
- .able-playlist li.able-current { /* currently selected playlist item */
3837
- font-weight: bold;
3838
- text-decoration: underline;
3839
- }
3840
-
3841
- .able-playlist li.able-current:after {
3842
- content: ' *';
3843
- }
3844
-
3845
- /*
3846
- Search
3847
- */
3848
-
3849
- .able-search-results ul li {
3850
- font-size: 1.1em;
3851
- margin-bottom: 1em;
3852
- }
3853
-
3854
- .able-search-results-time {
3855
- font-weight: bold;
3856
- text-decoration: underline;
3857
- cursor: pointer;
3858
- }
3859
-
3860
- .able-search-results-time:hover,
3861
- .able-search-results-time:focus,
3862
- .able-search-results-time:active {
3863
- color: #FFF;
3864
- background-color: #000;
3865
- text-decoration: none;
3866
- }
3867
-
3868
- .able-search-results-text {
3869
- padding-left: 1em;
3870
- }
3871
-
3872
- .able-search-term {
3873
- background-color: #FFC;
3874
- font-weight: bold;
3875
- }
3876
-
3877
- /*
3878
- Misc
3879
- */
3880
-
3881
- .able-clipped, .able-screenreader-alert {
3882
- /* hide from sighted users, but not screen reader users */
3883
- position: absolute !important;
3884
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
3885
- clip: rect(1px, 1px, 1px, 1px);
3886
- /* additional rules are needed to ensure clipped buttons are truly invisible in Safari on Mac OS X */
3887
- width: 1px !important;
3888
- height: 1px !important;
3889
- overflow: hidden !important;
3890
- }
3891
-
3892
- .able-error {
3893
- display: block;
3894
- background: #ffc;
3895
- border: 2px solid #000;
3896
- color: #FF0000;
3897
- margin: 0.75em;
3898
- padding: 0.5em;
3899
- }
3900
-
3901
- .able-fallback {
3902
- display: block;
3903
- text-align: center;
3904
- border: 2px solid #333355;
3905
- background-color: #EEE;
3906
- color: #000;
3907
- font-weight: bold;
3908
- font-size: 1.1em;
3909
- padding: 1em;
3910
- margin-bottom: 1em;
3911
- max-width: 500px;
3912
- width: 95%;
3913
- }
3914
-
3915
- .able-fallback div,
3916
- .able-fallback ul,
3917
- .able-fallback p {
3918
- text-align: left;
3919
- }
3920
-
3921
- .able-fallback li {
3922
- font-weight: normal;
3923
- }
3924
-
3925
- .able-fallback img {
3926
- width: 90%;
3927
- margin: 1em auto;
3928
- opacity: 0.3;
3929
- }
3930
-
3931
- .able-fallback img.able-poster {
3932
- position: relative;
3933
- }
3934
-
3935
- /*
3936
- SVG Icons
3937
- */
3938
-
3939
- button svg {
3940
- display: inline-block;
3941
- width: 1em;
3942
- height: 1em;
3943
- fill: currentColor;
3944
- }
3945
-
3946
- /*
3947
- icomoon.io font styling
3948
- */
3949
-
3950
- @font-face {
3951
- font-family: 'able';
3952
- src: url('../ableplayer/button-icons/fonts/able.eot?dqripi');
3953
- src: url('../ableplayer/button-icons/fonts/able.eot?dqripi#iefix') format('embedded-opentype'),
3954
- url('../ableplayer/button-icons/fonts/able.ttf?dqripi') format('truetype'),
3955
- url('../ableplayer/button-icons/fonts/able.woff?dqripi') format('woff'),
3956
- url('../ableplayer/button-icons/fonts/able.svg?dqripi#able') format('svg');
3957
- font-weight: normal;
3958
- font-style: normal;
3959
- }
3960
-
3961
- [class^="icon-"], [class*=" icon-"] {
3962
- /* use !important to prevent issues with browser extensions that change fonts */
3963
- font-family: 'able' !important;
3964
- speak: none;
3965
- font-style: normal;
3966
- font-weight: normal;
3967
- -webkit-font-feature-settings: normal;
3968
- font-feature-settings: normal;
3969
- font-variant: normal;
3970
- text-transform: none;
3971
- line-height: 1;
3972
-
3973
- /* Better Font Rendering =========== */
3974
- -webkit-font-smoothing: antialiased;
3975
- -moz-osx-font-smoothing: grayscale;
3976
- }
3977
-
3978
- .icon-play:before {
3979
- content: "\f04b";
3980
- }
3981
-
3982
- .icon-pause:before {
3983
- content: "\f04c";
3984
- }
3985
-
3986
- .icon-stop:before {
3987
- content: "\f04d";
3988
- }
3989
-
3990
- .icon-restart:before {
3991
- content: "\e900";
3992
- }
3993
-
3994
- .icon-rewind:before {
3995
- content: "\e603";
3996
- }
3997
-
3998
- .icon-forward:before {
3999
- content: "\e604";
4000
- }
4001
-
4002
- .icon-previous:before {
4003
- content: "\e901";
4004
- }
4005
-
4006
- .icon-next:before {
4007
- content: "\e902";
4008
- }
4009
-
4010
- .icon-slower:before {
4011
- content: "\f0dd";
4012
- }
4013
-
4014
- .icon-faster:before {
4015
- content: "\f0de";
4016
- }
4017
-
4018
- .icon-turtle:before {
4019
- content: "\e904";
4020
- }
4021
-
4022
- .icon-rabbit:before {
4023
- content: "\e905";
4024
- }
4025
-
4026
- .icon-ellipsis:before {
4027
- content: "\e903";
4028
- }
4029
-
4030
- .icon-pipe:before {
4031
- content: "\e600";
4032
- }
4033
-
4034
- .icon-captions:before {
4035
- content: "\e601";
4036
- }
4037
-
4038
- .icon-descriptions:before {
4039
- content: "\e602";
4040
- }
4041
-
4042
- .icon-sign:before {
4043
- content: "\e60a";
4044
- }
4045
-
4046
- .icon-volume-mute:before {
4047
- content: "\e606";
4048
- }
4049
-
4050
- .icon-volume-soft:before {
4051
- content: "\e60c";
4052
- }
4053
-
4054
- .icon-volume-medium:before {
4055
- content: "\e605";
4056
- }
4057
-
4058
- .icon-volume-loud:before {
4059
- content: "\e60b";
4060
- }
4061
-
4062
- .icon-volume-up:before {
4063
- content: "\e607";
4064
- }
4065
-
4066
- .icon-volume-down:before {
4067
- content: "\e608";
4068
- }
4069
-
4070
- .icon-chapters:before {
4071
- content: "\e609";
4072
- }
4073
-
4074
- .icon-transcript:before {
4075
- content: "\f15c";
4076
- }
4077
-
4078
- .icon-preferences:before {
4079
- content: "\e60d";
4080
- }
4081
-
4082
- .icon-close:before {
4083
- content: "\f00d";
4084
- }
4085
-
4086
- .icon-fullscreen-expand:before {
4087
- content: "\f065";
4088
- }
4089
-
4090
- .icon-fullscreen-collapse:before {
4091
- content: "\f066";
4092
- }
4093
-
4094
- .icon-help:before {
4095
- content: "\f128";
4096
- }
4097
-
4098
- /* Solarized Light
4099
-
4100
- For use with Jekyll and Pygments
4101
-
4102
- http://ethanschoonover.com/solarized
4103
-
4104
- SOLARIZED HEX ROLE
4105
- --------- -------- ------------------------------------------
4106
- base01 #586e75 body text / default code / primary content
4107
- base1 #93a1a1 comments / secondary content
4108
- base3 #fdf6e3 background
4109
- orange #cb4b16 constants
4110
- red #dc322f regex, special keywords
4111
- blue #268bd2 reserved keywords
4112
- cyan #2aa198 strings, numbers
4113
- green #859900 operators, other keywords
4114
-
4115
- */
4116
-
4117
- pre {
4118
- white-space: pre-wrap;
4119
- }
4120
-
4121
- .highlight {
4122
- color: #586e75;
4123
- -moz-tab-size: 2;
4124
- -o-tab-size: 2;
4125
- tab-size: 2;
4126
- font-weight: bold /* Comment */ /* Error */ /* Generic */ /* Keyword */ /* Literal */ /* Name */ /* Operator */ /* Other */ /* Punctuation */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Error */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Output */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Generic.Traceback */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Date */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Other */ /* Name.Property */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */
4127
- }
4128
-
4129
- .highlight .c {
4130
- color: #93a1a1
4131
- }
4132
-
4133
- .highlight .err {
4134
- color: #586e75
4135
- }
4136
-
4137
- .highlight .g {
4138
- color: #586e75
4139
- }
4140
-
4141
- .highlight .k {
4142
- color: #859900
4143
- }
4144
-
4145
- .highlight .l {
4146
- color: #586e75
4147
- }
4148
-
4149
- .highlight .n {
4150
- color: #586e75
4151
- }
4152
-
4153
- .highlight .o {
4154
- color: #859900
4155
- }
4156
-
4157
- .highlight .x {
4158
- color: #cb4b16
4159
- }
4160
-
4161
- .highlight .p {
4162
- color: #586e75
4163
- }
4164
-
4165
- .highlight .cm {
4166
- color: #93a1a1
4167
- }
4168
-
4169
- .highlight .cp {
4170
- color: #859900
4171
- }
4172
-
4173
- .highlight .c1 {
4174
- color: #93a1a1
4175
- }
4176
-
4177
- .highlight .cs {
4178
- color: #859900
4179
- }
4180
-
4181
- .highlight .gd {
4182
- color: #2aa198
4183
- }
4184
-
4185
- .highlight .ge {
4186
- color: #586e75;
4187
- font-style: italic
4188
- }
4189
-
4190
- .highlight .gr {
4191
- color: #dc322f
4192
- }
4193
-
4194
- .highlight .gh {
4195
- color: #cb4b16
4196
- }
4197
-
4198
- .highlight .gi {
4199
- color: #859900
4200
- }
4201
-
4202
- .highlight .go {
4203
- color: #586e75
4204
- }
4205
-
4206
- .highlight .gp {
4207
- color: #586e75
4208
- }
4209
-
4210
- .highlight .gs {
4211
- color: #586e75;
4212
- font-weight: bold
4213
- }
4214
-
4215
- .highlight .gu {
4216
- color: #cb4b16
4217
- }
4218
-
4219
- .highlight .gt {
4220
- color: #586e75
4221
- }
4222
-
4223
- .highlight .kc {
4224
- color: #cb4b16
4225
- }
4226
-
4227
- .highlight .kd {
4228
- color: #268bd2
4229
- }
4230
-
4231
- .highlight .kn {
4232
- color: #859900
4233
- }
4234
-
4235
- .highlight .kp {
4236
- color: #859900
4237
- }
4238
-
4239
- .highlight .kr {
4240
- color: #268bd2
4241
- }
4242
-
4243
- .highlight .kt {
4244
- color: #dc322f
4245
- }
4246
-
4247
- .highlight .ld {
4248
- color: #586e75
4249
- }
4250
-
4251
- .highlight .m {
4252
- color: #2aa198
4253
- }
4254
-
4255
- .highlight .s {
4256
- color: #2aa198
4257
- }
4258
-
4259
- .highlight .na {
4260
- color: #586e75
4261
- }
4262
-
4263
- .highlight .nb {
4264
- color: #B58900
4265
- }
4266
-
4267
- .highlight .nc {
4268
- color: #268bd2
4269
- }
4270
-
4271
- .highlight .no {
4272
- color: #cb4b16
4273
- }
4274
-
4275
- .highlight .nd {
4276
- color: #268bd2
4277
- }
4278
-
4279
- .highlight .ni {
4280
- color: #cb4b16
4281
- }
4282
-
4283
- .highlight .ne {
4284
- color: #cb4b16
4285
- }
4286
-
4287
- .highlight .nf {
4288
- color: #268bd2
4289
- }
4290
-
4291
- .highlight .nl {
4292
- color: #586e75
4293
- }
4294
-
4295
- .highlight .nn {
4296
- color: #586e75
4297
- }
4298
-
4299
- .highlight .nx {
4300
- color: #586e75
4301
- }
4302
-
4303
- .highlight .py {
4304
- color: #586e75
4305
- }
4306
-
4307
- .highlight .nt {
4308
- color: #268bd2
4309
- }
4310
-
4311
- .highlight .nv {
4312
- color: #268bd2
4313
- }
4314
-
4315
- .highlight .ow {
4316
- color: #859900
4317
- }
4318
-
4319
- .highlight .w {
4320
- color: #586e75
4321
- }
4322
-
4323
- .highlight .mf {
4324
- color: #2aa198
4325
- }
4326
-
4327
- .highlight .mh {
4328
- color: #2aa198
4329
- }
4330
-
4331
- .highlight .mi {
4332
- color: #2aa198
4333
- }
4334
-
4335
- .highlight .mo {
4336
- color: #2aa198
4337
- }
4338
-
4339
- .highlight .sb {
4340
- color: #93a1a1
4341
- }
4342
-
4343
- .highlight .sc {
4344
- color: #2aa198
4345
- }
4346
-
4347
- .highlight .sd {
4348
- color: #586e75
4349
- }
4350
-
4351
- .highlight .s2 {
4352
- color: #2aa198
4353
- }
4354
-
4355
- .highlight .se {
4356
- color: #cb4b16
4357
- }
4358
-
4359
- .highlight .sh {
4360
- color: #586e75
4361
- }
4362
-
4363
- .highlight .si {
4364
- color: #2aa198
4365
- }
4366
-
4367
- .highlight .sx {
4368
- color: #2aa198
4369
- }
4370
-
4371
- .highlight .sr {
4372
- color: #dc322f
4373
- }
4374
-
4375
- .highlight .s1 {
4376
- color: #2aa198
4377
- }
4378
-
4379
- .highlight .ss {
4380
- color: #2aa198
4381
- }
4382
-
4383
- .highlight .bp {
4384
- color: #268bd2
4385
- }
4386
-
4387
- .highlight .vc {
4388
- color: #268bd2
4389
- }
4390
-
4391
- .highlight .vg {
4392
- color: #268bd2
4393
- }
4394
-
4395
- .highlight .vi {
4396
- color: #268bd2
4397
- }
4398
-
4399
- .highlight .il {
4400
- color: #2aa198
4401
- }
4402
-
4403
- :not(.highlight) code {
4404
- color: #003366;
4405
- font-size: 1.05em;
4406
- font-weight: bold;
4407
- }
1
+ .no-display,.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.no-display.focusable:active,.no-display.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;width:auto;white-space:inherit}@font-face{font-family:Noto Sans;src:url(../fonts/notosans-regular.woff2) format("woff2"),url(../fonts/notosans-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Noto Sans;src:url(../fonts/notosans-italic.woff2) format("woff2"),url(../fonts/notosans-italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Noto Sans;src:url(../fonts/notosans-bold.woff2) format("woff2"),url(../fonts/notosans-bold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Noto Sans;src:url(../fonts/notosans-bolditalic.woff2) format("woff2"),url(../fonts/notosans-bolditalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Anonymous Pro;src:url(../fonts/anonymouspro-regular.woff2) format("woff2"),url(../fonts/anonymouspro-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Anonymous Pro;src:url(../fonts/anonymouspro-italic.woff2) format("woff2"),url(../fonts/anonymouspro-italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Anonymous Pro;src:url(../fonts/anonymouspro-bold.woff2) format("woff2"),url(../fonts/anonymouspro-bold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Anonymous Pro;src:url(../fonts/anonymouspro-bolditalic.woff2) format("woff2"),url(../fonts/anonymouspro-bolditalic.woff) format("woff");font-weight:600;font-style:italic}html{background-color:#f2f2f2}@media print{html{background-color:#fff}}body{font-family:Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-size:16px;font-size:1rem;text-decoration-skip-ink:none;background-color:#fafafc;color:#1d1d1d;padding:0;padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);margin:0 auto;max-width:1250px}@media print{body{color:#000;background-color:#fff;font-size:10pt;text-decoration-skip-ink:none}}@supports (display:grid){body{max-width:none;margin:0}}code{font-size:1em;font-family:Anonymous Pro,monospace}a{color:#036}@media print{a{color:#000}}a:focus,a:hover{color:#005a6a}a:visited{color:#606}a.stealthy-link{text-decoration:none}a.stealthy-link:focus,a.stealthy-link:hover,a.stealthy-link:visited{color:inherit}@media print{a[href^="#"]:after{content:"(⇘ " attr(href) ")"}a[href^=http]:after{content:" (" attr(href) ")"}a[href^="/WAI/"]:after{content:" (https://www.w3.org" attr(href) ")"}}[tabindex]:not([tabindex="-1"]),a,button,input,select,submit,textarea{outline:2px solid transparent;outline-offset:5px;transition:outline-offset .2s linear}[tabindex]:not([tabindex="-1"]):focus,a:focus,button:focus,input:focus,select:focus,submit:focus,textarea:focus{outline-color:currentColor;outline-offset:2px}.default-container,.default-grid{padding:0 32px}@media (min-width:35em){.default-container,.default-grid{padding:0}}.default-grid{padding:0 16px}@media (min-width:60em){.default-grid{padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:[complete-start] minmax(16px,1fr) [navigation-start] repeat(2,minmax(0,130px)) [navigation-end content-start] repeat(6,minmax(0,130px)) [content-end] minmax(16px,1fr) [complete-end]}@supports (display:grid){.default-grid{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.default-grid .inner{grid-column-start:navigation-start;grid-column-end:content-end}}@media print{.default-grid{display:block}}@media (min-width:60em){.grid-3{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:repeat(3,minmax(0,1fr))}@supports (display:grid){.grid-3{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.grid-3.nogap{grid-column-gap:0}}.grid-3 .col1,.grid-3 .from-col1{grid-column-start:1}.grid-3 .col1,.grid-3 .to-col1{grid-column-end:2}.grid-3 .col2,.grid-3 .from-col2{grid-column-start:2}.grid-3 .col2,.grid-3 .to-col2{grid-column-end:3}.grid-3 .col3,.grid-3 .from-col3{grid-column-start:3}.grid-3 .col3,.grid-3 .to-col3{grid-column-end:4}@media (min-width:60em){.grid-4{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:repeat(4,minmax(0,1fr))}@supports (display:grid){.grid-4{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.grid-4.nogap{grid-column-gap:0}}.grid-4 .col1,.grid-4 .from-col1{grid-column-start:1}.grid-4 .col1,.grid-4 .to-col1{grid-column-end:2}.grid-4 .col2,.grid-4 .from-col2{grid-column-start:2}.grid-4 .col2,.grid-4 .to-col2{grid-column-end:3}.grid-4 .col3,.grid-4 .from-col3{grid-column-start:3}.grid-4 .col3,.grid-4 .to-col3{grid-column-end:4}.grid-4 .col4,.grid-4 .from-col4{grid-column-start:4}.grid-4 .col4,.grid-4 .to-col4{grid-column-end:5}@media (min-width:60em){.grid-6{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:repeat(6,minmax(0,1fr))}@supports (display:grid){.grid-6{display:grid;grid-column-gap:32px;padding:0;max-width:none}}}.grid-6 .col1,.grid-6 .from-col1{grid-column-start:1}.grid-6 .col1,.grid-6 .to-col1{grid-column-end:2}.grid-6 .col2,.grid-6 .from-col2{grid-column-start:2}.grid-6 .col2,.grid-6 .to-col2{grid-column-end:3}.grid-6 .col3,.grid-6 .from-col3{grid-column-start:3}.grid-6 .col3,.grid-6 .to-col3{grid-column-end:4}.grid-6 .col4,.grid-6 .from-col4{grid-column-start:4}.grid-6 .col4,.grid-6 .to-col4{grid-column-end:5}.grid-6 .col5,.grid-6 .from-col5{grid-column-start:5}.grid-6 .col5,.grid-6 .to-col5{grid-column-end:6}.grid-6 .col6,.grid-6 .from-col6{grid-column-start:6}.grid-6 .col6,.grid-6 .to-col6{grid-column-end:7}.grid-6 .col1,.grid-6 .col2,.grid-6 .col3,.grid-6 .col4,.grid-6 .col5,.grid-6 .col6,.grid-6 .from-col2,.grid-6 .from-col3,.grid-6 .from-col4,.grid-6 .from-col5,.grid-6 .from-col6,.grid-6.from-col1{-ms-flex-preferred-size:25%;flex-basis:25%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.grid-6 .col2,.grid-6 .col3,.grid-6 .col4,.grid-6 .col5,.grid-6 .col6,.grid-6 .from-col2,.grid-6 .from-col3,.grid-6 .from-col4,.grid-6 .from-col5,.grid-6 .from-col6{margin-left:32px}@supports (display:grid){.grid-6 .col2,.grid-6 .col3,.grid-6 .col4,.grid-6 .col5,.grid-6 .col6,.grid-6 .from-col2,.grid-6 .from-col3,.grid-6 .from-col4,.grid-6 .from-col5,.grid-6 .from-col6{margin-left:0}}.grid-6.from-col1.to-col6{width:100%}.grid-three-five .col1,.grid-three-five .col2{padding-left:16px;padding-right:16px}@media (min-width:35em){.grid-three-five{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:[complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]}@supports (display:grid){.grid-three-five{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.grid-three-five .col1,.grid-three-five .col2{padding:0}}.grid-three-five .col1,.grid-three-five .col2{-ms-flex-negative:1;flex-shrink:1}.grid-three-five .col1{-ms-flex-preferred-size:35%;flex-basis:35%;grid-column-start:three-start;grid-column-end:three-end;margin-right:32px}@supports (display:grid){.grid-three-five .col1{margin-right:0}}.grid-three-five .col2{-ms-flex-preferred-size:61%;flex-basis:61%;grid-column-start:five-start;grid-column-end:five-end}.grid-three-five .col12{-ms-flex-preferred-size:100%;flex-basis:100%;grid-column-start:three-start;grid-column-end:five-end}@media (min-width:35em) and (min-width:35em){.grid-three-five{grid-template-columns:[complete-start] minmax(16px,1fr) [three-start] repeat(3,minmax(0,130px)) [three-end five-start] repeat(5,minmax(0,130px)) [five-end] minmax(16px,1fr) [complete-end]}}.grid-five-three .col1,.grid-five-three .col2{padding-left:16px;padding-right:16px}@media (min-width:35em){.grid-five-three{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:[complete-start] 0 [three-start five-start] 1fr [three-end five-end] 0 [complete-end]}@supports (display:grid){.grid-five-three{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.grid-five-three .col1,.grid-five-three .col2{padding:0}}.grid-five-three .col1,.grid-five-three .col2{-ms-flex-negative:1;flex-shrink:1}.grid-five-three .col1{-webkit-box-flex:1;-ms-flex:1 1 62%;flex:1 1 62%;grid-column-start:five-start;grid-column-end:five-end;margin-right:32px}@supports (display:grid){.grid-five-three .col1{margin-right:0}}.grid-five-three .col2{-webkit-box-flex:1;-ms-flex:1 1 37%;flex:1 1 37%;grid-column-start:three-start;grid-column-end:three-end}.grid-five-three .col12{-ms-flex-preferred-size:100%;flex-basis:100%;grid-column-start:five-start;grid-column-end:three-end}@media (min-width:35em) and (min-width:35em){.grid-five-three{grid-template-columns:[complete-start] minmax(16px,1fr) [five-start] repeat(5,minmax(0,130px)) [five-end three-start] repeat(3,minmax(0,130px)) [three-end] minmax(16px,1fr) [complete-end]}}.grid-4q{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:[complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end]}@supports (display:grid){.grid-4q{display:grid;grid-column-gap:32px;padding:0;max-width:none}}@media (min-width:60em){.grid-4q{grid-template-columns:[complete-start] minmax(16px,1fr) [content-start q1-start] repeat(2,minmax(0,130px)) [q1-end q2-start] repeat(2,minmax(0,130px)) [q2-end q3-start] repeat(2,minmax(0,130px)) [q3-end q4-start] repeat(2,minmax(0,130px)) [q4-end content-end] minmax(16px,1fr) [complete-end]}}.grid-4q.nogap{grid-template-columns:[complete-start] 0 [q1-start q2-start q3-start q4-start] 1fr [q1-end q2-end q3-end q4-end] 0 [complete-end];grid-column-gap:0}@media (min-width:60em){.grid-4q.nogap{grid-template-columns:[complete-start] minmax(16px,1fr) [content-start q1-start] repeat(2,minmax(0,158px)) [q1-end q2-start] repeat(2,minmax(0,158px)) [q2-end q3-start] repeat(2,minmax(0,158px)) [q3-end q4-start] repeat(2,minmax(0,158px)) [q4-end content-end] minmax(16px,1fr) [complete-end]}}.grid-4q .q1-start{grid-column-start:q1-start}.grid-4q .q1-start,.grid-4q .q2-start{-ms-flex-preferred-size:25%;flex-basis:25%;-ms-flex-negative:1;flex-shrink:1;margin-right:32px}.grid-4q .q2-start{grid-column-start:q2-start}.grid-4q .q3-start{grid-column-start:q3-start}.grid-4q .q3-start,.grid-4q .q4-start{-ms-flex-preferred-size:25%;flex-basis:25%;-ms-flex-negative:1;flex-shrink:1;margin-right:32px}.grid-4q .q4-start{grid-column-start:q4-start}.grid-4q .q1-end{grid-column-end:q1-end}.grid-4q .q2-end{grid-column-end:q2-end}.grid-4q .q3-end{grid-column-end:q3-end}.grid-4q .q4-end{grid-column-end:q4-end;margin-right:0}.grid-4q .q1-start.q2-end,.grid-4q .q2-start.q3-end,.grid-4q .q3-start.q4-end{-ms-flex-preferred-size:50%;flex-basis:50%}.grid-4q .q1-start.q3-end,.grid-4q .q2-start.q4-end{-ms-flex-preferred-size:75%;flex-basis:75%}.grid-4q.nogap .q1-start,.grid-4q.nogap .q2-start,.grid-4q.nogap .q3-start,.grid-4q.nogap .q4-start{margin-right:0}@supports(display:grid){.grid-4q .q1-start,.grid-4q .q2-start,.grid-4q .q3-start,.grid-4q .q4-start{margin-right:0}}.leftcol nav{-ms-flex-preferred-size:24.25%;flex-basis:24.25%;-ms-flex-negative:0;flex-shrink:0}.leftcol main{grid-area:content;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:32px}@supports (display:grid){.leftcol main{margin-left:0}}@media (min-width:35em){.grid-line-right{border-right:1px solid #ddd;margin-right:-17px!important;padding-right:17px!important}}@media (min-width:35em){.grid-line-left{border-left:1px solid #ddd;margin-left:-16px!important;padding-left:16px!important}}.able-media-container,.media-wrapper{position:relative;padding-top:56.25%}.able-media-container .img,.able-media-container iframe,.able-media-container video,.media-wrapper .img,.media-wrapper iframe,.media-wrapper video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none}.contentarea{position:relative}img.symbol{float:right;margin-left:1em;margin-bottom:1em}main img{max-width:100%}figure{margin:0 0 1em}figcaption{font-weight:700;border-bottom:1px solid #ddd;margin-bottom:.5em}.showhidebutton{background:transparent;color:inherit;border-color:transparent;font-weight:400}.showhidebutton:after{display:inline-block;background-color:#036;color:#fff;content:"–";font-weight:700;margin-left:.5em;padding:.3em;border-radius:3px;width:1em;height:1em;line-height:1em}.showhidebutton:focus:after,.showhidebutton:hover:after{color:#036;background-color:#fff!important}.showhidebutton[aria-expanded=false]:after{content:"+"}.button,button{cursor:pointer;border-radius:5px;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:8px 12px;border:2px solid #005a6a;font-size:13px;font-size:.8125rem;line-height:1.4;color:#fff;background-color:#005a6a;text-decoration:none;font-weight:700}.button:visited,button:visited{color:#fff}.button.button-nobg,button.button-nobg{background:transparent}.button.button-nobg:focus,.button.button-nobg:hover,button.button-nobg:focus,button.button-nobg:hover{background-color:transparent;border-color:#fff}.button.button-noborder,button.button-noborder{border-color:transparent}.button.button-noborder:focus,.button.button-noborder:hover,button.button-noborder:focus,button.button-noborder:hover{border-color:#fff}.button.button-small,button.button-small{padding:2px 4px}.stealthy-link:focus span.button,.stealthy-link:hover span.button{background-color:#036;color:#fff}.button:focus,.button:hover,button:focus,button:hover{border-color:#036;background-color:#036;color:#fff}.button:focus,button:focus{outline-color:#036}.button:disabled,button:disabled{opacity:.75;text-decoration:line-through}.button-secondary{background-color:#fff;color:#005a6a}.button-secondary:visited{color:#036}.button-secondary:visited:focus,.button-secondary:visited:hover{color:#fff}.button-backtotop{position:fixed;cursor:pointer;bottom:16px;right:16px;opacity:.85;border-radius:100px;background-color:#036;border-color:#036;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);opacity:0;transition:opacity .5s linear}.button-backtotop.active,.button-backtotop:focus{opacity:1}.button-backtotop svg{vertical-align:-1px}.button-backtotop.inline{position:static;float:right}.button-menu{text-transform:uppercase;background-color:#fff;color:#036;border-color:#eed009}.button-menu:focus,.button-menu:hover{border-color:#fff;background-color:#eed009;color:#1d1d1d}.button-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px}.button-group .button,.button-group button{min-width:7em;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;margin:8px}img.left{float:left;margin-right:1em}img.right{clear:right;float:right;margin-left:1em}mark{background-color:rgba(238,208,9,.35)}p{margin:1em 0}blockquote{font-style:italic;margin-bottom:1em}blockquote cite{display:block;font-style:normal;padding-left:32px;padding-left:2rem}blockquote cite:before{content:"— ";font-weight:700;margin-left:-32px;margin-left:-2rem;width:32px;width:2rem;display:inline-block}blockquote p:first-of-type:before{content:"“";margin-left:-.75ch}blockquote p:last-of-type{margin-bottom:0}blockquote p:last-of-type:after{content:"”"}blockquote.special{text-align:center}blockquote.pull{position:relative;font-size:20px;font-size:1.25rem;padding-left:1ch;margin-left:64px;margin-left:4rem;border:1px solid transparent;color:#036;font-weight:700;border-left:2px solid #ddd}blockquote.pull.left,blockquote.pull.right{max-width:256px;max-width:16rem}blockquote.pull.right{float:right}blockquote.pull.left{float:left;margin-right:32px;margin-right:2rem}blockquote.pull p:first-of-type:before{font-size:80px;font-size:5rem;position:absolute;left:0;margin-left:-1.25ch;top:-.25ch}blockquote.pull cite{margin-top:8px;margin-top:.5rem;font-size:16px;font-size:1rem;font-weight:400;color:#1d1d1d}blockquote.pull.alt-1{color:#005a9c}blockquote.pull.alt-2{color:#005a6a}blockquote.pull.alt-3{color:#1d1d1d}.box{border:1px solid #ddd;margin-top:16px;background-color:#fff}.box+.box#toc{margin-top:0;border-top:0}.box.box-space-above{margin-top:90px}.box-h{padding:8px 16px;color:#005a6a;font-weight:700;background-color:#f2f2f2}@media print{.box-h{color:#000}}.box-h h1,.box-h h2,.box-h h3,.box-h h4,.box-h h5,.box-h h6{border:none;font-size:inherit;color:inherit;margin:0;padding:0;font-weight:inherit;display:inline-block}@supports (all:unset){.box-h h1,.box-h h2,.box-h h3,.box-h h4,.box-h h5,.box-h h6{all:unset}}.box-h-large{font-size:20px;font-size:1.25rem;color:#036;padding-bottom:7px;font-weight:400;border-bottom:1px solid #ddd}.box-h-icon svg{margin-right:4px}.box-i{padding:8px 16px;font-size:14/16 * 16px;font-size:14/16 * 1rem}.box-i:after,.box-i:before{content:" ";display:table}.box-i:after{clear:both}.box-i>:first-child{margin-top:0}.box-i>:last-child{margin-bottom:0}.box.box-list .box-i ol,.box.box-list .box-i ul{margin:0;padding:0;list-style:none}.box.box-linklist .box-i{padding:0}.box.box-simple .box-i{padding:2px 8px 8px}.box.box-simple .box-h-simple{padding:8px 8px 2px;background-color:transparent;line-height:1.57}.box.box-simple.box-aside .box-i,.box.box-simple .box-h-simple{font-size:14px;font-size:.875rem}@media (min-width:35em){.box.box-left,.box.box-right{width:33%;margin-top:-9px}.box.box-left.box-simple,.box.box-right.box-simple{margin-top:-3px}.box.box-left{clear:left;float:left;margin-right:1em}.box.box-right{clear:right;float:right;margin-left:1em}}.breadcrumb{font-size:13px;font-size:.8125rem;background-color:#fff;border-bottom:1px solid #ddd;padding-top:16px;padding-bottom:16px;margin-bottom:32px}.breadcrumb ul{margin:0;padding:0;grid-column:2/10}.breadcrumb ul li{display:inline-block;margin:0;padding:0}.breadcrumb ul li:after{content:" / ";color:#005a6a;white-space:pre-wrap}.breadcrumb ul li:last-child:after{content:"";display:none}.breadcrumb a{color:#036}@media print{.breadcrumb a:after{content:""}}.breadcrumb [aria-current=page]{font-weight:700;text-decoration:none}.content{display:grid;grid-area:content;grid-template-columns:repeat(6,minmax(0,120px));grid-column-gap:32px;&>.ref-side,>& .aside,>& .demo-side{grid-column:5/7;font-size:14px;font-size:.875rem;line-height:1.2}&>.ref-side p:first-of-type,>& .aside p:first-of-type,>& .demo-side p:first-of-type{margin-top:0}}.content>*{grid-column:1/5;grid-auto-flow:dense}.content.wide{grid-template-columns:repeat(8,minmax(0,120px));grid-column-start:navigation;grid-column-end:content}.content.wide>*{grid-column:3/9}.content.wide .sn-contents{grid-column:1/3;grid-row:1/99}.example-bar{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:repeat(6,minmax(0,1fr))}@supports (display:grid){.example-bar{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.example-bar>*{grid-column:2/7}.example-bar .eg{grid-column:1/2;grid-row:1/99;text-align:right;border-right:2px solid #005a6a;padding:0 8px;font-weight:700;font-style:italic;color:#005a6a}.example-sheet{display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:32px;padding-right:32px;grid-template-columns:repeat(6,minmax(0,1fr))}@supports (display:grid){.example-sheet{display:grid;grid-column-gap:32px;padding:0;max-width:none}}.example-sheet .example-sheet-inner{grid-column:2/6;background-color:#fff;padding:16px 32px}.decision-tree{list-style:none;margin:1em 0;padding:0}.decision-tree>li>strong{display:block;padding:1em .5em}.decision-tree>li>ul{padding:0;list-style:none}@supports ((display:-webkit-box) or (display:flex)){.decision-tree>li>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}}.decision-tree>li>ul>li{text-indent:0;box-sizing:border-box;font-weight:400;padding:.5em;//:1px solid #aaa}@supports ((display:-webkit-box) or (display:flex)){.decision-tree>li>ul>li{-ms-flex-preferred-size:25%;flex-basis:25%}}@supports ((display:-webkit-box) or (display:flex)){.decision-tree>li>ul>li:nth-child(odd){-ms-flex-preferred-size:75%;flex-basis:75%}}.decision-tree>li>ul>li:nth-child(odd):last-child{display:block;-ms-flex-preferred-size:100%;flex-basis:100%}.decision-tree>li>ul>li ul{padding:0;margin:0}.decision-tree>li>ul>li li{padding:0;padding-bottom:.5em;margin-bottom:.5em;border-bottom:1px solid #3b3b3b;list-style:none}.decision-tree>li>ul>li li>em{display:block;padding-left:1.5em;position:relative;margin-top:.25em;font-style:normal}.decision-tree>li>ul>li li>em:before{position:absolute;content:"";top:.2em;margin-left:-1.5em}.decision-tree>li>ul>li li:last-child{border-bottom-style:none;padding-bottom:0;margin-bottom:0}.decision-tree .yes{background-color:#e5f2ff;border-bottom:none}.decision-tree .yes li{list-style:disc;margin-left:1em}.decision-tree .yes li:only-child{list-style:none}.decision-tree .no{background-color:#f2c0c1;border-bottom:none;position:relative}.decision-tree .no:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:hsla(0,0%,47%,0);border-top-color:#f2c0c1;border-width:16px;border-width:1rem;margin-left:-8px;margin-left:-.5rem;z-index:500}.doc-archived h1:before{content:"Archived"}.doc-draft h1:before{content:"Draft"}.doc-note h1:before{background-color:#eed009;color:#091832;display:inline-block;padding:4px 8px;margin-top:-8px;margin-right:8px;font-size:14px;font-size:.875rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;vertical-align:middle;border-radius:3px}.doc-note-box{border:2px solid #eed009;padding:8px;background-color:#fff;margin-bottom:20px}.doc-note-box p:first-child{margin-top:0}.doc-note-box p:last-child{margin-bottom:0}details{padding-left:32px;padding-left:2rem}summary{cursor:pointer;display:block;margin-left:-32px;margin-left:-2rem}summary::-webkit-details-marker{display:none}summary>:first-child:before{content:"+";margin-right:8px;margin-right:.5rem;display:inline-block;border-radius:5px;width:20.8px;width:1.3rem;height:20.8px;height:1.3rem;line-height:.9;background:#fff;color:#005a6a;border:2px solid #005a6a;text-align:center;font-weight:700}summary:focus>:first-child:before,summary:hover>:first-child:before{background:#036;border-color:#036;color:#fff}details[open]>summary>:first-child:before{content:"–"}details>div:after{content:"";display:block;clear:both}.excol-all{margin:16px 0}figure.shrink-wrap{box-sizing:border-box;background-color:#fff;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%;border:1px solid #ddd;border-radius:3px;padding:10px}@media (min-width:47.5em){figure.shrink-wrap .figcontent{display:-webkit-box;display:-ms-flexbox;display:flex}figure.shrink-wrap .figcontent>*{-webkit-box-flex:1;-ms-flex:1;flex:1}}figure.shrink-wrap img{border:1px solid #ddd;max-width:none!important}figure.shrink-wrap figcaption{font-weight:400;border:none;margin:0}.page-footer,.site-footer{font-size:14px;font-size:.875rem;padding-top:16px;padding-bottom:16px}@media print{.page-footer,.site-footer{font-size:8pt}}.page-footer p:first-of-type,.site-footer p:first-of-type{margin-top:0}.page-footer p:last-of-type,.site-footer p:last-of-type{margin-bottom:0}.page-footer{margin-top:32px;background-color:#efefef}.page-footer .inner{grid-area:content}.site-footer{margin-top:32px;padding-top:16px;padding-bottom:16px;background-color:#3b3b3b;color:#fff}@media print{.site-footer{background-color:#efefef;color:#3b3b3b;border-top:1px solid #3b3b3b}}.site-footer a{color:#fff}.site-footer a.largelink{color:#eed009;font-size:20px;font-size:1.25rem;text-decoration:none}@media print{.site-footer a.largelink{color:#3b3b3b;font-size:12pt}}.site-footer a.largelink:focus,.site-footer a.largelink:hover{text-decoration:underline}.site-footer .footer-list-header{font-weight:700;border-bottom:1px solid hsla(0,0%,87%,.32);padding:4px 0}.site-footer .about{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media print{.site-footer .about{grid-column-end:q4-end;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.site-footer .about p{margin:0}}@media print{.site-footer>:not(.about){display:none}}.page-footer+.site-footer{margin-top:0}.site-footer ul{margin:0;padding:0}.site-footer ul li{list-style:none}.footnotes{margin-top:60px}.footnotes ol{font-size:13.6px;font-size:.85rem}input,select,textarea{font-size:1em;font-family:inherit}input[type=search]{-webkit-appearance:none}fieldset{margin:0 0 32px;margin:0 0 2rem;padding:0}input:not([type=checkbox]):not([type=radio]),textarea{border:1px solid #686868}input:not([type=checkbox]):not([type=radio]):focus,input:not([type=checkbox]):not([type=radio]):hover,textarea:focus,textarea:hover{border:1px solid #036}& ::-webkit-input-placeholder{color:#767676;font-style:italic;opacity:1}& :-moz-placeholder,& ::-moz-placeholder{color:#767676;font-style:italic;opacity:1}& :-ms-input-placeholder{color:#767676;font-style:italic;opacity:1}.field{padding:4px;margin:0 0 32px;margin:0 0 2rem}.field label{display:block}.field input:not([type=checkbox]):not([type=radio]),.field textarea{display:block;box-sizing:border-box;width:100%;padding:8px}.field input:not([type=checkbox]):not([type=radio]):focus,.field textarea:focus{outline:none;border-color:#005a9c;background-color:#edf4fa}.field input:not([type=checkbox]):not([type=radio]):focus ::-webkit-input-placeholder,.field textarea:focus ::-webkit-input-placeholder{color:#545554}.field input:not([type=checkbox]):not([type=radio]):focus :-moz-placeholder,.field input:not([type=checkbox]):not([type=radio]):focus ::-moz-placeholder,.field textarea:focus :-moz-placeholder,.field textarea:focus ::-moz-placeholder{color:#545554}.field input:not([type=checkbox]):not([type=radio]):focus :-ms-input-placeholder,.field textarea:focus :-ms-input-placeholder{color:#545554}.field:focus-within{background-color:#edf4fa}.field:focus-within input:focus{background-color:#fff!important}.group>.field{margin-bottom:8px;margin-bottom:.5rem;margin-left:32px;margin-left:2rem}.radio-field{display:-webkit-box;display:-ms-flexbox;display:flex;padding:4px;margin:0 0 8px;border-radius:3px}.radio-field input{-webkit-box-flex:0;-ms-flex:0 0 1em;flex:0 0 1em;width:1em;height:1em;margin-right:.5em}.radio-field input:checked+label{font-weight:700;color:#091832}.radio-field:focus,.radio-field:hover{background-color:#196cac;color:#fff}.radio-field:focus :checked+label,.radio-field:hover :checked+label{color:inherit}.radio-field label{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%;cursor:pointer}fieldset{border:none}legend{font-size:20px;font-size:1.25rem;font-weight:700}@media (min-width:35em){.searchform{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.searchform label{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}.searchform input{-webkit-box-flex:4;-ms-flex:4;flex:4;margin-left:10px}.searchform button{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:10px}#site-header{background-color:#005a9c;color:#fff;padding-top:3px}@media print{#site-header{background-color:#f2f2f2;color:#000}}@supports (display:grid){#site-header{padding-left:8px;padding-right:8px}}#site-header a{color:#fff}@media print{#site-header a{color:#005a9c}}@media print{#site-header a:after{content:""}}.wai{line-height:1.2}@media (min-width:35em){.wai{vertical-align:middle;font-size:1.5625rem}}.logos{grid-column-start:2;grid-column-end:6;grid-row-start:1;padding:16px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:60%}@supports (display:grid){.logos{width:auto}}.logos .claim{font-size:14px;font-size:.875rem;font-style:italic;margin-left:16px;padding-left:16px;border-left:1px solid #eed009;color:#fff;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:none}@media print{.logos .claim{color:#005a9c}}@media (min-width:35em){.logos .claim{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.home{text-decoration:none;transition:color .25s ease-in .1s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;img{padding-right:8px}}@media (min-width:23em){.home{margin-right:32px}}@supports (display:grid){.home{-webkit-box-flex:0;-ms-flex:0;flex:0}}@media (min-width:60em){.home{margin-right:8px}}.home img,.home svg{vertical-align:middle;color:inherit;fill:currentColor;height:30px}@media (min-width:35em){.home img,.home svg{height:46px}}.home.w3c{border-bottom:2px solid transparent}.home.w3c:hover{border-bottom-color:currentColor}.home .wai{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width:35em){.home .wai{font-size:1.25rem}}.home .wai .wa{padding-bottom:2px}.home .wai .i{border-top:1px solid #eed009;padding-top:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.home:focus,.home:hover{text-decoration:underline;color:#eed009!important}h1,h2,h3,h4,h5,h6{padding:0}h1,h2{margin:60px 0 20px}h3{margin:40px 0 20px}h4,h5,h6{margin:20px 0 10px}h1,h2,h3,h4{color:#005a6a}@media print{h1,h2,h3,h4{color:#000}}h1{font-size:24px;font-size:1.5rem;line-height:1.2;font-weight:400;margin-top:0}@media (min-width:35em){h1{font-size:2rem}}@media (min-width:60em){h1{font-size:2.375rem}}h1+h2{margin-top:0}h2{font-size:22px;font-size:1.375rem;line-height:1.2;font-weight:700;border-bottom:1px solid #ddd}h2+h3{margin-top:0}h3,h4{font-size:18px;font-size:1.125rem;line-height:1.4}h3+h4{margin-top:0}h4{font-weight:400}h4+h5{margin-top:0}h5{font-weight:700;line-height:1.6}h5+h6{margin-top:0}h6{font-size:14px;font-size:.875rem;line-height:1.8}h1 b,h1.ap:before,h1.ex:before,h2 b,h2.ap:before,h2.ex:before,h3 b,h3.ap:before,h3.ex:before,h4 b,h4.ap:before,h4.ex:before,h5 b,h5.ap:before,h5.ex:before,h6 b,h6.ap:before,h6.ex:before{color:#036!important;font-weight:700}.no-js .ex{counter-increment:a;counter-reset:b}.no-js .ex:before{content:"Example " counter(a) ": "}.no-js .ex.inap{counter-reset:none}.no-js .newap{counter-reset:b}.no-js .newex{counter-reset:a}.no-js .newexap,.no-js h2.first,.no-js h3.first{counter-reset:a b}.no-js .ap{counter-increment:b}.no-js .ap:before{content:"Approach " counter(b) ": "}[class*=" icon-"],[class^=icon-]{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}.icon-default{width:.9285714285714285em}.icon-info{width:.8571428571428571em}.icon-audio-description{width:3.5em;height:1.75em;margin:-.25em}.icon-search{width:.9287109375em}.icon-arrow-left{width:.8928571428571428em}.icon-arrow-right{width:.8214285714285714em}.icon-arrow-down,.icon-arrow-up{width:.9285714285714285em}.icon-check-circle,.icon-ex-circle,.icon-external-link{width:.8571428571428571em}.icon-readmore{width:.7142857142857142em}.icon-desktop,.icon-laptop{width:1.0714285714285714em}.icon-tablet{width:.6428571428571428em}.icon-mobile{width:.42857142857142855em}.icon-code{width:1.0714285714285714em}.icon-fork{width:.5714285714285714em}.icon-code-file{width:.8571428571428571em}.icon-cart-plus{width:.9285714285714285em}dl{margin:16px 0}dt{font-weight:700}.notbold dt{font-weight:400}dd{margin-left:32px}dd+dt{margin-top:8px}dl.paragraph-like dd+dt{margin-top:1em}ol li,ul li{margin-bottom:8px}.linklist,.linklist li{margin:0;padding:0;list-style:none}.linklist a{display:block;padding:4px 16px;border-bottom:1px solid #ddd;text-decoration:none}.linklist a svg{height:.65em}.linklist a:focus svg,.linklist a:hover svg{color:#c0272d}.linklist a:focus .visual-a,.linklist a:hover .visual-a{text-decoration:underline}.linklist li:last-child a{border-bottom:none}.nolist,.nolist li{margin:0;padding:0}.nolist li{list-style:none}p+ol,p+ul{margin-top:-8px}.columns{padding:0}.columns>*{margin-left:32px}.four.columns,.two.columns{-webkit-column-gap:32px;column-gap:32px}@media (min-width:35em){.four.columns,.two.columns{-webkit-columns:2;columns:2}}.four.columns{padding:0 8px}@media (min-width:60em){.four.columns{-webkit-columns:4;columns:4}}.two.small.columns{-webkit-column-gap:32px;column-gap:32px}@media (min-width:35em){.two.small.columns{-webkit-columns:1;columns:1}}@media (min-width:60em){.two.small.columns{-webkit-columns:2;columns:2}}.info{background-color:#eed009;background-image:linear-gradient(180deg,#eed009,#d9bd0a);background-size:100% 20%;background-repeat:no-repeat;background-position:bottom;font-weight:700;text-align:center}.info svg{margin-right:8px;font-size:2em;vertical-align:middle;margin-top:-.14em}#controls{background-color:#f2f2f2;text-align:right;font-size:.8125em;padding-left:8px;padding-right:8px}#controls>ul{width:100%;margin:0;padding:4px;grid-area:content;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width:23em){#controls>ul{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}#controls>ul>li{display:inline-block;list-style:none;margin:0 0 0 8px;padding:0 0 0 8px;border-left:1px solid #036}#controls>ul>li:first-child{border-left:0}#controls a{color:#036;text-decoration:none;padding:2px 0}#controls a:focus,#controls a:hover{border-bottom:none;text-decoration:underline}@media print{#controls{display:none}}.mainnav{position:relative;font-size:14px;font-size:.875rem;border-top:1px solid #005a9c;border-bottom:1px solid #005a9c;background-color:#036;display:none}.mainnav.open{display:block}@media (min-width:35em){.mainnav{display:block}}@media print{.mainnav{display:none}}.mainnav>ul{width:100%;max-width:1268px;padding:0;margin:0 auto!important;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:35em){.mainnav>ul{-ms-flex-wrap:nowrap;flex-wrap:nowrap}}.mainnav>ul>li{display:block;position:relative;-ms-flex-preferred-size:50%;flex-basis:50%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.mainnav>ul>li.active{background:#036}.mainnav>ul>li.active>a>span{border-bottom:2px solid #eed009!important}.mainnav>ul>li>a{text-decoration:none;display:block;width:100%;height:100%;color:#fff;text-align:center;min-height:44px;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-bottom:#005a9c}.mainnav>ul>li>a>span{display:block;border-bottom:2px solid transparent}.mainnav>ul>li>a:focus,.mainnav>ul>li>a:hover{background-color:#091832}.mainnav>ul>li>a:focus>span,.mainnav>ul>li>a:hover>span,.mainnav>ul>li>a[aria-current=location]>span,.mainnav>ul>li>a[aria-current=page]>span{border-bottom:2px solid #eed009}.mainnav>ul>li>a[aria-current=location]:focus>span,.mainnav>ul>li>a[aria-current=location]:hover>span,.mainnav>ul>li>a[aria-current=page]:focus>span,.mainnav>ul>li>a[aria-current=page]:hover>span{border-bottom:2px solid #fff}.mainnav>ul>li+li>a{border-left:1px solid #235a97}@media (min-width:60em){#openmenu{display:none}}@media print{#openmenu{display:none}}@media (min-width:35em){.page-home #openmenu{display:none}}.metanav{text-align:right;width:100%;display:none;font-size:.85em}.metanav.open{display:block}@media (min-width:35em){.metanav{display:block}}@media print{.metanav{display:none}}.metanav a{text-decoration:none}.metanav a:focus,.metanav a:hover,.metanav a[aria-current=page]{text-decoration:underline}.metanav>ul{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.metanav>ul li{display:inline-block;padding:0 8px}@media (min-width:35em){.metanav>ul li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.metanav>ul li:first-child{border:0}.metanav>ul li:last-child{margin-right:0;padding:0;border:0}.metanav>ul li a{position:relative;min-height:24px;padding:10px 0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.metanav>ul li a:before{position:absolute;content:"";top:12px;left:-8px;bottom:12px;width:1px;background-color:#eed009}@media (min-width:35em){.metanav>ul li a{width:100%;text-align:right}}.metanav>ul li:first-child a:before{display:none}.metanav form[role=search]{background-color:#036;border:1px solid #fff}.metanav form[role=search]>div{display:-webkit-box;display:-ms-flexbox;display:flex}.metanav form[role=search] label{text-transform:none;font-weight:400}.metanav form[role=search] input{box-sizing:border-box;-webkit-appearance:none;background-color:transparent;border:0;border-radius:0;color:#f2f2f2;height:100%;padding:5px;margin:0;width:10em}.metanav form[role=search] input:focus{color:#fff}.metanav form[role=search] input::-webkit-search-decoration{display:none}.metanav form[role=search] input::-webkit-search-cancel-button,.metanav form[role=search] input::-webkit-search-results-button{filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');-webkit-filter:invert(100%);filter:invert(100%)}.metanav form[role=search] button{display:block;margin:0}.metanav form[role=search] ::-webkit-input-placeholder{color:#fff;font-style:italic;opacity:1}.metanav form[role=search] :-moz-placeholder,.metanav form[role=search] ::-moz-placeholder{color:#fff;font-style:italic;opacity:1}.metanav form[role=search] :-ms-input-placeholder{color:#fff;font-style:italic;opacity:1}.navigations{position:relative;grid-column-start:6;grid-column-end:-2;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.navigations .nava11y{display:block}.mainnav>ul,.metanav>ul{margin:0;padding:0}.mainnav>ul>li,.metanav>ul>li{list-style:none;margin:0}.teaser.news{background-color:#fff}.announce-box{background-color:#fafafa;border:1px solid #ddd;border-width:1px 0;padding:10px 25px!important}.announce-box+.announce-box{border-top-width:0}.announce-box>:first-child{margin-top:0}.announce-box>:last-child{margin-bottom:0}.notes{font-size:.85em}.notes strong:first-child{font-weight:700;color:#005a6a}.pager{background-color:#fff;border:1px solid #ddd;margin-top:32px}.pager>ul{box-sizing:border-box;-ms-flex-line-pack:center;align-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:8px}.pager--item,.pager>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0}.pager--item{-webkit-box-flex:0;-ms-flex:0 1 50%;flex:0 1 50%;list-style:none}.pager--item:only-child{-ms-flex-preferred-size:100%;flex-basis:100%}.pager--item a:link{color:#005a6a;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;text-decoration:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pager--item a:visited{color:#606}.pager--item a:focus,.pager--item a:hover{color:#036}.pager--item a:active{color:#005a6a}.pager--item.next a{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right}.pager--item-icon{font-size:33px}.pager--item-icon,.pager--item-text{display:-webkit-box;display:-ms-flexbox;display:flex}.pager--item-text{-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:8px;margin-left:8px}.pager--item-text-direction{color:#1d1d1d;font-size:12px;font-size:.75rem}.pager--item-text-target{font-size:16px;font-size:1rem;line-height:1}.pagination{margin:16px 0;padding-top:16px;border-top:2px solid #ddd}.pagination ul{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0;list-style:none;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.pagination li{margin-left:8px}.pagination .like-a,.pagination a{padding:8px 16px;border-radius:4px;border:2px solid #ddd}.pagination .is-active .like-a{background-color:#036;border-color:#036;color:#fff}.pagination a:focus,.pagination a:hover{background-color:#ddd}.quote{background-color:#005a6a;border-radius:5px;color:#fff;padding:22px}.quote--block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0}.quote--block-text{font-size:20px;font-style:italic;line-height:1.25;margin:0;padding:0}.quote--block-text:before{content:open-quote}.quote--block-text:after{content:close-quote}.quote--block-cite{font-size:15px;font-weight:500;margin:9px 0 0}.quote--block-cite a{color:#fafafc}.related-content{background-color:#fff;border:1px solid #ddd;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;margin:50px}.related-content,.related-content--head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.related-content--head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f2f2f2;border-bottom:1px solid #ddd;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;height:48px}.related-content--head-icon{height:22px;margin-right:10px;margin-left:19px;width:22px}.related-content--head-heading{border:none;color:#036;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;font-size:20px;margin:0;padding:0}.related-content--content{margin:0;padding:0}.related-content--content-list{list-style:none;margin:22px;padding:0}.related-content--content-list li{font-size:14px;line-height:2.2em}.sidenav{grid-area:navigation;margin-bottom:24px;display:none}.sidenav.open{display:block;margin-top:16px}@media (min-width:60em){.sidenav{display:block}}@media print{.sidenav{display:none}}.sidenav--head{background-color:#036;border:2px solid #036;border-width:0 5px;padding:16px 24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-bottom:none;font-weight:700}.sidenav--head-icon{padding-bottom:.3em;margin-left:-16px}.sidenav--head-icon--inner{width:47px;height:48px;float:left;margin-right:8px}.sidenav--head-section{color:#fff;text-transform:uppercase;letter-spacing:.7px;font-size:11px;font-size:.6875rem;font-weight:700}.sidenav--head-subsection{color:#fff;font-size:22px;font-size:1.375rem}.sidenav--list{background-color:#036;border:2px solid #036;border-width:0 0 5px 5px;margin:0;padding:0;font-size:13px;font-size:.8125rem;.sidenav-head+&{border-top:none}}.sidenav--list a{display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box;padding:8px 24px;min-height:44px;color:#fff;text-decoration:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sidenav--list a:focus,.sidenav--list a:hover{text-decoration:underline;background-color:#f2f2f2;color:#005a6a}.sidenav--list a:focus{outline-color:#eed009}.sidenav--list li a{border-top:1px solid #005a9c}.sidenav--list ul{padding:0;margin:0;padding-left:24px}.sidenav--list a+ul{display:none}.sidenav--list a[aria-current]+ul{display:block}.sidenav--list li{margin:0;padding:0;list-style:none}.sidenav--list ul li:first-child a{border-top-color:transparent}.sidenav--list a[aria-current=location]{padding-bottom:4px;font-weight:700}.sidenav--list a[aria-current=page]{font-weight:700;color:#005a6a;background-color:#fafafc;position:relative}.sidenav--list a[aria-current=page]:after,.sidenav--list a[aria-current=page]:before{position:absolute;content:"";width:0;height:0;right:0;border:1px solid #fff;opacity:.9}.sidenav--list a[aria-current=page]:before{top:-2px;border-color:transparent #fff #fff transparent}.sidenav--list a[aria-current=page]:after{bottom:-2px;border-color:#fff #fff transparent transparent}caption,table{text-align:left}table{border:1px solid #ddd;border-collapse:collapse;margin-bottom:2em}caption{font-weight:700;font-size:18px;font-size:1.125rem;color:#005a6a;line-height:1.4;margin-bottom:8px}td,th{padding:12px 18px;border:1px solid #ddd;vertical-align:top}.dense td,.dense th{padding:2px 4px}th{font-weight:700;color:#fff;background-color:#005a6a}th a{color:inherit}th a:focus,th a:hover{color:#eed009}th a:visited{color:inherit}td>:first-child,td>:last-child,th>:first-child,th>:last-child{margin-top:0}.hyphenated{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.teaser.audiences-inline .title{display:block;font-size:36px;font-size:2.25rem}.making-web-accessible{text-align:center;border-bottom:1px solid #ddd;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.making-web-accessible [hidden]{display:none!important}.making-web-accessible .inner.hidesection{position:relative;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.making-web-accessible .making-web-accessible-box{text-align:left;padding:32px 20px 0 105px}.making-web-accessible .mwa-icon{width:65px;height:65px;float:left;margin-left:-85px}.making-web-accessible .title{display:block;font-size:36px;font-size:2.25rem}.making-web-accessible .teaser-h h2{margin:0}.making-web-accessible h3{margin-top:10px;font-size:24px;font-size:1.5rem;margin-bottom:0}.making-web-accessible p{margin-bottom:0}.making-web-accessible .showhidebutton{float:right;position:absolute;top:-1.35em;right:0}.teaser.media-inline .title{display:block;font-size:36px;font-size:2.25rem}.white-bg{background-color:#fff}.bordered{border:0;border-color:#ddd}.teaser.news-teaser .title{display:block;font-size:36px;font-size:2.25rem}.teaser.resource-inline .title{display:block;font-size:36px;font-size:2.25rem}.teaser{padding-top:32px;padding-bottom:32px}.teaser.featured{background-size:cover;background-position:50%}.teaser.featured .teaser-c{background-color:hsla(0,0%,100%,.9);border-top:5px solid #c0272d;padding:16px 32px;display:block}.teaser-h h2,.teaser-h h3,.teaser-h h4,.teaser-h h5,.teaser-h h6{margin:0 0 16px;padding:0;border:none;color:#005a6a;font-size:16px;font-size:1rem;line-height:1.2}.teaser-h h2.title,.teaser-h h3.title,.teaser-h h4.title,.teaser-h h5.title,.teaser-h h6.title{font-size:24px;font-size:1.5rem;margin:10px 0 20px}@media (min-width:35em){.teaser-h h2.title,.teaser-h h3.title,.teaser-h h4.title,.teaser-h h5.title,.teaser-h h6.title{font-size:2rem}}@media (min-width:60em){.teaser-h h2.title,.teaser-h h3.title,.teaser-h h4.title,.teaser-h h5.title,.teaser-h h6.title{font-size:2.375rem}}.teaser-h .subtitle{font-weight:700;margin:0;font-size:14px;font-size:.875rem;color:#1d1d1d}.teaser-h-icon{height:1em;width:1em;vertical-align:middle;margin-right:10px}.teaser-h-icon.full{display:block;height:1.8em;width:1.8em}.teaser-tip{text-align:center}.teaser-tip .teaser-h h2{font-size:28px;font-size:1.75rem}.teaser-tip .teaser-h svg{display:block;margin:0 auto;height:1.75em;width:1.75em}.teaser-tip .fakelink{margin:0 auto}.fakelink{text-decoration:underline;position:relative}.fakelink svg{margin-left:5px;width:.75em;height:.75em}.teaser-about p{color:#686868}@media (min-width:35em){.teaser-about p{font-size:1.25rem}}@media (min-width:60em){.teaser-about p{font-size:1.5rem}}.teaser-about .teaser-h h2{font-weight:700}.teaser-media{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.teaser-sponsors{border-top:1px solid #ddd}.area-teaser{display:block;background-color:#fff;border:1px solid #ddd;margin:-1px;padding:20px 32px}@media (min-width:35em){.area-teaser{padding:40px}}@media (min-width:60em){.area-teaser{padding:60px 40px}}.area-teaser .teaser-h{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.area-teaser .teaser-h h2,.area-teaser .teaser-h h3,.area-teaser .teaser-h h4,.area-teaser .teaser-h h5,.area-teaser .teaser-h h6{margin:0;font-weight:400}.area-teaser .teaser-h-icon{margin-bottom:10px}.area-teaser:focus .teaser-h>:not(svg),.area-teaser:hover .teaser-h>:not(svg){text-decoration:underline}.video-link{display:inline-block;text-decoration:none;margin:10px 0}.video-link img{-webkit-mask:url(../images/video-mask-16-9.svg);mask:url(../images/video-mask-16-9.svg);-webkit-mask-size:contain;mask-size:contain;width:240px}.video-link.ratio-43 img{-webkit-mask:url(../images/video-mask-4-3.svg);mask:url(../images/video-mask-4-3.svg)}.video-link span{display:block;text-align:center;text-decoration:underline}.video-link-small img{width:120px}.video-link-inline{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;span{text-align:left}}.video-link-inline img{width:auto;height:2em;margin-right:1em}.able-wrapper{margin:0;padding:0;height:auto;box-sizing:content-box!important}.able,.able-wrapper{position:relative;width:100%}.able{margin:1em 0;z-index:5000}.able-column-left,.able-column-right{float:left}.able .able-vidcap-container{background-color:#000;left:0;margin:0;position:relative;top:0}.able-player{font-family:inherit;background-color:#262626}.able-offscreen{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.able-media-container audio{display:none!important}.able-video .able-now-playing{display:none}.able-controller{position:relative;border-top:2px solid #4c4c4c;border-bottom:2px solid #4c4c4c;background-color:#464646;min-height:38px;padding:0}.able-big-play-button,.able-poster{position:absolute;top:0;left:0}.able-big-play-button{font-size:8em;opacity:.5;filter:alpha(opacity=50);color:#fdfdfd;background-color:transparent;border:none;outline:none;padding:0;z-index:6500}.able-big-play-button:hover{opacity:1;filter:alpha(opacity=100)}.able-left-controls,.able-right-controls{overflow:visible}.able-left-controls button,.able-right-controls button{vertical-align:middle}.able-left-controls{float:left}.able-right-controls{float:right}.able-black-controls,.able-black-controls button,.able-black-controls label{color:#000!important}.able-black-controls .able-seekbar{border:2px solid #000}.able-black-controls label,.able-white-controls,.able-white-controls button{color:#fff!important}.able-white-controls .able-seekbar{border:2px solid #fff}.able-controller button{background:none;position:relative;display:inline-block;border-style:none;margin:3px;padding:0;font-size:20px;min-width:24px;outline:2px solid #464646;border:none;overflow:visible!important;z-index:6600}.able-controller button>img,.able-controller button>span{width:20px;margin:0 auto;padding:0;z-index:6700}.able-controller .buttonOff{opacity:.5;filter:alpha(opacity=50);z-index:6800}.able-controller .able-seekbar{margin:0 5px;z-index:6900}.able-controller button:focus,.able-controller button:hover{outline-style:solid;outline-width:medium}.able-controller button:hover{outline-color:#8ab839!important}.able-controller button:focus{outline-color:#ffbb37!important}.able-seekbar-wrapper{display:inline-block;vertical-align:middle}.able-seekbar{position:relative;height:.5em;border:1px solid;background-color:#000;margin:0 3px;border:2px solid #fff}.able-seekbar-loaded{background-color:#464646;z-index:5100}.able-seekbar-loaded,.able-seekbar-played{display:inline-block;position:absolute;left:0;top:0;height:.5em}.able-seekbar-played{background-color:#dadada;z-index:5200}.able-seekbar-head{display:inline-block;position:relative;left:0;top:-.45em;background-color:#fdfdfd;width:.8em;height:.8em;border:1px solid;border-radius:.8em;z-index:5500}.able-volume-slider{width:34px;height:50px;background-color:#464646;padding:10px 0;position:absolute;right:0;top:-74px;display:none;z-index:9100}.able-volume-track{display:block;position:relative;height:100%;width:5px;margin:0 auto;background-color:#999}.able-volume-track.able-volume-track-on{background-color:#dadada;position:absolute;height:20px;top:30px}.able-volume-head{display:inline-block;background-color:#fdfdfd;outline:1px solid #333;position:absolute;height:7px;width:15px;left:-5px;top:23px;z-index:9175}.able-volume-head:focus,.able-volume-head:hover{background-color:#ffbb37!important}.able-volume-help{display:none}.able-status-bar{height:1.5em;min-height:1.5em;color:#ccc;font-size:.9em;background-color:transparent;padding:.5em .5em .25em}.able-status-bar span.able-timer{text-align:left;float:left;width:32%}.able-status-bar span.able-speed{float:left;width:33%;text-align:center}.able-status{font-style:italic;float:right;width:32%;text-align:right}div.able-captions-wrapper{width:100%;margin:0;padding:0;text-align:center;line-height:1.35em;display:none;z-index:6000}div.able-captions{display:none;padding:.15em .25em;background-color:#000;font-size:1.1em;color:#fff;opacity:.75}div.able-captions-overlay{position:absolute;margin:0;bottom:0}div.able-captions-below,div.able-descriptions{position:relative;min-height:2.8em}div.able-descriptions{color:#ff6;background-color:#262626;border-top:1px solid #666;margin:0;padding:3%;width:94%;text-align:center}div.able-now-playing{text-align:center;font-weight:700;font-size:1.1em;color:#fff;background-color:transparent;padding:.5em .5em 1em}div.able-now-playing span{font-size:.9em}div.able-now-playing span span{display:block}div.able-modal-dialog{position:absolute;height:auto;max-width:90%;margin-left:auto;margin-right:auto;left:0;right:0;outline:0 none;display:none;color:#000;background-color:#fafafa;box-sizing:content-box!important;z-index:10000}div.able-modal-overlay{position:fixed;width:100%;height:100%;background-color:#000;opacity:.5;margin:0;padding:0;top:0;left:0;display:none;z-index:9500}button.modalCloseButton{position:absolute;top:5px;right:5px}button.modal-button{margin-right:5px}div.able-modal-dialog button:focus,div.able-modal-dialog button:hover,div.able-modal-dialog input:focus,div.able-modal-dialog input:hover{outline-style:solid;outline-width:2px}div.able-modal-dialog button:hover,div.able-modal-dialog input:hover{outline-color:#8ab839}div.able-modal-dialog button:focus,div.able-modal-dialog input:focus{outline-color:#ffbb37}div.able-modal-dialog h1{font-weight:700;font-size:1.8em;line-height:1.2em;margin:.75em 0;color:#000;text-align:center}.able-help-div,.able-prefs-form,.able-resize-form{background-color:#f5f5f5;border:medium solid #ccc;padding:.5em 1em;margin:0 0 0 1em;width:25em;display:none}.able-prefs-form fieldset{margin-left:0;padding-left:0;border:none}.able-prefs-form legend{color:#000;font-weight:700;font-size:1.1em}.able-prefs-form fieldset div{display:table;margin-left:1em}.able-prefs-form fieldset div input{display:table-cell;width:1em;vertical-align:middle}.able-prefs-form fieldset div label{display:table-cell;padding-left:.5em}fieldset.able-prefs-keys div{float:left;margin-right:1em}div.able-desc-pref-prompt{font-weight:700;font-style:italic;margin-left:1em!important}div.able-prefDescFormat>div{margin-left:1.5em}.able-prefs-captions label,.able-prefs-captions select{display:block;float:left;margin-bottom:.25em}fieldset.able-prefs-captions label{width:6em;text-align:right;padding-right:1em}fieldset.able-prefs-captions select{width:10em;font-size:.9em;border-radius:none}.able-prefs-form div.able-captions-sample{padding:.5em;text-align:center}.able-prefs-form h2{margin-top:0;margin-bottom:.5em;font-size:1.1em}.able-prefs-form ul{margin-top:0}able-prefs-form-keyboard ul{list-style-type:none}span.able-modkey-alt,span.able-modkey-ctrl,span.able-modkey-shift{color:#666;font-style:italic}span.able-modkey{font-weight:700;color:#000;font-size:1.1em}.able-resize-form h1{font-size:1.15em}.able-resize-form div div{margin:1em}.able-resize-form label{padding-right:.5em;font-weight:700}.able-resize-form input[type=text]{font-size:1em}.able-resize-form input[readonly]{color:#aaa}.able-window-toolbar{background-color:#464646;min-height:15px;padding:10px;border-style:solid;border-width:0 0 1px}.able-draggable:hover{cursor:move}.able-window-toolbar .able-button-handler-preferences{position:absolute;top:0;right:0;font-size:1.5em;background-color:transparent;border:none;outline:none;padding:0;z-index:9300}.able-window-toolbar .able-button-handler-preferences:focus,.able-window-toolbar .able-button-handler-preferences:hover{outline-style:solid;outline-width:medium}.able-window-toolbar .able-button-handler-preferences:hover{outline-color:#8ab839!important}.able-window-toolbar .able-button-handler-preferences:focus{outline-color:#ffbb37!important}.able-window-toolbar .able-popup{position:absolute;right:0;top:0;display:none}.able-drag{border:2px dashed #f90;cursor:move}.able-resizable{position:absolute;width:16px;height:16px;padding:5px 2px;bottom:0;right:0;cursor:nwse-resize;background:transparent url(../ableplayer/images/wingrip.png) no-repeat}.able-sign-window{position:relative;margin:1em;z-index:8000}.able-sign-window video{width:100%}.able-sign-window:focus{outline:none}div.able-chapters-div{padding:0}div.able-chapters-div .able-chapters-heading{margin:1em .75em;font-size:1.1em;font-weight:700}div.able-chapters-div ul{list-style-type:none;padding-left:0}div.able-chapters-div ul li{max-width:100%;padding:0;height:2em}div.able-chapters-div button{width:100%;height:100%;border:none;background-color:transparent;color:#000;font-size:1em;text-align:left;padding:.15em 1em}div.able-chapters-div li.able-current-chapter{background-color:#000!important}div.able-chapters-div li.able-current-chapter button{color:#fff!important}div.able-chapters-div li.able-focus{background-color:#4c4c4c}div.able-chapters-div button::-moz-focus-inner,div.able-chapters-div button:focus,div.able-chapters-div button:hover{border:0;outline:none;color:#fff!important}.able-alert,.able-tooltip{position:absolute;padding:5px 10px;border-color:#000;border-width:1px;color:#000!important;background-color:#ccc;border-radius:5px;display:none}.able-alert{background-color:#ffc;box-shadow:0 0 16px #262626;z-index:9400}.able-popup{z-index:9200}.able-tooltip{z-index:9000}.able-popup{position:absolute;margin:0;padding:0;border-color:#000;border-width:1px;background-color:#000;opacity:.85;border-radius:5px;display:none}.able-popup ul{list-style-type:none;margin:0;padding:0}.able-popup li{padding:.25em 1em .25em .25em;margin:1px}.able-popup label{padding-left:.25em;color:#fff}.able-popup li.able-focus{background-color:#ccc}.able-popup li.able-focus label{color:#000}.able-popup-no-radio>ul>li>input{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-transcript-area{border-width:1px;border-style:solid;height:400px;z-index:7000;outline:none}.able-transcript{position:relative;overflow-y:scroll;padding-left:5%;padding-right:5%;background-color:#fff;height:350px}.able-transcript div{margin:1em 0}.able-transcript-heading{font-size:1.4em;font-weight:700}.able-transcript-chapter-heading{font-size:1.2em;font-weight:700}.able-transcript div.able-transcript-desc{background-color:#fee;border:thin solid #336;font-style:italic;padding:1em}.able-transcript .able-unspoken{font-weight:700}.able-transcript .able-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.able-highlight{background:#ff6}.able-previous{background:#000!important;font-style:italic}.able-transcript span:active,.able-transcript span:focus,.able-transcript span:hover{background:#cf6;cursor:pointer}.able-window-toolbar label{margin-right:10px;color:#fff}.able-controller button:focus,.able-controller button:hover,.able-controller input:focus,.able-controller input:hover,.able-seekbar-head:focus,.able-seekbar-head:hover,.able-window-toolbar input:focus,.able-window-toolbar input:hover{outline-style:solid;outline-width:2px}.able-controller button:focus,.able-controller input:focus,.able-seekbar-head:focus,.able-window-toolbar input:focus{outline-color:#ffbb37}.able-controller button:hover,.able-controller input:hover,.able-seekbar-head:hover,.able-window-toolbar input:hover{outline-color:#8ab839}.able-window-toolbar .transcript-language-select-wrapper{float:right;padding-right:30px}.able-player .able-playlist{font-size:.9em;list-style-type:none;margin:0;background-color:#fff;padding:5px 0}.able-player .able-playlist li{background-color:#ddd;margin:5px;padding:5px 10px;border-radius:15px;-moz-border-radius:15px}.able-player .able-playlist li:active,.able-player .able-playlist li:focus,.able-player .able-playlist li:hover{color:#fff;background-color:#340449;text-decoration:none}.able-player .able-playlist li.able-current{color:#000;background-color:#ffeeb3;font-weight:700;outline:none;text-decoration:none}.able-player .able-playlist li.able-current:after{content:" *"}.able-playlist li:active,.able-playlist li:focus,.able-playlist li:hover{text-decoration:none;color:#fff;background-color:#000}.able-playlist li.able-current{font-weight:700;text-decoration:underline}.able-playlist li.able-current:after{content:" *"}.able-search-results ul li{font-size:1.1em;margin-bottom:1em}.able-search-results-time{font-weight:700;text-decoration:underline;cursor:pointer}.able-search-results-time:active,.able-search-results-time:focus,.able-search-results-time:hover{color:#fff;background-color:#000;text-decoration:none}.able-search-results-text{padding-left:1em}.able-search-term{background-color:#ffc;font-weight:700}.able-clipped,.able-screenreader-alert{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);width:1px!important;height:1px!important;overflow:hidden!important}.able-error{display:block;background:#ffc;border:2px solid #000;color:red;margin:.75em;padding:.5em}.able-fallback{display:block;text-align:center;border:2px solid #335;background-color:#eee;color:#000;font-weight:700;font-size:1.1em;padding:1em;margin-bottom:1em;max-width:500px;width:95%}.able-fallback div,.able-fallback p,.able-fallback ul{text-align:left}.able-fallback li{font-weight:400}.able-fallback img{width:90%;margin:1em auto;opacity:.3}.able-fallback img.able-poster{position:relative}button svg{display:inline-block;width:1em;height:1em;fill:currentColor}@font-face{font-family:able;src:url(../ableplayer/button-icons/fonts/able.eot?dqripi);src:url(../ableplayer/button-icons/fonts/able.eot?dqripi#iefix) format("embedded-opentype"),url(../ableplayer/button-icons/fonts/able.ttf?dqripi) format("truetype"),url(../ableplayer/button-icons/fonts/able.woff?dqripi) format("woff"),url(../ableplayer/button-icons/fonts/able.svg?dqripi#able) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:able!important;speak:none;font-style:normal;font-weight:400;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-restart:before{content:"\e900"}.icon-rewind:before{content:"\e603"}.icon-forward:before{content:"\e604"}.icon-previous:before{content:"\e901"}.icon-next:before{content:"\e902"}.icon-slower:before{content:"\f0dd"}.icon-faster:before{content:"\f0de"}.icon-turtle:before{content:"\e904"}.icon-rabbit:before{content:"\e905"}.icon-ellipsis:before{content:"\e903"}.icon-pipe:before{content:"\e600"}.icon-captions:before{content:"\e601"}.icon-descriptions:before{content:"\e602"}.icon-sign:before{content:"\e60a"}.icon-volume-mute:before{content:"\e606"}.icon-volume-soft:before{content:"\e60c"}.icon-volume-medium:before{content:"\e605"}.icon-volume-loud:before{content:"\e60b"}.icon-volume-up:before{content:"\e607"}.icon-volume-down:before{content:"\e608"}.icon-chapters:before{content:"\e609"}.icon-transcript:before{content:"\f15c"}.icon-preferences:before{content:"\e60d"}.icon-close:before{content:"\f00d"}.icon-fullscreen-expand:before{content:"\f065"}.icon-fullscreen-collapse:before{content:"\f066"}.icon-help:before{content:"\f128"}pre{white-space:pre-wrap}.highlight{color:#586e75;-moz-tab-size:2;-o-tab-size:2;tab-size:2;font-weight:700}.highlight .c{color:#93a1a1}.highlight .err,.highlight .g{color:#586e75}.highlight .k{color:#859900}.highlight .l,.highlight .n{color:#586e75}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#586e75}.highlight .cm{color:#93a1a1}.highlight .cp{color:#859900}.highlight .c1{color:#93a1a1}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#586e75;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go,.highlight .gp{color:#586e75}.highlight .gs{color:#586e75;font-weight:700}.highlight .gu{color:#cb4b16}.highlight .gt{color:#586e75}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn,.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#586e75}.highlight .m,.highlight .s{color:#2aa198}.highlight .na{color:#586e75}.highlight .nb{color:#b58900}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ne,.highlight .ni{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#586e75}.highlight .nt,.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#586e75}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#2aa198}.highlight .sb{color:#93a1a1}.highlight .sc{color:#2aa198}.highlight .sd{color:#586e75}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#586e75}.highlight .si,.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1,.highlight .ss{color:#2aa198}.highlight .bp,.highlight .vc,.highlight .vg,.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}:not(.highlight) code{color:#036;font-size:1.05em;font-weight:700}
4408
2
  /*# sourceMappingURL=style.css.map */