default.css revision 190e610df3f15c00d46e8ee5bec661363334a86e 
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-studio {
6577  background: #424242;
6578}
6579
6580.dac-search-mode .dac-header {
6581  background: #b0bec5;
6582  -webkit-transition: background 200ms;
6583  transition: background 200ms;
6584}
6585
6586.dac-search-mode .dac-header-logo,
6587  .dac-search-mode .dac-header-console-btn {
6588  opacity: 0;
6589  visibility: hidden;
6590  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
6591  transition: visibility 0s linear 200ms, opacity 200ms linear;
6592}
6593
6594.dac-header-logo {
6595  display: block;
6596  font-size: 20px;
6597  font-weight: 400;
6598  float: left;
6599  letter-spacing: .3px;
6600  line-height: 36px;
6601  opacity: 1;
6602  padding: 13px 48px 15px 0;
6603}
6604
6605.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus {
6606  color: #fff;
6607}
6608
6609@media (min-width: 980px) {
6610  .dac-header-logo {
6611    border-right: 1px solid rgba(0, 0, 0, 0.1);
6612  }
6613}
6614
6615@media (min-width: 720px) and (max-width: 979px) {
6616  .dac-header-logo {
6617    padding-right: 10px;
6618  }
6619}
6620
6621.dac-header-logo-image {
6622  margin-right: 5px;
6623  vertical-align: top;
6624}
6625
6626.dac-header-tabs {
6627  list-style: none;
6628  margin: 0 10px;
6629  display: none;
6630  opacity: 1;
6631  -webkit-transition: opacity 200ms linear 200ms;
6632  transition: opacity 200ms linear 200ms;
6633}
6634
6635@media (min-width: 720px) and (max-width: 979px) {
6636  .dac-header-tabs {
6637    display: inline-block;
6638  }
6639}
6640
6641@media (min-width: 980px) {
6642  .dac-header-tabs {
6643    display: inline-block;
6644  }
6645}
6646
6647.dac-header-tabs li {
6648  display: inline-block;
6649}
6650
6651.dac-header-tab {
6652  display: inline-block;
6653  line-height: 64px;
6654  height: 64px;
6655  padding: 0 9px;
6656  color: #fff;
6657  color: rgba(255, 255, 255, 0.7);
6658  font-size: 14px;
6659  text-transform: uppercase;
6660  font-weight: 500;
6661}
6662
6663.dac-header-tab:hover {
6664  color: #fff;
6665}
6666
6667.dac-header-tab.selected {
6668  border-bottom: 4px solid #fff;
6669  height: 60px;
6670  color: #fff;
6671}
6672
6673.dac-search-mode .dac-header-tabs {
6674  opacity: 0;
6675  -webkit-transition: opacity 0ms linear 0ms;
6676  transition: opacity 0ms linear 0ms;
6677}
6678
6679.dac-header-console-btn {
6680  border-radius: 3px;
6681  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
6682  float: right;
6683  font-size: 14px;
6684  font-weight: 500;
6685  line-height: 28px;
6686  margin: 13px 13px 12px 24px;
6687  opacity: 1;
6688  padding: 4px 10px;
6689  position: relative;
6690  text-transform: uppercase;
6691  -webkit-transition: box-shadow .2s;
6692  transition: box-shadow .2s;
6693  z-index: 60;
6694}
6695
6696@media (min-width: 720px) and (max-width: 979px) {
6697  .dac-header-console-btn {
6698    display: none;
6699  }
6700}
6701
6702.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 {
6703  margin-right: 5px;
6704}
6705
6706.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus {
6707  color: #fff;
6708}
6709
6710.dac-header-console-btn:hover {
6711  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
6712}
6713
6714.dac-header-console-btn:focus {
6715  background: rgba(63, 81, 181, 0.1);
6716  outline: 0;
6717}
6718
6719.dac-studio .dac-header-console-btn {
6720  color:#fff;
6721  background:rgba(255, 255, 255, 0.3);
6722}
6723.dac-studio .dac-header-console-btn:hover {
6724  background:rgba(255, 255, 255, 0.5);
6725}
6726.dac-studio .dac-header-console-btn:focus {
6727  background:rgba(255, 255, 255, 0.7);
6728  color:#000;
6729}
6730
6731@media (max-width: 719px) {
6732  .dac-header {
6733    text-align: center;
6734  }
6735
6736  .dac-header-logo {
6737    border-right: 0;
6738    display: inline-block;
6739    margin-right: 0;
6740    float: none;
6741    padding-left: 0;
6742    padding-right: 0;
6743  }
6744
6745  .dac-header-console-btn {
6746    display: none;
6747  }
6748}
6749
6750/* Header Breadcrumbs component */
6751.dac-header-crumbs {
6752  list-style-type: none;
6753  margin: 23px 0 -13px 0;
6754  display: inline-block;
6755}
6756
6757.dac-header-crumbs.dac-has-content {
6758  opacity: 1;
6759}
6760
6761.dac-header-crumbs-item {
6762  float: left;
6763  position: relative;
6764  margin: 0;
6765  padding: 0;
6766}
6767
6768.dac-header-crumbs-item i, .dac-header-crumbs-item .dac-nav-link-forward {
6769  display: none;
6770}
6771
6772.dac-header-crumbs-item:before {
6773  content: '';
6774  background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
6775  width: 10px;
6776  height: 10px;
6777  display: inline-block;
6778  position: absolute;
6779  top: 12px;
6780  left: -15px;
6781}
6782
6783.dac-header-crumbs-item:first-child:before {
6784  content: none;
6785}
6786
6787.dac-header-crumbs-link {
6788  display: block;
6789  font-size: 16px;
6790  line-height: 32px;
6791  padding: 0 20px 0 0;
6792}
6793
6794.dac-header-crumbs-link, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus {
6795  color: #666;
6796}
6797
6798.dac-header-crumbs-link:focus {
6799  outline: 0;
6800  text-decoration: underline;
6801}
6802
6803.dac-header-crumbs-link.current {
6804  font-weight: 400;
6805}
6806
6807/* Header site search component */
6808.dac-header-search {
6809  bottom: 64px;
6810  position: absolute;
6811  right: 220px;
6812  top: 0;
6813  width: 238px;
6814  -webkit-transition: width 300ms, right 100ms, margin 100ms;
6815  transition: width 300ms, right 100ms, margin 100ms;
6816}
6817
6818.dac-header-search-inner {
6819  margin: 0 auto;
6820  max-width: 940px;
6821  position: relative;
6822  width: 100%;
6823}
6824
6825@media (min-width: 980px) {
6826  .dac-header-search-inner::after {
6827    background: -webkit-linear-gradient(right, #6ab344, rgba(106, 179, 68, 0));
6828    background: linear-gradient(to left, #6ab344, rgba(106, 179, 68, 0));
6829    content: '';
6830    display: block;
6831    height: 64px;
6832    position: absolute;
6833    right: 100%;
6834    top: 0;
6835    -webkit-transition: opacity 200ms, -webkit-transform 300ms;
6836    transition: opacity 200ms, transform 300ms;
6837    -webkit-transform-origin: right center;
6838    -ms-transform-origin: right center;
6839    transform-origin: right center;
6840    width: 64px;
6841  }
6842  .dac-studio .dac-header-search-inner::after {
6843    background: -webkit-linear-gradient(right, #424242, rgba(66, 66, 66, 0));
6844    background: linear-gradient(to left, #424242, rgba(66, 66, 66, 0));
6845  }
6846
6847  .dac-search-mode .dac-header-search-inner::after {
6848    opacity: 0;
6849    -webkit-transform: scaleX(0);
6850    -ms-transform: scaleX(0);
6851    transform: scaleX(0);
6852  }
6853}
6854
6855.dac-header-search-icon {
6856  left: 8px;
6857  pointer-events: none;
6858  position: absolute;
6859  top: 18px;
6860}
6861
6862.dac-header-search-input {
6863  background: #77be53;
6864  border-radius: 3px;
6865  border: none;
6866  box-sizing: border-box;
6867  color: #fff;
6868  font-size: 14px;
6869  font-weight: 600;
6870  margin: 13px 0;
6871  padding: 9px 36px 10px;
6872  -webkit-transition: background 200ms, color 200ms;
6873  transition: background 200ms, color 200ms;
6874  width: 100%;
6875}
6876
6877.dac-studio .dac-header-search {
6878  right:150px;
6879}
6880.dac-studio .dac-header-search-input {
6881  background: rgba(255, 255, 255, 0.3);
6882}
6883
6884.dac-header-search-close, .dac-header-search-clear {
6885  background: none;
6886  border: none;
6887  cursor: pointer;
6888  font-size: 0;
6889  outline: none;
6890  position: absolute;
6891  margin: 0;
6892}
6893
6894.dac-header-search-clear {
6895  display: inline-block;
6896  opacity: .4;
6897  padding: 8px;
6898  top: 15px;
6899  right: 0;
6900}
6901
6902.dac-header-search-clear:hover, .dac-header-search-clear:focus {
6903  opacity: .8;
6904}
6905
6906.dac-header-search-close {
6907  left: -45px;
6908  top: 20px;
6909  -webkit-transform: translateX(45px);
6910  -ms-transform: translateX(45px);
6911  transform: translateX(45px);
6912  visibility: hidden;
6913}
6914
6915.dac-header-search ::-webkit-input-placeholder {
6916  color: #fff;
6917  font-weight: 300;
6918  -webkit-transition: color 200ms;
6919  transition: color 200ms;
6920}
6921
6922.dac-header-search :-moz-placeholder {
6923  color: #fff;
6924  font-weight: 300;
6925  transition: color 200ms;
6926}
6927
6928.dac-header-search ::-moz-placeholder {
6929  color: #fff;
6930  font-weight: 300;
6931  transition: color 200ms;
6932}
6933
6934.dac-header-search :-ms-input-placeholder {
6935  color: #fff;
6936  font-weight: 300;
6937  transition: color 200ms;
6938}
6939
6940.dac-header-search-input:focus {
6941  outline: 0;
6942}
6943
6944.dac-search-mode .dac-header-search {
6945  width: 940px;
6946  right: 50%;
6947  margin-right: -470px;
6948}
6949
6950.dac-search-mode .dac-header-search .dac-header-search-input::after {
6951  background: -webkit-linear-gradient(right, #b0bec5, rgba(176, 190, 197, 0));
6952  background: linear-gradient(to left, #b0bec5, rgba(176, 190, 197, 0));
6953}
6954
6955.dac-search-mode .dac-header-search .dac-header-search-close {
6956  -webkit-transition: -webkit-transform 200ms ease-out 300ms;
6957  transition: transform 200ms ease-out 300ms;
6958  -webkit-transform: translateX(0);
6959  -ms-transform: translateX(0);
6960  transform: translateX(0);
6961  visibility: visible;
6962}
6963
6964.dac-search-mode .dac-header-search .dac-header-search-icon {
6965  left: 23px;
6966}
6967
6968.dac-search-mode .dac-header-search .dac-header-search-input {
6969  background: #fff;
6970  border-radius: 0;
6971  font-size: 18px;
6972  color: #666;
6973  padding-left: 55px;
6974  margin-top: 11px;
6975}
6976
6977.dac-search-mode .dac-header-search ::-webkit-input-placeholder {
6978  color: #505050;
6979}
6980
6981.dac-search-mode .dac-header-search :-moz-placeholder {
6982  color: #505050;
6983}
6984
6985.dac-search-mode .dac-header-search ::-moz-placeholder {
6986  color: #505050;
6987}
6988
6989.dac-search-mode .dac-header-search :-ms-input-placeholder {
6990  color: #505050;
6991}
6992
6993@media (min-width: 720px) and (max-width: 979px) {
6994  .dac-header-search {
6995    right: 20px;
6996    width: 200px;
6997    -webkit-transition: left 200ms, right 200ms, width 200ms;
6998    transition: left 200ms, right 200ms, width 200ms;
6999  }
7000
7001  .dac-search-mode .dac-header-search {
7002    left: 60px;
7003    right: 0;
7004    width: 100%;
7005  }
7006
7007  .dac-search-mode .dac-header-search .dac-header-search-inner {
7008    margin: 0;
7009    width: calc(100% - 60px - 10px);
7010  }
7011
7012  .dac-header-search-close {
7013    left: -42px;
7014  }
7015}
7016
7017@media (max-width: 719px) {
7018  .dac-header-search {
7019    bottom: 0;
7020    border-radius: 0;
7021    border-left: 1px solid rgba(0, 0, 0, 0.1);
7022    cursor: pointer;
7023    left: calc(100% - 64px);
7024    margin: 0;
7025    overflow: hidden;
7026    padding-left: 10px;
7027    padding-right: 10px;
7028    position: absolute;
7029    right: 0;
7030    top: 0;
7031  }
7032
7033  .dac-header-search-input {
7034    background: none;
7035    cursor: pointer;
7036    opacity: 0;
7037  }
7038
7039  .dac-search-mode .dac-header-search {
7040    background: #b0bec5;
7041    cursor: default;
7042    overflow: visible;
7043    left: 60px;
7044    right: 0;
7045    width: 100%;
7046    -webkit-transition: left 200ms, right 200ms, width 200ms;
7047    transition: left 200ms, right 200ms, width 200ms;
7048    padding: 0;
7049    border: none;
7050  }
7051
7052  .dac-search-mode .dac-header-search .dac-header-search-inner {
7053    margin: 0;
7054    width: calc(100% - 60px - 10px);
7055  }
7056
7057  .dac-search-mode .dac-header-search .dac-header-search-input {
7058    opacity: 1;
7059  }
7060}
7061
7062.highlighted em {
7063  color: #333;
7064  font-style: normal;
7065  font-weight: 700;
7066}
7067
7068.card-info .title.highlighted {
7069  color: #666;
7070}
7071
7072/* Main navigation component */
7073.dac-nav-sidebar {
7074  background: #f5f8fa;
7075  border-right: 1px solid rgba(0, 0, 0, 0.1);
7076  bottom: 0;
7077  left: 0;
7078  overflow: hidden;
7079  padding: 0;
7080  position: fixed;
7081  top: 64px;
7082  -webkit-transform: translate(-100%, 0);
7083  -ms-transform: translate(-100%, 0);
7084  transform: translate(-100%, 0);
7085  width: 250px;
7086  z-index: 60;
7087}
7088
7089.dac-nav-animating .dac-nav-sidebar {
7090  -webkit-transition: -webkit-transform .3s;
7091  transition: transform .3s;
7092}
7093
7094.dac-nav-open .dac-nav-sidebar {
7095  -webkit-transform: translate(0, 0);
7096  -ms-transform: translate(0, 0);
7097  transform: translate(0, 0);
7098}
7099
7100.dac-search-mode .dac-nav-sidebar {
7101  -webkit-transition: -webkit-transform .3s;
7102  transition: transform .3s;
7103  -webkit-transform: translate(-100%, 0);
7104  -ms-transform: translate(-100%, 0);
7105  transform: translate(-100%, 0);
7106}
7107
7108.dac-nav .dac-swap-section {
7109  -webkit-transition-duration: .3s;
7110  transition-duration: .3s;
7111}
7112
7113.dac-nav-back {
7114  margin-top: -3px;
7115  margin-right: 10px;
7116}
7117
7118.dac-nav-fullscreen {
7119  background: transparent;
7120  border: none;
7121  bottom: 100%;
7122  cursor: pointer;
7123  display: none;
7124  opacity: .8;
7125  outline: none;
7126  padding: 20px 15px;
7127  position: absolute;
7128  right: 0;
7129}
7130
7131@media (min-width: 980px) {
7132  .dac-nav-fullscreen {
7133    display: inline-block;
7134  }
7135}
7136
7137.dac-nav-fullscreen:hover {
7138  opacity: 1;
7139}
7140
7141.dac-nav-sub-slider {
7142  cursor: pointer;
7143  opacity: .5;
7144  position: absolute;
7145  right: 7px;
7146  top: 5px;
7147}
7148
7149.dac-nav-back-button {
7150  background: #546e7a;
7151  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
7152  display: block;
7153  font-weight: 500;
7154  font-size: 18px;
7155  left: 0;
7156  margin: 0;
7157  padding: 20px;
7158  position: absolute !important;
7159  right: 0;
7160  top: 0;
7161  z-index: 1;
7162}
7163
7164.dac-nav-back-button, .dac-nav-back-button:hover, .dac-nav-back-button:active {
7165  color: rgba(255, 255, 255, 0.7);
7166}
7167
7168.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 {
7169  opacity: .7;
7170}
7171
7172.dac-nav-logo {
7173  font-size: 20px;
7174  font-weight: 300;
7175  letter-spacing: .3px;
7176  line-height: 36px;
7177  margin: 0;
7178  padding: 14px 24px;
7179}
7180
7181.dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus {
7182  color: #444;
7183}
7184
7185.dac-nav-list {
7186  bottom: 0;
7187  left: 0;
7188  list-style-type: none;
7189  margin: 0;
7190  -webkit-overflow-scrolling: touch;
7191  overflow-y: scroll;
7192  padding: 16px 0;
7193  position: absolute !important;
7194  right: 0;
7195  top: 0 !important;
7196  scrollbar-face-color: #b7baba;
7197  scrollbar-track-color: #e5e8e9;
7198}
7199
7200.dac-nav-list::-webkit-scrollbar {
7201  width: 4px;
7202  height: 4px;
7203}
7204
7205.dac-nav-list::-webkit-scrollbar-thumb {
7206  background: #b7baba;
7207}
7208
7209.dac-nav-list::-webkit-scrollbar-track {
7210  background: #e5e8e9;
7211}
7212
7213.dac-nav-secondary {
7214  margin: 0;
7215}
7216
7217.dac-nav-item {
7218  list-style-type: none;
7219  margin: 0 0 10px;
7220  position: relative;
7221}
7222
7223.dac-nav-secondary .dac-nav-item {
7224  margin-bottom: 0;
7225}
7226
7227.dac-nav-head {
7228  display: block;
7229  font-size: 16px;
7230  font-weight: 300;
7231  letter-spacing: .24px;
7232  line-height: 32px;
7233  margin-bottom: 20px;
7234  margin-top: 0;
7235}
7236
7237.dac-nav-dimmer {
7238  background: #000;
7239  display: block;
7240  height: 100%;
7241  left: 0;
7242  opacity: 0;
7243  position: fixed;
7244  top: 0;
7245  -webkit-transform: translateZ(0);
7246  transform: translateZ(0);
7247  visibility: hidden;
7248  width: 100%;
7249  z-index: 60;
7250}
7251
7252.dac-nav-animating .dac-nav-dimmer {
7253  -webkit-transition: visibility 0s linear .3s, opacity .3s linear;
7254  transition: visibility 0s linear .3s, opacity .3s linear;
7255}
7256
7257.dac-nav-open .dac-nav-dimmer {
7258  opacity: .8;
7259  -webkit-transition-delay: 0s;
7260  transition-delay: 0s;
7261  visibility: visible;
7262}
7263
7264@media (min-width: 980px) {
7265  .dac-nav-dimmer {
7266    display: none;
7267  }
7268}
7269
7270.dac-nav-hamburger {
7271  display: inline-block;
7272  float: left;
7273  height: 15px;
7274  padding: 22px 20px;
7275  width: 18px;
7276}
7277
7278@media (max-width: 719px) {
7279  .dac-nav-hamburger {
7280    border-right: 1px solid rgba(0, 0, 0, 0.1);
7281    left: 0;
7282    padding-bottom: 27px;
7283    position: absolute;
7284    top: 0;
7285  }
7286}
7287
7288.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7289  background: rgba(0, 0, 0, 0.4);
7290  display: block;
7291  height: 2px;
7292  margin: 3px 0 0;
7293  opacity: .5;
7294  width: 100%;
7295}
7296
7297.dac-studio .dac-nav-hamburger-top,
7298.dac-studio .dac-nav-hamburger-mid,
7299.dac-studio .dac-nav-hamburger-bot {
7300  background: rgba(256, 256, 256, 0.4);
7301}
7302
7303.dac-nav-animating .dac-nav-hamburger-top, .dac-nav-animating .dac-nav-hamburger-mid, .dac-nav-animating .dac-nav-hamburger-bot {
7304  -webkit-transition: opacity .3s;
7305  transition: opacity .3s;
7306}
7307
7308@media (max-width: 719px) {
7309  .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot {
7310    background: #fff;
7311    opacity: 1;
7312  }
7313}
7314
7315.dac-nav-open .dac-nav-hamburger-top,
7316  .dac-nav-open .dac-nav-hamburger-mid,
7317  .dac-nav-open .dac-nav-hamburger-bot {
7318  opacity: 1;
7319}
7320
7321.dac-search-mode .dac-nav-hamburger {
7322  opacity: 0;
7323  visibility: hidden;
7324  -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear;
7325  transition: visibility 0s linear 200ms, opacity 200ms linear;
7326}
7327
7328.dac-nav-link {
7329  color: #444;
7330  display: block;
7331  font-size: 18px;
7332  font-weight: 500;
7333  letter-spacing: .24px;
7334  padding: 5px 20px;
7335  -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7336  transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
7337}
7338
7339.dac-nav-link:hover, .dac-nav-link:focus {
7340  color: rgba(68, 68, 68, 0.7);
7341}
7342
7343.dac-nav-link:focus {
7344  background: rgba(63, 81, 181, 0.1);
7345  outline: 0;
7346}
7347
7348.dac-nav-secondary .dac-nav-link {
7349  font-size: 12px;
7350  font-weight: 400;
7351  padding-left: 40px;
7352}
7353
7354.dac-nav-link.selected {
7355  background: rgba(63, 81, 181, 0.1);
7356  color: #039bef;
7357  position: relative;
7358}
7359
7360.dac-nav-link-forward {
7361  background: #546E7A;
7362  color: #fff;
7363  cursor: pointer;
7364  display: inline-block;
7365  line-height: 34px;
7366  padding: 0;
7367  position: absolute;
7368  right: 0;
7369  top: 0;
7370  text-align: center;
7371  width: 34px;
7372}
7373
7374.dac-nav-link-forward > .dac-nav-forward {
7375  opacity: .7;
7376  vertical-align: -3px;
7377}
7378
7379.dac-nav-sub {
7380  bottom: 0;
7381  left: 0;
7382  position: absolute !important;
7383  top: 65px !important;
7384  right: 0;
7385  z-index: 1;
7386}
7387
7388#body-content {
7389  padding-top: 64px;
7390}
7391
7392.dac-nav-animating #body-content {
7393  -webkit-transition: padding .3s;
7394  transition: padding .3s;
7395}
7396
7397@media (min-width: 980px) {
7398  .dac-nav-open #body-content {
7399    padding-left: 250px;
7400  }
7401}
7402
7403.dac-nav-open {
7404  overflow: hidden;
7405}
7406
7407@media (min-width: 980px) {
7408  .dac-nav-open {
7409    overflow: visible;
7410  }
7411}
7412
7413#devdoc-nav {
7414  height: 100%;
7415}
7416
7417.dac-reference-nav {
7418  height: calc(100% - 36px);
7419  overflow: hidden;
7420  position: relative;
7421}
7422
7423.dac-reference-nav ul,
7424  .dac-reference-nav li {
7425  margin: 0;
7426  list-style-type: none;
7427}
7428
7429.dac-reference-nav-list {
7430  bottom: 0;
7431  overflow: hidden;
7432  overflow-y: scroll;
7433  left: 0;
7434  padding: 10px;
7435  padding-left: 20px;
7436  position: absolute;
7437  right: 0;
7438  top: 0;
7439  scrollbar-face-color: #9da4a7;
7440  scrollbar-track-color: #c4cdd1;
7441}
7442
7443.dac-reference-nav-list::-webkit-scrollbar {
7444  width: 4px;
7445  height: 4px;
7446}
7447
7448.dac-reference-nav-list::-webkit-scrollbar-thumb {
7449  background: #9da4a7;
7450}
7451
7452.dac-reference-nav-list::-webkit-scrollbar-track {
7453  background: #c4cdd1;
7454}
7455
7456.dac-reference-nav-resources {
7457  display: none;
7458  padding: 0 0 0 13px;
7459}
7460
7461.dac-reference-nav-resource, .dac-reference-nav-toggle {
7462  color: #505050;
7463  cursor: pointer;
7464  display: block;
7465  font-size: 13px;
7466  line-height: 1;
7467  overflow: hidden;
7468  margin: 0;
7469  padding: 3px 0;
7470  position: relative;
7471  text-overflow: ellipsis;
7472  white-space: nowrap;
7473}
7474
7475.dac-reference-nav-toggle {
7476  margin-left: -12px;
7477  padding-left: 12px;
7478}
7479
7480.selected > .dac-reference-nav-resource {
7481  color: #039bef;
7482  font-weight: 600;
7483}
7484
7485.dac-reference-nav-toggle::before {
7486  background: transparent url(../images/styles/disclosure_up.png) no-repeat center center;
7487  content: '';
7488  display: block;
7489  height: 19px;
7490  left: 0;
7491  position: absolute;
7492  top: 0;
7493  width: 8px;
7494}
7495
7496.dac-reference-nav-toggle.dac-closed::before {
7497  -webkit-transform: scaleY(-1);
7498  -ms-transform: scaleY(-1);
7499  transform: scaleY(-1);
7500}
7501
7502/* nav */
7503#nav {
7504  background: #cfd8dc;
7505  bottom: 0;
7506  left: 0;
7507  margin: 0;
7508  -webkit-overflow-scrolling: touch;
7509  overflow-y: scroll;
7510  position: absolute !important;
7511  right: 0;
7512  top: 0 !important;
7513  padding: 10px;
7514  scrollbar-face-color: #9da4a7;
7515  scrollbar-track-color: #c4cdd1;
7516  /* section header links */
7517  /* nested nav headers */
7518}
7519
7520#nav::-webkit-scrollbar {
7521  width: 4px;
7522  height: 4px;
7523}
7524
7525#nav::-webkit-scrollbar-thumb {
7526  background: #9da4a7;
7527}
7528
7529#nav::-webkit-scrollbar-track {
7530  background: #c4cdd1;
7531}
7532
7533#nav li {
7534  font-size: 12px;
7535  line-height: 18px;
7536  list-style-type: none;
7537  margin: 0;
7538  padding: 0;
7539}
7540
7541#nav a {
7542  color: #505050;
7543  text-decoration: none;
7544  word-wrap: break-word;
7545}
7546
7547#nav .nav-section-header {
7548  padding: 0 30px 0 0;
7549  position: relative;
7550  -webkit-transition: background-color .1s;
7551  transition: background-color .1s;
7552}
7553
7554#nav .nav-section-header.empty {
7555  padding: 0;
7556}
7557
7558#nav .nav-section-header.empty::after {
7559  display: none;
7560}
7561
7562#nav .nav-section-header:after {
7563  background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
7564  content: '';
7565  height: 34px;
7566  display: block;
7567  position: absolute;
7568  right: 0;
7569  top: 1px;
7570  width: 34px;
7571}
7572
7573#nav li.selected a {
7574  color: #0288D1;
7575}
7576
7577#nav li.selected ul li a {
7578  color: #505050;
7579}
7580
7581#nav li.expanded .nav-section-header {
7582  background: #bac2c6;
7583}
7584
7585#nav li.expanded .nav-section-header.empty {
7586  background: none;
7587}
7588
7589#nav li.expanded li .nav-section-header {
7590  background: none;
7591}
7592
7593#nav li.expanded li ul {
7594  padding: 0 10px;
7595}
7596
7597#nav li.expanded > .nav-section-header:after {
7598  content: '';
7599  background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
7600  width: 34px;
7601  height: 34px;
7602}
7603
7604#nav li.expanded li ul.tree-list-children {
7605  padding: 0;
7606}
7607
7608#nav li.expanded li ul.tree-list-children .tree-list-children {
7609  padding: 0 0 0 10px;
7610}
7611
7612#nav .nav-section .nav-section .nav-section-header {
7613    /* no white line between second level sections */
7614  margin-bottom: 0;
7615}
7616
7617#nav > li > div > a {
7618  display: block;
7619  font-weight: 700;
7620  padding: 10px;
7621}
7622
7623#nav .nav-section .nav-section {
7624  position: relative;
7625  padding: 0;
7626  margin: 0;
7627}
7628
7629#nav .nav-section li a {
7630    /* first gen child (2nd level li) */
7631  display: block;
7632  font-weight: 700;
7633  text-transform: none;
7634  padding: 10px;
7635}
7636
7637#nav .nav-section li li a {
7638    /* second gen child (3rd level li) */
7639  font-weight: 400;
7640  padding: 6px 6px 6px 10px;
7641}
7642
7643#nav li span.tree-list-subtitle {
7644  display: inline-block;
7645  color: #555;
7646  font-size: 12px;
7647  padding: 10px;
7648  text-transform: uppercase;
7649}
7650
7651#nav li span.tree-list-subtitle:before {
7652  content: '—';
7653}
7654
7655#nav li span.tree-list-subtitle:after {
7656  content: '—';
7657}
7658
7659#nav li span.tree-list-subtitle.package {
7660  padding-top: 15px;
7661  cursor: default;
7662}
7663
7664#nav li span.tree-list-subtitle.package:before {
7665  content: '';
7666}
7667
7668#nav li span.tree-list-subtitle.package:after {
7669  content: '';
7670}
7671
7672#nav li ul.tree-list-children.classes {
7673  padding-left: 10px;
7674}
7675
7676#nav li ul {
7677  display: none;
7678  overflow: hidden;
7679  margin: 0;
7680}
7681
7682#nav li ul.animate-height-in {
7683  -webkit-transition: height 0.25s ease-in;
7684  transition: height 0.25s ease-in;
7685}
7686
7687#nav li ul.animate-height-out {
7688  -webkit-transition: height 0.25s ease-out;
7689  transition: height 0.25s ease-out;
7690}
7691
7692#nav li ul li {
7693  padding: 0;
7694}
7695
7696#nav li li li {
7697  padding: 0;
7698}
7699
7700#nav li ul > li {
7701  padding: 0;
7702}
7703
7704#nav li ul > li:last-child {
7705  padding-bottom: 5px;
7706}
7707
7708#nav li ul.tree-list-children > li:last-child {
7709  padding-bottom: 0;
7710}
7711
7712#nav li.expanded ul > li {
7713  background: #c4cdd1;
7714}
7715
7716#nav li.expanded ul > li li {
7717  background: inherit;
7718}
7719
7720#nav li ul.tree-list-children ul {
7721  display: block;
7722}
7723
7724#nav.samples-nav li li li a {
7725  padding-top: 3px;
7726  padding-bottom: 3px;
7727}
7728
7729#nav.samples-nav li li ul > li:last-child {
7730  padding-bottom: 3px;
7731}
7732
7733/* Hero carousel */
7734.dac-hero {
7735  background-color: #fff;
7736  background-position: 50% 30%;
7737  background-size: cover;
7738  box-sizing: border-box;
7739  font-size: 16px;
7740  min-height: 550px;
7741  padding-top: 88px;
7742}
7743
7744.dac-hero.dac-darken::before {
7745  background: rgba(0, 0, 0, 0.3);
7746  bottom: 0;
7747  content: '';
7748  display: block;
7749  left: 0;
7750  position: absolute;
7751  right: 0;
7752  top: 0;
7753}
7754
7755@media (max-width: 719px) {
7756  .dac-hero.dac-darken::before {
7757    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7758    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
7759  }
7760}
7761
7762.dac-hero.dac-darken .dac-hero-content {
7763  position: relative;
7764}
7765
7766@media (max-width: 719px) {
7767  .dac-hero {
7768    padding-bottom: 20px;
7769    padding-top: 20px;
7770  }
7771}
7772
7773.dac-hero-tag {
7774  font-size: 11px;
7775  font-weight: 700;
7776  letter-spacing: .07em;
7777  margin-bottom: 2px;
7778  text-transform: uppercase;
7779}
7780
7781.dac-hero-title {
7782  margin: 0 0 14px;
7783}
7784
7785@media (max-width: 719px) {
7786  .dac-hero-title {
7787    font-size: 28px;
7788    line-height: 35px;
7789  }
7790}
7791
7792.dac-hero-description {
7793  margin-bottom: 16px;
7794}
7795
7796@media (max-width: 719px) {
7797  .dac-hero-description {
7798    font-size: 14px;
7799  }
7800}
7801
7802.dac-hero-cta {
7803  display: inline-block;
7804  line-height: 40px;
7805  margin-right: 20px;
7806  -webkit-transition: opacity .3s;
7807  transition: opacity .3s;
7808}
7809
7810.dac-hero-cta:hover {
7811  color: currentColor;
7812  opacity: .54;
7813}
7814
7815.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 {
7816  margin-left: -8px;
7817}
7818
7819@media (max-width: 719px) {
7820  .dac-hero-cta {
7821    line-height: 28px;
7822  }
7823}
7824
7825.dac-hero-figure {
7826  text-align: center;
7827}
7828
7829/* Android Studio download page */
7830section#features {
7831  padding-top:0;
7832}
7833.wrap.feature {
7834  margin:80px auto;
7835}
7836.dac-section-links.feature-more {
7837  margin-top:-20px;
7838}
7839.dac-toggle-content .wrap.feature {
7840  margin-top:0;
7841}
7842
7843@media (max-width: 719px) {
7844  .dac-hero-figure {
7845    height: 150px;
7846    margin: 15px 0;
7847  }
7848
7849  .dac-hero-figure img {
7850    max-height: 150px;
7851  }
7852
7853  /* Android Studio download page */
7854  .feature .dac-hero-figure,
7855  .feature .dac-hero-figure img {
7856    height:auto;
7857    max-height:none;
7858  }
7859  .feature .dac-hero-figure img {
7860    width:90%;
7861    margin:0 auto;
7862  }
7863}
7864
7865.dac-hero-carousel {
7866  height: 550px;
7867  position: relative;
7868}
7869
7870.dac-hero-carousel > .dac-hero {
7871  bottom: 0;
7872  left: 0;
7873  position: absolute;
7874  right: 0;
7875  top: 0;
7876  will-change: opacity;
7877}
7878
7879.dac-hero-carousel > .dac-hero,
7880    .dac-hero-carousel > .dac-hero .wrap {
7881  opacity: 0;
7882}
7883
7884.dac-hero-carousel > .dac-hero.active {
7885  opacity: 1;
7886  -webkit-transition: opacity .5s;
7887  transition: opacity .5s;
7888  z-index: 1;
7889}
7890
7891.dac-hero-carousel > .dac-hero.active .wrap {
7892  opacity: 1;
7893  -webkit-transition: opacity .5s .5s;
7894  transition: opacity .5s .5s;
7895}
7896
7897.dac-hero-carousel > .dac-hero.out,
7898    .dac-hero-carousel > .dac-hero.out .wrap {
7899  -webkit-transition: opacity 0s .5s;
7900  transition: opacity 0s .5s;
7901  opacity: 0;
7902}
7903
7904.dac-hero-carousel-action {
7905  bottom: 0;
7906  display: block;
7907  left: 0;
7908  position: absolute;
7909  right: 0;
7910  top: 0;
7911  z-index: 1;
7912}
7913
7914.dac-hero-carousel .dac-hero-cta {
7915  position: relative;
7916  z-index: 1;
7917}
7918
7919.dac-hero-carousel-pagination {
7920  bottom: 33px;
7921  left: 0;
7922  position: absolute;
7923  right: 0;
7924}
7925
7926@media (max-width: 719px) {
7927  .dac-hero-carousel-pagination {
7928    text-align: center;
7929    bottom: 20px;
7930  }
7931}
7932
7933.dac-hero-carousel-pagination .dac-pagination-item {
7934  position: relative;
7935  z-index: 1;
7936}
7937
7938.dac-pagination {
7939  list-style: none;
7940  margin: 0 -6px;
7941}
7942
7943.dac-pagination-item {
7944  background-clip: content-box;
7945  background-color: rgba(153, 153, 153, 0.4);
7946  border-radius: 50%;
7947  cursor: pointer;
7948  display: inline-block;
7949  height: 14px;
7950  overflow: hidden;
7951  padding: 6px;
7952  pointer-events: all;
7953  text-indent: 100%;
7954  -webkit-transition: background-color .1s ease-in;
7955  transition: background-color .1s ease-in;
7956  white-space: nowrap;
7957  width: 14px;
7958  will-change: background-color;
7959}
7960
7961.dac-pagination-item:hover {
7962  background-color: rgba(153, 153, 153, 0.6);
7963}
7964
7965.dac-pagination-item.active, .dac-pagination-item.active:hover {
7966  background-color: #6ab344;
7967}
7968
7969.dac-invert .dac-pagination-item {
7970  background-color: rgba(204, 204, 204, 0.2);
7971}
7972
7973.dac-invert .dac-pagination-item:hover {
7974  background-color: rgba(153, 153, 153, 0.4);
7975}
7976
7977@media (max-width: 719px) {
7978  .dac-pagination-item {
7979    height: 12px;
7980    width: 12px;
7981  }
7982}
7983
7984/* Form component */
7985.dac-form {
7986  color: #505050;
7987  font-size: 16px;
7988  /* Modal Responsive */
7989}
7990
7991.dac-form a {
7992  color: #000;
7993}
7994
7995.dac-form-aside {
7996  display: inline-block;
7997  font-size: 12px;
7998  margin-top: 0;
7999}
8000
8001.dac-form-required {
8002  color: #ef4300;
8003}
8004
8005.dac-form-fieldset {
8006  padding: 0;
8007}
8008
8009.dac-form-legend {
8010  display: block;
8011  color: #333;
8012  font-weight: 500;
8013  margin: 20px 0 12px;
8014  padding: 0;
8015  width: 100%;
8016}
8017
8018.dac-form-legend > .dac-form-required {
8019  float: right;
8020  margin-top: 3px;
8021}
8022
8023.dac-form-input {
8024  border: 0 solid #e3e3e3;
8025  border-bottom-width: 1px;
8026  display: block;
8027  outline: 0;
8028  padding: 1px 0 8px;
8029  -webkit-transition: border-color .2s;
8030  transition: border-color .2s;
8031  width: 100%;
8032}
8033
8034.dac-form-input-group {
8035  position: relative;
8036}
8037
8038.dac-form-input-group > .dac-form-required {
8039  display: block;
8040  bottom: 3px;
8041  position: absolute;
8042  right: 0;
8043}
8044
8045.dac-form-input:focus {
8046  border-bottom-color: #09f;
8047}
8048
8049.dac-form-floatlabel {
8050  display: block;
8051  cursor: text;
8052  margin-top: 5px;
8053  pointer-events: none;
8054  -webkit-transform-origin: 0 100%;
8055  -ms-transform-origin: 0 100%;
8056  transform-origin: 0 100%;
8057  -webkit-transform: translate3d(0, 22px, 0) scale(1);
8058  transform: translate3d(0, 22px, 0) scale(1);
8059  -webkit-transition: -webkit-transform .2s;
8060  transition: transform .2s;
8061}
8062
8063.dac-focused > .dac-form-floatlabel,
8064    .dac-has-value > .dac-form-floatlabel {
8065  cursor: default;
8066  -webkit-transform: translate3d(0, 0, 0) scale(0.75);
8067  transform: translate3d(0, 0, 0) scale(0.75);
8068}
8069
8070.dac-form-radio, .dac-form-checkbox {
8071  opacity: 0;
8072  position: absolute;
8073  visibility: hidden;
8074}
8075
8076.dac-form-radio-group, .dac-form-checkbox-group {
8077  display: table;
8078}
8079
8080.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 {
8081  margin-top: 10px;
8082}
8083
8084.dac-form-radio-button, .dac-form-checkbox-button {
8085  box-sizing: border-box;
8086  cursor: pointer;
8087  display: table-cell;
8088  float: left;
8089  height: 18px;
8090  margin: 2px 10px 0 0;
8091  position: relative;
8092  width: 18px;
8093}
8094
8095.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before {
8096  box-sizing: border-box;
8097  content: '';
8098  display: block;
8099  position: absolute;
8100}
8101
8102.dac-form-radio-button::after, .dac-form-radio-button::before {
8103  border-radius: 50%;
8104  height: 100%;
8105  width: 100%;
8106}
8107
8108.dac-form-radio-button::before {
8109  background: rgba(0, 0, 0, 0.7);
8110  -webkit-transform: translateZ(0) scale(0);
8111  transform: translateZ(0) scale(0);
8112  -webkit-transition: -webkit-transform .3s;
8113  transition: transform .3s;
8114}
8115
8116.dac-form-radio-button::after {
8117  border: 2px solid rgba(0, 0, 0, 0.7);
8118}
8119
8120.dac-form-radio:checked + .dac-form-radio-button::before {
8121  -webkit-transform: translateZ(0) scale(0.5);
8122  transform: translateZ(0) scale(0.5);
8123}
8124
8125.dac-form-radio:focus + .dac-form-radio-button::after {
8126  border: 2px solid #09f;
8127}
8128
8129.dac-form-checkbox-button::before {
8130  border: 1px solid #6c6e6f;
8131  border-radius: 3px;
8132  height: 100%;
8133  -webkit-transition: background .1s ease-out, box-shadow .3s ease-out;
8134  transition: background .1s ease-out, box-shadow .3s ease-out;
8135  width: 100%;
8136}
8137
8138.dac-form-checkbox-button::after {
8139  border-bottom: 2px solid #fff;
8140  border-left: 2px solid #fff;
8141  bottom: 7px;
8142  height: 7px;
8143  left: 3px;
8144  -webkit-transform: rotate(-45deg);
8145  -ms-transform: rotate(-45deg);
8146  transform: rotate(-45deg);
8147  width: 12px;
8148}
8149
8150.dac-form-checkbox:checked + .dac-form-checkbox-button::before {
8151  background: #6c6e6f;
8152  -webkit-transition-timing-function: ease-in;
8153  transition-timing-function: ease-in;
8154}
8155
8156.dac-form-checkbox:focus + .dac-form-checkbox-button::before,
8157  .dac-form-checkbox:active + .dac-form-checkbox-button::before {
8158  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
8159}
8160
8161.dac-form-label {
8162  cursor: pointer;
8163  -webkit-user-select: none;
8164  -moz-user-select: none;
8165  -ms-user-select: none;
8166  user-select: none;
8167}
8168
8169@media (max-width: 719px) {
8170  .dac-form-legend {
8171    margin-bottom: 0;
8172  }
8173}
8174
8175/* Filter Resources Component*/
8176.dac-filter {
8177  color: #505050;
8178  margin-bottom: 20px;
8179  position: relative;
8180}
8181
8182.dac-filter.dac-filter-section {
8183  margin-top: -45px;
8184  text-align: right;
8185}
8186
8187@media (max-width: 719px) {
8188  .dac-filter.dac-filter-section {
8189    margin-top: 0;
8190    text-align: left;
8191  }
8192}
8193
8194.dac-filter-title {
8195  color: #666;
8196  cursor: default;
8197  display: inline-block;
8198  font-size: 12px;
8199  font-weight: 500;
8200  line-height: 24px;
8201  margin: 0;
8202  text-transform: uppercase;
8203}
8204
8205@media (max-width: 719px) {
8206  .dac-filter-title {
8207    margin-bottom: 20px;
8208  }
8209}
8210
8211.dac-filter-message {
8212  color: #78868d;
8213  font-size: 18px;
8214  margin: 0 10px 10px;
8215}
8216
8217.dac-filter-count {
8218  background: #6ab344;
8219  border-radius: 50%;
8220  color: #fff;
8221  display: inline-block;
8222  font-size: 12px;
8223  font-weight: 600;
8224  height: 24px;
8225  text-align: center;
8226  width: 24px;
8227}
8228
8229.dac-filter-count.dac-disabled {
8230  visibility: hidden;
8231}
8232
8233.dac-filter-chip {
8234  background: #bfc7cb;
8235  border-radius: 15px;
8236  color: #333;
8237  cursor: default;
8238  display: inline-block;
8239  line-height: 21px;
8240  margin: 0 10px 10px 0;
8241  padding: 4px 26px 4px 10px;
8242  position: relative;
8243}
8244
8245.dac-filter-chip-close {
8246  background-color: transparent;
8247  border: none;
8248  cursor: pointer;
8249  outline: 0;
8250  padding: 3px;
8251  position: absolute;
8252  right: 5px;
8253  top: 5px;
8254}
8255
8256.dac-filter-chip-close-icon {
8257  opacity: .7;
8258  margin-top: -2px;
8259  -webkit-transform: scale(0.57142857);
8260  -ms-transform: scale(0.57142857);
8261  transform: scale(0.57142857);
8262}
8263
8264.dac-filter-chip-close:hover > .dac-filter-chip-close-icon {
8265  opacity: 1;
8266}
8267
8268.dac-filter-chips {
8269  border-top: 1px solid rgba(0, 0, 0, 0.1);
8270  margin: 0;
8271  list-style-type: none;
8272  padding: 10px 0 0;
8273  position: relative;
8274  text-align: left;
8275}
8276
8277.dac-filter-item {
8278  box-sizing: border-box;
8279  float: left;
8280  margin-bottom: 20px;
8281  padding: 0 10px;
8282  width: 33.33333333%;
8283}
8284
8285@media (min-width: 720px) and (max-width: 979px) {
8286  .dac-filter-item {
8287    width: 50%;
8288  }
8289}
8290
8291@media (max-width: 719px) {
8292  .dac-filter-item {
8293    width: 100%;
8294  }
8295}
8296
8297/* Media component */
8298.dac-media {
8299  display: table;
8300  width: 100%;
8301}
8302
8303.dac-media-body, .dac-media-figure {
8304  display: table-cell;
8305  vertical-align: top;
8306}
8307
8308.dac-media-figure {
8309  padding: 0;
8310}
8311
8312.dac-media-body {
8313  width: 100%;
8314}
8315
8316.dac-swap {
8317  overflow: hidden;
8318  position: relative;
8319}
8320
8321.dac-swap-section {
8322  left: 0;
8323  opacity: 0;
8324  position: absolute;
8325  top: 0;
8326  width: 100%;
8327  -webkit-transition: opacity 1s, -webkit-transform .5s;
8328  transition: opacity 1s, transform .5s;
8329}
8330
8331.dac-swap-section.dac-no-anim {
8332  -webkit-transition: none;
8333  transition: none;
8334}
8335
8336.dac-swap-section.dac-up {
8337  -webkit-transform: translateY(-100%);
8338  -ms-transform: translateY(-100%);
8339  transform: translateY(-100%);
8340}
8341
8342.dac-swap-section.dac-down {
8343  -webkit-transform: translateY(100%);
8344  -ms-transform: translateY(100%);
8345  transform: translateY(100%);
8346}
8347
8348.dac-swap-section.dac-left {
8349  -webkit-transform: translateX(-100%);
8350  -ms-transform: translateX(-100%);
8351  transform: translateX(-100%);
8352}
8353
8354.dac-swap-section.dac-right {
8355  -webkit-transform: translateX(100%);
8356  -ms-transform: translateX(100%);
8357  transform: translateX(100%);
8358}
8359
8360.dac-swap-section.dac-active {
8361  opacity: 1;
8362  position: relative;
8363  -webkit-transform: translate(0, 0);
8364  -ms-transform: translate(0, 0);
8365  transform: translate(0, 0);
8366  width: auto;
8367}
8368
8369/* Modal component */
8370.dac-modal {
8371  opacity: 0;
8372  visibility: hidden;
8373  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8374  transition: visibility 0s linear 300ms, opacity 300ms linear;
8375  background: rgba(0, 0, 0, 0.8);
8376  bottom: 0;
8377  left: 0;
8378  overflow-x: hidden;
8379  overflow-y: auto;
8380  position: fixed;
8381  right: 0;
8382  top: 0;
8383  z-index: 70;
8384}
8385
8386.dac-modal.dac-active {
8387  opacity: 1;
8388  -webkit-transition-delay: 0s;
8389  transition-delay: 0s;
8390  visibility: visible;
8391}
8392
8393.dac-modal-open {
8394  overflow: hidden;
8395}
8396
8397.dac-modal-container {
8398  -webkit-box-align: center;
8399  -webkit-align-items: center;
8400  -ms-flex-align: center;
8401  align-items: center;
8402  display: -webkit-box;
8403  display: -webkit-flex;
8404  display: -ms-flexbox;
8405  display: flex;
8406  -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8407  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
8408  -webkit-box-pack: center;
8409  -webkit-justify-content: center;
8410  -ms-flex-pack: center;
8411  justify-content: center;
8412  min-height: 100%;
8413  width: 100%;
8414}
8415
8416.dac-modal-window {
8417  background: #fff;
8418  box-sizing: border-box;
8419  margin: 20px auto;
8420  -webkit-transition: -webkit-transform .3s;
8421  transition: transform .3s;
8422  -webkit-transform: translate3d(0, -30px, 0);
8423  transform: translate3d(0, -30px, 0);
8424  width: 960px;
8425}
8426
8427.dac-modal.dac-active .dac-modal-window {
8428  -webkit-transform: translate3d(0, 0, 0);
8429  transform: translate3d(0, 0, 0);
8430}
8431
8432.dac-modal-header {
8433  background: #00695c;
8434  padding: 35px 35px 30px;
8435  position: relative;
8436}
8437
8438.dac-has-small-header .dac-modal-header {
8439  padding: 10px 20px;
8440}
8441
8442.dac-modal-header-actions {
8443  padding: 8px;
8444  position: absolute;
8445  right: 5px;
8446  top: 5px;
8447}
8448
8449.dac-modal-header-open, .dac-modal-header-close {
8450  background: none;
8451  border: none;
8452  cursor: pointer;
8453  line-height: 0;
8454  outline: 0;
8455  opacity: .7;
8456  -webkit-transition: background-color .3s;
8457  transition: background-color .3s;
8458}
8459
8460.dac-modal-header-open:active, .dac-modal-header-close:active {
8461  background: rgba(255, 255, 255, 0.2);
8462}
8463
8464.dac-modal-header-close:before {
8465  content: '';
8466  top: -1px;
8467  position: relative;
8468}
8469
8470.dac-modal-header-open {
8471  margin: 10px;
8472}
8473
8474.dac-modal-header-title {
8475  color: #fff;
8476  font-size: 24px;
8477  font-weight: 300;
8478  line-height: 32px;
8479  padding: 0 150px 0 0;
8480}
8481
8482.dac-has-small-header .dac-modal-header-title {
8483  font-size: 16px;
8484  font-weight: 500;
8485}
8486
8487.dac-modal-header-subtitle {
8488  bottom: 0;
8489  color: #fff;
8490  display: inline-block;
8491  font: inherit;
8492  font-size: 14px;
8493  margin: 0;
8494  opacity: .8;
8495  position: absolute;
8496  right: 0;
8497}
8498
8499.dac-modal-content {
8500  padding: 12px 35px;
8501}
8502
8503.dac-modal-action {
8504  margin: 0;
8505}
8506
8507.dac-modal-footer {
8508  padding: 24px 35px;
8509}
8510
8511@media (max-width: 1000px) {
8512  .dac-modal-window {
8513    margin: 20px;
8514    width: auto;
8515  }
8516
8517  .dac-modal-container {
8518    z-index: auto;
8519  }
8520}
8521
8522@media (max-width: 719px) {
8523  .dac-modal-window {
8524    margin: 10px;
8525  }
8526
8527  .dac-modal-header {
8528    padding: 35px 10px 10px;
8529  }
8530
8531  .dac-modal-header-title {
8532    font-size: 16px;
8533    line-height: 24px;
8534    padding: 0;
8535  }
8536
8537  .dac-modal-header-subtitle {
8538    display: block;
8539    margin: 0;
8540    position: static;
8541    text-align: right;
8542  }
8543
8544  .dac-modal-header-actions {
8545    top: 1px;
8546  }
8547
8548  .dac-modal-content {
8549    padding: 10px;
8550  }
8551
8552  .dac-modal-footer {
8553    border-top: 1px solid #e3e3e3;
8554    padding: 35px 10px;
8555  }
8556}
8557
8558.newsletter .dac-modal-footer {
8559  padding-top: 0;
8560  text-align: right;
8561}
8562
8563.newsletter-checkboxes {
8564  padding-top: 20px;
8565}
8566
8567.newsletter-success-message {
8568  font-size: 32px;
8569  line-height: 1.4;
8570  padding: 40px 30px;
8571  text-align: center;
8572}
8573
8574@media (max-width: 719px) {
8575  .newsletter-success-message {
8576    font-size: 16px;
8577    padding: 12px 0 0;
8578  }
8579}
8580
8581@media (min-width: 720px) {
8582  .newsletter-checkboxes {
8583    padding-top: 46px;
8584  }
8585
8586  .newsletter-leftCol {
8587    padding-right: 40px;
8588  }
8589
8590  .newsletter-rightCol {
8591    padding-left: 40px;
8592  }
8593}
8594
8595@media (max-width: 719px) {
8596  .newsletter .dac-modal-footer {
8597    margin-top: 30px;
8598    padding: 30px 10px;
8599    text-align: center;
8600  }
8601}
8602
8603.dac-blog-reader {
8604  padding: 50px 90px;
8605}
8606
8607.dac-blog-reader-title {
8608  color: #333;
8609  font-size: 45px;
8610  font-weight: 300;
8611  line-height: 1.2;
8612  padding: 10px 0;
8613}
8614
8615.dac-blog-reader-date {
8616  color: #b8b8b8;
8617  font-size: 12px;
8618  font-weight: 600;
8619  line-height: 1;
8620  text-transform: uppercase;
8621}
8622
8623.dac-blog-reader-text > p:first-child i {
8624  display: inline-block;
8625  margin-bottom: 40px;
8626}
8627
8628.dac-blog-reader-text li {
8629  margin-bottom: 0;
8630}
8631
8632.dac-blog-reader-text iframe {
8633  margin-left: auto !important;
8634  margin-right: auto !important;
8635  max-width: 100%;
8636}
8637
8638@media (max-width: 719px) {
8639  .dac-blog-reader {
8640    padding: 30px 20px;
8641  }
8642}
8643
8644.dac-custom-search {
8645  background: #fff;
8646  margin: 0 -10px;
8647  padding: 20px 10px;
8648  z-index: 1;
8649}
8650
8651.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social {
8652  top: -48px;
8653}
8654
8655.dac-custom-search-section-title {
8656  color: #505050;
8657}
8658
8659.dac-custom-search-entry {
8660  margin-bottom: 36px;
8661  margin-top: 24px;
8662  margin-left:10px;
8663}
8664
8665.dac-custom-search-entry.cols:after {
8666    clear: none; }
8667
8668.dac-custom-search-image-wrapper {
8669  float: left;
8670  position: relative;
8671}
8672
8673.dac-custom-search-image {
8674  background-size: cover;
8675  height: 112px;
8676  width:150px;
8677  margin-right:15px;
8678}
8679
8680.dac-custom-search-text-wrapper {
8681  position: relative;
8682}
8683
8684.dac-custom-search-title {
8685  color: #333;
8686  font-size: 14px;
8687  font-weight: 700;
8688  line-height: 24px;
8689  padding: 0;
8690  clear:none;
8691}
8692
8693.dac-custom-search-title a {
8694  color: inherit;
8695}
8696
8697.dac-custom-search-section {
8698  color: #999;
8699  font-size: 16px;
8700  font-variant: small-caps;
8701  font-weight: 700;
8702  margin: -5px 0 0 0;
8703}
8704
8705.dac-custom-search-snippet {
8706  color: #666;
8707  margin: 0;
8708}
8709
8710.dac-custom-search-link {
8711  font-weight: 500;
8712  word-wrap: break-word;
8713  width: 100%;
8714}
8715
8716.dac-custom-search-load-more {
8717  background: none;
8718  border: none;
8719  color: #333;
8720  cursor: pointer;
8721  display: block;
8722  font-size: 14px;
8723  font-weight: 700;
8724  margin: 75px auto;
8725  outline: none;
8726  padding: 10px;
8727}
8728
8729.dac-custom-search-load-more:hover {
8730  opacity: 0.7;
8731}
8732
8733.dac-custom-search-no-results {
8734  color: #999;
8735}
8736
8737.dac-search-hero {
8738  font-size: 16px;
8739  padding: 50px 0 14px 0;
8740}
8741
8742.dac-search-results {
8743  opacity: 0;
8744  visibility: hidden;
8745  -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear;
8746  transition: visibility 0s linear 300ms, opacity 300ms linear;
8747  background-color: #fff;
8748  bottom: 0;
8749  left: 0;
8750  overflow-y: auto;
8751  padding: 0 10px;
8752  position: fixed;
8753  right: 0;
8754  -webkit-transition: opacity 100ms;
8755  transition: opacity 100ms;
8756  top: 64px;
8757  z-index: 50;
8758}
8759
8760.dac-nav-animating .dac-search-results {
8761  -webkit-transition: opacity 100ms, padding .3s;
8762  transition: opacity 100ms, padding .3s;
8763}
8764
8765.dac-search-results * {
8766  box-sizing: border-box;
8767}
8768
8769.dac-search-open .dac-search-results {
8770  opacity: 1;
8771  visibility: visible;
8772}
8773
8774.dac-search-results-content {
8775  background: #eceff1;
8776  margin: 0 -10px;
8777  padding: 0 10px;
8778}
8779
8780.dac-search-results-for {
8781  margin-bottom: -5px;
8782  overflow: hidden;
8783  padding-top: 5px;
8784}
8785
8786.dac-search-results-for span {
8787  color: #039bef;
8788}
8789
8790.dac-search-mode .dac-search-results-for {
8791  display: none;
8792}
8793
8794.dac-search-results-history {
8795  background: #eceff1;
8796  min-height: 100%;
8797  margin: 0 -10px;
8798  padding: 0 10px;
8799}
8800
8801.dac-search-results-hero {
8802  padding-top: 20px;
8803}
8804
8805.dac-search-results-metadata {
8806  padding-bottom: 40px;
8807}
8808
8809#dac-search-results-reference {
8810  float:right;
8811  z-index:999;
8812}
8813
8814@media (max-width: 719px) {
8815  #dac-search-results-reference {
8816    float:none;
8817  }
8818}
8819
8820.dac-search-results-reference {
8821  background: white;
8822  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
8823  margin: 0 0 20px 0;
8824  overflow: hidden;
8825  padding: 6px 0 4px;
8826}
8827
8828.dac-search-results-reference .namespace {
8829  color: #666;
8830}
8831
8832.dac-search-results-reference.is-expanded {
8833  height: auto;
8834}
8835
8836.dac-search-results-reference-header {
8837  color: #999;
8838  font-size: 16px;
8839  font-variant: small-caps;
8840  font-weight: 700;
8841  margin: 0;
8842  padding: 18px 12px 0;
8843  text-transform: lowercase;
8844}
8845
8846.dac-search-results-reference-header:first-child {
8847  padding-top: 0;
8848}
8849
8850.dac-search-results-reference-entry {
8851  margin: 0;
8852}
8853
8854.dac-search-results-reference-entry a {
8855  color: #333;
8856  display: block;
8857  font-size: 0.81em;
8858  line-height: 1.5em;
8859  padding: 0 12px 5px 12px;
8860  width: 100%;
8861  white-space: nowrap;
8862}
8863
8864ul.dac-search-results-reference {
8865list-style: none;
8866}
8867
8868ul.dac-search-results-reference li[data-toggle="show-more"] {
8869  cursor:pointer;
8870}
8871
8872ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] {
8873  display:none;
8874}
8875
8876.dac-search-results-reference-entry a:hover {
8877  background-color: #eceff1;
8878}
8879
8880.dac-search-results-reference-entry em {
8881  font-style: normal;
8882  font-weight: 700;
8883}
8884
8885.dac-search-results-reference-entry-empty {
8886  color: #999;
8887  font-size: 0.81em;
8888  margin: 0;
8889  padding: 2px 12px 14px;
8890}
8891
8892.dac-search-results-resources {
8893  margin: 0;
8894}
8895
8896.dac-search-results-resources .resource-card {
8897  border-right: 2px solid #999;
8898}
8899
8900.dac-search-results-resources .resource-card-about {
8901  border-right: 2px solid #6ab344;
8902}
8903
8904.dac-search-results-resources .resource-card-about .section {
8905  color: #6ab344;
8906}
8907
8908.dac-search-results-resources .resource-card-develop {
8909  border-right: 2px solid #ff7043;
8910}
8911
8912.dac-search-results-resources .resource-card-develop .section {
8913  color: #ff7043;
8914}
8915
8916.dac-search-results-resources .resource-card-design {
8917  border-right: 2px solid #00bcd4;
8918}
8919
8920.dac-search-results-resources .resource-card-design .section {
8921  color: #00bcd4;
8922}
8923
8924.dac-search-results-resources .resource-card-distribute {
8925  border-right: 2px solid #afb42b;
8926}
8927
8928.dac-search-results-resources .resource-card-distribute .section {
8929  color: #afb42b;
8930}
8931
8932@media (max-width: 719px) {
8933  .dac-search-results-reference.no-results {
8934    display: none;
8935  }
8936}
8937
8938@media (min-width: 980px) {
8939  .dac-nav-open.dac-search-open .dac-search-results {
8940    padding-left: 260px;
8941  }
8942
8943  .dac-search-mode.dac-search-open .dac-search-results {
8944    padding-left: 10px;
8945  }
8946}
8947
8948.dac-selected {
8949  color: #039bef !important;
8950}
8951
8952.dac-selected em {
8953  color: #039bef;
8954}
8955
8956.resource-card.dac-selected {
8957  box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7);
8958}
8959
8960.resource-card.dac-selected em {
8961  color: #333;
8962}
8963
8964.dac-expand, .dac-section {
8965  margin-left: -20px;
8966  margin-right: -20px;
8967  padding-left: 20px;
8968  padding-right: 20px;
8969}
8970
8971@media (max-width: 719px) {
8972  .dac-expand, .dac-section {
8973    margin-left: -10px;
8974    margin-right: -10px;
8975    padding-left: 10px;
8976    padding-right: 10px;
8977  }
8978}
8979
8980.dac-invert {
8981  color: #b3b3b3;
8982  color: rgba(255, 255, 255, 0.7);
8983}
8984
8985.dac-invert h1, .dac-invert h2, .dac-invert h3 {
8986  color: #fff;
8987}
8988
8989.dac-light.dac-hero, .dac-light.dac-section {
8990  background-color: #eceff1;
8991}
8992
8993.dac-gray.dac-hero, .dac-gray.dac-section {
8994  background-color: #d8dfe2;
8995}
8996
8997.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section {
8998   background-color: #b0bec5;
8999}
9000
9001.dac-dark.dac-hero, .dac-dark.dac-section {
9002  background-color: #37474f;
9003}
9004
9005.dac-red.dac-hero, .dac-red.dac-section {
9006  background-color: #dc4d38;
9007}
9008
9009.dac-hero-cta, .dac-section-title, .dac-section-links {
9010  color: #212121;
9011  color: rgba(0, 0, 0, 0.87);
9012}
9013
9014.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
9015  color: white;
9016}
9017
9018.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 {
9019  opacity: .87;
9020}
9021
9022.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 {
9023  opacity: 1;
9024}
9025
9026.dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
9027  color: #757575;
9028  color: rgba(0, 0, 0, 0.54);
9029}
9030
9031.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle {
9032  color: #b3b3b3;
9033  color: rgba(255, 255, 255, 0.7);
9034}
9035
9036.dac-section {
9037  background-position: 50% 50%;
9038  background-size: cover;
9039  padding-bottom: 84px;
9040  padding-top: 84px;
9041  position: relative;
9042}
9043
9044@media (max-width: 719px) {
9045  .dac-section {
9046    padding-bottom: 52px;
9047    padding-top: 52px;
9048  }
9049}
9050
9051.dac-section.dac-small {
9052  padding-bottom: 32px;
9053  padding-top: 32px;
9054}
9055
9056.dac-section.dac-slim {
9057  padding-bottom: 0;
9058  padding-top: 0;
9059}
9060
9061.dac-section-title {
9062  text-align: center;
9063  padding-bottom: 40px;
9064  padding-top: 0;
9065}
9066
9067.dac-section-subtitle {
9068  font-size: 16px;
9069  padding-bottom: 40px;
9070  margin-top: -24px;
9071  text-align: center;
9072}
9073
9074.dac-section-links {
9075  font-size: 16px;
9076  list-style: none;
9077  line-height: 40px;
9078  margin: 16px 0 0;
9079  text-align: center;
9080}
9081
9082@media (max-width: 719px) {
9083  .dac-section-links {
9084    margin-left: -8px;
9085    text-align: left;
9086  }
9087}
9088
9089.dac-section-link {
9090  cursor: pointer;
9091  display: inline-block;
9092  margin: 0 32px;
9093  -webkit-transition: opacity .3s;
9094  transition: opacity .3s;
9095}
9096
9097.dac-section-link:hover {
9098  opacity: .54;
9099}
9100
9101@media (max-width: 719px) {
9102  .dac-section-link {
9103    display: block;
9104    margin: 0;
9105  }
9106}
9107
9108.dac-section-link a {
9109  color: inherit;
9110}
9111
9112/*
9113SCSS variables are information about icon's compiled state, stored under its original file name
9114
9115.icon-home {
9116  width: $icon-home-width;
9117}
9118
9119The large array-like variables contain all information about a single icon
9120$icon-home: x y offset_x offset_y width height total_width total_height image_path;
9121
9122At the bottom of this section, we provide information about the spritesheet itself
9123$spritesheet: width height image $spritesheet-sprites;
9124*/
9125.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,
9126#qv li:before {
9127  background-image: url(/assets/images/sprite.png);
9128  display: inline-block;
9129  vertical-align: middle; }
9130  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) {
9131    .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,
9132    #qv li:before {
9133      background-image: url(/assets/images/sprite@2x.png);
9134      background-size: 36px 883px; } }
9135
9136.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 {
9137  background-position: 0px -669px;
9138  height: 24px;
9139  width: 24px;
9140  vertical-align: -6px; }
9141  .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 {
9142    background-position: 0px -513px;
9143    height: 24px;
9144    width: 24px; }
9145
9146.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 {
9147  background-position: 0px -695px;
9148  height: 36px;
9149  width: 36px;
9150  vertical-align: -10px; }
9151  .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 {
9152    background-position: 0px -771px;
9153    height: 36px;
9154    width: 36px; }
9155
9156.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 {
9157  background-position: 0px -487px;
9158  height: 24px;
9159  width: 24px;
9160  vertical-align: -6px; }
9161  .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 {
9162    background-position: 0px -565px;
9163    height: 24px;
9164    width: 24px; }
9165
9166.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 {
9167  background-position: 0px -539px;
9168  height: 24px;
9169  width: 24px;
9170  vertical-align: -6px; }
9171  .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 {
9172    background-position: 0px -305px;
9173    height: 24px;
9174    width: 24px; }
9175
9176.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 {
9177  background-position: 0px 0px;
9178  height: 11px;
9179  width: 19px; }
9180
9181.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 {
9182  background-position: 0px -215px;
9183  height: 18px;
9184  width: 11px; }
9185
9186.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 {
9187  background-position: 0px -123px;
9188  height: 16px;
9189  width: 16px; }
9190
9191.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 {
9192  background-position: 0px -695px;
9193  height: 36px;
9194  width: 36px; }
9195
9196.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 {
9197  background-position: 0px -771px;
9198  height: 36px;
9199  width: 36px; }
9200
9201.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 {
9202  background-position: 0px -669px;
9203  height: 24px;
9204  width: 24px; }
9205
9206.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 {
9207  background-position: 0px -513px;
9208  height: 24px;
9209  width: 24px; }
9210
9211.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 {
9212  background-position: 0px -89px;
9213  height: 14px;
9214  width: 14px; }
9215
9216.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 {
9217  background-position: 0px -435px;
9218  height: 24px;
9219  width: 24px; }
9220
9221.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 {
9222  background-position: 0px -27px;
9223  height: 12px;
9224  width: 12px; }
9225
9226.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 {
9227  background-position: 0px -409px;
9228  height: 24px;
9229  width: 24px; }
9230
9231.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 {
9232  background-position: 0px -383px;
9233  height: 24px;
9234  width: 24px; }
9235
9236.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 {
9237  background-position: 0px -357px;
9238  height: 24px;
9239  width: 24px; }
9240
9241.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 {
9242  background-position: 0px -331px;
9243  height: 24px;
9244  width: 24px; }
9245
9246.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 {
9247  background-position: 0px -279px;
9248  height: 24px;
9249  width: 24px; }
9250
9251.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 {
9252  background-position: 0px -235px;
9253  height: 20px;
9254  width: 17px; }
9255
9256.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 {
9257  background-position: 0px -809px;
9258  height: 36px;
9259  width: 36px; }
9260
9261.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 {
9262  background-position: 0px -13px;
9263  height: 12px;
9264  width: 16px; }
9265
9266.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 {
9267  background-position: 0px -105px;
9268  height: 16px;
9269  width: 16px; }
9270
9271.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 {
9272  background-position: 0px -177px;
9273  height: 16px;
9274  width: 16px; }
9275
9276.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 {
9277  background-position: 0px -159px;
9278  height: 16px;
9279  width: 16px; }
9280
9281.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 {
9282  background-position: 0px -141px;
9283  height: 16px;
9284  width: 16px; }
9285
9286.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 {
9287  background-position: 0px -195px;
9288  height: 18px;
9289  width: 18px; }
9290
9291.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 {
9292  background-position: 0px -461px;
9293  height: 24px;
9294  width: 24px; }
9295
9296.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 {
9297  background-position: 0px -733px;
9298  height: 36px;
9299  width: 36px; }
9300
9301.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 {
9302  background-position: 0px -847px;
9303  height: 36px;
9304  width: 36px; }
9305
9306.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 {
9307  background-position: 0px -257px;
9308  height: 20px;
9309  width: 16px; }
9310
9311.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 {
9312  background-position: 0px -41px;
9313  height: 14px;
9314  width: 14px; }
9315
9316.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 {
9317  background-position: 0px -591px;
9318  height: 24px;
9319  width: 24px; }
9320
9321.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 {
9322  background-position: 0px -617px;
9323  height: 24px;
9324  width: 24px; }
9325
9326.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 {
9327  background-position: 0px -643px;
9328  height: 24px;
9329  width: 24px; }
9330
9331.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 {
9332  background-position: 0px -73px;
9333  height: 14px;
9334  width: 16px; }
9335
9336.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 {
9337  background-position: 0px -565px;
9338  height: 24px;
9339  width: 24px; }
9340
9341.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 {
9342  background-position: 0px -487px;
9343  height: 24px;
9344  width: 24px; }
9345
9346.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 {
9347  background-position: 0px -305px;
9348  height: 24px;
9349  width: 24px; }
9350
9351.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 {
9352  background-position: 0px -539px;
9353  height: 24px;
9354  width: 24px; }
9355
9356.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 {
9357  background-position: 0px -57px;
9358  height: 14px;
9359  width: 18px; }
9360
9361/* Toast Component */
9362.dac-toast {
9363  background: #ffebc3;
9364  border-top: 1px solid #e5d4a1;
9365  display: none;
9366  color: rgba(0, 0, 0, 0.87);
9367  line-height: 1.4;
9368  padding: 10px; }
9369  .dac-toast.dac-visible {
9370    display: block; }
9371  .dac-toast-wrap {
9372    box-sizing: border-box;
9373    margin: 0 auto;
9374    max-width: 940px;
9375    padding-right: 20px;
9376    position: relative; }
9377  .dac-toast-close-btn {
9378    background-color: transparent;
9379    border: none;
9380    border-radius: 0;
9381    cursor: pointer;
9382    opacity: .4;
9383    padding: 0;
9384    position: absolute;
9385    right: 0;
9386    top: 1px; }
9387    .dac-toast-close-btn:hover, .dac-toast-close-btn:focus, .dac-toast-close-btn:active {
9388      outline: none;
9389      opacity: 1; }
9390  .dac-toast-group {
9391    bottom: 0;
9392    left: 0;
9393    position: fixed;
9394    right: 0;
9395    z-index: 60; }
9396  .dac-toast.dac-danger {
9397    background-color: #ffccbc;
9398    border-top-color: #e5b7a9; }
9399  .dac-toast.dac-success {
9400    background-color: #cdedc8;
9401    border-top-color: #c6d5b4; }
9402
9403.dac-tab-item {
9404  box-sizing: border-box;
9405  cursor: pointer;
9406  display: table-cell;
9407  margin: 0;
9408  padding: 8px 12px;
9409  position: relative;
9410  text-align: left; }
9411  @media (max-width: 719px) {
9412    .dac-tab-item {
9413      padding-right: 12px;
9414      text-align: center;
9415      width: 33.33333333%; } }
9416
9417.dac-tab-title {
9418  color: #333;
9419  display: inline-block;
9420  font-size: 16px;
9421  font-weight: 500;
9422  margin: 0; }
9423
9424.dac-tab-arrow {
9425  margin-top: -2px; }
9426  @media (max-width: 719px) {
9427    .dac-tab-arrow {
9428      position: absolute;
9429      visibility: hidden; } }
9430
9431.dac-tab-bar {
9432  display: inline-block;
9433  list-style-type: none;
9434  margin: 0 0 0 12px;
9435  vertical-align: middle;
9436  overflow: hidden; }
9437  @media (max-width: 719px) {
9438    .dac-tab-bar {
9439      display: table;
9440      margin-left: 0;
9441      width: 100%; } }
9442
9443.dac-tab-views {
9444  list-style-type: none;
9445  margin: 0; }
9446
9447.dac-tab-view {
9448  background: #fff;
9449  display: none;
9450  overflow: hidden;
9451  margin: 0 0 10px;
9452  padding: 20px 10px 0;
9453  text-align: left; }
9454
9455.dac-tab-item.dac-active {
9456  background: #fff; }
9457
9458.dac-tab-item.dac-active .dac-tab-arrow {
9459  -webkit-transform: scaleY(-1);
9460      -ms-transform: scaleY(-1);
9461          transform: scaleY(-1); }
9462
9463.dac-tab-view.dac-active {
9464  display: block; }
9465
9466.dac-toggle-expand {
9467  cursor: pointer;
9468  display: inline-block; }
9469
9470.dac-toggle-collapse {
9471  cursor: pointer;
9472  display: none; }
9473
9474.dac-toggle.is-expanded .dac-toggle-expand {
9475  display: none; }
9476
9477.dac-toggle.is-expanded .dac-toggle-collapse {
9478  display: inline-block; }
9479
9480.dac-toggle-content {
9481  clear: left;
9482  overflow: hidden;
9483  max-height: 0;
9484  -webkit-transition: .3s max-height;
9485          transition: .3s max-height; }
9486
9487.dac-toggle.is-expanded .dac-toggle-content {
9488  max-height: none; }
9489
9490.dac-toggle.dac-mobile .dac-toggle-content {
9491  max-height: none; }
9492
9493@media (max-width: 719px) {
9494  .dac-toggle.dac-mobile .dac-toggle-content {
9495    max-height: 0; }
9496  .dac-toggle.is-expanded .dac-toggle-content {
9497    max-height: none; } }
9498
9499/**
9500 * Fades out an element.
9501 * Applies visibility hidden when the transition is finished.
9502 *
9503 * Use opacity: 1; to show the element.
9504 */
9505.dac-visible-mobile-block, .dac-mobile-only,
9506.dac-visible-mobile-inline,
9507.dac-visible-mobile-inline-block,
9508.dac-visible-tablet-block,
9509.dac-visible-tablet-inline,
9510.dac-visible-tablet-inline-block,
9511.dac-visible-desktop-block,
9512.dac-visible-desktop-inline,
9513.dac-visible-desktop-inline-block {
9514  display: none !important; }
9515
9516@media (max-width: 719px) {
9517  .dac-hidden-mobile {
9518    display: none !important; }
9519  .dac-visible-mobile-block, .dac-mobile-only {
9520    display: block !important; }
9521  .dac-visible-mobile-inline {
9522    display: inline !important; }
9523  .dac-visible-mobile-inline-block {
9524    display: inline-block !important; } }
9525
9526@media (min-width: 720px) and (max-width: 979px) {
9527  .dac-hidden-tablet {
9528    display: none !important; }
9529  .dac-visible-tablet-block {
9530    display: block !important; }
9531  .dac-visible-tablet-inline {
9532    display: inline !important; }
9533  .dac-visible-tablet-inline-block {
9534    display: inline-block !important; } }
9535
9536@media (min-width: 980px) {
9537  .dac-hidden-desktop {
9538    display: none !important; }
9539  .dac-visible-desktop-block {
9540    display: block !important; }
9541  .dac-visible-desktop-inline {
9542    display: inline !important; }
9543  .dac-visible-desktop-inline-block {
9544    display: inline-block !important; } }
9545
9546.dac-offset-parent {
9547  position: relative !important; }
9548
9549/**
9550 * Hide from browsers/screenreaders on all sizes.
9551 */
9552.dac-hidden {
9553  display: none !important; }
9554
9555/**
9556 * Break strings when their length exceeds the width of their container.
9557 */
9558.dac-text-break {
9559  word-wrap: break-word !important; }
9560
9561/**
9562 * Horizontal text alignment
9563 */
9564.dac-text-center {
9565  text-align: center !important; }
9566
9567.dac-text-left {
9568  text-align: left !important; }
9569
9570.dac-text-right {
9571  text-align: right !important; }
9572
9573/**
9574 * Prevent whitespace wrapping
9575 */
9576.dac-text-no-wrap {
9577  white-space: nowrap !important; }
9578
9579/**
9580 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
9581 */
9582.dac-text-truncate {
9583  max-width: 100%;
9584  overflow: hidden !important;
9585  text-overflow: ellipsis !important;
9586  white-space: nowrap !important;
9587  word-wrap: normal !important; }
9588
9589/**
9590 * Floats
9591 */
9592.dac-float-left {
9593  float: left !important; }
9594
9595.dac-float-right {
9596  float: right !important; }
9597
9598/**
9599 * New block formatting context
9600 *
9601 * This affords some useful properties to the element. It won't wrap under
9602 * floats. Will also contain any floated children.
9603 * N.B. This will clip overflow. Use the alternative method below if this is
9604 * problematic.
9605 */
9606.dac-nbfc {
9607  overflow: hidden !important;
9608}
9609
9610/**
9611 * New block formatting context (alternative)
9612 *
9613 * Alternative method when overflow must not be clipped.
9614 *
9615 * N.B. This breaks down in some browsers when elements within this element
9616 * exceed its width.
9617 */
9618.dac-nbfc-alt {
9619  display: table-cell !important;
9620  width: 10000px !important;
9621}
9622
9623.Video {
9624  display: none;
9625}
9626
9627.Video-overlay {
9628  background-color: rgba(0, 0, 0, 0.8);
9629  width: 100%;
9630  height: 100%;
9631  position: fixed;
9632  top: 0;
9633  left: 0;
9634  z-index: 9999;
9635}
9636
9637.Video-container {
9638  width: 90vw;
9639  height: 50.625vw;
9640  max-height: calc(90vh - 29.25px);
9641  max-width: calc(160vh - 52px);
9642  margin: auto;
9643  position: fixed;
9644  top: -52px;
9645  right: 0;
9646  bottom: 0;
9647  left: 0;
9648  z-index: 9999;
9649}
9650
9651@media (min-width: 1422.22222222px) and (min-height: 800px) {
9652  .Video-container {
9653    width: 1280px;
9654    height: 720px;
9655  }
9656}
9657
9658.Video-controls {
9659  background: #28655F;
9660  height: 52px;
9661  margin: 0 auto;
9662  position: relative;
9663  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9664}
9665
9666.Video-frame {
9667  position: relative;
9668  height: 100%;
9669  background: black;
9670  box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4);
9671}
9672
9673.Video-loading {
9674  color: rgba(255, 255, 255, 0.35);
9675  font-size: 16px;
9676  position: absolute;
9677  top: 50%;
9678  left: 50%;
9679  -webkit-transform: translate(-50%, -50%);
9680  -ms-transform: translate(-50%, -50%);
9681  transform: translate(-50%, -50%);
9682}
9683
9684#youTubePlayer {
9685  max-height: 720px;
9686  position: absolute;
9687  top: 0;
9688  right: 0;
9689  bottom: 0;
9690  left: 0;
9691  width: 100%;
9692  height: 100%;
9693}
9694
9695.Video-button {
9696  background-color: transparent;
9697  border: none;
9698  display: inline-block;
9699  height: 100%;
9700  width: 52px;
9701  outline: none;
9702  cursor: pointer;
9703  -webkit-transition: opacity 200ms;
9704  transition: opacity 200ms;
9705}
9706
9707.Video-button:hover {
9708  opacity: 0.8;
9709}
9710
9711.Video-button--picture-in-picture {
9712  background-position: 0px -461px;
9713  height: 24px;
9714  width: 24px;
9715  display: none;
9716  position: absolute;
9717  right: 64px;
9718  top: 14px;
9719}
9720
9721.Video-button--close {
9722  background-position: 0px -435px;
9723  height: 24px;
9724  width: 24px;
9725  position: absolute;
9726  right: 14px;
9727  top: 14px;
9728}
9729
9730@media (min-width: 720px) {
9731  .Video--picture-in-picture .Video-overlay {
9732    display: none;
9733  }
9734
9735  .Video--picture-in-picture .Video-container {
9736    top: auto;
9737    left: auto;
9738    bottom: 20px;
9739    right: 20px;
9740    width: 40%;
9741    max-width: 420px;
9742    height: auto;
9743  }
9744
9745  .Video--picture-in-picture .Video-button--picture-in-picture {
9746    background-position: 0px -409px;
9747    height: 24px;
9748    width: 24px;
9749  }
9750
9751  .Video--picture-in-picture .Video-frame {
9752    padding-bottom: 56.25%;
9753  }
9754
9755  .Video-button--picture-in-picture {
9756    display: inline-block;
9757  }
9758}
9759
9760a.video-shadowbox-button.white {
9761  padding: 16px 42px 16px 8px;
9762  font-size: 18px;
9763  font-weight: 500;
9764  line-height: 24px;
9765  color: #fff;
9766  text-decoration: none;
9767}
9768
9769a.video-shadowbox-button.white::after {
9770  content: '';
9771  background-position: 0px -847px;
9772  height: 36px;
9773  width: 36px;
9774}
9775
9776a.video-shadowbox-button.white:hover {
9777  color: #bababa !important;
9778}
9779
9780a.video-shadowbox-button.white:hover::after {
9781  background-position: 0px -733px;
9782  height: 36px;
9783  width: 36px;
9784}
9785
9786#video-frame, #video-container {
9787  display: none;
9788}
9789
9790@media (max-width: 720px) {
9791  .wide-table {
9792    overflow-x: auto;
9793  }
9794
9795  .wide-table table {
9796    display: inline-table;
9797    margin-right: 0;
9798  }
9799}
9800
9801/* New CSS that isn't part of a component */
9802.paging-links {
9803  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
9804  margin: 30px 0;
9805  padding: 0 40px;
9806  /* Start class link doesn't have a caption */ }
9807
9808.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9809  font-size: 20px;
9810  font-weight: 500;
9811  display: inline-block;
9812  width: calc(50% - 2px);
9813  position: relative;
9814  padding: 46px 0 36px 0;
9815}
9816
9817@media (max-width: 719px) {
9818  .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link {
9819    width: 100%;
9820  }
9821}
9822
9823.paging-links .start-class-link {
9824  padding: 36px 0;
9825}
9826
9827.paging-links .start-class-link, .paging-links .next-class-link {
9828  text-align: center;
9829  width: 100%;
9830}
9831
9832.paging-links .prev-page-link .page-link-caption {
9833  left: 0;
9834}
9835
9836.paging-links .prev-page-link:before {
9837  content: '';
9838  left: -24px;
9839  position: absolute;
9840  bottom: 41px;
9841}
9842
9843@media (max-width: 719px) {
9844  .paging-links .prev-page-link {
9845    display: none;
9846  }
9847}
9848
9849.paging-links .next-page-link, .paging-links .next-class-link {
9850  text-align: right;
9851}
9852
9853.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption {
9854  right: 0;
9855}
9856
9857.paging-links .next-page-link:before, .paging-links .next-class-link:before {
9858  content: '';
9859  right: -24px;
9860  position: absolute;
9861  bottom: 41px;
9862}
9863
9864.paging-links .start-class-link:after {
9865  content: '';
9866  right: -12px;
9867  position: relative;
9868  bottom: 3px;
9869}
9870
9871.paging-links .page-link-caption {
9872  position: absolute;
9873  top: 26px;
9874  font-size: 14px;
9875  font-weight: 700;
9876  opacity: 0.54;
9877}
9878
9879#tb li:before,
9880#qv li:before {
9881  background-position: 0px -669px;
9882  height: 24px;
9883  width: 24px;
9884  content: '';
9885  left: -8px;
9886  opacity: .7;
9887  position: absolute;
9888  top: -4px;
9889}
9890