Export 0.1.61
[platform/framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.theme.less
index fed7e94..d00ace0 100755 (executable)
-/*!
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
-*/
 
 @import "config.less";
-/* Swatches */
-
-/* S
------------------------------------------------------------------------------------------------------------*/
 
 /***************************************************************************
                     Header / Footer
                     NavigationBar
 ***************************************************************************/
+
 .ui-bar-s {
        border: none;
-       background: @color_bar_bg;
+       background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
        color: @color_bar_title_text;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
-       font-size : 36 * @unit_base;
+       font-size : 28 * @unit_base;
 
        .ui-link-inherit {
                color: @color_bar_title_text;
        }
-
-       .ui-btn.ui-btn-back.ui-btn-down-s {
-               .ui-btn-inner {
-                       background : @color_bar_back_btn_press;
-               }
-       }
-
-       > .ui-btn.ui-btn-footer-right{
-               position : absolute;
-               font-size : 32 * @unit_base;
-
-               width : 104 * @unit_base;
-               height : 74 * @unit_base;
-               top : 20 * @unit_base;
-
-               border-style : none;
-               border-width : 0px;
-       }
+       
        
        > .ui-btn.ui-btn-back {
-               position : absolute;
-               font-size : 32 * @unit_base;
-               border-style : none;
-               border-width : 0px;
-               .LESSbtn-back;
-       }
-
-       > .ui-btn.ui-btn-footer-right {
-               left : 10 * @unit_base;
-       }
-
-       .ui-btn.ui-btn-footer-right .ui-btn-inner {
-               padding : 0;
-
-               width : 104 * @unit_base;
-               height : 74 * @unit_base;
-       }
-
-       .ui-btn.ui-btn-back .ui-btn-inner {
-               padding : 0;
-
-               .LESSbtn-back-inner;
-       }
-
-
+               background : transparent;
 
-       .ui-btn.ui-btn-footer-right.ui-btn-down-s{
-               .ui-btn-inner {
-                       background : @color_bar_btn_press;
-               }
-       }
-       .ui-btn.ui-btn-footer-right{
-               .ui-btn-inner {
-                       .ui-btn-text {
-                               line-height : 74  * @unit_base;
-                       }
-               }
-       }
-
-       .ui-field-contain {
-               margin-left : auto;
-               margin-right : auto;
-               height : 74  * @unit_base;
-
-               font-size : 28 * @unit_base;
-
-               .ui-extended-controlgroup {
-                       position : absolute;
-                       display : inline;
-
-                       margin-top : 0 * @unit_base;
-                       margin-bottom : 0 * @unit_base;
-
-                       label {
-                               .LESSextended-controlgroup-border;
-                       }
-
-                       .ui-radio {
-                               height : 74 * @unit_base;
-                               .ui-btn {
-                                       width : 100%;
-                               }
-
-                               .ui-btn-inner {
-                                       .ui-btn-text {
-                                               text-align : center;
-                                               font-weight : bold;
-                                       }
-       }
-
-                               .ui-radio-off {
-                                       background: @color_bar_seg_btn_normal;
-                                       .ui-btn-text{
-                                               color : @color_bar_seg_text_normal;
-                                       }
-                               }
-                               .ui-radio-on,
-                               .ui-radio-off.ui-btn-hover-s.ui-btn-down-s{
-                                       background : @color_bar_seg_btn_press;
-                                       .ui-btn-text{
-                                               color : @color_bar_seg_text_press;
-                                       }
-                               }
-                       }
-               }
-               .ui-title-extended-controlgroup {
-                       top : 5  * @unit_base; // scale change
-               }
-               .ui-footer-extended-controlgroup {
-                       .ui-btn-inner {
-                               line-height : 74  * @unit_base;
-                               padding : 0  * @unit_base;
-                       }
-               }
-       }
+               position : absolute;
+               right : 0px;
 
-       .ui-title-extended-controlgroup-4btn {
-               width : @style-title-extended-4btn-width;
-               .ui-radio {
-                       width : @style-title-extended-4btn-radio-width;
-               }
-       }
-       .ui-title-extended-controlgroup-3btn {
-               width : @style-title-extended-3btn-width;
-               .ui-radio {
-                       width : @style-title-extended-3btn-radio-width;
-               }
-       }
-       .ui-title-extended-controlgroup-2btn {
-               width : @style-title-extended-2btn-width;
-               .ui-radio {
-                       width : @style-title-extended-2btn-radio-width;
-               }
-       }
+               .ui-icon-header-back-btn {
+                       top : 8 * @unit_base;
+                       left : auto;
+                       right : 13 * @unit_base;
 
-       .ui-footer-extended-controlgroup-4btn {
-               width : 682 * @unit_base;
-               .ui-radio {
-                       width : 170 * @unit_base;
-               }
-       }
-       .ui-footer-extended-controlgroup-3btn {
-               width : 432 * @unit_base;
-               .ui-radio {
-                       width : 143 * @unit_base;
-               }
-       }
-       .ui-footer-extended-controlgroup-2btn {
-               width : 328 * @unit_base;
-               .ui-radio {
-                       width : 163 * @unit_base;
+                       margin-top : 0px
                }
        }
 }
 
+/* Header style */
 .ui-header.ui-bar-s{
        position : fixed;
        top : 0px;
-       background : @color_bar_title_bg;
 
-       min-height : 100 * @unit_base;
-
-       img {
-               display: inline-block;
-               height: 32 * @unit_base;
-               width: 32 * @unit_base;
-               margin-left: 16 * @unit_base;
-               //margin-right: 16 * @unit_base; /* Title's left margin covers this. */
-               //vertical-align: middle;
-       }
+       min-height : 55 * @unit_base;
 
        .ui-title {
                display: inline-block;
                color : @color_bar_title_text;
-               min-height: @style-title-min-height;
-               font-size : @style-title-font-size;
+               min-height : 28 * @unit_base;
+               max-height : 34 * @unit_base; /* temporary UX strange */
+               font-size  : 28 * @unit_base;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                outline: 0 !important;
 
-               .LESStitle-diff-style; /* different title style */
+               text-align: left;
+               margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
+
        }
 
-       .ui-btn{
-               font-size : 28 * @unit_base;
-               height : 74 * @unit_base;
+       /* header button position : need to press area more... */
+       >.ui-btn {
+               .ui-btn-inner.ui-btn-icon-only .ui-icon {
+                       left : 0px;
+                       top : 0px;
+                       margin-top : 0px;
+               }
        }
 
-       .ui-btn.ui-btn-left,
-       .ui-btn.ui-btn-right {
-               width : 114 * @unit_base;
+       > .ui-btn.ui-btn-back {
+               right : 13 * @unit_base;
        }
 
-       > .ui-btn{
+       img {
+               display: inline-block;
+               height: 16 * @unit_base;
+               width: 16 * @unit_base;
+               margin-left: 8 * @unit_base;
+       }
+
+       .ui-title-text-sub {
                position : absolute;
-               top : 20 * @unit_base;
-               margin-top : 0px;
-               font-size : 28 * @unit_base;
-               height : 60 * @unit_base;
+               top : 36 * @unit_base;
+               left : 8 * @unit_base;  
 
-               background: none;
-               color   : @color_bar_title_text;
+               font-size : 12 * @unit_base;    
 
+               img {
+                       height: 16 * @unit_base;
+                       width: 16 * @unit_base;
+                       margin-left: 8 * @unit_base;
+               }
+       }
+
+       > .ui-btn{
+               position : absolute;
+               top : 19 * @unit_base;
+               margin-top : 0px;
 
-               border-left-style: solid;
-               border-left-width : 1px;
-               border-left-color : @color_bar_title_btn_border;
+               height : 32 * @unit_base;
+               width : 32 * @unit_base;
 
-               font-weight : bold;
-               -webkit-border-radius : 0px;
+               background: transparent;
+               color   : red;
 
-               span.ui-btn-inner {
-                       padding-top : 13 * @unit_base;
-                       padding-bottom : 13 * @unit_base;
-               }
-               span.ui-btn-inner.ui-btn-icon-only {
-                       padding-top : 0 * @unit_base;
-                       padding-bottom : 0 * @unit_base;
-               }
        }
 
        > .ui-btn.ui-btn-right:nth-child(2) {
-               right : 0px;
+               right : 11 * @unit_base;
        }
 
        > .ui-btn.ui-btn-right:nth-child(3) {
-               right : 118 * @unit_base;
-       }
-
-       > .ui-btn.ui-btn-right:nth-child(4) {
-               right : 236 * @unit_base;
-       }
-
-       > .ui-btn.ui-btn-down-s {
-               background : @color_bar_btn_press;
-               color : @color_bar_title_text;
+               right : 58 * @unit_base;
        }
 
        > img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
-               right : 0px;
+               right : 11 * @unit_base;
        }
 
        > img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
-               right : 118 * @unit_base;
+               right : 58 * @unit_base;
        }
 
-       > img + h1 + a.ui-btn.ui-btn-right:nth-child(5) {
-               right : 236 * @unit_base;
+       > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(4) {
+               right : 11 * @unit_base;
        }
-}
-
-.ui-header.ui-bar-s.ui-title-extended-height {
-       height : 136  * @unit_base;
 
-       a {
-               top : 50  * @unit_base;
+       > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(5) {
+               right : 58 * @unit_base;
        }
 
-       .ui-title {
-               font-size : 28  * @unit_base;
-               top : 0  * @unit_base;
-
-               padding-top : 11 * @unit_base;
-               margin-top : 0 * @unit_base;
-               margin-bottom : 0 * @unit_base;
+       > .ui-btn.ui-btn-down-s {
+               background : @color_bar_btn_press;
+               color : @color_bar_title_text;
        }
+       
+       &.ui-title-multiline {
+               .ui-title {
+                       min-height : 24 * @unit_base;
+                       max-height : 24 * @unit_base; /* temporary UX strange */
+                       font-size  : 22 * @unit_base;
 
-       .ui-title-extended-segment-style {
-               left : 0 * @unit_base;
-               margin-top : 0 * @unit_base;
-               top : @style-title-extended-margin; // scale change
+                       margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
+               }
        }
+       
 }
 
-.ui-header.ui-bar-s    .ui-btn.ui-btn-back .ui-btn-inner {
-       border-style : none;
-       border-width : 0px;
-}
-
-.ui-header.ui-bar-s.ui-title-controlbar-height,
 .ui-footer.ui-bar-s {
-       height : 114 * @unit_base;
-}
-
-.ui-footer.ui-bar-s.ui-footer-fixed {
-       background : @color_bar_footer_bg;
+       height : 49 * @unit_base;
+       text-align : center;
+       
+       >.ui-btn.ui-btn-back,
+       >[data-icon="naviframe-more"] {
+               background : transparent;
 
-       height : 114 * @unit_base;
-       .ui-title{
-               font-size : 32 * @unit_base;
+               .ui-btn-footer-right .ui-btn-icon-only .ui-icon {
+                       left : 8 * @unit_base;
+               }
        }
-}
-.ui-footer.ui-bar-s .ui-title-extended-controlgroup-4btn {
-       margin-top : 20 * @unit_base;
-}
 
-.ui-footer.ui-bar-s {
-       > .ui-btn {
-               background-color : @color_bar_btn_bg;
-               .LESSback-btn-background;
-       }
+       [data-icon="naviframe-more"] {
+               position : absolute;
+               left : 0 * @unit_base;
+               top : 0 * @unit_base;
 
-       > .ui-btn.ui-btn-down-s {
+               box-shadow : none;
+               border-width : 0px;
+
+               .ui-icon-naviframe-more {
+                       left : 13 * @unit_base;
+                       top : 8 * @unit_base;
+                       
+                       margin-top : 0px;
+               }
                .ui-btn-inner {
-                       background : @color_bar_back_btn_press;
+                       border: none;
+                       background: transparent;
                }
        }
 
-       > .ui-btn-back {
-               background-color : @color_bar_back_btn_bg;
-               .LESSback-btn-background;
+       [data-role="controlgroup"] {
+               width : 245 * @unit_base; /* temp value */
+
+               margin-left : auto;
+               margin-right : auto;
+               margin-top : 6 * @unit_base; /* temp value */
+               margin-bottom : 6 * @unit_base; /* temp value */
+
+               [data-role="button"] {
+                       background : transparent;
+                       
+                       width : 77 * @unit_base;
+
+                       border-style : solid;
+                       border-color : black;
+                       border-top-width : 0px;
+                       border-bottom-width : 0px;
+                       border-left-width : 1px;
+                       border-right-width : 1px;
+
+                       border-radius : 0px;
+                       box-shadow : none;
+                       .ui-btn-text {
+                               font-size : 17 * @unit_base;
+                               color : rgba(58, 58, 58, 1);
+                       }
+
+                       &.ui-corner-right {
+                               border-right-width : 0px;
+                       }
+
+                       &.ui-corner-left {
+                               border-left-width : 0px;
+                       }
+               }
+               }
+       
+       > [data-role="button"]:not([data-icon="naviframe-more"]) {
+               top : 6 * @unit_base;
        }
 }
 
 /***************************************************************************
-                    Header / Footer
-                    NavigationBar
-***************************************************************************/
-/***************************************************************************
                     Content Top calculate
 ***************************************************************************/
-.ui-title-content-normal-height,
-.ui-title-content-option-header-collapsed-1line-height  {
-       position : relative;
-       top : 100  * @unit_base;
-}
-
-.ui-title-content-no-height {
+.ui-content {
        position : relative;
-       top : 0  * @unit_base;
+       top : 55  * @unit_base;
 }
 
-.ui-title-content-extended-height {
-       position : relative;
-       top : 136  * @unit_base;
+.ui-title-content-normal-height {
+       top : 55  * @unit_base;
 }
 
-.ui-title-content-option-header-expanded-1line-height {
-       position : relative;
-       top : 195  * @unit_base;
+.ui-title-content-multi-controlbar-height {
+       top : 75  * @unit_base;
 }
 
 .ui-title-content-search {
-       position : relative;
-       top : 206  * @unit_base;
+       top : 111  * @unit_base;
 }
 
-.ui-title-content-optionheader-search {
-       position : relative;
-       top : 219  * @unit_base;
-}
 
-.ui-title-content-controlbar-height {
-       position : relative;
-       top : 115  * @unit_base;
-}
 /***************************************************************************
                     Content Top calculate
 ***************************************************************************/
 
-// NOTE: This class is applied to almost all JQM widgets!
+
 .ui-body-s {
        border: 1px solid #2a2a2a;
        background:                     @color_bg;
        .ui-link {
                /* ui-body-link */
                color: #2489CE;
-       font-weight: bold;
+               font-weight: bold;
                &:hover { color: #2489CE; }
                &:active { color: #2489CE; }
                &:visited {     color: #2489CE; }
 
 .ui-br {
 }
-.ui-btn-up-s {
-       font-weight: bold;
-       a.ui-link-inherit {
-               color: @color_button_text_normal;
-       }
-       .LESSbutton_up_style;
+.ui-btn-box-s {
+       padding: 1px;
+}
+.ui-btn-box-s.ui-btn-up-s {
+       .LESSbutton_box_style;
+        .LESSborder-radius-all( 0.3rem );
        .LESSbutton_text1_style;
 }
-.ui-btn-hover-s {
-       font-weight: bold;
-       a.ui-link-inherit {
-               color: @color_button_text_normal;
+
+.ui-ctxpopup .ui-btn-box-s{
+       &.ui-btn-up-s,
+       &.ui-btn-hover-s {
+               background: transparent !important;
+               border: none;
+               box-shadow: none;
+               padding: 0;
+               color: white !important;
+       }
+       &.ui-btn-down-s {
+               background: @color_ctxbutton_press !important;
+               border: none;
+               box-shadow: none;
+               padding: 0;
+               color: white !important;
+               .LESSborder-radius-all( 0 );
        }
+}
+
+.ui-ctxpopup .ui-btn-down-s {
+        background: @color_ctxbutton_press !important;
+}
+
+.ui-btn-box-s .ui-btn-inner {
+       border: 1px solid;
+       border-color: rgb(199, 197, 190);
+       .LESSborder-radius-all( 0.3rem );
+       .LESSbox-boxsizing( border-box );
+       .LESSbutton_inner_box_style;
+       height: 100%;
+}
+
+.ui-header .ui-btn-box-s,
+.ui-footer .ui-btn-box-s,
+.ui-btn-back.ui-btn-up-s,
+.ui-btn-back.ui-btn-hover-s,
+.ui-btn-back.ui-btn-down-s,
+.ui-popup-container .ui-btn-box-s {
+       font-weight: normal;
+       .LESSborder-radius-all( 0.9 rem );
+}
+/*
+.ui-btn-box-s.ui-btn-hover-s {
        .LESSbutton_hover_style;
        .LESSbutton_text1_style;
 }
 
-.ui-btn-hover-s.ui-btn-corner-circle{
+.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
        .LESScirclebutton_hover_style;
 }
-
-.ui-btn-down-s {
-       font-weight: bold;
-       a.ui-link-inherit {
-               color: @color_button_text_normal;
-       }
+*/
+.ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
        .LESSbutton_down_style;
-       .LESSbutton_text1_style;
 }
+
 .ui-btn-up-s,
 .ui-btn-hover-s,
 .ui-btn-down-s {
        font-family: Helvetica, Arial, sans-serif;
        text-decoration: none;
 }
-
+/*
 .ui-btn-down-s.ui-btn-corner-circle{
        .LESScirclebutton_press_style;
 }
 
-.ui-listview {
-       border-top-color: @color_list_border_bottom;
-       &> .ui-li { 
-               border-bottom-color: @color_list_border_bottom;
-       }
-       & > .ui-li-static {
-               background-color: @color_bg;
-       }
-       li.ui-btn-up-s, li.ui-btn-hover-s {
-               background: none;
-               background-color: @color_bg;
-               color:          @color_text;
-       }
-       li.ui-btn-down-s {
-               background: none;
-               background-color: @color_list_press;
-               color:          @color_text;
-       }
-       /* listview: fonts for li with a link */
-       li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
-       li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
-       li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
-               color:          @color_text;
-       }
-       /* listview divider */
-       /* NOTE: this divider has no swatch tag! */
-       li.ui-li-divider {
-               background: @color_list_divider_bg;
-               color:          @color_list_divider_text;
-       }
-       /* subitem */
-       .ui-li-sub { color: @color_text_sub; }
-       .ui-li-sub-setting { color: @color_text_setting; }
-
-       // expandable list
-       .ui-li-expandable {
-
-       }
-       &> .ui-li-expanded {
-               background-color: @color_list_expandable_expanded_bg;
-       }
-       &> .ui-li-expanded .ui-li-expanded {    // 3rd~ more depth
-               background-color: @color_list_expandable_expanded_bg;
-       }
-
-       // bubble
-       .ui-li-static {
-               &.ui-li-bubble-left {
-                       // Color is picked from 00_MessageBubble_BG_receive.png
-                       background-color: @color_list_bubble_left_bg;   
-                       .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
-                       color: @color_list_bubble_left_text;
-               }
-               &.ui-li-bubble-right {
-                       // Color is picked from 00_MessageBubble_BG_sent.png
-                       background-color: @color_list_bubble_right_bg;
-                       .LESSbox-shadow(2px, 3px, 3px, @color_list_bubble_box_shadow);
-                       color: @color_list_bubble_right_text;
-               }
-               &.ui-li-bubble-sos {
-                       color: @color_list_bubble_sos_text;
-               }
-               &.ui-li-bubble-date {
-                       background-color: @color_list_bubble_date_bg;
-                       color: @color_list_bubble_date_text;
-               }
-       }
-       span.ui-li-bubble-time {
-               color: @color_list_bubble_time_text;
-       }
-}
-
 /* Structure */
 /* links within "buttons" 
 -----------------------------------------------------------------------------------------------------------*/
@@ -554,963 +377,79 @@ a.ui-link-inherit {
        //border : none;
 }
 
-/*************************************************************************** 
-                    ControlBar
-***************************************************************************/
-.ui-controlbar-s, .ui-controlbar-left, .ui-controlbar-right {
-       border: 1px solid               @color_controlbar_btn_border;
-       background:                     @color_controlbar_bg;
-       color:                                  @color_controlbar_btn_text;
-       font-family: Helvetica, Arial, sans-serif;
-       font-weight: bold;
-       font-size : 36 * @unit_base;
-
-       .ui-link-inherit, .ui-link {
-               color: @color_controlbar_btn_text;
-               font-weight: bold;
-               &:hover { color: @color_controlbar_btn_text; }
-               &:active { color: @color_controlbar_btn_text; }
-               &:visited {     color: @color_controlbar_btn_text; }
-       }
-
-       .ui-btn-text, .ui-btn {
-               color: @color_controlbar_btn_text;
-               font-weight: bold;
-               text-decoration : none;
-       }
-
-       .ui-btn-down-s, .ui-btn-active {
-               color: @color_controlbar_btn_text;      
-       }
-}
-
-.ui-controlbar-s.ui-navbar {
-       position : absolute;
-
-       height : 114 * @unit_base;  /* temporary value */
-       width : 100%;
-       left : 0px;
 
-       border-top : none;
-       border-bottom : none;
-
-       z-index: 50;
-
-       li .ui-btn, .ui-navbar-toggle .ui-btn{
-               font-size : 26 * @unit_base;
-       }
-
-       .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
-               .ui-btn-inner{
-                       padding-top : 79 * @unit_base;
-               }                       
-       }
-       .ui-btn {
-               .ui-icon {
-                       left : 50%;
-                       top : 12 * @unit_base;
-                       margin-left : -1.3em;
-
-                       width : 56 * @unit_base;
-                       height: 56 * @unit_base;
-               }
-               .ui-btn-text {
-                       padding-left : 0px;
-               }
-       }
-       .ui-btn.ui-ctrlbar-icononly {
-               padding-top : 20 * @unit_base;
-       }
-       .ui-btn-inner {
-               z-index : 200;
-       }
-       .ui-btn-inner.ui-navbar-textonly {
-               font-size : 28 * @unit_base;
-
-               padding-top : 44 * @unit_base;
-               padding-bottom : 45 * @unit_base;
-       }
-}
-
-.ui-landscape-controlbar.ui-controlbar-s.ui-navbar {
-       .ui-btn {
-               .ui-icon {
-                       left : 20%;
-                       top : 30 * @unit_base;
-                       margin-left : -1.3em;
-               }
-
-               .ui-btn-text {
-                       padding-left : 35%;
-               }
-
-               .ui-navbar-textonly .ui-btn-text {
-                       padding-left : 0px;
-               }
-       }
-
-       .ui-ctrlbar-icononly.ui-btn {
-               padding-top     : 0px;
-
-               .ui-icon {
-                       left : 50%;
-                       top : 30 * @unit_base;
-                       margin-left : -29 * @unit_base;
-               }
-       }
-
-       .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
-               .ui-btn-inner{
-                       padding-top : 40 * @unit_base;
-                       padding-bottom : 39 * @unit_base;
-               }
-       }
-}
-
-.ui-tabbar-s {
-       .ui-btn {
-               background: @color_controlbar_tabbbar_bg;
-       }
-
-       .ui-btn-active, .ui-btn-show-style,
-       .ui-btn.ui-btn-hover-s.ui-btn-down-s {
-               background: @color_controlbar_btn_press;
-               border-left-style:  solid;
-               border-right-style:solid;
-               border-left-color: @color_controlbar_btn_border;
-               border-right-color: @color_controlbar_btn_border;
-               border-left-width: 1px;
-               border-right-width: 1px;
-       }
-
-       .ui-btn-animation {
-               background: @color_controlbar_btn_press;
-               border-left-style:  solid;
-               border-right-style: solid;
-               border-left-color:      @color_controlbar_btn_border;
-               border-right-color: @color_controlbar_btn_border;
-               border-left-width:      1px;
-               border-right-width: 1px;
-               position : absolute;
-               top : 0px;
-               height : 123 * @unit_base;
-               z-index : 100;
-       }
-
-       .ui-btn-hide-style {
-               background: @color_bar_footer_bg;
-               border : none;
-       }
-}
-
-.ui-toolbar-s {
-       .ui-btn, .ui-btn-up-s {
-               background: @color_controlbar_toolbbar_bg;
-
-               border-left-width : 1px;
-               border-right-width : 1px;
-               border-color : @color_controlbar_btn_border;
-               border-style : solid;
-       }
-
-       .ui-btn-down-s {
-               background : @color_controlbar_btn_press;
-       }
-}
-
-.ui-header .ui-navbar.ui-tabbar-s,
-.ui-header .ui-navbar.ui-toolbar-s {
-       a {
-               width : 100%;
-               height : 100%;
-       }
-}
-
-.ui-controlbar-left.ui-navbar, .ui-controlbar-right.ui-navbar {
-       position : fixed;
-       z-index: 50;
-
-       li .ui-btn, .ui-navbar-toggle .ui-btn{
-               font-size : 20 * @unit_base;
-       }
-       .ui-btn {
-               width : 100%;
-               margin :0px 0em;
-
-               background: @color_controlbar_bg;
-       }
-
-       .ui-btn-down-s,  .ui-btn-active{
-               color: @color_controlbar_btn_text;
-       }
-
-       li .ui-btn, .ui-navbar-toggle .ui-btn{
-               font-size : 20 * @unit_base;
-       }
-
-       .ui-btn-inner {
-               z-index : 200;
-
-               padding-top : 126 * @unit_base;
-               .ui-icon {
-                       left : 23%;
-                       top : 35 * @unit_base;
-                       width : 70 * @unit_base;
-                       height: 70 * @unit_base;
-               }
-               .ui-btn-text.ui-btn-text-padding-left {
-                       padding-left : 0px;
-               }
-       }
-
-       .ui-btn-animation {
-               position : fixed;
-
-               background: @color_controlbar_bg;
-               border-bottom-style:  solid;
-               border-top-style: solid;
-               border-bottom-color: @color_controlbar_btn_border;
-               border-top-color: @color_controlbar_btn_border;
-               border-bottom-width:    1px;
-               border-top-width: 1px;
-
-               z-index : 100;
-       }
-}
-
-.ui-controlbar-left {
-       left  : 0px;
-       float : left;
-}
-
-.ui-controlbar-right {
-       right : 0px;
-       float :right;
-}
-
-.ui-btn-ani-startposition {
-}
-
-.ui-btn-ani-endposition {
-       -webkit-transition-property : left;
-       -webkit-transition: all 0.3s ease-in-out;
-}
-
-.ui-btn-ani-verticalstartposition {
-}
-
-.ui-btn-ani-verticalendposition {
-       -webkit-transition-property : top;
-       -webkit-transition: all 0.3s ease-in-out;
-}
-/*************************************************************************** 
-                    ControlBar
-***************************************************************************/
 
 
 /* corner rounding classes
 -----------------------------------------------------------------------------------------------------------*/
 
 .ui-corner-tl {
-       .LESSborder-radius-topleft(@style-corner-radius);
+       .LESSborder-radius-topleft(.3em);
 }
 .ui-corner-tr {
-       .LESSborder-radius-topright(@style-corner-radius);
+       .LESSborder-radius-topright(.3em);
 }
 .ui-corner-bl {
-       .LESSborder-radius-bottomleft(@style-corner-radius);
+       .LESSborder-radius-bottomleft(.3em);
 }
 .ui-corner-br {
-       .LESSborder-radius-bottomright(@style-corner-radius);
+       .LESSborder-radius-bottomright(.3em);
 }
 .ui-corner-top {
-       .LESSborder-radius-topleft(@style-corner-radius);
-       .LESSborder-radius-topright(@style-corner-radius);
+       .LESSborder-radius-topleft(.3em);
+       .LESSborder-radius-topright(.3em);
 }
 .ui-corner-bottom {
-       .LESSborder-radius-bottomleft(@style-corner-radius);
-       .LESSborder-radius-bottomright(@style-corner-radius);
+       .LESSborder-radius-bottomleft(.3em);
+       .LESSborder-radius-bottomright(.3em);
 }
 .ui-corner-right {
-       .LESSborder-radius-topright(@style-corner-radius);
-       .LESSborder-radius-bottomright(@style-corner-radius);
+       .LESSborder-radius-topright(.3em);
+       .LESSborder-radius-bottomright(.3em);
 }
 .ui-corner-left {
-       .LESSborder-radius-topleft(@style-corner-radius);
-       .LESSborder-radius-bottomleft(@style-corner-radius);
+       .LESSborder-radius-topleft(.3em);
+       .LESSborder-radius-bottomleft(.3em);
 }
 .ui-corner-all {
-       //.LESSborder-radius-all(@style-corner-radius);
+       //.LESSborder-radius-all(.3em);
 }
 .ui-corner-none {
        .LESSborder-radius-all(0); 
 }
 
-/* Interaction cues
------------------------------------------------------------------------------------------------------------*/
-.ui-disabled {
-       opacity:                                                        .3;
-}
-.ui-disabled,
-.ui-disabled a {
-       cursor: default;
-}
-
-/* Icons
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon {
-       /* global-icon */
-       background-image: url(images/icons-18-white.png);
-       background-repeat: no-repeat;
-       // no radius for checkbox
-       //.LESSborder-radius-all(9px); 
-}
-
-.ui-image-search {
-       background-image: url(images/00_search_icon.png);
-       background-repeat: no-repeat;
-       .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
-}
-
-.ui-icon-deleteSearch {
-       background-image: url(images/00_field_btn_Clear.png);
-       background-repeat: no-repeat;
-       .LESSbackground-size(38 * @unit_base, 38 * @unit_base);
-}
-
-
-/* Alt icon color
------------------------------------------------------------------------------------------------------------*/
-
-.ui-icon-alt {
-       background:                                             #fff;
-       background:                                             rgba(255,255,255,.3);
-       background-image: url(images/icons-18-black.png);
-       background-repeat: no-repeat;
-}
-
-/* HD/"retina" sprite
------------------------------------------------------------------------------------------------------------*/
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-       only screen and (min--moz-device-pixel-ratio: 1.5),
-       only screen and (min-resolution: 240dpi) {
-       
-       .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
-       .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
-       .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
-       .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, 
-       .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
-               background-image: url(images/icons-36-white.png);
-               .LESSbackground-size(776px, 18px);
-       }
-       .ui-icon-alt {
-               background-image: url(images/icons-36-black.png);
-       }
-}
-
-/* plus minus */
-.ui-icon-plus {
-       background-position:    -0 50%;
-}
-.ui-icon-minus {
-       /*background-position:  -36px 50%;*/    /* wongi_1018: Same name make problem. Later, origianl icons will be removed.  */
-}
-
-/* arrows */
-.ui-icon-arrow-r {
-       background-position:    -108px 50%;
-}
-.ui-icon-arrow-l {
-       background-position:    -144px 50%;
-}
-.ui-icon-arrow-u {
-       background-position:    -180px 50%;
-}
-.ui-icon-arrow-d {
-       background-position:    -216px 50%;
-}
-
-/* misc */
-.ui-icon-check {
-       background-position:    -252px 50%;
-}
-.ui-icon-gear {
-       background-position:    -288px 50%;
-}
-.ui-icon-refresh {
-       background-position:    -324px 50%;
-}
-.ui-icon-forward {
-       background-position:    -360px 50%;
-}
-.ui-icon-back {
-       background-position:    -396px 50%;
-}
-.ui-icon-grid {
-       background-position:    -432px 50%;
-}
-.ui-icon-star {
-       background-position:    -468px 50%;
-}
-.ui-icon-alert {
-       background-position:    -504px 50%;
-}
-.ui-icon-info {
-       background-position:    -540px 50%;
-}
-.ui-icon-home {
-       background-position:    -576px 50%;
-}
-
-/* checks,radios */
-.ui-checkbox .ui-icon {
-       -moz-border-radius: 3px;
-       -webkit-border-radius: 3px;
-       border-radius: 3px;
-}
-//.ui-icon-checkbox-off,
-.ui-icon-radio-off {
-       background-color: transparent;  
-}
-.ui-checkbox-on .ui-icon,
-.ui-radio-on .ui-icon {
-  /*Do not need bg color for icons..
-       background-color: #4596ce;*/ /* NOTE: this hex should match the active state color. It's repeated here for cascade */
-}
-
-/* loading icon */
-.ui-icon-loading {
-       background-image: url(images/ajax-loader.png);
-       width: 40px;
-       height: 40px;
-       .LESSborder-radius-all(20px); 
-}
-
-/* Add ctrl bar *//* TIZEN Default Footer */
-       .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, 
-       .ui-icon-ctrlbar-albums, .ui-icon-ctrlbar-area, .ui-icon-ctrlbar-artist, .ui-icon-ctrlbar-attach, .ui-icon-ctrlbar-back,
-       .ui-icon-ctrlbar-backward, .ui-icon-ctrlbar-bluetooth_preview, .ui-icon-ctrlbar-bookmarks, .ui-icon-ctrlbar-brightness, .ui-icon-ctrlbar-calendar,
-       .ui-icon-ctrlbar-call, .ui-icon-ctrlbar-camera, .ui-icon-ctrlbar-category, .ui-icon-ctrlbar-change_group, .ui-icon-ctrlbar-chat,         
-       .ui-icon-ctrlbar-check, .ui-icon-ctrlbar-compose, .ui-icon-ctrlbar-composer, .ui-icon-ctrlbar-contacts, .ui-icon-ctrlbar-copy,  
-       .ui-icon-ctrlbar-create, .ui-icon-ctrlbar-create_folder, .ui-icon-ctrlbar-delete, .ui-icon-ctrlbar-dialer, .ui-icon-ctrlbar-DM, 
-       .ui-icon-ctrlbar-edit, .ui-icon-ctrlbar-editor, .ui-icon-ctrlbar-eng_eng_result, .ui-icon-ctrlbar-exchangs_register, .ui-icon-ctrlbar-Externalstorage,
-       .ui-icon-ctrlbar-favorite, .ui-icon-ctrlbar-features, .ui-icon-ctrlbar-forward, .ui-icon-ctrlbar-genre, .ui-icon-ctrlbar-help,          
-       .ui-icon-ctrlbar-home, .ui-icon-ctrlbar-info, .ui-icon-ctrlbar-length, .ui-icon-ctrlbar-list_by, .ui-icon-ctrlbar-logs, 
-       .ui-icon-ctrlbar-map, .ui-icon-ctrlbar-memolist, .ui-icon-ctrlbar-MemoryCard, .ui-icon-ctrlbar-mention, .ui-icon-ctrlbar-menu,  
-       .ui-icon-ctrlbar-more, .ui-icon-ctrlbar-move, .ui-icon-ctrlbar-multiview, .ui-icon-ctrlbar-multiview_02, .ui-icon-ctrlbar-multiview_03, 
-       .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,
-       .ui-icon-ctrlbar-multiview_09, .ui-icon-ctrlbar-music_albums, .ui-icon-ctrlbar-pause, .ui-icon-ctrlbar-phone, .ui-icon-ctrlbar-Play,            
-       .ui-icon-ctrlbar-playlists, .ui-icon-ctrlbar-receive, .ui-icon-ctrlbar-reply, .ui-icon-ctrlbar-save, .ui-icon-ctrlbar-save_to_calender, 
-       .ui-icon-ctrlbar-scrap, .ui-icon-ctrlbar-search, .ui-icon-ctrlbar-send, .ui-icon-ctrlbar-set_as, .ui-icon-ctrlbar-settings,     
-       .ui-icon-ctrlbar-setup_wizard_previous, .ui-icon-ctrlbar-share, .ui-icon-ctrlbar-songs, .ui-icon-ctrlbar-stop_watch, .ui-icon-ctrlbar-store,    
-       .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,        
-       .ui-icon-ctrlbar-tag, .ui-icon-ctrlbar-temp, .ui-icon-ctrlbar-timeline, .ui-icon-ctrlbar-timer, .ui-icon-ctrlbar-today,
-       .ui-icon-ctrlbar-top, .ui-icon-ctrlbar-trim, .ui-icon-ctrlbar-TTS, .ui-icon-ctrlbar-update, .ui-icon-ctrlbar-upload_export,     
-       .ui-icon-ctrlbar-volume, .ui-icon-ctrlbar-world_clock, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-add_to_contact,        
-       .ui-icon-ctrlbar-close, .ui-icon-ctrlbar-groups, .ui-icon-ctrlbar-year, .ui-icon-ctrlbar-unread_message, .ui-icon-ctrlbar-weight,
-       .ui-icon-ctrlbar-3Dview, .ui-icon-ctrlbar-cancel, .ui-icon-ctrlbar-done, .ui-icon-ctrlbar-lock, .ui-icon-ctrlbar-next,
-       .ui-icon-ctrlbar-previous, .ui-icon-ctrlbar-print, .ui-icon-ctrlbar-Ringtone, .ui-icon-ctrlbar-Save_the_word, .ui-icon-ctrlbar-Save_in_memo,
-       .ui-icon-ctrlbar-scan, .ui-icon-ctrlbar-unlock, .ui-icon-ctrlbar-videocall, .ui-icon-ctrlbar-Voice_command, .ui-icon-ctrlbar-Add-buddy_to_chat,
-       .ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-Chat, .ui-icon-ctrlbar-view_file_history 
-        {
-               background-color : transparent;
-
-               -moz-border-radius: 0px;
-               -webkit-border-radius: 0px;
-               border-radius: 0px;
-               background-size:  100% 100%;
+/*************************************************************************** 
+                    Icon (Naviframe)
+***************************************************************************/
+.ui-header, .ui-footer {
+       .ui-btn .ui-btn-icon-only .ui-icon {
+               width: 32 * @unit_base; 
+               height: 32 * @unit_base;
                
-               -moz-box-shadow: 0px 0px 0                              rgba(255,255,255,.4);
-               -webkit-box-shadow: 0px 0px 0                   rgba(255,255,255,.4);
-               box-shadow: 0px 0px 0                                   rgba(255,255,255,.4);                   
-       }
-
-       .ui-icon-ctrlbar-account_sign-up {
-               background-image: url(images/controlbar/01_controlbar_icon_account_sign-up.png);
-       }
-       .ui-icon-ctrlbar-accounts {
-               background-image: url(images/controlbar/01_controlbar_icon_accounts.png);
-       }
-       .ui-icon-ctrlbar-add-to-bookmarks {
-               background-image: url(images/controlbar/01_controlbar_icon_add-to-bookmarks.png);
-       }
-       .ui-icon-ctrlbar-add-to-calendar {
-               background-image: url(images/controlbar/01_controlbar_icon_add-to-calendar.png);
-       }
-       .ui-icon-ctrlbar-alarm {
-               background-image: url(images/controlbar/01_controlbar_icon_alarm.png);
-       }
-       .ui-icon-ctrlbar-albums {
-               background-image: url(images/controlbar/01_controlbar_icon_albums.png);
-       }
-       .ui-icon-ctrlbar-area {
-               background-image: url(images/controlbar/01_controlbar_icon_area.png);
-       }
-       .ui-icon-ctrlbar-artist {
-               background-image: url(images/controlbar/01_controlbar_icon_artist.png);
-       }               
-       .ui-icon-ctrlbar-attach {
-               background-image: url(images/controlbar/01_controlbar_icon_attach.png);
-       }                       
-       .ui-icon-ctrlbar-back {
-               background-image: url(images/controlbar/01_controlbar_icon_back.png);
-       }                       
-       .ui-icon-ctrlbar-backward {
-               background-image: url(images/controlbar/01_controlbar_icon_backward.png);
-       }                       
-       .ui-icon-ctrlbar-bluetooth_preview {
-               background-image: url(images/controlbar/01_controlbar_icon_bluetooth_preview.png);
-       }
-       .ui-icon-ctrlbar-bookmarks {
-               background-image: url(images/controlbar/01_controlbar_icon_bookmarks.png);
-       }               
-       .ui-icon-ctrlbar-brightness {
-               background-image: url(images/controlbar/01_controlbar_icon_brightness.png);
-       }               
-       .ui-icon-ctrlbar-calendar {
-               background-image: url(images/controlbar/01_controlbar_icon_calendar.png);
-       }                       
-       .ui-icon-ctrlbar-call {
-               background-image: url(images/controlbar/01_controlbar_icon_call.png);
-       }
-       .ui-icon-ctrlbar-camera {
-               background-image: url(images/controlbar/01_controlbar_icon_camera.png);
-       }
-       .ui-icon-ctrlbar-category {
-               background-image: url(images/controlbar/01_controlbar_icon_category.png);
-       }
-       .ui-icon-ctrlbar-change_group {
-               background-image: url(images/controlbar/01_controlbar_icon_change_group.png);
-       }
-       .ui-icon-ctrlbar-chat {
-               background-image: url(images/controlbar/01_controlbar_icon_chat.png);
-       }
-       .ui-icon-ctrlbar-check {
-               background-image: url(images/controlbar/01_controlbar_icon_check.png);
-       }
-       .ui-icon-ctrlbar-compose {
-               background-image: url(images/controlbar/01_controlbar_icon_compose.png);
-       }
-       .ui-icon-ctrlbar-composer {
-               background-image: url(images/controlbar/01_controlbar_icon_composer.png);
-       }       
-       .ui-icon-ctrlbar-contacts {
-               background-image: url(images/controlbar/01_controlbar_icon_contacts.png);
-               }
-       .ui-icon-ctrlbar-copy {
-               background-image: url(images/controlbar/01_controlbar_icon_copy.png);
-       }       
-       .ui-icon-ctrlbar-create {
-               background-image: url(images/controlbar/01_controlbar_icon_create.png);
-       }       
-       .ui-icon-ctrlbar-create_folder {
-               background-image: url(images/controlbar/01_controlbar_icon_create_folder.png);
-       }               
-       .ui-icon-ctrlbar-delete {
-               background-image: url(images/controlbar/01_controlbar_icon_delete.png);
-       }       
-       .ui-icon-ctrlbar-dialer {
-               background-image: url(images/controlbar/01_controlbar_icon_dialer.png);
-       }               
-       .ui-icon-ctrlbar-DM {
-               background-image: url(images/controlbar/01_controlbar_icon_DM.png);
-       }       
-       .ui-icon-ctrlbar-edit {
-               background-image: url(images/controlbar/01_controlbar_icon_edit.png);
-       }               
-       .ui-icon-ctrlbar-editor {
-               background-image: url(images/controlbar/01_controlbar_icon_editor.png);
-       }                       
-       .ui-icon-ctrlbar-eng_eng_result {
-               background-image: url(images/controlbar/01_controlbar_icon_eng_eng_result.png);
-       }               
-       .ui-icon-ctrlbar-exchangs_register {
-               background-image: url(images/controlbar/01_controlbar_icon_exchangs_register.png);
-       }       
-       .ui-icon-ctrlbar-Externalstorage {
-               background-image: url(images/controlbar/01_controlbar_icon_Externalstorage.png);
-       }                                       
-       .ui-icon-ctrlbar-favorite {
-               background-image: url(images/controlbar/01_controlbar_icon_favorite.png);
-               }
-       .ui-icon-ctrlbar-features {
-               background-image: url(images/controlbar/01_controlbar_icon_features.png);
-       }       
-       .ui-icon-ctrlbar-forward {
-               background-image: url(images/controlbar/01_controlbar_icon_forward.png);
-       }               
-       .ui-icon-ctrlbar-genre {
-               background-image: url(images/controlbar/01_controlbar_icon_genre.png);
-       }       
-       .ui-icon-ctrlbar-help {
-               background-image: url(images/controlbar/01_controlbar_icon_help.png);
-       }       
-       .ui-icon-ctrlbar-home {
-               background-image: url(images/controlbar/01_controlbar_icon_home.png);
-       }       
-       .ui-icon-ctrlbar-info {
-               background-image: url(images/controlbar/01_controlbar_icon_info.png);
-       }       
-       .ui-icon-ctrlbar-length {
-               background-image: url(images/controlbar/01_controlbar_icon_length.png);
-               }
-       .ui-icon-ctrlbar-list_by {
-               background-image: url(images/controlbar/01_controlbar_icon_list_by.png);
-       }               
-       .ui-icon-ctrlbar-logs {
-               background-image: url(images/controlbar/01_controlbar_icon_logs.png);
-       }
-       .ui-icon-ctrlbar-map {
-               background-image: url(images/controlbar/01_controlbar_icon_map.png);
-       }       
-       .ui-icon-ctrlbar-memolist {
-               background-image: url(images/controlbar/01_controlbar_icon_memolist.png);
-       }               
-       .ui-icon-ctrlbar-MemoryCard {
-               background-image: url(images/controlbar/01_controlbar_icon_MemoryCard.png);
-       }               
-       .ui-icon-ctrlbar-mention {
-               background-image: url(images/controlbar/01_controlbar_icon_mention.png);
-       }               
-       .ui-icon-ctrlbar-menu {
-               background-image: url(images/controlbar/01_controlbar_icon_menu.png);
-       }               
-       .ui-icon-ctrlbar-more {
-               background-image: url(images/controlbar/01_controlbar_icon_more.png);
-       }                       
-       .ui-icon-ctrlbar-move {
-               background-image: url(images/controlbar/01_controlbar_icon_move.png);
-       }       
-       .ui-icon-ctrlbar-multiview {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview.png);
-       }       
-       .ui-icon-ctrlbar-multiview_02 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_02.png);
-       }
-       .ui-icon-ctrlbar-multiview_03 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_03.png);
-       }
-       .ui-icon-ctrlbar-multiview_04 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_04.png);
-       }
-       .ui-icon-ctrlbar-multiview_05 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_05.png);
-       }
-       .ui-icon-ctrlbar-multiview_06 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_06.png);
-       }       
-       .ui-icon-ctrlbar-multiview_07 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_07.png);
-       }       
-       .ui-icon-ctrlbar-multiview_08 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_08.png);
-       }       
-       .ui-icon-ctrlbar-multiview_09 {
-               background-image: url(images/controlbar/01_controlbar_icon_multiview_09.png);
-       }       
-       .ui-icon-ctrlbar-music_albums {
-               background-image: url(images/controlbar/01_controlbar_icon_music_albums.png);
-       }       
-       .ui-icon-ctrlbar-pause {
-               background-image: url(images/controlbar/01_controlbar_icon_pause.png);
-       }               
-       .ui-icon-ctrlbar-phone {
-               background-image: url(images/controlbar/01_controlbar_icon_phone.png);
-       }
-       .ui-icon-ctrlbar-Play {
-               background-image: url(images/controlbar/01_controlbar_icon_Play.png);
-       }
-       .ui-icon-ctrlbar-playlists {
-               background-image: url(images/controlbar/01_controlbar_icon_playlists.png);
-       }       
-       .ui-icon-ctrlbar-receive {
-               background-image: url(images/controlbar/01_controlbar_icon_receive.png);
-       }       
-       .ui-icon-ctrlbar-reply {
-               background-image: url(images/controlbar/01_controlbar_icon_reply.png);
-       }       
-       .ui-icon-ctrlbar-save {
-               background-image: url(images/controlbar/01_controlbar_icon_save.png);
-       }               
-       .ui-icon-ctrlbar-save_to_calender {
-               background-image: url(images/controlbar/01_controlbar_icon_save_to_calender.png);
-       }               
-       .ui-icon-ctrlbar-scrap {
-               background-image: url(images/controlbar/01_controlbar_icon_scrap.png);
-               }
-       .ui-icon-ctrlbar-search {
-               background-image: url(images/controlbar/01_controlbar_icon_search.png);
-       }                       
-       .ui-icon-ctrlbar-send {
-               background-image: url(images/controlbar/01_controlbar_icon_send.png);
-       }               
-       .ui-icon-ctrlbar-set_as {
-               background-image: url(images/controlbar/01_controlbar_icon_set_as.png);
-       }               
-       .ui-icon-ctrlbar-settings {
-               background-image: url(images/controlbar/01_controlbar_icon_settings.png);
-       }       
-       .ui-icon-ctrlbar-setup_wizard_previous {
-               background-image: url(images/controlbar/01_controlbar_icon_setup_wizard_previous.png);
-       }               
-       .ui-icon-ctrlbar-share {
-               background-image: url(images/controlbar/01_controlbar_icon_share.png);
-       }               
-       .ui-icon-ctrlbar-songs {
-               background-image: url(images/controlbar/01_controlbar_icon_songs.png);
-       }                       
-       .ui-icon-ctrlbar-stop_watch {
-               background-image: url(images/controlbar/01_controlbar_icon_stop_watch.png);
-       }                                       
-       .ui-icon-ctrlbar-store {
-               background-image: url(images/controlbar/01_controlbar_icon_store.png);
-       }       
-       .ui-icon-ctrlbar-synchronise_start_sync {
-               background-image: url(images/controlbar/01_controlbar_icon_synchronise_start_sync.png);
-       }
-       .ui-icon-ctrlbar-synchronise_stop_01 {
-               background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_01.png);
-       }
-       .ui-icon-ctrlbar-synchronise_stop_02 {
-               background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_02.png);
-       }
-       .ui-icon-ctrlbar-synchronise_stop_03 {
-               background-image: url(images/controlbar/01_controlbar_icon_synchronise_stop_03.png);
-               }
-       .ui-icon-ctrlbar-synchronise_view_result {
-               background-image: url(images/controlbar/01_controlbar_icon_synchronise_view_result.png);
-       }
-       .ui-icon-ctrlbar-tag {
-               background-image: url(images/controlbar/01_controlbar_icon_tag.png);
-       }       
-       .ui-icon-ctrlbar-temp {
-               background-image: url(images/controlbar/01_controlbar_icon_temp.png);
-       }       
-       .ui-icon-ctrlbar-timeline {
-               background-image: url(images/controlbar/01_controlbar_icon_timeline.png);
-               }
-       .ui-icon-ctrlbar-timer {
-               background-image: url(images/controlbar/01_controlbar_icon_timer.png);
-               }
-       .ui-icon-ctrlbar-today {
-               background-image: url(images/controlbar/01_controlbar_icon_today.png);
-       }               
-       .ui-icon-ctrlbar-top {
-               background-image: url(images/controlbar/01_controlbar_icon_top.png);
-       }       
-       .ui-icon-ctrlbar-trim {
-               background-image: url(images/controlbar/01_controlbar_icon_trim.png);
-       }               
-       .ui-icon-ctrlbar-TTS {
-               background-image: url(images/controlbar/01_controlbar_icon_TTS.png);
-       }               
-       .ui-icon-ctrlbar-update {
-               background-image: url(images/controlbar/01_controlbar_icon_update.png);
-       }       
-       .ui-icon-ctrlbar-upload_export {
-               background-image: url(images/controlbar/01_controlbar_icon_upload_export.png);
-       }               
-       .ui-icon-ctrlbar-volume {
-               background-image: url(images/controlbar/01_controlbar_icon_volume.png);
-       }       
-       .ui-icon-ctrlbar-world_clock {
-               background-image: url(images/controlbar/01_controlbar_icon_world_clock.png);
-       }
-       .ui-icon-ctrlbar-year {
-               background-image: url(images/controlbar/01_controlbar_icon_year.png);
-       }
-       .ui-icon-ctrlbar-add_tag {
-               background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
-       }
-       .ui-icon-ctrlbar-add_to_contact {
-               background-image: url(images/controlbar/01_controlbar_icon_add_to_contact.png);
-       }
-       .ui-icon-ctrlbar-close {
-               background-image: url(images/controlbar/01_controlbar_icon_close.png);
-       }
-       .ui-icon-ctrlbar-groups {
-               background-image: url(images/controlbar/01_controlbar_icon_groups.png);
-       }
-       .ui-icon-ctrlbar-unread_message {
-               background-image: url(images/controlbar/01_controlbar_icon_unread_message.png);
        }
-       .ui-icon-ctrlbar-weight {
-               background-image: url(images/controlbar/01_controlbar_icon_weight.png);
-       }
-       .ui-icon-ctrlbar-3Dview {
-               background-image: url(images/controlbar/01_controlbar_icon_3Dview.png);
-       }
-       .ui-icon-ctrlbar-cancel {
-               background-image: url(images/controlbar/01_controlbar_icon_cancel.png);
-       }
-       .ui-icon-ctrlbar-done {
-               background-image: url(images/controlbar/01_controlbar_icon_done.png);
-       }
-       .ui-icon-ctrlbar-lock {
-               background-image: url(images/controlbar/01_controlbar_icon_lock.png);
-       }
-       .ui-icon-ctrlbar-next {
-               background-image: url(images/controlbar/01_controlbar_icon_next.png);
-       }
-       .ui-icon-ctrlbar-previous {
-               background-image: url(images/controlbar/01_controlbar_icon_previous.png);
-       }
-       .ui-icon-ctrlbar-print {
-               background-image: url(images/controlbar/01_controlbar_icon_print.png);
-       }
-       .ui-icon-ctrlbar-Ringtone {
-               background-image: url(images/controlbar/01_controlbar_icon_Ringtone.png);
-       }
-       .ui-icon-ctrlbar-Save_the_word {
-               background-image: url(images/controlbar/01_controlbar_icon_Save_the_word.png);
-       }
-       .ui-icon-ctrlbar-Save_in_memo {
-               background-image: url(images/controlbar/01_controlbar_icon_Save_in_memo.png);
-       }
-       .ui-icon-ctrlbar-scan {
-               background-image: url(images/controlbar/01_controlbar_icon_scan.png);
-       }
-       .ui-icon-ctrlbar-unlock {
-               background-image: url(images/controlbar/01_controlbar_icon_unlock.png);
-       }
-       .ui-icon-ctrlbar-videocall {
-               background-image: url(images/controlbar/01_controlbar_icon_videocall.png);
-       }
-       .ui-icon-ctrlbar-Voice_command {
-               background-image: url(images/controlbar/01_controlbar_icon_Voice_command.png);
-       }
-       .ui-icon-ctrlbar-Add_buddy_to_chat {
-               background-image: url(images/controlbar/01_controlbar_icon_Add_buddy_to_chat.png);
-       }
-       .ui-icon-ctrlbar-add_tag {
-               background-image: url(images/controlbar/01_controlbar_icon_add_tag.png);
-       }
-       .ui-icon-ctrlbar-Chat {
-               background-image: url(images/controlbar/01_controlbar_icon_Chat.png);
-       }
-       .ui-icon-ctrlbar-view_file_history {
-               background-image: url(images/controlbar/01_controlbar_icon_view_file_history.png);
-       }
-/* ---------------------------------------------- */
-
-
-
-
-
-
-
-
-/* Button corner classes
------------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-corner-tl {
-       .LESSborder-radius-topleft(1em);
-}
-.ui-btn-corner-tr {
-       .LESSborder-radius-topright(1em);
-}
-.ui-btn-corner-bl {
-       .LESSborder-radius-bottomleft(1em);
-}
-.ui-btn-corner-br {
-       .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-top {
-       .LESSborder-radius-topleft(1em);
-       .LESSborder-radius-topright(1em);
-}
-.ui-btn-corner-bottom {
-       .LESSborder-radius-bottomleft(1em);
-       .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-right {
-       .LESSborder-radius-topright(1em);
-       .LESSborder-radius-bottomright(1em);
-}
-.ui-btn-corner-left {
-       .LESSborder-radius-topleft(1em);
-       .LESSborder-radius-bottomleft(1em);
-}
-.ui-btn-corner-all {
-       .LESSborder-radius-all(0.2em);  //wongi_1013 
 }
 
-/* radius clip workaround for cleaning up corner trapping */
-.ui-corner-tl,
-.ui-corner-tr,
-.ui-corner-bl, 
-.ui-corner-br,
-.ui-corner-top,
-.ui-corner-bottom, 
-.ui-corner-right,
-.ui-corner-left,
-.ui-corner-all,
-.ui-btn-corner-tl,
-.ui-btn-corner-tr,
-.ui-btn-corner-bl, 
-.ui-btn-corner-br,
-.ui-btn-corner-top,
-.ui-btn-corner-bottom, 
-.ui-btn-corner-right,
-.ui-btn-corner-left,
-.ui-btn-corner-all {
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
-}
+.ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
+       width: 32 * @unit_base; 
+       height: 32 * @unit_base;
 
-/* Overlay / modal
------------------------------------------------------------------------------------------------------------*/
-
-.ui-overlay {
-       background: #666;
-       opacity: .5;
-       filter: Alpha(Opacity=50);
-       position: absolute;
-       width: 100%;
-       height: 100%;
-}
-.ui-overlay-shadow {
-       //.LESSbox-shadow(0px, 0px, 12px, rgba(0,0,0,.6));
-}
-.ui-shadow {
-       //.LESSbox-shadow(0px, 1px, 4px, rgba(0,0,0,.3));
-}
-.ui-bar-a .ui-shadow,
-.ui-bar-b .ui-shadow ,
-.ui-bar-c .ui-shadow  {
-       //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.3));
-}
-.ui-shadow-inset {
-       //-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-       //-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 
-       //box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-}
-.ui-icon-shadow {
-       //.LESSbox-shadow(0px, 1px, 0, rgba(255,255,255,.4));
-}
-
-/* Focus state - set here for specificity
------------------------------------------------------------------------------------------------------------*/
-
-.ui-focus {
-       /* global-active-background-color */
-       //.LESSbox-shadow(0px, 1px, 12px, #387bbe);
-       outline-color : #008cd2;
-}
-
-/* unset box shadow in browsers that don't do it right
------------------------------------------------------------------------------------------------------------*/
+       background-repeat: no-repeat;
+       background-size: 100% 100%;
 
-.ui-mobile-nosupport-boxshadow * {
-       -moz-box-shadow: none !important;
-       -webkit-box-shadow: none !important;
-       box-shadow: none !important;
 }
 
-/* ...and bring back focus */
-.ui-mobile-nosupport-boxshadow .ui-focus {
-       outline-width: 2px;
+.ui-btn-up-s {
+       .ui-icon-header-back-btn { background-image: url(images/00_icon_Back.png); }
+       .ui-icon-naviframe-more { background-image: url(images/00_icon_more.png); }
+       .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); }
+       .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit.png); }
+       .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus.png); }
+}
+
+.ui-btn-down-s, .ui-btn-hover-s {
+       .ui-icon-header-back-btn { background-image: url(images/00_icon_Back_press.png); }
+       .ui-icon-naviframe-more { background-image: url(images/00_icon_more_press.png); }
+       .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); }
+       .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit_press.png); }
+       .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus_press.png); }
 }