/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 5px;
	margin:1em 0;
	background:#f7f7ef;
	border:1px solid #666;
}

.cbb h1 {
	margin:0 -5px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.8em/1 Arial, Helvetica, sans-serif;
}


/* Top corners and border */
.bt {
	height:24px;
	margin:0 0 0 24px;
	background:url(../images/LightBlueBox1k.png) no-repeat 100% 0;
}
.bt div {
	position:relative;
	left:-24px;
	width:24px;
	height:24px;
	background:url(../images/LightBlueBox1k.png) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

	/* Bottom corners and border */
.bb {
	height:24px;
	margin:0 0 0 24px;
	background:url(../images/LightBlueBox1k.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left:-24px;
	width:24px;
	height:24px;
	background:url(../images/LightBlueBox1k.png) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

	/* Left border */
.i1 {
	padding:0 0 0 10px;
	background:url(../images/LightBlueBorder.png) repeat-y 0 0;
}
	/* Right border */
.i2 {
	padding:0 10px 0 0;
	background:url(../images/LightBlueBorder.png) repeat-y 100% 0;
}

/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#e2ebf6;
	border:1px solid #e2ebf6;
	border-width:1px 0;
	padding:0 10px;
	}
/* CSS for the box ends here */


/* Just a bit of styling for this example. Adjust as you wish. */
.cb h1 {
	margin:0 -10px;
	padding:0 10px 0.3em;
	font:bold 1.8em/1 Arial, Helvetica, sans-serif;
	}


.ltgreen .i1,
.ltgreen .i2 { background-image:url(../images/LightGreenBorder.png); }
.ltgreen .bt,
.ltgreen .bt div,
.ltgreen .bb,
.ltgreen .bb div { background-image:url(../images/LightGreenBox.png); }
.ltgreen .i3 { background:#ced6b5; border:1px solid #ced6b5; }

.red .i1,
.red .i2 { background-image:url(../images/RedBorder.png); }
.red .bt,
.red .bt div,
.red .bb,
.red .bb div { background-image:url(../images/RedBox.png); }
.red .i3 { background:#9e2b1e; border:1px solid #9e2b1e; color: #fff;}


.ltyellow .i1,
.ltyellow .i2 { background-image:url(../images/LightYellowBorder.png); }
.ltyellow .bt,
.ltyellow .bt div,
.ltyellow .bb,
.ltyellow .bb div { background-image:url(../images/LightYellowBox.png); }
.ltyellow .i3 { background:#ffffcc; border:1px solid #ffffcc; color: #111;}