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