iphone.css 20 KB

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