default.css revision c607a4d4d5f303d3ff139d752ccd69a7b2567aea 
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/* Android Studio download page */
7797section#features {
7798  padding-top:0;
7799}
7800.wrap.feature {
7801  margin:80px auto;
7802}
7803.dac-section-links.feature-more {
7804  margin-top:-20px;
7805}
7806.dac-toggle-content .wrap.feature {
7807  margin-top:0;
7808}
7809
7810@media (max-width: 719px) {
7811  .dac-hero-figure {
7812    height: 150px;
7813    margin: 15px 0;
7814  }
7815
7816  .dac-hero-figure img {
7817    max-height: 150px;
7818  }
7819
7820  /* Android Studio download page */
7821  .feature .dac-hero-figure,
7822  .feature .dac-hero-figure img {
7823    height:auto;
7824    max-height:none;
7825  }
7826  .feature .dac-hero-figure img {
7827    width:90%;
7828    margin:0 auto;
7829  }
7830}
7831
7832.dac-hero-carousel {
7833  height: 550px;
7834  position: relative;
7835}
7836
7837.dac-hero-carousel > .dac-hero {
7838  bottom: 0;
7839  left: 0;
7840  position: absolute;
7841  right: 0;
7842  top: 0;
7843  will-change: opacity;
7844}
7845
7846.dac-hero-carousel > .dac-hero,
7847    .dac-hero-carousel > .dac-hero .wrap {
7848  opacity: 0;
7849}
7850
7851.dac-hero-carousel > .dac-hero.active {
7852  opacity: 1;
7853  -webkit-transition: opacity .5s;
7854  transition: opacity .5s;
7855  z-index: 1;
7856}
7857
7858.dac-hero-carousel > .dac-hero.active .wrap {
7859  opacity: 1;
7860  -webkit-transition: opacity .5s .5s;
7861  transition: opacity .5s .5s;
7862}
7863
7864.dac-hero-carousel > .dac-hero.out,
7865    .dac-hero-carousel > .dac-hero.out .wrap {
7866  -webkit-transition: opacity 0s .5s;
7867  transition: opacity 0s .5s;
7868  opacity: 0;
7869}
7870
7871.dac-hero-carousel-action {
7872  bottom: 0;
7873  display: block;
7874  left: 0;
7875  position: absolute;
7876  right: 0;
7877  top: 0;
7878  z-index: 1;
7879}
7880
7881.dac-hero-carousel .dac-hero-cta {
7882  position: relative;
7883  z-index: 1;
7884}
7885
7886.dac-hero-carousel-pagination {
7887  bottom: 33px;
7888  left: 0;
7889  position: absolute;
7890  right: 0;
7891}
7892
7893@media (max-width: 719px) {
7894  .dac-hero-carousel-pagination {
7895    text-align: center;
7896    bottom: 20px;
7897  }
7898}
7899
7900.dac-hero-carousel-pagination .dac-pagination-item {
7901  position: relative;
7902  z-index: 1;
7903}
7904
7905.dac-pagination {
7906  list-style: none;
7907  margin: 0 -6px;
7908}
7909
7910.dac-pagination-item {
7911  background-clip: content-box;
7912  background-color: rgba(153, 153, 153, 0.4);
7913  border-radius: 50%;
7914  cursor: pointer;
7915  display: inline-block;
7916  height: 14px;
7917  overflow: hidden;
7918  padding: 6px;
7919  pointer-events: all;
7920  text-indent: 100%;
7921  -webkit-transition: background-color .1s ease-in;
7922  transition: background-color .1s ease-in;
7923  white-space: nowrap;
7924  width: 14px;
7925  will-change: background-color;
7926}
7927
7928.dac-pagination-item:hover {
7929  background-color: rgba(153, 153, 153, 0.6);
7930}
7931
7932.dac-pagination-item.active, .dac-pagination-item.active:hover {
7933  background-color: #6ab344;
7934}
7935
7936.dac-invert .dac-pagination-item {
7937  background-color: rgba(204, 204, 204, 0.2);
7938}
7939
7940.dac-invert .dac-pagination-item:hover {
7941  background-color: rgba(153, 153, 153, 0.4);
7942}
7943
7944@media (max-width: 719px) {
7945  .dac-pagination-item {
7946    height: 12px;
7947    width: 12px;
7948  }
7949}
7950
7951/* Form component */
7952.dac-form {
7953  color: #505050;
7954  font-size: 16px;
7955  /* Modal Responsive */
7956}
7957
7958.dac-form a {
7959  color: #000;
7960}
7961
7962.dac-form-aside {
7963  display: inline-block;
7964  font-size: 12px;
7965  margin-top: 0;
7966}
7967
7968.dac-form-required {
7969  color: #ef4300;
7970}
7971
7972.dac-form-fieldset {
7973  padding: 0;
7974}
7975
7976.dac-form-legend {
7977  display: block;
7978  color: #333;
7979  font-weight: 500;
7980  margin: 20px 0 12px;
7981  padding: 0;
7982  width: 100%;
7983}
7984
7985.dac-form-legend > .dac-form-required {
7986  float: right;
7987  margin-top: 3px;
7988}
7989
7990.dac-form-input {
7991  border: 0 solid #e3e3e3;
7992  border-bottom-width: 1px;
7993  display: block;
7994  outline: 0;
7995  padding: 1px 0 8px;
7996  -webkit-transition: border-color .2s;
7997  transition: border-color .2s;
7998  width: 100%;
7999}
8000
8001.dac-form-input-group {
8002  position: relative;
8003}
8004
8005.dac-form-input-group > .dac-form-required {
8006  display: block;
8007  bottom: 3px;
8008  position: absolute;
8009  right: 0;
8010}
8011
8012.dac-form-input:focus {
8013  border-bottom-color: #09f;
8014}
8015
8016.dac-form-floatlabel {
8017  display: block;
8018  cursor: text;
8019  margin-top: 5px;
8020  pointer-events: none;
8021  -webkit-transform-origin: 0 100%;
8022  -ms-transform-origin: 0 100%;
8023  transform-origin: 0 100%;
8024  -webkit-transform: translate3d(0, 22px, 0) scale(1);
8025  transform: translate3d(0, 22px, 0) scale(1);
8026  -webkit-transition: -webkit-transform .2s;
8027  transition: transform .2s;
8028}
8029
8030.dac-focused > .dac-form-floatlabel,
8031    .dac-has-value > .dac-form-floatlabel {
8032  cursor: default;
8033  -webkit-transform: translate3d(0, 0, 0) scale(0.75);
8034  transform: translate3d(0, 0, 0) scale(0.75);
8035}
8036
8037.dac-form-radio, .dac-form-checkbox {
8038  opacity: 0;
8039  position: absolute;
8040  visibility: hidden;
8041}
8042
8043.dac-form-radio-group, .dac-form-checkbox-group {
8044  display: table;
8045}
8046
8047.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 {
8048  margin-top: 10px;
8049}
8050
8051.dac-form-radio-button, .dac-form-checkbox-button {
8052  box-sizing: border-box;
8053  cursor: pointer;
8054  display: table-cell;
8055  float: left;
8056  height: 18px;
8057  margin: 2px 10px 0 0;
8058  position: relative;
8059  width: 18px;
8060}
8061
8062.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before {
8063  box-sizing: border-box;
8064  content: '';
8065  display: block;
8066  position: absolute;
8067}
8068
8069.dac-form-radio-button::after, .dac-form-radio-button::before {
8070  border-radius: 50%;
8071  height: 100%;
8072  width: 100%;
8073}
8074
8075.dac-form-radio-button::before {
8076  background: rgba(0, 0, 0, 0.7);
8077  -webkit-transform: translateZ(0) scale(0);
8078  transform: translateZ(0) scale(0);
8079  -webkit-transition: -webkit-transform .3s;
8080  transition: transform .3s;
8081}
8082
8083.dac-form-radio-button::after {
8084  border: 2px solid rgba(0, 0, 0, 0.7);
8085}
8086
8087.dac-form-radio:checked + .dac-form-radio-button::before {
8088  -webkit-transform: translateZ(0) scale(0.5);
8089  transform: translateZ(0) scale(0.5);
8090}
8091
8092.dac-form-radio:focus + .dac-form-radio-button::after {
8093  border: 2px solid #09f;
8094}
8095
8096.dac-form-checkbox-button::before {
8097  border: 1px solid #6c6e6f;
8098  border-radius: 3px;
8099  height: 100%;
8100  -webkit-transition: background .1s ease-out, box-shadow .3s ease-out;
8101  transition: background .1s ease-out, box-shadow .3s ease-out;
8102  width: 100%;
8103}
8104
8105.dac-form-checkbox-button::after {
8106  border-bottom: 2px solid #fff;
8107  border-left: 2px solid #fff;
8108  bottom: 7px;
8109  height: 7px;
8110  left: 3px;
8111  -webkit-transform: rotate(-45deg);
8112  -ms-transform: rotate(-45deg);
8113  transform: rotate(-45deg);
8114  width: 12px;
8115}
8116
8117.dac-form-checkbox:checked + .dac-form-checkbox-button::before {
8118  background: #6c6e6f;
8119  -webkit-transition-timing-function: ease-in;
8120  transition-timing-function: ease-in;
8121}
8122
8123.dac-form-checkbox:focus + .dac-form-checkbox-button::before,
8124  .dac-form-checkbox:active + .dac-form-checkbox-button::before {
8125  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
8126}
8127
8128.dac-form-label {
8129  cursor: pointer;
8130  -webkit-user-select: none;
8131  -moz-user-select: none;
8132  -ms-user-select: none;
8133  user-select: none;
8134}
8135
8136@media (max-width: 719px) {
8137  .dac-form-legend {
8138    margin-bottom: 0;
8139  }
8140}
8141
8142/* Filter Resources Component*/
8143.dac-filter {
8144  color: #505050;
8145  margin-bottom: 20px;
8146  position: relative;
8147}
8148
8149.dac-filter.dac-filter-section {
8150  margin-top: -45px;
8151  text-align: right;
8152}
8153
8154@media (max-width: 719px) {
8155  .dac-filter.dac-filter-section {
8156    margin-top: 0;
8157    text-align: left;
8158  }
8159}
8160
8161.dac-filter-title {
8162  color: #666;
8163  cursor: default;
8164  display: inline-block;
8165  font-size: 12px;
8166  font-weight: 500;
8167  line-height: 24px;
8168  margin: 0;
8169  text-transform: uppercase;
8170}
8171
8172@media (max-width: 719px) {
8173  .dac-filter-title {
8174    margin-bottom: 20px;
8175  }
8176}
8177
8178.dac-filter-message {
8179  color: #78868d;
8180  font-size: 18px;
8181  margin: 0 10px 10px;
8182}
8183
8184.dac-filter-count {
8185  background: #6ab344;
8186  border-radius: 50%;
8187  color: #fff;
8188  display: inline-block;
8189  font-size: 12px;
8190  font-weight: 600;
8191  height: 24px;
8192  text-align: center;
8193  width: 24px;
8194}
8195
8196.dac-filter-count.dac-disabled {
8197  visibility: hidden;
8198}
8199
8200.dac-filter-chip {
8201  background: #bfc7cb;
8202  border-radius: 15px;
8203  color: #333;
8204  cursor: default;
8205  display: inline-block;
8206  line-height: 21px;
8207  margin: 0 10px 10px 0;
8208  padding: 4px 26px 4px 10px;
8209  position: relative;
8210}
8211
8212.dac-filter-chip-close {
8213  background-color: transparent;
8214  border: none;
8215  cursor: pointer;
8216  outline: 0;
8217  padding: 3px;
8218  position: absolute;
8219  right: 5px;
8220  top: 5px;
8221}
8222
8223.dac-filter-chip-close-icon {
8224  opacity: .7;
8225  margin-top: -2px;
8226  -webkit-transform: scale(0.57142857);
8227  -ms-transform: scale(0.57142857);
8228  transform: scale(0.57142857);
8229}
8230
8231.dac-filter-chip-close:hover > .dac-filter-chip-close-icon {
8232  opacity: 1;
8233}
8234
8235.dac-filter-chips {
8236  border-top: 1px solid rgba(0, 0, 0, 0.1);
8237  margin: 0;
8238  list-style-type: none;
8239  padding: 10px 0 0;
8240  position: relative;
8241  text-align: left;
8242}
8243
8244.dac-filter-item {
8245  box-sizing: border-box;
8246  float: left;
8247  margin-bottom: 20px;
8248  padding: 0 10px;
8249  width: 33.33333333%;
8250}
8251
8252@media (min-width: 720px) and (max-width: 979px) {
8253  .dac-filter-item {
8254    width: 50%;
8255  }
8256}
8257
8258@media (max-width: 719px) {
8259  .dac-filter-item {
8260    width: 100%;
8261  }
8262}
8263
8264/* Media component */
8265.dac-media {
8266  display: table;
8267  width: 100%;
8268}
8269
8270.dac-media-body, .dac-media-figure {
8271  display: table-cell;
8272  vertical-align: top;
8273}
8274
8275.dac-media-figure {
8276  padding: 0;
8277}
8278
8279.dac-media-body {
8280  width: 100%;
8281}
8282
8283.dac-swap {
8284  overflow: hidden;
8285  position: relative;
8286}
8287
8288.dac-swap-section {
8289  left: 0;
8290  opacity: 0;
8291  position: absolute;
8292  top: 0;
8293  width: 100%;
8294  -webkit-transition: opacity 1s, -webkit-transform .5s;
8295  transition: opacity 1s, transform .5s;
8296}
8297
8298.dac-swap-section.dac-no-anim {
8299  -webkit-transition: none;
8300  transition: none;
8301}
8302
8303.dac-swap-section.dac-up {
8304  -webkit-transform: translateY(-100%);
8305  -ms-transform: translateY(-100%);
8306  transform: translateY(-100%);
8307}
8308
8309.dac-swap-section.dac-down {
8310  -webkit-transform: translateY(100%);
8311  -ms-transform: translateY(100%);
8312  transform: translateY(100%);
8313}
8314
8315.dac-swap-section.dac-left {
8316  -webkit-transform: translateX(-100%);
8317  -ms-transform: translateX(-100%);
8318  transform: translateX(-100%);
8319}
8320
8321.dac-swap-section.dac-right {
8322  -webkit-transform: translateX(100%);
8323  -ms-transform: translateX(100%);
8324  transform: translateX(100%);
8325}
8326
8327.dac-swap-section.dac-active {
8328  opacity: 1;
8329  position: relative;
8330  -webkit-transform: translate(0, 0);
8331  -ms-transform: translate(0, 0);
8332  transform: translate(0, 0);
8333  width: auto;
8334}
8335
8336/* Modal component */
8337.dac-modal {
8338  opacity: 0;
8339  visibility: hidden;
8340  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8341  transition: visibility 0s linear 300ms, opacity 300ms linear;
8342  background: rgba(0, 0, 0, 0.8);
8343  bottom: 0;
8344  left: 0;
8345  overflow-x: hidden;
8346  overflow-y: auto;
8347  position: fixed;
8348  right: 0;
8349  top: 0;
8350  z-index: 70;
8351}
8352
8353.dac-modal.dac-active {
8354  opacity: 1;
8355  -webkit-transition-delay: 0s;
8356  transition-delay: 0s;
8357  visibility: visible;
8358}
8359
8360.dac-modal-open {
8361  overflow: hidden;
8362}
8363
8364.dac-modal-container {
8365  -webkit-box-align: center;
8366  -webkit-align-items: center;
8367  -ms-flex-align: center;
8368  align-items: center;
8369  display: -webkit-box;
8370  display: -webkit-flex;
8371  display: -ms-flexbox;
8372  display: flex;
8373  -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8374  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8375  -webkit-box-pack: center;
8376  -webkit-justify-content: center;
8377  -ms-flex-pack: center;
8378  justify-content: center;
8379  min-height: 100%;
8380  width: 100%;
8381}
8382
8383.dac-modal-window {
8384  background: #fff;
8385  box-sizing: border-box;
8386  margin: 20px auto;
8387  -webkit-transition: -webkit-transform .3s;
8388  transition: transform .3s;
8389  -webkit-transform: translate3d(0, -30px, 0);
8390  transform: translate3d(0, -30px, 0);
8391  width: 960px;
8392}
8393
8394.dac-modal.dac-active .dac-modal-window {
8395  -webkit-transform: translate3d(0, 0, 0);
8396  transform: translate3d(0, 0, 0);
8397}
8398
8399.dac-modal-header {
8400  background: #00695c;
8401  padding: 35px 35px 30px;
8402  position: relative;
8403}
8404
8405.dac-has-small-header .dac-modal-header {
8406  padding: 10px 20px;
8407}
8408
8409.dac-modal-header-actions {
8410  padding: 8px;
8411  position: absolute;
8412  right: 5px;
8413  top: 5px;
8414}
8415
8416.dac-modal-header-open, .dac-modal-header-close {
8417  background: none;
8418  border: none;
8419  cursor: pointer;
8420  line-height: 0;
8421  outline: 0;
8422  opacity: .7;
8423  -webkit-transition: background-color .3s;
8424  transition: background-color .3s;
8425}
8426
8427.dac-modal-header-open:active, .dac-modal-header-close:active {
8428  background: rgba(255, 255, 255, 0.2);
8429}
8430
8431.dac-modal-header-close:before {
8432  content: '';
8433  top: -1px;
8434  position: relative;
8435}
8436
8437.dac-modal-header-open {
8438  margin: 10px;
8439}
8440
8441.dac-modal-header-title {
8442  color: #fff;
8443  font-size: 24px;
8444  font-weight: 300;
8445  line-height: 32px;
8446  padding: 0 150px 0 0;
8447}
8448
8449.dac-has-small-header .dac-modal-header-title {
8450  font-size: 16px;
8451  font-weight: 500;
8452}
8453
8454.dac-modal-header-subtitle {
8455  bottom: 0;
8456  color: #fff;
8457  display: inline-block;
8458  font: inherit;
8459  font-size: 14px;
8460  margin: 0;
8461  opacity: .8;
8462  position: absolute;
8463  right: 0;
8464}
8465
8466.dac-modal-content {
8467  padding: 12px 35px;
8468}
8469
8470.dac-modal-action {
8471  margin: 0;
8472}
8473
8474.dac-modal-footer {
8475  padding: 24px 35px;
8476}
8477
8478@media (max-width: 1000px) {
8479  .dac-modal-window {
8480    margin: 20px;
8481    width: auto;
8482  }
8483
8484  .dac-modal-container {
8485    z-index: auto;
8486  }
8487}
8488
8489@media (max-width: 719px) {
8490  .dac-modal-window {
8491    margin: 10px;
8492  }
8493
8494  .dac-modal-header {
8495    padding: 35px 10px 10px;
8496  }
8497
8498  .dac-modal-header-title {
8499    font-size: 16px;
8500    line-height: 24px;
8501    padding: 0;
8502  }
8503
8504  .dac-modal-header-subtitle {
8505    display: block;
8506    margin: 0;
8507    position: static;
8508    text-align: right;
8509  }
8510
8511  .dac-modal-header-actions {
8512    top: 1px;
8513  }
8514
8515  .dac-modal-content {
8516    padding: 10px;
8517  }
8518
8519  .dac-modal-footer {
8520    border-top: 1px solid #e3e3e3;
8521    padding: 35px 10px;
8522  }
8523}
8524
8525.newsletter .dac-modal-footer {
8526  padding-top: 0;
8527  text-align: right;
8528}
8529
8530.newsletter-checkboxes {
8531  padding-top: 20px;
8532}
8533
8534.newsletter-success-message {
8535  font-size: 32px;
8536  line-height: 1.4;
8537  padding: 40px 30px;
8538  text-align: center;
8539}
8540
8541@media (max-width: 719px) {
8542  .newsletter-success-message {
8543    font-size: 16px;
8544    padding: 12px 0 0;
8545  }
8546}
8547
8548@media (min-width: 720px) {
8549  .newsletter-checkboxes {
8550    padding-top: 46px;
8551  }
8552
8553  .newsletter-leftCol {
8554    padding-right: 40px;
8555  }
8556
8557  .newsletter-rightCol {
8558    padding-left: 40px;
8559  }
8560}
8561
8562@media (max-width: 719px) {
8563  .newsletter .dac-modal-footer {
8564    margin-top: 30px;
8565    padding: 30px 10px;
8566    text-align: center;
8567  }
8568}
8569
8570.dac-blog-reader {
8571  padding: 50px 90px;
8572}
8573
8574.dac-blog-reader-title {
8575  color: #333;
8576  font-size: 45px;
8577  font-weight: 300;
8578  line-height: 1.2;
8579  padding: 10px 0;
8580}
8581
8582.dac-blog-reader-date {
8583  color: #b8b8b8;
8584  font-size: 12px;
8585  font-weight: 600;
8586  line-height: 1;
8587  text-transform: uppercase;
8588}
8589
8590.dac-blog-reader-text > p:first-child i {
8591  display: inline-block;
8592  margin-bottom: 40px;
8593}
8594
8595.dac-blog-reader-text li {
8596  margin-bottom: 0;
8597}
8598
8599.dac-blog-reader-text iframe {
8600  margin-left: auto !important;
8601  margin-right: auto !important;
8602  max-width: 100%;
8603}
8604
8605@media (max-width: 719px) {
8606  .dac-blog-reader {
8607    padding: 30px 20px;
8608  }
8609}
8610
8611.dac-custom-search {
8612  background: #fff;
8613  margin: 0 -10px;
8614  padding: 20px 10px;
8615  z-index: 1;
8616}
8617
8618.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social {
8619  top: -48px;
8620}
8621
8622.dac-custom-search-section-title {
8623  color: #505050;
8624}
8625
8626.dac-custom-search-entry {
8627  margin-bottom: 36px;
8628  margin-top: 24px;
8629  margin-left:10px;
8630}
8631
8632.dac-custom-search-entry.cols:after {
8633    clear: none; }
8634
8635.dac-custom-search-image-wrapper {
8636  float: left;
8637  position: relative;
8638}
8639
8640.dac-custom-search-image {
8641  background-size: cover;
8642  height: 112px;
8643  width:150px;
8644  margin-right:15px;
8645}
8646
8647.dac-custom-search-text-wrapper {
8648  position: relative;
8649}
8650
8651.dac-custom-search-title {
8652  color: #333;
8653  font-size: 14px;
8654  font-weight: 700;
8655  line-height: 24px;
8656  padding: 0;
8657  clear:none;
8658}
8659
8660.dac-custom-search-title a {
8661  color: inherit;
8662}
8663
8664.dac-custom-search-section {
8665  color: #999;
8666  font-size: 16px;
8667  font-variant: small-caps;
8668  font-weight: 700;
8669  margin: -5px 0 0 0;
8670}
8671
8672.dac-custom-search-snippet {
8673  color: #666;
8674  margin: 0;
8675}
8676
8677.dac-custom-search-link {
8678  font-weight: 500;
8679  word-wrap: break-word;
8680  width: 100%;
8681}
8682
8683.dac-custom-search-load-more {
8684  background: none;
8685  border: none;
8686  color: #333;
8687  cursor: pointer;
8688  display: block;
8689  font-size: 14px;
8690  font-weight: 700;
8691  margin: 75px auto;
8692  outline: none;
8693  padding: 10px;
8694}
8695
8696.dac-custom-search-load-more:hover {
8697  opacity: 0.7;
8698}
8699
8700.dac-custom-search-no-results {
8701  color: #999;
8702}
8703
8704.dac-search-hero {
8705  font-size: 16px;
8706  padding: 50px 0 14px 0;
8707}
8708
8709.dac-search-results {
8710  opacity: 0;
8711  visibility: hidden;
8712  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8713  transition: visibility 0s linear 300ms, opacity 300ms linear;
8714  background-color: #fff;
8715  bottom: 0;
8716  left: 0;
8717  overflow-y: auto;
8718  padding: 0 10px;
8719  position: fixed;
8720  right: 0;
8721  -webkit-transition: opacity 100ms;
8722  transition: opacity 100ms;
8723  top: 64px;
8724  z-index: 50;
8725}
8726
8727.dac-nav-animating .dac-search-results {
8728  -webkit-transition: opacity 100ms, padding .3s;
8729  transition: opacity 100ms, padding .3s;
8730}
8731
8732.dac-search-results * {
8733  box-sizing: border-box;
8734}
8735
8736.dac-search-open .dac-search-results {
8737  opacity: 1;
8738  visibility: visible;
8739}
8740
8741.dac-search-results-content {
8742  background: #eceff1;
8743  margin: 0 -10px;
8744  padding: 0 10px;
8745}
8746
8747.dac-search-results-for {
8748  margin-bottom: -5px;
8749  overflow: hidden;
8750  padding-top: 5px;
8751}
8752
8753.dac-search-results-for span {
8754  color: #039bef;
8755}
8756
8757.dac-search-mode .dac-search-results-for {
8758  display: none;
8759}
8760
8761.dac-search-results-history {
8762  background: #eceff1;
8763  min-height: 100%;
8764  margin: 0 -10px;
8765  padding: 0 10px;
8766}
8767
8768.dac-search-results-hero {
8769  padding-top: 20px;
8770}
8771
8772.dac-search-results-metadata {
8773  padding-bottom: 40px;
8774}
8775
8776#dac-search-results-reference {
8777  float:right;
8778  z-index:999;
8779}
8780
8781@media (max-width: 719px) {
8782  #dac-search-results-reference {
8783    float:none;
8784  }
8785}
8786
8787.dac-search-results-reference {
8788  background: white;
8789  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
8790  margin: 0 0 20px 0;
8791  overflow: hidden;
8792  padding: 6px 0 4px;
8793}
8794
8795.dac-search-results-reference .namespace {
8796  color: #666;
8797}
8798
8799.dac-search-results-reference.is-expanded {
8800  height: auto;
8801}
8802
8803.dac-search-results-reference-header {
8804  color: #999;
8805  font-size: 16px;
8806  font-variant: small-caps;
8807  font-weight: 700;
8808  margin: 0;
8809  padding: 18px 12px 0;
8810  text-transform: lowercase;
8811}
8812
8813.dac-search-results-reference-header:first-child {
8814  padding-top: 0;
8815}
8816
8817.dac-search-results-reference-entry {
8818  margin: 0;
8819}
8820
8821.dac-search-results-reference-entry a {
8822  color: #333;
8823  display: block;
8824  font-size: 0.81em;
8825  line-height: 1.5em;
8826  padding: 0 12px 5px 12px;
8827  width: 100%;
8828  white-space: nowrap;
8829}
8830
8831ul.dac-search-results-reference {
8832list-style: none;
8833}
8834
8835ul.dac-search-results-reference li[data-toggle="show-more"] {
8836  cursor:pointer;
8837}
8838
8839ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] {
8840  display:none;
8841}
8842
8843.dac-search-results-reference-entry a:hover {
8844  background-color: #eceff1;
8845}
8846
8847.dac-search-results-reference-entry em {
8848  font-style: normal;
8849  font-weight: 700;
8850}
8851
8852.dac-search-results-reference-entry-empty {
8853  color: #999;
8854  font-size: 0.81em;
8855  margin: 0;
8856  padding: 2px 12px 14px;
8857}
8858
8859.dac-search-results-resources {
8860  margin: 0;
8861}
8862
8863.dac-search-results-resources .resource-card {
8864  border-right: 2px solid #999;
8865}
8866
8867.dac-search-results-resources .resource-card-about {
8868  border-right: 2px solid #6ab344;
8869}
8870
8871.dac-search-results-resources .resource-card-about .section {
8872  color: #6ab344;
8873}
8874
8875.dac-search-results-resources .resource-card-develop {
8876  border-right: 2px solid #ff7043;
8877}
8878
8879.dac-search-results-resources .resource-card-develop .section {
8880  color: #ff7043;
8881}
8882
8883.dac-search-results-resources .resource-card-design {
8884  border-right: 2px solid #00bcd4;
8885}
8886
8887.dac-search-results-resources .resource-card-design .section {
8888  color: #00bcd4;
8889}
8890
8891.dac-search-results-resources .resource-card-distribute {
8892  border-right: 2px solid #afb42b;
8893}
8894
8895.dac-search-results-resources .resource-card-distribute .section {
8896  color: #afb42b;
8897}
8898
8899@media (max-width: 719px) {
8900  .dac-search-results-reference.no-results {
8901    display: none;
8902  }
8903}
8904
8905@media (min-width: 980px) {
8906  .dac-nav-open.dac-search-open .dac-search-results {
8907    padding-left: 260px;
8908  }
8909
8910  .dac-search-mode.dac-search-open .dac-search-results {
8911    padding-left: 10px;
8912  }
8913}
8914
8915.dac-selected {
8916  color: #039bef !important;
8917}
8918
8919.dac-selected em {
8920  color: #039bef;
8921}
8922
8923.resource-card.dac-selected {
8924  box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7);
8925}
8926
8927.resource-card.dac-selected em {
8928  color: #333;
8929}
8930
8931.dac-expand, .dac-section {
8932  margin-left: -20px;
8933  margin-right: -20px;
8934  padding-left: 20px;
8935  padding-right: 20px;
8936}
8937
8938@media (max-width: 719px) {
8939  .dac-expand, .dac-section {
8940    margin-left: -10px;
8941    margin-right: -10px;
8942    padding-left: 10px;
8943    padding-right: 10px;
8944  }
8945}
8946
8947.dac-invert {
8948  color: #b3b3b3;
8949  color: rgba(255, 255, 255, 0.7);
8950}
8951
8952.dac-invert h1, .dac-invert h2, .dac-invert h3 {
8953  color: #fff;
8954}
8955
8956.dac-light.dac-hero, .dac-light.dac-section {
8957  background-color: #eceff1;
8958}
8959
8960.dac-gray.dac-hero, .dac-gray.dac-section {
8961  background-color: #d8dfe2;
8962}
8963
8964.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section {
8965   background-color: #b0bec5;
8966}
8967
8968.dac-dark.dac-hero, .dac-dark.dac-section {
8969  background-color: #37474f;
8970}
8971
8972.dac-red.dac-hero, .dac-red.dac-section {
8973  background-color: #dc4d38;
8974}
8975
8976.dac-hero-cta, .dac-section-title, .dac-section-links {
8977  color: #212121;
8978  color: rgba(0, 0, 0, 0.87);
8979}
8980
8981.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
8982  color: white;
8983}
8984
8985.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 {
8986  opacity: .87;
8987}
8988
8989.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 {
8990  opacity: 1;
8991}
8992
8993.dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
8994  color: #757575;
8995  color: rgba(0, 0, 0, 0.54);
8996}
8997
8998.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle {
8999  color: #b3b3b3;
9000  color: rgba(255, 255, 255, 0.7);
9001}
9002
9003.dac-section {
9004  background-position: 50% 50%;
9005  background-size: cover;
9006  padding-bottom: 84px;
9007  padding-top: 84px;
9008  position: relative;
9009}
9010
9011@media (max-width: 719px) {
9012  .dac-section {
9013    padding-bottom: 52px;
9014    padding-top: 52px;
9015  }
9016}
9017
9018.dac-section.dac-small {
9019  padding-bottom: 32px;
9020  padding-top: 32px;
9021}
9022
9023.dac-section.dac-slim {
9024  padding-bottom: 0;
9025  padding-top: 0;
9026}
9027
9028.dac-section-title {
9029  text-align: center;
9030  padding-bottom: 40px;
9031  padding-top: 0;
9032}
9033
9034.dac-section-subtitle {
9035  font-size: 16px;
9036  padding-bottom: 40px;
9037  margin-top: -24px;
9038  text-align: center;
9039}
9040
9041.dac-section-links {
9042  font-size: 16px;
9043  list-style: none;
9044  line-height: 40px;
9045  margin: 16px 0 0;
9046  text-align: center;
9047}
9048
9049@media (max-width: 719px) {
9050  .dac-section-links {
9051    margin-left: -8px;
9052    text-align: left;
9053  }
9054}
9055
9056.dac-section-link {
9057  cursor: pointer;
9058  display: inline-block;
9059  margin: 0 32px;
9060  -webkit-transition: opacity .3s;
9061  transition: opacity .3s;
9062}
9063
9064.dac-section-link:hover {
9065  opacity: .54;
9066}
9067
9068@media (max-width: 719px) {
9069  .dac-section-link {
9070    display: block;
9071    margin: 0;
9072  }
9073}
9074
9075.dac-section-link a {
9076  color: inherit;
9077}
9078
9079/*
9080SCSS variables are information about icon's compiled state, stored under its original file name
9081
9082.icon-home {
9083  width: $icon-home-width;
9084}
9085
9086The large array-like variables contain all information about a single icon
9087$icon-home: x y offset_x offset_y width height total_width total_height image_path;
9088
9089At the bottom of this section, we provide information about the spritesheet itself
9090$spritesheet: width height image $spritesheet-sprites;
9091*/
9092.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,
9093#qv li:before {
9094  background-image: url(/assets/images/sprite.png);
9095  display: inline-block;
9096  vertical-align: middle; }
9097  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) {
9098    .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,
9099    #qv li:before {
9100      background-image: url(/assets/images/sprite@2x.png);
9101      background-size: 36px 883px; } }
9102
9103.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 {
9104  background-position: 0px -669px;
9105  height: 24px;
9106  width: 24px;
9107  vertical-align: -6px; }
9108  .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 {
9109    background-position: 0px -513px;
9110    height: 24px;
9111    width: 24px; }
9112
9113.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 {
9114  background-position: 0px -695px;
9115  height: 36px;
9116  width: 36px;
9117  vertical-align: -10px; }
9118  .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 {
9119    background-position: 0px -771px;
9120    height: 36px;
9121    width: 36px; }
9122
9123.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 {
9124  background-position: 0px -487px;
9125  height: 24px;
9126  width: 24px;
9127  vertical-align: -6px; }
9128  .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 {
9129    background-position: 0px -565px;
9130    height: 24px;
9131    width: 24px; }
9132
9133.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 {
9134  background-position: 0px -539px;
9135  height: 24px;
9136  width: 24px;
9137  vertical-align: -6px; }
9138  .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 {
9139    background-position: 0px -305px;
9140    height: 24px;
9141    width: 24px; }
9142
9143.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 {
9144  background-position: 0px 0px;
9145  height: 11px;
9146  width: 19px; }
9147
9148.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 {
9149  background-position: 0px -215px;
9150  height: 18px;
9151  width: 11px; }
9152
9153.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 {
9154  background-position: 0px -123px;
9155  height: 16px;
9156  width: 16px; }
9157
9158.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 {
9159  background-position: 0px -695px;
9160  height: 36px;
9161  width: 36px; }
9162
9163.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 {
9164  background-position: 0px -771px;
9165  height: 36px;
9166  width: 36px; }
9167
9168.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 {
9169  background-position: 0px -669px;
9170  height: 24px;
9171  width: 24px; }
9172
9173.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 {
9174  background-position: 0px -513px;
9175  height: 24px;
9176  width: 24px; }
9177
9178.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 {
9179  background-position: 0px -89px;
9180  height: 14px;
9181  width: 14px; }
9182
9183.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 {
9184  background-position: 0px -435px;
9185  height: 24px;
9186  width: 24px; }
9187
9188.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 {
9189  background-position: 0px -27px;
9190  height: 12px;
9191  width: 12px; }
9192
9193.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 {
9194  background-position: 0px -409px;
9195  height: 24px;
9196  width: 24px; }
9197
9198.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 {
9199  background-position: 0px -383px;
9200  height: 24px;
9201  width: 24px; }
9202
9203.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 {
9204  background-position: 0px -357px;
9205  height: 24px;
9206  width: 24px; }
9207
9208.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 {
9209  background-position: 0px -331px;
9210  height: 24px;
9211  width: 24px; }
9212
9213.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 {
9214  background-position: 0px -279px;
9215  height: 24px;
9216  width: 24px; }
9217
9218.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 {
9219  background-position: 0px -235px;
9220  height: 20px;
9221  width: 17px; }
9222
9223.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 {
9224  background-position: 0px -809px;
9225  height: 36px;
9226  width: 36px; }
9227
9228.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 {
9229  background-position: 0px -13px;
9230  height: 12px;
9231  width: 16px; }
9232
9233.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 {
9234  background-position: 0px -105px;
9235  height: 16px;
9236  width: 16px; }
9237
9238.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 {
9239  background-position: 0px -177px;
9240  height: 16px;
9241  width: 16px; }
9242
9243.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 {
9244  background-position: 0px -159px;
9245  height: 16px;
9246  width: 16px; }
9247
9248.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 {
9249  background-position: 0px -141px;
9250  height: 16px;
9251  width: 16px; }
9252
9253.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 {
9254  background-position: 0px -195px;
9255  height: 18px;
9256  width: 18px; }
9257
9258.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 {
9259  background-position: 0px -461px;
9260  height: 24px;
9261  width: 24px; }
9262
9263.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 {
9264  background-position: 0px -733px;
9265  height: 36px;
9266  width: 36px; }
9267
9268.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 {
9269  background-position: 0px -847px;
9270  height: 36px;
9271  width: 36px; }
9272
9273.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 {
9274  background-position: 0px -257px;
9275  height: 20px;
9276  width: 16px; }
9277
9278.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 {
9279  background-position: 0px -41px;
9280  height: 14px;
9281  width: 14px; }
9282
9283.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 {
9284  background-position: 0px -591px;
9285  height: 24px;
9286  width: 24px; }
9287
9288.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 {
9289  background-position: 0px -617px;
9290  height: 24px;
9291  width: 24px; }
9292
9293.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 {
9294  background-position: 0px -643px;
9295  height: 24px;
9296  width: 24px; }
9297
9298.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 {
9299  background-position: 0px -73px;
9300  height: 14px;
9301  width: 16px; }
9302
9303.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 {
9304  background-position: 0px -565px;
9305  height: 24px;
9306  width: 24px; }
9307
9308.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 {
9309  background-position: 0px -487px;
9310  height: 24px;
9311  width: 24px; }
9312
9313.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 {
9314  background-position: 0px -305px;
9315  height: 24px;
9316  width: 24px; }
9317
9318.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 {
9319  background-position: 0px -539px;
9320  height: 24px;
9321  width: 24px; }
9322
9323.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 {
9324  background-position: 0px -57px;
9325  height: 14px;
9326  width: 18px; }
9327
9328/* Toast Component */
9329.dac-toast {
9330  background: #ffebc3;
9331  border-top: 1px solid #e5d4a1;
9332  display: none;
9333  color: rgba(0, 0, 0, 0.87);
9334  line-height: 1.4;
9335  padding: 10px; }
9336  .dac-toast.dac-visible {
9337    display: block; }
9338  .dac-toast-wrap {
9339    box-sizing: border-box;
9340    margin: 0 auto;
9341    max-width: 940px;
9342    padding-right: 20px;
9343    position: relative; }
9344  .dac-toast-close-btn {
9345    background-color: transparent;
9346    border: none;
9347    border-radius: 0;
9348    cursor: pointer;
9349    opacity: .4;
9350    padding: 0;
9351    position: absolute;
9352    right: 0;
9353    top: 1px; }
9354    .dac-toast-close-btn:hover, .dac-toast-close-btn:focus, .dac-toast-close-btn:active {
9355      outline: none;
9356      opacity: 1; }
9357  .dac-toast-group {
9358    bottom: 0;
9359    left: 0;
9360    position: fixed;
9361    right: 0;
9362    z-index: 60; }
9363  .dac-toast.dac-danger {
9364    background-color: #ffccbc;
9365    border-top-color: #e5b7a9; }
9366  .dac-toast.dac-success {
9367    background-color: #cdedc8;
9368    border-top-color: #c6d5b4; }
9369
9370.dac-tab-item {
9371  box-sizing: border-box;
9372  cursor: pointer;
9373  display: table-cell;
9374  margin: 0;
9375  padding: 8px 12px;
9376  position: relative;
9377  text-align: left; }
9378  @media (max-width: 719px) {
9379    .dac-tab-item {
9380      padding-right: 12px;
9381      text-align: center;
9382      width: 33.33333333%; } }
9383
9384.dac-tab-title {
9385  color: #333;
9386  display: inline-block;
9387  font-size: 16px;
9388  font-weight: 500;
9389  margin: 0; }
9390
9391.dac-tab-arrow {
9392  margin-top: -2px; }
9393  @media (max-width: 719px) {
9394    .dac-tab-arrow {
9395      position: absolute;
9396      visibility: hidden; } }
9397
9398.dac-tab-bar {
9399  display: inline-block;
9400  list-style-type: none;
9401  margin: 0 0 0 12px;
9402  vertical-align: middle;
9403  overflow: hidden; }
9404  @media (max-width: 719px) {
9405    .dac-tab-bar {
9406      display: table;
9407      margin-left: 0;
9408      width: 100%; } }
9409
9410.dac-tab-views {
9411  list-style-type: none;
9412  margin: 0; }
9413
9414.dac-tab-view {
9415  background: #fff;
9416  display: none;
9417  overflow: hidden;
9418  margin: 0 0 10px;
9419  padding: 20px 10px 0;
9420  text-align: left; }
9421
9422.dac-tab-item.dac-active {
9423  background: #fff; }
9424
9425.dac-tab-item.dac-active .dac-tab-arrow {
9426  -webkit-transform: scaleY(-1);
9427      -ms-transform: scaleY(-1);
9428          transform: scaleY(-1); }
9429
9430.dac-tab-view.dac-active {
9431  display: block; }
9432
9433.dac-toggle-expand {
9434  cursor: pointer;
9435  display: inline-block; }
9436
9437.dac-toggle-collapse {
9438  cursor: pointer;
9439  display: none; }
9440
9441.dac-toggle.is-expanded .dac-toggle-expand {
9442  display: none; }
9443
9444.dac-toggle.is-expanded .dac-toggle-collapse {
9445  display: inline-block; }
9446
9447.dac-toggle-content {
9448  clear: left;
9449  overflow: hidden;
9450  max-height: 0;
9451  -webkit-transition: .3s max-height;
9452          transition: .3s max-height; }
9453
9454.dac-toggle.is-expanded .dac-toggle-content {
9455  max-height: none; }
9456
9457.dac-toggle.dac-mobile .dac-toggle-content {
9458  max-height: none; }
9459
9460@media (max-width: 719px) {
9461  .dac-toggle.dac-mobile .dac-toggle-content {
9462    max-height: 0; }
9463  .dac-toggle.is-expanded .dac-toggle-content {
9464    max-height: none; } }
9465
9466/**
9467 * Fades out an element.
9468 * Applies visibility hidden when the transition is finished.
9469 *
9470 * Use opacity: 1; to show the element.
9471 */
9472.dac-visible-mobile-block, .dac-mobile-only,
9473.dac-visible-mobile-inline,
9474.dac-visible-mobile-inline-block,
9475.dac-visible-tablet-block,
9476.dac-visible-tablet-inline,
9477.dac-visible-tablet-inline-block,
9478.dac-visible-desktop-block,
9479.dac-visible-desktop-inline,
9480.dac-visible-desktop-inline-block {
9481  display: none !important; }
9482
9483@media (max-width: 719px) {
9484  .dac-hidden-mobile {
9485    display: none !important; }
9486  .dac-visible-mobile-block, .dac-mobile-only {
9487    display: block !important; }
9488  .dac-visible-mobile-inline {
9489    display: inline !important; }
9490  .dac-visible-mobile-inline-block {
9491    display: inline-block !important; } }
9492
9493@media (min-width: 720px) and (max-width: 979px) {
9494  .dac-hidden-tablet {
9495    display: none !important; }
9496  .dac-visible-tablet-block {
9497    display: block !important; }
9498  .dac-visible-tablet-inline {
9499    display: inline !important; }
9500  .dac-visible-tablet-inline-block {
9501    display: inline-block !important; } }
9502
9503@media (min-width: 980px) {
9504  .dac-hidden-desktop {
9505    display: none !important; }
9506  .dac-visible-desktop-block {
9507    display: block !important; }
9508  .dac-visible-desktop-inline {
9509    display: inline !important; }
9510  .dac-visible-desktop-inline-block {
9511    display: inline-block !important; } }
9512
9513.dac-offset-parent {
9514  position: relative !important; }
9515
9516/**
9517 * Hide from browsers/screenreaders on all sizes.
9518 */
9519.dac-hidden {
9520  display: none !important; }
9521
9522/**
9523 * Break strings when their length exceeds the width of their container.
9524 */
9525.dac-text-break {
9526  word-wrap: break-word !important; }
9527
9528/**
9529 * Horizontal text alignment
9530 */
9531.dac-text-center {
9532  text-align: center !important; }
9533
9534.dac-text-left {
9535  text-align: left !important; }
9536
9537.dac-text-right {
9538  text-align: right !important; }
9539
9540/**
9541 * Prevent whitespace wrapping
9542 */
9543.dac-text-no-wrap {
9544  white-space: nowrap !important; }
9545
9546/**
9547 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
9548 */
9549.dac-text-truncate {
9550  max-width: 100%;
9551  overflow: hidden !important;
9552  text-overflow: ellipsis !important;
9553  white-space: nowrap !important;
9554  word-wrap: normal !important; }
9555
9556/**
9557 * Floats
9558 */
9559.dac-float-left {
9560  float: left !important; }
9561
9562.dac-float-right {
9563  float: right !important; }
9564
9565/**
9566 * New block formatting context
9567 *
9568 * This affords some useful properties to the element. It won't wrap under
9569 * floats. Will also contain any floated children.
9570 * N.B. This will clip overflow. Use the alternative method below if this is
9571 * problematic.
9572 */
9573.dac-nbfc {
9574  overflow: hidden !important;
9575}
9576
9577/**
9578 * New block formatting context (alternative)
9579 *
9580 * Alternative method when overflow must not be clipped.
9581 *
9582 * N.B. This breaks down in some browsers when elements within this element
9583 * exceed its width.
9584 */
9585.dac-nbfc-alt {
9586  display: table-cell !important;
9587  width: 10000px !important;
9588}
9589
9590.Video {
9591  display: none;
9592}
9593
9594.Video-overlay {
9595  background-color: rgba(0, 0, 0, 0.8);
9596  width: 100%;
9597  height: 100%;
9598  position: fixed;
9599  top: 0;
9600  left: 0;
9601  z-index: 9999;
9602}
9603
9604.Video-container {
9605  width: 90vw;
9606  height: 50.625vw;
9607  max-height: calc(90vh - 29.25px);
9608  max-width: calc(160vh - 52px);
9609  margin: auto;
9610  position: fixed;
9611  top: -52px;
9612  right: 0;
9613  bottom: 0;
9614  left: 0;
9615  z-index: 9999;
9616}
9617
9618@media (min-width: 1422.22222222px) and (min-height: 800px) {
9619  .Video-container {
9620    width: 1280px;
9621    height: 720px;
9622  }
9623}
9624
9625.Video-controls {
9626  background: #28655F;
9627  height: 52px;
9628  margin: 0 auto;
9629  position: relative;
9630  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9631}
9632
9633.Video-frame {
9634  position: relative;
9635  height: 100%;
9636  background: black;
9637  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9638}
9639
9640.Video-loading {
9641  color: rgba(255, 255, 255, 0.35);
9642  font-size: 16px;
9643  position: absolute;
9644  top: 50%;
9645  left: 50%;
9646  -webkit-transform: translate(-50%, -50%);
9647  -ms-transform: translate(-50%, -50%);
9648  transform: translate(-50%, -50%);
9649}
9650
9651#youTubePlayer {
9652  max-height: 720px;
9653  position: absolute;
9654  top: 0;
9655  right: 0;
9656  bottom: 0;
9657  left: 0;
9658  width: 100%;
9659  height: 100%;
9660}
9661
9662.Video-button {
9663  background-color: transparent;
9664  border: none;
9665  display: inline-block;
9666  height: 100%;
9667  width: 52px;
9668  outline: none;
9669  cursor: pointer;
9670  -webkit-transition: opacity 200ms;
9671  transition: opacity 200ms;
9672}
9673
9674.Video-button:hover {
9675  opacity: 0.8;
9676}
9677
9678.Video-button--picture-in-picture {
9679  background-position: 0px -461px;
9680  height: 24px;
9681  width: 24px;
9682  display: none;
9683  position: absolute;
9684  right: 64px;
9685  top: 14px;
9686}
9687
9688.Video-button--close {
9689  background-position: 0px -435px;
9690  height: 24px;
9691  width: 24px;
9692  position: absolute;
9693  right: 14px;
9694  top: 14px;
9695}
9696
9697@media (min-width: 720px) {
9698  .Video--picture-in-picture .Video-overlay {
9699    display: none;
9700  }
9701
9702  .Video--picture-in-picture .Video-container {
9703    top: auto;
9704    left: auto;
9705    bottom: 20px;
9706    right: 20px;
9707    width: 40%;
9708    max-width: 420px;
9709    height: auto;
9710  }
9711
9712  .Video--picture-in-picture .Video-button--picture-in-picture {
9713    background-position: 0px -409px;
9714    height: 24px;
9715    width: 24px;
9716  }
9717
9718  .Video--picture-in-picture .Video-frame {
9719    padding-bottom: 56.25%;
9720  }
9721
9722  .Video-button--picture-in-picture {
9723    display: inline-block;
9724  }
9725}
9726
9727a.video-shadowbox-button.white {
9728  padding: 16px 42px 16px 8px;
9729  font-size: 18px;
9730  font-weight: 500;
9731  line-height: 24px;
9732  color: #fff;
9733  text-decoration: none;
9734}
9735
9736a.video-shadowbox-button.white::after {
9737  content: '';
9738  background-position: 0px -847px;
9739  height: 36px;
9740  width: 36px;
9741}
9742
9743a.video-shadowbox-button.white:hover {
9744  color: #bababa !important;
9745}
9746
9747a.video-shadowbox-button.white:hover::after {
9748  background-position: 0px -733px;
9749  height: 36px;
9750  width: 36px;
9751}
9752
9753#video-frame, #video-container {
9754  display: none;
9755}
9756
9757@media (max-width: 720px) {
9758  .wide-table {
9759    overflow-x: auto;
9760  }
9761
9762  .wide-table table {
9763    display: inline-table;
9764    margin-right: 0;
9765  }
9766}
9767
9768/* New CSS that isn't part of a component */
9769.paging-links {
9770  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
9771  margin: 30px 0;
9772  padding: 0 40px;
9773  /* Start class link doesn't have a caption */ }
9774
9775.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9776  font-size: 20px;
9777  font-weight: 500;
9778  display: inline-block;
9779  width: calc(50% - 2px);
9780  position: relative;
9781  padding: 46px 0 36px 0;
9782}
9783
9784@media (max-width: 719px) {
9785  .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9786    width: 100%;
9787  }
9788}
9789
9790.paging-links .start-class-link {
9791  padding: 36px 0;
9792}
9793
9794.paging-links .start-class-link, .paging-links .next-class-link {
9795  text-align: center;
9796  width: 100%;
9797}
9798
9799.paging-links .prev-page-link .page-link-caption {
9800  left: 0;
9801}
9802
9803.paging-links .prev-page-link:before {
9804  content: '';
9805  left: -24px;
9806  position: absolute;
9807  bottom: 41px;
9808}
9809
9810@media (max-width: 719px) {
9811  .paging-links .prev-page-link {
9812    display: none;
9813  }
9814}
9815
9816.paging-links .next-page-link, .paging-links .next-class-link {
9817  text-align: right;
9818}
9819
9820.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption {
9821  right: 0;
9822}
9823
9824.paging-links .next-page-link:before, .paging-links .next-class-link:before {
9825  content: '';
9826  right: -24px;
9827  position: absolute;
9828  bottom: 41px;
9829}
9830
9831.paging-links .start-class-link:after {
9832  content: '';
9833  right: -12px;
9834  position: relative;
9835  bottom: 3px;
9836}
9837
9838.paging-links .page-link-caption {
9839  position: absolute;
9840  top: 26px;
9841  font-size: 14px;
9842  font-weight: 700;
9843  opacity: 0.54;
9844}
9845
9846#tb li:before,
9847#qv li:before {
9848  background-position: 0px -669px;
9849  height: 24px;
9850  width: 24px;
9851  content: '';
9852  left: -8px;
9853  opacity: .7;
9854  position: absolute;
9855  top: -4px;
9856}
9857