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

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

  width: 9em;
  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: #000; /* brown */
}

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

li.dog1 a { background-position: 0em -0em }
li.dog2 a { background-position: 0em -2em }
li.dog3 a { background-position: 0em -4em }
li.dog4 a { background-position: 0em -6em }
li.dog5 a { background-position: 0em -8em }
li.dog6 a { background-position: 0em -10em }
li.dog7 a { background-position: 0em -12em }
li.dog8 a { background-position: 0em -14em }
li.dog9 a { background-position: 0em -16em }
li.dog10 a { background-position: 0em -18em }
li.dog11 a { background-position: 0em -20em }

li.dog12 a { background-position: -22em -0em }
li.dog13 a { background-position: -22em -2em }
li.dog14 a { background-position: -22em -4em }
li.dog15 a { background-position: -22em -6em }
li.dog16 a { background-position: -22em -8em }
li.dog17 a { background-position: -22em -10em }
li.dog18 a { background-position: -22em -12em }
li.dog19 a { background-position: -22em -14em }
li.dog20 a { background-position: -22em -16em }
li.dog21 a { background-position: -22em -18em }
li.dog22 a { background-position: -22em -20em }

/* 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.dog12
{
  margin-top: -22em;
}

/* Horizontal positions of the columns */
ul#example7 li.dog1,
ul#example7 li.dog2,
ul#example7 li.dog3,
ul#example7 li.dog4,
ul#example7 li.dog5,
ul#example7 li.dog6,
ul#example7 li.dog7,
ul#example7 li.dog8,
ul#example7 li.dog9,
ul#example7 li.dog10,
ul#example7 li.dog11
{
  margin-left: 1em;
}
ul#example7 li.dog12,
ul#example7 li.dog13,
ul#example7 li.dog14,
ul#example7 li.dog15,
ul#example7 li.dog16,
ul#example7 li.dog17,
ul#example7 li.dog18,
ul#example7 li.dog19,
ul#example7 li.dog20,
ul#example7 li.dog21,
ul#example7 li.dog22
{
  margin-left: 8em;
}