/* -------------------------------------------------------
 *  Scalable edged boxes
 * -------------------------------------------------------
 *
 *   Define the generic box styles here.  Use IDs to
 *   define the specific styles of a box in the main
 *   CSS file.  Remember to define the background of
 *   your DIV as follows:
 *
 *   DIV#myBox .bg { background-image: url('<image>') !important; }
 */

DIV.edgeBox {
	position			: relative;
	overflow			: visible;
}

DIV.edgeBox .ul.bg {
	position: absolute; top:0; left:0; height:60%; width:60%;
	background: top left no-repeat;
}

DIV.edgeBox .ur.bg {
	position: absolute; top:0; right:0; height:60%; width:60%;
	background: top right no-repeat;
}

DIV.edgeBox .bl.bg {
	position: absolute; bottom:0; left:0; height:60%; width:60%;
	background: bottom left no-repeat;
}

DIV.edgeBox .br.bg {
	position: absolute; bottom:0; right:0; height:60%; width:60%;
	background: bottom right no-repeat;
}

DIV.edgeBox .content {
	position: relative; padding: 12px 17px 17px 15px;
	background-color: transparent;
}


/* Don't even bother with IE6. Just define a border in your main CSS file. */
/* (The rules below require browserselect.js to work properly */

HTML.ie6 DIV.edgeBox .bg {
	display	: none;
}