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