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