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