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