/* here's the box... the image is the upper-left corner */
.box {
  	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
    background : #f7f7f7 url(../images/tl.png) no-repeat;
    /*width : 20em;*/
    /*height : auto;*/
    position : relative;
    padding : 2px 10px 2px 10px;
	/*margin-top:6px;*/
	margin-bottom:10px;
	margin-right:20px;
    text-align:right;
	color:inherit;
}

/* these are the other three spans. classes were used to allow multiuse on a page */
.tr, .bl, .br {
  position : absolute;
  width : 10px;
  height : 10px;  /* corner images are 40x40 */
  display : block;
  margin-bottom : -1px;  /* this is for IE */
}

/* change position and image: top-right */
.tr {
  background : transparent url(../images/tr.png) no-repeat;
  top : 0;
  right : 0;
}

/* change position and image: bottom-left */
.bl {
  background : transparent url(../images/bl.png) no-repeat;
  bottom : 0;
  left : 0;
}

/* change position and image: bottom-right */
.br {
  background : transparent url(../images/br.png) no-repeat;
  right : 0;
  bottom : 0;
}