/* NOTES */
/*

This is based on Bowman's fantastic menu technique. Note that in this
case, the long image is on the left, normalized thusly in order to accomodate
the styles that include an icon to the left button text.

Remember that the images contain both the off-state and on-state, and the
off-state is above (i.e. closer to the top edge of the png) the on-state.

Sizes and styles
-------------------------------------------
1. Basic functionality is set up by an ancestor div (or immediate parent)
		class="btn" (required)
		
2. The anchor class determines the style
		class="" (currently same as class="h20")
		class="h20"  (20px high, no icon)
		class="h25i" (25px high, with icon on left)
		
3. Watch the margins of the <span> and line-height 
		top + bottom margin + line-height = height of button
		
Example:
	A 25px high button, with icon to the left of the button text.

	<div class="btn"><a class="h25i" href="#"><span>Text on Button with Icon</span></a></div>



Required images  
--------------------------------------------

lefts-long_20px.png           300 x 60
rights-sliver_20px.png          2 x 60

lefts-long_25px.png           300 x 75
rights-sliver_25px.png          2 x 75

lefts-icon-long_25px.png      300 x 75
rights-icon-sliver_25px.png     2 x 75

*/


.btn {
	float:left;
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:12px;
	padding-right:1px;
}

/* ensure correct pointer */ 
.btn a,
.btn a span {
	cursor: pointer;
}

.btn a,
.btn a.h20 {
	float:left;
	background:url("/assets/images/buttons/png/lefts-long_20px.png") no-repeat left top;
	padding:0 0 0 9px; /* space between left edge and first character in button text */
	margin:0;
	text-decoration:none;
}
.btn a.h25i {
	background-image:url("/assets/images/buttons/png/lefts-icon-long_25px.png");
	margin-right:5px;
	padding: 0 0 0 15px; /* in order to push the button text past the icon */ 
}

/* here's where the button get its text */
/* VORSICHT! top margin + bottom margin + line-height = height of button!!! */
.btn a span,
.btn a.h20 span {
	float:left;
	display:block;
	background:url("/assets/images/buttons/png/rights-sliver_20px.png") no-repeat right top;
	padding:4px 15px 4px 7px;  
	font-weight:bold;
	color:#000;
}
.btn a.h25i span {
	background-image:url("/assets/images/buttons/png/rights-icon-sliver_25px.png");
	padding:7px 15px 6px 7px;
}

.btn a:hover,
.btn a:hover span {
	color: #febd18; /* the official squash color */
	color: #e3ac20; /* color of icon in on-state */
	color: #f6b717; /* color of text in PSD */
	color: #ffaf02; /* color of border (same for on- and off-states) */
}

/* on state (left-hand portion) */
.btn a:hover,
.btn a.h20:hover {
	background-position:0% -40px;
}
.btn a.h25i:hover {
	background-position:0% -50px;
}

/* on state (right-hand portion) */
.btn a:hover span,
.btn a.h20:hover span {
	background-position:100% -40px;
}
.btn a.h25i:hover span {
	background-position:100% -50px;
}