#navbar {
	float: left;
        width:140px;
	height:300px;
	padding: 5px;
}

#navbar a {
	text-decoration: none;
	display: block;
	height: 25px;
	text-indent: -5000px;
	background-image: url(images/nav.gif);
	background-repeat: no-repeat;
}

/* individual buttons on the navbar - the name tags are the inactive buttons
 * (blue) & the :hover tags are the active (mouse over button - yellow)
 * buttons. all buttons are part of the same file - nav.gif, so we dont need
 * to preload images etc, the viewed part of the image is moved when the
 * mouse is over it. */ 

#navbar #home {
	background-position: 0px 0px;
	width: 140px;
}

#navbar #home:hover {
	background-position: 0 -25px;
}

#navbar #bio {
	background-position: 0px -50px;
	width: 140px;
}
#navbar #bio:hover {
	background-position: 0px -75px;
}

#navbar #pics {
	background-position: 0px -100px;
	width: 140px;
}
#navbar #pics:hover {
	background-position: 0px -125px;
}

#navbar #gigs{
	background-position: 0px -150px;
	width: 140px;
}

#navbar #gigs:hover {
	background-position: 0px -175px;
}

#navbar #links {
	background-position: 0px -200px;
	width: 140px;
}

#navbar #links:hover {
	background-position: 0px -225px;
}

#navbar #guest {
	background-position: 0px -250px;
	width: 140px;
}

#navbar #guest:hover {
	background-position: 0px -275px;
}

#navbar #cd {
	background-position: 0px -300px;
	width: 140px;
}

#navbar #cd:hover {
	background-position: 0px -325px;
}

#navbar #contact {
	background-position: 0px -350px;
	width: 140px;
}

#navbar #contact:hover {
	background-position: 0px -375px;
}

#navbar #myspace {
	background-position: 0px -400px;
	width: 140px;
}

#navbar #myspace:hover {
	background-position: 0px -425px;
}

#navbar #facebook {
	background-position: 0px -450px;
	width: 140px;
}

#navbar #facebook:hover {
	background-position: 0px -475px;
}