TabContainer: background image not aligned on hover

[bill]

The tab container does have a rollover state but the background image doesn't align on hover state which is the problem. This is caused by defining a different position for the background image on hover.

This is the hover state that is currently being used.

.tundra .dijitTabCloseButtonHover {
	color: #243C5F;
	border-top-color:#92a0b3;
	border-left-color:#92a0b3;
	border-right-color:#92a0b3;
	background:#e2e2e2 url(images/tabHover.png) repeat-x bottom;
}

You can see the shadow and highlights don't align on hover . If you remove the "bottom" alignment from the hover class you get the desired result.

.tundra .dijitTabCloseButtonHover {
	color: #243C5F;
	border-top-color:#92a0b3;
	border-left-color:#92a0b3;
	border-right-color:#92a0b3;
	background:#e2e2e2 url(images/tabHover.png) repeat-x;
}

Shadows and highlights are aligned on hover:

Taken from ​IBM Design Leadership recommendations.

[bill]

(In [13448]) Don't change gradient so much on hover. Fixes #6637.