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