.rating_bb {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating_bb:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    clip:rect(0,0,0,0);
      
}

.rating_bb:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;    
    color:#ddd;
    /*text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);*/
    border-style: hidden;
    border-color: lightblue;
}

.rating_bb:not(:checked) > label:before {
    content: '★ ';
}

.rating_bb > input:checked ~ label {
      color:dodgerblue;
    /*color: #f70;*/  
    /*text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_bb:not(:checked) > label:hover,
.rating_bb:not(:checked) > label:hover ~ label {
     color:lightblue;
    /*color: gold;*/
   
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_bb > input:checked + label:hover,
.rating_bb > input:checked + label:hover ~ label,
.rating_bb > input:checked ~ label:hover,
.rating_bb > input:checked ~ label:hover ~ label,
.rating_bb > label:hover ~ input:checked ~ label {
    color:deepskyblue;
    /*color: #ea0;*/
    
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_bb > label:active {
    position:relative;
    top:2px;
    left:2px;
}

/*code for star rating ib begin*/
.rating_ib {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating_ib:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    clip:rect(0,0,0,0);
}

.rating_ib:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    /*text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_ib:not(:checked) > label:before {
    content: '★ ';
}

.rating_ib > input:checked ~ label {
    color:dodgerblue;
    /*color: #f70;*/
    /*text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_ib:not(:checked) > label:hover,
.rating_ib:not(:checked) > label:hover ~ label {
      color:lightblue;
    /*color: gold;*/
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_ib > input:checked + label:hover,
.rating_ib > input:checked + label:hover ~ label,
.rating_ib > input:checked ~ label:hover,
.rating_ib > input:checked ~ label:hover ~ label,
.rating_ib > label:hover ~ input:checked ~ label {
     color:deepskyblue;
    /*color: #ea0;*/
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_ib > label:active {
    position:relative;
    top:2px;
    left:2px;
}
/*code for star rating ib end*/


/*code for star rating mb begin*/
.rating_mb {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating_mb:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    clip:rect(0,0,0,0);
}

.rating_mb:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    /*text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_mb:not(:checked) > label:before {
    content: '★ ';
}

.rating_mb > input:checked ~ label {
    color:dodgerblue;
    /*color: #f70;*/
    /*text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_mb:not(:checked) > label:hover,
.rating_mb:not(:checked) > label:hover ~ label {
      color:lightblue;
    /*color: gold;*/
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_mb > input:checked + label:hover,
.rating_mb > input:checked + label:hover ~ label,
.rating_mb > input:checked ~ label:hover,
.rating_mb > input:checked ~ label:hover ~ label,
.rating_mb > label:hover ~ input:checked ~ label {
     color:deepskyblue;
    /*color: #ea0;*/
    /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating_mb > label:active {
    position:relative;
    top:2px;
    left:2px;
}
/*code for star rating mb end*/

/* end of Lea's code */

/*
 * Clearfix from html5 boilerplate
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* my stuff */
#status, button {
    margin: 20px 0;
}