source: Dev/branches/rest-dojo-ui/client/dojox/drawing/resources/toolbar.css @ 256

/*
 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;
}