/* hide the fallback image */
#p-2009-07-grids-fallback {
	visibility:hidden;
}

/* layered background images */
#p-2009-07-grids-image {
	background:url(/2009/07/grids/photo.jpg);
	width:498px;
}
#p-2009-07-grids-grid1 {
	background:url(/2009/07/grids/white.png);
	width:498px;
}
#p-2009-07-grids-grid2 {
	background:url(/2009/07/grids/black.png);
	width:498px;
	height:309px;
}

/* for the hidden states */
#p-2009-07-grids-image.hide {
	background-image:none;
	background:#D32E18;
}
#p-2009-07-grids-grid1.hide,
#p-2009-07-grids-grid2.hide {
	background-image:none;
}

/* this effect works in IE7, but I can't be bothered to put more browser detection code in for IE6 only */
.internetexplorer #p-2009-07-grids-image,
.internetexplorer #p-2009-07-grids-grid1,
.internetexplorer #p-2009-07-grids-grid2 {
	background-image:none;
	width:auto;
}
.internetexplorer #p-2009-07-grids-fallback {
	visibility:visible;
}