/* 
 *  borderedboxes.css
 */


/* -------------------------------------------------------------------- */
/* edgeboxes                                                            */
/* -------------------------------------------------------------------- */
/*
 *  An edgebox consists of 10 identical overlayed boxes, in this
 *  stacking order:
 *
 *  edgebox_content
 *  edgebox_br
 *  edgebox_bl
 *  edgebox_tr
 *  edgebox_tl
 *  edgebox_b
 *  edgebox_t
 *	edgebox_r
 *  edgebox_l
 *	edgebox_bg
 *
 *  Edgeboxes are fully fluid in both dimensions.
 *
 *	Note that the four edges extend fully to the sides and the corners
 *  overlay them.  Thus, the corners should be opaque (though transparency
 *  is acceptable on any spot that doesn't occlude an edge.)
 */

/* generic edgebox stuff */
/* the verbose classnames for the various frame positions is due to THTIIE6 */

.edgebox {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.edgebox.edgebox_content {
	height: auto;
	width: auto;
}


.edgebox.edgebox_bg {
	background-position :		top left;
	background-repeat :			repeat;
}

.edgebox.edgebox_l {
	background-position :		center left;
	background-repeat :			repeat-y;
}

.edgebox.edgebox_r {
	background-position :		center right;
	background-repeat :			repeat-y;
}

.edgebox.edgebox_t {
	background-position :		top center;
	background-repeat :			repeat-x;
}

.edgebox.edgebox_b {
	background-position :		bottom center;
	background-repeat :			repeat-x;
}

.edgebox.edgebox_tl {
	background-position :		top left;
	background-repeat :			no-repeat;
}

.edgebox.edgebox_tr {
	background-position :		top right;
	background-repeat :			no-repeat;
}

.edgebox.edgebox_bl {
	background-position :		bottom left;
	background-repeat :			no-repeat;
}

.edgebox.edgebox_br {
	background-position :		bottom right;
	background-repeat :			no-repeat;
}



/* -------------------------------------------------------------------- */
/*  capboxes                                                            */
/* -------------------------------------------------------------------- */
/*
 *  Capboxes are a simple three-piece capped column plus a content area:
 *
 *	capbox_content
 *  capbox_t
 *  capbox_m
 *  capbox_b
 *  capbox_bg (positioned only)
 *
 *  Capboxes are fluid in the Y dimension but fixed in the X dimension.
 *  In the generic flavor there are no overlaps, thus no transparency issues.
 *  In the positioned flavor, the top and bottom elements overlap the content.
 */

/* generic capbox */

.capbox.capbox_t {
	font-size: 0;		/* IE6 hack */
	padding: 0;
	margin-bottom: 0;
	background-repeat	: no-repeat;
}

.capbox.capbox_m {
	margin-top: 0;
	margin-bottom: 0;
	background-repeat	: repeat-y;
}

.capbox.capbox_b {
	background-repeat	: no-repeat;
	font-size: 0;		/* IE6 hack */
	padding: 0;
}


/* positioned capbox */

.capboxpos.capboxpos_bg {
	position: relative;
}

.capboxpos.capboxpos_t {
	font-size: 0;		/* IE6 hack */
	padding: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	background-repeat	: no-repeat;
}

.capboxpos.capboxpos_m {
	margin-top: 0;
	margin-bottom: 0;
	background-repeat	: repeat-y;
}

.capboxpos.capboxpos_b {
	font-size: 0;		/* IE6 hack */
	padding: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-repeat	: no-repeat;
}

/* ie6 hacks */

.ie6 .capboxpos.capboxpos_bg {
	padding: 1px 0;		/* 1px gap bug */
	height: 1px;		/* abs-in-rel positioning bug */
}



/* -------------------------------------------------------------------- */
/*  patchboxes                                                          */
/* -------------------------------------------------------------------- */
/*
 *	Patchboxes are a combination of capboxes and edgeboxes.  Because of the
 *	HTML complexity (20 separate DIVs are involved), they're indicated only
 *	when you have a very specific need: a fluid-sized box that floats over
 *	a complex or multicolored background.  The corners can be positioned so
 *	that nothing overlaps or underlaps them, allowing flexible transparencies.
 *
 *	The _*cc elements stand for "center container"; these generally have a
 *	margin on either end (to clear the edges/corners) but no content or bg.
 *	The 20 divs have this nesting hierarchy; patchbox_bg is bottommost and
 *	patchbox_content is topmost.
 *
 *  patchbox_bg
 *		patchbox_t
 *			patchbox_tbg
 *			patchbox_tl
 *			patchbox_tr
 *			patchbox_tcc
 *			patchbox_tc
 *  	patchbox_m
 *			patchbox_mbg
 *			patchbox_ml
 *			patchbox_mr
 *			patchbox_mcc
 *			patchbox_mc
 *				patchbox_content
 *  	patchbox_b
 *			patchbox_bbg
 *			patchbox_bl
 *			patchbox_br
 *			patchbox_bcc
 *			patchbox_bc
 *
 */

.patchbox {
	margin 					: 0;
	padding					: 0;
	width					: 100%;
}

.patchbox.patchbox_content {
	width					: auto;
}

.patchbox.patchbox_bg {
	position				: relative;
	background-position 	: left top;
	background-repeat 		: repeat;
	font-size				: 0;	/* IE6 hack */
	overflow				: hidden;
}


.patchbox.patchbox_t {
	position				: absolute;
	top						: 0;
	left					: 0;
	font-size				: 0;	/* IE6 hack */
}

.patchbox.patchbox_tbg {
	background-position 	: left top;
	background-repeat		: repeat;
}

.patchbox.patchbox_tl {
	background-position 	: left top;
	background-repeat 		: no-repeat;
}

.patchbox.patchbox_tr {
	background-position		: right top;
	background-repeat		: no-repeat;
}

.patchbox.patchbox_tcc {
	width					: auto;
}

.patchbox.patchbox_tc {
	background-position		: center top;
	background-repeat		: repeat-x;
}


.patchbox.patchbox_m {
/*		font-size				: 0;	/* IE6 hack */
}

.patchbox.patchbox_mbg {
	background-position 	: left top;
	background-repeat		: repeat;
}

.patchbox.patchbox_ml {
	background-position 	: left top;
	background-repeat 		: repeat-y;
}

.patchbox.patchbox_mr {
	background-position		: right top;
	background-repeat		: repeat-y;
}

.patchbox.patchbox_mcc {
	width					: auto;
}

.patchbox.patchbox_mc {
	background-position		: center top;
	background-repeat		: repeat-x;
}


.patchbox.patchbox_b {
	position				: absolute;
	bottom					: 0;
	left					: 0;
	font-size				: 0;	/* IE6 hack */
}

.patchbox.patchbox_bbg {
	background-position 	: left bottom;
	background-repeat		: repeat;
}

.patchbox.patchbox_bl {
	background-position 	: left bottom;
	background-repeat 		: no-repeat;
}

.patchbox.patchbox_br {
	background-position		: right bottom;
	background-repeat		: no-repeat;
}

.patchbox.patchbox_bcc {
	width					: auto;
}

.patchbox.patchbox_bc {
	background-position		: center bottom;
	background-repeat		: repeat-x;
}