default.css revision 5f6019ab6cdcb3000eaf4b695424361a5038ade9 
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/* related resources sections that have dynamic content */
1964
1965
1966
1967h3.rel-resources {
1968margin:1.25em auto;
1969}
1970
1971/* --------------------------------------------------------------------------
1972Form
1973*/
1974.article form {
1975    margin: 0 0 20px;
1976}
1977.article form .form-required {
1978    color: #dd4b39;
1979}
1980.article form fieldset {
1981    margin: 0 0 20px;
1982    padding: 0;
1983}
1984.article form legend {
1985    display: block;
1986    line-height: 1.5;
1987    margin: 0;
1988    padding: 0;
1989}
1990/*
1991.article form ol, .article form ul {
1992    margin: 0 0 0 1em;
1993    padding: 0 0 0 1em;
1994}
1995[dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
1996    margin: 0 1em 0 0;
1997    padding: 0 1em 0 0;
1998}
1999.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
2000ul ul {
2001    list-style: none;
2002    margin: 0;
2003    padding: 0;
2004}
2005.article form li {
2006    margin: 0 0 20px;
2007}
2008.article form li li {
2009    margin: 0 0 5px;
2010}
2011*/
2012.article form label {
2013    display: block;
2014    margin: 0 0 5px;
2015    padding: 0;
2016}
2017.article form input[type='text'], .article form select, .article form textarea, .article form
2018.checkbox-group, .article form .radio-group {
2019    margin-bottom: 15px;
2020}
2021.checkbox-group input {
2022  width: 13px;
2023  height: 13px;
2024  background: #fff;
2025  border: solid 1px #c6c6c6;
2026  float: left;
2027}
2028.article form .checkbox-group, .article form .radio-group {
2029  display: block
2030}
2031.article form select {
2032    border: solid 1px #ebebeb;
2033    border-top-color: #ddd;
2034    -webkit-appearance: none;
2035    background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
2036    height: 30px;
2037    color: #222;
2038    line-height: normal;
2039    padding: 5px;
2040    width: 130px;
2041}
2042
2043.article form .browse .browse-msg {
2044  font-size: 11.5px;
2045}
2046.article form .browse .button-secondary {
2047  height: auto;
2048  line-height: 25px;
2049  font-size: 11px;
2050  padding: 0 8px;
2051  margin: 0 10px 15px 0;
2052}
2053.article form input[type='text'], .article form textarea {
2054    border: 1px solid #ebebeb;
2055    border-top-color: #dcdcdc;
2056    color: #222;
2057    line-height: normal;
2058    padding: 6px 10px;
2059    width: 300px;
2060}
2061.article form textarea {
2062    height: 150px;
2063}
2064.article form input[type='text']:focus, .article form textarea:focus {
2065    border-color: #33B5E5;
2066    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2067    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2068    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2069    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2070    outline: 0;
2071}
2072.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
2073    color: #999;
2074}
2075.article form input[type='text'][disabled], .article form textarea[disabled] {
2076    background-color: #ebebeb;
2077}
2078form .form-error input[type='text'], form .form-error textarea {
2079    border-color: #dd4b39;
2080  margin-right: 20px;
2081}
2082.aside {
2083    -moz-border-radius: 2px;
2084    -webkit-border-radius: 2px;
2085    border-radius: 2px;
2086    margin: 10px 0;
2087    padding: 20px;
2088  color: #666;
2089    position: relative;
2090  background: #f9f9f9;
2091}
2092/*
2093.aside, .notification, .promo {
2094    -moz-border-radius: 2px;
2095    -webkit-border-radius: 2px;
2096    border-radius: 2px;
2097    margin: 10px 0;
2098    padding: 10px;
2099    position: relative;
2100}
2101.aside>:first-child, .notification>:first-child, .promo>:first-child {
2102    margin-top: 0;
2103}
2104.aside>:last-child, .notification>:last-child, .promo>:last-child {
2105    margin-bottom: 0;
2106}
2107.aside {
2108    background: #f9f9f9;
2109}
2110.notification {
2111    background: #fffbe4;
2112    border-color: #f8f6e6;
2113}
2114.promo {
2115    background: #f6f9ff;
2116    border-color: #eff2f9;
2117}
2118*/
2119
2120/* SDK TOS styles */
2121
2122div.sdk-terms {
2123  white-space: pre-wrap;
2124  word-wrap: break-word;
2125  font-family: inherit;
2126  font-size: inherit;
2127  padding: 10px;
2128  height: 370px;
2129  width: 738px;
2130  border: 1px solid #444;
2131  background: transparent;
2132  overflow:auto;
2133  margin:0 0 10px;
2134}
2135
2136div.sdk-terms.fullsize {
2137  padding: 0;
2138  height: auto;
2139  width: auto;
2140  border:none;
2141}
2142
2143div.sdk-terms h3,
2144div.sdk-terms h2 {
2145  margin:0;
2146}
2147
2148div#sdk-terms-form {
2149  padding:0 0 0 10px;
2150}
2151
2152div#sdk-terms-form input {
2153  display:inline;
2154  margin:4px 4px 4px 0;
2155}
2156
2157
2158/* --------------------------------------------------------------------------
2159Code Style
2160*/
2161pre {
2162  margin:0 0 1em 0;
2163  padding: 1em;
2164  overflow: auto;
2165  border: solid 1px #ddd;
2166  background: #f7f7f7;
2167}
2168.str { color: #800; } /* Code string */
2169.kwd { color: #008; }
2170.typ { color: #606; }
2171.lit { color: #066; }
2172.pun { color: #660; }
2173.pln { color: #000; }
2174.tag { color: #008; }
2175.atn { color: #828; }
2176.atv { color: #800; } /* XML string */
2177.dec { color: #606; }
2178
2179/* --------------------------------------------------------------------------
2180Three-Pane
2181*/
2182/* Package Nav & Classes Nav */
2183.three-pane {
2184  position: relative;
2185  border-top: solid 1px #ebebeb;
2186}
2187#packages-nav .js-pane,
2188#classes-nav .js-pane {
2189  overflow:visible;
2190}
2191#packages-nav {
2192        height:270px;
2193  max-height: inherit;
2194  overflow: hidden;
2195  position: relative;
2196}
2197#classes-nav {
2198  overflow: hidden;
2199  position: relative;
2200}
2201#packages-nav ul, #classes-nav ul {
2202  list-style-type: none;
2203  margin: 10px 0 20px 0;
2204  padding: 0;
2205}
2206#classes-nav li {
2207  font-weight: bold;
2208  margin: 5px 0;
2209}
2210#packages-nav li,
2211#classes-nav li li {
2212  margin: 0;
2213}
2214#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2215#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
2216  padding: 0 0 0 4px;
2217}
2218#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2219#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited,
2220#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited {
2221  color: #222;
2222  font-weight: normal;
2223}
2224#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2225#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
2226  display: block;
2227}
2228#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
2229a:visited,
2230#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
2231a:visited,
2232#nav-tree li div.selected {
2233    font-weight: 500;
2234    color: #0099cc;
2235    background-color:#fff; }
2236  #packages-nav li.selected ul li a,
2237  #classes-nav li.selected ul li a {
2238  /* don't highlight child items */
2239    color: #555555; }
2240#nav-tree li div.selected a {
2241    font-weight: 500;
2242    color: #0099cc;
2243}
2244#nav-swap {
2245  height:30px;
2246  border-top:1px solid #ccc;
2247}
2248#nav-swap a {
2249  display:inline-block;
2250  height:100%;
2251  color: #222;
2252  font-size: 12px;
2253  padding: 5px 0 5px 5px;
2254}
2255
2256#nav-swap .fullscreen {
2257  float: right;
2258  width: 24px;
2259  height: 24px;
2260  text-indent: -1000em;
2261  padding:0;
2262  margin:3px 5px 0;
2263  background: url(../images/fullscreen.png) no-repeat -24px 0;
2264}
2265#nav-swap .fullscreen.disabled {
2266  background-position: 0 0;
2267}
2268#nav-swap .fullscreen:hover,
2269#nav-swap .fullscreen:focus {
2270  cursor:pointer;
2271}
2272
2273
2274/* nav tree */
2275#side-nav, #swapper,
2276#nav-tree, #tree-list {
2277  overflow:hidden;
2278  margin-left:0;
2279}
2280
2281#devdoc-nav {
2282  overflow:visible !important; /* To keep the "to top" button visible */
2283}
2284
2285#nav-tree ul {
2286  list-style:none;
2287  padding:0;
2288  margin:10px 0;
2289}
2290
2291#nav-tree ul li div {
2292  padding:0 0 0 4px;
2293}
2294
2295#side-nav #nav-tree ul li a,
2296#side-nav #nav-tree ul li span.no-children {
2297  padding: 0;
2298  margin: 0;
2299}
2300
2301#nav-tree .plus {
2302  margin: 0 3px 0 0;
2303}
2304
2305#nav-tree ul ul {
2306  list-style: none;
2307  margin: 0;
2308  padding: 0 0 0 0;
2309}
2310
2311#nav-tree ul li {
2312  margin: 0;
2313  padding: 0 0 0 0;
2314  white-space: nowrap;
2315}
2316
2317#nav-tree .children_ul {
2318  padding:0;
2319  margin:0;
2320}
2321#nav-tree .children_ul li div {
2322  padding:0 0 0 10px;
2323}
2324#nav-tree .children_ul .children_ul li div {
2325  padding:0 0 0 20px;
2326}
2327
2328#nav-tree a.nolink {
2329  color: #222;
2330  text-decoration: none;
2331}
2332
2333#nav-tree span.label {
2334  width: 100%;
2335}
2336
2337#nav-tree {
2338  overflow-x: auto;
2339  overflow-y: scroll;
2340  outline:0;
2341}
2342
2343
2344/* Content */
2345#doc-col {
2346  margin-right:0;
2347}
2348#doc-content-container {
2349  margin-left: 291px
2350}
2351#doc-header, #doc-content {
2352  padding: 1em 2em;
2353}
2354#doc-header {
2355  background: #f7f7f7;
2356}
2357#doc-header h1 {
2358  line-height: 0;
2359  margin-bottom: 15px;
2360}
2361#api-info-block {
2362  float: right;
2363  font-weight: bold;
2364}
2365#api-info-block a, #api-info-block a:active, #api-info-block a:visited {
2366  color: #222;
2367}
2368#api-info-block a:hover, #api-info-block a:focus {
2369  color: #33B5E5;
2370}
2371#api-nav-header {
2372  height:19px; /* plus 16px padding = 35; same as #nav li */
2373  font-size:14px;
2374  padding: 8px 0;
2375  margin: 0;
2376  border-bottom: 1px solid #CCC;
2377  background:#e9e9e9;
2378  background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
2379
2380}
2381#api-nav-title {
2382  padding:0 5px;
2383  white-space:nowrap;
2384}
2385
2386#api-level-toggle {
2387  float:right;
2388  padding:0 5px;
2389}
2390
2391#api-level-toggle label {
2392  margin:0;
2393  vertical-align:top;
2394  line-height: 19px;
2395  font-size:13px;
2396  height: 19px;
2397}
2398
2399#api-level-toggle .select-wrapper {
2400  width: 35px;
2401  display: inline-block;
2402  overflow: hidden;
2403}
2404#api-level-toggle select {
2405  border: 0;
2406  appearance:none;
2407  -moz-appearance:none;
2408  -webkit-appearance: none;
2409  background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
2410  color: #222;
2411  height: 19px;
2412  line-height: 19px;
2413  padding: 0;
2414  margin:1px 0 0 0;
2415  width:150%;
2416  font-size:13px;
2417  vertical-align:top;
2418  outline:0;
2419}
2420
2421
2422/* Toggle for revision notes and stuff */
2423div.toggle-content.closed .toggle-content-toggleme {
2424  display:none;
2425}
2426
2427#jd-content img.toggle-content-img {
2428  margin:0 5px 5px 0;
2429}
2430
2431div.toggle-content-toggleme {
2432  padding:0 0 0 15px;
2433}
2434
2435
2436/* API LEVEL FILTERED MEMBERS */
2437
2438.absent,
2439.absent a:link,
2440.absent a:visited,
2441.absent a:hover,
2442.absent * {
2443  color:#bbb !important;
2444  cursor:default !important;
2445  text-decoration:none !important;
2446}
2447#devdoc-nav li.absent.selected,
2448#devdoc-nav li.absent.selected *,
2449#devdoc-nav div.label.absent.selected,
2450#devdoc-nav div.label.absent.selected * {
2451  background-color:#eaeaea !important;
2452}
2453.absent h4.jd-details-title,
2454.absent h4.jd-details-title * {
2455  background-color:#f6f6f6 !important;
2456}
2457.absent img {
2458  opacity: .3;
2459  filter: alpha(opacity=30);
2460  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
2461}
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471/* JQUERY RESIZABLE STYLES */
2472.ui-resizable { position: relative; }
2473.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
2474.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
2475/*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
2476body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
2477.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
2478border-bottom: solid 1px #ededed;
2479  background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
2480/*
2481.ui-resizable-e {
2482cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
24831px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
2484*/
2485
2486/* --------------------------------------------------------------------------
2487Lightbox
2488*/
2489.lightbox {
2490  width: 769px;
2491  padding: 1.5em;
2492  margin: 0 auto;
2493  border: solid 1px #dcdcdc;
2494  background: #fff;
2495  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2496  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2497  box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
2498}
2499.lightbox .header {
2500  float: left;
2501  width: 720px;
2502  margin: -10px 20px 10px 0;
2503}
2504.lightbox .close {
2505  float: right;
2506  width: 10px;
2507  height: 10px;
2508  margin: -10px -10px 10px 0;
2509  text-indent: -1000em;
2510  background: url(../images/close.png) no-repeat 0 0;
2511}
2512.lightbox .close:hover, .lightbox .close:focus {
2513  background-position: -10px 0;
2514}
2515
2516/* --------------------------------------------------------------------------
2517Styles for samples browser
2518*/
2519
2520#codesample-wrapper {
2521  width:100000px; /* super wide to contain floats, but doesn't cause scroll */
2522  overflow:visible;
2523}
2524pre#codesample-block {
2525  float:left;
2526  overflow:visible;
2527  background:transparent;
2528  border:none;
2529}
2530pre#codesample-block a.number {
2531  display:none;
2532}
2533pre#codesample-block .code-line:hover {
2534  background:#e7e7e7;
2535}
2536pre#codesample-line-numbers {
2537  float:left;
2538  width:2em;
2539  background:transparent;
2540  border:none;
2541  border-right:1px solid #ccc;
2542  padding-left:0;
2543  font-family:monospace;
2544  text-align:right;
2545  -webkit-touch-callout: none;
2546  -webkit-user-select: none;
2547  -khtml-user-select: none;
2548  -moz-user-select: -moz-none;
2549  -ms-user-select: none;
2550  user-select: none;
2551}
2552pre#codesample-line-numbers a {
2553  color:#999;
2554}
2555pre#codesample-line-numbers.hidden {
2556  display:none;
2557}
2558pre#codesample-block span.code-line {
2559  width:100%;
2560  display:inline-block;
2561}
2562
2563/*
2564Styles for displaying image or video resources in samples browser.
2565Resources are marked as no-display if they exceed the size limit.
2566*/
2567div#codesample-resource img, div#codesample-resource video {
2568  border: 1px solid #ececec;
2569}
2570
2571div#codesample-resource.noDisplay div {
2572  border: 1px solid #ececec;
2573  width:120px;
2574  margin-bottom:4px;
2575  padding:20px;
2576}
2577
2578div#codesample-resource .noDisplay-message:after {
2579  font-style:italic;
2580  font-size:12px;
2581  content: 'This resource is not available for browsing. To view it, please download the project.';
2582}
2583
2584/*
2585Styles for project structure (treeview) page
2586*/
2587.structure-dir {
2588background-image:url(../../assets/images/folder.png);
2589background-repeat:no-repeat;
2590background-position:16px 2px;
2591  margin:.25em 0 0 0;
2592  padding:0 0 0 0;
2593}
2594
2595.structure-toggleme {
2596  margin:0 0 0 3em;
2597  padding:0 0 0 0;
2598  text-decoration:none;
2599}
2600
2601.structure-java{
2602background-image:url(../../assets/images/file-java.png);
2603background-repeat:no-repeat;
2604background-position:0px 2px;
2605  margin:.3em 0 0 0;
2606  padding:.3em 0 .3em 22px;
2607}
2608
2609.structure-file {
2610background-image:url(../../assets/images/file-generic.png);
2611background-repeat:no-repeat;
2612background-position:0px 2px;
2613  margin:.3em 0 0 0;
2614  padding:.3em 0 .3em 22px;
2615}
2616
2617.structure-xml {
2618background-image:url(../../assets/images/file-xml.png);
2619background-repeat:no-repeat;
2620background-position:0px 2px;
2621  margin:.3em 0 0 0;
2622  padding:.3em 0 .25em 22px;
2623}
2624
2625.structure-img {
2626background-image:url(../../assets/images/file-image.png);
2627background-repeat:no-repeat;
2628background-position:0px 2px;
2629  margin:.3em 0 0 0;
2630  padding:.3em 0 .25em 22px;
2631}
2632
2633.structure-manifest {
2634background-image:url(../../assets/images/file-manifest.png);
2635background-repeat:no-repeat;
2636  margin:.0 0 0 1.25em;
2637  padding:0 0 0 22px;
2638  text-decoration:none;
2639}
2640
2641#jd-content .structure-toggle-img {
2642  margin:.5em 0 0 0;
2643padding-right:2.1em;
2644}
2645
2646.dirInfo {
2647  margin-left:2em;
2648}
2649
2650.structure-dir a {
2651  text-decoration:none;
2652}
2653
2654.structure-manifest a {
2655  text-decoration: none;
2656}
2657.structure-file a {
2658  text-decoration: none;
2659}
2660
2661.sampleEmbed {
2662  background-color:rgb(249, 249, 249);
2663}
2664
2665.sampleEmbed ol.lineNumbers {
2666  list-style-type: decimal;
2667  padding-left:1em;
2668}
2669
2670.sampleEmbed ol.lineNumbers li {
2671border-left:1px solid #ddd;
2672border-right:1px solid #ddd;
2673color:gray;
2674background-color:#f7f7f7;
2675margin:0 0 0 24px;
2676padding: 2px 2px 2px 6px;
2677}
2678
2679.sampleEmbed ol.lineNumbers li:hover {
2680background: #efefef;
2681}
2682
2683.samples-nav li a {
2684  overflow: hidden;
2685  text-overflow: ellipsis;
2686  white-space: nowrap;
2687}
2688
2689/* --------------------------------------------------------------------------
2690Styles for raw formatted line numbers (not used with listformatted version)
2691div.sampleLine div.lineNumber {
2692  display: inline;
2693}
2694div.sampleLine div.lineCode {
2695  display: inline;
2696  padding-left:6px;
2697}
2698div.sampleLine {
2699  padding:0;
2700  margin:0;
2701}*/
2702
2703/* --------------------------------------------------------------------------
2704Butterbar
2705*/
2706#butterbar-wrapper {
2707  position:absolute;
2708  top:0;
2709  left:0;
2710  width:100%;
2711}
2712#butterbar {
2713  width:100%;
2714  margin:0 auto;
2715}
2716#butterbar-message {
2717  background-color:rgba(255, 187, 51, .4);
2718  font-size:13px;
2719  padding: 5px 0;
2720  text-align:center;
2721}
2722a#butterbar-message {
2723  cursor:pointer;
2724  display:block;
2725}
2726a#butterbar-message:hover {
2727  text-decoration:underline;
2728}
2729
2730/* --------------------------------------------------------------------------
2731Misc
2732*/
2733
2734
2735.clearfix:before, .clearfix:after {
2736  content: "";
2737  display: table
2738}
2739.clearfix:after {
2740  clear: both
2741}
2742.clearfix {
2743  *zoom: 1
2744}
2745table.blank th, table.blank td {
2746    border: 0;
2747  background: none
2748}
2749.caption {
2750  margin: 0.5em 0 2em 0;
2751  color: #000;
2752  font-size: 11.5px;
2753}
2754
2755.nolist, .nolist ul, .nolist ol {
2756  list-style:none;
2757  margin-left:0;
2758}
2759#tb .nolist {
2760  margin-left:15px;
2761}
2762
2763dl.xml>dt {
2764  text-transform:uppercase;
2765}
2766dl.xml dl.attr {
2767  margin-top:0;
2768}
2769
2770pre.classic {
2771  background-color:transparent;
2772  border:none;
2773  padding:0;
2774}
2775
2776p.img-caption {
2777  margin: -10px 0 20px;
2778  font-size:13px;
2779  color:#666;
2780}
2781
2782div.figure,
2783div.figure-right {
2784  float:right;
2785  clear:right;
2786  margin:10px 0 0 0;
2787  padding:0 0 0 20px;
2788  /* width must be defined w/ an inline style matching the image width */
2789}
2790
2791div.figure-left {
2792  float:left;
2793  clear:left;
2794  margin:10px 0 0 0;
2795  padding:0 20px 0 0;
2796  /* width must be defined w/ an inline style matching the image width */
2797}
2798
2799img.frame {
2800  border:1px solid #DDD;
2801  padding:4px;
2802}
2803
2804p.table-caption {
2805  margin: 0 0 4px 0;
2806  font-size:13px;
2807  color:#666;
2808}
2809
2810p.code-caption {
2811  margin-bottom: 4px;
2812  font: 12px/1.5 monospace;
2813  color:#666;
2814}
2815
2816div.note,
2817div.caution,
2818div.warning {
2819  margin: 0 0 15px;
2820}
2821
2822p.note, div.note,
2823p.caution, div.caution,
2824p.warning, div.warning {
2825  padding: 0 0 0 10px;
2826  border-left: 4px solid;
2827}
2828
2829p.note, div.note {
2830  border-color: #258AAF;
2831}
2832
2833p.caution, div.caution {
2834  border-color: #FF8800;
2835}
2836
2837p.warning, div.warning {
2838  border-color: #ff4443;
2839}
2840
2841div.note.design {
2842  border-left: 4px solid #33B5E5;
2843}
2844
2845div.note.develop {
2846  border-left: 4px solid #F80;
2847}
2848
2849div.note.distribute {
2850  border-left: 4px solid #9C0;
2851}
2852
2853.note p, .caution p, .warning p {
2854  margin:0 0 5px;
2855}
2856
2857.note p:last-child, .caution p:last-child, .warning p:last-child {
2858  margin-bottom:0;
2859}
2860
2861body.about blockquote {
2862  display:block;
2863  float:right;
2864  width:280px;
2865  font-size:20px;
2866  font-style:italic;
2867  line-height:24px;
2868  color:#33B5E5;
2869  margin:0 0 20px 30px;
2870}
2871
2872div.design-announce p {
2873  margin:0 0 10px;
2874}
2875
2876.expandable {
2877  height:34px;
2878  padding-left:20px;
2879  position:relative;
2880}
2881.expandable:before {
2882  content: '';
2883  background-image: url(../images/styles/disclosure_down.png);
2884  background-repeat:no-repeat;
2885  background-position: -12px -9px;
2886  width: 20px;
2887  height: 20px;
2888  display: inline-block;
2889  position: absolute;
2890  top: 0;
2891  left: 0; }
2892}
2893.expandable.expanded:before {
2894  background-image: url(../images/styles/disclosure_up.png);
2895}
2896
2897/* notice box for cross links between Design/Develop docs */
2898a.notice-developers-video,
2899a.notice-developers,
2900a.notice-designers-video,
2901a.notice-designers {
2902  float:right;
2903  clear:right;
2904  width:238px;
2905  min-height:50px;
2906  margin:0 0 20px 20px;
2907  border:1px solid #ddd;
2908}
2909a.notice-developers-video.wide,
2910a.notice-developers.wide,
2911a.notice-designers-video.wide,
2912a.notice-designers.wide {
2913  width:278px;
2914}
2915a.notice-developers-video div,
2916a.notice-developers div,
2917a.notice-designers-video div,
2918a.notice-designers div {
2919  min-height:40px;
2920  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2921  background-size:40px 40px;
2922  padding:10px 10px 10px 60px;
2923}
2924a.notice-designers div {
2925  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2926  background-size:40px 40px;
2927}
2928a.notice-designers-video div {
2929  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2930  background-size:40px 40px;
2931}
2932a.notice-developers-video div {
2933  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2934  background-size:40px 40px;
2935}
2936a.notice-developers-video:hover,
2937a.notice-developers:hover,
2938a.notice-designers-video:hover,
2939a.notice-designers:hover {
2940  background:#eee;
2941}
2942a.notice-developers-video h3,
2943a.notice-developers h3,
2944a.notice-designers-video h3,
2945a.notice-designers h3 {
2946  font-size:13px;
2947  line-height:18px;
2948  font-weight:bold;
2949  text-transform:uppercase;
2950  color:#000 !important;
2951  margin:0 0 1px;
2952}
2953a.notice-developers-video p,
2954a.notice-developers p,
2955a.notice-designers-video p,
2956a.notice-designers p {
2957  margin:0;
2958  line-height:14px;
2959}
2960a.notice-developers-video.left,
2961a.notice-developers.left,
2962a.notice-designers-video.left,
2963a.notice-designers.left {
2964  margin-left:0;
2965  float:left;
2966}
2967
2968
2969/* hide nested list items; companion to hideNestedLists() */
2970.hide-nested li ol,
2971.hide-nested li ul {
2972  display:none;
2973}
2974
2975a.header-toggle {
2976  display:block;
2977  float:right;
2978  text-transform:uppercase;
2979  font-size:.8em !important;
2980  font-weight:normal;
2981  margin-top:2px;
2982}
2983
2984
2985/* -----------------------------------------------
2986good/bad example containers
2987*/
2988
2989div.example-block {
2990  background-repeat: no-repeat;
2991  background-position:10px 8px;
2992  background-color:#ccc;
2993  padding:4px;
2994  margin:.8em auto 1.5em 2em;
2995  width:260px;
2996  float:right;
2997}
2998/* red container */
2999.example-block.bad {
3000  background-image: url(/images/example-bad.png);
3001  background-color:#f4cccc;
3002}
3003/* green container */
3004.example-block.good {
3005  background-image: url(/images/example-good.png);
3006  background-color:#d9ead3;
3007}
3008/* container heading div */
3009#jd-content .example-block .heading {
3010  font-weight:bold;
3011  margin:6px 0 9px 36px;
3012  padding:6px auto;
3013}
3014/* container image (if any) */
3015#jd-content .example-block img {
3016  margin:0;
3017  padding:0px;
3018}
3019
3020.example-block table {
3021  margin:0;
3022}
3023
3024/* -----------------------------------------------
3025Dialog box for popup messages
3026*/
3027
3028div.dialog {
3029  height:0;
3030  margin:0 auto;
3031}
3032
3033div.dialog>div {
3034  z-index:99;
3035  position:fixed;
3036  margin:70px 0;
3037  width: 391px;
3038  height: 200px;
3039  background: #F7F7F7;
3040-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3041-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3042box-shadow: 0 0 15px rgba(0,0,0,0.5);
3043}
3044/* IE6 can't position fixed */
3045* html div.dialog div { position:absolute; }
3046
3047
3048div#deprecatedSticker {
3049  display:none;
3050  z-index:99;
3051  position:fixed;
3052  right:15px;
3053  top:114px;
3054  margin:0;
3055  padding:1em;
3056  background:#FFF;
3057  border:1px solid #dddd00;
3058  box-shadow:-5px 5px 10px #ccc;
3059  -moz-box-shadow:-5px 5px 10px #ccc;
3060  -webkit-box-shadow:-5px 5px 10px #ccc;
3061}
3062
3063div#naMessage {
3064  display:none;
3065  width:555px;
3066  height:0;
3067  margin:0 auto;
3068}
3069
3070div#naMessage div {
3071  z-index:99;
3072  width:450px;
3073  position:fixed;
3074  margin:50px 0;
3075  padding:4em 4em 3em;
3076  background:#FFF;
3077  border:1px solid #999;
3078  box-shadow:-10px 10px 40px #888;
3079  -moz-box-shadow:-10px 10px 40px #888;
3080  -webkit-box-shadow:-10px 10px 40px #888;
3081}
3082/* IE6 can't position fixed */
3083* html div#naMessage div { position:absolute; }
3084
3085div#naMessage strong {
3086  font-size:1.1em;
3087}
3088
3089
3090/* --------------------------------------------------------------------------
3091Slideshow Controls & Next/Prev
3092*/
3093.slideshow-next, .slideshow-prev {
3094  width: 20px;
3095  height: 36px;
3096  text-indent: -1000em;
3097}
3098.slideshow-container {
3099  margin: 2em 0;
3100}
3101.slideshow-container:before, .slideshow-container:after {
3102  content: "";
3103  display: table;
3104  clear: both;
3105}
3106a.slideshow-next, a.slideshow-next:visited {
3107
3108  float: right;
3109
3110  background: url(../images/arrow-right.png) no-repeat 0 0
3111
3112}
3113
3114a.slideshow-prev, a.slideshow-prev:visited {
3115
3116  float: left;
3117
3118  background: url(../images/arrow-left.png) no-repeat 0 0
3119
3120}
3121
3122.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3123
3124  background-position: 0 -36px
3125
3126}
3127
3128.slideshow-next:active, .slideshow-prev:active {
3129
3130  background-position: 0 -72px
3131
3132}
3133.slideshow-nav {
3134  width: 74px;
3135  margin: 0 auto;
3136}
3137.slideshow-nav a, .slideshow-nav a:visited {
3138  display: inline-block;
3139  width: 12px;
3140  height: 12px;
3141  margin: 0 2px 20px 2px;
3142  background: #ccc;
3143  -webkit-border-radius: 50%;
3144  -moz-border-radius: 50%;
3145  border-radius: 50%;
3146}
3147.slideshow-nav a:hover, .slideshow-nav a:focus {
3148
3149  background: #33B5E5
3150}
3151
3152.slideshow-nav a:active {
3153
3154  background: #1e799a;
3155  background: #ebebeb;
3156  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3157  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3158  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3159}
3160.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3161  background: #33B5E5
3162}
3163/* --------------------------------------------------------------------------
3164Tabs
3165*/
3166ul.tabs {
3167  padding: 0;
3168  margin: 2em 0 0 0;
3169}
3170ul.tabs:before, ul.tabs:after {
3171  content: "";
3172  display: table;
3173  clear: both;
3174}
3175ul.tabs li {
3176  list-style-type: none;
3177  float: left;
3178}
3179ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3180  display: block;
3181  height: 36px;
3182  line-height: 36px;
3183  padding: 0 15px;
3184  margin-right: 2px;
3185  color: #222;
3186  -moz-border-radius-topleft: 2px;
3187  -moz-border-radius-topright: 2px;
3188  -moz-border-radius-bottomright: px;
3189  -moz-border-radius-bottomleft: px;
3190  -webkit-border-radius: 2px 2px px px;
3191  border-radius: 2px 2px px px;
3192  border-top: solid 1px #ebebeb;
3193  border-left: solid 1px #ebebeb;
3194  border-right: solid 1px #ebebeb;
3195  background-color: #fff;
3196    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3197    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3198    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3199    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3200    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3201    background-image: linear-gradient(top, #ffffff, #fafafa);
3202    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3203EndColorStr='#fafafa');
3204}
3205ul.tabs li a:hover {
3206  color: #33B5E5;
3207}
3208ul.tabs li a.selected {
3209  height: 37px;
3210  color: #33B5E5;
3211  background-color: #f7f7f7;
3212  background-image: none;
3213  border-color: #ddd;
3214}
3215.tab-content {
3216  padding: 1.2em;
3217  margin: -1px 0 2em 0;
3218  -webkit-border-radius: 2px;
3219    -moz-border-radius: 2px;
3220    border-radius: 2px;
3221  border: solid 1px #ddd;
3222  background: #f7f7f7;
3223}
3224/* --------------------------------------------------------------------------
3225Feature Boxes
3226*/
3227.feature-box {
3228  width: 291px;
3229  height: 200px;
3230  position: relative;
3231  background: #F7F7F7;
3232}
3233.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3234  z-index: 100;
3235  position: absolute;
3236  background-color: #aaa;
3237}
3238.box-border .top, .box-border .bottom {
3239  width: 291px;
3240  height: 1px;
3241}
3242.dialog .box-border .top,
3243.dialog .box-border .bottom { width:391px; }
3244
3245.box-border .left, .box-border .right {
3246  width: 1px;
3247  height: 8px;
3248}
3249.box-border .top { top: 0; left: 0 }
3250.box-border .top .left { top: 1px; left: 0 }
3251.box-border .top .right { top: 1px; right: 0 }
3252.box-border .bottom .left { top: -8px; left: 0 }
3253.box-border .bottom { top: 200px; left: 0 }
3254.box-border .bottom .right { top: -8px; right: 0 }
3255
3256.feature-box h4,
3257.dialog h4 {
3258    margin: 15px 18px 10px;
3259    padding:0;
3260}
3261
3262.feature-box p,
3263.dialog p {
3264    margin: 10px 18px;
3265    padding:0;
3266}
3267.feature-box .link,
3268.dialog .link {
3269    border-top: 1px solid #dedede;
3270    bottom: 0;
3271    position: absolute;
3272    width: inherit;
3273}
3274.feature-box a, .feature-box h4,
3275.dialog a, .dialog h4 {
3276    -webkit-transition: color .4s ease;
3277    -moz-transition: color .4s ease;
3278    -o-transition: color .4s ease;
3279    transition: color .4s ease;
3280}
3281.feature-box:hover {
3282  cursor: pointer;
3283}
3284.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3285.left, .feature-box:hover .right {
3286  background-color: #33B5E5;
3287}
3288.feature-box:hover h4, .feature-box:hover a {
3289  color: #33B5E5;
3290}
3291/* --------------------------------------------------------------------------
3292Page-Specific Styles
3293*/
3294.colors {
3295  position: relative;
3296  float: left;
3297  width: 92px;
3298  margin: 40px 0 20px;
3299}
3300.colors div {
3301  color: #fff;
3302  font-size: 11.5px;
3303  width: 82px;
3304  height: 82px;
3305  margin-top:-30px;
3306  line-height: 82px;
3307  text-align: center;
3308  border: solid 5px #fff;
3309  -webkit-border-radius: 50%;
3310  -moz-border-radius: 50%;
3311  border-radius: 50%;
3312}
3313
3314
3315
3316
3317
3318
3319
3320
3321
3322
3323
3324
3325
3326
3327/* ########### REFERENCE DOCS ################## */
3328
3329#packages-nav h2,
3330#classes-nav h2 {
3331  font-size:18px;
3332  margin:0;
3333  padding:0 0 0 4px;
3334}
3335
3336#jd-header {
3337  padding: 0 0 5px;
3338  margin: 20px 0 10px;
3339  font-size:13px;
3340  border-bottom:solid 1px #ccc;
3341}
3342
3343#jd-header h1 {
3344  margin:0;
3345  padding:0;
3346}
3347
3348/* page-top-right container for reference pages (holds
3349links to summary tables) */
3350#api-info-block {
3351  font-size:13px;
3352  margin:20px 0 0;
3353  padding:0 10px 6px;
3354  font-weight:normal;
3355  float:right;
3356  text-align:right;
3357  color:#999;
3358  max-width:70%;
3359}
3360
3361#api-info-block div.api-level {
3362  font-weight:bold;
3363  font-size:inherit;
3364  float:none;
3365  color:#222;
3366  padding:0;
3367  margin:0;
3368}
3369
3370/* inheritance table */
3371.jd-inheritance-table {
3372  border-spacing:0;
3373  margin:0;
3374  padding:0;
3375  font-size:13px;
3376  background-color:transparent;
3377}
3378.jd-inheritance-table tr td {
3379  border: none;
3380  margin: 0;
3381  padding: 0;
3382  background-color:transparent;
3383}
3384.jd-inheritance-table .jd-inheritance-space {
3385  font-weight:bold;
3386  width:1em;
3387}
3388.jd-inheritance-table .jd-inheritance-interface-cell {
3389  padding-left: 17px;
3390}
3391
3392
3393
3394.jd-sumtable a {
3395  text-decoration:none;
3396}
3397
3398.jd-sumtable a:hover {
3399  text-decoration:underline;
3400}
3401
3402/* the link inside a sumtable for "Show All/Hide All" */
3403.toggle-all {
3404  display:block;
3405  float:right;
3406  font-weight:normal;
3407  font-size:0.9em;
3408}
3409
3410/* adjustments for in/direct subclasses tables */
3411.jd-sumtable.jd-sumtable-subclasses {
3412  margin: 1em 0 0 0;
3413  max-width:968px;
3414  background-color:transparent;
3415  font-size:13px;
3416}
3417
3418/* extra space between end of method name and open-paren */
3419.sympad {
3420  margin-right: 2px;
3421}
3422
3423/* right alignment for the return type in sumtable */
3424.jd-sumtable .jd-typecol {
3425  text-align:right;
3426}
3427
3428/* adjustments for the expando table-in-table */
3429.jd-sumtable-expando {
3430  margin:.5em 0;
3431  padding:0;
3432}
3433
3434/* a div that holds a short description */
3435.jd-descrdiv {
3436  padding:3px 1em 0 1em;
3437  margin:0;
3438  border:0;
3439}
3440
3441#jd-content img.jd-expando-trigger-img {
3442  padding:0 4px 4px 0;
3443  margin:0;
3444}
3445
3446.jd-sumtable-subclasses div#subclasses-direct,
3447.jd-sumtable-subclasses div#subclasses-indirect {
3448  margin:0 0 0 13px;
3449}
3450
3451
3452
3453/********* MEMBER REF *************/
3454
3455
3456.jd-details {
3457/*  border:1px solid #669999;
3458  padding:4px; */
3459  margin:0 0 1em;
3460}
3461
3462/* API reference: a container for the
3463.tagdata blocks that make up the detailed
3464description */
3465.jd-details-descr {
3466  padding:0;
3467  margin:.5em .25em;
3468}
3469
3470/* API reference: a block containing
3471a detailed description, a params table,
3472seealso list, etc */
3473.jd-tagdata {
3474  margin:.5em 1em;
3475}
3476
3477.jd-tagdata p {
3478  margin:0 0 1em 1em;
3479}
3480
3481/* API reference: adjustments to
3482the detailed description block */
3483.jd-tagdescr {
3484  margin:.25em 0 .75em 0;
3485}
3486
3487.jd-tagdescr ol,
3488.jd-tagdescr ul {
3489  margin:0 2.5em;
3490  padding:0;
3491}
3492
3493.jd-tagdescr table,
3494.jd-tagdescr img {
3495  margin:.25em 1em;
3496}
3497
3498.jd-tagdescr li {
3499margin:0 0 .25em 0;
3500padding:0;
3501}
3502
3503/* API reference: heading marking
3504the details section for constants,
3505attrs, methods, etc. */
3506h4.jd-details-title {
3507  font-size:1.15em;
3508  background-color: #E2E2E2;
3509  margin:1.5em 0 .6em;
3510  padding:3px 95px 3px 3px; /* room for api-level */
3511}
3512body.google h4.jd-details-title {
3513  background-color: #FFF;
3514  padding-top:5px;
3515  border-top: 1px solid #ccc;
3516}
3517body.google table.jd-sumtable th {
3518  background-color: #FFF;
3519  color:#000;
3520}
3521
3522h4.jd-tagtitle {
3523  margin:0;
3524}
3525
3526h4 .normal {
3527  font-weight:normal;
3528}
3529
3530/* API reference: heading for "Parameters", "See Also", etc.,
3531in details sections */
3532h5.jd-tagtitle {
3533  margin:0 0 .25em 0;
3534  font-size:1em;
3535}
3536
3537.jd-tagtable {
3538  margin:0;
3539  background-color:transparent;
3540  width:auto;
3541}
3542
3543.jd-tagtable td,
3544.jd-tagtable th {
3545  border:none;
3546  background-color:#fff;
3547  vertical-align:top;
3548  font-weight:normal;
3549  padding:2px 10px;
3550}
3551
3552.jd-tagtable th {
3553  font-style:italic;
3554}
3555
3556/* Inline api level indicator for methods */
3557div.api-level {
3558  font-size:.8em;
3559  font-weight:normal;
3560  color:#999;
3561  float:right;
3562  padding:0 8px 0;
3563  margin-top:-30px;
3564}
3565
3566table.jd-tagtable td,
3567table.jd-tagtable th {
3568  background-color:transparent;
3569}
3570
3571table.jd-tagtable th {
3572  color:inherit;
3573}
3574
3575
3576
3577
3578
3579
3580
3581
3582
3583
3584
3585
3586
3587
3588
3589
3590
3591
3592
3593
3594
3595
3596
3597/* SEARCH FILTER */
3598
3599.menu-container {
3600  position:relative;
3601}
3602#search_autocomplete {
3603  font-weight:normal;
3604}
3605
3606.search_filtered_wrapper.reference {
3607  width: 193px;
3608  float: right;
3609}
3610.search_filtered_wrapper.docs {
3611  width:875px;
3612  float: left;
3613  position:absolute;
3614  top:26px;
3615  right:66px;
3616}
3617.suggest-card {
3618  position:relative;
3619  width:170px;
3620  min-height:90px;
3621  padding:5px;
3622  border: solid 1px #C5C5C5;
3623  background: white;
3624  top: 15px;
3625  margin-right:-5px;
3626  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3627  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3628  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3629}
3630.suggest-card.reference {
3631  position:absolute;
3632  z-index:999;
3633  min-width:171px; /* +padding and border makes this match input width */
3634  min-height:93px; /* add 3px because this has 1 not 4px top border */
3635  width:auto;
3636  top:41px;
3637  margin:0;
3638}
3639.suggest-card.develop {
3640  z-index:997;
3641  border-top: solid 4px #F80;
3642  float:right;
3643}
3644.suggest-card.design {
3645  z-index:996;
3646  border-top: solid 4px #33b5e5;
3647  float:right;
3648}
3649.suggest-card.distribute {
3650  z-index:995;
3651  border-top: solid 4px #9C0;
3652  float:right;
3653}
3654.child-card {
3655  width:100%;
3656}
3657.suggest-card.dummy {
3658  width:172px;
3659  float:right;
3660  border:0;
3661  background:transparent;
3662  -moz-box-shadow: none;
3663  -webkit-box-shadow: none;
3664  box-shadow: none;
3665}
3666
3667ul.search_filtered {
3668  min-width:100%;
3669  list-style: none;
3670  margin: 0 0 5px;
3671  padding: 0;
3672}
3673.search_filtered .jd-selected {
3674  background:#efefef;
3675  cursor:pointer;
3676}
3677.search_filtered .jd-selected,
3678.search_filtered .jd-selected a {
3679    color:#09C !important;
3680}
3681
3682.no-display {
3683  display: none;
3684}
3685
3686.search_filtered li.jd-autocomplete {
3687  font-size: 0.81em;
3688  border: none;
3689  margin: 0 0 2px;
3690  padding: 0;
3691  line-height:1.5em;
3692}
3693
3694.search_filtered li a {
3695  padding:0 5px;
3696  color:#222 !important;
3697  display:inline-block;
3698  line-height:12px;
3699}
3700
3701.search_filtered li.header {
3702  font-weight:bold;
3703  color:#444;
3704  border: none;
3705  margin: 8px 0 2px;
3706  padding:1px 5px;
3707  line-height:1.5em;
3708}
3709.search_filtered li.header.small {
3710  font-size:0.85em;
3711}
3712
3713.suggest-card.reference
3714.search_filtered li.header {
3715  color:#aaa;
3716  font-size: 0.81em;
3717}
3718
3719.search_filtered li.header:first-child {
3720  margin: 0 0 2px;
3721}
3722
3723.show-item {
3724  display: table-row;
3725}
3726.hide-item {
3727  display: hidden;
3728}
3729
3730
3731
3732
3733
3734/* SEARCH RESULTS */
3735
3736
3737#leftSearchControl .gsc-twiddle {
3738  background-image : none;
3739}
3740
3741#leftSearchControl td, #searchForm td {
3742  border: 0px solid #000;
3743  padding:0;
3744}
3745
3746#leftSearchControl .gsc-resultsHeader .gsc-title {
3747  padding-left : 0px;
3748  font-weight : bold;
3749  font-size : 13px;
3750  color:#006699;
3751  display : none;
3752}
3753
3754#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3755  display : none;
3756}
3757
3758#leftSearchControl .gsc-resultsRoot {
3759  padding-top : 6px;
3760}
3761
3762#leftSearchControl div.gs-visibleUrl-long {
3763  display : block;
3764  color:#006699;
3765}
3766
3767#leftSearchControl .gsc-webResult {
3768  padding:0 0 20px 0;
3769}
3770
3771.gsc-webResult div.gs-visibleUrl-short,
3772table.gsc-branding,
3773.gsc-clear-button {
3774  display : none;
3775}
3776
3777.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3778.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3779#leftSearchControl a,
3780#leftSearchControl a b {
3781  color:#006699;
3782}
3783
3784.gsc-resultsHeader {
3785  display: none;
3786}
3787
3788/* Disable built in search forms */
3789.gsc-control form.gsc-search-box {
3790  display : none;
3791}
3792table.gsc-search-box {
3793  margin:6px 0 0 0;
3794  border-collapse:collapse;
3795}
3796
3797td.gsc-input {
3798  padding:0 2px;
3799  width:100%;
3800  vertical-align:middle;
3801}
3802
3803input.gsc-input {
3804  border:1px solid #BCCDF0;
3805  width:99%;
3806  padding-left:2px;
3807  font-size:.95em;
3808}
3809
3810td.gsc-search-button {
3811  text-align: right;
3812  padding:0;
3813  vertical-align:top;
3814}
3815
3816
3817#searchResults {
3818  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3819(it doesn't) */
3820  height:auto;
3821}
3822
3823#searchResults .gsc-control {
3824  position:relative;
3825  width:auto;
3826  padding:0 0 10px;
3827}
3828
3829#searchResults .gsc-tabsArea {
3830  position:relative;
3831  white-space:nowrap;
3832  float:left;
3833  width:200px;
3834}
3835
3836#searchResults .gsc-above-wrapper-area {
3837  display:none;
3838}
3839
3840#searchResults .gsc-resultsbox-visible {
3841  float:left;
3842  width:720px;
3843  margin-left:20px;
3844}
3845
3846#searchResults .gsc-tabHeader {
3847  padding: 3px 6px;
3848  position:relative;
3849  width:auto;
3850  display:block;
3851}
3852
3853#searchResults h2#searchTitle {
3854  padding:0;
3855  margin:5px 0;
3856  border:none;
3857}
3858
3859#searchResults h2#searchTitle em {
3860  font-style:normal;
3861  color:#33B5E5;
3862}
3863
3864#searchResults .gsc-table-result {
3865  margin:5px 0 10px 0;
3866  background-color:transparent;
3867}
3868#searchResults .gs-web-image-box, .gs-promotion-image-box {
3869  width:120px;
3870}
3871#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3872  max-width:120px;
3873}
3874
3875#searchResults .gsc-table-result .gsc-thumbnail {
3876  padding:0 20px 0 0;
3877}
3878
3879#searchResults td {
3880  background-color:transparent;
3881}
3882
3883#searchResults .gsc-expansionArea {
3884  position:relative;
3885}
3886#searchResults .gsc-tabsArea .gsc-cursor-box {
3887  width:200px;
3888  padding:20px 0 0 1px;
3889}
3890#searchResults .gsc-cursor-page {
3891  display:inline-block;
3892  float:left;
3893  margin:-1px 0 0 -1px;
3894  padding:0;
3895  height:27px;
3896  width:27px;
3897  text-align:center;
3898  line-height:2;
3899}
3900
3901#searchResults .gsc-tabHeader.gsc-tabhInactive,
3902#searchResults .gsc-cursor-page {
3903  text-decoration:none;
3904  color:#258AAF;
3905  border: solid 1px #DADADA;
3906}
3907
3908#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
3909#searchResults .gsc-cursor-page:hover {
3910  border-color: #DBDBDB;
3911  background-color: #F3F3F3;
3912  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
3913  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
3914  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
3915  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
3916  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
3917  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
3918  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
3919EndColorStr='#ececec');
3920  color: #33B5E5;
3921}
3922
3923#searchResults .gsc-tabHeader.gsc-tabhActive,
3924#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
3925#searchResults .gsc-cursor-page.gsc-cursor-current-page,
3926#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
3927  color:#fff;
3928  background-color: #09C;
3929  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
3930  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
3931  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
3932  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
3933  background-image: -o-linear-gradient(top, #2FADDB, #09C);
3934  background-image: linear-gradient(top, #2FADDB, #09C);
3935  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
3936  border: 1px solid #3990AB;
3937  z-index:100;
3938}
3939
3940
3941
3942
3943
3944/************ STICKY NAV BAR ******************/
3945
3946#header-wrapper {
3947  background: #f9f9f9;
3948  margin: 0 -10px 0 -10px;
3949  padding: 51px 10px 0px 10px;
3950  position: relative;
3951}
3952#header-wrapper #nav-x div.wrap {
3953  max-width: 940px;
3954  height: 38px;
3955}
3956#header-wrapper #nav-x ul.nav-x li {
3957  margin-right: 36px !important;
3958  margin-top: 5px;
3959  margin-bottom: 0px;
3960  height: 30px;
3961}
3962#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
3963  color: #669900;
3964  border-bottom: 3px solid #669900;
3965}
3966#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
3967  color: #669900;
3968}
3969#header-wrapper #nav-x > div.wrap ul.nav-x a {
3970  font-size: 14.5px;
3971}
3972#header-wrapper .developer-console-btn {
3973  float: right;
3974  background: #fefefe;
3975  border-radius: 4px;
3976  padding: 8px 14px;
3977  box-shadow: 1px 1px 0px #7a7a7a;
3978  font-size: 14px;
3979  margin-top: -6px;
3980  cursor: pointer;
3981  color: #464646;
3982  margin-right: 20px;
3983}
3984/* not currently used */
3985#header-wrapper .shadow {
3986  width: 1034px;
3987  height: 4px;
3988  position: absolute;
3989  left: 50%;
3990  margin-left: -517px;
3991  bottom: -4px;
3992  background-image: url(../images/header-shadow.png);
3993}
3994
3995#context {
3996  clear: both;
3997  padding-top: 14px;
3998}
3999#context .breadcrumb {
4000  float: left;
4001  margin-bottom: 10px;
4002}
4003#context .util {
4004  float: right;
4005  margin-right: 20px;
4006}
4007
4008.breadcrumb {
4009  list-style: none;
4010  margin: 0;
4011  padding: 0;
4012  position: relative;
4013}
4014.breadcrumb li {
4015  float: left;
4016  padding: 0 20px 0 0;
4017  color: #000;
4018  white-space: nowrap;
4019}
4020.breadcrumb li a {
4021  color: #000;
4022}
4023.breadcrumb li:after {
4024  content: url(../images/breadcrumb.png);
4025  position: relative;
4026  top: 1px;
4027  left: 10px;
4028  width: 5px;
4029  height: 10px;
4030}
4031.breadcrumb li.current {
4032  font-weight: 700;
4033}
4034.breadcrumb li.current:after {
4035  display: none;
4036}
4037
4038/* Sticky Nav overrides */
4039.sticky-menu {
4040  position: fixed;
4041  width: 940px;
4042  height: 0px;
4043  z-index: 51;
4044  top: 12px;
4045}
4046#sticky-header {
4047  display: none;
4048  padding: 0 10px;
4049  position: fixed;
4050  background: #f9f9f9;
4051  top: 0px;
4052  left: 0px;
4053  right: 0px;
4054  height: 45px;
4055  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
4056  border-bottom: 1px solid #a5c43a;
4057  z-index: 50;
4058}
4059#sticky-header.design {
4060  border-bottom: 1px solid #33b5e5;
4061}
4062#sticky-header.develop {
4063  border-bottom: 1px solid #F80;
4064}
4065#sticky-header.distribute {
4066  border-bottom: 1px solid #9C0;
4067}
4068#sticky-header.about {
4069  border-bottom: 1px solid #9933CC;
4070}
4071#sticky-header > div {
4072  overflow: hidden;
4073  *zoom: 1;
4074  width: 940px;
4075  margin: 0 auto;
4076  clear: both;
4077  padding-top: 9px;
4078}
4079#sticky-header > div .logo {
4080  float: left;
4081  width: 26px;
4082  height: 25px;
4083  background: url(../images/dac_logo.png);
4084  background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x);
4085  z-index: 52;
4086  position: relative;
4087}
4088#sticky-header > div .top {
4089  float: left;
4090  width: 38px;
4091  height: 38px;
4092  position: relative;
4093  background: url(../images/styles/gototop.png);
4094  z-index: 52;
4095}
4096#sticky-header > div .breadcrumb {
4097  float: left;
4098  padding: 0 0 0 10px;
4099  border-left: 1px solid #d2d2d2;
4100  line-height: 24px;
4101  font-size: 14px;
4102  position: relative;
4103  top: 0px;
4104  z-index: 52;
4105}
4106
4107
4108}
4109
4110
4111
4112
4113
4114
4115
4116/*********** PREVIOUSLY dac-styles.css ***************/
4117
4118
4119#header {
4120  border-bottom:0;
4121}
4122
4123#header .wrap {
4124  max-width:940px;
4125  height:41px;
4126  border-bottom:1px solid;
4127  border-color: #ccc;
4128  position:relative;
4129}
4130
4131.about #header .wrap {
4132  border-color: #9933CC;
4133}
4134
4135.design #header .wrap {
4136  border-color: #33b5e5;
4137}
4138
4139.develop #header .wrap {
4140  border-color: #F80;
4141}
4142
4143.distribute #header .wrap {
4144  border-color: #9C0;
4145}
4146
4147.logo a {
4148  float:left;
4149}
4150
4151#header .logo {
4152  margin-top: -6px;
4153  margin-left: 0px;
4154  margin-bottom:0px;
4155  width: 160px;
4156  padding-right:10px;
4157}
4158
4159
4160#header-wrap .logo.wear-logo {
4161  width:220px;
4162  margin:0;
4163  padding:0;
4164  margin-bottom:22px;
4165}
4166#header-wrap .logo.wear-logo img {
4167  padding:0 0 0 10px;
4168}
4169
4170.search {
4171  height:25px;
4172  margin-top: -3px;
4173  margin-bottom: 0px;
4174}
4175
4176
4177
4178/* Quicknav */
4179.btn-quicknav {
4180  width:20px;
4181  height:28px;
4182  float:left;
4183  margin-left:6px;
4184  padding-right:10px;
4185  position:relative;
4186  cursor:pointer;
4187  border-right:1px solid #CCC;
4188}
4189
4190.btn-quicknav a {
4191  zoom:1;
4192  position:absolute;
4193  top:13px;
4194  left:5px;
4195  display:block;
4196  text-indent:-9999em;
4197  width:10px;
4198  height:5px;
4199  background:url(../images/quicknav_arrow.png) no-repeat;
4200}
4201
4202.btn-quicknav a.arrow-active {
4203  background-position: 0 -5px;
4204  display:none;
4205}
4206
4207#header-wrap.quicknav a.arrow-inactive {
4208  display:none;
4209}
4210
4211.btn-quicknav.active a.arrow-active {
4212  display:block;
4213}
4214
4215.nav-x li {
4216  display:block;
4217  float:left;
4218  margin-right:45px;
4219  -webkit-transition: all 0.25s linear;
4220      -moz-transition: all 0.25s linear;
4221       -ms-transition: all 0.25s linear;
4222        -o-transition: all 0.25s linear;
4223           transition: all 0.25s linear;
4224}
4225
4226#header-wrap.quicknav .nav-x li {
4227  min-width:160px;
4228  margin-right:20px;
4229}
4230
4231#header-wrap.quicknav li.last {
4232  margin-right:0px;
4233}
4234
4235#quicknav {
4236 float:none;
4237 clear:both;
4238 margin-left:180px;
4239 margin-top:-30px;
4240 display:none;
4241 overflow:hidden;
4242}
4243
4244#header-wrap.quicknav #quicknav {
4245
4246}
4247
4248#quicknav ul {
4249  margin:10px 0;
4250  padding:0;
4251}
4252
4253#quicknav ul li.design {
4254  border-top:1px solid #33b5e5;
4255}
4256
4257#quicknav ul li.develop {
4258  border-top:1px solid #FF8800;
4259}
4260
4261#quicknav ul li.distribute {
4262  border-top:1px solid #99cc00;
4263}
4264
4265#quicknav ul li {
4266  display:block;
4267  float:left;
4268  margin:0 20px 0 0;
4269  min-width:140px;
4270}
4271
4272#quicknav ul li.last {
4273  margin-right:0px;
4274}
4275
4276#quicknav ul li ul li {
4277  float:none;
4278}
4279
4280#quicknav ul li ul li a {
4281  color:#222;
4282}
4283
4284#quicknav ul li li ul,
4285#quicknav ul li li ul li {
4286  margin:0;
4287}
4288
4289#quicknav ul li li ul li:before {
4290  content:"\21B3";
4291}
4292
4293#header-wrap {
4294   -webkit-transition: all 0.25s ease-out;
4295      -moz-transition: all 0.25s ease-out;
4296       -ms-transition: all 0.25s ease-out;
4297        -o-transition: all 0.25s ease-out;
4298           transition: all 0.25s ease-out;
4299
4300}
4301
4302#header-wrap.quicknav {
4303  height:196px;
4304
4305}
4306
4307/* SEARCH AND MORE */
4308.search {
4309  position: absolute;
4310  width: 50px;
4311  height:28px;
4312  display: block;
4313  margin-top:-3px;
4314  margin-bottom:7px;
4315  overflow:hidden;
4316  z-index:100;
4317  right:54px;
4318  -webkit-transition: width 0.4s ease;
4319     -moz-transition: width 0.4s ease;
4320       -o-transition: width 0.4s ease;
4321          transition: width 0.4s ease;
4322}
4323
4324.search #search-btn {
4325  width:50px;
4326  height:28px;
4327  background:url(../images/icon_search.png) no-repeat;
4328  float:left;
4329}
4330
4331.search-inner {
4332  width:245px;
4333}
4334
4335.search:hover, .search.active {
4336  width:245px;
4337}
4338
4339.search .bottom, .search .left, .search .right {
4340  position: absolute;
4341  background-color: #a2a2a2
4342}
4343
4344.search .bottom {
4345  width: 214px;
4346  height: 1px;
4347  top: 24px;
4348  left: 0
4349}
4350
4351.search .left, .search .right {
4352  height: 5px;
4353  width: 1px
4354}
4355
4356.search .left {
4357  top: 22px;
4358  left: 56px;
4359  background-color:#CCC;
4360}
4361
4362.search .right {
4363  top: 22px;
4364  left: 238px;
4365  background-color:#CCC;
4366}
4367
4368.search form {
4369  margin-top: 2px;
4370  width: 162px;
4371  float:left;
4372}
4373
4374.search form input {
4375  color: #2f2f2f;
4376  font-size: 0.95em;
4377  width: 178px;
4378  border: none;
4379  margin-left: 6px;
4380  z-index: 1500;
4381  position: relative;
4382  background-color: transparent;
4383  border-bottom:1px solid #CCC;
4384  padding:0 0 0 4px;
4385  outline:none;
4386  height:24px;
4387}
4388
4389.search:hover form input {
4390  border-bottom:1px solid #33B5E5;
4391}
4392
4393.search:hover .bottom, .search:hover .left, .search:hover .right {
4394  background-color: #33b5e5;
4395}
4396
4397.search:hover #search-btn {
4398  background-position: 0 -28px
4399}
4400
4401.search form input:focus {
4402  color: #222;
4403  font-weight: bold
4404}
4405
4406.moremenu {
4407  float: right;
4408  position: relative;
4409  width: 50px;
4410  height:28px;
4411  display: block;
4412  margin-top:-3px;
4413  margin-bottom:7px;
4414  overflow:hidden;
4415  -webkit-transition: width 0.25s ease;
4416     -moz-transition: width 0.25s ease;
4417       -o-transition: width 0.25s ease;
4418          transition: width 0.25s ease;
4419}
4420
4421.moremenu #more-btn {
4422  width:40px;
4423  height:28px;
4424  background:url(../images/icon_more.png) no-repeat;
4425  border-left:1px solid #CCC;
4426  float:left;
4427  cursor:pointer;
4428}
4429
4430.moremenu:hover #more-btn {
4431  background-position:0 -28px;
4432}
4433
4434.morehover {
4435  position:absolute;
4436  right:6px;
4437  top:-9px;
4438  width:40px;
4439  height:35px;
4440  z-index:99;
4441  overflow:hidden;
4442
4443  -webkit-opacity:0;
4444     -moz-opacity:0;
4445       -o-opacity:0;
4446          opacity:0;
4447
4448  -webkit-transform-origin:100% 0%;
4449     -moz-transform-origin:100% 0%;
4450       -o-transform-origin:100% 0%;
4451          transform-origin:100% 0%;
4452
4453  -webkit-transition-property: -webkit-opacity;
4454  -webkit-transition-duration: .25s;
4455  -webkit-transition-timing-function:ease;
4456
4457  -moz-transition-property: -moz-opacity;
4458  -moz-transition-duration: .25s;
4459  -moz-transition-timing-function:ease;
4460
4461  -o-transition-property: -o-opacity;
4462  -o-transition-duration: .25s;
4463  -o-transition-timing-function:ease;
4464
4465  transition-property: opacity;
4466  transition-duration: .25s;
4467  transition-timing-function:ease;
4468}
4469
4470.morehover:hover,
4471.morehover.hover {
4472  opacity:1;
4473  height:385px;
4474  width:268px;
4475  -webkit-transition-property:height,  -webkit-opacity;
4476}
4477
4478.morehover .top {
4479  width:268px;
4480  height:39px;
4481  background:url(../images/more_top.png) no-repeat;
4482}
4483
4484.morehover .mid {
4485  width:228px;
4486  background:url(../images/more_mid.png) repeat-y;
4487  padding:10px 20px 0 20px;
4488}
4489
4490.morehover .mid .header {
4491  border-bottom:1px solid #ccc;
4492  font-weight:bold;
4493}
4494
4495.morehover .bottom {
4496  width:268px;
4497  height:6px;
4498  background:url(../images/more_bottom.png) no-repeat;
4499}
4500
4501.morehover ul {
4502  margin:10px 10px 20px 0;
4503}
4504
4505.morehover ul li {
4506  list-style:none;
4507}
4508
4509.morehover ul li.active a,
4510.morehover ul li.active a:hover {
4511  color:#222 !important;
4512}
4513
4514.morehover ul li.active img {
4515  margin-right:4px;
4516}
4517
4518
4519
4520
4521/* MARQUEE */
4522.slideshow-container {
4523  width:100%;
4524  overflow:hidden;
4525  position:relative;
4526}
4527.slideshow-container .slideshow-prev {
4528  position:absolute;
4529  top:50%;
4530  left:0px;
4531  margin-top:-36px;
4532  z-index:99;
4533}
4534.slideshow-container .slideshow-next {
4535  position:absolute;
4536  top:50%;
4537  margin-top:-36px;
4538  z-index:99;
4539  right:0px;
4540}
4541
4542.slideshow-container .pagination {
4543  position:absolute;
4544  bottom:20px;
4545  width:100%;
4546  text-align:center;
4547  z-index:99;
4548}
4549.slideshow-container .pagination ul {
4550  margin:0;
4551}
4552.slideshow-container .pagination ul li{
4553  display: inline-block;
4554  width:12px;
4555  height:12px;
4556  text-indent:-8000px;
4557  list-style:none;
4558  margin: 0 2px;
4559  border-radius:6px;
4560  background-color:#ccc;
4561  cursor:pointer;
4562        -webkit-transition:color .5s ease-in;
4563        -moz-transition:color .5s ease-in;
4564        -o-transition:color .5s ease-in;
4565        transition:color .5s ease-in;
4566}
4567.slideshow-container .pagination ul li:hover {
4568  background-color:#999;
4569}
4570.slideshow-container .pagination ul li.active {
4571  background-color:#33b5e5;
4572}
4573.slideshow-container .pagination ul li.active:hover {
4574  background-color:#33b5e5;
4575}
4576.slideshow-container ul li {
4577  display:inline;
4578  list-style:none;
4579}
4580
4581
4582
4583
4584a.download-sdk {
4585    float:right;
4586    margin:-10px 0;
4587    height:30px;
4588    padding-top:4px;
4589    padding-bottom:0px;
4590}
4591
4592#nav-x {
4593  padding-top: 13px;
4594}
4595
4596#nav-x .wrap {
4597  min-height:32px;
4598}
4599
4600#nav-x .wrap,
4601#searchResults.wrap {
4602    max-width:940px;
4603    border-bottom:1px solid #CCC;
4604}
4605
4606#searchResults.wrap #leftSearchControl {
4607  min-height:700px
4608}
4609.nav-x {
4610    margin-left:0;
4611    margin-bottom:0;
4612}
4613
4614
4615
4616
4617
4618
4619
4620
4621
4622
4623/*
4624 * CSS Styles that are needed by jScrollPane for it to operate correctly.
4625 */
4626
4627.jspContainer {
4628  overflow: hidden;
4629  position: relative;
4630}
4631
4632.jspPane {
4633  position: absolute;
4634  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4635}
4636
4637.jspVerticalBar {
4638  position: absolute;
4639  top: 0;
4640  right: 0;
4641  width: 4px;
4642  height: 100%;
4643  background: #f5f5f5;
4644}
4645
4646.jspHorizontalBar {
4647  position: absolute;
4648  bottom: 0;
4649  left: 0;
4650  width: 100%;
4651  height: 4px;
4652  background: #f5f5f5;
4653}
4654
4655.jspVerticalBar *,
4656.jspHorizontalBar * {
4657  margin: 0;
4658  padding: 0;
4659}
4660.jspCap {
4661  display: block;
4662}
4663
4664.jspVerticalBar .jspCap {
4665  height: 4px;
4666}
4667
4668.jspHorizontalBar .jspCap {
4669  width: 0;
4670  height: 100%;
4671}
4672
4673.jspHorizontalBar .jspCap {
4674  float: left;
4675}
4676
4677.jspTrack {
4678  position: relative;
4679}
4680
4681.jspDrag {
4682  background: #bbb;
4683  position: relative;
4684  top: 0;
4685  left: 0;
4686  cursor: pointer;
4687}
4688
4689.jspDrag:hover,
4690.jspDrag:active {
4691  border-color: #09c;
4692  background-color: #4cadcb;
4693  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4694  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4695  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4696  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4697  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4698  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4699  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4700}
4701
4702.jspHorizontalBar .jspTrack,
4703.jspHorizontalBar .jspDrag {
4704  float: left;
4705  height: 100%;
4706}
4707
4708.jspArrow {
4709  background: #999;
4710  text-indent: -20000px;
4711  display: block;
4712  cursor: pointer;
4713}
4714
4715.jspArrow.jspDisabled {
4716  cursor: default;
4717  background: #ccc;
4718}
4719
4720.jspVerticalBar .jspArrow {
4721  height: 16px;
4722}
4723
4724.jspHorizontalBar .jspArrow {
4725  width: 16px;
4726  float: left;
4727  height: 100%;
4728}
4729
4730.jspVerticalBar .jspArrow:focus {
4731  outline: none;
4732}
4733
4734.jspCorner {
4735  float: left;
4736  height: 100%;
4737}
4738
4739/* Yuk! CSS Hack for IE6 3 pixel bug :( */
4740* html .jspCorner {
4741  margin: 0 -3px 0 0;
4742}
4743/******* end of jscrollpane *********/
4744
4745
4746
4747
4748
4749/************ DEVELOP HOMEPAGE ******************/
4750
4751/* Slideshow */
4752.slideshow-develop {
4753  height: 300px;
4754  width: 940px;
4755  position: relative;
4756  overflow:hidden;
4757}
4758.slideshow-develop .frame {
4759  width: 940px;
4760  height: 300px;
4761}
4762.slideshow-develop img.play {
4763  max-width:350px;
4764  max-height:240px;
4765  margin:20px 0 0 90px;
4766  -webkit-transform: perspective(800px ) rotateY( 35deg );
4767  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4768  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4769  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4770}
4771.slideshow-develop img.play.no-shadow {
4772    box-shadow: none;
4773    -moz-box-shadow: none;
4774    -webkit-box-shadow: none;
4775}
4776.slideshow-develop img.play.no-transform {
4777  -webkit-transform: none;
4778}
4779.slideshow-develop a.slideshow-next {
4780  background: url(../images/arrow-right-develop.png);
4781}
4782.slideshow-develop a.slideshow-prev {
4783  background: url(../images/arrow-left-develop.png);
4784}
4785.slideshow-develop .content-right {
4786  float: left;
4787}
4788.slideshow-develop .content-right h2 {
4789  padding:0;
4790  margin-bottom:10px;
4791  border:none;
4792}
4793.slideshow-develop .item {
4794  height: 300px;
4795  width: 940px;
4796}
4797.slideshow-develop .pagination ul li.active {
4798  background-color: #F80;
4799}
4800.slideshow-develop .pagination ul li.active:hover {
4801  background-color: #F80;
4802}
4803.slideshow-develop .item hr {
4804  margin:5px 0 10px;
4805}
4806.slideshow-develop .item p {
4807  margin:10px 0;
4808}
4809.slideshow-develop .item p.title-intro {
4810  position:absolute;
4811  margin:0;
4812}
4813
4814/* Feeds */
4815.feed ul {
4816  margin: 0;
4817}
4818.feed .feed-nav {
4819  height: 25px;
4820  border-bottom: 1px solid #CCC;
4821}
4822.feed .feed-nav li {
4823  list-style: none;
4824  float: left;
4825  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4826  margin-right: 25px;
4827  cursor: pointer;
4828}
4829.feed .feed-nav li.active {
4830  color: #000;
4831  border-bottom: 4px solid #F80;
4832}
4833.feed .feed-container {
4834  overflow: hidden;
4835  width: 460px;
4836}
4837.feed .feed-container .feed-frame {
4838  width: 1000px;
4839}
4840.feed .feed-container .feed-frame ul {
4841  float: left;
4842  width:460px;
4843}
4844.feed .feed-container .feed-frame ul ul {
4845  float: none;
4846  margin:10px 0 0 30px;
4847}
4848.feed .feed-container .feed-frame li {
4849  list-style: none;
4850  margin: 20px 0 20px 0;
4851  width: 460px;
4852  height:93px;
4853}
4854.feed .feed-container .feed-frame li.playlist {
4855  height:auto;
4856}
4857.feed .feed-container .feed-frame li.playlist a {
4858  height:93px;
4859  display:block;
4860}
4861.feed .feed-container .feed-frame li.more {
4862  height:20px;
4863  margin:10px 0 5px 5px;
4864}
4865.feed .feed-container .feed-frame li.more a {
4866  height:inherit;
4867}
4868.feed .feed-container .feed-frame li.playlist-video {
4869  list-style: none;
4870  margin: 0;
4871  width: 460px;
4872  height:55px;
4873  font-size:12px;
4874}
4875.feed .feed-container .feed-frame li.playlist-video a {
4876  height:45px;
4877  padding:5px;
4878}
4879.feed .feed-container .feed-frame li.playlist-video h5 {
4880  font-size:12px;
4881  line-height:13px;
4882  margin:0;
4883}
4884.feed .feed-container .feed-frame li.playlist-video p {
4885  margin:5px 0 0;
4886  line-height:15px;
4887}
4888.feed-container .feed-frame div.feed-image {
4889  float: left;
4890  border: 1px solid #999;
4891  margin:0 20px 0 0;
4892  width:122px;
4893  height:92px;
4894  background:url('../images/blog-default.png') no-repeat 0 0;
4895  background-size:180px;
4896}
4897#jd-content .feed .feed-container .feed-frame li img {
4898  float: left;
4899  border: 1px solid #999;
4900  margin:0 20px 0 0;
4901  width:122px;
4902  height:92px;
4903}
4904#jd-content .feed .feed-container .feed-frame li.playlist-video img {
4905  width:inherit;
4906  height:inherit;
4907}
4908
4909.feed .feed-container .feed-frame li a,
4910.feed .feed-container .feed-frame li a:active {
4911  color:#555 !important;
4912}
4913
4914.feed .feed-container .feed-frame li a:hover,
4915.feed .feed-container .feed-frame li a:hover * {
4916  color:#7AA1B0 !important;
4917}
4918
4919/* Video player */
4920#player-wrapper {
4921  display:none;
4922  margin: -1px auto 0;
4923  position: relative;
4924  width: 940px;
4925  height: 0px;
4926}
4927#player-frame {
4928  background: #EFEFEF;
4929  border: 1px solid #CCC;
4930  padding: 0px 207px;
4931  z-index: 10; /* stay above marque, but below search suggestions */
4932  width: 525px;
4933  height: 330px;
4934  position: relative;
4935}
4936
4937
4938
4939/************ DEVELOP TOPIC CONTAINERS ************/
4940
4941.landing-banner,
4942.landing-docs {
4943  margin:20px 0;
4944}
4945.landing-banner > div:first-child,
4946.landing-docs > div:first-child,
4947.landing-docs > .col-12 {
4948  margin-left:0;
4949  min-height:280px;
4950}
4951.landing-banner.short > div {
4952  min-height:50px;
4953}
4954.landing-banner > div:last-child,
4955.landing-docs > div:last-child,
4956.landing-docs > .col-12 {
4957  margin-right:0;
4958}
4959
4960.landing-banner > div > *:last-child {
4961  margin-bottom:0;
4962}
4963.landing-banner h1 {
4964  margin-top:0;
4965}
4966.landing-docs,
4967.landing-banner {
4968  clear:both;
4969  overflow:hidden;
4970}
4971.landing-docs h3 {
4972  font-size:14px;
4973  line-height:21px;
4974  color:#555;
4975  text-transform:uppercase;
4976  border-bottom:1px solid #CCC;
4977  margin:0 0 20px;
4978}
4979.landing-docs a {
4980  color:#333 !important;
4981}
4982
4983.landing-docs a:hover,
4984.landing-docs a:hover * {
4985  color:#7AA1B0 !important
4986}
4987
4988.landing-docs .normal-links a {
4989  color:#258aaf !important;
4990}
4991
4992.plusone {
4993  float:right;
4994}
4995
4996
4997
4998.next-docs {
4999  border-top:1px solid #ccc;
5000  margin:40px 0 0;
5001  padding:5px 0 0;
5002  clear:left;
5003  overflow:hidden;
5004}
5005.next-docs div:first-child {
5006  margin-left:0;
5007}
5008.next-docs div:last-child {
5009  margin-right:0;
5010}
5011
5012.next-docs h2 {
5013  font-size:14px;
5014  line-height:21px;
5015  color:#555;
5016  text-transform:uppercase;
5017  border-bottom:none;
5018  margin:0 0 1em;
5019  padding:5px 0 0;
5020}
5021
5022
5023
5024/************* HOME/LANDING PAGE *****************/
5025
5026.slideshow-home {
5027  height: 500px;
5028  width: 940px;
5029  border-bottom: 1px solid #CCC;
5030  position: relative;
5031  margin: 0;
5032}
5033.slideshow-home .frame {
5034  width: 940px;
5035  height: 500px;
5036}
5037.slideshow-home .content-left {
5038  float: left;
5039  text-align: center;
5040  vertical-align: center;
5041  margin: 0 0 0 35px;
5042}
5043.slideshow-home .content-right {
5044  margin: 80px 0 0 0;
5045}
5046.slideshow-home .content-right p {
5047  margin-bottom: 10px;
5048}
5049.slideshow-home .content-right p:last-child {
5050  margin-top: 15px;
5051}
5052.slideshow-home .content-right h1 {
5053  padding:0;
5054}
5055.slideshow-home .item {
5056  height: 500px;
5057  width: 940px;
5058}
5059.home-sections {
5060  padding: 30px 20px 20px;
5061  margin: 20px 0;
5062  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
5063}
5064.home-sections ul {
5065  margin: 0;
5066}
5067.home-sections ul li {
5068  float: left;
5069  display: block;
5070  list-style: none;
5071  width: 170px;
5072  height: 35px;
5073  border: 1px solid #ccc;
5074  background: white;
5075  margin-right: 10px;
5076  border-radius: 1px;
5077  -webkit-border-radius: 1px;
5078  -moz-border-radius: 1px;
5079  box-shadow: 1px 1px 5px #EEE;
5080  -webkit-box-shadow: 1px 1px 5px #EEE;
5081  -moz-box-shadow: 1px 1px 5px #EEE;
5082  background: white;
5083}
5084.home-sections ul li:hover {
5085  background: #F9F9F9;
5086  border: 1px solid #CCC;
5087}
5088.home-sections ul li a,
5089.home-sections ul li a:hover {
5090  font-weight: bold;
5091  margin-top: 8px;
5092  line-height: 18px;
5093  float: left;
5094  width: 100%;
5095  text-align: center;
5096  color: #09c !important;
5097}
5098.home-sections ul li a {
5099  font-weight: bold;
5100  margin-top: 8px;
5101  line-height: 18px;
5102  float: left;
5103  width:100%;
5104  text-align:center;
5105}
5106.home-sections ul li img {
5107  float: left;
5108  margin: -8px 0 0 10px;
5109}
5110.home-sections ul li.last {
5111  margin-right: 0px;
5112}
5113.fullpage #footer {
5114  margin-top: -40px;
5115}
5116
5117/************ DISTRIBUTE PAGES ******************/
5118
5119.article-detail #body-content {
5120  padding-top: 10px;
5121}
5122
5123/* A container for grid sets with uppercase h3 and rule */
5124.dynamic-grid h3 {
5125  font-size:14px;
5126  line-height:21px;
5127  color:#555;
5128  text-transform:uppercase;
5129  border-bottom:1px solid #CCC;
5130  padding:8px 0 0 1px;
5131  margin-bottom:14px;
5132  clear:both;
5133}
5134
5135.top-right-float {
5136  float: right;
5137}
5138
5139.clearfloat {
5140  float: none;
5141  clear: both;
5142}
5143
5144.border-img {
5145  border: 1px solid #CCC;
5146}
5147
5148.center-img {
5149  margin: auto;
5150  text-align: center;
5151}
5152.center-img img {
5153  margin-bottom: 15px;
5154}
5155
5156.figure img, .border-img {
5157  margin-bottom: 15px;
5158}
5159
5160/************ RESOURCE CARDS ******************/
5161
5162/* Resource cards, 12, 13, 16-col */
5163
5164/* Basic card-styling with shadow */
5165.resource-card {
5166  border-radius: 1px;
5167  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
5168  background: #fefefe;
5169}
5170
5171/* Styling for background image including tinting and section icons in stacks */
5172.card-bg {
5173  display: block;
5174  position: absolute;
5175  vertical-align: top;
5176  width: 100%;
5177  left: 0;
5178  top: 0;
5179  background-size: cover;
5180  background-repeat: no-repeat;
5181  background-position: center;
5182  background-image: url(../images/resource-card-default-android.jpg);
5183}
5184.card-bg:after {
5185  content: "";
5186  display: block;
5187  height: 100%;
5188  width: 100%;
5189  opacity: 1;
5190  background: rgba(0, 0, 0, 0.2);
5191  -webkit-transition: opacity 0.5s;
5192  -moz-transition: opacity 0.5s;
5193  -o-transition: opacity 0.5s;
5194  transition: opacity 0.5s;
5195}
5196.card-bg .card-section-icon {
5197  position: absolute;
5198  top: 50%;
5199  width: 100%;
5200  margin-top: -35px;
5201  text-align: center;
5202  padding-top: 65px;
5203  z-index: 100;
5204}
5205.card-bg .card-section-icon .icon {
5206  position: absolute;
5207  left: 50%;
5208  margin-left: -28px;
5209  top: 0px;
5210  width: 56px;
5211  height: 56px;
5212  background-repeat: no-repeat;
5213  background-position: 50% 50%;
5214  background-image: url(../images/stack-icon.png);
5215}
5216.card-bg .card-section-icon .section {
5217  text-transform: uppercase;
5218  color: white;
5219  font-size: 14px;
5220}
5221
5222.card-info {
5223  position: absolute;
5224  -webkit-box-sizing: border-box;
5225  -moz-box-sizing: border-box;
5226  box-sizing: border-box;
5227  top: 0;
5228  right: 0;
5229  bottom: 0;
5230  left: 0;
5231  overflow: hidden;
5232  background: #fefefe;
5233  padding: 4px 12px 6px 12px;
5234}
5235.card-info .section {
5236  text-transform: uppercase;
5237  color: #898989;
5238  font-size: 12px;
5239  margin-bottom: 1px;
5240}
5241.card-info .title {
5242  color: #363636;
5243  white-space: nowrap;
5244  overflow: hidden;
5245  text-overflow: ellipsis;
5246  padding-bottom: 5px;
5247  margin-bottom: -2px;
5248  font-size: 16px;
5249}
5250.card-info .description {
5251  overflow: hidden;
5252}
5253.card-info .description .text {
5254  color: #464646;
5255  font: 13px/15px Roboto Condensed;
5256  overflow: hidden;
5257  width:100%;
5258}
5259.card-info .description .util {
5260  position: absolute;
5261  right: 5px;
5262  bottom: 70px; /*-2px;*/
5263  opacity: 0;
5264  -webkit-transition: opacity 0.5s;
5265  -moz-transition: opacity 0.5s;
5266  -o-transition: opacity 0.5s;
5267  transition: opacity 0.5s;
5268}
5269.card-info.empty-desc .title {
5270  white-space: normal;
5271  overflow: visible;
5272}
5273.card-info.empty-desc .description {
5274  display: none;
5275}
5276/* Truncate card summaries at bounding box and
5277 * and apply ellipsis at lower right */
5278.ellipsis {
5279  overflow: hidden;
5280  float:right;
5281  line-height: 15px;
5282  width:100%;
5283}
5284.resource-card-6x6 .card-info .description .teddddddxt {
5285 float:left;
5286  position:relative;
5287  margin-left:0;
5288}
5289.ellipsis:before {
5290  content:"";
5291  float: left;
5292  width: 5px;
5293  height:100%;
5294}
5295.ellipsis > *:first-child.text {
5296  float: right;
5297  width: 100%  !important;
5298  margin-left: -5px;
5299}
5300.ellipsis:after {
5301  content: "\02026";
5302  height:17px;
5303  padding-bottom:4px;
5304
5305  box-sizing: content-box;
5306  -webkit-box-sizing: content-box;
5307  -moz-box-sizing: content-box;
5308
5309  float: right; position: relative;
5310  top: -16px; left: 100%;
5311  width: 4em; margin-left: -4em;
5312  padding-right: 5px;
5313
5314  background: -webkit-gradient(linear, left top, right top,
5315    from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5316  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5317  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5318  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5319  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5320}
5321.ellipsis:after {
5322  font-style: normal; color: #aaa;
5323  font-size:13px;
5324  text-align: right;
5325}
5326
5327/* Flow Layout */
5328.resource-flow-layout {
5329  display: inline-block;
5330}
5331.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack {
5332  float: left;
5333  position: relative;
5334}
5335.resource-flow-layout .resource-card-stack > .resource-card {
5336  margin-right: 0px !important;
5337}
5338.resource-flow-layout:after {
5339  content: ".";
5340  display: block;
5341  height: 10;
5342  position:relative;
5343  clear: both;
5344  visibility: hidden;
5345}
5346.resource-card:hover {
5347  cursor: pointer;
5348}
5349.resource-card:hover .card-bg:after {
5350  opacity: 0;
5351}
5352/* disabled to make way for fade/ellipsis truncation,
5353   and the plusone moves up.
5354.resource-card:hover .card-info .description .text {
5355  padding-right: 70px;
5356} */
5357.resource-card:hover .card-info .description .util {
5358  opacity: 1;
5359}
5360
5361/* Carousel Layout */
5362/* Carousel styles for landing page */
5363.resource-carousel-layout {
5364  margin: 20px 0 20px 0;
5365  position: relative;
5366  overflow: hidden;
5367}
5368.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5369  display: none;
5370}
5371.resource-carousel-layout .pagination {
5372  bottom: 0px;
5373}
5374.resource-carousel-layout .frame li {
5375  position: relative;
5376}
5377.resource-carousel-layout .frame li .card-bg {
5378  height: 300px;
5379}
5380.resource-carousel-layout .frame li .card-info {
5381  padding: 7px 15px 0px 15px;
5382  top: 300px;
5383}
5384.resource-carousel-layout .frame li .card-info .section {
5385  font-size: 13px;
5386  margin-bottom: 7px;
5387}
5388.resource-carousel-layout .frame li .card-info .title {
5389  font-size: 25px;
5390  margin-bottom: 2px;
5391}
5392.resource-carousel-layout .frame li .card-info .description {
5393  font-family: 15px/16px Roboto Condensed, sans-serif;
5394}
5395.resource-carousel-layout .frame li .card-info .description .text {
5396  height: 40px;
5397}
5398.resource-carousel-layout .frame li .card-info .description .util {
5399  bottom:97px;
5400  right:4px;
5401}
5402
5403/* Stack Layout */
5404.resource-stack-layout {
5405  display: inline-block;
5406}
5407.resource-stack-layout .resource-card-stack {
5408  float: left;
5409  position: relative;
5410}
5411.resource-stack-layout .resource-card {
5412  margin-bottom: 20px;
5413  display: block;
5414  position: relative;
5415}
5416.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5417  /*text-transform: uppercase;*/
5418  color: #898989;
5419  font-size: 17px;
5420  line-height: 24px;
5421  margin-bottom: 6px;
5422}
5423.resource-stack-layout .section-card {
5424  height: 284px;
5425}
5426.resource-stack-layout .section-card > .card-bg {
5427  height: 192px;
5428}
5429.resource-stack-layout .section-card > .card-info {
5430  padding: 4px 12px 6px 12px;
5431  top: 192px;
5432}
5433.resource-stack-layout .section-card > .card-info .section {
5434  display: none;
5435}
5436.resource-stack-layout .section-card > .card-info .title {
5437  font-size: 17px;
5438  border-bottom: 1px solid #959595;
5439  padding-bottom: 0px;
5440}
5441.resource-stack-layout .section-card > .card-info .description {
5442  font-size: 13px;
5443  line-height: 15px;
5444}
5445.resource-stack-layout .section-card > .card-info .description .text {
5446  height: 30px;
5447}
5448.resource-stack-layout .related-card {
5449  height: 90px;
5450}
5451.resource-stack-layout .related-card > .card-bg {
5452  left: 0;
5453  top: 0;
5454  width: 90px;
5455  height: 100%;
5456  position: absolute;
5457  display: block;
5458}
5459.resource-stack-layout .related-card > .card-info {
5460  left: 90px;
5461  padding: 4px 12px 4px 12px;
5462}
5463.resource-stack-layout .related-card > .card-info .section {
5464  font-size: 12px;
5465  margin-bottom: 1px;
5466  display: none;
5467}
5468.resource-stack-layout .related-card > .card-info .title {
5469  font-size: 16px;
5470  margin-bottom: -2px;
5471  white-space: normal;
5472  overflow: visible;
5473  text-overflow: ellipsis;
5474}
5475.resource-stack-layout .related-card > .card-info .title:after {
5476  content: url(../images/link-out.png);
5477  display: block;
5478}
5479.resource-stack-layout .related-card > .card-info .description {
5480  display: none;
5481}
5482.resource-stack-layout .section-card-menu {
5483  /* Flexible height */
5484  display: block;
5485  height: auto;
5486  width: auto;
5487}
5488.resource-stack-layout .section-card-menu .card-bg {
5489  height: 155px;
5490  /* Flexible height */
5491  position: relative;
5492  display: inline-block;
5493  vertical-align: top;
5494}
5495.resource-stack-layout .section-card-menu .card-info {
5496  padding: 4px 12px 0px 12px;
5497  /* Flexible height */
5498  position: relative;
5499  left: auto;
5500  top: auto;
5501  right: auto;
5502  bottom: auto;
5503}
5504.resource-stack-layout .section-card-menu .card-info ul {
5505  list-style: none;
5506  margin: 0;
5507}
5508.resource-stack-layout .section-card-menu .card-info ul li {
5509  list-style: none;
5510  margin: 0;
5511  padding: 15px 0;
5512  border-top-width: 1px;
5513  border-top-style: solid;
5514  border-top-color: #959595;
5515}
5516.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 {
5517  color: #363636 !important;
5518}
5519.resource-stack-layout .section-card-menu .card-info ul li:first-child {
5520  border-top: none;
5521}
5522.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5523  opacity: 1;
5524  -webkit-transition: opacity 0.5s;
5525  -moz-transition: opacity 0.5s;
5526  -o-transition: opacity 0.5s;
5527  transition: opacity 0.5s;
5528}
5529.resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5530  max-height: 30px;
5531  opacity: 1;
5532  -webkit-transition: max-height 0.5s, opacity 1s;
5533  -moz-transition: max-height 0.5s, opacity 1s;
5534  -o-transition: max-height 0.5s, opacity 1s;
5535  transition: max-height 0.5s, opacity 1s;
5536}
5537.resource-stack-layout .section-card-menu .card-info .title {
5538  font-size: 16px;
5539  margin-bottom: -2px;
5540  position: relative;
5541}
5542.resource-stack-layout .section-card-menu .card-info .title:after {
5543  background: url(../images/stack-arrow-right.png);
5544  content: '';
5545  opacity: 0;
5546  -webkit-transition: opacity 0.25s;
5547  -moz-transition: opacity 0.25s;
5548  -o-transition: opacity 0.25s;
5549  transition: opacity 0.25s;
5550  position: absolute;
5551  right: 0px;
5552  top: 3px;
5553  width: 10px;
5554  height: 15px;
5555}
5556.resource-stack-layout .section-card-menu .card-info .title.more {
5557  text-transform: uppercase;
5558  color: #898989;
5559  display: inline-block;
5560}
5561.resource-stack-layout .section-card-menu .card-info .title.more:after {
5562  background: url(../images/stack-arrow-right.png);
5563  content: '';
5564  display: block;
5565  position: absolute;
5566  right: -20px;
5567  top: 3px;
5568  width: 10px;
5569  height: 15px;
5570}
5571.resource-stack-layout .section-card-menu .card-info .description {
5572  max-height: 0px;
5573  opacity: 0;
5574  overflow: hidden;
5575  font-size: 13px;
5576  line-height: 15px;
5577  /* Hover off */
5578  -webkit-transition: max-height 0.5s, opacity 0.5s;
5579  -moz-transition: max-height 0.5s, opacity 0.5s;
5580  -o-transition: max-height 0.5s, opacity 0.5s;
5581  transition: max-height 0.5s, opacity 0.5s;
5582}
5583.resource-stack-layout .section-card-menu .card-info .description .text {
5584  height: 30px;
5585}
5586.resource-stack-layout:after {
5587  content: ".";
5588  display: block;
5589  height: 0;
5590  clear: both;
5591  visibility: hidden;
5592}
5593
5594/* Generate the flow layout styles for a 3-column 16-col span */
5595.resource-flow-layout.col-16 {
5596  margin: 0 -14px 0 0;
5597  width: 954px;
5598}
5599.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack {
5600  margin: 0 14px 20px 0;
5601}
5602.resource-flow-layout.col-16 .resource-card-row-stack-last {
5603  margin-bottom: 0px !important;
5604}
5605.resource-flow-layout.col-16 .resource-card-col-stack-last {
5606  margin-bottom: 0px !important;
5607}
5608.resource-flow-layout.col-16 .resource-card-3x6 {
5609  width: 145px;
5610  height: 284px;
5611}
5612.resource-flow-layout.col-16 .resource-card-3x12 {
5613  width: 145px;
5614  height: 588px;
5615}
5616.resource-flow-layout.col-16 .resource-card-3x18 {
5617  width: 145px;
5618  height: 892px;
5619}
5620.resource-flow-layout.col-16 .resource-card-6x6 {
5621  width: 304px;
5622  height: 284px;
5623}
5624.resource-flow-layout.col-16 .resource-card-6x12 {
5625  width: 304px;
5626  height: 588px;
5627}
5628.resource-flow-layout.col-16 .resource-card-6x18 {
5629  width: 304px;
5630  height: 892px;
5631}
5632.resource-flow-layout.col-16 .resource-card-9x6 {
5633  width: 463px;
5634  height: 284px;
5635}
5636.resource-flow-layout.col-16 .resource-card-9x12 {
5637  width: 463px;
5638  height: 588px;
5639}
5640.resource-flow-layout.col-16 .resource-card-9x18 {
5641  width: 463px;
5642  height: 892px;
5643}
5644.resource-flow-layout.col-16 .resource-card-12x6 {
5645  width: 622px;
5646  height: 284px;
5647}
5648.resource-flow-layout.col-16 .resource-card-12x12 {
5649  width: 622px;
5650  height: 588px;
5651}
5652.resource-flow-layout.col-16 .resource-card-12x18 {
5653  width: 622px;
5654  height: 892px;
5655}
5656.resource-flow-layout.col-16 .resource-card-15x6 {
5657  width: 781px;
5658  height: 284px;
5659}
5660.resource-flow-layout.col-16 .resource-card-15x12 {
5661  width: 781px;
5662  height: 588px;
5663}
5664.resource-flow-layout.col-16 .resource-card-15x18 {
5665  width: 781px;
5666  height: 892px;
5667}
5668.resource-flow-layout.col-16 .resource-card-18x6 {
5669  width: 940px;
5670  height: 284px;
5671}
5672.resource-flow-layout.col-16 .resource-card-18x12 {
5673  width: 940px;
5674  height: 420px;
5675}
5676.resource-flow-layout.col-16 .resource-card-18x18 {
5677  width: 940px;
5678  height: 892px;
5679}
5680.resource-flow-layout.col-16 .resource-card-3x2 {
5681  width: 145px;
5682  height: 95px;
5683}
5684.resource-flow-layout.col-16 .resource-card-3x2x3 {
5685  width: 145px;
5686  height: 90px;
5687  margin-bottom: 7px;
5688}
5689.resource-flow-layout.col-16 .resource-card-3x3 {
5690  width: 145px;
5691  height: 142px;
5692}
5693.resource-flow-layout.col-16 .resource-card-3x3x2 {
5694  width: 145px;
5695  height: 138px;
5696  margin-bottom: 8px;
5697}
5698.resource-flow-layout.col-16 .resource-card-6x2 {
5699  width: 304px;
5700  height: 95px;
5701}
5702.resource-flow-layout.col-16 .resource-card-6x2x3 {
5703  width: 304px;
5704  height: 90px;
5705  margin-bottom: 7px;
5706}
5707.resource-flow-layout.col-16 .resource-card-6x3 {
5708  width: 304px;
5709  height: 142px;
5710}
5711.resource-flow-layout.col-16 .resource-card-6x3x2 {
5712  width: 304px;
5713  height: 138px;
5714  margin-bottom: 8px;
5715}
5716.resource-flow-layout.col-16 .resource-card-9x2 {
5717  width: 463px;
5718  height: 95px;
5719}
5720.resource-flow-layout.col-16 .resource-card-9x2x3 {
5721  width: 463px;
5722  height: 90px;
5723  margin-bottom: 7px;
5724}
5725.resource-flow-layout.col-16 .resource-card-9x3 {
5726  width: 463px;
5727  height: 142px;
5728}
5729.resource-flow-layout.col-16 .resource-card-9x3x2 {
5730  width: 463px;
5731  height: 138px;
5732  margin-bottom: 8px;
5733}
5734.resource-flow-layout.col-16 .resource-card-12x2 {
5735  width: 622px;
5736  height: 95px;
5737}
5738.resource-flow-layout.col-16 .resource-card-12x2x3 {
5739  width: 622px;
5740  height: 90px;
5741  margin-bottom: 7px;
5742}
5743.resource-flow-layout.col-16 .resource-card-12x3 {
5744  width: 622px;
5745  height: 142px;
5746}
5747.resource-flow-layout.col-16 .resource-card-12x3x2 {
5748  width: 622px;
5749  height: 138px;
5750  margin-bottom: 8px;
5751}
5752.resource-flow-layout.col-16 .resource-card-15x2 {
5753  width: 781px;
5754  height: 95px;
5755}
5756.resource-flow-layout.col-16 .resource-card-15x2x3 {
5757  width: 781px;
5758  height: 90px;
5759  margin-bottom: 7px;
5760}
5761.resource-flow-layout.col-16 .resource-card-15x3 {
5762  width: 781px;
5763  height: 142px;
5764}
5765.resource-flow-layout.col-16 .resource-card-15x3x2 {
5766  width: 781px;
5767  height: 138px;
5768  margin-bottom: 8px;
5769}
5770.resource-flow-layout.col-16 .resource-card-18x2 {
5771  width: 940px;
5772  height: 95px;
5773}
5774.resource-flow-layout.col-16 .resource-card-18x2x3 {
5775  width: 940px;
5776  height: 90px;
5777  margin-bottom: 7px;
5778}
5779.resource-flow-layout.col-16 .resource-card-18x3 {
5780  width: 940px;
5781  height: 142px;
5782}
5783.resource-flow-layout.col-16 .resource-card-18x3x2 {
5784  width: 940px;
5785  height: 138px;
5786  margin-bottom: 8px;
5787}
5788
5789/* Generate the flow layout styles for a 3-column 16-col span */
5790.resource-flow-layout.col-12 {
5791  margin: 0 -14px 0 0;
5792  width: 714px;
5793}
5794
5795.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack {
5796  margin: 0 14px 20px 0;
5797}
5798.resource-flow-layout.col-12 .resource-card-row-stack-last {
5799  margin-bottom: 0px !important;
5800}
5801.resource-flow-layout.col-12 .resource-card-col-stack-last {
5802  margin-bottom: 0px !important;
5803}
5804.resource-flow-layout.col-12 .resource-card-3x6 {
5805  width: 105px;
5806  height: 284px;
5807}
5808.resource-flow-layout.col-12 .resource-card-3x12 {
5809  width: 105px;
5810  height: 588px;
5811}
5812.resource-flow-layout.col-12 .resource-card-3x18 {
5813  width: 105px;
5814  height: 892px;
5815}
5816.resource-flow-layout.col-12 .resource-card-6x6 {
5817  width: 224px;
5818  height: 284px;
5819}
5820.resource-flow-layout.col-12 .resource-card-6x12 {
5821  width: 224px;
5822  height: 588px;
5823}
5824.resource-flow-layout.col-12 .resource-card-6x18 {
5825  width: 224px;
5826  height: 892px;
5827}
5828.resource-flow-layout.col-12 .resource-card-9x6 {
5829  width: 343px;
5830  height: 284px;
5831}
5832.resource-flow-layout.col-12 .resource-card-9x12 {
5833  width: 343px;
5834  height: 588px;
5835}
5836.resource-flow-layout.col-12 .resource-card-9x18 {
5837  width: 343px;
5838  height: 892px;
5839}
5840.resource-flow-layout.col-12 .resource-card-12x6 {
5841  width: 462px;
5842  height: 284px;
5843}
5844.resource-flow-layout.col-12 .resource-card-12x12 {
5845  width: 462px;
5846  height: 588px;
5847}
5848.resource-flow-layout.col-12 .resource-card-12x18 {
5849  width: 462px;
5850  height: 892px;
5851}
5852.resource-flow-layout.col-12 .resource-card-15x6 {
5853  width: 581px;
5854  height: 284px;
5855}
5856.resource-flow-layout.col-12 .resource-card-15x12 {
5857  width: 581px;
5858  height: 588px;
5859}
5860.resource-flow-layout.col-12 .resource-card-15x18 {
5861  width: 581px;
5862  height: 892px;
5863}
5864.resource-flow-layout.col-12 .resource-card-18x6 {
5865  width: 700px;
5866  height: 284px;
5867}
5868.resource-flow-layout.col-12 .resource-card-18x12 {
5869  width: 700px;
5870  height: 420px;
5871}
5872.resource-flow-layout.col-12 .resource-card-18x18 {
5873  width: 700px;
5874  height: 892px;
5875}
5876.resource-flow-layout.col-12 .resource-card-3x2 {
5877  width: 105px;
5878  height: 95px;
5879}
5880.resource-flow-layout.col-12 .resource-card-3x2x3 {
5881  width: 105px;
5882  height: 90px;
5883  margin-bottom: 7px;
5884}
5885.resource-flow-layout.col-12 .resource-card-3x3 {
5886  width: 105px;
5887  height: 142px;
5888}
5889.resource-flow-layout.col-12 .resource-card-3x3x2 {
5890  width: 105px;
5891  height: 138px;
5892  margin-bottom: 8px;
5893}
5894.resource-flow-layout.col-12 .resource-card-6x2 {
5895  width: 224px;
5896  height: 95px;
5897}
5898.resource-flow-layout.col-12 .resource-card-6x2x3 {
5899  width: 224px;
5900  height: 90px;
5901  margin-bottom: 7px;
5902}
5903.resource-flow-layout.col-12 .resource-card-6x3 {
5904  width: 224px;
5905  height: 142px;
5906}
5907.resource-flow-layout.col-12 .resource-card-6x3x2 {
5908  width: 224px;
5909  height: 138px;
5910  margin-bottom: 8px;
5911}
5912.resource-flow-layout.col-12 .resource-card-9x2 {
5913  width: 343px;
5914  height: 95px;
5915}
5916.resource-flow-layout.col-12 .resource-card-9x2x3 {
5917  width: 343px;
5918  height: 90px;
5919  margin-bottom: 7px;
5920}
5921.resource-flow-layout.col-12 .resource-card-9x3 {
5922  width: 343px;
5923  height: 142px;
5924}
5925.resource-flow-layout.col-12 .resource-card-9x3x2 {
5926  width: 343px;
5927  height: 138px;
5928  margin-bottom: 8px;
5929}
5930.resource-flow-layout.col-12 .resource-card-12x2 {
5931  width: 462px;
5932  height: 95px;
5933}
5934.resource-flow-layout.col-12 .resource-card-12x2x3 {
5935  width: 462px;
5936  height: 90px;
5937  margin-bottom: 7px;
5938}
5939.resource-flow-layout.col-12 .resource-card-12x3 {
5940  width: 462px;
5941  height: 142px;
5942}
5943.resource-flow-layout.col-12 .resource-card-12x3x2 {
5944  width: 462px;
5945  height: 138px;
5946  margin-bottom: 8px;
5947}
5948.resource-flow-layout.col-12 .resource-card-15x2 {
5949  width: 581px;
5950  height: 95px;
5951}
5952.resource-flow-layout.col-12 .resource-card-15x2x3 {
5953  width: 581px;
5954  height: 90px;
5955  margin-bottom: 7px;
5956}
5957.resource-flow-layout.col-12 .resource-card-15x3 {
5958  width: 581px;
5959  height: 142px;
5960}
5961.resource-flow-layout.col-12 .resource-card-15x3x2 {
5962  width: 581px;
5963  height: 138px;
5964  margin-bottom: 8px;
5965}
5966.resource-flow-layout.col-12 .resource-card-18x2 {
5967  width: 700px;
5968  height: 95px;
5969}
5970.resource-flow-layout.col-12 .resource-card-18x2x3 {
5971  width: 700px;
5972  height: 90px;
5973  margin-bottom: 7px;
5974}
5975.resource-flow-layout.col-12 .resource-card-18x3 {
5976  width: 700px;
5977  height: 142px;
5978}
5979.resource-flow-layout.col-12 .resource-card-18x3x2 {
5980  width: 700px;
5981  height: 138px;
5982  margin-bottom: 8px;
5983}
5984
5985/* Generate the flow layout styles for a 3-column 13-col span */
5986
5987.resource-flow-layout.col-13 {
5988  margin: 0 -14px 0 0;
5989  width: 774px;
5990}
5991.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack {
5992  margin: 0 14px 20px 0;
5993}
5994.resource-flow-layout.col-13 .resource-card-row-stack-last {
5995  margin-bottom: 0px !important;
5996}
5997.resource-flow-layout.col-13 .resource-card-col-stack-last {
5998  margin-bottom: 0px !important;
5999}
6000.resource-flow-layout.col-13 .resource-card-3x6 {
6001  width: 115px;
6002  height: 284px;
6003}
6004.resource-flow-layout.col-13 .resource-card-3x12 {
6005  width: 115px;
6006  height: 588px;
6007}
6008.resource-flow-layout.col-13 .resource-card-3x18 {
6009  width: 115px;
6010  height: 892px;
6011}
6012.resource-flow-layout.col-13 .resource-card-6x6 {
6013  width: 244px;
6014  height: 284px;
6015}
6016.resource-flow-layout.col-13 .resource-card-6x12 {
6017  width: 244px;
6018  height: 588px;
6019}
6020.resource-flow-layout.col-13 .resource-card-6x18 {
6021  width: 244px;
6022  height: 892px;
6023}
6024.resource-flow-layout.col-13 .resource-card-9x6 {
6025  width: 373px;
6026  height: 284px;
6027}
6028.resource-flow-layout.col-13 .resource-card-9x12 {
6029  width: 373px;
6030  height: 588px;
6031}
6032.resource-flow-layout.col-13 .resource-card-9x18 {
6033  width: 373px;
6034  height: 892px;
6035}
6036.resource-flow-layout.col-13 .resource-card-12x6 {
6037  width: 502px;
6038  height: 284px;
6039}
6040.resource-flow-layout.col-13 .resource-card-12x12 {
6041  width: 502px;
6042  height: 588px;
6043}
6044.resource-flow-layout.col-13 .resource-card-12x18 {
6045  width: 502px;
6046  height: 892px;
6047}
6048.resource-flow-layout.col-13 .resource-card-15x6 {
6049  width: 631px;
6050  height: 284px;
6051}
6052.resource-flow-layout.col-13 .resource-card-15x12 {
6053  width: 631px;
6054  height: 588px;
6055}
6056.resource-flow-layout.col-13 .resource-card-15x18 {
6057  width: 631px;
6058  height: 892px;
6059}
6060.resource-flow-layout.col-13 .resource-card-18x6 {
6061  width: 760px;
6062  height: 284px;
6063}
6064.resource-flow-layout.col-13 .resource-card-18x12 {
6065  width: 760px;
6066  height: 420px;
6067}
6068.resource-flow-layout.col-13 .resource-card-18x18 {
6069  width: 760px;
6070  height: 892px;
6071}
6072.resource-flow-layout.col-13 .resource-card-3x2 {
6073  width: 115px;
6074  height: 95px;
6075}
6076.resource-flow-layout.col-13 .resource-card-3x2x3 {
6077  width: 115px;
6078  height: 90px;
6079  margin-bottom: 7px;
6080}
6081.resource-flow-layout.col-13 .resource-card-3x3 {
6082  width: 115px;
6083  height: 142px;
6084}
6085.resource-flow-layout.col-13 .resource-card-3x3x2 {
6086  width: 115px;
6087  height: 138px;
6088  margin-bottom: 8px;
6089}
6090.resource-flow-layout.col-13 .resource-card-6x2 {
6091  width: 244px;
6092  height: 95px;
6093}
6094.resource-flow-layout.col-13 .resource-card-6x2x3 {
6095  width: 244px;
6096  height: 90px;
6097  margin-bottom: 7px;
6098}
6099.resource-flow-layout.col-13 .resource-card-6x3 {
6100  width: 244px;
6101  height: 142px;
6102}
6103.resource-flow-layout.col-13 .resource-card-6x3x2 {
6104  width: 244px;
6105  height: 138px;
6106  margin-bottom: 8px;
6107}
6108.resource-flow-layout.col-13 .resource-card-9x2 {
6109  width: 373px;
6110  height: 95px;
6111}
6112.resource-flow-layout.col-13 .resource-card-9x2x3 {
6113  width: 373px;
6114  height: 90px;
6115  margin-bottom: 7px;
6116}
6117.resource-flow-layout.col-13 .resource-card-9x3 {
6118  width: 373px;
6119  height: 142px;
6120}
6121.resource-flow-layout.col-13 .resource-card-9x3x2 {
6122  width: 373px;
6123  height: 138px;
6124  margin-bottom: 8px;
6125}
6126.resource-flow-layout.col-13 .resource-card-12x2 {
6127  width: 502px;
6128  height: 95px;
6129}
6130.resource-flow-layout.col-13 .resource-card-12x2x3 {
6131  width: 502px;
6132  height: 90px;
6133  margin-bottom: 7px;
6134}
6135.resource-flow-layout.col-13 .resource-card-12x3 {
6136  width: 502px;
6137  height: 142px;
6138}
6139.resource-flow-layout.col-13 .resource-card-12x3x2 {
6140  width: 502px;
6141  height: 138px;
6142  margin-bottom: 8px;
6143}
6144.resource-flow-layout.col-13 .resource-card-15x2 {
6145  width: 631px;
6146  height: 95px;
6147}
6148.resource-flow-layout.col-13 .resource-card-15x2x3 {
6149  width: 631px;
6150  height: 90px;
6151  margin-bottom: 7px;
6152}
6153.resource-flow-layout.col-13 .resource-card-15x3 {
6154  width: 631px;
6155  height: 142px;
6156}
6157.resource-flow-layout.col-13 .resource-card-15x3x2 {
6158  width: 631px;
6159  height: 138px;
6160  margin-bottom: 8px;
6161}
6162.resource-flow-layout.col-13 .resource-card-18x2 {
6163  width: 760px;
6164  height: 95px;
6165}
6166.resource-flow-layout.col-13 .resource-card-18x2x3 {
6167  width: 760px;
6168  height: 90px;
6169  margin-bottom: 7px;
6170}
6171.resource-flow-layout.col-13 .resource-card-18x3 {
6172  width: 760px;
6173  height: 142px;
6174}
6175.resource-flow-layout.col-13 .resource-card-18x3x2 {
6176  width: 760px;
6177  height: 138px;
6178  margin-bottom: 8px;
6179}
6180
6181/*
6182  The following are styles for cards in the flowlayout above, styled by the number of rows they span
6183*/
6184/* Single row items, might be simpler to just apply a class */
6185.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 {
6186  height: 192px;
6187}
6188.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 {
6189  padding: 4px 12px 6px 12px;
6190  top: 192px;
6191}
6192.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 {
6193  font-size: 12px;
6194  margin-bottom: 1px;
6195}
6196.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 {
6197  font-size: 16px;
6198  margin-bottom: -2px;
6199}
6200.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 {
6201  font-size: 13px;
6202  line-height: 15px;
6203}
6204.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 {
6205  height: 30px;
6206}
6207
6208/* Double row items */
6209.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 {
6210  height: 320px;
6211}
6212.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 {
6213  padding: 4px 12px 6px 12px;
6214  top: 320px;
6215}
6216.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 {
6217  font-size: 12px;
6218  margin-bottom: 1px;
6219}
6220.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 {
6221  font-size: 16px;
6222  margin-bottom: -2px;
6223  white-space: normal;
6224}
6225.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 {
6226  font-size: 13px;
6227  line-height: 15px;
6228}
6229
6230/* 1/3 row items */
6231.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 {
6232  left: 0;
6233  top: 0;
6234  width: 90px;
6235  height: 100%;
6236  position: absolute;
6237  display: block;
6238}
6239.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 {
6240  left: 90px;
6241  padding: 4px 12px 4px 12px;
6242  height: 80px;
6243  overflow: hidden;
6244}
6245.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 {
6246  font-size: 12px;
6247  margin-bottom: 1px;
6248  /* display: none; */
6249}
6250.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 {
6251  font-size: 16px;
6252  margin-bottom: -2px;
6253  white-space: normal;
6254  overflow: visible;
6255  text-overflow: ellipsis;
6256}
6257.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 {
6258  /* content: url(../images/link-out.png); */
6259  display: block;
6260}
6261.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 {
6262  display: none;
6263}
6264
6265/* 1/2 row items */
6266.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 {
6267  left: 0;
6268  top: 0;
6269  width: 90px;
6270  height: 100%;
6271  position: absolute;
6272  display: block;
6273}
6274.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 {
6275  left: 90px;
6276  padding: 4px 12px 0px 12px;
6277}
6278.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 {
6279  font-size: 12px;
6280  margin-bottom: 1px;
6281  display: none;
6282}
6283.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 {
6284  font-size: 16px;
6285  margin-bottom: -2px;
6286  white-space: normal;
6287  overflow: visible;
6288}
6289.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 {
6290  font-size: 12px;
6291  line-height: 15px;
6292  padding-right: 0px !important;
6293  height: 80px;
6294}
6295.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 {
6296  display: none;
6297}
6298/* placement of plusone */
6299.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 {
6300  bottom:2px;
6301}
6302.resource-card-18x12 > .card-info .description .util {
6303  bottom:2px;
6304}
6305/* Overrides for col-16 6x6 cards linking to local content on landing pages.
6306   Suppresses "section" and puts the title above a hairline rule. */
6307.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
6308  display:none;
6309}
6310.landing  .card-info .title {
6311  color: #898989;
6312  font-size: 17px;
6313  line-height: 24px;
6314  margin-bottom: 6px;
6315  border-bottom: 1px solid #959595;
6316  padding-bottom: 0px;
6317}
6318.landing .card-info .description {
6319  font-size: 13px;
6320  line-height: 15px;
6321}
6322.landing .card-info .description .text {
6323height:30px;
6324}
6325.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
6326  bottom:2px;
6327}
6328/*
6329  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
6330*/
6331.resource-stack-layout.col-16 {
6332  margin: 0 -14px 0 0;
6333  width: 954px;
6334}
6335.resource-stack-layout.col-16 .resource-card-stack {
6336  margin: 0 14px 0 0;
6337  width: 304px;
6338}
6339
6340/* Example of card menu tinting */
6341.resource-widget[data-section=distribute\/tools] .section-card-menu
6342.card-bg:after {
6343  background: rgba(126, 55, 148, 0.4) !important;
6344}
6345.resource-widget[data-section=distribute\/tools] .section-card-menu
6346.card-section-icon .icon {
6347  background-color: #7e3794 !important;
6348}
6349.resource-widget[data-section=distribute\/tools] .section-card-menu
6350.card-info ul li {
6351  border-top-color: #7e3794 !important;
6352}
6353
6354/* tinting for stacks */
6355
6356div.jd-descr > .resource-widget[data-section=distribute\/tools]
6357.section-card-menu .card-info ul li {
6358  border-top-color: #7e3794 !important;
6359}