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