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