1html.mobile, 2.mobile body { 3 width: 100%; 4 margin: 0; 5 padding: 0; 6} 7.mobile body { 8 overflow-x: hidden; 9 -webkit-text-size-adjust: none; 10 font-family: Helvetica; 11 font-size: 17px; 12 color: #000000; 13} 14.mblBackground { 15 background-color: #c0c0c0; 16} 17.mblColorBlue { 18 color: #ffffff; 19 background-color: #048bf4; 20 background-image: -webkit-gradient(linear, left top, left bottom, from(#48adfc), to(#048bf4)); 21 background-image: linear-gradient(to bottom, #48adfc 0%, #048bf4 100%); 22} 23.mblColorBlue45 { 24 background-image: -webkit-gradient(linear, left top, right bottom, from(#048bf4), to(#48adfc)); 25 background-image: linear-gradient(to right bottom, #048bf4 0%, #48adfc 100%); 26} 27.mblColorDefault { 28 color: #000000; 29 background-color: #a4a4a4; 30 background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#a4a4a4)); 31 background-image: linear-gradient(to bottom, #e2e2e2 0%, #a4a4a4 100%); 32} 33.mblColorDefault45 { 34 background-image: -webkit-gradient(linear, left top, right bottom, from(#e2e2e2), to(#a4a4a4)); 35 background-image: linear-gradient(to right bottom, #e2e2e2 0%, #a4a4a4 100%); 36} 37.mblColorDefaultSel { 38 color: #ffffff; 39 background-color: #999999; 40 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 41 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 42} 43.mblColorDefaultSel45 { 44 background-image: -webkit-gradient(linear, left top, right bottom, from(#bbbbbb), to(#999999)); 45 background-image: linear-gradient(to right bottom, #bbbbbb 0%, #999999 100%); 46} 47.mblSpriteIcon { 48 position: absolute; 49} 50.mblSpriteIconParent { 51 position: relative; 52 font-size: 1px; 53} 54.mblImageIcon { 55 vertical-align: top; 56} 57.unselectable { 58 -ms-user-select: none; 59 -webkit-user-select: none; 60 -moz-user-select: none; 61} 62.mblHeading { 63 position: relative; 64 margin: 0; 65 width: 100%; 66 overflow: hidden; 67 white-space: nowrap; 68 text-overflow: ellipsis; 69 z-index: 1; 70 padding: 0; 71 height: 42px; 72 font-family: Helvetica; 73 font-size: 20px; 74 font-weight: bold; 75 text-align: center; 76 line-height: 44px; 77 background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#dedede)); 78 background-image: linear-gradient(to bottom, #f6f6f6 0%, #dedede 100%); 79 border-top: 1px solid #c0c0c0; 80 border-bottom: 1px solid #c0c0c0; 81 color: #000000; 82 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 83} 84.mblHeading * { 85 z-index: 2; 86} 87.mblHeadingDivTitle { 88 position: absolute; 89 width: 100%; 90 display: none; 91 left: 0; 92 z-index: 1; 93} 94.mblHeadingCenterTitle .mblHeadingDivTitle { 95 display: block; 96} 97.mblHeadingCenterTitle .mblHeadingSpanTitle { 98 display: none; 99} 100.mblSlide { 101 -webkit-transition-property: none; 102 transition-property: none; 103 -webkit-transition-duration: 0s; 104 transition-duration: 0s; 105} 106.mblSlide.mblTransition { 107 -webkit-transition-property: -webkit-transform; 108 transition-property: transform; 109 -webkit-transition-duration: 0.3s; 110 transition-duration: 0.3s; 111} 112.mblSlide.mblOut.mblReverse.mblTransition, 113.mblSlide.mblIn { 114 -webkit-transform: translate3d(100%, 0px, 0px) !important; 115 transform: translate3d(100%, 0px, 0px) !important; 116} 117.mblSlide.mblOut.mblTransition, 118.mblSlide.mblIn.mblReverse { 119 -webkit-transform: translate3d(-100%, 0px, 0px) !important; 120 transform: translate3d(-100%, 0px, 0px) !important; 121} 122.mblSlide.mblOut, 123.mblSlide.mblIn.mblTransition { 124 -webkit-transform: translate3d(0%, 0px, 0px) !important; 125 transform: translate3d(0%, 0px, 0px) !important; 126} 127.dj_android.dj_tablet .mblSlide.mblTransition { 128 -webkit-transition-duration: 0.6s; 129 transition-duration: 0.6s; 130 -webkit-transition-timing-function: linear; 131 transition-timing-function: linear; 132} 133.mblFlip { 134 -webkit-transition-property: none; 135 transition-property: none; 136 -webkit-transition-duration: 0s; 137 transition-duration: 0s; 138} 139.mblFlip.mblTransition { 140 -webkit-transition-property: all; 141 transition-property: all; 142 -webkit-transition-duration: 0.2s; 143 transition-duration: 0.2s; 144 -webkit-transition-timing-function: linear; 145 transition-timing-function: linear; 146} 147.mblFlip.mblOut { 148 opacity: 1; 149 -webkit-transform: scale(1, 1) skew(0, 0) !important; 150 transform: scale(1, 1) skew(0, 0) !important; 151} 152.mblFlip.mblOut.mblTransition { 153 opacity: 0; 154 -webkit-transform: scale(0, 0.8) skew(0, 30deg) !important; 155 transform: scale(0, 0.8) skew(0, 30deg) !important; 156} 157.mblFlip.mblIn { 158 opacity: 0; 159 -webkit-transform: scale(0, 0.8) skew(0, -30deg) !important; 160 transform: scale(0, 0.8) skew(0, -30deg) !important; 161} 162.mblFlip.mblIn.mblTransition { 163 -webkit-transition-delay: 0.2s; 164 transition-delay: 0.2s; 165 opacity: 1; 166 -webkit-transform: scale(1, 1) skew(0, 0) !important; 167 transform: scale(1, 1) skew(0, 0) !important; 168} 169.dj_android.dj_tablet .mblFlip.mblTransition { 170 -webkit-transition-duration: 0.4s; 171 transition-duration: 0.4s; 172} 173.dj_android.dj_tablet .mblFlip.mblIn.mblTransition { 174 -webkit-transition-delay: 0.4s; 175 transition-delay: 0.4s; 176} 177.mblFade { 178 -webkit-transition-property: none; 179 transition-property: none; 180 -webkit-transition-duration: 0s; 181 transition-duration: 0s; 182} 183.mblFade.mblTransition { 184 -webkit-transition-property: opacity; 185 transition-property: opacity; 186 -webkit-transition-duration: 0.6s; 187 transition-duration: 0.6s; 188} 189.mblFade.mblOut { 190 opacity: 1; 191} 192.mblFade.mblOut.mblTransition { 193 -webkit-transition-timing-function: ease-out; 194 transition-timing-function: ease-out; 195 opacity: 0; 196} 197.mblFade.mblIn { 198 opacity: 0; 199} 200.mblFade.mblIn.mblTransition { 201 -webkit-transition-timing-function: ease-in; 202 transition-timing-function: ease-in; 203 opacity: 1; 204} 205.mblView { 206 position: relative; 207 top: 0px; 208 left: 0px; 209 width: 100%; 210 color: #000000; 211} 212.mblView.mblIn { 213 position: absolute; 214} 215.mblFixedHeaderBar { 216 z-index: 1; 217} 218.mblFixedBottomBar { 219 position: absolute !important; 220 width: 100%; 221 z-index: 1; 222} 223.mblToolBarButton { 224 display: inline-block; 225 position: relative; 226 cursor: pointer; 227 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 228 margin: 6px; 229 padding: 0 10px; 230 height: 29px; 231 line-height: 29px; 232 text-align: center; 233 font-family: Helvetica; 234 font-size: 13px; 235 font-weight: bold; 236 vertical-align: middle; 237 text-shadow: none; 238} 239.mblToolBarButtonHasIcon, 240.mblToolBarButtonLightIcon { 241 padding: 0; 242} 243.mblHeading .mblToolBarButton { 244 float: left; 245} 246.mblHeading span.mblToolBarButtonLightIcon { 247 padding: 0; 248} 249.mblToolBarButtonHasLeftArrow { 250 padding-right: 0; 251 padding-left: 10px; 252} 253.mblToolBarButtonHasRightArrow { 254 padding-left: 0; 255 padding-right: 10px; 256} 257.mblToolBarButtonArrow { 258 position: absolute; 259 top: 5px; 260 width: 20px; 261 height: 19px; 262 border-radius: 1px; 263 -webkit-transform: scale(0.7, 1.05) rotate(45deg); 264 transform: scale(0.7, 1.05) rotate(45deg); 265 border: 1px solid #9b9b9b; 266 border-right-color: #767676; 267 border-bottom-color: #767676; 268} 269.mblToolBarButtonHasLeftArrow .mblToolBarButtonArrow { 270 left: -1px; 271} 272.mblToolBarButtonHasRightArrow .mblToolBarButtonArrow { 273 right: -1px; 274} 275.mblToolBarButtonBody { 276 display: inline-block; 277 position: relative; 278 overflow: hidden; 279 border-radius: 0; 280 border: 1px solid #9b9b9b; 281 border-bottom-color: #767676; 282 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 283} 284.mblToolBarButton .mblToolBarButtonBody { 285 width: 100%; 286} 287.mblToolBarButtonBody table { 288 margin: 0 auto; 289} 290.mblToolBarButtonHasLeftArrow .mblToolBarButtonBody { 291 border-left-width: 0; 292 border-top-left-radius: 0; 293 border-bottom-left-radius: 0; 294} 295.mblToolBarButtonHasRightArrow .mblToolBarButtonBody { 296 border-right-width: 0; 297 border-top-right-radius: 0; 298 border-bottom-right-radius: 0; 299} 300.mblToolBarButtonText .mblToolBarButtonIcon { 301 padding-left: 10px; 302} 303.mblToolBarButtonText .mblToolBarButtonLabel { 304 padding-right: 10px; 305 height: 29px; 306} 307.mblToolBarButtonHasLeftArrow .mblToolBarButtonIcon { 308 padding-left: 4px; 309} 310.mblToolBarButtonHasRightArrow .mblToolBarButtonLabel { 311 padding-right: 4px; 312} 313.mblToolBarButtonIcon > div { 314 height: 29px; 315} 316.mblRoundRect { 317 margin: 7px 9px 16px; 318 padding: 8px; 319 border: 1px solid #c0c0c0; 320 border-radius: 8px; 321 background-color: #ffffff; 322 color: #000000; 323} 324.mblRoundRect.mblShadow { 325 -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 326 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 327} 328.mblEdgeToEdgeCategory { 329 position: relative; 330 margin: 0; 331 padding: 0 10px; 332 overflow: hidden; 333 font-family: Helvetica; 334 font-size: 16px; 335 font-weight: bold; 336 text-overflow: ellipsis; 337 white-space: nowrap; 338 height: 22px; 339 background-color: #dedede; 340 background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#dedede)); 341 background-image: linear-gradient(to bottom, #f6f6f6 0%, #dedede 100%); 342 border-bottom: 1px solid #c0c0c0; 343 color: #000000; 344 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 345 line-height: 22px; 346} 347.mblRoundRectCategory { 348 margin: 18px 0 0 20px; 349 padding: 0; 350 font-family: Helvetica; 351 font-size: 16px; 352 white-space: nowrap; 353 text-overflow: ellipsis; 354 overflow: hidden; 355 color: #000000; 356} 357.mblRoundRectList { 358 margin: 7px 9px 16px; 359 padding: 0; 360 border: 1px solid #c0c0c0; 361 border-radius: 8px; 362 background-color: #ffffff; 363} 364.mblRoundRectList .mblListItem:first-child, 365.mblRoundRectList .mblEdgeToEdgeCategory:first-child { 366 border-top-left-radius: 8px; 367 border-top-right-radius: 8px; 368} 369.mblRoundRectList .mblListItem:last-child, 370.mblRoundRectList .mblEdgeToEdgeCategory:last-child { 371 border-bottom-width: 0; 372 border-bottom-left-radius: 8px; 373 border-bottom-right-radius: 8px; 374} 375.mblEdgeToEdgeList { 376 margin: 0; 377 padding: 0; 378 background-color: #000000; 379} 380.mblEdgeToEdgeList .mblListItem:last-child { 381 border-bottom-color: #c0c0c0; 382} 383.mblDomButtonGrayArrow, 384.mblDomButtonArrow { 385 position: relative; 386 width: 20px; 387 height: 29px; 388} 389.mblDomButtonGrayArrow > div, 390.mblDomButtonArrow > div { 391 position: absolute; 392 top: 10px; 393 left: 6px; 394 width: 6px; 395 height: 6px; 396 font-size: 1px; 397 -webkit-transform: rotate(45deg); 398 transform: rotate(45deg); 399 border-width: 3px 3px 0px 0px; 400 border-style: solid; 401 border-color: #808080; 402} 403.mblDomButtonDarkBlueCheck, 404.mblDomButtonCheck { 405 position: relative; 406 width: 20px; 407 height: 29px; 408} 409.mblDomButtonDarkBlueCheck > div, 410.mblDomButtonCheck > div { 411 position: absolute; 412 left: 0px; 413 top: 8px; 414 width: 16px; 415 height: 6px; 416 font-size: 1px; 417 -webkit-transform: scaleX(0.7) rotate(135deg); 418 transform: scaleX(0.7) rotate(135deg); 419 border-width: 3px 4px 0px 0px; 420 border-style: solid; 421 border-color: #314e84; 422} 423.mblListItem { 424 position: relative; 425 overflow: hidden; 426 427 padding: 0 8px; 428 height: 43px; 429 list-style-type: none; 430 line-height: 43px; 431 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 432 border-bottom: 1px solid #c0c0c0; 433 background-color: #ffffff; 434 color: #000000; 435 font-weight: bold; 436} 437.mblListItem.mblVariableHeight { 438 padding: 11px 8px; 439 height: auto; 440 line-height: normal; 441} 442.mblListItemSelected { 443 color: #ffffff; 444 background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#dedede)); 445 background-image: linear-gradient(to bottom, #f6f6f6 0%, #dedede 100%); 446} 447.mblListItemSelected .mblDomButton div { 448 border-color: white; 449} 450.mblListItemLabelSelected { 451 background-color: #ffffff; 452} 453.mblListItemChecked { 454 color: #404040; 455} 456.mblListItemChecked .mblListItemRightIcon { 457 visibility: visible; 458} 459.mblListItemChecked .mblListItemUncheckIcon { 460 position: absolute; 461 visibility: hidden; 462} 463.mblListItemUnchecked .mblListItemRightIcon { 464 visibility: hidden; 465} 466.mblListItemUnchecked .mblListItemUncheckIcon { 467 visibility: visible; 468} 469.mblListItemDeleteIcon { 470 position: relative; 471 float: left; 472 line-height: normal; 473 margin-top: 7px; 474 margin-bottom: -7px; 475 margin-right: 11px; 476} 477.mblListItemIcon { 478 position: relative; 479 float: left; 480 line-height: normal; 481 margin-top: 7px; 482 margin-bottom: -7px; 483 margin-right: 11px; 484} 485.mblListItemRightIcon, 486.mblListItemRightIcon2, 487.mblListItemUncheckIcon { 488 position: relative; 489 float: right; 490 line-height: normal; 491 margin-top: 7px; 492 margin-bottom: -7px; 493} 494.mblListItemRightText { 495 position: relative; 496 float: right; 497 line-height: normal; 498 margin-right: 4px; 499 color: #000000; 500 margin-top: 12px; 501} 502.mblListItemLabel { 503 position: relative; 504 overflow: hidden; 505 white-space: nowrap; 506 text-overflow: ellipsis; 507 height: 100%; 508} 509.mblVariableHeight .mblListItemLabel { 510 white-space: normal; 511} 512.mblListItemSubText { 513 font-size: 14px; 514 color: #2d2d2d; 515} 516.mblListItemLayoutLeft { 517 position: relative; 518 float: left; 519 margin-right: 11px; 520} 521.mblListItemLayoutCenter { 522 position: absolute; 523 width: 100%; 524 text-align: center; 525} 526.mblListItemLayoutRight { 527 position: relative; 528 float: right; 529} 530.mblListItemFloat { 531 position: absolute; 532 border: 1px solid gray; 533 opacity: 0.5; 534 -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 535 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 536 border-radius: 0px !important; 537 -moz-border-radius: 0px !important; 538} 539.mblSwitch { 540 margin: 0; 541 position: relative; 542 display: inline-block; 543 height: 27px; 544 line-height: 29px; 545 overflow: hidden; 546 text-align: left; 547 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 548} 549.mblListItem .mblSwitch { 550 position: absolute; 551 right: 12px; 552 top: 8px; 553} 554.mblSwitchInner { 555 position: absolute; 556 top: 0; 557 height: 27px; 558} 559.mblSwitchAnimation .mblSwitchInner { 560 -webkit-transition-property: left; 561 transition-property: left; 562 -webkit-transition-duration: 0.1s; 563 transition-duration: 0.1s; 564} 565.mblSwitchOn .mblSwitchInner { 566 left: 0; 567} 568.mblSwitchBg { 569 position: absolute; 570 top: 0; 571 width: 94px; 572 height: 27px; 573 font-family: Helvetica; 574 font-size: 16px; 575 font-weight: bold; 576 line-height: 29px; 577 -webkit-box-sizing: border-box; 578 box-sizing: border-box; 579 border: 1px solid #c0c0c0; 580 border-bottom-color: #9b9b9b; 581} 582.mblSwitchBgLeft { 583 left: 0; 584 color: white; 585 background-color: #3f84eb; 586 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999)); 587 background-image: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%); 588} 589.mblSwitchBgRight { 590 color: #7f7f7f; 591 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); 592 background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%); 593} 594.mblSwitchKnob { 595 position: absolute; 596 top: 0; 597 height: 27px; 598 background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#a4a4a4)); 599 background-image: linear-gradient(to bottom, #e2e2e2 0%, #a4a4a4 100%); 600 font-size: 1px; 601 -webkit-box-sizing: border-box; 602 box-sizing: border-box; 603 border: 1px solid #9b9b9b; 604 border-bottom-color: #767676; 605} 606.mblSwitchText { 607 position: relative; 608 top: 0; 609 width: 53px; 610 height: 27px; 611 padding: 0; 612 line-height: 28px; 613 text-align: center; 614} 615.mblSwitchTextLeft { 616 left: 0; 617} 618.mblSwitchTextRight { 619 left: 40px; 620} 621.mblSwSquareShape { 622 width: 94px; 623} 624.mblSwSquareShape.mblSwitchOff .mblSwitchInner { 625 left: -53px; 626} 627.mblSwSquareShape .mblSwitchBg { 628 border-radius: 2px; 629} 630.mblSwSquareShape .mblSwitchBgRight { 631 left: 53px; 632} 633.mblSwSquareShape .mblSwitchKnob { 634 left: 53px; 635 width: 41px; 636 border-radius: 2px; 637} 638.mblSwSquareShape .mblSwitchText { 639 width: 53px; 640} 641.mblSwSquareShape .mblSwitchTextRight { 642 left: 40px; 643} 644.mblSwRoundShape1 { 645 width: 77px; 646} 647.mblSwRoundShape1.mblSwitchOff .mblSwitchInner { 648 left: -50px; 649} 650.mblSwRoundShape1 .mblSwitchBg { 651 width: 77px; 652 border-radius: 14px; 653} 654.mblSwRoundShape1 .mblSwitchBgRight { 655 left: 50px; 656} 657.mblSwRoundShape1 .mblSwitchKnob { 658 left: 50px; 659 width: 27px; 660 border-radius: 13px; 661} 662.mblSwRoundShape1 .mblSwitchText { 663 width: 50px; 664} 665.mblSwRoundShape1 .mblSwitchTextRight { 666 left: 26px; 667} 668.mblSwRoundShape2 { 669 width: 94px; 670} 671.mblSwRoundShape2.mblSwitchOff .mblSwitchInner { 672 left: -51px; 673} 674.mblSwRoundShape2 .mblSwitchBg { 675 border-radius: 14px; 676} 677.mblSwRoundShape2 .mblSwitchBgRight { 678 left: 51px; 679} 680.mblSwRoundShape2 .mblSwitchKnob { 681 left: 51px; 682 width: 43px; 683 border-radius: 13px; 684} 685.mblSwRoundShape2 .mblSwitchText { 686 width: 51px; 687} 688.mblSwRoundShape2 .mblSwitchTextRight { 689 left: 42px; 690} 691.mblSwArcShape1 { 692 width: 77px; 693} 694.mblSwArcShape1.mblSwitchOff .mblSwitchInner { 695 left: -50px; 696} 697.mblSwArcShape1 .mblSwitchBg { 698 width: 77px; 699 border-radius: 5px/14px; 700} 701.mblSwArcShape1 .mblSwitchBgRight { 702 left: 50px; 703} 704.mblSwArcShape1 .mblSwitchKnob { 705 left: 50px; 706 width: 27px; 707 border-radius: 5px/13px; 708} 709.mblSwArcShape1 .mblSwitchText { 710 width: 50px; 711} 712.mblSwArcShape1 .mblSwitchTextRight { 713 left: 26px; 714} 715.mblSwArcShape2 { 716 width: 94px; 717} 718.mblSwArcShape2.mblSwitchOff .mblSwitchInner { 719 left: -51px; 720} 721.mblSwArcShape2 .mblSwitchBg { 722 border-radius: 5px/14px; 723} 724.mblSwArcShape2 .mblSwitchBgRight { 725 left: 51px; 726} 727.mblSwArcShape2 .mblSwitchKnob { 728 left: 51px; 729 width: 43px; 730 border-radius: 5px/13px; 731} 732.mblSwArcShape2 .mblSwitchText { 733 width: 51px; 734} 735.mblSwArcShape2 .mblSwitchTextRight { 736 left: 42px; 737} 738.mblSwDefaultShape { 739 width: 94px; 740} 741.mblSwDefaultShape.mblSwitchOff .mblSwitchInner { 742 left: -53px; 743} 744.mblSwDefaultShape .mblSwitchBg { 745 border-radius: 2px; 746} 747.mblSwDefaultShape .mblSwitchBgRight { 748 left: 53px; 749} 750.mblSwDefaultShape .mblSwitchKnob { 751 left: 53px; 752 width: 41px; 753 border-radius: 2px; 754} 755.mblSwDefaultShape .mblSwitchText { 756 width: 53px; 757} 758.mblSwDefaultShape .mblSwitchTextRight { 759 left: 40px; 760} 761.mblProgressIndicator { 762 position: relative; 763 top: 0px; 764} 765.mblHeading .mblProgressIndicator { 766 margin: 5px; 767 float: left; 768} 769.mblProgContainer { 770 position: absolute; 771 width: 100%; 772 height: 100%; 773} 774.mblProgressIndicatorCenter { 775 position: absolute; 776 top: 180px; 777 left: 50%; 778} 779.mblProgressIndicatorCenter .mblProgContainer { 780 left: -50%; 781 -webkit-transform-origin: 50% 0; 782 transform-origin: 50% 0; 783} 784.mblProg { 785 position: absolute; 786 left: 2px; 787 top: 0px; 788 width: 11px; 789 font-size: 1px; 790 height: 4px; 791 overflow: hidden; 792 -webkit-transform-origin: 0 2px; 793 transform-origin: 0 2px; 794 background-color: #c0c0c0; 795 border-radius: 2px; 796} 797.mblProg0 { 798 -webkit-transform: translate(18px, 10px) rotate(-90.1deg); 799 transform: translate(18px, 10px) rotate(-90.1deg); 800} 801.mblProg1 { 802 -webkit-transform: translate(22px, 11px) rotate(-60deg); 803 transform: translate(22px, 11px) rotate(-60deg); 804} 805.mblProg2 { 806 -webkit-transform: translate(25px, 14px) rotate(-30deg); 807 transform: translate(25px, 14px) rotate(-30deg); 808} 809.mblProg3 { 810 -webkit-transform: translate(26px, 18px) rotate(0deg); 811 transform: translate(26px, 18px) rotate(0deg); 812} 813.mblProg4 { 814 -webkit-transform: translate(25px, 22px) rotate(30deg); 815 transform: translate(25px, 22px) rotate(30deg); 816} 817.mblProg5 { 818 -webkit-transform: translate(22px, 25px) rotate(60deg); 819 transform: translate(22px, 25px) rotate(60deg); 820} 821.mblProg6 { 822 -webkit-transform: translate(18px, 26px) rotate(90.1deg); 823 transform: translate(18px, 26px) rotate(90.1deg); 824} 825.mblProg7 { 826 -webkit-transform: translate(14px, 25px) rotate(120deg); 827 transform: translate(14px, 25px) rotate(120deg); 828} 829.mblProg8 { 830 -webkit-transform: translate(11px, 22px) rotate(150deg); 831 transform: translate(11px, 22px) rotate(150deg); 832} 833.mblProg9 { 834 -webkit-transform: translate(10px, 18px) rotate(180deg); 835 transform: translate(10px, 18px) rotate(180deg); 836} 837.mblProg10 { 838 -webkit-transform: translate(11px, 14px) rotate(210deg); 839 transform: translate(11px, 14px) rotate(210deg); 840} 841.mblProg11 { 842 -webkit-transform: translate(14px, 11px) rotate(240deg); 843 transform: translate(14px, 11px) rotate(240deg); 844} 845.mblProg0Color { 846 background-color: #c0c0c0; 847} 848.mblProg1Color { 849 background-color: #c0c0c0; 850} 851.mblProg2Color { 852 background-color: #c0c0c0; 853} 854.mblProg3Color { 855 background-color: #c0c0c0; 856} 857.mblProg4Color { 858 background-color: #c0c0c0; 859} 860.mblProg5Color { 861 background-color: #c0c0c0; 862} 863.mblProg6Color { 864 background-color: #b8b9b8; 865} 866.mblProg7Color { 867 background-color: #aeafae; 868} 869.mblProg8Color { 870 background-color: #a4a5a4; 871} 872.mblProg9Color { 873 background-color: #9a9a9a; 874} 875.mblProg10Color { 876 background-color: #8e8e8e; 877} 878.mblProg11Color { 879 background-color: #838383; 880} 881.mblProgWhite .mblProg0Color { 882 background-color: #adb9c9; 883} 884.mblProgWhite .mblProg1Color { 885 background-color: #adb9c9; 886} 887.mblProgWhite .mblProg2Color { 888 background-color: #adb9c9; 889} 890.mblProgWhite .mblProg3Color { 891 background-color: #adb9c9; 892} 893.mblProgWhite .mblProg4Color { 894 background-color: #adb9c9; 895} 896.mblProgWhite .mblProg5Color { 897 background-color: #adb9c9; 898} 899.mblProgWhite .mblProg6Color { 900 background-color: #acb9cb; 901} 902.mblProgWhite .mblProg7Color { 903 background-color: #b7c2d2; 904} 905.mblProgWhite .mblProg8Color { 906 background-color: #c4cdda; 907} 908.mblProgWhite .mblProg9Color { 909 background-color: #d1d8e2; 910} 911.mblProgWhite .mblProg10Color { 912 background-color: #dee3ea; 913} 914.mblProgWhite .mblProg11Color { 915 background-color: #eceff3; 916} 917