default.css revision bb9ecf420f136681a3bd4d5503207733b4dc283b 
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:100%;
2772  margin:0 auto;
2773}
2774#butterbar-message {
2775  background-color:rgba(255, 187, 51, .4);
2776  font-size:13px;
2777  padding: 5px 0;
2778  text-align:center;
2779}
2780a#butterbar-message {
2781  cursor:pointer;
2782  display:block;
2783}
2784a#butterbar-message:hover {
2785  text-decoration:underline;
2786}
2787
2788/* --------------------------------------------------------------------------
2789Misc
2790*/
2791
2792
2793.clearfix:before, .clearfix:after {
2794  content: "";
2795  display: table
2796}
2797.clearfix:after {
2798  clear: both
2799}
2800.clearfix {
2801  *zoom: 1
2802}
2803table.blank th, table.blank td {
2804    border: 0;
2805  background: none
2806}
2807.caption {
2808  margin: 0.5em 0 2em 0;
2809  color: #000;
2810  font-size: 11.5px;
2811}
2812
2813.nolist, .nolist ul, .nolist ol {
2814  list-style:none;
2815  margin-left:0;
2816}
2817#tb .nolist {
2818  margin-left:15px;
2819}
2820
2821dl.xml>dt {
2822  text-transform:uppercase;
2823}
2824dl.xml dl.attr {
2825  margin-top:0;
2826}
2827
2828pre.classic {
2829  background-color:transparent;
2830  border:none;
2831  padding:0;
2832}
2833
2834p.img-caption {
2835  margin: -10px 0 20px;
2836  font-size:13px;
2837  color:#666;
2838}
2839
2840div.figure,
2841div.figure-right {
2842  float:right;
2843  clear:right;
2844  margin:10px 0 0 0;
2845  padding:0 0 0 20px;
2846  /* width must be defined w/ an inline style matching the image width */
2847}
2848
2849div.figure-left {
2850  float:left;
2851  clear:left;
2852  margin:10px 0 0 0;
2853  padding:0 20px 0 0;
2854  /* width must be defined w/ an inline style matching the image width */
2855}
2856
2857img.frame {
2858  border:1px solid #DDD;
2859  padding:4px;
2860}
2861
2862p.table-caption {
2863  margin: 0 0 4px 0;
2864  font-size:13px;
2865  color:#666;
2866}
2867
2868p.code-caption {
2869  margin-bottom: 4px;
2870  font: 12px/1.5 monospace;
2871  color:#666;
2872}
2873
2874div.note,
2875div.caution,
2876div.warning {
2877  margin: 0 0 15px;
2878}
2879
2880p.note, div.note,
2881p.caution, div.caution,
2882p.warning, div.warning {
2883  padding: 0 0 0 10px;
2884  border-left: 4px solid;
2885}
2886
2887p.note, div.note {
2888  border-color: #258AAF;
2889}
2890
2891p.caution, div.caution {
2892  border-color: #FF8800;
2893}
2894
2895p.warning, div.warning {
2896  border-color: #ff4443;
2897}
2898
2899div.note.design {
2900  border-left: 4px solid #33B5E5;
2901}
2902
2903div.note.develop {
2904  border-left: 4px solid #F80;
2905}
2906
2907div.note.distribute {
2908  border-left: 4px solid #9C0;
2909}
2910
2911.note p, .caution p, .warning p {
2912  margin:0 0 5px;
2913}
2914
2915.note p:last-child, .caution p:last-child, .warning p:last-child {
2916  margin-bottom:0;
2917}
2918
2919body.about blockquote {
2920  display:block;
2921  float:right;
2922  width:280px;
2923  font-size:20px;
2924  font-style:italic;
2925  line-height:24px;
2926  color:#33B5E5;
2927  margin:0 0 20px 30px;
2928}
2929
2930div.design-announce p {
2931  margin:0 0 10px;
2932}
2933
2934.expandable {
2935  height:34px;
2936  padding-left:20px;
2937  position:relative;
2938}
2939.expandable:before {
2940  content: '';
2941  background-image: url(../images/styles/disclosure_down.png);
2942  background-repeat:no-repeat;
2943  background-position: -12px -9px;
2944  width: 20px;
2945  height: 20px;
2946  display: inline-block;
2947  position: absolute;
2948  top: 0;
2949  left: 0; }
2950}
2951.expandable.expanded:before {
2952  background-image: url(../images/styles/disclosure_up.png);
2953}
2954
2955/* notice box for cross links between Design/Develop docs */
2956a.notice-developers-video,
2957a.notice-developers,
2958a.notice-designers-video,
2959a.notice-designers {
2960  float:right;
2961  clear:right;
2962  width:238px;
2963  min-height:50px;
2964  margin:0 0 20px 20px;
2965  border:1px solid #ddd;
2966}
2967a.notice-developers-video.wide,
2968a.notice-developers.wide,
2969a.notice-designers-video.wide,
2970a.notice-designers.wide {
2971  width:278px;
2972}
2973a.notice-developers-video div,
2974a.notice-developers div,
2975a.notice-designers-video div,
2976a.notice-designers div {
2977  min-height:40px;
2978  background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px;
2979  background-size:40px 40px;
2980  padding:10px 10px 10px 60px;
2981}
2982a.notice-designers div {
2983  background:url('../images/styles/notice-designers@2x.png') no-repeat 10px 10px;
2984  background-size:40px 40px;
2985}
2986a.notice-designers-video div {
2987  background:url('../images/styles/notice-designers-video@2x.png') no-repeat 10px 10px;
2988  background-size:40px 40px;
2989}
2990a.notice-developers-video div {
2991  background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px;
2992  background-size:40px 40px;
2993}
2994a.notice-developers-video:hover,
2995a.notice-developers:hover,
2996a.notice-designers-video:hover,
2997a.notice-designers:hover {
2998  background:#eee;
2999}
3000a.notice-developers-video h3,
3001a.notice-developers h3,
3002a.notice-designers-video h3,
3003a.notice-designers h3 {
3004  font-size:13px;
3005  line-height:18px;
3006  font-weight:bold;
3007  text-transform:uppercase;
3008  color:#000 !important;
3009  margin:0 0 1px;
3010}
3011a.notice-developers-video p,
3012a.notice-developers p,
3013a.notice-designers-video p,
3014a.notice-designers p {
3015  margin:0;
3016  line-height:14px;
3017}
3018a.notice-developers-video.left,
3019a.notice-developers.left,
3020a.notice-designers-video.left,
3021a.notice-designers.left {
3022  margin-left:0;
3023  float:left;
3024}
3025
3026
3027/* hide nested list items; companion to hideNestedLists() */
3028.hide-nested li ol,
3029.hide-nested li ul {
3030  display:none;
3031}
3032
3033a.header-toggle {
3034  display:block;
3035  float:right;
3036  text-transform:uppercase;
3037  font-size:.8em !important;
3038  font-weight:normal;
3039  margin-top:2px;
3040}
3041
3042
3043/* for IDE instruction toggle (Studio/Eclipse/Other) */
3044select.ide {
3045  background: transparent;
3046  border: 1px solid #bbb;
3047  border-left: 0;
3048  border-right: 0;
3049  margin: 10px 0;
3050  padding: 10px 0;
3051  color:#666;
3052}
3053select.ide,
3054select.ide option {
3055  font-family: inherit;
3056  font-size:16px;
3057  font-weight:500;
3058}
3059/* hide all except eclipse by default */
3060.select-ide.studio,
3061.select-ide.other {
3062  display:none;
3063}
3064/* ... unless eclipse also includes one of the others */
3065.select-ide.eclipse.studio,
3066.select-ide.eclipse.other {
3067  display:block;
3068}
3069
3070
3071/* -----------------------------------------------
3072good/bad example containers
3073*/
3074
3075div.example-block {
3076  background-repeat: no-repeat;
3077  background-position:10px 8px;
3078  background-color:#ccc;
3079  padding:4px;
3080  margin:.8em auto 1.5em 2em;
3081  width:260px;
3082  float:right;
3083}
3084/* red container */
3085.example-block.bad {
3086  background-image: url(/images/example-bad.png);
3087  background-color:#f4cccc;
3088}
3089/* green container */
3090.example-block.good {
3091  background-image: url(/images/example-good.png);
3092  background-color:#d9ead3;
3093}
3094/* container heading div */
3095#jd-content .example-block .heading {
3096  font-weight:bold;
3097  margin:6px 0 9px 36px;
3098  padding:6px auto;
3099}
3100/* container image (if any) */
3101#jd-content .example-block img {
3102  margin:0;
3103  padding:0px;
3104}
3105
3106.example-block table {
3107  margin:0;
3108}
3109
3110/* -----------------------------------------------
3111Dialog box for popup messages
3112*/
3113
3114div.dialog {
3115  height:0;
3116  margin:0 auto;
3117}
3118
3119div.dialog>div {
3120  z-index:99;
3121  position:fixed;
3122  margin:70px 0;
3123  width: 391px;
3124  height: 200px;
3125  background: #F7F7F7;
3126-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3127-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
3128box-shadow: 0 0 15px rgba(0,0,0,0.5);
3129}
3130/* IE6 can't position fixed */
3131* html div.dialog div { position:absolute; }
3132
3133
3134div#deprecatedSticker {
3135  display:none;
3136  z-index:99;
3137  position:fixed;
3138  right:15px;
3139  top:114px;
3140  margin:0;
3141  padding:1em;
3142  background:#FFF;
3143  border:1px solid #dddd00;
3144  box-shadow:-5px 5px 10px #ccc;
3145  -moz-box-shadow:-5px 5px 10px #ccc;
3146  -webkit-box-shadow:-5px 5px 10px #ccc;
3147}
3148
3149div#naMessage {
3150  display:none;
3151  width:555px;
3152  height:0;
3153  margin:0 auto;
3154}
3155
3156div#naMessage div {
3157  z-index:99;
3158  width:450px;
3159  position:fixed;
3160  margin:50px 0;
3161  padding:4em 4em 3em;
3162  background:#FFF;
3163  border:1px solid #999;
3164  box-shadow:-10px 10px 40px #888;
3165  -moz-box-shadow:-10px 10px 40px #888;
3166  -webkit-box-shadow:-10px 10px 40px #888;
3167}
3168/* IE6 can't position fixed */
3169* html div#naMessage div { position:absolute; }
3170
3171div#naMessage strong {
3172  font-size:1.1em;
3173}
3174
3175
3176/* --------------------------------------------------------------------------
3177Slideshow Controls & Next/Prev
3178*/
3179.slideshow-next, .slideshow-prev {
3180  width: 20px;
3181  height: 36px;
3182  text-indent: -1000em;
3183}
3184.slideshow-container {
3185  margin: 2em 0;
3186}
3187.slideshow-container:before, .slideshow-container:after {
3188  content: "";
3189  display: table;
3190  clear: both;
3191}
3192a.slideshow-next, a.slideshow-next:visited {
3193
3194  float: right;
3195
3196  background: url(../images/arrow-right.png) no-repeat 0 0
3197
3198}
3199
3200a.slideshow-prev, a.slideshow-prev:visited {
3201
3202  float: left;
3203
3204  background: url(../images/arrow-left.png) no-repeat 0 0
3205
3206}
3207
3208.slideshow-next:hover, .slideshow-prev:hover, .slideshow-next:focus, .slideshow-prev:focus {
3209
3210  background-position: 0 -36px
3211
3212}
3213
3214.slideshow-next:active, .slideshow-prev:active {
3215
3216  background-position: 0 -72px
3217
3218}
3219.slideshow-nav {
3220  width: 74px;
3221  margin: 0 auto;
3222}
3223.slideshow-nav a, .slideshow-nav a:visited {
3224  display: inline-block;
3225  width: 12px;
3226  height: 12px;
3227  margin: 0 2px 20px 2px;
3228  background: #ccc;
3229  -webkit-border-radius: 50%;
3230  -moz-border-radius: 50%;
3231  border-radius: 50%;
3232}
3233.slideshow-nav a:hover, .slideshow-nav a:focus {
3234
3235  background: #33B5E5
3236}
3237
3238.slideshow-nav a:active {
3239
3240  background: #1e799a;
3241  background: #ebebeb;
3242  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3243  -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3244  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05);
3245}
3246.slideshow-nav a.active, .slideshow-nav a.active:active, .slideshow-nav a.active:visited {
3247  background: #33B5E5
3248}
3249/* --------------------------------------------------------------------------
3250Tabs
3251*/
3252ul.tabs {
3253  padding: 0;
3254  margin: 2em 0 0 0;
3255}
3256ul.tabs:before, ul.tabs:after {
3257  content: "";
3258  display: table;
3259  clear: both;
3260}
3261ul.tabs li {
3262  list-style-type: none;
3263  float: left;
3264}
3265ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
3266  display: block;
3267  height: 36px;
3268  line-height: 36px;
3269  padding: 0 15px;
3270  margin-right: 2px;
3271  color: #222;
3272  -moz-border-radius-topleft: 2px;
3273  -moz-border-radius-topright: 2px;
3274  -moz-border-radius-bottomright: px;
3275  -moz-border-radius-bottomleft: px;
3276  -webkit-border-radius: 2px 2px px px;
3277  border-radius: 2px 2px px px;
3278  border-top: solid 1px #ebebeb;
3279  border-left: solid 1px #ebebeb;
3280  border-right: solid 1px #ebebeb;
3281  background-color: #fff;
3282    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
3283    background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
3284    background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
3285    background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
3286    background-image: -o-linear-gradient(top, #ffffff, #fafafa);
3287    background-image: linear-gradient(top, #ffffff, #fafafa);
3288    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
3289EndColorStr='#fafafa');
3290}
3291ul.tabs li a:hover {
3292  color: #33B5E5;
3293}
3294ul.tabs li a.selected {
3295  height: 37px;
3296  color: #33B5E5;
3297  background-color: #f7f7f7;
3298  background-image: none;
3299  border-color: #ddd;
3300}
3301.tab-content {
3302  padding: 1.2em;
3303  margin: -1px 0 2em 0;
3304  -webkit-border-radius: 2px;
3305    -moz-border-radius: 2px;
3306    border-radius: 2px;
3307  border: solid 1px #ddd;
3308  background: #f7f7f7;
3309}
3310/* --------------------------------------------------------------------------
3311Feature Boxes
3312*/
3313.feature-box {
3314  width: 291px;
3315  height: 200px;
3316  position: relative;
3317  background: #F7F7F7;
3318}
3319.box-border .top, .box-border .bottom, .box-border .left, .box-border .right {
3320  z-index: 100;
3321  position: absolute;
3322  background-color: #aaa;
3323}
3324.box-border .top, .box-border .bottom {
3325  width: 291px;
3326  height: 1px;
3327}
3328.dialog .box-border .top,
3329.dialog .box-border .bottom { width:391px; }
3330
3331.box-border .left, .box-border .right {
3332  width: 1px;
3333  height: 8px;
3334}
3335.box-border .top { top: 0; left: 0 }
3336.box-border .top .left { top: 1px; left: 0 }
3337.box-border .top .right { top: 1px; right: 0 }
3338.box-border .bottom .left { top: -8px; left: 0 }
3339.box-border .bottom { top: 200px; left: 0 }
3340.box-border .bottom .right { top: -8px; right: 0 }
3341
3342.feature-box h4,
3343.dialog h4 {
3344    margin: 15px 18px 10px;
3345    padding:0;
3346}
3347
3348.feature-box p,
3349.dialog p {
3350    margin: 10px 18px;
3351    padding:0;
3352}
3353.feature-box .link,
3354.dialog .link {
3355    border-top: 1px solid #dedede;
3356    bottom: 0;
3357    position: absolute;
3358    width: inherit;
3359}
3360.feature-box a, .feature-box h4,
3361.dialog a, .dialog h4 {
3362    -webkit-transition: color .4s ease;
3363    -moz-transition: color .4s ease;
3364    -o-transition: color .4s ease;
3365    transition: color .4s ease;
3366}
3367.feature-box:hover {
3368  cursor: pointer;
3369}
3370.feature-box:hover .box-border .top, .feature-box:hover .box-border .bottom, .feature-box:hover
3371.left, .feature-box:hover .right {
3372  background-color: #33B5E5;
3373}
3374.feature-box:hover h4, .feature-box:hover a {
3375  color: #33B5E5;
3376}
3377/* --------------------------------------------------------------------------
3378Page-Specific Styles
3379*/
3380.colors {
3381  position: relative;
3382  float: left;
3383  width: 92px;
3384  margin: 40px 0 20px;
3385}
3386.colors div {
3387  color: #fff;
3388  font-size: 11.5px;
3389  width: 82px;
3390  height: 82px;
3391  margin-top:-30px;
3392  line-height: 82px;
3393  text-align: center;
3394  border: solid 5px #fff;
3395  -webkit-border-radius: 50%;
3396  -moz-border-radius: 50%;
3397  border-radius: 50%;
3398}
3399
3400
3401
3402
3403
3404
3405
3406
3407
3408
3409
3410
3411
3412
3413/* ########### REFERENCE DOCS ################## */
3414
3415#packages-nav h2,
3416#classes-nav h2 {
3417  font-size:18px;
3418  margin:0;
3419  padding:0 0 0 4px;
3420}
3421
3422#jd-header {
3423  padding: 0 0 12px;
3424  margin: 20px 0 12px;
3425  font-size:12px;
3426  padding-bottom:12px;
3427  border-bottom:solid 1px #ccc;
3428}
3429
3430#jd-header h1 {
3431  margin:0;
3432  padding:0 0 6px 0;
3433}
3434
3435/* not sure if this is needed in the ref docs, disabling for now
3436.jd-descr h2 {
3437  margin:16px 0;
3438}
3439*/
3440
3441/* page-top-right container for reference pages (holds
3442links to summary tables) */
3443#api-info-block {
3444  font-size:12px;
3445  margin:20px 0 0;
3446  padding:0 10px 6px;
3447  font-weight:normal;
3448  float:right;
3449  text-align:right;
3450  color:#999;
3451  max-width:80%;
3452  font-size: 12px;
3453  line-height:14px;
3454}
3455
3456#api-info-block div.api-level {
3457  font-weight:bold;
3458  font-size:inherit;
3459  float:none;
3460  color:#222;
3461  padding:0;
3462  margin:0;
3463}
3464
3465/* inheritance table */
3466.jd-inheritance-table {
3467  border-spacing:0;
3468  margin:0;
3469  padding:0;
3470  font-size:12px;
3471  line-height:14px;
3472  background-color:transparent;
3473}
3474.jd-inheritance-table tr td {
3475  border: none;
3476  margin: 0;
3477  padding: 0;
3478  background-color:transparent;
3479}
3480.jd-inheritance-table .jd-inheritance-space {
3481  font-weight:bold;
3482  width:1em;
3483}
3484.jd-inheritance-table .jd-inheritance-interface-cell {
3485  padding-left: 17px;
3486}
3487
3488
3489
3490.jd-sumtable a {
3491  text-decoration:none;
3492}
3493
3494.jd-sumtable a:hover {
3495  text-decoration:underline;
3496}
3497
3498/* the link inside a sumtable for "Show All/Hide All" */
3499.toggle-all {
3500  display:block;
3501  float:right;
3502  font-weight:normal;
3503  font-size:0.9em;
3504}
3505
3506/* adjustments for in/direct subclasses tables */
3507.jd-sumtable.jd-sumtable-subclasses {
3508  margin: 1em 0 0 0;
3509  max-width:968px;
3510  background-color:transparent;
3511  font-size:13px;
3512}
3513
3514/* extra space between end of method name and open-paren */
3515.sympad {
3516  margin-right: 2px;
3517}
3518
3519/* right alignment for the return type in sumtable */
3520.jd-sumtable .jd-typecol {
3521  text-align:right;
3522}
3523
3524/* adjustments for the expando table-in-table */
3525.jd-sumtable-expando {
3526  margin:.5em 0;
3527  padding:0;
3528}
3529
3530/* a div that holds a short description */
3531.jd-descrdiv {
3532  padding:3px 1em 0 1em;
3533  margin:0;
3534  border:0;
3535}
3536
3537#jd-content img.jd-expando-trigger-img {
3538  padding:0 4px 4px 0;
3539  margin:0;
3540}
3541
3542.jd-sumtable-subclasses div#subclasses-direct,
3543.jd-sumtable-subclasses div#subclasses-indirect {
3544  margin:0 0 0 13px;
3545}
3546
3547
3548
3549/********* MEMBER REF *************/
3550
3551
3552.jd-details {
3553/*  border:1px solid #669999;
3554  padding:4px; */
3555  margin:0 0 1em;
3556}
3557
3558/* API reference: a container for the
3559.tagdata blocks that make up the detailed
3560description */
3561.jd-details-descr {
3562  padding:0;
3563  margin:.5em .25em;
3564}
3565
3566/* API reference: a block containing
3567a detailed description, a params table,
3568seealso list, etc */
3569.jd-tagdata {
3570  margin:.5em 1em;
3571}
3572
3573.jd-tagdata p {
3574  margin:0 0 1em 1em;
3575}
3576
3577/* API reference: adjustments to
3578the detailed description block */
3579.jd-tagdescr {
3580  margin:.25em 0 .75em 0;
3581}
3582
3583.jd-tagdescr ol,
3584.jd-tagdescr ul {
3585  margin:0 2.5em;
3586  padding:0;
3587}
3588
3589.jd-tagdescr table,
3590.jd-tagdescr img {
3591  margin:.25em 1em;
3592}
3593
3594.jd-tagdescr li {
3595margin:0 0 .25em 0;
3596padding:0;
3597}
3598
3599/* API reference: heading marking
3600the details section for constants,
3601attrs, methods, etc. */
3602h4.jd-details-title {
3603  font-size:1.15em;
3604  background-color: #E2E2E2;
3605  margin:1.5em 0 .6em;
3606  padding:3px 95px 3px 3px; /* room for api-level */
3607}
3608body.google h4.jd-details-title {
3609  background-color: #FFF;
3610  padding-top:5px;
3611  border-top: 1px solid #ccc;
3612}
3613body.google table.jd-sumtable th {
3614  background-color: #FFF;
3615  color:#000;
3616}
3617
3618h4.jd-tagtitle {
3619  margin:0;
3620}
3621
3622h4 .normal {
3623  font-weight:normal;
3624}
3625
3626/* API reference: heading for "Parameters", "See Also", etc.,
3627in details sections */
3628h5.jd-tagtitle {
3629  margin:0 0 .25em 0;
3630  font-size:1em;
3631}
3632
3633.jd-tagtable {
3634  margin:0;
3635  background-color:transparent;
3636  width:auto;
3637}
3638
3639.jd-tagtable td,
3640.jd-tagtable th {
3641  border:none;
3642  background-color:#fff;
3643  vertical-align:top;
3644  font-weight:normal;
3645  padding:2px 10px;
3646}
3647
3648.jd-tagtable th {
3649  font-style:italic;
3650}
3651
3652/* Inline api level indicator for methods */
3653div.api-level {
3654  font-size:.8em;
3655  font-weight:normal;
3656  color:#999;
3657  float:right;
3658  padding:0 8px 0;
3659  margin-top:-30px;
3660}
3661
3662table.jd-tagtable td,
3663table.jd-tagtable th {
3664  background-color:transparent;
3665}
3666
3667table.jd-tagtable th {
3668  color:inherit;
3669}
3670
3671
3672
3673
3674
3675
3676
3677
3678
3679
3680
3681
3682
3683
3684
3685
3686
3687
3688
3689
3690
3691
3692
3693/* SEARCH FILTER */
3694
3695.menu-container {
3696  position:relative;
3697}
3698#search_autocomplete {
3699  font-weight:normal;
3700}
3701
3702.search_filtered_wrapper.reference {
3703  width: 193px;
3704  float: right;
3705}
3706.search_filtered_wrapper.docs {
3707  width:875px;
3708  float: left;
3709  position:absolute;
3710  top:26px;
3711  right:66px;
3712}
3713.suggest-card {
3714  position:relative;
3715  width:170px;
3716  min-height:90px;
3717  padding:5px;
3718  border: solid 1px #C5C5C5;
3719  background: white;
3720  top: 15px;
3721  margin-right:-5px;
3722  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
3723  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3724  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
3725}
3726.suggest-card.reference {
3727  position:absolute;
3728  z-index:999;
3729  min-width:171px; /* +padding and border makes this match input width */
3730  min-height:93px; /* add 3px because this has 1 not 4px top border */
3731  width:auto;
3732  top:41px;
3733  margin:0;
3734}
3735.suggest-card.develop {
3736  z-index:997;
3737  border-top: solid 4px #F80;
3738  float:right;
3739}
3740.suggest-card.design {
3741  z-index:996;
3742  border-top: solid 4px #33b5e5;
3743  float:right;
3744}
3745.suggest-card.distribute {
3746  z-index:995;
3747  border-top: solid 4px #9C0;
3748  float:right;
3749}
3750.child-card {
3751  width:100%;
3752}
3753.suggest-card.dummy {
3754  width:172px;
3755  float:right;
3756  border:0;
3757  background:transparent;
3758  -moz-box-shadow: none;
3759  -webkit-box-shadow: none;
3760  box-shadow: none;
3761}
3762
3763ul.search_filtered {
3764  min-width:100%;
3765  list-style: none;
3766  margin: 0 0 5px;
3767  padding: 0;
3768}
3769.search_filtered .jd-selected {
3770  background:#efefef;
3771  cursor:pointer;
3772}
3773.search_filtered .jd-selected,
3774.search_filtered .jd-selected a {
3775    color:#09C !important;
3776}
3777
3778.no-display {
3779  display: none;
3780}
3781
3782.search_filtered li.jd-autocomplete {
3783  font-size: 0.81em;
3784  border: none;
3785  margin: 0 0 2px;
3786  padding: 0;
3787  line-height:1.5em;
3788}
3789
3790.search_filtered li a {
3791  padding:0 5px;
3792  color:#222 !important;
3793  display:inline-block;
3794  line-height:12px;
3795}
3796
3797.search_filtered li.header {
3798  font-weight:bold;
3799  color:#444;
3800  border: none;
3801  margin: 8px 0 2px;
3802  padding:1px 5px;
3803  line-height:1.5em;
3804}
3805.search_filtered li.header.small {
3806  font-size:0.85em;
3807}
3808
3809.suggest-card.reference
3810.search_filtered li.header {
3811  color:#aaa;
3812  font-size: 0.81em;
3813}
3814
3815.search_filtered li.header:first-child {
3816  margin: 0 0 2px;
3817}
3818
3819.show-item {
3820  display: table-row;
3821}
3822.hide-item {
3823  display: hidden;
3824}
3825
3826
3827
3828
3829
3830/* SEARCH RESULTS */
3831
3832
3833#leftSearchControl .gsc-twiddle {
3834  background-image : none;
3835}
3836
3837#leftSearchControl td, #searchForm td {
3838  border: 0px solid #000;
3839  padding:0;
3840}
3841
3842#leftSearchControl .gsc-resultsHeader .gsc-title {
3843  padding-left : 0px;
3844  font-weight : bold;
3845  font-size : 13px;
3846  color:#006699;
3847  display : none;
3848}
3849
3850#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
3851  display : none;
3852}
3853
3854#leftSearchControl .gsc-resultsRoot {
3855  padding-top : 6px;
3856}
3857
3858#leftSearchControl div.gs-visibleUrl-long {
3859  display : block;
3860  color:#006699;
3861}
3862
3863#leftSearchControl .gsc-webResult {
3864  padding:0 0 20px 0;
3865}
3866
3867.gsc-webResult div.gs-visibleUrl-short,
3868table.gsc-branding,
3869.gsc-clear-button {
3870  display : none;
3871}
3872
3873.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
3874.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
3875#leftSearchControl a,
3876#leftSearchControl a b {
3877  color:#006699;
3878}
3879
3880.gsc-resultsHeader {
3881  display: none;
3882}
3883
3884/* Disable built in search forms */
3885.gsc-control form.gsc-search-box {
3886  display : none;
3887}
3888table.gsc-search-box {
3889  margin:6px 0 0 0;
3890  border-collapse:collapse;
3891}
3892
3893td.gsc-input {
3894  padding:0 2px;
3895  width:100%;
3896  vertical-align:middle;
3897}
3898
3899input.gsc-input {
3900  border:1px solid #BCCDF0;
3901  width:99%;
3902  padding-left:2px;
3903  font-size:.95em;
3904}
3905
3906td.gsc-search-button {
3907  text-align: right;
3908  padding:0;
3909  vertical-align:top;
3910}
3911
3912
3913#searchResults {
3914  overflow:hidden; /* because the repositioned page links makes the section think it needs to scroll
3915(it doesn't) */
3916  height:auto;
3917}
3918
3919#searchResults .gsc-control {
3920  position:relative;
3921  width:auto;
3922  padding:0 0 10px;
3923}
3924
3925#searchResults .gsc-tabsArea {
3926  position:relative;
3927  white-space:nowrap;
3928  float:left;
3929  width:200px;
3930}
3931
3932#searchResults .gsc-above-wrapper-area {
3933  display:none;
3934}
3935
3936#searchResults .gsc-resultsbox-visible {
3937  float:left;
3938  width:720px;
3939  margin-left:20px;
3940}
3941
3942#searchResults .gsc-tabHeader {
3943  padding: 3px 6px;
3944  position:relative;
3945  width:auto;
3946  display:block;
3947}
3948
3949#searchResults h2#searchTitle {
3950  padding:0;
3951  margin:5px 0;
3952  border:none;
3953}
3954
3955#searchResults h2#searchTitle em {
3956  font-style:normal;
3957  color:#33B5E5;
3958}
3959
3960#searchResults .gsc-table-result {
3961  margin:5px 0 10px 0;
3962  background-color:transparent;
3963}
3964#searchResults .gs-web-image-box, .gs-promotion-image-box {
3965  width:120px;
3966}
3967#searchResults .gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
3968  max-width:120px;
3969}
3970
3971#searchResults .gsc-table-result .gsc-thumbnail {
3972  padding:0 20px 0 0;
3973}
3974
3975#searchResults td {
3976  background-color:transparent;
3977}
3978
3979#searchResults .gsc-expansionArea {
3980  position:relative;
3981}
3982#searchResults .gsc-tabsArea .gsc-cursor-box {
3983  width:200px;
3984  padding:20px 0 0 1px;
3985}
3986#searchResults .gsc-cursor-page {
3987  display:inline-block;
3988  float:left;
3989  margin:-1px 0 0 -1px;
3990  padding:0;
3991  height:27px;
3992  width:27px;
3993  text-align:center;
3994  line-height:2;
3995}
3996
3997#searchResults .gsc-tabHeader.gsc-tabhInactive,
3998#searchResults .gsc-cursor-page {
3999  text-decoration:none;
4000  color:#258AAF;
4001  border: solid 1px #DADADA;
4002}
4003
4004#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
4005#searchResults .gsc-cursor-page:hover {
4006  border-color: #DBDBDB;
4007  background-color: #F3F3F3;
4008  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
4009  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
4010  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
4011  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
4012  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
4013  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
4014  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9',
4015EndColorStr='#ececec');
4016  color: #33B5E5;
4017}
4018
4019#searchResults .gsc-tabHeader.gsc-tabhActive,
4020#searchResults .gsc-tabHeader.gsc-tabhActive:hover,
4021#searchResults .gsc-cursor-page.gsc-cursor-current-page,
4022#searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
4023  color:#fff;
4024  background-color: #09C;
4025  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
4026  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
4027  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
4028  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
4029  background-image: -o-linear-gradient(top, #2FADDB, #09C);
4030  background-image: linear-gradient(top, #2FADDB, #09C);
4031  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
4032  border: 1px solid #3990AB;
4033  z-index:100;
4034}
4035
4036
4037
4038
4039
4040/************ STICKY NAV BAR ******************/
4041
4042#header-wrapper {
4043  background: #f9f9f9;
4044  margin: 0 -10px 0 -10px;
4045  padding: 31px 10px 0px 10px;
4046  position: relative;
4047}
4048#header-wrapper #nav-x div.wrap {
4049  max-width: 940px;
4050  height: 38px;
4051}
4052#header-wrapper #nav-x ul.nav-x li {
4053  margin-right: 36px !important;
4054  margin-top: 5px;
4055  margin-bottom: 0px;
4056  height: 30px;
4057}
4058#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {
4059  color: #669900;
4060  border-bottom: 3px solid #669900;
4061}
4062#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
4063  color: #669900;
4064}
4065#header-wrapper #nav-x > div.wrap ul.nav-x a {
4066  font-size: 14.5px;
4067}
4068#header-wrapper .developer-console-btn {
4069  float: right;
4070  background: #fefefe;
4071  border-radius: 4px;
4072  padding: 8px 14px;
4073  box-shadow: 1px 1px 0px #7a7a7a;
4074  font-size: 14px;
4075  margin-top: -6px;
4076  cursor: pointer;
4077  color: #464646;
4078  margin-right: 20px;
4079}
4080/* not currently used */
4081#header-wrapper .shadow {
4082  width: 1034px;
4083  height: 4px;
4084  position: absolute;
4085  left: 50%;
4086  margin-left: -517px;
4087  bottom: -4px;
4088  background-image: url(../images/header-shadow.png);
4089}
4090
4091#context {
4092  clear: both;
4093  padding-top: 14px;
4094}
4095#context .breadcrumb {
4096  float: left;
4097  margin-bottom: 10px;
4098}
4099#context .util {
4100  float: right;
4101  margin-right: 20px;
4102}
4103
4104.breadcrumb {
4105  list-style: none;
4106  margin: 0;
4107  padding: 0;
4108  position: relative;
4109}
4110.breadcrumb li {
4111  float: left;
4112  padding: 0 20px 0 0;
4113  color: #000;
4114  white-space: nowrap;
4115}
4116.breadcrumb li a {
4117  color: #000;
4118}
4119.breadcrumb li:after {
4120  content: url(../images/breadcrumb.png);
4121  position: relative;
4122  top: 1px;
4123  left: 10px;
4124  width: 5px;
4125  height: 10px;
4126}
4127.breadcrumb li.current {
4128  font-weight: 700;
4129}
4130.breadcrumb li.current:after {
4131  display: none;
4132}
4133
4134/* Sticky Nav overrides */
4135.sticky-menu {
4136  position: fixed;
4137  width: 940px;
4138  height: 0px;
4139  z-index: 51;
4140  top: 12px;
4141}
4142#sticky-header {
4143  display: none;
4144  padding: 0 10px;
4145  position: fixed;
4146  background: #f9f9f9;
4147  top: 0px;
4148  left: 0px;
4149  right: 0px;
4150  height: 45px;
4151  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
4152  border-bottom: 1px solid #a5c43a;
4153  z-index: 50;
4154}
4155#sticky-header.design {
4156  border-bottom: 1px solid #33b5e5;
4157}
4158#sticky-header.develop {
4159  border-bottom: 1px solid #F80;
4160}
4161#sticky-header.distribute {
4162  border-bottom: 1px solid #9C0;
4163}
4164#sticky-header.about {
4165  border-bottom: 1px solid #9933CC;
4166}
4167#sticky-header > div {
4168  overflow: hidden;
4169  *zoom: 1;
4170  width: 940px;
4171  margin: 0 auto;
4172  clear: both;
4173  padding-top: 9px;
4174}
4175#sticky-header > div .logo {
4176  float: left;
4177  width: 26px;
4178  height: 25px;
4179  background: url(../images/dac_logo.png);
4180  background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x);
4181  z-index: 52;
4182  position: relative;
4183}
4184#sticky-header > div .top {
4185  float: left;
4186  width: 38px;
4187  height: 38px;
4188  position: relative;
4189  background: url(../images/styles/gototop.png);
4190  z-index: 52;
4191}
4192#sticky-header > div .breadcrumb {
4193  float: left;
4194  padding: 0 0 0 10px;
4195  border-left: 1px solid #d2d2d2;
4196  line-height: 24px;
4197  font-size: 14px;
4198  position: relative;
4199  top: 0px;
4200  z-index: 52;
4201}
4202
4203
4204}
4205
4206
4207
4208
4209
4210
4211
4212/*********** PREVIOUSLY dac-styles.css ***************/
4213
4214
4215#header {
4216  border-bottom:0;
4217}
4218
4219#header .wrap {
4220  max-width:940px;
4221  height:41px;
4222  border-bottom:1px solid;
4223  border-color: #ccc;
4224  position:relative;
4225}
4226
4227.about #header .wrap {
4228  border-color: #9933CC;
4229}
4230
4231.design #header .wrap {
4232  border-color: #33b5e5;
4233}
4234
4235.develop #header .wrap {
4236  border-color: #F80;
4237}
4238
4239.distribute #header .wrap {
4240  border-color: #9C0;
4241}
4242
4243.logo a {
4244  float:left;
4245}
4246
4247#header .logo {
4248  margin-top: -6px;
4249  margin-left: 0px;
4250  margin-bottom:0px;
4251  width: 160px;
4252  padding-right:10px;
4253}
4254
4255
4256#header-wrap .logo.landing-logo {
4257  width:220px;
4258  margin:0;
4259  padding:0;
4260  margin-bottom:22px;
4261}
4262#header-wrap .logo.landing-logo img {
4263  padding:0 0 0 10px;
4264}
4265
4266.search {
4267  height:25px;
4268  margin-top: -3px;
4269  margin-bottom: 0px;
4270}
4271
4272
4273
4274/* Quicknav */
4275.btn-quicknav {
4276  width:20px;
4277  height:28px;
4278  float:left;
4279  margin-left:6px;
4280  padding-right:10px;
4281  position:relative;
4282  cursor:pointer;
4283  border-right:1px solid #CCC;
4284}
4285
4286.btn-quicknav a {
4287  zoom:1;
4288  position:absolute;
4289  top:13px;
4290  left:5px;
4291  display:block;
4292  text-indent:-9999em;
4293  width:10px;
4294  height:5px;
4295  background:url(../images/quicknav_arrow.png) no-repeat;
4296}
4297
4298.btn-quicknav a.arrow-active {
4299  background-position: 0 -5px;
4300  display:none;
4301}
4302
4303#header-wrap.quicknav a.arrow-inactive {
4304  display:none;
4305}
4306
4307.btn-quicknav.active a.arrow-active {
4308  display:block;
4309}
4310
4311.nav-x li {
4312  display:block;
4313  float:left;
4314  margin-right:45px;
4315  -webkit-transition: all 0.25s linear;
4316      -moz-transition: all 0.25s linear;
4317       -ms-transition: all 0.25s linear;
4318        -o-transition: all 0.25s linear;
4319           transition: all 0.25s linear;
4320}
4321
4322#header-wrap.quicknav .nav-x li {
4323  min-width:160px;
4324  margin-right:20px;
4325}
4326
4327#header-wrap.quicknav li.last {
4328  margin-right:0px;
4329}
4330
4331#quicknav {
4332 float:none;
4333 clear:both;
4334 margin-left:0;
4335 margin-top:-30px;
4336 display:none;
4337 overflow:hidden;
4338}
4339
4340#header-wrap.quicknav #quicknav {
4341
4342}
4343
4344#quicknav ul {
4345  margin:10px 0;
4346  padding:0;
4347}
4348
4349#quicknav ul li.about {
4350  border-top:1px solid #9933CC;
4351}
4352
4353#quicknav ul li.design {
4354  border-top:1px solid #33b5e5;
4355}
4356
4357#quicknav ul li.develop {
4358  border-top:1px solid #FF8800;
4359}
4360
4361#quicknav ul li.distribute {
4362  border-top:1px solid #99cc00;
4363}
4364
4365#quicknav ul li {
4366  display:block;
4367  float:left;
4368  margin:0 20px 0 0;
4369  min-width:140px;
4370}
4371
4372#quicknav ul li.last {
4373  margin-right:0px;
4374}
4375
4376#quicknav ul li ul li {
4377  float:none;
4378}
4379
4380#quicknav ul li ul li a {
4381  color:#222;
4382}
4383
4384#quicknav ul li li ul,
4385#quicknav ul li li ul li {
4386  margin:0;
4387}
4388
4389#quicknav ul li li ul li:before {
4390  content:"\21B3";
4391}
4392
4393#header-wrap {
4394   -webkit-transition: all 0.25s ease-out;
4395      -moz-transition: all 0.25s ease-out;
4396       -ms-transition: all 0.25s ease-out;
4397        -o-transition: all 0.25s ease-out;
4398           transition: all 0.25s ease-out;
4399
4400}
4401
4402#header-wrap.quicknav {
4403  height:196px;
4404
4405}
4406
4407/* SEARCH AND MORE */
4408.search {
4409  position: absolute;
4410  width: 50px;
4411  height:28px;
4412  display: block;
4413  margin-top:-3px;
4414  margin-bottom:7px;
4415  overflow:hidden;
4416  z-index:100;
4417  right:54px;
4418  -webkit-transition: width 0.4s ease;
4419     -moz-transition: width 0.4s ease;
4420       -o-transition: width 0.4s ease;
4421          transition: width 0.4s ease;
4422}
4423
4424.search #search-btn {
4425  width:50px;
4426  height:28px;
4427  background:url(../images/icon_search.png) no-repeat;
4428  float:left;
4429}
4430
4431.search-inner {
4432  width:245px;
4433}
4434
4435.search:hover, .search.active {
4436  width:245px;
4437}
4438
4439.search .bottom, .search .left, .search .right {
4440  position: absolute;
4441  background-color: #a2a2a2
4442}
4443
4444.search .bottom {
4445  width: 214px;
4446  height: 1px;
4447  top: 24px;
4448  left: 0
4449}
4450
4451.search .left, .search .right {
4452  height: 5px;
4453  width: 1px
4454}
4455
4456.search .left {
4457  top: 22px;
4458  left: 56px;
4459  background-color:#CCC;
4460}
4461
4462.search .right {
4463  top: 22px;
4464  left: 238px;
4465  background-color:#CCC;
4466}
4467
4468.search form {
4469  margin-top: 2px;
4470  width: 162px;
4471  float:left;
4472}
4473
4474.search form input {
4475  color: #2f2f2f;
4476  font-size: 0.95em;
4477  width: 178px;
4478  border: none;
4479  margin-left: 6px;
4480  z-index: 1500;
4481  position: relative;
4482  background-color: transparent;
4483  border-bottom:1px solid #CCC;
4484  padding:0 0 0 4px;
4485  outline:none;
4486  height:24px;
4487}
4488
4489.search:hover form input {
4490  border-bottom:1px solid #33B5E5;
4491}
4492
4493.search:hover .bottom, .search:hover .left, .search:hover .right {
4494  background-color: #33b5e5;
4495}
4496
4497.search:hover #search-btn {
4498  background-position: 0 -28px
4499}
4500
4501.search form input:focus {
4502  color: #222;
4503  font-weight: bold
4504}
4505
4506.moremenu {
4507  float: right;
4508  position: relative;
4509  width: 50px;
4510  height:28px;
4511  display: block;
4512  margin-top:-3px;
4513  margin-bottom:7px;
4514  overflow:hidden;
4515  -webkit-transition: width 0.25s ease;
4516     -moz-transition: width 0.25s ease;
4517       -o-transition: width 0.25s ease;
4518          transition: width 0.25s ease;
4519}
4520
4521.moremenu #more-btn {
4522  width:40px;
4523  height:28px;
4524  background:url(../images/icon_more.png) no-repeat;
4525  border-left:1px solid #CCC;
4526  float:left;
4527  cursor:pointer;
4528}
4529
4530.moremenu:hover #more-btn {
4531  background-position:0 -28px;
4532}
4533
4534.morehover {
4535  position:absolute;
4536  right:6px;
4537  top:-9px;
4538  width:40px;
4539  height:35px;
4540  z-index:99;
4541  overflow:hidden;
4542
4543  -webkit-opacity:0;
4544     -moz-opacity:0;
4545       -o-opacity:0;
4546          opacity:0;
4547
4548  -webkit-transform-origin:100% 0%;
4549     -moz-transform-origin:100% 0%;
4550       -o-transform-origin:100% 0%;
4551          transform-origin:100% 0%;
4552
4553  -webkit-transition-property: -webkit-opacity;
4554  -webkit-transition-duration: .25s;
4555  -webkit-transition-timing-function:ease;
4556
4557  -moz-transition-property: -moz-opacity;
4558  -moz-transition-duration: .25s;
4559  -moz-transition-timing-function:ease;
4560
4561  -o-transition-property: -o-opacity;
4562  -o-transition-duration: .25s;
4563  -o-transition-timing-function:ease;
4564
4565  transition-property: opacity;
4566  transition-duration: .25s;
4567  transition-timing-function:ease;
4568}
4569
4570.morehover:hover,
4571.morehover.hover {
4572  opacity:1;
4573  height:385px;
4574  width:268px;
4575  -webkit-transition-property:height,  -webkit-opacity;
4576}
4577
4578.morehover .top {
4579  width:268px;
4580  height:39px;
4581  background:url(../images/more_top.png) no-repeat;
4582}
4583
4584.morehover .mid {
4585  width:228px;
4586  background:url(../images/more_mid.png) repeat-y;
4587  padding:10px 20px 0 20px;
4588}
4589
4590.morehover .mid .header {
4591  border-bottom:1px solid #ccc;
4592  font-weight:bold;
4593}
4594
4595.morehover .bottom {
4596  width:268px;
4597  height:6px;
4598  background:url(../images/more_bottom.png) no-repeat;
4599}
4600
4601.morehover ul {
4602  margin:10px 10px 20px 0;
4603}
4604
4605.morehover ul li {
4606  list-style:none;
4607}
4608
4609.morehover ul li.active a,
4610.morehover ul li.active a:hover {
4611  color:#222 !important;
4612}
4613
4614.morehover ul li.active img {
4615  margin-right:4px;
4616}
4617
4618
4619
4620
4621/* MARQUEE */
4622.slideshow-container {
4623  width:100%;
4624  overflow:hidden;
4625  position:relative;
4626}
4627.slideshow-container .slideshow-prev {
4628  position:absolute;
4629  top:50%;
4630  left:0px;
4631  margin-top:-36px;
4632  z-index:99;
4633}
4634.slideshow-container .slideshow-next {
4635  position:absolute;
4636  top:50%;
4637  margin-top:-36px;
4638  z-index:99;
4639  right:0px;
4640}
4641
4642.slideshow-container .pagination {
4643  position:absolute;
4644  bottom:20px;
4645  width:100%;
4646  text-align:center;
4647  z-index:99;
4648}
4649.slideshow-container .pagination ul {
4650  margin:0;
4651}
4652.slideshow-container .pagination ul li{
4653  display: inline-block;
4654  width:12px;
4655  height:12px;
4656  text-indent:-8000px;
4657  list-style:none;
4658  margin: 0 2px;
4659  border-radius:6px;
4660  background-color:#ccc;
4661  cursor:pointer;
4662        -webkit-transition:color .5s ease-in;
4663        -moz-transition:color .5s ease-in;
4664        -o-transition:color .5s ease-in;
4665        transition:color .5s ease-in;
4666}
4667.slideshow-container .pagination ul li:hover {
4668  background-color:#999;
4669}
4670.slideshow-container .pagination ul li.active {
4671  background-color:#33b5e5;
4672}
4673.slideshow-container .pagination ul li.active:hover {
4674  background-color:#33b5e5;
4675}
4676.slideshow-container ul li {
4677  display:inline;
4678  list-style:none;
4679}
4680
4681
4682#landing h1 {
4683  margin:17px 0 20px 0 !important;
4684}
4685
4686a.download-sdk {
4687    float:right;
4688    margin:-10px 0;
4689    height:30px;
4690    padding-top:4px;
4691    padding-bottom:0px;
4692}
4693
4694#nav-x {
4695  padding-top: 13px;
4696}
4697
4698#nav-x .wrap {
4699  min-height:32px;
4700}
4701
4702#nav-x .wrap,
4703#searchResults.wrap {
4704    max-width:940px;
4705    border-bottom:1px solid #CCC;
4706}
4707
4708#searchResults.wrap #leftSearchControl {
4709  min-height:700px
4710}
4711.nav-x {
4712    margin-left:0;
4713    margin-bottom:0;
4714}
4715
4716
4717
4718
4719
4720
4721
4722
4723
4724
4725/*
4726 * CSS Styles that are needed by jScrollPane for it to operate correctly.
4727 */
4728
4729.jspContainer {
4730  overflow: hidden;
4731  position: relative;
4732}
4733
4734.jspPane {
4735  position: absolute;
4736  width:100% !important; /* to avoid cut-off api names in reference in horiz scroll */
4737}
4738
4739.jspVerticalBar {
4740  position: absolute;
4741  top: 0;
4742  right: 0;
4743  width: 4px;
4744  height: 100%;
4745  background: #f5f5f5;
4746}
4747
4748.jspHorizontalBar {
4749  position: absolute;
4750  bottom: 0;
4751  left: 0;
4752  width: 100%;
4753  height: 4px;
4754  background: #f5f5f5;
4755}
4756
4757.jspVerticalBar *,
4758.jspHorizontalBar * {
4759  margin: 0;
4760  padding: 0;
4761}
4762.jspCap {
4763  display: block;
4764}
4765
4766.jspVerticalBar .jspCap {
4767  height: 4px;
4768}
4769
4770.jspHorizontalBar .jspCap {
4771  width: 0;
4772  height: 100%;
4773}
4774
4775.jspHorizontalBar .jspCap {
4776  float: left;
4777}
4778
4779.jspTrack {
4780  position: relative;
4781}
4782
4783.jspDrag {
4784  background: #bbb;
4785  position: relative;
4786  top: 0;
4787  left: 0;
4788  cursor: pointer;
4789}
4790
4791.jspDrag:hover,
4792.jspDrag:active {
4793  border-color: #09c;
4794  background-color: #4cadcb;
4795  background-image: -webkit-gradient(linear, left top, right top, from(#5dbcd9), to(#4cadcb));
4796  background-image: -webkit-linear-gradient(left, #5dbcd9, #4cadcb);
4797  background-image: -moz-linear-gradient(left, #5dbcd9, #4cadcb);
4798  background-image: -ms-linear-gradient(left, #5dbcd9, #4cadcb);
4799  background-image: -o-linear-gradient(left, #5dbcd9, #4cadcb);
4800  background-image: linear-gradient(left, #5dbcd9, #4cadcb);
4801  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', EndColorStr='#4cadcb');
4802}
4803
4804.jspHorizontalBar .jspTrack,
4805.jspHorizontalBar .jspDrag {
4806  float: left;
4807  height: 100%;
4808}
4809
4810.jspArrow {
4811  background: #999;
4812  text-indent: -20000px;
4813  display: block;
4814  cursor: pointer;
4815}
4816
4817.jspArrow.jspDisabled {
4818  cursor: default;
4819  background: #ccc;
4820}
4821
4822.jspVerticalBar .jspArrow {
4823  height: 16px;
4824}
4825
4826.jspHorizontalBar .jspArrow {
4827  width: 16px;
4828  float: left;
4829  height: 100%;
4830}
4831
4832.jspVerticalBar .jspArrow:focus {
4833  outline: none;
4834}
4835
4836.jspCorner {
4837  float: left;
4838  height: 100%;
4839}
4840
4841/* Yuk! CSS Hack for IE6 3 pixel bug :( */
4842* html .jspCorner {
4843  margin: 0 -3px 0 0;
4844}
4845/******* end of jscrollpane *********/
4846
4847
4848
4849
4850
4851/************ DEVELOP HOMEPAGE ******************/
4852
4853/* Slideshow */
4854.slideshow-develop {
4855  height: 316px;
4856  width: 940px;
4857  position: relative;
4858  overflow:hidden;
4859}
4860.slideshow-develop .frame {
4861  width: 940px;
4862  height: 316px;
4863}
4864.slideshow-develop img.play {
4865  max-width:350px;
4866  max-height:240px;
4867  margin:20px 0 0 90px;
4868  -webkit-transform: perspective(800px ) rotateY( 35deg );
4869  box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4870  -moz-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4871  -webkit-box-shadow: -16px 20px 40px rgba(0, 0, 0, 0.3);
4872}
4873.slideshow-develop img.play.no-shadow {
4874    box-shadow: none;
4875    -moz-box-shadow: none;
4876    -webkit-box-shadow: none;
4877}
4878.slideshow-develop img.play.no-transform {
4879  -webkit-transform: none;
4880}
4881.slideshow-develop a.slideshow-next {
4882  background: url(../images/arrow-right-develop.png);
4883}
4884.slideshow-develop a.slideshow-prev {
4885  background: url(../images/arrow-left-develop.png);
4886}
4887.slideshow-develop .content-right {
4888  float: left;
4889}
4890.slideshow-develop .content-right h2 {
4891  padding:0;
4892  margin-bottom:10px;
4893  border:none;
4894  font-size:24px;
4895}
4896.slideshow-develop .item {
4897  height: 300px;
4898  width: 940px;
4899}
4900.slideshow-develop .pagination ul li.active {
4901  background-color: #F80;
4902}
4903.slideshow-develop .pagination ul li.active:hover {
4904  background-color: #F80;
4905}
4906.slideshow-develop .item hr {
4907  margin:5px 0 10px;
4908}
4909.slideshow-develop .item p {
4910  margin:10px 0;
4911}
4912.slideshow-develop .item p.title-intro {
4913  position:absolute;
4914  margin:0;
4915}
4916
4917/* Feeds */
4918.feed ul {
4919  margin: 0;
4920}
4921.feed .feed-nav {
4922  height: 25px;
4923  border-bottom: 1px solid #CCC;
4924}
4925.feed .feed-nav li {
4926  list-style: none;
4927  float: left;
4928  height: 21px; /* +4px bottom border = 25px; same as .feed-nav */
4929  margin-right: 25px;
4930  cursor: pointer;
4931}
4932.feed .feed-nav li.active {
4933  color: #000;
4934  border-bottom: 4px solid #F80;
4935}
4936.feed .feed-container {
4937  overflow: hidden;
4938  width: 460px;
4939}
4940.feed .feed-container .feed-frame {
4941  width: 1000px;
4942}
4943.feed .feed-container .feed-frame ul {
4944  float: left;
4945  width:460px;
4946}
4947.feed .feed-container .feed-frame ul ul {
4948  float: none;
4949  margin:10px 0 0 30px;
4950}
4951.feed .feed-container .feed-frame li {
4952  list-style: none;
4953  margin: 20px 0 20px 0;
4954  width: 460px;
4955  height:93px;
4956}
4957.feed .feed-container .feed-frame li.playlist {
4958  height:auto;
4959}
4960.feed .feed-container .feed-frame li.playlist a {
4961  height:93px;
4962  display:block;
4963}
4964.feed .feed-container .feed-frame li.more {
4965  height:20px;
4966  margin:10px 0 5px 5px;
4967}
4968.feed .feed-container .feed-frame li.more a {
4969  height:inherit;
4970}
4971.feed .feed-container .feed-frame li.playlist-video {
4972  list-style: none;
4973  margin: 0;
4974  width: 460px;
4975  height:55px;
4976  font-size:12px;
4977}
4978.feed .feed-container .feed-frame li.playlist-video a {
4979  height:45px;
4980  padding:5px;
4981}
4982.feed .feed-container .feed-frame li.playlist-video h5 {
4983  font-size:12px;
4984  line-height:13px;
4985  margin:0;
4986}
4987.feed .feed-container .feed-frame li.playlist-video p {
4988  margin:5px 0 0;
4989  line-height:15px;
4990}
4991.feed-container .feed-frame div.feed-image {
4992  float: left;
4993  border: 1px solid #999;
4994  margin:0 20px 0 0;
4995  width:122px;
4996  height:92px;
4997  background:url('../images/blog-default.png') no-repeat 0 0;
4998  background-size:180px;
4999}
5000#jd-content .feed .feed-container .feed-frame li img {
5001  float: left;
5002  border: 1px solid #999;
5003  margin:0 20px 0 0;
5004  width:122px;
5005  height:92px;
5006}
5007#jd-content .feed .feed-container .feed-frame li.playlist-video img {
5008  width:inherit;
5009  height:inherit;
5010}
5011
5012.feed .feed-container .feed-frame li a,
5013.feed .feed-container .feed-frame li a:active {
5014  color:#555 !important;
5015}
5016
5017.feed .feed-container .feed-frame li a:hover,
5018.feed .feed-container .feed-frame li a:hover * {
5019  color:#7AA1B0 !important;
5020}
5021
5022/* Video player */
5023#player-wrapper {
5024  display:none;
5025  margin: -1px auto 0;
5026  position: relative;
5027  width: 940px;
5028  height: 0px;
5029}
5030#player-frame {
5031  background: #EFEFEF;
5032  border: 1px solid #CCC;
5033  padding: 0px 207px;
5034  z-index: 10; /* stay above marque, but below search suggestions */
5035  width: 525px;
5036  height: 330px;
5037  position: relative;
5038}
5039
5040
5041
5042/************ DEVELOP TOPIC CONTAINERS ************/
5043
5044.landing-banner,
5045.landing-docs {
5046  margin:20px 0;
5047}
5048.landing-banner > div:first-child,
5049.landing-docs > div:first-child,
5050.landing-docs > .col-12 {
5051  margin-left:0;
5052  min-height:280px;
5053}
5054.landing-banner.short > div {
5055  min-height:50px;
5056}
5057.landing-banner > div:last-child,
5058.landing-docs > div:last-child,
5059.landing-docs > .col-12 {
5060  margin-right:0;
5061}
5062
5063.landing-banner > div > *:last-child {
5064  margin-bottom:0;
5065}
5066.landing-banner h1 {
5067  margin-top:16px;
5068  padding-bottom:24px;
5069}
5070.landing-docs,
5071.landing-banner {
5072  clear:both;
5073  overflow:hidden;
5074}
5075.landing-docs h3 {
5076  font-size:14px;
5077  line-height:21px;
5078  color:#555;
5079  text-transform:uppercase;
5080  border-bottom:1px solid #CCC;
5081  margin:0 0 20px;
5082}
5083.landing-docs a {
5084  color:#333 !important;
5085}
5086
5087.landing-docs a:hover,
5088.landing-docs a:hover * {
5089  color:#7AA1B0 !important
5090}
5091
5092.landing-docs .normal-links a {
5093  color:#258aaf !important;
5094}
5095
5096.plusone {
5097  float:right;
5098}
5099
5100
5101
5102.next-docs {
5103  border-top:1px solid #ccc;
5104  margin:40px 0 0;
5105  padding:5px 0 0;
5106  clear:left;
5107  overflow:hidden;
5108}
5109.next-docs div:first-child {
5110  margin-left:0;
5111}
5112.next-docs div:last-child {
5113  margin-right:0;
5114}
5115
5116.next-docs h2 {
5117  font-size:14px;
5118  line-height:21px;
5119  color:#555;
5120  text-transform:uppercase;
5121  border-bottom:none;
5122  margin:0 0 1em;
5123  padding:5px 0 0;
5124}
5125
5126
5127
5128/************* HOME/LANDING PAGE *****************/
5129
5130.slideshow-home {
5131  height: 500px;
5132  width: 940px;
5133  border-bottom: 1px solid #CCC;
5134  position: relative;
5135  margin: 0;
5136}
5137.slideshow-home .frame {
5138  width: 940px;
5139  height: 500px;
5140}
5141.slideshow-home .content-left {
5142  float: left;
5143  text-align: center;
5144  vertical-align: center;
5145  margin: 0 0 0 35px;
5146}
5147.slideshow-home .content-right {
5148  margin: 80px 0 0 0;
5149}
5150.slideshow-home .content-right p {
5151  margin-bottom: 10px;
5152}
5153.slideshow-home .content-right p:last-child {
5154  margin-top: 15px;
5155}
5156.slideshow-home .content-right h1 {
5157  padding:0;
5158}
5159.slideshow-home .item {
5160  height: 500px;
5161  width: 940px;
5162}
5163.home-sections {
5164  padding: 30px 20px 20px;
5165  margin: 20px 0;
5166  background: -webkit-linear-gradient(top, #F6F6F6,#F9F9F9);
5167}
5168.home-sections ul {
5169  margin: 0;
5170}
5171.home-sections ul li {
5172  float: left;
5173  display: block;
5174  list-style: none;
5175  width: 170px;
5176  height: 35px;
5177  border: 1px solid #ccc;
5178  background: white;
5179  margin-right: 10px;
5180  border-radius: 1px;
5181  -webkit-border-radius: 1px;
5182  -moz-border-radius: 1px;
5183  box-shadow: 1px 1px 5px #EEE;
5184  -webkit-box-shadow: 1px 1px 5px #EEE;
5185  -moz-box-shadow: 1px 1px 5px #EEE;
5186  background: white;
5187}
5188.home-sections ul li:hover {
5189  background: #F9F9F9;
5190  border: 1px solid #CCC;
5191}
5192.home-sections ul li a,
5193.home-sections ul li a:hover {
5194  font-weight: bold;
5195  margin-top: 8px;
5196  line-height: 18px;
5197  float: left;
5198  width: 100%;
5199  text-align: center;
5200  color: #09c !important;
5201}
5202.home-sections ul li a {
5203  font-weight: bold;
5204  margin-top: 8px;
5205  line-height: 18px;
5206  float: left;
5207  width:100%;
5208  text-align:center;
5209}
5210.home-sections ul li img {
5211  float: left;
5212  margin: -8px 0 0 10px;
5213}
5214.home-sections ul li.last {
5215  margin-right: 0px;
5216}
5217.fullpage #footer {
5218  margin-top: -40px;
5219}
5220
5221/************ DISTRIBUTE PAGES ******************/
5222
5223.article-detail #body-content {
5224  padding-top: 10px;
5225}
5226
5227/* A container for grid sets with uppercase h3 and rule */
5228.dynamic-grid h3 {
5229  font-size:14px;
5230  line-height:21px;
5231  color:#555;
5232  text-transform:uppercase;
5233  border-bottom:1px solid #CCC;
5234  padding:8px 0 0 1px;
5235  margin-bottom:14px;
5236  clear:both;
5237}
5238
5239.top-right-float {
5240  float: right;
5241}
5242
5243.clearfloat {
5244  float: none;
5245  clear: both;
5246}
5247
5248.border-img {
5249  border: 1px solid #CCC;
5250}
5251
5252.center-img {
5253  margin: auto;
5254  text-align: center;
5255}
5256.center-img img {
5257  margin-bottom: 15px;
5258}
5259
5260.figure img, .border-img {
5261  margin-bottom: 15px;
5262}
5263
5264/************ RESOURCE CARDS ******************/
5265
5266/* Resource cards, 12, 13, 16-col */
5267
5268/* Basic card-styling with shadow */
5269.resource-card {
5270  border-radius: 1px;
5271  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
5272  background: #fefefe;
5273}
5274
5275/* Styling for background image including tinting and section icons in stacks */
5276.card-bg {
5277  display: block;
5278  position: absolute;
5279  vertical-align: top;
5280  width: 100%;
5281  left: 0;
5282  top: 0;
5283  background-size: cover;
5284  background-repeat: no-repeat;
5285  background-position: center;
5286  background-image: url(../images/resource-card-default-android.jpg);
5287}
5288.card-bg:after {
5289  content: "";
5290  display: block;
5291  height: 100%;
5292  width: 100%;
5293  opacity: 1;
5294  background: rgba(0, 0, 0, 0.2);
5295  -webkit-transition: opacity 0.5s;
5296  -moz-transition: opacity 0.5s;
5297  -o-transition: opacity 0.5s;
5298  transition: opacity 0.5s;
5299}
5300.static .card-bg:after {
5301  display:none;
5302}
5303.card-bg .card-section-icon {
5304  position: absolute;
5305  top: 50%;
5306  width: 100%;
5307  margin-top: -35px;
5308  text-align: center;
5309  padding-top: 65px;
5310  z-index: 100;
5311}
5312.card-bg .card-section-icon .icon {
5313  position: absolute;
5314  left: 50%;
5315  margin-left: -28px;
5316  top: 0px;
5317  width: 56px;
5318  height: 56px;
5319  background-repeat: no-repeat;
5320  background-position: 50% 50%;
5321  background-image: url(../images/stack-icon.png);
5322}
5323.card-bg .card-section-icon .section {
5324  text-transform: uppercase;
5325  color: white;
5326  font-size: 14px;
5327}
5328
5329.card-info {
5330  position: absolute;
5331  -webkit-box-sizing: border-box;
5332  -moz-box-sizing: border-box;
5333  box-sizing: border-box;
5334  top: 0;
5335  right: 0;
5336  bottom: 0;
5337  left: 0;
5338  overflow: hidden;
5339  background: #fefefe;
5340  padding: 4px 12px 6px 12px;
5341}
5342.card-info .section {
5343  text-transform: uppercase;
5344  color: #898989;
5345  font-size: 12px;
5346  margin-bottom: 1px;
5347}
5348.card-info .title {
5349  color: #363636;
5350  white-space: nowrap;
5351  overflow: hidden;
5352  text-overflow: ellipsis;
5353  padding-bottom: 5px;
5354  margin-bottom: -2px;
5355  font-size: 16px;
5356}
5357.card-info .description {
5358  overflow: hidden;
5359}
5360.card-info .description .text {
5361  color: #464646;
5362  font: 13px/15px Roboto Condensed;
5363  overflow: hidden;
5364  width:100%;
5365}
5366.card-info .description .util {
5367  position: absolute;
5368  right: 5px;
5369  bottom: 70px; /*-2px;*/
5370  opacity: 0;
5371  -webkit-transition: opacity 0.5s;
5372  -moz-transition: opacity 0.5s;
5373  -o-transition: opacity 0.5s;
5374  transition: opacity 0.5s;
5375}
5376.card-info.empty-desc .title {
5377  white-space: normal;
5378  overflow: visible;
5379}
5380.card-info.empty-desc .description {
5381  display: none;
5382}
5383/* Truncate card summaries at bounding box and
5384 * and apply ellipsis at lower right */
5385.ellipsis {
5386  overflow: hidden;
5387  float:right;
5388  line-height: 15px;
5389  width:100%;
5390}
5391.resource-card-6x6 .card-info .description .teddddddxt {
5392 float:left;
5393  position:relative;
5394  margin-left:0;
5395}
5396.ellipsis:before {
5397  content:"";
5398  float: left;
5399  width: 5px;
5400  height:100%;
5401}
5402.ellipsis > *:first-child.text {
5403  float: right;
5404  width: 100%  !important;
5405  margin-left: -5px;
5406}
5407.ellipsis:after {
5408  content: "\02026";
5409  height:17px;
5410  padding-bottom:4px;
5411
5412  box-sizing: content-box;
5413  -webkit-box-sizing: content-box;
5414  -moz-box-sizing: content-box;
5415
5416  float: right; position: relative;
5417  top: -16px; left: 100%;
5418  width: 4em; margin-left: -4em;
5419  padding-right: 5px;
5420
5421  background: -webkit-gradient(linear, left top, right top,
5422    from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
5423  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5424  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5425  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5426  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
5427}
5428.ellipsis:after {
5429  font-style: normal; color: #aaa;
5430  font-size:13px;
5431  text-align: right;
5432}
5433
5434/* Flow Layout */
5435.resource-flow-layout {
5436  display: inline-block;
5437}
5438.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack {
5439  float: left;
5440  position: relative;
5441}
5442.resource-flow-layout .resource-card-stack > .resource-card {
5443  margin-right: 0px !important;
5444}
5445.resource-flow-layout:after {
5446  content: ".";
5447  display: block;
5448  height: 0;
5449  position:relative;
5450  clear: both;
5451  visibility: hidden;
5452}
5453.resource-card:hover {
5454  cursor: pointer;
5455}
5456.static .resource-card:hover {
5457  cursor: auto;
5458}
5459.resource-card:hover .card-bg:after {
5460  opacity: 0;
5461}
5462/* disabled to make way for fade/ellipsis truncation,
5463   and the plusone moves up.
5464.resource-card:hover .card-info .description .text {
5465  padding-right: 70px;
5466} */
5467.resource-card:hover .card-info .description .util {
5468  opacity: 1;
5469}
5470
5471/* Carousel Layout */
5472/* Carousel styles for landing page */
5473.resource-carousel-layout {
5474  margin: 20px 0 20px 0;
5475  position: relative;
5476  overflow: hidden;
5477}
5478.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
5479  display: none;
5480}
5481.resource-carousel-layout .pagination {
5482  bottom: 0px;
5483}
5484.resource-carousel-layout .frame li {
5485  position: relative;
5486}
5487.resource-carousel-layout .frame li .card-bg {
5488  height: 300px;
5489}
5490.resource-carousel-layout .frame li .card-info {
5491  padding: 7px 15px 0px 15px;
5492  top: 300px;
5493}
5494.resource-carousel-layout .frame li .card-info .section {
5495  font-size: 13px;
5496  margin-bottom: 7px;
5497}
5498.resource-carousel-layout .frame li .card-info .title {
5499  font-size: 25px;
5500  margin-bottom: 2px;
5501}
5502.resource-carousel-layout .frame li .card-info .description {
5503  font-family: 15px/16px Roboto Condensed, sans-serif;
5504}
5505.resource-carousel-layout .frame li .card-info .description .text {
5506  height: 40px;
5507}
5508.resource-carousel-layout .frame li .card-info .description .util {
5509  bottom:97px;
5510  right:4px;
5511}
5512
5513/* Stack Layout */
5514.resource-stack-layout {
5515  display: inline-block;
5516}
5517.resource-stack-layout .resource-card-stack {
5518  float: left;
5519  position: relative;
5520}
5521.resource-stack-layout .resource-card {
5522  margin-bottom: 20px;
5523  display: block;
5524  position: relative;
5525}
5526.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
5527  /*text-transform: uppercase;*/
5528  color: #898989;
5529  font-size: 17px;
5530  line-height: 24px;
5531  margin-bottom: 6px;
5532}
5533.resource-stack-layout .section-card {
5534  height: 284px;
5535}
5536.resource-stack-layout .section-card > .card-bg {
5537  height: 192px;
5538}
5539.resource-stack-layout .section-card > .card-info {
5540  padding: 4px 12px 6px 12px;
5541  top: 192px;
5542}
5543.resource-stack-layout .section-card > .card-info .section {
5544  display: none;
5545}
5546.resource-stack-layout .section-card > .card-info .title {
5547  font-size: 17px;
5548  border-bottom: 1px solid #959595;
5549  padding-bottom: 0px;
5550}
5551.resource-stack-layout .section-card > .card-info .description {
5552  font-size: 13px;
5553  line-height: 15px;
5554}
5555.resource-stack-layout .section-card > .card-info .description .text {
5556  height: 30px;
5557}
5558.resource-stack-layout .related-card {
5559  height: 90px;
5560}
5561.resource-stack-layout .related-card > .card-bg {
5562  left: 0;
5563  top: 0;
5564  width: 90px;
5565  height: 100%;
5566  position: absolute;
5567  display: block;
5568}
5569.resource-stack-layout .related-card > .card-info {
5570  left: 90px;
5571  padding: 4px 12px 4px 12px;
5572}
5573.resource-stack-layout .related-card > .card-info .section {
5574  font-size: 12px;
5575  margin-bottom: 1px;
5576  display: none;
5577}
5578.resource-stack-layout .related-card > .card-info .title {
5579  font-size: 16px;
5580  margin-bottom: -2px;
5581  white-space: normal;
5582  overflow: visible;
5583  text-overflow: ellipsis;
5584}
5585.resource-stack-layout .related-card > .card-info .title:after {
5586  content: url(../images/link-out.png);
5587  display: block;
5588}
5589.resource-stack-layout .related-card > .card-info .description {
5590  display: none;
5591}
5592.resource-stack-layout .section-card-menu {
5593  /* Flexible height */
5594  display: block;
5595  height: auto;
5596  width: auto;
5597}
5598.resource-stack-layout .section-card-menu .card-bg {
5599  height: 155px;
5600  /* Flexible height */
5601  position: relative;
5602  display: inline-block;
5603  vertical-align: top;
5604}
5605.resource-stack-layout .section-card-menu .card-info {
5606  padding: 4px 12px 0px 12px;
5607  /* Flexible height */
5608  position: relative;
5609  left: auto;
5610  top: auto;
5611  right: auto;
5612  bottom: auto;
5613}
5614.resource-stack-layout .section-card-menu .card-info ul {
5615  list-style: none;
5616  margin: 0;
5617}
5618.resource-stack-layout .section-card-menu .card-info ul li {
5619  list-style: none;
5620  margin: 0;
5621  padding: 15px 0;
5622  border-top-width: 1px;
5623  border-top-style: solid;
5624  border-top-color: #959595;
5625}
5626.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 {
5627  color: #363636 !important;
5628}
5629.resource-stack-layout .section-card-menu .card-info ul li:first-child {
5630  border-top: none;
5631}
5632.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
5633  opacity: 1;
5634  -webkit-transition: opacity 0.5s;
5635  -moz-transition: opacity 0.5s;
5636  -o-transition: opacity 0.5s;
5637  transition: opacity 0.5s;
5638}
5639.resource-stack-layout .section-card-menu .card-info ul li:hover .description {
5640  max-height: 30px;
5641  opacity: 1;
5642  -webkit-transition: max-height 0.5s, opacity 1s;
5643  -moz-transition: max-height 0.5s, opacity 1s;
5644  -o-transition: max-height 0.5s, opacity 1s;
5645  transition: max-height 0.5s, opacity 1s;
5646}
5647.resource-stack-layout .section-card-menu .card-info .title {
5648  font-size: 16px;
5649  margin-bottom: -2px;
5650  position: relative;
5651}
5652.resource-stack-layout .section-card-menu .card-info .title:after {
5653  background: url(../images/stack-arrow-right.png);
5654  content: '';
5655  opacity: 0;
5656  -webkit-transition: opacity 0.25s;
5657  -moz-transition: opacity 0.25s;
5658  -o-transition: opacity 0.25s;
5659  transition: opacity 0.25s;
5660  position: absolute;
5661  right: 0px;
5662  top: 3px;
5663  width: 10px;
5664  height: 15px;
5665}
5666.resource-stack-layout .section-card-menu .card-info .title.more {
5667  text-transform: uppercase;
5668  color: #898989;
5669  display: inline-block;
5670}
5671.resource-stack-layout .section-card-menu .card-info .title.more:after {
5672  background: url(../images/stack-arrow-right.png);
5673  content: '';
5674  display: block;
5675  position: absolute;
5676  right: -20px;
5677  top: 3px;
5678  width: 10px;
5679  height: 15px;
5680}
5681.resource-stack-layout .section-card-menu .card-info .description {
5682  max-height: 0px;
5683  opacity: 0;
5684  overflow: hidden;
5685  font-size: 13px;
5686  line-height: 15px;
5687  /* Hover off */
5688  -webkit-transition: max-height 0.5s, opacity 0.5s;
5689  -moz-transition: max-height 0.5s, opacity 0.5s;
5690  -o-transition: max-height 0.5s, opacity 0.5s;
5691  transition: max-height 0.5s, opacity 0.5s;
5692}
5693.resource-stack-layout .section-card-menu .card-info .description .text {
5694  height: 30px;
5695}
5696.resource-stack-layout:after {
5697  content: ".";
5698  display: block;
5699  height: 0;
5700  clear: both;
5701  visibility: hidden;
5702}
5703
5704/* Generate the flow layout styles for a 3-column 16-col span */
5705.resource-flow-layout.col-16 {
5706  margin: 0 -14px 0 0;
5707  width: 954px;
5708}
5709.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack {
5710  margin: 0 14px 20px 0;
5711}
5712.resource-flow-layout.col-16 .resource-card-row-stack-last {
5713  margin-bottom: 0px !important;
5714}
5715.resource-flow-layout.col-16 .resource-card-col-stack-last {
5716  margin-bottom: 0px !important;
5717}
5718.resource-flow-layout.col-16 .resource-card-3x6 {
5719  width: 145px;
5720  height: 284px;
5721}
5722.resource-flow-layout.col-16 .resource-card-3x12 {
5723  width: 145px;
5724  height: 588px;
5725}
5726.resource-flow-layout.col-16 .resource-card-3x18 {
5727  width: 145px;
5728  height: 892px;
5729}
5730.resource-flow-layout.col-16 .resource-card-6x6 {
5731  width: 304px;
5732  height: 284px;
5733}
5734.resource-flow-layout.col-16 .resource-card-6x12 {
5735  width: 304px;
5736  height: 588px;
5737}
5738.resource-flow-layout.col-16 .resource-card-6x18 {
5739  width: 304px;
5740  height: 892px;
5741}
5742.resource-flow-layout.col-16 .resource-card-9x6 {
5743  width: 463px;
5744  height: 284px;
5745}
5746.resource-flow-layout.col-16 .resource-card-9x12 {
5747  width: 463px;
5748  height: 588px;
5749}
5750.resource-flow-layout.col-16 .resource-card-9x18 {
5751  width: 463px;
5752  height: 892px;
5753}
5754.resource-flow-layout.col-16 .resource-card-12x6 {
5755  width: 622px;
5756  height: 284px;
5757}
5758.resource-flow-layout.col-16 .resource-card-12x12 {
5759  width: 622px;
5760  height: 588px;
5761}
5762.resource-flow-layout.col-16 .resource-card-12x18 {
5763  width: 622px;
5764  height: 892px;
5765}
5766.resource-flow-layout.col-16 .resource-card-15x6 {
5767  width: 781px;
5768  height: 284px;
5769}
5770.resource-flow-layout.col-16 .resource-card-15x12 {
5771  width: 781px;
5772  height: 588px;
5773}
5774.resource-flow-layout.col-16 .resource-card-15x18 {
5775  width: 781px;
5776  height: 892px;
5777}
5778.resource-flow-layout.col-16 .resource-card-18x6 {
5779  width: 940px;
5780  height: 284px;
5781}
5782.resource-flow-layout.col-16 .resource-card-18x12 {
5783  width: 940px;
5784  height: 420px;
5785}
5786.resource-flow-layout.col-16 .resource-card-18x18 {
5787  width: 940px;
5788  height: 892px;
5789}
5790.resource-flow-layout.col-16 .resource-card-3x2 {
5791  width: 145px;
5792  height: 95px;
5793}
5794.resource-flow-layout.col-16 .resource-card-3x2x3 {
5795  width: 145px;
5796  height: 90px;
5797  margin-bottom: 7px;
5798}
5799.resource-flow-layout.col-16 .resource-card-3x3 {
5800  width: 145px;
5801  height: 142px;
5802}
5803.resource-flow-layout.col-16 .resource-card-3x3x2 {
5804  width: 145px;
5805  height: 138px;
5806  margin-bottom: 8px;
5807}
5808.resource-flow-layout.col-16 .resource-card-6x2 {
5809  width: 304px;
5810  height: 95px;
5811}
5812.resource-flow-layout.col-16 .resource-card-6x2x3 {
5813  width: 304px;
5814  height: 90px;
5815  margin-bottom: 7px;
5816}
5817.resource-flow-layout.col-16 .resource-card-6x3 {
5818  width: 304px;
5819  height: 142px;
5820}
5821.resource-flow-layout.col-16 .resource-card-6x3x2 {
5822  width: 304px;
5823  height: 138px;
5824  margin-bottom: 8px;
5825}
5826.resource-flow-layout.col-16 .resource-card-9x2 {
5827  width: 463px;
5828  height: 95px;
5829}
5830.resource-flow-layout.col-16 .resource-card-9x2x3 {
5831  width: 463px;
5832  height: 90px;
5833  margin-bottom: 7px;
5834}
5835.resource-flow-layout.col-16 .resource-card-9x3 {
5836  width: 463px;
5837  height: 142px;
5838}
5839.resource-flow-layout.col-16 .resource-card-9x3x2 {
5840  width: 463px;
5841  height: 138px;
5842  margin-bottom: 8px;
5843}
5844.resource-flow-layout.col-16 .resource-card-12x2 {
5845  width: 622px;
5846  height: 95px;
5847}
5848.resource-flow-layout.col-16 .resource-card-12x2x3 {
5849  width: 622px;
5850  height: 90px;
5851  margin-bottom: 7px;
5852}
5853.resource-flow-layout.col-16 .resource-card-12x3 {
5854  width: 622px;
5855  height: 142px;
5856}
5857.resource-flow-layout.col-16 .resource-card-12x3x2 {
5858  width: 622px;
5859  height: 138px;
5860  margin-bottom: 8px;
5861}
5862.resource-flow-layout.col-16 .resource-card-15x2 {
5863  width: 781px;
5864  height: 95px;
5865}
5866.resource-flow-layout.col-16 .resource-card-15x2x3 {
5867  width: 781px;
5868  height: 90px;
5869  margin-bottom: 7px;
5870}
5871.resource-flow-layout.col-16 .resource-card-15x3 {
5872  width: 781px;
5873  height: 142px;
5874}
5875.resource-flow-layout.col-16 .resource-card-15x3x2 {
5876  width: 781px;
5877  height: 138px;
5878  margin-bottom: 8px;
5879}
5880.resource-flow-layout.col-16 .resource-card-18x2 {
5881  width: 940px;
5882  height: 95px;
5883}
5884.resource-flow-layout.col-16 .resource-card-18x2x3 {
5885  width: 940px;
5886  height: 90px;
5887  margin-bottom: 7px;
5888}
5889.resource-flow-layout.col-16 .resource-card-18x3 {
5890  width: 940px;
5891  height: 142px;
5892}
5893.resource-flow-layout.col-16 .resource-card-18x3x2 {
5894  width: 940px;
5895  height: 138px;
5896  margin-bottom: 8px;
5897}
5898
5899/* Generate the flow layout styles for a 3-column 16-col span */
5900.resource-flow-layout.col-12 {
5901  margin: 0 -14px 0 0;
5902  width: 714px;
5903}
5904
5905.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack {
5906  margin: 0 14px 20px 0;
5907}
5908.resource-flow-layout.col-12 .resource-card-row-stack-last {
5909  margin-bottom: 0px !important;
5910}
5911.resource-flow-layout.col-12 .resource-card-col-stack-last {
5912  margin-bottom: 0px !important;
5913}
5914.resource-flow-layout.col-12 .resource-card-3x6 {
5915  width: 105px;
5916  height: 284px;
5917}
5918.resource-flow-layout.col-12 .resource-card-3x12 {
5919  width: 105px;
5920  height: 588px;
5921}
5922.resource-flow-layout.col-12 .resource-card-3x18 {
5923  width: 105px;
5924  height: 892px;
5925}
5926.resource-flow-layout.col-12 .resource-card-6x6 {
5927  width: 224px;
5928  height: 284px;
5929}
5930.resource-flow-layout.col-12 .resource-card-6x12 {
5931  width: 224px;
5932  height: 588px;
5933}
5934.resource-flow-layout.col-12 .resource-card-6x18 {
5935  width: 224px;
5936  height: 892px;
5937}
5938.resource-flow-layout.col-12 .resource-card-9x6 {
5939  width: 343px;
5940  height: 284px;
5941}
5942.resource-flow-layout.col-12 .resource-card-9x12 {
5943  width: 343px;
5944  height: 588px;
5945}
5946.resource-flow-layout.col-12 .resource-card-9x18 {
5947  width: 343px;
5948  height: 892px;
5949}
5950.resource-flow-layout.col-12 .resource-card-12x6 {
5951  width: 462px;
5952  height: 284px;
5953}
5954.resource-flow-layout.col-12 .resource-card-12x12 {
5955  width: 462px;
5956  height: 588px;
5957}
5958.resource-flow-layout.col-12 .resource-card-12x18 {
5959  width: 462px;
5960  height: 892px;
5961}
5962.resource-flow-layout.col-12 .resource-card-15x6 {
5963  width: 581px;
5964  height: 284px;
5965}
5966.resource-flow-layout.col-12 .resource-card-15x12 {
5967  width: 581px;
5968  height: 588px;
5969}
5970.resource-flow-layout.col-12 .resource-card-15x18 {
5971  width: 581px;
5972  height: 892px;
5973}
5974.resource-flow-layout.col-12 .resource-card-18x6 {
5975  width: 700px;
5976  height: 284px;
5977}
5978.resource-flow-layout.col-12 .resource-card-18x12 {
5979  width: 700px;
5980  height: 420px;
5981}
5982.resource-flow-layout.col-12 .resource-card-18x18 {
5983  width: 700px;
5984  height: 892px;
5985}
5986.resource-flow-layout.col-12 .resource-card-3x2 {
5987  width: 105px;
5988  height: 95px;
5989}
5990.resource-flow-layout.col-12 .resource-card-3x2x3 {
5991  width: 105px;
5992  height: 90px;
5993  margin-bottom: 7px;
5994}
5995.resource-flow-layout.col-12 .resource-card-3x3 {
5996  width: 105px;
5997  height: 142px;
5998}
5999.resource-flow-layout.col-12 .resource-card-3x3x2 {
6000  width: 105px;
6001  height: 138px;
6002  margin-bottom: 8px;
6003}
6004.resource-flow-layout.col-12 .resource-card-6x2 {
6005  width: 224px;
6006  height: 95px;
6007}
6008.resource-flow-layout.col-12 .resource-card-6x2x3 {
6009  width: 224px;
6010  height: 90px;
6011  margin-bottom: 7px;
6012}
6013.resource-flow-layout.col-12 .resource-card-6x3 {
6014  width: 224px;
6015  height: 142px;
6016}
6017.resource-flow-layout.col-12 .resource-card-6x3x2 {
6018  width: 224px;
6019  height: 138px;
6020  margin-bottom: 8px;
6021}
6022.resource-flow-layout.col-12 .resource-card-9x2 {
6023  width: 343px;
6024  height: 95px;
6025}
6026.resource-flow-layout.col-12 .resource-card-9x2x3 {
6027  width: 343px;
6028  height: 90px;
6029  margin-bottom: 7px;
6030}
6031.resource-flow-layout.col-12 .resource-card-9x3 {
6032  width: 343px;
6033  height: 142px;
6034}
6035.resource-flow-layout.col-12 .resource-card-9x3x2 {
6036  width: 343px;
6037  height: 138px;
6038  margin-bottom: 8px;
6039}
6040.resource-flow-layout.col-12 .resource-card-12x2 {
6041  width: 462px;
6042  height: 95px;
6043}
6044.resource-flow-layout.col-12 .resource-card-12x2x3 {
6045  width: 462px;
6046  height: 90px;
6047  margin-bottom: 7px;
6048}
6049.resource-flow-layout.col-12 .resource-card-12x3 {
6050  width: 462px;
6051  height: 142px;
6052}
6053.resource-flow-layout.col-12 .resource-card-12x3x2 {
6054  width: 462px;
6055  height: 138px;
6056  margin-bottom: 8px;
6057}
6058.resource-flow-layout.col-12 .resource-card-15x2 {
6059  width: 581px;
6060  height: 95px;
6061}
6062.resource-flow-layout.col-12 .resource-card-15x2x3 {
6063  width: 581px;
6064  height: 90px;
6065  margin-bottom: 7px;
6066}
6067.resource-flow-layout.col-12 .resource-card-15x3 {
6068  width: 581px;
6069  height: 142px;
6070}
6071.resource-flow-layout.col-12 .resource-card-15x3x2 {
6072  width: 581px;
6073  height: 138px;
6074  margin-bottom: 8px;
6075}
6076.resource-flow-layout.col-12 .resource-card-18x2 {
6077  width: 700px;
6078  height: 95px;
6079}
6080.resource-flow-layout.col-12 .resource-card-18x2x3 {
6081  width: 700px;
6082  height: 90px;
6083  margin-bottom: 7px;
6084}
6085.resource-flow-layout.col-12 .resource-card-18x3 {
6086  width: 700px;
6087  height: 142px;
6088}
6089.resource-flow-layout.col-12 .resource-card-18x3x2 {
6090  width: 700px;
6091  height: 138px;
6092  margin-bottom: 8px;
6093}
6094
6095/* Generate the flow layout styles for a 3-column 13-col span */
6096
6097.resource-flow-layout.col-13 {
6098  margin: 0 -14px 0 0;
6099  width: 774px;
6100}
6101.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack {
6102  margin: 0 14px 20px 0;
6103}
6104.resource-flow-layout.col-13 .resource-card-row-stack-last {
6105  margin-bottom: 0px !important;
6106}
6107.resource-flow-layout.col-13 .resource-card-col-stack-last {
6108  margin-bottom: 0px !important;
6109}
6110.resource-flow-layout.col-13 .resource-card-3x6 {
6111  width: 115px;
6112  height: 284px;
6113}
6114.resource-flow-layout.col-13 .resource-card-3x12 {
6115  width: 115px;
6116  height: 588px;
6117}
6118.resource-flow-layout.col-13 .resource-card-3x18 {
6119  width: 115px;
6120  height: 892px;
6121}
6122.resource-flow-layout.col-13 .resource-card-6x6 {
6123  width: 244px;
6124  height: 284px;
6125}
6126.resource-flow-layout.col-13 .resource-card-6x12 {
6127  width: 244px;
6128  height: 588px;
6129}
6130.resource-flow-layout.col-13 .resource-card-6x18 {
6131  width: 244px;
6132  height: 892px;
6133}
6134.resource-flow-layout.col-13 .resource-card-9x6 {
6135  width: 373px;
6136  height: 284px;
6137}
6138.resource-flow-layout.col-13 .resource-card-9x12 {
6139  width: 373px;
6140  height: 588px;
6141}
6142.resource-flow-layout.col-13 .resource-card-9x18 {
6143  width: 373px;
6144  height: 892px;
6145}
6146.resource-flow-layout.col-13 .resource-card-12x6 {
6147  width: 502px;
6148  height: 284px;
6149}
6150.resource-flow-layout.col-13 .resource-card-12x12 {
6151  width: 502px;
6152  height: 588px;
6153}
6154.resource-flow-layout.col-13 .resource-card-12x18 {
6155  width: 502px;
6156  height: 892px;
6157}
6158.resource-flow-layout.col-13 .resource-card-15x6 {
6159  width: 631px;
6160  height: 284px;
6161}
6162.resource-flow-layout.col-13 .resource-card-15x12 {
6163  width: 631px;
6164  height: 588px;
6165}
6166.resource-flow-layout.col-13 .resource-card-15x18 {
6167  width: 631px;
6168  height: 892px;
6169}
6170.resource-flow-layout.col-13 .resource-card-18x6 {
6171  width: 760px;
6172  height: 284px;
6173}
6174.resource-flow-layout.col-13 .resource-card-18x12 {
6175  width: 760px;
6176  height: 420px;
6177}
6178.resource-flow-layout.col-13 .resource-card-18x18 {
6179  width: 760px;
6180  height: 892px;
6181}
6182.resource-flow-layout.col-13 .resource-card-3x2 {
6183  width: 115px;
6184  height: 95px;
6185}
6186.resource-flow-layout.col-13 .resource-card-3x2x3 {
6187  width: 115px;
6188  height: 90px;
6189  margin-bottom: 7px;
6190}
6191.resource-flow-layout.col-13 .resource-card-3x3 {
6192  width: 115px;
6193  height: 142px;
6194}
6195.resource-flow-layout.col-13 .resource-card-3x3x2 {
6196  width: 115px;
6197  height: 138px;
6198  margin-bottom: 8px;
6199}
6200.resource-flow-layout.col-13 .resource-card-6x2 {
6201  width: 244px;
6202  height: 95px;
6203}
6204.resource-flow-layout.col-13 .resource-card-6x2x3 {
6205  width: 244px;
6206  height: 90px;
6207  margin-bottom: 7px;
6208}
6209.resource-flow-layout.col-13 .resource-card-6x3 {
6210  width: 244px;
6211  height: 142px;
6212}
6213.resource-flow-layout.col-13 .resource-card-6x3x2 {
6214  width: 244px;
6215  height: 138px;
6216  margin-bottom: 8px;
6217}
6218.resource-flow-layout.col-13 .resource-card-9x2 {
6219  width: 373px;
6220  height: 95px;
6221}
6222.resource-flow-layout.col-13 .resource-card-9x2x3 {
6223  width: 373px;
6224  height: 90px;
6225  margin-bottom: 7px;
6226}
6227.resource-flow-layout.col-13 .resource-card-9x3 {
6228  width: 373px;
6229  height: 142px;
6230}
6231.resource-flow-layout.col-13 .resource-card-9x3x2 {
6232  width: 373px;
6233  height: 138px;
6234  margin-bottom: 8px;
6235}
6236.resource-flow-layout.col-13 .resource-card-12x2 {
6237  width: 502px;
6238  height: 95px;
6239}
6240.resource-flow-layout.col-13 .resource-card-12x2x3 {
6241  width: 502px;
6242  height: 90px;
6243  margin-bottom: 7px;
6244}
6245.resource-flow-layout.col-13 .resource-card-12x3 {
6246  width: 502px;
6247  height: 142px;
6248}
6249.resource-flow-layout.col-13 .resource-card-12x3x2 {
6250  width: 502px;
6251  height: 138px;
6252  margin-bottom: 8px;
6253}
6254.resource-flow-layout.col-13 .resource-card-15x2 {
6255  width: 631px;
6256  height: 95px;
6257}
6258.resource-flow-layout.col-13 .resource-card-15x2x3 {
6259  width: 631px;
6260  height: 90px;
6261  margin-bottom: 7px;
6262}
6263.resource-flow-layout.col-13 .resource-card-15x3 {
6264  width: 631px;
6265  height: 142px;
6266}
6267.resource-flow-layout.col-13 .resource-card-15x3x2 {
6268  width: 631px;
6269  height: 138px;
6270  margin-bottom: 8px;
6271}
6272.resource-flow-layout.col-13 .resource-card-18x2 {
6273  width: 760px;
6274  height: 95px;
6275}
6276.resource-flow-layout.col-13 .resource-card-18x2x3 {
6277  width: 760px;
6278  height: 90px;
6279  margin-bottom: 7px;
6280}
6281.resource-flow-layout.col-13 .resource-card-18x3 {
6282  width: 760px;
6283  height: 142px;
6284}
6285.resource-flow-layout.col-13 .resource-card-18x3x2 {
6286  width: 760px;
6287  height: 138px;
6288  margin-bottom: 8px;
6289}
6290
6291/*
6292  The following are styles for cards in the flowlayout above, styled by the number of rows they span
6293*/
6294/* Single row items, might be simpler to just apply a class */
6295.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 {
6296  height: 192px;
6297}
6298.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 {
6299  padding: 4px 12px 6px 12px;
6300  top: 192px;
6301}
6302.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 {
6303  font-size: 12px;
6304  margin-bottom: 1px;
6305}
6306.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 {
6307  font-size: 16px;
6308  margin-bottom: -2px;
6309}
6310.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 {
6311  font-size: 13px;
6312  line-height: 15px;
6313}
6314.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 {
6315  height: 30px;
6316}
6317
6318/* Double row items */
6319.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 {
6320  height: 320px;
6321}
6322.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 {
6323  padding: 4px 12px 6px 12px;
6324  top: 320px;
6325}
6326.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 {
6327  font-size: 12px;
6328  margin-bottom: 1px;
6329}
6330.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 {
6331  font-size: 16px;
6332  margin-bottom: -2px;
6333  white-space: normal;
6334}
6335.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 {
6336  font-size: 13px;
6337  line-height: 15px;
6338}
6339
6340/* 1/3 row items */
6341.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 {
6342  left: 0;
6343  top: 0;
6344  width: 90px;
6345  height: 100%;
6346  position: absolute;
6347  display: block;
6348}
6349.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 {
6350  left: 90px;
6351  padding: 4px 12px 4px 12px;
6352  height: 80px;
6353  overflow: hidden;
6354}
6355.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 {
6356  font-size: 12px;
6357  margin-bottom: 1px;
6358  /* display: none; */
6359}
6360.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 {
6361  font-size: 16px;
6362  margin-bottom: -2px;
6363  white-space: normal;
6364  overflow: visible;
6365  text-overflow: ellipsis;
6366}
6367.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 {
6368  /* content: url(../images/link-out.png); */
6369  display: block;
6370}
6371.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 {
6372  display: none;
6373}
6374
6375
6376/* Override to show the description instead of the content section */
6377.no-section .resource-card-3x2 > .card-info .section,
6378.no-section .resource-card-6x2 > .card-info .section {
6379  display: none;
6380}
6381.no-section .resource-card-3x2 > .card-info .description,
6382.no-section .resource-card-6x2 > .card-info .description {
6383  display: block;
6384}
6385
6386/* 1/2 row items */
6387.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 {
6388  left: 0;
6389  top: 0;
6390  width: 90px;
6391  height: 100%;
6392  position: absolute;
6393  display: block;
6394}
6395.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 {
6396  left: 90px;
6397  padding: 4px 12px 0px 12px;
6398}
6399.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 {
6400  font-size: 12px;
6401  margin-bottom: 1px;
6402  display: none;
6403}
6404.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 {
6405  font-size: 16px;
6406  margin-bottom: -2px;
6407  white-space: normal;
6408  overflow: visible;
6409}
6410.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 {
6411  font-size: 12px;
6412  line-height: 15px;
6413  padding-right: 0px !important;
6414  height: 80px;
6415}
6416.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 {
6417  display: none;
6418}
6419/* placement of plusone */
6420.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 {
6421  bottom:2px;
6422}
6423.resource-card-18x12 > .card-info .description .util {
6424  bottom:2px;
6425}
6426/* Overrides for col-16 6x6 cards linking to local content on landing pages.
6427   Suppresses "section" and puts the title above a hairline rule. */
6428.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
6429  display:none;
6430}
6431.landing  .card-info .title {
6432  color: #898989;
6433  font-size: 17px;
6434  line-height: 24px;
6435  margin-bottom: 6px;
6436  border-bottom: 1px solid #959595;
6437  padding-bottom: 0px;
6438}
6439.landing .card-info .description {
6440  font-size: 13px;
6441  line-height: 15px;
6442}
6443.landing .card-info .description .text {
6444height:30px;
6445}
6446.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
6447  bottom:2px;
6448}
6449/*
6450  Generate a resource stack layout for a 3 column widget spanning 16 grid cols
6451*/
6452.resource-stack-layout.col-16 {
6453  margin: 0 -14px 0 0;
6454  width: 954px;
6455}
6456.resource-stack-layout.col-16 .resource-card-stack {
6457  margin: 0 14px 0 0;
6458  width: 304px;
6459}
6460
6461/* Example of card menu tinting */
6462.resource-widget[data-section=distribute\/tools] .section-card-menu
6463.card-bg:after {
6464  background: rgba(126, 55, 148, 0.4) !important;
6465}
6466.resource-widget[data-section=distribute\/tools] .section-card-menu
6467.card-section-icon .icon {
6468  background-color: #7e3794 !important;
6469}
6470.resource-widget[data-section=distribute\/tools] .section-card-menu
6471.card-info ul li {
6472  border-top-color: #7e3794 !important;
6473}
6474
6475/* tinting for stacks */
6476
6477div.jd-descr > .resource-widget[data-section=distribute\/tools]
6478.section-card-menu .card-info ul li {
6479  border-top-color: #7e3794 !important;
6480}
6481
6482
6483
6484/**
6485 * UTILITIES
6486 */
6487
6488
6489.border-box {
6490  box-sizing: border-box;
6491}
6492
6493.vertical-center-outer {
6494  display: table;
6495  height: 100%;
6496  width: 100%;
6497}
6498
6499.vertical-center-inner {
6500  display: table-cell;
6501  vertical-align: middle;
6502}
6503
6504/**
6505 * TYPE STYLES
6506 */
6507
6508.landing-h1 {
6509  font-weight: 100;
6510  font-size: 60px;
6511  line-height: 78px;
6512  text-align: center;
6513  letter-spacing: -1px;
6514}
6515
6516.landing-pre-h1 {
6517  font-weight: 400;
6518  font-size: 28px;
6519  color: #93B73F;
6520  line-height: 36px;
6521  text-align: center;
6522  letter-spacing: -1px;
6523  text-transform: uppercase;
6524
6525}
6526
6527.landing-h1.hero {
6528  text-align: left;
6529}
6530
6531.landing-h2 {
6532  font-weight: 300;
6533  font-size: 42px;
6534  line-height: 64px;
6535  text-align: center;
6536}
6537
6538.landing-subhead {
6539  color: #999999;
6540  font-size: 20px;
6541  line-height: 28px;
6542  font-weight:300;
6543  text-align: center;
6544}
6545.landing-subhead.hero {
6546  text-align: left;
6547  color: white;
6548}
6549
6550.landing-hero-description {
6551  text-align: left;
6552  margin: 1em 0;
6553}
6554
6555.landing-hero-description p {
6556  font-weight: 300;
6557  margin: 0;
6558  font-size: 18px;
6559  line-height: 24px;
6560}
6561
6562.landing-body .landing-small {
6563  font-size: 14px;
6564  line-height: 19px;
6565}
6566
6567.landing-body.landing-align-center {
6568  text-align: center;
6569}
6570
6571.landing-align-left {
6572  text-align: left;
6573}
6574
6575/**
6576 * LAYOUT
6577 */
6578
6579#body-content,
6580.fullpage,
6581#jd-content,
6582.jd-descr,
6583.landing-body-content {
6584  height: 100%;
6585}
6586
6587.landing-section {
6588  padding: 80px 10px 80px;
6589  width: 100%;
6590  margin-left: -10px;
6591  text-rendering: optimizeLegibility;
6592}
6593
6594#extending-android-to-wearables {
6595  padding-top: 30px;
6596}
6597
6598.landing-short-section {
6599  padding: 40px 10px 28px;
6600}
6601
6602.landing-gray-background {
6603  background-color: #e9e9e9;
6604}
6605
6606.landing-white-background {
6607  background-color: white;
6608}
6609
6610.landing-red-background {
6611  color: white;
6612  background-color: hsl(8, 70%, 54%);
6613}
6614
6615.landing-subhead-red {
6616  color: hsl(8, 71%, 84%);
6617  text-align: left;
6618}
6619
6620.landing-subhead-red p {
6621  margin-top: 20px;
6622}
6623
6624.landing-hero-container {
6625  height: 100%;
6626}
6627
6628
6629.preview-hero {
6630  height: calc(100% - 110px);
6631  min-height: 504px;
6632  margin-top: -5px;
6633  padding-top: 0;
6634  padding-bottom: 0;
6635  background-image: url(../../preview/images/hero.jpg);
6636  background-size: cover;
6637  background-position: right center;
6638  color: white;
6639  position: relative;
6640  overflow: hidden;
6641}
6642
6643.wear-hero {
6644  height: calc(100% - 110px);
6645  min-height: 504px;
6646  margin-top: -5px;
6647  padding-top: 0;
6648  padding-bottom: 0;
6649  background-image: url(../../wear/images/hero.jpg);
6650  background-size: cover;
6651  background-position: top center;
6652  color: white;
6653  position: relative;
6654  overflow: hidden;
6655}
6656
6657.tv-hero {
6658  height: calc(100% - 110px);
6659  min-height: 504px;
6660  margin-top: -5px;
6661  padding-top: 0;
6662  padding-bottom: 0;
6663  background-image: url(../../tv/images/hero.jpg);
6664  background-size: cover;
6665  background-position: right center;
6666  color: white;
6667  position: relative;
6668  overflow: hidden;
6669}
6670
6671.auto-hero {
6672  height: calc(100% - 110px);
6673  min-height: 504px;
6674  margin-top: -5px;
6675  padding-top: 0;
6676  padding-bottom: 0;
6677  background-image: url(../../auto/images/hero.jpg);
6678  background-size: cover;
6679  background-position: right center;
6680  color: white;
6681  position: relative;
6682  overflow: hidden;
6683}
6684
6685.landing-hero-scrim {
6686  background: black;
6687  opacity: .2;
6688  position: absolute;
6689  width: 100%;
6690  height: 100%;
6691  margin-left: -10px;
6692}
6693
6694.landing-hero-wrap {
6695  margin: 0 auto;
6696  width: 940px;
6697  clear: both;
6698  height: 100%;
6699  position: relative;
6700}
6701
6702.landing-section-header {
6703  margin-bottom: 40px;
6704}
6705
6706.landing-hero-wrap .landing-section-header {
6707  margin-bottom: 16px;
6708}
6709
6710.landing-body {
6711  font-size: 18px;
6712  line-height: 24px;
6713}
6714
6715.landing-button {
6716  white-space: nowrap;
6717  display: inline-block;
6718  padding: 16px 32px;
6719  font-size: 18px;
6720  font-weight: 500;
6721  line-height: 24px;
6722  cursor: pointer;
6723  color: white;
6724  -webkit-user-select: none;
6725     -moz-user-select: none;
6726       -o-user-select: none;
6727  user-select: none;
6728  -webkit-transition: .2s background-color ease-in-out;
6729     -moz-transition: .2s background-color ease-in-out;
6730       -o-transition: .2s background-color ease-in-out;
6731  transition: .2s background-color ease-in-out;
6732}
6733
6734.landing-primary {
6735  background-color: hsl(8, 70%, 44%);
6736  color: #f8f8f8;
6737}
6738
6739.landing-button.landing-primary:hover {
6740  background-color: hsl(8, 70%, 36%);
6741}
6742
6743.landing-button.landing-primary:active {
6744  background-color: hsl(8, 70%, 30%);
6745}
6746
6747.landing-button.landing-secondary {
6748  background-color: #2faddb;
6749}
6750
6751.landing-button.landing-secondary:hover {
6752  background-color: #09c;
6753}
6754
6755.landing-button.landing-secondary:active {
6756  background-color: #3990ab;
6757}
6758
6759a.landing-button,
6760a.landing-button:hover,
6761a.landing-button:visited {
6762  color: white !important;
6763}
6764
6765.landing-video-link {
6766  white-space: nowrap;
6767  display: inline-block;
6768  padding: 16px 32px 16px 82px;
6769  font-size: 18px;
6770  font-weight: 400;
6771  line-height: 24px;
6772  cursor: pointer;
6773  color: hsla(0, 0%, 100%, .8);
6774  -webkit-user-select: none;
6775     -moz-user-select: none;
6776       -o-user-select: none;
6777  user-select: none;
6778  -webkit-transition: .2s color ease-in-out;
6779     -moz-transition: .2s color ease-in-out;
6780       -o-transition: .2s color ease-in-out;
6781  transition: .2s color ease-in-out;
6782}
6783
6784.landing-video-link:before {
6785  height: 64px;
6786  width: 64px;
6787  display: inline-block;
6788  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=);
6789  background-size: contain;
6790  position: absolute;
6791  content: "";
6792  opacity: .7;
6793  margin-top: -19px;
6794  margin-left: -64px;
6795  -webkit-transition: .2s opacity ease-in-out;
6796     -moz-transition: .2s opacity ease-in-out;
6797       -o-transition: .2s opacity ease-in-out;
6798  transition: .2s opacity ease-in-out;
6799}
6800
6801.landing-video-link:hover {
6802  color: hsla(0, 0%, 100%, 1);
6803}
6804
6805.landing-video-link:hover:before {
6806  opacity: 1;
6807}
6808
6809.landing-social-image {
6810  float: left;
6811  margin-right: 14px;
6812  height: 64px;
6813  width: 64px;
6814}
6815
6816.landing-social-copy {
6817  padding-left: 78px;
6818}
6819
6820.landing-scroll-down-affordance {
6821  position: absolute;
6822  bottom: 0;
6823  width: 100%;
6824  text-align: center;
6825  z-index: 10;
6826}
6827
6828.landing-down-arrow {
6829  padding: 24px;
6830  display: inline-block;
6831  opacity: .5;
6832  -webkit-transition: .2s opacity ease-in-out;
6833     -moz-transition: .2s opacity ease-in-out;
6834       -o-transition: .2s opacity ease-in-out;
6835  transition: .2s opacity ease-in-out;
6836
6837  -webkit-animation-name: pulse-opacity;
6838  -webkit-animation-duration: 4s;
6839}
6840
6841.landing-down-arrow:hover {
6842  opacity: 1;
6843}
6844
6845.landing-down-arrow img {
6846  height: 28px;
6847  width: 28px;
6848  margin: 0 auto;
6849  display: block;
6850}
6851
6852.landing-divider {
6853  display: inline-block;
6854  height: 2px;
6855  background-color: white;
6856  position: relative;
6857  margin: 10px 0;
6858}
6859
6860/* 3 CLOLUMN LAYOUT */
6861
6862.landing-breakout {
6863  margin-top: 40px;
6864  margin-bottom: 40px;
6865}
6866
6867.landing-breakout img {
6868  margin-bottom: 20px;
6869}
6870
6871.landing-partners img {
6872  margin-bottom: 20px;
6873}
6874
6875.landing-breakout p {
6876  padding: 0 23px;
6877}
6878
6879.landing-breakout.landing-partners img {
6880  margin-bottom: 20px;
6881}
6882
6883.col-3-wide {
6884  display: inline;
6885  float: left;
6886  margin-left: 10px;
6887  margin-right: 10px;
6888}
6889
6890.col-3-wide {
6891  width: 302px;
6892}
6893
6894/**
6895 * ANIMATION
6896 */
6897
6898@-webkit-keyframes pulse-opacity {
6899  0% {
6900    opacity: .5;
6901  }
6902  20% {
6903    opacity: .5;
6904  }
6905  40% {
6906    opacity: 1;
6907  }
6908  60% {
6909    opacity: .5;
6910  }
6911  80% {
6912    opacity: 1;
6913  }
6914  100% {
6915    opacity: .5;
6916  }
6917}
6918
6919
6920
6921/**
6922 * VIDEO
6923 */
6924
6925#video-container {
6926  display:none;
6927  position:fixed;
6928  top:0;
6929  left:-10px;
6930  width:102%;
6931  height:100%;
6932  background-color:rgba(0,0,0,0.7);
6933  z-index:99;
6934}
6935
6936#video-frame {
6937  width:940px;
6938  height:526.4px;
6939  margin:80px auto 0;
6940  display:none;
6941}
6942
6943.video-close {
6944cursor: pointer;
6945position: relative;
6946left: 940px;
6947top: 0;
6948pointer-events: all;
6949}
6950
6951#icon-video-close {
6952background-image: url("../images/close.png");
6953background-position: 0 0;
6954height: 36px;
6955width: 36px;
6956display:block;
6957}
6958
6959
6960
6961
6962/******************
6963Styles for d.a.c/index:
6964*******************/
6965
6966
6967
6968/* Generic full screen carousel styling to be used across pages. */
6969.fullscreen-carousel {
6970  margin: 0 -10px;
6971  width: 100%;
6972  overflow: hidden;
6973  position: relative;
6974}
6975
6976.fullscreen-carousel-content {
6977  width: 100%;
6978  height: 100%;
6979  position: relative;
6980  display: table; /* For vertical centering */
6981}
6982
6983.fullscreen-carousel .vcenter {
6984  display: table-cell;
6985  vertical-align: middle;
6986  position: relative;
6987}
6988
6989.fullscreen-carousel .vcenter > div {
6990  margin: 10px auto;
6991}
6992
6993/* Styles for the full-bleed hero image type. */
6994.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 {
6995  color: #fff;
6996}
6997
6998.fullscreen-carousel .hero h1 {
6999  font-weight: 300;
7000  font-size: 60px;
7001  line-height: 68px;
7002  letter-spacing: -1px;
7003  margin-top: 0;
7004}
7005
7006.fullscreen-carousel .hero p {
7007  font-weight: 300;
7008  font-size: 18px;
7009  line-height: 24px;
7010  -webkit-font-smoothing: antialiased;
7011}
7012
7013.fullscreen-carousel .hero .hero-bg {
7014  background-size: cover;
7015  width: 100%;
7016  height: 100%;
7017  position: absolute;
7018  left: 0px;
7019  top: 0px;
7020}
7021
7022
7023/* Full screen carousel styling for the resource flow layout type of content */
7024.fullscreen-carousel .resource-flow-layout:after {
7025  height: 0; /* Dont know why this is set at 10 in default.css */
7026}
7027
7028.fullscreen-carousel .resource-flow-layout {
7029  margin-bottom: 20px;
7030}
7031
7032
7033
7034/* Generic Tab carousel styling to be used across multiple pages. */
7035
7036.tab-carousel .tab-nav {
7037  list-style: none;
7038  position: relative;
7039  text-align: center;
7040}
7041
7042.tab-carousel .tab-nav li {
7043  display: inline-block;
7044  font-size: 22px;
7045  font-weight: 400;
7046  line-height: 50px;
7047  list-style: none;
7048  margin: 0;
7049  padding: 0 25px;
7050  position: relative;
7051}
7052
7053.tab-carousel .tab-nav li a,
7054.tab-carousel .tab-nav li a:hover {
7055  color: #333 !important;
7056  padding: 10px 10px 13px 10px;
7057  position: relative;
7058  z-index: 1000;
7059}
7060
7061.tab-carousel .tab-nav li:after {
7062  background: #ddd;
7063  bottom: 0;
7064  content: '';
7065  height: 4px;
7066  left: 0;
7067  position: absolute;
7068  width: 100%;
7069  z-index: 0;
7070}
7071
7072.tab-carousel .tab-nav .highlight {
7073  position: absolute;
7074  height: 4px;
7075  width: 100px;
7076  bottom: 0;
7077  background: #33b5e5;
7078}
7079
7080.tab-carousel .tab-carousel-content {
7081  position: relative;
7082  overflow: hidden;
7083  white-space: nowrap;
7084}
7085
7086.tab-carousel .tab-carousel-content [data-tab] {
7087  display: inline-block;
7088  white-space: normal;
7089}
7090
7091
7092
7093/*
7094  Resource styling for the tab carousel. The tab carousel contains either
7095  a 3 column layout of resources or a single full-width resource. The
7096  latter has the 18x12 class applied to it and can be styled differently
7097  that way.
7098*/
7099
7100.tab-carousel .resource .image {
7101  width: 100%;
7102  height: 250px;
7103  background-repeat: no-repeat;
7104  background-size: contain;
7105  background-position: 50% 50%;
7106}
7107
7108.tab-carousel .resource .info .title {
7109  font-size: 18px;
7110  line-height: 24px;
7111}
7112
7113.tab-carousel .resource .info .summary,
7114.tab-carousel .resource .info .cta {
7115  line-height: 24px;
7116  font-size: 16px;
7117}
7118
7119.tab-carousel .resource-card-18x12 {
7120  position: relative;
7121  padding-left: 450px;
7122  box-sizing: border-box;
7123  display: table-cell;
7124  vertical-align: middle;
7125}
7126
7127.tab-carousel .resource-card-18x12 .image {
7128  position: absolute;
7129  width: 420px;
7130  height: 100%;
7131  left: 0;
7132  top: 0;
7133}
7134
7135.tab-carousel .resource-card-18x12 .info {
7136  display: inline-block;
7137}
7138
7139.tab-carousel .resource-card-18x12 .info .title {
7140  margin-bottom: 26px;
7141}
7142
7143
7144
7145
7146
7147/*
7148   Styles for the entity link used in the actions bar and in the cta of
7149   the resources that appear in the tab carousel.
7150*/
7151.actions-bar a:after,
7152.resource .cta:after {
7153  content: '›';
7154  font-weight: 400;
7155  font-size: 22px;
7156  left: 5px;
7157  line-height: 1;
7158  position: relative;
7159  top: 1px;
7160  transition: left 190ms ease-out;
7161}
7162
7163.actions-bar a:hover:after,
7164.resource .cta:hover:after {
7165  left: 10px;
7166}
7167
7168
7169
7170
7171/*
7172  Styles for the actions bar.
7173*/
7174.actions-bar {
7175  background: #9acd00;
7176  margin: 0 -10px;
7177  text-align: center;
7178}
7179
7180.actions-bar .actions {
7181  padding: 30px 0 30px;
7182  text-align: justify;
7183  font-size: 0.1px;
7184  line-height: 0.1px;
7185  margin: 0 10px 0 0;
7186}
7187
7188.actions-bar .actions:after {
7189  content: '';
7190  width: 100%;
7191  display: inline-block;
7192}
7193
7194.actions-bar .actions > div {
7195  display: inline-block;
7196}
7197
7198.actions-bar a {
7199  font-size: 21px;
7200  line-height: 27px;
7201  color: #fff;
7202  font-weight: 300;
7203  -webkit-font-smoothing: antialiased;
7204}
7205
7206.actions-bar a:after {
7207  top: 0px;
7208  font-size: 22px;
7209}
7210
7211.actions-bar a:hover {
7212  color: #fff !important;
7213}
7214
7215
7216
7217
7218
7219/*
7220  Specific styles for new home page layout of the carousels.
7221*/
7222
7223/* Big blue button */
7224a.home-new-cta-btn,
7225.home-new-carousel-1 .resource-card-18x6 .cta {
7226  white-space: nowrap;
7227  display: inline-block;
7228  padding: 14px 32px;
7229  font-size: 18px;
7230  font-weight: 500;
7231  line-height: 24px;
7232  cursor: pointer;
7233  background: #33b5e6;
7234  border-radius: 4px;
7235  margin-top: 20px;
7236  color: #fff;
7237  transition: 0.2s background-color ease-in-out;
7238}
7239
7240.home-new-carousel-1 .resource-card-18x6 .cta:after {
7241  display: none; /* Hide the entity for this button */
7242}
7243
7244a.home-new-cta-btn:hover,
7245.home-new-carousel-1 .resource-card-18x6 .cta:hover {
7246  color: #fff !important;
7247  background: #2d9fca;
7248}
7249
7250.home-new-carousel-1 .resource-card-18x6 .cta {
7251  position: absolute;
7252  bottom: 20px;
7253  left: 16px;
7254}
7255
7256/* Fullscreen carousel. */
7257.home-new-carousel-1 {
7258  max-height: 700px; /* Set max height so doesn't get too long */
7259  margin-top: 20px;
7260}
7261
7262.home-new-carousel-1 .fullscreen-carousel-content {
7263  min-height: 450px;  /* Set min height for all content */
7264}
7265
7266.home-new-carousel-1 .hero {
7267  background: #000;
7268}
7269
7270.home-new-carousel-1 .hero-bg {
7271  background-image: url(/home-new/images/hero.jpg);
7272  background-position: right center;
7273  opacity: 0.85;
7274}
7275
7276/*
7277  Styling for special top card of full screen layout resource layout.
7278  We need to specifically style the 18x6 card to adjust its size and layout,
7279  since it's not a standard card, not sure if this is unique to the home page
7280  layout or should be namespaced within the fullscreen-carousel container.
7281*/
7282.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 {
7283  height: 334px;
7284}
7285
7286.home-new-carousel-1 .resource-card-18x6 .card-bg {
7287  width: 636px;
7288  height: 100%;
7289}
7290
7291.home-new-carousel-1 .resource-card-18x6 .card-info {
7292  right: 0px;
7293  left: 636px;
7294  height: 100%;
7295  top: 0px;
7296  padding: 15px 22px;
7297}
7298
7299.home-new-carousel-1 .resource-card-18x6 .card-info .util {
7300  display: none;
7301}
7302
7303.home-new-carousel-1 .resource-card-18x6 .card-info .title {
7304  font-size: 20px;
7305  font-weight: 500;
7306  margin-top: 15px;
7307  margin-bottom: 15px;
7308}
7309
7310.home-new-carousel-1 .resource-card-18x6 .card-info .text {
7311  font-size: 15px;
7312  line-height: 21px;
7313}
7314
7315
7316/* Tabbed carousel. */
7317.home-new-carousel-2 {
7318  margin: 35px auto 100px auto;
7319}
7320
7321.home-new-carousel-2 h1 {
7322  font-size: 47px;
7323  font-weight: 100;
7324  line-height: 54px;
7325  text-align: center;
7326}
7327