default.css revision b8281c70915cc296d7083f46811850e6888ffdf3 
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:#F9F9F9;
21  -webkit-font-smoothing: antialiased;
22  /* prevent subpixel antialiasing, which thickens the text */
23  /* text-rendering: optimizeLegibility; */
24  /* turned off ligatures due to bug 5945455 */ }
25
26body {
27  color: #222;
28  font: 14px/19px Roboto, sans-serif;
29  font-weight: 400;
30  letter-spacing:.1;
31  padding:0 10px; }
32
33#page-container {
34  width: 940px;
35  margin: 0 40px; }
36
37#page-header {
38  height: 80px;
39  margin-bottom: 20px;
40  font-size: 48px;
41  line-height: 48px;
42  font-weight: 100;
43  padding-left: 10px; }
44  #page-header a {
45    display: block;
46    position: relative;
47    top: 20px;
48    text-decoration: none;
49    color: #555555 !important; }
50
51#main-row {
52  display: inline-block; }
53  #main-row:after {
54    content: ".";
55    display: block;
56    height: 0;
57    clear: both;
58    visibility: hidden; }
59  * html #main-row {
60    height: 1px; }
61
62#page-footer {
63  margin-left: 190px;
64  margin-top: 80px;
65  color: #999999;
66  padding-bottom: 40px;
67  font-size: 12px;
68  line-height: 15px; }
69  #page-footer a {
70    color: #777777; }
71  #page-footer #copyright {
72    margin-bottom: 10px; }
73
74#nav-container {
75  width: 160px;
76  min-height: 10px;
77  margin-right: 20px;
78  float: left; }
79
80#nav {
81  margin:0;
82  padding:0 0 30px;
83}
84
85#side-nav {
86  min-height:5px; /* silly way to avoid doc floating left when nav goes fixed */
87  margin-bottom:1px;
88}
89#devdoc-nav {
90  outline:none;
91  width:auto;
92  margin: 20px 0 0; }
93
94#devdoc-nav h2 {
95  border:0;
96}
97
98#devdoc-nav.fixed {
99  position: fixed;
100  margin:0;
101  top: 65px; /* sticky-header height + 20px gutter */
102}
103
104#devdoc-nav span.small {
105  font-size:12px;
106  font-weight:normal;
107}
108
109#content {
110  width: 760px;
111  float: left; }
112
113a:hover,
114acronym:hover {
115  color: #7aa1b0 !important; }
116
117a:focus,
118a:active {
119  color: #33b5e5 !important; }
120
121a.external-link {
122  background:url('../images/styles/open_new_page.png') no-repeat 100% 50%;
123  padding-right:16px;
124}
125
126img {
127  border: none; }
128#jd-content img {
129  margin-bottom:15px;
130}
131
132ul {
133  margin: 0;
134  padding: 0; }
135
136strong {
137  font-weight: 500; }
138
139em {
140  font-style: italic; }
141
142acronym,
143.tooltip-link {
144  border-bottom: 1px dotted #555555;
145  cursor: help; }
146
147acronym:hover,
148.tooltip-link:hover {
149  color: #7aa1b0;
150  border-bottom-color: #7aa1b0; }
151
152img.with-shadow,
153video.with-shadow {
154  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
155
156/* disclosures mixin */
157/* content layout */
158.layout-content-row {
159  display: inline-block;
160  margin-bottom: 10px; }
161  * html .layout-content-row {
162    height: 1px; }
163
164.layout-content-col {
165  float: left;
166  margin-left: 20px; }
167  .layout-content-col:first-child {
168    margin-left: 0; }
169  .layout-content-col h3,
170  .layout-content-col h4 {
171    margin-top:0; }
172
173.layout-content-col.span-1 {
174  width: 40px; }
175
176.layout-content-col.span-2 {
177  width: 100px; }
178
179.layout-content-col.span-3 {
180  width: 160px; }
181
182.layout-content-col.span-4 {
183  width: 220px; }
184
185.layout-content-col.span-5 {
186  width: 280px; }
187
188.layout-content-col.span-6 {
189  width: 340px; }
190
191.layout-content-col.span-7 {
192  width: 400px; }
193
194.layout-content-col.span-8 {
195  width: 460px; }
196
197.layout-content-col.span-9 {
198  width: 520px; }
199
200.layout-content-col.span-10 {
201  width: 580px; }
202
203.layout-content-col.span-11 {
204  width: 640px; }
205
206.layout-content-col.span-12 {
207  width: 700px; }
208
209.layout-content-col.span-13 {
210  width: 760px; }
211
212.vspace.size-1 {
213  height: 10px; }
214
215.vspace.size-2 {
216  height: 20px; }
217
218.vspace.size-3 {
219  height: 30px; }
220
221.vspace.size-4 {
222  height: 40px; }
223
224.vspace.size-5 {
225  height: 50px; }
226
227.vspace.size-6 {
228  height: 60px; }
229
230.vspace.size-7 {
231  height: 70px; }
232
233.vspace.size-8 {
234  height: 80px; }
235
236.vspace.size-9 {
237  height: 90px; }
238
239.vspace.size-10 {
240  height: 100px; }
241
242.vspace.size-11 {
243  height: 110px; }
244
245.vspace.size-12 {
246  height: 120px; }
247
248.vspace.size-13 {
249  height: 130px; }
250
251.vspace.size-14 {
252  height: 140px; }
253
254.vspace.size-15 {
255  height: 150px; }
256
257.vspace.size-16 {
258  height: 160px; }
259
260/* nav */
261#nav {
262  /* section header divs */
263  /* expanded section header divs */
264  /* sublinks */ }
265  #nav li {
266    list-style-type: none;
267    font-size: 14px;
268    margin:0;
269    padding:0;
270    line-height: 15px; }
271  #nav a {
272    color: #555555;
273    text-decoration: none;
274    word-wrap:break-word; }
275  #nav .nav-section-header {
276    position: relative;
277    margin-bottom: 1px;
278    padding: 0 30px 0 0; }
279  #nav li.selected a, #nav li.selected > .nav-section-header > a {
280    color: #09C;
281  }
282  #nav li.selected ul li a {
283  /* don't highlight child items */
284    color: #555555; }
285  #nav .nav-section .nav-section .nav-section-header {
286    /* no white line between second level sections */
287    margin-bottom: 0; }
288    /* section header links */
289    #nav > li > div > a {
290      display: block;
291      color: #333333;
292      font-weight: 500;
293      padding: 10px 0 10px 10px; }
294    #nav .nav-section-header:after {
295      content: '';
296      background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
297      width: 34px;
298      height: 34px;
299      display: block;
300      position: absolute;
301      top: 0;
302      right: 0; }
303    #nav .nav-section-header.empty {
304      padding:0; }
305    #nav .nav-section-header.empty:after {
306      display: none; }
307    /* nested nav headers */
308    #nav .nav-section .nav-section {
309      position: relative;
310      padding: 0;
311      margin: 0; }
312    #nav .nav-section li a {
313    /* first gen child (2nd level li) */
314      display:block;
315      font-weight: normal;
316      text-transform: none;
317      padding: 7px 5px 7px 10px;
318       }
319    #nav .nav-section li li a {
320    /* second gen child (3rd level li) */
321      padding: 5px 5px 5px 10px;
322       }
323  #nav li.expanded .nav-section-header {
324    background:#e9e9e9;
325    background: rgba(0, 0, 0, 0.05); }
326  #nav li.expanded li .nav-section-header {
327    background: transparent; }
328  #nav li.expanded li ul {
329  /* 3rd level ul */
330    padding:0 0 0 10px;
331  }
332    #nav li.expanded > .nav-section-header:after {
333      content: '';
334      background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
335      width: 34px;
336      height: 34px; }
337  #nav li.expanded li ul.tree-list-children {
338    padding: 0;
339  }
340  #nav li.expanded li ul.tree-list-children .tree-list-children {
341    padding:0 0 0 10px;
342  }
343  #nav li span.tree-list-subtitle {
344    display:inline-block;
345    padding:5px 0 0 10px;
346    color:#555;
347    text-transform:uppercase;
348    font-size:12px;
349  }
350  #nav li span.tree-list-subtitle:before {
351    content: '—';
352  }
353  #nav li span.tree-list-subtitle:after {
354    content: '—';
355  }
356  #nav li span.tree-list-subtitle.package {
357    padding-top:15px;
358    cursor:default;
359  }
360  #nav li span.tree-list-subtitle.package:before {
361    content: '';
362  }
363  #nav li span.tree-list-subtitle.package:after {
364    content: '';
365  }
366  #nav li ul.tree-list-children.classes {
367    padding-left:10px;
368  }
369  #nav li ul {
370    display:none;
371    overflow: hidden;
372    margin: 0; }
373    #nav li ul.animate-height-in {
374      -webkit-transition: height 0.25s ease-in;
375      -moz-transition: height 0.25s ease-in;
376      transition: height 0.25s ease-in; }
377    #nav li ul.animate-height-out {
378      -webkit-transition: height 0.25s ease-out;
379      -moz-transition: height 0.25s ease-out;
380      transition: height 0.25s ease-out; }
381    #nav li ul li {
382      padding: 0; }
383      #nav li li li {
384        padding: 0; }
385  #nav li.expanded ul {
386    }
387    #nav li ul > li {
388      padding:0;
389    }
390    #nav li ul > li:last-child {
391      padding-bottom:5px;
392    }
393    #nav li ul.tree-list-children > li:last-child {
394      padding-bottom:0;
395    }
396    #nav li.expanded ul > li {
397      background:#efefef;
398      background: rgba(0, 0, 0, 0.03); }
399    #nav li.expanded ul > li li {
400      background:inherit; }
401  #nav li ul.tree-list-children ul {
402    display:block; }
403
404#nav.samples-nav li li li {
405  font-size:13px;
406}
407#nav.samples-nav li li li a {
408  padding-top:3px;
409  padding-bottom:3px;
410}
411#nav.samples-nav li li ul > li:last-child {
412  padding-bottom:3px;
413}
414
415.new,
416.new-child {
417  font-size: .78em;
418  font-weight: bold;
419  color: #ff3d3d;
420  vertical-align:top;
421  white-space:nowrap;
422}
423
424/* content header */
425.content-header {
426  height: 30px;
427  margin:36px 0 23px;  /* same as h1 */
428  padding:0 0 10px;}  /* same as h1 */
429.content-header.just-links {
430  margin-bottom:0;
431  padding-bottom:0;}
432
433.content-header h1 {
434  margin:0;
435  padding:0;
436  width: 700px;
437}
438.content-header > div:first-child {
439  height:1px; /* set fixed height for the header div to ensure the
440                  next/prev links align with toc on training classes */
441}
442
443.content-footer {
444  border-top: 1px solid #ccc;
445  margin-top: 10px;
446  padding-top:10px;
447  width:100%; }
448
449.content-footer .col-9 {
450  margin-left:0;
451}
452.content-footer .col-4 {
453  margin-right:0;
454}
455.content-footer.wrap {
456  width:940px;
457}
458.content-footer .plus-container {
459  margin:5px 0 0;
460  text-align:right;
461  float:right;
462}
463
464.paging-links {
465  position: relative;
466  height:30px; }
467  .paging-links a {
468    position: absolute; }
469  .paging-links a,
470  .training-nav-top a {
471    font-size: 14px;
472    line-height: 30px;
473    color: #555555;
474    text-decoration: none;
475    text-transform: uppercase; }
476    .paging-links .prev-page-link:before,
477    .training-nav-top .prev-page-link:before {
478      content: '';
479      background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%;
480      width: 10px;
481      height: 10px;
482      display: inline-block;
483      margin-right: 5px; }
484    .training-nav-top .next-page-link,
485    .training-nav-top .start-class-link,
486    .training-nav-top .start-course-link {
487    right: 10px; }
488    .paging-links .prev-page-link {
489      left: -15px; }
490    .paging-links .next-page-link {
491      right: 0; }
492    .next-page-link:after,
493    .start-class-link:after,
494    .start-course-link:after,
495    .next-class-link:after,
496    .go-link:after {
497      content: '';
498      background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
499      width: 10px;
500      height: 10px;
501      display: inline-block;
502      margin-left: 5px; }
503    .prev-page-link.inline:before {
504      content: none; }
505    .next-page-link.inline:after {
506      content: none; }
507
508  .content-footer .paging-links .next-page-link {
509    left:0;
510  }
511
512  .training-nav-top a {
513    display:block;
514    float:left;
515    width:122px;
516    height:28px;
517    padding: 8px;
518    line-height:28px;
519    text-align:center;
520    border:1px solid #DADADA;
521    border-bottom:0;
522  }
523
524  .training-nav-top a.next-page-link {
525    border-left:0;
526    width:123px;
527  }
528
529  .paging-links a.disabled,
530  .training-nav-top a.disabled,
531  .content-footer a.disabled {
532    color:#bbb;
533  }
534
535  .paging-links a.disabled:hover,
536  .training-nav-top a.disabled:hover,
537  .content-footer a.disabled:hover {
538    cursor:default;
539    color:#bbb !important;
540  }
541
542  .training-nav-top a.start-class-link,
543  .training-nav-top a.start-course-link {
544    width:262px;
545  }
546
547  .paging-links a.start-class-link {
548    width:100%;
549  }
550
551  /* list of classes on course landing page */
552  ol.class-list {
553    list-style:none;
554    margin-left:0;
555  }
556  ol.class-list>li {
557    margin:0 0 15px;
558    padding:5px 0 0;
559    overflow:hidden;
560    border-top:1px solid #ccc;
561  }
562  ol.class-list li a.title {
563    font-size:16px;
564    margin:0;
565    clear:left;
566    display:block;
567    height:32px;
568    padding:0 4px;
569  }
570  ol.class-list li a.title h2 {
571    color:inherit;
572    margin:0 0 10px;
573    display:block;
574    float:left;
575    width:675px;
576  }
577  ol.class-list li a.title span {
578    display:none;
579    float:left;
580    font-size:18px;
581    font-weight:bold;
582    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
583    width: 10px;
584    height: 32px;
585  }
586  ol.class-list li a.title:hover {
587    background:#ddd;
588    color:#258AAF !important;
589  }
590  ol.class-list li a.title:hover span {
591    display:block;
592  }
593
594  #jd-content
595  ol.class-list li img {
596    float:left;
597    clear:left;
598    width:64px;
599    margin:0 20px 0 0;
600  }
601  ol.class-list li p.description {
602    float:left;
603    display:block;
604    width:250px;
605    margin:0;
606  }
607  ol.class-list li p.description.article {
608    width: 550px;
609  }
610  ol.class-list ol {
611    float:left;
612    width:320px;
613    margin:0 0 0 30px;
614    list-style:none;
615    margin:0 0 0 20px;
616  }
617  ol.class-list div.lessons li {
618    margin:0 0 6px;
619    line-height:16px;
620  }
621
622
623  .hide {
624    display:none !important;
625  }
626
627  .content-footer.next-class {
628    display:block;
629    border:0;
630    margin-top:0;
631    padding-top:0;
632  }
633
634  .content-footer.next-class a.next-class-link {
635    display:block;
636    text-transform:uppercase;
637  }
638
639
640
641  /* inner-doc tabs w/ title */
642
643div#title-tabs-wrapper {
644  border-bottom:1px solid #ccc;
645  margin:20px 0 30px;
646}
647h1.with-title-tabs {
648  display:inline-block;
649  margin:0 0 -1px 0;
650  padding:0 60px 0 0;
651  border-bottom:1px solid #F9F9F9;
652}
653ul#title-tabs {
654  list-style:none;
655  padding:0;
656  height:29px;
657  margin:0;
658  font-size:16px;
659  line-height:26px;
660  display:inline-block;
661  vertical-align:bottom;
662}
663ul#title-tabs li {
664  display:block;
665  float:left;
666  margin-right:40px;
667  border-bottom: 3px solid transparent;
668}
669ul#title-tabs li.selected {
670  border-bottom: 3px solid #93C;
671}
672ul#title-tabs li a {
673  color:#333;
674}
675ul#title-tabs li a:hover,
676ul#title-tabs li a:active {
677  color:#93C !important;
678}
679
680
681
682/* content body */
683@-webkit-keyframes glowheader {
684  from {
685    background-color: #33b5e5;
686    color: #000;
687    border-bottom-color: #000; }
688
689  to {
690    background-color: transparent;
691    color: #33b5e5;
692    border-bottom-color: #33b5e5; } }
693
694@-moz-keyframes glowheader {
695  from {
696    background-color: #33b5e5;
697    color: #000;
698    border-bottom-color: #000; }
699
700  to {
701    background-color: transparent;
702    color: #33b5e5;
703    border-bottom-color: #33b5e5; } }
704
705@keyframes glowheader {
706  from {
707    background-color: #33b5e5;
708    color: #000;
709    border-bottom-color: #000; }
710
711  to {
712    background-color: transparent;
713    color: #33b5e5;
714    border-bottom-color: #33b5e5; } }
715
716h1:target,
717h2:target,
718h3:target {
719    -webkit-animation-name: glowheader;
720    -moz-animation-name: glowheader;
721    animation-name: glowheader;
722    -webkit-animation-duration: 0.7s;
723    -moz-animation-duration: 0.7s;
724    animation-duration: 0.7s;
725    -webkit-animation-timing-function: ease-out;
726    -moz-animation-timing-function: ease-out;
727    animation-timing-function: ease-out; }
728
729.design ol h4 {
730  margin-bottom:0;
731}
732.design ol {
733  counter-reset: item; }
734  .design ol>li {
735    font-size: 14px;
736    line-height: 20px;
737    list-style-type: none;
738    position: relative; }
739    .design ol>li:before {
740      content: counter(item) ". ";
741      counter-increment: item;
742      position: absolute;
743      left: -20px;
744      top: 0; }
745    .design ol li.value-1:before {
746      content: "1. "; }
747    .design ol li.value-2:before {
748      content: "2. "; }
749    .design ol li.value-3:before {
750      content: "3. "; }
751    .design ol li.value-4:before {
752      content: "4. "; }
753    .design ol li.value-5:before {
754      content: "5. "; }
755    .design ol li.value-6:before {
756      content: "6. "; }
757    .design ol li.value-7:before {
758      content: "7. "; }
759    .design ol li.value-8:before {
760      content: "8. "; }
761    .design ol li.value-9:before {
762      content: "9. "; }
763    .design ol li.value-10:before {
764      content: "10. "; }
765.design .with-callouts ol>li {
766  list-style-position: inside;
767  margin-left: 0; }
768  .design .with-callouts ol>li:before {
769    display: inline;
770    left: -20px;
771    float: left;
772    width: 17px;
773    color: #33b5e5;
774    font-weight: 500; }
775.design .with-callouts ul>li {
776  list-style-position: outside; }
777
778/* special list items */
779li.no-bullet {
780  list-style-type: none !important; }
781li.no-bullet *{
782  margin:0; }
783
784.design li.with-icon {
785  position: relative;
786  margin-left: 20px;
787  min-height: 30px; }
788  .design li.with-icon p {
789    margin-left: 0 !important; }
790  .design li.with-icon:before {
791    position: absolute;
792    left: -40px;
793    top: 0;
794    content: '';
795    width: 30px;
796    height: 30px; }
797  .design li.with-icon.tablet:before {
798    background-image: url(../images/styles/ico_phone_tablet.png); }
799  .design li.with-icon.web:before {
800    background-image: url(../images/styles/ico_web.png); }
801  .design li.with-icon.action:before {
802    background-image: url(../images/styles/ico_action.png); }
803  .design li.with-icon.use:before {
804    background-image: url(../images/styles/ico_use.png); }
805
806/* figures and callouts */
807.figure {
808  position: relative; }
809  .figure.pad-below {
810    margin-bottom: 20px; }
811  .figure .figure-callout {
812    position: absolute;
813    color: #fff;
814    font-weight: 500;
815    font-size: 16px;
816    line-height: 23px;
817    text-align: center;
818    background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
819    padding-right: 2px;
820    width: 30px;
821    height: 29px;
822    z-index: 1000; }
823    .figure .figure-callout.top {
824      top: -9px; }
825    .figure .figure-callout.right {
826      right: -5px; }
827
828.figure-caption {
829  margin: 0 10px 20px 0;
830  font-size: 14px;
831  line-height: 20px;
832  font-style: italic; }
833
834/* rows of figures */
835.figure-row {
836  font-size: 0;
837  line-height: 0;
838  /* to prevent space between figures */ }
839  .figure-row .figure {
840    display: inline-block;
841    vertical-align: top; }
842  .figure-row .figure + .figure {
843    margin-left: 10px;
844    /* reintroduce space between figures */ }
845
846/* video  containers */
847.framed-galaxynexus-land-span-13 {
848  background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat
849scroll top left;
850  padding: 42px 122px 62px 126px;
851  overflow: hidden; }
852  .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video,
853.framed-galaxynexus-land-span-13 img {
854    width: 512px;
855    height: 286px; }
856
857
858.framed-galaxynexus-land-span-8{
859  background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat
860scroll top left;
861  padding: 26px 68px 38px 72px;
862  overflow: hidden; }
863  .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video,
864.framed-galaxynexus-land-span-8 img {
865    width: 320px;
866    height: 180px; }
867
868.framed-galaxynexus-port-span-9 {
869  background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat
870scroll top left;
871  padding: 95px 122px 107px 124px;
872  overflow: hidden; }
873  .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video,
874.framed-galaxynexus-port-span-9 img {
875    width: 274px;
876    height: 488px; }
877
878.framed-galaxynexus-port-span-5 {
879  background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat
880scroll top left;
881  padding: 75px 31px 76px 33px;
882  overflow: hidden; }
883  .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video,
884.framed-galaxynexus-port-span-5 img {
885    width: 216px;
886    height: 384px; }
887
888.framed-nexus4-port-216 {
889  background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat
890scroll top left;
891  background-size:240px 465px;
892  padding: 52px 12px 52px 12px;
893  overflow: hidden; }
894  .framed-nexus4-port-216, .framed-nexus4-port-216 video,
895  .framed-nexus4-port-216 img {
896    width: 216px;
897    height: 360px; }
898
899.framed-nexus5-port-span-5 {
900  background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat
901  scroll top left;
902  padding: 52px 33px 69px 31px;
903  overflow: hidden;
904}
905
906.framed-nexus5-port-span-5,
907.framed-nexus5-port-span-5 video,
908.framed-nexus5-port-span-5 img {
909  width: 216px;
910  height: 384px;
911}
912
913.framed-nexus5-land-span-13 {
914  background: transparent url(../images/styles/device_nexus5_blank_land_span13.png) no-repeat scroll top left;
915  padding: 36px 119px 54px 108px;
916  overflow: hidden;
917}
918
919.framed-nexus5-land-span-13,
920.framed-nexus5-land-span-13 video,
921.framed-nexus5-land-span-13 img {
922  width: 533px;
923  height: 300px;
924}
925
926.framed-nexus5-port-span-5,
927.framed-nexus5-port-span-5 video,
928.framed-nexus5-port-span-5 img {
929  width: 216px;
930  height: 384px;
931}
932
933/* landing page disclosures */
934.landing-page-link {
935  text-decoration: none;
936  font-weight: 500;
937  color: #333333; }
938  .landing-page-link:after {
939    content: '';
940    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
941    width: 10px;
942    height: 10px;
943    display: inline-block;
944    margin-left: 5px; }
945
946/* tooltips */
947.tooltip-box {
948  position: absolute;
949  background-color: rgba(0, 0, 0, 0.9);
950  border-radius: 2px;
951  font-size: 14px;
952  line-height: 20px;
953  color: #fff;
954  padding: 6px 10px;
955  max-width: 250px;
956  z-index: 10000; }
957  .tooltip-box.below:after {
958    position: absolute;
959    content: '';
960    line-height: 0;
961    display: block;
962    top: -10px;
963    left: 5px;
964    border: 5px solid transparent;
965    border-bottom-color: rgba(0, 0, 0, 0.9); }
966
967/* video note */
968.video-instructions {
969  margin-top: 10px;
970  margin-bottom: 10px; }
971  .video-instructions:before {
972    content: '';
973    background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left;
974    display: inline-block;
975    width: 12px;
976    height: 12px;
977    margin-right: 8px; }
978  .video-instructions:after {
979    content: 'Click device screen to replay movie.'; }
980
981/* download buttons */
982.download-button {
983  display: block;
984  margin-bottom: 5px;
985  text-decoration: none;
986  background-color: #33b5e5;
987  color: #fff !important;
988  font-weight: 500;
989  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
990  padding: 6px 12px;
991  border-radius: 2px; }
992  .download-button:hover, .download-button:focus {
993    background-color: #0099cc;
994    color: #fff !important; }
995  .download-button:active {
996    background-color: #006699; }
997
998/* UI tables and other things found in Writing style and Settings pattern */
999.ui-table {
1000  width: 100%;
1001  background-color: #282828;
1002  color: #fff;
1003  border-radius: 2px;
1004  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
1005  border-collapse: separate; }
1006  .ui-table th,
1007  .ui-table td {
1008    padding: 5px 10px;
1009    background-color: inherit;
1010    border:0;}
1011  .ui-table thead th {
1012    font-weight: bold; }
1013  .ui-table tfoot td {
1014    border-top: 1px solid #494949;
1015    border-right: 1px solid #494949;
1016    text-align: center; }
1017    .ui-table tfoot td:last-child {
1018      border-right: 0; }
1019
1020.layout-with-list-item-margins {
1021  margin-left: 30px !important; }
1022
1023.emulate-content-left-padding {
1024  margin-left: 10px; }
1025
1026.do-dont-label {
1027  margin-bottom: 10px;
1028  padding-left: 20px;
1029  background: transparent none no-repeat scroll 0px 3px; }
1030  .do-dont-label.bad {
1031    background-image: url(../images/styles/ico_wrong.png); }
1032  .do-dont-label.good {
1033    background-image: url(../images/styles/ico_good.png); }
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053/***** PREVIOUSLY style.css ******************/
1054
1055
1056
1057
1058
1059@media screen, projection, print {
1060[dir='rtl'] {
1061    direction: rtl;
1062}
1063html {
1064    line-height: 20px;
1065}
1066pre, table, input, textarea, code {
1067    font-size: 1em;
1068}
1069address, abbr, cite {
1070    font-style: normal;
1071}
1072[dir='rtl'] th {
1073    text-align: right;
1074}
1075html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q,
1076html[lang^=zh] blockquote, html[lang^=zh] q {
1077    font-style: normal;
1078}
1079q {
1080    font-style: italic;
1081}
1082fieldset, iframe, img {
1083    border: 0;
1084}
1085img {
1086  -ms-interpolation-mode: bicubic;
1087  vertical-align: middle;
1088  max-width: 100%;
1089}
1090q {
1091    quotes: none;
1092}
1093sup, sub {
1094    font-size: 11px;
1095    line-height: 0;
1096}
1097}
1098
1099@media screen, projection {
1100
1101table, fieldset {
1102    margin: 0;
1103}
1104h1 {
1105    color:#333;
1106    font-size: 34px;
1107    margin: 36px 0 27px;
1108    padding:0 0 10px;
1109    font-weight:300;
1110}
1111h1, h2 {
1112    line-height: 30px;
1113}
1114h1.short {
1115  margin-right:320px;
1116}
1117h1.short {
1118  margin-right:320px;
1119}
1120h1.super {
1121    font-size: 37px;
1122}
1123h2 {
1124    color:#333;
1125    font-size: 26px;
1126    margin: 32px 0 20px;
1127    padding:0;
1128    font-weight:300;
1129}
1130h3 {
1131    color:#333;
1132    font-size: 21px;
1133    font-weight:400;
1134    margin:21px 0 14px 0;
1135}
1136h3, h4 {
1137    line-height: 21px;
1138}
1139h4 {
1140  font-size: 18px;
1141  margin: 12px 0;
1142  font-weight:500;
1143}
1144h5 {
1145  font-size: 14px;
1146}
1147h5, h6 {
1148  margin: 5px 0;
1149}
1150h6 {
1151  font-size: 12px;
1152}
1153hr { /* applied to the bottom of h2 elements */
1154  height: 1px;
1155  margin: 3px 0 12px;
1156  border: 0;
1157  background: #ccc;
1158}
1159p, pre, table, form {
1160    margin: 0 0 15px;
1161}
1162small {
1163  font-size: 11.5px;
1164  color: #000;
1165}
1166ul, ol {
1167    margin: 0 0 15px 18px;
1168    padding: 0;
1169}
1170[dir='rtl'] ul, [dir='rtl'] ol {
1171    margin: 10px 30px 10px 10px;
1172}
1173ul ul, ul ol, ol ul, ol ol {
1174    margin-bottom: 0;
1175    margin-top: 0;
1176}
1177li {
1178  margin:0 0 5px;
1179}
1180dd {
1181  margin:0 0 10px 30px;
1182}
1183dd p,
1184dd pre,
1185dd ul,
1186dd ol,
1187dd dl {
1188  margin-top:10px;
1189}
1190li p,
1191li pre,
1192li ul,
1193li ol,
1194li dl {
1195  margin-top:5px;
1196  margin-bottom:5px;
1197}
1198dl dd dl:first-child {
1199  margin-top:0;
1200}
1201pre strong, pre b, a strong, a b, a code {
1202    color: inherit;
1203}
1204pre, code {
1205    color: #060;
1206    font: 13px/1.5 monospace;
1207}
1208code {
1209    font-weight:bold;
1210    font: 13px/14px monospace;
1211}
1212
1213legend {
1214    display: none;
1215}
1216a:link, a:visited {
1217  color: #258aaf;
1218  text-decoration: none;
1219}
1220a:focus, a:hover, a:active {
1221  color: #33B5E5;
1222  text-decoration: none;
1223}
1224strong, b {
1225  font-weight:bold;
1226  color: #222;
1227}
1228table {
1229  border-collapse: collapse;
1230  border-spacing: 0;
1231  border:0;
1232  margin: .5em 1em 1em 0;
1233  width:100%; /* consistent table widths; within IE's quirks */
1234  background-color:#f7f7f7;
1235}
1236th, td {
1237  padding: 4px 12px;
1238  vertical-align: top;
1239  text-align: left;
1240}
1241td {
1242  background-color:inherit;
1243  border:solid 1px #DDD;
1244}
1245td *:last-child {
1246  margin-bottom:0;
1247}
1248th {
1249  background-color: #999;
1250  color: #fff;
1251  border:solid 1px #DDD;
1252  font-weight: normal;
1253}
1254tr:first-of-type th:first-of-type:empty {
1255    visibility: hidden;
1256}
1257
1258/* --------------------------------------------------------------------------
1259Footer
1260*/
1261.line {
1262    clear: both;
1263    background: #acbc00;
1264    background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1265    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00),
1266color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00));
1267    background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1268    background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1269    background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1270    background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1271    height: 2px;
1272    margin-top: 150px;
1273    position: relative;
1274    z-index: 11;
1275}
1276#footer {
1277    font-size:11px;
1278    clear: both;
1279    color: #999;
1280    padding: 15px 0;
1281    margin-top:10px;
1282    width:auto;
1283}
1284#footer-local ul {
1285  list-style: none;
1286  margin: 5px 0 30px 0;
1287}
1288#footer-local li {
1289    display: inline;
1290}
1291#footer-local li+li:before {
1292    content: '|';
1293    padding: 0 3px;
1294  color: #e5e5e5;
1295}
1296#footer-global {
1297    padding: 10px 15px;
1298  background: #f5f5f5;
1299}
1300#footer-global {
1301    border-top: 1px solid #ebebeb;
1302    font-size: 11.5px;
1303    line-height: 1.8;
1304    list-style: none;
1305}
1306#footer-global ul {
1307    margin: 0;
1308}
1309#footer-global li {
1310    display: inline;
1311    font-weight: bold;
1312}
1313#footer-global li+li:before {
1314    content: '¬?';
1315    padding: 0 3px;
1316}
1317* html #footer-global li {
1318    margin: 0 13px 0 0;
1319}
1320* [dir='rtl'] #footer-global li {
1321    margin: 0 0 0 13px;
1322}
1323*+html #footer-global li {
1324    margin: 0 13px 0 0;
1325}
1326*+[dir='rtl'] #footer-global li {
1327    margin: 0 0 0 13px;
1328}
1329#footer-global li a {
1330    font-weight: normal;
1331}
1332.locales {
1333  margin: 10px 0 0 0px;
1334}
1335[dir='rtl'] .locales {
1336    background-position: right center;
1337    float: left;
1338    padding: 0 24px 0 0;
1339}
1340.locales form {
1341    margin: 0;
1342}
1343.locales select, .sites select {
1344  line-height: 3.08;
1345  margin: 0px 0;
1346  border: solid 1px #EBEBEB;
1347  -webkit-appearance: none;
1348  background: white url('../images/arrows-up-down.png') right center no-repeat;
1349  height: 30px;
1350  color: #222;
1351  line-height: normal;
1352  padding: 5px;
1353  width: 230px;
1354}
1355}
1356
1357/* =============================================================================
1358   Print Only
1359   ========================================================================== */
1360@media print {
1361  /* configure printed page */
1362  @page {
1363      margin: 0.75in 1in;
1364      widows: 4;
1365      orphans: 4;
1366  }
1367
1368  /* reset spacing metrics */
1369  html, body, .wrap {
1370      margin: 0 !important;
1371      padding: 0 !important;
1372      width: auto !important;
1373  }
1374
1375  /* leave enough space on the left for bullets */
1376  body {
1377      padding-left: 20px !important;
1378  }
1379  #doc-col {
1380      margin-left: 0;
1381  }
1382
1383  /* hide a bunch of non-content elements */
1384  #header, #footer, #nav-x, #side-nav,
1385  .training-nav-top, .training-nav-bottom,
1386  #doc-col .content-footer,
1387  .nav-x, .nav-y,
1388  .paging-links {
1389      display: none !important;
1390  }
1391
1392  /* remove extra space above page titles */
1393  #doc-col .content-header {
1394      margin-top: 0;
1395  }
1396
1397  /* bump up spacing above subheadings */
1398  h2 {
1399      margin-top: 40px !important;
1400  }
1401
1402  /* print link URLs where possible and give links default text color */
1403  p a:after {
1404      content: " (" attr(href) ")";
1405      font-size: 80%;
1406  }
1407  p a {
1408      word-wrap: break-word;
1409  }
1410  a {
1411      color: inherit;
1412  }
1413
1414  /* syntax highlighting rules */
1415  .str { color: #060; }
1416  .kwd { color: #006; font-weight: bold; }
1417  .com { color: #600; font-style: italic; }
1418  .typ { color: #404; font-weight: bold; }
1419  .lit { color: #044; }
1420  .pun { color: #440; }
1421  .pln { color: #000; }
1422  .tag { color: #006; font-weight: bold; }
1423  .atn { color: #404; }
1424  .atv { color: #060; }
1425}
1426
1427/* =============================================================================
1428   Columns
1429   ========================================================================== */
1430
1431@media screen, projection, print {
1432.full {
1433  padding: 2.5em 0;
1434  border-top: solid 1px #ddd;
1435  border-bottom: solid 1px #ddd;
1436  background: #f7f7f7;
1437}
1438.wrap {
1439  margin: 0 auto;
1440  width: 940px;
1441  clear: both;
1442}
1443.cols {
1444    height: 1%;
1445    margin: 0 -1.533742331288343558282%;
1446    width: 103.06748466257669%}
1447*+html .cols {
1448    margin-bottom: 20px;
1449}
1450.cols:after {
1451    clear: both;
1452    content: ' ';
1453    display: block;
1454    height: 0;
1455    visibility: hidden;
1456}
1457.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
1458.col-13, .col-14, .col-15, .col-16 {
1459    display: inline;
1460  float: left;
1461  margin-left: 10px;
1462  margin-right: 10px;
1463}
1464/*
1465* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html
1466.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12  {
1467    margin: 0;
1468    padding: 0 1.4% 20px;
1469}
1470[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5,
1471[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10,
1472[dir='rtl'] .col-11, [dir='rtl'] .col-12 {
1473    float: right;
1474}
1475*/
1476.col-1 { width: 40px }
1477.col-2 { width: 100px }
1478.col-3 { width: 160px }
1479.col-4 { width: 220px }
1480.col-5 { width: 280px }
1481.col-6 { width: 340px }
1482.col-7 { width: 400px }
1483.col-8 { width: 460px }
1484.col-9 { width: 520px }
1485.col-10 { width: 580px }
1486.col-11 { width: 640px }
1487.col-12 { width: 700px }
1488.col-13 { width: 760px }
1489.col-14 { width: 820px }
1490.col-15 { width: 880px }
1491.col-16 { width: 940px }
1492}
1493
1494.col-right {
1495  margin-right:0px;
1496}
1497
1498@media screen and (max-width:772px) {
1499.col-5, .col-6, .col-7 {
1500    clear: both;
1501    width: 97.0238096%}
1502}
1503
1504/* =============================================================================
1505   Layout
1506   ========================================================================== */
1507@media screen, projection, print {
1508
1509/* --------------------------------------------------------------------------
1510Header, Login, Nav-X, Search
1511*/
1512#header {
1513  margin: 0;
1514  padding: 0;
1515}
1516#header:before, #header:after {
1517  content: "";
1518  display: table;
1519  clear: both
1520}
1521.logo, .nav-x {
1522    float: left;
1523}
1524.nav-x {
1525    margin-top: -2px;
1526  list-style-type: none;
1527}
1528.nav-x a {
1529    color: #333;
1530    font-size: 16px;
1531}
1532.about a.selected {
1533    color: #9933CC;
1534}
1535.design a.selected {
1536    color: #33b5e5;
1537}
1538.develop a.selected {
1539    color: #F80;
1540}
1541.distribute a.selected {
1542    color: #9C0;
1543}
1544
1545
1546
1547.nav-x li {
1548    display: inline;
1549    margin-right: 45px;
1550}
1551.search {
1552  float: right;
1553  position: relative;
1554  width: 220px
1555}
1556.search .bottom, .search .left, .search .right {
1557  position: absolute;
1558  background-color: #a3a3a3;
1559}
1560.search .bottom {
1561  width: 220px;
1562  height: 1px;
1563  top: 24px;
1564  left: 0
1565}
1566.search .left, .search .right {
1567  height: 5px;
1568  width: 1px
1569}
1570.search .left { top: 19px; left: 0 }
1571.search .right { top: 19px; right: 0 }
1572.search form {
1573  float: left;
1574  margin-top: 2px;
1575  width: inherit;
1576}
1577.search .close,
1578#player-frame .close {
1579  position: absolute;
1580  right: 8px;
1581  bottom: 4px;
1582  width: 16px;
1583  height: 16px;
1584  margin: 0;
1585  text-indent: -1000em;
1586  background: url(../images/close.png) no-repeat 0 0;
1587  z-index:9999;
1588}
1589.search .close:hover, .search .close:focus,
1590#player-frame .close:hover, #player-frame .close:focus {
1591  background-position: -16px 0;
1592  cursor:pointer;
1593}
1594#player-frame .close {
1595  top: 6px;
1596}
1597.search form input {
1598  color: #999;
1599  font-size: 1em;
1600  width: inherit;
1601  border: none;
1602  margin: 0;
1603  padding:0 0 0 6px;
1604  z-index: 1500;
1605  background-color: transparent
1606}
1607.search:hover .bottom, .search:hover .left, .search:hover .right {
1608  background-color: #33b5e5;
1609}
1610.search:hover .icon {
1611  background-position: -8px 0
1612}
1613.search form input:focus {
1614  color: #222;
1615  font-weight: bold;
1616  outline:0;
1617}
1618/* Search Dropdown */
1619.search-dropdown {
1620  padding: 15px;
1621  width: 192px;
1622  border: solid 1px #c5c5c5;
1623  background: #fff;
1624  position: absolute;
1625  top: 35px;
1626  left: 0;
1627  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1628  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1629  box-shadow: 0  0 10px rgba(0,0,0,0.2)
1630}
1631.search-dropdown ul, .search-dropdown ul li {
1632  list-style-type: none;
1633  margin: 0;
1634  padding: 0
1635}
1636.search-dropdown ul li {
1637  clear: both
1638}
1639.search-dropdown img {
1640  float: left;
1641  margin: 0 10px 10px 0
1642}
1643.search-dropdown h6 {
1644  color: #222;
1645  margin: 0;
1646  line-height: normal
1647}
1648.search-dropdown .desc {
1649  color: #999;
1650  font-size: 11.5px;
1651  line-height: normal;
1652  margin: 0;
1653}
1654.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc {
1655  color: #33b5e5
1656}
1657/* --------------------------------------------------------------------------
1658Buttons
1659*/
1660.button, a.button, .button-secondary, a.button-secondary {
1661  border-image: initial;
1662    -webkit-border-radius: 2px;
1663    -moz-border-radius: 2px;
1664    border-radius: 2px;
1665    cursor: pointer;
1666}
1667.button, a.button {
1668    display:inline-block;
1669    background-color: #09c;
1670    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1671    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1672    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1673    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1674    background-image: -o-linear-gradient(top, #2faddb, #09c);
1675    background-image: linear-gradient(top, #2faddb, #09c);
1676    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
1677    border: 1px solid #3990ab;
1678    color: #fff;
1679}
1680.button-secondary, a.button-secondary {
1681    background-color: #f3f3f3;
1682    border: 1px solid #dcdcdc;
1683    color: #444;
1684}
1685a.button, a.button:visited, a.button-secondary, a.button-secondary:visited {
1686    margin-right: 16px;
1687   font-weight: 400;
1688    min-width: 54px;
1689    outline: 0;
1690    padding: 8px 15px;
1691    text-align: center;
1692}
1693.button, .button-secondary {
1694    margin-right: 16px;
1695  font-weight: 400;
1696    min-width: 54px;
1697    outline: 0;
1698    padding: 0 15px;
1699    text-align: center;
1700}
1701.button:hover, a.button:hover {
1702    border-color: #09c;
1703    background-color: #4cadcb;
1704    background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb));
1705    background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb);
1706    background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb);
1707    background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb);
1708    background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb);
1709    background-image: linear-gradient(top, #5dbcd9, #4cadcb);
1710    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9',
1711EndColorStr='#4cadcb',GradientType=0);
1712    color: #fff !important;
1713}
1714.button:active, a.button:active {
1715    background-color: #1e799a;
1716    background-image: none;
1717    border-color: #30b7e6;
1718}
1719a.button.big.subtitle {
1720  line-height:18px;
1721}
1722.button-secondary:hover, a.button-secondary:hover {
1723    border-color: #dbdbdb;
1724    background-color: #f3f3f3;
1725    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1726    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1727    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1728    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1729    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1730    background-image: linear-gradient(top, #f9f9f9, #ececec);
1731    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1732EndColorStr='#ececec');
1733    color: #33B5E5 !important;
1734}
1735.button-secondary:active, a.button-secondary:active {
1736   border-color: #dadada;
1737  background: #ebebeb; /* Old browsers */
1738  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
1739  background:
1740url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
1741Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv
1742eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+
1743CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg
1744eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl
1745YiIgc3RvcC1vcGFjaXR5PSIxIi8+
1746CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1747CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+
1748CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1749CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy
1750R3JhZGllbnQ+
1751CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg
1752Lz4KPC9zdmc+);
1753  background: -moz-linear-gradient(top,  #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%,
1754#ffffff 100%); /* FF3.6+ */
1755  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb),
1756color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff));
1757/* Chrome,Safari4+ */
1758  background: -webkit-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9
175990%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
1760  background: -o-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1761100%); /* Opera 11.10+ */
1762  background: -ms-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1763100%); /* IE10+ */
1764  background: linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1765100%); /* W3C */
1766  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb',
1767endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
1768  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1769  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1770  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1771  color: #258AAF !important;
1772}
1773.button.big {
1774  font-size:20px;
1775  display:inline-block;
1776}
1777.button.big span.small {
1778  font-size:14px;
1779}
1780.button-caption {
1781  margin-top:10px;
1782  font-size:12px;
1783  font-style:italic;
1784}
1785
1786.button.disabled,
1787.button.disabled:hover,
1788.button.disabled:active {
1789  background:#ebebeb;
1790  color:#999 !important;
1791  border-color:#999;
1792  cursor:default;
1793}
1794
1795.training-nav-top a.button-secondary,
1796.training-nav-bottom a.button-secondary {
1797  display:block;
1798  float:left;
1799  margin:0;
1800  width:130px;
1801  text-transform:uppercase;
1802  font-weight:bold;
1803
1804    background-color: #f3f3f3;
1805    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1806    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1807    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1808    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1809    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1810    background-image: linear-gradient(top, #f9f9f9, #ececec);
1811    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1812EndColorStr='#ececec');
1813    color: #33B5E5;
1814}
1815
1816.training-nav-top a.button-secondary:hover,
1817.training-nav-bottom a.button-secondary:hover {
1818    background-color: #09c;
1819    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1820    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1821    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1822    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1823    background-image: -o-linear-gradient(top, #2faddb, #09c);
1824    background-image: linear-gradient(top, #2faddb, #09c);
1825    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
1826    border: 1px solid #3990ab;
1827    color: #fff !important;
1828}
1829
1830.training-nav-top a.button-secondary.last,
1831.training-nav-bottom a.button-secondary.last {
1832  border-left:0;
1833}
1834
1835.training-nav-top a.button-secondary.double-size,
1836.training-nav-bottom a.button-secondary.double-size {
1837  width:291px;
1838}
1839
1840.training-nav-top,
1841.training-nav-bottom {
1842  float:right;
1843  margin:0 0 0 20px;
1844}
1845
1846.training-nav-top {
1847  position:relative;
1848  top:73px;
1849}
1850
1851.training-nav-bottom {
1852  padding:0 0 20px;
1853}
1854
1855#tb-wrapper,
1856#qv-wrapper {
1857  float:right;
1858  clear:right;
1859  margin:6px 0 0 30px; /* negative top-margin to counter the content-header bottom margin */
1860  padding:0 0 30px;
1861}
1862
1863#tb-wrapper {
1864  margin:51px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1865}
1866
1867#tb,
1868#qv {
1869  font-size:13px;
1870  line-height:18px;
1871  width:238px;
1872  border:1px solid #ccc;
1873  float:right;
1874}
1875
1876#tb {
1877  width:278px;
1878}
1879
1880#tb h2,
1881#qv h2 {
1882  margin:10px 15px;
1883  padding:0;
1884  text-transform:uppercase;
1885  border-bottom:1px solid gainsboro;
1886}
1887
1888#tb *,
1889#qv * {
1890  font-size:inherit;
1891}
1892
1893#tb .download-box,
1894#qv .download-box {
1895  padding:0 0 0 15px;
1896}
1897
1898#tb .download-box .filename,
1899#qv .download-box .filename {
1900  font-size:11px;
1901  margin:4px 4px 10px;
1902  color:#666;
1903}
1904
1905
1906/* Dev guide quicknav */
1907
1908.sidebox-wrapper {
1909  float:right;
1910  clear:right;
1911  margin:0 0 0 20px;
1912  padding:0 0 20px;
1913}
1914
1915.sidebox {
1916  width:226px;
1917  font-size:13px;
1918  line-height:18px;
1919  border-left:4px solid #99CC00;
1920  float:right;
1921  padding:0 0 0 10px;
1922  margin:0 0 1em 20px;
1923}
1924
1925.sidebox h2,
1926.sidebox h3,
1927.sidebox h4,
1928.sidebox h5 {
1929  font-weight:bold;
1930  margin:0 0 10px;
1931  line-height: 16px;
1932}
1933
1934.sidebox * {
1935  font-size:inherit;
1936}
1937
1938.sidebox > *:last-child {
1939  margin-bottom:0;
1940}
1941
1942#tb ol,
1943#tb ul,
1944#qv ul {
1945  margin:0 15px 10px 35px;
1946}
1947
1948#tb p {
1949  margin:0 15px 10px;
1950}
1951
1952#qv ol {
1953  list-style:none;
1954  margin:0 15px 15px;
1955  font-size:inherit;
1956  line-height:inherit;
1957}
1958
1959#tb ol ol,
1960#tb ul ul,
1961#qv ol ol,
1962#qv ul ul,
1963.sidebox ol ol,
1964.sidebox ul ul {
1965  margin-bottom:0;
1966}
1967
1968#qv ol ol {
1969  margin:3px 0 3px 15px;
1970}
1971
1972.sidebox p,
1973#qv p,
1974#tb p {
1975  margin: 0 0 10px;
1976}
1977
1978/* related resources blocks in checklists */
1979
1980/* related resources sections that have dynamic content */
1981
1982
1983
1984h3.rel-resources {
1985margin:1.25em auto;
1986}
1987
1988/* --------------------------------------------------------------------------
1989Form
1990*/
1991.article form {
1992    margin: 0 0 20px;
1993}
1994.article form .form-required {
1995    color: #dd4b39;
1996}
1997.article form fieldset {
1998    margin: 0 0 20px;
1999    padding: 0;
2000}
2001.article form legend {
2002    display: block;
2003    line-height: 1.5;
2004    margin: 0;
2005    padding: 0;
2006}
2007/*
2008.article form ol, .article form ul {
2009    margin: 0 0 0 1em;
2010    padding: 0 0 0 1em;
2011}
2012[dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
2013    margin: 0 1em 0 0;
2014    padding: 0 1em 0 0;
2015}
2016.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
2017ul ul {
2018    list-style: none;
2019    margin: 0;
2020    padding: 0;
2021}
2022.article form li {
2023    margin: 0 0 20px;
2024}
2025.article form li li {
2026    margin: 0 0 5px;
2027}
2028*/
2029.article form label {
2030    display: block;
2031    margin: 0 0 5px;
2032    padding: 0;
2033}
2034.article form input[type='text'], .article form select, .article form textarea, .article form
2035.checkbox-group, .article form .radio-group {
2036    margin-bottom: 15px;
2037}
2038.checkbox-group input {
2039  width: 13px;
2040  height: 13px;
2041  background: #fff;
2042  border: solid 1px #c6c6c6;
2043  float: left;
2044}
2045.article form .checkbox-group, .article form .radio-group {
2046  display: block
2047}
2048.article form select {
2049    border: solid 1px #ebebeb;
2050    border-top-color: #ddd;
2051    -webkit-appearance: none;
2052    background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
2053    height: 30px;
2054    color: #222;
2055    line-height: normal;
2056    padding: 5px;
2057    width: 130px;
2058}
2059
2060.article form .browse .browse-msg {
2061  font-size: 11.5px;
2062}
2063.article form .browse .button-secondary {
2064  height: auto;
2065  line-height: 25px;
2066  font-size: 11px;
2067  padding: 0 8px;
2068  margin: 0 10px 15px 0;
2069}
2070.article form input[type='text'], .article form textarea {
2071    border: 1px solid #ebebeb;
2072    border-top-color: #dcdcdc;
2073    color: #222;
2074    line-height: normal;
2075    padding: 6px 10px;
2076    width: 300px;
2077}
2078.article form textarea {
2079    height: 150px;
2080}
2081.article form input[type='text']:focus, .article form textarea:focus {
2082    border-color: #33B5E5;
2083    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2084    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2085    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2086    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2087    outline: 0;
2088}
2089.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
2090    color: #999;
2091}
2092.article form input[type='text'][disabled], .article form textarea[disabled] {
2093    background-color: #ebebeb;
2094}
2095form .form-error input[type='text'], form .form-error textarea {
2096    border-color: #dd4b39;
2097  margin-right: 20px;
2098}
2099.aside {
2100    -moz-border-radius: 2px;
2101    -webkit-border-radius: 2px;
2102    border-radius: 2px;
2103    margin: 10px 0;
2104    padding: 20px;
2105  color: #666;
2106    position: relative;
2107  background: #f9f9f9;
2108}
2109/*
2110.aside, .notification, .promo {
2111    -moz-border-radius: 2px;
2112    -webkit-border-radius: 2px;
2113    border-radius: 2px;
2114    margin: 10px 0;
2115    padding: 10px;
2116    position: relative;
2117}
2118.aside>:first-child, .notification>:first-child, .promo>:first-child {
2119    margin-top: 0;
2120}
2121.aside>:last-child, .notification>:last-child, .promo>:last-child {
2122    margin-bottom: 0;
2123}
2124.aside {
2125    background: #f9f9f9;
2126}
2127.notification {
2128    background: #fffbe4;
2129    border-color: #f8f6e6;
2130}
2131.promo {
2132    background: #f6f9ff;
2133    border-color: #eff2f9;
2134}
2135*/
2136
2137/* SDK TOS styles */
2138
2139div.sdk-terms {
2140  white-space: pre-wrap;
2141  word-wrap: break-word;
2142  font-family: inherit;
2143  font-size: inherit;
2144  padding: 10px;
2145  height: 370px;
2146  width: 738px;
2147  border: 1px solid #444;
2148  background: transparent;
2149  overflow:auto;
2150  margin:0 0 10px;
2151}
2152
2153div.sdk-terms.fullsize {
2154  padding: 0;
2155  height: auto;
2156  width: auto;
2157  border:none;
2158}
2159
2160div.sdk-terms h3,
2161div.sdk-terms h2 {
2162  margin:0;
2163}
2164
2165div#sdk-terms-form {
2166  padding:0 0 0 10px;
2167}
2168
2169div#sdk-terms-form input {
2170  display:inline;
2171  margin:4px 4px 4px 0;
2172}
2173
2174
2175/* --------------------------------------------------------------------------
2176Code Style
2177*/
2178pre {
2179  margin:0 0 1em 0;
2180  padding: 1em;
2181  overflow: auto;
2182  border: solid 1px #ddd;
2183  background: #f7f7f7;
2184}
2185.str { color: #800; } /* Code string */
2186.kwd { color: #008; }
2187.typ { color: #606; }
2188.lit { color: #066; }
2189.pun { color: #660; }
2190.pln { color: #000; }
2191.tag { color: #008; }
2192.atn { color: #828; }
2193.atv { color: #800; } /* XML string */
2194.dec { color: #606; }
2195
2196/* --------------------------------------------------------------------------
2197Three-Pane
2198*/
2199/* Package Nav & Classes Nav */
2200.three-pane {
2201  position: relative;
2202  border-top: solid 1px #ebebeb;
2203}
2204#packages-nav .js-pane,
2205#classes-nav .js-pane {
2206  overflow:visible;
2207}
2208#packages-nav {
2209        height:270px;
2210  max-height: inherit;
2211  overflow: hidden;
2212  position: relative;
2213}
2214#classes-nav {
2215  overflow: hidden;
2216  position: relative;
2217}
2218#packages-nav ul, #classes-nav ul {
2219  list-style-type: none;
2220  margin: 10px 0 20px 0;
2221  padding: 0;
2222}
2223#classes-nav li {
2224  font-weight: bold;
2225  margin: 5px 0;
2226}
2227#packages-nav li,
2228#classes-nav li li {
2229  margin: 0;
2230}
2231#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2232#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
2233  padding: 0 0 0 4px;
2234}
2235#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2236#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited,
2237#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited {
2238  color: #222;
2239  font-weight: normal;
2240}
2241#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2242#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
2243  display: block;
2244}
2245#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
2246a:visited,
2247#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
2248a:visited,
2249#nav-tree li div.selected {
2250    font-weight: 500;
2251    color: #0099cc;
2252    background-color:#fff; }
2253  #packages-nav li.selected ul li a,
2254  #classes-nav li.selected ul li a {
2255  /* don't highlight child items */
2256    color: #555555; }
2257#nav-tree li div.selected a {
2258    font-weight: 500;
2259    color: #0099cc;
2260}
2261#nav-swap {
2262  height:30px;
2263  border-top:1px solid #ccc;
2264}
2265#nav-swap a {
2266  display:inline-block;
2267  height:100%;
2268  color: #222;
2269  font-size: 12px;
2270  padding: 5px 0 5px 5px;
2271}
2272
2273#nav-swap .fullscreen {
2274  float: right;
2275  width: 24px;
2276  height: 24px;
2277  text-indent: -1000em;
2278  padding:0;
2279  margin:3px 5px 0;
2280  background: url(../images/fullscreen.png) no-repeat -24px 0;
2281}
2282#nav-swap .fullscreen.disabled {
2283  background-position: 0 0;
2284}
2285#nav-swap .fullscreen:hover,
2286#nav-swap .fullscreen:focus {
2287  cursor:pointer;
2288}
2289
2290
2291/* nav tree */
2292#side-nav, #swapper,
2293#nav-tree, #tree-list {
2294  overflow:hidden;
2295  margin-left:0;
2296}
2297
2298#devdoc-nav {
2299  overflow:visible !important; /* To keep the "to top" button visible */
2300}
2301
2302#nav-tree ul {
2303  list-style:none;
2304  padding:0;
2305  margin:10px 0;
2306}
2307
2308#nav-tree ul li div {
2309  padding:0 0 0 4px;
2310}
2311
2312#side-nav #nav-tree ul li a,
2313#side-nav #nav-tree ul li span.no-children {
2314  padding: 0;
2315  margin: 0;
2316}
2317
2318#nav-tree .plus {
2319  margin: 0 3px 0 0;
2320}
2321
2322#nav-tree ul ul {
2323  list-style: none;
2324  margin: 0;
2325  padding: 0 0 0 0;
2326}
2327
2328#nav-tree ul li {
2329  margin: 0;
2330  padding: 0 0 0 0;
2331  white-space: nowrap;
2332}
2333
2334#nav-tree .children_ul {
2335  padding:0;
2336  margin:0;
2337}
2338#nav-tree .children_ul li div {
2339  padding:0 0 0 10px;
2340}
2341#nav-tree .children_ul .children_ul li div {
2342  padding:0 0 0 20px;
2343}
2344
2345#nav-tree a.nolink {
2346  color: #222;
2347  text-decoration: none;
2348}
2349
2350#nav-tree span.label {
2351  width: 100%;
2352}
2353
2354#nav-tree {
2355  overflow-x: auto;
2356  overflow-y: scroll;
2357  outline:0;
2358}
2359
2360
2361/* Content */
2362#doc-col {
2363  margin-right:0;
2364}
2365
2366/* Uncomment this for preview release watermark
2367#doc-col {
2368  background: url('../images/preview.png') repeat;
2369}
2370*/
2371
2372#doc-content-container {
2373  margin-left: 291px
2374}
2375#doc-header, #doc-content {
2376  padding: 1em 2em;
2377}
2378#doc-header {
2379  background: #f7f7f7;
2380}
2381#doc-header h1 {
2382  line-height: 0;
2383  margin-bottom: 15px;
2384}
2385#api-info-block {
2386  float: right;
2387  font-weight: bold;
2388}
2389#api-info-block a, #api-info-block a:active, #api-info-block a:visited {
2390  color: #222;
2391}
2392#api-info-block a:hover, #api-info-block a:focus {
2393  color: #33B5E5;
2394}
2395#api-nav-header {
2396  height:19px; /* plus 16px padding = 35; same as #nav li */
2397  font-size:14px;
2398  padding: 8px 0;
2399  margin: 0;
2400  border-bottom: 1px solid #CCC;
2401  background:#e9e9e9;
2402  background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
2403
2404}
2405#api-nav-title {
2406  padding:0 5px;
2407  white-space:nowrap;
2408}
2409
2410#api-level-toggle {
2411  float:right;
2412  padding:0 5px;
2413}
2414
2415#api-level-toggle label {
2416  margin:0;
2417  vertical-align:top;
2418  line-height: 19px;
2419  font-size:13px;
2420  height: 19px;
2421}
2422
2423#api-level-toggle .select-wrapper {
2424  width: 35px;
2425  display: inline-block;
2426  overflow: hidden;
2427}
2428#api-level-toggle select {
2429  border: 0;
2430  appearance:none;
2431  -moz-appearance:none;
2432  -webkit-appearance: none;
2433  background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
2434  color: #222;
2435  height: 19px;
2436  line-height: 19px;
2437  padding: 0;
2438  margin:1px 0 0 0;
2439  width:150%;
2440  font-size:13px;
2441  vertical-align:top;
2442  outline:0;
2443}
2444
2445
2446/* Toggle for revision notes and stuff */
2447div.toggle-content.closed .toggle-content-toggleme {
2448  display:none;
2449}
2450
2451#jd-content img.toggle-content-img {
2452  margin:0 5px 5px 0;
2453}
2454
2455div.toggle-content-toggleme {
2456  padding:0 0 0 15px;
2457}
2458
2459
2460/* API LEVEL FILTERED MEMBERS */
2461
2462.absent,
2463.absent a:link,
2464.absent a:visited,
2465.absent a:hover,
2466.absent * {
2467  color:#bbb !important;
2468  cursor:default !important;
2469  text-decoration:none !important;
2470}
2471#devdoc-nav li.absent.selected,
2472#devdoc-nav li.absent.selected *,
2473#devdoc-nav div.label.absent.selected,
2474#devdoc-nav div.label.absent.selected * {
2475  background-color:#eaeaea !important;
2476}
2477.absent h4.jd-details-title,
2478.absent h4.jd-details-title * {
2479  background-color:#f6f6f6 !important;
2480}
2481.absent img {
2482  opacity: .3;
2483  filter: alpha(opacity=30);
2484  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
2485}
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495/* JQUERY RESIZABLE STYLES */
2496.ui-resizable { position: relative; }
2497.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
2498.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
2499/*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
2500body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
2501.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
2502border-bottom: solid 1px #ededed;
2503  background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
2504/*
2505.ui-resizable-e {
2506cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
25071px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
2508*/
2509
2510/* --------------------------------------------------------------------------
2511Lightbox
2512*/
2513.lightbox {
2514  width: 769px;
2515  padding: 1.5em;
2516  margin: 0 auto;
2517  border: solid 1px #dcdcdc;
2518  background: #fff;
2519  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2520  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2521  box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
2522}
2523.lightbox .header {
2524  float: left;
2525  width: 720px;
2526  margin: -10px 20px 10px 0;
2527}
2528.lightbox .close {
2529  float: right;
2530  width: 10px;
2531  height: 10px;
2532  margin: -10px -10px 10px 0;
2533  text-indent: -1000em;
2534  background: url(../images/close.png) no-repeat 0 0;
2535}
2536.lightbox .close:hover, .lightbox .close:focus {
2537  background-position: -10px 0;
2538}
2539
2540/* --------------------------------------------------------------------------
2541Styles for samples browser
2542*/
2543
2544#codesample-wrapper {
2545  width:100000px; /* super wide to contain floats, but doesn't cause scroll */
2546  overflow:visible;
2547}
2548pre#codesample-block {
2549  float:left;
2550  overflow:visible;
2551  background:transparent;
2552  border:none;
2553}
2554pre#codesample-block a.number {
2555  display:none;
2556}
2557pre#codesample-block .code-line:hover {
2558  background:#e7e7e7;
2559}
2560pre#codesample-line-numbers {
2561  float:left;
2562  width:2em;
2563  background:transparent;
2564  border:none;
2565  border-right:1px solid #ccc;
2566  padding-left:0;
2567  font-family:monospace;
2568  text-align:right;
2569  -webkit-touch-callout: none;
2570  -webkit-user-select: none;
2571  -khtml-user-select: none;
2572  -moz-user-select: -moz-none;
2573  -ms-user-select: none;
2574  user-select: none;
2575}
2576pre#codesample-line-numbers a {
2577  color:#999;
2578}
2579pre#codesample-line-numbers.hidden {
2580  display:none;
2581}
2582pre#codesample-block span.code-line {
2583  width:100%;
2584  display:inline-block;
2585}
2586
2587/*
2588Styles for displaying image or video resources in samples browser.
2589Resources are marked as no-display if they exceed the size limit.
2590*/
2591div#codesample-resource img, div#codesample-resource video {
2592  border: 1px solid #ececec;
2593}
2594
2595div#codesample-resource.noDisplay div {
2596  border: 1px solid #ececec;
2597  width:120px;
2598  margin-bottom:4px;
2599  padding:20px;
2600}
2601
2602div#codesample-resource .noDisplay-message:after {
2603  font-style:italic;
2604  font-size:12px;
2605  content: 'This resource is not available for browsing. To view it, please download the project.';
2606}
2607
2608/*
2609Styles for project structure (treeview) page
2610*/
2611.structure-dir {
2612background-image:url(../../assets/images/folder.png);
2613background-repeat:no-repeat;
2614background-position:16px 2px;
2615  margin:.25em 0 0 0;
2616  padding:0 0 0 0;
2617}
2618
2619.structure-toggleme {
2620  margin:0 0 0 3em;
2621  padding:0 0 0 0;
2622  text-decoration:none;
2623}
2624
2625.structure-java{
2626background-image:url(../../assets/images/file-java.png);
2627background-repeat:no-repeat;
2628background-position:0px 2px;
2629  margin:.3em 0 0 0;
2630  padding:.3em 0 .3em 22px;
2631}
2632
2633.structure-file {
2634background-image:url(../../assets/images/file-generic.png);
2635background-repeat:no-repeat;
2636background-position:0px 2px;
2637  margin:.3em 0 0 0;
2638  padding:.3em 0 .3em 22px;
2639}
2640
2641.structure-xml {
2642background-image:url(../../assets/images/file-xml.png);
2643background-repeat:no-repeat;
2644background-position:0px 2px;
2645  margin:.3em 0 0 0;
2646  padding:.3em 0 .25em 22px;
2647}
2648
2649.structure-img {
2650background-image:url(../../assets/images/file-image.png);
2651background-repeat:no-repeat;
2652background-position:0px 2px;
2653  margin:.3em 0 0 0;
2654  padding:.3em 0 .25em 22px;
2655}
2656
2657.structure-manifest {
2658background-image:url(../../assets/images/file-manifest.png);
2659background-repeat:no-repeat;
2660  margin:.0 0 0 1.25em;
2661  padding:0 0 0 22px;
2662  text-decoration:none;
2663}
2664
2665#jd-content .structure-toggle-img {
2666  margin:.5em 0 0 0;
2667padding-right:2.1em;
2668}
2669
2670.dirInfo {
2671  margin-left:2em;
2672}
2673
2674.structure-dir a {
2675  text-decoration:none;
2676}
2677
2678.structure-manifest a {
2679  text-decoration: none;
2680}
2681.structure-file a {
2682  text-decoration: none;
2683}
2684
2685.sampleEmbed {
2686  background-color:rgb(249, 249, 249);
2687}
2688
2689.sampleEmbed ol.lineNumbers {
2690  list-style-type: decimal;
2691  padding-left:1em;
2692}
2693
2694.sampleEmbed ol.lineNumbers li {
2695border-left:1px solid #ddd;
2696border-right:1px solid #ddd;
2697color:gray;
2698background-color:#f7f7f7;
2699margin:0 0 0 24px;
2700padding: 2px 2px 2px 6px;
2701}
2702
2703.sampleEmbed ol.lineNumbers li:hover {
2704background: #efefef;
2705}
2706
2707.samples-nav li a {
2708  overflow: hidden;
2709  text-overflow: ellipsis;
2710  white-space: nowrap;
2711}
2712
2713/* --------------------------------------------------------------------------
2714Styles for raw formatted line numbers (not used with listformatted version)
2715div.sampleLine div.lineNumber {
2716  display: inline;
2717}
2718div.sampleLine div.lineCode {
2719  display: inline;
2720  padding-left:6px;
2721}
2722div.sampleLine {
2723  padding:0;
2724  margin:0;
2725}*/
2726
2727/* --------------------------------------------------------------------------
2728Butterbar
2729*/
2730#butterbar-wrapper {
2731  position:absolute;
2732  top:0;
2733  left:0;
2734  width:100%;
2735}
2736#butterbar {
2737  width:940px;
2738  margin:0 auto;
2739}
2740#butterbar-message {
2741  background-color:#f80;
2742  float:right;
2743  font-size:12px;
2744  font-weight:bold;
2745  padding:0 10px;
2746  border-radius: 0 0 5px 5px;
2747}
2748#butterbar-message a {color:#fff !important}
2749#butterbar-message a:hover {text-decoration:underline;}
2750
2751/* --------------------------------------------------------------------------
2752Misc
2753*/
2754
2755
2756.clearfix:before, .clearfix:after {
2757  content: "";
2758  display: table
2759}
2760.clearfix:after {
2761  clear: both
2762}
2763.clearfix {
2764  *zoom: 1
2765}
2766table.blank th, table.blank td {
2767    border: 0;
2768  background: none
2769}
2770.caption {
2771  margin: 0.5em 0 2em 0;
2772  color: #000;
2773  font-size: 11.5px;
2774}
2775
2776.nolist, .nolist ul, .nolist ol {
2777  list-style:none;
2778  margin-left:0;
2779}
2780#tb .nolist {
2781  margin-left:15px;
2782}
2783
2784dl.xml>dt {
2785  text-transform:uppercase;
2786}
2787dl.xml dl.attr {
2788  margin-top:0;
2789}
2790
2791pre.classic {
2792  background-color:transparent;
2793  border:none;
2794  padding:0;
2795}
2796
2797p.img-caption {
2798  margin: -10px 0 20px;
2799  font-size:13px;
2800  color:#666;
2801}
2802
2803div.figure,
2804div.figure-right {
2805  float:right;
2806  clear:right;
2807  margin:10px 0 0 0;
2808  padding:0 0 0 20px;
2809  /* width must be defined w/ an inline style matching the image width */
2810}
2811
2812div.figure-left {
2813  float:left;
2814  clear:left;
2815  margin:10px 0 0 0;
2816  padding:0 20px 0 0;
2817  /* width must be defined w/ an inline style matching the image width */
2818}
2819
2820img.frame {
2821  border:1px solid #DDD;
2822  padding:4px;
2823}
2824
2825p.table-caption {
2826  margin: 0 0 4px 0;
2827  font-size:13px;
2828  color:#666;
2829}
2830
2831p.code-caption {
2832  margin-bottom: 4px;
2833  font: 12px/1.5 monospace;
2834  color:#666;
2835}
2836
2837div.note,
2838div.caution,
2839div.warning {
2840  margin: 0 0 15px;
2841}
2842
2843p.note, div.note,
2844p.caution, div.caution,
2845p.warning, div.warning {
2846  padding: 0 0 0 10px;
2847  border-left: 4px solid;
2848}
2849
2850p.note, div.note {
2851  border-color: #258AAF;
2852}
2853
2854p.caution, div.caution {
2855  border-color: #FF8800;
2856}
2857
2858p.warning, div.warning {
2859  border-color: #ff4443;
2860}
2861
2862div.note.design {
2863  border-left: 4px solid #33B5E5;
2864}
2865
2866div.note.develop {
2867  border-left: 4px solid #F80;
2868}
2869
2870div.note.distribute {
2871  border-left: 4px solid #9C0;
2872}
2873
2874.note p, .caution p, .warning p {
2875  margin:0 0 5px;
2876}
2877
2878.note p:last-child, .caution p:last-child, .warning p:last-child {
2879  margin-bottom:0;
2880}
2881
2882body.about blockquote {
2883  display:block;
2884  float:right;
2885  width:280px;
2886  font-size:20px;
2887  font-style:italic;
2888  line-height:24px;
2889  color:#33B5E5;
2890  margin:0 0 20px 30px;
2891}
2892
2893div.design-announce p {
2894  margin:0 0 10px;
2895}
2896
2897.expandable {
2898  height:34px;
2899  padding-left:20px;
2900  position:relative;
2901}
2902.expandable:before {
2903  content: '';
2904  background-image: url(../images/styles/disclosure_down.png);
2905  background-repeat:no-repeat;
2906  background-position: -12px -9px;
2907  width: 20px;
2908  height: 20px;
2909  display: inline-block;
2910  position: absolute;
2911  top: 0;
2912  left: 0; }
2913}
2914.expandable.expanded:before {
2915  background-image: url(../images/styles/disclosure_up.png);
2916}
2917
2918/* notice box for cross links between Design/Develop docs */
2919a.notice-developers-video,
2920a.notice-developers,
2921a.notice-designers-video,
2922a.notice-designers {
2923  float:right;
2924  clear:right;
2925  width:238px;
2926  min-height:50px;
2927  margin:0 0 20px 20px;
2928  border:1px solid #ddd;
2929}
2930a.notice-developers-video.wide,
2931a.notice-developers.wide,
2932a.notice-designers-video.wide,
2933a.notice-designers.wide {
2934  width:278px;
2935}
2936a.notice-developers-video div,
2937a.notice-developers div,
2938a.notice-designers-video div,
2939a.notice-designers div {
2940  min-height:40px;
2941  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2942  background-size:40px 40px;
2943  padding:10px 10px 10px 60px;
2944}
2945a.notice-designers div {
2946  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2947  background-size:40px 40px;
2948}
2949a.notice-designers-video div {
2950  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2951  background-size:40px 40px;
2952}
2953a.notice-developers-video div {
2954  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2955  background-size:40px 40px;
2956}
2957a.notice-developers-video:hover,
2958a.notice-developers:hover,
2959a.notice-designers-video:hover,
2960a.notice-designers:hover {
2961  background:#eee;
2962}
2963a.notice-developers-video h3,
2964a.notice-developers h3,
2965a.notice-designers-video h3,
2966a.notice-designers h3 {
2967  font-size:13px;
2968  line-height:18px;
2969  font-weight:bold;
2970  text-transform:uppercase;
2971  color:#000 !important;
2972  margin:0 0 1px;
2973}
2974a.notice-developers-video p,
2975a.notice-developers p,
2976a.notice-designers-video p,
2977a.notice-designers p {
2978  margin:0;
2979  line-height:14px;
2980}
2981a.notice-developers-video.left,
2982a.notice-developers.left,
2983a.notice-designers-video.left,
2984a.notice-designers.left {
2985  margin-left:0;
2986  float:left;
2987}
2988
2989
2990/* hide nested list items; companion to hideNestedLists() */
2991.hide-nested li ol,
2992.hide-nested li ul {
2993  display:none;
2994}
2995
2996a.header-toggle {
2997  display:block;
2998  float:right;
2999  text-transform:uppercase;
3000  font-size:.8em !important;
3001  font-weight:normal;
3002  margin-top:2px;
3003}
3004
3005
3006/* for IDE instruction toggle (Studio/Eclipse/Other) */
3007select.ide {
3008  background: transparent;
3009  border: 1px solid #bbb;
3010  border-left: 0;
3011  border-right: 0;
3012  margin: 10px 0;
3013  padding: 10px 0;
3014  color:#666;
3015}
3016select.ide,
3017select.ide option {
3018  font-family: inherit;
3019  font-size:16px;
3020  font-weight:500;
3021}
3022/* hide all except eclipse by default */
3023.select-ide.studio,
3024.select-ide.other {
3025  display:none;
3026}
3027/* ... unless eclipse also includes one of the others */
3028.select-ide.eclipse.studio,
3029.select-ide.eclipse.other {
3030  display:block;
3031}
3032
3033
3034/* -----------------------------------------------
3035good/bad example containers
3036*/
3037
3038div.example-block {
3039  background-repeat: no-repeat;
3040  background-position:10px 8px;
3041  background-color:#ccc;
3042  padding:4px;
3043  margin:.8em auto 1.5em 2em;
3044  width:260px;
3045  float:right;
3046}
3047/* red container */
3048.example-block.bad {
3049  background-image: url(/images/example-bad.png);
3050  background-color:#f4cccc;
3051}
3052/* green container */
3053.example-block.good {
3054  background-image: url(/images/example-good.png);
3055  background-color:#d9ead3;
3056}
3057/* container heading div */
3058#jd-content .example-block .heading {
3059  font-weight:bold;
3060  margin:6px 0 9px 36px;
3061  padding:6px auto;
3062}
3063/* container image (if any) */
3064#jd-content .example-block img {
3065  margin:0;
3066  padding:0px;
3067}
3068
3069.example-block table {
3070  margin:0;
3071}
3072
3073/* -----------------------------------------------
3074Dialog box for popup messages
3075*/
3076
3077div.dialog {
3078  height:0;
3079  margin:0 auto;
3080}
3081
3082div.dialog>div {
3083  z-index:99;
3084  position:fixed;
3085  margin:70px 0;
3086  width: 391px;
3087  height: 200px;
3088  background: #F7F7F7;
3089-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3090-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3091box-shadow: 0 0 15px rgba(0,0,0,0.5);
3092}
3093/* IE6 can't position fixed */
3094* html div.dialog div { position:absolute; }
3095
3096
3097div#deprecatedSticker {
3098  display:none;
3099  z-index:99;
3100  position:fixed;
3101  right:15px;
3102  top:114px;
3103  margin:0;
3104  padding:1em;
3105  background:#FFF;
3106  border:1px solid #dddd00;
3107  box-shadow:-5px 5px 10px #ccc;
3108  -moz-box-shadow:-5px 5px 10px #ccc;
3109  -webkit-box-shadow:-5px 5px 10px #ccc;
3110}
3111
3112div#naMessage {
3113  display:none;
3114  width:555px;
3115  height:0;
3116  margin:0 auto;
3117}
3118
3119div#naMessage div {
3120  z-index:99;
3121  width:450px;
3122  position:fixed;
3123  margin:50px 0;
3124  padding:4em 4em 3em;
3125  background:#FFF;
3126  border:1px solid #999;
3127  box-shadow:-10px 10px 40px #888;
3128  -moz-box-shadow:-10px 10px 40px #888;
3129  -webkit-box-shadow:-10px 10px 40px #888;
3130}
3131/* IE6 can't position fixed */
3132* html div#naMessage div { position:absolute; }
3133
3134div#naMessage strong {
3135  font-size:1.1em;
3136}
3137
3138
3139/* --------------------------------------------------------------------------
3140Slideshow Controls & Next/Prev
3141*/
3142.slideshow-next, .slideshow-prev {
3143  width: 20px;
3144  height: 36px;
3145  text-indent: -1000em;
3146}
3147.slideshow-container {
3148  margin: 2em 0;
3149}
3150.slideshow-container:before, .slideshow-container:after {
3151  content: "";
3152  display: table;
3153  clear: both;
3154}
3155a.slideshow-next, a.slideshow-next:visited {
3156
3157  float: right;
3158
3159  background: url(../images/arrow-right.png) no-repeat 0 0
3160
3161}
3162
3163a.slideshow-prev, a.slideshow-prev:visited {
3164
3165  float: left;
3166
3167  background: url(../images/arrow-left.png) no-repeat 0 0
3168
3169}
3170
3171.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3172
3173  background-position: 0 -36px
3174
3175}
3176
3177.slideshow-next:active, .slideshow-prev:active {
3178
3179  background-position: 0 -72px
3180
3181}
3182.slideshow-nav {
3183  width: 74px;
3184  margin: 0 auto;
3185}
3186.slideshow-nav a, .slideshow-nav a:visited {
3187  display: inline-block;
3188  width: 12px;
3189  height: 12px;
3190  margin: 0 2px 20px 2px;
3191  background: #ccc;
3192  -webkit-border-radius: 50%;
3193  -moz-border-radius: 50%;
3194  border-radius: 50%;
3195}
3196.slideshow-nav a:hover, .slideshow-nav a:focus {
3197
3198  background: #33B5E5
3199}
3200
3201.slideshow-nav a:active {
3202
3203  background: #1e799a;
3204  background: #ebebeb;
3205  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3206  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3207  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3208}
3209.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3210  background: #33B5E5
3211}
3212/* --------------------------------------------------------------------------
3213Tabs
3214*/
3215ul.tabs {
3216  padding: 0;
3217  margin: 2em 0 0 0;
3218}
3219ul.tabs:before, ul.tabs:after {
3220  content: "";
3221  display: table;
3222  clear: both;
3223}
3224ul.tabs li {
3225  list-style-type: none;
3226  float: left;
3227}
3228ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3229  display: block;
3230  height: 36px;
3231  line-height: 36px;
3232  padding: 0 15px;
3233  margin-right: 2px;
3234  color: #222;
3235  -moz-border-radius-topleft: 2px;
3236  -moz-border-radius-topright: 2px;
3237  -moz-border-radius-bottomright: px;
3238  -moz-border-radius-bottomleft: px;
3239  -webkit-border-radius: 2px 2px px px;
3240  border-radius: 2px 2px px px;
3241  border-top: solid 1px #ebebeb;
3242  border-left: solid 1px #ebebeb;
3243  border-right: solid 1px #ebebeb;
3244  background-color: #fff;
3245    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3246    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3247    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3248    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3249    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3250    background-image: linear-gradient(top, #ffffff, #fafafa);
3251    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3252EndColorStr='#fafafa');
3253}
3254ul.tabs li a:hover {
3255  color: #33B5E5;
3256}
3257ul.tabs li a.selected {
3258  height: 37px;
3259  color: #33B5E5;
3260  background-color: #f7f7f7;
3261  background-image: none;
3262  border-color: #ddd;
3263}
3264.tab-content {
3265  padding: 1.2em;
3266  margin: -1px 0 2em 0;
3267  -webkit-border-radius: 2px;
3268    -moz-border-radius: 2px;
3269    border-radius: 2px;
3270  border: solid 1px #ddd;
3271  background: #f7f7f7;
3272}
3273/* --------------------------------------------------------------------------
3274Feature Boxes
3275*/
3276.feature-box {
3277  width: 291px;
3278  height: 200px;
3279  position: relative;
3280  background: #F7F7F7;
3281}
3282.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3283  z-index: 100;
3284  position: absolute;
3285  background-color: #aaa;
3286}
3287.box-border .top, .box-border .bottom {
3288  width: 291px;
3289  height: 1px;
3290}
3291.dialog .box-border .top,
3292.dialog .box-border .bottom { width:391px; }
3293
3294.box-border .left, .box-border .right {
3295  width: 1px;
3296  height: 8px;
3297}
3298.box-border .top { top: 0; left: 0 }
3299.box-border .top .left { top: 1px; left: 0 }
3300.box-border .top .right { top: 1px; right: 0 }
3301.box-border .bottom .left { top: -8px; left: 0 }
3302.box-border .bottom { top: 200px; left: 0 }
3303.box-border .bottom .right { top: -8px; right: 0 }
3304
3305.feature-box h4,
3306.dialog h4 {
3307    margin: 15px 18px 10px;
3308    padding:0;
3309}
3310
3311.feature-box p,
3312.dialog p {
3313    margin: 10px 18px;
3314    padding:0;
3315}
3316.feature-box .link,
3317.dialog .link {
3318    border-top: 1px solid #dedede;
3319    bottom: 0;
3320    position: absolute;
3321    width: inherit;
3322}
3323.feature-box a, .feature-box h4,
3324.dialog a, .dialog h4 {
3325    -webkit-transition: color .4s ease;
3326    -moz-transition: color .4s ease;
3327    -o-transition: color .4s ease;
3328    transition: color .4s ease;
3329}
3330.feature-box:hover {
3331  cursor: pointer;
3332}
3333.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3334.left, .feature-box:hover .right {
3335  background-color: #33B5E5;
3336}
3337.feature-box:hover h4, .feature-box:hover a {
3338  color: #33B5E5;
3339}
3340/* --------------------------------------------------------------------------
3341Page-Specific Styles
3342*/
3343.colors {
3344  position: relative;
3345  float: left;
3346  width: 92px;
3347  margin: 40px 0 20px;
3348}
3349.colors div {
3350  color: #fff;
3351  font-size: 11.5px;
3352  width: 82px;
3353  height: 82px;
3354  margin-top:-30px;
3355  line-height: 82px;
3356  text-align: center;
3357  border: solid 5px #fff;
3358  -webkit-border-radius: 50%;
3359  -moz-border-radius: 50%;
3360  border-radius: 50%;
3361}
3362
3363
3364
3365
3366
3367
3368
3369
3370
3371
3372
3373
3374
3375
3376/* ########### REFERENCE DOCS ################## */
3377
3378#packages-nav h2,
3379#classes-nav h2 {
3380  font-size:18px;
3381  margin:0;
3382  padding:0 0 0 4px;
3383}
3384
3385#jd-header {
3386  padding: 0 0 12px;
3387  margin: 20px 0 12px;
3388  font-size:12px;
3389  padding-bottom:12px;
3390  border-bottom:solid 1px #ccc;
3391}
3392
3393#jd-header h1 {
3394  margin:0;
3395  padding:0 0 6px 0;
3396}
3397
3398/* not sure if this is needed in the ref docs, disabling for now
3399.jd-descr h2 {
3400  margin:16px 0;
3401}
3402*/
3403
3404/* page-top-right container for reference pages (holds
3405links to summary tables) */
3406#api-info-block {
3407  font-size:12px;
3408  margin:20px 0 0;
3409  padding:0 10px 6px;
3410  font-weight:normal;
3411  float:right;
3412  text-align:right;
3413  color:#999;
3414  max-width:80%;
3415  font-size: 12px;
3416  line-height:14px;
3417}
3418
3419#api-info-block div.api-level {
3420  font-weight:bold;
3421  font-size:inherit;
3422  float:none;
3423  color:#222;
3424  padding:0;
3425  margin:0;
3426}
3427
3428/* inheritance table */
3429.jd-inheritance-table {
3430  border-spacing:0;
3431  margin:0;
3432  padding:0;
3433  font-size:12px;
3434  line-height:14px;
3435  background-color:transparent;
3436}
3437.jd-inheritance-table tr td {
3438  border: none;
3439  margin: 0;
3440  padding: 0;
3441  background-color:transparent;
3442}
3443.jd-inheritance-table .jd-inheritance-space {
3444  font-weight:bold;
3445  width:1em;
3446}
3447.jd-inheritance-table .jd-inheritance-interface-cell {
3448  padding-left: 17px;
3449}
3450
3451
3452
3453.jd-sumtable a {
3454  text-decoration:none;
3455}
3456
3457.jd-sumtable a:hover {
3458  text-decoration:underline;
3459}
3460
3461/* the link inside a sumtable for "Show All/Hide All" */
3462.toggle-all {
3463  display:block;
3464  float:right;
3465  font-weight:normal;
3466  font-size:0.9em;
3467}
3468
3469/* adjustments for in/direct subclasses tables */
3470.jd-sumtable.jd-sumtable-subclasses {
3471  margin: 1em 0 0 0;
3472  max-width:968px;
3473  background-color:transparent;
3474  font-size:13px;
3475}
3476
3477/* extra space between end of method name and open-paren */
3478.sympad {
3479  margin-right: 2px;
3480}
3481
3482/* right alignment for the return type in sumtable */
3483.jd-sumtable .jd-typecol {
3484  text-align:right;
3485}
3486
3487/* adjustments for the expando table-in-table */
3488.jd-sumtable-expando {
3489  margin:.5em 0;
3490  padding:0;
3491}
3492
3493/* a div that holds a short description */
3494.jd-descrdiv {
3495  padding:3px 1em 0 1em;
3496  margin:0;
3497  border:0;
3498}
3499
3500#jd-content img.jd-expando-trigger-img {
3501  padding:0 4px 4px 0;
3502  margin:0;
3503}
3504
3505.jd-sumtable-subclasses div#subclasses-direct,
3506.jd-sumtable-subclasses div#subclasses-indirect {
3507  margin:0 0 0 13px;
3508}
3509
3510
3511
3512/********* MEMBER REF *************/
3513
3514
3515.jd-details {
3516/*  border:1px solid #669999;
3517  padding:4px; */
3518  margin:0 0 1em;
3519}
3520
3521/* API reference: a container for the
3522.tagdata blocks that make up the detailed
3523description */
3524.jd-details-descr {
3525  padding:0;
3526  margin:.5em .25em;
3527}
3528
3529/* API reference: a block containing
3530a detailed description, a params table,
3531seealso list, etc */
3532.jd-tagdata {
3533  margin:.5em 1em;
3534}
3535
3536.jd-tagdata p {
3537  margin:0 0 1em 1em;
3538}
3539
3540/* API reference: adjustments to
3541the detailed description block */
3542.jd-tagdescr {
3543  margin:.25em 0 .75em 0;
3544}
3545
3546.jd-tagdescr ol,
3547.jd-tagdescr ul {
3548  margin:0 2.5em;
3549  padding:0;
3550}
3551
3552.jd-tagdescr table,
3553.jd-tagdescr img {
3554  margin:.25em 1em;
3555}
3556
3557.jd-tagdescr li {
3558margin:0 0 .25em 0;
3559padding:0;
3560}
3561
3562/* API reference: heading marking
3563the details section for constants,
3564attrs, methods, etc. */
3565h4.jd-details-title {
3566  font-size:1.15em;
3567  background-color: #E2E2E2;
3568  margin:1.5em 0 .6em;
3569  padding:3px 95px 3px 3px; /* room for api-level */
3570}
3571body.google h4.jd-details-title {
3572  background-color: #FFF;
3573  padding-top:5px;
3574  border-top: 1px solid #ccc;
3575}
3576body.google table.jd-sumtable th {
3577  background-color: #FFF;
3578  color:#000;
3579}
3580
3581h4.jd-tagtitle {
3582  margin:0;
3583}
3584
3585h4 .normal {
3586  font-weight:normal;
3587}
3588
3589/* API reference: heading for "Parameters", "See Also", etc.,
3590in details sections */
3591h5.jd-tagtitle {
3592  margin:0 0 .25em 0;
3593  font-size:1em;
3594}
3595
3596.jd-tagtable {
3597  margin:0;
3598  background-color:transparent;
3599  width:auto;
3600}
3601
3602.jd-tagtable td,
3603.jd-tagtable th {
3604  border:none;
3605  background-color:#fff;
3606  vertical-align:top;
3607  font-weight:normal;
3608  padding:2px 10px;
3609}
3610
3611.jd-tagtable th {
3612  font-style:italic;
3613}
3614
3615/* Inline api level indicator for methods */
3616div.api-level {
3617  font-size:.8em;
3618  font-weight:normal;
3619  color:#999;
3620  float:right;
3621  padding:0 8px 0;
3622  margin-top:-30px;
3623}
3624
3625table.jd-tagtable td,
3626table.jd-tagtable th {
3627  background-color:transparent;
3628}
3629
3630table.jd-tagtable th {
3631  color:inherit;
3632}
3633
3634
3635
3636
3637
3638
3639
3640
3641
3642
3643
3644
3645
3646
3647
3648
3649
3650
3651
3652
3653
3654
3655
3656/* SEARCH FILTER */
3657
3658.menu-container {
3659  position:relative;
3660}
3661#search_autocomplete {
3662  font-weight:normal;
3663}
3664
3665.search_filtered_wrapper.reference {
3666  width: 193px;
3667  float: right;
3668}
3669.search_filtered_wrapper.docs {
3670  width:875px;
3671  float: left;
3672  position:absolute;
3673  top:26px;
3674  right:66px;
3675}
3676.suggest-card {
3677  position:relative;
3678  width:170px;
3679  min-height:90px;
3680  padding:5px;
3681  border: solid 1px #C5C5C5;
3682  background: white;
3683  top: 15px;
3684  margin-right:-5px;
3685  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3686  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3687  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3688}
3689.suggest-card.reference {
3690  position:absolute;
3691  z-index:999;
3692  min-width:171px; /* +padding and border makes this match input width */
3693  min-height:93px; /* add 3px because this has 1 not 4px top border */
3694  width:auto;
3695  top:41px;
3696  margin:0;
3697}
3698.suggest-card.develop {
3699  z-index:997;
3700  border-top: solid 4px #F80;
3701  float:right;
3702}
3703.suggest-card.design {
3704  z-index:996;
3705  border-top: solid 4px #33b5e5;
3706  float:right;
3707}
3708.suggest-card.distribute {
3709  z-index:995;
3710  border-top: solid 4px #9C0;
3711  float:right;
3712}
3713.child-card {
3714  width:100%;
3715}
3716.suggest-card.dummy {
3717  width:172px;
3718  float:right;
3719  border:0;
3720  background:transparent;
3721  -moz-box-shadow: none;
3722  -webkit-box-shadow: none;
3723  box-shadow: none;
3724}
3725
3726ul.search_filtered {
3727  min-width:100%;
3728  list-style: none;
3729  margin: 0 0 5px;
3730  padding: 0;
3731}
3732.search_filtered .jd-selected {
3733  background:#efefef;
3734  cursor:pointer;
3735}
3736.search_filtered .jd-selected,
3737.search_filtered .jd-selected a {
3738    color:#09C !important;
3739}
3740
3741.no-display {
3742  display: none;
3743}
3744
3745.search_filtered li.jd-autocomplete {
3746  font-size: 0.81em;
3747  border: none;
3748  margin: 0 0 2px;
3749  padding: 0;
3750  line-height:1.5em;
3751}
3752
3753.search_filtered li a {
3754  padding:0 5px;
3755  color:#222 !important;
3756  display:inline-block;
3757  line-height:12px;
3758}
3759
3760.search_filtered li.header {
3761  font-weight:bold;
3762  color:#444;
3763  border: none;
3764  margin: 8px 0 2px;
3765  padding:1px 5px;
3766  line-height:1.5em;
3767}
3768.search_filtered li.header.small {
3769  font-size:0.85em;
3770}
3771
3772.suggest-card.reference
3773.search_filtered li.header {
3774  color:#aaa;
3775  font-size: 0.81em;
3776}
3777
3778.search_filtered li.header:first-child {
3779  margin: 0 0 2px;
3780}
3781
3782.show-item {
3783  display: table-row;
3784}
3785.hide-item {
3786  display: hidden;
3787}
3788
3789
3790
3791
3792
3793/* SEARCH RESULTS */
3794
3795
3796#leftSearchControl .gsc-twiddle {
3797  background-image : none;
3798}
3799
3800#leftSearchControl td, #searchForm td {
3801  border: 0px solid #000;
3802  padding:0;
3803}
3804
3805#leftSearchControl .gsc-resultsHeader .gsc-title {
3806  padding-left : 0px;
3807  font-weight : bold;
3808  font-size : 13px;
3809  color:#006699;
3810  display : none;
3811}
3812
3813#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3814  display : none;
3815}
3816
3817#leftSearchControl .gsc-resultsRoot {
3818  padding-top : 6px;
3819}
3820
3821#leftSearchControl div.gs-visibleUrl-long {
3822  display : block;
3823  color:#006699;
3824}
3825
3826#leftSearchControl .gsc-webResult {
3827  padding:0 0 20px 0;
3828}
3829
3830.gsc-webResult div.gs-visibleUrl-short,
3831table.gsc-branding,
3832.gsc-clear-button {
3833  display : none;
3834}
3835
3836.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3837.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3838#leftSearchControl a,
3839#leftSearchControl a b {
3840  color:#006699;
3841}
3842
3843.gsc-resultsHeader {
3844  display: none;
3845}
3846
3847/* Disable built in search forms */
3848.gsc-control form.gsc-search-box {
3849  display : none;
3850}
3851table.gsc-search-box {
3852  margin:6px 0 0 0;
3853  border-collapse:collapse;
3854}
3855
3856td.gsc-input {
3857  padding:0 2px;
3858  width:100%;
3859  vertical-align:middle;
3860}
3861
3862input.gsc-input {
3863  border:1px solid #BCCDF0;
3864  width:99%;
3865  padding-left:2px;
3866  font-size:.95em;
3867}
3868
3869td.gsc-search-button {
3870  text-align: right;
3871  padding:0;
3872  vertical-align:top;
3873}
3874
3875
3876#searchResults {
3877  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3878(it doesn't) */
3879  height:auto;
3880}
3881
3882#searchResults .gsc-control {
3883  position:relative;
3884  width:auto;
3885  padding:0 0 10px;
3886}
3887
3888#searchResults .gsc-tabsArea {
3889  position:relative;
3890  white-space:nowrap;
3891  float:left;
3892  width:200px;
3893}
3894
3895#searchResults .gsc-above-wrapper-area {
3896  display:none;
3897}
3898
3899#searchResults .gsc-resultsbox-visible {
3900  float:left;
3901  width:720px;
3902  margin-left:20px;
3903}
3904
3905#searchResults .gsc-tabHeader {
3906  padding: 3px 6px;
3907  position:relative;
3908  width:auto;
3909  display:block;
3910}
3911
3912#searchResults h2#searchTitle {
3913  padding:0;
3914  margin:5px 0;
3915  border:none;
3916}
3917
3918#searchResults h2#searchTitle em {
3919  font-style:normal;
3920  color:#33B5E5;
3921}
3922
3923#searchResults .gsc-table-result {
3924  margin:5px 0 10px 0;
3925  background-color:transparent;
3926}
3927#searchResults .gs-web-image-box, .gs-promotion-image-box {
3928  width:120px;
3929}
3930#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3931  max-width:120px;
3932}
3933
3934#searchResults .gsc-table-result .gsc-thumbnail {
3935  padding:0 20px 0 0;
3936}
3937
3938#searchResults td {
3939  background-color:transparent;
3940}
3941
3942#searchResults .gsc-expansionArea {
3943  position:relative;
3944}
3945#searchResults .gsc-tabsArea .gsc-cursor-box {
3946  width:200px;
3947  padding:20px 0 0 1px;
3948}
3949#searchResults .gsc-cursor-page {
3950  display:inline-block;
3951  float:left;
3952  margin:-1px 0 0 -1px;
3953  padding:0;
3954  height:27px;
3955  width:27px;
3956  text-align:center;
3957  line-height:2;
3958}
3959
3960#searchResults .gsc-tabHeader.gsc-tabhInactive,
3961#searchResults .gsc-cursor-page {
3962  text-decoration:none;
3963  color:#258AAF;
3964  border: solid 1px #DADADA;
3965}
3966
3967#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
3968#searchResults .gsc-cursor-page:hover {
3969  border-color: #DBDBDB;
3970  background-color: #F3F3F3;
3971  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
3972  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
3973  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
3974  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
3975  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
3976  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
3977  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
3978EndColorStr='#ececec');
3979  color: #33B5E5;
3980}
3981
3982#searchResults .gsc-tabHeader.gsc-tabhActive,
3983#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
3984#searchResults .gsc-cursor-page.gsc-cursor-current-page,
3985#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
3986  color:#fff;
3987  background-color: #09C;
3988  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
3989  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
3990  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
3991  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
3992  background-image: -o-linear-gradient(top, #2FADDB, #09C);
3993  background-image: linear-gradient(top, #2FADDB, #09C);
3994  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
3995  border: 1px solid #3990AB;
3996  z-index:100;
3997}
3998
3999
4000
4001
4002
4003/************ STICKY NAV BAR ******************/
4004
4005#header-wrapper {
4006  background: #f9f9f9;
4007  margin: 0 -10px 0 -10px;
4008  padding: 31px 10px 0px 10px;
4009  position: relative;
4010}
4011#header-wrapper #nav-x div.wrap {
4012  max-width: 940px;
4013  height: 38px;
4014}
4015#header-wrapper #nav-x ul.nav-x li {
4016  margin-right: 36px !important;
4017  margin-top: 5px;
4018  margin-bottom: 0px;
4019  height: 30px;
4020}
4021#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
4022  color: #669900;
4023  border-bottom: 3px solid #669900;
4024}
4025#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
4026  color: #669900;
4027}
4028#header-wrapper #nav-x > div.wrap ul.nav-x a {
4029  font-size: 14.5px;
4030}
4031#header-wrapper .developer-console-btn {
4032  float: right;
4033  background: #fefefe;
4034  border-radius: 4px;
4035  padding: 8px 14px;
4036  box-shadow: 1px 1px 0px #7a7a7a;
4037  font-size: 14px;
4038  margin-top: -6px;
4039  cursor: pointer;
4040  color: #464646;
4041  margin-right: 20px;
4042}
4043/* not currently used */
4044#header-wrapper .shadow {
4045  width: 1034px;
4046  height: 4px;
4047  position: absolute;
4048  left: 50%;
4049  margin-left: -517px;
4050  bottom: -4px;
4051  background-image: url(../images/header-shadow.png);
4052}
4053
4054#context {
4055  clear: both;
4056  padding-top: 14px;
4057}
4058#context .breadcrumb {
4059  float: left;
4060  margin-bottom: 10px;
4061}
4062#context .util {
4063  float: right;
4064  margin-right: 20px;
4065}
4066
4067.breadcrumb {
4068  list-style: none;
4069  margin: 0;
4070  padding: 0;
4071  position: relative;
4072}
4073.breadcrumb li {
4074  float: left;
4075  padding: 0 20px 0 0;
4076  color: #000;
4077  white-space: nowrap;
4078}
4079.breadcrumb li a {
4080  color: #000;
4081}
4082.breadcrumb li:after {
4083  content: url(../images/breadcrumb.png);
4084  position: relative;
4085  top: 1px;
4086  left: 10px;
4087  width: 5px;
4088  height: 10px;
4089}
4090.breadcrumb li.current {
4091  font-weight: 700;
4092}
4093.breadcrumb li.current:after {
4094  display: none;
4095}
4096
4097/* Sticky Nav overrides */
4098.sticky-menu {
4099  position: fixed;
4100  width: 940px;
4101  height: 0px;
4102  z-index: 51;
4103  top: 12px;
4104}
4105#sticky-header {
4106  display: none;
4107  padding: 0 10px;
4108  position: fixed;
4109  background: #f9f9f9;
4110  top: 0px;
4111  left: 0px;
4112  right: 0px;
4113  height: 45px;
4114  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
4115  border-bottom: 1px solid #a5c43a;
4116  z-index: 50;
4117}
4118#sticky-header.design {
4119  border-bottom: 1px solid #33b5e5;
4120}
4121#sticky-header.develop {
4122  border-bottom: 1px solid #F80;
4123}
4124#sticky-header.distribute {
4125  border-bottom: 1px solid #9C0;
4126}
4127#sticky-header.about {
4128  border-bottom: 1px solid #9933CC;
4129}
4130#sticky-header > div {
4131  overflow: hidden;
4132  *zoom: 1;
4133  width: 940px;
4134  margin: 0 auto;
4135  clear: both;
4136  padding-top: 9px;
4137}
4138#sticky-header > div .logo {
4139  float: left;
4140  width: 26px;
4141  height: 25px;
4142  background: url(../images/dac_logo.png);
4143  background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x);
4144  z-index: 52;
4145  position: relative;
4146}
4147#sticky-header > div .top {
4148  float: left;
4149  width: 38px;
4150  height: 38px;
4151  position: relative;
4152  background: url(../images/styles/gototop.png);
4153  z-index: 52;
4154}
4155#sticky-header > div .breadcrumb {
4156  float: left;
4157  padding: 0 0 0 10px;
4158  border-left: 1px solid #d2d2d2;
4159  line-height: 24px;
4160  font-size: 14px;
4161  position: relative;
4162  top: 0px;
4163  z-index: 52;
4164}
4165
4166
4167}
4168
4169
4170
4171
4172
4173
4174
4175/*********** PREVIOUSLY dac-styles.css ***************/
4176
4177
4178#header {
4179  border-bottom:0;
4180}
4181
4182#header .wrap {
4183  max-width:940px;
4184  height:41px;
4185  border-bottom:1px solid;
4186  border-color: #ccc;
4187  position:relative;
4188}
4189
4190.about #header .wrap {
4191  border-color: #9933CC;
4192}
4193
4194.design #header .wrap {
4195  border-color: #33b5e5;
4196}
4197
4198.develop #header .wrap {
4199  border-color: #F80;
4200}
4201
4202.distribute #header .wrap {
4203  border-color: #9C0;
4204}
4205
4206.logo a {
4207  float:left;
4208}
4209
4210#header .logo {
4211  margin-top: -6px;
4212  margin-left: 0px;
4213  margin-bottom:0px;
4214  width: 160px;
4215  padding-right:10px;
4216}
4217
4218
4219#header-wrap .logo.landing-logo {
4220  width:220px;
4221  margin:0;
4222  padding:0;
4223  margin-bottom:22px;
4224}
4225#header-wrap .logo.landing-logo img {
4226  padding:0 0 0 10px;
4227}
4228
4229.search {
4230  height:25px;
4231  margin-top: -3px;
4232  margin-bottom: 0px;
4233}
4234
4235
4236
4237/* Quicknav */
4238.btn-quicknav {
4239  width:20px;
4240  height:28px;
4241  float:left;
4242  margin-left:6px;
4243  padding-right:10px;
4244  position:relative;
4245  cursor:pointer;
4246  border-right:1px solid #CCC;
4247}
4248
4249.btn-quicknav a {
4250  zoom:1;
4251  position:absolute;
4252  top:13px;
4253  left:5px;
4254  display:block;
4255  text-indent:-9999em;
4256  width:10px;
4257  height:5px;
4258  background:url(../images/quicknav_arrow.png) no-repeat;
4259}
4260
4261.btn-quicknav a.arrow-active {
4262  background-position: 0 -5px;
4263  display:none;
4264}
4265
4266#header-wrap.quicknav a.arrow-inactive {
4267  display:none;
4268}
4269
4270.btn-quicknav.active a.arrow-active {
4271  display:block;
4272}
4273
4274.nav-x li {
4275  display:block;
4276  float:left;
4277  margin-right:45px;
4278  -webkit-transition: all 0.25s linear;
4279      -moz-transition: all 0.25s linear;
4280       -ms-transition: all 0.25s linear;
4281        -o-transition: all 0.25s linear;
4282           transition: all 0.25s linear;
4283}
4284
4285#header-wrap.quicknav .nav-x li {
4286  min-width:160px;
4287  margin-right:20px;
4288}
4289
4290#header-wrap.quicknav li.last {
4291  margin-right:0px;
4292}
4293
4294#quicknav {
4295 float:none;
4296 clear:both;
4297 margin-left:0;
4298 margin-top:-30px;
4299 display:none;
4300 overflow:hidden;
4301}
4302
4303#header-wrap.quicknav #quicknav {
4304
4305}
4306
4307#quicknav ul {
4308  margin:10px 0;
4309  padding:0;
4310}
4311
4312#quicknav ul li.about {
4313  border-top:1px solid #9933CC;
4314}
4315
4316#quicknav ul li.design {
4317  border-top:1px solid #33b5e5;
4318}
4319
4320#quicknav ul li.develop {
4321  border-top:1px solid #FF8800;
4322}
4323
4324#quicknav ul li.distribute {
4325  border-top:1px solid #99cc00;
4326}
4327
4328#quicknav ul li {
4329  display:block;
4330  float:left;
4331  margin:0 20px 0 0;
4332  min-width:140px;
4333}
4334
4335#quicknav ul li.last {
4336  margin-right:0px;
4337}
4338
4339#quicknav ul li ul li {
4340  float:none;
4341}
4342
4343#quicknav ul li ul li a {
4344  color:#222;
4345}
4346
4347#quicknav ul li li ul,
4348#quicknav ul li li ul li {
4349  margin:0;
4350}
4351
4352#quicknav ul li li ul li:before {
4353  content:"\21B3";
4354}
4355
4356#header-wrap {
4357   -webkit-transition: all 0.25s ease-out;
4358      -moz-transition: all 0.25s ease-out;
4359       -ms-transition: all 0.25s ease-out;
4360        -o-transition: all 0.25s ease-out;
4361           transition: all 0.25s ease-out;
4362
4363}
4364
4365#header-wrap.quicknav {
4366  height:196px;
4367
4368}
4369
4370/* SEARCH AND MORE */
4371.search {
4372  position: absolute;
4373  width: 50px;
4374  height:28px;
4375  display: block;
4376  margin-top:-3px;
4377  margin-bottom:7px;
4378  overflow:hidden;
4379  z-index:100;
4380  right:54px;
4381  -webkit-transition: width 0.4s ease;
4382     -moz-transition: width 0.4s ease;
4383       -o-transition: width 0.4s ease;
4384          transition: width 0.4s ease;
4385}
4386
4387.search #search-btn {
4388  width:50px;
4389  height:28px;
4390  background:url(../images/icon_search.png) no-repeat;
4391  float:left;
4392}
4393
4394.search-inner {
4395  width:245px;
4396}
4397
4398.search:hover, .search.active {
4399  width:245px;
4400}
4401
4402.search .bottom, .search .left, .search .right {
4403  position: absolute;
4404  background-color: #a2a2a2
4405}
4406
4407.search .bottom {
4408  width: 214px;
4409  height: 1px;
4410  top: 24px;
4411  left: 0
4412}
4413
4414.search .left, .search .right {
4415  height: 5px;
4416  width: 1px
4417}
4418
4419.search .left {
4420  top: 22px;
4421  left: 56px;
4422  background-color:#CCC;
4423}
4424
4425.search .right {
4426  top: 22px;
4427  left: 238px;
4428  background-color:#CCC;
4429}
4430
4431.search form {
4432  margin-top: 2px;
4433  width: 162px;
4434  float:left;
4435}
4436
4437.search form input {
4438  color: #2f2f2f;
4439  font-size: 0.95em;
4440  width: 178px;
4441  border: none;
4442  margin-left: 6px;
4443  z-index: 1500;
4444  position: relative;
4445  background-color: transparent;
4446  border-bottom:1px solid #CCC;
4447  padding:0 0 0 4px;
4448  outline:none;
4449  height:24px;
4450}
4451
4452.search:hover form input {
4453  border-bottom:1px solid #33B5E5;
4454}
4455
4456.search:hover .bottom, .search:hover .left, .search:hover .right {
4457  background-color: #33b5e5;
4458}
4459
4460.search:hover #search-btn {
4461  background-position: 0 -28px
4462}
4463
4464.search form input:focus {
4465  color: #222;
4466  font-weight: bold
4467}
4468
4469.moremenu {
4470  float: right;
4471  position: relative;
4472  width: 50px;
4473  height:28px;
4474  display: block;
4475  margin-top:-3px;
4476  margin-bottom:7px;
4477  overflow:hidden;
4478  -webkit-transition: width 0.25s ease;
4479     -moz-transition: width 0.25s ease;
4480       -o-transition: width 0.25s ease;
4481          transition: width 0.25s ease;
4482}
4483
4484.moremenu #more-btn {
4485  width:40px;
4486  height:28px;
4487  background:url(../images/icon_more.png) no-repeat;
4488  border-left:1px solid #CCC;
4489  float:left;
4490  cursor:pointer;
4491}
4492
4493.moremenu:hover #more-btn {
4494  background-position:0 -28px;
4495}
4496
4497.morehover {
4498  position:absolute;
4499  right:6px;
4500  top:-9px;
4501  width:40px;
4502  height:35px;
4503  z-index:99;
4504  overflow:hidden;
4505
4506  -webkit-opacity:0;
4507     -moz-opacity:0;
4508       -o-opacity:0;
4509          opacity:0;
4510
4511  -webkit-transform-origin:100% 0%;
4512     -moz-transform-origin:100% 0%;
4513       -o-transform-origin:100% 0%;
4514          transform-origin:100% 0%;
4515
4516  -webkit-transition-property: -webkit-opacity;
4517  -webkit-transition-duration: .25s;
4518  -webkit-transition-timing-function:ease;
4519
4520  -moz-transition-property: -moz-opacity;
4521  -moz-transition-duration: .25s;
4522  -moz-transition-timing-function:ease;
4523
4524  -o-transition-property: -o-opacity;
4525  -o-transition-duration: .25s;
4526  -o-transition-timing-function:ease;
4527
4528  transition-property: opacity;
4529  transition-duration: .25s;
4530  transition-timing-function:ease;
4531}
4532
4533.morehover:hover,
4534.morehover.hover {
4535  opacity:1;
4536  height:385px;
4537  width:268px;
4538  -webkit-transition-property:height,  -webkit-opacity;
4539}
4540
4541.morehover .top {
4542  width:268px;
4543  height:39px;
4544  background:url(../images/more_top.png) no-repeat;
4545}
4546
4547.morehover .mid {
4548  width:228px;
4549  background:url(../images/more_mid.png) repeat-y;
4550  padding:10px 20px 0 20px;
4551}
4552
4553.morehover .mid .header {
4554  border-bottom:1px solid #ccc;
4555  font-weight:bold;
4556}
4557
4558.morehover .bottom {
4559  width:268px;
4560  height:6px;
4561  background:url(../images/more_bottom.png) no-repeat;
4562}
4563
4564.morehover ul {
4565  margin:10px 10px 20px 0;
4566}
4567
4568.morehover ul li {
4569  list-style:none;
4570}
4571
4572.morehover ul li.active a,
4573.morehover ul li.active a:hover {
4574  color:#222 !important;
4575}
4576
4577.morehover ul li.active img {
4578  margin-right:4px;
4579}
4580
4581
4582
4583
4584/* MARQUEE */
4585.slideshow-container {
4586  width:100%;
4587  overflow:hidden;
4588  position:relative;
4589}
4590.slideshow-container .slideshow-prev {
4591  position:absolute;
4592  top:50%;
4593  left:0px;
4594  margin-top:-36px;
4595  z-index:99;
4596}
4597.slideshow-container .slideshow-next {
4598  position:absolute;
4599  top:50%;
4600  margin-top:-36px;
4601  z-index:99;
4602  right:0px;
4603}
4604
4605.slideshow-container .pagination {
4606  position:absolute;
4607  bottom:20px;
4608  width:100%;
4609  text-align:center;
4610  z-index:99;
4611}
4612.slideshow-container .pagination ul {
4613  margin:0;
4614}
4615.slideshow-container .pagination ul li{
4616  display: inline-block;
4617  width:12px;
4618  height:12px;
4619  text-indent:-8000px;
4620  list-style:none;
4621  margin: 0 2px;
4622  border-radius:6px;
4623  background-color:#ccc;
4624  cursor:pointer;
4625        -webkit-transition:color .5s ease-in;
4626        -moz-transition:color .5s ease-in;
4627        -o-transition:color .5s ease-in;
4628        transition:color .5s ease-in;
4629}
4630.slideshow-container .pagination ul li:hover {
4631  background-color:#999;
4632}
4633.slideshow-container .pagination ul li.active {
4634  background-color:#33b5e5;
4635}
4636.slideshow-container .pagination ul li.active:hover {
4637  background-color:#33b5e5;
4638}
4639.slideshow-container ul li {
4640  display:inline;
4641  list-style:none;
4642}
4643
4644
4645#landing h1 {
4646  margin:17px 0 20px 0 !important;
4647}
4648
4649a.download-sdk {
4650    float:right;
4651    margin:-10px 0;
4652    height:30px;
4653    padding-top:4px;
4654    padding-bottom:0px;
4655}
4656
4657#nav-x {
4658  padding-top: 13px;
4659}
4660
4661#nav-x .wrap {
4662  min-height:32px;
4663}
4664
4665#nav-x .wrap,
4666#searchResults.wrap {
4667    max-width:940px;
4668    border-bottom:1px solid #CCC;
4669}
4670
4671#searchResults.wrap #leftSearchControl {
4672  min-height:700px
4673}
4674.nav-x {
4675    margin-left:0;
4676    margin-bottom:0;
4677}
4678
4679
4680
4681
4682
4683
4684
4685
4686
4687
4688/*
4689 * CSS Styles that are needed by jScrollPane for it to operate correctly.
4690 */
4691
4692.jspContainer {
4693  overflow: hidden;
4694  position: relative;
4695}
4696
4697.jspPane {
4698  position: absolute;
4699  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4700}
4701
4702.jspVerticalBar {
4703  position: absolute;
4704  top: 0;
4705  right: 0;
4706  width: 4px;
4707  height: 100%;
4708  background: #f5f5f5;
4709}
4710
4711.jspHorizontalBar {
4712  position: absolute;
4713  bottom: 0;
4714  left: 0;
4715  width: 100%;
4716  height: 4px;
4717  background: #f5f5f5;
4718}
4719
4720.jspVerticalBar *,
4721.jspHorizontalBar * {
4722  margin: 0;
4723  padding: 0;
4724}
4725.jspCap {
4726  display: block;
4727}
4728
4729.jspVerticalBar .jspCap {
4730  height: 4px;
4731}
4732
4733.jspHorizontalBar .jspCap {
4734  width: 0;
4735  height: 100%;
4736}
4737
4738.jspHorizontalBar .jspCap {
4739  float: left;
4740}
4741
4742.jspTrack {
4743  position: relative;
4744}
4745
4746.jspDrag {
4747  background: #bbb;
4748  position: relative;
4749  top: 0;
4750  left: 0;
4751  cursor: pointer;
4752}
4753
4754.jspDrag:hover,
4755.jspDrag:active {
4756  border-color: #09c;
4757  background-color: #4cadcb;
4758  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4759  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4760  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4761  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4762  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4763  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4764  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4765}
4766
4767.jspHorizontalBar .jspTrack,
4768.jspHorizontalBar .jspDrag {
4769  float: left;
4770  height: 100%;
4771}
4772
4773.jspArrow {
4774  background: #999;
4775  text-indent: -20000px;
4776  display: block;
4777  cursor: pointer;
4778}
4779
4780.jspArrow.jspDisabled {
4781  cursor: default;
4782  background: #ccc;
4783}
4784
4785.jspVerticalBar .jspArrow {
4786  height: 16px;
4787}
4788
4789.jspHorizontalBar .jspArrow {
4790  width: 16px;
4791  float: left;
4792  height: 100%;
4793}
4794
4795.jspVerticalBar .jspArrow:focus {
4796  outline: none;
4797}
4798
4799.jspCorner {
4800  float: left;
4801  height: 100%;
4802}
4803
4804/* Yuk! CSS Hack for IE6 3 pixel bug :( */
4805* html .jspCorner {
4806  margin: 0 -3px 0 0;
4807}
4808/******* end of jscrollpane *********/
4809
4810
4811
4812
4813
4814/************ DEVELOP HOMEPAGE ******************/
4815
4816/* Slideshow */
4817.slideshow-develop {
4818  height: 316px;
4819  width: 940px;
4820  position: relative;
4821  overflow:hidden;
4822}
4823.slideshow-develop .frame {
4824  width: 940px;
4825  height: 316px;
4826}
4827.slideshow-develop img.play {
4828  max-width:350px;
4829  max-height:240px;
4830  margin:20px 0 0 90px;
4831  -webkit-transform: perspective(800px ) rotateY( 35deg );
4832  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4833  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4834  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4835}
4836.slideshow-develop img.play.no-shadow {
4837    box-shadow: none;
4838    -moz-box-shadow: none;
4839    -webkit-box-shadow: none;
4840}
4841.slideshow-develop img.play.no-transform {
4842  -webkit-transform: none;
4843}
4844.slideshow-develop a.slideshow-next {
4845  background: url(../images/arrow-right-develop.png);
4846}
4847.slideshow-develop a.slideshow-prev {
4848  background: url(../images/arrow-left-develop.png);
4849}
4850.slideshow-develop .content-right {
4851  float: left;
4852}
4853.slideshow-develop .content-right h2 {
4854  padding:0;
4855  margin-bottom:10px;
4856  border:none;
4857  font-size:24px;
4858}
4859.slideshow-develop .item {
4860  height: 300px;
4861  width: 940px;
4862}
4863.slideshow-develop .pagination ul li.active {
4864  background-color: #F80;
4865}
4866.slideshow-develop .pagination ul li.active:hover {
4867  background-color: #F80;
4868}
4869.slideshow-develop .item hr {
4870  margin:5px 0 10px;
4871}
4872.slideshow-develop .item p {
4873  margin:10px 0;
4874}
4875.slideshow-develop .item p.title-intro {
4876  position:absolute;
4877  margin:0;
4878}
4879
4880/* Feeds */
4881.feed ul {
4882  margin: 0;
4883}
4884.feed .feed-nav {
4885  height: 25px;
4886  border-bottom: 1px solid #CCC;
4887}
4888.feed .feed-nav li {
4889  list-style: none;
4890  float: left;
4891  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4892  margin-right: 25px;
4893  cursor: pointer;
4894}
4895.feed .feed-nav li.active {
4896  color: #000;
4897  border-bottom: 4px solid #F80;
4898}
4899.feed .feed-container {
4900  overflow: hidden;
4901  width: 460px;
4902}
4903.feed .feed-container .feed-frame {
4904  width: 1000px;
4905}
4906.feed .feed-container .feed-frame ul {
4907  float: left;
4908  width:460px;
4909}
4910.feed .feed-container .feed-frame ul ul {
4911  float: none;
4912  margin:10px 0 0 30px;
4913}
4914.feed .feed-container .feed-frame li {
4915  list-style: none;
4916  margin: 20px 0 20px 0;
4917  width: 460px;
4918  height:93px;
4919}
4920.feed .feed-container .feed-frame li.playlist {
4921  height:auto;
4922}
4923.feed .feed-container .feed-frame li.playlist a {
4924  height:93px;
4925  display:block;
4926}
4927.feed .feed-container .feed-frame li.more {
4928  height:20px;
4929  margin:10px 0 5px 5px;
4930}
4931.feed .feed-container .feed-frame li.more a {
4932  height:inherit;
4933}
4934.feed .feed-container .feed-frame li.playlist-video {
4935  list-style: none;
4936  margin: 0;
4937  width: 460px;
4938  height:55px;
4939  font-size:12px;
4940}
4941.feed .feed-container .feed-frame li.playlist-video a {
4942  height:45px;
4943  padding:5px;
4944}
4945.feed .feed-container .feed-frame li.playlist-video h5 {
4946  font-size:12px;
4947  line-height:13px;
4948  margin:0;
4949}
4950.feed .feed-container .feed-frame li.playlist-video p {
4951  margin:5px 0 0;
4952  line-height:15px;
4953}
4954.feed-container .feed-frame div.feed-image {
4955  float: left;
4956  border: 1px solid #999;
4957  margin:0 20px 0 0;
4958  width:122px;
4959  height:92px;
4960  background:url('../images/blog-default.png') no-repeat 0 0;
4961  background-size:180px;
4962}
4963#jd-content .feed .feed-container .feed-frame li img {
4964  float: left;
4965  border: 1px solid #999;
4966  margin:0 20px 0 0;
4967  width:122px;
4968  height:92px;
4969}
4970#jd-content .feed .feed-container .feed-frame li.playlist-video img {
4971  width:inherit;
4972  height:inherit;
4973}
4974
4975.feed .feed-container .feed-frame li a,
4976.feed .feed-container .feed-frame li a:active {
4977  color:#555 !important;
4978}
4979
4980.feed .feed-container .feed-frame li a:hover,
4981.feed .feed-container .feed-frame li a:hover * {
4982  color:#7AA1B0 !important;
4983}
4984
4985/* Video player */
4986#player-wrapper {
4987  display:none;
4988  margin: -1px auto 0;
4989  position: relative;
4990  width: 940px;
4991  height: 0px;
4992}
4993#player-frame {
4994  background: #EFEFEF;
4995  border: 1px solid #CCC;
4996  padding: 0px 207px;
4997  z-index: 10; /* stay above marque, but below search suggestions */
4998  width: 525px;
4999  height: 330px;
5000  position: relative;
5001}
5002
5003
5004
5005/************ DEVELOP TOPIC CONTAINERS ************/
5006
5007.landing-banner,
5008.landing-docs {
5009  margin:20px 0;
5010}
5011.landing-banner > div:first-child,
5012.landing-docs > div:first-child,
5013.landing-docs > .col-12 {
5014  margin-left:0;
5015  min-height:280px;
5016}
5017.landing-banner.short > div {
5018  min-height:50px;
5019}
5020.landing-banner > div:last-child,
5021.landing-docs > div:last-child,
5022.landing-docs > .col-12 {
5023  margin-right:0;
5024}
5025
5026.landing-banner > div > *:last-child {
5027  margin-bottom:0;
5028}
5029.landing-banner h1 {
5030  margin-top:16px;
5031  padding-bottom:24px;
5032}
5033.landing-docs,
5034.landing-banner {
5035  clear:both;
5036  overflow:hidden;
5037}
5038.landing-docs h3 {
5039  font-size:14px;
5040  line-height:21px;
5041  color:#555;
5042  text-transform:uppercase;
5043  border-bottom:1px solid #CCC;
5044  margin:0 0 20px;
5045}
5046.landing-docs a {
5047  color:#333 !important;
5048}
5049
5050.landing-docs a:hover,
5051.landing-docs a:hover * {
5052  color:#7AA1B0 !important
5053}
5054
5055.landing-docs .normal-links a {
5056  color:#258aaf !important;
5057}
5058
5059.plusone {
5060  float:right;
5061}
5062
5063
5064
5065.next-docs {
5066  border-top:1px solid #ccc;
5067  margin:40px 0 0;
5068  padding:5px 0 0;
5069  clear:left;
5070  overflow:hidden;
5071}
5072.next-docs div:first-child {
5073  margin-left:0;
5074}
5075.next-docs div:last-child {
5076  margin-right:0;
5077}
5078
5079.next-docs h2 {
5080  font-size:14px;
5081  line-height:21px;
5082  color:#555;
5083  text-transform:uppercase;
5084  border-bottom:none;
5085  margin:0 0 1em;
5086  padding:5px 0 0;
5087}
5088
5089
5090
5091/************* HOME/LANDING PAGE *****************/
5092
5093.slideshow-home {
5094  height: 500px;
5095  width: 940px;
5096  border-bottom: 1px solid #CCC;
5097  position: relative;
5098  margin: 0;
5099}
5100.slideshow-home .frame {
5101  width: 940px;
5102  height: 500px;
5103}
5104.slideshow-home .content-left {
5105  float: left;
5106  text-align: center;
5107  vertical-align: center;
5108  margin: 0 0 0 35px;
5109}
5110.slideshow-home .content-right {
5111  margin: 80px 0 0 0;
5112}
5113.slideshow-home .content-right p {
5114  margin-bottom: 10px;
5115}
5116.slideshow-home .content-right p:last-child {
5117  margin-top: 15px;
5118}
5119.slideshow-home .content-right h1 {
5120  padding:0;
5121}
5122.slideshow-home .item {
5123  height: 500px;
5124  width: 940px;
5125}
5126.home-sections {
5127  padding: 30px 20px 20px;
5128  margin: 20px 0;
5129  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
5130}
5131.home-sections ul {
5132  margin: 0;
5133}
5134.home-sections ul li {
5135  float: left;
5136  display: block;
5137  list-style: none;
5138  width: 170px;
5139  height: 35px;
5140  border: 1px solid #ccc;
5141  background: white;
5142  margin-right: 10px;
5143  border-radius: 1px;
5144  -webkit-border-radius: 1px;
5145  -moz-border-radius: 1px;
5146  box-shadow: 1px 1px 5px #EEE;
5147  -webkit-box-shadow: 1px 1px 5px #EEE;
5148  -moz-box-shadow: 1px 1px 5px #EEE;
5149  background: white;
5150}
5151.home-sections ul li:hover {
5152  background: #F9F9F9;
5153  border: 1px solid #CCC;
5154}
5155.home-sections ul li a,
5156.home-sections ul li a:hover {
5157  font-weight: bold;
5158  margin-top: 8px;
5159  line-height: 18px;
5160  float: left;
5161  width: 100%;
5162  text-align: center;
5163  color: #09c !important;
5164}
5165.home-sections ul li a {
5166  font-weight: bold;
5167  margin-top: 8px;
5168  line-height: 18px;
5169  float: left;
5170  width:100%;
5171  text-align:center;
5172}
5173.home-sections ul li img {
5174  float: left;
5175  margin: -8px 0 0 10px;
5176}
5177.home-sections ul li.last {
5178  margin-right: 0px;
5179}
5180.fullpage #footer {
5181  margin-top: -40px;
5182}
5183
5184/************ DISTRIBUTE PAGES ******************/
5185
5186.article-detail #body-content {
5187  padding-top: 10px;
5188}
5189
5190/* A container for grid sets with uppercase h3 and rule */
5191.dynamic-grid h3 {
5192  font-size:14px;
5193  line-height:21px;
5194  color:#555;
5195  text-transform:uppercase;
5196  border-bottom:1px solid #CCC;
5197  padding:8px 0 0 1px;
5198  margin-bottom:14px;
5199  clear:both;
5200}
5201
5202.top-right-float {
5203  float: right;
5204}
5205
5206.clearfloat {
5207  float: none;
5208  clear: both;
5209}
5210
5211.border-img {
5212  border: 1px solid #CCC;
5213}
5214
5215.center-img {
5216  margin: auto;
5217  text-align: center;
5218}
5219.center-img img {
5220  margin-bottom: 15px;
5221}
5222
5223.figure img, .border-img {
5224  margin-bottom: 15px;
5225}
5226
5227/************ RESOURCE CARDS ******************/
5228
5229/* Resource cards, 12, 13, 16-col */
5230
5231/* Basic card-styling with shadow */
5232.resource-card {
5233  border-radius: 1px;
5234  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
5235  background: #fefefe;
5236}
5237
5238/* Styling for background image including tinting and section icons in stacks */
5239.card-bg {
5240  display: block;
5241  position: absolute;
5242  vertical-align: top;
5243  width: 100%;
5244  left: 0;
5245  top: 0;
5246  background-size: cover;
5247  background-repeat: no-repeat;
5248  background-position: center;
5249  background-image: url(../images/resource-card-default-android.jpg);
5250}
5251.card-bg:after {
5252  content: "";
5253  display: block;
5254  height: 100%;
5255  width: 100%;
5256  opacity: 1;
5257  background: rgba(0, 0, 0, 0.2);
5258  -webkit-transition: opacity 0.5s;
5259  -moz-transition: opacity 0.5s;
5260  -o-transition: opacity 0.5s;
5261  transition: opacity 0.5s;
5262}
5263.card-bg .card-section-icon {
5264  position: absolute;
5265  top: 50%;
5266  width: 100%;
5267  margin-top: -35px;
5268  text-align: center;
5269  padding-top: 65px;
5270  z-index: 100;
5271}
5272.card-bg .card-section-icon .icon {
5273  position: absolute;
5274  left: 50%;
5275  margin-left: -28px;
5276  top: 0px;
5277  width: 56px;
5278  height: 56px;
5279  background-repeat: no-repeat;
5280  background-position: 50% 50%;
5281  background-image: url(../images/stack-icon.png);
5282}
5283.card-bg .card-section-icon .section {
5284  text-transform: uppercase;
5285  color: white;
5286  font-size: 14px;
5287}
5288
5289.card-info {
5290  position: absolute;
5291  -webkit-box-sizing: border-box;
5292  -moz-box-sizing: border-box;
5293  box-sizing: border-box;
5294  top: 0;
5295  right: 0;
5296  bottom: 0;
5297  left: 0;
5298  overflow: hidden;
5299  background: #fefefe;
5300  padding: 4px 12px 6px 12px;
5301}
5302.card-info .section {
5303  text-transform: uppercase;
5304  color: #898989;
5305  font-size: 12px;
5306  margin-bottom: 1px;
5307}
5308.card-info .title {
5309  color: #363636;
5310  white-space: nowrap;
5311  overflow: hidden;
5312  text-overflow: ellipsis;
5313  padding-bottom: 5px;
5314  margin-bottom: -2px;
5315  font-size: 16px;
5316}
5317.card-info .description {
5318  overflow: hidden;
5319}
5320.card-info .description .text {
5321  color: #464646;
5322  font: 13px/15px Roboto Condensed;
5323  overflow: hidden;
5324  width:100%;
5325}
5326.card-info .description .util {
5327  position: absolute;
5328  right: 5px;
5329  bottom: 70px; /*-2px;*/
5330  opacity: 0;
5331  -webkit-transition: opacity 0.5s;
5332  -moz-transition: opacity 0.5s;
5333  -o-transition: opacity 0.5s;
5334  transition: opacity 0.5s;
5335}
5336.card-info.empty-desc .title {
5337  white-space: normal;
5338  overflow: visible;
5339}
5340.card-info.empty-desc .description {
5341  display: none;
5342}
5343/* Truncate card summaries at bounding box and
5344 * and apply ellipsis at lower right */
5345.ellipsis {
5346  overflow: hidden;
5347  float:right;
5348  line-height: 15px;
5349  width:100%;
5350}
5351.resource-card-6x6 .card-info .description .teddddddxt {
5352 float:left;
5353  position:relative;
5354  margin-left:0;
5355}
5356.ellipsis:before {
5357  content:"";
5358  float: left;
5359  width: 5px;
5360  height:100%;
5361}
5362.ellipsis > *:first-child.text {
5363  float: right;
5364  width: 100%  !important;
5365  margin-left: -5px;
5366}
5367.ellipsis:after {
5368  content: "\02026";
5369  height:17px;
5370  padding-bottom:4px;
5371
5372  box-sizing: content-box;
5373  -webkit-box-sizing: content-box;
5374  -moz-box-sizing: content-box;
5375
5376  float: right; position: relative;
5377  top: -16px; left: 100%;
5378  width: 4em; margin-left: -4em;
5379  padding-right: 5px;
5380
5381  background: -webkit-gradient(linear, left top, right top,
5382    from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5383  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5384  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5385  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5386  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5387}
5388.ellipsis:after {
5389  font-style: normal; color: #aaa;
5390  font-size:13px;
5391  text-align: right;
5392}
5393
5394/* Flow Layout */
5395.resource-flow-layout {
5396  display: inline-block;
5397}
5398.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack {
5399  float: left;
5400  position: relative;
5401}
5402.resource-flow-layout .resource-card-stack > .resource-card {
5403  margin-right: 0px !important;
5404}
5405.resource-flow-layout:after {
5406  content: ".";
5407  display: block;
5408  height: 10;
5409  position:relative;
5410  clear: both;
5411  visibility: hidden;
5412}
5413.resource-card:hover {
5414  cursor: pointer;
5415}
5416.resource-card:hover .card-bg:after {
5417  opacity: 0;
5418}
5419/* disabled to make way for fade/ellipsis truncation,
5420   and the plusone moves up.
5421.resource-card:hover .card-info .description .text {
5422  padding-right: 70px;
5423} */
5424.resource-card:hover .card-info .description .util {
5425  opacity: 1;
5426}
5427
5428/* Carousel Layout */
5429/* Carousel styles for landing page */
5430.resource-carousel-layout {
5431  margin: 20px 0 20px 0;
5432  position: relative;
5433  overflow: hidden;
5434}
5435.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5436  display: none;
5437}
5438.resource-carousel-layout .pagination {
5439  bottom: 0px;
5440}
5441.resource-carousel-layout .frame li {
5442  position: relative;
5443}
5444.resource-carousel-layout .frame li .card-bg {
5445  height: 300px;
5446}
5447.resource-carousel-layout .frame li .card-info {
5448  padding: 7px 15px 0px 15px;
5449  top: 300px;
5450}
5451.resource-carousel-layout .frame li .card-info .section {
5452  font-size: 13px;
5453  margin-bottom: 7px;
5454}
5455.resource-carousel-layout .frame li .card-info .title {
5456  font-size: 25px;
5457  margin-bottom: 2px;
5458}
5459.resource-carousel-layout .frame li .card-info .description {
5460  font-family: 15px/16px Roboto Condensed, sans-serif;
5461}
5462.resource-carousel-layout .frame li .card-info .description .text {
5463  height: 40px;
5464}
5465.resource-carousel-layout .frame li .card-info .description .util {
5466  bottom:97px;
5467  right:4px;
5468}
5469
5470/* Stack Layout */
5471.resource-stack-layout {
5472  display: inline-block;
5473}
5474.resource-stack-layout .resource-card-stack {
5475  float: left;
5476  position: relative;
5477}
5478.resource-stack-layout .resource-card {
5479  margin-bottom: 20px;
5480  display: block;
5481  position: relative;
5482}
5483.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5484  /*text-transform: uppercase;*/
5485  color: #898989;
5486  font-size: 17px;
5487  line-height: 24px;
5488  margin-bottom: 6px;
5489}
5490.resource-stack-layout .section-card {
5491  height: 284px;
5492}
5493.resource-stack-layout .section-card > .card-bg {
5494  height: 192px;
5495}
5496.resource-stack-layout .section-card > .card-info {
5497  padding: 4px 12px 6px 12px;
5498  top: 192px;
5499}
5500.resource-stack-layout .section-card > .card-info .section {
5501  display: none;
5502}
5503.resource-stack-layout .section-card > .card-info .title {
5504  font-size: 17px;
5505  border-bottom: 1px solid #959595;
5506  padding-bottom: 0px;
5507}
5508.resource-stack-layout .section-card > .card-info .description {
5509  font-size: 13px;
5510  line-height: 15px;
5511}
5512.resource-stack-layout .section-card > .card-info .description .text {
5513  height: 30px;
5514}
5515.resource-stack-layout .related-card {
5516  height: 90px;
5517}
5518.resource-stack-layout .related-card > .card-bg {
5519  left: 0;
5520  top: 0;
5521  width: 90px;
5522  height: 100%;
5523  position: absolute;
5524  display: block;
5525}
5526.resource-stack-layout .related-card > .card-info {
5527  left: 90px;
5528  padding: 4px 12px 4px 12px;
5529}
5530.resource-stack-layout .related-card > .card-info .section {
5531  font-size: 12px;
5532  margin-bottom: 1px;
5533  display: none;
5534}
5535.resource-stack-layout .related-card > .card-info .title {
5536  font-size: 16px;
5537  margin-bottom: -2px;
5538  white-space: normal;
5539  overflow: visible;
5540  text-overflow: ellipsis;
5541}
5542.resource-stack-layout .related-card > .card-info .title:after {
5543  content: url(../images/link-out.png);
5544  display: block;
5545}
5546.resource-stack-layout .related-card > .card-info .description {
5547  display: none;
5548}
5549.resource-stack-layout .section-card-menu {
5550  /* Flexible height */
5551  display: block;
5552  height: auto;
5553  width: auto;
5554}
5555.resource-stack-layout .section-card-menu .card-bg {
5556  height: 155px;
5557  /* Flexible height */
5558  position: relative;
5559  display: inline-block;
5560  vertical-align: top;
5561}
5562.resource-stack-layout .section-card-menu .card-info {
5563  padding: 4px 12px 0px 12px;
5564  /* Flexible height */
5565  position: relative;
5566  left: auto;
5567  top: auto;
5568  right: auto;
5569  bottom: auto;
5570}
5571.resource-stack-layout .section-card-menu .card-info ul {
5572  list-style: none;
5573  margin: 0;
5574}
5575.resource-stack-layout .section-card-menu .card-info ul li {
5576  list-style: none;
5577  margin: 0;
5578  padding: 15px 0;
5579  border-top-width: 1px;
5580  border-top-style: solid;
5581  border-top-color: #959595;
5582}
5583.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:link, .resource-stack-layout .section-card-menu .card-info ul li a:visited, .resource-stack-layout .section-card-menu .card-info ul li a:active, .resource-stack-layout .section-card-menu .card-info ul li a:hover {
5584  color: #363636 !important;
5585}
5586.resource-stack-layout .section-card-menu .card-info ul li:first-child {
5587  border-top: none;
5588}
5589.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5590  opacity: 1;
5591  -webkit-transition: opacity 0.5s;
5592  -moz-transition: opacity 0.5s;
5593  -o-transition: opacity 0.5s;
5594  transition: opacity 0.5s;
5595}
5596.resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5597  max-height: 30px;
5598  opacity: 1;
5599  -webkit-transition: max-height 0.5s, opacity 1s;
5600  -moz-transition: max-height 0.5s, opacity 1s;
5601  -o-transition: max-height 0.5s, opacity 1s;
5602  transition: max-height 0.5s, opacity 1s;
5603}
5604.resource-stack-layout .section-card-menu .card-info .title {
5605  font-size: 16px;
5606  margin-bottom: -2px;
5607  position: relative;
5608}
5609.resource-stack-layout .section-card-menu .card-info .title:after {
5610  background: url(../images/stack-arrow-right.png);
5611  content: '';
5612  opacity: 0;
5613  -webkit-transition: opacity 0.25s;
5614  -moz-transition: opacity 0.25s;
5615  -o-transition: opacity 0.25s;
5616  transition: opacity 0.25s;
5617  position: absolute;
5618  right: 0px;
5619  top: 3px;
5620  width: 10px;
5621  height: 15px;
5622}
5623.resource-stack-layout .section-card-menu .card-info .title.more {
5624  text-transform: uppercase;
5625  color: #898989;
5626  display: inline-block;
5627}
5628.resource-stack-layout .section-card-menu .card-info .title.more:after {
5629  background: url(../images/stack-arrow-right.png);
5630  content: '';
5631  display: block;
5632  position: absolute;
5633  right: -20px;
5634  top: 3px;
5635  width: 10px;
5636  height: 15px;
5637}
5638.resource-stack-layout .section-card-menu .card-info .description {
5639  max-height: 0px;
5640  opacity: 0;
5641  overflow: hidden;
5642  font-size: 13px;
5643  line-height: 15px;
5644  /* Hover off */
5645  -webkit-transition: max-height 0.5s, opacity 0.5s;
5646  -moz-transition: max-height 0.5s, opacity 0.5s;
5647  -o-transition: max-height 0.5s, opacity 0.5s;
5648  transition: max-height 0.5s, opacity 0.5s;
5649}
5650.resource-stack-layout .section-card-menu .card-info .description .text {
5651  height: 30px;
5652}
5653.resource-stack-layout:after {
5654  content: ".";
5655  display: block;
5656  height: 0;
5657  clear: both;
5658  visibility: hidden;
5659}
5660
5661/* Generate the flow layout styles for a 3-column 16-col span */
5662.resource-flow-layout.col-16 {
5663  margin: 0 -14px 0 0;
5664  width: 954px;
5665}
5666.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack {
5667  margin: 0 14px 20px 0;
5668}
5669.resource-flow-layout.col-16 .resource-card-row-stack-last {
5670  margin-bottom: 0px !important;
5671}
5672.resource-flow-layout.col-16 .resource-card-col-stack-last {
5673  margin-bottom: 0px !important;
5674}
5675.resource-flow-layout.col-16 .resource-card-3x6 {
5676  width: 145px;
5677  height: 284px;
5678}
5679.resource-flow-layout.col-16 .resource-card-3x12 {
5680  width: 145px;
5681  height: 588px;
5682}
5683.resource-flow-layout.col-16 .resource-card-3x18 {
5684  width: 145px;
5685  height: 892px;
5686}
5687.resource-flow-layout.col-16 .resource-card-6x6 {
5688  width: 304px;
5689  height: 284px;
5690}
5691.resource-flow-layout.col-16 .resource-card-6x12 {
5692  width: 304px;
5693  height: 588px;
5694}
5695.resource-flow-layout.col-16 .resource-card-6x18 {
5696  width: 304px;
5697  height: 892px;
5698}
5699.resource-flow-layout.col-16 .resource-card-9x6 {
5700  width: 463px;
5701  height: 284px;
5702}
5703.resource-flow-layout.col-16 .resource-card-9x12 {
5704  width: 463px;
5705  height: 588px;
5706}
5707.resource-flow-layout.col-16 .resource-card-9x18 {
5708  width: 463px;
5709  height: 892px;
5710}
5711.resource-flow-layout.col-16 .resource-card-12x6 {
5712  width: 622px;
5713  height: 284px;
5714}
5715.resource-flow-layout.col-16 .resource-card-12x12 {
5716  width: 622px;
5717  height: 588px;
5718}
5719.resource-flow-layout.col-16 .resource-card-12x18 {
5720  width: 622px;
5721  height: 892px;
5722}
5723.resource-flow-layout.col-16 .resource-card-15x6 {
5724  width: 781px;
5725  height: 284px;
5726}
5727.resource-flow-layout.col-16 .resource-card-15x12 {
5728  width: 781px;
5729  height: 588px;
5730}
5731.resource-flow-layout.col-16 .resource-card-15x18 {
5732  width: 781px;
5733  height: 892px;
5734}
5735.resource-flow-layout.col-16 .resource-card-18x6 {
5736  width: 940px;
5737  height: 284px;
5738}
5739.resource-flow-layout.col-16 .resource-card-18x12 {
5740  width: 940px;
5741  height: 420px;
5742}
5743.resource-flow-layout.col-16 .resource-card-18x18 {
5744  width: 940px;
5745  height: 892px;
5746}
5747.resource-flow-layout.col-16 .resource-card-3x2 {
5748  width: 145px;
5749  height: 95px;
5750}
5751.resource-flow-layout.col-16 .resource-card-3x2x3 {
5752  width: 145px;
5753  height: 90px;
5754  margin-bottom: 7px;
5755}
5756.resource-flow-layout.col-16 .resource-card-3x3 {
5757  width: 145px;
5758  height: 142px;
5759}
5760.resource-flow-layout.col-16 .resource-card-3x3x2 {
5761  width: 145px;
5762  height: 138px;
5763  margin-bottom: 8px;
5764}
5765.resource-flow-layout.col-16 .resource-card-6x2 {
5766  width: 304px;
5767  height: 95px;
5768}
5769.resource-flow-layout.col-16 .resource-card-6x2x3 {
5770  width: 304px;
5771  height: 90px;
5772  margin-bottom: 7px;
5773}
5774.resource-flow-layout.col-16 .resource-card-6x3 {
5775  width: 304px;
5776  height: 142px;
5777}
5778.resource-flow-layout.col-16 .resource-card-6x3x2 {
5779  width: 304px;
5780  height: 138px;
5781  margin-bottom: 8px;
5782}
5783.resource-flow-layout.col-16 .resource-card-9x2 {
5784  width: 463px;
5785  height: 95px;
5786}
5787.resource-flow-layout.col-16 .resource-card-9x2x3 {
5788  width: 463px;
5789  height: 90px;
5790  margin-bottom: 7px;
5791}
5792.resource-flow-layout.col-16 .resource-card-9x3 {
5793  width: 463px;
5794  height: 142px;
5795}
5796.resource-flow-layout.col-16 .resource-card-9x3x2 {
5797  width: 463px;
5798  height: 138px;
5799  margin-bottom: 8px;
5800}
5801.resource-flow-layout.col-16 .resource-card-12x2 {
5802  width: 622px;
5803  height: 95px;
5804}
5805.resource-flow-layout.col-16 .resource-card-12x2x3 {
5806  width: 622px;
5807  height: 90px;
5808  margin-bottom: 7px;
5809}
5810.resource-flow-layout.col-16 .resource-card-12x3 {
5811  width: 622px;
5812  height: 142px;
5813}
5814.resource-flow-layout.col-16 .resource-card-12x3x2 {
5815  width: 622px;
5816  height: 138px;
5817  margin-bottom: 8px;
5818}
5819.resource-flow-layout.col-16 .resource-card-15x2 {
5820  width: 781px;
5821  height: 95px;
5822}
5823.resource-flow-layout.col-16 .resource-card-15x2x3 {
5824  width: 781px;
5825  height: 90px;
5826  margin-bottom: 7px;
5827}
5828.resource-flow-layout.col-16 .resource-card-15x3 {
5829  width: 781px;
5830  height: 142px;
5831}
5832.resource-flow-layout.col-16 .resource-card-15x3x2 {
5833  width: 781px;
5834  height: 138px;
5835  margin-bottom: 8px;
5836}
5837.resource-flow-layout.col-16 .resource-card-18x2 {
5838  width: 940px;
5839  height: 95px;
5840}
5841.resource-flow-layout.col-16 .resource-card-18x2x3 {
5842  width: 940px;
5843  height: 90px;
5844  margin-bottom: 7px;
5845}
5846.resource-flow-layout.col-16 .resource-card-18x3 {
5847  width: 940px;
5848  height: 142px;
5849}
5850.resource-flow-layout.col-16 .resource-card-18x3x2 {
5851  width: 940px;
5852  height: 138px;
5853  margin-bottom: 8px;
5854}
5855
5856/* Generate the flow layout styles for a 3-column 16-col span */
5857.resource-flow-layout.col-12 {
5858  margin: 0 -14px 0 0;
5859  width: 714px;
5860}
5861
5862.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack {
5863  margin: 0 14px 20px 0;
5864}
5865.resource-flow-layout.col-12 .resource-card-row-stack-last {
5866  margin-bottom: 0px !important;
5867}
5868.resource-flow-layout.col-12 .resource-card-col-stack-last {
5869  margin-bottom: 0px !important;
5870}
5871.resource-flow-layout.col-12 .resource-card-3x6 {
5872  width: 105px;
5873  height: 284px;
5874}
5875.resource-flow-layout.col-12 .resource-card-3x12 {
5876  width: 105px;
5877  height: 588px;
5878}
5879.resource-flow-layout.col-12 .resource-card-3x18 {
5880  width: 105px;
5881  height: 892px;
5882}
5883.resource-flow-layout.col-12 .resource-card-6x6 {
5884  width: 224px;
5885  height: 284px;
5886}
5887.resource-flow-layout.col-12 .resource-card-6x12 {
5888  width: 224px;
5889  height: 588px;
5890}
5891.resource-flow-layout.col-12 .resource-card-6x18 {
5892  width: 224px;
5893  height: 892px;
5894}
5895.resource-flow-layout.col-12 .resource-card-9x6 {
5896  width: 343px;
5897  height: 284px;
5898}
5899.resource-flow-layout.col-12 .resource-card-9x12 {
5900  width: 343px;
5901  height: 588px;
5902}
5903.resource-flow-layout.col-12 .resource-card-9x18 {
5904  width: 343px;
5905  height: 892px;
5906}
5907.resource-flow-layout.col-12 .resource-card-12x6 {
5908  width: 462px;
5909  height: 284px;
5910}
5911.resource-flow-layout.col-12 .resource-card-12x12 {
5912  width: 462px;
5913  height: 588px;
5914}
5915.resource-flow-layout.col-12 .resource-card-12x18 {
5916  width: 462px;
5917  height: 892px;
5918}
5919.resource-flow-layout.col-12 .resource-card-15x6 {
5920  width: 581px;
5921  height: 284px;
5922}
5923.resource-flow-layout.col-12 .resource-card-15x12 {
5924  width: 581px;
5925  height: 588px;
5926}
5927.resource-flow-layout.col-12 .resource-card-15x18 {
5928  width: 581px;
5929  height: 892px;
5930}
5931.resource-flow-layout.col-12 .resource-card-18x6 {
5932  width: 700px;
5933  height: 284px;
5934}
5935.resource-flow-layout.col-12 .resource-card-18x12 {
5936  width: 700px;
5937  height: 420px;
5938}
5939.resource-flow-layout.col-12 .resource-card-18x18 {
5940  width: 700px;
5941  height: 892px;
5942}
5943.resource-flow-layout.col-12 .resource-card-3x2 {
5944  width: 105px;
5945  height: 95px;
5946}
5947.resource-flow-layout.col-12 .resource-card-3x2x3 {
5948  width: 105px;
5949  height: 90px;
5950  margin-bottom: 7px;
5951}
5952.resource-flow-layout.col-12 .resource-card-3x3 {
5953  width: 105px;
5954  height: 142px;
5955}
5956.resource-flow-layout.col-12 .resource-card-3x3x2 {
5957  width: 105px;
5958  height: 138px;
5959  margin-bottom: 8px;
5960}
5961.resource-flow-layout.col-12 .resource-card-6x2 {
5962  width: 224px;
5963  height: 95px;
5964}
5965.resource-flow-layout.col-12 .resource-card-6x2x3 {
5966  width: 224px;
5967  height: 90px;
5968  margin-bottom: 7px;
5969}
5970.resource-flow-layout.col-12 .resource-card-6x3 {
5971  width: 224px;
5972  height: 142px;
5973}
5974.resource-flow-layout.col-12 .resource-card-6x3x2 {
5975  width: 224px;
5976  height: 138px;
5977  margin-bottom: 8px;
5978}
5979.resource-flow-layout.col-12 .resource-card-9x2 {
5980  width: 343px;
5981  height: 95px;
5982}
5983.resource-flow-layout.col-12 .resource-card-9x2x3 {
5984  width: 343px;
5985  height: 90px;
5986  margin-bottom: 7px;
5987}
5988.resource-flow-layout.col-12 .resource-card-9x3 {
5989  width: 343px;
5990  height: 142px;
5991}
5992.resource-flow-layout.col-12 .resource-card-9x3x2 {
5993  width: 343px;
5994  height: 138px;
5995  margin-bottom: 8px;
5996}
5997.resource-flow-layout.col-12 .resource-card-12x2 {
5998  width: 462px;
5999  height: 95px;
6000}
6001.resource-flow-layout.col-12 .resource-card-12x2x3 {
6002  width: 462px;
6003  height: 90px;
6004  margin-bottom: 7px;
6005}
6006.resource-flow-layout.col-12 .resource-card-12x3 {
6007  width: 462px;
6008  height: 142px;
6009}
6010.resource-flow-layout.col-12 .resource-card-12x3x2 {
6011  width: 462px;
6012  height: 138px;
6013  margin-bottom: 8px;
6014}
6015.resource-flow-layout.col-12 .resource-card-15x2 {
6016  width: 581px;
6017  height: 95px;
6018}
6019.resource-flow-layout.col-12 .resource-card-15x2x3 {
6020  width: 581px;
6021  height: 90px;
6022  margin-bottom: 7px;
6023}
6024.resource-flow-layout.col-12 .resource-card-15x3 {
6025  width: 581px;
6026  height: 142px;
6027}
6028.resource-flow-layout.col-12 .resource-card-15x3x2 {
6029  width: 581px;
6030  height: 138px;
6031  margin-bottom: 8px;
6032}
6033.resource-flow-layout.col-12 .resource-card-18x2 {
6034  width: 700px;
6035  height: 95px;
6036}
6037.resource-flow-layout.col-12 .resource-card-18x2x3 {
6038  width: 700px;
6039  height: 90px;
6040  margin-bottom: 7px;
6041}
6042.resource-flow-layout.col-12 .resource-card-18x3 {
6043  width: 700px;
6044  height: 142px;
6045}
6046.resource-flow-layout.col-12 .resource-card-18x3x2 {
6047  width: 700px;
6048  height: 138px;
6049  margin-bottom: 8px;
6050}
6051
6052/* Generate the flow layout styles for a 3-column 13-col span */
6053
6054.resource-flow-layout.col-13 {
6055  margin: 0 -14px 0 0;
6056  width: 774px;
6057}
6058.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack {
6059  margin: 0 14px 20px 0;
6060}
6061.resource-flow-layout.col-13 .resource-card-row-stack-last {
6062  margin-bottom: 0px !important;
6063}
6064.resource-flow-layout.col-13 .resource-card-col-stack-last {
6065  margin-bottom: 0px !important;
6066}
6067.resource-flow-layout.col-13 .resource-card-3x6 {
6068  width: 115px;
6069  height: 284px;
6070}
6071.resource-flow-layout.col-13 .resource-card-3x12 {
6072  width: 115px;
6073  height: 588px;
6074}
6075.resource-flow-layout.col-13 .resource-card-3x18 {
6076  width: 115px;
6077  height: 892px;
6078}
6079.resource-flow-layout.col-13 .resource-card-6x6 {
6080  width: 244px;
6081  height: 284px;
6082}
6083.resource-flow-layout.col-13 .resource-card-6x12 {
6084  width: 244px;
6085  height: 588px;
6086}
6087.resource-flow-layout.col-13 .resource-card-6x18 {
6088  width: 244px;
6089  height: 892px;
6090}
6091.resource-flow-layout.col-13 .resource-card-9x6 {
6092  width: 373px;
6093  height: 284px;
6094}
6095.resource-flow-layout.col-13 .resource-card-9x12 {
6096  width: 373px;
6097  height: 588px;
6098}
6099.resource-flow-layout.col-13 .resource-card-9x18 {
6100  width: 373px;
6101  height: 892px;
6102}
6103.resource-flow-layout.col-13 .resource-card-12x6 {
6104  width: 502px;
6105  height: 284px;
6106}
6107.resource-flow-layout.col-13 .resource-card-12x12 {
6108  width: 502px;
6109  height: 588px;
6110}
6111.resource-flow-layout.col-13 .resource-card-12x18 {
6112  width: 502px;
6113  height: 892px;
6114}
6115.resource-flow-layout.col-13 .resource-card-15x6 {
6116  width: 631px;
6117  height: 284px;
6118}
6119.resource-flow-layout.col-13 .resource-card-15x12 {
6120  width: 631px;
6121  height: 588px;
6122}
6123.resource-flow-layout.col-13 .resource-card-15x18 {
6124  width: 631px;
6125  height: 892px;
6126}
6127.resource-flow-layout.col-13 .resource-card-18x6 {
6128  width: 760px;
6129  height: 284px;
6130}
6131.resource-flow-layout.col-13 .resource-card-18x12 {
6132  width: 760px;
6133  height: 420px;
6134}
6135.resource-flow-layout.col-13 .resource-card-18x18 {
6136  width: 760px;
6137  height: 892px;
6138}
6139.resource-flow-layout.col-13 .resource-card-3x2 {
6140  width: 115px;
6141  height: 95px;
6142}
6143.resource-flow-layout.col-13 .resource-card-3x2x3 {
6144  width: 115px;
6145  height: 90px;
6146  margin-bottom: 7px;
6147}
6148.resource-flow-layout.col-13 .resource-card-3x3 {
6149  width: 115px;
6150  height: 142px;
6151}
6152.resource-flow-layout.col-13 .resource-card-3x3x2 {
6153  width: 115px;
6154  height: 138px;
6155  margin-bottom: 8px;
6156}
6157.resource-flow-layout.col-13 .resource-card-6x2 {
6158  width: 244px;
6159  height: 95px;
6160}
6161.resource-flow-layout.col-13 .resource-card-6x2x3 {
6162  width: 244px;
6163  height: 90px;
6164  margin-bottom: 7px;
6165}
6166.resource-flow-layout.col-13 .resource-card-6x3 {
6167  width: 244px;
6168  height: 142px;
6169}
6170.resource-flow-layout.col-13 .resource-card-6x3x2 {
6171  width: 244px;
6172  height: 138px;
6173  margin-bottom: 8px;
6174}
6175.resource-flow-layout.col-13 .resource-card-9x2 {
6176  width: 373px;
6177  height: 95px;
6178}
6179.resource-flow-layout.col-13 .resource-card-9x2x3 {
6180  width: 373px;
6181  height: 90px;
6182  margin-bottom: 7px;
6183}
6184.resource-flow-layout.col-13 .resource-card-9x3 {
6185  width: 373px;
6186  height: 142px;
6187}
6188.resource-flow-layout.col-13 .resource-card-9x3x2 {
6189  width: 373px;
6190  height: 138px;
6191  margin-bottom: 8px;
6192}
6193.resource-flow-layout.col-13 .resource-card-12x2 {
6194  width: 502px;
6195  height: 95px;
6196}
6197.resource-flow-layout.col-13 .resource-card-12x2x3 {
6198  width: 502px;
6199  height: 90px;
6200  margin-bottom: 7px;
6201}
6202.resource-flow-layout.col-13 .resource-card-12x3 {
6203  width: 502px;
6204  height: 142px;
6205}
6206.resource-flow-layout.col-13 .resource-card-12x3x2 {
6207  width: 502px;
6208  height: 138px;
6209  margin-bottom: 8px;
6210}
6211.resource-flow-layout.col-13 .resource-card-15x2 {
6212  width: 631px;
6213  height: 95px;
6214}
6215.resource-flow-layout.col-13 .resource-card-15x2x3 {
6216  width: 631px;
6217  height: 90px;
6218  margin-bottom: 7px;
6219}
6220.resource-flow-layout.col-13 .resource-card-15x3 {
6221  width: 631px;
6222  height: 142px;
6223}
6224.resource-flow-layout.col-13 .resource-card-15x3x2 {
6225  width: 631px;
6226  height: 138px;
6227  margin-bottom: 8px;
6228}
6229.resource-flow-layout.col-13 .resource-card-18x2 {
6230  width: 760px;
6231  height: 95px;
6232}
6233.resource-flow-layout.col-13 .resource-card-18x2x3 {
6234  width: 760px;
6235  height: 90px;
6236  margin-bottom: 7px;
6237}
6238.resource-flow-layout.col-13 .resource-card-18x3 {
6239  width: 760px;
6240  height: 142px;
6241}
6242.resource-flow-layout.col-13 .resource-card-18x3x2 {
6243  width: 760px;
6244  height: 138px;
6245  margin-bottom: 8px;
6246}
6247
6248/*
6249  The following are styles for cards in the flowlayout above, styled by the number of rows they span
6250*/
6251/* Single row items, might be simpler to just apply a class */
6252.resource-card-3x6 > .card-bg, .resource-card-6x6 > .card-bg, .resource-card-9x6 > .card-bg, .resource-card-12x6 > .card-bg, .resource-card-15x6 > .card-bg, .resource-card-18x6 > .card-bg {
6253  height: 192px;
6254}
6255.resource-card-3x6 > .card-info, .resource-card-6x6 > .card-info, .resource-card-9x6 > .card-info, .resource-card-12x6 > .card-info, .resource-card-15x6 > .card-info, .resource-card-18x6 > .card-info {
6256  padding: 4px 12px 6px 12px;
6257  top: 192px;
6258}
6259.resource-card-3x6 > .card-info .section, .resource-card-6x6 > .card-info .section, .resource-card-9x6 > .card-info .section, .resource-card-12x6 > .card-info .section, .resource-card-15x6 > .card-info .section, .resource-card-18x6 > .card-info .section {
6260  font-size: 12px;
6261  margin-bottom: 1px;
6262}
6263.resource-card-3x6 > .card-info .title, .resource-card-6x6 > .card-info .title, .resource-card-9x6 > .card-info .title, .resource-card-12x6 > .card-info .title, .resource-card-15x6 > .card-info .title, .resource-card-18x6 > .card-info .title {
6264  font-size: 16px;
6265  margin-bottom: -2px;
6266}
6267.resource-card-3x6 > .card-info .description, .resource-card-6x6 > .card-info .description, .resource-card-9x6 > .card-info .description, .resource-card-12x6 > .card-info .description, .resource-card-15x6 > .card-info .description, .resource-card-18x6 > .card-info .description {
6268  font-size: 13px;
6269  line-height: 15px;
6270}
6271.resource-card-3x6 > .card-info .description .text, .resource-card-6x6 > .card-info .description .text, .resource-card-9x6 > .card-info .description .text, .resource-card-12x6 > .card-info .description .text, .resource-card-15x6 > .card-info .description .text, .resource-card-18x6 > .card-info .description .text {
6272  height: 30px;
6273}
6274
6275/* Double row items */
6276.resource-card-3x12 > .card-bg, .resource-card-6x12 > .card-bg, .resource-card-9x12 > .card-bg, .resource-card-12x12 > .card-bg, .resource-card-15x12 > .card-bg, .resource-card-18x12 > .card-bg {
6277  height: 320px;
6278}
6279.resource-card-3x12 > .card-info, .resource-card-6x12 > .card-info, .resource-card-9x12 > .card-info, .resource-card-12x12 > .card-info, .resource-card-15x12 > .card-info, .resource-card-18x12 > .card-info {
6280  padding: 4px 12px 6px 12px;
6281  top: 320px;
6282}
6283.resource-card-3x12 > .card-info .section, .resource-card-6x12 > .card-info .section, .resource-card-9x12 > .card-info .section, .resource-card-12x12 > .card-info .section, .resource-card-15x12 > .card-info .section, .resource-card-18x12 > .card-info .section {
6284  font-size: 12px;
6285  margin-bottom: 1px;
6286}
6287.resource-card-3x12 > .card-info .title, .resource-card-6x12 > .card-info .title, .resource-card-9x12 > .card-info .title, .resource-card-12x12 > .card-info .title, .resource-card-15x12 > .card-info .title, .resource-card-18x12 > .card-info .title {
6288  font-size: 16px;
6289  margin-bottom: -2px;
6290  white-space: normal;
6291}
6292.resource-card-3x12 > .card-info .description, .resource-card-6x12 > .card-info .description, .resource-card-9x12 > .card-info .description, .resource-card-12x12 > .card-info .description, .resource-card-15x12 > .card-info .description, .resource-card-18x12 > .card-info .description {
6293  font-size: 13px;
6294  line-height: 15px;
6295}
6296
6297/* 1/3 row items */
6298.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 {
6299  left: 0;
6300  top: 0;
6301  width: 90px;
6302  height: 100%;
6303  position: absolute;
6304  display: block;
6305}
6306.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 {
6307  left: 90px;
6308  padding: 4px 12px 4px 12px;
6309  height: 80px;
6310  overflow: hidden;
6311}
6312.resource-card-3x2 > .card-info .section, .resource-card-6x2 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x2 > .card-info .section, .resource-card-12x2 > .card-info .section, .resource-card-15x2 > .card-info .section, .resource-card-18x2 > .card-info .section {
6313  font-size: 12px;
6314  margin-bottom: 1px;
6315  /* display: none; */
6316}
6317.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 {
6318  font-size: 16px;
6319  margin-bottom: -2px;
6320  white-space: normal;
6321  overflow: visible;
6322  text-overflow: ellipsis;
6323}
6324.resource-card-3x2 > .card-info .title:after, .resource-card-6x2 > .card-info .title:after, .resource-card-9x2 > .card-info .title:after, .resource-card-12x2 > .card-info .title:after, .resource-card-15x2 > .card-info .title:after, .resource-card-18x2 > .card-info .title:after {
6325  /* content: url(../images/link-out.png); */
6326  display: block;
6327}
6328.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 {
6329  display: none;
6330}
6331
6332/* 1/2 row items */
6333.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 {
6334  left: 0;
6335  top: 0;
6336  width: 90px;
6337  height: 100%;
6338  position: absolute;
6339  display: block;
6340}
6341.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 {
6342  left: 90px;
6343  padding: 4px 12px 0px 12px;
6344}
6345.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 {
6346  font-size: 12px;
6347  margin-bottom: 1px;
6348  display: none;
6349}
6350.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 {
6351  font-size: 16px;
6352  margin-bottom: -2px;
6353  white-space: normal;
6354  overflow: visible;
6355}
6356.resource-card-3x3 > .card-info .description .text, .resource-card-6x3 > .card-info .description .text, .resource-card-9x3 > .card-info .description .text, .resource-card-12x3 > .card-info .description .text, .resource-card-15x3 > .card-info .description .text, .resource-card-18x3 > .card-info .description .text {
6357  font-size: 12px;
6358  line-height: 15px;
6359  padding-right: 0px !important;
6360  height: 80px;
6361}
6362.resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .util {
6363  display: none;
6364}
6365/* placement of plusone */
6366.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 {
6367  bottom:2px;
6368}
6369.resource-card-18x12 > .card-info .description .util {
6370  bottom:2px;
6371}
6372/* Overrides for col-16 6x6 cards linking to local content on landing pages.
6373   Suppresses "section" and puts the title above a hairline rule. */
6374.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
6375  display:none;
6376}
6377.landing  .card-info .title {
6378  color: #898989;
6379  font-size: 17px;
6380  line-height: 24px;
6381  margin-bottom: 6px;
6382  border-bottom: 1px solid #959595;
6383  padding-bottom: 0px;
6384}
6385.landing .card-info .description {
6386  font-size: 13px;
6387  line-height: 15px;
6388}
6389.landing .card-info .description .text {
6390height:30px;
6391}
6392.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
6393  bottom:2px;
6394}
6395/*
6396  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
6397*/
6398.resource-stack-layout.col-16 {
6399  margin: 0 -14px 0 0;
6400  width: 954px;
6401}
6402.resource-stack-layout.col-16 .resource-card-stack {
6403  margin: 0 14px 0 0;
6404  width: 304px;
6405}
6406
6407/* Example of card menu tinting */
6408.resource-widget[data-section=distribute\/tools] .section-card-menu
6409.card-bg:after {
6410  background: rgba(126, 55, 148, 0.4) !important;
6411}
6412.resource-widget[data-section=distribute\/tools] .section-card-menu
6413.card-section-icon .icon {
6414  background-color: #7e3794 !important;
6415}
6416.resource-widget[data-section=distribute\/tools] .section-card-menu
6417.card-info ul li {
6418  border-top-color: #7e3794 !important;
6419}
6420
6421/* tinting for stacks */
6422
6423div.jd-descr > .resource-widget[data-section=distribute\/tools]
6424.section-card-menu .card-info ul li {
6425  border-top-color: #7e3794 !important;
6426}
6427
6428/**
6429 * UTILITIES
6430 */
6431
6432
6433.border-box {
6434  box-sizing: border-box;
6435}
6436
6437.vertical-center-outer {
6438  display: table;
6439  height: 100%;
6440  width: 100%;
6441}
6442
6443.vertical-center-inner {
6444  display: table-cell;
6445  vertical-align: middle;
6446}
6447
6448/**
6449 * TYPE STYLES
6450 */
6451
6452.landing-h1 {
6453  font-weight: 100;
6454  font-size: 60px;
6455  line-height: 78px;
6456  text-align: center;
6457  letter-spacing: -1px;
6458}
6459
6460.landing-pre-h1 {
6461  font-weight: 400;
6462  font-size: 28px;
6463  color: #93B73F;
6464  line-height: 36px;
6465  text-align: center;
6466  letter-spacing: -1px;
6467  text-transform: uppercase;
6468
6469}
6470
6471.landing-h1.hero {
6472  text-align: left;
6473}
6474
6475.landing-h2 {
6476  font-weight: 300;
6477  font-size: 42px;
6478  line-height: 64px;
6479  text-align: center;
6480}
6481
6482.landing-subhead {
6483  color: #999999;
6484  font-size: 20px;
6485  line-height: 28px;
6486  font-weight:300;
6487  text-align: center;
6488}
6489.landing-subhead.hero {
6490  text-align: left;
6491  color: white;
6492}
6493
6494.landing-hero-description {
6495  text-align: left;
6496  margin: 1em 0;
6497}
6498
6499.landing-hero-description p {
6500  font-weight: 300;
6501  margin: 0;
6502  font-size: 18px;
6503  line-height: 24px;
6504}
6505
6506.landing-body .landing-small {
6507  font-size: 14px;
6508  line-height: 19px;
6509}
6510
6511.landing-body.landing-align-center {
6512  text-align: center;
6513}
6514
6515.landing-align-left {
6516  text-align: left;
6517}
6518
6519/**
6520 * LAYOUT
6521 */
6522
6523#body-content,
6524.fullpage,
6525#jd-content,
6526.jd-descr,
6527.landing-body-content {
6528  height: 100%;
6529}
6530
6531.landing-section {
6532  padding: 80px 10px 80px;
6533  width: 100%;
6534  margin-left: -10px;
6535  text-rendering: optimizeLegibility;
6536}
6537
6538#extending-android-to-wearables {
6539  padding-top: 30px;
6540}
6541
6542.landing-short-section {
6543  padding: 40px 10px 28px;
6544}
6545
6546.landing-gray-background {
6547  background-color: #e9e9e9;
6548}
6549
6550.landing-white-background {
6551  background-color: white;
6552}
6553
6554.landing-red-background {
6555  color: white;
6556  background-color: hsl(8, 70%, 54%);
6557}
6558
6559.landing-subhead-red {
6560  color: hsl(8, 71%, 84%);
6561  text-align: left;
6562}
6563
6564.landing-subhead-red p {
6565  margin-top: 20px;
6566}
6567
6568.landing-hero-container {
6569  height: 100%;
6570}
6571
6572
6573.preview-hero {
6574  height: calc(100% - 110px);
6575  min-height: 504px;
6576  margin-top: -5px;
6577  padding-top: 0;
6578  padding-bottom: 0;
6579  background-image: url(../../preview/images/hero.jpg);
6580  background-size: cover;
6581  background-position: right center;
6582  color: white;
6583  position: relative;
6584  overflow: hidden;
6585}
6586
6587.wear-hero {
6588  height: calc(100% - 110px);
6589  min-height: 504px;
6590  margin-top: -5px;
6591  padding-top: 0;
6592  padding-bottom: 0;
6593  background-image: url(../../wear/images/hero.jpg);
6594  background-size: cover;
6595  background-position: top center;
6596  color: white;
6597  position: relative;
6598  overflow: hidden;
6599}
6600
6601.tv-hero {
6602  height: calc(100% - 110px);
6603  min-height: 504px;
6604  margin-top: -5px;
6605  padding-top: 0;
6606  padding-bottom: 0;
6607  background-image: url(../../tv/images/hero.jpg);
6608  background-size: cover;
6609  background-position: right center;
6610  color: white;
6611  position: relative;
6612  overflow: hidden;
6613}
6614
6615.auto-hero {
6616  height: calc(100% - 110px);
6617  min-height: 504px;
6618  margin-top: -5px;
6619  padding-top: 0;
6620  padding-bottom: 0;
6621  background-image: url(../../auto/images/hero.jpg);
6622  background-size: cover;
6623  background-position: right center;
6624  color: white;
6625  position: relative;
6626  overflow: hidden;
6627}
6628
6629.landing-hero-scrim {
6630  background: black;
6631  opacity: .2;
6632  position: absolute;
6633  width: 100%;
6634  height: 100%;
6635  margin-left: -10px;
6636}
6637
6638.landing-hero-wrap {
6639  margin: 0 auto;
6640  width: 940px;
6641  clear: both;
6642  height: 100%;
6643  position: relative;
6644}
6645
6646.landing-section-header {
6647  margin-bottom: 40px;
6648}
6649
6650.landing-hero-wrap .landing-section-header {
6651  margin-bottom: 16px;
6652}
6653
6654.landing-body {
6655  font-size: 18px;
6656  line-height: 24px;
6657}
6658
6659.landing-button {
6660  white-space: nowrap;
6661  display: inline-block;
6662  padding: 16px 32px;
6663  font-size: 18px;
6664  font-weight: 500;
6665  line-height: 24px;
6666  cursor: pointer;
6667  color: white;
6668  -webkit-user-select: none;
6669     -moz-user-select: none;
6670       -o-user-select: none;
6671  user-select: none;
6672  -webkit-transition: .2s background-color ease-in-out;
6673     -moz-transition: .2s background-color ease-in-out;
6674       -o-transition: .2s background-color ease-in-out;
6675  transition: .2s background-color ease-in-out;
6676}
6677
6678.landing-primary {
6679  background-color: hsl(8, 70%, 54%); /* #dc4b35 */
6680  color: #f8f8f8;
6681}
6682
6683.landing-button.landing-primary:hover {
6684  background-color: hsl(8, 70%, 44%); /* #bf3722 */
6685}
6686
6687.landing-button.landing-primary:active {
6688  background-color: hsl(8, 70%, 36%); /* # */
6689}
6690
6691.landing-button.landing-secondary {
6692  background-color: hsl(8, 70%, 44%);
6693}
6694
6695.landing-button.landing-secondary:hover {
6696  background-color: hsl(8, 70%, 36%);
6697}
6698
6699.landing-button.landing-secondary:active {
6700  background-color: hsl(8, 70%, 30%);
6701}
6702
6703a.landing-button,
6704a.landing-button:hover,
6705a.landing-button:visited {
6706  color: white !important;
6707}
6708
6709.landing-video-link {
6710  white-space: nowrap;
6711  display: inline-block;
6712  padding: 16px 32px 16px 82px;
6713  font-size: 18px;
6714  font-weight: 400;
6715  line-height: 24px;
6716  cursor: pointer;
6717  color: hsla(0, 0%, 100%, .8);
6718  -webkit-user-select: none;
6719     -moz-user-select: none;
6720       -o-user-select: none;
6721  user-select: none;
6722  -webkit-transition: .2s color ease-in-out;
6723     -moz-transition: .2s color ease-in-out;
6724       -o-transition: .2s color ease-in-out;
6725  transition: .2s color ease-in-out;
6726}
6727
6728.landing-video-link:before {
6729  height: 64px;
6730  width: 64px;
6731  display: inline-block;
6732  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=);
6733  background-size: contain;
6734  position: absolute;
6735  content: "";
6736  opacity: .7;
6737  margin-top: -19px;
6738  margin-left: -64px;
6739  -webkit-transition: .2s opacity ease-in-out;
6740     -moz-transition: .2s opacity ease-in-out;
6741       -o-transition: .2s opacity ease-in-out;
6742  transition: .2s opacity ease-in-out;
6743}
6744
6745.landing-video-link:hover {
6746  color: hsla(0, 0%, 100%, 1);
6747}
6748
6749.landing-video-link:hover:before {
6750  opacity: 1;
6751}
6752
6753.landing-social-image {
6754  float: left;
6755  margin-right: 14px;
6756  height: 64px;
6757  width: 64px;
6758}
6759
6760.landing-social-copy {
6761  padding-left: 78px;
6762}
6763
6764.landing-scroll-down-affordance {
6765  position: absolute;
6766  bottom: 0;
6767  width: 100%;
6768  text-align: center;
6769  z-index: 10;
6770}
6771
6772.landing-down-arrow {
6773  padding: 24px;
6774  display: inline-block;
6775  opacity: .5;
6776  -webkit-transition: .2s opacity ease-in-out;
6777     -moz-transition: .2s opacity ease-in-out;
6778       -o-transition: .2s opacity ease-in-out;
6779  transition: .2s opacity ease-in-out;
6780
6781  -webkit-animation-name: pulse-opacity;
6782  -webkit-animation-duration: 4s;
6783}
6784
6785.landing-down-arrow:hover {
6786  opacity: 1;
6787}
6788
6789.landing-down-arrow img {
6790  height: 28px;
6791  width: 28px;
6792  margin: 0 auto;
6793  display: block;
6794}
6795
6796.landing-divider {
6797  display: inline-block;
6798  height: 2px;
6799  background-color: white;
6800  position: relative;
6801  margin: 10px 0;
6802}
6803
6804/* 3 CLOLUMN LAYOUT */
6805
6806.landing-breakout {
6807  margin-top: 40px;
6808  margin-bottom: 40px;
6809}
6810
6811.landing-breakout img {
6812  margin-bottom: 20px;
6813}
6814
6815.landing-partners img {
6816  margin-bottom: 20px;
6817}
6818
6819.landing-breakout p {
6820  padding: 0 23px;
6821}
6822
6823.landing-inset-video-container {
6824  position: relative;
6825}
6826
6827.landing-inset-video-container img.gif {
6828  max-width: 222px;
6829  position: absolute;
6830  top: 40px;
6831  left: 40px;
6832}
6833
6834img.landing-bezel-only {
6835  height:302px;
6836  width:302px;
6837}
6838
6839.landing-breakout.landing-partners img {
6840  margin-bottom: 20px;
6841}
6842
6843.col-3-wide {
6844  display: inline;
6845  float: left;
6846  margin-left: 10px;
6847  margin-right: 10px;
6848}
6849
6850.col-3-wide {
6851  width: 302px;
6852}
6853
6854/**
6855 * ANIMATION
6856 */
6857
6858@-webkit-keyframes pulse-opacity {
6859  0% {
6860    opacity: .5;
6861  }
6862  20% {
6863    opacity: .5;
6864  }
6865  40% {
6866    opacity: 1;
6867  }
6868  60% {
6869    opacity: .5;
6870  }
6871  80% {
6872    opacity: 1;
6873  }
6874  100% {
6875    opacity: .5;
6876  }
6877}
6878
6879
6880
6881/**
6882 * VIDEO
6883 */
6884
6885#video-container {
6886  display:none;
6887  position:fixed;
6888  top:0;
6889  left:-10px;
6890  width:102%;
6891  height:100%;
6892  background-color:rgba(0,0,0,0.7);
6893  z-index:99;
6894}
6895
6896#video-frame {
6897  width:940px;
6898  height:526.4px;
6899  margin:80px auto 0;
6900  display:none;
6901}
6902
6903.video-close {
6904cursor: pointer;
6905position: relative;
6906left: 940px;
6907top: 0;
6908pointer-events: all;
6909}
6910
6911#icon-video-close {
6912background-image: url("../images/close.png");
6913background-position: 0 0;
6914height: 36px;
6915width: 36px;
6916display:block;
6917}
6918
6919
6920
6921
6922/******************
6923Styles for d.a.c/index:
6924*******************/
6925
6926
6927
6928/* Generic full screen carousel styling to be used across pages. */
6929.fullscreen-carousel {
6930  margin: 0 -10px;
6931  width: 100%;
6932  overflow: hidden;
6933  position: relative;
6934}
6935
6936.fullscreen-carousel-content {
6937  width: 100%;
6938  height: 100%;
6939  position: relative;
6940  display: table; /* For vertical centering */
6941}
6942
6943.fullscreen-carousel .vcenter {
6944  display: table-cell;
6945  vertical-align: middle;
6946  position: relative;
6947}
6948
6949.fullscreen-carousel .vcenter > div {
6950  margin: 10px auto;
6951}
6952
6953/* Styles for the full-bleed hero image type. */
6954.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
6955  color: #fff;
6956}
6957
6958.fullscreen-carousel .hero h1 {
6959  font-weight: 300;
6960  font-size: 60px;
6961  line-height: 68px;
6962  letter-spacing: -1px;
6963  margin-top: 0;
6964}
6965
6966.fullscreen-carousel .hero p {
6967  font-weight: 300;
6968  font-size: 18px;
6969  line-height: 24px;
6970  -webkit-font-smoothing: antialiased;
6971}
6972
6973.fullscreen-carousel .hero .hero-bg {
6974  background-size: cover;
6975  width: 100%;
6976  height: 100%;
6977  position: absolute;
6978  left: 0px;
6979  top: 0px;
6980}
6981
6982
6983/* Full screen carousel styling for the resource flow layout type of content */
6984.fullscreen-carousel .resource-flow-layout:after {
6985  height: 0; /* Dont know why this is set at 10 in default.css */
6986}
6987
6988.fullscreen-carousel .resource-flow-layout {
6989  margin-bottom: 20px;
6990}
6991
6992
6993
6994/* Generic Tab carousel styling to be used across multiple pages. */
6995
6996.tab-carousel .tab-nav {
6997  list-style: none;
6998  position: relative;
6999  text-align: center;
7000}
7001
7002.tab-carousel .tab-nav li {
7003  display: inline-block;
7004  font-size: 22px;
7005  font-weight: 400;
7006  line-height: 50px;
7007  list-style: none;
7008  margin: 0;
7009  padding: 0 25px;
7010  position: relative;
7011}
7012
7013.tab-carousel .tab-nav li a,
7014.tab-carousel .tab-nav li a:hover {
7015  color: #333 !important;
7016  padding: 10px 10px 13px 10px;
7017  position: relative;
7018  z-index: 1000;
7019}
7020
7021.tab-carousel .tab-nav li:after {
7022  background: #ddd;
7023  bottom: 0;
7024  content: '';
7025  height: 4px;
7026  left: 0;
7027  position: absolute;
7028  width: 100%;
7029  z-index: 0;
7030}
7031
7032.tab-carousel .tab-nav .highlight {
7033  position: absolute;
7034  height: 4px;
7035  width: 100px;
7036  bottom: 0;
7037  background: #33b5e5;
7038}
7039
7040.tab-carousel .tab-carousel-content {
7041  position: relative;
7042  overflow: hidden;
7043  white-space: nowrap;
7044}
7045
7046.tab-carousel .tab-carousel-content [data-tab] {
7047  display: inline-block;
7048  white-space: normal;
7049}
7050
7051
7052
7053/*
7054  Resource styling for the tab carousel. The tab carousel contains either
7055  a 3 column layout of resources or a single full-width resource. The
7056  latter has the 18x12 class applied to it and can be styled differently
7057  that way.
7058*/
7059
7060.tab-carousel .resource .image {
7061  width: 100%;
7062  height: 250px;
7063  background-repeat: no-repeat;
7064  background-size: contain;
7065  background-position: 50% 50%;
7066}
7067
7068.tab-carousel .resource .info .title {
7069  font-size: 18px;
7070  line-height: 24px;
7071}
7072
7073.tab-carousel .resource .info .summary,
7074.tab-carousel .resource .info .cta {
7075  line-height: 24px;
7076  font-size: 16px;
7077}
7078
7079.tab-carousel .resource-card-18x12 {
7080  position: relative;
7081  padding-left: 450px;
7082  box-sizing: border-box;
7083  display: table-cell;
7084  vertical-align: middle;
7085}
7086
7087.tab-carousel .resource-card-18x12 .image {
7088  position: absolute;
7089  width: 420px;
7090  height: 100%;
7091  left: 0;
7092  top: 0;
7093}
7094
7095.tab-carousel .resource-card-18x12 .info {
7096  display: inline-block;
7097}
7098
7099.tab-carousel .resource-card-18x12 .info .title {
7100  margin-bottom: 26px;
7101}
7102
7103
7104
7105
7106
7107/*
7108   Styles for the entity link used in the actions bar and in the cta of
7109   the resources that appear in the tab carousel.
7110*/
7111.actions-bar a:after,
7112.resource .cta:after {
7113  content: '›';
7114  font-weight: 400;
7115  font-size: 22px;
7116  left: 5px;
7117  line-height: 1;
7118  position: relative;
7119  top: 1px;
7120  transition: left 190ms ease-out;
7121}
7122
7123.actions-bar a:hover:after,
7124.resource .cta:hover:after {
7125  left: 10px;
7126}
7127
7128
7129
7130
7131/*
7132  Styles for the actions bar.
7133*/
7134.actions-bar {
7135  background: #9acd00;
7136  margin: 0 -10px;
7137  margin-top:-20px;
7138  text-align: center;
7139}
7140
7141.actions-bar .actions {
7142  padding: 30px 0 30px;
7143  text-align: justify;
7144  font-size: 0.1px;
7145  line-height: 0.1px;
7146  margin: 0 10px;
7147}
7148
7149.actions-bar .actions:after {
7150  content: '';
7151  width: 100%;
7152  display: inline-block;
7153}
7154
7155.actions-bar .actions > div {
7156  display: inline-block;
7157}
7158
7159.actions-bar a {
7160  font-size: 21px;
7161  line-height: 27px;
7162  color: #fff;
7163  font-weight: 300;
7164  -webkit-font-smoothing: antialiased;
7165}
7166
7167.actions-bar a:after {
7168  top: 0px;
7169  font-size: 22px;
7170}
7171
7172.actions-bar a:hover {
7173  color: #fff !important;
7174}
7175
7176
7177
7178
7179
7180/*
7181  Specific styles for new home page layout of the carousels.
7182*/
7183
7184/* Big blue button */
7185a.home-new-cta-btn,
7186.home-new-carousel-1 .resource-card-18x6 .cta {
7187  white-space: nowrap;
7188  display: inline-block;
7189  padding: 14px 32px;
7190  font-size: 18px;
7191  font-weight: 500;
7192  line-height: 24px;
7193  cursor: pointer;
7194  background: #33b5e6;
7195  border-radius: 4px;
7196  margin-top: 20px;
7197  color: #fff;
7198  transition: 0.2s background-color ease-in-out;
7199}
7200
7201.home-new-carousel-1 .resource-card-18x6 .cta:after {
7202  display: none; /* Hide the entity for this button */
7203}
7204
7205a.home-new-cta-btn:hover,
7206.home-new-carousel-1 .resource-card-18x6 .cta:hover {
7207  color: #fff !important;
7208  background: #2d9fca;
7209}
7210
7211.home-new-carousel-1 .resource-card-18x6 .cta {
7212  position: absolute;
7213  bottom: 20px;
7214  left: 16px;
7215}
7216
7217/* Fullscreen carousel. */
7218.home-new-carousel-1 {
7219  max-height: 700px; /* Set max height so doesn't get too long */
7220  margin-top: 20px;
7221}
7222
7223.home-new-carousel-1 .fullscreen-carousel-content {
7224  min-height: 450px;  /* Set min height for all content */
7225}
7226
7227.home-new-carousel-1 .hero {
7228  background: #000;
7229}
7230
7231.home-new-carousel-1 .hero-bg {
7232  background-image: url(/home-new/images/hero.jpg);
7233  background-position: right center;
7234  opacity: 0.85;
7235}
7236
7237/*
7238  Styling for special top card of full screen layout resource layout.
7239  We need to specifically style the 18x6 card to adjust its size and layout,
7240  since it's not a standard card, not sure if this is unique to the home page
7241  layout or should be namespaced within the fullscreen-carousel container.
7242*/
7243.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
7244  height: 334px;
7245}
7246
7247.home-new-carousel-1 .resource-card-18x6 .card-bg {
7248  width: 636px;
7249  height: 100%;
7250}
7251
7252.home-new-carousel-1 .resource-card-18x6 .card-info {
7253  right: 0px;
7254  left: 636px;
7255  height: 100%;
7256  top: 0px;
7257  padding: 15px 22px;
7258}
7259
7260.home-new-carousel-1 .resource-card-18x6 .card-info .util {
7261  display: none;
7262}
7263
7264.home-new-carousel-1 .resource-card-18x6 .card-info .title {
7265  font-size: 20px;
7266  font-weight: 500;
7267  margin-top: 15px;
7268  margin-bottom: 15px;
7269}
7270
7271.home-new-carousel-1 .resource-card-18x6 .card-info .text {
7272  font-size: 15px;
7273  line-height: 21px;
7274}
7275
7276
7277/* Tabbed carousel. */
7278.home-new-carousel-2 {
7279  margin: 35px auto 100px auto;
7280}
7281
7282.home-new-carousel-2 h1 {
7283  font-size: 47px;
7284  font-weight: 100;
7285  line-height: 54px;
7286  text-align: center;
7287}
7288