/*
  +------------------------------------------------------------------+
  | 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 : 100%;
	height : auto;
	display : block;
	border : 2px outset #797953;
	text-decoration : none;
	background-color : #797953;
	color : #E3E6C6;
	font-weight : bold; /* 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 */
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

/* 
  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 #40402C;
  background-color : #40402C;
  color : #E3E6C6;
}

/* 
  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 #BFCD98;
  background-color : #BFCD98; /* the darker colors help create the effect */
  color : #40402C;
  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 #40402C;
	background-color : #40402C;
	color : #E3E6C6;
	cursor : default;
	text-transform : none;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

/* End Styles */