/*
 * Basic setup
 * We use a single image for all buttons (normal and rollover versions).
 * This is faster in a sense that a single image is smaller than multiple
 * images, and also we shouldn't take care of pre-downloading the rollover
 * versions, as we would have to in the javascript version.
 */
ul.cssmenu {
  list-style: none;
  padding: 0px;
}
.displace {
  position: absolute;
  left: -5000px;
}
ul.cssmenu li {
  float: left;
}
ul.cssmenu li a {
  display: block;
  height: 40px;
  background: url('/images/menu3.png');
}

/*
 * Normal Links
 */
ul.cssmenu li.button_home a {
  width: 80px;
  background-position: -0px 0;
}
ul.cssmenu li.button_info a {
  width: 80px;
  background-position: -80px 0;
}
ul.cssmenu li.button_arena a {
  width: 60px;
  background-position: -160px 0;
}
ul.cssmenu li.button_interviews a {
  width: 120px;
  background-position: -220px 0;
}
ul.cssmenu li.button_logic a {
  width: 80px;
  background-position: -340px 0;
}
ul.cssmenu li.button_misc a {
  width: 60px;
  background-position: -420px 0;
}
ul.cssmenu li.button_about a {
  width: 100px;
  background-position: -480px 0;
}

/*
 *	Hover Links
 */
ul.cssmenu li.button_home a:hover {
  width: 80px;
  background-position: 0 -40px;
}
ul.cssmenu li.button_info a:hover {
  width: 80px;
  background-position: -80px -40px;
}
ul.cssmenu li.button_arena a:hover {
  width: 60px;
  background-position: -160px -40px;
}
ul.cssmenu li.button_interviews a:hover {
  width: 120px;
  background-position: -220px -40px;
}
ul.cssmenu li.button_logic a:hover {
  width: 80px;
  background-position: -340px -40px;
}
ul.cssmenu li.button_misc a:hover {
  width: 60px;
  background-position: -420px -40px;
}
ul.cssmenu li.button_about a:hover {
  width: 100px;
  background-position: -480px -40px;
}