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