/* Thanks to http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/ */
.button:link,
.button:visited,
.button:hover {border:none;}


.button:link,
.button:visited { /* Top left corner, top edge */
	float:left;
	color:#FF9;
	background:#333 url(../images/button.png) no-repeat;
	font:1.2em/1.0 Georgia,serif;
	text-decoration:none;
}
.button * {display:block;}
.button span { /* Top right corner */
	padding:6px 0 0;
	background:url(../images/corners.png) no-repeat right top;
}
.button span span { /* Bottom left corner, left and bottom edges */
	padding:0 0 0 6px;
	background:url(../images/button.png) no-repeat left bottom;
}
.button span span span { /* Bottom right corner */
	padding:0 0 6px;
	background:url(../images/corners.png) no-repeat right bottom;
}
.button span span span span { /* Right edge */
	padding:3px 12px 3px 6px; /* Extra padding (3px vertical, 6px horizontal) added to give the text some breathing room */
	background:url(../images/button.png) no-repeat right center;
}
.button:hover,
.button:focus,
.button:active { /* Make the button more visible on :hover and :focus */
	outline:2px solid #ff0; /* Not supported by IE/Win :-( */
	color:#fff;
}
/* Put the demo buttons on separate rows with some space between */
div.clear {clear:both;}
.button {margin:1em;}
span.buttonseparator { padding-right:0;}