/* Search */
#p-search {
	/* @noflip */
	float: left;
	margin-right: 0.5em;
	margin-left: 0.5em;

	h3 {
		display: none;
	}

	form,
	input {
		margin: 0;
		margin-top: 0.4em;
	}
}

div#simpleSearch {
	display: block;
	width: 14em;
	height: 1.4em;
	margin-top: 0.65em;
	position: relative;
	min-height: 1px; /* Gotta trigger hasLayout for IE7 */
	border: solid 1px #aaa;
	color: black;
	background-color: white;
	.background-image('images/search-fade.png');
	background-position: top left;
	background-repeat: repeat-x;

	input {
		color: black;
		&:focus {
			outline: none;
		}

		// These rules MAY NOT be merged because of how CSS requires browsers
		// to parse unrecognized selectors!
		&.placeholder {
			color: #999;
		}
		&:-ms-input-placeholder {
			color: #999;
		}
		&:-moz-placeholder {
			color: #999;
		}
		&::-webkit-input-placeholder {
			color: #999;
		}

		&#searchInput {
			position: absolute;
			top: 0;
			left: 0;
			width: 90%;
			margin: 0;
			padding: 0;
			padding-left: 0.2em;
			padding-top: 0.2em;
			padding-bottom: 0.2em;
			outline: none;
			border: none;
			/*
			 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
			 * this from ever being shown anyways.
			*/
			font-size: 13px;
			background-color: transparent;
			direction: ltr;
		}
	}

	button#searchButton {
		position: absolute;
		width: 10%;
		right: 0;
		top: 0;
		padding: 0;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-right: 0.4em;
		margin: 0;
		border: none;
		cursor: pointer;
		background-color: transparent;
		background-image: none;

		/* OVERRIDDEN BY COMPLIANT BROWSERS */
		img {
			border: none;
			margin: 0;
			margin-top: -3px;
			padding: 0;
		}
		/* IGNORED BY IE6 */
		> img {
			margin: 0;
		}
	}
}