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