@url searchImage searchSearchImage;
@url clearImage searchClearImage;
@url clearTouchedImage searchClearTouchedImage;
@if mgwt.css pretty {
	@external mgwt-SearchBox, mgwt-SearchBox-round, mgwt-SearchBox-input, mgwt-SearchBox-clear, mgwt-SearchBox-clear-active;
}

.mgwt-SearchBox {
	height: 44px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
}

.mgwt-SearchBox-round {
	background-clip: padding-box;
	background-image: searchImage;
	background-repeat: no-repeat;
	background-position: 10px 50%;
	width: 100%;
	height: 24px;
	display: block;
	position: relative;
	top: 10px;
	margin: 0px;
	padding: 0px;
}

.mgwt-SearchBox-input {
	border: 0;
	font-size: 13px;
	padding: 0;
	position: absolute;
	display: block;
	top: 0px;
	left: 25px;
	right: 60px;
	bottom: 0px;
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox-input {
		background-color: transparent;
		color: white;
		\-webkit-user-modify: read-write-plaintext-only;
	}
}

@if user.agent safari {
	.mgwt-SearchBox-input {
		\-webkit-appearance: none;
		\-webkit-user-select: text;
		\-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
}

@if user.agent gecko1_8 {
	.mgwt-SearchBox-input {
		top: 5px;
		\-moz-appearance: none;
		\-moz-user-select: text;
		\-moz-tap-highlight-color: rgba(0, 0, 0, 0);
	}
}

@if user.agent ie9 {
	.mgwt-SearchBox-input {
		top: 5px;
	}
}

.mgwt-SearchBox-clear {
	position: absolute;
	top: -9px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 13px;
	padding: 0;
	background-image: clearImage;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mgwt-SearchBox-clear-active {
	background-image: clearTouchedImage;
}