html,
body {
	height: 100%;
}

body {
	margin: 0;
	padding: 30px;
	background: #FFF url(bodygradient.png) repeat-x left top;
	font-family: Calibri, 'Lucida Grande', Arial, Verdana, sans-serif;
}

#chroma1,
#chroma2 {
	position: absolute;
	width: 200px;
	line-height: 50px;
	text-align: center;
	
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
}

#chroma1 {
	top: 150px;
	left: 150px;
	background: #600118 url(gradientdark.png) repeat-x left top;
	color: #FFF;
}

#chroma2 {
	top: 250px;
	left: 350px;
	background: #E1B345 url(gradientbright.png) repeat-x left top;
	border: #808080 2px solid;
	color: #666;
}

/* General Chroma Rounded Corner Declarations */

.chroma_base {
  	/* Defining cyan as transparent color */
	-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='cyan')"; /* IE 8 Syntax */
	filter: progid:DXImageTransform.Microsoft.Chroma(color='cyan'); /* IE 6/7 Syntax */
}

.ie .chroma_topleft,
.ie .chroma_topright,
.ie .chroma_bottomright,
.ie .chroma_bottomleft {
	background-color: transparent;
	background-repeat: no-repeat;
}
.ie .chroma_topleft {background-position: left top;}
.ie .chroma_topright {background-position: right top;}
.ie .chroma_bottomright {background-position: right bottom;}
.ie .chroma_bottomleft {background-position: left bottom;}

/* Specific Chroma 14px Rounded Corner Declarations */

.ie #chroma1 .chroma_topleft,
.ie #chroma1 .chroma_topright,
.ie #chroma1 .chroma_bottomright,
.ie #chroma1 .chroma_bottomleft {
	background-image: url(chroma14px.gif); /* Cursom made keying-image with 14px corner radius */
}

/* Specific Chroma 14px Rounded Corner with 2px Border Declarations */

.ie #chroma2 .chroma_topleft,
.ie #chroma2 .chroma_topright,
.ie #chroma2 .chroma_bottomright,
.ie #chroma2 .chroma_bottomleft {
	background-image: url(chroma14px_border2px.gif); /* Cursom made keying-image with 14px corner radius and 2px border in #808080 */
}

.ie8 #chroma2 .chroma_topleft,
.ie7 #chroma2 .chroma_topleft {
	margin: -2px; /* root border-width * (-1) */
}

.ie7 #chroma2 * {
	/* Needed so that border-overlaping works in IE 6/7 */
	position: relative; 
	width: 204px; /* root width + (2 * root border-width) */
}


