default.css revision 3a5cb1bd15b39368cb5a703c815eaf0db95ca9ef 
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:940px;
2778  margin:0 auto;
2779}
2780#butterbar-message {
2781  background-color:#f80;
2782  float:right;
2783  font-size:12px;
2784  font-weight:bold;
2785  padding:0 10px;
2786  border-radius: 0 0 5px 5px;
2787}
2788#butterbar-message a {color:#fff !important}
2789#butterbar-message a:hover {text-decoration:underline;}
2790
2791/* --------------------------------------------------------------------------
2792Misc
2793*/
2794
2795
2796.clearfix:before, .clearfix:after {
2797  content: "";
2798  display: table
2799}
2800.clearfix:after {
2801  clear: both
2802}
2803.clearfix {
2804  *zoom: 1
2805}
2806table.blank th, table.blank td {
2807    border: 0;
2808  background: none
2809}
2810.caption {
2811  margin: 0.5em 0 2em 0;
2812  color: #000;
2813  font-size: 11.5px;
2814}
2815
2816.nolist, .nolist ul, .nolist ol {
2817  list-style:none;
2818  margin-left:0;
2819}
2820#tb .nolist {
2821  margin-left:15px;
2822}
2823
2824dl.xml>dt {
2825  text-transform:uppercase;
2826}
2827dl.xml dl.attr {
2828  margin-top:0;
2829}
2830
2831pre.classic {
2832  background-color:transparent;
2833  border:none;
2834  padding:0;
2835}
2836
2837p.img-caption {
2838  margin: -10px 0 20px;
2839  font-size:13px;
2840  color:#666;
2841}
2842
2843div.figure,
2844div.figure-right {
2845  float:right;
2846  clear:right;
2847  margin:10px 0 0 0;
2848  padding:0 0 0 20px;
2849  /* width must be defined w/ an inline style matching the image width */
2850}
2851
2852div.figure-left {
2853  float:left;
2854  clear:left;
2855  margin:10px 0 0 0;
2856  padding:0 20px 0 0;
2857  /* width must be defined w/ an inline style matching the image width */
2858}
2859
2860img.frame {
2861  border:1px solid #DDD;
2862  padding:4px;
2863}
2864
2865p.table-caption {
2866  margin: 0 0 4px 0;
2867  font-size:13px;
2868  color:#666;
2869}
2870
2871p.code-caption {
2872  margin-bottom: 4px;
2873  font: 12px/1.5 monospace;
2874  color:#666;
2875}
2876
2877div.note,
2878div.caution,
2879div.warning {
2880  margin: 0 0 15px;
2881}
2882
2883p.note, div.note,
2884p.caution, div.caution,
2885p.warning, div.warning {
2886  padding: 0 0 0 10px;
2887  border-left: 4px solid;
2888}
2889
2890p.note, div.note {
2891  border-color: #258AAF;
2892}
2893
2894p.caution, div.caution {
2895  border-color: #FF8800;
2896}
2897
2898p.warning, div.warning {
2899  border-color: #ff4443;
2900}
2901
2902div.note.design {
2903  border-left: 4px solid #33B5E5;
2904}
2905
2906div.note.develop {
2907  border-left: 4px solid #F80;
2908}
2909
2910div.note.distribute {
2911  border-left: 4px solid #9C0;
2912}
2913
2914.note p, .caution p, .warning p {
2915  margin:0 0 5px;
2916}
2917
2918.note p:last-child, .caution p:last-child, .warning p:last-child {
2919  margin-bottom:0;
2920}
2921
2922body.about blockquote {
2923  display:block;
2924  float:right;
2925  width:280px;
2926  font-size:20px;
2927  font-style:italic;
2928  line-height:24px;
2929  color:#33B5E5;
2930  margin:0 0 20px 30px;
2931}
2932
2933div.design-announce p {
2934  margin:0 0 10px;
2935}
2936
2937.expandable {
2938  height:34px;
2939  padding-left:20px;
2940  position:relative;
2941}
2942.expandable:before {
2943  content: '';
2944  background-image: url(../images/styles/disclosure_down.png);
2945  background-repeat:no-repeat;
2946  background-position: -12px -9px;
2947  width: 20px;
2948  height: 20px;
2949  display: inline-block;
2950  position: absolute;
2951  top: 0;
2952  left: 0; }
2953}
2954.expandable.expanded:before {
2955  background-image: url(../images/styles/disclosure_up.png);
2956}
2957
2958/* notice box for cross links between Design/Develop docs */
2959a.notice-developers-video,
2960a.notice-developers,
2961a.notice-designers-video,
2962a.notice-designers {
2963  float:right;
2964  clear:right;
2965  width:238px;
2966  min-height:50px;
2967  margin:0 0 20px 20px;
2968  border:1px solid #ddd;
2969}
2970a.notice-developers-video.wide,
2971a.notice-developers.wide,
2972a.notice-designers-video.wide,
2973a.notice-designers.wide {
2974  width:278px;
2975}
2976a.notice-developers-video div,
2977a.notice-developers div,
2978a.notice-designers-video div,
2979a.notice-designers div {
2980  min-height:40px;
2981  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2982  background-size:40px 40px;
2983  padding:10px 10px 10px 60px;
2984}
2985a.notice-designers div {
2986  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2987  background-size:40px 40px;
2988}
2989a.notice-designers-video div {
2990  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2991  background-size:40px 40px;
2992}
2993a.notice-developers-video div {
2994  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2995  background-size:40px 40px;
2996}
2997a.notice-developers-video:hover,
2998a.notice-developers:hover,
2999a.notice-designers-video:hover,
3000a.notice-designers:hover {
3001  background:#eee;
3002}
3003a.notice-developers-video h3,
3004a.notice-developers h3,
3005a.notice-designers-video h3,
3006a.notice-designers h3 {
3007  font-size:13px;
3008  line-height:18px;
3009  font-weight:bold;
3010  text-transform:uppercase;
3011  color:#000 !important;
3012  margin:0 0 1px;
3013}
3014a.notice-developers-video p,
3015a.notice-developers p,
3016a.notice-designers-video p,
3017a.notice-designers p {
3018  margin:0;
3019  line-height:14px;
3020}
3021a.notice-developers-video.left,
3022a.notice-developers.left,
3023a.notice-designers-video.left,
3024a.notice-designers.left {
3025  margin-left:0;
3026  float:left;
3027}
3028
3029
3030/* hide nested list items; companion to hideNestedLists() */
3031.hide-nested li ol,
3032.hide-nested li ul {
3033  display:none;
3034}
3035
3036a.header-toggle {
3037  display:block;
3038  float:right;
3039  text-transform:uppercase;
3040  font-size:.8em !important;
3041  font-weight:normal;
3042  margin-top:2px;
3043}
3044
3045
3046/* for IDE instruction toggle (Studio/Eclipse/Other) */
3047select.ide {
3048  background: transparent;
3049  border: 1px solid #bbb;
3050  border-left: 0;
3051  border-right: 0;
3052  margin: 10px 0;
3053  padding: 10px 0;
3054  color:#666;
3055}
3056select.ide,
3057select.ide option {
3058  font-family: inherit;
3059  font-size:16px;
3060  font-weight:500;
3061}
3062/* hide all except eclipse by default */
3063.select-ide.studio,
3064.select-ide.other {
3065  display:none;
3066}
3067/* ... unless eclipse also includes one of the others */
3068.select-ide.eclipse.studio,
3069.select-ide.eclipse.other {
3070  display:block;
3071}
3072
3073
3074/* -----------------------------------------------
3075good/bad example containers
3076*/
3077
3078div.example-block {
3079  background-repeat: no-repeat;
3080  background-position:10px 8px;
3081  background-color:#ccc;
3082  padding:4px;
3083  margin:.8em auto 1.5em 2em;
3084  width:260px;
3085  float:right;
3086}
3087/* red container */
3088.example-block.bad {
3089  background-image: url(/images/example-bad.png);
3090  background-color:#f4cccc;
3091}
3092/* green container */
3093.example-block.good {
3094  background-image: url(/images/example-good.png);
3095  background-color:#d9ead3;
3096}
3097/* container heading div */
3098#jd-content .example-block .heading {
3099  font-weight:bold;
3100  margin:6px 0 9px 36px;
3101  padding:6px auto;
3102}
3103/* container image (if any) */
3104#jd-content .example-block img {
3105  margin:0;
3106  padding:0px;
3107}
3108
3109.example-block table {
3110  margin:0;
3111}
3112
3113/* -----------------------------------------------
3114Dialog box for popup messages
3115*/
3116
3117div.dialog {
3118  height:0;
3119  margin:0 auto;
3120}
3121
3122div.dialog>div {
3123  z-index:99;
3124  position:fixed;
3125  margin:70px 0;
3126  width: 391px;
3127  height: 200px;
3128  background: #F7F7F7;
3129-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3130-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3131box-shadow: 0 0 15px rgba(0,0,0,0.5);
3132}
3133/* IE6 can't position fixed */
3134* html div.dialog div { position:absolute; }
3135
3136
3137div#deprecatedSticker {
3138  display:none;
3139  z-index:99;
3140  position:fixed;
3141  right:15px;
3142  top:114px;
3143  margin:0;
3144  padding:1em;
3145  background:#FFF;
3146  border:1px solid #dddd00;
3147  box-shadow:-5px 5px 10px #ccc;
3148  -moz-box-shadow:-5px 5px 10px #ccc;
3149  -webkit-box-shadow:-5px 5px 10px #ccc;
3150}
3151
3152div#naMessage {
3153  display:none;
3154  width:555px;
3155  height:0;
3156  margin:0 auto;
3157}
3158
3159div#naMessage div {
3160  z-index:99;
3161  width:450px;
3162  position:fixed;
3163  margin:50px 0;
3164  padding:4em 4em 3em;
3165  background:#FFF;
3166  border:1px solid #999;
3167  box-shadow:-10px 10px 40px #888;
3168  -moz-box-shadow:-10px 10px 40px #888;
3169  -webkit-box-shadow:-10px 10px 40px #888;
3170}
3171/* IE6 can't position fixed */
3172* html div#naMessage div { position:absolute; }
3173
3174div#naMessage strong {
3175  font-size:1.1em;
3176}
3177
3178
3179/* --------------------------------------------------------------------------
3180Slideshow Controls & Next/Prev
3181*/
3182.slideshow-next, .slideshow-prev {
3183  width: 20px;
3184  height: 36px;
3185  text-indent: -1000em;
3186}
3187.slideshow-container {
3188  margin: 2em 0;
3189}
3190.slideshow-container:before, .slideshow-container:after {
3191  content: "";
3192  display: table;
3193  clear: both;
3194}
3195a.slideshow-next, a.slideshow-next:visited {
3196
3197  float: right;
3198
3199  background: url(../images/arrow-right.png) no-repeat 0 0
3200
3201}
3202
3203a.slideshow-prev, a.slideshow-prev:visited {
3204
3205  float: left;
3206
3207  background: url(../images/arrow-left.png) no-repeat 0 0
3208
3209}
3210
3211.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3212
3213  background-position: 0 -36px
3214
3215}
3216
3217.slideshow-next:active, .slideshow-prev:active {
3218
3219  background-position: 0 -72px
3220
3221}
3222.slideshow-nav {
3223  width: 74px;
3224  margin: 0 auto;
3225}
3226.slideshow-nav a, .slideshow-nav a:visited {
3227  display: inline-block;
3228  width: 12px;
3229  height: 12px;
3230  margin: 0 2px 20px 2px;
3231  background: #ccc;
3232  -webkit-border-radius: 50%;
3233  -moz-border-radius: 50%;
3234  border-radius: 50%;
3235}
3236.slideshow-nav a:hover, .slideshow-nav a:focus {
3237
3238  background: #33B5E5
3239}
3240
3241.slideshow-nav a:active {
3242
3243  background: #1e799a;
3244  background: #ebebeb;
3245  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3246  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3247  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3248}
3249.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3250  background: #33B5E5
3251}
3252/* --------------------------------------------------------------------------
3253Tabs
3254*/
3255ul.tabs {
3256  padding: 0;
3257  margin: 2em 0 0 0;
3258}
3259ul.tabs:before, ul.tabs:after {
3260  content: "";
3261  display: table;
3262  clear: both;
3263}
3264ul.tabs li {
3265  list-style-type: none;
3266  float: left;
3267}
3268ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3269  display: block;
3270  height: 36px;
3271  line-height: 36px;
3272  padding: 0 15px;
3273  margin-right: 2px;
3274  color: #222;
3275  -moz-border-radius-topleft: 2px;
3276  -moz-border-radius-topright: 2px;
3277  -moz-border-radius-bottomright: px;
3278  -moz-border-radius-bottomleft: px;
3279  -webkit-border-radius: 2px 2px px px;
3280  border-radius: 2px 2px px px;
3281  border-top: solid 1px #ebebeb;
3282  border-left: solid 1px #ebebeb;
3283  border-right: solid 1px #ebebeb;
3284  background-color: #fff;
3285    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3286    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3287    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3288    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3289    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3290    background-image: linear-gradient(top, #ffffff, #fafafa);
3291    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3292EndColorStr='#fafafa');
3293}
3294ul.tabs li a:hover {
3295  color: #33B5E5;
3296}
3297ul.tabs li a.selected {
3298  height: 37px;
3299  color: #33B5E5;
3300  background-color: #f7f7f7;
3301  background-image: none;
3302  border-color: #ddd;
3303}
3304.tab-content {
3305  padding: 1.2em;
3306  margin: -1px 0 2em 0;
3307  -webkit-border-radius: 2px;
3308    -moz-border-radius: 2px;
3309    border-radius: 2px;
3310  border: solid 1px #ddd;
3311  background: #f7f7f7;
3312}
3313/* --------------------------------------------------------------------------
3314Feature Boxes
3315*/
3316.feature-box {
3317  width: 291px;
3318  height: 200px;
3319  position: relative;
3320  background: #F7F7F7;
3321}
3322.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3323  z-index: 100;
3324  position: absolute;
3325  background-color: #aaa;
3326}
3327.box-border .top, .box-border .bottom {
3328  width: 291px;
3329  height: 1px;
3330}
3331.dialog .box-border .top,
3332.dialog .box-border .bottom { width:391px; }
3333
3334.box-border .left, .box-border .right {
3335  width: 1px;
3336  height: 8px;
3337}
3338.box-border .top { top: 0; left: 0 }
3339.box-border .top .left { top: 1px; left: 0 }
3340.box-border .top .right { top: 1px; right: 0 }
3341.box-border .bottom .left { top: -8px; left: 0 }
3342.box-border .bottom { top: 200px; left: 0 }
3343.box-border .bottom .right { top: -8px; right: 0 }
3344
3345.feature-box h4,
3346.dialog h4 {
3347    margin: 15px 18px 10px;
3348    padding:0;
3349}
3350
3351.feature-box p,
3352.dialog p {
3353    margin: 10px 18px;
3354    padding:0;
3355}
3356.feature-box .link,
3357.dialog .link {
3358    border-top: 1px solid #dedede;
3359    bottom: 0;
3360    position: absolute;
3361    width: inherit;
3362}
3363.feature-box a, .feature-box h4,
3364.dialog a, .dialog h4 {
3365    -webkit-transition: color .4s ease;
3366    -moz-transition: color .4s ease;
3367    -o-transition: color .4s ease;
3368    transition: color .4s ease;
3369}
3370.feature-box:hover {
3371  cursor: pointer;
3372}
3373.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3374.left, .feature-box:hover .right {
3375  background-color: #33B5E5;
3376}
3377.feature-box:hover h4, .feature-box:hover a {
3378  color: #33B5E5;
3379}
3380/* --------------------------------------------------------------------------
3381Page-Specific Styles
3382*/
3383.colors {
3384  position: relative;
3385  float: left;
3386  width: 92px;
3387  margin: 40px 0 20px;
3388}
3389.colors div {
3390  color: #fff;
3391  font-size: 11.5px;
3392  width: 82px;
3393  height: 82px;
3394  margin-top:-30px;
3395  line-height: 82px;
3396  text-align: center;
3397  border: solid 5px #fff;
3398  -webkit-border-radius: 50%;
3399  -moz-border-radius: 50%;
3400  border-radius: 50%;
3401}
3402
3403
3404
3405
3406
3407
3408
3409
3410
3411
3412
3413
3414
3415
3416/* ########### REFERENCE DOCS ################## */
3417
3418#packages-nav h2,
3419#classes-nav h2 {
3420  font-size:18px;
3421  margin:0;
3422  padding:0 0 0 4px;
3423}
3424
3425#jd-header {
3426  padding: 0 0 12px;
3427  margin: 20px 0 12px;
3428  font-size:12px;
3429  padding-bottom:12px;
3430  border-bottom:solid 1px #ccc;
3431}
3432
3433#jd-header h1 {
3434  margin:0;
3435  padding:0 0 6px 0;
3436}
3437
3438/* not sure if this is needed in the ref docs, disabling for now
3439.jd-descr h2 {
3440  margin:16px 0;
3441}
3442*/
3443
3444/* page-top-right container for reference pages (holds
3445links to summary tables) */
3446#api-info-block {
3447  font-size:12px;
3448  margin:20px 0 0;
3449  padding:0 10px 6px;
3450  font-weight:normal;
3451  float:right;
3452  text-align:right;
3453  color:#999;
3454  max-width:80%;
3455  font-size: 12px;
3456  line-height:14px;
3457}
3458
3459#api-info-block div.api-level {
3460  font-weight:bold;
3461  font-size:inherit;
3462  float:none;
3463  color:#222;
3464  padding:0;
3465  margin:0;
3466}
3467
3468/* inheritance table */
3469.jd-inheritance-table {
3470  border-spacing:0;
3471  margin:0;
3472  padding:0;
3473  font-size:12px;
3474  line-height:14px;
3475  background-color:transparent;
3476}
3477.jd-inheritance-table tr td {
3478  border: none;
3479  margin: 0;
3480  padding: 0;
3481  background-color:transparent;
3482}
3483.jd-inheritance-table .jd-inheritance-space {
3484  font-weight:bold;
3485  width:1em;
3486}
3487.jd-inheritance-table .jd-inheritance-interface-cell {
3488  padding-left: 17px;
3489}
3490
3491
3492
3493.jd-sumtable a {
3494  text-decoration:none;
3495}
3496
3497.jd-sumtable a:hover {
3498  text-decoration:underline;
3499}
3500
3501/* the link inside a sumtable for "Show All/Hide All" */
3502.toggle-all {
3503  display:block;
3504  float:right;
3505  font-weight:normal;
3506  font-size:0.9em;
3507}
3508
3509/* adjustments for in/direct subclasses tables */
3510.jd-sumtable.jd-sumtable-subclasses {
3511  margin: 1em 0 0 0;
3512  max-width:968px;
3513  background-color:transparent;
3514  font-size:13px;
3515}
3516
3517/* extra space between end of method name and open-paren */
3518.sympad {
3519  margin-right: 2px;
3520}
3521
3522/* right alignment for the return type in sumtable */
3523.jd-sumtable .jd-typecol {
3524  text-align:right;
3525}
3526
3527/* adjustments for the expando table-in-table */
3528.jd-sumtable-expando {
3529  margin:.5em 0;
3530  padding:0;
3531}
3532
3533/* a div that holds a short description */
3534.jd-descrdiv {
3535  padding:3px 1em 0 1em;
3536  margin:0;
3537  border:0;
3538}
3539
3540#jd-content img.jd-expando-trigger-img {
3541  padding:0 4px 4px 0;
3542  margin:0;
3543}
3544
3545.jd-sumtable-subclasses div#subclasses-direct,
3546.jd-sumtable-subclasses div#subclasses-indirect {
3547  margin:0 0 0 13px;
3548}
3549
3550
3551
3552/********* MEMBER REF *************/
3553
3554
3555.jd-details {
3556/*  border:1px solid #669999;
3557  padding:4px; */
3558  margin:0 0 1em;
3559}
3560
3561/* API reference: a container for the
3562.tagdata blocks that make up the detailed
3563description */
3564.jd-details-descr {
3565  padding:0;
3566  margin:.5em .25em;
3567}
3568
3569/* API reference: a block containing
3570a detailed description, a params table,
3571seealso list, etc */
3572.jd-tagdata {
3573  margin:.5em 1em;
3574}
3575
3576.jd-tagdata p {
3577  margin:0 0 1em 1em;
3578}
3579
3580/* API reference: adjustments to
3581the detailed description block */
3582.jd-tagdescr {
3583  margin:.25em 0 .75em 0;
3584}
3585
3586.jd-tagdescr ol,
3587.jd-tagdescr ul {
3588  margin:0 2.5em;
3589  padding:0;
3590}
3591
3592.jd-tagdescr table,
3593.jd-tagdescr img {
3594  margin:.25em 1em;
3595}
3596
3597.jd-tagdescr li {
3598margin:0 0 .25em 0;
3599padding:0;
3600}
3601
3602/* API reference: heading marking
3603the details section for constants,
3604attrs, methods, etc. */
3605h4.jd-details-title {
3606  font-size:1.15em;
3607  background-color: #E2E2E2;
3608  margin:1.5em 0 .6em;
3609  padding:3px 95px 3px 3px; /* room for api-level */
3610}
3611body.google h4.jd-details-title {
3612  background-color: #FFF;
3613  padding-top:5px;
3614  border-top: 1px solid #ccc;
3615}
3616body.google table.jd-sumtable th {
3617  background-color: #FFF;
3618  color:#000;
3619}
3620
3621h4.jd-tagtitle {
3622  margin:0;
3623}
3624
3625h4 .normal {
3626  font-weight:normal;
3627}
3628
3629/* API reference: heading for "Parameters", "See Also", etc.,
3630in details sections */
3631h5.jd-tagtitle {
3632  margin:0 0 .25em 0;
3633  font-size:1em;
3634}
3635
3636.jd-tagtable {
3637  margin:0;
3638  background-color:transparent;
3639  width:auto;
3640}
3641
3642.jd-tagtable td,
3643.jd-tagtable th {
3644  border:none;
3645  background-color:#fff;
3646  vertical-align:top;
3647  font-weight:normal;
3648  padding:2px 10px;
3649}
3650
3651.jd-tagtable th {
3652  font-style:italic;
3653}
3654
3655/* Inline api level indicator for methods */
3656div.api-level {
3657  font-size:.8em;
3658  font-weight:normal;
3659  color:#999;
3660  float:right;
3661  padding:0 8px 0;
3662  margin-top:-30px;
3663}
3664
3665table.jd-tagtable td,
3666table.jd-tagtable th {
3667  background-color:transparent;
3668}
3669
3670table.jd-tagtable th {
3671  color:inherit;
3672}
3673
3674
3675
3676
3677
3678
3679
3680
3681
3682
3683
3684
3685
3686
3687
3688
3689
3690
3691
3692
3693
3694
3695
3696/* SEARCH FILTER */
3697
3698.menu-container {
3699  position:relative;
3700}
3701#search_autocomplete {
3702  font-weight:normal;
3703}
3704
3705.search_filtered_wrapper.reference {
3706  width: 193px;
3707  float: right;
3708}
3709.search_filtered_wrapper.docs {
3710  width:875px;
3711  float: left;
3712  position:absolute;
3713  top:26px;
3714  right:66px;
3715}
3716.suggest-card {
3717  position:relative;
3718  width:170px;
3719  min-height:90px;
3720  padding:5px;
3721  border: solid 1px #C5C5C5;
3722  background: white;
3723  top: 15px;
3724  margin-right:-5px;
3725  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3726  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3727  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3728}
3729.suggest-card.reference {
3730  position:absolute;
3731  z-index:999;
3732  min-width:171px; /* +padding and border makes this match input width */
3733  min-height:93px; /* add 3px because this has 1 not 4px top border */
3734  width:auto;
3735  top:41px;
3736  margin:0;
3737}
3738.suggest-card.develop {
3739  z-index:997;
3740  border-top: solid 4px #F80;
3741  float:right;
3742}
3743.suggest-card.design {
3744  z-index:996;
3745  border-top: solid 4px #33b5e5;
3746  float:right;
3747}
3748.suggest-card.distribute {
3749  z-index:995;
3750  border-top: solid 4px #9C0;
3751  float:right;
3752}
3753.child-card {
3754  width:100%;
3755}
3756.suggest-card.dummy {
3757  width:172px;
3758  float:right;
3759  border:0;
3760  background:transparent;
3761  -moz-box-shadow: none;
3762  -webkit-box-shadow: none;
3763  box-shadow: none;
3764}
3765
3766ul.search_filtered {
3767  min-width:100%;
3768  list-style: none;
3769  margin: 0 0 5px;
3770  padding: 0;
3771}
3772.search_filtered .jd-selected {
3773  background:#efefef;
3774  cursor:pointer;
3775}
3776.search_filtered .jd-selected,
3777.search_filtered .jd-selected a {
3778    color:#09C !important;
3779}
3780
3781.no-display {
3782  display: none;
3783}
3784
3785.search_filtered li.jd-autocomplete {
3786  font-size: 0.81em;
3787  border: none;
3788  margin: 0 0 2px;
3789  padding: 0;
3790  line-height:1.5em;
3791}
3792
3793.search_filtered li a {
3794  padding:0 5px;
3795  color:#222 !important;
3796  display:inline-block;
3797  line-height:12px;
3798}
3799
3800.search_filtered li.header {
3801  font-weight:bold;
3802  color:#444;
3803  border: none;
3804  margin: 8px 0 2px;
3805  padding:1px 5px;
3806  line-height:1.5em;
3807}
3808.search_filtered li.header.small {
3809  font-size:0.85em;
3810}
3811
3812.suggest-card.reference
3813.search_filtered li.header {
3814  color:#aaa;
3815  font-size: 0.81em;
3816}
3817
3818.search_filtered li.header:first-child {
3819  margin: 0 0 2px;
3820}
3821
3822.show-item {
3823  display: table-row;
3824}
3825.hide-item {
3826  display: hidden;
3827}
3828
3829
3830
3831
3832
3833/* SEARCH RESULTS */
3834
3835
3836#leftSearchControl .gsc-twiddle {
3837  background-image : none;
3838}
3839
3840#leftSearchControl td, #searchForm td {
3841  border: 0px solid #000;
3842  padding:0;
3843}
3844
3845#leftSearchControl .gsc-resultsHeader .gsc-title {
3846  padding-left : 0px;
3847  font-weight : bold;
3848  font-size : 13px;
3849  color:#006699;
3850  display : none;
3851}
3852
3853#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3854  display : none;
3855}
3856
3857#leftSearchControl .gsc-resultsRoot {
3858  padding-top : 6px;
3859}
3860
3861#leftSearchControl div.gs-visibleUrl-long {
3862  display : block;
3863  color:#006699;
3864}
3865
3866#leftSearchControl .gsc-webResult {
3867  padding:0 0 20px 0;
3868}
3869
3870.gsc-webResult div.gs-visibleUrl-short,
3871table.gsc-branding,
3872.gsc-clear-button {
3873  display : none;
3874}
3875
3876.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3877.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3878#leftSearchControl a,
3879#leftSearchControl a b {
3880  color:#006699;
3881}
3882
3883.gsc-resultsHeader {
3884  display: none;
3885}
3886
3887/* Disable built in search forms */
3888.gsc-control form.gsc-search-box {
3889  display : none;
3890}
3891table.gsc-search-box {
3892  margin:6px 0 0 0;
3893  border-collapse:collapse;
3894}
3895
3896td.gsc-input {
3897  padding:0 2px;
3898  width:100%;
3899  vertical-align:middle;
3900}
3901
3902input.gsc-input {
3903  border:1px solid #BCCDF0;
3904  width:99%;
3905  padding-left:2px;
3906  font-size:.95em;
3907}
3908
3909td.gsc-search-button {
3910  text-align: right;
3911  padding:0;
3912  vertical-align:top;
3913}
3914
3915
3916#searchResults {
3917  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3918(it doesn't) */
3919  height:auto;
3920}
3921
3922#searchResults .gsc-control {
3923  position:relative;
3924  width:auto;
3925  padding:0 0 10px;
3926}
3927
3928#searchResults .gsc-tabsArea {
3929  position:relative;
3930  white-space:nowrap;
3931  float:left;
3932  width:200px;
3933}
3934
3935#searchResults .gsc-above-wrapper-area {
3936  display:none;
3937}
3938
3939#searchResults .gsc-resultsbox-visible {
3940  float:left;
3941  width:720px;
3942  margin-left:20px;
3943}
3944
3945#searchResults .gsc-tabHeader {
3946  padding: 3px 6px;
3947  position:relative;
3948  width:auto;
3949  display:block;
3950}
3951
3952#searchResults h2#searchTitle {
3953  padding:0;
3954  margin:5px 0;
3955  border:none;
3956}
3957
3958#searchResults h2#searchTitle em {
3959  font-style:normal;
3960  color:#33B5E5;
3961}
3962
3963#searchResults .gsc-table-result {
3964  margin:5px 0 10px 0;
3965  background-color:transparent;
3966}
3967#searchResults .gs-web-image-box, .gs-promotion-image-box {
3968  width:120px;
3969}
3970#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3971  max-width:120px;
3972}
3973
3974#searchResults .gsc-table-result .gsc-thumbnail {
3975  padding:0 20px 0 0;
3976}
3977
3978#searchResults td {
3979  background-color:transparent;
3980}
3981
3982#searchResults .gsc-expansionArea {
3983  position:relative;
3984}
3985#searchResults .gsc-tabsArea .gsc-cursor-box {
3986  width:200px;
3987  padding:20px 0 0 1px;
3988}
3989#searchResults .gsc-cursor-page {
3990  display:inline-block;
3991  float:left;
3992  margin:-1px 0 0 -1px;
3993  padding:0;
3994  height:27px;
3995  width:27px;
3996  text-align:center;
3997  line-height:2;
3998}
3999
4000#searchResults .gsc-tabHeader.gsc-tabhInactive,
4001#searchResults .gsc-cursor-page {
4002  text-decoration:none;
4003  color:#258AAF;
4004  border: solid 1px #DADADA;
4005}
4006
4007#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
4008#searchResults .gsc-cursor-page:hover {
4009  border-color: #DBDBDB;
4010  background-color: #F3F3F3;
4011  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
4012  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
4013  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
4014  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
4015  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
4016  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
4017  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
4018EndColorStr='#ececec');
4019  color: #33B5E5;
4020}
4021
4022#searchResults .gsc-tabHeader.gsc-tabhActive,
4023#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
4024#searchResults .gsc-cursor-page.gsc-cursor-current-page,
4025#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
4026  color:#fff;
4027  background-color: #09C;
4028  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
4029  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
4030  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
4031  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
4032  background-image: -o-linear-gradient(top, #2FADDB, #09C);
4033  background-image: linear-gradient(top, #2FADDB, #09C);
4034  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
4035  border: 1px solid #3990AB;
4036  z-index:100;
4037}
4038
4039
4040
4041
4042
4043/************ STICKY NAV BAR ******************/
4044
4045#header-wrapper {
4046  background: #f9f9f9;
4047  margin: 0 -10px 0 -10px;
4048  padding: 31px 10px 0px 10px;
4049  position: relative;
4050}
4051#header-wrapper #nav-x div.wrap {
4052  max-width: 940px;
4053  height: 38px;
4054}
4055#header-wrapper #nav-x ul.nav-x li {
4056  margin-right: 36px !important;
4057  margin-top: 5px;
4058  margin-bottom: 0px;
4059  height: 30px;
4060}
4061#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
4062  color: #669900;
4063  border-bottom: 3px solid #669900;
4064}
4065#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
4066  color: #669900;
4067}
4068#header-wrapper #nav-x > div.wrap ul.nav-x a {
4069  font-size: 14.5px;
4070}
4071#header-wrapper .developer-console-btn {
4072  float: right;
4073  background: #fefefe;
4074  border-radius: 4px;
4075  padding: 8px 14px;
4076  box-shadow: 1px 1px 0px #7a7a7a;
4077  font-size: 14px;
4078  margin-top: -6px;
4079  cursor: pointer;
4080  color: #464646;
4081  margin-right: 20px;
4082}
4083/* not currently used */
4084#header-wrapper .shadow {
4085  width: 1034px;
4086  height: 4px;
4087  position: absolute;
4088  left: 50%;
4089  margin-left: -517px;
4090  bottom: -4px;
4091  background-image: url(../images/header-shadow.png);
4092}
4093
4094#context {
4095  clear: both;
4096  padding-top: 14px;
4097}
4098#context .breadcrumb {
4099  float: left;
4100  margin-bottom: 10px;
4101}
4102#context .util {
4103  float: right;
4104  margin-right: 20px;
4105}
4106
4107.breadcrumb {
4108  list-style: none;
4109  margin: 0;
4110  padding: 0;
4111  position: relative;
4112}
4113.breadcrumb li {
4114  float: left;
4115  padding: 0 20px 0 0;
4116  color: #000;
4117  white-space: nowrap;
4118}
4119.breadcrumb li a {
4120  color: #000;
4121}
4122.breadcrumb li:after {
4123  content: url(../images/breadcrumb.png);
4124  position: relative;
4125  top: 1px;
4126  left: 10px;
4127  width: 5px;
4128  height: 10px;
4129}
4130.breadcrumb li.current {
4131  font-weight: 700;
4132}
4133.breadcrumb li.current:after {
4134  display: none;
4135}
4136
4137/* Sticky Nav overrides */
4138.sticky-menu {
4139  position: fixed;
4140  width: 940px;
4141  height: 0px;
4142  z-index: 51;
4143  top: 12px;
4144}
4145#sticky-header {
4146  display: none;
4147  padding: 0 10px;
4148  position: fixed;
4149  background: #f9f9f9;
4150  top: 0px;
4151  left: 0px;
4152  right: 0px;
4153  height: 45px;
4154  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
4155  border-bottom: 1px solid #a5c43a;
4156  z-index: 50;
4157}
4158#sticky-header.design {
4159  border-bottom: 1px solid #33b5e5;
4160}
4161#sticky-header.develop {
4162  border-bottom: 1px solid #F80;
4163}
4164#sticky-header.distribute {
4165  border-bottom: 1px solid #9C0;
4166}
4167#sticky-header.about {
4168  border-bottom: 1px solid #9933CC;
4169}
4170#sticky-header > div {
4171  overflow: hidden;
4172  *zoom: 1;
4173  width: 940px;
4174  margin: 0 auto;
4175  clear: both;
4176  padding-top: 9px;
4177}
4178#sticky-header > div .logo {
4179  float: left;
4180  width: 26px;
4181  height: 25px;
4182  background: url(../images/dac_logo.png);
4183  background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x);
4184  z-index: 52;
4185  position: relative;
4186}
4187#sticky-header > div .top {
4188  float: left;
4189  width: 38px;
4190  height: 38px;
4191  position: relative;
4192  background: url(../images/styles/gototop.png);
4193  z-index: 52;
4194}
4195#sticky-header > div .breadcrumb {
4196  float: left;
4197  padding: 0 0 0 10px;
4198  border-left: 1px solid #d2d2d2;
4199  line-height: 24px;
4200  font-size: 14px;
4201  position: relative;
4202  top: 0px;
4203  z-index: 52;
4204}
4205
4206
4207}
4208
4209
4210
4211
4212
4213
4214
4215/*********** PREVIOUSLY dac-styles.css ***************/
4216
4217
4218#header {
4219  border-bottom:0;
4220}
4221
4222#header .wrap {
4223  max-width:940px;
4224  height:41px;
4225  border-bottom:1px solid;
4226  border-color: #ccc;
4227  position:relative;
4228}
4229
4230.about #header .wrap {
4231  border-color: #9933CC;
4232}
4233
4234.design #header .wrap {
4235  border-color: #33b5e5;
4236}
4237
4238.develop #header .wrap {
4239  border-color: #F80;
4240}
4241
4242.distribute #header .wrap {
4243  border-color: #9C0;
4244}
4245
4246.logo a {
4247  float:left;
4248}
4249
4250#header .logo {
4251  margin-top: -6px;
4252  margin-left: 0px;
4253  margin-bottom:0px;
4254  width: 160px;
4255  padding-right:10px;
4256}
4257
4258
4259#header-wrap .logo.landing-logo {
4260  width:220px;
4261  margin:0;
4262  padding:0;
4263  margin-bottom:22px;
4264}
4265#header-wrap .logo.landing-logo img {
4266  padding:0 0 0 10px;
4267}
4268
4269.search {
4270  height:25px;
4271  margin-top: -3px;
4272  margin-bottom: 0px;
4273}
4274
4275
4276
4277/* Quicknav */
4278.btn-quicknav {
4279  width:20px;
4280  height:28px;
4281  float:left;
4282  margin-left:6px;
4283  padding-right:10px;
4284  position:relative;
4285  cursor:pointer;
4286  border-right:1px solid #CCC;
4287}
4288
4289.btn-quicknav a {
4290  zoom:1;
4291  position:absolute;
4292  top:13px;
4293  left:5px;
4294  display:block;
4295  text-indent:-9999em;
4296  width:10px;
4297  height:5px;
4298  background:url(../images/quicknav_arrow.png) no-repeat;
4299}
4300
4301.btn-quicknav a.arrow-active {
4302  background-position: 0 -5px;
4303  display:none;
4304}
4305
4306#header-wrap.quicknav a.arrow-inactive {
4307  display:none;
4308}
4309
4310.btn-quicknav.active a.arrow-active {
4311  display:block;
4312}
4313
4314.nav-x li {
4315  display:block;
4316  float:left;
4317  margin-right:45px;
4318  -webkit-transition: all 0.25s linear;
4319      -moz-transition: all 0.25s linear;
4320       -ms-transition: all 0.25s linear;
4321        -o-transition: all 0.25s linear;
4322           transition: all 0.25s linear;
4323}
4324
4325#header-wrap.quicknav .nav-x li {
4326  min-width:160px;
4327  margin-right:20px;
4328}
4329
4330#header-wrap.quicknav li.last {
4331  margin-right:0px;
4332}
4333
4334#quicknav {
4335 float:none;
4336 clear:both;
4337 margin-left:0;
4338 margin-top:-30px;
4339 display:none;
4340 overflow:hidden;
4341}
4342
4343#header-wrap.quicknav #quicknav {
4344
4345}
4346
4347#quicknav ul {
4348  margin:10px 0;
4349  padding:0;
4350}
4351
4352#quicknav ul li.about {
4353  border-top:1px solid #9933CC;
4354}
4355
4356#quicknav ul li.design {
4357  border-top:1px solid #33b5e5;
4358}
4359
4360#quicknav ul li.develop {
4361  border-top:1px solid #FF8800;
4362}
4363
4364#quicknav ul li.distribute {
4365  border-top:1px solid #99cc00;
4366}
4367
4368#quicknav ul li {
4369  display:block;
4370  float:left;
4371  margin:0 20px 0 0;
4372  min-width:140px;
4373}
4374
4375#quicknav ul li.last {
4376  margin-right:0px;
4377}
4378
4379#quicknav ul li ul li {
4380  float:none;
4381}
4382
4383#quicknav ul li ul li a {
4384  color:#222;
4385}
4386
4387#quicknav ul li li ul,
4388#quicknav ul li li ul li {
4389  margin:0;
4390}
4391
4392#quicknav ul li li ul li:before {
4393  content:"\21B3";
4394}
4395
4396#header-wrap {
4397   -webkit-transition: all 0.25s ease-out;
4398      -moz-transition: all 0.25s ease-out;
4399       -ms-transition: all 0.25s ease-out;
4400        -o-transition: all 0.25s ease-out;
4401           transition: all 0.25s ease-out;
4402
4403}
4404
4405#header-wrap.quicknav {
4406  height:196px;
4407
4408}
4409
4410/* SEARCH AND MORE */
4411.search {
4412  position: absolute;
4413  width: 50px;
4414  height:28px;
4415  display: block;
4416  margin-top:-3px;
4417  margin-bottom:7px;
4418  overflow:hidden;
4419  z-index:100;
4420  right:54px;
4421  -webkit-transition: width 0.4s ease;
4422     -moz-transition: width 0.4s ease;
4423       -o-transition: width 0.4s ease;
4424          transition: width 0.4s ease;
4425}
4426
4427.search #search-btn {
4428  width:50px;
4429  height:28px;
4430  background:url(../images/icon_search.png) no-repeat;
4431  float:left;
4432}
4433
4434.search-inner {
4435  width:245px;
4436}
4437
4438.search:hover, .search.active {
4439  width:245px;
4440}
4441
4442.search .bottom, .search .left, .search .right {
4443  position: absolute;
4444  background-color: #a2a2a2
4445}
4446
4447.search .bottom {
4448  width: 214px;
4449  height: 1px;
4450  top: 24px;
4451  left: 0
4452}
4453
4454.search .left, .search .right {
4455  height: 5px;
4456  width: 1px
4457}
4458
4459.search .left {
4460  top: 22px;
4461  left: 56px;
4462  background-color:#CCC;
4463}
4464
4465.search .right {
4466  top: 22px;
4467  left: 238px;
4468  background-color:#CCC;
4469}
4470
4471.search form {
4472  margin-top: 2px;
4473  width: 162px;
4474  float:left;
4475}
4476
4477.search form input {
4478  color: #2f2f2f;
4479  font-size: 0.95em;
4480  width: 178px;
4481  border: none;
4482  margin-left: 6px;
4483  z-index: 1500;
4484  position: relative;
4485  background-color: transparent;
4486  border-bottom:1px solid #CCC;
4487  padding:0 0 0 4px;
4488  outline:none;
4489  height:24px;
4490}
4491
4492.search:hover form input {
4493  border-bottom:1px solid #33B5E5;
4494}
4495
4496.search:hover .bottom, .search:hover .left, .search:hover .right {
4497  background-color: #33b5e5;
4498}
4499
4500.search:hover #search-btn {
4501  background-position: 0 -28px
4502}
4503
4504.search form input:focus {
4505  color: #222;
4506  font-weight: bold
4507}
4508
4509.moremenu {
4510  float: right;
4511  position: relative;
4512  width: 50px;
4513  height:28px;
4514  display: block;
4515  margin-top:-3px;
4516  margin-bottom:7px;
4517  overflow:hidden;
4518  -webkit-transition: width 0.25s ease;
4519     -moz-transition: width 0.25s ease;
4520       -o-transition: width 0.25s ease;
4521          transition: width 0.25s ease;
4522}
4523
4524.moremenu #more-btn {
4525  width:40px;
4526  height:28px;
4527  background:url(../images/icon_more.png) no-repeat;
4528  border-left:1px solid #CCC;
4529  float:left;
4530  cursor:pointer;
4531}
4532
4533.moremenu:hover #more-btn {
4534  background-position:0 -28px;
4535}
4536
4537.morehover {
4538  position:absolute;
4539  right:6px;
4540  top:-9px;
4541  width:40px;
4542  height:35px;
4543  z-index:99;
4544  overflow:hidden;
4545
4546  -webkit-opacity:0;
4547     -moz-opacity:0;
4548       -o-opacity:0;
4549          opacity:0;
4550
4551  -webkit-transform-origin:100% 0%;
4552     -moz-transform-origin:100% 0%;
4553       -o-transform-origin:100% 0%;
4554          transform-origin:100% 0%;
4555
4556  -webkit-transition-property: -webkit-opacity;
4557  -webkit-transition-duration: .25s;
4558  -webkit-transition-timing-function:ease;
4559
4560  -moz-transition-property: -moz-opacity;
4561  -moz-transition-duration: .25s;
4562  -moz-transition-timing-function:ease;
4563
4564  -o-transition-property: -o-opacity;
4565  -o-transition-duration: .25s;
4566  -o-transition-timing-function:ease;
4567
4568  transition-property: opacity;
4569  transition-duration: .25s;
4570  transition-timing-function:ease;
4571}
4572
4573.morehover:hover,
4574.morehover.hover {
4575  opacity:1;
4576  height:385px;
4577  width:268px;
4578  -webkit-transition-property:height,  -webkit-opacity;
4579}
4580
4581.morehover .top {
4582  width:268px;
4583  height:39px;
4584  background:url(../images/more_top.png) no-repeat;
4585}
4586
4587.morehover .mid {
4588  width:228px;
4589  background:url(../images/more_mid.png) repeat-y;
4590  padding:10px 20px 0 20px;
4591}
4592
4593.morehover .mid .header {
4594  border-bottom:1px solid #ccc;
4595  font-weight:bold;
4596}
4597
4598.morehover .bottom {
4599  width:268px;
4600  height:6px;
4601  background:url(../images/more_bottom.png) no-repeat;
4602}
4603
4604.morehover ul {
4605  margin:10px 10px 20px 0;
4606}
4607
4608.morehover ul li {
4609  list-style:none;
4610}
4611
4612.morehover ul li.active a,
4613.morehover ul li.active a:hover {
4614  color:#222 !important;
4615}
4616
4617.morehover ul li.active img {
4618  margin-right:4px;
4619}
4620
4621
4622
4623
4624/* MARQUEE */
4625.slideshow-container {
4626  width:100%;
4627  overflow:hidden;
4628  position:relative;
4629}
4630.slideshow-container .slideshow-prev {
4631  position:absolute;
4632  top:50%;
4633  left:0px;
4634  margin-top:-36px;
4635  z-index:99;
4636}
4637.slideshow-container .slideshow-next {
4638  position:absolute;
4639  top:50%;
4640  margin-top:-36px;
4641  z-index:99;
4642  right:0px;
4643}
4644
4645.slideshow-container .pagination {
4646  position:absolute;
4647  bottom:20px;
4648  width:100%;
4649  text-align:center;
4650  z-index:99;
4651}
4652.slideshow-container .pagination ul {
4653  margin:0;
4654}
4655.slideshow-container .pagination ul li{
4656  display: inline-block;
4657  width:12px;
4658  height:12px;
4659  text-indent:-8000px;
4660  list-style:none;
4661  margin: 0 2px;
4662  border-radius:6px;
4663  background-color:#ccc;
4664  cursor:pointer;
4665        -webkit-transition:color .5s ease-in;
4666        -moz-transition:color .5s ease-in;
4667        -o-transition:color .5s ease-in;
4668        transition:color .5s ease-in;
4669}
4670.slideshow-container .pagination ul li:hover {
4671  background-color:#999;
4672}
4673.slideshow-container .pagination ul li.active {
4674  background-color:#33b5e5;
4675}
4676.slideshow-container .pagination ul li.active:hover {
4677  background-color:#33b5e5;
4678}
4679.slideshow-container ul li {
4680  display:inline;
4681  list-style:none;
4682}
4683
4684
4685#landing h1 {
4686  margin:17px 0 20px 0 !important;
4687}
4688
4689a.download-sdk {
4690    float:right;
4691    margin:-10px 0;
4692    height:30px;
4693    padding-top:4px;
4694    padding-bottom:0px;
4695}
4696
4697#nav-x {
4698  padding-top: 13px;
4699}
4700
4701#nav-x .wrap {
4702  min-height:32px;
4703}
4704
4705#nav-x .wrap,
4706#searchResults.wrap {
4707    max-width:940px;
4708    border-bottom:1px solid #CCC;
4709}
4710
4711#searchResults.wrap #leftSearchControl {
4712  min-height:700px
4713}
4714.nav-x {
4715    margin-left:0;
4716    margin-bottom:0;
4717}
4718
4719
4720
4721
4722
4723
4724
4725
4726
4727
4728/*
4729 * CSS Styles that are needed by jScrollPane for it to operate correctly.
4730 */
4731
4732.jspContainer {
4733  overflow: hidden;
4734  position: relative;
4735}
4736
4737.jspPane {
4738  position: absolute;
4739  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4740}
4741
4742.jspVerticalBar {
4743  position: absolute;
4744  top: 0;
4745  right: 0;
4746  width: 4px;
4747  height: 100%;
4748  background: #f5f5f5;
4749}
4750
4751.jspHorizontalBar {
4752  position: absolute;
4753  bottom: 0;
4754  left: 0;
4755  width: 100%;
4756  height: 4px;
4757  background: #f5f5f5;
4758}
4759
4760.jspVerticalBar *,
4761.jspHorizontalBar * {
4762  margin: 0;
4763  padding: 0;
4764}
4765.jspCap {
4766  display: block;
4767}
4768
4769.jspVerticalBar .jspCap {
4770  height: 4px;
4771}
4772
4773.jspHorizontalBar .jspCap {
4774  width: 0;
4775  height: 100%;
4776}
4777
4778.jspHorizontalBar .jspCap {
4779  float: left;
4780}
4781
4782.jspTrack {
4783  position: relative;
4784}
4785
4786.jspDrag {
4787  background: #bbb;
4788  position: relative;
4789  top: 0;
4790  left: 0;
4791  cursor: pointer;
4792}
4793
4794.jspDrag:hover,
4795.jspDrag:active {
4796  border-color: #09c;
4797  background-color: #4cadcb;
4798  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4799  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4800  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4801  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4802  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4803  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4804  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4805}
4806
4807.jspHorizontalBar .jspTrack,
4808.jspHorizontalBar .jspDrag {
4809  float: left;
4810  height: 100%;
4811}
4812
4813.jspArrow {
4814  background: #999;
4815  text-indent: -20000px;
4816  display: block;
4817  cursor: pointer;
4818}
4819
4820.jspArrow.jspDisabled {
4821  cursor: default;
4822  background: #ccc;
4823}
4824
4825.jspVerticalBar .jspArrow {
4826  height: 16px;
4827}
4828
4829.jspHorizontalBar .jspArrow {
4830  width: 16px;
4831  float: left;
4832  height: 100%;
4833}
4834
4835.jspVerticalBar .jspArrow:focus {
4836  outline: none;
4837}
4838
4839.jspCorner {
4840  float: left;
4841  height: 100%;
4842}
4843
4844/* Yuk! CSS Hack for IE6 3 pixel bug :( */
4845* html .jspCorner {
4846  margin: 0 -3px 0 0;
4847}
4848/******* end of jscrollpane *********/
4849
4850
4851
4852
4853
4854/************ DEVELOP HOMEPAGE ******************/
4855
4856/* Slideshow */
4857.slideshow-develop {
4858  height: 316px;
4859  width: 940px;
4860  position: relative;
4861  overflow:hidden;
4862}
4863.slideshow-develop .frame {
4864  width: 940px;
4865  height: 316px;
4866}
4867.slideshow-develop img.play {
4868  max-width:350px;
4869  max-height:240px;
4870  margin:20px 0 0 90px;
4871  -webkit-transform: perspective(800px ) rotateY( 35deg );
4872  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4873  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4874  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4875}
4876.slideshow-develop img.play.no-shadow {
4877    box-shadow: none;
4878    -moz-box-shadow: none;
4879    -webkit-box-shadow: none;
4880}
4881.slideshow-develop img.play.no-transform {
4882  -webkit-transform: none;
4883}
4884.slideshow-develop a.slideshow-next {
4885  background: url(../images/arrow-right-develop.png);
4886}
4887.slideshow-develop a.slideshow-prev {
4888  background: url(../images/arrow-left-develop.png);
4889}
4890.slideshow-develop .content-right {
4891  float: left;
4892}
4893.slideshow-develop .content-right h2 {
4894  padding:0;
4895  margin-bottom:10px;
4896  border:none;
4897  font-size:24px;
4898}
4899.slideshow-develop .item {
4900  height: 300px;
4901  width: 940px;
4902}
4903.slideshow-develop .pagination ul li.active {
4904  background-color: #F80;
4905}
4906.slideshow-develop .pagination ul li.active:hover {
4907  background-color: #F80;
4908}
4909.slideshow-develop .item hr {
4910  margin:5px 0 10px;
4911}
4912.slideshow-develop .item p {
4913  margin:10px 0;
4914}
4915.slideshow-develop .item p.title-intro {
4916  position:absolute;
4917  margin:0;
4918}
4919
4920/* Feeds */
4921.feed ul {
4922  margin: 0;
4923}
4924.feed .feed-nav {
4925  height: 25px;
4926  border-bottom: 1px solid #CCC;
4927}
4928.feed .feed-nav li {
4929  list-style: none;
4930  float: left;
4931  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4932  margin-right: 25px;
4933  cursor: pointer;
4934}
4935.feed .feed-nav li.active {
4936  color: #000;
4937  border-bottom: 4px solid #F80;
4938}
4939.feed .feed-container {
4940  overflow: hidden;
4941  width: 460px;
4942}
4943.feed .feed-container .feed-frame {
4944  width: 1000px;
4945}
4946.feed .feed-container .feed-frame ul {
4947  float: left;
4948  width:460px;
4949}
4950.feed .feed-container .feed-frame ul ul {
4951  float: none;
4952  margin:10px 0 0 30px;
4953}
4954.feed .feed-container .feed-frame li {
4955  list-style: none;
4956  margin: 20px 0 20px 0;
4957  width: 460px;
4958  height:93px;
4959}
4960.feed .feed-container .feed-frame li.playlist {
4961  height:auto;
4962}
4963.feed .feed-container .feed-frame li.playlist a {
4964  height:93px;
4965  display:block;
4966}
4967.feed .feed-container .feed-frame li.more {
4968  height:20px;
4969  margin:10px 0 5px 5px;
4970}
4971.feed .feed-container .feed-frame li.more a {
4972  height:inherit;
4973}
4974.feed .feed-container .feed-frame li.playlist-video {
4975  list-style: none;
4976  margin: 0;
4977  width: 460px;
4978  height:55px;
4979  font-size:12px;
4980}
4981.feed .feed-container .feed-frame li.playlist-video a {
4982  height:45px;
4983  padding:5px;
4984}
4985.feed .feed-container .feed-frame li.playlist-video h5 {
4986  font-size:12px;
4987  line-height:13px;
4988  margin:0;
4989}
4990.feed .feed-container .feed-frame li.playlist-video p {
4991  margin:5px 0 0;
4992  line-height:15px;
4993}
4994.feed-container .feed-frame div.feed-image {
4995  float: left;
4996  border: 1px solid #999;
4997  margin:0 20px 0 0;
4998  width:122px;
4999  height:92px;
5000  background:url('../images/blog-default.png') no-repeat 0 0;
5001  background-size:180px;
5002}
5003#jd-content .feed .feed-container .feed-frame li img {
5004  float: left;
5005  border: 1px solid #999;
5006  margin:0 20px 0 0;
5007  width:122px;
5008  height:92px;
5009}
5010#jd-content .feed .feed-container .feed-frame li.playlist-video img {
5011  width:inherit;
5012  height:inherit;
5013}
5014
5015.feed .feed-container .feed-frame li a,
5016.feed .feed-container .feed-frame li a:active {
5017  color:#555 !important;
5018}
5019
5020.feed .feed-container .feed-frame li a:hover,
5021.feed .feed-container .feed-frame li a:hover * {
5022  color:#7AA1B0 !important;
5023}
5024
5025/* Video player */
5026#player-wrapper {
5027  display:none;
5028  margin: -1px auto 0;
5029  position: relative;
5030  width: 940px;
5031  height: 0px;
5032}
5033#player-frame {
5034  background: #EFEFEF;
5035  border: 1px solid #CCC;
5036  padding: 0px 207px;
5037  z-index: 10; /* stay above marque, but below search suggestions */
5038  width: 525px;
5039  height: 330px;
5040  position: relative;
5041}
5042
5043
5044
5045/************ DEVELOP TOPIC CONTAINERS ************/
5046
5047.landing-banner,
5048.landing-docs {
5049  margin:20px 0;
5050}
5051.landing-banner > div:first-child,
5052.landing-docs > div:first-child,
5053.landing-docs > .col-12 {
5054  margin-left:0;
5055  min-height:280px;
5056}
5057.landing-banner.short > div {
5058  min-height:50px;
5059}
5060.landing-banner > div:last-child,
5061.landing-docs > div:last-child,
5062.landing-docs > .col-12 {
5063  margin-right:0;
5064}
5065
5066.landing-banner > div > *:last-child {
5067  margin-bottom:0;
5068}
5069.landing-banner h1 {
5070  margin-top:16px;
5071  padding-bottom:24px;
5072}
5073.landing-docs,
5074.landing-banner {
5075  clear:both;
5076  overflow:hidden;
5077}
5078.landing-docs h3 {
5079  font-size:14px;
5080  line-height:21px;
5081  color:#555;
5082  text-transform:uppercase;
5083  border-bottom:1px solid #CCC;
5084  margin:0 0 20px;
5085}
5086.landing-docs a {
5087  color:#333 !important;
5088}
5089
5090.landing-docs a:hover,
5091.landing-docs a:hover * {
5092  color:#7AA1B0 !important
5093}
5094
5095.landing-docs .normal-links a {
5096  color:#258aaf !important;
5097}
5098
5099.plusone {
5100  float:right;
5101}
5102
5103
5104
5105.next-docs {
5106  border-top:1px solid #ccc;
5107  margin:40px 0 0;
5108  padding:5px 0 0;
5109  clear:left;
5110  overflow:hidden;
5111}
5112.next-docs div:first-child {
5113  margin-left:0;
5114}
5115.next-docs div:last-child {
5116  margin-right:0;
5117}
5118
5119.next-docs h2 {
5120  font-size:14px;
5121  line-height:21px;
5122  color:#555;
5123  text-transform:uppercase;
5124  border-bottom:none;
5125  margin:0 0 1em;
5126  padding:5px 0 0;
5127}
5128
5129
5130
5131/************* HOME/LANDING PAGE *****************/
5132
5133.slideshow-home {
5134  height: 500px;
5135  width: 940px;
5136  border-bottom: 1px solid #CCC;
5137  position: relative;
5138  margin: 0;
5139}
5140.slideshow-home .frame {
5141  width: 940px;
5142  height: 500px;
5143}
5144.slideshow-home .content-left {
5145  float: left;
5146  text-align: center;
5147  vertical-align: center;
5148  margin: 0 0 0 35px;
5149}
5150.slideshow-home .content-right {
5151  margin: 80px 0 0 0;
5152}
5153.slideshow-home .content-right p {
5154  margin-bottom: 10px;
5155}
5156.slideshow-home .content-right p:last-child {
5157  margin-top: 15px;
5158}
5159.slideshow-home .content-right h1 {
5160  padding:0;
5161}
5162.slideshow-home .item {
5163  height: 500px;
5164  width: 940px;
5165}
5166.home-sections {
5167  padding: 30px 20px 20px;
5168  margin: 20px 0;
5169  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
5170}
5171.home-sections ul {
5172  margin: 0;
5173}
5174.home-sections ul li {
5175  float: left;
5176  display: block;
5177  list-style: none;
5178  width: 170px;
5179  height: 35px;
5180  border: 1px solid #ccc;
5181  background: white;
5182  margin-right: 10px;
5183  border-radius: 1px;
5184  -webkit-border-radius: 1px;
5185  -moz-border-radius: 1px;
5186  box-shadow: 1px 1px 5px #EEE;
5187  -webkit-box-shadow: 1px 1px 5px #EEE;
5188  -moz-box-shadow: 1px 1px 5px #EEE;
5189  background: white;
5190}
5191.home-sections ul li:hover {
5192  background: #F9F9F9;
5193  border: 1px solid #CCC;
5194}
5195.home-sections ul li a,
5196.home-sections ul li a:hover {
5197  font-weight: bold;
5198  margin-top: 8px;
5199  line-height: 18px;
5200  float: left;
5201  width: 100%;
5202  text-align: center;
5203  color: #09c !important;
5204}
5205.home-sections ul li a {
5206  font-weight: bold;
5207  margin-top: 8px;
5208  line-height: 18px;
5209  float: left;
5210  width:100%;
5211  text-align:center;
5212}
5213.home-sections ul li img {
5214  float: left;
5215  margin: -8px 0 0 10px;
5216}
5217.home-sections ul li.last {
5218  margin-right: 0px;
5219}
5220.fullpage #footer {
5221  margin-top: -40px;
5222}
5223
5224/************ DISTRIBUTE PAGES ******************/
5225
5226.article-detail #body-content {
5227  padding-top: 10px;
5228}
5229
5230/* A container for grid sets with uppercase h3 and rule */
5231.dynamic-grid h3 {
5232  font-size:14px;
5233  line-height:21px;
5234  color:#555;
5235  text-transform:uppercase;
5236  border-bottom:1px solid #CCC;
5237  padding:8px 0 0 1px;
5238  margin-bottom:14px;
5239  clear:both;
5240}
5241
5242.top-right-float {
5243  float: right;
5244}
5245
5246.clearfloat {
5247  float: none;
5248  clear: both;
5249}
5250
5251.border-img {
5252  border: 1px solid #CCC;
5253}
5254
5255.center-img {
5256  margin: auto;
5257  text-align: center;
5258}
5259.center-img img {
5260  margin-bottom: 15px;
5261}
5262
5263.figure img, .border-img {
5264  margin-bottom: 15px;
5265}
5266
5267/************ RESOURCE CARDS ******************/
5268
5269/* Resource cards, 12, 13, 16-col */
5270
5271/* Basic card-styling with shadow */
5272.resource-card {
5273  border-radius: 1px;
5274  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
5275  background: #fefefe;
5276}
5277
5278/* Styling for background image including tinting and section icons in stacks */
5279.card-bg {
5280  display: block;
5281  position: absolute;
5282  vertical-align: top;
5283  width: 100%;
5284  left: 0;
5285  top: 0;
5286  background-size: cover;
5287  background-repeat: no-repeat;
5288  background-position: center;
5289  background-image: url(../images/resource-card-default-android.jpg);
5290}
5291.card-bg:after {
5292  content: "";
5293  display: block;
5294  height: 100%;
5295  width: 100%;
5296  opacity: 1;
5297  background: rgba(0, 0, 0, 0.2);
5298  -webkit-transition: opacity 0.5s;
5299  -moz-transition: opacity 0.5s;
5300  -o-transition: opacity 0.5s;
5301  transition: opacity 0.5s;
5302}
5303.static .card-bg:after {
5304  display:none;
5305}
5306.card-bg .card-section-icon {
5307  position: absolute;
5308  top: 50%;
5309  width: 100%;
5310  margin-top: -35px;
5311  text-align: center;
5312  padding-top: 65px;
5313  z-index: 100;
5314}
5315.card-bg .card-section-icon .icon {
5316  position: absolute;
5317  left: 50%;
5318  margin-left: -28px;
5319  top: 0px;
5320  width: 56px;
5321  height: 56px;
5322  background-repeat: no-repeat;
5323  background-position: 50% 50%;
5324  background-image: url(../images/stack-icon.png);
5325}
5326.card-bg .card-section-icon .section {
5327  text-transform: uppercase;
5328  color: white;
5329  font-size: 14px;
5330}
5331
5332.card-info {
5333  position: absolute;
5334  -webkit-box-sizing: border-box;
5335  -moz-box-sizing: border-box;
5336  box-sizing: border-box;
5337  top: 0;
5338  right: 0;
5339  bottom: 0;
5340  left: 0;
5341  overflow: hidden;
5342  background: #fefefe;
5343  padding: 4px 12px 6px 12px;
5344}
5345.card-info .section {
5346  text-transform: uppercase;
5347  color: #898989;
5348  font-size: 12px;
5349  margin-bottom: 1px;
5350}
5351.card-info .title {
5352  color: #363636;
5353  white-space: nowrap;
5354  overflow: hidden;
5355  text-overflow: ellipsis;
5356  padding-bottom: 5px;
5357  margin-bottom: -2px;
5358  font-size: 16px;
5359}
5360.card-info .description {
5361  overflow: hidden;
5362}
5363.card-info .description .text {
5364  color: #464646;
5365  font: 13px/15px Roboto Condensed;
5366  overflow: hidden;
5367  width:100%;
5368}
5369.card-info .description .util {
5370  position: absolute;
5371  right: 5px;
5372  bottom: 70px; /*-2px;*/
5373  opacity: 0;
5374  -webkit-transition: opacity 0.5s;
5375  -moz-transition: opacity 0.5s;
5376  -o-transition: opacity 0.5s;
5377  transition: opacity 0.5s;
5378}
5379.card-info.empty-desc .title {
5380  white-space: normal;
5381  overflow: visible;
5382}
5383.card-info.empty-desc .description {
5384  display: none;
5385}
5386/* Truncate card summaries at bounding box and
5387 * and apply ellipsis at lower right */
5388.ellipsis {
5389  overflow: hidden;
5390  float:right;
5391  line-height: 15px;
5392  width:100%;
5393}
5394.resource-card-6x6 .card-info .description .teddddddxt {
5395 float:left;
5396  position:relative;
5397  margin-left:0;
5398}
5399.ellipsis:before {
5400  content:"";
5401  float: left;
5402  width: 5px;
5403  height:100%;
5404}
5405.ellipsis > *:first-child.text {
5406  float: right;
5407  width: 100%  !important;
5408  margin-left: -5px;
5409}
5410.ellipsis:after {
5411  content: "\02026";
5412  height:17px;
5413  padding-bottom:4px;
5414
5415  box-sizing: content-box;
5416  -webkit-box-sizing: content-box;
5417  -moz-box-sizing: content-box;
5418
5419  float: right; position: relative;
5420  top: -16px; left: 100%;
5421  width: 4em; margin-left: -4em;
5422  padding-right: 5px;
5423
5424  background: -webkit-gradient(linear, left top, right top,
5425    from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5426  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5427  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5428  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5429  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5430}
5431.ellipsis:after {
5432  font-style: normal; color: #aaa;
5433  font-size:13px;
5434  text-align: right;
5435}
5436
5437/* Flow Layout */
5438.resource-flow-layout {
5439  display: inline-block;
5440}
5441.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack {
5442  float: left;
5443  position: relative;
5444}
5445.resource-flow-layout .resource-card-stack > .resource-card {
5446  margin-right: 0px !important;
5447}
5448.resource-flow-layout:after {
5449  content: ".";
5450  display: block;
5451  height: 0;
5452  position:relative;
5453  clear: both;
5454  visibility: hidden;
5455}
5456.resource-card:hover {
5457  cursor: pointer;
5458}
5459.static .resource-card:hover {
5460  cursor: auto;
5461}
5462.resource-card:hover .card-bg:after {
5463  opacity: 0;
5464}
5465/* disabled to make way for fade/ellipsis truncation,
5466   and the plusone moves up.
5467.resource-card:hover .card-info .description .text {
5468  padding-right: 70px;
5469} */
5470.resource-card:hover .card-info .description .util {
5471  opacity: 1;
5472}
5473
5474/* Carousel Layout */
5475/* Carousel styles for landing page */
5476.resource-carousel-layout {
5477  margin: 20px 0 20px 0;
5478  position: relative;
5479  overflow: hidden;
5480}
5481.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5482  display: none;
5483}
5484.resource-carousel-layout .pagination {
5485  bottom: 0px;
5486}
5487.resource-carousel-layout .frame li {
5488  position: relative;
5489}
5490.resource-carousel-layout .frame li .card-bg {
5491  height: 300px;
5492}
5493.resource-carousel-layout .frame li .card-info {
5494  padding: 7px 15px 0px 15px;
5495  top: 300px;
5496}
5497.resource-carousel-layout .frame li .card-info .section {
5498  font-size: 13px;
5499  margin-bottom: 7px;
5500}
5501.resource-carousel-layout .frame li .card-info .title {
5502  font-size: 25px;
5503  margin-bottom: 2px;
5504}
5505.resource-carousel-layout .frame li .card-info .description {
5506  font-family: 15px/16px Roboto Condensed, sans-serif;
5507}
5508.resource-carousel-layout .frame li .card-info .description .text {
5509  height: 40px;
5510}
5511.resource-carousel-layout .frame li .card-info .description .util {
5512  bottom:97px;
5513  right:4px;
5514}
5515
5516/* Stack Layout */
5517.resource-stack-layout {
5518  display: inline-block;
5519}
5520.resource-stack-layout .resource-card-stack {
5521  float: left;
5522  position: relative;
5523}
5524.resource-stack-layout .resource-card {
5525  margin-bottom: 20px;
5526  display: block;
5527  position: relative;
5528}
5529.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5530  /*text-transform: uppercase;*/
5531  color: #898989;
5532  font-size: 17px;
5533  line-height: 24px;
5534  margin-bottom: 6px;
5535}
5536.resource-stack-layout .section-card {
5537  height: 284px;
5538}
5539.resource-stack-layout .section-card > .card-bg {
5540  height: 192px;
5541}
5542.resource-stack-layout .section-card > .card-info {
5543  padding: 4px 12px 6px 12px;
5544  top: 192px;
5545}
5546.resource-stack-layout .section-card > .card-info .section {
5547  display: none;
5548}
5549.resource-stack-layout .section-card > .card-info .title {
5550  font-size: 17px;
5551  border-bottom: 1px solid #959595;
5552  padding-bottom: 0px;
5553}
5554.resource-stack-layout .section-card > .card-info .description {
5555  font-size: 13px;
5556  line-height: 15px;
5557}
5558.resource-stack-layout .section-card > .card-info .description .text {
5559  height: 30px;
5560}
5561.resource-stack-layout .related-card {
5562  height: 90px;
5563}
5564.resource-stack-layout .related-card > .card-bg {
5565  left: 0;
5566  top: 0;
5567  width: 90px;
5568  height: 100%;
5569  position: absolute;
5570  display: block;
5571}
5572.resource-stack-layout .related-card > .card-info {
5573  left: 90px;
5574  padding: 4px 12px 4px 12px;
5575}
5576.resource-stack-layout .related-card > .card-info .section {
5577  font-size: 12px;
5578  margin-bottom: 1px;
5579  display: none;
5580}
5581.resource-stack-layout .related-card > .card-info .title {
5582  font-size: 16px;
5583  margin-bottom: -2px;
5584  white-space: normal;
5585  overflow: visible;
5586  text-overflow: ellipsis;
5587}
5588.resource-stack-layout .related-card > .card-info .title:after {
5589  content: url(../images/link-out.png);
5590  display: block;
5591}
5592.resource-stack-layout .related-card > .card-info .description {
5593  display: none;
5594}
5595.resource-stack-layout .section-card-menu {
5596  /* Flexible height */
5597  display: block;
5598  height: auto;
5599  width: auto;
5600}
5601.resource-stack-layout .section-card-menu .card-bg {
5602  height: 155px;
5603  /* Flexible height */
5604  position: relative;
5605  display: inline-block;
5606  vertical-align: top;
5607}
5608.resource-stack-layout .section-card-menu .card-info {
5609  padding: 4px 12px 0px 12px;
5610  /* Flexible height */
5611  position: relative;
5612  left: auto;
5613  top: auto;
5614  right: auto;
5615  bottom: auto;
5616}
5617.resource-stack-layout .section-card-menu .card-info ul {
5618  list-style: none;
5619  margin: 0;
5620}
5621.resource-stack-layout .section-card-menu .card-info ul li {
5622  list-style: none;
5623  margin: 0;
5624  padding: 15px 0;
5625  border-top-width: 1px;
5626  border-top-style: solid;
5627  border-top-color: #959595;
5628}
5629.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 {
5630  color: #363636 !important;
5631}
5632.resource-stack-layout .section-card-menu .card-info ul li:first-child {
5633  border-top: none;
5634}
5635.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5636  opacity: 1;
5637  -webkit-transition: opacity 0.5s;
5638  -moz-transition: opacity 0.5s;
5639  -o-transition: opacity 0.5s;
5640  transition: opacity 0.5s;
5641}
5642.resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5643  max-height: 30px;
5644  opacity: 1;
5645  -webkit-transition: max-height 0.5s, opacity 1s;
5646  -moz-transition: max-height 0.5s, opacity 1s;
5647  -o-transition: max-height 0.5s, opacity 1s;
5648  transition: max-height 0.5s, opacity 1s;
5649}
5650.resource-stack-layout .section-card-menu .card-info .title {
5651  font-size: 16px;
5652  margin-bottom: -2px;
5653  position: relative;
5654}
5655.resource-stack-layout .section-card-menu .card-info .title:after {
5656  background: url(../images/stack-arrow-right.png);
5657  content: '';
5658  opacity: 0;
5659  -webkit-transition: opacity 0.25s;
5660  -moz-transition: opacity 0.25s;
5661  -o-transition: opacity 0.25s;
5662  transition: opacity 0.25s;
5663  position: absolute;
5664  right: 0px;
5665  top: 3px;
5666  width: 10px;
5667  height: 15px;
5668}
5669.resource-stack-layout .section-card-menu .card-info .title.more {
5670  text-transform: uppercase;
5671  color: #898989;
5672  display: inline-block;
5673}
5674.resource-stack-layout .section-card-menu .card-info .title.more:after {
5675  background: url(../images/stack-arrow-right.png);
5676  content: '';
5677  display: block;
5678  position: absolute;
5679  right: -20px;
5680  top: 3px;
5681  width: 10px;
5682  height: 15px;
5683}
5684.resource-stack-layout .section-card-menu .card-info .description {
5685  max-height: 0px;
5686  opacity: 0;
5687  overflow: hidden;
5688  font-size: 13px;
5689  line-height: 15px;
5690  /* Hover off */
5691  -webkit-transition: max-height 0.5s, opacity 0.5s;
5692  -moz-transition: max-height 0.5s, opacity 0.5s;
5693  -o-transition: max-height 0.5s, opacity 0.5s;
5694  transition: max-height 0.5s, opacity 0.5s;
5695}
5696.resource-stack-layout .section-card-menu .card-info .description .text {
5697  height: 30px;
5698}
5699.resource-stack-layout:after {
5700  content: ".";
5701  display: block;
5702  height: 0;
5703  clear: both;
5704  visibility: hidden;
5705}
5706
5707/* Generate the flow layout styles for a 3-column 16-col span */
5708.resource-flow-layout.col-16 {
5709  margin: 0 -14px 0 0;
5710  width: 954px;
5711}
5712.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack {
5713  margin: 0 14px 20px 0;
5714}
5715.resource-flow-layout.col-16 .resource-card-row-stack-last {
5716  margin-bottom: 0px !important;
5717}
5718.resource-flow-layout.col-16 .resource-card-col-stack-last {
5719  margin-bottom: 0px !important;
5720}
5721.resource-flow-layout.col-16 .resource-card-3x6 {
5722  width: 145px;
5723  height: 284px;
5724}
5725.resource-flow-layout.col-16 .resource-card-3x12 {
5726  width: 145px;
5727  height: 588px;
5728}
5729.resource-flow-layout.col-16 .resource-card-3x18 {
5730  width: 145px;
5731  height: 892px;
5732}
5733.resource-flow-layout.col-16 .resource-card-6x6 {
5734  width: 304px;
5735  height: 284px;
5736}
5737.resource-flow-layout.col-16 .resource-card-6x12 {
5738  width: 304px;
5739  height: 588px;
5740}
5741.resource-flow-layout.col-16 .resource-card-6x18 {
5742  width: 304px;
5743  height: 892px;
5744}
5745.resource-flow-layout.col-16 .resource-card-9x6 {
5746  width: 463px;
5747  height: 284px;
5748}
5749.resource-flow-layout.col-16 .resource-card-9x12 {
5750  width: 463px;
5751  height: 588px;
5752}
5753.resource-flow-layout.col-16 .resource-card-9x18 {
5754  width: 463px;
5755  height: 892px;
5756}
5757.resource-flow-layout.col-16 .resource-card-12x6 {
5758  width: 622px;
5759  height: 284px;
5760}
5761.resource-flow-layout.col-16 .resource-card-12x12 {
5762  width: 622px;
5763  height: 588px;
5764}
5765.resource-flow-layout.col-16 .resource-card-12x18 {
5766  width: 622px;
5767  height: 892px;
5768}
5769.resource-flow-layout.col-16 .resource-card-15x6 {
5770  width: 781px;
5771  height: 284px;
5772}
5773.resource-flow-layout.col-16 .resource-card-15x12 {
5774  width: 781px;
5775  height: 588px;
5776}
5777.resource-flow-layout.col-16 .resource-card-15x18 {
5778  width: 781px;
5779  height: 892px;
5780}
5781.resource-flow-layout.col-16 .resource-card-18x6 {
5782  width: 940px;
5783  height: 284px;
5784}
5785.resource-flow-layout.col-16 .resource-card-18x12 {
5786  width: 940px;
5787  height: 420px;
5788}
5789.resource-flow-layout.col-16 .resource-card-18x18 {
5790  width: 940px;
5791  height: 892px;
5792}
5793.resource-flow-layout.col-16 .resource-card-3x2 {
5794  width: 145px;
5795  height: 95px;
5796}
5797.resource-flow-layout.col-16 .resource-card-3x2x3 {
5798  width: 145px;
5799  height: 90px;
5800  margin-bottom: 7px;
5801}
5802.resource-flow-layout.col-16 .resource-card-3x3 {
5803  width: 145px;
5804  height: 142px;
5805}
5806.resource-flow-layout.col-16 .resource-card-3x3x2 {
5807  width: 145px;
5808  height: 138px;
5809  margin-bottom: 8px;
5810}
5811.resource-flow-layout.col-16 .resource-card-6x2 {
5812  width: 304px;
5813  height: 95px;
5814}
5815.resource-flow-layout.col-16 .resource-card-6x2x3 {
5816  width: 304px;
5817  height: 90px;
5818  margin-bottom: 7px;
5819}
5820.resource-flow-layout.col-16 .resource-card-6x3 {
5821  width: 304px;
5822  height: 142px;
5823}
5824.resource-flow-layout.col-16 .resource-card-6x3x2 {
5825  width: 304px;
5826  height: 138px;
5827  margin-bottom: 8px;
5828}
5829.resource-flow-layout.col-16 .resource-card-9x2 {
5830  width: 463px;
5831  height: 95px;
5832}
5833.resource-flow-layout.col-16 .resource-card-9x2x3 {
5834  width: 463px;
5835  height: 90px;
5836  margin-bottom: 7px;
5837}
5838.resource-flow-layout.col-16 .resource-card-9x3 {
5839  width: 463px;
5840  height: 142px;
5841}
5842.resource-flow-layout.col-16 .resource-card-9x3x2 {
5843  width: 463px;
5844  height: 138px;
5845  margin-bottom: 8px;
5846}
5847.resource-flow-layout.col-16 .resource-card-12x2 {
5848  width: 622px;
5849  height: 95px;
5850}
5851.resource-flow-layout.col-16 .resource-card-12x2x3 {
5852  width: 622px;
5853  height: 90px;
5854  margin-bottom: 7px;
5855}
5856.resource-flow-layout.col-16 .resource-card-12x3 {
5857  width: 622px;
5858  height: 142px;
5859}
5860.resource-flow-layout.col-16 .resource-card-12x3x2 {
5861  width: 622px;
5862  height: 138px;
5863  margin-bottom: 8px;
5864}
5865.resource-flow-layout.col-16 .resource-card-15x2 {
5866  width: 781px;
5867  height: 95px;
5868}
5869.resource-flow-layout.col-16 .resource-card-15x2x3 {
5870  width: 781px;
5871  height: 90px;
5872  margin-bottom: 7px;
5873}
5874.resource-flow-layout.col-16 .resource-card-15x3 {
5875  width: 781px;
5876  height: 142px;
5877}
5878.resource-flow-layout.col-16 .resource-card-15x3x2 {
5879  width: 781px;
5880  height: 138px;
5881  margin-bottom: 8px;
5882}
5883.resource-flow-layout.col-16 .resource-card-18x2 {
5884  width: 940px;
5885  height: 95px;
5886}
5887.resource-flow-layout.col-16 .resource-card-18x2x3 {
5888  width: 940px;
5889  height: 90px;
5890  margin-bottom: 7px;
5891}
5892.resource-flow-layout.col-16 .resource-card-18x3 {
5893  width: 940px;
5894  height: 142px;
5895}
5896.resource-flow-layout.col-16 .resource-card-18x3x2 {
5897  width: 940px;
5898  height: 138px;
5899  margin-bottom: 8px;
5900}
5901
5902/* Generate the flow layout styles for a 3-column 16-col span */
5903.resource-flow-layout.col-12 {
5904  margin: 0 -14px 0 0;
5905  width: 714px;
5906}
5907
5908.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack {
5909  margin: 0 14px 20px 0;
5910}
5911.resource-flow-layout.col-12 .resource-card-row-stack-last {
5912  margin-bottom: 0px !important;
5913}
5914.resource-flow-layout.col-12 .resource-card-col-stack-last {
5915  margin-bottom: 0px !important;
5916}
5917.resource-flow-layout.col-12 .resource-card-3x6 {
5918  width: 105px;
5919  height: 284px;
5920}
5921.resource-flow-layout.col-12 .resource-card-3x12 {
5922  width: 105px;
5923  height: 588px;
5924}
5925.resource-flow-layout.col-12 .resource-card-3x18 {
5926  width: 105px;
5927  height: 892px;
5928}
5929.resource-flow-layout.col-12 .resource-card-6x6 {
5930  width: 224px;
5931  height: 284px;
5932}
5933.resource-flow-layout.col-12 .resource-card-6x12 {
5934  width: 224px;
5935  height: 588px;
5936}
5937.resource-flow-layout.col-12 .resource-card-6x18 {
5938  width: 224px;
5939  height: 892px;
5940}
5941.resource-flow-layout.col-12 .resource-card-9x6 {
5942  width: 343px;
5943  height: 284px;
5944}
5945.resource-flow-layout.col-12 .resource-card-9x12 {
5946  width: 343px;
5947  height: 588px;
5948}
5949.resource-flow-layout.col-12 .resource-card-9x18 {
5950  width: 343px;
5951  height: 892px;
5952}
5953.resource-flow-layout.col-12 .resource-card-12x6 {
5954  width: 462px;
5955  height: 284px;
5956}
5957.resource-flow-layout.col-12 .resource-card-12x12 {
5958  width: 462px;
5959  height: 588px;
5960}
5961.resource-flow-layout.col-12 .resource-card-12x18 {
5962  width: 462px;
5963  height: 892px;
5964}
5965.resource-flow-layout.col-12 .resource-card-15x6 {
5966  width: 581px;
5967  height: 284px;
5968}
5969.resource-flow-layout.col-12 .resource-card-15x12 {
5970  width: 581px;
5971  height: 588px;
5972}
5973.resource-flow-layout.col-12 .resource-card-15x18 {
5974  width: 581px;
5975  height: 892px;
5976}
5977.resource-flow-layout.col-12 .resource-card-18x6 {
5978  width: 700px;
5979  height: 284px;
5980}
5981.resource-flow-layout.col-12 .resource-card-18x12 {
5982  width: 700px;
5983  height: 420px;
5984}
5985.resource-flow-layout.col-12 .resource-card-18x18 {
5986  width: 700px;
5987  height: 892px;
5988}
5989.resource-flow-layout.col-12 .resource-card-3x2 {
5990  width: 105px;
5991  height: 95px;
5992}
5993.resource-flow-layout.col-12 .resource-card-3x2x3 {
5994  width: 105px;
5995  height: 90px;
5996  margin-bottom: 7px;
5997}
5998.resource-flow-layout.col-12 .resource-card-3x3 {
5999  width: 105px;
6000  height: 142px;
6001}
6002.resource-flow-layout.col-12 .resource-card-3x3x2 {
6003  width: 105px;
6004  height: 138px;
6005  margin-bottom: 8px;
6006}
6007.resource-flow-layout.col-12 .resource-card-6x2 {
6008  width: 224px;
6009  height: 95px;
6010}
6011.resource-flow-layout.col-12 .resource-card-6x2x3 {
6012  width: 224px;
6013  height: 90px;
6014  margin-bottom: 7px;
6015}
6016.resource-flow-layout.col-12 .resource-card-6x3 {
6017  width: 224px;
6018  height: 142px;
6019}
6020.resource-flow-layout.col-12 .resource-card-6x3x2 {
6021  width: 224px;
6022  height: 138px;
6023  margin-bottom: 8px;
6024}
6025.resource-flow-layout.col-12 .resource-card-9x2 {
6026  width: 343px;
6027  height: 95px;
6028}
6029.resource-flow-layout.col-12 .resource-card-9x2x3 {
6030  width: 343px;
6031  height: 90px;
6032  margin-bottom: 7px;
6033}
6034.resource-flow-layout.col-12 .resource-card-9x3 {
6035  width: 343px;
6036  height: 142px;
6037}
6038.resource-flow-layout.col-12 .resource-card-9x3x2 {
6039  width: 343px;
6040  height: 138px;
6041  margin-bottom: 8px;
6042}
6043.resource-flow-layout.col-12 .resource-card-12x2 {
6044  width: 462px;
6045  height: 95px;
6046}
6047.resource-flow-layout.col-12 .resource-card-12x2x3 {
6048  width: 462px;
6049  height: 90px;
6050  margin-bottom: 7px;
6051}
6052.resource-flow-layout.col-12 .resource-card-12x3 {
6053  width: 462px;
6054  height: 142px;
6055}
6056.resource-flow-layout.col-12 .resource-card-12x3x2 {
6057  width: 462px;
6058  height: 138px;
6059  margin-bottom: 8px;
6060}
6061.resource-flow-layout.col-12 .resource-card-15x2 {
6062  width: 581px;
6063  height: 95px;
6064}
6065.resource-flow-layout.col-12 .resource-card-15x2x3 {
6066  width: 581px;
6067  height: 90px;
6068  margin-bottom: 7px;
6069}
6070.resource-flow-layout.col-12 .resource-card-15x3 {
6071  width: 581px;
6072  height: 142px;
6073}
6074.resource-flow-layout.col-12 .resource-card-15x3x2 {
6075  width: 581px;
6076  height: 138px;
6077  margin-bottom: 8px;
6078}
6079.resource-flow-layout.col-12 .resource-card-18x2 {
6080  width: 700px;
6081  height: 95px;
6082}
6083.resource-flow-layout.col-12 .resource-card-18x2x3 {
6084  width: 700px;
6085  height: 90px;
6086  margin-bottom: 7px;
6087}
6088.resource-flow-layout.col-12 .resource-card-18x3 {
6089  width: 700px;
6090  height: 142px;
6091}
6092.resource-flow-layout.col-12 .resource-card-18x3x2 {
6093  width: 700px;
6094  height: 138px;
6095  margin-bottom: 8px;
6096}
6097
6098/* Generate the flow layout styles for a 3-column 13-col span */
6099
6100.resource-flow-layout.col-13 {
6101  margin: 0 -14px 0 0;
6102  width: 774px;
6103}
6104.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack {
6105  margin: 0 14px 20px 0;
6106}
6107.resource-flow-layout.col-13 .resource-card-row-stack-last {
6108  margin-bottom: 0px !important;
6109}
6110.resource-flow-layout.col-13 .resource-card-col-stack-last {
6111  margin-bottom: 0px !important;
6112}
6113.resource-flow-layout.col-13 .resource-card-3x6 {
6114  width: 115px;
6115  height: 284px;
6116}
6117.resource-flow-layout.col-13 .resource-card-3x12 {
6118  width: 115px;
6119  height: 588px;
6120}
6121.resource-flow-layout.col-13 .resource-card-3x18 {
6122  width: 115px;
6123  height: 892px;
6124}
6125.resource-flow-layout.col-13 .resource-card-6x6 {
6126  width: 244px;
6127  height: 284px;
6128}
6129.resource-flow-layout.col-13 .resource-card-6x12 {
6130  width: 244px;
6131  height: 588px;
6132}
6133.resource-flow-layout.col-13 .resource-card-6x18 {
6134  width: 244px;
6135  height: 892px;
6136}
6137.resource-flow-layout.col-13 .resource-card-9x6 {
6138  width: 373px;
6139  height: 284px;
6140}
6141.resource-flow-layout.col-13 .resource-card-9x12 {
6142  width: 373px;
6143  height: 588px;
6144}
6145.resource-flow-layout.col-13 .resource-card-9x18 {
6146  width: 373px;
6147  height: 892px;
6148}
6149.resource-flow-layout.col-13 .resource-card-12x6 {
6150  width: 502px;
6151  height: 284px;
6152}
6153.resource-flow-layout.col-13 .resource-card-12x12 {
6154  width: 502px;
6155  height: 588px;
6156}
6157.resource-flow-layout.col-13 .resource-card-12x18 {
6158  width: 502px;
6159  height: 892px;
6160}
6161.resource-flow-layout.col-13 .resource-card-15x6 {
6162  width: 631px;
6163  height: 284px;
6164}
6165.resource-flow-layout.col-13 .resource-card-15x12 {
6166  width: 631px;
6167  height: 588px;
6168}
6169.resource-flow-layout.col-13 .resource-card-15x18 {
6170  width: 631px;
6171  height: 892px;
6172}
6173.resource-flow-layout.col-13 .resource-card-18x6 {
6174  width: 760px;
6175  height: 284px;
6176}
6177.resource-flow-layout.col-13 .resource-card-18x12 {
6178  width: 760px;
6179  height: 420px;
6180}
6181.resource-flow-layout.col-13 .resource-card-18x18 {
6182  width: 760px;
6183  height: 892px;
6184}
6185.resource-flow-layout.col-13 .resource-card-3x2 {
6186  width: 115px;
6187  height: 95px;
6188}
6189.resource-flow-layout.col-13 .resource-card-3x2x3 {
6190  width: 115px;
6191  height: 90px;
6192  margin-bottom: 7px;
6193}
6194.resource-flow-layout.col-13 .resource-card-3x3 {
6195  width: 115px;
6196  height: 142px;
6197}
6198.resource-flow-layout.col-13 .resource-card-3x3x2 {
6199  width: 115px;
6200  height: 138px;
6201  margin-bottom: 8px;
6202}
6203.resource-flow-layout.col-13 .resource-card-6x2 {
6204  width: 244px;
6205  height: 95px;
6206}
6207.resource-flow-layout.col-13 .resource-card-6x2x3 {
6208  width: 244px;
6209  height: 90px;
6210  margin-bottom: 7px;
6211}
6212.resource-flow-layout.col-13 .resource-card-6x3 {
6213  width: 244px;
6214  height: 142px;
6215}
6216.resource-flow-layout.col-13 .resource-card-6x3x2 {
6217  width: 244px;
6218  height: 138px;
6219  margin-bottom: 8px;
6220}
6221.resource-flow-layout.col-13 .resource-card-9x2 {
6222  width: 373px;
6223  height: 95px;
6224}
6225.resource-flow-layout.col-13 .resource-card-9x2x3 {
6226  width: 373px;
6227  height: 90px;
6228  margin-bottom: 7px;
6229}
6230.resource-flow-layout.col-13 .resource-card-9x3 {
6231  width: 373px;
6232  height: 142px;
6233}
6234.resource-flow-layout.col-13 .resource-card-9x3x2 {
6235  width: 373px;
6236  height: 138px;
6237  margin-bottom: 8px;
6238}
6239.resource-flow-layout.col-13 .resource-card-12x2 {
6240  width: 502px;
6241  height: 95px;
6242}
6243.resource-flow-layout.col-13 .resource-card-12x2x3 {
6244  width: 502px;
6245  height: 90px;
6246  margin-bottom: 7px;
6247}
6248.resource-flow-layout.col-13 .resource-card-12x3 {
6249  width: 502px;
6250  height: 142px;
6251}
6252.resource-flow-layout.col-13 .resource-card-12x3x2 {
6253  width: 502px;
6254  height: 138px;
6255  margin-bottom: 8px;
6256}
6257.resource-flow-layout.col-13 .resource-card-15x2 {
6258  width: 631px;
6259  height: 95px;
6260}
6261.resource-flow-layout.col-13 .resource-card-15x2x3 {
6262  width: 631px;
6263  height: 90px;
6264  margin-bottom: 7px;
6265}
6266.resource-flow-layout.col-13 .resource-card-15x3 {
6267  width: 631px;
6268  height: 142px;
6269}
6270.resource-flow-layout.col-13 .resource-card-15x3x2 {
6271  width: 631px;
6272  height: 138px;
6273  margin-bottom: 8px;
6274}
6275.resource-flow-layout.col-13 .resource-card-18x2 {
6276  width: 760px;
6277  height: 95px;
6278}
6279.resource-flow-layout.col-13 .resource-card-18x2x3 {
6280  width: 760px;
6281  height: 90px;
6282  margin-bottom: 7px;
6283}
6284.resource-flow-layout.col-13 .resource-card-18x3 {
6285  width: 760px;
6286  height: 142px;
6287}
6288.resource-flow-layout.col-13 .resource-card-18x3x2 {
6289  width: 760px;
6290  height: 138px;
6291  margin-bottom: 8px;
6292}
6293
6294/*
6295  The following are styles for cards in the flowlayout above, styled by the number of rows they span
6296*/
6297/* Single row items, might be simpler to just apply a class */
6298.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 {
6299  height: 192px;
6300}
6301.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 {
6302  padding: 4px 12px 6px 12px;
6303  top: 192px;
6304}
6305.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 {
6306  font-size: 12px;
6307  margin-bottom: 1px;
6308}
6309.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 {
6310  font-size: 16px;
6311  margin-bottom: -2px;
6312}
6313.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 {
6314  font-size: 13px;
6315  line-height: 15px;
6316}
6317.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 {
6318  height: 30px;
6319}
6320
6321/* Double row items */
6322.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 {
6323  height: 320px;
6324}
6325.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 {
6326  padding: 4px 12px 6px 12px;
6327  top: 320px;
6328}
6329.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 {
6330  font-size: 12px;
6331  margin-bottom: 1px;
6332}
6333.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 {
6334  font-size: 16px;
6335  margin-bottom: -2px;
6336  white-space: normal;
6337}
6338.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 {
6339  font-size: 13px;
6340  line-height: 15px;
6341}
6342
6343/* 1/3 row items */
6344.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 {
6345  left: 0;
6346  top: 0;
6347  width: 90px;
6348  height: 100%;
6349  position: absolute;
6350  display: block;
6351}
6352.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 {
6353  left: 90px;
6354  padding: 4px 12px 4px 12px;
6355  height: 80px;
6356  overflow: hidden;
6357}
6358.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 {
6359  font-size: 12px;
6360  margin-bottom: 1px;
6361  /* display: none; */
6362}
6363.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 {
6364  font-size: 16px;
6365  margin-bottom: -2px;
6366  white-space: normal;
6367  overflow: visible;
6368  text-overflow: ellipsis;
6369}
6370.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 {
6371  /* content: url(../images/link-out.png); */
6372  display: block;
6373}
6374.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 {
6375  display: none;
6376}
6377
6378
6379/* Override to show the description instead of the content section */
6380.no-section .resource-card-3x2 > .card-info .section,
6381.no-section .resource-card-6x2 > .card-info .section {
6382  display: none;
6383}
6384.no-section .resource-card-3x2 > .card-info .description,
6385.no-section .resource-card-6x2 > .card-info .description {
6386  display: block;
6387}
6388
6389/* 1/2 row items */
6390.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 {
6391  left: 0;
6392  top: 0;
6393  width: 90px;
6394  height: 100%;
6395  position: absolute;
6396  display: block;
6397}
6398.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 {
6399  left: 90px;
6400  padding: 4px 12px 0px 12px;
6401}
6402.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 {
6403  font-size: 12px;
6404  margin-bottom: 1px;
6405  display: none;
6406}
6407.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 {
6408  font-size: 16px;
6409  margin-bottom: -2px;
6410  white-space: normal;
6411  overflow: visible;
6412}
6413.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 {
6414  font-size: 12px;
6415  line-height: 15px;
6416  padding-right: 0px !important;
6417  height: 80px;
6418}
6419.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 {
6420  display: none;
6421}
6422/* placement of plusone */
6423.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 {
6424  bottom:2px;
6425}
6426.resource-card-18x12 > .card-info .description .util {
6427  bottom:2px;
6428}
6429/* Overrides for col-16 6x6 cards linking to local content on landing pages.
6430   Suppresses "section" and puts the title above a hairline rule. */
6431.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
6432  display:none;
6433}
6434.landing  .card-info .title {
6435  color: #898989;
6436  font-size: 17px;
6437  line-height: 24px;
6438  margin-bottom: 6px;
6439  border-bottom: 1px solid #959595;
6440  padding-bottom: 0px;
6441}
6442.landing .card-info .description {
6443  font-size: 13px;
6444  line-height: 15px;
6445}
6446.landing .card-info .description .text {
6447height:30px;
6448}
6449.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
6450  bottom:2px;
6451}
6452/*
6453  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
6454*/
6455.resource-stack-layout.col-16 {
6456  margin: 0 -14px 0 0;
6457  width: 954px;
6458}
6459.resource-stack-layout.col-16 .resource-card-stack {
6460  margin: 0 14px 0 0;
6461  width: 304px;
6462}
6463
6464/* Example of card menu tinting */
6465.resource-widget[data-section=distribute\/tools] .section-card-menu
6466.card-bg:after {
6467  background: rgba(126, 55, 148, 0.4) !important;
6468}
6469.resource-widget[data-section=distribute\/tools] .section-card-menu
6470.card-section-icon .icon {
6471  background-color: #7e3794 !important;
6472}
6473.resource-widget[data-section=distribute\/tools] .section-card-menu
6474.card-info ul li {
6475  border-top-color: #7e3794 !important;
6476}
6477
6478/* tinting for stacks */
6479
6480div.jd-descr > .resource-widget[data-section=distribute\/tools]
6481.section-card-menu .card-info ul li {
6482  border-top-color: #7e3794 !important;
6483}
6484
6485
6486
6487/**
6488 * UTILITIES
6489 */
6490
6491
6492.border-box {
6493  box-sizing: border-box;
6494}
6495
6496.vertical-center-outer {
6497  display: table;
6498  height: 100%;
6499  width: 100%;
6500}
6501
6502.vertical-center-inner {
6503  display: table-cell;
6504  vertical-align: middle;
6505}
6506
6507/**
6508 * TYPE STYLES
6509 */
6510
6511.landing-h1 {
6512  font-weight: 100;
6513  font-size: 60px;
6514  line-height: 78px;
6515  text-align: center;
6516  letter-spacing: -1px;
6517}
6518
6519.landing-pre-h1 {
6520  font-weight: 400;
6521  font-size: 28px;
6522  color: #93B73F;
6523  line-height: 36px;
6524  text-align: center;
6525  letter-spacing: -1px;
6526  text-transform: uppercase;
6527
6528}
6529
6530.landing-h1.hero {
6531  text-align: left;
6532}
6533
6534.landing-h2 {
6535  font-weight: 300;
6536  font-size: 42px;
6537  line-height: 64px;
6538  text-align: center;
6539}
6540
6541.landing-subhead {
6542  color: #999999;
6543  font-size: 20px;
6544  line-height: 28px;
6545  font-weight:300;
6546  text-align: center;
6547}
6548.landing-subhead.hero {
6549  text-align: left;
6550  color: white;
6551}
6552
6553.landing-hero-description {
6554  text-align: left;
6555  margin: 1em 0;
6556}
6557
6558.landing-hero-description p {
6559  font-weight: 300;
6560  margin: 0;
6561  font-size: 18px;
6562  line-height: 24px;
6563}
6564
6565.landing-body .landing-small {
6566  font-size: 14px;
6567  line-height: 19px;
6568}
6569
6570.landing-body.landing-align-center {
6571  text-align: center;
6572}
6573
6574.landing-align-left {
6575  text-align: left;
6576}
6577
6578/**
6579 * LAYOUT
6580 */
6581
6582#body-content,
6583.fullpage,
6584#jd-content,
6585.jd-descr,
6586.landing-body-content {
6587  height: 100%;
6588}
6589
6590.landing-section {
6591  padding: 80px 10px 80px;
6592  width: 100%;
6593  margin-left: -10px;
6594  text-rendering: optimizeLegibility;
6595}
6596
6597#extending-android-to-wearables {
6598  padding-top: 30px;
6599}
6600
6601.landing-short-section {
6602  padding: 40px 10px 28px;
6603}
6604
6605.landing-gray-background {
6606  background-color: #e9e9e9;
6607}
6608
6609.landing-white-background {
6610  background-color: white;
6611}
6612
6613.landing-red-background {
6614  color: white;
6615  background-color: hsl(8, 70%, 54%);
6616}
6617
6618.landing-subhead-red {
6619  color: hsl(8, 71%, 84%);
6620  text-align: left;
6621}
6622
6623.landing-subhead-red p {
6624  margin-top: 20px;
6625}
6626
6627.landing-hero-container {
6628  height: 100%;
6629}
6630
6631
6632.preview-hero {
6633  height: calc(100% - 110px);
6634  min-height: 504px;
6635  margin-top: -5px;
6636  padding-top: 0;
6637  padding-bottom: 0;
6638  background-image: url(../../preview/images/hero.jpg);
6639  background-size: cover;
6640  background-position: right center;
6641  color: white;
6642  position: relative;
6643  overflow: hidden;
6644}
6645
6646.wear-hero {
6647  height: calc(100% - 110px);
6648  min-height: 504px;
6649  margin-top: -5px;
6650  padding-top: 0;
6651  padding-bottom: 0;
6652  background-image: url(../../wear/images/hero.jpg);
6653  background-size: cover;
6654  background-position: top center;
6655  color: white;
6656  position: relative;
6657  overflow: hidden;
6658}
6659
6660.tv-hero {
6661  height: calc(100% - 110px);
6662  min-height: 504px;
6663  margin-top: -5px;
6664  padding-top: 0;
6665  padding-bottom: 0;
6666  background-image: url(../../tv/images/hero.jpg);
6667  background-size: cover;
6668  background-position: right center;
6669  color: white;
6670  position: relative;
6671  overflow: hidden;
6672}
6673
6674.auto-hero {
6675  height: calc(100% - 110px);
6676  min-height: 504px;
6677  margin-top: -5px;
6678  padding-top: 0;
6679  padding-bottom: 0;
6680  background-image: url(../../auto/images/hero.jpg);
6681  background-size: cover;
6682  background-position: right center;
6683  color: white;
6684  position: relative;
6685  overflow: hidden;
6686}
6687
6688.landing-hero-scrim {
6689  background: black;
6690  opacity: .2;
6691  position: absolute;
6692  width: 100%;
6693  height: 100%;
6694  margin-left: -10px;
6695}
6696
6697.landing-hero-wrap {
6698  margin: 0 auto;
6699  width: 940px;
6700  clear: both;
6701  height: 100%;
6702  position: relative;
6703}
6704
6705.landing-section-header {
6706  margin-bottom: 40px;
6707}
6708
6709.landing-hero-wrap .landing-section-header {
6710  margin-bottom: 16px;
6711}
6712
6713.landing-body {
6714  font-size: 18px;
6715  line-height: 24px;
6716}
6717
6718.landing-button {
6719  white-space: nowrap;
6720  display: inline-block;
6721  padding: 16px 32px;
6722  font-size: 18px;
6723  font-weight: 500;
6724  line-height: 24px;
6725  cursor: pointer;
6726  color: white;
6727  -webkit-user-select: none;
6728     -moz-user-select: none;
6729       -o-user-select: none;
6730  user-select: none;
6731  -webkit-transition: .2s background-color ease-in-out;
6732     -moz-transition: .2s background-color ease-in-out;
6733       -o-transition: .2s background-color ease-in-out;
6734  transition: .2s background-color ease-in-out;
6735}
6736
6737.landing-primary {
6738  background-color: hsl(8, 70%, 44%);
6739  color: #f8f8f8;
6740}
6741
6742.landing-button.landing-primary:hover {
6743  background-color: hsl(8, 70%, 36%);
6744}
6745
6746.landing-button.landing-primary:active {
6747  background-color: hsl(8, 70%, 30%);
6748}
6749
6750.landing-button.landing-secondary {
6751  background-color: #2faddb;
6752}
6753
6754.landing-button.landing-secondary:hover {
6755  background-color: #09c;
6756}
6757
6758.landing-button.landing-secondary:active {
6759  background-color: #3990ab;
6760}
6761
6762a.landing-button,
6763a.landing-button:hover,
6764a.landing-button:visited {
6765  color: white !important;
6766}
6767
6768.landing-video-link {
6769  white-space: nowrap;
6770  display: inline-block;
6771  padding: 16px 32px 16px 82px;
6772  font-size: 18px;
6773  font-weight: 400;
6774  line-height: 24px;
6775  cursor: pointer;
6776  color: hsla(0, 0%, 100%, .8);
6777  -webkit-user-select: none;
6778     -moz-user-select: none;
6779       -o-user-select: none;
6780  user-select: none;
6781  -webkit-transition: .2s color ease-in-out;
6782     -moz-transition: .2s color ease-in-out;
6783       -o-transition: .2s color ease-in-out;
6784  transition: .2s color ease-in-out;
6785}
6786
6787.landing-video-link:before {
6788  height: 64px;
6789  width: 64px;
6790  display: inline-block;
6791  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=);
6792  background-size: contain;
6793  position: absolute;
6794  content: "";
6795  opacity: .7;
6796  margin-top: -19px;
6797  margin-left: -64px;
6798  -webkit-transition: .2s opacity ease-in-out;
6799     -moz-transition: .2s opacity ease-in-out;
6800       -o-transition: .2s opacity ease-in-out;
6801  transition: .2s opacity ease-in-out;
6802}
6803
6804.landing-video-link:hover {
6805  color: hsla(0, 0%, 100%, 1);
6806}
6807
6808.landing-video-link:hover:before {
6809  opacity: 1;
6810}
6811
6812.landing-social-image {
6813  float: left;
6814  margin-right: 14px;
6815  height: 64px;
6816  width: 64px;
6817}
6818
6819.landing-social-copy {
6820  padding-left: 78px;
6821}
6822
6823.landing-scroll-down-affordance {
6824  position: absolute;
6825  bottom: 0;
6826  width: 100%;
6827  text-align: center;
6828  z-index: 10;
6829}
6830
6831.landing-down-arrow {
6832  padding: 24px;
6833  display: inline-block;
6834  opacity: .5;
6835  -webkit-transition: .2s opacity ease-in-out;
6836     -moz-transition: .2s opacity ease-in-out;
6837       -o-transition: .2s opacity ease-in-out;
6838  transition: .2s opacity ease-in-out;
6839
6840  -webkit-animation-name: pulse-opacity;
6841  -webkit-animation-duration: 4s;
6842}
6843
6844.landing-down-arrow:hover {
6845  opacity: 1;
6846}
6847
6848.landing-down-arrow img {
6849  height: 28px;
6850  width: 28px;
6851  margin: 0 auto;
6852  display: block;
6853}
6854
6855.landing-divider {
6856  display: inline-block;
6857  height: 2px;
6858  background-color: white;
6859  position: relative;
6860  margin: 10px 0;
6861}
6862
6863/* 3 CLOLUMN LAYOUT */
6864
6865.landing-breakout {
6866  margin-top: 40px;
6867  margin-bottom: 40px;
6868}
6869
6870.landing-breakout img {
6871  margin-bottom: 20px;
6872}
6873
6874.landing-partners img {
6875  margin-bottom: 20px;
6876}
6877
6878.landing-breakout p {
6879  padding: 0 23px;
6880}
6881
6882.landing-breakout.landing-partners img {
6883  margin-bottom: 20px;
6884}
6885
6886.col-3-wide {
6887  display: inline;
6888  float: left;
6889  margin-left: 10px;
6890  margin-right: 10px;
6891}
6892
6893.col-3-wide {
6894  width: 302px;
6895}
6896
6897/**
6898 * ANIMATION
6899 */
6900
6901@-webkit-keyframes pulse-opacity {
6902  0% {
6903    opacity: .5;
6904  }
6905  20% {
6906    opacity: .5;
6907  }
6908  40% {
6909    opacity: 1;
6910  }
6911  60% {
6912    opacity: .5;
6913  }
6914  80% {
6915    opacity: 1;
6916  }
6917  100% {
6918    opacity: .5;
6919  }
6920}
6921
6922
6923
6924/**
6925 * VIDEO
6926 */
6927
6928#video-container {
6929  display:none;
6930  position:fixed;
6931  top:0;
6932  left:-10px;
6933  width:102%;
6934  height:100%;
6935  background-color:rgba(0,0,0,0.7);
6936  z-index:99;
6937}
6938
6939#video-frame {
6940  width:940px;
6941  height:526.4px;
6942  margin:80px auto 0;
6943  display:none;
6944}
6945
6946.video-close {
6947cursor: pointer;
6948position: relative;
6949left: 940px;
6950top: 0;
6951pointer-events: all;
6952}
6953
6954#icon-video-close {
6955background-image: url("../images/close.png");
6956background-position: 0 0;
6957height: 36px;
6958width: 36px;
6959display:block;
6960}
6961
6962
6963
6964
6965/******************
6966Styles for d.a.c/index:
6967*******************/
6968
6969
6970
6971/* Generic full screen carousel styling to be used across pages. */
6972.fullscreen-carousel {
6973  margin: 0 -10px;
6974  width: 100%;
6975  overflow: hidden;
6976  position: relative;
6977}
6978
6979.fullscreen-carousel-content {
6980  width: 100%;
6981  height: 100%;
6982  position: relative;
6983  display: table; /* For vertical centering */
6984}
6985
6986.fullscreen-carousel .vcenter {
6987  display: table-cell;
6988  vertical-align: middle;
6989  position: relative;
6990}
6991
6992.fullscreen-carousel .vcenter > div {
6993  margin: 10px auto;
6994}
6995
6996/* Styles for the full-bleed hero image type. */
6997.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
6998  color: #fff;
6999}
7000
7001.fullscreen-carousel .hero h1 {
7002  font-weight: 300;
7003  font-size: 60px;
7004  line-height: 68px;
7005  letter-spacing: -1px;
7006  margin-top: 0;
7007}
7008
7009.fullscreen-carousel .hero p {
7010  font-weight: 300;
7011  font-size: 18px;
7012  line-height: 24px;
7013  -webkit-font-smoothing: antialiased;
7014}
7015
7016.fullscreen-carousel .hero .hero-bg {
7017  background-size: cover;
7018  width: 100%;
7019  height: 100%;
7020  position: absolute;
7021  left: 0px;
7022  top: 0px;
7023}
7024
7025
7026/* Full screen carousel styling for the resource flow layout type of content */
7027.fullscreen-carousel .resource-flow-layout:after {
7028  height: 0; /* Dont know why this is set at 10 in default.css */
7029}
7030
7031.fullscreen-carousel .resource-flow-layout {
7032  margin-bottom: 20px;
7033}
7034
7035
7036
7037/* Generic Tab carousel styling to be used across multiple pages. */
7038
7039.tab-carousel .tab-nav {
7040  list-style: none;
7041  position: relative;
7042  text-align: center;
7043}
7044
7045.tab-carousel .tab-nav li {
7046  display: inline-block;
7047  font-size: 22px;
7048  font-weight: 400;
7049  line-height: 50px;
7050  list-style: none;
7051  margin: 0;
7052  padding: 0 25px;
7053  position: relative;
7054}
7055
7056.tab-carousel .tab-nav li a,
7057.tab-carousel .tab-nav li a:hover {
7058  color: #333 !important;
7059  padding: 10px 10px 13px 10px;
7060  position: relative;
7061  z-index: 1000;
7062}
7063
7064.tab-carousel .tab-nav li:after {
7065  background: #ddd;
7066  bottom: 0;
7067  content: '';
7068  height: 4px;
7069  left: 0;
7070  position: absolute;
7071  width: 100%;
7072  z-index: 0;
7073}
7074
7075.tab-carousel .tab-nav .highlight {
7076  position: absolute;
7077  height: 4px;
7078  width: 100px;
7079  bottom: 0;
7080  background: #33b5e5;
7081}
7082
7083.tab-carousel .tab-carousel-content {
7084  position: relative;
7085  overflow: hidden;
7086  white-space: nowrap;
7087}
7088
7089.tab-carousel .tab-carousel-content [data-tab] {
7090  display: inline-block;
7091  white-space: normal;
7092}
7093
7094
7095
7096/*
7097  Resource styling for the tab carousel. The tab carousel contains either
7098  a 3 column layout of resources or a single full-width resource. The
7099  latter has the 18x12 class applied to it and can be styled differently
7100  that way.
7101*/
7102
7103.tab-carousel .resource .image {
7104  width: 100%;
7105  height: 250px;
7106  background-repeat: no-repeat;
7107  background-size: contain;
7108  background-position: 50% 50%;
7109}
7110
7111.tab-carousel .resource .info .title {
7112  font-size: 18px;
7113  line-height: 24px;
7114}
7115
7116.tab-carousel .resource .info .summary,
7117.tab-carousel .resource .info .cta {
7118  line-height: 24px;
7119  font-size: 16px;
7120}
7121
7122.tab-carousel .resource-card-18x12 {
7123  position: relative;
7124  padding-left: 450px;
7125  box-sizing: border-box;
7126  display: table-cell;
7127  vertical-align: middle;
7128}
7129
7130.tab-carousel .resource-card-18x12 .image {
7131  position: absolute;
7132  width: 420px;
7133  height: 100%;
7134  left: 0;
7135  top: 0;
7136}
7137
7138.tab-carousel .resource-card-18x12 .info {
7139  display: inline-block;
7140}
7141
7142.tab-carousel .resource-card-18x12 .info .title {
7143  margin-bottom: 26px;
7144}
7145
7146
7147
7148
7149
7150/*
7151   Styles for the entity link used in the actions bar and in the cta of
7152   the resources that appear in the tab carousel.
7153*/
7154.actions-bar a:after,
7155.resource .cta:after {
7156  content: '›';
7157  font-weight: 400;
7158  font-size: 22px;
7159  left: 5px;
7160  line-height: 1;
7161  position: relative;
7162  top: 1px;
7163  transition: left 190ms ease-out;
7164}
7165
7166.actions-bar a:hover:after,
7167.resource .cta:hover:after {
7168  left: 10px;
7169}
7170
7171
7172
7173
7174/*
7175  Styles for the actions bar.
7176*/
7177.actions-bar {
7178  background: #9acd00;
7179  margin: 0 -10px;
7180  text-align: center;
7181}
7182
7183.actions-bar .actions {
7184  padding: 30px 0 30px;
7185  text-align: justify;
7186  font-size: 0.1px;
7187  line-height: 0.1px;
7188  margin: 0 10px 0 0;
7189}
7190
7191.actions-bar .actions:after {
7192  content: '';
7193  width: 100%;
7194  display: inline-block;
7195}
7196
7197.actions-bar .actions > div {
7198  display: inline-block;
7199}
7200
7201.actions-bar a {
7202  font-size: 21px;
7203  line-height: 27px;
7204  color: #fff;
7205  font-weight: 300;
7206  -webkit-font-smoothing: antialiased;
7207}
7208
7209.actions-bar a:after {
7210  top: 0px;
7211  font-size: 22px;
7212}
7213
7214.actions-bar a:hover {
7215  color: #fff !important;
7216}
7217
7218
7219
7220
7221
7222/*
7223  Specific styles for new home page layout of the carousels.
7224*/
7225
7226/* Big blue button */
7227a.home-new-cta-btn,
7228.home-new-carousel-1 .resource-card-18x6 .cta {
7229  white-space: nowrap;
7230  display: inline-block;
7231  padding: 14px 32px;
7232  font-size: 18px;
7233  font-weight: 500;
7234  line-height: 24px;
7235  cursor: pointer;
7236  background: #33b5e6;
7237  border-radius: 4px;
7238  margin-top: 20px;
7239  color: #fff;
7240  transition: 0.2s background-color ease-in-out;
7241}
7242
7243.home-new-carousel-1 .resource-card-18x6 .cta:after {
7244  display: none; /* Hide the entity for this button */
7245}
7246
7247a.home-new-cta-btn:hover,
7248.home-new-carousel-1 .resource-card-18x6 .cta:hover {
7249  color: #fff !important;
7250  background: #2d9fca;
7251}
7252
7253.home-new-carousel-1 .resource-card-18x6 .cta {
7254  position: absolute;
7255  bottom: 20px;
7256  left: 16px;
7257}
7258
7259/* Fullscreen carousel. */
7260.home-new-carousel-1 {
7261  max-height: 700px; /* Set max height so doesn't get too long */
7262}
7263
7264.home-new-carousel-1 .fullscreen-carousel-content {
7265  min-height: 450px;  /* Set min height for all content */
7266}
7267
7268.home-new-carousel-1 .hero {
7269  background: #000;
7270}
7271
7272.home-new-carousel-1 .hero-bg {
7273  background-image: url(/home-new/images/hero.jpg);
7274  background-position: right center;
7275  opacity: 0.85;
7276}
7277
7278/*
7279  Styling for special top card of full screen layout resource layout.
7280  We need to specifically style the 18x6 card to adjust its size and layout,
7281  since it's not a standard card, not sure if this is unique to the home page
7282  layout or should be namespaced within the fullscreen-carousel container.
7283*/
7284.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
7285  height: 320px;
7286  background-color:#F9F9F9;
7287  border-radius: 0px;
7288  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
7289
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
7334.annotation-message {
7335    display: block;
7336    font-style: italic;
7337}