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