tools/droiddoc/templates-sdk/assets/css/default.css

   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: 20px; }
 102
 103 #devdoc-nav span.small {
 104   font-size:12px;
 105   font-weight:normal;
 106 }
 107
 108 #content {
 109   width: 760px;
 110   float: left; }
 111
 112 a:hover,
 113 acronym:hover {
 114   color: #7aa1b0 !important; }
 115
 116 a:focus,
 117 a:active {
 118   color: #33b5e5 !important; }
 119
 120 a.external-link {
 121   background:url('../images/styles/open_new_page.png') no-repeat 100% 50%;
 122   padding-right:16px;
 123 }
 124
 125 img {
 126   border: none; }
 127 #jd-content img {
 128   margin-bottom:15px;
 129 }
 130
 131 ul {
 132   margin: 0;
 133   padding: 0; }
 134
 135 strong {
 136   font-weight: 500; }
 137
 138 em {
 139   font-style: italic; }
 140
 141 acronym,
 142 .tooltip-link {
 143   border-bottom: 1px dotted #555555;
 144   cursor: help; }
 145
 146 acronym:hover,
 147 .tooltip-link:hover {
 148   color: #7aa1b0;
 149   border-bottom-color: #7aa1b0; }
 150
 151 img.with-shadow,
 152 video.with-shadow {
 153   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
 154
 155 /* disclosures mixin */
 156 /* content layout */
 157 .layout-content-row {
 158   display: inline-block;
 159   margin-bottom: 10px; }
 160   .layout-content-row:after {
 161     content: ".";
 162     display: block;
 163     height: 0;
 164     clear: both;
 165     visibility: hidden; }
 166   * html .layout-content-row {
 167     height: 1px; }
 168
 169 .layout-content-col {
 170   float: left;
 171   margin-left: 20px; }
 172   .layout-content-col:first-child {
 173     margin-left: 0; }
 174   .layout-content-col h3,
 175   .layout-content-col h4 {
 176     margin-top:0; }
 177
 178 .layout-content-col.span-1 {
 179   width: 40px; }
 180
 181 .layout-content-col.span-2 {
 182   width: 100px; }
 183
 184 .layout-content-col.span-3 {
 185   width: 160px; }
 186
 187 .layout-content-col.span-4 {
 188   width: 220px; }
 189
 190 .layout-content-col.span-5 {
 191   width: 280px; }
 192
 193 .layout-content-col.span-6 {
 194   width: 340px; }
 195
 196 .layout-content-col.span-7 {
 197   width: 400px; }
 198
 199 .layout-content-col.span-8 {
 200   width: 460px; }
 201
 202 .layout-content-col.span-9 {
 203   width: 520px; }
 204
 205 .layout-content-col.span-10 {
 206   width: 580px; }
 207
 208 .layout-content-col.span-11 {
 209   width: 640px; }
 210
 211 .layout-content-col.span-12 {
 212   width: 700px; }
 213
 214 .layout-content-col.span-13 {
 215   width: 760px; }
 216
 217 .vspace.size-1 {
 218   height: 10px; }
 219
 220 .vspace.size-2 {
 221   height: 20px; }
 222
 223 .vspace.size-3 {
 224   height: 30px; }
 225
 226 .vspace.size-4 {
 227   height: 40px; }
 228
 229 .vspace.size-5 {
 230   height: 50px; }
 231
 232 .vspace.size-6 {
 233   height: 60px; }
 234
 235 .vspace.size-7 {
 236   height: 70px; }
 237
 238 .vspace.size-8 {
 239   height: 80px; }
 240
 241 .vspace.size-9 {
 242   height: 90px; }
 243
 244 .vspace.size-10 {
 245   height: 100px; }
 246
 247 .vspace.size-11 {
 248   height: 110px; }
 249
 250 .vspace.size-12 {
 251   height: 120px; }
 252
 253 .vspace.size-13 {
 254   height: 130px; }
 255
 256 .vspace.size-14 {
 257   height: 140px; }
 258
 259 .vspace.size-15 {
 260   height: 150px; }
 261
 262 .vspace.size-16 {
 263   height: 160px; }
 264
 265 /* nav */
 266 #nav {
 267   /* section header divs */
 268   /* expanded section header divs */
 269   /* sublinks */ }
 270   #nav li {
 271     list-style-type: none;
 272     font-size: 14px;
 273     margin:0;
 274     padding:0;
 275     line-height: 15px; }
 276   #nav a {
 277     color: #555555;
 278     text-decoration: none;
 279     word-wrap:break-word; }
 280   #nav .nav-section-header {
 281     position: relative;
 282     margin-bottom: 1px;
 283     padding: 0 30px 0 0; }
 284   #nav li.selected a, #nav li.selected > .nav-section-header > a {
 285     color: #09C;
 286   }
 287   #nav li.selected ul li a {
 288   /* don't highlight child items */
 289     color: #555555; }
 290   #nav .nav-section .nav-section .nav-section-header {
 291     /* no white line between second level sections */
 292     margin-bottom: 0; }
 293     /* section header links */
 294     #nav > li > div > a {
 295       display: block;
 296       color: #333333;
 297       font-weight: 500;
 298       padding: 10px 0 10px 10px; }
 299     #nav .nav-section-header:after {
 300       content: '';
 301       background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%;
 302       width: 34px;
 303       height: 34px;
 304       display: block;
 305       position: absolute;
 306       top: 0;
 307       right: 0; }
 308     #nav .nav-section-header.empty:after {
 309       display: none; }
 310     /* nested nav headers */
 311     #nav .nav-section .nav-section {
 312       position: relative;
 313       padding: 0;
 314       margin: 0; }
 315     #nav .nav-section li a {
 316     /* first gen child (2nd level li) */
 317       display:block;
 318       font-weight: normal;
 319       text-transform: none;
 320       padding: 7px 5px 7px 10px;
 321        }
 322     #nav .nav-section li li a {
 323     /* second gen child (3rd level li) */
 324       padding: 5px 5px 5px 10px;
 325        }
 326   #nav li.expanded .nav-section-header {
 327     background:#e9e9e9;
 328     background: rgba(0, 0, 0, 0.05); }
 329   #nav li.expanded li .nav-section-header {
 330     background: transparent; }
 331   #nav li.expanded li ul {
 332   /* 3rd level ul */
 333     padding:0 0 0 10px;
 334   }
 335     #nav li.expanded > .nav-section-header:after {
 336       content: '';
 337       background: transparent url(../images/styles/disclosure_up.png) no-repeat scroll 50% 50%;
 338       width: 34px;
 339       height: 34px; }
 340   #nav li.expanded li ul.tree-list-children {
 341     display:block; /*dd temporary for debug */
 342     padding: 0 0 0 10px;
 343   }
 344   #nav li.expanded li ul.tree-list-children .tree-list-children {
 345     padding:0 0 0 10px;
 346   }
 347   #nav li span.tree-list-subtitle {
 348     display:inline-block;
 349     padding:5px 0 0 10px;
 350     color:#555;
 351     text-transform:uppercase;
 352     font-size:12px;
 353   }
 354   #nav li span.tree-list-subtitle:before {
 355     content: '—';
 356   }
 357   #nav li span.tree-list-subtitle:after {
 358     content: '—';
 359   }
 360   #nav li ul {
 361     display:none;
 362     overflow: hidden;
 363     margin: 0; }
 364     #nav li ul.animate-height-in {
 365       -webkit-transition: height 0.25s ease-in;
 366       -moz-transition: height 0.25s ease-in;
 367       transition: height 0.25s ease-in; }
 368     #nav li ul.animate-height-out {
 369       -webkit-transition: height 0.25s ease-out;
 370       -moz-transition: height 0.25s ease-out;
 371       transition: height 0.25s ease-out; }
 372     #nav li ul li {
 373       padding: 0; }
 374       #nav li li li {
 375         padding: 0; }
 376   #nav li.expanded ul {
 377     }
 378     #nav li ul > li {
 379       padding:0;
 380     }
 381     #nav li ul > li:last-child {
 382       padding-bottom:5px;
 383     }
 384     #nav li ul.tree-list-children > li:last-child {
 385       padding-bottom:0;
 386     }
 387     #nav li.expanded ul > li {
 388       background:#efefef;
 389       background: rgba(0, 0, 0, 0.03); }
 390     #nav li.expanded ul > li li {
 391       background:inherit; }
 392   #nav li ul.tree-list-children ul {
 393     display:block; }
 394
 395 .new,
 396 .new-child {
 397   font-size: .78em;
 398   font-weight: bold;
 399   color: #ff3d3d;
 400   vertical-align:top;
 401   white-space:nowrap;
 402 }
 403
 404 /* content header */
 405 .content-header {
 406   height: 30px;
 407   margin:20px 0 25px;
 408   padding:0 0 10px;}
 409 .content-header.just-links {
 410   margin-bottom:0;
 411   padding-bottom:0;}
 412
 413 .content-header h1 {
 414   color:#000;
 415   margin:0;
 416   border-bottom:0;
 417   padding:0;
 418 }
 419
 420 .content-footer {
 421   border-top: 1px solid #ccc;
 422   margin-top: 10px;
 423   padding-top:10px;
 424   height: 30px; }
 425
 426 .content-footer .col-9 {
 427   margin-left:0;
 428 }
 429 .content-footer .col-4 {
 430   margin-right:0;
 431 }
 432 .content-footer.wrap {
 433   width:940px;
 434 }
 435
 436 .paging-links {
 437   position: relative; }
 438   .paging-links a {
 439     position: absolute; }
 440   .paging-links a,
 441   .training-nav-top a {
 442     font-size: 14px;
 443     line-height: 30px;
 444     color: #555555;
 445     text-decoration: none;
 446     text-transform: uppercase; }
 447     .paging-links .prev-page-link:before,
 448     .training-nav-top .prev-page-link:before {
 449       content: '';
 450       background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%;
 451       width: 10px;
 452       height: 10px;
 453       display: inline-block;
 454       margin-right: 5px; }
 455     .training-nav-top .next-page-link,
 456     .training-nav-top .start-class-link,
 457     .training-nav-top .start-course-link {
 458     right: 10px; }
 459     .paging-links .prev-page-link {
 460       left: -15px; }
 461     .paging-links .next-page-link {
 462       right: 0px; }
 463     .next-page-link:after,
 464     .start-class-link:after,
 465     .start-course-link:after,
 466     .next-class-link:after,
 467     .go-link:after {
 468       content: '';
 469       background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
 470       width: 10px;
 471       height: 10px;
 472       display: inline-block;
 473       margin-left: 5px; }
 474
 475
 476   .training-nav-top a {
 477     display:block;
 478     float:left;
 479     width:122px;
 480     height:28px;
 481     padding: 8px;
 482     line-height:28px;
 483     text-align:center;
 484     border:1px solid #DADADA;
 485     border-bottom:0;
 486   }
 487
 488   .training-nav-top a.next-page-link {
 489     border-left:0;
 490     width:123px;
 491   }
 492
 493   .paging-links a.disabled,
 494   .training-nav-top a.disabled,
 495   .content-footer a.disabled {
 496     color:#bbb;
 497   }
 498
 499   .paging-links a.disabled:hover,
 500   .training-nav-top a.disabled:hover,
 501   .content-footer a.disabled:hover {
 502     cursor:default;
 503     color:#bbb !important;
 504   }
 505
 506   .training-nav-top a.start-class-link,
 507   .training-nav-top a.start-course-link {
 508     width:262px;
 509   }
 510
 511   /* list of classes on course landing page */
 512   ol.class-list {
 513     list-style:none;
 514     margin-left:0;
 515   }
 516   ol.class-list>li {
 517     margin:0 0 15px;
 518     padding:5px 0 0;
 519     overflow:hidden;
 520     border-top:1px solid #ccc;
 521   }
 522   ol.class-list li a.title {
 523     font-size:16px;
 524     margin:0;
 525     clear:left;
 526     display:block;
 527     height:32px;
 528     padding:0 4px;
 529   }
 530   ol.class-list li a.title h2 {
 531     color:inherit;
 532     margin:0 0 10px;
 533     display:block;
 534     float:left;
 535     width:675px;
 536   }
 537   ol.class-list li a.title span {
 538     display:none;
 539     float:left;
 540     font-size:18px;
 541     font-weight:bold;
 542     background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
 543     width: 10px;
 544     height: 32px;
 545   }
 546   ol.class-list li a.title:hover {
 547     background:#ddd;
 548     color:#258AAF !important;
 549   }
 550   ol.class-list li a.title:hover span {
 551     display:block;
 552   }
 553
 554   #jd-content
 555   ol.class-list li img {
 556     float:left;
 557     clear:left;
 558     width:64px;
 559     margin:0 20px 0 0;
 560   }
 561   ol.class-list li p.description {
 562     float:left;
 563     display:block;
 564     width:250px;
 565     margin:0;
 566   }
 567   ol.class-list li p.description.article {
 568     width: 550px;
 569   }
 570   ol.class-list ol {
 571     float:left;
 572     width:320px;
 573     margin:0 0 0 30px;
 574     list-style:none;
 575     margin:0 0 0 20px;
 576   }
 577   ol.class-list div.lessons li {
 578     margin:0 0 6px;
 579     line-height:16px;
 580   }
 581
 582
 583   .hide {
 584     display:none !important;
 585   }
 586
 587   .content-footer.next-class {
 588     display:block;
 589     border:0;
 590     margin-top:0;
 591     padding-top:0;
 592   }
 593
 594   .content-footer.next-class a.next-class-link {
 595     display:block;
 596     float:right;
 597     text-transform:uppercase;
 598   }
 599
 600
 601
 602   /* inner-doc tabs w/ title */
 603
 604 div#title-tabs-wrapper {
 605   border-bottom:1px solid #ccc;
 606   margin:20px 0 30px;
 607 }
 608 h1.with-title-tabs {
 609   display:inline-block;
 610   margin:0 0 -1px 0;
 611   padding:0 60px 0 0;
 612   border-bottom:1px solid #F9F9F9;
 613 }
 614 ul#title-tabs {
 615   list-style:none;
 616   padding:0;
 617   height:29px;
 618   margin:0;
 619   font-size:16px;
 620   line-height:26px;
 621   display:inline-block;
 622   vertical-align:bottom;
 623 }
 624 ul#title-tabs li {
 625   display:block;
 626   float:left;
 627   margin-right:40px;
 628   border-bottom: 3px solid transparent;
 629 }
 630 ul#title-tabs li.selected {
 631   border-bottom: 3px solid #93C;
 632 }
 633 ul#title-tabs li a {
 634   color:#333;
 635 }
 636 ul#title-tabs li a:hover,
 637 ul#title-tabs li a:active {
 638   color:#93C !important;
 639 }
 640
 641
 642
 643 /* content body */
 644 @-webkit-keyframes glowheader {
 645   from {
 646     background-color: #33b5e5;
 647     color: #000;
 648     border-bottom-color: #000; }
 649
 650   to {
 651     background-color: transparent;
 652     color: #33b5e5;
 653     border-bottom-color: #33b5e5; } }
 654
 655 @-moz-keyframes glowheader {
 656   from {
 657     background-color: #33b5e5;
 658     color: #000;
 659     border-bottom-color: #000; }
 660
 661   to {
 662     background-color: transparent;
 663     color: #33b5e5;
 664     border-bottom-color: #33b5e5; } }
 665
 666 @keyframes glowheader {
 667   from {
 668     background-color: #33b5e5;
 669     color: #000;
 670     border-bottom-color: #000; }
 671
 672   to {
 673     background-color: transparent;
 674     color: #33b5e5;
 675     border-bottom-color: #33b5e5; } }
 676
 677 h2:target,
 678 h3:target {
 679     -webkit-animation-name: glowheader;
 680     -moz-animation-name: glowheader;
 681     animation-name: glowheader;
 682     -webkit-animation-duration: 0.7s;
 683     -moz-animation-duration: 0.7s;
 684     animation-duration: 0.7s;
 685     -webkit-animation-timing-function: ease-out;
 686     -moz-animation-timing-function: ease-out;
 687     animation-timing-function: ease-out; }
 688
 689 .design ol h4 {
 690   margin-bottom:0;
 691 }
 692 .design ol {
 693   counter-reset: item; }
 694   .design ol>li {
 695     font-size: 14px;
 696     line-height: 20px;
 697     list-style-type: none;
 698     position: relative; }
 699     .design ol>li:before {
 700       content: counter(item) ". ";
 701       counter-increment: item;
 702       position: absolute;
 703       left: -20px;
 704       top: 0; }
 705     .design ol li.value-1:before {
 706       content: "1. "; }
 707     .design ol li.value-2:before {
 708       content: "2. "; }
 709     .design ol li.value-3:before {
 710       content: "3. "; }
 711     .design ol li.value-4:before {
 712       content: "4. "; }
 713     .design ol li.value-5:before {
 714       content: "5. "; }
 715     .design ol li.value-6:before {
 716       content: "6. "; }
 717     .design ol li.value-7:before {
 718       content: "7. "; }
 719     .design ol li.value-8:before {
 720       content: "8. "; }
 721     .design ol li.value-9:before {
 722       content: "9. "; }
 723     .design ol li.value-10:before {
 724       content: "10. "; }
 725 .design .with-callouts ol>li {
 726   list-style-position: inside;
 727   margin-left: 0; }
 728   .design .with-callouts ol>li:before {
 729     display: inline;
 730     left: -20px;
 731     float: left;
 732     width: 17px;
 733     color: #33b5e5;
 734     font-weight: 500; }
 735 .design .with-callouts ul>li {
 736   list-style-position: outside; }
 737
 738 /* special list items */
 739 li.no-bullet {
 740   list-style-type: none !important; }
 741 li.no-bullet *{
 742   margin:0; }
 743
 744 .design li.with-icon {
 745   position: relative;
 746   margin-left: 20px;
 747   min-height: 30px; }
 748   .design li.with-icon p {
 749     margin-left: 0 !important; }
 750   .design li.with-icon:before {
 751     position: absolute;
 752     left: -40px;
 753     top: 0;
 754     content: '';
 755     width: 30px;
 756     height: 30px; }
 757   .design li.with-icon.tablet:before {
 758     background-image: url(../images/styles/ico_phone_tablet.png); }
 759   .design li.with-icon.web:before {
 760     background-image: url(../images/styles/ico_web.png); }
 761   .design li.with-icon.action:before {
 762     background-image: url(../images/styles/ico_action.png); }
 763   .design li.with-icon.use:before {
 764     background-image: url(../images/styles/ico_use.png); }
 765
 766 /* figures and callouts */
 767 .figure {
 768   position: relative; }
 769   .figure.pad-below {
 770     margin-bottom: 20px; }
 771   .figure .figure-callout {
 772     position: absolute;
 773     color: #fff;
 774     font-weight: 500;
 775     font-size: 16px;
 776     line-height: 23px;
 777     text-align: center;
 778     background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
 779     padding-right: 2px;
 780     width: 30px;
 781     height: 29px;
 782     z-index: 1000; }
 783     .figure .figure-callout.top {
 784       top: -9px; }
 785     .figure .figure-callout.right {
 786       right: -5px; }
 787
 788 .figure-caption {
 789   margin: 0 10px 20px 0;
 790   font-size: 14px;
 791   line-height: 20px;
 792   font-style: italic; }
 793
 794 /* rows of figures */
 795 .figure-row {
 796   font-size: 0;
 797   line-height: 0;
 798   /* to prevent space between figures */ }
 799   .figure-row .figure {
 800     display: inline-block;
 801     vertical-align: top; }
 802   .figure-row .figure + .figure {
 803     margin-left: 10px;
 804     /* reintroduce space between figures */ }
 805
 806 /* video  containers */
 807 .framed-galaxynexus-land-span-13 {
 808   background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat
 809 scroll top left;
 810   padding: 42px 122px 62px 126px;
 811   overflow: hidden; }
 812   .framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video,
 813 .framed-galaxynexus-land-span-13 img {
 814     width: 512px;
 815     height: 286px; }
 816
 817
 818 .framed-galaxynexus-land-span-8{
 819   background: transparent url(../images/styles/device_galaxynexus_blank_land_span8.png) no-repeat
 820 scroll top left;
 821   padding: 26px 68px 38px 72px;
 822   overflow: hidden; }
 823   .framed-galaxynexus-land-span-8, .framed-galaxynexus-land-span-8 video,
 824 .framed-galaxynexus-land-span-8 img {
 825     width: 320px;
 826     height: 180px; }
 827
 828 .framed-galaxynexus-port-span-9 {
 829   background: transparent url(../images/styles/device_galaxynexus_blank_port_span9.png) no-repeat
 830 scroll top left;
 831   padding: 95px 122px 107px 124px;
 832   overflow: hidden; }
 833   .framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video,
 834 .framed-galaxynexus-port-span-9 img {
 835     width: 274px;
 836     height: 488px; }
 837
 838 .framed-galaxynexus-port-span-5 {
 839   background: transparent url(../images/styles/device_galaxynexus_blank_port_span5.png) no-repeat
 840 scroll top left;
 841   padding: 75px 31px 76px 33px;
 842   overflow: hidden; }
 843   .framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video,
 844 .framed-galaxynexus-port-span-5 img {
 845     width: 216px;
 846     height: 384px; }
 847
 848 .framed-nexus4-port-216 {
 849   background: transparent url(../images/styles/device_nexus4_blank_port_432.png) no-repeat
 850 scroll top left;
 851   background-size:240px 465px;
 852   padding: 52px 12px 52px 12px;
 853   overflow: hidden; }
 854   .framed-nexus4-port-216, .framed-nexus4-port-216 video,
 855   .framed-nexus4-port-216 img {
 856     width: 216px;
 857     height: 360px; }
 858
 859
 860 /* landing page disclosures */
 861 .landing-page-link {
 862   text-decoration: none;
 863   font-weight: 500;
 864   color: #333333; }
 865   .landing-page-link:after {
 866     content: '';
 867     background: transparent url(../images/styles/disclosure_right.png) no-repeat scroll 50% 50%;
 868     width: 10px;
 869     height: 10px;
 870     display: inline-block;
 871     margin-left: 5px; }
 872
 873 /* tooltips */
 874 .tooltip-box {
 875   position: absolute;
 876   background-color: rgba(0, 0, 0, 0.9);
 877   border-radius: 2px;
 878   font-size: 14px;
 879   line-height: 20px;
 880   color: #fff;
 881   padding: 6px 10px;
 882   max-width: 250px;
 883   z-index: 10000; }
 884   .tooltip-box.below:after {
 885     position: absolute;
 886     content: '';
 887     line-height: 0;
 888     display: block;
 889     top: -10px;
 890     left: 5px;
 891     border: 5px solid transparent;
 892     border-bottom-color: rgba(0, 0, 0, 0.9); }
 893
 894 /* video note */
 895 .video-instructions {
 896   margin-top: 10px;
 897   margin-bottom: 10px; }
 898   .video-instructions:before {
 899     content: '';
 900     background: transparent url(../images/styles/ico_movie_inline.png) no-repeat scroll top left;
 901     display: inline-block;
 902     width: 12px;
 903     height: 12px;
 904     margin-right: 8px; }
 905   .video-instructions:after {
 906     content: 'Click device screen to replay movie.'; }
 907
 908 /* download buttons */
 909 .download-button {
 910   display: block;
 911   margin-bottom: 5px;
 912   text-decoration: none;
 913   background-color: #33b5e5;
 914   color: #fff !important;
 915   font-weight: 500;
 916   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
 917   padding: 6px 12px;
 918   border-radius: 2px; }
 919   .download-button:hover, .download-button:focus {
 920     background-color: #0099cc;
 921     color: #fff !important; }
 922   .download-button:active {
 923     background-color: #006699; }
 924
 925 /* UI tables and other things found in Writing style and Settings pattern */
 926 .ui-table {
 927   width: 100%;
 928   background-color: #282828;
 929   color: #fff;
 930   border-radius: 2px;
 931   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
 932   border-collapse: separate; }
 933   .ui-table th,
 934   .ui-table td {
 935     padding: 5px 10px;
 936     background-color: inherit;
 937     border:0;}
 938   .ui-table thead th {
 939     font-weight: bold; }
 940   .ui-table tfoot td {
 941     border-top: 1px solid #494949;
 942     border-right: 1px solid #494949;
 943     text-align: center; }
 944     .ui-table tfoot td:last-child {
 945       border-right: 0; }
 946
 947 .layout-with-list-item-margins {
 948   margin-left: 30px !important; }
 949
 950 .emulate-content-left-padding {
 951   margin-left: 10px; }
 952
 953 .do-dont-label {
 954   margin-bottom: 10px;
 955   padding-left: 20px;
 956   background: transparent none no-repeat scroll 0px 3px; }
 957   .do-dont-label.bad {
 958     background-image: url(../images/styles/ico_wrong.png); }
 959   .do-dont-label.good {
 960     background-image: url(../images/styles/ico_good.png); }
 961
 962
 963
 964
 965
 966
 967
 968
 969
 970
 971
 972
 973
 974
 975
 976
 977
 978
 979
 980 /***** PREVIOUSLY style.css ******************/
 981
 982
 983
 984
 985
 986 @media screen, projection, print {
 987 [dir='rtl'] {
 988     direction: rtl;
 989 }
 990 html {
 991     line-height: 20px;
 992 }
 993 pre, table, input, textarea, code {
 994     font-size: 1em;
 995 }
 996 address, abbr, cite {
 997     font-style: normal;
 998 }
 999 [dir='rtl'] th {
1000     text-align: right;
1001 }
1002 html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q,
1003 html[lang^=zh] blockquote, html[lang^=zh] q {
1004     font-style: normal;
1005 }
1006 q {
1007     font-style: italic;
1008 }
1009 fieldset, iframe, img {
1010     border: 0;
1011 }
1012 img {
1013   -ms-interpolation-mode: bicubic;
1014   vertical-align: middle;
1015   max-width: 100%;
1016 }
1017 q {
1018     quotes: none;
1019 }
1020 sup, sub {
1021     font-size: 11px;
1022     line-height: 0;
1023 }
1024 }
1025
1026 @media screen, projection {
1027
1028 table, fieldset {
1029     margin: 0;
1030 }
1031 h1 {
1032     color:#333;
1033     font-size: 22px;
1034     margin: 20px 0 20px;
1035     padding:0 0 10px;
1036 }
1037 h1, h2 {
1038     line-height: 32px;
1039 }
1040 h1.short {
1041   margin-right:320px;
1042 }
1043 h1.short {
1044   margin-right:320px;
1045 }
1046 h1.super {
1047     font-size: 37px;
1048 }
1049 h2 {
1050     color:#333;
1051     font-size: 20px;
1052     margin: 20px 0 20px;
1053     padding:0;
1054 }
1055 h3 {
1056     color:#333;
1057     font-size: 18px;
1058 }
1059 h3, h4 {
1060     color:#333;
1061     line-height: 20px;
1062     margin: 10px 0;
1063 }
1064 h4 {
1065   font-size: 16px;
1066 }
1067 h5 {
1068   font-size: 14px;
1069 }
1070 h5, h6 {
1071   margin: 5px 0;
1072 }
1073 h6 {
1074   font-size: 12px;
1075 }
1076 hr { /* applied to the bottom of h2 elements */
1077   height: 1px;
1078   margin: 5px 0 20px;
1079   border: 0;
1080   background: #ccc;
1081 }
1082 p, pre, table, form {
1083     margin: 0 0 15px;
1084 }
1085 small {
1086   font-size: 11.5px;
1087   color: #000;
1088 }
1089 ul, ol {
1090     margin: 0 0 15px 18px;
1091     padding: 0;
1092 }
1093 [dir='rtl'] ul, [dir='rtl'] ol {
1094     margin: 10px 30px 10px 10px;
1095 }
1096 ul ul, ul ol, ol ul, ol ol {
1097     margin-bottom: 0;
1098     margin-top: 0;
1099 }
1100 li {
1101   margin:0 0 5px;
1102 }
1103 dd {
1104   margin:0 0 10px 30px;
1105 }
1106 dd p,
1107 dd pre,
1108 dd ul,
1109 dd ol,
1110 dd dl {
1111   margin-top:10px;
1112 }
1113 li p,
1114 li pre,
1115 li ul,
1116 li ol,
1117 li dl {
1118   margin-top:5px;
1119   margin-bottom:5px;
1120 }
1121 pre strong, pre b, a strong, a b, a code {
1122     color: inherit;
1123 }
1124 pre, code {
1125     color: #060;
1126     font: 13px/1.5 monospace;
1127 }
1128 code {
1129     font-weight:bold;
1130     font: 13px/14px monospace;
1131 }
1132
1133 legend {
1134     display: none;
1135 }
1136 a:link, a:visited {
1137   color: #258aaf;
1138   text-decoration: none;
1139 }
1140 a:focus, a:hover, a:active {
1141   color: #33B5E5;
1142   text-decoration: none;
1143 }
1144 strong, b {
1145   font-weight:bold;
1146   color: #222;
1147 }
1148 table {
1149   border-collapse: collapse;
1150   border-spacing: 0;
1151   border:0;
1152   margin: .5em 1em 1em 0;
1153   width:100%; /* consistent table widths; within IE's quirks */
1154   background-color:#f7f7f7;
1155 }
1156 th, td {
1157   padding: 4px 12px;
1158   vertical-align: top;
1159   text-align: left;
1160 }
1161 td {
1162   background-color:inherit;
1163   border:solid 1px #DDD;
1164 }
1165 td *:last-child {
1166   margin-bottom:0;
1167 }
1168 th {
1169   background-color: #999;
1170   color: #fff;
1171   border:solid 1px #DDD;
1172   font-weight: normal;
1173 }
1174 tr:first-of-type th:first-of-type:empty {
1175     visibility: hidden;
1176 }
1177 /* --------------------------------------------------------------------------
1178 Footer
1179 */
1180 .line {
1181     clear: both;
1182     background: #acbc00;
1183     background: -moz-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1184     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acbc00),
1185 color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00));
1186     background: -webkit-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1187     background: -o-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1188     background: -ms-linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1189     background: linear-gradient(top, #acbc00 0, #acbc00 50%, #bdde00 50%, #bdde00 100%);
1190     height: 2px;
1191     margin-top: 150px;
1192     position: relative;
1193     z-index: 11;
1194 }
1195 #footer {
1196     font-size:11px;
1197     clear: both;
1198     color: #999;
1199     padding: 15px 0;
1200     margin-top:10px;
1201     width:auto;
1202 }
1203 #footer-local ul {
1204   list-style: none;
1205   margin: 5px 0 30px 0;
1206 }
1207 #footer-local li {
1208     display: inline;
1209 }
1210 #footer-local li+li:before {
1211     content: '|';
1212     padding: 0 3px;
1213   color: #e5e5e5;
1214 }
1215 #footer-global {
1216     padding: 10px 15px;
1217   background: #f5f5f5;
1218 }
1219 #footer-global {
1220     border-top: 1px solid #ebebeb;
1221     font-size: 11.5px;
1222     line-height: 1.8;
1223     list-style: none;
1224 }
1225 #footer-global ul {
1226     margin: 0;
1227 }
1228 #footer-global li {
1229     display: inline;
1230     font-weight: bold;
1231 }
1232 #footer-global li+li:before {
1233     content: '¬?';
1234     padding: 0 3px;
1235 }
1236 * html #footer-global li {
1237     margin: 0 13px 0 0;
1238 }
1239 * [dir='rtl'] #footer-global li {
1240     margin: 0 0 0 13px;
1241 }
1242 *+html #footer-global li {
1243     margin: 0 13px 0 0;
1244 }
1245 *+[dir='rtl'] #footer-global li {
1246     margin: 0 0 0 13px;
1247 }
1248 #footer-global li a {
1249     font-weight: normal;
1250 }
1251 .locales {
1252   margin: 10px 0 0 0px;
1253 }
1254 [dir='rtl'] .locales {
1255     background-position: right center;
1256     float: left;
1257     padding: 0 24px 0 0;
1258 }
1259 .locales form {
1260     margin: 0;
1261 }
1262 .locales select, .sites select {
1263   line-height: 3.08;
1264   margin: 0px 0;
1265   border: solid 1px #EBEBEB;
1266   -webkit-appearance: none;
1267   background: white url('../images/arrows-up-down.png') right center no-repeat;
1268   height: 30px;
1269   color: #222;
1270   line-height: normal;
1271   padding: 5px;
1272   width: 230px;
1273 }
1274 }
1275
1276 /* =============================================================================
1277    Print Only
1278    ========================================================================== */
1279 @media print {
1280   /* configure printed page */
1281   @page {
1282       margin: 0.75in 1in;
1283       widows: 4;
1284       orphans: 4;
1285   }
1286
1287   /* reset spacing metrics */
1288   html, body, .wrap {
1289       margin: 0 !important;
1290       padding: 0 !important;
1291       width: auto !important;
1292   }
1293
1294   /* leave enough space on the left for bullets */
1295   body {
1296       padding-left: 20px !important;
1297   }
1298   #doc-col {
1299       margin-left: 0;
1300   }
1301
1302   /* hide a bunch of non-content elements */
1303   #header, #footer, #nav-x, #side-nav,
1304   .training-nav-top, .training-nav-bottom,
1305   #doc-col .content-footer,
1306   .nav-x, .nav-y,
1307   .paging-links,
1308   a.totop {
1309       display: none !important;
1310   }
1311
1312   /* remove extra space above page titles */
1313   #doc-col .content-header {
1314       margin-top: 0;
1315   }
1316
1317   /* bump up spacing above subheadings */
1318   h2 {
1319       margin-top: 40px !important;
1320   }
1321
1322   /* print link URLs where possible and give links default text color */
1323   p a:after {
1324       content: " (" attr(href) ")";
1325       font-size: 80%;
1326   }
1327   p a {
1328       word-wrap: break-word;
1329   }
1330   a {
1331       color: inherit;
1332   }
1333
1334   /* syntax highlighting rules */
1335   .str { color: #060; }
1336   .kwd { color: #006; font-weight: bold; }
1337   .com { color: #600; font-style: italic; }
1338   .typ { color: #404; font-weight: bold; }
1339   .lit { color: #044; }
1340   .pun { color: #440; }
1341   .pln { color: #000; }
1342   .tag { color: #006; font-weight: bold; }
1343   .atn { color: #404; }
1344   .atv { color: #060; }
1345 }
1346
1347 /* =============================================================================
1348    Columns
1349    ========================================================================== */
1350
1351 @media screen, projection, print {
1352 .full {
1353   padding: 2.5em 0;
1354   border-top: solid 1px #ddd;
1355   border-bottom: solid 1px #ddd;
1356   background: #f7f7f7;
1357 }
1358 .wrap {
1359   margin: 0 auto;
1360   width: 940px;
1361   clear: both;
1362 }
1363 .cols {
1364     height: 1%;
1365     margin: 0 -1.533742331288343558282%;
1366     width: 103.06748466257669%}
1367 *+html .cols {
1368     margin-bottom: 20px;
1369 }
1370 .cols:after {
1371     clear: both;
1372     content: ' ';
1373     display: block;
1374     height: 0;
1375     visibility: hidden;
1376 }
1377 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
1378 .col-13, .col-14, .col-15, .col-16 {
1379     display: inline;
1380   float: left;
1381   margin-left: 10px;
1382   margin-right: 10px;
1383 }
1384 /*
1385 * html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html
1386 .col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12  {
1387     margin: 0;
1388     padding: 0 1.4% 20px;
1389 }
1390 [dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5,
1391 [dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10,
1392 [dir='rtl'] .col-11, [dir='rtl'] .col-12 {
1393     float: right;
1394 }
1395 */
1396 .col-1 { width: 40px }
1397 .col-2 { width: 100px }
1398 .col-3 { width: 160px }
1399 .col-4 { width: 220px }
1400 .col-5 { width: 280px }
1401 .col-6 { width: 340px }
1402 .col-7 { width: 400px }
1403 .col-8 { width: 460px }
1404 .col-9 { width: 520px }
1405 .col-10 { width: 580px }
1406 .col-11 { width: 640px }
1407 .col-12 { width: 700px }
1408 .col-13 { width: 760px }
1409 .col-14 { width: 820px }
1410 .col-15 { width: 880px }
1411 .col-16 { width: 940px }
1412 }
1413
1414 .col-right {
1415   margin-right:0px;
1416 }
1417
1418 @media screen and (max-width:772px) {
1419 .col-5, .col-6, .col-7 {
1420     clear: both;
1421     width: 97.0238096%}
1422 }
1423
1424 /* =============================================================================
1425    Layout
1426    ========================================================================== */
1427 @media screen, projection, print {
1428
1429 /* --------------------------------------------------------------------------
1430 Header, Login, Nav-X, Search
1431 */
1432 #header {
1433   padding: 2.2em 0 0.2em 0;
1434 }
1435 #header:before, #header:after {
1436   content: "";
1437   display: table;
1438   clear: both
1439 }
1440 .logo, .nav-x {
1441     float: left;
1442 }
1443 .nav-x {
1444     margin-top: -2px;
1445   list-style-type: none;
1446 }
1447 .nav-x a {
1448     color: #333;
1449     font-size: 16px;
1450 }
1451 .design a.selected {
1452     color: #33b5e5;
1453 }
1454 .develop a.selected {
1455     color: #F80;
1456 }
1457 .distribute a.selected {
1458     color: #9C0;
1459 }
1460
1461
1462
1463 .nav-x li {
1464     display: inline;
1465     margin-right: 45px;
1466 }
1467 .search {
1468   float: right;
1469   position: relative;
1470   width: 220px
1471 }
1472 .search .bottom, .search .left, .search .right {
1473   position: absolute;
1474   background-color: #a3a3a3;
1475 }
1476 .search .bottom {
1477   width: 220px;
1478   height: 1px;
1479   top: 24px;
1480   left: 0
1481 }
1482 .search .left, .search .right {
1483   height: 5px;
1484   width: 1px
1485 }
1486 .search .left { top: 19px; left: 0 }
1487 .search .right { top: 19px; right: 0 }
1488 .search form {
1489   float: left;
1490   margin-top: 2px;
1491   width: inherit;
1492 }
1493 .search .close,
1494 #player-frame .close {
1495   position: absolute;
1496   right: 8px;
1497   bottom: 4px;
1498   width: 16px;
1499   height: 16px;
1500   margin: 0;
1501   text-indent: -1000em;
1502   background: url(../images/close.png) no-repeat 0 0;
1503   z-index:9999;
1504 }
1505 .search .close:hover, .search .close:focus,
1506 #player-frame .close:hover, #player-frame .close:focus {
1507   background-position: -16px 0;
1508   cursor:pointer;
1509 }
1510 #player-frame .close {
1511   top: 6px;
1512 }
1513 .search form input {
1514   color: #999;
1515   font-size: 1em;
1516   width: inherit;
1517   border: none;
1518   margin: 0;
1519   padding:0 0 0 6px;
1520   z-index: 1500;
1521   background-color: transparent
1522 }
1523 .search:hover .bottom, .search:hover .left, .search:hover .right {
1524   background-color: #33b5e5;
1525 }
1526 .search:hover .icon {
1527   background-position: -8px 0
1528 }
1529 .search form input:focus {
1530   color: #222;
1531   font-weight: bold;
1532   outline:0;
1533 }
1534 /* Search Dropdown */
1535 .search-dropdown {
1536   padding: 15px;
1537   width: 192px;
1538   border: solid 1px #c5c5c5;
1539   background: #fff;
1540   position: absolute;
1541   top: 35px;
1542   left: 0;
1543   -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1544   -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
1545   box-shadow: 0  0 10px rgba(0,0,0,0.2)
1546 }
1547 .search-dropdown ul, .search-dropdown ul li {
1548   list-style-type: none;
1549   margin: 0;
1550   padding: 0
1551 }
1552 .search-dropdown ul li {
1553   clear: both
1554 }
1555 .search-dropdown img {
1556   float: left;
1557   margin: 0 10px 10px 0
1558 }
1559 .search-dropdown h6 {
1560   color: #222;
1561   margin: 0;
1562   line-height: normal
1563 }
1564 .search-dropdown .desc {
1565   color: #999;
1566   font-size: 11.5px;
1567   line-height: normal;
1568   margin: 0;
1569 }
1570 .search-dropdown li a:hover h6, .search-dropdown li a:hover .desc {
1571   color: #33b5e5
1572 }
1573 /* --------------------------------------------------------------------------
1574 Buttons
1575 */
1576 .button, a.button, .button-secondary, a.button-secondary {
1577   border-image: initial;
1578     -webkit-border-radius: 2px;
1579     -moz-border-radius: 2px;
1580     border-radius: 2px;
1581     cursor: pointer;
1582 }
1583 .button, a.button {
1584     display:inline-block;
1585     background-color: #09c;
1586     background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1587     background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1588     background-image: -moz-linear-gradient(top, #2faddb, #09c);
1589     background-image: -ms-linear-gradient(top, #2faddb, #09c);
1590     background-image: -o-linear-gradient(top, #2faddb, #09c);
1591     background-image: linear-gradient(top, #2faddb, #09c);
1592     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
1593     border: 1px solid #3990ab;
1594     color: #fff;
1595 }
1596 .button-secondary, a.button-secondary {
1597     background-color: #f3f3f3;
1598     border: 1px solid #dcdcdc;
1599     color: #444;
1600 }
1601 a.button, a.button:visited, a.button-secondary, a.button-secondary:visited {
1602     margin-right: 16px;
1603    font-weight: 400;
1604     min-width: 54px;
1605     outline: 0;
1606     padding: 8px 15px;
1607     text-align: center;
1608 }
1609 .button, .button-secondary {
1610     margin-right: 16px;
1611   font-weight: 400;
1612     min-width: 54px;
1613     outline: 0;
1614     padding: 0 15px;
1615     text-align: center;
1616 }
1617 .button:hover, a.button:hover {
1618     border-color: #09c;
1619     background-color: #4cadcb;
1620     background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb));
1621     background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb);
1622     background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb);
1623     background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb);
1624     background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb);
1625     background-image: linear-gradient(top, #5dbcd9, #4cadcb);
1626     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9',
1627 EndColorStr='#4cadcb',GradientType=0);
1628     color: #fff !important;
1629 }
1630 .button:active, a.button:active {
1631     background-color: #1e799a;
1632     background-image: none;
1633     border-color: #30b7e6;
1634 }
1635 a.button.big.subtitle {
1636   line-height:18px;
1637 }
1638 .button-secondary:hover, a.button-secondary:hover {
1639     border-color: #dbdbdb;
1640     background-color: #f3f3f3;
1641     background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1642     background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1643     background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1644     background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1645     background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1646     background-image: linear-gradient(top, #f9f9f9, #ececec);
1647     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1648 EndColorStr='#ececec');
1649     color: #33B5E5 !important;
1650 }
1651 .button-secondary:active, a.button-secondary:active {
1652    border-color: #dadada;
1653   background: #ebebeb; /* Old browsers */
1654   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
1655   background:
1656 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
1657 Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv
1658 eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+
1659 CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg
1660 eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl
1661 YiIgc3RvcC1vcGFjaXR5PSIxIi8+
1662 CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1663 CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+
1664 CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+
1665 CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy
1666 R3JhZGllbnQ+
1667 CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg
1668 Lz4KPC9zdmc+);
1669   background: -moz-linear-gradient(top,  #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%,
1670 #ffffff 100%); /* FF3.6+ */
1671   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb),
1672 color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff));
1673 /* Chrome,Safari4+ */
1674   background: -webkit-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9
1675 90%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
1676   background: -o-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1677 100%); /* Opera 11.10+ */
1678   background: -ms-linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1679 100%); /* IE10+ */
1680   background: linear-gradient(top,  #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff
1681 100%); /* W3C */
1682   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb',
1683 endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
1684   -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1685   -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1686   box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
1687   color: #258AAF !important;
1688 }
1689 .button.big {
1690   font-size:20px;
1691   display:inline-block;
1692 }
1693 .button.big span.small {
1694   font-size:14px;
1695 }
1696 .button-caption {
1697   margin-top:10px;
1698   font-size:12px;
1699   font-style:italic;
1700 }
1701
1702 .button.disabled,
1703 .button.disabled:hover,
1704 .button.disabled:active {
1705   background:#ebebeb;
1706   color:#999 !important;
1707   border-color:#999;
1708   cursor:default;
1709 }
1710
1711 .training-nav-top a.button-secondary,
1712 .training-nav-bottom a.button-secondary {
1713   display:block;
1714   float:left;
1715   margin:0;
1716   width:130px;
1717   text-transform:uppercase;
1718   font-weight:bold;
1719
1720     background-color: #f3f3f3;
1721     background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec));
1722     background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec);
1723     background-image: -moz-linear-gradient(top, #f9f9f9, #ececec);
1724     background-image: -ms-linear-gradient(top, #f9f9f9, #ececec);
1725     background-image: -o-linear-gradient(top, #f9f9f9, #ececec);
1726     background-image: linear-gradient(top, #f9f9f9, #ececec);
1727     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
1728 EndColorStr='#ececec');
1729     color: #33B5E5;
1730 }
1731
1732 .training-nav-top a.button-secondary:hover,
1733 .training-nav-bottom a.button-secondary:hover {
1734     background-color: #09c;
1735     background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
1736     background-image: -webkit-linear-gradient(top, #2faddb, #09c);
1737     background-image: -moz-linear-gradient(top, #2faddb, #09c);
1738     background-image: -ms-linear-gradient(top, #2faddb, #09c);
1739     background-image: -o-linear-gradient(top, #2faddb, #09c);
1740     background-image: linear-gradient(top, #2faddb, #09c);
1741     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
1742     border: 1px solid #3990ab;
1743     color: #fff !important;
1744 }
1745
1746 .training-nav-top a.button-secondary.last,
1747 .training-nav-bottom a.button-secondary.last {
1748   border-left:0;
1749 }
1750
1751 .training-nav-top a.button-secondary.double-size,
1752 .training-nav-bottom a.button-secondary.double-size {
1753   width:291px;
1754 }
1755
1756 .training-nav-top,
1757 .training-nav-bottom {
1758   float:right;
1759   margin:0 0 0 20px;
1760 }
1761
1762 .training-nav-bottom {
1763   padding:0 0 20px;
1764 }
1765
1766 #tb-wrapper,
1767 #qv-wrapper {
1768   float:right;
1769   clear:right;
1770   margin:0 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1771   padding:0 0 20px;
1772 }
1773
1774 #tb-wrapper {
1775   margin:-27px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */
1776 }
1777
1778 #tb,
1779 #qv {
1780   font-size:13px;
1781   line-height:18px;
1782   width:238px;
1783   border:1px solid #ccc;
1784   float:right;
1785 }
1786
1787 #tb {
1788   width:278px;
1789 }
1790
1791 #tb h2,
1792 #qv h2 {
1793   margin:10px 15px;
1794   padding:0;
1795   text-transform:uppercase;
1796   border-bottom:1px solid gainsboro;
1797 }
1798
1799 #tb *,
1800 #qv * {
1801   font-size:inherit;
1802 }
1803
1804 #tb .download-box,
1805 #qv .download-box {
1806   padding:0 0 0 15px;
1807 }
1808
1809 #tb .download-box .filename,
1810 #qv .download-box .filename {
1811   font-size:11px;
1812   margin:4px 4px 10px;
1813   color:#666;
1814 }
1815
1816
1817 /* Dev guide quicknav */
1818
1819 .sidebox-wrapper {
1820   float:right;
1821   clear:right;
1822   margin:0 0 0 20px;
1823   padding:0 0 20px;
1824 }
1825
1826 .sidebox {
1827   width:226px;
1828   font-size:13px;
1829   line-height:18px;
1830   border-left:4px solid #99CC00;
1831   float:right;
1832   padding:0 0 0 10px;
1833   margin:0 0 1em 20px;
1834 }
1835
1836 .sidebox h2,
1837 .sidebox h3,
1838 .sidebox h4,
1839 .sidebox h5 {
1840   font-weight:bold;
1841   margin:0 0 10px;
1842 }
1843
1844 .sidebox * {
1845   font-size:inherit;
1846 }
1847
1848 #tb ol,
1849 #tb ul,
1850 #qv ul {
1851   margin:0 15px 10px 35px;
1852 }
1853
1854 #qv ol {
1855   list-style:none;
1856   margin:0 15px 15px;
1857   font-size:inherit;
1858   line-height:inherit;
1859 }
1860
1861 #tb ol ol,
1862 #tb ul ul,
1863 #qv ol ol,
1864 #qv ul ul,
1865 .sidebox ol ol,
1866 .sidebox ul ul {
1867   margin-bottom:0;
1868 }
1869
1870 #qv ol ol {
1871   margin:3px 0 3px 15px;
1872 }
1873
1874 .sidebox p,
1875 #qv p,
1876 #tb p {
1877   margin: 0 0 10px;
1878 }
1879
1880 /* related resources blocks in checklists */
1881
1882 .rel-resources {
1883   margin:10px 0px;
1884   border:1px solid #ccc;
1885   background-color:rgba(0, 0, 0, 0.027451);
1886   border:1px solid #ccc;
1887   font-size:13px;
1888   color:#6f6f6f;
1889 }
1890
1891 .rel-resources ul {
1892 padding: .5em 1em 0 1em;
1893 }
1894
1895 .rel-resources a {
1896 font-weight:500;
1897 }
1898
1899 .rel-resources h3 {
1900   margin:4px 15px 0px 15px;
1901   font-size:13px;
1902   font-weight:600;
1903   text-transform:uppercase;
1904 }
1905
1906 /* --------------------------------------------------------------------------
1907 Form
1908 */
1909 .article form {
1910     margin: 0 0 20px;
1911 }
1912 .article form .form-required {
1913     color: #dd4b39;
1914 }
1915 .article form fieldset {
1916     margin: 0 0 20px;
1917     padding: 0;
1918 }
1919 .article form legend {
1920     display: block;
1921     line-height: 1.5;
1922     margin: 0;
1923     padding: 0;
1924 }
1925 /*
1926 .article form ol, .article form ul {
1927     margin: 0 0 0 1em;
1928     padding: 0 0 0 1em;
1929 }
1930 [dir='rtl'] .article form ol, [dir='rtl'] .article form ul {
1931     margin: 0 1em 0 0;
1932     padding: 0 1em 0 0;
1933 }
1934 .article form ol ul, .article form ul ul, [dir='rtl'] .article form ol ul, [dir='rtl'] .article form
1935 ul ul {
1936     list-style: none;
1937     margin: 0;
1938     padding: 0;
1939 }
1940 .article form li {
1941     margin: 0 0 20px;
1942 }
1943 .article form li li {
1944     margin: 0 0 5px;
1945 }
1946 */
1947 .article form label {
1948     display: block;
1949     margin: 0 0 5px;
1950     padding: 0;
1951 }
1952 .article form input[type='text'], .article form select, .article form textarea, .article form
1953 .checkbox-group, .article form .radio-group {
1954     margin-bottom: 15px;
1955 }
1956 .checkbox-group input {
1957   width: 13px;
1958   height: 13px;
1959   background: #fff;
1960   border: solid 1px #c6c6c6;
1961   float: left;
1962 }
1963 .article form .checkbox-group, .article form .radio-group {
1964   display: block
1965 }
1966 .article form select {
1967     border: solid 1px #ebebeb;
1968     border-top-color: #ddd;
1969     -webkit-appearance: none;
1970     background: #f3f3f3 url(../images/arrows-up-down.png) right center no-repeat;
1971     height: 30px;
1972     color: #222;
1973     line-height: normal;
1974     padding: 5px;
1975     width: 130px;
1976 }
1977
1978 .article form .browse .browse-msg {
1979   font-size: 11.5px;
1980 }
1981 .article form .browse .button-secondary {
1982   height: auto;
1983   line-height: 25px;
1984   font-size: 11px;
1985   padding: 0 8px;
1986   margin: 0 10px 15px 0;
1987 }
1988 .article form input[type='text'], .article form textarea {
1989     border: 1px solid #ebebeb;
1990     border-top-color: #dcdcdc;
1991     color: #222;
1992     line-height: normal;
1993     padding: 6px 10px;
1994     width: 300px;
1995 }
1996 .article form textarea {
1997     height: 150px;
1998 }
1999 .article form input[type='text']:focus, .article form textarea:focus {
2000     border-color: #33B5E5;
2001     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2002     -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2003     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2004     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
2005     outline: 0;
2006 }
2007 .article form input[disabled], .article form textarea[disabled], .article form label.form-disabled {
2008     color: #999;
2009 }
2010 .article form input[type='text'][disabled], .article form textarea[disabled] {
2011     background-color: #ebebeb;
2012 }
2013 form .form-error input[type='text'], form .form-error textarea {
2014     border-color: #dd4b39;
2015   margin-right: 20px;
2016 }
2017 .aside {
2018     -moz-border-radius: 2px;
2019     -webkit-border-radius: 2px;
2020     border-radius: 2px;
2021     margin: 10px 0;
2022     padding: 20px;
2023   color: #666;
2024     position: relative;
2025   background: #f9f9f9;
2026 }
2027 /*
2028 .aside, .notification, .promo {
2029     -moz-border-radius: 2px;
2030     -webkit-border-radius: 2px;
2031     border-radius: 2px;
2032     margin: 10px 0;
2033     padding: 10px;
2034     position: relative;
2035 }
2036 .aside>:first-child, .notification>:first-child, .promo>:first-child {
2037     margin-top: 0;
2038 }
2039 .aside>:last-child, .notification>:last-child, .promo>:last-child {
2040     margin-bottom: 0;
2041 }
2042 .aside {
2043     background: #f9f9f9;
2044 }
2045 .notification {
2046     background: #fffbe4;
2047     border-color: #f8f6e6;
2048 }
2049 .promo {
2050     background: #f6f9ff;
2051     border-color: #eff2f9;
2052 }
2053 */
2054
2055 /* SDK TOS styles */
2056
2057 div.sdk-terms {
2058   white-space: pre-wrap;
2059   word-wrap: break-word;
2060   font-family: inherit;
2061   font-size: inherit;
2062   padding: 10px;
2063   height: 370px;
2064   width: 738px;
2065   border: 1px solid #444;
2066   background: transparent;
2067   overflow:auto;
2068   margin:0 0 10px;
2069 }
2070
2071 div.sdk-terms.fullsize {
2072   padding: 0;
2073   height: auto;
2074   width: auto;
2075   border:none;
2076 }
2077
2078 div.sdk-terms h3,
2079 div.sdk-terms h2 {
2080   margin:0;
2081 }
2082
2083 div#sdk-terms-form {
2084   padding:0 0 0 10px;
2085 }
2086
2087 div#sdk-terms-form input {
2088   display:inline;
2089   margin:4px 4px 4px 0;
2090 }
2091
2092
2093 /* --------------------------------------------------------------------------
2094 Code Style
2095 */
2096 pre {
2097   margin:0 0 1em 0;
2098   padding: 1em;
2099   overflow: auto;
2100   border: solid 1px #ddd;
2101   background: #f7f7f7;
2102 }
2103 .str { color: #080; }
2104 .kwd { color: #008; }
2105 .com { color: #800; }
2106 .typ { color: #606; }
2107 .lit { color: #066; }
2108 .pun { color: #660; }
2109 .pln { color: #000; }
2110 .tag { color: #008; }
2111 .atn { color: #828; }
2112 .atv { color: #080; }
2113 .dec { color: #606; }
2114
2115 /* --------------------------------------------------------------------------
2116 Three-Pane
2117 */
2118 /* Package Nav & Classes Nav */
2119 .three-pane {
2120   position: relative;
2121   border-top: solid 1px #ebebeb;
2122 }
2123 #packages-nav .js-pane,
2124 #classes-nav .js-pane {
2125   overflow:visible;
2126 }
2127 #packages-nav {
2128         height:270px;
2129   max-height: inherit;
2130   overflow: hidden;
2131   position: relative;
2132 }
2133 #classes-nav {
2134   overflow: hidden;
2135   position: relative;
2136 }
2137 #packages-nav ul, #classes-nav ul {
2138   list-style-type: none;
2139   margin: 10px 0 20px 0;
2140   padding: 0;
2141 }
2142 #classes-nav li {
2143   font-weight: bold;
2144   margin: 5px 0;
2145 }
2146 #packages-nav li,
2147 #classes-nav li li {
2148   margin: 0;
2149 }
2150 #packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2151 #classes-nav li a, #classes-nav li a:active, #classes-nav li a:visited {
2152   padding: 0 0 0 4px;
2153 }
2154 #packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2155 #classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited,
2156 #nav-tree li a, #nav-tree li a:active, #nav-tree li a:visited {
2157   color: #222;
2158   font-weight: normal;
2159 }
2160 #packages-nav li a, #packages-nav li a:active, #packages-nav li a:visited,
2161 #classes-nav li li a, #classes-nav li li a:active, #classes-nav li li a:visited {
2162   display: block;
2163 }
2164 #packages-nav li.selected a, #packages-nav li.selected a:active, #packages-nav li.selected
2165 a:visited,
2166 #classes-nav li li.selected a, #classes-nav li li.selected a:active, #classes-nav li li.selected
2167 a:visited,
2168 #nav-tree li div.selected {
2169     font-weight: 500;
2170     color: #0099cc;
2171     background-color:#fff; }
2172   #packages-nav li.selected ul li a,
2173   #classes-nav li.selected ul li a {
2174   /* don't highlight child items */
2175     color: #555555; }
2176 #nav-tree li div.selected a {
2177     font-weight: 500;
2178     color: #0099cc;
2179 }
2180 #nav-swap {
2181   height:30px;
2182   border-top:1px solid #ccc;
2183 }
2184 #nav-swap a {
2185   display:inline-block;
2186   height:100%;
2187   color: #222;
2188   font-size: 12px;
2189   padding: 5px 0 5px 5px;
2190 }
2191
2192 #nav-swap .fullscreen {
2193   float: right;
2194   width: 24px;
2195   height: 24px;
2196   text-indent: -1000em;
2197   padding:0;
2198   margin:3px 5px 0;
2199   background: url(../images/fullscreen.png) no-repeat -24px 0;
2200 }
2201 #nav-swap .fullscreen.disabled {
2202   background-position: 0 0;
2203 }
2204 #nav-swap .fullscreen:hover,
2205 #nav-swap .fullscreen:focus {
2206   cursor:pointer;
2207 }
2208
2209
2210 /* nav tree */
2211 #side-nav, #devdoc-nav, #swapper,
2212 #nav-tree, #tree-list {
2213   overflow:hidden;
2214   margin-left:0;
2215 }
2216
2217 #nav-tree ul {
2218   list-style:none;
2219   padding:0;
2220   margin:10px 0;
2221 }
2222
2223 #nav-tree ul li div {
2224   padding:0 0 0 4px;
2225 }
2226
2227 #side-nav #nav-tree ul li a,
2228 #side-nav #nav-tree ul li span.no-children {
2229   padding: 0;
2230   margin: 0;
2231 }
2232
2233 #nav-tree .plus {
2234   margin: 0 3px 0 0;
2235 }
2236
2237 #nav-tree ul ul {
2238   list-style: none;
2239   margin: 0;
2240   padding: 0 0 0 0;
2241 }
2242
2243 #nav-tree ul li {
2244   margin: 0;
2245   padding: 0 0 0 0;
2246   white-space: nowrap;
2247 }
2248
2249 #nav-tree .children_ul {
2250   padding:0;
2251   margin:0;
2252 }
2253 #nav-tree .children_ul li div {
2254   padding:0 0 0 10px;
2255 }
2256 #nav-tree .children_ul .children_ul li div {
2257   padding:0 0 0 20px;
2258 }
2259
2260 #nav-tree a.nolink {
2261   color: #222;
2262   text-decoration: none;
2263 }
2264
2265 #nav-tree span.label {
2266   width: 100%;
2267 }
2268
2269 #nav-tree {
2270   overflow-x: auto;
2271   overflow-y: scroll;
2272   outline:0;
2273 }
2274
2275
2276 /* Content */
2277 #doc-col {
2278   margin-right:0;
2279 }
2280 #doc-content-container {
2281   margin-left: 291px
2282 }
2283 #doc-header, #doc-content {
2284   padding: 1em 2em;
2285 }
2286 #doc-header {
2287   background: #f7f7f7;
2288 }
2289 #doc-header h1 {
2290   line-height: 0;
2291   margin-bottom: 15px;
2292 }
2293 #api-info-block {
2294   float: right;
2295   font-weight: bold;
2296 }
2297 #api-info-block a, #api-info-block a:active, #api-info-block a:visited {
2298   color: #222;
2299 }
2300 #api-info-block a:hover, #api-info-block a:focus {
2301   color: #33B5E5;
2302 }
2303 #api-nav-header {
2304   height:19px; /* plus 16px padding = 35; same as #nav li */
2305   font-size:14px;
2306   padding: 8px 0;
2307   margin: 0;
2308   border-bottom: 1px solid #CCC;
2309   background:#e9e9e9;
2310   background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */
2311
2312 }
2313 #api-nav-title {
2314   padding:0 5px;
2315   white-space:nowrap;
2316 }
2317
2318 #api-level-toggle {
2319   float:right;
2320   padding:0 5px;
2321 }
2322
2323 #api-level-toggle label {
2324   margin:0;
2325   vertical-align:top;
2326   line-height: 19px;
2327   font-size:13px;
2328   height: 19px;
2329 }
2330
2331 #api-level-toggle .select-wrapper {
2332   width: 35px;
2333   display: inline-block;
2334   overflow: hidden;
2335 }
2336 #api-level-toggle select {
2337   border: 0;
2338   appearance:none;
2339   -moz-appearance:none;
2340   -webkit-appearance: none;
2341   background: transparent url(../images/arrows-up-down.png) 23px 5px no-repeat;
2342   color: #222;
2343   height: 19px;
2344   line-height: 19px;
2345   padding: 0;
2346   margin:1px 0 0 0;
2347   width:150%;
2348   font-size:13px;
2349   vertical-align:top;
2350   outline:0;
2351 }
2352
2353
2354 /* Toggle for revision notes and stuff */
2355 div.toggle-content.closed .toggle-content-toggleme {
2356   display:none;
2357 }
2358
2359 #jd-content img.toggle-content-img {
2360   margin:0 5px 5px 0;
2361 }
2362 div.toggle-content p {
2363   margin:10px 0 0;
2364 }
2365 div.toggle-content-toggleme {
2366   padding:0 0 0 15px;
2367 }
2368
2369
2370 /* API LEVEL FILTERED MEMBERS */
2371
2372 .absent,
2373 .absent a:link,
2374 .absent a:visited,
2375 .absent a:hover,
2376 .absent * {
2377   color:#bbb !important;
2378   cursor:default !important;
2379   text-decoration:none !important;
2380 }
2381 #devdoc-nav li.absent.selected,
2382 #devdoc-nav li.absent.selected *,
2383 #devdoc-nav div.label.absent.selected,
2384 #devdoc-nav div.label.absent.selected * {
2385   background-color:#eaeaea !important;
2386 }
2387 .absent h4.jd-details-title,
2388 .absent h4.jd-details-title * {
2389   background-color:#f6f6f6 !important;
2390 }
2391 .absent img {
2392   opacity: .3;
2393   filter: alpha(opacity=30);
2394   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
2395 }
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405 /* JQUERY RESIZABLE STYLES */
2406 .ui-resizable { position: relative; }
2407 .ui-resizable-handle { position: absolute; display: none; font-size: 0.1px; z-index:1; }
2408 .ui-resizable .ui-resizable-handle { display: block; border-bottom: 1px solid #e4e4e4; }
2409 /*body .ui-resizable-disabled .ui-resizable-handle { display: none; }
2410 body .ui-resizable-autohide .ui-resizable-handle { display: none; }*/
2411 .ui-resizable-s { cursor: s-resize; height: 10px; width: 100% !important; bottom: -11px; left: 0;
2412 border-bottom: solid 1px #ededed;
2413   background: #f7f7f7 url("../images/resizable-s2.png") no-repeat scroll center center; }
2414 /*
2415 .ui-resizable-e {
2416 cursor: e-resize; width: 10px; right: 0; top: 0; height: 100%; border-right: solid
2417 1px #ededed;background: #f7f7f7 url("../images/resizable-e2.png") no-repeat scroll center center; }
2418 */
2419
2420 /* --------------------------------------------------------------------------
2421 Lightbox
2422 */
2423 .lightbox {
2424   width: 769px;
2425   padding: 1.5em;
2426   margin: 0 auto;
2427   border: solid 1px #dcdcdc;
2428   background: #fff;
2429   -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2430   -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
2431   box-shadow: 1px 1px 5px rgba(0,0,0,0.1)
2432 }
2433 .lightbox .header {
2434   float: left;
2435   width: 720px;
2436   margin: -10px 20px 10px 0;
2437 }
2438 .lightbox .close {
2439   float: right;
2440   width: 10px;
2441   height: 10px;
2442   margin: -10px -10px 10px 0;
2443   text-indent: -1000em;
2444   background: url(../images/close.png) no-repeat 0 0;
2445 }
2446 .lightbox .close:hover, .lightbox .close:focus {
2447   background-position: -10px 0;
2448 }
2449
2450
2451 /* Styles for toggleable divs */
2452 .toggleable {
2453   padding: .25em 1em 0em 1em;
2454   margin-bottom: 0;
2455 }
2456 .toggleme {
2457   padding: 1em 1em 0 2em;
2458   line-height:1em;
2459 }
2460 .toggleable a {
2461   text-decoration:none;
2462 }
2463 .toggleme a {
2464   text-decoration:underline;
2465 }
2466
2467 .toggleable.closed .toggleme {
2468   display:none;
2469 }
2470 #jd-content .toggle-img {
2471   margin:0;
2472 }
2473
2474 /* --------------------------------------------------------------------------
2475 Styles for samples project trees and code browsing in resources tab
2476 */
2477
2478 .structure-dir {
2479 background-image:url(../../assets/images/folder.png);
2480 background-repeat:no-repeat;
2481 background-position:16px 2px;
2482   margin:.25em 0 0 0;
2483   padding:0 0 0 0;
2484 }
2485
2486 .structure-toggleme {
2487   margin:0 0 0 3em;
2488   padding:0 0 0 0;
2489   text-decoration:none;
2490 }
2491
2492 .structure-java{
2493 background-image:url(../../assets/images/file-java.png);
2494 background-repeat:no-repeat;
2495 background-position:0px 2px;
2496   margin:.3em 0 0 0;
2497   padding:.3em 0 .3em 22px;
2498 }
2499
2500 .structure-file {
2501 background-image:url(../../assets/images/file-generic.png);
2502 background-repeat:no-repeat;
2503 background-position:0px 2px;
2504   margin:.3em 0 0 0;
2505   padding:.3em 0 .3em 22px;
2506 }
2507
2508 .structure-xml {
2509 background-image:url(../../assets/images/file-xml.png);
2510 background-repeat:no-repeat;
2511 background-position:0px 2px;
2512   margin:.3em 0 0 0;
2513   padding:.3em 0 .25em 22px;
2514 }
2515
2516 .structure-img {
2517 background-image:url(../../assets/images/file-image.png);
2518 background-repeat:no-repeat;
2519 background-position:0px 2px;
2520   margin:.3em 0 0 0;
2521   padding:.3em 0 .25em 22px;
2522 }
2523
2524 .structure-manifest {
2525 background-image:url(../../assets/images/file-manifest.png);
2526 background-repeat:no-repeat;
2527   margin:.0 0 0 1.25em;
2528   padding:0 0 0 22px;
2529   text-decoration:none;
2530 }
2531
2532 #jd-content .structure-toggle-img {
2533   margin:.5em 0 0 0;
2534 padding-right:2.1em;
2535 }
2536
2537 .dirInfo {
2538   margin-left:2em;
2539 }
2540
2541 .structure-dir a {
2542   text-decoration:none;
2543 }
2544
2545 .structure-manifest a {
2546   text-decoration: none;
2547 }
2548 .structure-file a {
2549   text-decoration: none;
2550 }
2551
2552 .sampleEmbed {
2553   background-color:rgb(249, 249, 249);
2554 }
2555
2556 .sampleEmbed ol.lineNumbers {
2557   list-style-type: decimal;
2558   padding-left:1em;
2559 }
2560
2561 .sampleEmbed ol.lineNumbers li {
2562 border-left:1px solid #ddd;
2563 border-right:1px solid #ddd;
2564 color:gray;
2565 background-color:#f7f7f7;
2566 margin:0 0 0 24px;
2567 padding: 2px 2px 2px 6px;
2568 }
2569
2570 .sampleEmbed ol.lineNumbers li:hover {
2571 background: #efefef;
2572 }
2573
2574 /* --------------------------------------------------------------------------
2575 Styles for raw formatted line numbers (not used with listformatted version)
2576 div.sampleLine div.lineNumber {
2577   display: inline;
2578 }
2579 div.sampleLine div.lineCode {
2580   display: inline;
2581   padding-left:6px;
2582 }
2583 div.sampleLine {
2584   padding:0;
2585   margin:0;
2586 }*/
2587
2588 /* --------------------------------------------------------------------------
2589 Butterbar
2590 */
2591 #butterbar-wrapper {
2592   position:absolute;
2593   top:0;
2594   left:0;
2595   width:100%;
2596 }
2597 #butterbar {
2598   width:940px;
2599   margin:0 auto;
2600 }
2601 #butterbar-message {
2602   background-color:#f80;
2603   float:right;
2604   font-size:12px;
2605   font-weight:bold;
2606   padding:0 10px;
2607   border-radius: 0 0 5px 5px;
2608 }
2609 #butterbar-message a {color:#fff !important}
2610 #butterbar-message a:hover {text-decoration:underline;}
2611
2612 /* --------------------------------------------------------------------------
2613 Misc
2614 */
2615
2616
2617 .clearfix:before, .clearfix:after {
2618   content: "";
2619   display: table
2620 }
2621 .clearfix:after {
2622   clear: both
2623 }
2624 .clearfix {
2625   *zoom: 1
2626 }
2627 table.blank th, table.blank td {
2628     border: 0;
2629   background: none
2630 }
2631 .caption {
2632   margin: 0.5em 0 2em 0;
2633   color: #000;
2634   font-size: 11.5px;
2635 }
2636
2637 .nolist {
2638   list-style:none;
2639   margin-left:0;
2640 }
2641 #tb .nolist {
2642   margin-left:15px;
2643 }
2644
2645 dl.xml>dt {
2646   text-transform:uppercase;
2647 }
2648 dl.xml dl.attr {
2649   margin-top:0;
2650 }
2651
2652 pre.classic {
2653   background-color:transparent;
2654   border:none;
2655   padding:0;
2656 }
2657
2658 p.img-caption {
2659   margin: -10px 0 20px;
2660   font-size:13px;
2661   color:#666;
2662 }
2663
2664 div.figure,
2665 div.figure-right {
2666   float:right;
2667   clear:right;
2668   margin:10px 0 0 0;
2669   padding:0 0 0 20px;
2670   /* width must be defined w/ an inline style matching the image width */
2671 }
2672
2673 div.figure-left {
2674   float:left;
2675   clear:left;
2676   margin:10px 0 0 0;
2677   padding:0 20px 0 0;
2678   /* width must be defined w/ an inline style matching the image width */
2679 }
2680
2681 img.frame {
2682   border:1px solid #DDD;
2683   padding:4px;
2684 }
2685
2686 p.table-caption {
2687   margin: 0 0 4px 0;
2688   font-size:13px;
2689   color:#666;
2690 }
2691
2692 p.code-caption {
2693   margin-bottom: 4px;
2694   font: 12px/1.5 monospace;
2695   color:#666;
2696 }
2697
2698 div.note,
2699 div.caution,
2700 div.warning {
2701   margin: 0 0 15px;
2702 }
2703
2704 p.note, div.note,
2705 p.caution, div.caution,
2706 p.warning, div.warning {
2707   padding: 0 0 0 10px;
2708   border-left: 4px solid;
2709 }
2710
2711 p.note, div.note {
2712   border-color: #258AAF;
2713 }
2714
2715 p.caution, div.caution {
2716   border-color: #FF8800;
2717 }
2718
2719 p.warning, div.warning {
2720   border-color: #ff4443;
2721 }
2722
2723 div.note.design {
2724   border-left: 4px solid #33B5E5;
2725 }
2726
2727 div.note.develop {
2728   border-left: 4px solid #F80;
2729 }
2730
2731 div.note.distribute {
2732   border-left: 4px solid #9C0;
2733 }
2734
2735 .note p, .caution p, .warning p {
2736   margin:0 0 5px;
2737 }
2738
2739 .note p:last-child, .caution p:last-child, .warning p:last-child {
2740   margin-bottom:0;
2741 }
2742
2743 body.about blockquote {
2744   display:block;
2745   float:right;
2746   width:280px;
2747   font-size:20px;
2748   font-style:italic;
2749   line-height:24px;
2750   color:#33B5E5;
2751   margin:0 0 20px 30px;
2752 }
2753
2754 div.design-announce p {
2755   margin:0 0 10px;
2756 }
2757
2758 #devdoc-nav a.totop {
2759   display:block;
2760   top:0;
2761   width:inherit;
2762   background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%;
2763   text-indent:-9999em;
2764 }
2765 #devdoc-nav a.totop {
2766   position:fixed;
2767   display:none;
2768 }
2769 #devdoc-nav a.totop:hover {
2770   background-color:#33B5E5;
2771 }
2772
2773 .content-footer a.totop {
2774   text-transform:uppercase;
2775   line-height:30px;
2776 }
2777
2778 .expandable {
2779   height:34px;
2780   padding-left:20px;
2781   position:relative;
2782 }
2783 .expandable:before {
2784   content: '';
2785   background-image: url(../images/styles/disclosure_down.png);
2786   background-repeat:no-repeat;
2787   background-position: -12px -9px;
2788   width: 20px;
2789   height: 20px;
2790   display: inline-block;
2791   position: absolute;
2792   top: 0;
2793   left: 0; }
2794 }
2795 .expandable.expanded:before {
2796   background-image: url(../images/styles/disclosure_up.png);
2797 }
2798
2799 /* notice box for cross links between Design/Develop docs */
2800 a.notice-developers,
2801 a.notice-designers {
2802   float:right;
2803   clear:right;
2804   width:238px;
2805   min-height:50px;
2806   margin:0 0 20px 20px;
2807   border:1px solid #ddd;
2808 }
2809 a.notice-developers.wide,
2810 a.notice-designers.wide {
2811   width:278px;
2812 }
2813 a.notice-developers div,
2814 a.notice-designers div {
2815   min-height:40px;
2816   background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2817   background-size:40px 40px;
2818   padding:10px 10px 10px 60px;
2819 }
2820 a.notice-designers div {
2821   background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2822   background-size:40px 40px;
2823 }
2824 a.notice-developers:hover,
2825 a.notice-designers:hover {
2826   background:#eee;
2827 }
2828 a.notice-developers h3,
2829 a.notice-designers h3 {
2830   font-size:14px;
2831   font-weight:normal;
2832   text-transform:uppercase;
2833   color:#000 !important;
2834   margin:0;
2835 }
2836 a.notice-developers p,
2837 a.notice-designers p {
2838   margin:0;
2839   line-height:16px;
2840 }
2841 a.notice-developers.left,
2842 a.notice-designers.left {
2843   margin-left:0;
2844   float:left;
2845 }
2846
2847
2848 /* hide nested list items; companion to hideNestedLists() */
2849 .hide-nested li ol,
2850 .hide-nested li ul {
2851   display:none;
2852 }
2853
2854 a.header-toggle {
2855   display:block;
2856   float:right;
2857   text-transform:uppercase;
2858   font-size:.8em !important;
2859   font-weight:normal;
2860   margin-top:2px;
2861 }
2862
2863
2864 /* -----------------------------------------------
2865 good/bad example containers
2866 */
2867
2868 div.example-block {
2869   background-repeat: no-repeat;
2870   background-position:10px 8px;
2871   background-color:#ccc;
2872   padding:4px;
2873   margin:.8em auto 1.5em 2em;
2874   width:260px;
2875   float:right;
2876 }
2877 /* red container */
2878 .example-block.bad {
2879   background-image: url(/images/example-bad.png);
2880   background-color:#f4cccc;
2881 }
2882 /* green container */
2883 .example-block.good {
2884   background-image: url(/images/example-good.png);
2885   background-color:#d9ead3;
2886 }
2887 /* container heading div */
2888 #jd-content .example-block .heading {
2889   font-weight:bold;
2890   margin:6px 0 9px 36px;
2891   padding:6px auto;
2892 }
2893 /* container image (if any) */
2894 #jd-content .example-block img {
2895   margin:0;
2896   padding:0px;
2897 }
2898
2899 .example-block table {
2900   margin:0;
2901 }
2902
2903 /* -----------------------------------------------
2904 Dialog box for popup messages
2905 */
2906
2907 div.dialog {
2908   height:0;
2909   margin:0 auto;
2910 }
2911
2912 div.dialog>div {
2913   z-index:99;
2914   position:fixed;
2915   margin:70px 0;
2916   width: 391px;
2917   height: 200px;
2918   background: #F7F7F7;
2919 -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2920 -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
2921 box-shadow: 0 0 15px rgba(0,0,0,0.5);
2922 }
2923 /* IE6 can't position fixed */
2924 * html div.dialog div { position:absolute; }
2925
2926
2927 div#deprecatedSticker {
2928   display:none;
2929   z-index:99;
2930   position:fixed;
2931   right:15px;
2932   top:114px;
2933   margin:0;
2934   padding:1em;
2935   background:#FFF;
2936   border:1px solid #dddd00;
2937   box-shadow:-5px 5px 10px #ccc;
2938   -moz-box-shadow:-5px 5px 10px #ccc;
2939   -webkit-box-shadow:-5px 5px 10px #ccc;
2940 }
2941
2942 div#naMessage {
2943   display:none;
2944   width:555px;
2945   height:0;
2946   margin:0 auto;
2947 }
2948
2949 div#naMessage div {
2950   z-index:99;
2951   width:450px;
2952   position:fixed;
2953   margin:50px 0;
2954   padding:4em 4em 3em;
2955   background:#FFF;
2956   border:1px solid #999;
2957   box-shadow:-10px 10px 40px #888;
2958   -moz-box-shadow:-10px 10px 40px #888;
2959   -webkit-box-shadow:-10px 10px 40px #888;
2960 }
2961 /* IE6 can't position fixed */
2962 * html div#naMessage div { position:absolute; }
2963
2964 div#naMessage strong {
2965   font-size:1.1em;
2966 }
2967
2968
2969 /* --------------------------------------------------------------------------
2970 Slideshow Controls & Next/Prev
2971 */
2972 .slideshow-next, .slideshow-prev {
2973   width: 20px;
2974   height: 36px;
2975   text-indent: -1000em;
2976 }
2977 .slideshow-container {
2978   margin: 2em 0;
2979 }
2980 .slideshow-container:before, .slideshow-container:after {
2981   content: "";
2982   display: table;
2983   clear: both;
2984 }
2985 a.slideshow-next, a.slideshow-next:visited {
2986
2987   float: right;
2988
2989   background: url(../images/arrow-right.png) no-repeat 0 0
2990
2991 }
2992
2993 a.slideshow-prev, a.slideshow-prev:visited {
2994
2995   float: left;
2996
2997   background: url(../images/arrow-left.png) no-repeat 0 0
2998
2999 }
3000
3001 .slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3002
3003   background-position: 0 -36px
3004
3005 }
3006
3007 .slideshow-next:active, .slideshow-prev:active {
3008
3009   background-position: 0 -72px
3010
3011 }
3012 .slideshow-nav {
3013   width: 74px;
3014   margin: 0 auto;
3015 }
3016 .slideshow-nav a, .slideshow-nav a:visited {
3017   display: inline-block;
3018   width: 12px;
3019   height: 12px;
3020   margin: 0 2px 20px 2px;
3021   background: #ccc;
3022   -webkit-border-radius: 50%;
3023   -moz-border-radius: 50%;
3024   border-radius: 50%;
3025 }
3026 .slideshow-nav a:hover, .slideshow-nav a:focus {
3027
3028   background: #33B5E5
3029 }
3030
3031 .slideshow-nav a:active {
3032
3033   background: #1e799a;
3034   background: #ebebeb;
3035   -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3036   -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3037   box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3038 }
3039 .slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3040   background: #33B5E5
3041 }
3042 /* --------------------------------------------------------------------------
3043 Tabs
3044 */
3045 ul.tabs {
3046   padding: 0;
3047   margin: 2em 0 0 0;
3048 }
3049 ul.tabs:before, ul.tabs:after {
3050   content: "";
3051   display: table;
3052   clear: both;
3053 }
3054 ul.tabs li {
3055   list-style-type: none;
3056   float: left;
3057 }
3058 ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3059   display: block;
3060   height: 36px;
3061   line-height: 36px;
3062   padding: 0 15px;
3063   margin-right: 2px;
3064   color: #222;
3065   -moz-border-radius-topleft: 2px;
3066   -moz-border-radius-topright: 2px;
3067   -moz-border-radius-bottomright: px;
3068   -moz-border-radius-bottomleft: px;
3069   -webkit-border-radius: 2px 2px px px;
3070   border-radius: 2px 2px px px;
3071   border-top: solid 1px #ebebeb;
3072   border-left: solid 1px #ebebeb;
3073   border-right: solid 1px #ebebeb;
3074   background-color: #fff;
3075     background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3076     background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3077     background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3078     background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3079     background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3080     background-image: linear-gradient(top, #ffffff, #fafafa);
3081     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3082 EndColorStr='#fafafa');
3083 }
3084 ul.tabs li a:hover {
3085   color: #33B5E5;
3086 }
3087 ul.tabs li a.selected {
3088   height: 37px;
3089   color: #33B5E5;
3090   background-color: #f7f7f7;
3091   background-image: none;
3092   border-color: #ddd;
3093 }
3094 .tab-content {
3095   padding: 1.2em;
3096   margin: -1px 0 2em 0;
3097   -webkit-border-radius: 2px;
3098     -moz-border-radius: 2px;
3099     border-radius: 2px;
3100   border: solid 1px #ddd;
3101   background: #f7f7f7;
3102 }
3103 /* --------------------------------------------------------------------------
3104 Feature Boxes
3105 */
3106 .feature-box {
3107   width: 291px;
3108   height: 200px;
3109   position: relative;
3110   background: #F7F7F7;
3111 }
3112 .box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3113   z-index: 100;
3114   position: absolute;
3115   background-color: #aaa;
3116 }
3117 .box-border .top, .box-border .bottom {
3118   width: 291px;
3119   height: 1px;
3120 }
3121 .dialog .box-border .top,
3122 .dialog .box-border .bottom { width:391px; }
3123
3124 .box-border .left, .box-border .right {
3125   width: 1px;
3126   height: 8px;
3127 }
3128 .box-border .top { top: 0; left: 0 }
3129 .box-border .top .left { top: 1px; left: 0 }
3130 .box-border .top .right { top: 1px; right: 0 }
3131 .box-border .bottom .left { top: -8px; left: 0 }
3132 .box-border .bottom { top: 200px; left: 0 }
3133 .box-border .bottom .right { top: -8px; right: 0 }
3134
3135 .feature-box h4,
3136 .dialog h4 {
3137     margin: 15px 18px 10px;
3138     padding:0;
3139 }
3140
3141 .feature-box p,
3142 .dialog p {
3143     margin: 10px 18px;
3144     padding:0;
3145 }
3146 .feature-box .link,
3147 .dialog .link {
3148     border-top: 1px solid #dedede;
3149     bottom: 0;
3150     position: absolute;
3151     width: inherit;
3152 }
3153 .feature-box a, .feature-box h4,
3154 .dialog a, .dialog h4 {
3155     -webkit-transition: color .4s ease;
3156     -moz-transition: color .4s ease;
3157     -o-transition: color .4s ease;
3158     transition: color .4s ease;
3159 }
3160 .feature-box:hover {
3161   cursor: pointer;
3162 }
3163 .feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3164 .left, .feature-box:hover .right {
3165   background-color: #33B5E5;
3166 }
3167 .feature-box:hover h4, .feature-box:hover a {
3168   color: #33B5E5;
3169 }
3170 /* --------------------------------------------------------------------------
3171 Page-Specific Styles
3172 */
3173 .colors {
3174   position: relative;
3175   float: left;
3176   width: 92px;
3177   margin: 40px 0 20px;
3178 }
3179 .colors div {
3180   color: #fff;
3181   font-size: 11.5px;
3182   width: 82px;
3183   height: 82px;
3184   margin-top:-30px;
3185   line-height: 82px;
3186   text-align: center;
3187   border: solid 5px #fff;
3188   -webkit-border-radius: 50%;
3189   -moz-border-radius: 50%;
3190   border-radius: 50%;
3191 }
3192
3193
3194
3195
3196
3197
3198
3199
3200
3201
3202
3203
3204
3205
3206 /* ########### REFERENCE DOCS ################## */
3207
3208 #packages-nav h2,
3209 #classes-nav h2 {
3210   font-size:18px;
3211   margin:0;
3212   padding:0 0 0 4px;
3213 }
3214
3215 #jd-header {
3216   padding: 0 0 5px;
3217   margin: 20px 0 10px;
3218   font-size:13px;
3219   border-bottom:solid 1px #ccc;
3220 }
3221
3222 #jd-header h1 {
3223   margin:0;
3224   padding:0;
3225 }
3226
3227 /* page-top-right container for reference pages (holds
3228 links to summary tables) */
3229 #api-info-block {
3230   font-size:13px;
3231   margin:20px 0 0;
3232   padding:0 10px 6px;
3233   font-weight:normal;
3234   float:right;
3235   text-align:right;
3236   color:#999;
3237   max-width:70%;
3238 }
3239
3240 #api-info-block div.api-level {
3241   font-weight:bold;
3242   font-size:inherit;
3243   float:none;
3244   color:#222;
3245   padding:0;
3246   margin:0;
3247 }
3248
3249 /* inheritance table */
3250 .jd-inheritance-table {
3251   border-spacing:0;
3252   margin:0;
3253   padding:0;
3254   font-size:13px;
3255   background-color:transparent;
3256 }
3257 .jd-inheritance-table tr td {
3258   border: none;
3259   margin: 0;
3260   padding: 0;
3261   background-color:transparent;
3262 }
3263 .jd-inheritance-table .jd-inheritance-space {
3264   font-weight:bold;
3265   width:1em;
3266 }
3267 .jd-inheritance-table .jd-inheritance-interface-cell {
3268   padding-left: 17px;
3269 }
3270
3271
3272
3273 .jd-sumtable a {
3274   text-decoration:none;
3275 }
3276
3277 .jd-sumtable a:hover {
3278   text-decoration:underline;
3279 }
3280
3281 /* the link inside a sumtable for "Show All/Hide All" */
3282 .toggle-all {
3283   display:block;
3284   float:right;
3285   font-weight:normal;
3286   font-size:0.9em;
3287 }
3288
3289 /* adjustments for in/direct subclasses tables */
3290 .jd-sumtable.jd-sumtable-subclasses {
3291   margin: 1em 0 0 0;
3292   max-width:968px;
3293   background-color:transparent;
3294   font-size:13px;
3295 }
3296
3297 /* extra space between end of method name and open-paren */
3298 .sympad {
3299   margin-right: 2px;
3300 }
3301
3302 /* right alignment for the return type in sumtable */
3303 .jd-sumtable .jd-typecol {
3304   text-align:right;
3305 }
3306
3307 /* adjustments for the expando table-in-table */
3308 .jd-sumtable-expando {
3309   margin:.5em 0;
3310   padding:0;
3311 }
3312
3313 /* a div that holds a short description */
3314 .jd-descrdiv {
3315   padding:3px 1em 0 1em;
3316   margin:0;
3317   border:0;
3318 }
3319
3320 #jd-content img.jd-expando-trigger-img {
3321   padding:0 4px 4px 0;
3322   margin:0;
3323 }
3324
3325 .jd-sumtable-subclasses div#subclasses-direct,
3326 .jd-sumtable-subclasses div#subclasses-indirect {
3327   margin:0 0 0 13px;
3328 }
3329
3330
3331
3332 /********* MEMBER REF *************/
3333
3334
3335 .jd-details {
3336 /*  border:1px solid #669999;
3337   padding:4px; */
3338   margin:0 0 1em;
3339 }
3340
3341 /* API reference: a container for the
3342 .tagdata blocks that make up the detailed
3343 description */
3344 .jd-details-descr {
3345   padding:0;
3346   margin:.5em .25em;
3347 }
3348
3349 /* API reference: a block containing
3350 a detailed description, a params table,
3351 seealso list, etc */
3352 .jd-tagdata {
3353   margin:.5em 1em;
3354 }
3355
3356 .jd-tagdata p {
3357   margin:0 0 1em 1em;
3358 }
3359
3360 /* API reference: adjustments to
3361 the detailed description block */
3362 .jd-tagdescr {
3363   margin:.25em 0 .75em 0;
3364 }
3365
3366 .jd-tagdescr ol,
3367 .jd-tagdescr ul {
3368   margin:0 2.5em;
3369   padding:0;
3370 }
3371
3372 .jd-tagdescr table,
3373 .jd-tagdescr img {
3374   margin:.25em 1em;
3375 }
3376
3377 .jd-tagdescr li {
3378 margin:0 0 .25em 0;
3379 padding:0;
3380 }
3381
3382 /* API reference: heading marking
3383 the details section for constants,
3384 attrs, methods, etc. */
3385 h4.jd-details-title {
3386   font-size:1.15em;
3387   background-color: #E2E2E2;
3388   margin:1.5em 0 .6em;
3389   padding:3px 95px 3px 3px; /* room for api-level */
3390 }
3391 body.google h4.jd-details-title {
3392   background-color: #FFF;
3393   padding-top:5px;
3394   border-top: 1px solid #ccc;
3395 }
3396 body.google table.jd-sumtable th {
3397   background-color: #FFF;
3398   color:#000;
3399 }
3400
3401 h4.jd-tagtitle {
3402   margin:0;
3403 }
3404
3405 h4 .normal {
3406   font-weight:normal;
3407 }
3408
3409 /* API reference: heading for "Parameters", "See Also", etc.,
3410 in details sections */
3411 h5.jd-tagtitle {
3412   margin:0 0 .25em 0;
3413   font-size:1em;
3414 }
3415
3416 .jd-tagtable {
3417   margin:0;
3418   background-color:transparent;
3419   width:auto;
3420 }
3421
3422 .jd-tagtable td,
3423 .jd-tagtable th {
3424   border:none;
3425   background-color:#fff;
3426   vertical-align:top;
3427   font-weight:normal;
3428   padding:2px 10px;
3429 }
3430
3431 .jd-tagtable th {
3432   font-style:italic;
3433 }
3434
3435 /* Inline api level indicator for methods */
3436 div.api-level {
3437   font-size:.8em;
3438   font-weight:normal;
3439   color:#999;
3440   float:right;
3441   padding:0 8px 0;
3442   margin-top:-30px;
3443 }
3444
3445 table.jd-tagtable td,
3446 table.jd-tagtable th {
3447   background-color:transparent;
3448 }
3449
3450 table.jd-tagtable th {
3451   color:inherit;
3452 }
3453
3454
3455
3456
3457
3458
3459
3460
3461
3462
3463
3464
3465
3466
3467
3468
3469
3470
3471
3472
3473
3474
3475
3476 /* SEARCH FILTER */
3477
3478 .menu-container {
3479   position:relative;
3480 }
3481 #search_autocomplete {
3482   font-weight:normal;
3483 }
3484
3485 .search_filtered_wrapper.reference {
3486   width: 193px;
3487   float: right;
3488 }
3489 .search_filtered_wrapper.docs {
3490   width:875px;
3491   float: left;
3492   position:absolute;
3493   top:26px;
3494   right:66px;
3495 }
3496 .suggest-card {
3497   position:relative;
3498   width:170px;
3499   min-height:90px;
3500   padding:5px;
3501   border: solid 1px #C5C5C5;
3502   background: white;
3503   top: 15px;
3504   margin-right:-5px;
3505   -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3506   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3507   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3508 }
3509 .suggest-card.reference {
3510   position:absolute;
3511   z-index:999;
3512   min-width:171px; /* +padding and border makes this match input width */
3513   min-height:93px; /* add 3px because this has 1 not 4px top border */
3514   width:auto;
3515   top:41px;
3516   margin:0;
3517 }
3518 .suggest-card.develop {
3519   z-index:997;
3520   border-top: solid 4px #F80;
3521   float:right;
3522 }
3523 .suggest-card.design {
3524   z-index:996;
3525   border-top: solid 4px #33b5e5;
3526   float:right;
3527 }
3528 .suggest-card.distribute {
3529   z-index:995;
3530   border-top: solid 4px #9C0;
3531   float:right;
3532 }
3533 .child-card {
3534   width:100%;
3535 }
3536 .suggest-card.dummy {
3537   width:172px;
3538   float:right;
3539   border:0;
3540   background:transparent;
3541   -moz-box-shadow: none;
3542   -webkit-box-shadow: none;
3543   box-shadow: none;
3544 }
3545
3546 ul.search_filtered {
3547   min-width:100%;
3548   list-style: none;
3549   margin: 0 0 5px;
3550   padding: 0;
3551 }
3552 .search_filtered .jd-selected {
3553   background:#efefef;
3554   cursor:pointer;
3555 }
3556 .search_filtered .jd-selected,
3557 .search_filtered .jd-selected a {
3558     color:#09C !important;
3559 }
3560
3561 .no-display {
3562   display: none;
3563 }
3564
3565 .search_filtered li.jd-autocomplete {
3566   font-size: 0.81em;
3567   border: none;
3568   margin: 0 0 2px;
3569   padding: 0;
3570   line-height:1.5em;
3571 }
3572
3573 .search_filtered li a {
3574   padding:0 5px;
3575   color:#222 !important;
3576   display:inline-block;
3577   line-height:12px;
3578 }
3579
3580 .search_filtered li.header {
3581   font-weight:bold;
3582   color:#444;
3583   border: none;
3584   margin: 8px 0 2px;
3585   padding:1px 5px;
3586   line-height:1.5em;
3587 }
3588 .search_filtered li.header.small {
3589   font-size:0.85em;
3590 }
3591
3592 .suggest-card.reference
3593 .search_filtered li.header {
3594   color:#aaa;
3595   font-size: 0.81em;
3596 }
3597
3598 .search_filtered li.header:first-child {
3599   margin: 0 0 2px;
3600 }
3601
3602 .show-item {
3603   display: table-row;
3604 }
3605 .hide-item {
3606   display: hidden;
3607 }
3608
3609
3610
3611
3612
3613 /* SEARCH RESULTS */
3614
3615
3616 #leftSearchControl .gsc-twiddle {
3617   background-image : none;
3618 }
3619
3620 #leftSearchControl td, #searchForm td {
3621   border: 0px solid #000;
3622   padding:0;
3623 }
3624
3625 #leftSearchControl .gsc-resultsHeader .gsc-title {
3626   padding-left : 0px;
3627   font-weight : bold;
3628   font-size : 13px;
3629   color:#006699;
3630   display : none;
3631 }
3632
3633 #leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3634   display : none;
3635 }
3636
3637 #leftSearchControl .gsc-resultsRoot {
3638   padding-top : 6px;
3639 }
3640
3641 #leftSearchControl div.gs-visibleUrl-long {
3642   display : block;
3643   color:#006699;
3644 }
3645
3646 #leftSearchControl .gsc-webResult {
3647   padding:0 0 20px 0;
3648 }
3649
3650 .gsc-webResult div.gs-visibleUrl-short,
3651 table.gsc-branding,
3652 .gsc-clear-button {
3653   display : none;
3654 }
3655
3656 .gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3657 .gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3658 #leftSearchControl a,
3659 #leftSearchControl a b {
3660   color:#006699;
3661 }
3662
3663 .gsc-resultsHeader {
3664   display: none;
3665 }
3666
3667 /* Disable built in search forms */
3668 .gsc-control form.gsc-search-box {
3669   display : none;
3670 }
3671 table.gsc-search-box {
3672   margin:6px 0 0 0;
3673   border-collapse:collapse;
3674 }
3675
3676 td.gsc-input {
3677   padding:0 2px;
3678   width:100%;
3679   vertical-align:middle;
3680 }
3681
3682 input.gsc-input {
3683   border:1px solid #BCCDF0;
3684   width:99%;
3685   padding-left:2px;
3686   font-size:.95em;
3687 }
3688
3689 td.gsc-search-button {
3690   text-align: right;
3691   padding:0;
3692   vertical-align:top;
3693 }
3694
3695
3696 #searchResults {
3697   overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3698 (it doesn't) */
3699   height:auto;
3700 }
3701
3702 #searchResults .gsc-control {
3703   position:relative;
3704   width:auto;
3705   padding:0 0 10px;
3706 }
3707
3708 #searchResults .gsc-tabsArea {
3709   position:relative;
3710   white-space:nowrap;
3711   float:left;
3712   width:200px;
3713 }
3714
3715 #searchResults .gsc-above-wrapper-area {
3716   display:none;
3717 }
3718
3719 #searchResults .gsc-resultsbox-visible {
3720   float:left;
3721   width:720px;
3722   margin-left:20px;
3723 }
3724
3725 #searchResults .gsc-tabHeader {
3726   padding: 3px 6px;
3727   position:relative;
3728   width:auto;
3729   display:block;
3730 }
3731
3732 #searchResults h2#searchTitle {
3733   padding:0;
3734   margin:5px 0;
3735   border:none;
3736 }
3737
3738 #searchResults h2#searchTitle em {
3739   font-style:normal;
3740   color:#33B5E5;
3741 }
3742
3743 #searchResults .gsc-table-result {
3744   margin:5px 0 10px 0;
3745   background-color:transparent;
3746 }
3747 #searchResults .gs-web-image-box, .gs-promotion-image-box {
3748   width:120px;
3749 }
3750 #searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3751   max-width:120px;
3752 }
3753
3754 #searchResults .gsc-table-result .gsc-thumbnail {
3755   padding:0 20px 0 0;
3756 }
3757
3758 #searchResults td {
3759   background-color:transparent;
3760 }
3761
3762 #searchResults .gsc-expansionArea {
3763   position:relative;
3764 }
3765 #searchResults .gsc-tabsArea .gsc-cursor-box {
3766   width:200px;
3767   padding:20px 0 0 1px;
3768 }
3769 #searchResults .gsc-cursor-page {
3770   display:inline-block;
3771   float:left;
3772   margin:-1px 0 0 -1px;
3773   padding:0;
3774   height:27px;
3775   width:27px;
3776   text-align:center;
3777   line-height:2;
3778 }
3779
3780 #searchResults .gsc-tabHeader.gsc-tabhInactive,
3781 #searchResults .gsc-cursor-page {
3782   text-decoration:none;
3783   color:#258AAF;
3784   border: solid 1px #DADADA;
3785 }
3786
3787 #searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
3788 #searchResults .gsc-cursor-page:hover {
3789   border-color: #DBDBDB;
3790   background-color: #F3F3F3;
3791   background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
3792   background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
3793   background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
3794   background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
3795   background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
3796   background-image: linear-gradient(top, #F9F9F9, #ECECEC);
3797   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
3798 EndColorStr='#ececec');
3799   color: #33B5E5;
3800 }
3801
3802 #searchResults .gsc-tabHeader.gsc-tabhActive,
3803 #searchResults .gsc-tabHeader.gsc-tabhActive:hover,
3804 #searchResults .gsc-cursor-page.gsc-cursor-current-page,
3805 #searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
3806   color:#fff;
3807   background-color: #09C;
3808   background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
3809   background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
3810   background-image: -moz-linear-gradient(top, #2FADDB, #09C);
3811   background-image: -ms-linear-gradient(top, #2FADDB, #09C);
3812   background-image: -o-linear-gradient(top, #2FADDB, #09C);
3813   background-image: linear-gradient(top, #2FADDB, #09C);
3814   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
3815   border: 1px solid #3990AB;
3816   z-index:100;
3817 }
3818
3819 }
3820
3821
3822
3823
3824
3825
3826
3827
3828
3829
3830
3831
3832
3833 /*********** PREVIOUSLY dac-styles.css ***************/
3834
3835
3836 #header {
3837   border-bottom:0;
3838 }
3839
3840 #header .wrap {
3841   max-width:940px;
3842   height:41px;
3843   border-bottom:1px solid;
3844   border-color: #ccc;
3845   position:relative;
3846 }
3847
3848 .about #header .wrap {
3849   border-color: #9933CC;
3850 }
3851
3852 .design #header .wrap {
3853   border-color: #33b5e5;
3854 }
3855
3856 .develop #header .wrap {
3857   border-color: #F80;
3858 }
3859
3860 .distribute #header .wrap {
3861   border-color: #9C0;
3862 }
3863
3864 .logo a {
3865   width:123px;
3866   float:left;
3867 }
3868
3869 #header .logo {
3870   margin-top: -6px;
3871   margin-left: 0px;
3872   margin-bottom:0px;
3873   width: 160px;
3874   padding-right:10px;
3875 }
3876
3877 .search {
3878   height:25px;
3879   margin-top: -3px;
3880   margin-bottom: 0px;
3881 }
3882
3883
3884
3885 /* Quicknav */
3886 .btn-quicknav {
3887   width:20px;
3888   height:28px;
3889   float:left;
3890   margin-left:6px;
3891   padding-right:10px;
3892   position:relative;
3893   cursor:pointer;
3894   border-right:1px solid #CCC;
3895 }
3896
3897 .btn-quicknav a {
3898   zoom:1;
3899   position:absolute;
3900   top:13px;
3901   left:5px;
3902   display:block;
3903   text-indent:-9999em;
3904   width:10px;
3905   height:5px;
3906   background:url(../images/quicknav_arrow.png) no-repeat;
3907 }
3908
3909 .btn-quicknav a.arrow-active {
3910   background-position: 0 -5px;
3911   display:none;
3912 }
3913
3914 #header-wrap.quicknav a.arrow-inactive {
3915   display:none;
3916 }
3917
3918 .btn-quicknav.active a.arrow-active {
3919   display:block;
3920 }
3921
3922 .nav-x li {
3923   display:block;
3924   float:left;
3925   margin-right:45px;
3926   -webkit-transition: all 0.25s linear;
3927       -moz-transition: all 0.25s linear;
3928        -ms-transition: all 0.25s linear;
3929         -o-transition: all 0.25s linear;
3930            transition: all 0.25s linear;
3931 }
3932
3933 #header-wrap.quicknav .nav-x li {
3934   min-width:160px;
3935   margin-right:20px;
3936 }
3937
3938 #header-wrap.quicknav li.last {
3939   margin-right:0px;
3940 }
3941
3942 #quicknav {
3943  float:none;
3944  clear:both;
3945  margin-left:180px;
3946  margin-top:-30px;
3947  display:none;
3948  overflow:hidden;
3949 }
3950
3951 #header-wrap.quicknav #quicknav {
3952
3953 }
3954
3955 #quicknav ul {
3956   margin:10px 0;
3957   padding:0;
3958 }
3959
3960 #quicknav ul li.design {
3961   border-top:1px solid #33b5e5;
3962 }
3963
3964 #quicknav ul li.develop {
3965   border-top:1px solid #FF8800;
3966 }
3967
3968 #quicknav ul li.distribute {
3969   border-top:1px solid #99cc00;
3970 }
3971
3972 #quicknav ul li {
3973   display:block;
3974   float:left;
3975   margin:0 20px 0 0;
3976   min-width:140px;
3977 }
3978
3979 #quicknav ul li.last {
3980   margin-right:0px;
3981 }
3982
3983 #quicknav ul li ul li {
3984   float:none;
3985 }
3986
3987 #quicknav ul li ul li a {
3988   color:#222;
3989 }
3990
3991 #quicknav ul li li ul,
3992 #quicknav ul li li ul li {
3993   margin:0;
3994 }
3995
3996 #quicknav ul li li ul li:before {
3997   content:"\21B3";
3998 }
3999
4000 #header-wrap {
4001    -webkit-transition: all 0.25s ease-out;
4002       -moz-transition: all 0.25s ease-out;
4003        -ms-transition: all 0.25s ease-out;
4004         -o-transition: all 0.25s ease-out;
4005            transition: all 0.25s ease-out;
4006
4007 }
4008
4009 #header-wrap.quicknav {
4010   height:196px;
4011
4012 }
4013
4014 /* SEARCH AND MORE */
4015 .search {
4016   position: absolute;
4017   width: 50px;
4018   height:28px;
4019   display: block;
4020   margin-top:-3px;
4021   margin-bottom:7px;
4022   overflow:hidden;
4023   z-index:100;
4024   right:54px;
4025   -webkit-transition: width 0.4s ease;
4026      -moz-transition: width 0.4s ease;
4027        -o-transition: width 0.4s ease;
4028           transition: width 0.4s ease;
4029 }
4030
4031 .search #search-btn {
4032   width:50px;
4033   height:28px;
4034   background:url(../images/icon_search.png) no-repeat;
4035   float:left;
4036 }
4037
4038 .search-inner {
4039   width:245px;
4040 }
4041
4042 .search:hover, .search.active {
4043   width:245px;
4044 }
4045
4046 .search .bottom, .search .left, .search .right {
4047   position: absolute;
4048   background-color: #a2a2a2
4049 }
4050
4051 .search .bottom {
4052   width: 214px;
4053   height: 1px;
4054   top: 24px;
4055   left: 0
4056 }
4057
4058 .search .left, .search .right {
4059   height: 5px;
4060   width: 1px
4061 }
4062
4063 .search .left {
4064   top: 22px;
4065   left: 56px;
4066   background-color:#CCC;
4067 }
4068
4069 .search .right {
4070   top: 22px;
4071   left: 238px;
4072   background-color:#CCC;
4073 }
4074
4075 .search form {
4076   margin-top: 2px;
4077   width: 162px;
4078   float:left;
4079 }
4080
4081 .search form input {
4082   color: #2f2f2f;
4083   font-size: 0.95em;
4084   width: 178px;
4085   border: none;
4086   margin-left: 6px;
4087   z-index: 1500;
4088   position: relative;
4089   background-color: transparent;
4090   border-bottom:1px solid #CCC;
4091   padding:0 0 0 4px;
4092   outline:none;
4093   height:24px;
4094 }
4095
4096 .search:hover form input {
4097   border-bottom:1px solid #33B5E5;
4098 }
4099
4100 .search:hover .bottom, .search:hover .left, .search:hover .right {
4101   background-color: #33b5e5;
4102 }
4103
4104 .search:hover #search-btn {
4105   background-position: 0 -28px
4106 }
4107
4108 .search form input:focus {
4109   color: #222;
4110   font-weight: bold
4111 }
4112
4113 .moremenu {
4114   float: right;
4115   position: relative;
4116   width: 50px;
4117   height:28px;
4118   display: block;
4119   margin-top:-3px;
4120   margin-bottom:7px;
4121   overflow:hidden;
4122   -webkit-transition: width 0.25s ease;
4123      -moz-transition: width 0.25s ease;
4124        -o-transition: width 0.25s ease;
4125           transition: width 0.25s ease;
4126 }
4127
4128 .moremenu #more-btn {
4129   width:40px;
4130   height:28px;
4131   background:url(../images/icon_more.png) no-repeat;
4132   border-left:1px solid #CCC;
4133   float:left;
4134   cursor:pointer;
4135 }
4136
4137 .moremenu:hover #more-btn {
4138   background-position:0 -28px;
4139 }
4140
4141 .morehover {
4142   position:absolute;
4143   right:6px;
4144   top:-9px;
4145   width:40px;
4146   height:35px;
4147   z-index:99;
4148   overflow:hidden;
4149
4150   -webkit-opacity:0;
4151      -moz-opacity:0;
4152        -o-opacity:0;
4153           opacity:0;
4154
4155   -webkit-transform-origin:100% 0%;
4156      -moz-transform-origin:100% 0%;
4157        -o-transform-origin:100% 0%;
4158           transform-origin:100% 0%;
4159
4160   -webkit-transition-property: -webkit-opacity;
4161   -webkit-transition-duration: .25s;
4162   -webkit-transition-timing-function:ease;
4163
4164   -moz-transition-property: -moz-opacity;
4165   -moz-transition-duration: .25s;
4166   -moz-transition-timing-function:ease;
4167
4168   -o-transition-property: -o-opacity;
4169   -o-transition-duration: .25s;
4170   -o-transition-timing-function:ease;
4171
4172   transition-property: opacity;
4173   transition-duration: .25s;
4174   transition-timing-function:ease;
4175 }
4176
4177 .morehover:hover,
4178 .morehover.hover {
4179   opacity:1;
4180   height:385px;
4181   width:268px;
4182   -webkit-transition-property:height,  -webkit-opacity;
4183 }
4184
4185 .morehover .top {
4186   width:268px;
4187   height:39px;
4188   background:url(../images/more_top.png) no-repeat;
4189 }
4190
4191 .morehover .mid {
4192   width:228px;
4193   background:url(../images/more_mid.png) repeat-y;
4194   padding:10px 20px 0 20px;
4195 }
4196
4197 .morehover .mid .header {
4198   border-bottom:1px solid #ccc;
4199   font-weight:bold;
4200 }
4201
4202 .morehover .bottom {
4203   width:268px;
4204   height:6px;
4205   background:url(../images/more_bottom.png) no-repeat;
4206 }
4207
4208 .morehover ul {
4209   margin:10px 10px 20px 0;
4210 }
4211
4212 .morehover ul li {
4213   list-style:none;
4214 }
4215
4216 .morehover ul li.active a,
4217 .morehover ul li.active a:hover {
4218   color:#222 !important;
4219 }
4220
4221 .morehover ul li.active img {
4222   margin-right:4px;
4223 }
4224
4225
4226
4227
4228 /* MARQUEE */
4229 .slideshow-container {
4230   width:100%;
4231   overflow:hidden;
4232   position:relative;
4233 }
4234 .slideshow-container .slideshow-prev {
4235   position:absolute;
4236   top:50%;
4237   left:0px;
4238   margin-top:-36px;
4239   z-index:99;
4240 }
4241 .slideshow-container .slideshow-next {
4242   position:absolute;
4243   top:50%;
4244   margin-top:-36px;
4245   z-index:99;
4246   right:0px;
4247 }
4248
4249 .slideshow-container .pagination {
4250   position:absolute;
4251   bottom:20px;
4252   width:100%;
4253   text-align:center;
4254   z-index:99;
4255 }
4256 .slideshow-container .pagination ul {
4257   margin:0;
4258 }
4259 .slideshow-container .pagination ul li{
4260   display: inline-block;
4261   width:12px;
4262   height:12px;
4263   text-indent:-8000px;
4264   list-style:none;
4265   margin: 0 2px;
4266   border-radius:6px;
4267   background-color:#ccc;
4268   cursor:pointer;
4269         -webkit-transition:color .5s ease-in;
4270         -moz-transition:color .5s ease-in;
4271         -o-transition:color .5s ease-in;
4272         transition:color .5s ease-in;
4273 }
4274 .slideshow-container .pagination ul li:hover {
4275   background-color:#999;
4276 }
4277 .slideshow-container .pagination ul li.active {
4278   background-color:#33b5e5;
4279 }
4280 .slideshow-container .pagination ul li.active:hover {
4281   background-color:#33b5e5;
4282 }
4283 .slideshow-container ul li {
4284   display:inline;
4285   list-style:none;
4286 }
4287
4288
4289
4290
4291 a.download-sdk {
4292     float:right;
4293     margin:-10px 0;
4294     height:30px;
4295     padding-top:4px;
4296     padding-bottom:0px;
4297 }
4298
4299 #nav-x {
4300   padding-top: 14px;
4301 }
4302
4303 #nav-x .wrap {
4304   min-height:34px;
4305 }
4306
4307 #nav-x .wrap,
4308 #searchResults.wrap {
4309     max-width:940px;
4310     border-bottom:1px solid #CCC;
4311 }
4312
4313 #searchResults.wrap #leftSearchControl {
4314   min-height:700px
4315 }
4316 .nav-x {
4317     margin-left:0;
4318     margin-bottom:0;
4319 }
4320
4321
4322
4323
4324
4325
4326
4327
4328
4329
4330 /*
4331  * CSS Styles that are needed by jScrollPane for it to operate correctly.
4332  */
4333
4334 .jspContainer {
4335   overflow: hidden;
4336   position: relative;
4337 }
4338
4339 .jspPane {
4340   position: absolute;
4341   overflow: hidden;
4342   width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4343 }
4344
4345 .jspVerticalBar {
4346   position: absolute;
4347   top: 0;
4348   right: 0;
4349   width: 4px;
4350   height: 100%;
4351   background: #f5f5f5;
4352 }
4353
4354 .jspHorizontalBar {
4355   position: absolute;
4356   bottom: 0;
4357   left: 0;
4358   width: 100%;
4359   height: 4px;
4360   background: #f5f5f5;
4361 }
4362
4363 .jspVerticalBar *,
4364 .jspHorizontalBar * {
4365   margin: 0;
4366   padding: 0;
4367 }
4368 .jspCap {
4369   display: block;
4370 }
4371
4372 .jspVerticalBar .jspCap {
4373   height: 4px;
4374 }
4375
4376 .jspHorizontalBar .jspCap {
4377   width: 0;
4378   height: 100%;
4379 }
4380
4381 .jspHorizontalBar .jspCap {
4382   float: left;
4383 }
4384
4385 .jspTrack {
4386   position: relative;
4387 }
4388
4389 .jspDrag {
4390   background: #bbb;
4391   position: relative;
4392   top: 0;
4393   left: 0;
4394   cursor: pointer;
4395 }
4396
4397 .jspDrag:hover,
4398 .jspDrag:active {
4399   border-color: #09c;
4400   background-color: #4cadcb;
4401   background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4402   background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4403   background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4404   background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4405   background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4406   background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4407   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4408 }
4409
4410 .jspHorizontalBar .jspTrack,
4411 .jspHorizontalBar .jspDrag {
4412   float: left;
4413   height: 100%;
4414 }
4415
4416 .jspArrow {
4417   background: #999;
4418   text-indent: -20000px;
4419   display: block;
4420   cursor: pointer;
4421 }
4422
4423 .jspArrow.jspDisabled {
4424   cursor: default;
4425   background: #ccc;
4426 }
4427
4428 .jspVerticalBar .jspArrow {
4429   height: 16px;
4430 }
4431
4432 .jspHorizontalBar .jspArrow {
4433   width: 16px;
4434   float: left;
4435   height: 100%;
4436 }
4437
4438 .jspVerticalBar .jspArrow:focus {
4439   outline: none;
4440 }
4441
4442 .jspCorner {
4443   float: left;
4444   height: 100%;
4445 }
4446
4447 /* Yuk! CSS Hack for IE6 3 pixel bug :( */
4448 * html .jspCorner {
4449   margin: 0 -3px 0 0;
4450 }
4451 /******* end of jscrollpane *********/
4452
4453
4454
4455
4456
4457 /************ DEVELOP HOMEPAGE ******************/
4458
4459 /* Slideshow */
4460 .slideshow-develop {
4461   height: 300px;
4462   width: 940px;
4463   position: relative;
4464   overflow:hidden;
4465 }
4466 .slideshow-develop .frame {
4467   width: 940px;
4468   height: 300px;
4469 }
4470 .slideshow-develop img.play {
4471   max-width:350px;
4472   max-height:240px;
4473   margin:20px 0 0 90px;
4474   -webkit-transform: perspective(800px ) rotateY( 35deg );
4475   box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4476   -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4477   -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4478 }
4479 .slideshow-develop img.play.no-shadow {
4480     box-shadow: none;
4481     -moz-box-shadow: none;
4482     -webkit-box-shadow: none;
4483 }
4484 .slideshow-develop img.play.no-transform {
4485   -webkit-transform: none;
4486 }
4487 .slideshow-develop a.slideshow-next {
4488   background: url(../images/arrow-right-develop.png);
4489 }
4490 .slideshow-develop a.slideshow-prev {
4491   background: url(../images/arrow-left-develop.png);
4492 }
4493 .slideshow-develop .content-right {
4494   float: left;
4495 }
4496 .slideshow-develop .content-right h2 {
4497   padding:0;
4498   margin-bottom:10px;
4499   border:none;
4500 }
4501 .slideshow-develop .item {
4502   height: 300px;
4503   width: 940px;
4504 }
4505 .slideshow-develop .pagination ul li.active {
4506   background-color: #F80;
4507 }
4508 .slideshow-develop .pagination ul li.active:hover {
4509   background-color: #F80;
4510 }
4511 .slideshow-develop .item hr {
4512   margin:5px 0 10px;
4513 }
4514 .slideshow-develop .item p {
4515   margin:10px 0;
4516 }
4517 .slideshow-develop .item p.title-intro {
4518   position:absolute;
4519   margin:0;
4520 }
4521
4522 /* Feeds */
4523 .feed ul {
4524   margin: 0;
4525 }
4526 .feed .feed-nav {
4527   height: 25px;
4528   border-bottom: 1px solid #CCC;
4529 }
4530 .feed .feed-nav li {
4531   list-style: none;
4532   float: left;
4533   height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4534   margin-right: 25px;
4535   cursor: pointer;
4536 }
4537 .feed .feed-nav li.active {
4538   color: #000;
4539   border-bottom: 4px solid #F80;
4540 }
4541 .feed .feed-container {
4542   overflow: hidden;
4543   width: 460px;
4544 }
4545 .feed .feed-container .feed-frame {
4546   width: 1000px;
4547 }
4548 .feed .feed-container .feed-frame ul {
4549   float: left;
4550   width:460px;
4551 }
4552 .feed .feed-container .feed-frame ul ul {
4553   float: none;
4554   margin:10px 0 0 30px;
4555 }
4556 .feed .feed-container .feed-frame li {
4557   list-style: none;
4558   margin: 20px 0 20px 0;
4559   width: 460px;
4560   height:93px;
4561 }
4562 .feed .feed-container .feed-frame li.playlist {
4563   height:auto;
4564 }
4565 .feed .feed-container .feed-frame li.playlist a {
4566   height:93px;
4567   display:block;
4568 }
4569 .feed .feed-container .feed-frame li.more {
4570   height:20px;
4571   margin:10px 0 5px 5px;
4572 }
4573 .feed .feed-container .feed-frame li.more a {
4574   height:inherit;
4575 }
4576 .feed .feed-container .feed-frame li.playlist-video {
4577   list-style: none;
4578   margin: 0;
4579   width: 460px;
4580   height:55px;
4581   font-size:12px;
4582 }
4583 .feed .feed-container .feed-frame li.playlist-video a {
4584   height:45px;
4585   padding:5px;
4586 }
4587 .feed .feed-container .feed-frame li.playlist-video h5 {
4588   font-size:12px;
4589   line-height:13px;
4590   margin:0;
4591 }
4592 .feed .feed-container .feed-frame li.playlist-video p {
4593   margin:5px 0 0;
4594   line-height:15px;
4595 }
4596 .feed-container .feed-frame div.feed-image {
4597   float: left;
4598   border: 1px solid #999;
4599   margin:0 20px 0 0;
4600   width:122px;
4601   height:92px;
4602   background:url('../images/blog-default.png') no-repeat 0 0;
4603   background-size:180px;
4604 }
4605 #jd-content .feed .feed-container .feed-frame li img {
4606   float: left;
4607   border: 1px solid #999;
4608   margin:0 20px 0 0;
4609   width:122px;
4610   height:92px;
4611 }
4612 #jd-content .feed .feed-container .feed-frame li.playlist-video img {
4613   width:inherit;
4614   height:inherit;
4615 }
4616
4617 .feed .feed-container .feed-frame li a,
4618 .feed .feed-container .feed-frame li a:active {
4619   color:#555 !important;
4620 }
4621
4622 .feed .feed-container .feed-frame li a:hover,
4623 .feed .feed-container .feed-frame li a:hover * {
4624   color:#7AA1B0 !important;
4625 }
4626
4627 /* Video player */
4628 #player-wrapper {
4629   display:none;
4630   margin: -1px auto 0;
4631   position: relative;
4632   width: 940px;
4633   height: 0px;
4634 }
4635 #player-frame {
4636   background: #EFEFEF;
4637   border: 1px solid #CCC;
4638   padding: 0px 207px;
4639   z-index: 10; /* stay above marque, but below search suggestions */
4640   width: 525px;
4641   height: 330px;
4642   position: relative;
4643 }
4644
4645
4646
4647 /************ DISTRIBUTE HOMEPAGE ***************/
4648
4649 .marquee {
4650   width: 760px;
4651 }
4652 .marquee .main-img {
4653   float: left;
4654   margin-top: 20px;
4655   width: 490px;
4656 }
4657 .marquee .copy {
4658   width: 270px;
4659   float: left;
4660   margin-top: 30px;
4661 }
4662 .distribute-features {
4663   margin: 0;
4664 }
4665 .distribute-features ul {
4666   margin: 0;
4667 }
4668 .distribute-features ul li {
4669   list-style: none;
4670   float: left;
4671   border-top: 1px solid #9C0;
4672   width: 220px;
4673   margin-right: 50px;
4674 }
4675 .distribute-features ul li.last {
4676   margin-right: 0px;
4677 }
4678
4679 .distribute-features .distribute-link li a {
4680   color:red !important;
4681 }
4682
4683 .distribute-features .distribute-link li a,
4684 .distribute-features .distribute-link li a:active {
4685   color:#555 !important;
4686 }
4687
4688 .distribute-features .distribute-link li a:hover,
4689 .distribute-features .distribute-link li a:hover * {
4690   color:#7AA1B0 !important;
4691 }
4692
4693
4694 /************ DEVELOP TOPIC CONTAINERS ************/
4695
4696 .landing-banner,
4697 .landing-docs {
4698   margin:20px 0 0;
4699 }
4700 .landing-banner div:first-child,
4701 .landing-docs div:first-child,
4702 .landing-docs .col-12 {
4703   margin-left:0;
4704   min-height:280px;
4705 }
4706 .landing-banner div:last-child,
4707 .landing-docs div:last-child,
4708 .landing-docs .col-12 {
4709   margin-right:0;
4710 }
4711
4712 .landing-banner h1 {
4713   margin-top:0;
4714 }
4715 .landing-docs {
4716   clear:left;
4717   overflow:hidden;
4718 }
4719 .landing-docs h3 {
4720   font-size:14px;
4721   line-height:21px;
4722   color:#555;
4723   text-transform:uppercase;
4724   border-bottom:1px solid #CCC;
4725   margin:0 0 20px;
4726 }
4727 .landing-docs a {
4728   color:#333 !important;
4729 }
4730
4731 .landing-docs a:hover,
4732 .landing-docs a:hover * {
4733   color:#7AA1B0 !important
4734 }
4735
4736 .landing-docs .normal-links a {
4737   color:#258aaf !important;
4738 }
4739
4740 .plusone {
4741   float:right;
4742 }
4743
4744
4745
4746 /************* HOME/LANDING PAGE *****************/
4747
4748 .slideshow-home {
4749   height: 500px;
4750   width: 940px;
4751   border-bottom: 1px solid #CCC;
4752   position: relative;
4753   margin: 0;
4754 }
4755 .slideshow-home .frame {
4756   width: 940px;
4757   height: 500px;
4758 }
4759 .slideshow-home .content-left {
4760   float: left;
4761   text-align: center;
4762   vertical-align: center;
4763   margin: 0 0 0 35px;
4764 }
4765 .slideshow-home .content-right {
4766   margin: 80px 0 0 0;
4767 }
4768 .slideshow-home .content-right p {
4769   margin-bottom: 10px;
4770 }
4771 .slideshow-home .content-right p:last-child {
4772   margin-top: 15px;
4773 }
4774 .slideshow-home .content-right h1 {
4775   padding:0;
4776 }
4777 .slideshow-home .item {
4778   height: 500px;
4779   width: 940px;
4780 }
4781 .home-sections {
4782   padding: 30px 20px 20px;
4783   margin: 20px 0;
4784   background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
4785 }
4786 .home-sections ul {
4787   margin: 0;
4788 }
4789 .home-sections ul li {
4790   float: left;
4791   display: block;
4792   list-style: none;
4793   width: 170px;
4794   height: 35px;
4795   border: 1px solid #ccc;
4796   background: white;
4797   margin-right: 10px;
4798   border-radius: 1px;
4799   -webkit-border-radius: 1px;
4800   -moz-border-radius: 1px;
4801   box-shadow: 1px 1px 5px #EEE;
4802   -webkit-box-shadow: 1px 1px 5px #EEE;
4803   -moz-box-shadow: 1px 1px 5px #EEE;
4804   background: white;
4805 }
4806 .home-sections ul li:hover {
4807   background: #F9F9F9;
4808   border: 1px solid #CCC;
4809 }
4810 .home-sections ul li a,
4811 .home-sections ul li a:hover {
4812   font-weight: bold;
4813   margin-top: 8px;
4814   line-height: 18px;
4815   float: left;
4816   width: 100%;
4817   text-align: center;
4818   color: #09c !important;
4819 }
4820 .home-sections ul li a {
4821   font-weight: bold;
4822   margin-top: 8px;
4823   line-height: 18px;
4824   float: left;
4825   width:100%;
4826   text-align:center;
4827 }
4828 .home-sections ul li img {
4829   float: left;
4830   margin: -8px 0 0 10px;
4831 }
4832 .home-sections ul li.last {
4833   margin-right: 0px;
4834 }
4835 .fullpage #footer {
4836   margin-top: -40px;
4837 }