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