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