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