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