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: black; font-family: Helvetica; font-size: 17px; } /* dojox.mobile.View */ .mblView { position: relative; top: 0px; left: 0px; width: 100%; color: white; } .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.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: 25px; margin: 0px; padding: 0px 0px 0px 4px; background-color: #8C8A8C; background: -webkit-gradient(linear, left top, left bottom, from(#9C9E9C), to(#848284)); border-top: 1px solid #CDD5DF; border-bottom: 1px solid #2D3642; font-family: Helvetica; font-size: 14px; color: white; text-align: center; line-height: 23px; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Heading Arrow Button */ .mblArrowButton { position: relative; float: left; height: 25px; margin-right: 6px; } .mblArrowButtonHead { position: absolute; top: 5px; left: 9px; width: 19px; height: 16px; border-width: 1px; border-style: solid; border-color: #3F3E3E; -webkit-transform: scale(.8,1) rotate(45deg); background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090)); } .mblArrowButtonBody { position: absolute; top: 0px; left: 19px; padding: 0px 10px 0px 3px; height: 23px; border-width: 1px 1px 1px 0px; border-style: inset; border-color: #3F3E3E; font-family: Helvetica; font-size: 13px; color: white; line-height: 23px; cursor: pointer; -webkit-border-radius: 5px; background-color: #ADADAD; background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090)); -webkit-tap-highlight-color: transparent; } .mblArrowButtonNeck { position: absolute; top: 0px; left: 19px; width: 4px; height: 23px; border-width: 1px 0px 1px 0px; border-style: inset; border-color: #3F3E3E; background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090)); } .mblArrowButtonSelected .mblArrowButtonHead { background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700)); } .mblArrowButtonSelected .mblArrowButtonBody, .mblArrowButtonSelected .mblArrowButtonNeck { background-color: #FFC700; background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700)); } /* ToolBarButton */ .mblToolbarButton { float: left; position: relative; margin: 0px 3px; padding: 0px 10px; height: 23px; border: 1px inset #3F3E3E; font-family: Helvetica; font-size: 13px; font-weight: bold; color: white; line-height: 23px; text-align: center; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-tap-highlight-color: transparent; } /* dojox.mobile.TabBar */ /*TODO: not optimized for android yet*/ .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; } .mblTabBarButtonDiv { position: relative; height: 34px; width: 29px; left: 50%; } .mblTabButton .mblTabBarButtonDiv { height: 40px; } .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; padding: 8px; border: 1px solid #ADAAAD; -webkit-border-radius: 8px; -moz-border-radius: 8px; color: white; background-color: black; } .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-bottom: 1px solid #393439; background-color: #212021; font-family: Helvetica; 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: white; margin: 18px 0px 0px 20px; font-family: Helvetica; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* dojox.mobile.RoundRectList */ .mblRoundRectList { margin: 7px 9px 16px; 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: black; position: relative; /* IE needs this */ margin: 0px; /* IE needs this */ } /* dojox.mobile.ListItem */ .mblListItem { list-style-type: none; height: 64px; border-bottom: solid 1px #313431; line-height: 64px; font-size: 21px; position: relative; color: white; background-color: black; padding-left: 7px; } .mblListItemIcon { position: absolute; top: 18px; } .mblListItem.mblVariableHeight { line-height: normal; height: auto; padding: 11px 6px 10px 6px; } .mblItemSelected { background-color: #FFC700; background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700)); } .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: #313431; } .mblListItem a.mblListItemAnchor { background-position: 14px 17px; display: block; padding-left: 53px; text-decoration: none; -webkit-tap-highlight-color: transparent; } .mblListItem a.mblListItemAnchorNoIcon { padding-left: 14px; } .mblItemSelected a.mblListItemAnchor { color: black; } .mblListItem a.mblListItemAnchorHasRightButton { padding-right: 50px; } .mblListItem .mblArrow { position: absolute; top: 26px; 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: 20px; right: 30px; color: white; line-height: normal; } .mblListItem .mblRightButtonContainer { position: absolute; top: 50%; right: 12px; } .mblListItem .mblRightButton { position: absolute; top: -50%; } .mblListItemSubText { font-size: 14px; color: gray; } /* Switch */ .mblSwitch { position: relative; width: 94px; height: 27px; overflow: hidden; } .mblItemSwitch { position: absolute; top: 18px; 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: 2px; -moz-border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .mblSwitchBgLeft { left: 0px; width: 94px; color: white; background-color: #00D300; background: -webkit-gradient(linear, left top, left bottom, from(#00A200), to(#00D300), color-stop(0.2, #00BA00), color-stop(0.2, #00BA00)); } .mblSwitchBgRight { left: 53px; width: 94px; color: #7F7F7F; background-color: #EEEEEE; background: -webkit-gradient(linear, left top, left bottom, from(#BDBEBD), to(#F7F3F7)); } .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(#9C9A9C), to(#848284)); -webkit-border-radius: 2px; -moz-border-radius: 2px; -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; color: black; } .mblIconArea { font-family: Helvetica; font-size: 12px; height: 78px; width: 74px; text-align: center; margin-bottom: 10px; color: white; } .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)); } /* Tab Container */ .mblTabContainer { } .mblTabButton { position: relative; float: left; list-style-type: none; width: 78px; text-align: center; height: 61px; margin-right: 2px; border-width: 0px 1px 0px 1px; border-style: solid; border-color: black #182018 black #393C39; font-family: Helvetica; font-size: 13px; color: white; background-color: #212421; background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100C10), color-stop(0.1, #313031)); -webkit-tap-highlight-color: transparent; } .mblTabButtonSelected.mblTabButton { background-color: #8C8E8C; background: -webkit-gradient(linear, left top, left bottom, from(#A59EA5), to(#848284)); } .mblTabButtonHighlighted.mblTabButton { background-color: #FFB600; background: -webkit-gradient(linear, left top, left bottom, from(#FFCB00), to(#FF9A00)); } .mblTabButtonImgDiv { position: relative; margin-left: 24px; height: 40px; } .mblTabButton IMG { position: absolute; left: 0px; margin-top: 8px; } .mblTabPanelHeader { position: relative; height: 64px; margin: 0px; padding: 0px 0px 0px 0px; background-color: #000000; border-top: 1px solid #CDD5DF; border-bottom: 2px solid #949694; font-family: Helvetica; font-size: 20px; color: white; text-align: center; 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 { /* Gray */ background-color: #ADADAD; background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090)); } .mblColorDefaultSel { /* Orange */ background-color: #FFC700; background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700)); }