/* Center body horizontally */
body {
	width: 700px;
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Center title horizontally */
h1 {
	margin-top: 1em;
	text-align: center;
}

/* Ensure each line of controls has space around it */
div.control {
	margin: 0.5em;
	padding: 0.5em;
	width: 600px;
	text-align: center;
}

/* line up first column */
.control-title {
	display: inline-block;
	width: 100px;
}

/* line up second column */
.control-buttons {
	display: inline-block;
	width: 350px;
}

/* style all action buttons the same way */
.control-buttons > span {
	display: inline-block;
	padding: 0.5em;
	border: solid 1px gray;
	border-radius: 0.5em;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	vertical-align: middle;
}

.control-buttons > span[data-enabled="false"] {
	cursor: not-allowed;
}

.control-buttons > span:not([data-enabled="false"]) {
	cursor: pointer;
}

/* hover indication for control buttons */
.control-buttons > span:not([data-enabled="false"]):hover {
	background-color: #dddddd;
}

/* style all help buttons the same way */
.help > span, #helpok {
	display: inline-block;
	padding: 0.5em;
	border: solid 1px gray;
	border-radius: 0.5em;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	vertical-align: middle;
}

.help > span[data-enabled="false"] {
	cursor: not-allowed;
}

.help > span:not([data-enabled="false"]), #helpok {
	cursor: pointer;
}

/* hover indication for help buttons */
.help > span:not([data-enabled="false"]):hover, #helpok:hover {
	background-color: #dddddd;
}

/* style all builder buttons the same way */
#buttons > p > span {
	display: inline-block;
	padding: 0.5em;
	border: solid 1px gray;
	border-radius: 0.5em;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	vertical-align: middle;
	cursor: pointer;
}

#buttons > p > span[data-enabled="false"] {
	cursor: not-allowed;
}

#buttons > p > span:not([data-enabled="false"]) {
	cursor: pointer;
}

/* hover indication for builder buttons */
#buttons > p > span:not([data-enabled="false"]):hover {
	background-color: #dddddd;
}

/* style all drop-down selectors the same way */
.control-buttons > select {
	padding: 0.5em;
	width: 4.5em;
	height: 3.75em;
}

/* except for those that have to be larger */
#whoops1 {
	width: 7em;
}
#whoops2, #bakechoice {
	width: 12em;
}

#helptext {
	border: solid 1px gray;
	border-radius: 0.5em;
	text-align: center;
}

#helpcontent {
	text-align: left;
}

#builder {
	border: solid 1px gray;
	border-radius: 0.5em;
	margin-top: 0.5em;
}

#helptext {
	border: solid 1px gray;
	border-radius: 0.5em;
	margin-top: 0.5em;
	padding: 0.5em;
}

#gameboard {
	border: solid 1px gray;
	border-radius: 0.5em;
}

.move.accessible {
	margin: 0.5em;
	padding: 0.5em;
}
.move.inaccessible {
	margin: 0.5em;
	padding: 0.5em;
	background-color: #f8f8f8;
}

#title {
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}

#expression {
	margin: 0.5em 4em;
	padding: 1em;
	text-align: center;
	border: 3px solid #003300;
	background-color: #f4fff4;
}

#buttons {
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}

.spacer {
	padding-left: 1em;
}

span.reasonspan {
	float: right;
	width: 200px;
	vertical-align: middle;
	height: 2em;
	line-height: 2em;
}