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