/**
 * Note: this is a bunch of hackery to get forms to look pretty, the basic
 * idea here is to creat div's that are left aligned with the "clear" tag.
 * Each div contains several block elements (labels and inputs) which "float"
 * left and stack against each other.  If the labels (which appear on the
 * left) are set to a fixed width, we get a really nice table looking layout
 * :)
 */

form div {
	clear: left;
	display: block;
	padding: 5px;
	padding-top: 10px;
	text-align: center;
}

form label {
	/* These tags are important for the whole table looking aspect */
	float:left;
	display: block;
	text-align: right;
	width: 16em;
	/* This creates the 'shadow' effect */
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: #acd373;
	margin-right: 5px;
	padding: 1px;
}

form input, form select {
	float:left;
}

form legend {
	display: block;
	/* This creates the 'shadow' effect */
	border-right: 1px solid #373;
	border-bottom: 1px solid #373;
	background-color: #acd373;
	padding: 1px;
}

form fieldset label {
	text-align: left;
	/* Do not clear the labels inside fieldsets to allow them tile */
	clear: none;
	display: block;
	background-color: #dec;
}

textarea {
	overflow: auto;
	float: left;
}

#wikiedit textarea {
	width: 100%;
}

#wikiedit input {
	float: none;
}

/* Button magic! */
div.button {
	padding-top: 50px;
	vertical-align: middle;
}

.button input {
	float: none;
	margin: 10px;
	border: 1px solid #000;
	font-weight: bold;
	color: #e9f6d4;
	background-color: #363;
}

.button input:hover {
	color: #363;
	background-color: #e9f6d4;
}