/* CSS Document */

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

ul#example7
{
  width: 20em; /*changed from 20em*/
  height: 14em; /*specified height for background to show, height not nessacary for function*/
  margin: 0;
  padding: 0;
  /*border: 1px solid #A52A2A; /* brown */
  background-image: url(/images/RubberBandsErase2.gif);
  background-repeat: no-repeat;
}
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;
}

/* Pretty it up */
ul#example7 li a
{
  display: block;
  width: 10em;
  line-height: 2em;
  font-weight: bold;
  font-family: Verdana;
  text-align: left;
  color: #666666; /* gray */
}
/* mouseover gets the bright photo */
ul#example7 li a:hover
{
  text-decoration: none;
  color: #BC161C; /* red */  
}

/* give each list item a piece of the picture (currently not using a background for hover) */

li.OfficeProducts a { background-position: 0em -0em }
li.Janitorial a { background-position: 0em -2em }
li.Technology a { background-position: 0em -4em }
li.OfficeRx a { background-position: 0em -6em }

li.Furniture a { background-position: -8em -0em }
li.Legal a { background-position: -8em -2em }
li.School a { background-position: -8em -4em }
li.Item8 a { background-position: -8em -6em }

li.Item9 a { background-position: -16em -0em }
li.Item10 a { background-position: -16em -2em }
li.Item11 a { background-position: -16em -4em }
li.Item12 a { background-position: -16em -6em }


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

ul#example7 li.Furniture
{
  margin-top: -8em;
}

/* Horizontal positions of the columns */
ul#example7 li.OfficeProducts,
ul#example7 li.Janitorial,
ul#example7 li.Technology,
ul#example7 li.OfficeRx,
{
  margin-left: 6.5em; /*from 7*/
}
ul#example7 li.Furniture,
ul#example7 li.Legal,
ul#example7 li.School,
ul#example7 li.Item8,
{
  margin-left: 15.5em; /*from 17*/
}
ul#example7 li.Item9,
ul#example7 li.Item10,
ul#example7 li.Item11,
ul#example7 li.Item12,
{
  margin-left: 24em;
}

/* Original CSS --> http://www.alistapart.com/articles/multicolumnlists/#method7    Visual at -> http://www.alistapart.com/d/multicolumnlists/example7.html. Copy is saved under "CloumnListOriginal.CSS:*/