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