src/themes/tizen/common/jquery.mobile.theme.less

   1 /*!
   2 * jQuery Mobile Framework
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
   5 */
   6
   7 @import "config.less";
   8 /* Swatches */
   9
  10 /* S
  11 -----------------------------------------------------------------------------------------------------------*/
  12
  13 /***************************************************************************
  14                     Header / Footer
  15                     NavigationBar
  16 ***************************************************************************/
  17 .ui-bar-s {
  18         border: none;
  19         .LESSHeaderFooterBackground;
  20         color: @color_bar_title_text;
  21         font-family: Helvetica, Arial, sans-serif;
  22         font-weight: bold;
  23         font-size : 36 * @unit_base;
  24
  25         .ui-link-inherit {
  26                 color: @color_bar_title_text;
  27         }
  28
  29         .ui-btn.ui-btn-back.ui-btn-down-s {
  30                 .ui-btn-inner {
  31                         background : @color_bar_back_btn_press;
  32                 }
  33         }
  34
  35         > .ui-btn.ui-btn-footer-right{
  36                 position : absolute;
  37                 font-size : 32 * @unit_base;
  38
  39                 width : 104 * @unit_base;
  40                 height : 74 * @unit_base;
  41                 top : 20 * @unit_base;
  42
  43                 border-style : none;
  44                 border-width : 0px;
  45         }
  46
  47         > .ui-btn.ui-btn-back {
  48                 position : absolute;
  49                 font-size : 32 * @unit_base;
  50                 border-style : none;
  51                 border-width : 0px;
  52                 .LESSbtn-back;
  53         }
  54
  55         > .ui-btn.ui-btn-footer-right {
  56                 left : 10 * @unit_base;
  57         }
  58
  59         .ui-btn.ui-btn-footer-right .ui-btn-inner {
  60                 padding : 0;
  61
  62                 width : 104 * @unit_base;
  63                 height : 74 * @unit_base;
  64         }
  65
  66         .ui-btn.ui-btn-back .ui-btn-inner {
  67                 padding : 0;
  68
  69                 .LESSbtn-back-inner;
  70         }
  71
  72
  73
  74         .ui-btn.ui-btn-footer-right.ui-btn-down-s{
  75                 .ui-btn-inner {
  76                         background : @color_bar_btn_press;
  77                 }
  78         }
  79         .ui-btn.ui-btn-footer-right{
  80                 .ui-btn-inner {
  81                         .ui-btn-text {
  82                                 line-height : 74  * @unit_base;
  83                         }
  84                 }
  85         }
  86
  87         .ui-field-contain {
  88                 margin-left : auto;
  89                 margin-right : auto;
  90                 height : 74  * @unit_base;
  91
  92                 font-size : 28 * @unit_base;
  93
  94                 .ui-extended-controlgroup {
  95                         position : absolute;
  96                         display : inline;
  97
  98                         margin-top : 0 * @unit_base;
  99                         margin-bottom : 0 * @unit_base;
 100
 101                         label {
 102                                 .LESSextended-controlgroup-border;
 103                         }
 104
 105                         .ui-radio {
 106                                 height : 74 * @unit_base;
 107                                 .ui-btn {
 108                                         width : 100%;
 109                                 }
 110
 111                                 .ui-btn-inner {
 112                                         .ui-btn-text {
 113                                                 text-align : center;
 114                                                 font-weight : bold;
 115                                         }
 116         }
 117
 118                                 .ui-radio-off {
 119                                         background: @color_bar_seg_btn_normal;
 120                                         .ui-btn-text{
 121                                                 color : @color_bar_seg_text_normal;
 122                                         }
 123                                 }
 124                                 .ui-radio-on,
 125                                 .ui-radio-off.ui-btn-hover-s.ui-btn-down-s{
 126                                         background : @color_bar_seg_btn_press;
 127                                         .ui-btn-text{
 128                                                 color : @color_bar_seg_text_press;
 129                                         }
 130                                 }
 131                         }
 132                 }
 133                 .ui-title-extended-controlgroup {
 134                         top : 5  * @unit_base; // scale change
 135                 }
 136                 .ui-footer-extended-controlgroup {
 137                         .ui-btn-inner {
 138                                 line-height : 74  * @unit_base;
 139                                 padding : 0  * @unit_base;
 140                         }
 141                 }
 142         }
 143
 144         .ui-title-extended-controlgroup-4btn {
 145                 width : @style-title-extended-4btn-width;
 146                 .ui-radio {
 147                         width : @style-title-extended-4btn-radio-width;
 148                 }
 149         }
 150         .ui-title-extended-controlgroup-3btn {
 151                 width : @style-title-extended-3btn-width;
 152                 .ui-radio {
 153                         width : @style-title-extended-3btn-radio-width;
 154                 }
 155         }
 156         .ui-title-extended-controlgroup-2btn {
 157                 width : @style-title-extended-2btn-width;
 158                 .ui-radio {
 159                         width : @style-title-extended-2btn-radio-width;
 160                 }
 161         }
 162
 163         .ui-footer-extended-controlgroup-4btn {
 164                 width : 682 * @unit_base;
 165                 .ui-radio {
 166                         width : 170 * @unit_base;
 167                 }
 168         }
 169         .ui-footer-extended-controlgroup-3btn {
 170                 width : 432 * @unit_base;
 171                 .ui-radio {
 172                         width : 143 * @unit_base;
 173                 }
 174         }
 175         .ui-footer-extended-controlgroup-2btn {
 176                 width : 328 * @unit_base;
 177                 .ui-radio {
 178                         width : 163 * @unit_base;
 179                 }
 180         }
 181 }
 182
 183 .ui-header.ui-bar-s{
 184         position : fixed;
 185         top : 0px;
 186         .LESSColorBarTitleBackground;
 187
 188         min-height : 100 * @unit_base;
 189
 190         img {
 191                 display: inline-block;
 192                 height: 32 * @unit_base;
 193                 width: 32 * @unit_base;
 194                 margin-left: 16 * @unit_base;
 195                 //margin-right: 16 * @unit_base; /* Title's left margin covers this. */
 196                 //vertical-align: middle;
 197         }
 198
 199         .ui-title {
 200                 display: inline-block;
 201                 color : @color_bar_title_text;
 202                 min-height: @style-title-min-height;
 203                 font-size : @style-title-font-size;
 204                 text-overflow: ellipsis;
 205                 overflow: hidden;
 206                 white-space: nowrap;
 207                 outline: 0 !important;
 208
 209                 .LESStitle-diff-style; /* different title style */
 210         }
 211
 212         .ui-btn{
 213                 font-size : 28 * @unit_base;
 214                 height : 74 * @unit_base;
 215         }
 216
 217         .ui-btn.ui-btn-left,
 218         .ui-btn.ui-btn-right {
 219                 width : 114 * @unit_base;
 220         }
 221
 222         > .ui-btn{
 223                 position : absolute;
 224                 top : 20 * @unit_base;
 225                 margin-top : 0px;
 226                 font-size : 28 * @unit_base;
 227                 height : 60 * @unit_base;
 228
 229                 background: none;
 230                 color   : @color_bar_title_text;
 231
 232
 233                 border-left-style: solid;
 234                 border-left-width : 1px;
 235                 border-left-color : @color_bar_title_btn_border;
 236
 237                 font-weight : bold;
 238                 .LESSborder-radius-all(0px);
 239                 span.ui-btn-inner {
 240                         padding-top : 13 * @unit_base;
 241                         padding-bottom : 13 * @unit_base;
 242                 }
 243                 span.ui-btn-inner.ui-btn-icon-only {
 244                         padding-top : 0 * @unit_base;
 245                         padding-bottom : 0 * @unit_base;
 246                 }
 247         }
 248
 249         > .ui-btn.ui-btn-right:nth-child(2) {
 250                 right : 0px;
 251         }
 252
 253         > .ui-btn.ui-btn-right:nth-child(3) {
 254                 right : 118 * @unit_base;
 255         }
 256
 257         > .ui-btn.ui-btn-right:nth-child(4) {
 258                 right : 236 * @unit_base;
 259         }
 260
 261         > .ui-btn.ui-btn-down-s {
 262                 background : @color_bar_btn_press;
 263                 color : @color_bar_title_text;
 264         }
 265
 266         > img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
 267                 right : 0px;
 268         }
 269
 270         > img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
 271                 right : 118 * @unit_base;
 272         }
 273
 274         > img + h1 + a.ui-btn.ui-btn-right:nth-child(5) {
 275                 right : 236 * @unit_base;
 276         }
 277 }
 278
 279 .ui-header.ui-bar-s.ui-title-extended-height {
 280         height : 136  * @unit_base;
 281
 282         a {
 283                 top : 50  * @unit_base;
 284         }
 285
 286         .ui-title {
 287                 font-size : 28  * @unit_base;
 288                 top : 0  * @unit_base;
 289
 290                 padding-top : 11 * @unit_base;
 291                 margin-top : 0 * @unit_base;
 292                 margin-bottom : 0 * @unit_base;
 293         }
 294
 295         .ui-title-extended-segment-style {
 296                 left : 0 * @unit_base;
 297                 margin-top : 0 * @unit_base;
 298                 top : @style-title-extended-margin; // scale change
 299         }
 300 }
 301
 302 .ui-header.ui-bar-s     .ui-btn.ui-btn-back .ui-btn-inner {
 303         border-style : none;
 304         border-width : 0px;
 305 }
 306
 307 .ui-header.ui-bar-s.ui-title-controlbar-height,
 308 .ui-footer.ui-bar-s {
 309         height : 114 * @unit_base;
 310 }
 311
 312 .ui-footer.ui-bar-s.ui-footer-fixed {
 313         background : @color_bar_footer_bg;
 314
 315         height : 114 * @unit_base;
 316         .ui-title{
 317                 font-size : 32 * @unit_base;
 318         }
 319 }
 320 .ui-footer.ui-bar-s .ui-title-extended-controlgroup-4btn {
 321         margin-top : 20 * @unit_base;
 322 }
 323
 324 .ui-footer.ui-bar-s {
 325         > .ui-btn {
 326                 background-color : @color_bar_btn_bg;
 327                 .LESSback-btn-background;
 328         }
 329
 330         > .ui-btn.ui-btn-down-s {
 331                 .ui-btn-inner {
 332                         background : @color_bar_back_btn_press;
 333                 }
 334         }
 335
 336         > .ui-btn-back {
 337                 background-color : @color_bar_back_btn_bg;
 338                 .LESSback-btn-background;
 339         }
 340 }
 341
 342 /***************************************************************************
 343                     Header / Footer
 344                     NavigationBar
 345 ***************************************************************************/
 346 /***************************************************************************
 347                     Content Top calculate
 348 ***************************************************************************/
 349 .ui-title-content-normal-height,
 350 .ui-title-content-option-header-collapsed-1line-height  {
 351         position : relative;
 352         top : 100  * @unit_base;
 353 }
 354
 355 .ui-title-content-no-height {
 356         position : relative;
 357         top : 0  * @unit_base;
 358 }
 359
 360 .ui-title-content-extended-height {
 361         position : relative;
 362         top : 136  * @unit_base;
 363 }
 364
 365 .ui-title-content-option-header-expanded-1line-height {
 366         position : relative;
 367         top : 195  * @unit_base;
 368 }
 369
 370 .ui-title-content-search {
 371         position : relative;
 372         top : 206  * @unit_base;
 373 }
 374
 375 .ui-title-content-optionheader-search {
 376         position : relative;
 377         top : 219  * @unit_base;
 378 }
 379
 380 .ui-title-content-controlbar-height {
 381         position : relative;
 382         top : 115  * @unit_base;
 383 }
 384 /***************************************************************************
 385                     Content Top calculate
 386 ***************************************************************************/
 387
 388 // NOTE: This class is applied to almost all JQM widgets!
 389 .ui-body-s {
 390         border: 1px solid #2a2a2a;
 391         background:                     @color_bg;
 392         color:                                  @color_text;
 393         font-weight: normal;
 394
 395         font-family: Helvetica, Arial, sans-serif;
 396
 397         .ui-link-inherit { color:       #fff; }
 398         .ui-link {
 399                 /* ui-body-link */
 400                 color: #2489CE;
 401         font-weight: bold;
 402                 &:hover { color: #2489CE; }
 403                 &:active { color: #2489CE; }
 404                 &:visited {     color: #2489CE; }
 405         }
 406 }
 407
 408 .ui-br {
 409 }
 410 .ui-btn-up-s {
 411         font-weight: bold;
 412         a.ui-link-inherit {
 413                 color: @color_button_text_normal;
 414         }
 415         .LESSbutton_up_style;
 416         .LESSbutton_text1_style;
 417 }
 418 .ui-btn-hover-s {
 419         font-weight: bold;
 420         a.ui-link-inherit {
 421                 color: @color_button_text_normal;
 422         }
 423         .LESSbutton_hover_style;
 424         .LESSbutton_text1_style;
 425 }
 426
 427 .ui-btn-hover-s.ui-btn-corner-circle{
 428         .LESScirclebutton_hover_style;
 429 }
 430
 431 .ui-btn-down-s {
 432         font-weight: bold;
 433         a.ui-link-inherit {
 434                 color: @color_button_text_normal;
 435         }
 436         .LESSbutton_down_style;
 437         .LESSbutton_text1_style;
 438 }
 439 .ui-btn-up-s,
 440 .ui-btn-hover-s,
 441 .ui-btn-down-s {
 442         font-family: Helvetica, Arial, sans-serif;
 443         text-decoration: none;
 444 }
 445
 446 .ui-btn-down-s.ui-btn-corner-circle{
 447         .LESScirclebutton_press_style;
 448 }
 449
 450 .ui-listview {
 451         border-top-color: @color_list_border_bottom;
 452         &> .ui-li {
 453                 border-bottom-color: @color_list_border_bottom;
 454         }
 455         & > .ui-li-static {
 456                 background-color: @color_bg;
 457         }
 458         li.ui-btn-up-s, li.ui-btn-hover-s {
 459                 background: none;
 460                 background-color: @color_bg;
 461                 color:          @color_text;
 462         }
 463         li.ui-btn-down-s {
 464                 background: none;
 465                 background-color: @color_list_press;
 466                 color:          @color_text;
 467         }
 468         /* listview: fonts for li with a link */
 469         li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
 470         li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
 471         li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
 472                 color:          @color_text;
 473         }
 474         /* listview divider */
 475         /* NOTE: this divider has no swatch tag! */
 476         li.ui-li-divider {
 477                 .LESSlistDivider_Background;
 478                 color:          @color_list_divider_text;
 479         }
 480         /* subitem */
 481         .ui-li-sub { color: @color_text_sub; }
 482         .ui-li-sub-setting { color: @color_text_setting; }
 483
 484         // expandable list
 485         .ui-li-expandable {
 486
 487         }
 488         &> .ui-li-expanded {
 489                 background-color: @color_list_expandable_expanded_bg;
 490         }
 491         &> .ui-li-expanded .ui-li-expanded {    // 3rd~ more depth
 492                 background-color: @color_list_expandable_expanded_bg;
 493         }
 494
 495         // bubble
 496         .ui-li-static {
 497                 &.ui-li-bubble-left {
 498                         // Color is picked from 00_MessageBubble_BG_receive.png
 499                         background-color: @color_list_bubble_left_bg;
 500                         .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
 501                         color: @color_list_bubble_left_text;
 502                 }
 503                 &.ui-li-bubble-right {
 504                         // Color is picked from 00_MessageBubble_BG_sent.png
 505                         background-color: @color_list_bubble_right_bg;
 506                         .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
 507                         color: @color_list_bubble_right_text;
 508                 }
 509                 &.ui-li-bubble-sos {
 510                         color: @color_list_bubble_sos_text;
 511                 }
 512                 &.ui-li-bubble-date {
 513                         background-color: @color_list_bubble_date_bg;
 514                         color: @color_list_bubble_date_text;
 515                 }
 516         }
 517         span.ui-li-bubble-time {
 518                 color: @color_list_bubble_time_text;
 519         }
 520 }
 521
 522 /* Structure */
 523 /* links within "buttons"
 524 -----------------------------------------------------------------------------------------------------------*/
 525
 526 a.ui-link-inherit {
 527         text-decoration: none !important;
 528 }
 529
 530
 531 /* Active class used as the "on" state across all themes
 532 -----------------------------------------------------------------------------------------------------------*/
 533
 534 /* button default color for active state */
 535 .ui-btn-active {
 536         /* global-active */
 537         color:                                  @color_button_text_normal;
 538         cursor: pointer;
 539         text-decoration: none;
 540         background:                     @color_button_press;
 541         outline: none;
 542         //font-family: Helvetica, Arial, sans-serif;
 543
 544         a.ui-link-inherit {
 545                 color:                                  @color_button_text_normal;
 546         }
 547 }
 548
 549 /* button inner top highlight
 550 -----------------------------------------------------------------------------------------------------------*/
 551
 552 .ui-btn-inner {
 553         //border : none;
 554 }
 555
 556 /***************************************************************************
 557                     ControlBar
 558 ***************************************************************************/
 559 .ui-controlbar-s, .ui-controlbar-left, .ui-controlbar-right {
 560         border: 1px solid               @color_controlbar_btn_border;
 561         background:                     @color_controlbar_bg;
 562         color:                                  @color_controlbar_btn_text;
 563         font-family: Helvetica, Arial, sans-serif;
 564         font-weight: bold;
 565         font-size : 36 * @unit_base;
 566
 567         .ui-link-inherit, .ui-link {
 568                 color: @color_controlbar_btn_text;
 569                 font-weight: bold;
 570                 &:hover { color: @color_controlbar_btn_text; }
 571                 &:active { color: @color_controlbar_btn_text; }
 572                 &:visited {     color: @color_controlbar_btn_text; }
 573         }
 574
 575         .ui-btn-text, .ui-btn {
 576                 color: @color_controlbar_btn_text;
 577                 font-weight: bold;
 578                 text-decoration : none;
 579         }
 580
 581         .ui-btn-down-s, .ui-btn-active {
 582                 color: @color_controlbar_btn_text;
 583         }
 584 }
 585
 586 .ui-controlbar-s.ui-navbar {
 587         position : absolute;
 588
 589         height : 114 * @unit_base;  /* temporary value */
 590         width : 100%;
 591         left : 0px;
 592
 593         border-top : none;
 594         border-bottom : none;
 595
 596         z-index: 50;
 597
 598         li .ui-btn, .ui-navbar-toggle .ui-btn{
 599                 font-size : 26 * @unit_base;
 600         }
 601
 602         .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
 603                 .ui-btn-inner{
 604                         padding-top : 79 * @unit_base;
 605                 }
 606         }
 607         .ui-btn {
 608                 .ui-icon {
 609                         left : 50%;
 610                         top : 12 * @unit_base;
 611                         margin-left : -1.3em;
 612
 613                         width : 56 * @unit_base;
 614                         height: 56 * @unit_base;
 615                 }
 616                 .ui-btn-text {
 617                         padding-left : 0px;
 618                 }
 619         }
 620         .ui-btn.ui-ctrlbar-icononly {
 621                 padding-top : 20 * @unit_base;
 622         }
 623         .ui-btn-inner {
 624                 z-index : 200;
 625         }
 626         .ui-btn-inner.ui-navbar-textonly {
 627                 font-size : 28 * @unit_base;
 628
 629                 padding-top : 44 * @unit_base;
 630                 padding-bottom : 45 * @unit_base;
 631         }
 632 }
 633
 634 .ui-landscape-controlbar.ui-controlbar-s.ui-navbar {
 635         .ui-btn {
 636                 .ui-icon {
 637                         left : 20%;
 638                         top : 30 * @unit_base;
 639                         margin-left : -1.3em;
 640                 }
 641
 642                 .ui-btn-text {
 643                         padding-left : 35%;
 644                 }
 645
 646                 .ui-navbar-textonly .ui-btn-text {
 647                         padding-left : 0px;
 648                 }
 649         }
 650
 651         .ui-ctrlbar-icononly.ui-btn {
 652                 padding-top     : 0px;
 653
 654                 .ui-icon {
 655                         left : 50%;
 656                         top : 30 * @unit_base;
 657                         margin-left : -29 * @unit_base;
 658                 }
 659         }
 660
 661         .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
 662                 .ui-btn-inner:not(.ui-btn-icon-only) {
 663                         padding-top : 40 * @unit_base;
 664                         padding-bottom : 39 * @unit_base;
 665                 }
 666         }
 667 }
 668
 669 .ui-tabbar-s {
 670         .ui-btn {
 671                 background: @color_controlbar_tabbbar_bg;
 672         }
 673
 674         .ui-btn-active, .ui-btn-show-style,
 675         .ui-btn.ui-btn-hover-s.ui-btn-down-s {
 676                 background: @color_controlbar_btn_press;
 677                 border-left-style:  solid;
 678                 border-right-style:solid;
 679                 border-left-color: @color_controlbar_btn_border;
 680                 border-right-color: @color_controlbar_btn_border;
 681                 border-left-width: 1px;
 682                 border-right-width: 1px;
 683         }
 684
 685         .ui-btn-animation {
 686                 background: @color_controlbar_btn_press;
 687                 border-left-style:  solid;
 688                 border-right-style: solid;
 689                 border-left-color:      @color_controlbar_btn_border;
 690                 border-right-color: @color_controlbar_btn_border;
 691                 border-left-width:      1px;
 692                 border-right-width: 1px;
 693                 position : absolute;
 694                 top : 0px;
 695                 height : 123 * @unit_base;
 696                 z-index : 100;
 697         }
 698
 699         .ui-btn-hide-style {
 700                 background: @color_bar_footer_bg;
 701                 border : none;
 702         }
 703 }
 704
 705 .ui-toolbar-s {
 706         .ui-btn, .ui-btn-up-s {
 707                 background: @color_controlbar_toolbbar_bg;
 708
 709                 border-left-width : 1px;
 710                 border-right-width : 1px;
 711                 border-color : @color_controlbar_btn_border;
 712                 border-style : solid;
 713         }
 714
 715         .ui-btn-down-s {
 716                 background : @color_controlbar_btn_press;
 717         }
 718 }
 719
 720 .ui-header .ui-navbar.ui-tabbar-s,
 721 .ui-header .ui-navbar.ui-toolbar-s {
 722         a {
 723                 width : 100%;
 724                 height : 100%;
 725         }
 726 }
 727
 728 .ui-controlbar-left.ui-navbar, .ui-controlbar-right.ui-navbar {
 729         position : fixed;
 730         z-index: 50;
 731
 732         li .ui-btn, .ui-navbar-toggle .ui-btn{
 733                 font-size : 20 * @unit_base;
 734         }
 735         .ui-btn {
 736                 width : 100%;
 737                 margin :0px 0em;
 738
 739                 background: @color_controlbar_bg;
 740         }
 741
 742         .ui-btn-down-s,  .ui-btn-active{
 743                 color: @color_controlbar_btn_text;
 744         }
 745
 746         li .ui-btn, .ui-navbar-toggle .ui-btn{
 747                 font-size : 20 * @unit_base;
 748         }
 749
 750         .ui-btn-inner {
 751                 z-index : 200;
 752
 753                 padding-top : 126 * @unit_base;
 754                 .ui-icon {
 755                         left : 23%;
 756                         top : 35 * @unit_base;
 757                         width : 70 * @unit_base;
 758                         height: 70 * @unit_base;
 759                 }
 760                 .ui-btn-text.ui-btn-text-padding-left {
 761                         padding-left : 0px;
 762                 }
 763         }
 764
 765         .ui-btn-animation {
 766                 position : fixed;
 767
 768                 background: @color_controlbar_bg;
 769                 border-bottom-style:  solid;
 770                 border-top-style: solid;
 771                 border-bottom-color: @color_controlbar_btn_border;
 772                 border-top-color: @color_controlbar_btn_border;
 773                 border-bottom-width:    1px;
 774                 border-top-width: 1px;
 775
 776                 z-index : 100;
 777         }
 778 }
 779
 780 .ui-controlbar-left {
 781         left  : 0px;
 782         float : left;
 783 }
 784
 785 .ui-controlbar-right {
 786         right : 0px;
 787         float :right;
 788 }
 789
 790 .ui-btn-ani-startposition {
 791 }
 792
 793 .ui-btn-ani-endposition {
 794         -ms-transition-property : left;
 795         -o-transition-property : left;
 796         -moz-transition-property : left;
 797         -webkit-transition-property : left;
 798
 799         -ms-transition: all 0.3s ease-in-out;
 800         -o-transition: all 0.3s ease-in-out;
 801         -moz-transition: all 0.3s ease-in-out;
 802         -webkit-transition: all 0.3s ease-in-out;
 803 }
 804
 805 .ui-btn-ani-verticalstartposition {
 806 }
 807
 808 .ui-btn-ani-verticalendposition {
 809         -ms-transition-property : top;
 810         -o-transition-property : top;
 811         -moz-transition-property : top;
 812         -webkit-transition-property : top;
 813
 814         -ms-transition: all 0.3s ease-in-out;
 815         -o-transition: all 0.3s ease-in-out;
 816         -moz-transition: all 0.3s ease-in-out;
 817         -webkit-transition: all 0.3s ease-in-out;
 818 }
 819 /***************************************************************************
 820                     ControlBar
 821 ***************************************************************************/
 822
 823
 824 /* corner rounding classes
 825 -----------------------------------------------------------------------------------------------------------*/
 826
 827 .ui-corner-tl {
 828         .LESSborder-radius-topleft(@style-corner-radius);
 829 }
 830 .ui-corner-tr {
 831         .LESSborder-radius-topright(@style-corner-radius);
 832 }
 833 .ui-corner-bl {
 834         .LESSborder-radius-bottomleft(@style-corner-radius);
 835 }
 836 .ui-corner-br {
 837         .LESSborder-radius-bottomright(@style-corner-radius);
 838 }
 839 .ui-corner-top {
 840         .LESSborder-radius-topleft(@style-corner-radius);
 841         .LESSborder-radius-topright(@style-corner-radius);
 842 }
 843 .ui-corner-bottom {
 844         .LESSborder-radius-bottomleft(@style-corner-radius);
 845         .LESSborder-radius-bottomright(@style-corner-radius);
 846 }
 847 .ui-corner-right {
 848         .LESSborder-radius-topright(@style-corner-radius);
 849         .LESSborder-radius-bottomright(@style-corner-radius);
 850 }
 851 .ui-corner-left {
 852         .LESSborder-radius-topleft(@style-corner-radius);
 853         .LESSborder-radius-bottomleft(@style-corner-radius);
 854 }
 855 .ui-corner-all {
 856         //.LESSborder-radius-all(@style-corner-radius);
 857 }
 858 .ui-corner-none {
 859         .LESSborder-radius-all(0);
 860 }
 861
 862 /* Interaction cues
 863 -----------------------------------------------------------------------------------------------------------*/
 864 .ui-disabled {
 865         opacity:                                                        .3;
 866 }
 867 .ui-disabled,
 868 .ui-disabled a {
 869         cursor: default;
 870 }
 871
 872 /* Icons
 873 -----------------------------------------------------------------------------------------------------------*/
 874
 875 .ui-icon {
 876         /* global-icon */
 877         background-image: url(images/icons-18-white.png);
 878         background-repeat: no-repeat;
 879         // no radius for checkbox
 880         //.LESSborder-radius-all(9px);
 881 }
 882
 883 .ui-image-search {
 884         background-image: url(images/00_search_icon.png);
 885         background-repeat: no-repeat;
 886         .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
 887 }
 888
 889 .ui-icon-deleteSearch {
 890         background-image: url(images/00_field_btn_Clear.png);
 891         background-repeat: no-repeat;
 892         .LESSbackground-size(38 * @unit_base, 38 * @unit_base);
 893 }
 894
 895
 896 /* Alt icon color
 897 -----------------------------------------------------------------------------------------------------------*/
 898
 899 .ui-icon-alt {
 900         background:                                             #fff;
 901         background:                                             rgba(255,255,255,.3);
 902         background-image: url(images/icons-18-black.png);
 903         background-repeat: no-repeat;
 904 }
 905
 906 /* HD/"retina" sprite
 907 -----------------------------------------------------------------------------------------------------------*/
 908
 909 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 910        only screen and (min--moz-device-pixel-ratio: 1.5),
 911        only screen and (min-resolution: 240dpi) {
 912
 913         .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
 914         .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
 915         .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
 916         .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
 917         .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
 918                 background-image: url(images/icons-36-white.png);
 919                 .LESSbackground-size(776px, 18px);
 920         }
 921         .ui-icon-alt {
 922                 background-image: url(images/icons-36-black.png);
 923         }
 924 }
 925
 926 /* plus minus */
 927 .ui-icon-plus {
 928         background-position:    -0 50%;
 929 }
 930 .ui-icon-minus {
 931         /*background-position:  -36px 50%;*/    /* wongi_1018: Same name make problem. Later, origianl icons will be removed.  */
 932 }
 933
 934 /* arrows */
 935 .ui-icon-arrow-r {
 936         background-position:    -108px 50%;
 937 }
 938 .ui-icon-arrow-l {
 939         background-position:    -144px 50%;
 940 }
 941 .ui-icon-arrow-u {
 942         background-position:    -180px 50%;
 943 }
 944 .ui-icon-arrow-d {
 945         background-position:    -216px 50%;
 946 }
 947
 948 /* misc */
 949 .ui-icon-check {
 950         background-position:    -252px 50%;
 951 }
 952 .ui-icon-gear {
 953         background-position:    -288px 50%;
 954 }
 955 .ui-icon-refresh {
 956         background-position:    -324px 50%;
 957 }
 958 .ui-icon-forward {
 959         background-position:    -360px 50%;
 960 }
 961 .ui-icon-back {
 962         background-position:    -396px 50%;
 963 }
 964 .ui-icon-grid {
 965         background-position:    -432px 50%;
 966 }
 967 .ui-icon-star {
 968         background-position:    -468px 50%;
 969 }
 970 .ui-icon-alert {
 971         background-position:    -504px 50%;
 972 }
 973 .ui-icon-info {
 974         background-position:    -540px 50%;
 975 }
 976 .ui-icon-home {
 977         background-position:    -576px 50%;
 978 }
 979
 980 /* checks,radios */
 981 .ui-checkbox .ui-icon {
 982         .LESSborder-radius-all(3px);
 983 }
 984 //.ui-icon-checkbox-off,
 985 .ui-icon-radio-off {
 986         background-color: transparent;
 987 }
 988 .ui-checkbox-on .ui-icon,
 989 .ui-radio-on .ui-icon {
 990   /*Do not need bg color for icons..
 991         background-color: #4596ce;*/ /* NOTE: this hex should match the active state color. It's repeated here for cascade */
 992 }
 993
 994 /* loading icon */
 995 .ui-icon-loading {
 996         background-image: url(images/ajax-loader.png);
 997         width: 40px;
 998         height: 40px;
 999         .LESSborder-radius-all(20px);
1000 }
1001
1002 /* Add ctrl bar *//* TIZEN Default Footer */
1003         .ui-icon-ctrlbar-account_sign-up, .ui-icon-ctrlbar-accounts, .ui-icon-ctrlbar-add-to-bookmarks, .ui-icon-ctrlbar-add-to-calendar, .ui-icon-ctrlbar-alarm,
1004         .ui-icon-ctrlbar-albums, .ui-icon-ctrlbar-area, .ui-icon-ctrlbar-artist, .ui-icon-ctrlbar-attach, .ui-icon-ctrlbar-back,
1005         .ui-icon-ctrlbar-backward, .ui-icon-ctrlbar-bluetooth_preview, .ui-icon-ctrlbar-bookmarks, .ui-icon-ctrlbar-brightness, .ui-icon-ctrlbar-calendar,
1006         .ui-icon-ctrlbar-call, .ui-icon-ctrlbar-camera, .ui-icon-ctrlbar-category, .ui-icon-ctrlbar-change_group, .ui-icon-ctrlbar-chat,
1007         .ui-icon-ctrlbar-check, .ui-icon-ctrlbar-compose, .ui-icon-ctrlbar-composer, .ui-icon-ctrlbar-contacts, .ui-icon-ctrlbar-copy,
1008         .ui-icon-ctrlbar-create, .ui-icon-ctrlbar-create_folder, .ui-icon-ctrlbar-delete, .ui-icon-ctrlbar-dialer, .ui-icon-ctrlbar-DM,
1009         .ui-icon-ctrlbar-edit, .ui-icon-ctrlbar-editor, .ui-icon-ctrlbar-eng_eng_result, .ui-icon-ctrlbar-exchangs_register, .ui-icon-ctrlbar-Externalstorage,
1010         .ui-icon-ctrlbar-favorite, .ui-icon-ctrlbar-features, .ui-icon-ctrlbar-forward, .ui-icon-ctrlbar-genre, .ui-icon-ctrlbar-help,
1011         .ui-icon-ctrlbar-home, .ui-icon-ctrlbar-info, .ui-icon-ctrlbar-length, .ui-icon-ctrlbar-list_by, .ui-icon-ctrlbar-logs,
1012         .ui-icon-ctrlbar-map, .ui-icon-ctrlbar-memolist, .ui-icon-ctrlbar-MemoryCard, .ui-icon-ctrlbar-mention, .ui-icon-ctrlbar-menu,
1013         .ui-icon-ctrlbar-more, .ui-icon-ctrlbar-move, .ui-icon-ctrlbar-multiview, .ui-icon-ctrlbar-multiview_02, .ui-icon-ctrlbar-multiview_03,
1014         .ui-icon-ctrlbar-multiview_04, .ui-icon-ctrlbar-multiview_05, .ui-icon-ctrlbar-multiview_06, .ui-icon-ctrlbar-multiview_07, .ui-icon-ctrlbar-multiview_08,
1015         .ui-icon-ctrlbar-multiview_09, .ui-icon-ctrlbar-music_albums, .ui-icon-ctrlbar-pause, .ui-icon-ctrlbar-phone, .ui-icon-ctrlbar-Play,
1016         .ui-icon-ctrlbar-playlists, .ui-icon-ctrlbar-receive, .ui-icon-ctrlbar-reply, .ui-icon-ctrlbar-save, .ui-icon-ctrlbar-save_to_calender,
1017         .ui-icon-ctrlbar-scrap, .ui-icon-ctrlbar-search, .ui-icon-ctrlbar-send, .ui-icon-ctrlbar-set_as, .ui-icon-ctrlbar-settings,
1018         .ui-icon-ctrlbar-setup_wizard_previous, .ui-icon-ctrlbar-share, .ui-icon-ctrlbar-songs, .ui-icon-ctrlbar-stop_watch, .ui-icon-ctrlbar-store,
1019         .ui-icon-ctrlbar-synchronise_start_sync, .ui-icon-ctrlbar-synchronise_stop_01, .ui-icon-ctrlbar-synchronise_stop_02, .ui-icon-ctrlbar-synchronise_stop_03, .ui-icon-ctrlbar-view_result,
1020         .ui-icon-ctrlbar-tag, .ui-icon-ctrlbar-temp, .ui-icon-ctrlbar-timeline, .ui-icon-ctrlbar-timer, .ui-icon-ctrlbar-today,
1021         .ui-icon-ctrlbar-top, .ui-icon-ctrlbar-trim, .ui-icon-ctrlbar-TTS, .ui-icon-ctrlbar-update, .ui-icon-ctrlbar-upload_export,
1022         .ui-icon-ctrlbar-volume, .ui-icon-ctrlbar-world_clock, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-add_to_contact,
1023         .ui-icon-ctrlbar-close, .ui-icon-ctrlbar-groups, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-unread_message, .ui-icon-ctrlbar-weight,
1024         .ui-icon-ctrlbar-3Dview, .ui-icon-ctrlbar-cancel, .ui-icon-ctrlbar-done, .ui-icon-ctrlbar-lock, .ui-icon-ctrlbar-next,
1025         .ui-icon-ctrlbar-previous, .ui-icon-ctrlbar-print, .ui-icon-ctrlbar-Ringtone, .ui-icon-ctrlbar-Save_the_word, .ui-icon-ctrlbar-Save_in_memo,
1026         .ui-icon-ctrlbar-scan, .ui-icon-ctrlbar-unlock, .ui-icon-ctrlbar-videocall, .ui-icon-ctrlbar-Voice_command, .ui-icon-ctrlbar-Add-buddy_to_chat,
1027         .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-Chat, .ui-icon-ctrlbar-view_file_history
1028          {
1029                 background-color : transparent;
1030                 .LESSborder-radius-all(0px);
1031                 background-size:  100% 100%;
1032
1033                 .LESSbox-shadow(0px,0px,0, rgba(255,255,255,.4));
1034         }
1035
1036         .ui-icon-ctrlbar-account_sign-up {
1037                 background-image: url(images/controlbar/01_controlbar_icon_account_sign-up.png);
1038         }
1039         .ui-icon-ctrlbar-accounts {
1040                 background-image: url(images/controlbar/01_controlbar_icon_accounts.png);
1041         }
1042         .ui-icon-ctrlbar-add-to-bookmarks {
1043                 background-image: url(images/controlbar/01_controlbar_icon_add-to-bookmarks.png);
1044         }
1045         .ui-icon-ctrlbar-add-to-calendar {
1046                 background-image: url(images/controlbar/01_controlbar_icon_add-to-calendar.png);
1047         }
1048         .ui-icon-ctrlbar-alarm {
1049                 background-image: url(images/controlbar/01_controlbar_icon_alarm.png);
1050         }
1051         .ui-icon-ctrlbar-albums {
1052                 background-image: url(images/controlbar/01_controlbar_icon_albums.png);
1053         }
1054         .ui-icon-ctrlbar-area {
1055                 background-image: url(images/controlbar/01_controlbar_icon_area.png);
1056         }
1057         .ui-icon-ctrlbar-artist {
1058                 background-image: url(images/controlbar/01_controlbar_icon_artist.png);
1059         }
1060         .ui-icon-ctrlbar-attach {
1061                 background-image: url(images/controlbar/01_controlbar_icon_attach.png);
1062         }
1063         .ui-icon-ctrlbar-back {
1064                 background-image: url(images/controlbar/01_controlbar_icon_back.png);
1065         }
1066         .ui-icon-ctrlbar-backward {
1067                 background-image: url(images/controlbar/01_controlbar_icon_backward.png);
1068         }
1069         .ui-icon-ctrlbar-bluetooth_preview {
1070                 background-image: url(images/controlbar/01_controlbar_icon_bluetooth_preview.png);
1071         }
1072         .ui-icon-ctrlbar-bookmarks {
1073                 background-image: url(images/controlbar/01_controlbar_icon_bookmarks.png);
1074         }
1075         .ui-icon-ctrlbar-brightness {
1076                 background-image: url(images/controlbar/01_controlbar_icon_brightness.png);
1077         }
1078         .ui-icon-ctrlbar-calendar {
1079                 background-image: url(images/controlbar/01_controlbar_icon_calendar.png);
1080         }
1081         .ui-icon-ctrlbar-call {
1082                 background-image: url(images/controlbar/01_controlbar_icon_call.png);
1083         }
1084         .ui-icon-ctrlbar-camera {
1085                 background-image: url(images/controlbar/01_controlbar_icon_camera.png);
1086         }
1087         .ui-icon-ctrlbar-category {
1088                 background-image: url(images/controlbar/01_controlbar_icon_category.png);
1089         }
1090         .ui-icon-ctrlbar-change_group {
1091                 background-image: url(images/controlbar/01_controlbar_icon_change_group.png);
1092         }
1093         .ui-icon-ctrlbar-chat {
1094                 background-image: url(images/controlbar/01_controlbar_icon_chat.png);
1095         }
1096         .ui-icon-ctrlbar-check {
1097                 background-image: url(images/controlbar/01_controlbar_icon_check.png);
1098         }
1099         .ui-icon-ctrlbar-compose {
1100                 background-image: url(images/controlbar/01_controlbar_icon_compose.png);
1101         }
1102         .ui-icon-ctrlbar-composer {
1103                 background-image: url(images/controlbar/01_controlbar_icon_composer.png);
1104         }
1105         .ui-icon-ctrlbar-contacts {
1106                 background-image: url(images/controlbar/01_controlbar_icon_contacts.png);
1107                 }
1108         .ui-icon-ctrlbar-copy {
1109                 background-image: url(images/controlbar/01_controlbar_icon_copy.png);
1110         }
1111         .ui-icon-ctrlbar-create {
1112                 background-image: url(images/controlbar/01_controlbar_icon_create.png);
1113         }
1114         .ui-icon-ctrlbar-create_folder {
1115                 background-image: url(images/controlbar/01_controlbar_icon_create_folder.png);
1116         }
1117         .ui-icon-ctrlbar-delete {
1118                 background-image: url(images/controlbar/01_controlbar_icon_delete.png);
1119         }
1120         .ui-icon-ctrlbar-dialer {
1121                 background-image: url(images/controlbar/01_controlbar_icon_dialer.png);
1122         }
1123         .ui-icon-ctrlbar-DM {
1124                 background-image: url(images/controlbar/01_controlbar_icon_DM.png);
1125         }
1126         .ui-icon-ctrlbar-edit {
1127                 background-image: url(images/controlbar/01_controlbar_icon_edit.png);
1128         }
1129         .ui-icon-ctrlbar-editor {
1130                 background-image: url(images/controlbar/01_controlbar_icon_editor.png);
1131         }
1132         .ui-icon-ctrlbar-eng_eng_result {
1133                 background-image: url(images/controlbar/01_controlbar_icon_eng_eng_result.png);
1134         }
1135         .ui-icon-ctrlbar-exchangs_register {
1136                 background-image: url(images/controlbar/01_controlbar_icon_exchangs_register.png);
1137         }
1138         .ui-icon-ctrlbar-Externalstorage {
1139                 background-image: url(images/controlbar/01_controlbar_icon_Externalstorage.png);
1140         }
1141         .ui-icon-ctrlbar-favorite {
1142                 background-image: url(images/controlbar/01_controlbar_icon_favorite.png);
1143                 }
1144         .ui-icon-ctrlbar-features {
1145                 background-image: url(images/controlbar/01_controlbar_icon_features.png);
1146         }
1147         .ui-icon-ctrlbar-forward {
1148                 background-image: url(images/controlbar/01_controlbar_icon_forward.png);
1149         }
1150         .ui-icon-ctrlbar-genre {
1151                 background-image: url(images/controlbar/01_controlbar_icon_genre.png);
1152         }
1153         .ui-icon-ctrlbar-help {
1154                 background-image: url(images/controlbar/01_controlbar_icon_help.png);
1155         }
1156         .ui-icon-ctrlbar-home {
1157                 background-image: url(images/controlbar/01_controlbar_icon_home.png);
1158         }
1159         .ui-icon-ctrlbar-info {
1160                 background-image: url(images/controlbar/01_controlbar_icon_info.png);
1161         }
1162         .ui-icon-ctrlbar-length {
1163                 background-image: url(images/controlbar/01_controlbar_icon_length.png);
1164                 }
1165         .ui-icon-ctrlbar-list_by {
1166                 background-image: url(images/controlbar/01_controlbar_icon_list_by.png);
1167         }
1168         .ui-icon-ctrlbar-logs {
1169                 background-image: url(images/controlbar/01_controlbar_icon_logs.png);
1170         }
1171         .ui-icon-ctrlbar-map {
1172                 background-image: url(images/controlbar/01_controlbar_icon_map.png);
1173         }
1174         .ui-icon-ctrlbar-memolist {
1175                 background-image: url(images/controlbar/01_controlbar_icon_memolist.png);
1176         }
1177         .ui-icon-ctrlbar-MemoryCard {
1178                 background-image: url(images/controlbar/01_controlbar_icon_MemoryCard.png);
1179         }
1180         .ui-icon-ctrlbar-mention {
1181                 background-image: url(images/controlbar/01_controlbar_icon_mention.png);
1182         }
1183         .ui-icon-ctrlbar-menu {
1184                 background-image: url(images/controlbar/01_controlbar_icon_menu.png);
1185         }
1186         .ui-icon-ctrlbar-more {
1187                 background-image: url(images/controlbar/01_controlbar_icon_more.png);
1188         }
1189         .ui-icon-ctrlbar-move {
1190                 background-image: url(images/controlbar/01_controlbar_icon_move.png);
1191         }
1192         .ui-icon-ctrlbar-multiview {
1193                 background-image: url(images/controlbar/01_controlbar_icon_multiview.png);
1194         }
1195         .ui-icon-ctrlbar-multiview_02 {
1196                 background-image: url(images/controlbar/01_controlbar_icon_multiview_02.png);
1197         }
1198         .ui-icon-ctrlbar-multiview_03 {
1199                 background-image: url(images/controlbar/01_controlbar_icon_multiview_03.png);
1200         }
1201         .ui-icon-ctrlbar-multiview_04 {
1202                 background-image: url(images/controlbar/01_controlbar_icon_multiview_04.png);
1203         }
1204         .ui-icon-ctrlbar-multiview_05 {
1205                 background-image: url(images/controlbar/01_controlbar_icon_multiview_05.png);
1206         }
1207         .ui-icon-ctrlbar-multiview_06 {
1208                 background-image: url(images/controlbar/01_controlbar_icon_multiview_06.png);
1209         }
1210         .ui-icon-ctrlbar-multiview_07 {
1211                 background-image: url(images/controlbar/01_controlbar_icon_multiview_07.png);
1212         }
1213         .ui-icon-ctrlbar-multiview_08 {
1214                 background-image: url(images/controlbar/01_controlbar_icon_multiview_08.png);
1215         }
1216         .ui-icon-ctrlbar-multiview_09 {
1217                 background-image: url(images/controlbar/01_controlbar_icon_multiview_09.png);
1218         }
1219         .ui-icon-ctrlbar-music_albums {
1220                 background-image: url(images/controlbar/01_controlbar_icon_music_albums.png);
1221         }
1222         .ui-icon-ctrlbar-pause {
1223                 background-image: url(images/controlbar/01_controlbar_icon_pause.png);
1224         }
1225         .ui-icon-ctrlbar-phone {
1226                 background-image: url(images/controlbar/01_controlbar_icon_phone.png);
1227         }
1228         .ui-icon-ctrlbar-Play {
1229                 background-image: url(images/controlbar/01_controlbar_icon_Play.png);
1230         }
1231         .ui-icon-ctrlbar-playlists {
1232                 background-image: url(images/controlbar/01_controlbar_icon_playlists.png);
1233         }
1234         .ui-icon-ctrlbar-receive {
1235                 background-image: url(images/controlbar/01_controlbar_icon_receive.png);
1236         }
1237         .ui-icon-ctrlbar-reply {
1238                 background-image: url(images/controlbar/01_controlbar_icon_reply.png);
1239         }
1240         .ui-icon-ctrlbar-save {
1241                 background-image: url(images/controlbar/01_controlbar_icon_save.png);
1242         }
1243         .ui-icon-ctrlbar-save_to_calender {
1244                 background-image: url(images/controlbar/01_controlbar_icon_save_to_calender.png);
1245         }
1246         .ui-icon-ctrlbar-scrap {
1247                 background-image: url(images/controlbar/01_controlbar_icon_scrap.png);
1248                 }
1249         .ui-icon-ctrlbar-search {
1250                 background-image: url(images/controlbar/01_controlbar_icon_search.png);
1251         }
1252         .ui-icon-ctrlbar-send {
1253                 background-image: url(images/controlbar/01_controlbar_icon_send.png);
1254         }
1255         .ui-icon-ctrlbar-set_as {
1256                 background-image: url(images/controlbar/01_controlbar_icon_set_as.png);
1257         }
1258         .ui-icon-ctrlbar-settings {
1259                 background-image: url(images/controlbar/01_controlbar_icon_settings.png);
1260         }
1261         .ui-icon-ctrlbar-setup_wizard_previous {
1262                 background-image: url(images/controlbar/01_controlbar_icon_setup_wizard_previous.png);
1263         }
1264         .ui-icon-ctrlbar-share {
1265                 background-image: url(images/controlbar/01_controlbar_icon_share.png);
1266         }
1267         .ui-icon-ctrlbar-songs {
1268                 background-image: url(images/controlbar/01_controlbar_icon_songs.png);
1269         }
1270         .ui-icon-ctrlbar-stop_watch {
1271                 background-image: url(images/controlbar/01_controlbar_icon_stop_watch.png);
1272         }
1273         .ui-icon-ctrlbar-store {
1274                 background-image: url(images/controlbar/01_controlbar_icon_store.png);
1275         }
1276         .ui-icon-ctrlbar-synchronise_start_sync {
1277                 background-image: url(images/controlbar/01_controlbar_icon_synchronise_start_sync.png);
1278         }
1279         .ui-icon-ctrlbar-synchronise_stop_01 {
1280                 background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_01.png);
1281         }
1282         .ui-icon-ctrlbar-synchronise_stop_02 {
1283                 background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_02.png);
1284         }
1285         .ui-icon-ctrlbar-synchronise_stop_03 {
1286                 background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_03.png);
1287                 }
1288         .ui-icon-ctrlbar-synchronise_view_result {
1289                 background-image: url(images/controlbar/01_controlbar_icon_synchronise_view_result.png);
1290         }
1291         .ui-icon-ctrlbar-tag {
1292                 background-image: url(images/controlbar/01_controlbar_icon_tag.png);
1293         }
1294         .ui-icon-ctrlbar-temp {
1295                 background-image: url(images/controlbar/01_controlbar_icon_temp.png);
1296         }
1297         .ui-icon-ctrlbar-timeline {
1298                 background-image: url(images/controlbar/01_controlbar_icon_timeline.png);
1299                 }
1300         .ui-icon-ctrlbar-timer {
1301                 background-image: url(images/controlbar/01_controlbar_icon_timer.png);
1302                 }
1303         .ui-icon-ctrlbar-today {
1304                 background-image: url(images/controlbar/01_controlbar_icon_today.png);
1305         }
1306         .ui-icon-ctrlbar-top {
1307                 background-image: url(images/controlbar/01_controlbar_icon_top.png);
1308         }
1309         .ui-icon-ctrlbar-trim {
1310                 background-image: url(images/controlbar/01_controlbar_icon_trim.png);
1311         }
1312         .ui-icon-ctrlbar-TTS {
1313                 background-image: url(images/controlbar/01_controlbar_icon_TTS.png);
1314         }
1315         .ui-icon-ctrlbar-update {
1316                 background-image: url(images/controlbar/01_controlbar_icon_update.png);
1317         }
1318         .ui-icon-ctrlbar-upload_export {
1319                 background-image: url(images/controlbar/01_controlbar_icon_upload_export.png);
1320         }
1321         .ui-icon-ctrlbar-volume {
1322                 background-image: url(images/controlbar/01_controlbar_icon_volume.png);
1323         }
1324         .ui-icon-ctrlbar-world_clock {
1325                 background-image: url(images/controlbar/01_controlbar_icon_world_clock.png);
1326         }
1327         .ui-icon-ctrlbar-year {
1328                 background-image: url(images/controlbar/01_controlbar_icon_year.png);
1329         }
1330         .ui-icon-ctrlbar-add_tag {
1331                 background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
1332         }
1333         .ui-icon-ctrlbar-add_to_contact {
1334                 background-image: url(images/controlbar/01_controlbar_icon_add_to_contact.png);
1335         }
1336         .ui-icon-ctrlbar-close {
1337                 background-image: url(images/controlbar/01_controlbar_icon_close.png);
1338         }
1339         .ui-icon-ctrlbar-groups {
1340                 background-image: url(images/controlbar/01_controlbar_icon_groups.png);
1341         }
1342         .ui-icon-ctrlbar-unread_message {
1343                 background-image: url(images/controlbar/01_controlbar_icon_unread_message.png);
1344         }
1345         .ui-icon-ctrlbar-weight {
1346                 background-image: url(images/controlbar/01_controlbar_icon_weight.png);
1347         }
1348         .ui-icon-ctrlbar-3Dview {
1349                 background-image: url(images/controlbar/01_controlbar_icon_3Dview.png);
1350         }
1351         .ui-icon-ctrlbar-cancel {
1352                 background-image: url(images/controlbar/01_controlbar_icon_cancel.png);
1353         }
1354         .ui-icon-ctrlbar-done {
1355                 background-image: url(images/controlbar/01_controlbar_icon_done.png);
1356         }
1357         .ui-icon-ctrlbar-lock {
1358                 background-image: url(images/controlbar/01_controlbar_icon_lock.png);
1359         }
1360         .ui-icon-ctrlbar-next {
1361                 background-image: url(images/controlbar/01_controlbar_icon_next.png);
1362         }
1363         .ui-icon-ctrlbar-previous {
1364                 background-image: url(images/controlbar/01_controlbar_icon_previous.png);
1365         }
1366         .ui-icon-ctrlbar-print {
1367                 background-image: url(images/controlbar/01_controlbar_icon_print.png);
1368         }
1369         .ui-icon-ctrlbar-Ringtone {
1370                 background-image: url(images/controlbar/01_controlbar_icon_Ringtone.png);
1371         }
1372         .ui-icon-ctrlbar-Save_the_word {
1373                 background-image: url(images/controlbar/01_controlbar_icon_Save_the_word.png);
1374         }
1375         .ui-icon-ctrlbar-Save_in_memo {
1376                 background-image: url(images/controlbar/01_controlbar_icon_Save_in_memo.png);
1377         }
1378         .ui-icon-ctrlbar-scan {
1379                 background-image: url(images/controlbar/01_controlbar_icon_scan.png);
1380         }
1381         .ui-icon-ctrlbar-unlock {
1382                 background-image: url(images/controlbar/01_controlbar_icon_unlock.png);
1383         }
1384         .ui-icon-ctrlbar-videocall {
1385                 background-image: url(images/controlbar/01_controlbar_icon_videocall.png);
1386         }
1387         .ui-icon-ctrlbar-Voice_command {
1388                 background-image: url(images/controlbar/01_controlbar_icon_Voice_command.png);
1389         }
1390         .ui-icon-ctrlbar-Add_buddy_to_chat {
1391                 background-image: url(images/controlbar/01_controlbar_icon_Add_buddy_to_chat.png);
1392         }
1393         .ui-icon-ctrlbar-add_tag {
1394                 background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
1395         }
1396         .ui-icon-ctrlbar-Chat {
1397                 background-image: url(images/controlbar/01_controlbar_icon_Chat.png);
1398         }
1399         .ui-icon-ctrlbar-view_file_history {
1400                 background-image: url(images/controlbar/01_controlbar_icon_view_file_history.png);
1401         }
1402 /* ---------------------------------------------- */
1403
1404
1405
1406
1407
1408
1409
1410
1411 /* Button corner classes
1412 -----------------------------------------------------------------------------------------------------------*/
1413
1414 .ui-btn-corner-tl {
1415         .LESSborder-radius-topleft(1em);
1416 }
1417 .ui-btn-corner-tr {
1418         .LESSborder-radius-topright(1em);
1419 }
1420 .ui-btn-corner-bl {
1421         .LESSborder-radius-bottomleft(1em);
1422 }
1423 .ui-btn-corner-br {
1424         .LESSborder-radius-bottomright(1em);
1425 }
1426 .ui-btn-corner-top {
1427         .LESSborder-radius-topleft(1em);
1428         .LESSborder-radius-topright(1em);
1429 }
1430 .ui-btn-corner-bottom {
1431         .LESSborder-radius-bottomleft(1em);
1432         .LESSborder-radius-bottomright(1em);
1433 }
1434 .ui-btn-corner-right {
1435         .LESSborder-radius-topright(1em);
1436         .LESSborder-radius-bottomright(1em);
1437 }
1438 .ui-btn-corner-left {
1439         .LESSborder-radius-topleft(1em);
1440         .LESSborder-radius-bottomleft(1em);
1441 }
1442 .ui-btn-corner-all {
1443         .LESSborder-radius-all(0.2em);  //wongi_1013
1444 }
1445
1446 /* radius clip workaround for cleaning up corner trapping */
1447 .ui-corner-tl,
1448 .ui-corner-tr,
1449 .ui-corner-bl,
1450 .ui-corner-br,
1451 .ui-corner-top,
1452 .ui-corner-bottom,
1453 .ui-corner-right,
1454 .ui-corner-left,
1455 .ui-corner-all,
1456 .ui-btn-corner-tl,
1457 .ui-btn-corner-tr,
1458 .ui-btn-corner-bl,
1459 .ui-btn-corner-br,
1460 .ui-btn-corner-top,
1461 .ui-btn-corner-bottom,
1462 .ui-btn-corner-right,
1463 .ui-btn-corner-left,
1464 .ui-btn-corner-all {
1465   -webkit-background-clip: padding-box;
1466      -moz-background-clip: padding;
1467           background-clip: padding-box;
1468 }
1469
1470 /* Overlay / modal
1471 -----------------------------------------------------------------------------------------------------------*/
1472
1473 .ui-overlay {
1474         background: #666;
1475         opacity: .5;
1476         filter: Alpha(Opacity=50);
1477         position: absolute;
1478         width: 100%;
1479         height: 100%;
1480 }
1481 .ui-overlay-shadow {
1482         //.LESSbox-shadow(0px, 0px, 12px, rgba(0,0,0,.6));
1483 }
1484 .ui-shadow {
1485         //.LESSbox-shadow(0px, 1px, 4px, rgba(0,0,0,.3));
1486 }
1487 .ui-bar-a .ui-shadow,
1488 .ui-bar-b .ui-shadow ,
1489 .ui-bar-c .ui-shadow  {
1490         //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.3));
1491 }
1492 .ui-shadow-inset {
1493         //-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
1494         //-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
1495         //box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
1496 }
1497 .ui-icon-shadow {
1498         //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.4));
1499 }
1500
1501 /* Focus state - set here for specificity
1502 -----------------------------------------------------------------------------------------------------------*/
1503
1504 .ui-focus {
1505         /* global-active-background-color */
1506         //.LESSbox-shadow(0px, 1px, 12px, #387bbe);
1507         outline-color : #008cd2;
1508 }
1509
1510 /* unset box shadow in browsers that don't do it right
1511 -----------------------------------------------------------------------------------------------------------*/
1512
1513 .ui-mobile-nosupport-boxshadow * {
1514         -ms-box-shadow: none !important;
1515         -o-box-shadow: none !important;
1516         -moz-box-shadow: none !important;
1517         -webkit-box-shadow: none !important;
1518         box-shadow: none !important;
1519 }
1520
1521 /* ...and bring back focus */
1522 .ui-mobile-nosupport-boxshadow .ui-focus {
1523         outline-width: 2px;
1524 }