source: pro-violet-viettel/sourcecode/assets/js/jquery/jquery.mobile.custom.structure.css @ 466

Last change on this file since 466 was 289, checked in by dungnv, 11 years ago
File size: 91.3 KB
RevLine 
[289]1/*
2* jQuery Mobile v1.4.2
3* http://jquerymobile.com
4*
5* Copyright 2010, 2014 jQuery Foundation, Inc. and other contributors
6* Released under the MIT license.
7* http://jquery.org/license
8*
9*/
10
11/* Some unsets */
12.ui-mobile,
13.ui-mobile body {
14        height: 99.9%;
15}
16.ui-mobile fieldset,
17.ui-page {
18        padding: 0;
19        margin: 0;
20}
21.ui-mobile a img,
22.ui-mobile fieldset {
23        border-width: 0;
24}
25/* Fixes for fieldset issues on IE10 and FF (see #6077) */
26.ui-mobile fieldset {
27        min-width: 0;
28}
29@-moz-document url-prefix() {
30        .ui-mobile fieldset {
31                display: table-column;
32                vertical-align: middle;
33        }
34}
35
36/* Viewport */
37.ui-mobile-viewport {
38        margin: 0;
39        overflow-x: visible;
40        -webkit-text-size-adjust: 100%;
41        -ms-text-size-adjust:none;
42        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43}
44/* Issue #2066 */
45body.ui-mobile-viewport,
46div.ui-mobile-viewport {
47        overflow-x: hidden;
48}
49/* "page" containers - full-screen views, one should always be in view post-pageload */
50.ui-mobile [data-role=page],
51.ui-mobile [data-role=dialog],
52.ui-page {
53        top: 0;
54        left: 0;
55        width: 100%;
56        min-height: 100%;
57        position: absolute;
58        display: none;
59        border: 0;
60}
61/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
62.ui-page {
63        outline: none;
64}
65.ui-mobile .ui-page-active {
66        display: block;
67        overflow: visible;
68        overflow-x: hidden;
69}
70@media screen and (orientation: portrait) {
71        .ui-mobile .ui-page {
72                min-height: 420px;
73        }
74}
75@media screen and (orientation: landscape) {
76        .ui-mobile .ui-page {
77                min-height: 300px;
78        }
79}
80
81/* Fouc */
82.ui-mobile-rendering > * {
83        visibility: hidden;
84}
85
86/* Non-js content hiding */
87.ui-nojs {
88        position: absolute !important;
89        height: 1px;
90        width: 1px;
91        overflow: hidden;
92        clip: rect(1px,1px,1px,1px);
93}
94
95/* Loading screen */
96.ui-loading .ui-loader {
97        display: block;
98}
99.ui-loader {
100        display: none;
101        z-index: 9999999;
102        position: fixed;
103        top: 50%;
104        left: 50%;
105        border:0;
106}
107.ui-loader-default {
108        background: none;
109        filter: Alpha(Opacity=18);
110        opacity: .18;
111        width: 2.875em;
112        height: 2.875em;
113        margin-left: -1.4375em;
114        margin-top: -1.4375em;
115}
116.ui-loader-verbose {
117        width: 12.5em;
118        filter: Alpha(Opacity=88);
119        opacity: .88;
120        box-shadow: 0 1px 1px -1px #fff;
121        height: auto;
122        margin-left: -6.875em;
123        margin-top: -2.6875em;
124        padding: .625em;
125}
126.ui-loader-default h1 {
127        font-size: 0;
128        width: 0;
129        height: 0;
130        overflow: hidden;
131}
132.ui-loader-verbose h1 {
133        font-size: 1em;
134        margin: 0;
135        text-align: center;
136}
137.ui-loader .ui-icon-loading {
138        background-color: #000;
139        display: block;
140        margin: 0;
141        width: 2.75em;
142        height: 2.75em;
143        padding: .0625em;
144        -webkit-border-radius: 2.25em;
145        border-radius: 2.25em;
146}
147.ui-loader-verbose .ui-icon-loading {
148        margin: 0 auto .625em;
149        filter: Alpha(Opacity=75);
150        opacity: .75;
151}
152.ui-loader-textonly {
153        padding: .9375em;
154        margin-left: -7.1875em;
155}
156.ui-loader-textonly .ui-icon-loading {
157        display: none;
158}
159.ui-loader-fakefix {
160        position: absolute;
161}
162
163/* Headers, content panels */
164.ui-bar,
165.ui-body {
166        position: relative;
167        padding: .4em 1em;
168        overflow: hidden;
169        display: block;
170        clear: both;
171}
172.ui-bar h1,
173.ui-bar h2,
174.ui-bar h3,
175.ui-bar h4,
176.ui-bar h5,
177.ui-bar h6 {
178        margin: 0;
179        padding: 0;
180        font-size: 1em;
181        display: inline-block;
182}
183.ui-header,
184.ui-footer {
185        border-width: 1px 0;
186        border-style: solid;
187        position: relative;
188}
189.ui-header:empty,
190.ui-footer:empty {
191        min-height: 2.6875em;
192}
193.ui-header .ui-title,
194.ui-footer .ui-title {
195        font-size: 1em;
196        min-height: 1.1em;
197        text-align: center;
198        display: block;
199        margin: 0 30%;
200        padding: .7em 0;
201        text-overflow: ellipsis;
202        overflow: hidden;
203        white-space: nowrap;
204        outline: 0 !important;
205}
206.ui-footer .ui-title {
207        margin: 0 1em;
208}
209.ui-content {
210        border-width: 0;
211        overflow: visible;
212        overflow-x: hidden;
213        padding: 1em;
214}
215/* Corner styling for dialogs and popups */
216.ui-corner-all > .ui-header:first-child,
217.ui-corner-all > .ui-content:first-child,
218.ui-corner-all > .ui-footer:first-child {
219        -webkit-border-top-left-radius: inherit;
220        border-top-left-radius: inherit;
221        -webkit-border-top-right-radius: inherit;
222        border-top-right-radius: inherit;
223}
224.ui-corner-all > .ui-header:last-child,
225.ui-corner-all > .ui-content:last-child,
226.ui-corner-all > .ui-footer:last-child {
227        -webkit-border-bottom-left-radius: inherit;
228        border-bottom-left-radius: inherit;
229        -webkit-border-bottom-right-radius: inherit;
230        border-bottom-right-radius: inherit;
231}
232
233/* Buttons and icons */
234.ui-btn {
235        font-size: 16px;
236        margin: .5em 0;
237        padding: .7em 1em;
238        display: block;
239        position: relative;
240        text-align: center;
241        text-overflow: ellipsis;
242        overflow: hidden;
243        white-space: nowrap;
244        cursor: pointer;
245        -webkit-user-select: none;
246        -moz-user-select: none;
247        -ms-user-select: none;
248        user-select: none;
249}
250.ui-btn-icon-notext {
251        padding: 0;
252        width: 1.75em;
253        height: 1.75em;
254        text-indent: -9999px;
255        white-space: nowrap !important;
256}
257.ui-mini {
258        font-size: 12.5px;
259}
260.ui-mini .ui-btn {
261        font-size: inherit;
262}
263/* Make buttons in toolbars default to mini and inline. */
264.ui-header .ui-btn,
265.ui-footer .ui-btn {
266        font-size: 12.5px;
267        display: inline-block;
268        vertical-align: middle;
269}
270/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
271.ui-header .ui-btn-left,
272.ui-header .ui-btn-right {
273        font-size: 12.5px;
274}
275.ui-mini.ui-btn-icon-notext,
276.ui-mini .ui-btn-icon-notext,
277.ui-header .ui-btn-icon-notext,
278.ui-footer .ui-btn-icon-notext {
279        font-size: 16px;       
280        padding: 0;
281}
282.ui-btn-inline {
283        display: inline-block;
284        vertical-align: middle;
285        margin-right: .625em;
286}
287.ui-btn-icon-left {
288        padding-left: 2.5em;
289}
290.ui-btn-icon-right {
291        padding-right: 2.5em;
292}
293.ui-btn-icon-top {
294        padding-top: 2.5em;
295}
296.ui-btn-icon-bottom {
297        padding-bottom: 2.5em;
298}
299.ui-header .ui-btn-icon-top,
300.ui-footer .ui-btn-icon-top,
301.ui-header .ui-btn-icon-bottom,
302.ui-footer .ui-btn-icon-bottom {
303        padding-left: .3125em;
304        padding-right: .3125em;
305}
306.ui-btn-icon-left:after,
307.ui-btn-icon-right:after,
308.ui-btn-icon-top:after,
309.ui-btn-icon-bottom:after,
310.ui-btn-icon-notext:after {
311        content: "";
312        position: absolute;
313        display: block;
314        width: 22px;
315        height: 22px;
316}
317.ui-btn-icon-notext:after,
318.ui-btn-icon-left:after,
319.ui-btn-icon-right:after {
320        top: 50%;
321        margin-top: -11px;
322}
323.ui-btn-icon-left:after {
324        left: .5625em;
325}
326.ui-btn-icon-right:after {
327        right: .5625em;
328}
329.ui-mini.ui-btn-icon-left:after,
330.ui-mini .ui-btn-icon-left:after,
331.ui-header .ui-btn-icon-left:after,
332.ui-footer .ui-btn-icon-left:after {
333        left: .37em;
334}
335.ui-mini.ui-btn-icon-right:after,
336.ui-mini .ui-btn-icon-right:after,
337.ui-header .ui-btn-icon-right:after,
338.ui-footer .ui-btn-icon-right:after {
339        right: .37em;
340}
341.ui-btn-icon-notext:after,
342.ui-btn-icon-top:after,
343.ui-btn-icon-bottom:after {
344        left: 50%;
345        margin-left: -11px;
346}
347.ui-btn-icon-top:after {
348        top: .5625em;
349}
350.ui-btn-icon-bottom:after {
351        top: auto;
352        bottom: .5625em;
353}
354/* Buttons in header position classes */
355.ui-header .ui-btn-left,
356.ui-header .ui-btn-right,
357.ui-btn-left > [class*="ui-"],
358.ui-btn-right > [class*="ui-"] {
359        margin: 0;
360}
361.ui-btn-left,
362.ui-btn-right {
363        position: absolute;
364        top: .24em;
365}
366.ui-btn-left {
367        left: .4em;
368}
369.ui-btn-right {
370        right: .4em;
371}
372.ui-btn-icon-notext.ui-btn-left {
373        top: .3125em;
374        left: .3125em;
375}
376.ui-btn-icon-notext.ui-btn-right {
377        top: .3125em;
378        right: .3125em;
379}
380
381/* Button elements */
382button.ui-btn,
383.ui-controlgroup-controls button.ui-btn-icon-notext {
384        -webkit-box-sizing: border-box;
385        -moz-box-sizing: border-box;
386        box-sizing: border-box;
387        -webkit-appearance: none;
388        -moz-appearance: none;
389        width: 100%;
390}
391button.ui-btn-inline {
392        width: auto;
393}
394/* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */
395button.ui-btn::-moz-focus-inner {
396        border: 0;
397}
398button.ui-btn-icon-notext,
399.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn {
400        -webkit-box-sizing: content-box;
401        -moz-box-sizing: content-box;
402        box-sizing: content-box;
403        width: 1.75em;
404}
405
406/* Form labels */
407.ui-mobile label,
408.ui-controlgroup-label {
409        display: block;
410        margin: 0 0 .4em;
411}
412
413/* Accessible content hiding */
414/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
415.ui-hide-label > label,
416.ui-hide-label .ui-controlgroup-label,
417.ui-hide-label .ui-rangeslider label,
418.ui-hidden-accessible {
419        position: absolute !important;
420        height: 1px;
421        width: 1px;
422        overflow: hidden;
423        clip: rect(1px,1px,1px,1px);
424}
425
426/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
427.ui-screen-hidden {
428        display: none !important;
429}
430
431
432.ui-field-contain,
433.ui-mobile fieldset.ui-field-contain {
434        display: block;
435        position: relative;
436        overflow: visible;
437        clear: both;
438        padding: .8em 0;
439}
440.ui-field-contain > label ~ [class*="ui-"],
441.ui-field-contain .ui-controlgroup-controls {
442        margin: 0;
443}
444.ui-field-contain:last-child {
445        border-bottom-width: 0;
446}
447@media (min-width: 28em) {
448        .ui-field-contain,
449        .ui-mobile fieldset.ui-field-contain {
450                padding: 0;
451                margin: 1em 0;
452                border-bottom-width: 0;
453        }
454        .ui-field-contain:before,
455        .ui-field-contain:after {
456                content: "";
457                display: table;
458        }
459        .ui-field-contain:after {
460                clear: both;
461        }
462        .ui-field-contain > label,
463        .ui-field-contain .ui-controlgroup-label,
464        .ui-field-contain > .ui-rangeslider > label {
465                float: left;
466                width: 20%;
467                margin: .5em 2% 0 0;
468        }
469        .ui-popup .ui-field-contain > label,
470        .ui-popup .ui-field-contain .ui-controlgroup-label,
471        .ui-popup .ui-field-contain > .ui-rangeslider > label {
472                float: none;
473                width: auto;
474                margin: 0 0 .4em;
475        }
476        .ui-field-contain > label ~ [class*="ui-"],
477        .ui-field-contain .ui-controlgroup-controls {
478                float: left;
479                width: 78%;
480                -webkit-box-sizing: border-box;
481                -moz-box-sizing: border-box;
482                -ms-box-sizing: border-box;
483                box-sizing: border-box;
484        }
485        /* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
486        .ui-hide-label > label ~ [class*="ui-"],
487        .ui-hide-label .ui-controlgroup-controls,
488        .ui-popup .ui-field-contain > label ~ [class*="ui-"],
489        .ui-popup .ui-field-contain .ui-controlgroup-controls {
490                float: none;
491                width: 100%;
492        }
493        .ui-field-contain > label ~ .ui-btn-inline {
494                width: auto;
495                margin-right: .625em;
496        }
497}
498
499
500/* content configurations. */
501.ui-grid-a,
502.ui-grid-b,
503.ui-grid-c,
504.ui-grid-d,
505.ui-grid-solo {
506        overflow: hidden;
507}
508.ui-block-a,
509.ui-block-b,
510.ui-block-c,
511.ui-block-d,
512.ui-block-e {
513        margin: 0;
514        padding: 0;
515        border: 0;
516        float: left;
517        min-height: 1px;
518        -webkit-box-sizing: border-box;
519        -moz-box-sizing: border-box;
520        box-sizing: border-box;
521}
522/* force new row */
523.ui-block-a {
524        clear: left;
525}
526ul.ui-grid-a,
527ul.ui-grid-b,
528ul.ui-grid-c,
529ul.ui-grid-d,
530ul.ui-grid-solo,
531li.ui-block-a,
532li.ui-block-b,
533li.ui-block-c,
534li.ui-block-d,
535li.ui-block-e {
536        margin-left: 0;
537        margin-right: 0;
538        padding: 0;
539        list-style: none;
540}
541/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
542[class*="ui-block-"] > button.ui-btn {
543        margin-right: 0;
544        margin-left: 0;
545}
546[class*="ui-block-"] > .ui-btn,
547[class*="ui-block-"] > .ui-select,
548[class*="ui-block-"] > .ui-checkbox,
549[class*="ui-block-"] > .ui-radio,
550[class*="ui-block-"] > button.ui-btn-inline,
551[class*="ui-block-"] > button.ui-btn-icon-notext {
552        margin-right: .3125em;
553        margin-left: .3125em;
554}
555
556.ui-grid-a > .ui-block-a,
557.ui-grid-a > .ui-block-b {
558        /* width: 49.95%; IE7 */
559        /* margin-right: -.5px; BB5 */
560        width: 50%;
561}
562.ui-grid-b > .ui-block-a,
563.ui-grid-b > .ui-block-b,
564.ui-grid-b > .ui-block-c {
565        /* width: 33.25%; IE7 */
566        /* margin-right: -.5px; BB5 */
567        width: 33.333%;
568}
569.ui-grid-c > .ui-block-a,
570.ui-grid-c > .ui-block-b,
571.ui-grid-c > .ui-block-c,
572.ui-grid-c > .ui-block-d {
573        /* width: 24.925%; IE7 */
574        /* margin-right: -.5px; BB5 */
575        width: 25%;
576}
577.ui-grid-d > .ui-block-a,
578.ui-grid-d > .ui-block-b,
579.ui-grid-d > .ui-block-c,
580.ui-grid-d > .ui-block-d,
581.ui-grid-d > .ui-block-e {
582        /* width: 19.925%; IE7 */
583        width: 20%;
584}
585.ui-grid-solo > .ui-block-a {
586        width: 100%;
587        float: none;
588}
589
590/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
591@media (max-width: 35em) {
592        .ui-responsive > .ui-block-a,
593        .ui-responsive > .ui-block-b,
594        .ui-responsive > .ui-block-c,
595        .ui-responsive > .ui-block-d,
596        .ui-responsive > .ui-block-e {
597                width: 100%;
598                float: none;
599        }
600}
601
602
603/* Transitions originally inspired by those from jQtouch, nice work, folks */
604.ui-mobile-viewport-transitioning,
605.ui-mobile-viewport-transitioning .ui-page {
606        width: 100%;
607        height: 100%;
608        overflow: hidden;
609        -webkit-box-sizing: border-box;
610        -moz-box-sizing: border-box;
611        box-sizing: border-box;
612}
613
614.ui-page-pre-in {
615        opacity: 0;
616}
617.in {
618        -webkit-animation-timing-function: ease-out;
619        -webkit-animation-duration: 350ms;
620        -moz-animation-timing-function: ease-out;
621        -moz-animation-duration: 350ms;
622        animation-timing-function: ease-out;
623        animation-duration: 350ms;
624}
625.out {
626        -webkit-animation-timing-function: ease-in;
627        -webkit-animation-duration: 225ms;
628        -moz-animation-timing-function: ease-in;
629        -moz-animation-duration: 225ms;
630        animation-timing-function: ease-in;
631        animation-duration: 225ms;
632}
633
634
635@-webkit-keyframes fadein {
636    from { opacity: 0; }
637    to { opacity: 1; }
638}
639@-moz-keyframes fadein {
640    from { opacity: 0; }
641    to { opacity: 1; }
642}
643@keyframes fadein {
644    from { opacity: 0; }
645    to { opacity: 1; }
646}
647
648@-webkit-keyframes fadeout {
649    from { opacity: 1; }
650    to { opacity: 0; }
651}
652@-moz-keyframes fadeout {
653    from { opacity: 1; }
654    to { opacity: 0; }
655}
656@keyframes fadeout {
657    from { opacity: 1; }
658    to { opacity: 0; }
659}
660
661.fade.out {
662        opacity: 0;
663        -webkit-animation-duration: 125ms;
664        -webkit-animation-name: fadeout;
665        -moz-animation-duration: 125ms;
666        -moz-animation-name: fadeout;
667        animation-duration: 125ms;
668        animation-name: fadeout;
669}
670
671.fade.in {
672        opacity: 1;
673        -webkit-animation-duration: 225ms;
674        -webkit-animation-name: fadein;
675        -moz-animation-duration: 225ms;
676        -moz-animation-name: fadein;
677        animation-duration: 225ms;
678        animation-name: fadein;
679}
680
681
682/* The properties in this rule are only necessary for the 'flip' transition.
683 * We need specify the perspective to create a projection matrix. This will add
684 * some depth as the element flips. The depth number represents the distance of
685 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
686 * value.
687 */
688
689.viewport-flip {
690        -webkit-perspective: 1000;
691        -moz-perspective: 1000;
692        perspective: 1000;
693        position: absolute;
694}
695.flip {
696        -webkit-backface-visibility: hidden;
697        -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
698        -moz-backface-visibility: hidden;
699        -moz-transform: translateX(0);
700        backface-visibility: hidden;
701        transform: translateX(0);
702}
703
704.flip.out {
705        -webkit-transform: rotateY(-90deg) scale(.9);
706        -webkit-animation-name: flipouttoleft;
707        -webkit-animation-duration: 175ms;
708        -moz-transform: rotateY(-90deg) scale(.9);
709        -moz-animation-name: flipouttoleft;
710        -moz-animation-duration: 175ms;
711        transform: rotateY(-90deg) scale(.9);
712        animation-name: flipouttoleft;
713        animation-duration: 175ms;
714}
715
716.flip.in {
717        -webkit-animation-name: flipintoright;
718        -webkit-animation-duration: 225ms;
719        -moz-animation-name: flipintoright;
720        -moz-animation-duration: 225ms;
721        animation-name: flipintoright;
722        animation-duration: 225ms;
723}
724
725.flip.out.reverse {
726        -webkit-transform: rotateY(90deg) scale(.9);
727        -webkit-animation-name: flipouttoright;
728        -moz-transform: rotateY(90deg) scale(.9);
729        -moz-animation-name: flipouttoright;
730        transform: rotateY(90deg) scale(.9);
731        animation-name: flipouttoright;
732}
733
734.flip.in.reverse {
735        -webkit-animation-name: flipintoleft;
736        -moz-animation-name: flipintoleft;
737        animation-name: flipintoleft;
738}
739
740@-webkit-keyframes flipouttoleft {
741    from { -webkit-transform: rotateY(0); }
742    to { -webkit-transform: rotateY(-90deg) scale(.9); }
743}
744@-moz-keyframes flipouttoleft {
745    from { -moz-transform: rotateY(0); }
746    to { -moz-transform: rotateY(-90deg) scale(.9); }
747}
748@keyframes flipouttoleft {
749    from { transform: rotateY(0); }
750    to { transform: rotateY(-90deg) scale(.9); }
751}
752@-webkit-keyframes flipouttoright {
753    from { -webkit-transform: rotateY(0) ; }
754    to { -webkit-transform: rotateY(90deg) scale(.9); }
755}
756@-moz-keyframes flipouttoright {
757    from { -moz-transform: rotateY(0); }
758    to { -moz-transform: rotateY(90deg) scale(.9); }
759}
760@keyframes flipouttoright {
761    from { transform: rotateY(0); }
762    to { transform: rotateY(90deg) scale(.9); }
763}
764@-webkit-keyframes flipintoleft {
765    from { -webkit-transform: rotateY(-90deg) scale(.9); }
766    to { -webkit-transform: rotateY(0); }
767}
768@-moz-keyframes flipintoleft {
769    from { -moz-transform: rotateY(-90deg) scale(.9); }
770    to { -moz-transform: rotateY(0); }
771}
772@keyframes flipintoleft {
773    from { transform: rotateY(-90deg) scale(.9); }
774    to { transform: rotateY(0); }
775}
776@-webkit-keyframes flipintoright {
777    from { -webkit-transform: rotateY(90deg) scale(.9); }
778    to { -webkit-transform: rotateY(0); }
779}
780@-moz-keyframes flipintoright {
781    from { -moz-transform: rotateY(90deg) scale(.9); }
782    to { -moz-transform: rotateY(0); }
783}
784@keyframes flipintoright {
785    from { transform: rotateY(90deg) scale(.9); }
786    to { transform: rotateY(0); }
787}
788
789
790/* flow transition */
791.flow {
792        -webkit-transform-origin: 50% 30%;
793        -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
794        -moz-transform-origin: 50% 30%;
795        -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
796        transform-origin: 50% 30%;     
797        box-shadow: 0 0 20px rgba(0,0,0,.4);
798}
799.ui-dialog.flow {
800        -webkit-transform-origin: none;
801        -webkit-box-shadow: none;
802        -moz-transform-origin: none;   
803        -moz-box-shadow: none;
804        transform-origin: none;
805        box-shadow: none;
806}
807.flow.out {
808        -webkit-transform: translateX(-100%) scale(.7);
809        -webkit-animation-name: flowouttoleft;
810        -webkit-animation-timing-function: ease;
811        -webkit-animation-duration: 350ms;
812        -moz-transform: translateX(-100%) scale(.7);
813        -moz-animation-name: flowouttoleft;
814        -moz-animation-timing-function: ease;
815        -moz-animation-duration: 350ms;
816        transform: translateX(-100%) scale(.7);
817        animation-name: flowouttoleft;
818        animation-timing-function: ease;
819        animation-duration: 350ms;
820}
821
822.flow.in {
823        -webkit-transform: translateX(0) scale(1);
824        -webkit-animation-name: flowinfromright;
825        -webkit-animation-timing-function: ease;
826        -webkit-animation-duration: 350ms;
827        -moz-transform: translateX(0) scale(1);
828        -moz-animation-name: flowinfromright;
829        -moz-animation-timing-function: ease;
830        -moz-animation-duration: 350ms;
831        transform: translateX(0) scale(1);
832        animation-name: flowinfromright;
833        animation-timing-function: ease;
834        animation-duration: 350ms;
835}
836
837.flow.out.reverse {
838        -webkit-transform: translateX(100%);
839        -webkit-animation-name: flowouttoright;
840        -moz-transform: translateX(100%);
841        -moz-animation-name: flowouttoright;
842        transform: translateX(100%);
843        animation-name: flowouttoright;
844}
845
846.flow.in.reverse {
847        -webkit-animation-name: flowinfromleft;
848        -moz-animation-name: flowinfromleft;
849        animation-name: flowinfromleft;
850}
851
852@-webkit-keyframes flowouttoleft {
853    0% { -webkit-transform: translateX(0) scale(1); }
854        60%, 70% { -webkit-transform: translateX(0) scale(.7); }
855    100% { -webkit-transform: translateX(-100%) scale(.7); }
856}
857@-moz-keyframes flowouttoleft {
858    0% { -moz-transform: translateX(0) scale(1); }
859        60%, 70% { -moz-transform: translateX(0) scale(.7); }
860    100% { -moz-transform:  translateX(-100%) scale(.7); }
861}
862@keyframes flowouttoleft {
863    0% { transform: translateX(0) scale(1); }
864        60%, 70% { transform: translateX(0) scale(.7); }
865    100% { transform:  translateX(-100%) scale(.7); }
866}
867
868@-webkit-keyframes flowouttoright {
869    0% { -webkit-transform: translateX(0) scale(1); }
870        60%, 70% { -webkit-transform: translateX(0) scale(.7); }
871    100% { -webkit-transform:  translateX(100%) scale(.7); }
872}
873@-moz-keyframes flowouttoright {
874    0% { -moz-transform: translateX(0) scale(1); }
875        60%, 70% { -moz-transform: translateX(0) scale(.7); }
876    100% { -moz-transform:  translateX(100%) scale(.7); }
877}
878@keyframes flowouttoright {
879    0% { transform: translateX(0) scale(1); }
880        60%, 70% { transform: translateX(0) scale(.7); }
881    100% { transform:  translateX(100%) scale(.7); }
882}
883
884@-webkit-keyframes flowinfromleft {
885    0% { -webkit-transform: translateX(-100%) scale(.7); }
886        30%, 40% { -webkit-transform: translateX(0) scale(.7); }
887    100% { -webkit-transform: translateX(0) scale(1); }
888}
889@-moz-keyframes flowinfromleft {
890    0% { -moz-transform: translateX(-100%) scale(.7); }
891        30%, 40% { -moz-transform: translateX(0) scale(.7); }
892    100% { -moz-transform: translateX(0) scale(1); }
893}
894@keyframes flowinfromleft {
895    0% { transform: translateX(-100%) scale(.7); }
896        30%, 40% { transform: translateX(0) scale(.7); }
897    100% { transform: translateX(0) scale(1); }
898}
899
900@-webkit-keyframes flowinfromright {
901    0% { -webkit-transform: translateX(100%) scale(.7); }
902        30%, 40% { -webkit-transform: translateX(0) scale(.7); }
903    100% { -webkit-transform: translateX(0) scale(1); }
904}
905@-moz-keyframes flowinfromright {
906    0% { -moz-transform: translateX(100%) scale(.7); }
907        30%, 40% { -moz-transform: translateX(0) scale(.7); }
908    100% { -moz-transform: translateX(0) scale(1); }
909}
910@keyframes flowinfromright {
911    0% { transform: translateX(100%) scale(.7); }
912        30%, 40% { transform: translateX(0) scale(.7); }
913    100% { transform: translateX(0) scale(1); }
914}
915
916
917.pop {
918        -webkit-transform-origin: 50% 50%;
919        -moz-transform-origin: 50% 50%;
920        transform-origin: 50% 50%;
921}
922
923.pop.in {
924        -webkit-transform: scale(1);
925        -webkit-animation-name: popin;
926        -webkit-animation-duration: 350ms;
927        -moz-transform: scale(1);
928        -moz-animation-name: popin;
929        -moz-animation-duration: 350ms;
930        transform: scale(1);
931        animation-name: popin;
932        animation-duration: 350ms;
933    opacity: 1;
934}
935
936.pop.out {
937        -webkit-animation-name: fadeout;
938        -webkit-animation-duration: 100ms;
939        -moz-animation-name: fadeout;
940        -moz-animation-duration: 100ms;
941        animation-name: fadeout;
942        animation-duration: 100ms;
943        opacity: 0;
944}
945
946.pop.in.reverse {
947        -webkit-animation-name: fadein;
948        -moz-animation-name: fadein;
949        animation-name: fadein;
950}
951
952.pop.out.reverse {
953        -webkit-transform: scale(.8);
954        -webkit-animation-name: popout;
955        -moz-transform: scale(.8);
956        -moz-animation-name: popout;
957        transform: scale(.8);
958        animation-name: popout;
959}
960
961@-webkit-keyframes popin {
962    from {
963        -webkit-transform: scale(.8);
964        opacity: 0;
965    }
966    to {
967        -webkit-transform: scale(1);
968        opacity: 1;
969    }
970}
971@-moz-keyframes popin {
972    from {
973        -moz-transform: scale(.8);
974        opacity: 0;
975    }
976    to {
977        -moz-transform: scale(1);
978        opacity: 1;
979    }
980}
981@keyframes popin {
982    from {
983        transform: scale(.8);
984        opacity: 0;
985    }
986    to {
987        transform: scale(1);
988        opacity: 1;
989    }
990}
991
992@-webkit-keyframes popout {
993    from {
994        -webkit-transform: scale(1);
995        opacity: 1;
996    }
997    to {
998        -webkit-transform: scale(.8);
999        opacity: 0;
1000    }
1001}
1002@-moz-keyframes popout {
1003    from {
1004        -moz-transform: scale(1);
1005        opacity: 1;
1006    }
1007    to {
1008        -moz-transform: scale(.8);
1009        opacity: 0;
1010    }
1011}
1012@keyframes popout {
1013    from {
1014        transform: scale(1);
1015        opacity: 1;
1016    }
1017    to {
1018        transform: scale(.8);
1019        opacity: 0;
1020    }
1021}
1022
1023
1024/* keyframes for slidein from sides */
1025@-webkit-keyframes slideinfromright {
1026    from { -webkit-transform: translate3d(100%,0,0); }
1027    to { -webkit-transform: translate3d(0,0,0); }
1028}
1029@-moz-keyframes slideinfromright {
1030    from { -moz-transform: translateX(100%); }
1031    to { -moz-transform: translateX(0); }
1032}
1033@keyframes slideinfromright {
1034    from { transform: translateX(100%); }
1035    to { transform: translateX(0); }
1036}
1037
1038@-webkit-keyframes slideinfromleft {
1039    from { -webkit-transform: translate3d(-100%,0,0); }
1040    to { -webkit-transform: translate3d(0,0,0); }
1041}
1042@-moz-keyframes slideinfromleft {
1043    from { -moz-transform: translateX(-100%); }
1044    to { -moz-transform: translateX(0); }
1045}
1046@keyframes slideinfromleft {
1047    from { transform: translateX(-100%); }
1048    to { transform: translateX(0); }
1049}
1050/* keyframes for slideout to sides */
1051@-webkit-keyframes slideouttoleft {
1052    from { -webkit-transform: translate3d(0,0,0); }
1053    to { -webkit-transform: translate3d(-100%,0,0); }
1054}
1055@-moz-keyframes slideouttoleft {
1056    from { -moz-transform: translateX(0); }
1057    to { -moz-transform: translateX(-100%); }
1058}
1059@keyframes slideouttoleft {
1060    from { transform: translateX(0); }
1061    to { transform: translateX(-100%); }
1062}
1063
1064@-webkit-keyframes slideouttoright {
1065    from { -webkit-transform: translate3d(0,0,0); }
1066    to { -webkit-transform: translate3d(100%,0,0); }
1067}
1068@-moz-keyframes slideouttoright {
1069    from { -moz-transform: translateX(0); }
1070    to { -moz-transform: translateX(100%); }
1071}
1072@keyframes slideouttoright {
1073    from { transform: translateX(0); }
1074    to { transform: translateX(100%); }
1075}
1076
1077
1078.slide.out, .slide.in {
1079        -webkit-animation-timing-function: ease-out;
1080        -webkit-animation-duration: 350ms;
1081        -moz-animation-timing-function: ease-out;
1082        -moz-animation-duration: 350ms;
1083        animation-timing-function: ease-out;
1084        animation-duration: 350ms;
1085}
1086.slide.out {
1087        -webkit-transform: translate3d(-100%,0,0);
1088        -webkit-animation-name: slideouttoleft;
1089        -moz-transform: translateX(-100%);
1090        -moz-animation-name: slideouttoleft;
1091        transform: translateX(-100%);
1092        animation-name: slideouttoleft;
1093}
1094
1095.slide.in {
1096        -webkit-transform: translate3d(0,0,0);
1097        -webkit-animation-name: slideinfromright;
1098        -moz-transform: translateX(0);
1099        -moz-animation-name: slideinfromright;
1100        transform: translateX(0);
1101        animation-name: slideinfromright;
1102}
1103
1104.slide.out.reverse {
1105        -webkit-transform: translate3d(100%,0,0);
1106        -webkit-animation-name: slideouttoright;
1107        -moz-transform: translateX(100%);
1108        -moz-animation-name: slideouttoright;
1109        transform: translateX(100%);
1110        animation-name: slideouttoright;
1111}
1112
1113.slide.in.reverse {
1114        -webkit-transform: translate3d(0,0,0);
1115        -webkit-animation-name: slideinfromleft;
1116        -moz-transform: translateX(0);
1117        -moz-animation-name: slideinfromleft;
1118        transform: translateX(0);
1119        animation-name: slideinfromleft;
1120}
1121
1122/* slide down */
1123.slidedown.out {
1124        -webkit-animation-name: fadeout;
1125        -webkit-animation-duration: 100ms;
1126        -moz-animation-name: fadeout;
1127        -moz-animation-duration: 100ms;
1128        animation-name: fadeout;
1129        animation-duration: 100ms;
1130}
1131
1132.slidedown.in {
1133        -webkit-transform: translateY(0);
1134        -webkit-animation-name: slideinfromtop;
1135        -webkit-animation-duration: 250ms;
1136        -moz-transform: translateY(0);
1137        -moz-animation-name: slideinfromtop;
1138        -moz-animation-duration: 250ms;
1139        transform: translateY(0);
1140        animation-name: slideinfromtop;
1141        animation-duration: 250ms;
1142}
1143
1144.slidedown.in.reverse {
1145        -webkit-animation-name: fadein;
1146        -webkit-animation-duration: 150ms;
1147        -moz-animation-name: fadein;
1148        -moz-animation-duration: 150ms;
1149        animation-name: fadein;
1150        animation-duration: 150ms;
1151}
1152
1153.slidedown.out.reverse {
1154        -webkit-transform: translateY(-100%);
1155        -webkit-animation-name: slideouttotop;
1156        -webkit-animation-duration: 200ms;
1157        -moz-transform: translateY(-100%);
1158        -moz-animation-name: slideouttotop;
1159        -moz-animation-duration: 200ms;
1160        transform: translateY(-100%);
1161        animation-name: slideouttotop;
1162        animation-duration: 200ms;
1163}
1164
1165@-webkit-keyframes slideinfromtop {
1166    from { -webkit-transform: translateY(-100%); }
1167    to { -webkit-transform: translateY(0); }
1168}
1169@-moz-keyframes slideinfromtop {
1170    from { -moz-transform: translateY(-100%); }
1171    to { -moz-transform: translateY(0); }
1172}
1173@keyframes slideinfromtop {
1174    from { transform: translateY(-100%); }
1175    to { transform: translateY(0); }
1176}
1177
1178@-webkit-keyframes slideouttotop {
1179    from { -webkit-transform: translateY(0); }
1180    to { -webkit-transform: translateY(-100%); }
1181}
1182@-moz-keyframes slideouttotop {
1183    from { -moz-transform: translateY(0); }
1184    to { -moz-transform: translateY(-100%); }
1185}
1186@keyframes slideouttotop {
1187    from { transform: translateY(0); }
1188    to { transform: translateY(-100%); }
1189}
1190
1191
1192@-webkit-keyframes fadein {
1193    from { opacity: 0; }
1194    to { opacity: 1; }
1195}
1196@-moz-keyframes fadein {
1197    from { opacity: 0; }
1198    to { opacity: 1; }
1199}
1200@keyframes fadein {
1201    from { opacity: 0; }
1202    to { opacity: 1; }
1203}
1204
1205@-webkit-keyframes fadeout {
1206    from { opacity: 1; }
1207    to { opacity: 0; }
1208}
1209@-moz-keyframes fadeout {
1210    from { opacity: 1; }
1211    to { opacity: 0; }
1212}
1213@keyframes fadeout {
1214    from { opacity: 1; }
1215    to { opacity: 0; }
1216}
1217
1218.fade.out {
1219        opacity: 0;
1220        -webkit-animation-duration: 125ms;
1221        -webkit-animation-name: fadeout;
1222        -moz-animation-duration: 125ms;
1223        -moz-animation-name: fadeout;
1224        animation-duration: 125ms;
1225        animation-name: fadeout;
1226}
1227
1228.fade.in {
1229        opacity: 1;
1230        -webkit-animation-duration: 225ms;
1231        -webkit-animation-name: fadein;
1232        -moz-animation-duration: 225ms;
1233        -moz-animation-name: fadein;
1234        animation-duration: 225ms;
1235        animation-name: fadein;
1236}
1237
1238/* keyframes for slideout to sides */
1239@-webkit-keyframes slideouttoleft {
1240    from { -webkit-transform: translate3d(0,0,0); }
1241    to { -webkit-transform: translate3d(-100%,0,0); }
1242}
1243@-moz-keyframes slideouttoleft {
1244    from { -moz-transform: translateX(0); }
1245    to { -moz-transform: translateX(-100%); }
1246}
1247@keyframes slideouttoleft {
1248    from { transform: translateX(0); }
1249    to { transform: translateX(-100%); }
1250}
1251
1252@-webkit-keyframes slideouttoright {
1253    from { -webkit-transform: translate3d(0,0,0); }
1254    to { -webkit-transform: translate3d(100%,0,0); }
1255}
1256@-moz-keyframes slideouttoright {
1257    from { -moz-transform: translateX(0); }
1258    to { -moz-transform: translateX(100%); }
1259}
1260@keyframes slideouttoright {
1261    from { transform: translateX(0); }
1262    to { transform: translateX(100%); }
1263}
1264
1265
1266.slidefade.out {
1267        -webkit-transform: translateX(-100%);
1268        -webkit-animation-name: slideouttoleft;
1269        -webkit-animation-duration: 225ms;
1270        -moz-transform: translateX(-100%);
1271        -moz-animation-name: slideouttoleft;
1272        -moz-animation-duration: 225ms;
1273        transform: translateX(-100%);
1274        animation-name: slideouttoleft;
1275        animation-duration: 225ms;
1276}
1277
1278.slidefade.in {
1279        -webkit-transform: translateX(0);
1280        -webkit-animation-name: fadein;
1281        -webkit-animation-duration: 200ms;
1282        -moz-transform: translateX(0);
1283        -moz-animation-name: fadein;
1284        -moz-animation-duration: 200ms;
1285        transform: translateX(0);
1286        animation-name: fadein;
1287        animation-duration: 200ms;
1288}
1289
1290.slidefade.out.reverse {
1291        -webkit-transform: translateX(100%);
1292        -webkit-animation-name: slideouttoright;
1293        -webkit-animation-duration: 200ms;
1294        -moz-transform: translateX(100%);
1295        -moz-animation-name: slideouttoright;
1296        -moz-animation-duration: 200ms;
1297        transform: translateX(100%);
1298        animation-name: slideouttoright;
1299        animation-duration: 200ms;
1300}
1301
1302.slidefade.in.reverse {
1303        -webkit-transform: translateX(0);
1304        -webkit-animation-name: fadein;
1305        -webkit-animation-duration: 200ms;
1306        -moz-transform: translateX(0);
1307        -moz-animation-name: fadein;
1308        -moz-animation-duration: 200ms;
1309        transform: translateX(0);
1310        animation-name: fadein;
1311        animation-duration: 200ms;
1312}
1313
1314/* slide up */
1315.slideup.out {
1316        -webkit-animation-name: fadeout;
1317        -webkit-animation-duration: 100ms;
1318        -moz-animation-name: fadeout;
1319        -moz-animation-duration: 100ms;
1320        animation-name: fadeout;
1321        animation-duration: 100ms;
1322}
1323
1324.slideup.in {
1325        -webkit-transform: translateY(0);
1326        -webkit-animation-name: slideinfrombottom;
1327        -webkit-animation-duration: 250ms;
1328        -moz-transform: translateY(0);
1329        -moz-animation-name: slideinfrombottom;
1330        -moz-animation-duration: 250ms;
1331        transform: translateY(0);
1332        animation-name: slideinfrombottom;
1333        animation-duration: 250ms;
1334}
1335
1336.slideup.in.reverse {
1337        -webkit-animation-name: fadein;
1338        -webkit-animation-duration: 150ms;
1339        -moz-animation-name: fadein;
1340        -moz-animation-duration: 150ms;
1341        animation-name: fadein;
1342        animation-duration: 150ms;
1343}
1344
1345.slideup.out.reverse {
1346        -webkit-transform: translateY(100%);
1347        -webkit-animation-name: slideouttobottom;
1348        -webkit-animation-duration: 200ms;
1349        -moz-transform: translateY(100%);
1350        -moz-animation-name: slideouttobottom;
1351        -moz-animation-duration: 200ms;
1352        transform: translateY(100%);
1353        animation-name: slideouttobottom;
1354        animation-duration: 200ms;
1355}
1356
1357@-webkit-keyframes slideinfrombottom {
1358    from { -webkit-transform: translateY(100%); }
1359    to { -webkit-transform: translateY(0); }
1360}
1361@-moz-keyframes slideinfrombottom {
1362    from { -moz-transform: translateY(100%); }
1363    to { -moz-transform: translateY(0); }
1364}
1365@keyframes slideinfrombottom {
1366    from { transform: translateY(100%); }
1367    to { transform: translateY(0); }
1368}
1369
1370@-webkit-keyframes slideouttobottom {
1371    from { -webkit-transform: translateY(0); }
1372    to { -webkit-transform: translateY(100%); }
1373}
1374@-moz-keyframes slideouttobottom {
1375    from { -moz-transform: translateY(0); }
1376    to { -moz-transform: translateY(100%); }
1377}
1378@keyframes slideouttobottom {
1379    from { transform: translateY(0); }
1380    to { transform: translateY(100%); }
1381}
1382
1383/* The properties in this rule are only necessary for the 'flip' transition.
1384 * We need specify the perspective to create a projection matrix. This will add
1385 * some depth as the element flips. The depth number represents the distance of
1386 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
1387 * value.
1388 */
1389
1390.viewport-turn {
1391        -webkit-perspective: 200px;
1392        -moz-perspective: 200px;
1393        -ms-perspective: 200px;
1394        perspective: 200px;
1395        position: absolute;
1396}
1397.turn {
1398        -webkit-backface-visibility: hidden;
1399        -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
1400        -webkit-transform-origin: 0;
1401       
1402        -moz-backface-visibility: hidden;
1403        -moz-transform: translateX(0);
1404        -moz-transform-origin: 0;
1405       
1406        backface-visibility :hidden;
1407        transform: translateX(0);
1408        transform-origin: 0;
1409}
1410
1411.turn.out {
1412        -webkit-transform: rotateY(-90deg) scale(.9);
1413        -webkit-animation-name: flipouttoleft;
1414        -webkit-animation-duration: 125ms;
1415        -moz-transform: rotateY(-90deg) scale(.9);
1416        -moz-animation-name: flipouttoleft;
1417        -moz-animation-duration: 125ms;
1418        transform: rotateY(-90deg) scale(.9);
1419        animation-name: flipouttoleft;
1420        animation-duration: 125ms;
1421}
1422
1423.turn.in {
1424        -webkit-animation-name: flipintoright;
1425        -webkit-animation-duration: 250ms;
1426        -moz-animation-name: flipintoright;
1427        -moz-animation-duration: 250ms;
1428        animation-name: flipintoright;
1429        animation-duration: 250ms;
1430       
1431}
1432
1433.turn.out.reverse {
1434        -webkit-transform: rotateY(90deg) scale(.9);
1435        -webkit-animation-name: flipouttoright;
1436        -moz-transform: rotateY(90deg) scale(.9);
1437        -moz-animation-name: flipouttoright;
1438        transform: rotateY(90deg) scale(.9);
1439        animation-name: flipouttoright;
1440}
1441
1442.turn.in.reverse {
1443        -webkit-animation-name: flipintoleft;
1444        -moz-animation-name: flipintoleft;
1445        animation-name: flipintoleft;
1446}
1447
1448@-webkit-keyframes flipouttoleft {
1449    from { -webkit-transform: rotateY(0); }
1450    to { -webkit-transform: rotateY(-90deg) scale(.9); }
1451}
1452@-moz-keyframes flipouttoleft {
1453    from { -moz-transform: rotateY(0); }
1454    to { -moz-transform: rotateY(-90deg) scale(.9); }
1455}
1456@keyframes flipouttoleft {
1457    from { transform: rotateY(0); }
1458    to { transform: rotateY(-90deg) scale(.9); }
1459}
1460@-webkit-keyframes flipouttoright {
1461    from { -webkit-transform: rotateY(0) ; }
1462    to { -webkit-transform: rotateY(90deg) scale(.9); }
1463}
1464@-moz-keyframes flipouttoright {
1465    from { -moz-transform: rotateY(0); }
1466    to { -moz-transform: rotateY(90deg) scale(.9); }
1467}
1468@keyframes flipouttoright {
1469    from { transform: rotateY(0); }
1470    to { transform: rotateY(90deg) scale(.9); }
1471}
1472@-webkit-keyframes flipintoleft {
1473    from { -webkit-transform: rotateY(-90deg) scale(.9); }
1474    to { -webkit-transform: rotateY(0); }
1475}
1476@-moz-keyframes flipintoleft {
1477    from { -moz-transform: rotateY(-90deg) scale(.9); }
1478    to { -moz-transform: rotateY(0); }
1479}
1480@keyframes flipintoleft {
1481    from { transform: rotateY(-90deg) scale(.9); }
1482    to { transform: rotateY(0); }
1483}
1484@-webkit-keyframes flipintoright {
1485    from { -webkit-transform: rotateY(90deg) scale(.9); }
1486    to { -webkit-transform: rotateY(0); }
1487}
1488@-moz-keyframes flipintoright {
1489    from { -moz-transform: rotateY(90deg) scale(.9); }
1490    to { -moz-transform: rotateY(0); }
1491}
1492@keyframes flipintoright {
1493    from { transform: rotateY(90deg) scale(.9); }
1494    to { transform: rotateY(0); }
1495}
1496
1497
1498.ui-collapsible {
1499        margin: 0 -1em;
1500}
1501.ui-collapsible-inset,
1502.ui-collapsible-set {
1503        margin: .5em 0;
1504}
1505.ui-collapsible-heading {
1506        display: block;
1507        margin: 0;
1508        padding: 0;
1509        position: relative;
1510}
1511.ui-collapsible-heading .ui-btn {
1512        text-align: left;
1513        margin: 0;
1514        border-left-width: 0;
1515        border-right-width: 0;
1516}
1517.ui-collapsible-heading .ui-btn-icon-top,
1518.ui-collapsible-heading .ui-btn-icon-bottom {
1519        text-align: center;
1520}
1521.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
1522        border-right-width: 1px;
1523        border-left-width: 1px;
1524}
1525.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
1526        border-top-width: 0;
1527}
1528.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn {
1529        border-top-width: 1px;
1530}
1531.ui-collapsible-heading-status {
1532        position: absolute !important;
1533        height: 1px;
1534        width: 1px;
1535        overflow: hidden;
1536        clip: rect(1px,1px,1px,1px);
1537}
1538.ui-collapsible-content {
1539        display: block;
1540        margin: 0;     
1541        padding: .5em 1em;
1542}
1543.ui-collapsible-themed-content .ui-collapsible-content {
1544        border-left-width: 0;
1545        border-right-width: 0;
1546        border-top-width: 0;
1547        border-bottom-width: 1px;
1548        border-style: solid;
1549}
1550.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
1551        border-left-width: 1px;
1552        border-right-width: 1px;
1553}
1554.ui-collapsible-inset .ui-collapsible-content {
1555        margin: 0;
1556}
1557.ui-collapsible-content-collapsed {
1558        display: none;
1559}
1560.ui-collapsible-set > .ui-collapsible.ui-corner-all {
1561        -webkit-border-radius: 0;
1562        border-radius: 0;
1563}
1564.ui-collapsible-heading,
1565.ui-collapsible-heading > .ui-btn {
1566        -webkit-border-radius: inherit;
1567        border-radius: inherit;
1568}
1569.ui-collapsible-set .ui-collapsible.ui-first-child {
1570        -webkit-border-top-right-radius: inherit;       
1571        border-top-right-radius: inherit;
1572        -webkit-border-top-left-radius: inherit;       
1573        border-top-left-radius: inherit;               
1574}
1575.ui-collapsible-content,
1576.ui-collapsible-set .ui-collapsible.ui-last-child {
1577        -webkit-border-bottom-right-radius: inherit;   
1578        border-bottom-right-radius: inherit;
1579        -webkit-border-bottom-left-radius: inherit;     
1580        border-bottom-left-radius: inherit;             
1581}
1582.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) > .ui-collapsible-heading {
1583        -webkit-border-bottom-right-radius: 0; 
1584        border-bottom-right-radius: 0;
1585        -webkit-border-bottom-left-radius: 0;   
1586        border-bottom-left-radius: 0;           
1587}
1588.ui-collapsible-set .ui-collapsible {
1589        margin: -1px -1em 0;
1590}
1591.ui-collapsible-set .ui-collapsible-inset {
1592        margin: -1px 0 0;
1593}
1594.ui-collapsible-set .ui-collapsible.ui-first-child {
1595        margin-top: 0;
1596}
1597
1598
1599.ui-controlgroup,
1600fieldset.ui-controlgroup {
1601        padding: 0;
1602        margin: .5em 0;
1603}
1604.ui-field-contain .ui-controlgroup,
1605.ui-field-contain fieldset.ui-controlgroup {
1606        margin: 0;
1607}
1608.ui-mini .ui-controlgroup-label {
1609        font-size: 16px;
1610}
1611.ui-controlgroup.ui-mini .ui-btn-icon-notext,
1612.ui-controlgroup .ui-mini.ui-btn-icon-notext {
1613        font-size: inherit;
1614}
1615.ui-controlgroup-controls .ui-btn,
1616.ui-controlgroup-controls .ui-checkbox,
1617.ui-controlgroup-controls .ui-radio,
1618.ui-controlgroup-controls .ui-select {
1619        margin: 0;
1620}
1621.ui-controlgroup-controls .ui-btn:focus,
1622.ui-controlgroup-controls .ui-btn.ui-focus {
1623        z-index: 1;
1624}
1625.ui-controlgroup-controls li {
1626        list-style: none;
1627}
1628.ui-controlgroup-horizontal .ui-controlgroup-controls {
1629        display: inline-block;
1630        vertical-align: middle;
1631}
1632.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
1633.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
1634        content: "";
1635        display: table;
1636}
1637.ui-controlgroup-horizontal .ui-controlgroup-controls:after {
1638        clear: both;
1639}
1640.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
1641.ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
1642.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
1643.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
1644.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
1645        float: left;
1646        clear: none;
1647}
1648.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
1649.ui-controlgroup-controls .ui-btn-icon-notext {
1650        width: auto;
1651}
1652.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
1653.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
1654        width: 1.5em;
1655}
1656 .ui-controlgroup-controls .ui-btn-icon-notext {
1657        height: auto;
1658        padding: .7em 1em;
1659}
1660.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
1661        border-bottom-width: 0;
1662}
1663.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
1664        border-bottom-width: 1px;
1665}
1666.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
1667        border-right-width: 0;
1668}
1669.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
1670        border-right-width: 1px;
1671}
1672.ui-controlgroup-controls .ui-btn-corner-all,
1673.ui-controlgroup-controls .ui-btn.ui-corner-all {
1674        -webkit-border-radius: 0;
1675        border-radius: 0;
1676}
1677.ui-controlgroup-controls,
1678.ui-controlgroup-controls .ui-radio,
1679.ui-controlgroup-controls .ui-checkbox,
1680.ui-controlgroup-controls .ui-select,
1681.ui-controlgroup-controls li {
1682        -webkit-border-radius: inherit;
1683        border-radius: inherit;
1684}
1685.ui-controlgroup-vertical .ui-btn.ui-first-child {
1686        -webkit-border-top-left-radius: inherit;
1687        border-top-left-radius: inherit;
1688        -webkit-border-top-right-radius: inherit;
1689        border-top-right-radius: inherit;
1690}
1691.ui-controlgroup-vertical .ui-btn.ui-last-child {
1692        -webkit-border-bottom-left-radius: inherit;
1693        border-bottom-left-radius: inherit;
1694        -webkit-border-bottom-right-radius: inherit;
1695        border-bottom-right-radius: inherit;
1696}
1697.ui-controlgroup-horizontal .ui-btn.ui-first-child {
1698        -webkit-border-top-left-radius: inherit;
1699        border-top-left-radius: inherit;
1700        -webkit-border-bottom-left-radius: inherit;
1701        border-bottom-left-radius: inherit;
1702}
1703.ui-controlgroup-horizontal .ui-btn.ui-last-child {
1704        -webkit-border-top-right-radius: inherit;
1705        border-top-right-radius: inherit;
1706        -webkit-border-bottom-right-radius: inherit;
1707        border-bottom-right-radius: inherit;
1708}
1709.ui-controlgroup-controls a.ui-shadow:not(:focus),
1710.ui-controlgroup-controls button.ui-shadow:not(:focus),
1711.ui-controlgroup-controls div.ui-shadow:not(.ui-focus) {
1712        -moz-box-shadow: none;
1713        -webkit-box-shadow: none;
1714        box-shadow: none;
1715}
1716/* Fixes legend not wrapping on IE10 */
1717.ui-controlgroup-label legend {
1718        max-width: 100%;
1719}
1720.ui-controlgroup-controls > label {
1721        position: absolute !important;
1722        height: 1px;
1723        width: 1px;
1724        overflow: hidden;
1725        clip: rect(1px,1px,1px,1px);
1726}
1727
1728
1729.ui-dialog {
1730         background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
1731}
1732.ui-dialog-contain {
1733        width: 92.5%;
1734        max-width: 500px;
1735        margin: 10% auto 1em auto;
1736        padding: 0;
1737        position: relative;
1738        top: -1em;
1739}
1740.ui-dialog-contain > .ui-header,
1741.ui-dialog-contain > .ui-content,
1742.ui-dialog-contain > .ui-footer {
1743        display: block;
1744        position: relative;
1745        width: auto;
1746        margin: 0;
1747}
1748.ui-dialog-contain > .ui-header {
1749        overflow: hidden;
1750        z-index: 10;
1751        padding: 0;
1752        border-top-width: 0;
1753}
1754.ui-dialog-contain > .ui-footer {
1755        z-index: 10;
1756        padding: 0 1em;
1757        border-bottom-width: 0;
1758}
1759
1760
1761html .ui-filterable + .ui-listview,
1762html .ui-filterable.ui-listview {
1763        margin-top: .5em;
1764}
1765.ui-collapsible-content > form.ui-filterable {
1766        margin-top: -.5em;
1767}
1768.ui-collapsible-content > .ui-input-search.ui-filterable {
1769        margin-top: 0;
1770}
1771.ui-collapsible-content > .ui-filterable + .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
1772.ui-collapsible-content > .ui-filterable + .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn,
1773.ui-collapsible-content > .ui-filterable.ui-listview:not(.ui-listview-inset) > li.ui-first-child,
1774.ui-collapsible-content > .ui-filterable.ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
1775        border-top-width: 1px;
1776}
1777
1778
1779/* fixed page header & footer configuration */
1780.ui-header-fixed,
1781.ui-footer-fixed {
1782        left: 0;
1783        right: 0;
1784        width: 100%;
1785        position: fixed;
1786        z-index: 1000;
1787}
1788.ui-header-fixed {
1789        top: -1px;
1790        padding-top: 1px;
1791}
1792.ui-header-fixed.ui-fixed-hidden {
1793        top: 0;
1794        padding-top: 0;
1795}
1796.ui-header-fixed .ui-btn-left,
1797.ui-header-fixed .ui-btn-right {
1798        margin-top: 1px;
1799}
1800.ui-header-fixed.ui-fixed-hidden .ui-btn-left,
1801.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
1802        margin-top: 0;
1803}
1804.ui-footer-fixed {
1805        bottom: -1px;
1806        padding-bottom: 1px;
1807}
1808.ui-footer-fixed.ui-fixed-hidden {
1809        bottom: 0;
1810        padding-bottom: 0;
1811}
1812.ui-header-fullscreen,
1813.ui-footer-fullscreen {
1814        filter: Alpha(Opacity=90);
1815        opacity: .9;
1816}
1817/* updatePagePadding() will update the padding to actual height of header and footer. */
1818.ui-page-header-fixed {
1819        padding-top: 2.8125em;
1820}
1821.ui-page-footer-fixed {
1822        padding-bottom: 2.8125em;
1823}
1824.ui-page-header-fullscreen > .ui-content,
1825.ui-page-footer-fullscreen > .ui-content {
1826        padding: 0;
1827}
1828.ui-fixed-hidden {
1829        position: absolute;
1830}
1831/* Tap toggle: hide external fixed footer. See issue #6604 */
1832.ui-footer-fixed.ui-fixed-hidden {
1833  display: none;
1834}
1835.ui-page .ui-footer-fixed.ui-fixed-hidden {
1836  display: block
1837}
1838
1839.ui-page-header-fullscreen .ui-fixed-hidden,
1840.ui-page-footer-fullscreen .ui-fixed-hidden {
1841        position: absolute !important;
1842        height: 1px;
1843        width: 1px;
1844        overflow: hidden;
1845        clip: rect(1px,1px,1px,1px);
1846}
1847.ui-header-fixed .ui-btn,
1848.ui-footer-fixed .ui-btn {
1849        z-index: 10;
1850}
1851/* workarounds for other widgets */
1852.ui-android-2x-fixed .ui-li-has-thumb {
1853        -webkit-transform: translate3d(0,0,0);
1854}
1855
1856
1857textarea.ui-input-text.ui-textinput-autogrow {
1858        overflow: hidden;
1859}
1860
1861.ui-textinput-autogrow-resize {
1862        -webkit-transition: height 0.25s;
1863        -o-transition: height 0.25s;
1864        -moz-transition: height 0.25s;
1865        transition: height 0.25s;
1866}
1867
1868
1869/* Hide the native input element */
1870.ui-input-btn input {
1871        position: absolute;
1872        top: 0;
1873        left: 0;
1874        width: 100%;
1875        height: 100%;
1876        padding: 0;
1877        border: 0;
1878        outline: 0;
1879        -webkit-border-radius: inherit;
1880        border-radius: inherit;
1881        -webkit-appearance: none;
1882        -moz-appearance: none;
1883        cursor: pointer;
1884        background: #fff;
1885        background: rgba(255,255,255,0);
1886        filter: Alpha(Opacity=0);
1887        opacity: .1;
1888        font-size: 1px;
1889        text-indent: -9999px;
1890        z-index: 2;
1891}
1892/* Fixes IE/WP filter alpha opacity bugs */
1893.ui-input-btn.ui-state-disabled input {
1894        position: absolute !important;
1895        height: 1px;
1896        width: 1px;
1897        overflow: hidden;
1898        clip: rect(1px,1px,1px,1px);
1899}
1900
1901
1902.ui-checkbox,
1903.ui-radio {
1904        margin: .5em 0;
1905        position: relative;
1906}
1907.ui-checkbox .ui-btn,
1908.ui-radio .ui-btn {
1909        margin: 0;
1910        text-align: left;
1911        white-space: normal; /* Nowrap + ellipsis doesn't work on label. Issue #1419. */
1912        z-index: 2;
1913}
1914.ui-controlgroup .ui-checkbox .ui-btn.ui-focus,
1915.ui-controlgroup .ui-radio .ui-btn.ui-focus {
1916        z-index: 3;
1917}
1918.ui-checkbox .ui-btn-icon-top,
1919.ui-radio .ui-btn-icon-top,
1920.ui-checkbox .ui-btn-icon-bottom,
1921.ui-radio .ui-btn-icon-bottom {
1922        text-align: center;
1923}
1924.ui-controlgroup-horizontal .ui-checkbox .ui-btn:after,
1925.ui-controlgroup-horizontal .ui-radio .ui-btn:after {
1926        content: none;
1927        display: none;
1928}
1929/* Native input positioning */
1930.ui-checkbox input,
1931.ui-radio input {
1932        position: absolute;
1933        left: .466em;
1934        top: 50%;
1935        width: 22px;
1936        height: 22px;
1937        margin: -11px 0 0 0;
1938        outline: 0 !important;
1939        z-index: 1;
1940}
1941.ui-controlgroup-horizontal .ui-checkbox input,
1942.ui-controlgroup-horizontal .ui-radio input {
1943        left: 50%;
1944        margin-left: -9px;
1945}
1946.ui-checkbox input:disabled,
1947.ui-radio input:disabled {
1948        position: absolute !important;
1949        height: 1px;
1950        width: 1px;
1951        overflow: hidden;
1952        clip: rect(1px,1px,1px,1px);
1953}
1954
1955.ui-input-text,
1956.ui-input-search {
1957        margin: .5em 0;
1958        border-width: 1px;
1959        border-style: solid;
1960}
1961.ui-input-text input,
1962.ui-input-search input,
1963textarea.ui-input-text {
1964        padding: .4em;
1965        line-height: 1.4em;
1966        display: block;
1967        width: 100%;
1968        -webkit-box-sizing: border-box;
1969        -moz-box-sizing: border-box;
1970        -ms-box-sizing: border-box;
1971        box-sizing: border-box;
1972        outline: 0;
1973}
1974.ui-input-text input,
1975.ui-input-search input {
1976        margin: 0;
1977        min-height: 2.2em;
1978        text-align: left; /* Opera aligns type="date" right by default */
1979        border: 0;
1980        background: transparent none;
1981        -webkit-appearance: none;
1982        -webkit-border-radius: inherit;
1983        border-radius: inherit;
1984}
1985textarea.ui-input-text {
1986        overflow: auto;
1987        resize: vertical;
1988}
1989.ui-mini .ui-input-text input,
1990.ui-mini .ui-input-search input,
1991.ui-input-text.ui-mini input,
1992.ui-input-search.ui-mini input,
1993.ui-mini textarea.ui-input-text,
1994textarea.ui-mini {
1995        font-size: 14px;
1996}
1997/* Same margin for mini textareas as other mini sized widgets (12.5/14 * 0.5em) */
1998.ui-mini textarea.ui-input-text,
1999textarea.ui-mini {
2000        margin: .446em 0;
2001}
2002.ui-input-has-clear,
2003.ui-input-search {
2004        position: relative;
2005}
2006/* Padding on the div instead of input because of browser spinners etc. */
2007.ui-input-has-clear {
2008        padding-right: 2.375em;
2009}
2010.ui-mini.ui-input-has-clear {
2011        padding-right: 2.923em;
2012}
2013.ui-input-has-clear input {
2014        padding-right: 0;
2015        /* Autofill on Chrome has bg color so we unset corners right as well. */
2016        -webkit-border-top-right-radius: 0;
2017        border-top-right-radius: 0;
2018        -webkit-border-bottom-right-radius: 0;
2019        border-bottom-right-radius: 0;
2020}
2021/* Search icon */
2022.ui-input-search input {
2023        padding-left: 1.75em;
2024}
2025.ui-input-search:after {
2026        position: absolute;
2027        left: .3125em;
2028        top: 50%;
2029        margin-top: -7px;
2030        content: "";
2031        background-position: center center;
2032        background-repeat: no-repeat;
2033        width: 14px;
2034        height: 14px;
2035        filter: Alpha(Opacity=50);
2036        opacity: .5;
2037}
2038.ui-input-search.ui-input-has-clear .ui-btn.ui-input-clear,
2039.ui-input-text.ui-input-has-clear .ui-btn.ui-input-clear {
2040        position: absolute;
2041        right: 0;
2042        top: 50%;
2043        margin: -14px .3125em 0;
2044        border: 0;
2045        background-color: transparent;
2046}
2047.ui-input-search .ui-input-clear-hidden,
2048.ui-input-text .ui-input-clear-hidden {
2049        display: none;
2050}
2051/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
2052.ui-input-text input::-moz-placeholder,
2053.ui-input-search input::-moz-placeholder,
2054textarea.ui-input-text::-moz-placeholder {
2055        color: #aaa;
2056}
2057/* Same for IE10 */
2058.ui-input-text input:-ms-input-placeholder,
2059.ui-input-search input:-ms-input-placeholder,
2060textarea.ui-input-text:-ms-input-placeholder {
2061        color: #aaa;
2062}
2063
2064/* Resolves issue #5131: Width of textinput depends on its type,
2065for Android 4.1 */
2066.ui-input-text input[type=number]::-webkit-outer-spin-button {
2067        margin: 0;
2068}
2069/* Resolves issue #5756: Textinput in IE10 has a default clear button */
2070.ui-input-text input::-ms-clear,
2071.ui-input-search input::-ms-clear {
2072        display: none;
2073}
2074.ui-input-text input:focus,
2075.ui-input-search input:focus {
2076        -webkit-box-shadow: none;
2077        -moz-box-shadow: none;
2078        box-shadow: none;
2079}
2080
2081
2082.ui-flipswitch {
2083        display: inline-block;
2084        vertical-align: middle;
2085        width: 5.875em; /* Override this and padding-left in next rule if you use labels other than "on/off" and need more space */
2086        height: 1.875em;
2087        border-width: 1px;
2088        border-style: solid;
2089        margin: .5em 0;
2090        overflow: hidden;
2091        -webkit-transition-property: padding, width, background-color, color, border-color;
2092        -moz-transition-property: padding, width, background-color, color, border-color;
2093        -o-transition-property: padding, width, background-color, color, border-color;
2094        transition-property: padding, width, background-color, color, border-color;
2095        -webkit-transition-duration: 100ms;
2096        -moz-transition-duration: 100ms;
2097        -o-transition-duration: 100ms;
2098        transition-duration: 100ms;
2099        -webkit-touch-callout: none;
2100        -webkit-user-select: none;
2101        -moz-user-select: none;
2102        -ms-user-select: none;
2103        user-select: none;
2104        cursor: pointer;
2105}
2106.ui-flipswitch.ui-flipswitch-active {
2107        padding-left: 4em;  /* Override this and width in previous rule if you use labels other than "on/off" and need more space */
2108        width: 1.875em;
2109}
2110.ui-flipswitch-input {
2111        position: absolute;
2112        height: 1px;
2113        width: 1px;
2114        margin: -1px;
2115        overflow: hidden;
2116        clip: rect(1px,1px,1px,1px);
2117        border: 0;
2118        outline: 0;
2119        filter: Alpha(Opacity=0);
2120        opacity: 0;
2121}
2122.ui-flipswitch .ui-btn.ui-flipswitch-on,
2123.ui-flipswitch .ui-flipswitch-off {
2124        float: left;
2125        height: 1.75em;
2126        margin: .0625em;
2127        line-height: 1.65em;
2128}
2129.ui-flipswitch .ui-btn.ui-flipswitch-on {
2130        width: 1.75em;
2131        padding: 0;
2132        text-indent: -2.6em; /* Override this to center text if you use a label other than "on" */
2133        text-align: left;
2134        border-width: 1px;
2135        border-style: solid;
2136        -webkit-box-sizing: border-box;
2137        -moz-box-sizing: border-box;
2138        -ms-box-sizing: border-box;
2139        box-sizing: border-box;
2140        border-radius: inherit;
2141        overflow: visible;
2142        color: inherit;
2143        text-shadow: inherit;
2144}
2145.ui-flipswitch .ui-flipswitch-off {
2146        padding: 1px;
2147        text-indent: 1em; /* Override this to center text if you use a label other than "off" */
2148}
2149/* Override field container CSS to prevent the flipswitch from becomming full width */
2150html .ui-field-contain > label + .ui-flipswitch,
2151html .ui-popup .ui-field-contain > label + .ui-flipswitch {
2152        display: inline-block;
2153        width: 5.875em; /* If you override the width for .ui-flipswitch you should repeat the same value here */
2154        -webkit-box-sizing: content-box;
2155        -moz-box-sizing: content-box;
2156        -ms-box-sizing: content-box;
2157        box-sizing: content-box;
2158}
2159.ui-field-contain .ui-flipswitch.ui-flipswitch-active,
2160.ui-popup .ui-field-contain .ui-flipswitch.ui-flipswitch-active {
2161        width: 1.875em;
2162}
2163
2164
2165.ui-rangeslider {
2166        margin: .5em 0;
2167}
2168.ui-rangeslider:before,
2169.ui-rangeslider:after {
2170        content: "";
2171        display: table;
2172}
2173.ui-rangeslider:after {
2174        clear: both;
2175}
2176.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
2177        float: right;
2178}
2179.ui-rangeslider .ui-rangeslider-sliders {
2180        position: relative;
2181        overflow: visible;
2182        height: 30px;
2183        margin: 0 68px;
2184}
2185.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
2186        position: absolute;
2187        top: 6px;
2188        right: 0;
2189        left: 0;
2190        margin: 0;
2191}
2192.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
2193        top: 8px;
2194}
2195.ui-rangeslider .ui-slider-track:first-child .ui-slider-bg {
2196        display: none;
2197}
2198.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
2199        background-color: transparent;
2200        background: none;
2201        border-width: 0;
2202        height: 0;
2203}
2204
2205/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
2206html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
2207        height: 15px;
2208        border-width: 1px;
2209}
2210html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
2211        height: 12px;
2212}
2213
2214/* Hide the second label (the first is moved outside the div) */
2215div.ui-rangeslider label {
2216        position: absolute !important;
2217        height: 1px;
2218        width: 1px;
2219        overflow: hidden;
2220        clip: rect(1px,1px,1px,1px);
2221}
2222.ui-field-contain .ui-rangeslider input.ui-slider-input,
2223.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
2224.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
2225.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
2226        margin-top: 0;
2227        margin-bottom: 0;
2228}
2229
2230
2231.ui-select {
2232        margin-top: .5em;
2233        margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
2234        position: relative;
2235}
2236.ui-select > select {
2237        position: absolute !important;
2238        height: 1px;
2239        width: 1px;
2240        overflow: hidden;
2241        clip: rect(1px,1px,1px,1px);
2242}
2243.ui-select .ui-btn {
2244        margin: 0;
2245        opacity: 1; /* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
2246}
2247.ui-select .ui-btn select {
2248        position: absolute;
2249        top: 0;
2250        left: 0;
2251        width: 100%;
2252        min-height: 1.5em;
2253        min-height: 100%;
2254        height: 3em;
2255        max-height: 100%;
2256        outline: 0;
2257        -webkit-border-radius: inherit;
2258        border-radius: inherit;
2259        -webkit-appearance: none;
2260        -moz-appearance: none;
2261        cursor: pointer;
2262        filter: Alpha(Opacity=0);
2263        opacity: 0;
2264        z-index: 2;
2265}
2266@-moz-document url-prefix() {
2267        .ui-select .ui-btn select {
2268                opacity: 0.0001;
2269        }
2270}
2271/* Display none because of issues with IE/WP's filter alpha opacity */
2272.ui-select .ui-state-disabled select {
2273        display: none;
2274}
2275/* Because we add all classes of the select and option elements to the span... */
2276.ui-select span.ui-state-disabled {
2277        filter: Alpha(Opacity=100);
2278        opacity: 1;
2279}
2280.ui-select .ui-btn.ui-select-nativeonly {
2281        border-radius: 0;
2282        border: 0;
2283}
2284.ui-select .ui-btn.ui-select-nativeonly select {
2285        opacity: 1;
2286        text-indent: 0;
2287        display: block;
2288}
2289/* ui-li-count is styled in the listview CSS. We set padding and offset here because select supports icon position while listview doesn't. */
2290.ui-select .ui-li-has-count.ui-btn {
2291        padding-right: 2.8125em;
2292}
2293.ui-select .ui-li-has-count.ui-btn-icon-right {
2294        padding-right: 4.6875em;
2295}
2296.ui-select .ui-btn-icon-right .ui-li-count {
2297        right: 3.2em;
2298}
2299/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
2300.ui-select .ui-btn > span:not(.ui-li-count) {
2301        display: block;
2302        text-overflow: ellipsis;
2303        overflow: hidden !important;
2304        white-space: nowrap;
2305}
2306
2307.ui-selectmenu.ui-popup {
2308        min-width: 11em;
2309}
2310
2311.ui-selectmenu .ui-dialog-contain {
2312        overflow: hidden;
2313}
2314
2315.ui-selectmenu .ui-header {
2316        margin: 0;
2317        padding: 0;
2318        border-width: 0;
2319}
2320.ui-selectmenu.ui-dialog .ui-header {
2321        z-index: 1;
2322        position: relative;
2323}
2324.ui-selectmenu.ui-popup .ui-header {
2325        -webkit-border-bottom-right-radius: 0;
2326        border-bottom-right-radius: 0;
2327        -webkit-border-bottom-left-radius: 0;
2328        border-bottom-left-radius: 0;
2329}
2330/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button.  this shim's content in there */
2331.ui-selectmenu.ui-popup .ui-header h1:after {
2332        content: '.';
2333        visibility: hidden;
2334}
2335.ui-selectmenu .ui-header .ui-title {
2336        margin: 0 2.875em;
2337}
2338.ui-selectmenu.ui-dialog .ui-content {
2339        overflow: visible;
2340        z-index: 1;
2341}
2342
2343.ui-selectmenu .ui-selectmenu-list {
2344        margin: 0;
2345        -webkit-border-radius: inherit;
2346        border-radius: inherit;
2347}
2348.ui-header:not(.ui-screen-hidden) + .ui-selectmenu-list {
2349        -webkit-border-top-right-radius: 0;
2350        border-top-right-radius: 0;
2351        -webkit-border-top-left-radius: 0;
2352        border-top-left-radius: 0;
2353}
2354.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-btn {
2355        border-top-width: 0;
2356}
2357.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-btn {
2358        border-bottom-width: 0;
2359}
2360
2361.ui-selectmenu .ui-btn.ui-li-divider {
2362        cursor: default;
2363}
2364
2365.ui-selectmenu .ui-selectmenu-placeholder {
2366        display: none;
2367}
2368
2369
2370div.ui-slider {
2371        height: 30px;
2372        margin: .5em 0;
2373        padding: 0;
2374        -ms-touch-action: pan-y pinch-zoom double-tap-zoom;
2375}
2376div.ui-slider:before,
2377div.ui-slider:after {
2378        content: "";
2379        display: table;
2380}
2381div.ui-slider:after {
2382        clear: both;
2383}
2384input.ui-slider-input {
2385        display: block;
2386        float: left;
2387        font-size: 14px;
2388        font-weight: bold;
2389        margin: 0;
2390        padding: 4px;
2391        width: 40px;
2392        height: 20px;
2393        line-height: 20px;
2394        border-width: 1px;
2395        border-style: solid;
2396        outline: 0;
2397        text-align: center;
2398        vertical-align: text-bottom;
2399        -webkit-appearance: none;
2400        -moz-appearance: none;
2401        appearance: none;
2402        -webkit-box-sizing: content-box;
2403        -moz-box-sizing: content-box;
2404        -ms-box-sizing: content-box;
2405        box-sizing: content-box;
2406}
2407.ui-slider-input::-webkit-outer-spin-button,
2408.ui-slider-input::-webkit-inner-spin-button {
2409        -webkit-appearance: none;
2410        margin: 0;
2411}
2412.ui-slider-track {
2413        position: relative;
2414        overflow: visible;
2415        border-width: 1px;
2416        border-style: solid;
2417        height: 15px;
2418        margin: 0 15px 0 68px;
2419        top: 6px;
2420}
2421.ui-slider-track.ui-mini {
2422        height: 12px;
2423        top: 8px;
2424}
2425.ui-slider-track .ui-slider-bg {
2426        height: 100%;
2427}
2428/* High level of specificity to override button margins in grids */
2429.ui-slider-track .ui-btn.ui-slider-handle {
2430        position: absolute;
2431        z-index: 1;
2432        top: 50%;
2433        width: 28px;
2434        height: 28px;
2435        margin: -15px 0 0 -15px;
2436        outline: 0;
2437        padding: 0;
2438}
2439.ui-slider-track.ui-mini .ui-slider-handle {
2440        height: 14px;
2441        width: 14px;
2442        margin: -8px 0 0 -8px;
2443}
2444select.ui-slider-switch {
2445        position: absolute !important;
2446        height: 1px;
2447        width: 1px;
2448        overflow: hidden;
2449        clip: rect(1px,1px,1px,1px);
2450}
2451div.ui-slider-switch {
2452        display: inline-block;
2453        height: 32px;
2454        width: 5.8em;
2455        top: 0;
2456}
2457/* reset the clearfix */
2458div.ui-slider-switch:before,
2459div.ui-slider-switch:after {
2460        display: none;
2461        clear: none;
2462}
2463div.ui-slider-switch.ui-mini {
2464        height: 29px;
2465        top: 0;
2466}
2467.ui-slider-inneroffset {
2468        margin: 0 16px;
2469        position: relative;
2470        z-index: 1;
2471}
2472.ui-slider-switch.ui-mini .ui-slider-inneroffset {
2473        margin: 0 15px 0 14px;
2474}
2475.ui-slider-switch .ui-btn.ui-slider-handle {
2476        margin: 1px 0 0 -15px;
2477}
2478.ui-slider-switch.ui-mini .ui-slider-handle {
2479        width: 25px;
2480        height: 25px;
2481        margin: 1px 0 0 -13px;
2482        padding: 0;
2483}
2484.ui-slider-handle-snapping {
2485        -webkit-transition: left 70ms linear;
2486        -moz-transition: left 70ms linear;
2487        transition: left 70ms linear;
2488}
2489.ui-slider-switch .ui-slider-label {
2490        position: absolute;
2491        text-align: center;
2492        width: 100%;
2493        overflow: hidden;
2494        font-size: 16px;
2495        top: 0;
2496        line-height: 2;
2497        min-height: 100%;
2498        white-space: nowrap;
2499        cursor: pointer;
2500}
2501.ui-slider-switch.ui-mini .ui-slider-label {
2502        font-size: 14px;
2503}
2504.ui-slider-switch .ui-slider-label-a {
2505        z-index: 1;
2506        left: 0;
2507        text-indent: -1.5em;
2508}
2509.ui-slider-switch .ui-slider-label-b {
2510        z-index: 0;
2511        right: 0;
2512        text-indent: 1.5em;
2513}
2514/* The corner radii for ui-slider-switch/track can be specified in theme CSS. The bg and handle inherits. */
2515.ui-slider-track .ui-slider-bg,
2516.ui-slider-switch .ui-slider-label,
2517.ui-slider-switch .ui-slider-inneroffset,
2518.ui-slider-handle {
2519        -webkit-border-radius: inherit;
2520        border-radius: inherit;
2521}
2522.ui-field-contain div.ui-slider-switch {
2523        margin: 0;
2524}
2525/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
2526.ui-field-contain div.ui-slider-switch,
2527.ui-field-contain.ui-hide-label div.ui-slider-switch,
2528html .ui-popup .ui-field-contain div.ui-slider-switch {
2529        display: inline-block;
2530        width: 5.8em;
2531}
2532
2533
2534/* slider tooltip
2535-----------------------------------------------------------------------------------------------------------*/
2536
2537.ui-slider-popup {
2538        width: 64px;
2539        height: 64px;
2540        font-size: 36px;
2541        padding-top: 14px;
2542        opacity: 0.8;
2543}
2544
2545.ui-slider-popup {
2546        position: absolute !important;
2547        text-align: center;
2548        z-index: 100;
2549}
2550
2551.ui-slider-track .ui-btn.ui-slider-handle {
2552        font-size: .9em;
2553        line-height: 30px;
2554}
2555
2556
2557.ui-listview,
2558.ui-listview > li {
2559        margin: 0;
2560        padding: 0;
2561        list-style: none;
2562}
2563.ui-content .ui-listview,
2564.ui-panel-inner > .ui-listview {
2565        margin: -1em;
2566}
2567.ui-content .ui-listview-inset,
2568.ui-panel-inner > .ui-listview-inset {
2569        margin: 1em 0;
2570}
2571.ui-collapsible-content > .ui-listview {
2572        margin: -.5em -1em;
2573}
2574.ui-collapsible-content > .ui-listview-inset {
2575        margin: .5em 0;
2576}
2577.ui-listview > li {
2578        display: block;
2579        position: relative;
2580        overflow: visible;
2581}
2582.ui-listview > .ui-li-static,
2583.ui-listview > .ui-li-divider,
2584.ui-listview > li > a.ui-btn {
2585        margin: 0;
2586        display: block;
2587        position: relative;
2588        text-align: left;
2589        text-overflow: ellipsis;
2590        overflow: hidden;
2591        white-space: nowrap;
2592}
2593.ui-listview > li > .ui-btn:focus {
2594        z-index: 1;
2595}
2596.ui-listview > .ui-li-static,
2597.ui-listview > .ui-li-divider,
2598.ui-listview > li > a.ui-btn {
2599        border-width: 1px 0 0 0;
2600        border-style: solid;
2601}
2602.ui-listview-inset > .ui-li-static,
2603.ui-listview-inset > .ui-li-divider,
2604.ui-listview-inset > li > a.ui-btn {
2605        border-right-width: 1px;
2606        border-left-width: 1px;
2607}
2608.ui-listview > .ui-li-static.ui-last-child,
2609.ui-listview > .ui-li-divider.ui-last-child,
2610.ui-listview > li.ui-last-child > a.ui-btn {
2611        border-bottom-width: 1px;
2612}
2613.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
2614.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > li.ui-first-child > a.ui-btn {
2615        border-top-width: 0;
2616}
2617.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child,
2618.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
2619        border-bottom-width: 0;
2620}
2621.ui-listview > li.ui-first-child,
2622.ui-listview > li.ui-first-child > a.ui-btn {
2623        -webkit-border-top-right-radius: inherit;       
2624        border-top-right-radius: inherit;
2625        -webkit-border-top-left-radius: inherit;
2626        border-top-left-radius: inherit;
2627}
2628.ui-listview > li.ui-last-child,
2629.ui-listview > li.ui-last-child > a.ui-btn {
2630        -webkit-border-bottom-right-radius: inherit;
2631        border-bottom-right-radius: inherit;
2632        -webkit-border-bottom-left-radius: inherit;
2633        border-bottom-left-radius: inherit;
2634}
2635.ui-listview > li.ui-li-has-alt > a.ui-btn {
2636        -webkit-border-top-right-radius: 0;
2637        border-top-right-radius: 0;
2638        -webkit-border-bottom-right-radius: 0;
2639        border-bottom-right-radius: 0;
2640}
2641.ui-listview > li.ui-first-child > a.ui-btn + a.ui-btn {
2642        -webkit-border-top-left-radius: 0;     
2643        border-top-left-radius: 0;
2644        -webkit-border-top-right-radius: inherit;
2645        border-top-right-radius: inherit;
2646}
2647.ui-listview > li.ui-last-child > a.ui-btn + a.ui-btn {
2648        -webkit-border-bottom-left-radius: 0;
2649        border-bottom-left-radius: 0;
2650        -webkit-border-bottom-right-radius: inherit;
2651        border-bottom-right-radius: inherit;
2652}
2653.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
2654        -webkit-border-top-left-radius: inherit;
2655        border-top-left-radius: inherit;       
2656}
2657.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
2658        -webkit-border-bottom-left-radius: inherit;
2659        border-bottom-left-radius: inherit;     
2660}
2661.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
2662        -webkit-border-radius: inherit;
2663        border-radius: inherit;
2664}
2665.ui-listview > .ui-li-static {
2666        padding: .7em 1em;
2667}
2668.ui-listview > .ui-li-divider {
2669        padding: .5em 1.143em;
2670        font-size: 14px;
2671        font-weight: bold;
2672        cursor: default;
2673        outline: 0; /* Dividers in custom selectmenus have tabindex */
2674}
2675.ui-listview > .ui-li-has-count > .ui-btn,
2676.ui-listview > .ui-li-static.ui-li-has-count,
2677.ui-listview > .ui-li-divider.ui-li-has-count {
2678        padding-right: 2.8125em;
2679}
2680.ui-listview > .ui-li-has-count > .ui-btn-icon-right {
2681        padding-right: 4.6875em;
2682}
2683.ui-listview > .ui-li-has-thumb > .ui-btn,
2684.ui-listview > .ui-li-static.ui-li-has-thumb {
2685        min-height: 3.625em;
2686        padding-left: 6.25em;
2687}
2688/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
2689.ui-listview > .ui-li-has-icon > .ui-btn,
2690.ui-listview > .ui-li-static.ui-li-has-icon {
2691        min-height: 1.25em;
2692        padding-left: 2.5em;
2693}
2694/* Used by both listview and custom multiple select button */
2695.ui-li-count {
2696        position: absolute;
2697        font-size: 12.5px;
2698        font-weight: bold;
2699        text-align: center;
2700        border-width: 1px;
2701        border-style: solid;
2702        padding: 0 .48em;
2703        line-height: 1.6em;
2704        min-height: 1.6em;
2705        min-width: .64em;
2706        right: .8em;
2707        top: 50%;
2708        margin-top: -.88em;
2709}
2710.ui-listview .ui-btn-icon-right .ui-li-count {
2711        right: 3.2em;
2712}
2713.ui-listview .ui-li-has-thumb > img:first-child,
2714.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child,
2715.ui-listview .ui-li-has-thumb .ui-li-thumb {
2716        position: absolute;
2717        left: 0;
2718        top: 0;
2719        max-height: 5em;
2720        max-width: 5em;
2721}
2722/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
2723.ui-listview > .ui-li-has-icon > img:first-child,
2724.ui-listview > .ui-li-has-icon > .ui-btn > img:first-child {
2725        position: absolute;
2726        left: .625em;
2727        top: .9em;
2728        max-height: 1em;
2729        max-width: 1em;
2730}
2731.ui-listview > li h1,
2732.ui-listview > li h2,
2733.ui-listview > li h3,
2734.ui-listview > li h4,
2735.ui-listview > li h5,
2736.ui-listview > li h6 {
2737        font-size: 1em;
2738        font-weight: bold;
2739        display: block;
2740        margin: .45em 0;
2741        text-overflow: ellipsis;
2742        overflow: hidden;
2743        white-space: nowrap;
2744}
2745.ui-listview > li p {
2746        font-size: .75em;
2747        font-weight: normal;
2748        display: block;
2749        margin: .6em 0;
2750        text-overflow: ellipsis;
2751        overflow: hidden;
2752        white-space: nowrap;
2753}
2754.ui-listview .ui-li-aside {
2755        position: absolute;
2756        top: 1em;
2757        right: 3.333em;
2758        margin: 0;
2759        text-align: right;
2760}
2761.ui-listview > li.ui-li-has-alt > .ui-btn {
2762        margin-right: 2.5em;
2763        border-right-width: 0;
2764}
2765.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn {
2766        position: absolute;
2767        width: 2.5em;
2768        height: 100%;
2769        min-height: auto;
2770        -webkit-box-sizing: border-box;
2771        -moz-box-sizing: border-box;
2772        box-sizing: border-box;
2773        border-left-width: 1px;
2774        top: 0;
2775        right: 0;
2776        margin: 0;
2777        padding: 0;
2778        z-index: 2;
2779}
2780.ui-listview-inset > li.ui-li-has-alt > .ui-btn + .ui-btn {
2781        border-right-width: 1px;
2782}
2783.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn:focus {
2784        z-index: 3;
2785}
2786ol.ui-listview,
2787ol.ui-listview > .ui-li-divider {
2788        counter-reset: listnumbering;
2789}
2790ol.ui-listview > li > .ui-btn,
2791ol.ui-listview > li.ui-li-static {
2792        vertical-align: middle;
2793}
2794ol.ui-listview > li > .ui-btn:first-child:before,
2795ol.ui-listview > li.ui-li-static:before,
2796ol.ui-listview > li.ui-field-contain > label:before,
2797ol.ui-listview > li.ui-field-contain > .ui-controlgroup-label:before {
2798        display: inline-block;
2799        font-size: .9em;
2800        font-weight: normal;
2801        padding-right: .3em;
2802        min-width: 1.4em;
2803        line-height: 1.5;
2804        vertical-align: middle;
2805        counter-increment: listnumbering;
2806        content: counter(listnumbering) ".";
2807}
2808ol.ui-listview > li.ui-field-contain:before {
2809        content: none;
2810        display: none;
2811}
2812ol.ui-listview > li h1:first-child,
2813ol.ui-listview > li h2:first-child,
2814ol.ui-listview > li h3:first-child,
2815ol.ui-listview > li h4:first-child,
2816ol.ui-listview > li h5:first-child,
2817ol.ui-listview > li h6:first-child,
2818ol.ui-listview > li p:first-child,
2819ol.ui-listview > li img:first-child + * {
2820        display: inline-block;
2821        vertical-align: middle;
2822}
2823ol.ui-listview > li h1:first-child ~ *,
2824ol.ui-listview > li h2:first-child ~ *,
2825ol.ui-listview > li h3:first-child ~ *,
2826ol.ui-listview > li h4:first-child ~ *,
2827ol.ui-listview > li h5:first-child ~ *,
2828ol.ui-listview > li h6:first-child ~ *,
2829ol.ui-listview > li p:first-child ~ *,
2830ol.ui-listview > li img:first-child + * ~ * {
2831        margin-top: 0;
2832        text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
2833}
2834
2835
2836.ui-navbar {
2837        max-width: 100%;
2838}
2839.ui-navbar ul:before,
2840.ui-navbar ul:after {
2841        content: "";
2842        display: table;
2843}
2844.ui-navbar ul:after {
2845        clear: both;
2846}
2847.ui-navbar ul {
2848        list-style: none;
2849        margin: 0;
2850        padding: 0;
2851        position: relative;
2852        display: block;
2853        border: 0;
2854        max-width: 100%;
2855        overflow: visible;
2856}
2857.ui-navbar li .ui-btn {
2858        font-size: 12.5px;
2859        display: block;
2860        margin: 0;
2861        border-right-width: 0;
2862}
2863.ui-navbar .ui-btn:focus {
2864        z-index: 1;
2865}
2866
2867/* fixes gaps caused by subpixel problem */
2868.ui-navbar li:last-child .ui-btn {
2869        margin-right: -4px;
2870}
2871.ui-navbar li:last-child .ui-btn:after {
2872        margin-right: 4px;
2873}
2874
2875.ui-content .ui-navbar li:last-child .ui-btn,
2876.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn {
2877        border-right-width: 1px;
2878        margin-right: 0;
2879}
2880.ui-content .ui-navbar li:last-child .ui-btn:after,
2881.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-btn:after {
2882        margin-right: 0;
2883}
2884.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn {
2885        border-right-width: 1px;
2886        margin-right: -1px;
2887}
2888.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-btn:after {
2889        margin-right: 1px;
2890}
2891
2892.ui-navbar .ui-grid-duo .ui-btn {
2893        border-top-width: 0;
2894}
2895.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
2896.ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
2897        border-top-width: 1px;
2898}
2899.ui-header .ui-navbar .ui-btn,
2900.ui-footer .ui-navbar .ui-btn {
2901        border-top-width: 0;
2902        border-bottom-width: 0;
2903}
2904.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
2905.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
2906.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
2907.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
2908        border-top-width: 0;
2909}
2910.ui-header .ui-title ~ .ui-navbar .ui-btn,
2911.ui-footer .ui-title ~ .ui-navbar .ui-btn,
2912.ui-header .ui-navbar .ui-grid-duo .ui-btn,
2913.ui-footer .ui-navbar .ui-grid-duo .ui-btn,
2914.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
2915.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-btn,
2916.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn,
2917.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-btn {
2918        border-top-width: 1px;
2919}
2920
2921
2922/* Panel */
2923.ui-panel {
2924        width: 17em;
2925        min-height: 100%;
2926        max-height: none;
2927        border-width: 0;
2928        position: absolute;
2929        top: 0;
2930        display: block;
2931}
2932.ui-panel-closed {
2933        width: 0;
2934        max-height: 100%;
2935        overflow: hidden;
2936        visibility: hidden;
2937}
2938.ui-panel-fixed {
2939        position: fixed;
2940        bottom: -1px; /* Fixes gap on Chrome for Android */
2941        padding-bottom: 1px;
2942}
2943.ui-panel-display-reveal {
2944        z-index: 1;
2945}
2946.ui-panel-display-push {
2947        z-index: 999;
2948}
2949.ui-panel-display-overlay {
2950        z-index: 1001; /* Fixed toolbars have z-index 1000 */
2951}
2952.ui-panel-inner {
2953        padding: 1em;
2954}
2955
2956/* Container, page and wrapper */
2957.ui-panel-page-container {
2958        overflow-x: visible;
2959}
2960.ui-panel-page-container-themed .ui-page-active {
2961        background: none;
2962}
2963.ui-panel-wrapper {
2964        position: relative;
2965        min-height: inherit;
2966        border: 0;
2967        overflow-x: hidden;
2968        z-index: 999;
2969}
2970
2971/* Fixed toolbars */
2972.ui-panel-fixed-toolbar {
2973        overflow-x: hidden;
2974}
2975
2976/* Dismiss */
2977.ui-panel-dismiss {
2978        position: absolute;
2979        top: 0;
2980        left: 0;
2981        right: 0;
2982        height: 100%;
2983        z-index: 1002;
2984        display: none;
2985}
2986.ui-panel-dismiss-open {
2987        display: block;
2988}
2989
2990/* Animate class is added to panel, wrapper and fixed toolbars */
2991.ui-panel-animate {
2992        -webkit-transition: -webkit-transform 300ms ease;
2993        -webkit-transition-duration: 300ms;
2994        -moz-transition: -moz-transform 300ms ease;
2995        transition: transform 300ms ease;
2996}
2997
2998/* Fix for Windows Phone issue #6349: unset the transition for transforms in case of fixed toolbars. */
2999@media screen and ( max-device-width: 768px ) {
3000        .ui-page-header-fixed .ui-panel-animate.ui-panel-wrapper,
3001        .ui-page-footer-fixed .ui-panel-animate.ui-panel-wrapper,
3002        .ui-panel-animate.ui-panel-fixed-toolbar {
3003                -ms-transition: none;
3004        }
3005        /* We need a transitionend event ... */
3006        .ui-panel-animate.ui-panel-fixed-toolbar {
3007                -ms-transition: -ms-transform 1ms;
3008                -ms-transform: rotate(0deg);
3009        }
3010}
3011
3012/* Hardware acceleration for smoother transitions on WebKit browsers */
3013.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) {
3014        -webkit-backface-visibility: hidden;
3015        -webkit-transform: translate3d(0,0,0);
3016}
3017
3018/* Panel positioning (for overlay and push) */
3019/* Panel left closed */
3020.ui-panel-position-left {
3021        left: -17em;
3022}
3023/* Panel left closed animated */
3024.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
3025.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
3026        left: 0;
3027        -webkit-transform: translate3d(-17em,0,0);
3028        -moz-transform: translate3d(-17em,0,0);
3029        transform: translate3d(-17em,0,0);
3030}
3031/* Panel left open */
3032.ui-panel-position-left.ui-panel-display-reveal, /* Unset "panel left closed" for reveal */
3033.ui-panel-open.ui-panel-position-left {
3034        left: 0;
3035}
3036/* Panel left open animated */
3037.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
3038.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
3039        -webkit-transform: translate3d(0,0,0);
3040        transform: translate3d(0,0,0);
3041        -moz-transform: none;
3042}
3043/* Panel right closed */
3044.ui-panel-position-right {
3045        right: -17em;
3046}
3047/* Panel right closed animated */
3048.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
3049.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
3050        right: 0;
3051        -webkit-transform: translate3d(17em,0,0);
3052        -moz-transform: translate3d(17em,0,0);
3053        transform: translate3d(17em,0,0);
3054}
3055/* Panel right open */
3056.ui-panel-position-right.ui-panel-display-reveal, /* Unset "panel right closed" for reveal */
3057.ui-panel-position-right.ui-panel-open {
3058        right: 0;
3059}
3060/* Panel right open animated */
3061.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay,
3062.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
3063        -webkit-transform: translate3d(0,0,0);
3064        transform: translate3d(0,0,0);
3065        -moz-transform: none;
3066}
3067
3068/* Wrapper and fixed toolbars positioning (for reveal and push) */
3069/* Panel left open */
3070.ui-panel-page-content-position-left {
3071        left: 17em;
3072        right: -17em;
3073}
3074/* Panel left open animated */
3075.ui-panel-animate.ui-panel-page-content-position-left {
3076        left: 0;
3077        right: 0;
3078        -webkit-transform: translate3d(17em,0,0);
3079        -moz-transform: translate3d(17em,0,0);
3080        transform: translate3d(17em,0,0);
3081}
3082/* Panel right open */
3083.ui-panel-page-content-position-right {
3084        left: -17em;
3085        right: 17em;
3086}
3087/* Panel right open animated */
3088.ui-panel-animate.ui-panel-page-content-position-right {
3089        left: 0;
3090        right: 0;
3091        -webkit-transform: translate3d(-17em,0,0);
3092        -moz-transform: translate3d(-17em,0,0);
3093        transform: translate3d(-17em,0,0);
3094}
3095
3096/* Dismiss model open */
3097.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
3098        left: 17em;
3099}
3100.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
3101        right: 17em;
3102}
3103
3104/* Shadows and borders */
3105.ui-panel-display-reveal {
3106        -webkit-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
3107        -moz-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
3108        box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
3109}
3110.ui-panel-position-right.ui-panel-display-reveal {
3111        -webkit-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
3112        -moz-box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
3113        box-shadow: inset 5px 0 5px rgba(0,0,0,.15);
3114}
3115.ui-panel-display-overlay {
3116        -webkit-box-shadow: 5px 0 5px rgba(0,0,0,.15);
3117        -moz-box-shadow: 5px 0 5px rgba(0,0,0,.15);
3118        box-shadow: 5px 0 5px rgba(0,0,0,.15);
3119}
3120.ui-panel-position-right.ui-panel-display-overlay {
3121        -webkit-box-shadow: -5px 0 5px rgba(0,0,0,.15);
3122        -moz-box-shadow: -5px 0 5px rgba(0,0,0,.15);
3123        box-shadow: -5px 0 5px rgba(0,0,0,.15);
3124}
3125.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
3126        border-right-width: 1px;
3127        margin-right: -1px;
3128}
3129.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
3130        margin-left: 1px;
3131        width: auto;
3132}
3133.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
3134        border-left-width: 1px;
3135        margin-left: -1px;
3136}
3137.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
3138        margin-right: 1px;
3139        width: auto;
3140}
3141
3142/* Responsive: wrap on wide viewports once open */
3143@media (min-width:55em) {
3144        .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left {
3145                margin-right: 17em;
3146        }
3147        .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
3148                margin-left: 17em;
3149        }
3150        .ui-responsive-panel .ui-panel-page-content-open {
3151                width: auto;   
3152        }
3153        .ui-responsive-panel .ui-panel-dismiss-display-push,
3154        .ui-responsive-panel.ui-page-active ~ .ui-panel-dismiss-display-push {
3155                display: none;
3156        }
3157}
3158
3159
3160.ui-popup-open .ui-header-fixed,
3161.ui-popup-open .ui-footer-fixed {
3162        position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
3163}
3164.ui-popup-screen {
3165        background-image: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
3166        top: 0;
3167        left: 0;
3168        right: 0;
3169        bottom: 1px;
3170        position: absolute;
3171        filter: Alpha(Opacity=0);
3172        opacity: 0;
3173        z-index: 1099;
3174}
3175.ui-popup-screen.in {
3176        opacity: 0.5;
3177        filter: Alpha(Opacity=50);
3178}
3179.ui-popup-screen.out {
3180        opacity: 0;
3181        filter: Alpha(Opacity=0);
3182}
3183.ui-popup-container {
3184        z-index: 1100;
3185        display: inline-block;
3186        position: absolute;
3187        padding: 0;
3188        outline: 0;
3189}
3190.ui-popup {
3191        position: relative;
3192}
3193.ui-popup.ui-body-inherit {
3194        border-width: 1px;
3195        border-style: solid;
3196}
3197.ui-popup-hidden {
3198        left: 0;
3199        top: 0;
3200        position: absolute !important;
3201        visibility: hidden;
3202}
3203.ui-popup-truncate {
3204        height: 1px;
3205        width: 1px;
3206        margin: -1px;
3207        overflow: hidden;
3208        clip: rect(1px,1px,1px,1px);
3209}
3210.ui-popup.ui-content,
3211.ui-popup .ui-content {
3212        overflow: visible;
3213}
3214.ui-popup > .ui-header {
3215        border-top-width: 0;
3216}
3217.ui-popup > .ui-footer {
3218        border-bottom-width: 0;
3219}
3220.ui-popup > p,
3221.ui-popup > h1,
3222.ui-popup > h2,
3223.ui-popup > h3,
3224.ui-popup > h4,
3225.ui-popup > h5,
3226.ui-popup > h6 {
3227        margin: .5em .4375em;
3228}
3229.ui-popup > span {
3230        display: block;
3231        margin: .5em .4375em;
3232}
3233.ui-popup-container .ui-content > p,
3234.ui-popup-container .ui-content > h1,
3235.ui-popup-container .ui-content > h2,
3236.ui-popup-container .ui-content > h3,
3237.ui-popup-container .ui-content > h4,
3238.ui-popup-container .ui-content > h5,
3239.ui-popup-container .ui-content > h6 {
3240        margin: .5em 0;
3241}
3242.ui-popup-container .ui-content > span {
3243        margin: 0;
3244}
3245.ui-popup-container .ui-content > p:first-child,
3246.ui-popup-container .ui-content > h1:first-child,
3247.ui-popup-container .ui-content > h2:first-child,
3248.ui-popup-container .ui-content > h3:first-child,
3249.ui-popup-container .ui-content > h4:first-child,
3250.ui-popup-container .ui-content > h5:first-child,
3251.ui-popup-container .ui-content > h6:first-child {
3252        margin-top: 0;
3253}
3254.ui-popup-container .ui-content > p:last-child,
3255.ui-popup-container .ui-content > h1:last-child,
3256.ui-popup-container .ui-content > h2:last-child,
3257.ui-popup-container .ui-content > h3:last-child,
3258.ui-popup-container .ui-content > h4:last-child,
3259.ui-popup-container .ui-content > h5:last-child,
3260.ui-popup-container .ui-content > h6:last-child {
3261        margin-bottom: 0;
3262}
3263.ui-popup > img {
3264        max-width: 100%;
3265        max-height: 100%;
3266        vertical-align: middle;
3267}
3268.ui-popup:not(.ui-content) > img:only-child,
3269.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
3270.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
3271        -webkit-border-radius: inherit;
3272        border-radius: inherit;
3273}
3274.ui-popup iframe {
3275        vertical-align: middle;
3276}
3277.ui-popup > .ui-btn-left,
3278.ui-popup > .ui-btn-right {
3279        position: absolute;
3280        top: -11px;
3281        margin: 0;
3282        z-index: 1101;
3283}
3284.ui-popup > .ui-btn-left {
3285        left: -11px;
3286}
3287.ui-popup > .ui-btn-right {
3288        right: -11px;
3289}
3290
3291
3292@-webkit-keyframes fadein {
3293    from { opacity: 0; }
3294    to { opacity: 1; }
3295}
3296@-moz-keyframes fadein {
3297    from { opacity: 0; }
3298    to { opacity: 1; }
3299}
3300@keyframes fadein {
3301    from { opacity: 0; }
3302    to { opacity: 1; }
3303}
3304
3305@-webkit-keyframes fadeout {
3306    from { opacity: 1; }
3307    to { opacity: 0; }
3308}
3309@-moz-keyframes fadeout {
3310    from { opacity: 1; }
3311    to { opacity: 0; }
3312}
3313@keyframes fadeout {
3314    from { opacity: 1; }
3315    to { opacity: 0; }
3316}
3317
3318.fade.out {
3319        opacity: 0;
3320        -webkit-animation-duration: 125ms;
3321        -webkit-animation-name: fadeout;
3322        -moz-animation-duration: 125ms;
3323        -moz-animation-name: fadeout;
3324        animation-duration: 125ms;
3325        animation-name: fadeout;
3326}
3327
3328.fade.in {
3329        opacity: 1;
3330        -webkit-animation-duration: 225ms;
3331        -webkit-animation-name: fadein;
3332        -moz-animation-duration: 225ms;
3333        -moz-animation-name: fadein;
3334        animation-duration: 225ms;
3335        animation-name: fadein;
3336}
3337
3338
3339/* Dimensions related to the popup arrow
3340-----------------------------------------------------------------------------------------------------------*/
3341/* desired triangle height: 10px */
3342
3343/**
3344 * guide for the arrow - its width, height, and offset are theme-dependent and
3345 * should be expessed as left, right, top, bottom, so that the element bearing
3346 * such a class becomes stretched inside its parent position: relative element.
3347 * The left/top/right/bottom specified below should reflect the corresponding
3348 * border radii and so it leaves room for the shadow:
3349 *     ..--------------------..
3350 *   ."        ^ top           ".
3351 *  /          v                 \
3352 * |     +------------------+     |
3353 * |     |                  |     |
3354 * | left|                  |right|
3355 * |<--->|                  |<--->|
3356 * |     +------------------+     |
3357 *  \          ^                 /
3358 *   `.        v bottom        .'
3359 *     ""--------------------""
3360 * The idea is that the top/left of the arrow container box does not move to a
3361 * coordinate smaller than the top/left of the guide and the right/bottom of
3362 * the arrow container box does not move to a coordinate larger than the
3363 * bottom/right of the guide. This will help us avoid the following situation:
3364 *        ..--------------------..
3365 *      ."        ^ top           ".
3366 *   /|/          v                 \
3367 *  / |     +------------------+     |
3368 *  \ |     |                  |     |
3369 *   \| left|                  |right|
3370 *    |<--->|                  |<--->|
3371 *    |     +------------------+     |
3372 *     \          ^                 /
3373 *      `.        v bottom        .'
3374 *        ""--------------------""
3375 * The arrow should not receive a top/left coordinate such that it is too close
3376 * to one of the corners, because then at first the shadow of the arrow and,
3377 * given a coordinate even closer to the corner, even the body of the arrow will
3378 * "stick out" of the corner of the popup. The guide provides a hint to the
3379 * arrow positioning code as to which range of values is acceptable for the
3380 * arrow container's top/left coordinate.
3381 **/
3382
3383.ui-popup-arrow-container {
3384        width: 20px;
3385        height: 20px;
3386}
3387
3388/* aside from the "infinities" (-1000,2000), triangle height is used */
3389.ui-popup-arrow-container.ui-popup-arrow-l {
3390        left: -10px;
3391        clip: rect(-1000px,10px,2000px,-1000px);
3392}
3393
3394.ui-popup-arrow-container.ui-popup-arrow-t {
3395        top: -10px;
3396        clip: rect(-1000px,2000px,10px,-1000px);
3397}
3398
3399.ui-popup-arrow-container.ui-popup-arrow-r {
3400        right: -10px;
3401        clip: rect(-1000px,2000px,2000px,10px);
3402}
3403
3404.ui-popup-arrow-container.ui-popup-arrow-b {
3405        bottom: -10px;
3406        clip: rect(10px,2000px,1000px,-1000px);
3407}
3408
3409/**
3410 * For each side, the arrow is twice the desired size and its corner is aligned
3411 * with the edge of the container:
3412 *                                           
3413 *           /\         /\                +----+       /\
3414 *          /  \       /  \               | /\ |top   /  \
3415 *      +----+  \     /  +----+       +-->|/  \|     /    \
3416 *  left| /  |   \   /   |  \ |right  |   |    |    /      \
3417 *      |/   |    \ /    |   \|       |  /|    |\  /        \
3418 *      |\   |    / \    |   /|       | / +----+ \ \ +----+ /
3419 *      | \  |   /   \   |  / |       | \        /  \|    |/
3420 *      +----+  /     \  +----+       |  \      /    |    |
3421 *       ^  \  /       \  /  ^        |   \    /  +->|\  /|
3422 *       |   \/         \/   |        |    \  /   |  | \/ |bottom
3423 *       |                   |        |     \/    |  +----+
3424 *       +-------------------+--------+-----------+
3425 *                           |
3426 *                    arrow container
3427 *                     (clips arrow)
3428 **/
3429
3430.ui-popup-arrow-container .ui-popup-arrow {
3431        /* (4*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
3432        width: 28.284271247px;
3433        height: 28.284271247px;
3434        border-width: 1px;
3435        border-style: solid;
3436}
3437
3438.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow {
3439        left: -4.142135623px;
3440        top: 5.857864376px;
3441}
3442
3443.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow {
3444        left: -4.142135623px;
3445        top: -14.142135623px;
3446}
3447
3448.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow {
3449        left: 5.857864376px;
3450        top: -4.142135623px;
3451}
3452
3453.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow {
3454        left: -14.142135623px;
3455        top: -4.142135623px;
3456}
3457
3458/* Fix rotation center for oldIE - see http://www.useragentman.com/IETransformsTranslator/ */
3459.ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow {
3460    margin-left: -5.857864376269049px;
3461    margin-top: -7.0710678118654755px;
3462}
3463.ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow {
3464    margin-left: -5.857864376269049px;
3465    margin-top: -4.142135623730951px;
3466}
3467 
3468.ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow {
3469    margin-left: -7.0710678118654755px;
3470    margin-top: -5.857864376269049px;
3471}
3472.ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow {
3473    margin-left: -4.142135623730951px;
3474    margin-top: -5.857864376269049px;
3475}
3476
3477/* structure */
3478.ui-popup > .ui-popup-arrow-guide {
3479        position: absolute;
3480        left: 0;
3481        right: 0;
3482        top: 0;
3483        bottom: 0;
3484        visibility: hidden;
3485}
3486
3487.ui-popup-arrow-container {
3488        position: absolute;
3489}
3490
3491.ui-popup-arrow {
3492        -webkit-transform: rotate(45deg);
3493        -moz-transform: rotate(45deg);
3494        -ms-transform: rotate(45deg);
3495        transform: rotate(45deg);
3496        position: absolute;
3497        overflow: hidden;
3498        box-sizing: border-box;
3499}
3500
3501.ui-popup-arrow-container.ie .ui-popup-arrow {
3502        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
3503        filter: progid:DXImageTransform.Microsoft.Matrix(
3504                M11=0.7071067811865474,
3505                M12=-0.7071067811865477,
3506                M21=0.7071067811865477,
3507                M22=0.7071067811865474,
3508                SizingMethod='auto expand');
3509}
3510
3511
3512.ui-table {
3513        border: 0;
3514        border-collapse: collapse;
3515        padding: 0;
3516        width: 100%;
3517}
3518.ui-table th,
3519.ui-table td {
3520        line-height: 1.5em;
3521        text-align: left;
3522        padding: .4em .5em;
3523        vertical-align:top;
3524}
3525.ui-table th .ui-btn,
3526.ui-table td .ui-btn {
3527        line-height: normal;
3528}
3529.ui-table th {
3530        font-weight: bold;
3531}
3532.ui-table caption {
3533        text-align: left;
3534        margin-bottom: 1.4em;
3535        opacity: .5;
3536}
3537
3538
3539/*
3540 Styles for the table columntoggle mode
3541*/
3542
3543.ui-table-columntoggle-btn {
3544        float: right;
3545        margin-bottom: .8em;
3546}
3547/* Remove top/bottom margins around the fieldcontain on check list */
3548.ui-table-columntoggle-popup fieldset {
3549        margin:0;
3550}
3551
3552.ui-table-columntoggle {
3553        clear: both;
3554}
3555
3556/* Hide all prioritized columns by default */
3557@media only all {
3558        th.ui-table-priority-6,
3559        td.ui-table-priority-6,
3560        th.ui-table-priority-5,
3561        td.ui-table-priority-5,
3562        th.ui-table-priority-4,
3563        td.ui-table-priority-4,
3564        th.ui-table-priority-3,
3565        td.ui-table-priority-3,
3566        th.ui-table-priority-2,
3567        td.ui-table-priority-2,
3568        th.ui-table-priority-1,
3569        td.ui-table-priority-1 {
3570                display: none;
3571        }
3572}
3573
3574/* Preset breakpoints if ".ui-responsive" class added to table */
3575
3576/* Show priority 1 at 320px (20em x 16px) */
3577@media screen and (min-width: 20em) {
3578        .ui-table-columntoggle.ui-responsive th.ui-table-priority-1,
3579        .ui-table-columntoggle.ui-responsive td.ui-table-priority-1 {
3580                display: table-cell;
3581        }
3582}
3583/* Show priority 2 at 480px (30em x 16px) */
3584@media screen and (min-width: 30em) {
3585        .ui-table-columntoggle.ui-responsive th.ui-table-priority-2,
3586        .ui-table-columntoggle.ui-responsive td.ui-table-priority-2 {
3587                display: table-cell;
3588        }
3589}
3590/* Show priority 3 at 640px (40em x 16px) */
3591@media screen and (min-width: 40em) {
3592        .ui-table-columntoggle.ui-responsive th.ui-table-priority-3,
3593        .ui-table-columntoggle.ui-responsive td.ui-table-priority-3 {
3594                display: table-cell;
3595        }
3596}
3597/* Show priority 4 at 800px (50em x 16px) */
3598@media screen and (min-width: 50em) {
3599        .ui-table-columntoggle.ui-responsive th.ui-table-priority-4,
3600        .ui-table-columntoggle.ui-responsive td.ui-table-priority-4 {
3601                display: table-cell;
3602        }
3603}
3604/* Show priority 5 at 960px (60em x 16px) */
3605@media screen and (min-width: 60em) {
3606        .ui-table-columntoggle.ui-responsive th.ui-table-priority-5,
3607        .ui-table-columntoggle.ui-responsive td.ui-table-priority-5 {
3608                display: table-cell;
3609        }
3610}
3611/* Show priority 6 at 1,120px (70em x 16px) */
3612@media screen and (min-width: 70em) {
3613        .ui-table-columntoggle.ui-responsive th.ui-table-priority-6,
3614        .ui-table-columntoggle.ui-responsive td.ui-table-priority-6 {
3615                display: table-cell;
3616        }
3617}
3618
3619/* Unchecked manually: Always hide */
3620.ui-table-columntoggle th.ui-table-cell-hidden,
3621.ui-table-columntoggle td.ui-table-cell-hidden,
3622.ui-table-columntoggle.ui-responsive th.ui-table-cell-hidden,
3623.ui-table-columntoggle.ui-responsive td.ui-table-cell-hidden {
3624        display: none;
3625}
3626
3627/* Checked manually: Always show */
3628.ui-table-columntoggle th.ui-table-cell-visible,
3629.ui-table-columntoggle td.ui-table-cell-visible,
3630.ui-table-columntoggle.ui-responsive th.ui-table-cell-visible,
3631.ui-table-columntoggle.ui-responsive td.ui-table-cell-visible {
3632        display: table-cell;
3633}
3634
3635
3636/*
3637 Styles for the table columntoggle mode
3638*/
3639.ui-table-reflow td .ui-table-cell-label,
3640.ui-table-reflow th .ui-table-cell-label {
3641        display: none;
3642}
3643
3644/* Mobile first styles: Begin with the stacked presentation at narrow widths */
3645@media only all {
3646        /* Hide the table headers */
3647        .ui-table-reflow thead td,
3648        .ui-table-reflow thead th {
3649                display: none;
3650        }
3651        /* Show the table cells as a block level element */
3652        .ui-table-reflow td,
3653        .ui-table-reflow th {
3654                text-align: left;
3655                display: block;
3656        }
3657        /* Add a fair amount of top margin to visually separate each row when stacked */ 
3658        .ui-table-reflow tbody th {
3659                margin-top: 3em;
3660        }
3661        /* Make the label elements a percentage width */
3662        .ui-table-reflow td .ui-table-cell-label,
3663        .ui-table-reflow th .ui-table-cell-label {
3664                padding: .4em;
3665                min-width: 30%;
3666                display: inline-block;
3667                margin: -.4em 1em -.4em -.4em;
3668        }
3669        /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
3670        .ui-table-reflow th .ui-table-cell-label-top,
3671        .ui-table-reflow td .ui-table-cell-label-top {
3672                display: block;
3673                padding: .4em 0;
3674                margin: .4em 0;
3675                text-transform: uppercase;
3676                font-size: .9em;
3677                font-weight: normal;
3678        }
3679}
3680
3681
3682/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */
3683@media ( min-width: 35em ) {
3684
3685        /* Fixes table rendering when switching between breakpoints in Safari <= 5. See https://github.com/jquery/jquery-mobile/issues/5380 */
3686        .ui-table-reflow.ui-responsive {
3687                display: table-row-group;
3688        }
3689
3690        /* Show the table header rows */
3691        .ui-table-reflow.ui-responsive td,
3692        .ui-table-reflow.ui-responsive th,
3693        .ui-table-reflow.ui-responsive tbody th,
3694        .ui-table-reflow.ui-responsive tbody td,
3695        .ui-table-reflow.ui-responsive thead td,
3696        .ui-table-reflow.ui-responsive thead th {
3697                display: table-cell;
3698                margin: 0;
3699        }
3700
3701        /* Hide the labels in each cell */
3702        .ui-table-reflow.ui-responsive td .ui-table-cell-label,
3703        .ui-table-reflow.ui-responsive th .ui-table-cell-label {
3704                display: none;
3705        }
3706}
3707
3708
3709/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
3710/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
3711@media ( max-width: 35em ) {
3712        .ui-table-reflow.ui-responsive td,
3713        .ui-table-reflow.ui-responsive th {
3714                width: 100%;
3715                -webkit-box-sizing: border-box;
3716                -moz-box-sizing: border-box;
3717                box-sizing: border-box;
3718                float: left;
3719                clear: left;
3720        }
3721}
Note: See TracBrowser for help on using the repository browser.