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