Touchgui/www/lib/appframework/af.ui.css@e8ccd40d0ef6
Touchgui/www/lib/appframework/af.ui.css
Thu, 04 Jun 2015 14:50:33 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 04 Jun 2015 14:50:33 +0200
- changeset 0
- e8ccd40d0ef6
- permissions
- -rw-r--r--
Genesis of lecture sources for Droidcon Berlin 2015 in Postbahnhof.
1 /*! intel-appframework - v2.1.0 - 2014-09-22 */
3 /**********************************************************
4 GENERAL UI ELEMENTS
5 **********************************************************/
7 * {
8 -webkit-user-select:none; /* Prevent copy paste for all elements except text fields */
9 -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* set highlight color for user interaction */
10 -moz-tap-highlight-color:rgba(0, 0, 0, 0); /* set highlight color for user interaction */
11 -ms-touch-action:none;
12 -moz-user-select:-moz-none;
13 -webkit-touch-callout: none; /* prevent the popup menu on any links*/
14 margin:0;
15 padding:0;
16 -webkit-box-sizing:border-box;
17 -moz-box-sizing:border-box;
18 box-sizing:border-box;
19 }
21 body {
22 overflow-x:hidden;
23 -webkit-text-size-adjust:none;
24 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
25 color:#000;
26 font-size:14px;
27 display:-webkit-box;
28 background: #CBD2D8;
29 /* We want to layout our first container vertically */
30 -webkit-box-orient: vertical;
31 /* we want our child elements to stretch to fit the container */
32 -webkit-box-align:stretch;
33 } /* General styles that apply to elements not contained within other classes and styles */
36 #afui input,textarea { -webkit-user-select:text; -moz-user-select:-moz-text;-moz-user-select:text;} /* allow users to select text that appears in input fields */
38 #afui img { border:none; } /* Remove default borders for images */
41 #afui p {
42 display:block;
43 margin:6px 0;
45 font-size:14px;
46 line-height:20px;
47 color:inherit
48 }
51 #afui #afui_modal {
52 background: inherit;
53 color:inherit;
54 -webkit-backface-visibility: hidden;
55 z-index:9999 !important;
56 width:100%;
57 height:100%;
58 display:none;
59 position:absolute; top:0;
60 overflow:hidden;
61 display: -webkit-box;
62 display: -moz-box;
63 display: box;
64 display: -ms-flexbox;
65 -webkit-box-orient: vertical;
66 -moz-box-orient: vertical;
67 -ms-box-orient: vertical;
68 box-orient: vertical;
69 display: -webkit-flex;
70 display: -moz-flex;
71 display: -ms-flex;
72 display: flex;
73 -webkit-flex-direction: column;
74 -moz-flex-direction: column;
75 -ms-flex-direction: column;
76 flex-direction: column;
77 }
80 #afui #modalContainer > * {
81 -webkit-backface-visibility: hidden;
82 -webkit-perspective: 1000;
83 background:inherit;
84 color:inherit;
85 }
89 #afui .afScrollPanel { width:100%; min-height:100%; }
91 #afui {
92 position:absolute;
93 width:100%;
94 top:0;
95 bottom:0;
96 overflow:hidden;
97 }
99 #afui,.flexContainer {
100 display: -webkit-box;
101 display: -moz-box;
102 display: box;
103 display: -ms-flexbox;
105 -webkit-box-orient: vertical;
106 -moz-box-orient: vertical;
107 -ms-box-orient: vertical;
108 box-orient: vertical;
110 /* current syntax */
111 display: -webkit-flex;
112 display: -moz-flex;
113 display: -ms-flex;
114 display: flex;
116 -webkit-flex-direction: column;
117 -moz-flex-direction: column;
118 -ms-flex-direction: column;
119 flex-direction: column;
120 }
122 #afui > #splashscreen {
123 position:absolute;
124 top:0;bottom:0;
125 width:100%;
126 left:0;
127 min-height:100%;
128 background:rgba(29,29,28,1) !important;
129 color:white !important;
130 font-size:30px;
131 text-align:center;
132 z-index:9999;
133 display:block;
134 margin-left: auto !important; margin-right: auto !important;
135 padding-top:80px !important;
136 }
139 /**********************************************************
140 header
141 **********************************************************/
142 #afui .header {
143 position:relative;
144 overflow: hidden;
145 display:block;
146 z-index:250;
147 -webkit-box-sizing:border-box; box-sizing:border-box;
148 height:44px;
149 left:0; right:0;
151 } /* This is masthead bar that appears at the top of the UI */
156 #afui .header h1 {
158 position: absolute;
159 width: 45%;
160 z-index: 1;
161 height: 44px;
162 font-size: 18px;
163 font-weight: bold;
164 left: 27.5%;
165 color: inherit;
166 padding: 10px 0;
167 text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
168 text-align: center;
169 white-space: nowrap;
170 text-overflow: ellipsis;
171 overflow: hidden;
172 } /* This is text that appears in the header at the top of the screen */
175 /**********************************************************
176 CONTENT AREA
177 **********************************************************/
179 #afui #content, #afui_modal #modalContainer {
180 z-index:180;
182 position:relative;
183 /* previous syntax */
184 -webkit-box-flex: 1;
185 -moz-box-flex: 1;
186 -ms-box-flex: 1;
187 box-flex: 1;
189 /* current syntax */
190 -webkit-flex: 1;
191 -moz-flex: 1;
192 -ms-flex: 1;
193 flex: 1;
194 overflow:hidden;
196 background:inherit;
197 color:inherit;
198 } /* Accounts for positioning of the content area, which is everything below the header and above the navbar. */
201 #afui .panel {
202 z-index:180;
203 width:100%;
204 height:100%;
205 display:none;
206 position:absolute; top:0; left:0;
207 overflow-y:auto;
208 overflow-x:hidden;
209 -webkit-overflow-scrolling:touch;
210 -webkit-backface-visibility: hidden;
211 padding:10px;
212 padding-top:0px;
213 } /* This class is applied to the divs that contain the various "views" or pages of the app. */
216 /**********************************************************
217 scroller CSS
218 **********************************************************/
219 #afui .y-scroll, #afui .panel.y-scroll {
220 overflow-x:hidden;
221 overflow-y:auto;
222 }
223 #afui .x-scroll, #afui .panel.x-scroll {
224 overflow-x:auto;
225 overflow-y:hidden;
226 }
227 #afui .no-scroll, #afui .panel.no-scroll {
228 overflow:hidden;
229 }
232 /**********************************************************
233 Navbar
234 **********************************************************/
235 /* Nav bar appears locked to the bottom of the screen. It is the primary navigation. can contain text or graphical navigation */
237 #afui .footer {
238 z-index:180;
239 height:49px;
240 display:block;
241 left:0;
242 right:0;
243 position:relative;
244 padding:0 3px;
245 }
248 #afui footer>a:not(.button) {
249 -webkit-box-sizing:border-box;
250 box-sizing: border-box;
251 top: 3px;
252 height: 43px;
253 overflow: hidden;
254 font-size:12px;
255 font-weight:normal;
256 text-decoration: none;
257 color: #fff;
258 text-align: center;
259 display: inline-block;
260 width: 25%;
261 -webkit-backface-visibility: hidden;
262 -webkit-perspective: 1000;
263 line-height: 67px;
264 position: relative;
265 margin: 0;
266 }
269 #afui footer>a:not(.button) .af-badge {
270 right:auto;
271 margin-left:-16px;
272 }
275 #afui footer>a.icon:not(.button):before {
276 position:absolute;
277 top:2px;
278 left:0;
279 font-size: 25px;
280 margin:auto;
281 width: 100%;
282 }
285 #afui footer>a.pressed:not(.button) {
287 }
290 #afui footer>a.icon.pressed:not(.button):before {
292 }
294 /* Custom footers - always hidden */
295 #afui footer, #afui header, #afui nav, #afui aside { display:none; }
297 /* Show the active header/footer/navs */
298 #afui .footer footer, #afui #menu nav, #afui .header header, #afui #aside_menu aside {display:block; height:100%;}
300 #afui > #menu.tabletMenu {
301 z-index:1;
302 width:200px;
303 bottom:0;
304 display:none;
305 position:absolute; top:0; left:0;
306 border-right: 1px solid rgba(128,128,128,0.5);
308 }
310 #afui > #aside_menu {
311 z-index:1;
312 width:200px;
313 bottom:0;
314 height:100%;
315 display:none;
316 position:absolute; top:0; right:0;
317 border-left: 1px solid rgba(128,128,128,0.5);
318 }
321 #afui #menu_scroller, #afui #aside_menu_scroller {
322 padding-bottom:10px;
323 overflow-y:auto;
324 overflow-x:hidden;
325 -webkit-backface-visibility: hidden;
326 -webkit-overflow-scrolling:touch;
327 }
330 #afui #menu_scroller > *, #afui #aside_menu_scroller > * {
331 -webkit-backface-visibility: hidden;
332 -webkit-perspective: 1000;
333 }
336 #afui #menu .list li,
337 #afui #menu .list .divider,
338 #afui #menu .list li:first-child,
339 #afui #menu .list li:last-child,
341 #afui #aside_menu .list li,
342 #afui #aside_menu .list .divider,
343 #afui #aside_menu .list li:first-child,
344 #afui #aside_menu .list li:last-child
345 {
347 font-weight:bold;
348 font-size:1em;
349 line-height:1em;
350 border-color:#101012;
351 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
352 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
354 }
356 #afui #menu .list > li > a,
357 #afui #aside_menu .list > li > a
358 {
359 color:#ccc;
360 margin-left:6px;
361 font-weight: normal;
362 }
365 #afui #menu .list,
366 #afui #menu .list .divider,
367 #afui #aside_menu .list,
368 #afui #aside_menu .list .divider
369 { background:inherit; }
372 #afui #menu .list .divider, #afui #aside_menu .list .divider {
373 background:#333;
374 color:#fff;
375 font-weight:bold;
376 font-size:1em;
377 line-height:1em;
378 padding:6px;
379 top:0px;
380 border:none;
381 -webkit-box-shadow:none; box-shadow: none;
382 }
385 #afui #menu .list > li > a:after, #afui #aside_menu .list > li > a:after { margin-top: -8px; }
387 /* End side menu css */
391 #afui .splashscreen {
392 background:rgba(29,29,28,1) !important;
393 padding-left:40px;
394 padding-top:30px !important;
395 min-height:100%;
396 }
399 #afui h2 {
400 display:block;
401 height:34px;
402 font-weight: bold;
403 font-size:18px;
404 color:#000;
405 padding:6px 0;
406 margin-bottom:8px;
407 } /* Header class used for non-navigable header bars (h1 is reserved for the header) */
410 #afui .collapsed:after {
411 float:right;
412 content:'';
413 border-left:5px solid transparent;
414 border-right:5px solid transparent;
415 border-top:6px solid #000;
416 display:block;
417 position:absolute;
418 top:14px;right:14px;
419 }
421 #afui .collapsed:before {
422 float:right;
423 content:'';
424 color:transparent;
425 background:transparent;
426 width:14px; height:14px;
427 display:block;
428 border:2px solid #000;
429 border-radius:3px;
430 position:absolute;
431 top:8px;right:10px;
432 }
434 #afui .expanded:after {
435 float:right;content:'';
436 border-left: 5px solid transparent;
437 border-right: 5px solid transparent;
438 border-bottom: 6px solid #000;
439 display:block;
440 position:absolute;
441 top:13px;right:14px;
442 }
444 #afui .expanded:before {
445 float:right;
446 content:'';
447 color:transparent;
448 background:transparent;
449 width:14px; height:14px;
450 display:block;
451 border:2px solid #000;
452 border-radius:3px;
453 position:absolute;
454 top:8px;right:10px;
455 }
458 /**********************************************************
459 UI
460 **********************************************************/
462 .ui-icon {
463 background: #666;
464 background: rgba(0,0,0,.4);
465 background-repeat: no-repeat;
466 border-radius: 9px;
467 }
470 .ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -100px; margin-top: -35px; padding: 10px 30px; background: #666;background:rgba(0,0,0,.4);border-radius:9px;color:white;}
471 .ui-loader.heavy {opacity:1;}
472 .ui-loader h1 { font-size: 15px; text-align: center; }
473 .ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }
476 .spin {
477 -webkit-transform: rotate(360deg);
478 -webkit-animation-name: spin;
479 -webkit-animation-duration: 1s;
480 -webkit-animation-iteration-count: infinite;
481 }
482 @-webkit-keyframes spin {
483 from {-webkit-transform: rotate(0deg);}
484 to {-webkit-transform: rotate(360deg);}
485 }
488 .ui-icon-loading {
489 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjBAMAAADs965qAAAAA3NCSVQICAjb4U/gAAAAMFBMVEX////x8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHvvEhiAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAAK6wAACusBgosNWgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAEaSURBVCiRY2AgATCapaUqoIiIzN5z5syZJiQRltW7gUJ3705C6OraDRG6GwATkli1evdusNBTuKJVq3c4MjBX3733DqqMfdWqFWDbau+9ewIRspy5KgHMYL737g1EX+fMaVAjbN+9KwDLzZxZAHPMu3cXwEbNnAl397p3YDslOmD6GBjs/v8AURodzXAh3v+/QZRHRyNciPP/f4hQA1yIHVMICtzLC9CFzMuL0IXEy0vQhdjK0+BsRqgv0tIMYEKCggJgmbS0QJgiQUEIwy0tVQCmCCokmhYaCFMElWMKDQ01BIkoKcKEGFRDQ1yMlISUgEIwe5iAQi7GxkpKSjBFwMh2cXEGCSkiOVcFLIQswsAgZGxshCpCBgAA0FNYp5zwDegAAAAASUVORK5CYII=);
490 width: 40px;
491 height: 40px;
492 border-radius: 20px;
493 background-size: 35px 35px;
494 }
497 #afui .ui-corner-all { border-radius:.6em; }
500 #afui_mask { position:absolute;top:45%;z-index:999999; }
502 .afui_panel_mask { position:absolute;top:0;bottom:0;left:0;right:0;z-index:2000;background-color:rgba(0,0,0,0.1);display:none}
504 #afui .hasMenu{
505 left:0;
506 }
509 #afui .menuButton {
510 position: relative;
511 top: 5px;
512 right: -8px;
513 height: 36px;
514 width: 36px;
515 z-index:2;
516 float:right;
517 }
520 #afui .menuButton:after {
521 border-bottom: 9px double white;
522 border-top: 3px solid white;
523 top: 9px;
524 left: 3px;
525 content: "";
526 height: 3px;
527 position: absolute;
528 width: 15px;
529 }
531 #afui .hasMenu.on {
532 -webkit-transform:translate3d(200px,0,0);
533 transform:translate(200px,0);
534 }
540 #afui .modalbutton {
541 position:absolute;
542 top:0;
543 right:5px;
544 height:32px;
545 width:58px;
546 line-height:32px;
547 z-index:9999;
548 }
551 #afui .closebutton {
552 position:absolute;
553 top:6px; right:6px;
554 display:block;
555 height:24px ;
556 width:24px ;
557 border-radius:12px;
558 border:1px solid #666;
559 background:#fff;
560 color:#333;
561 font-weight: bold;
562 font-size:21px;
563 line-height:18px;
564 text-align:center;
565 text-decoration:none;
566 }
568 #afui .closebutton:before { content:'x'; }
570 #afui .closebutton.selected,.closebutton.modalButton.selected {
571 color:#fff;
572 background:#333;
573 }
575 #afui .panel > .list,
576 #afui .panel > .afScrollPanel > .list {
577 margin:0px -10px;
578 }
580 #afui .panel > .list.inset,
581 #afui .panel > .afScrollPanel > .list.inset {
582 margin:0px;
583 }
586 /* Chevrons */
587 @font-face {
588 font-family: 'chevron';
589 src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQAAA0AAAAABZgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAcZ/T02kdERUYAAAFMAAAAHwAAACAAMgAGT1MvMgAAAWwAAABHAAAAVj7i2r5jbWFwAAABtAAAAEMAAAFS8BX0J2dhc3AAAAH4AAAACAAAAAj//wADZ2x5ZgAAAgAAAABsAAAAbMHrMoZoZWFkAAACbAAAADAAAAA2/JaSB2hoZWEAAAKcAAAAHgAAACQDav/GaG10eAAAArwAAAATAAAAFAN1AB1sb2NhAAAC0AAAAAwAAAAMAA4ANm1heHAAAALcAAAAHQAAACAASAAbbmFtZQAAAvwAAADdAAABhigr581wb3N0AAAD3AAAACIAAAA8nFVDO3icY2BgYGQAgjO2i86D6LO3V7LCaABOtwcoAAB4nGNgZGBg4ANiCQYQYGJgZGBmYAGSLGAeAwAEkAA5AHicY2BkVGCcwMDKwMGozGjJwMBgB6WvM4gxFDMwMDGwMjPAgQCCyRCQ5prC4PCB4UMIY8P/AwwajA0MDg0MDIwgOQBg6QqyAHicY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiQ8MH0L+/0dmCTDzb4DqAgNGNgY4lxGkh4kBFTAyDHsAAFhbChsAAAAAAf//AAIAAQAA/8ABwAGAAAIAABEBIQHA/kABgP5AAAAAAAEAHf/tARMBcwAXAAAlFA8BBiIvASY1ND8BJyY1ND8BNjIfARYBEwmkCRoJFAkJenoJCRQIHAikCbANCqMJCRMKDQ0JenkKDQ0JEwoKowl4nGNgZGBgAOLcX7xy8fw2Xxm4GQ8ARRjO3l7JiqD/H2A8wNgA5HIwMIFEAUPwC7d4nGNgZGBgbPh/gEGD8QADwz8HIAkUQQGsAIQZBTAAAHicYzzAAAFTIRSjAoMsABVQAZUAAAAAAAAAAAAADgA2eJxjYGRgYGBlkGAA0QwMTEDMCGY7gPkMAAUvAGQAAAB4nHWOTWoCQRBG3+hoCIbgKmTZkE02M3RPwIUHmAO4cC/SjII40P7gSbLKEbL0GB4gR8gx/JzUJgsbin68rqqvgSc+ybidjAfGxj3xu3GfN07Gufy38YARF+Oh/K86s/xR5rmbunFP/Grcp8Yb5/JfxgNeOBsP5X9YsiJyJNGyheUqHlMrmMk2HNiw0Buz2Bw2C0Hd9e27O6kj4qgoleaYqv7v+3NBrwUTVSUKfGhNu93XbWqiq0rvps5yRcEXk6LyQU33/jaXTexYW0bo8pnHtFtrRyj93dkrAWI51wAAAHicY2BiwA9YgZiRgYmRiZGZvTQv083AwABCm5oAACfXBG0AAA==) format('woff'),
590 url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWf09NoAAAV8AAAAHEdERUYAMgAGAAAFXAAAACBPUy8yPuLavgAAAVgAAABWY21hcPAV9CcAAAHEAAABUmdhc3D//wADAAAFVAAAAAhnbHlmwesyhgAAAyQAAABsaGVhZPyWkgcAAADcAAAANmhoZWEDav/GAAABFAAAACRobXR4A3UAHQAAAbAAAAAUbG9jYQAOADYAAAMYAAAADG1heHAASAAbAAABOAAAACBuYW1lKCvnzQAAA5AAAAGGcG9zdJxVQzsAAAUYAAAAPAABAAAAAQAAbfoNHl8PPPUACwHAAAAAAM3bqQUAAAAAzdupBQAA/8ABwAGAAAAACAACAAAAAAAAAAEAAAGA/8AAKAHAAAD+QAHAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFABgAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQEgAZAABQAIASMBOQAAAD4BIwE5AAAA1wAWAHMAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA8ADwVAGA/8AAKAGAAECAAAABAAAAAAAAAcAAAAAAAAAAlQAAAAAAAAEgAB0AAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAPAA8FT//wAAAADwAPBU//8AABADD7AAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgA2AAEAAP/AAcABgAACAAARASEBwP5AAYD+QAAAAAABAB3/7QETAXMAFwAAJRQPAQYiLwEmNTQ/AScmNTQ/ATYyHwEWARMJpAkaCRQJCXp6CQkUCBwIpAmwDQqjCQkTCg0NCXp5Cg0NCRMKCqMJAAAADACWAAEAAAAAAAEABwAQAAEAAAAAAAIABwAoAAEAAAAAAAMAIwB4AAEAAAAAAAQABwCsAAEAAAAAAAUACwDMAAEAAAAAAAYABwDoAAMAAQQJAAEADgAAAAMAAQQJAAIADgAYAAMAAQQJAAMARgAwAAMAAQQJAAQADgCcAAMAAQQJAAUAFgC0AAMAAQQJAAYADgDYAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwBoAGUAdgByAG8AbgAgADoAIAAxADAALQA2AC0AMgAwADEAMwAARm9udEZvcmdlIDIuMCA6IGNoZXZyb24gOiAxMC02LTIwMTMAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIBAwd1bmlGMDAwB3VuaUYwNTQAAAAB//8AAgABAAAADgAAABgAAAAAAAIAAQADAAQAAQAEAAAAAgAAAAAAAQAAAADMPaLPAAAAAM3bqQUAAAAAzdupBQ==) format('truetype');
591 font-weight: normal;
592 font-style: normal;
593 }
595 #afui .chevron {
596 font-family: 'chevron';
597 speak: none;
598 font-style: normal;
599 font-weight: normal;
600 font-variant: normal;
601 text-transform: none;
602 line-height: 1;
603 -webkit-font-smoothing: antialiased;
604 }
605 #afui .chevron:before {
606 content: "\f054";
607 }
609 #afui .chevron.left {
610 -webkit-transform:rotate(180deg);
611 transform:rotate(180deg);
612 }
615 @media handheld, only screen and (min-width: 768px) {
616 #afui .footer.hasMenu.splitview, #afui .header.hasMenu.splitview, #afui #content.hasMenu.splitview {
617 position:relative;
618 right:0px;
619 margin-left:256px;
620 -webkit-transition: transform 0ms;
621 -webkit-transform:none;
622 transition:transform 0ms;
623 transform:none ;
624 width: -webkit-calc(100% - 256px);
625 width: calc(100% - 256px);
626 }
628 #afui > #aside_menu.splitview {
629 width:256px;
630 }
633 #afui > #menu.tabletMenu.splitview {
634 z-index:1;
635 width:256px;
636 bottom:0;
637 height:100% ;
638 display:block;
639 position:absolute ; top:0;
640 left:0px;
641 -webkit-transform:none;
642 -webkit-transition:none;
643 transform:none;
644 transition:none;
645 }
647 #afui .splitview .menuButton { display:none; }
648 }
650 @media print {
651 body {
652 overflow:visible;
653 }
654 #afui #content{
655 overflow: visible;
656 left:0;
657 }
658 #afui {
659 overflow:visible;
660 }
661 #afui .panel {
662 overflow-x:visible !important;
663 overflow-y:visible !important;
664 overflow:visible !important;
665 }
666 }
668 /* blue #0190d6
670 */
672 @-ms-viewport {
673 width: device-width;
674 }
676 #afui {
677 background:white;
678 color:#53575E;
679 }
681 #afui .header{
682 background:#0088D1;
683 border:none;
684 border-bottom:1px solid #0088D1;
685 color:white;
686 }
688 #afui .header h1 {
689 text-shadow:none;
690 width:45%;
691 }
693 #afui .backButton {
694 background:rgba(249,249,249,1);
695 color:#fff;
696 display: block;
697 position: absolute;
698 line-height:44px;
699 left: 25px;
700 text-overflow: ellipsis;
701 font-size: 14px;
702 padding:0;
703 text-shadow: none;
704 background-color: transparent;
705 border:none;
706 border-color:transparent;
707 height: 44px;
708 top:0;
709 border-radius:0;
710 box-shadow:none;
711 margin: 0;
712 padding-left: 0;
713 text-align: center;
714 width:50px;
715 padding:0 !important;
716 margin:0 !important;
717 }
719 #afui .backButton::before {
720 z-index: -1;
721 font-size:22px;
722 position: absolute;
723 top: 10px;
724 left: -20px;
725 text-align: center;
726 border-radius:0;
727 border: none;
728 border-color:transparent;
729 box-shadow: none;
730 -webkit-transform: none;
731 transform: none;
732 font-family: 'chevron';
733 speak: none;
734 font-style: normal;
735 font-weight: normal;
736 font-variant: normal;
737 text-transform: none;
738 line-height: 1;
739 -webkit-font-smoothing: antialiased;
740 content: "\f054";
741 -webkit-transform:rotate(180deg);
742 transform:rotate(180deg);
743 background-color: transparent;
744 }
746 #afui header .backButton {
747 position:absolute;
748 }
750 #afui .footer {
751 background:#0088D1;
752 border:none;
753 border-top:1px solid #0088D1;
754 box-shadow:none;
755 }
757 #afui footer>a:not(.button) {
759 }
761 #afui footer>a.pressed:not(.button) {
762 border-radius:0;
763 background:#00AEEF;
764 }
766 #afui footer>a.icon.pressed:not(.button):before {
767 color:inherit;
768 }
770 #afui .af-badge {
771 border:none;
772 }
774 #afui .list {
775 background:inherit;
776 color:inherit;
777 border-color:#303030;
778 font-weight:normal;
779 }
781 #afui .af-badge {
782 box-shadow:none;
783 }
785 #afui .list .divider { color:black; }
787 #afui .panel, #afui #modalContainer, #afui #modal {
788 color:inherit;
789 background:inherit;
790 }
792 #afui .panel h2 { color:#0088D1;}
794 #afui .collapsed:after {border-top: 6px solid;}
795 #afui .collapsed:before {border:2px solid;}
796 #afui .expanded:after {border-bottom: 6px solid;}
797 #afui .expanded:before {border:2px solid;}
799 #afui .collapsed:before,#afui .expanded:before {
800 border-color: inherit;
801 }
803 #afui .collapsed:after, #afui .expanded:after{
804 border-top-color:inherit;
805 border-top-color:inherit;
806 }
808 #afui select, #afui textarea, #afui input[type="text"],
809 #afui input[type=search], #afui input[type="password"],
810 #afui input[type="datetime"], #afui input[type="datetime-local"],
811 #afui input[type="date"], #afui input[type="month"],
812 #afui input[type="time"], #afui input[type="week"],
813 #afui input[type="number"], #afui input[type="email"],
814 #afui input[type="url"], #afui input[type="tel"],
815 #afui input[type="color"], #afui .input-group {
816 background:inherit;
817 color:inherit;
818 }
820 #afui input.toggle+label:after { color:inherit; }
822 #afui input.toggle+label { border-radius:0; }
824 #afui input.toggle+label > span {
825 border-radius:0;
826 top:0;
827 width:27px;
828 height:23px;
829 }
831 #afui label { color:inherit; }
833 #afui input[type="radio"]:checked+label:before,#afui input[type="checkbox"]:checked+label:before {
834 background: #33B5E5;
835 }
837 #afui > #aside_menu,
838 #afui > #menu.tabletMenu {
839 color:white;
840 background:#00AEEF;
841 border-right:1px solid #006BA4;
842 }
844 #afui #aside_menu .list li,#afui #aside_menu .list .divider,#afui #aside_menu .list li:last-child,
845 #afui #menu .list li,#afui #menu .list .divider,#afui #menu .list li:last-child {
846 border-color: #4CC6F4;
847 }
849 #afui #aside_menu .list .divider,
850 #afui #menu .list .divider {
851 background:#0088D1;
852 color:inherit;
853 font-size: 1em;
854 }
856 #afui #aside_menu .list > li > a,
857 #afui #menu .list > li > a {
858 background:inherit;
859 color:inherit;
860 font-size: 1em;
861 }
863 #afui #aside_menu .list,
864 #afui #menu .list {
865 font-weight: normal;
866 }
868 #afui .button {
869 border-radius:0;
870 text-shadow:none;
871 }
873 #afui .list > li > a:after{
874 color:#0088D1;
875 }
877 #afui .button.pressed {
879 }
881 #afui .button.previous {
882 border:none;
883 }
885 #afui .button.next {
886 border:none;
887 }
889 #afui .button.previous::after {
890 color:black;
891 z-index: -1;
892 font-size:22px;
893 position: absolute;
894 top: 2px;
895 left: -25px;
896 text-align: center;
897 border-radius:0;
898 border: none;
899 border-color:transparent;
900 box-shadow: none;
901 -webkit-transform: none;
902 transform: none;
903 font-family: 'chevron';
904 speak: none;
905 font-style: normal;
906 font-weight: normal;
907 font-variant: normal;
908 text-transform: none;
909 line-height: 1;
910 -webkit-font-smoothing: antialiased;
911 content: "\f054";
912 -webkit-transform:rotate(180deg);
913 transform:rotate(180deg);
914 background-color: transparent;
915 }
917 #afui .button.next::after {
918 color:black;
919 z-index: -1;
920 font-size:22px;
921 position: absolute;
922 top: 6px;
923 right: -25px;
924 text-align: center;
925 border-radius:0;
926 border: none;
927 border-color:transparent;
928 box-shadow: none;
929 -webkit-transform: none;
930 transform: none;
931 font-family: 'chevron';
932 speak: none;
933 font-style: normal;
934 font-weight: normal;
935 font-variant: normal;
936 text-transform: none;
937 line-height: 1;
938 -webkit-font-smoothing: antialiased;
939 content: "\f054";
940 background-color: transparent;
941 }
943 #afui .afPopup {
944 border: solid 1px #33B5E5;
945 -webkit-border-radius: 5px;
946 border-radius: 5px;
947 background:inherit;
948 color:inherit;
949 }
951 #afui .afPopup>FOOTER>A{
952 width: 120px;
953 }
955 #afui #af_actionsheet {
956 background:#0190d6;
957 color:inherit;
958 }
960 #afui #af_actionsheet a{
961 border-radius:0;
962 -webkit-border-radius:0;
963 color:black;
964 background:white;
965 border:none;
966 text-shadow:none;
967 }
969 #afui .list {
970 margin: 0px;
971 padding: 0px;
972 margin-bottom: 10px;
973 list-style: none;
974 background-color: #fff;
975 box-sizing: border-box;
976 -webkit-box-sizing: border-box;
978 }
979 #afui .list li {
980 display: block;
981 list-style: none;
982 position: relative;
983 padding: 20px 20px 20px 10px;
984 border-bottom: 1px solid #ccc;
985 }
986 #afui .list li:first-child {
987 border-top: 1px solid #ccc;
988 }
989 #afui .list > li > a {
990 display: block;
991 position: relative;
992 display: block;
993 color: inherit;
994 margin: -20px -20px -20px -10px;
995 text-decoration: none;
996 padding: 20px 20px 20px 10px;
997 }
998 #afui .list a .af-badge {
999 position: absolute;
1000 right: 30px;
1001 top: 48%;
1002 margin-top: -10px;
1003 }
1004 #afui .list > li > a:after {
1005 position: absolute;
1006 right: 8px;
1007 font-family: 'chevron';
1008 speak: none;
1009 font-style: normal;
1010 font-weight: normal;
1011 font-variant: normal;
1012 text-transform: none;
1013 line-height: 1;
1014 -webkit-font-smoothing: antialiased;
1015 content: "\f054";
1016 top: 50%;
1017 margin-top: -0.5em;
1018 color:inherit;
1019 }
1020 #afui .list .divider {
1021 position: relative;
1022 top: -1px;
1023 padding-top: 6px;
1024 padding-bottom: 6px;
1025 font-size: 12px;
1026 font-weight: bold;
1027 line-height: 18px;
1028 background-color: #dfe0e2;
1029 border-top: 1px solid #ccc;
1030 border-bottom: 1px solid #ccc;
1031 box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
1032 padding-right: 60px;
1033 }
1034 #afui .list.inset {
1035 border: 1px solid #ccc;
1036 border-radius: 6px;
1037 margin: 10px;
1038 }
1039 #afui .list.inset li:first-child {
1040 border-top: none;
1041 }
1042 #afui .list.inset li:last-child {
1043 border-bottom: none;
1044 }
1045 #afui select,
1046 #afui textarea,
1047 #afui input[type="text"],
1048 #afui input[type=search],
1049 #afui input[type="password"],
1050 #afui input[type="datetime"],
1051 #afui input[type="datetime-local"],
1052 #afui input[type="date"],
1053 #afui input[type="month"],
1054 #afui input[type="time"],
1055 #afui input[type="week"],
1056 #afui input[type="number"],
1057 #afui input[type="email"],
1058 #afui input[type="url"],
1059 #afui input[type="tel"],
1060 #afui input[type="color"],
1061 #afui .input-group {
1062 width: 100%;
1063 height: 40px;
1064 padding: 10px;
1065 margin-bottom: 10px;
1066 background: #fff;
1067 border: 1px solid #ccc;
1068 border-radius: 5px;
1069 font-size: 14px;
1070 font-weight: normal;
1071 -webkit-appearance: none;
1072 box-sizing: border-box;
1073 }
1074 #afui form {
1075 position: relative;
1076 }
1077 #afui input[type="radio"],
1078 #afui input[type="checkbox"] {
1079 display: none;
1080 }
1081 #afui input[type="radio"] + label,
1082 #afui input[type="checkbox"] + label {
1083 display: inline-block;
1084 width: 60%;
1085 float: right;
1086 position: relative;
1087 text-align: left;
1088 padding: 10px 0 0 0;
1089 }
1090 #afui input[type="radio"]:not(.toggle) + label:before {
1091 background-color: #fafafa;
1092 border: 1px solid #cacece;
1093 border-radius: 50px;
1094 display: block;
1095 position: absolute;
1096 width: 1.3em;
1097 height: 1.3em;
1098 content: '';
1099 margin-right: 5px;
1100 top: 8px;
1101 margin-left: -25px;
1102 }
1103 #afui input[type="radio"]:checked + label:before {
1104 background-color: #000000;
1105 }
1106 #afui input[type="checkbox"] + label:before {
1107 background-color: #fafafa;
1108 border: 1px solid #cacece;
1109 border-radius: 3px;
1110 display: block;
1111 position: absolute;
1112 top: 8px;
1113 left: -25px;
1114 width: 1.3em;
1115 height: 1.3em;
1116 content: " ";
1117 }
1118 #afui input[type="checkbox"]:checked + label:before {
1119 content: '\00a0\2714';
1120 padding: 0px;
1121 display: inline-block;
1122 }
1123 #afui input[type="radio"]:after,
1124 #afui input[type="checkbox"]:after {
1125 visibility: hidden;
1126 display: block;
1127 font-size: 0;
1128 content: " ";
1129 clear: both;
1130 height: 0;
1131 }
1132 #afui input[type="search"] {
1133 border-radius: 20px;
1134 }
1135 #afui label {
1136 float: left;
1137 width: 33%;
1138 font-weight: normal;
1139 font-size: 14px;
1140 color: inherit;
1141 text-align: right;
1142 padding: 11px 6px;
1143 }
1144 #afui label + select,
1145 #afui label + input[type="radio"],
1146 #afui label + input[type="checkbox"] label + textarea,
1147 #afui label + input[type="text"],
1148 #afui label + input[type=search],
1149 #afui label + input[type="password"],
1150 #afui label + input[type="datetime"],
1151 #afui label + input[type="datetime-local"],
1152 #afui label + input[type="date"],
1153 #afui label + input[type="month"],
1154 #afui label + input[type="time"],
1155 #afui label + input[type="week"],
1156 #afui label + input[type="number"],
1157 #afui label + input[type="email"],
1158 #afui label + input[type="url"],
1159 #afui label + input[type="tel"],
1160 #afui label + input[type="color"],
1161 #afui label + textarea {
1162 width: 66%;
1163 }
1164 #afui textarea {
1165 height: auto;
1166 }
1167 #afui .input-group {
1168 width: auto;
1169 height: auto;
1170 padding: 12px;
1171 overflow: hidden;
1172 }
1173 #afui .input-group input:not([type='button']):not([type='submit']),
1174 #afui .input-group textarea,
1175 #afui .input-group select {
1176 margin-bottom: 0;
1177 background-color: transparent;
1178 border: 0;
1179 border-bottom: 1px solid #ccc;
1180 border-radius: 0;
1181 box-shadow: none;
1182 }
1183 #afui .input-group input:not([type="submit"]):not([type="button"]):last-child,
1184 #afui .input-group textarea:last-child,
1185 #afui .input-group select:last-child {
1186 border-bottom: none;
1187 }
1188 #afui .input-group input[type=button],
1189 #afui .input-group input[type=submit] {
1190 margin: 5px;
1191 }
1192 #afui input.toggle + label:before,
1193 #afui input.toggle:checked + label:before {
1194 content: attr(data-on);
1195 position: absolute;
1196 color: #fff;
1197 left: 5px;
1198 width: 42px;
1199 text-align: left;
1200 z-index: 3;
1201 top: 3px;
1202 overflow: hidden;
1203 background-color: transparent;
1204 border: none;
1205 border-radius: 0px;
1206 text-transform: uppercase;
1207 display: none;
1208 }
1209 #afui input.toggle:checked + label:before {
1210 display: block;
1211 }
1212 #afui input.toggle + label:after {
1213 content: attr(data-off);
1214 position: absolute;
1215 color: #505050;
1216 width: 42px;
1217 text-align: left;
1218 z-index: 1;
1219 top: 2px;
1220 left: 30px;
1221 overflow: hidden;
1222 background-color: transparent;
1223 border: none;
1224 border-radius: 0px;
1225 text-transform: uppercase;
1226 }
1227 #afui input.toggle:checked + label:after {
1228 display: none;
1229 }
1230 #afui input[type="radio"].toggle:checked + label:before {
1231 line-height: 1.2em;
1232 }
1233 #afui input.toggle + label {
1234 position: relative;
1235 margin: 5px;
1236 border-radius: 50px;
1237 display: block;
1238 height: 24px;
1239 width: 65px;
1240 border: 1px solid #ccc;
1241 left: 33%;
1242 float: none;
1243 }
1244 #afui input.toggle:checked + label {
1245 background: #1eb0e9;
1246 line-height: -1em;
1247 }
1248 #afui input.toggle + label > span {
1249 display: block;
1250 width: 28px;
1251 height: 28px;
1252 background: #ccc;
1253 border-radius: 50px;
1254 z-index: 5;
1255 top: -2px;
1256 left: 0px;
1257 position: absolute;
1258 transition: transform 100ms linear;
1259 transform: translate3d(0, 0, 0);
1260 -webkit-transform: translate3d(0, 0, 0);
1261 -webkit-transition: -webkit-transform 100ms linear;
1262 }
1263 #afui input.toggle:checked + label > span {
1264 transform: translate3d(37px, 0, 0);
1265 -webkit-transform: translate3d(37px, 0, 0);
1266 }
1267 #afui .formGroupHead {
1268 font-size: 18px;
1269 font-weight: bold;
1270 color: inherit;
1271 margin: 16px 0 8px;
1272 }
1275 #afui input[type=button],
1276 #afui input[type=submit], #afui button {
1277 font-size:inherit;
1278 }
1279 #afui .button {
1280 position:relative;
1281 display:inline-block;
1282 padding:8px 12px;
1283 margin:8px 0;
1284 font-weight:bold;
1285 color:#000;
1286 text-align:center;
1287 vertical-align:top;
1288 cursor:pointer;
1289 background-color:#eee;
1290 border:1px solid #666;
1291 border-radius:6px;
1292 /*box-shadow: 0 1px 0 #fff;*/
1294 text-decoration: none;
1295 z-index:2;
1296 }
1298 /* Active */
1299 #afui .button.pressed { background:#fff; }
1301 #afui .button.previous {
1303 margin-left:16px;
1304 padding-left:6px;
1305 border-color:#666 #666 transparent transparent !important;
1306 }
1307 #afui .button.next {
1308 border-color:#666 transparent #666 #666 !important;
1309 margin-right:16px;
1310 padding-right:6px;
1311 }
1314 #afui .button.previous::after {
1316 z-index:-1;
1317 content:'';
1318 position:absolute;
1319 width:25px; height:25px;
1320 background-color:inherit;
1321 top:3px; left:-11px;
1322 border-radius:5px;
1323 border:1px solid;
1324 border-color:transparent transparent inherit transparent;
1325 -webkit-transform:rotate(45deg); transform:rotate(45deg);
1326 }
1327 #afui .button.next::after {
1328 z-index:-1;
1329 content:'';
1330 position:absolute;
1331 width:25px; height:25px;
1332 background-color:inherit;
1333 top:3px; right:-11px;
1334 border-radius:5px;
1335 border:1px solid;
1336 border-color:transparent transparent transparent transparent;
1337 -webkit-transform:rotate(45deg); transform:rotate(45deg);
1338 }
1340 #afui .button.block { display:block; }
1342 #afui .button.flat {
1343 border-radius: 0;
1344 box-shadow:none;
1345 }
1347 #afui .header .button-grouped>.button {
1348 margin:0;
1349 border-color:#fff;
1350 }
1352 #afui .button-grouped {
1353 display:inline-block;
1354 margin: 5px;
1355 }
1356 #afui .button-grouped * {
1357 border-radius:0px;
1358 float:left;
1359 border-left:0px solid transparent;
1360 border-right: 1px solid #666;
1361 border-bottom: 1px solid #666;
1362 border-top: 1px solid #666;
1363 margin:0;
1364 }
1365 #afui .button-grouped > .button:first-child {
1366 border-left: 1px solid #666;
1367 border-top-left-radius: 6px;
1368 border-bottom-left-radius: 6px;
1369 }
1370 #afui .button-grouped > .button:last-child {
1371 border-top-right-radius: 6px;
1372 border-bottom-right-radius: 6px;
1373 }
1375 #afui .button-grouped.flex {
1376 display: -webkit-box;
1377 display: -moz-box;
1378 display: -ms-flexbox;
1379 display: -webkit-flex;
1380 display: flex;
1381 }
1383 #afui .button-grouped.flex > .button {
1384 -webkit-box-flex: 1;
1385 -moz-box-flex: 1 auto;
1386 -webkit-flex: 1 auto;
1387 -ms-flex: 1 auto;
1388 flex: 1 auto;
1390 white-space: nowrap;
1391 overflow: hidden;
1392 text-overflow: ellipsis;
1393 }
1395 #afui .button-grouped.flex.vertical {
1396 display: inline-block;
1397 }
1399 #afui .button-grouped.vertical * {
1400 border-radius:0px;
1401 display:block;
1402 float:none;
1403 width:100%;
1404 border-left: 1px solid #666;
1405 border-right: 1px solid #666;
1406 border-top: 1px solid #666;
1407 border-bottom: 0px solid #666;
1408 }
1410 #afui .button-grouped.vertical > .button:first-child {
1411 border-top-left-radius: 6px;
1412 border-top-right-radius: 6px;
1413 border-bottom-left-radius:0px;
1414 border-bottom-right-radius:0px;
1415 }
1416 #afui .button-grouped.vertical > .button:last-child {
1417 border-top-right-radius:0px;
1418 border-top-left-radius:0px;
1419 border-bottom-right-radius: 6px;
1420 border-bottom-left-radius: 6px;
1421 border-bottom:1px solid #666;
1422 }
1425 #afui .button.gray {
1426 background:#999;
1427 border-color:#666;
1428 }
1430 #afui .button.yellow {
1431 background-color:#F1C222;
1432 border-color:#999;
1433 }
1435 #afui .button.red {
1436 color:#fff;
1437 text-shadow:0 -1px 0 #666;
1438 background:#B20000;
1439 border-color:#666;
1440 }
1442 #afui .button.green {
1443 color:#fff;
1444 text-shadow:0 -1px 0 #666;
1445 background:#009C0C;
1446 border-color:#666;
1447 }
1449 #afui .button.orange {
1450 color:#fff;
1451 text-shadow:0 -1px 0 #666;
1452 background-color:#FF8000;
1453 border-color:#666;
1454 }
1456 #afui .button.black {
1457 color:#fff;
1458 text-shadow:none;
1459 background:#000;
1460 border-color:#666;
1461 }
1463 #afui .button.slate {
1464 color:#fff;
1465 text-shadow:0 -1px 0 #000;
1466 background:#171F28;
1467 border-color:#666;
1468 }
1470 #afui .header .button {
1471 color: #fff;
1472 background:none;
1473 border-color: transparent;
1474 font-size:12px;
1475 padding:7px;
1476 height:32px;
1477 margin:5px;
1478 text-overflow: ellipsis;
1479 white-space: nowrap;
1480 }
1482 .header .button.icon:before{
1483 padding-left:6px;
1484 }
1486 #afui .backButton {
1487 text-overflow: ellipsis;
1488 white-space: nowrap;
1489 }
1491 #afui .af-badge {
1492 position:absolute;
1493 top:2px; right:2px;
1494 display:inline-block;
1495 min-width:20px; max-width:90%; height:20px;
1496 padding:0 3px;
1497 background-color:red;
1498 border-radius:20px;
1500 font-size:12px;
1501 line-height:19px;
1502 font-weight:bold;
1504 color:#fff;
1505 text-overflow:ellipsis;
1506 text-align:center;
1507 text-shadow:0 -1px 0 rgba(64,0,0,.6);
1508 }
1510 #afui .af-badge.br { bottom:2px; right:2px; top:auto; left:auto; }
1511 #afui .af-badge.bl { bottom:2px; left:2px; top:auto; right:auto; }
1512 #afui .af-badge.tl { top:2px; left:2px; right:auto; bottom:auto; }
1515 #afui .grid {
1516 width: 100%;
1517 overflow:hidden; /* hack to take up height*/
1518 }
1519 #afui .col2,
1520 #afui .col3,
1521 #afui .col1-3,
1522 #afui .col2-3 {
1523 float: none;
1524 width: 100%;
1525 }
1526 #afui .grid:after {
1527 content: '';
1528 clear: both;
1529 }
1530 @media handheld, only screen and (min-width: 768px) {
1531 #afui .col2 {
1532 width: 50%;
1533 float: left;
1534 }
1535 #afui .col3 {
1536 width: 33.3%;
1537 float: left;
1538 }
1539 #afui .col1-3 {
1540 width: 33.3%;
1541 float: left;
1542 }
1543 #afui .col2-3 {
1544 width: 66.6%;
1545 float: left;
1546 }
1547 }
1548 /* Bg #33B5E5
1550 /* Font header #C6C6C6
1551 * reg white-space:
1553 border 303030
1554 hover : #111
1556 */
1558 #afui.android {
1559 font:14px 'Roboto',sans-serif;
1560 background:#000;
1561 color:#fff;
1562 border-color:#fff;
1563 }
1565 #afui.android.light {
1566 background:#FDFDFD;
1567 color:#000;
1568 }
1570 #afui.android .header {
1571 background:inherit;
1572 color:inherit;
1573 border-color:#33B5E5;
1574 }
1576 #afui.android .header .button {
1577 color: inherit;
1578 background:none;
1579 font-size:14px;
1580 box-shadow:none;
1581 }
1583 #afui.android .backButton{
1584 background: inherit;
1585 color:inherit;
1586 }
1588 #afui.android .menuButton:after {
1589 border-color:white;
1590 }
1592 #afui.android.light .menuButton:after {
1593 border-color:black;
1594 }
1596 #afui.android .footer {
1597 box-shadow: none;
1598 background:inherit;
1599 border-top:2px solid #33B5E5;
1600 border-bottom:none;
1601 padding:0;
1602 }
1604 #afui.android .footer>footer>a:not(.button) {
1605 color:inherit;
1606 top:0px;
1607 }
1609 #afui.android .footer>footer>a.pressed:not(.button) {
1610 border:0px;
1611 border-top:4px solid #33B5E5;
1612 border-radius:0px;
1613 background:none;
1614 }
1616 #afui.android .footer>footer>a.icon.pressed:not(.button):before {
1617 color:inherit;
1618 }
1620 #afui.android .af-badge {
1621 border:none;
1622 }
1624 #afui.android .panel, #afui.android #modalContainer {
1625 background:inherit;
1626 color:inherit;
1627 }
1629 #afui.android .list {
1630 background:inherit;
1631 color:inherit;
1632 border-color:#303030;
1633 }
1635 #afui.android .list .divider { color:black; }
1637 #afui.android .panel h2 { color:inherit; }
1640 #afui.android .collapsed:after {border-top: 6px solid;}
1641 #afui.android .collapsed:before {border:2px solid;}
1642 #afui.android .expanded:after {border-bottom: 6px solid;}
1643 #afui.android .expanded:before {border:2px solid;}
1645 #afui.android .collapsed:before,#afui.android .expanded:before {
1646 border-color: inherit;
1647 }
1649 #afui.android .collapsed:after,
1650 #afui.android .expanded:after{
1651 border-top-color:inherit;
1652 border-top-color:inherit;
1653 }
1655 #afui.android .afScrollbar {background:white !important;}
1656 #afui.android.light .afScrollbar {background:black !important;}
1658 #afui.android select, #afui.android textarea, #afui.android input[type="text"],
1659 #afui.android input[type=search], #afui.android input[type="password"],
1660 #afui.android input[type="datetime"], #afui.android input[type="datetime-local"],
1661 #afui.android input[type="date"], #afui.android input[type="month"],
1662 #afui.android input[type="time"], #afui.android input[type="week"],
1663 #afui.android input[type="number"], #afui.android input[type="email"],
1664 #afui.android input[type="url"], #afui.android input[type="tel"],
1665 #afui.android input[type="color"], #afui.android .input-group {
1666 background:inherit;
1667 color:inherit;
1668 }
1670 #afui.android input[type="range"] {
1671 -webkit-appearance: none;
1672 background-color: #ccc;
1673 height: 4px;
1674 position: relative;
1675 top: -10px;
1676 margin-top: 15px;
1677 }
1679 #afui.android input[type="range"]::-webkit-slider-thumb {
1680 -webkit-appearance: none;
1681 position: relative;
1683 z-index: 1;
1684 width: 11px;
1685 height: 21px;
1687 -webkit-border-radius: 0;
1688 -moz-border-radius: 0;
1689 border-radius: 0;
1690 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
1691 background-image: gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
1692 }
1694 #afui.android input.toggle+label:after { color:inherit; }
1696 #afui.android input.toggle+label { border-radius:0; }
1698 #afui.android input.toggle+label > span {
1699 border-radius:0;
1700 top:0;
1701 width:27px;
1702 height:23px;
1703 }
1705 #afui.android label { color:inherit; }
1707 #afui.android input[type="radio"]:checked+label:before,#afui.android input[type="checkbox"]:checked+label:before {
1708 background: #33B5E5;
1709 }
1711 #afui.android > #aside_menu,
1712 #afui.android > #menu {
1713 border-right:1px solid rgba(128,128,128,0.5);
1714 color:inherit;
1715 background:inherit;
1716 }
1718 #afui.android #aside_menu .list li,
1719 #afui.android #menu .list li {
1720 box-shadow:none;
1721 border-color:#ccc;
1722 }
1724 #afui.android #aside_menu .list .divider,
1725 #afui.android #menu .list .divider {
1726 background:inherit;
1727 color:inherit;
1728 font-size: 1em;
1729 }
1731 #afui.android #aside_menu .list > li > a,
1732 #afui.android #menu .list > li > a {
1733 background:inherit;
1734 color:inherit;
1735 font-size: 1em;
1736 }
1738 #afui.android #aside_menu .list,
1739 #afui.android #menu .list {
1740 font-weight: normal;
1741 }
1743 #afui.android .button {
1744 border-radius:0;
1745 border:none;
1746 background:#424343;
1747 border-color:transparent;
1748 color:inherit;
1749 text-shadow:none;
1750 box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
1751 }
1753 #afui.android.light .button {
1754 background:#eee;
1755 border-color:#D1D1D1;
1756 }
1758 #afui.android .button.pressed,
1759 #afui.android .header .button-grouped > .button.pressed {
1760 background:#33B5E5;
1761 border-color:#33B5E5;
1762 }
1764 #afui.android .button.previous::after {
1765 width:20px; height:20px;
1766 background-color:inherit;
1767 top:5px; left:-12px;
1768 border-radius:0;
1769 box-shadow:none;
1770 border-color:transparent;
1771 }
1773 #afui.android .button.next::after {
1774 width:20px; height:20px;
1775 background-color:inherit;
1776 top:5px; right:-12px;
1777 border-radius:0;
1778 box-shadow:none;
1779 border-color:transparent;
1780 }
1782 #afui.android .header .button-grouped > .button {
1783 border-color:#777;
1784 }
1786 #afui.android .button-grouped * {
1787 border:1px solid rgba(255,255,255,.25);
1788 border-left-width:0;
1789 box-shadow:none;
1790 }
1792 #afui.android .button-grouped.vertical * {
1793 border-left:1px solid rgba(255,255,255,.25);
1794 border-bottom-width:0;
1795 }
1797 #afui.android .button-grouped.vertical .button:last-child {
1798 border-bottom:1px solid rgba(255,255,255,.25);
1799 }
1801 #afui.android .afPopup {
1802 border: solid 1px #aaa;
1803 padding: 0;
1804 -webkit-border-radius: 0;
1805 border-radius: 0;
1806 -webkit-transform:none;
1807 transform:none;
1808 -webkit-transition: none;
1809 transition:none;
1810 background:inherit;
1811 background-color:rgba(0,0,0,0.9);
1812 color:inherit;
1813 }
1815 #afui.android.light .afPopup {
1816 background-color:rgba(255,255,255,0.9);
1817 }
1819 #afui.android .afPopup>HEADER{
1820 font-weight:normal;
1821 font-size:20px;
1822 text-align:left;
1823 padding:10px;
1824 }
1826 #afui.android .afPopup>DIV{
1827 font-size:14px;
1828 text-align:left;
1829 padding:10px;
1830 margin:0;
1831 border-top: solid 1px #aaa;
1832 border-bottom: solid 1px #aaa;
1833 }
1835 #afui.android .afPopup>FOOTER {
1836 background:#bbb;
1837 }
1839 #afui.android .afPopup>FOOTER>A, #afui.android.light .afPopup>FOOTER>A {
1840 background:#fff;
1841 color:#111;
1842 }
1844 #afui.android .afPopup>FOOTER>A#cancel{
1845 margin-left:10px;
1846 width:120px;
1847 }
1849 #afui.android .afPopup>FOOTER>A#action{
1850 margin-right:10px;
1851 width:120px;
1852 }
1854 #afui.android .afPopup>FOOTER>A.center{
1855 margin:8px;
1856 }
1858 #afui.android #af_actionsheet {
1859 border: #666 1px solid;
1860 border-top: #33B5E5 3px solid;
1861 background:#555;
1862 color:inherit;
1863 margin:-20px 20px 0 20px;
1864 padding:0px;
1865 }
1867 #afui.android.light #af_actionsheet {
1868 border: #bbb 1px solid;
1869 border-top: #33B5E5 3px solid;
1870 background:#bbb;
1871 }
1873 #afui.android #af_actionsheet a{
1874 border-radius:0;
1875 -webkit-border-radius:0;
1876 border:0px solid #777;
1877 background:#424343;
1878 color:inherit;
1879 line-height: 50px;
1880 margin-bottom: 1px;
1881 }
1883 #afui.android.light #af_actionsheet a{
1884 background:#fff;
1885 }
1887 #afui.android #af_actionsheet a.cancel{
1888 margin-bottom: 0px;
1889 }
1891 /* Bg #00ABA9
1893 /* Font header #C6C6C6
1894 * reg white-space:
1896 border 303030
1897 hover : #111
1899 */
1900 @-ms-viewport{
1901 width: device-width;
1902 }
1903 @font-face {
1904 font-family: 'win8back';
1905 src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAARUAAsAAAAABmgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAS4AAAGZpdvO1kZGVE0AAAI4AAAAGgAAABxnmGDwR0RFRgAAAlQAAAAdAAAAIAAwAARPUy8yAAACdAAAAEsAAABgL9zcQGNtYXAAAALAAAAAOgAAAVLgE/LMaGVhZAAAAvwAAAAuAAAANvx5/t1oaGVhAAADLAAAAB4AAAAkBBD/5GhtdHgAAANMAAAADAAAAAwEAAACbWF4cAAAA1gAAAAGAAAABgADUABuYW1lAAADYAAAAOgAAAGPgxEkPHBvc3QAAARIAAAADAAAACAAAwAAeJxtTj1PAkEUnD0WQbwAEomYnEdlDxbGQu0Ua+2sULFAEhIEY0WiNJisITE5G2lo6Iw1/gULKxMTSypLCz+2UMe7A6+ymTczb2bfCkgJIcTkSbm6vLe7X4EwILCm5w1th3RGKjOkTGnHMLedolIBMSOqoh3dCFtoJSwgaaE9bSFqicsUpPdGFAnMIntcLa/ncjl3bLjj70xwDhBtcY6Q1zDwIRD/dPRRmrgo3BK1wRbZcRnrHqsH8h/PD49qQTfwsvyxTyGJZt8mDp6HY/Bls18krxf8RY9s7Qw96HlecQy+9BajiB92a1nyceWGYuL7zf3yw5RB3oWeyPz72QRxeL9KXi1Jstt9UWRtkCQ6m3kXCq8eWyRKpYwKx5VuyC9HO5G4dmZUWpmxXzJhtKEAAHicY2BgYGQAgjO2i86D6LNr4wVgNABJKQZOAAB4nGNgZGBg4ANiCQYQYGJgBEIQyQLmMQAABGAANQAAAHicY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwMjPAgQCCyRCQ5prC4PCA4QMD44P/Dxj0GB8wKDQwMDDCFSgAISMAEEIMHwB4nGNgYGBmgGAZBkYGEPAB8hjBfBYGAyDNAYRMIIkHDB8Y/v9HZikwCjBBdYEBIxsDMndEAgDJXAiuAAB4nGNgZGBgAGK+Bx4V8fw2Xxm4mRhA4OzaeAEE/f8BEwPjAyCXgwEsDQAU3gn7AAB4nGNgZGBgfPD/AYMeEwMDwz8GIAkUQQHMAG3nA/YAAAIAAAACAAACAAAAAAAAUAAAAwAAeJx9jjFOw0AQRZ8TJ4BACFHQ0KxEiWzZRomiHMAHSJHeiVaWRWRLm0QpuActZ6DlGByAM3AEvsPQUGSl0b79+2fmA1e8EtGfiHNujQec8Wg85IEX41ied+MRl3waj6V/yxnFF1Jujl09D7jm3nhIyZNxLM+b8Yg7PozH0r840NAyY0XFmmc4NO1sVa1FCzw1ezb6Cnr6er+pBCWdWnbHO8jhcRSkZLrnqv8jf9UpCRNVIV+ucJRduyu7UHtXpJmbu7/FwmkySYosl+lEvKUWB7Yy9HGchvYRWPqwbbrW5Wl2qv0H0Z06yHicY2BmwAsAAH0ABA==) format('woff'),
1906 url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWeYYPAAAAWMAAAAHEdERUYAMgAGAAAFbAAAACBPUy8yL7rcHwAAAVgAAABWY21hcOAV89MAAAHEAAABUmdhc3D//wADAAAFZAAAAAhnbHlmEDC/5gAAAyQAAAB0aGVhZPx5/t0AAADcAAAANmhoZWEEEP/mAAABFAAAACRobXR4BKoAAgAAAbAAAAAUbG9jYQAsADoAAAMYAAAADG1heHAASgAcAAABOAAAACBuYW1lgxEkPAAAA5gAAAGPcG9zdJtVPjcAAAUoAAAAPAABAAAAAQAAWPDPKV8PPPUACwIAAAAAAM2tXxAAAAAAza1fEAAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AALgIAAAD+AAIAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFABkAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADwAAHg/+AALgHgACCAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAgAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAOAA8AD//wAAAADgAPAA//8AACADEAQAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALAA6AAMAAv/iAf4B3gAHAA8AGAAAACIGFBYyNjQCIiY0NjIWFCU3IwcXMyczNQFp0pWV0pWgvIaGvIb+8Gtkj49ka84B3pXSlZXS/rOGvIaGvIFrjo5rRgAAAAABAAD/4AIAAeAAAgAAEQEhAgD+AAHg/gAAAAAAAAAMAJYAAQAAAAAAAQAIABIAAQAAAAAAAgAHACsAAQAAAAAAAwAjAHsAAQAAAAAABAAIALEAAQAAAAAABQALANIAAQAAAAAABgAIAPAAAwABBAkAAQAQAAAAAwABBAkAAgAOABsAAwABBAkAAwBGADMAAwABBAkABAAQAJ8AAwABBAkABQAWALoAAwABBAkABgAQAN4AdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAARgBvAG4AdABGAG8AcgBnAGUAIAAyAC4AMAAgADoAIAB3AGkAbgA4AGIAYQBjAGsAIAA6ACAANgAtADUALQAyADAAMQAzAABGb250Rm9yZ2UgMi4wIDogd2luOGJhY2sgOiA2LTUtMjAxMwAAdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAEAAgECAQMHdW5pRTAwMAd1bmlGMDAwAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAEAAEABAAAAAIAAAAAAAEAAAAAzD2izwAAAADNrV8QAAAAAM2tXxA=) format('truetype');
1907 font-weight: normal;
1908 font-style: normal;
1909 }
1912 #afui.win8 {
1913 font:14px "Segoe UI Semilight", "HelveticaNeue-light", Helvetica, Arial, sans-serif;
1914 font-size:14px;
1915 background-color:#000;
1916 color:#fff;
1917 }
1919 #afui.win8.light {
1920 background:#fff;
1921 color:#000;
1922 }
1924 #afui.win8 .header .button {
1925 color: inherit;
1926 border-color:transparent;
1927 font-size:14px;
1928 }
1932 #afui.win8 .backButton.pressed {
1933 background:inherit;
1934 }
1936 #afui.win8 .backButton {
1937 color:inherit;
1938 background:inherit;
1939 margin:0;
1940 font-family: 'win8back';
1941 width:0px;
1942 height:0px;
1943 font-style: normal;
1944 font-weight: normal;
1945 font-variant: normal;
1946 text-transform: none;
1947 line-height: 1;
1948 padding:0px;
1949 margin:0px;
1950 border:none;
1951 position:absolute;
1952 left:-185px;
1953 -webkit-font-smoothing: antialiased;
1954 }
1956 #afui.win8 .backButton::before {
1957 content: "\e000";
1958 font-size:30px;
1959 position:absolute;
1960 top:10px;
1961 right:-225px;
1962 left:auto;
1963 color:inherit;
1964 font-family:inherit;
1965 -webkit-transform:none;
1966 transform:none;
1967 }
1969 #afui.win8 .header h1 {
1970 text-align: left;
1971 color:inherit;
1972 }
1974 #afui.win8 .header{
1975 border:0px;
1976 background: inherit;
1977 border-bottom:inherit;
1978 color:inherit;
1979 }
1981 #afui.win8 .footer {
1982 padding:0px;
1983 background:inherit;
1984 text-align: center;
1985 height:65px;
1986 background:rgba(33,32,33,.9);
1987 border-top:none;
1988 }
1990 #afui.win8.light .footer{
1991 background:#F2F2F2;
1992 color:black;
1993 }
1995 #afui.win8 .footer>footer>a:not(.button) {
1996 position: relative;
1997 width: 56px !important;
1998 height: 56px;
1999 display: inline-block;
2000 font: normal 9px/85px Segoe WP, Segoe UI, Verdana, Helvetica, Sans-Serif;
2001 text-decoration: none;
2002 color: inherit;
2003 text-align: center;
2004 text-shadow: 0 0 rgba(0, 0, 0, 0);
2005 overflow: hidden;
2006 background:inherit;
2007 -webkit-backface-visibility: hidden;
2008 -webkit-perspective: 1000;
2009 }
2011 #afui.win8.light .footer>footer>a:not(.button) {
2012 text-shadow: 0 0 rgba(0, 0, 0, 0);
2013 }
2015 #afui.win8 .footer>footer>a.icon.pressed:not(.button):before {
2016 background-color: #00ABA9;
2017 }
2019 #afui.win8 .footer>footer>a.icon:not(.button):before {
2020 top: 0px;
2021 left: 10px;
2022 font-size:19px;
2023 width:auto;
2024 padding: 5px;
2025 border: 3px solid #fff;
2026 border-radius: 20px;
2027 }
2029 #afui.win8.light .footer>footer>a.icon:not(.button):before {
2030 border: 3px solid #000;
2031 }
2033 #afui.win8 .footer>footer>a:not(:last-of-type):not(.button){
2034 border:none;
2035 }
2037 #afui.win8 .af-badge {
2038 border:none;
2039 }
2041 #afui.win8 #content,#afui.win8 #content > .panel {
2042 background:inherit;
2043 color:inherit;
2044 }
2046 #afui.win8 .list {
2047 background:inherit;
2048 color:inherit;
2049 border-color:#303030;
2050 }
2052 #afui.win8 .list .divider, #afui.win8 #menu.tabletMenu .list .divider {
2053 background:#00ABA9;
2054 padding:5px;
2055 display:inline;
2056 font-size:16px;
2057 font-weight:normal;
2058 border-top:none;
2059 border-bottom:none;
2060 color:inherit;
2061 }
2063 #afui.win8 .list li {
2064 border-top:none;
2065 border-bottom:none;
2066 font-size:20px;
2067 }
2069 #afui.win8 .panel h2 {
2070 color:inherit;
2071 font-weight:normal;
2072 font-size:34px;
2073 line-height:34px;
2074 height:auto;
2075 }
2077 #afui.win8 .collapsed:after {border-top: 6px solid;}
2078 #afui.win8 .collapsed:before {border:2px solid;}
2079 #afui.win8 .expanded:after {border-bottom: 6px solid;}
2080 #afui.win8 .expanded:before {border:2px solid;}
2082 #afui.win8 .collapsed:before,#afui.win8 .expanded:before {
2083 border-color: inherit;
2084 }
2086 #afui.win8 .collapsed:after,
2087 #afui.win8 .expanded:after{
2088 border-top-color:inherit;
2089 border-top-color:inherit;
2090 }
2092 #afui.win8 .afScrollbar {background:white !important;}
2093 #afui.win8.light .afScrollbar {background:black !important;}
2095 #afui.win8 select, #afui.win8 textarea, #afui.win8 input[type="text"], #afui.win8 input[type="search"], #afui.win8 input[type="password"], #afui.win8 input[type="datetime"], #afui.win8 input[type="datetime-local"], #afui.win8 input[type="date"], #afui.win8 input[type="month"], #afui.win8 input[type="time"], #afui.win8 input[type="week"], #afui.win8 input[type="number"], #afui.win8 input[type="email"], #afui.win8 input[type="url"], #afui.win8 input[type="tel"], #afui.win8 input[type="color"], #afui.win8 .input-group {
2096 background:black;
2097 color:inherit;
2098 }
2100 #afui.win8.light select, #afui.win8.light textarea, #afui.win8.light input[type="text"], #afui.win8.light input[type="search"], #afui.win8.light input[type="password"], #afui.win8.light input[type="datetime"], #afui.win8.light input[type="datetime-local"], #afui.win8.light input[type="date"], #afui.win8.light input[type="month"], #afui.win8.light input[type="time"], #afui.win8.light input[type="week"], #afui.win8.light input[type="number"], #afui.win8.light input[type="email"], #afui.win8.light input[type="url"], #afui.win8.light input[type="tel"], #afui.win8.light input[type="color"], #afui.win8.light .input-group {
2101 background:white;
2102 }
2104 #afui.win8 input.toggle+label:after {
2105 color:inherit;
2106 }
2108 #afui.win8 input.toggle+label {
2109 border-radius:0;
2110 }
2112 #afui.win8 input.toggle:checked+label {
2113 background:#00ABA9;
2114 }
2116 #afui.win8 input.toggle+label > span {
2117 border-radius:0;
2118 top:0;
2119 width:27px;
2120 height:23px;
2121 }
2123 #afui.win8 input[type="radio"]:checked+label:before,#afui.win8 input[type="checkbox"]:checked+label:before {
2124 background: #00ABA9;
2125 }
2127 #afui.win8 > #menu {
2128 border-right:1px solid rgba(128,128,128,0.5);
2129 color:inherit;
2130 background:inherit;
2131 }
2133 #afui.win8 > #aside_menu {
2134 border-left:1px solid rgba(128,128,128,0.5);
2135 color:inherit;
2136 background:inherit;
2137 border-right:0;
2138 }
2140 #afui.win8 #menu .list .divider {
2141 padding:4px;
2142 line-height:30px;
2143 margin-left:10px;
2144 }
2146 #afui.win8 #menu .list {
2147 font-weight: normal;
2148 }
2150 #afui.win8 #menu .list li,#afui.win8 #menu .list .divider {
2151 box-shadow:none;
2152 }
2154 #afui.win8 .button {
2155 border-radius:0;
2156 border:none;
2157 background:inherit;
2158 border:3px solid #fff;
2159 color:inherit;
2160 text-shadow:none;
2161 box-shadow:none;
2162 }
2164 #afui.win8.light .button {
2165 border:3px solid #000;
2166 }
2168 #afui.win8 .button.pressed {
2169 background:#00ABA9;
2170 }
2172 #afui.win8 .button.next, #afui.win8 .button.previous {
2173 border-color: #fff !important;
2174 }
2175 #afui.win8 .button.next::after, #afui.win8 .button.previous::after{
2176 border:none;
2177 }
2179 #afui.win8 .button-grouped > .button{
2180 border:3px solid #fff;
2181 border-right:0;
2182 }
2184 #afui.win8 .button-grouped > .button:last-child {
2185 border-right:3px solid #fff;
2186 }
2188 #afui.win8 .button-grouped > .button:first-child,
2189 #afui.win8 .button-grouped > .button:last-child {
2190 border-radius:0;
2191 }
2193 #afui.win8 .button-grouped.vertical >.button{
2194 border:3px solid #fff;
2195 border-bottom:0;
2196 }
2198 #afui.win8 .button-grouped.vertical > .button:last-child {
2199 border-bottom:3px solid #fff;
2200 }
2202 #afui.win8 .header .button-grouped > .button{
2203 border-color: #fff;
2204 }
2206 #afui.win8 .header .button-grouped > .button.pressed{
2207 background:#00ABA9;
2208 }
2210 #afui.win8.light .button-grouped > .button,
2211 #afui.win8.light .button-grouped.vertical > .button,
2212 #afui.win8.light .header .button-grouped > .button{
2213 border-color: #111;
2214 }
2216 /**
2217 * code specific to WP8
2218 */
2219 @media handheld, only screen and (max-width: 768px){
2220 #afui.win8 #menu {
2221 display: none;
2222 position: absolute;
2223 left: 0;
2224 bottom: 0;
2225 z-index: 1000;
2226 width:100%;
2227 height: 150px;
2228 font-size:20px;
2229 top:auto;
2230 background:inherit;
2231 color:inherit;
2232 -webkit-transition-timing-function: linear;
2233 transition-timing-function: linear;
2234 -webkit-transform:translate3d(0,150px,0);
2235 transform:translate3d(0,150px,0);
2236 }
2237 #afui.win8 .hasMenu,#afui.win8 .hasMenu.on{
2239 -webkit-transform:translate3d(0,0,0);
2240 transform:translate3d(0,0,0);
2241 }
2242 #afui.win8 .header #menubadge {
2243 display:none;
2244 }
2245 }
2247 #afui.win8 .afPopup {
2248 width: 100%;
2249 border: solid 0px #72767b;
2250 left:0px !important;
2251 -webkit-border-radius: 0;
2252 border-radius: 0;
2253 -webkit-transform:none;
2254 transform:none;
2255 -webkit-transition: none;
2256 transition:none;
2257 top: 0 !important;
2258 background:#222;
2259 color:inherit;
2260 padding:15px;
2261 }
2263 #afui.win8.light .afPopup {
2264 background:#eee;
2265 }
2267 #afui.win8 .afPopup>HEADER{
2268 font-size:20px;
2269 }
2271 #afui.win8 .afPopup>DIV{
2272 font-size:16px;
2273 padding:10px 0;
2274 margin:0;
2275 }
2277 #afui.win8 .afPopup>FOOTER{
2278 width:100%;
2279 text-align:left;
2280 display:block !important;
2281 }
2283 #afui.win8 .afPopup>FOOTER>A#cancel{
2284 float:left;
2285 min-width:100px;
2286 }
2288 #afui.win8 .afPopup>FOOTER>A#action{
2289 float:left;
2290 min-width:100px;
2291 margin-left:10px;
2292 }
2294 #afui.win8 .afPopup>FOOTER>A.center{
2295 width:auto;
2296 }
2298 #afui.win8 #af_actionsheet {
2299 background:#aaa;
2300 color:black;
2301 }
2303 #afui.win8 #af_actionsheet a{
2304 border-radius:0;
2305 -webkit-border-radius:0;
2306 border:0px solid black;
2307 background-color:transparent;
2308 font-weight:normal;
2309 color:black;
2310 box-shadow: 0px 1px 1px rgba(255,255,255,0);
2311 }
2313 #afui.win8 #menu .list > li > a {
2314 color:inherit;
2315 }
2317 @media handheld, only screen and (min-width: 768px){
2319 #afui.win8 .footer footer #metroMenu {
2320 display:none;
2321 }
2322 #afui.win8 .footer {
2323 -webkit-transform:translate3d(0,0,0);
2324 transform:translate(0,0);
2325 }
2326 #afui.win8 #menu {
2327 background:inherit;
2328 color:inherit;
2329 font-size:18px;
2330 left:0;
2331 top:0;
2332 width:200px;
2333 }
2334 #afui.win8 #menu .list > li > a:after{
2335 margin-top:-11px;
2336 }
2337 }
2340 #afui.win8 input[type="range"] {
2341 -webkit-appearance: none;
2342 -webkit-appearance: none;
2343 background-color: #ccc;
2344 height: 4px;
2345 position: relative;
2346 top: -10px;
2347 margin-top: 15px;
2349 }
2351 #afui.win8 input[type="range"]::-webkit-slider-thumb {
2352 -webkit-appearance: none;
2353 position: relative;
2354 z-index: 1;
2355 width: 15px;
2356 height: 15px;
2358 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
2359 background-image: gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
2360 }
2362 #afui.bb {
2363 font-family: "Slate Pro",Slate,"Myriad Pro","BBAlpha Sans",Helvetica;
2364 font-size: 12pt;
2365 }
2367 #afui.bb .header {
2368 background:#00609E;
2369 background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2370 background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE));
2371 background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2372 background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2373 border-style:solid;
2374 border-width:1px;
2375 border-color:#009CE1 transparent #004E92 transparent;
2376 }
2378 #afui.bb .header h1 {
2379 text-shadow:rgba(0,0,0,0.8) 0 1px 0;
2380 font-weight:normal;
2381 }
2383 #afui.bb .list {
2384 font-weight: normal;
2385 }
2387 #afui.bb .backButton {
2388 display: block;
2389 position: absolute;
2390 line-height:60px;
2391 left: 5px;
2392 text-overflow: ellipsis;
2393 font-size: 10px;
2394 padding: 0;
2395 color: #fff;
2396 text-shadow: none;
2397 background-color: transparent;
2398 border:none;
2399 border-color: transparent;
2400 height: 44px;
2401 top:0;
2402 border-radius: 0;
2403 box-shadow:none;
2404 margin: 0;
2405 padding-left: 0;
2406 text-align: center;
2407 width:50px;
2408 padding:0 !important;
2409 margin:0 !important;
2410 }
2412 #afui.bb .backButton::before {
2413 z-index: -1;
2414 font-size:22px;
2415 position: absolute;
2416 top: -15px;
2417 left: 15px;
2418 text-align: center;
2419 border-radius: 0;
2420 border: none;
2421 border-color: transparent;
2422 box-shadow: none;
2423 -webkit-transform: none;
2424 transform: none;
2425 font-family: 'chevron';
2426 speak: none;
2427 font-style: normal;
2428 font-weight: normal;
2429 font-variant: normal;
2430 text-transform: none;
2431 line-height: 1;
2432 -webkit-font-smoothing: antialiased;
2433 content: "\f054";
2434 top:1px;
2435 -webkit-transform:rotate(180deg);
2436 transform:rotate(180deg);
2437 background-color: transparent;
2438 }
2440 #afui.bb .backButton::after {
2441 z-index: -1;
2442 font-size:24px;
2443 content: ' ';
2444 position: absolute;
2445 font-weight:bold;
2446 background-color: transparent;
2447 left:55px;
2448 height:48px;
2449 top:-5px;
2450 width:2px;
2451 background: #0aa9dc;
2452 margin:auto;
2453 text-align: center;
2454 border-radius: 0;
2455 border: none;
2456 border-color: transparent;
2457 box-shadow: none;
2458 -webkit-transform: rotate(10deg);
2459 transform: rotate(10deg);
2460 }
2462 #afui.bb .header .button {
2463 color:#fff;
2464 background:none;
2465 text-shadow:0 -1px 0 #333;
2466 border-color:transparent;
2467 }
2469 #afui.bb .footer {
2470 border:none;
2471 border-radius:0px;
2472 background:none;
2473 padding:0;
2474 -webkit-box-shadow:none;
2475 box-shadow: none;
2476 }
2478 #afui.bb .footer>footer>a:not(.button) {
2479 height:49px;
2480 top:0px;
2481 border-top:4px solid #000;
2482 background:#1e1e1e;
2483 }
2485 #afui.bb .footer>footer>a.pressed:not(.button) {
2486 border:0px;
2487 border-top:4px solid #0aa9dc;
2488 border-radius:0px;
2489 background:#3a3a3a;
2490 color:white;
2491 }
2493 #afui.bb .footer>footer>a:not(:last-of-type):not(.pressed):not(.button){
2494 border-right:1px solid black;
2495 }
2497 #afui.bb .footer>footer>a.icon.pressed:not(.button):before {
2498 color: white;
2499 }
2501 #afui.bb #aside_menu,
2502 #afui.bb #menu {
2503 border-right:1px solid #bbb;
2504 background: #fff;
2505 color: #000;
2506 }
2508 #afui.bb #aside_menu .list > li > a,
2509 #afui.bb #menu .list > li > a {
2510 color:inherit;
2511 }
2513 #afui.bb #aside_menu .list .divider,
2514 #afui.bb #menu .list .divider {
2515 background:#fafafa;
2516 color:black;
2517 }
2519 #afui.bb .list .divider {
2520 background:#fafafa;
2521 border-top:none;
2522 color:black;
2523 border-bottom: 1px solid #0aa9dc !important;
2524 }
2526 #afui.bb #aside_menu .list li, #afui.bb #aside_menu .list .divider, #afui.bb #aside_menu .list li:first-child, #afui.bb #aside_menu .list li:last-child,
2527 #afui.bb #menu .list li, #afui.bb #menu .list .divider, #afui.bb #menu .list li:first-child, #afui.bb #menu .list li:last-child {
2528 border-bottom-color :#ccc;
2529 }
2531 #afui.bb .button ,
2532 #afui.bb .button-grouped *,
2533 #afui.bb .button-grouped > .button:first-child,
2534 #afui.bb .button-grouped.vertical *,
2535 #afui.bb .button-grouped.vertical > .button:last-child,
2536 #afui.bb > .header .button-grouped > .button {
2537 border-color:#ccc;
2538 }
2540 #afui.bb > .header .button-grouped > .button.pressed {
2541 background:#07a;
2542 }
2544 #afui.bb .panel {
2545 background:#fff;
2546 }
2548 #afui.bb .afPopup {
2549 border: solid 1px #ccc;
2550 -webkit-border-radius: 3px;
2551 border-radius: 3px;
2552 background:inherit;
2553 color:inherit;
2554 padding:0;
2555 }
2557 #afui.bb .afPopup>HEADER{
2558 font-weight:normal;
2559 font-size:20px;
2560 text-align:center;
2561 margin:0;
2562 padding:8px;
2563 color:white;
2564 border-radius: 2px;
2565 background:#00609E;
2566 background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2567 background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE));
2568 background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2569 background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%);
2570 }
2572 #afui.bb .afPopup>DIV{
2573 text-align:center;
2574 padding:10px;
2575 }
2577 #afui.bb .afPopup>FOOTER{
2578 padding:5px;
2579 }
2581 #afui.bb .afPopup>FOOTER>A#cancel{
2582 width:120px;
2583 }
2585 #afui.bb .afPopup>FOOTER>A#action{
2586 width:120px;
2587 }
2589 #afui.bb #af_actionsheet {
2590 background:white;
2591 color:inherit;
2592 }
2594 #afui.bb #af_actionsheet a{
2595 border-radius:5px;
2596 -webkit-border-radius:5px;
2597 border:1px solid #ccc;
2598 background:#eee;
2599 color:#111;
2600 }
2602 /** iOS 7 theme */
2604 /** Blue color color:rgba(82,155,234,255); */
2606 /* border rgba(158,158,158,255) */
2608 #afui.ios7 {
2609 font-family:'HelveticaNeue', 'Helvetica Neue',Helvetica, Arial, sans-serif;
2610 }
2612 #afui.ios7 .header {
2613 background:rgb(249,249,249);
2614 color:inherit;
2615 border:none;
2616 border-bottom:1px solid rgba(158,158,158,255);
2617 }
2620 #afui.ios7.overlayStatusbar{
2621 margin-top: 20px;
2622 background: #f9f9f9;
2623 margin-bottom: -20px;
2624 padding-bottom: 20px;
2625 }
2627 #afui.ios7 .header .button {
2628 color:rgba(82,155,234,255);
2629 border-color:transparent;
2630 font-size:14px;
2631 font-weight:normal;
2632 }
2634 #afui.ios7 .header h1 {
2635 color:inherit;
2636 text-shadow:none;
2637 }
2639 #afui.ios7 .panel, #afui.ios7 #modalContainer {
2640 background:rgba(238,238,238,255);
2641 }
2643 #afui.ios7 .panel h2 {
2644 color:inherit;
2645 }
2647 #afui.ios7 .footer {
2648 background:rgb(249,249,249);
2649 color:black;
2650 border-top:1px solid rgba(158,158,158,255);
2651 box-shadow:none;
2652 }
2654 #afui.ios7 .footer>footer>a:not(.button) {
2655 color:rgba(96,96,96,255);
2656 }
2658 #afui.ios7 .footer>footer>a.pressed:not(.button) {
2659 border-radius:0;
2660 background:transparent;
2661 }
2663 #afui.ios7 #menubadge:after {
2664 border-color:rgba(82,155,234,255);
2665 }
2667 #afui.ios7 .list {
2668 font-weight:normal;
2669 }
2671 #afui.ios7 > #aside_menu,
2672 #afui.ios7 > #menu {
2673 border-right:1px solid #bbb;
2674 background:rgba(238,238,238,255);
2675 color:inherit;
2676 }
2678 #afui.ios7 #aside_menu .list li,#afui.ios7 #aside_menu .list .divider,#afui.ios7 #aside_menu .list li:first-child,#afui.ios7 #aside_menu .list li:last-child,
2679 #afui.ios7 #menu .list li,#afui.ios7 #menu .list .divider,#afui.ios7 #menu .list li:first-child,#afui.ios7 #menu .list li:last-child {
2680 border-color:rgb(215,215,215);
2681 font-weight:normal;
2682 box-shadow:none;
2683 }
2685 #afui.ios7 #aside_menu .list .divider,
2686 #afui.ios7 #menu .list .divider {
2687 background:rgba(238,238,238,255);
2688 color:inherit;
2689 font-size: 1em;
2690 border-bottom:1px solid rgb(215,215,215);
2691 }
2693 #afui.ios7 #aside_menu .list a,
2694 #afui.ios7 #menu .list a {
2695 color:inherit;
2696 }
2698 #afui.ios7 #aside_menu .list,
2699 #afui.ios7 #menu .list {
2700 background:white;
2701 font-weight: normal;
2702 color:inherit;
2703 }
2705 #afui.ios7 .list > li > a:after{
2706 color:rgba(217,217,217,255);
2707 }
2709 #afui.ios7 .button {
2710 background-color:transparent;
2711 }
2713 #afui.ios7 .backButton {
2714 background:rgba(249,249,249,1);
2715 color:rgba(82,155,234,255);
2716 display: block;
2717 position: absolute;
2718 line-height:44px;
2719 left: 25px;
2720 text-overflow: ellipsis;
2721 font-size: 14px;
2722 padding: 0;
2723 text-shadow: none;
2724 background-color: transparent;
2725 border:none;
2726 border-color: transparent;
2727 height: 44px;
2728 top:auto;
2729 border-radius: 0;
2730 box-shadow:none;
2731 margin: 0;
2732 padding-left: 0;
2733 text-align: center;
2734 width:50px;
2735 padding:0 !important;
2736 margin:0 !important;
2737 }
2739 #afui.ios7 .backButton::before {
2740 z-index: -1;
2741 font-size:22px;
2742 position: absolute;
2743 top: 10px;
2744 left: -20px;
2745 text-align: center;
2746 border-radius: 0;
2747 border: none;
2748 border-color: transparent;
2749 box-shadow: none;
2750 -webkit-transform: none;
2751 transform: none;
2752 font-family: 'chevron';
2753 speak: none;
2754 font-style: normal;
2755 font-weight: normal;
2756 font-variant: normal;
2757 text-transform: none;
2758 line-height: 1;
2759 -webkit-font-smoothing: antialiased;
2760 content: "\f054";
2761 -webkit-transform:rotate(180deg);
2762 transform:rotate(180deg);
2763 background-color: transparent;
2764 }
2766 #afui.ios7 .backButton::after {
2767 content: '';
2768 width:0;
2769 height:0;
2770 border:none;
2771 }
2774 #afui.ios7 .button {
2775 box-shadow:none;
2776 border-radius: 0;
2777 border-color:#ccc;
2778 color:rgba(82,155,234,255);
2779 text-shadow:none;
2780 }
2782 #afui.ios7 .button-grouped * ,
2783 #afui.ios7 .button-grouped > .button:first-child,
2784 #afui.ios7 .button-grouped.vertical * ,
2785 #afui.ios7 .button-grouped.vertical > .button:last-child,
2786 #afui.ios7 .header .button-grouped > .button {
2787 border-color:rgba(82,155,234,255);
2788 }
2790 #afui.ios7 .button-grouped > .button.pressed ,
2791 #afui.ios7 .header .button-grouped > .button.pressed{
2792 color:white;
2793 background:rgba(82,155,234,255);
2794 }
2796 #afui.ios7 .afPopup {
2797 border:1px solid rgba(158,158,158,255);
2798 border-radius:10px;
2799 padding:0;
2800 text-align: center;
2801 color:inherit;
2802 background:rgba(249,249,249,1);
2803 }
2805 #afui.ios7 .afPopup>HEADER{
2806 padding:10px 0;
2807 }
2809 #afui.ios7 .afPopup>DIV{
2810 padding-bottom:10px;
2811 }
2813 #afui.ios7 .afPopup>FOOTER{
2814 border-top:1px solid #aaa;
2815 }
2817 #afui.ios7 .afPopup>FOOTER>A.center{
2818 width:100%!important;
2819 }
2821 #afui.ios7 .afPopup .button {
2822 border: none;
2823 width: 50%;
2824 margin: 0;
2825 background: transparent;
2826 color:rgba(82,155,234,255);
2827 padding:12px 0;
2828 }
2830 #afui.ios7 .afPopup .button.pressed {
2831 background: transparent;
2832 }
2834 #afui.ios7 .button.pressed {
2835 font-weight:bold;
2836 background: white;
2837 }
2839 #afui.ios7 .afPopup a:not(:first-of-type) {
2840 border-left:1px solid rgba(158,158,158,255);
2841 }
2843 #afui.ios7 #af_actionsheet {
2844 background-color:transparent;
2845 color:black;
2846 padding-left:10px;
2847 padding-right:10px;
2848 border-top: transparent 1px solid;
2849 box-shadow: 0px -1px 2px rgba(0,0,0,0);
2850 }
2852 #afui.ios7 #af_actionsheet a{
2853 background-image:none;
2854 text-shadow:none;
2855 box-shadow:none;
2856 font-weight:normal;
2857 border-radius: 0;
2858 border:none;
2859 -webkit-box-shadow:none;
2860 color:rgba(82,155,234,255);
2861 background-color:white;
2862 cursor:pointer;
2863 border-radius:0px;
2864 line-height: 40px;
2865 font-size: 20px;
2866 margin-bottom: 1px;
2867 }
2869 #afui.ios7 #af_actionsheet a:first-child{
2870 border-top-left-radius:5px;
2871 border-top-right-radius:5px;
2872 }
2874 #afui.ios7 #af_actionsheet a:nth-last-child(2){
2875 border-bottom-left-radius:5px;
2876 border-bottom-right-radius:5px;
2877 }
2879 #afui.ios7 #af_actionsheet a.cancel{
2880 font-weight:bold;
2881 margin: 9px 0;
2882 border-radius:5px;
2883 }
2885 #afui.ios7 #af_actionsheet a.red{
2886 color:#f44;
2887 }
2889 #afui.ios7 .footer>footer>a.pressed:not(.button),.footer>footer>a.icon.pressed:not(.button):before {
2890 color:rgba(82,155,234,255);
2891 }
2893 #afui.ios7 .button.previous {
2894 border:none;
2895 }
2897 #afui.ios7 .button.next {
2898 border:none;
2899 }
2901 #afui.ios7 .button.previous::after {
2902 color:rgba(82,155,234,255);
2903 z-index: -1;
2904 font-size:22px;
2905 position: absolute;
2906 top: 2px;
2907 left: -25px;
2908 text-align: center;
2909 border-radius: 0;
2910 border: none;
2911 border-color: transparent;
2912 box-shadow: none;
2913 -webkit-transform: none;
2914 transform: none;
2915 font-family: 'chevron';
2916 speak: none;
2917 font-style: normal;
2918 font-weight: normal;
2919 font-variant: normal;
2920 text-transform: none;
2921 line-height: 1;
2922 -webkit-font-smoothing: antialiased;
2923 content: "\f054";
2924 -webkit-transform:rotate(180deg);
2925 transform:rotate(180deg);
2926 background-color: transparent;
2927 }
2929 #afui.ios7 .button.next::after {
2930 color:rgba(82,155,234,255);
2931 z-index: -1;
2932 font-size:22px;
2933 position: absolute;
2934 top: 6px;
2935 right: -25px;
2936 text-align: center;
2937 border-radius: 0;
2938 border: none;
2939 border-color: transparent;
2940 box-shadow: none;
2941 -webkit-transform: none;
2942 transform: none;
2943 font-family: 'chevron';
2944 speak: none;
2945 font-style: normal;
2946 font-weight: normal;
2947 font-variant: normal;
2948 text-transform: none;
2949 line-height: 1;
2950 -webkit-font-smoothing: antialiased;
2951 content: "\f054";
2952 background-color: transparent;
2953 }
2955 #afui.ios7 .button.gray {
2956 color:#999;
2957 background-color:transparent;
2958 }
2960 #afui.ios7 .button.yellow {
2961 color:#F1C222;
2962 background-color:transparent;
2963 }
2965 #afui.ios7 .button.red {
2966 color:#b20000;
2967 background-color:transparent;
2968 }
2970 #afui.ios7 .button.green {
2971 color:#009C0C;
2972 background-color:transparent;
2973 }
2975 #afui.ios7 .button.orange {
2976 color:#FF8000;
2977 background-color:transparent;
2978 }
2980 #afui.ios7 .button.black {
2981 color:black;
2982 background-color:transparent;
2983 }
2985 #afui.ios7 .button.slate {
2986 color:#171F28;
2987 background-color:transparent;
2988 }
2990 #afui.ios7 .af-badge {
2991 border:none;
2992 box-shadow:none;
2993 font-size:12px;
2994 }
2996 #afui.ios7 input[type="range"] {
2997 -webkit-appearance: none;
2998 background-color: #333;
2999 height: 4px;
3000 position: relative;
3001 top: -10px;
3002 margin-top: 15px;
3003 border-radius:2px;
3004 }
3006 #afui.ios7 input[type="range"]::-webkit-slider-thumb {
3007 -webkit-appearance: none;
3008 position: relative;
3009 z-index: 1;
3010 width: 15px;
3011 height: 15px;
3012 -webkit-border-radius: 40px;
3013 border-radius: 40px;
3014 border:1px solid #333;
3015 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
3016 background-image: gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
3017 }
3019 /* iOS theme */
3020 #afui.ios {
3021 color:black;
3022 }
3024 #afui.ios .header {
3025 background-color:#889BB3;
3026 background-image:-ms-linear-gradient(top, #B3BECD 0%, #889BB3 50%, #6E84A2 51%);
3027 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #B3BECD), color-stop(.5, #889BB3), color-stop(.51, #6E84A2));
3028 background-image:-webkit-linear-gradient(top, #B3BECD 0%, #889BB3 50%, #6E84A2 51%);
3029 background-image:linear-gradient(to bottom, #B3BECD 0%, #889BB3 50%, #6E84A2 51%);
3030 border: 1px solid;
3031 border-color:#CCD2DA transparent #2D3033 transparent;
3032 color:white;
3033 }
3035 #afui.ios .header h1 {
3036 text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
3037 }
3039 #afui.ios .af-badge {
3040 border:2px solid #fff;
3041 box-shadow:0 1px 2px #555;
3042 line-height:18px;
3043 }
3044 #afui.ios .panel, #afui.ios #modalContainer {
3045 background:#e7e7e7;
3046 }
3048 #afui.ios .panel h2 { color:inherit;}
3050 #afui.ios .footer {
3051 background-color:#000;
3052 background-image:-ms-linear-gradient(top, #222 0%, #111 50%, #000 51%);
3053 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #111), color-stop(.51, #000));
3054 background-image:-webkit-linear-gradient(top, #222 0%, #111 50%, #000 51%);
3055 background-image:linear-gradient(to bottom, #222 0%, #111 50%, #000 51%);
3056 box-shadow:0 1px 0 #555 inset;
3058 border-top:1px solid #000;
3059 }
3061 #afui.ios .footer>footer>a.pressed:not(.button) {
3062 background:rgba(255, 255, 255, 0.13);
3063 border-radius:6px;
3064 }
3066 #afui.ios .footer>footer>a.icon.pressed:not(.button):before {
3067 color:#3a9de2;
3068 }
3070 #afui.ios > #aside_menu,
3071 #afui.ios > #menu.tabletMenu {
3072 border-right:none;
3073 background:#000;
3074 color:#fff;
3075 }
3077 #afui.ios .backButton {
3078 line-height:15px;
3079 width:58px;
3080 display:block;
3081 position:absolute;
3082 top:5px; left:5px;
3083 text-overflow:ellipsis;
3084 font-size:12px;
3085 padding:7px !important;
3086 color:#fff;
3087 text-shadow:0 -1px 0 #333;
3088 background-color:#476999;
3089 background-image: none !important;
3090 border:1px solid;
3091 border-color:#375073 #375073 #375073 transparent;
3092 height:32px;
3093 border-radius:5px;
3094 box-shadow:0 1px 0 #9CABC0;
3095 margin:0 0 0 15px !important;
3096 padding-left:4px !important;
3097 } /* Sets up positioning of the back button which appears in the header */
3099 #afui.ios .backButton::before {
3100 z-index:-1;
3101 content:'';
3102 position:absolute;
3103 width:24px; height:24px;
3104 background-color:#476999;
3105 top:2px; left:-11px;
3106 border-radius:5px;
3107 border:1px solid;
3108 border-color:transparent transparent #9CABC0 transparent;
3109 box-shadow:1px -1px 0 #375073 inset;
3110 -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);
3111 }
3113 #afui.ios .header .button {
3114 color:#fff;
3115 text-shadow:0 -1px 0 #333;
3116 background-color:#476999;
3117 border:1px solid #375073;
3118 box-shadow:0 1px 0 #9CABC0;
3119 background-image:linear-gradient(to bottom, #9CABC0 0%, #6E84A2 50%, #476999 51%);
3120 }
3122 #afui.ios .header .button.pressed {
3123 background-image:linear-gradient(to bottom, #6E84A2 0%, #476999 50%, #274979 51%);
3124 }
3126 #afui.ios .footer .button {
3127 color:#fff;
3128 text-shadow:0 -1px 0 #333;
3129 background-color:#444;
3130 border:1px solid #222;
3131 box-shadow:0 1px 0 #222;
3132 background-image:linear-gradient(to bottom, #555 0%, #333 50%, #111 51%);
3133 }
3135 #afui.ios .footer .button.pressed {
3136 background-image:linear-gradient(to bottom, #444 0%, #222 50%, #000 51%);
3137 }
3139 #afui.ios #aside_menu .list li,
3140 #afui.ios #aside_menu .list .divider,
3141 #afui.ios #aside_menu .list li:first-child,
3142 #afui.ios #aside_menu .list li:last-child,
3143 #afui.ios #menu .list li,
3144 #afui.ios #menu .list .divider,
3145 #afui.ios #menu .list li:first-child,
3146 #afui.ios #menu .list li:last-child {
3147 border-color:#101012;
3148 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
3149 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
3150 }
3152 #afui.ios #aside_menu .list > li > a,
3153 #afui.ios #menu .list > li > a {
3154 color:#ccc;
3155 }
3157 #afui.ios #aside_menu .list .divider,
3158 #afui.ios #menu .list .divider {
3159 background:#333;
3160 color:#fff;
3161 }
3163 #afui.ios .afPopup {
3164 border: solid 2px #fff;
3165 -webkit-box-shadow: 0px 4px 6px #555, 0 0 20px rgba(0,0,0,0.5);
3166 -webkit-border-radius: 10px;
3167 border-radius:10px;
3168 padding: 0;
3169 background: #1b294b;
3170 background-image: -webkit-gradient(linear, left top, left bottom, from(#626c82), to(#1b294b));
3171 }
3173 #afui.ios .afPopup >* {
3174 color:white;
3175 }
3177 #afui.ios .afPopup>HEADER{
3178 font-weight:bold;
3179 text-align:center;
3180 text-shadow:0 -1px #000;
3181 padding:5px;
3182 }
3184 #afui.ios .afPopup>DIV{
3185 text-align:center;
3186 }
3188 #afui.ios .afPopup>FOOTER>A{
3189 background-image: -webkit-gradient(linear, left top, left bottom, from(#626c82), to(#1b294b));
3190 color:white;
3191 }
3193 #afui.ios .afPopup>FOOTER>A#cancel{
3194 width:120px;
3195 margin-left:10px;
3196 }
3198 #afui.ios .afPopup>FOOTER>A#action{
3199 width:120px;
3200 margin-right:10px;
3201 }
3203 #afui.ios .afPopup>FOOTER>A.center{
3204 float:none!important;
3205 width:95%!important;
3206 margin:8px!important;
3207 }
3209 #afui.ios #af_actionsheet {
3210 background:#595c61;
3211 color:inherit;
3212 }
3214 #afui.ios #af_actionsheet a{
3215 border-radius:10px;
3216 -webkit-border-radius:10px;
3217 border:3px solid #111;
3218 background:#eee;
3219 background: linear-gradient(to bottom, #fff 0%,#ccc 100%);
3220 color:#111;
3221 text-shadow:0 1px 0 #fff;
3222 }
3224 #afui.ios #af_actionsheet a.cancel{
3225 background:#333;
3226 background: linear-gradient(to bottom, #666 0%,#333 100%);
3227 color:white;
3228 text-shadow:0 -1px 0 #000;
3229 }
3231 #afui.ios #af_actionsheet a.red{
3232 background:#d11;
3233 background: linear-gradient(to bottom, #d55 0%,#d11 100%);
3234 color:white;
3235 text-shadow:0 -1px 0 #000;
3236 }
3238 #afui.ios input[type="range"] {
3239 -webkit-appearance: none;
3240 background-color: #ccc;
3241 height: 2px;
3242 position: relative;
3243 top: -10px;
3244 margin-top: 15px;
3245 }
3247 #afui.ios input[type="range"]::-webkit-slider-thumb {
3248 -webkit-appearance: none;
3249 position: relative;
3251 z-index: 1;
3252 width: 15px;
3253 height: 15px;
3255 -webkit-border-radius: 40px;
3256 border-radius: 40px;
3257 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
3258 background-image: gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
3259 }
3260 #af_actionsheet {
3261 position:absolute;
3262 left:0px;
3263 right:0px;
3264 padding-left:10px;
3265 padding-right:10px;
3266 padding-top:10px;
3267 margin:auto;
3268 background:black;
3269 float:left;
3270 z-index:9999;
3271 border-top:#fff 1px solid;
3272 background:rgba(71,71,71,.95);
3273 background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.08,rgba(255,255,255,.1)), color-stop(.08,rgba(255,255,255,0)));
3274 background-image:-webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 8%, rgba(255,255,255,0) 8%);
3275 box-shadow:0px -1px 2px rgba(0,0,0,.4);
3276 }
3277 #af_actionsheet a {
3278 text-decoration:none;
3279 -webkit-transition:all 0.4s ease;
3280 transition:all 0.4s ease;
3281 text-shadow:0px -1px rgba(0,0,0,.8);
3282 padding:0px .25em;
3283 border:1px solid rgba(0,0,0,.8);
3284 text-overflow:ellipsis;
3285 border-radius:.75em;
3286 background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0)), color-stop(.5,rgba(255,255,255,.1)), color-stop(.5,rgba(255,255,255,0)));
3287 background-image:-webkit-linear-gradient(top, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%);
3288 box-shadow:0px 1px 1px rgba(255,255,255,0.7);
3289 display:block;
3290 color:white;
3291 text-align:center;
3292 line-height:36px;
3293 font-size:20px;
3294 font-weight:bold;
3295 margin-bottom:10px;
3296 background-color:rgba(130,130,130,1);
3297 }
3299 #af_actionsheet a.selected {
3300 background-color:rgba(150,150,150,1);
3301 }
3303 #af_actionsheet a.cancel {
3304 background-color:rgba(43,43,43,1);
3305 }
3307 #af_actionsheet a.cancel.selected {
3308 background-color:rgba(73,73,73,1);
3309 }
3310 #af_actionsheet a.red {
3311 color:white;
3312 background-color:rgba(204,0,0,1);
3313 }
3315 #af_actionsheet a.red.selected {
3316 background-color:rgba(255,0,0,1);
3317 }
3320 #mask{
3321 display:block;
3322 width:100%;
3323 height:100%;
3324 background:#000;
3325 z-index: 999999;
3326 position:fixed;
3327 top:0;
3328 left:0;
3329 }
3333 .afPopup {
3334 display: block;
3335 width: 280px;
3336 float:left;
3337 border: solid 1px #72767b;
3338 -webkit-border-radius: 10px;
3339 border-radius:10px;
3340 padding: 10px;
3341 opacity: 1;
3342 -webkit-transform: scale(1);
3343 transform:scale(1);
3344 position: absolute;
3345 z-index: 1000000;
3346 top: 50%;
3347 left: 50%;
3348 margin: 0px auto;
3349 background: rgba(70,70,70,1);
3350 color:white;
3351 }
3352 .afPopup >* {
3353 color:inherit;
3354 }
3356 .afPopup.hidden {
3357 opacity: 0;
3358 -webkit-transform: scale(0.1);
3360 }
3362 .afPopup.show {
3363 -webkit-transition: all 0.2s ease-in-out;
3364 transition: all 0.2s ease-in-out;
3365 }
3367 .afPopup>HEADER{
3368 font-weight:bold;
3369 font-size:20px;
3370 margin:0;
3371 padding:5px;
3372 }
3374 .afPopup>DIV{
3375 font-size:14px;
3376 margin:8px;
3377 }
3379 .afPopup>FOOTER{
3380 width:100%;
3381 text-align:center;
3382 display:block !important;
3383 }
3385 .afPopup>FOOTER>A#cancel{
3386 float:left;
3387 margin-left:5px;
3388 }
3390 .afPopup>FOOTER>A#action{
3391 float:right;
3392 margin-right:5px;
3393 }
3395 .afPopup>FOOTER>A.center{
3396 float:none!important;
3397 width:80%;
3398 margin:8px;
3399 }
3400 /** This can be your default scrollbar class. You must use !important to override the default inline styles */
3401 .scrollBar {
3402 position: absolute !important;
3403 width: 5px !important;
3404 height: 20px !important;
3405 border-radius: 2px !important;
3406 border: 1px solid black !important;
3407 background: black !important;
3408 opacity: 0 !important;
3409 }
3410 #afModalMask {
3411 position:absolute;
3412 top:0px;
3413 left:0px;
3414 width:100%;
3415 height:100%;
3416 background:transparent;
3417 display:none;
3418 z-index:9999;
3419 }
3421 #afSelectBoxContainer {
3422 position:absolute;
3423 display:block;
3424 width:90%;
3425 max-width:280px;
3426 margin-right:auto;
3427 min-height:100px;
3428 background:#303030;
3429 color:white;
3430 overflow:hidden;
3431 z-index:9999;
3432 max-height:300px;
3433 margin-top: -150px;
3434 top: 50%;
3435 left: 50%;
3436 margin-left: -138px;
3437 }
3440 #afSelectBoxfix ul {
3441 list-style-type:none;
3442 padding:0px;
3443 margin:0px;
3444 }
3445 #afSelectBoxfix li {
3446 font-size: 1.1em;
3447 color: #fff;
3448 display: block;
3449 line-height: 2.5em;
3450 padding: 0 1em;
3451 border-bottom: 1px solid #444;
3452 }
3453 #afSelectBoxfix .selected {
3454 background:#33B5E5;
3455 }
3457 .afFakeSelect {
3458 width: 200px;
3459 height: 30px;
3460 display: inline-block;
3461 border: 1px solid #ccc;
3462 border-radius: 5px;
3463 line-height: 2em;
3464 font-size: 1em;
3465 padding-left: 10px;
3466 position: relative;
3467 padding-right: 35px;
3468 text-overflow: ellipsis;
3469 white-space: nowrap;
3470 overflow: hidden;
3471 }
3473 .afFakeSelect:after {
3474 position:absolute;
3475 top:5px;
3476 right:5px;
3477 border: 14px solid transparent;
3478 border-top-color: #ccc;
3479 content:'';
3480 }
3482 #afSelectBoxContainer #afSelectDone,#afSelectBoxContainer #afSelectCancel{
3483 margin-top:10px;
3484 display: inline-block;
3485 height: 30px;
3486 width: 100px;
3487 background:#33B5E5;
3488 border: 1px solid #33B5E5;
3489 text-align: center;
3490 line-height: 2em;
3491 float: left;
3492 margin-left: 10px;
3493 }
3494 #afSelectBoxContainer #afSelectCancel {
3495 float:right;
3496 margin-right:10px;
3497 }
3498 #afSelectBoxContainer #afSelectClose {
3499 overflow: hidden;
3500 border-bottom: 1px solid #444;
3501 padding-bottom:5px;
3502 }
3504 select:disabled~.afFakeSelect {
3505 background:#ccc;
3506 color:black;
3507 }
