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