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