.buttonwrapper {
height:500px;
}

a.button1, a.button2, a.button3, a.button4{
background:  url('images/BUTTONS/grey.png') no-repeat top left;
text-align:center;
display: block;
float: left;
font: bold 12px Arial; /* Change 12px as desired */
height: 100px; /* Height of button background height */
width: 100px;
text-decoration: none;
padding-top:35px;
margin-top:-30px;
}

a:link.button1{
background: transparent url('images/BUTTONS/grey.png') no-repeat top left;
color: #FFFFFF; /*button text color*/
}

a:visited.button1{
color: #FFFFFF; /*button text color*/
}

a:hover.button1{
background: transparent url('images/BUTTONS/blue.png') no-repeat;
color: #FFFFFF; /*button text color*/
}

a:active.button1{
background: transparent url('images/BUTTONS/blue.png') no-repeat top left;
color: #FFFFFF; /*button text color*/
}


a.button2:link{
background: transparent url('images/BUTTONS/grey.png') no-repeat;
color: #FFFFFF; /*button text color*/
}

a.button2:visited{
background: transparent url('images/BUTTONS/grey.png') no-repeat;
color: #FFFFFF; /*button text color*/
}

a.button2:active { /* Hover state CSS */
background: transparent url('images/BUTTONS/RED.png') no-repeat;
}
a.button2:hover { /* Hover state CSS */
background: transparent url('images/BUTTONS/RED.png') no-repeat;
}


a:link.button3{
background:  url('images/BUTTONS/grey.png') no-repeat top left;
color: #FFFFFF; /*button text color*/
}

a:visited.button3{
background:  url('images/BUTTONS/grey.png') no-repeat top left;
color: #FFFFFF; /*button text color*/
}

a:hover.button3{
background:  url('images/BUTTONS/blue.png') no-repeat;
color: #FFFFFF; /*button text color*/
}

a:active.button3{
background:  url('images/BUTTONS/blue.png') no-repeat top left;
color: #FFFFFF; /*button text color*/
}