/*Buy Button*/

#buybutton {
	position: relative;
	width: 50px;
	height: 19px;
	left: 0px;
	top: 3px;
	z-index: 1;
}


/* button 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#buyNow {

	list-style-type: none;

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

	padding: 0;

}

dl#buyNow 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 0 0 0; /* adds space after each menu button on the right side */

}

dl#buyNow 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*/

.buy1 {

	background: url(../Images/Buttons/BuyButton.gif) top left no-repeat;

	width: 100px

}


/* 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" */

.buy1:hover,

body.buy1 #buy dd a.buy1,

.selected{

	background-position: bottom left;

}

img {

	border: 0;

}