/*
  +------------------------------------------------------------------+
  | Green-Beast.com                                                  |
  | CSS: Pushbutton Links                                            |
  | Cascading Style Sheet                                            |
  | Copyright Mar 2008                                               |
  | Use with attribution by visible link please!                     |
  | Attribute to: <a href="http://green-beast.com/">Mike Cherim</a>  |
  +------------------------------------------------------------------+
*/ 

/*
  Below is the CSS needed to create the pushbutton effect to the 
  links only. On the demo page I used an unordered list marked with
  the class "cpl" (<ul class="cpl">) and serves as a parent for the 
  links (as the CSS below shows). 
  
  The current page link is marked with the class cpl-on, like this: 
  <a class="cpl-on" href="#">Example Link</a>
*/

/*
  The links style (a:visited omitted for demo)
*/

td.cpl a {
  width : 150px;
  height : auto;
  display : block;
  border : 0px outset #ffffff;
  text-decoration : none;
  background-color : #ffffff;
  color : #40afe4;
  font-weight : bold;
  padding : 3px 10px; /* 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 */