/* Extra padding is added randomly in IE9 and it makes our menu buttons appear with an overflow on the
right side with the sliding window method.
Fix: For small buttons with only images, it appears that fixing a width work
Fix: For bigger buttons, change background image only for ie where the middle of the button is transparent
so there is still overflow but it is transparent and it does not appear */
#mainNavigation li.home.guest a { width: 43px; }
#mainNavigation li.myAccount a { width: 43px; }

#mainNavigation li.home.active a,
#mainNavigation li.home a:hover {
	background: url(/img/css3/iehomeButtonHover.png) no-repeat left -5px;
}
#mainNavigation li.home.active a span,
#mainNavigation li.home a:hover span {
	background: url(/img/css3/iehomeButtonHover.png) no-repeat right;
}
#mainNavigation li.home a {
	background: url(/img/css3/iehomeButton.png) no-repeat left -5px;
}
#mainNavigation li.home a span {
	background: url(/img/css3/iehomeButton.png) no-repeat right;
}
#mainNavigation li.cart a {
	background: url(/img/css3/iehomeButton.png) no-repeat left -5px;
}
#mainNavigation li.cart a span {
	background: url(/img/css3/iehomeButton.png) no-repeat right;
}
#mainNavigation li.cart.active a,
#mainNavigation li.cart a:hover {
	background: url(/img/css3/iehomeButtonHover.png) no-repeat left -5px;
}
#mainNavigation li.cart.active a span,
#mainNavigation li.cart a:hover span {
	background: url(/img/css3/iehomeButtonHover.png) no-repeat right;
}

/* counteract the background in input radio buttons */
input.userType { background: inherit; border: none; }