CSS Linkbox Example

The contents of the CSS file:

@charset "utf-8";

.linkboxes {
  width: 85ex;
  margin: 5ex auto 0 auto;
}
div.linkbox {
  float: left;
  width: 40ex;
  margin-left: 2ex;
}


a.linkbox {
  color: #000;
}

/*
Simple Rounded Corner CSS Boxes
(http://modxcms.com/simple-rounded-corner-css-boxes.html)
originally by Ryan Trash. 
Modifications have been made.
*/

/* set the image to use and establish the lower-right position */ 
a.linkbox, 
a.linkbox span.linkbox_body, 
a.linkbox span.linkbox_head, 
a.linkbox span.linkbox_head span.linkbox_heading { 
  display:         block;
  background:      #fff url('images/linkbox.png') no-repeat bottom right; 
  overflow:        visible;
  text-decoration: none;
} 
a.linkbox:link:hover, 
a.linkbox:link:hover span.linkbox_body, 
a.linkbox:link:hover span.linkbox_head, 
a.linkbox:link:hover span.linkbox_head span.linkbox_heading { 
  background-image: url('images/linkbox_hover.png'); 
} 
a.linkbox:visited, 
a.linkbox:visited span.linkbox_body, 
a.linkbox:visited span.linkbox_head, 
a.linkbox:visited span.linkbox_head span.linkbox_heading { 
  background-image: url('images/linkbox_visited.png'); 
} 
a.linkbox:visited:hover,  
a.linkbox:visited:hover span.linkbox_body, 
a.linkbox:visited:hover span.linkbox_head, 
a.linkbox:visited:hover span.linkbox_head span.linkbox_heading { 
  background-image: url('images/linkbox_visited_hover.png'); 
} 
/* IE6 fix */
* html a.linkbox:hover, 
* html a.linkbox:hover span.linkbox_body, 
* html a.linkbox:hover span.linkbox_head, 
* html a.linkbox:hover span.linkbox_head span.linkbox_heading { 
  background-image: url('images/linkbox_hover_ie6.png'); 
} 
a.linkbox { 
  padding-right: 3ex; /* the gap on the right edge of the image (not content padding) */ 
  margin:        0 0 0 0; /* use to position the box */ 
  text-align:    center;
}


/* set the top-right image */ 
a.linkbox span.linkbox_head { 
  background-position: top right; 
  margin-right:        -3ex; /* pull the right image over on top of border */ 
  padding-right:       5ex; /* right-image-gap + right-inside padding */ 
} 
/* set the top-left image */ 
a.linkbox span.linkbox_head span.linkbox_heading { 
  display:             block;
  background-position: top left; 
  margin:              0; /* reset main site styles*/ 
  border:              0; /* ditto */ 
  padding:             2ex 0 .5ex 2ex;
  /* padding-left = image gap + interior padding ... no padding-right */ 
  height:              auto !important;
  font-size:           120%;
  letter-spacing:      1px;
  color:               #13836b;
  background-color:    inherit;
  text-decoration:     none;
} 
* html a.linkbox span.linkbox_head span.linkbox_heading {
  height: 1%; /* IE Holly Hack */ 
}
a.linkbox span.linkbox_head span.linkbox_heading span { 
  display:      block;
  margin-right: -2ex;
}
/* set the lower-left corner image */ 
a.linkbox span.linkbox_body { 
  margin: 0;
  padding: 0;
  display:             block;
  text-decoration:     none;
  background-position: bottom left; 
  margin-right:        15px; /* interior-padding right */ 
  padding:             .33ex 0 3ex 4ex; /* mirror .linkbox_head right/left */ 
} 
a.linkbox span.linkbox_body span.linkbox_body_content { 
  margin-right: -2ex;
}
a.linkbox span.linkbox_body span {
  display: block;
  padding: .5ex 0;
}
a.linkbox span.linkbox_body img {
  padding-top: 1ex;
  border:      0 dotted #fff;
}
a.linkbox span.linkbox_body span.linkbox_description {
  color:           #333;
  text-decoration: none;
}

a.linkbox span.linkbox_body span.linkbox_readmore {
  text-decoration: none;
}

a.linkbox span.linkbox_body a:hover span {
  text-decoration: none;
}