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