default.css revision 25c89dda9f416466f28f2fb2341d272ace709199 
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: 20px; }
102
103#devdoc-nav span.small {
104  font-size:12px;
105  font-weight:normal;
106}
107
108#content {
109  width: 760px;
110  float: left; }
111
112a:hover,
113acronym:hover {
114  color: #7aa1b0 !important; }
115
116a:focus,
117a:active {
118  color: #33b5e5 !important; }
119
120a.external-link {
121  background:url('../images/styles/open_new_page.png') no-repeat 100% 50%;
122  padding-right:16px;
123}
124
125img {
126  border: none; }
127#jd-content img {
128  margin-bottom:15px;
129}
130
131ul {
132  margin: 0;
133  padding: 0; }
134
135strong {
136  font-weight: 500; }
137
138em {
139  font-style: italic; }
140
141acronym,
142.tooltip-link {
143  border-bottom: 1px dotted #555555;
144  cursor: help; }
145
146acronym:hover,
147.tooltip-link:hover {
148  color: #7aa1b0;
149  border-bottom-color: #7aa1b0; }
150
151img.with-shadow,
152video.with-shadow {
153  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
154
155/* disclosures mixin */
156/* content layout */
157.layout-content-row {
158  display: inline-block;
159  margin-bottom: 10px; }
160  .layout-content-row:after {
161    content: ".";
162    display: block;
163    height: 0;
164    clear: both;
165    visibility: hidden; }
166  * html .layout-content-row {
167    height: 1px; }
168
169.layout-content-col {
170  float: left;
171  margin-left: 20px; }
172  .layout-content-col:first-child {
173    margin-left: 0; }
174  .layout-content-col h3,
175  .layout-content-col h4 {
176    margin-top:0; }
177
178.layout-content-col.span-1 {
179  width: 40px; }
180
181.layout-content-col.span-2 {
182  width: 100px; }
183
184.layout-content-col.span-3 {
185  width: 160px; }
186
187.layout-content-col.span-4 {
188  width: 220px; }
189
190.layout-content-col.span-5 {
191  width: 280px; }
192
193.layout-content-col.span-6 {
194  width: 340px; }
195
196.layout-content-col.span-7 {
197  width: 400px; }
198
199.layout-content-col.span-8 {
200  width: 460px; }
201
202.layout-content-col.span-9 {
203  width: 520px; }
204
205.layout-content-col.span-10 {
206  width: 580px; }
207
208.layout-content-col.span-11 {
209  width: 640px; }
210
211.layout-content-col.span-12 {
212  width: 700px; }
213
214.layout-content-col.span-13 {
215  width: 760px; }
216
217.vspace.size-1 {
218  height: 10px; }
219
220.vspace.size-2 {
221  height: 20px; }
222
223.vspace.size-3 {
224  height: 30px; }
225
226.vspace.size-4 {
227  height: 40px; }
228
229.vspace.size-5 {
230  height: 50px; }
231
232.vspace.size-6 {
233  height: 60px; }
234
235.vspace.size-7 {
236  height: 70px; }
237
238.vspace.size-8 {
239  height: 80px; }
240
241.vspace.size-9 {
242  height: 90px; }
243
244.vspace.size-10 {
245  height: 100px; }
246
247.vspace.size-11 {
248  height: 110px; }
249
250.vspace.size-12 {
251  height: 120px; }
252
253.vspace.size-13 {
254  height: 130px; }
255
256.vspace.size-14 {
257  height: 140px; }
258
259.vspace.size-15 {
260  height: 150px; }
261
262.vspace.size-16 {
263  height: 160px; }
264
265/* nav */
266#nav {
267  /* section header divs */
268  /* expanded section header divs */
269  /* sublinks */ }
270  #nav li {
271    list-style-type: none;
272    font-size: 14px;
273    margin:0;
274    padding:0;
275    line-height: 15px; }
276  #nav a {
277    color: #555555;
278    text-decoration: none;
279    word-wrap:break-word; }
280  #nav .nav-section-header {
281    position: relative;
282    margin-bottom: 1px;
283    padding: 0 30px 0 0; }
284  #nav li.selected a, #nav li.selected > .nav-section-header > a {
285    color: #09C;
286  }
287  #nav li.selected ul li a {
288  /* don't highlight child items */
289    color: #555555; }
290  #nav .nav-section .nav-section .nav-section-header {
291    /* no white line between second level sections */
292    margin-bottom: 0; }
293    /* section header links */
294    #nav > li > div > a {
295      display: block;
296      color: #333333;
297      font-weight: 500;
298      padding: 10px 0 10px 10px; }
299    #nav .nav-section-header:after {
300      content: '';
301      background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
302      width: 34px;
303      height: 34px;
304      display: block;
305      position: absolute;
306      top: 0;
307      right: 0; }
308    #nav .nav-section-header.empty {
309      padding:0; }
310    #nav .nav-section-header.empty:after {
311      display: none; }
312    /* nested nav headers */
313    #nav .nav-section .nav-section {
314      position: relative;
315      padding: 0;
316      margin: 0; }
317    #nav .nav-section li a {
318    /* first gen child (2nd level li) */
319      display:block;
320      font-weight: normal;
321      text-transform: none;
322      padding: 7px 5px 7px 10px;
323       }
324    #nav .nav-section li li a {
325    /* second gen child (3rd level li) */
326      padding: 5px 5px 5px 10px;
327       }
328  #nav li.expanded .nav-section-header {
329    background:#e9e9e9;
330    background: rgba(0, 0, 0, 0.05); }
331  #nav li.expanded li .nav-section-header {
332    background: transparent; }
333  #nav li.expanded li ul {
334  /* 3rd level ul */
335    padding:0 0 0 10px;
336  }
337    #nav li.expanded > .nav-section-header:after {
338      content: '';
339      background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
340      width: 34px;
341      height: 34px; }
342  #nav li.expanded li ul.tree-list-children {
343    padding: 0;
344  }
345  #nav li.expanded li ul.tree-list-children .tree-list-children {
346    padding:0 0 0 10px;
347  }
348  #nav li span.tree-list-subtitle {
349    display:inline-block;
350    padding:5px 0 0 10px;
351    color:#555;
352    text-transform:uppercase;
353    font-size:12px;
354  }
355  #nav li span.tree-list-subtitle:before {
356    content: '—';
357  }
358  #nav li span.tree-list-subtitle:after {
359    content: '—';
360  }
361  #nav li ul {
362    display:none;
363    overflow: hidden;
364    margin: 0; }
365    #nav li ul.animate-height-in {
366      -webkit-transition: height 0.25s ease-in;
367      -moz-transition: height 0.25s ease-in;
368      transition: height 0.25s ease-in; }
369    #nav li ul.animate-height-out {
370      -webkit-transition: height 0.25s ease-out;
371      -moz-transition: height 0.25s ease-out;
372      transition: height 0.25s ease-out; }
373    #nav li ul li {
374      padding: 0; }
375      #nav li li li {
376        padding: 0; }
377  #nav li.expanded ul {
378    }
379    #nav li ul > li {
380      padding:0;
381    }
382    #nav li ul > li:last-child {
383      padding-bottom:5px;
384    }
385    #nav li ul.tree-list-children > li:last-child {
386      padding-bottom:0;
387    }
388    #nav li.expanded ul > li {
389      background:#efefef;
390      background: rgba(0, 0, 0, 0.03); }
391    #nav li.expanded ul > li li {
392      background:inherit; }
393  #nav li ul.tree-list-children ul {
394    display:block; }
395
396.new,
397.new-child {
398  font-size: .78em;
399  font-weight: bold;
400  color: #ff3d3d;
401  vertical-align:top;
402  white-space:nowrap;
403}
404
405/* content header */
406.content-header {
407  height: 30px;
408  margin:20px 0 25px;
409  padding:0 0 10px;}
410.content-header.just-links {
411  margin-bottom:0;
412  padding-bottom:0;}
413
414.content-header h1 {
415  color:#000;
416  margin:0;
417  border-bottom:0;
418  padding:0;
419}
420
421.content-footer {
422  border-top: 1px solid #ccc;
423  margin-top: 10px;
424  padding-top:10px;
425  height: 30px; }
426
427.content-footer .col-9 {
428  margin-left:0;
429}
430.content-footer .col-4 {
431  margin-right:0;
432}
433.content-footer.wrap {
434  width:940px;
435}
436
437.paging-links {
438  position: relative; }
439  .paging-links a {
440    position: absolute; }
441  .paging-links a,
442  .training-nav-top a {
443    font-size: 14px;
444    line-height: 30px;
445    color: #555555;
446    text-decoration: none;
447    text-transform: uppercase; }
448    .paging-links .prev-page-link:before,
449    .training-nav-top .prev-page-link:before {
450      content: '';
451      background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%;
452      width: 10px;
453      height: 10px;
454      display: inline-block;
455      margin-right: 5px; }
456    .training-nav-top .next-page-link,
457    .training-nav-top .start-class-link,
458    .training-nav-top .start-course-link {
459    right: 10px; }
460    .paging-links .prev-page-link {
461      left: -15px; }
462    .paging-links .next-page-link {
463      right: 0px; }
464    .next-page-link:after,
465    .start-class-link:after,
466    .start-course-link:after,
467    .next-class-link:after,
468    .go-link:after {
469      content: '';
470      background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
471      width: 10px;
472      height: 10px;
473      display: inline-block;
474      margin-left: 5px; }
475    .prev-page-link.inline:before {
476      content: none; }
477    .next-page-link.inline:after {
478      content: none; }
479
480
481  .training-nav-top a {
482    display:block;
483    float:left;
484    width:122px;
485    height:28px;
486    padding: 8px;
487    line-height:28px;
488    text-align:center;
489    border:1px solid #DADADA;
490    border-bottom:0;
491  }
492
493  .training-nav-top a.next-page-link {
494    border-left:0;
495    width:123px;
496  }
497
498  .paging-links a.disabled,
499  .training-nav-top a.disabled,
500  .content-footer a.disabled {
501    color:#bbb;
502  }
503
504  .paging-links a.disabled:hover,
505  .training-nav-top a.disabled:hover,
506  .content-footer a.disabled:hover {
507    cursor:default;
508    color:#bbb !important;
509  }
510
511  .training-nav-top a.start-class-link,
512  .training-nav-top a.start-course-link {
513    width:262px;
514  }
515
516  /* list of classes on course landing page */
517  ol.class-list {
518    list-style:none;
519    margin-left:0;
520  }
521  ol.class-list>li {
522    margin:0 0 15px;
523    padding:5px 0 0;
524    overflow:hidden;
525    border-top:1px solid #ccc;
526  }
527  ol.class-list li a.title {
528    font-size:16px;
529    margin:0;
530    clear:left;
531    display:block;
532    height:32px;
533    padding:0 4px;
534  }
535  ol.class-list li a.title h2 {
536    color:inherit;
537    margin:0 0 10px;
538    display:block;
539    float:left;
540    width:675px;
541  }
542  ol.class-list li a.title span {
543    display:none;
544    float:left;
545    font-size:18px;
546    font-weight:bold;
547    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
548    width: 10px;
549    height: 32px;
550  }
551  ol.class-list li a.title:hover {
552    background:#ddd;
553    color:#258AAF !important;
554  }
555  ol.class-list li a.title:hover span {
556    display:block;
557  }
558
559  #jd-content
560  ol.class-list li img {
561    float:left;
562    clear:left;
563    width:64px;
564    margin:0 20px 0 0;
565  }
566  ol.class-list li p.description {
567    float:left;
568    display:block;
569    width:250px;
570    margin:0;
571  }
572  ol.class-list li p.description.article {
573    width: 550px;
574  }
575  ol.class-list ol {
576    float:left;
577    width:320px;
578    margin:0 0 0 30px;
579    list-style:none;
580    margin:0 0 0 20px;
581  }
582  ol.class-list div.lessons li {
583    margin:0 0 6px;
584    line-height:16px;
585  }
586
587
588  .hide {
589    display:none !important;
590  }
591
592  .content-footer.next-class {
593    display:block;
594    border:0;
595    margin-top:0;
596    padding-top:0;
597  }
598
599  .content-footer.next-class a.next-class-link {
600    display:block;
601    float:right;
602    text-transform:uppercase;
603  }
604
605
606
607  /* inner-doc tabs w/ title */
608
609div#title-tabs-wrapper {
610  border-bottom:1px solid #ccc;
611  margin:20px 0 30px;
612}
613h1.with-title-tabs {
614  display:inline-block;
615  margin:0 0 -1px 0;
616  padding:0 60px 0 0;
617  border-bottom:1px solid #F9F9F9;
618}
619ul#title-tabs {
620  list-style:none;
621  padding:0;
622  height:29px;
623  margin:0;
624  font-size:16px;
625  line-height:26px;
626  display:inline-block;
627  vertical-align:bottom;
628}
629ul#title-tabs li {
630  display:block;
631  float:left;
632  margin-right:40px;
633  border-bottom: 3px solid transparent;
634}
635ul#title-tabs li.selected {
636  border-bottom: 3px solid #93C;
637}
638ul#title-tabs li a {
639  color:#333;
640}
641ul#title-tabs li a:hover,
642ul#title-tabs li a:active {
643  color:#93C !important;
644}
645
646
647
648/* content body */
649@-webkit-keyframes glowheader {
650  from {
651    background-color: #33b5e5;
652    color: #000;
653    border-bottom-color: #000; }
654
655  to {
656    background-color: transparent;
657    color: #33b5e5;
658    border-bottom-color: #33b5e5; } }
659
660@-moz-keyframes glowheader {
661  from {
662    background-color: #33b5e5;
663    color: #000;
664    border-bottom-color: #000; }
665
666  to {
667    background-color: transparent;
668    color: #33b5e5;
669    border-bottom-color: #33b5e5; } }
670
671@keyframes glowheader {
672  from {
673    background-color: #33b5e5;
674    color: #000;
675    border-bottom-color: #000; }
676
677  to {
678    background-color: transparent;
679    color: #33b5e5;
680    border-bottom-color: #33b5e5; } }
681
682h2:target,
683h3:target {
684    -webkit-animation-name: glowheader;
685    -moz-animation-name: glowheader;
686    animation-name: glowheader;
687    -webkit-animation-duration: 0.7s;
688    -moz-animation-duration: 0.7s;
689    animation-duration: 0.7s;
690    -webkit-animation-timing-function: ease-out;
691    -moz-animation-timing-function: ease-out;
692    animation-timing-function: ease-out; }
693
694.design ol h4 {
695  margin-bottom:0;
696}
697.design ol {
698  counter-reset: item; }
699  .design ol>li {
700    font-size: 14px;
701    line-height: 20px;
702    list-style-type: none;
703    position: relative; }
704    .design ol>li:before {
705      content: counter(item) ". ";
706      counter-increment: item;
707      position: absolute;
708      left: -20px;
709      top: 0; }
710    .design ol li.value-1:before {
711      content: "1. "; }
712    .design ol li.value-2:before {
713      content: "2. "; }
714    .design ol li.value-3:before {
715      content: "3. "; }
716    .design ol li.value-4:before {
717      content: "4. "; }
718    .design ol li.value-5:before {
719      content: "5. "; }
720    .design ol li.value-6:before {
721      content: "6. "; }
722    .design ol li.value-7:before {
723      content: "7. "; }
724    .design ol li.value-8:before {
725      content: "8. "; }
726    .design ol li.value-9:before {
727      content: "9. "; }
728    .design ol li.value-10:before {
729      content: "10. "; }
730.design .with-callouts ol>li {
731  list-style-position: inside;
732  margin-left: 0; }
733  .design .with-callouts ol>li:before {
734    display: inline;
735    left: -20px;
736    float: left;
737    width: 17px;
738    color: #33b5e5;
739    font-weight: 500; }
740.design .with-callouts ul>li {
741  list-style-position: outside; }
742
743/* special list items */
744li.no-bullet {
745  list-style-type: none !important; }
746li.no-bullet *{
747  margin:0; }
748
749.design li.with-icon {
750  position: relative;
751  margin-left: 20px;
752  min-height: 30px; }
753  .design li.with-icon p {
754    margin-left: 0 !important; }
755  .design li.with-icon:before {
756    position: absolute;
757    left: -40px;
758    top: 0;
759    content: '';
760    width: 30px;
761    height: 30px; }
762  .design li.with-icon.tablet:before {
763    background-image: url(../images/styles/ico_phone_tablet.png); }
764  .design li.with-icon.web:before {
765    background-image: url(../images/styles/ico_web.png); }
766  .design li.with-icon.action:before {
767    background-image: url(../images/styles/ico_action.png); }
768  .design li.with-icon.use:before {
769    background-image: url(../images/styles/ico_use.png); }
770
771/* figures and callouts */
772.figure {
773  position: relative; }
774  .figure.pad-below {
775    margin-bottom: 20px; }
776  .figure .figure-callout {
777    position: absolute;
778    color: #fff;
779    font-weight: 500;
780    font-size: 16px;
781    line-height: 23px;
782    text-align: center;
783    background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
784    padding-right: 2px;
785    width: 30px;
786    height: 29px;
787    z-index: 1000; }
788    .figure .figure-callout.top {
789      top: -9px; }
790    .figure .figure-callout.right {
791      right: -5px; }
792
793.figure-caption {
794  margin: 0 10px 20px 0;
795  font-size: 14px;
796  line-height: 20px;
797  font-style: italic; }
798
799/* rows of figures */
800.figure-row {
801  font-size: 0;
802  line-height: 0;
803  /* to prevent space between figures */ }
804  .figure-row .figure {
805    display: inline-block;
806    vertical-align: top; }
807  .figure-row .figure + .figure {
808    margin-left: 10px;
809    /* reintroduce space between figures */ }
810
811/* video  containers */
812.framed-galaxynexus-land-span-13 {
813  background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat
814scroll top left;
815  padding: 42px 122px 62px 126px;
816  overflow: hidden; }
817  .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video,
818.framed-galaxynexus-land-span-13 img {
819    width: 512px;
820    height: 286px; }
821
822
823.framed-galaxynexus-land-span-8{
824  background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat
825scroll top left;
826  padding: 26px 68px 38px 72px;
827  overflow: hidden; }
828  .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video,
829.framed-galaxynexus-land-span-8 img {
830    width: 320px;
831    height: 180px; }
832
833.framed-galaxynexus-port-span-9 {
834  background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat
835scroll top left;
836  padding: 95px 122px 107px 124px;
837  overflow: hidden; }
838  .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video,
839.framed-galaxynexus-port-span-9 img {
840    width: 274px;
841    height: 488px; }
842
843.framed-galaxynexus-port-span-5 {
844  background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat
845scroll top left;
846  padding: 75px 31px 76px 33px;
847  overflow: hidden; }
848  .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video,
849.framed-galaxynexus-port-span-5 img {
850    width: 216px;
851    height: 384px; }
852
853.framed-nexus4-port-216 {
854  background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat
855scroll top left;
856  background-size:240px 465px;
857  padding: 52px 12px 52px 12px;
858  overflow: hidden; }
859  .framed-nexus4-port-216, .framed-nexus4-port-216 video,
860  .framed-nexus4-port-216 img {
861    width: 216px;
862    height: 360px; }
863
864
865/* landing page disclosures */
866.landing-page-link {
867  text-decoration: none;
868  font-weight: 500;
869  color: #333333; }
870  .landing-page-link:after {
871    content: '';
872    background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
873    width: 10px;
874    height: 10px;
875    display: inline-block;
876    margin-left: 5px; }
877
878/* tooltips */
879.tooltip-box {
880  position: absolute;
881  background-color: rgba(0, 0, 0, 0.9);
882  border-radius: 2px;
883  font-size: 14px;
884  line-height: 20px;
885  color: #fff;
886  padding: 6px 10px;
887  max-width: 250px;
888  z-index: 10000; }
889  .tooltip-box.below:after {
890    position: absolute;
891    content: '';
892    line-height: 0;
893    display: block;
894    top: -10px;
895    left: 5px;
896    border: 5px solid transparent;
897    border-bottom-color: rgba(0, 0, 0, 0.9); }
898
899/* video note */
900.video-instructions {
901  margin-top: 10px;
902  margin-bottom: 10px; }
903  .video-instructions:before {
904    content: '';
905    background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left;
906    display: inline-block;
907    width: 12px;
908    height: 12px;
909    margin-right: 8px; }
910  .video-instructions:after {
911    content: 'Click device screen to replay movie.'; }
912
913/* download buttons */
914.download-button {
915  display: block;
916  margin-bottom: 5px;
917  text-decoration: none;
918  background-color: #33b5e5;
919  color: #fff !important;
920  font-weight: 500;
921  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
922  padding: 6px 12px;
923  border-radius: 2px; }
924  .download-button:hover, .download-button:focus {
925    background-color: #0099cc;
926    color: #fff !important; }
927  .download-button:active {
928    background-color: #006699; }
929
930/* UI tables and other things found in Writing style and Settings pattern */
931.ui-table {
932  width: 100%;
933  background-color: #282828;
934  color: #fff;
935  border-radius: 2px;
936  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
937  border-collapse: separate; }
938  .ui-table th,
939  .ui-table td {
940    padding: 5px 10px;
941    background-color: inherit;
942    border:0;}
943  .ui-table thead th {
944    font-weight: bold; }
945  .ui-table tfoot td {
946    border-top: 1px solid #494949;
947    border-right: 1px solid #494949;
948    text-align: center; }
949    .ui-table tfoot td:last-child {
950      border-right: 0; }
951
952.layout-with-list-item-margins {
953  margin-left: 30px !important; }
954
955.emulate-content-left-padding {
956  margin-left: 10px; }
957
958.do-dont-label {
959  margin-bottom: 10px;
960  padding-left: 20px;
961  background: transparent none no-repeat scroll 0px 3px; }
962  .do-dont-label.bad {
963    background-image: url(../images/styles/ico_wrong.png); }
964  .do-dont-label.good {
965    background-image: url(../images/styles/ico_good.png); }
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985/***** PREVIOUSLY style.css ******************/
986
987
988
989
990
991@media screen, projection, print {
992[dir='rtl'] {
993    direction: rtl;
994}
995html {
996    line-height: 20px;
997}
998pre, table, input, textarea, code {
999    font-size: 1em;
1000}
1001address, abbr, cite {
1002    font-style: normal;
1003}
1004[dir='rtl'] th {
1005    text-align: right;
1006}
1007html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q,
1008html[lang^=zh] blockquote, html[lang^=zh] q {
1009    font-style: normal;
1010}
1011q {
1012    font-style: italic;
1013}
1014fieldset, iframe, img {
1015    border: 0;
1016}
1017img {
1018  -ms-interpolation-mode: bicubic;
1019  vertical-align: middle;
1020  max-width: 100%;
1021}
1022q {
1023    quotes: none;
1024}
1025sup, sub {
1026    font-size: 11px;
1027    line-height: 0;
1028}
1029}
1030
1031@media screen, projection {
1032
1033table, fieldset {
1034    margin: 0;
1035}
1036h1 {
1037    color:#333;
1038    font-size: 22px;
1039    margin: 20px 0 20px;
1040    padding:0 0 10px;
1041}
1042h1, h2 {
1043    line-height: 32px;
1044}
1045h1.short {
1046  margin-right:320px;
1047}
1048h1.short {
1049  margin-right:320px;
1050}
1051h1.super {
1052    font-size: 37px;
1053}
1054h2 {
1055    color:#333;
1056    font-size: 20px;
1057    margin: 20px 0 20px;
1058    padding:0;
1059}
1060h3 {
1061    color:#333;
1062    font-size: 18px;
1063}
1064h3, h4 {
1065    color:#333;
1066    line-height: 20px;
1067    margin: 10px 0;
1068}
1069h4 {
1070  font-size: 16px;
1071}
1072h5 {
1073  font-size: 14px;
1074}
1075h5, h6 {
1076  margin: 5px 0;
1077}
1078h6 {
1079  font-size: 12px;
1080}
1081hr { /* applied to the bottom of h2 elements */
1082  height: 1px;
1083  margin: 5px 0 20px;
1084  border: 0;
1085  background: #ccc;
1086}
1087p, pre, table, form {
1088    margin: 0 0 15px;
1089}
1090small {
1091  font-size: 11.5px;
1092  color: #000;
1093}
1094ul, ol {
1095    margin: 0 0 15px 18px;
1096    padding: 0;
1097}
1098[dir='rtl'] ul, [dir='rtl'] ol {
1099    margin: 10px 30px 10px 10px;
1100}
1101ul ul, ul ol, ol ul, ol ol {
1102    margin-bottom: 0;
1103    margin-top: 0;
1104}
1105li {
1106  margin:0 0 5px;
1107}
1108dd {
1109  margin:0 0 10px 30px;
1110}
1111dd p,
1112dd pre,
1113dd ul,
1114dd ol,
1115dd dl {
1116  margin-top:10px;
1117}
1118li p,
1119li pre,
1120li ul,
1121li ol,
1122li dl {
1123  margin-top:5px;
1124  margin-bottom:5px;
1125}
1126pre strong, pre b, a strong, a b, a code {
1127    color: inherit;
1128}
1129pre, code {
1130    color: #060;
1131    font: 13px/1.5 monospace;
1132}
1133code {
1134    font-weight:bold;
1135    font: 13px/14px monospace;
1136}
1137
1138legend {
1139    display: none;
1140}
1141a:link, a:visited {
1142  color: #258aaf;
1143  text-decoration: none;
1144}
1145a:focus, a:hover, a:active {
1146  color: #33B5E5;
1147  text-decoration: none;
1148}
1149strong, b {
1150  font-weight:bold;
1151  color: #222;
1152}
1153table {
1154  border-collapse: collapse;
1155  border-spacing: 0;
1156  border:0;
1157  margin: .5em 1em 1em 0;
1158  width:100%; /* consistent table widths; within IE's quirks */
1159  background-color:#f7f7f7;
1160}
1161th, td {
1162  padding: 4px 12px;
1163  vertical-align: top;
1164  text-align: left;
1165}
1166td {
1167  background-color:inherit;
1168  border:solid 1px #DDD;
1169}
1170td *:last-child {
1171  margin-bottom:0;
1172}
1173th {
1174  background-color: #999;
1175  color: #fff;
1176  border:solid 1px #DDD;
1177  font-weight: normal;
1178}
1179tr:first-of-type th:first-of-type:empty {
1180    visibility: hidden;
1181}
1182/* --------------------------------------------------------------------------
1183Footer
1184*/
1185.line {
1186    clear: both;
1187    background: #acbc00;
1188    background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1189    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00),
1190color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00));
1191    background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1192    background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1193    background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1194    background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1195    height: 2px;
1196    margin-top: 150px;
1197    position: relative;
1198    z-index: 11;
1199}
1200#footer {
1201    font-size:11px;
1202    clear: both;
1203    color: #999;
1204    padding: 15px 0;
1205    margin-top:10px;
1206    width:auto;
1207}
1208#footer-local ul {
1209  list-style: none;
1210  margin: 5px 0 30px 0;
1211}
1212#footer-local li {
1213    display: inline;
1214}
1215#footer-local li+li:before {
1216    content: '|';
1217    padding: 0 3px;
1218  color: #e5e5e5;
1219}
1220#footer-global {
1221    padding: 10px 15px;
1222  background: #f5f5f5;
1223}
1224#footer-global {
1225    border-top: 1px solid #ebebeb;
1226    font-size: 11.5px;
1227    line-height: 1.8;
1228    list-style: none;
1229}
1230#footer-global ul {
1231    margin: 0;
1232}
1233#footer-global li {
1234    display: inline;
1235    font-weight: bold;
1236}
1237#footer-global li+li:before {
1238    content: '¬?';
1239    padding: 0 3px;
1240}
1241* html #footer-global li {
1242    margin: 0 13px 0 0;
1243}
1244* [dir='rtl'] #footer-global li {
1245    margin: 0 0 0 13px;
1246}
1247*+html #footer-global li {
1248    margin: 0 13px 0 0;
1249}
1250*+[dir='rtl'] #footer-global li {
1251    margin: 0 0 0 13px;
1252}
1253#footer-global li a {
1254    font-weight: normal;
1255}
1256.locales {
1257  margin: 10px 0 0 0px;
1258}
1259[dir='rtl'] .locales {
1260    background-position: right center;
1261    float: left;
1262    padding: 0 24px 0 0;
1263}
1264.locales form {
1265    margin: 0;
1266}
1267.locales select, .sites select {
1268  line-height: 3.08;
1269  margin: 0px 0;
1270  border: solid 1px #EBEBEB;
1271  -webkit-appearance: none;
1272  background: white url('../images/arrows-up-down.png') right center no-repeat;
1273  height: 30px;
1274  color: #222;
1275  line-height: normal;
1276  padding: 5px;
1277  width: 230px;
1278}
1279}
1280
1281/* =============================================================================
1282   Print Only
1283   ========================================================================== */
1284@media print {
1285  /* configure printed page */
1286  @page {
1287      margin: 0.75in 1in;
1288      widows: 4;
1289      orphans: 4;
1290  }
1291
1292  /* reset spacing metrics */
1293  html, body, .wrap {
1294      margin: 0 !important;
1295      padding: 0 !important;
1296      width: auto !important;
1297  }
1298
1299  /* leave enough space on the left for bullets */
1300  body {
1301      padding-left: 20px !important;
1302  }
1303  #doc-col {
1304      margin-left: 0;
1305  }
1306
1307  /* hide a bunch of non-content elements */
1308  #header, #footer, #nav-x, #side-nav,
1309  .training-nav-top, .training-nav-bottom,
1310  #doc-col .content-footer,
1311  .nav-x, .nav-y,
1312  .paging-links,
1313  a.totop {
1314      display: none !important;
1315  }
1316
1317  /* remove extra space above page titles */
1318  #doc-col .content-header {
1319      margin-top: 0;
1320  }
1321
1322  /* bump up spacing above subheadings */
1323  h2 {
1324      margin-top: 40px !important;
1325  }
1326
1327  /* print link URLs where possible and give links default text color */
1328  p a:after {
1329      content: " (" attr(href) ")";
1330      font-size: 80%;
1331  }
1332  p a {
1333      word-wrap: break-word;
1334  }
1335  a {
1336      color: inherit;
1337  }
1338
1339  /* syntax highlighting rules */
1340  .str { color: #060; }
1341  .kwd { color: #006; font-weight: bold; }
1342  .com { color: #600; font-style: italic; }
1343  .typ { color: #404; font-weight: bold; }
1344  .lit { color: #044; }
1345  .pun { color: #440; }
1346  .pln { color: #000; }
1347  .tag { color: #006; font-weight: bold; }
1348  .atn { color: #404; }
1349  .atv { color: #060; }
1350}
1351
1352/* =============================================================================
1353   Columns
1354   ========================================================================== */
1355
1356@media screen, projection, print {
1357.full {
1358  padding: 2.5em 0;
1359  border-top: solid 1px #ddd;
1360  border-bottom: solid 1px #ddd;
1361  background: #f7f7f7;
1362}
1363.wrap {
1364  margin: 0 auto;
1365  width: 940px;
1366  clear: both;
1367}
1368.cols {
1369    height: 1%;
1370    margin: 0 -1.533742331288343558282%;
1371    width: 103.06748466257669%}
1372*+html .cols {
1373    margin-bottom: 20px;
1374}
1375.cols:after {
1376    clear: both;
1377    content: ' ';
1378    display: block;
1379    height: 0;
1380    visibility: hidden;
1381}
1382.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
1383.col-13, .col-14, .col-15, .col-16 {
1384    display: inline;
1385  float: left;
1386  margin-left: 10px;
1387  margin-right: 10px;
1388}
1389/*
1390* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html
1391.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12  {
1392    margin: 0;
1393    padding: 0 1.4% 20px;
1394}
1395[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5,
1396[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10,
1397[dir='rtl'] .col-11, [dir='rtl'] .col-12 {
1398    float: right;
1399}
1400*/
1401.col-1 { width: 40px }
1402.col-2 { width: 100px }
1403.col-3 { width: 160px }
1404.col-4 { width: 220px }
1405.col-5 { width: 280px }
1406.col-6 { width: 340px }
1407.col-7 { width: 400px }
1408.col-8 { width: 460px }
1409.col-9 { width: 520px }
1410.col-10 { width: 580px }
1411.col-11 { width: 640px }
1412.col-12 { width: 700px }
1413.col-13 { width: 760px }
1414.col-14 { width: 820px }
1415.col-15 { width: 880px }
1416.col-16 { width: 940px }
1417}
1418
1419.col-right {
1420  margin-right:0px;
1421}
1422
1423@media screen and (max-width:772px) {
1424.col-5, .col-6, .col-7 {
1425    clear: both;
1426    width: 97.0238096%}
1427}
1428
1429/* =============================================================================
1430   Layout
1431   ========================================================================== */
1432@media screen, projection, print {
1433
1434/* --------------------------------------------------------------------------
1435Header, Login, Nav-X, Search
1436*/
1437#header {
1438  padding: 2.2em 0 0.2em 0;
1439}
1440#header:before, #header:after {
1441  content: "";
1442  display: table;
1443  clear: both
1444}
1445.logo, .nav-x {
1446    float: left;
1447}
1448.nav-x {
1449    margin-top: -2px;
1450  list-style-type: none;
1451}
1452.nav-x a {
1453    color: #333;
1454    font-size: 16px;
1455}
1456.design a.selected {
1457    color: #33b5e5;
1458}
1459.develop a.selected {
1460    color: #F80;
1461}
1462.distribute a.selected {
1463    color: #9C0;
1464}
1465
1466
1467
1468.nav-x li {
1469    display: inline;
1470    margin-right: 45px;
1471}
1472.search {
1473  float: right;
1474  position: relative;
1475  width: 220px
1476}
1477.search .bottom, .search .left, .search .right {
1478  position: absolute;
1479  background-color: #a3a3a3;
1480}
1481.search .bottom {
1482  width: 220px;
1483  height: 1px;
1484  top: 24px;
1485  left: 0
1486}
1487.search .left, .search .right {
1488  height: 5px;
1489  width: 1px
1490}
1491.search .left { top: 19px; left: 0 }
1492.search .right { top: 19px; right: 0 }
1493.search form {
1494  float: left;
1495  margin-top: 2px;
1496  width: inherit;
1497}
1498.search .close,
1499#player-frame .close {
1500  position: absolute;
1501  right: 8px;
1502  bottom: 4px;
1503  width: 16px;
1504  height: 16px;
1505  margin: 0;
1506  text-indent: -1000em;
1507  background: url(../images/close.png) no-repeat 0 0;
1508  z-index:9999;
1509}
1510.search .close:hover, .search .close:focus,
1511#player-frame .close:hover, #player-frame .close:focus {
1512  background-position: -16px 0;
1513  cursor:pointer;
1514}
1515#player-frame .close {
1516  top: 6px;
1517}
1518.search form input {
1519  color: #999;
1520  font-size: 1em;
1521  width: inherit;
1522  border: none;
1523  margin: 0;
1524  padding:0 0 0 6px;
1525  z-index: 1500;
1526  background-color: transparent
1527}
1528.search:hover .bottom, .search:hover .left, .search:hover .right {
1529  background-color: #33b5e5;
1530}
1531.search:hover .icon {
1532  background-position: -8px 0
1533}
1534.search form input:focus {
1535  color: #222;
1536  font-weight: bold;
1537  outline:0;
1538}
1539/* Search Dropdown */
1540.search-dropdown {
1541  padding: 15px;
1542  width: 192px;
1543  border: solid 1px #c5c5c5;
1544  background: #fff;
1545  position: absolute;
1546  top: 35px;
1547  left: 0;
1548  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1549  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1550  box-shadow: 0  0 10px rgba(0,0,0,0.2)
1551}
1552.search-dropdown ul, .search-dropdown ul li {
1553  list-style-type: none;
1554  margin: 0;
1555  padding: 0
1556}
1557.search-dropdown ul li {
1558  clear: both
1559}
1560.search-dropdown img {
1561  float: left;
1562  margin: 0 10px 10px 0
1563}
1564.search-dropdown h6 {
1565  color: #222;
1566  margin: 0;
1567  line-height: normal
1568}
1569.search-dropdown .desc {
1570  color: #999;
1571  font-size: 11.5px;
1572  line-height: normal;
1573  margin: 0;
1574}
1575.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc {
1576  color: #33b5e5
1577}
1578/* --------------------------------------------------------------------------
1579Buttons
1580*/
1581.button, a.button, .button-secondary, a.button-secondary {
1582  border-image: initial;
1583    -webkit-border-radius: 2px;
1584    -moz-border-radius: 2px;
1585    border-radius: 2px;
1586    cursor: pointer;
1587}
1588.button, a.button {
1589    display:inline-block;
1590    background-color: #09c;
1591    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1592    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1593    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1594    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1595    background-image: -o-linear-gradient(top, #2faddb, #09c);
1596    background-image: linear-gradient(top, #2faddb, #09c);
1597    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
1598    border: 1px solid #3990ab;
1599    color: #fff;
1600}
1601.button-secondary, a.button-secondary {
1602    background-color: #f3f3f3;
1603    border: 1px solid #dcdcdc;
1604    color: #444;
1605}
1606a.button, a.button:visited, a.button-secondary, a.button-secondary:visited {
1607    margin-right: 16px;
1608   font-weight: 400;
1609    min-width: 54px;
1610    outline: 0;
1611    padding: 8px 15px;
1612    text-align: center;
1613}
1614.button, .button-secondary {
1615    margin-right: 16px;
1616  font-weight: 400;
1617    min-width: 54px;
1618    outline: 0;
1619    padding: 0 15px;
1620    text-align: center;
1621}
1622.button:hover, a.button:hover {
1623    border-color: #09c;
1624    background-color: #4cadcb;
1625    background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb));
1626    background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb);
1627    background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb);
1628    background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb);
1629    background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb);
1630    background-image: linear-gradient(top, #5dbcd9, #4cadcb);
1631    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9',
1632EndColorStr='#4cadcb',GradientType=0);
1633    color: #fff !important;
1634}
1635.button:active, a.button:active {
1636    background-color: #1e799a;
1637    background-image: none;
1638    border-color: #30b7e6;
1639}
1640a.button.big.subtitle {
1641  line-height:18px;
1642}
1643.button-secondary:hover, a.button-secondary:hover {
1644    border-color: #dbdbdb;
1645    background-color: #f3f3f3;
1646    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1647    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1648    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1649    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1650    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1651    background-image: linear-gradient(top, #f9f9f9, #ececec);
1652    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1653EndColorStr='#ececec');
1654    color: #33B5E5 !important;
1655}
1656.button-secondary:active, a.button-secondary:active {
1657   border-color: #dadada;
1658  background: #ebebeb; /* Old browsers */
1659  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
1660  background:
1661url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
1662Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv
1663eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+
1664CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg
1665eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl
1666YiIgc3RvcC1vcGFjaXR5PSIxIi8+
1667CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1668CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+
1669CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1670CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy
1671R3JhZGllbnQ+
1672CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg
1673Lz4KPC9zdmc+);
1674  background: -moz-linear-gradient(top,  #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%,
1675#ffffff 100%); /* FF3.6+ */
1676  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb),
1677color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff));
1678/* Chrome,Safari4+ */
1679  background: -webkit-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9
168090%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
1681  background: -o-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1682100%); /* Opera 11.10+ */
1683  background: -ms-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1684100%); /* IE10+ */
1685  background: linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1686100%); /* W3C */
1687  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb',
1688endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
1689  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1690  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1691  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1692  color: #258AAF !important;
1693}
1694.button.big {
1695  font-size:20px;
1696  display:inline-block;
1697}
1698.button.big span.small {
1699  font-size:14px;
1700}
1701.button-caption {
1702  margin-top:10px;
1703  font-size:12px;
1704  font-style:italic;
1705}
1706
1707.button.disabled,
1708.button.disabled:hover,
1709.button.disabled:active {
1710  background:#ebebeb;
1711  color:#999 !important;
1712  border-color:#999;
1713  cursor:default;
1714}
1715
1716.training-nav-top a.button-secondary,
1717.training-nav-bottom a.button-secondary {
1718  display:block;
1719  float:left;
1720  margin:0;
1721  width:130px;
1722  text-transform:uppercase;
1723  font-weight:bold;
1724
1725    background-color: #f3f3f3;
1726    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1727    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1728    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1729    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1730    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1731    background-image: linear-gradient(top, #f9f9f9, #ececec);
1732    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1733EndColorStr='#ececec');
1734    color: #33B5E5;
1735}
1736
1737.training-nav-top a.button-secondary:hover,
1738.training-nav-bottom a.button-secondary:hover {
1739    background-color: #09c;
1740    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1741    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1742    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1743    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1744    background-image: -o-linear-gradient(top, #2faddb, #09c);
1745    background-image: linear-gradient(top, #2faddb, #09c);
1746    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
1747    border: 1px solid #3990ab;
1748    color: #fff !important;
1749}
1750
1751.training-nav-top a.button-secondary.last,
1752.training-nav-bottom a.button-secondary.last {
1753  border-left:0;
1754}
1755
1756.training-nav-top a.button-secondary.double-size,
1757.training-nav-bottom a.button-secondary.double-size {
1758  width:291px;
1759}
1760
1761.training-nav-top,
1762.training-nav-bottom {
1763  float:right;
1764  margin:0 0 0 20px;
1765}
1766
1767.training-nav-bottom {
1768  padding:0 0 20px;
1769}
1770
1771#tb-wrapper,
1772#qv-wrapper {
1773  float:right;
1774  clear:right;
1775  margin:0 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1776  padding:0 0 20px;
1777}
1778
1779#tb-wrapper {
1780  margin:-27px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1781}
1782
1783#tb,
1784#qv {
1785  font-size:13px;
1786  line-height:18px;
1787  width:238px;
1788  border:1px solid #ccc;
1789  float:right;
1790}
1791
1792#tb {
1793  width:278px;
1794}
1795
1796#tb h2,
1797#qv h2 {
1798  margin:10px 15px;
1799  padding:0;
1800  text-transform:uppercase;
1801  border-bottom:1px solid gainsboro;
1802}
1803
1804#tb *,
1805#qv * {
1806  font-size:inherit;
1807}
1808
1809#tb .download-box,
1810#qv .download-box {
1811  padding:0 0 0 15px;
1812}
1813
1814#tb .download-box .filename,
1815#qv .download-box .filename {
1816  font-size:11px;
1817  margin:4px 4px 10px;
1818  color:#666;
1819}
1820
1821
1822/* Dev guide quicknav */
1823
1824.sidebox-wrapper {
1825  float:right;
1826  clear:right;
1827  margin:0 0 0 20px;
1828  padding:0 0 20px;
1829}
1830
1831.sidebox {
1832  width:226px;
1833  font-size:13px;
1834  line-height:18px;
1835  border-left:4px solid #99CC00;
1836  float:right;
1837  padding:0 0 0 10px;
1838  margin:0 0 1em 20px;
1839}
1840
1841.sidebox h2,
1842.sidebox h3,
1843.sidebox h4,
1844.sidebox h5 {
1845  font-weight:bold;
1846  margin:0 0 10px;
1847}
1848
1849.sidebox * {
1850  font-size:inherit;
1851}
1852
1853#tb ol,
1854#tb ul,
1855#qv ul {
1856  margin:0 15px 10px 35px;
1857}
1858
1859#qv ol {
1860  list-style:none;
1861  margin:0 15px 15px;
1862  font-size:inherit;
1863  line-height:inherit;
1864}
1865
1866#tb ol ol,
1867#tb ul ul,
1868#qv ol ol,
1869#qv ul ul,
1870.sidebox ol ol,
1871.sidebox ul ul {
1872  margin-bottom:0;
1873}
1874
1875#qv ol ol {
1876  margin:3px 0 3px 15px;
1877}
1878
1879.sidebox p,
1880#qv p,
1881#tb p {
1882  margin: 0 0 10px;
1883}
1884
1885/* related resources blocks in checklists */
1886
1887.rel-resources {
1888  margin:10px 0px;
1889  border:1px solid #ccc;
1890  background-color:rgba(0, 0, 0, 0.027451);
1891  border:1px solid #ccc;
1892  font-size:13px;
1893  color:#6f6f6f;
1894}
1895
1896.rel-resources ul {
1897padding: .5em 1em 0 1em;
1898}
1899
1900.rel-resources a {
1901font-weight:500;
1902}
1903
1904.rel-resources h3 {
1905  margin:4px 15px 0px 15px;
1906  font-size:13px;
1907  font-weight:600;
1908  text-transform:uppercase;
1909}
1910
1911/* --------------------------------------------------------------------------
1912Form
1913*/
1914.article form {
1915    margin: 0 0 20px;
1916}
1917.article form .form-required {
1918    color: #dd4b39;
1919}
1920.article form fieldset {
1921    margin: 0 0 20px;
1922    padding: 0;
1923}
1924.article form legend {
1925    display: block;
1926    line-height: 1.5;
1927    margin: 0;
1928    padding: 0;
1929}
1930/*
1931.article form ol, .article form ul {
1932    margin: 0 0 0 1em;
1933    padding: 0 0 0 1em;
1934}
1935[dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
1936    margin: 0 1em 0 0;
1937    padding: 0 1em 0 0;
1938}
1939.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
1940ul ul {
1941    list-style: none;
1942    margin: 0;
1943    padding: 0;
1944}
1945.article form li {
1946    margin: 0 0 20px;
1947}
1948.article form li li {
1949    margin: 0 0 5px;
1950}
1951*/
1952.article form label {
1953    display: block;
1954    margin: 0 0 5px;
1955    padding: 0;
1956}
1957.article form input[type='text'], .article form select, .article form textarea, .article form
1958.checkbox-group, .article form .radio-group {
1959    margin-bottom: 15px;
1960}
1961.checkbox-group input {
1962  width: 13px;
1963  height: 13px;
1964  background: #fff;
1965  border: solid 1px #c6c6c6;
1966  float: left;
1967}
1968.article form .checkbox-group, .article form .radio-group {
1969  display: block
1970}
1971.article form select {
1972    border: solid 1px #ebebeb;
1973    border-top-color: #ddd;
1974    -webkit-appearance: none;
1975    background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
1976    height: 30px;
1977    color: #222;
1978    line-height: normal;
1979    padding: 5px;
1980    width: 130px;
1981}
1982
1983.article form .browse .browse-msg {
1984  font-size: 11.5px;
1985}
1986.article form .browse .button-secondary {
1987  height: auto;
1988  line-height: 25px;
1989  font-size: 11px;
1990  padding: 0 8px;
1991  margin: 0 10px 15px 0;
1992}
1993.article form input[type='text'], .article form textarea {
1994    border: 1px solid #ebebeb;
1995    border-top-color: #dcdcdc;
1996    color: #222;
1997    line-height: normal;
1998    padding: 6px 10px;
1999    width: 300px;
2000}
2001.article form textarea {
2002    height: 150px;
2003}
2004.article form input[type='text']:focus, .article form textarea:focus {
2005    border-color: #33B5E5;
2006    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2007    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2008    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2009    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2010    outline: 0;
2011}
2012.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
2013    color: #999;
2014}
2015.article form input[type='text'][disabled], .article form textarea[disabled] {
2016    background-color: #ebebeb;
2017}
2018form .form-error input[type='text'], form .form-error textarea {
2019    border-color: #dd4b39;
2020  margin-right: 20px;
2021}
2022.aside {
2023    -moz-border-radius: 2px;
2024    -webkit-border-radius: 2px;
2025    border-radius: 2px;
2026    margin: 10px 0;
2027    padding: 20px;
2028  color: #666;
2029    position: relative;
2030  background: #f9f9f9;
2031}
2032/*
2033.aside, .notification, .promo {
2034    -moz-border-radius: 2px;
2035    -webkit-border-radius: 2px;
2036    border-radius: 2px;
2037    margin: 10px 0;
2038    padding: 10px;
2039    position: relative;
2040}
2041.aside>:first-child, .notification>:first-child, .promo>:first-child {
2042    margin-top: 0;
2043}
2044.aside>:last-child, .notification>:last-child, .promo>:last-child {
2045    margin-bottom: 0;
2046}
2047.aside {
2048    background: #f9f9f9;
2049}
2050.notification {
2051    background: #fffbe4;
2052    border-color: #f8f6e6;
2053}
2054.promo {
2055    background: #f6f9ff;
2056    border-color: #eff2f9;
2057}
2058*/
2059
2060/* SDK TOS styles */
2061
2062div.sdk-terms {
2063  white-space: pre-wrap;
2064  word-wrap: break-word;
2065  font-family: inherit;
2066  font-size: inherit;
2067  padding: 10px;
2068  height: 370px;
2069  width: 738px;
2070  border: 1px solid #444;
2071  background: transparent;
2072  overflow:auto;
2073  margin:0 0 10px;
2074}
2075
2076div.sdk-terms.fullsize {
2077  padding: 0;
2078  height: auto;
2079  width: auto;
2080  border:none;
2081}
2082
2083div.sdk-terms h3,
2084div.sdk-terms h2 {
2085  margin:0;
2086}
2087
2088div#sdk-terms-form {
2089  padding:0 0 0 10px;
2090}
2091
2092div#sdk-terms-form input {
2093  display:inline;
2094  margin:4px 4px 4px 0;
2095}
2096
2097
2098/* --------------------------------------------------------------------------
2099Code Style
2100*/
2101pre {
2102  margin:0 0 1em 0;
2103  padding: 1em;
2104  overflow: auto;
2105  border: solid 1px #ddd;
2106  background: #f7f7f7;
2107}
2108.str { color: #080; }
2109.kwd { color: #008; }
2110.com { color: #800; }
2111.typ { color: #606; }
2112.lit { color: #066; }
2113.pun { color: #660; }
2114.pln { color: #000; }
2115.tag { color: #008; }
2116.atn { color: #828; }
2117.atv { color: #080; }
2118.dec { color: #606; }
2119
2120/* --------------------------------------------------------------------------
2121Three-Pane
2122*/
2123/* Package Nav & Classes Nav */
2124.three-pane {
2125  position: relative;
2126  border-top: solid 1px #ebebeb;
2127}
2128#packages-nav .js-pane,
2129#classes-nav .js-pane {
2130  overflow:visible;
2131}
2132#packages-nav {
2133        height:270px;
2134  max-height: inherit;
2135  overflow: hidden;
2136  position: relative;
2137}
2138#classes-nav {
2139  overflow: hidden;
2140  position: relative;
2141}
2142#packages-nav ul, #classes-nav ul {
2143  list-style-type: none;
2144  margin: 10px 0 20px 0;
2145  padding: 0;
2146}
2147#classes-nav li {
2148  font-weight: bold;
2149  margin: 5px 0;
2150}
2151#packages-nav li,
2152#classes-nav li li {
2153  margin: 0;
2154}
2155#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2156#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
2157  padding: 0 0 0 4px;
2158}
2159#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2160#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited,
2161#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited {
2162  color: #222;
2163  font-weight: normal;
2164}
2165#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2166#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
2167  display: block;
2168}
2169#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
2170a:visited,
2171#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
2172a:visited,
2173#nav-tree li div.selected {
2174    font-weight: 500;
2175    color: #0099cc;
2176    background-color:#fff; }
2177  #packages-nav li.selected ul li a,
2178  #classes-nav li.selected ul li a {
2179  /* don't highlight child items */
2180    color: #555555; }
2181#nav-tree li div.selected a {
2182    font-weight: 500;
2183    color: #0099cc;
2184}
2185#nav-swap {
2186  height:30px;
2187  border-top:1px solid #ccc;
2188}
2189#nav-swap a {
2190  display:inline-block;
2191  height:100%;
2192  color: #222;
2193  font-size: 12px;
2194  padding: 5px 0 5px 5px;
2195}
2196
2197#nav-swap .fullscreen {
2198  float: right;
2199  width: 24px;
2200  height: 24px;
2201  text-indent: -1000em;
2202  padding:0;
2203  margin:3px 5px 0;
2204  background: url(../images/fullscreen.png) no-repeat -24px 0;
2205}
2206#nav-swap .fullscreen.disabled {
2207  background-position: 0 0;
2208}
2209#nav-swap .fullscreen:hover,
2210#nav-swap .fullscreen:focus {
2211  cursor:pointer;
2212}
2213
2214
2215/* nav tree */
2216#side-nav, #devdoc-nav, #swapper,
2217#nav-tree, #tree-list {
2218  overflow:hidden;
2219  margin-left:0;
2220}
2221
2222#nav-tree ul {
2223  list-style:none;
2224  padding:0;
2225  margin:10px 0;
2226}
2227
2228#nav-tree ul li div {
2229  padding:0 0 0 4px;
2230}
2231
2232#side-nav #nav-tree ul li a,
2233#side-nav #nav-tree ul li span.no-children {
2234  padding: 0;
2235  margin: 0;
2236}
2237
2238#nav-tree .plus {
2239  margin: 0 3px 0 0;
2240}
2241
2242#nav-tree ul ul {
2243  list-style: none;
2244  margin: 0;
2245  padding: 0 0 0 0;
2246}
2247
2248#nav-tree ul li {
2249  margin: 0;
2250  padding: 0 0 0 0;
2251  white-space: nowrap;
2252}
2253
2254#nav-tree .children_ul {
2255  padding:0;
2256  margin:0;
2257}
2258#nav-tree .children_ul li div {
2259  padding:0 0 0 10px;
2260}
2261#nav-tree .children_ul .children_ul li div {
2262  padding:0 0 0 20px;
2263}
2264
2265#nav-tree a.nolink {
2266  color: #222;
2267  text-decoration: none;
2268}
2269
2270#nav-tree span.label {
2271  width: 100%;
2272}
2273
2274#nav-tree {
2275  overflow-x: auto;
2276  overflow-y: scroll;
2277  outline:0;
2278}
2279
2280
2281/* Content */
2282#doc-col {
2283  margin-right:0;
2284}
2285#doc-content-container {
2286  margin-left: 291px
2287}
2288#doc-header, #doc-content {
2289  padding: 1em 2em;
2290}
2291#doc-header {
2292  background: #f7f7f7;
2293}
2294#doc-header h1 {
2295  line-height: 0;
2296  margin-bottom: 15px;
2297}
2298#api-info-block {
2299  float: right;
2300  font-weight: bold;
2301}
2302#api-info-block a, #api-info-block a:active, #api-info-block a:visited {
2303  color: #222;
2304}
2305#api-info-block a:hover, #api-info-block a:focus {
2306  color: #33B5E5;
2307}
2308#api-nav-header {
2309  height:19px; /* plus 16px padding = 35; same as #nav li */
2310  font-size:14px;
2311  padding: 8px 0;
2312  margin: 0;
2313  border-bottom: 1px solid #CCC;
2314  background:#e9e9e9;
2315  background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
2316
2317}
2318#api-nav-title {
2319  padding:0 5px;
2320  white-space:nowrap;
2321}
2322
2323#api-level-toggle {
2324  float:right;
2325  padding:0 5px;
2326}
2327
2328#api-level-toggle label {
2329  margin:0;
2330  vertical-align:top;
2331  line-height: 19px;
2332  font-size:13px;
2333  height: 19px;
2334}
2335
2336#api-level-toggle .select-wrapper {
2337  width: 35px;
2338  display: inline-block;
2339  overflow: hidden;
2340}
2341#api-level-toggle select {
2342  border: 0;
2343  appearance:none;
2344  -moz-appearance:none;
2345  -webkit-appearance: none;
2346  background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
2347  color: #222;
2348  height: 19px;
2349  line-height: 19px;
2350  padding: 0;
2351  margin:1px 0 0 0;
2352  width:150%;
2353  font-size:13px;
2354  vertical-align:top;
2355  outline:0;
2356}
2357
2358
2359/* Toggle for revision notes and stuff */
2360div.toggle-content.closed .toggle-content-toggleme {
2361  display:none;
2362}
2363
2364#jd-content img.toggle-content-img {
2365  margin:0 5px 5px 0;
2366}
2367
2368div.toggle-content-toggleme {
2369  padding:0 0 0 15px;
2370}
2371
2372
2373/* API LEVEL FILTERED MEMBERS */
2374
2375.absent,
2376.absent a:link,
2377.absent a:visited,
2378.absent a:hover,
2379.absent * {
2380  color:#bbb !important;
2381  cursor:default !important;
2382  text-decoration:none !important;
2383}
2384#devdoc-nav li.absent.selected,
2385#devdoc-nav li.absent.selected *,
2386#devdoc-nav div.label.absent.selected,
2387#devdoc-nav div.label.absent.selected * {
2388  background-color:#eaeaea !important;
2389}
2390.absent h4.jd-details-title,
2391.absent h4.jd-details-title * {
2392  background-color:#f6f6f6 !important;
2393}
2394.absent img {
2395  opacity: .3;
2396  filter: alpha(opacity=30);
2397  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
2398}
2399
2400
2401
2402
2403
2404
2405
2406
2407
2408/* JQUERY RESIZABLE STYLES */
2409.ui-resizable { position: relative; }
2410.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
2411.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
2412/*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
2413body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
2414.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
2415border-bottom: solid 1px #ededed;
2416  background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
2417/*
2418.ui-resizable-e {
2419cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
24201px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
2421*/
2422
2423/* --------------------------------------------------------------------------
2424Lightbox
2425*/
2426.lightbox {
2427  width: 769px;
2428  padding: 1.5em;
2429  margin: 0 auto;
2430  border: solid 1px #dcdcdc;
2431  background: #fff;
2432  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2433  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2434  box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
2435}
2436.lightbox .header {
2437  float: left;
2438  width: 720px;
2439  margin: -10px 20px 10px 0;
2440}
2441.lightbox .close {
2442  float: right;
2443  width: 10px;
2444  height: 10px;
2445  margin: -10px -10px 10px 0;
2446  text-indent: -1000em;
2447  background: url(../images/close.png) no-repeat 0 0;
2448}
2449.lightbox .close:hover, .lightbox .close:focus {
2450  background-position: -10px 0;
2451}
2452
2453
2454/* --------------------------------------------------------------------------
2455Styles for samples project trees and code browsing in resources tab
2456*/
2457
2458#codesample-wrapper {
2459  width:1000px;
2460  overflow:visible;
2461}
2462pre#codesample-block {
2463  float:left;
2464  overflow:visible;
2465  background:transparent;
2466  border:none;
2467}
2468pre#codesample-block .code-line:hover {
2469  background:#e7e7e7;
2470}
2471pre#codesample-line-numbers {
2472  float:left;
2473  width:2em;
2474  background:transparent;
2475  border:none;
2476  border-right:1px solid #ccc;
2477  padding-left:0;
2478  font-family:monospace;
2479  text-align:right;
2480  -webkit-touch-callout: none;
2481  -webkit-user-select: none;
2482  -khtml-user-select: none;
2483  -moz-user-select: -moz-none;
2484  -ms-user-select: none;
2485  user-select: none;
2486}
2487pre#codesample-line-numbers a {
2488  color:#999;
2489}
2490pre#codesample-line-numbers.hidden {
2491  display:none;
2492}
2493pre#codesample-block span.code-line {
2494  width:100%;
2495  display:inline-block;
2496}
2497
2498.structure-dir {
2499background-image:url(../../assets/images/folder.png);
2500background-repeat:no-repeat;
2501background-position:16px 2px;
2502  margin:.25em 0 0 0;
2503  padding:0 0 0 0;
2504}
2505
2506.structure-toggleme {
2507  margin:0 0 0 3em;
2508  padding:0 0 0 0;
2509  text-decoration:none;
2510}
2511
2512.structure-java{
2513background-image:url(../../assets/images/file-java.png);
2514background-repeat:no-repeat;
2515background-position:0px 2px;
2516  margin:.3em 0 0 0;
2517  padding:.3em 0 .3em 22px;
2518}
2519
2520.structure-file {
2521background-image:url(../../assets/images/file-generic.png);
2522background-repeat:no-repeat;
2523background-position:0px 2px;
2524  margin:.3em 0 0 0;
2525  padding:.3em 0 .3em 22px;
2526}
2527
2528.structure-xml {
2529background-image:url(../../assets/images/file-xml.png);
2530background-repeat:no-repeat;
2531background-position:0px 2px;
2532  margin:.3em 0 0 0;
2533  padding:.3em 0 .25em 22px;
2534}
2535
2536.structure-img {
2537background-image:url(../../assets/images/file-image.png);
2538background-repeat:no-repeat;
2539background-position:0px 2px;
2540  margin:.3em 0 0 0;
2541  padding:.3em 0 .25em 22px;
2542}
2543
2544.structure-manifest {
2545background-image:url(../../assets/images/file-manifest.png);
2546background-repeat:no-repeat;
2547  margin:.0 0 0 1.25em;
2548  padding:0 0 0 22px;
2549  text-decoration:none;
2550}
2551
2552#jd-content .structure-toggle-img {
2553  margin:.5em 0 0 0;
2554padding-right:2.1em;
2555}
2556
2557.dirInfo {
2558  margin-left:2em;
2559}
2560
2561.structure-dir a {
2562  text-decoration:none;
2563}
2564
2565.structure-manifest a {
2566  text-decoration: none;
2567}
2568.structure-file a {
2569  text-decoration: none;
2570}
2571
2572.sampleEmbed {
2573  background-color:rgb(249, 249, 249);
2574}
2575
2576.sampleEmbed ol.lineNumbers {
2577  list-style-type: decimal;
2578  padding-left:1em;
2579}
2580
2581.sampleEmbed ol.lineNumbers li {
2582border-left:1px solid #ddd;
2583border-right:1px solid #ddd;
2584color:gray;
2585background-color:#f7f7f7;
2586margin:0 0 0 24px;
2587padding: 2px 2px 2px 6px;
2588}
2589
2590.sampleEmbed ol.lineNumbers li:hover {
2591background: #efefef;
2592}
2593
2594.samples-nav li a {
2595  overflow: hidden;
2596  text-overflow: ellipsis;
2597  white-space: nowrap;
2598}
2599
2600/* --------------------------------------------------------------------------
2601Styles for raw formatted line numbers (not used with listformatted version)
2602div.sampleLine div.lineNumber {
2603  display: inline;
2604}
2605div.sampleLine div.lineCode {
2606  display: inline;
2607  padding-left:6px;
2608}
2609div.sampleLine {
2610  padding:0;
2611  margin:0;
2612}*/
2613
2614/* --------------------------------------------------------------------------
2615Butterbar
2616*/
2617#butterbar-wrapper {
2618  position:absolute;
2619  top:0;
2620  left:0;
2621  width:100%;
2622}
2623#butterbar {
2624  width:940px;
2625  margin:0 auto;
2626}
2627#butterbar-message {
2628  background-color:#f80;
2629  float:right;
2630  font-size:12px;
2631  font-weight:bold;
2632  padding:0 10px;
2633  border-radius: 0 0 5px 5px;
2634}
2635#butterbar-message a {color:#fff !important}
2636#butterbar-message a:hover {text-decoration:underline;}
2637
2638/* --------------------------------------------------------------------------
2639Misc
2640*/
2641
2642
2643.clearfix:before, .clearfix:after {
2644  content: "";
2645  display: table
2646}
2647.clearfix:after {
2648  clear: both
2649}
2650.clearfix {
2651  *zoom: 1
2652}
2653table.blank th, table.blank td {
2654    border: 0;
2655  background: none
2656}
2657.caption {
2658  margin: 0.5em 0 2em 0;
2659  color: #000;
2660  font-size: 11.5px;
2661}
2662
2663.nolist, .nolist ul, .nolist ol {
2664  list-style:none;
2665  margin-left:0;
2666}
2667#tb .nolist {
2668  margin-left:15px;
2669}
2670
2671dl.xml>dt {
2672  text-transform:uppercase;
2673}
2674dl.xml dl.attr {
2675  margin-top:0;
2676}
2677
2678pre.classic {
2679  background-color:transparent;
2680  border:none;
2681  padding:0;
2682}
2683
2684p.img-caption {
2685  margin: -10px 0 20px;
2686  font-size:13px;
2687  color:#666;
2688}
2689
2690div.figure,
2691div.figure-right {
2692  float:right;
2693  clear:right;
2694  margin:10px 0 0 0;
2695  padding:0 0 0 20px;
2696  /* width must be defined w/ an inline style matching the image width */
2697}
2698
2699div.figure-left {
2700  float:left;
2701  clear:left;
2702  margin:10px 0 0 0;
2703  padding:0 20px 0 0;
2704  /* width must be defined w/ an inline style matching the image width */
2705}
2706
2707img.frame {
2708  border:1px solid #DDD;
2709  padding:4px;
2710}
2711
2712p.table-caption {
2713  margin: 0 0 4px 0;
2714  font-size:13px;
2715  color:#666;
2716}
2717
2718p.code-caption {
2719  margin-bottom: 4px;
2720  font: 12px/1.5 monospace;
2721  color:#666;
2722}
2723
2724div.note,
2725div.caution,
2726div.warning {
2727  margin: 0 0 15px;
2728}
2729
2730p.note, div.note,
2731p.caution, div.caution,
2732p.warning, div.warning {
2733  padding: 0 0 0 10px;
2734  border-left: 4px solid;
2735}
2736
2737p.note, div.note {
2738  border-color: #258AAF;
2739}
2740
2741p.caution, div.caution {
2742  border-color: #FF8800;
2743}
2744
2745p.warning, div.warning {
2746  border-color: #ff4443;
2747}
2748
2749div.note.design {
2750  border-left: 4px solid #33B5E5;
2751}
2752
2753div.note.develop {
2754  border-left: 4px solid #F80;
2755}
2756
2757div.note.distribute {
2758  border-left: 4px solid #9C0;
2759}
2760
2761.note p, .caution p, .warning p {
2762  margin:0 0 5px;
2763}
2764
2765.note p:last-child, .caution p:last-child, .warning p:last-child {
2766  margin-bottom:0;
2767}
2768
2769body.about blockquote {
2770  display:block;
2771  float:right;
2772  width:280px;
2773  font-size:20px;
2774  font-style:italic;
2775  line-height:24px;
2776  color:#33B5E5;
2777  margin:0 0 20px 30px;
2778}
2779
2780div.design-announce p {
2781  margin:0 0 10px;
2782}
2783
2784#devdoc-nav a.totop {
2785  display:block;
2786  top:0;
2787  width:inherit;
2788  background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%;
2789  text-indent:-9999em;
2790}
2791#devdoc-nav a.totop {
2792  position:fixed;
2793  display:none;
2794}
2795#devdoc-nav a.totop:hover {
2796  background-color:#33B5E5;
2797}
2798
2799.content-footer a.totop {
2800  text-transform:uppercase;
2801  line-height:30px;
2802}
2803
2804.expandable {
2805  height:34px;
2806  padding-left:20px;
2807  position:relative;
2808}
2809.expandable:before {
2810  content: '';
2811  background-image: url(../images/styles/disclosure_down.png);
2812  background-repeat:no-repeat;
2813  background-position: -12px -9px;
2814  width: 20px;
2815  height: 20px;
2816  display: inline-block;
2817  position: absolute;
2818  top: 0;
2819  left: 0; }
2820}
2821.expandable.expanded:before {
2822  background-image: url(../images/styles/disclosure_up.png);
2823}
2824
2825/* notice box for cross links between Design/Develop docs */
2826a.notice-developers,
2827a.notice-designers {
2828  float:right;
2829  clear:right;
2830  width:238px;
2831  min-height:50px;
2832  margin:0 0 20px 20px;
2833  border:1px solid #ddd;
2834}
2835a.notice-developers.wide,
2836a.notice-designers.wide {
2837  width:278px;
2838}
2839a.notice-developers div,
2840a.notice-designers div {
2841  min-height:40px;
2842  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2843  background-size:40px 40px;
2844  padding:10px 10px 10px 60px;
2845}
2846a.notice-designers div {
2847  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2848  background-size:40px 40px;
2849}
2850a.notice-developers:hover,
2851a.notice-designers:hover {
2852  background:#eee;
2853}
2854a.notice-developers h3,
2855a.notice-designers h3 {
2856  font-size:14px;
2857  font-weight:normal;
2858  text-transform:uppercase;
2859  color:#000 !important;
2860  margin:0;
2861}
2862a.notice-developers p,
2863a.notice-designers p {
2864  margin:0;
2865  line-height:16px;
2866}
2867a.notice-developers.left,
2868a.notice-designers.left {
2869  margin-left:0;
2870  float:left;
2871}
2872
2873
2874/* hide nested list items; companion to hideNestedLists() */
2875.hide-nested li ol,
2876.hide-nested li ul {
2877  display:none;
2878}
2879
2880a.header-toggle {
2881  display:block;
2882  float:right;
2883  text-transform:uppercase;
2884  font-size:.8em !important;
2885  font-weight:normal;
2886  margin-top:2px;
2887}
2888
2889
2890/* -----------------------------------------------
2891good/bad example containers
2892*/
2893
2894div.example-block {
2895  background-repeat: no-repeat;
2896  background-position:10px 8px;
2897  background-color:#ccc;
2898  padding:4px;
2899  margin:.8em auto 1.5em 2em;
2900  width:260px;
2901  float:right;
2902}
2903/* red container */
2904.example-block.bad {
2905  background-image: url(/images/example-bad.png);
2906  background-color:#f4cccc;
2907}
2908/* green container */
2909.example-block.good {
2910  background-image: url(/images/example-good.png);
2911  background-color:#d9ead3;
2912}
2913/* container heading div */
2914#jd-content .example-block .heading {
2915  font-weight:bold;
2916  margin:6px 0 9px 36px;
2917  padding:6px auto;
2918}
2919/* container image (if any) */
2920#jd-content .example-block img {
2921  margin:0;
2922  padding:0px;
2923}
2924
2925.example-block table {
2926  margin:0;
2927}
2928
2929/* -----------------------------------------------
2930Dialog box for popup messages
2931*/
2932
2933div.dialog {
2934  height:0;
2935  margin:0 auto;
2936}
2937
2938div.dialog>div {
2939  z-index:99;
2940  position:fixed;
2941  margin:70px 0;
2942  width: 391px;
2943  height: 200px;
2944  background: #F7F7F7;
2945-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2946-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2947box-shadow: 0 0 15px rgba(0,0,0,0.5);
2948}
2949/* IE6 can't position fixed */
2950* html div.dialog div { position:absolute; }
2951
2952
2953div#deprecatedSticker {
2954  display:none;
2955  z-index:99;
2956  position:fixed;
2957  right:15px;
2958  top:114px;
2959  margin:0;
2960  padding:1em;
2961  background:#FFF;
2962  border:1px solid #dddd00;
2963  box-shadow:-5px 5px 10px #ccc;
2964  -moz-box-shadow:-5px 5px 10px #ccc;
2965  -webkit-box-shadow:-5px 5px 10px #ccc;
2966}
2967
2968div#naMessage {
2969  display:none;
2970  width:555px;
2971  height:0;
2972  margin:0 auto;
2973}
2974
2975div#naMessage div {
2976  z-index:99;
2977  width:450px;
2978  position:fixed;
2979  margin:50px 0;
2980  padding:4em 4em 3em;
2981  background:#FFF;
2982  border:1px solid #999;
2983  box-shadow:-10px 10px 40px #888;
2984  -moz-box-shadow:-10px 10px 40px #888;
2985  -webkit-box-shadow:-10px 10px 40px #888;
2986}
2987/* IE6 can't position fixed */
2988* html div#naMessage div { position:absolute; }
2989
2990div#naMessage strong {
2991  font-size:1.1em;
2992}
2993
2994
2995/* --------------------------------------------------------------------------
2996Slideshow Controls & Next/Prev
2997*/
2998.slideshow-next, .slideshow-prev {
2999  width: 20px;
3000  height: 36px;
3001  text-indent: -1000em;
3002}
3003.slideshow-container {
3004  margin: 2em 0;
3005}
3006.slideshow-container:before, .slideshow-container:after {
3007  content: "";
3008  display: table;
3009  clear: both;
3010}
3011a.slideshow-next, a.slideshow-next:visited {
3012
3013  float: right;
3014
3015  background: url(../images/arrow-right.png) no-repeat 0 0
3016
3017}
3018
3019a.slideshow-prev, a.slideshow-prev:visited {
3020
3021  float: left;
3022
3023  background: url(../images/arrow-left.png) no-repeat 0 0
3024
3025}
3026
3027.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3028
3029  background-position: 0 -36px
3030
3031}
3032
3033.slideshow-next:active, .slideshow-prev:active {
3034
3035  background-position: 0 -72px
3036
3037}
3038.slideshow-nav {
3039  width: 74px;
3040  margin: 0 auto;
3041}
3042.slideshow-nav a, .slideshow-nav a:visited {
3043  display: inline-block;
3044  width: 12px;
3045  height: 12px;
3046  margin: 0 2px 20px 2px;
3047  background: #ccc;
3048  -webkit-border-radius: 50%;
3049  -moz-border-radius: 50%;
3050  border-radius: 50%;
3051}
3052.slideshow-nav a:hover, .slideshow-nav a:focus {
3053
3054  background: #33B5E5
3055}
3056
3057.slideshow-nav a:active {
3058
3059  background: #1e799a;
3060  background: #ebebeb;
3061  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3062  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3063  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3064}
3065.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3066  background: #33B5E5
3067}
3068/* --------------------------------------------------------------------------
3069Tabs
3070*/
3071ul.tabs {
3072  padding: 0;
3073  margin: 2em 0 0 0;
3074}
3075ul.tabs:before, ul.tabs:after {
3076  content: "";
3077  display: table;
3078  clear: both;
3079}
3080ul.tabs li {
3081  list-style-type: none;
3082  float: left;
3083}
3084ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3085  display: block;
3086  height: 36px;
3087  line-height: 36px;
3088  padding: 0 15px;
3089  margin-right: 2px;
3090  color: #222;
3091  -moz-border-radius-topleft: 2px;
3092  -moz-border-radius-topright: 2px;
3093  -moz-border-radius-bottomright: px;
3094  -moz-border-radius-bottomleft: px;
3095  -webkit-border-radius: 2px 2px px px;
3096  border-radius: 2px 2px px px;
3097  border-top: solid 1px #ebebeb;
3098  border-left: solid 1px #ebebeb;
3099  border-right: solid 1px #ebebeb;
3100  background-color: #fff;
3101    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3102    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3103    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3104    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3105    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3106    background-image: linear-gradient(top, #ffffff, #fafafa);
3107    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3108EndColorStr='#fafafa');
3109}
3110ul.tabs li a:hover {
3111  color: #33B5E5;
3112}
3113ul.tabs li a.selected {
3114  height: 37px;
3115  color: #33B5E5;
3116  background-color: #f7f7f7;
3117  background-image: none;
3118  border-color: #ddd;
3119}
3120.tab-content {
3121  padding: 1.2em;
3122  margin: -1px 0 2em 0;
3123  -webkit-border-radius: 2px;
3124    -moz-border-radius: 2px;
3125    border-radius: 2px;
3126  border: solid 1px #ddd;
3127  background: #f7f7f7;
3128}
3129/* --------------------------------------------------------------------------
3130Feature Boxes
3131*/
3132.feature-box {
3133  width: 291px;
3134  height: 200px;
3135  position: relative;
3136  background: #F7F7F7;
3137}
3138.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3139  z-index: 100;
3140  position: absolute;
3141  background-color: #aaa;
3142}
3143.box-border .top, .box-border .bottom {
3144  width: 291px;
3145  height: 1px;
3146}
3147.dialog .box-border .top,
3148.dialog .box-border .bottom { width:391px; }
3149
3150.box-border .left, .box-border .right {
3151  width: 1px;
3152  height: 8px;
3153}
3154.box-border .top { top: 0; left: 0 }
3155.box-border .top .left { top: 1px; left: 0 }
3156.box-border .top .right { top: 1px; right: 0 }
3157.box-border .bottom .left { top: -8px; left: 0 }
3158.box-border .bottom { top: 200px; left: 0 }
3159.box-border .bottom .right { top: -8px; right: 0 }
3160
3161.feature-box h4,
3162.dialog h4 {
3163    margin: 15px 18px 10px;
3164    padding:0;
3165}
3166
3167.feature-box p,
3168.dialog p {
3169    margin: 10px 18px;
3170    padding:0;
3171}
3172.feature-box .link,
3173.dialog .link {
3174    border-top: 1px solid #dedede;
3175    bottom: 0;
3176    position: absolute;
3177    width: inherit;
3178}
3179.feature-box a, .feature-box h4,
3180.dialog a, .dialog h4 {
3181    -webkit-transition: color .4s ease;
3182    -moz-transition: color .4s ease;
3183    -o-transition: color .4s ease;
3184    transition: color .4s ease;
3185}
3186.feature-box:hover {
3187  cursor: pointer;
3188}
3189.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3190.left, .feature-box:hover .right {
3191  background-color: #33B5E5;
3192}
3193.feature-box:hover h4, .feature-box:hover a {
3194  color: #33B5E5;
3195}
3196/* --------------------------------------------------------------------------
3197Page-Specific Styles
3198*/
3199.colors {
3200  position: relative;
3201  float: left;
3202  width: 92px;
3203  margin: 40px 0 20px;
3204}
3205.colors div {
3206  color: #fff;
3207  font-size: 11.5px;
3208  width: 82px;
3209  height: 82px;
3210  margin-top:-30px;
3211  line-height: 82px;
3212  text-align: center;
3213  border: solid 5px #fff;
3214  -webkit-border-radius: 50%;
3215  -moz-border-radius: 50%;
3216  border-radius: 50%;
3217}
3218
3219
3220
3221
3222
3223
3224
3225
3226
3227
3228
3229
3230
3231
3232/* ########### REFERENCE DOCS ################## */
3233
3234#packages-nav h2,
3235#classes-nav h2 {
3236  font-size:18px;
3237  margin:0;
3238  padding:0 0 0 4px;
3239}
3240
3241#jd-header {
3242  padding: 0 0 5px;
3243  margin: 20px 0 10px;
3244  font-size:13px;
3245  border-bottom:solid 1px #ccc;
3246}
3247
3248#jd-header h1 {
3249  margin:0;
3250  padding:0;
3251}
3252
3253/* page-top-right container for reference pages (holds
3254links to summary tables) */
3255#api-info-block {
3256  font-size:13px;
3257  margin:20px 0 0;
3258  padding:0 10px 6px;
3259  font-weight:normal;
3260  float:right;
3261  text-align:right;
3262  color:#999;
3263  max-width:70%;
3264}
3265
3266#api-info-block div.api-level {
3267  font-weight:bold;
3268  font-size:inherit;
3269  float:none;
3270  color:#222;
3271  padding:0;
3272  margin:0;
3273}
3274
3275/* inheritance table */
3276.jd-inheritance-table {
3277  border-spacing:0;
3278  margin:0;
3279  padding:0;
3280  font-size:13px;
3281  background-color:transparent;
3282}
3283.jd-inheritance-table tr td {
3284  border: none;
3285  margin: 0;
3286  padding: 0;
3287  background-color:transparent;
3288}
3289.jd-inheritance-table .jd-inheritance-space {
3290  font-weight:bold;
3291  width:1em;
3292}
3293.jd-inheritance-table .jd-inheritance-interface-cell {
3294  padding-left: 17px;
3295}
3296
3297
3298
3299.jd-sumtable a {
3300  text-decoration:none;
3301}
3302
3303.jd-sumtable a:hover {
3304  text-decoration:underline;
3305}
3306
3307/* the link inside a sumtable for "Show All/Hide All" */
3308.toggle-all {
3309  display:block;
3310  float:right;
3311  font-weight:normal;
3312  font-size:0.9em;
3313}
3314
3315/* adjustments for in/direct subclasses tables */
3316.jd-sumtable.jd-sumtable-subclasses {
3317  margin: 1em 0 0 0;
3318  max-width:968px;
3319  background-color:transparent;
3320  font-size:13px;
3321}
3322
3323/* extra space between end of method name and open-paren */
3324.sympad {
3325  margin-right: 2px;
3326}
3327
3328/* right alignment for the return type in sumtable */
3329.jd-sumtable .jd-typecol {
3330  text-align:right;
3331}
3332
3333/* adjustments for the expando table-in-table */
3334.jd-sumtable-expando {
3335  margin:.5em 0;
3336  padding:0;
3337}
3338
3339/* a div that holds a short description */
3340.jd-descrdiv {
3341  padding:3px 1em 0 1em;
3342  margin:0;
3343  border:0;
3344}
3345
3346#jd-content img.jd-expando-trigger-img {
3347  padding:0 4px 4px 0;
3348  margin:0;
3349}
3350
3351.jd-sumtable-subclasses div#subclasses-direct,
3352.jd-sumtable-subclasses div#subclasses-indirect {
3353  margin:0 0 0 13px;
3354}
3355
3356
3357
3358/********* MEMBER REF *************/
3359
3360
3361.jd-details {
3362/*  border:1px solid #669999;
3363  padding:4px; */
3364  margin:0 0 1em;
3365}
3366
3367/* API reference: a container for the
3368.tagdata blocks that make up the detailed
3369description */
3370.jd-details-descr {
3371  padding:0;
3372  margin:.5em .25em;
3373}
3374
3375/* API reference: a block containing
3376a detailed description, a params table,
3377seealso list, etc */
3378.jd-tagdata {
3379  margin:.5em 1em;
3380}
3381
3382.jd-tagdata p {
3383  margin:0 0 1em 1em;
3384}
3385
3386/* API reference: adjustments to
3387the detailed description block */
3388.jd-tagdescr {
3389  margin:.25em 0 .75em 0;
3390}
3391
3392.jd-tagdescr ol,
3393.jd-tagdescr ul {
3394  margin:0 2.5em;
3395  padding:0;
3396}
3397
3398.jd-tagdescr table,
3399.jd-tagdescr img {
3400  margin:.25em 1em;
3401}
3402
3403.jd-tagdescr li {
3404margin:0 0 .25em 0;
3405padding:0;
3406}
3407
3408/* API reference: heading marking
3409the details section for constants,
3410attrs, methods, etc. */
3411h4.jd-details-title {
3412  font-size:1.15em;
3413  background-color: #E2E2E2;
3414  margin:1.5em 0 .6em;
3415  padding:3px 95px 3px 3px; /* room for api-level */
3416}
3417body.google h4.jd-details-title {
3418  background-color: #FFF;
3419  padding-top:5px;
3420  border-top: 1px solid #ccc;
3421}
3422body.google table.jd-sumtable th {
3423  background-color: #FFF;
3424  color:#000;
3425}
3426
3427h4.jd-tagtitle {
3428  margin:0;
3429}
3430
3431h4 .normal {
3432  font-weight:normal;
3433}
3434
3435/* API reference: heading for "Parameters", "See Also", etc.,
3436in details sections */
3437h5.jd-tagtitle {
3438  margin:0 0 .25em 0;
3439  font-size:1em;
3440}
3441
3442.jd-tagtable {
3443  margin:0;
3444  background-color:transparent;
3445  width:auto;
3446}
3447
3448.jd-tagtable td,
3449.jd-tagtable th {
3450  border:none;
3451  background-color:#fff;
3452  vertical-align:top;
3453  font-weight:normal;
3454  padding:2px 10px;
3455}
3456
3457.jd-tagtable th {
3458  font-style:italic;
3459}
3460
3461/* Inline api level indicator for methods */
3462div.api-level {
3463  font-size:.8em;
3464  font-weight:normal;
3465  color:#999;
3466  float:right;
3467  padding:0 8px 0;
3468  margin-top:-30px;
3469}
3470
3471table.jd-tagtable td,
3472table.jd-tagtable th {
3473  background-color:transparent;
3474}
3475
3476table.jd-tagtable th {
3477  color:inherit;
3478}
3479
3480
3481
3482
3483
3484
3485
3486
3487
3488
3489
3490
3491
3492
3493
3494
3495
3496
3497
3498
3499
3500
3501
3502/* SEARCH FILTER */
3503
3504.menu-container {
3505  position:relative;
3506}
3507#search_autocomplete {
3508  font-weight:normal;
3509}
3510
3511.search_filtered_wrapper.reference {
3512  width: 193px;
3513  float: right;
3514}
3515.search_filtered_wrapper.docs {
3516  width:875px;
3517  float: left;
3518  position:absolute;
3519  top:26px;
3520  right:66px;
3521}
3522.suggest-card {
3523  position:relative;
3524  width:170px;
3525  min-height:90px;
3526  padding:5px;
3527  border: solid 1px #C5C5C5;
3528  background: white;
3529  top: 15px;
3530  margin-right:-5px;
3531  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3532  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3533  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3534}
3535.suggest-card.reference {
3536  position:absolute;
3537  z-index:999;
3538  min-width:171px; /* +padding and border makes this match input width */
3539  min-height:93px; /* add 3px because this has 1 not 4px top border */
3540  width:auto;
3541  top:41px;
3542  margin:0;
3543}
3544.suggest-card.develop {
3545  z-index:997;
3546  border-top: solid 4px #F80;
3547  float:right;
3548}
3549.suggest-card.design {
3550  z-index:996;
3551  border-top: solid 4px #33b5e5;
3552  float:right;
3553}
3554.suggest-card.distribute {
3555  z-index:995;
3556  border-top: solid 4px #9C0;
3557  float:right;
3558}
3559.child-card {
3560  width:100%;
3561}
3562.suggest-card.dummy {
3563  width:172px;
3564  float:right;
3565  border:0;
3566  background:transparent;
3567  -moz-box-shadow: none;
3568  -webkit-box-shadow: none;
3569  box-shadow: none;
3570}
3571
3572ul.search_filtered {
3573  min-width:100%;
3574  list-style: none;
3575  margin: 0 0 5px;
3576  padding: 0;
3577}
3578.search_filtered .jd-selected {
3579  background:#efefef;
3580  cursor:pointer;
3581}
3582.search_filtered .jd-selected,
3583.search_filtered .jd-selected a {
3584    color:#09C !important;
3585}
3586
3587.no-display {
3588  display: none;
3589}
3590
3591.search_filtered li.jd-autocomplete {
3592  font-size: 0.81em;
3593  border: none;
3594  margin: 0 0 2px;
3595  padding: 0;
3596  line-height:1.5em;
3597}
3598
3599.search_filtered li a {
3600  padding:0 5px;
3601  color:#222 !important;
3602  display:inline-block;
3603  line-height:12px;
3604}
3605
3606.search_filtered li.header {
3607  font-weight:bold;
3608  color:#444;
3609  border: none;
3610  margin: 8px 0 2px;
3611  padding:1px 5px;
3612  line-height:1.5em;
3613}
3614.search_filtered li.header.small {
3615  font-size:0.85em;
3616}
3617
3618.suggest-card.reference
3619.search_filtered li.header {
3620  color:#aaa;
3621  font-size: 0.81em;
3622}
3623
3624.search_filtered li.header:first-child {
3625  margin: 0 0 2px;
3626}
3627
3628.show-item {
3629  display: table-row;
3630}
3631.hide-item {
3632  display: hidden;
3633}
3634
3635
3636
3637
3638
3639/* SEARCH RESULTS */
3640
3641
3642#leftSearchControl .gsc-twiddle {
3643  background-image : none;
3644}
3645
3646#leftSearchControl td, #searchForm td {
3647  border: 0px solid #000;
3648  padding:0;
3649}
3650
3651#leftSearchControl .gsc-resultsHeader .gsc-title {
3652  padding-left : 0px;
3653  font-weight : bold;
3654  font-size : 13px;
3655  color:#006699;
3656  display : none;
3657}
3658
3659#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3660  display : none;
3661}
3662
3663#leftSearchControl .gsc-resultsRoot {
3664  padding-top : 6px;
3665}
3666
3667#leftSearchControl div.gs-visibleUrl-long {
3668  display : block;
3669  color:#006699;
3670}
3671
3672#leftSearchControl .gsc-webResult {
3673  padding:0 0 20px 0;
3674}
3675
3676.gsc-webResult div.gs-visibleUrl-short,
3677table.gsc-branding,
3678.gsc-clear-button {
3679  display : none;
3680}
3681
3682.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3683.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3684#leftSearchControl a,
3685#leftSearchControl a b {
3686  color:#006699;
3687}
3688
3689.gsc-resultsHeader {
3690  display: none;
3691}
3692
3693/* Disable built in search forms */
3694.gsc-control form.gsc-search-box {
3695  display : none;
3696}
3697table.gsc-search-box {
3698  margin:6px 0 0 0;
3699  border-collapse:collapse;
3700}
3701
3702td.gsc-input {
3703  padding:0 2px;
3704  width:100%;
3705  vertical-align:middle;
3706}
3707
3708input.gsc-input {
3709  border:1px solid #BCCDF0;
3710  width:99%;
3711  padding-left:2px;
3712  font-size:.95em;
3713}
3714
3715td.gsc-search-button {
3716  text-align: right;
3717  padding:0;
3718  vertical-align:top;
3719}
3720
3721
3722#searchResults {
3723  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3724(it doesn't) */
3725  height:auto;
3726}
3727
3728#searchResults .gsc-control {
3729  position:relative;
3730  width:auto;
3731  padding:0 0 10px;
3732}
3733
3734#searchResults .gsc-tabsArea {
3735  position:relative;
3736  white-space:nowrap;
3737  float:left;
3738  width:200px;
3739}
3740
3741#searchResults .gsc-above-wrapper-area {
3742  display:none;
3743}
3744
3745#searchResults .gsc-resultsbox-visible {
3746  float:left;
3747  width:720px;
3748  margin-left:20px;
3749}
3750
3751#searchResults .gsc-tabHeader {
3752  padding: 3px 6px;
3753  position:relative;
3754  width:auto;
3755  display:block;
3756}
3757
3758#searchResults h2#searchTitle {
3759  padding:0;
3760  margin:5px 0;
3761  border:none;
3762}
3763
3764#searchResults h2#searchTitle em {
3765  font-style:normal;
3766  color:#33B5E5;
3767}
3768
3769#searchResults .gsc-table-result {
3770  margin:5px 0 10px 0;
3771  background-color:transparent;
3772}
3773#searchResults .gs-web-image-box, .gs-promotion-image-box {
3774  width:120px;
3775}
3776#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3777  max-width:120px;
3778}
3779
3780#searchResults .gsc-table-result .gsc-thumbnail {
3781  padding:0 20px 0 0;
3782}
3783
3784#searchResults td {
3785  background-color:transparent;
3786}
3787
3788#searchResults .gsc-expansionArea {
3789  position:relative;
3790}
3791#searchResults .gsc-tabsArea .gsc-cursor-box {
3792  width:200px;
3793  padding:20px 0 0 1px;
3794}
3795#searchResults .gsc-cursor-page {
3796  display:inline-block;
3797  float:left;
3798  margin:-1px 0 0 -1px;
3799  padding:0;
3800  height:27px;
3801  width:27px;
3802  text-align:center;
3803  line-height:2;
3804}
3805
3806#searchResults .gsc-tabHeader.gsc-tabhInactive,
3807#searchResults .gsc-cursor-page {
3808  text-decoration:none;
3809  color:#258AAF;
3810  border: solid 1px #DADADA;
3811}
3812
3813#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
3814#searchResults .gsc-cursor-page:hover {
3815  border-color: #DBDBDB;
3816  background-color: #F3F3F3;
3817  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
3818  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
3819  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
3820  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
3821  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
3822  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
3823  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
3824EndColorStr='#ececec');
3825  color: #33B5E5;
3826}
3827
3828#searchResults .gsc-tabHeader.gsc-tabhActive,
3829#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
3830#searchResults .gsc-cursor-page.gsc-cursor-current-page,
3831#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
3832  color:#fff;
3833  background-color: #09C;
3834  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
3835  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
3836  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
3837  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
3838  background-image: -o-linear-gradient(top, #2FADDB, #09C);
3839  background-image: linear-gradient(top, #2FADDB, #09C);
3840  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
3841  border: 1px solid #3990AB;
3842  z-index:100;
3843}
3844
3845}
3846
3847
3848
3849
3850
3851
3852
3853
3854
3855
3856
3857
3858
3859/*********** PREVIOUSLY dac-styles.css ***************/
3860
3861
3862#header {
3863  border-bottom:0;
3864}
3865
3866#header .wrap {
3867  max-width:940px;
3868  height:41px;
3869  border-bottom:1px solid;
3870  border-color: #ccc;
3871  position:relative;
3872}
3873
3874.about #header .wrap {
3875  border-color: #9933CC;
3876}
3877
3878.design #header .wrap {
3879  border-color: #33b5e5;
3880}
3881
3882.develop #header .wrap {
3883  border-color: #F80;
3884}
3885
3886.distribute #header .wrap {
3887  border-color: #9C0;
3888}
3889
3890.logo a {
3891  width:123px;
3892  float:left;
3893}
3894
3895#header .logo {
3896  margin-top: -6px;
3897  margin-left: 0px;
3898  margin-bottom:0px;
3899  width: 160px;
3900  padding-right:10px;
3901}
3902
3903.search {
3904  height:25px;
3905  margin-top: -3px;
3906  margin-bottom: 0px;
3907}
3908
3909
3910
3911/* Quicknav */
3912.btn-quicknav {
3913  width:20px;
3914  height:28px;
3915  float:left;
3916  margin-left:6px;
3917  padding-right:10px;
3918  position:relative;
3919  cursor:pointer;
3920  border-right:1px solid #CCC;
3921}
3922
3923.btn-quicknav a {
3924  zoom:1;
3925  position:absolute;
3926  top:13px;
3927  left:5px;
3928  display:block;
3929  text-indent:-9999em;
3930  width:10px;
3931  height:5px;
3932  background:url(../images/quicknav_arrow.png) no-repeat;
3933}
3934
3935.btn-quicknav a.arrow-active {
3936  background-position: 0 -5px;
3937  display:none;
3938}
3939
3940#header-wrap.quicknav a.arrow-inactive {
3941  display:none;
3942}
3943
3944.btn-quicknav.active a.arrow-active {
3945  display:block;
3946}
3947
3948.nav-x li {
3949  display:block;
3950  float:left;
3951  margin-right:45px;
3952  -webkit-transition: all 0.25s linear;
3953      -moz-transition: all 0.25s linear;
3954       -ms-transition: all 0.25s linear;
3955        -o-transition: all 0.25s linear;
3956           transition: all 0.25s linear;
3957}
3958
3959#header-wrap.quicknav .nav-x li {
3960  min-width:160px;
3961  margin-right:20px;
3962}
3963
3964#header-wrap.quicknav li.last {
3965  margin-right:0px;
3966}
3967
3968#quicknav {
3969 float:none;
3970 clear:both;
3971 margin-left:180px;
3972 margin-top:-30px;
3973 display:none;
3974 overflow:hidden;
3975}
3976
3977#header-wrap.quicknav #quicknav {
3978
3979}
3980
3981#quicknav ul {
3982  margin:10px 0;
3983  padding:0;
3984}
3985
3986#quicknav ul li.design {
3987  border-top:1px solid #33b5e5;
3988}
3989
3990#quicknav ul li.develop {
3991  border-top:1px solid #FF8800;
3992}
3993
3994#quicknav ul li.distribute {
3995  border-top:1px solid #99cc00;
3996}
3997
3998#quicknav ul li {
3999  display:block;
4000  float:left;
4001  margin:0 20px 0 0;
4002  min-width:140px;
4003}
4004
4005#quicknav ul li.last {
4006  margin-right:0px;
4007}
4008
4009#quicknav ul li ul li {
4010  float:none;
4011}
4012
4013#quicknav ul li ul li a {
4014  color:#222;
4015}
4016
4017#quicknav ul li li ul,
4018#quicknav ul li li ul li {
4019  margin:0;
4020}
4021
4022#quicknav ul li li ul li:before {
4023  content:"\21B3";
4024}
4025
4026#header-wrap {
4027   -webkit-transition: all 0.25s ease-out;
4028      -moz-transition: all 0.25s ease-out;
4029       -ms-transition: all 0.25s ease-out;
4030        -o-transition: all 0.25s ease-out;
4031           transition: all 0.25s ease-out;
4032
4033}
4034
4035#header-wrap.quicknav {
4036  height:196px;
4037
4038}
4039
4040/* SEARCH AND MORE */
4041.search {
4042  position: absolute;
4043  width: 50px;
4044  height:28px;
4045  display: block;
4046  margin-top:-3px;
4047  margin-bottom:7px;
4048  overflow:hidden;
4049  z-index:100;
4050  right:54px;
4051  -webkit-transition: width 0.4s ease;
4052     -moz-transition: width 0.4s ease;
4053       -o-transition: width 0.4s ease;
4054          transition: width 0.4s ease;
4055}
4056
4057.search #search-btn {
4058  width:50px;
4059  height:28px;
4060  background:url(../images/icon_search.png) no-repeat;
4061  float:left;
4062}
4063
4064.search-inner {
4065  width:245px;
4066}
4067
4068.search:hover, .search.active {
4069  width:245px;
4070}
4071
4072.search .bottom, .search .left, .search .right {
4073  position: absolute;
4074  background-color: #a2a2a2
4075}
4076
4077.search .bottom {
4078  width: 214px;
4079  height: 1px;
4080  top: 24px;
4081  left: 0
4082}
4083
4084.search .left, .search .right {
4085  height: 5px;
4086  width: 1px
4087}
4088
4089.search .left {
4090  top: 22px;
4091  left: 56px;
4092  background-color:#CCC;
4093}
4094
4095.search .right {
4096  top: 22px;
4097  left: 238px;
4098  background-color:#CCC;
4099}
4100
4101.search form {
4102  margin-top: 2px;
4103  width: 162px;
4104  float:left;
4105}
4106
4107.search form input {
4108  color: #2f2f2f;
4109  font-size: 0.95em;
4110  width: 178px;
4111  border: none;
4112  margin-left: 6px;
4113  z-index: 1500;
4114  position: relative;
4115  background-color: transparent;
4116  border-bottom:1px solid #CCC;
4117  padding:0 0 0 4px;
4118  outline:none;
4119  height:24px;
4120}
4121
4122.search:hover form input {
4123  border-bottom:1px solid #33B5E5;
4124}
4125
4126.search:hover .bottom, .search:hover .left, .search:hover .right {
4127  background-color: #33b5e5;
4128}
4129
4130.search:hover #search-btn {
4131  background-position: 0 -28px
4132}
4133
4134.search form input:focus {
4135  color: #222;
4136  font-weight: bold
4137}
4138
4139.moremenu {
4140  float: right;
4141  position: relative;
4142  width: 50px;
4143  height:28px;
4144  display: block;
4145  margin-top:-3px;
4146  margin-bottom:7px;
4147  overflow:hidden;
4148  -webkit-transition: width 0.25s ease;
4149     -moz-transition: width 0.25s ease;
4150       -o-transition: width 0.25s ease;
4151          transition: width 0.25s ease;
4152}
4153
4154.moremenu #more-btn {
4155  width:40px;
4156  height:28px;
4157  background:url(../images/icon_more.png) no-repeat;
4158  border-left:1px solid #CCC;
4159  float:left;
4160  cursor:pointer;
4161}
4162
4163.moremenu:hover #more-btn {
4164  background-position:0 -28px;
4165}
4166
4167.morehover {
4168  position:absolute;
4169  right:6px;
4170  top:-9px;
4171  width:40px;
4172  height:35px;
4173  z-index:99;
4174  overflow:hidden;
4175
4176  -webkit-opacity:0;
4177     -moz-opacity:0;
4178       -o-opacity:0;
4179          opacity:0;
4180
4181  -webkit-transform-origin:100% 0%;
4182     -moz-transform-origin:100% 0%;
4183       -o-transform-origin:100% 0%;
4184          transform-origin:100% 0%;
4185
4186  -webkit-transition-property: -webkit-opacity;
4187  -webkit-transition-duration: .25s;
4188  -webkit-transition-timing-function:ease;
4189
4190  -moz-transition-property: -moz-opacity;
4191  -moz-transition-duration: .25s;
4192  -moz-transition-timing-function:ease;
4193
4194  -o-transition-property: -o-opacity;
4195  -o-transition-duration: .25s;
4196  -o-transition-timing-function:ease;
4197
4198  transition-property: opacity;
4199  transition-duration: .25s;
4200  transition-timing-function:ease;
4201}
4202
4203.morehover:hover,
4204.morehover.hover {
4205  opacity:1;
4206  height:385px;
4207  width:268px;
4208  -webkit-transition-property:height,  -webkit-opacity;
4209}
4210
4211.morehover .top {
4212  width:268px;
4213  height:39px;
4214  background:url(../images/more_top.png) no-repeat;
4215}
4216
4217.morehover .mid {
4218  width:228px;
4219  background:url(../images/more_mid.png) repeat-y;
4220  padding:10px 20px 0 20px;
4221}
4222
4223.morehover .mid .header {
4224  border-bottom:1px solid #ccc;
4225  font-weight:bold;
4226}
4227
4228.morehover .bottom {
4229  width:268px;
4230  height:6px;
4231  background:url(../images/more_bottom.png) no-repeat;
4232}
4233
4234.morehover ul {
4235  margin:10px 10px 20px 0;
4236}
4237
4238.morehover ul li {
4239  list-style:none;
4240}
4241
4242.morehover ul li.active a,
4243.morehover ul li.active a:hover {
4244  color:#222 !important;
4245}
4246
4247.morehover ul li.active img {
4248  margin-right:4px;
4249}
4250
4251
4252
4253
4254/* MARQUEE */
4255.slideshow-container {
4256  width:100%;
4257  overflow:hidden;
4258  position:relative;
4259}
4260.slideshow-container .slideshow-prev {
4261  position:absolute;
4262  top:50%;
4263  left:0px;
4264  margin-top:-36px;
4265  z-index:99;
4266}
4267.slideshow-container .slideshow-next {
4268  position:absolute;
4269  top:50%;
4270  margin-top:-36px;
4271  z-index:99;
4272  right:0px;
4273}
4274
4275.slideshow-container .pagination {
4276  position:absolute;
4277  bottom:20px;
4278  width:100%;
4279  text-align:center;
4280  z-index:99;
4281}
4282.slideshow-container .pagination ul {
4283  margin:0;
4284}
4285.slideshow-container .pagination ul li{
4286  display: inline-block;
4287  width:12px;
4288  height:12px;
4289  text-indent:-8000px;
4290  list-style:none;
4291  margin: 0 2px;
4292  border-radius:6px;
4293  background-color:#ccc;
4294  cursor:pointer;
4295        -webkit-transition:color .5s ease-in;
4296        -moz-transition:color .5s ease-in;
4297        -o-transition:color .5s ease-in;
4298        transition:color .5s ease-in;
4299}
4300.slideshow-container .pagination ul li:hover {
4301  background-color:#999;
4302}
4303.slideshow-container .pagination ul li.active {
4304  background-color:#33b5e5;
4305}
4306.slideshow-container .pagination ul li.active:hover {
4307  background-color:#33b5e5;
4308}
4309.slideshow-container ul li {
4310  display:inline;
4311  list-style:none;
4312}
4313
4314
4315
4316
4317a.download-sdk {
4318    float:right;
4319    margin:-10px 0;
4320    height:30px;
4321    padding-top:4px;
4322    padding-bottom:0px;
4323}
4324
4325#nav-x {
4326  padding-top: 14px;
4327}
4328
4329#nav-x .wrap {
4330  min-height:34px;
4331}
4332
4333#nav-x .wrap,
4334#searchResults.wrap {
4335    max-width:940px;
4336    border-bottom:1px solid #CCC;
4337}
4338
4339#searchResults.wrap #leftSearchControl {
4340  min-height:700px
4341}
4342.nav-x {
4343    margin-left:0;
4344    margin-bottom:0;
4345}
4346
4347
4348
4349
4350
4351
4352
4353
4354
4355
4356/*
4357 * CSS Styles that are needed by jScrollPane for it to operate correctly.
4358 */
4359
4360.jspContainer {
4361  overflow: hidden;
4362  position: relative;
4363}
4364
4365.jspPane {
4366  position: absolute;
4367  overflow: hidden;
4368  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4369}
4370
4371.jspVerticalBar {
4372  position: absolute;
4373  top: 0;
4374  right: 0;
4375  width: 4px;
4376  height: 100%;
4377  background: #f5f5f5;
4378}
4379
4380.jspHorizontalBar {
4381  position: absolute;
4382  bottom: 0;
4383  left: 0;
4384  width: 100%;
4385  height: 4px;
4386  background: #f5f5f5;
4387}
4388
4389.jspVerticalBar *,
4390.jspHorizontalBar * {
4391  margin: 0;
4392  padding: 0;
4393}
4394.jspCap {
4395  display: block;
4396}
4397
4398.jspVerticalBar .jspCap {
4399  height: 4px;
4400}
4401
4402.jspHorizontalBar .jspCap {
4403  width: 0;
4404  height: 100%;
4405}
4406
4407.jspHorizontalBar .jspCap {
4408  float: left;
4409}
4410
4411.jspTrack {
4412  position: relative;
4413}
4414
4415.jspDrag {
4416  background: #bbb;
4417  position: relative;
4418  top: 0;
4419  left: 0;
4420  cursor: pointer;
4421}
4422
4423.jspDrag:hover,
4424.jspDrag:active {
4425  border-color: #09c;
4426  background-color: #4cadcb;
4427  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4428  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4429  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4430  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4431  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4432  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4433  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4434}
4435
4436.jspHorizontalBar .jspTrack,
4437.jspHorizontalBar .jspDrag {
4438  float: left;
4439  height: 100%;
4440}
4441
4442.jspArrow {
4443  background: #999;
4444  text-indent: -20000px;
4445  display: block;
4446  cursor: pointer;
4447}
4448
4449.jspArrow.jspDisabled {
4450  cursor: default;
4451  background: #ccc;
4452}
4453
4454.jspVerticalBar .jspArrow {
4455  height: 16px;
4456}
4457
4458.jspHorizontalBar .jspArrow {
4459  width: 16px;
4460  float: left;
4461  height: 100%;
4462}
4463
4464.jspVerticalBar .jspArrow:focus {
4465  outline: none;
4466}
4467
4468.jspCorner {
4469  float: left;
4470  height: 100%;
4471}
4472
4473/* Yuk! CSS Hack for IE6 3 pixel bug :( */
4474* html .jspCorner {
4475  margin: 0 -3px 0 0;
4476}
4477/******* end of jscrollpane *********/
4478
4479
4480
4481
4482
4483/************ DEVELOP HOMEPAGE ******************/
4484
4485/* Slideshow */
4486.slideshow-develop {
4487  height: 300px;
4488  width: 940px;
4489  position: relative;
4490  overflow:hidden;
4491}
4492.slideshow-develop .frame {
4493  width: 940px;
4494  height: 300px;
4495}
4496.slideshow-develop img.play {
4497  max-width:350px;
4498  max-height:240px;
4499  margin:20px 0 0 90px;
4500  -webkit-transform: perspective(800px ) rotateY( 35deg );
4501  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4502  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4503  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4504}
4505.slideshow-develop img.play.no-shadow {
4506    box-shadow: none;
4507    -moz-box-shadow: none;
4508    -webkit-box-shadow: none;
4509}
4510.slideshow-develop img.play.no-transform {
4511  -webkit-transform: none;
4512}
4513.slideshow-develop a.slideshow-next {
4514  background: url(../images/arrow-right-develop.png);
4515}
4516.slideshow-develop a.slideshow-prev {
4517  background: url(../images/arrow-left-develop.png);
4518}
4519.slideshow-develop .content-right {
4520  float: left;
4521}
4522.slideshow-develop .content-right h2 {
4523  padding:0;
4524  margin-bottom:10px;
4525  border:none;
4526}
4527.slideshow-develop .item {
4528  height: 300px;
4529  width: 940px;
4530}
4531.slideshow-develop .pagination ul li.active {
4532  background-color: #F80;
4533}
4534.slideshow-develop .pagination ul li.active:hover {
4535  background-color: #F80;
4536}
4537.slideshow-develop .item hr {
4538  margin:5px 0 10px;
4539}
4540.slideshow-develop .item p {
4541  margin:10px 0;
4542}
4543.slideshow-develop .item p.title-intro {
4544  position:absolute;
4545  margin:0;
4546}
4547
4548/* Feeds */
4549.feed ul {
4550  margin: 0;
4551}
4552.feed .feed-nav {
4553  height: 25px;
4554  border-bottom: 1px solid #CCC;
4555}
4556.feed .feed-nav li {
4557  list-style: none;
4558  float: left;
4559  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4560  margin-right: 25px;
4561  cursor: pointer;
4562}
4563.feed .feed-nav li.active {
4564  color: #000;
4565  border-bottom: 4px solid #F80;
4566}
4567.feed .feed-container {
4568  overflow: hidden;
4569  width: 460px;
4570}
4571.feed .feed-container .feed-frame {
4572  width: 1000px;
4573}
4574.feed .feed-container .feed-frame ul {
4575  float: left;
4576  width:460px;
4577}
4578.feed .feed-container .feed-frame ul ul {
4579  float: none;
4580  margin:10px 0 0 30px;
4581}
4582.feed .feed-container .feed-frame li {
4583  list-style: none;
4584  margin: 20px 0 20px 0;
4585  width: 460px;
4586  height:93px;
4587}
4588.feed .feed-container .feed-frame li.playlist {
4589  height:auto;
4590}
4591.feed .feed-container .feed-frame li.playlist a {
4592  height:93px;
4593  display:block;
4594}
4595.feed .feed-container .feed-frame li.more {
4596  height:20px;
4597  margin:10px 0 5px 5px;
4598}
4599.feed .feed-container .feed-frame li.more a {
4600  height:inherit;
4601}
4602.feed .feed-container .feed-frame li.playlist-video {
4603  list-style: none;
4604  margin: 0;
4605  width: 460px;
4606  height:55px;
4607  font-size:12px;
4608}
4609.feed .feed-container .feed-frame li.playlist-video a {
4610  height:45px;
4611  padding:5px;
4612}
4613.feed .feed-container .feed-frame li.playlist-video h5 {
4614  font-size:12px;
4615  line-height:13px;
4616  margin:0;
4617}
4618.feed .feed-container .feed-frame li.playlist-video p {
4619  margin:5px 0 0;
4620  line-height:15px;
4621}
4622.feed-container .feed-frame div.feed-image {
4623  float: left;
4624  border: 1px solid #999;
4625  margin:0 20px 0 0;
4626  width:122px;
4627  height:92px;
4628  background:url('../images/blog-default.png') no-repeat 0 0;
4629  background-size:180px;
4630}
4631#jd-content .feed .feed-container .feed-frame li img {
4632  float: left;
4633  border: 1px solid #999;
4634  margin:0 20px 0 0;
4635  width:122px;
4636  height:92px;
4637}
4638#jd-content .feed .feed-container .feed-frame li.playlist-video img {
4639  width:inherit;
4640  height:inherit;
4641}
4642
4643.feed .feed-container .feed-frame li a,
4644.feed .feed-container .feed-frame li a:active {
4645  color:#555 !important;
4646}
4647
4648.feed .feed-container .feed-frame li a:hover,
4649.feed .feed-container .feed-frame li a:hover * {
4650  color:#7AA1B0 !important;
4651}
4652
4653/* Video player */
4654#player-wrapper {
4655  display:none;
4656  margin: -1px auto 0;
4657  position: relative;
4658  width: 940px;
4659  height: 0px;
4660}
4661#player-frame {
4662  background: #EFEFEF;
4663  border: 1px solid #CCC;
4664  padding: 0px 207px;
4665  z-index: 10; /* stay above marque, but below search suggestions */
4666  width: 525px;
4667  height: 330px;
4668  position: relative;
4669}
4670
4671
4672
4673/************ DISTRIBUTE HOMEPAGE ***************/
4674
4675.marquee {
4676  width: 760px;
4677}
4678.marquee .main-img {
4679  float: left;
4680  margin-top: 20px;
4681  width: 490px;
4682}
4683.marquee .copy {
4684  width: 270px;
4685  float: left;
4686  margin-top: 30px;
4687}
4688.distribute-features {
4689  margin: 0;
4690}
4691.distribute-features ul {
4692  margin: 0;
4693}
4694.distribute-features ul li {
4695  list-style: none;
4696  float: left;
4697  border-top: 1px solid #9C0;
4698  width: 220px;
4699  margin-right: 50px;
4700}
4701.distribute-features ul li.last {
4702  margin-right: 0px;
4703}
4704
4705.distribute-features .distribute-link li a {
4706  color:red !important;
4707}
4708
4709.distribute-features .distribute-link li a,
4710.distribute-features .distribute-link li a:active {
4711  color:#555 !important;
4712}
4713
4714.distribute-features .distribute-link li a:hover,
4715.distribute-features .distribute-link li a:hover * {
4716  color:#7AA1B0 !important;
4717}
4718
4719
4720/************ DEVELOP TOPIC CONTAINERS ************/
4721
4722.landing-banner,
4723.landing-docs {
4724  margin:20px 0 0;
4725}
4726.landing-banner div:first-child,
4727.landing-docs div:first-child,
4728.landing-docs .col-12 {
4729  margin-left:0;
4730  min-height:280px;
4731}
4732.landing-banner div:last-child,
4733.landing-docs div:last-child,
4734.landing-docs .col-12 {
4735  margin-right:0;
4736}
4737
4738.landing-banner h1 {
4739  margin-top:0;
4740}
4741.landing-docs {
4742  clear:left;
4743  overflow:hidden;
4744}
4745.landing-docs h3 {
4746  font-size:14px;
4747  line-height:21px;
4748  color:#555;
4749  text-transform:uppercase;
4750  border-bottom:1px solid #CCC;
4751  margin:0 0 20px;
4752}
4753.landing-docs a {
4754  color:#333 !important;
4755}
4756
4757.landing-docs a:hover,
4758.landing-docs a:hover * {
4759  color:#7AA1B0 !important
4760}
4761
4762.landing-docs .normal-links a {
4763  color:#258aaf !important;
4764}
4765
4766.plusone {
4767  float:right;
4768}
4769
4770
4771
4772/************* HOME/LANDING PAGE *****************/
4773
4774.slideshow-home {
4775  height: 500px;
4776  width: 940px;
4777  border-bottom: 1px solid #CCC;
4778  position: relative;
4779  margin: 0;
4780}
4781.slideshow-home .frame {
4782  width: 940px;
4783  height: 500px;
4784}
4785.slideshow-home .content-left {
4786  float: left;
4787  text-align: center;
4788  vertical-align: center;
4789  margin: 0 0 0 35px;
4790}
4791.slideshow-home .content-right {
4792  margin: 80px 0 0 0;
4793}
4794.slideshow-home .content-right p {
4795  margin-bottom: 10px;
4796}
4797.slideshow-home .content-right p:last-child {
4798  margin-top: 15px;
4799}
4800.slideshow-home .content-right h1 {
4801  padding:0;
4802}
4803.slideshow-home .item {
4804  height: 500px;
4805  width: 940px;
4806}
4807.home-sections {
4808  padding: 30px 20px 20px;
4809  margin: 20px 0;
4810  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
4811}
4812.home-sections ul {
4813  margin: 0;
4814}
4815.home-sections ul li {
4816  float: left;
4817  display: block;
4818  list-style: none;
4819  width: 170px;
4820  height: 35px;
4821  border: 1px solid #ccc;
4822  background: white;
4823  margin-right: 10px;
4824  border-radius: 1px;
4825  -webkit-border-radius: 1px;
4826  -moz-border-radius: 1px;
4827  box-shadow: 1px 1px 5px #EEE;
4828  -webkit-box-shadow: 1px 1px 5px #EEE;
4829  -moz-box-shadow: 1px 1px 5px #EEE;
4830  background: white;
4831}
4832.home-sections ul li:hover {
4833  background: #F9F9F9;
4834  border: 1px solid #CCC;
4835}
4836.home-sections ul li a,
4837.home-sections ul li a:hover {
4838  font-weight: bold;
4839  margin-top: 8px;
4840  line-height: 18px;
4841  float: left;
4842  width: 100%;
4843  text-align: center;
4844  color: #09c !important;
4845}
4846.home-sections ul li a {
4847  font-weight: bold;
4848  margin-top: 8px;
4849  line-height: 18px;
4850  float: left;
4851  width:100%;
4852  text-align:center;
4853}
4854.home-sections ul li img {
4855  float: left;
4856  margin: -8px 0 0 10px;
4857}
4858.home-sections ul li.last {
4859  margin-right: 0px;
4860}
4861.fullpage #footer {
4862  margin-top: -40px;
4863}
4864