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