.toolBar
{
  xbackground: #d8d8d1;
}
.toolBarSeparator
{
	width: 1px;
  border-right: 1px solid rgb(180, 180, 180);
}

.coolButton,
.coolButtonHover,
.coolButtonActiveHover,
.coolButtonActive,
.coolButtonActiveDisabled,
.coolButtonDisabled,
.coolButtonUpDisabled {
	cursor: 			Default;
	font: 				menu;
	font-size: 9pt !important;
	font-weight: 		normal;
	padding:			2px 5px 2px 5px;
	border:				0px solid buttonface;
	white-space:		nowrap;
	vertical-align:		middle;
	xbackground-color:	#d8d8d1;
  white-space: nowrap; 
}

.coolButton img {
	margin: 1px 0px 0px 1px;
  filter: Alpha(opacity=75);
}

.coolButtonHover img {
	margin: 1px 0px 0px 1px;
	position:	relative;
	left:		-1px;
	top:		-1px;
	filter: Shadow(color=#666666, Direction=135, Strength=1);
}

.coolButtonActiveHover img {
	margin: 1px 0px 0px 1px;
  filter: Alpha(opacity=75);
}

.coolButtonHover {
	background:		#b6bdd2;
	border-width:	1px;
	border-style:	solid;
	border-color:	#0A246A;
	padding:			1px 4px 1px 4px;		
}

.coolButtonActiveHover {
	background:		#8592b5;
	border-width:		1px;
	border-color:	#0A246A;
	padding:  			1px 4px 1px 4px;
/*	padding:  			2px 3px 0px 5px;*/
	color: White;
}

.coolButtonActive {
	border-width:		1px;
	border-left-color:	ButtonShadow;
	border-right-color:	ButtonHighlight;
	border-top-color:	ButtonShadow;
	border-bottom-color:ButtonHighlight;
	padding:			2px 3px 0px 5px;
}

.coolButtonUpDisabled,
.coolButtonActiveDisabled,
.coolButtonDisabled {
	padding:			2px 5px 2px 5px;
	color:				GrayText;
	border-width: 		0px;
}

.coolButtonActiveDisabled {
	border-width:		1px;
	border-left-color:	ButtonShadow;
	border-right-color:	ButtonHighlight;
	border-top-color:	ButtonShadow;
	border-bottom-color:ButtonHighlight;
	padding:			2px 3px 0px 5px;
}

.coolButtonUpDisabled {
	border-width:		1px;
	border-left-color:	ButtonHighlight;
	border-right-color:	ButtonShadow;
	border-top-color:	ButtonHighlight;
	border-bottom-color:ButtonShadow;
}

/* My latest build of mozilla crashed with the opacity */
.coolButtonUpDisabled img,
.coolButtonActiveDisabled img,
.coolButtonDisabled img {
	-moz-opacity:		0.5;
}

/* IE specific
 * When the button becomes disbabled the innerHTML is enclosed by two spans
 * This is done so that the image will look disabled using filters
 */
.coolButtonUpDisabled .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer,
.coolButtonDisabled .coolButtonDisabledContainer {
	display:			block;
	background:			GrayText;
	filter:				chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1);
	width:				100%;
	height:				100%;
	vertical-align:		center;
}

.coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	background:			Transparent;
	filter:				gray()
						/* Remove all bright shades of gray */
						chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
						chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
						chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
						chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
						chroma(color=#f3f3f3) 
						mask(color=#010101);
}

/* end IE specific */