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