/*
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(newsletter_images/example_ul.gif) !important; }
.exampleDiv .nuc				{ background-image: url(newsletter_images/example_lr.gif) !important; }
.exampleDiv .nuc .nuc			{ background-image: url(newsletter_images/example_ur.gif) !important; }
.exampleDiv .nuc .nuc .nuc		{ background-image: url(newsletter_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(newsletter_images/example_ul.gif) !important; }
.exampleHeader .nuc				{ background-image: url(newsletter_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(newsletter_images/example_ll.gif) !important; background-position: bottom left !important; }
.exampleFooter .nuc				{ background-image: url(newsletter_images/example_lr.gif) !important; }

.blueCorner						{ background-image: url(newsletter_images/nuc_blue_ul.gif) !important; }
.blueCorner	 .nuc				{ background-image: url(newsletter_images/nuc_blue_lr.gif)  !important; }
.blueCorner	 .nuc .nuc			{ background-image: url(newsletter_images/nuc_blue_ur.gif)  !important; }
.blueCorner	 .nuc .nuc .nuc		{ background-image: url(newsletter_images/nuc_blue_ll.gif) !important; padding: 20px !important; } 

.brownCorner						{ background-image: url(newsletter_images/nuc_brown_ul.gif) !important; }
.brownCorner	 .nuc				{ background-image: url(newsletter_images/nuc_brown_lr.gif)  !important; }
.brownCorner	 .nuc .nuc			{ background-image: url(newsletter_images/nuc_brown_ur.gif)  !important; }
.brownCorner	 .nuc .nuc .nuc		{ background-image: url(newsletter_images/nuc_brown_ll.gif) !important; padding: 20px !important; } 


.brownHeader					{ background-image: url(newsletter_images/nuc_brown_ul.gif) !important; }
.brownHeader .nuc				{ background-image: url(newsletter_images/nuc_brown_ur.gif) !important; background-position: top right !important; }


.liteBrownHeader					{ background-image: url(newsletter_images/brnbrn_ul.gif) !important; }
.liteBrownHeader .nuc				{ background-image: url(newsletter_images/brnbrn_ur.gif) !important; background-position: top right !important; }


.liteBrownFooter				{ background-image: url(newsletter_images/whitebrn_ll.gif)!important; background-position: bottom left !important;}
.liteBrownFooter .nuc			{ background-image: url(newsletter_images/whitebrn_lr.gif) !important; background-position: bottom right !important;}

.whiteFooter				{ background-image: url(newsletter_images/nuc_white_ll.gif)!important; background-position: bottom left !important; }
.whiteFooter .nuc			{ background-image: url(newsletter_images/nuc_white_lr.gif) !important; background-position: bottom right !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 -->

*/