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