.searchFilters{
clear: both;
font-size: 90%;
}
#sortFilter{
color: #aaa;
padding: 5px;
line-height: 16px;
}
#sortFilter a.sortType{
color: #aaa;
}
#sortFilter a.sortType:hover{
color: #4D4D4D;
}
#sortFilter a#currentSort{
color: #4D4D4D;
font-weight: bold;
}
#sortFilter a.sortType:focus,
#sortFilter a#currentSort:focus  {
   outline: dotted 1px #000;
}

.paginationFilter {
color: #aaa;
height: 100%; 
border-top: 1px solid #CCCCCC;
padding: 2px 0px 5px 5px;
display: block;
line-height: 22px;
}
.resultsNo{
float: left;
}
.resultsNo .currentResultsNo, .resultsNo .totalResultsNo{
color: #aaa;
}
.pagination{
float: right;
margin-right: 10px;
}
.pagination a{
color: #aaa;
}
.pagination a:hover{
color: #4D4D4D;
}
.pagination a.currentPagination{
color: #4D4D4D;
font-weight: bold;
}
.pagination a:focus {
   outline: dotted 1px #000;
}
.controlPagination{
position:relative;
width:42px;
height:22px;
overflow:hidden;
margin:0!important;
padding:0!important;
float: right;
}
.controlPagination a{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
line-height:25px;
outline:none;
overflow:hidden;
border:none;
}
.controlPagination a.prevPagination {
background-position:left top;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
}
.controlPagination a.noPrevPagination{
background-position:left bottom;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
}
.controlPagination a.nextPagination {
background-position:right top;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
left: 21px;
}
.controlPagination a.noNextPagination {
background-position:right bottom;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
left: 21px;

<div class="searchFilters">

<div id="sortFilter">
$msg.get("xe.search.filters.sort")
<a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a>
<a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a>
<a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a>
<a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a>
</div>

<div class="paginationFilter">

<span class="resultsNo">$msg.get("xe.search.filters.results") <span class="currentResultsNo">6-30</span> $msg.get("xe.search.filters.results.of") <span class="totalResultsNo">50</span></span>

<span class="controlPagination">
<a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="prevPagination"></a>
<a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="nextPagination"></a>
</span>
<span class="pagination">$msg.get("xe.search.filters.page")
<a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a>
<a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a>
</span>
</div>
</div>

.paginationFooter{
display: block;
clear: both;
text-align: right;
font-size: 90%;
}

.paginationFilter {
color: #aaa;
height: 100%; 
border-top: 1px solid #CCCCCC;
padding: 2px 0px 5px 5px;
display: block;
line-height: 22px;
}
.pagination{
float: right;
margin-right: 10px;
}
.pagination a{
color: #aaa;
}
.pagination a:hover{
color: #4D4D4D;
}
.pagination a.currentPagination{
color: #4D4D4D;
font-weight: bold;
}
.pagination a:focus {
   outline: dotted 1px #000;
}
.controlPagination{
position:relative;
width:42px;
height:22px;
overflow:hidden;
margin:0!important;
padding:0!important;
float: right;
}
.controlPagination a{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
line-height:25px;
outline:none;
overflow:hidden;
border:none;
}
.controlPagination a.prevPagination {
background-position:left top;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
}
.controlPagination a.noPrevPagination{
background-position:left bottom;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
}
.controlPagination a.nextPagination {
background-position:right top;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
left: 21px;
}
.controlPagination a.noNextPagination {
background-position:right bottom;
background-image:url($xwiki.getSkinFile("navigation.png"));
width: 21px;
height: 22px;
left: 21px;

<div class="paginationFooter">
<div class="paginationFilter">
<span class="controlPagination">
<a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="noPrevPagination"></a>
<a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="noNextPagination"></a>
</span>
<span class="pagination">
$msg.get("xe.search.filters.page")
<a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a>
<a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a>
<a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a>
</span>
</div>
</div>