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:auto; 2556 padding-left:20px; 2557 position:relative; 2558} 2559 2560/* notice box for cross links between Design/Develop docs */ 2561a.notice-developers-video, 2562a.notice-developers, 2563a.notice-designers-video, 2564a.notice-designers { 2565 float:right; 2566 clear:right; 2567 width:238px; 2568 min-height:50px; 2569 margin:0 0 20px 20px; 2570 border:1px solid #ddd; 2571} 2572a.notice-developers-video.wide, 2573a.notice-developers.wide, 2574a.notice-designers-video.wide, 2575a.notice-designers.wide { 2576 width:278px; 2577} 2578a.notice-developers-video div, 2579a.notice-developers div, 2580a.notice-designers-video div, 2581a.notice-designers div { 2582 min-height:40px; 2583 background:url('../images/styles/notice-developers_2x.png') no-repeat 10px 10px; 2584 background-size:40px 40px; 2585 padding:10px 10px 10px 60px; 2586} 2587a.notice-designers div { 2588 background:url('../images/styles/notice-designers_2x.png') no-repeat 10px 10px; 2589 background-size:40px 40px; 2590} 2591a.notice-designers-video div { 2592 background:url('../images/styles/notice-designers-video_2x.png') no-repeat 10px 10px; 2593 background-size:40px 40px; 2594} 2595a.notice-developers-video div { 2596 background:url('../images/styles/notice-developers-video_2x.png') no-repeat 10px 10px; 2597 background-size:40px 40px; 2598} 2599a.notice-developers-video:hover, 2600a.notice-developers:hover, 2601a.notice-designers-video:hover, 2602a.notice-designers:hover { 2603 background:#eee; 2604} 2605a.notice-developers-video h3, 2606a.notice-developers h3, 2607a.notice-designers-video h3, 2608a.notice-designers h3 { 2609 font-size:13px; 2610 line-height:18px; 2611 font-weight:bold; 2612 text-transform:uppercase; 2613 color:#000 !important; 2614 padding:0 0 1px; 2615} 2616a.notice-developers-video p, 2617a.notice-developers p, 2618a.notice-designers-video p, 2619a.notice-designers p { 2620 margin:0; 2621 line-height:14px; 2622} 2623a.notice-developers-video.left, 2624a.notice-developers.left, 2625a.notice-designers-video.left, 2626a.notice-designers.left { 2627 margin-left:0; 2628 float:left; 2629} 2630 2631 2632/* hide nested list items; companion to hideNestedLists() */ 2633.hide-nested li ol, 2634.hide-nested li ul { 2635 display:none; 2636} 2637 2638a.header-toggle { 2639 display:block; 2640 float:right; 2641 text-transform:uppercase; 2642 font-size:.8em !important; 2643 font-weight:normal; 2644 margin-top:2px; 2645} 2646 2647 2648/* for IDE instruction toggle (Studio/Eclipse/Other) */ 2649select.ide { 2650 background: transparent; 2651 border: 1px solid #bbb; 2652 border-left: 0; 2653 border-right: 0; 2654 margin: 10px 0; 2655 padding: 10px 0; 2656 color:#666; 2657} 2658select.ide, 2659select.ide option { 2660 font-family: inherit; 2661 font-size:16px; 2662 font-weight:500; 2663} 2664/* hide all except studio by default */ 2665.select-ide.eclipse, 2666.select-ide.other { 2667 display:none; 2668} 2669/* ... unless studio also includes one of the others */ 2670.select-ide.studio.eclipse, 2671.select-ide.studio.other { 2672 display:none; 2673} 2674 2675 2676/* ----------------------------------------------- 2677good/bad example containers 2678*/ 2679 2680div.example-block { 2681 background-repeat: no-repeat; 2682 background-position:10px 8px; 2683 background-color:#ccc; 2684 padding:4px; 2685 margin:.8em auto 1.5em 2em; 2686 width:260px; 2687 float:right; 2688} 2689/* red container */ 2690.example-block.bad { 2691 background-image: url(/images/example-bad.png); 2692 background-color:#f4cccc; 2693} 2694/* green container */ 2695.example-block.good { 2696 background-image: url(/images/example-good.png); 2697 background-color:#d9ead3; 2698} 2699/* container heading div */ 2700#jd-content .example-block .heading { 2701 font-weight:bold; 2702 margin:6px 0 9px 36px; 2703 padding:6px auto; 2704} 2705/* container image (if any) */ 2706#jd-content .example-block img { 2707 margin:0; 2708 padding:0px; 2709} 2710 2711.example-block table { 2712 margin:0; 2713} 2714 2715/* ----------------------------------------------- 2716Dialog box for popup messages 2717*/ 2718 2719div.dialog { 2720 height:0; 2721 margin:0 auto; 2722} 2723 2724div.dialog>div { 2725 z-index:99; 2726 position:fixed; 2727 margin:70px 0; 2728 width: 391px; 2729 height: 200px; 2730 background: #F7F7F7; 2731-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5); 2732-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5); 2733box-shadow: 0 0 15px rgba(0,0,0,0.5); 2734} 2735/* IE6 can't position fixed */ 2736* html div.dialog div { position:absolute; } 2737 2738 2739div#deprecatedSticker { 2740 display:none; 2741 z-index:99; 2742 position:fixed; 2743 right:15px; 2744 top:114px; 2745 margin:0; 2746 padding:1em; 2747 background:#FFF; 2748 border:1px solid #dddd00; 2749 box-shadow:-5px 5px 10px #ccc; 2750 -moz-box-shadow:-5px 5px 10px #ccc; 2751 -webkit-box-shadow:-5px 5px 10px #ccc; 2752} 2753 2754div#langMessage, 2755div#naMessage { 2756 display:none; 2757 width:555px; 2758 height:0; 2759 margin:0 auto; 2760} 2761 2762 2763div#langMessage>div, 2764div#naMessage div { 2765 z-index:99; 2766 width:450px; 2767 position:fixed; 2768 margin:80px 0; 2769 padding:4em 4em 3em; 2770 background:#FFF; 2771 border:1px solid #999; 2772 box-shadow:-10px 10px 40px #888; 2773 -moz-box-shadow:-10px 10px 40px #888; 2774 -webkit-box-shadow:-10px 10px 40px #888; 2775} 2776/* IE6 can't position fixed */ 2777* html div#langMessage>div, 2778* html div#naMessage div { position:absolute; } 2779 2780div#naMessage strong { 2781 font-size:1.1em; 2782} 2783 2784div#langMessage .lang { 2785 display:none; 2786} 2787 2788/* -------------------------------------------------------------------------- 2789Slideshow Controls & Next/Prev 2790*/ 2791.slideshow-next, .slideshow-prev { 2792 width: 20px; 2793 height: 36px; 2794 text-indent: -1000em; 2795} 2796.slideshow-container { 2797 margin: 2em 0; 2798} 2799.slideshow-container:before, .slideshow-container:after { 2800 content: ""; 2801 display: table; 2802 clear: both; 2803} 2804a.slideshow-next, a.slideshow-next:visited { 2805 2806 float: right; 2807 2808 background: url(../images/arrow-right.png) no-repeat 0 0 2809 2810} 2811 2812a.slideshow-prev, a.slideshow-prev:visited { 2813 2814 float: left; 2815 2816 background: url(../images/arrow-left.png) no-repeat 0 0 2817 2818} 2819 2820.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus { 2821 2822 background-position: 0 -36px 2823 2824} 2825 2826.slideshow-next:active, .slideshow-prev:active { 2827 2828 background-position: 0 -72px 2829 2830} 2831.slideshow-nav { 2832 width: 74px; 2833 margin: 0 auto; 2834} 2835.slideshow-nav a, .slideshow-nav a:visited { 2836 display: inline-block; 2837 width: 12px; 2838 height: 12px; 2839 margin: 0 2px 20px 2px; 2840 background: #ccc; 2841 -webkit-border-radius: 50%; 2842 -moz-border-radius: 50%; 2843 border-radius: 50%; 2844} 2845.slideshow-nav a:hover, .slideshow-nav a:focus { 2846 2847 background: #33B5E5 2848} 2849 2850.slideshow-nav a:active { 2851 2852 background: #1e799a; 2853 background: #ebebeb; 2854 -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2855 -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2856 box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); 2857} 2858.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited { 2859 background: #33B5E5 2860} 2861/* -------------------------------------------------------------------------- 2862Tabs 2863*/ 2864ul.tabs { 2865 padding: 0; 2866 margin: 2em 0 0 0; 2867} 2868ul.tabs:before, ul.tabs:after { 2869 content: ""; 2870 display: table; 2871 clear: both; 2872} 2873ul.tabs li { 2874 list-style-type: none; 2875 float: left; 2876} 2877ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited { 2878 display: block; 2879 height: 36px; 2880 line-height: 36px; 2881 padding: 0 15px; 2882 margin-right: 2px; 2883 color: #222; 2884 -moz-border-radius-topleft: 2px; 2885 -moz-border-radius-topright: 2px; 2886 -moz-border-radius-bottomright: px; 2887 -moz-border-radius-bottomleft: px; 2888 -webkit-border-radius: 2px 2px px px; 2889 border-radius: 2px 2px px px; 2890 border-top: solid 1px #ebebeb; 2891 border-left: solid 1px #ebebeb; 2892 border-right: solid 1px #ebebeb; 2893 background-color: #fff; 2894 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 2895 background-image: -webkit-linear-gradient(top, #ffffff, #fafafa); 2896 background-image: -moz-linear-gradient(top, #ffffff, #fafafa); 2897 background-image: -ms-linear-gradient(top, #ffffff, #fafafa); 2898 background-image: -o-linear-gradient(top, #ffffff, #fafafa); 2899 background-image: linear-gradient(top, #ffffff, #fafafa); 2900 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', 2901EndColorStr='#fafafa'); 2902} 2903ul.tabs li a:hover { 2904 color: #33B5E5; 2905} 2906ul.tabs li a.selected { 2907 height: 37px; 2908 color: #33B5E5; 2909 background-color: #f7f7f7; 2910 background-image: none; 2911 border-color: #ddd; 2912} 2913.tab-content { 2914 padding: 1.2em; 2915 margin: -1px 0 2em 0; 2916 -webkit-border-radius: 2px; 2917 -moz-border-radius: 2px; 2918 border-radius: 2px; 2919 border: solid 1px #ddd; 2920 background: #f7f7f7; 2921} 2922/* -------------------------------------------------------------------------- 2923Feature Boxes 2924*/ 2925.feature-box { 2926 width: 291px; 2927 height: 200px; 2928 position: relative; 2929 background: #F7F7F7; 2930} 2931.box-border .top, .box-border .bottom, .box-border .left, .box-border .right { 2932 z-index: 100; 2933 position: absolute; 2934 background-color: #aaa; 2935} 2936.box-border .top, .box-border .bottom { 2937 width: 291px; 2938 height: 1px; 2939} 2940.dialog .box-border .top, 2941.dialog .box-border .bottom { width:391px; } 2942 2943.box-border .left, .box-border .right { 2944 width: 1px; 2945 height: 8px; 2946} 2947.box-border .top { top: 0; left: 0 } 2948.box-border .top .left { top: 1px; left: 0 } 2949.box-border .top .right { top: 1px; right: 0 } 2950.box-border .bottom .left { top: -8px; left: 0 } 2951.box-border .bottom { top: 200px; left: 0 } 2952.box-border .bottom .right { top: -8px; right: 0 } 2953 2954.feature-box h4, 2955.dialog h4 { 2956 padding: 15px 18px 10px; 2957} 2958 2959.feature-box p, 2960.dialog p { 2961 margin: 10px 18px; 2962 padding:0; 2963} 2964.feature-box .link, 2965.dialog .link { 2966 border-top: 1px solid #dedede; 2967 bottom: 0; 2968 position: absolute; 2969 width: inherit; 2970} 2971.feature-box a, .feature-box h4, 2972.dialog a, .dialog h4 { 2973 -webkit-transition: color .4s ease; 2974 -moz-transition: color .4s ease; 2975 -o-transition: color .4s ease; 2976 transition: color .4s ease; 2977} 2978.feature-box:hover { 2979 cursor: pointer; 2980} 2981.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover 2982.left, .feature-box:hover .right { 2983 background-color: #33B5E5; 2984} 2985.feature-box:hover h4, .feature-box:hover a { 2986 color: #33B5E5; 2987} 2988/* -------------------------------------------------------------------------- 2989Page-Specific Styles 2990*/ 2991.colors { 2992 position: relative; 2993 float: left; 2994 width: 92px; 2995 margin: 40px 0 20px; 2996} 2997.colors div { 2998 color: #fff; 2999 font-size: 11.5px; 3000 width: 82px; 3001 height: 82px; 3002 margin-top:-30px; 3003 line-height: 82px; 3004 text-align: center; 3005 border: solid 5px #fff; 3006 -webkit-border-radius: 50%; 3007 -moz-border-radius: 50%; 3008 border-radius: 50%; 3009} 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024/* ########### REFERENCE DOCS ################## */ 3025 3026#packages-nav h2, 3027#classes-nav h2 { 3028 font-size:18px; 3029 margin:0; 3030 padding:0 0 0 4px; 3031} 3032 3033/* not sure if this is needed in the ref docs, disabling for now 3034.jd-descr h2 { 3035 margin:16px 0; 3036} 3037*/ 3038 3039/* First paragraph of a content pages is a bit larger 3040 - note the very specific selector. */ 3041.jd-descr > p:first-child, 3042.jd-descr > #tb-wrapper + p, 3043.jd-descr > #qv-wrapper + p { 3044 font-size: 16px; 3045 margin-bottom: 16px; 3046} 3047 3048/* page-top-right container for reference pages (holds 3049links to summary tables) */ 3050#api-info-block { 3051 font-size:12px; 3052 margin:20px 0 0; 3053 font-weight:normal; 3054 float:right; 3055 text-align:right; 3056 color:#999; 3057 max-width:300px; 3058 font-size: 12px; 3059 line-height:14px; 3060} 3061 3062#api-info-block div.api-level { 3063 font-weight:bold; 3064 font-size:inherit; 3065 float:none; 3066 color:#222; 3067 padding:0; 3068 margin:0; 3069} 3070 3071/* inheritance table */ 3072table.inhtable>tbody>tr>td { 3073 padding-left:0; 3074} 3075table.inhtable>tbody>tr>td div:first-of-type { 3076 padding-left:12px; 3077} 3078 3079.jd-inheritance-table { 3080 border-spacing:0; 3081 margin:1em 0; 3082 padding:0; 3083 background-color:transparent; 3084} 3085.jd-inheritance-table tr td { 3086 border: none; 3087 margin: 0; 3088 padding: 0; 3089 background-color:transparent; 3090} 3091.jd-inheritance-table .jd-inheritance-space { 3092 width:2em; 3093} 3094.jd-inheritance-table .jd-inheritance-interface-cell { 3095 padding-left: 17px; 3096} 3097 3098 3099/* the link inside a sumtable for "Show All/Hide All" */ 3100.toggle-all { 3101 display:block; 3102 float:right; 3103 font-weight:normal; 3104 font-size:0.9em; 3105} 3106 3107/* adjustments for in/direct subclasses tables */ 3108.jd-sumtable-subclasses { 3109 margin: 1em 0 0 0; 3110 max-width:968px; 3111 background-color:transparent; 3112} 3113 3114/* extra space between end of method name and open-paren */ 3115.sympad { 3116 margin-right: 2px; 3117} 3118 3119/* adjustments for the expando table-in-table */ 3120.jd-sumtable-expando { 3121 margin:.5em 0; 3122 padding:0; 3123} 3124 3125/* a div that holds a short description */ 3126.jd-descrdiv { 3127 padding:3px 1em 0 1em; 3128 margin:0; 3129 border:0; 3130} 3131 3132#jd-content img.jd-expando-trigger-img { 3133 padding:0 4px 4px 0; 3134 margin:0; 3135} 3136 3137.jd-sumtable-subclasses div#subclasses-direct, 3138.jd-sumtable-subclasses div#subclasses-indirect { 3139 /* left margin matches width of the toggle image, 3140 so this section aligns with the text above */ 3141 margin:0 0 0 34px; 3142} 3143 3144 3145 3146/********* MEMBER REF *************/ 3147 3148 3149.jd-details { 3150/* border:1px solid #669999; 3151 padding:4px; */ 3152 margin:0 0 1em; 3153} 3154 3155/* API reference: a container for the 3156.tagdata blocks that make up the detailed 3157description */ 3158.jd-details-descr { 3159 padding:0; 3160 margin:.5em .25em; 3161} 3162 3163/* API reference: a block containing 3164a detailed description, a params table, 3165seealso list, etc */ 3166.jd-tagdata { 3167 margin:.5em 1em; 3168} 3169 3170.jd-tagdata p { 3171 margin:0 0 1em 1em; 3172} 3173 3174/* API reference: adjustments to 3175the detailed description block */ 3176.jd-tagdescr { 3177 margin:.25em 0 .75em 0; 3178} 3179 3180.jd-tagdescr ol, 3181.jd-tagdescr ul { 3182 margin:0 2.5em; 3183 padding:0; 3184} 3185 3186.jd-tagdescr table, 3187.jd-tagdescr img { 3188 margin:.25em 1em; 3189} 3190 3191.jd-tagdescr li { 3192margin:0 0 .25em 0; 3193padding:0; 3194} 3195 3196/* API reference: heading marking 3197the details section for constants, 3198attrs, methods, etc. */ 3199h4.jd-details-title { 3200 font-size:1.15em; 3201 background-color: #E2E2E2; 3202 margin:1.5em 0 .6em; 3203 padding:3px 95px 3px 3px; /* room for api-level */ 3204} 3205body.google h4.jd-details-title { 3206 background-color: #FFF; 3207 padding-top:5px; 3208 border-top: 1px solid #ccc; 3209} 3210 3211h4.jd-tagtitle { 3212 padding:0; 3213} 3214 3215h4 .normal { 3216 font-weight:normal; 3217} 3218 3219/* API reference: heading for "Parameters", "See Also", etc., 3220in details sections */ 3221h5.jd-tagtitle { 3222 padding:0 0 .25em 0; 3223 font-size:1em; 3224} 3225 3226.jd-tagtable { 3227 margin:0; 3228 background-color:transparent; 3229 width:auto; 3230} 3231 3232.jd-tagtable td, 3233.jd-tagtable th { 3234 border:none; 3235 background-color:#fff; 3236 vertical-align:top; 3237 font-weight:normal; 3238 padding:2px 10px; 3239} 3240 3241.jd-tagtable th { 3242 font-style:italic; 3243} 3244 3245 3246/* Inline api level indicator for methods */ 3247div.api-level { 3248 font-size:.8em; 3249 font-weight:normal; 3250 color:#999; 3251 float:right; 3252 padding:0 8px 0; 3253 margin-top:-35px; 3254} 3255 3256table.jd-tagtable td, 3257table.jd-tagtable th { 3258 background-color:transparent; 3259} 3260 3261table.jd-tagtable th { 3262 color:inherit; 3263} 3264 3265 3266/* Must be updated with each letter-appropriate preview */ 3267body.apilevel-O #jd-content { 3268 background: url('../images/preview.png') repeat; 3269} 3270 3271/* Must be updated with each letter-appropriate preview */ 3272#jd-content .apilevel-O:not(.absent) h3 { 3273 color: #f5ba15; 3274} 3275 3276/* Must be updated with each letter-appropriate preview */ 3277#jd-content .apilevel-O:not(.absent) .api-level a, 3278body.apilevel-O #api-info-block .api-level a { 3279 color: #f5ba15; 3280 font-size: 14px; 3281} 3282 3283/* Must be updated with each letter-appropriate preview */ 3284#jd-content .apilevel-O:not(.absent) td, 3285#jd-content .apilevel-O:not(.absent) th, 3286body.apilevel-O #jd-content table:not(.jd-inheritance-table) td, 3287body.apilevel-O #jd-content th { 3288 background: rgba(245, 185, 16, 0.2); 3289 border: solid 1px #f5ba15; 3290} 3291 3292/* Must be updated with each letter-appropriate preview */ 3293#jd-content tr.apilevel-O:not(.absent) td { 3294 background: rgba(245, 185, 16, 0.2); 3295 border: solid 1px #ddd; 3296} 3297 3298/* Must be updated with each letter-appropriate preview */ 3299#jd-content .apilevel-O:not(.absent) th, 3300body.apilevel-O #jd-content th { 3301 background: #f5ba15; 3302} 3303 3304/************ STICKY NAV BAR ******************/ 3305 3306#context { 3307 clear: both; 3308 padding-top: 14px; 3309} 3310#context .breadcrumb { 3311 float: left; 3312 margin-bottom: 10px; 3313} 3314#context .util { 3315 float: right; 3316 margin-right: 20px; 3317} 3318 3319.breadcrumb { 3320 list-style: none; 3321 margin: 0; 3322 padding: 0; 3323 position: relative; 3324} 3325.breadcrumb li { 3326 float: left; 3327 padding: 0 20px 0 0; 3328 color: #000; 3329 white-space: nowrap; 3330} 3331.breadcrumb li a { 3332 color: #000; 3333} 3334.breadcrumb li:after { 3335 content: url(../images/breadcrumb.png); 3336 position: relative; 3337 top: 1px; 3338 left: 10px; 3339 width: 5px; 3340 height: 10px; 3341} 3342.breadcrumb li.current { 3343 font-weight: 700; 3344} 3345.breadcrumb li.current:after { 3346 display: none; 3347} 3348 3349/* offset the empty <a name=""> tags to account for sticky nav */ 3350body.reference a[name]:not(.nav-start-marker):empty { 3351 visibility: hidden; 3352 display: block; 3353 position: relative; 3354 top: -56px; 3355} 3356 3357.nav-start-marker { 3358 position: absolute; 3359} 3360 3361/* Quicknav */ 3362.btn-quicknav { 3363 width:20px; 3364 height:28px; 3365 float:left; 3366 margin-left:6px; 3367 padding-right:10px; 3368 position:relative; 3369 cursor:pointer; 3370 border-right:1px solid #CCC; 3371} 3372 3373.btn-quicknav a { 3374 zoom:1; 3375 position:absolute; 3376 top:13px; 3377 left:5px; 3378 display:block; 3379 text-indent:-9999em; 3380 width:10px; 3381 height:5px; 3382 background:url(../images/quicknav_arrow.png) no-repeat; 3383} 3384 3385.btn-quicknav a.arrow-active { 3386 background-position: 0 -5px; 3387 display:none; 3388} 3389 3390#header-wrap.quicknav a.arrow-inactive { 3391 display:none; 3392} 3393 3394.btn-quicknav.active a.arrow-active { 3395 display:block; 3396} 3397 3398#header-wrap.quicknav .nav-x li { 3399 min-width:160px; 3400 margin-right:20px; 3401} 3402 3403#header-wrap.quicknav li.last { 3404 margin-right:0px; 3405} 3406 3407#quicknav { 3408 float:none; 3409 clear:both; 3410 margin-left:0; 3411 margin-top:-30px; 3412 display:none; 3413 overflow:hidden; 3414} 3415 3416#header-wrap.quicknav #quicknav { 3417 3418} 3419 3420#quicknav ul { 3421 margin:10px 0; 3422 padding:0; 3423} 3424 3425#quicknav ul li.about { 3426 border-top:1px solid #9933CC; 3427} 3428 3429#quicknav ul li.design { 3430 border-top:1px solid #33b5e5; 3431} 3432 3433#quicknav ul li.develop { 3434 border-top:1px solid #FF8800; 3435} 3436 3437#quicknav ul li.distribute { 3438 border-top:1px solid #99cc00; 3439} 3440 3441#quicknav ul li { 3442 display:block; 3443 float:left; 3444 margin:0 20px 0 0; 3445 min-width:140px; 3446} 3447 3448#quicknav ul li.last { 3449 margin-right:0px; 3450} 3451 3452#quicknav ul li ul li { 3453 float:none; 3454} 3455 3456#quicknav ul li ul li a { 3457 color:#222; 3458} 3459 3460#quicknav ul li li ul, 3461#quicknav ul li li ul li { 3462 margin:0; 3463} 3464 3465#quicknav ul li li ul li:before { 3466 content:"\21B3"; 3467} 3468 3469#header-wrap { 3470 -webkit-transition: all 0.25s ease-out; 3471 -moz-transition: all 0.25s ease-out; 3472 -ms-transition: all 0.25s ease-out; 3473 -o-transition: all 0.25s ease-out; 3474 transition: all 0.25s ease-out; 3475 3476} 3477 3478#header-wrap.quicknav { 3479 height:216px; 3480 3481} 3482 3483.moremenu { 3484 float: right; 3485 position: relative; 3486 width: 50px; 3487 height:28px; 3488 display: block; 3489 margin-top:-3px; 3490 margin-bottom:7px; 3491 overflow:hidden; 3492 -webkit-transition: width 0.25s ease; 3493 -moz-transition: width 0.25s ease; 3494 -o-transition: width 0.25s ease; 3495 transition: width 0.25s ease; 3496} 3497 3498.moremenu #more-btn { 3499 width:40px; 3500 height:28px; 3501 background:url(../images/icon_more.png) no-repeat; 3502 border-left:1px solid #CCC; 3503 float:left; 3504 cursor:pointer; 3505} 3506 3507.moremenu:hover #more-btn { 3508 background-position:0 -28px; 3509} 3510 3511.morehover { 3512 position:absolute; 3513 right:6px; 3514 top:-9px; 3515 width:40px; 3516 height:35px; 3517 z-index:99; 3518 overflow:hidden; 3519 3520 -webkit-opacity:0; 3521 -moz-opacity:0; 3522 -o-opacity:0; 3523 opacity:0; 3524 3525 -webkit-transform-origin:100% 0%; 3526 -moz-transform-origin:100% 0%; 3527 -o-transform-origin:100% 0%; 3528 transform-origin:100% 0%; 3529 3530 -webkit-transition-property: -webkit-opacity; 3531 -webkit-transition-duration: .25s; 3532 -webkit-transition-timing-function:ease; 3533 3534 -moz-transition-property: -moz-opacity; 3535 -moz-transition-duration: .25s; 3536 -moz-transition-timing-function:ease; 3537 3538 -o-transition-property: -o-opacity; 3539 -o-transition-duration: .25s; 3540 -o-transition-timing-function:ease; 3541 3542 transition-property: opacity; 3543 transition-duration: .25s; 3544 transition-timing-function:ease; 3545} 3546 3547.morehover:hover, 3548.morehover.hover { 3549 opacity:1; 3550 height:385px; 3551 width:268px; 3552 -webkit-transition-property:height, -webkit-opacity; 3553} 3554 3555.morehover .top { 3556 width:268px; 3557 height:39px; 3558 background:url(../images/more_top.png) no-repeat; 3559} 3560 3561.morehover .mid { 3562 width:228px; 3563 background:url(../images/more_mid.png) repeat-y; 3564 padding:10px 20px 0 20px; 3565} 3566 3567.morehover .mid .header { 3568 border-bottom:1px solid #ccc; 3569 font-weight:bold; 3570} 3571 3572.morehover .bottom { 3573 width:268px; 3574 height:6px; 3575 background:url(../images/more_bottom.png) no-repeat; 3576} 3577 3578.morehover ul { 3579 margin:10px 10px 20px 0; 3580} 3581 3582.morehover ul li { 3583 list-style:none; 3584} 3585 3586.morehover ul li.active a, 3587.morehover ul li.active a:hover { 3588 color:#222 !important; 3589} 3590 3591.morehover ul li.active img { 3592 margin-right:4px; 3593} 3594 3595 3596 3597 3598/* MARQUEE */ 3599.slideshow-container { 3600 width:100%; 3601 overflow:hidden; 3602 position:relative; 3603} 3604.slideshow-container .slideshow-prev { 3605 position:absolute; 3606 top:50%; 3607 left:0px; 3608 margin-top:-36px; 3609 z-index:99; 3610} 3611.slideshow-container .slideshow-next { 3612 position:absolute; 3613 top:50%; 3614 margin-top:-36px; 3615 z-index:99; 3616 right:0px; 3617} 3618 3619.slideshow-container .pagination { 3620 position:absolute; 3621 bottom:20px; 3622 width:100%; 3623 text-align:center; 3624 z-index:99; 3625} 3626.slideshow-container .pagination ul { 3627 margin:0; 3628} 3629.slideshow-container .pagination ul li{ 3630 display: inline-block; 3631 width:12px; 3632 height:12px; 3633 text-indent:-8000px; 3634 list-style:none; 3635 margin: 0 3px; 3636 border-radius:6px; 3637 background-color:#ddd; 3638 cursor:pointer; 3639 -webkit-transition:color .5s ease-in; 3640 -moz-transition:color .5s ease-in; 3641 -o-transition:color .5s ease-in; 3642 transition:color .5s ease-in; 3643} 3644.slideshow-container .pagination ul li:hover { 3645 background-color:#bbb; 3646} 3647.slideshow-container .pagination ul li.active { 3648 background-color:#6ab344; 3649} 3650.slideshow-container .pagination ul li.active:hover { 3651 background-color:#6ab344; 3652} 3653.slideshow-container ul li { 3654 display:inline; 3655 list-style:none; 3656} 3657 3658 3659#landing h1 { 3660 padding:17px 0 20px 0 !important; 3661} 3662 3663a.download-sdk { 3664 float:right; 3665 margin:-10px 0; 3666 height:30px; 3667 padding-top:4px; 3668 padding-bottom:0px; 3669} 3670 3671#searchResults.wrap { 3672 max-width:940px; 3673 border-bottom:1px solid #e5e5e5; 3674} 3675 3676#searchResults.wrap #leftSearchControl { 3677 min-height:700px 3678} 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689/* 3690 * CSS Styles that are needed by jScrollPane for it to operate correctly. 3691 */ 3692 3693.jspContainer { 3694 overflow: hidden; 3695 position: relative; 3696} 3697 3698.jspPane { 3699 position: absolute; 3700 width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */ 3701} 3702 3703.jspVerticalBar { 3704 position: absolute; 3705 top: 0; 3706 right: 0; 3707 width: 4px; 3708 height: 100%; 3709 background: #f5f5f5; 3710} 3711 3712.jspHorizontalBar { 3713 position: absolute; 3714 bottom: 0; 3715 left: 0; 3716 width: 100%; 3717 height: 4px; 3718 background: #f5f5f5; 3719} 3720 3721.jspVerticalBar *, 3722.jspHorizontalBar * { 3723 margin: 0; 3724 padding: 0; 3725} 3726.jspCap { 3727 display: block; 3728} 3729 3730.jspVerticalBar .jspCap { 3731 height: 4px; 3732} 3733 3734.jspHorizontalBar .jspCap { 3735 width: 0; 3736 height: 100%; 3737} 3738 3739.jspHorizontalBar .jspCap { 3740 float: left; 3741} 3742 3743.jspTrack { 3744 position: relative; 3745} 3746 3747.jspDrag { 3748 background: #ccc; 3749 position: relative; 3750 top: 0; 3751 left: 0; 3752 cursor: pointer; 3753} 3754 3755.jspDrag:hover, 3756.jspDrag:active { 3757 border-color: #09c; 3758 background-color: #4cadcb; 3759 background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb)); 3760 background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb); 3761 background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb); 3762 background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb); 3763 background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb); 3764 background-image: linear-gradient(left, #5dbcd9, #4cadcb); 3765 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb'); 3766} 3767 3768.jspHorizontalBar .jspTrack, 3769.jspHorizontalBar .jspDrag { 3770 float: left; 3771 height: 100%; 3772} 3773 3774.jspArrow { 3775 background: #999; 3776 text-indent: -20000px; 3777 display: block; 3778 cursor: pointer; 3779} 3780 3781.jspArrow.jspDisabled { 3782 cursor: default; 3783 background: #ccc; 3784} 3785 3786.jspVerticalBar .jspArrow { 3787 height: 16px; 3788} 3789 3790.jspHorizontalBar .jspArrow { 3791 width: 16px; 3792 float: left; 3793 height: 100%; 3794} 3795 3796.jspVerticalBar .jspArrow:focus { 3797 outline: none; 3798} 3799 3800.jspCorner { 3801 float: left; 3802 height: 100%; 3803} 3804 3805/* Yuk! CSS Hack for IE6 3 pixel bug :( */ 3806* html .jspCorner { 3807 margin: 0 -3px 0 0; 3808} 3809/******* end of jscrollpane *********/ 3810 3811 3812 3813 3814 3815/************ DEVELOP HOMEPAGE ******************/ 3816 3817/* Slideshow */ 3818.slideshow-develop { 3819 height: 316px; 3820 width: 940px; 3821 position: relative; 3822 overflow:hidden; 3823} 3824.slideshow-develop .frame { 3825 width: 940px; 3826 height: 316px; 3827} 3828.slideshow-develop img.play { 3829 max-width:350px; 3830 max-height:240px; 3831 margin:20px 0 0 90px; 3832 -webkit-transform: perspective(800px ) rotateY( 35deg ); 3833 box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 3834 -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 3835 -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3); 3836} 3837.slideshow-develop img.play.no-shadow { 3838 box-shadow: none; 3839 -moz-box-shadow: none; 3840 -webkit-box-shadow: none; 3841} 3842.slideshow-develop img.play.no-transform { 3843 -webkit-transform: none; 3844} 3845.slideshow-develop a.slideshow-next { 3846 background: url(../images/arrow-right-develop.png); 3847} 3848.slideshow-develop a.slideshow-prev { 3849 background: url(../images/arrow-left-develop.png); 3850} 3851.slideshow-develop .content-right { 3852 float: left; 3853} 3854.slideshow-develop .content-right h2 { 3855 padding:0; 3856 padding-bottom:10px; 3857 border:none; 3858 font-size:24px; 3859} 3860.slideshow-develop .item { 3861 height: 300px; 3862 width: 940px; 3863} 3864.slideshow-develop .pagination ul li.active { 3865 background-color: #F80; 3866} 3867.slideshow-develop .pagination ul li.active:hover { 3868 background-color: #F80; 3869} 3870.slideshow-develop .item hr { 3871 margin:5px 0 10px; 3872} 3873.slideshow-develop .item p { 3874 margin:10px 0; 3875} 3876.slideshow-develop .item p.title-intro { 3877 position:absolute; 3878 margin:0; 3879} 3880 3881/* Feeds */ 3882.feed ul { 3883 margin: 0; 3884} 3885.feed .feed-nav { 3886 height: 25px; 3887 border-bottom: 1px solid #CCC; 3888} 3889.feed .feed-nav li { 3890 list-style: none; 3891 float: left; 3892 height: 21px; /* +4px bottom border = 25px; same as .feed-nav */ 3893 margin-right: 25px; 3894 cursor: pointer; 3895} 3896.feed .feed-nav li.active { 3897 color: #000; 3898 border-bottom: 4px solid #F80; 3899} 3900.feed .feed-container { 3901 overflow: hidden; 3902 width: 460px; 3903} 3904.feed .feed-container .feed-frame { 3905 width: 1000px; 3906} 3907.feed .feed-container .feed-frame ul { 3908 float: left; 3909 width:460px; 3910} 3911.feed .feed-container .feed-frame ul ul { 3912 float: none; 3913 margin:10px 0 0 30px; 3914} 3915.feed .feed-container .feed-frame li { 3916 list-style: none; 3917 margin: 20px 0 20px 0; 3918 width: 460px; 3919 height:93px; 3920} 3921.feed .feed-container .feed-frame li.playlist { 3922 height:auto; 3923} 3924.feed .feed-container .feed-frame li.playlist a { 3925 height:93px; 3926 display:block; 3927} 3928.feed .feed-container .feed-frame li.more { 3929 height:20px; 3930 margin:10px 0 5px 5px; 3931} 3932.feed .feed-container .feed-frame li.more a { 3933 height:inherit; 3934} 3935.feed .feed-container .feed-frame li.playlist-video { 3936 list-style: none; 3937 margin: 0; 3938 width: 460px; 3939 height:55px; 3940 font-size:12px; 3941} 3942.feed .feed-container .feed-frame li.playlist-video a { 3943 height:45px; 3944 padding:5px; 3945} 3946.feed .feed-container .feed-frame li.playlist-video h5 { 3947 font-size:12px; 3948 line-height:13px; 3949 padding:0; 3950} 3951.feed .feed-container .feed-frame li.playlist-video p { 3952 margin:5px 0 0; 3953 line-height:15px; 3954} 3955.feed-container .feed-frame div.feed-image { 3956 float: left; 3957 border: 1px solid #999; 3958 margin:0 20px 0 0; 3959 width:122px; 3960 height:92px; 3961 background:url('../images/blog-default.png') no-repeat 0 0; 3962 background-size:180px; 3963} 3964#jd-content .feed .feed-container .feed-frame li img { 3965 float: left; 3966 border: 1px solid #999; 3967 margin:0 20px 0 0; 3968 width:122px; 3969 height:92px; 3970} 3971#jd-content .feed .feed-container .feed-frame li.playlist-video img { 3972 width:inherit; 3973 height:inherit; 3974} 3975 3976.feed .feed-container .feed-frame li a, 3977.feed .feed-container .feed-frame li a:active { 3978 color:#555 !important; 3979} 3980 3981.feed .feed-container .feed-frame li a:hover, 3982.feed .feed-container .feed-frame li a:hover * { 3983 color:#7AA1B0 !important; 3984} 3985 3986/* Video player */ 3987#player-wrapper { 3988 display:none; 3989 margin: -1px auto 0; 3990 position: relative; 3991 max-width: 940px; 3992 height: 0px; 3993} 3994#player-frame { 3995 background: #EFEFEF; 3996 border: 1px solid #CCC; 3997 padding: 0px 207px; 3998 z-index: 10; /* stay above marque, but below search suggestions */ 3999 width: 525px; 4000 height: 330px; 4001 position: relative; 4002} 4003#player-frame .close { 4004 position: absolute; 4005 right: 8px; 4006 bottom: 4px; 4007 width: 16px; 4008 height: 16px; 4009 margin: 0; 4010 text-indent: -1000em; 4011 top: 6px; 4012 background: url(../images/close.png) no-repeat 0 0; 4013 z-index:9999; 4014} 4015#player-frame .close:hover, #player-frame .close:focus { 4016 background-position: -16px 0; 4017 cursor:pointer; 4018} 4019 4020 4021 4022/************ DEVELOP TOPIC CONTAINERS ************/ 4023 4024.landing-banner, 4025.landing-docs { 4026 margin:20px 0; 4027} 4028.landing-banner > div:first-child, 4029.landing-docs > div:first-child, 4030.landing-docs > .col-12 { 4031 margin-left:0; 4032 min-height:280px; 4033} 4034.landing-banner.short > div { 4035 min-height:50px; 4036} 4037.landing-banner > div:last-child, 4038.landing-docs > div:last-child, 4039.landing-docs > .col-12 { 4040 margin-right:0; 4041} 4042 4043.landing-banner > div > *:last-child { 4044 margin-bottom:0; 4045} 4046.landing-banner h1 { 4047 padding-top:16px; 4048 padding-bottom:24px; 4049} 4050.landing-docs, 4051.landing-banner { 4052 clear:both; 4053 overflow:hidden; 4054} 4055.landing-docs h3 { 4056 font-size:14px; 4057 line-height:21px; 4058 color:#555; 4059 text-transform:uppercase; 4060 border-bottom:1px solid #CCC; 4061 padding:0 0 20px; 4062} 4063.landing-docs a { 4064 color:#333 !important; 4065} 4066 4067.landing-docs a:hover, 4068.landing-docs a:hover * { 4069 color:#7AA1B0 !important 4070} 4071 4072.landing-docs .normal-links a { 4073 color:#039BE5 !important; 4074} 4075 4076.plusone { 4077 float:right; 4078} 4079 4080 4081 4082.next-docs { 4083 border-top:1px solid #ccc; 4084 margin:40px 0 0; 4085 padding:5px 0 0; 4086 clear:left; 4087 overflow:hidden; 4088} 4089.next-docs div:first-child { 4090 margin-left:0; 4091} 4092.next-docs div:last-child { 4093 margin-right:0; 4094} 4095 4096.next-docs h2 { 4097 font-size:14px; 4098 line-height:21px; 4099 color:#555; 4100 text-transform:uppercase; 4101 border-bottom:none; 4102 padding:5px 0 1em; 4103} 4104 4105 4106 4107/************* HOME/LANDING PAGE *****************/ 4108 4109.slideshow-home { 4110 height: 500px; 4111 width: 940px; 4112 border-bottom: 1px solid #CCC; 4113 position: relative; 4114 margin: 0; 4115} 4116.slideshow-home .frame { 4117 width: 940px; 4118 height: 500px; 4119} 4120.slideshow-home .content-left { 4121 float: left; 4122 text-align: center; 4123 vertical-align: center; 4124 margin: 0 0 0 35px; 4125} 4126.slideshow-home .content-right { 4127 margin: 80px 0 0 0; 4128} 4129.slideshow-home .content-right p { 4130 margin-bottom: 10px; 4131} 4132.slideshow-home .content-right p:last-child { 4133 margin-top: 15px; 4134} 4135.slideshow-home .content-right h1 { 4136 padding:0; 4137} 4138.slideshow-home .item { 4139 height: 500px; 4140 width: 940px; 4141} 4142.home-sections { 4143 padding: 30px 20px 20px; 4144 margin: 20px 0; 4145 background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9); 4146} 4147.home-sections ul { 4148 margin: 0; 4149} 4150.home-sections ul li { 4151 float: left; 4152 display: block; 4153 list-style: none; 4154 width: 170px; 4155 height: 35px; 4156 border: 1px solid #ccc; 4157 background: white; 4158 margin-right: 10px; 4159 border-radius: 1px; 4160 -webkit-border-radius: 1px; 4161 -moz-border-radius: 1px; 4162 box-shadow: 1px 1px 5px #EEE; 4163 -webkit-box-shadow: 1px 1px 5px #EEE; 4164 -moz-box-shadow: 1px 1px 5px #EEE; 4165 background: white; 4166} 4167.home-sections ul li:hover { 4168 background: #F9F9F9; 4169 border: 1px solid #CCC; 4170} 4171.home-sections ul li a, 4172.home-sections ul li a:hover { 4173 font-weight: bold; 4174 margin-top: 8px; 4175 line-height: 18px; 4176 float: left; 4177 width: 100%; 4178 text-align: center; 4179 color: #039BE5 !important; 4180} 4181.home-sections ul li a { 4182 font-weight: bold; 4183 margin-top: 8px; 4184 line-height: 18px; 4185 float: left; 4186 width:100%; 4187 text-align:center; 4188} 4189.home-sections ul li img { 4190 float: left; 4191 margin: -8px 0 0 10px; 4192} 4193.home-sections ul li.last { 4194 margin-right: 0px; 4195} 4196 4197/************ DISTRIBUTE PAGES ******************/ 4198 4199.article-detail #body-content { 4200 padding-top: 10px; 4201} 4202 4203/* A container for grid sets with uppercase h3 and rule */ 4204.dynamic-grid h3 { 4205 font-size:14px; 4206 line-height:21px; 4207 color:#555; 4208 text-transform:uppercase; 4209 border-bottom:1px solid #CCC; 4210 padding:8px 0 14px 1px; 4211 clear:both; 4212} 4213 4214.top-right-float { 4215 float: right; 4216} 4217 4218.clearfloat { 4219 float: none; 4220 clear: both; 4221} 4222 4223 4224/** 4225 * UTILITIES 4226 */ 4227 4228 4229.border-box { 4230 box-sizing: border-box; 4231} 4232 4233.vertical-center-outer { 4234 display: table; 4235 height: 100%; 4236 width: 100%; 4237} 4238 4239.vertical-center-inner { 4240 display: table-cell; 4241 vertical-align: middle; 4242} 4243 4244/** 4245 * TYPE STYLES 4246 */ 4247 4248.landing-h1 { 4249 color: #44555d; 4250 font-weight: 300; 4251 font-size: 56px; 4252 line-height: 80px; 4253 text-align: center; 4254 letter-spacing: -1px; 4255 padding-bottom: 6px; 4256} 4257 4258.landing-pre-h1 { 4259 font-weight: 400; 4260 font-size: 28px; 4261 color: #93B73F; 4262 line-height: 36px; 4263 text-align: center; 4264 letter-spacing: -1px; 4265 text-transform: uppercase; 4266} 4267 4268.landing-h1.hero { 4269 text-align: left; 4270 color: #fff; 4271} 4272 4273.landing-h2 { 4274 font-weight: 300; 4275 font-size: 42px; 4276 line-height: 64px; 4277 text-align: center; 4278} 4279 4280.landing-subhead { 4281 color: #78868d; 4282 font-size: 20px; 4283 font-weight: 300; 4284 line-height: 32px; 4285 text-align: center; 4286} 4287.landing-subhead.hero { 4288 text-align: left; 4289 color: white; 4290} 4291 4292.landing-hero-description { 4293 text-align: left; 4294 margin: 1em 0; 4295} 4296 4297.landing-hero-description p { 4298 font-weight: 300; 4299 margin: 0; 4300 font-size: 18px; 4301 line-height: 24px; 4302} 4303 4304.landing-body .landing-small { 4305 font-size: 14px; 4306 line-height: 19px; 4307} 4308 4309.landing-body.landing-align-center { 4310 text-align: center; 4311} 4312 4313.landing-align-left { 4314 text-align: left; 4315} 4316 4317/** 4318 * LAYOUT 4319 */ 4320 4321.landing-section { 4322 background: #eceff1; 4323 clear: both; 4324 padding: 80px 20px 80px; 4325 margin: 0 -20px; 4326 text-rendering: optimizeLegibility; 4327} 4328 4329@media (max-width: 719px) { 4330 .landing-section { 4331 margin-left: -10px; 4332 margin-right: -10px; 4333 padding-left: 10px; 4334 padding-right: 10px; 4335 } 4336} 4337 4338.landing-short-section { 4339 padding: 40px 10px 28px; 4340} 4341 4342.landing-gray-background { 4343 background-color: #b0bec5; 4344} 4345 4346.landing-white-background { 4347 background-color: white; 4348} 4349 4350.landing-red-background { 4351 color: white; 4352 background-color: hsl(8, 70%, 54%); 4353} 4354 4355.landing-red-background .landing-h1 { 4356 color: white; 4357} 4358 4359.landing-red-background .landing-subhead { 4360 color: hsl(8, 71%, 84%); 4361 text-align: left; 4362} 4363 4364 4365.preview-hero { 4366 height: calc(100vh - 128px); 4367 min-height: 504px; 4368 padding-top: 0; 4369 padding-bottom: 0; 4370 background-image: url(../../preview/images/hero.jpg); 4371 background-size: cover; 4372 background-position: right center; 4373 color: white; 4374 position: relative; 4375 overflow: hidden; 4376} 4377 4378.wear-hero { 4379 height: calc(100vh - 128px); 4380 min-height: 504px; 4381 padding-top: 0; 4382 padding-bottom: 0; 4383 background-image: url(../../wear/images/hero.jpg); 4384 background-size: cover; 4385 background-position: top center; 4386 color: white; 4387 position: relative; 4388 overflow: hidden; 4389} 4390 4391.tv-hero { 4392 height: calc(100vh - 128px); 4393 min-height: 504px; 4394 padding-top: 0; 4395 padding-bottom: 0; 4396 background-image: url(../../tv/images/hero.jpg); 4397 background-size: cover; 4398 background-position: right center; 4399 color: white; 4400 position: relative; 4401 overflow: hidden; 4402} 4403 4404.auto-hero { 4405 height: calc(100vh - 128px); 4406 min-height: 504px; 4407 padding-top: 0; 4408 padding-bottom: 0; 4409 background-image: url(../../auto/images/hero.jpg); 4410 background-size: cover; 4411 background-position: right center; 4412 color: white; 4413 position: relative; 4414 overflow: hidden; 4415} 4416 4417.landing-hero-scrim { 4418 background: black; 4419 height: 100%; 4420 left: 0; 4421 position: absolute; 4422 opacity: .2; 4423 width: 100%; 4424} 4425 4426.landing-hero-wrap { 4427 margin: 0 auto; 4428 max-width: 940px; 4429 clear: both; 4430 height: 100%; 4431 position: relative; 4432} 4433 4434.landing-section-header { 4435 margin-bottom: 40px; 4436} 4437 4438.landing-hero-wrap .landing-section-header { 4439 margin-bottom: 16px; 4440} 4441 4442.landing-body { 4443 font-size: 18px; 4444 line-height: 24px; 4445} 4446 4447.landing-video-link { 4448 white-space: nowrap; 4449 display: inline-block; 4450 padding: 16px 32px 16px 82px; 4451 font-size: 18px; 4452 font-weight: 400; 4453 line-height: 24px; 4454 cursor: pointer; 4455 color: hsla(0, 0%, 100%, .8); 4456 -webkit-user-select: none; 4457 -moz-user-select: none; 4458 -o-user-select: none; 4459 user-select: none; 4460 -webkit-transition: .2s color ease-in-out; 4461 -moz-transition: .2s color ease-in-out; 4462 -o-transition: .2s color ease-in-out; 4463 transition: .2s color ease-in-out; 4464} 4465 4466.landing-video-link:before { 4467 height: 64px; 4468 width: 64px; 4469 display: inline-block; 4470 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=); 4471 background-size: contain; 4472 position: absolute; 4473 content: ""; 4474 opacity: .7; 4475 margin-top: -19px; 4476 margin-left: -64px; 4477 -webkit-transition: .2s opacity ease-in-out; 4478 -moz-transition: .2s opacity ease-in-out; 4479 -o-transition: .2s opacity ease-in-out; 4480 transition: .2s opacity ease-in-out; 4481} 4482 4483.landing-video-link:hover { 4484 color: hsla(0, 0%, 100%, 1); 4485} 4486 4487.landing-video-link:hover:before { 4488 opacity: 1; 4489} 4490 4491.landing-social-image { 4492 float: left; 4493 margin-right: 14px; 4494 height: 64px; 4495 width: 64px; 4496} 4497 4498.landing-social-copy { 4499 padding-left: 78px; 4500} 4501 4502.landing-scroll-down-affordance { 4503 position: absolute; 4504 bottom: 0; 4505 width: 100%; 4506 text-align: center; 4507 z-index: 10; 4508} 4509 4510.landing-down-arrow { 4511 padding: 24px; 4512 display: inline-block; 4513 opacity: .5; 4514 -webkit-transition: .2s opacity ease-in-out; 4515 -moz-transition: .2s opacity ease-in-out; 4516 -o-transition: .2s opacity ease-in-out; 4517 transition: .2s opacity ease-in-out; 4518 4519 -webkit-animation-name: pulse-opacity; 4520 -webkit-animation-duration: 4s; 4521} 4522 4523.landing-down-arrow:hover { 4524 opacity: 1; 4525} 4526 4527.landing-down-arrow img { 4528 height: 28px; 4529 width: 28px; 4530 margin: 0 auto; 4531 display: block; 4532} 4533 4534.landing-divider { 4535 display: inline-block; 4536 height: 2px; 4537 background-color: white; 4538 position: relative; 4539 margin: 10px 0; 4540} 4541 4542/* 3 CLOLUMN LAYOUT */ 4543 4544.landing-breakout { 4545 margin-top: 40px; 4546 margin-bottom: 40px; 4547} 4548 4549.landing-breakout img { 4550 margin-bottom: 20px; 4551} 4552 4553.landing-partners img { 4554 margin-bottom: 20px; 4555} 4556 4557.landing-breakout p { 4558 padding: 0 23px; 4559} 4560 4561.landing-breakout.landing-partners img { 4562 margin-bottom: 20px; 4563} 4564 4565/** 4566 * ANIMATION 4567 */ 4568 4569@-webkit-keyframes pulse-opacity { 4570 0% { 4571 opacity: .5; 4572 } 4573 20% { 4574 opacity: .5; 4575 } 4576 40% { 4577 opacity: 1; 4578 } 4579 60% { 4580 opacity: .5; 4581 } 4582 80% { 4583 opacity: 1; 4584 } 4585 100% { 4586 opacity: .5; 4587 } 4588} 4589 4590 4591/****************** 4592Styles for d.a.c/index: 4593*******************/ 4594 4595 4596 4597/* Generic full screen carousel styling to be used across pages. */ 4598.fullscreen-carousel { 4599 margin: 0 -20px; 4600 overflow: hidden; 4601 position: relative; 4602} 4603 4604.fullscreen-carousel-content { 4605 width: 100%; 4606 height: 100%; 4607 position: relative; 4608 display: table; /* For vertical centering */ 4609} 4610 4611.fullscreen-carousel .vcenter { 4612 display: table-cell; 4613 vertical-align: middle; 4614 position: relative; 4615} 4616 4617.fullscreen-carousel .vcenter > div { 4618 margin: 10px auto; 4619} 4620 4621/* Styles for the full-bleed hero image type. */ 4622.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 { 4623 color: #fff; 4624} 4625 4626.fullscreen-carousel .hero h1 { 4627 font-weight: 300; 4628 font-size: 60px; 4629 line-height: 68px; 4630 letter-spacing: -1px; 4631 padding-top: 0; 4632} 4633 4634.fullscreen-carousel .hero p { 4635 font-weight: 300; 4636 font-size: 18px; 4637 line-height: 24px; 4638} 4639 4640.fullscreen-carousel .hero .hero-bg { 4641 background-size: cover; 4642 width: 100%; 4643 height: 100%; 4644 position: absolute; 4645 left: 0px; 4646 top: 0px; 4647} 4648 4649 4650/* Full screen carousel styling for the resource flow layout type of content */ 4651.fullscreen-carousel .resource-flow-layout:after { 4652 height: 0; /* Dont know why this is set at 10 in default.css */ 4653} 4654 4655.fullscreen-carousel .resource-flow-layout { 4656 margin-bottom: 20px; 4657} 4658 4659 4660 4661/* Generic Tab carousel styling to be used across multiple pages. */ 4662 4663.tab-carousel .tab-nav { 4664 list-style: none; 4665 position: relative; 4666 text-align: center; 4667} 4668 4669.tab-carousel .tab-nav li { 4670 display: inline-block; 4671 font-size: 22px; 4672 font-weight: 400; 4673 line-height: 50px; 4674 list-style: none; 4675 margin: 0; 4676 padding: 0 25px; 4677 position: relative; 4678} 4679 4680.tab-carousel .tab-nav li a, 4681.tab-carousel .tab-nav li a:hover { 4682 color: #333 !important; 4683 padding: 10px 10px 13px 10px; 4684 position: relative; 4685 z-index: 1000; 4686} 4687 4688.tab-carousel .tab-nav li:after { 4689 background: #ddd; 4690 bottom: 0; 4691 content: ''; 4692 height: 4px; 4693 left: 0; 4694 position: absolute; 4695 width: 100%; 4696 z-index: 0; 4697} 4698 4699.tab-carousel .tab-nav .highlight { 4700 position: absolute; 4701 height: 4px; 4702 width: 100px; 4703 bottom: 0; 4704 background: #33b5e5; 4705} 4706 4707.tab-carousel .tab-carousel-content { 4708 position: relative; 4709 overflow: hidden; 4710 white-space: nowrap; 4711} 4712 4713.tab-carousel .tab-carousel-content [data-tab] { 4714 display: inline-block; 4715 white-space: normal; 4716} 4717 4718 4719 4720/* 4721 Resource styling for the tab carousel. The tab carousel contains either 4722 a 3 column layout of resources or a single full-width resource. The 4723 latter has the 18x12 class applied to it and can be styled differently 4724 that way. 4725*/ 4726 4727.tab-carousel .resource .image { 4728 width: 100%; 4729 height: 250px; 4730 background-repeat: no-repeat; 4731 background-size: contain; 4732 background-position: 50% 50%; 4733} 4734 4735.tab-carousel .resource .info .title { 4736 font-size: 18px; 4737 line-height: 24px; 4738} 4739 4740.tab-carousel .resource .info .summary, 4741.tab-carousel .resource .info .cta { 4742 line-height: 24px; 4743 font-size: 16px; 4744} 4745 4746.tab-carousel .resource-card-18x12 { 4747 position: relative; 4748 padding-left: 450px; 4749 box-sizing: border-box; 4750 display: table-cell; 4751 vertical-align: middle; 4752} 4753 4754.tab-carousel .resource-card-18x12 .image { 4755 position: absolute; 4756 width: 420px; 4757 height: 100%; 4758 left: 0; 4759 top: 0; 4760} 4761 4762.tab-carousel .resource-card-18x12 .info { 4763 display: inline-block; 4764} 4765 4766.tab-carousel .resource-card-18x12 .info .title { 4767 margin-bottom: 26px; 4768} 4769 4770/* 4771 Specific styles for new home page layout of the carousels. 4772*/ 4773 4774/* Big blue button */ 4775a.home-new-cta-btn, 4776.home-new-carousel-1 .resource-card-18x6 .cta { 4777 white-space: nowrap; 4778 display: inline-block; 4779 padding: 14px 32px; 4780 font-size: 18px; 4781 font-weight: 500; 4782 line-height: 24px; 4783 cursor: pointer; 4784 background: #33b5e6; 4785 border-radius: 4px; 4786 margin-top: 20px; 4787 color: #fff; 4788 transition: 0.2s background-color ease-in-out; 4789} 4790 4791.home-new-carousel-1 .resource-card-18x6 .cta:after { 4792 display: none; /* Hide the entity for this button */ 4793} 4794 4795a.home-new-cta-btn:hover, 4796.home-new-carousel-1 .resource-card-18x6 .cta:hover { 4797 color: #fff !important; 4798 background: #2d9fca; 4799} 4800 4801.home-new-carousel-1 .resource-card-18x6 .cta { 4802 position: absolute; 4803 bottom: 20px; 4804 left: 16px; 4805} 4806 4807/* Fullscreen carousel. */ 4808.home-new-carousel-1 { 4809 max-height: 700px; /* Set max height so doesn't get too long */ 4810} 4811 4812.home-new-carousel-1 .fullscreen-carousel-content { 4813 min-height: 450px; /* Set min height for all content */ 4814} 4815 4816.home-new-carousel-1 .hero { 4817 background: #000; 4818} 4819 4820.home-new-carousel-1 .hero-bg { 4821 background-image: url(/home-new/images/hero.jpg); 4822 background-position: right center; 4823 opacity: 0.85; 4824} 4825 4826/* 4827 Styling for special top card of full screen layout resource layout. 4828 We need to specifically style the 18x6 card to adjust its size and layout, 4829 since it's not a standard card, not sure if this is unique to the home page 4830 layout or should be namespaced within the fullscreen-carousel container. 4831*/ 4832.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 { 4833 height: 320px; 4834 background-color:#F9F9F9; 4835 border-radius: 0px; 4836 box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); 4837 4838} 4839 4840.home-new-carousel-1 .resource-card-18x6 .card-bg { 4841 width: 636px; 4842 height: 100%; 4843} 4844 4845.home-new-carousel-1 .resource-card-18x6 .card-info { 4846 right: 0px; 4847 left: 636px; 4848 height: 100%; 4849 top: 0px; 4850 padding: 15px 22px; 4851} 4852 4853.home-new-carousel-1 .resource-card-18x6 .card-info .util { 4854 display: none; 4855} 4856 4857.home-new-carousel-1 .resource-card-18x6 .card-info .title { 4858 font-size: 20px; 4859 font-weight: 500; 4860 margin-top: 15px; 4861 margin-bottom: 15px; 4862} 4863 4864.home-new-carousel-1 .resource-card-18x6 .card-info .text { 4865 font-size: 15px; 4866 line-height: 21px; 4867} 4868 4869 4870/* Tabbed carousel. */ 4871.home-new-carousel-2 { 4872 margin: 35px auto 100px auto; 4873} 4874 4875.home-new-carousel-2 h1 { 4876 font-size: 47px; 4877 font-weight: 100; 4878 line-height: 54px; 4879 text-align: center; 4880} 4881 4882.annotation-message { 4883 display: block; 4884 font-style: italic; 4885 color: #F80; 4886} 4887 4888 4889 4890/* Helpouts widget */ 4891.resource-card-6x2.helpouts-card { 4892 width: 255px; 4893 height: 40px; 4894 position:absolute; 4895 z-index:999; 4896 top:-8px; 4897 right:1px; 4898} 4899 4900.resource-card-6x2.helpouts-card > .card-info { 4901 left:35px; 4902 height:35px; 4903 padding:4px 8px 4px 0; 4904} 4905 4906.resource-card-6x2.helpouts-card > .card-info .helpouts-description { 4907 display:block; 4908 overflow:visible; 4909 font-size:12px; 4910 line-height:12px; 4911 text-align:right; 4912 color:#666; 4913} 4914 4915.helpouts-description .link-color { 4916 text-transform: uppercase; 4917} 4918 4919.resource-card-6x2 > .card-bg.helpouts-card-bg { 4920 width:35px; 4921 height:35px; 4922 margin:2px 0 0 0; 4923 background-image: url(../images/styles/helpouts-logo-35_2x.png); 4924 background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x); 4925} 4926 4927.resource-card-6x2 > .card-bg.helpouts-card-bg:after { 4928 display:none; 4929} 4930 4931#tb li:before, #qv li:before { 4932 background-position: 0px -196px; 4933 height: 24px; 4934 width: 24px; 4935 content: ''; 4936 left: -8px; 4937 opacity: .7; 4938 position: absolute; 4939 top: -4px; 4940} 4941 4942/* CHANGE EXISTING SELECTOR FOR ANDROID M HERO ONLY 4943 REMOVE THE BELOW STYLES WHEN THE ANDROID M CAROUSEL 4944 GRAPHIC ON THE MAIN LANDING IS TAKEN DOWN */ 4945.dac-hero.mprev { 4946 background-color: #fff; 4947 background-position: 50% 53%; 4948 background-size: cover; 4949 background-image: url(../images/home/android_m_hero_1200.jpg); 4950 box-sizing: border-box; 4951 font-size: 16px; 4952 min-height: 550px; 4953 padding-top: 88px; 4954} 4955.dac-hero.dac-darken.mprev::before { 4956 background: rgba(0, 0, 0, 0.3); 4957 bottom: 0; 4958 content: ''; 4959 display: block; 4960 left: 0; 4961 position: absolute; 4962 right: 0; 4963 top: 0; 4964} 4965 4966.dac-hero.dac-darken.mprev::before { 4967 background: -webkit-linear-gradient(top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05), #000 950px); 4968 background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0.05), #000 950px); 4969} 4970 4971@media (max-width: 719px) { 4972 .dac-hero.dac-darken.mprev { 4973 background-size: auto 600px; 4974 background-position: 55% 0; 4975 background-repeat: no-repeat; 4976 } 4977 4978 .dac-hero-figure.mprev { 4979 height: 10px; 4980 margin: 15px 0; 4981 } 4982} 4983 4984@media (max-width: 719px) { 4985 .dac-hero.dac-darken.mprev { 4986 background-size: auto 600px; 4987 background-position: 55% 0; 4988 background-repeat: no-repeat; 4989 } 4990 4991 .dac-hero-figure.mprev { 4992 height: 10px; 4993 margin: 15px 0; 4994 } 4995} 4996 4997@media (max-width: 1200px) { 4998 .dac-hero.dac-darken.mprev { 4999 background-size: auto 700px; 5000 background-position: 55% 0; 5001 background-repeat: no-repeat; 5002 } 5003 5004 .dac-hero-cta.mprev { 5005 white-space:nowrap; 5006 } 5007} 5008 5009@charset "UTF-8"; 5010/** 5011 * Fades out an element. 5012 * Applies visibility hidden when the transition is finished. 5013 * 5014 * Use opacity: 1; to show the element. 5015 */ 5016.dac-visible-mobile-block, .dac-mobile-only, 5017.dac-visible-mobile-inline, 5018.dac-visible-mobile-inline-block, 5019.dac-visible-tablet-block, 5020.dac-visible-tablet-inline, 5021.dac-visible-tablet-inline-block, 5022.dac-visible-desktop-block, 5023.dac-visible-desktop-inline, 5024.dac-visible-desktop-inline-block { 5025 display: none !important; 5026} 5027 5028@media (max-width: 719px) { 5029 .dac-hidden-mobile { 5030 display: none !important; 5031 } 5032 5033 .dac-visible-mobile-block, .dac-mobile-only { 5034 display: block !important; 5035 } 5036 5037 .dac-visible-mobile-inline { 5038 display: inline !important; 5039 } 5040 5041 .dac-visible-mobile-inline-block { 5042 display: inline-block !important; 5043 } 5044} 5045 5046@media (min-width: 720px) and (max-width: 979px) { 5047 .dac-hidden-tablet { 5048 display: none !important; 5049 } 5050 5051 .dac-visible-tablet-block { 5052 display: block !important; 5053 } 5054 5055 .dac-visible-tablet-inline { 5056 display: inline !important; 5057 } 5058 5059 .dac-visible-tablet-inline-block { 5060 display: inline-block !important; 5061 } 5062} 5063 5064@media (min-width: 980px) { 5065 .dac-hidden-desktop { 5066 display: none !important; 5067 } 5068 5069 .dac-visible-desktop-block { 5070 display: block !important; 5071 } 5072 5073 .dac-visible-desktop-inline { 5074 display: inline !important; 5075 } 5076 5077 .dac-visible-desktop-inline-block { 5078 display: inline-block !important; 5079 } 5080} 5081 5082.dac-offset-parent { 5083 position: relative !important; 5084} 5085 5086/** 5087 * Hide from browsers/screenreaders on all sizes. 5088 */ 5089.dac-hidden { 5090 display: none !important; 5091} 5092 5093/** 5094 * Break strings when their length exceeds the width of their container. 5095 */ 5096.dac-text-break { 5097 word-wrap: break-word !important; 5098} 5099 5100/** 5101 * Horizontal text alignment 5102 */ 5103.dac-text-center { 5104 text-align: center !important; 5105} 5106 5107.dac-text-left { 5108 text-align: left !important; 5109} 5110 5111.dac-text-right { 5112 text-align: right !important; 5113} 5114 5115/** 5116 * Prevent whitespace wrapping 5117 */ 5118.dac-text-no-wrap { 5119 white-space: nowrap !important; 5120} 5121 5122/** 5123 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis. 5124 */ 5125.dac-text-truncate { 5126 max-width: 100%; 5127 overflow: hidden !important; 5128 text-overflow: ellipsis !important; 5129 white-space: nowrap !important; 5130 word-wrap: normal !important; 5131} 5132 5133/** 5134 * Floats 5135 */ 5136.dac-float-left { 5137 float: left !important; 5138} 5139 5140.dac-float-right { 5141 float: right !important; 5142} 5143 5144/** 5145 * New block formatting context 5146 * 5147 * This affords some useful properties to the element. It won't wrap under 5148 * floats. Will also contain any floated children. 5149 * N.B. This will clip overflow. Use the alternative method below if this is 5150 * problematic. 5151 */ 5152.dac-nbfc { 5153 overflow: hidden !important; } 5154 5155/** 5156 * New block formatting context (alternative) 5157 * 5158 * Alternative method when overflow must not be clipped. 5159 * 5160 * N.B. This breaks down in some browsers when elements within this element 5161 * exceed its width. 5162 */ 5163.dac-nbfc-alt { 5164 display: table-cell !important; 5165 width: 10000px !important; } 5166 5167/* New CSS */ 5168/************ RESOURCE CARDS ******************/ 5169/* Basic card-styling with shadow */ 5170.resource-card { 5171 background: #fff; 5172 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); 5173 display: block; 5174 position: relative; } 5175 5176/* Play button is only visible on 6by6 cards */ 5177.play-button { 5178 background-color: #000; 5179 border-radius: 50%; 5180 box-sizing: border-box; 5181 display: none; 5182 height: 70px; 5183 line-height: 65px; 5184 padding-left: 4px; 5185 position: absolute; 5186 opacity: .6; 5187 text-align: center; 5188 -webkit-transition: opacity .5s; 5189 transition: opacity .5s; 5190 width: 70px; 5191 z-index: 1; } 5192 .resource-card-6x2 .play-button { 5193 display: block; 5194 left: 10px; 5195 top: 15px; 5196 -webkit-transform: scale(0.73); 5197 -ms-transform: scale(0.73); 5198 transform: scale(0.73); } 5199 .resource-card-6x6 .play-button { 5200 display: block; 5201 left: 50%; 5202 margin-left: -35px; 5203 top: 50px; } 5204 5205/* Styling for background image including tinting and section icons in stacks */ 5206.card-bg { 5207 bottom: 131px; 5208 display: block; 5209 position: absolute; 5210 vertical-align: top; 5211 width: 100%; 5212 left: 0; 5213 top: 0; 5214 background-size: cover; 5215 background-repeat: no-repeat; 5216 background-position: center; 5217 background-image: url(../images/resource-card-default-android.jpg); } 5218 .card-bg:after { 5219 content: ""; 5220 display: block; 5221 height: 100%; 5222 width: 100%; 5223 opacity: 1; 5224 background: rgba(0, 0, 0, 0.05); 5225 -webkit-transition: opacity 0.5s; 5226 transition: opacity 0.5s; } 5227 .static .card-bg:after { 5228 display: none; } 5229 .card-bg .card-section-icon { 5230 position: absolute; 5231 top: 50%; 5232 width: 100%; 5233 margin-top: -35px; 5234 text-align: center; 5235 padding-top: 65px; 5236 z-index: 100; } 5237 .card-bg .card-section-icon .icon { 5238 position: absolute; 5239 left: 50%; 5240 margin-left: -28px; 5241 top: 0px; 5242 width: 56px; 5243 height: 56px; 5244 background-repeat: no-repeat; 5245 background-position: 50% 50%; 5246 background-image: url(../images/stack-icon.png); } 5247 .card-bg .card-section-icon .section { 5248 text-transform: uppercase; 5249 color: white; 5250 font-size: 14px; } 5251 5252.card-info { 5253 position: absolute; 5254 box-sizing: border-box; 5255 height: 131px; 5256 right: 0; 5257 bottom: 0; 5258 left: 0; 5259 overflow: hidden; 5260 background: #fefefe; 5261 padding: 6px 12px; 5262} 5263 5264.card-info .section { 5265 color: #898989; 5266 font-size: 11px; 5267 font-weight: 700; 5268 letter-spacing: .3px; 5269 line-height: 20px; 5270 text-transform: uppercase; 5271} 5272 5273.card-info .title { 5274 color: #333; 5275 font-size: 18px; 5276 font-weight: 500; 5277 line-height: 23px; 5278 margin-bottom: 7px; 5279 max-height: 46px; 5280 overflow: hidden; 5281 text-overflow: ellipsis; 5282 white-space: normal; 5283} 5284 5285.card-info .description { 5286 overflow: hidden; 5287} 5288 5289.card-info .description .text { 5290 color: #666; 5291 font-size: 14px; 5292 height: 60px; 5293 line-height: 20px; 5294 overflow: hidden; 5295 width: 100%; 5296} 5297 5298.card-info .description .util { 5299 position: absolute; 5300 right: 5px; 5301 bottom: 70px; 5302 opacity: 0; 5303 -webkit-transition: opacity 0.5s; 5304 transition: opacity 0.5s; 5305} 5306 5307.card-info.empty-desc .title { 5308 white-space: normal; 5309 overflow: visible; 5310} 5311 5312.card-info.empty-desc .description { 5313 display: none; 5314} 5315 5316/* Resource card with icon instead of bg image */ 5317.resource-widget-card-icon { 5318 text-align: center; 5319} 5320 5321.card-icon { 5322 margin: 20px 0 0; 5323} 5324 5325.resource-widget-card-icon .card-info { 5326 height: 210px; 5327} 5328 5329.resource-widget-card-icon .card-info .title { 5330 color: #333; 5331 line-height: 24px; 5332} 5333 5334.resource-widget-card-icon .card-bg { 5335 background: none; 5336 bottom: 220px; 5337 opacity: 1; 5338 top: 30px; 5339 -webkit-transition: opacity .3s; 5340 transition: opacity .3s; 5341} 5342 5343.resource-widget-card-icon .resource-card:hover .card-bg { 5344 opacity: .5; 5345} 5346 5347.resource-widget-card-icon .card-bg img { 5348 max-height: 100%; 5349} 5350 5351.resource-widget-card-icon .card-bg::after { 5352 background: transparent; 5353} 5354 5355@media (min-width: 1210px) { 5356 .resource-widget-card-icon .resource { 5357 height: 240px; 5358 } 5359 .resource-widget-card-icon .card-bg { 5360 bottom: 160px; 5361 } 5362 .resource-widget-card-icon .card-info { 5363 height: 160px; 5364 } 5365} 5366 5367@media (max-width: 979px) { 5368 .resource-widget-card-icon .resource { 5369 height: 240px; 5370 } 5371 .resource-widget-card-icon .card-bg { 5372 bottom: 160px; 5373 } 5374 5375 .resource-widget-card-icon .card-info { 5376 height: 160px; 5377 } 5378} 5379 5380/* Truncate card summaries at bounding box and 5381 * and apply ellipsis at lower right */ 5382.ellipsis { 5383 overflow: hidden; 5384 float: right; 5385 line-height: 15px; 5386 width: 100%; } 5387 .ellipsis:before { 5388 content: ""; 5389 float: left; 5390 width: 5px; 5391 height: 100%; } 5392 .ellipsis > *:first-child.text { 5393 float: right; 5394 width: 100% !important; 5395 margin-left: -5px; } 5396 .ellipsis:after { 5397 content: "\02026"; 5398 height: 17px; 5399 padding-bottom: 4px; 5400 box-sizing: content-box; 5401 float: right; 5402 position: relative; 5403 top: -16px; 5404 left: 100%; 5405 width: 4em; 5406 margin-left: -4em; 5407 padding-right: 5px; 5408 background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); 5409 background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white); 5410 background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); } 5411 .ellipsis:after { 5412 font-style: normal; 5413 color: #aaa; 5414 font-size: 13px; 5415 text-align: right; } 5416 5417.resource-card:hover { 5418 cursor: pointer; } 5419 .static .resource-card:hover { 5420 cursor: auto; } 5421 .resource-card:hover .card-bg:after { 5422 opacity: 0; } 5423 .resource-card:hover .play-button { 5424 opacity: .3; } 5425 .resource-card:hover .card-info .description .util { 5426 opacity: 1; } 5427 5428/* Carousel Layout */ 5429/* Carousel styles for landing page */ 5430.resource-carousel-layout { 5431 height: 531px; 5432 margin: 20px 0 20px 0; 5433 padding: 0 !important; 5434 position: relative; 5435 overflow: hidden; } 5436 .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { 5437 display: none; } 5438 .resource-carousel-layout .pagination { 5439 bottom: 97px; 5440 left: auto; 5441 padding-right: 10px; 5442 right: 0; 5443 text-align: right; 5444 width: 16.66666667%; } 5445 .resource-carousel-layout .pagination ul li { 5446 text-indent: 8000px; } 5447 .resource-carousel-layout .frame li { 5448 position: relative; } 5449 .resource-carousel-layout .frame li .card-bg { 5450 bottom: 131px; } 5451 .resource-carousel-layout .frame li .card-info { 5452 height: 131px; 5453 padding: 6px 12px; 5454 top: auto; } 5455 .resource-carousel-layout .frame li .card-info .title { 5456 font-size: 28px; 5457 font-weight: 400; 5458 line-height: 32px; } 5459 .resource-carousel-layout .frame li .card-info .description .text { 5460 height: 40px; } 5461 .resource-carousel-layout .frame li .card-info .description .util { 5462 bottom: 97px; 5463 right: 4px; } 5464 5465/* Stack Layout */ 5466.resource-stack-layout { 5467 display: inline-block; 5468 padding: 0; } 5469 .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { 5470 /*text-transform: uppercase;*/ 5471 color: #898989; 5472 font-size: 17px; 5473 line-height: 23px; 5474 margin-bottom: 6px; } 5475 .resource-stack-layout .section-card { 5476 height: 284px; } 5477 .resource-stack-layout .section-card > .card-bg { 5478 height: 192px; } 5479 .resource-stack-layout .section-card > .card-info { 5480 padding: 4px 12px 6px 12px; 5481 top: 192px; } 5482 .resource-stack-layout .section-card > .card-info .section { 5483 display: none; } 5484 .resource-stack-layout .section-card > .card-info .title { 5485 font-size: 17px; 5486 border-bottom: 1px solid #959595; 5487 padding-bottom: 0px; } 5488 .resource-stack-layout .section-card > .card-info .description { 5489 font-size: 13px; 5490 line-height: 15px; } 5491 .resource-stack-layout .section-card > .card-info .description .text { 5492 height: 30px; } 5493 .resource-stack-layout .related-card { 5494 height: 90px; } 5495 .resource-stack-layout .related-card > .card-bg { 5496 left: 0; 5497 top: 0; 5498 width: 90px; 5499 height: 100%; 5500 position: absolute; 5501 display: block; } 5502 .resource-stack-layout .related-card > .card-info { 5503 left: 90px; 5504 padding: 4px 12px 4px 12px; } 5505 .resource-stack-layout .related-card > .card-info .section { 5506 font-size: 12px; 5507 margin-bottom: 1px; 5508 display: none; } 5509 .resource-stack-layout .related-card > .card-info .title { 5510 font-size: 16px; 5511 margin-bottom: -2px; 5512 white-space: normal; 5513 overflow: visible; 5514 text-overflow: ellipsis; } 5515 .resource-stack-layout .related-card > .card-info .title:after { 5516 content: url(../images/link-out.png); 5517 display: block; } 5518 .resource-stack-layout .related-card > .card-info .description { 5519 display: none; } 5520 .resource-stack-layout .section-card-menu { 5521 /* Flexible height */ 5522 display: block; 5523 height: auto; 5524 width: auto; } 5525 .resource-stack-layout .section-card-menu .card-bg { 5526 height: 155px; 5527 /* Flexible height */ 5528 position: relative; 5529 display: inline-block; 5530 vertical-align: top; } 5531 .resource-stack-layout .section-card-menu .card-info { 5532 padding: 4px 12px 0px 12px; 5533 /* Flexible height */ 5534 position: relative; 5535 left: auto; 5536 top: auto; 5537 right: auto; 5538 bottom: auto; } 5539 .resource-stack-layout .section-card-menu .card-info ul { 5540 list-style: none; 5541 margin: 0; } 5542 .resource-stack-layout .section-card-menu .card-info ul li { 5543 list-style: none; 5544 margin: 0; 5545 padding: 15px 0; 5546 border-top-width: 1px; 5547 border-top-style: solid; 5548 border-top-color: #959595; } 5549 .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 { 5550 color: #333 !important; } 5551 .resource-stack-layout .section-card-menu .card-info ul li:first-child { 5552 border-top: none; } 5553 .resource-stack-layout .section-card-menu .card-info ul li:hover .title:after { 5554 opacity: 1; 5555 -webkit-transition: opacity 0.5s; 5556 transition: opacity 0.5s; } 5557 .resource-stack-layout .section-card-menu .card-info ul li:hover .description { 5558 max-height: 30px; 5559 opacity: 1; 5560 -webkit-transition: max-height 0.5s, opacity 1s; 5561 transition: max-height 0.5s, opacity 1s; } 5562 .resource-stack-layout .section-card-menu .card-info .title { 5563 font-size: 16px; 5564 margin-bottom: -2px; 5565 position: relative; } 5566 .resource-stack-layout .section-card-menu .card-info .title:after { 5567 background: url(../images/stack-arrow-right.png); 5568 content: ''; 5569 opacity: 0; 5570 -webkit-transition: opacity 0.25s; 5571 transition: opacity 0.25s; 5572 position: absolute; 5573 right: 0px; 5574 top: 3px; 5575 width: 10px; 5576 height: 15px; } 5577 .resource-stack-layout .section-card-menu .card-info .title.more { 5578 text-transform: uppercase; 5579 color: #898989; 5580 display: inline-block; } 5581 .resource-stack-layout .section-card-menu .card-info .title.more:after { 5582 background: url(../images/stack-arrow-right.png); 5583 content: ''; 5584 display: block; 5585 position: absolute; 5586 right: -20px; 5587 top: 3px; 5588 width: 10px; 5589 height: 15px; } 5590 .resource-stack-layout .section-card-menu .card-info .description { 5591 max-height: 0px; 5592 opacity: 0; 5593 overflow: hidden; 5594 font-size: 13px; 5595 line-height: 15px; 5596 /* Hover off */ 5597 -webkit-transition: max-height 0.5s, opacity 0.5s; 5598 transition: max-height 0.5s, opacity 0.5s; } 5599 .resource-stack-layout .section-card-menu .card-info .description .text { 5600 height: 30px; } 5601 .resource-stack-layout:after { 5602 content: "."; 5603 display: block; 5604 height: 0; 5605 clear: both; 5606 visibility: hidden; } 5607 5608.resource-card, .resource-card-stack { 5609 margin-bottom: 20px; } 5610 5611.resource-card-row-stack-last { 5612 margin-bottom: 0px !important; } 5613 5614.resource-card-col-stack-last { 5615 margin-bottom: 0px !important; } 5616 5617.resource-card-3x6 { 5618 height: 300px; } 5619 5620.resource-card-3x12 { 5621 height: 620px; } 5622 5623.resource-card-3x18 { 5624 height: 940px; } 5625 5626.resource-card-6x6 { 5627 height: 300px; } 5628 5629.resource-card-6x12 { 5630 height: 620px; } 5631 5632.resource-card-6x18 { 5633 height: 940px; } 5634 5635.resource-card-9x6 { 5636 height: 300px; } 5637 5638.resource-card-9x12 { 5639 height: 620px; } 5640 5641.resource-card-9x18 { 5642 height: 940px; } 5643 5644.resource-card-12x6 { 5645 height: 300px; } 5646 5647.resource-card-12x12 { 5648 height: 620px; } 5649 5650.resource-card-12x18 { 5651 height: 940px; } 5652 5653.resource-card-15x6 { 5654 height: 300px; } 5655 5656.resource-card-15x12 { 5657 height: 620px; } 5658 5659.resource-card-15x18 { 5660 height: 940px; } 5661 5662.resource-card-18x6 { 5663 height: 300px; } 5664 5665.resource-card-18x12 { 5666 height: 620px; } 5667 5668.resource-card-18x18 { 5669 height: 940px; } 5670 5671.resource-card-3x2 { 5672 height: 100px; } 5673 5674.resource-card-3x2x3 { 5675 height: 90px; 5676 margin-bottom: 15px; } 5677 5678.resource-card-3x3 { 5679 height: 150px; } 5680 5681.resource-card-3x3x2 { 5682 height: 142px; 5683 margin-bottom: 16px; } 5684 5685.resource-card-6x2 { 5686 height: 100px; } 5687 5688.resource-card-6x2x3 { 5689 height: 90px; 5690 margin-bottom: 15px; } 5691 5692.resource-card-6x3 { 5693 height: 150px; } 5694 5695.resource-card-6x3x2 { 5696 height: 142px; 5697 margin-bottom: 16px; } 5698 5699.resource-card-9x2 { 5700 height: 100px; } 5701 5702.resource-card-9x2x3 { 5703 height: 90px; 5704 margin-bottom: 15px; } 5705 5706.resource-card-9x3 { 5707 height: 150px; } 5708 5709.resource-card-9x3x2 { 5710 height: 142px; 5711 margin-bottom: 16px; } 5712 5713.resource-card-12x2 { 5714 height: 100px; } 5715 5716.resource-card-12x2x3 { 5717 height: 90px; 5718 margin-bottom: 15px; } 5719 5720.resource-card-12x3 { 5721 height: 150px; } 5722 5723.resource-card-12x3x2 { 5724 height: 142px; 5725 margin-bottom: 16px; } 5726 5727.resource-card-15x2 { 5728 height: 100px; } 5729 5730.resource-card-15x2x3 { 5731 height: 90px; 5732 margin-bottom: 15px; } 5733 5734.resource-card-15x3 { 5735 height: 150px; } 5736 5737.resource-card-15x3x2 { 5738 height: 142px; 5739 margin-bottom: 16px; } 5740 5741.resource-card-18x2 { 5742 height: 100px; } 5743 5744.resource-card-18x2x3 { 5745 height: 90px; 5746 margin-bottom: 15px; } 5747 5748.resource-card-18x3 { 5749 height: 150px; } 5750 5751.resource-card-18x3x2 { 5752 height: 142px; 5753 margin-bottom: 16px; } 5754 5755/* 5756 The following are styles for cards in the flowlayout above, styled by the number of rows they span 5757*/ 5758/* Single row, 2 column items. */ 5759.resource-card-9x6 { 5760 height: 390px; } 5761 5762/* Double row, 1 column items. Eg full width video thumbnails. */ 5763.resource-card-18x12 { 5764 height: 558px; } 5765 5766/* 1/3 row items */ 5767.resource-card-3x2 > .card-bg, 5768.resource-card-6x2 > .card-bg, 5769.resource-card-9x2 > .card-bg, 5770.resource-card-12x2 > .card-bg, 5771.resource-card-15x2 > .card-bg, 5772.resource-card-18x2 > .card-bg { 5773 left: 0; 5774 top: 0; 5775 width: 90px; 5776 height: 100%; 5777 position: absolute; 5778 display: block; 5779} 5780 5781.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 { 5782 height: 100%; 5783 left: 90px; 5784 padding: 6px 12px; 5785 overflow: hidden; 5786} 5787 5788.resource-card-3x2 > .card-info .title, 5789.resource-card-6x2 > .card-info .title, 5790.resource-card-9x2 > .card-info .title, 5791.resource-card-12x2 > .card-info .title, 5792.resource-card-15x2 > .card-info .title, 5793.resource-card-18x2 > .card-info .title { 5794 max-height: 69px; 5795 white-space: normal; 5796} 5797 5798.resource-card-3x2 > .card-info .description, 5799.resource-card-6x2 > .card-info .description, 5800.resource-card-9x2 > .card-info .description, 5801.resource-card-12x2 > .card-info .description, 5802.resource-card-15x2 > .card-info .description, 5803.resource-card-18x2 > .card-info .description { 5804 display: none; 5805} 5806 5807.resource-card-3x2 > .card-info .text, 5808.resource-card-6x2 > .card-info .text, 5809.resource-card-9x2 > .card-info .text, 5810.resource-card-12x2 > .card-info .text, 5811.resource-card-15x2 > .card-info .text, 5812.resource-card-18x2 > .card-info .text { 5813 height: auto; 5814} 5815 5816/* Override to show the description instead of the content section */ 5817.no-section .resource-card-3x2 > .card-info .section, 5818.no-section .resource-card-6x2 > .card-info .section { 5819 display: none; } 5820 5821.no-section .resource-card-3x2 > .card-info .description, 5822.no-section .resource-card-6x2 > .card-info .description { 5823 display: block; } 5824 5825/* 1/2 row items */ 5826.resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 { 5827 height: 160px; } 5828 .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 { 5829 left: 0; 5830 top: 0; 5831 width: 90px; 5832 height: 100%; 5833 position: absolute; 5834 display: block; } 5835 .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 { 5836 height: 100%; 5837 left: 90px; 5838 padding: 6px 12px; } 5839 .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 { 5840 display: none; } 5841 .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 { 5842 max-height: 92px; 5843 white-space: normal; } 5844 .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 { 5845 height: auto; } 5846 .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 { 5847 display: none; } 5848 5849/* placement of plusone */ 5850.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 { 5851 bottom: 2px; } 5852 5853.resource-card-18x12 > .card-info .description .util { 5854 bottom: 2px; } 5855 5856/* Overrides for col-16 6x6 cards linking to local content on landing pages. 5857 Suppresses "section". */ 5858.landing .card-info .section { 5859 display: none; } 5860 5861/* 5862 Generate a resource stack layout for a 3 column widget spanning 16 grid cols 5863*/ 5864.resource-stack-layout.col-16 { 5865 margin: 0 -14px 0 0; 5866 width: 954px; } 5867 .resource-stack-layout.col-16 .resource-card-stack { 5868 margin: 0 14px 0 0; 5869 width: 304px; } 5870 5871/* Example of card menu tinting */ 5872.resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after { 5873 background: rgba(126, 55, 148, 0.4) !important; } 5874 5875.resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon { 5876 background-color: #7e3794 !important; } 5877 5878.resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { 5879 border-top-color: #7e3794 !important; } 5880 5881/* tinting for stacks */ 5882div.jd-descr > .resource-widget[data-section=distribute\/tools] 5883.section-card-menu .card-info ul li { 5884 border-top-color: #7e3794 !important; } 5885 5886/* Show more/less */ 5887.dac-show-more, 5888.dac-show-less { 5889 display: none !important; } 5890 5891.dac-has-more .dac-show-more { 5892 display: inline-block !important; } 5893 5894.dac-has-less .dac-show-less { 5895 display: inline-block !important; } 5896 5897.dac-fab, .dac-button-social, .button, .landing-button, 5898.dac-button { 5899 background: transparent; 5900 border: 0; 5901 border-radius: 3px; 5902 box-sizing: border-box; 5903 color: currentColor; 5904 cursor: pointer; 5905 display: inline-block; 5906 font-weight: 500; 5907 font-size: 14px; 5908 font-style: inherit; 5909 font-variant: inherit; 5910 font-family: inherit; 5911 letter-spacing: .5px; 5912 line-height: 24px; 5913 margin: 6px 16px 6px 0; 5914 min-width: 88px; 5915 outline: 0; 5916 padding: 6px 12px; 5917 position: relative; 5918 text-align: center; 5919 text-decoration: none; 5920 text-transform: uppercase; 5921 -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); 5922 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); 5923 -webkit-user-select: none; 5924 -moz-user-select: none; 5925 -ms-user-select: none; 5926 user-select: none; 5927 white-space: nowrap; } 5928 5929.button, .landing-button, 5930.dac-button.dac-raised { 5931 background-color: #FAFAFA; 5932 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); } 5933 5934.dac-button.dac-raised.dac-primary, .landing-secondary, .button { 5935 background-color: #039bef; } 5936 .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { 5937 background-color: #0288d1; } 5938 .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { 5939 background-color: #0277bd; } 5940 .dac-button.dac-raised.dac-primary.disabled, .button.disabled { 5941 background-color: #bbb; } 5942 5943.dac-button.dac-raised.dac-red, .landing-primary { 5944 background-color: #bf3722; } 5945 .dac-button.dac-raised.dac-red:hover, .landing-primary:hover { 5946 background-color: #9c2d1c; } 5947 .dac-button.dac-raised.dac-red:active, .landing-primary:active { 5948 background-color: #822517; } 5949 5950.dac-button.dac-raised.dac-green, .landing-button.green { 5951 background-color: #90c653; } 5952 .dac-button.dac-raised.dac-green:hover, .landing-button.green:hover { 5953 background-color: #79b03b; } 5954 .dac-button.dac-raised.dac-green:active, .landing-button.green:active { 5955 background-color: #699933; } 5956 5957.dac-button.dac-raised.dac-primary, .landing-secondary, .button, 5958.dac-button.dac-raised.dac-red, 5959.landing-primary, 5960.dac-button.dac-raised.dac-green, 5961.landing-button.green { 5962 color: #fff; } 5963 5964.dac-button.dac-large, .landing-button { 5965 padding: 12px 24px; } 5966 5967.landing-button-wrap { 5968 float: left; 5969 margin-right: 40px; 5970 width: auto; 5971} 5972 5973.dac-fab, .dac-button-social { 5974 background: #fff; 5975 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 5976 border-radius: 50%; 5977 height: 36px; 5978 line-height: 36px; 5979 margin: 0; 5980 min-width: 0; 5981 overflow: hidden; 5982 padding: 0; 5983 vertical-align: middle; 5984 width: 36px; } 5985 .dac-fab:hover, .dac-button-social:hover, 5986 a:hover > .dac-fab, 5987 a:hover > .dac-button-social { 5988 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); } 5989 .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 { 5990 margin-top: -2px; } 5991 .dac-fab.dac-primary, .dac-primary.dac-button-social { 5992 background: #00c7a0; } 5993 .dac-fab.dac-large, .dac-large.dac-button-social { 5994 height: 54px; 5995 line-height: 54px; 5996 width: 54px; } 5997 5998.dac-button-social { 5999 background: #ccc; 6000 box-shadow: none; 6001 position: relative; 6002 overflow: hidden; } 6003 .dac-button-social::after { 6004 background: rgba(0, 0, 0, 0.2); 6005 border-radius: 50%; 6006 bottom: 0; 6007 content: ''; 6008 display: block; 6009 left: 0; 6010 opacity: 0; 6011 position: absolute; 6012 right: 0; 6013 top: 0; 6014 -webkit-transition: opacity .3s; 6015 transition: opacity .3s; } 6016 .dac-button-social:hover { 6017 box-shadow: none; } 6018 .dac-button-social:active::after { 6019 opacity: 1; } 6020 .dac-button-social:focus.dac-rss, .dac-button-social:hover.dac-rss { 6021 background: #ff9800; } 6022 .dac-button-social:focus.dac-youtube, .dac-button-social:hover.dac-youtube { 6023 background: #f44336; } 6024 .dac-button-social:focus.dac-gplus, .dac-button-social:hover.dac-gplus { 6025 background: #f44336; } 6026 .dac-button-social:focus.dac-twitter, .dac-button-social:hover.dac-twitter { 6027 background: #55acee; } 6028 6029.dac-action { 6030 display: inline-block; 6031 margin: 0 16px; } 6032 .dac-action-link { 6033 color: inherit; 6034 font-size: 24px; 6035 font-weight: 300; 6036 line-height: 50px; 6037 -webkit-transition: opacity .3s; 6038 transition: opacity .3s; } 6039 .dac-action-link:hover { 6040 color: inherit; 6041 opacity: .54; } 6042 .dac-action-sprite { 6043 margin-left: -12px; 6044 margin-right: -8px; } 6045 .dac-actions { 6046 list-style-type: none; 6047 margin: 0; 6048 padding-bottom: 24px; 6049 padding-top: 24px; 6050 text-align: center; } 6051 @media (max-width: 719px) { 6052 .dac-actions { 6053 text-align: left; } } 6054 @media (max-width: 719px) { 6055 .dac-action { 6056 display: block; 6057 margin: 0; } } 6058 6059.dac-scroll-button { 6060 height: 54px; 6061 line-height: 54px; 6062 margin: 0; 6063 position: absolute; 6064 right: 0; 6065 top: -27px; 6066 width: 54px; 6067 z-index: 1; } 6068 @media (max-width: 719px) { 6069 .dac-scroll-button { 6070 display: none; } } 6071 6072/* Footer component */ 6073.dac-footer { 6074 background-color: #fff; 6075 border-top: 1px solid #f0f0f0; 6076 clear: both; 6077 color: #999; 6078 font-size: 12px; 6079 margin-top: 96px; 6080 padding-bottom: 20px; 6081 position: relative; 6082} 6083 6084.dac-footer a { 6085 color: #999; 6086} 6087 6088.dac-footer p { 6089 margin: 7px 0 0; 6090} 6091 6092.dac-footer-main { 6093 padding: 30px 0; 6094} 6095 6096.dac-footer-reachout { 6097 text-align: right; 6098} 6099 6100.dac-footer-contact, 6101.dac-footer-social { 6102 display: inline-block; 6103} 6104 6105.dac-footer .dac-footer-getnews, 6106.dac-footer .dac-footer-contact-link { 6107 color: #000; 6108 cursor: pointer; 6109 font-size: 20px; 6110 font-weight: 300; 6111 margin: 8px 0; 6112 vertical-align: middle; 6113} 6114 6115.dac-footer .dac-footer-contact-link, 6116.dac-footer .dac-footer-social-link { 6117 margin-left: 16px; 6118 margin-right: 0; 6119} 6120 6121.dac-footer-getnews > .dac-fab, .dac-footer-getnews > .dac-button-social { 6122 margin-left: 4px; 6123} 6124 6125.dac-footer-separator { 6126 background: #f0f0f0; 6127 margin: 0 0 12px; 6128} 6129 6130.dac-footer-links { 6131 float: left; 6132 margin: 10px 0 60px; 6133 width: 50%; 6134} 6135 6136.dac-footer-links a + a:before { 6137 content: '|'; 6138 cursor: default; 6139 margin: 0 10px 0 8px; 6140} 6141 6142.devsite-utility-footer-language { 6143 float: right; 6144 margin: 10px 0 60px; 6145 width: 50%; 6146} 6147 6148.dac-footer .locales { 6149 float: right; 6150 margin: 0; 6151} 6152 6153.dac-footer .locales select { 6154 background-color: #f0f0f0; 6155 border-radius: 3px; 6156 font-size: 12px; 6157 height: auto; 6158 margin-top: -2px; 6159 padding: 8px 12px; 6160 width: 146px; 6161} 6162 6163.dac-footer.dac-landing { 6164 margin-top: 0; 6165 border-top: 0; 6166} 6167 6168@media (max-width: 719px) { 6169 .dac-footer-reachout { 6170 text-align: left; 6171 } 6172 6173 .dac-footer-social { 6174 display: block; 6175 } 6176 6177 .dac-footer-social-link, 6178 .dac-footer-contact-link { 6179 display: inline-block; 6180 } 6181 6182 .dac-footer .dac-footer-contact-link, 6183 .dac-footer .dac-footer-social-link { 6184 margin-left: 0; 6185 margin-right: 16px; 6186 } 6187 6188 .dac-footer-links { 6189 display: block; 6190 float: none; 6191 width: 100%; 6192 } 6193 6194 .devsite-utility-footer-language { 6195 float: none; 6196 margin: 0 0 20px; 6197 width: 100%; 6198 } 6199 6200 .dac-footer .locales { 6201 display: block; 6202 float: none; 6203 margin-top: 15px; 6204 } 6205} 6206 6207/* ============================================================================= 6208 Columns 6209 ========================================================================== */ 6210.wrap { 6211 margin: 0 auto; 6212 max-width: 940px; 6213 clear: both; 6214} 6215 6216.dac-fullscreen-mode .wrap { 6217 max-width: none; 6218} 6219 6220.dac-fullscreen-mode .dac-search-open .wrap { 6221 max-width: 940px; 6222} 6223 6224.cols { 6225 margin-left: -10px; 6226 margin-right: -10px; 6227 /** 6228 * For modern browsers 6229 * 1. The space content is one way to avoid an Opera bug when the 6230 * contenteditable attribute is included anywhere else in the document. 6231 * Otherwise it causes space to appear at the top and bottom of elements 6232 * that are clearfixed. 6233 * 2. The use of `table` rather than `block` is only necessary if using 6234 * `:before` to contain the top-margins of child elements. 6235 */ } 6236 .cols:before, .cols:after { 6237 content: ' '; 6238 /* 1 */ 6239 display: table; 6240 /* 2 */ } 6241 .cols:after { 6242 clear: both; } 6243 6244[class*=col-] { 6245 box-sizing: border-box; 6246 float: left; 6247 min-height: 1px; 6248 padding-left: 10px; 6249 padding-right: 10px; 6250 position: relative; } 6251 6252.col-1 { 6253 width: 6.25%; } 6254 6255.col-2 { 6256 width: 12.5%; } 6257 6258.col-3 { 6259 width: 18.75%; } 6260 6261.col-4 { 6262 width: 25%; } 6263 6264.col-5 { 6265 width: 31.25%; } 6266 6267.col-6 { 6268 width: 37.5%; } 6269 6270.col-7 { 6271 width: 43.75%; } 6272 6273.col-8 { 6274 width: 50%; } 6275 6276.col-9 { 6277 width: 56.25%; } 6278 6279.col-10 { 6280 width: 62.5%; } 6281 6282.col-11 { 6283 width: 68.75%; } 6284 6285.col-12 { 6286 width: 75%; } 6287 6288.col-13 { 6289 width: 81.25%; } 6290 6291.col-14 { 6292 width: 87.5%; } 6293 6294.col-15 { 6295 width: 93.75%; } 6296 6297.col-16 { 6298 width: 100%; } 6299 6300.col-13 .col-1 { 6301 width: 7.69230769%; } 6302 6303.col-13 .col-2 { 6304 width: 15.38461538%; } 6305 6306.col-13 .col-3 { 6307 width: 23.07692308%; } 6308 6309.col-13 .col-4 { 6310 width: 30.76923077%; } 6311 6312.col-13 .col-5 { 6313 width: 38.46153846%; } 6314 6315.col-13 .col-6 { 6316 width: 46.15384615%; } 6317 6318.col-13 .col-7 { 6319 width: 53.84615385%; } 6320 6321.col-13 .col-8 { 6322 width: 61.53846154%; } 6323 6324.col-13 .col-9 { 6325 width: 69.23076923%; } 6326 6327.col-13 .col-10 { 6328 width: 76.92307692%; } 6329 6330.col-13 .col-11 { 6331 width: 84.61538462%; } 6332 6333.col-13 .col-12 { 6334 width: 92.30769231%; } 6335 6336.col-13 .col-13 { 6337 width: 100%; } 6338 6339.col-12 .col-1 { 6340 width: 8.33333333%; } 6341 6342.col-12 .col-2 { 6343 width: 16.66666667%; } 6344 6345.col-12 .col-3 { 6346 width: 25%; } 6347 6348.col-12 .col-4 { 6349 width: 33.33333333%; } 6350 6351.col-12 .col-5 { 6352 width: 41.66666667%; } 6353 6354.col-12 .col-6 { 6355 width: 50%; } 6356 6357.col-12 .col-7 { 6358 width: 58.33333333%; } 6359 6360.col-12 .col-8 { 6361 width: 66.66666667%; } 6362 6363.col-12 .col-9 { 6364 width: 75%; } 6365 6366.col-12 .col-10 { 6367 width: 83.33333333%; } 6368 6369.col-12 .col-11 { 6370 width: 91.66666667%; } 6371 6372.col-12 .col-12 { 6373 width: 100%; } 6374 6375.col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 { 6376 width: 100%; } 6377 6378.col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 { 6379 width: 50%; } 6380 6381.col-1of3, .col-2of6, .col-4of12 { 6382 width: 33.33333333%; } 6383 6384.col-2of3, .col-4of6, .col-8of12 { 6385 width: 66.66666667%; } 6386 6387.col-1of4, .col-2of8, .col-3of12, .col-4of16 { 6388 width: 25%; } 6389 6390.col-3of4, .col-6of8, .col-9of12, .col-12of16 { 6391 width: 75%; } 6392 6393.col-1of5, .col-2of10 { 6394 width: 20%; } 6395 6396.col-2of5, .col-4of10 { 6397 width: 40%; } 6398 6399.col-3of5, .col-6of10 { 6400 width: 60%; } 6401 6402.col-4of5, .col-8of10 { 6403 width: 80%; } 6404 6405.col-1of6, .col-2of12 { 6406 width: 16.66666667%; } 6407 6408.col-5of6, .col-10of12 { 6409 width: 83.33333333%; } 6410 6411.col-1of8, .col-2of16 { 6412 width: 12.5%; } 6413 6414.col-3of8, .col-6of16 { 6415 width: 37.5%; } 6416 6417.col-5of8, .col-10of16 { 6418 width: 62.5%; } 6419 6420.col-7of8, .col-14of16 { 6421 width: 87.5%; } 6422 6423.col-1of10 { 6424 width: 10%; } 6425 6426.col-3of10 { 6427 width: 30%; } 6428 6429.col-7of10 { 6430 width: 70%; } 6431 6432.col-9of10 { 6433 width: 90%; } 6434 6435.col-1of12 { 6436 width: 8.33333333%; } 6437 6438.col-5of12 { 6439 width: 41.66666667%; } 6440 6441.col-7of12 { 6442 width: 58.33333333%; } 6443 6444.col-11of12 { 6445 width: 91.66666667%; } 6446 6447.col-1of16 { 6448 width: 6.25%; } 6449 6450.col-3of16 { 6451 width: 18.75%; } 6452 6453.col-5of16 { 6454 width: 31.25%; } 6455 6456.col-7of16 { 6457 width: 43.75%; } 6458 6459.col-9of16 { 6460 width: 56.25%; } 6461 6462.col-11of16 { 6463 width: 68.75%; } 6464 6465.col-13of16 { 6466 width: 81.25%; } 6467 6468.col-15of16 { 6469 width: 93.75%; } 6470 6471.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 { 6472 left: -100%; } 6473 6474.col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 { 6475 left: -50%; } 6476 6477.col-pull-1of3, .col-pull-2of6, .col-pull-4of12 { 6478 left: -33.33333333%; } 6479 6480.col-pull-2of3, .col-pull-4of6, .col-pull-8of12 { 6481 left: -66.66666667%; } 6482 6483.col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 { 6484 left: -25%; } 6485 6486.col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 { 6487 left: -75%; } 6488 6489.col-pull-1of5, .col-pull-2of10 { 6490 left: -20%; } 6491 6492.col-pull-2of5, .col-pull-4of10 { 6493 left: -40%; } 6494 6495.col-pull-3of5, .col-pull-6of10 { 6496 left: -60%; } 6497 6498.col-pull-4of5, .col-pull-8of10 { 6499 left: -80%; } 6500 6501.col-pull-1of6, .col-pull-2of12 { 6502 left: -16.66666667%; } 6503 6504.col-pull-5of6, .col-pull-10of12 { 6505 left: -83.33333333%; } 6506 6507.col-pull-1of8, .col-pull-2of16 { 6508 left: -12.5%; } 6509 6510.col-pull-3of8, .col-pull-6of16 { 6511 left: -37.5%; } 6512 6513.col-pull-5of8, .col-pull-10of16 { 6514 left: -62.5%; } 6515 6516.col-pull-7of8, .col-pull-14of16 { 6517 left: -87.5%; } 6518 6519.col-pull-1of10 { 6520 left: -10%; } 6521 6522.col-pull-3of10 { 6523 left: -30%; } 6524 6525.col-pull-7of10 { 6526 left: -70%; } 6527 6528.col-pull-9of10 { 6529 left: -90%; } 6530 6531.col-pull-1of12 { 6532 left: -8.33333333%; } 6533 6534.col-pull-5of12 { 6535 left: -41.66666667%; } 6536 6537.col-pull-7of12 { 6538 left: -58.33333333%; } 6539 6540.col-pull-11of12 { 6541 left: -91.66666667%; } 6542 6543.col-pull-1of16 { 6544 left: -6.25%; } 6545 6546.col-pull-3of16 { 6547 left: -18.75%; } 6548 6549.col-pull-5of16 { 6550 left: -31.25%; } 6551 6552.col-pull-7of16 { 6553 left: -43.75%; } 6554 6555.col-pull-9of16 { 6556 left: -56.25%; } 6557 6558.col-pull-11of16 { 6559 left: -68.75%; } 6560 6561.col-pull-13of16 { 6562 left: -81.25%; } 6563 6564.col-pull-15of16 { 6565 left: -93.75%; } 6566 6567.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 { 6568 left: 100%; } 6569 6570.col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 { 6571 left: 50%; } 6572 6573.col-push-1of3, .col-push-2of6, .col-push-4of12 { 6574 left: 33.33333333%; } 6575 6576.col-push-2of3, .col-push-4of6, .col-push-8of12 { 6577 left: 66.66666667%; } 6578 6579.col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 { 6580 left: 25%; } 6581 6582.col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 { 6583 left: 75%; } 6584 6585.col-push-1of5, .col-push-2of10 { 6586 left: 20%; } 6587 6588.col-push-2of5, .col-push-4of10 { 6589 left: 40%; } 6590 6591.col-push-3of5, .col-push-6of10 { 6592 left: 60%; } 6593 6594.col-push-4of5, .col-push-8of10 { 6595 left: 80%; } 6596 6597.col-push-1of6, .col-push-2of12 { 6598 left: 16.66666667%; } 6599 6600.col-push-5of6, .col-push-10of12 { 6601 left: 83.33333333%; } 6602 6603.col-push-1of8, .col-push-2of16 { 6604 left: 12.5%; } 6605 6606.col-push-3of8, .col-push-6of16 { 6607 left: 37.5%; } 6608 6609.col-push-5of8, .col-push-10of16 { 6610 left: 62.5%; } 6611 6612.col-push-7of8, .col-push-14of16 { 6613 left: 87.5%; } 6614 6615.col-push-1of10 { 6616 left: 10%; } 6617 6618.col-push-3of10 { 6619 left: 30%; } 6620 6621.col-push-7of10 { 6622 left: 70%; } 6623 6624.col-push-9of10 { 6625 left: 90%; } 6626 6627.col-push-1of12 { 6628 left: 8.33333333%; } 6629 6630.col-push-5of12 { 6631 left: 41.66666667%; } 6632 6633.col-push-7of12 { 6634 left: 58.33333333%; } 6635 6636.col-push-11of12 { 6637 left: 91.66666667%; } 6638 6639.col-push-1of16 { 6640 left: 6.25%; } 6641 6642.col-push-3of16 { 6643 left: 18.75%; } 6644 6645.col-push-5of16 { 6646 left: 31.25%; } 6647 6648.col-push-7of16 { 6649 left: 43.75%; } 6650 6651.col-push-9of16 { 6652 left: 56.25%; } 6653 6654.col-push-11of16 { 6655 left: 68.75%; } 6656 6657.col-push-13of16 { 6658 left: 81.25%; } 6659 6660.col-push-15of16 { 6661 left: 93.75%; } 6662 6663@media (max-width: 959px) and (min-width: 720px) { 6664 .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 { 6665 width: 100%; } 6666 .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 { 6667 width: 50%; } 6668 .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 { 6669 width: 33.33333333%; } 6670 .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 { 6671 width: 66.66666667%; } 6672 .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 { 6673 width: 25%; } 6674 .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 { 6675 width: 75%; } 6676 .col-tablet-1of5, .col-tablet-2of10 { 6677 width: 20%; } 6678 .col-tablet-2of5, .col-tablet-4of10 { 6679 width: 40%; } 6680 .col-tablet-3of5, .col-tablet-6of10 { 6681 width: 60%; } 6682 .col-tablet-4of5, .col-tablet-8of10 { 6683 width: 80%; } 6684 .col-tablet-1of6, .col-tablet-2of12 { 6685 width: 16.66666667%; } 6686 .col-tablet-5of6, .col-tablet-10of12 { 6687 width: 83.33333333%; } 6688 .col-tablet-1of8, .col-tablet-2of16 { 6689 width: 12.5%; } 6690 .col-tablet-3of8, .col-tablet-6of16 { 6691 width: 37.5%; } 6692 .col-tablet-5of8, .col-tablet-10of16 { 6693 width: 62.5%; } 6694 .col-tablet-7of8, .col-tablet-14of16 { 6695 width: 87.5%; } 6696 .col-tablet-1of10 { 6697 width: 10%; } 6698 .col-tablet-3of10 { 6699 width: 30%; } 6700 .col-tablet-7of10 { 6701 width: 70%; } 6702 .col-tablet-9of10 { 6703 width: 90%; } 6704 .col-tablet-1of12 { 6705 width: 8.33333333%; } 6706 .col-tablet-5of12 { 6707 width: 41.66666667%; } 6708 .col-tablet-7of12 { 6709 width: 58.33333333%; } 6710 .col-tablet-11of12 { 6711 width: 91.66666667%; } 6712 .col-tablet-1of16 { 6713 width: 6.25%; } 6714 .col-tablet-3of16 { 6715 width: 18.75%; } 6716 .col-tablet-5of16 { 6717 width: 31.25%; } 6718 .col-tablet-7of16 { 6719 width: 43.75%; } 6720 .col-tablet-9of16 { 6721 width: 56.25%; } 6722 .col-tablet-11of16 { 6723 width: 68.75%; } 6724 .col-tablet-13of16 { 6725 width: 81.25%; } 6726 .col-tablet-15of16 { 6727 width: 93.75%; } 6728 .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 { 6729 left: -100%; } 6730 .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 { 6731 left: -50%; } 6732 .col-tablet-pull-1of3, .col-tablet-pull-2of6, .col-tablet-pull-4of12 { 6733 left: -33.33333333%; } 6734 .col-tablet-pull-2of3, .col-tablet-pull-4of6, .col-tablet-pull-8of12 { 6735 left: -66.66666667%; } 6736 .col-tablet-pull-1of4, .col-tablet-pull-2of8, .col-tablet-pull-3of12, .col-tablet-pull-4of16 { 6737 left: -25%; } 6738 .col-tablet-pull-3of4, .col-tablet-pull-6of8, .col-tablet-pull-9of12, .col-tablet-pull-12of16 { 6739 left: -75%; } 6740 .col-tablet-pull-1of5, .col-tablet-pull-2of10 { 6741 left: -20%; } 6742 .col-tablet-pull-2of5, .col-tablet-pull-4of10 { 6743 left: -40%; } 6744 .col-tablet-pull-3of5, .col-tablet-pull-6of10 { 6745 left: -60%; } 6746 .col-tablet-pull-4of5, .col-tablet-pull-8of10 { 6747 left: -80%; } 6748 .col-tablet-pull-1of6, .col-tablet-pull-2of12 { 6749 left: -16.66666667%; } 6750 .col-tablet-pull-5of6, .col-tablet-pull-10of12 { 6751 left: -83.33333333%; } 6752 .col-tablet-pull-1of8, .col-tablet-pull-2of16 { 6753 left: -12.5%; } 6754 .col-tablet-pull-3of8, .col-tablet-pull-6of16 { 6755 left: -37.5%; } 6756 .col-tablet-pull-5of8, .col-tablet-pull-10of16 { 6757 left: -62.5%; } 6758 .col-tablet-pull-7of8, .col-tablet-pull-14of16 { 6759 left: -87.5%; } 6760 .col-tablet-pull-1of10 { 6761 left: -10%; } 6762 .col-tablet-pull-3of10 { 6763 left: -30%; } 6764 .col-tablet-pull-7of10 { 6765 left: -70%; } 6766 .col-tablet-pull-9of10 { 6767 left: -90%; } 6768 .col-tablet-pull-1of12 { 6769 left: -8.33333333%; } 6770 .col-tablet-pull-5of12 { 6771 left: -41.66666667%; } 6772 .col-tablet-pull-7of12 { 6773 left: -58.33333333%; } 6774 .col-tablet-pull-11of12 { 6775 left: -91.66666667%; } 6776 .col-tablet-pull-1of16 { 6777 left: -6.25%; } 6778 .col-tablet-pull-3of16 { 6779 left: -18.75%; } 6780 .col-tablet-pull-5of16 { 6781 left: -31.25%; } 6782 .col-tablet-pull-7of16 { 6783 left: -43.75%; } 6784 .col-tablet-pull-9of16 { 6785 left: -56.25%; } 6786 .col-tablet-pull-11of16 { 6787 left: -68.75%; } 6788 .col-tablet-pull-13of16 { 6789 left: -81.25%; } 6790 .col-tablet-pull-15of16 { 6791 left: -93.75%; } 6792 .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 { 6793 left: 100%; } 6794 .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 { 6795 left: 50%; } 6796 .col-tablet-push-1of3, .col-tablet-push-2of6, .col-tablet-push-4of12 { 6797 left: 33.33333333%; } 6798 .col-tablet-push-2of3, .col-tablet-push-4of6, .col-tablet-push-8of12 { 6799 left: 66.66666667%; } 6800 .col-tablet-push-1of4, .col-tablet-push-2of8, .col-tablet-push-3of12, .col-tablet-push-4of16 { 6801 left: 25%; } 6802 .col-tablet-push-3of4, .col-tablet-push-6of8, .col-tablet-push-9of12, .col-tablet-push-12of16 { 6803 left: 75%; } 6804 .col-tablet-push-1of5, .col-tablet-push-2of10 { 6805 left: 20%; } 6806 .col-tablet-push-2of5, .col-tablet-push-4of10 { 6807 left: 40%; } 6808 .col-tablet-push-3of5, .col-tablet-push-6of10 { 6809 left: 60%; } 6810 .col-tablet-push-4of5, .col-tablet-push-8of10 { 6811 left: 80%; } 6812 .col-tablet-push-1of6, .col-tablet-push-2of12 { 6813 left: 16.66666667%; } 6814 .col-tablet-push-5of6, .col-tablet-push-10of12 { 6815 left: 83.33333333%; } 6816 .col-tablet-push-1of8, .col-tablet-push-2of16 { 6817 left: 12.5%; } 6818 .col-tablet-push-3of8, .col-tablet-push-6of16 { 6819 left: 37.5%; } 6820 .col-tablet-push-5of8, .col-tablet-push-10of16 { 6821 left: 62.5%; } 6822 .col-tablet-push-7of8, .col-tablet-push-14of16 { 6823 left: 87.5%; } 6824 .col-tablet-push-1of10 { 6825 left: 10%; } 6826 .col-tablet-push-3of10 { 6827 left: 30%; } 6828 .col-tablet-push-7of10 { 6829 left: 70%; } 6830 .col-tablet-push-9of10 { 6831 left: 90%; } 6832 .col-tablet-push-1of12 { 6833 left: 8.33333333%; } 6834 .col-tablet-push-5of12 { 6835 left: 41.66666667%; } 6836 .col-tablet-push-7of12 { 6837 left: 58.33333333%; } 6838 .col-tablet-push-11of12 { 6839 left: 91.66666667%; } 6840 .col-tablet-push-1of16 { 6841 left: 6.25%; } 6842 .col-tablet-push-3of16 { 6843 left: 18.75%; } 6844 .col-tablet-push-5of16 { 6845 left: 31.25%; } 6846 .col-tablet-push-7of16 { 6847 left: 43.75%; } 6848 .col-tablet-push-9of16 { 6849 left: 56.25%; } 6850 .col-tablet-push-11of16 { 6851 left: 68.75%; } 6852 .col-tablet-push-13of16 { 6853 left: 81.25%; } 6854 .col-tablet-push-15of16 { 6855 left: 93.75%; } } 6856 6857.col-3-wide { 6858 width: 33.3333333333%; } 6859 6860@media (max-width: 719px) { 6861 /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */ 6862[class*=col-], 6863 .col-12 [class*=col-], 6864 .col-13 [class*=col-] { 6865 float: none; 6866 left: 0; 6867 width: auto; 6868} } 6869 6870/** 6871 * Fades out an element. 6872 * Applies visibility hidden when the transition is finished. 6873 * 6874 * Use opacity: 1; to show the element. 6875 */ 6876/* Header component */ 6877.dac-header { 6878 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); 6879 box-sizing: border-box; 6880 background: #6ab344; 6881 height: 64px; 6882 margin: 0; 6883 left: 0; 6884 position: fixed; 6885 right: 0; 6886 top: 0; 6887 -webkit-transition: background 200ms; 6888 transition: background 200ms; 6889 z-index: 61; 6890} 6891 6892.dac-ndk .dac-header { 6893 background: #00bcd4; 6894} 6895 6896.dac-studio .dac-header { 6897 background: #424242; 6898} 6899 6900.dac-search-mode .dac-header { 6901 background: #b0bec5; 6902 -webkit-transition: background 200ms; 6903 transition: background 200ms; 6904} 6905 6906.dac-search-mode .dac-header-logo, 6907 .dac-search-mode .dac-header-console-btn { 6908 opacity: 0; 6909 visibility: hidden; 6910 -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear; 6911 transition: visibility 0s linear 200ms, opacity 200ms linear; 6912} 6913 6914.dac-header-logo { 6915 display: block; 6916 font-size: 20px; 6917 font-weight: 400; 6918 float: left; 6919 letter-spacing: .3px; 6920 line-height: 36px; 6921 opacity: 1; 6922 padding: 13px 48px 15px 0; 6923} 6924 6925.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus { 6926 color: #fff; 6927} 6928 6929@media (min-width: 980px) { 6930 .dac-header-logo { 6931 border-right: 1px solid rgba(0, 0, 0, 0.1); 6932 } 6933} 6934 6935@media (min-width: 720px) and (max-width: 979px) { 6936 .dac-header-logo { 6937 padding-right: 10px; 6938 } 6939} 6940 6941.dac-header-logo-image { 6942 margin-right: 5px; 6943 vertical-align: top; 6944} 6945 6946.dac-header-tabs { 6947 list-style: none; 6948 margin: 0 10px; 6949 display: none; 6950 opacity: 1; 6951 -webkit-transition: opacity 200ms linear 200ms; 6952 transition: opacity 200ms linear 200ms; 6953} 6954 6955@media (min-width: 720px) { 6956 .dac-header-tabs { 6957 display: inline-block; 6958 } 6959 6960 /* Do not show nav toggle and up-nav button for left nav, 6961 when header tabs are visible (when no sub navigation) */ 6962 body.no-subnav .dac-nav-back-button { 6963 display:none; 6964 } 6965 body.no-subnav .dac-nav-sub { 6966 top: 0 !important; 6967 } 6968} 6969 6970.dac-header-tabs li { 6971 display: inline-block; 6972} 6973 6974.dac-header-tab { 6975 display: inline-block; 6976 line-height: 64px; 6977 height: 64px; 6978 padding: 0 9px; 6979 color: #fff; 6980 color: rgba(255, 255, 255, 0.7); 6981 font-size: 14px; 6982 text-transform: uppercase; 6983 font-weight: 500; 6984} 6985 6986.dac-header-tab:hover, 6987.dac-header-tab:focus { 6988 color: #fff; 6989} 6990 6991.dac-header-tab.selected { 6992 border-bottom: 4px solid #fff; 6993 height: 60px; 6994 color: #fff; 6995} 6996 6997.dac-search-mode .dac-header-tabs { 6998 opacity: 0; 6999 -webkit-transition: opacity 0ms linear 0ms; 7000 transition: opacity 0ms linear 0ms; 7001} 7002 7003.dac-header-console-btn { 7004 border-radius: 3px; 7005 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); 7006 float: right; 7007 font-size: 14px; 7008 font-weight: 500; 7009 line-height: 28px; 7010 margin: 13px 13px 12px 24px; 7011 opacity: 1; 7012 padding: 4px 10px; 7013 position: relative; 7014 text-transform: uppercase; 7015 -webkit-transition: box-shadow .2s; 7016 transition: box-shadow .2s; 7017 z-index: 60; 7018} 7019 7020@media (min-width: 720px) and (max-width: 979px) { 7021 .dac-header-console-btn { 7022 display: none; 7023 } 7024} 7025 7026.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 { 7027 margin-right: 5px; 7028} 7029 7030.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus { 7031 color: #fff; 7032} 7033 7034.dac-header-console-btn:hover { 7035 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); 7036} 7037 7038.dac-header-console-btn:focus { 7039 background: rgba(63, 81, 181, 0.1); 7040 outline: 0; 7041} 7042 7043.dac-studio .dac-header-console-btn { 7044 color:#fff; 7045 background:rgba(255, 255, 255, 0.3); 7046} 7047.dac-studio .dac-header-console-btn:hover { 7048 background:rgba(255, 255, 255, 0.5); 7049} 7050.dac-studio .dac-header-console-btn:focus { 7051 background:rgba(255, 255, 255, 0.7); 7052 color:#000; 7053} 7054 7055@media (max-width: 719px) { 7056 .dac-header { 7057 text-align: center; 7058 } 7059 7060 .dac-header-logo { 7061 border-right: 0; 7062 display: inline-block; 7063 margin-right: 0; 7064 float: none; 7065 padding-left: 0; 7066 padding-right: 0; 7067 } 7068 7069 .dac-header-console-btn { 7070 display: none; 7071 } 7072} 7073 7074/* Header Breadcrumbs component */ 7075.dac-header-crumbs { 7076 list-style-type: none; 7077 margin: 23px 0 -13px 0; 7078 display: inline-block; 7079} 7080 7081body.no-crumbs .dac-header-crumbs { 7082 display:none; 7083} 7084 7085.dac-header-crumbs.dac-has-content { 7086 opacity: 1; 7087} 7088 7089.dac-header-crumbs-item { 7090 float: left; 7091 position: relative; 7092 margin: 0; 7093 padding: 0; 7094} 7095 7096.dac-header-crumbs-item i, .dac-header-crumbs-item .dac-nav-link-forward { 7097 display: none; 7098} 7099 7100.dac-header-crumbs-item:before { 7101 content: ''; 7102 background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%; 7103 width: 10px; 7104 height: 10px; 7105 display: inline-block; 7106 position: absolute; 7107 top: 12px; 7108 left: -15px; 7109} 7110 7111.dac-header-crumbs-item:first-child:before { 7112 content: none; 7113} 7114 7115.dac-header-crumbs-link { 7116 display: block; 7117 font-size: 16px; 7118 line-height: 32px; 7119 padding: 0 20px 0 0; 7120} 7121 7122.dac-header-crumbs-link, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus { 7123 color: #666; 7124} 7125 7126.dac-header-crumbs-link:focus { 7127 outline: 0; 7128 text-decoration: underline; 7129} 7130 7131.dac-header-crumbs-link.current { 7132 font-weight: 400; 7133} 7134 7135/* Header site search component */ 7136.dac-header-search { 7137 bottom: 64px; 7138 position: absolute; 7139 right: 220px; 7140 top: 0; 7141 width: 238px; 7142 -webkit-transition: width 300ms, right 100ms, margin 100ms; 7143 transition: width 300ms, right 100ms, margin 100ms; 7144} 7145 7146.dac-studio .dac-header-search { 7147 right: 20px; /* move searchbar farther right, because there's no button */ 7148} 7149 7150.dac-header-search-inner { 7151 margin: 0 auto; 7152 max-width: 940px; 7153 position: relative; 7154 width: 100%; 7155} 7156 7157@media (min-width: 980px) { 7158 .dac-header-search-inner::after { 7159 background: -webkit-linear-gradient(right, #6ab344, rgba(106, 179, 68, 0)); 7160 background: linear-gradient(to left, #6ab344, rgba(106, 179, 68, 0)); 7161 content: ''; 7162 display: block; 7163 height: 64px; 7164 position: absolute; 7165 right: 100%; 7166 top: 0; 7167 -webkit-transition: opacity 200ms, -webkit-transform 300ms; 7168 transition: opacity 200ms, transform 300ms; 7169 -webkit-transform-origin: right center; 7170 -ms-transform-origin: right center; 7171 transform-origin: right center; 7172 width: 64px; 7173 } 7174 .dac-studio .dac-header-search-inner::after { 7175 background: -webkit-linear-gradient(right, #424242, rgba(66, 66, 66, 0)); 7176 background: linear-gradient(to left, #424242, rgba(66, 66, 66, 0)); 7177 } 7178 7179 .dac-search-mode .dac-header-search-inner::after { 7180 opacity: 0; 7181 -webkit-transform: scaleX(0); 7182 -ms-transform: scaleX(0); 7183 transform: scaleX(0); 7184 } 7185} 7186 7187.dac-header-search-icon { 7188 left: 8px; 7189 pointer-events: none; 7190 position: absolute; 7191 top: 18px; 7192} 7193 7194.dac-header-search-input { 7195 background: #77be53; 7196 border-radius: 3px; 7197 border: none; 7198 box-sizing: border-box; 7199 color: #fff; 7200 font-size: 14px; 7201 font-weight: 600; 7202 margin: 13px 0; 7203 padding: 9px 36px 10px; 7204 -webkit-transition: background 200ms, color 200ms; 7205 transition: background 200ms, color 200ms; 7206 width: 100%; 7207} 7208 7209.dac-studio .dac-header-search-input { 7210 background: rgba(255, 255, 255, 0.3); 7211} 7212 7213.dac-header-search-close, .dac-header-search-clear { 7214 background: none; 7215 border: none; 7216 cursor: pointer; 7217 font-size: 0; 7218 outline: none; 7219 position: absolute; 7220 margin: 0; 7221} 7222 7223.dac-header-search-clear { 7224 display: inline-block; 7225 opacity: .4; 7226 padding: 8px; 7227 top: 15px; 7228 right: 0; 7229} 7230 7231.dac-header-search-clear:hover, .dac-header-search-clear:focus { 7232 opacity: .8; 7233} 7234 7235.dac-header-search-close { 7236 left: -45px; 7237 top: 20px; 7238 -webkit-transform: translateX(45px); 7239 -ms-transform: translateX(45px); 7240 transform: translateX(45px); 7241 visibility: hidden; 7242} 7243 7244.dac-header-search ::-webkit-input-placeholder { 7245 color: #fff; 7246 font-weight: 300; 7247 -webkit-transition: color 200ms; 7248 transition: color 200ms; 7249} 7250 7251.dac-header-search :-moz-placeholder { 7252 color: #fff; 7253 font-weight: 300; 7254 transition: color 200ms; 7255} 7256 7257.dac-header-search ::-moz-placeholder { 7258 color: #fff; 7259 font-weight: 300; 7260 transition: color 200ms; 7261} 7262 7263.dac-header-search :-ms-input-placeholder { 7264 color: #fff; 7265 font-weight: 300; 7266 transition: color 200ms; 7267} 7268 7269.dac-header-search-input:focus { 7270 outline: 0; 7271} 7272 7273.dac-search-mode .dac-header-search { 7274 width: 940px; 7275 right: 50%; 7276 margin-right: -470px; 7277} 7278 7279.dac-search-mode .dac-header-search .dac-header-search-input::after { 7280 background: -webkit-linear-gradient(right, #b0bec5, rgba(176, 190, 197, 0)); 7281 background: linear-gradient(to left, #b0bec5, rgba(176, 190, 197, 0)); 7282} 7283 7284.dac-search-mode .dac-header-search .dac-header-search-close { 7285 -webkit-transition: -webkit-transform 200ms ease-out 300ms; 7286 transition: transform 200ms ease-out 300ms; 7287 -webkit-transform: translateX(0); 7288 -ms-transform: translateX(0); 7289 transform: translateX(0); 7290 visibility: visible; 7291} 7292 7293.dac-search-mode .dac-header-search .dac-header-search-icon { 7294 left: 23px; 7295} 7296 7297.dac-search-mode .dac-header-search .dac-header-search-input { 7298 background: #fff; 7299 border-radius: 0; 7300 font-size: 18px; 7301 color: #666; 7302 padding-left: 55px; 7303 margin-top: 11px; 7304} 7305 7306.dac-search-mode .dac-header-search ::-webkit-input-placeholder { 7307 color: #505050; 7308} 7309 7310.dac-search-mode .dac-header-search :-moz-placeholder { 7311 color: #505050; 7312} 7313 7314.dac-search-mode .dac-header-search ::-moz-placeholder { 7315 color: #505050; 7316} 7317 7318.dac-search-mode .dac-header-search :-ms-input-placeholder { 7319 color: #505050; 7320} 7321 7322@media (min-width: 720px) and (max-width: 979px) { 7323 .dac-studio .dac-header-search, 7324 .dac-header-search { 7325 right: 20px; 7326 width: 200px; 7327 -webkit-transition: left 200ms, right 200ms, width 200ms; 7328 transition: left 200ms, right 200ms, width 200ms; 7329 } 7330 7331 .dac-search-mode .dac-header-search { 7332 left: 60px; 7333 right: 0; 7334 width: 100%; 7335 } 7336 7337 .dac-search-mode .dac-header-search .dac-header-search-inner { 7338 margin: 0; 7339 width: calc(100% - 60px - 10px); 7340 } 7341 7342 .dac-header-search-close { 7343 left: -42px; 7344 } 7345} 7346 7347@media (max-width: 719px) { 7348 .dac-header-search { 7349 bottom: 0; 7350 border-radius: 0; 7351 border-left: 1px solid rgba(0, 0, 0, 0.1); 7352 cursor: pointer; 7353 left: calc(100% - 64px); 7354 margin: 0; 7355 overflow: hidden; 7356 padding-left: 10px; 7357 padding-right: 10px; 7358 position: absolute; 7359 right: 0; 7360 top: 0; 7361 } 7362 7363 .dac-header-search-input { 7364 background: none; 7365 cursor: pointer; 7366 opacity: 0; 7367 } 7368 7369 .dac-search-mode .dac-header-search { 7370 background: #b0bec5; 7371 cursor: default; 7372 overflow: visible; 7373 left: 60px; 7374 right: 0; 7375 width: 100%; 7376 -webkit-transition: left 200ms, right 200ms, width 200ms; 7377 transition: left 200ms, right 200ms, width 200ms; 7378 padding: 0; 7379 border: none; 7380 } 7381 7382 .dac-search-mode .dac-header-search .dac-header-search-inner { 7383 margin: 0; 7384 width: calc(100% - 60px - 10px); 7385 } 7386 7387 .dac-search-mode .dac-header-search .dac-header-search-input { 7388 opacity: 1; 7389 } 7390} 7391 7392.highlighted em { 7393 color: #333; 7394 font-style: normal; 7395 font-weight: 700; 7396} 7397 7398.card-info .title.highlighted { 7399 color: #666; 7400} 7401 7402/* Main navigation component */ 7403.dac-nav-sidebar { 7404 background: #f5f8fa; 7405 border-right: 1px solid rgba(0, 0, 0, 0.1); 7406 bottom: 0; 7407 left: 0; 7408 overflow: hidden; 7409 padding: 0; 7410 position: fixed; 7411 top: 64px; 7412 -webkit-transform: translate(-100%, 0); 7413 -ms-transform: translate(-100%, 0); 7414 transform: translate(-100%, 0); 7415 width: 250px; 7416 z-index: 60; 7417} 7418 7419.dac-nav-animating .dac-nav-sidebar { 7420 -webkit-transition: -webkit-transform .3s; 7421 transition: transform .3s; 7422} 7423 7424.dac-nav-open .dac-nav-sidebar { 7425 -webkit-transform: translate(0, 0); 7426 -ms-transform: translate(0, 0); 7427 transform: translate(0, 0); 7428} 7429 7430.dac-search-mode .dac-nav-sidebar { 7431 -webkit-transition: -webkit-transform .3s; 7432 transition: transform .3s; 7433 -webkit-transform: translate(-100%, 0); 7434 -ms-transform: translate(-100%, 0); 7435 transform: translate(-100%, 0); 7436} 7437 7438.dac-nav .dac-swap-section { 7439 -webkit-transition-duration: .3s; 7440 transition-duration: .3s; 7441} 7442 7443.dac-nav-back { 7444 margin-top: -3px; 7445 margin-right: 10px; 7446} 7447 7448.dac-nav-fullscreen { 7449 background: transparent; 7450 border: none; 7451 bottom: 100%; 7452 cursor: pointer; 7453 display: none; 7454 opacity: .8; 7455 outline: none; 7456 padding: 20px 15px; 7457 position: absolute; 7458 right: 0; 7459} 7460 7461@media (min-width: 980px) { 7462 .dac-nav-fullscreen { 7463 display: inline-block; 7464 } 7465} 7466 7467.dac-nav-fullscreen:hover { 7468 opacity: 1; 7469} 7470 7471.dac-nav-sub-slider { 7472 cursor: pointer; 7473 opacity: .5; 7474 position: absolute; 7475 right: 7px; 7476 top: 5px; 7477} 7478 7479.dac-nav-back-button { 7480 background: #546e7a; 7481 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 7482 display: block; 7483 font-weight: 500; 7484 font-size: 18px; 7485 left: 0; 7486 margin: 0; 7487 padding: 20px; 7488 position: absolute !important; 7489 right: 0; 7490 top: 0; 7491 z-index: 1; 7492} 7493 7494.dac-nav-back-button, 7495.dac-nav-back-button:hover, 7496.dac-nav-back-button:active, 7497.dac-nav-back-button:focus { 7498 color: rgba(255, 255, 255, 0.7); 7499} 7500 7501/* The back button in Studio and NDK left nav */ 7502.dac-nav-back-button.back-to-dev { 7503 background: none; 7504 color: #444; 7505 position: relative !important; 7506 top: -16px; 7507} 7508 7509.dac-nav-back-button.back-to-dev:hover, 7510.dac-nav-back-button.back-to-dev:active, 7511.dac-nav-back-button.back-to-dev:focus { 7512 color: rgba(68, 68, 68, .7); 7513} 7514 7515.dac-nav-back-button:focus .dac-nav-back { 7516 outline-color: rgb(77, 144, 254); 7517 outline-offset: 15px; 7518 outline-style: auto; 7519} 7520 7521.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 { 7522 opacity: .7; 7523} 7524 7525.dac-nav-logo { 7526 font-size: 20px; 7527 font-weight: 300; 7528 letter-spacing: .3px; 7529 line-height: 36px; 7530 margin: 0; 7531 padding: 14px 24px; 7532} 7533 7534.dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus { 7535 color: #444; 7536} 7537 7538.dac-nav-list { 7539 bottom: 0; 7540 left: 0; 7541 list-style-type: none; 7542 margin: 0; 7543 -webkit-overflow-scrolling: touch; 7544 overflow-y: scroll; 7545 padding: 16px 0; 7546 position: absolute !important; 7547 right: 0; 7548 top: 0 !important; 7549 scrollbar-face-color: #b7baba; 7550 scrollbar-track-color: #e5e8e9; 7551} 7552 7553.dac-nav-list::-webkit-scrollbar { 7554 width: 4px; 7555 height: 4px; 7556} 7557 7558.dac-nav-list::-webkit-scrollbar-thumb { 7559 background: #b7baba; 7560} 7561 7562.dac-nav-list::-webkit-scrollbar-track { 7563 background: #e5e8e9; 7564} 7565 7566.dac-nav-secondary { 7567 margin: 0; 7568} 7569 7570.dac-nav-item { 7571 list-style-type: none; 7572 margin: 0 0 10px; 7573 position: relative; 7574} 7575 7576.dac-nav-secondary .dac-nav-item { 7577 margin-bottom: 0; 7578} 7579 7580.dac-nav-head { 7581 display: block; 7582 font-size: 16px; 7583 font-weight: 300; 7584 letter-spacing: .24px; 7585 line-height: 32px; 7586 margin-bottom: 20px; 7587 margin-top: 0; 7588} 7589 7590.dac-nav-dimmer { 7591 background: #000; 7592 display: block; 7593 height: 100%; 7594 left: 0; 7595 opacity: 0; 7596 position: fixed; 7597 top: 0; 7598 -webkit-transform: translateZ(0); 7599 transform: translateZ(0); 7600 visibility: hidden; 7601 width: 100%; 7602 z-index: 60; 7603} 7604 7605.dac-nav-animating .dac-nav-dimmer { 7606 -webkit-transition: visibility 0s linear .3s, opacity .3s linear; 7607 transition: visibility 0s linear .3s, opacity .3s linear; 7608} 7609 7610.dac-nav-open .dac-nav-dimmer { 7611 opacity: .8; 7612 -webkit-transition-delay: 0s; 7613 transition-delay: 0s; 7614 visibility: visible; 7615} 7616 7617@media (min-width: 980px) { 7618 .dac-nav-dimmer { 7619 display: none; 7620 } 7621} 7622 7623.dac-nav-hamburger { 7624 display: inline-block; 7625 float: left; 7626 height: 15px; 7627 padding: 22px 20px; 7628 width: 18px; 7629} 7630 7631@media (max-width: 719px) { 7632 .dac-nav-hamburger { 7633 border-right: 1px solid rgba(0, 0, 0, 0.1); 7634 left: 0; 7635 padding-bottom: 27px; 7636 position: absolute; 7637 top: 0; 7638 } 7639} 7640 7641.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { 7642 background: rgba(0, 0, 0, 0.4); 7643 display: block; 7644 height: 2px; 7645 margin: 3px 0 0; 7646 opacity: .5; 7647 width: 100%; 7648} 7649 7650.dac-studio .dac-nav-hamburger-top, 7651.dac-studio .dac-nav-hamburger-mid, 7652.dac-studio .dac-nav-hamburger-bot { 7653 background: rgba(256, 256, 256, 0.4); 7654} 7655 7656.dac-nav-animating .dac-nav-hamburger-top, .dac-nav-animating .dac-nav-hamburger-mid, .dac-nav-animating .dac-nav-hamburger-bot { 7657 -webkit-transition: opacity .3s; 7658 transition: opacity .3s; 7659} 7660 7661@media (max-width: 719px) { 7662 .dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { 7663 background: #fff; 7664 opacity: 1; 7665 } 7666} 7667 7668.dac-nav-open .dac-nav-hamburger-top, 7669 .dac-nav-open .dac-nav-hamburger-mid, 7670 .dac-nav-open .dac-nav-hamburger-bot { 7671 opacity: 1; 7672} 7673 7674.dac-search-mode .dac-nav-hamburger { 7675 opacity: 0; 7676 visibility: hidden; 7677 -webkit-transition: visibility 0s linear 200ms, opacity 200ms linear; 7678 transition: visibility 0s linear 200ms, opacity 200ms linear; 7679} 7680 7681.dac-nav-link { 7682 color: #444; 7683 display: block; 7684 font-size: 14px; 7685 text-transform: uppercase; 7686 font-weight: 500; 7687 letter-spacing: .24px; 7688 padding: 5px 20px; 7689 -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7690 transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); 7691} 7692 7693.dac-nav-link:hover, .dac-nav-link:focus { 7694 color: rgba(68, 68, 68, 0.7); 7695} 7696 7697.dac-nav-link:focus { 7698 background: rgba(63, 81, 181, 0.1); 7699 outline: 0; 7700} 7701 7702.dac-nav-secondary .dac-nav-link { 7703 font-size: 12px; 7704 font-weight: 400; 7705 padding-left: 40px; 7706 text-transform: none; 7707} 7708 7709.dac-nav-link.selected { 7710 background: rgba(63, 81, 181, 0.1); 7711 color: #039bef; 7712 position: relative; 7713} 7714 7715.dac-nav-link-forward { 7716 background: #546E7A; 7717 color: #fff; 7718 cursor: pointer; 7719 display: inline-block; 7720 line-height: 34px; 7721 padding: 0; 7722 position: absolute; 7723 right: 0; 7724 top: 0; 7725 text-align: center; 7726 width: 34px; 7727} 7728 7729.dac-nav-link-forward > .dac-nav-forward { 7730 opacity: .7; 7731 vertical-align: -3px; 7732} 7733 7734.dac-nav-sub { 7735 bottom: 0; 7736 left: 0; 7737 position: absolute !important; 7738 top: 65px !important; 7739 right: 0; 7740 z-index: 1; 7741} 7742 7743#body-content { 7744 padding-top: 64px; 7745} 7746 7747.dac-nav-animating #body-content { 7748 -webkit-transition: padding .3s; 7749 transition: padding .3s; 7750} 7751 7752@media (min-width: 980px) { 7753 .dac-nav-open #body-content { 7754 padding-left: 250px; 7755 } 7756 7757 /* Do not show nav toggle on large screens (when no subnav) */ 7758 body.no-subnav .dac-nav-toggle { 7759 display:none; 7760 } 7761 body.no-subnav .dac-header-logo { 7762 padding-left:20px; 7763 } 7764 /* ...If the page is also full-width, then don't show left nav at all */ 7765 body.no-subnav.full-width .dac-nav { 7766 display: none; 7767 } 7768 body.no-subnav.full-width #body-content { 7769 padding-left:0; 7770 } 7771} 7772 7773.dac-nav-open { 7774 overflow: hidden; 7775} 7776 7777@media (min-width: 980px) { 7778 .dac-nav-open { 7779 overflow: visible; 7780 } 7781} 7782 7783#devdoc-nav { 7784 height: 100%; 7785} 7786 7787.data-reference-resources-wrapper { 7788 display: none; 7789} 7790 7791.dac-reference-nav { 7792 height: calc(100% - 36px); 7793 overflow: hidden; 7794 position: relative; 7795} 7796 7797.dac-reference-nav ul, 7798 .dac-reference-nav li { 7799 margin: 0; 7800 list-style-type: none; 7801} 7802 7803.dac-reference-nav-list { 7804 bottom: 0; 7805 overflow: hidden; 7806 overflow-y: scroll; 7807 left: 0; 7808 padding: 10px; 7809 padding-left: 20px; 7810 position: absolute; 7811 right: 0; 7812 top: 0; 7813 scrollbar-face-color: #9da4a7; 7814 scrollbar-track-color: #c4cdd1; 7815} 7816 7817.dac-reference-nav-list::-webkit-scrollbar { 7818 width: 4px; 7819 height: 4px; 7820} 7821 7822.dac-reference-nav-list::-webkit-scrollbar-thumb { 7823 background: #9da4a7; 7824} 7825 7826.dac-reference-nav-list::-webkit-scrollbar-track { 7827 background: #c4cdd1; 7828} 7829 7830.dac-reference-nav-resources { 7831 display: none; 7832 padding: 0 0 0 13px; 7833} 7834 7835.dac-reference-nav-resource, 7836.dac-reference-nav-toggle { 7837 color: #505050; 7838 cursor: pointer; 7839 display: block; 7840 font-size: 12px; 7841 line-height: 1; 7842 overflow: hidden; 7843 margin: 0; 7844 padding: 3px 0; 7845 position: relative; 7846 text-overflow: ellipsis; 7847 white-space: nowrap; 7848} 7849 7850.dac-reference-nav-toggle { 7851 margin-left: -12px; 7852 padding-left: 12px; 7853} 7854 7855.selected > .dac-reference-nav-resource { 7856 color: #039bef; 7857 font-weight: 600; 7858} 7859 7860.dac-reference-nav-toggle::before { 7861 background: transparent url(../images/styles/disclosure_up.png) no-repeat center center; 7862 content: ''; 7863 display: block; 7864 height: 19px; 7865 left: 0; 7866 position: absolute; 7867 top: 0; 7868 width: 8px; 7869} 7870 7871.dac-reference-nav-toggle.dac-closed::before { 7872 -webkit-transform: scaleY(-1); 7873 -ms-transform: scaleY(-1); 7874 transform: scaleY(-1); 7875} 7876 7877/* nav */ 7878#nav { 7879 background: #cfd8dc; 7880 bottom: 0; 7881 left: 0; 7882 margin: 0; 7883 -webkit-overflow-scrolling: touch; 7884 overflow-y: scroll; 7885 position: absolute !important; 7886 right: 0; 7887 top: 0 !important; 7888 padding: 10px; 7889 scrollbar-face-color: #9da4a7; 7890 scrollbar-track-color: #c4cdd1; 7891 /* section header links */ 7892 /* nested nav headers */ 7893} 7894 7895#nav::-webkit-scrollbar { 7896 width: 4px; 7897 height: 4px; 7898} 7899 7900#nav::-webkit-scrollbar-thumb { 7901 background: #9da4a7; 7902} 7903 7904#nav::-webkit-scrollbar-track { 7905 background: #c4cdd1; 7906} 7907 7908#nav li { 7909 font-size: 12px; 7910 line-height: 18px; 7911 list-style-type: none; 7912 margin: 0; 7913 padding: 0; 7914} 7915 7916#nav a { 7917 color: #505050; 7918 text-decoration: none; 7919 word-wrap: break-word; 7920} 7921 7922#nav .nav-section-header { 7923 padding: 0 30px 0 0; 7924 position: relative; 7925 -webkit-transition: background-color .1s; 7926 transition: background-color .1s; 7927} 7928 7929#nav .nav-section-header.empty { 7930 padding: 0; 7931} 7932 7933#nav .nav-section-header.empty::after { 7934 display: none; 7935} 7936 7937#nav .nav-section-header .toggle-icon { 7938 background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; 7939 content: ''; 7940 height: 34px; 7941 display: block; 7942 position: absolute; 7943 right: 0; 7944 top: 1px; 7945 width: 34px; 7946} 7947 7948#nav li.selected a { 7949 color: #0288D1; 7950} 7951 7952#nav li.selected ul li a { 7953 color: #505050; 7954} 7955 7956#nav li.expanded .nav-section-header { 7957 background: #bac2c6; 7958} 7959 7960#nav li.expanded .nav-section-header.empty { 7961 background: none; 7962} 7963 7964#nav li.expanded li .nav-section-header { 7965 background: none; 7966} 7967 7968#nav li.expanded li ul { 7969 padding: 0 10px; 7970} 7971 7972#nav li.expanded > .nav-section-header .toggle-icon { 7973 content: ''; 7974 background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%; 7975 width: 34px; 7976 height: 34px; 7977} 7978 7979#nav li.expanded li ul.tree-list-children { 7980 padding: 0; 7981} 7982 7983#nav li.expanded li ul.tree-list-children .tree-list-children { 7984 padding: 0 0 0 10px; 7985} 7986 7987#nav .nav-section .nav-section .nav-section-header { 7988 /* no white line between second level sections */ 7989 margin-bottom: 0; 7990} 7991 7992#nav > li > div > a { 7993 display: block; 7994 font-weight: 700; 7995 padding: 10px; 7996} 7997 7998#nav .nav-section .nav-section { 7999 position: relative; 8000 padding: 0; 8001 margin: 0; 8002} 8003 8004#nav .nav-section li a { 8005 /* first gen child (2nd level li) */ 8006 display: block; 8007 font-weight: 700; 8008 text-transform: none; 8009 padding: 10px; 8010} 8011 8012#nav .nav-section li li a { 8013 /* second gen child (3rd level li) */ 8014 font-weight: 400; 8015 padding: 6px 6px 6px 10px; 8016} 8017 8018#nav li span.tree-list-subtitle { 8019 display: inline-block; 8020 color: #555; 8021 font-size: 12px; 8022 padding: 10px; 8023 text-transform: uppercase; 8024} 8025 8026#nav li span.tree-list-subtitle:before { 8027 content: '—'; 8028} 8029 8030#nav li span.tree-list-subtitle:after { 8031 content: '—'; 8032} 8033 8034#nav li span.tree-list-subtitle.package { 8035 padding-top: 15px; 8036 cursor: default; 8037} 8038 8039#nav li span.tree-list-subtitle.package:before { 8040 content: ''; 8041} 8042 8043#nav li span.tree-list-subtitle.package:after { 8044 content: ''; 8045} 8046 8047#nav li ul.tree-list-children.classes { 8048 padding-left: 10px; 8049} 8050 8051#nav li ul { 8052 display: none; 8053 overflow: hidden; 8054 margin: 0; 8055} 8056 8057#nav li ul.animate-height-in { 8058 -webkit-transition: height 0.25s ease-in; 8059 transition: height 0.25s ease-in; 8060} 8061 8062#nav li ul.animate-height-out { 8063 -webkit-transition: height 0.25s ease-out; 8064 transition: height 0.25s ease-out; 8065} 8066 8067#nav li ul li { 8068 padding: 0; 8069} 8070 8071#nav li li li { 8072 padding: 0; 8073} 8074 8075#nav li ul > li { 8076 padding: 0; 8077} 8078 8079#nav li ul > li:last-child { 8080 padding-bottom: 5px; 8081} 8082 8083#nav li ul.tree-list-children > li:last-child { 8084 padding-bottom: 0; 8085} 8086 8087#nav li.expanded ul > li { 8088 background: #c4cdd1; 8089} 8090 8091#nav li.expanded ul > li li { 8092 background: inherit; 8093} 8094 8095#nav li ul.tree-list-children ul { 8096 display: block; 8097} 8098 8099#nav.samples-nav li li li a { 8100 padding-top: 3px; 8101 padding-bottom: 3px; 8102} 8103 8104#nav.samples-nav li li ul > li:last-child { 8105 padding-bottom: 3px; 8106} 8107 8108/* Hero carousel */ 8109.dac-hero { 8110 background-color: #fff; 8111 background-position: 50% 30%; 8112 background-size: cover; 8113 box-sizing: border-box; 8114 font-size: 16px; 8115 min-height: 550px; 8116 padding-top: 88px; 8117} 8118 8119.dac-hero.dac-darken::before { 8120 background: rgba(0, 0, 0, 0.3); 8121 bottom: 0; 8122 content: ''; 8123 display: block; 8124 left: 0; 8125 position: absolute; 8126 right: 0; 8127 top: 0; 8128} 8129 8130.dac-hero { 8131 background-size: cover; 8132 position: relative; 8133} 8134 8135.dac-hero-headline { 8136 background-color: #fff; 8137 bottom: 25px; 8138 float: none !important; 8139 padding: 0 10px 10px; 8140 position: absolute; 8141 right: 0; 8142 z-index: 2; 8143} 8144 8145@media (max-width: 719px) { 8146 .dac-hero-headline { 8147 bottom: 0; 8148 } 8149 8150 .dac-hero.dac-darken::before { 8151 background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); 8152 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); 8153 } 8154} 8155 8156.dac-hero.dac-darken .dac-hero-content { 8157 position: relative; 8158} 8159 8160@media (max-width: 719px) { 8161 .dac-hero { 8162 padding-bottom: 20px; 8163 padding-top: 20px; 8164 } 8165} 8166 8167.dac-hero-tag { 8168 font-size: 11px; 8169 font-weight: 700; 8170 letter-spacing: .07em; 8171 margin-bottom: 2px; 8172 text-transform: uppercase; 8173} 8174 8175.dac-hero-title { 8176 margin: 0 0 14px; 8177} 8178 8179.dac-studio .dac-hero-title { 8180 padding-top:0; 8181} 8182 8183@media (max-width: 719px) { 8184 .dac-hero-title { 8185 font-size: 28px; 8186 line-height: 35px; 8187 } 8188} 8189 8190.dac-hero-description { 8191 margin-bottom: 16px; 8192} 8193 8194@media (max-width: 719px) { 8195 .dac-hero-description { 8196 font-size: 14px; 8197 } 8198} 8199 8200.dac-hero-cta { 8201 display: inline-block; 8202 line-height: 40px; 8203 margin-right: 20px; 8204 -webkit-transition: opacity .3s; 8205 transition: opacity .3s; 8206} 8207 8208.dac-hero-cta:hover { 8209 color: currentColor; 8210 opacity: .54; 8211} 8212 8213.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 { 8214 margin-left: -8px; 8215} 8216 8217.dac-hero-cta.col-16 { 8218 line-height: 1.4em; 8219 margin-top: 20px; 8220 padding-left: 0; 8221 position: relative; 8222} 8223 8224.dac-hero-cta.col-16 .dac-sprite { 8225 position: absolute; 8226 left: 0; 8227 top: -3px; 8228} 8229 8230.dac-hero-cta.col-16 .dac-sprite-text { 8231 position: relative; 8232 left: 12px; 8233} 8234 8235@media (max-width: 719px) { 8236 .dac-hero-cta { 8237 line-height: 28px; 8238 } 8239} 8240 8241.dac-hero-figure { 8242 text-align: center; 8243} 8244 8245/* Android Studio download page */ 8246.dac-studio section#features { 8247 padding-top:0; 8248} 8249.dac-studio .wrap.feature { 8250 margin:80px auto; 8251} 8252.dac-studio .dac-section-links.feature-more { 8253 margin-top:-20px; 8254} 8255.dac-studio .dac-toggle-content .wrap.feature { 8256 margin-top:0; 8257} 8258 8259@media (max-width: 719px) { 8260 .dac-hero-figure { 8261 height: 150px; 8262 margin: 15px 0; 8263 } 8264 8265 .dac-hero-figure img { 8266 max-height: 150px; 8267 } 8268 8269 /* Android Studio download page */ 8270 .dac-studio .feature .dac-hero-figure, 8271 .dac-studio .feature .dac-hero-figure img { 8272 height:auto; 8273 max-height:none; 8274 } 8275 .dac-studio .feature .dac-hero-figure img { 8276 width:90%; 8277 margin:0 auto; 8278 } 8279} 8280 8281.dac-hero-carousel { 8282 height: 550px; 8283 position: relative; 8284} 8285 8286.dac-hero-carousel > .dac-hero { 8287 bottom: 0; 8288 left: 0; 8289 position: absolute; 8290 right: 0; 8291 top: 0; 8292 will-change: opacity; 8293} 8294 8295.dac-hero-carousel > .dac-hero, 8296 .dac-hero-carousel > .dac-hero .wrap { 8297 opacity: 0; 8298} 8299 8300.dac-hero-carousel > .dac-hero.active { 8301 opacity: 1; 8302 -webkit-transition: opacity .5s; 8303 transition: opacity .5s; 8304 z-index: 1; 8305} 8306 8307.dac-hero-carousel > .dac-hero.active .wrap { 8308 opacity: 1; 8309 -webkit-transition: opacity .5s .5s; 8310 transition: opacity .5s .5s; 8311} 8312 8313.dac-hero-carousel > .dac-hero.out, 8314 .dac-hero-carousel > .dac-hero.out .wrap { 8315 -webkit-transition: opacity 0s .5s; 8316 transition: opacity 0s .5s; 8317 opacity: 0; 8318} 8319 8320.dac-hero-carousel-action { 8321 bottom: 0; 8322 display: block; 8323 left: 0; 8324 position: absolute; 8325 right: 0; 8326 top: 0; 8327 z-index: 1; 8328} 8329 8330.dac-hero-carousel .dac-hero-cta { 8331 position: relative; 8332 z-index: 1; 8333} 8334 8335.dac-hero-carousel-pagination { 8336 bottom: 33px; 8337 left: 0; 8338 position: absolute; 8339 right: 0; 8340} 8341 8342@media (max-width: 719px) { 8343 .dac-hero-carousel-pagination { 8344 text-align: center; 8345 bottom: 20px; 8346 } 8347} 8348 8349.dac-hero-carousel-pagination .dac-pagination-item { 8350 position: relative; 8351 z-index: 1; 8352} 8353 8354.dac-pagination { 8355 list-style: none; 8356 margin: 0 -6px; 8357} 8358 8359.dac-pagination-item { 8360 background-clip: content-box; 8361 background-color: rgba(153, 153, 153, 0.4); 8362 border-radius: 50%; 8363 cursor: pointer; 8364 display: inline-block; 8365 height: 14px; 8366 overflow: hidden; 8367 padding: 6px; 8368 pointer-events: all; 8369 text-indent: 100%; 8370 -webkit-transition: background-color .1s ease-in; 8371 transition: background-color .1s ease-in; 8372 white-space: nowrap; 8373 width: 14px; 8374 will-change: background-color; 8375} 8376 8377.dac-pagination-item:hover { 8378 background-color: rgba(153, 153, 153, 0.6); 8379} 8380 8381.dac-pagination-item.active, .dac-pagination-item.active:hover { 8382 background-color: #6ab344; 8383} 8384 8385.dac-invert .dac-pagination-item { 8386 background-color: rgba(204, 204, 204, 0.2); 8387} 8388 8389.dac-invert .dac-pagination-item:hover { 8390 background-color: rgba(153, 153, 153, 0.4); 8391} 8392 8393@media (max-width: 719px) { 8394 .dac-pagination-item { 8395 height: 12px; 8396 width: 12px; 8397 } 8398} 8399 8400/* Form component */ 8401.dac-form { 8402 color: #505050; 8403 font-size: 16px; 8404 /* Modal Responsive */ 8405} 8406 8407.dac-form a { 8408 color: #000; 8409} 8410 8411.dac-form-aside { 8412 display: inline-block; 8413 font-size: 12px; 8414 margin-top: 0; 8415} 8416 8417.dac-form-required { 8418 color: #ef4300; 8419} 8420 8421.dac-form-fieldset { 8422 padding: 0; 8423} 8424 8425.dac-form-legend { 8426 display: block; 8427 color: #333; 8428 font-weight: 500; 8429 margin: 20px 0 12px; 8430 padding: 0; 8431 width: 100%; 8432} 8433 8434.dac-form-legend > .dac-form-required { 8435 float: right; 8436 margin-top: 3px; 8437} 8438 8439.dac-form-input { 8440 border: 0 solid #e3e3e3; 8441 border-bottom-width: 1px; 8442 display: block; 8443 outline: 0; 8444 padding: 1px 0 8px; 8445 -webkit-transition: border-color .2s; 8446 transition: border-color .2s; 8447 width: 100%; 8448} 8449 8450.dac-form-input-group { 8451 position: relative; 8452} 8453 8454.dac-form-input-group > .dac-form-required { 8455 display: block; 8456 bottom: 3px; 8457 position: absolute; 8458 right: 0; 8459} 8460 8461.dac-form-input:focus { 8462 border-bottom-color: #09f; 8463} 8464 8465.dac-form-floatlabel { 8466 display: block; 8467 cursor: text; 8468 margin-top: 5px; 8469 pointer-events: none; 8470 -webkit-transform-origin: 0 100%; 8471 -ms-transform-origin: 0 100%; 8472 transform-origin: 0 100%; 8473 -webkit-transform: translate3d(0, 22px, 0) scale(1); 8474 transform: translate3d(0, 22px, 0) scale(1); 8475 -webkit-transition: -webkit-transform .2s; 8476 transition: transform .2s; 8477} 8478 8479.dac-focused > .dac-form-floatlabel, 8480 .dac-has-value > .dac-form-floatlabel { 8481 cursor: default; 8482 -webkit-transform: translate3d(0, 0, 0) scale(0.75); 8483 transform: translate3d(0, 0, 0) scale(0.75); 8484} 8485 8486.dac-form-radio, .dac-form-checkbox { 8487 opacity: 0; 8488 position: absolute; 8489 visibility: hidden; 8490} 8491 8492.dac-form-radio-group, .dac-form-checkbox-group { 8493 display: table; 8494} 8495 8496.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 { 8497 margin-top: 10px; 8498} 8499 8500.dac-form-radio-button, .dac-form-checkbox-button { 8501 box-sizing: border-box; 8502 cursor: pointer; 8503 display: table-cell; 8504 float: left; 8505 height: 18px; 8506 margin: 2px 10px 0 0; 8507 position: relative; 8508 width: 18px; 8509} 8510 8511.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before { 8512 box-sizing: border-box; 8513 content: ''; 8514 display: block; 8515 position: absolute; 8516} 8517 8518.dac-form-radio-button::after, .dac-form-radio-button::before { 8519 border-radius: 50%; 8520 height: 100%; 8521 width: 100%; 8522} 8523 8524.dac-form-radio-button::before { 8525 background: rgba(0, 0, 0, 0.7); 8526 -webkit-transform: translateZ(0) scale(0); 8527 transform: translateZ(0) scale(0); 8528 -webkit-transition: -webkit-transform .3s; 8529 transition: transform .3s; 8530} 8531 8532.dac-form-radio-button::after { 8533 border: 2px solid rgba(0, 0, 0, 0.7); 8534} 8535 8536.dac-form-radio:checked + .dac-form-radio-button::before { 8537 -webkit-transform: translateZ(0) scale(0.5); 8538 transform: translateZ(0) scale(0.5); 8539} 8540 8541.dac-form-radio:focus + .dac-form-radio-button::after { 8542 border: 2px solid #09f; 8543} 8544 8545.dac-form-checkbox-button::before { 8546 border: 1px solid #6c6e6f; 8547 border-radius: 3px; 8548 height: 100%; 8549 -webkit-transition: background .1s ease-out, box-shadow .3s ease-out; 8550 transition: background .1s ease-out, box-shadow .3s ease-out; 8551 width: 100%; 8552} 8553 8554.dac-form-checkbox-button::after { 8555 border-bottom: 2px solid #fff; 8556 border-left: 2px solid #fff; 8557 bottom: 7px; 8558 height: 7px; 8559 left: 3px; 8560 -webkit-transform: rotate(-45deg); 8561 -ms-transform: rotate(-45deg); 8562 transform: rotate(-45deg); 8563 width: 12px; 8564} 8565 8566.dac-form-checkbox:checked + .dac-form-checkbox-button::before { 8567 background: #6c6e6f; 8568 -webkit-transition-timing-function: ease-in; 8569 transition-timing-function: ease-in; 8570} 8571 8572.dac-form-checkbox:focus + .dac-form-checkbox-button::before, 8573 .dac-form-checkbox:active + .dac-form-checkbox-button::before { 8574 box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); 8575} 8576 8577.dac-form-label { 8578 cursor: pointer; 8579 -webkit-user-select: none; 8580 -moz-user-select: none; 8581 -ms-user-select: none; 8582 user-select: none; 8583} 8584 8585@media (max-width: 719px) { 8586 .dac-form-legend { 8587 margin-bottom: 0; 8588 } 8589} 8590 8591/* Filter Resources Component*/ 8592.dac-filter { 8593 color: #505050; 8594 margin-bottom: 20px; 8595 position: relative; 8596} 8597 8598.dac-filter.dac-filter-section { 8599 margin-top: -45px; 8600 text-align: right; 8601} 8602 8603@media (max-width: 719px) { 8604 .dac-filter.dac-filter-section { 8605 margin-top: 0; 8606 text-align: left; 8607 } 8608} 8609 8610.dac-filter-title { 8611 color: #666; 8612 cursor: default; 8613 display: inline-block; 8614 font-size: 12px; 8615 font-weight: 500; 8616 line-height: 24px; 8617 margin: 0; 8618 text-transform: uppercase; 8619} 8620 8621@media (max-width: 719px) { 8622 .dac-filter-title { 8623 margin-bottom: 20px; 8624 } 8625} 8626 8627.dac-filter-message { 8628 color: #78868d; 8629 font-size: 18px; 8630 margin: 0 10px 10px; 8631} 8632 8633.dac-filter-count { 8634 background: #6ab344; 8635 border-radius: 50%; 8636 color: #fff; 8637 display: inline-block; 8638 font-size: 12px; 8639 font-weight: 600; 8640 height: 24px; 8641 text-align: center; 8642 width: 24px; 8643} 8644 8645.dac-filter-count.dac-disabled { 8646 visibility: hidden; 8647} 8648 8649.dac-filter-chip { 8650 background: #bfc7cb; 8651 border-radius: 15px; 8652 color: #333; 8653 cursor: default; 8654 display: inline-block; 8655 line-height: 21px; 8656 margin: 0 10px 10px 0; 8657 padding: 4px 26px 4px 10px; 8658 position: relative; 8659} 8660 8661.dac-filter-chip-close { 8662 background-color: transparent; 8663 border: none; 8664 cursor: pointer; 8665 outline: 0; 8666 padding: 3px; 8667 position: absolute; 8668 right: 5px; 8669 top: 5px; 8670} 8671 8672.dac-filter-chip-close-icon { 8673 opacity: .7; 8674 margin-top: -2px; 8675 -webkit-transform: scale(0.57142857); 8676 -ms-transform: scale(0.57142857); 8677 transform: scale(0.57142857); 8678} 8679 8680.dac-filter-chip-close:hover > .dac-filter-chip-close-icon { 8681 opacity: 1; 8682} 8683 8684.dac-filter-chips { 8685 border-top: 1px solid rgba(0, 0, 0, 0.1); 8686 margin: 0; 8687 list-style-type: none; 8688 padding: 10px 0 0; 8689 position: relative; 8690 text-align: left; 8691} 8692 8693.dac-filter-item { 8694 box-sizing: border-box; 8695 float: left; 8696 margin-bottom: 20px; 8697 padding: 0 10px; 8698 width: 33.33333333%; 8699} 8700 8701@media (min-width: 720px) and (max-width: 979px) { 8702 .dac-filter-item { 8703 width: 50%; 8704 } 8705} 8706 8707@media (max-width: 719px) { 8708 .dac-filter-item { 8709 width: 100%; 8710 } 8711} 8712 8713/* Media component */ 8714.dac-media { 8715 display: table; 8716 width: 100%; 8717} 8718 8719.dac-media-body, .dac-media-figure { 8720 display: table-cell; 8721 vertical-align: top; 8722} 8723 8724.dac-media-figure { 8725 padding: 0; 8726} 8727 8728.dac-media-body { 8729 width: 100%; 8730} 8731 8732.dac-swap { 8733 overflow: hidden; 8734 position: relative; 8735} 8736 8737.dac-swap-section { 8738 left: 0; 8739 opacity: 0; 8740 position: absolute; 8741 top: 0; 8742 width: 100%; 8743 -webkit-transition: opacity 1s, -webkit-transform .5s; 8744 transition: opacity 1s, transform .5s; 8745} 8746 8747.dac-swap-section.dac-no-anim { 8748 -webkit-transition: none; 8749 transition: none; 8750} 8751 8752.dac-swap-section.dac-up { 8753 -webkit-transform: translateY(-100%); 8754 -ms-transform: translateY(-100%); 8755 transform: translateY(-100%); 8756} 8757 8758.dac-swap-section.dac-down { 8759 -webkit-transform: translateY(100%); 8760 -ms-transform: translateY(100%); 8761 transform: translateY(100%); 8762} 8763 8764.dac-swap-section.dac-left { 8765 -webkit-transform: translateX(-100%); 8766 -ms-transform: translateX(-100%); 8767 transform: translateX(-100%); 8768} 8769 8770.dac-swap-section.dac-right { 8771 -webkit-transform: translateX(100%); 8772 -ms-transform: translateX(100%); 8773 transform: translateX(100%); 8774} 8775 8776.dac-swap-section.dac-active { 8777 opacity: 1; 8778 position: relative; 8779 -webkit-transform: translate(0, 0); 8780 -ms-transform: translate(0, 0); 8781 transform: translate(0, 0); 8782 width: auto; 8783} 8784 8785/* Modal component */ 8786.dac-modal { 8787 opacity: 0; 8788 visibility: hidden; 8789 -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear; 8790 transition: visibility 0s linear 300ms, opacity 300ms linear; 8791 background: rgba(0, 0, 0, 0.8); 8792 bottom: 0; 8793 left: 0; 8794 overflow-x: hidden; 8795 overflow-y: auto; 8796 position: fixed; 8797 right: 0; 8798 top: 0; 8799 z-index: 70; 8800} 8801 8802.dac-modal.dac-active { 8803 opacity: 1; 8804 -webkit-transition-delay: 0s; 8805 transition-delay: 0s; 8806 visibility: visible; 8807} 8808 8809.dac-modal-open { 8810 overflow: hidden; 8811} 8812 8813.dac-modal-container { 8814 -webkit-box-align: center; 8815 -webkit-align-items: center; 8816 -ms-flex-align: center; 8817 align-items: center; 8818 display: -webkit-box; 8819 display: -webkit-flex; 8820 display: -ms-flexbox; 8821 display: flex; 8822 -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); 8823 filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); 8824 -webkit-box-pack: center; 8825 -webkit-justify-content: center; 8826 -ms-flex-pack: center; 8827 justify-content: center; 8828 min-height: 100%; 8829 width: 100%; 8830} 8831 8832.dac-modal-window { 8833 background: #fff; 8834 box-sizing: border-box; 8835 margin: 20px auto; 8836 -webkit-transition: -webkit-transform .3s; 8837 transition: transform .3s; 8838 -webkit-transform: translate3d(0, -30px, 0); 8839 transform: translate3d(0, -30px, 0); 8840 width: 960px; 8841} 8842 8843.dac-modal.dac-active .dac-modal-window { 8844 -webkit-transform: translate3d(0, 0, 0); 8845 transform: translate3d(0, 0, 0); 8846} 8847 8848.dac-modal-header { 8849 background: #00695c; 8850 padding: 35px 35px 30px; 8851 position: relative; 8852} 8853 8854.dac-has-small-header .dac-modal-header { 8855 padding: 10px 20px; 8856} 8857 8858.dac-modal-header-actions { 8859 padding: 8px; 8860 position: absolute; 8861 right: 5px; 8862 top: 5px; 8863} 8864 8865.dac-modal-header-open, .dac-modal-header-close { 8866 background: none; 8867 border: none; 8868 cursor: pointer; 8869 line-height: 0; 8870 outline: 0; 8871 opacity: .7; 8872 -webkit-transition: background-color .3s; 8873 transition: background-color .3s; 8874} 8875 8876.dac-modal-header-open:active, .dac-modal-header-close:active { 8877 background: rgba(255, 255, 255, 0.2); 8878} 8879 8880.dac-modal-header-close:before { 8881 content: ''; 8882 top: -1px; 8883 position: relative; 8884} 8885 8886.dac-modal-header-open { 8887 margin: 10px; 8888} 8889 8890.dac-modal-header-title { 8891 color: #fff; 8892 font-size: 24px; 8893 font-weight: 300; 8894 line-height: 32px; 8895 padding: 0 150px 0 0; 8896} 8897 8898.dac-has-small-header .dac-modal-header-title { 8899 font-size: 16px; 8900 font-weight: 500; 8901} 8902 8903.dac-modal-header-subtitle { 8904 bottom: 0; 8905 color: #fff; 8906 display: inline-block; 8907 font: inherit; 8908 font-size: 14px; 8909 margin: 0; 8910 opacity: .8; 8911 position: absolute; 8912 right: 0; 8913} 8914 8915.dac-modal-content { 8916 padding: 12px 35px; 8917} 8918 8919.dac-modal-action { 8920 margin: 0; 8921} 8922 8923.dac-modal-footer { 8924 padding: 24px 35px; 8925} 8926 8927@media (max-width: 1000px) { 8928 .dac-modal-window { 8929 margin: 20px; 8930 width: auto; 8931 } 8932 8933 .dac-modal-container { 8934 z-index: auto; 8935 } 8936} 8937 8938@media (max-width: 719px) { 8939 .dac-modal-window { 8940 margin: 10px; 8941 } 8942 8943 .dac-modal-header { 8944 padding: 35px 10px 10px; 8945 } 8946 8947 .dac-modal-header-title { 8948 font-size: 16px; 8949 line-height: 24px; 8950 padding: 0; 8951 } 8952 8953 .dac-modal-header-subtitle { 8954 display: block; 8955 margin: 0; 8956 position: static; 8957 text-align: right; 8958 } 8959 8960 .dac-modal-header-actions { 8961 top: 1px; 8962 } 8963 8964 .dac-modal-content { 8965 padding: 10px; 8966 } 8967 8968 .dac-modal-footer { 8969 border-top: 1px solid #e3e3e3; 8970 padding: 35px 10px; 8971 } 8972} 8973 8974.newsletter .dac-modal-footer { 8975 padding-top: 0; 8976 text-align: right; 8977} 8978 8979.newsletter-checkboxes { 8980 padding-top: 20px; 8981} 8982 8983.newsletter-success-message { 8984 font-size: 32px; 8985 line-height: 1.4; 8986 padding: 40px 30px; 8987 text-align: center; 8988} 8989 8990@media (max-width: 719px) { 8991 .newsletter-success-message { 8992 font-size: 16px; 8993 padding: 12px 0 0; 8994 } 8995} 8996 8997@media (min-width: 720px) { 8998 .newsletter-checkboxes { 8999 padding-top: 46px; 9000 } 9001 9002 .newsletter-leftCol { 9003 padding-right: 40px; 9004 } 9005 9006 .newsletter-rightCol { 9007 padding-left: 40px; 9008 } 9009} 9010 9011@media (max-width: 719px) { 9012 .newsletter .dac-modal-footer { 9013 margin-top: 30px; 9014 padding: 30px 10px; 9015 text-align: center; 9016 } 9017} 9018 9019.dac-blog-reader { 9020 padding: 50px 90px; 9021} 9022 9023.dac-blog-reader-title { 9024 color: #333; 9025 font-size: 45px; 9026 font-weight: 300; 9027 line-height: 1.2; 9028 padding: 10px 0; 9029} 9030 9031.dac-blog-reader-date { 9032 color: #b8b8b8; 9033 font-size: 12px; 9034 font-weight: 600; 9035 line-height: 1; 9036 text-transform: uppercase; 9037} 9038 9039.dac-blog-reader-text > p:first-child i { 9040 display: inline-block; 9041 margin-bottom: 40px; 9042} 9043 9044.dac-blog-reader-text li { 9045 margin-bottom: 0; 9046} 9047 9048.dac-blog-reader-text iframe { 9049 margin-left: auto !important; 9050 margin-right: auto !important; 9051 max-width: 100%; 9052} 9053 9054@media (max-width: 719px) { 9055 .dac-blog-reader { 9056 padding: 30px 20px; 9057 } 9058} 9059 9060.dac-custom-search { 9061 background: #fff; 9062 margin: 0 -10px; 9063 padding: 20px 10px; 9064 z-index: 1; 9065} 9066 9067.dac-custom-search .dac-fab, .dac-custom-search .dac-button-social { 9068 top: -48px; 9069} 9070 9071.dac-custom-search-section-title { 9072 color: #505050; 9073} 9074 9075.dac-custom-search-entry { 9076 margin-bottom: 36px; 9077 margin-top: 24px; 9078 margin-left:10px; 9079} 9080 9081.dac-custom-search-entry.cols:after { 9082 clear: none; } 9083 9084.dac-custom-search-image-wrapper { 9085 float: left; 9086 position: relative; 9087} 9088 9089.dac-custom-search-image { 9090 background-size: cover; 9091 height: 112px; 9092 width:150px; 9093 margin-right:15px; 9094} 9095 9096.dac-custom-search-text-wrapper { 9097 position: relative; 9098} 9099 9100.dac-custom-search-title { 9101 color: #333; 9102 font-size: 14px; 9103 font-weight: 700; 9104 line-height: 24px; 9105 padding: 0; 9106 clear:none; 9107} 9108 9109.dac-custom-search-title a { 9110 color: inherit; 9111} 9112 9113.dac-custom-search-section { 9114 color: #999; 9115 font-size: 16px; 9116 font-variant: small-caps; 9117 font-weight: 700; 9118 margin: -5px 0 0 0; 9119} 9120 9121.dac-custom-search-snippet { 9122 color: #666; 9123 margin: 0; 9124} 9125 9126.dac-custom-search-link { 9127 font-weight: 500; 9128 word-wrap: break-word; 9129 width: 100%; 9130} 9131 9132.dac-custom-search-load-more { 9133 background: none; 9134 border: none; 9135 color: #333; 9136 cursor: pointer; 9137 display: block; 9138 font-size: 14px; 9139 font-weight: 700; 9140 margin: 75px auto; 9141 outline: none; 9142 padding: 10px; 9143} 9144 9145.dac-custom-search-load-more:hover { 9146 opacity: 0.7; 9147} 9148 9149.dac-custom-search-no-results { 9150 color: #999; 9151} 9152 9153.dac-search-hero { 9154 font-size: 16px; 9155 padding: 50px 0 14px 0; 9156} 9157 9158.dac-search-results { 9159 opacity: 0; 9160 visibility: hidden; 9161 -webkit-transition: visibility 0s linear 300ms, opacity 300ms linear; 9162 transition: visibility 0s linear 300ms, opacity 300ms linear; 9163 background-color: #fff; 9164 bottom: 0; 9165 left: 0; 9166 overflow-y: auto; 9167 padding: 0 10px; 9168 position: fixed; 9169 right: 0; 9170 -webkit-transition: opacity 100ms; 9171 transition: opacity 100ms; 9172 top: 64px; 9173 z-index: 50; 9174} 9175 9176.dac-nav-animating .dac-search-results { 9177 -webkit-transition: opacity 100ms, padding .3s; 9178 transition: opacity 100ms, padding .3s; 9179} 9180 9181.dac-search-results * { 9182 box-sizing: border-box; 9183} 9184 9185.dac-search-open .dac-search-results { 9186 opacity: 1; 9187 visibility: visible; 9188} 9189 9190.dac-search-results-content { 9191 background: #eceff1; 9192 margin: 0 -10px; 9193 padding: 0 10px; 9194} 9195 9196.dac-search-results-for { 9197 margin-bottom: -5px; 9198 overflow: hidden; 9199 padding-top: 5px; 9200} 9201 9202.dac-search-results-for span { 9203 color: #039bef; 9204} 9205 9206.dac-search-mode .dac-search-results-for { 9207 display: none; 9208} 9209 9210.dac-search-results-history { 9211 background: #eceff1; 9212 min-height: 100%; 9213 margin: 0 -10px; 9214 padding: 0 10px; 9215} 9216 9217.dac-search-results-hero { 9218 padding-top: 20px; 9219} 9220 9221.dac-search-results-metadata { 9222 padding-bottom: 40px; 9223} 9224 9225#dac-search-results-reference { 9226 float:right; 9227 z-index:999; 9228} 9229 9230@media (max-width: 719px) { 9231 #dac-search-results-reference { 9232 float:none; 9233 } 9234} 9235 9236.dac-search-results-reference { 9237 background: white; 9238 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); 9239 margin: 0 0 20px 0; 9240 overflow: hidden; 9241 padding: 6px 0 4px; 9242} 9243 9244.dac-search-results-reference .namespace { 9245 color: #666; 9246} 9247 9248.dac-search-results-reference.is-expanded { 9249 height: auto; 9250} 9251 9252.dac-search-results-reference-header { 9253 color: #999; 9254 font-size: 16px; 9255 font-variant: small-caps; 9256 font-weight: 700; 9257 margin: 0; 9258 padding: 18px 12px 0; 9259 text-transform: lowercase; 9260} 9261 9262.dac-search-results-reference-header:first-child { 9263 padding-top: 0; 9264} 9265 9266.dac-search-results-reference-entry { 9267 margin: 0; 9268} 9269 9270.dac-search-results-reference-entry a { 9271 color: #333; 9272 display: block; 9273 font-size: 0.81em; 9274 line-height: 1.5em; 9275 padding: 0 12px 5px 12px; 9276 width: 100%; 9277 white-space: nowrap; 9278} 9279 9280ul.dac-search-results-reference { 9281list-style: none; 9282} 9283 9284ul.dac-search-results-reference li[data-toggle="show-more"] { 9285 cursor:pointer; 9286} 9287 9288ul.dac-search-results-reference.is-expanded li[data-toggle="show-more"] { 9289 display:none; 9290} 9291 9292.dac-search-results-reference-entry a:hover { 9293 background-color: #eceff1; 9294} 9295 9296.dac-search-results-reference-entry em { 9297 font-style: normal; 9298 font-weight: 700; 9299} 9300 9301.dac-search-results-reference-entry-empty { 9302 color: #999; 9303 font-size: 0.81em; 9304 margin: 0; 9305 padding: 2px 12px 14px; 9306} 9307 9308.dac-search-results-resources { 9309 margin: 0; 9310} 9311 9312.dac-search-results-resources .resource-card { 9313 border-right: 2px solid #999; 9314} 9315 9316.dac-search-results-resources .resource-card-about { 9317 border-right: 2px solid #6ab344; 9318} 9319 9320.dac-search-results-resources .resource-card-about .section { 9321 color: #6ab344; 9322} 9323 9324.dac-search-results-resources .resource-card-develop { 9325 border-right: 2px solid #ff7043; 9326} 9327 9328.dac-search-results-resources .resource-card-develop .section { 9329 color: #ff7043; 9330} 9331 9332.dac-search-results-resources .resource-card-design { 9333 border-right: 2px solid #00bcd4; 9334} 9335 9336.dac-search-results-resources .resource-card-design .section { 9337 color: #00bcd4; 9338} 9339 9340.dac-search-results-resources .resource-card-distribute { 9341 border-right: 2px solid #afb42b; 9342} 9343 9344.dac-search-results-resources .resource-card-distribute .section { 9345 color: #afb42b; 9346} 9347 9348@media (max-width: 719px) { 9349 .dac-search-results-reference.no-results { 9350 display: none; 9351 } 9352} 9353 9354@media (min-width: 980px) { 9355 .dac-nav-open.dac-search-open .dac-search-results { 9356 padding-left: 260px; 9357 } 9358 9359 .dac-search-mode.dac-search-open .dac-search-results { 9360 padding-left: 10px; 9361 } 9362} 9363 9364.dac-selected { 9365 color: #039bef !important; 9366} 9367 9368.dac-selected em { 9369 color: #039bef; 9370} 9371 9372.resource-card.dac-selected { 9373 box-shadow: 0px 1px 10px 0px rgba(3, 155, 239, 0.7); 9374} 9375 9376.resource-card.dac-selected em { 9377 color: #333; 9378} 9379 9380.dac-expand, .dac-section { 9381 margin-left: -20px; 9382 margin-right: -20px; 9383 padding-left: 20px; 9384 padding-right: 20px; 9385} 9386 9387@media (max-width: 719px) { 9388 .dac-expand, .dac-section { 9389 margin-left: -10px; 9390 margin-right: -10px; 9391 padding-left: 10px; 9392 padding-right: 10px; 9393 } 9394} 9395 9396.dac-invert { 9397 color: #b3b3b3; 9398 color: rgba(255, 255, 255, 0.7); 9399} 9400 9401.dac-invert h1, .dac-invert h2, .dac-invert h3 { 9402 color: #fff; 9403} 9404 9405.dac-light.dac-hero, .dac-light.dac-section { 9406 background-color: #eceff1; 9407} 9408 9409.dac-gray.dac-hero, .dac-gray.dac-section { 9410 background-color: #d8dfe2; 9411} 9412 9413.dac-gray-dark.dac-hero, .dac-gray-dark.dac-section { 9414 background-color: #b0bec5; 9415} 9416 9417.dac-dark.dac-hero, .dac-dark.dac-section { 9418 background-color: #37474f; 9419} 9420 9421.dac-red.dac-hero, .dac-red.dac-section { 9422 background-color: #dc4d38; 9423} 9424 9425.dac-blue.dac-hero, 9426.dac-blue.dac-section { 9427 background-color: #0277bd; 9428} 9429 9430.dac-blue.dac-invert .dac-hero-description, 9431.dac-blue.dac-invert .dac-section-subtitle { 9432 color: #fff; 9433} 9434 9435.dac-dark-gray.dac-hero, 9436.dac-dark-gray.dac-section { 9437 background-color: #455a64; 9438} 9439 9440.dac-bg-opacity::after { 9441 background-color: rgba(0, 0, 0, .3); 9442 content : ""; 9443 display: block; 9444 position: absolute; 9445 top: 0; 9446 left: 0; 9447 width: 100%; 9448 height: 100%; 9449 z-index: 1; 9450} 9451 9452.dac-hero-cta, .dac-section-title, .dac-section-links { 9453 color: #212121; 9454 color: rgba(0, 0, 0, 0.87); 9455} 9456 9457.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links { 9458 color: white; 9459} 9460 9461.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 { 9462 opacity: .87; 9463} 9464 9465.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 { 9466 opacity: 1; 9467} 9468 9469.dac-hero-tag, .dac-hero-description, .dac-section-subtitle { 9470 color: #757575; 9471 color: rgba(0, 0, 0, 0.54); 9472} 9473 9474.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { 9475 color: #b3b3b3; 9476 color: rgba(255, 255, 255, 0.7); 9477} 9478 9479.dac-hero.dac-no-min-height { 9480 min-height: 0; 9481} 9482 9483.dac-hero-half-bg { 9484 background-size: cover; 9485 background-repeat: no-repeat; 9486 float: right; 9487 height: 440px; 9488} 9489 9490.dac-hero-half-bg-centered { 9491 background-position: center; 9492 background-repeat: no-repeat; 9493 background-size: cover; 9494 float: right; 9495 height: 440px; 9496} 9497 9498@media only screen and (-webkit-min-device-pixel-ratio: 2), 9499only screen and (-moz-min-device-pixel-ratio: 2), 9500only screen and (min-device-pixel-ratio: 2), 9501only screen and (min-resolution: 192dpi), 9502only screen and (min-resolution: 2dppx) { 9503 .dac-hero-half-bg, 9504 .dac-hero-half-bg-centered { 9505 background-size: "" ""; 9506 } 9507} 9508 9509@media (max-width: 719px) { 9510 .dac-hero-half-bg, 9511 .dac-hero-half-bg-centered { 9512 background-position: center; 9513 background-size: auto 100%; 9514 float: none; 9515 height: 200px; 9516 margin-top: 32px; 9517 } 9518} 9519 9520.dac-section { 9521 background-position: 50% 50%; 9522 background-size: cover; 9523 padding-bottom: 84px; 9524 padding-top: 84px; 9525 position: relative; 9526} 9527 9528@media (max-width: 719px) { 9529 .dac-section { 9530 padding-bottom: 52px; 9531 padding-top: 52px; 9532 } 9533} 9534 9535.dac-section.dac-small, 9536.dac-hero.dac-small { 9537 padding-bottom: 32px; 9538 padding-top: 32px; 9539} 9540 9541.dac-section.dac-slim { 9542 padding-bottom: 0; 9543 padding-top: 0; 9544} 9545 9546.dac-section-title { 9547 text-align: center; 9548 padding-bottom: 40px; 9549 padding-top: 0; 9550} 9551 9552.dac-section-subtitle { 9553 font-size: 16px; 9554 padding-bottom: 40px; 9555 margin-top: -24px; 9556 text-align: center; 9557} 9558 9559.dac-section-links { 9560 font-size: 16px; 9561 list-style: none; 9562 line-height: 40px; 9563 margin: 16px 0 0; 9564 text-align: center; 9565} 9566 9567@media (max-width: 719px) { 9568 .dac-section-links { 9569 margin-left: -8px; 9570 text-align: left; 9571 } 9572} 9573 9574.dac-section-link { 9575 cursor: pointer; 9576 display: inline-block; 9577 margin: 0 32px; 9578 -webkit-transition: opacity .3s; 9579 transition: opacity .3s; 9580} 9581 9582.dac-section-link:hover { 9583 opacity: .54; 9584} 9585 9586@media (max-width: 719px) { 9587 .dac-section-link { 9588 display: block; 9589 margin: 0; 9590 } 9591} 9592 9593.dac-section-link a { 9594 color: inherit; 9595} 9596 9597/* 9598SCSS variables are information about icon's compiled state, stored under its original file name 9599 9600.icon-home { 9601 width: $icon-home-width; 9602} 9603 9604The large array-like variables contain all information about a single icon 9605$icon-home: x y offset_x offset_y width height total_width total_height image_path; 9606 9607At the bottom of this section, we provide information about the spritesheet itself 9608$spritesheet: width height image $spritesheet-sprites; 9609*/ 9610.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, 9611#qv li:before { 9612 background-image: url(../images/sprite.png); 9613 display: inline-block; 9614 vertical-align: middle; 9615} 9616 9617@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144px) { 9618 9619 .dac-sprite, 9620 .dac-modal-header-close:before, 9621 .paging-links .prev-page-link:before, 9622 .paging-links .next-page-link:before, 9623 .paging-links .next-class-link:before, 9624 .paging-links .start-class-link:after, 9625 .Video-button--picture-in-picture, 9626 .Video-button--close, 9627 a.video-shadowbox-button.white::after, 9628 #tb li:before, 9629 #qv li:before { 9630 background-image: url(../images/sprite_2x.png); 9631 background-size: 36px 900px; 9632 } 9633} 9634 9635.dac-chevron { 9636 background-size: 9px 39px; 9637 display: inline-block; 9638 height: 13px; 9639 text-indent: -9999px; 9640 width: 9px; 9641} 9642 9643.dac-sprite.dac-auto-chevron, 9644.dac-auto-chevron.dac-modal-header-close:before, 9645.paging-links .dac-auto-chevron.prev-page-link:before, 9646.paging-links .dac-auto-chevron.next-page-link:before, 9647.paging-links .dac-auto-chevron.next-class-link:before, 9648.paging-links .dac-auto-chevron.start-class-link:after { 9649 background-position: 0px -669px; 9650 height: 24px; 9651 width: 24px; 9652 vertical-align: -6px; 9653} 9654 9655.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 { 9656 background-position: 0px -513px; 9657 height: 24px; 9658 width: 24px; 9659} 9660 9661.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 { 9662 background-position: 0px -695px; 9663 height: 36px; 9664 width: 36px; 9665 vertical-align: -10px; 9666} 9667 9668.dac-invert .dac-sprite.dac-auto-chevron-large, 9669.dac-invert .dac-auto-chevron-large.dac-modal-header-close:before, 9670.dac-invert .paging-links .dac-auto-chevron-large.prev-page-link:before, 9671.paging-links .dac-invert .dac-auto-chevron-large.prev-page-link:before, 9672.dac-invert .paging-links .dac-auto-chevron-large.next-page-link:before, 9673.paging-links .dac-invert .dac-auto-chevron-large.next-page-link:before, 9674.dac-invert .paging-links .dac-auto-chevron-large.next-class-link:before, 9675.paging-links .dac-invert .dac-auto-chevron-large.next-class-link:before, 9676.dac-invert .paging-links .dac-auto-chevron-large.start-class-link:after, 9677.paging-links .dac-invert .dac-auto-chevron-large.start-class-link:after { 9678 background-position: 0px -771px; 9679 height: 36px; 9680 width: 36px; 9681} 9682 9683.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 { 9684 background-position: 0px -487px; 9685 height: 24px; 9686 width: 24px; 9687 vertical-align: -6px; } 9688 .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 { 9689 background-position: 0px -565px; 9690 height: 24px; 9691 width: 24px; } 9692 9693.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 { 9694 background-position: 0px -539px; 9695 height: 24px; 9696 width: 24px; 9697 vertical-align: -6px; } 9698 .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 { 9699 background-position: 0px -305px; 9700 height: 24px; 9701 width: 24px; } 9702 9703.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 { 9704 background-position: 0px 0px; 9705 height: 11px; 9706 width: 19px; } 9707 9708.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 { 9709 background-position: 0px -215px; 9710 height: 18px; 9711 width: 11px; } 9712 9713.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 { 9714 background-position: 0px -123px; 9715 height: 16px; 9716 width: 16px; } 9717 9718.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 { 9719 background-position: 0px -695px; 9720 height: 36px; 9721 width: 36px; } 9722 9723.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 { 9724 background-position: 0px -771px; 9725 height: 36px; 9726 width: 36px; } 9727 9728.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 { 9729 background-position: 0px -669px; 9730 height: 24px; 9731 width: 24px; } 9732 9733.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 { 9734 background-position: 0px -513px; 9735 height: 24px; 9736 width: 24px; } 9737 9738.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 { 9739 background-position: 0px -89px; 9740 height: 14px; 9741 width: 14px; } 9742 9743.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 { 9744 background-position: 0px -435px; 9745 height: 24px; 9746 width: 24px; } 9747 9748.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 { 9749 background-position: 0px -27px; 9750 height: 12px; 9751 width: 12px; } 9752 9753.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 { 9754 background-position: 0px -409px; 9755 height: 24px; 9756 width: 24px; } 9757 9758.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 { 9759 background-position: 0px -383px; 9760 height: 24px; 9761 width: 24px; } 9762 9763.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 { 9764 background-position: 0px -357px; 9765 height: 24px; 9766 width: 24px; } 9767 9768.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 { 9769 background-position: 0px -331px; 9770 height: 24px; 9771 width: 24px; } 9772 9773.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 { 9774 background-position: 0px -279px; 9775 height: 24px; 9776 width: 24px; } 9777 9778.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 { 9779 background-position: 0px -235px; 9780 height: 20px; 9781 width: 17px; } 9782 9783.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 { 9784 background-position: 0px -809px; 9785 height: 36px; 9786 width: 36px; } 9787 9788.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 { 9789 background-position: 0px -13px; 9790 height: 12px; 9791 width: 16px; } 9792 9793.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 { 9794 background-position: 0px -105px; 9795 height: 16px; 9796 width: 16px; } 9797 9798.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 { 9799 background-position: 0px -177px; 9800 height: 16px; 9801 width: 16px; } 9802 9803/* The back button in Studio and NDK left nav */ 9804.dac-nav-back-button.back-to-dev .dac-sprite.dac-nav-back { 9805 background-position: 0px -884px; 9806 height: 16px; 9807 width: 16px; 9808} 9809 9810.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 { 9811 background-position: 0px -159px; 9812 height: 16px; 9813 width: 16px; } 9814 9815.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 { 9816 background-position: 0px -141px; 9817 height: 16px; 9818 width: 16px; } 9819 9820.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 { 9821 background-position: 0px -195px; 9822 height: 18px; 9823 width: 18px; } 9824 9825.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 { 9826 background-position: 0px -461px; 9827 height: 24px; 9828 width: 24px; } 9829 9830.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 { 9831 background-position: 0px -733px; 9832 height: 36px; 9833 width: 36px; } 9834 9835.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 { 9836 background-position: 0px -847px; 9837 height: 36px; 9838 width: 36px; } 9839 9840.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 { 9841 background-position: 0px -257px; 9842 height: 20px; 9843 width: 16px; } 9844 9845.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 { 9846 background-position: 0px -41px; 9847 height: 14px; 9848 width: 14px; } 9849 9850.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 { 9851 background-position: 0px -591px; 9852 height: 24px; 9853 width: 24px; } 9854 9855.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 { 9856 background-position: 0px -617px; 9857 height: 24px; 9858 width: 24px; } 9859 9860.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 { 9861 background-position: 0px -643px; 9862 height: 24px; 9863 width: 24px; } 9864 9865.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 { 9866 background-position: 0px -73px; 9867 height: 14px; 9868 width: 16px; } 9869 9870.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 { 9871 background-position: 0px -565px; 9872 height: 24px; 9873 width: 24px; } 9874 9875.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 { 9876 background-position: 0px -487px; 9877 height: 24px; 9878 width: 24px; } 9879 9880.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 { 9881 background-position: 0px -305px; 9882 height: 24px; 9883 width: 24px; } 9884 9885.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 { 9886 background-position: 0px -539px; 9887 height: 24px; 9888 width: 24px; } 9889 9890.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 { 9891 background-position: 0px -57px; 9892 height: 14px; 9893 width: 18px; } 9894 9895/* Toast Component */ 9896.dac-toast { 9897 background: #ffebc3; 9898 border-top: 1px solid #e5d4a1; 9899 display: none; 9900 color: rgba(0, 0, 0, .87); 9901 line-height: 1.4; 9902 padding: 10px; 9903} 9904 9905.dac-toast.dac-visible { 9906 display: block; 9907} 9908 9909.dac-toast-wrap { 9910 box-sizing: border-box; 9911 margin: 0 auto; 9912 max-width: 940px; 9913 padding-right: 20px; 9914 position: relative; 9915} 9916 9917.dac-toast-close-btn { 9918 background-color: transparent; 9919 border: none; 9920 border-radius: 0; 9921 cursor: pointer; 9922 opacity: .4; 9923 padding: 0; 9924 position: absolute; 9925 right: 0; 9926 top: -2px; 9927} 9928 9929.dac-toast-close-btn:hover, 9930.dac-toast-close-btn:focus, 9931.dac-toast-close-btn:active { 9932 opacity: 1; 9933 outline: none; 9934} 9935 9936.dac-toast-close-btn .dac-button.dac-raised.dac-primary{ 9937 margin: 0; 9938 padding: 0; 9939} 9940 9941.dac-toast-group { 9942 bottom: 0; 9943 left: 0; 9944 position: fixed; 9945 right: 0; 9946 z-index: 60; 9947} 9948 9949.dac-toast.dac-danger { 9950 background-color: #ffccbc; 9951 border-top-color: #e5b7a9; 9952} 9953 9954.dac-toast.dac-success { 9955 background-color: #cdedc8; 9956 border-top-color: #c6d5b4; 9957} 9958 9959@media (max-width: 719px) { 9960 .dac-toast-close-btn { 9961 position: relative; 9962 top: 0; 9963 margin: 10px 0 0; 9964 display: block; 9965 } 9966} 9967 9968.dac-tab-item { 9969 box-sizing: border-box; 9970 cursor: pointer; 9971 display: table-cell; 9972 margin: 0; 9973 padding: 8px 12px; 9974 position: relative; 9975 text-align: left; } 9976 @media (max-width: 719px) { 9977 .dac-tab-item { 9978 padding-right: 12px; 9979 text-align: center; 9980 width: 33.33333333%; } } 9981 9982.dac-tab-title { 9983 color: #333; 9984 display: inline-block; 9985 font-size: 16px; 9986 font-weight: 500; 9987 margin: 0; } 9988 9989.dac-tab-arrow { 9990 margin-top: -2px; } 9991 @media (max-width: 719px) { 9992 .dac-tab-arrow { 9993 position: absolute; 9994 visibility: hidden; } } 9995 9996.dac-tab-bar { 9997 display: inline-block; 9998 list-style-type: none; 9999 margin: 0 0 0 12px; 10000 vertical-align: middle; 10001 overflow: hidden; } 10002 @media (max-width: 719px) { 10003 .dac-tab-bar { 10004 display: table; 10005 margin-left: 0; 10006 width: 100%; } } 10007 10008.dac-tab-views { 10009 list-style-type: none; 10010 margin: 0; } 10011 10012.dac-tab-view { 10013 background: #fff; 10014 display: none; 10015 overflow: hidden; 10016 margin: 0 0 10px; 10017 padding: 20px 10px 0; 10018 text-align: left; } 10019 10020.dac-tab-item.dac-active { 10021 background: #fff; } 10022 10023.dac-tab-item.dac-active .dac-tab-arrow { 10024 -webkit-transform: scaleY(-1); 10025 -ms-transform: scaleY(-1); 10026 transform: scaleY(-1); } 10027 10028.dac-tab-view.dac-active { 10029 display: block; } 10030 10031.dac-toggle-expand { 10032 cursor: pointer; 10033 display: inline-block; } 10034 10035.dac-toggle-collapse { 10036 cursor: pointer; 10037 display: none; } 10038 10039.dac-toggle.is-expanded .dac-toggle-expand { 10040 display: none; } 10041 10042.dac-toggle.is-expanded .dac-toggle-collapse { 10043 display: inline-block; } 10044 10045.dac-toggle-content { 10046 clear: left; 10047 overflow: hidden; 10048 max-height: 0; 10049 -webkit-transition: .3s max-height; 10050 transition: .3s max-height; } 10051 10052.dac-toggle.is-expanded .dac-toggle-content { 10053 max-height: none; } 10054 10055.dac-toggle.dac-mobile .dac-toggle-content { 10056 max-height: none; } 10057 10058@media (max-width: 719px) { 10059 .dac-toggle.dac-mobile .dac-toggle-content { 10060 max-height: 0; } 10061 .dac-toggle.is-expanded .dac-toggle-content { 10062 max-height: none; } } 10063 10064/** 10065 * Fades out an element. 10066 * Applies visibility hidden when the transition is finished. 10067 * 10068 * Use opacity: 1; to show the element. 10069 */ 10070.dac-visible-mobile-block, .dac-mobile-only, 10071.dac-visible-mobile-inline, 10072.dac-visible-mobile-inline-block, 10073.dac-visible-tablet-block, 10074.dac-visible-tablet-inline, 10075.dac-visible-tablet-inline-block, 10076.dac-visible-desktop-block, 10077.dac-visible-desktop-inline, 10078.dac-visible-desktop-inline-block { 10079 display: none !important; } 10080 10081@media (max-width: 719px) { 10082 .dac-hidden-mobile { 10083 display: none !important; } 10084 .dac-visible-mobile-block, .dac-mobile-only { 10085 display: block !important; } 10086 .dac-visible-mobile-inline { 10087 display: inline !important; } 10088 .dac-visible-mobile-inline-block { 10089 display: inline-block !important; } } 10090 10091@media (min-width: 720px) and (max-width: 979px) { 10092 .dac-hidden-tablet { 10093 display: none !important; } 10094 .dac-visible-tablet-block { 10095 display: block !important; } 10096 .dac-visible-tablet-inline { 10097 display: inline !important; } 10098 .dac-visible-tablet-inline-block { 10099 display: inline-block !important; } } 10100 10101@media (min-width: 980px) { 10102 .dac-hidden-desktop { 10103 display: none !important; } 10104 .dac-visible-desktop-block { 10105 display: block !important; } 10106 .dac-visible-desktop-inline { 10107 display: inline !important; } 10108 .dac-visible-desktop-inline-block { 10109 display: inline-block !important; } } 10110 10111.dac-offset-parent { 10112 position: relative !important; } 10113 10114/** 10115 * Hide from browsers/screenreaders on all sizes. 10116 */ 10117.dac-hidden { 10118 display: none !important; } 10119 10120/** 10121 * Break strings when their length exceeds the width of their container. 10122 */ 10123.dac-text-break { 10124 word-wrap: break-word !important; } 10125 10126/** 10127 * Horizontal text alignment 10128 */ 10129.dac-text-center { 10130 text-align: center !important; } 10131 10132.dac-text-left { 10133 text-align: left !important; } 10134 10135.dac-text-right { 10136 text-align: right !important; } 10137 10138/** 10139 * Prevent whitespace wrapping 10140 */ 10141.dac-text-no-wrap { 10142 white-space: nowrap !important; } 10143 10144/** 10145 * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis. 10146 */ 10147.dac-text-truncate { 10148 max-width: 100%; 10149 overflow: hidden !important; 10150 text-overflow: ellipsis !important; 10151 white-space: nowrap !important; 10152 word-wrap: normal !important; } 10153 10154/** 10155 * Floats 10156 */ 10157.dac-float-left { 10158 float: left !important; } 10159 10160.dac-float-right { 10161 float: right !important; } 10162 10163/** 10164 * New block formatting context 10165 * 10166 * This affords some useful properties to the element. It won't wrap under 10167 * floats. Will also contain any floated children. 10168 * N.B. This will clip overflow. Use the alternative method below if this is 10169 * problematic. 10170 */ 10171.dac-nbfc { 10172 overflow: hidden !important; 10173} 10174 10175/** 10176 * New block formatting context (alternative) 10177 * 10178 * Alternative method when overflow must not be clipped. 10179 * 10180 * N.B. This breaks down in some browsers when elements within this element 10181 * exceed its width. 10182 */ 10183.dac-nbfc-alt { 10184 display: table-cell !important; 10185 width: 10000px !important; 10186} 10187 10188.Video { 10189 display: none; 10190} 10191 10192.Video-overlay { 10193 background-color: rgba(0, 0, 0, 0.8); 10194 width: 100%; 10195 height: 100%; 10196 position: fixed; 10197 top: 0; 10198 left: 0; 10199 z-index: 9999; 10200} 10201 10202.Video-container { 10203 width: 90vw; 10204 height: 50.625vw; 10205 max-height: calc(90vh - 29.25px); 10206 max-width: calc(160vh - 52px); 10207 margin: auto; 10208 position: fixed; 10209 top: -52px; 10210 right: 0; 10211 bottom: 0; 10212 left: 0; 10213 z-index: 9999; 10214} 10215 10216@media (min-width: 1422.22222222px) and (min-height: 800px) { 10217 .Video-container { 10218 width: 1280px; 10219 height: 720px; 10220 } 10221} 10222 10223.Video-controls { 10224 background: #28655F; 10225 height: 52px; 10226 margin: 0 auto; 10227 position: relative; 10228 box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4); 10229} 10230 10231.Video-frame { 10232 position: relative; 10233 height: 100%; 10234 background: black; 10235 box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.4); 10236} 10237 10238.Video-loading { 10239 color: rgba(255, 255, 255, 0.35); 10240 font-size: 16px; 10241 position: absolute; 10242 top: 50%; 10243 left: 50%; 10244 -webkit-transform: translate(-50%, -50%); 10245 -ms-transform: translate(-50%, -50%); 10246 transform: translate(-50%, -50%); 10247} 10248 10249#youTubePlayer { 10250 max-height: 720px; 10251 position: absolute; 10252 top: 0; 10253 right: 0; 10254 bottom: 0; 10255 left: 0; 10256 width: 100%; 10257 height: 100%; 10258} 10259 10260.Video-button { 10261 background-color: transparent; 10262 border: none; 10263 display: inline-block; 10264 height: 100%; 10265 width: 52px; 10266 outline: none; 10267 cursor: pointer; 10268 -webkit-transition: opacity 200ms; 10269 transition: opacity 200ms; 10270} 10271 10272.Video-button:hover { 10273 opacity: 0.8; 10274} 10275 10276.Video-button--picture-in-picture { 10277 background-position: 0px -461px; 10278 height: 24px; 10279 width: 24px; 10280 display: none; 10281 position: absolute; 10282 right: 64px; 10283 top: 14px; 10284} 10285 10286.Video-button--close { 10287 background-position: 0px -435px; 10288 height: 24px; 10289 width: 24px; 10290 position: absolute; 10291 right: 14px; 10292 top: 14px; 10293} 10294 10295@media (min-width: 720px) { 10296 .Video--picture-in-picture .Video-overlay { 10297 display: none; 10298 } 10299 10300 .Video--picture-in-picture .Video-container { 10301 top: auto; 10302 left: auto; 10303 bottom: 20px; 10304 right: 20px; 10305 width: 40%; 10306 max-width: 420px; 10307 height: auto; 10308 } 10309 10310 .Video--picture-in-picture .Video-button--picture-in-picture { 10311 background-position: 0px -409px; 10312 height: 24px; 10313 width: 24px; 10314 } 10315 10316 .Video--picture-in-picture .Video-frame { 10317 padding-bottom: 56.25%; 10318 } 10319 10320 .Video-button--picture-in-picture { 10321 display: inline-block; 10322 } 10323} 10324 10325a.video-shadowbox-button.white { 10326 padding: 16px 42px 16px 8px; 10327 font-size: 18px; 10328 font-weight: 500; 10329 line-height: 24px; 10330 color: #fff; 10331 text-decoration: none; 10332} 10333 10334a.video-shadowbox-button.white::after { 10335 content: ''; 10336 background-position: 0px -847px; 10337 height: 36px; 10338 width: 36px; 10339} 10340 10341a.video-shadowbox-button.white:hover { 10342 color: #bababa !important; 10343} 10344 10345a.video-shadowbox-button.white:hover::after { 10346 background-position: 0px -733px; 10347 height: 36px; 10348 width: 36px; 10349} 10350 10351#video-frame, #video-container { 10352 display: none; 10353} 10354 10355@media (max-width: 720px) { 10356 .wide-table { 10357 overflow-x: auto; 10358 } 10359 10360 .wide-table table { 10361 display: inline-table; 10362 margin-right: 0; 10363 } 10364} 10365 10366/* New CSS that isn't part of a component */ 10367.paging-links { 10368 box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); 10369 margin: 30px 0; 10370 padding: 0 40px; 10371 /* Start class link doesn't have a caption */ } 10372 10373.paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link { 10374 font-size: 20px; 10375 font-weight: 500; 10376 display: inline-block; 10377 width: calc(50% - 2px); 10378 position: relative; 10379 padding: 46px 0 36px 0; 10380} 10381 10382@media (max-width: 719px) { 10383 .paging-links .start-class-link, .paging-links .next-class-link, .paging-links .prev-page-link, .paging-links .next-page-link { 10384 width: 100%; 10385 } 10386} 10387 10388.paging-links .start-class-link { 10389 padding: 36px 0; 10390} 10391 10392.paging-links .start-class-link, .paging-links .next-class-link { 10393 text-align: center; 10394 width: 100%; 10395} 10396 10397.paging-links .prev-page-link .page-link-caption { 10398 left: 0; 10399} 10400 10401.paging-links .prev-page-link:before { 10402 content: ''; 10403 left: -24px; 10404 position: absolute; 10405 bottom: 41px; 10406} 10407 10408@media (max-width: 719px) { 10409 .paging-links .prev-page-link { 10410 display: none; 10411 } 10412} 10413 10414.paging-links .next-page-link, .paging-links .next-class-link { 10415 text-align: right; 10416} 10417 10418.paging-links .next-page-link .page-link-caption, .paging-links .next-class-link .page-link-caption { 10419 right: 0; 10420} 10421 10422.paging-links .next-page-link:before, .paging-links .next-class-link:before { 10423 content: ''; 10424 right: -24px; 10425 position: absolute; 10426 bottom: 41px; 10427} 10428 10429.paging-links .start-class-link:after { 10430 content: ''; 10431 right: -12px; 10432 position: relative; 10433 bottom: 3px; 10434} 10435 10436.paging-links .page-link-caption { 10437 position: absolute; 10438 top: 26px; 10439 font-size: 14px; 10440 font-weight: 700; 10441 opacity: 0.54; 10442} 10443 10444#tb li:before, 10445#qv li:before { 10446 background-position: 0px -669px; 10447 height: 24px; 10448 width: 24px; 10449 content: ''; 10450 left: -8px; 10451 opacity: .7; 10452 position: absolute; 10453 top: -4px; 10454} 10455 10456#skip-to-main { 10457 border: 0; 10458 clip: rect(0 0 0 0); 10459 height: 1px; 10460 margin: -1px; 10461 overflow: hidden; 10462 padding: 0; 10463 position: absolute; 10464 width: 1px; 10465} 10466 10467#skip-to-main:focus { 10468 background: #fff; 10469 clip: auto; 10470 height: auto; 10471 padding: 10px; 10472 width: auto; 10473 z-index: 10000; 10474} 10475