default.css revision a0a6d3220f83251ae632fa4ed6555bb9040af3fa 
1/* color definitions */
2/* 16 column layout */
3/* clearfix idiom */
4/* common mixins */
5/* page layout + top-level styles */
6::selection {
7  background-color: #0099cc;
8  color: #fff; }
9::-webkit-selection {
10  background-color: #0099cc;
11  color: #fff; }
12::-moz-selection {
13  background-color: #0099cc;
14  color: #fff; }
15
16html, body {
17  height: 100%;
18  margin: 0;
19  padding: 0;
20  background-color: #fff;
21  -webkit-font-smoothing: antialiased;
22  -moz-osx-font-smoothing: grayscale;
23  /* prevent subpixel antialiasing, which thickens the text */
24  /* text-rendering: optimizeLegibility; */
25  /* turned off ligatures due to bug 5945455 */ }
26
27body {
28  color: #515151;
29  color: rgba(0, 0, 0, .68);
30  font: 14px/24px Roboto, sans-serif;
31  font-weight: 400;
32  letter-spacing:.1;
33  padding: 0 20px;
34}
35
36@media (max-width: 719px) {
37  html {
38    /* Disable accidental horizontal overflow. */
39    overflow-x: hidden;
40  }
41
42  body {
43    padding-left: 10px;
44    padding-right: 10px;
45  }
46}
47
48#page-container {
49  width: 940px;
50  margin: 0 40px; }
51
52#page-header {
53  height: 80px;
54  margin-bottom: 20px;
55  font-size: 48px;
56  line-height: 48px;
57  font-weight: 100;
58  padding-left: 10px; }
59  #page-header a {
60    display: block;
61    position: relative;
62    top: 20px;
63    text-decoration: none;
64    color: #555555 !important; }
65
66#main-row {
67  display: inline-block; }
68  #main-row:after {
69    content: ".";
70    display: block;
71    height: 0;
72    clear: both;
73    visibility: hidden; }
74  * html #main-row {
75    height: 1px; }
76
77#page-footer {
78  margin-left: 190px;
79  margin-top: 80px;
80  color: #999999;
81  padding-bottom: 40px;
82  font-size: 12px;
83  line-height: 15px; }
84  #page-footer a {
85    color: #777777; }
86  #page-footer #copyright {
87    margin-bottom: 10px; }
88
89#nav-container {
90  width: 160px;
91  min-height: 10px;
92  margin-right: 20px;
93  float: left; }
94
95#devdoc-nav h2 {
96  border:0;
97}
98
99#devdoc-nav.fixed {
100  position: fixed;
101  margin:0;
102  top: 84px; /* sticky-header height + 20px gutter */
103}
104
105.dac-devdoc-toggle {
106  cursor: pointer;
107  padding: 8px 0;
108}
109
110.scroll-pane {
111  /* Match height of fixed parent. */
112  height: 100%;
113}
114
115#content {
116  width: 760px;
117  float: left; }
118
119
120/***** PREVIOUSLY style.css ******************/
121/* This should be close to the top, so it is easier to override. */
122[dir='rtl'] {
123  direction: rtl;
124}
125html {
126  line-height: 20px;
127}
128pre, table, input, textarea, code {
129  font-size: 1em;
130}
131address, abbr, cite {
132  font-style: normal;
133}
134[dir='rtl'] th {
135  text-align: right;
136}
137html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q,
138html[lang^=zh] blockquote, html[lang^=zh] q {
139  font-style: normal;
140}
141q {
142  font-style: italic;
143}
144fieldset, iframe, img {
145  border: 0;
146}
147img {
148  border: none;
149  -ms-interpolation-mode: bicubic;
150  max-width: 100%;
151  vertical-align: middle;
152}
153video {
154  max-width: 100%;
155  object-fit: cover;
156}
157q {
158  quotes: none;
159}
160sup, sub {
161  font-size: 11px;
162  line-height: 0;
163}
164
165table, fieldset {
166  margin: 0;
167}
168/* Biggest type */
169.display-1 {
170  font-size: 56px;
171  line-height: 68px;
172}
173@media (max-width: 719px) {
174  .display-1 {
175    font-size: 44px;
176    line-height: 56px;
177  }
178}
179h1, h2, h3 {
180  color: #212121;
181  color: rgba(0, 0, 0, .87);
182}
183h1 {
184  font-size: 44px;
185  line-height: 56px;
186  font-weight: 300;
187  margin: 0;
188  padding: 24px 0 12px;
189}
190h1.short {
191  padding-right:320px;
192}
193@media (max-width: 719px) {
194  h1 {
195    font-size: 36px;
196    line-height: 48px;
197  }
198}
199h2 {
200  clear: left;
201  font-size: 28px;
202  font-weight: 400;
203  line-height: 32px;
204  margin: 0;
205  padding: 12px 0 16px;
206}
207h3 {
208  font-size: 24px;
209  line-height: 32px;
210  font-weight: 400;
211  margin: 0;
212  padding: 8px 0 12px;
213}
214h4 {
215  font-size: 18px;
216  line-height: 24px;
217  margin: 0;
218  padding: 4px 0 8px;
219  font-weight: 500;
220}
221h5, h6 {
222  font-size: 16px;
223  line-height: 24px;
224  margin: 0;
225  padding: 4px 0 8px;
226}
227th>h3 {
228  font-size:inherit;
229  line-height:inherit;
230  font-weight:inherit;
231  margin:0;
232  padding:0;
233  color:inherit;
234}
235hr { /* applied to the bottom of h2 elements */
236  height: 1px;
237  margin: 7px 0 12px;
238  border: 0;
239  background: rgba(0, 0, 0, 0.1);
240}
241h2[id], h3[id], h4[id], h5[id], h6[id] {
242  margin-top: -64px;
243  border-top: 64px solid transparent;
244  -webkit-background-clip: padding-box;
245  -moz-background-clip: padding;
246  background-clip: padding-box;
247}
248p, pre, table, form {
249  margin: 0 0 12px;
250}
251small {
252  font-size: 11.5px;
253  color: #000;
254}
255ul, ol {
256  margin: 0 0 15px 20px;
257  padding: 0;
258}
259[dir='rtl'] ul, [dir='rtl'] ol {
260  margin: 10px 30px 10px 10px;
261}
262ul ul, ul ol, ol ul, ol ol {
263  margin-bottom: 0;
264  margin-top: 0;
265}
266li {
267  margin: 0 0 12px;
268}
269dt {
270  margin: 24px 0 12px;
271}
272dd {
273  margin:0 0 10px 40px;
274}
275dd p,
276dd pre,
277dd ul,
278dd ol,
279dd dl {
280  margin-top:10px;
281}
282li p,
283li pre,
284li ul,
285li ol,
286li dl {
287  margin-top: 6px;
288  margin-bottom: 6px;
289}
290dl dd dl:first-child {
291  margin-top: 0;
292}
293pre strong, pre b, a strong, a b, a code {
294  color: inherit;
295}
296pre, code {
297  color: #060;
298  font: 13px/18px Consolas, "Liberation Mono", Menlo, Monaco, Courier, monospace;
299  -webkit-font-smoothing: subpixel-antialiased;
300  -moz-osx-font-smoothing: auto;
301}
302legend {
303  display: none;
304}
305a, .link-color {
306  color: #039BE5;
307  text-decoration: none;
308}
309a:focus, a:hover {
310  color: rgba(3, 155, 229, .7);
311  text-decoration: none;
312}
313a.white {
314  color: #fff;
315  text-decoration:underline;
316}
317a.white:hover, a.white:active {
318  color: #ccc;
319}
320strong, b {
321  font-weight: bold;
322}
323table {
324  border-collapse: collapse;
325  border-spacing: 0;
326  border:0;
327  margin: .5em 1em 1em 0;
328  width:100%; /* consistent table widths; within IE's quirks */
329  background-color:#f7f7f7;
330}
331th, td {
332  padding: 4px 12px;
333  vertical-align: top;
334  text-align: left;
335}
336td {
337  background-color:inherit;
338  border:solid 1px #DDD;
339}
340td *:last-child {
341  margin-bottom:0;
342}
343th {
344  background-color: #999;
345  color: #fff;
346  border:solid 1px #DDD;
347  font-weight: normal;
348}
349tr:first-of-type th:first-of-type:empty {
350  visibility: hidden;
351}
352
353a.external-link {
354  background:url('../images/styles/open_new_page.png') no-repeat 100% 50%;
355  padding-right:16px;
356}
357
358#jd-content img {
359  margin-bottom:15px;
360}
361
362em {
363  font-style: italic; }
364
365acronym,
366.tooltip-link {
367  border-bottom: 1px dotted #555555;
368  cursor: help; }
369
370acronym:hover,
371.tooltip-link:hover {
372  color: #7aa1b0;
373  border-bottom-color: #7aa1b0; }
374
375img.with-shadow,
376video.with-shadow {
377  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
378
379/* disclosures mixin */
380/* content layout */
381/* This grid is deprecated in favor of .cols and .col-X */
382.layout-content-row {
383  display: inline-block;
384  margin-bottom: 10px; }
385  * html .layout-content-row {
386    height: 1px; }
387
388.layout-content-col {
389  float: left;
390  margin-left: 20px; }
391  .layout-content-col:first-child {
392    margin-left: 0; }
393  .layout-content-col h3,
394  .layout-content-col h4 {
395    padding-top:0; }
396
397.layout-content-col.span-1 {
398  width: 40px; }
399
400.layout-content-col.span-2 {
401  width: 100px; }
402
403.layout-content-col.span-3 {
404  width: 160px; }
405
406.layout-content-col.span-4 {
407  width: 220px; }
408
409.layout-content-col.span-5 {
410  width: 280px; }
411
412.layout-content-col.span-6 {
413  width: 340px; }
414
415.layout-content-col.span-7 {
416  width: 400px; }
417
418.layout-content-col.span-8 {
419  width: 460px; }
420
421.layout-content-col.span-9 {
422  width: 520px; }
423
424.layout-content-col.span-10 {
425  width: 580px; }
426
427.layout-content-col.span-11 {
428  width: 640px; }
429
430.layout-content-col.span-12 {
431  width: 700px; }
432
433.layout-content-col.span-13 {
434  width: 760px; }
435
436.vspace.size-1 {
437  height: 10px; }
438
439.vspace.size-2 {
440  height: 20px; }
441
442.vspace.size-3 {
443  height: 30px; }
444
445.vspace.size-4 {
446  height: 40px; }
447
448.vspace.size-5 {
449  height: 50px; }
450
451.vspace.size-6 {
452  height: 60px; }
453
454.vspace.size-7 {
455  height: 70px; }
456
457.vspace.size-8 {
458  height: 80px; }
459
460.vspace.size-9 {
461  height: 90px; }
462
463.vspace.size-10 {
464  height: 100px; }
465
466.vspace.size-11 {
467  height: 110px; }
468
469.vspace.size-12 {
470  height: 120px; }
471
472.vspace.size-13 {
473  height: 130px; }
474
475.vspace.size-14 {
476  height: 140px; }
477
478.vspace.size-15 {
479  height: 150px; }
480
481.vspace.size-16 {
482  height: 160px; }
483
484.new,
485.new-child {
486  font-size: .78em;
487  font-weight: bold;
488  color: #ff3d3d;
489  vertical-align:top;
490  white-space:nowrap;
491}
492
493/* content header */
494.content-header {
495  position: relative;
496}
497.content-header:before,
498.content-header:after {
499  content: '';
500  display: table;
501  /* Clear heading margins, to make absolutely positioned nav a bit more predictable. */
502}
503.content-header.just-links {
504  margin-bottom:0;
505  padding-bottom:0;}
506
507.content-footer {
508  margin-top: 10px;
509  padding-top:10px;
510  width:100%; }
511
512.content-footer .col-9 {
513  margin-left:0;
514}
515.content-footer .col-4 {
516  margin-right:0;
517}
518.content-footer.wrap {
519  max-width:940px;
520}
521.content-footer .plus-container {
522  margin:5px 0 0;
523  text-align:right;
524  float:right;
525}
526
527a.back-link {
528    text-decoration: none;
529    text-transform: uppercase;
530}
531
532.content-header .paging-links {
533  position: absolute;
534  right: 0;
535  top: 8px;
536  width: 220px;
537}
538.paging-links {
539  position: relative;
540  min-height:30px; }
541  .paging-links a,
542  .training-nav-top a {
543    text-decoration: none; }
544    .training-nav-top .prev-page-link:before,
545    a.back-link:before {
546      content: '';
547      background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%;
548      width: 10px;
549      height: 10px;
550      display: inline-block;
551      margin-right: 5px; }
552    .training-nav-top .next-page-link:after,
553    .training-nav-top .start-class-link:after,
554    .training-nav-top .start-course-link:after,
555    .go-link:after {
556      content: '';
557      background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
558      width: 10px;
559      height: 10px;
560      display: inline-block;
561      margin-left: 5px; }
562    .prev-page-link.inline:before {
563      content: none; }
564    .next-page-link.inline:after {
565      content: none; }
566
567  .content-footer {
568    left:0;
569  }
570
571  .training-nav-top a {
572    border-bottom:0;
573    box-sizing: border-box;
574    color: inherit;
575    display:block;
576    float:left;
577    padding:10px 0;
578    line-height:30px;
579    text-align:center;
580    width: 50%;
581  }
582
583  .training-nav-top a.prev-page-link {
584    padding-left: 15px;
585    text-align: left;
586  }
587
588  .training-nav-top a.next-page-link {
589    padding-right: 15px;
590    text-align: right;
591  }
592
593  .paging-links a.disabled,
594  .training-nav-top a.disabled,
595  .content-footer a.disabled {
596    color:#bbb;
597  }
598
599  .paging-links a.disabled:hover,
600  .training-nav-top a.disabled:hover,
601  .content-footer a.disabled:hover {
602    cursor:default;
603    color:#bbb !important;
604  }
605
606  .training-nav-top a.start-class-link,
607  .training-nav-top a.start-course-link {
608    width:100%;
609  }
610
611  /* list of classes on course landing page */
612  ol.class-list {
613    counter-reset: class;
614    list-style: none;
615    margin: 60px 0 0;
616  }
617  ol.class-list>li {
618    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
619    margin: 0 0 20px;
620    overflow: hidden;
621  }
622  ol.class-list .title {
623    background: #00bcd4;
624    color: #fff;
625    display: block;
626    font-size: 20px;
627    font-weight: 500;
628    height: 32px;
629    padding: 52px 16px 12px;
630    position: relative;
631  }
632  ol.class-list .title:before {
633    border-bottom: 1px solid white;
634    box-sizing: border-box;
635    /* Disable the numbers for now, since vert few classes need to be taken in order. */
636    /* content: counter(class); */
637    counter-increment: class;
638    height: 40px;
639    left: 0;
640    padding: 10px 1px 0 5px;
641    position: absolute;
642    top: 0;
643    text-align: right;
644    min-width: 30px;
645  }
646  ol.class-list .title h2 {
647    color: currentColor;
648    font-size: inherit;
649    font-weight: inherit;
650    padding:0 0 10px;
651    display:block;
652    float:left;
653    width:675px;
654  }
655  ol.class-list .title span {
656    display:none;
657    float:left;
658    font-size:18px;
659    font-weight:bold;
660    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
661    width: 10px;
662    height: 32px;
663  }
664
665  ol.class-list .description {
666    box-sizing: border-box;
667    float:left;
668    display:block;
669    margin:0;
670    padding: 16px 10px 16px 16px;
671    width: 50%;
672  }
673  ol.class-list .description.article {
674    width: 550px;
675  }
676  ol.class-list ol {
677    box-sizing: border-box;
678    float: left;
679    list-style: none;
680    margin: 0;
681    padding: 16px 16px 16px 10px;
682    width: 50%;
683  }
684  ol.class-list .lessons li {
685    margin: 0 0 6px;
686    line-height: 16px;
687  }
688
689  /* Class colors */
690  ol.class-list li:nth-child(10n+1) .title {
691    background: #00bcd4;
692  }
693  ol.class-list li:nth-child(10n+2) .title {
694    background: #4db6ac;
695  }
696  ol.class-list li:nth-child(10n+3) .title {
697    background: #66bb6a;
698  }
699  ol.class-list li:nth-child(10n+4) .title {
700    background: #7cb342;
701  }
702  ol.class-list li:nth-child(10n+5) .title {
703    background: #afb42b;
704  }
705  ol.class-list li:nth-child(10n+6) .title {
706    background: #ffb300;
707  }
708  ol.class-list li:nth-child(10n+7) .title {
709    background: #ff7043;
710  }
711  ol.class-list li:nth-child(10n+8) .title {
712    background: #ec407a;
713  }
714  ol.class-list li:nth-child(10n+9) .title {
715    background: #ab47bc;
716  }
717  ol.class-list li:nth-child(10n+10) .title {
718    background: #7e57c2;
719  }
720
721  @media (max-width: 719px) {
722    ol.class-list ol,
723    ol.class-list .description {
724      float: none;
725      margin: 16px;
726      padding: 0;
727      width: auto;
728    }
729  }
730
731
732  .hide {
733    display:none !important;
734  }
735
736
737
738  /* inner-doc tabs w/ title */
739
740div#title-tabs-wrapper {
741  border-bottom:1px solid #ccc;
742  margin:20px 0 30px;
743}
744h1.with-title-tabs {
745  display:inline-block;
746  margin-bottom: -1px;
747  padding:0 60px 0 0;
748  border-bottom:1px solid #F9F9F9;
749}
750ul#title-tabs {
751  list-style:none;
752  padding:0;
753  height:29px;
754  margin:0;
755  font-size:16px;
756  line-height:26px;
757  display:inline-block;
758  vertical-align:bottom;
759}
760ul#title-tabs li {
761  display:block;
762  float:left;
763  margin-right:40px;
764  border-bottom: 3px solid transparent;
765}
766ul#title-tabs li.selected {
767  border-bottom: 3px solid #93C;
768}
769ul#title-tabs li a {
770  color:#333;
771}
772ul#title-tabs li a:hover,
773ul#title-tabs li a:active {
774  color:#039BE5 !important;
775}
776
777
778
779/* content body */
780@-webkit-keyframes glowheader {
781  from {
782    background-color: #33b5e5;
783    color: #000;
784    border-bottom-color: #000; }
785
786  to {
787    background-color: transparent;
788    color: #33b5e5;
789    border-bottom-color: #33b5e5; } }
790
791@-moz-keyframes glowheader {
792  from {
793    background-color: #33b5e5;
794    color: #000;
795    border-bottom-color: #000; }
796
797  to {
798    background-color: transparent;
799    color: #33b5e5;
800    border-bottom-color: #33b5e5; } }
801
802@keyframes glowheader {
803  from {
804    background-color: #33b5e5;
805    color: #000;
806    border-bottom-color: #000; }
807
808  to {
809    background-color: transparent;
810    color: #33b5e5;
811    border-bottom-color: #33b5e5; } }
812
813h1:target,
814h2:target,
815h3:target {
816    -webkit-animation-name: glowheader;
817    -moz-animation-name: glowheader;
818    animation-name: glowheader;
819    -webkit-animation-duration: 0.7s;
820    -moz-animation-duration: 0.7s;
821    animation-duration: 0.7s;
822    -webkit-animation-timing-function: ease-out;
823    -moz-animation-timing-function: ease-out;
824    animation-timing-function: ease-out; }
825
826.design ol h4 {
827  padding-bottom:0;
828}
829.design ol {
830  counter-reset: item; }
831  .design ol>li {
832    font-size: 14px;
833    line-height: 20px;
834    list-style-type: none;
835    position: relative; }
836    .design ol>li:before {
837      content: counter(item) ". ";
838      counter-increment: item;
839      position: absolute;
840      left: -20px;
841      top: 0; }
842    .design ol li.value-1:before {
843      content: "1. "; }
844    .design ol li.value-2:before {
845      content: "2. "; }
846    .design ol li.value-3:before {
847      content: "3. "; }
848    .design ol li.value-4:before {
849      content: "4. "; }
850    .design ol li.value-5:before {
851      content: "5. "; }
852    .design ol li.value-6:before {
853      content: "6. "; }
854    .design ol li.value-7:before {
855      content: "7. "; }
856    .design ol li.value-8:before {
857      content: "8. "; }
858    .design ol li.value-9:before {
859      content: "9. "; }
860    .design ol li.value-10:before {
861      content: "10. "; }
862.design .with-callouts ol>li {
863  list-style-position: inside;
864  margin-left: 0; }
865  .design .with-callouts ol>li:before {
866    display: inline;
867    left: -20px;
868    float: left;
869    width: 17px;
870    color: #33b5e5;
871    font-weight: 500; }
872.design .with-callouts ul>li {
873  list-style-position: outside; }
874
875/* special list items */
876li.no-bullet {
877  list-style-type: none !important; }
878li.no-bullet *{
879  margin:0; }
880
881.design li.with-icon {
882  position: relative;
883  margin-left: 20px;
884  min-height: 30px; }
885  .design li.with-icon p {
886    margin-left: 0 !important; }
887  .design li.with-icon:before {
888    position: absolute;
889    left: -40px;
890    top: 0;
891    content: '';
892    width: 30px;
893    height: 30px; }
894  .design li.with-icon.tablet:before {
895    background-image: url(../images/styles/ico_phone_tablet.png); }
896  .design li.with-icon.web:before {
897    background-image: url(../images/styles/ico_web.png); }
898  .design li.with-icon.action:before {
899    background-image: url(../images/styles/ico_action.png); }
900  .design li.with-icon.use:before {
901    background-image: url(../images/styles/ico_use.png); }
902
903/* video  containers */
904.framed-galaxynexus-land-span-13 {
905  background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat
906scroll top left;
907  padding: 42px 122px 62px 126px;
908  overflow: hidden; }
909  .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video,
910.framed-galaxynexus-land-span-13 img {
911    width: 512px;
912    height: 286px; }
913
914
915.framed-galaxynexus-land-span-8{
916  background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat
917scroll top left;
918  padding: 26px 68px 38px 72px;
919  overflow: hidden; }
920  .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video,
921.framed-galaxynexus-land-span-8 img {
922    width: 320px;
923    height: 180px; }
924
925.framed-galaxynexus-port-span-9 {
926  background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat
927scroll top left;
928  padding: 95px 122px 107px 124px;
929  overflow: hidden; }
930  .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video,
931.framed-galaxynexus-port-span-9 img {
932    width: 274px;
933    height: 488px; }
934
935.framed-galaxynexus-port-span-5 {
936  background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat
937scroll top left;
938  padding: 75px 31px 76px 33px;
939  overflow: hidden; }
940  .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video,
941.framed-galaxynexus-port-span-5 img {
942    width: 216px;
943    height: 384px; }
944
945.framed-nexus4-port-216 {
946  background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat
947scroll top left;
948  background-size:240px 465px;
949  padding: 52px 12px 52px 12px;
950  overflow: hidden; }
951  .framed-nexus4-port-216, .framed-nexus4-port-216 video,
952  .framed-nexus4-port-216 img {
953    width: 216px;
954    height: 360px; }
955
956.framed-nexus5-port-span-5 {
957  background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat
958  scroll top left;
959  padding: 52px 33px 69px 31px;
960  overflow: hidden;
961}
962
963.framed-nexus5-port-span-5,
964.framed-nexus5-port-span-5 video,
965.framed-nexus5-port-span-5 img {
966  width: 216px;
967  height: 384px;
968}
969
970.framed-nexus5-land-span-13 {
971  background: transparent url(../images/styles/device_nexus5_blank_land_span13.png) no-repeat scroll top left;
972  padding: 36px 119px 54px 108px;
973  overflow: hidden;
974}
975
976.framed-nexus5-land-span-13,
977.framed-nexus5-land-span-13 video,
978.framed-nexus5-land-span-13 img {
979  width: 533px;
980  height: 300px;
981}
982
983.framed-nexus5-port-span-5,
984.framed-nexus5-port-span-5 video,
985.framed-nexus5-port-span-5 img {
986  width: 216px;
987  height: 384px;
988}
989
990/* wear device frames */
991
992.framed-wear-square {
993  background: transparent url(../images/styles/device_wear_square.png) no-repeat scroll top left;
994  background-size: 302px 302px;
995  height:222px;
996  width:222px;
997  padding:40px;
998  overflow:hidden;
999}
1000
1001.framed-wear-square-small {
1002  background: transparent url(../images/styles/device_wear_square_small.png) no-repeat scroll top left;
1003  background-size: 169px 200px;
1004  height:147px;
1005  width:147px;
1006  padding:27px 11px;
1007  overflow:hidden;
1008}
1009
1010#jd-content
1011.framed-wear-square img {
1012  height:222px;
1013  width: 222px;
1014  padding:0;
1015  margin:0;
1016}
1017
1018#jd-content
1019.framed-wear-square-small img {
1020  height:147px;
1021  width: 147px;
1022  padding:0;
1023  margin:0;
1024}
1025
1026
1027
1028
1029
1030
1031/* landing page disclosures */
1032.landing-page-link {
1033  text-decoration: none;
1034  font-weight: 500;
1035  color: #333333; }
1036  .landing-page-link:after {
1037    content: '';
1038    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
1039    width: 10px;
1040    height: 10px;
1041    display: inline-block;
1042    margin-left: 5px; }
1043
1044/* tooltips */
1045.tooltip-box {
1046  position: absolute;
1047  background-color: rgba(0, 0, 0, 0.9);
1048  border-radius: 2px;
1049  font-size: 14px;
1050  line-height: 20px;
1051  color: #fff;
1052  padding: 6px 10px;
1053  max-width: 250px;
1054  z-index: 10000; }
1055  .tooltip-box.below:after {
1056    position: absolute;
1057    content: '';
1058    line-height: 0;
1059    display: block;
1060    top: -10px;
1061    left: 5px;
1062    border: 5px solid transparent;
1063    border-bottom-color: rgba(0, 0, 0, 0.9); }
1064
1065/* video note */
1066.video-instructions {
1067  margin-top: 10px;
1068  margin-bottom: 10px; }
1069  .video-instructions:before {
1070    content: '';
1071    background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left;
1072    display: inline-block;
1073    width: 12px;
1074    height: 12px;
1075    margin-right: 8px; }
1076  .video-instructions:after {
1077    content: 'Click device screen to replay movie.'; }
1078
1079/* download buttons */
1080.download-button {
1081  display: block;
1082  margin-bottom: 5px;
1083  text-decoration: none;
1084  background-color: #33b5e5;
1085  color: #fff !important;
1086  font-weight: 500;
1087  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
1088  padding: 6px 12px;
1089  border-radius: 2px; }
1090  .download-button:hover, .download-button:focus {
1091    background-color: #0099cc;
1092    color: #fff !important; }
1093  .download-button:active {
1094    background-color: #006699; }
1095
1096/* UI tables and other things found in Writing style and Settings pattern */
1097.ui-table {
1098  width: 100%;
1099  background-color: #282828;
1100  color: #fff;
1101  border-radius: 2px;
1102  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
1103  border-collapse: separate; }
1104  .ui-table th,
1105  .ui-table td {
1106    padding: 5px 10px;
1107    background-color: inherit;
1108    border:0;}
1109  .ui-table thead th {
1110    font-weight: bold; }
1111  .ui-table tfoot td {
1112    border-top: 1px solid #494949;
1113    border-right: 1px solid #494949;
1114    text-align: center; }
1115    .ui-table tfoot td:last-child {
1116      border-right: 0; }
1117
1118.layout-with-list-item-margins {
1119  margin-left: 30px !important; }
1120
1121.emulate-content-left-padding {
1122  margin-left: 10px; }
1123
1124.do-dont-label {
1125  margin-bottom: 10px;
1126  padding-left: 20px;
1127  background: transparent none no-repeat scroll 0px 3px; }
1128  .do-dont-label.bad {
1129    background-image: url(../images/styles/ico_wrong.png); }
1130  .do-dont-label.good {
1131    background-image: url(../images/styles/ico_good.png); }
1132
1133
1134
1135
1136/* --------------------------------------------------------------------------
1137Footer
1138*/
1139.line {
1140    clear: both;
1141    background: #acbc00;
1142    background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1143    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00),
1144color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00));
1145    background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1146    background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1147    background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1148    background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1149    height: 2px;
1150    margin-top: 150px;
1151    position: relative;
1152    z-index: 11;
1153}
1154#footer {
1155    font-size:11px;
1156    clear: both;
1157    color: #999;
1158    padding: 15px 0;
1159    margin-top:10px;
1160    width:auto;
1161}
1162#footer-local ul {
1163  list-style: none;
1164  margin: 5px 0 30px 0;
1165}
1166#footer-local li {
1167    display: inline;
1168}
1169#footer-local li+li:before {
1170    content: '|';
1171    padding: 0 3px;
1172  color: #e5e5e5;
1173}
1174#footer-global {
1175    padding: 10px 15px;
1176  background: #f5f5f5;
1177}
1178#footer-global {
1179    border-top: 1px solid #ebebeb;
1180    font-size: 11.5px;
1181    line-height: 1.8;
1182    list-style: none;
1183}
1184#footer-global ul {
1185    margin: 0;
1186}
1187#footer-global li {
1188    display: inline;
1189    font-weight: bold;
1190}
1191#footer-global li+li:before {
1192    content: '¬?';
1193    padding: 0 3px;
1194}
1195* html #footer-global li {
1196    margin: 0 13px 0 0;
1197}
1198* [dir='rtl'] #footer-global li {
1199    margin: 0 0 0 13px;
1200}
1201*+html #footer-global li {
1202    margin: 0 13px 0 0;
1203}
1204*+[dir='rtl'] #footer-global li {
1205    margin: 0 0 0 13px;
1206}
1207#footer-global li a {
1208    font-weight: normal;
1209}
1210.locales {
1211  margin: 10px 0 0 0px;
1212}
1213[dir='rtl'] .locales {
1214    background-position: right center;
1215    float: left;
1216    padding: 0 24px 0 0;
1217}
1218.locales form {
1219    margin: 0;
1220}
1221.locales select, .sites select {
1222  line-height: 3.08;
1223  margin: 0px 0;
1224  border: solid 1px #EBEBEB;
1225  -webkit-appearance: none;
1226  background: white url('../images/arrows-up-down.png') right center no-repeat;
1227  height: 30px;
1228  color: #222;
1229  line-height: normal;
1230  padding: 5px;
1231  width: 230px;
1232}
1233}
1234
1235/* =============================================================================
1236   Print Only
1237   ========================================================================== */
1238@media print {
1239  /* configure printed page */
1240  @page {
1241      margin: 0.75in 1in;
1242      widows: 4;
1243      orphans: 4;
1244  }
1245
1246  /* reset spacing metrics */
1247  html, body, .wrap {
1248      margin: 0 !important;
1249      padding: 0 !important;
1250      width: auto !important;
1251  }
1252
1253  /* leave enough space on the left for bullets */
1254  body {
1255      padding-left: 20px !important;
1256  }
1257  #doc-col {
1258      margin-left: 0;
1259  }
1260
1261  /* hide a bunch of non-content elements */
1262  #header, #footer, #nav-x, #side-nav,
1263  .training-nav-top, .training-nav-bottom,
1264  #doc-col .content-footer,
1265  .nav-x, .nav-y,
1266  .paging-links {
1267      display: none !important;
1268  }
1269
1270  /* remove extra space above page titles */
1271  #doc-col .content-header {
1272      margin-top: 0;
1273  }
1274
1275  /* bump up spacing above subheadings */
1276  h2 {
1277      padding-top: 40px !important;
1278  }
1279
1280  /* print link URLs where possible and give links default text color */
1281  p a:after {
1282      content: " (" attr(href) ")";
1283      font-size: 80%;
1284  }
1285  p a {
1286      word-wrap: break-word;
1287  }
1288  a {
1289      color: inherit;
1290  }
1291
1292  /* syntax highlighting rules */
1293  .str { color: #060; }
1294  .kwd { color: #006; font-weight: bold; }
1295  .com { color: #600; font-style: italic; }
1296  .typ { color: #404; font-weight: bold; }
1297  .lit { color: #044; }
1298  .pun { color: #440; }
1299  .pln { color: #000; }
1300  .tag { color: #006; font-weight: bold; }
1301  .atn { color: #404; }
1302  .atv { color: #060; }
1303}
1304
1305/* =============================================================================
1306   Layout
1307   ========================================================================== */
1308@media screen, projection, print {
1309
1310.training-nav-top {
1311  border:1px solid #e5e5e5;
1312  border-width: 1px 1px 0;
1313  bottom: -56px;
1314  box-sizing: border-box;
1315  position: absolute;
1316  right: 0;
1317  width: 280px;
1318}
1319
1320.training-nav-bottom {
1321  float:right;
1322  margin:0 0 0 20px;
1323  padding:0 0 20px;
1324}
1325
1326#tb-wrapper,
1327#qv-wrapper {
1328  float:right;
1329  clear:right;
1330  margin:6px 0 0 30px; /* negative top-margin to counter the content-header bottom margin */
1331  padding:0 0 30px;
1332}
1333
1334#tb-wrapper {
1335  margin:56px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1336}
1337
1338#tb,
1339#qv {
1340  border: 1px solid #e5e5e5;
1341  box-sizing: border-box;
1342  float: right;
1343  line-height: 16px;
1344  padding: 5px 0;
1345  width: 240px;
1346}
1347
1348#tb {
1349  width:280px;
1350}
1351
1352#tb h2,
1353#qv h2 {
1354  border-top: 1px solid #e5e5e5;
1355  color: inherit;
1356  font-size: 16px;
1357  line-height: 24px;
1358  margin: 15px 0 4px;
1359  padding: 10px 15px 0;
1360}
1361
1362#tb h2:first-child,
1363#qv h2:first-child {
1364  border-top: 0;
1365  padding-top: 0;
1366  margin-top: 10px;
1367}
1368
1369#tb .download-box,
1370#qv .download-box {
1371  padding:0 0 0 15px;
1372}
1373
1374#tb .download-box .filename,
1375#qv .download-box .filename {
1376  font-size:11px;
1377  margin:4px 4px 10px;
1378}
1379
1380@media (max-width: 719px) {
1381  .training-nav-top {
1382    left: 0;
1383    width: auto;
1384  }
1385
1386  #tb-wrapper {
1387    clear: none;
1388    float: none;
1389    margin-left: 0;
1390  }
1391
1392  #tb {
1393    float: none;
1394    width: auto;
1395  }
1396
1397  #qv-wrapper {
1398    display: none;
1399  }
1400}
1401
1402
1403/* Dev guide quicknav */
1404
1405.sidebox-wrapper {
1406  float:right;
1407  clear:right;
1408  margin:0 0 0 20px;
1409  padding:0 0 20px;
1410}
1411
1412.sidebox {
1413  width:226px;
1414  font-size:13px;
1415  line-height:18px;
1416  border-left:3px solid #96ca7c;
1417  border-left-color: rgba(106, 179, 68, .7); /* #6ab344 * 70% */
1418  float:right;
1419  padding:0 0 0 20px;
1420  margin:0 0 1em 20px;
1421}
1422
1423.sidebox h2,
1424.sidebox h3,
1425.sidebox h4,
1426.sidebox h5 {
1427  font-weight:bold;
1428  padding: 0 0 10px;
1429  line-height: 16px;
1430}
1431
1432.sidebox * {
1433  font-size:inherit;
1434}
1435
1436.sidebox > *:last-child {
1437  margin-bottom:0;
1438}
1439
1440#tb ol,
1441#tb ul,
1442#qv ul {
1443  list-style-type: none;
1444  margin:0 15px 10px 15px;
1445}
1446
1447#tb li,
1448#qv li {
1449  margin: 8px 0;
1450  padding: 0 0 0 16px;
1451  position: relative;
1452}
1453
1454#tb p {
1455  margin:0 15px 10px;
1456}
1457
1458#qv ol {
1459  list-style:none;
1460  margin:0 15px 15px;
1461  font-size:inherit;
1462  line-height:inherit;
1463}
1464
1465#tb ol ol,
1466#tb ul ul,
1467#qv ol ol,
1468#qv ul ul,
1469.sidebox ol ol,
1470.sidebox ul ul {
1471  margin: 8px 0;
1472}
1473
1474.sidebox p,
1475#qv p,
1476#tb p {
1477  margin: 0 0 10px;
1478}
1479
1480/* related resources blocks in checklists */
1481
1482/* related resources sections that have dynamic content */
1483
1484
1485
1486h3.rel-resources {
1487  padding:1.25em auto;
1488}
1489
1490/* --------------------------------------------------------------------------
1491Form
1492*/
1493.article form {
1494    margin: 0 0 20px;
1495}
1496.article form .form-required {
1497    color: #dd4b39;
1498}
1499.article form fieldset {
1500    margin: 0 0 20px;
1501    padding: 0;
1502}
1503.article form legend {
1504    display: block;
1505    line-height: 1.5;
1506    margin: 0;
1507    padding: 0;
1508}
1509/*
1510.article form ol, .article form ul {
1511    margin: 0 0 0 1em;
1512    padding: 0 0 0 1em;
1513}
1514[dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
1515    margin: 0 1em 0 0;
1516    padding: 0 1em 0 0;
1517}
1518.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
1519ul ul {
1520    list-style: none;
1521    margin: 0;
1522    padding: 0;
1523}
1524.article form li {
1525    margin: 0 0 20px;
1526}
1527.article form li li {
1528    margin: 0 0 5px;
1529}
1530*/
1531.article form label {
1532    display: block;
1533    margin: 0 0 5px;
1534    padding: 0;
1535}
1536.article form input[type='text'], .article form select, .article form textarea, .article form
1537.checkbox-group, .article form .radio-group {
1538    margin-bottom: 15px;
1539}
1540.checkbox-group input {
1541  width: 13px;
1542  height: 13px;
1543  background: #fff;
1544  border: solid 1px #c6c6c6;
1545  float: left;
1546}
1547.article form .checkbox-group, .article form .radio-group {
1548  display: block
1549}
1550.article form select {
1551    border: solid 1px #ebebeb;
1552    border-top-color: #ddd;
1553    -webkit-appearance: none;
1554    background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
1555    height: 30px;
1556    color: #222;
1557    line-height: normal;
1558    padding: 5px;
1559    width: 130px;
1560}
1561
1562.article form .browse .browse-msg {
1563  font-size: 11.5px;
1564}
1565.article form .browse .button-secondary {
1566  height: auto;
1567  line-height: 25px;
1568  font-size: 11px;
1569  padding: 0 8px;
1570  margin: 0 10px 15px 0;
1571}
1572.article form input[type='text'], .article form textarea {
1573    border: 1px solid #ebebeb;
1574    border-top-color: #dcdcdc;
1575    color: #222;
1576    line-height: normal;
1577    padding: 6px 10px;
1578    width: 300px;
1579}
1580.article form textarea {
1581    height: 150px;
1582}
1583.article form input[type='text']:focus, .article form textarea:focus {
1584    border-color: #33B5E5;
1585    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1586    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1587    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1588    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1589    outline: 0;
1590}
1591.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
1592    color: #999;
1593}
1594.article form input[type='text'][disabled], .article form textarea[disabled] {
1595    background-color: #ebebeb;
1596}
1597form .form-error input[type='text'], form .form-error textarea {
1598    border-color: #dd4b39;
1599  margin-right: 20px;
1600}
1601.aside {
1602    -moz-border-radius: 2px;
1603    -webkit-border-radius: 2px;
1604    border-radius: 2px;
1605    margin: 10px 0;
1606    padding: 20px;
1607    position: relative;
1608  background: #f9f9f9;
1609}
1610/*
1611.aside, .notification, .promo {
1612    -moz-border-radius: 2px;
1613    -webkit-border-radius: 2px;
1614    border-radius: 2px;
1615    margin: 10px 0;
1616    padding: 10px;
1617    position: relative;
1618}
1619.aside>:first-child, .notification>:first-child, .promo>:first-child {
1620    margin-top: 0;
1621}
1622.aside>:last-child, .notification>:last-child, .promo>:last-child {
1623    margin-bottom: 0;
1624}
1625.aside {
1626    background: #f9f9f9;
1627}
1628.notification {
1629    background: #fffbe4;
1630    border-color: #f8f6e6;
1631}
1632.promo {
1633    background: #f6f9ff;
1634    border-color: #eff2f9;
1635}
1636*/
1637
1638/* SDK TOS styles */
1639
1640div.sdk-terms {
1641  white-space: pre-wrap;
1642  word-wrap: break-word;
1643  font-family: inherit;
1644  font-size: inherit;
1645  padding: 10px;
1646  height: 370px;
1647  width: 738px;
1648  border: 1px solid #444;
1649  background: transparent;
1650  overflow:auto;
1651  margin:0 0 10px;
1652}
1653
1654div.sdk-terms.fullsize {
1655  padding: 0;
1656  height: auto;
1657  width: auto;
1658  border:none;
1659}
1660
1661div.sdk-terms h3,
1662div.sdk-terms h2 {
1663  padding: 0;
1664}
1665
1666div#sdk-terms-form {
1667  padding:0 0 0 10px;
1668}
1669
1670div#sdk-terms-form input {
1671  display:inline;
1672  margin:4px 4px 4px 0;
1673}
1674
1675
1676/* --------------------------------------------------------------------------
1677Code Style
1678*/
1679pre {
1680  margin:0 0 1em 0;
1681  padding: 1em;
1682  overflow: auto;
1683  border: solid 1px #ddd;
1684  background: #f7f7f7;
1685}
1686
1687p.package-name {
1688  margin:1em 0;
1689}
1690
1691h1.api-title {
1692  padding-bottom:0;
1693}
1694
1695h2.api-section {
1696  margin: 60px 0 0;
1697}
1698
1699h2.api-section+hr {
1700  margin-bottom: 30px;
1701}
1702
1703h3.api-name {
1704  margin: 80px 0 12px;
1705  padding: 0;
1706}
1707
1708/* remove top padding when this h3 (visibly) follows an h2.
1709   This accounts for the variation in structure,
1710   including the collapsed mobile headings */
1711h2+hr+div>div>a+div>h3.api-name,
1712h2+hr+a+div>h3.api-name,
1713h2+hr+a+h3.api-name {
1714  margin-top: 0;
1715}
1716
1717pre.api-signature,
1718code.api-signature {
1719  color:inherit;
1720  padding:0;
1721  margin:1em 0;
1722  border:0;
1723  background:transparent;
1724}
1725
1726.str { color: #800; } /* Code string */
1727.kwd { color: #008; }
1728.typ { color: #606; }
1729.lit { color: #066; }
1730.pun { color: #660; }
1731.pln { color: #000; }
1732.tag { color: #008; }
1733.atn { color: #828; }
1734.atv { color: #800; } /* XML string */
1735.dec { color: #606; }
1736
1737/* --------------------------------------------------------------------------
1738Three-Pane
1739*/
1740/* Package Nav & Classes Nav */
1741.three-pane {
1742  position: relative;
1743  border-top: solid 1px #ebebeb;
1744}
1745#packages-nav .js-pane,
1746#classes-nav .js-pane {
1747  overflow:visible;
1748}
1749#packages-nav {
1750        height:270px;
1751  max-height: inherit;
1752  overflow: hidden;
1753  position: relative;
1754}
1755#classes-nav {
1756  overflow: hidden;
1757  position: relative;
1758}
1759#packages-nav ul, #classes-nav ul {
1760  list-style-type: none;
1761  margin: 10px 0 20px 0;
1762  padding: 0;
1763}
1764#classes-nav li {
1765  font-weight: bold;
1766  margin: 5px 0;
1767}
1768#packages-nav li,
1769#classes-nav li li {
1770  margin: 0;
1771}
1772#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1773#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
1774  padding: 0 0 0 4px;
1775}
1776#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1777#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
1778  color: #222;
1779  font-weight: normal;
1780}
1781#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1782#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
1783  display: block;
1784}
1785#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
1786a:visited,
1787#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
1788a:visited {
1789    font-weight: 500;
1790    color: #0099cc;
1791    background-color:#fff; }
1792  #packages-nav li.selected ul li a,
1793  #classes-nav li.selected ul li a {
1794  /* don't highlight child items */
1795    color: #555555; }
1796
1797#nav-swap {
1798  height:30px;
1799  border-top:1px solid #ccc;
1800}
1801#nav-swap a {
1802  display:inline-block;
1803  height:100%;
1804  color: #222;
1805  font-size: 12px;
1806  padding: 5px 0 5px 5px;
1807}
1808
1809#nav-swap .fullscreen {
1810  float: right;
1811  width: 24px;
1812  height: 24px;
1813  text-indent: -1000em;
1814  padding:0;
1815  margin:3px 5px 0;
1816  background: url(../images/fullscreen.png) no-repeat -24px 0;
1817}
1818#nav-swap .fullscreen.disabled {
1819  background-position: 0 0;
1820}
1821#nav-swap .fullscreen:hover,
1822#nav-swap .fullscreen:focus {
1823  cursor:pointer;
1824}
1825
1826/* Content */
1827#doc-col {
1828  margin-right:0;
1829}
1830
1831/* Uncomment this for preview release watermark
1832#doc-col {
1833  background: url('../images/preview.png') repeat;
1834}
1835*/
1836
1837#doc-content-container {
1838  margin-left: 291px
1839}
1840#doc-header, #doc-content {
1841  padding: 1em 2em;
1842}
1843#doc-header {
1844  background: #f7f7f7;
1845}
1846#doc-header h1 {
1847  line-height: 0;
1848  padding-bottom: 15px;
1849}
1850#api-info-block {
1851  float: right;
1852  font-weight: bold;
1853}
1854#api-info-block a, #api-info-block a:active, #api-info-block a:visited {
1855  color: #222;
1856}
1857#api-info-block a:hover, #api-info-block a:focus {
1858  color: #33B5E5;
1859}
1860#api-nav-header {
1861  height:19px; /* plus 16px padding = 35; same as #nav li */
1862  font-size:14px;
1863  padding: 8px 0;
1864  margin: 0;
1865  border-bottom: 1px solid #CCC;
1866  background:#e9e9e9;
1867  background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
1868  line-height: 19px; /* Fix regression after page line-height is bumped to 24px */
1869}
1870#api-nav-title {
1871  padding:0 5px;
1872  white-space:nowrap;
1873}
1874
1875#api-level-toggle {
1876  float:right;
1877  padding:0 5px;
1878}
1879
1880#api-level-toggle label {
1881  margin:0;
1882  vertical-align:top;
1883  line-height: 19px;
1884  font-size:13px;
1885  height: 19px;
1886}
1887
1888#api-level-toggle .select-wrapper {
1889  width: 35px;
1890  display: inline-block;
1891  overflow: hidden;
1892}
1893#api-level-toggle select {
1894  border: 0;
1895  appearance:none;
1896  -moz-appearance:none;
1897  -webkit-appearance: none;
1898  background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
1899  color: #222;
1900  /* remove the lines below after xp testing
1901     height: 19px;
1902     line-height: 19px; */
1903  padding: 0;
1904  margin: .5px 0 0 0;
1905  width:150%;
1906  font-size:13px;
1907  vertical-align:top;
1908  outline:0;
1909}
1910
1911
1912/* Toggle for revision notes and stuff */
1913div.toggle-content.closed .toggle-content-toggleme {
1914  display:none;
1915}
1916
1917#jd-content img.toggle-content-img {
1918  margin:0 5px 5px 0;
1919}
1920
1921div.toggle-content-toggleme {
1922  padding:0 0 0 15px;
1923}
1924
1925
1926/* API LEVEL FILTERED MEMBERS */
1927
1928.absent,
1929.absent a:link,
1930.absent a:visited,
1931.absent a:hover,
1932.absent * {
1933  color:#bbb !important;
1934  cursor:default !important;
1935  text-decoration:none !important;
1936}
1937#devdoc-nav li.absent.selected,
1938#devdoc-nav li.absent.selected *,
1939#devdoc-nav div.label.absent.selected,
1940#devdoc-nav div.label.absent.selected * {
1941  background-color:#eaeaea !important;
1942}
1943.absent h4.jd-details-title,
1944.absent h4.jd-details-title * {
1945  background-color:#f6f6f6 !important;
1946}
1947.absent img {
1948  opacity: .3;
1949  filter: alpha(opacity=30);
1950  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
1951}
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961/* JQUERY RESIZABLE STYLES */
1962.ui-resizable { position: relative; }
1963.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
1964.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
1965/*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
1966body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
1967.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
1968border-bottom: solid 1px #ededed;
1969  background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
1970/*
1971.ui-resizable-e {
1972cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
19731px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
1974*/
1975
1976/* --------------------------------------------------------------------------
1977Lightbox
1978*/
1979.lightbox {
1980  width: 769px;
1981  padding: 1.5em;
1982  margin: 0 auto;
1983  border: solid 1px #dcdcdc;
1984  background: #fff;
1985  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
1986  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
1987  box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
1988}
1989.lightbox .header {
1990  float: left;
1991  width: 720px;
1992  margin: -10px 20px 10px 0;
1993}
1994.lightbox .close {
1995  float: right;
1996  width: 10px;
1997  height: 10px;
1998  margin: -10px -10px 10px 0;
1999  text-indent: -1000em;
2000  background: url(../images/close.png) no-repeat 0 0;
2001}
2002.lightbox .close:hover, .lightbox .close:focus {
2003  background-position: -10px 0;
2004}
2005
2006/* --------------------------------------------------------------------------
2007Styles for samples browser
2008*/
2009
2010#codesample-wrapper {
2011  width:100000px; /* super wide to contain floats, but doesn't cause scroll */
2012  overflow:visible;
2013}
2014pre#codesample-block {
2015  float:left;
2016  overflow:visible;
2017  background:transparent;
2018  border:none;
2019}
2020pre#codesample-block a.number {
2021  display:none;
2022}
2023pre#codesample-block .code-line:hover {
2024  background:#e7e7e7;
2025}
2026pre#codesample-line-numbers {
2027  float:left;
2028  width:2em;
2029  background:transparent;
2030  border:none;
2031  border-right:1px solid #ccc;
2032  padding-left:0;
2033  font-family:monospace;
2034  text-align:right;
2035  -webkit-touch-callout: none;
2036  -webkit-user-select: none;
2037  -khtml-user-select: none;
2038  -moz-user-select: -moz-none;
2039  -ms-user-select: none;
2040  user-select: none;
2041}
2042pre#codesample-line-numbers a {
2043  color:#999;
2044}
2045pre#codesample-line-numbers.hidden {
2046  display:none;
2047}
2048pre#codesample-block span.code-line {
2049  width:100%;
2050  display:inline-block;
2051}
2052
2053/*
2054Styles for displaying image or video resources in samples browser.
2055Resources are marked as no-display if they exceed the size limit.
2056*/
2057div#codesample-resource img, div#codesample-resource video {
2058  border: 1px solid #ececec;
2059}
2060
2061div#codesample-resource.noDisplay div {
2062  border: 1px solid #ececec;
2063  width:120px;
2064  margin-bottom:4px;
2065  padding:20px;
2066}
2067
2068div#codesample-resource .noDisplay-message:after {
2069  font-style:italic;
2070  font-size:12px;
2071  content: 'This resource is not available for browsing. To view it, please download the project.';
2072}
2073
2074/*
2075Styles for project structure (treeview) page
2076*/
2077.structure-dir {
2078background-image:url(../../assets/images/folder.png);
2079background-repeat:no-repeat;
2080background-position:16px 2px;
2081  margin:.25em 0 0 0;
2082  padding:0 0 0 0;
2083}
2084
2085.structure-toggleme {
2086  margin:0 0 0 3em;
2087  padding:0 0 0 0;
2088  text-decoration:none;
2089}
2090
2091.structure-java{
2092background-image:url(../../assets/images/file-java.png);
2093background-repeat:no-repeat;
2094background-position:0px 2px;
2095  margin:.3em 0 0 0;
2096  padding:.3em 0 .3em 22px;
2097}
2098
2099.structure-file {
2100background-image:url(../../assets/images/file-generic.png);
2101background-repeat:no-repeat;
2102background-position:0px 2px;
2103  margin:.3em 0 0 0;
2104  padding:.3em 0 .3em 22px;
2105}
2106
2107.structure-xml {
2108background-image:url(../../assets/images/file-xml.png);
2109background-repeat:no-repeat;
2110background-position:0px 2px;
2111  margin:.3em 0 0 0;
2112  padding:.3em 0 .25em 22px;
2113}
2114
2115.structure-img {
2116background-image:url(../../assets/images/file-image.png);
2117background-repeat:no-repeat;
2118background-position:0px 2px;
2119  margin:.3em 0 0 0;
2120  padding:.3em 0 .25em 22px;
2121}
2122
2123.structure-manifest {
2124background-image:url(../../assets/images/file-manifest.png);
2125background-repeat:no-repeat;
2126  margin:.0 0 0 1.25em;
2127  padding:0 0 0 22px;
2128  text-decoration:none;
2129}
2130
2131#jd-content .structure-toggle-img {
2132  margin:.5em 0 0 0;
2133padding-right:2.1em;
2134}
2135
2136.dirInfo {
2137  margin-left:2em;
2138}
2139
2140.structure-dir a {
2141  text-decoration:none;
2142}
2143
2144.structure-manifest a {
2145  text-decoration: none;
2146}
2147.structure-file a {
2148  text-decoration: none;
2149}
2150
2151.sampleEmbed {
2152  background-color:rgb(249, 249, 249);
2153}
2154
2155.sampleEmbed ol.lineNumbers {
2156  list-style-type: decimal;
2157  padding-left:1em;
2158}
2159
2160.sampleEmbed ol.lineNumbers li {
2161border-left:1px solid #ddd;
2162border-right:1px solid #ddd;
2163color:gray;
2164background-color:#f7f7f7;
2165margin:0 0 0 24px;
2166padding: 2px 2px 2px 6px;
2167}
2168
2169.sampleEmbed ol.lineNumbers li:hover {
2170background: #efefef;
2171}
2172
2173.samples-nav li a {
2174  overflow: hidden;
2175  text-overflow: ellipsis;
2176  white-space: nowrap;
2177}
2178
2179/* --------------------------------------------------------------------------
2180Styles for raw formatted line numbers (not used with listformatted version)
2181div.sampleLine div.lineNumber {
2182  display: inline;
2183}
2184div.sampleLine div.lineCode {
2185  display: inline;
2186  padding-left:6px;
2187}
2188div.sampleLine {
2189  padding:0;
2190  margin:0;
2191}*/
2192
2193/* --------------------------------------------------------------------------
2194Misc and article typography
2195*/
2196
2197
2198.clearfix:before, .clearfix:after {
2199  content: "";
2200  display: table
2201}
2202.clearfix:after {
2203  clear: both
2204}
2205.clearfix {
2206  *zoom: 1
2207}
2208table.blank th, table.blank td {
2209    border: 0;
2210  background: none
2211}
2212.caption {
2213  margin: 0.5em 0 2em 0;
2214  color: #000;
2215  font-size: 11.5px;
2216}
2217
2218.nolist, .nolist ul, .nolist ol {
2219  list-style:none;
2220  margin-left:0;
2221}
2222#tb .nolist {
2223  margin-left:15px;
2224}
2225
2226dl.xml>dt {
2227  text-transform:uppercase;
2228}
2229dl.xml dl.attr {
2230  margin-top:0;
2231}
2232
2233pre.classic {
2234  background-color:transparent;
2235  border:none;
2236  padding:0;
2237}
2238
2239p.img-caption {
2240  margin: -10px 0 20px;
2241  font-size: 13px;
2242}
2243
2244/* figures and callouts */
2245.figure {
2246  position: relative;
2247}
2248
2249.figure.pad-below {
2250  margin-bottom: 20px;
2251}
2252
2253.figure .figure-callout {
2254  position: absolute;
2255  color: #fff;
2256  font-weight: 500;
2257  font-size: 16px;
2258  line-height: 23px;
2259  text-align: center;
2260  background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
2261  padding-right: 2px;
2262  width: 30px;
2263  height: 29px;
2264  z-index: 1000;
2265}
2266
2267.figure .figure-callout.top {
2268  top: -9px;
2269}
2270
2271.figure .figure-callout.right {
2272  right: -5px;
2273}
2274
2275.figure-caption {
2276  margin: 0 10px 20px 0;
2277  font-size: 14px;
2278  line-height: 20px;
2279  font-style: italic;
2280}
2281
2282/* rows of figures */
2283.figure-row {
2284  font-size: 0;
2285  line-height: 0;
2286  /* to prevent space between figures */
2287}
2288
2289.figure-row .figure {
2290  display: inline-block;
2291  vertical-align: top;
2292}
2293
2294.figure-row .figure + .figure {
2295  margin-left: 10px;
2296  /* reintroduce space between figures */
2297}
2298
2299.border-img {
2300  border: 1px solid #CCC;
2301}
2302
2303.center-img {
2304  margin: auto;
2305  text-align: center;
2306}
2307.center-img img {
2308  margin-bottom: 15px;
2309}
2310
2311.figure img,
2312.figure-right img,
2313.figure-left img,
2314.figure-center img,
2315.border-img {
2316  margin-bottom: 15px;
2317}
2318
2319.figure-center {
2320  margin: 32px auto 24px;
2321  max-width: 100%;
2322}
2323
2324.figure,
2325.figure-right {
2326  clear: right;
2327  float: right;
2328  margin: 10px 0 0 0;
2329  padding: 0 0 0 20px;
2330  max-width: 50%;
2331  /* width must be defined w/ an inline style matching the image width */
2332}
2333
2334.figure-left {
2335  clear: left;
2336  float: left;
2337  margin: 10px 0 0 0;
2338  padding: 0 20px 0 0;
2339  max-width: 50%;
2340  /* width must be defined w/ an inline style matching the image width */
2341}
2342
2343@media (max-width: 719px) {
2344  /* Collapse on mobile. */
2345  .figure,
2346  .figure-right,
2347  .figure-left {
2348    float: none;
2349    clear: none;
2350    padding: 0;
2351    margin: 32px auto 24px;
2352    max-width: 100%;
2353  }
2354}
2355
2356img.frame {
2357  border:1px solid #DDD;
2358  padding:4px;
2359}
2360
2361p.table-caption {
2362  margin: 0 0 4px 0;
2363  font-size:13px;
2364}
2365
2366p.code-caption {
2367  margin-bottom: 4px;
2368  font: 12px/1.5 monospace;
2369}
2370
2371p.note, div.note,
2372p.caution, div.caution,
2373p.warning, div.warning {
2374  padding: 0 0 0 20px;
2375  border-left: 3px solid;
2376  margin: 16px 0;
2377}
2378
2379p.note, div.note {
2380  border-color: #4eb9ed;
2381  border-color: rgba(3, 155, 229, .7); /* #039be5 * 70% */
2382}
2383
2384p.caution, div.caution {
2385  border-color: #ffbc4c;
2386  border-color: rgba(255, 160, 0, .7); /* #ffa000 * 70% */
2387}
2388
2389p.warning, div.warning {
2390  border-color: #f48684;
2391  border-color: rgba(239, 83, 80, .7); /* #ef5350 * 70% */
2392}
2393
2394div.note.design {
2395  border-left: 4px solid #00bcd4;
2396}
2397
2398div.note.develop {
2399  border-left: 4px solid #ff7043;
2400}
2401
2402div.note.distribute {
2403  border-left: 4px solid #afb42b;
2404}
2405
2406.note p, .caution p, .warning p {
2407  margin:0 0 5px;
2408}
2409
2410.note p:last-child, .caution p:last-child, .warning p:last-child {
2411  margin-bottom:0;
2412}
2413
2414body.about blockquote {
2415  display:block;
2416  float:right;
2417  width:280px;
2418  font-size:20px;
2419  font-style:italic;
2420  line-height:24px;
2421  color:#33B5E5;
2422  margin:0 0 20px 30px;
2423}
2424
2425div.design-announce p {
2426  margin:0 0 10px;
2427}
2428
2429.expandable {
2430  height:34px;
2431  padding-left:20px;
2432  position:relative;
2433}
2434.expandable:before {
2435  content: '';
2436  background-image: url(../images/styles/disclosure_down.png);
2437  background-repeat:no-repeat;
2438  background-position: -12px -9px;
2439  width: 20px;
2440  height: 20px;
2441  display: inline-block;
2442  position: absolute;
2443  top: 0;
2444  left: 0; }
2445}
2446.expandable.expanded:before {
2447  background-image: url(../images/styles/disclosure_up.png);
2448}
2449
2450/* notice box for cross links between Design/Develop docs */
2451a.notice-developers-video,
2452a.notice-developers,
2453a.notice-designers-video,
2454a.notice-designers {
2455  float:right;
2456  clear:right;
2457  width:238px;
2458  min-height:50px;
2459  margin:0 0 20px 20px;
2460  border:1px solid #ddd;
2461}
2462a.notice-developers-video.wide,
2463a.notice-developers.wide,
2464a.notice-designers-video.wide,
2465a.notice-designers.wide {
2466  width:278px;
2467}
2468a.notice-developers-video div,
2469a.notice-developers div,
2470a.notice-designers-video div,
2471a.notice-designers div {
2472  min-height:40px;
2473  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2474  background-size:40px 40px;
2475  padding:10px 10px 10px 60px;
2476}
2477a.notice-designers div {
2478  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2479  background-size:40px 40px;
2480}
2481a.notice-designers-video div {
2482  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2483  background-size:40px 40px;
2484}
2485a.notice-developers-video div {
2486  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2487  background-size:40px 40px;
2488}
2489a.notice-developers-video:hover,
2490a.notice-developers:hover,
2491a.notice-designers-video:hover,
2492a.notice-designers:hover {
2493  background:#eee;
2494}
2495a.notice-developers-video h3,
2496a.notice-developers h3,
2497a.notice-designers-video h3,
2498a.notice-designers h3 {
2499  font-size:13px;
2500  line-height:18px;
2501  font-weight:bold;
2502  text-transform:uppercase;
2503  color:#000 !important;
2504  padding:0 0 1px;
2505}
2506a.notice-developers-video p,
2507a.notice-developers p,
2508a.notice-designers-video p,
2509a.notice-designers p {
2510  margin:0;
2511  line-height:14px;
2512}
2513a.notice-developers-video.left,
2514a.notice-developers.left,
2515a.notice-designers-video.left,
2516a.notice-designers.left {
2517  margin-left:0;
2518  float:left;
2519}
2520
2521
2522/* hide nested list items; companion to hideNestedLists() */
2523.hide-nested li ol,
2524.hide-nested li ul {
2525  display:none;
2526}
2527
2528a.header-toggle {
2529  display:block;
2530  float:right;
2531  text-transform:uppercase;
2532  font-size:.8em !important;
2533  font-weight:normal;
2534  margin-top:2px;
2535}
2536
2537
2538/* for IDE instruction toggle (Studio/Eclipse/Other) */
2539select.ide {
2540  background: transparent;
2541  border: 1px solid #bbb;
2542  border-left: 0;
2543  border-right: 0;
2544  margin: 10px 0;
2545  padding: 10px 0;
2546  color:#666;
2547}
2548select.ide,
2549select.ide option {
2550  font-family: inherit;
2551  font-size:16px;
2552  font-weight:500;
2553}
2554/* hide all except studio by default */
2555.select-ide.eclipse,
2556.select-ide.other {
2557  display:none;
2558}
2559/* ... unless studio also includes one of the others */
2560.select-ide.studio.eclipse,
2561.select-ide.studio.other {
2562  display:none;
2563}
2564
2565
2566/* -----------------------------------------------
2567good/bad example containers
2568*/
2569
2570div.example-block {
2571  background-repeat: no-repeat;
2572  background-position:10px 8px;
2573  background-color:#ccc;
2574  padding:4px;
2575  margin:.8em auto 1.5em 2em;
2576  width:260px;
2577  float:right;
2578}
2579/* red container */
2580.example-block.bad {
2581  background-image: url(/images/example-bad.png);
2582  background-color:#f4cccc;
2583}
2584/* green container */
2585.example-block.good {
2586  background-image: url(/images/example-good.png);
2587  background-color:#d9ead3;
2588}
2589/* container heading div */
2590#jd-content .example-block .heading {
2591  font-weight:bold;
2592  margin:6px 0 9px 36px;
2593  padding:6px auto;
2594}
2595/* container image (if any) */
2596#jd-content .example-block img {
2597  margin:0;
2598  padding:0px;
2599}
2600
2601.example-block table {
2602  margin:0;
2603}
2604
2605/* -----------------------------------------------
2606Dialog box for popup messages
2607*/
2608
2609div.dialog {
2610  height:0;
2611  margin:0 auto;
2612}
2613
2614div.dialog>div {
2615  z-index:99;
2616  position:fixed;
2617  margin:70px 0;
2618  width: 391px;
2619  height: 200px;
2620  background: #F7F7F7;
2621-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2622-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2623box-shadow: 0 0 15px rgba(0,0,0,0.5);
2624}
2625/* IE6 can't position fixed */
2626* html div.dialog div { position:absolute; }
2627
2628
2629div#deprecatedSticker {
2630  display:none;
2631  z-index:99;
2632  position:fixed;
2633  right:15px;
2634  top:114px;
2635  margin:0;
2636  padding:1em;
2637  background:#FFF;
2638  border:1px solid #dddd00;
2639  box-shadow:-5px 5px 10px #ccc;
2640  -moz-box-shadow:-5px 5px 10px #ccc;
2641  -webkit-box-shadow:-5px 5px 10px #ccc;
2642}
2643
2644div#langMessage,
2645div#naMessage {
2646  display:none;
2647  width:555px;
2648  height:0;
2649  margin:0 auto;
2650}
2651
2652
2653div#langMessage>div,
2654div#naMessage div {
2655  z-index:99;
2656  width:450px;
2657  position:fixed;
2658  margin:80px 0;
2659  padding:4em 4em 3em;
2660  background:#FFF;
2661  border:1px solid #999;
2662  box-shadow:-10px 10px 40px #888;
2663  -moz-box-shadow:-10px 10px 40px #888;
2664  -webkit-box-shadow:-10px 10px 40px #888;
2665}
2666/* IE6 can't position fixed */
2667* html div#langMessage>div,
2668* html div#naMessage div { position:absolute; }
2669
2670div#naMessage strong {
2671  font-size:1.1em;
2672}
2673
2674div#langMessage .lang {
2675  display:none;
2676}
2677
2678/* --------------------------------------------------------------------------
2679Slideshow Controls & Next/Prev
2680*/
2681.slideshow-next, .slideshow-prev {
2682  width: 20px;
2683  height: 36px;
2684  text-indent: -1000em;
2685}
2686.slideshow-container {
2687  margin: 2em 0;
2688}
2689.slideshow-container:before, .slideshow-container:after {
2690  content: "";
2691  display: table;
2692  clear: both;
2693}
2694a.slideshow-next, a.slideshow-next:visited {
2695
2696  float: right;
2697
2698  background: url(../images/arrow-right.png) no-repeat 0 0
2699
2700}
2701
2702a.slideshow-prev, a.slideshow-prev:visited {
2703
2704  float: left;
2705
2706  background: url(../images/arrow-left.png) no-repeat 0 0
2707
2708}
2709
2710.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
2711
2712  background-position: 0 -36px
2713
2714}
2715
2716.slideshow-next:active, .slideshow-prev:active {
2717
2718  background-position: 0 -72px
2719
2720}
2721.slideshow-nav {
2722  width: 74px;
2723  margin: 0 auto;
2724}
2725.slideshow-nav a, .slideshow-nav a:visited {
2726  display: inline-block;
2727  width: 12px;
2728  height: 12px;
2729  margin: 0 2px 20px 2px;
2730  background: #ccc;
2731  -webkit-border-radius: 50%;
2732  -moz-border-radius: 50%;
2733  border-radius: 50%;
2734}
2735.slideshow-nav a:hover, .slideshow-nav a:focus {
2736
2737  background: #33B5E5
2738}
2739
2740.slideshow-nav a:active {
2741
2742  background: #1e799a;
2743  background: #ebebeb;
2744  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2745  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2746  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2747}
2748.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
2749  background: #33B5E5
2750}
2751/* --------------------------------------------------------------------------
2752Tabs
2753*/
2754ul.tabs {
2755  padding: 0;
2756  margin: 2em 0 0 0;
2757}
2758ul.tabs:before, ul.tabs:after {
2759  content: "";
2760  display: table;
2761  clear: both;
2762}
2763ul.tabs li {
2764  list-style-type: none;
2765  float: left;
2766}
2767ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
2768  display: block;
2769  height: 36px;
2770  line-height: 36px;
2771  padding: 0 15px;
2772  margin-right: 2px;
2773  color: #222;
2774  -moz-border-radius-topleft: 2px;
2775  -moz-border-radius-topright: 2px;
2776  -moz-border-radius-bottomright: px;
2777  -moz-border-radius-bottomleft: px;
2778  -webkit-border-radius: 2px 2px px px;
2779  border-radius: 2px 2px px px;
2780  border-top: solid 1px #ebebeb;
2781  border-left: solid 1px #ebebeb;
2782  border-right: solid 1px #ebebeb;
2783  background-color: #fff;
2784    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
2785    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
2786    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
2787    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
2788    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
2789    background-image: linear-gradient(top, #ffffff, #fafafa);
2790    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
2791EndColorStr='#fafafa');
2792}
2793ul.tabs li a:hover {
2794  color: #33B5E5;
2795}
2796ul.tabs li a.selected {
2797  height: 37px;
2798  color: #33B5E5;
2799  background-color: #f7f7f7;
2800  background-image: none;
2801  border-color: #ddd;
2802}
2803.tab-content {
2804  padding: 1.2em;
2805  margin: -1px 0 2em 0;
2806  -webkit-border-radius: 2px;
2807    -moz-border-radius: 2px;
2808    border-radius: 2px;
2809  border: solid 1px #ddd;
2810  background: #f7f7f7;
2811}
2812/* --------------------------------------------------------------------------
2813Feature Boxes
2814*/
2815.feature-box {
2816  width: 291px;
2817  height: 200px;
2818  position: relative;
2819  background: #F7F7F7;
2820}
2821.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
2822  z-index: 100;
2823  position: absolute;
2824  background-color: #aaa;
2825}
2826.box-border .top, .box-border .bottom {
2827  width: 291px;
2828  height: 1px;
2829}
2830.dialog .box-border .top,
2831.dialog .box-border .bottom { width:391px; }
2832
2833.box-border .left, .box-border .right {
2834  width: 1px;
2835  height: 8px;
2836}
2837.box-border .top { top: 0; left: 0 }
2838.box-border .top .left { top: 1px; left: 0 }
2839.box-border .top .right { top: 1px; right: 0 }
2840.box-border .bottom .left { top: -8px; left: 0 }
2841.box-border .bottom { top: 200px; left: 0 }
2842.box-border .bottom .right { top: -8px; right: 0 }
2843
2844.feature-box h4,
2845.dialog h4 {
2846    padding: 15px 18px 10px;
2847}
2848
2849.feature-box p,
2850.dialog p {
2851    margin: 10px 18px;
2852    padding:0;
2853}
2854.feature-box .link,
2855.dialog .link {
2856    border-top: 1px solid #dedede;
2857    bottom: 0;
2858    position: absolute;
2859    width: inherit;
2860}
2861.feature-box a, .feature-box h4,
2862.dialog a, .dialog h4 {
2863    -webkit-transition: color .4s ease;
2864    -moz-transition: color .4s ease;
2865    -o-transition: color .4s ease;
2866    transition: color .4s ease;
2867}
2868.feature-box:hover {
2869  cursor: pointer;
2870}
2871.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
2872.left, .feature-box:hover .right {
2873  background-color: #33B5E5;
2874}
2875.feature-box:hover h4, .feature-box:hover a {
2876  color: #33B5E5;
2877}
2878/* --------------------------------------------------------------------------
2879Page-Specific Styles
2880*/
2881.colors {
2882  position: relative;
2883  float: left;
2884  width: 92px;
2885  margin: 40px 0 20px;
2886}
2887.colors div {
2888  color: #fff;
2889  font-size: 11.5px;
2890  width: 82px;
2891  height: 82px;
2892  margin-top:-30px;
2893  line-height: 82px;
2894  text-align: center;
2895  border: solid 5px #fff;
2896  -webkit-border-radius: 50%;
2897  -moz-border-radius: 50%;
2898  border-radius: 50%;
2899}
2900
2901
2902
2903
2904
2905
2906
2907
2908
2909
2910
2911
2912
2913
2914/* ########### REFERENCE DOCS ################## */
2915
2916#packages-nav h2,
2917#classes-nav h2 {
2918  font-size:18px;
2919  margin:0;
2920  padding:0 0 0 4px;
2921}
2922
2923/* not sure if this is needed in the ref docs, disabling for now
2924.jd-descr h2 {
2925  margin:16px 0;
2926}
2927*/
2928
2929/* First paragraph of a content pages is a bit larger
2930   - note the very specific selector. */
2931.jd-descr > p:first-child,
2932.jd-descr > #tb-wrapper + p,
2933.jd-descr > #qv-wrapper + p {
2934  font-size: 16px;
2935  margin-bottom: 16px;
2936}
2937
2938/* page-top-right container for reference pages (holds
2939links to summary tables) */
2940#api-info-block {
2941  font-size:12px;
2942  margin:20px 0 0;
2943  font-weight:normal;
2944  float:right;
2945  text-align:right;
2946  color:#999;
2947  max-width:300px;
2948  font-size: 12px;
2949  line-height:14px;
2950}
2951
2952#api-info-block div.api-level {
2953  font-weight:bold;
2954  font-size:inherit;
2955  float:none;
2956  color:#222;
2957  padding:0;
2958  margin:0;
2959}
2960
2961/* inheritance table */
2962table.inhtable>tbody>tr>td {
2963  padding-left:0;
2964}
2965table.inhtable>tbody>tr>td div:first-of-type {
2966  padding-left:12px;
2967}
2968
2969.jd-inheritance-table {
2970  border-spacing:0;
2971  margin:1em 0;
2972  padding:0;
2973  background-color:transparent;
2974}
2975.jd-inheritance-table tr td {
2976  border: none;
2977  margin: 0;
2978  padding: 0;
2979  background-color:transparent;
2980}
2981.jd-inheritance-table .jd-inheritance-space {
2982  width:2em;
2983}
2984.jd-inheritance-table .jd-inheritance-interface-cell {
2985  padding-left: 17px;
2986}
2987
2988
2989/* the link inside a sumtable for "Show All/Hide All" */
2990.toggle-all {
2991  display:block;
2992  float:right;
2993  font-weight:normal;
2994  font-size:0.9em;
2995}
2996
2997/* adjustments for in/direct subclasses tables */
2998.jd-sumtable-subclasses {
2999  margin: 1em 0 0 0;
3000  max-width:968px;
3001  background-color:transparent;
3002}
3003
3004/* extra space between end of method name and open-paren */
3005.sympad {
3006  margin-right: 2px;
3007}
3008
3009/* adjustments for the expando table-in-table */
3010.jd-sumtable-expando {
3011  margin:.5em 0;
3012  padding:0;
3013}
3014
3015/* a div that holds a short description */
3016.jd-descrdiv {
3017  padding:3px 1em 0 1em;
3018  margin:0;
3019  border:0;
3020}
3021
3022#jd-content img.jd-expando-trigger-img {
3023  padding:0 4px 4px 0;
3024  margin:0;
3025}
3026
3027.jd-sumtable-subclasses div#subclasses-direct,
3028.jd-sumtable-subclasses div#subclasses-indirect {
3029  /* left margin matches width of the toggle image,
3030     so this section aligns with the text above */
3031  margin:0 0 0 34px;
3032}
3033
3034
3035
3036/********* MEMBER REF *************/
3037
3038
3039.jd-details {
3040/*  border:1px solid #669999;
3041  padding:4px; */
3042  margin:0 0 1em;
3043}
3044
3045/* API reference: a container for the
3046.tagdata blocks that make up the detailed
3047description */
3048.jd-details-descr {
3049  padding:0;
3050  margin:.5em .25em;
3051}
3052
3053/* API reference: a block containing
3054a detailed description, a params table,
3055seealso list, etc */
3056.jd-tagdata {
3057  margin:.5em 1em;
3058}
3059
3060.jd-tagdata p {
3061  margin:0 0 1em 1em;
3062}
3063
3064/* API reference: adjustments to
3065the detailed description block */
3066.jd-tagdescr {
3067  margin:.25em 0 .75em 0;
3068}
3069
3070.jd-tagdescr ol,
3071.jd-tagdescr ul {
3072  margin:0 2.5em;
3073  padding:0;
3074}
3075
3076.jd-tagdescr table,
3077.jd-tagdescr img {
3078  margin:.25em 1em;
3079}
3080
3081.jd-tagdescr li {
3082margin:0 0 .25em 0;
3083padding:0;
3084}
3085
3086/* API reference: heading marking
3087the details section for constants,
3088attrs, methods, etc. */
3089h4.jd-details-title {
3090  font-size:1.15em;
3091  background-color: #E2E2E2;
3092  margin:1.5em 0 .6em;
3093  padding:3px 95px 3px 3px; /* room for api-level */
3094}
3095body.google h4.jd-details-title {
3096  background-color: #FFF;
3097  padding-top:5px;
3098  border-top: 1px solid #ccc;
3099}
3100
3101h4.jd-tagtitle {
3102  padding:0;
3103}
3104
3105h4 .normal {
3106  font-weight:normal;
3107}
3108
3109/* API reference: heading for "Parameters", "See Also", etc.,
3110in details sections */
3111h5.jd-tagtitle {
3112  padding:0 0 .25em 0;
3113  font-size:1em;
3114}
3115
3116.jd-tagtable {
3117  margin:0;
3118  background-color:transparent;
3119  width:auto;
3120}
3121
3122.jd-tagtable td,
3123.jd-tagtable th {
3124  border:none;
3125  background-color:#fff;
3126  vertical-align:top;
3127  font-weight:normal;
3128  padding:2px 10px;
3129}
3130
3131.jd-tagtable th {
3132  font-style:italic;
3133}
3134
3135
3136/* Inline api level indicator for methods */
3137div.api-level {
3138  font-size:.8em;
3139  font-weight:normal;
3140  color:#999;
3141  float:right;
3142  padding:0 8px 0;
3143  margin-top:-35px;
3144}
3145
3146table.jd-tagtable td,
3147table.jd-tagtable th {
3148  background-color:transparent;
3149}
3150
3151table.jd-tagtable th {
3152  color:inherit;
3153}
3154
3155/************ STICKY NAV BAR ******************/
3156
3157#context {
3158  clear: both;
3159  padding-top: 14px;
3160}
3161#context .breadcrumb {
3162  float: left;
3163  margin-bottom: 10px;
3164}
3165#context .util {
3166  float: right;
3167  margin-right: 20px;
3168}
3169
3170.breadcrumb {
3171  list-style: none;
3172  margin: 0;
3173  padding: 0;
3174  position: relative;
3175}
3176.breadcrumb li {
3177  float: left;
3178  padding: 0 20px 0 0;
3179  color: #000;
3180  white-space: nowrap;
3181}
3182.breadcrumb li a {
3183  color: #000;
3184}
3185.breadcrumb li:after {
3186  content: url(../images/breadcrumb.png);
3187  position: relative;
3188  top: 1px;
3189  left: 10px;
3190  width: 5px;
3191  height: 10px;
3192}
3193.breadcrumb li.current {
3194  font-weight: 700;
3195}
3196.breadcrumb li.current:after {
3197  display: none;
3198}
3199
3200/* offset the <a name=""> tags to account for sticky nav */
3201body.reference a[name] {
3202  visibility: hidden;
3203  display: block;
3204  position: relative;
3205  top: -56px;
3206}
3207
3208
3209/* Quicknav */
3210.btn-quicknav {
3211  width:20px;
3212  height:28px;
3213  float:left;
3214  margin-left:6px;
3215  padding-right:10px;
3216  position:relative;
3217  cursor:pointer;
3218  border-right:1px solid #CCC;
3219}
3220
3221.btn-quicknav a {
3222  zoom:1;
3223  position:absolute;
3224  top:13px;
3225  left:5px;
3226  display:block;
3227  text-indent:-9999em;
3228  width:10px;
3229  height:5px;
3230  background:url(../images/quicknav_arrow.png) no-repeat;
3231}
3232
3233.btn-quicknav a.arrow-active {
3234  background-position: 0 -5px;
3235  display:none;
3236}
3237
3238#header-wrap.quicknav a.arrow-inactive {
3239  display:none;
3240}
3241
3242.btn-quicknav.active a.arrow-active {
3243  display:block;
3244}
3245
3246#header-wrap.quicknav .nav-x li {
3247  min-width:160px;
3248  margin-right:20px;
3249}
3250
3251#header-wrap.quicknav li.last {
3252  margin-right:0px;
3253}
3254
3255#quicknav {
3256 float:none;
3257 clear:both;
3258 margin-left:0;
3259 margin-top:-30px;
3260 display:none;
3261 overflow:hidden;
3262}
3263
3264#header-wrap.quicknav #quicknav {
3265
3266}
3267
3268#quicknav ul {
3269  margin:10px 0;
3270  padding:0;
3271}
3272
3273#quicknav ul li.about {
3274  border-top:1px solid #9933CC;
3275}
3276
3277#quicknav ul li.design {
3278  border-top:1px solid #33b5e5;
3279}
3280
3281#quicknav ul li.develop {
3282  border-top:1px solid #FF8800;
3283}
3284
3285#quicknav ul li.distribute {
3286  border-top:1px solid #99cc00;
3287}
3288
3289#quicknav ul li {
3290  display:block;
3291  float:left;
3292  margin:0 20px 0 0;
3293  min-width:140px;
3294}
3295
3296#quicknav ul li.last {
3297  margin-right:0px;
3298}
3299
3300#quicknav ul li ul li {
3301  float:none;
3302}
3303
3304#quicknav ul li ul li a {
3305  color:#222;
3306}
3307
3308#quicknav ul li li ul,
3309#quicknav ul li li ul li {
3310  margin:0;
3311}
3312
3313#quicknav ul li li ul li:before {
3314  content:"\21B3";
3315}
3316
3317#header-wrap {
3318   -webkit-transition: all 0.25s ease-out;
3319      -moz-transition: all 0.25s ease-out;
3320       -ms-transition: all 0.25s ease-out;
3321        -o-transition: all 0.25s ease-out;
3322           transition: all 0.25s ease-out;
3323
3324}
3325
3326#header-wrap.quicknav {
3327  height:216px;
3328
3329}
3330
3331.moremenu {
3332  float: right;
3333  position: relative;
3334  width: 50px;
3335  height:28px;
3336  display: block;
3337  margin-top:-3px;
3338  margin-bottom:7px;
3339  overflow:hidden;
3340  -webkit-transition: width 0.25s ease;
3341     -moz-transition: width 0.25s ease;
3342       -o-transition: width 0.25s ease;
3343          transition: width 0.25s ease;
3344}
3345
3346.moremenu #more-btn {
3347  width:40px;
3348  height:28px;
3349  background:url(../images/icon_more.png) no-repeat;
3350  border-left:1px solid #CCC;
3351  float:left;
3352  cursor:pointer;
3353}
3354
3355.moremenu:hover #more-btn {
3356  background-position:0 -28px;
3357}
3358
3359.morehover {
3360  position:absolute;
3361  right:6px;
3362  top:-9px;
3363  width:40px;
3364  height:35px;
3365  z-index:99;
3366  overflow:hidden;
3367
3368  -webkit-opacity:0;
3369     -moz-opacity:0;
3370       -o-opacity:0;
3371          opacity:0;
3372
3373  -webkit-transform-origin:100% 0%;
3374     -moz-transform-origin:100% 0%;
3375       -o-transform-origin:100% 0%;
3376          transform-origin:100% 0%;
3377
3378  -webkit-transition-property: -webkit-opacity;
3379  -webkit-transition-duration: .25s;
3380  -webkit-transition-timing-function:ease;
3381
3382  -moz-transition-property: -moz-opacity;
3383  -moz-transition-duration: .25s;
3384  -moz-transition-timing-function:ease;
3385
3386  -o-transition-property: -o-opacity;
3387  -o-transition-duration: .25s;
3388  -o-transition-timing-function:ease;
3389
3390  transition-property: opacity;
3391  transition-duration: .25s;
3392  transition-timing-function:ease;
3393}
3394
3395.morehover:hover,
3396.morehover.hover {
3397  opacity:1;
3398  height:385px;
3399  width:268px;
3400  -webkit-transition-property:height,  -webkit-opacity;
3401}
3402
3403.morehover .top {
3404  width:268px;
3405  height:39px;
3406  background:url(../images/more_top.png) no-repeat;
3407}
3408
3409.morehover .mid {
3410  width:228px;
3411  background:url(../images/more_mid.png) repeat-y;
3412  padding:10px 20px 0 20px;
3413}
3414
3415.morehover .mid .header {
3416  border-bottom:1px solid #ccc;
3417  font-weight:bold;
3418}
3419
3420.morehover .bottom {
3421  width:268px;
3422  height:6px;
3423  background:url(../images/more_bottom.png) no-repeat;
3424}
3425
3426.morehover ul {
3427  margin:10px 10px 20px 0;
3428}
3429
3430.morehover ul li {
3431  list-style:none;
3432}
3433
3434.morehover ul li.active a,
3435.morehover ul li.active a:hover {
3436  color:#222 !important;
3437}
3438
3439.morehover ul li.active img {
3440  margin-right:4px;
3441}
3442
3443
3444
3445
3446/* MARQUEE */
3447.slideshow-container {
3448  width:100%;
3449  overflow:hidden;
3450  position:relative;
3451}
3452.slideshow-container .slideshow-prev {
3453  position:absolute;
3454  top:50%;
3455  left:0px;
3456  margin-top:-36px;
3457  z-index:99;
3458}
3459.slideshow-container .slideshow-next {
3460  position:absolute;
3461  top:50%;
3462  margin-top:-36px;
3463  z-index:99;
3464  right:0px;
3465}
3466
3467.slideshow-container .pagination {
3468  position:absolute;
3469  bottom:20px;
3470  width:100%;
3471  text-align:center;
3472  z-index:99;
3473}
3474.slideshow-container .pagination ul {
3475  margin:0;
3476}
3477.slideshow-container .pagination ul li{
3478  display: inline-block;
3479  width:12px;
3480  height:12px;
3481  text-indent:-8000px;
3482  list-style:none;
3483  margin: 0 3px;
3484  border-radius:6px;
3485  background-color:#ddd;
3486  cursor:pointer;
3487        -webkit-transition:color .5s ease-in;
3488        -moz-transition:color .5s ease-in;
3489        -o-transition:color .5s ease-in;
3490        transition:color .5s ease-in;
3491}
3492.slideshow-container .pagination ul li:hover {
3493  background-color:#bbb;
3494}
3495.slideshow-container .pagination ul li.active {
3496  background-color:#6ab344;
3497}
3498.slideshow-container .pagination ul li.active:hover {
3499  background-color:#6ab344;
3500}
3501.slideshow-container ul li {
3502  display:inline;
3503  list-style:none;
3504}
3505
3506
3507#landing h1 {
3508  padding:17px 0 20px 0 !important;
3509}
3510
3511a.download-sdk {
3512    float:right;
3513    margin:-10px 0;
3514    height:30px;
3515    padding-top:4px;
3516    padding-bottom:0px;
3517}
3518
3519#searchResults.wrap {
3520    max-width:940px;
3521    border-bottom:1px solid #e5e5e5;
3522}
3523
3524#searchResults.wrap #leftSearchControl {
3525  min-height:700px
3526}
3527
3528
3529
3530
3531
3532
3533
3534
3535
3536
3537/*
3538 * CSS Styles that are needed by jScrollPane for it to operate correctly.
3539 */
3540
3541.jspContainer {
3542  overflow: hidden;
3543  position: relative;
3544}
3545
3546.jspPane {
3547  position: absolute;
3548  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
3549}
3550
3551.jspVerticalBar {
3552  position: absolute;
3553  top: 0;
3554  right: 0;
3555  width: 4px;
3556  height: 100%;
3557  background: #f5f5f5;
3558}
3559
3560.jspHorizontalBar {
3561  position: absolute;
3562  bottom: 0;
3563  left: 0;
3564  width: 100%;
3565  height: 4px;
3566  background: #f5f5f5;
3567}
3568
3569.jspVerticalBar *,
3570.jspHorizontalBar * {
3571  margin: 0;
3572  padding: 0;
3573}
3574.jspCap {
3575  display: block;
3576}
3577
3578.jspVerticalBar .jspCap {
3579  height: 4px;
3580}
3581
3582.jspHorizontalBar .jspCap {
3583  width: 0;
3584  height: 100%;
3585}
3586
3587.jspHorizontalBar .jspCap {
3588  float: left;
3589}
3590
3591.jspTrack {
3592  position: relative;
3593}
3594
3595.jspDrag {
3596  background: #ccc;
3597  position: relative;
3598  top: 0;
3599  left: 0;
3600  cursor: pointer;
3601}
3602
3603.jspDrag:hover,
3604.jspDrag:active {
3605  border-color: #09c;
3606  background-color: #4cadcb;
3607  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
3608  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
3609  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
3610  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
3611  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
3612  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
3613  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
3614}
3615
3616.jspHorizontalBar .jspTrack,
3617.jspHorizontalBar .jspDrag {
3618  float: left;
3619  height: 100%;
3620}
3621
3622.jspArrow {
3623  background: #999;
3624  text-indent: -20000px;
3625  display: block;
3626  cursor: pointer;
3627}
3628
3629.jspArrow.jspDisabled {
3630  cursor: default;
3631  background: #ccc;
3632}
3633
3634.jspVerticalBar .jspArrow {
3635  height: 16px;
3636}
3637
3638.jspHorizontalBar .jspArrow {
3639  width: 16px;
3640  float: left;
3641  height: 100%;
3642}
3643
3644.jspVerticalBar .jspArrow:focus {
3645  outline: none;
3646}
3647
3648.jspCorner {
3649  float: left;
3650  height: 100%;
3651}
3652
3653/* Yuk! CSS Hack for IE6 3 pixel bug :( */
3654* html .jspCorner {
3655  margin: 0 -3px 0 0;
3656}
3657/******* end of jscrollpane *********/
3658
3659
3660
3661
3662
3663/************ DEVELOP HOMEPAGE ******************/
3664
3665/* Slideshow */
3666.slideshow-develop {
3667  height: 316px;
3668  width: 940px;
3669  position: relative;
3670  overflow:hidden;
3671}
3672.slideshow-develop .frame {
3673  width: 940px;
3674  height: 316px;
3675}
3676.slideshow-develop img.play {
3677  max-width:350px;
3678  max-height:240px;
3679  margin:20px 0 0 90px;
3680  -webkit-transform: perspective(800px ) rotateY( 35deg );
3681  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3682  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3683  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3684}
3685.slideshow-develop img.play.no-shadow {
3686    box-shadow: none;
3687    -moz-box-shadow: none;
3688    -webkit-box-shadow: none;
3689}
3690.slideshow-develop img.play.no-transform {
3691  -webkit-transform: none;
3692}
3693.slideshow-develop a.slideshow-next {
3694  background: url(../images/arrow-right-develop.png);
3695}
3696.slideshow-develop a.slideshow-prev {
3697  background: url(../images/arrow-left-develop.png);
3698}
3699.slideshow-develop .content-right {
3700  float: left;
3701}
3702.slideshow-develop .content-right h2 {
3703  padding:0;
3704  padding-bottom:10px;
3705  border:none;
3706  font-size:24px;
3707}
3708.slideshow-develop .item {
3709  height: 300px;
3710  width: 940px;
3711}
3712.slideshow-develop .pagination ul li.active {
3713  background-color: #F80;
3714}
3715.slideshow-develop .pagination ul li.active:hover {
3716  background-color: #F80;
3717}
3718.slideshow-develop .item hr {
3719  margin:5px 0 10px;
3720}
3721.slideshow-develop .item p {
3722  margin:10px 0;
3723}
3724.slideshow-develop .item p.title-intro {
3725  position:absolute;
3726  margin:0;
3727}
3728
3729/* Feeds */
3730.feed ul {
3731  margin: 0;
3732}
3733.feed .feed-nav {
3734  height: 25px;
3735  border-bottom: 1px solid #CCC;
3736}
3737.feed .feed-nav li {
3738  list-style: none;
3739  float: left;
3740  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
3741  margin-right: 25px;
3742  cursor: pointer;
3743}
3744.feed .feed-nav li.active {
3745  color: #000;
3746  border-bottom: 4px solid #F80;
3747}
3748.feed .feed-container {
3749  overflow: hidden;
3750  width: 460px;
3751}
3752.feed .feed-container .feed-frame {
3753  width: 1000px;
3754}
3755.feed .feed-container .feed-frame ul {
3756  float: left;
3757  width:460px;
3758}
3759.feed .feed-container .feed-frame ul ul {
3760  float: none;
3761  margin:10px 0 0 30px;
3762}
3763.feed .feed-container .feed-frame li {
3764  list-style: none;
3765  margin: 20px 0 20px 0;
3766  width: 460px;
3767  height:93px;
3768}
3769.feed .feed-container .feed-frame li.playlist {
3770  height:auto;
3771}
3772.feed .feed-container .feed-frame li.playlist a {
3773  height:93px;
3774  display:block;
3775}
3776.feed .feed-container .feed-frame li.more {
3777  height:20px;
3778  margin:10px 0 5px 5px;
3779}
3780.feed .feed-container .feed-frame li.more a {
3781  height:inherit;
3782}
3783.feed .feed-container .feed-frame li.playlist-video {
3784  list-style: none;
3785  margin: 0;
3786  width: 460px;
3787  height:55px;
3788  font-size:12px;
3789}
3790.feed .feed-container .feed-frame li.playlist-video a {
3791  height:45px;
3792  padding:5px;
3793}
3794.feed .feed-container .feed-frame li.playlist-video h5 {
3795  font-size:12px;
3796  line-height:13px;
3797  padding:0;
3798}
3799.feed .feed-container .feed-frame li.playlist-video p {
3800  margin:5px 0 0;
3801  line-height:15px;
3802}
3803.feed-container .feed-frame div.feed-image {
3804  float: left;
3805  border: 1px solid #999;
3806  margin:0 20px 0 0;
3807  width:122px;
3808  height:92px;
3809  background:url('../images/blog-default.png') no-repeat 0 0;
3810  background-size:180px;
3811}
3812#jd-content .feed .feed-container .feed-frame li img {
3813  float: left;
3814  border: 1px solid #999;
3815  margin:0 20px 0 0;
3816  width:122px;
3817  height:92px;
3818}
3819#jd-content .feed .feed-container .feed-frame li.playlist-video img {
3820  width:inherit;
3821  height:inherit;
3822}
3823
3824.feed .feed-container .feed-frame li a,
3825.feed .feed-container .feed-frame li a:active {
3826  color:#555 !important;
3827}
3828
3829.feed .feed-container .feed-frame li a:hover,
3830.feed .feed-container .feed-frame li a:hover * {
3831  color:#7AA1B0 !important;
3832}
3833
3834/* Video player */
3835#player-wrapper {
3836  display:none;
3837  margin: -1px auto 0;
3838  position: relative;
3839  max-width: 940px;
3840  height: 0px;
3841}
3842#player-frame {
3843  background: #EFEFEF;
3844  border: 1px solid #CCC;
3845  padding: 0px 207px;
3846  z-index: 10; /* stay above marque, but below search suggestions */
3847  width: 525px;
3848  height: 330px;
3849  position: relative;
3850}
3851#player-frame .close {
3852  position: absolute;
3853  right: 8px;
3854  bottom: 4px;
3855  width: 16px;
3856  height: 16px;
3857  margin: 0;
3858  text-indent: -1000em;
3859  top: 6px;
3860  background: url(../images/close.png) no-repeat 0 0;
3861  z-index:9999;
3862}
3863#player-frame .close:hover, #player-frame .close:focus {
3864  background-position: -16px 0;
3865  cursor:pointer;
3866}
3867
3868
3869
3870/************ DEVELOP TOPIC CONTAINERS ************/
3871
3872.landing-banner,
3873.landing-docs {
3874  margin:20px 0;
3875}
3876.landing-banner > div:first-child,
3877.landing-docs > div:first-child,
3878.landing-docs > .col-12 {
3879  margin-left:0;
3880  min-height:280px;
3881}
3882.landing-banner.short > div {
3883  min-height:50px;
3884}
3885.landing-banner > div:last-child,
3886.landing-docs > div:last-child,
3887.landing-docs > .col-12 {
3888  margin-right:0;
3889}
3890
3891.landing-banner > div > *:last-child {
3892  margin-bottom:0;
3893}
3894.landing-banner h1 {
3895  padding-top:16px;
3896  padding-bottom:24px;
3897}
3898.landing-docs,
3899.landing-banner {
3900  clear:both;
3901  overflow:hidden;
3902}
3903.landing-docs h3 {
3904  font-size:14px;
3905  line-height:21px;
3906  color:#555;
3907  text-transform:uppercase;
3908  border-bottom:1px solid #CCC;
3909  padding:0 0 20px;
3910}
3911.landing-docs a {
3912  color:#333 !important;
3913}
3914
3915.landing-docs a:hover,
3916.landing-docs a:hover * {
3917  color:#7AA1B0 !important
3918}
3919
3920.landing-docs .normal-links a {
3921  color:#039BE5 !important;
3922}
3923
3924.plusone {
3925  float:right;
3926}
3927
3928
3929
3930.next-docs {
3931  border-top:1px solid #ccc;
3932  margin:40px 0 0;
3933  padding:5px 0 0;
3934  clear:left;
3935  overflow:hidden;
3936}
3937.next-docs div:first-child {
3938  margin-left:0;
3939}
3940.next-docs div:last-child {
3941  margin-right:0;
3942}
3943
3944.next-docs h2 {
3945  font-size:14px;
3946  line-height:21px;
3947  color:#555;
3948  text-transform:uppercase;
3949  border-bottom:none;
3950  padding:5px 0 1em;
3951}
3952
3953
3954
3955/************* HOME/LANDING PAGE *****************/
3956
3957.slideshow-home {
3958  height: 500px;
3959  width: 940px;
3960  border-bottom: 1px solid #CCC;
3961  position: relative;
3962  margin: 0;
3963}
3964.slideshow-home .frame {
3965  width: 940px;
3966  height: 500px;
3967}
3968.slideshow-home .content-left {
3969  float: left;
3970  text-align: center;
3971  vertical-align: center;
3972  margin: 0 0 0 35px;
3973}
3974.slideshow-home .content-right {
3975  margin: 80px 0 0 0;
3976}
3977.slideshow-home .content-right p {
3978  margin-bottom: 10px;
3979}
3980.slideshow-home .content-right p:last-child {
3981  margin-top: 15px;
3982}
3983.slideshow-home .content-right h1 {
3984  padding:0;
3985}
3986.slideshow-home .item {
3987  height: 500px;
3988  width: 940px;
3989}
3990.home-sections {
3991  padding: 30px 20px 20px;
3992  margin: 20px 0;
3993  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
3994}
3995.home-sections ul {
3996  margin: 0;
3997}
3998.home-sections ul li {
3999  float: left;
4000  display: block;
4001  list-style: none;
4002  width: 170px;
4003  height: 35px;
4004  border: 1px solid #ccc;
4005  background: white;
4006  margin-right: 10px;
4007  border-radius: 1px;
4008  -webkit-border-radius: 1px;
4009  -moz-border-radius: 1px;
4010  box-shadow: 1px 1px 5px #EEE;
4011  -webkit-box-shadow: 1px 1px 5px #EEE;
4012  -moz-box-shadow: 1px 1px 5px #EEE;
4013  background: white;
4014}
4015.home-sections ul li:hover {
4016  background: #F9F9F9;
4017  border: 1px solid #CCC;
4018}
4019.home-sections ul li a,
4020.home-sections ul li a:hover {
4021  font-weight: bold;
4022  margin-top: 8px;
4023  line-height: 18px;
4024  float: left;
4025  width: 100%;
4026  text-align: center;
4027  color: #039BE5 !important;
4028}
4029.home-sections ul li a {
4030  font-weight: bold;
4031  margin-top: 8px;
4032  line-height: 18px;
4033  float: left;
4034  width:100%;
4035  text-align:center;
4036}
4037.home-sections ul li img {
4038  float: left;
4039  margin: -8px 0 0 10px;
4040}
4041.home-sections ul li.last {
4042  margin-right: 0px;
4043}
4044
4045/************ DISTRIBUTE PAGES ******************/
4046
4047.article-detail #body-content {
4048  padding-top: 10px;
4049}
4050
4051/* A container for grid sets with uppercase h3 and rule */
4052.dynamic-grid h3 {
4053  font-size:14px;
4054  line-height:21px;
4055  color:#555;
4056  text-transform:uppercase;
4057  border-bottom:1px solid #CCC;
4058  padding:8px 0 14px 1px;
4059  clear:both;
4060}
4061
4062.top-right-float {
4063  float: right;
4064}
4065
4066.clearfloat {
4067  float: none;
4068  clear: both;
4069}
4070
4071
4072/**
4073 * UTILITIES
4074 */
4075
4076
4077.border-box {
4078  box-sizing: border-box;
4079}
4080
4081.vertical-center-outer {
4082  display: table;
4083  height: 100%;
4084  width: 100%;
4085}
4086
4087.vertical-center-inner {
4088  display: table-cell;
4089  vertical-align: middle;
4090}
4091
4092/**
4093 * TYPE STYLES
4094 */
4095
4096.landing-h1 {
4097  color: #44555d;
4098  font-weight: 300;
4099  font-size: 56px;
4100  line-height: 80px;
4101  text-align: center;
4102  letter-spacing: -1px;
4103  padding-bottom: 6px;
4104}
4105
4106.landing-pre-h1 {
4107  font-weight: 400;
4108  font-size: 28px;
4109  color: #93B73F;
4110  line-height: 36px;
4111  text-align: center;
4112  letter-spacing: -1px;
4113  text-transform: uppercase;
4114}
4115
4116.landing-h1.hero {
4117  text-align: left;
4118  color: #fff;
4119}
4120
4121.landing-h2 {
4122  font-weight: 300;
4123  font-size: 42px;
4124  line-height: 64px;
4125  text-align: center;
4126}
4127
4128.landing-subhead {
4129  color: #78868d;
4130  font-size: 20px;
4131  font-weight: 300;
4132  line-height: 32px;
4133  text-align: center;
4134}
4135.landing-subhead.hero {
4136  text-align: left;
4137  color: white;
4138}
4139
4140.landing-hero-description {
4141  text-align: left;
4142  margin: 1em 0;
4143}
4144
4145.landing-hero-description p {
4146  font-weight: 300;
4147  margin: 0;
4148  font-size: 18px;
4149  line-height: 24px;
4150}
4151
4152.landing-body .landing-small {
4153  font-size: 14px;
4154  line-height: 19px;
4155}
4156
4157.landing-body.landing-align-center {
4158  text-align: center;
4159}
4160
4161.landing-align-left {
4162  text-align: left;
4163}
4164
4165/**
4166 * LAYOUT
4167 */
4168
4169.landing-section {
4170  background: #eceff1;
4171  clear: both;
4172  padding: 80px 20px 80px;
4173  margin: 0 -20px;
4174  text-rendering: optimizeLegibility;
4175}
4176
4177@media (max-width: 719px) {
4178  .landing-section {
4179    margin-left: -10px;
4180    margin-right: -10px;
4181    padding-left: 10px;
4182    padding-right: 10px;
4183  }
4184}
4185
4186.landing-short-section {
4187  padding: 40px 10px 28px;
4188}
4189
4190.landing-gray-background {
4191  background-color: #b0bec5;
4192}
4193
4194.landing-white-background {
4195  background-color: white;
4196}
4197
4198.landing-red-background {
4199  color: white;
4200  background-color: hsl(8, 70%, 54%);
4201}
4202
4203.landing-red-background .landing-h1 {
4204  color: white;
4205}
4206
4207.landing-red-background .landing-subhead {
4208  color: hsl(8, 71%, 84%);
4209  text-align: left;
4210}
4211
4212
4213.preview-hero {
4214  height: calc(100vh - 128px);
4215  min-height: 504px;
4216  padding-top: 0;
4217  padding-bottom: 0;
4218  background-image: url(../../preview/images/hero.jpg);
4219  background-size: cover;
4220  background-position: right center;
4221  color: white;
4222  position: relative;
4223  overflow: hidden;
4224}
4225
4226.wear-hero {
4227  height: calc(100vh - 128px);
4228  min-height: 504px;
4229  padding-top: 0;
4230  padding-bottom: 0;
4231  background-image: url(../../wear/images/hero.jpg);
4232  background-size: cover;
4233  background-position: top center;
4234  color: white;
4235  position: relative;
4236  overflow: hidden;
4237}
4238
4239.tv-hero {
4240  height: calc(100vh - 128px);
4241  min-height: 504px;
4242  padding-top: 0;
4243  padding-bottom: 0;
4244  background-image: url(../../tv/images/hero.jpg);
4245  background-size: cover;
4246  background-position: right center;
4247  color: white;
4248  position: relative;
4249  overflow: hidden;
4250}
4251
4252.auto-hero {
4253  height: calc(100vh - 128px);
4254  min-height: 504px;
4255  padding-top: 0;
4256  padding-bottom: 0;
4257  background-image: url(../../auto/images/hero.jpg);
4258  background-size: cover;
4259  background-position: right center;
4260  color: white;
4261  position: relative;
4262  overflow: hidden;
4263}
4264
4265.landing-hero-scrim {
4266  background: black;
4267  height: 100%;
4268  left: 0;
4269  position: absolute;
4270  opacity: .2;
4271  width: 100%;
4272}
4273
4274.landing-hero-wrap {
4275  margin: 0 auto;
4276  max-width: 940px;
4277  clear: both;
4278  height: 100%;
4279  position: relative;
4280}
4281
4282.landing-section-header {
4283  margin-bottom: 40px;
4284}
4285
4286.landing-hero-wrap .landing-section-header {
4287  margin-bottom: 16px;
4288}
4289
4290.landing-body {
4291  font-size: 18px;
4292  line-height: 24px;
4293}
4294
4295.landing-video-link {
4296  white-space: nowrap;
4297  display: inline-block;
4298  padding: 16px 32px 16px 82px;
4299  font-size: 18px;
4300  font-weight: 400;
4301  line-height: 24px;
4302  cursor: pointer;
4303  color: hsla(0, 0%, 100%, .8);
4304  -webkit-user-select: none;
4305     -moz-user-select: none;
4306       -o-user-select: none;
4307  user-select: none;
4308  -webkit-transition: .2s color ease-in-out;
4309     -moz-transition: .2s color ease-in-out;
4310       -o-transition: .2s color ease-in-out;
4311  transition: .2s color ease-in-out;
4312}
4313
4314.landing-video-link:before {
4315  height: 64px;
4316  width: 64px;
4317  display: inline-block;
4318  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFuklEQVR42u2dXWgcVRSAV9LWtBBTTZVWUhNqEQtq1QeroDRKFRFsROqTYPuo+JCiIoJKFC0USqlUfCiowRcfrBgVUUElefAPkW5T8aeaGn9aRbFsjP0x2cx8PuRMvFxmdjeb2Z17Z8+B85DsZPbO+eaec3/OPSkABdXsVI2gABSAqgJQAKoKQAGoKgAFoKoAFICqAlAAqgpAAai6DqDRAiwDeoFtwB7gPaAInABKwKToCWAMeB/YDdwJrAWWNLh9+QMAXABsBQ4A3wFTwAxQBmaBAAhjNJDPy3L938BXwAvArUCHAkh+kCXAVcA+YBw4bRg7MngtkgTlDPA98CywHmhTAP8/xCbgVeAvMZZpwDQllN7xB/AysKGlAQAXAvuBkzW85UVgCBgENlfQQbmuWAXELPAnsAvoaikAQBtwh/j3coLhS2LIfqCzzu/plL8fkvvFgZiR4L2lHrfkHQBgpQTFUwmGnwC212v0KjC2y/3jQPwDPA+05xYAcBHwubx1YZzhC02QBBBRbxgBzssdAOBy4JgRZE0ZTPuNr7FHDCbEhqNAd24AAN0yUbID7QSwsZChABut3hANXY8Bq70HIMb/Ocb4w81+66v0hmGrN0QQ1ngLQJYRvpWHMWWo4KDIaMnuCcVKgdlZAGL8t2J8vpPGrwChDLyWBMFlAA8D0z4ZvwKEs8D93gCQEc9Jy/jFgkdizaRDGUSs8wXAu1bQLQE9ngHosWbPAXDQeQAypT9rBd3+gociyxi2K9riLABZUj5iuZ6RgsciM2OzFxw2A7JrAO6VwGtKTwpG+Anoy9AVmb3gDHCPcwCAFcChRox6jPu9CazMeFQUAKNRL3AJwE2yopjq228BQPZ/d2bcCyaBTa4BeNGa8Q6naIA4GQWubiKEYWvBbp8zAGQt5VfL/fQ3GEAkTzXDLVkjokA2k5a7AuA2GaLNj/tTfvhq0pQgbcwLQtlQusYVALtlzSR191MjADNI9zbJDZWBR10BMGr5/4GMADQ0SAMDlht62xUAxy0AmzMEEMnhtIO0ZF2YAH5wITd0hQw/5wE04M1bjDyXZpC2hqMlYGnWAHqBf40APOEYgChI35VSWyasWfGqrAH0WVkOIw4CSC1IG2tDoSy7XJE1gPs8ArDoIG0BmJGk30wBDHgGYFFBOgbAtqwB7GxxAHerC8rOBU0Dt2gQzjYIb8gawDor+6HVhqFdrkzEwhabiAVOTMSkUb+06FLEUVfWgj5q0cW4g64AeNo66ZLlcnTDNmesBN4y8KArAG6QU42ttCEzBVzpCoAO4EfLDeV5SzIEvgHaXdqUP2BlQud1Ux55zj2uZUX02cPRnKalRLmu17qYmPWF5YbymJgVAh8Ay5wCII3ZEZOYm6fURGT2u9X43Mnk3CDHybmfmRVYXExPv9nKEcpLejqSC3SjdY2TBzTesHqB7wc0onTEV2KucxLApXKkJy9HlAI5anuJFwCkYQ/EuCJfD+mdBnYkXOssgHY53un7MdVZ4CVgqVcADAhjMafkfTioHc14P04yvvMApIEXy5F/+7S8y6UKolPyR4BVVf7Wi2IdawwIPhTrmAW+rmZ8bwBIQ7vloXwoVzNWS6UUrwAYy9YfOlqwKZDkgneA5Qu4l3cly84F9sqGhislywLmaozuYoGFXr0DII1ukxP1hxJ6QzR7HqLxRfumZaRzXZ3f4XXZyi7gCeB3kqsnzs+kSb9s5XHgMeD8RTxDLgq3rmeuYuFvNYCoR8wqujNi+L3UWBcu9wAMt3QZ8LiMlk5RuU50teq6kcEDgTolveIRYHUQBOek1O5cFu/ukLz7/ZJgNSm+OirebWpgaPS7slxfAr4EngGuX8jopqUBxGzyrAVuB54EXgc+lV4yLhO8cfn5E+ZqUD8kBu9sQvv0Hzj4rmoEBaAAVBWAAlBVAApAVQEoAFUFoABUFYACUFUACkC1CfofXVRJocowZVYAAAAASUVORK5CYII=);
4319  background-size: contain;
4320  position: absolute;
4321  content: "";
4322  opacity: .7;
4323  margin-top: -19px;
4324  margin-left: -64px;
4325  -webkit-transition: .2s opacity ease-in-out;
4326     -moz-transition: .2s opacity ease-in-out;
4327       -o-transition: .2s opacity ease-in-out;
4328  transition: .2s opacity ease-in-out;
4329}
4330
4331.landing-video-link:hover {
4332  color: hsla(0, 0%, 100%, 1);
4333}
4334
4335.landing-video-link:hover:before {
4336  opacity: 1;
4337}
4338
4339.landing-social-image {
4340  float: left;
4341  margin-right: 14px;
4342  height: 64px;
4343  width: 64px;
4344}
4345
4346.landing-social-copy {
4347  padding-left: 78px;
4348}
4349
4350.landing-scroll-down-affordance {
4351  position: absolute;
4352  bottom: 0;
4353  width: 100%;
4354  text-align: center;
4355  z-index: 10;
4356}
4357
4358.landing-down-arrow {
4359  padding: 24px;
4360  display: inline-block;
4361  opacity: .5;
4362  -webkit-transition: .2s opacity ease-in-out;
4363     -moz-transition: .2s opacity ease-in-out;
4364       -o-transition: .2s opacity ease-in-out;
4365  transition: .2s opacity ease-in-out;
4366
4367  -webkit-animation-name: pulse-opacity;
4368  -webkit-animation-duration: 4s;
4369}
4370
4371.landing-down-arrow:hover {
4372  opacity: 1;
4373}
4374
4375.landing-down-arrow img {
4376  height: 28px;
4377  width: 28px;
4378  margin: 0 auto;
4379  display: block;
4380}
4381
4382.landing-divider {
4383  display: inline-block;
4384  height: 2px;
4385  background-color: white;
4386  position: relative;
4387  margin: 10px 0;
4388}
4389
4390/* 3 CLOLUMN LAYOUT */
4391
4392.landing-breakout {
4393  margin-top: 40px;
4394  margin-bottom: 40px;
4395}
4396
4397.landing-breakout img {
4398  margin-bottom: 20px;
4399}
4400
4401.landing-partners img {
4402  margin-bottom: 20px;
4403}
4404
4405.landing-breakout p {
4406  padding: 0 23px;
4407}
4408
4409.landing-breakout.landing-partners img {
4410  margin-bottom: 20px;
4411}
4412
4413/**
4414 * ANIMATION
4415 */
4416
4417@-webkit-keyframes pulse-opacity {
4418  0% {
4419    opacity: .5;
4420  }
4421  20% {
4422    opacity: .5;
4423  }
4424  40% {
4425    opacity: 1;
4426  }
4427  60% {
4428    opacity: .5;
4429  }
4430  80% {
4431    opacity: 1;
4432  }
4433  100% {
4434    opacity: .5;
4435  }
4436}
4437
4438
4439/******************
4440Styles for d.a.c/index:
4441*******************/
4442
4443
4444
4445/* Generic full screen carousel styling to be used across pages. */
4446.fullscreen-carousel {
4447  margin: 0 -20px;
4448  overflow: hidden;
4449  position: relative;
4450}
4451
4452.fullscreen-carousel-content {
4453  width: 100%;
4454  height: 100%;
4455  position: relative;
4456  display: table; /* For vertical centering */
4457}
4458
4459.fullscreen-carousel .vcenter {
4460  display: table-cell;
4461  vertical-align: middle;
4462  position: relative;
4463}
4464
4465.fullscreen-carousel .vcenter > div {
4466  margin: 10px auto;
4467}
4468
4469/* Styles for the full-bleed hero image type. */
4470.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
4471  color: #fff;
4472}
4473
4474.fullscreen-carousel .hero h1 {
4475  font-weight: 300;
4476  font-size: 60px;
4477  line-height: 68px;
4478  letter-spacing: -1px;
4479  padding-top: 0;
4480}
4481
4482.fullscreen-carousel .hero p {
4483  font-weight: 300;
4484  font-size: 18px;
4485  line-height: 24px;
4486}
4487
4488.fullscreen-carousel .hero .hero-bg {
4489  background-size: cover;
4490  width: 100%;
4491  height: 100%;
4492  position: absolute;
4493  left: 0px;
4494  top: 0px;
4495}
4496
4497
4498/* Full screen carousel styling for the resource flow layout type of content */
4499.fullscreen-carousel .resource-flow-layout:after {
4500  height: 0; /* Dont know why this is set at 10 in default.css */
4501}
4502
4503.fullscreen-carousel .resource-flow-layout {
4504  margin-bottom: 20px;
4505}
4506
4507
4508
4509/* Generic Tab carousel styling to be used across multiple pages. */
4510
4511.tab-carousel .tab-nav {
4512  list-style: none;
4513  position: relative;
4514  text-align: center;
4515}
4516
4517.tab-carousel .tab-nav li {
4518  display: inline-block;
4519  font-size: 22px;
4520  font-weight: 400;
4521  line-height: 50px;
4522  list-style: none;
4523  margin: 0;
4524  padding: 0 25px;
4525  position: relative;
4526}
4527
4528.tab-carousel .tab-nav li a,
4529.tab-carousel .tab-nav li a:hover {
4530  color: #333 !important;
4531  padding: 10px 10px 13px 10px;
4532  position: relative;
4533  z-index: 1000;
4534}
4535
4536.tab-carousel .tab-nav li:after {
4537  background: #ddd;
4538  bottom: 0;
4539  content: '';
4540  height: 4px;
4541  left: 0;
4542  position: absolute;
4543  width: 100%;
4544  z-index: 0;
4545}
4546
4547.tab-carousel .tab-nav .highlight {
4548  position: absolute;
4549  height: 4px;
4550  width: 100px;
4551  bottom: 0;
4552  background: #33b5e5;
4553}
4554
4555.tab-carousel .tab-carousel-content {
4556  position: relative;
4557  overflow: hidden;
4558  white-space: nowrap;
4559}
4560
4561.tab-carousel .tab-carousel-content [data-tab] {
4562  display: inline-block;
4563  white-space: normal;
4564}
4565
4566
4567
4568/*
4569  Resource styling for the tab carousel. The tab carousel contains either
4570  a 3 column layout of resources or a single full-width resource. The
4571  latter has the 18x12 class applied to it and can be styled differently
4572  that way.
4573*/
4574
4575.tab-carousel .resource .image {
4576  width: 100%;
4577  height: 250px;
4578  background-repeat: no-repeat;
4579  background-size: contain;
4580  background-position: 50% 50%;
4581}
4582
4583.tab-carousel .resource .info .title {
4584  font-size: 18px;
4585  line-height: 24px;
4586}
4587
4588.tab-carousel .resource .info .summary,
4589.tab-carousel .resource .info .cta {
4590  line-height: 24px;
4591  font-size: 16px;
4592}
4593
4594.tab-carousel .resource-card-18x12 {
4595  position: relative;
4596  padding-left: 450px;
4597  box-sizing: border-box;
4598  display: table-cell;
4599  vertical-align: middle;
4600}
4601
4602.tab-carousel .resource-card-18x12 .image {
4603  position: absolute;
4604  width: 420px;
4605  height: 100%;
4606  left: 0;
4607  top: 0;
4608}
4609
4610.tab-carousel .resource-card-18x12 .info {
4611  display: inline-block;
4612}
4613
4614.tab-carousel .resource-card-18x12 .info .title {
4615  margin-bottom: 26px;
4616}
4617
4618/*
4619  Specific styles for new home page layout of the carousels.
4620*/
4621
4622/* Big blue button */
4623a.home-new-cta-btn,
4624.home-new-carousel-1 .resource-card-18x6 .cta {
4625  white-space: nowrap;
4626  display: inline-block;
4627  padding: 14px 32px;
4628  font-size: 18px;
4629  font-weight: 500;
4630  line-height: 24px;
4631  cursor: pointer;
4632  background: #33b5e6;
4633  border-radius: 4px;
4634  margin-top: 20px;
4635  color: #fff;
4636  transition: 0.2s background-color ease-in-out;
4637}
4638
4639.home-new-carousel-1 .resource-card-18x6 .cta:after {
4640  display: none; /* Hide the entity for this button */
4641}
4642
4643a.home-new-cta-btn:hover,
4644.home-new-carousel-1 .resource-card-18x6 .cta:hover {
4645  color: #fff !important;
4646  background: #2d9fca;
4647}
4648
4649.home-new-carousel-1 .resource-card-18x6 .cta {
4650  position: absolute;
4651  bottom: 20px;
4652  left: 16px;
4653}
4654
4655/* Fullscreen carousel. */
4656.home-new-carousel-1 {
4657  max-height: 700px; /* Set max height so doesn't get too long */
4658}
4659
4660.home-new-carousel-1 .fullscreen-carousel-content {
4661  min-height: 450px;  /* Set min height for all content */
4662}
4663
4664.home-new-carousel-1 .hero {
4665  background: #000;
4666}
4667
4668.home-new-carousel-1 .hero-bg {
4669  background-image: url(/home-new/images/hero.jpg);
4670  background-position: right center;
4671  opacity: 0.85;
4672}
4673
4674/*
4675  Styling for special top card of full screen layout resource layout.
4676  We need to specifically style the 18x6 card to adjust its size and layout,
4677  since it's not a standard card, not sure if this is unique to the home page
4678  layout or should be namespaced within the fullscreen-carousel container.
4679*/
4680.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
4681  height: 320px;
4682  background-color:#F9F9F9;
4683  border-radius: 0px;
4684  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
4685
4686}
4687
4688.home-new-carousel-1 .resource-card-18x6 .card-bg {
4689  width: 636px;
4690  height: 100%;
4691}
4692
4693.home-new-carousel-1 .resource-card-18x6 .card-info {
4694  right: 0px;
4695  left: 636px;
4696  height: 100%;
4697  top: 0px;
4698  padding: 15px 22px;
4699}
4700
4701.home-new-carousel-1 .resource-card-18x6 .card-info .util {
4702  display: none;
4703}
4704
4705.home-new-carousel-1 .resource-card-18x6 .card-info .title {
4706  font-size: 20px;
4707  font-weight: 500;
4708  margin-top: 15px;
4709  margin-bottom: 15px;
4710}
4711
4712.home-new-carousel-1 .resource-card-18x6 .card-info .text {
4713  font-size: 15px;
4714  line-height: 21px;
4715}
4716
4717
4718/* Tabbed carousel. */
4719.home-new-carousel-2 {
4720  margin: 35px auto 100px auto;
4721}
4722
4723.home-new-carousel-2 h1 {
4724  font-size: 47px;
4725  font-weight: 100;
4726  line-height: 54px;
4727  text-align: center;
4728}
4729
4730.annotation-message {
4731    display: block;
4732    font-style: italic;
4733    color: #F80;
4734}
4735
4736
4737
4738/* Helpouts widget */
4739.resource-card-6x2.helpouts-card {
4740  width: 255px;
4741  height: 40px;
4742  position:absolute;
4743  z-index:999;
4744  top:-8px;
4745  right:1px;
4746}
4747
4748.resource-card-6x2.helpouts-card > .card-info {
4749  left:35px;
4750  height:35px;
4751  padding:4px 8px 4px 0;
4752}
4753
4754.resource-card-6x2.helpouts-card > .card-info .helpouts-description {
4755  display:block;
4756  overflow:visible;
4757  font-size:12px;
4758  line-height:12px;
4759  text-align:right;
4760  color:#666;
4761}
4762
4763.helpouts-description .link-color {
4764  text-transform: uppercase;
4765}
4766
4767.resource-card-6x2 > .card-bg.helpouts-card-bg {
4768  width:35px;
4769  height:35px;
4770  margin:2px 0 0 0;
4771  background-image: url(../images/styles/helpouts-logo-35_2x.png);
4772  background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x);
4773}
4774
4775.resource-card-6x2 > .card-bg.helpouts-card-bg:after {
4776  display:none;
4777}
4778
4779#tb li:before, #qv li:before {
4780  background-position: 0px -196px;
4781  height: 24px;
4782  width: 24px;
4783  content: '';
4784  left: -8px;
4785  opacity: .7;
4786  position: absolute;
4787  top: -4px;
4788}
4789
4790/* CHANGE EXISTING SELECTOR FOR ANDROID M HERO ONLY
4791   REMOVE THE BELOW STYLES WHEN THE ANDROID M CAROUSEL
4792   GRAPHIC ON THE MAIN LANDING IS TAKEN DOWN */
4793.dac-hero.mprev {
4794  background-color: #fff;
4795  background-position: 50% 53%;
4796  background-size: cover;
4797  background-image: url(../../assets/images/home/android_m_hero_1200.jpg);
4798  box-sizing: border-box;
4799  font-size: 16px;
4800  min-height: 550px;
4801  padding-top: 88px;
4802}
4803.dac-hero.dac-darken.mprev::before {
4804  background: rgba(0, 0, 0, 0.3);
4805  bottom: 0;
4806  content: '';
4807  display: block;
4808  left: 0;
4809  position: absolute;
4810  right: 0;
4811  top: 0;
4812}
4813
4814.dac-hero.dac-darken.mprev::before {
4815  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05), #000 950px);
4816  background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0.05), #000 950px);
4817}
4818
4819@media (max-width: 719px) {
4820  .dac-hero.dac-darken.mprev {
4821    background-size: auto 600px;
4822    background-position: 55% 0;
4823    background-repeat: no-repeat;
4824  }
4825
4826  .dac-hero-figure.mprev {
4827    height: 10px;
4828    margin: 15px 0;
4829  }
4830}
4831
4832@media (max-width: 719px) {
4833  .dac-hero.dac-darken.mprev {
4834    background-size: auto 600px;
4835    background-position: 55% 0;
4836    background-repeat: no-repeat;
4837  }
4838
4839  .dac-hero-figure.mprev {
4840    height: 10px;
4841    margin: 15px 0;
4842  }
4843}
4844
4845@media (max-width: 1200px) {
4846  .dac-hero.dac-darken.mprev {
4847    background-size: auto 700px;
4848    background-position: 55% 0;
4849    background-repeat: no-repeat;
4850  }
4851
4852  .dac-hero-cta.mprev {
4853    white-space:nowrap;
4854  }
4855}
4856
4857@charset "UTF-8";
4858/**
4859 * Fades out an element.
4860 * Applies visibility hidden when the transition is finished.
4861 *
4862 * Use opacity: 1; to show the element.
4863 */
4864.dac-visible-mobile-block, .dac-mobile-only,
4865.dac-visible-mobile-inline,
4866.dac-visible-mobile-inline-block,
4867.dac-visible-tablet-block,
4868.dac-visible-tablet-inline,
4869.dac-visible-tablet-inline-block,
4870.dac-visible-desktop-block,
4871.dac-visible-desktop-inline,
4872.dac-visible-desktop-inline-block {
4873  display: none !important;
4874}
4875
4876@media (max-width: 719px) {
4877  .dac-hidden-mobile {
4878    display: none !important;
4879  }
4880
4881  .dac-visible-mobile-block, .dac-mobile-only {
4882    display: block !important;
4883  }
4884
4885  .dac-visible-mobile-inline {
4886    display: inline !important;
4887  }
4888
4889  .dac-visible-mobile-inline-block {
4890    display: inline-block !important;
4891  }
4892}
4893
4894@media (min-width: 720px) and (max-width: 979px) {
4895  .dac-hidden-tablet {
4896    display: none !important;
4897  }
4898
4899  .dac-visible-tablet-block {
4900    display: block !important;
4901  }
4902
4903  .dac-visible-tablet-inline {
4904    display: inline !important;
4905  }
4906
4907  .dac-visible-tablet-inline-block {
4908    display: inline-block !important;
4909  }
4910}
4911
4912@media (min-width: 980px) {
4913  .dac-hidden-desktop {
4914    display: none !important;
4915  }
4916
4917  .dac-visible-desktop-block {
4918    display: block !important;
4919  }
4920
4921  .dac-visible-desktop-inline {
4922    display: inline !important;
4923  }
4924
4925  .dac-visible-desktop-inline-block {
4926    display: inline-block !important;
4927  }
4928}
4929
4930.dac-offset-parent {
4931  position: relative !important;
4932}
4933
4934/**
4935 * Hide from browsers/screenreaders on all sizes.
4936 */
4937.dac-hidden {
4938  display: none !important;
4939}
4940
4941/**
4942 * Break strings when their length exceeds the width of their container.
4943 */
4944.dac-text-break {
4945  word-wrap: break-word !important;
4946}
4947
4948/**
4949 * Horizontal text alignment
4950 */
4951.dac-text-center {
4952  text-align: center !important;
4953}
4954
4955.dac-text-left {
4956  text-align: left !important;
4957}
4958
4959.dac-text-right {
4960  text-align: right !important;
4961}
4962
4963/**
4964 * Prevent whitespace wrapping
4965 */
4966.dac-text-no-wrap {
4967  white-space: nowrap !important;
4968}
4969
4970/**
4971 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
4972 */
4973.dac-text-truncate {
4974  max-width: 100%;
4975  overflow: hidden !important;
4976  text-overflow: ellipsis !important;
4977  white-space: nowrap !important;
4978  word-wrap: normal !important;
4979}
4980
4981/**
4982 * Floats
4983 */
4984.dac-float-left {
4985  float: left !important;
4986}
4987
4988.dac-float-right {
4989  float: right !important;
4990}
4991
4992/**
4993 * New block formatting context
4994 *
4995 * This affords some useful properties to the element. It won't wrap under
4996 * floats. Will also contain any floated children.
4997 * N.B. This will clip overflow. Use the alternative method below if this is
4998 * problematic.
4999 */
5000.dac-nbfc {
5001  overflow: hidden !important; }
5002
5003/**
5004 * New block formatting context (alternative)
5005 *
5006 * Alternative method when overflow must not be clipped.
5007 *
5008 * N.B. This breaks down in some browsers when elements within this element
5009 * exceed its width.
5010 */
5011.dac-nbfc-alt {
5012  display: table-cell !important;
5013  width: 10000px !important; }
5014
5015/* New CSS */
5016/************ RESOURCE CARDS ******************/
5017/* Basic card-styling with shadow */
5018.resource-card {
5019  background: #fff;
5020  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
5021  display: block;
5022  position: relative; }
5023
5024/* Play button is only visible on 6by6 cards */
5025.play-button {
5026  background-color: #000;
5027  border-radius: 50%;
5028  box-sizing: border-box;
5029  display: none;
5030  height: 70px;
5031  line-height: 65px;
5032  padding-left: 4px;
5033  position: absolute;
5034  opacity: .6;
5035  text-align: center;
5036  -webkit-transition: opacity .5s;
5037          transition: opacity .5s;
5038  width: 70px;
5039  z-index: 1; }
5040  .resource-card-6x2 .play-button {
5041    display: block;
5042    left: 10px;
5043    top: 15px;
5044    -webkit-transform: scale(0.73);
5045        -ms-transform: scale(0.73);
5046            transform: scale(0.73); }
5047  .resource-card-6x6 .play-button {
5048    display: block;
5049    left: 50%;
5050    margin-left: -35px;
5051    top: 50px; }
5052
5053/* Styling for background image including tinting and section icons in stacks */
5054.card-bg {
5055  bottom: 131px;
5056  display: block;
5057  position: absolute;
5058  vertical-align: top;
5059  width: 100%;
5060  left: 0;
5061  top: 0;
5062  background-size: cover;
5063  background-repeat: no-repeat;
5064  background-position: center;
5065  background-image: url(../images/resource-card-default-android.jpg); }
5066  .card-bg:after {
5067    content: "";
5068    display: block;
5069    height: 100%;
5070    width: 100%;
5071    opacity: 1;
5072    background: rgba(0, 0, 0, 0.05);
5073    -webkit-transition: opacity 0.5s;
5074            transition: opacity 0.5s; }
5075  .static .card-bg:after {
5076    display: none; }
5077  .card-bg .card-section-icon {
5078    position: absolute;
5079    top: 50%;
5080    width: 100%;
5081    margin-top: -35px;
5082    text-align: center;
5083    padding-top: 65px;
5084    z-index: 100; }
5085    .card-bg .card-section-icon .icon {
5086      position: absolute;
5087      left: 50%;
5088      margin-left: -28px;
5089      top: 0px;
5090      width: 56px;
5091      height: 56px;
5092      background-repeat: no-repeat;
5093      background-position: 50% 50%;
5094      background-image: url(../images/stack-icon.png); }
5095    .card-bg .card-section-icon .section {
5096      text-transform: uppercase;
5097      color: white;
5098      font-size: 14px; }
5099
5100.card-info {
5101  position: absolute;
5102  box-sizing: border-box;
5103  height: 131px;
5104  right: 0;
5105  bottom: 0;
5106  left: 0;
5107  overflow: hidden;
5108  background: #fefefe;
5109  padding: 6px 12px; }
5110  .card-info .section {
5111    color: #898989;
5112    font-size: 11px;
5113    font-weight: 700;
5114    letter-spacing: .3px;
5115    line-height: 20px;
5116    text-transform: uppercase; }
5117  .card-info .title {
5118    color: #333;
5119    font-size: 18px;
5120    font-weight: 500;
5121    line-height: 23px;
5122    margin-bottom: 7px;
5123    max-height: 46px;
5124    overflow: hidden;
5125    text-overflow: ellipsis;
5126    white-space: normal; }
5127  .card-info .description {
5128    overflow: hidden; }
5129    .card-info .description .text {
5130      color: #666;
5131      font-size: 14px;
5132      height: 60px;
5133      line-height: 20px;
5134      overflow: hidden;
5135      width: 100%; }
5136    .card-info .description .util {
5137      position: absolute;
5138      right: 5px;
5139      bottom: 70px;
5140      opacity: 0;
5141      -webkit-transition: opacity 0.5s;
5142              transition: opacity 0.5s; }
5143  .card-info.empty-desc .title {
5144    white-space: normal;
5145    overflow: visible; }
5146  .card-info.empty-desc .description {
5147    display: none; }
5148
5149/* Truncate card summaries at bounding box and
5150 * and apply ellipsis at lower right */
5151.ellipsis {
5152  overflow: hidden;
5153  float: right;
5154  line-height: 15px;
5155  width: 100%; }
5156  .ellipsis:before {
5157    content: "";
5158    float: left;
5159    width: 5px;
5160    height: 100%; }
5161  .ellipsis > *:first-child.text {
5162    float: right;
5163    width: 100% !important;
5164    margin-left: -5px; }
5165  .ellipsis:after {
5166    content: "\02026";
5167    height: 17px;
5168    padding-bottom: 4px;
5169    box-sizing: content-box;
5170    float: right;
5171    position: relative;
5172    top: -16px;
5173    left: 100%;
5174    width: 4em;
5175    margin-left: -4em;
5176    padding-right: 5px;
5177    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5178    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white);
5179    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); }
5180  .ellipsis:after {
5181    font-style: normal;
5182    color: #aaa;
5183    font-size: 13px;
5184    text-align: right; }
5185
5186.resource-card:hover {
5187  cursor: pointer; }
5188  .static .resource-card:hover {
5189    cursor: auto; }
5190  .resource-card:hover .card-bg:after {
5191    opacity: 0; }
5192  .resource-card:hover .play-button {
5193    opacity: .3; }
5194  .resource-card:hover .card-info .description .util {
5195    opacity: 1; }
5196
5197/* Carousel Layout */
5198/* Carousel styles for landing page */
5199.resource-carousel-layout {
5200  height: 531px;
5201  margin: 20px 0 20px 0;
5202  padding: 0 !important;
5203  position: relative;
5204  overflow: hidden; }
5205  .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5206    display: none; }
5207  .resource-carousel-layout .pagination {
5208    bottom: 97px;
5209    left: auto;
5210    padding-right: 10px;
5211    right: 0;
5212    text-align: right;
5213    width: 16.66666667%; }
5214    .resource-carousel-layout .pagination ul li {
5215      text-indent: 8000px; }
5216  .resource-carousel-layout .frame li {
5217    position: relative; }
5218    .resource-carousel-layout .frame li .card-bg {
5219      bottom: 131px; }
5220    .resource-carousel-layout .frame li .card-info {
5221      height: 131px;
5222      padding: 6px 12px;
5223      top: auto; }
5224      .resource-carousel-layout .frame li .card-info .title {
5225        font-size: 28px;
5226        font-weight: 400;
5227        line-height: 32px; }
5228      .resource-carousel-layout .frame li .card-info .description .text {
5229        height: 40px; }
5230      .resource-carousel-layout .frame li .card-info .description .util {
5231        bottom: 97px;
5232        right: 4px; }
5233
5234/* Stack Layout */
5235.resource-stack-layout {
5236  display: inline-block;
5237  padding: 0; }
5238  .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5239    /*text-transform: uppercase;*/
5240    color: #898989;
5241    font-size: 17px;
5242    line-height: 23px;
5243    margin-bottom: 6px; }
5244  .resource-stack-layout .section-card {
5245    height: 284px; }
5246    .resource-stack-layout .section-card > .card-bg {
5247      height: 192px; }
5248    .resource-stack-layout .section-card > .card-info {
5249      padding: 4px 12px 6px 12px;
5250      top: 192px; }
5251      .resource-stack-layout .section-card > .card-info .section {
5252        display: none; }
5253      .resource-stack-layout .section-card > .card-info .title {
5254        font-size: 17px;
5255        border-bottom: 1px solid #959595;
5256        padding-bottom: 0px; }
5257      .resource-stack-layout .section-card > .card-info .description {
5258        font-size: 13px;
5259        line-height: 15px; }
5260        .resource-stack-layout .section-card > .card-info .description .text {
5261          height: 30px; }
5262  .resource-stack-layout .related-card {
5263    height: 90px; }
5264    .resource-stack-layout .related-card > .card-bg {
5265      left: 0;
5266      top: 0;
5267      width: 90px;
5268      height: 100%;
5269      position: absolute;
5270      display: block; }
5271    .resource-stack-layout .related-card > .card-info {
5272      left: 90px;
5273      padding: 4px 12px 4px 12px; }
5274      .resource-stack-layout .related-card > .card-info .section {
5275        font-size: 12px;
5276        margin-bottom: 1px;
5277        display: none; }
5278      .resource-stack-layout .related-card > .card-info .title {
5279        font-size: 16px;
5280        margin-bottom: -2px;
5281        white-space: normal;
5282        overflow: visible;
5283        text-overflow: ellipsis; }
5284        .resource-stack-layout .related-card > .card-info .title:after {
5285          content: url(../images/link-out.png);
5286          display: block; }
5287      .resource-stack-layout .related-card > .card-info .description {
5288        display: none; }
5289  .resource-stack-layout .section-card-menu {
5290    /* Flexible height */
5291    display: block;
5292    height: auto;
5293    width: auto; }
5294    .resource-stack-layout .section-card-menu .card-bg {
5295      height: 155px;
5296      /* Flexible height */
5297      position: relative;
5298      display: inline-block;
5299      vertical-align: top; }
5300    .resource-stack-layout .section-card-menu .card-info {
5301      padding: 4px 12px 0px 12px;
5302      /* Flexible height */
5303      position: relative;
5304      left: auto;
5305      top: auto;
5306      right: auto;
5307      bottom: auto; }
5308      .resource-stack-layout .section-card-menu .card-info ul {
5309        list-style: none;
5310        margin: 0; }
5311        .resource-stack-layout .section-card-menu .card-info ul li {
5312          list-style: none;
5313          margin: 0;
5314          padding: 15px 0;
5315          border-top-width: 1px;
5316          border-top-style: solid;
5317          border-top-color: #959595; }
5318          .resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:hover {
5319            color: #333 !important; }
5320          .resource-stack-layout .section-card-menu .card-info ul li:first-child {
5321            border-top: none; }
5322          .resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5323            opacity: 1;
5324            -webkit-transition: opacity 0.5s;
5325                    transition: opacity 0.5s; }
5326          .resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5327            max-height: 30px;
5328            opacity: 1;
5329            -webkit-transition: max-height 0.5s, opacity 1s;
5330                    transition: max-height 0.5s, opacity 1s; }
5331      .resource-stack-layout .section-card-menu .card-info .title {
5332        font-size: 16px;
5333        margin-bottom: -2px;
5334        position: relative; }
5335        .resource-stack-layout .section-card-menu .card-info .title:after {
5336          background: url(../images/stack-arrow-right.png);
5337          content: '';
5338          opacity: 0;
5339          -webkit-transition: opacity 0.25s;
5340                  transition: opacity 0.25s;
5341          position: absolute;
5342          right: 0px;
5343          top: 3px;
5344          width: 10px;
5345          height: 15px; }
5346      .resource-stack-layout .section-card-menu .card-info .title.more {
5347        text-transform: uppercase;
5348        color: #898989;
5349        display: inline-block; }
5350        .resource-stack-layout .section-card-menu .card-info .title.more:after {
5351          background: url(../images/stack-arrow-right.png);
5352          content: '';
5353          display: block;
5354          position: absolute;
5355          right: -20px;
5356          top: 3px;
5357          width: 10px;
5358          height: 15px; }
5359      .resource-stack-layout .section-card-menu .card-info .description {
5360        max-height: 0px;
5361        opacity: 0;
5362        overflow: hidden;
5363        font-size: 13px;
5364        line-height: 15px;
5365        /* Hover off */
5366        -webkit-transition: max-height 0.5s, opacity 0.5s;
5367                transition: max-height 0.5s, opacity 0.5s; }
5368        .resource-stack-layout .section-card-menu .card-info .description .text {
5369          height: 30px; }
5370  .resource-stack-layout:after {
5371    content: ".";
5372    display: block;
5373    height: 0;
5374    clear: both;
5375    visibility: hidden; }
5376
5377.resource-card, .resource-card-stack {
5378  margin-bottom: 20px; }
5379
5380.resource-card-row-stack-last {
5381  margin-bottom: 0px !important; }
5382
5383.resource-card-col-stack-last {
5384  margin-bottom: 0px !important; }
5385
5386.resource-card-3x6 {
5387  height: 300px; }
5388
5389.resource-card-3x12 {
5390  height: 620px; }
5391
5392.resource-card-3x18 {
5393  height: 940px; }
5394
5395.resource-card-6x6 {
5396  height: 300px; }
5397
5398.resource-card-6x12 {
5399  height: 620px; }
5400
5401.resource-card-6x18 {
5402  height: 940px; }
5403
5404.resource-card-9x6 {
5405  height: 300px; }
5406
5407.resource-card-9x12 {
5408  height: 620px; }
5409
5410.resource-card-9x18 {
5411  height: 940px; }
5412
5413.resource-card-12x6 {
5414  height: 300px; }
5415
5416.resource-card-12x12 {
5417  height: 620px; }
5418
5419.resource-card-12x18 {
5420  height: 940px; }
5421
5422.resource-card-15x6 {
5423  height: 300px; }
5424
5425.resource-card-15x12 {
5426  height: 620px; }
5427
5428.resource-card-15x18 {
5429  height: 940px; }
5430
5431.resource-card-18x6 {
5432  height: 300px; }
5433
5434.resource-card-18x12 {
5435  height: 620px; }
5436
5437.resource-card-18x18 {
5438  height: 940px; }
5439
5440.resource-card-3x2 {
5441  height: 100px; }
5442
5443.resource-card-3x2x3 {
5444  height: 90px;
5445  margin-bottom: 15px; }
5446
5447.resource-card-3x3 {
5448  height: 150px; }
5449
5450.resource-card-3x3x2 {
5451  height: 142px;
5452  margin-bottom: 16px; }
5453
5454.resource-card-6x2 {
5455  height: 100px; }
5456
5457.resource-card-6x2x3 {
5458  height: 90px;
5459  margin-bottom: 15px; }
5460
5461.resource-card-6x3 {
5462  height: 150px; }
5463
5464.resource-card-6x3x2 {
5465  height: 142px;
5466  margin-bottom: 16px; }
5467
5468.resource-card-9x2 {
5469  height: 100px; }
5470
5471.resource-card-9x2x3 {
5472  height: 90px;
5473  margin-bottom: 15px; }
5474
5475.resource-card-9x3 {
5476  height: 150px; }
5477
5478.resource-card-9x3x2 {
5479  height: 142px;
5480  margin-bottom: 16px; }
5481
5482.resource-card-12x2 {
5483  height: 100px; }
5484
5485.resource-card-12x2x3 {
5486  height: 90px;
5487  margin-bottom: 15px; }
5488
5489.resource-card-12x3 {
5490  height: 150px; }
5491
5492.resource-card-12x3x2 {
5493  height: 142px;
5494  margin-bottom: 16px; }
5495
5496.resource-card-15x2 {
5497  height: 100px; }
5498
5499.resource-card-15x2x3 {
5500  height: 90px;
5501  margin-bottom: 15px; }
5502
5503.resource-card-15x3 {
5504  height: 150px; }
5505
5506.resource-card-15x3x2 {
5507  height: 142px;
5508  margin-bottom: 16px; }
5509
5510.resource-card-18x2 {
5511  height: 100px; }
5512
5513.resource-card-18x2x3 {
5514  height: 90px;
5515  margin-bottom: 15px; }
5516
5517.resource-card-18x3 {
5518  height: 150px; }
5519
5520.resource-card-18x3x2 {
5521  height: 142px;
5522  margin-bottom: 16px; }
5523
5524/*
5525  The following are styles for cards in the flowlayout above, styled by the number of rows they span
5526*/
5527/* Single row, 2 column items. */
5528.resource-card-9x6 {
5529  height: 390px; }
5530
5531/* Double row, 1 column items. Eg full width video thumbnails. */
5532.resource-card-18x12 {
5533  height: 558px; }
5534
5535/* 1/3 row items */
5536.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg {
5537  left: 0;
5538  top: 0;
5539  width: 90px;
5540  height: 100%;
5541  position: absolute;
5542  display: block; }
5543
5544.resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info {
5545  height: 100%;
5546  left: 90px;
5547  padding: 6px 12px;
5548  overflow: hidden; }
5549  .resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title {
5550    max-height: 69px;
5551    white-space: normal; }
5552  .resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description {
5553    display: none; }
5554  .resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text {
5555    height: auto; }
5556
5557/* Override to show the description instead of the content section */
5558.no-section .resource-card-3x2 > .card-info .section,
5559.no-section .resource-card-6x2 > .card-info .section {
5560  display: none; }
5561
5562.no-section .resource-card-3x2 > .card-info .description,
5563.no-section .resource-card-6x2 > .card-info .description {
5564  display: block; }
5565
5566/* 1/2 row items */
5567.resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 {
5568  height: 160px; }
5569  .resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg {
5570    left: 0;
5571    top: 0;
5572    width: 90px;
5573    height: 100%;
5574    position: absolute;
5575    display: block; }
5576  .resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info {
5577    height: 100%;
5578    left: 90px;
5579    padding: 6px 12px; }
5580    .resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section {
5581      display: none; }
5582    .resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title {
5583      max-height: 92px;
5584      white-space: normal; }
5585    .resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text {
5586      height: auto; }
5587    .resource-card-3x3 > .card-info .util, .resource-card-6x3 > .card-info .util, .resource-card-9x3 > .card-info .util, .resource-card-12x3 > .card-info .util, .resource-card-15x3 > .card-info .util, .resource-card-18x3 > .card-info .util {
5588      display: none; }
5589
5590/* placement of plusone */
5591.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util {
5592  bottom: 2px; }
5593
5594.resource-card-18x12 > .card-info .description .util {
5595  bottom: 2px; }
5596
5597/* Overrides for col-16 6x6 cards linking to local content on landing pages.
5598   Suppresses "section". */
5599.landing .card-info .section {
5600  display: none; }
5601
5602/*
5603  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
5604*/
5605.resource-stack-layout.col-16 {
5606  margin: 0 -14px 0 0;
5607  width: 954px; }
5608  .resource-stack-layout.col-16 .resource-card-stack {
5609    margin: 0 14px 0 0;
5610    width: 304px; }
5611
5612/* Example of card menu tinting */
5613.resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after {
5614  background: rgba(126, 55, 148, 0.4) !important; }
5615
5616.resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon {
5617  background-color: #7e3794 !important; }
5618
5619.resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li {
5620  border-top-color: #7e3794 !important; }
5621
5622/* tinting for stacks */
5623div.jd-descr > .resource-widget[data-section=distribute\/tools]
5624.section-card-menu .card-info ul li {
5625  border-top-color: #7e3794 !important; }
5626
5627/* Show more/less */
5628.dac-show-more,
5629.dac-show-less {
5630  display: none !important; }
5631
5632.dac-has-more .dac-show-more {
5633  display: inline-block !important; }
5634
5635.dac-has-less .dac-show-less {
5636  display: inline-block !important; }
5637
5638.dac-fab, .dac-button-social, .button, .landing-button,
5639.dac-button {
5640  background: transparent;
5641  border: 0;
5642  border-radius: 3px;
5643  box-sizing: border-box;
5644  color: currentColor;
5645  cursor: pointer;
5646  display: inline-block;
5647  font-weight: 500;
5648  font-size: 14px;
5649  font-style: inherit;
5650  font-variant: inherit;
5651  font-family: inherit;
5652  letter-spacing: .5px;
5653  line-height: 24px;
5654  margin: 6px 16px 6px 0;
5655  min-width: 88px;
5656  outline: 0;
5657  padding: 6px 12px;
5658  position: relative;
5659  text-align: center;
5660  text-decoration: none;
5661  text-transform: uppercase;
5662  -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
5663          transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
5664  -webkit-user-select: none;
5665     -moz-user-select: none;
5666      -ms-user-select: none;
5667          user-select: none;
5668  white-space: nowrap; }
5669
5670.button, .landing-button,
5671.dac-button.dac-raised {
5672  background-color: #FAFAFA;
5673  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); }
5674
5675.dac-button.dac-raised.dac-primary, .landing-secondary, .button {
5676  background-color: #039bef; }
5677  .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover {
5678    background-color: #0288d1; }
5679  .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active {
5680    background-color: #0277bd; }
5681  .dac-button.dac-raised.dac-primary.disabled, .button.disabled {
5682    background-color: #bbb; }
5683
5684.dac-button.dac-raised.dac-red, .landing-primary {
5685  background-color: #bf3722; }
5686  .dac-button.dac-raised.dac-red:hover, .landing-primary:hover {
5687    background-color: #9c2d1c; }
5688  .dac-button.dac-raised.dac-red:active, .landing-primary:active {
5689    background-color: #822517; }
5690
5691.dac-button.dac-raised.dac-green, .landing-button.green {
5692  background-color: #90c653; }
5693  .dac-button.dac-raised.dac-green:hover, .landing-button.green:hover {
5694    background-color: #79b03b; }
5695  .dac-button.dac-raised.dac-green:active, .landing-button.green:active {
5696    background-color: #699933; }
5697
5698.dac-button.dac-raised.dac-primary, .landing-secondary, .button,
5699.dac-button.dac-raised.dac-red,
5700.landing-primary,
5701.dac-button.dac-raised.dac-green,
5702.landing-button.green {
5703  color: #fff; }
5704
5705.dac-button.dac-large, .landing-button {
5706  padding: 12px 24px; }
5707
5708.dac-fab, .dac-button-social {
5709  background: #fff;
5710  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
5711  border-radius: 50%;
5712  height: 36px;
5713  line-height: 36px;
5714  margin: 0;
5715  min-width: 0;
5716  overflow: hidden;
5717  padding: 0;
5718  vertical-align: middle;
5719  width: 36px; }
5720  .dac-fab:hover, .dac-button-social:hover,
5721  a:hover > .dac-fab,
5722  a:hover > .dac-button-social {
5723    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); }
5724  .dac-fab > .dac-sprite, .dac-button-social > .dac-sprite, .dac-fab > .dac-modal-header-close:before, .dac-button-social > .dac-modal-header-close:before, .paging-links .dac-fab > .prev-page-link:before, .paging-links .dac-button-social > .prev-page-link:before, .paging-links .dac-fab > .next-page-link:before, .paging-links .dac-button-social > .next-page-link:before, .paging-links .dac-fab > .next-class-link:before, .paging-links .dac-button-social > .next-class-link:before, .paging-links .dac-fab > .start-class-link:after, .paging-links .dac-button-social > .start-class-link:after {
5725    margin-top: -2px; }
5726  .dac-fab.dac-primary, .dac-primary.dac-button-social {
5727    background: #00c7a0; }
5728  .dac-fab.dac-large, .dac-large.dac-button-social {
5729    height: 54px;
5730    line-height: 54px;
5731    width: 54px; }
5732
5733.dac-button-social {
5734  background: #ccc;
5735  box-shadow: none;
5736  position: relative;
5737  overflow: hidden; }
5738  .dac-button-social::after {
5739    background: rgba(0, 0, 0, 0.2);
5740    border-radius: 50%;
5741    bottom: 0;
5742    content: '';
5743    display: block;
5744    left: 0;
5745    opacity: 0;
5746    position: absolute;
5747    right: 0;
5748    top: 0;
5749    -webkit-transition: opacity .3s;
5750            transition: opacity .3s; }
5751  .dac-button-social:hover {
5752    box-shadow: none; }
5753  .dac-button-social:active::after {
5754    opacity: 1; }
5755  .dac-button-social:focus.dac-rss, .dac-button-social:hover.dac-rss {
5756    background: #ff9800; }
5757  .dac-button-social:focus.dac-youtube, .dac-button-social:hover.dac-youtube {
5758    background: #f44336; }
5759  .dac-button-social:focus.dac-gplus, .dac-button-social:hover.dac-gplus {
5760    background: #f44336; }
5761  .dac-button-social:focus.dac-twitter, .dac-button-social:hover.dac-twitter {
5762    background: #55acee; }
5763
5764.dac-action {
5765  display: inline-block;
5766  margin: 0 16px; }
5767  .dac-action-link {
5768    color: inherit;
5769    font-size: 24px;
5770    font-weight: 300;
5771    line-height: 50px;
5772    -webkit-transition: opacity .3s;
5773            transition: opacity .3s; }
5774    .dac-action-link:hover {
5775      color: inherit;
5776      opacity: .54; }
5777  .dac-action-sprite {
5778    margin-left: -12px;
5779    margin-right: -8px; }
5780  .dac-actions {
5781    list-style-type: none;
5782    margin: 0;
5783    padding-bottom: 24px;
5784    padding-top: 24px;
5785    text-align: center; }
5786    @media (max-width: 719px) {
5787      .dac-actions {
5788        text-align: left; } }
5789  @media (max-width: 719px) {
5790    .dac-action {
5791      display: block;
5792      margin: 0; } }
5793
5794.dac-scroll-button {
5795  height: 54px;
5796  line-height: 54px;
5797  margin: 0;
5798  position: absolute;
5799  right: 0;
5800  top: -27px;
5801  width: 54px;
5802  z-index: 1; }
5803  @media (max-width: 719px) {
5804    .dac-scroll-button {
5805      display: none; } }
5806
5807/* Footer component */
5808.dac-footer {
5809  background-color: #fff;
5810  border-top: 1px solid #f0f0f0;
5811  clear: both;
5812  color: #999;
5813  font-size: 12px;
5814  margin-top: 96px;
5815  padding-bottom: 20px;
5816  position: relative;
5817  /* Modifier for landing pages, to snuggle closer to sections. */ }
5818  .dac-footer a {
5819    color: #999; }
5820  .dac-footer p {
5821    margin: 7px 0 0; }
5822  .dac-footer-main {
5823    padding: 30px 0; }
5824  .dac-footer-reachout {
5825    text-align: right; }
5826  .dac-footer-contact, .dac-footer-social {
5827    display: inline-block; }
5828  .dac-footer .dac-footer-getnews,
5829  .dac-footer .dac-footer-contact-link {
5830    color: #000;
5831    cursor: pointer;
5832    font-size: 20px;
5833    font-weight: 300;
5834    margin: 8px 0;
5835    vertical-align: middle; }
5836  .dac-footer .dac-footer-contact-link,
5837  .dac-footer .dac-footer-social-link {
5838    margin-left: 16px;
5839    margin-right: 0; }
5840  .dac-footer-getnews > .dac-fab, .dac-footer-getnews > .dac-button-social {
5841    margin-left: 4px; }
5842  .dac-footer-separator {
5843    background: #f0f0f0;
5844    margin: 0 0 12px; }
5845  .dac-footer-links a + a:before {
5846    content: '|';
5847    cursor: default;
5848    margin: 0 10px 0 8px; }
5849  .dac-footer .locales {
5850    float: right;
5851    margin: 0; }
5852    .dac-footer .locales select {
5853      background-color: #f0f0f0;
5854      border-radius: 3px;
5855      font-size: 12px;
5856      height: auto;
5857      margin-top: -2px;
5858      padding: 8px 12px;
5859      width: 146px; }
5860  .dac-footer.dac-landing {
5861    margin-top: 0;
5862    border-top: 0; }
5863  @media (max-width: 719px) {
5864    .dac-footer-reachout {
5865      text-align: left; }
5866    .dac-footer-social {
5867      display: block; }
5868    .dac-footer-social-link, .dac-footer-contact-link {
5869      display: inline-block; }
5870    .dac-footer .dac-footer-contact-link,
5871    .dac-footer .dac-footer-social-link {
5872      margin-left: 0;
5873      margin-right: 16px; }
5874    .dac-footer .locales {
5875      display: block;
5876      float: none;
5877      margin-top: 15px; } }
5878
5879/* =============================================================================
5880   Columns
5881   ========================================================================== */
5882.wrap {
5883  margin: 0 auto;
5884  max-width: 940px;
5885  clear: both; }
5886  .dac-fullscreen-mode .wrap {
5887    max-width: none; }
5888
5889.dac-full-screen-mode .dac-search-open .wrap {
5890  max-width: 940px;
5891}
5892
5893.cols {
5894  margin-left: -10px;
5895  margin-right: -10px;
5896  /**
5897   * For modern browsers
5898   * 1. The space content is one way to avoid an Opera bug when the
5899   *    contenteditable attribute is included anywhere else in the document.
5900   *    Otherwise it causes space to appear at the top and bottom of elements
5901   *    that are clearfixed.
5902   * 2. The use of `table` rather than `block` is only necessary if using
5903   *    `:before` to contain the top-margins of child elements.
5904   */ }
5905  .cols:before, .cols:after {
5906    content: ' ';
5907    /* 1 */
5908    display: table;
5909    /* 2 */ }
5910  .cols:after {
5911    clear: both; }
5912
5913[class*=col-] {
5914  box-sizing: border-box;
5915  float: left;
5916  min-height: 1px;
5917  padding-left: 10px;
5918  padding-right: 10px;
5919  position: relative; }
5920
5921.col-1 {
5922  width: 6.25%; }
5923
5924.col-2 {
5925  width: 12.5%; }
5926
5927.col-3 {
5928  width: 18.75%; }
5929
5930.col-4 {
5931  width: 25%; }
5932
5933.col-5 {
5934  width: 31.25%; }
5935
5936.col-6 {
5937  width: 37.5%; }
5938
5939.col-7 {
5940  width: 43.75%; }
5941
5942.col-8 {
5943  width: 50%; }
5944
5945.col-9 {
5946  width: 56.25%; }
5947
5948.col-10 {
5949  width: 62.5%; }
5950
5951.col-11 {
5952  width: 68.75%; }
5953
5954.col-12 {
5955  width: 75%; }
5956
5957.col-13 {
5958  width: 81.25%; }
5959
5960.col-14 {
5961  width: 87.5%; }
5962
5963.col-15 {
5964  width: 93.75%; }
5965
5966.col-16 {
5967  width: 100%; }
5968
5969.col-13 .col-1 {
5970  width: 7.69230769%; }
5971
5972.col-13 .col-2 {
5973  width: 15.38461538%; }
5974
5975.col-13 .col-3 {
5976  width: 23.07692308%; }
5977
5978.col-13 .col-4 {
5979  width: 30.76923077%; }
5980
5981.col-13 .col-5 {
5982  width: 38.46153846%; }
5983
5984.col-13 .col-6 {
5985  width: 46.15384615%; }
5986
5987.col-13 .col-7 {
5988  width: 53.84615385%; }
5989
5990.col-13 .col-8 {
5991  width: 61.53846154%; }
5992
5993.col-13 .col-9 {
5994  width: 69.23076923%; }
5995
5996.col-13 .col-10 {
5997  width: 76.92307692%; }
5998
5999.col-13 .col-11 {
6000  width: 84.61538462%; }
6001
6002.col-13 .col-12 {
6003  width: 92.30769231%; }
6004
6005.col-13 .col-13 {
6006  width: 100%; }
6007
6008.col-12 .col-1 {
6009  width: 8.33333333%; }
6010
6011.col-12 .col-2 {
6012  width: 16.66666667%; }
6013
6014.col-12 .col-3 {
6015  width: 25%; }
6016
6017.col-12 .col-4 {
6018  width: 33.33333333%; }
6019
6020.col-12 .col-5 {
6021  width: 41.66666667%; }
6022
6023.col-12 .col-6 {
6024  width: 50%; }
6025
6026.col-12 .col-7 {
6027  width: 58.33333333%; }
6028
6029.col-12 .col-8 {
6030  width: 66.66666667%; }
6031
6032.col-12 .col-9 {
6033  width: 75%; }
6034
6035.col-12 .col-10 {
6036  width: 83.33333333%; }
6037
6038.col-12 .col-11 {
6039  width: 91.66666667%; }
6040
6041.col-12 .col-12 {
6042  width: 100%; }
6043
6044.col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 {
6045  width: 100%; }
6046
6047.col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 {
6048  width: 50%; }
6049
6050.col-1of3, .col-2of6, .col-4of12 {
6051  width: 33.33333333%; }
6052
6053.col-2of3, .col-4of6, .col-8of12 {
6054  width: 66.66666667%; }
6055
6056.col-1of4, .col-2of8, .col-3of12, .col-4of16 {
6057  width: 25%; }
6058
6059.col-3of4, .col-6of8, .col-9of12, .col-12of16 {
6060  width: 75%; }
6061
6062.col-1of5, .col-2of10 {
6063  width: 20%; }
6064
6065.col-2of5, .col-4of10 {
6066  width: 40%; }
6067
6068.col-3of5, .col-6of10 {
6069  width: 60%; }
6070
6071.col-4of5, .col-8of10 {
6072  width: 80%; }
6073
6074.col-1of6, .col-2of12 {
6075  width: 16.66666667%; }
6076
6077.col-5of6, .col-10of12 {
6078  width: 83.33333333%; }
6079
6080.col-1of8, .col-2of16 {
6081  width: 12.5%; }
6082
6083.col-3of8, .col-6of16 {
6084  width: 37.5%; }
6085
6086.col-5of8, .col-10of16 {
6087  width: 62.5%; }
6088
6089.col-7of8, .col-14of16 {
6090  width: 87.5%; }
6091
6092.col-1of10 {
6093  width: 10%; }
6094
6095.col-3of10 {
6096  width: 30%; }
6097
6098.col-7of10 {
6099  width: 70%; }
6100
6101.col-9of10 {
6102  width: 90%; }
6103
6104.col-1of12 {
6105  width: 8.33333333%; }
6106
6107.col-5of12 {
6108  width: 41.66666667%; }
6109
6110.col-7of12 {
6111  width: 58.33333333%; }
6112
6113.col-11of12 {
6114  width: 91.66666667%; }
6115
6116.col-1of16 {
6117  width: 6.25%; }
6118
6119.col-3of16 {
6120  width: 18.75%; }
6121
6122.col-5of16 {
6123  width: 31.25%; }
6124
6125.col-7of16 {
6126  width: 43.75%; }
6127
6128.col-9of16 {
6129  width: 56.25%; }
6130
6131.col-11of16 {
6132  width: 68.75%; }
6133
6134.col-13of16 {
6135  width: 81.25%; }
6136
6137.col-15of16 {
6138  width: 93.75%; }
6139
6140.col-pull-1of1, .col-pull-2of2, .col-pull-3of3, .col-pull-4of4, .col-pull-5of5, .col-pull-6of6, .col-pull-8of8, .col-pull-10of10, .col-pull-12of12, .col-pull-16of16 {
6141  left: -100%; }
6142
6143.col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 {
6144  left: -50%; }
6145
6146.col-pull-1of3, .col-pull-2of6, .col-pull-4of12 {
6147  left: -33.33333333%; }
6148
6149.col-pull-2of3, .col-pull-4of6, .col-pull-8of12 {
6150  left: -66.66666667%; }
6151
6152.col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 {
6153  left: -25%; }
6154
6155.col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 {
6156  left: -75%; }
6157
6158.col-pull-1of5, .col-pull-2of10 {
6159  left: -20%; }
6160
6161.col-pull-2of5, .col-pull-4of10 {
6162  left: -40%; }
6163
6164.col-pull-3of5, .col-pull-6of10 {
6165  left: -60%; }
6166
6167.col-pull-4of5, .col-pull-8of10 {
6168  left: -80%; }
6169
6170.col-pull-1of6, .col-pull-2of12 {
6171  left: -16.66666667%; }
6172
6173.col-pull-5of6, .col-pull-10of12 {
6174  left: -83.33333333%; }
6175
6176.col-pull-1of8, .col-pull-2of16 {
6177  left: -12.5%; }
6178
6179.col-pull-3of8, .col-pull-6of16 {
6180  left: -37.5%; }
6181
6182.col-pull-5of8, .col-pull-10of16 {
6183  left: -62.5%; }
6184
6185.col-pull-7of8, .col-pull-14of16 {
6186  left: -87.5%; }
6187
6188.col-pull-1of10 {
6189  left: -10%; }
6190
6191.col-pull-3of10 {
6192  left: -30%; }
6193
6194.col-pull-7of10 {
6195  left: -70%; }
6196
6197.col-pull-9of10 {
6198  left: -90%; }
6199
6200.col-pull-1of12 {
6201  left: -8.33333333%; }
6202
6203.col-pull-5of12 {
6204  left: -41.66666667%; }
6205
6206.col-pull-7of12 {
6207  left: -58.33333333%; }
6208
6209.col-pull-11of12 {
6210  left: -91.66666667%; }
6211
6212.col-pull-1of16 {
6213  left: -6.25%; }
6214
6215.col-pull-3of16 {
6216  left: -18.75%; }
6217
6218.col-pull-5of16 {
6219  left: -31.25%; }
6220
6221.col-pull-7of16 {
6222  left: -43.75%; }
6223
6224.col-pull-9of16 {
6225  left: -56.25%; }
6226
6227.col-pull-11of16 {
6228  left: -68.75%; }
6229
6230.col-pull-13of16 {
6231  left: -81.25%; }
6232
6233.col-pull-15of16 {
6234  left: -93.75%; }
6235
6236.col-push-1of1, .col-push-2of2, .col-push-3of3, .col-push-4of4, .col-push-5of5, .col-push-6of6, .col-push-8of8, .col-push-10of10, .col-push-12of12, .col-push-16of16 {
6237  left: 100%; }
6238
6239.col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 {
6240  left: 50%; }
6241
6242.col-push-1of3, .col-push-2of6, .col-push-4of12 {
6243  left: 33.33333333%; }
6244
6245.col-push-2of3, .col-push-4of6, .col-push-8of12 {
6246  left: 66.66666667%; }
6247
6248.col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 {
6249  left: 25%; }
6250
6251.col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 {
6252  left: 75%; }
6253
6254.col-push-1of5, .col-push-2of10 {
6255  left: 20%; }
6256
6257.col-push-2of5, .col-push-4of10 {
6258  left: 40%; }
6259
6260.col-push-3of5, .col-push-6of10 {
6261  left: 60%; }
6262
6263.col-push-4of5, .col-push-8of10 {
6264  left: 80%; }
6265
6266.col-push-1of6, .col-push-2of12 {
6267  left: 16.66666667%; }
6268
6269.col-push-5of6, .col-push-10of12 {
6270  left: 83.33333333%; }
6271
6272.col-push-1of8, .col-push-2of16 {
6273  left: 12.5%; }
6274
6275.col-push-3of8, .col-push-6of16 {
6276  left: 37.5%; }
6277
6278.col-push-5of8, .col-push-10of16 {
6279  left: 62.5%; }
6280
6281.col-push-7of8, .col-push-14of16 {
6282  left: 87.5%; }
6283
6284.col-push-1of10 {
6285  left: 10%; }
6286
6287.col-push-3of10 {
6288  left: 30%; }
6289
6290.col-push-7of10 {
6291  left: 70%; }
6292
6293.col-push-9of10 {
6294  left: 90%; }
6295
6296.col-push-1of12 {
6297  left: 8.33333333%; }
6298
6299.col-push-5of12 {
6300  left: 41.66666667%; }
6301
6302.col-push-7of12 {
6303  left: 58.33333333%; }
6304
6305.col-push-11of12 {
6306  left: 91.66666667%; }
6307
6308.col-push-1of16 {
6309  left: 6.25%; }
6310
6311.col-push-3of16 {
6312  left: 18.75%; }
6313
6314.col-push-5of16 {
6315  left: 31.25%; }
6316
6317.col-push-7of16 {
6318  left: 43.75%; }
6319
6320.col-push-9of16 {
6321  left: 56.25%; }
6322
6323.col-push-11of16 {
6324  left: 68.75%; }
6325
6326.col-push-13of16 {
6327  left: 81.25%; }
6328
6329.col-push-15of16 {
6330  left: 93.75%; }
6331
6332@media (max-width: 959px) and (min-width: 720px) {
6333  .col-tablet-1of1, .col-tablet-2of2, .col-tablet-3of3, .col-tablet-4of4, .col-tablet-5of5, .col-tablet-6of6, .col-tablet-8of8, .col-tablet-10of10, .col-tablet-12of12, .col-tablet-16of16 {
6334    width: 100%; }
6335  .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 {
6336    width: 50%; }
6337  .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 {
6338    width: 33.33333333%; }
6339  .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 {
6340    width: 66.66666667%; }
6341  .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 {
6342    width: 25%; }
6343  .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 {
6344    width: 75%; }
6345  .col-tablet-1of5, .col-tablet-2of10 {
6346    width: 20%; }
6347  .col-tablet-2of5, .col-tablet-4of10 {
6348    width: 40%; }
6349  .col-tablet-3of5, .col-tablet-6of10 {
6350    width: 60%; }
6351  .col-tablet-4of5, .col-tablet-8of10 {
6352    width: 80%; }
6353  .col-tablet-1of6, .col-tablet-2of12 {
6354    width: 16.66666667%; }
6355  .col-tablet-5of6, .col-tablet-10of12 {
6356    width: 83.33333333%; }
6357  .col-tablet-1of8, .col-tablet-2of16 {
6358    width: 12.5%; }
6359  .col-tablet-3of8, .col-tablet-6of16 {
6360    width: 37.5%; }
6361  .col-tablet-5of8, .col-tablet-10of16 {
6362    width: 62.5%; }
6363  .col-tablet-7of8, .col-tablet-14of16 {
6364    width: 87.5%; }
6365  .col-tablet-1of10 {
6366    width: 10%; }
6367  .col-tablet-3of10 {
6368    width: 30%; }
6369  .col-tablet-7of10 {
6370    width: 70%; }
6371  .col-tablet-9of10 {
6372    width: 90%; }
6373  .col-tablet-1of12 {
6374    width: 8.33333333%; }
6375  .col-tablet-5of12 {
6376    width: 41.66666667%; }
6377  .col-tablet-7of12 {
6378    width: 58.33333333%; }
6379  .col-tablet-11of12 {
6380    width: 91.66666667%; }
6381  .col-tablet-1of16 {
6382    width: 6.25%; }
6383  .col-tablet-3of16 {
6384    width: 18.75%; }
6385  .col-tablet-5of16 {
6386    width: 31.25%; }
6387  .col-tablet-7of16 {
6388    width: 43.75%; }
6389  .col-tablet-9of16 {
6390    width: 56.25%; }
6391  .col-tablet-11of16 {
6392    width: 68.75%; }
6393  .col-tablet-13of16 {
6394    width: 81.25%; }
6395  .col-tablet-15of16 {
6396    width: 93.75%; }
6397  .col-tablet-pull-1of1, .col-tablet-pull-2of2, .col-tablet-pull-3of3, .col-tablet-pull-4of4, .col-tablet-pull-5of5, .col-tablet-pull-6of6, .col-tablet-pull-8of8, .col-tablet-pull-10of10, .col-tablet-pull-12of12, .col-tablet-pull-16of16 {
6398    left: -100%; }
6399  .col-tablet-pull-1of2, .col-tablet-pull-2of4, .col-tablet-pull-3of6, .col-tablet-pull-4of8, .col-tablet-pull-5of10, .col-tablet-pull-6of12, .col-tablet-pull-8of16 {
6400    left: -50%; }
6401  .col-tablet-pull-1of3, .col-tablet-pull-2of6, .col-tablet-pull-4of12 {
6402    left: -33.33333333%; }
6403  .col-tablet-pull-2of3, .col-tablet-pull-4of6, .col-tablet-pull-8of12 {
6404    left: -66.66666667%; }
6405  .col-tablet-pull-1of4, .col-tablet-pull-2of8, .col-tablet-pull-3of12, .col-tablet-pull-4of16 {
6406    left: -25%; }
6407  .col-tablet-pull-3of4, .col-tablet-pull-6of8, .col-tablet-pull-9of12, .col-tablet-pull-12of16 {
6408    left: -75%; }
6409  .col-tablet-pull-1of5, .col-tablet-pull-2of10 {
6410    left: -20%; }
6411  .col-tablet-pull-2of5, .col-tablet-pull-4of10 {
6412    left: -40%; }
6413  .col-tablet-pull-3of5, .col-tablet-pull-6of10 {
6414    left: -60%; }
6415  .col-tablet-pull-4of5, .col-tablet-pull-8of10 {
6416    left: -80%; }
6417  .col-tablet-pull-1of6, .col-tablet-pull-2of12 {
6418    left: -16.66666667%; }
6419  .col-tablet-pull-5of6, .col-tablet-pull-10of12 {
6420    left: -83.33333333%; }
6421  .col-tablet-pull-1of8, .col-tablet-pull-2of16 {
6422    left: -12.5%; }
6423  .col-tablet-pull-3of8, .col-tablet-pull-6of16 {
6424    left: -37.5%; }
6425  .col-tablet-pull-5of8, .col-tablet-pull-10of16 {
6426    left: -62.5%; }
6427  .col-tablet-pull-7of8, .col-tablet-pull-14of16 {
6428    left: -87.5%; }
6429  .col-tablet-pull-1of10 {
6430    left: -10%; }
6431  .col-tablet-pull-3of10 {
6432    left: -30%; }
6433  .col-tablet-pull-7of10 {
6434    left: -70%; }
6435  .col-tablet-pull-9of10 {
6436    left: -90%; }
6437  .col-tablet-pull-1of12 {
6438    left: -8.33333333%; }
6439  .col-tablet-pull-5of12 {
6440    left: -41.66666667%; }
6441  .col-tablet-pull-7of12 {
6442    left: -58.33333333%; }
6443  .col-tablet-pull-11of12 {
6444    left: -91.66666667%; }
6445  .col-tablet-pull-1of16 {
6446    left: -6.25%; }
6447  .col-tablet-pull-3of16 {
6448    left: -18.75%; }
6449  .col-tablet-pull-5of16 {
6450    left: -31.25%; }
6451  .col-tablet-pull-7of16 {
6452    left: -43.75%; }
6453  .col-tablet-pull-9of16 {
6454    left: -56.25%; }
6455  .col-tablet-pull-11of16 {
6456    left: -68.75%; }
6457  .col-tablet-pull-13of16 {
6458    left: -81.25%; }
6459  .col-tablet-pull-15of16 {
6460    left: -93.75%; }
6461  .col-tablet-push-1of1, .col-tablet-push-2of2, .col-tablet-push-3of3, .col-tablet-push-4of4, .col-tablet-push-5of5, .col-tablet-push-6of6, .col-tablet-push-8of8, .col-tablet-push-10of10, .col-tablet-push-12of12, .col-tablet-push-16of16 {
6462    left: 100%; }
6463  .col-tablet-push-1of2, .col-tablet-push-2of4, .col-tablet-push-3of6, .col-tablet-push-4of8, .col-tablet-push-5of10, .col-tablet-push-6of12, .col-tablet-push-8of16 {
6464    left: 50%; }
6465  .col-tablet-push-1of3, .col-tablet-push-2of6, .col-tablet-push-4of12 {
6466    left: 33.33333333%; }
6467  .col-tablet-push-2of3, .col-tablet-push-4of6, .col-tablet-push-8of12 {
6468    left: 66.66666667%; }
6469  .col-tablet-push-1of4, .col-tablet-push-2of8, .col-tablet-push-3of12, .col-tablet-push-4of16 {
6470    left: 25%; }
6471  .col-tablet-push-3of4, .col-tablet-push-6of8, .col-tablet-push-9of12, .col-tablet-push-12of16 {
6472    left: 75%; }
6473  .col-tablet-push-1of5, .col-tablet-push-2of10 {
6474    left: 20%; }
6475  .col-tablet-push-2of5, .col-tablet-push-4of10 {
6476    left: 40%; }
6477  .col-tablet-push-3of5, .col-tablet-push-6of10 {
6478    left: 60%; }
6479  .col-tablet-push-4of5, .col-tablet-push-8of10 {
6480    left: 80%; }
6481  .col-tablet-push-1of6, .col-tablet-push-2of12 {
6482    left: 16.66666667%; }
6483  .col-tablet-push-5of6, .col-tablet-push-10of12 {
6484    left: 83.33333333%; }
6485  .col-tablet-push-1of8, .col-tablet-push-2of16 {
6486    left: 12.5%; }
6487  .col-tablet-push-3of8, .col-tablet-push-6of16 {
6488    left: 37.5%; }
6489  .col-tablet-push-5of8, .col-tablet-push-10of16 {
6490    left: 62.5%; }
6491  .col-tablet-push-7of8, .col-tablet-push-14of16 {
6492    left: 87.5%; }
6493  .col-tablet-push-1of10 {
6494    left: 10%; }
6495  .col-tablet-push-3of10 {
6496    left: 30%; }
6497  .col-tablet-push-7of10 {
6498    left: 70%; }
6499  .col-tablet-push-9of10 {
6500    left: 90%; }
6501  .col-tablet-push-1of12 {
6502    left: 8.33333333%; }
6503  .col-tablet-push-5of12 {
6504    left: 41.66666667%; }
6505  .col-tablet-push-7of12 {
6506    left: 58.33333333%; }
6507  .col-tablet-push-11of12 {
6508    left: 91.66666667%; }
6509  .col-tablet-push-1of16 {
6510    left: 6.25%; }
6511  .col-tablet-push-3of16 {
6512    left: 18.75%; }
6513  .col-tablet-push-5of16 {
6514    left: 31.25%; }
6515  .col-tablet-push-7of16 {
6516    left: 43.75%; }
6517  .col-tablet-push-9of16 {
6518    left: 56.25%; }
6519  .col-tablet-push-11of16 {
6520    left: 68.75%; }
6521  .col-tablet-push-13of16 {
6522    left: 81.25%; }
6523  .col-tablet-push-15of16 {
6524    left: 93.75%; } }
6525
6526.col-3-wide {
6527  width: 33.3333333333%; }
6528
6529@media (max-width: 719px) {
6530  /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */
6531[class*=col-],
6532  .col-12 [class*=col-],
6533  .col-13 [class*=col-] {
6534  float: none;
6535  left: 0;
6536  width: auto;
6537} }
6538
6539/**
6540 * Fades out an element.
6541 * Applies visibility hidden when the transition is finished.
6542 *
6543 * Use opacity: 1; to show the element.
6544 */
6545/* Header component */
6546.dac-header {
6547  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07);
6548  box-sizing: border-box;
6549  background: #6ab344;
6550  height: 64px;
6551  margin: 0;
6552  left: 0;
6553  position: fixed;
6554  right: 0;
6555  top: 0;
6556  -webkit-transition: background 200ms;
6557  transition: background 200ms;
6558  z-index: 61;
6559}
6560
6561.dac-ndk {
6562  background: #00bcd4;
6563}
6564
6565.dac-search-mode .dac-header {
6566  background: #b0bec5;
6567  -webkit-transition: background 200ms;
6568  transition: background 200ms;
6569}
6570
6571.dac-search-mode .dac-header-logo,
6572  .dac-search-mode .dac-header-console-btn {
6573  opacity: 0;
6574  visibility: hidden;
6575  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
6576  transition: visibility 0s linear 200ms, opacity 200ms linear;
6577}
6578
6579.dac-header-logo {
6580  display: block;
6581  font-size: 20px;
6582  font-weight: 400;
6583  float: left;
6584  letter-spacing: .3px;
6585  line-height: 36px;
6586  opacity: 1;
6587  padding: 13px 48px 15px 0;
6588}
6589
6590.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus {
6591  color: #fff;
6592}
6593
6594@media (min-width: 980px) {
6595  .dac-header-logo {
6596    border-right: 1px solid rgba(0, 0, 0, 0.1);
6597  }
6598}
6599
6600@media (min-width: 720px) and (max-width: 979px) {
6601  .dac-header-logo {
6602    padding-right: 10px;
6603  }
6604}
6605
6606.dac-header-logo-image {
6607  margin-right: 5px;
6608  vertical-align: top;
6609}
6610
6611.dac-header-tabs {
6612  list-style: none;
6613  margin: 0 10px;
6614  display: none;
6615  opacity: 1;
6616  -webkit-transition: opacity 200ms linear 200ms;
6617  transition: opacity 200ms linear 200ms;
6618}
6619
6620@media (min-width: 720px) and (max-width: 979px) {
6621  .dac-header-tabs {
6622    display: inline-block;
6623  }
6624}
6625
6626@media (min-width: 980px) {
6627  .dac-header-tabs {
6628    display: inline-block;
6629  }
6630}
6631
6632.dac-header-tabs li {
6633  display: inline-block;
6634}
6635
6636.dac-header-tab {
6637  display: inline-block;
6638  line-height: 64px;
6639  height: 64px;
6640  padding: 0 9px;
6641  color: #fff;
6642  color: rgba(255, 255, 255, 0.7);
6643  font-size: 14px;
6644  text-transform: uppercase;
6645  font-weight: 500;
6646}
6647
6648.dac-header-tab:hover {
6649  color: #fff;
6650}
6651
6652.dac-header-tab.selected {
6653  border-bottom: 4px solid #fff;
6654  height: 60px;
6655  color: #fff;
6656}
6657
6658.dac-search-mode .dac-header-tabs {
6659  opacity: 0;
6660  -webkit-transition: opacity 0ms linear 0ms;
6661  transition: opacity 0ms linear 0ms;
6662}
6663
6664.dac-header-console-btn {
6665  border-radius: 3px;
6666  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
6667  float: right;
6668  font-size: 14px;
6669  font-weight: 500;
6670  line-height: 28px;
6671  margin: 13px 13px 12px 24px;
6672  opacity: 1;
6673  padding: 4px 10px;
6674  position: relative;
6675  text-transform: uppercase;
6676  -webkit-transition: box-shadow .2s;
6677  transition: box-shadow .2s;
6678  z-index: 60;
6679}
6680
6681@media (min-width: 720px) and (max-width: 979px) {
6682  .dac-header-console-btn {
6683    display: none;
6684  }
6685}
6686
6687.dac-header-console-btn > .dac-sprite, .dac-header-console-btn > .dac-modal-header-close:before, .paging-links .dac-header-console-btn > .prev-page-link:before, .paging-links .dac-header-console-btn > .next-page-link:before, .paging-links .dac-header-console-btn > .next-class-link:before, .paging-links .dac-header-console-btn > .start-class-link:after {
6688  margin-right: 5px;
6689}
6690
6691.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus {
6692  color: #fff;
6693}
6694
6695.dac-header-console-btn:hover {
6696  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
6697}
6698
6699.dac-header-console-btn:focus {
6700  background: rgba(63, 81, 181, 0.1);
6701  outline: 0;
6702}
6703
6704@media (max-width: 719px) {
6705  .dac-header {
6706    text-align: center;
6707  }
6708
6709  .dac-header-logo {
6710    border-right: 0;
6711    display: inline-block;
6712    margin-right: 0;
6713    float: none;
6714    padding-left: 0;
6715    padding-right: 0;
6716  }
6717
6718  .dac-header-console-btn {
6719    display: none;
6720  }
6721}
6722
6723/* Header Breadcrumbs component */
6724.dac-header-crumbs {
6725  list-style-type: none;
6726  margin: 23px 0 -13px 0;
6727  display: inline-block;
6728}
6729
6730.dac-header-crumbs.dac-has-content {
6731  opacity: 1;
6732}
6733
6734.dac-header-crumbs-item {
6735  float: left;
6736  position: relative;
6737  margin: 0;
6738  padding: 0;
6739}
6740
6741.dac-header-crumbs-item i, .dac-header-crumbs-item .dac-nav-link-forward {
6742  display: none;
6743}
6744
6745.dac-header-crumbs-item:before {
6746  content: '';
6747  background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
6748  width: 10px;
6749  height: 10px;
6750  display: inline-block;
6751  position: absolute;
6752  top: 12px;
6753  left: -15px;
6754}
6755
6756.dac-header-crumbs-item:first-child:before {
6757  content: none;
6758}
6759
6760.dac-header-crumbs-link {
6761  display: block;
6762  font-size: 16px;
6763  line-height: 32px;
6764  padding: 0 20px 0 0;
6765}
6766
6767.dac-header-crumbs-link, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus {
6768  color: #666;
6769}
6770
6771.dac-header-crumbs-link:focus {
6772  outline: 0;
6773  text-decoration: underline;
6774}
6775
6776.dac-header-crumbs-link.current {
6777  font-weight: 400;
6778}
6779
6780/* Header site search component */
6781.dac-header-search {
6782  bottom: 64px;
6783  position: absolute;
6784  right: 220px;
6785  top: 0;
6786  width: 238px;
6787  -webkit-transition: width 300ms, right 100ms, margin 100ms;
6788  transition: width 300ms, right 100ms, margin 100ms;
6789}
6790
6791.dac-header-search-inner {
6792  margin: 0 auto;
6793  max-width: 940px;
6794  position: relative;
6795  width: 100%;
6796}
6797
6798@media (min-width: 980px) {
6799  .dac-header-search-inner::after {
6800    background: -webkit-linear-gradient(right, #6ab344, rgba(106, 179, 68, 0));
6801    background: linear-gradient(to left, #6ab344, rgba(106, 179, 68, 0));
6802    content: '';
6803    display: block;
6804    height: 64px;
6805    position: absolute;
6806    right: 100%;
6807    top: 0;
6808    -webkit-transition: opacity 200ms, -webkit-transform 300ms;
6809    transition: opacity 200ms, transform 300ms;
6810    -webkit-transform-origin: right center;
6811    -ms-transform-origin: right center;
6812    transform-origin: right center;
6813    width: 64px;
6814  }
6815
6816  .dac-search-mode .dac-header-search-inner::after {
6817    opacity: 0;
6818    -webkit-transform: scaleX(0);
6819    -ms-transform: scaleX(0);
6820    transform: scaleX(0);
6821  }
6822}
6823
6824.dac-header-search-icon {
6825  left: 8px;
6826  pointer-events: none;
6827  position: absolute;
6828  top: 18px;
6829}
6830
6831.dac-header-search-input {
6832  background: #77be53;
6833  border-radius: 3px;
6834  border: none;
6835  box-sizing: border-box;
6836  color: #fff;
6837  font-size: 14px;
6838  font-weight: 600;
6839  margin: 13px 0;
6840  padding: 9px 36px 10px;
6841  -webkit-transition: background 200ms, color 200ms;
6842  transition: background 200ms, color 200ms;
6843  width: 100%;
6844}
6845
6846.dac-header-search-close, .dac-header-search-clear {
6847  background: none;
6848  border: none;
6849  cursor: pointer;
6850  font-size: 0;
6851  outline: none;
6852  position: absolute;
6853  margin: 0;
6854}
6855
6856.dac-header-search-clear {
6857  display: inline-block;
6858  opacity: .4;
6859  padding: 8px;
6860  top: 15px;
6861  right: 0;
6862}
6863
6864.dac-header-search-clear:hover, .dac-header-search-clear:focus {
6865  opacity: .8;
6866}
6867
6868.dac-header-search-close {
6869  left: -45px;
6870  top: 20px;
6871  -webkit-transform: translateX(45px);
6872  -ms-transform: translateX(45px);
6873  transform: translateX(45px);
6874  visibility: hidden;
6875}
6876
6877.dac-header-search ::-webkit-input-placeholder {
6878  color: #fff;
6879  font-weight: 300;
6880  -webkit-transition: color 200ms;
6881  transition: color 200ms;
6882}
6883
6884.dac-header-search :-moz-placeholder {
6885  color: #fff;
6886  font-weight: 300;
6887  transition: color 200ms;
6888}
6889
6890.dac-header-search ::-moz-placeholder {
6891  color: #fff;
6892  font-weight: 300;
6893  transition: color 200ms;
6894}
6895
6896.dac-header-search :-ms-input-placeholder {
6897  color: #fff;
6898  font-weight: 300;
6899  transition: color 200ms;
6900}
6901
6902.dac-header-search-input:focus {
6903  outline: 0;
6904}
6905
6906.dac-search-mode .dac-header-search {
6907  width: 940px;
6908  right: 50%;
6909  margin-right: -470px;
6910}
6911
6912.dac-search-mode .dac-header-search .dac-header-search-input::after {
6913  background: -webkit-linear-gradient(right, #b0bec5, rgba(176, 190, 197, 0));
6914  background: linear-gradient(to left, #b0bec5, rgba(176, 190, 197, 0));
6915}
6916
6917.dac-search-mode .dac-header-search .dac-header-search-close {
6918  -webkit-transition: -webkit-transform 200ms ease-out 300ms;
6919  transition: transform 200ms ease-out 300ms;
6920  -webkit-transform: translateX(0);
6921  -ms-transform: translateX(0);
6922  transform: translateX(0);
6923  visibility: visible;
6924}
6925
6926.dac-search-mode .dac-header-search .dac-header-search-icon {
6927  left: 23px;
6928}
6929
6930.dac-search-mode .dac-header-search .dac-header-search-input {
6931  background: #fff;
6932  border-radius: 0;
6933  font-size: 18px;
6934  color: #666;
6935  padding-left: 55px;
6936  margin-top: 11px;
6937}
6938
6939.dac-search-mode .dac-header-search ::-webkit-input-placeholder {
6940  color: #505050;
6941}
6942
6943.dac-search-mode .dac-header-search :-moz-placeholder {
6944  color: #505050;
6945}
6946
6947.dac-search-mode .dac-header-search ::-moz-placeholder {
6948  color: #505050;
6949}
6950
6951.dac-search-mode .dac-header-search :-ms-input-placeholder {
6952  color: #505050;
6953}
6954
6955@media (min-width: 720px) and (max-width: 979px) {
6956  .dac-header-search {
6957    right: 20px;
6958    width: 200px;
6959    -webkit-transition: left 200ms, right 200ms, width 200ms;
6960    transition: left 200ms, right 200ms, width 200ms;
6961  }
6962
6963  .dac-search-mode .dac-header-search {
6964    left: 60px;
6965    right: 0;
6966    width: 100%;
6967  }
6968
6969  .dac-search-mode .dac-header-search .dac-header-search-inner {
6970    margin: 0;
6971    width: calc(100% - 60px - 10px);
6972  }
6973
6974  .dac-header-search-close {
6975    left: -42px;
6976  }
6977}
6978
6979@media (max-width: 719px) {
6980  .dac-header-search {
6981    bottom: 0;
6982    border-radius: 0;
6983    border-left: 1px solid rgba(0, 0, 0, 0.1);
6984    cursor: pointer;
6985    left: calc(100% - 64px);
6986    margin: 0;
6987    overflow: hidden;
6988    padding-left: 10px;
6989    padding-right: 10px;
6990    position: absolute;
6991    right: 0;
6992    top: 0;
6993  }
6994
6995  .dac-header-search-input {
6996    background: none;
6997    cursor: pointer;
6998    opacity: 0;
6999  }
7000
7001  .dac-search-mode .dac-header-search {
7002    background: #b0bec5;
7003    cursor: default;
7004    overflow: visible;
7005    left: 60px;
7006    right: 0;
7007    width: 100%;
7008    -webkit-transition: left 200ms, right 200ms, width 200ms;
7009    transition: left 200ms, right 200ms, width 200ms;
7010    padding: 0;
7011    border: none;
7012  }
7013
7014  .dac-search-mode .dac-header-search .dac-header-search-inner {
7015    margin: 0;
7016    width: calc(100% - 60px - 10px);
7017  }
7018
7019  .dac-search-mode .dac-header-search .dac-header-search-input {
7020    opacity: 1;
7021  }
7022}
7023
7024.highlighted em {
7025  color: #333;
7026  font-style: normal;
7027  font-weight: 700;
7028}
7029
7030.card-info .title.highlighted {
7031  color: #666;
7032}
7033
7034/* Main navigation component */
7035.dac-nav-sidebar {
7036  background: #f5f8fa;
7037  border-right: 1px solid rgba(0, 0, 0, 0.1);
7038  bottom: 0;
7039  left: 0;
7040  overflow: hidden;
7041  padding: 0;
7042  position: fixed;
7043  top: 64px;
7044  -webkit-transform: translate(-100%, 0);
7045  -ms-transform: translate(-100%, 0);
7046  transform: translate(-100%, 0);
7047  width: 250px;
7048  z-index: 60;
7049}
7050
7051.dac-nav-animating .dac-nav-sidebar {
7052  -webkit-transition: -webkit-transform .3s;
7053  transition: transform .3s;
7054}
7055
7056.dac-nav-open .dac-nav-sidebar {
7057  -webkit-transform: translate(0, 0);
7058  -ms-transform: translate(0, 0);
7059  transform: translate(0, 0);
7060}
7061
7062.dac-search-mode .dac-nav-sidebar {
7063  -webkit-transition: -webkit-transform .3s;
7064  transition: transform .3s;
7065  -webkit-transform: translate(-100%, 0);
7066  -ms-transform: translate(-100%, 0);
7067  transform: translate(-100%, 0);
7068}
7069
7070.dac-nav .dac-swap-section {
7071  -webkit-transition-duration: .3s;
7072  transition-duration: .3s;
7073}
7074
7075.dac-nav-back {
7076  margin-top: -3px;
7077  margin-right: 10px;
7078}
7079
7080.dac-nav-fullscreen {
7081  background: transparent;
7082  border: none;
7083  bottom: 100%;
7084  cursor: pointer;
7085  display: none;
7086  opacity: .8;
7087  outline: none;
7088  padding: 20px 15px;
7089  position: absolute;
7090  right: 0;
7091}
7092
7093@media (min-width: 980px) {
7094  .dac-nav-fullscreen {
7095    display: inline-block;
7096  }
7097}
7098
7099.dac-nav-fullscreen:hover {
7100  opacity: 1;
7101}
7102
7103.dac-nav-sub-slider {
7104  cursor: pointer;
7105  opacity: .5;
7106  position: absolute;
7107  right: 7px;
7108  top: 5px;
7109}
7110
7111.dac-nav-back-button {
7112  background: #546e7a;
7113  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
7114  display: block;
7115  font-weight: 500;
7116  font-size: 18px;
7117  left: 0;
7118  margin: 0;
7119  padding: 20px;
7120  position: absolute !important;
7121  right: 0;
7122  top: 0;
7123  z-index: 1;
7124}
7125
7126.dac-nav-back-button, .dac-nav-back-button:hover, .dac-nav-back-button:active {
7127  color: rgba(255, 255, 255, 0.7);
7128}
7129
7130.dac-nav-back-button > .dac-sprite, .dac-nav-back-button > .dac-modal-header-close:before, .paging-links .dac-nav-back-button > .prev-page-link:before, .paging-links .dac-nav-back-button > .next-page-link:before, .paging-links .dac-nav-back-button > .next-class-link:before, .paging-links .dac-nav-back-button > .start-class-link:after {
7131  opacity: .7;
7132}
7133
7134.dac-nav-logo {
7135  font-size: 20px;
7136  font-weight: 300;
7137  letter-spacing: .3px;
7138  line-height: 36px;
7139  margin: 0;
7140  padding: 14px 24px;
7141}
7142
7143.dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus {
7144  color: #444;
7145}
7146
7147.dac-nav-list {
7148  bottom: 0;
7149  left: 0;
7150  list-style-type: none;
7151  margin: 0;
7152  -webkit-overflow-scrolling: touch;
7153  overflow-y: scroll;
7154  padding: 16px 0;
7155  position: absolute !important;
7156  right: 0;
7157  top: 0 !important;
7158  scrollbar-face-color: #b7baba;
7159  scrollbar-track-color: #e5e8e9;
7160}
7161
7162.dac-nav-list::-webkit-scrollbar {
7163  width: 4px;
7164  height: 4px;
7165}
7166
7167.dac-nav-list::-webkit-scrollbar-thumb {
7168  background: #b7baba;
7169}
7170
7171.dac-nav-list::-webkit-scrollbar-track {
7172  background: #e5e8e9;
7173}
7174
7175.dac-nav-secondary {
7176  margin: 0;
7177}
7178
7179.dac-nav-item {
7180  list-style-type: none;
7181  margin: 0 0 10px;
7182  position: relative;
7183}
7184
7185.dac-nav-secondary .dac-nav-item {
7186  margin-bottom: 0;
7187}
7188
7189.dac-nav-head {
7190  display: block;
7191  font-size: 16px;
7192  font-weight: 300;
7193  letter-spacing: .24px;
7194  line-height: 32px;
7195  margin-bottom: 20px;
7196  margin-top: 0;
7197}
7198
7199.dac-nav-dimmer {
7200  background: #000;
7201  display: block;
7202  height: 100%;
7203  left: 0;
7204  opacity: 0;
7205  position: fixed;
7206  top: 0;
7207  -webkit-transform: translateZ(0);
7208  transform: translateZ(0);
7209  visibility: hidden;
7210  width: 100%;
7211  z-index: 60;
7212}
7213
7214.dac-nav-animating .dac-nav-dimmer {
7215  -webkit-transition: visibility 0s linear .3s, opacity .3s linear;
7216  transition: visibility 0s linear .3s, opacity .3s linear;
7217}
7218
7219.dac-nav-open .dac-nav-dimmer {
7220  opacity: .8;
7221  -webkit-transition-delay: 0s;
7222  transition-delay: 0s;
7223  visibility: visible;
7224}
7225
7226@media (min-width: 980px) {
7227  .dac-nav-dimmer {
7228    display: none;
7229  }
7230}
7231
7232.dac-nav-hamburger {
7233  display: inline-block;
7234  float: left;
7235  height: 15px;
7236  padding: 22px 20px;
7237  width: 18px;
7238}
7239
7240@media (max-width: 719px) {
7241  .dac-nav-hamburger {
7242    border-right: 1px solid rgba(0, 0, 0, 0.1);
7243    left: 0;
7244    padding-bottom: 27px;
7245    position: absolute;
7246    top: 0;
7247  }
7248}
7249
7250.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7251  background: rgba(0, 0, 0, 0.4);
7252  display: block;
7253  height: 2px;
7254  margin: 3px 0 0;
7255  opacity: .5;
7256  width: 100%;
7257}
7258
7259.dac-nav-animating .dac-nav-hamburger-top, .dac-nav-animating .dac-nav-hamburger-mid, .dac-nav-animating .dac-nav-hamburger-bot {
7260  -webkit-transition: opacity .3s;
7261  transition: opacity .3s;
7262}
7263
7264@media (max-width: 719px) {
7265  .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7266    background: #fff;
7267    opacity: 1;
7268  }
7269}
7270
7271.dac-nav-open .dac-nav-hamburger-top,
7272  .dac-nav-open .dac-nav-hamburger-mid,
7273  .dac-nav-open .dac-nav-hamburger-bot {
7274  opacity: 1;
7275}
7276
7277.dac-search-mode .dac-nav-hamburger {
7278  opacity: 0;
7279  visibility: hidden;
7280  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
7281  transition: visibility 0s linear 200ms, opacity 200ms linear;
7282}
7283
7284.dac-nav-link {
7285  color: #444;
7286  display: block;
7287  font-size: 18px;
7288  font-weight: 500;
7289  letter-spacing: .24px;
7290  padding: 5px 20px;
7291  -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7292  transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7293}
7294
7295.dac-nav-link:hover, .dac-nav-link:focus {
7296  color: rgba(68, 68, 68, 0.7);
7297}
7298
7299.dac-nav-link:focus {
7300  background: rgba(63, 81, 181, 0.1);
7301  outline: 0;
7302}
7303
7304.dac-nav-secondary .dac-nav-link {
7305  font-size: 12px;
7306  font-weight: 400;
7307  padding-left: 40px;
7308}
7309
7310.dac-nav-link.selected {
7311  background: rgba(63, 81, 181, 0.1);
7312  color: #039bef;
7313  position: relative;
7314}
7315
7316.dac-nav-link-forward {
7317  background: #546E7A;
7318  color: #fff;
7319  cursor: pointer;
7320  display: inline-block;
7321  line-height: 34px;
7322  padding: 0;
7323  position: absolute;
7324  right: 0;
7325  top: 0;
7326  text-align: center;
7327  width: 34px;
7328}
7329
7330.dac-nav-link-forward > .dac-nav-forward {
7331  opacity: .7;
7332  vertical-align: -3px;
7333}
7334
7335.dac-nav-sub {
7336  bottom: 0;
7337  left: 0;
7338  position: absolute !important;
7339  top: 65px !important;
7340  right: 0;
7341  z-index: 1;
7342}
7343
7344#body-content {
7345  padding-top: 64px;
7346}
7347
7348.dac-nav-animating #body-content {
7349  -webkit-transition: padding .3s;
7350  transition: padding .3s;
7351}
7352
7353@media (min-width: 980px) {
7354  .dac-nav-open #body-content {
7355    padding-left: 250px;
7356  }
7357}
7358
7359.dac-nav-open {
7360  overflow: hidden;
7361}
7362
7363@media (min-width: 980px) {
7364  .dac-nav-open {
7365    overflow: visible;
7366  }
7367}
7368
7369#devdoc-nav {
7370  height: 100%;
7371}
7372
7373.dac-reference-nav {
7374  height: calc(100% - 36px);
7375  overflow: hidden;
7376  position: relative;
7377}
7378
7379.dac-reference-nav ul,
7380  .dac-reference-nav li {
7381  margin: 0;
7382  list-style-type: none;
7383}
7384
7385.dac-reference-nav-list {
7386  bottom: 0;
7387  overflow: hidden;
7388  overflow-y: scroll;
7389  left: 0;
7390  padding: 10px;
7391  padding-left: 20px;
7392  position: absolute;
7393  right: 0;
7394  top: 0;
7395  scrollbar-face-color: #9da4a7;
7396  scrollbar-track-color: #c4cdd1;
7397}
7398
7399.dac-reference-nav-list::-webkit-scrollbar {
7400  width: 4px;
7401  height: 4px;
7402}
7403
7404.dac-reference-nav-list::-webkit-scrollbar-thumb {
7405  background: #9da4a7;
7406}
7407
7408.dac-reference-nav-list::-webkit-scrollbar-track {
7409  background: #c4cdd1;
7410}
7411
7412.dac-reference-nav-resources {
7413  display: none;
7414  padding: 0 0 0 13px;
7415}
7416
7417.dac-reference-nav-resource, .dac-reference-nav-toggle {
7418  color: #505050;
7419  cursor: pointer;
7420  display: block;
7421  font-size: 13px;
7422  line-height: 1;
7423  overflow: hidden;
7424  margin: 0;
7425  padding: 3px 0;
7426  position: relative;
7427  text-overflow: ellipsis;
7428  white-space: nowrap;
7429}
7430
7431.dac-reference-nav-toggle {
7432  margin-left: -12px;
7433  padding-left: 12px;
7434}
7435
7436.selected > .dac-reference-nav-resource {
7437  color: #039bef;
7438  font-weight: 600;
7439}
7440
7441.dac-reference-nav-toggle::before {
7442  background: transparent url(../images/styles/disclosure_up.png) no-repeat center center;
7443  content: '';
7444  display: block;
7445  height: 19px;
7446  left: 0;
7447  position: absolute;
7448  top: 0;
7449  width: 8px;
7450}
7451
7452.dac-reference-nav-toggle.dac-closed::before {
7453  -webkit-transform: scaleY(-1);
7454  -ms-transform: scaleY(-1);
7455  transform: scaleY(-1);
7456}
7457
7458/* nav */
7459#nav {
7460  background: #cfd8dc;
7461  bottom: 0;
7462  left: 0;
7463  margin: 0;
7464  -webkit-overflow-scrolling: touch;
7465  overflow-y: scroll;
7466  position: absolute !important;
7467  right: 0;
7468  top: 0 !important;
7469  padding: 10px;
7470  scrollbar-face-color: #9da4a7;
7471  scrollbar-track-color: #c4cdd1;
7472  /* section header links */
7473  /* nested nav headers */
7474}
7475
7476#nav::-webkit-scrollbar {
7477  width: 4px;
7478  height: 4px;
7479}
7480
7481#nav::-webkit-scrollbar-thumb {
7482  background: #9da4a7;
7483}
7484
7485#nav::-webkit-scrollbar-track {
7486  background: #c4cdd1;
7487}
7488
7489#nav li {
7490  font-size: 12px;
7491  line-height: 18px;
7492  list-style-type: none;
7493  margin: 0;
7494  padding: 0;
7495}
7496
7497#nav a {
7498  color: #505050;
7499  text-decoration: none;
7500  word-wrap: break-word;
7501}
7502
7503#nav .nav-section-header {
7504  padding: 0 30px 0 0;
7505  position: relative;
7506  -webkit-transition: background-color .1s;
7507  transition: background-color .1s;
7508}
7509
7510#nav .nav-section-header.empty {
7511  padding: 0;
7512}
7513
7514#nav .nav-section-header.empty::after {
7515  display: none;
7516}
7517
7518#nav .nav-section-header:after {
7519  background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
7520  content: '';
7521  height: 34px;
7522  display: block;
7523  position: absolute;
7524  right: 0;
7525  top: 1px;
7526  width: 34px;
7527}
7528
7529#nav li.selected a {
7530  color: #0288D1;
7531}
7532
7533#nav li.selected ul li a {
7534  color: #505050;
7535}
7536
7537#nav li.expanded .nav-section-header {
7538  background: #bac2c6;
7539}
7540
7541#nav li.expanded .nav-section-header.empty {
7542  background: none;
7543}
7544
7545#nav li.expanded li .nav-section-header {
7546  background: none;
7547}
7548
7549#nav li.expanded li ul {
7550  padding: 0 10px;
7551}
7552
7553#nav li.expanded > .nav-section-header:after {
7554  content: '';
7555  background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
7556  width: 34px;
7557  height: 34px;
7558}
7559
7560#nav li.expanded li ul.tree-list-children {
7561  padding: 0;
7562}
7563
7564#nav li.expanded li ul.tree-list-children .tree-list-children {
7565  padding: 0 0 0 10px;
7566}
7567
7568#nav .nav-section .nav-section .nav-section-header {
7569    /* no white line between second level sections */
7570  margin-bottom: 0;
7571}
7572
7573#nav > li > div > a {
7574  display: block;
7575  font-weight: 700;
7576  padding: 10px;
7577}
7578
7579#nav .nav-section .nav-section {
7580  position: relative;
7581  padding: 0;
7582  margin: 0;
7583}
7584
7585#nav .nav-section li a {
7586    /* first gen child (2nd level li) */
7587  display: block;
7588  font-weight: 700;
7589  text-transform: none;
7590  padding: 10px;
7591}
7592
7593#nav .nav-section li li a {
7594    /* second gen child (3rd level li) */
7595  font-weight: 400;
7596  padding: 6px 6px 6px 10px;
7597}
7598
7599#nav li span.tree-list-subtitle {
7600  display: inline-block;
7601  color: #555;
7602  font-size: 12px;
7603  padding: 10px;
7604  text-transform: uppercase;
7605}
7606
7607#nav li span.tree-list-subtitle:before {
7608  content: '—';
7609}
7610
7611#nav li span.tree-list-subtitle:after {
7612  content: '—';
7613}
7614
7615#nav li span.tree-list-subtitle.package {
7616  padding-top: 15px;
7617  cursor: default;
7618}
7619
7620#nav li span.tree-list-subtitle.package:before {
7621  content: '';
7622}
7623
7624#nav li span.tree-list-subtitle.package:after {
7625  content: '';
7626}
7627
7628#nav li ul.tree-list-children.classes {
7629  padding-left: 10px;
7630}
7631
7632#nav li ul {
7633  display: none;
7634  overflow: hidden;
7635  margin: 0;
7636}
7637
7638#nav li ul.animate-height-in {
7639  -webkit-transition: height 0.25s ease-in;
7640  transition: height 0.25s ease-in;
7641}
7642
7643#nav li ul.animate-height-out {
7644  -webkit-transition: height 0.25s ease-out;
7645  transition: height 0.25s ease-out;
7646}
7647
7648#nav li ul li {
7649  padding: 0;
7650}
7651
7652#nav li li li {
7653  padding: 0;
7654}
7655
7656#nav li ul > li {
7657  padding: 0;
7658}
7659
7660#nav li ul > li:last-child {
7661  padding-bottom: 5px;
7662}
7663
7664#nav li ul.tree-list-children > li:last-child {
7665  padding-bottom: 0;
7666}
7667
7668#nav li.expanded ul > li {
7669  background: #c4cdd1;
7670}
7671
7672#nav li.expanded ul > li li {
7673  background: inherit;
7674}
7675
7676#nav li ul.tree-list-children ul {
7677  display: block;
7678}
7679
7680#nav.samples-nav li li li a {
7681  padding-top: 3px;
7682  padding-bottom: 3px;
7683}
7684
7685#nav.samples-nav li li ul > li:last-child {
7686  padding-bottom: 3px;
7687}
7688
7689/* Hero carousel */
7690.dac-hero {
7691  background-color: #fff;
7692  background-position: 50% 30%;
7693  background-size: cover;
7694  box-sizing: border-box;
7695  font-size: 16px;
7696  min-height: 550px;
7697  padding-top: 88px;
7698}
7699
7700.dac-hero.dac-darken::before {
7701  background: rgba(0, 0, 0, 0.3);
7702  bottom: 0;
7703  content: '';
7704  display: block;
7705  left: 0;
7706  position: absolute;
7707  right: 0;
7708  top: 0;
7709}
7710
7711@media (max-width: 719px) {
7712  .dac-hero.dac-darken::before {
7713    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7714    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7715  }
7716}
7717
7718.dac-hero.dac-darken .dac-hero-content {
7719  position: relative;
7720}
7721
7722@media (max-width: 719px) {
7723  .dac-hero {
7724    padding-bottom: 20px;
7725    padding-top: 20px;
7726  }
7727}
7728
7729.dac-hero-tag {
7730  font-size: 11px;
7731  font-weight: 700;
7732  letter-spacing: .07em;
7733  margin-bottom: 2px;
7734  text-transform: uppercase;
7735}
7736
7737.dac-hero-title {
7738  margin: 0 0 14px;
7739}
7740
7741@media (max-width: 719px) {
7742  .dac-hero-title {
7743    font-size: 28px;
7744    line-height: 35px;
7745  }
7746}
7747
7748.dac-hero-description {
7749  margin-bottom: 16px;
7750}
7751
7752@media (max-width: 719px) {
7753  .dac-hero-description {
7754    font-size: 14px;
7755  }
7756}
7757
7758.dac-hero-cta {
7759  display: inline-block;
7760  line-height: 40px;
7761  margin-right: 20px;
7762  -webkit-transition: opacity .3s;
7763  transition: opacity .3s;
7764}
7765
7766.dac-hero-cta:hover {
7767  color: currentColor;
7768  opacity: .54;
7769}
7770
7771.dac-hero-cta .dac-sprite, .dac-hero-cta .dac-modal-header-close:before, .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-hero-cta .prev-page-link:before, .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-hero-cta .next-page-link:before, .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-hero-cta .next-class-link:before, .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-hero-cta .start-class-link:after {
7772  margin-left: -8px;
7773}
7774
7775@media (max-width: 719px) {
7776  .dac-hero-cta {
7777    line-height: 28px;
7778  }
7779}
7780
7781.dac-hero-figure {
7782  text-align: center;
7783}
7784
7785@media (max-width: 719px) {
7786  .dac-hero-figure {
7787    height: 150px;
7788    margin: 15px 0;
7789  }
7790
7791  .dac-hero-figure img {
7792    max-height: 150px;
7793  }
7794}
7795
7796.dac-hero-carousel {
7797  height: 550px;
7798  position: relative;
7799}
7800
7801.dac-hero-carousel > .dac-hero {
7802  bottom: 0;
7803  left: 0;
7804  position: absolute;
7805  right: 0;
7806  top: 0;
7807  will-change: opacity;
7808}
7809
7810.dac-hero-carousel > .dac-hero,
7811    .dac-hero-carousel > .dac-hero .wrap {
7812  opacity: 0;
7813}
7814
7815.dac-hero-carousel > .dac-hero.active {
7816  opacity: 1;
7817  -webkit-transition: opacity .5s;
7818  transition: opacity .5s;
7819  z-index: 1;
7820}
7821
7822.dac-hero-carousel > .dac-hero.active .wrap {
7823  opacity: 1;
7824  -webkit-transition: opacity .5s .5s;
7825  transition: opacity .5s .5s;
7826}
7827
7828.dac-hero-carousel > .dac-hero.out,
7829    .dac-hero-carousel > .dac-hero.out .wrap {
7830  -webkit-transition: opacity 0s .5s;
7831  transition: opacity 0s .5s;
7832  opacity: 0;
7833}
7834
7835.dac-hero-carousel-action {
7836  bottom: 0;
7837  display: block;
7838  left: 0;
7839  position: absolute;
7840  right: 0;
7841  top: 0;
7842  z-index: 1;
7843}
7844
7845.dac-hero-carousel .dac-hero-cta {
7846  position: relative;
7847  z-index: 1;
7848}
7849
7850.dac-hero-carousel-pagination {
7851  bottom: 33px;
7852  left: 0;
7853  position: absolute;
7854  right: 0;
7855}
7856
7857@media (max-width: 719px) {
7858  .dac-hero-carousel-pagination {
7859    text-align: center;
7860    bottom: 20px;
7861  }
7862}
7863
7864.dac-hero-carousel-pagination .dac-pagination-item {
7865  position: relative;
7866  z-index: 1;
7867}
7868
7869.dac-pagination {
7870  list-style: none;
7871  margin: 0 -6px;
7872}
7873
7874.dac-pagination-item {
7875  background-clip: content-box;
7876  background-color: rgba(153, 153, 153, 0.4);
7877  border-radius: 50%;
7878  cursor: pointer;
7879  display: inline-block;
7880  height: 14px;
7881  overflow: hidden;
7882  padding: 6px;
7883  pointer-events: all;
7884  text-indent: 100%;
7885  -webkit-transition: background-color .1s ease-in;
7886  transition: background-color .1s ease-in;
7887  white-space: nowrap;
7888  width: 14px;
7889  will-change: background-color;
7890}
7891
7892.dac-pagination-item:hover {
7893  background-color: rgba(153, 153, 153, 0.6);
7894}
7895
7896.dac-pagination-item.active, .dac-pagination-item.active:hover {
7897  background-color: #6ab344;
7898}
7899
7900.dac-invert .dac-pagination-item {
7901  background-color: rgba(204, 204, 204, 0.2);
7902}
7903
7904.dac-invert .dac-pagination-item:hover {
7905  background-color: rgba(153, 153, 153, 0.4);
7906}
7907
7908@media (max-width: 719px) {
7909  .dac-pagination-item {
7910    height: 12px;
7911    width: 12px;
7912  }
7913}
7914
7915/* Form component */
7916.dac-form {
7917  color: #505050;
7918  font-size: 16px;
7919  /* Modal Responsive */
7920}
7921
7922.dac-form a {
7923  color: #000;
7924}
7925
7926.dac-form-aside {
7927  display: inline-block;
7928  font-size: 12px;
7929  margin-top: 0;
7930}
7931
7932.dac-form-required {
7933  color: #ef4300;
7934}
7935
7936.dac-form-fieldset {
7937  padding: 0;
7938}
7939
7940.dac-form-legend {
7941  display: block;
7942  color: #333;
7943  font-weight: 500;
7944  margin: 20px 0 12px;
7945  padding: 0;
7946  width: 100%;
7947}
7948
7949.dac-form-legend > .dac-form-required {
7950  float: right;
7951  margin-top: 3px;
7952}
7953
7954.dac-form-input {
7955  border: 0 solid #e3e3e3;
7956  border-bottom-width: 1px;
7957  display: block;
7958  outline: 0;
7959  padding: 1px 0 8px;
7960  -webkit-transition: border-color .2s;
7961  transition: border-color .2s;
7962  width: 100%;
7963}
7964
7965.dac-form-input-group {
7966  position: relative;
7967}
7968
7969.dac-form-input-group > .dac-form-required {
7970  display: block;
7971  bottom: 3px;
7972  position: absolute;
7973  right: 0;
7974}
7975
7976.dac-form-input:focus {
7977  border-bottom-color: #09f;
7978}
7979
7980.dac-form-floatlabel {
7981  display: block;
7982  cursor: text;
7983  margin-top: 5px;
7984  pointer-events: none;
7985  -webkit-transform-origin: 0 100%;
7986  -ms-transform-origin: 0 100%;
7987  transform-origin: 0 100%;
7988  -webkit-transform: translate3d(0, 22px, 0) scale(1);
7989  transform: translate3d(0, 22px, 0) scale(1);
7990  -webkit-transition: -webkit-transform .2s;
7991  transition: transform .2s;
7992}
7993
7994.dac-focused > .dac-form-floatlabel,
7995    .dac-has-value > .dac-form-floatlabel {
7996  cursor: default;
7997  -webkit-transform: translate3d(0, 0, 0) scale(0.75);
7998  transform: translate3d(0, 0, 0) scale(0.75);
7999}
8000
8001.dac-form-radio, .dac-form-checkbox {
8002  opacity: 0;
8003  position: absolute;
8004  visibility: hidden;
8005}
8006
8007.dac-form-radio-group, .dac-form-checkbox-group {
8008  display: table;
8009}
8010
8011.dac-form-radio-group + .dac-form-radio-group, .dac-form-checkbox-group + .dac-form-radio-group, .dac-form-radio-group + .dac-form-checkbox-group, .dac-form-checkbox-group + .dac-form-checkbox-group {
8012  margin-top: 10px;
8013}
8014
8015.dac-form-radio-button, .dac-form-checkbox-button {
8016  box-sizing: border-box;
8017  cursor: pointer;
8018  display: table-cell;
8019  float: left;
8020  height: 18px;
8021  margin: 2px 10px 0 0;
8022  position: relative;
8023  width: 18px;
8024}
8025
8026.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before {
8027  box-sizing: border-box;
8028  content: '';
8029  display: block;
8030  position: absolute;
8031}
8032
8033.dac-form-radio-button::after, .dac-form-radio-button::before {
8034  border-radius: 50%;
8035  height: 100%;
8036  width: 100%;
8037}
8038
8039.dac-form-radio-button::before {
8040  background: rgba(0, 0, 0, 0.7);
8041  -webkit-transform: translateZ(0) scale(0);
8042  transform: translateZ(0) scale(0);
8043  -webkit-transition: -webkit-transform .3s;
8044  transition: transform .3s;
8045}
8046
8047.dac-form-radio-button::after {
8048  border: 2px solid rgba(0, 0, 0, 0.7);
8049}
8050
8051.dac-form-radio:checked + .dac-form-radio-button::before {
8052  -webkit-transform: translateZ(0) scale(0.5);
8053  transform: translateZ(0) scale(0.5);
8054}
8055
8056.dac-form-radio:focus + .dac-form-radio-button::after {
8057  border: 2px solid #09f;
8058}
8059
8060.dac-form-checkbox-button::before {
8061  border: 1px solid #6c6e6f;
8062  border-radius: 3px;
8063  height: 100%;
8064  -webkit-transition: background .1s ease-out, box-shadow .3s ease-out;
8065  transition: background .1s ease-out, box-shadow .3s ease-out;
8066  width: 100%;
8067}
8068
8069.dac-form-checkbox-button::after {
8070  border-bottom: 2px solid #fff;
8071  border-left: 2px solid #fff;
8072  bottom: 7px;
8073  height: 7px;
8074  left: 3px;
8075  -webkit-transform: rotate(-45deg);
8076  -ms-transform: rotate(-45deg);
8077  transform: rotate(-45deg);
8078  width: 12px;
8079}
8080
8081.dac-form-checkbox:checked + .dac-form-checkbox-button::before {
8082  background: #6c6e6f;
8083  -webkit-transition-timing-function: ease-in;
8084  transition-timing-function: ease-in;
8085}
8086
8087.dac-form-checkbox:focus + .dac-form-checkbox-button::before,
8088  .dac-form-checkbox:active + .dac-form-checkbox-button::before {
8089  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
8090}
8091
8092.dac-form-label {
8093  cursor: pointer;
8094  -webkit-user-select: none;
8095  -moz-user-select: none;
8096  -ms-user-select: none;
8097  user-select: none;
8098}
8099
8100@media (max-width: 719px) {
8101  .dac-form-legend {
8102    margin-bottom: 0;
8103  }
8104}
8105
8106/* Filter Resources Component*/
8107.dac-filter {
8108  color: #505050;
8109  margin-bottom: 20px;
8110  position: relative;
8111}
8112
8113.dac-filter.dac-filter-section {
8114  margin-top: -45px;
8115  text-align: right;
8116}
8117
8118@media (max-width: 719px) {
8119  .dac-filter.dac-filter-section {
8120    margin-top: 0;
8121    text-align: left;
8122  }
8123}
8124
8125.dac-filter-title {
8126  color: #666;
8127  cursor: default;
8128  display: inline-block;
8129  font-size: 12px;
8130  font-weight: 500;
8131  line-height: 24px;
8132  margin: 0;
8133  text-transform: uppercase;
8134}
8135
8136@media (max-width: 719px) {
8137  .dac-filter-title {
8138    margin-bottom: 20px;
8139  }
8140}
8141
8142.dac-filter-message {
8143  color: #78868d;
8144  font-size: 18px;
8145  margin: 0 10px 10px;
8146}
8147
8148.dac-filter-count {
8149  background: #6ab344;
8150  border-radius: 50%;
8151  color: #fff;
8152  display: inline-block;
8153  font-size: 12px;
8154  font-weight: 600;
8155  height: 24px;
8156  text-align: center;
8157  width: 24px;
8158}
8159
8160.dac-filter-count.dac-disabled {
8161  visibility: hidden;
8162}
8163
8164.dac-filter-chip {
8165  background: #bfc7cb;
8166  border-radius: 15px;
8167  color: #333;
8168  cursor: default;
8169  display: inline-block;
8170  line-height: 21px;
8171  margin: 0 10px 10px 0;
8172  padding: 4px 26px 4px 10px;
8173  position: relative;
8174}
8175
8176.dac-filter-chip-close {
8177  background-color: transparent;
8178  border: none;
8179  cursor: pointer;
8180  outline: 0;
8181  padding: 3px;
8182  position: absolute;
8183  right: 5px;
8184  top: 5px;
8185}
8186
8187.dac-filter-chip-close-icon {
8188  opacity: .7;
8189  margin-top: -2px;
8190  -webkit-transform: scale(0.57142857);
8191  -ms-transform: scale(0.57142857);
8192  transform: scale(0.57142857);
8193}
8194
8195.dac-filter-chip-close:hover > .dac-filter-chip-close-icon {
8196  opacity: 1;
8197}
8198
8199.dac-filter-chips {
8200  border-top: 1px solid rgba(0, 0, 0, 0.1);
8201  margin: 0;
8202  list-style-type: none;
8203  padding: 10px 0 0;
8204  position: relative;
8205  text-align: left;
8206}
8207
8208.dac-filter-item {
8209  box-sizing: border-box;
8210  float: left;
8211  margin-bottom: 20px;
8212  padding: 0 10px;
8213  width: 33.33333333%;
8214}
8215
8216@media (min-width: 720px) and (max-width: 979px) {
8217  .dac-filter-item {
8218    width: 50%;
8219  }
8220}
8221
8222@media (max-width: 719px) {
8223  .dac-filter-item {
8224    width: 100%;
8225  }
8226}
8227
8228/* Media component */
8229.dac-media {
8230  display: table;
8231  width: 100%;
8232}
8233
8234.dac-media-body, .dac-media-figure {
8235  display: table-cell;
8236  vertical-align: top;
8237}
8238
8239.dac-media-figure {
8240  padding: 0;
8241}
8242
8243.dac-media-body {
8244  width: 100%;
8245}
8246
8247.dac-swap {
8248  overflow: hidden;
8249  position: relative;
8250}
8251
8252.dac-swap-section {
8253  left: 0;
8254  opacity: 0;
8255  position: absolute;
8256  top: 0;
8257  width: 100%;
8258  -webkit-transition: opacity 1s, -webkit-transform .5s;
8259  transition: opacity 1s, transform .5s;
8260}
8261
8262.dac-swap-section.dac-no-anim {
8263  -webkit-transition: none;
8264  transition: none;
8265}
8266
8267.dac-swap-section.dac-up {
8268  -webkit-transform: translateY(-100%);
8269  -ms-transform: translateY(-100%);
8270  transform: translateY(-100%);
8271}
8272
8273.dac-swap-section.dac-down {
8274  -webkit-transform: translateY(100%);
8275  -ms-transform: translateY(100%);
8276  transform: translateY(100%);
8277}
8278
8279.dac-swap-section.dac-left {
8280  -webkit-transform: translateX(-100%);
8281  -ms-transform: translateX(-100%);
8282  transform: translateX(-100%);
8283}
8284
8285.dac-swap-section.dac-right {
8286  -webkit-transform: translateX(100%);
8287  -ms-transform: translateX(100%);
8288  transform: translateX(100%);
8289}
8290
8291.dac-swap-section.dac-active {
8292  opacity: 1;
8293  position: relative;
8294  -webkit-transform: translate(0, 0);
8295  -ms-transform: translate(0, 0);
8296  transform: translate(0, 0);
8297  width: auto;
8298}
8299
8300/* Modal component */
8301.dac-modal {
8302  opacity: 0;
8303  visibility: hidden;
8304  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8305  transition: visibility 0s linear 300ms, opacity 300ms linear;
8306  background: rgba(0, 0, 0, 0.8);
8307  bottom: 0;
8308  left: 0;
8309  overflow-x: hidden;
8310  overflow-y: auto;
8311  position: fixed;
8312  right: 0;
8313  top: 0;
8314  z-index: 70;
8315}
8316
8317.dac-modal.dac-active {
8318  opacity: 1;
8319  -webkit-transition-delay: 0s;
8320  transition-delay: 0s;
8321  visibility: visible;
8322}
8323
8324.dac-modal-open {
8325  overflow: hidden;
8326}
8327
8328.dac-modal-container {
8329  -webkit-box-align: center;
8330  -webkit-align-items: center;
8331  -ms-flex-align: center;
8332  align-items: center;
8333  display: -webkit-box;
8334  display: -webkit-flex;
8335  display: -ms-flexbox;
8336  display: flex;
8337  -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8338  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8339  -webkit-box-pack: center;
8340  -webkit-justify-content: center;
8341  -ms-flex-pack: center;
8342  justify-content: center;
8343  min-height: 100%;
8344  width: 100%;
8345}
8346
8347.dac-modal-window {
8348  background: #fff;
8349  box-sizing: border-box;
8350  margin: 20px auto;
8351  -webkit-transition: -webkit-transform .3s;
8352  transition: transform .3s;
8353  -webkit-transform: translate3d(0, -30px, 0);
8354  transform: translate3d(0, -30px, 0);
8355  width: 960px;
8356}
8357
8358.dac-modal.dac-active .dac-modal-window {
8359  -webkit-transform: translate3d(0, 0, 0);
8360  transform: translate3d(0, 0, 0);
8361}
8362
8363.dac-modal-header {
8364  background: #00695c;
8365  padding: 35px 35px 30px;
8366  position: relative;
8367}
8368
8369.dac-has-small-header .dac-modal-header {
8370  padding: 10px 20px;
8371}
8372
8373.dac-modal-header-actions {
8374  padding: 8px;
8375  position: absolute;
8376  right: 5px;
8377  top: 5px;
8378}
8379
8380.dac-modal-header-open, .dac-modal-header-close {
8381  background: none;
8382  border: none;
8383  cursor: pointer;
8384  line-height: 0;
8385  outline: 0;
8386  opacity: .7;
8387  -webkit-transition: background-color .3s;
8388  transition: background-color .3s;
8389}
8390
8391.dac-modal-header-open:active, .dac-modal-header-close:active {
8392  background: rgba(255, 255, 255, 0.2);
8393}
8394
8395.dac-modal-header-close:before {
8396  content: '';
8397  top: -1px;
8398  position: relative;
8399}
8400
8401.dac-modal-header-open {
8402  margin: 10px;
8403}
8404
8405.dac-modal-header-title {
8406  color: #fff;
8407  font-size: 24px;
8408  font-weight: 300;
8409  line-height: 32px;
8410  padding: 0 150px 0 0;
8411}
8412
8413.dac-has-small-header .dac-modal-header-title {
8414  font-size: 16px;
8415  font-weight: 500;
8416}
8417
8418.dac-modal-header-subtitle {
8419  bottom: 0;
8420  color: #fff;
8421  display: inline-block;
8422  font: inherit;
8423  font-size: 14px;
8424  margin: 0;
8425  opacity: .8;
8426  position: absolute;
8427  right: 0;
8428}
8429
8430.dac-modal-content {
8431  padding: 12px 35px;
8432}
8433
8434.dac-modal-action {
8435  margin: 0;
8436}
8437
8438.dac-modal-footer {
8439  padding: 24px 35px;
8440}
8441
8442@media (max-width: 1000px) {
8443  .dac-modal-window {
8444    margin: 20px;
8445    width: auto;
8446  }
8447
8448  .dac-modal-container {
8449    z-index: auto;
8450  }
8451}
8452
8453@media (max-width: 719px) {
8454  .dac-modal-window {
8455    margin: 10px;
8456  }
8457
8458  .dac-modal-header {
8459    padding: 35px 10px 10px;
8460  }
8461
8462  .dac-modal-header-title {
8463    font-size: 16px;
8464    line-height: 24px;
8465    padding: 0;
8466  }
8467
8468  .dac-modal-header-subtitle {
8469    display: block;
8470    margin: 0;
8471    position: static;
8472    text-align: right;
8473  }
8474
8475  .dac-modal-header-actions {
8476    top: 1px;
8477  }
8478
8479  .dac-modal-content {
8480    padding: 10px;
8481  }
8482
8483  .dac-modal-footer {
8484    border-top: 1px solid #e3e3e3;
8485    padding: 35px 10px;
8486  }
8487}
8488
8489.newsletter .dac-modal-footer {
8490  padding-top: 0;
8491  text-align: right;
8492}
8493
8494.newsletter-checkboxes {
8495  padding-top: 20px;
8496}
8497
8498.newsletter-success-message {
8499  font-size: 32px;
8500  line-height: 1.4;
8501  padding: 40px 30px;
8502  text-align: center;
8503}
8504
8505@media (max-width: 719px) {
8506  .newsletter-success-message {
8507    font-size: 16px;
8508    padding: 12px 0 0;
8509  }
8510}
8511
8512@media (min-width: 720px) {
8513  .newsletter-checkboxes {
8514    padding-top: 46px;
8515  }
8516
8517  .newsletter-leftCol {
8518    padding-right: 40px;
8519  }
8520
8521  .newsletter-rightCol {
8522    padding-left: 40px;
8523  }
8524}
8525
8526@media (max-width: 719px) {
8527  .newsletter .dac-modal-footer {
8528    margin-top: 30px;
8529    padding: 30px 10px;
8530    text-align: center;
8531  }
8532}
8533
8534.dac-blog-reader {
8535  padding: 50px 90px;
8536}
8537
8538.dac-blog-reader-title {
8539  color: #333;
8540  font-size: 45px;
8541  font-weight: 300;
8542  line-height: 1.2;
8543  padding: 10px 0;
8544}
8545
8546.dac-blog-reader-date {
8547  color: #b8b8b8;
8548  font-size: 12px;
8549  font-weight: 600;
8550  line-height: 1;
8551  text-transform: uppercase;
8552}
8553
8554.dac-blog-reader-text > p:first-child i {
8555  display: inline-block;
8556  margin-bottom: 40px;
8557}
8558
8559.dac-blog-reader-text li {
8560  margin-bottom: 0;
8561}
8562
8563.dac-blog-reader-text iframe {
8564  margin-left: auto !important;
8565  margin-right: auto !important;
8566  max-width: 100%;
8567}
8568
8569@media (max-width: 719px) {
8570  .dac-blog-reader {
8571    padding: 30px 20px;
8572  }
8573}
8574
8575.dac-custom-search {
8576  background: #fff;
8577  margin: 0 -10px;
8578  padding: 20px 10px;
8579  z-index: 1;
8580}
8581
8582.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social {
8583  top: -48px;
8584}
8585
8586.dac-custom-search-section-title {
8587  color: #505050;
8588}
8589
8590.dac-custom-search-entry {
8591  margin-bottom: 36px;
8592  margin-top: 24px;
8593}
8594
8595.dac-custom-search-image {
8596  background-size: cover;
8597  height: 112px;
8598}
8599
8600.dac-custom-search-title {
8601  color: #333;
8602  font-size: 14px;
8603  font-weight: 700;
8604  line-height: 24px;
8605  padding: 0;
8606}
8607
8608.dac-custom-search-title a {
8609  color: inherit;
8610}
8611
8612.dac-custom-search-section {
8613  color: #999;
8614  font-size: 16px;
8615  font-variant: small-caps;
8616  font-weight: 700;
8617  margin: -5px 0 0 0;
8618}
8619
8620.dac-custom-search-snippet {
8621  color: #666;
8622  margin: 0;
8623}
8624
8625.dac-custom-search-link {
8626  font-weight: 500;
8627  word-wrap: break-word;
8628  width: 100%;
8629}
8630
8631.dac-custom-search-load-more {
8632  background: none;
8633  border: none;
8634  color: #333;
8635  cursor: pointer;
8636  display: block;
8637  font-size: 14px;
8638  font-weight: 700;
8639  margin: 75px auto;
8640  outline: none;
8641  padding: 10px;
8642}
8643
8644.dac-custom-search-load-more:hover {
8645  opacity: 0.7;
8646}
8647
8648.dac-custom-search-no-results {
8649  color: #999;
8650}
8651
8652.dac-search-hero {
8653  font-size: 16px;
8654  padding: 50px 0 14px 0;
8655}
8656
8657.dac-search-results {
8658  opacity: 0;
8659  visibility: hidden;
8660  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8661  transition: visibility 0s linear 300ms, opacity 300ms linear;
8662  background-color: #fff;
8663  bottom: 0;
8664  left: 0;
8665  overflow-y: auto;
8666  padding: 0 10px;
8667  position: fixed;
8668  right: 0;
8669  -webkit-transition: opacity 100ms;
8670  transition: opacity 100ms;
8671  top: 64px;
8672  z-index: 50;
8673}
8674
8675.dac-nav-animating .dac-search-results {
8676  -webkit-transition: opacity 100ms, padding .3s;
8677  transition: opacity 100ms, padding .3s;
8678}
8679
8680.dac-search-results * {
8681  box-sizing: border-box;
8682}
8683
8684.dac-search-open .dac-search-results {
8685  opacity: 1;
8686  visibility: visible;
8687}
8688
8689.dac-search-results-content {
8690  background: #eceff1;
8691  margin: 0 -10px;
8692  padding: 0 10px;
8693}
8694
8695.dac-search-results-for {
8696  margin-bottom: -5px;
8697  overflow: hidden;
8698  padding-top: 5px;
8699}
8700
8701.dac-search-results-for span {
8702  color: #039bef;
8703}
8704
8705.dac-search-mode .dac-search-results-for {
8706  display: none;
8707}
8708
8709.dac-search-results-history {
8710  background: #eceff1;
8711  min-height: 100%;
8712  margin: 0 -10px;
8713  padding: 0 10px;
8714}
8715
8716.dac-search-results-hero {
8717  padding-top: 20px;
8718}
8719
8720.dac-search-results-metadata {
8721  padding-bottom: 40px;
8722}
8723
8724.dac-search-results-reference {
8725  background: white;
8726  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
8727  margin: 0 0 20px 0;
8728  height: 340px;
8729  overflow: hidden;
8730  padding: 6px 0 4px;
8731}
8732
8733.dac-search-results-reference .namespace {
8734  color: #666;
8735}
8736
8737.dac-search-results-reference.is-expanded {
8738  height: auto;
8739}
8740
8741.dac-search-results-reference-header {
8742  color: #999;
8743  font-size: 16px;
8744  font-variant: small-caps;
8745  font-weight: 700;
8746  margin: 0;
8747  padding: 18px 12px 0;
8748  text-transform: lowercase;
8749}
8750
8751.dac-search-results-reference-header:first-child {
8752  padding-top: 0;
8753}
8754
8755.dac-search-results-reference-entry {
8756  margin: 0;
8757}
8758
8759.dac-search-results-reference-entry a {
8760  color: #333;
8761  display: block;
8762  font-size: 0.81em;
8763  line-height: 1.2em;
8764  padding: 0 12px 5px 12px;
8765  width: 100%;
8766  white-space: nowrap;
8767}
8768
8769.dac-search-results-reference-entry a:hover {
8770  background-color: #eceff1;
8771}
8772
8773.dac-search-results-reference-entry em {
8774  font-style: normal;
8775  font-weight: 700;
8776}
8777
8778.dac-search-results-reference-entry-empty {
8779  color: #999;
8780  font-size: 0.81em;
8781  margin: 0;
8782  padding: 2px 12px 14px;
8783}
8784
8785.dac-search-results-resources {
8786  margin: 0;
8787}
8788
8789.dac-search-results-resources .resource-card {
8790  border-right: 2px solid #999;
8791}
8792
8793.dac-search-results-resources .resource-card-about {
8794  border-right: 2px solid #6ab344;
8795}
8796
8797.dac-search-results-resources .resource-card-about .section {
8798  color: #6ab344;
8799}
8800
8801.dac-search-results-resources .resource-card-develop {
8802  border-right: 2px solid #ff7043;
8803}
8804
8805.dac-search-results-resources .resource-card-develop .section {
8806  color: #ff7043;
8807}
8808
8809.dac-search-results-resources .resource-card-design {
8810  border-right: 2px solid #00bcd4;
8811}
8812
8813.dac-search-results-resources .resource-card-design .section {
8814  color: #00bcd4;
8815}
8816
8817.dac-search-results-resources .resource-card-distribute {
8818  border-right: 2px solid #afb42b;
8819}
8820
8821.dac-search-results-resources .resource-card-distribute .section {
8822  color: #afb42b;
8823}
8824
8825@media (max-width: 719px) {
8826  .dac-search-results-reference.no-results {
8827    display: none;
8828  }
8829}
8830
8831@media (min-width: 980px) {
8832  .dac-nav-open.dac-search-open .dac-search-results {
8833    padding-left: 260px;
8834  }
8835
8836  .dac-search-mode.dac-search-open .dac-search-results {
8837    padding-left: 10px;
8838  }
8839}
8840
8841.dac-selected {
8842  color: #039bef !important;
8843}
8844
8845.dac-selected em {
8846  color: #039bef;
8847}
8848
8849.resource-card.dac-selected {
8850  box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7);
8851}
8852
8853.resource-card.dac-selected em {
8854  color: #333;
8855}
8856
8857.dac-expand, .dac-section {
8858  margin-left: -20px;
8859  margin-right: -20px;
8860  padding-left: 20px;
8861  padding-right: 20px;
8862}
8863
8864@media (max-width: 719px) {
8865  .dac-expand, .dac-section {
8866    margin-left: -10px;
8867    margin-right: -10px;
8868    padding-left: 10px;
8869    padding-right: 10px;
8870  }
8871}
8872
8873.dac-invert {
8874  color: #b3b3b3;
8875  color: rgba(255, 255, 255, 0.7);
8876}
8877
8878.dac-invert h1, .dac-invert h2, .dac-invert h3 {
8879  color: #fff;
8880}
8881
8882.dac-light.dac-hero, .dac-light.dac-section {
8883  background-color: #eceff1;
8884}
8885
8886.dac-gray.dac-hero, .dac-gray.dac-section {
8887  background-color: #d8dfe2;
8888}
8889
8890.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section {
8891   background-color: #b0bec5;
8892}
8893
8894.dac-dark.dac-hero, .dac-dark.dac-section {
8895  background-color: #37474f;
8896}
8897
8898.dac-red.dac-hero, .dac-red.dac-section {
8899  background-color: #dc4d38;
8900}
8901
8902.dac-hero-cta, .dac-section-title, .dac-section-links {
8903  color: #212121;
8904  color: rgba(0, 0, 0, 0.87);
8905}
8906
8907.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
8908  color: white;
8909}
8910
8911.dac-hero-cta .dac-sprite, .dac-section-title .dac-sprite, .dac-section-links .dac-sprite, .dac-hero-cta .dac-modal-header-close:before, .dac-section-title .dac-modal-header-close:before, .dac-section-links .dac-modal-header-close:before, .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-hero-cta .prev-page-link:before, .dac-section-title .paging-links .prev-page-link:before, .paging-links .dac-section-title .prev-page-link:before, .dac-section-links .paging-links .prev-page-link:before, .paging-links .dac-section-links .prev-page-link:before, .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-hero-cta .next-page-link:before, .dac-section-title .paging-links .next-page-link:before, .paging-links .dac-section-title .next-page-link:before, .dac-section-links .paging-links .next-page-link:before, .paging-links .dac-section-links .next-page-link:before, .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-hero-cta .next-class-link:before, .dac-section-title .paging-links .next-class-link:before, .paging-links .dac-section-title .next-class-link:before, .dac-section-links .paging-links .next-class-link:before, .paging-links .dac-section-links .next-class-link:before, .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-hero-cta .start-class-link:after, .dac-section-title .paging-links .start-class-link:after, .paging-links .dac-section-title .start-class-link:after, .dac-section-links .paging-links .start-class-link:after, .paging-links .dac-section-links .start-class-link:after {
8912  opacity: .87;
8913}
8914
8915.dac-invert .dac-hero-cta .dac-sprite, .dac-invert .dac-section-title .dac-sprite, .dac-invert .dac-section-links .dac-sprite, .dac-invert .dac-hero-cta .dac-modal-header-close:before, .dac-invert .dac-section-title .dac-modal-header-close:before, .dac-invert .dac-section-links .dac-modal-header-close:before, .dac-invert .dac-hero-cta .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-hero-cta .prev-page-link:before, .dac-invert .dac-section-title .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-section-title .prev-page-link:before, .dac-invert .dac-section-links .paging-links .prev-page-link:before, .paging-links .dac-invert .dac-section-links .prev-page-link:before, .dac-invert .dac-hero-cta .paging-links .next-page-link:before, .paging-links .dac-invert .dac-hero-cta .next-page-link:before, .dac-invert .dac-section-title .paging-links .next-page-link:before, .paging-links .dac-invert .dac-section-title .next-page-link:before, .dac-invert .dac-section-links .paging-links .next-page-link:before, .paging-links .dac-invert .dac-section-links .next-page-link:before, .dac-invert .dac-hero-cta .paging-links .next-class-link:before, .paging-links .dac-invert .dac-hero-cta .next-class-link:before, .dac-invert .dac-section-title .paging-links .next-class-link:before, .paging-links .dac-invert .dac-section-title .next-class-link:before, .dac-invert .dac-section-links .paging-links .next-class-link:before, .paging-links .dac-invert .dac-section-links .next-class-link:before, .dac-invert .dac-hero-cta .paging-links .start-class-link:after, .paging-links .dac-invert .dac-hero-cta .start-class-link:after, .dac-invert .dac-section-title .paging-links .start-class-link:after, .paging-links .dac-invert .dac-section-title .start-class-link:after, .dac-invert .dac-section-links .paging-links .start-class-link:after, .paging-links .dac-invert .dac-section-links .start-class-link:after {
8916  opacity: 1;
8917}
8918
8919.dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
8920  color: #757575;
8921  color: rgba(0, 0, 0, 0.54);
8922}
8923
8924.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle {
8925  color: #b3b3b3;
8926  color: rgba(255, 255, 255, 0.7);
8927}
8928
8929.dac-section {
8930  background-position: 50% 50%;
8931  background-size: cover;
8932  padding-bottom: 84px;
8933  padding-top: 84px;
8934  position: relative;
8935}
8936
8937@media (max-width: 719px) {
8938  .dac-section {
8939    padding-bottom: 52px;
8940    padding-top: 52px;
8941  }
8942}
8943
8944.dac-section.dac-small {
8945  padding-bottom: 32px;
8946  padding-top: 32px;
8947}
8948
8949.dac-section.dac-slim {
8950  padding-bottom: 0;
8951  padding-top: 0;
8952}
8953
8954.dac-section-title {
8955  text-align: center;
8956  padding-bottom: 40px;
8957  padding-top: 0;
8958}
8959
8960.dac-section-subtitle {
8961  font-size: 16px;
8962  padding-bottom: 40px;
8963  margin-top: -24px;
8964  text-align: center;
8965}
8966
8967.dac-section-links {
8968  font-size: 16px;
8969  list-style: none;
8970  line-height: 40px;
8971  margin: 16px 0 0;
8972  text-align: center;
8973}
8974
8975@media (max-width: 719px) {
8976  .dac-section-links {
8977    margin-left: -8px;
8978    text-align: left;
8979  }
8980}
8981
8982.dac-section-link {
8983  cursor: pointer;
8984  display: inline-block;
8985  margin: 0 32px;
8986  -webkit-transition: opacity .3s;
8987  transition: opacity .3s;
8988}
8989
8990.dac-section-link:hover {
8991  opacity: .54;
8992}
8993
8994@media (max-width: 719px) {
8995  .dac-section-link {
8996    display: block;
8997    margin: 0;
8998  }
8999}
9000
9001.dac-section-link a {
9002  color: inherit;
9003}
9004
9005/*
9006SCSS variables are information about icon's compiled state, stored under its original file name
9007
9008.icon-home {
9009  width: $icon-home-width;
9010}
9011
9012The large array-like variables contain all information about a single icon
9013$icon-home: x y offset_x offset_y width height total_width total_height image_path;
9014
9015At the bottom of this section, we provide information about the spritesheet itself
9016$spritesheet: width height image $spritesheet-sprites;
9017*/
9018.dac-sprite, .dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after, .Video-button--picture-in-picture, .Video-button--close, a.video-shadowbox-button.white::after, #tb li:before,
9019#qv li:before {
9020  background-image: url(/assets/images/sprite.png);
9021  display: inline-block;
9022  vertical-align: middle; }
9023  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) {
9024    .dac-sprite, .dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after, .Video-button--picture-in-picture, .Video-button--close, a.video-shadowbox-button.white::after, #tb li:before,
9025    #qv li:before {
9026      background-image: url(/assets/images/sprite@2x.png);
9027      background-size: 36px 883px; } }
9028
9029.dac-sprite.dac-auto-chevron, .dac-auto-chevron.dac-modal-header-close:before, .paging-links .dac-auto-chevron.prev-page-link:before, .paging-links .dac-auto-chevron.next-page-link:before, .paging-links .dac-auto-chevron.next-class-link:before, .paging-links .dac-auto-chevron.start-class-link:after {
9030  background-position: 0px -669px;
9031  height: 24px;
9032  width: 24px;
9033  vertical-align: -6px; }
9034  .dac-invert .dac-sprite.dac-auto-chevron, .dac-invert .dac-auto-chevron.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-chevron.prev-page-link:before, .paging-links .dac-invert .dac-auto-chevron.prev-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-page-link:before, .paging-links .dac-invert .dac-auto-chevron.next-page-link:before, .dac-invert .paging-links .dac-auto-chevron.next-class-link:before, .paging-links .dac-invert .dac-auto-chevron.next-class-link:before, .dac-invert .paging-links .dac-auto-chevron.start-class-link:after, .paging-links .dac-invert .dac-auto-chevron.start-class-link:after {
9035    background-position: 0px -513px;
9036    height: 24px;
9037    width: 24px; }
9038
9039.dac-sprite.dac-auto-chevron-large, .dac-auto-chevron-large.dac-modal-header-close:before, .paging-links .dac-auto-chevron-large.prev-page-link:before, .paging-links .dac-auto-chevron-large.next-page-link:before, .paging-links .dac-auto-chevron-large.next-class-link:before, .paging-links .dac-auto-chevron-large.start-class-link:after {
9040  background-position: 0px -695px;
9041  height: 36px;
9042  width: 36px;
9043  vertical-align: -10px; }
9044  .dac-invert .dac-sprite.dac-auto-chevron-large, .dac-invert .dac-auto-chevron-large.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-chevron-large.prev-page-link:before, .paging-links .dac-invert .dac-auto-chevron-large.prev-page-link:before, .dac-invert .paging-links .dac-auto-chevron-large.next-page-link:before, .paging-links .dac-invert .dac-auto-chevron-large.next-page-link:before, .dac-invert .paging-links .dac-auto-chevron-large.next-class-link:before, .paging-links .dac-invert .dac-auto-chevron-large.next-class-link:before, .dac-invert .paging-links .dac-auto-chevron-large.start-class-link:after, .paging-links .dac-invert .dac-auto-chevron-large.start-class-link:after {
9045    background-position: 0px -771px;
9046    height: 36px;
9047    width: 36px; }
9048
9049.dac-sprite.dac-auto-unfold-less, .dac-auto-unfold-less.dac-modal-header-close:before, .paging-links .dac-auto-unfold-less.prev-page-link:before, .paging-links .dac-auto-unfold-less.next-page-link:before, .paging-links .dac-auto-unfold-less.next-class-link:before, .paging-links .dac-auto-unfold-less.start-class-link:after {
9050  background-position: 0px -487px;
9051  height: 24px;
9052  width: 24px;
9053  vertical-align: -6px; }
9054  .dac-invert .dac-sprite.dac-auto-unfold-less, .dac-invert .dac-auto-unfold-less.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-unfold-less.prev-page-link:before, .paging-links .dac-invert .dac-auto-unfold-less.prev-page-link:before, .dac-invert .paging-links .dac-auto-unfold-less.next-page-link:before, .paging-links .dac-invert .dac-auto-unfold-less.next-page-link:before, .dac-invert .paging-links .dac-auto-unfold-less.next-class-link:before, .paging-links .dac-invert .dac-auto-unfold-less.next-class-link:before, .dac-invert .paging-links .dac-auto-unfold-less.start-class-link:after, .paging-links .dac-invert .dac-auto-unfold-less.start-class-link:after {
9055    background-position: 0px -565px;
9056    height: 24px;
9057    width: 24px; }
9058
9059.dac-sprite.dac-auto-unfold-more, .dac-auto-unfold-more.dac-modal-header-close:before, .paging-links .dac-auto-unfold-more.prev-page-link:before, .paging-links .dac-auto-unfold-more.next-page-link:before, .paging-links .dac-auto-unfold-more.next-class-link:before, .paging-links .dac-auto-unfold-more.start-class-link:after {
9060  background-position: 0px -539px;
9061  height: 24px;
9062  width: 24px;
9063  vertical-align: -6px; }
9064  .dac-invert .dac-sprite.dac-auto-unfold-more, .dac-invert .dac-auto-unfold-more.dac-modal-header-close:before, .dac-invert .paging-links .dac-auto-unfold-more.prev-page-link:before, .paging-links .dac-invert .dac-auto-unfold-more.prev-page-link:before, .dac-invert .paging-links .dac-auto-unfold-more.next-page-link:before, .paging-links .dac-invert .dac-auto-unfold-more.next-page-link:before, .dac-invert .paging-links .dac-auto-unfold-more.next-class-link:before, .paging-links .dac-invert .dac-auto-unfold-more.next-class-link:before, .dac-invert .paging-links .dac-auto-unfold-more.start-class-link:after, .paging-links .dac-invert .dac-auto-unfold-more.start-class-link:after {
9065    background-position: 0px -305px;
9066    height: 24px;
9067    width: 24px; }
9068
9069.dac-sprite.dac-arrow-down-gray, .dac-arrow-down-gray.dac-modal-header-close:before, .paging-links .dac-arrow-down-gray.prev-page-link:before, .paging-links .dac-arrow-down-gray.next-page-link:before, .paging-links .dac-arrow-down-gray.next-class-link:before, .paging-links .dac-arrow-down-gray.start-class-link:after {
9070  background-position: 0px 0px;
9071  height: 11px;
9072  width: 19px; }
9073
9074.dac-sprite.dac-arrow-right, .dac-arrow-right.dac-modal-header-close:before, .paging-links .dac-arrow-right.prev-page-link:before, .paging-links .dac-arrow-right.next-page-link:before, .paging-links .dac-arrow-right.next-class-link:before, .paging-links .dac-arrow-right.start-class-link:after {
9075  background-position: 0px -215px;
9076  height: 18px;
9077  width: 11px; }
9078
9079.dac-sprite.dac-back-arrow, .dac-back-arrow.dac-modal-header-close:before, .paging-links .dac-back-arrow.prev-page-link:before, .paging-links .dac-back-arrow.next-page-link:before, .paging-links .dac-back-arrow.next-class-link:before, .paging-links .dac-back-arrow.start-class-link:after {
9080  background-position: 0px -123px;
9081  height: 16px;
9082  width: 16px; }
9083
9084.dac-sprite.dac-chevron-large-right-black, .dac-chevron-large-right-black.dac-modal-header-close:before, .paging-links .dac-chevron-large-right-black.prev-page-link:before, .paging-links .dac-chevron-large-right-black.next-page-link:before, .paging-links .dac-chevron-large-right-black.next-class-link:before, .paging-links .dac-chevron-large-right-black.start-class-link:after {
9085  background-position: 0px -695px;
9086  height: 36px;
9087  width: 36px; }
9088
9089.dac-sprite.dac-chevron-large-right-white, .dac-chevron-large-right-white.dac-modal-header-close:before, .paging-links .dac-chevron-large-right-white.prev-page-link:before, .paging-links .dac-chevron-large-right-white.next-page-link:before, .paging-links .dac-chevron-large-right-white.next-class-link:before, .paging-links .dac-chevron-large-right-white.start-class-link:after {
9090  background-position: 0px -771px;
9091  height: 36px;
9092  width: 36px; }
9093
9094.dac-sprite.dac-chevron-right-black, .dac-chevron-right-black.dac-modal-header-close:before, .paging-links .dac-chevron-right-black.prev-page-link:before, .paging-links .dac-chevron-right-black.next-page-link:before, .paging-links .dac-chevron-right-black.next-class-link:before, .paging-links .dac-chevron-right-black.start-class-link:after {
9095  background-position: 0px -669px;
9096  height: 24px;
9097  width: 24px; }
9098
9099.dac-sprite.dac-chevron-right-white, .dac-chevron-right-white.dac-modal-header-close:before, .paging-links .dac-chevron-right-white.prev-page-link:before, .paging-links .dac-chevron-right-white.next-page-link:before, .paging-links .dac-chevron-right-white.next-class-link:before, .paging-links .dac-chevron-right-white.start-class-link:after {
9100  background-position: 0px -513px;
9101  height: 24px;
9102  width: 24px; }
9103
9104.dac-sprite.dac-close-black, .dac-close-black.dac-modal-header-close:before, .paging-links .dac-close-black.prev-page-link:before, .paging-links .dac-close-black.next-page-link:before, .paging-links .dac-close-black.next-class-link:before, .paging-links .dac-close-black.start-class-link:after {
9105  background-position: 0px -89px;
9106  height: 14px;
9107  width: 14px; }
9108
9109.dac-sprite.dac-close-video-white, .dac-modal-header-close:before, .paging-links .dac-close-video-white.prev-page-link:before, .paging-links .prev-page-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.next-page-link:before, .paging-links .next-page-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.next-class-link:before, .paging-links .next-class-link.dac-modal-header-close:before, .paging-links .dac-close-video-white.start-class-link:after {
9110  background-position: 0px -435px;
9111  height: 24px;
9112  width: 24px; }
9113
9114.dac-sprite.dac-close, .dac-close.dac-modal-header-close:before, .paging-links .dac-close.prev-page-link:before, .paging-links .dac-close.next-page-link:before, .paging-links .dac-close.next-class-link:before, .paging-links .dac-close.start-class-link:after {
9115  background-position: 0px -27px;
9116  height: 12px;
9117  width: 12px; }
9118
9119.dac-sprite.dac-enlarge-video-white, .dac-enlarge-video-white.dac-modal-header-close:before, .paging-links .dac-enlarge-video-white.prev-page-link:before, .paging-links .dac-enlarge-video-white.next-page-link:before, .paging-links .dac-enlarge-video-white.next-class-link:before, .paging-links .dac-enlarge-video-white.start-class-link:after {
9120  background-position: 0px -409px;
9121  height: 24px;
9122  width: 24px; }
9123
9124.dac-sprite.dac-expand-less-black, .dac-expand-less-black.dac-modal-header-close:before, .paging-links .dac-expand-less-black.prev-page-link:before, .paging-links .dac-expand-less-black.next-page-link:before, .paging-links .dac-expand-less-black.next-class-link:before, .paging-links .dac-expand-less-black.start-class-link:after {
9125  background-position: 0px -383px;
9126  height: 24px;
9127  width: 24px; }
9128
9129.dac-sprite.dac-expand-more-black, .dac-expand-more-black.dac-modal-header-close:before, .paging-links .dac-expand-more-black.prev-page-link:before, .paging-links .dac-expand-more-black.next-page-link:before, .paging-links .dac-expand-more-black.next-class-link:before, .paging-links .dac-expand-more-black.start-class-link:after {
9130  background-position: 0px -357px;
9131  height: 24px;
9132  width: 24px; }
9133
9134.dac-sprite.dac-fullscreen-exit, .dac-fullscreen-exit.dac-modal-header-close:before, .paging-links .dac-fullscreen-exit.prev-page-link:before, .paging-links .dac-fullscreen-exit.next-page-link:before, .paging-links .dac-fullscreen-exit.next-class-link:before, .paging-links .dac-fullscreen-exit.start-class-link:after {
9135  background-position: 0px -331px;
9136  height: 24px;
9137  width: 24px; }
9138
9139.dac-sprite.dac-fullscreen, .dac-fullscreen.dac-modal-header-close:before, .paging-links .dac-fullscreen.prev-page-link:before, .paging-links .dac-fullscreen.next-page-link:before, .paging-links .dac-fullscreen.next-class-link:before, .paging-links .dac-fullscreen.start-class-link:after {
9140  background-position: 0px -279px;
9141  height: 24px;
9142  width: 24px; }
9143
9144.dac-sprite.dac-google-play, .dac-google-play.dac-modal-header-close:before, .paging-links .dac-google-play.prev-page-link:before, .paging-links .dac-google-play.next-page-link:before, .paging-links .dac-google-play.next-class-link:before, .paging-links .dac-google-play.start-class-link:after {
9145  background-position: 0px -235px;
9146  height: 20px;
9147  width: 17px; }
9148
9149.dac-sprite.dac-gplus, .dac-gplus.dac-modal-header-close:before, .paging-links .dac-gplus.prev-page-link:before, .paging-links .dac-gplus.next-page-link:before, .paging-links .dac-gplus.next-class-link:before, .paging-links .dac-gplus.start-class-link:after {
9150  background-position: 0px -809px;
9151  height: 36px;
9152  width: 36px; }
9153
9154.dac-sprite.dac-mail, .dac-mail.dac-modal-header-close:before, .paging-links .dac-mail.prev-page-link:before, .paging-links .dac-mail.next-page-link:before, .paging-links .dac-mail.next-class-link:before, .paging-links .dac-mail.start-class-link:after {
9155  background-position: 0px -13px;
9156  height: 12px;
9157  width: 16px; }
9158
9159.dac-sprite.dac-nav-back-blue, .dac-nav-back-blue.dac-modal-header-close:before, .paging-links .prev-page-link:before, .paging-links .dac-nav-back-blue.next-page-link:before, .paging-links .dac-nav-back-blue.next-class-link:before, .paging-links .dac-nav-back-blue.start-class-link:after {
9160  background-position: 0px -105px;
9161  height: 16px;
9162  width: 16px; }
9163
9164.dac-sprite.dac-nav-back, .dac-nav-back.dac-modal-header-close:before, .paging-links .dac-nav-back.prev-page-link:before, .paging-links .dac-nav-back.next-page-link:before, .paging-links .dac-nav-back.next-class-link:before, .paging-links .dac-nav-back.start-class-link:after {
9165  background-position: 0px -177px;
9166  height: 16px;
9167  width: 16px; }
9168
9169.dac-sprite.dac-nav-forward-blue, .dac-nav-forward-blue.dac-modal-header-close:before, .paging-links .dac-nav-forward-blue.prev-page-link:before, .paging-links .next-page-link:before, .paging-links .next-class-link:before, .paging-links .start-class-link:after {
9170  background-position: 0px -159px;
9171  height: 16px;
9172  width: 16px; }
9173
9174.dac-sprite.dac-nav-forward, .dac-nav-forward.dac-modal-header-close:before, .paging-links .dac-nav-forward.prev-page-link:before, .paging-links .dac-nav-forward.next-page-link:before, .paging-links .dac-nav-forward.next-class-link:before, .paging-links .dac-nav-forward.start-class-link:after {
9175  background-position: 0px -141px;
9176  height: 16px;
9177  width: 16px; }
9178
9179.dac-sprite.dac-open-in-new, .dac-open-in-new.dac-modal-header-close:before, .paging-links .dac-open-in-new.prev-page-link:before, .paging-links .dac-open-in-new.next-page-link:before, .paging-links .dac-open-in-new.next-class-link:before, .paging-links .dac-open-in-new.start-class-link:after {
9180  background-position: 0px -195px;
9181  height: 18px;
9182  width: 18px; }
9183
9184.dac-sprite.dac-picture-in-picture-white, .dac-picture-in-picture-white.dac-modal-header-close:before, .paging-links .dac-picture-in-picture-white.prev-page-link:before, .paging-links .dac-picture-in-picture-white.next-page-link:before, .paging-links .dac-picture-in-picture-white.next-class-link:before, .paging-links .dac-picture-in-picture-white.start-class-link:after {
9185  background-position: 0px -461px;
9186  height: 24px;
9187  width: 24px; }
9188
9189.dac-sprite.dac-play-circle-grey, .dac-play-circle-grey.dac-modal-header-close:before, .paging-links .dac-play-circle-grey.prev-page-link:before, .paging-links .dac-play-circle-grey.next-page-link:before, .paging-links .dac-play-circle-grey.next-class-link:before, .paging-links .dac-play-circle-grey.start-class-link:after {
9190  background-position: 0px -733px;
9191  height: 36px;
9192  width: 36px; }
9193
9194.dac-sprite.dac-play-circle-white, .dac-play-circle-white.dac-modal-header-close:before, .paging-links .dac-play-circle-white.prev-page-link:before, .paging-links .dac-play-circle-white.next-page-link:before, .paging-links .dac-play-circle-white.next-class-link:before, .paging-links .dac-play-circle-white.start-class-link:after {
9195  background-position: 0px -847px;
9196  height: 36px;
9197  width: 36px; }
9198
9199.dac-sprite.dac-play-white, .dac-play-white.dac-modal-header-close:before, .paging-links .dac-play-white.prev-page-link:before, .paging-links .dac-play-white.next-page-link:before, .paging-links .dac-play-white.next-class-link:before, .paging-links .dac-play-white.start-class-link:after {
9200  background-position: 0px -257px;
9201  height: 20px;
9202  width: 16px; }
9203
9204.dac-sprite.dac-rss, .dac-rss.dac-modal-header-close:before, .paging-links .dac-rss.prev-page-link:before, .paging-links .dac-rss.next-page-link:before, .paging-links .dac-rss.next-class-link:before, .paging-links .dac-rss.start-class-link:after {
9205  background-position: 0px -41px;
9206  height: 14px;
9207  width: 14px; }
9208
9209.dac-sprite.dac-search-white, .dac-search-white.dac-modal-header-close:before, .paging-links .dac-search-white.prev-page-link:before, .paging-links .dac-search-white.next-page-link:before, .paging-links .dac-search-white.next-class-link:before, .paging-links .dac-search-white.start-class-link:after {
9210  background-position: 0px -591px;
9211  height: 24px;
9212  width: 24px; }
9213
9214.dac-sprite.dac-search, .dac-search.dac-modal-header-close:before, .paging-links .dac-search.prev-page-link:before, .paging-links .dac-search.next-page-link:before, .paging-links .dac-search.next-class-link:before, .paging-links .dac-search.start-class-link:after {
9215  background-position: 0px -617px;
9216  height: 24px;
9217  width: 24px; }
9218
9219.dac-sprite.dac-star-outline, .dac-star-outline.dac-modal-header-close:before, .paging-links .dac-star-outline.prev-page-link:before, .paging-links .dac-star-outline.next-page-link:before, .paging-links .dac-star-outline.next-class-link:before, .paging-links .dac-star-outline.start-class-link:after {
9220  background-position: 0px -643px;
9221  height: 24px;
9222  width: 24px; }
9223
9224.dac-sprite.dac-twitter, .dac-twitter.dac-modal-header-close:before, .paging-links .dac-twitter.prev-page-link:before, .paging-links .dac-twitter.next-page-link:before, .paging-links .dac-twitter.next-class-link:before, .paging-links .dac-twitter.start-class-link:after {
9225  background-position: 0px -73px;
9226  height: 14px;
9227  width: 16px; }
9228
9229.dac-sprite.dac-unfold-less-white, .dac-unfold-less-white.dac-modal-header-close:before, .paging-links .dac-unfold-less-white.prev-page-link:before, .paging-links .dac-unfold-less-white.next-page-link:before, .paging-links .dac-unfold-less-white.next-class-link:before, .paging-links .dac-unfold-less-white.start-class-link:after {
9230  background-position: 0px -565px;
9231  height: 24px;
9232  width: 24px; }
9233
9234.dac-sprite.dac-unfold-less, .dac-unfold-less.dac-modal-header-close:before, .paging-links .dac-unfold-less.prev-page-link:before, .paging-links .dac-unfold-less.next-page-link:before, .paging-links .dac-unfold-less.next-class-link:before, .paging-links .dac-unfold-less.start-class-link:after {
9235  background-position: 0px -487px;
9236  height: 24px;
9237  width: 24px; }
9238
9239.dac-sprite.dac-unfold-more-white, .dac-unfold-more-white.dac-modal-header-close:before, .paging-links .dac-unfold-more-white.prev-page-link:before, .paging-links .dac-unfold-more-white.next-page-link:before, .paging-links .dac-unfold-more-white.next-class-link:before, .paging-links .dac-unfold-more-white.start-class-link:after {
9240  background-position: 0px -305px;
9241  height: 24px;
9242  width: 24px; }
9243
9244.dac-sprite.dac-unfold-more, .dac-unfold-more.dac-modal-header-close:before, .paging-links .dac-unfold-more.prev-page-link:before, .paging-links .dac-unfold-more.next-page-link:before, .paging-links .dac-unfold-more.next-class-link:before, .paging-links .dac-unfold-more.start-class-link:after {
9245  background-position: 0px -539px;
9246  height: 24px;
9247  width: 24px; }
9248
9249.dac-sprite.dac-youtube, .dac-youtube.dac-modal-header-close:before, .paging-links .dac-youtube.prev-page-link:before, .paging-links .dac-youtube.next-page-link:before, .paging-links .dac-youtube.next-class-link:before, .paging-links .dac-youtube.start-class-link:after {
9250  background-position: 0px -57px;
9251  height: 14px;
9252  width: 18px; }
9253
9254/* Toast Component */
9255.dac-toast {
9256  background: #ffebc3;
9257  border-top: 1px solid #e5d4a1;
9258  display: none;
9259  color: rgba(0, 0, 0, 0.87);
9260  line-height: 1.4;
9261  padding: 10px; }
9262  .dac-toast.dac-visible {
9263    display: block; }
9264  .dac-toast-wrap {
9265    box-sizing: border-box;
9266    margin: 0 auto;
9267    max-width: 940px;
9268    padding-right: 20px;
9269    position: relative; }
9270  .dac-toast-close-btn {
9271    background-color: transparent;
9272    border: none;
9273    border-radius: 0;
9274    cursor: pointer;
9275    opacity: .4;
9276    padding: 0;
9277    position: absolute;
9278    right: 0;
9279    top: 1px; }
9280    .dac-toast-close-btn:hover, .dac-toast-close-btn:focus, .dac-toast-close-btn:active {
9281      outline: none;
9282      opacity: 1; }
9283  .dac-toast-group {
9284    bottom: 0;
9285    left: 0;
9286    position: fixed;
9287    right: 0;
9288    z-index: 60; }
9289  .dac-toast.dac-danger {
9290    background-color: #ffccbc;
9291    border-top-color: #e5b7a9; }
9292  .dac-toast.dac-success {
9293    background-color: #cdedc8;
9294    border-top-color: #c6d5b4; }
9295
9296.dac-tab-item {
9297  box-sizing: border-box;
9298  cursor: pointer;
9299  display: table-cell;
9300  margin: 0;
9301  padding: 8px 12px;
9302  position: relative;
9303  text-align: left; }
9304  @media (max-width: 719px) {
9305    .dac-tab-item {
9306      padding-right: 12px;
9307      text-align: center;
9308      width: 33.33333333%; } }
9309
9310.dac-tab-title {
9311  color: #333;
9312  display: inline-block;
9313  font-size: 16px;
9314  font-weight: 500;
9315  margin: 0; }
9316
9317.dac-tab-arrow {
9318  margin-top: -2px; }
9319  @media (max-width: 719px) {
9320    .dac-tab-arrow {
9321      position: absolute;
9322      visibility: hidden; } }
9323
9324.dac-tab-bar {
9325  display: inline-block;
9326  list-style-type: none;
9327  margin: 0 0 0 12px;
9328  vertical-align: middle;
9329  overflow: hidden; }
9330  @media (max-width: 719px) {
9331    .dac-tab-bar {
9332      display: table;
9333      margin-left: 0;
9334      width: 100%; } }
9335
9336.dac-tab-views {
9337  list-style-type: none;
9338  margin: 0; }
9339
9340.dac-tab-view {
9341  background: #fff;
9342  display: none;
9343  overflow: hidden;
9344  margin: 0 0 10px;
9345  padding: 20px 10px 0;
9346  text-align: left; }
9347
9348.dac-tab-item.dac-active {
9349  background: #fff; }
9350
9351.dac-tab-item.dac-active .dac-tab-arrow {
9352  -webkit-transform: scaleY(-1);
9353      -ms-transform: scaleY(-1);
9354          transform: scaleY(-1); }
9355
9356.dac-tab-view.dac-active {
9357  display: block; }
9358
9359.dac-toggle-expand {
9360  cursor: pointer;
9361  display: inline-block; }
9362
9363.dac-toggle-collapse {
9364  cursor: pointer;
9365  display: none; }
9366
9367.dac-toggle.is-expanded .dac-toggle-expand {
9368  display: none; }
9369
9370.dac-toggle.is-expanded .dac-toggle-collapse {
9371  display: inline-block; }
9372
9373.dac-toggle-content {
9374  clear: left;
9375  overflow: hidden;
9376  max-height: 0;
9377  -webkit-transition: .3s max-height;
9378          transition: .3s max-height; }
9379
9380.dac-toggle.is-expanded .dac-toggle-content {
9381  max-height: none; }
9382
9383.dac-toggle.dac-mobile .dac-toggle-content {
9384  max-height: none; }
9385
9386@media (max-width: 719px) {
9387  .dac-toggle.dac-mobile .dac-toggle-content {
9388    max-height: 0; }
9389  .dac-toggle.is-expanded .dac-toggle-content {
9390    max-height: none; } }
9391
9392/**
9393 * Fades out an element.
9394 * Applies visibility hidden when the transition is finished.
9395 *
9396 * Use opacity: 1; to show the element.
9397 */
9398.dac-visible-mobile-block, .dac-mobile-only,
9399.dac-visible-mobile-inline,
9400.dac-visible-mobile-inline-block,
9401.dac-visible-tablet-block,
9402.dac-visible-tablet-inline,
9403.dac-visible-tablet-inline-block,
9404.dac-visible-desktop-block,
9405.dac-visible-desktop-inline,
9406.dac-visible-desktop-inline-block {
9407  display: none !important; }
9408
9409@media (max-width: 719px) {
9410  .dac-hidden-mobile {
9411    display: none !important; }
9412  .dac-visible-mobile-block, .dac-mobile-only {
9413    display: block !important; }
9414  .dac-visible-mobile-inline {
9415    display: inline !important; }
9416  .dac-visible-mobile-inline-block {
9417    display: inline-block !important; } }
9418
9419@media (min-width: 720px) and (max-width: 979px) {
9420  .dac-hidden-tablet {
9421    display: none !important; }
9422  .dac-visible-tablet-block {
9423    display: block !important; }
9424  .dac-visible-tablet-inline {
9425    display: inline !important; }
9426  .dac-visible-tablet-inline-block {
9427    display: inline-block !important; } }
9428
9429@media (min-width: 980px) {
9430  .dac-hidden-desktop {
9431    display: none !important; }
9432  .dac-visible-desktop-block {
9433    display: block !important; }
9434  .dac-visible-desktop-inline {
9435    display: inline !important; }
9436  .dac-visible-desktop-inline-block {
9437    display: inline-block !important; } }
9438
9439.dac-offset-parent {
9440  position: relative !important; }
9441
9442/**
9443 * Hide from browsers/screenreaders on all sizes.
9444 */
9445.dac-hidden {
9446  display: none !important; }
9447
9448/**
9449 * Break strings when their length exceeds the width of their container.
9450 */
9451.dac-text-break {
9452  word-wrap: break-word !important; }
9453
9454/**
9455 * Horizontal text alignment
9456 */
9457.dac-text-center {
9458  text-align: center !important; }
9459
9460.dac-text-left {
9461  text-align: left !important; }
9462
9463.dac-text-right {
9464  text-align: right !important; }
9465
9466/**
9467 * Prevent whitespace wrapping
9468 */
9469.dac-text-no-wrap {
9470  white-space: nowrap !important; }
9471
9472/**
9473 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
9474 */
9475.dac-text-truncate {
9476  max-width: 100%;
9477  overflow: hidden !important;
9478  text-overflow: ellipsis !important;
9479  white-space: nowrap !important;
9480  word-wrap: normal !important; }
9481
9482/**
9483 * Floats
9484 */
9485.dac-float-left {
9486  float: left !important; }
9487
9488.dac-float-right {
9489  float: right !important; }
9490
9491/**
9492 * New block formatting context
9493 *
9494 * This affords some useful properties to the element. It won't wrap under
9495 * floats. Will also contain any floated children.
9496 * N.B. This will clip overflow. Use the alternative method below if this is
9497 * problematic.
9498 */
9499.dac-nbfc {
9500  overflow: hidden !important;
9501}
9502
9503/**
9504 * New block formatting context (alternative)
9505 *
9506 * Alternative method when overflow must not be clipped.
9507 *
9508 * N.B. This breaks down in some browsers when elements within this element
9509 * exceed its width.
9510 */
9511.dac-nbfc-alt {
9512  display: table-cell !important;
9513  width: 10000px !important;
9514}
9515
9516.Video {
9517  display: none;
9518}
9519
9520.Video-overlay {
9521  background-color: rgba(0, 0, 0, 0.8);
9522  width: 100%;
9523  height: 100%;
9524  position: fixed;
9525  top: 0;
9526  left: 0;
9527  z-index: 9999;
9528}
9529
9530.Video-container {
9531  width: 90vw;
9532  height: 50.625vw;
9533  max-height: calc(90vh - 29.25px);
9534  max-width: calc(160vh - 52px);
9535  margin: auto;
9536  position: fixed;
9537  top: -52px;
9538  right: 0;
9539  bottom: 0;
9540  left: 0;
9541  z-index: 9999;
9542}
9543
9544@media (min-width: 1422.22222222px) and (min-height: 800px) {
9545  .Video-container {
9546    width: 1280px;
9547    height: 720px;
9548  }
9549}
9550
9551.Video-controls {
9552  background: #28655F;
9553  height: 52px;
9554  margin: 0 auto;
9555  position: relative;
9556  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9557}
9558
9559.Video-frame {
9560  position: relative;
9561  height: 100%;
9562  background: black;
9563  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9564}
9565
9566.Video-loading {
9567  color: rgba(255, 255, 255, 0.35);
9568  font-size: 16px;
9569  position: absolute;
9570  top: 50%;
9571  left: 50%;
9572  -webkit-transform: translate(-50%, -50%);
9573  -ms-transform: translate(-50%, -50%);
9574  transform: translate(-50%, -50%);
9575}
9576
9577#youTubePlayer {
9578  max-height: 720px;
9579  position: absolute;
9580  top: 0;
9581  right: 0;
9582  bottom: 0;
9583  left: 0;
9584  width: 100%;
9585  height: 100%;
9586}
9587
9588.Video-button {
9589  background-color: transparent;
9590  border: none;
9591  display: inline-block;
9592  height: 100%;
9593  width: 52px;
9594  outline: none;
9595  cursor: pointer;
9596  -webkit-transition: opacity 200ms;
9597  transition: opacity 200ms;
9598}
9599
9600.Video-button:hover {
9601  opacity: 0.8;
9602}
9603
9604.Video-button--picture-in-picture {
9605  background-position: 0px -461px;
9606  height: 24px;
9607  width: 24px;
9608  display: none;
9609  position: absolute;
9610  right: 64px;
9611  top: 14px;
9612}
9613
9614.Video-button--close {
9615  background-position: 0px -435px;
9616  height: 24px;
9617  width: 24px;
9618  position: absolute;
9619  right: 14px;
9620  top: 14px;
9621}
9622
9623@media (min-width: 720px) {
9624  .Video--picture-in-picture .Video-overlay {
9625    display: none;
9626  }
9627
9628  .Video--picture-in-picture .Video-container {
9629    top: auto;
9630    left: auto;
9631    bottom: 20px;
9632    right: 20px;
9633    width: 40%;
9634    max-width: 420px;
9635    height: auto;
9636  }
9637
9638  .Video--picture-in-picture .Video-button--picture-in-picture {
9639    background-position: 0px -409px;
9640    height: 24px;
9641    width: 24px;
9642  }
9643
9644  .Video--picture-in-picture .Video-frame {
9645    padding-bottom: 56.25%;
9646  }
9647
9648  .Video-button--picture-in-picture {
9649    display: inline-block;
9650  }
9651}
9652
9653a.video-shadowbox-button.white {
9654  padding: 16px 42px 16px 8px;
9655  font-size: 18px;
9656  font-weight: 500;
9657  line-height: 24px;
9658  color: #fff;
9659  text-decoration: none;
9660}
9661
9662a.video-shadowbox-button.white::after {
9663  content: '';
9664  background-position: 0px -847px;
9665  height: 36px;
9666  width: 36px;
9667}
9668
9669a.video-shadowbox-button.white:hover {
9670  color: #bababa !important;
9671}
9672
9673a.video-shadowbox-button.white:hover::after {
9674  background-position: 0px -733px;
9675  height: 36px;
9676  width: 36px;
9677}
9678
9679#video-frame, #video-container {
9680  display: none;
9681}
9682
9683@media (max-width: 720px) {
9684  .wide-table {
9685    overflow-x: auto;
9686  }
9687
9688  .wide-table table {
9689    display: inline-table;
9690    margin-right: 0;
9691  }
9692}
9693
9694/* New CSS that isn't part of a component */
9695.paging-links {
9696  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
9697  margin: 30px 0;
9698  padding: 0 40px;
9699  /* Start class link doesn't have a caption */ }
9700
9701.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9702  font-size: 20px;
9703  font-weight: 500;
9704  display: inline-block;
9705  width: calc(50% - 2px);
9706  position: relative;
9707  padding: 46px 0 36px 0;
9708}
9709
9710@media (max-width: 719px) {
9711  .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9712    width: 100%;
9713  }
9714}
9715
9716.paging-links .start-class-link {
9717  padding: 36px 0;
9718}
9719
9720.paging-links .start-class-link, .paging-links .next-class-link {
9721  text-align: center;
9722  width: 100%;
9723}
9724
9725.paging-links .prev-page-link .page-link-caption {
9726  left: 0;
9727}
9728
9729.paging-links .prev-page-link:before {
9730  content: '';
9731  left: -24px;
9732  position: absolute;
9733  bottom: 41px;
9734}
9735
9736@media (max-width: 719px) {
9737  .paging-links .prev-page-link {
9738    display: none;
9739  }
9740}
9741
9742.paging-links .next-page-link, .paging-links .next-class-link {
9743  text-align: right;
9744}
9745
9746.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption {
9747  right: 0;
9748}
9749
9750.paging-links .next-page-link:before, .paging-links .next-class-link:before {
9751  content: '';
9752  right: -24px;
9753  position: absolute;
9754  bottom: 41px;
9755}
9756
9757.paging-links .start-class-link:after {
9758  content: '';
9759  right: -12px;
9760  position: relative;
9761  bottom: 3px;
9762}
9763
9764.paging-links .page-link-caption {
9765  position: absolute;
9766  top: 26px;
9767  font-size: 14px;
9768  font-weight: 700;
9769  opacity: 0.54;
9770}
9771
9772#tb li:before,
9773#qv li:before {
9774  background-position: 0px -669px;
9775  height: 24px;
9776  width: 24px;
9777  content: '';
9778  left: -8px;
9779  opacity: .7;
9780  position: absolute;
9781  top: -4px;
9782}
9783