###################################
#  
#	NOTE: Substitutions that begin and end with "_" (eg: "_SkinName_") should only be used within this file -- never in another CSS file
#
###################################



###################################
#
#  YOU CAN CHANGE THE FOLLOWING AND THEY SHOULD SURVIVE TO FUTURE VERSIONS OF ZCS:
#
###################################

_SkinName_		= dark

SkinImgDir					= /zimbra/skins/money/img

#######
# Colors.  
#######


_BaseColor_		=	#0e2c0b

_BaseColorD95_		=	#010201
_BaseColorD90_		=	#010401
_BaseColorD85_		=	#020702
_BaseColorD80_		=	#030902
_BaseColorD75_		=	#040b03
_BaseColorD70_		=	#040d03
_BaseColorD65_		=	#050f04
_BaseColorD60_		=	#061204
_BaseColorD55_		=	#061405
_BaseColorD50_		=	#071606
_BaseColorD45_		=	#081806
_BaseColorD40_		=	#081a07
_BaseColorD35_		=	#091d07
_BaseColorD30_		=	#0a1f08
_BaseColorD25_		=	#0b2108
_BaseColorD20_		=	#0b2309
_BaseColorD15_		=	#0c2509
_BaseColorD10_		=	#0d280a
_BaseColorD5_		=	#0d2a0a

_BaseColorL5_		=	#1a3717
_BaseColorL10_		=	#264123
_BaseColorL15_		=	#324c30
_BaseColorL20_		=	#3e563c
_BaseColorL25_		=	#4a6148
_BaseColorL30_		=	#566b54
_BaseColorL35_		=	#627660
_BaseColorL40_		=	#6e806d
_BaseColorL45_		=	#7a8b79
_BaseColorL50_		=	#879685
_BaseColorL55_		=	#93a091
_BaseColorL60_		=	#9fab9d
_BaseColorL65_		=	#abb5aa
_BaseColorL70_		=	#b7c0b6
_BaseColorL75_		=	#c3cac2
_BaseColorL80_		=	#cfd5ce
_BaseColorL85_		=	#dbdfda
_BaseColorL90_		=	#e7eae7
_BaseColorL95_		=	#f3f4f3


_SelColor_		=	black

_SelColorD95_		=	#0a0a0a
_SelColorD90_		=	#141414
_SelColorD85_		=	#1f1f1f
_SelColorD80_		=	#292929
_SelColorD75_		=	#333333
_SelColorD70_		=	#3d3d3d
_SelColorD65_		=	#474747
_SelColorD60_		=	#525252
_SelColorD55_		=	#5c5c5c
_SelColorD50_		=	#666666
_SelColorD45_		=	#707070
_SelColorD40_		=	#7a7a7a
_SelColorD35_		=	#858585
_SelColorD30_		=	#8f8f8f
_SelColorD25_		=	#999999
_SelColorD20_		=	#a3a3a3
_SelColorD15_		=	#adadad
_SelColorD10_		=	#b8b8b8
_SelColorD5_		=	#c2c2c2

_SelColorL5_		=	#cfcfcf
_SelColorL10_		=	#d1d1d1
_SelColorL15_		=	#d4d4d4
_SelColorL20_		=	#d6d6d6
_SelColorL25_		=	#d9d9d9
_SelColorL30_		=	#dbdbdb
_SelColorL35_		=	#dedede
_SelColorL40_		=	#e0e0e0
_SelColorL45_		=	#e3e3e3
_SelColorL50_		=	#e6e6e6
_SelColorL55_		=	#e8e8e8
_SelColorL60_		=	#ebebeb
_SelColorL65_		=	#ededed
_SelColorL70_		=	#f0f0f0
_SelColorL75_		=	#f2f2f2
_SelColorL80_		=	#f5f5f5
_SelColorL85_		=	#f7f7f7
_SelColorL90_		=	#fafafa
_SelColorL95_		=	#fcfcfc


# a list item that is selected, but its container is unfocused
_SelUnfocusColor_	= #333333


HilightColor		= black
MatchedColor		= @HilightColor@
RightClickColor		= @HilightColor@
HeaderColor			= @_BaseColorD40_@
HeaderColor-hover	= @_BaseColorD50_@
ValueChangedColor	= @_SelColorD50_@

InputBgColor		= black
WidgetBgColor		= @_BaseColorD10_@
ItemBgColor			= @_BaseColorD30_@


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

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

InsetBg						= background-color:@_BaseColorD30_@;
InsetText					= @Text@

ToolbarBg					= background-color: @_BaseColorD50_@;
VToolbarBg					= @ToolbarBg@
ToolbarContainer			= @ToolbarBg@ @_ToolbarBorder_@
InlineToolbarContainer		= @ToolbarBg@ @_InlineToolbarBorder_@

TreeContainer				= background-color:@_BaseColorD30_@;
TreeHeaderContainer			= background-color:@HeaderColor@;	@TopSeparator@
TreeHeaderText				= @Text@ font-weight:bold;

PageBg						= background-color:@_BaseColorD30_@;
PageHeaderBg				= background-color:@HeaderColor@;
PageHeaderText				= @Text@

AppBg						= background-color:@_BaseColorD30_@;
AppBorder					= @InsetBorder@

_SashBg_					= background-color:@_BaseColor_@;
_SashContentsColor_			= @_BaseColorD20_@



#######
# 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			= @InsetBg@ @OutsetBorder@ -moz-border-radius:3 3 3 3;
SkinBorderQuota				= 
SkinBorderSBToolbar			= @ToolbarContainer@
SkinBorderSB				= @InsetBg@ @OutsetBorder@								border-top-width:0px;
SkinBorderCurrentApp		= @InsetBg@ @OutsetBorder@ 	-moz-border-radius:3 3 0 3;	margin-bottom:-1px;
SkinBorderTreeSash			= 
SkinBorderAppToolbar		= @ToolbarContainer@
SkinBorderAppChooser		= height:100%;
SkinBorderTree				= @InsetBg@ @OutsetBorder@								border-top-width:0px;	height:100%;
SkinBorderMiniCal			= @InsetBg@ @OutsetBorder@	-moz-border-radius:0 0 3 0; 
SkinBorderApp				= @PageBg@  @OutsetBorder@ 								border-top-width:0px; 	height:100%;
SkinBorderStatus			= @InsetBg@ @OutsetBorder@ 	-moz-border-radius:3 3 0 3;	



#######
# fonts
#######
FontFamily-default			= font-family:Tahoma, Arial, Helvetica, sans-serif;
FontFamily-fixed			= font-family:monospace;
FontFamily-html				= font-family:Verdana,Arial,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-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: white;
Label-wrap				 	= color: white; 
Label				 		= @Label-wrap@ overflow:hidden;
Text-light				 	= color: @_BaseColorL25_@;
Text-required			 	= color: darkred;
Text-disabled				= color: #aaaaaa;
Text-contrast				= color: black;
Text-hover					= @Text@
Text-clicked				= @Text@
Text-default				= @Text@
Text-focused				= @Text@
Text-today					= color:red; font-weight:bold;
Text-unread					= @Text@ font-weight:bold;
Text-deleted				= @Text-disabled@ font-style:italic;
Text-important				= color:red;
Text-error					= color:red;
Text-matched				= color:white;
Text-anchor					= color:lightblue;

#######
# colors for different kinds of notices
#######
InfoBg						= background-color:#BFDFCA;
WarningBg					= background-color:#FFDDBF;
CriticalBg					= background-color:#F5BFBF;


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

	_NormalButtonSize_		= min-width:60px; height:20px; 
	MenuSize				= min-width:40px;
	_ListItemSize_			= height:17px;
#IFDEF MSIE
	_NormalButtonSize_		= width:60px;  height:20px; 
	MenuSize				= width:40px;
	_ListItemSize_			= height:20px;
#ENDIF
_SelectSize_				= height:20px; 
_InputSize_					= height:20px;
WidgetHeaderSize			= height:20px;
WidgetHeaderSize-medium		= height:26px;
WidgetHeaderSize-big		= height:36px;
_TreeItemSize_				= height:20px;
_PickerSize_				= width:200px;
SashSize					= 8px
MiniCalButtonSize			= 

TextPaddingSize				= 3px
BoxPaddingSize				= 5px
BoxMarginSize				= 5px
SmallBoxPaddingSize			= 2px



############################################
#
#  BELOW HERE BE DRAGONS
#
#	EDIT ANY OF THE BELOW AND YOU'RE ON YOUR OWN 
#	  -- CHANGES WILL PROBABLY NOT SURVIVE TO FUTURE RELEASES
#
############################################


SeparatorColor		= @_BaseColorD60_@
LightSeparatorColor	= @_BaseColorD40_@
DarkSeparatorColor	= @_BaseColorD80_@


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

# backgrounds for various states
SelectedBg			= background-color:@_SelColor_@;
SelectedBg-blurred	= background-color:@_SelUnfocusColor_@;
SelectedBg-focused	= background-color:@_SelColor_@;
MatchedBg			= background-color:@MatchedColor@;
RightClickBg		= background-color:@RightClickColor@;

Transparent			= transparent

# Short-hand substitutions used below, placed here for convenience
InactiveCursor				= cursor: default;
ActiveCursor				= cursor: pointer;
DisabledCursor				= cursor: not-allowed;
BusyCursor					= cursor: wait;
TextCursor					= cursor: text;

FullSize					= width:100%; height:100%;
FullWidth					= width:100%;
FullHeight					= height:100%;
	
CompactTable				= border-collapse:collapse; border-spacing:0px; padding:0px;
TableFixed					= table-layout:fixed;
NoWrap						= white-space:nowrap; overflow:hidden;
	NoSelect				= user-select: none; 
#IFDEF GECKO
	NoSelect				= -moz-user-select: none;
#ENDIF
TransparentBg				=



	OverflowEllipsis		= 
#IFDEF MSIE
	OverflowEllipsis		= text-overflow: ellipsis;
#ENDIF




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


#
# BORDERS:  create attractive, logical x-platform borders and use them consistently for all widgets and skin pieces
#
TransparentBorder			= padding:2px;	border-width:0px; 
	OutsetBorder			= padding:0px;	border:2px solid; border-color:@_BaseColorD20_@ @_BaseColorD40_@ @_BaseColorD40_@ @_BaseColorD20_@;
	InsetBorder				= padding:0px;	border:2px solid; border-color:@_BaseColorD50_@ @_BaseColorD20_@ @_BaseColorD20_@ @_BaseColorD50_@;
	DisabledBorder			= padding:0px;	border:2px solid; border-color:@_BaseColorD10_@;
	DefaultBorder			= padding:0px;	border:2px solid; border-color:@_SelColorD20_@ @_SelColorD50_@ @_SelColorD50_@ @_SelColorD20_@;
	FocusBorder				= padding:0px;	border:2px solid; border-color:@_SelColorD20_@ @_SelColorD50_@ @_SelColorD50_@ @_SelColorD20_@;
	_ToolbarBorder_			= border: 1px solid @_BaseColorD25_@;  border-color:@_BaseColorD30_@ @_BaseColorD50_@ @_BaseColorD50_@ @_BaseColorD30_@;
#IFDEF GECKO
	OutsetBorder			= padding:0px;	border:2px solid; -moz-border-left-colors:@_BaseColorD30_@ @_BaseColorD20_@; 	-moz-border-top-colors: @_BaseColorD30_@ @_BaseColorD20_@; 	-moz-border-bottom-colors: @_BaseColorD40_@ @_BaseColorD25_@;		-moz-border-right-colors: @_BaseColorD40_@ @_BaseColorD25_@;
	InsetBorder				= padding:0px;	border:2px solid; -moz-border-left-colors:@_BaseColorD30_@ @_BaseColorD50_@; 	-moz-border-top-colors: @_BaseColorD30_@ @_BaseColorD50_@; 	-moz-border-bottom-colors: @_BaseColorD10_@ @_BaseColorD30_@;		-moz-border-right-colors: @_BaseColorD10_@ @_BaseColorD30_@;
	DisabledBorder			= padding:0px;	border:2px solid; -moz-border-left-colors:@_BaseColorD10_@ transparent; 		-moz-border-top-colors: @_BaseColorD10_@ transparent; 		-moz-border-bottom-colors: @_BaseColorD10_@ transparent; 		-moz-border-right-colors: @_BaseColorD10_@ transparent;
	DefaultBorder			= padding:0px;	border:2px solid; -moz-border-left-colors:@_SelColorD30_@ @_SelColorD10_@; 		-moz-border-top-colors: @_SelColorD30_@ @_SelColorD10_@; 		-moz-border-bottom-colors: @_SelColorD50_@ @_SelColorD30_@; 		-moz-border-right-colors: @_SelColorD50_@ @_SelColorD30_@;
	FocusBorder				= padding:0px;	border:2px solid; -moz-border-left-colors:@_SelColorD30_@ @_SelColorD10_@; 		-moz-border-top-colors: @_SelColorD30_@ @_SelColorD10_@; 		-moz-border-bottom-colors: @_SelColorD50_@ @_SelColorD30_@; 		-moz-border-right-colors: @_SelColorD50_@ @_SelColorD30_@;
	_ToolbarBorder_			= border: 2px solid @_BaseColorD25_@;  -moz-border-radius:3 3 0 0; -moz-border-left-colors:@_BaseColorD30_@ @_BaseColorD10_@;	-moz-border-top-colors: @_BaseColorD30_@ @_BaseColorD10_@;	-moz-border-bottom-colors: @_BaseColorD55_@ @_BaseColorD25_@;	-moz-border-right-colors: @_BaseColorD40_@ @_BaseColorD25_@;
#ENDIF
DragBorder					= @FocusBorder@
ItemBottomBorder			= padding:0px;	border-width:0px; border-bottom:1px solid @_BaseColorD70_@; padding-bottom:1px; padding-top:2px;

_InlineToolbarBorder_		= @_ToolbarBorder_@	-moz-border-radius:0 0 0 0;
_WidgetHeaderBorder_		= border-bottom:1px solid @DarkSeparatorColor@; padding-top:1px;

# Borders and backgrounds for windows (dialogs, tooltip and the like)
	WindowOuterContainer		= background-color:@_BaseColorD65_@;	padding:2px; border:2px solid; border-color:@_BaseColorD50_@ @_BaseColorD75_@ @_BaseColorD75_@ @_BaseColorD50_@;
	WindowInnerContainer		= @PageBg@							padding:4px; border:2px solid; border-color:@_BaseColorD65_@ @_BaseColorD50_@ @_BaseColorD50_@ @_BaseColorD65_@;
	WindowOuterContainer-light	= background-color:@_BaseColorD10_@;	padding:3px; border:2px solid; border-color:@_BaseColorD30_@ @_BaseColorD40_@ @_BaseColorD40_@ @_BaseColorD30_@;
	WindowInnerContainer-light	= background-color:@_BaseColorD10_@;	padding:4px; border:2px solid; border-color:@_BaseColorD50_@ @_BaseColorD30_@ @_BaseColorD30_@ @_BaseColorD50_@;
#IFDEF GECKO
	WindowOuterContainer		= background-color:@_BaseColorD65_@;	padding:2px; border:2px solid; -moz-border-radius:2 2 2 2; -moz-border-left-colors:@_BaseColorD50_@ @_BaseColorD55_@; -moz-border-top-colors: @_BaseColorD50_@ @_BaseColorD55_@; -moz-border-bottom-colors: @_BaseColorD75_@ black; -moz-border-right-colors: @_BaseColorD75_@ black;
	WindowInnerContainer		= @PageBg@								padding:4px; border:2px solid; -moz-border-radius:3 3 3 3; -moz-border-left-colors:@_BaseColorD75_@ black; -moz-border-top-colors: @_BaseColorD75_@ black; -moz-border-bottom-colors: @_BaseColorD55_@ @_BaseColorD50_@; -moz-border-right-colors:  @_BaseColorD55_@ @_BaseColorD50_@; vertical-align:top;	@InactiveCursor@
	WindowOuterContainer-light	= background-color:@_BaseColorD10_@;	padding:3px; border:2px solid; -moz-border-radius:2 2 2 2; -moz-border-left-colors:@_BaseColorD30_@ @_BaseColorL25_@; -moz-border-top-colors: @_BaseColorD30_@ @_BaseColorL25_@; -moz-border-bottom-colors: @_BaseColorD65_@ @_BaseColorD25_@; -moz-border-right-colors: @_BaseColorD65_@ @_BaseColorD25_@;
	WindowInnerContainer-light	= background-color:@_BaseColorD10_@;	padding:4px; border:2px solid; -moz-border-radius:3 3 3 3; -moz-border-left-colors:@_BaseColorD30_@ @_BaseColorD50_@; -moz-border-top-colors: @_BaseColorD30_@ @_BaseColorD50_@; -moz-border-bottom-colors: @_BaseColorD10_@ @_BaseColorD30_@; -moz-border-right-colors: @_BaseColorD10_@ @_BaseColorD30_@; vertical-align:top;	@InactiveCursor@
#ENDIF

_AppTabStyle_			 	= border-right-width:0px;	-moz-border-radius:3 0 0 3;
AppTabContainer				= @_ToolbarBorder_@ 	background-color:@_BaseColorD10_@;	@_AppTabStyle_@
AppTabContainer-hover		= @_ToolbarBorder_@ 	background-color:@_BaseColorL25_@;	@_AppTabStyle_@
AppTabContainer-selected	= @_ToolbarBorder_@ 	background-color:@_BaseColorL50_@;	@_AppTabStyle_@

_InputBorder_				= padding:2 4 2 4; border:1px solid; border-color:black @_BaseColorD10_@ @_BaseColorD10_@ black;
_InputBorder-error_			= @_InputBorder_@
_InputBorder-disabled_		= padding:2 4 2 4; border:1px solid @_BaseColorD10_@;
	_InputBorder-focused_	= padding:1 4 1 4; border:2px solid; border-color:@_SelColorD50_@ @_SelColorD10_@ @_SelColorD10_@ @_SelColorD50_@;
#IFDEF GECKO
	_InputBorder-focused_	= padding:1 4 1 4; border:2px solid; -moz-border-left-colors:@_SelColorD30_@ @_SelColorD50_@; 		-moz-border-top-colors: @_SelColorD30_@ @_SelColorD50_@; 		-moz-border-bottom-colors: @_SelColorD10_@ @_SelColorD30_@; 		-moz-border-right-colors: @_SelColorD10_@ @_SelColorD30_@;
#ENDIF

_SmallButtonBorder_			= padding:2px; border:0px; 
_SmallButtonBorder-hover_	= padding:1px; border:1px solid; border-color:@LightSeparatorColor@ @DarkSeparatorColor@ @DarkSeparatorColor@ @LightSeparatorColor@;
_SmallButtonBorder-clicked_ = padding:1px; border:1px solid; border-color:@DarkSeparatorColor@ @LightSeparatorColor@ @LightSeparatorColor@ @DarkSeparatorColor@;





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



# "Widgets" here means buttons, selects and tabs
	_WidgetContainerStyle_		= -moz-border-radius:1 1 1 1; 
#IFDEF MSIE
	_WidgetContainerStyle_	=
#ENDIF
_WidgetContainer_			= background-color:@WidgetBgColor@;		@OutsetBorder@		@_WidgetContainerStyle_@
_WidgetContainer-disabled_ 	= background-color:@Transparent@;		@DisabledBorder@	@_WidgetContainerStyle_@
_WidgetContainer-hover_		= background-color:@_BaseColor_@;		@OutsetBorder@		@_WidgetContainerStyle_@
_WidgetContainer-selected_	= background-color:@_BaseColorL75_@;		@OutsetBorder@		@_WidgetContainerStyle_@
_WidgetContainer-clicked_	= background-color:@_BaseColorL75_@;		@InsetBorder@		@_WidgetContainerStyle_@
_WidgetContainer-default_	= background-color:@_SelColorL50_@;		@DefaultBorder@		@_WidgetContainerStyle_@
_WidgetContainer-focused_	= background-color:@_SelColor_@;		@FocusBorder@		@_WidgetContainerStyle_@
_WidgetContainer-toggled_	= background-color:@HilightColor@;		@InsetBorder@		@_WidgetContainerStyle_@


# "WidgetHeader" means headers of trees, lists, message header, etc
WidgetHeaderContainer		= background-color:@HeaderColor@; 		@_WidgetHeaderBorder_@
WidgetHeaderContainer-hover	= background-color:@HeaderColor-hover@; @_WidgetHeaderBorder_@


# special case for toolbar buttons that don't have a border normally
_ToolbarButtonContainer_	= background-color:@Transparent@;		@TransparentBorder@

# "Items" means listItems and menuItems
_ItemContainerStyle_		= border-left-width:0; border-right-width:0;
_ItemContainer_				= background-color:@ItemBgColor@;		@TransparentBorder@	@_ItemContainerStyle_@
_ItemContainer-disabled		= @_ItemContainer_@
_ItemContainer-selected_	= background-color:@_SelColor_@;		@TransparentBorder@	@_ItemContainerStyle_@
_ItemContainer-focused_		= 										@FocusBorder@		@_ItemContainerStyle_@
_ItemContainer-sel-focus_	= background-color:@_SelColor_@;		@FocusBorder@		@_ItemContainerStyle_@
_ItemContainer-hover_		= background-color:@_BaseColorD50_@;	@OutsetBorder@		@_ItemContainerStyle_@
_ItemContainer-down_		= background-color:@_BaseColorD50_@;	@InsetBorder@		@_ItemContainerStyle_@
_ItemContainer-matched_		= background-color:@MatchedColor@;		@TransparentBorder@	@_ItemContainerStyle_@
_ItemContainer-rightClicked_= background-color:@RightClickColor@;	@TransparentBorder@	@_ItemContainerStyle_@

_ItemContainer-header_		= background-color:@HeaderColor@;		@TransparentBorder@	@_ItemContainerStyle_@



# "Inputs" means input elements only
InputField					= @Text@			background-color:@InputBgColor@;		@_InputBorder_@				@_InputSize_@
InputField-focused			= @Text@			background-color:@InputBgColor@;		@_InputBorder-focused_@		@_InputSize_@
InputField-error			= @Text@			background-color:@HilightColor@; 		@_InputBorder-error_@			@_InputSize_@
InputField-disabled			= @Text-disabled@	background-color:@_BaseColor_@; 		@_InputBorder-disabled_@		@_InputSize_@

# "TextArea" inputs
TextArea					= @Text@			background-color:@InputBgColor@; 			@_InputBorder_@			
TextArea-focused			= @Text@			background-color:@InputBgColor@; 			@_InputBorder-focused_@	
TextArea-error				= @Text@			background-color:@HilightColor; 	@_InputBorder-error_@	
TextArea-disabled			= @Text-disabled@	background-color:@_BaseColor_@; 	@_InputBorder-disabled_@


# "Notice" is for the toast pane and warning messages that appear in Admin
NoticeOuterBorder			= @WindowOuterContainer-light@
NoticeInnerBorder			= @WindowInnerContainer-light@
NoticeText					= @Text@ font-weight:bold;




TooltipContainer			= 
TooltipText					= @Text@
TooltipText-label			= @Label@



VerticalScrollOverflow		= overflow:-moz-scrollbars-vertical; overflow-x:hidden; overflow-y:auto;



TextPadding					= padding-left:@TextPaddingSize@; padding-right:@TextPaddingSize@;
BoxMargin					= margin:@BoxMarginSize@;
BoxPadding				 	= padding:@BoxPaddingSize@;
LeftBoxPadding				= padding-left:@BoxPaddingSize@;
SmallBoxPadding				= padding:@SmallBoxPaddingSize@;
BoxSpacing					= @BoxPadding@ @BoxMargin@
AddVerticalSpace			= margin:@BoxMarginSize@ 0;
ImagePadding				= padding-right: @BoxMarginSize@;



# different separator pieces

FixIESizeQuirk				= font-size:1px; line-height: 1px;

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: 0px;

	PrettyBottomSeparator		= height:1px; border-bottom:1px solid @SeparatorColor@; 
#IFDEF GECKO
	PrettyBottomSeparator	= height:2px; border-bottom:2px solid; -moz-border-bottom-colors:@LightSeparatorColor@ @DarkSeparatorColor@;
#ENDIF

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@


FieldSet				 	= border: 1px solid @SeparatorColor@; @BoxSpacing@
FieldSetLabel				= @Label@ font-weight:bold;



# BUTTONS IN DIFFERENT FLAVORS


_NormalButtonStyle_			= @_NormalButtonSize_@
NormalButton				= @_WidgetContainer_@				@ActiveCursor@		@_NormalButtonStyle_@
NormalButton-disabled		= @_WidgetContainer-disabled_@		@DisabledCursor@	@_NormalButtonStyle_@
NormalButton-hover			= @_WidgetContainer-hover_@			@ActiveCursor@		@_NormalButtonStyle_@
NormalButton-clicked		= @_WidgetContainer-clicked_@		@ActiveCursor@		@_NormalButtonStyle_@
NormalButton-default		= @_WidgetContainer-default_@		@ActiveCursor@		@_NormalButtonStyle_@
NormalButton-focused		= @_WidgetContainer-focused_@		@ActiveCursor@		@_NormalButtonStyle_@
NormalButton-toggled		= @_WidgetContainer-toggled_@		@ActiveCursor@		@_NormalButtonStyle_@

_NormalButtonTextStyle_		= text-align:center;	@NoWrap@
NormalButtonText			= @Text@	 		@_NormalButtonTextStyle_@
NormalButtonText-disabled	= @Text-disabled@ 	@_NormalButtonTextStyle_@
NormalButtonText-hover		= @Text-hover@ 		@_NormalButtonTextStyle_@
NormalButtonText-clicked	= @Text-clicked@ 	@_NormalButtonTextStyle_@
NormalButtonText-default	= @Text-default@	@_NormalButtonTextStyle_@
NormalButtonText-focused	= @Text-focused@	@_NormalButtonTextStyle_@

ToolbarButton				= @_ToolbarButtonContainer_@		@ActiveCursor@
ToolbarButton-disabled		= @_ToolbarButtonContainer_@		@DisabledCursor@
ToolbarButton-hover			= @_WidgetContainer-hover_@			@ActiveCursor@
ToolbarButton-clicked		= @_WidgetContainer-clicked_@		@ActiveCursor@
ToolbarButton-default		= @_WidgetContainer-default_@		@ActiveCursor@
ToolbarButton-focused		= @_WidgetContainer-focused_@		@ActiveCursor@
ToolbarButton-toggled		= @_WidgetContainer-toggled_@		@ActiveCursor@

_ToolbarButtonTextStyle_	= @NoWrap@
ToolbarButtonText			= @Text@	 		@_ToolbarButtonTextStyle_@
ToolbarButtonText-disabled	= @Text-disabled@ 	@_ToolbarButtonTextStyle_@
ToolbarButtonText-hover		= @Text-hover@ 		@_ToolbarButtonTextStyle_@
ToolbarButtonText-clicked	= @Text-clicked@ 	@_ToolbarButtonTextStyle_@
ToolbarButtonText-default	= @Text-default@	@_ToolbarButtonTextStyle_@
ToolbarButtonText-focused	= @Text-focused@	@_ToolbarButtonTextStyle_@


_SelectStyle_				= @_SelectSize_@
Select						= @_WidgetContainer_@				@ActiveCursor@		@_SelectStyle_@
Select-disabled				= @_WidgetContainer-disabled_@		@DisabledCursor@	@_SelectStyle_@
Select-hover				= @_WidgetContainer-hover_@			@ActiveCursor@		@_SelectStyle_@
Select-clicked				= @_WidgetContainer-clicked_@		@ActiveCursor@		@_SelectStyle_@
Select-default				= @_WidgetContainer-default_@		@ActiveCursor@		@_SelectStyle_@
Select-focused				= @_WidgetContainer-focused_@		@ActiveCursor@		@_SelectStyle_@
Select-toggled				= @_WidgetContainer-toggled_@		@ActiveCursor@		@_SelectStyle_@

_SelectTextStyle_			= text-align:left;	@TextPadding@	@NoWrap@
SelectText					= @Text@	 		@_SelectTextStyle_@
SelectText-disabled			= @Text-disabled@ 	@_SelectTextStyle_@
SelectText-hover			= @Text-hover@ 		@_SelectTextStyle_@
SelectText-clicked			= @Text-clicked@ 	@_SelectTextStyle_@
SelectText-default			= @Text-default@	@_SelectTextStyle_@
SelectText-focused			= @Text-focused@	@_SelectTextStyle_@



# ANCHORS AND ZIMLETS

# HMMM, not so sure about these AnchorContainer things...
_AnchorContainer_			= background-color:@Transparent@; @ActiveCursor@
_AnchorText_				= Text-anchor@ text-decoration:none;

_AnchorContainer-hover_		= background-color:@HilightColor@; @ActiveCursor@
_AnchorText-hover_			= @Text-anchor@ text-decoration:none;

_AnchorContainer-clicked_	= background-color:@HilightColor@; @ActiveCursor@
_AnchorText-clicked_		= color:darkred;  text-decoration:none;

_AnchorContainer-disabled_	= background-color:@Transparent@; @DisabledCursor@
_AnchorText-disabled_		= @Text-disabled@  text-decoration:none;

_AnchorContainer-matched_	= background-color:@MatchedColor@;
_AnchorText-matched_		= @Text@ text-decoration:none;


Anchor						= @_AnchorContainer_@ 			@_AnchorText_@
Anchor-hover				= @_AnchorContainer-hover_@ 	@_AnchorText-hover_@
Anchor-clicked				= @_AnchorContainer-clicked_@ 	@_AnchorText-clicked_@
Anchor-disabled				= @_AnchorContainer-disabled_@ 	@_AnchorText-disabled_@
Anchor-matched				= @_AnchorContainer-matched_@ 	@_AnchorText-matched_@

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



# MENUS

MenuContainer			 	= @WindowOuterContainer@

_MenuItemStyle_				= padding-left:2px; padding-right:2px;
MenuItem					= @_ItemContainer_@				background-color:@_BaseColorL25_@;	@ActiveCursor@		@_MenuItemStyle_@
MenuItem-focused			= @_ItemContainer-focused_@		background-color:@_BaseColorL75_@;	@ActiveCursor@		@_MenuItemStyle_@
MenuItem-hover				= @_ItemContainer-hover_@		background-color:@_BaseColorL75_@;	@ActiveCursor@		@_MenuItemStyle_@
MenuItem-clicked			= @_ItemContainer-down_@		background-color:@_BaseColorL75_@;	@ActiveCursor@		@_MenuItemStyle_@
MenuItem-disabled			= @_ItemContainer-disabled_@	background-color:@_BaseColorL25_@;	@DisabledCursor@	@_MenuItemStyle_@


_MenuItemTextStyle_			= text-align:left;	@NoWrap@
MenuItemText				= @Text@	 		@_MenuItemTextStyle_@
MenuItemText-disabled		= @Text-disabled@ 	@_MenuItemTextStyle_@
MenuItemText-hover			= @Text-hover@ 		@_MenuItemTextStyle_@
MenuItemText-clicked		= @Text-clicked@ 	@_MenuItemTextStyle_@
MenuItemText-default		= @Text-default@	@_MenuItemTextStyle_@
MenuItemText-focused		= @Text-focused@	@_MenuItemTextStyle_@

MenuItemTextPadding			= height:16px; white-space:nowrap; padding:0 2 0 5;
MenuItemSeparator			= @PrettyBottomSeparator@


# LISTS

ListContainer				= @AppBg@ @InsetBorder@
ListHeaderBg			 	= @WidgetHeaderSize@ 

	_ListColHeaderStyle_		= padding-left:@TextPaddingSize@;	@NoWrap@
#IFDEF MSIE
	_ListColHeaderStyle_		= padding-left:@TextPaddingSize@;	@NoWrap@	text-overflow: ellipsis;
#ENDIF
ListColHeaderContainer		= @WidgetHeaderContainer@			@InactiveCursor@	@_ListColHeaderStyle_@
ListColHeaderContainer-hover= @WidgetHeaderContainer-hover@		@ActiveCursor@		@_ListColHeaderStyle_@


_ListItemContainerStyle_		= @_ListItemSize_@	@Text@ @ActiveCursor@
ListItemContainer				= @_ItemContainer_@					@ItemBottomBorder@		@_ListItemContainerStyle_@
ListItemContainer-selected		= @_ItemContainer-selected_@		@ItemBottomBorder@		@_ListItemContainerStyle_@
ListItemContainer-matched		= @_ItemContainer-matched_@			@ItemBottomBorder@		@_ListItemContainerStyle_@
ListItemContainer-rightClicked	= @_ItemContainer-rightClicked_@	@ItemBottomBorder@		@_ListItemContainerStyle_@
ListItemContainer-focused		= @_ItemContainer-focused_@									@_ListItemContainerStyle_@

	_ListItemTextStyle_		= vertical-align:center; white-space: nowrap; overflow: hidden;	text-overflow: ellipsis;
#IFDEF MSIE
	_ListItemTextStyle_		= vertical-align:center; white-space: nowrap; overflow: hidden;
#ENDIF
ListItemText				= @Text@	@_ListItemTextStyle_@
ListItemText-focused		= @Text@	@_ListItemTextStyle_@
ListItemText-selected		= @Text@	@_ListItemTextStyle_@
ListItemText-sel-focus		= @Text@	@_ListItemTextStyle_@
ListItemText-matched		= @Text@	@_ListItemTextStyle_@
ListItemText-rightClicked	= @Text@	@_ListItemTextStyle_@



# TREES

TreeItem					= @TransparentBg@ @_TreeItemSize_@;	@ActiveCursor@
TreeItemText				= @Text@
TreeItemSpacing				= padding-top:1px; padding-left:2px; padding-right:2px;



# MINI CALENDAR

MiniCalBg					= @AppBg@
MiniCalHeaderBg				= @WidgetHeaderContainer@ height:16px;
MiniCalHeaderText			= @PageHeaderText@	width:auto;

_MiniCalButtonStyle_		= text-align:center; @ActiveCursor@
MiniCalButton				= @Text@			@_SmallButtonBorder_@			@_MiniCalButtonStyle_@
MiniCalButton-hover			= @Text-hover@		@_SmallButtonBorder-hover_@		@_MiniCalButtonStyle_@
MiniCalButton-clicked		= @Text-clicked@	@_SmallButtonBorder-clicked_@	@_MiniCalButtonStyle_@

MiniCalDOWText				= @Text-disabled@ 	background-color:@_BaseColorL25_@; @BottomSeparator@ text-align:center;

# added to day buttons
MiniCalDay-hilited			= font-weight:bold;
MiniCalDay-today			= @Text-today@
MiniCalDay-gray				= @Text-disabled@


# PROGRESS BARS

ProgressBarContainer		= @PageBg@ @InsetBorder@ border-width:1px;
ProgressBarBg-info			= @InfoBg@		@FixIESizeQuirk@
ProgressBarBg-warning		= @WarningBg@	@FixIESizeQuirk@
ProgressBarBg-critical		= @CriticalBg@	@FixIESizeQuirk@


# TOASTER

ToastContainer				= @NoticeOuterBorder@
ToastBg-info				= @InfoBg@
ToastBg-warning				= @WarningBg@
ToastBg-critical			= @CriticalBg@
ToastText					= @NoticeText@

# SASHES
HSashContainer				= @_SashBg_@ 	width:@SashSize@;	height:100%;			cursor:e-resize; @FixIESizeQuirk@ 
HSashContents				= text-align:center; vertical-align:middle; font-size:9px; line-height:6px; color:@_SashContentsColor_@;

VSashContainer				= @_SashBg_@ 	width:100%;			height:@SashSize@;	cursor:s-resize;	border-top:1px solid @SeparatorColor@; border-bottom:1px solid @DarkSeparatorColor@;
VSashContents				= text-align:center; vertical-align:middle; font-size:9px; line-height:9px; color:@_SashContentsColor_@;





# SEARCH BUILDER

PickerContainer				= @PageBg@ @RightSeparator@ @_PickerSize_@


# IMAGE STUFF
SmallIconSize				= width:@SmallIconWidth@; height:@SmallIconHeight@;
BigIconSize					= width:@SmallIconWidth@; height:@SmallIconHeight@;



# CONTACTS STUFF
ContactsCardSize			= width:300px; height:140px;

# RANDOM CRAP

DndOpacity					= filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;
DndAllowedContainer			= border: 2px solid @DropAllowedColor@; 	@DragBg@;	
DndNotAllowedContainer		= border: 2px solid @DropNotAllowedColor@; 	@DragBg@;	

VeilOpacity					= filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
VeilColor					= background-color:white;


# Free-Busy view
FreeBusyViewHeaderWidth		= width:25px;
FreeBusyViewGridWidth		= width:12px;
FreeBusyViewGridHeight		= height:22px; line-height:21px;


# VIRTUAL WINDOWS, eg: for Chat
WindowBg					= @AppBg@
WindowContainer				= @WindowBg@	@WindowOuterContainer-light@
WindowContainer-focused		= @WindowBg@	@WindowOuterContainer@
