/*
	Use this CSS to create a 4-way sliding group, using just 1 image (or 2 for :hover)
	For this code, there need to be 4 extra spans or divs.  Spans are better for links, Divs are better for group boxes.
	Edit the padding according to your image.
	

	See below for examples.
	
	Link Example:
	<a href="#" class="GroupSlider">
		<span class="TopRight"><span class="TopLeft">
			Link
		</span></span><span class="BottomRight"><span class="BottomLeft"></span></span>
	</a>
	
	Group Example:
	<div class="GroupSlider" >
		<div class="TopRight"><div class="TopLeft">
			<h1>Header 2</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		</div></div><div class="BottomRight"><div class="BottomLeft"></div></div>
	</div>

*/

/*
.GroupSlider div {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
}

.GroupSlider span {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
}

/ *In case the item is a link, we will provide an alternate hover image * /
a.GroupSlider:hover span {
	background-image: url('images/GroupBox.png') ;
}
*/

.GroupSlider .TopLeft {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
	background-position:top left;
	padding-left:20px;
	padding-top:20px;
}
.GroupSlider .BottomLeft {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
	background-position:bottom left;
    height:30px; /*Bottom Padding, because IE doesn't display padding-bottom:40px;*/
}
.GroupSlider .TopRight {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
	background-position:top right;
	padding-right:30px;
}
.GroupSlider .BottomRight {
	display: block;
	background-repeat: repeat;
	background-image: url('images/GroupBox.png') ;
	background-position:bottom right;
	padding-right:30px;
	clear:both;
}