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