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