default.css revision 6040ffa1e8311278c9ef72a0c52ec4e048eb5006
1/* color definitions */ 2/* 16 column layout */ 3/* clearfix idiom */ 4/* common mixins */ 5/* page layout + top-level styles */ 6::selection { 7 background-color: #0099cc; 8 color: #fff; } 9::-webkit-selection { 10 background-color: #0099cc; 11 color: #fff; } 12::-moz-selection { 13 background-color: #0099cc; 14 color: #fff; } 15 16html, body { 17 height: 100%; 18 margin: 0; 19 padding: 0; 20 background-color:#F9F9F9; 21 -webkit-font-smoothing: antialiased; 22 /* prevent subpixel antialiasing, which thickens the text */ 23 /* text-rendering: optimizeLegibility; */ 24 /* turned off ligatures due to bug 5945455 */ } 25 26body { 27 color: #222; 28 font: 14px/19px Roboto, sans-serif; 29 font-weight: 400; 30 letter-spacing:.1; 31 padding:0 10px; } 32 33#page-container { 34 width: 940px; 35 margin: 0 40px; } 36 37#page-header { 38 height: 80px; 39 margin-bottom: 20px; 40 font-size: 48px; 41 line-height: 48px; 42 font-weight: 100; 43 padding-left: 10px; } 44 #page-header a { 45 display: block; 46 position: relative; 47 top: 20px; 48 text-decoration: none; 49 color: #555555 !important; } 50 51#main-row { 52 display: inline-block; } 53 #main-row:after { 54 content: "."; 55 display: block; 56 height: 0; 57 clear: both; 58 visibility: hidden; } 59 * html #main-row { 60 height: 1px; } 61 62#page-footer { 63 margin-left: 190px; 64 margin-top: 80px; 65 color: #999999; 66 padding-bottom: 40px; 67 font-size: 12px; 68 line-height: 15px; } 69 #page-footer a { 70 color: #777777; } 71 #page-footer #copyright { 72 margin-bottom: 10px; } 73 74#nav-container { 75 width: 160px; 76 min-height: 10px; 77 margin-right: 20px; 78 float: left; } 79 80#nav { 81 margin:0; 82 padding:0 0 30px; 83} 84 85#side-nav { 86 min-height:5px; /* silly way to avoid doc floating left when nav goes fixed */ 87 margin-bottom:1px; 88} 89#devdoc-nav { 90 outline:none; 91 width:auto; 92 margin: 20px 0 0; } 93 94#devdoc-nav h2 { 95 border:0; 96} 97 98#devdoc-nav.fixed { 99 position: fixed; 100 margin:0; 101 top: 65px; /* sticky-header height + 20px gutter */ 102} 103 104#devdoc-nav span.small { 105 font-size:12px; 106 font-weight:normal; 107} 108 109#content { 110 width: 760px; 111 float: left; } 112 113a:hover, 114acronym:hover { 115 color: #7aa1b0 !important; } 116 117a:focus, 118a:active { 119 color: #33b5e5 !important; } 120 121a.external-link { 122 background:url('../images/styles/open_new_page.png') no-repeat 100% 50%; 123 padding-right:16px; 124} 125 126img { 127 border: none; } 128#jd-content img { 129 margin-bottom:15px; 130} 131 132ul { 133 margin: 0; 134 padding: 0; } 135 136strong { 137 font-weight: 500; } 138 139em { 140 font-style: italic; } 141 142acronym, 143.tooltip-link { 144 border-bottom: 1px dotted #555555; 145 cursor: help; } 146 147acronym:hover, 148.tooltip-link:hover { 149 color: #7aa1b0; 150 border-bottom-color: #7aa1b0; } 151 152img.with-shadow, 153video.with-shadow { 154 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } 155 156/* disclosures mixin */ 157/* content layout */ 158.layout-content-row { 159 display: inline-block; 160 margin-bottom: 10px; } 161 .layout-content-row:after { 162 content: "."; 163 display: block; 164 height: 0; 165 clear: both; 166 visibility: hidden; } 167 * html .layout-content-row { 168 height: 1px; } 169 170.layout-content-col { 171 float: left; 172 margin-left: 20px; } 173 .layout-content-col:first-child { 174 margin-left: 0; } 175 .layout-content-col h3, 176 .layout-content-col h4 { 177 margin-top:0; } 178 179.layout-content-col.span-1 { 180 width: 40px; } 181 182.layout-content-col.span-2 { 183 width: 100px; } 184 185.layout-content-col.span-3 { 186 width: 160px; } 187 188.layout-content-col.span-4 { 189 width: 220px; } 190 191.layout-content-col.span-5 { 192 width: 280px; } 193 194.layout-content-col.span-6 { 195 width: 340px; } 196 197.layout-content-col.span-7 { 198 width: 400px; } 199 200.layout-content-col.span-8 { 201 width: 460px; } 202 203.layout-content-col.span-9 { 204 width: 520px; } 205 206.layout-content-col.span-10 { 207 width: 580px; } 208 209.layout-content-col.span-11 { 210 width: 640px; } 211 212.layout-content-col.span-12 { 213 width: 700px; } 214 215.layout-content-col.span-13 { 216 width: 760px; } 217 218.vspace.size-1 { 219 height: 10px; } 220 221.vspace.size-2 { 222 height: 20px; } 223 224.vspace.size-3 { 225 height: 30px; } 226 227.vspace.size-4 { 228 height: 40px; } 229 230.vspace.size-5 { 231 height: 50px; } 232 233.vspace.size-6 { 234 height: 60px; } 235 236.vspace.size-7 { 237 height: 70px; } 238 239.vspace.size-8 { 240 height: 80px; } 241 242.vspace.size-9 { 243 height: 90px; } 244 245.vspace.size-10 { 246 height: 100px; } 247 248.vspace.size-11 { 249 height: 110px; } 250 251.vspace.size-12 { 252 height: 120px; } 253 254.vspace.size-13 { 255 height: 130px; } 256 257.vspace.size-14 { 258 height: 140px; } 259 260.vspace.size-15 { 261 height: 150px; } 262 263.vspace.size-16 { 264 height: 160px; } 265 266/* nav */ 267#nav { 268 /* section header divs */ 269 /* expanded section header divs */ 270 /* sublinks */ } 271 #nav li { 272 list-style-type: none; 273 font-size: 14px; 274 margin:0; 275 padding:0; 276 line-height: 15px; } 277 #nav a { 278 color: #555555; 279 text-decoration: none; 280 word-wrap:break-word; } 281 #nav .nav-section-header { 282 position: relative; 283 margin-bottom: 1px; 284 padding: 0 30px 0 0; } 285 #nav li.selected a, #nav li.selected > .nav-section-header > a { 286 color: #09C; 287 } 288 #nav li.selected ul li a { 289 /* don't highlight child items */ 290 color: #555555; } 291 #nav .nav-section .nav-section .nav-section-header { 292 /* no white line between second level sections */ 293 margin-bottom: 0; } 294 /* section header links */ 295 #nav > li > div > a { 296 display: block; 297 color: #333333; 298 font-weight: 500; 299 padding: 10px 0 10px 10px; } 300 #nav .nav-section-header:after { 301 content: ''; 302 background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; 303 width: 34px; 304 height: 34px; 305 display: block; 306 position: absolute; 307 top: 0; 308 right: 0; } 309 #nav .nav-section-header.empty { 310 padding:0; } 311 #nav .nav-section-header.empty:after { 312 display: none; } 313 /* nested nav headers */ 314 #nav .nav-section .nav-section { 315 position: relative; 316 padding: 0; 317 margin: 0; } 318 #nav .nav-section li a { 319 /* first gen child (2nd level li) */ 320 display:block; 321 font-weight: normal; 322 text-transform: none; 323 padding: 7px 5px 7px 10px; 324 } 325 #nav .nav-section li li a { 326 /* second gen child (3rd level li) */ 327 padding: 5px 5px 5px 10px; 328 } 329 #nav li.expanded .nav-section-header { 330 background:#e9e9e9; 331 background: rgba(0, 0, 0, 0.05); } 332 #nav li.expanded li .nav-section-header { 333 background: transparent; } 334 #nav li.expanded li ul { 335 /* 3rd level ul */ 336 padding:0 0 0 10px; 337 } 338 #nav li.expanded > .nav-section-header:after { 339 content: ''; 340 background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; 341 width: 34px; 342 height: 34px; } 343 #nav li.expanded li ul.tree-list-children { 344 padding: 0; 345 } 346 #nav li.expanded li ul.tree-list-children .tree-list-children { 347 padding:0 0 0 10px; 348 } 349 #nav li span.tree-list-subtitle { 350 display:inline-block; 351 padding:5px 0 0 10px; 352 color:#555; 353 text-transform:uppercase; 354 font-size:12px; 355 } 356 #nav li span.tree-list-subtitle:before { 357 content: '—'; 358 } 359 #nav li span.tree-list-subtitle:after { 360 content: '—'; 361 } 362 #nav li span.tree-list-subtitle.package { 363 padding-top:15px; 364 cursor:default; 365 } 366 #nav li span.tree-list-subtitle.package:before { 367 content: ''; 368 } 369 #nav li span.tree-list-subtitle.package:after { 370 content: ''; 371 } 372 #nav li ul.tree-list-children.classes { 373 padding-left:10px; 374 } 375 #nav li ul { 376 display:none; 377 overflow: hidden; 378 margin: 0; } 379 #nav li ul.animate-height-in { 380 -webkit-transition: height 0.25s ease-in; 381 -moz-transition: height 0.25s ease-in; 382 transition: height 0.25s ease-in; } 383 #nav li ul.animate-height-out { 384 -webkit-transition: height 0.25s ease-out; 385 -moz-transition: height 0.25s ease-out; 386 transition: height 0.25s ease-out; } 387 #nav li ul li { 388 padding: 0; } 389 #nav li li li { 390 padding: 0; } 391 #nav li.expanded ul { 392 } 393 #nav li ul > li { 394 padding:0; 395 } 396 #nav li ul > li:last-child { 397 padding-bottom:5px; 398 } 399 #nav li ul.tree-list-children > li:last-child { 400 padding-bottom:0; 401 } 402 #nav li.expanded ul > li { 403 background:#efefef; 404 background: rgba(0, 0, 0, 0.03); } 405 #nav li.expanded ul > li li { 406 background:inherit; } 407 #nav li ul.tree-list-children ul { 408 display:block; } 409 410#nav.samples-nav li li li { 411 font-size:13px; 412} 413#nav.samples-nav li li li a { 414 padding-top:3px; 415 padding-bottom:3px; 416} 417#nav.samples-nav li li ul > li:last-child { 418 padding-bottom:3px; 419} 420 421.new, 422.new-child { 423 font-size: .78em; 424 font-weight: bold; 425 color: #ff3d3d; 426 vertical-align:top; 427 white-space:nowrap; 428} 429 430/* content header */ 431.content-header { 432 height: 30px; 433 margin:20px 0 25px; 434 padding:0 0 10px;} 435.content-header.just-links { 436 margin-bottom:0; 437 padding-bottom:0;} 438 439.content-header h1 { 440 margin-top:16px; /* +20px from div.content header == 34px */ 441} 442.content-header > div:first-child { 443 height:55px; /* set fixed height for the header div to ensure the 444 next/prev links align with toc on training classes */ 445} 446 447.content-footer { 448 border-top: 1px solid #ccc; 449 margin-top: 10px; 450 padding-top:10px; 451 height: 30px; } 452 453.content-footer .col-9 { 454 margin-left:0; 455} 456.content-footer .col-4 { 457 margin-right:0; 458} 459.content-footer.wrap { 460 width:940px; 461} 462 463.paging-links { 464 position: relative; } 465 .paging-links a { 466 position: absolute; } 467 .paging-links a, 468 .training-nav-top a { 469 font-size: 14px; 470 line-height: 30px; 471 color: #555555; 472 text-decoration: none; 473 text-transform: uppercase; } 474 .paging-links .prev-page-link:before, 475 .training-nav-top .prev-page-link:before { 476 content: ''; 477 background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%; 478 width: 10px; 479 height: 10px; 480 display: inline-block; 481 margin-right: 5px; } 482 .training-nav-top .next-page-link, 483 .training-nav-top .start-class-link, 484 .training-nav-top .start-course-link { 485 right: 10px; } 486 .paging-links .prev-page-link { 487 left: -15px; } 488 .paging-links .next-page-link { 489 right: 0px; } 490 .next-page-link:after, 491 .start-class-link:after, 492 .start-course-link:after, 493 .next-class-link:after, 494 .go-link:after { 495 content: ''; 496 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 497 width: 10px; 498 height: 10px; 499 display: inline-block; 500 margin-left: 5px; } 501 .prev-page-link.inline:before { 502 content: none; } 503 .next-page-link.inline:after { 504 content: none; } 505 506 507 .training-nav-top a { 508 display:block; 509 float:left; 510 width:122px; 511 height:28px; 512 padding: 8px; 513 line-height:28px; 514 text-align:center; 515 border:1px solid #DADADA; 516 border-bottom:0; 517 } 518 519 .training-nav-top a.next-page-link { 520 border-left:0; 521 width:123px; 522 } 523 524 .paging-links a.disabled, 525 .training-nav-top a.disabled, 526 .content-footer a.disabled { 527 color:#bbb; 528 } 529 530 .paging-links a.disabled:hover, 531 .training-nav-top a.disabled:hover, 532 .content-footer a.disabled:hover { 533 cursor:default; 534 color:#bbb !important; 535 } 536 537 .training-nav-top a.start-class-link, 538 .training-nav-top a.start-course-link { 539 width:262px; 540 } 541 542 .paging-links a.start-class-link { 543 width:100%; 544 text-align:right; 545 } 546 547 /* list of classes on course landing page */ 548 ol.class-list { 549 list-style:none; 550 margin-left:0; 551 } 552 ol.class-list>li { 553 margin:0 0 15px; 554 padding:5px 0 0; 555 overflow:hidden; 556 border-top:1px solid #ccc; 557 } 558 ol.class-list li a.title { 559 font-size:16px; 560 margin:0; 561 clear:left; 562 display:block; 563 height:32px; 564 padding:0 4px; 565 } 566 ol.class-list li a.title h2 { 567 color:inherit; 568 margin:0 0 10px; 569 display:block; 570 float:left; 571 width:675px; 572 } 573 ol.class-list li a.title span { 574 display:none; 575 float:left; 576 font-size:18px; 577 font-weight:bold; 578 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 579 width: 10px; 580 height: 32px; 581 } 582 ol.class-list li a.title:hover { 583 background:#ddd; 584 color:#258AAF !important; 585 } 586 ol.class-list li a.title:hover span { 587 display:block; 588 } 589 590 #jd-content 591 ol.class-list li img { 592 float:left; 593 clear:left; 594 width:64px; 595 margin:0 20px 0 0; 596 } 597 ol.class-list li p.description { 598 float:left; 599 display:block; 600 width:250px; 601 margin:0; 602 } 603 ol.class-list li p.description.article { 604 width: 550px; 605 } 606 ol.class-list ol { 607 float:left; 608 width:320px; 609 margin:0 0 0 30px; 610 list-style:none; 611 margin:0 0 0 20px; 612 } 613 ol.class-list div.lessons li { 614 margin:0 0 6px; 615 line-height:16px; 616 } 617 618 619 .hide { 620 display:none !important; 621 } 622 623 .content-footer.next-class { 624 display:block; 625 border:0; 626 margin-top:0; 627 padding-top:0; 628 } 629 630 .content-footer.next-class a.next-class-link { 631 display:block; 632 float:right; 633 text-transform:uppercase; 634 } 635 636 637 638 /* inner-doc tabs w/ title */ 639 640div#title-tabs-wrapper { 641 border-bottom:1px solid #ccc; 642 margin:20px 0 30px; 643} 644h1.with-title-tabs { 645 display:inline-block; 646 margin:0 0 -1px 0; 647 padding:0 60px 0 0; 648 border-bottom:1px solid #F9F9F9; 649} 650ul#title-tabs { 651 list-style:none; 652 padding:0; 653 height:29px; 654 margin:0; 655 font-size:16px; 656 line-height:26px; 657 display:inline-block; 658 vertical-align:bottom; 659} 660ul#title-tabs li { 661 display:block; 662 float:left; 663 margin-right:40px; 664 border-bottom: 3px solid transparent; 665} 666ul#title-tabs li.selected { 667 border-bottom: 3px solid #93C; 668} 669ul#title-tabs li a { 670 color:#333; 671} 672ul#title-tabs li a:hover, 673ul#title-tabs li a:active { 674 color:#93C !important; 675} 676 677 678 679/* content body */ 680@-webkit-keyframes glowheader { 681 from { 682 background-color: #33b5e5; 683 color: #000; 684 border-bottom-color: #000; } 685 686 to { 687 background-color: transparent; 688 color: #33b5e5; 689 border-bottom-color: #33b5e5; } } 690 691@-moz-keyframes glowheader { 692 from { 693 background-color: #33b5e5; 694 color: #000; 695 border-bottom-color: #000; } 696 697 to { 698 background-color: transparent; 699 color: #33b5e5; 700 border-bottom-color: #33b5e5; } } 701 702@keyframes glowheader { 703 from { 704 background-color: #33b5e5; 705 color: #000; 706 border-bottom-color: #000; } 707 708 to { 709 background-color: transparent; 710 color: #33b5e5; 711 border-bottom-color: #33b5e5; } } 712 713h1:target, 714h2:target, 715h3:target { 716 -webkit-animation-name: glowheader; 717 -moz-animation-name: glowheader; 718 animation-name: glowheader; 719 -webkit-animation-duration: 0.7s; 720 -moz-animation-duration: 0.7s; 721 animation-duration: 0.7s; 722 -webkit-animation-timing-function: ease-out; 723 -moz-animation-timing-function: ease-out; 724 animation-timing-function: ease-out; } 725 726.design ol h4 { 727 margin-bottom:0; 728} 729.design ol { 730 counter-reset: item; } 731 .design ol>li { 732 font-size: 14px; 733 line-height: 20px; 734 list-style-type: none; 735 position: relative; } 736 .design ol>li:before { 737 content: counter(item) ". "; 738 counter-increment: item; 739 position: absolute; 740 left: -20px; 741 top: 0; } 742 .design ol li.value-1:before { 743 content: "1. "; } 744 .design ol li.value-2:before { 745 content: "2. "; } 746 .design ol li.value-3:before { 747 content: "3. "; } 748 .design ol li.value-4:before { 749 content: "4. "; } 750 .design ol li.value-5:before { 751 content: "5. "; } 752 .design ol li.value-6:before { 753 content: "6. "; } 754 .design ol li.value-7:before { 755 content: "7. "; } 756 .design ol li.value-8:before { 757 content: "8. "; } 758 .design ol li.value-9:before { 759 content: "9. "; } 760 .design ol li.value-10:before { 761 content: "10. "; } 762.design .with-callouts ol>li { 763 list-style-position: inside; 764 margin-left: 0; } 765 .design .with-callouts ol>li:before { 766 display: inline; 767 left: -20px; 768 float: left; 769 width: 17px; 770 color: #33b5e5; 771 font-weight: 500; } 772.design .with-callouts ul>li { 773 list-style-position: outside; } 774 775/* special list items */ 776li.no-bullet { 777 list-style-type: none !important; } 778li.no-bullet *{ 779 margin:0; } 780 781.design li.with-icon { 782 position: relative; 783 margin-left: 20px; 784 min-height: 30px; } 785 .design li.with-icon p { 786 margin-left: 0 !important; } 787 .design li.with-icon:before { 788 position: absolute; 789 left: -40px; 790 top: 0; 791 content: ''; 792 width: 30px; 793 height: 30px; } 794 .design li.with-icon.tablet:before { 795 background-image: url(../images/styles/ico_phone_tablet.png); } 796 .design li.with-icon.web:before { 797 background-image: url(../images/styles/ico_web.png); } 798 .design li.with-icon.action:before { 799 background-image: url(../images/styles/ico_action.png); } 800 .design li.with-icon.use:before { 801 background-image: url(../images/styles/ico_use.png); } 802 803/* figures and callouts */ 804.figure { 805 position: relative; } 806 .figure.pad-below { 807 margin-bottom: 20px; } 808 .figure .figure-callout { 809 position: absolute; 810 color: #fff; 811 font-weight: 500; 812 font-size: 16px; 813 line-height: 23px; 814 text-align: center; 815 background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%; 816 padding-right: 2px; 817 width: 30px; 818 height: 29px; 819 z-index: 1000; } 820 .figure .figure-callout.top { 821 top: -9px; } 822 .figure .figure-callout.right { 823 right: -5px; } 824 825.figure-caption { 826 margin: 0 10px 20px 0; 827 font-size: 14px; 828 line-height: 20px; 829 font-style: italic; } 830 831/* rows of figures */ 832.figure-row { 833 font-size: 0; 834 line-height: 0; 835 /* to prevent space between figures */ } 836 .figure-row .figure { 837 display: inline-block; 838 vertical-align: top; } 839 .figure-row .figure + .figure { 840 margin-left: 10px; 841 /* reintroduce space between figures */ } 842 843/* video containers */ 844.framed-galaxynexus-land-span-13 { 845 background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat 846scroll top left; 847 padding: 42px 122px 62px 126px; 848 overflow: hidden; } 849 .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, 850.framed-galaxynexus-land-span-13 img { 851 width: 512px; 852 height: 286px; } 853 854 855.framed-galaxynexus-land-span-8{ 856 background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat 857scroll top left; 858 padding: 26px 68px 38px 72px; 859 overflow: hidden; } 860 .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video, 861.framed-galaxynexus-land-span-8 img { 862 width: 320px; 863 height: 180px; } 864 865.framed-galaxynexus-port-span-9 { 866 background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat 867scroll top left; 868 padding: 95px 122px 107px 124px; 869 overflow: hidden; } 870 .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, 871.framed-galaxynexus-port-span-9 img { 872 width: 274px; 873 height: 488px; } 874 875.framed-galaxynexus-port-span-5 { 876 background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat 877scroll top left; 878 padding: 75px 31px 76px 33px; 879 overflow: hidden; } 880 .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video, 881.framed-galaxynexus-port-span-5 img { 882 width: 216px; 883 height: 384px; } 884 885.framed-nexus4-port-216 { 886 background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat 887scroll top left; 888 background-size:240px 465px; 889 padding: 52px 12px 52px 12px; 890 overflow: hidden; } 891 .framed-nexus4-port-216, .framed-nexus4-port-216 video, 892 .framed-nexus4-port-216 img { 893 width: 216px; 894 height: 360px; } 895 896.framed-nexus5-port-span-5 { 897 background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat 898 scroll top left; 899 padding: 52px 33px 69px 31px; 900 overflow: hidden; 901} 902 903.framed-nexus5-port-span-5, 904.framed-nexus5-port-span-5 video, 905.framed-nexus5-port-span-5 img { 906 width: 216px; 907 height: 384px; 908} 909 910.framed-nexus5-land-span-13 { 911 background: transparent url(../images/styles/device_nexus5_blank_land_span13.png) no-repeat scroll top left; 912 padding: 36px 119px 54px 108px; 913 overflow: hidden; 914} 915 916.framed-nexus5-land-span-13, 917.framed-nexus5-land-span-13 video, 918.framed-nexus5-land-span-13 img { 919 width: 533px; 920 height: 300px; 921} 922 923.framed-nexus5-port-span-5, 924.framed-nexus5-port-span-5 video, 925.framed-nexus5-port-span-5 img { 926 width: 216px; 927 height: 384px; 928} 929 930/* landing page disclosures */ 931.landing-page-link { 932 text-decoration: none; 933 font-weight: 500; 934 color: #333333; } 935 .landing-page-link:after { 936 content: ''; 937 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 938 width: 10px; 939 height: 10px; 940 display: inline-block; 941 margin-left: 5px; } 942 943/* tooltips */ 944.tooltip-box { 945 position: absolute; 946 background-color: rgba(0, 0, 0, 0.9); 947 border-radius: 2px; 948 font-size: 14px; 949 line-height: 20px; 950 color: #fff; 951 padding: 6px 10px; 952 max-width: 250px; 953 z-index: 10000; } 954 .tooltip-box.below:after { 955 position: absolute; 956 content: ''; 957 line-height: 0; 958 display: block; 959 top: -10px; 960 left: 5px; 961 border: 5px solid transparent; 962 border-bottom-color: rgba(0, 0, 0, 0.9); } 963 964/* video note */ 965.video-instructions { 966 margin-top: 10px; 967 margin-bottom: 10px; } 968 .video-instructions:before { 969 content: ''; 970 background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left; 971 display: inline-block; 972 width: 12px; 973 height: 12px; 974 margin-right: 8px; } 975 .video-instructions:after { 976 content: 'Click device screen to replay movie.'; } 977 978/* download buttons */ 979.download-button { 980 display: block; 981 margin-bottom: 5px; 982 text-decoration: none; 983 background-color: #33b5e5; 984 color: #fff !important; 985 font-weight: 500; 986 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); 987 padding: 6px 12px; 988 border-radius: 2px; } 989 .download-button:hover, .download-button:focus { 990 background-color: #0099cc; 991 color: #fff !important; } 992 .download-button:active { 993 background-color: #006699; } 994 995/* UI tables and other things found in Writing style and Settings pattern */ 996.ui-table { 997 width: 100%; 998 background-color: #282828; 999 color: #fff; 1000 border-radius: 2px; 1001 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 1002 border-collapse: separate; } 1003 .ui-table th, 1004 .ui-table td { 1005 padding: 5px 10px; 1006 background-color: inherit; 1007 border:0;} 1008 .ui-table thead th { 1009 font-weight: bold; } 1010 .ui-table tfoot td { 1011 border-top: 1px solid #494949; 1012 border-right: 1px solid #494949; 1013 text-align: center; } 1014 .ui-table tfoot td:last-child { 1015 border-right: 0; } 1016 1017.layout-with-list-item-margins { 1018 margin-left: 30px !important; } 1019 1020.emulate-content-left-padding { 1021 margin-left: 10px; } 1022 1023.do-dont-label { 1024 margin-bottom: 10px; 1025 padding-left: 20px; 1026 background: transparent none no-repeat scroll 0px 3px; } 1027 .do-dont-label.bad { 1028 background-image: url(../images/styles/ico_wrong.png); } 1029 .do-dont-label.good { 1030 background-image: url(../images/styles/ico_good.png); } 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050/***** PREVIOUSLY style.css ******************/ 1051 1052 1053 1054 1055 1056@media screen, projection, print { 1057[dir='rtl'] { 1058 direction: rtl; 1059} 1060html { 1061 line-height: 20px; 1062} 1063pre, table, input, textarea, code { 1064 font-size: 1em; 1065} 1066address, abbr, cite { 1067 font-style: normal; 1068} 1069[dir='rtl'] th { 1070 text-align: right; 1071} 1072html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q, 1073html[lang^=zh] blockquote, html[lang^=zh] q { 1074 font-style: normal; 1075} 1076q { 1077 font-style: italic; 1078} 1079fieldset, iframe, img { 1080 border: 0; 1081} 1082img { 1083 -ms-interpolation-mode: bicubic; 1084 vertical-align: middle; 1085 max-width: 100%; 1086} 1087q { 1088 quotes: none; 1089} 1090sup, sub { 1091 font-size: 11px; 1092 line-height: 0; 1093} 1094} 1095 1096@media screen, projection { 1097 1098table, fieldset { 1099 margin: 0; 1100} 1101h1 { 1102 color:#333; 1103 font-size: 34px; 1104 margin: 36px 0 12px; 1105 padding:0 0 10px; 1106 font-weight:300; 1107} 1108h1, h2 { 1109 line-height: 34px; 1110} 1111h1.short { 1112 margin-right:320px; 1113} 1114h1.short { 1115 margin-right:320px; 1116} 1117h1.super { 1118 font-size: 37px; 1119} 1120h2 { 1121 color:#333; 1122 font-size: 26px; 1123 margin: 32px 0 20px; 1124 padding:0; 1125 font-weight:300; 1126} 1127h3 { 1128 color:#333; 1129 font-size: 21px; 1130 font-weight:400; 1131 margin:21px 0 14px 0; 1132} 1133h3, h4 { 1134 line-height: 21px; 1135} 1136h4 { 1137 font-size: 18px; 1138 margin: 12px 0; 1139 font-weight:500; 1140} 1141h5 { 1142 font-size: 14px; 1143} 1144h5, h6 { 1145 margin: 5px 0; 1146} 1147h6 { 1148 font-size: 12px; 1149} 1150hr { /* applied to the bottom of h2 elements */ 1151 height: 1px; 1152 margin: 3px 0 12px; 1153 border: 0; 1154 background: #ccc; 1155} 1156p, pre, table, form { 1157 margin: 0 0 15px; 1158} 1159small { 1160 font-size: 11.5px; 1161 color: #000; 1162} 1163ul, ol { 1164 margin: 0 0 15px 18px; 1165 padding: 0; 1166} 1167[dir='rtl'] ul, [dir='rtl'] ol { 1168 margin: 10px 30px 10px 10px; 1169} 1170ul ul, ul ol, ol ul, ol ol { 1171 margin-bottom: 0; 1172 margin-top: 0; 1173} 1174li { 1175 margin:0 0 5px; 1176} 1177dd { 1178 margin:0 0 10px 30px; 1179} 1180dd p, 1181dd pre, 1182dd ul, 1183dd ol, 1184dd dl { 1185 margin-top:10px; 1186} 1187li p, 1188li pre, 1189li ul, 1190li ol, 1191li dl { 1192 margin-top:5px; 1193 margin-bottom:5px; 1194} 1195dl dd dl:first-child { 1196 margin-top:0; 1197} 1198pre strong, pre b, a strong, a b, a code { 1199 color: inherit; 1200} 1201pre, code { 1202 color: #060; 1203 font: 13px/1.5 monospace; 1204} 1205code { 1206 font-weight:bold; 1207 font: 13px/14px monospace; 1208} 1209 1210legend { 1211 display: none; 1212} 1213a:link, a:visited { 1214 color: #258aaf; 1215 text-decoration: none; 1216} 1217a:focus, a:hover, a:active { 1218 color: #33B5E5; 1219 text-decoration: none; 1220} 1221strong, b { 1222 font-weight:bold; 1223 color: #222; 1224} 1225table { 1226 border-collapse: collapse; 1227 border-spacing: 0; 1228 border:0; 1229 margin: .5em 1em 1em 0; 1230 width:100%; /* consistent table widths; within IE's quirks */ 1231 background-color:#f7f7f7; 1232} 1233th, td { 1234 padding: 4px 12px; 1235 vertical-align: top; 1236 text-align: left; 1237} 1238td { 1239 background-color:inherit; 1240 border:solid 1px #DDD; 1241} 1242td *:last-child { 1243 margin-bottom:0; 1244} 1245th { 1246 background-color: #999; 1247 color: #fff; 1248 border:solid 1px #DDD; 1249 font-weight: normal; 1250} 1251tr:first-of-type th:first-of-type:empty { 1252 visibility: hidden; 1253} 1254 1255/* -------------------------------------------------------------------------- 1256Footer 1257*/ 1258.line { 1259 clear: both; 1260 background: #acbc00; 1261 background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1262 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00), 1263color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); 1264 background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1265 background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1266 background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1267 background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1268 height: 2px; 1269 margin-top: 150px; 1270 position: relative; 1271 z-index: 11; 1272} 1273#footer { 1274 font-size:11px; 1275 clear: both; 1276 color: #999; 1277 padding: 15px 0; 1278 margin-top:10px; 1279 width:auto; 1280} 1281#footer-local ul { 1282 list-style: none; 1283 margin: 5px 0 30px 0; 1284} 1285#footer-local li { 1286 display: inline; 1287} 1288#footer-local li+li:before { 1289 content: '|'; 1290 padding: 0 3px; 1291 color: #e5e5e5; 1292} 1293#footer-global { 1294 padding: 10px 15px; 1295 background: #f5f5f5; 1296} 1297#footer-global { 1298 border-top: 1px solid #ebebeb; 1299 font-size: 11.5px; 1300 line-height: 1.8; 1301 list-style: none; 1302} 1303#footer-global ul { 1304 margin: 0; 1305} 1306#footer-global li { 1307 display: inline; 1308 font-weight: bold; 1309} 1310#footer-global li+li:before { 1311 content: '¬?'; 1312 padding: 0 3px; 1313} 1314* html #footer-global li { 1315 margin: 0 13px 0 0; 1316} 1317* [dir='rtl'] #footer-global li { 1318 margin: 0 0 0 13px; 1319} 1320*+html #footer-global li { 1321 margin: 0 13px 0 0; 1322} 1323*+[dir='rtl'] #footer-global li { 1324 margin: 0 0 0 13px; 1325} 1326#footer-global li a { 1327 font-weight: normal; 1328} 1329.locales { 1330 margin: 10px 0 0 0px; 1331} 1332[dir='rtl'] .locales { 1333 background-position: right center; 1334 float: left; 1335 padding: 0 24px 0 0; 1336} 1337.locales form { 1338 margin: 0; 1339} 1340.locales select, .sites select { 1341 line-height: 3.08; 1342 margin: 0px 0; 1343 border: solid 1px #EBEBEB; 1344 -webkit-appearance: none; 1345 background: white url('../images/arrows-up-down.png') right center no-repeat; 1346 height: 30px; 1347 color: #222; 1348 line-height: normal; 1349 padding: 5px; 1350 width: 230px; 1351} 1352} 1353 1354/* ============================================================================= 1355 Print Only 1356 ========================================================================== */ 1357@media print { 1358 /* configure printed page */ 1359 @page { 1360 margin: 0.75in 1in; 1361 widows: 4; 1362 orphans: 4; 1363 } 1364 1365 /* reset spacing metrics */ 1366 html, body, .wrap { 1367 margin: 0 !important; 1368 padding: 0 !important; 1369 width: auto !important; 1370 } 1371 1372 /* leave enough space on the left for bullets */ 1373 body { 1374 padding-left: 20px !important; 1375 } 1376 #doc-col { 1377 margin-left: 0; 1378 } 1379 1380 /* hide a bunch of non-content elements */ 1381 #header, #footer, #nav-x, #side-nav, 1382 .training-nav-top, .training-nav-bottom, 1383 #doc-col .content-footer, 1384 .nav-x, .nav-y, 1385 .paging-links { 1386 display: none !important; 1387 } 1388 1389 /* remove extra space above page titles */ 1390 #doc-col .content-header { 1391 margin-top: 0; 1392 } 1393 1394 /* bump up spacing above subheadings */ 1395 h2 { 1396 margin-top: 40px !important; 1397 } 1398 1399 /* print link URLs where possible and give links default text color */ 1400 p a:after { 1401 content: " (" attr(href) ")"; 1402 font-size: 80%; 1403 } 1404 p a { 1405 word-wrap: break-word; 1406 } 1407 a { 1408 color: inherit; 1409 } 1410 1411 /* syntax highlighting rules */ 1412 .str { color: #060; } 1413 .kwd { color: #006; font-weight: bold; } 1414 .com { color: #600; font-style: italic; } 1415 .typ { color: #404; font-weight: bold; } 1416 .lit { color: #044; } 1417 .pun { color: #440; } 1418 .pln { color: #000; } 1419 .tag { color: #006; font-weight: bold; } 1420 .atn { color: #404; } 1421 .atv { color: #060; } 1422} 1423 1424/* ============================================================================= 1425 Columns 1426 ========================================================================== */ 1427 1428@media screen, projection, print { 1429.full { 1430 padding: 2.5em 0; 1431 border-top: solid 1px #ddd; 1432 border-bottom: solid 1px #ddd; 1433 background: #f7f7f7; 1434} 1435.wrap { 1436 margin: 0 auto; 1437 width: 940px; 1438 clear: both; 1439} 1440.cols { 1441 height: 1%; 1442 margin: 0 -1.533742331288343558282%; 1443 width: 103.06748466257669%} 1444*+html .cols { 1445 margin-bottom: 20px; 1446} 1447.cols:after { 1448 clear: both; 1449 content: ' '; 1450 display: block; 1451 height: 0; 1452 visibility: hidden; 1453} 1454.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 1455.col-13, .col-14, .col-15, .col-16 { 1456 display: inline; 1457 float: left; 1458 margin-left: 10px; 1459 margin-right: 10px; 1460} 1461/* 1462* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html 1463.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12 { 1464 margin: 0; 1465 padding: 0 1.4% 20px; 1466} 1467[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5, 1468[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10, 1469[dir='rtl'] .col-11, [dir='rtl'] .col-12 { 1470 float: right; 1471} 1472*/ 1473.col-1 { width: 40px } 1474.col-2 { width: 100px } 1475.col-3 { width: 160px } 1476.col-4 { width: 220px } 1477.col-5 { width: 280px } 1478.col-6 { width: 340px } 1479.col-7 { width: 400px } 1480.col-8 { width: 460px } 1481.col-9 { width: 520px } 1482.col-10 { width: 580px } 1483.col-11 { width: 640px } 1484.col-12 { width: 700px } 1485.col-13 { width: 760px } 1486.col-14 { width: 820px } 1487.col-15 { width: 880px } 1488.col-16 { width: 940px } 1489} 1490 1491.col-right { 1492 margin-right:0px; 1493} 1494 1495@media screen and (max-width:772px) { 1496.col-5, .col-6, .col-7 { 1497 clear: both; 1498 width: 97.0238096%} 1499} 1500 1501/* ============================================================================= 1502 Layout 1503 ========================================================================== */ 1504@media screen, projection, print { 1505 1506/* -------------------------------------------------------------------------- 1507Header, Login, Nav-X, Search 1508*/ 1509#header { 1510 margin: 0; 1511 padding: 0; 1512} 1513#header:before, #header:after { 1514 content: ""; 1515 display: table; 1516 clear: both 1517} 1518.logo, .nav-x { 1519 float: left; 1520} 1521.nav-x { 1522 margin-top: -2px; 1523 list-style-type: none; 1524} 1525.nav-x a { 1526 color: #333; 1527 font-size: 16px; 1528} 1529.about a.selected { 1530 color: #9933CC; 1531} 1532.design a.selected { 1533 color: #33b5e5; 1534} 1535.develop a.selected { 1536 color: #F80; 1537} 1538.distribute a.selected { 1539 color: #9C0; 1540} 1541 1542 1543 1544.nav-x li { 1545 display: inline; 1546 margin-right: 45px; 1547} 1548.search { 1549 float: right; 1550 position: relative; 1551 width: 220px 1552} 1553.search .bottom, .search .left, .search .right { 1554 position: absolute; 1555 background-color: #a3a3a3; 1556} 1557.search .bottom { 1558 width: 220px; 1559 height: 1px; 1560 top: 24px; 1561 left: 0 1562} 1563.search .left, .search .right { 1564 height: 5px; 1565 width: 1px 1566} 1567.search .left { top: 19px; left: 0 } 1568.search .right { top: 19px; right: 0 } 1569.search form { 1570 float: left; 1571 margin-top: 2px; 1572 width: inherit; 1573} 1574.search .close, 1575#player-frame .close { 1576 position: absolute; 1577 right: 8px; 1578 bottom: 4px; 1579 width: 16px; 1580 height: 16px; 1581 margin: 0; 1582 text-indent: -1000em; 1583 background: url(../images/close.png) no-repeat 0 0; 1584 z-index:9999; 1585} 1586.search .close:hover, .search .close:focus, 1587#player-frame .close:hover, #player-frame .close:focus { 1588 background-position: -16px 0; 1589 cursor:pointer; 1590} 1591#player-frame .close { 1592 top: 6px; 1593} 1594.search form input { 1595 color: #999; 1596 font-size: 1em; 1597 width: inherit; 1598 border: none; 1599 margin: 0; 1600 padding:0 0 0 6px; 1601 z-index: 1500; 1602 background-color: transparent 1603} 1604.search:hover .bottom, .search:hover .left, .search:hover .right { 1605 background-color: #33b5e5; 1606} 1607.search:hover .icon { 1608 background-position: -8px 0 1609} 1610.search form input:focus { 1611 color: #222; 1612 font-weight: bold; 1613 outline:0; 1614} 1615/* Search Dropdown */ 1616.search-dropdown { 1617 padding: 15px; 1618 width: 192px; 1619 border: solid 1px #c5c5c5; 1620 background: #fff; 1621 position: absolute; 1622 top: 35px; 1623 left: 0; 1624 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); 1625 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); 1626 box-shadow: 0 0 10px rgba(0,0,0,0.2) 1627} 1628.search-dropdown ul, .search-dropdown ul li { 1629 list-style-type: none; 1630 margin: 0; 1631 padding: 0 1632} 1633.search-dropdown ul li { 1634 clear: both 1635} 1636.search-dropdown img { 1637 float: left; 1638 margin: 0 10px 10px 0 1639} 1640.search-dropdown h6 { 1641 color: #222; 1642 margin: 0; 1643 line-height: normal 1644} 1645.search-dropdown .desc { 1646 color: #999; 1647 font-size: 11.5px; 1648 line-height: normal; 1649 margin: 0; 1650} 1651.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc { 1652 color: #33b5e5 1653} 1654/* -------------------------------------------------------------------------- 1655Buttons 1656*/ 1657.button, a.button, .button-secondary, a.button-secondary { 1658 border-image: initial; 1659 -webkit-border-radius: 2px; 1660 -moz-border-radius: 2px; 1661 border-radius: 2px; 1662 cursor: pointer; 1663} 1664.button, a.button { 1665 display:inline-block; 1666 background-color: #09c; 1667 background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c)); 1668 background-image: -webkit-linear-gradient(top, #2faddb, #09c); 1669 background-image: -moz-linear-gradient(top, #2faddb, #09c); 1670 background-image: -ms-linear-gradient(top, #2faddb, #09c); 1671 background-image: -o-linear-gradient(top, #2faddb, #09c); 1672 background-image: linear-gradient(top, #2faddb, #09c); 1673 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0); 1674 border: 1px solid #3990ab; 1675 color: #fff; 1676} 1677.button-secondary, a.button-secondary { 1678 background-color: #f3f3f3; 1679 border: 1px solid #dcdcdc; 1680 color: #444; 1681} 1682a.button, a.button:visited, a.button-secondary, a.button-secondary:visited { 1683 margin-right: 16px; 1684 font-weight: 400; 1685 min-width: 54px; 1686 outline: 0; 1687 padding: 8px 15px; 1688 text-align: center; 1689} 1690.button, .button-secondary { 1691 margin-right: 16px; 1692 font-weight: 400; 1693 min-width: 54px; 1694 outline: 0; 1695 padding: 0 15px; 1696 text-align: center; 1697} 1698.button:hover, a.button:hover { 1699 border-color: #09c; 1700 background-color: #4cadcb; 1701 background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb)); 1702 background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb); 1703 background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb); 1704 background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb); 1705 background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb); 1706 background-image: linear-gradient(top, #5dbcd9, #4cadcb); 1707 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', 1708EndColorStr='#4cadcb',GradientType=0); 1709 color: #fff !important; 1710} 1711.button:active, a.button:active { 1712 background-color: #1e799a; 1713 background-image: none; 1714 border-color: #30b7e6; 1715} 1716a.button.big.subtitle { 1717 line-height:18px; 1718} 1719.button-secondary:hover, a.button-secondary:hover { 1720 border-color: #dbdbdb; 1721 background-color: #f3f3f3; 1722 background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); 1723 background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); 1724 background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); 1725 background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); 1726 background-image: -o-linear-gradient(top, #f9f9f9, #ececec); 1727 background-image: linear-gradient(top, #f9f9f9, #ececec); 1728 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', 1729EndColorStr='#ececec'); 1730 color: #33B5E5 !important; 1731} 1732.button-secondary:active, a.button-secondary:active { 1733 border-color: #dadada; 1734 background: #ebebeb; /* Old browsers */ 1735 /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 1736 background: 1737url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ 1738Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv 1739eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+ 1740CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg 1741eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl 1742YiIgc3RvcC1vcGFjaXR5PSIxIi8+ 1743CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+ 1744CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+ 1745CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+ 1746CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy 1747R3JhZGllbnQ+ 1748CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg 1749Lz4KPC9zdmc+); 1750 background: -moz-linear-gradient(top, #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%, 1751#ffffff 100%); /* FF3.6+ */ 1752 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), 1753color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff)); 1754/* Chrome,Safari4+ */ 1755 background: -webkit-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 175690%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 1757 background: -o-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff 1758100%); /* Opera 11.10+ */ 1759 background: -ms-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff 1760100%); /* IE10+ */ 1761 background: linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff 1762100%); /* W3C */ 1763 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', 1764endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ 1765 -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 1766 -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 1767 box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 1768 color: #258AAF !important; 1769} 1770.button.big { 1771 font-size:20px; 1772 display:inline-block; 1773} 1774.button.big span.small { 1775 font-size:14px; 1776} 1777.button-caption { 1778 margin-top:10px; 1779 font-size:12px; 1780 font-style:italic; 1781} 1782 1783.button.disabled, 1784.button.disabled:hover, 1785.button.disabled:active { 1786 background:#ebebeb; 1787 color:#999 !important; 1788 border-color:#999; 1789 cursor:default; 1790} 1791 1792.training-nav-top a.button-secondary, 1793.training-nav-bottom a.button-secondary { 1794 display:block; 1795 float:left; 1796 margin:0; 1797 width:130px; 1798 text-transform:uppercase; 1799 font-weight:bold; 1800 1801 background-color: #f3f3f3; 1802 background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); 1803 background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); 1804 background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); 1805 background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); 1806 background-image: -o-linear-gradient(top, #f9f9f9, #ececec); 1807 background-image: linear-gradient(top, #f9f9f9, #ececec); 1808 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', 1809EndColorStr='#ececec'); 1810 color: #33B5E5; 1811} 1812 1813.training-nav-top a.button-secondary:hover, 1814.training-nav-bottom a.button-secondary:hover { 1815 background-color: #09c; 1816 background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c)); 1817 background-image: -webkit-linear-gradient(top, #2faddb, #09c); 1818 background-image: -moz-linear-gradient(top, #2faddb, #09c); 1819 background-image: -ms-linear-gradient(top, #2faddb, #09c); 1820 background-image: -o-linear-gradient(top, #2faddb, #09c); 1821 background-image: linear-gradient(top, #2faddb, #09c); 1822 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c'); 1823 border: 1px solid #3990ab; 1824 color: #fff !important; 1825} 1826 1827.training-nav-top a.button-secondary.last, 1828.training-nav-bottom a.button-secondary.last { 1829 border-left:0; 1830} 1831 1832.training-nav-top a.button-secondary.double-size, 1833.training-nav-bottom a.button-secondary.double-size { 1834 width:291px; 1835} 1836 1837.training-nav-top, 1838.training-nav-bottom { 1839 float:right; 1840 margin:0 0 0 20px; 1841} 1842 1843.training-nav-bottom { 1844 padding:0 0 20px; 1845} 1846 1847#tb-wrapper, 1848#qv-wrapper { 1849 float:right; 1850 clear:right; 1851 margin:0 0 0 30px; /* negative top-margin to counter the content-header bottom margin */ 1852 padding:0 0 30px; 1853} 1854 1855#tb-wrapper { 1856 margin:-29px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ 1857} 1858 1859#tb, 1860#qv { 1861 font-size:13px; 1862 line-height:18px; 1863 width:238px; 1864 border:1px solid #ccc; 1865 float:right; 1866} 1867 1868#tb { 1869 width:278px; 1870} 1871 1872#tb h2, 1873#qv h2 { 1874 margin:10px 15px; 1875 padding:0; 1876 text-transform:uppercase; 1877 border-bottom:1px solid gainsboro; 1878} 1879 1880#tb *, 1881#qv * { 1882 font-size:inherit; 1883} 1884 1885#tb .download-box, 1886#qv .download-box { 1887 padding:0 0 0 15px; 1888} 1889 1890#tb .download-box .filename, 1891#qv .download-box .filename { 1892 font-size:11px; 1893 margin:4px 4px 10px; 1894 color:#666; 1895} 1896 1897 1898/* Dev guide quicknav */ 1899 1900.sidebox-wrapper { 1901 float:right; 1902 clear:right; 1903 margin:0 0 0 20px; 1904 padding:0 0 20px; 1905} 1906 1907.sidebox { 1908 width:226px; 1909 font-size:13px; 1910 line-height:18px; 1911 border-left:4px solid #99CC00; 1912 float:right; 1913 padding:0 0 0 10px; 1914 margin:0 0 1em 20px; 1915} 1916 1917.sidebox h2, 1918.sidebox h3, 1919.sidebox h4, 1920.sidebox h5 { 1921 font-weight:bold; 1922 margin:0 0 10px; 1923 line-height: 16px; 1924} 1925 1926.sidebox * { 1927 font-size:inherit; 1928} 1929 1930.sidebox > *:last-child { 1931 margin-bottom:0; 1932} 1933 1934#tb ol, 1935#tb ul, 1936#qv ul { 1937 margin:0 15px 10px 35px; 1938} 1939 1940#qv ol { 1941 list-style:none; 1942 margin:0 15px 15px; 1943 font-size:inherit; 1944 line-height:inherit; 1945} 1946 1947#tb ol ol, 1948#tb ul ul, 1949#qv ol ol, 1950#qv ul ul, 1951.sidebox ol ol, 1952.sidebox ul ul { 1953 margin-bottom:0; 1954} 1955 1956#qv ol ol { 1957 margin:3px 0 3px 15px; 1958} 1959 1960.sidebox p, 1961#qv p, 1962#tb p { 1963 margin: 0 0 10px; 1964} 1965 1966/* related resources blocks in checklists */ 1967 1968/* related resources sections that have dynamic content */ 1969 1970 1971 1972h3.rel-resources { 1973margin:1.25em auto; 1974} 1975 1976/* -------------------------------------------------------------------------- 1977Form 1978*/ 1979.article form { 1980 margin: 0 0 20px; 1981} 1982.article form .form-required { 1983 color: #dd4b39; 1984} 1985.article form fieldset { 1986 margin: 0 0 20px; 1987 padding: 0; 1988} 1989.article form legend { 1990 display: block; 1991 line-height: 1.5; 1992 margin: 0; 1993 padding: 0; 1994} 1995/* 1996.article form ol, .article form ul { 1997 margin: 0 0 0 1em; 1998 padding: 0 0 0 1em; 1999} 2000[dir='rtl'] .article form ol, [dir='rtl'] .article form ul { 2001 margin: 0 1em 0 0; 2002 padding: 0 1em 0 0; 2003} 2004.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form 2005ul ul { 2006 list-style: none; 2007 margin: 0; 2008 padding: 0; 2009} 2010.article form li { 2011 margin: 0 0 20px; 2012} 2013.article form li li { 2014 margin: 0 0 5px; 2015} 2016*/ 2017.article form label { 2018 display: block; 2019 margin: 0 0 5px; 2020 padding: 0; 2021} 2022.article form input[type='text'], .article form select, .article form textarea, .article form 2023.checkbox-group, .article form .radio-group { 2024 margin-bottom: 15px; 2025} 2026.checkbox-group input { 2027 width: 13px; 2028 height: 13px; 2029 background: #fff; 2030 border: solid 1px #c6c6c6; 2031 float: left; 2032} 2033.article form .checkbox-group, .article form .radio-group { 2034 display: block 2035} 2036.article form select { 2037 border: solid 1px #ebebeb; 2038 border-top-color: #ddd; 2039 -webkit-appearance: none; 2040 background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat; 2041 height: 30px; 2042 color: #222; 2043 line-height: normal; 2044 padding: 5px; 2045 width: 130px; 2046} 2047 2048.article form .browse .browse-msg { 2049 font-size: 11.5px; 2050} 2051.article form .browse .button-secondary { 2052 height: auto; 2053 line-height: 25px; 2054 font-size: 11px; 2055 padding: 0 8px; 2056 margin: 0 10px 15px 0; 2057} 2058.article form input[type='text'], .article form textarea { 2059 border: 1px solid #ebebeb; 2060 border-top-color: #dcdcdc; 2061 color: #222; 2062 line-height: normal; 2063 padding: 6px 10px; 2064 width: 300px; 2065} 2066.article form textarea { 2067 height: 150px; 2068} 2069.article form input[type='text']:focus, .article form textarea:focus { 2070 border-color: #33B5E5; 2071 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 2072 -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 2073 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 2074 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 2075 outline: 0; 2076} 2077.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled { 2078 color: #999; 2079} 2080.article form input[type='text'][disabled], .article form textarea[disabled] { 2081 background-color: #ebebeb; 2082} 2083form .form-error input[type='text'], form .form-error textarea { 2084 border-color: #dd4b39; 2085 margin-right: 20px; 2086} 2087.aside { 2088 -moz-border-radius: 2px; 2089 -webkit-border-radius: 2px; 2090 border-radius: 2px; 2091 margin: 10px 0; 2092 padding: 20px; 2093 color: #666; 2094 position: relative; 2095 background: #f9f9f9; 2096} 2097/* 2098.aside, .notification, .promo { 2099 -moz-border-radius: 2px; 2100 -webkit-border-radius: 2px; 2101 border-radius: 2px; 2102 margin: 10px 0; 2103 padding: 10px; 2104 position: relative; 2105} 2106.aside>:first-child, .notification>:first-child, .promo>:first-child { 2107 margin-top: 0; 2108} 2109.aside>:last-child, .notification>:last-child, .promo>:last-child { 2110 margin-bottom: 0; 2111} 2112.aside { 2113 background: #f9f9f9; 2114} 2115.notification { 2116 background: #fffbe4; 2117 border-color: #f8f6e6; 2118} 2119.promo { 2120 background: #f6f9ff; 2121 border-color: #eff2f9; 2122} 2123*/ 2124 2125/* SDK TOS styles */ 2126 2127div.sdk-terms { 2128 white-space: pre-wrap; 2129 word-wrap: break-word; 2130 font-family: inherit; 2131 font-size: inherit; 2132 padding: 10px; 2133 height: 370px; 2134 width: 738px; 2135 border: 1px solid #444; 2136 background: transparent; 2137 overflow:auto; 2138 margin:0 0 10px; 2139} 2140 2141div.sdk-terms.fullsize { 2142 padding: 0; 2143 height: auto; 2144 width: auto; 2145 border:none; 2146} 2147 2148div.sdk-terms h3, 2149div.sdk-terms h2 { 2150 margin:0; 2151} 2152 2153div#sdk-terms-form { 2154 padding:0 0 0 10px; 2155} 2156 2157div#sdk-terms-form input { 2158 display:inline; 2159 margin:4px 4px 4px 0; 2160} 2161 2162 2163/* -------------------------------------------------------------------------- 2164Code Style 2165*/ 2166pre { 2167 margin:0 0 1em 0; 2168 padding: 1em; 2169 overflow: auto; 2170 border: solid 1px #ddd; 2171 background: #f7f7f7; 2172} 2173.str { color: #800; } /* Code string */ 2174.kwd { color: #008; } 2175.typ { color: #606; } 2176.lit { color: #066; } 2177.pun { color: #660; } 2178.pln { color: #000; } 2179.tag { color: #008; } 2180.atn { color: #828; } 2181.atv { color: #800; } /* XML string */ 2182.dec { color: #606; } 2183 2184/* -------------------------------------------------------------------------- 2185Three-Pane 2186*/ 2187/* Package Nav & Classes Nav */ 2188.three-pane { 2189 position: relative; 2190 border-top: solid 1px #ebebeb; 2191} 2192#packages-nav .js-pane, 2193#classes-nav .js-pane { 2194 overflow:visible; 2195} 2196#packages-nav { 2197 height:270px; 2198 max-height: inherit; 2199 overflow: hidden; 2200 position: relative; 2201} 2202#classes-nav { 2203 overflow: hidden; 2204 position: relative; 2205} 2206#packages-nav ul, #classes-nav ul { 2207 list-style-type: none; 2208 margin: 10px 0 20px 0; 2209 padding: 0; 2210} 2211#classes-nav li { 2212 font-weight: bold; 2213 margin: 5px 0; 2214} 2215#packages-nav li, 2216#classes-nav li li { 2217 margin: 0; 2218} 2219#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 2220#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited { 2221 padding: 0 0 0 4px; 2222} 2223#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 2224#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited, 2225#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited { 2226 color: #222; 2227 font-weight: normal; 2228} 2229#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 2230#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited { 2231 display: block; 2232} 2233#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected 2234a:visited, 2235#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected 2236a:visited, 2237#nav-tree li div.selected { 2238 font-weight: 500; 2239 color: #0099cc; 2240 background-color:#fff; } 2241 #packages-nav li.selected ul li a, 2242 #classes-nav li.selected ul li a { 2243 /* don't highlight child items */ 2244 color: #555555; } 2245#nav-tree li div.selected a { 2246 font-weight: 500; 2247 color: #0099cc; 2248} 2249#nav-swap { 2250 height:30px; 2251 border-top:1px solid #ccc; 2252} 2253#nav-swap a { 2254 display:inline-block; 2255 height:100%; 2256 color: #222; 2257 font-size: 12px; 2258 padding: 5px 0 5px 5px; 2259} 2260 2261#nav-swap .fullscreen { 2262 float: right; 2263 width: 24px; 2264 height: 24px; 2265 text-indent: -1000em; 2266 padding:0; 2267 margin:3px 5px 0; 2268 background: url(../images/fullscreen.png) no-repeat -24px 0; 2269} 2270#nav-swap .fullscreen.disabled { 2271 background-position: 0 0; 2272} 2273#nav-swap .fullscreen:hover, 2274#nav-swap .fullscreen:focus { 2275 cursor:pointer; 2276} 2277 2278 2279/* nav tree */ 2280#side-nav, #swapper, 2281#nav-tree, #tree-list { 2282 overflow:hidden; 2283 margin-left:0; 2284} 2285 2286#devdoc-nav { 2287 overflow:visible !important; /* To keep the "to top" button visible */ 2288} 2289 2290#nav-tree ul { 2291 list-style:none; 2292 padding:0; 2293 margin:10px 0; 2294} 2295 2296#nav-tree ul li div { 2297 padding:0 0 0 4px; 2298} 2299 2300#side-nav #nav-tree ul li a, 2301#side-nav #nav-tree ul li span.no-children { 2302 padding: 0; 2303 margin: 0; 2304} 2305 2306#nav-tree .plus { 2307 margin: 0 3px 0 0; 2308} 2309 2310#nav-tree ul ul { 2311 list-style: none; 2312 margin: 0; 2313 padding: 0 0 0 0; 2314} 2315 2316#nav-tree ul li { 2317 margin: 0; 2318 padding: 0 0 0 0; 2319 white-space: nowrap; 2320} 2321 2322#nav-tree .children_ul { 2323 padding:0; 2324 margin:0; 2325} 2326#nav-tree .children_ul li div { 2327 padding:0 0 0 10px; 2328} 2329#nav-tree .children_ul .children_ul li div { 2330 padding:0 0 0 20px; 2331} 2332 2333#nav-tree a.nolink { 2334 color: #222; 2335 text-decoration: none; 2336} 2337 2338#nav-tree span.label { 2339 width: 100%; 2340} 2341 2342#nav-tree { 2343 overflow-x: auto; 2344 overflow-y: scroll; 2345 outline:0; 2346} 2347 2348 2349/* Content */ 2350#doc-col { 2351 margin-right:0; 2352} 2353#doc-content-container { 2354 margin-left: 291px 2355} 2356#doc-header, #doc-content { 2357 padding: 1em 2em; 2358} 2359#doc-header { 2360 background: #f7f7f7; 2361} 2362#doc-header h1 { 2363 line-height: 0; 2364 margin-bottom: 15px; 2365} 2366#api-info-block { 2367 float: right; 2368 font-weight: bold; 2369} 2370#api-info-block a, #api-info-block a:active, #api-info-block a:visited { 2371 color: #222; 2372} 2373#api-info-block a:hover, #api-info-block a:focus { 2374 color: #33B5E5; 2375} 2376#api-nav-header { 2377 height:19px; /* plus 16px padding = 35; same as #nav li */ 2378 font-size:14px; 2379 padding: 8px 0; 2380 margin: 0; 2381 border-bottom: 1px solid #CCC; 2382 background:#e9e9e9; 2383 background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */ 2384 2385} 2386#api-nav-title { 2387 padding:0 5px; 2388 white-space:nowrap; 2389} 2390 2391#api-level-toggle { 2392 float:right; 2393 padding:0 5px; 2394} 2395 2396#api-level-toggle label { 2397 margin:0; 2398 vertical-align:top; 2399 line-height: 19px; 2400 font-size:13px; 2401 height: 19px; 2402} 2403 2404#api-level-toggle .select-wrapper { 2405 width: 35px; 2406 display: inline-block; 2407 overflow: hidden; 2408} 2409#api-level-toggle select { 2410 border: 0; 2411 appearance:none; 2412 -moz-appearance:none; 2413 -webkit-appearance: none; 2414 background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat; 2415 color: #222; 2416 height: 19px; 2417 line-height: 19px; 2418 padding: 0; 2419 margin:1px 0 0 0; 2420 width:150%; 2421 font-size:13px; 2422 vertical-align:top; 2423 outline:0; 2424} 2425 2426 2427/* Toggle for revision notes and stuff */ 2428div.toggle-content.closed .toggle-content-toggleme { 2429 display:none; 2430} 2431 2432#jd-content img.toggle-content-img { 2433 margin:0 5px 5px 0; 2434} 2435 2436div.toggle-content-toggleme { 2437 padding:0 0 0 15px; 2438} 2439 2440 2441/* API LEVEL FILTERED MEMBERS */ 2442 2443.absent, 2444.absent a:link, 2445.absent a:visited, 2446.absent a:hover, 2447.absent * { 2448 color:#bbb !important; 2449 cursor:default !important; 2450 text-decoration:none !important; 2451} 2452#devdoc-nav li.absent.selected, 2453#devdoc-nav li.absent.selected *, 2454#devdoc-nav div.label.absent.selected, 2455#devdoc-nav div.label.absent.selected * { 2456 background-color:#eaeaea !important; 2457} 2458.absent h4.jd-details-title, 2459.absent h4.jd-details-title * { 2460 background-color:#f6f6f6 !important; 2461} 2462.absent img { 2463 opacity: .3; 2464 filter: alpha(opacity=30); 2465 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 2466} 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476/* JQUERY RESIZABLE STYLES */ 2477.ui-resizable { position: relative; } 2478.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; } 2479.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; } 2480/*body .ui-resizable-disabled .ui-resizable-handle { display: none; } 2481body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/ 2482.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0; 2483border-bottom: solid 1px #ededed; 2484 background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; } 2485/* 2486.ui-resizable-e { 2487cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid 24881px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; } 2489*/ 2490 2491/* -------------------------------------------------------------------------- 2492Lightbox 2493*/ 2494.lightbox { 2495 width: 769px; 2496 padding: 1.5em; 2497 margin: 0 auto; 2498 border: solid 1px #dcdcdc; 2499 background: #fff; 2500 -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1); 2501 -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1); 2502 box-shadow: 1px 1px 5px rgba(0,0,0,0.1) 2503} 2504.lightbox .header { 2505 float: left; 2506 width: 720px; 2507 margin: -10px 20px 10px 0; 2508} 2509.lightbox .close { 2510 float: right; 2511 width: 10px; 2512 height: 10px; 2513 margin: -10px -10px 10px 0; 2514 text-indent: -1000em; 2515 background: url(../images/close.png) no-repeat 0 0; 2516} 2517.lightbox .close:hover, .lightbox .close:focus { 2518 background-position: -10px 0; 2519} 2520 2521/* -------------------------------------------------------------------------- 2522Styles for samples browser 2523*/ 2524 2525#codesample-wrapper { 2526 width:100000px; /* super wide to contain floats, but doesn't cause scroll */ 2527 overflow:visible; 2528} 2529pre#codesample-block { 2530 float:left; 2531 overflow:visible; 2532 background:transparent; 2533 border:none; 2534} 2535pre#codesample-block a.number { 2536 display:none; 2537} 2538pre#codesample-block .code-line:hover { 2539 background:#e7e7e7; 2540} 2541pre#codesample-line-numbers { 2542 float:left; 2543 width:2em; 2544 background:transparent; 2545 border:none; 2546 border-right:1px solid #ccc; 2547 padding-left:0; 2548 font-family:monospace; 2549 text-align:right; 2550 -webkit-touch-callout: none; 2551 -webkit-user-select: none; 2552 -khtml-user-select: none; 2553 -moz-user-select: -moz-none; 2554 -ms-user-select: none; 2555 user-select: none; 2556} 2557pre#codesample-line-numbers a { 2558 color:#999; 2559} 2560pre#codesample-line-numbers.hidden { 2561 display:none; 2562} 2563pre#codesample-block span.code-line { 2564 width:100%; 2565 display:inline-block; 2566} 2567 2568/* 2569Styles for displaying image or video resources in samples browser. 2570Resources are marked as no-display if they exceed the size limit. 2571*/ 2572div#codesample-resource img, div#codesample-resource video { 2573 border: 1px solid #ececec; 2574} 2575 2576div#codesample-resource.noDisplay div { 2577 border: 1px solid #ececec; 2578 width:120px; 2579 margin-bottom:4px; 2580 padding:20px; 2581} 2582 2583div#codesample-resource .noDisplay-message:after { 2584 font-style:italic; 2585 font-size:12px; 2586 content: 'This resource is not available for browsing. To view it, please download the project.'; 2587} 2588 2589/* 2590Styles for project structure (treeview) page 2591*/ 2592.structure-dir { 2593background-image:url(../../assets/images/folder.png); 2594background-repeat:no-repeat; 2595background-position:16px 2px; 2596 margin:.25em 0 0 0; 2597 padding:0 0 0 0; 2598} 2599 2600.structure-toggleme { 2601 margin:0 0 0 3em; 2602 padding:0 0 0 0; 2603 text-decoration:none; 2604} 2605 2606.structure-java{ 2607background-image:url(../../assets/images/file-java.png); 2608background-repeat:no-repeat; 2609background-position:0px 2px; 2610 margin:.3em 0 0 0; 2611 padding:.3em 0 .3em 22px; 2612} 2613 2614.structure-file { 2615background-image:url(../../assets/images/file-generic.png); 2616background-repeat:no-repeat; 2617background-position:0px 2px; 2618 margin:.3em 0 0 0; 2619 padding:.3em 0 .3em 22px; 2620} 2621 2622.structure-xml { 2623background-image:url(../../assets/images/file-xml.png); 2624background-repeat:no-repeat; 2625background-position:0px 2px; 2626 margin:.3em 0 0 0; 2627 padding:.3em 0 .25em 22px; 2628} 2629 2630.structure-img { 2631background-image:url(../../assets/images/file-image.png); 2632background-repeat:no-repeat; 2633background-position:0px 2px; 2634 margin:.3em 0 0 0; 2635 padding:.3em 0 .25em 22px; 2636} 2637 2638.structure-manifest { 2639background-image:url(../../assets/images/file-manifest.png); 2640background-repeat:no-repeat; 2641 margin:.0 0 0 1.25em; 2642 padding:0 0 0 22px; 2643 text-decoration:none; 2644} 2645 2646#jd-content .structure-toggle-img { 2647 margin:.5em 0 0 0; 2648padding-right:2.1em; 2649} 2650 2651.dirInfo { 2652 margin-left:2em; 2653} 2654 2655.structure-dir a { 2656 text-decoration:none; 2657} 2658 2659.structure-manifest a { 2660 text-decoration: none; 2661} 2662.structure-file a { 2663 text-decoration: none; 2664} 2665 2666.sampleEmbed { 2667 background-color:rgb(249, 249, 249); 2668} 2669 2670.sampleEmbed ol.lineNumbers { 2671 list-style-type: decimal; 2672 padding-left:1em; 2673} 2674 2675.sampleEmbed ol.lineNumbers li { 2676border-left:1px solid #ddd; 2677border-right:1px solid #ddd; 2678color:gray; 2679background-color:#f7f7f7; 2680margin:0 0 0 24px; 2681padding: 2px 2px 2px 6px; 2682} 2683 2684.sampleEmbed ol.lineNumbers li:hover { 2685background: #efefef; 2686} 2687 2688.samples-nav li a { 2689 overflow: hidden; 2690 text-overflow: ellipsis; 2691 white-space: nowrap; 2692} 2693 2694/* -------------------------------------------------------------------------- 2695Styles for raw formatted line numbers (not used with listformatted version) 2696div.sampleLine div.lineNumber { 2697 display: inline; 2698} 2699div.sampleLine div.lineCode { 2700 display: inline; 2701 padding-left:6px; 2702} 2703div.sampleLine { 2704 padding:0; 2705 margin:0; 2706}*/ 2707 2708/* -------------------------------------------------------------------------- 2709Butterbar 2710*/ 2711#butterbar-wrapper { 2712 position:absolute; 2713 top:0; 2714 left:0; 2715 width:100%; 2716} 2717#butterbar { 2718 width:940px; 2719 margin:0 auto; 2720} 2721#butterbar-message { 2722 background-color:#f80; 2723 float:right; 2724 font-size:12px; 2725 font-weight:bold; 2726 padding:0 10px; 2727 border-radius: 0 0 5px 5px; 2728} 2729#butterbar-message a {color:#fff !important} 2730#butterbar-message a:hover {text-decoration:underline;} 2731 2732/* -------------------------------------------------------------------------- 2733Misc 2734*/ 2735 2736 2737.clearfix:before, .clearfix:after { 2738 content: ""; 2739 display: table 2740} 2741.clearfix:after { 2742 clear: both 2743} 2744.clearfix { 2745 *zoom: 1 2746} 2747table.blank th, table.blank td { 2748 border: 0; 2749 background: none 2750} 2751.caption { 2752 margin: 0.5em 0 2em 0; 2753 color: #000; 2754 font-size: 11.5px; 2755} 2756 2757.nolist, .nolist ul, .nolist ol { 2758 list-style:none; 2759 margin-left:0; 2760} 2761#tb .nolist { 2762 margin-left:15px; 2763} 2764 2765dl.xml>dt { 2766 text-transform:uppercase; 2767} 2768dl.xml dl.attr { 2769 margin-top:0; 2770} 2771 2772pre.classic { 2773 background-color:transparent; 2774 border:none; 2775 padding:0; 2776} 2777 2778p.img-caption { 2779 margin: -10px 0 20px; 2780 font-size:13px; 2781 color:#666; 2782} 2783 2784div.figure, 2785div.figure-right { 2786 float:right; 2787 clear:right; 2788 margin:10px 0 0 0; 2789 padding:0 0 0 20px; 2790 /* width must be defined w/ an inline style matching the image width */ 2791} 2792 2793div.figure-left { 2794 float:left; 2795 clear:left; 2796 margin:10px 0 0 0; 2797 padding:0 20px 0 0; 2798 /* width must be defined w/ an inline style matching the image width */ 2799} 2800 2801img.frame { 2802 border:1px solid #DDD; 2803 padding:4px; 2804} 2805 2806p.table-caption { 2807 margin: 0 0 4px 0; 2808 font-size:13px; 2809 color:#666; 2810} 2811 2812p.code-caption { 2813 margin-bottom: 4px; 2814 font: 12px/1.5 monospace; 2815 color:#666; 2816} 2817 2818div.note, 2819div.caution, 2820div.warning { 2821 margin: 0 0 15px; 2822} 2823 2824p.note, div.note, 2825p.caution, div.caution, 2826p.warning, div.warning { 2827 padding: 0 0 0 10px; 2828 border-left: 4px solid; 2829} 2830 2831p.note, div.note { 2832 border-color: #258AAF; 2833} 2834 2835p.caution, div.caution { 2836 border-color: #FF8800; 2837} 2838 2839p.warning, div.warning { 2840 border-color: #ff4443; 2841} 2842 2843div.note.design { 2844 border-left: 4px solid #33B5E5; 2845} 2846 2847div.note.develop { 2848 border-left: 4px solid #F80; 2849} 2850 2851div.note.distribute { 2852 border-left: 4px solid #9C0; 2853} 2854 2855.note p, .caution p, .warning p { 2856 margin:0 0 5px; 2857} 2858 2859.note p:last-child, .caution p:last-child, .warning p:last-child { 2860 margin-bottom:0; 2861} 2862 2863body.about blockquote { 2864 display:block; 2865 float:right; 2866 width:280px; 2867 font-size:20px; 2868 font-style:italic; 2869 line-height:24px; 2870 color:#33B5E5; 2871 margin:0 0 20px 30px; 2872} 2873 2874div.design-announce p { 2875 margin:0 0 10px; 2876} 2877 2878.expandable { 2879 height:34px; 2880 padding-left:20px; 2881 position:relative; 2882} 2883.expandable:before { 2884 content: ''; 2885 background-image: url(../images/styles/disclosure_down.png); 2886 background-repeat:no-repeat; 2887 background-position: -12px -9px; 2888 width: 20px; 2889 height: 20px; 2890 display: inline-block; 2891 position: absolute; 2892 top: 0; 2893 left: 0; } 2894} 2895.expandable.expanded:before { 2896 background-image: url(../images/styles/disclosure_up.png); 2897} 2898 2899/* notice box for cross links between Design/Develop docs */ 2900a.notice-developers-video, 2901a.notice-developers, 2902a.notice-designers-video, 2903a.notice-designers { 2904 float:right; 2905 clear:right; 2906 width:238px; 2907 min-height:50px; 2908 margin:0 0 20px 20px; 2909 border:1px solid #ddd; 2910} 2911a.notice-developers-video.wide, 2912a.notice-developers.wide, 2913a.notice-designers-video.wide, 2914a.notice-designers.wide { 2915 width:278px; 2916} 2917a.notice-developers-video div, 2918a.notice-developers div, 2919a.notice-designers-video div, 2920a.notice-designers div { 2921 min-height:40px; 2922 background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px; 2923 background-size:40px 40px; 2924 padding:10px 10px 10px 60px; 2925} 2926a.notice-designers div { 2927 background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px; 2928 background-size:40px 40px; 2929} 2930a.notice-designers-video div { 2931 background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px; 2932 background-size:40px 40px; 2933} 2934a.notice-developers-video div { 2935 background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px; 2936 background-size:40px 40px; 2937} 2938a.notice-developers-video:hover, 2939a.notice-developers:hover, 2940a.notice-designers-video:hover, 2941a.notice-designers:hover { 2942 background:#eee; 2943} 2944a.notice-developers-video h3, 2945a.notice-developers h3, 2946a.notice-designers-video h3, 2947a.notice-designers h3 { 2948 font-size:13px; 2949 line-height:18px; 2950 font-weight:bold; 2951 text-transform:uppercase; 2952 color:#000 !important; 2953 margin:0 0 1px; 2954} 2955a.notice-developers-video p, 2956a.notice-developers p, 2957a.notice-designers-video p, 2958a.notice-designers p { 2959 margin:0; 2960 line-height:14px; 2961} 2962a.notice-developers-video.left, 2963a.notice-developers.left, 2964a.notice-designers-video.left, 2965a.notice-designers.left { 2966 margin-left:0; 2967 float:left; 2968} 2969 2970 2971/* hide nested list items; companion to hideNestedLists() */ 2972.hide-nested li ol, 2973.hide-nested li ul { 2974 display:none; 2975} 2976 2977a.header-toggle { 2978 display:block; 2979 float:right; 2980 text-transform:uppercase; 2981 font-size:.8em !important; 2982 font-weight:normal; 2983 margin-top:2px; 2984} 2985 2986 2987/* ----------------------------------------------- 2988good/bad example containers 2989*/ 2990 2991div.example-block { 2992 background-repeat: no-repeat; 2993 background-position:10px 8px; 2994 background-color:#ccc; 2995 padding:4px; 2996 margin:.8em auto 1.5em 2em; 2997 width:260px; 2998 float:right; 2999} 3000/* red container */ 3001.example-block.bad { 3002 background-image: url(/images/example-bad.png); 3003 background-color:#f4cccc; 3004} 3005/* green container */ 3006.example-block.good { 3007 background-image: url(/images/example-good.png); 3008 background-color:#d9ead3; 3009} 3010/* container heading div */ 3011#jd-content .example-block .heading { 3012 font-weight:bold; 3013 margin:6px 0 9px 36px; 3014 padding:6px auto; 3015} 3016/* container image (if any) */ 3017#jd-content .example-block img { 3018 margin:0; 3019 padding:0px; 3020} 3021 3022.example-block table { 3023 margin:0; 3024} 3025 3026/* ----------------------------------------------- 3027Dialog box for popup messages 3028*/ 3029 3030div.dialog { 3031 height:0; 3032 margin:0 auto; 3033} 3034 3035div.dialog>div { 3036 z-index:99; 3037 position:fixed; 3038 margin:70px 0; 3039 width: 391px; 3040 height: 200px; 3041 background: #F7F7F7; 3042-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); 3043-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); 3044box-shadow: 0 0 15px rgba(0,0,0,0.5); 3045} 3046/* IE6 can't position fixed */ 3047* html div.dialog div { position:absolute; } 3048 3049 3050div#deprecatedSticker { 3051 display:none; 3052 z-index:99; 3053 position:fixed; 3054 right:15px; 3055 top:114px; 3056 margin:0; 3057 padding:1em; 3058 background:#FFF; 3059 border:1px solid #dddd00; 3060 box-shadow:-5px 5px 10px #ccc; 3061 -moz-box-shadow:-5px 5px 10px #ccc; 3062 -webkit-box-shadow:-5px 5px 10px #ccc; 3063} 3064 3065div#naMessage { 3066 display:none; 3067 width:555px; 3068 height:0; 3069 margin:0 auto; 3070} 3071 3072div#naMessage div { 3073 z-index:99; 3074 width:450px; 3075 position:fixed; 3076 margin:50px 0; 3077 padding:4em 4em 3em; 3078 background:#FFF; 3079 border:1px solid #999; 3080 box-shadow:-10px 10px 40px #888; 3081 -moz-box-shadow:-10px 10px 40px #888; 3082 -webkit-box-shadow:-10px 10px 40px #888; 3083} 3084/* IE6 can't position fixed */ 3085* html div#naMessage div { position:absolute; } 3086 3087div#naMessage strong { 3088 font-size:1.1em; 3089} 3090 3091 3092/* -------------------------------------------------------------------------- 3093Slideshow Controls & Next/Prev 3094*/ 3095.slideshow-next, .slideshow-prev { 3096 width: 20px; 3097 height: 36px; 3098 text-indent: -1000em; 3099} 3100.slideshow-container { 3101 margin: 2em 0; 3102} 3103.slideshow-container:before, .slideshow-container:after { 3104 content: ""; 3105 display: table; 3106 clear: both; 3107} 3108a.slideshow-next, a.slideshow-next:visited { 3109 3110 float: right; 3111 3112 background: url(../images/arrow-right.png) no-repeat 0 0 3113 3114} 3115 3116a.slideshow-prev, a.slideshow-prev:visited { 3117 3118 float: left; 3119 3120 background: url(../images/arrow-left.png) no-repeat 0 0 3121 3122} 3123 3124.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus { 3125 3126 background-position: 0 -36px 3127 3128} 3129 3130.slideshow-next:active, .slideshow-prev:active { 3131 3132 background-position: 0 -72px 3133 3134} 3135.slideshow-nav { 3136 width: 74px; 3137 margin: 0 auto; 3138} 3139.slideshow-nav a, .slideshow-nav a:visited { 3140 display: inline-block; 3141 width: 12px; 3142 height: 12px; 3143 margin: 0 2px 20px 2px; 3144 background: #ccc; 3145 -webkit-border-radius: 50%; 3146 -moz-border-radius: 50%; 3147 border-radius: 50%; 3148} 3149.slideshow-nav a:hover, .slideshow-nav a:focus { 3150 3151 background: #33B5E5 3152} 3153 3154.slideshow-nav a:active { 3155 3156 background: #1e799a; 3157 background: #ebebeb; 3158 -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 3159 -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 3160 box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 3161} 3162.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited { 3163 background: #33B5E5 3164} 3165/* -------------------------------------------------------------------------- 3166Tabs 3167*/ 3168ul.tabs { 3169 padding: 0; 3170 margin: 2em 0 0 0; 3171} 3172ul.tabs:before, ul.tabs:after { 3173 content: ""; 3174 display: table; 3175 clear: both; 3176} 3177ul.tabs li { 3178 list-style-type: none; 3179 float: left; 3180} 3181ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited { 3182 display: block; 3183 height: 36px; 3184 line-height: 36px; 3185 padding: 0 15px; 3186 margin-right: 2px; 3187 color: #222; 3188 -moz-border-radius-topleft: 2px; 3189 -moz-border-radius-topright: 2px; 3190 -moz-border-radius-bottomright: px; 3191 -moz-border-radius-bottomleft: px; 3192 -webkit-border-radius: 2px 2px px px; 3193 border-radius: 2px 2px px px; 3194 border-top: solid 1px #ebebeb; 3195 border-left: solid 1px #ebebeb; 3196 border-right: solid 1px #ebebeb; 3197 background-color: #fff; 3198 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 3199 background-image: -webkit-linear-gradient(top, #ffffff, #fafafa); 3200 background-image: -moz-linear-gradient(top, #ffffff, #fafafa); 3201 background-image: -ms-linear-gradient(top, #ffffff, #fafafa); 3202 background-image: -o-linear-gradient(top, #ffffff, #fafafa); 3203 background-image: linear-gradient(top, #ffffff, #fafafa); 3204 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', 3205EndColorStr='#fafafa'); 3206} 3207ul.tabs li a:hover { 3208 color: #33B5E5; 3209} 3210ul.tabs li a.selected { 3211 height: 37px; 3212 color: #33B5E5; 3213 background-color: #f7f7f7; 3214 background-image: none; 3215 border-color: #ddd; 3216} 3217.tab-content { 3218 padding: 1.2em; 3219 margin: -1px 0 2em 0; 3220 -webkit-border-radius: 2px; 3221 -moz-border-radius: 2px; 3222 border-radius: 2px; 3223 border: solid 1px #ddd; 3224 background: #f7f7f7; 3225} 3226/* -------------------------------------------------------------------------- 3227Feature Boxes 3228*/ 3229.feature-box { 3230 width: 291px; 3231 height: 200px; 3232 position: relative; 3233 background: #F7F7F7; 3234} 3235.box-border .top, .box-border .bottom, .box-border .left, .box-border .right { 3236 z-index: 100; 3237 position: absolute; 3238 background-color: #aaa; 3239} 3240.box-border .top, .box-border .bottom { 3241 width: 291px; 3242 height: 1px; 3243} 3244.dialog .box-border .top, 3245.dialog .box-border .bottom { width:391px; } 3246 3247.box-border .left, .box-border .right { 3248 width: 1px; 3249 height: 8px; 3250} 3251.box-border .top { top: 0; left: 0 } 3252.box-border .top .left { top: 1px; left: 0 } 3253.box-border .top .right { top: 1px; right: 0 } 3254.box-border .bottom .left { top: -8px; left: 0 } 3255.box-border .bottom { top: 200px; left: 0 } 3256.box-border .bottom .right { top: -8px; right: 0 } 3257 3258.feature-box h4, 3259.dialog h4 { 3260 margin: 15px 18px 10px; 3261 padding:0; 3262} 3263 3264.feature-box p, 3265.dialog p { 3266 margin: 10px 18px; 3267 padding:0; 3268} 3269.feature-box .link, 3270.dialog .link { 3271 border-top: 1px solid #dedede; 3272 bottom: 0; 3273 position: absolute; 3274 width: inherit; 3275} 3276.feature-box a, .feature-box h4, 3277.dialog a, .dialog h4 { 3278 -webkit-transition: color .4s ease; 3279 -moz-transition: color .4s ease; 3280 -o-transition: color .4s ease; 3281 transition: color .4s ease; 3282} 3283.feature-box:hover { 3284 cursor: pointer; 3285} 3286.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover 3287.left, .feature-box:hover .right { 3288 background-color: #33B5E5; 3289} 3290.feature-box:hover h4, .feature-box:hover a { 3291 color: #33B5E5; 3292} 3293/* -------------------------------------------------------------------------- 3294Page-Specific Styles 3295*/ 3296.colors { 3297 position: relative; 3298 float: left; 3299 width: 92px; 3300 margin: 40px 0 20px; 3301} 3302.colors div { 3303 color: #fff; 3304 font-size: 11.5px; 3305 width: 82px; 3306 height: 82px; 3307 margin-top:-30px; 3308 line-height: 82px; 3309 text-align: center; 3310 border: solid 5px #fff; 3311 -webkit-border-radius: 50%; 3312 -moz-border-radius: 50%; 3313 border-radius: 50%; 3314} 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329/* ########### REFERENCE DOCS ################## */ 3330 3331#packages-nav h2, 3332#classes-nav h2 { 3333 font-size:18px; 3334 margin:0; 3335 padding:0 0 0 4px; 3336} 3337 3338#jd-header { 3339 padding: 0 0 12px; 3340 margin: 20px 0 12px; 3341 font-size:12px; 3342 padding-bottom:12px; 3343 border-bottom:solid 1px #ccc; 3344} 3345 3346#jd-header h1 { 3347 margin:0; 3348 padding:0 0 6px 0; 3349} 3350 3351/* not sure if this is needed in the ref docs, disabling for now 3352.jd-descr h2 { 3353 margin:16px 0; 3354} 3355*/ 3356 3357/* page-top-right container for reference pages (holds 3358links to summary tables) */ 3359#api-info-block { 3360 font-size:12px; 3361 margin:20px 0 0; 3362 padding:0 10px 6px; 3363 font-weight:normal; 3364 float:right; 3365 text-align:right; 3366 color:#999; 3367 max-width:80%; 3368 font-size: 12px; 3369 line-height:14px; 3370} 3371 3372#api-info-block div.api-level { 3373 font-weight:bold; 3374 font-size:inherit; 3375 float:none; 3376 color:#222; 3377 padding:0; 3378 margin:0; 3379} 3380 3381/* inheritance table */ 3382.jd-inheritance-table { 3383 border-spacing:0; 3384 margin:0; 3385 padding:0; 3386 font-size:12px; 3387 line-height:14px; 3388 background-color:transparent; 3389} 3390.jd-inheritance-table tr td { 3391 border: none; 3392 margin: 0; 3393 padding: 0; 3394 background-color:transparent; 3395} 3396.jd-inheritance-table .jd-inheritance-space { 3397 font-weight:bold; 3398 width:1em; 3399} 3400.jd-inheritance-table .jd-inheritance-interface-cell { 3401 padding-left: 17px; 3402} 3403 3404 3405 3406.jd-sumtable a { 3407 text-decoration:none; 3408} 3409 3410.jd-sumtable a:hover { 3411 text-decoration:underline; 3412} 3413 3414/* the link inside a sumtable for "Show All/Hide All" */ 3415.toggle-all { 3416 display:block; 3417 float:right; 3418 font-weight:normal; 3419 font-size:0.9em; 3420} 3421 3422/* adjustments for in/direct subclasses tables */ 3423.jd-sumtable.jd-sumtable-subclasses { 3424 margin: 1em 0 0 0; 3425 max-width:968px; 3426 background-color:transparent; 3427 font-size:13px; 3428} 3429 3430/* extra space between end of method name and open-paren */ 3431.sympad { 3432 margin-right: 2px; 3433} 3434 3435/* right alignment for the return type in sumtable */ 3436.jd-sumtable .jd-typecol { 3437 text-align:right; 3438} 3439 3440/* adjustments for the expando table-in-table */ 3441.jd-sumtable-expando { 3442 margin:.5em 0; 3443 padding:0; 3444} 3445 3446/* a div that holds a short description */ 3447.jd-descrdiv { 3448 padding:3px 1em 0 1em; 3449 margin:0; 3450 border:0; 3451} 3452 3453#jd-content img.jd-expando-trigger-img { 3454 padding:0 4px 4px 0; 3455 margin:0; 3456} 3457 3458.jd-sumtable-subclasses div#subclasses-direct, 3459.jd-sumtable-subclasses div#subclasses-indirect { 3460 margin:0 0 0 13px; 3461} 3462 3463 3464 3465/********* MEMBER REF *************/ 3466 3467 3468.jd-details { 3469/* border:1px solid #669999; 3470 padding:4px; */ 3471 margin:0 0 1em; 3472} 3473 3474/* API reference: a container for the 3475.tagdata blocks that make up the detailed 3476description */ 3477.jd-details-descr { 3478 padding:0; 3479 margin:.5em .25em; 3480} 3481 3482/* API reference: a block containing 3483a detailed description, a params table, 3484seealso list, etc */ 3485.jd-tagdata { 3486 margin:.5em 1em; 3487} 3488 3489.jd-tagdata p { 3490 margin:0 0 1em 1em; 3491} 3492 3493/* API reference: adjustments to 3494the detailed description block */ 3495.jd-tagdescr { 3496 margin:.25em 0 .75em 0; 3497} 3498 3499.jd-tagdescr ol, 3500.jd-tagdescr ul { 3501 margin:0 2.5em; 3502 padding:0; 3503} 3504 3505.jd-tagdescr table, 3506.jd-tagdescr img { 3507 margin:.25em 1em; 3508} 3509 3510.jd-tagdescr li { 3511margin:0 0 .25em 0; 3512padding:0; 3513} 3514 3515/* API reference: heading marking 3516the details section for constants, 3517attrs, methods, etc. */ 3518h4.jd-details-title { 3519 font-size:1.15em; 3520 background-color: #E2E2E2; 3521 margin:1.5em 0 .6em; 3522 padding:3px 95px 3px 3px; /* room for api-level */ 3523} 3524body.google h4.jd-details-title { 3525 background-color: #FFF; 3526 padding-top:5px; 3527 border-top: 1px solid #ccc; 3528} 3529body.google table.jd-sumtable th { 3530 background-color: #FFF; 3531 color:#000; 3532} 3533 3534h4.jd-tagtitle { 3535 margin:0; 3536} 3537 3538h4 .normal { 3539 font-weight:normal; 3540} 3541 3542/* API reference: heading for "Parameters", "See Also", etc., 3543in details sections */ 3544h5.jd-tagtitle { 3545 margin:0 0 .25em 0; 3546 font-size:1em; 3547} 3548 3549.jd-tagtable { 3550 margin:0; 3551 background-color:transparent; 3552 width:auto; 3553} 3554 3555.jd-tagtable td, 3556.jd-tagtable th { 3557 border:none; 3558 background-color:#fff; 3559 vertical-align:top; 3560 font-weight:normal; 3561 padding:2px 10px; 3562} 3563 3564.jd-tagtable th { 3565 font-style:italic; 3566} 3567 3568/* Inline api level indicator for methods */ 3569div.api-level { 3570 font-size:.8em; 3571 font-weight:normal; 3572 color:#999; 3573 float:right; 3574 padding:0 8px 0; 3575 margin-top:-30px; 3576} 3577 3578table.jd-tagtable td, 3579table.jd-tagtable th { 3580 background-color:transparent; 3581} 3582 3583table.jd-tagtable th { 3584 color:inherit; 3585} 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609/* SEARCH FILTER */ 3610 3611.menu-container { 3612 position:relative; 3613} 3614#search_autocomplete { 3615 font-weight:normal; 3616} 3617 3618.search_filtered_wrapper.reference { 3619 width: 193px; 3620 float: right; 3621} 3622.search_filtered_wrapper.docs { 3623 width:875px; 3624 float: left; 3625 position:absolute; 3626 top:26px; 3627 right:66px; 3628} 3629.suggest-card { 3630 position:relative; 3631 width:170px; 3632 min-height:90px; 3633 padding:5px; 3634 border: solid 1px #C5C5C5; 3635 background: white; 3636 top: 15px; 3637 margin-right:-5px; 3638 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); 3639 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 3640 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 3641} 3642.suggest-card.reference { 3643 position:absolute; 3644 z-index:999; 3645 min-width:171px; /* +padding and border makes this match input width */ 3646 min-height:93px; /* add 3px because this has 1 not 4px top border */ 3647 width:auto; 3648 top:41px; 3649 margin:0; 3650} 3651.suggest-card.develop { 3652 z-index:997; 3653 border-top: solid 4px #F80; 3654 float:right; 3655} 3656.suggest-card.design { 3657 z-index:996; 3658 border-top: solid 4px #33b5e5; 3659 float:right; 3660} 3661.suggest-card.distribute { 3662 z-index:995; 3663 border-top: solid 4px #9C0; 3664 float:right; 3665} 3666.child-card { 3667 width:100%; 3668} 3669.suggest-card.dummy { 3670 width:172px; 3671 float:right; 3672 border:0; 3673 background:transparent; 3674 -moz-box-shadow: none; 3675 -webkit-box-shadow: none; 3676 box-shadow: none; 3677} 3678 3679ul.search_filtered { 3680 min-width:100%; 3681 list-style: none; 3682 margin: 0 0 5px; 3683 padding: 0; 3684} 3685.search_filtered .jd-selected { 3686 background:#efefef; 3687 cursor:pointer; 3688} 3689.search_filtered .jd-selected, 3690.search_filtered .jd-selected a { 3691 color:#09C !important; 3692} 3693 3694.no-display { 3695 display: none; 3696} 3697 3698.search_filtered li.jd-autocomplete { 3699 font-size: 0.81em; 3700 border: none; 3701 margin: 0 0 2px; 3702 padding: 0; 3703 line-height:1.5em; 3704} 3705 3706.search_filtered li a { 3707 padding:0 5px; 3708 color:#222 !important; 3709 display:inline-block; 3710 line-height:12px; 3711} 3712 3713.search_filtered li.header { 3714 font-weight:bold; 3715 color:#444; 3716 border: none; 3717 margin: 8px 0 2px; 3718 padding:1px 5px; 3719 line-height:1.5em; 3720} 3721.search_filtered li.header.small { 3722 font-size:0.85em; 3723} 3724 3725.suggest-card.reference 3726.search_filtered li.header { 3727 color:#aaa; 3728 font-size: 0.81em; 3729} 3730 3731.search_filtered li.header:first-child { 3732 margin: 0 0 2px; 3733} 3734 3735.show-item { 3736 display: table-row; 3737} 3738.hide-item { 3739 display: hidden; 3740} 3741 3742 3743 3744 3745 3746/* SEARCH RESULTS */ 3747 3748 3749#leftSearchControl .gsc-twiddle { 3750 background-image : none; 3751} 3752 3753#leftSearchControl td, #searchForm td { 3754 border: 0px solid #000; 3755 padding:0; 3756} 3757 3758#leftSearchControl .gsc-resultsHeader .gsc-title { 3759 padding-left : 0px; 3760 font-weight : bold; 3761 font-size : 13px; 3762 color:#006699; 3763 display : none; 3764} 3765 3766#leftSearchControl .gsc-resultsHeader div.gsc-results-selector { 3767 display : none; 3768} 3769 3770#leftSearchControl .gsc-resultsRoot { 3771 padding-top : 6px; 3772} 3773 3774#leftSearchControl div.gs-visibleUrl-long { 3775 display : block; 3776 color:#006699; 3777} 3778 3779#leftSearchControl .gsc-webResult { 3780 padding:0 0 20px 0; 3781} 3782 3783.gsc-webResult div.gs-visibleUrl-short, 3784table.gsc-branding, 3785.gsc-clear-button { 3786 display : none; 3787} 3788 3789.gsc-cursor-box .gsc-cursor div.gsc-cursor-page, 3790.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results, 3791#leftSearchControl a, 3792#leftSearchControl a b { 3793 color:#006699; 3794} 3795 3796.gsc-resultsHeader { 3797 display: none; 3798} 3799 3800/* Disable built in search forms */ 3801.gsc-control form.gsc-search-box { 3802 display : none; 3803} 3804table.gsc-search-box { 3805 margin:6px 0 0 0; 3806 border-collapse:collapse; 3807} 3808 3809td.gsc-input { 3810 padding:0 2px; 3811 width:100%; 3812 vertical-align:middle; 3813} 3814 3815input.gsc-input { 3816 border:1px solid #BCCDF0; 3817 width:99%; 3818 padding-left:2px; 3819 font-size:.95em; 3820} 3821 3822td.gsc-search-button { 3823 text-align: right; 3824 padding:0; 3825 vertical-align:top; 3826} 3827 3828 3829#searchResults { 3830 overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll 3831(it doesn't) */ 3832 height:auto; 3833} 3834 3835#searchResults .gsc-control { 3836 position:relative; 3837 width:auto; 3838 padding:0 0 10px; 3839} 3840 3841#searchResults .gsc-tabsArea { 3842 position:relative; 3843 white-space:nowrap; 3844 float:left; 3845 width:200px; 3846} 3847 3848#searchResults .gsc-above-wrapper-area { 3849 display:none; 3850} 3851 3852#searchResults .gsc-resultsbox-visible { 3853 float:left; 3854 width:720px; 3855 margin-left:20px; 3856} 3857 3858#searchResults .gsc-tabHeader { 3859 padding: 3px 6px; 3860 position:relative; 3861 width:auto; 3862 display:block; 3863} 3864 3865#searchResults h2#searchTitle { 3866 padding:0; 3867 margin:5px 0; 3868 border:none; 3869} 3870 3871#searchResults h2#searchTitle em { 3872 font-style:normal; 3873 color:#33B5E5; 3874} 3875 3876#searchResults .gsc-table-result { 3877 margin:5px 0 10px 0; 3878 background-color:transparent; 3879} 3880#searchResults .gs-web-image-box, .gs-promotion-image-box { 3881 width:120px; 3882} 3883#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image { 3884 max-width:120px; 3885} 3886 3887#searchResults .gsc-table-result .gsc-thumbnail { 3888 padding:0 20px 0 0; 3889} 3890 3891#searchResults td { 3892 background-color:transparent; 3893} 3894 3895#searchResults .gsc-expansionArea { 3896 position:relative; 3897} 3898#searchResults .gsc-tabsArea .gsc-cursor-box { 3899 width:200px; 3900 padding:20px 0 0 1px; 3901} 3902#searchResults .gsc-cursor-page { 3903 display:inline-block; 3904 float:left; 3905 margin:-1px 0 0 -1px; 3906 padding:0; 3907 height:27px; 3908 width:27px; 3909 text-align:center; 3910 line-height:2; 3911} 3912 3913#searchResults .gsc-tabHeader.gsc-tabhInactive, 3914#searchResults .gsc-cursor-page { 3915 text-decoration:none; 3916 color:#258AAF; 3917 border: solid 1px #DADADA; 3918} 3919 3920#searchResults .gsc-tabHeader.gsc-tabhInactive:hover, 3921#searchResults .gsc-cursor-page:hover { 3922 border-color: #DBDBDB; 3923 background-color: #F3F3F3; 3924 background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC)); 3925 background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC); 3926 background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC); 3927 background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC); 3928 background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC); 3929 background-image: linear-gradient(top, #F9F9F9, #ECECEC); 3930 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', 3931EndColorStr='#ececec'); 3932 color: #33B5E5; 3933} 3934 3935#searchResults .gsc-tabHeader.gsc-tabhActive, 3936#searchResults .gsc-tabHeader.gsc-tabhActive:hover, 3937#searchResults .gsc-cursor-page.gsc-cursor-current-page, 3938#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover { 3939 color:#fff; 3940 background-color: #09C; 3941 background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C)); 3942 background-image: -webkit-linear-gradient(top, #2FADDB, #09C); 3943 background-image: -moz-linear-gradient(top, #2FADDB, #09C); 3944 background-image: -ms-linear-gradient(top, #2FADDB, #09C); 3945 background-image: -o-linear-gradient(top, #2FADDB, #09C); 3946 background-image: linear-gradient(top, #2FADDB, #09C); 3947 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c'); 3948 border: 1px solid #3990AB; 3949 z-index:100; 3950} 3951 3952 3953 3954 3955 3956/************ STICKY NAV BAR ******************/ 3957 3958#header-wrapper { 3959 background: #f9f9f9; 3960 margin: 0 -10px 0 -10px; 3961 padding: 31px 10px 0px 10px; 3962 position: relative; 3963} 3964#header-wrapper #nav-x div.wrap { 3965 max-width: 940px; 3966 height: 38px; 3967} 3968#header-wrapper #nav-x ul.nav-x li { 3969 margin-right: 36px !important; 3970 margin-top: 5px; 3971 margin-bottom: 0px; 3972 height: 30px; 3973} 3974#header-wrapper #nav-x > div.wrap ul.nav-x li.active { 3975 color: #669900; 3976 border-bottom: 3px solid #669900; 3977} 3978#header-wrapper #nav-x > div.wrap ul.nav-x li.active a { 3979 color: #669900; 3980} 3981#header-wrapper #nav-x > div.wrap ul.nav-x a { 3982 font-size: 14.5px; 3983} 3984#header-wrapper .developer-console-btn { 3985 float: right; 3986 background: #fefefe; 3987 border-radius: 4px; 3988 padding: 8px 14px; 3989 box-shadow: 1px 1px 0px #7a7a7a; 3990 font-size: 14px; 3991 margin-top: -6px; 3992 cursor: pointer; 3993 color: #464646; 3994 margin-right: 20px; 3995} 3996/* not currently used */ 3997#header-wrapper .shadow { 3998 width: 1034px; 3999 height: 4px; 4000 position: absolute; 4001 left: 50%; 4002 margin-left: -517px; 4003 bottom: -4px; 4004 background-image: url(../images/header-shadow.png); 4005} 4006 4007#context { 4008 clear: both; 4009 padding-top: 14px; 4010} 4011#context .breadcrumb { 4012 float: left; 4013 margin-bottom: 10px; 4014} 4015#context .util { 4016 float: right; 4017 margin-right: 20px; 4018} 4019 4020.breadcrumb { 4021 list-style: none; 4022 margin: 0; 4023 padding: 0; 4024 position: relative; 4025} 4026.breadcrumb li { 4027 float: left; 4028 padding: 0 20px 0 0; 4029 color: #000; 4030 white-space: nowrap; 4031} 4032.breadcrumb li a { 4033 color: #000; 4034} 4035.breadcrumb li:after { 4036 content: url(../images/breadcrumb.png); 4037 position: relative; 4038 top: 1px; 4039 left: 10px; 4040 width: 5px; 4041 height: 10px; 4042} 4043.breadcrumb li.current { 4044 font-weight: 700; 4045} 4046.breadcrumb li.current:after { 4047 display: none; 4048} 4049 4050/* Sticky Nav overrides */ 4051.sticky-menu { 4052 position: fixed; 4053 width: 940px; 4054 height: 0px; 4055 z-index: 51; 4056 top: 12px; 4057} 4058#sticky-header { 4059 display: none; 4060 padding: 0 10px; 4061 position: fixed; 4062 background: #f9f9f9; 4063 top: 0px; 4064 left: 0px; 4065 right: 0px; 4066 height: 45px; 4067 box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); 4068 border-bottom: 1px solid #a5c43a; 4069 z-index: 50; 4070} 4071#sticky-header.design { 4072 border-bottom: 1px solid #33b5e5; 4073} 4074#sticky-header.develop { 4075 border-bottom: 1px solid #F80; 4076} 4077#sticky-header.distribute { 4078 border-bottom: 1px solid #9C0; 4079} 4080#sticky-header.about { 4081 border-bottom: 1px solid #9933CC; 4082} 4083#sticky-header > div { 4084 overflow: hidden; 4085 *zoom: 1; 4086 width: 940px; 4087 margin: 0 auto; 4088 clear: both; 4089 padding-top: 9px; 4090} 4091#sticky-header > div .logo { 4092 float: left; 4093 width: 26px; 4094 height: 25px; 4095 background: url(../images/dac_logo.png); 4096 background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x); 4097 z-index: 52; 4098 position: relative; 4099} 4100#sticky-header > div .top { 4101 float: left; 4102 width: 38px; 4103 height: 38px; 4104 position: relative; 4105 background: url(../images/styles/gototop.png); 4106 z-index: 52; 4107} 4108#sticky-header > div .breadcrumb { 4109 float: left; 4110 padding: 0 0 0 10px; 4111 border-left: 1px solid #d2d2d2; 4112 line-height: 24px; 4113 font-size: 14px; 4114 position: relative; 4115 top: 0px; 4116 z-index: 52; 4117} 4118 4119 4120} 4121 4122 4123 4124 4125 4126 4127 4128/*********** PREVIOUSLY dac-styles.css ***************/ 4129 4130 4131#header { 4132 border-bottom:0; 4133} 4134 4135#header .wrap { 4136 max-width:940px; 4137 height:41px; 4138 border-bottom:1px solid; 4139 border-color: #ccc; 4140 position:relative; 4141} 4142 4143.about #header .wrap { 4144 border-color: #9933CC; 4145} 4146 4147.design #header .wrap { 4148 border-color: #33b5e5; 4149} 4150 4151.develop #header .wrap { 4152 border-color: #F80; 4153} 4154 4155.distribute #header .wrap { 4156 border-color: #9C0; 4157} 4158 4159.logo a { 4160 float:left; 4161} 4162 4163#header .logo { 4164 margin-top: -6px; 4165 margin-left: 0px; 4166 margin-bottom:0px; 4167 width: 160px; 4168 padding-right:10px; 4169} 4170 4171 4172#header-wrap .logo.wear-logo { 4173 width:220px; 4174 margin:0; 4175 padding:0; 4176 margin-bottom:22px; 4177} 4178#header-wrap .logo.wear-logo img { 4179 padding:0 0 0 10px; 4180} 4181 4182.search { 4183 height:25px; 4184 margin-top: -3px; 4185 margin-bottom: 0px; 4186} 4187 4188 4189 4190/* Quicknav */ 4191.btn-quicknav { 4192 width:20px; 4193 height:28px; 4194 float:left; 4195 margin-left:6px; 4196 padding-right:10px; 4197 position:relative; 4198 cursor:pointer; 4199 border-right:1px solid #CCC; 4200} 4201 4202.btn-quicknav a { 4203 zoom:1; 4204 position:absolute; 4205 top:13px; 4206 left:5px; 4207 display:block; 4208 text-indent:-9999em; 4209 width:10px; 4210 height:5px; 4211 background:url(../images/quicknav_arrow.png) no-repeat; 4212} 4213 4214.btn-quicknav a.arrow-active { 4215 background-position: 0 -5px; 4216 display:none; 4217} 4218 4219#header-wrap.quicknav a.arrow-inactive { 4220 display:none; 4221} 4222 4223.btn-quicknav.active a.arrow-active { 4224 display:block; 4225} 4226 4227.nav-x li { 4228 display:block; 4229 float:left; 4230 margin-right:45px; 4231 -webkit-transition: all 0.25s linear; 4232 -moz-transition: all 0.25s linear; 4233 -ms-transition: all 0.25s linear; 4234 -o-transition: all 0.25s linear; 4235 transition: all 0.25s linear; 4236} 4237 4238#header-wrap.quicknav .nav-x li { 4239 min-width:160px; 4240 margin-right:20px; 4241} 4242 4243#header-wrap.quicknav li.last { 4244 margin-right:0px; 4245} 4246 4247#quicknav { 4248 float:none; 4249 clear:both; 4250 margin-left:180px; 4251 margin-top:-30px; 4252 display:none; 4253 overflow:hidden; 4254} 4255 4256#header-wrap.quicknav #quicknav { 4257 4258} 4259 4260#quicknav ul { 4261 margin:10px 0; 4262 padding:0; 4263} 4264 4265#quicknav ul li.design { 4266 border-top:1px solid #33b5e5; 4267} 4268 4269#quicknav ul li.develop { 4270 border-top:1px solid #FF8800; 4271} 4272 4273#quicknav ul li.distribute { 4274 border-top:1px solid #99cc00; 4275} 4276 4277#quicknav ul li { 4278 display:block; 4279 float:left; 4280 margin:0 20px 0 0; 4281 min-width:140px; 4282} 4283 4284#quicknav ul li.last { 4285 margin-right:0px; 4286} 4287 4288#quicknav ul li ul li { 4289 float:none; 4290} 4291 4292#quicknav ul li ul li a { 4293 color:#222; 4294} 4295 4296#quicknav ul li li ul, 4297#quicknav ul li li ul li { 4298 margin:0; 4299} 4300 4301#quicknav ul li li ul li:before { 4302 content:"\21B3"; 4303} 4304 4305#header-wrap { 4306 -webkit-transition: all 0.25s ease-out; 4307 -moz-transition: all 0.25s ease-out; 4308 -ms-transition: all 0.25s ease-out; 4309 -o-transition: all 0.25s ease-out; 4310 transition: all 0.25s ease-out; 4311 4312} 4313 4314#header-wrap.quicknav { 4315 height:196px; 4316 4317} 4318 4319/* SEARCH AND MORE */ 4320.search { 4321 position: absolute; 4322 width: 50px; 4323 height:28px; 4324 display: block; 4325 margin-top:-3px; 4326 margin-bottom:7px; 4327 overflow:hidden; 4328 z-index:100; 4329 right:54px; 4330 -webkit-transition: width 0.4s ease; 4331 -moz-transition: width 0.4s ease; 4332 -o-transition: width 0.4s ease; 4333 transition: width 0.4s ease; 4334} 4335 4336.search #search-btn { 4337 width:50px; 4338 height:28px; 4339 background:url(../images/icon_search.png) no-repeat; 4340 float:left; 4341} 4342 4343.search-inner { 4344 width:245px; 4345} 4346 4347.search:hover, .search.active { 4348 width:245px; 4349} 4350 4351.search .bottom, .search .left, .search .right { 4352 position: absolute; 4353 background-color: #a2a2a2 4354} 4355 4356.search .bottom { 4357 width: 214px; 4358 height: 1px; 4359 top: 24px; 4360 left: 0 4361} 4362 4363.search .left, .search .right { 4364 height: 5px; 4365 width: 1px 4366} 4367 4368.search .left { 4369 top: 22px; 4370 left: 56px; 4371 background-color:#CCC; 4372} 4373 4374.search .right { 4375 top: 22px; 4376 left: 238px; 4377 background-color:#CCC; 4378} 4379 4380.search form { 4381 margin-top: 2px; 4382 width: 162px; 4383 float:left; 4384} 4385 4386.search form input { 4387 color: #2f2f2f; 4388 font-size: 0.95em; 4389 width: 178px; 4390 border: none; 4391 margin-left: 6px; 4392 z-index: 1500; 4393 position: relative; 4394 background-color: transparent; 4395 border-bottom:1px solid #CCC; 4396 padding:0 0 0 4px; 4397 outline:none; 4398 height:24px; 4399} 4400 4401.search:hover form input { 4402 border-bottom:1px solid #33B5E5; 4403} 4404 4405.search:hover .bottom, .search:hover .left, .search:hover .right { 4406 background-color: #33b5e5; 4407} 4408 4409.search:hover #search-btn { 4410 background-position: 0 -28px 4411} 4412 4413.search form input:focus { 4414 color: #222; 4415 font-weight: bold 4416} 4417 4418.moremenu { 4419 float: right; 4420 position: relative; 4421 width: 50px; 4422 height:28px; 4423 display: block; 4424 margin-top:-3px; 4425 margin-bottom:7px; 4426 overflow:hidden; 4427 -webkit-transition: width 0.25s ease; 4428 -moz-transition: width 0.25s ease; 4429 -o-transition: width 0.25s ease; 4430 transition: width 0.25s ease; 4431} 4432 4433.moremenu #more-btn { 4434 width:40px; 4435 height:28px; 4436 background:url(../images/icon_more.png) no-repeat; 4437 border-left:1px solid #CCC; 4438 float:left; 4439 cursor:pointer; 4440} 4441 4442.moremenu:hover #more-btn { 4443 background-position:0 -28px; 4444} 4445 4446.morehover { 4447 position:absolute; 4448 right:6px; 4449 top:-9px; 4450 width:40px; 4451 height:35px; 4452 z-index:99; 4453 overflow:hidden; 4454 4455 -webkit-opacity:0; 4456 -moz-opacity:0; 4457 -o-opacity:0; 4458 opacity:0; 4459 4460 -webkit-transform-origin:100% 0%; 4461 -moz-transform-origin:100% 0%; 4462 -o-transform-origin:100% 0%; 4463 transform-origin:100% 0%; 4464 4465 -webkit-transition-property: -webkit-opacity; 4466 -webkit-transition-duration: .25s; 4467 -webkit-transition-timing-function:ease; 4468 4469 -moz-transition-property: -moz-opacity; 4470 -moz-transition-duration: .25s; 4471 -moz-transition-timing-function:ease; 4472 4473 -o-transition-property: -o-opacity; 4474 -o-transition-duration: .25s; 4475 -o-transition-timing-function:ease; 4476 4477 transition-property: opacity; 4478 transition-duration: .25s; 4479 transition-timing-function:ease; 4480} 4481 4482.morehover:hover, 4483.morehover.hover { 4484 opacity:1; 4485 height:385px; 4486 width:268px; 4487 -webkit-transition-property:height, -webkit-opacity; 4488} 4489 4490.morehover .top { 4491 width:268px; 4492 height:39px; 4493 background:url(../images/more_top.png) no-repeat; 4494} 4495 4496.morehover .mid { 4497 width:228px; 4498 background:url(../images/more_mid.png) repeat-y; 4499 padding:10px 20px 0 20px; 4500} 4501 4502.morehover .mid .header { 4503 border-bottom:1px solid #ccc; 4504 font-weight:bold; 4505} 4506 4507.morehover .bottom { 4508 width:268px; 4509 height:6px; 4510 background:url(../images/more_bottom.png) no-repeat; 4511} 4512 4513.morehover ul { 4514 margin:10px 10px 20px 0; 4515} 4516 4517.morehover ul li { 4518 list-style:none; 4519} 4520 4521.morehover ul li.active a, 4522.morehover ul li.active a:hover { 4523 color:#222 !important; 4524} 4525 4526.morehover ul li.active img { 4527 margin-right:4px; 4528} 4529 4530 4531 4532 4533/* MARQUEE */ 4534.slideshow-container { 4535 width:100%; 4536 overflow:hidden; 4537 position:relative; 4538} 4539.slideshow-container .slideshow-prev { 4540 position:absolute; 4541 top:50%; 4542 left:0px; 4543 margin-top:-36px; 4544 z-index:99; 4545} 4546.slideshow-container .slideshow-next { 4547 position:absolute; 4548 top:50%; 4549 margin-top:-36px; 4550 z-index:99; 4551 right:0px; 4552} 4553 4554.slideshow-container .pagination { 4555 position:absolute; 4556 bottom:20px; 4557 width:100%; 4558 text-align:center; 4559 z-index:99; 4560} 4561.slideshow-container .pagination ul { 4562 margin:0; 4563} 4564.slideshow-container .pagination ul li{ 4565 display: inline-block; 4566 width:12px; 4567 height:12px; 4568 text-indent:-8000px; 4569 list-style:none; 4570 margin: 0 2px; 4571 border-radius:6px; 4572 background-color:#ccc; 4573 cursor:pointer; 4574 -webkit-transition:color .5s ease-in; 4575 -moz-transition:color .5s ease-in; 4576 -o-transition:color .5s ease-in; 4577 transition:color .5s ease-in; 4578} 4579.slideshow-container .pagination ul li:hover { 4580 background-color:#999; 4581} 4582.slideshow-container .pagination ul li.active { 4583 background-color:#33b5e5; 4584} 4585.slideshow-container .pagination ul li.active:hover { 4586 background-color:#33b5e5; 4587} 4588.slideshow-container ul li { 4589 display:inline; 4590 list-style:none; 4591} 4592 4593 4594#landing h1 { 4595 margin:17px 0 20px 0 !important; 4596} 4597 4598a.download-sdk { 4599 float:right; 4600 margin:-10px 0; 4601 height:30px; 4602 padding-top:4px; 4603 padding-bottom:0px; 4604} 4605 4606#nav-x { 4607 padding-top: 13px; 4608} 4609 4610#nav-x .wrap { 4611 min-height:32px; 4612} 4613 4614#nav-x .wrap, 4615#searchResults.wrap { 4616 max-width:940px; 4617 border-bottom:1px solid #CCC; 4618} 4619 4620#searchResults.wrap #leftSearchControl { 4621 min-height:700px 4622} 4623.nav-x { 4624 margin-left:0; 4625 margin-bottom:0; 4626} 4627 4628 4629 4630 4631 4632 4633 4634 4635 4636 4637/* 4638 * CSS Styles that are needed by jScrollPane for it to operate correctly. 4639 */ 4640 4641.jspContainer { 4642 overflow: hidden; 4643 position: relative; 4644} 4645 4646.jspPane { 4647 position: absolute; 4648 width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */ 4649} 4650 4651.jspVerticalBar { 4652 position: absolute; 4653 top: 0; 4654 right: 0; 4655 width: 4px; 4656 height: 100%; 4657 background: #f5f5f5; 4658} 4659 4660.jspHorizontalBar { 4661 position: absolute; 4662 bottom: 0; 4663 left: 0; 4664 width: 100%; 4665 height: 4px; 4666 background: #f5f5f5; 4667} 4668 4669.jspVerticalBar *, 4670.jspHorizontalBar * { 4671 margin: 0; 4672 padding: 0; 4673} 4674.jspCap { 4675 display: block; 4676} 4677 4678.jspVerticalBar .jspCap { 4679 height: 4px; 4680} 4681 4682.jspHorizontalBar .jspCap { 4683 width: 0; 4684 height: 100%; 4685} 4686 4687.jspHorizontalBar .jspCap { 4688 float: left; 4689} 4690 4691.jspTrack { 4692 position: relative; 4693} 4694 4695.jspDrag { 4696 background: #bbb; 4697 position: relative; 4698 top: 0; 4699 left: 0; 4700 cursor: pointer; 4701} 4702 4703.jspDrag:hover, 4704.jspDrag:active { 4705 border-color: #09c; 4706 background-color: #4cadcb; 4707 background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb)); 4708 background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb); 4709 background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb); 4710 background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb); 4711 background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb); 4712 background-image: linear-gradient(left, #5dbcd9, #4cadcb); 4713 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb'); 4714} 4715 4716.jspHorizontalBar .jspTrack, 4717.jspHorizontalBar .jspDrag { 4718 float: left; 4719 height: 100%; 4720} 4721 4722.jspArrow { 4723 background: #999; 4724 text-indent: -20000px; 4725 display: block; 4726 cursor: pointer; 4727} 4728 4729.jspArrow.jspDisabled { 4730 cursor: default; 4731 background: #ccc; 4732} 4733 4734.jspVerticalBar .jspArrow { 4735 height: 16px; 4736} 4737 4738.jspHorizontalBar .jspArrow { 4739 width: 16px; 4740 float: left; 4741 height: 100%; 4742} 4743 4744.jspVerticalBar .jspArrow:focus { 4745 outline: none; 4746} 4747 4748.jspCorner { 4749 float: left; 4750 height: 100%; 4751} 4752 4753/* Yuk! CSS Hack for IE6 3 pixel bug :( */ 4754* html .jspCorner { 4755 margin: 0 -3px 0 0; 4756} 4757/******* end of jscrollpane *********/ 4758 4759 4760 4761 4762 4763/************ DEVELOP HOMEPAGE ******************/ 4764 4765/* Slideshow */ 4766.slideshow-develop { 4767 height: 316px; 4768 width: 940px; 4769 position: relative; 4770 overflow:hidden; 4771} 4772.slideshow-develop .frame { 4773 width: 940px; 4774 height: 316px; 4775} 4776.slideshow-develop img.play { 4777 max-width:350px; 4778 max-height:240px; 4779 margin:20px 0 0 90px; 4780 -webkit-transform: perspective(800px ) rotateY( 35deg ); 4781 box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4782 -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4783 -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4784} 4785.slideshow-develop img.play.no-shadow { 4786 box-shadow: none; 4787 -moz-box-shadow: none; 4788 -webkit-box-shadow: none; 4789} 4790.slideshow-develop img.play.no-transform { 4791 -webkit-transform: none; 4792} 4793.slideshow-develop a.slideshow-next { 4794 background: url(../images/arrow-right-develop.png); 4795} 4796.slideshow-develop a.slideshow-prev { 4797 background: url(../images/arrow-left-develop.png); 4798} 4799.slideshow-develop .content-right { 4800 float: left; 4801} 4802.slideshow-develop .content-right h2 { 4803 padding:0; 4804 margin-bottom:10px; 4805 border:none; 4806 font-size:24px; 4807} 4808.slideshow-develop .item { 4809 height: 300px; 4810 width: 940px; 4811} 4812.slideshow-develop .pagination ul li.active { 4813 background-color: #F80; 4814} 4815.slideshow-develop .pagination ul li.active:hover { 4816 background-color: #F80; 4817} 4818.slideshow-develop .item hr { 4819 margin:5px 0 10px; 4820} 4821.slideshow-develop .item p { 4822 margin:10px 0; 4823} 4824.slideshow-develop .item p.title-intro { 4825 position:absolute; 4826 margin:0; 4827} 4828 4829/* Feeds */ 4830.feed ul { 4831 margin: 0; 4832} 4833.feed .feed-nav { 4834 height: 25px; 4835 border-bottom: 1px solid #CCC; 4836} 4837.feed .feed-nav li { 4838 list-style: none; 4839 float: left; 4840 height: 21px; /* +4px bottom border = 25px; same as .feed-nav */ 4841 margin-right: 25px; 4842 cursor: pointer; 4843} 4844.feed .feed-nav li.active { 4845 color: #000; 4846 border-bottom: 4px solid #F80; 4847} 4848.feed .feed-container { 4849 overflow: hidden; 4850 width: 460px; 4851} 4852.feed .feed-container .feed-frame { 4853 width: 1000px; 4854} 4855.feed .feed-container .feed-frame ul { 4856 float: left; 4857 width:460px; 4858} 4859.feed .feed-container .feed-frame ul ul { 4860 float: none; 4861 margin:10px 0 0 30px; 4862} 4863.feed .feed-container .feed-frame li { 4864 list-style: none; 4865 margin: 20px 0 20px 0; 4866 width: 460px; 4867 height:93px; 4868} 4869.feed .feed-container .feed-frame li.playlist { 4870 height:auto; 4871} 4872.feed .feed-container .feed-frame li.playlist a { 4873 height:93px; 4874 display:block; 4875} 4876.feed .feed-container .feed-frame li.more { 4877 height:20px; 4878 margin:10px 0 5px 5px; 4879} 4880.feed .feed-container .feed-frame li.more a { 4881 height:inherit; 4882} 4883.feed .feed-container .feed-frame li.playlist-video { 4884 list-style: none; 4885 margin: 0; 4886 width: 460px; 4887 height:55px; 4888 font-size:12px; 4889} 4890.feed .feed-container .feed-frame li.playlist-video a { 4891 height:45px; 4892 padding:5px; 4893} 4894.feed .feed-container .feed-frame li.playlist-video h5 { 4895 font-size:12px; 4896 line-height:13px; 4897 margin:0; 4898} 4899.feed .feed-container .feed-frame li.playlist-video p { 4900 margin:5px 0 0; 4901 line-height:15px; 4902} 4903.feed-container .feed-frame div.feed-image { 4904 float: left; 4905 border: 1px solid #999; 4906 margin:0 20px 0 0; 4907 width:122px; 4908 height:92px; 4909 background:url('../images/blog-default.png') no-repeat 0 0; 4910 background-size:180px; 4911} 4912#jd-content .feed .feed-container .feed-frame li img { 4913 float: left; 4914 border: 1px solid #999; 4915 margin:0 20px 0 0; 4916 width:122px; 4917 height:92px; 4918} 4919#jd-content .feed .feed-container .feed-frame li.playlist-video img { 4920 width:inherit; 4921 height:inherit; 4922} 4923 4924.feed .feed-container .feed-frame li a, 4925.feed .feed-container .feed-frame li a:active { 4926 color:#555 !important; 4927} 4928 4929.feed .feed-container .feed-frame li a:hover, 4930.feed .feed-container .feed-frame li a:hover * { 4931 color:#7AA1B0 !important; 4932} 4933 4934/* Video player */ 4935#player-wrapper { 4936 display:none; 4937 margin: -1px auto 0; 4938 position: relative; 4939 width: 940px; 4940 height: 0px; 4941} 4942#player-frame { 4943 background: #EFEFEF; 4944 border: 1px solid #CCC; 4945 padding: 0px 207px; 4946 z-index: 10; /* stay above marque, but below search suggestions */ 4947 width: 525px; 4948 height: 330px; 4949 position: relative; 4950} 4951 4952 4953 4954/************ DEVELOP TOPIC CONTAINERS ************/ 4955 4956.landing-banner, 4957.landing-docs { 4958 margin:20px 0; 4959} 4960.landing-banner > div:first-child, 4961.landing-docs > div:first-child, 4962.landing-docs > .col-12 { 4963 margin-left:0; 4964 min-height:280px; 4965} 4966.landing-banner.short > div { 4967 min-height:50px; 4968} 4969.landing-banner > div:last-child, 4970.landing-docs > div:last-child, 4971.landing-docs > .col-12 { 4972 margin-right:0; 4973} 4974 4975.landing-banner > div > *:last-child { 4976 margin-bottom:0; 4977} 4978.landing-banner h1 { 4979 margin-top:16px; 4980 padding-bottom:24px; 4981} 4982.landing-docs, 4983.landing-banner { 4984 clear:both; 4985 overflow:hidden; 4986} 4987.landing-docs h3 { 4988 font-size:14px; 4989 line-height:21px; 4990 color:#555; 4991 text-transform:uppercase; 4992 border-bottom:1px solid #CCC; 4993 margin:0 0 20px; 4994} 4995.landing-docs a { 4996 color:#333 !important; 4997} 4998 4999.landing-docs a:hover, 5000.landing-docs a:hover * { 5001 color:#7AA1B0 !important 5002} 5003 5004.landing-docs .normal-links a { 5005 color:#258aaf !important; 5006} 5007 5008.plusone { 5009 float:right; 5010} 5011 5012 5013 5014.next-docs { 5015 border-top:1px solid #ccc; 5016 margin:40px 0 0; 5017 padding:5px 0 0; 5018 clear:left; 5019 overflow:hidden; 5020} 5021.next-docs div:first-child { 5022 margin-left:0; 5023} 5024.next-docs div:last-child { 5025 margin-right:0; 5026} 5027 5028.next-docs h2 { 5029 font-size:14px; 5030 line-height:21px; 5031 color:#555; 5032 text-transform:uppercase; 5033 border-bottom:none; 5034 margin:0 0 1em; 5035 padding:5px 0 0; 5036} 5037 5038 5039 5040/************* HOME/LANDING PAGE *****************/ 5041 5042.slideshow-home { 5043 height: 500px; 5044 width: 940px; 5045 border-bottom: 1px solid #CCC; 5046 position: relative; 5047 margin: 0; 5048} 5049.slideshow-home .frame { 5050 width: 940px; 5051 height: 500px; 5052} 5053.slideshow-home .content-left { 5054 float: left; 5055 text-align: center; 5056 vertical-align: center; 5057 margin: 0 0 0 35px; 5058} 5059.slideshow-home .content-right { 5060 margin: 80px 0 0 0; 5061} 5062.slideshow-home .content-right p { 5063 margin-bottom: 10px; 5064} 5065.slideshow-home .content-right p:last-child { 5066 margin-top: 15px; 5067} 5068.slideshow-home .content-right h1 { 5069 padding:0; 5070} 5071.slideshow-home .item { 5072 height: 500px; 5073 width: 940px; 5074} 5075.home-sections { 5076 padding: 30px 20px 20px; 5077 margin: 20px 0; 5078 background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9); 5079} 5080.home-sections ul { 5081 margin: 0; 5082} 5083.home-sections ul li { 5084 float: left; 5085 display: block; 5086 list-style: none; 5087 width: 170px; 5088 height: 35px; 5089 border: 1px solid #ccc; 5090 background: white; 5091 margin-right: 10px; 5092 border-radius: 1px; 5093 -webkit-border-radius: 1px; 5094 -moz-border-radius: 1px; 5095 box-shadow: 1px 1px 5px #EEE; 5096 -webkit-box-shadow: 1px 1px 5px #EEE; 5097 -moz-box-shadow: 1px 1px 5px #EEE; 5098 background: white; 5099} 5100.home-sections ul li:hover { 5101 background: #F9F9F9; 5102 border: 1px solid #CCC; 5103} 5104.home-sections ul li a, 5105.home-sections ul li a:hover { 5106 font-weight: bold; 5107 margin-top: 8px; 5108 line-height: 18px; 5109 float: left; 5110 width: 100%; 5111 text-align: center; 5112 color: #09c !important; 5113} 5114.home-sections ul li a { 5115 font-weight: bold; 5116 margin-top: 8px; 5117 line-height: 18px; 5118 float: left; 5119 width:100%; 5120 text-align:center; 5121} 5122.home-sections ul li img { 5123 float: left; 5124 margin: -8px 0 0 10px; 5125} 5126.home-sections ul li.last { 5127 margin-right: 0px; 5128} 5129.fullpage #footer { 5130 margin-top: -40px; 5131} 5132 5133/************ DISTRIBUTE PAGES ******************/ 5134 5135.article-detail #body-content { 5136 padding-top: 10px; 5137} 5138 5139/* A container for grid sets with uppercase h3 and rule */ 5140.dynamic-grid h3 { 5141 font-size:14px; 5142 line-height:21px; 5143 color:#555; 5144 text-transform:uppercase; 5145 border-bottom:1px solid #CCC; 5146 padding:8px 0 0 1px; 5147 margin-bottom:14px; 5148 clear:both; 5149} 5150 5151.top-right-float { 5152 float: right; 5153} 5154 5155.clearfloat { 5156 float: none; 5157 clear: both; 5158} 5159 5160.border-img { 5161 border: 1px solid #CCC; 5162} 5163 5164.center-img { 5165 margin: auto; 5166 text-align: center; 5167} 5168.center-img img { 5169 margin-bottom: 15px; 5170} 5171 5172.figure img, .border-img { 5173 margin-bottom: 15px; 5174} 5175 5176/************ RESOURCE CARDS ******************/ 5177 5178/* Resource cards, 12, 13, 16-col */ 5179 5180/* Basic card-styling with shadow */ 5181.resource-card { 5182 border-radius: 1px; 5183 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12); 5184 background: #fefefe; 5185} 5186 5187/* Styling for background image including tinting and section icons in stacks */ 5188.card-bg { 5189 display: block; 5190 position: absolute; 5191 vertical-align: top; 5192 width: 100%; 5193 left: 0; 5194 top: 0; 5195 background-size: cover; 5196 background-repeat: no-repeat; 5197 background-position: center; 5198 background-image: url(../images/resource-card-default-android.jpg); 5199} 5200.card-bg:after { 5201 content: ""; 5202 display: block; 5203 height: 100%; 5204 width: 100%; 5205 opacity: 1; 5206 background: rgba(0, 0, 0, 0.2); 5207 -webkit-transition: opacity 0.5s; 5208 -moz-transition: opacity 0.5s; 5209 -o-transition: opacity 0.5s; 5210 transition: opacity 0.5s; 5211} 5212.card-bg .card-section-icon { 5213 position: absolute; 5214 top: 50%; 5215 width: 100%; 5216 margin-top: -35px; 5217 text-align: center; 5218 padding-top: 65px; 5219 z-index: 100; 5220} 5221.card-bg .card-section-icon .icon { 5222 position: absolute; 5223 left: 50%; 5224 margin-left: -28px; 5225 top: 0px; 5226 width: 56px; 5227 height: 56px; 5228 background-repeat: no-repeat; 5229 background-position: 50% 50%; 5230 background-image: url(../images/stack-icon.png); 5231} 5232.card-bg .card-section-icon .section { 5233 text-transform: uppercase; 5234 color: white; 5235 font-size: 14px; 5236} 5237 5238.card-info { 5239 position: absolute; 5240 -webkit-box-sizing: border-box; 5241 -moz-box-sizing: border-box; 5242 box-sizing: border-box; 5243 top: 0; 5244 right: 0; 5245 bottom: 0; 5246 left: 0; 5247 overflow: hidden; 5248 background: #fefefe; 5249 padding: 4px 12px 6px 12px; 5250} 5251.card-info .section { 5252 text-transform: uppercase; 5253 color: #898989; 5254 font-size: 12px; 5255 margin-bottom: 1px; 5256} 5257.card-info .title { 5258 color: #363636; 5259 white-space: nowrap; 5260 overflow: hidden; 5261 text-overflow: ellipsis; 5262 padding-bottom: 5px; 5263 margin-bottom: -2px; 5264 font-size: 16px; 5265} 5266.card-info .description { 5267 overflow: hidden; 5268} 5269.card-info .description .text { 5270 color: #464646; 5271 font: 13px/15px Roboto Condensed; 5272 overflow: hidden; 5273 width:100%; 5274} 5275.card-info .description .util { 5276 position: absolute; 5277 right: 5px; 5278 bottom: 70px; /*-2px;*/ 5279 opacity: 0; 5280 -webkit-transition: opacity 0.5s; 5281 -moz-transition: opacity 0.5s; 5282 -o-transition: opacity 0.5s; 5283 transition: opacity 0.5s; 5284} 5285.card-info.empty-desc .title { 5286 white-space: normal; 5287 overflow: visible; 5288} 5289.card-info.empty-desc .description { 5290 display: none; 5291} 5292/* Truncate card summaries at bounding box and 5293 * and apply ellipsis at lower right */ 5294.ellipsis { 5295 overflow: hidden; 5296 float:right; 5297 line-height: 15px; 5298 width:100%; 5299} 5300.resource-card-6x6 .card-info .description .teddddddxt { 5301 float:left; 5302 position:relative; 5303 margin-left:0; 5304} 5305.ellipsis:before { 5306 content:""; 5307 float: left; 5308 width: 5px; 5309 height:100%; 5310} 5311.ellipsis > *:first-child.text { 5312 float: right; 5313 width: 100% !important; 5314 margin-left: -5px; 5315} 5316.ellipsis:after { 5317 content: "\02026"; 5318 height:17px; 5319 padding-bottom:4px; 5320 5321 box-sizing: content-box; 5322 -webkit-box-sizing: content-box; 5323 -moz-box-sizing: content-box; 5324 5325 float: right; position: relative; 5326 top: -16px; left: 100%; 5327 width: 4em; margin-left: -4em; 5328 padding-right: 5px; 5329 5330 background: -webkit-gradient(linear, left top, right top, 5331 from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); 5332 background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); 5333 background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); 5334 background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); 5335 background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); 5336} 5337.ellipsis:after { 5338 font-style: normal; color: #aaa; 5339 font-size:13px; 5340 text-align: right; 5341} 5342 5343/* Flow Layout */ 5344.resource-flow-layout { 5345 display: inline-block; 5346} 5347.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack { 5348 float: left; 5349 position: relative; 5350} 5351.resource-flow-layout .resource-card-stack > .resource-card { 5352 margin-right: 0px !important; 5353} 5354.resource-flow-layout:after { 5355 content: "."; 5356 display: block; 5357 height: 10; 5358 position:relative; 5359 clear: both; 5360 visibility: hidden; 5361} 5362.resource-card:hover { 5363 cursor: pointer; 5364} 5365.resource-card:hover .card-bg:after { 5366 opacity: 0; 5367} 5368/* disabled to make way for fade/ellipsis truncation, 5369 and the plusone moves up. 5370.resource-card:hover .card-info .description .text { 5371 padding-right: 70px; 5372} */ 5373.resource-card:hover .card-info .description .util { 5374 opacity: 1; 5375} 5376 5377/* Carousel Layout */ 5378/* Carousel styles for landing page */ 5379.resource-carousel-layout { 5380 margin: 20px 0 20px 0; 5381 position: relative; 5382 overflow: hidden; 5383} 5384.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { 5385 display: none; 5386} 5387.resource-carousel-layout .pagination { 5388 bottom: 0px; 5389} 5390.resource-carousel-layout .frame li { 5391 position: relative; 5392} 5393.resource-carousel-layout .frame li .card-bg { 5394 height: 300px; 5395} 5396.resource-carousel-layout .frame li .card-info { 5397 padding: 7px 15px 0px 15px; 5398 top: 300px; 5399} 5400.resource-carousel-layout .frame li .card-info .section { 5401 font-size: 13px; 5402 margin-bottom: 7px; 5403} 5404.resource-carousel-layout .frame li .card-info .title { 5405 font-size: 25px; 5406 margin-bottom: 2px; 5407} 5408.resource-carousel-layout .frame li .card-info .description { 5409 font-family: 15px/16px Roboto Condensed, sans-serif; 5410} 5411.resource-carousel-layout .frame li .card-info .description .text { 5412 height: 40px; 5413} 5414.resource-carousel-layout .frame li .card-info .description .util { 5415 bottom:97px; 5416 right:4px; 5417} 5418 5419/* Stack Layout */ 5420.resource-stack-layout { 5421 display: inline-block; 5422} 5423.resource-stack-layout .resource-card-stack { 5424 float: left; 5425 position: relative; 5426} 5427.resource-stack-layout .resource-card { 5428 margin-bottom: 20px; 5429 display: block; 5430 position: relative; 5431} 5432.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { 5433 /*text-transform: uppercase;*/ 5434 color: #898989; 5435 font-size: 17px; 5436 line-height: 24px; 5437 margin-bottom: 6px; 5438} 5439.resource-stack-layout .section-card { 5440 height: 284px; 5441} 5442.resource-stack-layout .section-card > .card-bg { 5443 height: 192px; 5444} 5445.resource-stack-layout .section-card > .card-info { 5446 padding: 4px 12px 6px 12px; 5447 top: 192px; 5448} 5449.resource-stack-layout .section-card > .card-info .section { 5450 display: none; 5451} 5452.resource-stack-layout .section-card > .card-info .title { 5453 font-size: 17px; 5454 border-bottom: 1px solid #959595; 5455 padding-bottom: 0px; 5456} 5457.resource-stack-layout .section-card > .card-info .description { 5458 font-size: 13px; 5459 line-height: 15px; 5460} 5461.resource-stack-layout .section-card > .card-info .description .text { 5462 height: 30px; 5463} 5464.resource-stack-layout .related-card { 5465 height: 90px; 5466} 5467.resource-stack-layout .related-card > .card-bg { 5468 left: 0; 5469 top: 0; 5470 width: 90px; 5471 height: 100%; 5472 position: absolute; 5473 display: block; 5474} 5475.resource-stack-layout .related-card > .card-info { 5476 left: 90px; 5477 padding: 4px 12px 4px 12px; 5478} 5479.resource-stack-layout .related-card > .card-info .section { 5480 font-size: 12px; 5481 margin-bottom: 1px; 5482 display: none; 5483} 5484.resource-stack-layout .related-card > .card-info .title { 5485 font-size: 16px; 5486 margin-bottom: -2px; 5487 white-space: normal; 5488 overflow: visible; 5489 text-overflow: ellipsis; 5490} 5491.resource-stack-layout .related-card > .card-info .title:after { 5492 content: url(../images/link-out.png); 5493 display: block; 5494} 5495.resource-stack-layout .related-card > .card-info .description { 5496 display: none; 5497} 5498.resource-stack-layout .section-card-menu { 5499 /* Flexible height */ 5500 display: block; 5501 height: auto; 5502 width: auto; 5503} 5504.resource-stack-layout .section-card-menu .card-bg { 5505 height: 155px; 5506 /* Flexible height */ 5507 position: relative; 5508 display: inline-block; 5509 vertical-align: top; 5510} 5511.resource-stack-layout .section-card-menu .card-info { 5512 padding: 4px 12px 0px 12px; 5513 /* Flexible height */ 5514 position: relative; 5515 left: auto; 5516 top: auto; 5517 right: auto; 5518 bottom: auto; 5519} 5520.resource-stack-layout .section-card-menu .card-info ul { 5521 list-style: none; 5522 margin: 0; 5523} 5524.resource-stack-layout .section-card-menu .card-info ul li { 5525 list-style: none; 5526 margin: 0; 5527 padding: 15px 0; 5528 border-top-width: 1px; 5529 border-top-style: solid; 5530 border-top-color: #959595; 5531} 5532.resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:link, .resource-stack-layout .section-card-menu .card-info ul li a:visited, .resource-stack-layout .section-card-menu .card-info ul li a:active, .resource-stack-layout .section-card-menu .card-info ul li a:hover { 5533 color: #363636 !important; 5534} 5535.resource-stack-layout .section-card-menu .card-info ul li:first-child { 5536 border-top: none; 5537} 5538.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after { 5539 opacity: 1; 5540 -webkit-transition: opacity 0.5s; 5541 -moz-transition: opacity 0.5s; 5542 -o-transition: opacity 0.5s; 5543 transition: opacity 0.5s; 5544} 5545.resource-stack-layout .section-card-menu .card-info ul li:hover .description { 5546 max-height: 30px; 5547 opacity: 1; 5548 -webkit-transition: max-height 0.5s, opacity 1s; 5549 -moz-transition: max-height 0.5s, opacity 1s; 5550 -o-transition: max-height 0.5s, opacity 1s; 5551 transition: max-height 0.5s, opacity 1s; 5552} 5553.resource-stack-layout .section-card-menu .card-info .title { 5554 font-size: 16px; 5555 margin-bottom: -2px; 5556 position: relative; 5557} 5558.resource-stack-layout .section-card-menu .card-info .title:after { 5559 background: url(../images/stack-arrow-right.png); 5560 content: ''; 5561 opacity: 0; 5562 -webkit-transition: opacity 0.25s; 5563 -moz-transition: opacity 0.25s; 5564 -o-transition: opacity 0.25s; 5565 transition: opacity 0.25s; 5566 position: absolute; 5567 right: 0px; 5568 top: 3px; 5569 width: 10px; 5570 height: 15px; 5571} 5572.resource-stack-layout .section-card-menu .card-info .title.more { 5573 text-transform: uppercase; 5574 color: #898989; 5575 display: inline-block; 5576} 5577.resource-stack-layout .section-card-menu .card-info .title.more:after { 5578 background: url(../images/stack-arrow-right.png); 5579 content: ''; 5580 display: block; 5581 position: absolute; 5582 right: -20px; 5583 top: 3px; 5584 width: 10px; 5585 height: 15px; 5586} 5587.resource-stack-layout .section-card-menu .card-info .description { 5588 max-height: 0px; 5589 opacity: 0; 5590 overflow: hidden; 5591 font-size: 13px; 5592 line-height: 15px; 5593 /* Hover off */ 5594 -webkit-transition: max-height 0.5s, opacity 0.5s; 5595 -moz-transition: max-height 0.5s, opacity 0.5s; 5596 -o-transition: max-height 0.5s, opacity 0.5s; 5597 transition: max-height 0.5s, opacity 0.5s; 5598} 5599.resource-stack-layout .section-card-menu .card-info .description .text { 5600 height: 30px; 5601} 5602.resource-stack-layout:after { 5603 content: "."; 5604 display: block; 5605 height: 0; 5606 clear: both; 5607 visibility: hidden; 5608} 5609 5610/* Generate the flow layout styles for a 3-column 16-col span */ 5611.resource-flow-layout.col-16 { 5612 margin: 0 -14px 0 0; 5613 width: 954px; 5614} 5615.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack { 5616 margin: 0 14px 20px 0; 5617} 5618.resource-flow-layout.col-16 .resource-card-row-stack-last { 5619 margin-bottom: 0px !important; 5620} 5621.resource-flow-layout.col-16 .resource-card-col-stack-last { 5622 margin-bottom: 0px !important; 5623} 5624.resource-flow-layout.col-16 .resource-card-3x6 { 5625 width: 145px; 5626 height: 284px; 5627} 5628.resource-flow-layout.col-16 .resource-card-3x12 { 5629 width: 145px; 5630 height: 588px; 5631} 5632.resource-flow-layout.col-16 .resource-card-3x18 { 5633 width: 145px; 5634 height: 892px; 5635} 5636.resource-flow-layout.col-16 .resource-card-6x6 { 5637 width: 304px; 5638 height: 284px; 5639} 5640.resource-flow-layout.col-16 .resource-card-6x12 { 5641 width: 304px; 5642 height: 588px; 5643} 5644.resource-flow-layout.col-16 .resource-card-6x18 { 5645 width: 304px; 5646 height: 892px; 5647} 5648.resource-flow-layout.col-16 .resource-card-9x6 { 5649 width: 463px; 5650 height: 284px; 5651} 5652.resource-flow-layout.col-16 .resource-card-9x12 { 5653 width: 463px; 5654 height: 588px; 5655} 5656.resource-flow-layout.col-16 .resource-card-9x18 { 5657 width: 463px; 5658 height: 892px; 5659} 5660.resource-flow-layout.col-16 .resource-card-12x6 { 5661 width: 622px; 5662 height: 284px; 5663} 5664.resource-flow-layout.col-16 .resource-card-12x12 { 5665 width: 622px; 5666 height: 588px; 5667} 5668.resource-flow-layout.col-16 .resource-card-12x18 { 5669 width: 622px; 5670 height: 892px; 5671} 5672.resource-flow-layout.col-16 .resource-card-15x6 { 5673 width: 781px; 5674 height: 284px; 5675} 5676.resource-flow-layout.col-16 .resource-card-15x12 { 5677 width: 781px; 5678 height: 588px; 5679} 5680.resource-flow-layout.col-16 .resource-card-15x18 { 5681 width: 781px; 5682 height: 892px; 5683} 5684.resource-flow-layout.col-16 .resource-card-18x6 { 5685 width: 940px; 5686 height: 284px; 5687} 5688.resource-flow-layout.col-16 .resource-card-18x12 { 5689 width: 940px; 5690 height: 420px; 5691} 5692.resource-flow-layout.col-16 .resource-card-18x18 { 5693 width: 940px; 5694 height: 892px; 5695} 5696.resource-flow-layout.col-16 .resource-card-3x2 { 5697 width: 145px; 5698 height: 95px; 5699} 5700.resource-flow-layout.col-16 .resource-card-3x2x3 { 5701 width: 145px; 5702 height: 90px; 5703 margin-bottom: 7px; 5704} 5705.resource-flow-layout.col-16 .resource-card-3x3 { 5706 width: 145px; 5707 height: 142px; 5708} 5709.resource-flow-layout.col-16 .resource-card-3x3x2 { 5710 width: 145px; 5711 height: 138px; 5712 margin-bottom: 8px; 5713} 5714.resource-flow-layout.col-16 .resource-card-6x2 { 5715 width: 304px; 5716 height: 95px; 5717} 5718.resource-flow-layout.col-16 .resource-card-6x2x3 { 5719 width: 304px; 5720 height: 90px; 5721 margin-bottom: 7px; 5722} 5723.resource-flow-layout.col-16 .resource-card-6x3 { 5724 width: 304px; 5725 height: 142px; 5726} 5727.resource-flow-layout.col-16 .resource-card-6x3x2 { 5728 width: 304px; 5729 height: 138px; 5730 margin-bottom: 8px; 5731} 5732.resource-flow-layout.col-16 .resource-card-9x2 { 5733 width: 463px; 5734 height: 95px; 5735} 5736.resource-flow-layout.col-16 .resource-card-9x2x3 { 5737 width: 463px; 5738 height: 90px; 5739 margin-bottom: 7px; 5740} 5741.resource-flow-layout.col-16 .resource-card-9x3 { 5742 width: 463px; 5743 height: 142px; 5744} 5745.resource-flow-layout.col-16 .resource-card-9x3x2 { 5746 width: 463px; 5747 height: 138px; 5748 margin-bottom: 8px; 5749} 5750.resource-flow-layout.col-16 .resource-card-12x2 { 5751 width: 622px; 5752 height: 95px; 5753} 5754.resource-flow-layout.col-16 .resource-card-12x2x3 { 5755 width: 622px; 5756 height: 90px; 5757 margin-bottom: 7px; 5758} 5759.resource-flow-layout.col-16 .resource-card-12x3 { 5760 width: 622px; 5761 height: 142px; 5762} 5763.resource-flow-layout.col-16 .resource-card-12x3x2 { 5764 width: 622px; 5765 height: 138px; 5766 margin-bottom: 8px; 5767} 5768.resource-flow-layout.col-16 .resource-card-15x2 { 5769 width: 781px; 5770 height: 95px; 5771} 5772.resource-flow-layout.col-16 .resource-card-15x2x3 { 5773 width: 781px; 5774 height: 90px; 5775 margin-bottom: 7px; 5776} 5777.resource-flow-layout.col-16 .resource-card-15x3 { 5778 width: 781px; 5779 height: 142px; 5780} 5781.resource-flow-layout.col-16 .resource-card-15x3x2 { 5782 width: 781px; 5783 height: 138px; 5784 margin-bottom: 8px; 5785} 5786.resource-flow-layout.col-16 .resource-card-18x2 { 5787 width: 940px; 5788 height: 95px; 5789} 5790.resource-flow-layout.col-16 .resource-card-18x2x3 { 5791 width: 940px; 5792 height: 90px; 5793 margin-bottom: 7px; 5794} 5795.resource-flow-layout.col-16 .resource-card-18x3 { 5796 width: 940px; 5797 height: 142px; 5798} 5799.resource-flow-layout.col-16 .resource-card-18x3x2 { 5800 width: 940px; 5801 height: 138px; 5802 margin-bottom: 8px; 5803} 5804 5805/* Generate the flow layout styles for a 3-column 16-col span */ 5806.resource-flow-layout.col-12 { 5807 margin: 0 -14px 0 0; 5808 width: 714px; 5809} 5810 5811.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack { 5812 margin: 0 14px 20px 0; 5813} 5814.resource-flow-layout.col-12 .resource-card-row-stack-last { 5815 margin-bottom: 0px !important; 5816} 5817.resource-flow-layout.col-12 .resource-card-col-stack-last { 5818 margin-bottom: 0px !important; 5819} 5820.resource-flow-layout.col-12 .resource-card-3x6 { 5821 width: 105px; 5822 height: 284px; 5823} 5824.resource-flow-layout.col-12 .resource-card-3x12 { 5825 width: 105px; 5826 height: 588px; 5827} 5828.resource-flow-layout.col-12 .resource-card-3x18 { 5829 width: 105px; 5830 height: 892px; 5831} 5832.resource-flow-layout.col-12 .resource-card-6x6 { 5833 width: 224px; 5834 height: 284px; 5835} 5836.resource-flow-layout.col-12 .resource-card-6x12 { 5837 width: 224px; 5838 height: 588px; 5839} 5840.resource-flow-layout.col-12 .resource-card-6x18 { 5841 width: 224px; 5842 height: 892px; 5843} 5844.resource-flow-layout.col-12 .resource-card-9x6 { 5845 width: 343px; 5846 height: 284px; 5847} 5848.resource-flow-layout.col-12 .resource-card-9x12 { 5849 width: 343px; 5850 height: 588px; 5851} 5852.resource-flow-layout.col-12 .resource-card-9x18 { 5853 width: 343px; 5854 height: 892px; 5855} 5856.resource-flow-layout.col-12 .resource-card-12x6 { 5857 width: 462px; 5858 height: 284px; 5859} 5860.resource-flow-layout.col-12 .resource-card-12x12 { 5861 width: 462px; 5862 height: 588px; 5863} 5864.resource-flow-layout.col-12 .resource-card-12x18 { 5865 width: 462px; 5866 height: 892px; 5867} 5868.resource-flow-layout.col-12 .resource-card-15x6 { 5869 width: 581px; 5870 height: 284px; 5871} 5872.resource-flow-layout.col-12 .resource-card-15x12 { 5873 width: 581px; 5874 height: 588px; 5875} 5876.resource-flow-layout.col-12 .resource-card-15x18 { 5877 width: 581px; 5878 height: 892px; 5879} 5880.resource-flow-layout.col-12 .resource-card-18x6 { 5881 width: 700px; 5882 height: 284px; 5883} 5884.resource-flow-layout.col-12 .resource-card-18x12 { 5885 width: 700px; 5886 height: 420px; 5887} 5888.resource-flow-layout.col-12 .resource-card-18x18 { 5889 width: 700px; 5890 height: 892px; 5891} 5892.resource-flow-layout.col-12 .resource-card-3x2 { 5893 width: 105px; 5894 height: 95px; 5895} 5896.resource-flow-layout.col-12 .resource-card-3x2x3 { 5897 width: 105px; 5898 height: 90px; 5899 margin-bottom: 7px; 5900} 5901.resource-flow-layout.col-12 .resource-card-3x3 { 5902 width: 105px; 5903 height: 142px; 5904} 5905.resource-flow-layout.col-12 .resource-card-3x3x2 { 5906 width: 105px; 5907 height: 138px; 5908 margin-bottom: 8px; 5909} 5910.resource-flow-layout.col-12 .resource-card-6x2 { 5911 width: 224px; 5912 height: 95px; 5913} 5914.resource-flow-layout.col-12 .resource-card-6x2x3 { 5915 width: 224px; 5916 height: 90px; 5917 margin-bottom: 7px; 5918} 5919.resource-flow-layout.col-12 .resource-card-6x3 { 5920 width: 224px; 5921 height: 142px; 5922} 5923.resource-flow-layout.col-12 .resource-card-6x3x2 { 5924 width: 224px; 5925 height: 138px; 5926 margin-bottom: 8px; 5927} 5928.resource-flow-layout.col-12 .resource-card-9x2 { 5929 width: 343px; 5930 height: 95px; 5931} 5932.resource-flow-layout.col-12 .resource-card-9x2x3 { 5933 width: 343px; 5934 height: 90px; 5935 margin-bottom: 7px; 5936} 5937.resource-flow-layout.col-12 .resource-card-9x3 { 5938 width: 343px; 5939 height: 142px; 5940} 5941.resource-flow-layout.col-12 .resource-card-9x3x2 { 5942 width: 343px; 5943 height: 138px; 5944 margin-bottom: 8px; 5945} 5946.resource-flow-layout.col-12 .resource-card-12x2 { 5947 width: 462px; 5948 height: 95px; 5949} 5950.resource-flow-layout.col-12 .resource-card-12x2x3 { 5951 width: 462px; 5952 height: 90px; 5953 margin-bottom: 7px; 5954} 5955.resource-flow-layout.col-12 .resource-card-12x3 { 5956 width: 462px; 5957 height: 142px; 5958} 5959.resource-flow-layout.col-12 .resource-card-12x3x2 { 5960 width: 462px; 5961 height: 138px; 5962 margin-bottom: 8px; 5963} 5964.resource-flow-layout.col-12 .resource-card-15x2 { 5965 width: 581px; 5966 height: 95px; 5967} 5968.resource-flow-layout.col-12 .resource-card-15x2x3 { 5969 width: 581px; 5970 height: 90px; 5971 margin-bottom: 7px; 5972} 5973.resource-flow-layout.col-12 .resource-card-15x3 { 5974 width: 581px; 5975 height: 142px; 5976} 5977.resource-flow-layout.col-12 .resource-card-15x3x2 { 5978 width: 581px; 5979 height: 138px; 5980 margin-bottom: 8px; 5981} 5982.resource-flow-layout.col-12 .resource-card-18x2 { 5983 width: 700px; 5984 height: 95px; 5985} 5986.resource-flow-layout.col-12 .resource-card-18x2x3 { 5987 width: 700px; 5988 height: 90px; 5989 margin-bottom: 7px; 5990} 5991.resource-flow-layout.col-12 .resource-card-18x3 { 5992 width: 700px; 5993 height: 142px; 5994} 5995.resource-flow-layout.col-12 .resource-card-18x3x2 { 5996 width: 700px; 5997 height: 138px; 5998 margin-bottom: 8px; 5999} 6000 6001/* Generate the flow layout styles for a 3-column 13-col span */ 6002 6003.resource-flow-layout.col-13 { 6004 margin: 0 -14px 0 0; 6005 width: 774px; 6006} 6007.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack { 6008 margin: 0 14px 20px 0; 6009} 6010.resource-flow-layout.col-13 .resource-card-row-stack-last { 6011 margin-bottom: 0px !important; 6012} 6013.resource-flow-layout.col-13 .resource-card-col-stack-last { 6014 margin-bottom: 0px !important; 6015} 6016.resource-flow-layout.col-13 .resource-card-3x6 { 6017 width: 115px; 6018 height: 284px; 6019} 6020.resource-flow-layout.col-13 .resource-card-3x12 { 6021 width: 115px; 6022 height: 588px; 6023} 6024.resource-flow-layout.col-13 .resource-card-3x18 { 6025 width: 115px; 6026 height: 892px; 6027} 6028.resource-flow-layout.col-13 .resource-card-6x6 { 6029 width: 244px; 6030 height: 284px; 6031} 6032.resource-flow-layout.col-13 .resource-card-6x12 { 6033 width: 244px; 6034 height: 588px; 6035} 6036.resource-flow-layout.col-13 .resource-card-6x18 { 6037 width: 244px; 6038 height: 892px; 6039} 6040.resource-flow-layout.col-13 .resource-card-9x6 { 6041 width: 373px; 6042 height: 284px; 6043} 6044.resource-flow-layout.col-13 .resource-card-9x12 { 6045 width: 373px; 6046 height: 588px; 6047} 6048.resource-flow-layout.col-13 .resource-card-9x18 { 6049 width: 373px; 6050 height: 892px; 6051} 6052.resource-flow-layout.col-13 .resource-card-12x6 { 6053 width: 502px; 6054 height: 284px; 6055} 6056.resource-flow-layout.col-13 .resource-card-12x12 { 6057 width: 502px; 6058 height: 588px; 6059} 6060.resource-flow-layout.col-13 .resource-card-12x18 { 6061 width: 502px; 6062 height: 892px; 6063} 6064.resource-flow-layout.col-13 .resource-card-15x6 { 6065 width: 631px; 6066 height: 284px; 6067} 6068.resource-flow-layout.col-13 .resource-card-15x12 { 6069 width: 631px; 6070 height: 588px; 6071} 6072.resource-flow-layout.col-13 .resource-card-15x18 { 6073 width: 631px; 6074 height: 892px; 6075} 6076.resource-flow-layout.col-13 .resource-card-18x6 { 6077 width: 760px; 6078 height: 284px; 6079} 6080.resource-flow-layout.col-13 .resource-card-18x12 { 6081 width: 760px; 6082 height: 420px; 6083} 6084.resource-flow-layout.col-13 .resource-card-18x18 { 6085 width: 760px; 6086 height: 892px; 6087} 6088.resource-flow-layout.col-13 .resource-card-3x2 { 6089 width: 115px; 6090 height: 95px; 6091} 6092.resource-flow-layout.col-13 .resource-card-3x2x3 { 6093 width: 115px; 6094 height: 90px; 6095 margin-bottom: 7px; 6096} 6097.resource-flow-layout.col-13 .resource-card-3x3 { 6098 width: 115px; 6099 height: 142px; 6100} 6101.resource-flow-layout.col-13 .resource-card-3x3x2 { 6102 width: 115px; 6103 height: 138px; 6104 margin-bottom: 8px; 6105} 6106.resource-flow-layout.col-13 .resource-card-6x2 { 6107 width: 244px; 6108 height: 95px; 6109} 6110.resource-flow-layout.col-13 .resource-card-6x2x3 { 6111 width: 244px; 6112 height: 90px; 6113 margin-bottom: 7px; 6114} 6115.resource-flow-layout.col-13 .resource-card-6x3 { 6116 width: 244px; 6117 height: 142px; 6118} 6119.resource-flow-layout.col-13 .resource-card-6x3x2 { 6120 width: 244px; 6121 height: 138px; 6122 margin-bottom: 8px; 6123} 6124.resource-flow-layout.col-13 .resource-card-9x2 { 6125 width: 373px; 6126 height: 95px; 6127} 6128.resource-flow-layout.col-13 .resource-card-9x2x3 { 6129 width: 373px; 6130 height: 90px; 6131 margin-bottom: 7px; 6132} 6133.resource-flow-layout.col-13 .resource-card-9x3 { 6134 width: 373px; 6135 height: 142px; 6136} 6137.resource-flow-layout.col-13 .resource-card-9x3x2 { 6138 width: 373px; 6139 height: 138px; 6140 margin-bottom: 8px; 6141} 6142.resource-flow-layout.col-13 .resource-card-12x2 { 6143 width: 502px; 6144 height: 95px; 6145} 6146.resource-flow-layout.col-13 .resource-card-12x2x3 { 6147 width: 502px; 6148 height: 90px; 6149 margin-bottom: 7px; 6150} 6151.resource-flow-layout.col-13 .resource-card-12x3 { 6152 width: 502px; 6153 height: 142px; 6154} 6155.resource-flow-layout.col-13 .resource-card-12x3x2 { 6156 width: 502px; 6157 height: 138px; 6158 margin-bottom: 8px; 6159} 6160.resource-flow-layout.col-13 .resource-card-15x2 { 6161 width: 631px; 6162 height: 95px; 6163} 6164.resource-flow-layout.col-13 .resource-card-15x2x3 { 6165 width: 631px; 6166 height: 90px; 6167 margin-bottom: 7px; 6168} 6169.resource-flow-layout.col-13 .resource-card-15x3 { 6170 width: 631px; 6171 height: 142px; 6172} 6173.resource-flow-layout.col-13 .resource-card-15x3x2 { 6174 width: 631px; 6175 height: 138px; 6176 margin-bottom: 8px; 6177} 6178.resource-flow-layout.col-13 .resource-card-18x2 { 6179 width: 760px; 6180 height: 95px; 6181} 6182.resource-flow-layout.col-13 .resource-card-18x2x3 { 6183 width: 760px; 6184 height: 90px; 6185 margin-bottom: 7px; 6186} 6187.resource-flow-layout.col-13 .resource-card-18x3 { 6188 width: 760px; 6189 height: 142px; 6190} 6191.resource-flow-layout.col-13 .resource-card-18x3x2 { 6192 width: 760px; 6193 height: 138px; 6194 margin-bottom: 8px; 6195} 6196 6197/* 6198 The following are styles for cards in the flowlayout above, styled by the number of rows they span 6199*/ 6200/* Single row items, might be simpler to just apply a class */ 6201.resource-card-3x6 > .card-bg, .resource-card-6x6 > .card-bg, .resource-card-9x6 > .card-bg, .resource-card-12x6 > .card-bg, .resource-card-15x6 > .card-bg, .resource-card-18x6 > .card-bg { 6202 height: 192px; 6203} 6204.resource-card-3x6 > .card-info, .resource-card-6x6 > .card-info, .resource-card-9x6 > .card-info, .resource-card-12x6 > .card-info, .resource-card-15x6 > .card-info, .resource-card-18x6 > .card-info { 6205 padding: 4px 12px 6px 12px; 6206 top: 192px; 6207} 6208.resource-card-3x6 > .card-info .section, .resource-card-6x6 > .card-info .section, .resource-card-9x6 > .card-info .section, .resource-card-12x6 > .card-info .section, .resource-card-15x6 > .card-info .section, .resource-card-18x6 > .card-info .section { 6209 font-size: 12px; 6210 margin-bottom: 1px; 6211} 6212.resource-card-3x6 > .card-info .title, .resource-card-6x6 > .card-info .title, .resource-card-9x6 > .card-info .title, .resource-card-12x6 > .card-info .title, .resource-card-15x6 > .card-info .title, .resource-card-18x6 > .card-info .title { 6213 font-size: 16px; 6214 margin-bottom: -2px; 6215} 6216.resource-card-3x6 > .card-info .description, .resource-card-6x6 > .card-info .description, .resource-card-9x6 > .card-info .description, .resource-card-12x6 > .card-info .description, .resource-card-15x6 > .card-info .description, .resource-card-18x6 > .card-info .description { 6217 font-size: 13px; 6218 line-height: 15px; 6219} 6220.resource-card-3x6 > .card-info .description .text, .resource-card-6x6 > .card-info .description .text, .resource-card-9x6 > .card-info .description .text, .resource-card-12x6 > .card-info .description .text, .resource-card-15x6 > .card-info .description .text, .resource-card-18x6 > .card-info .description .text { 6221 height: 30px; 6222} 6223 6224/* Double row items */ 6225.resource-card-3x12 > .card-bg, .resource-card-6x12 > .card-bg, .resource-card-9x12 > .card-bg, .resource-card-12x12 > .card-bg, .resource-card-15x12 > .card-bg, .resource-card-18x12 > .card-bg { 6226 height: 320px; 6227} 6228.resource-card-3x12 > .card-info, .resource-card-6x12 > .card-info, .resource-card-9x12 > .card-info, .resource-card-12x12 > .card-info, .resource-card-15x12 > .card-info, .resource-card-18x12 > .card-info { 6229 padding: 4px 12px 6px 12px; 6230 top: 320px; 6231} 6232.resource-card-3x12 > .card-info .section, .resource-card-6x12 > .card-info .section, .resource-card-9x12 > .card-info .section, .resource-card-12x12 > .card-info .section, .resource-card-15x12 > .card-info .section, .resource-card-18x12 > .card-info .section { 6233 font-size: 12px; 6234 margin-bottom: 1px; 6235} 6236.resource-card-3x12 > .card-info .title, .resource-card-6x12 > .card-info .title, .resource-card-9x12 > .card-info .title, .resource-card-12x12 > .card-info .title, .resource-card-15x12 > .card-info .title, .resource-card-18x12 > .card-info .title { 6237 font-size: 16px; 6238 margin-bottom: -2px; 6239 white-space: normal; 6240} 6241.resource-card-3x12 > .card-info .description, .resource-card-6x12 > .card-info .description, .resource-card-9x12 > .card-info .description, .resource-card-12x12 > .card-info .description, .resource-card-15x12 > .card-info .description, .resource-card-18x12 > .card-info .description { 6242 font-size: 13px; 6243 line-height: 15px; 6244} 6245 6246/* 1/3 row items */ 6247.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg { 6248 left: 0; 6249 top: 0; 6250 width: 90px; 6251 height: 100%; 6252 position: absolute; 6253 display: block; 6254} 6255.resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info { 6256 left: 90px; 6257 padding: 4px 12px 4px 12px; 6258 height: 80px; 6259 overflow: hidden; 6260} 6261.resource-card-3x2 > .card-info .section, .resource-card-6x2 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x2 > .card-info .section, .resource-card-12x2 > .card-info .section, .resource-card-15x2 > .card-info .section, .resource-card-18x2 > .card-info .section { 6262 font-size: 12px; 6263 margin-bottom: 1px; 6264 /* display: none; */ 6265} 6266.resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title { 6267 font-size: 16px; 6268 margin-bottom: -2px; 6269 white-space: normal; 6270 overflow: visible; 6271 text-overflow: ellipsis; 6272} 6273.resource-card-3x2 > .card-info .title:after, .resource-card-6x2 > .card-info .title:after, .resource-card-9x2 > .card-info .title:after, .resource-card-12x2 > .card-info .title:after, .resource-card-15x2 > .card-info .title:after, .resource-card-18x2 > .card-info .title:after { 6274 /* content: url(../images/link-out.png); */ 6275 display: block; 6276} 6277.resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description { 6278 display: none; 6279} 6280 6281/* 1/2 row items */ 6282.resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg { 6283 left: 0; 6284 top: 0; 6285 width: 90px; 6286 height: 100%; 6287 position: absolute; 6288 display: block; 6289} 6290.resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info { 6291 left: 90px; 6292 padding: 4px 12px 0px 12px; 6293} 6294.resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section { 6295 font-size: 12px; 6296 margin-bottom: 1px; 6297 display: none; 6298} 6299.resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title { 6300 font-size: 16px; 6301 margin-bottom: -2px; 6302 white-space: normal; 6303 overflow: visible; 6304} 6305.resource-card-3x3 > .card-info .description .text, .resource-card-6x3 > .card-info .description .text, .resource-card-9x3 > .card-info .description .text, .resource-card-12x3 > .card-info .description .text, .resource-card-15x3 > .card-info .description .text, .resource-card-18x3 > .card-info .description .text { 6306 font-size: 12px; 6307 line-height: 15px; 6308 padding-right: 0px !important; 6309 height: 80px; 6310} 6311.resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .util { 6312 display: none; 6313} 6314/* placement of plusone */ 6315.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util { 6316 bottom:2px; 6317} 6318.resource-card-18x12 > .card-info .description .util { 6319 bottom:2px; 6320} 6321/* Overrides for col-16 6x6 cards linking to local content on landing pages. 6322 Suppresses "section" and puts the title above a hairline rule. */ 6323.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section { 6324 display:none; 6325} 6326.landing .card-info .title { 6327 color: #898989; 6328 font-size: 17px; 6329 line-height: 24px; 6330 margin-bottom: 6px; 6331 border-bottom: 1px solid #959595; 6332 padding-bottom: 0px; 6333} 6334.landing .card-info .description { 6335 font-size: 13px; 6336 line-height: 15px; 6337} 6338.landing .card-info .description .text { 6339height:30px; 6340} 6341.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util { 6342 bottom:2px; 6343} 6344/* 6345 Generate a resource stack layout for a 3 column widget spanning 16 grid cols 6346*/ 6347.resource-stack-layout.col-16 { 6348 margin: 0 -14px 0 0; 6349 width: 954px; 6350} 6351.resource-stack-layout.col-16 .resource-card-stack { 6352 margin: 0 14px 0 0; 6353 width: 304px; 6354} 6355 6356/* Example of card menu tinting */ 6357.resource-widget[data-section=distribute\/tools] .section-card-menu 6358.card-bg:after { 6359 background: rgba(126, 55, 148, 0.4) !important; 6360} 6361.resource-widget[data-section=distribute\/tools] .section-card-menu 6362.card-section-icon .icon { 6363 background-color: #7e3794 !important; 6364} 6365.resource-widget[data-section=distribute\/tools] .section-card-menu 6366.card-info ul li { 6367 border-top-color: #7e3794 !important; 6368} 6369 6370/* tinting for stacks */ 6371 6372div.jd-descr > .resource-widget[data-section=distribute\/tools] 6373.section-card-menu .card-info ul li { 6374 border-top-color: #7e3794 !important; 6375} 6376