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