/* Source References */
/* http://www.jaymeblackmon.com/preloading-css-hover-images 
 and http://www.echoecho.com/csslinks.htm */
/* In the css you will need to define with anchor tag definitions
as well as the definition for the div element itself.The key is the
highlighted line of code in the div. If you specify the hover
state on the div element background, the image will be hidden
by the a:link class background image, but it will be loaded
when the page is loaded. 
A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
*/

/* Specifications for  navigation buttons on first page index.html */ 
		 	 
/* button1  */
.button1 {
border-style: groove; 
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/blue.jpg) no-repeat top left; /* Hover image */
}
.button1 a:link, .button1 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/bluefade.jpg) no-repeat top left; /*  image  */
}
.button1 a:hover, .button1 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/blue.jpg) no-repeat top left; /* Hover image */
}
.button1 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 27px;
}

/* button2  */
.button2 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/white.jpg) no-repeat top left; /* Hover image */
}
.button2 a:link, .button2 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/whitefade.jpg) no-repeat top left; /* image */
}
.button2 a:hover, .button2 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/white.jpg) no-repeat top left; /* Hover image */
}
.button2 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 27px;
}	

/* button3  */
.button3 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url('../images/sunflowerbutton2.jpg') no-repeat top left; /* Hover image */
}
.button3 a:link, .button3 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url('../images/sunflowerbutton1.jpg') no-repeat top left; /* image */
}
.button3 a:hover, .button3 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url('../images/sunflowerbutton2.jpg') no-repeat top left; /* Hover image */
}
.button3 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 40px;
}	

/* button4  */
.button4 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/plant_sale_full.jpg) no-repeat top left; /* Hover image */
}
.button4 a:link, .button4 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/plant_sale_fade.jpg) no-repeat top left; /* image */
}
.button4 a:hover, .button4 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/plant_sale_full.jpg) no-repeat top left; /*/* Hover image */
}
.button4 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 10px;
}	

/* button5  */
.button5 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/photogalbutton.jpg) no-repeat top left; /* Hover image */
}
.button5 a:link, .button5 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/photogalfadbutton.jpg) no-repeat top left; /* image */
}
.button5 a:hover, .button5 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/photogalbutton.jpg) no-repeat top left; /* Hover image */
}
.button5 span {
display: block;
margin:0;
font: bold 16px sans-serif;
padding: 85px 0 0 15px;
}	

/* button6  */
.button6 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/threedeer.jpg) no-repeat top left; /* Hover image */
}
.button6 a:link, .button6 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/threedeerfade.jpg) no-repeat top left; /* image */
}
.button6 a:hover, .button6 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/threedeer.jpg) no-repeat top left; /* Hover image */
}
.button6 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 11px;
}	

/* button7  */
.button7 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/Mill.jpg) no-repeat top left; /* Hover image */
}
.button7 a:link, .button7 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/Millgrayscale.jpg) no-repeat top left; /* image */
}
.button7 a:hover, .button7 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/Mill.jpg) no-repeat top left; /* Hover image */
}
.button7 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 11px;
}	

/* button8  */
.button8 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/market.jpg) no-repeat top left; /* Hover image */
}
.button8 a:link, .button8 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/marketgray.jpg) no-repeat top left; /* image */
}
.button8 a:hover, .button8 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/market.jpg) no-repeat top left; /* Hover image */
}
.button8 span {
display: block;
margin:0;
font: bold 16px sans-serif;
padding: 85px 0 0 11px;
}	

/* button9  */
.button9 {
border-style: groove;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/weeklyflower.jpg) no-repeat top left; /* Hover image */
}
.button9 a:link, .button9 a:visited {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
text-decoration: none;
background:url(../images/weeklyflowergray.jpg) no-repeat top left; /* image */
}
.button9 a:hover, .button9 a:active {
display:block;
width: 128px;
height: 186px;
padding:0px;
margin:0px;
background:url(../images/weeklyflower.jpg) no-repeat top left; /* Hover image */
}
.button9 span {
	display: block;
	margin: 0;
	font: bold 16px sans-serif;
	padding: 85px 0 0 11px;
}