/*! intel-appframework - v2.1.0 - 2014-04-07 */ /********************************************************** GENERAL UI ELEMENTS **********************************************************/ * { -webkit-user-select:none; /* Prevent copy paste for all elements except text fields */ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* set highlight color for user interaction */ -moz-tap-highlight-color:rgba(0, 0, 0, 0); /* set highlight color for user interaction */ -ms-touch-action:none; -moz-user-select:-moz-none; -webkit-touch-callout: none; /* prevent the popup menu on any links*/ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body { overflow-x:hidden; -webkit-text-size-adjust:none; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#000; font-size:14px; display:-webkit-box; background: #CBD2D8; /* We want to layout our first container vertically */ -webkit-box-orient: vertical; /* we want our child elements to stretch to fit the container */ -webkit-box-align:stretch; } /* General styles that apply to elements not contained within other classes and styles */ #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 */ #afui img { border:none; } /* Remove default borders for images */ #afui p { display:block; margin:6px 0; font-size:14px; line-height:20px; color:inherit } #afui #afui_modal { background: inherit; color:inherit; -webkit-backface-visibility: hidden; z-index:9999 !important; width:100%; height:100%; display:none; position:absolute; top:0; overflow:hidden; display: -webkit-box; display: -moz-box; display: box; display: -ms-flexbox; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } #afui #modalContainer > * { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; background:inherit; color:inherit; } #afui .afScrollPanel { width:100%; min-height:100%; } #afui { position:absolute; width:100%; top:0; bottom:0; overflow:hidden; } #afui,.flexContainer { display: -webkit-box; display: -moz-box; display: box; display: -ms-flexbox; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; /* current syntax */ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } #afui > #splashscreen { position:absolute; top:0;bottom:0; width:100%; left:0; min-height:100%; background:rgba(29,29,28,1) !important; color:white !important; font-size:30px; text-align:center; z-index:9999; display:block; margin-left: auto !important; margin-right: auto !important; padding-top:80px !important; } /********************************************************** header **********************************************************/ #afui .header { position:relative; overflow: hidden; display:block; z-index:250; -webkit-box-sizing:border-box; box-sizing:border-box; height:44px; left:0; right:0; } /* This is masthead bar that appears at the top of the UI */ #afui .header h1 { position: absolute; width: 45%; z-index: 1; height: 44px; font-size: 18px; font-weight: bold; left: 27.5%; color: inherit; padding: 10px 0; text-shadow: rgba(0,0,0,0.8) 0 -1px 0; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* This is text that appears in the header at the top of the screen */ /********************************************************** CONTENT AREA **********************************************************/ #afui #content, #afui_modal #modalContainer { z-index:180; position:relative; /* previous syntax */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; /* current syntax */ -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; overflow:hidden; background:inherit; color:inherit; } /* Accounts for positioning of the content area, which is everything below the header and above the navbar. */ #afui .panel { z-index:180; width:100%; height:100%; display:none; position:absolute; top:0; left:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; -webkit-backface-visibility: hidden; padding:10px; padding-top:0px; } /* This class is applied to the divs that contain the various "views" or pages of the app. */ /********************************************************** scroller CSS **********************************************************/ #afui .y-scroll, #afui .panel.y-scroll { overflow-x:hidden; overflow-y:auto; } #afui .x-scroll, #afui .panel.x-scroll { overflow-x:auto; overflow-y:hidden; } #afui .no-scroll, #afui .panel.no-scroll { overflow:hidden; } /********************************************************** Navbar **********************************************************/ /* Nav bar appears locked to the bottom of the screen. It is the primary navigation. can contain text or graphical navigation */ #afui .footer { z-index:180; height:49px; display:block; left:0; right:0; position:relative; padding:0 3px; } #afui footer>a:not(.button) { -webkit-box-sizing:border-box; box-sizing: border-box; top: 3px; height: 43px; overflow: hidden; font-size:12px; font-weight:normal; text-decoration: none; color: #fff; text-align: center; display: inline-block; width: 25%; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; line-height: 67px; position: relative; margin: 0; } #afui footer>a:not(.button) .af-badge { right:auto; margin-left:-16px; } #afui footer>a.icon:not(.button):before { position:absolute; top:2px; left:0; font-size: 25px; margin:auto; width: 100%; } #afui footer>a.pressed:not(.button) { } #afui footer>a.icon.pressed:not(.button):before { } /* Custom footers - always hidden */ #afui footer, #afui header, #afui nav, #afui aside { display:none; } /* Show the active header/footer/navs */ #afui .footer footer, #afui #menu nav, #afui .header header, #afui #aside_menu aside {display:block; height:100%;} #afui > #menu.tabletMenu { z-index:1; width:200px; bottom:0; display:none; position:absolute; top:0; left:0; border-right: 1px solid rgba(128,128,128,0.5); } #afui > #aside_menu { z-index:1; width:200px; bottom:0; height:100%; display:none; position:absolute; top:0; right:0; border-left: 1px solid rgba(128,128,128,0.5); } #afui #menu_scroller, #afui #aside_menu_scroller { padding-bottom:10px; overflow-y:auto; overflow-x:hidden; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling:touch; } #afui #menu_scroller > *, #afui #aside_menu_scroller > * { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } #afui #menu .list li, #afui #menu .list .divider, #afui #menu .list li:first-child, #afui #menu .list li:last-child, #afui #aside_menu .list li, #afui #aside_menu .list .divider, #afui #aside_menu .list li:first-child, #afui #aside_menu .list li:last-child { font-weight:bold; font-size:1em; line-height:1em; border-color:#101012; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } #afui #menu .list > li > a, #afui #aside_menu .list > li > a { color:#ccc; margin-left:6px; font-weight: normal; } #afui #menu .list, #afui #menu .list .divider, #afui #aside_menu .list, #afui #aside_menu .list .divider { background:inherit; } #afui #menu .list .divider, #afui #aside_menu .list .divider { background:#333; color:#fff; font-weight:bold; font-size:1em; line-height:1em; padding:6px; top:0px; border:none; -webkit-box-shadow:none; box-shadow: none; } #afui #menu .list > li > a:after, #afui #aside_menu .list > li > a:after { margin-top: -8px; } /* End side menu css */ #afui .splashscreen { background:rgba(29,29,28,1) !important; padding-left:40px; padding-top:30px !important; min-height:100%; } #afui h2 { display:block; height:34px; font-weight: bold; font-size:18px; color:#000; padding:6px 0; margin-bottom:8px; } /* Header class used for non-navigable header bars (h1 is reserved for the header) */ #afui .collapsed:after { float:right; content:''; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #000; display:block; position:absolute; top:14px;right:14px; } #afui .collapsed:before { float:right; content:''; color:transparent; background:transparent; width:14px; height:14px; display:block; border:2px solid #000; border-radius:3px; position:absolute; top:8px;right:10px; } #afui .expanded:after { float:right;content:''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #000; display:block; position:absolute; top:13px;right:14px; } #afui .expanded:before { float:right; content:''; color:transparent; background:transparent; width:14px; height:14px; display:block; border:2px solid #000; border-radius:3px; position:absolute; top:8px;right:10px; } /********************************************************** UI **********************************************************/ .ui-icon { background: #666; background: rgba(0,0,0,.4); background-repeat: no-repeat; border-radius: 9px; } .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;} .ui-loader.heavy {opacity:1;} .ui-loader h1 { font-size: 15px; text-align: center; } .ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; } .spin { -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .ui-icon-loading { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjBAMAAADs965qAAAAA3NCSVQICAjb4U/gAAAAMFBMVEX////x8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHvvEhiAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAAK6wAACusBgosNWgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAEaSURBVCiRY2AgATCapaUqoIiIzN5z5syZJiQRltW7gUJ3705C6OraDRG6GwATkli1evdusNBTuKJVq3c4MjBX3733DqqMfdWqFWDbau+9ewIRspy5KgHMYL737g1EX+fMaVAjbN+9KwDLzZxZAHPMu3cXwEbNnAl397p3YDslOmD6GBjs/v8AURodzXAh3v+/QZRHRyNciPP/f4hQA1yIHVMICtzLC9CFzMuL0IXEy0vQhdjK0+BsRqgv0tIMYEKCggJgmbS0QJgiQUEIwy0tVQCmCCokmhYaCFMElWMKDQ01BIkoKcKEGFRDQ1yMlISUgEIwe5iAQi7GxkpKSjBFwMh2cXEGCSkiOVcFLIQswsAgZGxshCpCBgAA0FNYp5zwDegAAAAASUVORK5CYII=); width: 40px; height: 40px; border-radius: 20px; background-size: 35px 35px; } #afui .ui-corner-all { border-radius:.6em; } #afui_mask { position:absolute;top:45%;z-index:999999; } .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} #afui .hasMenu{ left:0; } #afui .menuButton { position: relative; top: 5px; right: -8px; height: 36px; width: 36px; z-index:2; float:right; } #afui .menuButton:after { border-bottom: 9px double white; border-top: 3px solid white; top: 9px; left: 3px; content: ""; height: 3px; position: absolute; width: 15px; } #afui .hasMenu.on { -webkit-transform:translate3d(200px,0,0); transform:translate(200px,0); } #afui .modalbutton { position:absolute; top:0; right:5px; height:32px; width:58px; line-height:32px; z-index:9999; } #afui .closebutton { position:absolute; top:6px; right:6px; display:block; height:24px ; width:24px ; border-radius:12px; border:1px solid #666; background:#fff; color:#333; font-weight: bold; font-size:21px; line-height:18px; text-align:center; text-decoration:none; } #afui .closebutton:before { content:'x'; } #afui .closebutton.selected,.closebutton.modalButton.selected { color:#fff; background:#333; } #afui .panel .list { margin:0px -10px; } #afui .panel .list.inset { margin:0px; } /* Chevrons */ @font-face { font-family: 'chevron'; 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'), 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'); font-weight: normal; font-style: normal; } #afui .chevron { font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } #afui .chevron:before { content: "\f054"; } #afui .chevron.left { -webkit-transform:rotate(180deg); transform:rotate(180deg); } @media handheld, only screen and (min-width: 768px) { #afui .footer.hasMenu.splitview, #afui .header.hasMenu.splitview, #afui #content.hasMenu.splitview { position:relative; right:0px; margin-left:256px; -webkit-transition: transform 0ms; -webkit-transform:none; transition:transform 0ms; transform:none ; width: -webkit-calc(100% - 256px); width: calc(100% - 256px); } #afui > #aside_menu.splitview { width:256px; } #afui > #menu.tabletMenu.splitview { z-index:1; width:256px; bottom:0; height:100% ; display:block; position:absolute ; top:0; left:0px; -webkit-transform:none; -webkit-transition:none; transform:none; transition:none; } #afui .splitview .menuButton { display:none; } } @media print { body { overflow:visible; } #afui #content{ overflow: visible; left:0; } #afui { overflow:visible; } #afui .panel { overflow-x:visible !important; overflow-y:visible !important; overflow:visible !important; } } /* blue #0190d6 */ @-ms-viewport { width: device-width; } #afui { background:white; color:#53575E; } #afui .header{ background:#0088D1; border:none; border-bottom:1px solid #0088D1; color:white; } #afui .header h1 { text-shadow:none; width:45%; } #afui .backButton { background:rgba(249,249,249,1); color:#fff; display: block; position: absolute; line-height:44px; left: 25px; text-overflow: ellipsis; font-size: 14px; padding:0; text-shadow: none; background-color: transparent; border:none; border-color:transparent; height: 44px; top:0; border-radius:0; box-shadow:none; margin: 0; padding-left: 0; text-align: center; width:50px; padding:0 !important; margin:0 !important; } #afui .backButton::before { z-index: -1; font-size:22px; position: absolute; top: 10px; left: -20px; text-align: center; border-radius:0; border: none; border-color:transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform:rotate(180deg); transform:rotate(180deg); background-color: transparent; } #afui header .backButton { position:absolute; } #afui .footer { background:#0088D1; border:none; border-top:1px solid #0088D1; box-shadow:none; } #afui footer>a:not(.button) { } #afui footer>a.pressed:not(.button) { border-radius:0; background:#00AEEF; } #afui footer>a.icon.pressed:not(.button):before { color:inherit; } #afui .af-badge { border:none; } #afui .list { background:inherit; color:inherit; border-color:#303030; font-weight:normal; } #afui .af-badge { box-shadow:none; } #afui .list .divider { color:black; } #afui .panel, #afui #modalContainer, #afui #modal { color:inherit; background:inherit; } #afui .panel h2 { color:#0088D1;} #afui .collapsed:after {border-top: 6px solid;} #afui .collapsed:before {border:2px solid;} #afui .expanded:after {border-bottom: 6px solid;} #afui .expanded:before {border:2px solid;} #afui .collapsed:before,#afui .expanded:before { border-color: inherit; } #afui .collapsed:after, #afui .expanded:after{ border-top-color:inherit; border-top-color:inherit; } #afui select, #afui textarea, #afui input[type="text"], #afui input[type=search], #afui input[type="password"], #afui input[type="datetime"], #afui input[type="datetime-local"], #afui input[type="date"], #afui input[type="month"], #afui input[type="time"], #afui input[type="week"], #afui input[type="number"], #afui input[type="email"], #afui input[type="url"], #afui input[type="tel"], #afui input[type="color"], #afui .input-group { background:inherit; color:inherit; } #afui input.toggle+label:after { color:inherit; } #afui input.toggle+label { border-radius:0; } #afui input.toggle+label > span { border-radius:0; top:0; width:27px; height:23px; } #afui label { color:inherit; } #afui input[type="radio"]:checked+label:before,#afui input[type="checkbox"]:checked+label:before { background: #33B5E5; } #afui > #aside_menu, #afui > #menu.tabletMenu { color:white; background:#00AEEF; border-right:1px solid #006BA4; } #afui #aside_menu .list li,#afui #aside_menu .list .divider,#afui #aside_menu .list li:last-child, #afui #menu .list li,#afui #menu .list .divider,#afui #menu .list li:last-child { border-color: #4CC6F4; } #afui #aside_menu .list .divider, #afui #menu .list .divider { background:#0088D1; color:inherit; font-size: 1em; } #afui #aside_menu .list > li > a, #afui #menu .list > li > a { background:inherit; color:inherit; font-size: 1em; } #afui #aside_menu .list, #afui #menu .list { font-weight: normal; } #afui .button { border-radius:0; text-shadow:none; } #afui .list > li > a:after{ color:#0088D1; } #afui .button.pressed { } #afui .button.previous { border:none; } #afui .button.next { border:none; } #afui .button.previous::after { color:black; z-index: -1; font-size:22px; position: absolute; top: 2px; left: -25px; text-align: center; border-radius:0; border: none; border-color:transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform:rotate(180deg); transform:rotate(180deg); background-color: transparent; } #afui .button.next::after { color:black; z-index: -1; font-size:22px; position: absolute; top: 6px; right: -25px; text-align: center; border-radius:0; border: none; border-color:transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; background-color: transparent; } #afui .afPopup { border: solid 1px #33B5E5; -webkit-border-radius: 5px; border-radius: 5px; background:inherit; color:inherit; } #afui .afPopup>FOOTER>A{ width: 120px; } #afui #af_actionsheet { background:#0190d6; color:inherit; } #afui #af_actionsheet a{ border-radius:0; -webkit-border-radius:0; color:black; background:white; border:none; text-shadow:none; } #afui .list { margin: 0px; padding: 0px; margin-bottom: 10px; list-style: none; background-color: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; } #afui .list li { display: block; list-style: none; position: relative; padding: 20px 20px 20px 10px; border-bottom: 1px solid #ccc; } #afui .list li:first-child { border-top: 1px solid #ccc; } #afui .list > li > a { display: block; position: relative; display: block; color: inherit; margin: -20px -20px -20px -10px; text-decoration: none; padding: 20px 20px 20px 10px; } #afui .list a .af-badge { position: absolute; right: 30px; top: 48%; margin-top: -10px; } #afui .list > li > a:after { position: absolute; right: 8px; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; top: 50%; margin-top: -0.5em; color:inherit; } #afui .list .divider { position: relative; top: -1px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; font-weight: bold; line-height: 18px; background-color: #dfe0e2; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); padding-right: 60px; } #afui .list.inset { border: 1px solid #ccc; border-radius: 6px; margin: 10px; } #afui .list.inset li:first-child { border-top: none; } #afui .list.inset li:last-child { border-bottom: none; } #afui select, #afui textarea, #afui input[type="text"], #afui input[type=search], #afui input[type="password"], #afui input[type="datetime"], #afui input[type="datetime-local"], #afui input[type="date"], #afui input[type="month"], #afui input[type="time"], #afui input[type="week"], #afui input[type="number"], #afui input[type="email"], #afui input[type="url"], #afui input[type="tel"], #afui input[type="color"], #afui .input-group { width: 100%; height: 40px; padding: 10px; margin-bottom: 10px; background: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-weight: normal; -webkit-appearance: none; box-sizing: border-box; } #afui form { position: relative; } #afui input[type="radio"], #afui input[type="checkbox"] { display: none; } #afui input[type="radio"] + label, #afui input[type="checkbox"] + label { display: inline-block; width: 60%; float: right; position: relative; text-align: left; padding: 10px 0 0 0; } #afui input[type="radio"]:not(.toggle) + label:before { background-color: #fafafa; border: 1px solid #cacece; border-radius: 50px; display: block; position: absolute; width: 1.3em; height: 1.3em; content: ''; margin-right: 5px; top: 8px; margin-left: -25px; } #afui input[type="radio"]:checked + label:before { background-color: #000000; } #afui input[type="checkbox"] + label:before { background-color: #fafafa; border: 1px solid #cacece; border-radius: 3px; display: block; position: absolute; top: 8px; left: -25px; width: 1.3em; height: 1.3em; content: " "; } #afui input[type="checkbox"]:checked + label:before { content: '\00a0\2714'; padding: 0px; display: inline-block; } #afui input[type="radio"]:after, #afui input[type="checkbox"]:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #afui input[type="search"] { border-radius: 20px; } #afui label { float: left; width: 33%; font-weight: normal; font-size: 14px; color: inherit; text-align: right; padding: 11px 6px; } #afui label + select, #afui label + input[type="radio"], #afui label + input[type="checkbox"] label + textarea, #afui label + input[type="text"], #afui label + input[type=search], #afui label + input[type="password"], #afui label + input[type="datetime"], #afui label + input[type="datetime-local"], #afui label + input[type="date"], #afui label + input[type="month"], #afui label + input[type="time"], #afui label + input[type="week"], #afui label + input[type="number"], #afui label + input[type="email"], #afui label + input[type="url"], #afui label + input[type="tel"], #afui label + input[type="color"], #afui label + textarea { width: 66%; } #afui textarea { height: auto; } #afui .input-group { width: auto; height: auto; padding: 12px; overflow: hidden; } #afui .input-group input:not([type='button']):not([type='submit']), #afui .input-group textarea, #afui .input-group select { margin-bottom: 0; background-color: transparent; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; } #afui .input-group input:not([type="submit"]):not([type="button"]):last-child, #afui .input-group textarea:last-child, #afui .input-group select:last-child { border-bottom: none; } #afui .input-group input[type=button], #afui .input-group input[type=submit] { margin: 5px; } #afui input.toggle + label:before, #afui input.toggle:checked + label:before { content: attr(data-on); position: absolute; color: #fff; left: 5px; width: 42px; text-align: left; z-index: 3; top: 3px; overflow: hidden; background-color: transparent; border: none; border-radius: 0px; text-transform: uppercase; display: none; } #afui input.toggle:checked + label:before { display: block; } #afui input.toggle + label:after { content: attr(data-off); position: absolute; color: #505050; width: 42px; text-align: left; z-index: 1; top: 2px; left: 30px; overflow: hidden; background-color: transparent; border: none; border-radius: 0px; text-transform: uppercase; } #afui input.toggle:checked + label:after { display: none; } #afui input[type="radio"].toggle:checked + label:before { line-height: 1.2em; } #afui input.toggle + label { position: relative; margin: 5px; border-radius: 50px; display: block; height: 24px; width: 65px; border: 1px solid #ccc; left: 33%; float: none; } #afui input.toggle:checked + label { background: #1eb0e9; line-height: -1em; } #afui input.toggle + label > span { display: block; width: 28px; height: 28px; background: #ccc; border-radius: 50px; z-index: 5; top: -2px; left: 0px; position: absolute; transition: transform 100ms linear; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 100ms linear; } #afui input.toggle:checked + label > span { transform: translate3d(37px, 0, 0); -webkit-transform: translate3d(37px, 0, 0); } #afui .formGroupHead { font-size: 18px; font-weight: bold; color: inherit; margin: 16px 0 8px; } #afui input[type=button], #afui input[type=submit], #afui button { font-size:inherit; } #afui .button { position:relative; display:inline-block; padding:8px 12px; margin:8px 0; font-weight:bold; color:#000; text-align:center; vertical-align:top; cursor:pointer; background-color:#eee; border:1px solid #666; border-radius:6px; /*box-shadow: 0 1px 0 #fff;*/ text-decoration: none; z-index:2; } /* Active */ #afui .button.pressed { background:#fff; } #afui .button.previous { margin-left:16px; padding-left:6px; border-color:#666 #666 transparent transparent !important; } #afui .button.next { border-color:#666 transparent #666 #666 !important; margin-right:16px; padding-right:6px; } #afui .button.previous::after { z-index:-1; content:''; position:absolute; width:25px; height:25px; background-color:inherit; top:3px; left:-11px; border-radius:5px; border:1px solid; border-color:transparent transparent inherit transparent; -webkit-transform:rotate(45deg); transform:rotate(45deg); } #afui .button.next::after { z-index:-1; content:''; position:absolute; width:25px; height:25px; background-color:inherit; top:3px; right:-11px; border-radius:5px; border:1px solid; border-color:transparent transparent transparent transparent; -webkit-transform:rotate(45deg); transform:rotate(45deg); } #afui .button.block { display:block; } #afui .button.flat { border-radius: 0; box-shadow:none; } #afui .header .button-grouped>.button { margin:0; border-color:#fff; } #afui .button-grouped { display:inline-block; margin: 5px; } #afui .button-grouped * { border-radius:0px; float:left; border-left:0px solid transparent; border-right: 1px solid #666; border-bottom: 1px solid #666; border-top: 1px solid #666; margin:0; } #afui .button-grouped > .button:first-child { border-left: 1px solid #666; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } #afui .button-grouped > .button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } #afui .button-grouped.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #afui .button-grouped.flex > .button { -webkit-box-flex: 1; -moz-box-flex: 1 auto; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #afui .button-grouped.flex.vertical { display: inline-block; } #afui .button-grouped.vertical * { border-radius:0px; display:block; float:none; width:100%; border-left: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #666; border-bottom: 0px solid #666; } #afui .button-grouped.vertical > .button:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; } #afui .button-grouped.vertical > .button:last-child { border-top-right-radius:0px; border-top-left-radius:0px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom:1px solid #666; } #afui .button.gray { background:#999; border-color:#666; } #afui .button.yellow { background-color:#F1C222; border-color:#999; } #afui .button.red { color:#fff; text-shadow:0 -1px 0 #666; background:#B20000; border-color:#666; } #afui .button.green { color:#fff; text-shadow:0 -1px 0 #666; background:#009C0C; border-color:#666; } #afui .button.orange { color:#fff; text-shadow:0 -1px 0 #666; background-color:#FF8000; border-color:#666; } #afui .button.black { color:#fff; text-shadow:none; background:#000; border-color:#666; } #afui .button.slate { color:#fff; text-shadow:0 -1px 0 #000; background:#171F28; border-color:#666; } #afui .header .button { color: #fff; background:none; border-color: transparent; font-size:12px; padding:7px; height:32px; margin:5px; text-overflow: ellipsis; white-space: nowrap; } .header .button.icon:before{ padding-left:6px; } #afui .backButton { text-overflow: ellipsis; white-space: nowrap; } #afui .af-badge { position:absolute; top:2px; right:2px; display:inline-block; min-width:20px; max-width:90%; height:20px; padding:0 3px; background-color:red; border-radius:20px; font-size:12px; line-height:19px; font-weight:bold; color:#fff; text-overflow:ellipsis; text-align:center; text-shadow:0 -1px 0 rgba(64,0,0,.6); } #afui .af-badge.br { bottom:2px; right:2px; top:auto; left:auto; } #afui .af-badge.bl { bottom:2px; left:2px; top:auto; right:auto; } #afui .af-badge.tl { top:2px; left:2px; right:auto; bottom:auto; } #afui .grid { width: 100%; overflow:hidden; /* hack to take up height*/ } #afui .col2, #afui .col3, #afui .col1-3, #afui .col2-3 { float: none; width: 100%; } #afui .grid:after { content: ''; clear: both; } @media handheld, only screen and (min-width: 768px) { #afui .col2 { width: 50%; float: left; } #afui .col3 { width: 33.3%; float: left; } #afui .col1-3 { width: 33.3%; float: left; } #afui .col2-3 { width: 66.6%; float: left; } } /* Bg #33B5E5 /* Font header #C6C6C6 * reg white-space: border 303030 hover : #111 */ #afui.android { font:14px 'Roboto',sans-serif; background:#000; color:#fff; border-color:#fff; } #afui.android.light { background:#FDFDFD; color:#000; } #afui.android .header { background:inherit; color:inherit; border-color:#33B5E5; } #afui.android .header .button { color: inherit; background:none; font-size:14px; box-shadow:none; } #afui.android .backButton{ background: inherit; color:inherit; } #afui.android .menuButton:after { border-color:white; } #afui.android.light .menuButton:after { border-color:black; } #afui.android .footer { box-shadow: none; background:inherit; border-top:2px solid #33B5E5; border-bottom:none; padding:0; } #afui.android .footer>footer>a:not(.button) { color:inherit; top:0px; } #afui.android .footer>footer>a.pressed:not(.button) { border:0px; border-top:4px solid #33B5E5; border-radius:0px; background:none; } #afui.android .footer>footer>a.icon.pressed:not(.button):before { color:inherit; } #afui.android .af-badge { border:none; } #afui.android .panel, #afui.android #modalContainer { background:inherit; color:inherit; } #afui.android .list { background:inherit; color:inherit; border-color:#303030; } #afui.android .list .divider { color:black; } #afui.android .panel h2 { color:inherit; } #afui.android .collapsed:after {border-top: 6px solid;} #afui.android .collapsed:before {border:2px solid;} #afui.android .expanded:after {border-bottom: 6px solid;} #afui.android .expanded:before {border:2px solid;} #afui.android .collapsed:before,#afui.android .expanded:before { border-color: inherit; } #afui.android .collapsed:after, #afui.android .expanded:after{ border-top-color:inherit; border-top-color:inherit; } #afui.android .afScrollbar {background:white !important;} #afui.android.light .afScrollbar {background:black !important;} #afui.android select, #afui.android textarea, #afui.android input[type="text"], #afui.android input[type=search], #afui.android input[type="password"], #afui.android input[type="datetime"], #afui.android input[type="datetime-local"], #afui.android input[type="date"], #afui.android input[type="month"], #afui.android input[type="time"], #afui.android input[type="week"], #afui.android input[type="number"], #afui.android input[type="email"], #afui.android input[type="url"], #afui.android input[type="tel"], #afui.android input[type="color"], #afui.android .input-group { background:inherit; color:inherit; } #afui.android input.toggle+label:after { color:inherit; } #afui.android input.toggle+label { border-radius:0; } #afui.android input.toggle+label > span { border-radius:0; top:0; width:27px; height:23px; } #afui.android label { color:inherit; } #afui.android input[type="radio"]:checked+label:before,#afui.android input[type="checkbox"]:checked+label:before { background: #33B5E5; } #afui.android > #aside_menu, #afui.android > #menu { border-right:1px solid rgba(128,128,128,0.5); color:inherit; background:inherit; } #afui.android #aside_menu .list li, #afui.android #menu .list li { box-shadow:none; border-color:#ccc; } #afui.android #aside_menu .list .divider, #afui.android #menu .list .divider { background:inherit; color:inherit; font-size: 1em; } #afui.android #aside_menu .list > li > a, #afui.android #menu .list > li > a { background:inherit; color:inherit; font-size: 1em; } #afui.android #aside_menu .list, #afui.android #menu .list { font-weight: normal; } #afui.android .button { border-radius:0; border:none; background:#424343; border-color:transparent; color:inherit; text-shadow:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } #afui.android.light .button { background:#eee; border-color:#D1D1D1; } #afui.android .button.pressed, #afui.android .header .button-grouped > .button.pressed { background:#33B5E5; border-color:#33B5E5; } #afui.android .button.previous::after { width:20px; height:20px; background-color:inherit; top:5px; left:-12px; border-radius:0; box-shadow:none; border-color:transparent; } #afui.android .button.next::after { width:20px; height:20px; background-color:inherit; top:5px; right:-12px; border-radius:0; box-shadow:none; border-color:transparent; } #afui.android .header .button-grouped > .button { border-color:#777; } #afui.android .button-grouped * { border:1px solid rgba(255,255,255,.25); border-left-width:0; box-shadow:none; } #afui.android .button-grouped.vertical * { border-left:1px solid rgba(255,255,255,.25); border-bottom-width:0; } #afui.android .button-grouped.vertical .button:last-child { border-bottom:1px solid rgba(255,255,255,.25); } #afui.android .afPopup { border: solid 1px #aaa; padding: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-transform:none; transform:none; -webkit-transition: none; transition:none; background:inherit; background-color:rgba(0,0,0,0.9); color:inherit; } #afui.android.light .afPopup { background-color:rgba(255,255,255,0.9); } #afui.android .afPopup>HEADER{ font-weight:normal; font-size:20px; text-align:left; padding:10px; } #afui.android .afPopup>DIV{ font-size:14px; text-align:left; padding:10px; margin:0; border-top: solid 1px #aaa; border-bottom: solid 1px #aaa; } #afui.android .afPopup>FOOTER { background:#bbb; } #afui.android .afPopup>FOOTER>A, #afui.android.light .afPopup>FOOTER>A { background:#fff; color:#111; } #afui.android .afPopup>FOOTER>A#cancel{ margin-left:10px; width:120px; } #afui.android .afPopup>FOOTER>A#action{ margin-right:10px; width:120px; } #afui.android .afPopup>FOOTER>A.center{ margin:8px; } #afui.android #af_actionsheet { border: #666 1px solid; border-top: #33B5E5 3px solid; background:#555; color:inherit; margin:-20px 20px 0 20px; padding:0px; } #afui.android.light #af_actionsheet { border: #bbb 1px solid; border-top: #33B5E5 3px solid; background:#bbb; } #afui.android #af_actionsheet a{ border-radius:0; -webkit-border-radius:0; border:0px solid #777; background:#424343; color:inherit; line-height: 50px; margin-bottom: 1px; } #afui.android.light #af_actionsheet a{ background:#fff; } #afui.android #af_actionsheet a.cancel{ margin-bottom: 0px; } /* Bg #00ABA9 /* Font header #C6C6C6 * reg white-space: border 303030 hover : #111 */ @-ms-viewport{ width: device-width; } @font-face { font-family: 'win8back'; 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'), 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'); font-weight: normal; font-style: normal; } #afui.win8 { font:14px "Segoe UI Semilight", "HelveticaNeue-light", Helvetica, Arial, sans-serif; font-size:14px; background-color:#000; color:#fff; } #afui.win8.light { background:#fff; color:#000; } #afui.win8 .header .button { color: inherit; border-color:transparent; font-size:14px; } #afui.win8 .backButton.pressed { background:inherit; } #afui.win8 .backButton { color:inherit; background:inherit; margin:0; font-family: 'win8back'; width:0px; height:0px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; padding:0px; margin:0px; border:none; position:absolute; left:-185px; -webkit-font-smoothing: antialiased; } #afui.win8 .backButton::before { content: "\e000"; font-size:30px; position:absolute; top:10px; right:-225px; left:auto; color:inherit; font-family:inherit; -webkit-transform:none; transform:none; } #afui.win8 .header h1 { text-align: left; color:inherit; } #afui.win8 .header{ border:0px; background: inherit; border-bottom:inherit; color:inherit; } #afui.win8 .footer { padding:0px; background:inherit; text-align: center; height:65px; background:rgba(33,32,33,.9); border-top:none; } #afui.win8.light .footer{ background:#F2F2F2; color:black; } #afui.win8 .footer>footer>a:not(.button) { position: relative; width: 56px !important; height: 56px; display: inline-block; font: normal 9px/85px Segoe WP, Segoe UI, Verdana, Helvetica, Sans-Serif; text-decoration: none; color: inherit; text-align: center; text-shadow: 0 0 rgba(0, 0, 0, 0); overflow: hidden; background:inherit; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } #afui.win8.light .footer>footer>a:not(.button) { text-shadow: 0 0 rgba(0, 0, 0, 0); } #afui.win8 .footer>footer>a.icon.pressed:not(.button):before { background-color: #00ABA9; } #afui.win8 .footer>footer>a.icon:not(.button):before { top: 0px; left: 10px; font-size:19px; width:auto; padding: 5px; border: 3px solid #fff; border-radius: 20px; } #afui.win8.light .footer>footer>a.icon:not(.button):before { border: 3px solid #000; } #afui.win8 .footer>footer>a:not(:last-of-type):not(.button){ border:none; } #afui.win8 .af-badge { border:none; } #afui.win8 #content,#afui.win8 #content > .panel { background:inherit; color:inherit; } #afui.win8 .list { background:inherit; color:inherit; border-color:#303030; } #afui.win8 .list .divider, #afui.win8 #menu.tabletMenu .list .divider { background:#00ABA9; padding:5px; display:inline; font-size:16px; font-weight:normal; border-top:none; border-bottom:none; color:inherit; } #afui.win8 .list li { border-top:none; border-bottom:none; font-size:20px; } #afui.win8 .panel h2 { color:inherit; font-weight:normal; font-size:34px; line-height:34px; height:auto; } #afui.win8 .collapsed:after {border-top: 6px solid;} #afui.win8 .collapsed:before {border:2px solid;} #afui.win8 .expanded:after {border-bottom: 6px solid;} #afui.win8 .expanded:before {border:2px solid;} #afui.win8 .collapsed:before,#afui.win8 .expanded:before { border-color: inherit; } #afui.win8 .collapsed:after, #afui.win8 .expanded:after{ border-top-color:inherit; border-top-color:inherit; } #afui.win8 .afScrollbar {background:white !important;} #afui.win8.light .afScrollbar {background:black !important;} #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 { background:black; color:inherit; } #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 { background:white; } #afui.win8 input.toggle+label:after { color:inherit; } #afui.win8 input.toggle+label { border-radius:0; } #afui.win8 input.toggle:checked+label { background:#00ABA9; } #afui.win8 input.toggle+label > span { border-radius:0; top:0; width:27px; height:23px; } #afui.win8 input[type="radio"]:checked+label:before,#afui.win8 input[type="checkbox"]:checked+label:before { background: #00ABA9; } #afui.win8 > #menu { border-right:1px solid rgba(128,128,128,0.5); color:inherit; background:inherit; } #afui.win8 > #aside_menu { border-left:1px solid rgba(128,128,128,0.5); color:inherit; background:inherit; border-right:0; } #afui.win8 #menu .list .divider { padding:4px; line-height:30px; margin-left:10px; } #afui.win8 #menu .list { font-weight: normal; } #afui.win8 #menu .list li,#afui.win8 #menu .list .divider { box-shadow:none; } #afui.win8 .button { border-radius:0; border:none; background:inherit; border:3px solid #fff; color:inherit; text-shadow:none; box-shadow:none; } #afui.win8.light .button { border:3px solid #000; } #afui.win8 .button.pressed { background:#00ABA9; } #afui.win8 .button.next, #afui.win8 .button.previous { border-color: #fff !important; } #afui.win8 .button.next::after, #afui.win8 .button.previous::after{ border:none; } #afui.win8 .button-grouped > .button{ border:3px solid #fff; border-right:0; } #afui.win8 .button-grouped > .button:last-child { border-right:3px solid #fff; } #afui.win8 .button-grouped > .button:first-child, #afui.win8 .button-grouped > .button:last-child { border-radius:0; } #afui.win8 .button-grouped.vertical >.button{ border:3px solid #fff; border-bottom:0; } #afui.win8 .button-grouped.vertical > .button:last-child { border-bottom:3px solid #fff; } #afui.win8 .header .button-grouped > .button{ border-color: #fff; } #afui.win8 .header .button-grouped > .button.pressed{ background:#00ABA9; } #afui.win8.light .button-grouped > .button, #afui.win8.light .button-grouped.vertical > .button, #afui.win8.light .header .button-grouped > .button{ border-color: #111; } /** * code specific to WP8 */ @media handheld, only screen and (max-width: 768px){ #afui.win8 #menu { display: none; position: absolute; left: 0; bottom: 0; z-index: 1000; width:100%; height: 150px; font-size:20px; top:auto; background:inherit; color:inherit; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transform:translate3d(0,150px,0); transform:translate3d(0,150px,0); } #afui.win8 .hasMenu,#afui.win8 .hasMenu.on{ -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #afui.win8 .header #menubadge { display:none; } } #afui.win8 .afPopup { width: 100%; border: solid 0px #72767b; left:0px !important; -webkit-border-radius: 0; border-radius: 0; -webkit-transform:none; transform:none; -webkit-transition: none; transition:none; top: 0 !important; background:#222; color:inherit; padding:15px; } #afui.win8.light .afPopup { background:#eee; } #afui.win8 .afPopup>HEADER{ font-size:20px; } #afui.win8 .afPopup>DIV{ font-size:16px; padding:10px 0; margin:0; } #afui.win8 .afPopup>FOOTER{ width:100%; text-align:left; display:block !important; } #afui.win8 .afPopup>FOOTER>A#cancel{ float:left; min-width:100px; } #afui.win8 .afPopup>FOOTER>A#action{ float:left; min-width:100px; margin-left:10px; } #afui.win8 .afPopup>FOOTER>A.center{ width:auto; } #afui.win8 #af_actionsheet { background:#aaa; color:black; } #afui.win8 #af_actionsheet a{ border-radius:0; -webkit-border-radius:0; border:0px solid black; background-color:transparent; font-weight:normal; color:black; box-shadow: 0px 1px 1px rgba(255,255,255,0); } #afui.win8 #menu .list > li > a { color:inherit; } @media handheld, only screen and (min-width: 768px){ #afui.win8 .footer footer #metroMenu { display:none; } #afui.win8 .footer { -webkit-transform:translate3d(0,0,0); transform:translate(0,0); } #afui.win8 #menu { background:inherit; color:inherit; font-size:18px; left:0; top:0; width:200px; } #afui.win8 #menu .list > li > a:after{ margin-top:-11px; } } #afui.bb { font-family: "Slate Pro",Slate,"Myriad Pro","BBAlpha Sans",Helvetica; font-size: 12pt; } #afui.bb .header { background:#00609E; background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%); background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE)); background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%); background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%); border-style:solid; border-width:1px; border-color:#009CE1 transparent #004E92 transparent; } #afui.bb .header h1 { text-shadow:rgba(0,0,0,0.8) 0 1px 0; font-weight:normal; } #afui.bb .list { font-weight: normal; } #afui.bb .backButton { display: block; position: absolute; line-height:60px; left: 5px; text-overflow: ellipsis; font-size: 10px; padding: 0; color: #fff; text-shadow: none; background-color: transparent; border:none; border-color: transparent; height: 44px; top:0; border-radius: 0; box-shadow:none; margin: 0; padding-left: 0; text-align: center; width:50px; padding:0 !important; margin:0 !important; } #afui.bb .backButton::before { z-index: -1; font-size:22px; position: absolute; top: -15px; left: 15px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; top:1px; -webkit-transform:rotate(180deg); transform:rotate(180deg); background-color: transparent; } #afui.bb .backButton::after { z-index: -1; font-size:24px; content: ' '; position: absolute; font-weight:bold; background-color: transparent; left:55px; height:48px; top:-5px; width:2px; background: #0aa9dc; margin:auto; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: rotate(10deg); transform: rotate(10deg); } #afui.bb .header .button { color:#fff; background:none; text-shadow:0 -1px 0 #333; border-color:transparent; } #afui.bb .footer { border:none; border-radius:0px; background:none; padding:0; -webkit-box-shadow:none; box-shadow: none; } #afui.bb .footer>footer>a:not(.button) { height:49px; top:0px; border-top:4px solid #000; background:#1e1e1e; } #afui.bb .footer>footer>a.pressed:not(.button) { border:0px; border-top:4px solid #0aa9dc; border-radius:0px; background:#3a3a3a; color:white; } #afui.bb .footer>footer>a:not(:last-of-type):not(.pressed):not(.button){ border-right:1px solid black; } #afui.bb .footer>footer>a.icon.pressed:not(.button):before { color: white; } #afui.bb #aside_menu, #afui.bb #menu { border-right:1px solid #bbb; background: #fff; color: #000; } #afui.bb #aside_menu .list > li > a, #afui.bb #menu .list > li > a { color:inherit; } #afui.bb #aside_menu .list .divider, #afui.bb #menu .list .divider { background:#fafafa; color:black; } #afui.bb .list .divider { background:#fafafa; border-top:none; color:black; border-bottom: 1px solid #0aa9dc !important; } #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, #afui.bb #menu .list li, #afui.bb #menu .list .divider, #afui.bb #menu .list li:first-child, #afui.bb #menu .list li:last-child { border-bottom-color :#ccc; } #afui.bb .button , #afui.bb .button-grouped *, #afui.bb .button-grouped > .button:first-child, #afui.bb .button-grouped.vertical *, #afui.bb .button-grouped.vertical > .button:last-child, #afui.bb > .header .button-grouped > .button { border-color:#ccc; } #afui.bb > .header .button-grouped > .button.pressed { background:#07a; } #afui.bb .panel { background:#fff; } #afui.bb .afPopup { border: solid 1px #ccc; -webkit-border-radius: 3px; border-radius: 3px; background:inherit; color:inherit; padding:0; } #afui.bb .afPopup>HEADER{ font-weight:normal; font-size:20px; text-align:center; margin:0; padding:8px; color:white; border-radius: 2px; background:#00609E; background:-ms-linear-gradient(65deg, #00609E 0%,#00AFEE 100%); background:-webkit-gradient(linear, left bottom, right top, color-stop(0%,#00609E), color-stop(100%,#00AFEE)); background:-webkit-linear-gradient(65deg, #00609E 0%,#00AFEE 100%); background:linear-gradient(65deg, #00609E 0%,#00AFEE 100%); } #afui.bb .afPopup>DIV{ text-align:center; padding:10px; } #afui.bb .afPopup>FOOTER{ padding:5px; } #afui.bb .afPopup>FOOTER>A#cancel{ width:120px; } #afui.bb .afPopup>FOOTER>A#action{ width:120px; } #afui.bb #af_actionsheet { background:white; color:inherit; } #afui.bb #af_actionsheet a{ border-radius:5px; -webkit-border-radius:5px; border:1px solid #ccc; background:#eee; color:#111; } /** iOS 7 theme */ /** Blue color color:rgba(82,155,234,255); */ /* border rgba(158,158,158,255) */ #afui.ios7 { font-family:'HelveticaNeue', 'Helvetica Neue',Helvetica, Arial, sans-serif; } #afui.ios7 .header { background:rgb(249,249,249); color:inherit; border:none; border-bottom:1px solid rgba(158,158,158,255); } #afui.ios7 .header .button { color:rgba(82,155,234,255); border-color:transparent; font-size:14px; font-weight:normal; } #afui.ios7 .header h1 { color:inherit; text-shadow:none; } #afui.ios7 .panel, #afui.ios7 #modalContainer { background:rgba(238,238,238,255); } #afui.ios7 .panel h2 { color:inherit; } #afui.ios7 .footer { background:rgb(249,249,249); color:black; border-top:1px solid rgba(158,158,158,255); box-shadow:none; } #afui.ios7 .footer>footer>a:not(.button) { color:rgba(96,96,96,255); } #afui.ios7 .footer>footer>a.pressed:not(.button) { border-radius:0; background:transparent; } #afui.ios7 #menubadge:after { border-color:rgba(82,155,234,255); } #afui.ios7 .list { font-weight:normal; } #afui.ios7 > #aside_menu, #afui.ios7 > #menu { border-right:1px solid #bbb; background:rgba(238,238,238,255); color:black; } #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, #afui.ios7 #menu .list li,#afui.ios7 #menu .list .divider,#afui.ios7 #menu .list li:first-child,#afui.ios7 #menu .list li:last-child { border-color:rgb(215,215,215); font-weight:normal; box-shadow:none; } #afui.ios7 #aside_menu .list .divider, #afui.ios7 #menu .list .divider { background:rgba(238,238,238,255); color:inherit; font-size: 1em; border-bottom:1px solid rgb(215,215,215); color:black; } #afui.ios7 #aside_menu .list a, #afui.ios7 #menu .list a { color:black; } #afui.ios7 #aside_menu .list, #afui.ios7 #menu .list { background:white; font-weight: normal; color:black; } #afui.ios7 .list > li > a:after{ color:rgba(217,217,217,255); } #afui.ios7 .button { background-color:transparent; } #afui.ios7 .backButton { background:rgba(249,249,249,1); color:rgba(82,155,234,255); display: block; position: absolute; line-height:44px; left: 25px; text-overflow: ellipsis; font-size: 14px; padding: 0; text-shadow: none; background-color: transparent; border:none; border-color: transparent; height: 44px; top:0; border-radius: 0; box-shadow:none; margin: 0; padding-left: 0; text-align: center; width:50px; padding:0 !important; margin:0 !important; } #afui.ios7 .backButton::before { z-index: -1; font-size:22px; position: absolute; top: 10px; left: -20px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform:rotate(180deg); transform:rotate(180deg); background-color: transparent; } #afui.ios7 .backButton::after { content: ''; width:0; height:0; border:none; } #afui.ios7 .button { box-shadow:none; border-radius: 0; border-color:#ccc; color:rgba(82,155,234,255); text-shadow:none; } #afui.ios7 .button-grouped * , #afui.ios7 .button-grouped > .button:first-child, #afui.ios7 .button-grouped.vertical * , #afui.ios7 .button-grouped.vertical > .button:last-child, #afui.ios7 .header .button-grouped > .button { border-color:rgba(82,155,234,255); } #afui.ios7 .button-grouped > .button.pressed , #afui.ios7 .header .button-grouped > .button.pressed{ color:white; background:rgba(82,155,234,255); } #afui.ios7 .afPopup { border:1px solid rgba(158,158,158,255); border-radius:10px; padding:0; text-align: center; color:inherit; background:rgba(249,249,249,1); } #afui.ios7 .afPopup>HEADER{ padding:10px 0; } #afui.ios7 .afPopup>DIV{ padding-bottom:10px; } #afui.ios7 .afPopup>FOOTER{ border-top:1px solid #aaa; } #afui.ios7 .afPopup>FOOTER>A.center{ width:100%!important; } #afui.ios7 .afPopup .button { border: none; width: 50%; margin: 0; background: transparent; color:rgba(82,155,234,255); padding:12px 0; } #afui.ios7 .afPopup .button.pressed { background: transparent; } #afui.ios7 .button.pressed { font-weight:bold; background: white; } #afui.ios7 .afPopup a:not(:first-of-type) { border-left:1px solid rgba(158,158,158,255); } #afui.ios7 #af_actionsheet { background-color:transparent; color:black; padding-left:10px; padding-right:10px; border-top: transparent 1px solid; box-shadow: 0px -1px 2px rgba(0,0,0,0); } #afui.ios7 #af_actionsheet a{ background-image:none; text-shadow:none; box-shadow:none; font-weight:normal; border-radius: 0; border:none; -webkit-box-shadow:none; color:rgba(82,155,234,255); background-color:white; cursor:pointer; border-radius:0px; line-height: 40px; font-size: 20px; margin-bottom: 1px; } #afui.ios7 #af_actionsheet a:first-child{ border-top-left-radius:5px; border-top-right-radius:5px; } #afui.ios7 #af_actionsheet a:nth-last-child(2){ border-bottom-left-radius:5px; border-bottom-right-radius:5px; } #afui.ios7 #af_actionsheet a.cancel{ font-weight:bold; margin: 9px 0; border-radius:5px; } #afui.ios7 #af_actionsheet a.red{ color:#f44; } #afui.ios7 .footer>footer>a.pressed:not(.button),.footer>footer>a.icon.pressed:not(.button):before { color:rgba(82,155,234,255); } #afui.ios7 .button.previous { border:none; } #afui.ios7 .button.next { border:none; } #afui.ios7 .button.previous::after { color:rgba(82,155,234,255); z-index: -1; font-size:22px; position: absolute; top: 2px; left: -25px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; -webkit-transform:rotate(180deg); transform:rotate(180deg); background-color: transparent; } #afui.ios7 .button.next::after { color:rgba(82,155,234,255); z-index: -1; font-size:22px; position: absolute; top: 6px; right: -25px; text-align: center; border-radius: 0; border: none; border-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; font-family: 'chevron'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f054"; background-color: transparent; } #afui.ios7 .button.gray { color:#999; background-color:transparent; } #afui.ios7 .button.yellow { color:#F1C222; background-color:transparent; } #afui.ios7 .button.red { color:#b20000; background-color:transparent; } #afui.ios7 .button.green { color:#009C0C; background-color:transparent; } #afui.ios7 .button.orange { color:#FF8000; background-color:transparent; } #afui.ios7 .button.black { color:black; background-color:transparent; } #afui.ios7 .button.slate { color:#171F28; background-color:transparent; } #afui.ios7 .af-badge { border:none; box-shadow:none; font-size:12px; } /* iOS theme */ #afui.ios { color:black; } #afui.ios .header { background-color:#889BB3; background-image:-ms-linear-gradient(top, #B3BECD 0%, #889BB3 50%, #6E84A2 51%); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #B3BECD), color-stop(.5, #889BB3), color-stop(.51, #6E84A2)); background-image:-webkit-linear-gradient(top, #B3BECD 0%, #889BB3 50%, #6E84A2 51%); background-image:linear-gradient(to bottom, #B3BECD 0%, #889BB3 50%, #6E84A2 51%); border: 1px solid; border-color:#CCD2DA transparent #2D3033 transparent; color:white; } #afui.ios .header h1 { text-shadow: rgba(0,0,0,0.8) 0 -1px 0; } #afui.ios .af-badge { border:2px solid #fff; box-shadow:0 1px 2px #555; line-height:18px; } #afui.ios .panel, #afui.ios #modalContainer { background:#e7e7e7; } #afui.ios .panel h2 { color:inherit;} #afui.ios .footer { background-color:#000; background-image:-ms-linear-gradient(top, #222 0%, #111 50%, #000 51%); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #111), color-stop(.51, #000)); background-image:-webkit-linear-gradient(top, #222 0%, #111 50%, #000 51%); background-image:linear-gradient(to bottom, #222 0%, #111 50%, #000 51%); box-shadow:0 1px 0 #555 inset; border-top:1px solid #000; } #afui.ios .footer>footer>a.pressed:not(.button) { background:rgba(255, 255, 255, 0.13); border-radius:6px; } #afui.ios .footer>footer>a.icon.pressed:not(.button):before { color:#3a9de2; } #afui.ios > #aside_menu, #afui.ios > #menu.tabletMenu { border-right:none; background:#000; color:#fff; } #afui.ios .backButton { line-height:15px; width:58px; display:block; position:absolute; top:5px; left:5px; text-overflow:ellipsis; font-size:12px; padding:7px !important; color:#fff; text-shadow:0 -1px 0 #333; background-color:#476999; background-image: none !important; border:1px solid; border-color:#375073 #375073 #375073 transparent; height:32px; border-radius:5px; box-shadow:0 1px 0 #9CABC0; margin:0 0 0 15px !important; padding-left:4px !important; } /* Sets up positioning of the back button which appears in the header */ #afui.ios .backButton::before { z-index:-1; content:''; position:absolute; width:24px; height:24px; background-color:#476999; top:2px; left:-11px; border-radius:5px; border:1px solid; border-color:transparent transparent #9CABC0 transparent; box-shadow:1px -1px 0 #375073 inset; -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } #afui.ios .header .button { color:#fff; text-shadow:0 -1px 0 #333; background-color:#476999; border:1px solid #375073; box-shadow:0 1px 0 #9CABC0; background-image:linear-gradient(to bottom, #9CABC0 0%, #6E84A2 50%, #476999 51%); } #afui.ios .header .button.pressed { background-image:linear-gradient(to bottom, #6E84A2 0%, #476999 50%, #274979 51%); } #afui.ios .footer .button { color:#fff; text-shadow:0 -1px 0 #333; background-color:#444; border:1px solid #222; box-shadow:0 1px 0 #222; background-image:linear-gradient(to bottom, #555 0%, #333 50%, #111 51%); } #afui.ios .footer .button.pressed { background-image:linear-gradient(to bottom, #444 0%, #222 50%, #000 51%); } #afui.ios #aside_menu .list li, #afui.ios #aside_menu .list .divider, #afui.ios #aside_menu .list li:first-child, #afui.ios #aside_menu .list li:last-child, #afui.ios #menu .list li, #afui.ios #menu .list .divider, #afui.ios #menu .list li:first-child, #afui.ios #menu .list li:last-child { border-color:#101012; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } #afui.ios #aside_menu .list > li > a, #afui.ios #menu .list > li > a { color:#ccc; } #afui.ios #aside_menu .list .divider, #afui.ios #menu .list .divider { background:#333; color:#fff; } #afui.ios .afPopup { border: solid 2px #fff; -webkit-box-shadow: 0px 4px 6px #555, 0 0 20px rgba(0,0,0,0.5); -webkit-border-radius: 10px; border-radius:10px; padding: 0; background: #1b294b; background-image: -webkit-gradient(linear, left top, left bottom, from(#626c82), to(#1b294b)); } #afui.ios .afPopup >* { color:white; } #afui.ios .afPopup>HEADER{ font-weight:bold; text-align:center; text-shadow:0 -1px #000; padding:5px; } #afui.ios .afPopup>DIV{ text-align:center; } #afui.ios .afPopup>FOOTER>A{ background-image: -webkit-gradient(linear, left top, left bottom, from(#626c82), to(#1b294b)); color:white; } #afui.ios .afPopup>FOOTER>A#cancel{ width:120px; margin-left:10px; } #afui.ios .afPopup>FOOTER>A#action{ width:120px; margin-right:10px; } #afui.ios .afPopup>FOOTER>A.center{ float:none!important; width:95%!important; margin:8px!important; } #afui.ios #af_actionsheet { background:#595c61; color:inherit; } #afui.ios #af_actionsheet a{ border-radius:10px; -webkit-border-radius:10px; border:3px solid #111; background:#eee; background: linear-gradient(to bottom, #fff 0%,#ccc 100%); color:#111; text-shadow:0 1px 0 #fff; } #afui.ios #af_actionsheet a.cancel{ background:#333; background: linear-gradient(to bottom, #666 0%,#333 100%); color:white; text-shadow:0 -1px 0 #000; } #afui.ios #af_actionsheet a.red{ background:#d11; background: linear-gradient(to bottom, #d55 0%,#d11 100%); color:white; text-shadow:0 -1px 0 #000; } #af_actionsheet { position:absolute; left:0px; right:0px; padding-left:10px; padding-right:10px; padding-top:10px; margin:auto; background:black; float:left; z-index:9999; border-top:#fff 1px solid; background:rgba(71,71,71,.95); 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))); background-image:-webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 8%, rgba(255,255,255,0) 8%); box-shadow:0px -1px 2px rgba(0,0,0,.4); } #af_actionsheet a { text-decoration:none; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; text-shadow:0px -1px rgba(0,0,0,.8); padding:0px .25em; border:1px solid rgba(0,0,0,.8); text-overflow:ellipsis; border-radius:.75em; 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))); background-image:-webkit-linear-gradient(top, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%); box-shadow:0px 1px 1px rgba(255,255,255,0.7); display:block; color:white; text-align:center; line-height:36px; font-size:20px; font-weight:bold; margin-bottom:10px; background-color:rgba(130,130,130,1); } #af_actionsheet a.selected { background-color:rgba(150,150,150,1); } #af_actionsheet a.cancel { background-color:rgba(43,43,43,1); } #af_actionsheet a.cancel.selected { background-color:rgba(73,73,73,1); } #af_actionsheet a.red { color:white; background-color:rgba(204,0,0,1); } #af_actionsheet a.red.selected { background-color:rgba(255,0,0,1); } #mask{ display:block; width:100%; height:100%; background:#000; z-index: 999999; position:fixed; top:0; left:0; } .afPopup { display: block; width: 280px; float:left; border: solid 1px #72767b; -webkit-border-radius: 10px; border-radius:10px; padding: 10px; opacity: 1; -webkit-transform: scale(1); -webkit-transition: all 0.20s ease-in-out; transform:scale(1); transition: all 0.20s ease-in-out; position: absolute; z-index: 1000000; top: 50%; left: 50%; margin: 0px auto; background: rgba(70,70,70,1); color:white; } .afPopup >* { color:inherit; } .afPopup.hidden { opacity: 0; -webkit-transform: scale(0); top: 50%; left: 50%; margin: 0px auto; } .afPopup>HEADER{ font-weight:bold; font-size:20px; margin:0; padding:5px; } .afPopup>DIV{ font-size:14px; margin:8px; } .afPopup>FOOTER{ width:100%; text-align:center; display:block !important; } .afPopup>FOOTER>A#cancel{ float:left; margin-left:5px; } .afPopup>FOOTER>A#action{ float:right; margin-right:5px; } .afPopup>FOOTER>A.center{ float:none!important; width:80%; margin:8px; } /** This can be your default scrollbar class. You must use !important to override the default inline styles */ .scrollBar { position: absolute !important; width: 5px !important; height: 20px !important; border-radius: 2px !important; border: 1px solid black !important; background: black !important; opacity: 0 !important; } #afModalMask { position:absolute; top:0px; left:0px; width:100%; height:100%; background:transparent; display:none; z-index:9999; } #afSelectBoxContainer { position:absolute; display:block; width:90%; max-width:280px; margin-right:auto; min-height:100px; background:#303030; color:white; overflow:hidden; z-index:9999; max-height:300px; margin-top: -150px; top: 50%; left: 50%; margin-left: -138px; } #afSelectBoxfix ul { list-style-type:none; padding:0px; margin:0px; } #afSelectBoxfix li { font-size: 1.1em; color: #fff; display: block; line-height: 2.5em; padding: 0 1em; border-bottom: 1px solid #444; } #afSelectBoxfix .selected { background:#33B5E5; } .afFakeSelect { width: 200px; height: 30px; display: inline-block; border: 1px solid #ccc; border-radius: 5px; line-height: 2em; font-size: 1em; padding-left: 10px; position: relative; padding-right: 35px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .afFakeSelect:after { position:absolute; top:5px; right:5px; border: 14px solid transparent; border-top-color: #ccc; content:''; } #afSelectBoxContainer #afSelectDone,#afSelectBoxContainer #afSelectCancel{ margin-top:10px; display: inline-block; height: 30px; width: 100px; background:#33B5E5; border: 1px solid #33B5E5; text-align: center; line-height: 2em; float: left; margin-left: 10px; } #afSelectBoxContainer #afSelectCancel { float:right; margin-right:10px; } #afSelectBoxContainer #afSelectClose { overflow: hidden; border-bottom: 1px solid #444; padding-bottom:5px; } select:disabled~.afFakeSelect { background:#ccc; color:black; }