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 {
1084  /* configure printed page */
1085  @page {
1086      margin: 0.75in 1in;
1087      widows: 4;
1088      orphans: 4;
1089  }
1090
1091  /* reset spacing metrics */
1092  html, body, .wrap {
1093      margin: 0 !important;
1094      padding: 0 !important;
1095      width: auto !important;
1096  }
1097
1098  /* leave enough space on the left for bullets */
1099  body {
1100      padding-left: 20px !important;
1101  }
1102  #doc-col {
1103      margin-left: 0;
1104  }
1105
1106  /* hide a bunch of non-content elements */
1107  #header, #footer, #nav-x, #side-nav,
1108  .training-nav-top, .training-nav-bottom,
1109  #doc-col .content-footer,
1110  .nav-x, .nav-y,
1111  .paging-links,
1112  a.totop {
1113      display: none !important;
1114  }
1115
1116  /* remove extra space above page titles */
1117  #doc-col .content-header {
1118      margin-top: 0;
1119  }
1120
1121  /* bump up spacing above subheadings */
1122  h2 {
1123      margin-top: 40px !important;
1124  }
1125
1126  /* print link URLs where possible and give links default text color */
1127  p a:after {
1128      content: " (" attr(href) ")";
1129      font-size: 80%;
1130  }
1131  p a {
1132      word-wrap: break-word;
1133  }
1134  a {
1135      color: inherit;
1136  }
1137
1138  /* syntax highlighting rules */
1139  .str { color: #060; }
1140  .kwd { color: #006; font-weight: bold; }
1141  .com { color: #600; font-style: italic; }
1142  .typ { color: #404; font-weight: bold; }
1143  .lit { color: #044; }
1144  .pun { color: #440; }
1145  .pln { color: #000; }
1146  .tag { color: #006; font-weight: bold; }
1147  .atn { color: #404; }
1148  .atv { color: #060; }
1149}
1150
1151/* =============================================================================
1152   Columns
1153   ========================================================================== */
1154
1155@media screen, projection, print {
1156.full {
1157	padding: 2.5em 0;
1158	border-top: solid 1px #ddd;
1159	border-bottom: solid 1px #ddd;
1160	background: #f7f7f7;
1161}
1162.wrap {
1163	margin: 0 auto;
1164	width: 940px;
1165	clear: both;
1166}
1167.cols {
1168    height: 1%;
1169    margin: 0 -1.533742331288343558282%;
1170    width: 103.06748466257669%}
1171*+html .cols {
1172    margin-bottom: 20px;
1173}
1174.cols:after {
1175    clear: both;
1176    content: ' ';
1177    display: block;
1178    height: 0;
1179    visibility: hidden;
1180}
1181.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
1182.col-13, .col-14, .col-15, .col-16 {
1183    display: inline;
1184	float: left;
1185	margin-left: 10px;
1186	margin-right: 10px;
1187}
1188/*
1189* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html
1190.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12  {
1191    margin: 0;
1192    padding: 0 1.4% 20px;
1193}
1194[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5,
1195[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10,
1196[dir='rtl'] .col-11, [dir='rtl'] .col-12 {
1197    float: right;
1198}
1199*/
1200.col-1 { width: 40px }
1201.col-2 { width: 100px }
1202.col-3 { width: 160px }
1203.col-4 { width: 220px }
1204.col-5 { width: 280px }
1205.col-6 { width: 340px }
1206.col-7 { width: 400px }
1207.col-8 { width: 460px }
1208.col-9 { width: 520px }
1209.col-10 { width: 580px }
1210.col-11 { width: 640px }
1211.col-12 { width: 700px }
1212.col-13 { width: 760px }
1213.col-14 { width: 820px }
1214.col-15 { width: 880px }
1215.col-16 { width: 940px }
1216}
1217
1218.col-right {
1219  margin-right:0px;
1220}
1221
1222@media screen and (max-width:772px) {
1223.col-5, .col-6, .col-7 {
1224    clear: both;
1225    width: 97.0238096%}
1226}
1227
1228/* =============================================================================
1229   Layout
1230   ========================================================================== */
1231@media screen, projection, print {
1232
1233/* --------------------------------------------------------------------------
1234Header, Login, Nav-X, Search
1235*/
1236#header {
1237	padding: 2.2em 0 0.2em 0;
1238}
1239#header:before, #header:after {
1240	content: "";
1241	display: table;
1242	clear: both
1243}
1244.logo, .nav-x {
1245    float: left;
1246}
1247.nav-x {
1248    margin-top: -2px;
1249	list-style-type: none;
1250}
1251.nav-x a {
1252    color: #333;
1253    font-size: 16px;
1254}
1255.design a.selected {
1256    color: #33b5e5;
1257}
1258.develop a.selected {
1259    color: #F80;
1260}
1261.distribute a.selected {
1262    color: #9C0;
1263}
1264
1265
1266
1267.nav-x li {
1268    display: inline;
1269    margin-right: 45px;
1270}
1271.search {
1272	float: right;
1273	position: relative;
1274	width: 220px
1275}
1276.search .bottom, .search .left, .search .right {
1277	position: absolute;
1278	background-color: #a3a3a3;
1279}
1280.search .bottom {
1281	width: 220px;
1282	height: 1px;
1283	top: 24px;
1284	left: 0
1285}
1286.search .left, .search .right {
1287	height: 5px;
1288	width: 1px
1289}
1290.search .left {	top: 19px; left: 0 }
1291.search .right { top: 19px; right: 0 }
1292.search form {
1293	float: left;
1294	margin-top: 2px;
1295	width: inherit;
1296}
1297.search .close,
1298#player-frame .close {
1299  position: absolute;
1300  right: 8px;
1301  bottom: 4px;
1302  width: 16px;
1303  height: 16px;
1304  margin: 0;
1305  text-indent: -1000em;
1306  background: url(../images/close.png) no-repeat 0 0;
1307  z-index:9999;
1308}
1309.search .close:hover, .search .close:focus,
1310#player-frame .close:hover, #player-frame .close:focus {
1311  background-position: -16px 0;
1312  cursor:pointer;
1313}
1314#player-frame .close {
1315  top: 6px;
1316}
1317.search form input {
1318	color: #999;
1319	font-size: 1em;
1320	width: inherit;
1321	border: none;
1322	margin: 0;
1323	padding:0 0 0 6px;
1324	z-index: 1500;
1325	background-color: transparent
1326}
1327.search:hover .bottom, .search:hover .left, .search:hover .right {
1328	background-color: #33b5e5;
1329}
1330.search:hover .icon {
1331	background-position: -8px 0
1332}
1333.search form input:focus {
1334	color: #222;
1335	font-weight: bold;
1336	outline:0;
1337}
1338/* Search Dropdown */
1339.search-dropdown {
1340	padding: 15px;
1341	width: 192px;
1342	border: solid 1px #c5c5c5;
1343	background: #fff;
1344	position: absolute;
1345	top: 35px;
1346	left: 0;
1347	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1348	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1349	box-shadow: 0  0 10px rgba(0,0,0,0.2)
1350}
1351.search-dropdown ul, .search-dropdown ul li {
1352	list-style-type: none;
1353	margin: 0;
1354	padding: 0
1355}
1356.search-dropdown ul li {
1357	clear: both
1358}
1359.search-dropdown img {
1360	float: left;
1361	margin: 0 10px 10px 0
1362}
1363.search-dropdown h6 {
1364	color: #222;
1365	margin: 0;
1366	line-height: normal
1367}
1368.search-dropdown .desc {
1369	color: #999;
1370	font-size: 11.5px;
1371	line-height: normal;
1372	margin: 0;
1373}
1374.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc {
1375	color: #33b5e5
1376}
1377/* --------------------------------------------------------------------------
1378Buttons
1379*/
1380.button, a.button, .button-secondary, a.button-secondary {
1381	border-image: initial;
1382    -webkit-border-radius: 2px;
1383    -moz-border-radius: 2px;
1384    border-radius: 2px;
1385    cursor: pointer;
1386}
1387.button, a.button {
1388    background-color: #09c;
1389    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1390    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1391    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1392    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1393    background-image: -o-linear-gradient(top, #2faddb, #09c);
1394    background-image: linear-gradient(top, #2faddb, #09c);
1395    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
1396    border: 1px solid #3990ab;
1397    color: #fff;
1398}
1399.button-secondary, a.button-secondary {
1400    background-color: #f3f3f3;
1401    border: 1px solid #dcdcdc;
1402    color: #444;
1403}
1404a.button, a.button:visited, a.button-secondary, a.button-secondary:visited {
1405    height: 28px;
1406    line-height: 28px;
1407    margin-right: 16px;
1408	font-weight: 400;
1409    min-width: 54px;
1410    outline: 0;
1411    padding: 8px 15px;
1412    text-align: center;
1413}
1414.button, .button-secondary {
1415    height: 34px;
1416    line-height: 34px;
1417    margin-right: 16px;
1418	font-weight: 400;
1419    min-width: 54px;
1420    outline: 0;
1421    padding: 0 15px;
1422    text-align: center;
1423}
1424.button:hover, a.button:hover {
1425    border-color: #09c;
1426    background-color: #4cadcb;
1427    background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb));
1428    background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb);
1429    background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb);
1430    background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb);
1431    background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb);
1432    background-image: linear-gradient(top, #5dbcd9, #4cadcb);
1433    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9',
1434EndColorStr='#4cadcb',GradientType=0);
1435    color: #fff !important;
1436}
1437.button:active, a.button:active {
1438    background-color: #1e799a;
1439    background-image: none;
1440    border-color: #30b7e6;
1441}
1442.button-secondary:hover, a.button-secondary:hover {
1443    border-color: #dbdbdb;
1444    background-color: #f3f3f3;
1445    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1446    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1447    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1448    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1449    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1450    background-image: linear-gradient(top, #f9f9f9, #ececec);
1451    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1452EndColorStr='#ececec');
1453    color: #33B5E5 !important;
1454}
1455.button-secondary:active, a.button-secondary:active {
1456    border-color: #dadada;
1457	background: #ebebeb; /* Old browsers */
1458	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
1459	background:
1460url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
1461Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv
1462eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+
1463CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg
1464eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl
1465YiIgc3RvcC1vcGFjaXR5PSIxIi8+
1466CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1467CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+
1468CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1469CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy
1470R3JhZGllbnQ+
1471CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg
1472Lz4KPC9zdmc+);
1473	background: -moz-linear-gradient(top,  #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%,
1474#ffffff 100%); /* FF3.6+ */
1475	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb),
1476color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff));
1477/* Chrome,Safari4+ */
1478	background: -webkit-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9
147990%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
1480	background: -o-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1481100%); /* Opera 11.10+ */
1482	background: -ms-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1483100%); /* IE10+ */
1484	background: linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1485100%); /* W3C */
1486	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb',
1487endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
1488	-webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1489	-moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1490	box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1491	color: #258AAF !important;
1492}
1493.button.big {
1494  font-size:20px;
1495  display:inline-block;
1496}
1497
1498.button.disabled,
1499.button.disabled:hover,
1500.button.disabled:active {
1501  background:#ebebeb;
1502  color:#999;
1503  border-color:#999;
1504  cursor:default;
1505}
1506
1507.training-nav-top a.button-secondary,
1508.training-nav-bottom a.button-secondary {
1509  display:block;
1510  float:left;
1511  margin:0;
1512  width:130px;
1513  text-transform:uppercase;
1514  font-weight:bold;
1515
1516    background-color: #f3f3f3;
1517    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1518    background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1519    background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1520    background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1521    background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1522    background-image: linear-gradient(top, #f9f9f9, #ececec);
1523    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1524EndColorStr='#ececec');
1525    color: #33B5E5;
1526}
1527
1528.training-nav-top a.button-secondary:hover,
1529.training-nav-bottom a.button-secondary:hover {
1530    background-color: #09c;
1531    background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1532    background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1533    background-image: -moz-linear-gradient(top, #2faddb, #09c);
1534    background-image: -ms-linear-gradient(top, #2faddb, #09c);
1535    background-image: -o-linear-gradient(top, #2faddb, #09c);
1536    background-image: linear-gradient(top, #2faddb, #09c);
1537    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
1538    border: 1px solid #3990ab;
1539    color: #fff !important;
1540}
1541
1542.training-nav-top a.button-secondary.last,
1543.training-nav-bottom a.button-secondary.last {
1544  border-left:0;
1545}
1546
1547.training-nav-top a.button-secondary.double-size,
1548.training-nav-bottom a.button-secondary.double-size {
1549  width:291px;
1550}
1551
1552.training-nav-top,
1553.training-nav-bottom {
1554  float:right;
1555  margin:0 0 0 20px;
1556}
1557
1558.training-nav-bottom {
1559  padding:0 0 20px;
1560}
1561
1562#tb-wrapper,
1563#qv-wrapper {
1564  float:right;
1565  clear:right;
1566  margin:-27px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1567  padding:0 0 20px;
1568}
1569
1570#tb,
1571#qv {
1572  font-size:13px;
1573  line-height:18px;
1574  width:238px;
1575  border:1px solid #ccc;
1576  float:right;
1577}
1578
1579#tb {
1580  width:278px;
1581}
1582
1583#tb h2,
1584#qv h2 {
1585  margin:10px 15px;
1586  padding:0;
1587  text-transform:uppercase;
1588  border-bottom:1px solid gainsboro;
1589}
1590
1591#tb *,
1592#qv * {
1593  font-size:inherit;
1594}
1595
1596#tb .download-box {
1597  padding:0 0 0 15px;
1598}
1599
1600#tb .download-box .filename {
1601  font-size:11px;
1602  margin:4px 4px 10px;
1603  color:#666;
1604}
1605
1606
1607/* Dev guide quicknav */
1608
1609.sidebox-wrapper {
1610  float:right;
1611  clear:right;
1612  margin:0 0 0 20px;
1613  padding:0 0 20px;
1614}
1615
1616.sidebox {
1617  width:226px;
1618  font-size:13px;
1619  line-height:18px;
1620  border-left:4px solid #99CC00;
1621  float:right;
1622  padding:0 0 0 10px;
1623}
1624
1625.sidebox h2,
1626.sidebox h3,
1627.sidebox h4,
1628.sidebox h5 {
1629  font-weight:bold;
1630  margin:0 0 10px;
1631}
1632
1633.sidebox * {
1634  font-size:inherit;
1635}
1636
1637#tb ol,
1638#tb ul,
1639#qv ul {
1640  margin:0 15px 10px 35px;
1641}
1642
1643#qv ol {
1644  list-style:none;
1645  margin:0 15px 15px;
1646  font-size:inherit;
1647  line-height:inherit;
1648}
1649
1650#tb ol ol,
1651#tb ul ul,
1652#qv ol ol,
1653#qv ul ul,
1654.sidebox ol ol,
1655.sidebox ul ul {
1656  margin-bottom:0;
1657}
1658
1659#qv ol ol {
1660  margin:3px 0 3px 15px;
1661}
1662
1663.sidebox p,
1664#qv p,
1665#tb p {
1666  margin: 0 0 10px;
1667}
1668
1669
1670/* --------------------------------------------------------------------------
1671Form
1672*/
1673.article form {
1674    margin: 0 0 20px;
1675}
1676.article form .form-required {
1677    color: #dd4b39;
1678}
1679.article form fieldset {
1680    margin: 0 0 20px;
1681    padding: 0;
1682}
1683.article form legend {
1684    display: block;
1685    line-height: 1.5;
1686    margin: 0;
1687    padding: 0;
1688}
1689/*
1690.article form ol, .article form ul {
1691    margin: 0 0 0 1em;
1692    padding: 0 0 0 1em;
1693}
1694[dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
1695    margin: 0 1em 0 0;
1696    padding: 0 1em 0 0;
1697}
1698.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
1699ul ul {
1700    list-style: none;
1701    margin: 0;
1702    padding: 0;
1703}
1704.article form li {
1705    margin: 0 0 20px;
1706}
1707.article form li li {
1708    margin: 0 0 5px;
1709}
1710*/
1711.article form label {
1712    display: block;
1713    margin: 0 0 5px;
1714    padding: 0;
1715}
1716.article form input[type='text'], .article form select, .article form textarea, .article form
1717.checkbox-group, .article form .radio-group {
1718    margin-bottom: 15px;
1719}
1720.checkbox-group input {
1721	width: 13px;
1722	height: 13px;
1723	background: #fff;
1724	border: solid 1px #c6c6c6;
1725	float: left;
1726}
1727.article form .checkbox-group, .article form .radio-group {
1728	display: block
1729}
1730.article form select {
1731    border: solid 1px #ebebeb;
1732    border-top-color: #ddd;
1733    -webkit-appearance: none;
1734    background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
1735    height: 30px;
1736    color: #222;
1737    line-height: normal;
1738    padding: 5px;
1739    width: 130px;
1740}
1741
1742.article form .browse .browse-msg {
1743	font-size: 11.5px;
1744}
1745.article form .browse .button-secondary {
1746	height: auto;
1747	line-height: 25px;
1748	font-size: 11px;
1749	padding: 0 8px;
1750	margin: 0 10px 15px 0;
1751}
1752.article form input[type='text'], .article form textarea {
1753    border: 1px solid #ebebeb;
1754    border-top-color: #dcdcdc;
1755    color: #222;
1756    line-height: normal;
1757    padding: 6px 10px;
1758    width: 300px;
1759}
1760.article form textarea {
1761    height: 150px;
1762}
1763.article form input[type='text']:focus, .article form textarea:focus {
1764    border-color: #33B5E5;
1765    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1766    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1767    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1768    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
1769    outline: 0;
1770}
1771.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
1772    color: #999;
1773}
1774.article form input[type='text'][disabled], .article form textarea[disabled] {
1775    background-color: #ebebeb;
1776}
1777form .form-error input[type='text'], form .form-error textarea {
1778    border-color: #dd4b39;
1779	margin-right: 20px;
1780}
1781.aside {
1782    -moz-border-radius: 2px;
1783    -webkit-border-radius: 2px;
1784    border-radius: 2px;
1785    margin: 10px 0;
1786    padding: 20px;
1787	color: #666;
1788    position: relative;
1789	background: #f9f9f9;
1790}
1791/*
1792.aside, .notification, .promo {
1793    -moz-border-radius: 2px;
1794    -webkit-border-radius: 2px;
1795    border-radius: 2px;
1796    margin: 10px 0;
1797    padding: 10px;
1798    position: relative;
1799}
1800.aside>:first-child, .notification>:first-child, .promo>:first-child {
1801    margin-top: 0;
1802}
1803.aside>:last-child, .notification>:last-child, .promo>:last-child {
1804    margin-bottom: 0;
1805}
1806.aside {
1807    background: #f9f9f9;
1808}
1809.notification {
1810    background: #fffbe4;
1811    border-color: #f8f6e6;
1812}
1813.promo {
1814    background: #f6f9ff;
1815    border-color: #eff2f9;
1816}
1817*/
1818/* --------------------------------------------------------------------------
1819Code Style
1820*/
1821pre {
1822	margin: 1em 0;
1823	padding: 1em;
1824	overflow: auto;
1825	border: solid 1px #ddd;
1826	background: #f7f7f7;
1827}
1828.str { color: #080; }
1829.kwd { color: #008; }
1830.com { color: #800; }
1831.typ { color: #606; }
1832.lit { color: #066; }
1833.pun { color: #660; }
1834.pln { color: #000; }
1835.tag { color: #008; }
1836.atn { color: #828; }
1837.atv { color: #080; }
1838.dec { color: #606; }
1839
1840/* --------------------------------------------------------------------------
1841Three-Pane
1842*/
1843/* Package Nav & Classes Nav */
1844.three-pane {
1845	position: relative;
1846	border-top: solid 1px #ebebeb;
1847}
1848#packages-nav .js-pane,
1849#classes-nav .js-pane {
1850  overflow:visible;
1851}
1852#packages-nav {
1853        height:270px;
1854	max-height: inherit;
1855	overflow: hidden;
1856	position: relative;
1857}
1858#classes-nav {
1859	overflow: hidden;
1860	position: relative;
1861}
1862#packages-nav ul, #classes-nav ul {
1863	list-style-type: none;
1864	margin: 10px 0 20px 0;
1865	padding: 0;
1866}
1867#classes-nav li {
1868	font-weight: bold;
1869	margin: 5px 0;
1870}
1871#packages-nav li,
1872#classes-nav li li {
1873	margin: 0;
1874}
1875#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1876#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
1877	padding: 0 0 0 4px;
1878}
1879#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1880#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited,
1881#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited {
1882	color: #222;
1883	font-weight: normal;
1884}
1885#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
1886#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
1887	display: block;
1888}
1889#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
1890a:visited,
1891#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
1892a:visited,
1893#nav-tree li div.selected {
1894    font-weight: 500;
1895    color: #0099cc;
1896    background-color:#fff; }
1897  #packages-nav li.selected ul li a,
1898  #classes-nav li.selected ul li a {
1899  /* don't highlight child items */
1900    color: #555555; }
1901#nav-tree li div.selected a {
1902    font-weight: 500;
1903    color: #0099cc;
1904}
1905#nav-swap {
1906  height:30px;
1907  border-top:1px solid #ccc;
1908}
1909#nav-swap a {
1910  display:inline-block;
1911  height:100%;
1912  color: #222;
1913  font-size: 12px;
1914  padding: 5px 0 5px 5px;
1915}
1916
1917#nav-swap .fullscreen {
1918  float: right;
1919  width: 24px;
1920  height: 24px;
1921  text-indent: -1000em;
1922  padding:0;
1923  margin:3px 5px 0;
1924  background: url(../images/fullscreen.png) no-repeat -24px 0;
1925}
1926#nav-swap .fullscreen.disabled {
1927  background-position: 0 0;
1928}
1929#nav-swap .fullscreen:hover,
1930#nav-swap .fullscreen:focus {
1931  cursor:pointer;
1932}
1933
1934
1935/* nav tree */
1936#side-nav, #devdoc-nav, #swapper,
1937#nav-tree, #tree-list {
1938  overflow:hidden;
1939  margin-left:0;
1940}
1941
1942#nav-tree ul {
1943  list-style:none;
1944  padding:0;
1945  margin:10px 0;
1946}
1947
1948#nav-tree ul li div {
1949  padding:0 0 0 4px;
1950}
1951
1952#side-nav #nav-tree ul li a,
1953#side-nav #nav-tree ul li span.no-children {
1954  padding: 0;
1955  margin: 0;
1956}
1957
1958#nav-tree .plus {
1959  margin: 0 3px 0 0;
1960}
1961
1962#nav-tree ul ul {
1963  list-style: none;
1964  margin: 0;
1965  padding: 0 0 0 0;
1966}
1967
1968#nav-tree ul li {
1969  margin: 0;
1970  padding: 0 0 0 0;
1971  white-space: nowrap;
1972}
1973
1974#nav-tree .children_ul {
1975  padding:0;
1976  margin:0;
1977}
1978#nav-tree .children_ul li div {
1979  padding:0 0 0 10px;
1980}
1981#nav-tree .children_ul .children_ul li div {
1982  padding:0 0 0 20px;
1983}
1984
1985#nav-tree a.nolink {
1986  color: #222;
1987  text-decoration: none;
1988}
1989
1990#nav-tree span.label {
1991  width: 100%;
1992}
1993
1994#nav-tree {
1995  overflow-x: auto;
1996  overflow-y: scroll;
1997  outline:0;
1998}
1999
2000
2001/* Content */
2002#doc-col {
2003  margin-right:0;
2004}
2005#doc-content-container {
2006	margin-left: 291px
2007}
2008#doc-header, #doc-content {
2009	padding: 1em 2em;
2010}
2011#doc-header {
2012	background: #f7f7f7;
2013}
2014#doc-header h1 {
2015	line-height: 0;
2016	margin-bottom: 15px;
2017}
2018#api-info-block {
2019	float: right;
2020	font-weight: bold;
2021}
2022#api-info-block a, #api-info-block a:active, #api-info-block a:visited {
2023	color: #222;
2024}
2025#api-info-block a:hover, #api-info-block a:focus {
2026	color: #33B5E5;
2027}
2028#api-nav-header {
2029  height:19px; /* plus 16px padding = 35; same as #nav li */
2030  font-size:14px;
2031  padding: 8px 0;
2032  margin: 0;
2033  border-bottom: 1px solid #CCC;
2034  background:#e9e9e9;
2035  background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
2036
2037}
2038#api-nav-title {
2039  padding:0 5px;
2040  white-space:nowrap;
2041}
2042
2043#api-level-toggle {
2044  float:right;
2045  padding:0 5px;
2046}
2047
2048#api-level-toggle label {
2049  margin:0;
2050  vertical-align:top;
2051  line-height: 19px;
2052  font-size:13px;
2053  height: 19px;
2054}
2055
2056#api-level-toggle .select-wrapper {
2057  width: 35px;
2058  display: inline-block;
2059  overflow: hidden;
2060}
2061#api-level-toggle select {
2062  border: 0;
2063  appearance:none;
2064  -moz-appearance:none;
2065  -webkit-appearance: none;
2066  background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
2067  color: #222;
2068  height: 19px;
2069  line-height: 19px;
2070  padding: 0;
2071  margin:1px 0 0 0;
2072  width:150%;
2073  font-size:13px;
2074  vertical-align:top;
2075  outline:0;
2076}
2077
2078
2079/* Toggle for revision notes and stuff */
2080div.toggle-content.closed .toggle-content-toggleme {
2081  display:none;
2082}
2083
2084#jd-content img.toggle-content-img {
2085  margin:0 5px 5px 0;
2086}
2087div.toggle-content p {
2088  margin:10px 0 0;
2089}
2090div.toggle-content-toggleme {
2091  padding:0 0 0 15px;
2092}
2093
2094
2095/* API LEVEL FILTERED MEMBERS */
2096
2097.absent,
2098.absent a:link,
2099.absent a:visited,
2100.absent a:hover,
2101.absent * {
2102  color:#bbb !important;
2103  cursor:default !important;
2104  text-decoration:none !important;
2105}
2106#devdoc-nav li.absent.selected,
2107#devdoc-nav li.absent.selected *,
2108#devdoc-nav div.label.absent.selected,
2109#devdoc-nav div.label.absent.selected * {
2110  background-color:#eaeaea !important;
2111}
2112.absent h4.jd-details-title,
2113.absent h4.jd-details-title * {
2114  background-color:#f6f6f6 !important;
2115}
2116.absent img {
2117  opacity: .3;
2118  filter: alpha(opacity=30);
2119  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
2120}
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130/* JQUERY RESIZABLE STYLES */
2131.ui-resizable { position: relative; }
2132.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
2133.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
2134/*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
2135body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
2136.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
2137border-bottom: solid 1px #ededed;
2138  background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
2139/*
2140.ui-resizable-e {
2141cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
21421px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
2143*/
2144
2145/* --------------------------------------------------------------------------
2146Lightbox
2147*/
2148.lightbox {
2149	width: 769px;
2150	padding: 1.5em;
2151	margin: 0 auto;
2152	border: solid 1px #dcdcdc;
2153	background: #fff;
2154	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2155	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2156	box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
2157}
2158.lightbox .header {
2159	float: left;
2160	width: 720px;
2161	margin: -10px 20px 10px 0;
2162}
2163.lightbox .close {
2164	float: right;
2165	width: 10px;
2166	height: 10px;
2167	margin: -10px -10px 10px 0;
2168	text-indent: -1000em;
2169	background: url(../images/close.png) no-repeat 0 0;
2170}
2171.lightbox .close:hover, .lightbox .close:focus {
2172	background-position: -10px 0;
2173}
2174
2175/* --------------------------------------------------------------------------
2176Misc
2177*/
2178
2179
2180.clearfix:before, .clearfix:after {
2181	content: "";
2182	display: table
2183}
2184.clearfix:after {
2185	clear: both
2186}
2187.clearfix {
2188	*zoom: 1
2189}
2190table.blank th, table.blank td {
2191    border: 0;
2192	background: none
2193}
2194.caption {
2195	margin: 0.5em 0 2em 0;
2196	color: #000;
2197	font-size: 11.5px;
2198}
2199
2200.nolist {
2201  list-style:none;
2202  margin-left:0;
2203}
2204
2205
2206pre.classic {
2207  background-color:transparent;
2208  border:none;
2209  padding:0;
2210}
2211
2212p.img-caption {
2213  margin: -10px 0 20px;
2214  font-size:13px;
2215  color:#666;
2216}
2217
2218div.figure {
2219  float:right;
2220  clear:right;
2221  margin:10px 0 0 0;
2222  padding:0 0 0 20px;
2223  /* width must be defined w/ an inline style matching the image width */
2224}
2225
2226p.table-caption {
2227  margin: 0 0 4px 0; /* matches default table left-margin */
2228  font-size:13px;
2229  color:#666;
2230}
2231
2232div.note,
2233div.caution,
2234div.warning {
2235  margin: 0 0 15px;
2236}
2237
2238p.note, div.note,
2239p.caution, div.caution,
2240p.warning, div.warning {
2241  padding: 0 0 0 10px;
2242  border-left: 4px solid;
2243}
2244
2245p.note {
2246  border-color: #258AAF;
2247}
2248
2249p.caution {
2250  border-color: #FF8800;
2251}
2252
2253p.warning {
2254  border-color: #ff4443;
2255}
2256
2257div.note.design {
2258  border-left: 4px solid #33B5E5;
2259}
2260
2261div.note.develop {
2262  border-left: 4px solid #F80;
2263}
2264
2265div.note.distribute {
2266  border-left: 4px solid #9C0;
2267}
2268
2269.note p, .caution p, .warning p {
2270  margin:0 0 5px;
2271}
2272
2273.note p:last-child, .caution p:last-child, .warning p:last-child {
2274  margin-bottom:0;
2275}
2276
2277blockquote {
2278  display:block;
2279  float:right;
2280  width:280px;
2281  font-size:20px;
2282  font-style:italic;
2283  line-height:24px;
2284  color:#33B5E5;
2285  margin:0 0 20px 30px;
2286}
2287
2288div.design-announce p {
2289  margin:0 0 10px;
2290}
2291
2292#devdoc-nav a.totop {
2293  display:block;
2294  top:0;
2295  width:inherit;
2296  background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%;
2297  text-indent:-9999em;
2298}
2299#devdoc-nav a.totop {
2300  position:fixed;
2301  display:none;
2302}
2303#devdoc-nav a.totop:hover {
2304  background-color:#33B5E5;
2305}
2306
2307.content-footer a.totop {
2308  text-transform:uppercase;
2309  line-height:30px;
2310}
2311
2312/* -----------------------------------------------
2313Dialog box for popup messages
2314*/
2315
2316div.dialog {
2317  height:0;
2318  margin:0 auto;
2319}
2320
2321div.dialog>div {
2322  z-index:99;
2323  position:fixed;
2324  margin:70px 0;
2325  width: 391px;
2326  height: 200px;
2327  background: #F7F7F7;
2328-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2329-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2330box-shadow: 0 0 15px rgba(0,0,0,0.5);
2331}
2332/* IE6 can't position fixed */
2333* html div.dialog div { position:absolute; }
2334
2335
2336div#deprecatedSticker {
2337  display:none;
2338  z-index:99;
2339  position:fixed;
2340  right:15px;
2341  top:114px;
2342  margin:0;
2343  padding:1em;
2344  background:#FFF;
2345  border:1px solid #dddd00;
2346  box-shadow:-5px 5px 10px #ccc;
2347  -moz-box-shadow:-5px 5px 10px #ccc;
2348  -webkit-box-shadow:-5px 5px 10px #ccc;
2349}
2350
2351div#naMessage {
2352  display:none;
2353  width:555px;
2354  height:0;
2355  margin:0 auto;
2356}
2357
2358div#naMessage div {
2359  z-index:99;
2360  width:450px;
2361  position:fixed;
2362  margin:50px 0;
2363  padding:4em 4em 3em;
2364  background:#FFF;
2365  border:1px solid #999;
2366  box-shadow:-10px 10px 40px #888;
2367  -moz-box-shadow:-10px 10px 40px #888;
2368  -webkit-box-shadow:-10px 10px 40px #888;
2369}
2370/* IE6 can't position fixed */
2371* html div#naMessage div { position:absolute; }
2372
2373div#naMessage strong {
2374  font-size:1.1em;
2375}
2376
2377
2378/* --------------------------------------------------------------------------
2379Slideshow Controls & Next/Prev
2380*/
2381.slideshow-next, .slideshow-prev {
2382	width: 20px;
2383	height: 36px;
2384	text-indent: -1000em;
2385}
2386.slideshow-container {
2387	margin: 2em 0;
2388}
2389.slideshow-container:before, .slideshow-container:after {
2390	content: "";
2391	display: table;
2392	clear: both;
2393}
2394a.slideshow-next, a.slideshow-next:visited {
2395
2396	float: right;
2397
2398	background: url(../images/arrow-right.png) no-repeat 0 0
2399
2400}
2401
2402a.slideshow-prev, a.slideshow-prev:visited {
2403
2404	float: left;
2405
2406	background: url(../images/arrow-left.png) no-repeat 0 0
2407
2408}
2409
2410.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
2411
2412	background-position: 0 -36px
2413
2414}
2415
2416.slideshow-next:active, .slideshow-prev:active {
2417
2418	background-position: 0 -72px
2419
2420}
2421.slideshow-nav {
2422	width: 74px;
2423	margin: 0 auto;
2424}
2425.slideshow-nav a, .slideshow-nav a:visited {
2426	display: inline-block;
2427	width: 12px;
2428	height: 12px;
2429	margin: 0 2px 20px 2px;
2430	background: #ccc;
2431	-webkit-border-radius: 50%;
2432	-moz-border-radius: 50%;
2433	border-radius: 50%;
2434}
2435.slideshow-nav a:hover, .slideshow-nav a:focus {
2436
2437	background: #33B5E5
2438}
2439
2440.slideshow-nav a:active {
2441
2442	background: #1e799a;
2443	background: #ebebeb;
2444	-webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2445	-moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2446	box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
2447}
2448.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
2449	background: #33B5E5
2450}
2451/* --------------------------------------------------------------------------
2452Tabs
2453*/
2454ul.tabs {
2455	padding: 0;
2456	margin: 2em 0 0 0;
2457}
2458ul.tabs:before, ul.tabs:after {
2459	content: "";
2460	display: table;
2461	clear: both;
2462}
2463ul.tabs li {
2464	list-style-type: none;
2465	float: left;
2466}
2467ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
2468	display: block;
2469	height: 36px;
2470	line-height: 36px;
2471	padding: 0 15px;
2472	margin-right: 2px;
2473	color: #222;
2474	-moz-border-radius-topleft: 2px;
2475	-moz-border-radius-topright: 2px;
2476	-moz-border-radius-bottomright: px;
2477	-moz-border-radius-bottomleft: px;
2478	-webkit-border-radius: 2px 2px px px;
2479	border-radius: 2px 2px px px;
2480	border-top: solid 1px #ebebeb;
2481	border-left: solid 1px #ebebeb;
2482	border-right: solid 1px #ebebeb;
2483	background-color: #fff;
2484    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
2485    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
2486    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
2487    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
2488    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
2489    background-image: linear-gradient(top, #ffffff, #fafafa);
2490    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
2491EndColorStr='#fafafa');
2492}
2493ul.tabs li a:hover {
2494	color: #33B5E5;
2495}
2496ul.tabs li a.selected {
2497	height: 37px;
2498	color: #33B5E5;
2499	background-color: #f7f7f7;
2500	background-image: none;
2501	border-color: #ddd;
2502}
2503.tab-content {
2504	padding: 1.2em;
2505	margin: -1px 0 2em 0;
2506	-webkit-border-radius: 2px;
2507    -moz-border-radius: 2px;
2508    border-radius: 2px;
2509	border: solid 1px #ddd;
2510	background: #f7f7f7;
2511}
2512/* --------------------------------------------------------------------------
2513Feature Boxes
2514*/
2515.feature-box {
2516  width: 291px;
2517  height: 200px;
2518  position: relative;
2519  background: #F7F7F7;
2520}
2521.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
2522	z-index: 100;
2523	position: absolute;
2524	background-color: #aaa;
2525}
2526.box-border .top, .box-border .bottom {
2527	width: 291px;
2528	height: 1px;
2529}
2530.dialog .box-border .top,
2531.dialog .box-border .bottom { width:391px; }
2532
2533.box-border .left, .box-border .right {
2534	width: 1px;
2535	height: 8px;
2536}
2537.box-border .top { top: 0; left: 0 }
2538.box-border .top .left { top: 1px; left: 0 }
2539.box-border .top .right { top: 1px; right: 0 }
2540.box-border .bottom .left { top: -8px; left: 0 }
2541.box-border .bottom { top: 200px; left: 0 }
2542.box-border .bottom .right { top: -8px; right: 0 }
2543
2544.feature-box h4,
2545.dialog h4 {
2546    margin: 15px 18px 10px;
2547    padding:0;
2548}
2549
2550.feature-box p,
2551.dialog p {
2552    margin: 10px 18px;
2553    padding:0;
2554}
2555.feature-box .link,
2556.dialog .link {
2557    border-top: 1px solid #dedede;
2558    bottom: 0;
2559    position: absolute;
2560    width: inherit;
2561}
2562.feature-box a, .feature-box h4,
2563.dialog a, .dialog h4 {
2564    -webkit-transition: color .4s ease;
2565    -moz-transition: color .4s ease;
2566    -o-transition: color .4s ease;
2567    transition: color .4s ease;
2568}
2569.feature-box:hover {
2570	cursor: pointer;
2571}
2572.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
2573.left, .feature-box:hover .right {
2574	background-color: #33B5E5;
2575}
2576.feature-box:hover h4, .feature-box:hover a {
2577	color: #33B5E5;
2578}
2579/* --------------------------------------------------------------------------
2580Page-Specific Styles
2581*/
2582.colors {
2583	position: relative;
2584	float: left;
2585	width: 92px;
2586	margin: 40px 0 20px;
2587}
2588.colors div {
2589	color: #fff;
2590	font-size: 11.5px;
2591	width: 82px;
2592	height: 82px;
2593	margin-top:-30px;
2594	line-height: 82px;
2595	text-align: center;
2596	border: solid 5px #fff;
2597	-webkit-border-radius: 50%;
2598	-moz-border-radius: 50%;
2599	border-radius: 50%;
2600}
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
2612
2613
2614
2615/* ########### REFERENCE DOCS ################## */
2616
2617#packages-nav h2,
2618#classes-nav h2 {
2619  font-size:18px;
2620  margin:0;
2621  padding:0 0 0 4px;
2622}
2623
2624#jd-header {
2625  padding: 0 0 5px;
2626  margin: 20px 0 10px;
2627  font-size:13px;
2628  border-bottom:solid 1px #ccc;
2629}
2630
2631#jd-header h1 {
2632  margin:0;
2633  padding:0;
2634}
2635
2636/* page-top-right container for reference pages (holds
2637links to summary tables) */
2638#api-info-block {
2639  font-size:13px;
2640  margin:20px 0 0;
2641  padding:0 10px 6px;
2642  font-weight:normal;
2643  float:right;
2644  text-align:right;
2645  color:#999;
2646  max-width:70%;
2647}
2648
2649#api-info-block div.api-level {
2650  font-weight:bold;
2651  font-size:inherit;
2652  float:none;
2653  color:#222;
2654  padding:0;
2655  margin:0;
2656}
2657
2658/* inheritance table */
2659.jd-inheritance-table {
2660  border-spacing:0;
2661  margin:0;
2662  padding:0;
2663  font-size:13px;
2664  background-color:transparent;
2665}
2666.jd-inheritance-table tr td {
2667  border: none;
2668  margin: 0;
2669  padding: 0;
2670  background-color:transparent;
2671}
2672.jd-inheritance-table .jd-inheritance-space {
2673  font-weight:bold;
2674  width:1em;
2675}
2676.jd-inheritance-table .jd-inheritance-interface-cell {
2677  padding-left: 17px;
2678}
2679
2680
2681
2682.jd-sumtable a {
2683  text-decoration:none;
2684}
2685
2686.jd-sumtable a:hover {
2687  text-decoration:underline;
2688}
2689
2690/* the link inside a sumtable for "Show All/Hide All" */
2691.toggle-all {
2692  display:block;
2693  float:right;
2694  font-weight:normal;
2695  font-size:0.9em;
2696}
2697
2698/* adjustments for in/direct subclasses tables */
2699.jd-sumtable.jd-sumtable-subclasses {
2700  margin: 1em 0 0 0;
2701  max-width:968px;
2702  background-color:transparent;
2703  font-size:13px;
2704}
2705
2706/* extra space between end of method name and open-paren */
2707.sympad {
2708  margin-right: 2px;
2709}
2710
2711/* right alignment for the return type in sumtable */
2712.jd-sumtable .jd-typecol {
2713  text-align:right;
2714}
2715
2716/* adjustments for the expando table-in-table */
2717.jd-sumtable-expando {
2718  margin:.5em 0;
2719  padding:0;
2720}
2721
2722/* a div that holds a short description */
2723.jd-descrdiv {
2724  padding:3px 1em 0 1em;
2725  margin:0;
2726  border:0;
2727}
2728
2729#jd-content img.jd-expando-trigger-img {
2730  padding:0 4px 4px 0;
2731  margin:0;
2732}
2733
2734.jd-sumtable-subclasses div#subclasses-direct,
2735.jd-sumtable-subclasses div#subclasses-indirect {
2736  margin:0 0 0 13px;
2737}
2738
2739
2740
2741/********* MEMBER REF *************/
2742
2743
2744.jd-details {
2745/*  border:1px solid #669999;
2746  padding:4px; */
2747  margin:0 0 1em;
2748}
2749
2750/* API reference: a container for the
2751.tagdata blocks that make up the detailed
2752description */
2753.jd-details-descr {
2754  padding:0;
2755  margin:.5em .25em;
2756}
2757
2758/* API reference: a block containing
2759a detailed description, a params table,
2760seealso list, etc */
2761.jd-tagdata {
2762  margin:.5em 1em;
2763}
2764
2765.jd-tagdata p {
2766  margin:0 0 1em 1em;
2767}
2768
2769/* API reference: adjustments to
2770the detailed description block */
2771.jd-tagdescr {
2772  margin:.25em 0 .75em 0;
2773}
2774
2775.jd-tagdescr ol,
2776.jd-tagdescr ul {
2777  margin:0 2.5em;
2778  padding:0;
2779}
2780
2781.jd-tagdescr table,
2782.jd-tagdescr img {
2783  margin:.25em 1em;
2784}
2785
2786.jd-tagdescr li {
2787margin:0 0 .25em 0;
2788padding:0;
2789}
2790
2791/* API reference: heading marking
2792the details section for constants,
2793attrs, methods, etc. */
2794h4.jd-details-title {
2795  font-size:1.15em;
2796  background-color: #E2E2E2;
2797  margin:1.5em 0 .6em;
2798  padding:3px 95px 3px 3px; /* room for api-level */
2799}
2800
2801h4.jd-tagtitle {
2802  margin:0;
2803}
2804
2805h4 .normal {
2806  font-weight:normal;
2807}
2808
2809/* API reference: heading for "Parameters", "See Also", etc.,
2810in details sections */
2811h5.jd-tagtitle {
2812  margin:0 0 .25em 0;
2813  font-size:1em;
2814}
2815
2816.jd-tagtable {
2817  margin:0;
2818  background-color:transparent;
2819  width:auto;
2820}
2821
2822.jd-tagtable td,
2823.jd-tagtable th {
2824  border:none;
2825  background-color:#fff;
2826  vertical-align:top;
2827  font-weight:normal;
2828  padding:2px 10px;
2829}
2830
2831.jd-tagtable th {
2832  font-style:italic;
2833}
2834
2835/* Inline api level indicator for methods */
2836div.api-level {
2837  font-size:.8em;
2838  font-weight:normal;
2839  color:#999;
2840  float:right;
2841  padding:0 8px 0;
2842  margin-top:-30px;
2843}
2844
2845table.jd-tagtable td,
2846table.jd-tagtable th {
2847  background-color:transparent;
2848}
2849
2850table.jd-tagtable th {
2851  color:inherit;
2852}
2853
2854
2855
2856
2857
2858
2859
2860
2861
2862
2863
2864
2865
2866
2867
2868
2869
2870
2871
2872
2873
2874
2875
2876/* SEARCH FILTER */
2877
2878#search_autocomplete {
2879  font-weight:normal;
2880}
2881
2882#search_filtered_wrapper {
2883  width: 193px;
2884  float: right;
2885}
2886#search_filtered_div {
2887  position:absolute;
2888  z-index:9999;
2889  min-width:171px; /* +padding and border makes this match input width */
2890  padding:5px;
2891  border: solid 1px #C5C5C5;
2892  background: white;
2893  top: 35px;
2894  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
2895  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
2896  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
2897}
2898
2899ul#search_filtered {
2900  min-width:100%;
2901  margin:0;
2902  list-style: none;
2903  margin: 0;
2904  padding: 0;
2905}
2906
2907
2908#search_filtered li{
2909  line-height:1.5em;
2910  margin: 0 0 2px;
2911  padding: 0;
2912}
2913
2914#search_filtered li a {
2915  padding:0 5px;
2916  color:#222 !important;
2917}
2918
2919#search_filtered .jd-selected {
2920  background-color: #33B5E5;
2921  cursor:pointer;
2922}
2923#search_filtered .jd-selected,
2924#search_filtered .jd-selected a {
2925  color:#f7f7f7 !important;
2926}
2927
2928.no-display {
2929  display: none;
2930}
2931
2932.jd-autocomplete {
2933  padding-left: 6px;
2934  padding-right: 6px;
2935  padding-top: 1px;
2936  padding-bottom: 1px;
2937  font-size: 0.81em;
2938  border: none;
2939  margin: 0;
2940  line-height: 1.05em;
2941}
2942
2943.show-item {
2944  display: table-row;
2945}
2946.hide-item {
2947  display: hidden;
2948}
2949
2950
2951
2952
2953
2954/* SEARCH RESULTS */
2955
2956
2957#leftSearchControl .gsc-twiddle {
2958  background-image : none;
2959}
2960
2961#leftSearchControl td, #searchForm td {
2962  border: 0px solid #000;
2963  padding:0;
2964}
2965
2966#leftSearchControl .gsc-resultsHeader .gsc-title {
2967  padding-left : 0px;
2968  font-weight : bold;
2969  font-size : 13px;
2970  color:#006699;
2971  display : none;
2972}
2973
2974#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
2975  display : none;
2976}
2977
2978#leftSearchControl .gsc-resultsRoot {
2979  padding-top : 6px;
2980}
2981
2982#leftSearchControl div.gs-visibleUrl-long {
2983  display : block;
2984  color:#006699;
2985}
2986
2987#leftSearchControl .gsc-webResult {
2988  padding:0 0 20px 0;
2989}
2990
2991.gsc-webResult div.gs-visibleUrl-short,
2992table.gsc-branding,
2993.gsc-clear-button {
2994  display : none;
2995}
2996
2997.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
2998.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
2999#leftSearchControl a,
3000#leftSearchControl a b {
3001  color:#006699;
3002}
3003
3004.gsc-resultsHeader {
3005  display: none;
3006}
3007
3008/* Disable built in search forms */
3009.gsc-control form.gsc-search-box {
3010  display : none;
3011}
3012table.gsc-search-box {
3013  margin:6px 0 0 0;
3014  border-collapse:collapse;
3015}
3016
3017td.gsc-input {
3018  padding:0 2px;
3019  width:100%;
3020  vertical-align:middle;
3021}
3022
3023input.gsc-input {
3024  border:1px solid #BCCDF0;
3025  width:99%;
3026  padding-left:2px;
3027  font-size:.95em;
3028}
3029
3030td.gsc-search-button {
3031  text-align: right;
3032  padding:0;
3033  vertical-align:top;
3034}
3035
3036
3037#searchResults {
3038  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3039(it doesn't) */
3040  height:auto;
3041}
3042
3043#searchResults .gsc-control {
3044  position:relative;
3045  width:auto;
3046  padding:0 0 10px;
3047}
3048
3049#searchResults .gsc-tabsArea {
3050  position:relative;
3051  white-space:nowrap;
3052  float:left;
3053  width:200px;
3054}
3055
3056#searchResults .gsc-above-wrapper-area {
3057  display:none;
3058}
3059
3060#searchResults .gsc-resultsbox-visible {
3061  float:left;
3062  width:720px;
3063  margin-left:20px;
3064}
3065
3066#searchResults .gsc-tabHeader {
3067  padding: 3px 6px;
3068  position:relative;
3069  width:auto;
3070  display:block;
3071}
3072
3073#searchResults h2#searchTitle {
3074  padding:0;
3075  margin:5px 0;
3076  border:none;
3077}
3078
3079#searchResults h2#searchTitle em {
3080  font-style:normal;
3081  color:#33B5E5;
3082}
3083
3084#searchResults .gsc-table-result {
3085  margin:5px 0 10px 0;
3086  background-color:transparent;
3087}
3088#searchResults .gs-web-image-box, .gs-promotion-image-box {
3089  width:120px;
3090}
3091#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3092  max-width:120px;
3093}
3094
3095#searchResults .gsc-table-result .gsc-thumbnail {
3096  padding:0 20px 0 0;
3097}
3098
3099#searchResults td {
3100  background-color:transparent;
3101}
3102
3103#searchResults .gsc-expansionArea {
3104  position:relative;
3105}
3106#searchResults .gsc-tabsArea .gsc-cursor-box {
3107  width:200px;
3108  padding:20px 0 0 1px;
3109}
3110#searchResults .gsc-cursor-page {
3111  display:inline-block;
3112  float:left;
3113  margin:-1px 0 0 -1px;
3114  padding:0;
3115  height:27px;
3116  width:27px;
3117  text-align:center;
3118  line-height:2;
3119}
3120
3121#searchResults .gsc-tabHeader.gsc-tabhInactive,
3122#searchResults .gsc-cursor-page {
3123  text-decoration:none;
3124  color:#258AAF;
3125  border: solid 1px #DADADA;
3126}
3127
3128#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
3129#searchResults .gsc-cursor-page:hover {
3130  border-color: #DBDBDB;
3131  background-color: #F3F3F3;
3132  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
3133  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
3134  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
3135  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
3136  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
3137  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
3138  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
3139EndColorStr='#ececec');
3140  color: #33B5E5;
3141}
3142
3143#searchResults .gsc-tabHeader.gsc-tabhActive,
3144#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
3145#searchResults .gsc-cursor-page.gsc-cursor-current-page,
3146#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
3147  color:#fff;
3148  background-color: #09C;
3149  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
3150  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
3151  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
3152  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
3153  background-image: -o-linear-gradient(top, #2FADDB, #09C);
3154  background-image: linear-gradient(top, #2FADDB, #09C);
3155  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
3156  border: 1px solid #3990AB;
3157  z-index:100;
3158}
3159
3160}
3161
3162
3163
3164
3165
3166
3167
3168
3169
3170
3171
3172
3173
3174/*********** PREVIOUSLY dac-styles.css ***************/
3175
3176
3177
3178
3179
3180::-webkit-selection,
3181::-moz-selection,
3182::selection {
3183  background-color: #0099cc;
3184  color: #fff; }
3185
3186#header {
3187  border-bottom:0;
3188}
3189
3190#header .wrap {
3191  max-width:940px;
3192  height:41px;
3193  border-bottom:1px solid;
3194  border-color: #ccc;
3195  position:relative;
3196}
3197
3198.about #header .wrap {
3199  border-color: #9933CC;
3200}
3201
3202.design #header .wrap {
3203  border-color: #33b5e5;
3204}
3205
3206.develop #header .wrap {
3207  border-color: #F80;
3208}
3209
3210.distribute #header .wrap {
3211  border-color: #9C0;
3212}
3213
3214.logo a {
3215  width:123px;
3216  float:left;
3217}
3218
3219#header .logo {
3220  margin-top: -6px;
3221  margin-left: 0px;
3222  margin-bottom:0px;
3223  width: 160px;
3224  padding-right:10px;
3225}
3226
3227.search {
3228  height:25px;
3229  margin-top: -3px;
3230  margin-bottom: 0px;
3231}
3232
3233
3234
3235/* Quicknav */
3236.btn-quicknav {
3237  width:20px;
3238  height:28px;
3239  float:left;
3240  margin-left:6px;
3241  padding-right:10px;
3242  position:relative;
3243  cursor:pointer;
3244  border-right:1px solid #CCC;
3245}
3246
3247.btn-quicknav a {
3248  zoom:1;
3249  position:absolute;
3250  top:13px;
3251  left:5px;
3252  display:block;
3253  text-indent:-9999em;
3254  width:10px;
3255  height:5px;
3256  background:url(../images/quicknav_arrow.png) no-repeat;
3257}
3258
3259.btn-quicknav a.arrow-active {
3260  background-position: 0 -5px;
3261  display:none;
3262}
3263
3264#header-wrap.quicknav a.arrow-inactive {
3265  display:none;
3266}
3267
3268.btn-quicknav.active a.arrow-active {
3269  display:block;
3270}
3271
3272.nav-x li {
3273  display:block;
3274  float:left;
3275  margin-right:45px;
3276  -webkit-transition: all 0.25s linear;
3277      -moz-transition: all 0.25s linear;
3278       -ms-transition: all 0.25s linear;
3279        -o-transition: all 0.25s linear;
3280           transition: all 0.25s linear;
3281}
3282
3283#header-wrap.quicknav .nav-x li {
3284  min-width:160px;
3285  margin-right:20px;
3286}
3287
3288#header-wrap.quicknav li.last {
3289  margin-right:0px;
3290}
3291
3292#quicknav {
3293 float:none;
3294 clear:both;
3295 margin-left:180px;
3296 margin-top:-30px;
3297 display:none;
3298 overflow:hidden;
3299}
3300
3301#header-wrap.quicknav #quicknav {
3302
3303}
3304
3305#quicknav ul {
3306  margin:10px 0;
3307  padding:0;
3308}
3309
3310#quicknav ul li.design {
3311  border-top:1px solid #33b5e5;
3312}
3313
3314#quicknav ul li.develop {
3315  border-top:1px solid #FF8800;
3316}
3317
3318#quicknav ul li.distribute {
3319  border-top:1px solid #99cc00;
3320}
3321
3322#quicknav ul li {
3323  display:block;
3324  float:left;
3325  margin:0 20px 0 0;
3326  min-width:140px;
3327}
3328
3329#quicknav ul li.last {
3330  margin-right:0px;
3331}
3332
3333#quicknav ul li ul li {
3334  float:none;
3335}
3336
3337#quicknav ul li ul li a {
3338  color:#222;
3339}
3340
3341#quicknav ul li li ul,
3342#quicknav ul li li ul li {
3343  margin:0;
3344}
3345
3346#quicknav ul li li ul li:before {
3347  content:"\21B3";
3348}
3349
3350#header-wrap {
3351   -webkit-transition: all 0.25s ease-out;
3352      -moz-transition: all 0.25s ease-out;
3353       -ms-transition: all 0.25s ease-out;
3354        -o-transition: all 0.25s ease-out;
3355           transition: all 0.25s ease-out;
3356
3357}
3358
3359#header-wrap.quicknav {
3360  height:170px;
3361
3362}
3363
3364/* SEARCH AND MORE */
3365.search {
3366  position: absolute;
3367  width: 50px;
3368  height:28px;
3369  display: block;
3370  margin-top:-3px;
3371  margin-bottom:7px;
3372  overflow:hidden;
3373  z-index:100;
3374  right:54px;
3375  -webkit-transition: width 0.4s ease;
3376     -moz-transition: width 0.4s ease;
3377       -o-transition: width 0.4s ease;
3378          transition: width 0.4s ease;
3379}
3380
3381.search #search-btn {
3382  width:50px;
3383  height:28px;
3384  background:url(../images/icon_search.png) no-repeat;
3385  float:left;
3386}
3387
3388.search-inner {
3389  width:245px;
3390}
3391
3392.search:hover, .search.active {
3393  width:245px;
3394}
3395
3396.search .bottom, .search .left, .search .right {
3397	position: absolute;
3398	background-color: #a2a2a2
3399}
3400
3401.search .bottom {
3402	width: 214px;
3403	height: 1px;
3404	top: 24px;
3405	left: 0
3406}
3407
3408.search .left, .search .right {
3409	height: 5px;
3410	width: 1px
3411}
3412
3413.search .left {
3414  top: 22px;
3415  left: 56px;
3416  background-color:#CCC;
3417}
3418
3419.search .right {
3420  top: 22px;
3421  left: 238px;
3422  background-color:#CCC;
3423}
3424
3425.search form {
3426	margin-top: 2px;
3427	width: 162px;
3428	float:left;
3429}
3430
3431.search form input {
3432	color: #2f2f2f;
3433	font-size: 0.95em;
3434	width: 178px;
3435	border: none;
3436	margin-left: 6px;
3437	z-index: 1500;
3438  position: relative;
3439	background-color: transparent;
3440	border-bottom:1px solid #CCC;
3441	padding:0 0 0 4px;
3442	outline:none;
3443	height:24px;
3444}
3445
3446.search:hover form input {
3447  border-bottom:1px solid #33B5E5;
3448}
3449
3450.search:hover .bottom, .search:hover .left, .search:hover .right {
3451	background-color: #33b5e5;
3452}
3453
3454.search:hover #search-btn {
3455	background-position: 0 -28px
3456}
3457
3458.search form input:focus {
3459	color: #222;
3460	font-weight: bold
3461}
3462
3463.moremenu {
3464  float: right;
3465	position: relative;
3466	width: 50px;
3467	height:28px;
3468  display: block;
3469  margin-top:-3px;
3470  margin-bottom:7px;
3471  overflow:hidden;
3472  -webkit-transition: width 0.25s ease;
3473     -moz-transition: width 0.25s ease;
3474       -o-transition: width 0.25s ease;
3475          transition: width 0.25s ease;
3476}
3477
3478.moremenu #more-btn {
3479  width:40px;
3480  height:28px;
3481  background:url(../images/icon_more.png) no-repeat;
3482  border-left:1px solid #CCC;
3483  float:left;
3484  cursor:pointer;
3485}
3486
3487.moremenu:hover #more-btn {
3488  background-position:0 -28px;
3489}
3490
3491.morehover {
3492  position:absolute;
3493  right:6px;
3494  top:-9px;
3495  width:40px;
3496  height:35px;
3497  z-index:99;
3498  overflow:hidden;
3499
3500  -webkit-opacity:0;
3501     -moz-opacity:0;
3502       -o-opacity:0;
3503          opacity:0;
3504
3505  -webkit-transform-origin:100% 0%;
3506     -moz-transform-origin:100% 0%;
3507       -o-transform-origin:100% 0%;
3508          transform-origin:100% 0%;
3509
3510  -webkit-transition-property: -webkit-opacity;
3511  -webkit-transition-duration: .25s;
3512  -webkit-transition-timing-function:ease;
3513
3514  -moz-transition-property: -webkit-opacity;
3515  -moz-transition-duration: .25s;
3516  -moz-transition-timing-function:ease;
3517
3518  -o-transition-property: -webkit-opacity;
3519  -o-transition-duration: .25s;
3520  -o-transition-timing-function:ease;
3521
3522  -transition-property: -webkit-opacity;
3523  -transition-duration: .25s;
3524  -transition-timing-function:ease;
3525}
3526
3527.morehover:hover {
3528  opacity:1;
3529  height:385px;
3530  width:268px;
3531  -webkit-transition-property:height,  -webkit-opacity;
3532}
3533
3534.morehover .top {
3535  width:268px;
3536  height:39px;
3537  background:url(../images/more_top.png) no-repeat;
3538}
3539
3540.morehover .mid {
3541  width:228px;
3542  background:url(../images/more_mid.png) repeat-y;
3543  padding:10px 20px 0 20px;
3544}
3545
3546.morehover .mid .header {
3547  border-bottom:1px solid #ccc;
3548  font-weight:bold;
3549}
3550
3551.morehover .bottom {
3552  width:268px;
3553  height:6px;
3554  background:url(../images/more_bottom.png) no-repeat;
3555}
3556
3557.morehover ul {
3558  margin:10px 10px 20px 0;
3559}
3560
3561.morehover ul li {
3562  list-style:none;
3563}
3564
3565.morehover ul li.active a,
3566.morehover ul li.active a:hover {
3567  color:#222 !important;
3568}
3569
3570.morehover ul li.active img {
3571  margin-right:4px;
3572}
3573
3574
3575
3576
3577/* MARQUEE */
3578.slideshow-container {
3579	width:100%;
3580	overflow:hidden;
3581	position:relative;
3582}
3583.slideshow-container .slideshow-prev {
3584	position:absolute;
3585	top:50%;
3586	left:0px;
3587	margin-top:-36px;
3588	z-index:99;
3589}
3590.slideshow-container .slideshow-next {
3591	position:absolute;
3592	top:50%;
3593	margin-top:-36px;
3594	z-index:99;
3595	right:0px;
3596}
3597
3598.slideshow-container .pagination {
3599	position:absolute;
3600	bottom:20px;
3601	width:100%;
3602	text-align:center;
3603	z-index:99;
3604}
3605.slideshow-container .pagination ul {
3606	margin:0;
3607}
3608.slideshow-container .pagination ul li{
3609	display: inline-block;
3610	width:12px;
3611	height:12px;
3612	text-indent:-8000px;
3613	list-style:none;
3614	margin: 0 2px;
3615	border-radius:6px;
3616	background-color:#ccc;
3617	cursor:pointer;
3618        -webkit-transition:color .5s ease-in;
3619        -moz-transition:color .5s ease-in;
3620        -o-transition:color .5s ease-in;
3621        transition:color .5s ease-in;
3622}
3623.slideshow-container .pagination ul li:hover {
3624	background-color:#999;
3625}
3626.slideshow-container .pagination ul li.active {
3627	background-color:#33b5e5;
3628}
3629.slideshow-container .pagination ul li.active:hover {
3630	background-color:#33b5e5;
3631}
3632.slideshow-container ul li {
3633	display:inline;
3634	list-style:none;
3635}
3636
3637
3638
3639
3640a.download-sdk {
3641    float:right;
3642    margin:-10px 0;
3643    height:30px;
3644    padding-top:4px;
3645    padding-bottom:0px;
3646}
3647
3648#nav-x {
3649  padding-top: 14px;
3650}
3651
3652#nav-x .wrap {
3653  min-height:34px;
3654}
3655
3656#nav-x .wrap,
3657#searchResults.wrap {
3658    max-width:940px;
3659    border-bottom:1px solid #CCC;
3660}
3661
3662#searchResults.wrap #leftSearchControl {
3663  min-height:700px
3664}
3665.nav-x {
3666    margin-left:0;
3667    margin-bottom:0;
3668}
3669
3670
3671
3672
3673
3674
3675
3676
3677
3678
3679/*
3680 * CSS Styles that are needed by jScrollPane for it to operate correctly.
3681 */
3682
3683.jspContainer {
3684  overflow: hidden;
3685  position: relative;
3686}
3687
3688.jspPane {
3689  position: absolute;
3690  overflow: hidden;
3691  width:auto !important; /* to avoid cut-off api names in reference in horiz scroll */
3692}
3693
3694.jspVerticalBar {
3695  position: absolute;
3696  top: 0;
3697  right: 0;
3698  width: 4px;
3699  height: 100%;
3700  background: #f5f5f5;
3701}
3702
3703.jspHorizontalBar {
3704  position: absolute;
3705  bottom: 0;
3706  left: 0;
3707  width: 100%;
3708  height: 4px;
3709  background: #f5f5f5;
3710}
3711
3712.jspVerticalBar *,
3713.jspHorizontalBar * {
3714  margin: 0;
3715  padding: 0;
3716}
3717.jspCap {
3718  display: block;
3719}
3720
3721.jspVerticalBar .jspCap {
3722  height: 4px;
3723}
3724
3725.jspHorizontalBar .jspCap {
3726  width: 0;
3727  height: 100%;
3728}
3729
3730.jspHorizontalBar .jspCap {
3731  float: left;
3732}
3733
3734.jspTrack {
3735  position: relative;
3736}
3737
3738.jspDrag {
3739  background: #bbb;
3740  position: relative;
3741  top: 0;
3742  left: 0;
3743  cursor: pointer;
3744}
3745
3746.jspDrag:hover,
3747.jspDrag:active {
3748  border-color: #09c;
3749  background-color: #4cadcb;
3750  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
3751  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
3752  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
3753  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
3754  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
3755  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
3756  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
3757}
3758
3759.jspHorizontalBar .jspTrack,
3760.jspHorizontalBar .jspDrag {
3761  float: left;
3762  height: 100%;
3763}
3764
3765.jspArrow {
3766  background: #999;
3767  text-indent: -20000px;
3768  display: block;
3769  cursor: pointer;
3770}
3771
3772.jspArrow.jspDisabled {
3773  cursor: default;
3774  background: #ccc;
3775}
3776
3777.jspVerticalBar .jspArrow {
3778  height: 16px;
3779}
3780
3781.jspHorizontalBar .jspArrow {
3782  width: 16px;
3783  float: left;
3784  height: 100%;
3785}
3786
3787.jspVerticalBar .jspArrow:focus {
3788  outline: none;
3789}
3790
3791.jspCorner {
3792  float: left;
3793  height: 100%;
3794}
3795
3796/* Yuk! CSS Hack for IE6 3 pixel bug :( */
3797* html .jspCorner {
3798  margin: 0 -3px 0 0;
3799}
3800/******* end of jscrollpane *********/
3801
3802
3803
3804
3805
3806/************ DEVELOP HOMEPAGE ******************/
3807
3808/* Slideshow */
3809.slideshow-develop {
3810  height: 300px;
3811  width: 940px;
3812  position: relative;
3813  overflow:hidden;
3814}
3815.slideshow-develop .frame {
3816  width: 940px;
3817  height: 300px;
3818}
3819.slideshow-develop img.play {
3820  max-width:350px;
3821  max-height:240px;
3822  margin:20px 0 0 90px;
3823  -webkit-transform: perspective(800px ) rotateY( 35deg );
3824  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3825  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3826  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
3827}
3828.slideshow-develop img.play.no-shadow {
3829    box-shadow: none;
3830    -moz-box-shadow: none;
3831    -webkit-box-shadow: none;
3832}
3833.slideshow-develop img.play.no-transform {
3834  -webkit-transform: none;
3835}
3836.slideshow-develop a.slideshow-next {
3837  background: url(../images/arrow-right-develop.png);
3838}
3839.slideshow-develop a.slideshow-prev {
3840  background: url(../images/arrow-left-develop.png);
3841}
3842.slideshow-develop .content-right {
3843  float: left;
3844}
3845.slideshow-develop .content-right p.title-intro {
3846  position:absolute;
3847  margin:0;
3848}
3849.slideshow-develop .content-right h2 {
3850  padding:0;
3851  margin-bottom:10px;
3852  border:none;
3853}
3854.slideshow-develop .item {
3855  height: 300px;
3856  width: 940px;
3857}
3858.slideshow-develop .pagination ul li.active {
3859  background-color: #F80;
3860}
3861.slideshow-develop .pagination ul li.active:hover {
3862  background-color: #F80;
3863}
3864
3865/* Feeds */
3866.feed ul {
3867  margin: 0;
3868}
3869.feed .feed-nav {
3870  height: 25px;
3871  border-bottom: 1px solid #CCC;
3872}
3873.feed .feed-nav li {
3874  list-style: none;
3875  float: left;
3876  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
3877  margin-right: 25px;
3878  cursor: pointer;
3879}
3880.feed .feed-nav li.active {
3881  color: #000;
3882  border-bottom: 4px solid #F80;
3883}
3884.feed .feed-container {
3885  overflow: hidden;
3886  width: 460px;
3887}
3888.feed .feed-container .feed-frame {
3889  width: 1000px;
3890}
3891.feed .feed-container .feed-frame ul {
3892  float: left;
3893  width:460px;
3894}
3895.feed .feed-container .feed-frame ul ul {
3896  float: none;
3897  margin:10px 0 0 30px;
3898}
3899.feed .feed-container .feed-frame li {
3900  list-style: none;
3901  margin: 20px 0 20px 0;
3902  width: 460px;
3903  height:93px;
3904}
3905.feed .feed-container .feed-frame li.playlist {
3906  height:auto;
3907}
3908.feed .feed-container .feed-frame li.playlist a {
3909  height:93px;
3910  display:block;
3911}
3912.feed .feed-container .feed-frame li.more {
3913  height:20px;
3914  margin:10px 0 5px 5px;
3915}
3916.feed .feed-container .feed-frame li.more a {
3917  height:inherit;
3918}
3919.feed .feed-container .feed-frame li.playlist-video {
3920  list-style: none;
3921  margin: 0;
3922  width: 460px;
3923  height:55px;
3924  font-size:12px;
3925}
3926.feed .feed-container .feed-frame li.playlist-video a {
3927  height:45px;
3928  padding:5px;
3929}
3930.feed .feed-container .feed-frame li.playlist-video h5 {
3931  font-size:12px;
3932  line-height:13px;
3933  margin:0;
3934}
3935.feed .feed-container .feed-frame li.playlist-video p {
3936  margin:5px 0 0;
3937  line-height:15px;
3938}
3939.feed-container .feed-frame div.feed-image {
3940  float: left;
3941  border: 1px solid #999;
3942  margin:0 20px 0 0;
3943  width:122px;
3944  height:92px;
3945  background:url('../images/blog-default.png') no-repeat 0 0;
3946  background-size:180px;
3947}
3948#jd-content .feed .feed-container .feed-frame li img {
3949  float: left;
3950  border: 1px solid #999;
3951  margin:0 20px 0 0;
3952  width:122px;
3953  height:92px;
3954}
3955#jd-content .feed .feed-container .feed-frame li.playlist-video img {
3956  width:inherit;
3957  height:inherit;
3958}
3959
3960.feed .feed-container .feed-frame li a,
3961.feed .feed-container .feed-frame li a:active {
3962  color:#555 !important;
3963}
3964
3965.feed .feed-container .feed-frame li a:hover,
3966.feed .feed-container .feed-frame li a:hover * {
3967  color:#7AA1B0 !important;
3968}
3969
3970/* Video player */
3971#player-wrapper {
3972  display:none;
3973  margin: -1px auto 0;
3974  position: relative;
3975  width: 940px;
3976  height: 0px;
3977}
3978#player-frame {
3979  background: #EFEFEF;
3980  border: 1px solid #CCC;
3981  padding: 0px 207px;
3982  z-index: 10; /* stay above marque, but below search suggestions */
3983  width: 525px;
3984  height: 330px;
3985  position: relative;
3986}
3987
3988
3989
3990/************ DISTRIBUTE HOMEPAGE ***************/
3991
3992.marquee {
3993  width: 760px;
3994}
3995.marquee .main-img {
3996  float: left;
3997  margin-top: 20px;
3998  width: 490px;
3999}
4000.marquee .copy {
4001  width: 270px;
4002  float: left;
4003  margin-top: 30px;
4004}
4005.distribute-features {
4006  margin: 0;
4007}
4008.distribute-features ul {
4009  margin: 0;
4010}
4011.distribute-features ul li {
4012  list-style: none;
4013  float: left;
4014  border-top: 1px solid #9C0;
4015  width: 220px;
4016  margin-right: 50px;
4017}
4018.distribute-features ul li.last {
4019  margin-right: 0px;
4020}
4021
4022
4023/************ DEVELOP TOPIC CONTAINERS ************/
4024
4025.landing-banner,
4026.landing-docs {
4027  margin:20px 0 0;
4028}
4029.landing-banner .col-6:first-child,
4030.landing-docs .col-6:first-child,
4031.landing-docs .col-12 {
4032  margin-left:0;
4033  min-height:280px;
4034}
4035.landing-banner .col-6:last-child,
4036.landing-docs .col-6:last-child,
4037.landing-docs .col-12 {
4038  margin-right:0;
4039}
4040
4041.landing-banner h1 {
4042  margin-top:0;
4043}
4044.landing-docs {
4045  clear:left;
4046}
4047.landing-docs h3 {
4048  font-size:14px;
4049  line-height:21px;
4050  color:#555;
4051  text-transform:uppercase;
4052  border-bottom:1px solid #CCC;
4053  margin:0 0 20px;
4054}
4055.landing-docs a {
4056  color:#333 !important;
4057}
4058.landing-docs a:hover,
4059.landing-docs a:hover * {
4060  color:#7AA1B0 !important
4061}
4062
4063.plusone {
4064  float:right;
4065}
4066
4067
4068
4069/************* HOME/LANDING PAGE *****************/
4070
4071.slideshow-home {
4072  height: 500px;
4073  width: 940px;
4074  border-bottom: 1px solid #CCC;
4075  position: relative;
4076  margin: 0;
4077}
4078.slideshow-home .frame {
4079  width: 940px;
4080  height: 500px;
4081}
4082.slideshow-home .content-left {
4083  float: left;
4084  text-align: center;
4085  vertical-align: center;
4086  margin: 0 0 0 35px;
4087}
4088.slideshow-home .content-right {
4089  margin: 80px 0 0 0;
4090}
4091.slideshow-home .content-right p {
4092  margin-bottom: 10px;
4093}
4094.slideshow-home .content-right p:last-child {
4095  margin-top: 15px;
4096}
4097.slideshow-home .content-right h1 {
4098  padding:0;
4099}
4100.slideshow-home .item {
4101  height: 500px;
4102  width: 940px;
4103}
4104.home-sections {
4105  padding: 30px 20px 20px;
4106  margin: 20px 0;
4107  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
4108}
4109.home-sections ul {
4110  margin: 0;
4111}
4112.home-sections ul li {
4113  float: left;
4114  display: block;
4115  list-style: none;
4116  width: 170px;
4117  height: 35px;
4118  border: 1px solid #ccc;
4119  background: white;
4120  margin-right: 10px;
4121  border-radius: 1px;
4122  -webkit-border-radius: 1px;
4123  -moz-border-radius: 1px;
4124  box-shadow: 1px 1px 5px #EEE;
4125  -webkit-box-shadow: 1px 1px 5px #EEE;
4126  -moz-box-shadow: 1px 1px 5px #EEE;
4127  background: white;
4128}
4129.home-sections ul li:hover {
4130  background: #F9F9F9;
4131  border: 1px solid #CCC;
4132}
4133.home-sections ul li a,
4134.home-sections ul li a:hover {
4135  font-weight: bold;
4136  margin-top: 8px;
4137  line-height: 18px;
4138  float: left;
4139  width: 100%;
4140  text-align: center;
4141  color: #09c !important;
4142}
4143.home-sections ul li a {
4144  font-weight: bold;
4145  margin-top: 8px;
4146  line-height: 18px;
4147  float: left;
4148  width:100%;
4149  text-align:center;
4150}
4151.home-sections ul li img {
4152  float: left;
4153  margin: -8px 0 0 10px;
4154}
4155.home-sections ul li.last {
4156  margin-right: 0px;
4157}
4158.fullpage #footer {
4159  margin-top: -40px;
4160}
4161