use darker background colour only for searchbar

view/theme/redbasic/css/style.css

@@ -925,9 +925,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 #acl-search {
 	padding: 4px;
 	border: 1px solid #ccc;
-	width: 90%; /* fallback if browser does not support calc() */
-	width: calc(100% - 10px);
-	margin: 0px 0px 10px 10px;
+	width: 100%;
 }
 
 #acl-search::-webkit-input-placeholder {
@@ -961,16 +959,27 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 }
 
 #acl-list {
-	display: block;
 	border: 1px solid #ccc;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
+}
+
+#acl-search-wrapper {
+	padding: 7px 10px;
+	background-color: $item_colour;
+	border-top-left-radius: $radiuspx;
+	border-top-right-radius: $radiuspx;
+	border-bottom: 1px solid #ccc;
+}
+
+#acl-list-content-wrapper {
+	display: block;
 	overflow: auto;
 	clear: both;
 	min-height: 62px;
 	padding: 10px 10px 0px 0px;
-	-webkit-border-radius: $radiuspx ;
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
-	background-color: rgb(238,238,238);
+
 }
 
 #jotnets-wrapper, #jotnets-collapse {

view/tpl/acl_selector.tpl

@@ -34,9 +34,13 @@
 							<span id=acl-showlimited-caption>{{$showlimited}}</span>
 					    </label>
 						<div id="acl-list">
-							<input type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
-							<div id=acl-showlimited-description>{{$showlimitedDesc}}</div>
-							<div id="acl-list-content"></div>
+							<div id="acl-search-wrapper">
+								<input type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
+							</div>
+							<div id="acl-list-content-wrapper">
+								<div id=acl-showlimited-description>{{$showlimitedDesc}}</div>
+								<div id="acl-list-content"></div>
+							</div>
 						</div>
 					</div>