/*
  +------------------------------------------------------------------+
  | 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)
*/

ul.cpl a {
  width : 200px;
  height : auto;
  display : block;
  border : 2px outset #669900;
  text-decoration : none;
  background-color : #669900;
  color : #eee;
  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 */
}

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

ul.cpl a:hover, ul.cpl a:focus {
  border : 2px outset #537800;
  background-color : #537800;
  color : #fff;
}

/* 
  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
*/

ul.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)
*/

ul.cpl a#cpl-on, ul.cpl a#cpl-on:hover, ul.cpl a#cpl-on:focus, ul.cpl a#cpl-on:active {
  border : 2px outset  #27470e;
  background-color : #27470e;
  color : #ffee00;
  cursor : default;
  text-transform : uppercase;
  padding : 3px 10px;
}

/* End Styles */