/*
-----------------------------------------

BUTTON

-----------------------------------------
*/

.button { 
	width:500px; 
	margin:10px auto; 
	text-align:left; }

	.button a {
		text-decoration: none;
		position:relative;
		display:inline-block;
		z-index:1;
		padding:7px 12px;
		border:0;
		overflow:hidden;
		font-weight:bold;
		font-family:Arial, sans-serif;
		color:#666;
		background:#e0e0e0;
		/* css3 */
		-webkit-border-radius:6px;
		-moz-border-radius:6px;
		border-radius:6px;
		}
                                                
/* Opera 10.5 gets this next bit wrong. It seems to calculate :before {right:0} before drawing the :after {content:"\00bb";}
   You can get around this by absolutely positioning the :after pseudo-element instead */

.button a:before {
	content:"";
	display:block;
	position:absolute;
	z-index:-1;
	top:50%;
	left:0;
	right:0; 
	bottom:0;
	background:#d3d3d3;
	/* css3 */
	-webkit-border-radius:0 0 6px 6px;
	-moz-border-radius:0 0 6px 6px;
	border-radius:0 0 6px 6px;
	}
	
.button a:after {
	content:"\00bb";
	padding-left:5px;}

.button a:hover,
.button a:focus,
.button a:active { color:#fff; background:#ec6196;}
.button a:hover:before {background:#ea4c88;}