/*multi-column-lists*/
/* separate list from subsequent content */
.wrapper
{
  margin-bottom: 1em;
}

ul#example7
{
  width: 34em;
  margin-left: 2em;
  padding: 1em;
  border: 1px solid #A52A2A; /* brown */
  background-image: url("images/cows.jpg");
}
ul#example7 li
{
  /* list item dimensions */

  width: 10em;
  height: 2em;

  /* Clear the default margins & padding 
  for cross-browser efficiency */
  margin: 0;
  padding: 0;

  /* suppress item markers */
  list-style-type: none;
}

/* Purty it up */
ul#example7 li 
{
  display: block;
  width: 18em;
  line-height: 2em;
  font-weight: bold;
  text-decoration: none;
  text-align: left;
  color: #C31831; /* brown */
}

/* give each list item a piece of the picture */

li.arth a { background-position: 0em -0em }
li.anem a { background-position: 0em -2em }
li.stun a { background-position: 0em -4em }
li.infe a { background-position: 0em -6em }
li.depr a { background-position: 0em -8em }
li.aneu a { background-position: 0em -10em }
li.decr a { background-position: 0em -12em }

li.lact a { background-position: -14em -0em }
li.nerv a { background-position: -14em -2em }
li.card a { background-position: -14em -4em }
li.lack a { background-position: -14em -6em }
li.food a { background-position: -14em -8em }
li.hip a { background-position: -14em -10em }
li.cush a { background-position: -14em -12em }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#example7 li.lact
{
  margin-top: -14em;
}

/* Horizontal positions of the columns */
ul#example7 li.arth,
ul#example7 li.anem,
ul#example7 li.stun,
ul#example7 li.infe,
ul#example7 li.depr,
ul#example7 li.aneu,
ul#example7 li.decr
{
  margin-left: 1em;
}
ul#example7 li.lact,
ul#example7 li.nerv,
ul#example7 li.card,
ul#example7 li.lack,
ul#example7 li.food,
ul#example7 li.hip,
ul#example7 li.cush
{
  margin-left: 15em;
}