/* link heights corresponds with image height */
.navButton, .navButton:visited {
	height:27px;
	position:relative !important;
	}

/* link and list-item widths correspond with image widths */
#home, #homeButton, #homeButton:visited {
	width:71px;
	}
#about, #aboutButton, #aboutButton:visited {
	width:115px;
	}

#villages, #villagesButton, #villagesButton:visited {
	width:115px;
	}

#events, #eventsButton, #eventsButton:visited {
	width:98px;
	}

#projects, #projectsButton, #projectsButton:visited {
	width:122px;
	}

#sponsor, #sponsorButton, #sponsorButton:visited {
	width:164px;
	}

#support, #supportButton, #supportButton:visited {
	width:137px;
	}

#contact, #contactButton, #contactButton:visited {
	width:125px;
	}

/* span is same dimensions as link and positioned to superimpose */
.navButton span, .navButton:visited span {
	display:block;
	height:27px;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	background-repeat:no-repeat;
	}

/* button images are span background images */
#homeButton span, #homeButton:visited span {
	background-image:url(/udm-resources/nav-images/home.gif);
	}

#aboutButton span, #aboutButton:visited span {
	background-image:url(/udm-resources/nav-images/about.gif);
	}

#villagesButton span, #villagesButton:visited span {
	background-image:url(/udm-resources/nav-images/villages.gif);
	}

#eventsButton span, #eventsButton:visited span {
	background-image:url(/udm-resources/nav-images/events.gif);
	}

#projectsButton span, #projectsButton:visited span {
	background-image:url(/udm-resources/nav-images/projects.gif);
	}

#sponsorButton span, #sponsorButton:visited span {
	background-image:url(/udm-resources/nav-images/sponsor.gif);
	}

#supportButton span, #supportButton:visited span {
	background-image:url(/udm-resources/nav-images/support.gif);
	}

#contactButton span, #contactButton:visited span {
	background-image:url(/udm-resources/nav-images/contact.gif);
	}


/* rollovers are background position so that no preloading is necessary */
.navButton span, .navButton:visited span {
	background-position:0 0;
	}

.navButton:hover span, 
.navButton:focus span, 
.navButton:visited:hover span,
.navButton.udmR span,
.navButton.udmR:visited span,
.navButton:active span {
	background-position:0px -27px;
	}

.selected .navButton span,
.selected .navButton:visited span {
	background-position:0 -27px;
	}

.selected .navButton:hover span,
.selected .navButton:focus span,
.selected .navButton:visited:hover span,
.selected .navButton.udmR span,
.selected .navButton.udmR:visited span,
.selected .navButton:active span {
	background-position:0px -27px;
	}