Fixed appearance to match default DataTables styling

Author: mpryvkin

css/dataTables.alphabetSearch.css

@@ -1,9 +1,10 @@
 div.alphabet {
+	clear:both;
 	position:relative;
-	margin-bottom:1em;
+	margin:0.5em 0;
 }
 
-@media screen and (max-width:767px){
+@media screen and (max-width:640px){
 	div.alphabet {
 		text-align:center;
 	}
@@ -25,23 +26,38 @@ div.alphabet a {
 	cursor:pointer;
 	text-align:center;
 	text-decoration:none;
+	box-sizing:content-box;
+	padding:0.2em 0.1em;
 	min-width:1.3em;
+	color:#333 !important;
+	border:1px solid transparent;
+	border-radius:2px;
 }
 
-div.alphabet a span {
-	opacity:1;
+div.alphabet a:hover {
+	color:#FFF !important;
+	border:1px solid #111;
+	background-color:#585858;
+	background:linear-gradient(to bottom, #585858 0%, #111 100%);
 }
 
-div.alphabet a.active span {
-	font-weight:bold;
-}
+div.alphabet a:active {
+	outline:none;
+	background-color:#2b2b2b;
+	background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
+	box-shadow:inset 0 0 3px #111;
+} 
 
-div.alphabet a.empty span {
-	opacity:0.3;
+div.alphabet a.empty {
+	color:#888 !important;
 }
 
-div.alphabet a.empty.active span {
-	opacity:1;
+div.alphabet a.active,
+div.alphabet a.active.empty {
+	color:#333 !important;
+	border:1px solid #979797;
+	background-color:#FFF;
+	background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
 }
 
 div.alphabet .alphabet-info-display {
@@ -50,14 +66,15 @@ div.alphabet .alphabet-info-display {
 
 div.alphabet div.alphabet-info {
 	position:absolute;
-	background-color:#111;
-	border-radius:3px;
+	border:1px solid #111;
+	background-color:#585858;
+	background:linear-gradient(to bottom, #585858 0%, #111 100%);
+	border-radius:2px;
 	color:#FFF;
 	margin-top:0.2em;
 	padding:0.2em 0.4em;
 	text-align:center;
 	opacity:0;
-	transition:opacity .4s ease-in-out;
 	z-index:9999;
 }