.rounded_STYLE
{
  background-color: COLOR;            /* if needed */
  border: 1px solid #ffffff;     /* if needed */
  position: relative;
}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
  width: 17px;
  height: 17px;
  position: absolute;
}

.rounded_STYLE > .tl
{
  background: url(/assets/images/rounded/STYLE_tl.jpg) top left no-repeat;
  top: 0;
  left: 0;
}

.rounded_STYLE > .tr
{
  background: url(/assets/images/rounded/STYLE_tr.jpg) top right no-repeat;
  top: 0;
  right: 0;
}

.rounded_STYLE > .bl
{
  background: url(/assets/images/rounded/STYLE_bl.jpg) bottom left no-repeat;
  bottom: 0;
  left: 0;
}

.rounded_STYLE > .br
{
  background: url(/assets/images/rounded/STYLE_br.jpg) bottom right no-repeat;
  bottom: 0;
  right: 0;
}


/*  */
.rounded_STYLE_sm, .rounded_STYLE_sm-on,.frame
{
  /* background-color: COLOR;            /* if needed 
  border: 1px solid #ffffff;     /* if needed */
  position: relative;
}

.rounded_STYLE_sm > .tl, .rounded_STYLE_sm > .tr, .rounded_STYLE_sm > .bl, .rounded_STYLE_sm > .br, .rounded_STYLE_sm-on > .tl, .rounded_STYLE_sm-on > .tr, .rounded_STYLE_sm-on > .bl, .rounded_STYLE_sm-on > .br,
.frame > .tl, .frame > .tr, .frame > .bl, .frame > .br
{
  width: 6px;
  height: 6px;
  position: absolute;
}

.rounded_STYLE_sm > .tl
{
  background: url(/assets/images/rounded/STYLE_tl-sm.jpg) top left no-repeat;
  top: 0;
  left: 0;
}

.rounded_STYLE_sm > .tr
{
  background: url(/assets/images/rounded/STYLE_tr-sm.jpg) top right no-repeat;
  top: 0;
  right: 0;
}

.rounded_STYLE_sm > .bl
{
  background: url(/assets/images/rounded/STYLE_bl-sm.jpg) bottom left no-repeat;
  bottom: 0;
  left: 0;
}

.rounded_STYLE_sm > .br
{
  background: url(/assets/images/rounded/STYLE_br-sm.jpg) bottom right no-repeat;
  bottom: 0;
  right: 0;
}
/* roll over */
a.rounded_STYLE_sm:hover > .tl, .rounded_STYLE_sm-on > .tl, .frame > .tl
{
  background: url(/assets/images/rounded/STYLE_tl-sm_on.jpg) top left no-repeat;
  top: 0;
  left: 0;
}

a.rounded_STYLE_sm:hover > .tr, .rounded_STYLE_sm-on > .tr, .frame > .tr
{
  background: url(/assets/images/rounded/STYLE_tr-sm_on.jpg) top right no-repeat;
  top: 0;
  right: 0;
}

a.rounded_STYLE_sm:hover > .bl, .rounded_STYLE_sm-on > .bl, .frame > .bl
{
  background: url(/assets/images/rounded/STYLE_bl-sm_on.jpg) bottom left no-repeat;
  bottom: 0;
  left: 0;
}

a.rounded_STYLE_sm:hover > .br, .rounded_STYLE_sm-on > .br, .frame > .br
{
  background: url(/assets/images/rounded/STYLE_br-sm_on.jpg) bottom right no-repeat;
  bottom: 0;
  right: 0;
}