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