/* Stuff for the CSS buttons */

.button.grayedout {
	cursor: default;
}

.button {
	color: white;
	font-weight: bold;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	text-shadow: 0.07em 0.07em 0.12em #888;
	position: relative;
	cursor: pointer;
	display: inline-block;
	background-repeat: repeat-x;
	margin: 0px 7px;
	white-space: nowrap;
}

.button.big, .button.bigblue, .button.green {
	background-image: url('/img/buttons/button-middle.png');
	height: 29px;
	letter-spacing: -0.05em;
	font-size:  13px;
}

.button.bigblue {
	background-image: url('/img/buttons/big-blue-middle.png');
}

.button.green {
	background-image: url('/img/buttons/green-middle.png');
}


.button.big span, .button.bigblue span, .button.green span {
	position: relative;
	top: 6px;
	margin: 0px 12px;
}

.button.big.narrow span, .button.bigblue.narrow span, .button.green.narrow span {
	margin: 0px 2px;
}

.button.big.over {
	background-image: url('/img/buttons/button-middle-over.png')
}

.button.green.over {
	background-image: url('/img/buttons/green-middle-over.png')
}

.button.bigblue.over {
	background-image: url('/img/buttons/big-blue-middle-over.png')
}


.button.big .button-right, .button.bigblue .button-right, .button.green .button-right {
	background-repeat: no-repeat;
	width: 6px;
	height: 29px;
	position: absolute;
	top: 0px;
	right: -6px;
	background-image: url('/img/buttons/button-right.png');
}

.button.bigblue .button-right {
	width: 7px;
	right: -7px;
	background-image: url('/img/buttons/big-blue-right.png');
}

.button.green .button-right {
	width: 6px;
	right: -6px;
	background-image: url('/img/buttons/green-right.png');
}


.button.green.over .button-right {
	background-image: url('/img/buttons/green-right-over.png');
}

.button.big.over .button-right {
	background-image: url('/img/buttons/button-right-over.png');
}

.button.bigblue.over .button-right {
	background-image: url('/img/buttons/big-blue-right-over.png')
}

.button.big .button-left, .button.bigblue .button-left, .button.green .button-left {
	background-image: url('/img/buttons/button-left.png');
	background-repeat: no-repeat;
	width: 6px;
	height: 29px;
	position: absolute;
	top: 0px;
	left: -6px;
}

.button.bigblue .button-left {
	width: 7px;
	left: -7px;
	background-image: url('/img/buttons/big-blue-left.png');
}

.button.green .button-left {
	width: 6px;
	left: -6px;
	background-image: url('/img/buttons/green-left.png');
}

.button.big.over .button-left {
	background-image: url('/img/buttons/button-left-over.png');
}

.button.green.over .button-left {
	background-image: url('/img/buttons/green-left-over.png');
}

.button.bigblue.over .button-left {
	background-image: url('/img/buttons/big-blue-left-over.png');
}


.button.blue {
	height: 25px;
	letter-spacing: -0.05em;
	font-size:  11px;
	background-image: url('/img/buttons/button-blue-middle.png');
}

.button.blue span {
	position: relative;
	top: 5px;
	margin: 0px 6px;
}

.button.blue.over {
	background-image: url('/img/buttons/button-blue-middle-over.png');
}

.button.blue .button-right {
	background-repeat: no-repeat;
	width: 6px;
	height: 25px;
	position: absolute;
	top: 0px;
	right: -6px;
	background-image: url('/img/buttons/button-blue-right.png');
}

.button.blue.over .button-right {
	background-image: url('/img/buttons/button-blue-right-over.png')
}

.button.blue .button-left {
	background-repeat: no-repeat;
	width: 6px;
	height: 25px;
	position: absolute;
	top: 0px;
	left: -6px;
	background-image: url('/img/buttons/button-blue-left.png');
}

.button.blue.over .button-left {
	background-image: url('/img/buttons/button-blue-left-over.png')
}

.button.small {
	background-image: url('/img/buttons/small-button-middle.png');
	height: 22px;
	font-size:  10px;
	letter-spacing: -0.1em;
}

.button.small span {
	position: relative;
	top: 4px;
	margin: 0px 4px;
}

.button.small.over {
	background-image: url('/img/buttons/small-button-middle-over.png')
}

.button.small .button-right {
	background-image: url('/img/buttons/small-button-right.png');
	background-repeat: no-repeat;
	width: 7px;
	height: 22px;
	position: absolute;
	top: 0px;
	right: -7px;
}

.button.small.over .button-right {
	background-image: url('/img/buttons/small-button-right-over.png')
}

.button.small .button-left {
	background-image: url('/img/buttons/small-button-left.png');
	background-repeat: no-repeat;
	width: 7px;
	height: 22px;
	position: absolute;
	top: 0px;
	left: -7px;
}

.button.small.over .button-left {
	background-image: url('/img/buttons/small-button-left-over.png')
}

 
a.button, a .button { 
	text-decoration: none;
}