default.css revision f97b2ef21a9940ec7a41c9116a79f9b2a36e0c1d
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: #fff; 21 -webkit-font-smoothing: antialiased; 22 -moz-osx-font-smoothing: grayscale; 23 /* prevent subpixel antialiasing, which thickens the text */ 24 /* text-rendering: optimizeLegibility; */ 25 /* turned off ligatures due to bug 5945455 */ } 26 27body { 28 color: #515151; 29 color: rgba(0, 0, 0, .68); 30 font: 14px/24px Roboto, sans-serif; 31 font-weight: 400; 32 letter-spacing:.1; 33 padding:0 20px; 34} 35 36@media (max-width: 719px) { 37 html { 38 /* Disable accidental horizontal overflow. */ 39 overflow-x: hidden; 40 } 41 42 body { 43 padding: 0 10px; 44 } 45} 46 47#page-container { 48 width: 940px; 49 margin: 0 40px; } 50 51#page-header { 52 height: 80px; 53 margin-bottom: 20px; 54 font-size: 48px; 55 line-height: 48px; 56 font-weight: 100; 57 padding-left: 10px; } 58 #page-header a { 59 display: block; 60 position: relative; 61 top: 20px; 62 text-decoration: none; 63 color: #555555 !important; } 64 65#main-row { 66 display: inline-block; } 67 #main-row:after { 68 content: "."; 69 display: block; 70 height: 0; 71 clear: both; 72 visibility: hidden; } 73 * html #main-row { 74 height: 1px; } 75 76#page-footer { 77 margin-left: 190px; 78 margin-top: 80px; 79 color: #999999; 80 padding-bottom: 40px; 81 font-size: 12px; 82 line-height: 15px; } 83 #page-footer a { 84 color: #777777; } 85 #page-footer #copyright { 86 margin-bottom: 10px; } 87 88#nav-container { 89 width: 160px; 90 min-height: 10px; 91 margin-right: 20px; 92 float: left; } 93 94#nav { 95 margin:0; 96 padding:0 0 30px; 97} 98 99#side-nav { 100 padding-top: 20px; 101} 102 103#devdoc-nav h2 { 104 border:0; 105} 106 107#devdoc-nav.fixed { 108 position: fixed; 109 margin:0; 110 top: 84px; /* sticky-header height + 20px gutter */ 111} 112 113.dac-devdoc-toggle { 114 cursor: pointer; 115 padding: 8px 0; 116} 117 118.scroll-pane { 119 /* Match height of fixed parent. */ 120 height: 100%; 121} 122 123#content { 124 width: 760px; 125 float: left; } 126 127 128/***** PREVIOUSLY style.css ******************/ 129/* This should be close to the top, so it is easier to override. */ 130[dir='rtl'] { 131 direction: rtl; 132} 133html { 134 line-height: 20px; 135} 136pre, table, input, textarea, code { 137 font-size: 1em; 138} 139address, abbr, cite { 140 font-style: normal; 141} 142[dir='rtl'] th { 143 text-align: right; 144} 145html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q, 146html[lang^=zh] blockquote, html[lang^=zh] q { 147 font-style: normal; 148} 149q { 150 font-style: italic; 151} 152fieldset, iframe, img { 153 border: 0; 154} 155img { 156 border: none; 157 -ms-interpolation-mode: bicubic; 158 max-width: 100%; 159 vertical-align: middle; 160} 161video { 162 max-width: 100%; 163 object-fit: cover; 164} 165q { 166 quotes: none; 167} 168sup, sub { 169 font-size: 11px; 170 line-height: 0; 171} 172 173table, fieldset { 174 margin: 0; 175} 176/* Biggest type */ 177.display-1 { 178 font-size: 56px; 179 line-height: 68px; 180} 181@media (max-width: 719px) { 182 .display-1 { 183 font-size: 44px; 184 line-height: 56px; 185 } 186} 187h1, h2, h3 { 188 color: #212121; 189 color: rgba(0, 0, 0, .87); 190} 191h1 { 192 font-size: 44px; 193 line-height: 56px; 194 margin: 24px 0 12px; 195 font-weight: 300; 196} 197h1.short { 198 margin-right:320px; 199} 200@media (max-width: 719px) { 201 h1 { 202 font-size: 36px; 203 line-height: 48px; 204 } 205} 206h2 { 207 font-size: 28px; 208 line-height: 32px; 209 margin: 24px 0 16px; 210 font-weight: 400; 211} 212h3 { 213 font-size: 24px; 214 line-height: 32px; 215 font-weight: 400; 216 margin: 16px 0; 217} 218h4 { 219 font-size: 18px; 220 line-height: 24px; 221 margin: 12px 0; 222 font-weight: 500; 223} 224h5, h6 { 225 font-size: 16px; 226 line-height: 24px; 227 margin: 8px 0; 228} 229hr { /* applied to the bottom of h2 elements */ 230 height: 1px; 231 margin: 7px 0 12px; 232 border: 0; 233 background: #e5e5e5; 234} 235p, pre, table, form { 236 margin: 0 0 12px; 237} 238small { 239 font-size: 11.5px; 240 color: #000; 241} 242ul, ol { 243 margin: 0 0 15px 20px; 244 padding: 0; 245} 246[dir='rtl'] ul, [dir='rtl'] ol { 247 margin: 10px 30px 10px 10px; 248} 249ul ul, ul ol, ol ul, ol ol { 250 margin-bottom: 0; 251 margin-top: 0; 252} 253li { 254 margin: 0 0 12px; 255} 256dt { 257 margin: 24px 0 12px; 258} 259dd { 260 margin:0 0 10px 40px; 261} 262dd p, 263dd pre, 264dd ul, 265dd ol, 266dd dl { 267 margin-top:10px; 268} 269li p, 270li pre, 271li ul, 272li ol, 273li dl { 274 margin-top: 6px; 275 margin-bottom: 6px; 276} 277dl dd dl:first-child { 278 margin-top: 0; 279} 280pre strong, pre b, a strong, a b, a code { 281 color: inherit; 282} 283pre, code { 284 color: #060; 285 font: 13px/18px Consolas, "Liberation Mono", Menlo, Courier, monospace; 286 -webkit-font-smoothing: subpixel-antialiased; 287 -moz-osx-font-smoothing: auto; 288} 289code { 290 background-color: #f7f7f7; 291 padding: 3px 5px; 292} 293 294legend { 295 display: none; 296} 297a, .link-color { 298 color: #039BE5; 299 text-decoration: none; 300} 301a:focus, a:hover, a:active { 302 text-decoration: none; 303} 304a.white { 305 color: #fff; 306 text-decoration:underline; 307} 308a.white:hover, a.white:active { 309 color: #ccc !important; 310} 311strong, b { 312 font-weight: bold; 313} 314table { 315 border-collapse: collapse; 316 border-spacing: 0; 317 border:0; 318 margin: .5em 1em 1em 0; 319 width:100%; /* consistent table widths; within IE's quirks */ 320 background-color:#f7f7f7; 321} 322th, td { 323 padding: 4px 12px; 324 vertical-align: top; 325 text-align: left; 326} 327td { 328 background-color:inherit; 329 border:solid 1px #DDD; 330} 331td *:last-child { 332 margin-bottom:0; 333} 334th { 335 background-color: #999; 336 color: #fff; 337 border:solid 1px #DDD; 338 font-weight: normal; 339} 340tr:first-of-type th:first-of-type:empty { 341 visibility: hidden; 342} 343 344a.external-link { 345 background:url('../images/styles/open_new_page.png') no-repeat 100% 50%; 346 padding-right:16px; 347} 348 349#jd-content img { 350 margin-bottom:15px; 351} 352 353em { 354 font-style: italic; } 355 356acronym, 357.tooltip-link { 358 border-bottom: 1px dotted #555555; 359 cursor: help; } 360 361acronym:hover, 362.tooltip-link:hover { 363 color: #7aa1b0; 364 border-bottom-color: #7aa1b0; } 365 366img.with-shadow, 367video.with-shadow { 368 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } 369 370/* disclosures mixin */ 371/* content layout */ 372/* This grid is deprecated in favor of .cols and .col-X */ 373.layout-content-row { 374 display: inline-block; 375 margin-bottom: 10px; } 376 * html .layout-content-row { 377 height: 1px; } 378 379.layout-content-col { 380 float: left; 381 margin-left: 20px; } 382 .layout-content-col:first-child { 383 margin-left: 0; } 384 .layout-content-col h3, 385 .layout-content-col h4 { 386 margin-top:0; } 387 388.layout-content-col.span-1 { 389 width: 40px; } 390 391.layout-content-col.span-2 { 392 width: 100px; } 393 394.layout-content-col.span-3 { 395 width: 160px; } 396 397.layout-content-col.span-4 { 398 width: 220px; } 399 400.layout-content-col.span-5 { 401 width: 280px; } 402 403.layout-content-col.span-6 { 404 width: 340px; } 405 406.layout-content-col.span-7 { 407 width: 400px; } 408 409.layout-content-col.span-8 { 410 width: 460px; } 411 412.layout-content-col.span-9 { 413 width: 520px; } 414 415.layout-content-col.span-10 { 416 width: 580px; } 417 418.layout-content-col.span-11 { 419 width: 640px; } 420 421.layout-content-col.span-12 { 422 width: 700px; } 423 424.layout-content-col.span-13 { 425 width: 760px; } 426 427.vspace.size-1 { 428 height: 10px; } 429 430.vspace.size-2 { 431 height: 20px; } 432 433.vspace.size-3 { 434 height: 30px; } 435 436.vspace.size-4 { 437 height: 40px; } 438 439.vspace.size-5 { 440 height: 50px; } 441 442.vspace.size-6 { 443 height: 60px; } 444 445.vspace.size-7 { 446 height: 70px; } 447 448.vspace.size-8 { 449 height: 80px; } 450 451.vspace.size-9 { 452 height: 90px; } 453 454.vspace.size-10 { 455 height: 100px; } 456 457.vspace.size-11 { 458 height: 110px; } 459 460.vspace.size-12 { 461 height: 120px; } 462 463.vspace.size-13 { 464 height: 130px; } 465 466.vspace.size-14 { 467 height: 140px; } 468 469.vspace.size-15 { 470 height: 150px; } 471 472.vspace.size-16 { 473 height: 160px; } 474 475/* nav */ 476#nav { 477 /* section header divs */ 478 /* expanded section header divs */ 479 /* sublinks */ } 480 #nav li { 481 list-style-type: none; 482 font-size: 12px; 483 margin:0; 484 padding:0; 485 line-height: 18px; } 486 #nav a { 487 color: #505050; 488 text-decoration: none; 489 word-wrap:break-word; } 490 #nav .nav-section-header { 491 position: relative; 492 margin-bottom: 1px; 493 padding: 0 30px 0 0; } 494 #nav li.selected a { 495 color: #039BE5; 496 } 497 #nav li.selected ul li a { 498 /* don't highlight child items */ 499 color: #505050; } 500 #nav .nav-section .nav-section .nav-section-header { 501 /* no white line between second level sections */ 502 margin-bottom: 0; } 503 /* section header links */ 504 #nav > li > div > a { 505 display: block; 506 font-weight: 700; 507 padding: 13px 0 12px 10px; } 508 #nav .nav-section-header:after { 509 content: ''; 510 background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; 511 width: 34px; 512 height: 34px; 513 display: block; 514 position: absolute; 515 top: 6px; 516 right: 0; } 517 #nav .nav-section-header.empty { 518 padding:0; } 519 #nav .nav-section-header.empty:after { 520 display: none; } 521 /* nested nav headers */ 522 #nav .nav-section .nav-section { 523 position: relative; 524 padding: 0; 525 margin: 0; } 526 #nav .nav-section li a { 527 /* first gen child (2nd level li) */ 528 display:block; 529 font-weight: 700; 530 text-transform: none; 531 padding: 13px 5px 13px 10px; 532 } 533 #nav .nav-section li li a { 534 /* second gen child (3rd level li) */ 535 font-weight: 400; 536 padding: 7px 5px 7px 10px; 537 } 538 #nav li.expanded .nav-section-header { 539 background: #f0f0f0; } 540 #nav li.expanded .nav-section-header.empty { 541 background: none; } 542 #nav li.expanded li .nav-section-header { 543 background: none; } 544 #nav li.expanded li ul { 545 /* 3rd level ul */ 546 padding:6px 0 1px 20px; 547 } 548 #nav li.expanded > .nav-section-header:after { 549 content: ''; 550 background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; 551 width: 34px; 552 height: 34px; } 553 #nav li.expanded li ul.tree-list-children { 554 padding: 0; 555 } 556 #nav li.expanded li ul.tree-list-children .tree-list-children { 557 padding:0 0 0 10px; 558 } 559 #nav li span.tree-list-subtitle { 560 display:inline-block; 561 padding:5px 0 0 10px; 562 color:#555; 563 text-transform:uppercase; 564 font-size:12px; 565 } 566 #nav li span.tree-list-subtitle:before { 567 content: '—'; 568 } 569 #nav li span.tree-list-subtitle:after { 570 content: '—'; 571 } 572 #nav li span.tree-list-subtitle.package { 573 padding-top:15px; 574 cursor:default; 575 } 576 #nav li span.tree-list-subtitle.package:before { 577 content: ''; 578 } 579 #nav li span.tree-list-subtitle.package:after { 580 content: ''; 581 } 582 #nav li ul.tree-list-children.classes { 583 padding-left:10px; 584 } 585 #nav li ul { 586 display:none; 587 overflow: hidden; 588 margin: 0; } 589 #nav li ul.animate-height-in { 590 -webkit-transition: height 0.25s ease-in; 591 -moz-transition: height 0.25s ease-in; 592 transition: height 0.25s ease-in; } 593 #nav li ul.animate-height-out { 594 -webkit-transition: height 0.25s ease-out; 595 -moz-transition: height 0.25s ease-out; 596 transition: height 0.25s ease-out; } 597 #nav li ul li { 598 padding: 0; } 599 #nav li li li { 600 padding: 0; } 601 #nav li.expanded ul { 602 } 603 #nav li ul > li { 604 padding:0; 605 } 606 #nav li ul > li:last-child { 607 padding-bottom:5px; 608 } 609 #nav li ul.tree-list-children > li:last-child { 610 padding-bottom:0; 611 } 612 #nav li.expanded ul > li { 613 background:#f7f7f7; } 614 #nav li.expanded ul > li li { 615 background:inherit; } 616 #nav li ul.tree-list-children ul { 617 display:block; } 618 619#nav.samples-nav li li li a { 620 padding-top:3px; 621 padding-bottom:3px; 622} 623#nav.samples-nav li li ul > li:last-child { 624 padding-bottom:3px; 625} 626 627.new, 628.new-child { 629 font-size: .78em; 630 font-weight: bold; 631 color: #ff3d3d; 632 vertical-align:top; 633 white-space:nowrap; 634} 635 636/* content header */ 637.content-header { 638 position: relative; 639} 640.content-header:before, 641.content-header:after { 642 content: ''; 643 display: table; 644 /* Clear heading margins, to make absolutely positioned nav a bit more predictable. */ 645} 646.content-header.just-links { 647 margin-bottom:0; 648 padding-bottom:0;} 649 650.content-footer { 651 margin-top: 10px; 652 padding-top:10px; 653 width:100%; } 654 655.content-footer .col-9 { 656 margin-left:0; 657} 658.content-footer .col-4 { 659 margin-right:0; 660} 661.content-footer.wrap { 662 max-width:940px; 663} 664.content-footer .plus-container { 665 margin:5px 0 0; 666 text-align:right; 667 float:right; 668} 669 670a.back-link { 671 text-decoration: none; 672 text-transform: uppercase; 673} 674 675.content-header .paging-links { 676 position: absolute; 677 right: 0; 678 top: 8px; 679 width: 220px; 680} 681.paging-links { 682 position: relative; 683 height:30px; } 684 .paging-links a { 685 position: absolute; } 686 .paging-links a, 687 .training-nav-top a { 688 text-decoration: none; } 689 .paging-links .prev-page-link:before, 690 .training-nav-top .prev-page-link:before, 691 a.back-link:before { 692 content: ''; 693 background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%; 694 width: 10px; 695 height: 10px; 696 display: inline-block; 697 margin-right: 5px; } 698 .paging-links .prev-page-link { 699 left: -15px; } 700 .paging-links .next-page-link { 701 right: 0; } 702 .next-page-link:after, 703 .start-class-link:after, 704 .start-course-link:after, 705 .next-class-link:after, 706 .go-link:after { 707 content: ''; 708 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 709 width: 10px; 710 height: 10px; 711 display: inline-block; 712 margin-left: 5px; } 713 .prev-page-link.inline:before { 714 content: none; } 715 .next-page-link.inline:after { 716 content: none; } 717 718 .content-footer .paging-links .next-page-link { 719 left:0; 720 } 721 722 .training-nav-top a { 723 border-bottom:0; 724 box-sizing: border-box; 725 color: inherit; 726 display:block; 727 float:left; 728 padding:10px 0; 729 line-height:30px; 730 text-align:center; 731 width: 50%; 732 } 733 734 .training-nav-top a.prev-page-link { 735 padding-left: 15px; 736 text-align: left; 737 } 738 739 .training-nav-top a.next-page-link { 740 padding-right: 15px; 741 text-align: right; 742 } 743 744 .paging-links a.disabled, 745 .training-nav-top a.disabled, 746 .content-footer a.disabled { 747 color:#bbb; 748 } 749 750 .paging-links a.disabled:hover, 751 .training-nav-top a.disabled:hover, 752 .content-footer a.disabled:hover { 753 cursor:default; 754 color:#bbb !important; 755 } 756 757 .training-nav-top a.start-class-link, 758 .training-nav-top a.start-course-link, 759 .paging-links a.start-class-link { 760 width:100%; 761 } 762 763 /* list of classes on course landing page */ 764 ol.class-list { 765 counter-reset: class; 766 list-style: none; 767 margin: 60px 0 0; 768 } 769 ol.class-list>li { 770 box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); 771 margin: 0 0 20px; 772 overflow: hidden; 773 } 774 ol.class-list .title { 775 background: #00bcd4; 776 color: #fff; 777 display: block; 778 font-size: 20px; 779 font-weight: 500; 780 height: 32px; 781 margin: 0; 782 padding: 52px 16px 12px; 783 position: relative; 784 } 785 ol.class-list .title:before { 786 border-bottom: 1px solid white; 787 box-sizing: border-box; 788 /* Disable the numbers for now, since vert few classes need to be taken in order. */ 789 /* content: counter(class); */ 790 counter-increment: class; 791 height: 40px; 792 left: 0; 793 padding: 10px 1px 0 5px; 794 position: absolute; 795 top: 0; 796 text-align: right; 797 min-width: 30px; 798 } 799 ol.class-list .title h2 { 800 color: currentColor; 801 font-size: inherit; 802 font-weight: inherit; 803 margin:0 0 10px; 804 display:block; 805 float:left; 806 width:675px; 807 } 808 ol.class-list .title span { 809 display:none; 810 float:left; 811 font-size:18px; 812 font-weight:bold; 813 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 814 width: 10px; 815 height: 32px; 816 } 817 818 ol.class-list .description { 819 box-sizing: border-box; 820 float:left; 821 display:block; 822 margin:0; 823 padding: 16px 10px 16px 16px; 824 width: 50%; 825 } 826 ol.class-list .description.article { 827 width: 550px; 828 } 829 ol.class-list ol { 830 box-sizing: border-box; 831 float: left; 832 list-style: none; 833 margin: 0; 834 padding: 16px 16px 16px 10px; 835 width: 50%; 836 } 837 ol.class-list .lessons li { 838 margin: 0 0 6px; 839 line-height: 16px; 840 } 841 842 /* Class colors */ 843 ol.class-list li:nth-child(10n+1) .title { 844 background: #00bcd4; 845 } 846 ol.class-list li:nth-child(10n+2) .title { 847 background: #4db6ac; 848 } 849 ol.class-list li:nth-child(10n+3) .title { 850 background: #66bb6a; 851 } 852 ol.class-list li:nth-child(10n+4) .title { 853 background: #7cb342; 854 } 855 ol.class-list li:nth-child(10n+5) .title { 856 background: #afb42b; 857 } 858 ol.class-list li:nth-child(10n+6) .title { 859 background: #ffb300; 860 } 861 ol.class-list li:nth-child(10n+7) .title { 862 background: #ff7043; 863 } 864 ol.class-list li:nth-child(10n+8) .title { 865 background: #ec407a; 866 } 867 ol.class-list li:nth-child(10n+9) .title { 868 background: #ab47bc; 869 } 870 ol.class-list li:nth-child(10n+10) .title { 871 background: #7e57c2; 872 } 873 874 @media (max-width: 719px) { 875 ol.class-list ol, 876 ol.class-list .description { 877 float: none; 878 margin: 16px; 879 padding: 0; 880 width: auto; 881 } 882 } 883 884 885 .hide { 886 display:none !important; 887 } 888 889 890 891 /* inner-doc tabs w/ title */ 892 893div#title-tabs-wrapper { 894 border-bottom:1px solid #ccc; 895 margin:20px 0 30px; 896} 897h1.with-title-tabs { 898 display:inline-block; 899 margin:0 0 -1px 0; 900 padding:0 60px 0 0; 901 border-bottom:1px solid #F9F9F9; 902} 903ul#title-tabs { 904 list-style:none; 905 padding:0; 906 height:29px; 907 margin:0; 908 font-size:16px; 909 line-height:26px; 910 display:inline-block; 911 vertical-align:bottom; 912} 913ul#title-tabs li { 914 display:block; 915 float:left; 916 margin-right:40px; 917 border-bottom: 3px solid transparent; 918} 919ul#title-tabs li.selected { 920 border-bottom: 3px solid #93C; 921} 922ul#title-tabs li a { 923 color:#333; 924} 925ul#title-tabs li a:hover, 926ul#title-tabs li a:active { 927 color:#039BE5 !important; 928} 929 930 931 932/* content body */ 933@-webkit-keyframes glowheader { 934 from { 935 background-color: #33b5e5; 936 color: #000; 937 border-bottom-color: #000; } 938 939 to { 940 background-color: transparent; 941 color: #33b5e5; 942 border-bottom-color: #33b5e5; } } 943 944@-moz-keyframes glowheader { 945 from { 946 background-color: #33b5e5; 947 color: #000; 948 border-bottom-color: #000; } 949 950 to { 951 background-color: transparent; 952 color: #33b5e5; 953 border-bottom-color: #33b5e5; } } 954 955@keyframes glowheader { 956 from { 957 background-color: #33b5e5; 958 color: #000; 959 border-bottom-color: #000; } 960 961 to { 962 background-color: transparent; 963 color: #33b5e5; 964 border-bottom-color: #33b5e5; } } 965 966h1:target, 967h2:target, 968h3:target { 969 -webkit-animation-name: glowheader; 970 -moz-animation-name: glowheader; 971 animation-name: glowheader; 972 -webkit-animation-duration: 0.7s; 973 -moz-animation-duration: 0.7s; 974 animation-duration: 0.7s; 975 -webkit-animation-timing-function: ease-out; 976 -moz-animation-timing-function: ease-out; 977 animation-timing-function: ease-out; } 978 979.design ol h4 { 980 margin-bottom:0; 981} 982.design ol { 983 counter-reset: item; } 984 .design ol>li { 985 font-size: 14px; 986 line-height: 20px; 987 list-style-type: none; 988 position: relative; } 989 .design ol>li:before { 990 content: counter(item) ". "; 991 counter-increment: item; 992 position: absolute; 993 left: -20px; 994 top: 0; } 995 .design ol li.value-1:before { 996 content: "1. "; } 997 .design ol li.value-2:before { 998 content: "2. "; } 999 .design ol li.value-3:before { 1000 content: "3. "; } 1001 .design ol li.value-4:before { 1002 content: "4. "; } 1003 .design ol li.value-5:before { 1004 content: "5. "; } 1005 .design ol li.value-6:before { 1006 content: "6. "; } 1007 .design ol li.value-7:before { 1008 content: "7. "; } 1009 .design ol li.value-8:before { 1010 content: "8. "; } 1011 .design ol li.value-9:before { 1012 content: "9. "; } 1013 .design ol li.value-10:before { 1014 content: "10. "; } 1015.design .with-callouts ol>li { 1016 list-style-position: inside; 1017 margin-left: 0; } 1018 .design .with-callouts ol>li:before { 1019 display: inline; 1020 left: -20px; 1021 float: left; 1022 width: 17px; 1023 color: #33b5e5; 1024 font-weight: 500; } 1025.design .with-callouts ul>li { 1026 list-style-position: outside; } 1027 1028/* special list items */ 1029li.no-bullet { 1030 list-style-type: none !important; } 1031li.no-bullet *{ 1032 margin:0; } 1033 1034.design li.with-icon { 1035 position: relative; 1036 margin-left: 20px; 1037 min-height: 30px; } 1038 .design li.with-icon p { 1039 margin-left: 0 !important; } 1040 .design li.with-icon:before { 1041 position: absolute; 1042 left: -40px; 1043 top: 0; 1044 content: ''; 1045 width: 30px; 1046 height: 30px; } 1047 .design li.with-icon.tablet:before { 1048 background-image: url(../images/styles/ico_phone_tablet.png); } 1049 .design li.with-icon.web:before { 1050 background-image: url(../images/styles/ico_web.png); } 1051 .design li.with-icon.action:before { 1052 background-image: url(../images/styles/ico_action.png); } 1053 .design li.with-icon.use:before { 1054 background-image: url(../images/styles/ico_use.png); } 1055 1056/* figures and callouts */ 1057.figure { 1058 position: relative; } 1059 .figure.pad-below { 1060 margin-bottom: 20px; } 1061 .figure .figure-callout { 1062 position: absolute; 1063 color: #fff; 1064 font-weight: 500; 1065 font-size: 16px; 1066 line-height: 23px; 1067 text-align: center; 1068 background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%; 1069 padding-right: 2px; 1070 width: 30px; 1071 height: 29px; 1072 z-index: 1000; } 1073 .figure .figure-callout.top { 1074 top: -9px; } 1075 .figure .figure-callout.right { 1076 right: -5px; } 1077 1078.figure-caption { 1079 margin: 0 10px 20px 0; 1080 font-size: 14px; 1081 line-height: 20px; 1082 font-style: italic; } 1083 1084/* rows of figures */ 1085.figure-row { 1086 font-size: 0; 1087 line-height: 0; 1088 /* to prevent space between figures */ } 1089 .figure-row .figure { 1090 display: inline-block; 1091 vertical-align: top; } 1092 .figure-row .figure + .figure { 1093 margin-left: 10px; 1094 /* reintroduce space between figures */ } 1095 1096/* video containers */ 1097.framed-galaxynexus-land-span-13 { 1098 background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat 1099scroll top left; 1100 padding: 42px 122px 62px 126px; 1101 overflow: hidden; } 1102 .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, 1103.framed-galaxynexus-land-span-13 img { 1104 width: 512px; 1105 height: 286px; } 1106 1107 1108.framed-galaxynexus-land-span-8{ 1109 background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat 1110scroll top left; 1111 padding: 26px 68px 38px 72px; 1112 overflow: hidden; } 1113 .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video, 1114.framed-galaxynexus-land-span-8 img { 1115 width: 320px; 1116 height: 180px; } 1117 1118.framed-galaxynexus-port-span-9 { 1119 background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat 1120scroll top left; 1121 padding: 95px 122px 107px 124px; 1122 overflow: hidden; } 1123 .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, 1124.framed-galaxynexus-port-span-9 img { 1125 width: 274px; 1126 height: 488px; } 1127 1128.framed-galaxynexus-port-span-5 { 1129 background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat 1130scroll top left; 1131 padding: 75px 31px 76px 33px; 1132 overflow: hidden; } 1133 .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video, 1134.framed-galaxynexus-port-span-5 img { 1135 width: 216px; 1136 height: 384px; } 1137 1138.framed-nexus4-port-216 { 1139 background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat 1140scroll top left; 1141 background-size:240px 465px; 1142 padding: 52px 12px 52px 12px; 1143 overflow: hidden; } 1144 .framed-nexus4-port-216, .framed-nexus4-port-216 video, 1145 .framed-nexus4-port-216 img { 1146 width: 216px; 1147 height: 360px; } 1148 1149.framed-nexus5-port-span-5 { 1150 background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat 1151 scroll top left; 1152 padding: 52px 33px 69px 31px; 1153 overflow: hidden; 1154} 1155 1156.framed-nexus5-port-span-5, 1157.framed-nexus5-port-span-5 video, 1158.framed-nexus5-port-span-5 img { 1159 width: 216px; 1160 height: 384px; 1161} 1162 1163.framed-nexus5-land-span-13 { 1164 background: transparent url(../images/styles/device_nexus5_blank_land_span13.png) no-repeat scroll top left; 1165 padding: 36px 119px 54px 108px; 1166 overflow: hidden; 1167} 1168 1169.framed-nexus5-land-span-13, 1170.framed-nexus5-land-span-13 video, 1171.framed-nexus5-land-span-13 img { 1172 width: 533px; 1173 height: 300px; 1174} 1175 1176.framed-nexus5-port-span-5, 1177.framed-nexus5-port-span-5 video, 1178.framed-nexus5-port-span-5 img { 1179 width: 216px; 1180 height: 384px; 1181} 1182 1183/* wear device frames */ 1184 1185.framed-wear-square { 1186 background: transparent url(../images/styles/device_wear_square.png) no-repeat scroll top left; 1187 background-size: 302px 302px; 1188 height:222px; 1189 width:222px; 1190 padding:40px; 1191 overflow:hidden; 1192} 1193 1194.framed-wear-square-small { 1195 background: transparent url(../images/styles/device_wear_square_small.png) no-repeat scroll top left; 1196 background-size: 169px 200px; 1197 height:147px; 1198 width:147px; 1199 padding:27px 11px; 1200 overflow:hidden; 1201} 1202 1203#jd-content 1204.framed-wear-square img { 1205 height:222px; 1206 width: 222px; 1207 padding:0; 1208 margin:0; 1209} 1210 1211#jd-content 1212.framed-wear-square-small img { 1213 height:147px; 1214 width: 147px; 1215 padding:0; 1216 margin:0; 1217} 1218 1219 1220 1221 1222 1223 1224/* landing page disclosures */ 1225.landing-page-link { 1226 text-decoration: none; 1227 font-weight: 500; 1228 color: #333333; } 1229 .landing-page-link:after { 1230 content: ''; 1231 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 1232 width: 10px; 1233 height: 10px; 1234 display: inline-block; 1235 margin-left: 5px; } 1236 1237/* tooltips */ 1238.tooltip-box { 1239 position: absolute; 1240 background-color: rgba(0, 0, 0, 0.9); 1241 border-radius: 2px; 1242 font-size: 14px; 1243 line-height: 20px; 1244 color: #fff; 1245 padding: 6px 10px; 1246 max-width: 250px; 1247 z-index: 10000; } 1248 .tooltip-box.below:after { 1249 position: absolute; 1250 content: ''; 1251 line-height: 0; 1252 display: block; 1253 top: -10px; 1254 left: 5px; 1255 border: 5px solid transparent; 1256 border-bottom-color: rgba(0, 0, 0, 0.9); } 1257 1258/* video note */ 1259.video-instructions { 1260 margin-top: 10px; 1261 margin-bottom: 10px; } 1262 .video-instructions:before { 1263 content: ''; 1264 background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left; 1265 display: inline-block; 1266 width: 12px; 1267 height: 12px; 1268 margin-right: 8px; } 1269 .video-instructions:after { 1270 content: 'Click device screen to replay movie.'; } 1271 1272/* download buttons */ 1273.download-button { 1274 display: block; 1275 margin-bottom: 5px; 1276 text-decoration: none; 1277 background-color: #33b5e5; 1278 color: #fff !important; 1279 font-weight: 500; 1280 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); 1281 padding: 6px 12px; 1282 border-radius: 2px; } 1283 .download-button:hover, .download-button:focus { 1284 background-color: #0099cc; 1285 color: #fff !important; } 1286 .download-button:active { 1287 background-color: #006699; } 1288 1289/* UI tables and other things found in Writing style and Settings pattern */ 1290.ui-table { 1291 width: 100%; 1292 background-color: #282828; 1293 color: #fff; 1294 border-radius: 2px; 1295 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); 1296 border-collapse: separate; } 1297 .ui-table th, 1298 .ui-table td { 1299 padding: 5px 10px; 1300 background-color: inherit; 1301 border:0;} 1302 .ui-table thead th { 1303 font-weight: bold; } 1304 .ui-table tfoot td { 1305 border-top: 1px solid #494949; 1306 border-right: 1px solid #494949; 1307 text-align: center; } 1308 .ui-table tfoot td:last-child { 1309 border-right: 0; } 1310 1311.layout-with-list-item-margins { 1312 margin-left: 30px !important; } 1313 1314.emulate-content-left-padding { 1315 margin-left: 10px; } 1316 1317.do-dont-label { 1318 margin-bottom: 10px; 1319 padding-left: 20px; 1320 background: transparent none no-repeat scroll 0px 3px; } 1321 .do-dont-label.bad { 1322 background-image: url(../images/styles/ico_wrong.png); } 1323 .do-dont-label.good { 1324 background-image: url(../images/styles/ico_good.png); } 1325 1326 1327 1328 1329/* -------------------------------------------------------------------------- 1330Footer 1331*/ 1332.line { 1333 clear: both; 1334 background: #acbc00; 1335 background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1336 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00), 1337color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); 1338 background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1339 background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1340 background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1341 background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%); 1342 height: 2px; 1343 margin-top: 150px; 1344 position: relative; 1345 z-index: 11; 1346} 1347#footer { 1348 font-size:11px; 1349 clear: both; 1350 color: #999; 1351 padding: 15px 0; 1352 margin-top:10px; 1353 width:auto; 1354} 1355#footer-local ul { 1356 list-style: none; 1357 margin: 5px 0 30px 0; 1358} 1359#footer-local li { 1360 display: inline; 1361} 1362#footer-local li+li:before { 1363 content: '|'; 1364 padding: 0 3px; 1365 color: #e5e5e5; 1366} 1367#footer-global { 1368 padding: 10px 15px; 1369 background: #f5f5f5; 1370} 1371#footer-global { 1372 border-top: 1px solid #ebebeb; 1373 font-size: 11.5px; 1374 line-height: 1.8; 1375 list-style: none; 1376} 1377#footer-global ul { 1378 margin: 0; 1379} 1380#footer-global li { 1381 display: inline; 1382 font-weight: bold; 1383} 1384#footer-global li+li:before { 1385 content: '¬?'; 1386 padding: 0 3px; 1387} 1388* html #footer-global li { 1389 margin: 0 13px 0 0; 1390} 1391* [dir='rtl'] #footer-global li { 1392 margin: 0 0 0 13px; 1393} 1394*+html #footer-global li { 1395 margin: 0 13px 0 0; 1396} 1397*+[dir='rtl'] #footer-global li { 1398 margin: 0 0 0 13px; 1399} 1400#footer-global li a { 1401 font-weight: normal; 1402} 1403.locales { 1404 margin: 10px 0 0 0px; 1405} 1406[dir='rtl'] .locales { 1407 background-position: right center; 1408 float: left; 1409 padding: 0 24px 0 0; 1410} 1411.locales form { 1412 margin: 0; 1413} 1414.locales select, .sites select { 1415 line-height: 3.08; 1416 margin: 0px 0; 1417 border: solid 1px #EBEBEB; 1418 -webkit-appearance: none; 1419 background: white url('../images/arrows-up-down.png') right center no-repeat; 1420 height: 30px; 1421 color: #222; 1422 line-height: normal; 1423 padding: 5px; 1424 width: 230px; 1425} 1426} 1427 1428/* ============================================================================= 1429 Print Only 1430 ========================================================================== */ 1431@media print { 1432 /* configure printed page */ 1433 @page { 1434 margin: 0.75in 1in; 1435 widows: 4; 1436 orphans: 4; 1437 } 1438 1439 /* reset spacing metrics */ 1440 html, body, .wrap { 1441 margin: 0 !important; 1442 padding: 0 !important; 1443 width: auto !important; 1444 } 1445 1446 /* leave enough space on the left for bullets */ 1447 body { 1448 padding-left: 20px !important; 1449 } 1450 #doc-col { 1451 margin-left: 0; 1452 } 1453 1454 /* hide a bunch of non-content elements */ 1455 #header, #footer, #nav-x, #side-nav, 1456 .training-nav-top, .training-nav-bottom, 1457 #doc-col .content-footer, 1458 .nav-x, .nav-y, 1459 .paging-links { 1460 display: none !important; 1461 } 1462 1463 /* remove extra space above page titles */ 1464 #doc-col .content-header { 1465 margin-top: 0; 1466 } 1467 1468 /* bump up spacing above subheadings */ 1469 h2 { 1470 margin-top: 40px !important; 1471 } 1472 1473 /* print link URLs where possible and give links default text color */ 1474 p a:after { 1475 content: " (" attr(href) ")"; 1476 font-size: 80%; 1477 } 1478 p a { 1479 word-wrap: break-word; 1480 } 1481 a { 1482 color: inherit; 1483 } 1484 1485 /* syntax highlighting rules */ 1486 .str { color: #060; } 1487 .kwd { color: #006; font-weight: bold; } 1488 .com { color: #600; font-style: italic; } 1489 .typ { color: #404; font-weight: bold; } 1490 .lit { color: #044; } 1491 .pun { color: #440; } 1492 .pln { color: #000; } 1493 .tag { color: #006; font-weight: bold; } 1494 .atn { color: #404; } 1495 .atv { color: #060; } 1496} 1497 1498/* ============================================================================= 1499 Layout 1500 ========================================================================== */ 1501@media screen, projection, print { 1502 1503.training-nav-top { 1504 border:1px solid #e5e5e5; 1505 border-width: 1px 1px 0; 1506 bottom: -56px; 1507 box-sizing: border-box; 1508 position: absolute; 1509 right: 0; 1510 width: 280px; 1511} 1512 1513.training-nav-bottom { 1514 float:right; 1515 margin:0 0 0 20px; 1516 padding:0 0 20px; 1517} 1518 1519#tb-wrapper, 1520#qv-wrapper { 1521 float:right; 1522 clear:right; 1523 margin:6px 0 0 30px; /* negative top-margin to counter the content-header bottom margin */ 1524 padding:0 0 30px; 1525} 1526 1527#tb-wrapper { 1528 margin:56px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ 1529} 1530 1531#tb, 1532#qv { 1533 border: 1px solid #e5e5e5; 1534 box-sizing: border-box; 1535 float: right; 1536 line-height: 16px; 1537 padding: 5px 0; 1538 width: 240px; 1539} 1540 1541#tb { 1542 width:280px; 1543} 1544 1545#tb h2, 1546#qv h2 { 1547 border-top: 1px solid #e5e5e5; 1548 color: inherit; 1549 font-size: 16px; 1550 line-height: 24px; 1551 margin: 15px 0 4px; 1552 padding: 10px 15px 0; 1553} 1554 1555#tb h2:first-child, 1556#qv h2:first-child { 1557 border-top: 0; 1558 padding-top: 0; 1559 margin-top: 10px; 1560} 1561 1562#tb .download-box, 1563#qv .download-box { 1564 padding:0 0 0 15px; 1565} 1566 1567#tb .download-box .filename, 1568#qv .download-box .filename { 1569 font-size:11px; 1570 margin:4px 4px 10px; 1571} 1572 1573@media (max-width: 719px) { 1574 .training-nav-top { 1575 left: 0; 1576 width: auto; 1577 } 1578 1579 #tb-wrapper { 1580 clear: none; 1581 float: none; 1582 margin-left: 0; 1583 } 1584 1585 #tb { 1586 float: none; 1587 width: auto; 1588 } 1589 1590 #qv-wrapper { 1591 display: none; 1592 } 1593} 1594 1595 1596/* Dev guide quicknav */ 1597 1598.sidebox-wrapper { 1599 float:right; 1600 clear:right; 1601 margin:0 0 0 20px; 1602 padding:0 0 20px; 1603} 1604 1605.sidebox { 1606 width:226px; 1607 font-size:13px; 1608 line-height:18px; 1609 border-left:3px solid #a9e27d; 1610 float:right; 1611 padding:0 0 0 20px; 1612 margin:0 0 1em 20px; 1613} 1614 1615.sidebox h2, 1616.sidebox h3, 1617.sidebox h4, 1618.sidebox h5 { 1619 font-weight:bold; 1620 margin:0 0 10px; 1621 line-height: 16px; 1622} 1623 1624.sidebox * { 1625 font-size:inherit; 1626} 1627 1628.sidebox > *:last-child { 1629 margin-bottom:0; 1630} 1631 1632#tb ol, 1633#tb ul, 1634#qv ul { 1635 list-style-type: none; 1636 margin:0 15px 10px 15px; 1637} 1638 1639#tb li, 1640#qv li { 1641 margin: 8px 0; 1642 padding: 0 0 0 16px; 1643 position: relative; 1644} 1645 1646#tb p { 1647 margin:0 15px 10px; 1648} 1649 1650#qv ol { 1651 list-style:none; 1652 margin:0 15px 15px; 1653 font-size:inherit; 1654 line-height:inherit; 1655} 1656 1657#tb ol ol, 1658#tb ul ul, 1659#qv ol ol, 1660#qv ul ul, 1661.sidebox ol ol, 1662.sidebox ul ul { 1663 margin: 8px 0; 1664} 1665 1666.sidebox p, 1667#qv p, 1668#tb p { 1669 margin: 0 0 10px; 1670} 1671 1672/* related resources blocks in checklists */ 1673 1674/* related resources sections that have dynamic content */ 1675 1676 1677 1678h3.rel-resources { 1679margin:1.25em auto; 1680} 1681 1682/* -------------------------------------------------------------------------- 1683Form 1684*/ 1685.article form { 1686 margin: 0 0 20px; 1687} 1688.article form .form-required { 1689 color: #dd4b39; 1690} 1691.article form fieldset { 1692 margin: 0 0 20px; 1693 padding: 0; 1694} 1695.article form legend { 1696 display: block; 1697 line-height: 1.5; 1698 margin: 0; 1699 padding: 0; 1700} 1701/* 1702.article form ol, .article form ul { 1703 margin: 0 0 0 1em; 1704 padding: 0 0 0 1em; 1705} 1706[dir='rtl'] .article form ol, [dir='rtl'] .article form ul { 1707 margin: 0 1em 0 0; 1708 padding: 0 1em 0 0; 1709} 1710.article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form 1711ul ul { 1712 list-style: none; 1713 margin: 0; 1714 padding: 0; 1715} 1716.article form li { 1717 margin: 0 0 20px; 1718} 1719.article form li li { 1720 margin: 0 0 5px; 1721} 1722*/ 1723.article form label { 1724 display: block; 1725 margin: 0 0 5px; 1726 padding: 0; 1727} 1728.article form input[type='text'], .article form select, .article form textarea, .article form 1729.checkbox-group, .article form .radio-group { 1730 margin-bottom: 15px; 1731} 1732.checkbox-group input { 1733 width: 13px; 1734 height: 13px; 1735 background: #fff; 1736 border: solid 1px #c6c6c6; 1737 float: left; 1738} 1739.article form .checkbox-group, .article form .radio-group { 1740 display: block 1741} 1742.article form select { 1743 border: solid 1px #ebebeb; 1744 border-top-color: #ddd; 1745 -webkit-appearance: none; 1746 background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat; 1747 height: 30px; 1748 color: #222; 1749 line-height: normal; 1750 padding: 5px; 1751 width: 130px; 1752} 1753 1754.article form .browse .browse-msg { 1755 font-size: 11.5px; 1756} 1757.article form .browse .button-secondary { 1758 height: auto; 1759 line-height: 25px; 1760 font-size: 11px; 1761 padding: 0 8px; 1762 margin: 0 10px 15px 0; 1763} 1764.article form input[type='text'], .article form textarea { 1765 border: 1px solid #ebebeb; 1766 border-top-color: #dcdcdc; 1767 color: #222; 1768 line-height: normal; 1769 padding: 6px 10px; 1770 width: 300px; 1771} 1772.article form textarea { 1773 height: 150px; 1774} 1775.article form input[type='text']:focus, .article form textarea:focus { 1776 border-color: #33B5E5; 1777 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 1778 -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 1779 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 1780 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 1781 outline: 0; 1782} 1783.article form input[disabled], .article form textarea[disabled], .article form label.form-disabled { 1784 color: #999; 1785} 1786.article form input[type='text'][disabled], .article form textarea[disabled] { 1787 background-color: #ebebeb; 1788} 1789form .form-error input[type='text'], form .form-error textarea { 1790 border-color: #dd4b39; 1791 margin-right: 20px; 1792} 1793.aside { 1794 -moz-border-radius: 2px; 1795 -webkit-border-radius: 2px; 1796 border-radius: 2px; 1797 margin: 10px 0; 1798 padding: 20px; 1799 position: relative; 1800 background: #f9f9f9; 1801} 1802/* 1803.aside, .notification, .promo { 1804 -moz-border-radius: 2px; 1805 -webkit-border-radius: 2px; 1806 border-radius: 2px; 1807 margin: 10px 0; 1808 padding: 10px; 1809 position: relative; 1810} 1811.aside>:first-child, .notification>:first-child, .promo>:first-child { 1812 margin-top: 0; 1813} 1814.aside>:last-child, .notification>:last-child, .promo>:last-child { 1815 margin-bottom: 0; 1816} 1817.aside { 1818 background: #f9f9f9; 1819} 1820.notification { 1821 background: #fffbe4; 1822 border-color: #f8f6e6; 1823} 1824.promo { 1825 background: #f6f9ff; 1826 border-color: #eff2f9; 1827} 1828*/ 1829 1830/* SDK TOS styles */ 1831 1832div.sdk-terms { 1833 white-space: pre-wrap; 1834 word-wrap: break-word; 1835 font-family: inherit; 1836 font-size: inherit; 1837 padding: 10px; 1838 height: 370px; 1839 width: 738px; 1840 border: 1px solid #444; 1841 background: transparent; 1842 overflow:auto; 1843 margin:0 0 10px; 1844} 1845 1846div.sdk-terms.fullsize { 1847 padding: 0; 1848 height: auto; 1849 width: auto; 1850 border:none; 1851} 1852 1853div.sdk-terms h3, 1854div.sdk-terms h2 { 1855 margin:0; 1856} 1857 1858div#sdk-terms-form { 1859 padding:0 0 0 10px; 1860} 1861 1862div#sdk-terms-form input { 1863 display:inline; 1864 margin:4px 4px 4px 0; 1865} 1866 1867 1868/* -------------------------------------------------------------------------- 1869Code Style 1870*/ 1871pre { 1872 margin:0 0 1em 0; 1873 padding: 1em; 1874 overflow: auto; 1875 border: solid 1px #ddd; 1876 background: #f7f7f7; 1877} 1878.str { color: #800; } /* Code string */ 1879.kwd { color: #008; } 1880.typ { color: #606; } 1881.lit { color: #066; } 1882.pun { color: #660; } 1883.pln { color: #000; } 1884.tag { color: #008; } 1885.atn { color: #828; } 1886.atv { color: #800; } /* XML string */ 1887.dec { color: #606; } 1888 1889/* -------------------------------------------------------------------------- 1890Three-Pane 1891*/ 1892/* Package Nav & Classes Nav */ 1893.three-pane { 1894 position: relative; 1895 border-top: solid 1px #ebebeb; 1896} 1897#packages-nav .js-pane, 1898#classes-nav .js-pane { 1899 overflow:visible; 1900} 1901#packages-nav { 1902 height:270px; 1903 max-height: inherit; 1904 overflow: hidden; 1905 position: relative; 1906} 1907#classes-nav { 1908 overflow: hidden; 1909 position: relative; 1910} 1911#packages-nav ul, #classes-nav ul { 1912 list-style-type: none; 1913 margin: 10px 0 20px 0; 1914 padding: 0; 1915} 1916#classes-nav li { 1917 font-weight: bold; 1918 margin: 5px 0; 1919} 1920#packages-nav li, 1921#classes-nav li li { 1922 margin: 0; 1923} 1924#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 1925#classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited { 1926 padding: 0 0 0 4px; 1927} 1928#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 1929#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited, 1930#nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited { 1931 color: #222; 1932 font-weight: normal; 1933} 1934#packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited, 1935#classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited { 1936 display: block; 1937} 1938#packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected 1939a:visited, 1940#classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected 1941a:visited, 1942#nav-tree li div.selected { 1943 font-weight: 500; 1944 color: #0099cc; 1945 background-color:#fff; } 1946 #packages-nav li.selected ul li a, 1947 #classes-nav li.selected ul li a { 1948 /* don't highlight child items */ 1949 color: #555555; } 1950#nav-tree li div.selected a { 1951 font-weight: 500; 1952 color: #0099cc; 1953} 1954#nav-swap { 1955 height:30px; 1956 border-top:1px solid #ccc; 1957} 1958#nav-swap a { 1959 display:inline-block; 1960 height:100%; 1961 color: #222; 1962 font-size: 12px; 1963 padding: 5px 0 5px 5px; 1964} 1965 1966#nav-swap .fullscreen { 1967 float: right; 1968 width: 24px; 1969 height: 24px; 1970 text-indent: -1000em; 1971 padding:0; 1972 margin:3px 5px 0; 1973 background: url(../images/fullscreen.png) no-repeat -24px 0; 1974} 1975#nav-swap .fullscreen.disabled { 1976 background-position: 0 0; 1977} 1978#nav-swap .fullscreen:hover, 1979#nav-swap .fullscreen:focus { 1980 cursor:pointer; 1981} 1982 1983 1984/* nav tree */ 1985#swapper, #nav-tree, #tree-list { 1986 overflow:hidden; 1987 margin-left:0; 1988} 1989 1990#nav-tree ul { 1991 list-style:none; 1992 padding:0; 1993 margin:10px 0; 1994} 1995 1996#nav-tree ul li div { 1997 padding:0 0 0 4px; 1998} 1999 2000#side-nav #nav-tree ul li a, 2001#side-nav #nav-tree ul li span.no-children { 2002 padding: 0; 2003 margin: 0; 2004} 2005 2006#nav-tree .plus { 2007 margin: 0 3px 0 0; 2008} 2009 2010#nav-tree ul ul { 2011 list-style: none; 2012 margin: 0; 2013 padding: 0 0 0 0; 2014} 2015 2016#nav-tree ul li { 2017 margin: 0; 2018 padding: 0 0 0 0; 2019 white-space: nowrap; 2020} 2021 2022#nav-tree .children_ul { 2023 padding:0; 2024 margin:0; 2025} 2026#nav-tree .children_ul li div { 2027 padding:0 0 0 10px; 2028} 2029#nav-tree .children_ul .children_ul li div { 2030 padding:0 0 0 20px; 2031} 2032 2033#nav-tree a.nolink { 2034 color: #222; 2035 text-decoration: none; 2036} 2037 2038#nav-tree span.label { 2039 width: 100%; 2040} 2041 2042#nav-tree { 2043 overflow-x: auto; 2044 overflow-y: scroll; 2045 outline:0; 2046} 2047 2048 2049/* Content */ 2050#doc-col { 2051 margin-right:0; 2052} 2053 2054/* Uncomment this for preview release watermark 2055#doc-col { 2056 background: url('../images/preview.png') repeat; 2057} 2058*/ 2059 2060#doc-content-container { 2061 margin-left: 291px 2062} 2063#doc-header, #doc-content { 2064 padding: 1em 2em; 2065} 2066#doc-header { 2067 background: #f7f7f7; 2068} 2069#doc-header h1 { 2070 line-height: 0; 2071 margin-bottom: 15px; 2072} 2073#api-info-block { 2074 float: right; 2075 font-weight: bold; 2076} 2077#api-info-block a, #api-info-block a:active, #api-info-block a:visited { 2078 color: #222; 2079} 2080#api-info-block a:hover, #api-info-block a:focus { 2081 color: #33B5E5; 2082} 2083#api-nav-header { 2084 height:19px; /* plus 16px padding = 35; same as #nav li */ 2085 font-size:14px; 2086 padding: 8px 0; 2087 margin: 0; 2088 border-bottom: 1px solid #CCC; 2089 background:#e9e9e9; 2090 background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */ 2091 line-height: 19px; /* Fix regression after page line-height is bumped to 24px */ 2092} 2093#api-nav-title { 2094 padding:0 5px; 2095 white-space:nowrap; 2096} 2097 2098#api-level-toggle { 2099 float:right; 2100 padding:0 5px; 2101} 2102 2103#api-level-toggle label { 2104 margin:0; 2105 vertical-align:top; 2106 line-height: 19px; 2107 font-size:13px; 2108 height: 19px; 2109} 2110 2111#api-level-toggle .select-wrapper { 2112 width: 35px; 2113 display: inline-block; 2114 overflow: hidden; 2115} 2116#api-level-toggle select { 2117 border: 0; 2118 appearance:none; 2119 -moz-appearance:none; 2120 -webkit-appearance: none; 2121 background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat; 2122 color: #222; 2123 height: 19px; 2124 line-height: 19px; 2125 padding: 0; 2126 margin:1px 0 0 0; 2127 width:150%; 2128 font-size:13px; 2129 vertical-align:top; 2130 outline:0; 2131} 2132 2133 2134/* Toggle for revision notes and stuff */ 2135div.toggle-content.closed .toggle-content-toggleme { 2136 display:none; 2137} 2138 2139#jd-content img.toggle-content-img { 2140 margin:0 5px 5px 0; 2141} 2142 2143div.toggle-content-toggleme { 2144 padding:0 0 0 15px; 2145} 2146 2147 2148/* API LEVEL FILTERED MEMBERS */ 2149 2150.absent, 2151.absent a:link, 2152.absent a:visited, 2153.absent a:hover, 2154.absent * { 2155 color:#bbb !important; 2156 cursor:default !important; 2157 text-decoration:none !important; 2158} 2159#devdoc-nav li.absent.selected, 2160#devdoc-nav li.absent.selected *, 2161#devdoc-nav div.label.absent.selected, 2162#devdoc-nav div.label.absent.selected * { 2163 background-color:#eaeaea !important; 2164} 2165.absent h4.jd-details-title, 2166.absent h4.jd-details-title * { 2167 background-color:#f6f6f6 !important; 2168} 2169.absent img { 2170 opacity: .3; 2171 filter: alpha(opacity=30); 2172 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 2173} 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183/* JQUERY RESIZABLE STYLES */ 2184.ui-resizable { position: relative; } 2185.ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; } 2186.ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; } 2187/*body .ui-resizable-disabled .ui-resizable-handle { display: none; } 2188body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/ 2189.ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0; 2190border-bottom: solid 1px #ededed; 2191 background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; } 2192/* 2193.ui-resizable-e { 2194cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid 21951px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; } 2196*/ 2197 2198/* -------------------------------------------------------------------------- 2199Lightbox 2200*/ 2201.lightbox { 2202 width: 769px; 2203 padding: 1.5em; 2204 margin: 0 auto; 2205 border: solid 1px #dcdcdc; 2206 background: #fff; 2207 -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1); 2208 -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1); 2209 box-shadow: 1px 1px 5px rgba(0,0,0,0.1) 2210} 2211.lightbox .header { 2212 float: left; 2213 width: 720px; 2214 margin: -10px 20px 10px 0; 2215} 2216.lightbox .close { 2217 float: right; 2218 width: 10px; 2219 height: 10px; 2220 margin: -10px -10px 10px 0; 2221 text-indent: -1000em; 2222 background: url(../images/close.png) no-repeat 0 0; 2223} 2224.lightbox .close:hover, .lightbox .close:focus { 2225 background-position: -10px 0; 2226} 2227 2228/* -------------------------------------------------------------------------- 2229Styles for samples browser 2230*/ 2231 2232#codesample-wrapper { 2233 width:100000px; /* super wide to contain floats, but doesn't cause scroll */ 2234 overflow:visible; 2235} 2236pre#codesample-block { 2237 float:left; 2238 overflow:visible; 2239 background:transparent; 2240 border:none; 2241} 2242pre#codesample-block a.number { 2243 display:none; 2244} 2245pre#codesample-block .code-line:hover { 2246 background:#e7e7e7; 2247} 2248pre#codesample-line-numbers { 2249 float:left; 2250 width:2em; 2251 background:transparent; 2252 border:none; 2253 border-right:1px solid #ccc; 2254 padding-left:0; 2255 font-family:monospace; 2256 text-align:right; 2257 -webkit-touch-callout: none; 2258 -webkit-user-select: none; 2259 -khtml-user-select: none; 2260 -moz-user-select: -moz-none; 2261 -ms-user-select: none; 2262 user-select: none; 2263} 2264pre#codesample-line-numbers a { 2265 color:#999; 2266} 2267pre#codesample-line-numbers.hidden { 2268 display:none; 2269} 2270pre#codesample-block span.code-line { 2271 width:100%; 2272 display:inline-block; 2273} 2274 2275/* 2276Styles for displaying image or video resources in samples browser. 2277Resources are marked as no-display if they exceed the size limit. 2278*/ 2279div#codesample-resource img, div#codesample-resource video { 2280 border: 1px solid #ececec; 2281} 2282 2283div#codesample-resource.noDisplay div { 2284 border: 1px solid #ececec; 2285 width:120px; 2286 margin-bottom:4px; 2287 padding:20px; 2288} 2289 2290div#codesample-resource .noDisplay-message:after { 2291 font-style:italic; 2292 font-size:12px; 2293 content: 'This resource is not available for browsing. To view it, please download the project.'; 2294} 2295 2296/* 2297Styles for project structure (treeview) page 2298*/ 2299.structure-dir { 2300background-image:url(../../assets/images/folder.png); 2301background-repeat:no-repeat; 2302background-position:16px 2px; 2303 margin:.25em 0 0 0; 2304 padding:0 0 0 0; 2305} 2306 2307.structure-toggleme { 2308 margin:0 0 0 3em; 2309 padding:0 0 0 0; 2310 text-decoration:none; 2311} 2312 2313.structure-java{ 2314background-image:url(../../assets/images/file-java.png); 2315background-repeat:no-repeat; 2316background-position:0px 2px; 2317 margin:.3em 0 0 0; 2318 padding:.3em 0 .3em 22px; 2319} 2320 2321.structure-file { 2322background-image:url(../../assets/images/file-generic.png); 2323background-repeat:no-repeat; 2324background-position:0px 2px; 2325 margin:.3em 0 0 0; 2326 padding:.3em 0 .3em 22px; 2327} 2328 2329.structure-xml { 2330background-image:url(../../assets/images/file-xml.png); 2331background-repeat:no-repeat; 2332background-position:0px 2px; 2333 margin:.3em 0 0 0; 2334 padding:.3em 0 .25em 22px; 2335} 2336 2337.structure-img { 2338background-image:url(../../assets/images/file-image.png); 2339background-repeat:no-repeat; 2340background-position:0px 2px; 2341 margin:.3em 0 0 0; 2342 padding:.3em 0 .25em 22px; 2343} 2344 2345.structure-manifest { 2346background-image:url(../../assets/images/file-manifest.png); 2347background-repeat:no-repeat; 2348 margin:.0 0 0 1.25em; 2349 padding:0 0 0 22px; 2350 text-decoration:none; 2351} 2352 2353#jd-content .structure-toggle-img { 2354 margin:.5em 0 0 0; 2355padding-right:2.1em; 2356} 2357 2358.dirInfo { 2359 margin-left:2em; 2360} 2361 2362.structure-dir a { 2363 text-decoration:none; 2364} 2365 2366.structure-manifest a { 2367 text-decoration: none; 2368} 2369.structure-file a { 2370 text-decoration: none; 2371} 2372 2373.sampleEmbed { 2374 background-color:rgb(249, 249, 249); 2375} 2376 2377.sampleEmbed ol.lineNumbers { 2378 list-style-type: decimal; 2379 padding-left:1em; 2380} 2381 2382.sampleEmbed ol.lineNumbers li { 2383border-left:1px solid #ddd; 2384border-right:1px solid #ddd; 2385color:gray; 2386background-color:#f7f7f7; 2387margin:0 0 0 24px; 2388padding: 2px 2px 2px 6px; 2389} 2390 2391.sampleEmbed ol.lineNumbers li:hover { 2392background: #efefef; 2393} 2394 2395.samples-nav li a { 2396 overflow: hidden; 2397 text-overflow: ellipsis; 2398 white-space: nowrap; 2399} 2400 2401/* -------------------------------------------------------------------------- 2402Styles for raw formatted line numbers (not used with listformatted version) 2403div.sampleLine div.lineNumber { 2404 display: inline; 2405} 2406div.sampleLine div.lineCode { 2407 display: inline; 2408 padding-left:6px; 2409} 2410div.sampleLine { 2411 padding:0; 2412 margin:0; 2413}*/ 2414 2415/* -------------------------------------------------------------------------- 2416Butterbar 2417*/ 2418#butterbar-wrapper { 2419 position:absolute; 2420 top:0; 2421 left:0; 2422 width:100%; 2423} 2424#butterbar { 2425 width:100%; 2426 margin:0 auto; 2427} 2428#butterbar-message { 2429 background-color:rgba(255, 187, 51, .4); 2430 font-size:13px; 2431 padding: 5px 0; 2432 text-align:center; 2433} 2434a#butterbar-message { 2435 cursor:pointer; 2436 display:block; 2437} 2438a#butterbar-message:hover { 2439 text-decoration:underline; 2440} 2441 2442/* -------------------------------------------------------------------------- 2443Misc and article typography 2444*/ 2445 2446 2447.clearfix:before, .clearfix:after { 2448 content: ""; 2449 display: table 2450} 2451.clearfix:after { 2452 clear: both 2453} 2454.clearfix { 2455 *zoom: 1 2456} 2457table.blank th, table.blank td { 2458 border: 0; 2459 background: none 2460} 2461.caption { 2462 margin: 0.5em 0 2em 0; 2463 color: #000; 2464 font-size: 11.5px; 2465} 2466 2467.nolist, .nolist ul, .nolist ol { 2468 list-style:none; 2469 margin-left:0; 2470} 2471#tb .nolist { 2472 margin-left:15px; 2473} 2474 2475dl.xml>dt { 2476 text-transform:uppercase; 2477} 2478dl.xml dl.attr { 2479 margin-top:0; 2480} 2481 2482pre.classic { 2483 background-color:transparent; 2484 border:none; 2485 padding:0; 2486} 2487 2488p.img-caption { 2489 margin: -10px 0 20px; 2490 font-size: 13px; 2491} 2492 2493div.figure-center { 2494 margin: 32px auto 24px; 2495 max-width: 100%; 2496} 2497 2498div.figure, 2499div.figure-right { 2500 clear: right; 2501 float: right; 2502 margin: 10px 0 0 0; 2503 padding: 0 0 0 20px; 2504 max-width: 50%; 2505 /* width must be defined w/ an inline style matching the image width */ 2506} 2507 2508div.figure-left { 2509 clear: left; 2510 float: left; 2511 margin: 10px 0 0 0; 2512 padding: 0 20px 0 0; 2513 max-width: 50%; 2514 /* width must be defined w/ an inline style matching the image width */ 2515} 2516 2517@media (max-width: 719px) { 2518 /* Collapse on mobile. */ 2519 div.figure, 2520 div.figure-right, 2521 div.figure-left { 2522 float: none; 2523 clear: none; 2524 padding: 0; 2525 margin: 32px auto 24px; 2526 max-width: 100%; 2527 } 2528} 2529 2530img.frame { 2531 border:1px solid #DDD; 2532 padding:4px; 2533} 2534 2535p.table-caption { 2536 margin: 0 0 4px 0; 2537 font-size:13px; 2538} 2539 2540p.code-caption { 2541 margin-bottom: 4px; 2542 font: 12px/1.5 monospace; 2543} 2544 2545p.note, div.note, 2546p.caution, div.caution, 2547p.warning, div.warning { 2548 padding: 0 0 0 20px; 2549 border-left: 3px solid; 2550 margin: 16px 0; 2551} 2552 2553p.note, div.note { 2554 border-color: #66c2ff; 2555} 2556 2557p.caution, div.caution { 2558 border-color: #f81; 2559} 2560 2561p.warning, div.warning { 2562 border-color: #f55; 2563} 2564 2565div.note.design { 2566 border-left: 4px solid #33B5E5; 2567} 2568 2569div.note.develop { 2570 border-left: 4px solid #F80; 2571} 2572 2573div.note.distribute { 2574 border-left: 4px solid #9C0; 2575} 2576 2577.note p, .caution p, .warning p { 2578 margin:0 0 5px; 2579} 2580 2581.note p:last-child, .caution p:last-child, .warning p:last-child { 2582 margin-bottom:0; 2583} 2584 2585body.about blockquote { 2586 display:block; 2587 float:right; 2588 width:280px; 2589 font-size:20px; 2590 font-style:italic; 2591 line-height:24px; 2592 color:#33B5E5; 2593 margin:0 0 20px 30px; 2594} 2595 2596div.design-announce p { 2597 margin:0 0 10px; 2598} 2599 2600.expandable { 2601 height:34px; 2602 padding-left:20px; 2603 position:relative; 2604} 2605.expandable:before { 2606 content: ''; 2607 background-image: url(../images/styles/disclosure_down.png); 2608 background-repeat:no-repeat; 2609 background-position: -12px -9px; 2610 width: 20px; 2611 height: 20px; 2612 display: inline-block; 2613 position: absolute; 2614 top: 0; 2615 left: 0; } 2616} 2617.expandable.expanded:before { 2618 background-image: url(../images/styles/disclosure_up.png); 2619} 2620 2621/* notice box for cross links between Design/Develop docs */ 2622a.notice-developers-video, 2623a.notice-developers, 2624a.notice-designers-video, 2625a.notice-designers { 2626 float:right; 2627 clear:right; 2628 width:238px; 2629 min-height:50px; 2630 margin:0 0 20px 20px; 2631 border:1px solid #ddd; 2632} 2633a.notice-developers-video.wide, 2634a.notice-developers.wide, 2635a.notice-designers-video.wide, 2636a.notice-designers.wide { 2637 width:278px; 2638} 2639a.notice-developers-video div, 2640a.notice-developers div, 2641a.notice-designers-video div, 2642a.notice-designers div { 2643 min-height:40px; 2644 background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px; 2645 background-size:40px 40px; 2646 padding:10px 10px 10px 60px; 2647} 2648a.notice-designers div { 2649 background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px; 2650 background-size:40px 40px; 2651} 2652a.notice-designers-video div { 2653 background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px; 2654 background-size:40px 40px; 2655} 2656a.notice-developers-video div { 2657 background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px; 2658 background-size:40px 40px; 2659} 2660a.notice-developers-video:hover, 2661a.notice-developers:hover, 2662a.notice-designers-video:hover, 2663a.notice-designers:hover { 2664 background:#eee; 2665} 2666a.notice-developers-video h3, 2667a.notice-developers h3, 2668a.notice-designers-video h3, 2669a.notice-designers h3 { 2670 font-size:13px; 2671 line-height:18px; 2672 font-weight:bold; 2673 text-transform:uppercase; 2674 color:#000 !important; 2675 margin:0 0 1px; 2676} 2677a.notice-developers-video p, 2678a.notice-developers p, 2679a.notice-designers-video p, 2680a.notice-designers p { 2681 margin:0; 2682 line-height:14px; 2683} 2684a.notice-developers-video.left, 2685a.notice-developers.left, 2686a.notice-designers-video.left, 2687a.notice-designers.left { 2688 margin-left:0; 2689 float:left; 2690} 2691 2692 2693/* hide nested list items; companion to hideNestedLists() */ 2694.hide-nested li ol, 2695.hide-nested li ul { 2696 display:none; 2697} 2698 2699a.header-toggle { 2700 display:block; 2701 float:right; 2702 text-transform:uppercase; 2703 font-size:.8em !important; 2704 font-weight:normal; 2705 margin-top:2px; 2706} 2707 2708 2709/* for IDE instruction toggle (Studio/Eclipse/Other) */ 2710select.ide { 2711 background: transparent; 2712 border: 1px solid #bbb; 2713 border-left: 0; 2714 border-right: 0; 2715 margin: 10px 0; 2716 padding: 10px 0; 2717 color:#666; 2718} 2719select.ide, 2720select.ide option { 2721 font-family: inherit; 2722 font-size:16px; 2723 font-weight:500; 2724} 2725/* hide all except studio by default */ 2726.select-ide.eclipse, 2727.select-ide.other { 2728 display:none; 2729} 2730/* ... unless studio also includes one of the others */ 2731.select-ide.studio.eclipse, 2732.select-ide.studio.other { 2733 display:none; 2734} 2735 2736 2737/* ----------------------------------------------- 2738good/bad example containers 2739*/ 2740 2741div.example-block { 2742 background-repeat: no-repeat; 2743 background-position:10px 8px; 2744 background-color:#ccc; 2745 padding:4px; 2746 margin:.8em auto 1.5em 2em; 2747 width:260px; 2748 float:right; 2749} 2750/* red container */ 2751.example-block.bad { 2752 background-image: url(/images/example-bad.png); 2753 background-color:#f4cccc; 2754} 2755/* green container */ 2756.example-block.good { 2757 background-image: url(/images/example-good.png); 2758 background-color:#d9ead3; 2759} 2760/* container heading div */ 2761#jd-content .example-block .heading { 2762 font-weight:bold; 2763 margin:6px 0 9px 36px; 2764 padding:6px auto; 2765} 2766/* container image (if any) */ 2767#jd-content .example-block img { 2768 margin:0; 2769 padding:0px; 2770} 2771 2772.example-block table { 2773 margin:0; 2774} 2775 2776/* ----------------------------------------------- 2777Dialog box for popup messages 2778*/ 2779 2780div.dialog { 2781 height:0; 2782 margin:0 auto; 2783} 2784 2785div.dialog>div { 2786 z-index:99; 2787 position:fixed; 2788 margin:70px 0; 2789 width: 391px; 2790 height: 200px; 2791 background: #F7F7F7; 2792-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); 2793-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); 2794box-shadow: 0 0 15px rgba(0,0,0,0.5); 2795} 2796/* IE6 can't position fixed */ 2797* html div.dialog div { position:absolute; } 2798 2799 2800div#deprecatedSticker { 2801 display:none; 2802 z-index:99; 2803 position:fixed; 2804 right:15px; 2805 top:114px; 2806 margin:0; 2807 padding:1em; 2808 background:#FFF; 2809 border:1px solid #dddd00; 2810 box-shadow:-5px 5px 10px #ccc; 2811 -moz-box-shadow:-5px 5px 10px #ccc; 2812 -webkit-box-shadow:-5px 5px 10px #ccc; 2813} 2814 2815div#langMessage, 2816div#naMessage { 2817 display:none; 2818 width:555px; 2819 height:0; 2820 margin:0 auto; 2821} 2822 2823 2824div#langMessage>div, 2825div#naMessage div { 2826 z-index:99; 2827 width:450px; 2828 position:fixed; 2829 margin:50px 0; 2830 padding:4em 4em 3em; 2831 background:#FFF; 2832 border:1px solid #999; 2833 box-shadow:-10px 10px 40px #888; 2834 -moz-box-shadow:-10px 10px 40px #888; 2835 -webkit-box-shadow:-10px 10px 40px #888; 2836} 2837/* IE6 can't position fixed */ 2838* html div#langMessage>div, 2839* html div#naMessage div { position:absolute; } 2840 2841div#naMessage strong { 2842 font-size:1.1em; 2843} 2844 2845div#langMessage .lang { 2846 display:none; 2847} 2848 2849/* -------------------------------------------------------------------------- 2850Slideshow Controls & Next/Prev 2851*/ 2852.slideshow-next, .slideshow-prev { 2853 width: 20px; 2854 height: 36px; 2855 text-indent: -1000em; 2856} 2857.slideshow-container { 2858 margin: 2em 0; 2859} 2860.slideshow-container:before, .slideshow-container:after { 2861 content: ""; 2862 display: table; 2863 clear: both; 2864} 2865a.slideshow-next, a.slideshow-next:visited { 2866 2867 float: right; 2868 2869 background: url(../images/arrow-right.png) no-repeat 0 0 2870 2871} 2872 2873a.slideshow-prev, a.slideshow-prev:visited { 2874 2875 float: left; 2876 2877 background: url(../images/arrow-left.png) no-repeat 0 0 2878 2879} 2880 2881.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus { 2882 2883 background-position: 0 -36px 2884 2885} 2886 2887.slideshow-next:active, .slideshow-prev:active { 2888 2889 background-position: 0 -72px 2890 2891} 2892.slideshow-nav { 2893 width: 74px; 2894 margin: 0 auto; 2895} 2896.slideshow-nav a, .slideshow-nav a:visited { 2897 display: inline-block; 2898 width: 12px; 2899 height: 12px; 2900 margin: 0 2px 20px 2px; 2901 background: #ccc; 2902 -webkit-border-radius: 50%; 2903 -moz-border-radius: 50%; 2904 border-radius: 50%; 2905} 2906.slideshow-nav a:hover, .slideshow-nav a:focus { 2907 2908 background: #33B5E5 2909} 2910 2911.slideshow-nav a:active { 2912 2913 background: #1e799a; 2914 background: #ebebeb; 2915 -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2916 -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2917 box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2918} 2919.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited { 2920 background: #33B5E5 2921} 2922/* -------------------------------------------------------------------------- 2923Tabs 2924*/ 2925ul.tabs { 2926 padding: 0; 2927 margin: 2em 0 0 0; 2928} 2929ul.tabs:before, ul.tabs:after { 2930 content: ""; 2931 display: table; 2932 clear: both; 2933} 2934ul.tabs li { 2935 list-style-type: none; 2936 float: left; 2937} 2938ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited { 2939 display: block; 2940 height: 36px; 2941 line-height: 36px; 2942 padding: 0 15px; 2943 margin-right: 2px; 2944 color: #222; 2945 -moz-border-radius-topleft: 2px; 2946 -moz-border-radius-topright: 2px; 2947 -moz-border-radius-bottomright: px; 2948 -moz-border-radius-bottomleft: px; 2949 -webkit-border-radius: 2px 2px px px; 2950 border-radius: 2px 2px px px; 2951 border-top: solid 1px #ebebeb; 2952 border-left: solid 1px #ebebeb; 2953 border-right: solid 1px #ebebeb; 2954 background-color: #fff; 2955 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 2956 background-image: -webkit-linear-gradient(top, #ffffff, #fafafa); 2957 background-image: -moz-linear-gradient(top, #ffffff, #fafafa); 2958 background-image: -ms-linear-gradient(top, #ffffff, #fafafa); 2959 background-image: -o-linear-gradient(top, #ffffff, #fafafa); 2960 background-image: linear-gradient(top, #ffffff, #fafafa); 2961 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', 2962EndColorStr='#fafafa'); 2963} 2964ul.tabs li a:hover { 2965 color: #33B5E5; 2966} 2967ul.tabs li a.selected { 2968 height: 37px; 2969 color: #33B5E5; 2970 background-color: #f7f7f7; 2971 background-image: none; 2972 border-color: #ddd; 2973} 2974.tab-content { 2975 padding: 1.2em; 2976 margin: -1px 0 2em 0; 2977 -webkit-border-radius: 2px; 2978 -moz-border-radius: 2px; 2979 border-radius: 2px; 2980 border: solid 1px #ddd; 2981 background: #f7f7f7; 2982} 2983/* -------------------------------------------------------------------------- 2984Feature Boxes 2985*/ 2986.feature-box { 2987 width: 291px; 2988 height: 200px; 2989 position: relative; 2990 background: #F7F7F7; 2991} 2992.box-border .top, .box-border .bottom, .box-border .left, .box-border .right { 2993 z-index: 100; 2994 position: absolute; 2995 background-color: #aaa; 2996} 2997.box-border .top, .box-border .bottom { 2998 width: 291px; 2999 height: 1px; 3000} 3001.dialog .box-border .top, 3002.dialog .box-border .bottom { width:391px; } 3003 3004.box-border .left, .box-border .right { 3005 width: 1px; 3006 height: 8px; 3007} 3008.box-border .top { top: 0; left: 0 } 3009.box-border .top .left { top: 1px; left: 0 } 3010.box-border .top .right { top: 1px; right: 0 } 3011.box-border .bottom .left { top: -8px; left: 0 } 3012.box-border .bottom { top: 200px; left: 0 } 3013.box-border .bottom .right { top: -8px; right: 0 } 3014 3015.feature-box h4, 3016.dialog h4 { 3017 margin: 15px 18px 10px; 3018 padding:0; 3019} 3020 3021.feature-box p, 3022.dialog p { 3023 margin: 10px 18px; 3024 padding:0; 3025} 3026.feature-box .link, 3027.dialog .link { 3028 border-top: 1px solid #dedede; 3029 bottom: 0; 3030 position: absolute; 3031 width: inherit; 3032} 3033.feature-box a, .feature-box h4, 3034.dialog a, .dialog h4 { 3035 -webkit-transition: color .4s ease; 3036 -moz-transition: color .4s ease; 3037 -o-transition: color .4s ease; 3038 transition: color .4s ease; 3039} 3040.feature-box:hover { 3041 cursor: pointer; 3042} 3043.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover 3044.left, .feature-box:hover .right { 3045 background-color: #33B5E5; 3046} 3047.feature-box:hover h4, .feature-box:hover a { 3048 color: #33B5E5; 3049} 3050/* -------------------------------------------------------------------------- 3051Page-Specific Styles 3052*/ 3053.colors { 3054 position: relative; 3055 float: left; 3056 width: 92px; 3057 margin: 40px 0 20px; 3058} 3059.colors div { 3060 color: #fff; 3061 font-size: 11.5px; 3062 width: 82px; 3063 height: 82px; 3064 margin-top:-30px; 3065 line-height: 82px; 3066 text-align: center; 3067 border: solid 5px #fff; 3068 -webkit-border-radius: 50%; 3069 -moz-border-radius: 50%; 3070 border-radius: 50%; 3071} 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086/* ########### REFERENCE DOCS ################## */ 3087 3088#packages-nav h2, 3089#classes-nav h2 { 3090 font-size:18px; 3091 margin:0; 3092 padding:0 0 0 4px; 3093} 3094 3095#jd-header { 3096 padding: 0 0 12px; 3097 margin: 20px 0 12px; 3098 font-size:12px; 3099 padding-bottom:12px; 3100 border-bottom:solid 1px #ccc; 3101} 3102 3103#jd-header h1 { 3104 margin:0; 3105 padding:0 0 6px 0; 3106} 3107 3108/* not sure if this is needed in the ref docs, disabling for now 3109.jd-descr h2 { 3110 margin:16px 0; 3111} 3112*/ 3113 3114/* First paragraph of a content pages is a bit larger 3115 - note the very specific selector. */ 3116.jd-descr > p:first-child, 3117.jd-descr > #tb-wrapper + p, 3118.jd-descr > #qv-wrapper + p { 3119 font-size: 16px; 3120 margin-bottom: 16px; 3121} 3122 3123/* page-top-right container for reference pages (holds 3124links to summary tables) */ 3125#api-info-block { 3126 font-size:12px; 3127 margin:20px 0 0; 3128 padding:0 10px 6px; 3129 font-weight:normal; 3130 float:right; 3131 text-align:right; 3132 color:#999; 3133 max-width:80%; 3134 font-size: 12px; 3135 line-height:14px; 3136} 3137 3138#api-info-block div.api-level { 3139 font-weight:bold; 3140 font-size:inherit; 3141 float:none; 3142 color:#222; 3143 padding:0; 3144 margin:0; 3145} 3146 3147/* inheritance table */ 3148.jd-inheritance-table { 3149 border-spacing:0; 3150 margin:0; 3151 padding:0; 3152 font-size:12px; 3153 line-height:14px; 3154 background-color:transparent; 3155} 3156.jd-inheritance-table tr td { 3157 border: none; 3158 margin: 0; 3159 padding: 0; 3160 background-color:transparent; 3161} 3162.jd-inheritance-table .jd-inheritance-space { 3163 font-weight:bold; 3164 width:1em; 3165} 3166.jd-inheritance-table .jd-inheritance-interface-cell { 3167 padding-left: 17px; 3168} 3169 3170 3171 3172.jd-sumtable a { 3173 text-decoration:none; 3174} 3175 3176.jd-sumtable a:hover { 3177 text-decoration:underline; 3178} 3179 3180/* the link inside a sumtable for "Show All/Hide All" */ 3181.toggle-all { 3182 display:block; 3183 float:right; 3184 font-weight:normal; 3185 font-size:0.9em; 3186} 3187 3188/* adjustments for in/direct subclasses tables */ 3189.jd-sumtable.jd-sumtable-subclasses { 3190 margin: 1em 0 0 0; 3191 max-width:968px; 3192 background-color:transparent; 3193 font-size:13px; 3194} 3195 3196/* extra space between end of method name and open-paren */ 3197.sympad { 3198 margin-right: 2px; 3199} 3200 3201/* right alignment for the return type in sumtable */ 3202.jd-sumtable .jd-typecol { 3203 text-align:right; 3204} 3205 3206/* adjustments for the expando table-in-table */ 3207.jd-sumtable-expando { 3208 margin:.5em 0; 3209 padding:0; 3210} 3211 3212/* a div that holds a short description */ 3213.jd-descrdiv { 3214 padding:3px 1em 0 1em; 3215 margin:0; 3216 border:0; 3217} 3218 3219#jd-content img.jd-expando-trigger-img { 3220 padding:0 4px 4px 0; 3221 margin:0; 3222} 3223 3224.jd-sumtable-subclasses div#subclasses-direct, 3225.jd-sumtable-subclasses div#subclasses-indirect { 3226 margin:0 0 0 13px; 3227} 3228 3229 3230 3231/********* MEMBER REF *************/ 3232 3233 3234.jd-details { 3235/* border:1px solid #669999; 3236 padding:4px; */ 3237 margin:0 0 1em; 3238} 3239 3240/* API reference: a container for the 3241.tagdata blocks that make up the detailed 3242description */ 3243.jd-details-descr { 3244 padding:0; 3245 margin:.5em .25em; 3246} 3247 3248/* API reference: a block containing 3249a detailed description, a params table, 3250seealso list, etc */ 3251.jd-tagdata { 3252 margin:.5em 1em; 3253} 3254 3255.jd-tagdata p { 3256 margin:0 0 1em 1em; 3257} 3258 3259/* API reference: adjustments to 3260the detailed description block */ 3261.jd-tagdescr { 3262 margin:.25em 0 .75em 0; 3263} 3264 3265.jd-tagdescr ol, 3266.jd-tagdescr ul { 3267 margin:0 2.5em; 3268 padding:0; 3269} 3270 3271.jd-tagdescr table, 3272.jd-tagdescr img { 3273 margin:.25em 1em; 3274} 3275 3276.jd-tagdescr li { 3277margin:0 0 .25em 0; 3278padding:0; 3279} 3280 3281/* API reference: heading marking 3282the details section for constants, 3283attrs, methods, etc. */ 3284h4.jd-details-title { 3285 font-size:1.15em; 3286 background-color: #E2E2E2; 3287 margin:1.5em 0 .6em; 3288 padding:3px 95px 3px 3px; /* room for api-level */ 3289} 3290body.google h4.jd-details-title { 3291 background-color: #FFF; 3292 padding-top:5px; 3293 border-top: 1px solid #ccc; 3294} 3295body.google table.jd-sumtable th { 3296 background-color: #FFF; 3297 color:#000; 3298} 3299 3300h4.jd-tagtitle { 3301 margin:0; 3302} 3303 3304h4 .normal { 3305 font-weight:normal; 3306} 3307 3308/* API reference: heading for "Parameters", "See Also", etc., 3309in details sections */ 3310h5.jd-tagtitle { 3311 margin:0 0 .25em 0; 3312 font-size:1em; 3313} 3314 3315.jd-tagtable { 3316 margin:0; 3317 background-color:transparent; 3318 width:auto; 3319} 3320 3321.jd-tagtable td, 3322.jd-tagtable th { 3323 border:none; 3324 background-color:#fff; 3325 vertical-align:top; 3326 font-weight:normal; 3327 padding:2px 10px; 3328} 3329 3330.jd-tagtable th { 3331 font-style:italic; 3332} 3333 3334 3335/* Inline api level indicator for methods */ 3336div.api-level { 3337 font-size:.8em; 3338 font-weight:normal; 3339 color:#999; 3340 float:right; 3341 padding:0 8px 0; 3342 margin-top:-30px; 3343} 3344 3345table.jd-tagtable td, 3346table.jd-tagtable th { 3347 background-color:transparent; 3348} 3349 3350table.jd-tagtable th { 3351 color:inherit; 3352} 3353 3354 3355/* SEARCH FILTER */ 3356 3357.menu-container { 3358 position:relative; 3359} 3360#search_autocomplete { 3361 font-weight:normal; 3362} 3363 3364.search_filtered_wrapper { 3365 position: absolute; 3366 right: 18px; 3367 top: 64px; 3368} 3369.suggest-card { 3370 float:right; 3371 position:relative; 3372 width:170px; 3373 min-height:90px; 3374 padding:5px; 3375 border: solid 1px #C5C5C5; 3376 background: white; 3377 margin-right:-5px; 3378 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); 3379 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 3380 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 3381} 3382.suggest-card.reference { 3383 z-index: 998; 3384 width: auto; 3385} 3386.suggest-card.develop { 3387 z-index:997; 3388 border-top: solid 4px #F80; 3389} 3390.suggest-card.design { 3391 z-index:996; 3392 border-top: solid 4px #33b5e5; 3393} 3394.suggest-card.distribute { 3395 z-index:995; 3396 border-top: solid 4px #9C0; 3397} 3398.child-card { 3399 width:100%; 3400} 3401.suggest-card.dummy { 3402 width:172px; 3403 float:right; 3404 border:0; 3405 background:transparent; 3406 -moz-box-shadow: none; 3407 -webkit-box-shadow: none; 3408 box-shadow: none; 3409} 3410 3411ul.search_filtered { 3412 min-width:100%; 3413 list-style: none; 3414 margin: 0 0 5px; 3415 padding: 0; 3416} 3417.search_filtered .jd-selected { 3418 background:#efefef; 3419 cursor:pointer; 3420} 3421.search_filtered .jd-selected, 3422.search_filtered .jd-selected a { 3423 color:#039BE5 !important; 3424} 3425 3426.no-display { 3427 display: none; 3428} 3429 3430.search_filtered li.jd-autocomplete { 3431 font-size: 0.81em; 3432 border: none; 3433 margin: 0 0 2px; 3434 padding: 0; 3435 line-height:1.5em; 3436} 3437 3438.search_filtered li a { 3439 padding:0 5px; 3440 color:#222 !important; 3441 display:inline-block; 3442 line-height:12px; 3443} 3444 3445.search_filtered li.header { 3446 font-weight:bold; 3447 color:#444; 3448 border: none; 3449 margin: 8px 0 2px; 3450 padding:1px 5px; 3451 line-height:1.5em; 3452} 3453.search_filtered li.header.small { 3454 font-size:0.85em; 3455} 3456 3457.suggest-card.reference 3458.search_filtered li.header { 3459 color:#aaa; 3460 font-size: 0.81em; 3461} 3462 3463.search_filtered li.header:first-child { 3464 margin: 0 0 2px; 3465} 3466 3467.show-item { 3468 display: table-row; 3469} 3470.hide-item { 3471 display: hidden; 3472} 3473 3474 3475 3476/* SEARCH RESULTS */ 3477 3478 3479#leftSearchControl .gsc-twiddle { 3480 background-image : none; 3481} 3482 3483#leftSearchControl td, #searchForm td { 3484 border: 0px solid #000; 3485 padding:0; 3486} 3487 3488#leftSearchControl .gsc-resultsHeader .gsc-title { 3489 padding-left : 0px; 3490 font-weight : bold; 3491 font-size : 13px; 3492 color:#006699; 3493 display : none; 3494} 3495 3496#leftSearchControl .gsc-resultsHeader div.gsc-results-selector { 3497 display : none; 3498} 3499 3500#leftSearchControl .gsc-resultsRoot { 3501 padding-top : 6px; 3502} 3503 3504#leftSearchControl div.gs-visibleUrl-long { 3505 display : block; 3506 color:#006699; 3507} 3508 3509#leftSearchControl .gsc-webResult { 3510 padding:0 0 20px 0; 3511} 3512 3513.gsc-webResult div.gs-visibleUrl-short, 3514table.gsc-branding, 3515.gsc-clear-button { 3516 display : none; 3517} 3518 3519.gsc-cursor-box .gsc-cursor div.gsc-cursor-page, 3520.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results, 3521#leftSearchControl a, 3522#leftSearchControl a b { 3523 color:#006699; 3524} 3525 3526.gsc-resultsHeader { 3527 display: none; 3528} 3529 3530/* Disable built in search forms */ 3531.gsc-control form.gsc-search-box { 3532 display : none; 3533} 3534table.gsc-search-box { 3535 margin:6px 0 0 0; 3536 border-collapse:collapse; 3537} 3538 3539td.gsc-input { 3540 padding:0 2px; 3541 width:100%; 3542 vertical-align:middle; 3543} 3544 3545input.gsc-input { 3546 border:1px solid #BCCDF0; 3547 width:99%; 3548 padding-left:2px; 3549 font-size:.95em; 3550} 3551 3552td.gsc-search-button { 3553 text-align: right; 3554 padding:0; 3555 vertical-align:top; 3556} 3557 3558 3559#searchResults { 3560 overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll 3561(it doesn't) */ 3562 height:auto; 3563} 3564 3565#searchResults .gsc-control { 3566 position:relative; 3567 width:auto; 3568 padding:0 0 10px; 3569} 3570 3571#searchResults .gsc-tabsArea { 3572 position:relative; 3573 white-space:nowrap; 3574 float:left; 3575 width:200px; 3576} 3577 3578#searchResults .gsc-above-wrapper-area { 3579 display:none; 3580} 3581 3582#searchResults .gsc-resultsbox-visible { 3583 float:left; 3584 width:720px; 3585 margin-left:20px; 3586} 3587 3588#searchResults .gsc-tabHeader { 3589 padding: 3px 6px; 3590 position:relative; 3591 width:auto; 3592 display:block; 3593} 3594 3595#searchResults h2#searchTitle { 3596 padding:0; 3597 margin:30px 0 5px; 3598 border:none; 3599} 3600 3601#searchResults h2#searchTitle em { 3602 font-style:normal; 3603 color:#33B5E5; 3604} 3605 3606#searchResults .gsc-table-result { 3607 margin:5px 0 10px 0; 3608 background-color:transparent; 3609} 3610#searchResults .gs-web-image-box, .gs-promotion-image-box { 3611 width:120px; 3612} 3613#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image { 3614 max-width:120px; 3615} 3616 3617#searchResults .gsc-table-result .gsc-thumbnail { 3618 padding:0 20px 0 0; 3619} 3620 3621#searchResults td { 3622 background-color:transparent; 3623} 3624 3625#searchResults .gsc-expansionArea { 3626 position:relative; 3627} 3628#searchResults .gsc-tabsArea .gsc-cursor-box { 3629 width:200px; 3630 padding:20px 0 0 1px; 3631} 3632#searchResults .gsc-cursor-page { 3633 display:inline-block; 3634 float:left; 3635 margin:-1px 0 0 -1px; 3636 padding:0; 3637 height:27px; 3638 width:27px; 3639 text-align:center; 3640 line-height:2; 3641} 3642 3643#searchResults .gsc-tabHeader.gsc-tabhInactive, 3644#searchResults .gsc-cursor-page { 3645 text-decoration:none; 3646 color:#039BE5; 3647 border: solid 1px #DADADA; 3648} 3649 3650#searchResults .gsc-tabHeader.gsc-tabhInactive:hover, 3651#searchResults .gsc-cursor-page:hover { 3652 border-color: #DBDBDB; 3653 background-color: #F3F3F3; 3654 background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC)); 3655 background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC); 3656 background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC); 3657 background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC); 3658 background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC); 3659 background-image: linear-gradient(top, #F9F9F9, #ECECEC); 3660 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', 3661EndColorStr='#ececec'); 3662 color: #33B5E5; 3663} 3664 3665#searchResults .gsc-tabHeader.gsc-tabhActive, 3666#searchResults .gsc-tabHeader.gsc-tabhActive:hover, 3667#searchResults .gsc-cursor-page.gsc-cursor-current-page, 3668#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover { 3669 color:#fff; 3670 background-color: #09C; 3671 background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C)); 3672 background-image: -webkit-linear-gradient(top, #2FADDB, #09C); 3673 background-image: -moz-linear-gradient(top, #2FADDB, #09C); 3674 background-image: -ms-linear-gradient(top, #2FADDB, #09C); 3675 background-image: -o-linear-gradient(top, #2FADDB, #09C); 3676 background-image: linear-gradient(top, #2FADDB, #09C); 3677 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c'); 3678 border: 1px solid #3990AB; 3679 z-index:100; 3680} 3681 3682 3683 3684 3685/************ STICKY NAV BAR ******************/ 3686 3687#context { 3688 clear: both; 3689 padding-top: 14px; 3690} 3691#context .breadcrumb { 3692 float: left; 3693 margin-bottom: 10px; 3694} 3695#context .util { 3696 float: right; 3697 margin-right: 20px; 3698} 3699 3700.breadcrumb { 3701 list-style: none; 3702 margin: 0; 3703 padding: 0; 3704 position: relative; 3705} 3706.breadcrumb li { 3707 float: left; 3708 padding: 0 20px 0 0; 3709 color: #000; 3710 white-space: nowrap; 3711} 3712.breadcrumb li a { 3713 color: #000; 3714} 3715.breadcrumb li:after { 3716 content: url(../images/breadcrumb.png); 3717 position: relative; 3718 top: 1px; 3719 left: 10px; 3720 width: 5px; 3721 height: 10px; 3722} 3723.breadcrumb li.current { 3724 font-weight: 700; 3725} 3726.breadcrumb li.current:after { 3727 display: none; 3728} 3729 3730/* offset the <a name=""> tags to account for sticky nav */ 3731body.reference a[name] { 3732 visibility: hidden; 3733 display: block; 3734 position: relative; 3735 top: -56px; 3736} 3737 3738 3739/* Quicknav */ 3740.btn-quicknav { 3741 width:20px; 3742 height:28px; 3743 float:left; 3744 margin-left:6px; 3745 padding-right:10px; 3746 position:relative; 3747 cursor:pointer; 3748 border-right:1px solid #CCC; 3749} 3750 3751.btn-quicknav a { 3752 zoom:1; 3753 position:absolute; 3754 top:13px; 3755 left:5px; 3756 display:block; 3757 text-indent:-9999em; 3758 width:10px; 3759 height:5px; 3760 background:url(../images/quicknav_arrow.png) no-repeat; 3761} 3762 3763.btn-quicknav a.arrow-active { 3764 background-position: 0 -5px; 3765 display:none; 3766} 3767 3768#header-wrap.quicknav a.arrow-inactive { 3769 display:none; 3770} 3771 3772.btn-quicknav.active a.arrow-active { 3773 display:block; 3774} 3775 3776#header-wrap.quicknav .nav-x li { 3777 min-width:160px; 3778 margin-right:20px; 3779} 3780 3781#header-wrap.quicknav li.last { 3782 margin-right:0px; 3783} 3784 3785#quicknav { 3786 float:none; 3787 clear:both; 3788 margin-left:0; 3789 margin-top:-30px; 3790 display:none; 3791 overflow:hidden; 3792} 3793 3794#header-wrap.quicknav #quicknav { 3795 3796} 3797 3798#quicknav ul { 3799 margin:10px 0; 3800 padding:0; 3801} 3802 3803#quicknav ul li.about { 3804 border-top:1px solid #9933CC; 3805} 3806 3807#quicknav ul li.design { 3808 border-top:1px solid #33b5e5; 3809} 3810 3811#quicknav ul li.develop { 3812 border-top:1px solid #FF8800; 3813} 3814 3815#quicknav ul li.distribute { 3816 border-top:1px solid #99cc00; 3817} 3818 3819#quicknav ul li { 3820 display:block; 3821 float:left; 3822 margin:0 20px 0 0; 3823 min-width:140px; 3824} 3825 3826#quicknav ul li.last { 3827 margin-right:0px; 3828} 3829 3830#quicknav ul li ul li { 3831 float:none; 3832} 3833 3834#quicknav ul li ul li a { 3835 color:#222; 3836} 3837 3838#quicknav ul li li ul, 3839#quicknav ul li li ul li { 3840 margin:0; 3841} 3842 3843#quicknav ul li li ul li:before { 3844 content:"\21B3"; 3845} 3846 3847#header-wrap { 3848 -webkit-transition: all 0.25s ease-out; 3849 -moz-transition: all 0.25s ease-out; 3850 -ms-transition: all 0.25s ease-out; 3851 -o-transition: all 0.25s ease-out; 3852 transition: all 0.25s ease-out; 3853 3854} 3855 3856#header-wrap.quicknav { 3857 height:216px; 3858 3859} 3860 3861.moremenu { 3862 float: right; 3863 position: relative; 3864 width: 50px; 3865 height:28px; 3866 display: block; 3867 margin-top:-3px; 3868 margin-bottom:7px; 3869 overflow:hidden; 3870 -webkit-transition: width 0.25s ease; 3871 -moz-transition: width 0.25s ease; 3872 -o-transition: width 0.25s ease; 3873 transition: width 0.25s ease; 3874} 3875 3876.moremenu #more-btn { 3877 width:40px; 3878 height:28px; 3879 background:url(../images/icon_more.png) no-repeat; 3880 border-left:1px solid #CCC; 3881 float:left; 3882 cursor:pointer; 3883} 3884 3885.moremenu:hover #more-btn { 3886 background-position:0 -28px; 3887} 3888 3889.morehover { 3890 position:absolute; 3891 right:6px; 3892 top:-9px; 3893 width:40px; 3894 height:35px; 3895 z-index:99; 3896 overflow:hidden; 3897 3898 -webkit-opacity:0; 3899 -moz-opacity:0; 3900 -o-opacity:0; 3901 opacity:0; 3902 3903 -webkit-transform-origin:100% 0%; 3904 -moz-transform-origin:100% 0%; 3905 -o-transform-origin:100% 0%; 3906 transform-origin:100% 0%; 3907 3908 -webkit-transition-property: -webkit-opacity; 3909 -webkit-transition-duration: .25s; 3910 -webkit-transition-timing-function:ease; 3911 3912 -moz-transition-property: -moz-opacity; 3913 -moz-transition-duration: .25s; 3914 -moz-transition-timing-function:ease; 3915 3916 -o-transition-property: -o-opacity; 3917 -o-transition-duration: .25s; 3918 -o-transition-timing-function:ease; 3919 3920 transition-property: opacity; 3921 transition-duration: .25s; 3922 transition-timing-function:ease; 3923} 3924 3925.morehover:hover, 3926.morehover.hover { 3927 opacity:1; 3928 height:385px; 3929 width:268px; 3930 -webkit-transition-property:height, -webkit-opacity; 3931} 3932 3933.morehover .top { 3934 width:268px; 3935 height:39px; 3936 background:url(../images/more_top.png) no-repeat; 3937} 3938 3939.morehover .mid { 3940 width:228px; 3941 background:url(../images/more_mid.png) repeat-y; 3942 padding:10px 20px 0 20px; 3943} 3944 3945.morehover .mid .header { 3946 border-bottom:1px solid #ccc; 3947 font-weight:bold; 3948} 3949 3950.morehover .bottom { 3951 width:268px; 3952 height:6px; 3953 background:url(../images/more_bottom.png) no-repeat; 3954} 3955 3956.morehover ul { 3957 margin:10px 10px 20px 0; 3958} 3959 3960.morehover ul li { 3961 list-style:none; 3962} 3963 3964.morehover ul li.active a, 3965.morehover ul li.active a:hover { 3966 color:#222 !important; 3967} 3968 3969.morehover ul li.active img { 3970 margin-right:4px; 3971} 3972 3973 3974 3975 3976/* MARQUEE */ 3977.slideshow-container { 3978 width:100%; 3979 overflow:hidden; 3980 position:relative; 3981} 3982.slideshow-container .slideshow-prev { 3983 position:absolute; 3984 top:50%; 3985 left:0px; 3986 margin-top:-36px; 3987 z-index:99; 3988} 3989.slideshow-container .slideshow-next { 3990 position:absolute; 3991 top:50%; 3992 margin-top:-36px; 3993 z-index:99; 3994 right:0px; 3995} 3996 3997.slideshow-container .pagination { 3998 position:absolute; 3999 bottom:20px; 4000 width:100%; 4001 text-align:center; 4002 z-index:99; 4003} 4004.slideshow-container .pagination ul { 4005 margin:0; 4006} 4007.slideshow-container .pagination ul li{ 4008 display: inline-block; 4009 width:12px; 4010 height:12px; 4011 text-indent:-8000px; 4012 list-style:none; 4013 margin: 0 3px; 4014 border-radius:6px; 4015 background-color:#ddd; 4016 cursor:pointer; 4017 -webkit-transition:color .5s ease-in; 4018 -moz-transition:color .5s ease-in; 4019 -o-transition:color .5s ease-in; 4020 transition:color .5s ease-in; 4021} 4022.slideshow-container .pagination ul li:hover { 4023 background-color:#bbb; 4024} 4025.slideshow-container .pagination ul li.active { 4026 background-color:#6ab344; 4027} 4028.slideshow-container .pagination ul li.active:hover { 4029 background-color:#6ab344; 4030} 4031.slideshow-container ul li { 4032 display:inline; 4033 list-style:none; 4034} 4035 4036 4037#landing h1 { 4038 margin:17px 0 20px 0 !important; 4039} 4040 4041a.download-sdk { 4042 float:right; 4043 margin:-10px 0; 4044 height:30px; 4045 padding-top:4px; 4046 padding-bottom:0px; 4047} 4048 4049#searchResults.wrap { 4050 max-width:940px; 4051 border-bottom:1px solid #e5e5e5; 4052} 4053 4054#searchResults.wrap #leftSearchControl { 4055 min-height:700px 4056} 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067/* 4068 * CSS Styles that are needed by jScrollPane for it to operate correctly. 4069 */ 4070 4071.jspContainer { 4072 overflow: hidden; 4073 position: relative; 4074} 4075 4076.jspPane { 4077 position: absolute; 4078 width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */ 4079} 4080 4081.jspVerticalBar { 4082 position: absolute; 4083 top: 0; 4084 right: 0; 4085 width: 4px; 4086 height: 100%; 4087 background: #f5f5f5; 4088} 4089 4090.jspHorizontalBar { 4091 position: absolute; 4092 bottom: 0; 4093 left: 0; 4094 width: 100%; 4095 height: 4px; 4096 background: #f5f5f5; 4097} 4098 4099.jspVerticalBar *, 4100.jspHorizontalBar * { 4101 margin: 0; 4102 padding: 0; 4103} 4104.jspCap { 4105 display: block; 4106} 4107 4108.jspVerticalBar .jspCap { 4109 height: 4px; 4110} 4111 4112.jspHorizontalBar .jspCap { 4113 width: 0; 4114 height: 100%; 4115} 4116 4117.jspHorizontalBar .jspCap { 4118 float: left; 4119} 4120 4121.jspTrack { 4122 position: relative; 4123} 4124 4125.jspDrag { 4126 background: #ccc; 4127 position: relative; 4128 top: 0; 4129 left: 0; 4130 cursor: pointer; 4131} 4132 4133.jspDrag:hover, 4134.jspDrag:active { 4135 border-color: #09c; 4136 background-color: #4cadcb; 4137 background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb)); 4138 background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb); 4139 background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb); 4140 background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb); 4141 background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb); 4142 background-image: linear-gradient(left, #5dbcd9, #4cadcb); 4143 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb'); 4144} 4145 4146.jspHorizontalBar .jspTrack, 4147.jspHorizontalBar .jspDrag { 4148 float: left; 4149 height: 100%; 4150} 4151 4152.jspArrow { 4153 background: #999; 4154 text-indent: -20000px; 4155 display: block; 4156 cursor: pointer; 4157} 4158 4159.jspArrow.jspDisabled { 4160 cursor: default; 4161 background: #ccc; 4162} 4163 4164.jspVerticalBar .jspArrow { 4165 height: 16px; 4166} 4167 4168.jspHorizontalBar .jspArrow { 4169 width: 16px; 4170 float: left; 4171 height: 100%; 4172} 4173 4174.jspVerticalBar .jspArrow:focus { 4175 outline: none; 4176} 4177 4178.jspCorner { 4179 float: left; 4180 height: 100%; 4181} 4182 4183/* Yuk! CSS Hack for IE6 3 pixel bug :( */ 4184* html .jspCorner { 4185 margin: 0 -3px 0 0; 4186} 4187/******* end of jscrollpane *********/ 4188 4189 4190 4191 4192 4193/************ DEVELOP HOMEPAGE ******************/ 4194 4195/* Slideshow */ 4196.slideshow-develop { 4197 height: 316px; 4198 width: 940px; 4199 position: relative; 4200 overflow:hidden; 4201} 4202.slideshow-develop .frame { 4203 width: 940px; 4204 height: 316px; 4205} 4206.slideshow-develop img.play { 4207 max-width:350px; 4208 max-height:240px; 4209 margin:20px 0 0 90px; 4210 -webkit-transform: perspective(800px ) rotateY( 35deg ); 4211 box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4212 -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4213 -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 4214} 4215.slideshow-develop img.play.no-shadow { 4216 box-shadow: none; 4217 -moz-box-shadow: none; 4218 -webkit-box-shadow: none; 4219} 4220.slideshow-develop img.play.no-transform { 4221 -webkit-transform: none; 4222} 4223.slideshow-develop a.slideshow-next { 4224 background: url(../images/arrow-right-develop.png); 4225} 4226.slideshow-develop a.slideshow-prev { 4227 background: url(../images/arrow-left-develop.png); 4228} 4229.slideshow-develop .content-right { 4230 float: left; 4231} 4232.slideshow-develop .content-right h2 { 4233 padding:0; 4234 margin-bottom:10px; 4235 border:none; 4236 font-size:24px; 4237} 4238.slideshow-develop .item { 4239 height: 300px; 4240 width: 940px; 4241} 4242.slideshow-develop .pagination ul li.active { 4243 background-color: #F80; 4244} 4245.slideshow-develop .pagination ul li.active:hover { 4246 background-color: #F80; 4247} 4248.slideshow-develop .item hr { 4249 margin:5px 0 10px; 4250} 4251.slideshow-develop .item p { 4252 margin:10px 0; 4253} 4254.slideshow-develop .item p.title-intro { 4255 position:absolute; 4256 margin:0; 4257} 4258 4259/* Feeds */ 4260.feed ul { 4261 margin: 0; 4262} 4263.feed .feed-nav { 4264 height: 25px; 4265 border-bottom: 1px solid #CCC; 4266} 4267.feed .feed-nav li { 4268 list-style: none; 4269 float: left; 4270 height: 21px; /* +4px bottom border = 25px; same as .feed-nav */ 4271 margin-right: 25px; 4272 cursor: pointer; 4273} 4274.feed .feed-nav li.active { 4275 color: #000; 4276 border-bottom: 4px solid #F80; 4277} 4278.feed .feed-container { 4279 overflow: hidden; 4280 width: 460px; 4281} 4282.feed .feed-container .feed-frame { 4283 width: 1000px; 4284} 4285.feed .feed-container .feed-frame ul { 4286 float: left; 4287 width:460px; 4288} 4289.feed .feed-container .feed-frame ul ul { 4290 float: none; 4291 margin:10px 0 0 30px; 4292} 4293.feed .feed-container .feed-frame li { 4294 list-style: none; 4295 margin: 20px 0 20px 0; 4296 width: 460px; 4297 height:93px; 4298} 4299.feed .feed-container .feed-frame li.playlist { 4300 height:auto; 4301} 4302.feed .feed-container .feed-frame li.playlist a { 4303 height:93px; 4304 display:block; 4305} 4306.feed .feed-container .feed-frame li.more { 4307 height:20px; 4308 margin:10px 0 5px 5px; 4309} 4310.feed .feed-container .feed-frame li.more a { 4311 height:inherit; 4312} 4313.feed .feed-container .feed-frame li.playlist-video { 4314 list-style: none; 4315 margin: 0; 4316 width: 460px; 4317 height:55px; 4318 font-size:12px; 4319} 4320.feed .feed-container .feed-frame li.playlist-video a { 4321 height:45px; 4322 padding:5px; 4323} 4324.feed .feed-container .feed-frame li.playlist-video h5 { 4325 font-size:12px; 4326 line-height:13px; 4327 margin:0; 4328} 4329.feed .feed-container .feed-frame li.playlist-video p { 4330 margin:5px 0 0; 4331 line-height:15px; 4332} 4333.feed-container .feed-frame div.feed-image { 4334 float: left; 4335 border: 1px solid #999; 4336 margin:0 20px 0 0; 4337 width:122px; 4338 height:92px; 4339 background:url('../images/blog-default.png') no-repeat 0 0; 4340 background-size:180px; 4341} 4342#jd-content .feed .feed-container .feed-frame li img { 4343 float: left; 4344 border: 1px solid #999; 4345 margin:0 20px 0 0; 4346 width:122px; 4347 height:92px; 4348} 4349#jd-content .feed .feed-container .feed-frame li.playlist-video img { 4350 width:inherit; 4351 height:inherit; 4352} 4353 4354.feed .feed-container .feed-frame li a, 4355.feed .feed-container .feed-frame li a:active { 4356 color:#555 !important; 4357} 4358 4359.feed .feed-container .feed-frame li a:hover, 4360.feed .feed-container .feed-frame li a:hover * { 4361 color:#7AA1B0 !important; 4362} 4363 4364/* Video player */ 4365#player-wrapper { 4366 display:none; 4367 margin: -1px auto 0; 4368 position: relative; 4369 max-width: 940px; 4370 height: 0px; 4371} 4372#player-frame { 4373 background: #EFEFEF; 4374 border: 1px solid #CCC; 4375 padding: 0px 207px; 4376 z-index: 10; /* stay above marque, but below search suggestions */ 4377 width: 525px; 4378 height: 330px; 4379 position: relative; 4380} 4381#player-frame .close { 4382 position: absolute; 4383 right: 8px; 4384 bottom: 4px; 4385 width: 16px; 4386 height: 16px; 4387 margin: 0; 4388 text-indent: -1000em; 4389 top: 6px; 4390 background: url(../images/close.png) no-repeat 0 0; 4391 z-index:9999; 4392} 4393#player-frame .close:hover, #player-frame .close:focus { 4394 background-position: -16px 0; 4395 cursor:pointer; 4396} 4397 4398 4399 4400/************ DEVELOP TOPIC CONTAINERS ************/ 4401 4402.landing-banner, 4403.landing-docs { 4404 margin:20px 0; 4405} 4406.landing-banner > div:first-child, 4407.landing-docs > div:first-child, 4408.landing-docs > .col-12 { 4409 margin-left:0; 4410 min-height:280px; 4411} 4412.landing-banner.short > div { 4413 min-height:50px; 4414} 4415.landing-banner > div:last-child, 4416.landing-docs > div:last-child, 4417.landing-docs > .col-12 { 4418 margin-right:0; 4419} 4420 4421.landing-banner > div > *:last-child { 4422 margin-bottom:0; 4423} 4424.landing-banner h1 { 4425 margin-top:16px; 4426 padding-bottom:24px; 4427} 4428.landing-docs, 4429.landing-banner { 4430 clear:both; 4431 overflow:hidden; 4432} 4433.landing-docs h3 { 4434 font-size:14px; 4435 line-height:21px; 4436 color:#555; 4437 text-transform:uppercase; 4438 border-bottom:1px solid #CCC; 4439 margin:0 0 20px; 4440} 4441.landing-docs a { 4442 color:#333 !important; 4443} 4444 4445.landing-docs a:hover, 4446.landing-docs a:hover * { 4447 color:#7AA1B0 !important 4448} 4449 4450.landing-docs .normal-links a { 4451 color:#039BE5 !important; 4452} 4453 4454.plusone { 4455 float:right; 4456} 4457 4458 4459 4460.next-docs { 4461 border-top:1px solid #ccc; 4462 margin:40px 0 0; 4463 padding:5px 0 0; 4464 clear:left; 4465 overflow:hidden; 4466} 4467.next-docs div:first-child { 4468 margin-left:0; 4469} 4470.next-docs div:last-child { 4471 margin-right:0; 4472} 4473 4474.next-docs h2 { 4475 font-size:14px; 4476 line-height:21px; 4477 color:#555; 4478 text-transform:uppercase; 4479 border-bottom:none; 4480 margin:0 0 1em; 4481 padding:5px 0 0; 4482} 4483 4484 4485 4486/************* HOME/LANDING PAGE *****************/ 4487 4488.slideshow-home { 4489 height: 500px; 4490 width: 940px; 4491 border-bottom: 1px solid #CCC; 4492 position: relative; 4493 margin: 0; 4494} 4495.slideshow-home .frame { 4496 width: 940px; 4497 height: 500px; 4498} 4499.slideshow-home .content-left { 4500 float: left; 4501 text-align: center; 4502 vertical-align: center; 4503 margin: 0 0 0 35px; 4504} 4505.slideshow-home .content-right { 4506 margin: 80px 0 0 0; 4507} 4508.slideshow-home .content-right p { 4509 margin-bottom: 10px; 4510} 4511.slideshow-home .content-right p:last-child { 4512 margin-top: 15px; 4513} 4514.slideshow-home .content-right h1 { 4515 padding:0; 4516} 4517.slideshow-home .item { 4518 height: 500px; 4519 width: 940px; 4520} 4521.home-sections { 4522 padding: 30px 20px 20px; 4523 margin: 20px 0; 4524 background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9); 4525} 4526.home-sections ul { 4527 margin: 0; 4528} 4529.home-sections ul li { 4530 float: left; 4531 display: block; 4532 list-style: none; 4533 width: 170px; 4534 height: 35px; 4535 border: 1px solid #ccc; 4536 background: white; 4537 margin-right: 10px; 4538 border-radius: 1px; 4539 -webkit-border-radius: 1px; 4540 -moz-border-radius: 1px; 4541 box-shadow: 1px 1px 5px #EEE; 4542 -webkit-box-shadow: 1px 1px 5px #EEE; 4543 -moz-box-shadow: 1px 1px 5px #EEE; 4544 background: white; 4545} 4546.home-sections ul li:hover { 4547 background: #F9F9F9; 4548 border: 1px solid #CCC; 4549} 4550.home-sections ul li a, 4551.home-sections ul li a:hover { 4552 font-weight: bold; 4553 margin-top: 8px; 4554 line-height: 18px; 4555 float: left; 4556 width: 100%; 4557 text-align: center; 4558 color: #039BE5 !important; 4559} 4560.home-sections ul li a { 4561 font-weight: bold; 4562 margin-top: 8px; 4563 line-height: 18px; 4564 float: left; 4565 width:100%; 4566 text-align:center; 4567} 4568.home-sections ul li img { 4569 float: left; 4570 margin: -8px 0 0 10px; 4571} 4572.home-sections ul li.last { 4573 margin-right: 0px; 4574} 4575 4576/************ DISTRIBUTE PAGES ******************/ 4577 4578.article-detail #body-content { 4579 padding-top: 10px; 4580} 4581 4582/* A container for grid sets with uppercase h3 and rule */ 4583.dynamic-grid h3 { 4584 font-size:14px; 4585 line-height:21px; 4586 color:#555; 4587 text-transform:uppercase; 4588 border-bottom:1px solid #CCC; 4589 padding:8px 0 0 1px; 4590 margin-bottom:14px; 4591 clear:both; 4592} 4593 4594.top-right-float { 4595 float: right; 4596} 4597 4598.clearfloat { 4599 float: none; 4600 clear: both; 4601} 4602 4603.border-img { 4604 border: 1px solid #CCC; 4605} 4606 4607.center-img { 4608 margin: auto; 4609 text-align: center; 4610} 4611.center-img img { 4612 margin-bottom: 15px; 4613} 4614 4615.figure img, .border-img { 4616 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); 4617 margin-bottom: 15px; 4618} 4619 4620 4621/** 4622 * UTILITIES 4623 */ 4624 4625 4626.border-box { 4627 box-sizing: border-box; 4628} 4629 4630.vertical-center-outer { 4631 display: table; 4632 height: 100%; 4633 width: 100%; 4634} 4635 4636.vertical-center-inner { 4637 display: table-cell; 4638 vertical-align: middle; 4639} 4640 4641/** 4642 * TYPE STYLES 4643 */ 4644 4645.landing-h1 { 4646 color: #44555d; 4647 font-weight: 300; 4648 font-size: 56px; 4649 line-height: 80px; 4650 text-align: center; 4651 letter-spacing: -1px; 4652 margin-bottom: 6px; 4653} 4654 4655.landing-pre-h1 { 4656 font-weight: 400; 4657 font-size: 28px; 4658 color: #93B73F; 4659 line-height: 36px; 4660 text-align: center; 4661 letter-spacing: -1px; 4662 text-transform: uppercase; 4663} 4664 4665.landing-h1.hero { 4666 text-align: left; 4667 color: #fff; 4668} 4669 4670.landing-h2 { 4671 font-weight: 300; 4672 font-size: 42px; 4673 line-height: 64px; 4674 text-align: center; 4675} 4676 4677.landing-subhead { 4678 color: #78868d; 4679 font-size: 20px; 4680 font-weight: 300; 4681 line-height: 32px; 4682 text-align: center; 4683} 4684.landing-subhead.hero { 4685 text-align: left; 4686 color: white; 4687} 4688 4689.landing-hero-description { 4690 text-align: left; 4691 margin: 1em 0; 4692} 4693 4694.landing-hero-description p { 4695 font-weight: 300; 4696 margin: 0; 4697 font-size: 18px; 4698 line-height: 24px; 4699} 4700 4701.landing-body .landing-small { 4702 font-size: 14px; 4703 line-height: 19px; 4704} 4705 4706.landing-body.landing-align-center { 4707 text-align: center; 4708} 4709 4710.landing-align-left { 4711 text-align: left; 4712} 4713 4714/** 4715 * LAYOUT 4716 */ 4717 4718.landing-section { 4719 background: #eceff1; 4720 clear: both; 4721 padding: 80px 20px 80px; 4722 margin: 0 -20px; 4723 text-rendering: optimizeLegibility; 4724} 4725 4726@media (max-width: 719px) { 4727 .landing-section { 4728 margin-left: -10px; 4729 margin-right: -10px; 4730 padding-left: 10px; 4731 padding-right: 10px; 4732 } 4733} 4734 4735.landing-short-section { 4736 padding: 40px 10px 28px; 4737} 4738 4739.landing-gray-background { 4740 background-color: #b0bec5; 4741} 4742 4743.landing-white-background { 4744 background-color: white; 4745} 4746 4747.landing-red-background { 4748 color: white; 4749 background-color: hsl(8, 70%, 54%); 4750} 4751 4752.landing-red-background .landing-h1 { 4753 color: white; 4754} 4755 4756.landing-red-background .landing-subhead { 4757 color: hsl(8, 71%, 84%); 4758 text-align: left; 4759} 4760 4761 4762.preview-hero { 4763 height: calc(100vh - 128px); 4764 min-height: 504px; 4765 padding-top: 0; 4766 padding-bottom: 0; 4767 background-image: url(../../preview/images/hero.jpg); 4768 background-size: cover; 4769 background-position: right center; 4770 color: white; 4771 position: relative; 4772 overflow: hidden; 4773} 4774 4775.wear-hero { 4776 height: calc(100vh - 128px); 4777 min-height: 504px; 4778 padding-top: 0; 4779 padding-bottom: 0; 4780 background-image: url(../../wear/images/hero.jpg); 4781 background-size: cover; 4782 background-position: top center; 4783 color: white; 4784 position: relative; 4785 overflow: hidden; 4786} 4787 4788.tv-hero { 4789 height: calc(100vh - 128px); 4790 min-height: 504px; 4791 padding-top: 0; 4792 padding-bottom: 0; 4793 background-image: url(../../tv/images/hero.jpg); 4794 background-size: cover; 4795 background-position: right center; 4796 color: white; 4797 position: relative; 4798 overflow: hidden; 4799} 4800 4801.auto-hero { 4802 height: calc(100vh - 128px); 4803 min-height: 504px; 4804 padding-top: 0; 4805 padding-bottom: 0; 4806 background-image: url(../../auto/images/hero.jpg); 4807 background-size: cover; 4808 background-position: right center; 4809 color: white; 4810 position: relative; 4811 overflow: hidden; 4812} 4813 4814.landing-hero-scrim { 4815 background: black; 4816 height: 100%; 4817 left: 0; 4818 position: absolute; 4819 opacity: .2; 4820 width: 100%; 4821} 4822 4823.landing-hero-wrap { 4824 margin: 0 auto; 4825 max-width: 940px; 4826 clear: both; 4827 height: 100%; 4828 position: relative; 4829} 4830 4831.landing-section-header { 4832 margin-bottom: 40px; 4833} 4834 4835.landing-hero-wrap .landing-section-header { 4836 margin-bottom: 16px; 4837} 4838 4839.landing-body { 4840 font-size: 18px; 4841 line-height: 24px; 4842} 4843 4844.landing-video-link { 4845 white-space: nowrap; 4846 display: inline-block; 4847 padding: 16px 32px 16px 82px; 4848 font-size: 18px; 4849 font-weight: 400; 4850 line-height: 24px; 4851 cursor: pointer; 4852 color: hsla(0, 0%, 100%, .8); 4853 -webkit-user-select: none; 4854 -moz-user-select: none; 4855 -o-user-select: none; 4856 user-select: none; 4857 -webkit-transition: .2s color ease-in-out; 4858 -moz-transition: .2s color ease-in-out; 4859 -o-transition: .2s color ease-in-out; 4860 transition: .2s color ease-in-out; 4861} 4862 4863.landing-video-link:before { 4864 height: 64px; 4865 width: 64px; 4866 display: inline-block; 4867 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFuklEQVR42u2dXWgcVRSAV9LWtBBTTZVWUhNqEQtq1QeroDRKFRFsROqTYPuo+JCiIoJKFC0USqlUfCiowRcfrBgVUUElefAPkW5T8aeaGn9aRbFsjP0x2cx8PuRMvFxmdjeb2Z17Z8+B85DsZPbO+eaec3/OPSkABdXsVI2gABSAqgJQAKoKQAGoKgAFoKoAFICqAlAAqgpAAai6DqDRAiwDeoFtwB7gPaAInABKwKToCWAMeB/YDdwJrAWWNLh9+QMAXABsBQ4A3wFTwAxQBmaBAAhjNJDPy3L938BXwAvArUCHAkh+kCXAVcA+YBw4bRg7MngtkgTlDPA98CywHmhTAP8/xCbgVeAvMZZpwDQllN7xB/AysKGlAQAXAvuBkzW85UVgCBgENlfQQbmuWAXELPAnsAvoaikAQBtwh/j3coLhS2LIfqCzzu/plL8fkvvFgZiR4L2lHrfkHQBgpQTFUwmGnwC212v0KjC2y/3jQPwDPA+05xYAcBHwubx1YZzhC02QBBBRbxgBzssdAOBy4JgRZE0ZTPuNr7FHDCbEhqNAd24AAN0yUbID7QSwsZChABut3hANXY8Bq70HIMb/Ocb4w81+66v0hmGrN0QQ1ngLQJYRvpWHMWWo4KDIaMnuCcVKgdlZAGL8t2J8vpPGrwChDLyWBMFlAA8D0z4ZvwKEs8D93gCQEc9Jy/jFgkdizaRDGUSs8wXAu1bQLQE9ngHosWbPAXDQeQAypT9rBd3+gociyxi2K9riLABZUj5iuZ6RgsciM2OzFxw2A7JrAO6VwGtKTwpG+Anoy9AVmb3gDHCPcwCAFcChRox6jPu9CazMeFQUAKNRL3AJwE2yopjq228BQPZ/d2bcCyaBTa4BeNGa8Q6naIA4GQWubiKEYWvBbp8zAGQt5VfL/fQ3GEAkTzXDLVkjokA2k5a7AuA2GaLNj/tTfvhq0pQgbcwLQtlQusYVALtlzSR191MjADNI9zbJDZWBR10BMGr5/4GMADQ0SAMDlht62xUAxy0AmzMEEMnhtIO0ZF2YAH5wITd0hQw/5wE04M1bjDyXZpC2hqMlYGnWAHqBf40APOEYgChI35VSWyasWfGqrAH0WVkOIw4CSC1IG2tDoSy7XJE1gPs8ArDoIG0BmJGk30wBDHgGYFFBOgbAtqwB7GxxAHerC8rOBU0Dt2gQzjYIb8gawDor+6HVhqFdrkzEwhabiAVOTMSkUb+06FLEUVfWgj5q0cW4g64AeNo66ZLlcnTDNmesBN4y8KArAG6QU42ttCEzBVzpCoAO4EfLDeV5SzIEvgHaXdqUP2BlQud1Ux55zj2uZUX02cPRnKalRLmu17qYmPWF5YbymJgVAh8Ay5wCII3ZEZOYm6fURGT2u9X43Mnk3CDHybmfmRVYXExPv9nKEcpLejqSC3SjdY2TBzTesHqB7wc0onTEV2KucxLApXKkJy9HlAI5anuJFwCkYQ/EuCJfD+mdBnYkXOssgHY53un7MdVZ4CVgqVcADAhjMafkfTioHc14P04yvvMApIEXy5F/+7S8y6UKolPyR4BVVf7Wi2IdawwIPhTrmAW+rmZ8bwBIQ7vloXwoVzNWS6UUrwAYy9YfOlqwKZDkgneA5Qu4l3cly84F9sqGhislywLmaozuYoGFXr0DII1ukxP1hxJ6QzR7HqLxRfumZaRzXZ3f4XXZyi7gCeB3kqsnzs+kSb9s5XHgMeD8RTxDLgq3rmeuYuFvNYCoR8wqujNi+L3UWBcu9wAMt3QZ8LiMlk5RuU50teq6kcEDgTolveIRYHUQBOek1O5cFu/ukLz7/ZJgNSm+OirebWpgaPS7slxfAr4EngGuX8jopqUBxGzyrAVuB54EXgc+lV4yLhO8cfn5E+ZqUD8kBu9sQvv0Hzj4rmoEBaAAVBWAAlBVAApAVQEoAFUFoABUFYACUFUACkC1CfofXVRJocowZVYAAAAASUVORK5CYII=); 4868 background-size: contain; 4869 position: absolute; 4870 content: ""; 4871 opacity: .7; 4872 margin-top: -19px; 4873 margin-left: -64px; 4874 -webkit-transition: .2s opacity ease-in-out; 4875 -moz-transition: .2s opacity ease-in-out; 4876 -o-transition: .2s opacity ease-in-out; 4877 transition: .2s opacity ease-in-out; 4878} 4879 4880.landing-video-link:hover { 4881 color: hsla(0, 0%, 100%, 1); 4882} 4883 4884.landing-video-link:hover:before { 4885 opacity: 1; 4886} 4887 4888.landing-social-image { 4889 float: left; 4890 margin-right: 14px; 4891 height: 64px; 4892 width: 64px; 4893} 4894 4895.landing-social-copy { 4896 padding-left: 78px; 4897} 4898 4899.landing-scroll-down-affordance { 4900 position: absolute; 4901 bottom: 0; 4902 width: 100%; 4903 text-align: center; 4904 z-index: 10; 4905} 4906 4907.landing-down-arrow { 4908 padding: 24px; 4909 display: inline-block; 4910 opacity: .5; 4911 -webkit-transition: .2s opacity ease-in-out; 4912 -moz-transition: .2s opacity ease-in-out; 4913 -o-transition: .2s opacity ease-in-out; 4914 transition: .2s opacity ease-in-out; 4915 4916 -webkit-animation-name: pulse-opacity; 4917 -webkit-animation-duration: 4s; 4918} 4919 4920.landing-down-arrow:hover { 4921 opacity: 1; 4922} 4923 4924.landing-down-arrow img { 4925 height: 28px; 4926 width: 28px; 4927 margin: 0 auto; 4928 display: block; 4929} 4930 4931.landing-divider { 4932 display: inline-block; 4933 height: 2px; 4934 background-color: white; 4935 position: relative; 4936 margin: 10px 0; 4937} 4938 4939/* 3 CLOLUMN LAYOUT */ 4940 4941.landing-breakout { 4942 margin-top: 40px; 4943 margin-bottom: 40px; 4944} 4945 4946.landing-breakout img { 4947 margin-bottom: 20px; 4948} 4949 4950.landing-partners img { 4951 margin-bottom: 20px; 4952} 4953 4954.landing-breakout p { 4955 padding: 0 23px; 4956} 4957 4958.landing-breakout.landing-partners img { 4959 margin-bottom: 20px; 4960} 4961 4962/** 4963 * ANIMATION 4964 */ 4965 4966@-webkit-keyframes pulse-opacity { 4967 0% { 4968 opacity: .5; 4969 } 4970 20% { 4971 opacity: .5; 4972 } 4973 40% { 4974 opacity: 1; 4975 } 4976 60% { 4977 opacity: .5; 4978 } 4979 80% { 4980 opacity: 1; 4981 } 4982 100% { 4983 opacity: .5; 4984 } 4985} 4986 4987 4988 4989/** 4990 * VIDEO 4991 */ 4992 4993#video-container { 4994 display:none; 4995 position:fixed; 4996 top:0; 4997 left:0; 4998 width:100%; 4999 height:100%; 5000 background-color:rgba(0,0,0,0.8); 5001 z-index:9999; 5002} 5003 5004#video-frame { 5005 max-width:940px; 5006 height:100%; 5007 margin:72px auto; 5008 display:none; 5009 position:relative; 5010} 5011 5012.video-close { 5013 cursor: pointer; 5014 position: absolute; 5015 right: -49px; 5016 top: -49px; 5017 pointer-events: all; 5018} 5019 5020#icon-video-close { 5021 background-image: url("../images/close-white.png"); 5022 background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x); 5023 background-repeat: no-repeat; 5024 background-position: 0 0; 5025 background-size: 36px 36px; 5026 height: 36px; 5027 width: 36px; 5028 display:block; 5029} 5030 5031#icon-video-close:hover { 5032 background-image: url("../images/close-grey.png"); 5033 background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x); 5034} 5035 5036/* Preload the hover images */ 5037a.video-shadowbox-button.white:after { 5038 display:none; 5039 content:url("../images/close-grey.png") url("../images/close-grey_2x.png"); 5040} 5041 5042a.video-shadowbox-button.white { 5043 background-image: url("../images/play-circle-white.png"); 5044 background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x); 5045 background-size: 36px 36px; 5046 background-repeat: no-repeat; 5047 background-position: right; 5048 padding: 16px 42px 16px 8px; 5049 font-size: 18px; 5050 font-weight: 500; 5051 line-height: 24px; 5052 color: #fff; 5053 text-decoration:none; 5054} 5055 5056a.video-shadowbox-button.white:hover { 5057 color:#bababa !important; 5058 background-image: url("../images/play-circle-grey.png"); 5059 background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x); 5060} 5061 5062/* Preload the hover images */ 5063a.video-shadowbox-button.white:after { 5064 display:none; 5065 content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png"); 5066} 5067 5068/****************** 5069Styles for d.a.c/index: 5070*******************/ 5071 5072 5073 5074/* Generic full screen carousel styling to be used across pages. */ 5075.fullscreen-carousel { 5076 margin: 0 -20px; 5077 overflow: hidden; 5078 position: relative; 5079} 5080 5081.fullscreen-carousel-content { 5082 width: 100%; 5083 height: 100%; 5084 position: relative; 5085 display: table; /* For vertical centering */ 5086} 5087 5088.fullscreen-carousel .vcenter { 5089 display: table-cell; 5090 vertical-align: middle; 5091 position: relative; 5092} 5093 5094.fullscreen-carousel .vcenter > div { 5095 margin: 10px auto; 5096} 5097 5098/* Styles for the full-bleed hero image type. */ 5099.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 { 5100 color: #fff; 5101} 5102 5103.fullscreen-carousel .hero h1 { 5104 font-weight: 300; 5105 font-size: 60px; 5106 line-height: 68px; 5107 letter-spacing: -1px; 5108 margin-top: 0; 5109} 5110 5111.fullscreen-carousel .hero p { 5112 font-weight: 300; 5113 font-size: 18px; 5114 line-height: 24px; 5115} 5116 5117.fullscreen-carousel .hero .hero-bg { 5118 background-size: cover; 5119 width: 100%; 5120 height: 100%; 5121 position: absolute; 5122 left: 0px; 5123 top: 0px; 5124} 5125 5126 5127/* Full screen carousel styling for the resource flow layout type of content */ 5128.fullscreen-carousel .resource-flow-layout:after { 5129 height: 0; /* Dont know why this is set at 10 in default.css */ 5130} 5131 5132.fullscreen-carousel .resource-flow-layout { 5133 margin-bottom: 20px; 5134} 5135 5136 5137 5138/* Generic Tab carousel styling to be used across multiple pages. */ 5139 5140.tab-carousel .tab-nav { 5141 list-style: none; 5142 position: relative; 5143 text-align: center; 5144} 5145 5146.tab-carousel .tab-nav li { 5147 display: inline-block; 5148 font-size: 22px; 5149 font-weight: 400; 5150 line-height: 50px; 5151 list-style: none; 5152 margin: 0; 5153 padding: 0 25px; 5154 position: relative; 5155} 5156 5157.tab-carousel .tab-nav li a, 5158.tab-carousel .tab-nav li a:hover { 5159 color: #333 !important; 5160 padding: 10px 10px 13px 10px; 5161 position: relative; 5162 z-index: 1000; 5163} 5164 5165.tab-carousel .tab-nav li:after { 5166 background: #ddd; 5167 bottom: 0; 5168 content: ''; 5169 height: 4px; 5170 left: 0; 5171 position: absolute; 5172 width: 100%; 5173 z-index: 0; 5174} 5175 5176.tab-carousel .tab-nav .highlight { 5177 position: absolute; 5178 height: 4px; 5179 width: 100px; 5180 bottom: 0; 5181 background: #33b5e5; 5182} 5183 5184.tab-carousel .tab-carousel-content { 5185 position: relative; 5186 overflow: hidden; 5187 white-space: nowrap; 5188} 5189 5190.tab-carousel .tab-carousel-content [data-tab] { 5191 display: inline-block; 5192 white-space: normal; 5193} 5194 5195 5196 5197/* 5198 Resource styling for the tab carousel. The tab carousel contains either 5199 a 3 column layout of resources or a single full-width resource. The 5200 latter has the 18x12 class applied to it and can be styled differently 5201 that way. 5202*/ 5203 5204.tab-carousel .resource .image { 5205 width: 100%; 5206 height: 250px; 5207 background-repeat: no-repeat; 5208 background-size: contain; 5209 background-position: 50% 50%; 5210} 5211 5212.tab-carousel .resource .info .title { 5213 font-size: 18px; 5214 line-height: 24px; 5215} 5216 5217.tab-carousel .resource .info .summary, 5218.tab-carousel .resource .info .cta { 5219 line-height: 24px; 5220 font-size: 16px; 5221} 5222 5223.tab-carousel .resource-card-18x12 { 5224 position: relative; 5225 padding-left: 450px; 5226 box-sizing: border-box; 5227 display: table-cell; 5228 vertical-align: middle; 5229} 5230 5231.tab-carousel .resource-card-18x12 .image { 5232 position: absolute; 5233 width: 420px; 5234 height: 100%; 5235 left: 0; 5236 top: 0; 5237} 5238 5239.tab-carousel .resource-card-18x12 .info { 5240 display: inline-block; 5241} 5242 5243.tab-carousel .resource-card-18x12 .info .title { 5244 margin-bottom: 26px; 5245} 5246 5247 5248/* 5249 Styles for the actions bar. 5250*/ 5251.actions-bar { 5252 background: #b0bec5; 5253 text-align: center; 5254} 5255 5256.actions-bar .actions { 5257 padding: 24px 0; 5258 text-align: justify; 5259 font-size: 0.1px; 5260 line-height: 0.1px; 5261} 5262 5263.actions-bar .actions:after { 5264 content: ''; 5265 width: 100%; 5266 display: inline-block; 5267} 5268 5269.actions-bar .actions > div { 5270 display: inline-block; 5271} 5272 5273.actions-bar .actions a { 5274 font-size: 24px; 5275 line-height: 50px; 5276 color: #fff; 5277 font-weight: 300; 5278} 5279 5280.actions-bar .actions .dac-sprite { 5281 margin: 0 -6px 0 -12px; 5282 -webkit-transition: all 190ms ease-out; 5283 transition: all 190ms ease-out; 5284} 5285 5286.actions-bar .actions a:hover .dac-sprite { 5287 5288 transform: translateX(5px); 5289} 5290 5291@media (max-width: 719px) { 5292 .actions-bar .actions > div { 5293 display: block; 5294 } 5295} 5296 5297 5298 5299/* 5300 Specific styles for new home page layout of the carousels. 5301*/ 5302 5303/* Big blue button */ 5304a.home-new-cta-btn, 5305.home-new-carousel-1 .resource-card-18x6 .cta { 5306 white-space: nowrap; 5307 display: inline-block; 5308 padding: 14px 32px; 5309 font-size: 18px; 5310 font-weight: 500; 5311 line-height: 24px; 5312 cursor: pointer; 5313 background: #33b5e6; 5314 border-radius: 4px; 5315 margin-top: 20px; 5316 color: #fff; 5317 transition: 0.2s background-color ease-in-out; 5318} 5319 5320.home-new-carousel-1 .resource-card-18x6 .cta:after { 5321 display: none; /* Hide the entity for this button */ 5322} 5323 5324a.home-new-cta-btn:hover, 5325.home-new-carousel-1 .resource-card-18x6 .cta:hover { 5326 color: #fff !important; 5327 background: #2d9fca; 5328} 5329 5330.home-new-carousel-1 .resource-card-18x6 .cta { 5331 position: absolute; 5332 bottom: 20px; 5333 left: 16px; 5334} 5335 5336/* Fullscreen carousel. */ 5337.home-new-carousel-1 { 5338 max-height: 700px; /* Set max height so doesn't get too long */ 5339} 5340 5341.home-new-carousel-1 .fullscreen-carousel-content { 5342 min-height: 450px; /* Set min height for all content */ 5343} 5344 5345.home-new-carousel-1 .hero { 5346 background: #000; 5347} 5348 5349.home-new-carousel-1 .hero-bg { 5350 background-image: url(/home-new/images/hero.jpg); 5351 background-position: right center; 5352 opacity: 0.85; 5353} 5354 5355/* 5356 Styling for special top card of full screen layout resource layout. 5357 We need to specifically style the 18x6 card to adjust its size and layout, 5358 since it's not a standard card, not sure if this is unique to the home page 5359 layout or should be namespaced within the fullscreen-carousel container. 5360*/ 5361.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 { 5362 height: 320px; 5363 background-color:#F9F9F9; 5364 border-radius: 0px; 5365 box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); 5366 5367} 5368 5369.home-new-carousel-1 .resource-card-18x6 .card-bg { 5370 width: 636px; 5371 height: 100%; 5372} 5373 5374.home-new-carousel-1 .resource-card-18x6 .card-info { 5375 right: 0px; 5376 left: 636px; 5377 height: 100%; 5378 top: 0px; 5379 padding: 15px 22px; 5380} 5381 5382.home-new-carousel-1 .resource-card-18x6 .card-info .util { 5383 display: none; 5384} 5385 5386.home-new-carousel-1 .resource-card-18x6 .card-info .title { 5387 font-size: 20px; 5388 font-weight: 500; 5389 margin-top: 15px; 5390 margin-bottom: 15px; 5391} 5392 5393.home-new-carousel-1 .resource-card-18x6 .card-info .text { 5394 font-size: 15px; 5395 line-height: 21px; 5396} 5397 5398 5399/* Tabbed carousel. */ 5400.home-new-carousel-2 { 5401 margin: 35px auto 100px auto; 5402} 5403 5404.home-new-carousel-2 h1 { 5405 font-size: 47px; 5406 font-weight: 100; 5407 line-height: 54px; 5408 text-align: center; 5409} 5410 5411.annotation-message { 5412 display: block; 5413 font-style: italic; 5414 color: #F80; 5415} 5416 5417 5418 5419/* Helpouts widget */ 5420.resource-card-6x2.helpouts-card { 5421 width: 255px; 5422 height: 40px; 5423 position:absolute; 5424 z-index:999; 5425 top:-8px; 5426 right:1px; 5427} 5428 5429.resource-card-6x2.helpouts-card > .card-info { 5430 left:35px; 5431 height:35px; 5432 padding:4px 8px 4px 0; 5433} 5434 5435.resource-card-6x2.helpouts-card > .card-info .helpouts-description { 5436 display:block; 5437 overflow:visible; 5438 font-size:12px; 5439 line-height:12px; 5440 text-align:right; 5441 color:#666; 5442} 5443 5444.helpouts-description .link-color { 5445 text-transform: uppercase; 5446} 5447 5448.resource-card-6x2 > .card-bg.helpouts-card-bg { 5449 width:35px; 5450 height:35px; 5451 margin:2px 0 0 0; 5452 background-image: url(../images/styles/helpouts-logo-35_2x.png); 5453 background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x); 5454} 5455 5456.resource-card-6x2 > .card-bg.helpouts-card-bg:after { 5457 display:none; 5458} 5459 5460.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { 5461 display: none !important; 5462} 5463 5464@media (max-width: 719px) { 5465 .dac-hidden-mobile { 5466 display: none !important; 5467 } 5468 5469 .dac-visible-mobile-block, .dac-mobile-only { 5470 display: block !important; 5471 } 5472 5473 .dac-visible-mobile-inline { 5474 display: inline !important; 5475 } 5476 5477 .dac-visible-mobile-inline-block { 5478 display: inline-block !important; 5479 } 5480} 5481 5482@media (min-width: 720px) and (max-width: 979px) { 5483 .dac-hidden-tablet { 5484 display: none !important; 5485 } 5486 5487 .dac-visible-tablet-block { 5488 display: block !important; 5489 } 5490 5491 .dac-visible-tablet-inline { 5492 display: inline !important; 5493 } 5494 5495 .dac-visible-tablet-inline-block { 5496 display: inline-block !important; 5497 } 5498} 5499 5500@media (min-width: 980px) { 5501 .dac-hidden-desktop { 5502 display: none !important; 5503 } 5504 5505 .dac-visible-desktop-block { 5506 display: block !important; 5507 } 5508 5509 .dac-visible-desktop-inline { 5510 display: inline !important; 5511 } 5512 5513 .dac-visible-desktop-inline-block { 5514 display: inline-block !important; 5515 } 5516} 5517 5518.dac-offset-parent { 5519 position: relative !important; 5520} 5521 5522/* New CSS */ 5523/************ RESOURCE CARDS ******************/ 5524/* Basic card-styling with shadow */ 5525.resource-card { 5526 background: #fff; 5527 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); 5528 display: block; 5529 position: relative; 5530} 5531 5532/* Styling for background image including tinting and section icons in stacks */ 5533.card-bg { 5534 bottom: 131px; 5535 display: block; 5536 position: absolute; 5537 vertical-align: top; 5538 width: 100%; 5539 left: 0; 5540 top: 0; 5541 background-size: cover; 5542 background-repeat: no-repeat; 5543 background-position: center; 5544 background-image: url(../images/resource-card-default-android.jpg); 5545} 5546 5547.card-bg:after { 5548 content: ""; 5549 display: block; 5550 height: 100%; 5551 width: 100%; 5552 opacity: 1; 5553 background: rgba(0, 0, 0, 0.05); 5554 -webkit-transition: opacity 0.5s; 5555 transition: opacity 0.5s; 5556} 5557 5558.static .card-bg:after { 5559 display: none; 5560} 5561 5562.card-bg .card-section-icon { 5563 position: absolute; 5564 top: 50%; 5565 width: 100%; 5566 margin-top: -35px; 5567 text-align: center; 5568 padding-top: 65px; 5569 z-index: 100; 5570} 5571 5572.card-bg .card-section-icon .icon { 5573 position: absolute; 5574 left: 50%; 5575 margin-left: -28px; 5576 top: 0px; 5577 width: 56px; 5578 height: 56px; 5579 background-repeat: no-repeat; 5580 background-position: 50% 50%; 5581 background-image: url(../images/stack-icon.png); 5582} 5583 5584.card-bg .card-section-icon .section { 5585 text-transform: uppercase; 5586 color: white; 5587 font-size: 14px; 5588} 5589 5590.card-info { 5591 position: absolute; 5592 box-sizing: border-box; 5593 height: 131px; 5594 right: 0; 5595 bottom: 0; 5596 left: 0; 5597 overflow: hidden; 5598 background: #fefefe; 5599 padding: 6px 12px; 5600} 5601 5602.card-info .section { 5603 color: #898989; 5604 font-size: 11px; 5605 font-weight: 700; 5606 letter-spacing: .3px; 5607 line-height: 20px; 5608 text-transform: uppercase; 5609} 5610 5611.card-info .title { 5612 color: #333; 5613 font-size: 18px; 5614 font-weight: 500; 5615 line-height: 24px; 5616 margin-bottom: 2px; 5617 max-height: 48px; 5618 overflow: hidden; 5619 padding-bottom: 5px; 5620 text-overflow: ellipsis; 5621 white-space: normal; 5622} 5623 5624.card-info .description { 5625 overflow: hidden; 5626} 5627 5628.card-info .description .text { 5629 color: #666; 5630 font-size: 14px; 5631 height: 60px; 5632 line-height: 20px; 5633 overflow: hidden; 5634 width: 100%; 5635} 5636 5637.card-info .description .util { 5638 position: absolute; 5639 right: 5px; 5640 bottom: 70px; 5641 opacity: 0; 5642 -webkit-transition: opacity 0.5s; 5643 transition: opacity 0.5s; 5644} 5645 5646.card-info.empty-desc .title { 5647 white-space: normal; 5648 overflow: visible; 5649} 5650 5651.card-info.empty-desc .description { 5652 display: none; 5653} 5654 5655/* Truncate card summaries at bounding box and 5656 * and apply ellipsis at lower right */ 5657.ellipsis { 5658 overflow: hidden; 5659 float: right; 5660 line-height: 15px; 5661 width: 100%; 5662} 5663 5664.ellipsis:before { 5665 content: ""; 5666 float: left; 5667 width: 5px; 5668 height: 100%; 5669} 5670 5671.ellipsis > *:first-child.text { 5672 float: right; 5673 width: 100% !important; 5674 margin-left: -5px; 5675} 5676 5677.ellipsis:after { 5678 content: "\02026"; 5679 height: 17px; 5680 padding-bottom: 4px; 5681 box-sizing: content-box; 5682 float: right; 5683 position: relative; 5684 top: -16px; 5685 left: 100%; 5686 width: 4em; 5687 margin-left: -4em; 5688 padding-right: 5px; 5689 background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); 5690 background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white); 5691 background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); 5692} 5693 5694.ellipsis:after { 5695 font-style: normal; 5696 color: #aaa; 5697 font-size: 13px; 5698 text-align: right; 5699} 5700 5701.resource-card:hover { 5702 cursor: pointer; 5703} 5704 5705.static .resource-card:hover { 5706 cursor: auto; 5707} 5708 5709.resource-card:hover .card-bg:after { 5710 opacity: 0; 5711} 5712 5713.resource-card:hover .card-info .description .util { 5714 opacity: 1; 5715} 5716 5717/* Carousel Layout */ 5718/* Carousel styles for landing page */ 5719.resource-carousel-layout { 5720 height: 531px; 5721 margin: 20px 0 20px 0; 5722 padding: 0 !important; 5723 position: relative; 5724 overflow: hidden; 5725} 5726 5727.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { 5728 display: none; 5729} 5730 5731.resource-carousel-layout .pagination { 5732 bottom: 97px; 5733 left: auto; 5734 padding-right: 10px; 5735 right: 0; 5736 text-align: right; 5737 width: 16.66666667%; 5738} 5739 5740.resource-carousel-layout .pagination ul li { 5741 text-indent: 8000px; 5742} 5743 5744.resource-carousel-layout .frame li { 5745 position: relative; 5746} 5747 5748.resource-carousel-layout .frame li .card-bg { 5749 bottom: 131px; 5750} 5751 5752.resource-carousel-layout .frame li .card-info { 5753 height: 131px; 5754 padding: 6px 12px; 5755 top: auto; 5756} 5757 5758.resource-carousel-layout .frame li .card-info .title { 5759 font-size: 28px; 5760 font-weight: 400; 5761 line-height: 32px; 5762} 5763 5764.resource-carousel-layout .frame li .card-info .description .text { 5765 height: 40px; 5766} 5767 5768.resource-carousel-layout .frame li .card-info .description .util { 5769 bottom: 97px; 5770 right: 4px; 5771} 5772 5773/* Stack Layout */ 5774.resource-stack-layout { 5775 display: inline-block; 5776 padding: 0; 5777} 5778 5779.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { 5780 /*text-transform: uppercase;*/ 5781 color: #898989; 5782 font-size: 17px; 5783 line-height: 24px; 5784 margin-bottom: 6px; 5785} 5786 5787.resource-stack-layout .section-card { 5788 height: 284px; 5789} 5790 5791.resource-stack-layout .section-card > .card-bg { 5792 height: 192px; 5793} 5794 5795.resource-stack-layout .section-card > .card-info { 5796 padding: 4px 12px 6px 12px; 5797 top: 192px; 5798} 5799 5800.resource-stack-layout .section-card > .card-info .section { 5801 display: none; 5802} 5803 5804.resource-stack-layout .section-card > .card-info .title { 5805 font-size: 17px; 5806 border-bottom: 1px solid #959595; 5807 padding-bottom: 0px; 5808} 5809 5810.resource-stack-layout .section-card > .card-info .description { 5811 font-size: 13px; 5812 line-height: 15px; 5813} 5814 5815.resource-stack-layout .section-card > .card-info .description .text { 5816 height: 30px; 5817} 5818 5819.resource-stack-layout .related-card { 5820 height: 90px; 5821} 5822 5823.resource-stack-layout .related-card > .card-bg { 5824 left: 0; 5825 top: 0; 5826 width: 90px; 5827 height: 100%; 5828 position: absolute; 5829 display: block; 5830} 5831 5832.resource-stack-layout .related-card > .card-info { 5833 left: 90px; 5834 padding: 4px 12px 4px 12px; 5835} 5836 5837.resource-stack-layout .related-card > .card-info .section { 5838 font-size: 12px; 5839 margin-bottom: 1px; 5840 display: none; 5841} 5842 5843.resource-stack-layout .related-card > .card-info .title { 5844 font-size: 16px; 5845 margin-bottom: -2px; 5846 white-space: normal; 5847 overflow: visible; 5848 text-overflow: ellipsis; 5849} 5850 5851.resource-stack-layout .related-card > .card-info .title:after { 5852 content: url(../images/link-out.png); 5853 display: block; 5854} 5855 5856.resource-stack-layout .related-card > .card-info .description { 5857 display: none; 5858} 5859 5860.resource-stack-layout .section-card-menu { 5861 /* Flexible height */ 5862 display: block; 5863 height: auto; 5864 width: auto; 5865} 5866 5867.resource-stack-layout .section-card-menu .card-bg { 5868 height: 155px; 5869 /* Flexible height */ 5870 position: relative; 5871 display: inline-block; 5872 vertical-align: top; 5873} 5874 5875.resource-stack-layout .section-card-menu .card-info { 5876 padding: 4px 12px 0px 12px; 5877 /* Flexible height */ 5878 position: relative; 5879 left: auto; 5880 top: auto; 5881 right: auto; 5882 bottom: auto; 5883} 5884 5885.resource-stack-layout .section-card-menu .card-info ul { 5886 list-style: none; 5887 margin: 0; 5888} 5889 5890.resource-stack-layout .section-card-menu .card-info ul li { 5891 list-style: none; 5892 margin: 0; 5893 padding: 15px 0; 5894 border-top-width: 1px; 5895 border-top-style: solid; 5896 border-top-color: #959595; 5897} 5898 5899.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 { 5900 color: #333 !important; 5901} 5902 5903.resource-stack-layout .section-card-menu .card-info ul li:first-child { 5904 border-top: none; 5905} 5906 5907.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after { 5908 opacity: 1; 5909 -webkit-transition: opacity 0.5s; 5910 transition: opacity 0.5s; 5911} 5912 5913.resource-stack-layout .section-card-menu .card-info ul li:hover .description { 5914 max-height: 30px; 5915 opacity: 1; 5916 -webkit-transition: max-height 0.5s, opacity 1s; 5917 transition: max-height 0.5s, opacity 1s; 5918} 5919 5920.resource-stack-layout .section-card-menu .card-info .title { 5921 font-size: 16px; 5922 margin-bottom: -2px; 5923 position: relative; 5924} 5925 5926.resource-stack-layout .section-card-menu .card-info .title:after { 5927 background: url(../images/stack-arrow-right.png); 5928 content: ''; 5929 opacity: 0; 5930 -webkit-transition: opacity 0.25s; 5931 transition: opacity 0.25s; 5932 position: absolute; 5933 right: 0px; 5934 top: 3px; 5935 width: 10px; 5936 height: 15px; 5937} 5938 5939.resource-stack-layout .section-card-menu .card-info .title.more { 5940 text-transform: uppercase; 5941 color: #898989; 5942 display: inline-block; 5943} 5944 5945.resource-stack-layout .section-card-menu .card-info .title.more:after { 5946 background: url(../images/stack-arrow-right.png); 5947 content: ''; 5948 display: block; 5949 position: absolute; 5950 right: -20px; 5951 top: 3px; 5952 width: 10px; 5953 height: 15px; 5954} 5955 5956.resource-stack-layout .section-card-menu .card-info .description { 5957 max-height: 0px; 5958 opacity: 0; 5959 overflow: hidden; 5960 font-size: 13px; 5961 line-height: 15px; 5962 /* Hover off */ 5963 -webkit-transition: max-height 0.5s, opacity 0.5s; 5964 transition: max-height 0.5s, opacity 0.5s; 5965} 5966 5967.resource-stack-layout .section-card-menu .card-info .description .text { 5968 height: 30px; 5969} 5970 5971.resource-stack-layout:after { 5972 content: "."; 5973 display: block; 5974 height: 0; 5975 clear: both; 5976 visibility: hidden; 5977} 5978 5979.resource-card, .resource-card-stack { 5980 margin-bottom: 20px; 5981} 5982 5983.resource-card-row-stack-last { 5984 margin-bottom: 0px !important; 5985} 5986 5987.resource-card-col-stack-last { 5988 margin-bottom: 0px !important; 5989} 5990 5991.resource-card-3x6 { 5992 height: 300px; 5993} 5994 5995.resource-card-3x12 { 5996 height: 620px; 5997} 5998 5999.resource-card-3x18 { 6000 height: 940px; 6001} 6002 6003.resource-card-6x6 { 6004 height: 300px; 6005} 6006 6007.resource-card-6x12 { 6008 height: 620px; 6009} 6010 6011.resource-card-6x18 { 6012 height: 940px; 6013} 6014 6015.resource-card-9x6 { 6016 height: 300px; 6017} 6018 6019.resource-card-9x12 { 6020 height: 620px; 6021} 6022 6023.resource-card-9x18 { 6024 height: 940px; 6025} 6026 6027.resource-card-12x6 { 6028 height: 300px; 6029} 6030 6031.resource-card-12x12 { 6032 height: 620px; 6033} 6034 6035.resource-card-12x18 { 6036 height: 940px; 6037} 6038 6039.resource-card-15x6 { 6040 height: 300px; 6041} 6042 6043.resource-card-15x12 { 6044 height: 620px; 6045} 6046 6047.resource-card-15x18 { 6048 height: 940px; 6049} 6050 6051.resource-card-18x6 { 6052 height: 300px; 6053} 6054 6055.resource-card-18x12 { 6056 height: 620px; 6057} 6058 6059.resource-card-18x18 { 6060 height: 940px; 6061} 6062 6063.resource-card-3x2 { 6064 height: 100px; 6065} 6066 6067.resource-card-3x2x3 { 6068 height: 90px; 6069 margin-bottom: 15px; 6070} 6071 6072.resource-card-3x3 { 6073 height: 150px; 6074} 6075 6076.resource-card-3x3x2 { 6077 height: 142px; 6078 margin-bottom: 16px; 6079} 6080 6081.resource-card-6x2 { 6082 height: 100px; 6083} 6084 6085.resource-card-6x2x3 { 6086 height: 90px; 6087 margin-bottom: 15px; 6088} 6089 6090.resource-card-6x3 { 6091 height: 150px; 6092} 6093 6094.resource-card-6x3x2 { 6095 height: 142px; 6096 margin-bottom: 16px; 6097} 6098 6099.resource-card-9x2 { 6100 height: 100px; 6101} 6102 6103.resource-card-9x2x3 { 6104 height: 90px; 6105 margin-bottom: 15px; 6106} 6107 6108.resource-card-9x3 { 6109 height: 150px; 6110} 6111 6112.resource-card-9x3x2 { 6113 height: 142px; 6114 margin-bottom: 16px; 6115} 6116 6117.resource-card-12x2 { 6118 height: 100px; 6119} 6120 6121.resource-card-12x2x3 { 6122 height: 90px; 6123 margin-bottom: 15px; 6124} 6125 6126.resource-card-12x3 { 6127 height: 150px; 6128} 6129 6130.resource-card-12x3x2 { 6131 height: 142px; 6132 margin-bottom: 16px; 6133} 6134 6135.resource-card-15x2 { 6136 height: 100px; 6137} 6138 6139.resource-card-15x2x3 { 6140 height: 90px; 6141 margin-bottom: 15px; 6142} 6143 6144.resource-card-15x3 { 6145 height: 150px; 6146} 6147 6148.resource-card-15x3x2 { 6149 height: 142px; 6150 margin-bottom: 16px; 6151} 6152 6153.resource-card-18x2 { 6154 height: 100px; 6155} 6156 6157.resource-card-18x2x3 { 6158 height: 90px; 6159 margin-bottom: 15px; 6160} 6161 6162.resource-card-18x3 { 6163 height: 150px; 6164} 6165 6166.resource-card-18x3x2 { 6167 height: 142px; 6168 margin-bottom: 16px; 6169} 6170 6171/* 6172 The following are styles for cards in the flowlayout above, styled by the number of rows they span 6173*/ 6174/* Single row, 2 column items. */ 6175.resource-card-9x6 { 6176 height: 390px; 6177} 6178 6179/* Double row, 1 column items. Eg full width video thumbnails. */ 6180.resource-card-18x12 { 6181 height: 558px; 6182} 6183 6184/* 1/3 row items */ 6185.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 { 6186 left: 0; 6187 top: 0; 6188 width: 90px; 6189 height: 100%; 6190 position: absolute; 6191 display: block; 6192} 6193 6194.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 { 6195 height: 100%; 6196 left: 90px; 6197 padding: 6px 12px; 6198 overflow: hidden; 6199} 6200 6201.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 { 6202 max-height: 48px; 6203 white-space: normal; 6204} 6205 6206.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 { 6207 display: none; 6208} 6209 6210.resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text { 6211 height: auto; 6212} 6213 6214/* Override to show the description instead of the content section */ 6215.no-section .resource-card-3x2 > .card-info .section, .no-section .resource-card-6x2 > .card-info .section { 6216 display: none; 6217} 6218 6219.no-section .resource-card-3x2 > .card-info .description, .no-section .resource-card-6x2 > .card-info .description { 6220 display: block; 6221} 6222 6223/* 1/2 row items */ 6224.resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 { 6225 height: 160px; 6226} 6227 6228.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 { 6229 left: 0; 6230 top: 0; 6231 width: 90px; 6232 height: 100%; 6233 position: absolute; 6234 display: block; 6235} 6236 6237.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 { 6238 height: 100%; 6239 left: 90px; 6240 padding: 6px 12px; 6241} 6242 6243.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 { 6244 display: none; 6245} 6246 6247.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 { 6248 max-height: 96px; 6249 white-space: normal; 6250} 6251 6252.resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text { 6253 height: auto; 6254} 6255 6256.resource-card-3x3 > .card-info .util, .resource-card-6x3 > .card-info .util, .resource-card-9x3 > .card-info .util, .resource-card-12x3 > .card-info .util, .resource-card-15x3 > .card-info .util, .resource-card-18x3 > .card-info .util { 6257 display: none; 6258} 6259 6260/* placement of plusone */ 6261.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 { 6262 bottom: 2px; 6263} 6264 6265.resource-card-18x12 > .card-info .description .util { 6266 bottom: 2px; 6267} 6268 6269/* Overrides for col-16 6x6 cards linking to local content on landing pages. 6270 Suppresses "section". */ 6271.landing .card-info .section { 6272 display: none; 6273} 6274 6275/* 6276 Generate a resource stack layout for a 3 column widget spanning 16 grid cols 6277*/ 6278.resource-stack-layout.col-16 { 6279 margin: 0 -14px 0 0; 6280 width: 954px; 6281} 6282 6283.resource-stack-layout.col-16 .resource-card-stack { 6284 margin: 0 14px 0 0; 6285 width: 304px; 6286} 6287 6288/* Example of card menu tinting */ 6289.resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after { 6290 background: rgba(126, 55, 148, 0.4) !important; 6291} 6292 6293.resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon { 6294 background-color: #7e3794 !important; 6295} 6296 6297.resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { 6298 border-top-color: #7e3794 !important; 6299} 6300 6301/* tinting for stacks */ 6302div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { 6303 border-top-color: #7e3794 !important; 6304} 6305 6306.dac-fab, .button, .landing-button, .dac-button { 6307 background: transparent; 6308 border: 0; 6309 box-sizing: border-box; 6310 color: currentColor; 6311 cursor: pointer; 6312 display: inline-block; 6313 font-weight: 500; 6314 font-size: 14px; 6315 font-style: inherit; 6316 font-variant: inherit; 6317 font-family: inherit; 6318 letter-spacing: .5px; 6319 line-height: 24px; 6320 margin: 6px 16px 6px 0; 6321 min-width: 88px; 6322 outline: 0; 6323 padding: 6px 12px; 6324 position: relative; 6325 text-align: center; 6326 text-decoration: none; 6327 text-transform: uppercase; 6328 -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 6329 transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 6330 -webkit-user-select: none; 6331 -moz-user-select: none; 6332 -ms-user-select: none; 6333 user-select: none; 6334 white-space: nowrap; 6335} 6336 6337.button, .landing-button, .dac-button.dac-raised { 6338 background-color: #FAFAFA; 6339 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 6340} 6341 6342.dac-button.dac-raised.dac-primary, .landing-secondary, .button { 6343 background-color: #039bef; 6344} 6345 6346.dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { 6347 background-color: #0288d1; 6348} 6349 6350.dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { 6351 background-color: #0277bd; 6352} 6353 6354.dac-button.dac-raised.dac-red, .landing-primary { 6355 background-color: #bf3722; 6356} 6357 6358.dac-button.dac-raised.dac-red:hover, .landing-primary:hover { 6359 background-color: #9c2d1c; 6360} 6361 6362.dac-button.dac-raised.dac-red:active, .landing-primary:active { 6363 background-color: #822517; 6364} 6365 6366.dac-button.dac-raised.dac-green, .landing-button.green { 6367 background-color: #90C653; 6368} 6369 6370.dac-button.dac-raised.dac-primary, .landing-secondary, .button, .dac-button.dac-raised.dac-red, .landing-primary, .dac-button.dac-raised.dac-green, .landing-button.green { 6371 color: #fff; 6372} 6373 6374.dac-button.dac-large, .landing-button { 6375 padding: 12px 24px; 6376} 6377 6378.dac-fab { 6379 background: #fff; 6380 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 6381 border-radius: 50%; 6382 font-size: 0; 6383 height: 36px; 6384 line-height: 36px; 6385 min-width: 0; 6386 overflow: hidden; 6387 padding: 0; 6388 vertical-align: middle; 6389 width: 36px; 6390} 6391 6392.dac-fab:hover, a:hover > .dac-fab { 6393 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); 6394} 6395 6396.dac-fab.dac-primary { 6397 background: #00c7a0; 6398} 6399 6400.dac-fab.dac-large { 6401 height: 54px; 6402 line-height: 54px; 6403 width: 54px; 6404} 6405 6406.dac-scroll-button { 6407 height: 54px; 6408 line-height: 54px; 6409 margin: 0; 6410 position: absolute; 6411 right: 0; 6412 top: -27px; 6413 width: 54px; 6414 z-index: 1; 6415} 6416 6417@media (max-width: 719px) { 6418 .dac-scroll-button { 6419 display: none; 6420 } 6421} 6422 6423/* Footer component */ 6424.dac-footer { 6425 background-color: #fff; 6426 border-top: 1px solid #f9f9f9; 6427 clear: both; 6428 color: #999; 6429 font-size: 12px; 6430 margin-top: 40px; 6431 padding-bottom: 20px; 6432 position: relative; 6433} 6434 6435.dac-footer a { 6436 color: #999; 6437} 6438 6439.dac-footer p { 6440 margin: 7px 0 0; 6441} 6442 6443.dac-footer-main { 6444 padding: 30px 0; 6445} 6446 6447.dac-footer-reachout { 6448 text-align: right; 6449} 6450 6451.dac-footer-contact, .dac-footer-social { 6452 display: inline-block; 6453} 6454 6455.dac-footer a.dac-footer-getnews, .dac-footer a.dac-footer-contact-link { 6456 color: #000; 6457 cursor: pointer; 6458 font-size: 20px; 6459 font-weight: 300; 6460 margin: 0 8px; 6461 vertical-align: middle; 6462} 6463 6464.dac-footer-getnews > .dac-fab { 6465 margin-left: 4px; 6466} 6467 6468.dac-footer-separator { 6469 background: #f9f9f9; 6470 margin: 0 0 12px; 6471} 6472 6473.dac-footer-links a + a:before { 6474 content: '|'; 6475 cursor: default; 6476 margin: 0 10px 0 8px; 6477} 6478 6479.dac-footer .locales { 6480 float: right; 6481 margin: 0; 6482} 6483 6484.dac-footer .locales select { 6485 background-color: #f9f9f9; 6486 border-radius: 0; 6487 font-size: 12px; 6488 height: auto; 6489 margin-top: -2px; 6490 padding: 8px 12px; 6491} 6492 6493@media (max-width: 719px) { 6494 .dac-footer-reachout { 6495 text-align: left; 6496 } 6497 6498 .dac-footer-social { 6499 display: block; 6500 } 6501 6502 .dac-footer-social-link, .dac-footer-contact-link { 6503 display: inline-block; 6504 margin-top: 20px; 6505 } 6506 6507 .dac-footer .locales { 6508 display: block; 6509 float: none; 6510 margin-top: 15px; 6511 } 6512} 6513 6514/* ============================================================================= 6515 Columns 6516 ========================================================================== */ 6517.wrap { 6518 margin: 0 auto; 6519 max-width: 940px; 6520 clear: both; 6521} 6522 6523.cols { 6524 margin-left: -10px; 6525 margin-right: -10px; 6526 /** 6527 * For modern browsers 6528 * 1. The space content is one way to avoid an Opera bug when the 6529 * contenteditable attribute is included anywhere else in the document. 6530 * Otherwise it causes space to appear at the top and bottom of elements 6531 * that are clearfixed. 6532 * 2. The use of `table` rather than `block` is only necessary if using 6533 * `:before` to contain the top-margins of child elements. 6534 */ 6535} 6536 6537.cols:before, .cols:after { 6538 content: ' '; 6539 /* 1 */ 6540 display: table; 6541 /* 2 */ 6542} 6543 6544.cols:after { 6545 clear: both; 6546} 6547 6548[class*=col-] { 6549 box-sizing: border-box; 6550 float: left; 6551 min-height: 1px; 6552 padding-left: 10px; 6553 padding-right: 10px; 6554 position: relative; 6555} 6556 6557.col-1 { 6558 width: 6.25%; 6559} 6560 6561.col-2 { 6562 width: 12.5%; 6563} 6564 6565.col-3 { 6566 width: 18.75%; 6567} 6568 6569.col-4 { 6570 width: 25%; 6571} 6572 6573.col-5 { 6574 width: 31.25%; 6575} 6576 6577.col-6 { 6578 width: 37.5%; 6579} 6580 6581.col-7 { 6582 width: 43.75%; 6583} 6584 6585.col-8 { 6586 width: 50%; 6587} 6588 6589.col-9 { 6590 width: 56.25%; 6591} 6592 6593.col-10 { 6594 width: 62.5%; 6595} 6596 6597.col-11 { 6598 width: 68.75%; 6599} 6600 6601.col-12 { 6602 width: 75%; 6603} 6604 6605.col-13 { 6606 width: 81.25%; 6607} 6608 6609.col-14 { 6610 width: 87.5%; 6611} 6612 6613.col-15 { 6614 width: 93.75%; 6615} 6616 6617.col-16 { 6618 width: 100%; 6619} 6620 6621.col-13 .col-1 { 6622 width: 7.69230769%; 6623} 6624 6625.col-13 .col-2 { 6626 width: 15.38461538%; 6627} 6628 6629.col-13 .col-3 { 6630 width: 23.07692308%; 6631} 6632 6633.col-13 .col-4 { 6634 width: 30.76923077%; 6635} 6636 6637.col-13 .col-5 { 6638 width: 38.46153846%; 6639} 6640 6641.col-13 .col-6 { 6642 width: 46.15384615%; 6643} 6644 6645.col-13 .col-7 { 6646 width: 53.84615385%; 6647} 6648 6649.col-13 .col-8 { 6650 width: 61.53846154%; 6651} 6652 6653.col-13 .col-9 { 6654 width: 69.23076923%; 6655} 6656 6657.col-13 .col-10 { 6658 width: 76.92307692%; 6659} 6660 6661.col-13 .col-11 { 6662 width: 84.61538462%; 6663} 6664 6665.col-13 .col-12 { 6666 width: 92.30769231%; 6667} 6668 6669.col-13 .col-13 { 6670 width: 100%; 6671} 6672 6673.col-12 .col-1 { 6674 width: 8.33333333%; 6675} 6676 6677.col-12 .col-2 { 6678 width: 16.66666667%; 6679} 6680 6681.col-12 .col-3 { 6682 width: 25%; 6683} 6684 6685.col-12 .col-4 { 6686 width: 33.33333333%; 6687} 6688 6689.col-12 .col-5 { 6690 width: 41.66666667%; 6691} 6692 6693.col-12 .col-6 { 6694 width: 50%; 6695} 6696 6697.col-12 .col-7 { 6698 width: 58.33333333%; 6699} 6700 6701.col-12 .col-8 { 6702 width: 66.66666667%; 6703} 6704 6705.col-12 .col-9 { 6706 width: 75%; 6707} 6708 6709.col-12 .col-10 { 6710 width: 83.33333333%; 6711} 6712 6713.col-12 .col-11 { 6714 width: 91.66666667%; 6715} 6716 6717.col-12 .col-12 { 6718 width: 100%; 6719} 6720 6721.col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 { 6722 width: 100%; 6723} 6724 6725.col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 { 6726 width: 50%; 6727} 6728 6729.col-1of3, .col-2of6, .col-4of12 { 6730 width: 33.33333333%; 6731} 6732 6733.col-2of3, .col-4of6, .col-8of12 { 6734 width: 66.66666667%; 6735} 6736 6737.col-1of4, .col-2of8, .col-3of12, .col-4of16 { 6738 width: 25%; 6739} 6740 6741.col-3of4, .col-6of8, .col-9of12, .col-12of16 { 6742 width: 75%; 6743} 6744 6745.col-1of5, .col-2of10 { 6746 width: 20%; 6747} 6748 6749.col-2of5, .col-4of10 { 6750 width: 40%; 6751} 6752 6753.col-3of5, .col-6of10 { 6754 width: 60%; 6755} 6756 6757.col-4of5, .col-8of10 { 6758 width: 80%; 6759} 6760 6761.col-1of6, .col-2of12 { 6762 width: 16.66666667%; 6763} 6764 6765.col-5of6, .col-10of12 { 6766 width: 83.33333333%; 6767} 6768 6769.col-1of8, .col-2of16 { 6770 width: 12.5%; 6771} 6772 6773.col-3of8, .col-6of16 { 6774 width: 37.5%; 6775} 6776 6777.col-5of8, .col-10of16 { 6778 width: 62.5%; 6779} 6780 6781.col-7of8, .col-14of16 { 6782 width: 87.5%; 6783} 6784 6785.col-1of10 { 6786 width: 10%; 6787} 6788 6789.col-3of10 { 6790 width: 30%; 6791} 6792 6793.col-7of10 { 6794 width: 70%; 6795} 6796 6797.col-9of10 { 6798 width: 90%; 6799} 6800 6801.col-1of12 { 6802 width: 8.33333333%; 6803} 6804 6805.col-5of12 { 6806 width: 41.66666667%; 6807} 6808 6809.col-7of12 { 6810 width: 58.33333333%; 6811} 6812 6813.col-11of12 { 6814 width: 91.66666667%; 6815} 6816 6817.col-1of16 { 6818 width: 6.25%; 6819} 6820 6821.col-3of16 { 6822 width: 18.75%; 6823} 6824 6825.col-5of16 { 6826 width: 31.25%; 6827} 6828 6829.col-7of16 { 6830 width: 43.75%; 6831} 6832 6833.col-9of16 { 6834 width: 56.25%; 6835} 6836 6837.col-11of16 { 6838 width: 68.75%; 6839} 6840 6841.col-13of16 { 6842 width: 81.25%; 6843} 6844 6845.col-15of16 { 6846 width: 93.75%; 6847} 6848 6849.col-pull-1of1, .col-pull-2of2, .col-pull-3of3, .col-pull-4of4, .col-pull-5of5, .col-pull-6of6, .col-pull-8of8, .col-pull-10of10, .col-pull-12of12, .col-pull-16of16 { 6850 left: -100%; 6851} 6852 6853.col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 { 6854 left: -50%; 6855} 6856 6857.col-pull-1of3, .col-pull-2of6, .col-pull-4of12 { 6858 left: -33.33333333%; 6859} 6860 6861.col-pull-2of3, .col-pull-4of6, .col-pull-8of12 { 6862 left: -66.66666667%; 6863} 6864 6865.col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 { 6866 left: -25%; 6867} 6868 6869.col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 { 6870 left: -75%; 6871} 6872 6873.col-pull-1of5, .col-pull-2of10 { 6874 left: -20%; 6875} 6876 6877.col-pull-2of5, .col-pull-4of10 { 6878 left: -40%; 6879} 6880 6881.col-pull-3of5, .col-pull-6of10 { 6882 left: -60%; 6883} 6884 6885.col-pull-4of5, .col-pull-8of10 { 6886 left: -80%; 6887} 6888 6889.col-pull-1of6, .col-pull-2of12 { 6890 left: -16.66666667%; 6891} 6892 6893.col-pull-5of6, .col-pull-10of12 { 6894 left: -83.33333333%; 6895} 6896 6897.col-pull-1of8, .col-pull-2of16 { 6898 left: -12.5%; 6899} 6900 6901.col-pull-3of8, .col-pull-6of16 { 6902 left: -37.5%; 6903} 6904 6905.col-pull-5of8, .col-pull-10of16 { 6906 left: -62.5%; 6907} 6908 6909.col-pull-7of8, .col-pull-14of16 { 6910 left: -87.5%; 6911} 6912 6913.col-pull-1of10 { 6914 left: -10%; 6915} 6916 6917.col-pull-3of10 { 6918 left: -30%; 6919} 6920 6921.col-pull-7of10 { 6922 left: -70%; 6923} 6924 6925.col-pull-9of10 { 6926 left: -90%; 6927} 6928 6929.col-pull-1of12 { 6930 left: -8.33333333%; 6931} 6932 6933.col-pull-5of12 { 6934 left: -41.66666667%; 6935} 6936 6937.col-pull-7of12 { 6938 left: -58.33333333%; 6939} 6940 6941.col-pull-11of12 { 6942 left: -91.66666667%; 6943} 6944 6945.col-pull-1of16 { 6946 left: -6.25%; 6947} 6948 6949.col-pull-3of16 { 6950 left: -18.75%; 6951} 6952 6953.col-pull-5of16 { 6954 left: -31.25%; 6955} 6956 6957.col-pull-7of16 { 6958 left: -43.75%; 6959} 6960 6961.col-pull-9of16 { 6962 left: -56.25%; 6963} 6964 6965.col-pull-11of16 { 6966 left: -68.75%; 6967} 6968 6969.col-pull-13of16 { 6970 left: -81.25%; 6971} 6972 6973.col-pull-15of16 { 6974 left: -93.75%; 6975} 6976 6977.col-push-1of1, .col-push-2of2, .col-push-3of3, .col-push-4of4, .col-push-5of5, .col-push-6of6, .col-push-8of8, .col-push-10of10, .col-push-12of12, .col-push-16of16 { 6978 left: 100%; 6979} 6980 6981.col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 { 6982 left: 50%; 6983} 6984 6985.col-push-1of3, .col-push-2of6, .col-push-4of12 { 6986 left: 33.33333333%; 6987} 6988 6989.col-push-2of3, .col-push-4of6, .col-push-8of12 { 6990 left: 66.66666667%; 6991} 6992 6993.col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 { 6994 left: 25%; 6995} 6996 6997.col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 { 6998 left: 75%; 6999} 7000 7001.col-push-1of5, .col-push-2of10 { 7002 left: 20%; 7003} 7004 7005.col-push-2of5, .col-push-4of10 { 7006 left: 40%; 7007} 7008 7009.col-push-3of5, .col-push-6of10 { 7010 left: 60%; 7011} 7012 7013.col-push-4of5, .col-push-8of10 { 7014 left: 80%; 7015} 7016 7017.col-push-1of6, .col-push-2of12 { 7018 left: 16.66666667%; 7019} 7020 7021.col-push-5of6, .col-push-10of12 { 7022 left: 83.33333333%; 7023} 7024 7025.col-push-1of8, .col-push-2of16 { 7026 left: 12.5%; 7027} 7028 7029.col-push-3of8, .col-push-6of16 { 7030 left: 37.5%; 7031} 7032 7033.col-push-5of8, .col-push-10of16 { 7034 left: 62.5%; 7035} 7036 7037.col-push-7of8, .col-push-14of16 { 7038 left: 87.5%; 7039} 7040 7041.col-push-1of10 { 7042 left: 10%; 7043} 7044 7045.col-push-3of10 { 7046 left: 30%; 7047} 7048 7049.col-push-7of10 { 7050 left: 70%; 7051} 7052 7053.col-push-9of10 { 7054 left: 90%; 7055} 7056 7057.col-push-1of12 { 7058 left: 8.33333333%; 7059} 7060 7061.col-push-5of12 { 7062 left: 41.66666667%; 7063} 7064 7065.col-push-7of12 { 7066 left: 58.33333333%; 7067} 7068 7069.col-push-11of12 { 7070 left: 91.66666667%; 7071} 7072 7073.col-push-1of16 { 7074 left: 6.25%; 7075} 7076 7077.col-push-3of16 { 7078 left: 18.75%; 7079} 7080 7081.col-push-5of16 { 7082 left: 31.25%; 7083} 7084 7085.col-push-7of16 { 7086 left: 43.75%; 7087} 7088 7089.col-push-9of16 { 7090 left: 56.25%; 7091} 7092 7093.col-push-11of16 { 7094 left: 68.75%; 7095} 7096 7097.col-push-13of16 { 7098 left: 81.25%; 7099} 7100 7101.col-push-15of16 { 7102 left: 93.75%; 7103} 7104 7105@media (max-width: 960px) and (min-width: 720px) { 7106 .col-tablet-1of1, .col-tablet-2of2, .col-tablet-3of3, .col-tablet-4of4, .col-tablet-5of5, .col-tablet-6of6, .col-tablet-8of8, .col-tablet-10of10, .col-tablet-12of12, .col-tablet-16of16 { 7107 width: 100%; 7108 } 7109 7110 .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 { 7111 width: 50%; 7112 } 7113 7114 .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 { 7115 width: 33.33333333%; 7116 } 7117 7118 .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 { 7119 width: 66.66666667%; 7120 } 7121 7122 .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 { 7123 width: 25%; 7124 } 7125 7126 .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 { 7127 width: 75%; 7128 } 7129 7130 .col-tablet-1of5, .col-tablet-2of10 { 7131 width: 20%; 7132 } 7133 7134 .col-tablet-2of5, .col-tablet-4of10 { 7135 width: 40%; 7136 } 7137 7138 .col-tablet-3of5, .col-tablet-6of10 { 7139 width: 60%; 7140 } 7141 7142 .col-tablet-4of5, .col-tablet-8of10 { 7143 width: 80%; 7144 } 7145 7146 .col-tablet-1of6, .col-tablet-2of12 { 7147 width: 16.66666667%; 7148 } 7149 7150 .col-tablet-5of6, .col-tablet-10of12 { 7151 width: 83.33333333%; 7152 } 7153 7154 .col-tablet-1of8, .col-tablet-2of16 { 7155 width: 12.5%; 7156 } 7157 7158 .col-tablet-3of8, .col-tablet-6of16 { 7159 width: 37.5%; 7160 } 7161 7162 .col-tablet-5of8, .col-tablet-10of16 { 7163 width: 62.5%; 7164 } 7165 7166 .col-tablet-7of8, .col-tablet-14of16 { 7167 width: 87.5%; 7168 } 7169 7170 .col-tablet-1of10 { 7171 width: 10%; 7172 } 7173 7174 .col-tablet-3of10 { 7175 width: 30%; 7176 } 7177 7178 .col-tablet-7of10 { 7179 width: 70%; 7180 } 7181 7182 .col-tablet-9of10 { 7183 width: 90%; 7184 } 7185 7186 .col-tablet-1of12 { 7187 width: 8.33333333%; 7188 } 7189 7190 .col-tablet-5of12 { 7191 width: 41.66666667%; 7192 } 7193 7194 .col-tablet-7of12 { 7195 width: 58.33333333%; 7196 } 7197 7198 .col-tablet-11of12 { 7199 width: 91.66666667%; 7200 } 7201 7202 .col-tablet-1of16 { 7203 width: 6.25%; 7204 } 7205 7206 .col-tablet-3of16 { 7207 width: 18.75%; 7208 } 7209 7210 .col-tablet-5of16 { 7211 width: 31.25%; 7212 } 7213 7214 .col-tablet-7of16 { 7215 width: 43.75%; 7216 } 7217 7218 .col-tablet-9of16 { 7219 width: 56.25%; 7220 } 7221 7222 .col-tablet-11of16 { 7223 width: 68.75%; 7224 } 7225 7226 .col-tablet-13of16 { 7227 width: 81.25%; 7228 } 7229 7230 .col-tablet-15of16 { 7231 width: 93.75%; 7232 } 7233} 7234 7235.col-3-wide { 7236 width: 33.33333333%; 7237} 7238 7239@media (max-width: 719px) { 7240 [class*=col-] { 7241 float: none; 7242 left: 0; 7243 width: auto; 7244 } 7245} 7246 7247/* Header component */ 7248.dac-header { 7249 background: #fff; 7250 height: 64px; 7251 margin: 0 -20px; 7252} 7253 7254@media (max-width: 719px) { 7255 .dac-header { 7256 margin: 0 -10px; 7257 } 7258} 7259 7260.about .dac-header, .distribute .dac-header, .develop .dac-header { 7261 height: 128px; 7262} 7263 7264.dac-header-inner { 7265 background: #fff; 7266 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); 7267 box-sizing: border-box; 7268 height: 64px; 7269 left: 0; 7270 right: 0; 7271 top: 0; 7272 z-index: 52; 7273} 7274 7275.dac-header.dac-sub .dac-header-inner { 7276 border-bottom: 1px solid #e5e5e5; 7277 box-shadow: none; 7278} 7279 7280.dac-header.is-sticky .dac-header-inner { 7281 position: fixed; 7282 -webkit-animation: .3s dac-header-show; 7283 animation: .3s dac-header-show; 7284} 7285 7286.dac-header-logo { 7287 border-right: 1px solid #e5e5e5; 7288 display: block; 7289 font-size: 20px; 7290 font-weight: 300; 7291 float: left; 7292 letter-spacing: .3px; 7293 line-height: 36px; 7294 margin-right: 16px; 7295 padding: 14px 24px 14px; 7296} 7297 7298.dac-header-logo:link, .dac-header-logo:visited, .dac-header-logo:hover, .dac-header-logo:active { 7299 color: #444; 7300} 7301 7302.dac-header-logo-image { 7303 margin-right: 5px; 7304 vertical-align: top; 7305} 7306 7307.dac-header-consoleBtn { 7308 border: 1px solid #c5c5c5; 7309 border-radius: 4px; 7310 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11); 7311 background: #fff; 7312 float: right; 7313 font-size: 14px; 7314 line-height: 28px; 7315 margin: 17px 30px 17px 10px; 7316 padding: 0 10px; 7317 position: relative; 7318 z-index: 52; 7319} 7320 7321.dac-header-consoleBtn > .dac-sprite { 7322 margin-right: 5px; 7323} 7324 7325.dac-header-consoleBtn:link, .dac-header-consoleBtn:visited, .dac-header-consoleBtn:hover, .dac-header-consoleBtn:active { 7326 color: #666; 7327} 7328 7329.dac-header-consoleBtn:focus { 7330 background: rgba(63, 81, 181, 0.1); 7331 outline: 0; 7332} 7333 7334@media (max-width: 719px) { 7335 .dac-header { 7336 height: 64px !important; 7337 text-align: center; 7338 } 7339 7340 .dac-header-inner { 7341 position: fixed; 7342 } 7343 7344 .dac-header-logo { 7345 border-right: 0; 7346 display: inline-block; 7347 margin-right: 0; 7348 float: none; 7349 } 7350 7351 .dac-header.dac-sub { 7352 display: none; 7353 } 7354 7355 .dac-header-consoleBtn { 7356 display: none; 7357 } 7358} 7359 7360@-webkit-keyframes dac-header-show { 7361 0% { 7362 -webkit-transform: translateY(-64px); 7363 transform: translateY(-64px); 7364 } 7365 7366 100% { 7367 -webkit-transform: translateY(0); 7368 transform: translateY(0); 7369 } 7370} 7371 7372@keyframes dac-header-show { 7373 0% { 7374 -webkit-transform: translateY(-64px); 7375 transform: translateY(-64px); 7376 } 7377 7378 100% { 7379 -webkit-transform: translateY(0); 7380 transform: translateY(0); 7381 } 7382} 7383 7384/* Header Breadcrumbs component */ 7385.dac-header-crumbs { 7386 display: none; 7387 list-style-type: none; 7388 margin: 0; 7389} 7390 7391.is-sticky .dac-header-crumbs { 7392 display: block; 7393} 7394 7395.dac-header-crumbs-item { 7396 float: left; 7397 position: relative; 7398 margin: 0; 7399 padding-left: 10px; 7400} 7401 7402.dac-header-crumbs-item:before { 7403 color: #444; 7404 content: '>'; 7405 font-weight: 300; 7406 font-size: 20px; 7407 left: 0; 7408 line-height: 28px; 7409 padding: 16px 0; 7410 position: absolute; 7411} 7412 7413.dac-header-crumbs-item:first-child:before { 7414 content: none; 7415} 7416 7417.dac-header-crumbs-link { 7418 display: block; 7419 font-size: 16px; 7420 font-weight: 300; 7421 line-height: 32px; 7422 padding: 16px 16px; 7423 -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7424 transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7425} 7426 7427.dac-header-crumbs-link:link, .dac-header-crumbs-link:visited, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:active { 7428 color: #444; 7429} 7430 7431.dac-header-crumbs-link:focus { 7432 background: rgba(63, 81, 181, 0.1); 7433 outline: 0; 7434} 7435 7436.dac-header-crumbs-link.current { 7437 color: #6ab344; 7438 font-weight: 400; 7439} 7440 7441@media (max-width: 719px) { 7442 .dac-header-crumbs { 7443 display: none; 7444 } 7445} 7446 7447/* Header site search component */ 7448.dac-header-search { 7449 background: #fff; 7450 border-left: 1px solid #e5e5e5; 7451 display: block; 7452 float: right; 7453 height: 28px; 7454 padding: 18px 0; 7455 position: relative; 7456 overflow: hidden; 7457 -webkit-transition: width 0.4s ease, left 0.4s ease; 7458 transition: width 0.4s ease, left 0.4s ease; 7459 width: 64px; 7460 z-index: 52; 7461} 7462 7463.dac-header-search:hover, .dac-header-search.active { 7464 width: 228px; 7465} 7466 7467.dac-header-search-inner { 7468 width: 228px; 7469} 7470 7471.dac-header-search-btn { 7472 background: url(../images/icon_search.png) 50% 0 no-repeat; 7473 height: 28px; 7474 position: absolute; 7475 width: 64px; 7476} 7477 7478.dac-header-search:hover .dac-header-search-btn { 7479 background-position: 50% -28px; 7480} 7481 7482.dac-header-search-form { 7483 left: 54px; 7484 opacity: 0; 7485 position: absolute; 7486 right: 24px; 7487 top: 20px; 7488 -webkit-transition: opacity .4s; 7489 transition: opacity .4s; 7490} 7491 7492.dac-header-search:hover .dac-header-search-form, .dac-header-search.active .dac-header-search-form { 7493 opacity: 1; 7494} 7495 7496.dac-header-search-input { 7497 background-color: transparent; 7498 border: none; 7499 border-bottom: 1px solid #CCC; 7500 box-sizing: border-box; 7501 color: #2f2f2f; 7502 font-size: 14px; 7503 height: 24px; 7504 outline: none; 7505 padding: 4px 20px 4px 0; 7506 width: 100%; 7507 z-index: 1500; 7508} 7509 7510.dac-header-search:hover .dac-header-search-input { 7511 border-bottom: 1px solid #33b5e5; 7512} 7513 7514.dac-header-search-input:focus { 7515 color: #222; 7516 font-weight: bold; 7517 outline: 0; 7518} 7519 7520.dac-header-search-close { 7521 position: absolute; 7522 right: 4px; 7523 bottom: 4px; 7524 width: 16px; 7525 height: 16px; 7526 margin: 0; 7527 text-indent: -1000em; 7528 background: url(../images/close.png) no-repeat 0 0; 7529 z-index: 9999; 7530} 7531 7532.dac-header-search-close:hover, .dac-header-search-close:focus { 7533 background-position: -16px 0; 7534 cursor: pointer; 7535} 7536 7537@media (max-width: 719px) { 7538 .dac-header-search { 7539 position: absolute; 7540 left: calc(100% - 64px); 7541 right: 0; 7542 top: 0; 7543 width: auto; 7544 } 7545 7546 .dac-header-search:hover, .dac-header-search.active { 7547 left: 64px; 7548 width: auto; 7549 } 7550} 7551 7552/* Main navigation component */ 7553.is-sticky .dac-nav, .dac-nav-head, .dac-nav-toggle { 7554 display: none; 7555} 7556 7557.dac-nav-list { 7558 list-style-type: none; 7559 left: 192px; 7560 margin: 0; 7561 position: absolute; 7562 right: 0; 7563 top: 0; 7564 z-index: 51; 7565} 7566 7567.dac-nav-item { 7568 float: left; 7569 margin: 0; 7570} 7571 7572.dac-nav-head { 7573 margin-bottom: 10px; 7574} 7575 7576.dac-nav-dimmer { 7577 background: #000; 7578 display: none; 7579 height: 100%; 7580 left: 0; 7581 opacity: 0; 7582 position: fixed; 7583 top: 0; 7584 -webkit-transition: visibility 0s linear .3s, opacity .3s linear; 7585 transition: visibility 0s linear .3s, opacity .3s linear; 7586 -webkit-transform: translateZ(0); 7587 transform: translateZ(0); 7588 visibility: hidden; 7589 width: 100%; 7590 z-index: 52; 7591} 7592 7593.dac-nav-hamburger { 7594 display: inline-block; 7595 height: 15px; 7596 width: 16px; 7597} 7598 7599.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { 7600 background: #999; 7601 display: block; 7602 height: 3px; 7603 margin: 3px 0 0; 7604 width: 100%; 7605} 7606 7607.dac-nav-link { 7608 display: block; 7609 font-size: 16px; 7610 font-weight: 300; 7611 letter-spacing: .24px; 7612 line-height: 32px; 7613 padding: 18px 16px 14px; 7614 -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7615 transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7616} 7617 7618.dac-nav-link:link, .dac-nav-link:visited, .dac-nav-link:hover, .dac-nav-link:active { 7619 color: #444; 7620} 7621 7622.dac-nav-link:focus { 7623 background: rgba(63, 81, 181, 0.1); 7624 outline: 0; 7625} 7626 7627.dac-nav-link.has-subnav, .dac-nav-link.selected { 7628 border-bottom: 3px solid #6ab344; 7629 font-weight: 500; 7630 padding-bottom: 11px; 7631} 7632 7633.dac-nav-secondary { 7634 border-bottom: 1px solid #e5e5e5; 7635 display: none; 7636 left: -192px; 7637 list-style-type: none; 7638 margin: 0; 7639 position: absolute; 7640 top: 64px; 7641 right: 0; 7642} 7643 7644.dac-nav-link.has-subnav + .dac-nav-secondary, .dac-nav-link.selected + .dac-nav-secondary { 7645 display: block; 7646} 7647 7648.dac-nav-secondary .dac-nav-link { 7649 padding: 17px 16px 15px; 7650} 7651 7652.dac-nav-secondary .dac-nav-link:link, .dac-nav-secondary .dac-nav-link:visited, .dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:active { 7653 color: #666; 7654} 7655 7656@media (min-width: 720px) and (max-width: 979px) { 7657 .dac-nav-secondary .dac-nav-link { 7658 padding-left: 8px; 7659 padding-right: 8px; 7660 } 7661} 7662 7663.dac-nav-secondary .dac-nav-item:first-child .dac-nav-link { 7664 padding-left: 20px; 7665} 7666 7667.dac-nav-secondary .dac-nav-link.selected { 7668 border: none; 7669 font-weight: 700; 7670} 7671 7672@media (max-width: 719px) { 7673 .dac-nav-open { 7674 overflow: hidden; 7675 } 7676 7677 .dac-nav-toggle { 7678 border-right: 1px solid #e5e5e5; 7679 display: inline-block; 7680 position: absolute; 7681 left: 0; 7682 line-height: 64px; 7683 text-align: center; 7684 width: 64px; 7685 } 7686 7687 .dac-nav-head, .dac-nav-secondary, .dac-nav-dimmer { 7688 display: block; 7689 } 7690 7691 .dac-nav-dimmer.dac-nav-open { 7692 opacity: .8; 7693 -webkit-transition-delay: 0s; 7694 transition-delay: 0s; 7695 visibility: visible; 7696 } 7697 7698 .dac-nav-list { 7699 background: #fff; 7700 bottom: 0; 7701 left: auto; 7702 max-width: 280px; 7703 overflow-y: auto; 7704 padding: 0 0 20px 0; 7705 position: fixed; 7706 right: 100%; 7707 top: 0; 7708 -webkit-transition: -webkit-transform .3s ease; 7709 transition: transform .3s ease; 7710 width: 85%; 7711 z-index: 52; 7712 } 7713 7714 .dac-nav-list.dac-nav-open { 7715 -webkit-transform: translate3d(100%, 0, 0); 7716 transform: translate3d(100%, 0, 0); 7717 } 7718 7719 .dac-nav-secondary { 7720 border: none; 7721 position: static; 7722 width: 100%; 7723 } 7724 7725 .dac-nav-item { 7726 float: none; 7727 } 7728 7729 .dac-nav-link { 7730 display: block; 7731 font-size: 12px; 7732 font-weight: 600; 7733 color: #333; 7734 padding: 0 20px; 7735 } 7736 7737 .dac-nav-link.selected { 7738 color: #09f; 7739 } 7740 7741 .dac-nav-secondary .dac-nav-link { 7742 font-weight: 400; 7743 margin-left: 20px; 7744 margin-right: 20px; 7745 padding: 0 20px; 7746 } 7747 7748 .dac-nav-link.has-subnav, .dac-nav-link.selected { 7749 border: none; 7750 padding: 0 20px; 7751 } 7752 7753 .dac-logo-image { 7754 margin-right: 5px; 7755 vertical-align: top; 7756 } 7757 7758 .dac-nav-logo { 7759 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04); 7760 font-size: 20px; 7761 font-weight: 300; 7762 letter-spacing: .3px; 7763 line-height: 36px; 7764 padding: 14px 24px; 7765 } 7766 7767 .dac-nav-logo:link, .dac-nav-logo:visited, .dac-nav-logo:hover, .dac-nav-logo:active { 7768 color: #444; 7769 } 7770} 7771 7772.dac-light.dac-hero, .dac-light.dac-section { 7773 background-color: #eceff1; 7774} 7775 7776.dac-gray.dac-hero, .dac-gray.dac-section { 7777 background-color: #b0bec5; 7778} 7779 7780.dac-dark.dac-hero, .dac-dark.dac-section { 7781 background-color: #37474f; 7782} 7783 7784.dac-red.dac-hero, .dac-red.dac-section { 7785 background-color: #dc4d38; 7786} 7787 7788.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links { 7789 color: #212121; 7790 color: rgba(0, 0, 0, 0.87); 7791} 7792 7793.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links { 7794 color: white; 7795} 7796 7797.dac-hero-tag, .dac-hero-description, .dac-section-subtitle { 7798 color: #757575; 7799 color: rgba(0, 0, 0, 0.54); 7800} 7801 7802.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { 7803 color: #b2b2b2; 7804 color: rgba(255, 255, 255, 0.7); 7805} 7806 7807/* Hero carousel */ 7808.dac-hero { 7809 background-color: #fff; 7810 background-position: 50% 30%; 7811 background-size: cover; 7812 box-sizing: border-box; 7813 font-size: 16px; 7814 min-height: 550px; 7815 padding-top: 88px; 7816} 7817 7818.dac-hero.dac-darken:before { 7819 background: rgba(0, 0, 0, 0.3); 7820 bottom: 0; 7821 content: ''; 7822 display: block; 7823 left: 0; 7824 position: absolute; 7825 right: 0; 7826 top: 0; 7827} 7828 7829.dac-hero.dac-darken .dac-hero-content { 7830 position: relative; 7831} 7832 7833@media (max-width: 719px) { 7834 .dac-hero { 7835 padding-bottom: 20px; 7836 padding-top: 20px; 7837 } 7838} 7839 7840.dac-hero-tag { 7841 font-size: 11px; 7842 font-weight: 700; 7843 letter-spacing: .07em; 7844 margin-bottom: 2px; 7845 text-transform: uppercase; 7846} 7847 7848.dac-hero-title { 7849 margin: 0 0 14px; 7850} 7851 7852.dac-hero-description { 7853 margin-bottom: 16px; 7854} 7855 7856.dac-hero-cta { 7857 display: inline-block; 7858 line-height: 40px; 7859 margin-right: 20px; 7860 -webkit-transition: opacity .3s; 7861 transition: opacity .3s; 7862} 7863 7864.dac-hero-cta:hover { 7865 color: currentColor; 7866 opacity: .54; 7867} 7868 7869.dac-hero-cta .dac-sprite { 7870 margin-left: -8px; 7871} 7872 7873.dac-hero-figure { 7874 text-align: center; 7875} 7876 7877.dac-hero-carousel { 7878 height: 550px; 7879 position: relative; 7880} 7881 7882.dac-hero-carousel > .dac-hero { 7883 bottom: 0; 7884 left: 0; 7885 position: absolute; 7886 right: 0; 7887 top: 0; 7888} 7889 7890.dac-hero-carousel > .dac-hero, .dac-hero-carousel > .dac-hero .wrap { 7891 opacity: 0; 7892} 7893 7894.dac-hero-carousel > .dac-hero.active { 7895 opacity: 1; 7896 -webkit-transition: opacity .5s; 7897 transition: opacity .5s; 7898 z-index: 1; 7899} 7900 7901.dac-hero-carousel > .dac-hero.active .wrap { 7902 opacity: 1; 7903 -webkit-transition: opacity .5s .5s; 7904 transition: opacity .5s .5s; 7905} 7906 7907.dac-hero-carousel > .dac-hero.out, .dac-hero-carousel > .dac-hero.out .wrap { 7908 -webkit-transition: opacity 0s .5s; 7909 transition: opacity 0s .5s; 7910 opacity: 0; 7911} 7912 7913.dac-hero-carousel-pagination { 7914 bottom: 33px; 7915 left: 0; 7916 position: absolute; 7917 right: 0; 7918 z-index: 51; 7919} 7920 7921@media (max-width: 719px) { 7922 .dac-hero-carousel-pagination { 7923 text-align: right; 7924 bottom: 20px; 7925 } 7926} 7927 7928.dac-pagination { 7929 list-style: none; 7930 margin: 0 -3px; 7931} 7932 7933.dac-pagination-item { 7934 background-color: rgba(153, 153, 153, 0.4); 7935 border-radius: 50%; 7936 cursor: pointer; 7937 display: inline-block; 7938 height: 14px; 7939 margin: 0 3px; 7940 overflow: hidden; 7941 text-indent: 100%; 7942 -webkit-transition: background-color .1s ease-in; 7943 transition: background-color .1s ease-in; 7944 white-space: nowrap; 7945 width: 14px; 7946} 7947 7948.dac-pagination-item:hover { 7949 background-color: rgba(153, 153, 153, 0.6); 7950} 7951 7952.dac-pagination-item.active, .dac-pagination-item.active:hover { 7953 background-color: #6ab344; 7954} 7955 7956.dac-invert .dac-pagination-item { 7957 background-color: rgba(204, 204, 204, 0.2); 7958} 7959 7960.dac-invert .dac-pagination-item:hover { 7961 background-color: rgba(153, 153, 153, 0.4); 7962} 7963 7964/* Form component */ 7965.dac-form { 7966 color: #505050; 7967 font-size: 16px; 7968 /* Modal Responsive */ 7969} 7970 7971.dac-form a { 7972 color: #000; 7973} 7974 7975.dac-form-aside { 7976 display: inline-block; 7977 font-size: 12px; 7978 margin-top: 0; 7979} 7980 7981.dac-form-required { 7982 color: #ef4300; 7983} 7984 7985.dac-form-fieldset { 7986 padding: 0; 7987} 7988 7989.dac-form-legend { 7990 display: block; 7991 color: #333; 7992 font-weight: 500; 7993 margin: 20px 0 12px; 7994 padding: 0; 7995 width: 100%; 7996} 7997 7998.dac-form-legend > .dac-form-required { 7999 float: right; 8000 margin-top: 3px; 8001} 8002 8003.dac-form-input { 8004 border: 0 solid #e3e3e3; 8005 border-bottom-width: 1px; 8006 display: block; 8007 outline: 0; 8008 padding: 1px 0 8px; 8009 -webkit-transition: border-color .2s; 8010 transition: border-color .2s; 8011 width: 100%; 8012} 8013 8014.dac-form-input-group { 8015 position: relative; 8016} 8017 8018.dac-form-input-group > .dac-form-required { 8019 display: block; 8020 bottom: 3px; 8021 position: absolute; 8022 right: 0; 8023} 8024 8025.dac-form-input:focus { 8026 border-bottom-color: #09f; 8027} 8028 8029.dac-form-floatlabel { 8030 display: block; 8031 cursor: text; 8032 margin-top: 5px; 8033 pointer-events: none; 8034 -webkit-transform-origin: 0 100%; 8035 -ms-transform-origin: 0 100%; 8036 transform-origin: 0 100%; 8037 -webkit-transform: translate3d(0, 22px, 0) scale(1); 8038 transform: translate3d(0, 22px, 0) scale(1); 8039 -webkit-transition: -webkit-transform .2s; 8040 transition: transform .2s; 8041} 8042 8043.dac-focused > .dac-form-floatlabel, .dac-has-value > .dac-form-floatlabel { 8044 cursor: default; 8045 -webkit-transform: translate3d(0, 0, 0) scale(.75); 8046 transform: translate3d(0, 0, 0) scale(.75); 8047} 8048 8049.dac-form-radio, .dac-form-checkbox { 8050 opacity: 0; 8051 position: absolute; 8052} 8053 8054.dac-form-radio-group, .dac-form-checkbox-group { 8055 display: table; 8056 margin-top: 10px; 8057} 8058 8059.dac-form-radio-button, .dac-form-checkbox-button { 8060 box-sizing: border-box; 8061 cursor: pointer; 8062 display: table-cell; 8063 float: left; 8064 height: 18px; 8065 margin: 2px 10px 0 0; 8066 position: relative; 8067 width: 18px; 8068} 8069 8070.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before { 8071 box-sizing: border-box; 8072 content: ''; 8073 border-radius: 50%; 8074 display: block; 8075 height: 100%; 8076 position: absolute; 8077 width: 100%; 8078} 8079 8080.dac-form-radio-button::before, .dac-form-checkbox-button::before { 8081 background: rgba(0, 0, 0, 0.7); 8082 -webkit-transform: translateZ(0) scale(0); 8083 transform: translateZ(0) scale(0); 8084 -webkit-transition: -webkit-transform .3s; 8085 transition: transform .3s; 8086} 8087 8088.dac-form-radio-button::after, .dac-form-checkbox-button::after { 8089 border: 2px solid rgba(0, 0, 0, 0.7); 8090} 8091 8092.dac-form-radio:checked + .dac-form-radio-button::before, .dac-form-checkbox:checked + .dac-form-checkbox-button::before { 8093 -webkit-transform: translateZ(0) scale(.5); 8094 transform: translateZ(0) scale(.5); 8095} 8096 8097.dac-form-radio:focus + .dac-form-radio-button::after, .dac-form-checkbox:focus + .dac-form-checkbox-button::after { 8098 border: 2px solid #09f; 8099} 8100 8101.dac-form-checkbox-button::after, .dac-form-checkbox-button::before { 8102 border-radius: 0; 8103} 8104 8105@media (max-width: 719px) { 8106 .dac-form-legend { 8107 margin-bottom: 0; 8108 } 8109} 8110 8111/* Media component */ 8112.dac-media { 8113 display: -webkit-box; 8114 display: -webkit-flex; 8115 display: -ms-flexbox; 8116 display: flex; 8117 -webkit-flex-flow: row wrap; 8118 -ms-flex-flow: row wrap; 8119 flex-flow: row wrap; 8120} 8121 8122.dac-media-figure { 8123 margin: 0; 8124} 8125 8126.dac-media-body { 8127 -webkit-box-flex: 1; 8128 -webkit-flex: 1; 8129 -ms-flex: 1; 8130 flex: 1; 8131} 8132 8133.no-flexbox .dac-media { 8134 display: table; 8135 width: 100%; 8136} 8137 8138.no-flexbox .dac-media-body, .no-flexbox .dac-media-figure { 8139 display: table-cell; 8140} 8141 8142.no-flexbox .dac-media-figure { 8143 padding: 0; 8144} 8145 8146.no-flexbox .dac-media-body { 8147 width: 100%; 8148} 8149 8150/* Modal component */ 8151.dac-modal { 8152 background: rgba(0, 0, 0, 0.8); 8153 bottom: 0; 8154 left: 0; 8155 opacity: 0; 8156 overflow-x: hidden; 8157 overflow-y: auto; 8158 position: fixed; 8159 right: 0; 8160 top: 0; 8161 -webkit-transition: visibility 0s linear .3s, opacity .3s linear; 8162 transition: visibility 0s linear .3s, opacity .3s linear; 8163 visibility: hidden; 8164 z-index: 52; 8165} 8166 8167.dac-modal.dac-active { 8168 opacity: 1; 8169 -webkit-transition-delay: 0s; 8170 transition-delay: 0s; 8171 visibility: visible; 8172} 8173 8174.dac-modal-open { 8175 overflow: hidden; 8176} 8177 8178.dac-modal-container { 8179 -webkit-box-align: center; 8180 -webkit-align-items: center; 8181 -ms-flex-align: center; 8182 align-items: center; 8183 display: -webkit-box; 8184 display: -webkit-flex; 8185 display: -ms-flexbox; 8186 display: flex; 8187 -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); 8188 filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); 8189 -webkit-box-pack: center; 8190 -webkit-justify-content: center; 8191 -ms-flex-pack: center; 8192 justify-content: center; 8193 min-height: 100%; 8194 width: 100%; 8195} 8196 8197.dac-modal-window { 8198 background: #fff; 8199 border-top-left-radius: 5px; 8200 border-top-right-radius: 5px; 8201 box-sizing: border-box; 8202 margin: 20px; 8203 -webkit-transition: -webkit-transform .3s; 8204 transition: transform .3s; 8205 -webkit-transform: translate(0, -30px); 8206 -ms-transform: translate(0, -30px); 8207 transform: translate(0, -30px); 8208 -webkit-transform: translate3d(0, -30px, 0); 8209 transform: translate3d(0, -30px, 0); 8210 width: 960px; 8211} 8212 8213.dac-modal.dac-active .dac-modal-window { 8214 -webkit-transform: translateZ(0); 8215 transform: translateZ(0); 8216} 8217 8218.dac-modal-header { 8219 background: #00695c; 8220 border-top-left-radius: 5px; 8221 border-top-right-radius: 5px; 8222 padding: 35px 35px 30px; 8223 position: relative; 8224} 8225 8226.dac-modal-header-close { 8227 background: none; 8228 border: none; 8229 cursor: pointer; 8230 line-height: 0; 8231 outline: 0; 8232 opacity: .7; 8233 padding: 8px; 8234 position: absolute; 8235 right: 5px; 8236 -webkit-transition: background-color .3s; 8237 transition: background-color .3s; 8238 top: 5px; 8239} 8240 8241.dac-modal-header-close:active { 8242 background: rgba(255, 255, 255, 0.2); 8243} 8244 8245.dac-modal-header-title { 8246 color: #fff; 8247 font-size: 24px; 8248 font-weight: 300; 8249 line-height: 32px; 8250 margin: 0; 8251 padding-right: 150px; 8252} 8253 8254.dac-modal-header-subtitle { 8255 bottom: 31px; 8256 color: #fff; 8257 display: inline-block; 8258 font: inherit; 8259 font-size: 14px; 8260 opacity: .8; 8261 position: absolute; 8262 right: 35px; 8263} 8264 8265.dac-modal-content { 8266 padding: 12px 35px; 8267} 8268 8269.dac-modal-footer { 8270 padding: 24px 35px; 8271} 8272 8273@media (max-width: 1000px) { 8274 .dac-modal-window { 8275 margin: 20px; 8276 width: auto; 8277 } 8278 8279 .dac-modal-container { 8280 z-index: auto; 8281 } 8282} 8283 8284@media (max-width: 719px) { 8285 .dac-modal-window { 8286 margin: 10px; 8287 } 8288 8289 .dac-modal-header { 8290 padding: 35px 10px 10px; 8291 } 8292 8293 .dac-modal-header-title { 8294 font-size: 16px; 8295 line-height: 24px; 8296 padding: 0; 8297 } 8298 8299 .dac-modal-header-subtitle { 8300 display: block; 8301 margin: 0; 8302 position: static; 8303 text-align: right; 8304 } 8305 8306 .dac-modal-content { 8307 padding: 10px; 8308 } 8309 8310 .dac-modal-footer { 8311 border-top: 1px solid #e3e3e3; 8312 padding: 35px 10px; 8313 } 8314} 8315 8316.newsletter .dac-modal-footer { 8317 padding-top: 0; 8318 text-align: right; 8319} 8320 8321.newsletter-checkboxes { 8322 padding-top: 20px; 8323} 8324 8325@media (min-width: 720px) { 8326 .newsletter-checkboxes { 8327 padding-top: 46px; 8328 } 8329 8330 .newsletter-leftCol { 8331 padding-right: 40px; 8332 } 8333 8334 .newsletter-rightCol { 8335 padding-left: 40px; 8336 } 8337} 8338 8339@media (max-width: 719px) { 8340 .newsletter .dac-modal-footer { 8341 margin-top: 30px; 8342 padding: 30px 10px; 8343 text-align: center; 8344 } 8345} 8346 8347.dac-expand, .dac-section { 8348 margin-left: -20px; 8349 margin-right: -20px; 8350 padding-left: 20px; 8351 padding-right: 20px; 8352} 8353 8354@media (max-width: 719px) { 8355 .dac-expand, .dac-section { 8356 margin-left: -10px; 8357 margin-right: -10px; 8358 padding-left: 10px; 8359 padding-right: 10px; 8360 } 8361} 8362 8363.dac-invert { 8364 color: #b2b2b2; 8365 color: rgba(255, 255, 255, 0.7); 8366} 8367 8368.dac-invert h1, .dac-invert h2, .dac-invert h3 { 8369 color: #fff; 8370} 8371 8372.dac-light.dac-hero, .dac-light.dac-section { 8373 background-color: #eceff1; 8374} 8375 8376.dac-gray.dac-hero, .dac-gray.dac-section { 8377 background-color: #b0bec5; 8378} 8379 8380.dac-dark.dac-hero, .dac-dark.dac-section { 8381 background-color: #37474f; 8382} 8383 8384.dac-red.dac-hero, .dac-red.dac-section { 8385 background-color: #dc4d38; 8386} 8387 8388.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links { 8389 color: #212121; 8390 color: rgba(0, 0, 0, 0.87); 8391} 8392 8393.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links { 8394 color: white; 8395} 8396 8397.dac-hero-tag, .dac-hero-description, .dac-section-subtitle { 8398 color: #757575; 8399 color: rgba(0, 0, 0, 0.54); 8400} 8401 8402.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { 8403 color: #b2b2b2; 8404 color: rgba(255, 255, 255, 0.7); 8405} 8406 8407.dac-section { 8408 background-position: 50% 50%; 8409 background-size: cover; 8410 padding-bottom: 84px; 8411 padding-top: 84px; 8412 position: relative; 8413} 8414 8415@media (max-width: 719px) { 8416 .dac-section { 8417 padding-bottom: 52px; 8418 padding-top: 52px; 8419 } 8420} 8421 8422.dac-section.dac-small { 8423 padding-bottom: 32px; 8424 padding-top: 32px; 8425} 8426 8427.dac-section-title { 8428 text-align: center; 8429 margin-bottom: 40px; 8430 margin-top: 0; 8431} 8432 8433.dac-section-subtitle { 8434 font-size: 16px; 8435 margin-bottom: 40px; 8436 margin-top: -24px; 8437 text-align: center; 8438} 8439 8440.dac-section-links { 8441 font-size: 16px; 8442 list-style: none; 8443 line-height: 40px; 8444 margin: 16px 0 0; 8445 text-align: center; 8446} 8447 8448@media (max-width: 719px) { 8449 .dac-section-links { 8450 margin-left: -8px; 8451 text-align: left; 8452 } 8453} 8454 8455.dac-section-link { 8456 display: inline-block; 8457 margin: 0 32px; 8458} 8459 8460@media (max-width: 719px) { 8461 .dac-section-link { 8462 display: block; 8463 margin: 0; 8464 } 8465} 8466 8467.dac-section-link a { 8468 -webkit-transition: opacity .3s; 8469 transition: opacity .3s; 8470} 8471 8472.dac-section-link a:link, .dac-section-link a:visited { 8473 color: inherit; 8474} 8475 8476.dac-section-link a:hover { 8477 opacity: .54; 8478} 8479 8480/* 8481SCSS variables are information about icon's compiled state, stored under its original file name 8482 8483.icon-home { 8484 width: $icon-home-width; 8485} 8486 8487The large array-like variables contain all information about a single icon 8488$icon-home: x y offset_x offset_y width height total_width total_height image_path; 8489 8490At the bottom of this section, we provide information about the spritesheet itself 8491$spritesheet: width height image $spritesheet-sprites; 8492*/ 8493.dac-sprite, #tb li:before, #qv li:before { 8494 background-image: url(/assets/images/sprite.png); 8495 display: inline-block; 8496 vertical-align: middle; } 8497 @media screen and (min-device-pixel-ratio: 1.5) { 8498 .dac-sprite, #tb li:before, #qv li:before { 8499 background-image: url(/assets/images/sprite-2x.png); 8500 background-size: 50% 50%; } } 8501 8502.dac-sprite.dac-auto-chevron { 8503 background-position: -26px -38px; 8504 height: 24px; 8505 width: 24px; 8506 vertical-align: -6px; } 8507 .dac-invert .dac-sprite.dac-auto-chevron { 8508 background-position: -76px 0px; 8509 height: 24px; 8510 width: 24px; } 8511.dac-sprite.dac-auto-chevron-large { 8512 background-position: 0px 0px; 8513 height: 36px; 8514 width: 36px; 8515 vertical-align: -10px; } 8516 .dac-invert .dac-sprite.dac-auto-chevron-large { 8517 background-position: -38px 0px; 8518 height: 36px; 8519 width: 36px; } 8520 8521.dac-sprite.dac-arrow-down-gray { 8522 background-position: -56px -64px; 8523 height: 11px; 8524 width: 19px; } 8525 8526.dac-sprite.dac-arrow-right { 8527 background-position: -102px 0px; 8528 height: 18px; 8529 width: 11px; } 8530 8531.dac-sprite.dac-chevron-large-right-black { 8532 background-position: 0px 0px; 8533 height: 36px; 8534 width: 36px; } 8535 8536.dac-sprite.dac-chevron-large-right-white { 8537 background-position: -38px 0px; 8538 height: 36px; 8539 width: 36px; } 8540 8541.dac-sprite.dac-chevron-right-black { 8542 background-position: -26px -38px; 8543 height: 24px; 8544 width: 24px; } 8545 8546.dac-sprite.dac-chevron-right-white { 8547 background-position: -76px 0px; 8548 height: 24px; 8549 width: 24px; } 8550 8551.dac-sprite.dac-close { 8552 background-position: -34px -83px; 8553 height: 12px; 8554 width: 12px; } 8555 8556.dac-sprite.dac-expand-less-black { 8557 background-position: 0px -38px; 8558 height: 24px; 8559 width: 24px; } 8560 8561.dac-sprite.dac-expand-more-black { 8562 background-position: -76px -26px; 8563 height: 24px; 8564 width: 24px; } 8565 8566.dac-sprite.dac-google-play { 8567 background-position: -52px -38px; 8568 height: 18px; 8569 width: 16px; } 8570 8571.dac-sprite.dac-gplus { 8572 background-position: 0px -64px; 8573 height: 17px; 8574 width: 16px; } 8575 8576.dac-sprite.dac-mail { 8577 background-position: -16px -83px; 8578 height: 12px; 8579 width: 16px; } 8580 8581.dac-sprite.dac-rss { 8582 background-position: 0px -83px; 8583 height: 14px; 8584 width: 14px; } 8585 8586.dac-sprite.dac-twitter { 8587 background-position: -38px -64px; 8588 height: 14px; 8589 width: 16px; } 8590 8591.dac-sprite.dac-youtube { 8592 background-position: -18px -64px; 8593 height: 14px; 8594 width: 18px; } 8595 8596.dac-toggle-expand { 8597 cursor: pointer; 8598 display: inline-block; } 8599.dac-toggle-collapse { 8600 cursor: pointer; 8601 display: none; } 8602.dac-toggle.is-expanded .dac-toggle-expand { 8603 display: none; } 8604.dac-toggle.is-expanded .dac-toggle-collapse { 8605 display: inline-block; } 8606.dac-toggle-content { 8607 overflow: hidden; 8608 max-height: 0; 8609 -webkit-transition: .3s max-height; 8610 transition: .3s max-height; } 8611.dac-toggle.is-expanded .dac-toggle-content { 8612 max-height: none; } 8613.dac-toggle.dac-mobile .dac-toggle-content { 8614 max-height: none; } 8615@media (max-width: 719px) { 8616 .dac-toggle.dac-mobile .dac-toggle-content { 8617 max-height: 0; } 8618 .dac-toggle.is-expanded .dac-toggle-content { 8619 max-height: none; } } 8620 8621.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { 8622 display: none !important; } 8623 8624@media (max-width: 719px) { 8625 .dac-hidden-mobile { 8626 display: none !important; } 8627 .dac-visible-mobile-block, .dac-mobile-only { 8628 display: block !important; } 8629 .dac-visible-mobile-inline { 8630 display: inline !important; } 8631 .dac-visible-mobile-inline-block { 8632 display: inline-block !important; } } 8633 8634@media (min-width: 720px) and (max-width: 979px) { 8635 .dac-hidden-tablet { 8636 display: none !important; } 8637 .dac-visible-tablet-block { 8638 display: block !important; } 8639 .dac-visible-tablet-inline { 8640 display: inline !important; } 8641 .dac-visible-tablet-inline-block { 8642 display: inline-block !important; } } 8643 8644@media (min-width: 980px) { 8645 .dac-hidden-desktop { 8646 display: none !important; } 8647 .dac-visible-desktop-block { 8648 display: block !important; } 8649 .dac-visible-desktop-inline { 8650 display: inline !important; } 8651 .dac-visible-desktop-inline-block { 8652 display: inline-block !important; } } 8653 8654.dac-offset-parent { 8655 position: relative !important; } 8656 8657#tb li:before, #qv li:before { 8658 background-position: -26px -38px; 8659 height: 24px; 8660 width: 24px; 8661 content: ''; 8662 left: -8px; 8663 opacity: .7; 8664 position: absolute; 8665 top: -4px; } 8666