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