body { visibility: hidden; } html.mobile, .mobile body { width: 100%; margin: 0px; padding: 0px; } .mobile body { overflow-x: hidden; -webkit-text-size-adjust: none; background-color: rgb(197,204,211); font-family: Helvetica; font-size: 17px; } /* dojox.mobile.View */ .mblView { position: relative; top: 0px; left: 0px; width: 100%; } .mblView.out { } .mblView.in { position: absolute; } .slide.out { -webkit-animation-duration: .4s; -webkit-animation-name: slideOut; -webkit-animation-timing-function: linear; -webkit-transform: translateX(-100%); } .slide.in { -webkit-animation-duration: .4s; -webkit-animation-name: slideIn; -webkit-animation-timing-function: linear; -webkit-transform: translateX(0px); } .slide.out.reverse { -webkit-animation-name: slideOutReverse; } .slide.in.reverse { -webkit-animation-name: slideInReverse; } @-webkit-keyframes slideOut { from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(-100%); } } @-webkit-keyframes slideIn { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0px); } } @-webkit-keyframes slideOutReverse { from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(100%); } } @-webkit-keyframes slideInReverse { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0px); } } .flip.out { -webkit-animation-duration: .6s; -webkit-animation-name: flipOut; -webkit-animation-timing-function: ease-in; -webkit-transform: rotateY(90deg); } .flip.in { -webkit-animation-duration: .6s; -webkit-animation-name: flipIn; -webkit-animation-timing-function: ease-out; } @-webkit-keyframes flipOut { 0% { -webkit-transform: rotateY(0deg) scale(1); } 50% { -webkit-transform: rotateY(90deg) scale(.8); } 100% { -webkit-transform: rotateY(90deg) scale(.8); } } @-webkit-keyframes flipIn { 0% { -webkit-transform: rotateY(90deg) scale(.8); } 50% { -webkit-transform: rotateY(90deg) scale(.8); } 100% { -webkit-transform: rotateY(0deg) scale(1); } } .fade.out { -webkit-animation-duration: 1s; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease-in; } .fade.out.fast { -webkit-animation-duration: 0.3s; } .fade.in { -webkit-animation-duration: 1s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease-out; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* dojox.mobile.Heading */ .mblHeading { position: relative; height: 42px; margin: 0px; padding: 0px; background-color: #889BB3; background: -webkit-gradient(linear, left top, left bottom, from(#B0BCCD), to(#6D84A2), color-stop(0.5, #889BB3), color-stop(0.5, #8195AF)); border-top: 1px solid #CDD5DF; border-bottom: 1px solid #2D3642; font-family: Helvetica; font-size: 20px; color: white; text-align: center; line-height: 44px; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 1; } /* Heading Arrow Button */ .mblArrowButton { position: relative; float: left; height: 42px; margin-right: 6px; } .mblArrowButtonHead { position: absolute; top: 11px; left: 8px; width: 19px; height: 19px; border-width: 1px; border-style: solid; border-color: #3A4655; -webkit-transform: scale(.8,1) rotate(45deg); background: -webkit-gradient(linear, left top, right bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); } .mblArrowButtonBody { position: absolute; top: 6px; left: 19px; padding: 0px 10px 0px 3px; height: 29px; border-width: 1px 1px 1px 0px; border-style: inset; border-color: #9CACC0; font-family: Helvetica; font-size: 13px; color: white; line-height: 29px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #5877A2; background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); -webkit-tap-highlight-color: transparent; } .mblArrowButtonNeck { position: absolute; top: 6px; left: 19px; width: 4px; height: 29px; border-width: 1px 0px 1px 0px; border-style: inset; border-color: #9CACC0; background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); } .mblArrowButtonSelected .mblArrowButtonHead { background: -webkit-gradient(linear, left top, right bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69)); } .mblArrowButtonSelected .mblArrowButtonBody, .mblArrowButtonSelected .mblArrowButtonNeck { background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69)); } /* ToolBarButton */ .mblToolbarButton { float: left; position: relative; margin: 6px; padding: 0px 10px; height: 29px; border: 1px inset #9CACC0; font-family: Helvetica; font-size: 13px; font-weight: bold; color: white; line-height: 29px; text-align: center; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-tap-highlight-color: transparent; } /* dojox.mobile.TabBar */ .mblTabBar { position: relative; height: 48px; width: 100%; margin: 0px; padding: 0px; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#2D2D2D), to(#000000), color-stop(0.5, #141414), color-stop(0.5, #000000)); border-top: 1px solid #000000; color: white; text-align: center; overflow: hidden; white-space: nowrap; } .mblTabBar .mblTabBarButton { position: relative; list-style-type: none; float: left; } /* dojox.mobile.TabBarButton */ .mblTabBarButton { } .mblTabBarButtonAnchor { display: block; text-decoration: none; } .mblTabButton .mblTabBarButtonAnchor { height: 28px; } .mblTabBarButtonDiv { position: relative; height: 34px; width: 29px; left: 50%; } .mblTabButton .mblTabBarButtonDiv { display: none; } .mblTabBarButtonDivInner { left: -50%; } .mblTabBarButtonIcon { position: absolute; left: 0px; top: 2px; } .mblTabBar .mblTabBarButton.mblTabButtonSelected { background-color: #404040; background: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424), color-stop(0.5, #353535), color-stop(0.5, #242424)); -webkit-border-radius: 3px; -moz-border-radius: 3px; } .mblTabBarButtonTextBox { color: #979797; font-family: "Helvetica Neue", Helvetica; font-size: 11px; } .mblTabButtonSelected .mblTabBarButtonTextBox { color: white; } /* dojox.mobile.RoundRect */ .mblRoundRect { margin: 7px 9px 16px 9px; padding: 8px; border: 1px solid #ADAAAD; -webkit-border-radius: 8px; -moz-border-radius: 8px; background-color: white; } .mblRoundRect.mblShadow { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } /* dojox.mobile.EdgeToEdgeCategory */ .mblEdgeToEdgeCategory { position: relative; height: 22px; margin: 0px; padding: 0px 10px; border-top: 1px solid #A4B0B9; border-bottom: 1px solid #979DA3; background: -webkit-gradient(linear, left top, left bottom, from(#8F9EA9), to(#B7C0C7)); font-family: Helvetica; font-weight: bold; font-size: 16px; color: white; line-height: 22px; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* dojox.mobile.RoundRectCategory */ .mblRoundRectCategory { color: #4C566C; padding: 18px 0px 0px 20px; margin: 0px; text-shadow: rgba(255, 255, 255, 1) 0px 1px 0px; font-family: Helvetica; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* dojox.mobile.RoundRectList */ .mblRoundRectList { margin: 7px 9px 16px 9px; padding: 0px; border: 1px solid #ADAAAD; -webkit-border-radius: 8px; -moz-border-radius: 8px; background-color: white; position: relative; /* IE needs this */ } /* dojox.mobile.EdgeToEdgeList */ .mblEdgeToEdgeList { padding: 0px; background-color: white; position: relative; /* IE needs this */ margin: 0px; /* IE needs this */ } /* dojox.mobile.ListItem */ .mblListItem { list-style-type: none; height: 43px; border-bottom: 1px solid #ADAAAD; line-height: 43px; font-weight: bold; position: relative; color: black; vertical-align: bottom; /* To avoid IE6 LI bug */ padding-left: 8px; } .mblListItemIcon { position: absolute; top: 7px; } .mblListItem.mblVariableHeight { line-height: normal; height: auto; padding: 11px 6px 10px 6px; } .mblItemSelected { background-color: #048BF4; background: -webkit-gradient(linear, left top, left bottom, from(#048BF4), to(#005CE5)); } .mblListItemTextBox { padding-right: 28px; } .mblListItemTextBoxSelected { background-color: #048BF4; } .mblRoundRectList .mblListItem:first-child { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; } .mblRoundRectList .mblListItem:last-child { border-bottom-width: 0px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; } .mblEdgeToEdgeList .mblListItem:last-child { border-bottom-color: #707C84; } .mblListItem a.mblListItemAnchor { background-position: 9px 7px; display: block; padding-left: 40px; text-decoration: none; -webkit-tap-highlight-color: transparent; } .mblListItem a.mblListItemAnchorNoIcon { padding-left: 10px; } .mblItemSelected a.mblListItemAnchor { color: white; } .mblListItem a.mblListItemAnchorHasRightButton { padding-right: 40px; } .mblListItem .mblArrow { position: absolute; top: 18px; right: 12px; width: 6px; height: 6px; font-size: 1px; -webkit-transform: rotate(45deg); border-width: 3px 3px 0px 0px; border-style: solid; border-color: #808080; } .mblItemSelected .mblArrow { border-color: white; } .mblVariableHeight div.mblArrow { top: 50%; margin-top: -4px; } .mblRightText { position: absolute; top: 12px; right: 30px; color: #324F85; line-height: normal; } .mblListItem .mblRightButtonContainer { position: absolute; top: 50%; right: 12px; } .mblListItem .mblRightButton { position: absolute; top: -50%; } /* Switch */ .mblSwitch { position: relative; width: 94px; height: 27px; overflow: hidden; } .mblItemSwitch { position: absolute; top: 8px; right: 12px; } .mblSwitchInner { position: absolute; top: 0px; height: 27px; } .mblSwitchAnimation .mblSwitchInner { -webkit-transition-property: left; -webkit-transition-duration: .3s; } .mblSwitchOn .mblSwitchInner { left: 0px; } .mblSwitchOff .mblSwitchInner { left: -53px; } .mblSwitchBg { position: absolute; top: 0px; height: 27px; border-width: 1px; border-style: inset; border-color: #9CACC0; font-family: Helvetica; font-size: 16px; font-weight: bold; line-height: 29px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .mblSwitchBgLeft { left: 0px; width: 94px; color: white; background-color: #3F84EB; background: -webkit-gradient(linear, left top, left bottom, from(#2859B1), to(#75ACFB), color-stop(0.5, #3F84EB), color-stop(0.5, #4C8EEE)); } .mblSwitchBgRight { left: 53px; width: 94px; color: #7F7F7F; background-color: #EEEEEE; background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8)); } .mblSwitchKnob { position: absolute; top: 1px; left: 53px; width: 41px; height: 26px; font-size: 1px; border-width: 1px; border-style: solid; border-color: #EFEFEF #A5A5A5 #969696 #325E9E; line-height: 29px; background-color: #CCCCCC; background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FAFAFA)); -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .mblSwitchText { position: relative; top: 0px; width: 53px; height: 27px; padding: 0px; text-align: center; } .mblSwitchTextLeft { left: 0px; } .mblSwitchTextRight { left: 40px; } /* Icon Container */ .mblIconContainer { padding: 0px; margin: 20px 0px 0px 10px; padding: 0px 0px 40px 0px; } .mblIconItem { list-style-type: none; float: left; } .mblIconItemTerminator { list-style-type: none; height: 20px; clear: both; } .mblIconItemSub { list-style-type: none; margin-left: -10px; background-color: white; } .mblIconArea { font-family: Helvetica; font-size: 12px; height: 78px; width: 74px; text-align: center; margin-bottom: 10px; } .mblIconArea DIV { position: relative; height: 65px; } .mblIconArea IMG { position: absolute; top: 0px; left: 6px; } .mblContent { clear: both; padding-bottom: 20px; } table.mblClose { clear: both; cursor: pointer; } .mblVibrate{ position: relative; -webkit-animation-duration: .5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 20; -webkit-animation-name: vibrate; -webkit-transform: rotate(0deg); } @-webkit-keyframes vibrate{ 0%{ -webkit-transform: rotate(-2deg); bottom: -1px; left: -1px; } 25% { -webkit-transform: rotate(1deg); bottom: 2px; left: 1px; } 50% { -webkit-transform: rotate(-1deg); bottom: -2px; left: -1px; } 75% { -webkit-transform: rotate(2deg); bottom: 2px; left: 1px; } 100% { -webkit-transform: rotate(-2deg); bottom: -1px; left: -1px; } } .mblCloseContent{ -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: shrink; -webkit-transform: scale(0.01); } .mblCloseContent.mblShrink0{ -webkit-animation-name: shrink0; } .mblCloseContent.mblShrink1{ -webkit-animation-name: shrink1; } .mblCloseContent.mblShrink2{ -webkit-animation-name: shrink2; } .mblCloseContent.mblShrink3{ -webkit-animation-name: shrink3; } @-webkit-keyframes shrink{ from { -webkit-transform: scale(1); } to { -webkit-transform: scale(0.01); } } @-webkit-keyframes shrink0{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(-40%,-70%) scale(0.01); } } @-webkit-keyframes shrink1{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(-14%,-70%) scale(0.01); } } @-webkit-keyframes shrink2{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(14%,-70%) scale(0.01); } } @-webkit-keyframes shrink3{ from { -webkit-transform: scale(1); } to { -webkit-transform: translate(40%,-70%) scale(0.01); } } /* Icon Content Heading */ .mblIconContentHeading { position: relative; clear: both; height: 25px; padding-left: 40px; margin-top: 0px; background: -webkit-gradient(linear, left top, left bottom, from(#E0E4E7), to(#B4BEC6), color-stop(0.5, #C4CCD2), color-stop(0.5, #BFC8CE)); border-top: 1px solid #F1F3F4; border-bottom: 1px solid #717D85; font-family: Helvetica; font-size: 14px; color: white; line-height: 26px; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* dojox.mobile.Button */ .mblButton { padding: 0px 10px; height: 29px; border-width: 1px 1px 1px 1px; border-style: outset; color: white; font-family: Helvetica; font-size: 13px; line-height: 29px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-tap-highlight-color: transparent; } .mblBlueButton { border-color: #9CACC0; background-color: #366EDF; background: -webkit-gradient(linear, left top, left bottom, from(#7A9DE9), to(#2362DD), color-stop(0.5, #366EDF), color-stop(0.5, #215FDC)); -webkit-tap-highlight-color: transparent; } .mblBlueButtonSelected { background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); } .mblRedButton { border-color: #9CACC0; background-color: #366EDF; background: -webkit-gradient(linear, left top, left bottom, from(#FA9D58), to(#EE4115), color-stop(0.5, #FF4D25), color-stop(0.5, #ED4D15)); -webkit-tap-highlight-color: transparent; } .mblRedButtonSelected { background: -webkit-gradient(linear, left top, left bottom, from(#C1A48E), to(#9B6C4A), color-stop(0.5, #A27758), color-stop(0.5, #996947)); } /* Tab Container */ .mblTabContainer { } .mblTabButton { float: left; position: relative; list-style-type: none; width: 100px; text-align: center; height: 28px; border-width: 1px 1px 1px 0px; border-style: inset; border-color: #9CACC0; border-right-color: #5E708A; font-family: Helvetica; font-size: 13px; color: white; cursor: pointer; line-height: 29px; background: -webkit-gradient(linear, left top, left bottom, from(#ABB9CA), to(#788DA9), color-stop(0.5, #8297AF), color-stop(0.5, #768BA7)); -webkit-tap-highlight-color: transparent; } .mblTabButton:first-child { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-left-width: 1px; } .mblTabButton:last-child { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-right-color: #9CACC0; } .mblTabPanelHeader .mblTabButton.mblTabButtonSelected { background-color: #5877A2; background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); } .mblTabButtonImgDiv { display: none; } .mblTabPanelHeader { position: relative; height: 39px; margin: 0px; padding: 3px 0px 0px 0px; background-color: #889BB3; background: -webkit-gradient(linear, left top, left bottom, from(#B0BCCD), to(#6D84A2), color-stop(0.5, #889BB3), color-stop(0.5, #8195AF)); border-top: 1px solid #CDD5DF; border-bottom: 1px solid #2D3642; font-family: Helvetica; font-size: 20px; color: white; text-align: center; line-height: 44px; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mblTabPanelPane { } .mblTabPane { } /* Progress Indicator */ .mblProgContainer { position: absolute; width: 36px; height: 36px; top: 180px; left: 50%; margin: -18px 0px 0px -18px; } .mblProg { position: absolute; left: 0px; top: 0px; width: 11px; font-size: 1px; height: 4px; overflow: hidden; -webkit-transform-origin: 0 2px; background-color: #C0C0C0; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .mblProg0 { -webkit-transform: translate(18px,10px) rotate(-90deg); } .mblProg1 { -webkit-transform: translate(22px,11px) rotate(-60deg); } .mblProg2 { -webkit-transform: translate(25px,14px) rotate(-30deg); } .mblProg3 { -webkit-transform: translate(26px,18px) rotate(0deg); } .mblProg4 { -webkit-transform: translate(25px,22px) rotate(30deg); } .mblProg5 { -webkit-transform: translate(22px,25px) rotate(60deg); } .mblProg6 { -webkit-transform: translate(18px,26px) rotate(90deg); } .mblProg7 { -webkit-transform: translate(14px,25px) rotate(120deg); } .mblProg8 { -webkit-transform: translate(11px,22px) rotate(150deg); } .mblProg9 { -webkit-transform: translate(10px,18px) rotate(180deg); } .mblProg10 { -webkit-transform: translate(11px,14px) rotate(210deg); } .mblProg11 { -webkit-transform: translate(14px,11px) rotate(240deg); } /* Button Colors */ .mblColorBlue { background-color: #366EDF; background: -webkit-gradient(linear, left top, left bottom, from(#7A9DE9), to(#2362DD), color-stop(0.5, #366EDF), color-stop(0.5, #215FDC)); } /* Default Button Colors */ .mblColorDefault { /* Dark Blue */ background-color: #5877A2; background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); } .mblColorDefaultSel { /* More Dark Blue */ background-color: #394D77; background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69)); }