default.css revision ef0e3eaa14c25214dfefc9ffed16e14570397648 
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
2414.summary-table {
2415  background-color:#eceff1;
2416  padding:1em;
2417  margin-bottom:1.5em;
2418}
2419
2420.summary-table h5 {
2421  line-height:1em;
2422  font-size:.98em;
2423}
2424
2425body.about blockquote {
2426  display:block;
2427  float:right;
2428  width:280px;
2429  font-size:20px;
2430  font-style:italic;
2431  line-height:24px;
2432  color:#33B5E5;
2433  margin:0 0 20px 30px;
2434}
2435
2436div.design-announce p {
2437  margin:0 0 10px;
2438}
2439
2440.expandable {
2441  height:34px;
2442  padding-left:20px;
2443  position:relative;
2444}
2445.expandable:before {
2446  content: '';
2447  background-image: url(../images/styles/disclosure_down.png);
2448  background-repeat:no-repeat;
2449  background-position: -12px -9px;
2450  width: 20px;
2451  height: 20px;
2452  display: inline-block;
2453  position: absolute;
2454  top: 0;
2455  left: 0; }
2456}
2457.expandable.expanded:before {
2458  background-image: url(../images/styles/disclosure_up.png);
2459}
2460
2461/* notice box for cross links between Design/Develop docs */
2462a.notice-developers-video,
2463a.notice-developers,
2464a.notice-designers-video,
2465a.notice-designers {
2466  float:right;
2467  clear:right;
2468  width:238px;
2469  min-height:50px;
2470  margin:0 0 20px 20px;
2471  border:1px solid #ddd;
2472}
2473a.notice-developers-video.wide,
2474a.notice-developers.wide,
2475a.notice-designers-video.wide,
2476a.notice-designers.wide {
2477  width:278px;
2478}
2479a.notice-developers-video div,
2480a.notice-developers div,
2481a.notice-designers-video div,
2482a.notice-designers div {
2483  min-height:40px;
2484  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2485  background-size:40px 40px;
2486  padding:10px 10px 10px 60px;
2487}
2488a.notice-designers div {
2489  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2490  background-size:40px 40px;
2491}
2492a.notice-designers-video div {
2493  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2494  background-size:40px 40px;
2495}
2496a.notice-developers-video div {
2497  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2498  background-size:40px 40px;
2499}
2500a.notice-developers-video:hover,
2501a.notice-developers:hover,
2502a.notice-designers-video:hover,
2503a.notice-designers:hover {
2504  background:#eee;
2505}
2506a.notice-developers-video h3,
2507a.notice-developers h3,
2508a.notice-designers-video h3,
2509a.notice-designers h3 {
2510  font-size:13px;
2511  line-height:18px;
2512  font-weight:bold;
2513  text-transform:uppercase;
2514  color:#000 !important;
2515  padding:0 0 1px;
2516}
2517a.notice-developers-video p,
2518a.notice-developers p,
2519a.notice-designers-video p,
2520a.notice-designers p {
2521  margin:0;
2522  line-height:14px;
2523}
2524a.notice-developers-video.left,
2525a.notice-developers.left,
2526a.notice-designers-video.left,
2527a.notice-designers.left {
2528  margin-left:0;
2529  float:left;
2530}
2531
2532
2533/* hide nested list items; companion to hideNestedLists() */
2534.hide-nested li ol,
2535.hide-nested li ul {
2536  display:none;
2537}
2538
2539a.header-toggle {
2540  display:block;
2541  float:right;
2542  text-transform:uppercase;
2543  font-size:.8em !important;
2544  font-weight:normal;
2545  margin-top:2px;
2546}
2547
2548
2549/* for IDE instruction toggle (Studio/Eclipse/Other) */
2550select.ide {
2551  background: transparent;
2552  border: 1px solid #bbb;
2553  border-left: 0;
2554  border-right: 0;
2555  margin: 10px 0;
2556  padding: 10px 0;
2557  color:#666;
2558}
2559select.ide,
2560select.ide option {
2561  font-family: inherit;
2562  font-size:16px;
2563  font-weight:500;
2564}
2565/* hide all except studio by default */
2566.select-ide.eclipse,
2567.select-ide.other {
2568  display:none;
2569}
2570/* ... unless studio also includes one of the others */
2571.select-ide.studio.eclipse,
2572.select-ide.studio.other {
2573  display:none;
2574}
2575
2576
2577/* -----------------------------------------------
2578good/bad example containers
2579*/
2580
2581div.example-block {
2582  background-repeat: no-repeat;
2583  background-position:10px 8px;
2584  background-color:#ccc;
2585  padding:4px;
2586  margin:.8em auto 1.5em 2em;
2587  width:260px;
2588  float:right;
2589}
2590/* red container */
2591.example-block.bad {
2592  background-image: url(/images/example-bad.png);
2593  background-color:#f4cccc;
2594}
2595/* green container */
2596.example-block.good {
2597  background-image: url(/images/example-good.png);
2598  background-color:#d9ead3;
2599}
2600/* container heading div */
2601#jd-content .example-block .heading {
2602  font-weight:bold;
2603  margin:6px 0 9px 36px;
2604  padding:6px auto;
2605}
2606/* container image (if any) */
2607#jd-content .example-block img {
2608  margin:0;
2609  padding:0px;
2610}
2611
2612.example-block table {
2613  margin:0;
2614}
2615
2616/* -----------------------------------------------
2617Dialog box for popup messages
2618*/
2619
2620div.dialog {
2621  height:0;
2622  margin:0 auto;
2623}
2624
2625div.dialog>div {
2626  z-index:99;
2627  position:fixed;
2628  margin:70px 0;
2629  width: 391px;
2630  height: 200px;
2631  background: #F7F7F7;
2632-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2633-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2634box-shadow: 0 0 15px rgba(0,0,0,0.5);
2635}
2636/* IE6 can't position fixed */
2637* html div.dialog div { position:absolute; }
2638
2639
2640div#deprecatedSticker {
2641  display:none;
2642  z-index:99;
2643  position:fixed;
2644  right:15px;
2645  top:114px;
2646  margin:0;
2647  padding:1em;
2648  background:#FFF;
2649  border:1px solid #dddd00;
2650  box-shadow:-5px 5px 10px #ccc;
2651  -moz-box-shadow:-5px 5px 10px #ccc;
2652  -webkit-box-shadow:-5px 5px 10px #ccc;
2653}
2654
2655div#langMessage,
2656div#naMessage {
2657  display:none;
2658  width:555px;
2659  height:0;
2660  margin:0 auto;
2661}
2662
2663
2664div#langMessage>div,
2665div#naMessage div {
2666  z-index:99;
2667  width:450px;
2668  position:fixed;
2669  margin:80px 0;
2670  padding:4em 4em 3em;
2671  background:#FFF;
2672  border:1px solid #999;
2673  box-shadow:-10px 10px 40px #888;
2674  -moz-box-shadow:-10px 10px 40px #888;
2675  -webkit-box-shadow:-10px 10px 40px #888;
2676}
2677/* IE6 can't position fixed */
2678* html div#langMessage>div,
2679* html div#naMessage div { position:absolute; }
2680
2681div#naMessage strong {
2682  font-size:1.1em;
2683}
2684
2685div#langMessage .lang {
2686  display:none;
2687}
2688
2689/* --------------------------------------------------------------------------
2690Slideshow Controls & Next/Prev
2691*/
2692.slideshow-next, .slideshow-prev {
2693  width: 20px;
2694  height: 36px;
2695  text-indent: -1000em;
2696}
2697.slideshow-container {
2698  margin: 2em 0;
2699}
2700.slideshow-container:before, .slideshow-container:after {
2701  content: "";
2702  display: table;
2703  clear: both;
2704}
2705a.slideshow-next, a.slideshow-next:visited {
2706
2707  float: right;
2708
2709  background: url(../images/arrow-right.png) no-repeat 0 0
2710
2711}
2712
2713a.slideshow-prev, a.slideshow-prev:visited {
2714
2715  float: left;
2716
2717  background: url(../images/arrow-left.png) no-repeat 0 0
2718
2719}
2720
2721.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
2722
2723  background-position: 0 -36px
2724
2725}
2726
2727.slideshow-next:active, .slideshow-prev:active {
2728
2729  background-position: 0 -72px
2730
2731}
2732.slideshow-nav {
2733  width: 74px;
2734  margin: 0 auto;
2735}
2736.slideshow-nav a, .slideshow-nav a:visited {
2737  display: inline-block;
2738  width: 12px;
2739  height: 12px;
2740  margin: 0 2px 20px 2px;
2741  background: #ccc;
2742  -webkit-border-radius: 50%;
2743  -moz-border-radius: 50%;
2744  border-radius: 50%;
2745}
2746.slideshow-nav a:hover, .slideshow-nav a:focus {
2747
2748  background: #33B5E5
2749}
2750
2751.slideshow-nav a:active {
2752
2753  background: #1e799a;
2754  background: #ebebeb;
2755  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2756  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2757  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2758}
2759.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
2760  background: #33B5E5
2761}
2762/* --------------------------------------------------------------------------
2763Tabs
2764*/
2765ul.tabs {
2766  padding: 0;
2767  margin: 2em 0 0 0;
2768}
2769ul.tabs:before, ul.tabs:after {
2770  content: "";
2771  display: table;
2772  clear: both;
2773}
2774ul.tabs li {
2775  list-style-type: none;
2776  float: left;
2777}
2778ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
2779  display: block;
2780  height: 36px;
2781  line-height: 36px;
2782  padding: 0 15px;
2783  margin-right: 2px;
2784  color: #222;
2785  -moz-border-radius-topleft: 2px;
2786  -moz-border-radius-topright: 2px;
2787  -moz-border-radius-bottomright: px;
2788  -moz-border-radius-bottomleft: px;
2789  -webkit-border-radius: 2px 2px px px;
2790  border-radius: 2px 2px px px;
2791  border-top: solid 1px #ebebeb;
2792  border-left: solid 1px #ebebeb;
2793  border-right: solid 1px #ebebeb;
2794  background-color: #fff;
2795    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
2796    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
2797    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
2798    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
2799    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
2800    background-image: linear-gradient(top, #ffffff, #fafafa);
2801    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
2802EndColorStr='#fafafa');
2803}
2804ul.tabs li a:hover {
2805  color: #33B5E5;
2806}
2807ul.tabs li a.selected {
2808  height: 37px;
2809  color: #33B5E5;
2810  background-color: #f7f7f7;
2811  background-image: none;
2812  border-color: #ddd;
2813}
2814.tab-content {
2815  padding: 1.2em;
2816  margin: -1px 0 2em 0;
2817  -webkit-border-radius: 2px;
2818    -moz-border-radius: 2px;
2819    border-radius: 2px;
2820  border: solid 1px #ddd;
2821  background: #f7f7f7;
2822}
2823/* --------------------------------------------------------------------------
2824Feature Boxes
2825*/
2826.feature-box {
2827  width: 291px;
2828  height: 200px;
2829  position: relative;
2830  background: #F7F7F7;
2831}
2832.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
2833  z-index: 100;
2834  position: absolute;
2835  background-color: #aaa;
2836}
2837.box-border .top, .box-border .bottom {
2838  width: 291px;
2839  height: 1px;
2840}
2841.dialog .box-border .top,
2842.dialog .box-border .bottom { width:391px; }
2843
2844.box-border .left, .box-border .right {
2845  width: 1px;
2846  height: 8px;
2847}
2848.box-border .top { top: 0; left: 0 }
2849.box-border .top .left { top: 1px; left: 0 }
2850.box-border .top .right { top: 1px; right: 0 }
2851.box-border .bottom .left { top: -8px; left: 0 }
2852.box-border .bottom { top: 200px; left: 0 }
2853.box-border .bottom .right { top: -8px; right: 0 }
2854
2855.feature-box h4,
2856.dialog h4 {
2857    padding: 15px 18px 10px;
2858}
2859
2860.feature-box p,
2861.dialog p {
2862    margin: 10px 18px;
2863    padding:0;
2864}
2865.feature-box .link,
2866.dialog .link {
2867    border-top: 1px solid #dedede;
2868    bottom: 0;
2869    position: absolute;
2870    width: inherit;
2871}
2872.feature-box a, .feature-box h4,
2873.dialog a, .dialog h4 {
2874    -webkit-transition: color .4s ease;
2875    -moz-transition: color .4s ease;
2876    -o-transition: color .4s ease;
2877    transition: color .4s ease;
2878}
2879.feature-box:hover {
2880  cursor: pointer;
2881}
2882.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
2883.left, .feature-box:hover .right {
2884  background-color: #33B5E5;
2885}
2886.feature-box:hover h4, .feature-box:hover a {
2887  color: #33B5E5;
2888}
2889/* --------------------------------------------------------------------------
2890Page-Specific Styles
2891*/
2892.colors {
2893  position: relative;
2894  float: left;
2895  width: 92px;
2896  margin: 40px 0 20px;
2897}
2898.colors div {
2899  color: #fff;
2900  font-size: 11.5px;
2901  width: 82px;
2902  height: 82px;
2903  margin-top:-30px;
2904  line-height: 82px;
2905  text-align: center;
2906  border: solid 5px #fff;
2907  -webkit-border-radius: 50%;
2908  -moz-border-radius: 50%;
2909  border-radius: 50%;
2910}
2911
2912
2913
2914
2915
2916
2917
2918
2919
2920
2921
2922
2923
2924
2925/* ########### REFERENCE DOCS ################## */
2926
2927#packages-nav h2,
2928#classes-nav h2 {
2929  font-size:18px;
2930  margin:0;
2931  padding:0 0 0 4px;
2932}
2933
2934/* not sure if this is needed in the ref docs, disabling for now
2935.jd-descr h2 {
2936  margin:16px 0;
2937}
2938*/
2939
2940/* First paragraph of a content pages is a bit larger
2941   - note the very specific selector. */
2942.jd-descr > p:first-child,
2943.jd-descr > #tb-wrapper + p,
2944.jd-descr > #qv-wrapper + p {
2945  font-size: 16px;
2946  margin-bottom: 16px;
2947}
2948
2949/* page-top-right container for reference pages (holds
2950links to summary tables) */
2951#api-info-block {
2952  font-size:12px;
2953  margin:20px 0 0;
2954  font-weight:normal;
2955  float:right;
2956  text-align:right;
2957  color:#999;
2958  max-width:300px;
2959  font-size: 12px;
2960  line-height:14px;
2961}
2962
2963#api-info-block div.api-level {
2964  font-weight:bold;
2965  font-size:inherit;
2966  float:none;
2967  color:#222;
2968  padding:0;
2969  margin:0;
2970}
2971
2972/* inheritance table */
2973table.inhtable>tbody>tr>td {
2974  padding-left:0;
2975}
2976table.inhtable>tbody>tr>td div:first-of-type {
2977  padding-left:12px;
2978}
2979
2980.jd-inheritance-table {
2981  border-spacing:0;
2982  margin:1em 0;
2983  padding:0;
2984  background-color:transparent;
2985}
2986.jd-inheritance-table tr td {
2987  border: none;
2988  margin: 0;
2989  padding: 0;
2990  background-color:transparent;
2991}
2992.jd-inheritance-table .jd-inheritance-space {
2993  width:2em;
2994}
2995.jd-inheritance-table .jd-inheritance-interface-cell {
2996  padding-left: 17px;
2997}
2998
2999
3000/* the link inside a sumtable for "Show All/Hide All" */
3001.toggle-all {
3002  display:block;
3003  float:right;
3004  font-weight:normal;
3005  font-size:0.9em;
3006}
3007
3008/* adjustments for in/direct subclasses tables */
3009.jd-sumtable-subclasses {
3010  margin: 1em 0 0 0;
3011  max-width:968px;
3012  background-color:transparent;
3013}
3014
3015/* extra space between end of method name and open-paren */
3016.sympad {
3017  margin-right: 2px;
3018}
3019
3020/* adjustments for the expando table-in-table */
3021.jd-sumtable-expando {
3022  margin:.5em 0;
3023  padding:0;
3024}
3025
3026/* a div that holds a short description */
3027.jd-descrdiv {
3028  padding:3px 1em 0 1em;
3029  margin:0;
3030  border:0;
3031}
3032
3033#jd-content img.jd-expando-trigger-img {
3034  padding:0 4px 4px 0;
3035  margin:0;
3036}
3037
3038.jd-sumtable-subclasses div#subclasses-direct,
3039.jd-sumtable-subclasses div#subclasses-indirect {
3040  /* left margin matches width of the toggle image,
3041     so this section aligns with the text above */
3042  margin:0 0 0 34px;
3043}
3044
3045
3046
3047/********* MEMBER REF *************/
3048
3049
3050.jd-details {
3051/*  border:1px solid #669999;
3052  padding:4px; */
3053  margin:0 0 1em;
3054}
3055
3056/* API reference: a container for the
3057.tagdata blocks that make up the detailed
3058description */
3059.jd-details-descr {
3060  padding:0;
3061  margin:.5em .25em;
3062}
3063
3064/* API reference: a block containing
3065a detailed description, a params table,
3066seealso list, etc */
3067.jd-tagdata {
3068  margin:.5em 1em;
3069}
3070
3071.jd-tagdata p {
3072  margin:0 0 1em 1em;
3073}
3074
3075/* API reference: adjustments to
3076the detailed description block */
3077.jd-tagdescr {
3078  margin:.25em 0 .75em 0;
3079}
3080
3081.jd-tagdescr ol,
3082.jd-tagdescr ul {
3083  margin:0 2.5em;
3084  padding:0;
3085}
3086
3087.jd-tagdescr table,
3088.jd-tagdescr img {
3089  margin:.25em 1em;
3090}
3091
3092.jd-tagdescr li {
3093margin:0 0 .25em 0;
3094padding:0;
3095}
3096
3097/* API reference: heading marking
3098the details section for constants,
3099attrs, methods, etc. */
3100h4.jd-details-title {
3101  font-size:1.15em;
3102  background-color: #E2E2E2;
3103  margin:1.5em 0 .6em;
3104  padding:3px 95px 3px 3px; /* room for api-level */
3105}
3106body.google h4.jd-details-title {
3107  background-color: #FFF;
3108  padding-top:5px;
3109  border-top: 1px solid #ccc;
3110}
3111
3112h4.jd-tagtitle {
3113  padding:0;
3114}
3115
3116h4 .normal {
3117  font-weight:normal;
3118}
3119
3120/* API reference: heading for "Parameters", "See Also", etc.,
3121in details sections */
3122h5.jd-tagtitle {
3123  padding:0 0 .25em 0;
3124  font-size:1em;
3125}
3126
3127.jd-tagtable {
3128  margin:0;
3129  background-color:transparent;
3130  width:auto;
3131}
3132
3133.jd-tagtable td,
3134.jd-tagtable th {
3135  border:none;
3136  background-color:#fff;
3137  vertical-align:top;
3138  font-weight:normal;
3139  padding:2px 10px;
3140}
3141
3142.jd-tagtable th {
3143  font-style:italic;
3144}
3145
3146
3147/* Inline api level indicator for methods */
3148div.api-level {
3149  font-size:.8em;
3150  font-weight:normal;
3151  color:#999;
3152  float:right;
3153  padding:0 8px 0;
3154  margin-top:-35px;
3155}
3156
3157table.jd-tagtable td,
3158table.jd-tagtable th {
3159  background-color:transparent;
3160}
3161
3162table.jd-tagtable th {
3163  color:inherit;
3164}
3165
3166/************ STICKY NAV BAR ******************/
3167
3168#context {
3169  clear: both;
3170  padding-top: 14px;
3171}
3172#context .breadcrumb {
3173  float: left;
3174  margin-bottom: 10px;
3175}
3176#context .util {
3177  float: right;
3178  margin-right: 20px;
3179}
3180
3181.breadcrumb {
3182  list-style: none;
3183  margin: 0;
3184  padding: 0;
3185  position: relative;
3186}
3187.breadcrumb li {
3188  float: left;
3189  padding: 0 20px 0 0;
3190  color: #000;
3191  white-space: nowrap;
3192}
3193.breadcrumb li a {
3194  color: #000;
3195}
3196.breadcrumb li:after {
3197  content: url(../images/breadcrumb.png);
3198  position: relative;
3199  top: 1px;
3200  left: 10px;
3201  width: 5px;
3202  height: 10px;
3203}
3204.breadcrumb li.current {
3205  font-weight: 700;
3206}
3207.breadcrumb li.current:after {
3208  display: none;
3209}
3210
3211/* offset the <a name=""> tags to account for sticky nav */
3212body.reference a[name] {
3213  visibility: hidden;
3214  display: block;
3215  position: relative;
3216  top: -56px;
3217}
3218
3219
3220/* Quicknav */
3221.btn-quicknav {
3222  width:20px;
3223  height:28px;
3224  float:left;
3225  margin-left:6px;
3226  padding-right:10px;
3227  position:relative;
3228  cursor:pointer;
3229  border-right:1px solid #CCC;
3230}
3231
3232.btn-quicknav a {
3233  zoom:1;
3234  position:absolute;
3235  top:13px;
3236  left:5px;
3237  display:block;
3238  text-indent:-9999em;
3239  width:10px;
3240  height:5px;
3241  background:url(../images/quicknav_arrow.png) no-repeat;
3242}
3243
3244.btn-quicknav a.arrow-active {
3245  background-position: 0 -5px;
3246  display:none;
3247}
3248
3249#header-wrap.quicknav a.arrow-inactive {
3250  display:none;
3251}
3252
3253.btn-quicknav.active a.arrow-active {
3254  display:block;
3255}
3256
3257#header-wrap.quicknav .nav-x li {
3258  min-width:160px;
3259  margin-right:20px;
3260}
3261
3262#header-wrap.quicknav li.last {
3263  margin-right:0px;
3264}
3265
3266#quicknav {
3267 float:none;
3268 clear:both;
3269 margin-left:0;
3270 margin-top:-30px;
3271 display:none;
3272 overflow:hidden;
3273}
3274
3275#header-wrap.quicknav #quicknav {
3276
3277}
3278
3279#quicknav ul {
3280  margin:10px 0;
3281  padding:0;
3282}
3283
3284#quicknav ul li.about {
3285  border-top:1px solid #9933CC;
3286}
3287
3288#quicknav ul li.design {
3289  border-top:1px solid #33b5e5;
3290}
3291
3292#quicknav ul li.develop {
3293  border-top:1px solid #FF8800;
3294}
3295
3296#quicknav ul li.distribute {
3297  border-top:1px solid #99cc00;
3298}
3299
3300#quicknav ul li {
3301  display:block;
3302  float:left;
3303  margin:0 20px 0 0;
3304  min-width:140px;
3305}
3306
3307#quicknav ul li.last {
3308  margin-right:0px;
3309}
3310
3311#quicknav ul li ul li {
3312  float:none;
3313}
3314
3315#quicknav ul li ul li a {
3316  color:#222;
3317}
3318
3319#quicknav ul li li ul,
3320#quicknav ul li li ul li {
3321  margin:0;
3322}
3323
3324#quicknav ul li li ul li:before {
3325  content:"\21B3";
3326}
3327
3328#header-wrap {
3329   -webkit-transition: all 0.25s ease-out;
3330      -moz-transition: all 0.25s ease-out;
3331       -ms-transition: all 0.25s ease-out;
3332        -o-transition: all 0.25s ease-out;
3333           transition: all 0.25s ease-out;
3334
3335}
3336
3337#header-wrap.quicknav {
3338  height:216px;
3339
3340}
3341
3342.moremenu {
3343  float: right;
3344  position: relative;
3345  width: 50px;
3346  height:28px;
3347  display: block;
3348  margin-top:-3px;
3349  margin-bottom:7px;
3350  overflow:hidden;
3351  -webkit-transition: width 0.25s ease;
3352     -moz-transition: width 0.25s ease;
3353       -o-transition: width 0.25s ease;
3354          transition: width 0.25s ease;
3355}
3356
3357.moremenu #more-btn {
3358  width:40px;
3359  height:28px;
3360  background:url(../images/icon_more.png) no-repeat;
3361  border-left:1px solid #CCC;
3362  float:left;
3363  cursor:pointer;
3364}
3365
3366.moremenu:hover #more-btn {
3367  background-position:0 -28px;
3368}
3369
3370.morehover {
3371  position:absolute;
3372  right:6px;
3373  top:-9px;
3374  width:40px;
3375  height:35px;
3376  z-index:99;
3377  overflow:hidden;
3378
3379  -webkit-opacity:0;
3380     -moz-opacity:0;
3381       -o-opacity:0;
3382          opacity:0;
3383
3384  -webkit-transform-origin:100% 0%;
3385     -moz-transform-origin:100% 0%;
3386       -o-transform-origin:100% 0%;
3387          transform-origin:100% 0%;
3388
3389  -webkit-transition-property: -webkit-opacity;
3390  -webkit-transition-duration: .25s;
3391  -webkit-transition-timing-function:ease;
3392
3393  -moz-transition-property: -moz-opacity;
3394  -moz-transition-duration: .25s;
3395  -moz-transition-timing-function:ease;
3396
3397  -o-transition-property: -o-opacity;
3398  -o-transition-duration: .25s;
3399  -o-transition-timing-function:ease;
3400
3401  transition-property: opacity;
3402  transition-duration: .25s;
3403  transition-timing-function:ease;
3404}
3405
3406.morehover:hover,
3407.morehover.hover {
3408  opacity:1;
3409  height:385px;
3410  width:268px;
3411  -webkit-transition-property:height,  -webkit-opacity;
3412}
3413
3414.morehover .top {
3415  width:268px;
3416  height:39px;
3417  background:url(../images/more_top.png) no-repeat;
3418}
3419
3420.morehover .mid {
3421  width:228px;
3422  background:url(../images/more_mid.png) repeat-y;
3423  padding:10px 20px 0 20px;
3424}
3425
3426.morehover .mid .header {
3427  border-bottom:1px solid #ccc;
3428  font-weight:bold;
3429}
3430
3431.morehover .bottom {
3432  width:268px;
3433  height:6px;
3434  background:url(../images/more_bottom.png) no-repeat;
3435}
3436
3437.morehover ul {
3438  margin:10px 10px 20px 0;
3439}
3440
3441.morehover ul li {
3442  list-style:none;
3443}
3444
3445.morehover ul li.active a,
3446.morehover ul li.active a:hover {
3447  color:#222 !important;
3448}
3449
3450.morehover ul li.active img {
3451  margin-right:4px;
3452}
3453
3454
3455
3456
3457/* MARQUEE */
3458.slideshow-container {
3459  width:100%;
3460  overflow:hidden;
3461  position:relative;
3462}
3463.slideshow-container .slideshow-prev {
3464  position:absolute;
3465  top:50%;
3466  left:0px;
3467  margin-top:-36px;
3468  z-index:99;
3469}
3470.slideshow-container .slideshow-next {
3471  position:absolute;
3472  top:50%;
3473  margin-top:-36px;
3474  z-index:99;
3475  right:0px;
3476}
3477
3478.slideshow-container .pagination {
3479  position:absolute;
3480  bottom:20px;
3481  width:100%;
3482  text-align:center;
3483  z-index:99;
3484}
3485.slideshow-container .pagination ul {
3486  margin:0;
3487}
3488.slideshow-container .pagination ul li{
3489  display: inline-block;
3490  width:12px;
3491  height:12px;
3492  text-indent:-8000px;
3493  list-style:none;
3494  margin: 0 3px;
3495  border-radius:6px;
3496  background-color:#ddd;
3497  cursor:pointer;
3498        -webkit-transition:color .5s ease-in;
3499        -moz-transition:color .5s ease-in;
3500        -o-transition:color .5s ease-in;
3501        transition:color .5s ease-in;
3502}
3503.slideshow-container .pagination ul li:hover {
3504  background-color:#bbb;
3505}
3506.slideshow-container .pagination ul li.active {
3507  background-color:#6ab344;
3508}
3509.slideshow-container .pagination ul li.active:hover {
3510  background-color:#6ab344;
3511}
3512.slideshow-container ul li {
3513  display:inline;
3514  list-style:none;
3515}
3516
3517
3518#landing h1 {
3519  padding:17px 0 20px 0 !important;
3520}
3521
3522a.download-sdk {
3523    float:right;
3524    margin:-10px 0;
3525    height:30px;
3526    padding-top:4px;
3527    padding-bottom:0px;
3528}
3529
3530#searchResults.wrap {
3531    max-width:940px;
3532    border-bottom:1px solid #e5e5e5;
3533}
3534
3535#searchResults.wrap #leftSearchControl {
3536  min-height:700px
3537}
3538
3539
3540
3541
3542
3543
3544
3545
3546
3547
3548/*
3549 * CSS Styles that are needed by jScrollPane for it to operate correctly.
3550 */
3551
3552.jspContainer {
3553  overflow: hidden;
3554  position: relative;
3555}
3556
3557.jspPane {
3558  position: absolute;
3559  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
3560}
3561
3562.jspVerticalBar {
3563  position: absolute;
3564  top: 0;
3565  right: 0;
3566  width: 4px;
3567  height: 100%;
3568  background: #f5f5f5;
3569}
3570
3571.jspHorizontalBar {
3572  position: absolute;
3573  bottom: 0;
3574  left: 0;
3575  width: 100%;
3576  height: 4px;
3577  background: #f5f5f5;
3578}
3579
3580.jspVerticalBar *,
3581.jspHorizontalBar * {
3582  margin: 0;
3583  padding: 0;
3584}
3585.jspCap {
3586  display: block;
3587}
3588
3589.jspVerticalBar .jspCap {
3590  height: 4px;
3591}
3592
3593.jspHorizontalBar .jspCap {
3594  width: 0;
3595  height: 100%;
3596}
3597
3598.jspHorizontalBar .jspCap {
3599  float: left;
3600}
3601
3602.jspTrack {
3603  position: relative;
3604}
3605
3606.jspDrag {
3607  background: #ccc;
3608  position: relative;
3609  top: 0;
3610  left: 0;
3611  cursor: pointer;
3612}
3613
3614.jspDrag:hover,
3615.jspDrag:active {
3616  border-color: #09c;
3617  background-color: #4cadcb;
3618  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
3619  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
3620  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
3621  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
3622  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
3623  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
3624  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
3625}
3626
3627.jspHorizontalBar .jspTrack,
3628.jspHorizontalBar .jspDrag {
3629  float: left;
3630  height: 100%;
3631}
3632
3633.jspArrow {
3634  background: #999;
3635  text-indent: -20000px;
3636  display: block;
3637  cursor: pointer;
3638}
3639
3640.jspArrow.jspDisabled {
3641  cursor: default;
3642  background: #ccc;
3643}
3644
3645.jspVerticalBar .jspArrow {
3646  height: 16px;
3647}
3648
3649.jspHorizontalBar .jspArrow {
3650  width: 16px;
3651  float: left;
3652  height: 100%;
3653}
3654
3655.jspVerticalBar .jspArrow:focus {
3656  outline: none;
3657}
3658
3659.jspCorner {
3660  float: left;
3661  height: 100%;
3662}
3663
3664/* Yuk! CSS Hack for IE6 3 pixel bug :( */
3665* html .jspCorner {
3666  margin: 0 -3px 0 0;
3667}
3668/******* end of jscrollpane *********/
3669
3670
3671
3672
3673
3674/************ DEVELOP HOMEPAGE ******************/
3675
3676/* Slideshow */
3677.slideshow-develop {
3678  height: 316px;
3679  width: 940px;
3680  position: relative;
3681  overflow:hidden;
3682}
3683.slideshow-develop .frame {
3684  width: 940px;
3685  height: 316px;
3686}
3687.slideshow-develop img.play {
3688  max-width:350px;
3689  max-height:240px;
3690  margin:20px 0 0 90px;
3691  -webkit-transform: perspective(800px ) rotateY( 35deg );
3692  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3693  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3694  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3695}
3696.slideshow-develop img.play.no-shadow {
3697    box-shadow: none;
3698    -moz-box-shadow: none;
3699    -webkit-box-shadow: none;
3700}
3701.slideshow-develop img.play.no-transform {
3702  -webkit-transform: none;
3703}
3704.slideshow-develop a.slideshow-next {
3705  background: url(../images/arrow-right-develop.png);
3706}
3707.slideshow-develop a.slideshow-prev {
3708  background: url(../images/arrow-left-develop.png);
3709}
3710.slideshow-develop .content-right {
3711  float: left;
3712}
3713.slideshow-develop .content-right h2 {
3714  padding:0;
3715  padding-bottom:10px;
3716  border:none;
3717  font-size:24px;
3718}
3719.slideshow-develop .item {
3720  height: 300px;
3721  width: 940px;
3722}
3723.slideshow-develop .pagination ul li.active {
3724  background-color: #F80;
3725}
3726.slideshow-develop .pagination ul li.active:hover {
3727  background-color: #F80;
3728}
3729.slideshow-develop .item hr {
3730  margin:5px 0 10px;
3731}
3732.slideshow-develop .item p {
3733  margin:10px 0;
3734}
3735.slideshow-develop .item p.title-intro {
3736  position:absolute;
3737  margin:0;
3738}
3739
3740/* Feeds */
3741.feed ul {
3742  margin: 0;
3743}
3744.feed .feed-nav {
3745  height: 25px;
3746  border-bottom: 1px solid #CCC;
3747}
3748.feed .feed-nav li {
3749  list-style: none;
3750  float: left;
3751  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
3752  margin-right: 25px;
3753  cursor: pointer;
3754}
3755.feed .feed-nav li.active {
3756  color: #000;
3757  border-bottom: 4px solid #F80;
3758}
3759.feed .feed-container {
3760  overflow: hidden;
3761  width: 460px;
3762}
3763.feed .feed-container .feed-frame {
3764  width: 1000px;
3765}
3766.feed .feed-container .feed-frame ul {
3767  float: left;
3768  width:460px;
3769}
3770.feed .feed-container .feed-frame ul ul {
3771  float: none;
3772  margin:10px 0 0 30px;
3773}
3774.feed .feed-container .feed-frame li {
3775  list-style: none;
3776  margin: 20px 0 20px 0;
3777  width: 460px;
3778  height:93px;
3779}
3780.feed .feed-container .feed-frame li.playlist {
3781  height:auto;
3782}
3783.feed .feed-container .feed-frame li.playlist a {
3784  height:93px;
3785  display:block;
3786}
3787.feed .feed-container .feed-frame li.more {
3788  height:20px;
3789  margin:10px 0 5px 5px;
3790}
3791.feed .feed-container .feed-frame li.more a {
3792  height:inherit;
3793}
3794.feed .feed-container .feed-frame li.playlist-video {
3795  list-style: none;
3796  margin: 0;
3797  width: 460px;
3798  height:55px;
3799  font-size:12px;
3800}
3801.feed .feed-container .feed-frame li.playlist-video a {
3802  height:45px;
3803  padding:5px;
3804}
3805.feed .feed-container .feed-frame li.playlist-video h5 {
3806  font-size:12px;
3807  line-height:13px;
3808  padding:0;
3809}
3810.feed .feed-container .feed-frame li.playlist-video p {
3811  margin:5px 0 0;
3812  line-height:15px;
3813}
3814.feed-container .feed-frame div.feed-image {
3815  float: left;
3816  border: 1px solid #999;
3817  margin:0 20px 0 0;
3818  width:122px;
3819  height:92px;
3820  background:url('../images/blog-default.png') no-repeat 0 0;
3821  background-size:180px;
3822}
3823#jd-content .feed .feed-container .feed-frame li img {
3824  float: left;
3825  border: 1px solid #999;
3826  margin:0 20px 0 0;
3827  width:122px;
3828  height:92px;
3829}
3830#jd-content .feed .feed-container .feed-frame li.playlist-video img {
3831  width:inherit;
3832  height:inherit;
3833}
3834
3835.feed .feed-container .feed-frame li a,
3836.feed .feed-container .feed-frame li a:active {
3837  color:#555 !important;
3838}
3839
3840.feed .feed-container .feed-frame li a:hover,
3841.feed .feed-container .feed-frame li a:hover * {
3842  color:#7AA1B0 !important;
3843}
3844
3845/* Video player */
3846#player-wrapper {
3847  display:none;
3848  margin: -1px auto 0;
3849  position: relative;
3850  max-width: 940px;
3851  height: 0px;
3852}
3853#player-frame {
3854  background: #EFEFEF;
3855  border: 1px solid #CCC;
3856  padding: 0px 207px;
3857  z-index: 10; /* stay above marque, but below search suggestions */
3858  width: 525px;
3859  height: 330px;
3860  position: relative;
3861}
3862#player-frame .close {
3863  position: absolute;
3864  right: 8px;
3865  bottom: 4px;
3866  width: 16px;
3867  height: 16px;
3868  margin: 0;
3869  text-indent: -1000em;
3870  top: 6px;
3871  background: url(../images/close.png) no-repeat 0 0;
3872  z-index:9999;
3873}
3874#player-frame .close:hover, #player-frame .close:focus {
3875  background-position: -16px 0;
3876  cursor:pointer;
3877}
3878
3879
3880
3881/************ DEVELOP TOPIC CONTAINERS ************/
3882
3883.landing-banner,
3884.landing-docs {
3885  margin:20px 0;
3886}
3887.landing-banner > div:first-child,
3888.landing-docs > div:first-child,
3889.landing-docs > .col-12 {
3890  margin-left:0;
3891  min-height:280px;
3892}
3893.landing-banner.short > div {
3894  min-height:50px;
3895}
3896.landing-banner > div:last-child,
3897.landing-docs > div:last-child,
3898.landing-docs > .col-12 {
3899  margin-right:0;
3900}
3901
3902.landing-banner > div > *:last-child {
3903  margin-bottom:0;
3904}
3905.landing-banner h1 {
3906  padding-top:16px;
3907  padding-bottom:24px;
3908}
3909.landing-docs,
3910.landing-banner {
3911  clear:both;
3912  overflow:hidden;
3913}
3914.landing-docs h3 {
3915  font-size:14px;
3916  line-height:21px;
3917  color:#555;
3918  text-transform:uppercase;
3919  border-bottom:1px solid #CCC;
3920  padding:0 0 20px;
3921}
3922.landing-docs a {
3923  color:#333 !important;
3924}
3925
3926.landing-docs a:hover,
3927.landing-docs a:hover * {
3928  color:#7AA1B0 !important
3929}
3930
3931.landing-docs .normal-links a {
3932  color:#039BE5 !important;
3933}
3934
3935.plusone {
3936  float:right;
3937}
3938
3939
3940
3941.next-docs {
3942  border-top:1px solid #ccc;
3943  margin:40px 0 0;
3944  padding:5px 0 0;
3945  clear:left;
3946  overflow:hidden;
3947}
3948.next-docs div:first-child {
3949  margin-left:0;
3950}
3951.next-docs div:last-child {
3952  margin-right:0;
3953}
3954
3955.next-docs h2 {
3956  font-size:14px;
3957  line-height:21px;
3958  color:#555;
3959  text-transform:uppercase;
3960  border-bottom:none;
3961  padding:5px 0 1em;
3962}
3963
3964
3965
3966/************* HOME/LANDING PAGE *****************/
3967
3968.slideshow-home {
3969  height: 500px;
3970  width: 940px;
3971  border-bottom: 1px solid #CCC;
3972  position: relative;
3973  margin: 0;
3974}
3975.slideshow-home .frame {
3976  width: 940px;
3977  height: 500px;
3978}
3979.slideshow-home .content-left {
3980  float: left;
3981  text-align: center;
3982  vertical-align: center;
3983  margin: 0 0 0 35px;
3984}
3985.slideshow-home .content-right {
3986  margin: 80px 0 0 0;
3987}
3988.slideshow-home .content-right p {
3989  margin-bottom: 10px;
3990}
3991.slideshow-home .content-right p:last-child {
3992  margin-top: 15px;
3993}
3994.slideshow-home .content-right h1 {
3995  padding:0;
3996}
3997.slideshow-home .item {
3998  height: 500px;
3999  width: 940px;
4000}
4001.home-sections {
4002  padding: 30px 20px 20px;
4003  margin: 20px 0;
4004  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
4005}
4006.home-sections ul {
4007  margin: 0;
4008}
4009.home-sections ul li {
4010  float: left;
4011  display: block;
4012  list-style: none;
4013  width: 170px;
4014  height: 35px;
4015  border: 1px solid #ccc;
4016  background: white;
4017  margin-right: 10px;
4018  border-radius: 1px;
4019  -webkit-border-radius: 1px;
4020  -moz-border-radius: 1px;
4021  box-shadow: 1px 1px 5px #EEE;
4022  -webkit-box-shadow: 1px 1px 5px #EEE;
4023  -moz-box-shadow: 1px 1px 5px #EEE;
4024  background: white;
4025}
4026.home-sections ul li:hover {
4027  background: #F9F9F9;
4028  border: 1px solid #CCC;
4029}
4030.home-sections ul li a,
4031.home-sections ul li a:hover {
4032  font-weight: bold;
4033  margin-top: 8px;
4034  line-height: 18px;
4035  float: left;
4036  width: 100%;
4037  text-align: center;
4038  color: #039BE5 !important;
4039}
4040.home-sections ul li a {
4041  font-weight: bold;
4042  margin-top: 8px;
4043  line-height: 18px;
4044  float: left;
4045  width:100%;
4046  text-align:center;
4047}
4048.home-sections ul li img {
4049  float: left;
4050  margin: -8px 0 0 10px;
4051}
4052.home-sections ul li.last {
4053  margin-right: 0px;
4054}
4055
4056/************ DISTRIBUTE PAGES ******************/
4057
4058.article-detail #body-content {
4059  padding-top: 10px;
4060}
4061
4062/* A container for grid sets with uppercase h3 and rule */
4063.dynamic-grid h3 {
4064  font-size:14px;
4065  line-height:21px;
4066  color:#555;
4067  text-transform:uppercase;
4068  border-bottom:1px solid #CCC;
4069  padding:8px 0 14px 1px;
4070  clear:both;
4071}
4072
4073.top-right-float {
4074  float: right;
4075}
4076
4077.clearfloat {
4078  float: none;
4079  clear: both;
4080}
4081
4082
4083/**
4084 * UTILITIES
4085 */
4086
4087
4088.border-box {
4089  box-sizing: border-box;
4090}
4091
4092.vertical-center-outer {
4093  display: table;
4094  height: 100%;
4095  width: 100%;
4096}
4097
4098.vertical-center-inner {
4099  display: table-cell;
4100  vertical-align: middle;
4101}
4102
4103/**
4104 * TYPE STYLES
4105 */
4106
4107.landing-h1 {
4108  color: #44555d;
4109  font-weight: 300;
4110  font-size: 56px;
4111  line-height: 80px;
4112  text-align: center;
4113  letter-spacing: -1px;
4114  padding-bottom: 6px;
4115}
4116
4117.landing-pre-h1 {
4118  font-weight: 400;
4119  font-size: 28px;
4120  color: #93B73F;
4121  line-height: 36px;
4122  text-align: center;
4123  letter-spacing: -1px;
4124  text-transform: uppercase;
4125}
4126
4127.landing-h1.hero {
4128  text-align: left;
4129  color: #fff;
4130}
4131
4132.landing-h2 {
4133  font-weight: 300;
4134  font-size: 42px;
4135  line-height: 64px;
4136  text-align: center;
4137}
4138
4139.landing-subhead {
4140  color: #78868d;
4141  font-size: 20px;
4142  font-weight: 300;
4143  line-height: 32px;
4144  text-align: center;
4145}
4146.landing-subhead.hero {
4147  text-align: left;
4148  color: white;
4149}
4150
4151.landing-hero-description {
4152  text-align: left;
4153  margin: 1em 0;
4154}
4155
4156.landing-hero-description p {
4157  font-weight: 300;
4158  margin: 0;
4159  font-size: 18px;
4160  line-height: 24px;
4161}
4162
4163.landing-body .landing-small {
4164  font-size: 14px;
4165  line-height: 19px;
4166}
4167
4168.landing-body.landing-align-center {
4169  text-align: center;
4170}
4171
4172.landing-align-left {
4173  text-align: left;
4174}
4175
4176/**
4177 * LAYOUT
4178 */
4179
4180.landing-section {
4181  background: #eceff1;
4182  clear: both;
4183  padding: 80px 20px 80px;
4184  margin: 0 -20px;
4185  text-rendering: optimizeLegibility;
4186}
4187
4188@media (max-width: 719px) {
4189  .landing-section {
4190    margin-left: -10px;
4191    margin-right: -10px;
4192    padding-left: 10px;
4193    padding-right: 10px;
4194  }
4195}
4196
4197.landing-short-section {
4198  padding: 40px 10px 28px;
4199}
4200
4201.landing-gray-background {
4202  background-color: #b0bec5;
4203}
4204
4205.landing-white-background {
4206  background-color: white;
4207}
4208
4209.landing-red-background {
4210  color: white;
4211  background-color: hsl(8, 70%, 54%);
4212}
4213
4214.landing-red-background .landing-h1 {
4215  color: white;
4216}
4217
4218.landing-red-background .landing-subhead {
4219  color: hsl(8, 71%, 84%);
4220  text-align: left;
4221}
4222
4223
4224.preview-hero {
4225  height: calc(100vh - 128px);
4226  min-height: 504px;
4227  padding-top: 0;
4228  padding-bottom: 0;
4229  background-image: url(../../preview/images/hero.jpg);
4230  background-size: cover;
4231  background-position: right center;
4232  color: white;
4233  position: relative;
4234  overflow: hidden;
4235}
4236
4237.wear-hero {
4238  height: calc(100vh - 128px);
4239  min-height: 504px;
4240  padding-top: 0;
4241  padding-bottom: 0;
4242  background-image: url(../../wear/images/hero.jpg);
4243  background-size: cover;
4244  background-position: top center;
4245  color: white;
4246  position: relative;
4247  overflow: hidden;
4248}
4249
4250.tv-hero {
4251  height: calc(100vh - 128px);
4252  min-height: 504px;
4253  padding-top: 0;
4254  padding-bottom: 0;
4255  background-image: url(../../tv/images/hero.jpg);
4256  background-size: cover;
4257  background-position: right center;
4258  color: white;
4259  position: relative;
4260  overflow: hidden;
4261}
4262
4263.auto-hero {
4264  height: calc(100vh - 128px);
4265  min-height: 504px;
4266  padding-top: 0;
4267  padding-bottom: 0;
4268  background-image: url(../../auto/images/hero.jpg);
4269  background-size: cover;
4270  background-position: right center;
4271  color: white;
4272  position: relative;
4273  overflow: hidden;
4274}
4275
4276.landing-hero-scrim {
4277  background: black;
4278  height: 100%;
4279  left: 0;
4280  position: absolute;
4281  opacity: .2;
4282  width: 100%;
4283}
4284
4285.landing-hero-wrap {
4286  margin: 0 auto;
4287  max-width: 940px;
4288  clear: both;
4289  height: 100%;
4290  position: relative;
4291}
4292
4293.landing-section-header {
4294  margin-bottom: 40px;
4295}
4296
4297.landing-hero-wrap .landing-section-header {
4298  margin-bottom: 16px;
4299}
4300
4301.landing-body {
4302  font-size: 18px;
4303  line-height: 24px;
4304}
4305
4306.landing-video-link {
4307  white-space: nowrap;
4308  display: inline-block;
4309  padding: 16px 32px 16px 82px;
4310  font-size: 18px;
4311  font-weight: 400;
4312  line-height: 24px;
4313  cursor: pointer;
4314  color: hsla(0, 0%, 100%, .8);
4315  -webkit-user-select: none;
4316     -moz-user-select: none;
4317       -o-user-select: none;
4318  user-select: none;
4319  -webkit-transition: .2s color ease-in-out;
4320     -moz-transition: .2s color ease-in-out;
4321       -o-transition: .2s color ease-in-out;
4322  transition: .2s color ease-in-out;
4323}
4324
4325.landing-video-link:before {
4326  height: 64px;
4327  width: 64px;
4328  display: inline-block;
4329  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=);
4330  background-size: contain;
4331  position: absolute;
4332  content: "";
4333  opacity: .7;
4334  margin-top: -19px;
4335  margin-left: -64px;
4336  -webkit-transition: .2s opacity ease-in-out;
4337     -moz-transition: .2s opacity ease-in-out;
4338       -o-transition: .2s opacity ease-in-out;
4339  transition: .2s opacity ease-in-out;
4340}
4341
4342.landing-video-link:hover {
4343  color: hsla(0, 0%, 100%, 1);
4344}
4345
4346.landing-video-link:hover:before {
4347  opacity: 1;
4348}
4349
4350.landing-social-image {
4351  float: left;
4352  margin-right: 14px;
4353  height: 64px;
4354  width: 64px;
4355}
4356
4357.landing-social-copy {
4358  padding-left: 78px;
4359}
4360
4361.landing-scroll-down-affordance {
4362  position: absolute;
4363  bottom: 0;
4364  width: 100%;
4365  text-align: center;
4366  z-index: 10;
4367}
4368
4369.landing-down-arrow {
4370  padding: 24px;
4371  display: inline-block;
4372  opacity: .5;
4373  -webkit-transition: .2s opacity ease-in-out;
4374     -moz-transition: .2s opacity ease-in-out;
4375       -o-transition: .2s opacity ease-in-out;
4376  transition: .2s opacity ease-in-out;
4377
4378  -webkit-animation-name: pulse-opacity;
4379  -webkit-animation-duration: 4s;
4380}
4381
4382.landing-down-arrow:hover {
4383  opacity: 1;
4384}
4385
4386.landing-down-arrow img {
4387  height: 28px;
4388  width: 28px;
4389  margin: 0 auto;
4390  display: block;
4391}
4392
4393.landing-divider {
4394  display: inline-block;
4395  height: 2px;
4396  background-color: white;
4397  position: relative;
4398  margin: 10px 0;
4399}
4400
4401/* 3 CLOLUMN LAYOUT */
4402
4403.landing-breakout {
4404  margin-top: 40px;
4405  margin-bottom: 40px;
4406}
4407
4408.landing-breakout img {
4409  margin-bottom: 20px;
4410}
4411
4412.landing-partners img {
4413  margin-bottom: 20px;
4414}
4415
4416.landing-breakout p {
4417  padding: 0 23px;
4418}
4419
4420.landing-breakout.landing-partners img {
4421  margin-bottom: 20px;
4422}
4423
4424/**
4425 * ANIMATION
4426 */
4427
4428@-webkit-keyframes pulse-opacity {
4429  0% {
4430    opacity: .5;
4431  }
4432  20% {
4433    opacity: .5;
4434  }
4435  40% {
4436    opacity: 1;
4437  }
4438  60% {
4439    opacity: .5;
4440  }
4441  80% {
4442    opacity: 1;
4443  }
4444  100% {
4445    opacity: .5;
4446  }
4447}
4448
4449
4450/******************
4451Styles for d.a.c/index:
4452*******************/
4453
4454
4455
4456/* Generic full screen carousel styling to be used across pages. */
4457.fullscreen-carousel {
4458  margin: 0 -20px;
4459  overflow: hidden;
4460  position: relative;
4461}
4462
4463.fullscreen-carousel-content {
4464  width: 100%;
4465  height: 100%;
4466  position: relative;
4467  display: table; /* For vertical centering */
4468}
4469
4470.fullscreen-carousel .vcenter {
4471  display: table-cell;
4472  vertical-align: middle;
4473  position: relative;
4474}
4475
4476.fullscreen-carousel .vcenter > div {
4477  margin: 10px auto;
4478}
4479
4480/* Styles for the full-bleed hero image type. */
4481.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
4482  color: #fff;
4483}
4484
4485.fullscreen-carousel .hero h1 {
4486  font-weight: 300;
4487  font-size: 60px;
4488  line-height: 68px;
4489  letter-spacing: -1px;
4490  padding-top: 0;
4491}
4492
4493.fullscreen-carousel .hero p {
4494  font-weight: 300;
4495  font-size: 18px;
4496  line-height: 24px;
4497}
4498
4499.fullscreen-carousel .hero .hero-bg {
4500  background-size: cover;
4501  width: 100%;
4502  height: 100%;
4503  position: absolute;
4504  left: 0px;
4505  top: 0px;
4506}
4507
4508
4509/* Full screen carousel styling for the resource flow layout type of content */
4510.fullscreen-carousel .resource-flow-layout:after {
4511  height: 0; /* Dont know why this is set at 10 in default.css */
4512}
4513
4514.fullscreen-carousel .resource-flow-layout {
4515  margin-bottom: 20px;
4516}
4517
4518
4519
4520/* Generic Tab carousel styling to be used across multiple pages. */
4521
4522.tab-carousel .tab-nav {
4523  list-style: none;
4524  position: relative;
4525  text-align: center;
4526}
4527
4528.tab-carousel .tab-nav li {
4529  display: inline-block;
4530  font-size: 22px;
4531  font-weight: 400;
4532  line-height: 50px;
4533  list-style: none;
4534  margin: 0;
4535  padding: 0 25px;
4536  position: relative;
4537}
4538
4539.tab-carousel .tab-nav li a,
4540.tab-carousel .tab-nav li a:hover {
4541  color: #333 !important;
4542  padding: 10px 10px 13px 10px;
4543  position: relative;
4544  z-index: 1000;
4545}
4546
4547.tab-carousel .tab-nav li:after {
4548  background: #ddd;
4549  bottom: 0;
4550  content: '';
4551  height: 4px;
4552  left: 0;
4553  position: absolute;
4554  width: 100%;
4555  z-index: 0;
4556}
4557
4558.tab-carousel .tab-nav .highlight {
4559  position: absolute;
4560  height: 4px;
4561  width: 100px;
4562  bottom: 0;
4563  background: #33b5e5;
4564}
4565
4566.tab-carousel .tab-carousel-content {
4567  position: relative;
4568  overflow: hidden;
4569  white-space: nowrap;
4570}
4571
4572.tab-carousel .tab-carousel-content [data-tab] {
4573  display: inline-block;
4574  white-space: normal;
4575}
4576
4577
4578
4579/*
4580  Resource styling for the tab carousel. The tab carousel contains either
4581  a 3 column layout of resources or a single full-width resource. The
4582  latter has the 18x12 class applied to it and can be styled differently
4583  that way.
4584*/
4585
4586.tab-carousel .resource .image {
4587  width: 100%;
4588  height: 250px;
4589  background-repeat: no-repeat;
4590  background-size: contain;
4591  background-position: 50% 50%;
4592}
4593
4594.tab-carousel .resource .info .title {
4595  font-size: 18px;
4596  line-height: 24px;
4597}
4598
4599.tab-carousel .resource .info .summary,
4600.tab-carousel .resource .info .cta {
4601  line-height: 24px;
4602  font-size: 16px;
4603}
4604
4605.tab-carousel .resource-card-18x12 {
4606  position: relative;
4607  padding-left: 450px;
4608  box-sizing: border-box;
4609  display: table-cell;
4610  vertical-align: middle;
4611}
4612
4613.tab-carousel .resource-card-18x12 .image {
4614  position: absolute;
4615  width: 420px;
4616  height: 100%;
4617  left: 0;
4618  top: 0;
4619}
4620
4621.tab-carousel .resource-card-18x12 .info {
4622  display: inline-block;
4623}
4624
4625.tab-carousel .resource-card-18x12 .info .title {
4626  margin-bottom: 26px;
4627}
4628
4629/*
4630  Specific styles for new home page layout of the carousels.
4631*/
4632
4633/* Big blue button */
4634a.home-new-cta-btn,
4635.home-new-carousel-1 .resource-card-18x6 .cta {
4636  white-space: nowrap;
4637  display: inline-block;
4638  padding: 14px 32px;
4639  font-size: 18px;
4640  font-weight: 500;
4641  line-height: 24px;
4642  cursor: pointer;
4643  background: #33b5e6;
4644  border-radius: 4px;
4645  margin-top: 20px;
4646  color: #fff;
4647  transition: 0.2s background-color ease-in-out;
4648}
4649
4650.home-new-carousel-1 .resource-card-18x6 .cta:after {
4651  display: none; /* Hide the entity for this button */
4652}
4653
4654a.home-new-cta-btn:hover,
4655.home-new-carousel-1 .resource-card-18x6 .cta:hover {
4656  color: #fff !important;
4657  background: #2d9fca;
4658}
4659
4660.home-new-carousel-1 .resource-card-18x6 .cta {
4661  position: absolute;
4662  bottom: 20px;
4663  left: 16px;
4664}
4665
4666/* Fullscreen carousel. */
4667.home-new-carousel-1 {
4668  max-height: 700px; /* Set max height so doesn't get too long */
4669}
4670
4671.home-new-carousel-1 .fullscreen-carousel-content {
4672  min-height: 450px;  /* Set min height for all content */
4673}
4674
4675.home-new-carousel-1 .hero {
4676  background: #000;
4677}
4678
4679.home-new-carousel-1 .hero-bg {
4680  background-image: url(/home-new/images/hero.jpg);
4681  background-position: right center;
4682  opacity: 0.85;
4683}
4684
4685/*
4686  Styling for special top card of full screen layout resource layout.
4687  We need to specifically style the 18x6 card to adjust its size and layout,
4688  since it's not a standard card, not sure if this is unique to the home page
4689  layout or should be namespaced within the fullscreen-carousel container.
4690*/
4691.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
4692  height: 320px;
4693  background-color:#F9F9F9;
4694  border-radius: 0px;
4695  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
4696
4697}
4698
4699.home-new-carousel-1 .resource-card-18x6 .card-bg {
4700  width: 636px;
4701  height: 100%;
4702}
4703
4704.home-new-carousel-1 .resource-card-18x6 .card-info {
4705  right: 0px;
4706  left: 636px;
4707  height: 100%;
4708  top: 0px;
4709  padding: 15px 22px;
4710}
4711
4712.home-new-carousel-1 .resource-card-18x6 .card-info .util {
4713  display: none;
4714}
4715
4716.home-new-carousel-1 .resource-card-18x6 .card-info .title {
4717  font-size: 20px;
4718  font-weight: 500;
4719  margin-top: 15px;
4720  margin-bottom: 15px;
4721}
4722
4723.home-new-carousel-1 .resource-card-18x6 .card-info .text {
4724  font-size: 15px;
4725  line-height: 21px;
4726}
4727
4728
4729/* Tabbed carousel. */
4730.home-new-carousel-2 {
4731  margin: 35px auto 100px auto;
4732}
4733
4734.home-new-carousel-2 h1 {
4735  font-size: 47px;
4736  font-weight: 100;
4737  line-height: 54px;
4738  text-align: center;
4739}
4740
4741.annotation-message {
4742    display: block;
4743    font-style: italic;
4744    color: #F80;
4745}
4746
4747
4748
4749/* Helpouts widget */
4750.resource-card-6x2.helpouts-card {
4751  width: 255px;
4752  height: 40px;
4753  position:absolute;
4754  z-index:999;
4755  top:-8px;
4756  right:1px;
4757}
4758
4759.resource-card-6x2.helpouts-card > .card-info {
4760  left:35px;
4761  height:35px;
4762  padding:4px 8px 4px 0;
4763}
4764
4765.resource-card-6x2.helpouts-card > .card-info .helpouts-description {
4766  display:block;
4767  overflow:visible;
4768  font-size:12px;
4769  line-height:12px;
4770  text-align:right;
4771  color:#666;
4772}
4773
4774.helpouts-description .link-color {
4775  text-transform: uppercase;
4776}
4777
4778.resource-card-6x2 > .card-bg.helpouts-card-bg {
4779  width:35px;
4780  height:35px;
4781  margin:2px 0 0 0;
4782  background-image: url(../images/styles/helpouts-logo-35_2x.png);
4783  background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x);
4784}
4785
4786.resource-card-6x2 > .card-bg.helpouts-card-bg:after {
4787  display:none;
4788}
4789
4790#tb li:before, #qv li:before {
4791  background-position: 0px -196px;
4792  height: 24px;
4793  width: 24px;
4794  content: '';
4795  left: -8px;
4796  opacity: .7;
4797  position: absolute;
4798  top: -4px;
4799}
4800
4801/* CHANGE EXISTING SELECTOR FOR ANDROID M HERO ONLY
4802   REMOVE THE BELOW STYLES WHEN THE ANDROID M CAROUSEL
4803   GRAPHIC ON THE MAIN LANDING IS TAKEN DOWN */
4804.dac-hero.mprev {
4805  background-color: #fff;
4806  background-position: 50% 53%;
4807  background-size: cover;
4808  background-image: url(../../assets/images/home/android_m_hero_1200.jpg);
4809  box-sizing: border-box;
4810  font-size: 16px;
4811  min-height: 550px;
4812  padding-top: 88px;
4813}
4814.dac-hero.dac-darken.mprev::before {
4815  background: rgba(0, 0, 0, 0.3);
4816  bottom: 0;
4817  content: '';
4818  display: block;
4819  left: 0;
4820  position: absolute;
4821  right: 0;
4822  top: 0;
4823}
4824
4825.dac-hero.dac-darken.mprev::before {
4826  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05), #000 950px);
4827  background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0.05), #000 950px);
4828}
4829
4830@media (max-width: 719px) {
4831  .dac-hero.dac-darken.mprev {
4832    background-size: auto 600px;
4833    background-position: 55% 0;
4834    background-repeat: no-repeat;
4835  }
4836
4837  .dac-hero-figure.mprev {
4838    height: 10px;
4839    margin: 15px 0;
4840  }
4841}
4842
4843@media (max-width: 719px) {
4844  .dac-hero.dac-darken.mprev {
4845    background-size: auto 600px;
4846    background-position: 55% 0;
4847    background-repeat: no-repeat;
4848  }
4849
4850  .dac-hero-figure.mprev {
4851    height: 10px;
4852    margin: 15px 0;
4853  }
4854}
4855
4856@media (max-width: 1200px) {
4857  .dac-hero.dac-darken.mprev {
4858    background-size: auto 700px;
4859    background-position: 55% 0;
4860    background-repeat: no-repeat;
4861  }
4862
4863  .dac-hero-cta.mprev {
4864    white-space:nowrap;
4865  }
4866}
4867
4868@charset "UTF-8";
4869/**
4870 * Fades out an element.
4871 * Applies visibility hidden when the transition is finished.
4872 *
4873 * Use opacity: 1; to show the element.
4874 */
4875.dac-visible-mobile-block, .dac-mobile-only,
4876.dac-visible-mobile-inline,
4877.dac-visible-mobile-inline-block,
4878.dac-visible-tablet-block,
4879.dac-visible-tablet-inline,
4880.dac-visible-tablet-inline-block,
4881.dac-visible-desktop-block,
4882.dac-visible-desktop-inline,
4883.dac-visible-desktop-inline-block {
4884  display: none !important;
4885}
4886
4887@media (max-width: 719px) {
4888  .dac-hidden-mobile {
4889    display: none !important;
4890  }
4891
4892  .dac-visible-mobile-block, .dac-mobile-only {
4893    display: block !important;
4894  }
4895
4896  .dac-visible-mobile-inline {
4897    display: inline !important;
4898  }
4899
4900  .dac-visible-mobile-inline-block {
4901    display: inline-block !important;
4902  }
4903}
4904
4905@media (min-width: 720px) and (max-width: 979px) {
4906  .dac-hidden-tablet {
4907    display: none !important;
4908  }
4909
4910  .dac-visible-tablet-block {
4911    display: block !important;
4912  }
4913
4914  .dac-visible-tablet-inline {
4915    display: inline !important;
4916  }
4917
4918  .dac-visible-tablet-inline-block {
4919    display: inline-block !important;
4920  }
4921}
4922
4923@media (min-width: 980px) {
4924  .dac-hidden-desktop {
4925    display: none !important;
4926  }
4927
4928  .dac-visible-desktop-block {
4929    display: block !important;
4930  }
4931
4932  .dac-visible-desktop-inline {
4933    display: inline !important;
4934  }
4935
4936  .dac-visible-desktop-inline-block {
4937    display: inline-block !important;
4938  }
4939}
4940
4941.dac-offset-parent {
4942  position: relative !important;
4943}
4944
4945/**
4946 * Hide from browsers/screenreaders on all sizes.
4947 */
4948.dac-hidden {
4949  display: none !important;
4950}
4951
4952/**
4953 * Break strings when their length exceeds the width of their container.
4954 */
4955.dac-text-break {
4956  word-wrap: break-word !important;
4957}
4958
4959/**
4960 * Horizontal text alignment
4961 */
4962.dac-text-center {
4963  text-align: center !important;
4964}
4965
4966.dac-text-left {
4967  text-align: left !important;
4968}
4969
4970.dac-text-right {
4971  text-align: right !important;
4972}
4973
4974/**
4975 * Prevent whitespace wrapping
4976 */
4977.dac-text-no-wrap {
4978  white-space: nowrap !important;
4979}
4980
4981/**
4982 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
4983 */
4984.dac-text-truncate {
4985  max-width: 100%;
4986  overflow: hidden !important;
4987  text-overflow: ellipsis !important;
4988  white-space: nowrap !important;
4989  word-wrap: normal !important;
4990}
4991
4992/**
4993 * Floats
4994 */
4995.dac-float-left {
4996  float: left !important;
4997}
4998
4999.dac-float-right {
5000  float: right !important;
5001}
5002
5003/**
5004 * New block formatting context
5005 *
5006 * This affords some useful properties to the element. It won't wrap under
5007 * floats. Will also contain any floated children.
5008 * N.B. This will clip overflow. Use the alternative method below if this is
5009 * problematic.
5010 */
5011.dac-nbfc {
5012  overflow: hidden !important; }
5013
5014/**
5015 * New block formatting context (alternative)
5016 *
5017 * Alternative method when overflow must not be clipped.
5018 *
5019 * N.B. This breaks down in some browsers when elements within this element
5020 * exceed its width.
5021 */
5022.dac-nbfc-alt {
5023  display: table-cell !important;
5024  width: 10000px !important; }
5025
5026/* New CSS */
5027/************ RESOURCE CARDS ******************/
5028/* Basic card-styling with shadow */
5029.resource-card {
5030  background: #fff;
5031  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
5032  display: block;
5033  position: relative; }
5034
5035/* Play button is only visible on 6by6 cards */
5036.play-button {
5037  background-color: #000;
5038  border-radius: 50%;
5039  box-sizing: border-box;
5040  display: none;
5041  height: 70px;
5042  line-height: 65px;
5043  padding-left: 4px;
5044  position: absolute;
5045  opacity: .6;
5046  text-align: center;
5047  -webkit-transition: opacity .5s;
5048          transition: opacity .5s;
5049  width: 70px;
5050  z-index: 1; }
5051  .resource-card-6x2 .play-button {
5052    display: block;
5053    left: 10px;
5054    top: 15px;
5055    -webkit-transform: scale(0.73);
5056        -ms-transform: scale(0.73);
5057            transform: scale(0.73); }
5058  .resource-card-6x6 .play-button {
5059    display: block;
5060    left: 50%;
5061    margin-left: -35px;
5062    top: 50px; }
5063
5064/* Styling for background image including tinting and section icons in stacks */
5065.card-bg {
5066  bottom: 131px;
5067  display: block;
5068  position: absolute;
5069  vertical-align: top;
5070  width: 100%;
5071  left: 0;
5072  top: 0;
5073  background-size: cover;
5074  background-repeat: no-repeat;
5075  background-position: center;
5076  background-image: url(../images/resource-card-default-android.jpg); }
5077  .card-bg:after {
5078    content: "";
5079    display: block;
5080    height: 100%;
5081    width: 100%;
5082    opacity: 1;
5083    background: rgba(0, 0, 0, 0.05);
5084    -webkit-transition: opacity 0.5s;
5085            transition: opacity 0.5s; }
5086  .static .card-bg:after {
5087    display: none; }
5088  .card-bg .card-section-icon {
5089    position: absolute;
5090    top: 50%;
5091    width: 100%;
5092    margin-top: -35px;
5093    text-align: center;
5094    padding-top: 65px;
5095    z-index: 100; }
5096    .card-bg .card-section-icon .icon {
5097      position: absolute;
5098      left: 50%;
5099      margin-left: -28px;
5100      top: 0px;
5101      width: 56px;
5102      height: 56px;
5103      background-repeat: no-repeat;
5104      background-position: 50% 50%;
5105      background-image: url(../images/stack-icon.png); }
5106    .card-bg .card-section-icon .section {
5107      text-transform: uppercase;
5108      color: white;
5109      font-size: 14px; }
5110
5111.card-info {
5112  position: absolute;
5113  box-sizing: border-box;
5114  height: 131px;
5115  right: 0;
5116  bottom: 0;
5117  left: 0;
5118  overflow: hidden;
5119  background: #fefefe;
5120  padding: 6px 12px; }
5121  .card-info .section {
5122    color: #898989;
5123    font-size: 11px;
5124    font-weight: 700;
5125    letter-spacing: .3px;
5126    line-height: 20px;
5127    text-transform: uppercase; }
5128  .card-info .title {
5129    color: #333;
5130    font-size: 18px;
5131    font-weight: 500;
5132    line-height: 23px;
5133    margin-bottom: 7px;
5134    max-height: 46px;
5135    overflow: hidden;
5136    text-overflow: ellipsis;
5137    white-space: normal; }
5138  .card-info .description {
5139    overflow: hidden; }
5140    .card-info .description .text {
5141      color: #666;
5142      font-size: 14px;
5143      height: 60px;
5144      line-height: 20px;
5145      overflow: hidden;
5146      width: 100%; }
5147    .card-info .description .util {
5148      position: absolute;
5149      right: 5px;
5150      bottom: 70px;
5151      opacity: 0;
5152      -webkit-transition: opacity 0.5s;
5153              transition: opacity 0.5s; }
5154  .card-info.empty-desc .title {
5155    white-space: normal;
5156    overflow: visible; }
5157  .card-info.empty-desc .description {
5158    display: none; }
5159
5160/* Truncate card summaries at bounding box and
5161 * and apply ellipsis at lower right */
5162.ellipsis {
5163  overflow: hidden;
5164  float: right;
5165  line-height: 15px;
5166  width: 100%; }
5167  .ellipsis:before {
5168    content: "";
5169    float: left;
5170    width: 5px;
5171    height: 100%; }
5172  .ellipsis > *:first-child.text {
5173    float: right;
5174    width: 100% !important;
5175    margin-left: -5px; }
5176  .ellipsis:after {
5177    content: "\02026";
5178    height: 17px;
5179    padding-bottom: 4px;
5180    box-sizing: content-box;
5181    float: right;
5182    position: relative;
5183    top: -16px;
5184    left: 100%;
5185    width: 4em;
5186    margin-left: -4em;
5187    padding-right: 5px;
5188    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5189    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white);
5190    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); }
5191  .ellipsis:after {
5192    font-style: normal;
5193    color: #aaa;
5194    font-size: 13px;
5195    text-align: right; }
5196
5197.resource-card:hover {
5198  cursor: pointer; }
5199  .static .resource-card:hover {
5200    cursor: auto; }
5201  .resource-card:hover .card-bg:after {
5202    opacity: 0; }
5203  .resource-card:hover .play-button {
5204    opacity: .3; }
5205  .resource-card:hover .card-info .description .util {
5206    opacity: 1; }
5207
5208/* Carousel Layout */
5209/* Carousel styles for landing page */
5210.resource-carousel-layout {
5211  height: 531px;
5212  margin: 20px 0 20px 0;
5213  padding: 0 !important;
5214  position: relative;
5215  overflow: hidden; }
5216  .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5217    display: none; }
5218  .resource-carousel-layout .pagination {
5219    bottom: 97px;
5220    left: auto;
5221    padding-right: 10px;
5222    right: 0;
5223    text-align: right;
5224    width: 16.66666667%; }
5225    .resource-carousel-layout .pagination ul li {
5226      text-indent: 8000px; }
5227  .resource-carousel-layout .frame li {
5228    position: relative; }
5229    .resource-carousel-layout .frame li .card-bg {
5230      bottom: 131px; }
5231    .resource-carousel-layout .frame li .card-info {
5232      height: 131px;
5233      padding: 6px 12px;
5234      top: auto; }
5235      .resource-carousel-layout .frame li .card-info .title {
5236        font-size: 28px;
5237        font-weight: 400;
5238        line-height: 32px; }
5239      .resource-carousel-layout .frame li .card-info .description .text {
5240        height: 40px; }
5241      .resource-carousel-layout .frame li .card-info .description .util {
5242        bottom: 97px;
5243        right: 4px; }
5244
5245/* Stack Layout */
5246.resource-stack-layout {
5247  display: inline-block;
5248  padding: 0; }
5249  .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5250    /*text-transform: uppercase;*/
5251    color: #898989;
5252    font-size: 17px;
5253    line-height: 23px;
5254    margin-bottom: 6px; }
5255  .resource-stack-layout .section-card {
5256    height: 284px; }
5257    .resource-stack-layout .section-card > .card-bg {
5258      height: 192px; }
5259    .resource-stack-layout .section-card > .card-info {
5260      padding: 4px 12px 6px 12px;
5261      top: 192px; }
5262      .resource-stack-layout .section-card > .card-info .section {
5263        display: none; }
5264      .resource-stack-layout .section-card > .card-info .title {
5265        font-size: 17px;
5266        border-bottom: 1px solid #959595;
5267        padding-bottom: 0px; }
5268      .resource-stack-layout .section-card > .card-info .description {
5269        font-size: 13px;
5270        line-height: 15px; }
5271        .resource-stack-layout .section-card > .card-info .description .text {
5272          height: 30px; }
5273  .resource-stack-layout .related-card {
5274    height: 90px; }
5275    .resource-stack-layout .related-card > .card-bg {
5276      left: 0;
5277      top: 0;
5278      width: 90px;
5279      height: 100%;
5280      position: absolute;
5281      display: block; }
5282    .resource-stack-layout .related-card > .card-info {
5283      left: 90px;
5284      padding: 4px 12px 4px 12px; }
5285      .resource-stack-layout .related-card > .card-info .section {
5286        font-size: 12px;
5287        margin-bottom: 1px;
5288        display: none; }
5289      .resource-stack-layout .related-card > .card-info .title {
5290        font-size: 16px;
5291        margin-bottom: -2px;
5292        white-space: normal;
5293        overflow: visible;
5294        text-overflow: ellipsis; }
5295        .resource-stack-layout .related-card > .card-info .title:after {
5296          content: url(../images/link-out.png);
5297          display: block; }
5298      .resource-stack-layout .related-card > .card-info .description {
5299        display: none; }
5300  .resource-stack-layout .section-card-menu {
5301    /* Flexible height */
5302    display: block;
5303    height: auto;
5304    width: auto; }
5305    .resource-stack-layout .section-card-menu .card-bg {
5306      height: 155px;
5307      /* Flexible height */
5308      position: relative;
5309      display: inline-block;
5310      vertical-align: top; }
5311    .resource-stack-layout .section-card-menu .card-info {
5312      padding: 4px 12px 0px 12px;
5313      /* Flexible height */
5314      position: relative;
5315      left: auto;
5316      top: auto;
5317      right: auto;
5318      bottom: auto; }
5319      .resource-stack-layout .section-card-menu .card-info ul {
5320        list-style: none;
5321        margin: 0; }
5322        .resource-stack-layout .section-card-menu .card-info ul li {
5323          list-style: none;
5324          margin: 0;
5325          padding: 15px 0;
5326          border-top-width: 1px;
5327          border-top-style: solid;
5328          border-top-color: #959595; }
5329          .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 {
5330            color: #333 !important; }
5331          .resource-stack-layout .section-card-menu .card-info ul li:first-child {
5332            border-top: none; }
5333          .resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5334            opacity: 1;
5335            -webkit-transition: opacity 0.5s;
5336                    transition: opacity 0.5s; }
5337          .resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5338            max-height: 30px;
5339            opacity: 1;
5340            -webkit-transition: max-height 0.5s, opacity 1s;
5341                    transition: max-height 0.5s, opacity 1s; }
5342      .resource-stack-layout .section-card-menu .card-info .title {
5343        font-size: 16px;
5344        margin-bottom: -2px;
5345        position: relative; }
5346        .resource-stack-layout .section-card-menu .card-info .title:after {
5347          background: url(../images/stack-arrow-right.png);
5348          content: '';
5349          opacity: 0;
5350          -webkit-transition: opacity 0.25s;
5351                  transition: opacity 0.25s;
5352          position: absolute;
5353          right: 0px;
5354          top: 3px;
5355          width: 10px;
5356          height: 15px; }
5357      .resource-stack-layout .section-card-menu .card-info .title.more {
5358        text-transform: uppercase;
5359        color: #898989;
5360        display: inline-block; }
5361        .resource-stack-layout .section-card-menu .card-info .title.more:after {
5362          background: url(../images/stack-arrow-right.png);
5363          content: '';
5364          display: block;
5365          position: absolute;
5366          right: -20px;
5367          top: 3px;
5368          width: 10px;
5369          height: 15px; }
5370      .resource-stack-layout .section-card-menu .card-info .description {
5371        max-height: 0px;
5372        opacity: 0;
5373        overflow: hidden;
5374        font-size: 13px;
5375        line-height: 15px;
5376        /* Hover off */
5377        -webkit-transition: max-height 0.5s, opacity 0.5s;
5378                transition: max-height 0.5s, opacity 0.5s; }
5379        .resource-stack-layout .section-card-menu .card-info .description .text {
5380          height: 30px; }
5381  .resource-stack-layout:after {
5382    content: ".";
5383    display: block;
5384    height: 0;
5385    clear: both;
5386    visibility: hidden; }
5387
5388.resource-card, .resource-card-stack {
5389  margin-bottom: 20px; }
5390
5391.resource-card-row-stack-last {
5392  margin-bottom: 0px !important; }
5393
5394.resource-card-col-stack-last {
5395  margin-bottom: 0px !important; }
5396
5397.resource-card-3x6 {
5398  height: 300px; }
5399
5400.resource-card-3x12 {
5401  height: 620px; }
5402
5403.resource-card-3x18 {
5404  height: 940px; }
5405
5406.resource-card-6x6 {
5407  height: 300px; }
5408
5409.resource-card-6x12 {
5410  height: 620px; }
5411
5412.resource-card-6x18 {
5413  height: 940px; }
5414
5415.resource-card-9x6 {
5416  height: 300px; }
5417
5418.resource-card-9x12 {
5419  height: 620px; }
5420
5421.resource-card-9x18 {
5422  height: 940px; }
5423
5424.resource-card-12x6 {
5425  height: 300px; }
5426
5427.resource-card-12x12 {
5428  height: 620px; }
5429
5430.resource-card-12x18 {
5431  height: 940px; }
5432
5433.resource-card-15x6 {
5434  height: 300px; }
5435
5436.resource-card-15x12 {
5437  height: 620px; }
5438
5439.resource-card-15x18 {
5440  height: 940px; }
5441
5442.resource-card-18x6 {
5443  height: 300px; }
5444
5445.resource-card-18x12 {
5446  height: 620px; }
5447
5448.resource-card-18x18 {
5449  height: 940px; }
5450
5451.resource-card-3x2 {
5452  height: 100px; }
5453
5454.resource-card-3x2x3 {
5455  height: 90px;
5456  margin-bottom: 15px; }
5457
5458.resource-card-3x3 {
5459  height: 150px; }
5460
5461.resource-card-3x3x2 {
5462  height: 142px;
5463  margin-bottom: 16px; }
5464
5465.resource-card-6x2 {
5466  height: 100px; }
5467
5468.resource-card-6x2x3 {
5469  height: 90px;
5470  margin-bottom: 15px; }
5471
5472.resource-card-6x3 {
5473  height: 150px; }
5474
5475.resource-card-6x3x2 {
5476  height: 142px;
5477  margin-bottom: 16px; }
5478
5479.resource-card-9x2 {
5480  height: 100px; }
5481
5482.resource-card-9x2x3 {
5483  height: 90px;
5484  margin-bottom: 15px; }
5485
5486.resource-card-9x3 {
5487  height: 150px; }
5488
5489.resource-card-9x3x2 {
5490  height: 142px;
5491  margin-bottom: 16px; }
5492
5493.resource-card-12x2 {
5494  height: 100px; }
5495
5496.resource-card-12x2x3 {
5497  height: 90px;
5498  margin-bottom: 15px; }
5499
5500.resource-card-12x3 {
5501  height: 150px; }
5502
5503.resource-card-12x3x2 {
5504  height: 142px;
5505  margin-bottom: 16px; }
5506
5507.resource-card-15x2 {
5508  height: 100px; }
5509
5510.resource-card-15x2x3 {
5511  height: 90px;
5512  margin-bottom: 15px; }
5513
5514.resource-card-15x3 {
5515  height: 150px; }
5516
5517.resource-card-15x3x2 {
5518  height: 142px;
5519  margin-bottom: 16px; }
5520
5521.resource-card-18x2 {
5522  height: 100px; }
5523
5524.resource-card-18x2x3 {
5525  height: 90px;
5526  margin-bottom: 15px; }
5527
5528.resource-card-18x3 {
5529  height: 150px; }
5530
5531.resource-card-18x3x2 {
5532  height: 142px;
5533  margin-bottom: 16px; }
5534
5535/*
5536  The following are styles for cards in the flowlayout above, styled by the number of rows they span
5537*/
5538/* Single row, 2 column items. */
5539.resource-card-9x6 {
5540  height: 390px; }
5541
5542/* Double row, 1 column items. Eg full width video thumbnails. */
5543.resource-card-18x12 {
5544  height: 558px; }
5545
5546/* 1/3 row items */
5547.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 {
5548  left: 0;
5549  top: 0;
5550  width: 90px;
5551  height: 100%;
5552  position: absolute;
5553  display: block; }
5554
5555.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 {
5556  height: 100%;
5557  left: 90px;
5558  padding: 6px 12px;
5559  overflow: hidden; }
5560  .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 {
5561    max-height: 69px;
5562    white-space: normal; }
5563  .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 {
5564    display: none; }
5565  .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 {
5566    height: auto; }
5567
5568/* Override to show the description instead of the content section */
5569.no-section .resource-card-3x2 > .card-info .section,
5570.no-section .resource-card-6x2 > .card-info .section {
5571  display: none; }
5572
5573.no-section .resource-card-3x2 > .card-info .description,
5574.no-section .resource-card-6x2 > .card-info .description {
5575  display: block; }
5576
5577/* 1/2 row items */
5578.resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 {
5579  height: 160px; }
5580  .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 {
5581    left: 0;
5582    top: 0;
5583    width: 90px;
5584    height: 100%;
5585    position: absolute;
5586    display: block; }
5587  .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 {
5588    height: 100%;
5589    left: 90px;
5590    padding: 6px 12px; }
5591    .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 {
5592      display: none; }
5593    .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 {
5594      max-height: 92px;
5595      white-space: normal; }
5596    .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 {
5597      height: auto; }
5598    .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 {
5599      display: none; }
5600
5601/* placement of plusone */
5602.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 {
5603  bottom: 2px; }
5604
5605.resource-card-18x12 > .card-info .description .util {
5606  bottom: 2px; }
5607
5608/* Overrides for col-16 6x6 cards linking to local content on landing pages.
5609   Suppresses "section". */
5610.landing .card-info .section {
5611  display: none; }
5612
5613/*
5614  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
5615*/
5616.resource-stack-layout.col-16 {
5617  margin: 0 -14px 0 0;
5618  width: 954px; }
5619  .resource-stack-layout.col-16 .resource-card-stack {
5620    margin: 0 14px 0 0;
5621    width: 304px; }
5622
5623/* Example of card menu tinting */
5624.resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after {
5625  background: rgba(126, 55, 148, 0.4) !important; }
5626
5627.resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon {
5628  background-color: #7e3794 !important; }
5629
5630.resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li {
5631  border-top-color: #7e3794 !important; }
5632
5633/* tinting for stacks */
5634div.jd-descr > .resource-widget[data-section=distribute\/tools]
5635.section-card-menu .card-info ul li {
5636  border-top-color: #7e3794 !important; }
5637
5638/* Show more/less */
5639.dac-show-more,
5640.dac-show-less {
5641  display: none !important; }
5642
5643.dac-has-more .dac-show-more {
5644  display: inline-block !important; }
5645
5646.dac-has-less .dac-show-less {
5647  display: inline-block !important; }
5648
5649.dac-fab, .dac-button-social, .button, .landing-button,
5650.dac-button {
5651  background: transparent;
5652  border: 0;
5653  border-radius: 3px;
5654  box-sizing: border-box;
5655  color: currentColor;
5656  cursor: pointer;
5657  display: inline-block;
5658  font-weight: 500;
5659  font-size: 14px;
5660  font-style: inherit;
5661  font-variant: inherit;
5662  font-family: inherit;
5663  letter-spacing: .5px;
5664  line-height: 24px;
5665  margin: 6px 16px 6px 0;
5666  min-width: 88px;
5667  outline: 0;
5668  padding: 6px 12px;
5669  position: relative;
5670  text-align: center;
5671  text-decoration: none;
5672  text-transform: uppercase;
5673  -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);
5674          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);
5675  -webkit-user-select: none;
5676     -moz-user-select: none;
5677      -ms-user-select: none;
5678          user-select: none;
5679  white-space: nowrap; }
5680
5681.button, .landing-button,
5682.dac-button.dac-raised {
5683  background-color: #FAFAFA;
5684  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); }
5685
5686.dac-button.dac-raised.dac-primary, .landing-secondary, .button {
5687  background-color: #039bef; }
5688  .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover {
5689    background-color: #0288d1; }
5690  .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active {
5691    background-color: #0277bd; }
5692  .dac-button.dac-raised.dac-primary.disabled, .button.disabled {
5693    background-color: #bbb; }
5694
5695.dac-button.dac-raised.dac-red, .landing-primary {
5696  background-color: #bf3722; }
5697  .dac-button.dac-raised.dac-red:hover, .landing-primary:hover {
5698    background-color: #9c2d1c; }
5699  .dac-button.dac-raised.dac-red:active, .landing-primary:active {
5700    background-color: #822517; }
5701
5702.dac-button.dac-raised.dac-green, .landing-button.green {
5703  background-color: #90c653; }
5704  .dac-button.dac-raised.dac-green:hover, .landing-button.green:hover {
5705    background-color: #79b03b; }
5706  .dac-button.dac-raised.dac-green:active, .landing-button.green:active {
5707    background-color: #699933; }
5708
5709.dac-button.dac-raised.dac-primary, .landing-secondary, .button,
5710.dac-button.dac-raised.dac-red,
5711.landing-primary,
5712.dac-button.dac-raised.dac-green,
5713.landing-button.green {
5714  color: #fff; }
5715
5716.dac-button.dac-large, .landing-button {
5717  padding: 12px 24px; }
5718
5719.dac-fab, .dac-button-social {
5720  background: #fff;
5721  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
5722  border-radius: 50%;
5723  height: 36px;
5724  line-height: 36px;
5725  margin: 0;
5726  min-width: 0;
5727  overflow: hidden;
5728  padding: 0;
5729  vertical-align: middle;
5730  width: 36px; }
5731  .dac-fab:hover, .dac-button-social:hover,
5732  a:hover > .dac-fab,
5733  a:hover > .dac-button-social {
5734    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); }
5735  .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 {
5736    margin-top: -2px; }
5737  .dac-fab.dac-primary, .dac-primary.dac-button-social {
5738    background: #00c7a0; }
5739  .dac-fab.dac-large, .dac-large.dac-button-social {
5740    height: 54px;
5741    line-height: 54px;
5742    width: 54px; }
5743
5744.dac-button-social {
5745  background: #ccc;
5746  box-shadow: none;
5747  position: relative;
5748  overflow: hidden; }
5749  .dac-button-social::after {
5750    background: rgba(0, 0, 0, 0.2);
5751    border-radius: 50%;
5752    bottom: 0;
5753    content: '';
5754    display: block;
5755    left: 0;
5756    opacity: 0;
5757    position: absolute;
5758    right: 0;
5759    top: 0;
5760    -webkit-transition: opacity .3s;
5761            transition: opacity .3s; }
5762  .dac-button-social:hover {
5763    box-shadow: none; }
5764  .dac-button-social:active::after {
5765    opacity: 1; }
5766  .dac-button-social:focus.dac-rss, .dac-button-social:hover.dac-rss {
5767    background: #ff9800; }
5768  .dac-button-social:focus.dac-youtube, .dac-button-social:hover.dac-youtube {
5769    background: #f44336; }
5770  .dac-button-social:focus.dac-gplus, .dac-button-social:hover.dac-gplus {
5771    background: #f44336; }
5772  .dac-button-social:focus.dac-twitter, .dac-button-social:hover.dac-twitter {
5773    background: #55acee; }
5774
5775.dac-action {
5776  display: inline-block;
5777  margin: 0 16px; }
5778  .dac-action-link {
5779    color: inherit;
5780    font-size: 24px;
5781    font-weight: 300;
5782    line-height: 50px;
5783    -webkit-transition: opacity .3s;
5784            transition: opacity .3s; }
5785    .dac-action-link:hover {
5786      color: inherit;
5787      opacity: .54; }
5788  .dac-action-sprite {
5789    margin-left: -12px;
5790    margin-right: -8px; }
5791  .dac-actions {
5792    list-style-type: none;
5793    margin: 0;
5794    padding-bottom: 24px;
5795    padding-top: 24px;
5796    text-align: center; }
5797    @media (max-width: 719px) {
5798      .dac-actions {
5799        text-align: left; } }
5800  @media (max-width: 719px) {
5801    .dac-action {
5802      display: block;
5803      margin: 0; } }
5804
5805.dac-scroll-button {
5806  height: 54px;
5807  line-height: 54px;
5808  margin: 0;
5809  position: absolute;
5810  right: 0;
5811  top: -27px;
5812  width: 54px;
5813  z-index: 1; }
5814  @media (max-width: 719px) {
5815    .dac-scroll-button {
5816      display: none; } }
5817
5818/* Footer component */
5819.dac-footer {
5820  background-color: #fff;
5821  border-top: 1px solid #f0f0f0;
5822  clear: both;
5823  color: #999;
5824  font-size: 12px;
5825  margin-top: 96px;
5826  padding-bottom: 20px;
5827  position: relative;
5828  /* Modifier for landing pages, to snuggle closer to sections. */ }
5829  .dac-footer a {
5830    color: #999; }
5831  .dac-footer p {
5832    margin: 7px 0 0; }
5833  .dac-footer-main {
5834    padding: 30px 0; }
5835  .dac-footer-reachout {
5836    text-align: right; }
5837  .dac-footer-contact, .dac-footer-social {
5838    display: inline-block; }
5839  .dac-footer .dac-footer-getnews,
5840  .dac-footer .dac-footer-contact-link {
5841    color: #000;
5842    cursor: pointer;
5843    font-size: 20px;
5844    font-weight: 300;
5845    margin: 8px 0;
5846    vertical-align: middle; }
5847  .dac-footer .dac-footer-contact-link,
5848  .dac-footer .dac-footer-social-link {
5849    margin-left: 16px;
5850    margin-right: 0; }
5851  .dac-footer-getnews > .dac-fab, .dac-footer-getnews > .dac-button-social {
5852    margin-left: 4px; }
5853  .dac-footer-separator {
5854    background: #f0f0f0;
5855    margin: 0 0 12px; }
5856  .dac-footer-links a + a:before {
5857    content: '|';
5858    cursor: default;
5859    margin: 0 10px 0 8px; }
5860  .dac-footer .locales {
5861    float: right;
5862    margin: 0; }
5863    .dac-footer .locales select {
5864      background-color: #f0f0f0;
5865      border-radius: 3px;
5866      font-size: 12px;
5867      height: auto;
5868      margin-top: -2px;
5869      padding: 8px 12px;
5870      width: 146px; }
5871  .dac-footer.dac-landing {
5872    margin-top: 0;
5873    border-top: 0; }
5874  @media (max-width: 719px) {
5875    .dac-footer-reachout {
5876      text-align: left; }
5877    .dac-footer-social {
5878      display: block; }
5879    .dac-footer-social-link, .dac-footer-contact-link {
5880      display: inline-block; }
5881    .dac-footer .dac-footer-contact-link,
5882    .dac-footer .dac-footer-social-link {
5883      margin-left: 0;
5884      margin-right: 16px; }
5885    .dac-footer .locales {
5886      display: block;
5887      float: none;
5888      margin-top: 15px; } }
5889
5890/* =============================================================================
5891   Columns
5892   ========================================================================== */
5893.wrap {
5894  margin: 0 auto;
5895  max-width: 940px;
5896  clear: both; }
5897  .dac-fullscreen-mode .wrap {
5898    max-width: none; }
5899
5900.dac-full-screen-mode .dac-search-open .wrap {
5901  max-width: 940px;
5902}
5903
5904.cols {
5905  margin-left: -10px;
5906  margin-right: -10px;
5907  /**
5908   * For modern browsers
5909   * 1. The space content is one way to avoid an Opera bug when the
5910   *    contenteditable attribute is included anywhere else in the document.
5911   *    Otherwise it causes space to appear at the top and bottom of elements
5912   *    that are clearfixed.
5913   * 2. The use of `table` rather than `block` is only necessary if using
5914   *    `:before` to contain the top-margins of child elements.
5915   */ }
5916  .cols:before, .cols:after {
5917    content: ' ';
5918    /* 1 */
5919    display: table;
5920    /* 2 */ }
5921  .cols:after {
5922    clear: both; }
5923
5924[class*=col-] {
5925  box-sizing: border-box;
5926  float: left;
5927  min-height: 1px;
5928  padding-left: 10px;
5929  padding-right: 10px;
5930  position: relative; }
5931
5932.col-1 {
5933  width: 6.25%; }
5934
5935.col-2 {
5936  width: 12.5%; }
5937
5938.col-3 {
5939  width: 18.75%; }
5940
5941.col-4 {
5942  width: 25%; }
5943
5944.col-5 {
5945  width: 31.25%; }
5946
5947.col-6 {
5948  width: 37.5%; }
5949
5950.col-7 {
5951  width: 43.75%; }
5952
5953.col-8 {
5954  width: 50%; }
5955
5956.col-9 {
5957  width: 56.25%; }
5958
5959.col-10 {
5960  width: 62.5%; }
5961
5962.col-11 {
5963  width: 68.75%; }
5964
5965.col-12 {
5966  width: 75%; }
5967
5968.col-13 {
5969  width: 81.25%; }
5970
5971.col-14 {
5972  width: 87.5%; }
5973
5974.col-15 {
5975  width: 93.75%; }
5976
5977.col-16 {
5978  width: 100%; }
5979
5980.col-13 .col-1 {
5981  width: 7.69230769%; }
5982
5983.col-13 .col-2 {
5984  width: 15.38461538%; }
5985
5986.col-13 .col-3 {
5987  width: 23.07692308%; }
5988
5989.col-13 .col-4 {
5990  width: 30.76923077%; }
5991
5992.col-13 .col-5 {
5993  width: 38.46153846%; }
5994
5995.col-13 .col-6 {
5996  width: 46.15384615%; }
5997
5998.col-13 .col-7 {
5999  width: 53.84615385%; }
6000
6001.col-13 .col-8 {
6002  width: 61.53846154%; }
6003
6004.col-13 .col-9 {
6005  width: 69.23076923%; }
6006
6007.col-13 .col-10 {
6008  width: 76.92307692%; }
6009
6010.col-13 .col-11 {
6011  width: 84.61538462%; }
6012
6013.col-13 .col-12 {
6014  width: 92.30769231%; }
6015
6016.col-13 .col-13 {
6017  width: 100%; }
6018
6019.col-12 .col-1 {
6020  width: 8.33333333%; }
6021
6022.col-12 .col-2 {
6023  width: 16.66666667%; }
6024
6025.col-12 .col-3 {
6026  width: 25%; }
6027
6028.col-12 .col-4 {
6029  width: 33.33333333%; }
6030
6031.col-12 .col-5 {
6032  width: 41.66666667%; }
6033
6034.col-12 .col-6 {
6035  width: 50%; }
6036
6037.col-12 .col-7 {
6038  width: 58.33333333%; }
6039
6040.col-12 .col-8 {
6041  width: 66.66666667%; }
6042
6043.col-12 .col-9 {
6044  width: 75%; }
6045
6046.col-12 .col-10 {
6047  width: 83.33333333%; }
6048
6049.col-12 .col-11 {
6050  width: 91.66666667%; }
6051
6052.col-12 .col-12 {
6053  width: 100%; }
6054
6055.col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 {
6056  width: 100%; }
6057
6058.col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 {
6059  width: 50%; }
6060
6061.col-1of3, .col-2of6, .col-4of12 {
6062  width: 33.33333333%; }
6063
6064.col-2of3, .col-4of6, .col-8of12 {
6065  width: 66.66666667%; }
6066
6067.col-1of4, .col-2of8, .col-3of12, .col-4of16 {
6068  width: 25%; }
6069
6070.col-3of4, .col-6of8, .col-9of12, .col-12of16 {
6071  width: 75%; }
6072
6073.col-1of5, .col-2of10 {
6074  width: 20%; }
6075
6076.col-2of5, .col-4of10 {
6077  width: 40%; }
6078
6079.col-3of5, .col-6of10 {
6080  width: 60%; }
6081
6082.col-4of5, .col-8of10 {
6083  width: 80%; }
6084
6085.col-1of6, .col-2of12 {
6086  width: 16.66666667%; }
6087
6088.col-5of6, .col-10of12 {
6089  width: 83.33333333%; }
6090
6091.col-1of8, .col-2of16 {
6092  width: 12.5%; }
6093
6094.col-3of8, .col-6of16 {
6095  width: 37.5%; }
6096
6097.col-5of8, .col-10of16 {
6098  width: 62.5%; }
6099
6100.col-7of8, .col-14of16 {
6101  width: 87.5%; }
6102
6103.col-1of10 {
6104  width: 10%; }
6105
6106.col-3of10 {
6107  width: 30%; }
6108
6109.col-7of10 {
6110  width: 70%; }
6111
6112.col-9of10 {
6113  width: 90%; }
6114
6115.col-1of12 {
6116  width: 8.33333333%; }
6117
6118.col-5of12 {
6119  width: 41.66666667%; }
6120
6121.col-7of12 {
6122  width: 58.33333333%; }
6123
6124.col-11of12 {
6125  width: 91.66666667%; }
6126
6127.col-1of16 {
6128  width: 6.25%; }
6129
6130.col-3of16 {
6131  width: 18.75%; }
6132
6133.col-5of16 {
6134  width: 31.25%; }
6135
6136.col-7of16 {
6137  width: 43.75%; }
6138
6139.col-9of16 {
6140  width: 56.25%; }
6141
6142.col-11of16 {
6143  width: 68.75%; }
6144
6145.col-13of16 {
6146  width: 81.25%; }
6147
6148.col-15of16 {
6149  width: 93.75%; }
6150
6151.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 {
6152  left: -100%; }
6153
6154.col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 {
6155  left: -50%; }
6156
6157.col-pull-1of3, .col-pull-2of6, .col-pull-4of12 {
6158  left: -33.33333333%; }
6159
6160.col-pull-2of3, .col-pull-4of6, .col-pull-8of12 {
6161  left: -66.66666667%; }
6162
6163.col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 {
6164  left: -25%; }
6165
6166.col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 {
6167  left: -75%; }
6168
6169.col-pull-1of5, .col-pull-2of10 {
6170  left: -20%; }
6171
6172.col-pull-2of5, .col-pull-4of10 {
6173  left: -40%; }
6174
6175.col-pull-3of5, .col-pull-6of10 {
6176  left: -60%; }
6177
6178.col-pull-4of5, .col-pull-8of10 {
6179  left: -80%; }
6180
6181.col-pull-1of6, .col-pull-2of12 {
6182  left: -16.66666667%; }
6183
6184.col-pull-5of6, .col-pull-10of12 {
6185  left: -83.33333333%; }
6186
6187.col-pull-1of8, .col-pull-2of16 {
6188  left: -12.5%; }
6189
6190.col-pull-3of8, .col-pull-6of16 {
6191  left: -37.5%; }
6192
6193.col-pull-5of8, .col-pull-10of16 {
6194  left: -62.5%; }
6195
6196.col-pull-7of8, .col-pull-14of16 {
6197  left: -87.5%; }
6198
6199.col-pull-1of10 {
6200  left: -10%; }
6201
6202.col-pull-3of10 {
6203  left: -30%; }
6204
6205.col-pull-7of10 {
6206  left: -70%; }
6207
6208.col-pull-9of10 {
6209  left: -90%; }
6210
6211.col-pull-1of12 {
6212  left: -8.33333333%; }
6213
6214.col-pull-5of12 {
6215  left: -41.66666667%; }
6216
6217.col-pull-7of12 {
6218  left: -58.33333333%; }
6219
6220.col-pull-11of12 {
6221  left: -91.66666667%; }
6222
6223.col-pull-1of16 {
6224  left: -6.25%; }
6225
6226.col-pull-3of16 {
6227  left: -18.75%; }
6228
6229.col-pull-5of16 {
6230  left: -31.25%; }
6231
6232.col-pull-7of16 {
6233  left: -43.75%; }
6234
6235.col-pull-9of16 {
6236  left: -56.25%; }
6237
6238.col-pull-11of16 {
6239  left: -68.75%; }
6240
6241.col-pull-13of16 {
6242  left: -81.25%; }
6243
6244.col-pull-15of16 {
6245  left: -93.75%; }
6246
6247.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 {
6248  left: 100%; }
6249
6250.col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 {
6251  left: 50%; }
6252
6253.col-push-1of3, .col-push-2of6, .col-push-4of12 {
6254  left: 33.33333333%; }
6255
6256.col-push-2of3, .col-push-4of6, .col-push-8of12 {
6257  left: 66.66666667%; }
6258
6259.col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 {
6260  left: 25%; }
6261
6262.col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 {
6263  left: 75%; }
6264
6265.col-push-1of5, .col-push-2of10 {
6266  left: 20%; }
6267
6268.col-push-2of5, .col-push-4of10 {
6269  left: 40%; }
6270
6271.col-push-3of5, .col-push-6of10 {
6272  left: 60%; }
6273
6274.col-push-4of5, .col-push-8of10 {
6275  left: 80%; }
6276
6277.col-push-1of6, .col-push-2of12 {
6278  left: 16.66666667%; }
6279
6280.col-push-5of6, .col-push-10of12 {
6281  left: 83.33333333%; }
6282
6283.col-push-1of8, .col-push-2of16 {
6284  left: 12.5%; }
6285
6286.col-push-3of8, .col-push-6of16 {
6287  left: 37.5%; }
6288
6289.col-push-5of8, .col-push-10of16 {
6290  left: 62.5%; }
6291
6292.col-push-7of8, .col-push-14of16 {
6293  left: 87.5%; }
6294
6295.col-push-1of10 {
6296  left: 10%; }
6297
6298.col-push-3of10 {
6299  left: 30%; }
6300
6301.col-push-7of10 {
6302  left: 70%; }
6303
6304.col-push-9of10 {
6305  left: 90%; }
6306
6307.col-push-1of12 {
6308  left: 8.33333333%; }
6309
6310.col-push-5of12 {
6311  left: 41.66666667%; }
6312
6313.col-push-7of12 {
6314  left: 58.33333333%; }
6315
6316.col-push-11of12 {
6317  left: 91.66666667%; }
6318
6319.col-push-1of16 {
6320  left: 6.25%; }
6321
6322.col-push-3of16 {
6323  left: 18.75%; }
6324
6325.col-push-5of16 {
6326  left: 31.25%; }
6327
6328.col-push-7of16 {
6329  left: 43.75%; }
6330
6331.col-push-9of16 {
6332  left: 56.25%; }
6333
6334.col-push-11of16 {
6335  left: 68.75%; }
6336
6337.col-push-13of16 {
6338  left: 81.25%; }
6339
6340.col-push-15of16 {
6341  left: 93.75%; }
6342
6343@media (max-width: 959px) and (min-width: 720px) {
6344  .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 {
6345    width: 100%; }
6346  .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 {
6347    width: 50%; }
6348  .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 {
6349    width: 33.33333333%; }
6350  .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 {
6351    width: 66.66666667%; }
6352  .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 {
6353    width: 25%; }
6354  .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 {
6355    width: 75%; }
6356  .col-tablet-1of5, .col-tablet-2of10 {
6357    width: 20%; }
6358  .col-tablet-2of5, .col-tablet-4of10 {
6359    width: 40%; }
6360  .col-tablet-3of5, .col-tablet-6of10 {
6361    width: 60%; }
6362  .col-tablet-4of5, .col-tablet-8of10 {
6363    width: 80%; }
6364  .col-tablet-1of6, .col-tablet-2of12 {
6365    width: 16.66666667%; }
6366  .col-tablet-5of6, .col-tablet-10of12 {
6367    width: 83.33333333%; }
6368  .col-tablet-1of8, .col-tablet-2of16 {
6369    width: 12.5%; }
6370  .col-tablet-3of8, .col-tablet-6of16 {
6371    width: 37.5%; }
6372  .col-tablet-5of8, .col-tablet-10of16 {
6373    width: 62.5%; }
6374  .col-tablet-7of8, .col-tablet-14of16 {
6375    width: 87.5%; }
6376  .col-tablet-1of10 {
6377    width: 10%; }
6378  .col-tablet-3of10 {
6379    width: 30%; }
6380  .col-tablet-7of10 {
6381    width: 70%; }
6382  .col-tablet-9of10 {
6383    width: 90%; }
6384  .col-tablet-1of12 {
6385    width: 8.33333333%; }
6386  .col-tablet-5of12 {
6387    width: 41.66666667%; }
6388  .col-tablet-7of12 {
6389    width: 58.33333333%; }
6390  .col-tablet-11of12 {
6391    width: 91.66666667%; }
6392  .col-tablet-1of16 {
6393    width: 6.25%; }
6394  .col-tablet-3of16 {
6395    width: 18.75%; }
6396  .col-tablet-5of16 {
6397    width: 31.25%; }
6398  .col-tablet-7of16 {
6399    width: 43.75%; }
6400  .col-tablet-9of16 {
6401    width: 56.25%; }
6402  .col-tablet-11of16 {
6403    width: 68.75%; }
6404  .col-tablet-13of16 {
6405    width: 81.25%; }
6406  .col-tablet-15of16 {
6407    width: 93.75%; }
6408  .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 {
6409    left: -100%; }
6410  .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 {
6411    left: -50%; }
6412  .col-tablet-pull-1of3, .col-tablet-pull-2of6, .col-tablet-pull-4of12 {
6413    left: -33.33333333%; }
6414  .col-tablet-pull-2of3, .col-tablet-pull-4of6, .col-tablet-pull-8of12 {
6415    left: -66.66666667%; }
6416  .col-tablet-pull-1of4, .col-tablet-pull-2of8, .col-tablet-pull-3of12, .col-tablet-pull-4of16 {
6417    left: -25%; }
6418  .col-tablet-pull-3of4, .col-tablet-pull-6of8, .col-tablet-pull-9of12, .col-tablet-pull-12of16 {
6419    left: -75%; }
6420  .col-tablet-pull-1of5, .col-tablet-pull-2of10 {
6421    left: -20%; }
6422  .col-tablet-pull-2of5, .col-tablet-pull-4of10 {
6423    left: -40%; }
6424  .col-tablet-pull-3of5, .col-tablet-pull-6of10 {
6425    left: -60%; }
6426  .col-tablet-pull-4of5, .col-tablet-pull-8of10 {
6427    left: -80%; }
6428  .col-tablet-pull-1of6, .col-tablet-pull-2of12 {
6429    left: -16.66666667%; }
6430  .col-tablet-pull-5of6, .col-tablet-pull-10of12 {
6431    left: -83.33333333%; }
6432  .col-tablet-pull-1of8, .col-tablet-pull-2of16 {
6433    left: -12.5%; }
6434  .col-tablet-pull-3of8, .col-tablet-pull-6of16 {
6435    left: -37.5%; }
6436  .col-tablet-pull-5of8, .col-tablet-pull-10of16 {
6437    left: -62.5%; }
6438  .col-tablet-pull-7of8, .col-tablet-pull-14of16 {
6439    left: -87.5%; }
6440  .col-tablet-pull-1of10 {
6441    left: -10%; }
6442  .col-tablet-pull-3of10 {
6443    left: -30%; }
6444  .col-tablet-pull-7of10 {
6445    left: -70%; }
6446  .col-tablet-pull-9of10 {
6447    left: -90%; }
6448  .col-tablet-pull-1of12 {
6449    left: -8.33333333%; }
6450  .col-tablet-pull-5of12 {
6451    left: -41.66666667%; }
6452  .col-tablet-pull-7of12 {
6453    left: -58.33333333%; }
6454  .col-tablet-pull-11of12 {
6455    left: -91.66666667%; }
6456  .col-tablet-pull-1of16 {
6457    left: -6.25%; }
6458  .col-tablet-pull-3of16 {
6459    left: -18.75%; }
6460  .col-tablet-pull-5of16 {
6461    left: -31.25%; }
6462  .col-tablet-pull-7of16 {
6463    left: -43.75%; }
6464  .col-tablet-pull-9of16 {
6465    left: -56.25%; }
6466  .col-tablet-pull-11of16 {
6467    left: -68.75%; }
6468  .col-tablet-pull-13of16 {
6469    left: -81.25%; }
6470  .col-tablet-pull-15of16 {
6471    left: -93.75%; }
6472  .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 {
6473    left: 100%; }
6474  .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 {
6475    left: 50%; }
6476  .col-tablet-push-1of3, .col-tablet-push-2of6, .col-tablet-push-4of12 {
6477    left: 33.33333333%; }
6478  .col-tablet-push-2of3, .col-tablet-push-4of6, .col-tablet-push-8of12 {
6479    left: 66.66666667%; }
6480  .col-tablet-push-1of4, .col-tablet-push-2of8, .col-tablet-push-3of12, .col-tablet-push-4of16 {
6481    left: 25%; }
6482  .col-tablet-push-3of4, .col-tablet-push-6of8, .col-tablet-push-9of12, .col-tablet-push-12of16 {
6483    left: 75%; }
6484  .col-tablet-push-1of5, .col-tablet-push-2of10 {
6485    left: 20%; }
6486  .col-tablet-push-2of5, .col-tablet-push-4of10 {
6487    left: 40%; }
6488  .col-tablet-push-3of5, .col-tablet-push-6of10 {
6489    left: 60%; }
6490  .col-tablet-push-4of5, .col-tablet-push-8of10 {
6491    left: 80%; }
6492  .col-tablet-push-1of6, .col-tablet-push-2of12 {
6493    left: 16.66666667%; }
6494  .col-tablet-push-5of6, .col-tablet-push-10of12 {
6495    left: 83.33333333%; }
6496  .col-tablet-push-1of8, .col-tablet-push-2of16 {
6497    left: 12.5%; }
6498  .col-tablet-push-3of8, .col-tablet-push-6of16 {
6499    left: 37.5%; }
6500  .col-tablet-push-5of8, .col-tablet-push-10of16 {
6501    left: 62.5%; }
6502  .col-tablet-push-7of8, .col-tablet-push-14of16 {
6503    left: 87.5%; }
6504  .col-tablet-push-1of10 {
6505    left: 10%; }
6506  .col-tablet-push-3of10 {
6507    left: 30%; }
6508  .col-tablet-push-7of10 {
6509    left: 70%; }
6510  .col-tablet-push-9of10 {
6511    left: 90%; }
6512  .col-tablet-push-1of12 {
6513    left: 8.33333333%; }
6514  .col-tablet-push-5of12 {
6515    left: 41.66666667%; }
6516  .col-tablet-push-7of12 {
6517    left: 58.33333333%; }
6518  .col-tablet-push-11of12 {
6519    left: 91.66666667%; }
6520  .col-tablet-push-1of16 {
6521    left: 6.25%; }
6522  .col-tablet-push-3of16 {
6523    left: 18.75%; }
6524  .col-tablet-push-5of16 {
6525    left: 31.25%; }
6526  .col-tablet-push-7of16 {
6527    left: 43.75%; }
6528  .col-tablet-push-9of16 {
6529    left: 56.25%; }
6530  .col-tablet-push-11of16 {
6531    left: 68.75%; }
6532  .col-tablet-push-13of16 {
6533    left: 81.25%; }
6534  .col-tablet-push-15of16 {
6535    left: 93.75%; } }
6536
6537.col-3-wide {
6538  width: 33.3333333333%; }
6539
6540@media (max-width: 719px) {
6541  /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */
6542[class*=col-],
6543  .col-12 [class*=col-],
6544  .col-13 [class*=col-] {
6545  float: none;
6546  left: 0;
6547  width: auto;
6548} }
6549
6550/**
6551 * Fades out an element.
6552 * Applies visibility hidden when the transition is finished.
6553 *
6554 * Use opacity: 1; to show the element.
6555 */
6556/* Header component */
6557.dac-header {
6558  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07);
6559  box-sizing: border-box;
6560  background: #6ab344;
6561  height: 64px;
6562  margin: 0;
6563  left: 0;
6564  position: fixed;
6565  right: 0;
6566  top: 0;
6567  -webkit-transition: background 200ms;
6568  transition: background 200ms;
6569  z-index: 61;
6570}
6571
6572.dac-ndk {
6573  background: #00bcd4;
6574}
6575
6576.dac-search-mode .dac-header {
6577  background: #b0bec5;
6578  -webkit-transition: background 200ms;
6579  transition: background 200ms;
6580}
6581
6582.dac-search-mode .dac-header-logo,
6583  .dac-search-mode .dac-header-console-btn {
6584  opacity: 0;
6585  visibility: hidden;
6586  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
6587  transition: visibility 0s linear 200ms, opacity 200ms linear;
6588}
6589
6590.dac-header-logo {
6591  display: block;
6592  font-size: 20px;
6593  font-weight: 400;
6594  float: left;
6595  letter-spacing: .3px;
6596  line-height: 36px;
6597  opacity: 1;
6598  padding: 13px 48px 15px 0;
6599}
6600
6601.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus {
6602  color: #fff;
6603}
6604
6605@media (min-width: 980px) {
6606  .dac-header-logo {
6607    border-right: 1px solid rgba(0, 0, 0, 0.1);
6608  }
6609}
6610
6611@media (min-width: 720px) and (max-width: 979px) {
6612  .dac-header-logo {
6613    padding-right: 10px;
6614  }
6615}
6616
6617.dac-header-logo-image {
6618  margin-right: 5px;
6619  vertical-align: top;
6620}
6621
6622.dac-header-tabs {
6623  list-style: none;
6624  margin: 0 10px;
6625  display: none;
6626  opacity: 1;
6627  -webkit-transition: opacity 200ms linear 200ms;
6628  transition: opacity 200ms linear 200ms;
6629}
6630
6631@media (min-width: 720px) and (max-width: 979px) {
6632  .dac-header-tabs {
6633    display: inline-block;
6634  }
6635}
6636
6637@media (min-width: 980px) {
6638  .dac-header-tabs {
6639    display: inline-block;
6640  }
6641}
6642
6643.dac-header-tabs li {
6644  display: inline-block;
6645}
6646
6647.dac-header-tab {
6648  display: inline-block;
6649  line-height: 64px;
6650  height: 64px;
6651  padding: 0 9px;
6652  color: #fff;
6653  color: rgba(255, 255, 255, 0.7);
6654  font-size: 14px;
6655  text-transform: uppercase;
6656  font-weight: 500;
6657}
6658
6659.dac-header-tab:hover {
6660  color: #fff;
6661}
6662
6663.dac-header-tab.selected {
6664  border-bottom: 4px solid #fff;
6665  height: 60px;
6666  color: #fff;
6667}
6668
6669.dac-search-mode .dac-header-tabs {
6670  opacity: 0;
6671  -webkit-transition: opacity 0ms linear 0ms;
6672  transition: opacity 0ms linear 0ms;
6673}
6674
6675.dac-header-console-btn {
6676  border-radius: 3px;
6677  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
6678  float: right;
6679  font-size: 14px;
6680  font-weight: 500;
6681  line-height: 28px;
6682  margin: 13px 13px 12px 24px;
6683  opacity: 1;
6684  padding: 4px 10px;
6685  position: relative;
6686  text-transform: uppercase;
6687  -webkit-transition: box-shadow .2s;
6688  transition: box-shadow .2s;
6689  z-index: 60;
6690}
6691
6692@media (min-width: 720px) and (max-width: 979px) {
6693  .dac-header-console-btn {
6694    display: none;
6695  }
6696}
6697
6698.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 {
6699  margin-right: 5px;
6700}
6701
6702.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus {
6703  color: #fff;
6704}
6705
6706.dac-header-console-btn:hover {
6707  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
6708}
6709
6710.dac-header-console-btn:focus {
6711  background: rgba(63, 81, 181, 0.1);
6712  outline: 0;
6713}
6714
6715@media (max-width: 719px) {
6716  .dac-header {
6717    text-align: center;
6718  }
6719
6720  .dac-header-logo {
6721    border-right: 0;
6722    display: inline-block;
6723    margin-right: 0;
6724    float: none;
6725    padding-left: 0;
6726    padding-right: 0;
6727  }
6728
6729  .dac-header-console-btn {
6730    display: none;
6731  }
6732}
6733
6734/* Header Breadcrumbs component */
6735.dac-header-crumbs {
6736  list-style-type: none;
6737  margin: 23px 0 -13px 0;
6738  display: inline-block;
6739}
6740
6741.dac-header-crumbs.dac-has-content {
6742  opacity: 1;
6743}
6744
6745.dac-header-crumbs-item {
6746  float: left;
6747  position: relative;
6748  margin: 0;
6749  padding: 0;
6750}
6751
6752.dac-header-crumbs-item i, .dac-header-crumbs-item .dac-nav-link-forward {
6753  display: none;
6754}
6755
6756.dac-header-crumbs-item:before {
6757  content: '';
6758  background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
6759  width: 10px;
6760  height: 10px;
6761  display: inline-block;
6762  position: absolute;
6763  top: 12px;
6764  left: -15px;
6765}
6766
6767.dac-header-crumbs-item:first-child:before {
6768  content: none;
6769}
6770
6771.dac-header-crumbs-link {
6772  display: block;
6773  font-size: 16px;
6774  line-height: 32px;
6775  padding: 0 20px 0 0;
6776}
6777
6778.dac-header-crumbs-link, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus {
6779  color: #666;
6780}
6781
6782.dac-header-crumbs-link:focus {
6783  outline: 0;
6784  text-decoration: underline;
6785}
6786
6787.dac-header-crumbs-link.current {
6788  font-weight: 400;
6789}
6790
6791/* Header site search component */
6792.dac-header-search {
6793  bottom: 64px;
6794  position: absolute;
6795  right: 220px;
6796  top: 0;
6797  width: 238px;
6798  -webkit-transition: width 300ms, right 100ms, margin 100ms;
6799  transition: width 300ms, right 100ms, margin 100ms;
6800}
6801
6802.dac-header-search-inner {
6803  margin: 0 auto;
6804  max-width: 940px;
6805  position: relative;
6806  width: 100%;
6807}
6808
6809@media (min-width: 980px) {
6810  .dac-header-search-inner::after {
6811    background: -webkit-linear-gradient(right, #6ab344, rgba(106, 179, 68, 0));
6812    background: linear-gradient(to left, #6ab344, rgba(106, 179, 68, 0));
6813    content: '';
6814    display: block;
6815    height: 64px;
6816    position: absolute;
6817    right: 100%;
6818    top: 0;
6819    -webkit-transition: opacity 200ms, -webkit-transform 300ms;
6820    transition: opacity 200ms, transform 300ms;
6821    -webkit-transform-origin: right center;
6822    -ms-transform-origin: right center;
6823    transform-origin: right center;
6824    width: 64px;
6825  }
6826
6827  .dac-search-mode .dac-header-search-inner::after {
6828    opacity: 0;
6829    -webkit-transform: scaleX(0);
6830    -ms-transform: scaleX(0);
6831    transform: scaleX(0);
6832  }
6833}
6834
6835.dac-header-search-icon {
6836  left: 8px;
6837  pointer-events: none;
6838  position: absolute;
6839  top: 18px;
6840}
6841
6842.dac-header-search-input {
6843  background: #77be53;
6844  border-radius: 3px;
6845  border: none;
6846  box-sizing: border-box;
6847  color: #fff;
6848  font-size: 14px;
6849  font-weight: 600;
6850  margin: 13px 0;
6851  padding: 9px 36px 10px;
6852  -webkit-transition: background 200ms, color 200ms;
6853  transition: background 200ms, color 200ms;
6854  width: 100%;
6855}
6856
6857.dac-header-search-close, .dac-header-search-clear {
6858  background: none;
6859  border: none;
6860  cursor: pointer;
6861  font-size: 0;
6862  outline: none;
6863  position: absolute;
6864  margin: 0;
6865}
6866
6867.dac-header-search-clear {
6868  display: inline-block;
6869  opacity: .4;
6870  padding: 8px;
6871  top: 15px;
6872  right: 0;
6873}
6874
6875.dac-header-search-clear:hover, .dac-header-search-clear:focus {
6876  opacity: .8;
6877}
6878
6879.dac-header-search-close {
6880  left: -45px;
6881  top: 20px;
6882  -webkit-transform: translateX(45px);
6883  -ms-transform: translateX(45px);
6884  transform: translateX(45px);
6885  visibility: hidden;
6886}
6887
6888.dac-header-search ::-webkit-input-placeholder {
6889  color: #fff;
6890  font-weight: 300;
6891  -webkit-transition: color 200ms;
6892  transition: color 200ms;
6893}
6894
6895.dac-header-search :-moz-placeholder {
6896  color: #fff;
6897  font-weight: 300;
6898  transition: color 200ms;
6899}
6900
6901.dac-header-search ::-moz-placeholder {
6902  color: #fff;
6903  font-weight: 300;
6904  transition: color 200ms;
6905}
6906
6907.dac-header-search :-ms-input-placeholder {
6908  color: #fff;
6909  font-weight: 300;
6910  transition: color 200ms;
6911}
6912
6913.dac-header-search-input:focus {
6914  outline: 0;
6915}
6916
6917.dac-search-mode .dac-header-search {
6918  width: 940px;
6919  right: 50%;
6920  margin-right: -470px;
6921}
6922
6923.dac-search-mode .dac-header-search .dac-header-search-input::after {
6924  background: -webkit-linear-gradient(right, #b0bec5, rgba(176, 190, 197, 0));
6925  background: linear-gradient(to left, #b0bec5, rgba(176, 190, 197, 0));
6926}
6927
6928.dac-search-mode .dac-header-search .dac-header-search-close {
6929  -webkit-transition: -webkit-transform 200ms ease-out 300ms;
6930  transition: transform 200ms ease-out 300ms;
6931  -webkit-transform: translateX(0);
6932  -ms-transform: translateX(0);
6933  transform: translateX(0);
6934  visibility: visible;
6935}
6936
6937.dac-search-mode .dac-header-search .dac-header-search-icon {
6938  left: 23px;
6939}
6940
6941.dac-search-mode .dac-header-search .dac-header-search-input {
6942  background: #fff;
6943  border-radius: 0;
6944  font-size: 18px;
6945  color: #666;
6946  padding-left: 55px;
6947  margin-top: 11px;
6948}
6949
6950.dac-search-mode .dac-header-search ::-webkit-input-placeholder {
6951  color: #505050;
6952}
6953
6954.dac-search-mode .dac-header-search :-moz-placeholder {
6955  color: #505050;
6956}
6957
6958.dac-search-mode .dac-header-search ::-moz-placeholder {
6959  color: #505050;
6960}
6961
6962.dac-search-mode .dac-header-search :-ms-input-placeholder {
6963  color: #505050;
6964}
6965
6966@media (min-width: 720px) and (max-width: 979px) {
6967  .dac-header-search {
6968    right: 20px;
6969    width: 200px;
6970    -webkit-transition: left 200ms, right 200ms, width 200ms;
6971    transition: left 200ms, right 200ms, width 200ms;
6972  }
6973
6974  .dac-search-mode .dac-header-search {
6975    left: 60px;
6976    right: 0;
6977    width: 100%;
6978  }
6979
6980  .dac-search-mode .dac-header-search .dac-header-search-inner {
6981    margin: 0;
6982    width: calc(100% - 60px - 10px);
6983  }
6984
6985  .dac-header-search-close {
6986    left: -42px;
6987  }
6988}
6989
6990@media (max-width: 719px) {
6991  .dac-header-search {
6992    bottom: 0;
6993    border-radius: 0;
6994    border-left: 1px solid rgba(0, 0, 0, 0.1);
6995    cursor: pointer;
6996    left: calc(100% - 64px);
6997    margin: 0;
6998    overflow: hidden;
6999    padding-left: 10px;
7000    padding-right: 10px;
7001    position: absolute;
7002    right: 0;
7003    top: 0;
7004  }
7005
7006  .dac-header-search-input {
7007    background: none;
7008    cursor: pointer;
7009    opacity: 0;
7010  }
7011
7012  .dac-search-mode .dac-header-search {
7013    background: #b0bec5;
7014    cursor: default;
7015    overflow: visible;
7016    left: 60px;
7017    right: 0;
7018    width: 100%;
7019    -webkit-transition: left 200ms, right 200ms, width 200ms;
7020    transition: left 200ms, right 200ms, width 200ms;
7021    padding: 0;
7022    border: none;
7023  }
7024
7025  .dac-search-mode .dac-header-search .dac-header-search-inner {
7026    margin: 0;
7027    width: calc(100% - 60px - 10px);
7028  }
7029
7030  .dac-search-mode .dac-header-search .dac-header-search-input {
7031    opacity: 1;
7032  }
7033}
7034
7035.highlighted em {
7036  color: #333;
7037  font-style: normal;
7038  font-weight: 700;
7039}
7040
7041.card-info .title.highlighted {
7042  color: #666;
7043}
7044
7045/* Main navigation component */
7046.dac-nav-sidebar {
7047  background: #f5f8fa;
7048  border-right: 1px solid rgba(0, 0, 0, 0.1);
7049  bottom: 0;
7050  left: 0;
7051  overflow: hidden;
7052  padding: 0;
7053  position: fixed;
7054  top: 64px;
7055  -webkit-transform: translate(-100%, 0);
7056  -ms-transform: translate(-100%, 0);
7057  transform: translate(-100%, 0);
7058  width: 250px;
7059  z-index: 60;
7060}
7061
7062.dac-nav-animating .dac-nav-sidebar {
7063  -webkit-transition: -webkit-transform .3s;
7064  transition: transform .3s;
7065}
7066
7067.dac-nav-open .dac-nav-sidebar {
7068  -webkit-transform: translate(0, 0);
7069  -ms-transform: translate(0, 0);
7070  transform: translate(0, 0);
7071}
7072
7073.dac-search-mode .dac-nav-sidebar {
7074  -webkit-transition: -webkit-transform .3s;
7075  transition: transform .3s;
7076  -webkit-transform: translate(-100%, 0);
7077  -ms-transform: translate(-100%, 0);
7078  transform: translate(-100%, 0);
7079}
7080
7081.dac-nav .dac-swap-section {
7082  -webkit-transition-duration: .3s;
7083  transition-duration: .3s;
7084}
7085
7086.dac-nav-back {
7087  margin-top: -3px;
7088  margin-right: 10px;
7089}
7090
7091.dac-nav-fullscreen {
7092  background: transparent;
7093  border: none;
7094  bottom: 100%;
7095  cursor: pointer;
7096  display: none;
7097  opacity: .8;
7098  outline: none;
7099  padding: 20px 15px;
7100  position: absolute;
7101  right: 0;
7102}
7103
7104@media (min-width: 980px) {
7105  .dac-nav-fullscreen {
7106    display: inline-block;
7107  }
7108}
7109
7110.dac-nav-fullscreen:hover {
7111  opacity: 1;
7112}
7113
7114.dac-nav-sub-slider {
7115  cursor: pointer;
7116  opacity: .5;
7117  position: absolute;
7118  right: 7px;
7119  top: 5px;
7120}
7121
7122.dac-nav-back-button {
7123  background: #546e7a;
7124  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
7125  display: block;
7126  font-weight: 500;
7127  font-size: 18px;
7128  left: 0;
7129  margin: 0;
7130  padding: 20px;
7131  position: absolute !important;
7132  right: 0;
7133  top: 0;
7134  z-index: 1;
7135}
7136
7137.dac-nav-back-button, .dac-nav-back-button:hover, .dac-nav-back-button:active {
7138  color: rgba(255, 255, 255, 0.7);
7139}
7140
7141.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 {
7142  opacity: .7;
7143}
7144
7145.dac-nav-logo {
7146  font-size: 20px;
7147  font-weight: 300;
7148  letter-spacing: .3px;
7149  line-height: 36px;
7150  margin: 0;
7151  padding: 14px 24px;
7152}
7153
7154.dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus {
7155  color: #444;
7156}
7157
7158.dac-nav-list {
7159  bottom: 0;
7160  left: 0;
7161  list-style-type: none;
7162  margin: 0;
7163  -webkit-overflow-scrolling: touch;
7164  overflow-y: scroll;
7165  padding: 16px 0;
7166  position: absolute !important;
7167  right: 0;
7168  top: 0 !important;
7169  scrollbar-face-color: #b7baba;
7170  scrollbar-track-color: #e5e8e9;
7171}
7172
7173.dac-nav-list::-webkit-scrollbar {
7174  width: 4px;
7175  height: 4px;
7176}
7177
7178.dac-nav-list::-webkit-scrollbar-thumb {
7179  background: #b7baba;
7180}
7181
7182.dac-nav-list::-webkit-scrollbar-track {
7183  background: #e5e8e9;
7184}
7185
7186.dac-nav-secondary {
7187  margin: 0;
7188}
7189
7190.dac-nav-item {
7191  list-style-type: none;
7192  margin: 0 0 10px;
7193  position: relative;
7194}
7195
7196.dac-nav-secondary .dac-nav-item {
7197  margin-bottom: 0;
7198}
7199
7200.dac-nav-head {
7201  display: block;
7202  font-size: 16px;
7203  font-weight: 300;
7204  letter-spacing: .24px;
7205  line-height: 32px;
7206  margin-bottom: 20px;
7207  margin-top: 0;
7208}
7209
7210.dac-nav-dimmer {
7211  background: #000;
7212  display: block;
7213  height: 100%;
7214  left: 0;
7215  opacity: 0;
7216  position: fixed;
7217  top: 0;
7218  -webkit-transform: translateZ(0);
7219  transform: translateZ(0);
7220  visibility: hidden;
7221  width: 100%;
7222  z-index: 60;
7223}
7224
7225.dac-nav-animating .dac-nav-dimmer {
7226  -webkit-transition: visibility 0s linear .3s, opacity .3s linear;
7227  transition: visibility 0s linear .3s, opacity .3s linear;
7228}
7229
7230.dac-nav-open .dac-nav-dimmer {
7231  opacity: .8;
7232  -webkit-transition-delay: 0s;
7233  transition-delay: 0s;
7234  visibility: visible;
7235}
7236
7237@media (min-width: 980px) {
7238  .dac-nav-dimmer {
7239    display: none;
7240  }
7241}
7242
7243.dac-nav-hamburger {
7244  display: inline-block;
7245  float: left;
7246  height: 15px;
7247  padding: 22px 20px;
7248  width: 18px;
7249}
7250
7251@media (max-width: 719px) {
7252  .dac-nav-hamburger {
7253    border-right: 1px solid rgba(0, 0, 0, 0.1);
7254    left: 0;
7255    padding-bottom: 27px;
7256    position: absolute;
7257    top: 0;
7258  }
7259}
7260
7261.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7262  background: rgba(0, 0, 0, 0.4);
7263  display: block;
7264  height: 2px;
7265  margin: 3px 0 0;
7266  opacity: .5;
7267  width: 100%;
7268}
7269
7270.dac-nav-animating .dac-nav-hamburger-top, .dac-nav-animating .dac-nav-hamburger-mid, .dac-nav-animating .dac-nav-hamburger-bot {
7271  -webkit-transition: opacity .3s;
7272  transition: opacity .3s;
7273}
7274
7275@media (max-width: 719px) {
7276  .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7277    background: #fff;
7278    opacity: 1;
7279  }
7280}
7281
7282.dac-nav-open .dac-nav-hamburger-top,
7283  .dac-nav-open .dac-nav-hamburger-mid,
7284  .dac-nav-open .dac-nav-hamburger-bot {
7285  opacity: 1;
7286}
7287
7288.dac-search-mode .dac-nav-hamburger {
7289  opacity: 0;
7290  visibility: hidden;
7291  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
7292  transition: visibility 0s linear 200ms, opacity 200ms linear;
7293}
7294
7295.dac-nav-link {
7296  color: #444;
7297  display: block;
7298  font-size: 18px;
7299  font-weight: 500;
7300  letter-spacing: .24px;
7301  padding: 5px 20px;
7302  -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7303  transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7304}
7305
7306.dac-nav-link:hover, .dac-nav-link:focus {
7307  color: rgba(68, 68, 68, 0.7);
7308}
7309
7310.dac-nav-link:focus {
7311  background: rgba(63, 81, 181, 0.1);
7312  outline: 0;
7313}
7314
7315.dac-nav-secondary .dac-nav-link {
7316  font-size: 12px;
7317  font-weight: 400;
7318  padding-left: 40px;
7319}
7320
7321.dac-nav-link.selected {
7322  background: rgba(63, 81, 181, 0.1);
7323  color: #039bef;
7324  position: relative;
7325}
7326
7327.dac-nav-link-forward {
7328  background: #546E7A;
7329  color: #fff;
7330  cursor: pointer;
7331  display: inline-block;
7332  line-height: 34px;
7333  padding: 0;
7334  position: absolute;
7335  right: 0;
7336  top: 0;
7337  text-align: center;
7338  width: 34px;
7339}
7340
7341.dac-nav-link-forward > .dac-nav-forward {
7342  opacity: .7;
7343  vertical-align: -3px;
7344}
7345
7346.dac-nav-sub {
7347  bottom: 0;
7348  left: 0;
7349  position: absolute !important;
7350  top: 65px !important;
7351  right: 0;
7352  z-index: 1;
7353}
7354
7355#body-content {
7356  padding-top: 64px;
7357}
7358
7359.dac-nav-animating #body-content {
7360  -webkit-transition: padding .3s;
7361  transition: padding .3s;
7362}
7363
7364@media (min-width: 980px) {
7365  .dac-nav-open #body-content {
7366    padding-left: 250px;
7367  }
7368}
7369
7370.dac-nav-open {
7371  overflow: hidden;
7372}
7373
7374@media (min-width: 980px) {
7375  .dac-nav-open {
7376    overflow: visible;
7377  }
7378}
7379
7380#devdoc-nav {
7381  height: 100%;
7382}
7383
7384.dac-reference-nav {
7385  height: calc(100% - 36px);
7386  overflow: hidden;
7387  position: relative;
7388}
7389
7390.dac-reference-nav ul,
7391  .dac-reference-nav li {
7392  margin: 0;
7393  list-style-type: none;
7394}
7395
7396.dac-reference-nav-list {
7397  bottom: 0;
7398  overflow: hidden;
7399  overflow-y: scroll;
7400  left: 0;
7401  padding: 10px;
7402  padding-left: 20px;
7403  position: absolute;
7404  right: 0;
7405  top: 0;
7406  scrollbar-face-color: #9da4a7;
7407  scrollbar-track-color: #c4cdd1;
7408}
7409
7410.dac-reference-nav-list::-webkit-scrollbar {
7411  width: 4px;
7412  height: 4px;
7413}
7414
7415.dac-reference-nav-list::-webkit-scrollbar-thumb {
7416  background: #9da4a7;
7417}
7418
7419.dac-reference-nav-list::-webkit-scrollbar-track {
7420  background: #c4cdd1;
7421}
7422
7423.dac-reference-nav-resources {
7424  display: none;
7425  padding: 0 0 0 13px;
7426}
7427
7428.dac-reference-nav-resource, .dac-reference-nav-toggle {
7429  color: #505050;
7430  cursor: pointer;
7431  display: block;
7432  font-size: 13px;
7433  line-height: 1;
7434  overflow: hidden;
7435  margin: 0;
7436  padding: 3px 0;
7437  position: relative;
7438  text-overflow: ellipsis;
7439  white-space: nowrap;
7440}
7441
7442.dac-reference-nav-toggle {
7443  margin-left: -12px;
7444  padding-left: 12px;
7445}
7446
7447.selected > .dac-reference-nav-resource {
7448  color: #039bef;
7449  font-weight: 600;
7450}
7451
7452.dac-reference-nav-toggle::before {
7453  background: transparent url(../images/styles/disclosure_up.png) no-repeat center center;
7454  content: '';
7455  display: block;
7456  height: 19px;
7457  left: 0;
7458  position: absolute;
7459  top: 0;
7460  width: 8px;
7461}
7462
7463.dac-reference-nav-toggle.dac-closed::before {
7464  -webkit-transform: scaleY(-1);
7465  -ms-transform: scaleY(-1);
7466  transform: scaleY(-1);
7467}
7468
7469/* nav */
7470#nav {
7471  background: #cfd8dc;
7472  bottom: 0;
7473  left: 0;
7474  margin: 0;
7475  -webkit-overflow-scrolling: touch;
7476  overflow-y: scroll;
7477  position: absolute !important;
7478  right: 0;
7479  top: 0 !important;
7480  padding: 10px;
7481  scrollbar-face-color: #9da4a7;
7482  scrollbar-track-color: #c4cdd1;
7483  /* section header links */
7484  /* nested nav headers */
7485}
7486
7487#nav::-webkit-scrollbar {
7488  width: 4px;
7489  height: 4px;
7490}
7491
7492#nav::-webkit-scrollbar-thumb {
7493  background: #9da4a7;
7494}
7495
7496#nav::-webkit-scrollbar-track {
7497  background: #c4cdd1;
7498}
7499
7500#nav li {
7501  font-size: 12px;
7502  line-height: 18px;
7503  list-style-type: none;
7504  margin: 0;
7505  padding: 0;
7506}
7507
7508#nav a {
7509  color: #505050;
7510  text-decoration: none;
7511  word-wrap: break-word;
7512}
7513
7514#nav .nav-section-header {
7515  padding: 0 30px 0 0;
7516  position: relative;
7517  -webkit-transition: background-color .1s;
7518  transition: background-color .1s;
7519}
7520
7521#nav .nav-section-header.empty {
7522  padding: 0;
7523}
7524
7525#nav .nav-section-header.empty::after {
7526  display: none;
7527}
7528
7529#nav .nav-section-header:after {
7530  background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
7531  content: '';
7532  height: 34px;
7533  display: block;
7534  position: absolute;
7535  right: 0;
7536  top: 1px;
7537  width: 34px;
7538}
7539
7540#nav li.selected a {
7541  color: #0288D1;
7542}
7543
7544#nav li.selected ul li a {
7545  color: #505050;
7546}
7547
7548#nav li.expanded .nav-section-header {
7549  background: #bac2c6;
7550}
7551
7552#nav li.expanded .nav-section-header.empty {
7553  background: none;
7554}
7555
7556#nav li.expanded li .nav-section-header {
7557  background: none;
7558}
7559
7560#nav li.expanded li ul {
7561  padding: 0 10px;
7562}
7563
7564#nav li.expanded > .nav-section-header:after {
7565  content: '';
7566  background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
7567  width: 34px;
7568  height: 34px;
7569}
7570
7571#nav li.expanded li ul.tree-list-children {
7572  padding: 0;
7573}
7574
7575#nav li.expanded li ul.tree-list-children .tree-list-children {
7576  padding: 0 0 0 10px;
7577}
7578
7579#nav .nav-section .nav-section .nav-section-header {
7580    /* no white line between second level sections */
7581  margin-bottom: 0;
7582}
7583
7584#nav > li > div > a {
7585  display: block;
7586  font-weight: 700;
7587  padding: 10px;
7588}
7589
7590#nav .nav-section .nav-section {
7591  position: relative;
7592  padding: 0;
7593  margin: 0;
7594}
7595
7596#nav .nav-section li a {
7597    /* first gen child (2nd level li) */
7598  display: block;
7599  font-weight: 700;
7600  text-transform: none;
7601  padding: 10px;
7602}
7603
7604#nav .nav-section li li a {
7605    /* second gen child (3rd level li) */
7606  font-weight: 400;
7607  padding: 6px 6px 6px 10px;
7608}
7609
7610#nav li span.tree-list-subtitle {
7611  display: inline-block;
7612  color: #555;
7613  font-size: 12px;
7614  padding: 10px;
7615  text-transform: uppercase;
7616}
7617
7618#nav li span.tree-list-subtitle:before {
7619  content: '—';
7620}
7621
7622#nav li span.tree-list-subtitle:after {
7623  content: '—';
7624}
7625
7626#nav li span.tree-list-subtitle.package {
7627  padding-top: 15px;
7628  cursor: default;
7629}
7630
7631#nav li span.tree-list-subtitle.package:before {
7632  content: '';
7633}
7634
7635#nav li span.tree-list-subtitle.package:after {
7636  content: '';
7637}
7638
7639#nav li ul.tree-list-children.classes {
7640  padding-left: 10px;
7641}
7642
7643#nav li ul {
7644  display: none;
7645  overflow: hidden;
7646  margin: 0;
7647}
7648
7649#nav li ul.animate-height-in {
7650  -webkit-transition: height 0.25s ease-in;
7651  transition: height 0.25s ease-in;
7652}
7653
7654#nav li ul.animate-height-out {
7655  -webkit-transition: height 0.25s ease-out;
7656  transition: height 0.25s ease-out;
7657}
7658
7659#nav li ul li {
7660  padding: 0;
7661}
7662
7663#nav li li li {
7664  padding: 0;
7665}
7666
7667#nav li ul > li {
7668  padding: 0;
7669}
7670
7671#nav li ul > li:last-child {
7672  padding-bottom: 5px;
7673}
7674
7675#nav li ul.tree-list-children > li:last-child {
7676  padding-bottom: 0;
7677}
7678
7679#nav li.expanded ul > li {
7680  background: #c4cdd1;
7681}
7682
7683#nav li.expanded ul > li li {
7684  background: inherit;
7685}
7686
7687#nav li ul.tree-list-children ul {
7688  display: block;
7689}
7690
7691#nav.samples-nav li li li a {
7692  padding-top: 3px;
7693  padding-bottom: 3px;
7694}
7695
7696#nav.samples-nav li li ul > li:last-child {
7697  padding-bottom: 3px;
7698}
7699
7700/* Hero carousel */
7701.dac-hero {
7702  background-color: #fff;
7703  background-position: 50% 30%;
7704  background-size: cover;
7705  box-sizing: border-box;
7706  font-size: 16px;
7707  min-height: 550px;
7708  padding-top: 88px;
7709}
7710
7711.dac-hero.dac-darken::before {
7712  background: rgba(0, 0, 0, 0.3);
7713  bottom: 0;
7714  content: '';
7715  display: block;
7716  left: 0;
7717  position: absolute;
7718  right: 0;
7719  top: 0;
7720}
7721
7722@media (max-width: 719px) {
7723  .dac-hero.dac-darken::before {
7724    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7725    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7726  }
7727}
7728
7729.dac-hero.dac-darken .dac-hero-content {
7730  position: relative;
7731}
7732
7733@media (max-width: 719px) {
7734  .dac-hero {
7735    padding-bottom: 20px;
7736    padding-top: 20px;
7737  }
7738}
7739
7740.dac-hero-tag {
7741  font-size: 11px;
7742  font-weight: 700;
7743  letter-spacing: .07em;
7744  margin-bottom: 2px;
7745  text-transform: uppercase;
7746}
7747
7748.dac-hero-title {
7749  margin: 0 0 14px;
7750}
7751
7752@media (max-width: 719px) {
7753  .dac-hero-title {
7754    font-size: 28px;
7755    line-height: 35px;
7756  }
7757}
7758
7759.dac-hero-description {
7760  margin-bottom: 16px;
7761}
7762
7763@media (max-width: 719px) {
7764  .dac-hero-description {
7765    font-size: 14px;
7766  }
7767}
7768
7769.dac-hero-cta {
7770  display: inline-block;
7771  line-height: 40px;
7772  margin-right: 20px;
7773  -webkit-transition: opacity .3s;
7774  transition: opacity .3s;
7775}
7776
7777.dac-hero-cta:hover {
7778  color: currentColor;
7779  opacity: .54;
7780}
7781
7782.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 {
7783  margin-left: -8px;
7784}
7785
7786@media (max-width: 719px) {
7787  .dac-hero-cta {
7788    line-height: 28px;
7789  }
7790}
7791
7792.dac-hero-figure {
7793  text-align: center;
7794}
7795
7796@media (max-width: 719px) {
7797  .dac-hero-figure {
7798    height: 150px;
7799    margin: 15px 0;
7800  }
7801
7802  .dac-hero-figure img {
7803    max-height: 150px;
7804  }
7805}
7806
7807.dac-hero-carousel {
7808  height: 550px;
7809  position: relative;
7810}
7811
7812.dac-hero-carousel > .dac-hero {
7813  bottom: 0;
7814  left: 0;
7815  position: absolute;
7816  right: 0;
7817  top: 0;
7818  will-change: opacity;
7819}
7820
7821.dac-hero-carousel > .dac-hero,
7822    .dac-hero-carousel > .dac-hero .wrap {
7823  opacity: 0;
7824}
7825
7826.dac-hero-carousel > .dac-hero.active {
7827  opacity: 1;
7828  -webkit-transition: opacity .5s;
7829  transition: opacity .5s;
7830  z-index: 1;
7831}
7832
7833.dac-hero-carousel > .dac-hero.active .wrap {
7834  opacity: 1;
7835  -webkit-transition: opacity .5s .5s;
7836  transition: opacity .5s .5s;
7837}
7838
7839.dac-hero-carousel > .dac-hero.out,
7840    .dac-hero-carousel > .dac-hero.out .wrap {
7841  -webkit-transition: opacity 0s .5s;
7842  transition: opacity 0s .5s;
7843  opacity: 0;
7844}
7845
7846.dac-hero-carousel-action {
7847  bottom: 0;
7848  display: block;
7849  left: 0;
7850  position: absolute;
7851  right: 0;
7852  top: 0;
7853  z-index: 1;
7854}
7855
7856.dac-hero-carousel .dac-hero-cta {
7857  position: relative;
7858  z-index: 1;
7859}
7860
7861.dac-hero-carousel-pagination {
7862  bottom: 33px;
7863  left: 0;
7864  position: absolute;
7865  right: 0;
7866}
7867
7868@media (max-width: 719px) {
7869  .dac-hero-carousel-pagination {
7870    text-align: center;
7871    bottom: 20px;
7872  }
7873}
7874
7875.dac-hero-carousel-pagination .dac-pagination-item {
7876  position: relative;
7877  z-index: 1;
7878}
7879
7880.dac-pagination {
7881  list-style: none;
7882  margin: 0 -6px;
7883}
7884
7885.dac-pagination-item {
7886  background-clip: content-box;
7887  background-color: rgba(153, 153, 153, 0.4);
7888  border-radius: 50%;
7889  cursor: pointer;
7890  display: inline-block;
7891  height: 14px;
7892  overflow: hidden;
7893  padding: 6px;
7894  pointer-events: all;
7895  text-indent: 100%;
7896  -webkit-transition: background-color .1s ease-in;
7897  transition: background-color .1s ease-in;
7898  white-space: nowrap;
7899  width: 14px;
7900  will-change: background-color;
7901}
7902
7903.dac-pagination-item:hover {
7904  background-color: rgba(153, 153, 153, 0.6);
7905}
7906
7907.dac-pagination-item.active, .dac-pagination-item.active:hover {
7908  background-color: #6ab344;
7909}
7910
7911.dac-invert .dac-pagination-item {
7912  background-color: rgba(204, 204, 204, 0.2);
7913}
7914
7915.dac-invert .dac-pagination-item:hover {
7916  background-color: rgba(153, 153, 153, 0.4);
7917}
7918
7919@media (max-width: 719px) {
7920  .dac-pagination-item {
7921    height: 12px;
7922    width: 12px;
7923  }
7924}
7925
7926/* Form component */
7927.dac-form {
7928  color: #505050;
7929  font-size: 16px;
7930  /* Modal Responsive */
7931}
7932
7933.dac-form a {
7934  color: #000;
7935}
7936
7937.dac-form-aside {
7938  display: inline-block;
7939  font-size: 12px;
7940  margin-top: 0;
7941}
7942
7943.dac-form-required {
7944  color: #ef4300;
7945}
7946
7947.dac-form-fieldset {
7948  padding: 0;
7949}
7950
7951.dac-form-legend {
7952  display: block;
7953  color: #333;
7954  font-weight: 500;
7955  margin: 20px 0 12px;
7956  padding: 0;
7957  width: 100%;
7958}
7959
7960.dac-form-legend > .dac-form-required {
7961  float: right;
7962  margin-top: 3px;
7963}
7964
7965.dac-form-input {
7966  border: 0 solid #e3e3e3;
7967  border-bottom-width: 1px;
7968  display: block;
7969  outline: 0;
7970  padding: 1px 0 8px;
7971  -webkit-transition: border-color .2s;
7972  transition: border-color .2s;
7973  width: 100%;
7974}
7975
7976.dac-form-input-group {
7977  position: relative;
7978}
7979
7980.dac-form-input-group > .dac-form-required {
7981  display: block;
7982  bottom: 3px;
7983  position: absolute;
7984  right: 0;
7985}
7986
7987.dac-form-input:focus {
7988  border-bottom-color: #09f;
7989}
7990
7991.dac-form-floatlabel {
7992  display: block;
7993  cursor: text;
7994  margin-top: 5px;
7995  pointer-events: none;
7996  -webkit-transform-origin: 0 100%;
7997  -ms-transform-origin: 0 100%;
7998  transform-origin: 0 100%;
7999  -webkit-transform: translate3d(0, 22px, 0) scale(1);
8000  transform: translate3d(0, 22px, 0) scale(1);
8001  -webkit-transition: -webkit-transform .2s;
8002  transition: transform .2s;
8003}
8004
8005.dac-focused > .dac-form-floatlabel,
8006    .dac-has-value > .dac-form-floatlabel {
8007  cursor: default;
8008  -webkit-transform: translate3d(0, 0, 0) scale(0.75);
8009  transform: translate3d(0, 0, 0) scale(0.75);
8010}
8011
8012.dac-form-radio, .dac-form-checkbox {
8013  opacity: 0;
8014  position: absolute;
8015  visibility: hidden;
8016}
8017
8018.dac-form-radio-group, .dac-form-checkbox-group {
8019  display: table;
8020}
8021
8022.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 {
8023  margin-top: 10px;
8024}
8025
8026.dac-form-radio-button, .dac-form-checkbox-button {
8027  box-sizing: border-box;
8028  cursor: pointer;
8029  display: table-cell;
8030  float: left;
8031  height: 18px;
8032  margin: 2px 10px 0 0;
8033  position: relative;
8034  width: 18px;
8035}
8036
8037.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before {
8038  box-sizing: border-box;
8039  content: '';
8040  display: block;
8041  position: absolute;
8042}
8043
8044.dac-form-radio-button::after, .dac-form-radio-button::before {
8045  border-radius: 50%;
8046  height: 100%;
8047  width: 100%;
8048}
8049
8050.dac-form-radio-button::before {
8051  background: rgba(0, 0, 0, 0.7);
8052  -webkit-transform: translateZ(0) scale(0);
8053  transform: translateZ(0) scale(0);
8054  -webkit-transition: -webkit-transform .3s;
8055  transition: transform .3s;
8056}
8057
8058.dac-form-radio-button::after {
8059  border: 2px solid rgba(0, 0, 0, 0.7);
8060}
8061
8062.dac-form-radio:checked + .dac-form-radio-button::before {
8063  -webkit-transform: translateZ(0) scale(0.5);
8064  transform: translateZ(0) scale(0.5);
8065}
8066
8067.dac-form-radio:focus + .dac-form-radio-button::after {
8068  border: 2px solid #09f;
8069}
8070
8071.dac-form-checkbox-button::before {
8072  border: 1px solid #6c6e6f;
8073  border-radius: 3px;
8074  height: 100%;
8075  -webkit-transition: background .1s ease-out, box-shadow .3s ease-out;
8076  transition: background .1s ease-out, box-shadow .3s ease-out;
8077  width: 100%;
8078}
8079
8080.dac-form-checkbox-button::after {
8081  border-bottom: 2px solid #fff;
8082  border-left: 2px solid #fff;
8083  bottom: 7px;
8084  height: 7px;
8085  left: 3px;
8086  -webkit-transform: rotate(-45deg);
8087  -ms-transform: rotate(-45deg);
8088  transform: rotate(-45deg);
8089  width: 12px;
8090}
8091
8092.dac-form-checkbox:checked + .dac-form-checkbox-button::before {
8093  background: #6c6e6f;
8094  -webkit-transition-timing-function: ease-in;
8095  transition-timing-function: ease-in;
8096}
8097
8098.dac-form-checkbox:focus + .dac-form-checkbox-button::before,
8099  .dac-form-checkbox:active + .dac-form-checkbox-button::before {
8100  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
8101}
8102
8103.dac-form-label {
8104  cursor: pointer;
8105  -webkit-user-select: none;
8106  -moz-user-select: none;
8107  -ms-user-select: none;
8108  user-select: none;
8109}
8110
8111@media (max-width: 719px) {
8112  .dac-form-legend {
8113    margin-bottom: 0;
8114  }
8115}
8116
8117/* Filter Resources Component*/
8118.dac-filter {
8119  color: #505050;
8120  margin-bottom: 20px;
8121  position: relative;
8122}
8123
8124.dac-filter.dac-filter-section {
8125  margin-top: -45px;
8126  text-align: right;
8127}
8128
8129@media (max-width: 719px) {
8130  .dac-filter.dac-filter-section {
8131    margin-top: 0;
8132    text-align: left;
8133  }
8134}
8135
8136.dac-filter-title {
8137  color: #666;
8138  cursor: default;
8139  display: inline-block;
8140  font-size: 12px;
8141  font-weight: 500;
8142  line-height: 24px;
8143  margin: 0;
8144  text-transform: uppercase;
8145}
8146
8147@media (max-width: 719px) {
8148  .dac-filter-title {
8149    margin-bottom: 20px;
8150  }
8151}
8152
8153.dac-filter-message {
8154  color: #78868d;
8155  font-size: 18px;
8156  margin: 0 10px 10px;
8157}
8158
8159.dac-filter-count {
8160  background: #6ab344;
8161  border-radius: 50%;
8162  color: #fff;
8163  display: inline-block;
8164  font-size: 12px;
8165  font-weight: 600;
8166  height: 24px;
8167  text-align: center;
8168  width: 24px;
8169}
8170
8171.dac-filter-count.dac-disabled {
8172  visibility: hidden;
8173}
8174
8175.dac-filter-chip {
8176  background: #bfc7cb;
8177  border-radius: 15px;
8178  color: #333;
8179  cursor: default;
8180  display: inline-block;
8181  line-height: 21px;
8182  margin: 0 10px 10px 0;
8183  padding: 4px 26px 4px 10px;
8184  position: relative;
8185}
8186
8187.dac-filter-chip-close {
8188  background-color: transparent;
8189  border: none;
8190  cursor: pointer;
8191  outline: 0;
8192  padding: 3px;
8193  position: absolute;
8194  right: 5px;
8195  top: 5px;
8196}
8197
8198.dac-filter-chip-close-icon {
8199  opacity: .7;
8200  margin-top: -2px;
8201  -webkit-transform: scale(0.57142857);
8202  -ms-transform: scale(0.57142857);
8203  transform: scale(0.57142857);
8204}
8205
8206.dac-filter-chip-close:hover > .dac-filter-chip-close-icon {
8207  opacity: 1;
8208}
8209
8210.dac-filter-chips {
8211  border-top: 1px solid rgba(0, 0, 0, 0.1);
8212  margin: 0;
8213  list-style-type: none;
8214  padding: 10px 0 0;
8215  position: relative;
8216  text-align: left;
8217}
8218
8219.dac-filter-item {
8220  box-sizing: border-box;
8221  float: left;
8222  margin-bottom: 20px;
8223  padding: 0 10px;
8224  width: 33.33333333%;
8225}
8226
8227@media (min-width: 720px) and (max-width: 979px) {
8228  .dac-filter-item {
8229    width: 50%;
8230  }
8231}
8232
8233@media (max-width: 719px) {
8234  .dac-filter-item {
8235    width: 100%;
8236  }
8237}
8238
8239/* Media component */
8240.dac-media {
8241  display: table;
8242  width: 100%;
8243}
8244
8245.dac-media-body, .dac-media-figure {
8246  display: table-cell;
8247  vertical-align: top;
8248}
8249
8250.dac-media-figure {
8251  padding: 0;
8252}
8253
8254.dac-media-body {
8255  width: 100%;
8256}
8257
8258.dac-swap {
8259  overflow: hidden;
8260  position: relative;
8261}
8262
8263.dac-swap-section {
8264  left: 0;
8265  opacity: 0;
8266  position: absolute;
8267  top: 0;
8268  width: 100%;
8269  -webkit-transition: opacity 1s, -webkit-transform .5s;
8270  transition: opacity 1s, transform .5s;
8271}
8272
8273.dac-swap-section.dac-no-anim {
8274  -webkit-transition: none;
8275  transition: none;
8276}
8277
8278.dac-swap-section.dac-up {
8279  -webkit-transform: translateY(-100%);
8280  -ms-transform: translateY(-100%);
8281  transform: translateY(-100%);
8282}
8283
8284.dac-swap-section.dac-down {
8285  -webkit-transform: translateY(100%);
8286  -ms-transform: translateY(100%);
8287  transform: translateY(100%);
8288}
8289
8290.dac-swap-section.dac-left {
8291  -webkit-transform: translateX(-100%);
8292  -ms-transform: translateX(-100%);
8293  transform: translateX(-100%);
8294}
8295
8296.dac-swap-section.dac-right {
8297  -webkit-transform: translateX(100%);
8298  -ms-transform: translateX(100%);
8299  transform: translateX(100%);
8300}
8301
8302.dac-swap-section.dac-active {
8303  opacity: 1;
8304  position: relative;
8305  -webkit-transform: translate(0, 0);
8306  -ms-transform: translate(0, 0);
8307  transform: translate(0, 0);
8308  width: auto;
8309}
8310
8311/* Modal component */
8312.dac-modal {
8313  opacity: 0;
8314  visibility: hidden;
8315  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8316  transition: visibility 0s linear 300ms, opacity 300ms linear;
8317  background: rgba(0, 0, 0, 0.8);
8318  bottom: 0;
8319  left: 0;
8320  overflow-x: hidden;
8321  overflow-y: auto;
8322  position: fixed;
8323  right: 0;
8324  top: 0;
8325  z-index: 70;
8326}
8327
8328.dac-modal.dac-active {
8329  opacity: 1;
8330  -webkit-transition-delay: 0s;
8331  transition-delay: 0s;
8332  visibility: visible;
8333}
8334
8335.dac-modal-open {
8336  overflow: hidden;
8337}
8338
8339.dac-modal-container {
8340  -webkit-box-align: center;
8341  -webkit-align-items: center;
8342  -ms-flex-align: center;
8343  align-items: center;
8344  display: -webkit-box;
8345  display: -webkit-flex;
8346  display: -ms-flexbox;
8347  display: flex;
8348  -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8349  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8350  -webkit-box-pack: center;
8351  -webkit-justify-content: center;
8352  -ms-flex-pack: center;
8353  justify-content: center;
8354  min-height: 100%;
8355  width: 100%;
8356}
8357
8358.dac-modal-window {
8359  background: #fff;
8360  box-sizing: border-box;
8361  margin: 20px auto;
8362  -webkit-transition: -webkit-transform .3s;
8363  transition: transform .3s;
8364  -webkit-transform: translate3d(0, -30px, 0);
8365  transform: translate3d(0, -30px, 0);
8366  width: 960px;
8367}
8368
8369.dac-modal.dac-active .dac-modal-window {
8370  -webkit-transform: translate3d(0, 0, 0);
8371  transform: translate3d(0, 0, 0);
8372}
8373
8374.dac-modal-header {
8375  background: #00695c;
8376  padding: 35px 35px 30px;
8377  position: relative;
8378}
8379
8380.dac-has-small-header .dac-modal-header {
8381  padding: 10px 20px;
8382}
8383
8384.dac-modal-header-actions {
8385  padding: 8px;
8386  position: absolute;
8387  right: 5px;
8388  top: 5px;
8389}
8390
8391.dac-modal-header-open, .dac-modal-header-close {
8392  background: none;
8393  border: none;
8394  cursor: pointer;
8395  line-height: 0;
8396  outline: 0;
8397  opacity: .7;
8398  -webkit-transition: background-color .3s;
8399  transition: background-color .3s;
8400}
8401
8402.dac-modal-header-open:active, .dac-modal-header-close:active {
8403  background: rgba(255, 255, 255, 0.2);
8404}
8405
8406.dac-modal-header-close:before {
8407  content: '';
8408  top: -1px;
8409  position: relative;
8410}
8411
8412.dac-modal-header-open {
8413  margin: 10px;
8414}
8415
8416.dac-modal-header-title {
8417  color: #fff;
8418  font-size: 24px;
8419  font-weight: 300;
8420  line-height: 32px;
8421  padding: 0 150px 0 0;
8422}
8423
8424.dac-has-small-header .dac-modal-header-title {
8425  font-size: 16px;
8426  font-weight: 500;
8427}
8428
8429.dac-modal-header-subtitle {
8430  bottom: 0;
8431  color: #fff;
8432  display: inline-block;
8433  font: inherit;
8434  font-size: 14px;
8435  margin: 0;
8436  opacity: .8;
8437  position: absolute;
8438  right: 0;
8439}
8440
8441.dac-modal-content {
8442  padding: 12px 35px;
8443}
8444
8445.dac-modal-action {
8446  margin: 0;
8447}
8448
8449.dac-modal-footer {
8450  padding: 24px 35px;
8451}
8452
8453@media (max-width: 1000px) {
8454  .dac-modal-window {
8455    margin: 20px;
8456    width: auto;
8457  }
8458
8459  .dac-modal-container {
8460    z-index: auto;
8461  }
8462}
8463
8464@media (max-width: 719px) {
8465  .dac-modal-window {
8466    margin: 10px;
8467  }
8468
8469  .dac-modal-header {
8470    padding: 35px 10px 10px;
8471  }
8472
8473  .dac-modal-header-title {
8474    font-size: 16px;
8475    line-height: 24px;
8476    padding: 0;
8477  }
8478
8479  .dac-modal-header-subtitle {
8480    display: block;
8481    margin: 0;
8482    position: static;
8483    text-align: right;
8484  }
8485
8486  .dac-modal-header-actions {
8487    top: 1px;
8488  }
8489
8490  .dac-modal-content {
8491    padding: 10px;
8492  }
8493
8494  .dac-modal-footer {
8495    border-top: 1px solid #e3e3e3;
8496    padding: 35px 10px;
8497  }
8498}
8499
8500.newsletter .dac-modal-footer {
8501  padding-top: 0;
8502  text-align: right;
8503}
8504
8505.newsletter-checkboxes {
8506  padding-top: 20px;
8507}
8508
8509.newsletter-success-message {
8510  font-size: 32px;
8511  line-height: 1.4;
8512  padding: 40px 30px;
8513  text-align: center;
8514}
8515
8516@media (max-width: 719px) {
8517  .newsletter-success-message {
8518    font-size: 16px;
8519    padding: 12px 0 0;
8520  }
8521}
8522
8523@media (min-width: 720px) {
8524  .newsletter-checkboxes {
8525    padding-top: 46px;
8526  }
8527
8528  .newsletter-leftCol {
8529    padding-right: 40px;
8530  }
8531
8532  .newsletter-rightCol {
8533    padding-left: 40px;
8534  }
8535}
8536
8537@media (max-width: 719px) {
8538  .newsletter .dac-modal-footer {
8539    margin-top: 30px;
8540    padding: 30px 10px;
8541    text-align: center;
8542  }
8543}
8544
8545.dac-blog-reader {
8546  padding: 50px 90px;
8547}
8548
8549.dac-blog-reader-title {
8550  color: #333;
8551  font-size: 45px;
8552  font-weight: 300;
8553  line-height: 1.2;
8554  padding: 10px 0;
8555}
8556
8557.dac-blog-reader-date {
8558  color: #b8b8b8;
8559  font-size: 12px;
8560  font-weight: 600;
8561  line-height: 1;
8562  text-transform: uppercase;
8563}
8564
8565.dac-blog-reader-text > p:first-child i {
8566  display: inline-block;
8567  margin-bottom: 40px;
8568}
8569
8570.dac-blog-reader-text li {
8571  margin-bottom: 0;
8572}
8573
8574.dac-blog-reader-text iframe {
8575  margin-left: auto !important;
8576  margin-right: auto !important;
8577  max-width: 100%;
8578}
8579
8580@media (max-width: 719px) {
8581  .dac-blog-reader {
8582    padding: 30px 20px;
8583  }
8584}
8585
8586.dac-custom-search {
8587  background: #fff;
8588  margin: 0 -10px;
8589  padding: 20px 10px;
8590  z-index: 1;
8591}
8592
8593.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social {
8594  top: -48px;
8595}
8596
8597.dac-custom-search-section-title {
8598  color: #505050;
8599}
8600
8601.dac-custom-search-entry {
8602  margin-bottom: 36px;
8603  margin-top: 24px;
8604}
8605
8606.dac-custom-search-image {
8607  background-size: cover;
8608  height: 112px;
8609}
8610
8611.dac-custom-search-title {
8612  color: #333;
8613  font-size: 14px;
8614  font-weight: 700;
8615  line-height: 24px;
8616  padding: 0;
8617}
8618
8619.dac-custom-search-title a {
8620  color: inherit;
8621}
8622
8623.dac-custom-search-section {
8624  color: #999;
8625  font-size: 16px;
8626  font-variant: small-caps;
8627  font-weight: 700;
8628  margin: -5px 0 0 0;
8629}
8630
8631.dac-custom-search-snippet {
8632  color: #666;
8633  margin: 0;
8634}
8635
8636.dac-custom-search-link {
8637  font-weight: 500;
8638  word-wrap: break-word;
8639  width: 100%;
8640}
8641
8642.dac-custom-search-load-more {
8643  background: none;
8644  border: none;
8645  color: #333;
8646  cursor: pointer;
8647  display: block;
8648  font-size: 14px;
8649  font-weight: 700;
8650  margin: 75px auto;
8651  outline: none;
8652  padding: 10px;
8653}
8654
8655.dac-custom-search-load-more:hover {
8656  opacity: 0.7;
8657}
8658
8659.dac-custom-search-no-results {
8660  color: #999;
8661}
8662
8663.dac-search-hero {
8664  font-size: 16px;
8665  padding: 50px 0 14px 0;
8666}
8667
8668.dac-search-results {
8669  opacity: 0;
8670  visibility: hidden;
8671  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8672  transition: visibility 0s linear 300ms, opacity 300ms linear;
8673  background-color: #fff;
8674  bottom: 0;
8675  left: 0;
8676  overflow-y: auto;
8677  padding: 0 10px;
8678  position: fixed;
8679  right: 0;
8680  -webkit-transition: opacity 100ms;
8681  transition: opacity 100ms;
8682  top: 64px;
8683  z-index: 50;
8684}
8685
8686.dac-nav-animating .dac-search-results {
8687  -webkit-transition: opacity 100ms, padding .3s;
8688  transition: opacity 100ms, padding .3s;
8689}
8690
8691.dac-search-results * {
8692  box-sizing: border-box;
8693}
8694
8695.dac-search-open .dac-search-results {
8696  opacity: 1;
8697  visibility: visible;
8698}
8699
8700.dac-search-results-content {
8701  background: #eceff1;
8702  margin: 0 -10px;
8703  padding: 0 10px;
8704}
8705
8706.dac-search-results-for {
8707  margin-bottom: -5px;
8708  overflow: hidden;
8709  padding-top: 5px;
8710}
8711
8712.dac-search-results-for span {
8713  color: #039bef;
8714}
8715
8716.dac-search-mode .dac-search-results-for {
8717  display: none;
8718}
8719
8720.dac-search-results-history {
8721  background: #eceff1;
8722  min-height: 100%;
8723  margin: 0 -10px;
8724  padding: 0 10px;
8725}
8726
8727.dac-search-results-hero {
8728  padding-top: 20px;
8729}
8730
8731.dac-search-results-metadata {
8732  padding-bottom: 40px;
8733}
8734
8735.dac-search-results-reference {
8736  background: white;
8737  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
8738  margin: 0 0 20px 0;
8739  height: 340px;
8740  overflow: hidden;
8741  padding: 6px 0 4px;
8742}
8743
8744.dac-search-results-reference .namespace {
8745  color: #666;
8746}
8747
8748.dac-search-results-reference.is-expanded {
8749  height: auto;
8750}
8751
8752.dac-search-results-reference-header {
8753  color: #999;
8754  font-size: 16px;
8755  font-variant: small-caps;
8756  font-weight: 700;
8757  margin: 0;
8758  padding: 18px 12px 0;
8759  text-transform: lowercase;
8760}
8761
8762.dac-search-results-reference-header:first-child {
8763  padding-top: 0;
8764}
8765
8766.dac-search-results-reference-entry {
8767  margin: 0;
8768}
8769
8770.dac-search-results-reference-entry a {
8771  color: #333;
8772  display: block;
8773  font-size: 0.81em;
8774  line-height: 1.2em;
8775  padding: 0 12px 5px 12px;
8776  width: 100%;
8777  white-space: nowrap;
8778}
8779
8780.dac-search-results-reference-entry a:hover {
8781  background-color: #eceff1;
8782}
8783
8784.dac-search-results-reference-entry em {
8785  font-style: normal;
8786  font-weight: 700;
8787}
8788
8789.dac-search-results-reference-entry-empty {
8790  color: #999;
8791  font-size: 0.81em;
8792  margin: 0;
8793  padding: 2px 12px 14px;
8794}
8795
8796.dac-search-results-resources {
8797  margin: 0;
8798}
8799
8800.dac-search-results-resources .resource-card {
8801  border-right: 2px solid #999;
8802}
8803
8804.dac-search-results-resources .resource-card-about {
8805  border-right: 2px solid #6ab344;
8806}
8807
8808.dac-search-results-resources .resource-card-about .section {
8809  color: #6ab344;
8810}
8811
8812.dac-search-results-resources .resource-card-develop {
8813  border-right: 2px solid #ff7043;
8814}
8815
8816.dac-search-results-resources .resource-card-develop .section {
8817  color: #ff7043;
8818}
8819
8820.dac-search-results-resources .resource-card-design {
8821  border-right: 2px solid #00bcd4;
8822}
8823
8824.dac-search-results-resources .resource-card-design .section {
8825  color: #00bcd4;
8826}
8827
8828.dac-search-results-resources .resource-card-distribute {
8829  border-right: 2px solid #afb42b;
8830}
8831
8832.dac-search-results-resources .resource-card-distribute .section {
8833  color: #afb42b;
8834}
8835
8836@media (max-width: 719px) {
8837  .dac-search-results-reference.no-results {
8838    display: none;
8839  }
8840}
8841
8842@media (min-width: 980px) {
8843  .dac-nav-open.dac-search-open .dac-search-results {
8844    padding-left: 260px;
8845  }
8846
8847  .dac-search-mode.dac-search-open .dac-search-results {
8848    padding-left: 10px;
8849  }
8850}
8851
8852.dac-selected {
8853  color: #039bef !important;
8854}
8855
8856.dac-selected em {
8857  color: #039bef;
8858}
8859
8860.resource-card.dac-selected {
8861  box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7);
8862}
8863
8864.resource-card.dac-selected em {
8865  color: #333;
8866}
8867
8868.dac-expand, .dac-section {
8869  margin-left: -20px;
8870  margin-right: -20px;
8871  padding-left: 20px;
8872  padding-right: 20px;
8873}
8874
8875@media (max-width: 719px) {
8876  .dac-expand, .dac-section {
8877    margin-left: -10px;
8878    margin-right: -10px;
8879    padding-left: 10px;
8880    padding-right: 10px;
8881  }
8882}
8883
8884.dac-invert {
8885  color: #b3b3b3;
8886  color: rgba(255, 255, 255, 0.7);
8887}
8888
8889.dac-invert h1, .dac-invert h2, .dac-invert h3 {
8890  color: #fff;
8891}
8892
8893.dac-light.dac-hero, .dac-light.dac-section {
8894  background-color: #eceff1;
8895}
8896
8897.dac-gray.dac-hero, .dac-gray.dac-section {
8898  background-color: #d8dfe2;
8899}
8900
8901.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section {
8902   background-color: #b0bec5;
8903}
8904
8905.dac-dark.dac-hero, .dac-dark.dac-section {
8906  background-color: #37474f;
8907}
8908
8909.dac-red.dac-hero, .dac-red.dac-section {
8910  background-color: #dc4d38;
8911}
8912
8913.dac-hero-cta, .dac-section-title, .dac-section-links {
8914  color: #212121;
8915  color: rgba(0, 0, 0, 0.87);
8916}
8917
8918.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
8919  color: white;
8920}
8921
8922.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 {
8923  opacity: .87;
8924}
8925
8926.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 {
8927  opacity: 1;
8928}
8929
8930.dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
8931  color: #757575;
8932  color: rgba(0, 0, 0, 0.54);
8933}
8934
8935.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle {
8936  color: #b3b3b3;
8937  color: rgba(255, 255, 255, 0.7);
8938}
8939
8940.dac-section {
8941  background-position: 50% 50%;
8942  background-size: cover;
8943  padding-bottom: 84px;
8944  padding-top: 84px;
8945  position: relative;
8946}
8947
8948@media (max-width: 719px) {
8949  .dac-section {
8950    padding-bottom: 52px;
8951    padding-top: 52px;
8952  }
8953}
8954
8955.dac-section.dac-small {
8956  padding-bottom: 32px;
8957  padding-top: 32px;
8958}
8959
8960.dac-section.dac-slim {
8961  padding-bottom: 0;
8962  padding-top: 0;
8963}
8964
8965.dac-section-title {
8966  text-align: center;
8967  padding-bottom: 40px;
8968  padding-top: 0;
8969}
8970
8971.dac-section-subtitle {
8972  font-size: 16px;
8973  padding-bottom: 40px;
8974  margin-top: -24px;
8975  text-align: center;
8976}
8977
8978.dac-section-links {
8979  font-size: 16px;
8980  list-style: none;
8981  line-height: 40px;
8982  margin: 16px 0 0;
8983  text-align: center;
8984}
8985
8986@media (max-width: 719px) {
8987  .dac-section-links {
8988    margin-left: -8px;
8989    text-align: left;
8990  }
8991}
8992
8993.dac-section-link {
8994  cursor: pointer;
8995  display: inline-block;
8996  margin: 0 32px;
8997  -webkit-transition: opacity .3s;
8998  transition: opacity .3s;
8999}
9000
9001.dac-section-link:hover {
9002  opacity: .54;
9003}
9004
9005@media (max-width: 719px) {
9006  .dac-section-link {
9007    display: block;
9008    margin: 0;
9009  }
9010}
9011
9012.dac-section-link a {
9013  color: inherit;
9014}
9015
9016/*
9017SCSS variables are information about icon's compiled state, stored under its original file name
9018
9019.icon-home {
9020  width: $icon-home-width;
9021}
9022
9023The large array-like variables contain all information about a single icon
9024$icon-home: x y offset_x offset_y width height total_width total_height image_path;
9025
9026At the bottom of this section, we provide information about the spritesheet itself
9027$spritesheet: width height image $spritesheet-sprites;
9028*/
9029.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,
9030#qv li:before {
9031  background-image: url(/assets/images/sprite.png);
9032  display: inline-block;
9033  vertical-align: middle; }
9034  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) {
9035    .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,
9036    #qv li:before {
9037      background-image: url(/assets/images/sprite@2x.png);
9038      background-size: 36px 883px; } }
9039
9040.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 {
9041  background-position: 0px -669px;
9042  height: 24px;
9043  width: 24px;
9044  vertical-align: -6px; }
9045  .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 {
9046    background-position: 0px -513px;
9047    height: 24px;
9048    width: 24px; }
9049
9050.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 {
9051  background-position: 0px -695px;
9052  height: 36px;
9053  width: 36px;
9054  vertical-align: -10px; }
9055  .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 {
9056    background-position: 0px -771px;
9057    height: 36px;
9058    width: 36px; }
9059
9060.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 {
9061  background-position: 0px -487px;
9062  height: 24px;
9063  width: 24px;
9064  vertical-align: -6px; }
9065  .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 {
9066    background-position: 0px -565px;
9067    height: 24px;
9068    width: 24px; }
9069
9070.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 {
9071  background-position: 0px -539px;
9072  height: 24px;
9073  width: 24px;
9074  vertical-align: -6px; }
9075  .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 {
9076    background-position: 0px -305px;
9077    height: 24px;
9078    width: 24px; }
9079
9080.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 {
9081  background-position: 0px 0px;
9082  height: 11px;
9083  width: 19px; }
9084
9085.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 {
9086  background-position: 0px -215px;
9087  height: 18px;
9088  width: 11px; }
9089
9090.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 {
9091  background-position: 0px -123px;
9092  height: 16px;
9093  width: 16px; }
9094
9095.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 {
9096  background-position: 0px -695px;
9097  height: 36px;
9098  width: 36px; }
9099
9100.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 {
9101  background-position: 0px -771px;
9102  height: 36px;
9103  width: 36px; }
9104
9105.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 {
9106  background-position: 0px -669px;
9107  height: 24px;
9108  width: 24px; }
9109
9110.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 {
9111  background-position: 0px -513px;
9112  height: 24px;
9113  width: 24px; }
9114
9115.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 {
9116  background-position: 0px -89px;
9117  height: 14px;
9118  width: 14px; }
9119
9120.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 {
9121  background-position: 0px -435px;
9122  height: 24px;
9123  width: 24px; }
9124
9125.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 {
9126  background-position: 0px -27px;
9127  height: 12px;
9128  width: 12px; }
9129
9130.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 {
9131  background-position: 0px -409px;
9132  height: 24px;
9133  width: 24px; }
9134
9135.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 {
9136  background-position: 0px -383px;
9137  height: 24px;
9138  width: 24px; }
9139
9140.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 {
9141  background-position: 0px -357px;
9142  height: 24px;
9143  width: 24px; }
9144
9145.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 {
9146  background-position: 0px -331px;
9147  height: 24px;
9148  width: 24px; }
9149
9150.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 {
9151  background-position: 0px -279px;
9152  height: 24px;
9153  width: 24px; }
9154
9155.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 {
9156  background-position: 0px -235px;
9157  height: 20px;
9158  width: 17px; }
9159
9160.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 {
9161  background-position: 0px -809px;
9162  height: 36px;
9163  width: 36px; }
9164
9165.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 {
9166  background-position: 0px -13px;
9167  height: 12px;
9168  width: 16px; }
9169
9170.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 {
9171  background-position: 0px -105px;
9172  height: 16px;
9173  width: 16px; }
9174
9175.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 {
9176  background-position: 0px -177px;
9177  height: 16px;
9178  width: 16px; }
9179
9180.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 {
9181  background-position: 0px -159px;
9182  height: 16px;
9183  width: 16px; }
9184
9185.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 {
9186  background-position: 0px -141px;
9187  height: 16px;
9188  width: 16px; }
9189
9190.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 {
9191  background-position: 0px -195px;
9192  height: 18px;
9193  width: 18px; }
9194
9195.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 {
9196  background-position: 0px -461px;
9197  height: 24px;
9198  width: 24px; }
9199
9200.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 {
9201  background-position: 0px -733px;
9202  height: 36px;
9203  width: 36px; }
9204
9205.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 {
9206  background-position: 0px -847px;
9207  height: 36px;
9208  width: 36px; }
9209
9210.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 {
9211  background-position: 0px -257px;
9212  height: 20px;
9213  width: 16px; }
9214
9215.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 {
9216  background-position: 0px -41px;
9217  height: 14px;
9218  width: 14px; }
9219
9220.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 {
9221  background-position: 0px -591px;
9222  height: 24px;
9223  width: 24px; }
9224
9225.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 {
9226  background-position: 0px -617px;
9227  height: 24px;
9228  width: 24px; }
9229
9230.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 {
9231  background-position: 0px -643px;
9232  height: 24px;
9233  width: 24px; }
9234
9235.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 {
9236  background-position: 0px -73px;
9237  height: 14px;
9238  width: 16px; }
9239
9240.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 {
9241  background-position: 0px -565px;
9242  height: 24px;
9243  width: 24px; }
9244
9245.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 {
9246  background-position: 0px -487px;
9247  height: 24px;
9248  width: 24px; }
9249
9250.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 {
9251  background-position: 0px -305px;
9252  height: 24px;
9253  width: 24px; }
9254
9255.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 {
9256  background-position: 0px -539px;
9257  height: 24px;
9258  width: 24px; }
9259
9260.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 {
9261  background-position: 0px -57px;
9262  height: 14px;
9263  width: 18px; }
9264
9265/* Toast Component */
9266.dac-toast {
9267  background: #ffebc3;
9268  border-top: 1px solid #e5d4a1;
9269  display: none;
9270  color: rgba(0, 0, 0, 0.87);
9271  line-height: 1.4;
9272  padding: 10px; }
9273  .dac-toast.dac-visible {
9274    display: block; }
9275  .dac-toast-wrap {
9276    box-sizing: border-box;
9277    margin: 0 auto;
9278    max-width: 940px;
9279    padding-right: 20px;
9280    position: relative; }
9281  .dac-toast-close-btn {
9282    background-color: transparent;
9283    border: none;
9284    border-radius: 0;
9285    cursor: pointer;
9286    opacity: .4;
9287    padding: 0;
9288    position: absolute;
9289    right: 0;
9290    top: 1px; }
9291    .dac-toast-close-btn:hover, .dac-toast-close-btn:focus, .dac-toast-close-btn:active {
9292      outline: none;
9293      opacity: 1; }
9294  .dac-toast-group {
9295    bottom: 0;
9296    left: 0;
9297    position: fixed;
9298    right: 0;
9299    z-index: 60; }
9300  .dac-toast.dac-danger {
9301    background-color: #ffccbc;
9302    border-top-color: #e5b7a9; }
9303  .dac-toast.dac-success {
9304    background-color: #cdedc8;
9305    border-top-color: #c6d5b4; }
9306
9307.dac-tab-item {
9308  box-sizing: border-box;
9309  cursor: pointer;
9310  display: table-cell;
9311  margin: 0;
9312  padding: 8px 12px;
9313  position: relative;
9314  text-align: left; }
9315  @media (max-width: 719px) {
9316    .dac-tab-item {
9317      padding-right: 12px;
9318      text-align: center;
9319      width: 33.33333333%; } }
9320
9321.dac-tab-title {
9322  color: #333;
9323  display: inline-block;
9324  font-size: 16px;
9325  font-weight: 500;
9326  margin: 0; }
9327
9328.dac-tab-arrow {
9329  margin-top: -2px; }
9330  @media (max-width: 719px) {
9331    .dac-tab-arrow {
9332      position: absolute;
9333      visibility: hidden; } }
9334
9335.dac-tab-bar {
9336  display: inline-block;
9337  list-style-type: none;
9338  margin: 0 0 0 12px;
9339  vertical-align: middle;
9340  overflow: hidden; }
9341  @media (max-width: 719px) {
9342    .dac-tab-bar {
9343      display: table;
9344      margin-left: 0;
9345      width: 100%; } }
9346
9347.dac-tab-views {
9348  list-style-type: none;
9349  margin: 0; }
9350
9351.dac-tab-view {
9352  background: #fff;
9353  display: none;
9354  overflow: hidden;
9355  margin: 0 0 10px;
9356  padding: 20px 10px 0;
9357  text-align: left; }
9358
9359.dac-tab-item.dac-active {
9360  background: #fff; }
9361
9362.dac-tab-item.dac-active .dac-tab-arrow {
9363  -webkit-transform: scaleY(-1);
9364      -ms-transform: scaleY(-1);
9365          transform: scaleY(-1); }
9366
9367.dac-tab-view.dac-active {
9368  display: block; }
9369
9370.dac-toggle-expand {
9371  cursor: pointer;
9372  display: inline-block; }
9373
9374.dac-toggle-collapse {
9375  cursor: pointer;
9376  display: none; }
9377
9378.dac-toggle.is-expanded .dac-toggle-expand {
9379  display: none; }
9380
9381.dac-toggle.is-expanded .dac-toggle-collapse {
9382  display: inline-block; }
9383
9384.dac-toggle-content {
9385  clear: left;
9386  overflow: hidden;
9387  max-height: 0;
9388  -webkit-transition: .3s max-height;
9389          transition: .3s max-height; }
9390
9391.dac-toggle.is-expanded .dac-toggle-content {
9392  max-height: none; }
9393
9394.dac-toggle.dac-mobile .dac-toggle-content {
9395  max-height: none; }
9396
9397@media (max-width: 719px) {
9398  .dac-toggle.dac-mobile .dac-toggle-content {
9399    max-height: 0; }
9400  .dac-toggle.is-expanded .dac-toggle-content {
9401    max-height: none; } }
9402
9403/**
9404 * Fades out an element.
9405 * Applies visibility hidden when the transition is finished.
9406 *
9407 * Use opacity: 1; to show the element.
9408 */
9409.dac-visible-mobile-block, .dac-mobile-only,
9410.dac-visible-mobile-inline,
9411.dac-visible-mobile-inline-block,
9412.dac-visible-tablet-block,
9413.dac-visible-tablet-inline,
9414.dac-visible-tablet-inline-block,
9415.dac-visible-desktop-block,
9416.dac-visible-desktop-inline,
9417.dac-visible-desktop-inline-block {
9418  display: none !important; }
9419
9420@media (max-width: 719px) {
9421  .dac-hidden-mobile {
9422    display: none !important; }
9423  .dac-visible-mobile-block, .dac-mobile-only {
9424    display: block !important; }
9425  .dac-visible-mobile-inline {
9426    display: inline !important; }
9427  .dac-visible-mobile-inline-block {
9428    display: inline-block !important; } }
9429
9430@media (min-width: 720px) and (max-width: 979px) {
9431  .dac-hidden-tablet {
9432    display: none !important; }
9433  .dac-visible-tablet-block {
9434    display: block !important; }
9435  .dac-visible-tablet-inline {
9436    display: inline !important; }
9437  .dac-visible-tablet-inline-block {
9438    display: inline-block !important; } }
9439
9440@media (min-width: 980px) {
9441  .dac-hidden-desktop {
9442    display: none !important; }
9443  .dac-visible-desktop-block {
9444    display: block !important; }
9445  .dac-visible-desktop-inline {
9446    display: inline !important; }
9447  .dac-visible-desktop-inline-block {
9448    display: inline-block !important; } }
9449
9450.dac-offset-parent {
9451  position: relative !important; }
9452
9453/**
9454 * Hide from browsers/screenreaders on all sizes.
9455 */
9456.dac-hidden {
9457  display: none !important; }
9458
9459/**
9460 * Break strings when their length exceeds the width of their container.
9461 */
9462.dac-text-break {
9463  word-wrap: break-word !important; }
9464
9465/**
9466 * Horizontal text alignment
9467 */
9468.dac-text-center {
9469  text-align: center !important; }
9470
9471.dac-text-left {
9472  text-align: left !important; }
9473
9474.dac-text-right {
9475  text-align: right !important; }
9476
9477/**
9478 * Prevent whitespace wrapping
9479 */
9480.dac-text-no-wrap {
9481  white-space: nowrap !important; }
9482
9483/**
9484 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
9485 */
9486.dac-text-truncate {
9487  max-width: 100%;
9488  overflow: hidden !important;
9489  text-overflow: ellipsis !important;
9490  white-space: nowrap !important;
9491  word-wrap: normal !important; }
9492
9493/**
9494 * Floats
9495 */
9496.dac-float-left {
9497  float: left !important; }
9498
9499.dac-float-right {
9500  float: right !important; }
9501
9502/**
9503 * New block formatting context
9504 *
9505 * This affords some useful properties to the element. It won't wrap under
9506 * floats. Will also contain any floated children.
9507 * N.B. This will clip overflow. Use the alternative method below if this is
9508 * problematic.
9509 */
9510.dac-nbfc {
9511  overflow: hidden !important;
9512}
9513
9514/**
9515 * New block formatting context (alternative)
9516 *
9517 * Alternative method when overflow must not be clipped.
9518 *
9519 * N.B. This breaks down in some browsers when elements within this element
9520 * exceed its width.
9521 */
9522.dac-nbfc-alt {
9523  display: table-cell !important;
9524  width: 10000px !important;
9525}
9526
9527.Video {
9528  display: none;
9529}
9530
9531.Video-overlay {
9532  background-color: rgba(0, 0, 0, 0.8);
9533  width: 100%;
9534  height: 100%;
9535  position: fixed;
9536  top: 0;
9537  left: 0;
9538  z-index: 9999;
9539}
9540
9541.Video-container {
9542  width: 90vw;
9543  height: 50.625vw;
9544  max-height: calc(90vh - 29.25px);
9545  max-width: calc(160vh - 52px);
9546  margin: auto;
9547  position: fixed;
9548  top: -52px;
9549  right: 0;
9550  bottom: 0;
9551  left: 0;
9552  z-index: 9999;
9553}
9554
9555@media (min-width: 1422.22222222px) and (min-height: 800px) {
9556  .Video-container {
9557    width: 1280px;
9558    height: 720px;
9559  }
9560}
9561
9562.Video-controls {
9563  background: #28655F;
9564  height: 52px;
9565  margin: 0 auto;
9566  position: relative;
9567  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9568}
9569
9570.Video-frame {
9571  position: relative;
9572  height: 100%;
9573  background: black;
9574  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9575}
9576
9577.Video-loading {
9578  color: rgba(255, 255, 255, 0.35);
9579  font-size: 16px;
9580  position: absolute;
9581  top: 50%;
9582  left: 50%;
9583  -webkit-transform: translate(-50%, -50%);
9584  -ms-transform: translate(-50%, -50%);
9585  transform: translate(-50%, -50%);
9586}
9587
9588#youTubePlayer {
9589  max-height: 720px;
9590  position: absolute;
9591  top: 0;
9592  right: 0;
9593  bottom: 0;
9594  left: 0;
9595  width: 100%;
9596  height: 100%;
9597}
9598
9599.Video-button {
9600  background-color: transparent;
9601  border: none;
9602  display: inline-block;
9603  height: 100%;
9604  width: 52px;
9605  outline: none;
9606  cursor: pointer;
9607  -webkit-transition: opacity 200ms;
9608  transition: opacity 200ms;
9609}
9610
9611.Video-button:hover {
9612  opacity: 0.8;
9613}
9614
9615.Video-button--picture-in-picture {
9616  background-position: 0px -461px;
9617  height: 24px;
9618  width: 24px;
9619  display: none;
9620  position: absolute;
9621  right: 64px;
9622  top: 14px;
9623}
9624
9625.Video-button--close {
9626  background-position: 0px -435px;
9627  height: 24px;
9628  width: 24px;
9629  position: absolute;
9630  right: 14px;
9631  top: 14px;
9632}
9633
9634@media (min-width: 720px) {
9635  .Video--picture-in-picture .Video-overlay {
9636    display: none;
9637  }
9638
9639  .Video--picture-in-picture .Video-container {
9640    top: auto;
9641    left: auto;
9642    bottom: 20px;
9643    right: 20px;
9644    width: 40%;
9645    max-width: 420px;
9646    height: auto;
9647  }
9648
9649  .Video--picture-in-picture .Video-button--picture-in-picture {
9650    background-position: 0px -409px;
9651    height: 24px;
9652    width: 24px;
9653  }
9654
9655  .Video--picture-in-picture .Video-frame {
9656    padding-bottom: 56.25%;
9657  }
9658
9659  .Video-button--picture-in-picture {
9660    display: inline-block;
9661  }
9662}
9663
9664a.video-shadowbox-button.white {
9665  padding: 16px 42px 16px 8px;
9666  font-size: 18px;
9667  font-weight: 500;
9668  line-height: 24px;
9669  color: #fff;
9670  text-decoration: none;
9671}
9672
9673a.video-shadowbox-button.white::after {
9674  content: '';
9675  background-position: 0px -847px;
9676  height: 36px;
9677  width: 36px;
9678}
9679
9680a.video-shadowbox-button.white:hover {
9681  color: #bababa !important;
9682}
9683
9684a.video-shadowbox-button.white:hover::after {
9685  background-position: 0px -733px;
9686  height: 36px;
9687  width: 36px;
9688}
9689
9690#video-frame, #video-container {
9691  display: none;
9692}
9693
9694@media (max-width: 720px) {
9695  .wide-table {
9696    overflow-x: auto;
9697  }
9698
9699  .wide-table table {
9700    display: inline-table;
9701    margin-right: 0;
9702  }
9703}
9704
9705/* New CSS that isn't part of a component */
9706.paging-links {
9707  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
9708  margin: 30px 0;
9709  padding: 0 40px;
9710  /* Start class link doesn't have a caption */ }
9711
9712.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9713  font-size: 20px;
9714  font-weight: 500;
9715  display: inline-block;
9716  width: calc(50% - 2px);
9717  position: relative;
9718  padding: 46px 0 36px 0;
9719}
9720
9721@media (max-width: 719px) {
9722  .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9723    width: 100%;
9724  }
9725}
9726
9727.paging-links .start-class-link {
9728  padding: 36px 0;
9729}
9730
9731.paging-links .start-class-link, .paging-links .next-class-link {
9732  text-align: center;
9733  width: 100%;
9734}
9735
9736.paging-links .prev-page-link .page-link-caption {
9737  left: 0;
9738}
9739
9740.paging-links .prev-page-link:before {
9741  content: '';
9742  left: -24px;
9743  position: absolute;
9744  bottom: 41px;
9745}
9746
9747@media (max-width: 719px) {
9748  .paging-links .prev-page-link {
9749    display: none;
9750  }
9751}
9752
9753.paging-links .next-page-link, .paging-links .next-class-link {
9754  text-align: right;
9755}
9756
9757.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption {
9758  right: 0;
9759}
9760
9761.paging-links .next-page-link:before, .paging-links .next-class-link:before {
9762  content: '';
9763  right: -24px;
9764  position: absolute;
9765  bottom: 41px;
9766}
9767
9768.paging-links .start-class-link:after {
9769  content: '';
9770  right: -12px;
9771  position: relative;
9772  bottom: 3px;
9773}
9774
9775.paging-links .page-link-caption {
9776  position: absolute;
9777  top: 26px;
9778  font-size: 14px;
9779  font-weight: 700;
9780  opacity: 0.54;
9781}
9782
9783#tb li:before,
9784#qv li:before {
9785  background-position: 0px -669px;
9786  height: 24px;
9787  width: 24px;
9788  content: '';
9789  left: -8px;
9790  opacity: .7;
9791  position: absolute;
9792  top: -4px;
9793}
9794