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