android.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
  1. body {
  2. visibility: hidden;
  3. }
  4. html.mobile, .mobile body {
  5. width: 100%;
  6. margin: 0px;
  7. padding: 0px;
  8. }
  9. .mobile body {
  10. overflow-x: hidden;
  11. -webkit-text-size-adjust: none;
  12. background-color: black;
  13. font-family: Helvetica;
  14. font-size: 17px;
  15. }
  16. /* dojox.mobile.View */
  17. .mblView {
  18. position: relative;
  19. top: 0px;
  20. left: 0px;
  21. width: 100%;
  22. color: white;
  23. }
  24. .mblView.out {
  25. }
  26. .mblView.in {
  27. position: absolute;
  28. }
  29. .slide.out {
  30. -webkit-animation-duration: .4s;
  31. -webkit-animation-name: slideOut;
  32. -webkit-animation-timing-function: linear;
  33. -webkit-transform: translateX(-100%);
  34. }
  35. .slide.in {
  36. -webkit-animation-duration: .4s;
  37. -webkit-animation-name: slideIn;
  38. -webkit-animation-timing-function: linear;
  39. -webkit-transform: translateX(0px);
  40. }
  41. .slide.out.reverse {
  42. -webkit-animation-name: slideOutReverse;
  43. }
  44. .slide.in.reverse {
  45. -webkit-animation-name: slideInReverse;
  46. }
  47. @-webkit-keyframes slideOut {
  48. from { -webkit-transform: translateX(0px); }
  49. to { -webkit-transform: translateX(-100%); }
  50. }
  51. @-webkit-keyframes slideIn {
  52. from { -webkit-transform: translateX(100%); }
  53. to { -webkit-transform: translateX(0px); }
  54. }
  55. @-webkit-keyframes slideOutReverse {
  56. from { -webkit-transform: translateX(0px); }
  57. to { -webkit-transform: translateX(100%); }
  58. }
  59. @-webkit-keyframes slideInReverse {
  60. from { -webkit-transform: translateX(-100%); }
  61. to { -webkit-transform: translateX(0px); }
  62. }
  63. .flip.out {
  64. -webkit-animation-duration: .6s;
  65. -webkit-animation-name: flipOut;
  66. -webkit-animation-timing-function: ease-in;
  67. -webkit-transform: rotateY(90deg);
  68. }
  69. .flip.in {
  70. -webkit-animation-duration: .6s;
  71. -webkit-animation-name: flipIn;
  72. -webkit-animation-timing-function: ease-out;
  73. }
  74. @-webkit-keyframes flipOut {
  75. 0% { -webkit-transform: rotateY(0deg) scale(1); }
  76. 50% { -webkit-transform: rotateY(90deg) scale(.8); }
  77. 100% { -webkit-transform: rotateY(90deg) scale(.8); }
  78. }
  79. @-webkit-keyframes flipIn {
  80. 0% { -webkit-transform: rotateY(90deg) scale(.8); }
  81. 50% { -webkit-transform: rotateY(90deg) scale(.8); }
  82. 100% { -webkit-transform: rotateY(0deg) scale(1); }
  83. }
  84. .fade.out {
  85. -webkit-animation-duration: 1s;
  86. -webkit-animation-name: fadeOut;
  87. -webkit-animation-timing-function: ease-in;
  88. }
  89. .fade.in {
  90. -webkit-animation-duration: 1s;
  91. -webkit-animation-name: fadeIn;
  92. -webkit-animation-timing-function: ease-out;
  93. }
  94. @-webkit-keyframes fadeOut {
  95. from { opacity: 1; }
  96. to { opacity: 0; }
  97. }
  98. @-webkit-keyframes fadeIn {
  99. from { opacity: 0; }
  100. to { opacity: 1; }
  101. }
  102. /* dojox.mobile.Heading */
  103. .mblHeading {
  104. position: relative;
  105. height: 25px;
  106. margin: 0px;
  107. padding: 0px 0px 0px 4px;
  108. background-color: #8C8A8C;
  109. background: -webkit-gradient(linear, left top, left bottom, from(#9C9E9C), to(#848284));
  110. border-top: 1px solid #CDD5DF;
  111. border-bottom: 1px solid #2D3642;
  112. font-family: Helvetica;
  113. font-size: 14px;
  114. color: white;
  115. text-align: center;
  116. line-height: 23px;
  117. text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  118. overflow: hidden;
  119. white-space: nowrap;
  120. text-overflow: ellipsis;
  121. }
  122. /* Heading Arrow Button */
  123. .mblArrowButton {
  124. position: relative;
  125. float: left;
  126. height: 25px;
  127. margin-right: 6px;
  128. }
  129. .mblArrowButtonHead {
  130. position: absolute;
  131. top: 5px;
  132. left: 9px;
  133. width: 19px;
  134. height: 16px;
  135. border-width: 1px;
  136. border-style: solid;
  137. border-color: #3F3E3E;
  138. -webkit-transform: scale(.8,1) rotate(45deg);
  139. background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090));
  140. }
  141. .mblArrowButtonBody {
  142. position: absolute;
  143. top: 0px;
  144. left: 19px;
  145. padding: 0px 10px 0px 3px;
  146. height: 23px;
  147. border-width: 1px 1px 1px 0px;
  148. border-style: inset;
  149. border-color: #3F3E3E;
  150. font-family: Helvetica;
  151. font-size: 13px;
  152. color: white;
  153. line-height: 23px;
  154. cursor: pointer;
  155. -webkit-border-radius: 5px;
  156. background-color: #ADADAD;
  157. background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090));
  158. -webkit-tap-highlight-color: transparent;
  159. }
  160. .mblArrowButtonNeck {
  161. position: absolute;
  162. top: 0px;
  163. left: 19px;
  164. width: 4px;
  165. height: 23px;
  166. border-width: 1px 0px 1px 0px;
  167. border-style: inset;
  168. border-color: #3F3E3E;
  169. background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090));
  170. }
  171. .mblArrowButtonSelected .mblArrowButtonHead {
  172. background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700));
  173. }
  174. .mblArrowButtonSelected .mblArrowButtonBody, .mblArrowButtonSelected .mblArrowButtonNeck {
  175. background-color: #FFC700;
  176. background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700));
  177. }
  178. /* ToolBarButton */
  179. .mblToolbarButton {
  180. float: left;
  181. position: relative;
  182. margin: 0px 3px;
  183. padding: 0px 10px;
  184. height: 23px;
  185. border: 1px inset #3F3E3E;
  186. font-family: Helvetica;
  187. font-size: 13px;
  188. font-weight: bold;
  189. color: white;
  190. line-height: 23px;
  191. text-align: center;
  192. cursor: pointer;
  193. -webkit-border-radius: 5px;
  194. -moz-border-radius: 5px;
  195. -webkit-tap-highlight-color: transparent;
  196. }
  197. /* dojox.mobile.TabBar */
  198. /*TODO: not optimized for android yet*/
  199. .mblTabBar {
  200. position: relative;
  201. height: 48px;
  202. width: 100%;
  203. margin: 0px;
  204. padding: 0px;
  205. background-color: #000000;
  206. background: -webkit-gradient(linear, left top, left bottom, from(#2D2D2D), to(#000000), color-stop(0.5, #141414), color-stop(0.5, #000000));
  207. border-top: 1px solid #000000;
  208. color: white;
  209. text-align: center;
  210. overflow: hidden;
  211. white-space: nowrap;
  212. }
  213. .mblTabBar .mblTabBarButton {
  214. position: relative;
  215. list-style-type: none;
  216. float: left;
  217. }
  218. /* dojox.mobile.TabBarButton */
  219. .mblTabBarButton {
  220. }
  221. .mblTabBarButtonAnchor {
  222. display: block;
  223. text-decoration: none;
  224. }
  225. .mblTabBarButtonDiv {
  226. position: relative;
  227. height: 34px;
  228. width: 29px;
  229. left: 50%;
  230. }
  231. .mblTabButton .mblTabBarButtonDiv {
  232. height: 40px;
  233. }
  234. .mblTabBarButtonDivInner {
  235. left: -50%;
  236. }
  237. .mblTabBarButtonIcon {
  238. position: absolute;
  239. left: 0px;
  240. top: 2px;
  241. }
  242. .mblTabBar .mblTabBarButton.mblTabButtonSelected {
  243. background-color: #404040;
  244. background: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424), color-stop(0.5, #353535), color-stop(0.5, #242424));
  245. -webkit-border-radius: 3px;
  246. -moz-border-radius: 3px;
  247. }
  248. .mblTabBarButtonTextBox {
  249. color: #979797;
  250. font-family: "Helvetica Neue", Helvetica;
  251. font-size: 11px;
  252. }
  253. .mblTabButtonSelected .mblTabBarButtonTextBox {
  254. color: white;
  255. }
  256. /* dojox.mobile.RoundRect */
  257. .mblRoundRect {
  258. margin: 7px 9px 16px;
  259. padding: 8px;
  260. border: 1px solid #ADAAAD;
  261. -webkit-border-radius: 8px;
  262. -moz-border-radius: 8px;
  263. color: white;
  264. background-color: black;
  265. }
  266. .mblRoundRect.mblShadow {
  267. -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  268. }
  269. /* dojox.mobile.EdgeToEdgeCategory */
  270. .mblEdgeToEdgeCategory {
  271. position: relative;
  272. height: 22px;
  273. margin: 0px;
  274. padding: 0px 10px;
  275. border-bottom: 1px solid #393439;
  276. background-color: #212021;
  277. font-family: Helvetica;
  278. font-size: 16px;
  279. color: white;
  280. line-height: 22px;
  281. text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  282. overflow: hidden;
  283. white-space: nowrap;
  284. text-overflow: ellipsis;
  285. }
  286. /* dojox.mobile.RoundRectCategory */
  287. .mblRoundRectCategory {
  288. color: white;
  289. margin: 18px 0px 0px 20px;
  290. font-family: Helvetica;
  291. font-size: 16px;
  292. overflow: hidden;
  293. white-space: nowrap;
  294. text-overflow: ellipsis;
  295. }
  296. /* dojox.mobile.RoundRectList */
  297. .mblRoundRectList {
  298. margin: 7px 9px 16px;
  299. padding: 0px;
  300. border: 1px solid #ADAAAD;
  301. -webkit-border-radius: 8px;
  302. -moz-border-radius: 8px;
  303. background-color: white;
  304. position: relative; /* IE needs this */
  305. }
  306. /* dojox.mobile.EdgeToEdgeList */
  307. .mblEdgeToEdgeList {
  308. padding: 0px;
  309. background-color: black;
  310. position: relative; /* IE needs this */
  311. margin: 0px; /* IE needs this */
  312. }
  313. /* dojox.mobile.ListItem */
  314. .mblListItem {
  315. list-style-type: none;
  316. height: 64px;
  317. border-bottom: solid 1px #313431;
  318. line-height: 64px;
  319. font-size: 21px;
  320. position: relative;
  321. color: white;
  322. background-color: black;
  323. padding-left: 7px;
  324. }
  325. .mblListItemIcon {
  326. position: absolute;
  327. top: 18px;
  328. }
  329. .mblListItem.mblVariableHeight {
  330. line-height: normal;
  331. height: auto;
  332. padding: 11px 6px 10px 6px;
  333. }
  334. .mblItemSelected {
  335. background-color: #FFC700;
  336. background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700));
  337. }
  338. .mblListItemTextBox {
  339. padding-right: 28px;
  340. }
  341. .mblListItemTextBoxSelected {
  342. background-color: #048BF4;
  343. }
  344. .mblRoundRectList .mblListItem:first-child {
  345. -webkit-border-top-left-radius: 8px;
  346. -webkit-border-top-right-radius: 8px;
  347. -moz-border-radius-topleft: 8px;
  348. -moz-border-radius-topright: 8px;
  349. }
  350. .mblRoundRectList .mblListItem:last-child {
  351. border-bottom-width: 0px;
  352. -webkit-border-bottom-left-radius: 8px;
  353. -webkit-border-bottom-right-radius: 8px;
  354. -moz-border-radius-bottomleft: 8px;
  355. -moz-border-radius-bottomright: 8px;
  356. }
  357. .mblEdgeToEdgeList .mblListItem:last-child {
  358. border-bottom-color: #313431;
  359. }
  360. .mblListItem a.mblListItemAnchor {
  361. background-position: 14px 17px;
  362. display: block;
  363. padding-left: 53px;
  364. text-decoration: none;
  365. -webkit-tap-highlight-color: transparent;
  366. }
  367. .mblListItem a.mblListItemAnchorNoIcon {
  368. padding-left: 14px;
  369. }
  370. .mblItemSelected a.mblListItemAnchor {
  371. color: black;
  372. }
  373. .mblListItem a.mblListItemAnchorHasRightButton {
  374. padding-right: 50px;
  375. }
  376. .mblListItem .mblArrow {
  377. position: absolute;
  378. top: 26px;
  379. right: 12px;
  380. width: 6px;
  381. height: 6px;
  382. font-size: 1px;
  383. -webkit-transform: rotate(45deg);
  384. border-width: 3px 3px 0px 0px;
  385. border-style: solid;
  386. border-color: #808080;
  387. }
  388. .mblItemSelected .mblArrow {
  389. border-color: white;
  390. }
  391. .mblVariableHeight div.mblArrow {
  392. top: 50%;
  393. margin-top: -4px;
  394. }
  395. .mblRightText {
  396. position: absolute;
  397. top: 20px;
  398. right: 30px;
  399. color: white;
  400. line-height: normal;
  401. }
  402. .mblListItem .mblRightButtonContainer {
  403. position: absolute;
  404. top: 50%;
  405. right: 12px;
  406. }
  407. .mblListItem .mblRightButton {
  408. position: absolute;
  409. top: -50%;
  410. }
  411. .mblListItemSubText {
  412. font-size: 14px;
  413. color: gray;
  414. }
  415. /* Switch */
  416. .mblSwitch {
  417. position: relative;
  418. width: 94px;
  419. height: 27px;
  420. overflow: hidden;
  421. }
  422. .mblItemSwitch {
  423. position: absolute;
  424. top: 18px;
  425. right: 12px;
  426. }
  427. .mblSwitchInner {
  428. position: absolute;
  429. top: 0px;
  430. height: 27px;
  431. }
  432. .mblSwitchAnimation .mblSwitchInner {
  433. -webkit-transition-property: left;
  434. -webkit-transition-duration: .3s;
  435. }
  436. .mblSwitchOn .mblSwitchInner {
  437. left: 0px;
  438. }
  439. .mblSwitchOff .mblSwitchInner {
  440. left: -53px;
  441. }
  442. .mblSwitchBg {
  443. position: absolute;
  444. top: 0px;
  445. height: 27px;
  446. border-width: 1px;
  447. border-style: inset;
  448. border-color: #9CACC0;
  449. font-family: Helvetica;
  450. font-size: 16px;
  451. font-weight: bold;
  452. line-height: 29px;
  453. -webkit-border-radius: 2px;
  454. -moz-border-radius: 2px;
  455. -webkit-box-sizing: border-box;
  456. -moz-box-sizing: border-box;
  457. -webkit-tap-highlight-color: transparent;
  458. }
  459. .mblSwitchBgLeft {
  460. left: 0px;
  461. width: 94px;
  462. color: white;
  463. background-color: #00D300;
  464. background: -webkit-gradient(linear, left top, left bottom, from(#00A200), to(#00D300), color-stop(0.2, #00BA00), color-stop(0.2, #00BA00));
  465. }
  466. .mblSwitchBgRight {
  467. left: 53px;
  468. width: 94px;
  469. color: #7F7F7F;
  470. background-color: #EEEEEE;
  471. background: -webkit-gradient(linear, left top, left bottom, from(#BDBEBD), to(#F7F3F7));
  472. }
  473. .mblSwitchKnob {
  474. position: absolute;
  475. top: 1px;
  476. left: 53px;
  477. width: 41px;
  478. height: 26px;
  479. font-size: 1px;
  480. border-width: 1px;
  481. border-style: solid;
  482. border-color: #EFEFEF #A5A5A5 #969696 #325E9E;
  483. line-height: 29px;
  484. background-color: #CCCCCC;
  485. background: -webkit-gradient(linear, left top, left bottom, from(#9C9A9C), to(#848284));
  486. -webkit-border-radius: 2px;
  487. -moz-border-radius: 2px;
  488. -webkit-box-sizing: border-box;
  489. -moz-box-sizing: border-box;
  490. }
  491. .mblSwitchText {
  492. position: relative;
  493. top: 0px;
  494. width: 53px;
  495. height: 27px;
  496. padding: 0px;
  497. text-align: center;
  498. }
  499. .mblSwitchTextLeft {
  500. left: 0px;
  501. }
  502. .mblSwitchTextRight {
  503. left: 40px;
  504. }
  505. /* Icon Container */
  506. .mblIconContainer {
  507. padding: 0px;
  508. margin: 20px 0px 0px 10px;
  509. padding: 0px 0px 40px 0px;
  510. }
  511. .mblIconItem {
  512. list-style-type: none;
  513. float: left;
  514. }
  515. .mblIconItemTerminator {
  516. list-style-type: none;
  517. height: 20px;
  518. clear: both;
  519. }
  520. .mblIconItemSub {
  521. list-style-type: none;
  522. margin-left: -10px;
  523. background-color: white;
  524. color: black;
  525. }
  526. .mblIconArea {
  527. font-family: Helvetica;
  528. font-size: 12px;
  529. height: 78px;
  530. width: 74px;
  531. text-align: center;
  532. margin-bottom: 10px;
  533. color: white;
  534. }
  535. .mblIconArea DIV {
  536. position: relative;
  537. height: 65px;
  538. }
  539. .mblIconArea IMG {
  540. position: absolute;
  541. top: 0px;
  542. left: 6px;
  543. }
  544. .mblContent {
  545. clear: both;
  546. padding-bottom: 20px;
  547. }
  548. table.mblClose {
  549. clear: both;
  550. cursor: pointer;
  551. }
  552. .mblVibrate{
  553. position: relative;
  554. -webkit-animation-duration: .5s;
  555. -webkit-animation-timing-function: ease-in-out;
  556. -webkit-animation-iteration-count: 20;
  557. -webkit-animation-name: vibrate;
  558. -webkit-transform: rotate(0deg);
  559. }
  560. @-webkit-keyframes vibrate{
  561. 0%{
  562. -webkit-transform: rotate(-2deg);
  563. bottom: -1px;
  564. left: -1px;
  565. }
  566. 25% {
  567. -webkit-transform: rotate(1deg);
  568. bottom: 2px;
  569. left: 1px;
  570. }
  571. 50% {
  572. -webkit-transform: rotate(-1deg);
  573. bottom: -2px;
  574. left: -1px;
  575. }
  576. 75% {
  577. -webkit-transform: rotate(2deg);
  578. bottom: 2px;
  579. left: 1px;
  580. }
  581. 100% {
  582. -webkit-transform: rotate(-2deg);
  583. bottom: -1px;
  584. left: -1px;
  585. }
  586. }
  587. .mblCloseContent{
  588. -webkit-animation-duration: .3s;
  589. -webkit-animation-timing-function: ease-in-out;
  590. -webkit-animation-name: shrink;
  591. -webkit-transform: scale(0.01);
  592. }
  593. .mblCloseContent.mblShrink0{
  594. -webkit-animation-name: shrink0;
  595. }
  596. .mblCloseContent.mblShrink1{
  597. -webkit-animation-name: shrink1;
  598. }
  599. .mblCloseContent.mblShrink2{
  600. -webkit-animation-name: shrink2;
  601. }
  602. .mblCloseContent.mblShrink3{
  603. -webkit-animation-name: shrink3;
  604. }
  605. @-webkit-keyframes shrink{
  606. from { -webkit-transform: scale(1); }
  607. to { -webkit-transform: scale(0.01); }
  608. }
  609. @-webkit-keyframes shrink0{
  610. from { -webkit-transform: scale(1); }
  611. to { -webkit-transform: translate(-40%,-70%) scale(0.01); }
  612. }
  613. @-webkit-keyframes shrink1{
  614. from { -webkit-transform: scale(1); }
  615. to { -webkit-transform: translate(-14%,-70%) scale(0.01); }
  616. }
  617. @-webkit-keyframes shrink2{
  618. from { -webkit-transform: scale(1); }
  619. to { -webkit-transform: translate(14%,-70%) scale(0.01); }
  620. }
  621. @-webkit-keyframes shrink3{
  622. from { -webkit-transform: scale(1); }
  623. to { -webkit-transform: translate(40%,-70%) scale(0.01); }
  624. }
  625. /* Icon Content Heading */
  626. .mblIconContentHeading {
  627. position: relative;
  628. clear: both;
  629. height: 25px;
  630. padding-left: 40px;
  631. margin-top: 0px;
  632. background: -webkit-gradient(linear, left top, left bottom, from(#E0E4E7), to(#B4BEC6), color-stop(0.5, #C4CCD2), color-stop(0.5, #BFC8CE));
  633. border-top: 1px solid #F1F3F4;
  634. border-bottom: 1px solid #717D85;
  635. font-family: Helvetica;
  636. font-size: 14px;
  637. color: white;
  638. line-height: 26px;
  639. text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  640. overflow: hidden;
  641. white-space: nowrap;
  642. text-overflow: ellipsis;
  643. }
  644. /* dojox.mobile.Button */
  645. .mblButton {
  646. padding: 0px 10px;
  647. height: 29px;
  648. border-width: 1px 1px 1px 1px;
  649. border-style: outset;
  650. color: white;
  651. font-family: Helvetica;
  652. font-size: 13px;
  653. line-height: 29px;
  654. -webkit-border-radius: 5px;
  655. -moz-border-radius: 5px;
  656. -webkit-tap-highlight-color: transparent;
  657. }
  658. .mblBlueButton {
  659. border-color: #9CACC0;
  660. background-color: #366EDF;
  661. background: -webkit-gradient(linear, left top, left bottom, from(#7A9DE9), to(#2362DD), color-stop(0.5, #366EDF), color-stop(0.5, #215FDC));
  662. -webkit-tap-highlight-color: transparent;
  663. }
  664. .mblBlueButtonSelected {
  665. background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
  666. }
  667. /* Tab Container */
  668. .mblTabContainer {
  669. }
  670. .mblTabButton {
  671. position: relative;
  672. float: left;
  673. list-style-type: none;
  674. width: 78px;
  675. text-align: center;
  676. height: 61px;
  677. margin-right: 2px;
  678. border-width: 0px 1px 0px 1px;
  679. border-style: solid;
  680. border-color: black #182018 black #393C39;
  681. font-family: Helvetica;
  682. font-size: 13px;
  683. color: white;
  684. background-color: #212421;
  685. background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100C10), color-stop(0.1, #313031));
  686. -webkit-tap-highlight-color: transparent;
  687. }
  688. .mblTabButtonSelected.mblTabButton {
  689. background-color: #8C8E8C;
  690. background: -webkit-gradient(linear, left top, left bottom, from(#A59EA5), to(#848284));
  691. }
  692. .mblTabButtonHighlighted.mblTabButton {
  693. background-color: #FFB600;
  694. background: -webkit-gradient(linear, left top, left bottom, from(#FFCB00), to(#FF9A00));
  695. }
  696. .mblTabButtonImgDiv {
  697. position: relative;
  698. margin-left: 24px;
  699. height: 40px;
  700. }
  701. .mblTabButton IMG {
  702. position: absolute;
  703. left: 0px;
  704. margin-top: 8px;
  705. }
  706. .mblTabPanelHeader {
  707. position: relative;
  708. height: 64px;
  709. margin: 0px;
  710. padding: 0px 0px 0px 0px;
  711. background-color: #000000;
  712. border-top: 1px solid #CDD5DF;
  713. border-bottom: 2px solid #949694;
  714. font-family: Helvetica;
  715. font-size: 20px;
  716. color: white;
  717. text-align: center;
  718. overflow: hidden;
  719. white-space: nowrap;
  720. text-overflow: ellipsis;
  721. }
  722. .mblTabPanelPane {
  723. }
  724. .mblTabPane {
  725. }
  726. /* Progress Indicator */
  727. .mblProgContainer {
  728. position: absolute;
  729. width: 36px;
  730. height: 36px;
  731. top: 180px;
  732. left: 50%;
  733. margin: -18px 0px 0px -18px;
  734. }
  735. .mblProg {
  736. position: absolute;
  737. left: 0px;
  738. top: 0px;
  739. width: 11px;
  740. font-size: 1px;
  741. height: 4px;
  742. overflow: hidden;
  743. -webkit-transform-origin: 0 2px;
  744. background-color: #C0C0C0;
  745. -webkit-border-radius: 2px;
  746. -moz-border-radius: 2px;
  747. }
  748. .mblProg0 {
  749. -webkit-transform: translate(18px,10px) rotate(-90deg);
  750. }
  751. .mblProg1 {
  752. -webkit-transform: translate(22px,11px) rotate(-60deg);
  753. }
  754. .mblProg2 {
  755. -webkit-transform: translate(25px,14px) rotate(-30deg);
  756. }
  757. .mblProg3 {
  758. -webkit-transform: translate(26px,18px) rotate(0deg);
  759. }
  760. .mblProg4 {
  761. -webkit-transform: translate(25px,22px) rotate(30deg);
  762. }
  763. .mblProg5 {
  764. -webkit-transform: translate(22px,25px) rotate(60deg);
  765. }
  766. .mblProg6 {
  767. -webkit-transform: translate(18px,26px) rotate(90deg);
  768. }
  769. .mblProg7 {
  770. -webkit-transform: translate(14px,25px) rotate(120deg);
  771. }
  772. .mblProg8 {
  773. -webkit-transform: translate(11px,22px) rotate(150deg);
  774. }
  775. .mblProg9 {
  776. -webkit-transform: translate(10px,18px) rotate(180deg);
  777. }
  778. .mblProg10 {
  779. -webkit-transform: translate(11px,14px) rotate(210deg);
  780. }
  781. .mblProg11 {
  782. -webkit-transform: translate(14px,11px) rotate(240deg);
  783. }
  784. /* Button Colors */
  785. .mblColorBlue {
  786. background-color: #366EDF;
  787. background: -webkit-gradient(linear, left top, left bottom, from(#7A9DE9), to(#2362DD), color-stop(0.5, #366EDF), color-stop(0.5, #215FDC));
  788. }
  789. /* Default Button Colors */
  790. .mblColorDefault { /* Gray */
  791. background-color: #ADADAD;
  792. background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#7F7F7F), color-stop(0.5, #ADADAD), color-stop(0.5, #909090));
  793. }
  794. .mblColorDefaultSel { /* Orange */
  795. background-color: #FFC700;
  796. background: -webkit-gradient(linear, left top, left bottom, from(#AD7500), to(#FFAA00), color-stop(0.06, #FFB200), color-stop(0.5, #FFC700));
  797. }