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