<div id="rate"></div>  
  <script>  
  var rating=+$_REPUTATION$+0;  
  $('#rate').html('<span>'+rating+'</span>');  
  if(rating<31){$('#rate').addClass('rate0')} else if(rating>30 && rating<61) {$('#rate').addClass('rate0')} else if(rating>60 && rating<101) {$('#rate').addClass('rate1')} else if(rating>100 && rating<251) {$('#rate').addClass('rate2')} else if(rating>250) {$('#rate').addClass('rate3')}  
  </script>

#rate{background:#DAE2E8;color:#8BA1BC;height:21px;border-top: 1px solid #C0CCD9;border-bottom: 1px solid #C0CCD9;border-left: 1px solid #C0CCD9;border-right: 1px solid #C0CCD9;}  
  .rate1{background:#F5EBBB !important;color:#AAA26C !important;height:21px;border-top: 1px solid #E2DAA6 !important;border-bottom: 1px solid #E2DAA6 !important;border-left: 1px solid #E2DAA6 !important;border-right: 1px solid #E2DAA6 !important;}  
  .rate2{background:#C9B36E !important;color:#FFF2C8 !important;height:21px;border-top: 1px solid #A59250 !important;border-bottom: 1px solid #A59250 !important;border-left: 1px solid #A59250 !important;border-right: 1px solid #A59250 !important;}  
  .rate3{background:#E1CC7E !important;color:#948239 !important;height:21px;border-top: 1px solid #C5B565 !important;border-bottom: 1px solid #C5B565 !important;border-left: 1px solid #C5B565 !important;border-right: 1px solid #C5B565 !important;}  
  .rate4{background:#E1CC7E !important;color:#948239 !important;height:21px;border-top: 1px solid #C5B565 !important;border-bottom: 1px solid #C5B565 !important;border-left: 1px solid #C5B565 !important;border-right: 1px solid #C5B565 !important;}  
  #rate span {display:block;line-height:21px;text-align:center;}  
  #rates{background:#DAE2E8;color:#000;height:30px;border-top: 1px solid #C0CCD9;border-bottom: 1px solid #C0CCD9;border-left: 1px solid #C0CCD9;border-right: 1px solid #C0CCD9;}  
  #rates1{background:#F5EBBB;color:#000;height:30px;border-top: 1px solid #E2DAA6;border-bottom: 1px solid #E2DAA6;border-left: 1px solid #E2DAA6;border-right: 1px solid #E2DAA6;}  
  #rates2{background:#C9B36E;color:#000;height:30px;border-top: 1px solid #A59250;border-bottom: 1px solid #A59250;border-left: 1px solid #A59250;border-right: 1px solid #A59250;}  
  #rates3{background:#E1CC7E;color:#000;height:30px;border-top: 1px solid #C5B565;border-bottom: 1px solid #C5B565;border-left: 1px solid #C5B565;border-right: 1px solid #C5B565;}