/*
	Copyright Wild Attire 2007, Some rights reserved
	Written by Adam Heller, 2007.09.10
	
	This is free software, licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
	To view a copy, you can visit: <http://creativecommons.org/licenses/by-nc-sa/3.0/>

	Thanks to Scott Schiller of http://www.schillmania.com/ for creating and publishing
	"Even More Rounded Corners with CSS", the work that this code is based on.
	Scott's original code found at: <http://www.schillmania.com/content/projects/even-more-rounded-corners/>
*/

/* HOW TO USE
	- link to this stylesheet in your markup
	- define your own class, I'll be using "bg1" as the className for this example
	- in your markup, create the following
	
		<div class="roundedBg bg1">
			<div class="top"></div>
			<div class="content">
				
				<!-- YOUR CONTENT HERE -->
				
			</div>
			<div class="bottom"><div></div></div>
		</div>

	- include in any linked css:
	
		.bg1,
		.bg1 .top,
		.bg1 .bottom,
		.bg1 .bottom div {
			background-image: url( '[YOUR IMAGE LOCATION]' );
		}

		.bg1 {
			max-width: [WIDTH OF YOUR IMAGE];
		}

		.bg1 .content {
			padding: [_OPTIONAL_ PADDING FROM EDGES OF BOX];
		}

		.bg1 .top {
			width: [WIDTH OF LEFT SLICE;
		}

		.bg1 .bottom,
		.bg1 .bottom div {
			height: [HEIGHT OF BOTTOM SLICE];
			margin-top: [_NEGATIVE_ HEIGHT OF BOTTOM SLICE];
		}

		.bg1 .bottom div {
			width: [WIDTH OF LEFT SLICE];
		}
	
	- if there are overflow issues, add <div class="wrapper"><!--YOUR CONTENT--></div> inside your div.content block.
*/
	
.roundedBg {
	position: relative;
}
.roundedBg,
.roundedBg .top,
.roundedBg .bottom,
.roundedBg .bottom div {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: top right;
}

.roundedBg .content {
	position: relative;
	zoom:1; /* IE fix */
	_overflow-y:hidden; /* IE fix */
	z-index: 3;
}

.roundedBg .top {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	background-position: top left;
}

.roundedBg .bottom {
	background-position: bottom right;
	position: relative;
	z-index: 2;
	/*width: 100%;*/
}
.roundedBg .bottom div {
	background-position: bottom left;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.roundedBg .wrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	max-height:1000px;
	overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}

/*
	YOUR CSS GOES HERE
*/

.rcMac,
.rcMac .top,
.rcMac .bottom,
.rcMac .bottom div {
	background-image: url( '/images/backgrounds/navStyleBg.gif' );
}
.rcMac {
	max-width: 500px;
	margin: 0 auto;
}
.rcMac .content {
	padding: 5px;
	padding-bottom: 15px;
}

.rcMac .top {
	width: 5px;
}

.rcMac .bottom,
.rcMac .bottom div {
	height: 20px;
	margin-top: -20px;
}

.rcMac .bottom div {
	width: 5px;
}