/*
nuCorners - rounded corner divs that expand x and y
by John-Paul Walton, johnpaul.walton@gmail.com
You have a better rounded-corner technique?
let me know johnpaul.walton@gmail.com
*/

.nuc {
	margin: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat !important;
}

/* basic, 4-corners */
.nuc				{ background-position: top left; }
.nuc .nuc			{ background-position: bottom right; }
.nuc .nuc .nuc		{ background-position: top right; }
.nuc .nuc .nuc .nuc	{ background-position: bottom left; padding: 1px; height: 100%;} /* the height fixes an issue in IE 5/win */
/* NOTE - innermost div MUST have at least 1px of padding */

.exampleDiv						{ background-image: url(images/example_ul.gif) !important; }
.exampleDiv .nuc				{ background-image: url(images/example_lr.gif) !important; }
.exampleDiv .nuc .nuc			{ background-image: url(images/example_ur.gif) !important; }
.exampleDiv .nuc .nuc .nuc		{ background-image: url(images/example_ll.gif) !important; } /* add padding to this in another CSS file */


/* override normal corner ordering for just top edges to be rounded */
.exampleHeader					{ background-image: url(images/example_ul.gif) !important; }
.exampleHeader .nuc				{ background-image: url(images/example_ur.gif) !important; background-position: top right !important; }

/* override normal corner ordering for just bottom edges to be rounded */
.exampleFooter				{ background-image: url(images/example_ll.gif) !important; background-position: bottom left !important; }
.exampleFooter .nuc				{ background-image: url(images/example_lr.gif) !important; }


.darkBrownHeader					{ background-image: url(products_images/nuc_dkbrown_ul.gif) !important; }
.darkBrownHeader .nuc				{ background-image: url(products_images/nuc_dkbrown_ur.gif) !important; background-position: top right !important; }

								background-position: bottom right !important;}

.whiteFooter				{ background-image: url(products_images/nuc_white_ll.gif)!important; background-position: bottom left !important; }

.whiteFooter .nuc			{ background-image: url(products_images/nuc_white_lr.gif) !important; background-position: bottom right !important; }


.RWBlueFooter				{ background-image: url(products_images/nuc_RWBlue_ll.gif)!important; 
								background-position: bottom left !important;}
.RWBlueFooter .nuc			{ background-image: url(products_images/nuc_RWBlue_lr.gif) !important; }
	
	


.redFooter				{ background-image: url(products_images/nuc_red_ll.gif)!important; 
								background-position: bottom left !important;}
.redFooter .nuc			{ background-image: url(products_images/nuc_red_lr.gif) !important; }
	
	
	
.torqFooter				{ background-image: url(products_images/nuc_torq_ll.jpg)!important; 
								background-position: bottom left !important;}
.torqFooter .nuc			{ background-image: url(products_images/nuc_torq_lr.jpg) !important; }
	
			
.giftBlueFooter				{ background-image: url(products_images/nuc_GiftBlue_ll.gif)!important; 
								background-position: bottom left !important;}
.giftBlueFooter .nuc			{ background-image: url(products_images/nuc_GiftBlue_lr.gif) !important; }


#products .torqFooter #riffWorld div.songArea 					{ background-image: url(products_images/pickmonth_ul.gif) !important; background-position: top left !important; padding: 0 !important; }
#products .torqFooter #riffWorld div.songArea .nuc				{ background-image: url(products_images/pickmonth_lr.gif) !important; background-position: bottom right !important; padding: 0 !important; }
#products .torqFooter #riffWorld div.songArea .nuc .nuc			{ background-image: url(products_images/pickmonth_ur.gif) !important; background-position: top right !important; padding: 0 !important; }
#products .torqFooter #riffWorld div.songArea .nuc .nuc .nuc	{ background-image: url(products_images/pickmonth_ll.gif) !important; background-position: bottom left !important; }



/* the above example would look like this in markup:
<div class="exampleDiv nuc"><div class="nuc"><div class="nuc"><div class="nuc">
	Some content.	
</div></div></div></div> <!-- eof .exampleDiv .nuc -->
*/