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

ul#example7
{
  width: 30em;
  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 -0em }
li.dog12 a { background-position: -18em -2em }
li.dog13 a { background-position: -18em -4em }
li.dog14 a { background-position: -18em -6em }
li.dog15 a { background-position: -18em -8em }
li.dog16 a { background-position: -18em -10em }
li.dog17 a { background-position: -18em -12em }
li.dog18 a { background-position: -18em -14em }
li.dog19 a { background-position: -18em -16em }
li.dog20 a { background-position: -18em -18em }


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

/* 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
{
  margin-left: 1em;
}
ul#example7 li.dog11,
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
{
  margin-left: 10em;
}

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

ul#example1
{
  width: 25em;
  margin-left: 1.5em;
  padding: 0.6em;
  border: 1px solid #000; /* brown */
}
ul#example1 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#example1 li 
{
  display: block;
  width: 24em;
  line-height: 1.5em;
  font-weight: bold;
  font-size:.67em;
  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: 0em -22em }

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


/* 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#example1 li.dog13
{
  margin-top: -24em;
}

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

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

ul#example2
{
  width: 25em;
  margin-left: 1.5em;
  padding: 0.6em;
  border: 1px solid #000; /* brown */
}
ul#example2 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#example2 li 
{
  display: block;
  width: 24em;
  line-height: 1.5em;
  font-weight: bold;
  font-size:.67em;
  text-decoration: none;
  text-align: left;
  color: #000; /* brown */
}

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

li.h1 a { background-position: 0em -0em }
li.h2 a { background-position: 0em -2em }
li.h3 a { background-position: 0em -4em }
li.h4 a { background-position: 0em -6em }
li.h5 a { background-position: 0em -8em }
li.h6 a { background-position: 0em -10em }
li.h7 a { background-position: 0em -12em }
li.h8 a { background-position: 0em -14em }
li.h9 a { background-position: 0em -16em }
li.h10 a { background-position: 0em -18em }
li.h11 a { background-position: 0em -20em }
li.h12 a { background-position: 0em -22em }
li.h13 a { background-position: 0em -24em }
li.h14 a { background-position: 0em -26em }

li.h15 a { background-position: -26em -0em }
li.h16 a { background-position: -26em -2em }
li.h17 a { background-position: -26em -4em }
li.h18 a { background-position: -26em -6em }
li.h19 a { background-position: -26em -8em }
li.h20 a { background-position: -26em -10em }
li.h21 a { background-position: -26em -12em }
li.h22 a { background-position: -26em -14em }
li.h23 a { background-position: -26em -16em }
li.h24 a { background-position: -26em -18em }
li.h25 a { background-position: -26em -20em }
li.h26 a { background-position: -26em -22em }
li.h27 a { background-position: -26em -24em }
li.h28 a { background-position: -26em -26em }


/* 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#example2 li.h15
{
  margin-top: -28em;
}

/* Horizontal positions of the columns */
ul#example2 li.h1,
ul#example2 li.h2,
ul#example2 li.h3,
ul#example2 li.h4,
ul#example2 li.h5,
ul#example2 li.h6,
ul#example2 li.h7,
ul#example2 li.h8,
ul#example2 li.h9,
ul#example2 li.h10,
ul#example2 li.h11,
ul#example2 li.h12,
ul#example2 li.h13,
ul#example2 li.1h4
{
  margin-left: 0.5em;
}
ul#example2 li.h15,
ul#example2 li.h16,
ul#example2 li.h17,
ul#example2 li.h18,
ul#example2 li.h19,
ul#example2 li.h20,
ul#example2 li.h21,
ul#example2 li.h22,
ul#example2 li.h23,
ul#example2 li.h24,
ul#example2 li.h25,
ul#example2 li.h26,
ul#example2 li.h27,
ul#example2 li.h28
{
  margin-left: 15em;
}

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

ul#example3
{
  width: 21em;
  margin-left: 1.5em;
  padding: 0.6em;
 
  border: 1px solid #000; /* brown */
}
ul#example3 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#example3 li 
{
  display: block;
  width: 20em;
  line-height: 1.5em;
  font-weight: bold;
  font-size:.67em;
  text-decoration: none;
  text-align: left;
  color: #000; /* brown */
}

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

li.d1 a { background-position: 0em -0em }
li.d2 a { background-position: 0em -2em }
li.d3 a { background-position: 0em -4em }
li.d4 a { background-position: 0em -6em }
li.d5 a { background-position: 0em -8em }
li.d6 a { background-position: 0em -10em }

li.d7 a { background-position: -12em -0em }
li.d8 a { background-position: -12em -2em }
li.d9 a { background-position: -12em -4em }
li.d10 a { background-position: -12em -6em }
li.d11 a { background-position: -12em -8em }
li.d12 a { background-position: -12em -10em }
li.d13 a { background-position: -12em -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#example3 li.d7
{
  margin-top: -12em;
}

/* Horizontal positions of the columns */
ul#example3 li.d1,
ul#example3 li.d2,
ul#example3 li.d3,
ul#example3 li.d4,
ul#example3 li.d5,
ul#example3 li.d6
{
  margin-left: 0.5em;
}
ul#example3 li.d7,
ul#example3 li.d8,
ul#example3 li.d9,
ul#example3 li.d10,
ul#example3 li.d11,
ul#example3 li.d12,
ul#example3 li.d13
{
  margin-left: 17em;
}