add divider for tabbar
[platform/framework/web/web-ui-fw.git] / src / themes / tizen / tizen-white / style.less
index f1b79ad..3d26c77 100755 (executable)
-// Basic color set
-@color_bg:                             rgb(249, 249, 249);     // 249 249 249
-@color_bg_sub:                 rgb(36, 36, 36);        // 36 36 36     // TODO: used only in dialog group. Check more.
-
-@color_border:                 rgb(42, 42, 42);        // 42 42 42
-@color_header:                         rgb(68, 68, 74);        // 68 68 74
-
-@color_scrollbar:              rgb(218, 218, 218);
-
-@color_text:                           rgb(0, 0, 0);   // 0 0 0
-@color_text_dim:                       rgb(108, 115, 118);     // 108 115 118
-@color_text_focus:             @color_text;
+/***************************************************************************
+                   Body
+***************************************************************************/
+@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
+@color_text: rgb(0, 0, 0);     // 0 0 0
 @color_text_sub:                       rgb(102, 102, 102);     // 102 102 102
 @color_text_setting:           rgb(42, 109, 140);      // 42 109 140
-@color_text_input:             rgb(70, 70, 70);        // 70 70 70
-@color_text_cursor:            @color_text_setting;
-@color_text_segctrl:           rgb(158, 195, 213);     // 158 195 213  // TODO: used only in segctrl. Check more.
 
-//Dialogue color set
-@color_dialogue_main_text:     rgba(92, 151, 187, 1);
-@color_dialogue_sub_text:                              rgb(146,146,146);
-@color_list_dialogue_bg : rgba(236, 240, 242, 1);
-@color_dialogue_border_right:  rgba(142, 154, 163, 1);
 
-//Dialogue Editor color set
-@color_dialogue_editor_default_text:   rgb(70, 70, 70);
-@color_dialogue_editor_bg:                             rgb(0, 0, 0);
-@color_dialogue_editor_border:                 rgb(108, 168, 199);     
-/*************************
-  Vars/Mixins for Widgets
+/***************************************************************************
+                   Naviframe
+***************************************************************************/
+@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
+@color_bar_title_button_text : rgba(58, 58, 58, 1);                            /* B052L4 : Title text button */
+@color_bar_title_button_text_press : rgba(59, 115, 182, 1);    /* B052L5 : Title text button press */
+@color_bar_btn_press : rgba(64, 147, 247, 0.1);                                                        /* B052L1P : Title text button press bg */
+@color_bar_divider_line : rgba(192, 192, 192, 1);                                              /* 00_divider_line.9.png */
 
-  NOTE:
-    * Color variables' name: @color_<widget name>_<identifier>
-       * Color values: Use rgb() or rgba()
- *************************/
 
+/***************************************************************************
+                   Tabbar
+***************************************************************************/
+@color_tabbar_btn_tab_press : -webkit-linear-gradient(top,  rgba(210,210,200,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
+@color_tabbar_btn_pressed : rgba(59, 115, 182, 1);             /* B052L6P      : Tab pressed */
+@color_tabbar_btn_normal : rgba(153, 153, 153, 1);     /* B052L6               : Tab Normal */
 
 /***************************************************************************
-                   List 
+                   List
 ***************************************************************************/
+@color_list_bg:                                                                rgba(248, 246, 239, 1);                         /* B0211        : List bg color                 */
+@color_list_press :                                            rgba(87, 135, 194, 1);                          /* B041         : List Press color      */
+@color_list_border_bottom:             rgba(211, 209, 203, 0.5);                       /* B0221        : 1px line Code                 */
 @color_list_main_text_focus:           rgba(249, 249, 249, 1);
 @color_list_main_text_unfocus:         rgba(0, 0, 0, 1);
+@color_list_sub_text_default: rgba(100, 100, 100, 1);
 
-@color_list_border_bottom:             rgb(169, 169, 169);
-@color_list_main_text_read:            rgba(158, 158, 158, 1);
-@color_list_main_text_unread:  rgba(249, 249, 249, 1);
-@color_list_sub_text_default:          rgba(100, 100, 100, 1);
-@color_list_sub_text_settings: rgba(0, 140, 210, 1);
-@color_list_sub_text_focus:            rgba(249, 249, 249, 1);
-@color_list_flexible_text_main:        rgba(249, 249, 249, 1);
-@color_list_flexible_text_sub:         rgba(149, 149, 149, 1);
-@color_list_index_list:                        rgba(164, 164, 164, 1);
-@color_list_editfield_text:                    rgba(70, 70, 70, 1);
-@color_list_editfield_text_cursor:     rgba(0, 140, 210, 1);
-@color_list_multiline_text:            rgba(149, 149, 149, 1);
-@color_list_3line_main_text:           rgba(249, 249, 249, 1);
-@color_list_3line_main_text_read:      rgba(249, 249, 249, 1);
-@color_list_3line_main_text_focus:     rgba(249, 249, 249, 1);
-@color_list_3line_main_text2:          rgba(104, 137, 152, 1);
-@color_list_3line_main_text2_focus:    rgba(249, 249, 249, 1);
-@color_list_converter_style:           rgba(249, 249, 249, 1);
-@color_list_converter_style_focus:     rgba(249, 249, 249, 1);
-@color_list_unread_email:              rgba(249, 249, 249, 1);
-@color_list_contents_text:             rgba(210, 210, 210, 1);
-@color_list_name_text:                 rgba(129, 129, 129, 1);
-@color_list_name_text_dim:             rgba(0, 140, 210, 1);
-@color_list_colorbar:                          rgba(80, 107, 207, 1); //Temp, not defined
-@color_list_bubble_box_shadow: rgb(78, 78, 78);        // Not defined in GUI guide.
-@color_list_bubble_left_text:  rgb(0, 0, 0);
-@color_list_bubble_left_bg:            rgb(217, 230, 237);     // Not defined in GUI guide. Picked from image.
-@color_list_bubble_right_text: rgb(96, 96, 96);
-@color_list_bubble_right_bg:   rgb(217, 217, 217); // Not defined in GUI guide. Picked from image.
-@color_list_bubble_sos_text:   rgb(211, 0, 0);
-@color_list_bubble_date_text:  rgb(128, 128, 128);
-@color_list_bubble_date_bg:            rgba(225, 225, 225, 0);
-@color_list_bubble_time_text:  rgb(57, 166, 215);
-@color_list_bubble_link_text:  rgb(34, 129, 157);
-@color_list_bubble_failed_text:        rgb(211, 0, 0);
-@color_list_bubble_name_text:  rgb(57, 166, 215);
-@color_list_bubble_help_text:  rgb(146, 146, 146);
-@color_list_divider_bg :               rgb(209, 227, 238); /* #d1e3ee */
-@color_list_divider_text :             rgb(29, 100, 149); 
 @color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
+@color_list_divider_bg : rgba(248, 246, 239, 1);                                               /* W021L1 : Index BG                                    */
+@color_list_divider_text : rgba(59, 115, 182, 1);                                              /* W021L2 : Index bar                                   */
+
+@color_list_dialogue_bg : rgba(239, 237, 229, 1);
+@color_dialogue_main_text: rgba(59, 115, 182, 1);
+@color_dialogue_border_right: rgba(142, 154, 163, 1);
+
 @color_list_expandable_expanded_bg:    rgb(215, 225, 232);
-@color_list_press : rgba(42, 137, 194, 1);
-
-@font_size_list_main_text:             44 * @unit_base; //1.375rem;    /* 44 px */
-@font_size_list_sub_text:              32 * @unit_base; //1.0rem;      /* 32 px */
-@font_size_list_flexible_text_main:    48 * @unit_base; //1.5rem;      /* 48 px */
-@font_size_list_flexible_text_sub:     36 * @unit_base; //1.125rem;    /* 36 px */
-@font_size_list_index_list:            32 * @unit_base; //1.0rem;      /* 32 px */
-@font_size_list_editfield_text:                44 * @unit_base; //1.375rem;    /* 44 px */
-@font_size_list_multiline_text:                32 * @unit_base; //1.0rem;      /* 32 px */
-@font_size_list_3line_main_text:       42 * @unit_base; //1.3125rem;   /* 42 px */
-@font_size_list_3line_main_text2:      36 * @unit_base; //1.125rem;    /* 36 px */
-@font_size_list_converter_style:       40 * @unit_base; //1.3rem;      /* 40 px */
-@font_size_list_unread_email:          44 * @unit_base; //1.375rem;    /* 44 px */
-@font_size_list_contents_text:         30 * @unit_base; //0.94rem;     /* 30 px */
-@font_size_list_name_text:             32 * @unit_base; //1.0rem;      /* 32 px */
-
-@style_list_li_dialogue_margin_left: 16 * @unit_base;
-@style_list_li_dialogue_border_left_width: 10 * @unit_base;
-@style_list_bubble_date_height:        40 * @unit_base;
-@style_list_bubble_date_text_align:    center;
-
-.LESSlistDivider_Background{
-       background: @color_list_divider_bg;
-}
+@color_list_expanded_bg : rgba(220, 218, 211, 1);
+
+@color_list_bubble_sent_text:  rgb(0, 0, 0);
+@color_list_bubble_receive_text:       rgb(255, 255, 255);
+@color_list_bubble_sos_text:   rgb(233, 73, 73);
+@color_list_bubble_date_text:  rgb(104, 104, 104);
+@color_list_bubble_date_bg:            rgba(225, 225, 225, 0);
+@color_list_bubble_time_sent_text:     rgb(57, 166, 215);
+@color_list_bubble_time_receive_text:  rgb(211, 0, 0);
+@color_list_bubble_time_sos_text:      rgb(211, 0, 0);
+@color_list_bubble_name_text:  rgb(139, 139, 139);
+@color_list_bubble_help_text:  rgb(154, 154, 154);
+@color_list_bubble_link_text:  rgb(34, 129, 157);
+
+@list-font-size-main:  22 * @unit_base;
+@list-font-size-sub:   16 * @unit_base;
+@list-font-size-divider: 16 * @unit_base;      // NOTE: defined in dialogue group
+
+@list-font-weight:             normal;
+
+@list-smallicon-size: 17 * @unit_base;
+@list-li-padding-horizontal: 8 * @unit_base;
+
+@list-bigicon-size: 64 * @unit_base;
+@list-bigicon-size2: 72 * @unit_base;
 
 /***************************************************************************
                    Shortcut Scroll
 ***************************************************************************/
-@color_shortcutscroll_rollover_bg: none;
-@color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1);
-@color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png
-@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
-@color_shortcutscroll_popup_text: rgb(42, 137, 194);
+@color_fastscroll_rollover_bg: rgba(230, 227, 216, 1);         /* B0723 : 00_fast_scroll_rollover_bg.9.png */
+@color_fastscroll_rollover_text: rgba(160, 159, 154, 1);       /* B0721 : Rollover text */
+@color_fastscroll_popup_bg: rgba(59, 115, 182, 1);                             /* B0731 : 00_fast_scroll_popup_bg.png */
+@color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
+@color_fastscroll_popup_text: rgba(255, 255, 255, 1);                  /* B0732 : Scroll popup text */
+
+
+/***************************************************************************
+                   SearchBar(forms.textinput)
+***************************************************************************/
+@color_searchbar_bg : rgba(248, 246, 239, 1);
+@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
+@color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
+@color_searchbar_border : rgba(153, 153, 153, 1);
+
+
+/***************************************************************************
+                   Popup
+***************************************************************************/
+@font_size_popup_info_style: 24 * @unit_base;
+@color_popup_text_bg: rgba(248, 246, 239, 1);                                                          /* B061L1 : Popop info                                  */
+
+
+/***************************************************************************
+                        Button(connected with other winset)
+***************************************************************************/
+@color_button_EditText:         rgb(249, 249, 249);
+@color_button_EditTextPress:    rgb(61, 61, 61);
+
+@color_button_text_normal:      rgb(54, 49, 51);
+@color_button_text_press:       rgb(248, 246, 239);
+@color_button_text_white:       rgb(249, 249, 249);
+
+@color_button_normal:           rgb(235, 232, 227);
+@color_button_normal_webkit:    -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_moz:       -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_o:         -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_ms:        -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_press:            rgb(59, 115, 182);
+
+@color_button_inner:            rgb(247, 245, 238);
+@color_button_inner_webkit:     -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_moz:        -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_o:          -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_ms:         -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+
+@button_shadow_outer:              0 0 1px 1px rgba(255, 255, 255, 1);
+@button_shadow_inner:          none;
+
+@color_button_edit:                    rgb(201, 88, 88);
+@color_button_edit_webkit:             -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
+@color_button_edit_moz:                        -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
+
+.LESSbutton_box_style{
+        color: @color_button_text_normal;
+}
+
+.LESSbutton_up_style{
+        background: @color_button_normal;
+        background: @color_button_normal_webkit;
+        background: @color_button_normal_moz;
+        background: @color_button_normal_o;
+        background: @color_button_normal_ms;
+}
+
+.LESSbutton_box_style{
+       background: @color_button_normal;
+       background: @color_button_normal_webkit;
+       background: @color_button_normal_moz;
+       background: @color_button_normal_o;
+       background: @color_button_normal_ms;
+       border: 1px solid;
+       border-color: rgba(220, 218, 211, 1);
+       .LESSbox-shadow-line( @button_shadow_outer );
+}
+.LESSbutton_inner_box_style{
+       background: @color_button_inner;
+       background: @color_button_inner_webkit;
+       background: @color_button_inner_ms;
+       background: @color_button_inner_o;
+       background: @color_button_inner_moz;
+       .LESSbox-shadow-line( @button_shadow_inner );
+}
+.LESSbutton_inner_pressstyle{
+        color: @color_button_text_press;
+}
+
+.LESSbutton_text1_style{
+        font-family: @font_family;
+        font-weight: normal;
+        font-size: 1.0rem;
+        font-style:normal;
+        color: @color_button_text_black;
+}
+
+.LESSbutton_hover_style{
+        color: @color_button_text_normal;
+}
+
+.LESSbutton_down_style{
+        background: @color_button_press;
+        color: @color_button_text_press;
+}
+
+.LESSbutton_edit_style{
+       background: @color_button_edit;
+       background: @color_button_edit_webkit;
+       background: @color_button_edit_moz;
+}
+
+/***************************************************************************
+                        contextual popup
+***************************************************************************/
+@color_ctxpopup_text:                   rgb(255, 255, 255);
+@color_ctxpopup_background:             rgb(68, 68, 68);
+@color_ctxpopup_border_left:            rgb(91, 91, 91);
+@color_ctxpopup_border_right:           rgb(45, 45, 45);
+@color_ctxpopup_border_top:             rgb(91, 91, 91);
+@color_ctxpopup_border_bottom:          rgb(45, 45, 45);
+
+@color_ctxbutton_press:            rgb(59, 115, 182);
+
+@color_ctxpopup_timepicker_text:        rgba( 249, 249, 249, 0.4 );
+@color_ctxpopup_timepicker_text_focus:  rgba( 249, 249, 249, 1 );
+@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
+
+
+/***************************************************************************
+                   Scrollview
+***************************************************************************/
+@color_scrollbar:              rgb(198, 196, 190);
+
+
+/***************************************************************************
+                   Date Time picker
+***************************************************************************/
+@color_timepicker_selector_color:      rgb(42,137,194);
+@font_size_datetime_main_text:              22 * @unit_base;
+@font_size_datetime_sub_text:               16 * @unit_base;
+
+
+/***************************************************************************
+                   DaySelector
+***************************************************************************/
+@color_dayselector_Btn_Sat:            rgba(0, 168, 231, 1); /* #00a8e7 */
+@color_dayselector_Btn_Sun:            rgba(240, 20, 2, 1); /* #f01402 */
+@color_dayselector_Btn_Mon_to_Fri:     rgba(249, 249, 249, 1); /* #f9f9f9 */   
+@color_dayselector_Btn_border:         rgba(26, 82, 116, 1); /* #f9f9f9 */     
+
+@color_dayselector_Btn_normal_start:   rgb(126, 157, 178);
+@color_dayselector_Btn_normal_end:     rgb(84,121,144);
+
+@color_dayselector_Btn_press_start:    rgb(59,119,150);
+@color_dayselector_Btn_press_end:      rgb(47,91,117);
+
+
+.LESSDayselectorButtonNormal{
+       .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+
+.LESSDayaselectorButtonPress{
+       .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
+
+
+/***************************************************************************
+                   OptionHeader
+***************************************************************************/
+@color_optionheader_Background:        rgba(26, 82, 116, 1); 
+@color_optionheader_bt:                -webkit-linear-gradient(top,  rgb(56,112,141) 0%,rgb(36,93,128) 100%);
+@color_optionheader_bt_press:  -webkit-linear-gradient(top,  rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_optionheader_tab_text:  rgba(249, 249, 249, 1); /* #f9f9f9 */
+
+
+/***************************************************************************
+                   SegmentControl
+***************************************************************************/
+@color_segmentcontrol_btn_normal : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
+
+@color_segmentcontrol_btn_press : rgb(59,119,150);
+@color_segmentcontrol_btn_press_start : rgb(59,119,150);
+@color_segmentcontrol_btn_press_end : rgb(47,91,117);
+
+@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
+@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+
+/***************************************************************************
+                   ControlGroup
+***************************************************************************/
+@color_controlgroup_btn_border : rgba(192, 192, 192, 1);                                               /* 00_divider_line.9.png */
 
 
 /***************************************************************************
 ***************************************************************************/
 @color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
 @color_popup_text_progress_title:      rgba(249, 249, 249, 1);
-/* TODO : ninepatch popup title */
+
 @color_popup_title_bg:         rgba(80, 147, 182, 255);        /* popup_title_bg.png */
-@color_popup_text_bg:          rgba(236, 240, 242, 255);       /* popup_bg.png */
-@color_popup_button_bg:                rgba(209, 221, 228, 255);       /* popup_button_bg.png */
-@color_popup_font:                     white;
+
+@color_popup_button_bg:                rgba(248, 246, 239, 1);
+@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
 @color_popup_text_font:                black;
 
 @color_popup_buttonbg:         rgb(84, 126, 153);
 @color_popup_buttonbg_o:       -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
 @color_popup_buttontext:       rgb(249, 249, 249);
 @color_popup_buttonbg_over:    rgb(94, 136, 163);
+
 @color_popup_buttonbg_press:   rgb(67, 160, 217);
 @color_popup_buttonbg_press_webkit:    -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
 @color_popup_buttonbg_press_moz:       -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 @color_popup_buttonbg_press_ms:                -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 @color_popup_buttonbg_press_o:         -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 
-@color_popup_scroller_bg:      rgb(249, 249, 249);
+@color_popup_scroller_bg:      rgba(248, 246, 239, 1);
+
 
-@font_size_popup_info_style:                   42 * @unit_base; //1.3125rem;   /* 42px */
-@font_size_popup_basic_style_title:            38 * @unit_base; //1.1875rem;   /* 38px */
+@font_size_popup_basic_style_title:            24 * @unit_base; //1.1875rem;   /* 38px */
 @font_size_popup_center_progressbar_title:     26 * @unit_base; //0.8125rem;   /* 26px */
 @font_size_popup_text_progress_title:          42 * @unit_base; //1.3125rem;   /* 42px */
 @font_size_popup_button_text:                  32 * @unit_base; //1.0rem;      /* 32px */
 
 .LESSpopup_button_style{
-       background: @color_popup_buttonbg;
+/*     background: @color_popup_buttonbg;
        background: @color_popup_buttonbg_webkit;
        background: @color_popup_buttonbg_moz;
        background: @color_popup_buttonbg_ms;
        background: @color_popup_buttonbg_o;
-       color: @color_popup_buttontext;
+       color: @color_popup_buttontext;*/
 }
 
 .LESSpopup_button_hover_style{
 .LESSpopup_padding_style{
 }
 
+
 /***************************************************************************
                     Button
 ***************************************************************************/
 
-@color_button_normal:          rgb(151, 161, 167);
-@color_button_normal_webkit:   -webkit-gradient(linear, left top, left bottom, from(rgb(151, 161, 167)), to(rgb(122, 132, 141)));
-@color_button_normal_moz:      -moz-linear-gradient(top, rgb(151, 161, 167), rgb(122, 132, 141));
-
-@color_button_press:           rgb(67, 160, 217);
-@color_button_press_webkit:    -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
-@color_button_press_moz:       -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-
-@color_button_hover:           rgb(161, 171, 177);
-
-@color_button_text_normal:     rgb(249, 249, 249);
 @color_button_text_black:      rgb(0, 0, 0);
-@color_button_text_white:      rgb(249, 249, 249);
-@color_button_text_press:      rgb(249, 249, 249);
 
 @color_circlebutton_hover:             rgb(239, 119, 126);
 @color_circlebutton_hover_webkit:      -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
 @color_circlebutton_press_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
 @color_circlebutton_press_moz:         -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 
-@color_button_EditText:                rgb(249, 249, 249);
-@color_button_EditTextPress:   rgb(249, 249, 249);
-@color_button_EditBG:          rgb(0, 0, 0);
-@color_button_EditBGPress:     rgb(0, 140, 210);
 
 @color_button_switch_BGon:             rgb(42, 126, 172);
 @color_button_switch_BGon_webkit:      -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
 @radius_button_switch: 4px;
 @radius_button_switch_reed: 2px;
 
-@color_button_edit:                    rgb(201, 88, 88);
-@color_button_edit_webkit:             -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
-@color_button_edit_moz:                        -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
-
 @color_button_edit_press:              rgb(147, 24, 24);
 @color_button_edit_press_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
 @color_button_edit_press_moz:          -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
 
-.LESSbutton_up_style{
-       background: @color_button_normal;
-       background: @color_button_normal_webkit;
-       background: @color_button_normal_moz;
-}
-
-.LESSbutton_hover_style{
-       background: @color_button_hover;
-       color: @color_button_text_white;
-}
-
-.LESSbutton_down_style{
-       background: @color_button_press;
-       background: @color_button_press_webkit;
-       background: @color_button_press_moz;
-       color: @color_button_text_white;
-}
-
-.LESSbutton_text1_style{
-       font-family: @font_family;
-       font-weight: normal;
-       font-size: 1.0rem;
-       font-style:normal;
-       color: @color_button_text_black;
-       &:hover {color: @color_button_text_black;}
-}
-
-.LESSbutton_box_style{
-       color: @color_button_text_white;
-       &:hover {color: @color_button_text_white;}
-}
-
-.LESScirclebutton_hover_style{
-       border-width: 0px;
-       background: @color_circlebutton_hover;
-       background: @color_circlebutton_hover_webkit;
-       backgronnd: @color_circlebutton_hover_moz;
-}
-
-.LESScirclebutton_press_style{
-       border-width: 0px;
-       background: @color_circlebutton_press;
-       background: @color_circlebutton_press_webkit;
-       background: @color_circlebutton_press_moz;
-}
 
 .LESStoggleswitch_on_style{
        background: @color_button_switch_BGon;
        -moz-border-radius: @radius_button_switch_reed;
 }
 
-.LESSbutton_edit_style{
-       background: @color_button_edit;
-       background: @color_button_edit_webkit;
-       background: @color_button_edit_moz;
-       font-weight:bold;
-       color: rgb(249, 249, 249);
-}
-
 .LESSbutton_editpress_style{
        background: @color_button_edit_press;
        background: @color_button_edit_press_webkit;
        padding: 0.5em 0.8em;
 }
 
-/***************************************************************************
-                   Date Time picker color set
-***************************************************************************/
-@color_timepicker_selector_color:      rgb(42,137,194);
-
-/***************************************************************************
-                  Contextual Popup 
-***************************************************************************/
-@color_ctxpopup_text:                  rgb(19, 58, 83);
-@color_ctxpopup_background:            rgb(219, 229, 239);
-@color_ctxpopup_border_left:   rgb(225, 235, 241);
-@color_ctxpopup_border_right:  rgb(174, 184, 190);
-@color_ctxpopup_border_bottom: rgb(153, 176, 195);
-@color_ctxpopup_timepicker_text:       rgba( 249, 249, 249, 0.4 );
-@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
-
-/***************************************************************************
-                    DaySelector
-***************************************************************************/
-@color_dayselector_Btn_Sat:            rgba(0, 168, 231, 1); /* #00a8e7 */
-@color_dayselector_Btn_Sun:            rgba(240, 20, 2, 1); /* #f01402 */
-@color_dayselector_Btn_Mon_to_Fri:     rgba(249, 249, 249, 1); /* #f9f9f9 */   
-@color_dayselector_Btn_border:         rgba(26, 82, 116, 1); /* #f9f9f9 */     
-
-@color_dayselector_Btn_normal_start:   rgb(126, 157, 178);
-@color_dayselector_Btn_normal_end:     rgb(84,121,144);
-
-@color_dayselector_Btn_press_start:    rgb(59,119,150);
-@color_dayselector_Btn_press_end:      rgb(47,91,117);
-
-
-.LESSDayselectorButtonNormal{
-       .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
-}
-
-.LESSDayaselectorButtonPress{
-       .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
-}
-
-
-/***************************************************************************
-                    OptionHeader
-***************************************************************************/
-@color_optionheader_Background:        rgba(26, 82, 116, 1); 
-@color_optionheader_bt:                -webkit-linear-gradient(top,  rgb(56,112,141) 0%,rgb(36,93,128) 100%);
-@color_optionheader_bt_press:  -webkit-linear-gradient(top,  rgb(74,164,218) 0%,rgb(43,138,195) 100%);
-@color_optionheader_tab_text:  rgba(249, 249, 249, 1); /* #f9f9f9 */
-
-
-/***************************************************************************
-                    SearchBar(forms.textinput)
-***************************************************************************/
-@color_searchbar_bg : rgba(215, 225, 232, 1);   /* #242424 */
-@color_searchbar_default_text : rgba(121, 131, 138, 1);       /* #828282 */
-@color_searchbar_input_field_bg : rgba(249, 249, 249, 1); /* #F9F9F9*/
-
-
-/***************************************************************************
-                    SegmentControl
-***************************************************************************/
-@color_segmentcontrol_btn_normal : rgb(125,157,178);
-@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
-@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
-
-@color_segmentcontrol_btn_press : rgb(59,119,150);
-@color_segmentcontrol_btn_press_start : rgb(59,119,150);
-@color_segmentcontrol_btn_press_end : rgb(47,91,117);
-
-@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
-@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
-
-.LESSSegmentControlBtnBackground
-{
-       .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
-}
-
-.LESSSegmentControlBtnPressBackground
-{
-       .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
-}
-
-/***************************************************************************
-                    ControlGroup
-***************************************************************************/
-@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
-
-
-/***************************************************************************
-                    Header / Footer 
-                    NavigationBar / ControlBar
-***************************************************************************/
-@color_bar_bg : rgb(156, 181, 179);
-@color_bar_bg_start : rgb(156, 181, 179);
-@color_bar_bg_end : rgb(79,116,141);
-
-@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-@color_bar_btn_press : rgba(0, 0, 0, 0.1);
-@color_bar_btn_bg : transparent;
-@color_bar_back_btn_bg : transparent;
-
-@color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
-@color_bar_seg_text_press : rgba(249, 249, 249, 1); 
-@color_bar_seg_text_normal : rgba(249, 249, 249, 1); 
-@color_bar_seg_btn_press : -webkit-linear-gradient(top,  rgb(61,120,151) 0%,rgb(48,91,118) 100%);
-@color_bar_seg_btn_normal : -webkit-linear-gradient(top,  rgb(127,159,181) 0%,rgb(70,108,133) 100%);
-
-@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-
-@color_bar_title_bg : rgb(90, 153, 186);
-@color_bar_title_bg_start : rgb(90, 153, 186);
-@color_bar_title_bg_end : rgb(32, 84, 115);
-
-@color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png  temp value */
-
-@color_bar_footer_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_bar_footer_btn_bg : transparent;
-
-@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
-@color_controlbar_tabbbar_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_controlbar_toolbbar_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_controlbar_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_controlbar_btn_press : -webkit-linear-gradient(top,  rgb(61,121,150) 0%,rgb(48,91,118) 100%);
-
-@color_border_top : rgba(255, 255, 255, 0.5);
-@color_border_bottom : rgba(0, 0, 0, 0.5);
-
-.LESSHeaderFooterBackground
-{
-       .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
-}
-
-.LESSColorBarTitleBackground
-{
-       .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
-}
 
 /***************************************************************************
                     Tickernoti
 ***************************************************************************/
-@color_ticker_bg:                      rgb(13, 60, 89);
-@color_ticker_text1:                   rgb(249, 249, 249);
-@color_ticker_text2:                   rgb(202, 211, 217);
-@color_ticker_btn:                     rgb(22, 76, 110);
+@color_ticker_bg:                      rgb(68, 68, 68);
+@color_ticker_text1:                   rgb(255, 255, 255);
+@color_ticker_text2:                   rgb(255, 255, 255);
+@color_ticker_btn:                     rgb(64, 64, 64);
+@color_ticker_btn_border:              rgb(50, 50, 50);
 
 
 /***************************************************************************
                     Smallpopup
 ***************************************************************************/
-@color_smallpopup_bg:                  rgb(215, 225, 232);
-@color_smallpopup_text:                        rgb(77, 77, 77);
+@color_smallpopup_bg:                  rgb(68, 68, 68);
+@color_smallpopup_text:                        rgb(255, 255, 255);
 
 
 /***************************************************************************
                     No Contents
 ***************************************************************************/
-@color_nocontents_text:                        rgb(154, 145, 154);
+@color_nocontents_text:                        rgb(128, 128, 128);
 
 
 /***************************************************************************
                     Slider
 ***************************************************************************/
-@color_slider_handle_text:             rgb(42, 137, 194);
+@color_slider_handle_text:             rgb(59, 115, 182);
 @color_slider_popup_text:              rgb(249, 249, 249);
 
 
 /***************************************************************************
                     Progress
 ***************************************************************************/
-@color_progress_bar0:                  rgb(178, 178, 178);
-@color_progress_bar1:                  rgb(42, 137, 194);
+@color_progress_bar0:                  rgb(202, 200, 196);
+@color_progress_bar1:                  rgb(246, 243, 239);
+@color_progress_boarder:               rgb(163, 160, 158);
+@color_progress_value0:                        rgb(54, 119, 195);
+@color_progress_value1:                        rgb(150, 184, 224);
 
 
 /***************************************************************************
 ***************************************************************************/
 @color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
 
+
 /***************************************************************************
                    multimediaview
 ***************************************************************************/
 @color_multimediaview_bg : rgb(249, 249, 249);
-@color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
-@color_multimediaview_button_bg : rgb(249, 249, 249);
-@color_multimediaview_timestamp_text : rgb(42, 137, 194);
+@color_multimediaview_control_bg : rgba(248, 246, 239, 0.5);
+@color_multimediaview_button_bg : rgb(248, 246, 239);
+@color_multimediaview_timestamp_text : rgb(74, 132, 201);
 @color_multimediaview_duration_text : rgb(128, 128, 128);
-@color_multimediaview_bar_gray : rgb(178, 178, 178);
-@color_multimediaview_bar_active : rgb(42, 137, 194);
+@color_multimediaview_bar_gray : rgb(203, 200, 197);
+@color_multimediaview_bar_active : rgb(74, 132, 201);
 @color_multimediaview_bar_handle : rgb(249, 249, 249);
+@color_multimediaview_button_border : rgb(186, 185, 180);
 
-/***************************************************************************
-                   Color widgets
-***************************************************************************/
-@color_widgets_title_bg: rgb(235, 239, 241);
-@color_widgets_basic_border: rgb(192, 192, 192);
-@color_widgets_left_border: rgb(108, 168, 199);
-
-.LESScolortitle_background_style{
-        background-color: @color_widgets_title_bg;
-        border: 1px solid;
-        border-color: @color_widgets_basic_border;
-        border-left: 6px solid;
-        border-left-color: @color_widgets_left_border;
+.LESSmultimediaview_bar_active_style{
+       background-color : @color_multimediaview_bar_active;
+       background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(98, 137, 217)), to(rgb(41, 91, 152)));
+       background-image : -moz-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
+       background-image : -o-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
+       background-image : -ms-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
 }
 
-.LESShsvpicker_background_style{
-        background-color: @color_widgets_title_bg;
-        border: 1px solid;
-        border-color: @color_widgets_basic_border;
-        border-left: 6px solid;
-        border-left-color: @color_widgets_left_border;
+.LESSmultimediaview_bar_handle_style{
+       background-color : @color_multimediaview_bar_handle;
+       background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(230, 230, 230)));
+       background-image : -moz-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
+       background-image : -o-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
+       background-image : -ms-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
 }
 
-.LESSpalette_background_style{
-        background-color: @color_widgets_title_bg;
-        border: 1px solid;
-        border-top: 6px solid;
-        border-color: @color_widgets_basic_border;
-}
-
-
-/***************************************************************************
-                   multibutton entry
-***************************************************************************/
-@color_multibuttonentry_bg : rgb(249, 249, 249);
-@color_multibuttonentry_block_text : rgb(255, 255, 255);
-@color_multibuttonentry_block_bg : rgb(93, 160, 196);
-@color_multibuttonentry_block_border : rgb(88, 150, 184);
-@color_multibuttonentry_press_bg : rgb(40, 106, 145);
-@color_multibuttonentry_press_border : rgb(49, 126, 171);
-@color_multibuttonentry_input_text : #222222;
-@color_multibuttonentry_link_bg : rgb(178, 178, 178);
-@color_multibuttonentry_link : rgb(249, 249, 249);
-
-/***************************************************************************
-***************************************************************************/
 
 /***************************************************************************
-                  virtualgrid
+                   tokentextarea
 ***************************************************************************/
-@color_virtualgrid_bg : rgb(255, 255, 255);
+@color_tokentextarea_block_text : rgb(255, 255, 255);
+@color_tokentextarea_block_bg : rgb(95, 138, 189);
+@color_tokentextarea_press_bg : rgb(54, 89, 132);
+@color_tokentextarea_input_text : #222222;
+@color_tokentextarea_link : rgb(186, 185, 180);
+@color_tokentextarea_label_text : rgb(102, 102, 102);
 
-/***************************************************************************
-****************************************************************************
-                                                                       Layout ( position, padding, margin etc...)
-****************************************************************************
-***************************************************************************/
-@style-title-font-size : 52 * @unit_base;
 
-@style-corner-radius : .3em;
-@style-title-extended-2btn-width : 688 * @unit_base;
-@style-title-extended-2btn-radio-width : 343 * @unit_base;
-@style-title-extended-3btn-width : 688 * @unit_base;
-@style-title-extended-3btn-radio-width : 229 * @unit_base;
-@style-title-extended-4btn-width : 688 * @unit_base;
-@style-title-extended-4btn-radio-width : 171 * @unit_base;
-
-@style-back-btn-left : 44 * @unit_base;
-@style-back-btn-arrow-top : 30 * @unit_base;
-
-@style-title-min-height : 62 * @unit_base;
-@style-title-extended-margin : -30 * @unit_base;
 /***************************************************************************
-                                                                       Navigation
 ***************************************************************************/
-
-.LESStitle-diff-style {
-       text-align: left;
-       margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
-}
-
-.LESSextended-controlgroup-border {
-       border-style : solid;
-       border-width : 1px;
-       border-bottom-width: 2px;
-
-       border-bottom-color: @color_border_bottom;
-       border-top-color: @color_border_top;
-       border-left-color: @color_bar_seg_btn_border;
-       border-right-color: @color_bar_seg_btn_border;
-}
-
-.LESSback-btn-background {
-       background : none;
-}
-
-.LESSbtn-back {
-       width : 144 * @unit_base;
-       height : 114 * @unit_base;
-       top : 0 * @unit_base;
-       right : 0 * @unit_base;
-}
-
-.LESSbtn-back-inner {
-       width : 144 * @unit_base;
-       height : 114 * @unit_base;
-}
-
-.LESSbtn-arrow-position {
-       left : 20 * @unit_base;
-       top : 30 * @unit_base;
-}
-
-.LESSdialogue-border-style {
-       border-right-style : solid;
-       border-right-color : @color_dialogue_border_right;
-       border-right-width : 1px;
-}
-
-.LESSdialogue-divider {
-       padding-top : 36 * @unit_base;
-       padding-bottom : 10 * @unit_base;
-       padding-left : 10 * @unit_base;
-
-       margin-left : 16 * @unit_base;
-       margin-right : 16 * @unit_base;
-
-       background : @color_list_dialogue_bg;
-       font-size : 32 * @unit_base;
-       font-weight : bold;
-       color : @color_dialogue_main_text;
-}