/*Nav Bar*/

#Menu {
	position: absolute;
	width: 650px;
	height: 19px;
	left: 108px;
	top: 3px;
	z-index: 1;
}


/* nav rollover */

/*Thank you Brent LaMotte!;

this rollover has image states stacked for images top and bottom - one image shows both normal and rollover, change :hover needs to be bottom left for vertical stacked image, top right for horizontal placed normal/rollove image.

for vertical positioned menu rollovers, remove the float calls below 

this is set for different widths, but you can make it for different heights

*/

dl#nav {

	list-style-type: none;

	margin: 0 0 0 7px; /* adds margin to left end of nav (top, right, bottom, left) */

	padding: 0;

}

dl#nav dd {

	height: 19px; /* height of nav image that you want to show - this is half the height of the actual combined normal/rollover image */

	display: block;

	float: left; /* floats other menu buttons "to the left" */

	padding: 0;

	margin: 0 15px 0 0; /* adds space after each menu button on the right side */

}

dl#nav dd a {

	overflow: hidden; /* hides the part of image not needed right now */

	display: block;   /* changes inline behavior to block behavior */

}

/* nav specific information */


/* used transparent spacer gif to set the position since they are different sizes. spacer gif is height of what is showing, and is width of shortest button*/

.button1 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/MeetPaul.gif) top left no-repeat;

	width: 53px

}

.button2 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/Press.gif) top left no-repeat;

	width: 28px

}

.button3 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/Store.gif) top left no-repeat;

	width: 28px

}

.button4 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/BookShow.gif) top left no-repeat;

	width: 66px

}

.button5 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/Lyrics.gif) top left no-repeat;

	width: 91px

}

.button6 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/Free-Music.gif) top left no-repeat;

	width: 109px

}

.button7 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/News.gif) top left no-repeat;

	width: 97px

}

.button8 {

	background: url(http://www.talltunes.com/TallTunes/Images/Buttons/Contact.gif) top left no-repeat;

	width: 42px

}

/* for active pages, change background image to hover image position by adding SELECTED class ie: in the HTML page that you want selected, in the class for the href linking to the selecte page, put this: class="button1 selected"   instead of just this on the non-selected pages class="button1" */

.button1:hover,.button2:hover,.button3:hover,.button4:hover,.button5:hover,.button6:hover,.button7:hover,.button8:hover,

body.button1 #nav dd a.button1,
body.button2 #nav dd a.button2,
body.button3 #nav dd a.button3,
body.button4 #nav dd a.button4,
body.button5 #nav dd a.button5,
body.button6 #nav dd a.button6,
body.button7 #nav dd a.button7,
body.button8 #nav dd a.button8,

.selected{

	background-position: bottom left;

}

img {

	border: 0;

}