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