toolbar.css #1

/*
 FIXME:
 IE refuses to honor the class targeting here, combining vertical and horizontal
 currently vertical has precidence, horizontal will screw up
*/
.horizontal.drawingToolbar{
	position:relative;
	width:auto;
	height:32px;
	padding:5px;
	left:5px;
}
.vertical.drawingToolbar{
	width:32px;
	padding:5px;
	position:absolute;
	left:5px;
	margin-top:5px;
	background:#fff;
}

.drawingToolbar .drawingButton{
	position:relative;
	padding:0;
	width:32px;
	height:32px;
	background-image:url("images/tool_sprites.png");
	background-position:0px 0px;
	border:0;
	cursor:pointer;
}

.horizontal.drawingToolbar .drawingButton{
	float:left;
	margin-right:5px;
}

.dj_ie6 .drawingToolbar .drawingButton {

	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/tool_sprites.png');	
}
.vertical.drawingToolbar .drawingButton{
	margin-bottom:5px;
	margin-right:0px;
}

.drawingToolbar .drawingButton.hover{
	background-position:-32px 0px;
}
.drawingToolbar .drawingButton.active{
	background-position:-64px 0px;
}
.drawingToolbar .drawingButton.selected{
	background-position:-96px 0px;
}
.drawingToolbar .drawingButton.selected:hover{}

.drawingToolbar.vertical{}



.drawingToolbar .drawingButton .icon{
	background-image:url("images/tool_icons.png");
	width:32px;
	height:64px;
	position:absolute;
	left:0px;
	top:0px;
	margin:0;
	padding:0;
	clip: rect(0px 32px 32px 0px);
}


.drawingToolbar .drawingButton.selected .icon{
	/*
	background-position-y is not supported in Firefox
	The workaround is to shift the icon with 'top'
	and hide a portion of it with 'clip'
	*/
	top:-32px;
	clip: rect(32px 32px 64px 0px);
}


.drawingToolbar .drawingButton .icon.iconLine{
	background-position:-64px 0px;
}
.drawingToolbar .drawingButton .icon.iconRect{
	background-position: 0px 0px;
}
.drawingToolbar .drawingButton .icon.iconEllipse{
	background-position:-32px 0px;
}
.drawingToolbar .drawingButton .icon.iconText{
	background-position:-224px 0px;
}
.drawingToolbar .drawingButton .icon.iconArrow{
	background-position:-96px 0px;
}
.drawingToolbar .drawingButton .icon.iconVector{
	background-position:-128px 0px;
}
.drawingToolbar .drawingButton .icon.iconAxes{
	background-position:-160px 0px;
}
.drawingToolbar .drawingButton .icon.iconPan{
	background-position:-192px 0px;
}
.drawingToolbar .drawingButton .icon.iconEq{
	background-position:-351px 0px;
}

.dj_ie6 .drawingToolbar .drawingButton .icon {
	
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/tool_icons.png');
}



/* Combo button - a button that is connected (beg middle end)  */

/* Vertical*/
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboTop{
	background-position:-128px 0px;
	margin:0;
	margin-top:10px;
	border-bottom:1px solid #d6d6d6;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboTop.hover{
	background-position:-160px 0px;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboTop.active{
	background-position:-192px 0px;
}


.drawingToolbar.vertical .toolCombo .drawingButton.toolComboMid{
	background-position:-384px 0px;
	border-style:solid;
	border-width:1px;
	border-color:#fff #cccccc #d6d6d6 #cccccc;
	height:24px;
	width:30px;
	margin:0;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboMid.hover,
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboMid.hover{
	background-position:-416px 0px;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboMid.active,
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboMid.active{
	background-position:-448px 0px;
}


.drawingToolbar.vertical .toolCombo .drawingButton.toolComboBot{
	background-position:-256px 0px;
	border-top:1px solid #fff;
	margin:0;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboBot.hover{
	background-position:-288px 0px;
}
.drawingToolbar.vertical .toolCombo .drawingButton.toolComboBot.active{
	background-position:-320px 0px;
}


/* Horizontal
FIXME: Horizontal alignment needs tweaking 
*/
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboTop{
	background-position:-512px 0px;
	margin:0;
	margin-left:10px;
	border:0px;
	border-right:1px solid #d6d6d6;

}
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboTop.hover{
	background-position:-544px 0px;
}
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboTop.active{
	background-position:-576px 0px;
}


.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboMid{
	background-position:-384px 0px;
	border-style:solid;
	border-width:1px;
	border-color:#cccccc #d6d6d6 #cccccc #fff;
	height:30px;
	width:31px;
	margin:0;
}

.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboBot{
	background-position:-640px 0px;
	border-left:1px solid #fff;
	margin:0;
	margin-top:-1px;
	margin-right:-1px;
}
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboBot.hover{
	background-position:-673px 0px;
}
.drawingToolbar.horizontal .toolCombo .drawingButton.toolComboBot.active{
	background-position:-704px 0px;
}


.drawingToolbar .drawingButton .icon.iconZoomIn{
	background-position:-256px 0px;
}
.drawingToolbar .drawingButton .icon.iconZoom100{
	background-position:-320px -4px;
}
.drawingToolbar .drawingButton .icon.iconZoomOut{
	background-position:-288px 0px;
}