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