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