a.grbutton {
   /* background: transparent url('images/groenback.gif') no-repeat scroll top right;*/
    color: #FFFFFF;
    display: block;
    float: left;
    font: normal 12px verdana, arial, sans-serif;
    height: 28px;
    margin-right: 0px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
.groen {background: transparent url('images/groenback.gif') no-repeat scroll top right;}
.paars {background: transparent url('images/paarsback.gif') no-repeat scroll top right;}
.blauw {background: transparent url('images/blueback.gif') no-repeat scroll top right;}

a.grbutton span {
   /* background: transparent url('images/groenback-span.gif') no-repeat;*/
    display: block;
		font: normal 12px verdana, arial, sans-serif;
		line-height: 14px;
    padding: 7px 0 7px 18px;
} 
.groen span {
    background: transparent url('images/groenback-span.gif') no-repeat;}
.paars span {
    background: transparent url('images/paarsback-span.gif') no-repeat;}
.blauw span {
    background: transparent url('images/blueback-span.gif') no-repeat;}
/*Note: Make sure the span's vertical padding (5 + 5) and line-height (14) amount to the total height of the button (24). Using a different padding, means setting a different height. */

a.grbutton:hover {
    background-position: bottom right;
    color: #FFFFFF;
    outline: none; 
}

a.grbutton:hover span {
    background-position: bottom left;
    padding: 7px 0 7px 18px; 
}

a.grbutton:active {
    background-position: bottom right;
    color: #FFFFFF;
    outline: none; /* hide dotted outline in Firefox */
		text-decoration:none;
}

a.grbutton:active span {
    background-position: bottom left;
    padding: 8px 0 6px 18px; /* push text down 1px */
		/*font-size:13px;*/
		color: #000070;
} 
div.buttonwrapper {
	padding: 5px 0px 0px 5px;
	margin: 0 auto;
	width: 80px;
	height:30px;
	text-align:center;
}