pushpop-rails 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. data/README.md +42 -0
  2. data/Rakefile +29 -0
  3. data/lib/generators/pushpop/install/install_generator.rb +17 -0
  4. data/lib/pushpop-rails.rb +4 -0
  5. data/lib/pushpop/rails.rb +8 -0
  6. data/lib/pushpop/rails/engine.rb +7 -0
  7. data/lib/pushpop/rails/version.rb +5 -0
  8. data/vendor/assets/Pushpop/background.png +0 -0
  9. data/vendor/assets/Pushpop/background@2x.png +0 -0
  10. data/vendor/assets/Pushpop/externals/scrollkit/background.png +0 -0
  11. data/vendor/assets/Pushpop/externals/scrollkit/scrollkit.css +202 -0
  12. data/vendor/assets/Pushpop/externals/scrollkit/scrollkit.js +924 -0
  13. data/vendor/assets/Pushpop/font/pushpop-glyphs-webfont.eot +0 -0
  14. data/vendor/assets/Pushpop/font/pushpop-glyphs-webfont.svg +57 -0
  15. data/vendor/assets/Pushpop/font/pushpop-glyphs-webfont.ttf +0 -0
  16. data/vendor/assets/Pushpop/font/pushpop-glyphs-webfont.woff +0 -0
  17. data/vendor/assets/Pushpop/pushpop-modal-view-stack/pushpop-modal-view-stack.css +148 -0
  18. data/vendor/assets/Pushpop/pushpop-modal-view-stack/pushpop-modal-view-stack.js +306 -0
  19. data/vendor/assets/Pushpop/pushpop-popover-view-stack/pushpop-popover-view-stack.css +170 -0
  20. data/vendor/assets/Pushpop/pushpop-popover-view-stack/pushpop-popover-view-stack.js +278 -0
  21. data/vendor/assets/Pushpop/pushpop-split-view/pushpop-split-view.css +38 -0
  22. data/vendor/assets/Pushpop/pushpop-split-view/pushpop-split-view.js +33 -0
  23. data/vendor/assets/Pushpop/pushpop-tab-view/pushpop-tab-view.css +130 -0
  24. data/vendor/assets/Pushpop/pushpop-tab-view/pushpop-tab-view.js +298 -0
  25. data/vendor/assets/Pushpop/pushpop-table-view/pushpop-table-view.css +1273 -0
  26. data/vendor/assets/Pushpop/pushpop-table-view/pushpop-table-view.js +2275 -0
  27. data/vendor/assets/Pushpop/pushpop.css +2243 -0
  28. data/vendor/assets/Pushpop/pushpop.js +1554 -0
  29. data/vendor/assets/javascripts/pushpop_rails.js +7 -0
  30. data/vendor/assets/stylesheets/pushpop_rails.css +9 -0
  31. metadata +92 -0
data/vendor/assets/Pushpop/pushpop.css ADDED
@@ -0,0 +1,2243 @@
1
+ * {
2
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3
+ -webkit-text-size-adjust: none;
4
+ -webkit-touch-callout: none;
5
+ -webkit-user-drag: none;
6
+ }
7
+
8
+ /**
9
+ Pushpop.View
10
+ ============
11
+ pp-view
12
+ */
13
+ .pp-view {
14
+ background: #ddd;
15
+ display: none;
16
+ position: absolute;
17
+ width: auto;
18
+ height: auto;
19
+ top: 0;
20
+ right: 0;
21
+ bottom: 0;
22
+ left: 0;
23
+ -webkit-user-select: none;
24
+ -moz-user-select: none;
25
+ -ms-user-select: none;
26
+ -o-user-select: none;
27
+ user-select: none;
28
+ -webkit-backface-visibility: hidden;
29
+ -moz-backface-visibility: hidden;
30
+ -ms-backface-visibility: hidden;
31
+ -o-backface-visibility: hidden;
32
+ backface-visibility: hidden;
33
+ -webkit-transform: translate3d(0, 0, 0);
34
+ -moz-transform: translate(0, 0);
35
+ -ms-transform: translate(0, 0);
36
+ -o-transform: translate(0, 0);
37
+ transform: translate(0, 0);
38
+ }
39
+
40
+ /* Sub-View */
41
+ .pp-view > .pp-view,
42
+ .pp-view > .sk-scroll-content > .pp-view {
43
+ background: none;
44
+ display: block;
45
+ position: relative;
46
+ top: auto;
47
+ right: auto;
48
+ bottom: auto;
49
+ left: auto;
50
+ }
51
+
52
+ .pp-view.sk-scroll-view {
53
+ background: #333 url('externals/scrollkit/background.png');
54
+ background-size: 256px 256px;
55
+ }
56
+
57
+ @media only screen and (-webkit-min-device-pixel-ratio: 2) {
58
+ .pp-view.sk-scroll-view {
59
+ background: #333 url('externals/scrollkit/background@2x.png');
60
+ }
61
+ }
62
+
63
+ .pp-view.sk-scroll-view.sk-scroll-view-plain, .pp-view.sk-scroll-view.sk-scroll-view-plain > .sk-scroll-content {
64
+ background: none;
65
+ -webkit-box-shadow: none;
66
+ -moz-box-shadow: none;
67
+ box-shadow: none;
68
+ }
69
+
70
+ .pp-view.pp-active,
71
+ .pp-view.push,
72
+ .pp-view.pop {
73
+ display: block;
74
+ }
75
+
76
+ .pp-view.push, .pp-view.pop {
77
+ pointer-events: none;
78
+ }
79
+
80
+ /**
81
+ Pushpop.ViewStack
82
+ =================
83
+ pp-view-stack
84
+ */
85
+ .pp-view-stack {
86
+ background: #333 url('background.png');
87
+ background-size: 320px 460px;
88
+ position: absolute;
89
+ margin: 0;
90
+ padding: 0;
91
+ top: 0;
92
+ bottom: 0;
93
+ width: 100%;
94
+ height: auto;
95
+ overflow: hidden;
96
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
97
+ font-size: 13px;
98
+ line-height: 1.25em;
99
+ -webkit-perspective: 2000px;
100
+ -moz-perspective: 2000px;
101
+ -ms-perspective: 2000px;
102
+ -o-perspective: 2000px;
103
+ perspective: 2000px;
104
+ -webkit-text-size-adjust: 100%;
105
+ -moz-text-size-adjust: 100%;
106
+ -ms-text-size-adjust: 100%;
107
+ -o-text-size-adjust: 100%;
108
+ text-size-adjust: 100%;
109
+ }
110
+
111
+ @media only screen and (-webkit-min-device-pixel-ratio: 2) {
112
+ .pp-view-stack {
113
+ background: #333 url('background@2x.png');
114
+ }
115
+ }
116
+
117
+ /**
118
+ PushpopGlyphs
119
+ =============
120
+ */
121
+ @font-face {
122
+ font-family: 'PushpopGlyphs';
123
+ src: url('font/pushpop-glyphs-webfont.eot');
124
+ src: url('font/pushpop-glyphs-webfont.eot?#iefix') format('eot'), url('font/pushpop-glyphs-webfont.woff') format('woff'), url('font/pushpop-glyphs-webfont.ttf') format('truetype'), url('font/pushpop-glyphs-webfont.svg#PushpopGlyphs') format('svg');
125
+ font-weight: normal;
126
+ font-style: normal;
127
+ }
128
+
129
+ /**
130
+ Pushpop.Icon
131
+ ============
132
+ pp-icon-*
133
+ */
134
+ [class^='pp-icon-']::before, [class*=' pp-icon-']::before {
135
+ font-family: PushpopGlyphs;
136
+ font-weight: normal;
137
+ font-style: normal;
138
+ line-height: 1em;
139
+ display: inline-block;
140
+ text-decoration: inherit;
141
+ }
142
+
143
+ a [class^='pp-icon-'], a [class*=' pp-icon-'] {
144
+ display: inline-block;
145
+ text-decoration: inherit;
146
+ }
147
+
148
+ .pp-icon-large::before {
149
+ vertical-align: top;
150
+ font-size: 1.3333333333333333em;
151
+ }
152
+
153
+ li [class^='pp-icon-'], li [class*=' pp-icon-'] {
154
+ display: inline-block;
155
+ width: 1.25em;
156
+ text-align: center;
157
+ }
158
+
159
+ li .pp-icon-large[class^='pp-icon-'], li .pp-icon-large[class*=' pp-icon-'] {
160
+ width: 1.875em;
161
+ }
162
+
163
+ li[class^='pp-icon-'], li[class*=' pp-icon-'] {
164
+ margin-left: 0;
165
+ list-style-type: none;
166
+ }
167
+
168
+ li[class^='pp-icon-']::before, li[class*=' pp-icon-']::before {
169
+ text-indent: -2em;
170
+ text-align: center;
171
+ }
172
+
173
+ li[class^='pp-icon-'].icon-large::before, li[class*=' pp-icon-'].icon-large::before {
174
+ text-indent: -1.3333333333333333em;
175
+ }
176
+
177
+ .pp-icon-disclosure-indicator::before { content: '\f000'; }
178
+ .pp-icon-remove::before { content: '\f001'; }
179
+ .pp-icon-add::before { content: '\f002'; }
180
+ .pp-icon-checkmark::before { content: '\f003'; }
181
+ .pp-icon-action::before { content: '\f004'; }
182
+ .pp-icon-documents::before { content: '\f005'; }
183
+ .pp-icon-document-count::before { content: '\f006'; }
184
+ .pp-icon-clear::before { content: '\f007'; }
185
+ .pp-icon-search::before { content: '\f008'; }
186
+ .pp-icon-reload::before { content: '\f009'; }
187
+ .pp-icon-trash::before { content: '\f00a'; }
188
+ .pp-icon-location::before { content: '\f00b'; }
189
+ /*.pp-icon-book::before { content: '\f00c'; }*/
190
+ .pp-icon-download::before { content: '\f00d'; }
191
+ .pp-icon-square-badge::before { content: '\f00e'; }
192
+ .pp-icon-airplay::before { content: '\f00f'; }
193
+ .pp-icon-play::before { content: '\f010'; }
194
+ .pp-icon-stop::before { content: '\f011'; }
195
+ .pp-icon-pause::before { content: '\f012'; }
196
+ .pp-icon-previous-track::before { content: '\f013'; }
197
+ .pp-icon-next-track::before { content: '\f014'; }
198
+ .pp-icon-rewind::before { content: '\f015'; }
199
+ .pp-icon-fast-forward::before { content: '\f016'; }
200
+ .pp-icon-compose::before { content: '\f017'; }
201
+ .pp-icon-pull-to-refresh::before { content: '\f018'; }
202
+ .pp-icon-text-box::before { content: '\f019'; }
203
+ .pp-icon-record::before { content: '\f01a'; }
204
+
205
+ /**
206
+ Pushpop.Badge
207
+ =============
208
+ pp-badge
209
+ */
210
+ .pp-badge {
211
+ background: rgb(234,45,54); /* Old browsers */
212
+ background: -moz-linear-gradient(top, rgba(234,45,54,1) 0%, rgba(200,16,17,1) 100%); /* FF3.6+ */
213
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,45,54,1)), color-stop(100%,rgba(200,16,17,1))); /* Chrome,Safari4+ */
214
+ background: -webkit-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* Chrome10+,Safari5.1+ */
215
+ background: -o-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* Opera 11.10+ */
216
+ background: -ms-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* IE10+ */
217
+ background: linear-gradient(to bottom, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* W3C */
218
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2d36', endColorstr='#c81011',GradientType=0 ); /* IE6-9 */
219
+ border: 2px solid #fff;
220
+ color: #fff;
221
+ cursor: default;
222
+ font-size: 16px;
223
+ font-weight: bold;
224
+ line-height: 1.2em;
225
+ display: inline-block;
226
+ position: relative;
227
+ margin: 0 0 0.5em;
228
+ padding: 0 0.3em 0.1em 0.35em;
229
+ min-width: 0.7em;
230
+ overflow: hidden;
231
+ text-align: center;
232
+ -webkit-border-radius: 0.8em;
233
+ -moz-border-radius: 0.8em;
234
+ border-radius: 0.8em;
235
+ -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.9);
236
+ -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.9);
237
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.9);
238
+ }
239
+
240
+ .pp-badge::before {
241
+ background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6+ */
242
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0.1))); /* Chrome,Safari4+ */
243
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10+,Safari5.1+ */
244
+ background: -o-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 100%); /* Opera 11.10+ */
245
+ background: -ms-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 100%); /* IE10+ */
246
+ background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 100%); /* W3C */
247
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
248
+ content: '';
249
+ display: block;
250
+ position: absolute;
251
+ top: 0;
252
+ right: 1px;
253
+ left: 1px;
254
+ width: auto;
255
+ height: 0.7em;
256
+ -webkit-border-radius: 1em;
257
+ -moz-border-radius: 1em;
258
+ border-radius: 1em;
259
+ }
260
+
261
+ .pp-badge-style-green {
262
+ background: #5fb860; /* Old browsers */
263
+ background: -moz-linear-gradient(top, rgba(97,184,96,1) 0%, rgba(4,143,1,1) 100%); /* FF3.6+ */
264
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,184,96,1)), color-stop(100%,rgba(4,143,1,1))); /* Chrome,Safari4+ */
265
+ background: -webkit-linear-gradient(top, rgba(97,184,96,1) 0%,rgba(4,143,1,1) 100%); /* Chrome10+,Safari5.1+ */
266
+ background: -o-linear-gradient(top, rgba(97,184,96,1) 0%,rgba(4,143,1,1) 100%); /* Opera 11.10+ */
267
+ background: -ms-linear-gradient(top, rgba(97,184,96,1) 0%,rgba(4,143,1,1) 100%); /* IE10+ */
268
+ background: linear-gradient(to bottom, rgba(97,184,96,1) 0%,rgba(4,143,1,1) 100%); /* W3C */
269
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61b860', endColorstr='#048f01',GradientType=0 ); /* IE6-9 */
270
+ }
271
+
272
+ .pp-badge-style-blue {
273
+ background: #2972d9; /* Old browsers */
274
+ background: -moz-linear-gradient(top, #6a9de5 0%, #2972d9 100%); /* FF3.6+ */
275
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6a9de5), color-stop(100%, #2972d9)); /* Chrome,Safari4+ */
276
+ background: -webkit-linear-gradient(top, #6a9de5 0%, #2972d9 100%); /* Chrome10+,Safari5.1+ */
277
+ background: -o-linear-gradient(top, #6a9de5 0%, #2972d9 100%); /* Opera 11.10+ */
278
+ background: -ms-linear-gradient(top, #6a9de5 0%, #2972d9 100%); /* IE10+ */
279
+ background: linear-gradient(top, #6a9de5 0%, #2972d9 100%); /* W3C */
280
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a9de5', endColorstr='#2972d9', GradientType=0); /* IE6-9 */
281
+ }
282
+
283
+ .pp-badge-style-red, .pp-badge-style-default {
284
+ background: rgb(234,45,54); /* Old browsers */
285
+ background: -moz-linear-gradient(top, rgba(234,45,54,1) 0%, rgba(200,16,17,1) 100%); /* FF3.6+ */
286
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,45,54,1)), color-stop(100%,rgba(200,16,17,1))); /* Chrome,Safari4+ */
287
+ background: -webkit-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* Chrome10+,Safari5.1+ */
288
+ background: -o-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* Opera 11.10+ */
289
+ background: -ms-linear-gradient(top, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* IE10+ */
290
+ background: linear-gradient(to bottom, rgba(234,45,54,1) 0%,rgba(200,16,17,1) 100%); /* W3C */
291
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2d36', endColorstr='#c81011',GradientType=0 ); /* IE6-9 */
292
+ }
293
+
294
+ /**
295
+ Pushpop.Button
296
+ ==============
297
+ pp-button
298
+ */
299
+ .pp-button {
300
+ background: #8da3c0; /* Old browsers */
301
+ background: -moz-linear-gradient(top, #8da3c0 0%, #5877a2 50%, #476999 51%, #496b9a 100%); /* FF3.6+ */
302
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8da3c0), color-stop(50%,#5877a2), color-stop(51%,#476999), color-stop(100%,#496b9a)); /* Chrome,Safari4+ */
303
+ background: -webkit-linear-gradient(top, #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* Chrome10+,Safari5.1+ */
304
+ background: -o-linear-gradient(top, #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* Opera 11.10+ */
305
+ background: -ms-linear-gradient(top, #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* IE10+ */
306
+ background: linear-gradient(top, #8da3c0 0%,#5877a2 50%,#476999 51%,#496b9a 100%); /* W3C */
307
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8da3c0', endColorstr='#496b9a',GradientType=0 ); /* IE6-9 */
308
+ border: 1px solid rgba(0, 0, 0, 0.5);
309
+ color: #fff;
310
+ cursor: pointer;
311
+ display: inline-block;
312
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
313
+ font-size: 0.9em;
314
+ font-weight: bold;
315
+ line-height: 1.4em;
316
+ padding: 0.55em 0.75em 0.5em;
317
+ margin: 0.5em 0.25em;
318
+ min-width: 1.5em;
319
+ outline: none;
320
+ overflow: hidden;
321
+ text-align: center;
322
+ text-decoration: none;
323
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
324
+ white-space: nowrap;
325
+ zoom: 1; /* Trigger "hasLayout" in IE */
326
+ -webkit-border-radius: 0.5em;
327
+ -moz-border-radius: 0.5em;
328
+ border-radius: 0.5em;
329
+ -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
330
+ -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
331
+ box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
332
+ visibility: visible;
333
+ opacity: 1;
334
+ -webkit-user-select: none;
335
+ -moz-user-select: none;
336
+ -ms-user-select: none;
337
+ -o-user-select: none;
338
+ user-select: none;
339
+ -webkit-backface-visibility: hidden;
340
+ -moz-backface-visibility: hidden;
341
+ -ms-backface-visibility: hidden;
342
+ -o-backface-visibility: hidden;
343
+ backface-visibility: hidden;
344
+ -webkit-transform: translate3d(0, 0, 0);
345
+ -moz-transform: translate(0, 0);
346
+ -ms-transform: translate(0, 0);
347
+ -o-transform: translate(0, 0);
348
+ transform: translate(0, 0);
349
+ -webkit-transition: opacity 0.2s linear 0.1s;
350
+ -moz-transition: opacity 0.2s linear 0.1s;
351
+ -ms-transition: opacity 0.2s linear 0.1s;
352
+ -o-transition: opacity 0.2s linear 0.1s;
353
+ transition: opacity 0.2s linear 0.1s;
354
+ }
355
+
356
+ .pp-button:active, .pp-button:hover, .pp-button:visited {
357
+ color: #fff;
358
+ text-decoration: none;
359
+ }
360
+
361
+ .pp-button.pp-button-state-active {
362
+ background: #7c87a4; /* Old browsers */
363
+ background: -moz-linear-gradient(top, #7c87a4 0%, #3a4e78 50%, #253c6a 51%, #263e6c 100%); /* FF3.6+ */
364
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c87a4), color-stop(50%,#3a4e78), color-stop(51%,#253c6a), color-stop(100%,#263e6c)); /* Chrome,Safari4+ */
365
+ background: -webkit-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Chrome10+,Safari5.1+ */
366
+ background: -o-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Opera 11.10+ */
367
+ background: -ms-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* IE10+ */
368
+ background: linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* W3C */
369
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c87a4', endColorstr='#263e6c',GradientType=0 ); /* IE6-9 */
370
+ }
371
+
372
+ .pp-button-style-black {
373
+ background: #2d2d2d; /* Old browsers */
374
+ background: -moz-linear-gradient(top, #7e7e7e 0%, #404040 50%, #2d2d2d 51%, #272727 100%); /* FF3.6+ */
375
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e7e7e), color-stop(50%,#404040), color-stop(51%,#2d2d2d), color-stop(100%,#272727)); /* Chrome,Safari4+ */
376
+ background: -webkit-linear-gradient(top, #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* Chrome10+,Safari5.1+ */
377
+ background: -o-linear-gradient(top, #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* Opera 11.10+ */
378
+ background: -ms-linear-gradient(top, #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* IE10+ */
379
+ background: linear-gradient(top, #7e7e7e 0%,#404040 50%,#2d2d2d 51%,#272727 100%); /* W3C */
380
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#272727',GradientType=0 ); /* IE6-9 */
381
+ }
382
+
383
+ .pp-button-style-black.pp-button-state-active {
384
+ background: #5e5e5e; /* Old browsers */
385
+ background: -moz-linear-gradient(top, #5e5e5e 0%, #202020 50%, #0d0d0d 51%, #070707 100%); /* FF3.6+ */
386
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#202020), color-stop(51%,#0d0d0d), color-stop(100%,#070707)); /* Chrome,Safari4+ */
387
+ background: -webkit-linear-gradient(top, #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* Chrome10+,Safari5.1+ */
388
+ background: -o-linear-gradient(top, #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* Opera 11.10+ */
389
+ background: -ms-linear-gradient(top, #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* IE10+ */
390
+ background: linear-gradient(top, #5e5e5e 0%,#202020 50%,#0d0d0d 51%,#070707 100%); /* W3C */
391
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#070707',GradientType=0 ); /* IE6-9 */
392
+ }
393
+
394
+ .pp-button-style-blue {
395
+ background: #7a9de9; /* Old browsers */
396
+ background: -moz-linear-gradient(top, #7a9de9 0%, #376fe0 50%, #2260dd 51%, #2362dd 100%); /* FF3.6+ */
397
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a9de9), color-stop(50%,#376fe0), color-stop(51%,#2260dd), color-stop(100%,#2362dd)); /* Chrome,Safari4+ */
398
+ background: -webkit-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Chrome10+,Safari5.1+ */
399
+ background: -o-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* Opera 11.10+ */
400
+ background: -ms-linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* IE10+ */
401
+ background: linear-gradient(top, #7a9de9 0%,#376fe0 50%,#2260dd 51%,#2362dd 100%); /* W3C */
402
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a9de9', endColorstr='#2362dd',GradientType=0 ); /* IE6-9 */
403
+ }
404
+
405
+ .pp-button-style-blue.pp-button-state-active {
406
+ background: #7c87a4; /* Old browsers */
407
+ background: -moz-linear-gradient(top, #7c87a4 0%, #3a4e78 50%, #253c6a 51%, #263e6c 100%); /* FF3.6+ */
408
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c87a4), color-stop(50%,#3a4e78), color-stop(51%,#253c6a), color-stop(100%,#263e6c)); /* Chrome,Safari4+ */
409
+ background: -webkit-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Chrome10+,Safari5.1+ */
410
+ background: -o-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* Opera 11.10+ */
411
+ background: -ms-linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* IE10+ */
412
+ background: linear-gradient(top, #7c87a4 0%,#3a4e78 50%,#253c6a 51%,#263e6c 100%); /* W3C */
413
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c87a4', endColorstr='#263e6c',GradientType=0 ); /* IE6-9 */
414
+ }
415
+
416
+ .pp-button-style-green {
417
+ background: #61b860; /* Old browsers */
418
+ background: -moz-linear-gradient(top, #61b860 0%, #279f25 50%, #058f02 51%, #079004 100%); /* FF3.6+ */
419
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#61b860), color-stop(50%,#279f25), color-stop(51%,#058f02), color-stop(100%,#079004)); /* Chrome,Safari4+ */
420
+ background: -webkit-linear-gradient(top, #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* Chrome10+,Safari5.1+ */
421
+ background: -o-linear-gradient(top, #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* Opera 11.10+ */
422
+ background: -ms-linear-gradient(top, #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* IE10+ */
423
+ background: linear-gradient(top, #61b860 0%,#279f25 50%,#058f02 51%,#079004 100%); /* W3C */
424
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61b860', endColorstr='#079004',GradientType=0 ); /* IE6-9 */
425
+ }
426
+
427
+ .pp-button-style-green.pp-button-state-active {
428
+ background: #217840; /* Old browsers */
429
+ background: -moz-linear-gradient(top, #217840 0%, #075f05 50%, #034f00 51%, #055002 100%); /* FF3.6+ */
430
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#217840), color-stop(50%,#075f05), color-stop(51%,#034f00), color-stop(100%,#055002)); /* Chrome,Safari4+ */
431
+ background: -webkit-linear-gradient(top, #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* Chrome10+,Safari5.1+ */
432
+ background: -o-linear-gradient(top, #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* Opera 11.10+ */
433
+ background: -ms-linear-gradient(top, #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* IE10+ */
434
+ background: linear-gradient(top, #217840 0%,#075f05 50%,#034f00 51%,#055002 100%); /* W3C */
435
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#217840', endColorstr='#055002',GradientType=0 ); /* IE6-9 */
436
+ }
437
+
438
+ .pp-button-style-red {
439
+ background: #ed8288; /* Old browsers */
440
+ background: -moz-linear-gradient(top, #ed8288 0%, #c83640 50%, #be1623 51%, #bd1421 100%); /* FF3.6+ */
441
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed8288), color-stop(50%,#c83640), color-stop(51%,#be1623), color-stop(100%,#bd1421)); /* Chrome,Safari4+ */
442
+ background: -webkit-linear-gradient(top, #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* Chrome10+,Safari5.1+ */
443
+ background: -o-linear-gradient(top, #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* Opera 11.10+ */
444
+ background: -ms-linear-gradient(top, #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* IE10+ */
445
+ background: linear-gradient(top, #ed8288 0%,#c83640 50%,#be1623 51%,#bd1421 100%); /* W3C */
446
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8288', endColorstr='#bd1421',GradientType=0 ); /* IE6-9 */
447
+ }
448
+
449
+ .pp-button-style-red.pp-button-state-active {
450
+ background: #a65960; /* Old browsers */
451
+ background: -moz-linear-gradient(top, #a65960 0%, #94262f 50%, #8d141e 51%, #8d131e 100%); /* FF3.6+ */
452
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a65960), color-stop(50%,#94262f), color-stop(51%,#8d141e), color-stop(100%,#8d131e)); /* Chrome,Safari4+ */
453
+ background: -webkit-linear-gradient(top, #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* Chrome10+,Safari5.1+ */
454
+ background: -o-linear-gradient(top, #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* Opera 11.10+ */
455
+ background: -ms-linear-gradient(top, #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* IE10+ */
456
+ background: linear-gradient(top, #a65960 0%,#94262f 50%,#8d141e 51%,#8d131e 100%); /* W3C */
457
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a65960', endColorstr='#8d131e',GradientType=0 ); /* IE6-9 */
458
+ }
459
+
460
+ .pp-button-alignment-default {
461
+ float: none;
462
+ }
463
+
464
+ .pp-button-alignment-left {
465
+ float: left;
466
+ }
467
+
468
+ .pp-button-alignment-right {
469
+ float: right;
470
+ }
471
+
472
+ .pp-button i {
473
+ position: relative;
474
+ top: 0.1em;
475
+ line-height: 0.4em;
476
+ font-size: 1.75em;
477
+ }
478
+
479
+ .pp-button.pp-hidden {
480
+ visibility: hidden;
481
+ border-width: 0;
482
+ opacity: 0;
483
+ padding: 0;
484
+ margin: 0;
485
+ -webkit-transition: visibility 0s linear 0.3s, border-width 0s linear 0.3s, padding 0s linear 0.3s, margin 0s linear 0.3s, opacity 0.2s linear;
486
+ -moz-transition: visibility 0s linear 0.3s, border-width 0s linear 0.3s, padding 0s linear 0.3s, margin 0s linear 0.3s, opacity 0.2s linear;
487
+ -ms-transition: visibility 0s linear 0.3s, border-width 0s linear 0.3s, padding 0s linear 0.3s, margin 0s linear 0.3s, opacity 0.2s linear;
488
+ -o-transition: visibility 0s linear 0.3s, border-width 0s linear 0.3s, padding 0s linear 0.3s, margin 0s linear 0.3s, opacity 0.2s linear;
489
+ transition: visibility 0s linear 0.3s, border-width 0s linear 0.3s, padding 0s linear 0.3s, margin 0s linear 0.3s, opacity 0.2s linear;
490
+ }
491
+
492
+ /**
493
+ Pushpop.NavigationBar
494
+ =====================
495
+ pp-navigation-bar
496
+ */
497
+ .pp-navigation-bar {
498
+ background: #b0bccd; /* Old browsers */
499
+ background: -moz-linear-gradient(top, rgba(176,188,205,1) 0%, rgba(136,155,179,1) 48%, rgba(129,149,175,1) 49%, rgba(109,132,162,1) 100%); /* FF3.6+ */
500
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,188,205,1)), color-stop(48%,rgba(136,155,179,1)), color-stop(49%,rgba(129,149,175,1)), color-stop(100%,rgba(109,132,162,1))); /* Chrome,Safari4+ */
501
+ background: -webkit-linear-gradient(top, rgba(176,188,205,1) 0%,rgba(136,155,179,1) 48%,rgba(129,149,175,1) 49%,rgba(109,132,162,1) 100%); /* Chrome10+,Safari5.1+ */
502
+ background: -o-linear-gradient(top, rgba(176,188,205,1) 0%,rgba(136,155,179,1) 48%,rgba(129,149,175,1) 49%,rgba(109,132,162,1) 100%); /* Opera 11.10+ */
503
+ background: -ms-linear-gradient(top, rgba(176,188,205,1) 0%,rgba(136,155,179,1) 48%,rgba(129,149,175,1) 49%,rgba(109,132,162,1) 100%); /* IE10+ */
504
+ background: linear-gradient(to bottom, rgba(176,188,205,1) 0%,rgba(136,155,179,1) 48%,rgba(129,149,175,1) 49%,rgba(109,132,162,1) 100%); /* W3C */
505
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */
506
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
507
+ font-size: 1em;
508
+ border-top: 1px solid rgba(255, 255, 255, 0.6);
509
+ border-bottom: 1px solid #000;
510
+ position: absolute;
511
+ top: 0;
512
+ right: 0;
513
+ bottom: 0;
514
+ left: 0;
515
+ width: auto;
516
+ height: 42px;
517
+ z-index: 999999;
518
+ -webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
519
+ -moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
520
+ box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
521
+ -webkit-user-select: none;
522
+ -moz-user-select: none;
523
+ -ms-user-select: none;
524
+ -o-user-select: none;
525
+ user-select: none;
526
+ -webkit-backface-visibility: hidden;
527
+ -moz-backface-visibility: hidden;
528
+ -ms-backface-visibility: hidden;
529
+ -o-backface-visibility: hidden;
530
+ backface-visibility: hidden;
531
+ -webkit-transform: translate3d(0, 0, 0);
532
+ -moz-transform: translate(0, 0);
533
+ -ms-transform: translate(0, 0);
534
+ -o-transform: translate(0, 0);
535
+ transform: translate(0, 0);
536
+ }
537
+
538
+ .pp-navigation-bar-style-black {
539
+ background: #000; /* Old browsers */
540
+ background: -moz-linear-gradient(top, #636363 0%, #202020 48%, #000 49%, #000 100%); /* FF3.6+ */
541
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(48%,#202020), color-stop(49%,#000), color-stop(100%,#000)); /* Chrome,Safari4+ */
542
+ background: -webkit-linear-gradient(top, #636363 0%,#202020 48%,#000 49%,#000 100%); /* Chrome10+,Safari5.1+ */
543
+ background: -o-linear-gradient(top, #636363 0%,#202020 48%,#000 49%,#000 100%); /* Opera 11.10+ */
544
+ background: -ms-linear-gradient(top, #636363 0%,#202020 48%,#000 49%,#000 100%); /* IE10+ */
545
+ background: linear-gradient(top, #636363 0%,#202020 48%,#000 49%,#000 100%); /* W3C */
546
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#000',GradientType=0 ); /* IE6-9 */
547
+ }
548
+
549
+ .pp-navigation-bar-back-bar-button-item {
550
+ border-left: none;
551
+ margin-left: 1.6em;
552
+ padding-left: 0.25em;
553
+ overflow: visible;
554
+ position: relative;
555
+ z-index: 3;
556
+ -webkit-border-top-left-radius: 0;
557
+ -moz-border-radius-topleft: 0;
558
+ border-top-left-radius: 0;
559
+ -webkit-border-bottom-left-radius: 0;
560
+ -moz-border-radius-bottomleft: 0;
561
+ border-bottom-left-radius: 0;
562
+ }
563
+
564
+ .pp-navigation-bar-back-bar-button-item::before {
565
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAeCAYAAAD3qZRJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDAxN0ZFNUNEMEIxMUUxODExMEE4MDRBOTU4OUExQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDAxN0ZFNkNEMEIxMUUxODExMEE4MDRBOTU4OUExQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwMDE3RkUzQ0QwQjExRTE4MTEwQTgwNEE5NTg5QTFBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwMDE3RkU0Q0QwQjExRTE4MTEwQTgwNEE5NTg5QTFBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OAMqZQAAAlFJREFUeNpi/P//PwOxwNDSOQRI1bEQq8HI2qNCQFiyXU5Zk4EoTcZ2fvkikvLtGnpmDMJikoQ1mTiGeDAys/WqapswCIlJMzAyMePXZOoaLcfMyrFKXceQWUhMiuE/AyPD33//cGsy80hiZmHjXCohJcMrJafC8O8/I8O/P3/Bcjg1MbFwVPIJCNgoqOoAbWBi+PP3H1wOqyZzv3wzoD/q5BSUGRiZWRn+/ANFy3/cmiwCinmA7loqISHGysHNz/AXyQacmpiYWfp5ebhURCRkGP6CPE5Ik0VgqR87G2uKhLQ8kMfM8OfPP6z+ZUHSIMHEyDhPUEiYgZmVDRy0uABcEzMz0yIuLi5hHkERBoiLCGgC2pLPzs7mKiQmA3bW37/4EzHzjotftRgZGdcJikows3Fwg2MdlPLxYRYLQ3WWs5fv/Pz64y/rH8ZfRKV45hP7N339/uMn+7kLV63ZuPmBljIR1ARS8SU7znuKiZ7K+h+f3hJlE8zYZ5Mb0hqFeZkvfP/0mmhNIHC5vSyulvnf95c/v34gWhODupL0zuw4r7Yfn9/8+vPrG3GagOB3kLvlIh9n09k/vgBtw1HoYAuqD1VZIT1qckI7v318TbQmEHjQURbXyMvx79b3z8AQZWRAwTgjRVSY/2Rtbngd4+/P7399+4SiD19M/jM3UNuUGOrS/f3Dyz+/f3yDayMU/d/jghznhPvaTvz67umfXz++4C9YkMDr/ETfCWysLH8Xrz9QwCgozkYwRSNhqdnLd7Y4RdW8YCSlAgACCVBhBRBgAOvt8/s9wu6XAAAAAElFTkSuQmCC);
566
+ background-repeat: none;
567
+ content: '';
568
+ display: block;
569
+ position: absolute;
570
+ top: -1px;
571
+ left: -13px;
572
+ width: 13px;
573
+ height: 30px;
574
+ z-index: -1;
575
+ }
576
+
577
+ .pp-navigation-bar-back-bar-button-item.pp-button-state-active::before {
578
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAeCAYAAAD3qZRJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDAxN0ZFOUNEMEIxMUUxODExMEE4MDRBOTU4OUExQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDAxN0ZFQUNEMEIxMUUxODExMEE4MDRBOTU4OUExQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwMDE3RkU3Q0QwQjExRTE4MTEwQTgwNEE5NTg5QTFBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwMDE3RkU4Q0QwQjExRTE4MTEwQTgwNEE5NTg5QTFBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dq/IfQAAAlFJREFUeNpi/P//PwOxwNDSOQRI1bEQq8HI2qOCl0+4XUJSnoEoTcZ2fvkCguLtSkoaDPyCogxMhDSYOIZ4MDKz9crKqzHw8osCRZjw22TqGi3HzMqxSlZanhnoNIa///4D8V/cmsw8kphZ2DiXCvDw8QoJSTD8/QvU8PcPWA6nJiYWjkoONlYbUTFpBqB6hr9//sLlsGoy98s3A/qjTkhAiOH/fyaG37//oshjaLIIKOYBumspNyszKzMLO8PvP38xDMXQxMTM0s/y768KFycPA1j9XwKaLAJL/Rj//U7h4uJhAAYUw78/f7D6lwVJgwQTI+M8FiZWhv9A4d+//+GMCrgmZmamRf9+/hRmZucGOgukgYAmoC35/37+cGVj4WT4948RiP/hTSXMOy5+1WJkZFz3//d/ZkZmoNOAqf4fAcxiYajOcvbynZ+ffv5l/f3lM1EpnvnE/k1fv//4yX7zwVPrnz/+MBKTvUCp/Et2nPcUEz2V9RycxGUvRqScqxuU0b7o3v2XBt++/SZoEwxcbi+LqxUW4X3JzsFCtCYGdSXpndlxXm28fBy/WFiZiNMEBL+D3C0X+TibzsZnGzbjPlRlhfQY6Srt5OJmJVoTCDzoKItrlJEWvsXJxUK0JgZRYf6TtbnhdUJCPO/BTmVkhGN8pdE/cwO1TYmhLt28vOx/WFmZCdsEBd/jghznhPvaTuTnZ//DxgbRyNzQ0EAoAXwDps9rv37/+Xfz/hNTYKnETIwmEPhkqqd6DZh6ft9/+kKdkZQKAAgkQIUVQIABANSi2Ryl3imiAAAAAElFTkSuQmCC);
579
+ }
580
+
581
+ .pp-button-style-black.pp-navigation-bar-back-bar-button-item::before {
582
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAeCAYAAAD3qZRJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MTg1MkRFNTgyN0ExMUUxOUVEMkRENDA1NzAxNzVDNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MTg1MkRFNjgyN0ExMUUxOUVEMkRENDA1NzAxNzVDNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcxODUyREUzODI3QTExRTE5RUQyREQ0MDU3MDE3NUM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcxODUyREU0ODI3QTExRTE5RUQyREQ0MDU3MDE3NUM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+yQ3X+QAAAjBJREFUeNpi/P//P4OKigoDkSAEiOtYGIgHFYKCgu3y8vIMYE0g2wiAfDExsXYtLS0GISEhojR5AHGvqqoqg4CAAFiAkCY5RkbGlXp6esxApzH8+/cPjPFpYgaCJbKysnySkpIMf//+BWO8NjExMVUC3W+rrKwMlv/z5w9cDqwJZCUaMAMqrAOFFEju169fKJLYbOIB2rJEQUGBlZ2dHcUGnJqAGvqAzlIVFxdH8QeGJiTn+XFxcaXKycnBQwobQLZJAmjLPBERETD/9+/fOCMOrgkYvAuBcSHMz8+P1UnYnJfPw8PjBvIHPmfBNQGdowWM9W5hYWGM+MCpydTUlPHs2bPf379/z/rjxw+ikjvz7du3P9+7d+/b6dOnXYEhB7SUkaAmRmjICTk4OPQADUgEJUyiNPHx8TF8+vRJAZj8l3///t0ClgVwASZYkPPy8j6YPXt2ETB+nn7+/BkshgszwVIECAOdeDovL6/s3bt3P/EFCkraAwbEn2/fvm28cOFC14EDB2rZ2NgYsAUMRoLl5OT8CvTXVCMjI62nT58Gg+IPq59gzoNhYJZ4uWrVqlpgWrwMdCp2P2HzLLAsvNnf318EdO4bUMAQyoRgwMrK+g8YkodOnTpVNXXq1GnABM0C9DPh0oiFheUXMC2ufPPmjciKFSuaJCQkWLi5uSEagG7Hi4FqRJKSkkqAhvyQlpaGuB8UrIQwUJ1QVlZWAdCmJ4wwm4gBwJAFJUw1gAADACpDVP6P+Cz/AAAAAElFTkSuQmCC);
583
+ }
584
+
585
+ .pp-button-style-black.pp-navigation-bar-back-bar-button-item.pp-button-state-active::before {
586
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAeCAYAAAD3qZRJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkQyQkU0NzgyN0IxMUUxQkQ1RUMwMTdDNTdBNkU4OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkQyQkU0ODgyN0IxMUUxQkQ1RUMwMTdDNTdBNkU4OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCRDJCRTQ1ODI3QjExRTFCRDVFQzAxN0M1N0E2RTg5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCRDJCRTQ2ODI3QjExRTFCRDVFQzAxN0M1N0E2RTg5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NtdpYQAAAeZJREFUeNqMlL1Lw0AYxnNp0q+0UhupoYM4NIJuHSouQgcVJ6esHSx06dBaEbFLB5cu6j9QEAQhCP4n0iIOXQrFQaHgVsEP+hGfS4y2adLkhYekd/fL895775VomsakUinGYyhQjWO8x1k4HK6LosjoEHVziXI0Gq0nk0kmEol4gvahy0QiwcBJX+sGrRBC7uDgC4VCzGg00gfnQT7E7YIROuAKsSxbDQQC23Tjk8AfNB6PrcwmPlSLxWL6Yuu8nVMELjQtHk9mOBzOZDEDYeGV3++XaaXsALv0DgAV6FlY9+HkJAG4xuZt92ELobw3HMeJPM87OljTK8NlD3txBWgQnMMGTv0xGAzy1MVLcJlMhjSbzc9+v897aFyjVTqdznu32/1ot9u7SI14gcjv1+PZbPai1WodzqvaFEQbEumtyrKs9nq9Lbc0WbPkuGTPjUbjGJ3wao45iTU7ggopPpRKpVNU83uuFSXpBTOF34KiKOd415ykQzijKWFsOZ1O3+PdGaKdYBWOYl2SpCf0okbhSekQ7QSrMM6qqrqDAr1ZQePfheNshTl/pVIpwHkwCZod7ijML+RyuSrcB4D/IXqt5wlrlvL5/AncvwAbEM7FVVgXLxaLR4IgvBDTyUugARbxWPsRYADcCSawlPao8wAAAABJRU5ErkJggg==);
587
+ }
588
+
589
+ .pp-navigation-bar ~ .pp-view {
590
+ top: 44px;
591
+ }
592
+
593
+ .pp-navigation-bar-tap-to-top-target {
594
+ position: absolute;
595
+ top: 0;
596
+ right: 20%;
597
+ left: 20%;
598
+ width: auto;
599
+ height: 6px;
600
+ z-index: 9999;
601
+ }
602
+
603
+ .pp-navigation-bar-title {
604
+ display: inline-block;
605
+ position: absolute;
606
+ top: 0.1em;
607
+ right: 20%;
608
+ left: 20%;
609
+ width: auto;
610
+ height: auto;
611
+ font-size: 1.6em;
612
+ font-weight: bold;
613
+ line-height: 1.7em;
614
+ margin: 0;
615
+ padding: 0;
616
+ color: #fff;
617
+ overflow: hidden;
618
+ text-align: center;
619
+ text-overflow: ellipsis;
620
+ text-rendering: optimizelegibility;
621
+ text-shadow: 0 -1px 1px #000;
622
+ white-space: nowrap;
623
+ z-index: 1;
624
+ }
625
+
626
+ .pp-navigation-bar-button-item-container {
627
+ position: absolute;
628
+ top: 0;
629
+ right: 0.25em;
630
+ left: 0.25em;
631
+ height: 0;
632
+ overflow: visible;
633
+ z-index: 2;
634
+ }
635
+
636
+ .pp-navigation-bar-button-items {
637
+ display: none;
638
+ }
639
+
640
+ /**
641
+ Pushpop.Switch
642
+ ==============
643
+ pp-switch
644
+ */
645
+ .pp-switch {
646
+ display: inline-block;
647
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
648
+ font-size: 1em;
649
+ width: 5.95em;
650
+ height: 2.1em;
651
+ margin: 0 0 -0.7em 0;
652
+ cursor: pointer;
653
+ position: relative;
654
+ -webkit-user-select: none;
655
+ -moz-user-select: none;
656
+ -ms-user-select: none;
657
+ -o-user-select: none;
658
+ user-select: none;
659
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
660
+ }
661
+
662
+ .pp-switch > input {
663
+ display: none;
664
+ -webkit-appearance: none;
665
+ -moz-appearance: none;
666
+ -ms-appearance: none;
667
+ -o-appearance: none;
668
+ appearance: none;
669
+ }
670
+
671
+ .pp-switch-inner {
672
+ position: static;
673
+ width: 100%;
674
+ height: 100%;
675
+ overflow: hidden;
676
+ -webkit-border-radius: 2em;
677
+ -moz-border-radius: 2em;
678
+ border-radius: 2em;
679
+ -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
680
+ -moz-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
681
+ box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.2);
682
+ }
683
+
684
+ .pp-switch-slider {
685
+ display: block;
686
+ width: 10.2em;
687
+ height: 100%;
688
+ margin-left: -4em;
689
+ -webkit-transition: margin-left 0.2s ease;
690
+ -moz-transition: margin-left 0.2s ease;
691
+ -ms-transition: margin-left 0.2s ease;
692
+ -o-transition: margin-left 0.2s ease;
693
+ transition: margin-left 0.2s ease;
694
+ }
695
+
696
+ .pp-switch-slider::after {
697
+ background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.5) 100%); /* FF3.6+ */
698
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0.5))); /* Chrome,Safari4+ */
699
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* Chrome10+,Safari5.1+ */
700
+ background: -o-linear-gradient(top, rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* Opera 11.10+ */
701
+ background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* IE10+ */
702
+ background: linear-gradient(top, rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.5) 100%); /* W3C */
703
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-9 */
704
+ content: '';
705
+ display: block;
706
+ float: left;
707
+ margin: -1em 0 0 0.6em;
708
+ width: 9em;
709
+ height: 1em;
710
+ z-index: 1;
711
+ -webkit-border-radius: 1em;
712
+ -moz-border-radius: 1em;
713
+ border-radius: 1em;
714
+ }
715
+
716
+ .pp-switch > input:checked + .pp-switch-inner > .pp-switch-slider {
717
+ margin-left: -0.1em;
718
+ }
719
+
720
+ .pp-switch-on, .pp-switch-off {
721
+ display: block;
722
+ float: left;
723
+ position: static;
724
+ font-size: 1.2em;
725
+ font-weight: bold;
726
+ width: 3.3em;
727
+ height: 1.9em;
728
+ line-height: 1.8em;
729
+ text-align: center;
730
+ -webkit-box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
731
+ -moz-box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
732
+ box-shadow: inset 0 0.15em 0.2em 0 rgba(0, 0, 0, 0.25);
733
+ }
734
+
735
+ .pp-switch-on {
736
+ background: #007fea;
737
+ color: #fff;
738
+ padding: 0 0.75em 0 0.25em;
739
+ text-shadow: 0 -0.1em 0 rgba(0, 0, 0, 0.3);
740
+ -webkit-border-top-left-radius: 2em;
741
+ -moz-border-radius-topleft: 2em;
742
+ border-top-left-radius: 2em;
743
+ -webkit-border-bottom-left-radius: 2em;
744
+ -moz-border-radius-bottomleft: 2em;
745
+ border-bottom-left-radius: 2em;
746
+ }
747
+
748
+ .pp-switch-off {
749
+ background: #e3e3e3;
750
+ color: #7f7f7f;
751
+ padding: 0 0.25em 0 0.75em;
752
+ text-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
753
+ -webkit-border-top-right-radius: 2em;
754
+ -moz-border-radius-topright: 2em;
755
+ border-top-right-radius: 2em;
756
+ -webkit-border-bottom-right-radius: 2em;
757
+ -moz-border-radius-bottomright: 2em;
758
+ border-bottom-right-radius: 2em;
759
+ }
760
+
761
+ .pp-switch-handle {
762
+ background: rgb(211,211,211); /* Old browsers */
763
+ background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
764
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
765
+ background: -webkit-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
766
+ background: -o-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
767
+ background: -ms-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
768
+ background: linear-gradient(top, rgba(211,211,211,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
769
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
770
+ border: 0.1em solid rgba(128, 128, 128, 0.8);
771
+ display: block;
772
+ float: left;
773
+ margin: -0.1em 0 0 -6.1em;
774
+ position: relative;
775
+ width: 2em;
776
+ height: 2.1em;
777
+ line-height: 2em;
778
+ z-index: 2;
779
+ -webkit-border-radius: 2em;
780
+ -moz-border-radius: 2em;
781
+ border-radius: 2em;
782
+ -webkit-box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
783
+ -moz-box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
784
+ box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.3), inset 0 0 0.1em 0.1em rgba(255, 255, 255, 1);
785
+ }
786
+
787
+ /**
788
+ Pushpop.ActionSheet
789
+ ===================
790
+ pp-action-sheet
791
+ */
792
+ .pp-action-sheet {
793
+ border-top: 1px solid rgba(0, 0, 0, 0.5);
794
+ position: absolute;
795
+ padding: 10px 0;
796
+ bottom: 0;
797
+ left: 0;
798
+ width: 0;
799
+ height: auto;
800
+ overflow: hidden;
801
+ z-index: 99999;
802
+ visibility: hidden;
803
+ -webkit-backface-visibility: hidden;
804
+ -moz-backface-visibility: hidden;
805
+ -ms-backface-visibility: hidden;
806
+ -o-backface-visibility: hidden;
807
+ backface-visibility: hidden;
808
+ -webkit-transform: translate3d(0, 100%, 0);
809
+ -moz-transform: translate(0, 100%);
810
+ -ms-transform: translate(0, 100%);
811
+ -o-transform: translate(0, 100%);
812
+ transform: translate(0, 100%);
813
+ -webkit-transition: visibility 0s linear 0.4s, width 0s ease 0.4s, -webkit-transform 0.3s ease 0s;
814
+ -moz-transition: visibility 0s linear 0.4s, width 0s ease 0.4s, -moz-transform 0.3s ease 0s;
815
+ -ms-transition: visibility 0s linear 0.4s, width 0s ease 0.4s, -ms-transform 0.3s ease 0s;
816
+ -o-transition: visibility 0s linear 0.4s, width 0s ease 0.4s, -o-transform 0.3s ease 0s;
817
+ transition: visibility 0s linear 0.4s, width 0s ease 0.4s, transform 0.3s ease 0s;
818
+ }
819
+
820
+ .pp-action-sheet::before {
821
+ background: -moz-linear-gradient(top, rgba(162,168,176,1) 0%, rgba(108,114,125,0.95) 50%, rgba(94,102,113,0.95) 51%, rgba(80,86,97,0.9) 100%); /* FF3.6+ */
822
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(162,168,176,1)), color-stop(50%,rgba(108,114,125,0.95)), color-stop(51%,rgba(94,102,113,0.95)), color-stop(100%,rgba(80,86,97,0.9))); /* Chrome,Safari4+ */
823
+ background: -webkit-linear-gradient(top, rgba(162,168,176,1) 0%,rgba(108,114,125,0.95) 50%,rgba(94,102,113,0.95) 51%,rgba(80,86,97,0.9) 100%); /* Chrome10+,Safari5.1+ */
824
+ background: -o-linear-gradient(top, rgba(162,168,176,1) 0%,rgba(108,114,125,0.95) 50%,rgba(94,102,113,0.95) 51%,rgba(80,86,97,0.9) 100%); /* Opera 11.10+ */
825
+ background: -ms-linear-gradient(top, rgba(162,168,176,1) 0%,rgba(108,114,125,0.95) 50%,rgba(94,102,113,0.95) 51%,rgba(80,86,97,0.9) 100%); /* IE10+ */
826
+ background: linear-gradient(to bottom, rgba(162,168,176,1) 0%,rgba(108,114,125,0.95) 50%,rgba(94,102,113,0.95) 51%,rgba(80,86,97,0.9) 100%); /* W3C */
827
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2a8b0', endColorstr='#e6505661',GradientType=0 ); /* IE6-9 */
828
+ content: '';
829
+ display: block;
830
+ position: absolute;
831
+ top: 0;
832
+ left: 0;
833
+ width: 100%;
834
+ height: 42px;
835
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
836
+ -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
837
+ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
838
+ }
839
+
840
+ .pp-action-sheet::after {
841
+ background: rgba(80, 86, 97, 0.9);
842
+ content: '';
843
+ display: block;
844
+ position: absolute;
845
+ top: 42px;
846
+ bottom: 0;
847
+ left: 0;
848
+ width: 100%;
849
+ height: auto;
850
+ z-index: 1;
851
+ }
852
+
853
+ .pp-action-sheet.pp-active {
854
+ width: 100%;
855
+ visibility: visible;
856
+ -webkit-transform: translate3d(0, 0, 0);
857
+ -moz-transform: translate(0, 0);
858
+ -ms-transform: translate(0, 0);
859
+ -o-transform: translate(0, 0);
860
+ transform: translate(0, 0);
861
+ -webkit-transition-delay: 0s;
862
+ -moz-transition-delay: 0s;
863
+ -ms-transition-delay: 0s;
864
+ -o-transition-delay: 0s;
865
+ transition-delay: 0s;
866
+ }
867
+
868
+ .pp-action-sheet > .pp-button {
869
+ border: none;
870
+ display: block;
871
+ font-size: 1.5em;
872
+ line-height: 1.5em;
873
+ position: relative;
874
+ padding: 0.3em 0.75em;
875
+ margin: 0.75em 1.25em;
876
+ min-width: auto;
877
+ overflow: visible;
878
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
879
+ z-index: 2;
880
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.3);
881
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.3);
882
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.3);
883
+ }
884
+
885
+ .pp-action-sheet > .pp-button.pp-button-style-default {
886
+ background: rgb(239,239,240); /* Old browsers */
887
+ background: -moz-linear-gradient(top, rgba(239,239,240,1) 0%, rgba(207,208,210,1) 50%, rgba(185,186,189,1) 51%, rgba(188,190,193,1) 100%); /* FF3.6+ */
888
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,240,1)), color-stop(50%,rgba(207,208,210,1)), color-stop(51%,rgba(185,186,189,1)), color-stop(100%,rgba(188,190,193,1))); /* Chrome,Safari4+ */
889
+ background: -webkit-linear-gradient(top, rgba(239,239,240,1) 0%,rgba(207,208,210,1) 50%,rgba(185,186,189,1) 51%,rgba(188,190,193,1) 100%); /* Chrome10+,Safari5.1+ */
890
+ background: -o-linear-gradient(top, rgba(239,239,240,1) 0%,rgba(207,208,210,1) 50%,rgba(185,186,189,1) 51%,rgba(188,190,193,1) 100%); /* Opera 11.10+ */
891
+ background: -ms-linear-gradient(top, rgba(239,239,240,1) 0%,rgba(207,208,210,1) 50%,rgba(185,186,189,1) 51%,rgba(188,190,193,1) 100%); /* IE10+ */
892
+ background: linear-gradient(to bottom, rgba(239,239,240,1) 0%,rgba(207,208,210,1) 50%,rgba(185,186,189,1) 51%,rgba(188,190,193,1) 100%); /* W3C */
893
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeff0', endColorstr='#bcbec1',GradientType=0 ); /* IE6-9 */
894
+ color: #000;
895
+ }
896
+
897
+ .pp-action-sheet > .pp-button.pp-button-state-active {
898
+ background: rgb(145,159,215); /* Old browsers */
899
+ background: -moz-linear-gradient(top, rgba(145,159,215,1) 0%, rgba(52,77,182,1) 50%, rgba(21,51,171,1) 51%, rgba(26,85,182,1) 100%); /* FF3.6+ */
900
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,159,215,1)), color-stop(50%,rgba(52,77,182,1)), color-stop(51%,rgba(21,51,171,1)), color-stop(100%,rgba(26,85,182,1))); /* Chrome,Safari4+ */
901
+ background: -webkit-linear-gradient(top, rgba(145,159,215,1) 0%,rgba(52,77,182,1) 50%,rgba(21,51,171,1) 51%,rgba(26,85,182,1) 100%); /* Chrome10+,Safari5.1+ */
902
+ background: -o-linear-gradient(top, rgba(145,159,215,1) 0%,rgba(52,77,182,1) 50%,rgba(21,51,171,1) 51%,rgba(26,85,182,1) 100%); /* Opera 11.10+ */
903
+ background: -ms-linear-gradient(top, rgba(145,159,215,1) 0%,rgba(52,77,182,1) 50%,rgba(21,51,171,1) 51%,rgba(26,85,182,1) 100%); /* IE10+ */
904
+ background: linear-gradient(to bottom, rgba(145,159,215,1) 0%,rgba(52,77,182,1) 50%,rgba(21,51,171,1) 51%,rgba(26,85,182,1) 100%); /* W3C */
905
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919fd7', endColorstr='#1a55b6',GradientType=0 ); /* IE6-9 */
906
+ color: #fff;
907
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
908
+ }
909
+
910
+ /**
911
+ Pushpop Transition
912
+ ==================
913
+ slide-horizontal (2D)
914
+ flip-horizontal (2D)
915
+ card-swap(2D)
916
+ */
917
+ .pp-view.slide-horizontal,
918
+ .pp-view.flip-horizontal,
919
+ .pp-view.card-swap {
920
+ -webkit-transition: -webkit-transform 0.5s ease;
921
+ -moz-transition: -moz-transform 0.5s ease;
922
+ -ms-transition: -ms-transform 0.5s ease;
923
+ -o-transition: -o-transform 0.5s ease;
924
+ transition: transform 0.5s ease;
925
+ }
926
+
927
+ .pp-view.push.slide-horizontal,
928
+ .pp-view.push.flip-horizontal,
929
+ .pp-view.push.card-swap {
930
+ -webkit-transform: translate(100%, 0);
931
+ -moz-transform: translate(100%, 0);
932
+ -ms-transform: translate(100%, 0);
933
+ -o-transform: translate(100%, 0);
934
+ transform: translate(100%, 0);
935
+ }
936
+
937
+ .pp-view.push.slide-horizontal.transition,
938
+ .pp-view.push.flip-horizontal.transition,
939
+ .pp-view.push.card-swap.transition {
940
+ -webkit-transform: translate(0, 0);
941
+ -moz-transform: translate(0, 0);
942
+ -ms-transform: translate(0, 0);
943
+ -o-transform: translate(0, 0);
944
+ transform: translate(0, 0);
945
+ }
946
+
947
+ .pp-view.push.slide-horizontal.pp-active,
948
+ .pp-view.push.flip-horizontal.pp-active,
949
+ .pp-view.push.card-swap.pp-active {
950
+ -webkit-transform: translate(0, 0);
951
+ -moz-transform: translate(0, 0);
952
+ -ms-transform: translate(0, 0);
953
+ -o-transform: translate(0, 0);
954
+ transform: translate(0, 0);
955
+ }
956
+
957
+ .pp-view.push.slide-horizontal.pp-active.transition,
958
+ .pp-view.push.flip-horizontal.pp-active.transition,
959
+ .pp-view.push.card-swap.pp-active.transition {
960
+ -webkit-transform: translate(-100%, 0);
961
+ -moz-transform: translate(-100%, 0);
962
+ -ms-transform: translate(-100%, 0);
963
+ -o-transform: translate(-100%, 0);
964
+ transform: translate(-100%, 0);
965
+ }
966
+
967
+ .pp-view.pop.slide-horizontal,
968
+ .pp-view.pop.flip-horizontal,
969
+ .pp-view.pop.card-swap {
970
+ -webkit-transform: translate(-100%, 0);
971
+ -moz-transform: translate(-100%, 0);
972
+ -ms-transform: translate(-100%, 0);
973
+ -o-transform: translate(-100%, 0);
974
+ transform: translate(-100%, 0);
975
+ }
976
+
977
+ .pp-view.pop.slide-horizontal.transition,
978
+ .pp-view.pop.flip-horizontal.transition,
979
+ .pp-view.pop.card-swap.transition {
980
+ -webkit-transform: translate(0, 0);
981
+ -moz-transform: translate(0, 0);
982
+ -ms-transform: translate(0, 0);
983
+ -o-transform: translate(0, 0);
984
+ transform: translate(0, 0);
985
+ }
986
+
987
+ .pp-view.pop.slide-horizontal.pp-active,
988
+ .pp-view.pop.flip-horizontal.pp-active,
989
+ .pp-view.pop.card-swap.pp-active {
990
+ -webkit-transform: translate(0, 0);
991
+ -moz-transform: translate(0, 0);
992
+ -ms-transform: translate(0, 0);
993
+ -o-transform: translate(0, 0);
994
+ transform: translate(0, 0);
995
+ }
996
+
997
+ .pp-view.pop.slide-horizontal.pp-active.transition,
998
+ .pp-view.pop.flip-horizontal.pp-active.transition,
999
+ .pp-view.pop.card-swap.pp-active.transition {
1000
+ -webkit-transform: translate(100%, 0);
1001
+ -moz-transform: translate(100%, 0);
1002
+ -ms-transform: translate(100%, 0);
1003
+ -o-transform: translate(100%, 0);
1004
+ transform: translate(100%, 0);
1005
+ }
1006
+
1007
+ /**
1008
+ Pushpop Transition
1009
+ ==================
1010
+ slide-horizontal (3D)
1011
+ */
1012
+ .csstransforms3d .pp-view.slide-horizontal {
1013
+ -webkit-transition: -webkit-transform 0.5s ease;
1014
+ -moz-transition: -moz-transform 0.5s ease;
1015
+ -ms-transition: -ms-transform 0.5s ease;
1016
+ -o-transition: -o-transform 0.5s ease;
1017
+ transition: transform 0.5s ease;
1018
+ }
1019
+ .csstransforms3d .pp-view.push.slide-horizontal {
1020
+ -webkit-transform: translate3d(100%, 0, 0);
1021
+ -moz-transform: translate3d(100%, 0, 0);
1022
+ -ms-transform: translate3d(100%, 0, 0);
1023
+ -o-transform: translate3d(100%, 0, 0);
1024
+ transform: translate3d(100%, 0, 0);
1025
+ }
1026
+ .csstransforms3d .pp-view.push.slide-horizontal.transition {
1027
+ -webkit-transform: translate3d(0, 0, 0);
1028
+ -moz-transform: translate3d(0, 0, 0);
1029
+ -ms-transform: translate3d(0, 0, 0);
1030
+ -o-transform: translate3d(0, 0, 0);
1031
+ transform: translate3d(0, 0, 0);
1032
+ }
1033
+ .csstransforms3d .pp-view.push.slide-horizontal.pp-active {
1034
+ -webkit-transform: translate3d(0, 0, 0);
1035
+ -moz-transform: translate3d(0, 0, 0);
1036
+ -ms-transform: translate3d(0, 0, 0);
1037
+ -o-transform: translate3d(0, 0, 0);
1038
+ transform: translate3d(0, 0, 0);
1039
+ }
1040
+ .csstransforms3d .pp-view.push.slide-horizontal.pp-active.transition {
1041
+ -webkit-transform: translate3d(-100%, 0, 0);
1042
+ -moz-transform: translate3d(-100%, 0, 0);
1043
+ -ms-transform: translate3d(-100%, 0, 0);
1044
+ -o-transform: translate3d(-100%, 0, 0);
1045
+ transform: translate3d(-100%, 0, 0);
1046
+ }
1047
+ .csstransforms3d .pp-view.pop.slide-horizontal {
1048
+ -webkit-transform: translate3d(-100%, 0, 0);
1049
+ -moz-transform: translate3d(-100%, 0, 0);
1050
+ -ms-transform: translate3d(-100%, 0, 0);
1051
+ -o-transform: translate3d(-100%, 0, 0);
1052
+ transform: translate3d(-100%, 0, 0);
1053
+ }
1054
+ .csstransforms3d .pp-view.pop.slide-horizontal.transition {
1055
+ -webkit-transform: translate3d(0, 0, 0);
1056
+ -moz-transform: translate3d(0, 0, 0);
1057
+ -ms-transform: translate3d(0, 0, 0);
1058
+ -o-transform: translate3d(0, 0, 0);
1059
+ transform: translate3d(0, 0, 0);
1060
+ }
1061
+ .csstransforms3d .pp-view.pop.slide-horizontal.pp-active {
1062
+ -webkit-transform: translate3d(0, 0, 0);
1063
+ -moz-transform: translate3d(0, 0, 0);
1064
+ -ms-transform: translate3d(0, 0, 0);
1065
+ -o-transform: translate3d(0, 0, 0);
1066
+ transform: translate3d(0, 0, 0);
1067
+ }
1068
+ .csstransforms3d .pp-view.pop.slide-horizontal.pp-active.transition {
1069
+ -webkit-transform: translate3d(100%, 0, 0);
1070
+ -moz-transform: translate3d(100%, 0, 0);
1071
+ -ms-transform: translate3d(100%, 0, 0);
1072
+ -o-transform: translate3d(100%, 0, 0);
1073
+ transform: translate3d(100%, 0, 0);
1074
+ }
1075
+
1076
+ /**
1077
+ Pushpop Transition
1078
+ ==================
1079
+ slide-vertical (2D)
1080
+ flip-vertical (2D)
1081
+ */
1082
+ .pp-view.slide-vertical,
1083
+ .pp-view.flip-vertical {
1084
+ -webkit-transition: -webkit-transform 0.5s ease;
1085
+ -moz-transition: -moz-transform 0.5s ease;
1086
+ -ms-transition: -ms-transform 0.5s ease;
1087
+ -o-transition: -o-transform 0.5s ease;
1088
+ transition: transform 0.5s ease;
1089
+ }
1090
+
1091
+ .pp-view.push.slide-vertical,
1092
+ .pp-view.push.flip-vertical {
1093
+ z-index: 1;
1094
+ -webkit-transform: translate(0, 100%);
1095
+ -moz-transform: translate(0, 100%);
1096
+ -ms-transform: translate(0, 100%);
1097
+ -o-transform: translate(0, 100%);
1098
+ transform: translate(0, 100%);
1099
+ }
1100
+
1101
+ .pp-view.push.slide-vertical.transition,
1102
+ .pp-view.push.flip-vertical.transition {
1103
+ -webkit-transform: translate(0, 0);
1104
+ -moz-transform: translate(0, 0);
1105
+ -ms-transform: translate(0, 0);
1106
+ -o-transform: translate(0, 0);
1107
+ transform: translate(0, 0);
1108
+ }
1109
+
1110
+ .pp-view.push.slide-vertical.pp-active,
1111
+ .pp-view.push.flip-vertical.pp-active {
1112
+ z-index: 0;
1113
+ -webkit-transform: translate(0, 0);
1114
+ -moz-transform: translate(0, 0);
1115
+ -ms-transform: translate(0, 0);
1116
+ -o-transform: translate(0, 0);
1117
+ transform: translate(0, 0);
1118
+ }
1119
+
1120
+ .pp-view.push.slide-vertical.pp-active.transition,
1121
+ .pp-view.push.flip-vertical.pp-active.transition {
1122
+ -webkit-transform: translate(0, -1%);
1123
+ -moz-transform: translate(0, -1%);
1124
+ -ms-transform: translate(0, -1%);
1125
+ -o-transform: translate(0, -1%);
1126
+ transform: translate(0, -1%);
1127
+ }
1128
+
1129
+ .pp-view.pop.slide-vertical,
1130
+ .pp-view.pop.flip-vertical {
1131
+ z-index: 0;
1132
+ -webkit-transform: translate(0, -1%);
1133
+ -moz-transform: translate(0, -1%);
1134
+ -ms-transform: translate(0, -1%);
1135
+ -o-transform: translate(0, -1%);
1136
+ transform: translate(0, -1%);
1137
+ }
1138
+
1139
+ .pp-view.pop.slide-vertical.transition,
1140
+ .pp-view.pop.flip-vertical.transition {
1141
+ -webkit-transform: translate(0, 0);
1142
+ -moz-transform: translate(0, 0);
1143
+ -ms-transform: translate(0, 0);
1144
+ -o-transform: translate(0, 0);
1145
+ transform: translate(0, 0);
1146
+ }
1147
+
1148
+ .pp-view.pop.slide-vertical.pp-active,
1149
+ .pp-view.pop.flip-vertical.pp-active {
1150
+ z-index: 1;
1151
+ -webkit-transform: translate(0, 0);
1152
+ -moz-transform: translate(0, 0);
1153
+ -ms-transform: translate(0, 0);
1154
+ -o-transform: translate(0, 0);
1155
+ transform: translate(0, 0);
1156
+ }
1157
+
1158
+ .pp-view.pop.slide-vertical.pp-active.transition,
1159
+ .pp-view.pop.flip-vertical.pp-active.transition {
1160
+ -webkit-transform: translate(0, 100%);
1161
+ -moz-transform: translate(0, 100%);
1162
+ -ms-transform: translate(0, 100%);
1163
+ -o-transform: translate(0, 100%);
1164
+ transform: translate(0, 100%);
1165
+ }
1166
+
1167
+ /**
1168
+ Pushpop Transition
1169
+ ==================
1170
+ slide-vertical (3D)
1171
+ */
1172
+ .csstransforms3d .pp-view.slide-vertical {
1173
+ -webkit-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
1174
+ -moz-box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
1175
+ box-shadow: 0 -2px 16px 6px rgba(0, 0, 0, 0.6);
1176
+ -webkit-transition: -webkit-transform 0.5s ease;
1177
+ -moz-transition: -moz-transform 0.5s ease;
1178
+ -ms-transition: -ms-transform 0.5s ease;
1179
+ -o-transition: -o-transform 0.5s ease;
1180
+ transition: transform 0.5s ease;
1181
+ }
1182
+ .csstransforms3d .pp-view.push.slide-vertical {
1183
+ z-index: 1;
1184
+ -webkit-transform: translate3d(0, 100%, 0);
1185
+ -moz-transform: translate3d(0, 100%, 0);
1186
+ -ms-transform: translate3d(0, 100%, 0);
1187
+ -o-transform: translate3d(0, 100%, 0);
1188
+ transform: translate3d(0, 100%, 0);
1189
+ }
1190
+ .csstransforms3d .pp-view.push.slide-vertical.transition {
1191
+ -webkit-transform: translate3d(0, 0, 0);
1192
+ -moz-transform: translate3d(0, 0, 0);
1193
+ -ms-transform: translate3d(0, 0, 0);
1194
+ -o-transform: translate3d(0, 0, 0);
1195
+ transform: translate3d(0, 0, 0);
1196
+ }
1197
+ .csstransforms3d .pp-view.push.slide-vertical.pp-active {
1198
+ z-index: 0;
1199
+ -webkit-transform: translate3d(0, 0, 0);
1200
+ -moz-transform: translate3d(0, 0, 0);
1201
+ -ms-transform: translate3d(0, 0, 0);
1202
+ -o-transform: translate3d(0, 0, 0);
1203
+ transform: translate3d(0, 0, 0);
1204
+ }
1205
+ .csstransforms3d .pp-view.push.slide-vertical.pp-active.transition {
1206
+ -webkit-transform: translate3d(0, -1%, 0);
1207
+ -moz-transform: translate3d(0, -1%, 0);
1208
+ -ms-transform: translate3d(0, -1%, 0);
1209
+ -o-transform: translate3d(0, -1%, 0);
1210
+ transform: translate3d(0, -1%, 0);
1211
+ }
1212
+ .csstransforms3d .pp-view.pop.slide-vertical {
1213
+ z-index: 0;
1214
+ -webkit-transform: translate3d(0, -1%, 0);
1215
+ -moz-transform: translate3d(0, -1%, 0);
1216
+ -ms-transform: translate3d(0, -1%, 0);
1217
+ -o-transform: translate3d(0, -1%, 0);
1218
+ transform: translate3d(0, -1%, 0);
1219
+ }
1220
+ .csstransforms3d .pp-view.pop.slide-vertical.transition {
1221
+ -webkit-transform: translate3d(0, 0, 0);
1222
+ -moz-transform: translate3d(0, 0, 0);
1223
+ -ms-transform: translate3d(0, 0, 0);
1224
+ -o-transform: translate3d(0, 0, 0);
1225
+ transform: translate3d(0, 0, 0);
1226
+ }
1227
+ .csstransforms3d .pp-view.pop.slide-vertical.pp-active {
1228
+ z-index: 1;
1229
+ -webkit-transform: translate3d(0, 0, 0);
1230
+ -moz-transform: translate3d(0, 0, 0);
1231
+ -ms-transform: translate3d(0, 0, 0);
1232
+ -o-transform: translate3d(0, 0, 0);
1233
+ transform: translate3d(0, 0, 0);
1234
+ }
1235
+ .csstransforms3d .pp-view.pop.slide-vertical.pp-active.transition {
1236
+ -webkit-transform: translate3d(0, 100%, 0);
1237
+ -moz-transform: translate3d(0, 100%, 0);
1238
+ -ms-transform: translate3d(0, 100%, 0);
1239
+ -o-transform: translate3d(0, 100%, 0);
1240
+ transform: translate3d(0, 100%, 0);
1241
+ }
1242
+
1243
+ /**
1244
+ Pushpop Transition
1245
+ ==================
1246
+ flip-horizontal (3D)
1247
+ */
1248
+ .csstransforms3d .pp-view.flip-horizontal {
1249
+ -webkit-transition: -webkit-transform 1s ease;
1250
+ -moz-transition: -moz-transform 1s ease;
1251
+ -ms-transition: -ms-transform 1s ease;
1252
+ -o-transition: -o-transform 1s ease;
1253
+ transition: transform 1s ease;
1254
+ }
1255
+ .csstransforms3d .pp-view.push.flip-horizontal {
1256
+ -webkit-transform: rotate3d(0, 1, 0, 180deg);
1257
+ -moz-transform: rotate3d(0, 1, 0, 180deg);
1258
+ -ms-transform: rotate3d(0, 1, 0, 180deg);
1259
+ -o-transform: rotate3d(0, 1, 0, 180deg);
1260
+ transform: rotate3d(0, 1, 0, 180deg);
1261
+ }
1262
+ .csstransforms3d .pp-view.push.flip-horizontal.transition {
1263
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1264
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1265
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1266
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1267
+ transform: rotate3d(0, 1, 0, 0deg);
1268
+ }
1269
+ .csstransforms3d .pp-view.push.flip-horizontal.pp-active {
1270
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1271
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1272
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1273
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1274
+ transform: rotate3d(0, 1, 0, 0deg);
1275
+ }
1276
+ .csstransforms3d .pp-view.push.flip-horizontal.pp-active.transition {
1277
+ -webkit-transform: rotate3d(0, 1, 0, -180deg);
1278
+ -moz-transform: rotate3d(0, 1, 0, -180deg);
1279
+ -ms-transform: rotate3d(0, 1, 0, -180deg);
1280
+ -o-transform: rotate3d(0, 1, 0, -180deg);
1281
+ transform: rotate3d(0, 1, 0, -180deg);
1282
+ }
1283
+ .csstransforms3d .pp-view.pop.flip-horizontal {
1284
+ -webkit-transform: rotate3d(0, 1, 0, -180deg);
1285
+ -moz-transform: rotate3d(0, 1, 0, -180deg);
1286
+ -ms-transform: rotate3d(0, 1, 0, -180deg);
1287
+ -o-transform: rotate3d(0, 1, 0, -180deg);
1288
+ transform: rotate3d(0, 1, 0, -180deg);
1289
+ }
1290
+ .csstransforms3d .pp-view.pop.flip-horizontal.transition {
1291
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1292
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1293
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1294
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1295
+ transform: rotate3d(0, 1, 0, 0deg);
1296
+ }
1297
+ .csstransforms3d .pp-view.pop.flip-horizontal.pp-active {
1298
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1299
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1300
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1301
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1302
+ transform: rotate3d(0, 1, 0, 0deg);
1303
+ }
1304
+ .csstransforms3d .pp-view.pop.flip-horizontal.pp-active.transition {
1305
+ -webkit-transform: rotate3d(0, 1, 0, 180deg);
1306
+ -moz-transform: rotate3d(0, 1, 0, 180deg);
1307
+ -ms-transform: rotate3d(0, 1, 0, 180deg);
1308
+ -o-transform: rotate3d(0, 1, 0, 180deg);
1309
+ transform: rotate3d(0, 1, 0, 180deg);
1310
+ }
1311
+
1312
+ /**
1313
+ Pushpop Transition
1314
+ ==================
1315
+ flip-vertical (3D)
1316
+ */
1317
+ .csstransforms3d .pp-view.flip-vertical {
1318
+ -webkit-transition: -webkit-transform 1s ease;
1319
+ -moz-transition: -moz-transform 1s ease;
1320
+ -ms-transition: -ms-transform 1s ease;
1321
+ -o-transition: -o-transform 1s ease;
1322
+ transition: transform 1s ease;
1323
+ }
1324
+ .csstransforms3d .pp-view.push.flip-vertical {
1325
+ -webkit-transform: rotate3d(1, 0, 0, -180deg);
1326
+ -moz-transform: rotate3d(1, 0, 0, -180deg);
1327
+ -ms-transform: rotate3d(1, 0, 0, -180deg);
1328
+ -o-transform: rotate3d(1, 0, 0, -180deg);
1329
+ transform: rotate3d(1, 0, 0, -180deg);
1330
+ }
1331
+ .csstransforms3d .pp-view.push.flip-vertical.transition {
1332
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1333
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1334
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1335
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1336
+ transform: rotate3d(1, 0, 0, 0deg);
1337
+ }
1338
+ .csstransforms3d .pp-view.push.flip-vertical.pp-active {
1339
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1340
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1341
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1342
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1343
+ transform: rotate3d(1, 0, 0, 0deg);
1344
+ }
1345
+ .csstransforms3d .pp-view.push.flip-vertical.pp-active.transition {
1346
+ -webkit-transform: rotate3d(1, 0, 0, 180deg);
1347
+ -moz-transform: rotate3d(1, 0, 0, 180deg);
1348
+ -ms-transform: rotate3d(1, 0, 0, 180deg);
1349
+ -o-transform: rotate3d(1, 0, 0, 180deg);
1350
+ transform: rotate3d(1, 0, 0, 180deg);
1351
+ }
1352
+ .csstransforms3d .pp-view.pop.flip-vertical {
1353
+ -webkit-transform: rotate3d(1, 0, 0, 180deg);
1354
+ -moz-transform: rotate3d(1, 0, 0, 180deg);
1355
+ -ms-transform: rotate3d(1, 0, 0, 180deg);
1356
+ -o-transform: rotate3d(1, 0, 0, 180deg);
1357
+ transform: rotate3d(1, 0, 0, 180deg);
1358
+ }
1359
+ .csstransforms3d .pp-view.pop.flip-vertical.transition {
1360
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1361
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1362
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1363
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1364
+ transform: rotate3d(1, 0, 0, 0deg);
1365
+ }
1366
+ .csstransforms3d .pp-view.pop.flip-vertical.pp-active {
1367
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1368
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1369
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1370
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1371
+ transform: rotate3d(1, 0, 0, 0deg);
1372
+ }
1373
+ .csstransforms3d .pp-view.pop.flip-vertical.pp-active.transition {
1374
+ -webkit-transform: rotate3d(1, 0, 0, -180deg);
1375
+ -moz-transform: rotate3d(1, 0, 0, -180deg);
1376
+ -ms-transform: rotate3d(1, 0, 0, -180deg);
1377
+ -o-transform: rotate3d(1, 0, 0, -180deg);
1378
+ transform: rotate3d(1, 0, 0, -180deg);
1379
+ }
1380
+
1381
+ /**
1382
+ Pushpop Transition
1383
+ ==================
1384
+ card-swap (3D)
1385
+ */
1386
+ .csstransforms3d .pp-view.card-swap {
1387
+ -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
1388
+ -moz-transition: -moz-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
1389
+ -ms-transition: -ms-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
1390
+ -o-transition: -o-transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
1391
+ transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 0.25);
1392
+ }
1393
+ .csstransforms3d .pp-view.push.card-swap {
1394
+ -webkit-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
1395
+ -moz-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
1396
+ -ms-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
1397
+ -o-transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
1398
+ transform: rotate3d(0, 1, 0, -30deg) translate3d(100%, 0, -2000px);
1399
+ }
1400
+ .csstransforms3d .pp-view.push.card-swap.transition {
1401
+ -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1402
+ -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1403
+ -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1404
+ -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1405
+ transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1406
+ }
1407
+ .csstransforms3d .pp-view.push.card-swap.pp-active {
1408
+ -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1409
+ -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1410
+ -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1411
+ -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1412
+ transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1413
+ }
1414
+ .csstransforms3d .pp-view.push.card-swap.pp-active.transition {
1415
+ -webkit-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
1416
+ -moz-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
1417
+ -ms-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
1418
+ -o-transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
1419
+ transform: rotate3d(0, 1, 0, 50deg) translate3d(0, 0, -1500px);
1420
+ }
1421
+ .csstransforms3d .pp-view.pop.card-swap {
1422
+ -webkit-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
1423
+ -moz-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
1424
+ -ms-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
1425
+ -o-transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
1426
+ transform: rotate3d(0, 1, 0, 30deg) translate3d(-100%, 0, -2000px);
1427
+ }
1428
+ .csstransforms3d .pp-view.pop.card-swap.transition {
1429
+ -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1430
+ -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1431
+ -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1432
+ -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1433
+ transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1434
+ }
1435
+ .csstransforms3d .pp-view.pop.card-swap.pp-active {
1436
+ -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1437
+ -moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1438
+ -ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1439
+ -o-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1440
+ transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0);
1441
+ }
1442
+ .csstransforms3d .pp-view.pop.card-swap.pp-active.transition {
1443
+ -webkit-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
1444
+ -moz-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
1445
+ -ms-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
1446
+ -o-transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
1447
+ transform: rotate3d(0, 1, 0, -50deg) translate3d(0, 0, -1500px);
1448
+ }
1449
+
1450
+ /**
1451
+ Pushpop Transition
1452
+ ==================
1453
+ zoom (2D)
1454
+ */
1455
+ .pp-view.zoom {
1456
+ -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
1457
+ -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
1458
+ -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
1459
+ -o-transition: -o-transform 0.5s ease, opacity 0.5s ease;
1460
+ transition: transform 0.5s ease, opacity 0.5s ease;
1461
+ }
1462
+ .pp-view.push.zoom {
1463
+ z-index: 1;
1464
+ opacity: 0.75;
1465
+ -webkit-transform: scale(0.75, 0.75);
1466
+ -moz-transform: scale(0.75, 0.75);
1467
+ -ms-transform: scale(0.75, 0.75);
1468
+ -o-transform: scale(0.75, 0.75);
1469
+ transform: scale(0.75, 0.75);
1470
+ }
1471
+ .pp-view.push.zoom.transition {
1472
+ opacity: 1;
1473
+ -webkit-transform: scale(1, 1);
1474
+ -moz-transform: scale(1, 1);
1475
+ -ms-transform: scale(1, 1);
1476
+ -o-transform: scale(1, 1);
1477
+ transform: scale(1, 1);
1478
+ }
1479
+ .pp-view.push.zoom.pp-active {
1480
+ z-index: 2;
1481
+ opacity: 1;
1482
+ -webkit-transform: scale(1, 1);
1483
+ -moz-transform: scale(1, 1);
1484
+ -ms-transform: scale(1, 1);
1485
+ -o-transform: scale(1, 1);
1486
+ transform: scale(1, 1);
1487
+ }
1488
+ .pp-view.push.zoom.pp-active.transition {
1489
+ opacity: 0;
1490
+ -webkit-transform: scale(1.5, 1.5);
1491
+ -moz-transform: scale(1.5, 1.5);
1492
+ -ms-transform: scale(1.5, 1.5);
1493
+ -o-transform: scale(1.5, 1.5);
1494
+ transform: scale(1.5, 1.5);
1495
+ }
1496
+ .pp-view.pop.zoom {
1497
+ z-index: 2;
1498
+ opacity: 0;
1499
+ -webkit-transform: scale(1.5, 1.5);
1500
+ -moz-transform: scale(1.5, 1.5);
1501
+ -ms-transform: scale(1.5, 1.5);
1502
+ -o-transform: scale(1.5, 1.5);
1503
+ transform: scale(1.5, 1.5);
1504
+ }
1505
+ .pp-view.pop.zoom.transition {
1506
+ opacity: 1;
1507
+ -webkit-transform: scale(1, 1);
1508
+ -moz-transform: scale(1, 1);
1509
+ -ms-transform: scale(1, 1);
1510
+ -o-transform: scale(1, 1);
1511
+ transform: scale(1, 1);
1512
+ }
1513
+ .pp-view.pop.zoom.pp-active {
1514
+ z-index: 1;
1515
+ opacity: 1;
1516
+ -webkit-transform: scale(1, 1);
1517
+ -moz-transform: scale(1, 1);
1518
+ -ms-transform: scale(1, 1);
1519
+ -o-transform: scale(1, 1);
1520
+ transform: scale(1, 1);
1521
+ }
1522
+ .pp-view.pop.zoom.pp-active.transition {
1523
+ opacity: 0.75;
1524
+ -webkit-transform: scale(0.75, 0.75);
1525
+ -moz-transform: scale(0.75, 0.75);
1526
+ -ms-transform: scale(0.75, 0.75);
1527
+ -o-transform: scale(0.75, 0.75);
1528
+ transform: scale(0.75, 0.75);
1529
+ }
1530
+
1531
+ /**
1532
+ Pushpop Transition
1533
+ ==================
1534
+ zoom (3D)
1535
+ */
1536
+ .csstransforms3d .pp-view.zoom {
1537
+ -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
1538
+ -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
1539
+ -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
1540
+ -o-transition: -o-transform 0.5s ease, opacity 0.5s ease;
1541
+ transition: transform 0.5s ease, opacity 0.5s ease;
1542
+ }
1543
+ .csstransforms3d .pp-view.push.zoom {
1544
+ z-index: 1;
1545
+ opacity: 0.75;
1546
+ -webkit-transform: scale3d(0.75, 0.75, 1);
1547
+ -moz-transform: scale3d(0.75, 0.75, 1);
1548
+ -ms-transform: scale3d(0.75, 0.75, 1);
1549
+ -o-transform: scale3d(0.75, 0.75, 1);
1550
+ transform: scale3d(0.75, 0.75, 1);
1551
+ }
1552
+ .csstransforms3d .pp-view.push.zoom.transition {
1553
+ opacity: 1;
1554
+ -webkit-transform: scale3d(1, 1, 1);
1555
+ -moz-transform: scale3d(1, 1, 1);
1556
+ -ms-transform: scale3d(1, 1, 1);
1557
+ -o-transform: scale3d(1, 1, 1);
1558
+ transform: scale3d(1, 1, 1);
1559
+ }
1560
+ .csstransforms3d .pp-view.push.zoom.pp-active {
1561
+ z-index: 2;
1562
+ opacity: 1;
1563
+ -webkit-transform: scale3d(1, 1, 1);
1564
+ -moz-transform: scale3d(1, 1, 1);
1565
+ -ms-transform: scale3d(1, 1, 1);
1566
+ -o-transform: scale3d(1, 1, 1);
1567
+ transform: scale3d(1, 1, 1);
1568
+ }
1569
+ .csstransforms3d .pp-view.push.zoom.pp-active.transition {
1570
+ opacity: 0;
1571
+ -webkit-transform: scale3d(1.5, 1.5, 1);
1572
+ -moz-transform: scale3d(1.5, 1.5, 1);
1573
+ -ms-transform: scale3d(1.5, 1.5, 1);
1574
+ -o-transform: scale3d(1.5, 1.5, 1);
1575
+ transform: scale3d(1.5, 1.5, 1);
1576
+ }
1577
+ .csstransforms3d .pp-view.pop.zoom {
1578
+ z-index: 2;
1579
+ opacity: 0;
1580
+ -webkit-transform: scale3d(1.5, 1.5, 1);
1581
+ -moz-transform: scale3d(1.5, 1.5, 1);
1582
+ -ms-transform: scale3d(1.5, 1.5, 1);
1583
+ -o-transform: scale3d(1.5, 1.5, 1);
1584
+ transform: scale3d(1.5, 1.5, 1);
1585
+ }
1586
+ .csstransforms3d .pp-view.pop.zoom.transition {
1587
+ opacity: 1;
1588
+ -webkit-transform: scale3d(1, 1, 1);
1589
+ -moz-transform: scale3d(1, 1, 1);
1590
+ -ms-transform: scale3d(1, 1, 1);
1591
+ -o-transform: scale3d(1, 1, 1);
1592
+ transform: scale3d(1, 1, 1);
1593
+ }
1594
+ .csstransforms3d .pp-view.pop.zoom.pp-active {
1595
+ z-index: 1;
1596
+ opacity: 1;
1597
+ -webkit-transform: scale3d(1, 1, 1);
1598
+ -moz-transform: scale3d(1, 1, 1);
1599
+ -ms-transform: scale3d(1, 1, 1);
1600
+ -o-transform: scale3d(1, 1, 1);
1601
+ transform: scale3d(1, 1, 1);
1602
+ }
1603
+ .csstransforms3d .pp-view.pop.zoom.pp-active.transition {
1604
+ opacity: 0.75;
1605
+ -webkit-transform: scale3d(0.75, 0.75, 1);
1606
+ -moz-transform: scale3d(0.75, 0.75, 1);
1607
+ -ms-transform: scale3d(0.75, 0.75, 1);
1608
+ -o-transform: scale3d(0.75, 0.75, 1);
1609
+ transform: scale3d(0.75, 0.75, 1);
1610
+ }
1611
+
1612
+ /**
1613
+ Pushpop Transition
1614
+ ==================
1615
+ cross-fade
1616
+ */
1617
+ .pp-view.cross-fade {
1618
+ -webkit-transition: opacity 0.5s ease;
1619
+ -moz-transition: opacity 0.5s ease;
1620
+ -ms-transition: opacity 0.5s ease;
1621
+ -o-transition: opacity 0.5s ease;
1622
+ transition: opacity 0.5s ease;
1623
+ }
1624
+ .pp-view.push.cross-fade {
1625
+ z-index: 1;
1626
+ opacity: 0.75;
1627
+ }
1628
+ .pp-view.push.cross-fade.transition {
1629
+ opacity: 1;
1630
+ }
1631
+ .pp-view.push.cross-fade.pp-active {
1632
+ z-index: 2;
1633
+ opacity: 1;
1634
+ }
1635
+ .pp-view.push.cross-fade.pp-active.transition {
1636
+ opacity: 0;
1637
+ }
1638
+ .pp-view.pop.cross-fade {
1639
+ z-index: 2;
1640
+ opacity: 0;
1641
+ }
1642
+ .pp-view.pop.cross-fade.transition {
1643
+ opacity: 1;
1644
+ }
1645
+ .pp-view.pop.cross-fade.pp-active {
1646
+ z-index: 1;
1647
+ opacity: 1;
1648
+ }
1649
+ .pp-view.pop.cross-fade.pp-active.transition {
1650
+ opacity: 0.75;
1651
+ }
1652
+
1653
+ /**
1654
+ Pushpop Transition
1655
+ ==================
1656
+ page-turn-left (3D)
1657
+ */
1658
+ .csstransforms3d .pp-view.page-turn-left {
1659
+ -webkit-transform-origin: 0 50% 0;
1660
+ -moz-transform-origin: 0 50% 0;
1661
+ -ms-transform-origin: 0 50% 0;
1662
+ -o-transform-origin: 0 50% 0;
1663
+ transform-origin: 0 50% 0;
1664
+ -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1665
+ -moz-transition: -moz-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1666
+ -ms-transition: -ms-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1667
+ -o-transition: -o-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1668
+ transition: transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1669
+ }
1670
+ .csstransforms3d .pp-view.push.page-turn-left {
1671
+ -webkit-transform: rotate3d(0, 1, 0, 1deg);
1672
+ -moz-transform: rotate3d(0, 1, 0, 1deg);
1673
+ -ms-transform: rotate3d(0, 1, 0, 1deg);
1674
+ -o-transform: rotate3d(0, 1, 0, 1deg);
1675
+ transform: rotate3d(0, 1, 0, 1deg);
1676
+ }
1677
+ .csstransforms3d .pp-view.push.page-turn-left.transition {
1678
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1679
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1680
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1681
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1682
+ transform: rotate3d(0, 1, 0, 0deg);
1683
+ }
1684
+ .csstransforms3d .pp-view.push.page-turn-left.pp-active {
1685
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1686
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1687
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1688
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1689
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1690
+ }
1691
+ .csstransforms3d .pp-view.push.page-turn-left.pp-active.transition {
1692
+ -webkit-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1693
+ -moz-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1694
+ -ms-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1695
+ -o-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1696
+ transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1697
+ }
1698
+ .csstransforms3d .pp-view.pop.page-turn-left {
1699
+ -webkit-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1700
+ -moz-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1701
+ -ms-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1702
+ -o-transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1703
+ transform: skew(5deg, -15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, -90deg) scale3d(0.1, 1, 1);
1704
+ }
1705
+ .csstransforms3d .pp-view.pop.page-turn-left.transition {
1706
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1707
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1708
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1709
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1710
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1711
+ }
1712
+ .csstransforms3d .pp-view.pop.page-turn-left.pp-active {
1713
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1714
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1715
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1716
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1717
+ transform: rotate3d(0, 1, 0, 0deg);
1718
+ }
1719
+ .csstransforms3d .pp-view.pop.page-turn-left.pp-active.transition {
1720
+ -webkit-transform: rotate3d(0, 1, 0, 1deg);
1721
+ -moz-transform: rotate3d(0, 1, 0, 1deg);
1722
+ -ms-transform: rotate3d(0, 1, 0, 1deg);
1723
+ -o-transform: rotate3d(0, 1, 0, 1deg);
1724
+ transform: rotate3d(0, 1, 0, 1deg);
1725
+ }
1726
+
1727
+ /**
1728
+ Pushpop Transition
1729
+ ==================
1730
+ page-turn-right (3D)
1731
+ */
1732
+ .csstransforms3d .pp-view.page-turn-right {
1733
+ -webkit-transform-origin: 100% 50% 0;
1734
+ -moz-transform-origin: 100% 50% 0;
1735
+ -ms-transform-origin: 100% 50% 0;
1736
+ -o-transform-origin: 100% 50% 0;
1737
+ transform-origin: 100% 50% 0;
1738
+ -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1739
+ -moz-transition: -moz-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1740
+ -ms-transition: -ms-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1741
+ -o-transition: -o-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1742
+ transition: transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1743
+ }
1744
+ .csstransforms3d .pp-view.push.page-turn-right {
1745
+ -webkit-transform: rotate3d(0, 1, 0, -1deg);
1746
+ -moz-transform: rotate3d(0, 1, 0, -1deg);
1747
+ -ms-transform: rotate3d(0, 1, 0, -1deg);
1748
+ -o-transform: rotate3d(0, 1, 0, -1deg);
1749
+ transform: rotate3d(0, 1, 0, -1deg);
1750
+ }
1751
+ .csstransforms3d .pp-view.push.page-turn-right.transition {
1752
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1753
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1754
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1755
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1756
+ transform: rotate3d(0, 1, 0, 0deg);
1757
+ }
1758
+ .csstransforms3d .pp-view.push.page-turn-right.pp-active {
1759
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1760
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1761
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1762
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1763
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1764
+ }
1765
+ .csstransforms3d .pp-view.push.page-turn-right.pp-active.transition {
1766
+ -webkit-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1767
+ -moz-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1768
+ -ms-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1769
+ -o-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1770
+ transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1771
+ }
1772
+ .csstransforms3d .pp-view.pop.page-turn-right {
1773
+ -webkit-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1774
+ -moz-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1775
+ -ms-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1776
+ -o-transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1777
+ transform: skew(-5deg, 15deg) translate3d(0, 0, 200px) rotate3d(0, 1, 0, 90deg) scale3d(0.1, 1, 1);
1778
+ }
1779
+ .csstransforms3d .pp-view.pop.page-turn-right.transition {
1780
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1781
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1782
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1783
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1784
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
1785
+ }
1786
+ .csstransforms3d .pp-view.pop.page-turn-right.pp-active {
1787
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1788
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1789
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1790
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1791
+ transform: rotate3d(0, 1, 0, 0deg);
1792
+ }
1793
+ .csstransforms3d .pp-view.pop.page-turn-right.pp-active.transition {
1794
+ -webkit-transform: rotate3d(0, 1, 0, -1deg);
1795
+ -moz-transform: rotate3d(0, 1, 0, -1deg);
1796
+ -ms-transform: rotate3d(0, 1, 0, -1deg);
1797
+ -o-transform: rotate3d(0, 1, 0, -1deg);
1798
+ transform: rotate3d(0, 1, 0, -1deg);
1799
+ }
1800
+
1801
+ /**
1802
+ Pushpop Transition
1803
+ ==================
1804
+ page-turn-top (3D)
1805
+ */
1806
+ .csstransforms3d .pp-view.page-turn-top {
1807
+ -webkit-transform-origin: 50% 0 0;
1808
+ -moz-transform-origin: 50% 0 0;
1809
+ -ms-transform-origin: 50% 0 0;
1810
+ -o-transform-origin: 50% 0 0;
1811
+ transform-origin: 50% 0 0;
1812
+ -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1813
+ -moz-transition: -moz-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1814
+ -ms-transition: -ms-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1815
+ -o-transition: -o-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1816
+ transition: transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1817
+ }
1818
+ .csstransforms3d .pp-view.push.page-turn-top {
1819
+ -webkit-transform: rotate3d(1, 0, 0, -1deg);
1820
+ -moz-transform: rotate3d(1, 0, 0, -1deg);
1821
+ -ms-transform: rotate3d(1, 0, 0, -1deg);
1822
+ -o-transform: rotate3d(1, 0, 0, -1deg);
1823
+ transform: rotate3d(1, 0, 0, -1deg);
1824
+ }
1825
+ .csstransforms3d .pp-view.push.page-turn-top.transition {
1826
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1827
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1828
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1829
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1830
+ transform: rotate3d(1, 0, 0, 0deg);
1831
+ }
1832
+ .csstransforms3d .pp-view.push.page-turn-top.pp-active {
1833
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1834
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1835
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1836
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1837
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1838
+ }
1839
+ .csstransforms3d .pp-view.push.page-turn-top.pp-active.transition {
1840
+ -webkit-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1841
+ -moz-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1842
+ -ms-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1843
+ -o-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1844
+ transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1845
+ }
1846
+ .csstransforms3d .pp-view.pop.page-turn-top {
1847
+ -webkit-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1848
+ -moz-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1849
+ -ms-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1850
+ -o-transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1851
+ transform: skew(-15deg, -5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, 90deg) scale3d(1, 0.1, 1);
1852
+ }
1853
+ .csstransforms3d .pp-view.pop.page-turn-top.transition {
1854
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1855
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1856
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1857
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1858
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1859
+ }
1860
+ .csstransforms3d .pp-view.pop.page-turn-top.pp-active {
1861
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1862
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1863
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1864
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1865
+ transform: rotate3d(1, 0, 0, 0deg);
1866
+ }
1867
+ .csstransforms3d .pp-view.pop.page-turn-top.pp-active.transition {
1868
+ -webkit-transform: rotate3d(1, 0, 0, -1deg);
1869
+ -moz-transform: rotate3d(1, 0, 0, -1deg);
1870
+ -ms-transform: rotate3d(1, 0, 0, -1deg);
1871
+ -o-transform: rotate3d(1, 0, 0, -1deg);
1872
+ transform: rotate3d(1, 0, 0, -1deg);
1873
+ }
1874
+
1875
+ /**
1876
+ Pushpop Transition
1877
+ ==================
1878
+ page-turn-bottom (3D)
1879
+ */
1880
+ .csstransforms3d .pp-view.page-turn-bottom {
1881
+ -webkit-transform-origin: 50% 100% 0;
1882
+ -moz-transform-origin: 50% 100% 0;
1883
+ -ms-transform-origin: 50% 100% 0;
1884
+ -o-transform-origin: 50% 100% 0;
1885
+ transform-origin: 50% 100% 0;
1886
+ -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1887
+ -moz-transition: -moz-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1888
+ -ms-transition: -ms-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1889
+ -o-transition: -o-transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1890
+ transition: transform 0.5s cubic-bezier(0.25, 0.5, 0.75, 0.25);
1891
+ }
1892
+ .csstransforms3d .pp-view.push.page-turn-bottom {
1893
+ -webkit-transform: rotate3d(1, 0, 0, 1deg);
1894
+ -moz-transform: rotate3d(1, 0, 0, 1deg);
1895
+ -ms-transform: rotate3d(1, 0, 0, 1deg);
1896
+ -o-transform: rotate3d(1, 0, 0, 1deg);
1897
+ transform: rotate3d(1, 0, 0, 1deg);
1898
+ }
1899
+ .csstransforms3d .pp-view.push.page-turn-bottom.transition {
1900
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1901
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1902
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1903
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1904
+ transform: rotate3d(1, 0, 0, 0deg);
1905
+ }
1906
+ .csstransforms3d .pp-view.push.page-turn-bottom.pp-active {
1907
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1908
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1909
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1910
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1911
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1912
+ }
1913
+ .csstransforms3d .pp-view.push.page-turn-bottom.pp-active.transition {
1914
+ -webkit-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1915
+ -moz-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1916
+ -ms-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1917
+ -o-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1918
+ transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1919
+ }
1920
+ .csstransforms3d .pp-view.pop.page-turn-bottom {
1921
+ -webkit-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1922
+ -moz-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1923
+ -ms-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1924
+ -o-transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1925
+ transform: skew(15deg, 5deg) translate3d(0, 0, 200px) rotate3d(1, 0, 0, -90deg) scale3d(1, 0.1, 1);
1926
+ }
1927
+ .csstransforms3d .pp-view.pop.page-turn-bottom.transition {
1928
+ -webkit-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1929
+ -moz-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1930
+ -ms-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1931
+ -o-transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1932
+ transform: skew(0deg, 0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) scale3d(1, 1, 1);
1933
+ }
1934
+ .csstransforms3d .pp-view.pop.page-turn-bottom.pp-active {
1935
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
1936
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
1937
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
1938
+ -o-transform: rotate3d(1, 0, 0, 0deg);
1939
+ transform: rotate3d(1, 0, 0, 0deg);
1940
+ }
1941
+ .csstransforms3d .pp-view.pop.page-turn-bottom.pp-active.transition {
1942
+ -webkit-transform: rotate3d(1, 0, 0, 1deg);
1943
+ -moz-transform: rotate3d(1, 0, 0, 1deg);
1944
+ -ms-transform: rotate3d(1, 0, 0, 1deg);
1945
+ -o-transform: rotate3d(1, 0, 0, 1deg);
1946
+ transform: rotate3d(1, 0, 0, 1deg);
1947
+ }
1948
+
1949
+ /**
1950
+ Pushpop Transition
1951
+ ==================
1952
+ door-left (3D)
1953
+ */
1954
+ .csstransforms3d .pp-view.door-left {
1955
+ -webkit-transform-origin: 0 50% 0;
1956
+ -moz-transform-origin: 0 50% 0;
1957
+ -ms-transform-origin: 0 50% 0;
1958
+ -o-transform-origin: 0 50% 0;
1959
+ transform-origin: 0 50% 0;
1960
+ -webkit-transition: -webkit-transform 0.75s ease;
1961
+ -moz-transition: -moz-transform 0.75s ease;
1962
+ -ms-transition: -ms-transform 0.75s ease;
1963
+ -o-transition: -o-transform 0.75s ease;
1964
+ transition: transform 0.75s ease;
1965
+ }
1966
+ .csstransforms3d .pp-view.push.door-left {
1967
+ -webkit-transform: rotate3d(0, 1, 0, 1deg);
1968
+ -moz-transform: rotate3d(0, 1, 0, 1deg);
1969
+ -ms-transform: rotate3d(0, 1, 0, 1deg);
1970
+ -o-transform: rotate3d(0, 1, 0, 1deg);
1971
+ transform: rotate3d(0, 1, 0, 1deg);
1972
+ }
1973
+ .csstransforms3d .pp-view.push.door-left.transition {
1974
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1975
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1976
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1977
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1978
+ transform: rotate3d(0, 1, 0, 0deg);
1979
+ }
1980
+ .csstransforms3d .pp-view.push.door-left.pp-active {
1981
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
1982
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
1983
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
1984
+ -o-transform: rotate3d(0, 1, 0, 0deg);
1985
+ transform: rotate3d(0, 1, 0, 0deg);
1986
+ }
1987
+ .csstransforms3d .pp-view.push.door-left.pp-active.transition {
1988
+ -webkit-transform: rotate3d(0, 1, 0, -90deg);
1989
+ -moz-transform: rotate3d(0, 1, 0, -90deg);
1990
+ -ms-transform: rotate3d(0, 1, 0, -90deg);
1991
+ -o-transform: rotate3d(0, 1, 0, -90deg);
1992
+ transform: rotate3d(0, 1, 0, -90deg);
1993
+ }
1994
+ .csstransforms3d .pp-view.pop.door-left {
1995
+ -webkit-transform: rotate3d(0, 1, 0, -90deg);
1996
+ -moz-transform: rotate3d(0, 1, 0, -90deg);
1997
+ -ms-transform: rotate3d(0, 1, 0, -90deg);
1998
+ -o-transform: rotate3d(0, 1, 0, -90deg);
1999
+ transform: rotate3d(0, 1, 0, -90deg);
2000
+ }
2001
+ .csstransforms3d .pp-view.pop.door-left.transition {
2002
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2003
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2004
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2005
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2006
+ transform: rotate3d(0, 1, 0, 0deg);
2007
+ }
2008
+ .csstransforms3d .pp-view.pop.door-left.pp-active {
2009
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2010
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2011
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2012
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2013
+ transform: rotate3d(0, 1, 0, 0deg);
2014
+ }
2015
+ .csstransforms3d .pp-view.pop.door-left.pp-active.transition {
2016
+ -webkit-transform: rotate3d(0, 1, 0, 1deg);
2017
+ -moz-transform: rotate3d(0, 1, 0, 1deg);
2018
+ -ms-transform: rotate3d(0, 1, 0, 1deg);
2019
+ -o-transform: rotate3d(0, 1, 0, 1deg);
2020
+ transform: rotate3d(0, 1, 0, 1deg);
2021
+ }
2022
+
2023
+ /**
2024
+ Pushpop Transition
2025
+ ==================
2026
+ door-right (3D)
2027
+ */
2028
+ .csstransforms3d .pp-view.door-right {
2029
+ -webkit-transform-origin: 100% 50% 0;
2030
+ -moz-transform-origin: 100% 50% 0;
2031
+ -ms-transform-origin: 100% 50% 0;
2032
+ -o-transform-origin: 100% 50% 0;
2033
+ transform-origin: 100% 50% 0;
2034
+ -webkit-transition: -webkit-transform 0.75s ease;
2035
+ -moz-transition: -moz-transform 0.75s ease;
2036
+ -ms-transition: -ms-transform 0.75s ease;
2037
+ -o-transition: -o-transform 0.75s ease;
2038
+ transition: transform 0.75s ease;
2039
+ }
2040
+ .csstransforms3d .pp-view.push.door-right {
2041
+ -webkit-transform: rotate3d(0, 1, 0, -1deg);
2042
+ -moz-transform: rotate3d(0, 1, 0, -1deg);
2043
+ -ms-transform: rotate3d(0, 1, 0, -1deg);
2044
+ -o-transform: rotate3d(0, 1, 0, -1deg);
2045
+ transform: rotate3d(0, 1, 0, -1deg);
2046
+ }
2047
+ .csstransforms3d .pp-view.push.door-right.transition {
2048
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2049
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2050
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2051
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2052
+ transform: rotate3d(0, 1, 0, 0deg);
2053
+ }
2054
+ .csstransforms3d .pp-view.push.door-right.pp-active {
2055
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2056
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2057
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2058
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2059
+ transform: rotate3d(0, 1, 0, 0deg);
2060
+ }
2061
+ .csstransforms3d .pp-view.push.door-right.pp-active.transition {
2062
+ -webkit-transform: rotate3d(0, 1, 0, 90deg);
2063
+ -moz-transform: rotate3d(0, 1, 0, 90deg);
2064
+ -ms-transform: rotate3d(0, 1, 0, 90deg);
2065
+ -o-transform: rotate3d(0, 1, 0, 90deg);
2066
+ transform: rotate3d(0, 1, 0, 90deg);
2067
+ }
2068
+ .csstransforms3d .pp-view.pop.door-right {
2069
+ -webkit-transform: rotate3d(0, 1, 0, 90deg);
2070
+ -moz-transform: rotate3d(0, 1, 0, 90deg);
2071
+ -ms-transform: rotate3d(0, 1, 0, 90deg);
2072
+ -o-transform: rotate3d(0, 1, 0, 90deg);
2073
+ transform: rotate3d(0, 1, 0, 90deg);
2074
+ }
2075
+ .csstransforms3d .pp-view.pop.door-right.transition {
2076
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2077
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2078
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2079
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2080
+ transform: rotate3d(0, 1, 0, 0deg);
2081
+ }
2082
+ .csstransforms3d .pp-view.pop.door-right.pp-active {
2083
+ -webkit-transform: rotate3d(0, 1, 0, 0deg);
2084
+ -moz-transform: rotate3d(0, 1, 0, 0deg);
2085
+ -ms-transform: rotate3d(0, 1, 0, 0deg);
2086
+ -o-transform: rotate3d(0, 1, 0, 0deg);
2087
+ transform: rotate3d(0, 1, 0, 0deg);
2088
+ }
2089
+ .csstransforms3d .pp-view.pop.door-right.pp-active.transition {
2090
+ -webkit-transform: rotate3d(0, 1, 0, -1deg);
2091
+ -moz-transform: rotate3d(0, 1, 0, -1deg);
2092
+ -ms-transform: rotate3d(0, 1, 0, -1deg);
2093
+ -o-transform: rotate3d(0, 1, 0, -1deg);
2094
+ transform: rotate3d(0, 1, 0, -1deg);
2095
+ }
2096
+
2097
+ /**
2098
+ Pushpop Transition
2099
+ ==================
2100
+ door-top (3D)
2101
+ */
2102
+ .csstransforms3d .pp-view.door-top {
2103
+ -webkit-transform-origin: 50% 0 0;
2104
+ -moz-transform-origin: 50% 0 0;
2105
+ -ms-transform-origin: 50% 0 0;
2106
+ -o-transform-origin: 50% 0 0;
2107
+ transform-origin: 50% 0 0;
2108
+ -webkit-transition: -webkit-transform 0.75s ease;
2109
+ -moz-transition: -moz-transform 0.75s ease;
2110
+ -ms-transition: -ms-transform 0.75s ease;
2111
+ -o-transition: -o-transform 0.75s ease;
2112
+ transition: transform 0.75s ease;
2113
+ }
2114
+ .csstransforms3d .pp-view.push.door-top {
2115
+ -webkit-transform: rotate3d(1, 0, 0, -1deg);
2116
+ -moz-transform: rotate3d(1, 0, 0, -1deg);
2117
+ -ms-transform: rotate3d(1, 0, 0, -1deg);
2118
+ -o-transform: rotate3d(1, 0, 0, -1deg);
2119
+ transform: rotate3d(1, 0, 0, -1deg);
2120
+ }
2121
+ .csstransforms3d .pp-view.push.door-top.transition {
2122
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2123
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2124
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2125
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2126
+ transform: rotate3d(1, 0, 0, 0deg);
2127
+ }
2128
+ .csstransforms3d .pp-view.push.door-top.pp-active {
2129
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2130
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2131
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2132
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2133
+ transform: rotate3d(1, 0, 0, 0deg);
2134
+ }
2135
+ .csstransforms3d .pp-view.push.door-top.pp-active.transition {
2136
+ -webkit-transform: rotate3d(1, 0, 0, 90deg);
2137
+ -moz-transform: rotate3d(1, 0, 0, 90deg);
2138
+ -ms-transform: rotate3d(1, 0, 0, 90deg);
2139
+ -o-transform: rotate3d(1, 0, 0, 90deg);
2140
+ transform: rotate3d(1, 0, 0, 90deg);
2141
+ }
2142
+ .csstransforms3d .pp-view.pop.door-top {
2143
+ -webkit-transform: rotate3d(1, 0, 0, 90deg);
2144
+ -moz-transform: rotate3d(1, 0, 0, 90deg);
2145
+ -ms-transform: rotate3d(1, 0, 0, 90deg);
2146
+ -o-transform: rotate3d(1, 0, 0, 90deg);
2147
+ transform: rotate3d(1, 0, 0, 90deg);
2148
+ }
2149
+ .csstransforms3d .pp-view.pop.door-top.transition {
2150
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2151
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2152
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2153
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2154
+ transform: rotate3d(1, 0, 0, 0deg);
2155
+ }
2156
+ .csstransforms3d .pp-view.pop.door-top.pp-active {
2157
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2158
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2159
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2160
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2161
+ transform: rotate3d(1, 0, 0, 0deg);
2162
+ }
2163
+ .csstransforms3d .pp-view.pop.door-top.pp-active.transition {
2164
+ -webkit-transform: rotate3d(1, 0, 0, -1deg);
2165
+ -moz-transform: rotate3d(1, 0, 0, -1deg);
2166
+ -ms-transform: rotate3d(1, 0, 0, -1deg);
2167
+ -o-transform: rotate3d(1, 0, 0, -1deg);
2168
+ transform: rotate3d(1, 0, 0, -1deg);
2169
+ }
2170
+
2171
+ /**
2172
+ Pushpop Transition
2173
+ ==================
2174
+ door-bottom (3D)
2175
+ */
2176
+ .csstransforms3d .pp-view.door-bottom {
2177
+ -webkit-transform-origin: 50% 100% 0;
2178
+ -moz-transform-origin: 50% 100% 0;
2179
+ -ms-transform-origin: 50% 100% 0;
2180
+ -o-transform-origin: 50% 100% 0;
2181
+ transform-origin: 50% 100% 0;
2182
+ -webkit-transition: -webkit-transform 0.75s ease;
2183
+ -moz-transition: -moz-transform 0.75s ease;
2184
+ -ms-transition: -ms-transform 0.75s ease;
2185
+ -o-transition: -o-transform 0.75s ease;
2186
+ transition: transform 0.75s ease;
2187
+ }
2188
+ .csstransforms3d .pp-view.push.door-bottom {
2189
+ -webkit-transform: rotate3d(1, 0, 0, 1deg);
2190
+ -moz-transform: rotate3d(1, 0, 0, 1deg);
2191
+ -ms-transform: rotate3d(1, 0, 0, 1deg);
2192
+ -o-transform: rotate3d(1, 0, 0, 1deg);
2193
+ transform: rotate3d(1, 0, 0, 1deg);
2194
+ }
2195
+ .csstransforms3d .pp-view.push.door-bottom.transition {
2196
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2197
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2198
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2199
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2200
+ transform: rotate3d(1, 0, 0, 0deg);
2201
+ }
2202
+ .csstransforms3d .pp-view.push.door-bottom.pp-active {
2203
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2204
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2205
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2206
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2207
+ transform: rotate3d(1, 0, 0, 0deg);
2208
+ }
2209
+ .csstransforms3d .pp-view.push.door-bottom.pp-active.transition {
2210
+ -webkit-transform: rotate3d(1, 0, 0, -90deg);
2211
+ -moz-transform: rotate3d(1, 0, 0, -90deg);
2212
+ -ms-transform: rotate3d(1, 0, 0, -90deg);
2213
+ -o-transform: rotate3d(1, 0, 0, -90deg);
2214
+ transform: rotate3d(1, 0, 0, -90deg);
2215
+ }
2216
+ .csstransforms3d .pp-view.pop.door-bottom {
2217
+ -webkit-transform: rotate3d(1, 0, 0, -90deg);
2218
+ -moz-transform: rotate3d(1, 0, 0, -90deg);
2219
+ -ms-transform: rotate3d(1, 0, 0, -90deg);
2220
+ -o-transform: rotate3d(1, 0, 0, -90deg);
2221
+ transform: rotate3d(1, 0, 0, -90deg);
2222
+ }
2223
+ .csstransforms3d .pp-view.pop.door-bottom.transition {
2224
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2225
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2226
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2227
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2228
+ transform: rotate3d(1, 0, 0, 0deg);
2229
+ }
2230
+ .csstransforms3d .pp-view.pop.door-bottom.pp-active {
2231
+ -webkit-transform: rotate3d(1, 0, 0, 0deg);
2232
+ -moz-transform: rotate3d(1, 0, 0, 0deg);
2233
+ -ms-transform: rotate3d(1, 0, 0, 0deg);
2234
+ -o-transform: rotate3d(1, 0, 0, 0deg);
2235
+ transform: rotate3d(1, 0, 0, 0deg);
2236
+ }
2237
+ .csstransforms3d .pp-view.pop.door-bottom.pp-active.transition {
2238
+ -webkit-transform: rotate3d(1, 0, 0, 1deg);
2239
+ -moz-transform: rotate3d(1, 0, 0, 1deg);
2240
+ -ms-transform: rotate3d(1, 0, 0, 1deg);
2241
+ -o-transform: rotate3d(1, 0, 0, 1deg);
2242
+ transform: rotate3d(1, 0, 0, 1deg);
2243
+ }