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