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