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