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