# 
# ***** BEGIN LICENSE BLOCK *****
# Zimbra Collaboration Suite Web Client
# Copyright (C) 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2016 Synacor, Inc.
#
# This program is free software: you can redistribute it and/or modify it under
# the terms of the GNU General Public License as published by the Free Software Foundation,
# version 2 of the License.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
# without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
# See the GNU General Public License for more details.
# You should have received a copy of the GNU General Public License along with this program.
# If not, see <https://www.gnu.org/licenses/>.
# ***** END LICENSE BLOCK *****
# 
##########################################################################
#                            Skin Substitutions                          #
#------------------------------------------------------------------------#
#
#  Add or change entries below to customize this skin.  
#     See:  http://wiki.zimbra.com/?title=Themes
#
#========================================================================#


SkinName		= base
SkinVersion		= 2


##########################################################################
#                           Logo Licensing Rules 	   		 	         #
#------------------------------------------------------------------------#
#
#  If you are using the Zimbra Collaboration Suite (ZCS) under the 
#  open source license, and you have not modifed the software, 
#  then you are required to use the Zimbra logo (the default). 
#
#
#-------------------------------------------------------------------------
#  If you are using ZCS under the open source license, 
#  and you have modified the software, 
#  then you are required to use the Zimbra Inside logo. 
#
#	LogoImgDir		= /zimbra/skins/_base/logos/ZimbraInside
#	LogoURL			= https://www.zimbra.com
#
#-------------------------------------------------------------------------
#  If you are using ZCS under the network (commercial) license, 
#  then you are welcome to use your own logo in place of the Zimbra logo,
#  or to retain the original Zimbra logo. 
#
#	LogoImgDir		= /zimbra/skins/@SkinName@/logos
#	LogoURL			= http://www.yourcompany.com
#
#========================================================================#
LogoImgDir		= @AppContextPath@/skins/carbon/logos
LogoURL			= https://www.zimbra.com

##########################################################################
#                               Skin Colors                              #
#------------------------------------------------------------------------#
#
#

AppC						= #EFE7D4
AltC						= #BCCBD6
SelC						= #FFC
TxtC						= #000

SkinImgDir					= @AppContextPath@/skins/@SkinName@/img
SkinAnimatedImgDir			= @AppContextPath@/img/animated
ImgDir						= @AppContextPath@/img
DwtImgDir					= @AppContextPath@/img/dwt

LoginBannerImg				= @LogoImgDir@/LoginBanner.png
LoginBannerWidth			= 440px
LoginBannerHeight			= 100px

AppBannerImg				= @LogoImgDir@/AppBanner.png
AppBannerWidth				= 120px
AppBannerHeight				= 35px

# Specify the width/height of ads when using skins that support them
SidebarAdWidth				= 0
TopAdHeight					= 0
BottomAdHeight				= 0

HilightColor				= #E3DA93
HilightColor-blurred		= #DDD
MatchedColor				= @HilightColor@
RightClickColor				= @HilightColor@
HeaderColor					= @darken(AppC,10)@
HeaderColor-hover			= @darken(AppC,15)@
HeaderColor-selected		= @darken(AppC,10)@
ValueChangedColor			= @darken(AltC,50)@
	
InputColor					= black
InputBgColor				= white
WidgetBgColor				= @darken(AppC,10)@

InlineErrorPanel			= background-color:#FF9; padding:.5em 1em; @roundCorners(8px)@

#####################
# Logical zones in the skin
#####################

ChromeBg					= background-color:@AppC@;
ChromeText					= @Text@

InsetBg						= background-color:@lighten(AppC,90)@;
InsetText					= @Text@

ToolbarColor				= @AltC@
ToolbarBg					= background-color:@ToolbarColor@;
VToolbarBg					= @ToolbarBg@
ToolbarContainer			= height:29px; padding-top:2px; @ToolbarBg@ border:solid @Darken(ToolbarColor,20)@; border-width:0 1px 1px 1px;
InlineToolbarContainer		= @ToolbarContainer@ border-left-width:0;

TreeContainer				= @PanelContainer@
TreeHeaderContainer			= @BottomSeparator@ background-color:@HeaderColor@;
TreeHeaderText				= @Text@ font-weight:bold;

PageBg						= background-color:@lighten(AppC,25)@;
PageHeaderBg				= background-color:@HeaderColor@;
PageHeaderText				= @Text@

AppBg						= background-color:@lighten(AppC,75)@;
AppBorder					= @NormalInsetBorder@

SashBg						= background-color:@AppC@;

ListBg						= @PanelBg@
ListBorder					= @PanelBorder@

WizardBg					= @PageBg@

PanelColor					= @lighten(AppC,60)@
PanelBg						= background-color:@PanelColor@;
PanelBorder					= border:solid @darken(AppC,50)@; border-width:0 1px 1px 0;
PanelContainer				= @PanelBg@ @PanelBorder@

LoginPanelOuterBorer		= @LightWindowOuterBorder@
LoginPanelInnerBorder		= @LightWindowInnerBorder@

SplashOuterBorder			= @PanelContainer@ width:600px; @PopupShadow@ @HugeRoundCorners@
SplashInnerBorder			= background-color:@light

#####################
# Actual skin containers (for setting borders, background colors, etc).
#	These are applied to, eg, <div id='skin_border_logo'> in the skin.css file
#####################

SkinOuter					= @ChromeBg@
SkinBorderLogo				=

SkinBorderSearch			= @PanelContainer@ height:31px; padding:3px 5px 2px; @roundCorners(5px)@
SkinBorderSBToolbar			= @ToolbarContainer@ @AppTabRoundCorners@ padding-top:0;
SkinBorderSB				= @PanelContainer@  height:225px;
SkinBorderSBSash			= @VSashSize@

SkinBorderUsername			= height:30px; @AppTabRoundCorners@ background-color:@AppTabColor@; border:solid @Darken(AppC,30)@;  border-width:1px;
SkinBorderQuota				= height:auto; width:100%;
SkinBorderCurrentApp		= @ToolbarContainer@
SkinBorderTree				= @PanelContainer@ width:100%; height:100%;
SkinBorderMiniCal			= @PanelContainer@ height:135px;

SkinBorderTreeSash			= @HSashSize@

SkinBorderAppChooser		= height:30px; @AppTabRoundCorners@ border:solid @Darken(AppC,30)@;  border-width:0 0 1px 0;
SkinBorderAppToolbar		= @ToolbarContainer@ 
SkinBorderAppNewButton		= @ToolbarContainer@ 
SkinBorderApp				= @PanelContainer@ border-left-width :1px;

SkinBorderPage				= @PageBg@  @NormalOutsetBorder@
SkinBorderStatus			= 

SkinTextQuota				= @Text@
SkinTextUsername			= @Text@


#####################
#	Fonts
#####################

FontFamily-default			= font-family:"Segoe UI","Lucida Sans","Lucida Sans Unicode","Lucida Grande","DejaVu Sans",sans-serif;
FontFamily-fixed			= font-family:monospace;
FontFamily-html				= font-family:Helvetica, Arial, sans-serif;

FontSize-normal				= font-size:11px;
FontSize-big				= font-size:13px;
FontSize-bigger				= font-size:15px; font-weight:bold;
FontSize-biggest			= font-size:18px; font-weight:bold;
FontSize-small				= font-size:10px;
FontSize-smaller			= font-size:9px;
FontSize-miniscule			= font-size:6px;
FontSize-html				= font-size:10pt;

#####################
#	Text colors and styles (for use on widgets, Page, Header and App regions -- other regions may have different colors)
#####################
Text						= color:@TxtC@;
Label-wrap					= color:@TxtC@;
Label						= color:@TxtC@; overflow:hidden; white-space:normal;
Label-light					= color:#666;
Text-light					= color:#CCC;
Text-required				= color:darkred;
Text-disabled				= color:@darken(AppC,60)@;
Text-contrast				= color:white;
Text-hover					= @Text@
Text-active					= @Text@		
Text-selected				= @Text@		
Text-default				= @Text@
Text-focused				= @Text@:
Text-today					= color:darkred;
Text-unread					= @Text@ 			font-weight:bold;
Text-deleted				= @Text-disabled@ 	text-decoration:line-through;
Text-important				= color:darkred;
Text-error					= color:darkred; 	font-weight:bold;
Text-success				= color:green;
Text-matched				= color:@TxtC@;
Text-hint					= color:@darken(AppC,55)@; font-style:italic;
Text-anchor					= color:darkblue;	text-decoration:none;
Text-anchor-hover			= color:darkblue;	text-decoration:underline;
Text-anchor-active			= color:darkgreen;	text-decoration:underline;
Text-anchor-disabled		= @Text-disabled@	text-decoration:none;

InputText					= color:@InputColor@;

#####################
#	colors for different kinds of notices and progress bar
#####################
InfoContainer				= background-color:#E5F5FF; border-color:cornflowerblue;
InfoText					= @Text@
WarningContainer			= background-color:#FFFFBB; border-color:gold;
WarningText					= @Text@
CriticalContainer			= background-color:#F5BFBF; border-color:red;
CriticalText				= @Text@
AlertColor					= background-color:darkorange;


#####################
#	Random colors
# TODO: rearrange this
#####################

SeparatorColor				= @darken(AppC,30)@
LightSeparatorColor			= @darken(AppC,15)@
DarkSeparatorColor			= @darken(AppC,55)@


# Drag and drop colors
DragBg						= background-color:@HilightColor@;
DragText					= @Text@
DropBg						= background-color:@HilightColor@;
DropText					= @Text@
DropAllowedColor			= green
DropNotAllowedColor 		= red


# backgrounds for various states
SelectedBg					= background-color:@AltC@ !important;
SelectedBg-blurred			= background-color:@HilightColor-blurred@ !important;
MatchedBg					= background-color:@MatchedColor@;
RightClickBg				= background-color:@RightClickColor@;
SelectedRow					= background-color:@SelC@ !important;
		
Transparent					= transparent


WindowTitleText				= @FontSize-big@; font-weight:bold; padding:0 5px 2px;
WindowTitleText-normal		= @Text-contrast@
WindowTitleText-light		= @Text@






#####################
#	WidgetHeader -- headers of trees, lists, message header, etc
# TODO: separate these out?
#####################

WidgetHeaderContainer			= @BottomSeparator@; padding-top:1px;
WidgetHeaderContainer-normal	= background-color:@HeaderColor@;
WidgetHeaderContainer-hover		= background-color:@HeaderColor-hover@;
WidgetHeaderContainer-selected	= background-color:@HeaderColor-selected@;



#####################
# 	Colors and borders for "Widgets" (buttons, selects and tabs)
#####################
WidgetBorder			= @SmallRoundCorners@
WidgetBorder-normal		= background-color:@WidgetBgColor@;					@NormalOutsetBorder@
WidgetBorder-disabled	= background-color:@Transparent@;					@DisabledBorder@ 	@DisabledCursor@
WidgetBorder-hover		= background-color:@AppC@;							@NormalOutsetBorder@
WidgetBorder-selected	= background-color:@lighten(AppC,75)@ !important;	@NormalOutsetBorder@
WidgetBorder-active		= background-color:@lighten(AppC,75)@;				@NormalInsetBorder@
WidgetBorder-default	= background-color:@lighten(AltC,50)@;				@DefaultBorder@
WidgetBorder-focused	= background-color:@SelC@;							@FocusBorder@

WidgetBorder-light		= background-color:@AppC@;	@NormalOutsetBorder@
WidgetBorder-dark		= @ToolbarBg@;				@MediumOutsetBorder@






## BACKGROUNDS OF WIDGETS
# TODO: rename us!
ZTransparentBg				= background-color:transparent;

ZFieldBg-normal				= background-color:white;
ZFieldBg-error				= background-color:#F3F1BF;
ZFieldBg-required			= background-color:#FFFEE6;
ZFieldBg-focused			= background-color:@SelC@;
ZFieldBg-disabled			= background-color:transparent;




#####################
#	Inputs: input type=[text|password] elements only
#####################
InputBorder					= border:1px solid; border-color:@darken(AppC,75)@ @darken(AppC,10)@ @darken(AppC,10)@ @darken(AppC,75)@;
InputBorder-disabled		= border:1px solid @darken(AppC,10)@;
InputPadding				= padding:0em .3em;

InputField					= @WidgetHeight@	@TextCursor@			@InputPadding@
InputField-normal			= @InputText@		@ZFieldBg-normal@		@InputBorder@
InputField-focused			= @InputText@		@ZFieldBg-normal@		@InputBorder@
InputField-error			= @InputText@		@ZFieldBg-error@ 		@InputBorder@
InputField-required			= @InputText@		@ZFieldBg-required@ 	@InputBorder@
InputField-disabled			= @Text-disabled@	@ZFieldBg-disabled@		@InputBorder-disabled@
InputField-hint				= @Text-hint@


#####################
#	"TextArea" inputs
#####################
TextAreaPadding				= padding:.2em .3em;

TextArea					= @TextCursor@		@TextAreaPadding@
TextArea-normal				= @InputText@		@ZFieldBg-normal@		@InputBorder@
TextArea-focused			= @InputText@		@ZFieldBg-normal@		@InputBorder@
TextArea-error				= @InputText@		@ZFieldBg-error@ 		@InputBorder@
TextArea-required			= @InputText@		@ZFieldBg-required@ 	@InputBorder@
TextArea-disabled			= @Text-disabled@	@ZFieldBg-disabled@		@InputBorder-disabled@



#####################
#	Tooltip
#####################
TooltipContainer			= @PopupWindowBorder@
TooltipText					= @Text@
TooltipText-label			= @Label@
TooltipArrowContainer		= @PopupWindowBorder@ border-width:0 1px 0 0; padding:0; @borderRadius@:0; @cssShadow@:none;



#####################
#	FieldSet
#####################
FieldSet					= border:1px solid @SeparatorColor@; margin:7px 10px 10px; padding:10px;
FieldSetLabel				= @Label@ font-weight:bold;


#####################
#	Normal button, like in a dialog
#####################

Button						= @ButtonHeight@	@ActiveCursor@
	
ButtonBorder				= @SmallRoundCorners@
ButtonBorder-normal			= @WidgetBorder-normal@
ButtonBorder-disabled		= @WidgetBorder-disabled@
ButtonBorder-hover			= @WidgetBorder-hover@
ButtonBorder-active			= @WidgetBorder-active@
ButtonBorder-focused		= @WidgetBorder-focused@
ButtonBorder-selected		= @WidgetBorder-selected@
ButtonBorder-default		= @WidgetBorder-default@
	
ButtonText					= text-align:center;
ButtonText-normal			= @Text@
ButtonText-disabled			= @Text-disabled@
ButtonText-hover			= @Text-hover@
ButtonText-active			= @Text-active@
ButtonText-focused			= @Text-focused@
ButtonText-selected			= @Text-selected@
ButtonText-default			= @Text-default@
	
	

#####################
#	Buttons inside toolbars
#####################
	
ToolbarButton					= @ButtonHeight@ @ActiveCursor@
ToolbarButtonSpacing			= 
	
ToolbarButtonBorder				= @TransparentBorder@ @SmallRoundCorners@
ToolbarButtonBorder-normal		= @TransparentBorder@
ToolbarButtonBorder-disabled	= @TransparentBorder@
ToolbarButtonBorder-hover		= @WidgetBorder-hover@
ToolbarButtonBorder-active		= @WidgetBorder-active@
ToolbarButtonBorder-default		= @WidgetBorder-default@
ToolbarButtonBorder-focused		= @WidgetBorder-focused@
ToolbarButtonBorder-selected	= @WidgetBorder-selected@
	
ToolbarButtonText				= @NoWrap@
ToolbarButtonText-normal		= @Text@
ToolbarButtonText-disabled		= @Text-disabled@
ToolbarButtonText-hover			= @Text-hover@
ToolbarButtonText-active		= @Text-active@
ToolbarButtonText-default		= @Text-default@
ToolbarButtonText-focused		= @Text-focused@



#####################
#	Select
#####################

Select						= @WidgetHeight@ @ActiveCursor@
SelectSpacing				= 

SelectBorder				=
SelectBorder-normal			= @WidgetBorder-normal@
SelectBorder-disabled		= @WidgetBorder-disabled@
SelectBorder-hover			= @WidgetBorder-hover@
SelectBorder-active			= @WidgetBorder-active@
SelectBorder-focused		= @WidgetBorder-focused@

SelectText					= text-align:left;	padding:0 6x;	@NoWrap@
SelectText-normal			= @Text@	 
SelectText-disabled			= @Text-disabled@ 
SelectText-hover			= @Text-hover@ 
SelectText-active			= @Text-active@ 
SelectText-focused			= @Text-focused@
SelectText-empty			= @Text-disabled@ font-style:italic;

#####################
#	NORMAL TABS
#####################

TabBar						= padding-top:3px;
TabBarHeight				= height:23px;
TabBarPrefix				= @TabBarBottomBorder@ @TabBarHeight@ clear:left; float:left; width:1em;
TabBarSuffix				= @TabBarBottomBorder@ @TabBarHeight@ clear:right; width:100%;


Tab							= float:left; clear:none; position:relative; @ActiveCursor@
TabSpacing					= 
TabBottomBorder				= border-bottom:1px solid @TabBgColor@; 
TabBgColor					= @WidgetBgColor@
TabBgColorSelected			= white

TabOutsetBorder				= @NormalOutsetBorder@	@TabBottomBorder@	background-color:@TabBgColor@;
TabInsetBorder				= @NormalInsetBorder@	@TabBottomBorder@	background-color:@TabBgColor@;
TabFocusBorder				= @FocusBorder@			@TabBottomBorder@	background-color:@TabBgColor@;
TabDisabledBorder			= @DisabledBorder@		@TabBottomBorder@	background-color:@lighten(TabBgColor,50)@; @DisabledCursor@

TabBorder					= position:relative; 	@roundCorners(4px 4px 0 0)@
TabBorder-normal			= @TabOutsetBorder@
TabBorder-disabled			= @TabDisabledBorder@
TabBorder-hover				= @TabOutsetBorder@
TabBorder-active			= @TabInsetBorder@		
TabBorder-focused			= @TabFocusBorder@		
TabBorder-selected			= @NormalOutsetBorder@	background-color:@TabBgColorSelected@; border-bottom:2px solid @TabBgColorSelected@;

TabText						= padding:3px 15px; text-align:center; white-space:nowrap;
TabText-normal				= @Text@
TabText-disabled			= @Text-disabled@
TabText-hover				= @Text-hover@
TabText-active				= @Text-active@
TabText-focused				= @Text-focused@
TabText-selected			= @Text@


#####################
# 	APP TABS
#####################

AppTab						= height:25px;
AppTabSpacing				= margin-right:6px;
AppTabColor					= @darken(AppC,10)@

AppTabBorder				= border:solid 1px @Darken(AppTabColor,20)@; text-align:center;	@NoWrap@ position:relative;	@AppTabRoundCorners@
AppTabBorder-normal			= background-color:@AppTabColor@; @Text@ @AppTabBottomBorder@
AppTabBorder-disabled		= background-color:@AppTabColor@; @Text-disabled@ @AppTabBottomBorder@
AppTabBorder-hover			= background:@Darken(AppTabColor,20)@;  @Text-hover@	@AppTabBottomBorder@
AppTabBorder-active			= @WidgetBorder-selected@		@AppTabBottomBorder@
AppTabBorder-focused		= @WidgetBorder-focused@		@AppTabBottomBorder@
AppTabBorder-selected		= @ToolbarBg@	@MediumOutsetBorder@	@AppTabBottomBorder@


AppTabText					= padding:0 5px; text-align:center;	@NoWrap@
AppTabText-normal			= @Text@
AppTabText-disabled			= @Text-disabled@
AppTabText-hover			= @Text-hover@
AppTabText-active			= @Text-active@
AppTabText-focused			= @Text-focused@
AppTabText-selected			= @Text@			


#####################
#   ANCHORS AND ZIMLETS
#####################

Anchor						= @Text-anchor@				@ActiveCursor@
Anchor-hover				= @Text-anchor-hover@		background-color:transparent; 
Anchor-active				= @Text-anchor-active@		background-color:@HilightColor@; 
Anchor-disabled				= @Text-anchor-disabled@	@DisabledCursor@
Anchor-matched				= @Text@					background-color:@MatchedColor@; text-decoration:none;

ZimletBg					= @Anchor@
ZimletBg-Hover				= @Anchor-hover@


#####################
#   MENUS
#####################
MenuContainer				= @PopupWindowBorder@

MenuItem					= @ActiveCursor@

MenuItemBorder				= padding-left:2px; padding-right:2px;	border-left-width:0; border-right-width:0;	@ActiveCursor@
MenuItemBorder-normal		= @TransparentBorder@
MenuItemBorder-disabled		= @TransparentBorder@
MenuItemBorder-hover		= @WidgetBorder-hover@
MenuItemBorder-active		= @WidgetBorder-active@
### NECESSARY ??? ###
MenuItemBorder-focused		= @WidgetBorder-focused@
### NECESSARY ??? ###
MenuItemBorder-selected		= @WidgetBorder-selected@


MenuItemText				= text-align:left;	@NoWrap@
MenuItemText-normal			= @Text@
MenuItemText-disabled		= @Text-disabled@
MenuItemText-hover			= @Text-hover@
MenuItemText-active			= @Text-active@
### NECESSARY ??? ###
MenuItemText-default		= @Text-default@
### NECESSARY ??? ###
MenuItemText-focused		= @Text-focused@
	
MenuItemTextPadding			= height:16px; padding:0 2px 0 5px; white-space:nowrap; 
MenuItemSeparator			= @PrettyBottomSeparator@

MenuCongruentLeft			= border-right:none !important; @trRadius@:0; @brRadius@:0;
MenuCongruentRight			= border-left:none !important; @tlRadius@:0; @blRadius@:0;

MenuScrollHeight			= height:10px;
MenuScrollArrowMargin		= 3px


#####################
#   LISTS
#####################

ListContainer					= @ListBg@
ListContainerWithBorder			= @AppBg@ @NormalInsetBorder@

ListHeaderContainer				= height:24px;	
	
ListColHeaderContainer			= padding-left:@TextPaddingSize@;	@NoWrap@	@OverflowEllipsis@	@ActiveCursor@
ListColHeaderContainer-normal	= @WidgetHeaderContainer@	@WidgetHeaderContainer-normal@
ListColHeaderContainer-hover	= @WidgetHeaderContainer@	@WidgetHeaderContainer-hover@
ListColHeaderContainer-selected	= @WidgetHeaderContainer@	@WidgetHeaderContainer-selected@

ListColHeaderText				= 
ListColHeaderText-normal		= @Text@
ListColHeaderText-hover			= @Text@
ListColHeaderText-selected		= @Text@
	
ListRowsContainer				= 


#####################
#   LIST ITEMS
#####################

# TODO: use padding/etc so we don't have to define colors twice?
ListItemBgColor-normal			= @lighten(AppC,95)@
ListItemBgColor-alt				= @lighten(AppC,75)@
ListItemBgColor-hover			= @lighten(AppC,25)@
ListItemBgColor-active			= @lighten(AppC,25)@
ListItemBgColor-matched			= @MatchedColor@
ListItemBgColor-selected		= @SelC@
ListItemBgColor-actioned		= @RightClickColor@ !important


ListItemContainer				= @ListItemHeight@;			@ActiveCursor@			border-style:solid; border-width:1px 0; border-color:@lighten(AppC,60)@;
ListItemContainer-normal		= background-color:@ListItemBgColor-normal@;		border-top-color:@ListItemBgColor-normal@;
ListItemContainer-alt			= background-color:@ListItemBgColor-alt@;			border-top-color:@ListItemBgColor-alt@;
ListItemContainer-disabled		= background-color:@ListItemBgColor-normal@;		border-top-color:@ListItemBgColor-normal@;
ListItemContainer-hover			= background-color:@ListItemBgColor-hover@; 		border-top-color:@ListItemBgColor-hover@;
ListItemContainer-active		= background-color:@ListItemBgColor-active@; 		border-top-color:@ListItemBgColor-active@;
ListItemContainer-matched		= background-color:@ListItemBgColor-matched@; 		border-style:solid; border-width:1px 0; border-color:@ListItemBgColor-normal@;
ListItemContainer-selected		= background-color:@ListItemBgColor-selected@; 		border-color:@ListItemBgColor-selected@;
ListItemContainer-focused		= 													@FocusBorder@ border-width:1px 0;
ListItemContainer-sel-focus		= background-color:@ListItemBgColor-selected@; 		@SelBorder@ border-width:1px 0;
ListItemContainer-actioned		= background-color:@ListItemBgColor-actioned@;		border-color:@ListItemBgColor-actioned@;
ListItemContainer-dragProxy		= background-color:@ListItemBgColor-actioned@;

ListItemText					= vertical-align:middle; white-space:nowrap; overflow:hidden;	@OverflowEllipsis@
ListItemText-normal				= @Text@
ListItemText-alt				= @Text@
ListItemText-disabled			= @Text-disabled@
ListItemText-hover				= @Text@
ListItemText-active				= @Text@
ListItemText-matched			= @Text@
ListItemText-focused			= @Text@
ListItemText-selected			= @Text@
ListItemText-sel-focus			= @Text@
ListItemText-actioned			= @Text@
ListItemText-dragProxy			= @Text@

#####################
#   OVERVIEW TREE
#####################

TreeItem					= @TransparentBg@ @TreeItemHeight@	@ActiveCursor@
TreeItemText				= @Text@
TreeItemSelectedBg			= background-color:@SelC@;

ZimletHeaderBackground		= background:url(@AppContextPath@/skins/_base/base2/img/zim_grad.png); repeat-x;
OverviewSection				= background-color:@lighten(AppC,70)@; border-top:1px solid @AppC@; border-bottom:1px solid @AppC@;
OverviewZimletSection		= @ZimletHeaderBackground@

#####################
#   PROGRESS BARS
#####################

ProgressBarContainer			= @FixBoxModel@ width:100px; height:10px; @NormalInsetBorder@ border-width:1px;
ProgressBarContainer-unused		= background-color:white;
ProgressBarContainer-info		= @InfoContainer@
ProgressBarContainer-warning	= @WarningContainer@
ProgressBarContainer-critical	= @CriticalContainer@


################
#    TOASTER
################

ToastText					= font-size:14px; font-weight:bold; text-align:center; color:@darken(AltC,90)@; margin-top:-1px; padding-left:21px;
ToastContainer				= @blRadius@:5px; @brRadius@:5px; @ToastOpacity@ border:2px solid; border-top:none;background-color:@lighten(AltC,50)@;border-color:@darken(AltC,30)@;
ToastContainer-info			= @InfoContainer@		@InfoText@
ToastContainer-warning		= @WarningContainer@	@WarningText@
ToastContainer-critical		= @CriticalContainer@	@CriticalText@
ToastContent				= padding:0.75em 1.4em;

################
#    VEIL
################
VeilColor					= background-color:white;


################
#   NOTICE 
#
#   -- little information panel		
#  TODOC: WHERE ?
################
NoticeText					= font-weight:bold;
NoticeContainer				= @WindowOuterBorder@	
NoticeContainer-info		= @InfoContainer@		@InfoText@
NoticeContainer-warning		= @WarningContainer@	@WarningText@
NoticeContainer-critical	= @CriticalContainer@	@CriticalText@





################
#   HORIZONTAL SASH - splits a pane into two tall panels
################
HSashSize					= width:@SashSize@;	height:100%;
HSashContainer				= @HSashSize@ @SashBg@ @ColResizeCursor@ border-left:1px solid @SeparatorColor@; border-right:1px solid @DarkSeparatorColor@;
HSashThumb					= margin-left:1px;



###################
#   VERTICAL SASH - splits a pane into two wide panels
###################
VSashSize					= height:@SashSize@;	width:100%;
VSashContainer				= @VSashSize@ @SashBg@ @RowResizeCursor@ border-top:1px solid @SeparatorColor@; border-bottom:1px solid @DarkSeparatorColor@;
VSashThumb					= margin-top:1px;




#####################
#	SLIDERS
#####################

Slider						= text-align:left; vertical-align:top;

SliderBorder				= background-color:@AltC@;			@AltInsetBorder@		@SmallRoundCorners@
SliderThumbBorder			= background-color:@WidgetBgColor@;	@NormalOutsetBorder@	@SmallRoundCorners@

HSliderSize					= width:200px; height:20px;
HSliderBorder				= @SliderBorder@

HSliderThumbSize			= width:16px; height:100%;
HSliderThumbBorder			= @SliderThumbBorder@ height:100%; padding:2px 0 0 2px; width:16px;

VSliderSize					= width:20px; height:200px;
VSliderBorder				= @SliderBorder@

VSliderThumbSize			= width:16px; height:16px;
VSliderThumbBorder			= @SliderThumbBorder@ height:100%; padding:2px 0 0 2px; width:100%;


################
#    VIRTUAL WINDOWS, eg: for Chat
################
WindowBg					= @AppBg@
WindowContainer				= @WindowBg@	@LightWindowOuterBorder@
WindowContainer-focused		= @WindowBg@	@WindowOuterBorder@



###################
###################
###################
#
#	APP OR SKIN REGION SPECIFIC STUFF
#
###################
###################
###################


###################
#   SEARCH BUILDER
###################

PickerContainer				= @PageBg@ @RightSeparator@ @PickerSize@
SearchHelperToolbarMargin	= margin-top:3px;
SBMinHeight                     = 50px;
SBMaxHeight                     = 300px; 


###################
#   DRAG AND DROP STUFF
###################

DndAllowedContainer			= @DragBg@ border:2px solid @DropAllowedColor@ !important;
DndNotAllowedContainer		= @DragBg@ border:2px solid @DropNotAllowedColor@ !important;	


################
#   BORDERS
#
#	Cross-platform borders created from the skin "colors", 
#	use these rather than hard-coding borders for a particular widget, etc
#
################

TransparentBorder			= margin:0; border:1px solid transparent;

NormalOutsetBorder			= margin:0; border:1px solid; border-color:@darken(AppC,20)@ @darken(AppC,40)@ @darken(AppC,40)@ @darken(AppC,20)@;
MediumOutsetBorder			= margin:0; border:1px solid; border-color:@darken(AppC,40)@ @darken(AppC,50)@ @darken(AppC,50)@ @darken(AppC,40)@;
DarkOutsetBorder			= margin:0; border:1px solid; border-color:@darken(AppC,50)@ @darken(AppC,75)@ @darken(AppC,75)@ @darken(AppC,50)@;

NormalInsetBorder			= margin:0; border:1px solid; border-color:@darken(AppC,50)@ @darken(AppC,20)@ @darken(AppC,20)@ @darken(AppC,50)@;
MediumInsetBorder			= margin:0; border:1px solid; border-color:@darken(AppC,40)@ @darken(AppC,30)@ @darken(AppC,30)@ @darken(AppC,40)@;
DarkInsetBorder				= margin:0; border:1px solid; border-color:@darken(AppC,75)@ @darken(AppC,50)@ @darken(AppC,50)@ @darken(AppC,75)@;

AltOutsetBorder				= margin:0; border:1px solid; border-color:@darken(AltC,20)@ @darken(AltC,40)@ @darken(AltC,40)@ @darken(AltC,20)@;
AltInsetBorder				= border:1px solid; border-color:@darken(AltC,50)@ @darken(AltC,20)@ @darken(AltC,20)@ @darken(AltC,50)@;

SelOutsetBorder				= margin:0; border:1px solid; border-color:@darken(SelC,20)@ @darken(SelC,40)@ @darken(SelC,40)@ @darken(SelC,20)@;
SelInsetBorder				= margin:0; border:1px solid; border-color:@darken(SelC,50)@ @darken(SelC,20)@ @darken(SelC,20)@ @darken(SelC,50)@;

DisabledBorder				= border:1px solid; border-color:@darken(AppC,10)@;
DefaultBorder				= @AltOutsetBorder@
FocusBorder					= @NormalOutsetBorder@
SelBorder					= @SelOutsetBorder@

DragBorder					= @FocusBorder@

FieldBorder					= border:1px solid;	border-color:@darken(AppC,80)@ @darken(AppC,30)@ @darken(AppC,30)@ @darken(AppC,80)@;
AppTabBottomBorder			= border-bottom-width:0;
TabBarBottomBorder			= border-bottom:1px solid @darken(AppC,30)@;

WindowOuterBorder			= padding:6px; @BigRoundCorners@ @DarkOutsetBorder@		@PopupShadow@	background-color:@darken(AppC,65)@;
WindowInnerBorder			= padding:4px; @BigRoundCorners@ @DarkInsetBorder@		@PageBg@									
LightWindowOuterBorder		= padding:6px; @BigRoundCorners@ @MediumOutsetBorder@	@PopupShadow@	background-color:@darken(AppC,10)@;	
LightWindowInnerBorder		= padding:4px; @BigRoundCorners@ @MediumInsetBorder@					background-color:@lighten(AppC,50)@;					

PopupWindowBorder			= padding:6px; @BigRoundCorners@	@PopupShadow@	background-color:@lighten(AltC,50)@;	border:solid @darken(AltC,40)@; border-width:0 1px 1px 0;

SmallTransparentBorder		= padding:2px; border:0;
SmallOutsetBorder			= padding:1px; border:1px solid; border-color:@darken(AppC,20)@ @darken(AppC,40)@ @darken(AppC,40)@ @darken(AppC,20)@;
SmallInsetBorder			= padding:1px; border:1px solid; border-color:@darken(AppC,50)@ @darken(AppC,20)@ @darken(AppC,20)@ @darken(AppC,50)@;


#IFDEF MSIE_6
TransparentBorder			= margin:0; border:1px none; border-color:transparent;
#ENDIF



################
#	OPACITY -- use these rather than having lots of IFDEFS in the CSS files
################
Icon-disabled				= @opacity(40)@
ToastOpacity				= @opacity(95)@
HalfOpacity					= @opacity(50)@
VeilOpacity					= @opacity(50)@
DndOpacity					= @opacity(70)@
FullOpacity					= @opacity(100)@


################
#	CURSORS - Use these rather than setting the properties directly in CSS to avoid x-platform weirdness
################
InactiveCursor				= cursor:default;
ActiveCursor				= cursor:pointer;
DisabledCursor				= cursor:default !important; cursor:not-allowed !important;
BusyCursor					= cursor:wait;
TextCursor					= cursor:text;
RowResizeCursor				= cursor:s-resize; cursor:row-resize;
ColResizeCursor				= cursor:e-resize; cursor:col-resize;
MoveCursor					= cursor:move;






################
#   Widget sizing
################


TreeMinWidth				= 150px
TreeMaxWidth				= 300px
TreeStartWidth				= 170px

WidgetHeight				= height:22px;

ButtonHeight				= height:24px;
TextButtonWidth				= width:60px; overflow:visible;
ListItemHeight				= height:18px;
#IFDEF MSIE
ListItemHeight				= height:20px;
#ENDIF
ListItemHeightDouble		= height:36px;
TreeItemHeight				= height:18px;


WidgetHeaderSize			= @WidgetHeight@
WidgetHeaderSize-medium		= height:26px;
WidgetHeaderSize-big		= height:36px;

PickerSize					= width:200px;
SashSize					= 8px

MiniCalButtonSize			= 

TextPaddingSize				= 3px
#IFDEF MSIE
TextPaddingSize				= 2px
#ENDIF
PanelPaddingSize			= 10px
BoxPaddingSize				= 5px
BoxMarginSize				= 5px
SmallBoxPaddingSize			= 2px
SmallBoxMarginSize			= 2px

SmallIconWidth				= 16px
SmallIconHeight				= 16px
BigIconWidth				= 32px
BigIconHeight				= 32px


# The following are derived from the above
PanelPadding				= padding:@PanelPaddingSize@;

TextPadding					= padding-left:@TextPaddingSize@; padding-right:@TextPaddingSize@;
BoxMargin					= margin:@BoxMarginSize@;
BoxPadding					= padding:@BoxPaddingSize@;
BoxSpacing					= @BoxPadding@ @BoxMargin@
LeftBoxPadding				= padding-left:@BoxPaddingSize@;

SmallBoxPadding				= padding:@SmallBoxPaddingSize@;
SmallBoxMargin				= margin:@SmallBoxMarginSize@;
SmallBoxSpacing				= @SmallBoxPadding@ @SmallBoxMargin@

AddVerticalSpace			= margin:@BoxMarginSize@ 0;

ImagePadding				= padding-right:@BoxMarginSize@;

SmallIconSize				= width:@SmallIconWidth@; height:@SmallIconHeight@;
BigIconSize					= width:@SmallIconWidth@; height:@SmallIconHeight@;


################
# different separator pieces
################


SeparatorBorder				= border:1px solid @SeparatorColor@;
LeftSeparator				= border-left:1px solid @SeparatorColor@;
TopSeparator				= border-top:1px solid @SeparatorColor@;
BottomSeparator				= border-bottom:1px solid @SeparatorColor@;
RightSeparator				= border-right:1px solid @SeparatorColor@;
SeparatorBg					= background-color:@SeparatorColor@; padding:0;

PrettyBottomSeparator		= height:1px !important; border-bottom:1px solid @SeparatorColor@; @FixIESizeQuirk@

LeftSeparator-light			= border-left:1px solid @LightSeparatorColor@;
TopSeparator-light			= border-top:1px solid @LightSeparatorColor@;
RightSeparator-light		= border-right:1px solid @LightSeparatorColor@;
BottomSeparator-light		= border-bottom:1px solid @LightSeparatorColor@;

SectionLabel				= @Label@ @BottomSeparator@ @FontSize-bigger@



################
#	Syntactic sugar
################
FullSize					= width:100%; height:100%;
FullWidth					= width:100%;
FullHeight					= height:100%;
FullWindow					= position:absolute;left:0;top:0;width:100%;height:100%;
	
CompactTable				= border-collapse:collapse; border-spacing:0; padding:0;
TableFixed					= table-layout:fixed;
NoWrap						= white-space:nowrap; overflow:hidden;

TransparentBg				= 




################
#	ROUNDED CORNERS 
#	-- enabled for GECKO and SAFARI(v.3) -- NOT MSIE
################

NoRoundCorners				= 
SmallRoundCorners			= @roundCorners(1px)@
MediumRoundCorners			= @roundCorners(2px)@
BigRoundCorners				= @roundCorners(3px)@
HugeRoundCorners			= @roundCorners(8px)@
ComboBoxRoundCorners		= @roundCorners(0)@



#
###	Browser workarounds
#

DisableSelection			= user-select:none;
FixBoxModel					= box-sizing:border-box;
OverflowEllipsis			= text-overflow:ellipsis;
WordWrapPRE					= white-space:pre-wrap; /* CSS2 */	# from http://tinyurl.com/rw2jw
VerticalScrollOverflow		= overflow:-moz-scrollbars-vertical; overflow-x:hidden; overflow-y:auto;
FixIESizeQuirk				= font-size:1px; line-height:1px;


#IFDEF GECKO
FixBoxModel					= -moz-box-sizing:border-box;
DisableSelection			= -moz-user-select:none;
WordWrapPRE					= white-space:pre-wrap;
#ENDIF

#IFNDEF GECKO
WordWrapPRE					= white-space:pre-wrap; /* HP printers */	white-space:pre-wrap; /* CSS 2.1 */	white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */
#ENDIF

#IFDEF SAFARI
FixBoxModel					= box-sizing:border-box; -webkit-box-sizing:border-box;
DisableSelection			= -khtml-user-select:none;
#ENDIF

#IFDEF OPERA
WordWrapPRE					= white-space:pre-wrap; /* Opera 7 */ white-space:-pre-wrap; /* Opera 4-6 */
#ENDIF

#IFDEF MSIE_9_OR_HIGHER
WordWrapPRE					= white-space:pre-line; word-wrap:break-word !important; text-wrap:suppress !important;
#ENDIF


##TODO:  Keep these?  Deprecate the others?
AppColor			= @AppC@
AltColor			= @AltC@
SelColor			= @SelC@


################
#	SHORTHAND FOR SETTING ADVANCED CSS PROPERTIES 
#	-- Use these above so we can more easily support browsers 
#		that have these properties, as the property names are often
#		-moz-XXX or -webkit-XXX
#
################
lColor						= border-left-color
tColor						= border-top-color
rColor						= border-right-color
bColor						= border-bottom-color

PopupShadow					= 

#IFDEF GECKO
lColor						= -moz-border-left-colors
tColor						= -moz-border-top-colors
rColor						= -moz-border-right-colors
bColor						= -moz-border-bottom-colors

/* These should be deprecated in favor of the @roundCorners()@ function */
borderRadius				= -moz-border-radius
tlRadius					= -moz-border-radius-topleft
trRadius					= -moz-border-radius-topright
blRadius					= -moz-border-radius-bottomleft
brRadius					= -moz-border-radius-bottomright
cssShadow					= -moz-box-shadow
#ENDIF

#IFDEF SAFARI
borderRadius				= -webkit-border-radius
tlRadius					= -webkit-border-top-left-radius
trRadius					= -webkit-border-top-right-radius
blRadius					= -webkit-border-bottom-left-radius
brRadius					= -webkit-border-bottom-right-radius
cssShadow					= -webkit-box-shadow
PopupShadow					= -webkit-box-shadow:5px 5px 5px #666;
#ENDIF

#IFDEF MSIE_9_OR_HIGHER
borderRadius				= border-radius
tlRadius					= border-top-left-radius
trRadius					= border-top-right-radius
blRadius					= border-bottom-left-radius
brRadius					= border-bottom-right-radius
cssShadow					= box-shadow
PopupShadow					= box-shadow:5px 5px 5px #666;
#ENDIF




################
### NAMED BROWSER COLORS, here so skin functions can use them for reference
# NOTE: do not change these!
################
black = #000000
silver = #c0c0c0
gray = #808080
white = #ffffff
maroon = #800000
red = #ff0000
purple = #800080
fuchsia = #ff00ff
green = #008000
lime = #00ff00
olive = #808000
yellow = #ffff00
navy = #000080
blue = #0000ff
teal = #008080
aqua = #00ffff
aliceblue = #f0f8ff
antiquewhite = #faebd7
aquamarine = #7fffd4
azure = #f0ffff
beige = #f5f5dc
bisque = #ffe4c4
blanchedalmond = #ffebcd
blueviolet = #8a2be2
brown = #a52a2a
burlywood = #deb887
cadetblue = #5f9ea0
chartreuse = #7fff00
chocolate = #d2691e
coral = #ff7f50
cornflowerblue = #6495ed
cornsilk = #fff8dc
crimson = #dc143c
cyan = #00ffff
darkblue = #00008b
darkcyan = #008b8b
darkgoldenrod = #b8860b
darkgray = #a9a9a9
darkgreen = #006400
darkgrey = #a9a9a9
darkkhaki = #bdb76b
darkmagenta = #8b008b
darkolivegreen = #556b2f
darkorange = #ff8c00
darkorchid = #9932cc
darkred = #8b0000
darksalmon = #e9967a
darkseagreen = #8fbc8f
darkslateblue = #483d8b
darkslategray = #2f4f4f
darkslategrey = #2f4f4f
darkturquoise = #00ced1
darkviolet = #9400d3
deeppink = #ff1493
deepskyblue = #00bfff
dimgray = #696969
dimgrey = #696969
dodgerblue = #1e90ff
firebrick = #b22222
floralwhite = #fffaf0
forestgreen = #228b22
gainsboro = #dcdcdc
ghostwhite = #f8f8ff
gold = #ffd700
goldenrod = #daa520
greenyellow = #adff2f
grey = #808080
honeydew = #f0fff0
hotpink = #ff69b4
indianred = #cd5c5c
indigo = #4b0082
ivory = #fffff0
khaki = #f0e68c
lavender = #e6e6fa
lavenderblush = #fff0f5
lawngreen = #7cfc00
lemonchiffon = #fffacd
lightblue = #add8e6
lightcoral = #f08080
lightcyan = #e0ffff
lightgoldenrodyellow = #fafad2
lightgray = #d3d3d3
lightgreen = #90ee90
lightgrey = #d3d3d3
lightpink = #ffb6c1
lightsalmon = #ffa07a
lightseagreen = #20b2aa
lightskyblue = #87cefa
lightslategray = #778899
lightslategrey = #778899
lightsteelblue = #b0c4de
lightyellow = #ffffe0
limegreen = #32cd32
linen = #faf0e6
magenta = #ff00ff
mediumaquamarine = #66cdaa
mediumblue = #0000cd
mediumorchid = #ba55d3
mediumpurple = #9370db
mediumseagreen = #3cb371
mediumslateblue = #7b68ee
mediumspringgreen = #00fa9a
mediumturquoise = #48d1cc
mediumvioletred = #c71585
midnightblue = #191970
mintcream = #f5fffa
mistyrose = #ffe4e1
moccasin = #ffe4b5
navajowhite = #ffdead
oldlace = #fdf5e6
olivedrab = #6b8e23
orange = #ffa500
orangered = #ff4500
orchid = #da70d6
palegoldenrod = #eee8aa
palegreen = #98fb98
paleturquoise = #afeeee
palevioletred = #db7093
papayawhip = #ffefd5
peachpuff = #ffdab9
peru = #cd853f
pink = #ffc0cb
plum = #dda0dd
powderblue = #b0e0e6
rosybrown = #bc8f8f
royalblue = #4169e1
saddlebrown = #8b4513
salmon = #fa8072
sandybrown = #f4a460
seagreen = #2e8b57
seashell = #fff5ee
sienna = #a0522d
skyblue = #87ceeb
slateblue = #6a5acd
slategray = #708090
slategrey = #708090
snow = #fffafa
springgreen = #00ff7f
steelblue = #4682b4
tan = #d2b48c
thistle = #d8bfd8
tomato = #ff6347
turquoise = #40e0d0
violet = #ee82ee
wheat = #f5deb3
whitesmoke = #f5f5f5
yellowgreen = #9acd32
