How to change height of RadMenu (Sprite Image)

example: http://www.telerik.com/help/aspnet-ajax/menu-change-height.html

example: http://www.telerik.com/help/aspnet-ajax/combobox-appearance-change-height-input-element.html

tutorial: http://www.w3schools.com/css/css_image_sprites.asp

tutorial: http://www.lightpostcreative.com/image-sprites-tutorial/

Demo:

"rmSprite.png" Image

1) Original 

2) Custom

Related CSS

/*Font*/
	.RadMenu .rmHorizontal .rmText
	{
		padding: 0 12px 1px 0;
	}
	.RadMenu_CustomSkin,
	.RadMenu_CustomSkin a.rmLink
	{
		font: normal 22px/23px "Segoe UI", Arial, sans-serif;
		color: #000;
		text-decoration: none;
	}

/*Root Item Focus "rmSprite.png" Image Position*/
	.RadMenu_CustomSkin a.rmLink:hover,
	.RadMenu_CustomSkin a.rmFocused,
	.RadMenu_CustomSkin a.rmSelected
	{
		background-position: 0 -72px;
	}

	.RadMenu_CustomSkin a.rmLink:hover .rmText,
	.RadMenu_CustomSkin a.rmFocused .rmText,
	.RadMenu_CustomSkin a.rmSelected .rmText
	{
		background-position: 100% -96px;
	}

/*Root Item Expand "rmSprite.png" Image Position*/
	.RadMenu_CustomSkin a.rmExpanded,
	.RadMenu_CustomSkin a.rmExpanded:hover
	{
		background-position: 0 -278px;
	}

	.RadMenu_CustomSkin a.rmExpanded .rmText,
	.RadMenu_CustomSkin a.rmExpanded:hover .rmText
	{
		background-position: 100% -351px;
	}

/*Sub Item Focus "rmSprite.png" Image Position*/
	.RadMenu_CustomSkin .rmGroup a.rmLink:hover,
	.RadMenu_CustomSkin .rmGroup a.rmFocused,
	.RadMenu_CustomSkin .rmGroup a.rmSelected,
	.RadMenu_CustomSkin .rmGroup a.rmExpanded
	{
		background-position: 0 -168px;
	}

	.RadMenu_CustomSkin .rmGroup a.rmLink:hover .rmText,
	.RadMenu_CustomSkin .rmGroup a.rmFocused .rmText,
	.RadMenu_CustomSkin .rmGroup a.rmSelected .rmText,
	.RadMenu_CustomSkin .rmGroup a.rmExpanded .rmText
	{
		background-position: 100% -192px;
	}
/*Menu Background "rmSprite.png" Image Position*/
	.RadMenu_CustomSkin .rmRootGroup
	{
		border: 1px solid #b7bdcd;
		background-repeat: repeat-x;
		background-position: 0 -550px;
		background-color: #e0e5f5;
	}