/* centred div */
#page {
	max-width: 960px;
	margin: auto;
	text-align: center;
	font-family: Arial;
	font-size: small;
	font-weight: normal;
	top: 0px;
	left: 0px;
}
ul.buttonbar {
	font: .8em "Century Gothic";
	list-style: none;
	position: relative;
	top: 7px;
	left: -19px;
	width: 8em;
}
ul.buttonbar li {
	border-top: medium outset #FDF5E6;
	border-right: medium outset #DEB887;
	border-left: medium outset #FDF5E6;
	border-bottom: medium outset #DEB887;
	background-color: #FFEBCD;
	border-style: solid;
	margin-right: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	width: 8em;
}
ul.buttonbar a {
	padding: .4em .3em .5em .3em;
	display:block;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
/* try change on mouseover */
a:link {
	color: blue;
	font-family: Arial;
	font-weight: bold;
	text-align: center;
}
a:visited {
	color: #800080;
	font-weight: bold;
}
a:hover {
	color: red;
	font-weight: bold;
}
a:active {
	color: teal;
	font-weight: bold;
}
/* tweak the single lines links */
ul.buttonbar a.singles {
	padding: 1em .3em 1em .3em;
}
/* make it look like a pressing button, no MSIE without JS|HTA hacks */
ul.buttonbar li:active {
	border-style: inset;
}