va_common 0.3.2 → 0.3.3

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.
@@ -1,5 +1,22 @@
1
1
  // Vets.gov
2
2
 
3
+ // Skip link
4
+
5
+ .show-on-focus {
6
+ position: absolute;
7
+ top: -10em;
8
+ background: #fff;
9
+ padding: 1em;
10
+ color: $color-primary-darkest;
11
+ display: block;
12
+ font-weight: 600;
13
+ &:hover {background: #fff;}
14
+ &:focus {
15
+ position: inherit;
16
+ top: auto;
17
+ outline: 2px solid $color-gold;
18
+ }
19
+ }
3
20
 
4
21
  // Other Colors
5
22
  $polar:#E8F5FA;
@@ -11,7 +28,6 @@ $olso-gray:#849097;
11
28
  $roboto-slab: 'Roboto Slab', serif;
12
29
 
13
30
 
14
-
15
31
  // General
16
32
  html, body {
17
33
  padding: 0;
@@ -29,6 +45,49 @@ body, body.home {
29
45
  }
30
46
 
31
47
 
48
+ // Gem Specific css
49
+ ul li:before {
50
+ content:none;
51
+ }
52
+
53
+ #content ul.breadcrumbs li.active {
54
+ margin: 0em;
55
+ }
56
+
57
+
58
+ // Search
59
+
60
+ .overlay {
61
+ z-index: 10000;
62
+ }
63
+
64
+ .reveal-modal #search_form {
65
+ margin-bottom: 1em;
66
+ }
67
+
68
+ .reveal-modal .close-reveal-modal {
69
+ font-size: 1em;
70
+ clear: both;
71
+ text-decoration: none;
72
+ color: $color-gray-dark;
73
+ text-align: center;
74
+ margin: 1em 0;
75
+ position: relative;
76
+ top: auto;
77
+ display: block;
78
+ padding: 1em 0;
79
+ right: auto;
80
+ width: 100%;
81
+ bottom: auto;
82
+ }
83
+
84
+ #search_form input[type="submit"] {
85
+ font-size: 1em;
86
+ max-height: 2.65em;
87
+ }
88
+
89
+ // end gem specific
90
+
32
91
  // row
33
92
  body .row.full {
34
93
  width: 100%;
@@ -76,26 +135,6 @@ color: $color-gray-dark;
76
135
 
77
136
  }
78
137
 
79
- /*
80
- a[href*="//"]:not([href*="http://department-of-veterans-affairs.github.io/vets-website"]) {
81
- background: url(../images/icons/icon-exit-white.png);
82
- -webkit-background-size: 18px 15.38px;
83
- background-size: 18px 15.38px;
84
- background-position: right center!important;
85
- background-repeat: no-repeat;
86
- padding-right: 2em;
87
- position: relative;
88
- &:hover {
89
- background:rgba(0,0,0,0.2) url(../images/icons/icon-exit-gold.png)!important;
90
- -webkit-background-size: 18px 15.38px!important;
91
- background-size: 18px 15.38px!important;
92
- background-position: right center!important;
93
- background-repeat: no-repeat!important;
94
- }
95
- }
96
- */
97
-
98
-
99
138
 
100
139
  // Logo and Header
101
140
 
@@ -138,21 +177,14 @@ h1 {
138
177
  // Type
139
178
 
140
179
  h1, h2 {
141
- font-family: $font-sans;
142
- font-weight: 600;
180
+ font-family: $font-sans;
181
+ font-weight: 600;
143
182
  }
144
183
  h3, h4, h5, h6 {
145
- color:$color-primary-darkest;
146
- font-family:$roboto-slab;
147
- font-weight: 400;
148
- &.alternate{
149
- font-family: $font-sans;
150
- }
184
+ color:$color-primary-darkest;
185
+ font-weight: 600;
151
186
  }
152
187
 
153
- // Header
154
-
155
-
156
188
  // Links
157
189
 
158
190
  a {text-decoration: underline; background: rgba(0,0,0,.05);}
@@ -163,114 +195,107 @@ a:hover {text-decoration: underline; background: rgba(0,0,0,.1);}
163
195
  #content {margin: 0; padding: 0; color: $color-gray-dark;}
164
196
 
165
197
  #content .splash {
166
- padding: .5em 0;
167
- margin: 0;
168
- p {color: #fff; font-family: $font-sans;}
169
-
170
- &.home {
171
- background: #ccc;
172
- background: rgba(0,0,0,.1);
173
- }
198
+ padding: 0 0 .5em 0;
199
+ margin: 0;
200
+ @media #{$small} {padding: .5em 0;}
174
201
 
175
- &.app {
176
- padding: 0;
177
202
  p {color: #fff; font-family: $font-sans;}
178
- ul.breadcrumbs {
179
- display: inline-block;
180
- margin: 0 0 .5em 0; padding: 0;
181
- @media #{$small} {margin-right: 1em;}
182
- h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
183
- li {overflow: hidden; padding: 0;}
184
- }
185
- p {margin: .5em 0 1em 0;}
186
- }
187
203
 
188
- @media #{$small} {padding: 1em 0;}
189
- @media #{$medium} {padding: 2em 0;}
190
- @media #{$large} {padding: 2.5em 0;}
191
- span, h2 {
192
- padding: 0;
193
- display: inline;
194
- line-height: 1.3em;
195
- margin: .5em 0 0 0;
196
- white-space: pre-wrap;
197
- color: #333;
198
- a {background: $color-gold; color: #444;}
199
- }
204
+ &.app {
205
+ padding: 0;
206
+ p {color: #fff; font-family: $font-sans;}
207
+ ul.breadcrumbs {
208
+ display: inline-block;
209
+ margin: 0 0 .5em 0; padding: 0;
210
+ @media #{$small} {margin-right: 1em;}
211
+ h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
212
+ li {overflow: hidden; padding: 0;}
213
+ }
214
+ p {margin: .5em 0 1em 0;}
215
+ }
200
216
 
201
- h2 span {clear: both; padding: .1em; display: inline-block; background: $color-gold; font-weight: normal;}
202
- h2, h3, p {/*padding: .35em; */ margin: 0; display: inline-block; font-family: $roboto-slab;}
203
- h2 {
204
- font-size: 1em;
205
- display: inline-block;
206
- @media #{$small} {font-size: 2em;}
207
- }
208
- h3 {font-weight: 500; font-size: 1.4em; color: #555;}
217
+ @media #{$small} {padding: 1em 0;}
218
+ @media #{$medium} {padding: 2em 0;}
219
+ @media #{$large} {padding: 2.5em 0;}
220
+ span, h2 {
221
+ padding: 0;
222
+ display: inline;
223
+ line-height: 1.3em;
224
+ margin: .5em 0 0 0;
225
+ white-space: pre-wrap;
226
+ color: #333;
227
+ a {background: $color-gold; color: #444;}
228
+ }
209
229
 
210
- &.alternate {
211
- li a {
212
- color: $color-primary-darkest;
213
- border-bottom: 2px solid $secondary-color;
230
+ h2 span {clear: both; padding: .1em; display: inline-block; background: $color-gold; font-weight: normal;}
231
+ h2, h3, p {/*padding: .35em; */ margin: 0; display: inline-block; font-family: $roboto-slab;}
232
+ h2 {
233
+ font-size: 1em;
234
+ display: inline-block;
235
+ @media #{$small} {font-size: 2em;}
214
236
  }
237
+ h3 {font-weight: 500; font-size: 1.4em; color: #555;}
215
238
 
216
- li.parent:after {color: #ccc;}
217
- }
239
+ &.alternate {
240
+ li a {
241
+ color: $color-primary-darkest;
242
+ border-bottom: 2px solid $secondary-color;
243
+ }
244
+
245
+ li.parent:after {color: #ccc;}
246
+ }
218
247
 
219
248
  }
220
249
 
221
250
  .pitch {
222
- @media #{$small} {padding: .5em 0;}
223
- h2, h3 {color: $color-primary-darkest; font-weight: 400; padding: .75em; line-height: 1.3em; display: inline-block; margin: 0;}
251
+ @media #{$small} {padding: .5em 0;}
252
+ h2, h3 {color: $color-primary-darkest; font-weight: 400; padding: .75em; line-height: 1.3em; display: inline-block; margin: 0;}
224
253
  }
225
254
 
226
255
  #experience .splash {padding: 0; margin: 0;}
227
256
 
228
257
  #experience .splash h2 {
229
- margin: .5em 0; padding: 0;
230
- a {
231
- margin: 0;
232
- color: #444;
233
- background: $color-gold;
234
- line-height: 1.4em;
235
- font-size: .9em;
236
- }
258
+ margin: .5em 0; padding: 0;
259
+ a {
260
+ margin: 0;
261
+ color: #444;
262
+ background: $color-gold;
263
+ line-height: 1.4em;
264
+ font-size: .9em;
265
+ }
237
266
  }
238
267
 
239
268
  .feature-list ul {
240
- margin: 0; padding: 0;
241
- li {
242
- a {font-weight: bold;}
243
- list-style-position: outside;
244
- list-style-type: none;
245
- border-bottom: 1px solid #ccc;
246
- padding: 1em 0;
247
- &:last-of-type {border-bottom: none;}
248
- }
269
+ margin: 0; padding: 0;
270
+ li {
271
+ a {font-weight: bold;}
272
+ list-style-position: outside;
273
+ list-style-type: none;
274
+ border-bottom: 1px solid #ccc;
275
+ padding: 1em 0;
276
+ &:last-of-type {border-bottom: none;}
277
+ }
249
278
  }
250
279
 
251
280
  .primary {
252
-
253
- @media #{$small} {padding: 1em 0;}
254
- @media #{$small} {padding: 2em 0;}
255
- @media #{$medium} {padding: 2em 0;}
256
- h3 {
257
- padding: 0 0 .5em 0;
258
- }
281
+ @media #{$small} {padding: 1em 0;}
282
+ @media #{$small} {padding: 2em 0;}
283
+ @media #{$medium} {padding: 2em 0;}
284
+ h3 {
285
+ padding: 0 0 .5em 0;
286
+ }
259
287
  }
260
288
 
261
289
  html.no-touch .banner {
262
- background: image-url("design/banner.jpg") 50% 60% no-repeat;
263
- background-size: cover;
290
+ background: image-url("design/banner.jpg") 50% 60% no-repeat;
291
+ background-size: cover;
264
292
  }
265
293
 
266
294
  // Headings
267
295
 
268
- h1 {}
269
- h2 {}
270
296
  h3 {color: $color-primary-darkest; font-size: 1.8em; padding: 0 0 1em 0;}
271
297
  h4 {font-size: 1.5em;}
272
298
  h5 {font-size: 1em; font-weight: bold;}
273
- h6 {}
274
299
 
275
300
  // tagline
276
301
 
@@ -282,16 +307,22 @@ p {
282
307
  margin: 0 0 2em 0;
283
308
  color: rgba(255,255,255,.7);
284
309
  line-height: 1.2em;
285
- }
286
- }
287
-
288
- body.home, body.fourohfour {
289
- .main {background: none;}
310
+ }
290
311
  }
291
312
 
292
313
  // Content Callouts
293
314
 
294
315
  #content .main .section.one {
316
+ ol {
317
+ margin: 0;
318
+ list-style-position: outside;
319
+ li {
320
+ margin: 0 0 1em 0;
321
+ }
322
+ ul, ol {
323
+ margin: .5em 0 .5em 1.2em;
324
+ }
325
+ }
295
326
 
296
327
  ul {
297
328
  margin: 0 0 1em 1.2em;
@@ -318,12 +349,17 @@ body.home, body.fourohfour {
318
349
  padding: 1em;
319
350
  clear: both;
320
351
  margin: 0 0 1.5em 0;
352
+ p {margin-bottom: 0; padding-bottom: .5em}
353
+ p:nth-child(1) {
354
+ font-size: 1em;
355
+ color: #333;
356
+ padding-bottom: inherit;
357
+ }
321
358
  h3 {font-size: 1.5em;}
322
359
  ul {
323
360
  margin: 0 0 .5em 1.5em; padding: 0;
324
361
  li {
325
362
  list-style: square;
326
- padding: 0 .25em;
327
363
  margin: 0;
328
364
  }
329
365
  }
@@ -335,129 +371,129 @@ body.home, body.fourohfour {
335
371
  li p:first-of-type,
336
372
  ul+p
337
373
  {
338
- font-weight: normal;
374
+ font-weight: normal !important;
375
+ color: #333;
376
+ font-size: 1em;
377
+ padding-bottom: 0;
339
378
  }
340
379
  p:nth-child(1) {
341
- font-size: 1.1em;
380
+ font-size: 1.25em;
381
+ color: $color-primary-darker;
342
382
  letter-spacing: normal;
343
- font-weight: 600;
383
+ font-weight: normal;
344
384
  padding-bottom: 1em;
345
385
  }
346
-
347
386
  }
348
387
 
349
388
  #content .main.interior {
350
- background: #fff;
351
- a {
352
- text-decoration: underline;
353
-
354
- // padding: .2em .3em .1em .3em;
355
- // display: inline-block;
356
- // margin-bottom: .2em;
357
- }
358
-
359
- // First Paragraph
360
-
361
-
362
-
389
+ background: #fff;
390
+ a {text-decoration: underline;}
363
391
  }
364
392
 
365
393
  // Home page specific
366
394
 
367
395
  .home #content {
368
- h2, h3, h4, h5, h6, p, ul, li, ol, a {color: #fff;}
369
- color: #fff;
396
+ h2, h3, h4, h5, h6, p, ul, li, ol, a {color: $color-gray-dark;}
397
+ .post-date {font-size: .5em; color: $color-gold;}
398
+ h3 {
399
+ border-bottom: 1px solid #fff;
400
+ line-height: 1.2em;
401
+ border-bottom: 6px solid $color-primary-darker;
402
+ font-size: 1.65em;
403
+ color: $color-primary;
404
+ margin: 0 0 2.5em 0;
405
+ padding: 0 0 .2em 0;
406
+ }
370
407
 
371
- .post-date {font-size: .5em; color: $color-gold;}
408
+ h4 a {
409
+ text-decoration: none;
410
+ &:hover {
411
+ border-bottom: 1px solid #fff;
412
+ color: $color-gold;
413
+ }
414
+ }
372
415
 
373
- h3 {border-bottom: 1px solid #fff; border-bottom: 6px solid $primary-color; font-size: 1.65em; margin: 0 0 2em 0; padding: 0 0 .2em 0;}
416
+ .read-more {
417
+ font-size: .5em;
418
+ display: inline-block;
419
+ border-bottom: 1px solid $secondary-color;
420
+ color: $secondary-color;
421
+ &:hover {
422
+ background: none;
423
+ color: $color-primary-darkest;
424
+ background: rgba(1,1,1,.1);
425
+ border-bottom: 1px solid $secondary-color;
426
+ }
427
+ }
374
428
 
375
- h4 a {
376
- text-decoration: none;
377
- &:hover {
378
- border-bottom: 1px solid #fff;
379
- color: $color-gold;
429
+ ul.plain {
430
+ margin: 0;
431
+ padding: 0;
432
+ li {list-style: none; border-bottom: none;}
433
+ /*a {background: none;}*/
380
434
  }
381
- }
382
435
 
383
- .read-more {
384
- font-size: .5em;
385
- display: inline-block;
386
- border-bottom: 1px solid $secondary-color;
387
- color: $secondary-color;
388
- &:hover {
389
- background: none;
390
- color: $color-primary-darkest;
391
- background: rgba(1,1,1,.1);
392
- border-bottom: 1px solid $secondary-color;
436
+ .section {
437
+ padding: 4em 0 2em 0;
438
+ text-align: left;
393
439
  }
394
- }
395
440
 
396
- ul.plain {
397
- margin: 0;
398
- padding: 0;
399
- li {list-style: none; border-bottom: none;}
400
- /*a {background: none;}*/
401
- }
441
+ .section.main-menu {
442
+ padding: .5em .5em 2.35em .5em;
443
+ @media #{$small} {padding: 1em 0 1.5em 0;}
444
+ .navigation {
445
+ padding: 1.5em 0 0 0;
446
+ background: none;
447
+ ul li a {
448
+ h3 {border-bottom: none;}
449
+ }
450
+ }
451
+ }
402
452
 
403
- .section {
404
- padding: 4em 0 2em 0;
405
- text-align: left;
406
- }
407
453
 
408
- .section.main-menu {
409
- padding: .5em .5em 3.35em .5em;
410
- @media #{$small} {padding: 0 0 3em 0;}
411
- background: transparent;
412
- .navigation {
413
- padding: 1.5em 0 0 0;
414
- background: none;
415
- ul li a {
416
- h3 {border-bottom: none;}
417
- -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
454
+ .section.one, .section.two {
455
+ a {
456
+ color: $color-gray-dark;
457
+ &:hover {
458
+ color: $color-primary-darkest;
459
+ background: rgba(0,0,0,.15);
460
+ }
418
461
  }
419
462
  }
420
- }
421
463
 
464
+ .home #content .section h3.alternate {
465
+ margin: 0 0 2em 0 !important; padding: 0;
466
+ }
422
467
 
423
- .section.one, .section.two {
424
- background: none;
425
- a {
426
- &:hover {
427
- color: $color-gold;
428
- background: rgba(0,0,0,.2);
429
- }
468
+ .section.one {
469
+ padding: 0 0 1.5em 0;
470
+ @media #{$small} {padding: 2em 0 4em 0;}
430
471
  }
431
- }
432
472
 
433
- .section.one {
434
- padding: 0 0 1.5em 0;
435
- @media #{$small} {padding: 2em 0 4em 0;}
436
- }
473
+ .section.two {
474
+ padding: 2em 0;
475
+ a, h3 {color: #fff;}
476
+ h3 {border-bottom: none;}
477
+ background: rgba(0,0,0,.1);
478
+ }
437
479
 
438
- .section.two {
439
- padding: 2em 0;
440
- a, h3 {color: #fff;}
441
- h3 {border-bottom: none;}
442
- background: rgba(0,0,0,.1);
480
+ .section.three {
481
+ background: #fff;
482
+ padding: 5em 0;
483
+ h2, h3, h4, h5, h6, p, li {color: #444;}
484
+ h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
485
+ a {color: $color-primary-darkest;}
486
+ }
443
487
  }
444
488
 
445
- .section.three {
446
- background: #fff;
447
- padding: 5em 0;
448
- h2, h3, h4, h5, h6, p, li {color: #444;}
449
- h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
450
- a {color: $color-primary-darkest;}
451
- }
452
- }
453
489
 
454
490
  #content .section.primary {
455
- background: none;
456
- padding: 2em 0;
457
- background: $color-primary;
458
- h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
459
- p {color: rgba(255,255,255,1);}
460
- a {color: #fff;}
491
+ background: none;
492
+ padding: 2em 0;
493
+ background: $color-primary;
494
+ h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
495
+ p {color: rgba(255,255,255,1);}
496
+ a {color: #fff;}
461
497
  }
462
498
 
463
499
  #content .section.secondary {
@@ -470,20 +506,15 @@ background: $polar;
470
506
  }
471
507
 
472
508
  #content .section.quaternary {
473
- /*background: rgba($color-green, .83);*/
474
- background: #dcddde;
475
- h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
476
- h4 {
477
- font-weight: 700;
478
- }
479
- .cards {
480
- a {
481
- height:12em;
509
+ background: #dcddde;
510
+ h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
511
+ h4 {font-weight: 700;}
512
+ .cards {
513
+ a {
514
+ height:12em;
515
+ }
482
516
  }
483
- }
484
- .feature {
485
- background: none;
486
- }
517
+ .feature {background: none;}
487
518
  }
488
519
 
489
520
  #content .section.coda {
@@ -498,10 +529,7 @@ h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
498
529
  h2 {line-height: 1.2em;}
499
530
  }
500
531
 
501
- #content .section .feature {
502
- min-height: 11em;
503
-
504
- }
532
+ #content .section .feature { min-height: 11em;}
505
533
 
506
534
  #content .panel {
507
535
  background: $color-gray-lightest;
@@ -510,20 +538,17 @@ margin-bottom: 1.5em;
510
538
  clear: both;
511
539
  }
512
540
 
513
- #content .actions {padding: 1em 0;}
514
-
515
541
  #content .section.do {
516
- background: #efefef;
517
- padding: 2em 0;
518
-
519
- h2, h3, h4, h5, h6, p, li {color: #444;}
520
- h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
521
- a {color: #fff;}
522
- a.usa-button-primary {background: $color-green;}
542
+ background: #efefef;
543
+ padding: 2em 0;
544
+ h2, h3, h4, h5, h6, p, li {color: #444;}
545
+ h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
546
+ a {color: #fff;}
547
+ a.usa-button-primary {background: $color-green;}
523
548
  }
524
549
 
525
- #content .main {
526
- a.usa-button-primary.start {background: $color-green; text-decoration: none;}
550
+ #content {
551
+ a.usa-button-primary.start {background: $color-green; text-decoration: none;}
527
552
  }
528
553
 
529
554
  #content .section.secondary,
@@ -568,42 +593,21 @@ text-align: left;
568
593
  }
569
594
 
570
595
 
571
- // Iconic SVG icons
572
-
573
- .icon {
574
- display: inline-block;
575
- margin: 10px;
576
- width: 16px;
577
- height: 16px;
578
- }
579
-
580
- .icon-account-login {
581
- fill: #f00;
582
- }
583
-
584
- .icon {
585
- color: red;
586
- fill: red;
587
- }
588
-
589
-
590
596
  // Breadcrumbs
591
597
 
592
598
  #content ul.breadcrumbs {
593
- background: none;
594
- border: none;
595
- h2 {font-size: 1em;}
596
- display: block;
597
- padding: 0;
598
- @media #{$small} {margin: 0 0 1em 0;}
599
- border-radius: 0;
600
- border-radius: none;
601
- -webkit-border-radius: 0;
602
-
599
+ background: none;
600
+ border: none;
601
+ margin: 0 0 1em 0;
602
+ h2 {font-size: 1em;}
603
+ padding: 0;
604
+ @media #{$small} {margin: 0 0 1em 0;}
605
+ border-radius: 0;
606
+ border-radius: none;
607
+ -webkit-border-radius: 0;
603
608
 
604
- li {
609
+ li {
605
610
  text-transform: none;
606
- display: block;
607
611
  margin: .25em 0;
608
612
  padding: .1em;
609
613
  display: inline-block;
@@ -615,37 +619,33 @@ li {
615
619
  &:hover {border-bottom: none; text-decoration: none;}
616
620
  &.parent {
617
621
  a {background: none;}
618
- display: block;
619
622
  padding-top: .5em;
620
623
  margin: 0 0 .75em 0;
621
624
  @media #{$small} {display: inline-block;}
622
625
 
623
626
  &:before {content: none; vertical-align: middle;}
624
627
  &:after {content:" › "; display: inline-block; color: #fff; padding: 0 .5em;}
628
+ }
625
629
 
630
+ &.active {
631
+ background: $color-gold;
632
+ color: #000;
633
+ font-family: $roboto-slab;
634
+ font-weight: 400;
635
+ margin: .5em 0;
636
+ padding: .2em;
637
+ font-size: 1.35em;
638
+ @media #{$medium} {font-size: 1.8em;}
639
+ &:before {content: ""; padding: 0; margin: 0;}
640
+ }
641
+ }
642
+ a {
643
+ border-bottom: 3px solid #fff;
644
+ background: none;
645
+ text-decoration: none !important;
646
+ color: #fff;
647
+ &:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
626
648
  }
627
-
628
- &.active {
629
- background: $color-gold;
630
- color: #000;
631
- font-family: $roboto-slab;
632
- font-weight: 400;
633
- margin: .5em 0;
634
- padding: .2em;
635
- font-size: 1.35em;
636
- @media #{$medium} {font-size: 1.8em;}
637
- &:before {content: ""; padding: 0; margin: 0;}
638
- }
639
-
640
-
641
- }
642
- a {
643
- border-bottom: 3px solid #fff;
644
- background: none;
645
- text-decoration: none !important;
646
- color: #fff;
647
- &:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
648
- }
649
649
  }
650
650
 
651
651
  // General List Styles
@@ -685,6 +685,13 @@ li {
685
685
 
686
686
  // Tables
687
687
  table {
688
+
689
+ caption {
690
+ text-align: left;
691
+ padding: 0 0 .25em 0;
692
+ font-weight: bold;
693
+ font-size: 1.25em;
694
+ }
688
695
  border: 0;
689
696
  text-align: left;
690
697
  @media #{$small-only} {
@@ -772,14 +779,6 @@ li {
772
779
 
773
780
  // Navigation
774
781
 
775
- #content.interior .section-nav {
776
- padding: 1em 0 2em 0;
777
- ul.small-block-grid-1 {
778
- h2, h3, h4, h5, h6 {
779
- }
780
- }
781
- }
782
-
783
782
  #content.interior .navigation,
784
783
  #content #playbook .navigation {
785
784
  padding: 1em 0;
@@ -804,7 +803,7 @@ li {
804
803
  ul.cards li {
805
804
  margin: 0;
806
805
  height: auto;
807
- h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 600; font-family: $font-sans; font-size: 1.35em;}
806
+ h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 700; font-family: $font-sans; font-size: 1.35em;}
808
807
  h4 {font-size: 1.3em;}
809
808
  border-bottom: 1px solid rgba(0,0,0,.2);
810
809
  &:last-of-type { border-bottom: none;}
@@ -825,7 +824,6 @@ li {
825
824
  }
826
825
  }
827
826
 
828
-
829
827
  body.home .navigation, body.fourohfour .navigation {
830
828
  background: none;
831
829
  padding: 3em 0;
@@ -858,75 +856,61 @@ body.home .main-navigation {
858
856
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
859
857
  -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
860
858
  transform: rotate(45deg);
861
- transform-origin: 20% 40%;
862
-
863
- }
864
-
865
- // Cards
866
-
867
-
868
- ul.large-block-grid-3 >li {
859
+ transform-origin: 20% 40%;
869
860
 
870
861
  }
871
862
 
863
+ // Cards
864
+
872
865
  [class*="block-grid-"]>li {
873
- padding: .1em 0;
874
- @media #{$small} {padding: 0 0.625rem 1.25rem;}
866
+ padding: 0;
867
+ @media #{$small} {padding: 0 0.625rem 1.25rem 0.625rem;}
875
868
  }
876
869
 
877
-
878
870
  #content .cards {
879
871
  -webkit-backface-visibility: hidden;
880
872
  backface-visibility: hidden;
881
873
 
882
- a, .coming-soon {
883
- padding: .2em .5em;
884
- margin: 0 0 .4em 0;
885
- @media #{$small} {padding: .75em; margin: 0 0 .25em 0}
886
- @media #{$medium} {height: 9em;}
887
- border-radius: .2em;
888
- -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
889
- @media #{$small} {padding: .45em .75em; text-align: left;}
890
- width: 100%;
891
- color: #fff;
892
- display: block;
893
- font-weight: normal;
894
- text-decoration: none;
895
- h3 {
874
+ a, .coming-soon {
875
+ padding: 1em 1.15em;
876
+ margin: 0 -0.9375rem;
877
+ border-bottom: 2px solid rgba(255,255,255,.3);
878
+ color: #fff;
879
+ display: block;
880
+ font-weight: normal;
896
881
  text-decoration: none;
897
- margin: 0 0 .25em 0;
898
- @media #{$small} {margin: 0 0 1em 0;}
899
- }
900
- border-bottom: 4px solid rgba(255,255,255,0);
901
- background: $color-primary-darker;
882
+ background: $color-primary-darker;
883
+ -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
884
+ @media #{$small} {padding: .45em .75em; border-bottom: none; text-align: left; border-radius: .2em; margin: 0 0 .25em 0}
885
+ @media #{$medium} {height: 10em;}
886
+
887
+ h3 {
888
+ text-decoration: none;
889
+ margin: 0;
890
+ padding: 0;
891
+ @media #{$small} {margin: 0 0 1em 0;}
892
+ }
902
893
 
903
- -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
904
- h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
894
+ h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
905
895
 
906
- p {
907
- /* display: -webkit-inline-flex;
908
- display: inline-flex;
909
- */
910
- @media #{$small} {padding: 0m 0 1em 0;}
911
- line-height: 1.5em;
896
+ h4 {margin: 0; padding: 0;}
912
897
 
913
- @media #{$small} {margin: 0;}
914
- /*
915
- -webkit-align-self: flex-start;
916
- align-self: flex-start;
917
- */
918
- }
898
+ p {
899
+ @media #{$small} {padding: 0m 0 1em 0;}
900
+ line-height: 1.5em;
901
+ @media #{$small} {margin: 0;}
902
+ }
919
903
 
920
- &:hover, &:active, &:focus {
921
- background: $color-primary;
922
- -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
923
- }
904
+ &:hover, &:active, &:focus {
905
+ background: $color-primary;
906
+ -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
907
+ }
924
908
 
925
- h2, h3, h4, h5, h6 {padding: 0 0 .25em 0; margin: 0; color: #fff; display: block; clear: both; width: 100%;}
909
+ h2, h3, h4, h5, h6 {padding: 0 0 .25em 0; margin: 0; color: #fff; display: block; clear: both; width: 100%;}
926
910
 
927
- &:hover div {
928
- a {color: $color-gold; p {color: $color-gold;}}
929
- }
911
+ &:hover div {
912
+ a {color: $color-gold; p {color: $color-gold;}}
913
+ }
930
914
  }
931
915
 
932
916
  .coming-soon {
@@ -1160,10 +1144,15 @@ body.page-playbook {
1160
1144
  margin: 0;
1161
1145
  background: darken($color-primary-darkest, 02);
1162
1146
 
1147
+ .text-right {
1148
+ text-align: right;
1149
+ }
1163
1150
 
1164
- .small-block-grid-1 {
1165
- li {padding: 0; margin: 0;}
1166
- }
1151
+ .small-block-grid-1 {
1152
+ li {padding: 0; margin: 0;}
1153
+ }
1154
+
1155
+ a.usa-button {text-decoration: none; margin-bottom: 1em;}
1167
1156
 
1168
1157
  .usa-social-links a {
1169
1158
  border-bottom: none;
@@ -1172,6 +1161,7 @@ body.page-playbook {
1172
1161
  border-bottom: none;
1173
1162
  }
1174
1163
  }
1164
+
1175
1165
  ul {
1176
1166
  margin: 0;
1177
1167
  padding: .5em 0;
@@ -1186,19 +1176,15 @@ body.page-playbook {
1186
1176
  li, p, a {
1187
1177
  color: #fff;
1188
1178
  font-size: 1em;
1189
- &:before {
1190
- content: none;
1191
- }
1192
1179
  }
1193
1180
 
1194
1181
  a {
1195
1182
  text-decoration: underline;
1196
1183
  display: block;
1197
1184
  background: none;
1198
- padding: 0;
1199
1185
  font-weight: 400;
1200
1186
  @media #{$small} {display: inline-block; margin: .25em 0;}
1201
- &:hover {color:#fff;}
1187
+ &:hover {color: $color-gold;}
1202
1188
  &.contact, &.blog {
1203
1189
  padding: .65em; font-size: 1em; text-align: center; border: 2px solid $secondary-color;
1204
1190
  @media #{$small} {margin: 1.5em auto; display: inline-block;}
@@ -1234,7 +1220,7 @@ a {
1234
1220
  background: rgba(0,0,0,.055);
1235
1221
  }
1236
1222
  .footer-seal {
1237
- background:image-url("design/seal/seal-footer.png") no-repeat;
1223
+ background: image-url("design/seal/seal-footer.png") no-repeat;
1238
1224
  text-indent:-325px;
1239
1225
  overflow: hidden;
1240
1226
 
@@ -1254,6 +1240,7 @@ a {
1254
1240
  padding: 1.75em 0;
1255
1241
  }
1256
1242
  }
1243
+
1257
1244
  .footer-crisis {
1258
1245
  background:$color-gold;
1259
1246
  margin: 1.625rem 0;
@@ -1281,13 +1268,13 @@ a {
1281
1268
  }
1282
1269
  ul.final-list {
1283
1270
  text-align: center;
1284
- font-size: .8em;
1271
+ @media #{$large} {text-align: left;}
1272
+ font-size: 1em;
1285
1273
  padding: 1.5em 0 0 0;
1286
1274
  width: 100%;
1287
1275
  border-bottom: none !important;
1288
1276
  display: block;
1289
1277
  margin: 0 auto;
1290
- @media #{$medium} {font-size: .9em;}
1291
1278
 
1292
1279
  &:after {
1293
1280
  visibility: hidden;
@@ -1308,8 +1295,8 @@ ul.final-list {
1308
1295
  }
1309
1296
  &:after {
1310
1297
  content:"|";
1311
- padding: 0 .15em;
1312
- display: inline;
1298
+ padding: 0 .2em;
1299
+ opacity: .5;
1313
1300
  }
1314
1301
  &:last-of-type:after {
1315
1302
  padding:0;
@@ -1317,7 +1304,10 @@ ul.final-list {
1317
1304
  }
1318
1305
  a {
1319
1306
  display:inline-block;
1320
- padding: .35em;
1307
+ padding: .2em;
1308
+ &:hover {
1309
+ color: $color-gold;
1310
+ }
1321
1311
  }
1322
1312
  }
1323
1313
  }
@@ -1396,6 +1386,15 @@ li {
1396
1386
  }
1397
1387
  }
1398
1388
 
1389
+ .primary blockquote {
1390
+ margin: 0 0 1em 0;
1391
+ padding: 0 0 0 1em;
1392
+ border-left: 2px solid $color-gray-lighter;
1393
+ p {
1394
+ color: $color-primary-darker;
1395
+ }
1396
+ }
1397
+
1399
1398
  body.index, body.page-playbook {
1400
1399
  .footer {
1401
1400
  // background: $color-primary-darkest url(../img/design/seal/seal.png) bottom center no-repeat;
@@ -1492,10 +1491,6 @@ a {color: #fff; background: none;}
1492
1491
  padding: 1.25em 0 1.5em 0;
1493
1492
  border-top: none;
1494
1493
  background: $color-primary-darker;
1495
-
1496
- .usa-button {
1497
- font-size: .9em;
1498
- }
1499
1494
  }
1500
1495
 
1501
1496
  .feedback {
@@ -1506,21 +1501,14 @@ a {color: #fff; background: none;}
1506
1501
  @media #{$medium-up} {
1507
1502
  right:3em;
1508
1503
  vertical-align: middle;
1509
- top: 2em;
1504
+ }
1505
+ a {
1506
+ opacity: 0.6;
1510
1507
  }
1511
1508
  }
1512
1509
  .message {
1513
1510
  font-size:.95rem;
1514
1511
  font-weight: 700;
1515
- span {
1516
- background: image-url("design/icons/wrench.png") center left no-repeat;
1517
- background-position: 0 4px;
1518
- background-repeat: no-repeat;
1519
- background-size: 16px 14px;
1520
- display:inline-block;
1521
- padding-left: 1.5em;
1522
-
1523
- }
1524
1512
  p {
1525
1513
  font-size: .9rem;
1526
1514
  font-weight: 300;
@@ -1541,69 +1529,6 @@ a {color: #fff; background: none;}
1541
1529
 
1542
1530
  // Search
1543
1531
 
1544
- #search_form {
1545
- input[type="submit"] {
1546
- font-size: 16px;
1547
- }
1548
- }
1549
- .reveal-modal {
1550
- padding: 0px;
1551
- }
1552
- #trigger-overlay-button button {
1553
- font-size: 16px;
1554
- padding: .5em;
1555
- }
1556
-
1557
- button#overlay-close-button {
1558
- border-radius: 0;
1559
- display: block;
1560
- width: 100% !important;
1561
- margin: 0;
1562
- width: auto;
1563
- background: #0071bc;
1564
- color: #fff;
1565
- }
1566
-
1567
- .overlay {
1568
- z-index: 10000;
1569
- }
1570
- .search-button {
1571
- margin: 0.1em .5em 0 0;
1572
- padding: 0;
1573
- float: right;
1574
- a {
1575
- line-height: 1em;
1576
- display: inline-block;
1577
- padding: .41em;
1578
- font-size: .85em;
1579
- border-radius: .2em;
1580
- text-decoration: none;
1581
- background: $color-primary;
1582
- color: #fff;
1583
- }
1584
- }
1585
-
1586
- .reveal-modal #search_form {
1587
- margin-bottom: 1em;
1588
- }
1589
-
1590
- .reveal-modal .close-reveal-modal {
1591
- font-size: 1em;
1592
- clear: both;
1593
- text-decoration: none;
1594
- color: $color-gray-dark;
1595
- text-align: center;
1596
- margin: 1em 0;
1597
- position: relative;
1598
- top: auto;
1599
- display: block;
1600
- padding: 1em 0;
1601
- right: auto;
1602
- width: 100%;
1603
- bottom: auto;
1604
- }
1605
-
1606
-
1607
1532
  #search_form {
1608
1533
  padding: 1.1em 0;
1609
1534
  text-align: right;
@@ -2019,7 +1944,7 @@ li {
2019
1944
  &.step.nine
2020
1945
  {
2021
1946
  &:before {
2022
- background:white image-url("icons/SVG/loop2.svg")center center no-repeat;
1947
+ background:white url(../images/icons/SVG/loop2.svg)center center no-repeat;
2023
1948
  display:inline-block;
2024
1949
  width:3.4em;
2025
1950
  height:2.2em;
@@ -2093,34 +2018,7 @@ li {
2093
2018
  background: image-url("design/playbook/discover-process.svg") 40% center no-repeat;
2094
2019
  }
2095
2020
  }
2096
- .has-tip {
2097
- background: none!important;
2098
- border-bottom: none!important;
2099
- i {
2100
- background: image-url("icons/info-circle.png"); /* IE svg fallback */
2101
- background-image: image-url("icons/SVG/info-circle.svg");
2102
- display: inline-block;
2103
- -webkit-background-size: 20px 20px;
2104
- background-size: 20px 20px;
2105
- width: 20px;
2106
- height: 20px;
2107
- position: relative;
2108
- top:.3em
2109
- }
2110
- }
2111
- .tooltip {
2112
- background: #000044;
2113
- &>.nub {
2114
- border-color: transparent transparent #000044 transparent!important;
2115
- @media #{$small-only} {
2116
- border:none!important
2117
- }
2118
- }
2119
- @media #{$small-only} {
2120
- left:auto!important;
2121
- max-width: 100%!important;
2122
- }
2123
- }
2021
+
2124
2022
  .tap-to-close {
2125
2023
  color:$color-gold!important;
2126
2024
  font-size: .8em!important;
@@ -2297,103 +2195,127 @@ button[class*="usa-button-"] {
2297
2195
  font-size: .8em;
2298
2196
  color: #444;
2299
2197
  background: #fff;
2198
+ &.minimal {
2199
+ border-top: none;
2200
+ padding: .25em 0;
2201
+ }
2202
+ }
2203
+
2204
+ // Info block
2205
+
2206
+ .info-block {
2207
+ p {
2208
+ padding: 0;
2209
+ margin: 0;
2210
+ }
2300
2211
  }
2301
2212
 
2302
2213
  body.home .disclaimer, body.page-playbook .disclaimer {
2303
2214
  display: none;
2304
2215
  }
2305
-
2306
-
2307
2216
  // Mobile menu
2308
2217
 
2309
2218
  /* Overlay style */
2310
- .overlay {
2311
- position: fixed;
2312
- width: 100%;
2313
- height: 100%;
2314
- top: 0;
2315
- left: 0;
2316
- z-index: 800;
2317
- background: rgba($color-primary-darkest, .95);
2318
- }
2319
2219
 
2320
- /* Overlay closing cross */
2321
- .overlay .overlay-close {
2322
- border: none;
2323
- outline: none;
2324
- z-index: 100;
2325
- }
2220
+ @media #{$small-only} {
2326
2221
 
2222
+ .overlay {
2223
+ position: fixed;
2224
+ width: 100%;
2225
+ height: 100%;
2226
+ top: 0;
2227
+ left: 0;
2228
+ z-index: 800;
2229
+ background: rgba($color-primary-darkest, .95);
2230
+ }
2327
2231
 
2328
- button#trigger-overlay {
2329
- padding: .5em;
2330
- margin-top: 0;
2331
- border-radius: .15em;
2332
- }
2232
+ /* Overlay closing cross */
2233
+ .overlay .overlay-close {
2234
+ display: block;
2235
+ border: none;
2236
+ outline: none;
2237
+ z-index: 100;
2238
+ }
2333
2239
 
2334
- /* Effects */
2335
- .overlay-fullscreen {
2336
- opacity: 0;
2337
- visibility: hidden;
2338
- -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
2339
- transition: opacity 0.5s, visibility 0s 0.5s;
2340
2240
 
2341
- button {
2342
- border-radius: 0;
2343
- display: block;
2344
- width: 100% !important;
2345
- margin: 0;
2346
- width: auto;
2347
- background: $color-primary;
2241
+ button#trigger-overlay {
2242
+ padding: .5em;
2243
+ margin-top: 0;
2244
+ border-radius: .15em;
2245
+ }
2246
+
2247
+ /* Effects */
2248
+ .overlay-fullscreen {
2249
+ opacity: 0;
2250
+ visibility: hidden;
2251
+ -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
2252
+ transition: opacity 0.5s, visibility 0s 0.5s;
2253
+
2254
+ button {
2255
+ border-radius: 0;
2256
+ display: block;
2257
+ width: 100% !important;
2258
+ margin: 0;
2259
+ width: auto;
2260
+ background: $color-primary;
2261
+
2262
+ }
2263
+
2264
+ input[type="text"] {
2265
+ border-radius: 3px 0 0 3px;
2266
+ -moz-border-radius: 3px 0 0 3px;
2267
+ -webkit-border-radius: 3px 0 0 3px;
2268
+ -webkit-appearance: none;
2269
+ }
2348
2270
 
2349
2271
  }
2350
2272
 
2351
- input[type="text"] {
2352
- border-radius: 3px 0 0 3px;
2353
- -moz-border-radius: 3px 0 0 3px;
2354
- -webkit-border-radius: 3px 0 0 3px;
2355
- -webkit-appearance: none;
2273
+ .overlay-fullscreen.open {
2274
+ opacity: 1;
2275
+ visibility: visible;
2276
+ -webkit-transition: opacity 0.5s;
2277
+ transition: opacity 0.5s;
2278
+ .columns {
2279
+ padding: 0;
2280
+ }
2356
2281
  }
2357
2282
 
2358
- }
2283
+ .overlay-fullscreen .menu {
2284
+ -webkit-perspective: 1200px;
2285
+ perspective: 1200px;
2286
+ padding: 1em 1em;
2287
+ }
2359
2288
 
2360
- .overlay-fullscreen.open {
2361
- opacity: 1;
2362
- visibility: visible;
2363
- -webkit-transition: opacity 0.5s;
2364
- transition: opacity 0.5s;
2365
- }
2289
+ .overlay-fullscreen form {
2290
+ opacity: 0.4;
2291
+ -webkit-transform: translateY(-25%) rotateX(35deg);
2292
+ transform: translateY(-25%) rotateX(35deg);
2293
+ -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
2294
+ transition: transform 0.5s, opacity 0.5s;
2295
+ }
2366
2296
 
2367
- .overlay-fullscreen .menu {
2368
- -webkit-perspective: 1200px;
2369
- perspective: 1200px;
2370
- padding: 1em 1em;
2371
- }
2297
+ .overlay-fullscreen.open form {
2298
+ opacity: 1;
2299
+ -webkit-transform: rotateX(0deg);
2300
+ transform: rotateX(0deg);
2301
+ }
2372
2302
 
2373
- .overlay-fullscreen form {
2374
- opacity: 0.4;
2375
- -webkit-transform: translateY(-25%) rotateX(35deg);
2376
- transform: translateY(-25%) rotateX(35deg);
2377
- -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
2378
- transition: transform 0.5s, opacity 0.5s;
2379
- }
2303
+ .overlay-fullscreen.close form {
2304
+ -webkit-transform: translateY(25%) rotateX(-35deg);
2305
+ transform: translateY(25%) rotateX(-35deg);
2306
+ }
2380
2307
 
2381
- .overlay-fullscreen.open form {
2382
- opacity: 1;
2383
- -webkit-transform: rotateX(0deg);
2384
- transform: rotateX(0deg);
2385
- }
2308
+ @media screen and (max-height: 30.5em) {
2309
+ .overlay form {
2310
+ height: 70%;
2311
+ }
2386
2312
 
2387
- .overlay-fullscreen.close form {
2388
- -webkit-transform: translateY(25%) rotateX(-35deg);
2389
- transform: translateY(25%) rotateX(-35deg);
2390
- }
2313
+ }
2391
2314
 
2392
- @media screen and (max-height: 30.5em) {
2393
- .overlay form {
2394
- height: 70%;
2395
- }
2315
+ }
2396
2316
 
2317
+ .overlay-close {
2318
+ display: none;
2397
2319
  }
2398
2320
 
2399
2321
  // List overrides
@@ -2411,30 +2333,241 @@ a.vets-app {
2411
2333
  padding: 0 0 0 .5em !important;
2412
2334
  }
2413
2335
 
2414
- // Tooltips
2336
+ // Tooltip
2337
+ button.js-simple-tooltip {
2338
+ font-family: 'Courier New', 'Courier', serif;
2339
+ font-weight:bold;
2340
+ cursor: pointer;
2341
+ display:inline-block;
2342
+ padding: 0;
2343
+ border-radius: 1.75em;
2344
+ background: $color-gray-dark;
2345
+ margin: 0 0 0 .5em;
2346
+ color: white;
2347
+ height: 1.75em;
2348
+ font-size: .8em;
2349
+ width: 1.75em;
2350
+ text-align: center;
2351
+ vertical-align: middle;
2352
+ }
2353
+ .simpletooltip[aria-hidden="true"] {
2354
+ display: none;
2355
+ }
2356
+ .simpletooltip_container {
2357
+ position: relative;
2358
+ }
2359
+ .simpletooltip {
2360
+ position: absolute;
2361
+ z-index: 777;
2362
+ width: 11em;
2363
+ border-radius: .3em;
2364
+ background: $color-gray-dark;
2365
+ color: $color-white;
2366
+ padding: .6em;
2367
+ text-align: left;
2368
+ font-size: 1em;
2369
+ font-weight: 300;
2370
+ line-height: 1.3;
2371
+ }
2372
+ .simpletooltip {
2373
+ right: auto;
2374
+ left: 100%;
2375
+ margin-left: .8em;
2376
+ }
2377
+ .simpletooltip:before {
2378
+ border-bottom: 10px solid transparent; /* left arrow slant */
2379
+ border-top: 10px solid transparent; /* right arrow slant */
2380
+ border-right: 10px solid $color-gray-dark;
2381
+ content:"";
2382
+ font-size: 0;
2383
+ position: absolute;
2384
+ top: 3px;
2385
+ left: 0px;
2386
+ line-height: 0;
2387
+ margin-left: -10px;
2388
+ width:0;
2389
+ height:0
2390
+ }
2391
+ @media (max-width: 40.063em) {
2392
+ .simpletooltip {
2393
+ top: 100%;
2394
+ left: 45%;
2395
+ right: 0;
2396
+ margin: 0;
2397
+ margin-top: .7em;
2398
+ margin-left: -5em;
2399
+ }
2400
+ .simpletooltip:before {
2401
+ top: -10px;
2402
+ right: auto;
2403
+ left: 45%;
2404
+ margin-left: -5px;
2405
+ margin-top: -10px;
2406
+ border: 10px solid transparent;
2407
+ border-bottom: 10px solid rgba( 0, 0, 0, .9 );
2408
+ }
2409
+ }
2410
+
2411
+ // html.no-touchevents {
2412
+ // .touch {display: none;}
2413
+ // .no-touch {display: block;}
2414
+ // }
2415
+
2416
+ // html.touchevents {
2417
+ // .touch {display: block;}
2418
+ // .no-touch {display: none;}
2419
+ // }
2420
+
2421
+ // Animate CSS components
2422
+
2423
+
2424
+ .animated {
2425
+ -webkit-animation-duration: 1.25s;
2426
+ animation-duration: 1.25s;
2427
+ -webkit-animation-fill-mode: both;
2428
+ animation-fill-mode: both;
2429
+ }
2430
+
2431
+ .animated.hinge {
2432
+ -webkit-animation-duration: 2s;
2433
+ animation-duration: 2s;
2434
+ }
2435
+
2436
+ @-webkit-keyframes bounce {
2437
+ 0%, 20%, 50%, 80%, 100% {
2438
+ -webkit-transform: translateY(0);
2439
+ transform: translateY(0);
2440
+ }
2441
+
2442
+ 40% {
2443
+ -webkit-transform: translateY(-30px);
2444
+ transform: translateY(-30px);
2445
+ }
2446
+
2447
+ 60% {
2448
+ -webkit-transform: translateY(-15px);
2449
+ transform: translateY(-15px);
2450
+ }
2451
+ }
2452
+
2453
+ @keyframes bounce {
2454
+ 0%, 20%, 50%, 80%, 100% {
2455
+ -webkit-transform: translateY(0);
2456
+ -ms-transform: translateY(0);
2457
+ transform: translateY(0);
2458
+ }
2459
+
2460
+ 40% {
2461
+ -webkit-transform: translateY(-30px);
2462
+ -ms-transform: translateY(-30px);
2463
+ transform: translateY(-30px);
2464
+ }
2465
+
2466
+ 60% {
2467
+ -webkit-transform: translateY(-15px);
2468
+ -ms-transform: translateY(-15px);
2469
+ transform: translateY(-15px);
2470
+ }
2471
+ }
2472
+
2473
+ .bounce {
2474
+ -webkit-animation-name: bounce;
2475
+ animation-name: bounce;
2476
+ }
2477
+
2478
+ @-webkit-keyframes flash {
2479
+ 0%, 50%, 100% {
2480
+ opacity: 1;
2481
+ }
2482
+
2483
+ 25%, 75% {
2484
+ opacity: 0;
2485
+ }
2486
+ }
2487
+
2488
+ @keyframes flash {
2489
+ 0%, 50%, 100% {
2490
+ opacity: 1;
2491
+ }
2492
+
2493
+ 25%, 75% {
2494
+ opacity: 0;
2495
+ }
2496
+ }
2497
+
2498
+
2499
+
2500
+
2501
+ @-webkit-keyframes fadeIn {
2502
+ 0% {
2503
+ opacity: 0;
2504
+ }
2505
+
2506
+ 100% {
2507
+ opacity: 1;
2508
+ }
2509
+ }
2510
+
2511
+ @keyframes fadeIn {
2512
+ 0% {
2513
+ opacity: 0;
2514
+ }
2515
+
2516
+ 100% {
2517
+ opacity: 1;
2518
+ }
2519
+ }
2520
+
2521
+ .fadeIn {
2522
+ -webkit-animation-name: fadeIn;
2523
+ animation-name: fadeIn;
2524
+ }
2525
+
2526
+ @-webkit-keyframes fadeInDown {
2527
+ 0% {
2528
+ opacity: 0;
2529
+ -webkit-transform: translateY(-20px);
2530
+ transform: translateY(-20px);
2531
+ }
2415
2532
 
2416
- .tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
2417
- .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
2533
+ 100% {
2534
+ opacity: 1;
2535
+ -webkit-transform: translateY(0);
2536
+ transform: translateY(0);
2537
+ }
2538
+ }
2418
2539
 
2419
- /* Rounded corners */
2420
- .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
2540
+ @keyframes fadeInDown {
2541
+ 0% {
2542
+ opacity: 0;
2543
+ -webkit-transform: translateY(-20px);
2544
+ -ms-transform: translateY(-20px);
2545
+ transform: translateY(-20px);
2546
+ }
2421
2547
 
2422
- /* Uncomment for shadow */
2423
- /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
2548
+ 100% {
2549
+ opacity: 1;
2550
+ -webkit-transform: translateY(0);
2551
+ -ms-transform: translateY(0);
2552
+ transform: translateY(0);
2553
+ }
2554
+ }
2424
2555
 
2425
- .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
2556
+ .fadeInDown {
2557
+ -webkit-animation-name: fadeInDown;
2558
+ animation-name: fadeInDown;
2559
+ }
2426
2560
 
2427
- /* Rules to colour arrows */
2428
- .tipsy-arrow-n { border-bottom-color: #000; }
2429
- .tipsy-arrow-s { border-top-color: #000; }
2430
- .tipsy-arrow-e { border-left-color: #000; }
2431
- .tipsy-arrow-w { border-right-color: #000; }
2561
+ @-webkit-keyframes fadeInDownBig {
2562
+ 0% {
2563
+ opacity: 0;
2564
+ -webkit-transform: translateY(-2000px);
2565
+ transform: translateY(-2000px);
2566
+ }
2432
2567
 
2433
- .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
2434
- .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
2435
- .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
2436
- .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
2437
- .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
2438
- .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
2439
- .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
2440
- .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
2568
+ 100% {
2569
+ opacity: 1;
2570
+ -webkit-transform: translateY(0);
2571
+ transform: translateY(0);
2572
+ }
2573
+ }