#toolbarControl{
	width: 220px;
	z-index: 2000;
	position: relative;
	left: 10px;
	top: 10px;
	height:30px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#toolbarControl img.rulerIcon{
	background: url('../img/toolbar.png') -104px 0px;	
	width:33px;
	height:30px;
	border-right: solid 1px #9c9c9e;
}
#toolbarControl img.areaIcon{
	background: url('../img/toolbar.png') -138px 0px;	
	width:40px;
	height:30px;
	border-right: solid 1px #9c9c9e;
}
#toolbarControl img.dragIcon{
	background: url('../img/toolbar.png') -179px 0px;	
	width:36px;
	height:30px;
}
#ZoomBoxHolder div{
    width:39px;
    height:30px;
    margin: 0px 0px 0px 0px;
    float:none;
    background: url('../img/toolbar.png') -64px 0px;	
    border-right: solid 1px #9c9c9e;
}
#clickOut img.zoomOutIcon{
	background: url('../img/toolbar.png') -31px 0px;
	width : 32px;
	height: 30px;
	border-right: solid 1px #9c9c9e;
}
#clickIn img.zoomInIcon{
	background: url('../img/toolbar.png') 0px 0px;
	width : 30px;
	height: 30px;
	border-right: solid 1px #9c9c9e;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

#fullScreen img.fullScreen{
	background: url('../img/fullscreen.png') 0px 1px;
	width : 30px;
	height: 30px;
	border-right: solid 1px #9c9c9e;

}

/*hover*/
#toolbarControl img.rulerIcon:hover{
	background: url('../img/toolbar_hover.png') -104px 0px;		
	cursor:pointer;
}
#toolbarControl img.areaIcon:hover{
	background: url('../img/toolbar_hover.png') -138px 0px;		
	cursor:pointer;
}
#toolbarControl img.dragIcon:hover{
	background: url('../img/toolbar_hover.png') -179px 0px;	
	cursor:pointer;
}
#ZoomBoxHolder div:hover{    
	background: url('../img/toolbar_hover.png') -64px 0px;	
	cursor:pointer;
}
#clickOut img.zoomOutIcon:hover{
	background: url('../img/toolbar_hover.png') -31px 0px;	
	cursor:pointer;
}
#clickIn img.zoomInIcon:hover{
	background: url('../img/toolbar_hover.png') 0px 0px;	
	cursor:pointer;
}
#fullScreen img.fullScreen:hover{
	background: url('../img/fullscreen_hover.png') 0px 1px;
}

/*active*/
#toolbarControl div.active img.rulerIcon{
	background: url('../img/toolbar_active.png') -104px 0px;		
	cursor:pointer;
}
#toolbarControl div.active img.areaIcon{
	background: url('../img/toolbar_active.png') -138px 0px;		
	cursor:pointer;
}
#toolbarControl div.active img.dragIcon{
	background: url('../img/toolbar_active.png') -179px 0px;	
	cursor:pointer;
}
#ZoomBoxHolder div.olControlZoomBoxItemActive{    
	background: url('../img/toolbar_active.png') -64px 0px;	
	cursor:pointer;
}
#clickOut.active img.zoomOutIcon{
	background: url('../img/toolbar_active.png') -31px 0px;	
	cursor:pointer;
}
#clickIn.active img.zoomInIcon{
	background: url('../img/toolbar_active.png') 0px 0px;	
	cursor:pointer;
}
#fullScreen.active img.fullScreen{
	background: url('../img/fullscreen_active.png') 0px 1px;
}

#lineDraw{
	float:left;
	position:relative;
}
#noDraw{
	float:left;
	position:relative;	
}
#noDraw img.dragIcon{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
#areaDraw, #ZoomBoxHolder{
	float:left;
	position:relative;
	
}
#ZoomBoxHolder{
    height: 30px;
    margin:0px 0px 0px 0px;
}



#output{
	width: 177px;
	background-color: rgb(225, 226, 228);
	position:relative;
	top: -8px;
}
#clickOut, #fullScreen{
	float: left;
}
#clickIn{
	float:left;
	border-top-right-radius: 3px;
}

#distanceOptionsDiv{
	clear:both;
	width:177px;	
	background-color: rgb(225, 226, 228);
	position : relative;
	top : 7px;
	display: none;
}