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