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