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