va_common 0.3.6 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/images/design/sprites/sprite.png +0 -0
- data/app/assets/images/icons/arrow-down.png +0 -0
- data/app/assets/images/icons/arrow-down.svg +1 -0
- data/app/assets/images/icons/arrow-up.png +0 -0
- data/app/assets/images/icons/arrow-up.svg +1 -0
- data/app/assets/images/icons/minus.png +0 -0
- data/app/assets/images/icons/minus.svg +1 -0
- data/app/assets/images/icons/plus.png +0 -0
- data/app/assets/images/icons/plus.svg +1 -0
- data/app/assets/js/toggle-veterans-crisis-line.js +11 -0
- data/app/assets/js/va_common_main.js +2 -1
- data/app/assets/js/vendor/menu.js +28 -0
- data/app/assets/stylesheets/_va-variables.scss +35 -0
- data/app/assets/stylesheets/_va.scss +1224 -1588
- data/app/assets/stylesheets/components/_forms.scss +173 -0
- data/app/assets/stylesheets/components/_va-crisis-line.scss +158 -0
- data/app/assets/stylesheets/va_common_main.scss +10 -2
- data/app/views/va_common/_footer.html.erb +89 -77
- data/app/views/va_common/_header.html.erb +26 -43
- data/app/views/va_common/_main.html.erb +3 -3
- data/lib/va_common/version.rb +1 -1
- metadata +55 -41
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bdeec8fd86bd784be88796634ba932305b55ae4e
|
|
4
|
+
data.tar.gz: ad85cc696a7cc47c76c3d3af4bcd6e6b8393a072
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bb04dc4e0fb6565a1232127749f808324f204a80f9efdacc39f86271a1f93f015cff8f6497b0953548a3dd79d03a288821a12fd68a41171af3f6225170978881
|
|
7
|
+
data.tar.gz: c5d89341b38c798bc1b19926b374d518317288fba0d5522c4f9002c6142a14b8baf37e6007ab3c091de998ad3a1a0628c225b274b2f53126f081d87ad11e14c1
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 444.8 444.8"><path d="M248.1 352L434 165.9c7.2-6.9 10.8-15.4 10.8-25.7 0-10.3-3.6-18.8-10.8-25.7l-21.4-21.7c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6L222.4 231.5 83.7 92.8c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6l-21.4 21.7c-7 7-10.6 15.6-10.6 25.7s3.5 18.7 10.6 25.7L196.4 352c7.4 7 16.1 10.6 26 10.6 10.1 0 18.7-3.5 25.7-10.6z"/></svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg id="arrow_up" class="svg-icon" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444.79999 280.4"><title>arrow-up</title><path d="M196.7,92.8L10.8,278.9a35.97826,35.97826,0,0,0,0,51.4L32.2,352a35.09547,35.09547,0,0,0,25.7,10.6,36.35907,36.35907,0,0,0,26-10.6L222.4,213.3,361.1,352a35.09545,35.09545,0,0,0,25.7,10.6,36.35907,36.35907,0,0,0,26-10.6l21.4-21.7a35.09546,35.09546,0,0,0,10.6-25.7,34.71135,34.71135,0,0,0-10.6-25.7L248.4,92.8a36.77813,36.77813,0,0,0-26-10.6,34.71131,34.71131,0,0,0-25.7,10.6h0Z" transform="translate(0 -82.2)"/></svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="401.991" height="401.991" viewBox="0 0 401.991 401.991"><path d="M394 154.174c-5.33-5.33-11.806-7.995-19.417-7.995H27.406c-7.61 0-14.084 2.66-19.414 7.99C2.662 159.5 0 165.97 0 173.586v54.82c0 7.617 2.662 14.086 7.992 19.41 5.33 5.332 11.803 7.994 19.414 7.994h347.176c7.61 0 14.086-2.66 19.417-7.993 5.32-5.324 7.99-11.793 7.99-19.41v-54.82c0-7.615-2.66-14.087-7.99-19.413z"/></svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="401.994" height="401.994" viewBox="0 0 401.994 401.994"><path d="M394 154.175c-5.33-5.33-11.806-7.994-19.417-7.994H255.81V27.41c0-7.61-2.665-14.084-7.993-19.414C242.487 2.666 236.02 0 228.397 0h-54.81c-7.613 0-14.085 2.663-19.415 7.993-5.33 5.33-7.994 11.803-7.994 19.414v118.775H27.408c-7.612 0-14.085 2.664-19.415 7.994S0 165.973 0 173.59v54.818c0 7.618 2.662 14.086 7.992 19.41 5.33 5.333 11.803 7.995 19.414 7.995h118.77V374.59c0 7.61 2.665 14.09 7.995 19.417 5.33 5.325 11.806 7.987 19.418 7.987H228.4c7.618 0 14.087-2.662 19.418-7.987 5.332-5.33 7.994-11.806 7.994-19.417V255.813h118.77c7.618 0 14.09-2.662 19.417-7.994 5.325-5.33 7.99-11.797 7.99-19.415v-54.82c0-7.615-2.66-14.086-7.993-19.413z"/></svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
$(function() {
|
|
2
|
+
var toggleVCL = function(e) {
|
|
3
|
+
e.preventDefault();
|
|
4
|
+
// Only affects Desktop version of the Veterans Crisis line.
|
|
5
|
+
// Mobile is handled via menu.js and works with all overlays.
|
|
6
|
+
$(this).parents('.va-crisis-panel').toggleClass('va-crisis-panel--open');
|
|
7
|
+
}
|
|
8
|
+
$('.va-crisis-line--notouch').on('click', toggleVCL);
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
$(document).ready(function() {
|
|
2
|
+
|
|
3
|
+
function toggleOverlay(event) {
|
|
4
|
+
event.preventDefault();
|
|
5
|
+
|
|
6
|
+
// Let overlay be _either_ the value of
|
|
7
|
+
// - href attribute
|
|
8
|
+
// - data-show attribute
|
|
9
|
+
// - The button's ancestor element, .va-overlay
|
|
10
|
+
// Only one of these should ever be defined per button.
|
|
11
|
+
|
|
12
|
+
var overlay = $(this).attr('href') || $(this).data('show') || $(this).parents('.va-overlay');
|
|
13
|
+
|
|
14
|
+
if( $(overlay).hasClass('va-overlay--open')) {
|
|
15
|
+
|
|
16
|
+
$(overlay).toggleClass('va-overlay--open', false);
|
|
17
|
+
$(overlay).toggleClass('va-overlay--closed', true);
|
|
18
|
+
|
|
19
|
+
} else {
|
|
20
|
+
|
|
21
|
+
$(overlay).toggleClass('va-overlay--closed', false);
|
|
22
|
+
$(overlay).toggleClass('va-overlay--open', true);
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
$('.va-overlay-trigger, .va-overlay-close').on('click', toggleOverlay);
|
|
28
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// USWDS overrides
|
|
2
|
+
|
|
3
|
+
$usa-form-width: 32em;
|
|
4
|
+
$font-serif: "Roboto Slab",serif;
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// Vets.gov
|
|
8
|
+
$color-green-darker: #195c27;
|
|
9
|
+
|
|
10
|
+
// Pieces of elements/typography we need
|
|
11
|
+
// TODO: properly incorporate elements/typography
|
|
12
|
+
$base-font-size: rem(16px);
|
|
13
|
+
|
|
14
|
+
// Other Colors
|
|
15
|
+
$polar: #E8F5FA;
|
|
16
|
+
$wild-sand: #f6f6f6;
|
|
17
|
+
$green-white: #eff0e6;
|
|
18
|
+
$olso-gray: #849097;
|
|
19
|
+
|
|
20
|
+
$color-va-black: #000;
|
|
21
|
+
// TODO: These colors is close enough to $color-gray-warm-dark and
|
|
22
|
+
// to each other that maybe we should replace them.
|
|
23
|
+
$color-va-gray-cool-dark: #444;
|
|
24
|
+
$color-va-gray-cool-medium: #555;
|
|
25
|
+
$color-va-gray-medium: #ccc;
|
|
26
|
+
|
|
27
|
+
// TODO: This can probably be replaced with $color-primary-alt-darkest
|
|
28
|
+
$color-va-primary-alt-darkest: #069;
|
|
29
|
+
$color-va-primary-darker: #003E73;
|
|
30
|
+
|
|
31
|
+
// TODO can probably replace with $color-secondary-darkest
|
|
32
|
+
$color-va-secondary-darkest: #a91d28;
|
|
33
|
+
|
|
34
|
+
// VA Fonts
|
|
35
|
+
$roboto-slab: 'Roboto Slab', serif;
|
|
@@ -1,16 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
html, body {
|
|
2
|
+
font-size: $em-base;
|
|
3
|
+
font-weight: 500;
|
|
4
|
+
padding: 0;
|
|
5
|
+
margin: 0;
|
|
6
|
+
}
|
|
2
7
|
|
|
3
|
-
|
|
8
|
+
body {
|
|
9
|
+
color: $color-gray-dark;
|
|
10
|
+
font-family: $font-sans;
|
|
11
|
+
font-size: $base-font-size;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// General
|
|
15
|
+
body, .home {
|
|
16
|
+
background: $color-primary-darkest image-url("design/background/thread.png") top left no-repeat;
|
|
17
|
+
background-size: contain;
|
|
18
|
+
color: $color-white;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// TODO: look into alert / error spacing issues
|
|
22
|
+
.usa-input-error {
|
|
23
|
+
right: 1rem;
|
|
24
|
+
padding-bottom: 0;
|
|
25
|
+
padding-top: 0;
|
|
26
|
+
margin-top: 0;
|
|
27
|
+
}
|
|
4
28
|
|
|
29
|
+
// Skip link
|
|
5
30
|
.show-on-focus {
|
|
6
31
|
position: absolute;
|
|
7
32
|
top: -10em;
|
|
8
|
-
background:
|
|
33
|
+
background: $color-white;
|
|
9
34
|
padding: 1em;
|
|
10
35
|
color: $color-primary-darkest;
|
|
11
36
|
display: block;
|
|
12
37
|
font-weight: 600;
|
|
13
|
-
|
|
38
|
+
|
|
14
39
|
&:focus {
|
|
15
40
|
position: inherit;
|
|
16
41
|
top: auto;
|
|
@@ -18,135 +43,183 @@
|
|
|
18
43
|
}
|
|
19
44
|
}
|
|
20
45
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
$wild-sand:#f6f6f6;
|
|
24
|
-
$green-white:#eff0e6;
|
|
25
|
-
$olso-gray:#849097;
|
|
26
|
-
|
|
27
|
-
// VA Fonts
|
|
28
|
-
$roboto-slab: 'Roboto Slab', serif;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
// General
|
|
32
|
-
html, body {
|
|
33
|
-
padding: 0;
|
|
34
|
-
margin: 0;
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
font-family: $font-sans;
|
|
37
|
-
font-weight: 500;
|
|
38
|
-
color: $color-gray-dark;
|
|
46
|
+
body .row {
|
|
47
|
+
max-width: 62.5em;
|
|
39
48
|
}
|
|
40
49
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
// row
|
|
51
|
+
body .row.full {
|
|
52
|
+
width: 100%;
|
|
53
|
+
max-width: 100%;
|
|
45
54
|
}
|
|
46
55
|
|
|
56
|
+
// Screen Readers
|
|
47
57
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
58
|
+
.sr-only {
|
|
59
|
+
position: absolute;
|
|
60
|
+
left: -9999em;
|
|
61
|
+
float: left;
|
|
51
62
|
}
|
|
52
|
-
|
|
53
|
-
|
|
63
|
+
|
|
64
|
+
// Abbr
|
|
65
|
+
|
|
66
|
+
abbr {
|
|
67
|
+
border-bottom: 0px !important;
|
|
68
|
+
text-decoration: none;
|
|
69
|
+
font-weight: inherit;
|
|
70
|
+
font-style: inherit;
|
|
71
|
+
color: inherit;
|
|
72
|
+
cursor: pointer;
|
|
54
73
|
}
|
|
55
74
|
|
|
56
|
-
|
|
57
|
-
|
|
75
|
+
a {
|
|
76
|
+
color: $color-primary;
|
|
77
|
+
text-decoration: underline;
|
|
78
|
+
|
|
79
|
+
-webkit-transition-duration: 0.3s;
|
|
80
|
+
transition-duration: 0.3s;
|
|
81
|
+
|
|
82
|
+
-webkit-transition-timing-function: ease-in-out;
|
|
83
|
+
transition-timing-function: ease-in-out;
|
|
84
|
+
|
|
85
|
+
// Transition only these properties.
|
|
86
|
+
-webkit-transition-property: color, background-color, border-color;
|
|
87
|
+
transition-property: color, background-color, border-color;
|
|
88
|
+
|
|
89
|
+
&:hover {
|
|
90
|
+
background-color: rgba(0,0,0,0.05);
|
|
91
|
+
color: inherit;
|
|
92
|
+
text-decoration: underline;
|
|
93
|
+
}
|
|
94
|
+
&:active {
|
|
95
|
+
background: rgba(0,0,0,.1);
|
|
96
|
+
}
|
|
97
|
+
&:visited {
|
|
98
|
+
color: $color-visited;
|
|
99
|
+
}
|
|
58
100
|
}
|
|
59
101
|
|
|
60
|
-
|
|
61
|
-
|
|
102
|
+
//======= Lists
|
|
103
|
+
ul {
|
|
104
|
+
padding: 0 0 0 1.5em;
|
|
105
|
+
list-style: square;
|
|
62
106
|
}
|
|
63
107
|
|
|
64
|
-
|
|
65
|
-
margin
|
|
66
|
-
|
|
108
|
+
ol {
|
|
109
|
+
margin: 0 0 0 1.25em;
|
|
110
|
+
list-style-position: outside;
|
|
111
|
+
}
|
|
67
112
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
113
|
+
ul, ol {
|
|
114
|
+
> ul, ol {
|
|
115
|
+
margin: .5em 0 .5em 1.2em;
|
|
116
|
+
}
|
|
71
117
|
}
|
|
72
118
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
width: 100% !important;
|
|
77
|
-
margin: 0;
|
|
78
|
-
width: auto;
|
|
79
|
-
background: #0071bc;
|
|
80
|
-
color: #fff;
|
|
119
|
+
// Definition lists
|
|
120
|
+
dd {
|
|
121
|
+
margin-left: 0;
|
|
81
122
|
}
|
|
82
123
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
max-height: 2.65em;
|
|
124
|
+
dd + dt {
|
|
125
|
+
margin-top: 1.5em;
|
|
86
126
|
}
|
|
87
|
-
// end gem specific
|
|
88
127
|
|
|
89
128
|
|
|
90
|
-
//
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
129
|
+
// Figure / Caption
|
|
130
|
+
figure {
|
|
131
|
+
font-size: .85em;
|
|
132
|
+
margin-left: -$column-gutter/2;
|
|
133
|
+
margin-right: -$column-gutter/2;
|
|
134
|
+
|
|
135
|
+
@media #{$small} {
|
|
136
|
+
margin-left: inherit;
|
|
137
|
+
margin-right: inherit;
|
|
138
|
+
}
|
|
95
139
|
|
|
96
|
-
|
|
97
|
-
|
|
140
|
+
@media #{$large} {
|
|
141
|
+
margin-left: -16.66667%;
|
|
142
|
+
margin-right: -16.66667%;
|
|
143
|
+
}
|
|
98
144
|
}
|
|
99
145
|
|
|
100
|
-
|
|
146
|
+
figcaption {
|
|
147
|
+
color: $color-primary-darker;
|
|
148
|
+
}
|
|
101
149
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
150
|
+
// Change the placeholder color
|
|
151
|
+
input::-webkit-input-placeholder{
|
|
152
|
+
color: $color-gray;
|
|
153
|
+
}
|
|
154
|
+
input::-moz-placeholder {
|
|
155
|
+
color: $color-gray;
|
|
156
|
+
}
|
|
157
|
+
input:-ms-input-placeholder {
|
|
158
|
+
color: $color-gray;
|
|
159
|
+
}
|
|
160
|
+
// Visually clear placeholder text on focus
|
|
161
|
+
input:focus::-webkit-input-placeholder{
|
|
162
|
+
color: transparent;
|
|
163
|
+
}
|
|
164
|
+
input:focus::-moz-placeholder {
|
|
165
|
+
color: transparent;
|
|
166
|
+
}
|
|
167
|
+
input:focus:-ms-input-placeholder {
|
|
168
|
+
color: transparent;
|
|
106
169
|
}
|
|
107
170
|
|
|
108
|
-
|
|
171
|
+
hr {
|
|
172
|
+
margin: 2.5em 0;
|
|
173
|
+
margin: 3rem 0 2.5rem;
|
|
174
|
+
border: 1px solid $color-gray-light;
|
|
175
|
+
}
|
|
109
176
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
font-style: inherit;
|
|
115
|
-
color: inherit;
|
|
116
|
-
cursor: pointer;
|
|
177
|
+
// Utility classes
|
|
178
|
+
// TODO: Move these into a partial once there are enough
|
|
179
|
+
.va-util-rel {
|
|
180
|
+
position: relative
|
|
117
181
|
}
|
|
118
182
|
|
|
119
183
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
-webkit-transition: all 0.3s ease-in-out;
|
|
125
|
-
-moz-transition: all 0.3s ease-in-out;
|
|
126
|
-
-o-transition: all 0.3s ease-in-out;
|
|
127
|
-
-ms-transition: all 0.3s ease-in-out;
|
|
128
|
-
transition: all 0.3s ease-in-out;
|
|
129
|
-
color: $color-gray-dark;
|
|
130
|
-
&:hover {
|
|
131
|
-
color: $color-gray-dark;
|
|
184
|
+
// Interior rows
|
|
185
|
+
#content.interior a[href^="http://"],
|
|
186
|
+
#content.interior a[href^="https://"] {
|
|
187
|
+
position: relative;
|
|
132
188
|
}
|
|
133
189
|
|
|
134
|
-
|
|
190
|
+
// Adds external icon to all links that begin
|
|
191
|
+
// with http (including https)
|
|
192
|
+
[href^=http] {
|
|
193
|
+
// Using longhand properties instead of the shorthand to limit
|
|
194
|
+
// risk and impact of side effects
|
|
195
|
+
background-image: image-url("icons/exit-icon.png");
|
|
196
|
+
background-position: 100% 50%;
|
|
197
|
+
background-repeat: no-repeat;
|
|
198
|
+
background-size: 1em auto;
|
|
199
|
+
padding-right: 1.2em;
|
|
135
200
|
}
|
|
136
201
|
|
|
202
|
+
.usa-button-primary[href^=http] {
|
|
203
|
+
background-image: none;
|
|
204
|
+
// TODO: clean up #content .main.interior a then remove !important
|
|
205
|
+
text-decoration: none !important;
|
|
206
|
+
}
|
|
137
207
|
|
|
138
208
|
// Logo and Header
|
|
139
|
-
|
|
140
209
|
.header {
|
|
141
210
|
clear: both;
|
|
142
211
|
padding: 0 0 .5em 0;
|
|
143
212
|
margin: 0;
|
|
144
|
-
|
|
145
|
-
h1 {margin: 0; line-height: 1em; @media #{$small} {margin: .25em 0 0 0;} }
|
|
146
|
-
color: #fff;
|
|
147
213
|
}
|
|
148
214
|
|
|
149
|
-
|
|
215
|
+
.va-header-logo {
|
|
216
|
+
line-height: 1em;
|
|
217
|
+
margin: 0;
|
|
218
|
+
|
|
219
|
+
@media #{$small} {
|
|
220
|
+
margin: .25em 0 0 0;
|
|
221
|
+
}
|
|
222
|
+
|
|
150
223
|
a {
|
|
151
224
|
text-indent: 180%;
|
|
152
225
|
white-space: nowrap;
|
|
@@ -158,188 +231,232 @@ h1 {
|
|
|
158
231
|
background-size: contain;
|
|
159
232
|
border-bottom: none;
|
|
160
233
|
text-decoration: none;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
background-size: contain;
|
|
234
|
+
|
|
235
|
+
&:hover, &:active, &:focus {
|
|
236
|
+
background-image: image-url("design/logo/logo-hover.png");
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
@media #{$small} {
|
|
240
|
+
width: 263px;
|
|
241
|
+
height: 50px;
|
|
170
242
|
}
|
|
171
243
|
}
|
|
172
244
|
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
// Type
|
|
177
245
|
|
|
246
|
+
// Headings
|
|
178
247
|
h1, h2 {
|
|
179
248
|
font-family: $font-sans;
|
|
180
|
-
font-weight: 600;
|
|
181
249
|
}
|
|
250
|
+
|
|
182
251
|
h3, h4, h5, h6 {
|
|
183
|
-
color
|
|
184
|
-
font-weight: 600;
|
|
252
|
+
color: $color-primary-darkest;
|
|
185
253
|
}
|
|
186
254
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
255
|
+
h3 {
|
|
256
|
+
font-size: 1.8em;
|
|
257
|
+
padding: 0 0 1em 0;
|
|
258
|
+
}
|
|
259
|
+
h4 {
|
|
260
|
+
font-size: 1.5em;
|
|
261
|
+
font-weight: normal;
|
|
262
|
+
}
|
|
263
|
+
h5 {
|
|
264
|
+
font-size: 1.25em;
|
|
265
|
+
font-weight: normal;
|
|
266
|
+
}
|
|
267
|
+
h6 {
|
|
268
|
+
font-size: 1.15em;
|
|
269
|
+
font-weight: bold;
|
|
270
|
+
}
|
|
191
271
|
|
|
192
272
|
// Banner
|
|
193
273
|
|
|
194
|
-
#content {
|
|
274
|
+
#content {
|
|
275
|
+
margin: 0;
|
|
276
|
+
padding: 0;
|
|
277
|
+
color: $color-gray-dark;
|
|
278
|
+
}
|
|
195
279
|
|
|
196
280
|
#content .splash {
|
|
197
281
|
padding: 0 0 .5em 0;
|
|
198
282
|
margin: 0;
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
&.app {
|
|
204
|
-
padding: 0;
|
|
205
|
-
p {color: #fff; font-family: $font-sans;}
|
|
206
|
-
ul.breadcrumbs {
|
|
207
|
-
display: inline-block;
|
|
208
|
-
margin: 0 0 .5em 0; padding: 0;
|
|
209
|
-
@media #{$small} {margin-right: 1em;}
|
|
210
|
-
h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
|
|
211
|
-
li {overflow: hidden; padding: 0;}
|
|
212
|
-
}
|
|
213
|
-
p {margin: .5em 0 1em 0;}
|
|
283
|
+
|
|
284
|
+
p {
|
|
285
|
+
color: $color-white;
|
|
286
|
+
font-family: $font-sans;
|
|
214
287
|
}
|
|
215
288
|
|
|
216
289
|
@media #{$small} {padding: 1em 0;}
|
|
217
290
|
@media #{$medium} {padding: 2em 0;}
|
|
218
291
|
@media #{$large} {padding: 2.5em 0;}
|
|
292
|
+
|
|
219
293
|
span, h2 {
|
|
220
294
|
padding: 0;
|
|
221
295
|
display: inline;
|
|
222
296
|
line-height: 1.3em;
|
|
223
297
|
margin: .5em 0 0 0;
|
|
224
|
-
|
|
225
|
-
color:
|
|
226
|
-
a {background: $color-gold; color:
|
|
298
|
+
white-space: pre-wrap;
|
|
299
|
+
color: $color-gray-dark;
|
|
300
|
+
a {background: $color-gold; color: $color-va-gray-cool-dark;}
|
|
227
301
|
}
|
|
228
302
|
|
|
229
|
-
h2 span {clear: both; padding: .
|
|
230
|
-
h2, h3, p {
|
|
303
|
+
h2 span {clear: both; padding: .04em; display: inline-block; background: $color-gold; font-weight: normal;}
|
|
304
|
+
h2, h3, p {margin: 0; display: inline-block; font-family: $font-serif;}
|
|
231
305
|
h2 {
|
|
232
306
|
font-size: 1em;
|
|
233
307
|
display: inline-block;
|
|
234
308
|
@media #{$small} {font-size: 2em;}
|
|
235
309
|
}
|
|
236
|
-
h3 {font-weight: 500; font-size: 1.4em; color: #555;}
|
|
237
310
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
color: $color-primary-darkest;
|
|
241
|
-
border-bottom: 2px solid $secondary-color;
|
|
242
|
-
}
|
|
311
|
+
h3 {font-weight: 500; font-size: 1.4em; color: $color-va-gray-cool-medium;}
|
|
312
|
+
}
|
|
243
313
|
|
|
244
|
-
|
|
245
|
-
|
|
314
|
+
.splash--app {
|
|
315
|
+
padding: 0 !important;
|
|
246
316
|
|
|
317
|
+
h2 {
|
|
318
|
+
margin: 0;
|
|
319
|
+
padding: .2em;
|
|
320
|
+
line-height: 1em;
|
|
321
|
+
display: inline-block !important;
|
|
322
|
+
}
|
|
247
323
|
}
|
|
248
324
|
|
|
249
|
-
.
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
325
|
+
// TODO: Remove !important once #content ul.breadcrumbs li.active
|
|
326
|
+
// is refactored.
|
|
327
|
+
.splash--alternate {
|
|
328
|
+
li a {
|
|
329
|
+
color: $color-primary-darkest !important;
|
|
330
|
+
border-bottom: 2px solid $secondary-color !important;
|
|
331
|
+
|
|
332
|
+
&:hover {
|
|
333
|
+
border-bottom: 3px solid $color-gold !important;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
253
336
|
|
|
254
|
-
|
|
337
|
+
li.parent:after {color: #ccc !important;}
|
|
338
|
+
}
|
|
255
339
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
340
|
+
.va-facloc-tagline {
|
|
341
|
+
color: $color-white;
|
|
342
|
+
font-family: $font-sans;
|
|
343
|
+
margin: .5em 0 1em 0 !important;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
|
|
347
|
+
.pitch {
|
|
348
|
+
@media #{$small} {
|
|
349
|
+
padding: .5em 0;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
h2, h3 {
|
|
353
|
+
color: $color-primary-darkest;
|
|
354
|
+
font-weight: 400;
|
|
355
|
+
padding: .75em;
|
|
356
|
+
line-height: 1.3em;
|
|
357
|
+
display: inline-block;
|
|
259
358
|
margin: 0;
|
|
260
|
-
color: #444;
|
|
261
|
-
background: $color-gold;
|
|
262
|
-
line-height: 1.4em;
|
|
263
|
-
font-size: .9em;
|
|
264
359
|
}
|
|
265
360
|
}
|
|
266
361
|
|
|
267
|
-
.feature-list ul
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
362
|
+
// TODO: Remove .feature-list ul once it's
|
|
363
|
+
// refactored from the Markdown
|
|
364
|
+
.feature-list ul,
|
|
365
|
+
.va-list--feature {
|
|
366
|
+
margin: 0;
|
|
367
|
+
padding: 0;
|
|
368
|
+
list-style: none outside;
|
|
369
|
+
|
|
370
|
+
li {
|
|
371
|
+
|
|
273
372
|
border-bottom: 1px solid #ccc;
|
|
274
373
|
padding: 1em 0;
|
|
275
|
-
|
|
374
|
+
|
|
375
|
+
&:last-of-type {
|
|
376
|
+
border-bottom: none;
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
a {
|
|
381
|
+
font-weight: bold;
|
|
276
382
|
}
|
|
277
383
|
}
|
|
278
384
|
|
|
279
385
|
.primary {
|
|
280
|
-
@media #{$small} {
|
|
281
|
-
|
|
282
|
-
|
|
386
|
+
@media #{$small} {
|
|
387
|
+
padding: 2em 0;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
p {
|
|
391
|
+
padding-top: 0;
|
|
392
|
+
margin-top: 0;
|
|
393
|
+
padding-bottom: 1em; // TODO: Consider deleting.
|
|
394
|
+
|
|
395
|
+
&:nth-child(1),
|
|
396
|
+
&:first-of-type {
|
|
397
|
+
color: $color-primary-darker;
|
|
398
|
+
letter-spacing: normal;
|
|
399
|
+
font-size: 1.25em;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
}
|
|
403
|
+
|
|
283
404
|
h3 {
|
|
284
|
-
padding: 0 0 .5em 0;
|
|
405
|
+
padding: 0 0 .5em 0;
|
|
406
|
+
font-size: 1.25em;
|
|
407
|
+
@media #{$small} {
|
|
408
|
+
font-size: 1.8em;
|
|
409
|
+
}
|
|
285
410
|
}
|
|
286
411
|
}
|
|
287
412
|
|
|
413
|
+
// TODO: Integrate USWDS and elements/_typography.scss
|
|
414
|
+
// and eliminate this declaration
|
|
415
|
+
.usa-content {
|
|
416
|
+
max-width: $text-max-width;
|
|
417
|
+
}
|
|
418
|
+
|
|
288
419
|
html.no-touch .banner {
|
|
289
420
|
background: image-url("design/banner.jpg") 50% 60% no-repeat;
|
|
290
421
|
background-size: cover;
|
|
291
422
|
}
|
|
292
423
|
|
|
293
|
-
//
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
h5 {font-size: 1em; font-weight: bold;}
|
|
424
|
+
// Use to add a horizontal rule under the heading
|
|
425
|
+
.va-h-ruled {
|
|
426
|
+
border-bottom: 6px solid $color-primary-darkest;
|
|
427
|
+
}
|
|
298
428
|
|
|
299
429
|
// tagline
|
|
300
|
-
|
|
301
430
|
#content .tagline-content {
|
|
302
|
-
p {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
431
|
+
p {
|
|
432
|
+
font-size: 2.15em;
|
|
433
|
+
border-bottom: 2px solid white;
|
|
434
|
+
padding: 0 0 1em 0;
|
|
435
|
+
margin: 0 0 2em 0;
|
|
436
|
+
color: rgba(255,255,255,.7);
|
|
437
|
+
line-height: 1.2em;
|
|
309
438
|
}
|
|
310
439
|
}
|
|
311
440
|
|
|
312
441
|
// Content Callouts
|
|
313
442
|
|
|
314
443
|
#content .main .section.one {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
margin: 0 0 1em 0;
|
|
320
|
-
}
|
|
321
|
-
ul, ol {
|
|
322
|
-
margin: .5em 0 .5em 1.2em;
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
ul {
|
|
327
|
-
margin: 0 0 1em 1.2em;
|
|
328
|
-
padding: 0;
|
|
329
|
-
list-style-position: outside;
|
|
444
|
+
|
|
445
|
+
ul.plain {
|
|
446
|
+
margin: .5em 0 1em 0;
|
|
447
|
+
|
|
330
448
|
li {
|
|
331
|
-
list-style:
|
|
449
|
+
list-style: none;
|
|
450
|
+
padding: .35em 0;
|
|
451
|
+
display: block;
|
|
332
452
|
}
|
|
333
453
|
}
|
|
334
454
|
|
|
335
|
-
ul.plain {
|
|
336
|
-
margin: 0 0 1em 0;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
455
|
ul[class*="block-grid-"] {
|
|
340
456
|
display: block;
|
|
341
457
|
padding: 0;
|
|
342
|
-
margin: 0
|
|
458
|
+
margin: 0;
|
|
459
|
+
@media #{$small} {margin: 0 -0.625rem;}
|
|
343
460
|
}
|
|
344
461
|
}
|
|
345
462
|
|
|
@@ -348,15 +465,24 @@ p {
|
|
|
348
465
|
padding: 1em;
|
|
349
466
|
clear: both;
|
|
350
467
|
margin: 0 0 1.5em 0;
|
|
351
|
-
p {
|
|
468
|
+
p {
|
|
469
|
+
margin-bottom: 0;
|
|
470
|
+
padding-bottom: .5em
|
|
471
|
+
}
|
|
352
472
|
p:nth-child(1) {
|
|
353
|
-
|
|
354
|
-
|
|
473
|
+
// TODO: refactor #content.interior .primary li p:first-of-type and remove !important
|
|
474
|
+
font-size: 1.25em !important;
|
|
475
|
+
color: $color-gray-dark;
|
|
355
476
|
padding-bottom: inherit;
|
|
356
477
|
}
|
|
357
|
-
h3 {
|
|
478
|
+
h3 {
|
|
479
|
+
@media #{$small} {
|
|
480
|
+
font-size: 1.65em;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
358
483
|
ul {
|
|
359
|
-
margin: 0 0 .5em 1.5em;
|
|
484
|
+
margin: 0 0 .5em 1.5em;
|
|
485
|
+
padding: 0;
|
|
360
486
|
li {
|
|
361
487
|
list-style: square;
|
|
362
488
|
margin: 0;
|
|
@@ -364,40 +490,93 @@ p {
|
|
|
364
490
|
}
|
|
365
491
|
}
|
|
366
492
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
color:
|
|
375
|
-
font-size:
|
|
376
|
-
|
|
493
|
+
.va-callout {
|
|
494
|
+
background: $color-primary-alt-lightest;
|
|
495
|
+
padding: 1em;
|
|
496
|
+
clear: both;
|
|
497
|
+
margin: 0 0 1.5em 0;
|
|
498
|
+
|
|
499
|
+
dt {
|
|
500
|
+
color: $color-primary-darkest;
|
|
501
|
+
font-size: 1.65em;
|
|
502
|
+
font-weight: bold;
|
|
503
|
+
margin: 0 0 .5rem 0;
|
|
377
504
|
}
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
505
|
+
|
|
506
|
+
dd {
|
|
507
|
+
margin-left: 0;
|
|
508
|
+
padding-left: 0;
|
|
509
|
+
}
|
|
510
|
+
ul {
|
|
511
|
+
margin: 0 0 .5rem 1.5rem;
|
|
512
|
+
padding: 0;
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
// Usually call out boxes will be definition lists, but
|
|
517
|
+
// sometimes they're unordered lists.
|
|
518
|
+
ul, ol {
|
|
519
|
+
&.va-callout {
|
|
520
|
+
li {
|
|
521
|
+
margin-left: 3rem !important;
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
// Home page, 404 page
|
|
527
|
+
.navigation--major {
|
|
528
|
+
.fourohfour &,
|
|
529
|
+
.home & {
|
|
530
|
+
padding-top: 1.5em;
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
// Quick Links
|
|
535
|
+
.va-quicklinks {
|
|
536
|
+
ul {
|
|
537
|
+
padding-left: 0;
|
|
538
|
+
}
|
|
539
|
+
h3 {
|
|
540
|
+
line-height: 1.2em;
|
|
541
|
+
// TODO: Drop the !important when .home #content h3 and
|
|
542
|
+
// body.fourohfour #content h3 are straightened out.
|
|
543
|
+
font-size: 1.65em !important;
|
|
544
|
+
color: $color-primary-darkest !important;
|
|
545
|
+
margin: 0 0 2.5em 0;
|
|
546
|
+
padding: 0 0 .2em 0;
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
|
|
551
|
+
// Content lead paragraphs
|
|
552
|
+
|
|
553
|
+
#content.interior .primary {
|
|
554
|
+
li p:first-of-type,
|
|
555
|
+
ul+p
|
|
556
|
+
{
|
|
557
|
+
font-weight: normal !important;
|
|
558
|
+
color: $color-gray-dark;
|
|
559
|
+
font-size: 1em;
|
|
560
|
+
padding-bottom: 0;
|
|
384
561
|
}
|
|
385
562
|
}
|
|
386
563
|
|
|
387
564
|
#content .main.interior {
|
|
388
|
-
background:
|
|
565
|
+
background: $color-white;
|
|
389
566
|
a {text-decoration: underline;}
|
|
390
567
|
}
|
|
391
568
|
|
|
392
569
|
// Home page specific
|
|
393
570
|
|
|
394
571
|
.home #content {
|
|
395
|
-
h2, h3, h4, h5, h6, p, ul, li, ol
|
|
396
|
-
|
|
572
|
+
h2, h3, h4, h5, h6, p, ul, li, ol {color: $color-gray-dark;}
|
|
573
|
+
|
|
574
|
+
.post-date {
|
|
575
|
+
font-size: .5em; color: $color-gold;
|
|
576
|
+
}
|
|
577
|
+
|
|
397
578
|
h3 {
|
|
398
|
-
border-bottom: 1px solid #fff;
|
|
399
579
|
line-height: 1.2em;
|
|
400
|
-
border-bottom: 6px solid $color-primary-darker;
|
|
401
580
|
font-size: 1.65em;
|
|
402
581
|
color: $color-primary;
|
|
403
582
|
margin: 0 0 2.5em 0;
|
|
@@ -407,7 +586,7 @@ p {
|
|
|
407
586
|
h4 a {
|
|
408
587
|
text-decoration: none;
|
|
409
588
|
&:hover {
|
|
410
|
-
border-bottom: 1px solid
|
|
589
|
+
border-bottom: 1px solid $color-white;
|
|
411
590
|
color: $color-gold;
|
|
412
591
|
}
|
|
413
592
|
}
|
|
@@ -429,7 +608,6 @@ p {
|
|
|
429
608
|
margin: 0;
|
|
430
609
|
padding: 0;
|
|
431
610
|
li {list-style: none; border-bottom: none;}
|
|
432
|
-
/*a {background: none;}*/
|
|
433
611
|
}
|
|
434
612
|
|
|
435
613
|
.section {
|
|
@@ -439,27 +617,14 @@ p {
|
|
|
439
617
|
|
|
440
618
|
.section.main-menu {
|
|
441
619
|
padding: .5em .5em 2.35em .5em;
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
ul li a {
|
|
447
|
-
h3 {border-bottom: none;}
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
.section.one, .section.two {
|
|
454
|
-
a {
|
|
455
|
-
color: $color-gray-dark;
|
|
456
|
-
&:hover {
|
|
457
|
-
color: $color-primary-darkest;
|
|
458
|
-
background: rgba(0,0,0,.15);
|
|
459
|
-
}
|
|
620
|
+
overflow: hidden;
|
|
621
|
+
|
|
622
|
+
@media #{$small} {
|
|
623
|
+
padding: 1em 0 1.5em 0;
|
|
460
624
|
}
|
|
461
625
|
}
|
|
462
626
|
|
|
627
|
+
|
|
463
628
|
.home #content .section h3.alternate {
|
|
464
629
|
margin: 0 0 2em 0 !important; padding: 0;
|
|
465
630
|
}
|
|
@@ -471,42 +636,41 @@ p {
|
|
|
471
636
|
|
|
472
637
|
.section.two {
|
|
473
638
|
padding: 2em 0;
|
|
474
|
-
a, h3 {color:
|
|
639
|
+
a, h3 {color: $color-white;}
|
|
475
640
|
h3 {border-bottom: none;}
|
|
476
641
|
background: rgba(0,0,0,.1);
|
|
477
642
|
}
|
|
478
643
|
|
|
479
644
|
.section.three {
|
|
480
|
-
background:
|
|
645
|
+
background: $color-white;
|
|
481
646
|
padding: 5em 0;
|
|
482
|
-
h2, h3, h4, h5, h6, p, li {color:
|
|
647
|
+
h2, h3, h4, h5, h6, p, li {color: $color-va-gray-cool-dark;}
|
|
483
648
|
h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
|
|
484
649
|
a {color: $color-primary-darkest;}
|
|
485
650
|
}
|
|
486
651
|
}
|
|
487
652
|
|
|
488
|
-
|
|
489
653
|
#content .section.primary {
|
|
490
654
|
background: none;
|
|
491
655
|
padding: 2em 0;
|
|
492
656
|
background: $color-primary;
|
|
493
|
-
h1, h2, h3, h4, h5, h6, p, li {color:
|
|
657
|
+
h1, h2, h3, h4, h5, h6, p, li {color: $color-white;}
|
|
494
658
|
p {color: rgba(255,255,255,1);}
|
|
495
|
-
a {color:
|
|
659
|
+
a {color: $color-white;}
|
|
660
|
+
ul li {list-style: square;}
|
|
496
661
|
}
|
|
497
662
|
|
|
498
663
|
#content .section.secondary {
|
|
499
|
-
background: rgba(255,255,255,.85);
|
|
664
|
+
background: rgba(255,255,255,.85);
|
|
500
665
|
}
|
|
501
666
|
|
|
502
667
|
#content .section.tertiary {
|
|
503
|
-
background: $polar;
|
|
504
|
-
/*background: rgba(0,0,0,.05);*/
|
|
668
|
+
background: $polar;
|
|
505
669
|
}
|
|
506
670
|
|
|
507
671
|
#content .section.quaternary {
|
|
508
|
-
background:
|
|
509
|
-
h1, h2, h3, h4, h5, h6, p, li {color:
|
|
672
|
+
background: $color-gray-lighter;
|
|
673
|
+
h1, h2, h3, h4, h5, h6, p, li {color: $color-white;}
|
|
510
674
|
h4 {font-weight: 700;}
|
|
511
675
|
.cards {
|
|
512
676
|
a {
|
|
@@ -517,151 +681,115 @@ background: $polar;
|
|
|
517
681
|
}
|
|
518
682
|
|
|
519
683
|
#content .section.coda {
|
|
520
|
-
background: $color-primary-darker;
|
|
521
|
-
color:
|
|
522
|
-
h2, h3, h4, h5, h6, a {color:
|
|
523
|
-
h4 {font-size: 1.5em;}
|
|
684
|
+
background: $color-primary-darker;
|
|
685
|
+
color: $color-white;
|
|
686
|
+
h2, h3, h4, h5, h6, a {color: $color-white;}
|
|
687
|
+
h4 {font-size: 1.5em;}
|
|
524
688
|
}
|
|
525
689
|
|
|
526
690
|
#content .section {
|
|
527
|
-
h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
|
|
528
|
-
h2 {line-height: 1.2em;}
|
|
691
|
+
h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
|
|
692
|
+
h2 {line-height: 1.2em;}
|
|
529
693
|
}
|
|
530
694
|
|
|
531
|
-
#content .section .feature {
|
|
695
|
+
#content .section .feature {min-height: 11em;}
|
|
532
696
|
|
|
533
697
|
#content .panel {
|
|
534
|
-
background: $color-gray-lightest;
|
|
535
|
-
padding: 1em;
|
|
536
|
-
margin-bottom: 1.5em;
|
|
537
|
-
clear: both;
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
#content .section.do {
|
|
541
|
-
background: #efefef;
|
|
542
|
-
padding: 2em 0;
|
|
543
|
-
h2, h3, h4, h5, h6, p, li {color: #444;}
|
|
544
|
-
h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
|
|
545
|
-
a {color: #fff;}
|
|
546
|
-
a.usa-button-primary {background: $color-green;}
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
#content {
|
|
550
|
-
a.usa-button-primary.start {background: $color-green; text-decoration: none;}
|
|
698
|
+
background: $color-gray-lightest;
|
|
699
|
+
padding: 1em;
|
|
700
|
+
margin-bottom: 1.5em;
|
|
701
|
+
clear: both;
|
|
551
702
|
}
|
|
552
703
|
|
|
553
704
|
#content .section.secondary,
|
|
554
705
|
#content .section.tertiary,
|
|
555
706
|
#content .section.quaternary,
|
|
556
707
|
#content .section.coda {
|
|
557
|
-
padding: 3em 0;
|
|
558
|
-
h3 {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
#content .section.start {
|
|
562
|
-
background: $color-green-lightest;
|
|
563
|
-
padding: 3em 0;
|
|
564
|
-
border-bottom: 3px solid #fff;
|
|
708
|
+
padding: 3em 0;
|
|
709
|
+
h3 {
|
|
710
|
+
font-size: 2.2em;
|
|
711
|
+
}
|
|
565
712
|
}
|
|
566
713
|
|
|
567
714
|
// Sections
|
|
568
715
|
|
|
569
716
|
.section {
|
|
570
|
-
background:
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
}
|
|
579
|
-
|
|
717
|
+
background: $color-white;
|
|
718
|
+
|
|
719
|
+
&.one {
|
|
720
|
+
padding: 2rem 0 0 0;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
&.two {
|
|
724
|
+
padding: 0 0 4em 0;
|
|
725
|
+
h3 {color: darken($color-green, 10);}
|
|
726
|
+
clear: both;
|
|
727
|
+
}
|
|
728
|
+
&.three {clear: both; padding: 2em 0;}
|
|
580
729
|
}
|
|
581
730
|
|
|
582
731
|
|
|
583
732
|
// Action
|
|
584
|
-
|
|
585
733
|
.action {
|
|
586
|
-
margin: 0 auto;
|
|
587
|
-
text-align: left;
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
734
|
+
margin: 0 auto;
|
|
735
|
+
text-align: left;
|
|
736
|
+
|
|
737
|
+
.button {
|
|
738
|
+
font-size: 1.25em;
|
|
739
|
+
padding: 1em 3.5em;
|
|
740
|
+
}
|
|
592
741
|
}
|
|
593
742
|
|
|
594
743
|
|
|
595
744
|
// Breadcrumbs
|
|
745
|
+
.va-nav-breadcrumbs {
|
|
746
|
+
background: $color-white;
|
|
747
|
+
color: $color-primary;
|
|
748
|
+
font-size: inherit;
|
|
749
|
+
padding: 1em 0;
|
|
596
750
|
|
|
597
|
-
|
|
598
|
-
background: none;
|
|
599
|
-
border: none;
|
|
600
|
-
margin: 0 0 1em 0;
|
|
601
|
-
h2 {font-size: 1em;}
|
|
602
|
-
padding: 0;
|
|
603
|
-
@media #{$small} {margin: 0 0 1em 0;}
|
|
604
|
-
border-radius: 0;
|
|
605
|
-
border-radius: none;
|
|
606
|
-
-webkit-border-radius: 0;
|
|
607
|
-
|
|
751
|
+
|
|
608
752
|
li {
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
&.parent {
|
|
620
|
-
a {background: none;}
|
|
621
|
-
padding-top: .5em;
|
|
622
|
-
margin: 0 0 .75em 0;
|
|
623
|
-
@media #{$small} {display: inline-block;}
|
|
624
|
-
|
|
625
|
-
&:before {content: none; vertical-align: middle;}
|
|
626
|
-
&:after {content:" › "; display: inline-block; color: #fff; padding: 0 .5em;}
|
|
753
|
+
display: inline-block;
|
|
754
|
+
margin: .25em 0;
|
|
755
|
+
//outline: 1px dashed #6c6;
|
|
756
|
+
padding: .25em 0 .25em 0;
|
|
757
|
+
vertical-align: middle;
|
|
758
|
+
|
|
759
|
+
&:after {
|
|
760
|
+
content: " › ";
|
|
761
|
+
display: inline-block;
|
|
762
|
+
padding: 0 .35em;
|
|
627
763
|
}
|
|
628
764
|
|
|
629
765
|
&.active {
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
padding: .2em;
|
|
636
|
-
font-size: 1.35em;
|
|
637
|
-
@media #{$medium} {font-size: 1.8em;}
|
|
638
|
-
&:before {content: ""; padding: 0; margin: 0;}
|
|
766
|
+
font-weight: bold;
|
|
767
|
+
padding: .3em 0;
|
|
768
|
+
|
|
769
|
+
&:after {
|
|
770
|
+
content: '';
|
|
639
771
|
}
|
|
640
772
|
}
|
|
641
|
-
a {
|
|
642
|
-
border-bottom: 3px solid #fff;
|
|
643
|
-
background: none;
|
|
644
|
-
text-decoration: none !important;
|
|
645
|
-
color: #fff;
|
|
646
|
-
&:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
|
|
647
773
|
}
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
774
|
+
a {
|
|
775
|
+
color: $color-primary;
|
|
776
|
+
display: inline-block;
|
|
777
|
+
padding: 2px;
|
|
651
778
|
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
779
|
+
&:hover {
|
|
780
|
+
background: rgba(0,0,0,.1);
|
|
781
|
+
}
|
|
655
782
|
}
|
|
656
783
|
}
|
|
657
784
|
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
list-style-position: outside;
|
|
662
|
-
}
|
|
785
|
+
.va-nav-breadcrumbs-list {
|
|
786
|
+
@extend .columns;
|
|
787
|
+
float: none;
|
|
663
788
|
}
|
|
664
789
|
|
|
790
|
+
|
|
791
|
+
// General List Styles
|
|
792
|
+
|
|
665
793
|
li {
|
|
666
794
|
span.meta {
|
|
667
795
|
display: inline-block;
|
|
@@ -682,162 +810,18 @@ li {
|
|
|
682
810
|
}
|
|
683
811
|
}
|
|
684
812
|
|
|
685
|
-
// Tables
|
|
686
|
-
table {
|
|
687
|
-
|
|
688
|
-
caption {
|
|
689
|
-
text-align: left;
|
|
690
|
-
padding: 0 0 .25em 0;
|
|
691
|
-
font-weight: bold;
|
|
692
|
-
font-size: 1.25em;
|
|
693
|
-
}
|
|
694
|
-
border: 0;
|
|
695
|
-
text-align: left;
|
|
696
|
-
@media #{$small-only} {
|
|
697
|
-
font-size: .5em;
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
td,th {
|
|
701
|
-
padding-top:.8em;
|
|
702
|
-
padding-bottom: .8em;
|
|
703
|
-
padding-left: .8em;
|
|
704
|
-
}
|
|
705
|
-
|
|
706
|
-
th{
|
|
707
|
-
&[colspan] {
|
|
708
|
-
background: #E8F5FA;
|
|
709
|
-
font-size: 1.19rem;
|
|
710
|
-
padding-top:.8em;
|
|
711
|
-
padding-bottom: .8em;
|
|
712
|
-
padding-left: .8em;
|
|
713
|
-
color:$color-primary-darkest;
|
|
714
|
-
}
|
|
715
|
-
span {
|
|
716
|
-
font-weight: normal;
|
|
717
|
-
}
|
|
718
|
-
}
|
|
719
|
-
tr {
|
|
720
|
-
background: #fff!important;
|
|
721
|
-
}
|
|
722
|
-
|
|
723
|
-
// Definition lists
|
|
724
|
-
|
|
725
|
-
dl.simple {
|
|
726
|
-
margin: 0;
|
|
727
|
-
padding: 0 0 1em 0;
|
|
728
|
-
&.feature {padding: .25em .5em;}
|
|
729
|
-
dd {padding: 0; margin: 0; border-bottom: 1px solid #eee; &:last-of-type {border-bottom: none;}}
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
// Checklists
|
|
733
|
-
|
|
734
|
-
ul.checklist, ol.checklist {
|
|
735
|
-
margin: 0 0 0 1.35em; padding: 0;
|
|
736
|
-
li {
|
|
737
|
-
font-weight: 500;
|
|
738
|
-
span {font-weight: normal; font-size: 1em; display: block; margin-left: 2.25em; color: #555;}
|
|
739
|
-
padding: 1em 0;
|
|
740
|
-
border-bottom: 1px solid #ccc;
|
|
741
|
-
&:last-of-type {border-bottom: none;}
|
|
742
|
-
h5 {font-size: 1.35em;}
|
|
743
|
-
ul li {
|
|
744
|
-
border-bottom: none;
|
|
745
|
-
padding: .5em 0;
|
|
746
|
-
span {background: rgba(0,0,0,.1); display: block; padding: 1em .5em; text-align: center;}
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
ul {
|
|
750
|
-
margin: 0 !important;
|
|
751
|
-
padding: 0;
|
|
752
|
-
text-align: center;
|
|
753
|
-
svg {display: block; margin: .25em auto;}
|
|
754
|
-
|
|
755
|
-
li {padding: 0; margin: 0;}
|
|
756
|
-
&:before {margin: 0; padding: 0;}
|
|
757
|
-
span.type {margin: .25em .25em 1em .25em; color: $color-primary-darkest; @media #{$small} {padding: 2.5em 1em;} background: rgba($secondary-color, .15);}
|
|
758
|
-
}
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
|
|
762
|
-
// Informational Content
|
|
763
|
-
|
|
764
|
-
.informational-content, .introductory-content {
|
|
765
|
-
padding: 2em 0 2em 0;
|
|
766
|
-
background: rgba(0,0,0,.05);
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
.introductory-content {
|
|
770
|
-
padding: 1em 0;
|
|
771
|
-
@media #{$small} {/*padding: 3em 0.9375em;*/ padding: 3em 0;}
|
|
772
|
-
background: #efefef;
|
|
773
|
-
margin: 0 auto;
|
|
774
|
-
p {
|
|
775
|
-
font-size: 1em;}
|
|
776
|
-
@media #{$small} {font-size: 1.35em;}
|
|
777
|
-
}
|
|
778
|
-
|
|
779
813
|
// Navigation
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
814
|
+
.navigation {
|
|
815
|
+
padding: 1em 0;
|
|
816
|
+
|
|
817
|
+
@media #{$small} {
|
|
818
|
+
padding: 1em 0 3em 0;
|
|
819
|
+
}
|
|
820
|
+
|
|
785
821
|
background: $color-gray-lightest;
|
|
786
822
|
color: $color-primary-darkest;
|
|
787
|
-
border-bottom: 2px solid
|
|
823
|
+
border-bottom: 2px solid $color-white;
|
|
788
824
|
margin: 0 auto;
|
|
789
|
-
|
|
790
|
-
ul.small-block-grid-1 {
|
|
791
|
-
margin: 0;
|
|
792
|
-
padding: 0;
|
|
793
|
-
li {
|
|
794
|
-
width: 100%;
|
|
795
|
-
margin: 0;
|
|
796
|
-
padding: 0;
|
|
797
|
-
h4, h5 {font-size: 1em; }
|
|
798
|
-
span {color: $color-gray-dark;}
|
|
799
|
-
}
|
|
800
|
-
}
|
|
801
|
-
|
|
802
|
-
ul.cards li {
|
|
803
|
-
margin: 0;
|
|
804
|
-
height: auto;
|
|
805
|
-
h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 700; font-family: $font-sans; font-size: 1.35em;}
|
|
806
|
-
h4 {font-size: 1.3em;}
|
|
807
|
-
border-bottom: 1px solid rgba(0,0,0,.2);
|
|
808
|
-
&:last-of-type { border-bottom: none;}
|
|
809
|
-
a {
|
|
810
|
-
color: $color-primary-darkest;
|
|
811
|
-
-webkit-box-shadow: none;
|
|
812
|
-
border-bottom: none;
|
|
813
|
-
box-shadow: none;
|
|
814
|
-
text-decoration: none;
|
|
815
|
-
border-radius: none;
|
|
816
|
-
border-radius: 0;
|
|
817
|
-
padding: 1em .5em;
|
|
818
|
-
height: auto;
|
|
819
|
-
margin: 0;
|
|
820
|
-
background: none;
|
|
821
|
-
&:hover {padding-left: .5em; background: rgba(0,0,0,.1); border-left: 4px solid $color-primary;}
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
body.home .navigation, body.fourohfour .navigation {
|
|
827
|
-
background: none;
|
|
828
|
-
padding: 3em 0;
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
body.fourohfour #content {
|
|
832
|
-
h3 {margin-top: 1em; font-size: 1.4em;}
|
|
833
|
-
}
|
|
834
|
-
|
|
835
|
-
body.home .main-navigation {
|
|
836
|
-
padding: 2em 0;
|
|
837
|
-
background: rgba(0,0,0,.2);
|
|
838
|
-
ul.cards li {
|
|
839
|
-
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.7);
|
|
840
|
-
}
|
|
841
825
|
}
|
|
842
826
|
|
|
843
827
|
.draft {
|
|
@@ -845,8 +829,8 @@ body.home .main-navigation {
|
|
|
845
829
|
top: -3.5em;
|
|
846
830
|
right: -5em;
|
|
847
831
|
z-index: 1000;
|
|
848
|
-
background: rgba(
|
|
849
|
-
color:
|
|
832
|
+
background: rgba($color-va-secondary-darkest, .9);
|
|
833
|
+
color: $color-white;
|
|
850
834
|
font-size: .85em;
|
|
851
835
|
position: fixed;
|
|
852
836
|
padding: 2.5em 4em 1em 4em;
|
|
@@ -856,94 +840,27 @@ body.home .main-navigation {
|
|
|
856
840
|
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
|
|
857
841
|
transform: rotate(45deg);
|
|
858
842
|
transform-origin: 20% 40%;
|
|
859
|
-
|
|
860
843
|
}
|
|
861
844
|
|
|
862
845
|
// Cards
|
|
863
846
|
|
|
864
847
|
[class*="block-grid-"]>li {
|
|
865
848
|
padding: 0;
|
|
866
|
-
@media #{$small} {
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
#content .cards {
|
|
870
|
-
-webkit-backface-visibility: hidden;
|
|
871
|
-
backface-visibility: hidden;
|
|
872
|
-
|
|
873
|
-
a, .coming-soon {
|
|
874
|
-
padding: 1em 1.15em;
|
|
875
|
-
margin: 0 -0.9375rem;
|
|
876
|
-
border-bottom: 2px solid rgba(255,255,255,.3);
|
|
877
|
-
color: #fff;
|
|
878
|
-
display: block;
|
|
879
|
-
font-weight: normal;
|
|
880
|
-
text-decoration: none;
|
|
881
|
-
background: $color-primary-darker;
|
|
882
|
-
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
|
|
883
|
-
@media #{$small} {padding: .45em .75em; border-bottom: none; text-align: left; border-radius: .2em; margin: 0 0 .25em 0}
|
|
884
|
-
@media #{$medium} {height: 10em;}
|
|
885
|
-
|
|
886
|
-
h3 {
|
|
887
|
-
text-decoration: none;
|
|
888
|
-
margin: 0;
|
|
889
|
-
padding: 0;
|
|
890
|
-
@media #{$small} {margin: 0 0 1em 0;}
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
|
|
894
|
-
|
|
895
|
-
h4 {margin: 0; padding: 0;}
|
|
896
|
-
|
|
897
|
-
p {
|
|
898
|
-
@media #{$small} {padding: 0m 0 1em 0;}
|
|
899
|
-
line-height: 1.5em;
|
|
900
|
-
@media #{$small} {margin: 0;}
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
&:hover, &:active, &:focus {
|
|
904
|
-
background: $color-primary;
|
|
905
|
-
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
|
|
906
|
-
}
|
|
907
|
-
|
|
908
|
-
h2, h3, h4, h5, h6 {padding: 0 0 .25em 0; margin: 0; color: #fff; display: block; clear: both; width: 100%;}
|
|
909
|
-
|
|
910
|
-
&:hover div {
|
|
911
|
-
a {color: $color-gold; p {color: $color-gold;}}
|
|
912
|
-
}
|
|
913
|
-
}
|
|
914
|
-
|
|
915
|
-
.coming-soon {
|
|
916
|
-
background: rgba(255,255,255,.05);
|
|
917
|
-
color: #fff;
|
|
918
|
-
border-bottom: 2px solid rgba(0,0,0,0);
|
|
919
|
-
|
|
920
|
-
h3 {color: #fff; color: rgba(255,255,255,.7);}
|
|
921
|
-
|
|
922
|
-
&:hover, &:active, &:focus {
|
|
923
|
-
background: rgba(255,255,255,.05);
|
|
924
|
-
color: #fff;
|
|
925
|
-
p {color: #fff;}
|
|
926
|
-
border-bottom: 2px solid rgba(0,0,0,0);
|
|
927
|
-
-webkit-box-shadow: none;
|
|
928
|
-
box-shadow: none;
|
|
849
|
+
@media #{$small} {
|
|
850
|
+
padding: 0 0.625rem 1.25rem 0.625rem;
|
|
929
851
|
}
|
|
930
852
|
}
|
|
931
|
-
}
|
|
932
853
|
|
|
933
854
|
// Telephone numbers
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
display: inline-block;
|
|
855
|
+
.tel {
|
|
856
|
+
background: rgba(0,0,0,.05);
|
|
857
|
+
padding: .2em;
|
|
858
|
+
display: inline-block;
|
|
939
859
|
}
|
|
940
860
|
|
|
941
861
|
// Information Grid
|
|
942
862
|
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
li {
|
|
946
|
-
|
|
863
|
+
.information-grid {
|
|
947
864
|
strong {
|
|
948
865
|
font-size: 1.3em;
|
|
949
866
|
color: $color-primary-darkest;
|
|
@@ -954,326 +871,310 @@ li {
|
|
|
954
871
|
}
|
|
955
872
|
|
|
956
873
|
div {
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
874
|
+
@media #{$small} {
|
|
875
|
+
min-height: 12em;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
background: $color-gray-lightest;
|
|
961
879
|
background: rgba(0,0,0,.05);
|
|
962
|
-
|
|
880
|
+
margin: 0 0 .5em 0;
|
|
881
|
+
padding: .75em;
|
|
882
|
+
|
|
883
|
+
&:hover, &:focus, &:active {
|
|
884
|
+
background: rgba(0,0,0,.1);
|
|
885
|
+
}
|
|
963
886
|
}
|
|
964
887
|
a {
|
|
965
|
-
|
|
966
888
|
text-decoration: none;
|
|
967
889
|
border-bottom: 2px solid $color-primary-darkest;
|
|
968
|
-
|
|
969
890
|
}
|
|
970
891
|
}
|
|
971
892
|
|
|
972
|
-
}
|
|
973
|
-
|
|
974
893
|
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
background
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
display: block;
|
|
986
|
-
border-bottom: none;
|
|
987
|
-
text-decoration: none;
|
|
988
|
-
width: 180px;
|
|
989
|
-
height: 30px;
|
|
990
|
-
background: image-url("design/logo/logo-alt.png") top left no-repeat;
|
|
991
|
-
background-size: contain;
|
|
992
|
-
&:hover, &:active, &:focus {
|
|
993
|
-
background: image-url("design/logo/logo-alt-hover.png") top left no-repeat;
|
|
994
|
-
border-bottom: none;
|
|
995
|
-
background-size: contain;
|
|
996
|
-
text-decoration: none;}
|
|
997
|
-
|
|
998
|
-
@media #{$small} {
|
|
999
|
-
width: 263px;
|
|
1000
|
-
height: 50px;
|
|
1001
|
-
background: image-url("design/logo/logo-alt.png") top left no-repeat;
|
|
1002
|
-
background-size: contain;
|
|
1003
|
-
&:hover {
|
|
1004
|
-
background: image-url("design/logo/logo-alt-hover.png") top left no-repeat;
|
|
1005
|
-
background-size: contain;
|
|
1006
|
-
}
|
|
1007
|
-
}
|
|
1008
|
-
}
|
|
1009
|
-
.main {
|
|
1010
|
-
background: white;
|
|
894
|
+
.footer {
|
|
895
|
+
color: $color-white;
|
|
896
|
+
padding: 0 !important;
|
|
897
|
+
margin: 0;
|
|
898
|
+
background: darken($color-primary-darkest, 02);
|
|
899
|
+
position: relative;
|
|
900
|
+
overflow: hidden;
|
|
901
|
+
|
|
902
|
+
.coda .row {
|
|
903
|
+
max-width: 70em;
|
|
1011
904
|
}
|
|
1012
|
-
|
|
1013
905
|
}
|
|
1014
906
|
|
|
1015
|
-
.
|
|
1016
|
-
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
.post-date {
|
|
1020
|
-
margin-bottom: 2.5em;
|
|
1021
|
-
font-size: .85em;
|
|
907
|
+
.footer-logo a {
|
|
908
|
+
display: none;
|
|
909
|
+
@media #{$medium} {padding: 0; display: block;}
|
|
910
|
+
@media #{$medium} {background:url(../images/design/logo/logo.png) 102% 102% no-repeat!important;border-bottom:0!important;width: 112px; height:32px; display: block;background-size: 160px!important; text-indent:180%; overflow:hidden}
|
|
1022
911
|
}
|
|
1023
912
|
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
913
|
+
.footer-seal {
|
|
914
|
+
background:url(../images/design/sprites/sprite.png) no-repeat 0 -23px;
|
|
915
|
+
background-size: 215px 72px;
|
|
916
|
+
width: 215px;
|
|
917
|
+
height: 49px;
|
|
918
|
+
text-indent: -999em;
|
|
919
|
+
overflow: hidden;
|
|
920
|
+
margin: 0 auto;
|
|
921
|
+
@media #{$small} {margin: 0;}
|
|
1028
922
|
}
|
|
1029
923
|
|
|
924
|
+
.usa-social-links {
|
|
1030
925
|
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
}
|
|
1035
|
-
|
|
926
|
+
dd {
|
|
927
|
+
display: inline-block;
|
|
928
|
+
margin: 0 1em 0 0;
|
|
929
|
+
}
|
|
1036
930
|
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
body.page-playbook {
|
|
1041
|
-
.primary {padding: 0; margin: 0;}
|
|
1042
|
-
.splash {
|
|
931
|
+
a {
|
|
932
|
+
border-bottom: none;
|
|
933
|
+
float: left;
|
|
1043
934
|
margin: 0;
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
@media #{$medium} {position: fixed; margin: .75em 0 0 0;}
|
|
935
|
+
padding: 0;
|
|
936
|
+
display: inline-block;
|
|
937
|
+
|
|
938
|
+
&:hover {
|
|
939
|
+
border-bottom: none;
|
|
1050
940
|
}
|
|
1051
941
|
}
|
|
942
|
+
}
|
|
1052
943
|
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
944
|
+
.usa-social-links,
|
|
945
|
+
.va-list--linkgroup {
|
|
946
|
+
margin: 2em 0 0 0;
|
|
947
|
+
|
|
948
|
+
@media #{$medium} {
|
|
949
|
+
margin: 2em 0 1.5em 0;
|
|
1058
950
|
}
|
|
951
|
+
}
|
|
1059
952
|
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
padding: 0;
|
|
1070
|
-
a {
|
|
1071
|
-
padding: 0; margin: 0;
|
|
1072
|
-
.post-title {color: $color-primary-darkest; font-size: 1em; margin: 0; padding: 0;}
|
|
1073
|
-
.post-date {color: #444; margin: 0; padding: 0 0 1em 0;}
|
|
1074
|
-
}
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
}
|
|
953
|
+
.va-list--linkgroup-title {
|
|
954
|
+
-webkit-font-smoothing: antialiased;
|
|
955
|
+
font-weight: 700;
|
|
956
|
+
display: block;
|
|
957
|
+
font-size: .95em;
|
|
958
|
+
padding: 0 0 1em 0;
|
|
959
|
+
letter-spacing: 0.05em;
|
|
960
|
+
text-transform: uppercase;
|
|
961
|
+
}
|
|
1078
962
|
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
963
|
+
.va-list--linkgroup--inline {
|
|
964
|
+
list-style: none;
|
|
965
|
+
margin: 0 auto;
|
|
966
|
+
padding: 1.5em 0 0 0;
|
|
967
|
+
text-align: center;
|
|
968
|
+
@media #{$large} {
|
|
969
|
+
text-align: left;
|
|
970
|
+
}
|
|
971
|
+
width: 100%;
|
|
1086
972
|
|
|
1087
|
-
|
|
1088
|
-
|
|
973
|
+
&:after {
|
|
974
|
+
visibility: hidden;
|
|
975
|
+
display: block;
|
|
976
|
+
font-size: 0;
|
|
977
|
+
content: " ";
|
|
978
|
+
clear: both;
|
|
979
|
+
height: 0;
|
|
1089
980
|
}
|
|
1090
981
|
|
|
1091
|
-
|
|
1092
|
-
|
|
982
|
+
li {
|
|
983
|
+
padding: 0;
|
|
1093
984
|
display: inline-block;
|
|
985
|
+
|
|
986
|
+
&:after {
|
|
987
|
+
content:"|";
|
|
988
|
+
padding: 0 .15em;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
&:last-child {
|
|
992
|
+
margin-right: 0;
|
|
993
|
+
|
|
994
|
+
&::after {
|
|
995
|
+
padding: 0;
|
|
996
|
+
content: "";
|
|
997
|
+
}
|
|
998
|
+
}
|
|
1094
999
|
}
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
text-decoration: none;
|
|
1000
|
+
|
|
1001
|
+
a {
|
|
1098
1002
|
background: none;
|
|
1099
|
-
|
|
1100
|
-
font-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
border: 2px solid $secondary-color;
|
|
1106
|
-
padding: .75em;
|
|
1107
|
-
color: $color-primary-darkest;
|
|
1108
|
-
background: none;
|
|
1109
|
-
display: block;
|
|
1110
|
-
text-decoration: none;
|
|
1111
|
-
&:hover {
|
|
1112
|
-
-webkit-transition: all 0.3s ease-in-out;
|
|
1113
|
-
-moz-transition: all 0.3s ease-in-out;
|
|
1114
|
-
-o-transition: all 0.3s ease-in-out;
|
|
1115
|
-
-ms-transition: all 0.3s ease-in-out;
|
|
1116
|
-
transition: all 0.3s ease-in-out;
|
|
1117
|
-
border: 2px solid $secondary-color;
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1003
|
+
color: inherit;
|
|
1004
|
+
font-weight: 400;
|
|
1005
|
+
display: inline-block;
|
|
1006
|
+
padding: .35em;
|
|
1007
|
+
margin: .25em 0;
|
|
1008
|
+
&:hover {color: $color-gold;}
|
|
1120
1009
|
}
|
|
1010
|
+
}
|
|
1121
1011
|
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1012
|
+
.footer-logo a {
|
|
1013
|
+
display: none;
|
|
1014
|
+
|
|
1015
|
+
@media #{$medium} {
|
|
1016
|
+
background: image-url("design/logo/logo.png") 102% 102% no-repeat !important;
|
|
1017
|
+
border-bottom:0 !important;
|
|
1018
|
+
width: 112px;
|
|
1019
|
+
height:32px;
|
|
1020
|
+
display: block;
|
|
1021
|
+
background-size: 160px !important;
|
|
1022
|
+
text-indent:180%;
|
|
1023
|
+
overflow:hidden;
|
|
1024
|
+
padding: 0;
|
|
1133
1025
|
}
|
|
1134
|
-
|
|
1135
|
-
h3 {margin-top: 1em; margin-bottom: 0; padding-bottom: .5em; font-size: 1.5em; color: $color-primary-darkest;}
|
|
1136
1026
|
}
|
|
1137
1027
|
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1028
|
+
.footer-seal {
|
|
1029
|
+
background: image-url("design/sprites/sprite.png") no-repeat 0 -23px;
|
|
1030
|
+
background-size: 215px 72px;
|
|
1031
|
+
width: 215px;
|
|
1032
|
+
height: 49px;
|
|
1033
|
+
text-indent: -999em;
|
|
1034
|
+
overflow: hidden;
|
|
1035
|
+
margin: 0 auto;
|
|
1036
|
+
|
|
1037
|
+
@media #{$small} {
|
|
1038
|
+
margin: 0;
|
|
1148
1039
|
}
|
|
1040
|
+
}
|
|
1149
1041
|
|
|
1150
|
-
.small-block-grid-1 {
|
|
1151
|
-
li {padding: 0; margin: 0;}
|
|
1152
|
-
}
|
|
1153
1042
|
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
display: inline-block;
|
|
1043
|
+
/* a {
|
|
1044
|
+
display:inline;
|
|
1045
|
+
text-decoration: none;
|
|
1046
|
+
color:rgb(0,0,0);
|
|
1159
1047
|
&:hover {
|
|
1160
1048
|
border-bottom: none;
|
|
1049
|
+
text-decoration: none;
|
|
1161
1050
|
}
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
ul {
|
|
1165
|
-
margin: 0;
|
|
1166
|
-
padding: .5em 0;
|
|
1167
|
-
border-bottom: 1px solid $color-primary;
|
|
1168
|
-
@media #{$small} {
|
|
1169
|
-
border-bottom: none;
|
|
1170
|
-
padding: 0;
|
|
1171
|
-
margin: 1.5em 0 2em 0;
|
|
1051
|
+
@media #{$small-only} {
|
|
1052
|
+
padding: .25em 0;
|
|
1172
1053
|
}
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
li, p, a {
|
|
1176
|
-
color: #fff;
|
|
1177
|
-
font-size: 1em;
|
|
1178
|
-
}
|
|
1179
|
-
|
|
1180
|
-
a {
|
|
1181
|
-
text-decoration: underline;
|
|
1182
|
-
display: block;
|
|
1183
|
-
background: none;
|
|
1184
|
-
font-weight: 400;
|
|
1185
|
-
@media #{$small} {display: inline-block; margin: .25em 0;}
|
|
1186
|
-
&:hover {color: $color-gold;}
|
|
1187
|
-
&.contact, &.blog {
|
|
1188
|
-
padding: .65em; font-size: 1em; text-align: center; border: 2px solid $secondary-color;
|
|
1189
|
-
@media #{$small} {margin: 1.5em auto; display: inline-block;}
|
|
1190
|
-
&:hover, &:focus, &:active {
|
|
1191
|
-
background: $secondary-color; color: #fff;
|
|
1054
|
+
@media #{$medium-only} {
|
|
1055
|
+
display:block
|
|
1192
1056
|
}
|
|
1193
1057
|
}
|
|
1058
|
+
|
|
1059
|
+
} */
|
|
1194
1060
|
|
|
1195
|
-
|
|
1196
|
-
|
|
1061
|
+
// Footer
|
|
1062
|
+
.text-right {
|
|
1063
|
+
text-align: right;
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
.footer {
|
|
1067
|
+
color: $color-white;
|
|
1068
|
+
padding: 0 !important;
|
|
1069
|
+
margin: 0;
|
|
1070
|
+
background: darken($color-primary-darkest, 02);
|
|
1071
|
+
position: relative;
|
|
1072
|
+
overflow: hidden;
|
|
1073
|
+
|
|
1074
|
+
.coda .row {
|
|
1075
|
+
max-width: 70em;
|
|
1197
1076
|
}
|
|
1198
|
-
&.blog {border: none; &:hover {background: none; color: $color-primary-alt;}}
|
|
1199
1077
|
}
|
|
1078
|
+
|
|
1200
1079
|
.footer-logo a {
|
|
1201
1080
|
display: none;
|
|
1202
1081
|
@media #{$medium} {padding: 0; display: block;}
|
|
1203
|
-
@media #{$medium} {
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
}
|
|
1213
|
-
input {
|
|
1214
|
-
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
|
|
1215
|
-
font-weight: 400;
|
|
1082
|
+
@media #{$medium} {
|
|
1083
|
+
background: image-url("design/logo/logo.png") 102% 102% no-repeat !important;
|
|
1084
|
+
border-bottom:0 !important;
|
|
1085
|
+
width: 112px;
|
|
1086
|
+
height:32px;
|
|
1087
|
+
display: block;
|
|
1088
|
+
background-size: 160px !important;
|
|
1089
|
+
text-indent:180%;
|
|
1090
|
+
overflow:hidden
|
|
1216
1091
|
}
|
|
1217
1092
|
}
|
|
1218
|
-
|
|
1219
|
-
background: rgba(0,0,0,.055);
|
|
1220
|
-
}
|
|
1093
|
+
|
|
1221
1094
|
.footer-seal {
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1095
|
+
background: image-url("design/sprites/sprite.png") no-repeat 0 -23px;
|
|
1096
|
+
background-size: 215px 72px;
|
|
1097
|
+
width: 215px;
|
|
1098
|
+
height: 49px;
|
|
1099
|
+
text-indent: -999em;
|
|
1100
|
+
overflow: hidden;
|
|
1101
|
+
margin: 0 auto;
|
|
1102
|
+
@media #{$small} {margin: 0;}
|
|
1103
|
+
}
|
|
1225
1104
|
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1105
|
+
.usa-social-links {
|
|
1106
|
+
dd {
|
|
1107
|
+
display: inline-block;
|
|
1108
|
+
margin: 0 1em 0 0;
|
|
1109
|
+
}
|
|
1110
|
+
a {
|
|
1111
|
+
border-bottom: none;
|
|
1112
|
+
float: left;
|
|
1113
|
+
margin: 0;
|
|
1114
|
+
padding: 0;
|
|
1115
|
+
display: inline-block;
|
|
1116
|
+
&:hover {
|
|
1117
|
+
border-bottom: none;
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1235
1121
|
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1122
|
+
.usa-social-links,
|
|
1123
|
+
.va-list--linkgroup {
|
|
1124
|
+
margin: 2em 0 0 0;
|
|
1125
|
+
|
|
1126
|
+
@media #{$medium} {
|
|
1127
|
+
margin: 2em 0 1.5em 0;
|
|
1128
|
+
}
|
|
1241
1129
|
}
|
|
1242
1130
|
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
margin:
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
text-align: center;
|
|
1250
|
-
span {
|
|
1251
|
-
font-weight: bold;
|
|
1131
|
+
// TODO: Move this to a list-specific partial
|
|
1132
|
+
.va-list--linkgroup {
|
|
1133
|
+
margin: 2em 0 0 0;
|
|
1134
|
+
|
|
1135
|
+
@media #{$small} {
|
|
1136
|
+
margin: 2em 0 1.5em 0;
|
|
1252
1137
|
}
|
|
1138
|
+
|
|
1253
1139
|
a {
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1140
|
+
background: none;
|
|
1141
|
+
color: #fff;
|
|
1142
|
+
display: block;
|
|
1143
|
+
font-size: 1em;
|
|
1144
|
+
font-weight: 400;
|
|
1145
|
+
margin: .25em 0;
|
|
1146
|
+
text-decoration: underline;
|
|
1147
|
+
|
|
1257
1148
|
&:hover {
|
|
1258
|
-
|
|
1259
|
-
}
|
|
1260
|
-
@media #{$small-only} {
|
|
1261
|
-
padding: .25em 0;
|
|
1262
|
-
}
|
|
1263
|
-
@media #{$medium-only} {
|
|
1264
|
-
display:block
|
|
1149
|
+
color: $color-gold;
|
|
1265
1150
|
}
|
|
1266
1151
|
}
|
|
1152
|
+
|
|
1153
|
+
dd {
|
|
1154
|
+
padding: .25em 0;
|
|
1155
|
+
}
|
|
1267
1156
|
}
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
font-
|
|
1272
|
-
padding: 1.5em 0 0 0;
|
|
1273
|
-
width: 100%;
|
|
1274
|
-
border-bottom: none !important;
|
|
1157
|
+
|
|
1158
|
+
.va-list--linkgroup-title {
|
|
1159
|
+
-webkit-font-smoothing: antialiased;
|
|
1160
|
+
font-weight: 700;
|
|
1275
1161
|
display: block;
|
|
1162
|
+
font-size: .95em;
|
|
1163
|
+
padding: 0 0 1em 0;
|
|
1164
|
+
letter-spacing: 0.05em;
|
|
1165
|
+
text-transform: uppercase;
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
.va-list--linkgroup--inline {
|
|
1169
|
+
list-style: none;
|
|
1276
1170
|
margin: 0 auto;
|
|
1171
|
+
padding: 1.5em 0 0 0;
|
|
1172
|
+
text-align: center;
|
|
1173
|
+
@media #{$large} {
|
|
1174
|
+
text-align: left;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
width: 100%;
|
|
1277
1178
|
|
|
1278
1179
|
&:after {
|
|
1279
1180
|
visibility: hidden;
|
|
@@ -1282,135 +1183,64 @@ ul.final-list {
|
|
|
1282
1183
|
content: " ";
|
|
1283
1184
|
clear: both;
|
|
1284
1185
|
height: 0;
|
|
1285
|
-
}
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
li {
|
|
1289
|
-
padding: 0;
|
|
1290
|
-
display: inline-block;
|
|
1291
|
-
text-align: center;
|
|
1292
|
-
&:last-child {
|
|
1293
|
-
margin-right: 0;
|
|
1294
|
-
}
|
|
1295
|
-
&:after {
|
|
1296
|
-
content:"|";
|
|
1297
|
-
padding: 0 .2em;
|
|
1298
|
-
opacity: .5;
|
|
1299
|
-
}
|
|
1300
|
-
&:last-of-type:after {
|
|
1301
|
-
padding:0;
|
|
1302
|
-
content: "";
|
|
1303
|
-
}
|
|
1304
|
-
a {
|
|
1305
|
-
display:inline-block;
|
|
1306
|
-
padding: .2em;
|
|
1307
|
-
&:hover {
|
|
1308
|
-
color: $color-gold;
|
|
1309
|
-
}
|
|
1310
|
-
}
|
|
1311
1186
|
}
|
|
1312
|
-
}
|
|
1313
|
-
|
|
1314
|
-
li {
|
|
1315
|
-
list-style: none;
|
|
1316
|
-
padding: .5em 0;
|
|
1317
|
-
font-weight: 300;
|
|
1318
|
-
font-size: .95em;
|
|
1319
|
-
@media #{$small}
|
|
1320
|
-
{} margin: 0 auto; text-align: left; display: block;}
|
|
1321
|
-
padding: 2em 0 0 0;
|
|
1322
|
-
dl.vcard {
|
|
1323
|
-
padding: 1.2em 0 0 0;
|
|
1324
|
-
margin: 0;
|
|
1325
|
-
@media #{$small} {padding: 1.625rem 0.75rem;}
|
|
1326
|
-
display: block;
|
|
1327
|
-
background-size: 50px;
|
|
1328
|
-
text-align: center;
|
|
1329
|
-
@media #{$small} {text-align: left;}
|
|
1330
|
-
border: none;
|
|
1331
|
-
font-size: .85em;
|
|
1332
|
-
color: #fff;
|
|
1333
|
-
@media #{$small-up} {
|
|
1334
|
-
margin: 0 0 0 11%;
|
|
1335
|
-
}
|
|
1336
|
-
@media #{$medium-only} {
|
|
1337
|
-
margin:4% 0 0 11%;
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
|
-
dd, dt {
|
|
1341
|
-
padding: 0; margin: 0; text-align: center;
|
|
1342
|
-
@media #{$small} {
|
|
1343
|
-
&:after {
|
|
1344
|
-
content: " | ";
|
|
1345
|
-
}
|
|
1346
|
-
|
|
1347
|
-
&:last-of-type:after {
|
|
1348
|
-
content: "";
|
|
1349
|
-
}
|
|
1350
|
-
}
|
|
1351
|
-
@media #{$small} {display: inline;}
|
|
1352
|
-
}
|
|
1353
|
-
.fn {
|
|
1354
|
-
font-size: 1em;
|
|
1355
|
-
@media #{$small-only} {
|
|
1356
|
-
font-size: .9em;
|
|
1357
1187
|
|
|
1188
|
+
li {
|
|
1189
|
+
padding: 0;
|
|
1190
|
+
display: inline-block;
|
|
1191
|
+
|
|
1192
|
+
&:after {
|
|
1193
|
+
content:"|";
|
|
1194
|
+
padding: 0 .15em;
|
|
1358
1195
|
}
|
|
1196
|
+
|
|
1197
|
+
&:last-child {
|
|
1198
|
+
margin-right: 0;
|
|
1199
|
+
|
|
1200
|
+
&::after {
|
|
1201
|
+
padding: 0;
|
|
1202
|
+
content: "";
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1359
1205
|
}
|
|
1360
|
-
dd.locality, dd.postal-code {display: inline;}
|
|
1361
|
-
dt {@media #{$small} {text-align: left;}}
|
|
1362
1206
|
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1207
|
+
a {
|
|
1208
|
+
background: none;
|
|
1209
|
+
color: inherit;
|
|
1210
|
+
font-weight: 400;
|
|
1211
|
+
display: inline-block;
|
|
1212
|
+
padding: .35em;
|
|
1213
|
+
margin: .25em 0;
|
|
1214
|
+
&:hover {color: $color-gold;}
|
|
1368
1215
|
}
|
|
1216
|
+
}
|
|
1369
1217
|
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1218
|
+
// Footer icon sprite
|
|
1219
|
+
a.facebook {
|
|
1220
|
+
background: image-url('design/sprites/sprite.png') no-repeat -22px 0;
|
|
1221
|
+
background-size: 215px 72px;
|
|
1222
|
+
width: 17px;
|
|
1223
|
+
height: 17px;
|
|
1224
|
+
text-indent: -999em;
|
|
1225
|
+
overflow: hidden;
|
|
1226
|
+
}
|
|
1378
1227
|
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1228
|
+
a.twitter {
|
|
1229
|
+
background: image-url("design/sprites/sprite.png") no-repeat 0 0;
|
|
1230
|
+
background-size: 215px 72px;
|
|
1231
|
+
width: 20px;
|
|
1232
|
+
height: 16px;
|
|
1233
|
+
text-indent: -999em;
|
|
1234
|
+
overflow: hidden;
|
|
1386
1235
|
}
|
|
1387
1236
|
|
|
1237
|
+
|
|
1388
1238
|
.primary blockquote {
|
|
1389
1239
|
margin: 0 0 1em 0;
|
|
1390
1240
|
padding: 0 0 0 1em;
|
|
1391
1241
|
border-left: 2px solid $color-gray-lighter;
|
|
1392
1242
|
p {
|
|
1393
|
-
|
|
1394
|
-
}
|
|
1395
|
-
}
|
|
1396
|
-
|
|
1397
|
-
body.index, body.page-playbook {
|
|
1398
|
-
.footer {
|
|
1399
|
-
// background: $color-primary-darkest url(../img/design/seal/seal.png) bottom center no-repeat;
|
|
1400
|
-
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003f72+21,003159+100 */
|
|
1401
|
-
background: #003f72; /* Old browsers */
|
|
1402
|
-
padding: 0;
|
|
1403
|
-
margin: 0;
|
|
1404
|
-
|
|
1405
|
-
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
|
1406
|
-
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMSUiIHN0b3AtY29sb3I9IiMwMDNmNzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMTU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
|
|
1407
|
-
background: -moz-linear-gradient(top, #003f72 21%, #003159 100%); /* FF3.6+ */
|
|
1408
|
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,#003f72), color-stop(100%,#003159)); /* Chrome,Safari4+ */
|
|
1409
|
-
background: -webkit-linear-gradient(top, #003f72 21%,#003159 100%); /* Chrome10+,Safari5.1+ */
|
|
1410
|
-
background: -o-linear-gradient(top, #003f72 21%,#003159 100%); /* Opera 11.10+ */
|
|
1411
|
-
background: -ms-linear-gradient(top, #003f72 21%,#003159 100%); /* IE10+ */
|
|
1412
|
-
background: linear-gradient(to bottom, #003f72 21%,#003159 100%); /* W3C */
|
|
1413
|
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f72', endColorstr='#003159',GradientType=0 ); /* IE6-8 */
|
|
1243
|
+
color: $color-primary-darker;
|
|
1414
1244
|
}
|
|
1415
1245
|
}
|
|
1416
1246
|
|
|
@@ -1420,109 +1250,62 @@ body.index, body.page-playbook {
|
|
|
1420
1250
|
|
|
1421
1251
|
}
|
|
1422
1252
|
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
.
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1253
|
+
// Notice / feedback banners
|
|
1254
|
+
.va-notice--banner {
|
|
1255
|
+
background: $color-primary-darker;
|
|
1256
|
+
margin: 0 0 .75em 0;
|
|
1257
|
+
padding: .5em;
|
|
1258
|
+
font-size: .9em;
|
|
1259
|
+
font-weight: 300;
|
|
1260
|
+
|
|
1261
|
+
p {
|
|
1262
|
+
margin: 0;
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
a {
|
|
1266
|
+
background-image: none;
|
|
1267
|
+
color: $color-white;
|
|
1268
|
+
padding: 0;
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1271
|
+
.row {
|
|
1272
|
+
max-width: 70em;
|
|
1273
|
+
}
|
|
1433
1274
|
}
|
|
1434
1275
|
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
margin
|
|
1439
|
-
float: left;
|
|
1440
|
-
overflow: hidden;
|
|
1441
|
-
}
|
|
1442
|
-
svg {
|
|
1443
|
-
color: #444444;
|
|
1276
|
+
// Only used in the footer
|
|
1277
|
+
.va-notice--banner--alt {
|
|
1278
|
+
padding: 1.25em 0;
|
|
1279
|
+
margin: 1.5em 0 0 0;
|
|
1444
1280
|
}
|
|
1445
1281
|
|
|
1446
|
-
//
|
|
1282
|
+
// Feedback widget
|
|
1447
1283
|
|
|
1448
|
-
.
|
|
1449
|
-
|
|
1450
|
-
margin: 0;
|
|
1451
|
-
padding: 1.25em .4em 0 0;
|
|
1452
|
-
|
|
1453
|
-
&:after {
|
|
1454
|
-
visibility: hidden;
|
|
1455
|
-
display: block;
|
|
1456
|
-
font-size: 0;
|
|
1457
|
-
content: " ";
|
|
1458
|
-
clear: both;
|
|
1459
|
-
height: 0;
|
|
1460
|
-
}
|
|
1461
|
-
|
|
1462
|
-
@media #{$small-up} {padding: 1em .4em 0 .4em;}
|
|
1463
|
-
margin-bottom: 0;
|
|
1464
|
-
a {color: #fff; background: none;}
|
|
1465
|
-
|
|
1466
|
-
&.notice {
|
|
1467
|
-
font-size: .9em;
|
|
1468
|
-
font-weight: 700;
|
|
1469
|
-
clear: both;
|
|
1470
|
-
padding: .5em;
|
|
1471
|
-
@media #{$small} {padding: .5em .85em;}
|
|
1472
|
-
margin-bottom: .75em;
|
|
1473
|
-
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.2);
|
|
1474
|
-
box-shadow: 0 0 6px rgba(0,0,0,.2);
|
|
1475
|
-
background: $color-primary-darker;
|
|
1476
|
-
&:after {
|
|
1477
|
-
visibility: hidden;
|
|
1478
|
-
display: block;
|
|
1479
|
-
font-size: 0;
|
|
1480
|
-
content: " ";
|
|
1481
|
-
clear: both;
|
|
1482
|
-
height: 0;
|
|
1483
|
-
}
|
|
1484
|
-
}
|
|
1284
|
+
.feedback-widget {
|
|
1285
|
+
overflow: hidden;
|
|
1485
1286
|
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1287
|
+
@media #{$small-only} {
|
|
1288
|
+
text-align: center;
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
// Works with <= IE8
|
|
1292
|
+
&:last-child {
|
|
1293
|
+
opacity: .5;
|
|
1294
|
+
padding-left: 1em;
|
|
1494
1295
|
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
text-align: right;
|
|
1296
|
+
&:hover {
|
|
1297
|
+
opacity: 1;
|
|
1298
|
+
}
|
|
1499
1299
|
}
|
|
1500
|
-
|
|
1501
|
-
|
|
1300
|
+
|
|
1301
|
+
.icon {
|
|
1302
|
+
background: image-url('design/sprites/sprite.png') no-repeat -43px 0;
|
|
1303
|
+
background-size: 215px 72px;
|
|
1304
|
+
display: inline-block;
|
|
1305
|
+
width: 19px;
|
|
1306
|
+
height: 17px;
|
|
1502
1307
|
vertical-align: middle;
|
|
1503
|
-
|
|
1504
|
-
a {
|
|
1505
|
-
opacity: 0.6;
|
|
1506
|
-
}
|
|
1507
|
-
}
|
|
1508
|
-
.message {
|
|
1509
|
-
font-size:.95rem;
|
|
1510
|
-
font-weight: 700;
|
|
1511
|
-
p {
|
|
1512
|
-
font-size: .9rem;
|
|
1513
|
-
font-weight: 300;
|
|
1514
|
-
margin-bottom: 0;
|
|
1515
|
-
margin-top: 0;
|
|
1516
|
-
padding: 0;
|
|
1517
|
-
}
|
|
1518
|
-
}
|
|
1519
|
-
|
|
1520
|
-
.text-right {
|
|
1521
|
-
padding: 0 .5em 0 0;
|
|
1522
|
-
line-height: 1em;
|
|
1523
|
-
margin: 0;
|
|
1524
|
-
text-align: right !important;
|
|
1525
|
-
a.usa-button {margin-top: 0; margin-bottom: .75em;}
|
|
1308
|
+
margin: 0 .5em 0 0;
|
|
1526
1309
|
}
|
|
1527
1310
|
}
|
|
1528
1311
|
|
|
@@ -1544,7 +1327,6 @@ a {color: #fff; background: none;}
|
|
|
1544
1327
|
width: 100%;
|
|
1545
1328
|
color: $color-gray-dark;
|
|
1546
1329
|
padding: .2em;
|
|
1547
|
-
-webkit-box-sizing: border-box;
|
|
1548
1330
|
box-sizing: border-box;
|
|
1549
1331
|
}
|
|
1550
1332
|
|
|
@@ -1555,10 +1337,7 @@ a {color: #fff; background: none;}
|
|
|
1555
1337
|
width: 100%;
|
|
1556
1338
|
padding: 0;
|
|
1557
1339
|
border-radius: 0px 3px 3px 0px;
|
|
1558
|
-
-moz-border-radius: 0px 3px 3px 0px;
|
|
1559
|
-
-webkit-border-radius: 0px 3px 3px 0px;
|
|
1560
1340
|
}
|
|
1561
|
-
|
|
1562
1341
|
}
|
|
1563
1342
|
|
|
1564
1343
|
.search-button {
|
|
@@ -1573,7 +1352,7 @@ a {color: #fff; background: none;}
|
|
|
1573
1352
|
border-radius: .2em;
|
|
1574
1353
|
text-decoration: none;
|
|
1575
1354
|
background: $color-primary;
|
|
1576
|
-
color:
|
|
1355
|
+
color: $color-white;
|
|
1577
1356
|
}
|
|
1578
1357
|
}
|
|
1579
1358
|
|
|
@@ -1599,139 +1378,122 @@ a {color: #fff; background: none;}
|
|
|
1599
1378
|
|
|
1600
1379
|
// Plain lists
|
|
1601
1380
|
|
|
1602
|
-
ul.plain {
|
|
1603
|
-
margin: 0 0 1.5em 0;
|
|
1604
|
-
padding: 0;
|
|
1605
|
-
li {
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
}
|
|
1613
|
-
&.posts {
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1381
|
+
#content.interior .primary ul.plain {
|
|
1382
|
+
margin: 0 0 1.5em 0;
|
|
1383
|
+
padding: 0;
|
|
1384
|
+
li {
|
|
1385
|
+
list-style: none;
|
|
1386
|
+
display: block;
|
|
1387
|
+
.post-date {padding: 0; margin: 0; color: $secondary-color;}
|
|
1388
|
+
padding: .5em 0;
|
|
1389
|
+
border-bottom: 1px solid rgba(255,255,255,.2);
|
|
1390
|
+
&:last-of-type {border-bottom: none;}
|
|
1391
|
+
}
|
|
1392
|
+
&.posts {
|
|
1393
|
+
font-size: 1.65em;
|
|
1394
|
+
a {
|
|
1395
|
+
text-decoration: none;
|
|
1396
|
+
background: none;
|
|
1397
|
+
color: $color-white;
|
|
1398
|
+
.post-date {font-size: .65em;}
|
|
1399
|
+
&:hover {
|
|
1400
|
+
background: rgba(255,255,255,.2);
|
|
1401
|
+
}
|
|
1622
1402
|
}
|
|
1623
1403
|
}
|
|
1624
|
-
}
|
|
1404
|
+
p:nth-child(1) {font-size: inherit; color: inherit;}
|
|
1625
1405
|
}
|
|
1626
1406
|
|
|
1627
1407
|
// byline
|
|
1628
1408
|
|
|
1629
|
-
p.byline {
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
// Simple List
|
|
1634
|
-
|
|
1635
|
-
ul.simple-list, ol.simple-list {
|
|
1636
|
-
margin: 0 0 1em 1.25em;
|
|
1637
|
-
padding: 0;
|
|
1638
|
-
display: block;
|
|
1639
|
-
li {
|
|
1640
|
-
padding: .35em 0;
|
|
1641
|
-
list-style: square;
|
|
1642
|
-
|
|
1643
|
-
}
|
|
1409
|
+
p.byline {
|
|
1410
|
+
font-size: .8em;
|
|
1411
|
+
color: $color-white;
|
|
1412
|
+
color: rgba(255,255,255,.9);
|
|
1644
1413
|
}
|
|
1645
1414
|
|
|
1646
1415
|
// Info cards
|
|
1647
1416
|
|
|
1648
1417
|
.card {
|
|
1649
|
-
position: relative;
|
|
1650
|
-
margin: 0 0 1.5em 0;
|
|
1651
|
-
padding: 1em;
|
|
1652
|
-
border: 1px solid
|
|
1653
|
-
dt {font-weight: 700;}
|
|
1654
|
-
dd {
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
}
|
|
1658
|
-
&.templates {
|
|
1659
|
-
|
|
1660
|
-
}
|
|
1661
|
-
&:after {
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
}
|
|
1418
|
+
position: relative;
|
|
1419
|
+
margin: 0 0 1.5em 0;
|
|
1420
|
+
padding: 1em;
|
|
1421
|
+
border: 1px solid $color-gray-lightest;
|
|
1422
|
+
dt {font-weight: 700;}
|
|
1423
|
+
dd {
|
|
1424
|
+
padding: 0;
|
|
1425
|
+
margin: 0;
|
|
1426
|
+
}
|
|
1427
|
+
&.templates {
|
|
1428
|
+
height: 338px;
|
|
1429
|
+
}
|
|
1430
|
+
&:after {
|
|
1431
|
+
visibility: hidden;
|
|
1432
|
+
display: block;
|
|
1433
|
+
font-size: 0;
|
|
1434
|
+
content: " ";
|
|
1435
|
+
clear: both;
|
|
1436
|
+
height: 0;
|
|
1437
|
+
}
|
|
1669
1438
|
|
|
1670
|
-
span {
|
|
1671
|
-
|
|
1672
|
-
}
|
|
1439
|
+
span {
|
|
1440
|
+
display: block;
|
|
1441
|
+
}
|
|
1673
1442
|
|
|
1674
|
-
.number {
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
}
|
|
1443
|
+
.number {
|
|
1444
|
+
font-size: 3.25em;
|
|
1445
|
+
font-weight: 700;
|
|
1446
|
+
float: left;
|
|
1447
|
+
margin: 0;
|
|
1448
|
+
color: #003E73;
|
|
1449
|
+
line-height: .65em;
|
|
1450
|
+
display: inline-block;
|
|
1451
|
+
padding: 0 .125em 0 0;
|
|
1452
|
+
}
|
|
1684
1453
|
|
|
1685
|
-
.heading, .description {
|
|
1686
|
-
|
|
1687
|
-
}
|
|
1454
|
+
.heading, .description {
|
|
1455
|
+
display: block;
|
|
1456
|
+
}
|
|
1688
1457
|
|
|
1689
|
-
.heading {
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
}
|
|
1458
|
+
.heading {
|
|
1459
|
+
color: $color-va-primary-alt-darkest;
|
|
1460
|
+
font-size: .8em;
|
|
1461
|
+
padding: 0;
|
|
1462
|
+
}
|
|
1694
1463
|
|
|
1695
|
-
.description {
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
}
|
|
1464
|
+
.description {
|
|
1465
|
+
font-size: 1.25em;
|
|
1466
|
+
font-weight: 400;
|
|
1467
|
+
padding: .2em 0;
|
|
1468
|
+
text-align: left;
|
|
1469
|
+
display: inline-block;
|
|
1470
|
+
width: 100%;
|
|
1471
|
+
text-transform:uppercase;
|
|
1472
|
+
}
|
|
1704
1473
|
|
|
1705
|
-
&.information {
|
|
1706
|
-
|
|
1707
|
-
}
|
|
1474
|
+
&.information {
|
|
1475
|
+
background: rgba(0,0,0,.05);
|
|
1476
|
+
}
|
|
1708
1477
|
|
|
1709
|
-
&.info-graphic {
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1478
|
+
&.info-graphic {
|
|
1479
|
+
border: 1px solid $color-white;
|
|
1480
|
+
background: none;
|
|
1481
|
+
padding: 1em 1em 0;
|
|
1482
|
+
line-height: 2.5;
|
|
1483
|
+
span.number {
|
|
1484
|
+
color: $color-white;
|
|
1485
|
+
display: inline-block;
|
|
1486
|
+
}
|
|
1717
1487
|
}
|
|
1718
|
-
}
|
|
1719
1488
|
|
|
1720
1489
|
|
|
1721
1490
|
|
|
1722
1491
|
}
|
|
1723
1492
|
|
|
1493
|
+
// Actions
|
|
1724
1494
|
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
/*a {text-decoration: none; background: none;}*/
|
|
1728
|
-
|
|
1729
|
-
.card a {
|
|
1730
|
-
border-bottom: 2px solid $secondary-color;
|
|
1731
|
-
display: inline-block;
|
|
1732
|
-
background: rgba(0,0,0,.03);
|
|
1733
|
-
&:hover {background: rgba(0,0,0,.1);}
|
|
1734
|
-
}
|
|
1495
|
+
.actions {
|
|
1496
|
+
margin: 1em 0;
|
|
1735
1497
|
}
|
|
1736
1498
|
|
|
1737
1499
|
// Dividers
|
|
@@ -1761,26 +1523,47 @@ margin: 0;
|
|
|
1761
1523
|
|
|
1762
1524
|
// Process line
|
|
1763
1525
|
|
|
1526
|
+
.va-process,
|
|
1764
1527
|
.process {
|
|
1765
|
-
|
|
1528
|
+
list-style: none;
|
|
1529
|
+
padding: 1em 0;
|
|
1766
1530
|
position: relative;
|
|
1531
|
+
|
|
1767
1532
|
h2, h3, h4, h5, h6 {padding: .2em 0 0 0;}
|
|
1768
|
-
h5 {
|
|
1769
|
-
|
|
1770
|
-
|
|
1533
|
+
h5 {
|
|
1534
|
+
font-size: 1.3em;
|
|
1535
|
+
margin: 0;
|
|
1536
|
+
padding: 0 0 .5em 0;
|
|
1537
|
+
}
|
|
1538
|
+
h6, &-subtitle {
|
|
1539
|
+
font-size: 1.1em;
|
|
1540
|
+
margin: 0;
|
|
1541
|
+
padding: 0;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
p:nth-child(1) {
|
|
1545
|
+
font-size: 1em;
|
|
1546
|
+
color: $color-gray-dark;
|
|
1547
|
+
padding-bottom: 0;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1771
1550
|
li {
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1551
|
+
list-style: none;
|
|
1552
|
+
|
|
1553
|
+
p:nth-child(1) {
|
|
1554
|
+
padding-bottom: inherit;
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
ol {
|
|
1558
|
+
margin: 0 0 1em 1.5em;
|
|
1559
|
+
padding: 0;
|
|
1560
|
+
li {list-style: decimal; padding: .25em 0;}
|
|
1561
|
+
}
|
|
1562
|
+
ul {
|
|
1563
|
+
margin: 0 0 1em 1.25em !important;
|
|
1564
|
+
padding: 0;
|
|
1565
|
+
li {list-style: square;}
|
|
1566
|
+
}
|
|
1784
1567
|
&.step {
|
|
1785
1568
|
border-left: 8px solid #ccc;
|
|
1786
1569
|
padding: 0 0 2em 2em;
|
|
@@ -1788,9 +1571,7 @@ margin: 0;
|
|
|
1788
1571
|
&.last {
|
|
1789
1572
|
border-left: 0;
|
|
1790
1573
|
}
|
|
1791
|
-
|
|
1792
|
-
/*background-color: #D9C799;*/
|
|
1793
|
-
}
|
|
1574
|
+
|
|
1794
1575
|
}
|
|
1795
1576
|
&.step.three.last,
|
|
1796
1577
|
&.step.four.last,
|
|
@@ -1803,9 +1584,6 @@ margin: 0;
|
|
|
1803
1584
|
}
|
|
1804
1585
|
}
|
|
1805
1586
|
|
|
1806
|
-
|
|
1807
|
-
/*&.va {border-left: 8px dashed #ccc;}*/
|
|
1808
|
-
|
|
1809
1587
|
ul {
|
|
1810
1588
|
margin: .25em 0 1em 0;
|
|
1811
1589
|
padding: 0;
|
|
@@ -1824,7 +1602,7 @@ margin: 0;
|
|
|
1824
1602
|
}
|
|
1825
1603
|
|
|
1826
1604
|
&:before {
|
|
1827
|
-
color
|
|
1605
|
+
color:$color-white;
|
|
1828
1606
|
float: left;
|
|
1829
1607
|
font-size: 1.3em;
|
|
1830
1608
|
font-weight: 700;
|
|
@@ -1833,13 +1611,19 @@ margin: 0;
|
|
|
1833
1611
|
top: -.2em;
|
|
1834
1612
|
margin-left: -2.7em;
|
|
1835
1613
|
display: block;
|
|
1836
|
-
border: 4px solid
|
|
1614
|
+
border: 4px solid $color-white;
|
|
1837
1615
|
background: $olso-gray;
|
|
1838
1616
|
border-radius: 4em;
|
|
1839
1617
|
position: relative;
|
|
1840
1618
|
}
|
|
1841
1619
|
}
|
|
1842
1620
|
|
|
1621
|
+
#content.interior .primary .process li p:nth-child(1) {
|
|
1622
|
+
font-size: 1em;
|
|
1623
|
+
color: $color-gray-dark !important;
|
|
1624
|
+
padding-bottom: 0;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1843
1627
|
li.one:before {content: "1";}
|
|
1844
1628
|
li.two:before {content: "2";}
|
|
1845
1629
|
li.three:before {content: "3";}
|
|
@@ -1861,40 +1645,41 @@ li.eighteen:before {content: "18";}
|
|
|
1861
1645
|
li.nineteen:before {content: "19";}
|
|
1862
1646
|
li.twenty:before {content: "20";}
|
|
1863
1647
|
}
|
|
1648
|
+
|
|
1864
1649
|
.methodology {
|
|
1865
|
-
.medium-3 {
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1650
|
+
.medium-3 {
|
|
1651
|
+
padding-top: 1.5em;
|
|
1652
|
+
|
|
1653
|
+
@media #{$small-only} {
|
|
1654
|
+
padding-left: 1.5em;
|
|
1655
|
+
h4 {
|
|
1656
|
+
font-size: 1.4em;
|
|
1657
|
+
}
|
|
1871
1658
|
}
|
|
1872
|
-
}
|
|
1873
1659
|
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1660
|
+
ul {
|
|
1661
|
+
margin: 0 0 1.5em 0; padding: 0;
|
|
1662
|
+
|
|
1663
|
+
li {
|
|
1664
|
+
margin: 0;
|
|
1665
|
+
padding: 0;
|
|
1666
|
+
}
|
|
1879
1667
|
}
|
|
1880
|
-
}
|
|
1881
1668
|
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1669
|
+
&.hcd {
|
|
1670
|
+
h4 {
|
|
1671
|
+
color: $secondary-color;
|
|
1672
|
+
}
|
|
1885
1673
|
}
|
|
1886
1674
|
}
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
}
|
|
1892
|
-
ol:nth-child(n+2) {
|
|
1893
|
-
li {
|
|
1894
|
-
list-style-type:decimal;
|
|
1675
|
+
|
|
1676
|
+
ol:nth-child(n+2) {
|
|
1677
|
+
li {
|
|
1678
|
+
list-style-type:decimal;
|
|
1679
|
+
}
|
|
1895
1680
|
}
|
|
1896
|
-
|
|
1897
|
-
li {
|
|
1681
|
+
|
|
1682
|
+
li {
|
|
1898
1683
|
&.step {
|
|
1899
1684
|
padding-top: 1.5em;
|
|
1900
1685
|
border-left:4px solid $olso-gray;
|
|
@@ -1943,7 +1728,7 @@ li {
|
|
|
1943
1728
|
&.step.nine
|
|
1944
1729
|
{
|
|
1945
1730
|
&:before {
|
|
1946
|
-
background:white url(
|
|
1731
|
+
background: white image-url("icons/SVG/loop2.svg")center center no-repeat;
|
|
1947
1732
|
display:inline-block;
|
|
1948
1733
|
width:3.4em;
|
|
1949
1734
|
height:2.2em;
|
|
@@ -1955,128 +1740,67 @@ li {
|
|
|
1955
1740
|
}
|
|
1956
1741
|
}
|
|
1957
1742
|
|
|
1958
|
-
&.page {
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
}
|
|
1962
|
-
.medium-3 {
|
|
1963
|
-
padding-top: 0;
|
|
1964
|
-
ul {
|
|
1965
|
-
margin-left: 0;
|
|
1743
|
+
&.page {
|
|
1744
|
+
.discover {
|
|
1745
|
+
background: none;
|
|
1966
1746
|
}
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1747
|
+
.medium-3 {
|
|
1748
|
+
padding-top: 0;
|
|
1749
|
+
ul {
|
|
1750
|
+
margin-left: 0;
|
|
1971
1751
|
}
|
|
1972
|
-
}
|
|
1973
|
-
}
|
|
1974
|
-
}
|
|
1975
|
-
|
|
1976
|
-
.human-centered {
|
|
1977
|
-
.discover,
|
|
1978
|
-
.design,
|
|
1979
|
-
.deliver {
|
|
1980
|
-
border-top: 4px solid #fff;
|
|
1981
|
-
border-bottom:4px solid #fff;
|
|
1982
|
-
div:nth-child(1) {
|
|
1983
|
-
border-right:8px solid #fff;
|
|
1984
|
-
@media #{$small-only} {
|
|
1985
|
-
border-right: 0;
|
|
1986
1752
|
}
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
}
|
|
1992
|
-
.graphic {
|
|
1993
|
-
-webkit-background-size: 138px 138px;
|
|
1994
|
-
background-size: 165px 165px;
|
|
1995
|
-
padding: 0;
|
|
1996
|
-
height: 209px;
|
|
1997
|
-
@media #{$medium-only} {
|
|
1998
|
-
background-position: 0 center;
|
|
1753
|
+
.medium-9 {
|
|
1754
|
+
li {
|
|
1755
|
+
list-style-type: disc;
|
|
1756
|
+
}
|
|
1999
1757
|
}
|
|
2000
1758
|
}
|
|
2001
1759
|
}
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
}
|
|
2010
|
-
@media #{$medium-up} {
|
|
2011
|
-
margin-top: -2.7em!important;
|
|
2012
|
-
}
|
|
2013
|
-
padding-top: 0;
|
|
2014
|
-
}
|
|
1760
|
+
|
|
1761
|
+
|
|
1762
|
+
|
|
1763
|
+
|
|
1764
|
+
.va-list-num--discover {
|
|
1765
|
+
li::before {
|
|
1766
|
+
background-color: $polar;
|
|
2015
1767
|
}
|
|
2016
|
-
|
|
2017
|
-
|
|
1768
|
+
}
|
|
1769
|
+
.va-list-num--design {
|
|
1770
|
+
// TODO: Figure out why !important is necessary here.
|
|
1771
|
+
li::before {
|
|
1772
|
+
background-color: $wild-sand !important;
|
|
2018
1773
|
}
|
|
2019
1774
|
}
|
|
2020
1775
|
|
|
2021
|
-
.
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
}
|
|
2026
|
-
.design {
|
|
2027
|
-
background:$wild-sand;
|
|
2028
|
-
li {
|
|
2029
|
-
&.step.four {
|
|
2030
|
-
@media #{$small-only} {
|
|
2031
|
-
padding-top: 0;
|
|
2032
|
-
margin-top: 1em!important;
|
|
2033
|
-
}
|
|
2034
|
-
}
|
|
2035
|
-
}
|
|
2036
|
-
.graphic {
|
|
2037
|
-
background :image-url("design/playbook/design-process.svg") 40% center no-repeat;
|
|
1776
|
+
.va-list-num--deliver {
|
|
1777
|
+
// TODO: Figure out why !important is necessary here.
|
|
1778
|
+
li::before {
|
|
1779
|
+
background-color: $green-white !important;
|
|
2038
1780
|
}
|
|
2039
1781
|
}
|
|
2040
|
-
.
|
|
2041
|
-
|
|
2042
|
-
li {
|
|
2043
|
-
&.step.six {
|
|
2044
|
-
@media #{$small-only} {
|
|
2045
|
-
padding-top: 0;
|
|
2046
|
-
margin-top: 1em!important;
|
|
2047
|
-
}
|
|
2048
|
-
}
|
|
2049
|
-
&.step.nine {
|
|
2050
|
-
padding-top:0;
|
|
2051
|
-
&:before {
|
|
2052
|
-
margin-left: -3.1em;
|
|
2053
|
-
}
|
|
2054
|
-
}
|
|
2055
|
-
}
|
|
2056
|
-
.graphic {
|
|
2057
|
-
background: image-url("design/playbook/deliver-process.svg") 40% center no-repeat;
|
|
2058
|
-
}
|
|
1782
|
+
.va-prodmethod {
|
|
1783
|
+
padding: 0;
|
|
2059
1784
|
}
|
|
2060
1785
|
|
|
2061
|
-
|
|
2062
1786
|
// Visual Guide
|
|
2063
1787
|
|
|
2064
1788
|
span.color-chip {
|
|
2065
|
-
height: 3em;
|
|
2066
|
-
width: 3em;
|
|
2067
|
-
margin: .5em 1em .5em 0;
|
|
2068
|
-
border-radius: 10em;
|
|
2069
|
-
vertical-align: middle;
|
|
2070
|
-
display: inline-block;
|
|
1789
|
+
height: 3em;
|
|
1790
|
+
width: 3em;
|
|
1791
|
+
margin: .5em 1em .5em 0;
|
|
1792
|
+
border-radius: 10em;
|
|
1793
|
+
vertical-align: middle;
|
|
1794
|
+
display: inline-block;
|
|
2071
1795
|
|
|
2072
|
-
&.primary-color {background: $color-primary;}
|
|
2073
|
-
&.color-primary-darker {background: $color-primary-darker;}
|
|
2074
|
-
&.color-primary-darkest {background: $color-primary-darkest;}
|
|
2075
|
-
&.color-gray-dark {background: $color-gray-dark;}
|
|
2076
|
-
&.color-gray-lightest {background: $color-gray-lightest;}
|
|
2077
|
-
&.color-gold {background: $color-gold;}
|
|
2078
|
-
&.color-green {background: $color-green;}
|
|
2079
|
-
&.color-green-lightest {background: $color-green-lightest;}
|
|
1796
|
+
&.primary-color {background: $color-primary;}
|
|
1797
|
+
&.color-primary-darker {background: $color-primary-darker;}
|
|
1798
|
+
&.color-primary-darkest {background: $color-primary-darkest;}
|
|
1799
|
+
&.color-gray-dark {background: $color-gray-dark;}
|
|
1800
|
+
&.color-gray-lightest {background: $color-gray-lightest;}
|
|
1801
|
+
&.color-gold {background: $color-gold;}
|
|
1802
|
+
&.color-green {background: $color-green;}
|
|
1803
|
+
&.color-green-lightest {background: $color-green-lightest;}
|
|
2080
1804
|
}
|
|
2081
1805
|
|
|
2082
1806
|
|
|
@@ -2101,79 +1825,94 @@ display: inline-block;
|
|
|
2101
1825
|
.icon-embed2 {width: 1.25em;}
|
|
2102
1826
|
.icon-youtube4 {width: 2.5087890625em;}
|
|
2103
1827
|
|
|
2104
|
-
// Citation
|
|
2105
|
-
|
|
2106
|
-
.citation {
|
|
2107
|
-
border-top: 1px solid #eee;
|
|
2108
|
-
padding: 1em 0 0 0;
|
|
2109
|
-
h5, h6 {font-size: .85em; font-family: $font-sans; color: $color-gray-dark;}
|
|
2110
|
-
p, ul, li {font-size: .7em;}
|
|
2111
|
-
font-style: italic;
|
|
2112
|
-
}
|
|
2113
|
-
|
|
2114
1828
|
// Panel list
|
|
2115
|
-
|
|
1829
|
+
// TODO: Refactor to panel-list and panel-list--plain
|
|
1830
|
+
// or similar
|
|
2116
1831
|
.panel-list {
|
|
2117
|
-
background:
|
|
2118
|
-
padding: 1em;
|
|
2119
|
-
position: relative;
|
|
2120
|
-
min-height: 12em;
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
1832
|
+
background: rgba(0,0,0,.05);
|
|
1833
|
+
padding: 1em;
|
|
1834
|
+
position: relative;
|
|
1835
|
+
min-height: 12em;
|
|
1836
|
+
|
|
1837
|
+
dt {
|
|
1838
|
+
color: $color-primary-darkest;
|
|
1839
|
+
padding: 0;
|
|
1840
|
+
font-weight: 700;
|
|
1841
|
+
font-size: 1.2em;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
dd {
|
|
1845
|
+
padding: 0;
|
|
1846
|
+
margin: 0;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
a {
|
|
1850
|
+
@extend .usa-button-primary;
|
|
1851
|
+
margin: .5em 0;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
&.plain {
|
|
1855
|
+
height: auto;
|
|
1856
|
+
|
|
1857
|
+
dt {
|
|
1858
|
+
font-size: 1.45em;
|
|
1859
|
+
}
|
|
1860
|
+
|
|
1861
|
+
margin: 0 0 1em 0;
|
|
1862
|
+
min-height: 0;
|
|
1863
|
+
}
|
|
2135
1864
|
}
|
|
2136
1865
|
|
|
2137
|
-
//
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
{text-decoration: none;}
|
|
2143
|
-
|
|
2144
|
-
#content .usa-button-primary.expand {
|
|
2145
|
-
width: 100%;
|
|
1866
|
+
// Highlight headings
|
|
1867
|
+
.highlight {
|
|
1868
|
+
border-bottom: 3px solid $primary-color;
|
|
1869
|
+
padding-bottom: .25em;
|
|
1870
|
+
font-weight: 700;
|
|
2146
1871
|
}
|
|
2147
1872
|
|
|
1873
|
+
// Action bars
|
|
1874
|
+
[class^="va-action-bar"] {
|
|
1875
|
+
background: $color-gray-lightest;
|
|
1876
|
+
}
|
|
2148
1877
|
|
|
2149
|
-
|
|
1878
|
+
.va-action-bar--header {
|
|
1879
|
+
padding: .5em 0;
|
|
1880
|
+
text-align: right;
|
|
1881
|
+
}
|
|
2150
1882
|
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
padding: .5em !important;
|
|
2154
|
-
display: block;
|
|
2155
|
-
font-weight: 700;
|
|
2156
|
-
line-heighgt: 1.2em;
|
|
2157
|
-
margin-bottom: .75em;
|
|
2158
|
-
font-famiy: $font-sans;
|
|
1883
|
+
.va-action-bar--footer {
|
|
1884
|
+
padding: 1em 0;
|
|
2159
1885
|
}
|
|
2160
1886
|
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
1887
|
+
.va-action-bar--start {
|
|
1888
|
+
background: $color-green-lightest;
|
|
1889
|
+
border-bottom: 3px solid $color-white;
|
|
2164
1890
|
}
|
|
2165
1891
|
|
|
2166
|
-
//
|
|
1892
|
+
// TODO: Deprecate .va-action-bar--header a.usa-button-primary.
|
|
1893
|
+
// Use .va-button-primary and .va-button-secondary
|
|
1894
|
+
// going forward.
|
|
1895
|
+
// Drop !important from the lines below when everything
|
|
1896
|
+
// is refactored.
|
|
1897
|
+
.va-button-primary {
|
|
1898
|
+
background: $color-green !important;
|
|
1899
|
+
|
|
1900
|
+
&:hover,
|
|
1901
|
+
&:focus {
|
|
1902
|
+
background-color: $color-green-darker !important;
|
|
1903
|
+
}
|
|
1904
|
+
}
|
|
2167
1905
|
|
|
2168
|
-
.
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
}
|
|
1906
|
+
.va-button-secondary {
|
|
1907
|
+
background-color: $color-primary-darker !important;
|
|
1908
|
+
|
|
1909
|
+
&:hover,
|
|
1910
|
+
&:focus {
|
|
1911
|
+
background-color: $color-primary-darkest !important;
|
|
1912
|
+
}
|
|
2175
1913
|
}
|
|
2176
1914
|
|
|
1915
|
+
|
|
2177
1916
|
// USDS component styles
|
|
2178
1917
|
// Accordion
|
|
2179
1918
|
.usa-accordion-content[aria-hidden=true] {
|
|
@@ -2191,13 +1930,18 @@ button[class*="usa-button-"] {
|
|
|
2191
1930
|
.disclaimer {
|
|
2192
1931
|
padding: 1em 0;
|
|
2193
1932
|
border-top: 1px solid #ddd;
|
|
2194
|
-
|
|
2195
|
-
color:
|
|
2196
|
-
background:
|
|
1933
|
+
z-index:500;
|
|
1934
|
+
color: $color-va-gray-cool-dark;
|
|
1935
|
+
background: $color-white;
|
|
1936
|
+
|
|
2197
1937
|
&.minimal {
|
|
2198
1938
|
border-top: none;
|
|
2199
1939
|
padding: .25em 0;
|
|
2200
1940
|
}
|
|
1941
|
+
|
|
1942
|
+
p {
|
|
1943
|
+
font-size: 0.8em;
|
|
1944
|
+
}
|
|
2201
1945
|
}
|
|
2202
1946
|
|
|
2203
1947
|
// Info block
|
|
@@ -2209,83 +1953,86 @@ button[class*="usa-button-"] {
|
|
|
2209
1953
|
}
|
|
2210
1954
|
}
|
|
2211
1955
|
|
|
2212
|
-
body.home .disclaimer, body.page-playbook .disclaimer {
|
|
2213
|
-
display: none;
|
|
2214
|
-
}
|
|
2215
1956
|
// Mobile menu
|
|
2216
1957
|
|
|
2217
1958
|
/* Overlay style */
|
|
2218
|
-
|
|
2219
|
-
@media #{$
|
|
2220
|
-
|
|
2221
|
-
.overlay {
|
|
2222
|
-
position: fixed;
|
|
2223
|
-
width: 100%;
|
|
2224
|
-
height: 100%;
|
|
2225
|
-
top: 0;
|
|
2226
|
-
left: 0;
|
|
2227
|
-
z-index: 800;
|
|
2228
|
-
background: rgba($color-primary-darkest, .95);
|
|
1959
|
+
.va-overlay-close {
|
|
1960
|
+
@media #{$medium} {
|
|
1961
|
+
display: none;
|
|
2229
1962
|
}
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
1963
|
+
&--icon {
|
|
1964
|
+
display: inline;
|
|
1965
|
+
margin: 0;
|
|
1966
|
+
padding: 1rem;
|
|
1967
|
+
width: auto;
|
|
1968
|
+
|
|
1969
|
+
&:hover {
|
|
1970
|
+
background: transparent;
|
|
1971
|
+
}
|
|
2237
1972
|
}
|
|
1973
|
+
}
|
|
2238
1974
|
|
|
2239
1975
|
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
border-radius: .15em;
|
|
1976
|
+
@media #{$medium} {
|
|
1977
|
+
.va-overlay-close {
|
|
1978
|
+
display: none;
|
|
2244
1979
|
}
|
|
1980
|
+
}
|
|
2245
1981
|
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
1982
|
+
@media #{$small-only} {
|
|
1983
|
+
|
|
1984
|
+
.va-overlay {
|
|
1985
|
+
background: rgba($color-primary-darkest, .95);
|
|
1986
|
+
height: 100%;
|
|
1987
|
+
left: 0;
|
|
2250
1988
|
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
|
|
1989
|
+
opacity: 0;
|
|
1990
|
+
position: fixed;
|
|
1991
|
+
top: 0;
|
|
2251
1992
|
transition: opacity 0.5s, visibility 0s 0.5s;
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
width: 100% !important;
|
|
2257
|
-
margin: 0;
|
|
2258
|
-
width: auto;
|
|
2259
|
-
background: $color-primary;
|
|
2260
|
-
|
|
2261
|
-
}
|
|
2262
|
-
|
|
1993
|
+
visibility: hidden;
|
|
1994
|
+
width: 100%;
|
|
1995
|
+
z-index: 800;
|
|
1996
|
+
|
|
2263
1997
|
input[type="text"] {
|
|
2264
|
-
border-radius: 3px 0 0 3px;
|
|
2265
|
-
-moz-border-radius: 3px 0 0 3px;
|
|
2266
|
-
-webkit-border-radius: 3px 0 0 3px;
|
|
2267
1998
|
-webkit-appearance: none;
|
|
1999
|
+
border-radius: 3px 0 0 3px;
|
|
2268
2000
|
}
|
|
2269
|
-
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
.va-mobile-searchclose {
|
|
2004
|
+
border-radius: 0;
|
|
2005
|
+
display: block !important;
|
|
2006
|
+
width: 100% !important;
|
|
2007
|
+
margin: 0;
|
|
2008
|
+
width: auto;
|
|
2009
|
+
background: $color-primary;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
.va-mobile-searchtrigger {
|
|
2013
|
+
padding: .5em;
|
|
2014
|
+
margin-top: 0;
|
|
2015
|
+
border-radius: .15em;
|
|
2270
2016
|
}
|
|
2271
2017
|
|
|
2272
|
-
.overlay
|
|
2018
|
+
.va-overlay--open {
|
|
2273
2019
|
opacity: 1;
|
|
2274
2020
|
visibility: visible;
|
|
2275
2021
|
-webkit-transition: opacity 0.5s;
|
|
2276
2022
|
transition: opacity 0.5s;
|
|
2023
|
+
|
|
2277
2024
|
.columns {
|
|
2278
2025
|
padding: 0;
|
|
2279
2026
|
}
|
|
2280
2027
|
}
|
|
2281
2028
|
|
|
2282
|
-
.overlay
|
|
2029
|
+
.va-overlay .menu {
|
|
2283
2030
|
-webkit-perspective: 1200px;
|
|
2284
2031
|
perspective: 1200px;
|
|
2285
2032
|
padding: 1em 1em;
|
|
2286
2033
|
}
|
|
2287
2034
|
|
|
2288
|
-
.overlay
|
|
2035
|
+
.va-overlay form {
|
|
2289
2036
|
opacity: 0.4;
|
|
2290
2037
|
-webkit-transform: translateY(-25%) rotateX(35deg);
|
|
2291
2038
|
transform: translateY(-25%) rotateX(35deg);
|
|
@@ -2293,47 +2040,50 @@ body.home .disclaimer, body.page-playbook .disclaimer {
|
|
|
2293
2040
|
transition: transform 0.5s, opacity 0.5s;
|
|
2294
2041
|
}
|
|
2295
2042
|
|
|
2296
|
-
.overlay
|
|
2043
|
+
.va-overlay--open form {
|
|
2297
2044
|
opacity: 1;
|
|
2298
2045
|
-webkit-transform: rotateX(0deg);
|
|
2299
2046
|
transform: rotateX(0deg);
|
|
2300
2047
|
}
|
|
2301
2048
|
|
|
2302
|
-
.overlay
|
|
2049
|
+
.va-overlay--closed form {
|
|
2303
2050
|
-webkit-transform: translateY(25%) rotateX(-35deg);
|
|
2304
2051
|
transform: translateY(25%) rotateX(-35deg);
|
|
2305
2052
|
}
|
|
2053
|
+
.va-overlay--closed {
|
|
2054
|
+
display: block;
|
|
2055
|
+
border: none;
|
|
2056
|
+
outline: none;
|
|
2057
|
+
z-index: 100;
|
|
2058
|
+
}
|
|
2306
2059
|
|
|
2060
|
+
.va-overlay-body {
|
|
2061
|
+
margin: 1rem auto;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2307
2064
|
@media screen and (max-height: 30.5em) {
|
|
2308
2065
|
.overlay form {
|
|
2309
2066
|
height: 70%;
|
|
2310
2067
|
}
|
|
2311
|
-
|
|
2312
2068
|
}
|
|
2313
|
-
|
|
2314
|
-
}
|
|
2315
|
-
|
|
2316
|
-
.overlay-close {
|
|
2317
|
-
display: none;
|
|
2318
2069
|
}
|
|
2319
2070
|
|
|
2320
2071
|
// List overrides
|
|
2321
|
-
|
|
2322
2072
|
ul li p {
|
|
2323
2073
|
margin: 0;
|
|
2324
2074
|
padding: 0;
|
|
2325
2075
|
}
|
|
2326
2076
|
|
|
2327
|
-
// vets.gov branded apps
|
|
2328
2077
|
|
|
2329
|
-
|
|
2078
|
+
// vets.gov branded apps
|
|
2079
|
+
.vets-app {
|
|
2330
2080
|
border-left: 3px solid $color-gold;
|
|
2331
2081
|
display: inline-block;
|
|
2332
2082
|
padding: 0 0 0 .5em !important;
|
|
2333
2083
|
}
|
|
2334
2084
|
|
|
2335
2085
|
// Tooltip
|
|
2336
|
-
|
|
2086
|
+
.js-simple-tooltip {
|
|
2337
2087
|
font-family: 'Courier New', 'Courier', serif;
|
|
2338
2088
|
font-weight:bold;
|
|
2339
2089
|
cursor: pointer;
|
|
@@ -2354,7 +2104,9 @@ button.js-simple-tooltip {
|
|
|
2354
2104
|
}
|
|
2355
2105
|
.simpletooltip_container {
|
|
2356
2106
|
position: relative;
|
|
2107
|
+
display: inline-block;
|
|
2357
2108
|
}
|
|
2109
|
+
|
|
2358
2110
|
.simpletooltip {
|
|
2359
2111
|
position: absolute;
|
|
2360
2112
|
z-index: 777;
|
|
@@ -2367,26 +2119,28 @@ button.js-simple-tooltip {
|
|
|
2367
2119
|
font-size: 1em;
|
|
2368
2120
|
font-weight: 300;
|
|
2369
2121
|
line-height: 1.3;
|
|
2370
|
-
}
|
|
2371
|
-
.simpletooltip {
|
|
2372
2122
|
right: auto;
|
|
2373
2123
|
left: 100%;
|
|
2374
2124
|
margin-left: .8em;
|
|
2125
|
+
white-space: normal;
|
|
2126
|
+
top: -110%;
|
|
2127
|
+
|
|
2128
|
+
&:before {
|
|
2129
|
+
border-bottom: 10px solid transparent; // left arrow slant
|
|
2130
|
+
border-top: 10px solid transparent; // right arrow slant
|
|
2131
|
+
border-right: 10px solid $color-gray-dark;
|
|
2132
|
+
content: "";
|
|
2133
|
+
font-size: 0;
|
|
2134
|
+
position: absolute;
|
|
2135
|
+
left: 0px;
|
|
2136
|
+
line-height: 0;
|
|
2137
|
+
margin-left: -10px;
|
|
2138
|
+
width:0;
|
|
2139
|
+
height:0;
|
|
2140
|
+
top: 39%;
|
|
2141
|
+
}
|
|
2375
2142
|
}
|
|
2376
|
-
|
|
2377
|
-
border-bottom: 10px solid transparent; /* left arrow slant */
|
|
2378
|
-
border-top: 10px solid transparent; /* right arrow slant */
|
|
2379
|
-
border-right: 10px solid $color-gray-dark;
|
|
2380
|
-
content:"";
|
|
2381
|
-
font-size: 0;
|
|
2382
|
-
position: absolute;
|
|
2383
|
-
top: 3px;
|
|
2384
|
-
left: 0px;
|
|
2385
|
-
line-height: 0;
|
|
2386
|
-
margin-left: -10px;
|
|
2387
|
-
width:0;
|
|
2388
|
-
height:0
|
|
2389
|
-
}
|
|
2143
|
+
|
|
2390
2144
|
@media (max-width: 40.063em) {
|
|
2391
2145
|
.simpletooltip {
|
|
2392
2146
|
top: 100%;
|
|
@@ -2395,31 +2149,30 @@ button.js-simple-tooltip {
|
|
|
2395
2149
|
margin: 0;
|
|
2396
2150
|
margin-top: .7em;
|
|
2397
2151
|
margin-left: -5em;
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2152
|
+
|
|
2153
|
+
&:before {
|
|
2154
|
+
top: -10px !important;
|
|
2155
|
+
right: auto;
|
|
2156
|
+
left: 45%;
|
|
2157
|
+
margin-left: -5px;
|
|
2158
|
+
margin-top: -10px;
|
|
2159
|
+
border: 10px solid transparent;
|
|
2160
|
+
border-bottom: 10px solid $color-gray-dark;
|
|
2161
|
+
}
|
|
2407
2162
|
}
|
|
2408
2163
|
}
|
|
2409
2164
|
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2165
|
+
html.no-touchevents {
|
|
2166
|
+
.touch {display: none;}
|
|
2167
|
+
.no-touch {display: block;}
|
|
2168
|
+
}
|
|
2414
2169
|
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2170
|
+
html.touchevents {
|
|
2171
|
+
.touch {display: block;}
|
|
2172
|
+
.no-touch {display: none;}
|
|
2173
|
+
}
|
|
2419
2174
|
|
|
2420
2175
|
// Animate CSS components
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
2176
|
.animated {
|
|
2424
2177
|
-webkit-animation-duration: 1.25s;
|
|
2425
2178
|
animation-duration: 1.25s;
|
|
@@ -2427,76 +2180,6 @@ button.js-simple-tooltip {
|
|
|
2427
2180
|
animation-fill-mode: both;
|
|
2428
2181
|
}
|
|
2429
2182
|
|
|
2430
|
-
.animated.hinge {
|
|
2431
|
-
-webkit-animation-duration: 2s;
|
|
2432
|
-
animation-duration: 2s;
|
|
2433
|
-
}
|
|
2434
|
-
|
|
2435
|
-
@-webkit-keyframes bounce {
|
|
2436
|
-
0%, 20%, 50%, 80%, 100% {
|
|
2437
|
-
-webkit-transform: translateY(0);
|
|
2438
|
-
transform: translateY(0);
|
|
2439
|
-
}
|
|
2440
|
-
|
|
2441
|
-
40% {
|
|
2442
|
-
-webkit-transform: translateY(-30px);
|
|
2443
|
-
transform: translateY(-30px);
|
|
2444
|
-
}
|
|
2445
|
-
|
|
2446
|
-
60% {
|
|
2447
|
-
-webkit-transform: translateY(-15px);
|
|
2448
|
-
transform: translateY(-15px);
|
|
2449
|
-
}
|
|
2450
|
-
}
|
|
2451
|
-
|
|
2452
|
-
@keyframes bounce {
|
|
2453
|
-
0%, 20%, 50%, 80%, 100% {
|
|
2454
|
-
-webkit-transform: translateY(0);
|
|
2455
|
-
-ms-transform: translateY(0);
|
|
2456
|
-
transform: translateY(0);
|
|
2457
|
-
}
|
|
2458
|
-
|
|
2459
|
-
40% {
|
|
2460
|
-
-webkit-transform: translateY(-30px);
|
|
2461
|
-
-ms-transform: translateY(-30px);
|
|
2462
|
-
transform: translateY(-30px);
|
|
2463
|
-
}
|
|
2464
|
-
|
|
2465
|
-
60% {
|
|
2466
|
-
-webkit-transform: translateY(-15px);
|
|
2467
|
-
-ms-transform: translateY(-15px);
|
|
2468
|
-
transform: translateY(-15px);
|
|
2469
|
-
}
|
|
2470
|
-
}
|
|
2471
|
-
|
|
2472
|
-
.bounce {
|
|
2473
|
-
-webkit-animation-name: bounce;
|
|
2474
|
-
animation-name: bounce;
|
|
2475
|
-
}
|
|
2476
|
-
|
|
2477
|
-
@-webkit-keyframes flash {
|
|
2478
|
-
0%, 50%, 100% {
|
|
2479
|
-
opacity: 1;
|
|
2480
|
-
}
|
|
2481
|
-
|
|
2482
|
-
25%, 75% {
|
|
2483
|
-
opacity: 0;
|
|
2484
|
-
}
|
|
2485
|
-
}
|
|
2486
|
-
|
|
2487
|
-
@keyframes flash {
|
|
2488
|
-
0%, 50%, 100% {
|
|
2489
|
-
opacity: 1;
|
|
2490
|
-
}
|
|
2491
|
-
|
|
2492
|
-
25%, 75% {
|
|
2493
|
-
opacity: 0;
|
|
2494
|
-
}
|
|
2495
|
-
}
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
2183
|
@-webkit-keyframes fadeIn {
|
|
2501
2184
|
0% {
|
|
2502
2185
|
opacity: 0;
|
|
@@ -2522,51 +2205,4 @@ button.js-simple-tooltip {
|
|
|
2522
2205
|
animation-name: fadeIn;
|
|
2523
2206
|
}
|
|
2524
2207
|
|
|
2525
|
-
@-webkit-keyframes fadeInDown {
|
|
2526
|
-
0% {
|
|
2527
|
-
opacity: 0;
|
|
2528
|
-
-webkit-transform: translateY(-20px);
|
|
2529
|
-
transform: translateY(-20px);
|
|
2530
|
-
}
|
|
2531
|
-
|
|
2532
|
-
100% {
|
|
2533
|
-
opacity: 1;
|
|
2534
|
-
-webkit-transform: translateY(0);
|
|
2535
|
-
transform: translateY(0);
|
|
2536
|
-
}
|
|
2537
|
-
}
|
|
2538
|
-
|
|
2539
|
-
@keyframes fadeInDown {
|
|
2540
|
-
0% {
|
|
2541
|
-
opacity: 0;
|
|
2542
|
-
-webkit-transform: translateY(-20px);
|
|
2543
|
-
-ms-transform: translateY(-20px);
|
|
2544
|
-
transform: translateY(-20px);
|
|
2545
|
-
}
|
|
2546
|
-
|
|
2547
|
-
100% {
|
|
2548
|
-
opacity: 1;
|
|
2549
|
-
-webkit-transform: translateY(0);
|
|
2550
|
-
-ms-transform: translateY(0);
|
|
2551
|
-
transform: translateY(0);
|
|
2552
|
-
}
|
|
2553
|
-
}
|
|
2554
|
-
|
|
2555
|
-
.fadeInDown {
|
|
2556
|
-
-webkit-animation-name: fadeInDown;
|
|
2557
|
-
animation-name: fadeInDown;
|
|
2558
|
-
}
|
|
2559
|
-
|
|
2560
|
-
@-webkit-keyframes fadeInDownBig {
|
|
2561
|
-
0% {
|
|
2562
|
-
opacity: 0;
|
|
2563
|
-
-webkit-transform: translateY(-2000px);
|
|
2564
|
-
transform: translateY(-2000px);
|
|
2565
|
-
}
|
|
2566
2208
|
|
|
2567
|
-
100% {
|
|
2568
|
-
opacity: 1;
|
|
2569
|
-
-webkit-transform: translateY(0);
|
|
2570
|
-
transform: translateY(0);
|
|
2571
|
-
}
|
|
2572
|
-
}
|