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