.searchForm {
	height: 80px;
	margin: 0;
}

.searchForm .row {
	clear: both;
}

.searchCategoryRow {
	font-size: 12px;
}

.searchCategoryRow .searchCategoryRowTabs {
	border: 1px solid white;
	border-radius: 4px;
	float: left;
	margin: 5px 0 10px 0;
	padding: 6px 5px 5px 5px;
}

.searchCategoryRow .searchCategoryRowTabs.first {
	margin-left: 5px;
}

.searchCategoryRow .searchCategoryRowTabs.highlighted {
	background-color: #EEFFEE;
	border: 1px solid green;
	padding-top: 5px;
}

.searchCategoryRow .searchCategoryRowTabs:hover {
	background-color: #FFFFCC;
	border: 1px solid orange;
}

#searchHelpRow {
	color: gray;
	font-size: 12px;
}

#searchHelpRow div {
	display: none;
}

#searchHelpRow #searchHelpRowWeb {
	display: block;
}

.searchForm .rowTitle {
	margin: 5px 0 0 0;
}

.searchForm .rowInputs {
	margin: 5px 0 0 10px;
}

.searchForm .checkboxRow span {
	font-family: arial;
	font-size: 12px;
	white-space: nowrap;
}

.searchForm .row span select {
	margin: 3px 7px 3px 7px;
}

.searchForm .checkboxRow .span1 {
	width: 70px;
}

.searchForm .checkboxRow .span2 {
	width: 90px;
}

.searchForm .checkboxRow .span3 {
	width: 80px;
}

.searchForm .checkboxRow .span4 {
	width: 80px;
}

.searchForm .checkboxRow .span5 {
	width: 50px;
}

.searchForm .checkboxRow .span6 {
	width: 60px;
}

.searchForm .checkboxRow .span7 {
	width: 70px;
}

.searchForm .searchBox {
	border: 1px solid gray;
	border-radius: 4px;
	color: #595959 !important;
	float: left;
	line-height: 18pt;
	margin: 0;
	padding: 0 4px 0 4px;
	width: 350px;
}

/* I'm building a search engine. Why do you think I care what other engines think about how their CSS .classes-are-written? */

.searchForm .temporaryHeightIncrease {
	font-size: 12pt;
	height: 24pt;
	line-height: 25pt;
}

.searchForm .temporaryWidthIncrease {
	padding-left: 7px;
	width: 88%;
}

.searchForm .searchBox:focus,
.searchForm .searchBox:active {
	border: 1px solid cornflowerblue;
	color: #0088FF !important;
	outline-width: 0;
}

.searchForm .searchOptions {
	border: 1px solid gray;
	border-radius: 4px;
	cursor: pointer;
	float: left;
	height: 26px;
	margin: 0 0 0 8px;
	outline-width: 0;
	padding: 0 4px 0 4px;
}

.searchForm .searchButtonLink {
	display: block;
	float: left;
	margin: 0 0 0 8px;
}

.searchForm .searchButtonLink .searchButton {
	border: 1px solid gray;
	border-radius: 4px;
	cursor: pointer;
	font-size: 10pt;
	font-weight: bold;
	line-height: 17pt;
}

.searchForm .searchButtonLink:hover .searchButton {
	background-color: #EEFFEE;
	border: 1px solid green;
	color: blue;
}

.searchForm .helpLink,
.searchForm .helpLinkElephantPower {
	display: block;
	float: left;
}

.searchForm .helpLink {
	margin: 5px 0 0 5px;
}

.searchForm .helpLinkElephantPower {
	font-size: 10pt;
	margin: 5px 5px 0 2px;
}

.searchForm .loginOrRegister {
	float: left;
	font-size: 12px;
	margin: 2px 0 0 7px;
}

.searchForm .icon {
	border: 0;
}

.searchForm #ClompsSearchBoxPanel {
	background-color: white;
	border: 1px solid #808080;
	border-radius: 0 0 4pt 4pt;
	border-top: 1px dashed #808080;
	display: none; /* not yet ready. when ready, remove the ! important, but leave the display:none; Chrome has it's own built-in searchBox, which overlaps ours. */
	height: 110px;
	margin: 23px 0 0 0;
	overflow: hidden;
	padding: 0 5px 5px 5px;
	position: absolute;
	width: 348px;
	z-index: 999;
}

.searchForm #ClompsSearchBoxPanel:hover {
	border-bottom: 1px solid cornflowerblue;
	border-left: 1px solid cornflowerblue;
	border-right: 1px solid cornflowerblue;
}

.searchForm #ClompsSearchBoxPanel .text {
	color: cornflowerblue;
}

.searchForm #ClompsSearchBoxPanel .loading.categories {
	margin-top: 5px;
}

.searchForm #ClompsSearchBoxPanel .animation {
	display: block;
	margin: 105px auto 25px auto;
}