td.cpl a {
  width : 100px;
  height : auto;
  display : block;
  border : 0px outset #ffffff;
  text-decoration : none;
  background-color : #ffffff;
  color : #40afe4;
  font-weight : bold;
  padding : 3px 5px; /* these initial top/bottom left/right padding values are critical to create a baseline left/right value can be whatever but must exist */
  outline : 0;
  cursor : pointer; /* this is needed for Opera due to the current style - weird but true */
    text-transform : uppercase;
}

/* 
  I made hover and focus the same, the button isn't pushed yet, but...
*/

td.cpl a:hover, ul.cpl a:focus {
border : 0px outset #000000;
/*  background-image:url("../images/submit.gif"); background-repeat:no-repeat; background-position:right;*/
color : #000000;
text-transform : uppercase;
}

/* 
  This is focus in IE... for other browsers, the button is depressed when clicked or Enter it pressed.
  When using a 2px border, the padding will shift 1px left and to the top
*/

td.cpl a:active {
  border : 2px inset #27470e;
  background-color : #27470e; /* the darker colors help create the effect */
  color : #999;
  padding : 2px 11px 4px 9px; /* these new padding values are the mainstay or the effect to create natural movement */
}

/* 
  Now the current page styles (applied to a self-link, not plain text, but either way, just class and style the current LI instead)
*/

td.cpl a#cpl-on, ul.cpl a#cpl-on:hover, ul.cpl a#cpl-on:focus, ul.cpl a#cpl-on:active {
  border : 0px outset  #40afe4;
  background-color : #40afe4;
  color : #000000;
  cursor : default;
  text-transform : uppercase;
  padding : 3px 10px;
}

/* End Styles */