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