/******************************************************************************
 * IMAGEBOX.CSS
 * Liquid box patterns that use a 9 slice technique with images for the borders
 * Used to produce the boxes with rounded corners
 * 
 * Due to limitations in IE6, these images cannot be transparent PNGs
 * IE6 (even with pnghack) will not repeat a transparent image on the X or Y axis.
 */

/******************************************************************************
 * page-box is the white imagebox over the black background.
 */
/* page-box , radius: 11, TRBL offsets: 0 1 1 1 */
td.page-box-tl {
	background: transparent url("../stylesheets/page-box.png") no-repeat top left;
	font-size: 1pt;
	width: 12px;
}
td.page-box-tm {
	background: transparent url("../stylesheets/page-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 11px;
}
td.page-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/page-box.png") no-repeat top right;
	width: 12px;
}
td.page-box-ml {
	background: transparent url("../stylesheets/page-box-lr.png") top left repeat-y;
}
td.page-box-ml img {
	width: 12px;
}
td.page-box-mm {
	background-color: white;
}
div.page-box-content {
	background-color: transparent;
	margin: -11px;
}
td.page-box-mr {
	background: transparent url("../stylesheets/page-box-lr.png") top right repeat-y;
}
td.page-box-mr img {
	width: 12px;
}
td.page-box-bl {
	background: transparent url("../stylesheets/page-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.page-box-bm {
	background: transparent url("../stylesheets/page-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 12px;
}
td.page-box-br {
	background: transparent url("../stylesheets/page-box.png") no-repeat bottom right;
	font-size: 1pt;
}
div.page-box-content { 
	color: black;
	padding: 10px;
}

/******************************************************************************
 * tab-box is the grey imagebox over the white background.
 * this can be used inside a gadget for a grey rounded rectangle
 */
/* tab-box , radius: 10, TRBL offsets: 0 1 2 1 */
td.tab-box-tl {
	background: transparent url("../stylesheets/tab-box.png") no-repeat top left;
	font-size: 1pt;
	width: 11px;
}
td.tab-box-tm {
	background: transparent url("../stylesheets/tab-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 10px;
}
td.tab-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/tab-box.png") no-repeat top right;
	width: 11px;
}
td.tab-box-ml {
	background: transparent url("../stylesheets/tab-box-lr.png") top left repeat-y;
}
td.tab-box-ml img {
	width: 11px;
}
td.tab-box-mm {
	background-color: #CCCCCC;
}
div.tab-box-content {
	background-color: transparent;
	margin: -10px;
}
td.tab-box-mr {
	background: transparent url("../stylesheets/tab-box-lr.png") top right repeat-y;
}
td.tab-box-mr img {
	width: 11px;
}
td.tab-box-bl {
	background: transparent url("../stylesheets/tab-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.tab-box-bm {
	background: transparent url("../stylesheets/tab-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 12px;
}
td.tab-box-br {
	background: transparent url("../stylesheets/tab-box.png") no-repeat bottom right;
	font-size: 1pt;
}

/* IE freaks out if these arent the same in all dimensions */
div.tab-box-content { 
	padding: 6px; 
	}

/******************************************************************************
 * panel-box is the white imagebox over a grey background.
 * this can be used inside a tab-box 
 */
/* panel-box , radius: 5, TRBL offsets: 1 1 2 1 */
td.panel-box-tl {
	background: transparent url("../stylesheets/panel-box.png") no-repeat top left;
	font-size: 1pt;
	width: 6px;
}
td.panel-box-tm {
	background: transparent url("../stylesheets/panel-box-tb.png") top left repeat-x;
	font-size: 1pt;
	height: 6px;
}
td.panel-box-tr {
	font-size: 1pt;
	background: transparent url("../stylesheets/panel-box.png") no-repeat top right;
	width: 6px;
}
td.panel-box-ml {
	background: transparent url("../stylesheets/panel-box-lr.png") top left repeat-y;
}
td.panel-box-ml img {
	width: 6px;
}
td.panel-box-mm {
	background-color: white;
}
div.panel-box-content {
	background-color: transparent;
	margin: -5px;
}
td.panel-box-mr {
	background: transparent url("../stylesheets/panel-box-lr.png") top right repeat-y;
}
td.panel-box-mr img {
	width: 6px;
}
td.panel-box-bl {
	background: transparent url("../stylesheets/panel-box.png") no-repeat bottom left;
	font-size: 1pt;
}
td.panel-box-bm {
	background: transparent url("../stylesheets/panel-box-tb.png") bottom left repeat-x;
	font-size: 1pt;
	height: 7px;
}
td.panel-box-br {
	background: transparent url("../stylesheets/panel-box.png") no-repeat bottom right;
	font-size: 1pt;
}

/* Panel Boxes are contained in a Column Table */
/* Panel Boxes are sized by their Columns Cells so they are w100 */
/* Panel Boxes need outside spacing, but w100 tables can't have LR margins in IE */
/* So div.panel-box wraps table.panel-box to provide the spacing via div padding */
div.panel-box { padding: 4px; }
table.panel-box { width: 100%; margin: 0px; }

/* Padded so that base.csp 50/50 spacing model works */
div.panel-box-content { padding: 5px 5px; }