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