<div class ="star_rating_container">
<script type="text/javascript" src="jscripts/rating.js?ver=1400"></script>
<div id="success_rating_{$thread['tid']}" style="float: left; padding-top: 2px; padding-right: 10px;">&nbsp;</div>
<strong style="float: left; padding-right: 10px;">{$lang->thread_rating}</strong>
<div class ="inline_rating">
<ul class ="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
<li style="width: {$thread['width']}%" class ="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
<li><a class ="five_stars" 
title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="four_stars" 
title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="three_stars" 
title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="two_stars" 
title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="one_star" 
title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>
</ul>
</div></div>

<td align="center" class ="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}">
<ul class ="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
<li style="width: {$thread['width']}%" class ="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
<li><a class ="five_stars" 
title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="four_stars" 
title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="three_stars" 
title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="two_stars" 
title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class ="one_star" 
title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>
</ul>
</td>

.star_rating_container {
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  float:left;
  margin-top:6px;
}

.star_rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    list-style:none outside none;
    margin:0;
    padding:0;
}

.star_rating,
.star_rating li a:hover,
.star_rating .current_rating {
	vertical-align: middle;
	  
}

td .star_rating {
    margin: 0 auto;
		    width:96px;
}

.star_rating li {
    float:right;
    margin-left:5px;
    unicode-bidi: bidi-override;
}

.star_rating li a {
  color:#b9b9b9;
  float:left;
  text-decoration:none;
}

.star_rating li a {
  font-size:0px;
}

.star_rating li a:before {
content: "\2605";
  font-size:17px;
}

.star_rating_notrated li:hover a,
.star_rating_notrated li:hover ~ li a {
  color:blue !important;
  cursor:pointer;
}


li.current_rating[style*="20"] ~ li a.one_star,
li.current_rating[style*="40"] ~ li:nth-child(n+5) a,
li.current_rating[style*="60"] ~ li:nth-child(n+4) a,
li.current_rating[style*="80"] ~ li:nth-child(n+3) a,
li[style*="100"]~ li:nth-child(n+2) a  {
  color:#eab71f;
}

.star_rating .current_rating {
   unicode-bidi: bidi-override;
   direction: ltr;
   display:none;
   float:left;
   text-align:right;
   position:relative;
   top:1px;
   right:3px;
}


.inline_rating {
    float: left;
    vertical-align: middle;
    padding-right: 5px;
}

.star_rating_success, .success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

td[id*="rating_table"] {
  text-align:center;
margin:0 auto;
}