ul.nav-matrix {
  list-style-type: none;
  margin-bottom: 1em;
  overflow: hidden;
  padding: 0;
  width: 600px;
}
ul.nav-matrix li {
  background-color: #DFCFB5;
  float: left;
  height: 60px;
  margin: 5px;
  padding: 0 0 0 65px;
  width: 125px;
}
ul.nav-matrix li:hover {
  background-color: rgb(229,222,211);
}
ul.nav-matrix li a {
  text-decoration: none;
  color: #333;
  font: 1.1em Helvetica, Verdana, sans-serif;
  vertical-align: -30%;
  display: block;
  margin-top: 10px;
}
ul.nav-matrix li a:hover {
  color: #111;
}


li#facilities_1 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/park_sprite.png') 0px 0px no-repeat;
}
li#facilities_1:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#facilities_2 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/beach_sprite.png') 0px 0px no-repeat;
}
li#facilities_2:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#facilities_3 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/boat_sprite.png') 0px 0px no-repeat;
}
li#facilities_3:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#facilities_4 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/amenities_sprite.png') 0px 0px no-repeat;
}
li#facilities_4:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#facilities_5 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/pavillion_sprite.png') 0px 0px no-repeat;
}
li#facilities_5:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#facilities_6 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/preserves_sprite.png') 0px 0px no-repeat;
}
li#facilities_6:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}

li#recreation_1 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/athletics_sprite.png') 0px 0px no-repeat;
}
li#recreation_1:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_2 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/pool_sprite.png') 0px 0px no-repeat;
}
li#recreation_2:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_3 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/camps_sprite.png') 0px 0px no-repeat;
}
li#recreation_3:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_4 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/fitness_sprite.png') 0px 0px no-repeat;
}
li#recreation_4:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_5 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/tennis_sprite.png') 0px 0px no-repeat;
}
li#recreation_5:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_6 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/document_sprite.png') 0px 0px no-repeat;
}
li#recreation_6:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_7 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/golf_sprite.png') 0px 0px no-repeat;
}
li#recreation_7:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_8 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/canoe_sprite.png') 0px 0px no-repeat;
}
li#recreation_8:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#recreation_9 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/hunting_sprite.png') 0px 0px no-repeat;
}
li#recreation_9:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}

li#services_1 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/educate_sprite.png') 0px 0px no-repeat;
}
li#services_1:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#services_2 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/volunteer_sprite.png') 0px 0px no-repeat;
}
li#services_2:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#services_3 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/environment_sprite.png') 0px 0px no-repeat;
}
li#services_3:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#services_4 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/resource_sprite.png') 0px 0px no-repeat;
}
li#services_4:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#services_5 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/marine_sprite.png') 0px 0px no-repeat;
}
li#services_5:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#services_6 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/fertilize_sprite.png') 0px 0px no-repeat;
}
li#services_6:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}

li#it_1 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/map_sprite.png') 0px 0px no-repeat;
}
li#it_1:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#it_2 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/website_sprite.png') 0px 0px no-repeat;
}
li#it_2:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#it_3 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/data_sprite.png') 0px 0px no-repeat;
}
li#it_3:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#it_4 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/network_sprite.png') 0px 0px no-repeat;
}
li#it_4:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#it_5 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/software_sprite.png') 0px 0px no-repeat;
}
li#it_5:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#it_6 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/radio_sprite.png') 0px 0px no-repeat;
}
li#it_6:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}

li#mcat_1 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/schedule_sprite.png') 0px 0px no-repeat;
}
li#mcat_1:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_2 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/fares_sprite.png') 0px 0px no-repeat;
}
li#mcat_2:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_3 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/handybus_sprite.png') 0px 0px no-repeat;
}
li#mcat_3:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_4 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/ridership_sprite.png') 0px 0px no-repeat;
}
li#mcat_4:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_5 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/planning_sprite.png') 0px 0px no-repeat;
}
li#mcat_5:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_6 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/suggestions_sprite.png') 0px 0px no-repeat;
}
li#mcat_6:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_7 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/advertise_sprite.png') 0px 0px no-repeat;
}
li#mcat_7:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_8 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/detour_sprite.png') 0px 0px no-repeat;
}
li#mcat_8:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}
li#mcat_9 {
  background: rgb(223,207,181) url('/dms/templating-kit/nav-matrix/map_sprite.png') 0px 0px no-repeat;
}
li#mcat_9:hover {
  background-color: rgb(229,222,211);
  background-position: 0 100%;
}