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