Star Rating v1 - CSS

Star rating without images.

HTML

<div id="container">
  <div class="rating">
    <a id="one" class="str-off" title='1/5' href="#"></a>
    <a id="two" class="str-off" title='2/5' href="#"></a>
    <a id="three" class="str-off" title='3/5' href="#"></a>
    <a id="four" class="str-off" title='4/5' href="#"></a>
    <a id="five" class="str-off" title='5/5' href="#"></a>
      <div id="number"></div>
  </div>
</div>
<div class="credit">
    <div>Javascript by&nbsp;<a href="https://plus.google.com/u/0/108482452903817442299" target="_blank">+Andrew Bone</a></div>
    <div>Designed by&nbsp;<a href="https://plus.google.com/110389592457748523073" target="_blank">+Anthony Montemorano</a></div>
    <div style="margin-top:20px;"><b>Supported Browsers:</b><br>IE8+, Chrome, Safari, Opera, (Firefox soon)</div>
</div>

CSS

* {margin:0;padding:0;}
body {margin:10px;font-family: “Lucida Grande”, sans-serif;font-size:1em;}
.credit a {color:#09BA5E;text-decoration:none;border-bottom:1px dotted #ccc;}
.credit a:hover {color:#2C570F;border-bottom:1px solid #bbb;}

#container {
    position:relative;
    float:left;
}

.rating-header {
    background-color:#999;
    color:#fff;
    padding:8px 50px 8px 15px;
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
}
.rating-header h1 { 
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
}
.rating-header h2 {
    font-family: “Lucida Grande”, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-transform: normal;
    letter-spacing: normal;
    line-height: 1.5em;
}
.rating {
    margin:0 0 20px 0;
    box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -moz-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    -webkit-box-shadow:inset 0 0 20px rgba(155,155,155,0.5);
    padding:5px 15px;
    border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border:1px solid rgba(155,155,155,0.3)
}
.credit {float:right;margin:10px 0;font-size:0.7em;color:#888;text-align:right;}
.credit div {margin-bottom:5px;}

.str-off, .str-on, .str-hover {font-size:30px;text-decoration:none;}
a.str-off {color:rgba(150,150,150,0.5);}
a.str-hover {color:rgba(244,199,77,1);} 
a.str-on {color:rgba(244,199,77,0.7);}
.str-on:before {content:"\2605";}
.str-hover:before {content:"\2605";}
.str-off:before {content:"\2606";}

#number {position:relative;float:right;font-size:30px;color:rgba(150,150,150,0.5);}

JavaScript

one.onmouseover = function() {
    this.className = 'str-hover';
    two.className = 'str-off';
    three.className = 'str-off';
    four.className = 'str-off';
    five.className = 'str-off';
    number.innerHTML = '1';
};

two.onmouseover = function() {
    this.className = 'str-hover';
    one.className = 'str-on';
    three.className = 'str-off';
    four.className = 'str-off';
    five.className = 'str-off';
    number.innerHTML = '2';
};

three.onmouseover = function() {
    this.className = 'str-hover';
    one.className = 'str-on';
    two.className = 'str-on';
    four.className = 'str-off';
    five.className = 'str-off';
    number.innerHTML = '3';
};

four.onmouseover = function() {
    this.className = 'str-hover';
    one.className = 'str-on';
    two.className = 'str-on';
    three.className = 'str-on';
    five.className = 'str-off';
    number.innerHTML = '4';
};


five.onmouseover = function() {
    this.className = 'str-hover';
    one.className = 'str-on';
    two.className = 'str-on';
    three.className = 'str-on';
    four.className = 'str-on';
    number.innerHTML = '5';
};