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