/* 
    OPBmusic.org | screen.css
    (c) 2008 Oregon Public Broadcasting
                                         */

/*\*/
@import url("reset.css");
@import url("base.css");
/**/

div#container div#content {
  float:left;
}

/* === HOME PAGE GRID === */
div#container.dashboard {
}

div#container.dashboard div#main-content {
  float:left;
  width:770px;
}

div#container.dashboard div#primary {
  float:left;
  margin-bottom:10px;
  width:770px;
}

  div#container.dashboard div#primary div#primary-a {
    float:left;
    width:250px;
  }
  
  div#container.dashboard div#primary div#primary-b {
    float:left;
    margin-left:10px;
    width:510px;
  }

div#container.dashboard div#secondary {
  clear:left;
  float:left;
  width:770px;
}

  div#container.dashboard div#secondary div#secondary-a {
    float:left;
    width:510px;
  }

  div#container.dashboard div#secondary div#secondary-b {
    float:left;
    margin-left:10px;
    width:250px;
  }

div#container.dashboard div#tertiary {  
  float:left;
  margin-left:10px;
  width:120px;
}

/* === GRID 510 - 250 - 120 === */
div#container.entries div#main-content,
div#container.performances div#main-content,
div#container.sessions div#main-content,
div#container.users div#main-content,
div#container.shows div#main-content {
  float:left;
  width:770px;
}

div#container.entries div#primary,
div#container.performances div#primary,
div#container.sessions div#primary,
div#container.users div#primary,
div#container.shows div#primary {
  float:left;
  width:510px;
}

div#container.entries div#secondary,
div#container.performances div#secondary,
div#container.sessions div#secondary,
div#container.users div#secondary,
div#container.shows div#secondary {
  float:left;
  margin-left:10px;
  width:250px;
}

div#container.entries div#tertiary,
div#container.performances div#tertiary,
div#container.sessions div#tertiary,
div#container.users div#tertiary,
div#container.shows div#tertiary {
  float:left;
  margin-left:10px;
  width:120px;
}

/* === GRID 120 - 640 - 120 === */
div#container.pages div#main-content,
div#container.playlists div#main-content,
div#container.songs div#main-content {
  float:left;
  width:770px;
}

div#container.pages div#primary,
div#container.playlists div#primary,
div#container.songs div#primary {
  float:left;
  width:120px;
}

div#container.pages div#secondary,
div#container.playlists div#secondary,
div#container.songs div#secondary {
  float:left;
  margin-left:10px;
  width:640px;
}

div#container.pages div#tertiary,
div#container.playlists div#tertiary,
div#container.songs div#tertiary {
  float:right;
/*  margin-left:10px;*/
  width:120px;
}

/* === rainy lists === */

div#container.entries div#primary div#item-list,
div#container.performances div#primary div#item-list,
div#container.users div#primary div#item-list,
div#container.playlists div#secondary div#item-list,
div#container.songs div#secondary div#item-list,
div#container.shows div#primary div#item-list {
  padding-bottom:120px;
  background:url(../chrome/secondary-bkgd-cyan.gif) repeat-x 0 100%;
}

div#container.entries div#secondary,
div#container.performances div#secondary,
div#container.users div#secondary,
div#container.shows div#secondary,
div#container.sessions div#secondary {
  padding-bottom:80px;
  background:url(../chrome/secondary-bkgd-cyan.gif) repeat-x 0 100%;
}

div#container.entries div#primary h1,
div#container.performances div#primary h1,
div#container.users div#primary h1, 
div#container.playlists div#secondary h1,
div#container.songs div#secondary h1,
div#container.shows div#primary h1 {
  color:#777;
  background:none;
  margin-bottom:0;
  padding:10px 10px 5px 0;
  font-weight:bold;
}

  div#container.entries div#primary h1 a:link,
  div#container.entries div#primary h1 a:visited,
  div#container.performances div#primary h1 a:link,
  div#container.performances div#primary h1 a:visited,
  div#container.users div#primary h1 a:link,
  div#container.users div#primary h1 a:visited, 
  div#container.playlists div#secondary h1 a:link,
  div#container.playlists div#secondary h1 a:visited,
  div#container.songs div#secondary h1 a:link,
  div#container.songs div#secondary h1 a:visited,
  div#container.shows div#primary h1 a:link,
  div#container.shows div#primary h1 a:visited, {
    color:#777;
    text-decoration:none;
  }
  
  div#container.entries div#primary h1 a:hover,
  div#container.entries div#primary h1 a:active,
  div#container.performances div#primary h1 a:hover,
  div#container.performances div#primary h1 a:active,
  div#container.users div#primary h1 a:hover,
  div#container.users div#primary h1 a:active,
  div#container.playlists div#secondary h1 a:hover,
  div#container.playlists div#secondary h1 a:active,
  div#container.shows div#primary h1 a:hover,
  div#container.shows div#primary h1 a:active, {
    color:#333;
    background:none;
    text-decoration:none;
  }

  div#container.entries div#primary h2.item-list-subheader,
  div#container.performances div#primary h2.item-list-subheader {
    color:#333;
    background:#99B8C5;
    margin-bottom:0;
    padding:10px 10px 5px 10px;
  }


/* === META BUCKETS === */
div#secondary dl.meta-bucket {
  background:#FFF;
  border-top:1px solid #99B8C5;
  border-left:1px solid #99B8C5;
  border-right:1px solid #99B8C5;
}

div#secondary dl.meta-bucket dt {
  background:#FFF;
  padding:5px 10px 0 10px;
  font-weight:bold;
  color:#00A2E3;
  text-transform:uppercase;
}

div#secondary dl.meta-bucket dd {
  border-top:1px solid #EEE;
  padding:5px 10px;
}

div#secondary dl.meta-bucket#tags a {
  text-decoration:none;
}

  div#secondary dl.meta-bucket#tags a:link,
  div#secondary dl.meta-bucket#tags a:visited {
    background:none;
  }
  
  div#secondary dl.meta-bucket#tags a:hover {
    background:#FFF;
  }
  
  div#secondary dl.meta-bucket#tags a:active {
    background:#99B8C5;
  }
  
div#secondary dl.meta-bucket#comments {

}

/* === TAG CLOUD === */
a.tagsize1 { font-size: 100%; }
a.tagsize2 { font-size: 110%; }
a.tagsize3 { font-size: 120%; }
a.tagsize4 { font-size: 130%; }

/* === ENTRY & USER PROFILE STYLES === */

  div#container div#item-list div.hentry,
  div#container div#item-list div.user-profile {
    padding:10px 10px 1.0em 10px;
    background:#FFF;
    border-top:1px solid #99B8C5;
    border-left:1px solid #99B8C5;
    border-right:1px solid #99B8C5;
  }
  
  div#container div#item-list div.hentry.full {
    border:none;
    padding:0 0 1.0em 0;
    
  }
  
  div#container div.hentry.secondary-entry {
  }
  
  div#container div.hentry .entry-title {
    margin:0;
  }
  
    div#container div.hentry .entry-title a {
      text-decoration:none;
    }
    
    div#container div.hentry .entry-title a:link,
    div#container div.hentry .entry-title a:visited {
      color:#0C2A44;
    }
    
    div#container div.hentry .entry-title a:hover {
      color:#000;
    }
    
    div#container div.hentry .entry-title a:active {
      color:#666;
    }
    
    div#container div.hentry p.entry-meta {
      font-size:90%;
      color:#999;
    }
    
    div#container div.hentry p.entry-tags {
      
    }
    
      div#container div.hentry p.entry-tags span.tag-header {
        font-size:80%;
        text-transform:uppercase;
        font-weight:bold;
        padding:2px 13px 2px 4px;
        background:url(../chrome/tagstyle-cap.gif) no-repeat 100% 50%;
        text-decoration:none;
        color:#FFF;
        background-color:#999;
      }
      
      div#container div.hentry p.entry-tags a.tagstyle {
        font-size:80%;
        text-transform:uppercase;
        font-weight:bold;
        padding-right:5px;
        text-decoration:none;
      }

        div#container div.hentry p.entry-tags a.tagstyle:link,
        div#container div.hentry p.entry-tags a.tagstyle:visited {
          color:#00A2E3;
          background:none;
        }

        div#container div.hentry p.entry-tags a.tagstyle:hover {
          color:#99B8C5;
          background:none;
        }

        div#container div.hentry p.entry-tags a.tagstyle:active {
          color:#333;
          background:none;
        }
    
    div#container div.hentry p.entry-more {
      clear:both;
    }
    
      div#container div.hentry p.entry-more span.media {
        font-size:80%;
        text-transform:uppercase;
        font-weight:bold;
        padding:4px 4px 2px 4px;
        text-decoration:none;
        background:#0C2A44;
        color:#FFF;
      }
    
    div#container div.hentry div.entry-content img[align=left],
    div#container div.hentry div.entry-content img.left-img {
      margin:0 10px 10px 0;
    }
    
    div#container div.hentry div.entry-content img[align=right],
    div#container div.hentry div.entry-content img.right-img {
      margin:0 0 10px 10px;
    }
    
    div#container div.hentry div.entry-content img.performance-image {
      float:right;
      margin:5px 0 10px 10px;
    }
    
    div#container div.hentry div.entry-content ul {
      list-style:inherit !important;
      margin-left:1.0em;
    }

    /* make sure that bullets will appear on pages */
    div#container.pages #secondary ul {
      list-style:inherit !important;
      margin-left:1.0em;
    }
                      


    div#container div.hentry div.entry-summary,
    div#container div.hentry div.entry-content,
    div#container div.hentry p.entry-tags,
    div#container div.hentry p.entry-more {
      padding-left:10px;
      
    }
    
    div#container div.hentry.full div.entry-summary,
    div#container div.hentry.full div.entry-content,
    div#container div.hentry.full p.entry-tags,
    div#container div.hentry.full p.entry-more {
      padding:0;
    }
    
    div#container div#comment-city {
    }
    
      div#container h3#comments {
        clear:both;
        font-weight:bold;
        border-bottom:2px solid #99B8C5;
        margin:0;
        padding:1.5em 0 0.5em 0;
      }
    
      div#container div#comment-city div#comment-form form {
        background:#EEE url(../chrome/page-bkgd.png) repeat-x 0 0;
        padding:1.0em 20px;
        color:#000;
      }
      
      div#container div#comment-city div#comment-form form fieldset legend {
        color:#333;
      }
      
      div#container div#comment-city div#comment-form form fieldset textarea {
        background:#FFF;
        width:440px;
      }
      
      div#container div#comment-city div#comment-form form fieldset input {
        background:#FFF;
      }
      
      
      div#container div#comment-city div#comment-form form a:link,
      div#container div#comment-city div#comment-form form a:visited,
      div#container div#comment-city div#comment-form form a:hover,
      div#container div#comment-city div#comment-form form a:active {
        color:#000;
      }
    
      div#container div#comment-city div.comment {
        padding:1.0em 20px;
        border-left:1px solid #DDD;
        border-right:1px solid #DDD;
        border-bottom:1px solid #DDD;
      }
      
      /* this one's special */
      div#container form fieldset label#website {
        display:none;
      }
      
/*== Song page === */

div.hentry.song div.star-ratings-block {
  padding-bottom:10px;
}

div.hentry div.buy-links,
div.hentry p.last-played {
  clear:both;
  border-top:1px solid #CCC;
  padding-top:10px;
}

/* === media players === */
div.audio-player,
div.video-player {
  margin-bottom:1.0em;
}
      
/* === HOME PAGE STYLES === */

  div#container.dashboard div#primary div#primary-a div#playlist {
    margin:0 0 10px 0;
    color:#FFF;
  }
  
    div#container.dashboard div#primary div#primary-a div#playlist div.stream-link,
    div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link {
      font-weight:bold;
      text-align:center;
      padding:0;
      border-bottom:2px solid #FFF;
    }
    
      div#container.dashboard div#primary div#primary-a div#playlist div.stream-link a,
      div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link a {
        color:#FFF;
        clear:both;
        display:block;
        text-decoration:none;
        padding:5px;
      }
      
      div#container.dashboard div#primary div#primary-a div#playlist div.stream-link a:link,
      div#container.dashboard div#primary div#primary-a div#playlist div.stream-link a:visited,
      div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link a:link,
      div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link a:visited {
        background: #0C2A44;
      }
      
      div#container.dashboard div#primary div#primary-a div#playlist div.stream-link a:hover,
      div#container.dashboard div#primary div#primary-a div#playlist div.stream-link a:active,
      div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link a:hover,
      div#container.dashboard div#primary div#primary-a div#playlist div.playlist-link a:active {
        background: #111;
      }
    
        
    div#container.dashboard div#primary div#primary-a div#playlist div.on-now,
    div#container.dashboard div#primary div#primary-a div#playlist div.others {
      border-bottom:2px solid #FFF;
      float:left;
      padding:5px 10px 10px 10px;
      color:#FFF;
      background:#111 url(../chrome/site-bkgd.png) repeat-x 0 0;
    }
    
      div#container.dashboard div#primary div#primary-a div#playlist div.on-now a:link,
      div#container.dashboard div#primary div#primary-a div#playlist div.on-now a:visited,
      div#container.dashboard div#primary div#primary-a div#playlist div.on-now a:hover, 
      div#container.dashboard div#primary div#primary-a div#playlist div.on-now a:active {
        color:#FFF;
        font-weight:bold;
      }
      
  div#container.dashboard div#primary div#primary-a div#featured-entry {
    background:#FFF;
    color:#333;
  }
  
    div#container.dashboard div#primary {
      margin-bottom:1.5em;
    }
  
    
    div#container.dashboard div#primary div#primary-a div#featured-entry h3 {
      font-weight:bold;
      line-height:1.2;
      margin-bottom:0.25em;
    }
  
    div#container.dashboard div#primary div#primary-a div#featured-entry a {
      background:none;
      text-decoration:none;
    }
  
    div#container.dashboard div#primary div#primary-a div#featured-entry a:link,
    div#container.dashboard div#primary div#primary-a div#featured-entry a:visited {
      color:#0C2A44;
    }
  
    div#container.dashboard div#primary div#primary-a div#featured-entry a:hover {
      color:#111;
    }
    
    div#container.dashboard div#primary div#primary-a div#featured-entry a:active {
      color:#000;
    }
  
  div#container.dashboard div#primary div#primary-b #performance-feature-header {
    font-weight:bold;
    margin:0;
    border-bottom:4px solid #0C2A44;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature {
    background:#000;
    color:#FFF;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature div#performance-feature-content {
    padding:0px 10px 10px 0;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature img.performance-feature-image-left {
    float:left;
    margin-right:10px;
  }
  
  
  div#container.dashboard div#primary div#primary-b div#performance-feature h3 {
    font-weight:bold;
    font-size:130%;
    padding:0.5em 0 0 0;
    color:#FFF;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature h3 a {
    text-decoration:none;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature a:link,
  div#container.dashboard div#primary div#primary-b div#performance-feature a:visited {
    color:#FFF;
  }
  
  div#container.dashboard div#primary div#primary-b div#performance-feature a:hover,
  div#container.dashboard div#primary div#primary-b div#performance-feature a:active {
    color:#CCC;
  }
  

  
  div#container.dashboard div#primary div#primary-b div#performance-feature h4 {
    padding:5px 10px;
    color:#FFF;
    background:#0C2A44;
    clear:both;
  }
  
    div#container.dashboard div#primary div#primary-b div#performance-feature h4 span#recent-performances-label {
      font-weight:bold;
      font-style:italic;
    }

    div#container.dashboard div#primary div#primary-b div#performance-feature ul#recent-performances {
    }
    
    div#container.dashboard div#primary div#primary-b div#performance-feature ul#recent-performances li {
      display:inline;
    }
  
    div#container.dashboard div#primary div#primary-b div#performance-feature ul#recent-performances li a,
    div#container.dashboard div#primary div#primary-b div#performance-feature ul#recent-performances li a img {
      float:left;
    }
    
  div#container.dashboard div#secondary div#secondary-a h2 {
    font-weight:bold;
    margin-bottom:0;
  }

  div#container.dashboard div#secondary div#secondary-a h2 a {
    display:block;
    border-bottom:4px solid #98B7C3;
    text-decoration:none;
  }
  
    div#container.dashboard div#secondary div#secondary-a h2 a:link,
    div#container.dashboard div#secondary div#secondary-a h2 a:visited {
      color:#333;
      background:none;
    }
    
    div#container.dashboard div#secondary div#secondary-a h2 a:hover {
      color:#999;
      background:none;
    }
    
    div#container.dashboard div#secondary div#secondary-a h2 a:active {
      color:#FFF;
      background:none;
    }
  
  div#container.dashboard div#secondary div#secondary-a div#blog-feature {
    background:url(../chrome/secondary-bkgd-cyan.gif) repeat-x 0 100%;
    padding:10px 10px 90px 10px;
    float:left;
  }
  
    div#container.dashboard div#secondary div#secondary-a div#blog-feature div#blog-main {
      float:left;
      width:220px;
      padding:10px;
      background:#FFF;
    }
    
    div#container.dashboard div#secondary div#secondary-a div#blog-feature div#blog-list {
      float:left;
      margin-left:10px;
      width:220px;
      padding:10px;
      background:#FFF;
    }
  
    div#container.dashboard div#secondary div#secondary-a div#blog-feature div#blog-list p span.entry-title {
      font-weight:bold;
    }
    
div#container.dashboard div#tertiary dl.meta-bucket#comments {
  padding:0 0 100px 0;
  background:url(../chrome/secondary-bkgd-cyan.gif) repeat-x 0 100%;
}

  div#container.dashboard div#tertiary dl.meta-bucket#comments dt {
    font-weight:bold;
    background:#FFF;
    color:#99B8C5;
    padding:5px 0 3px 5px;
    border-top:1px solid #99B8C5;
    border-right:1px solid #99B8C5;
    border-bottom:1px solid #EEE;
    border-left:1px solid #99B8C5;    
  }
  
  div#container.dashboard div#tertiary dl.meta-bucket#comments dd {
    padding:5px 0;
    font-size:90%;
    background:#FFF;
    border-right:1px solid #99B8C5;
    border-bottom:1px solid #99B8C5;
    border-left:1px solid #99B8C5;
    padding:5px;
  }
    
/* === PROMO STYLES === */
div#container.dashboard div#secondary div#secondary-b div.promo,
div#container div#tertiary div.promo {
  font-size:90%;
  color:#555;
}

div#container.dashboard div#secondary div#secondary-b div.promo h3,
div#container div#tertiary div.promo h3 {
  font-weight:bold;
}

/* === TILE STYLES === */
div#container div#tertiary div.tile {
  margin-bottom:10px;
}

/* === PAGINATION === */
div.pagination {
  padding:5px;
  background:#99B8C5;
}

/* === EDIT Button === */
span.edit-button {
  font-size:12px;
  font-weight:bold;
}

  span.edit-button a:link,
  span.edit-button a:visited {
    color:#99B8C5;
  }
  
  span.edit-button a:hover {
    color:#00A2E3;
  }
  
  span.edit-button a:active {
    color:#000;
  }
  
/* === OpenID stuff ===*/
input#openid_identifier {
  background:#FFF url(/chrome/openid-20.gif) no-repeat 0 0;padding-left:25px;display:inline;
}

div#openid-promo {
  background:#FFF url(/chrome/openid-45.gif) no-repeat 5px 50%;
  padding:15px 5px 5px 60px;
  border:1px solid #DDD;
}

/* === Playlist === */
div#playlist-decider {
  color:#333;
  background:#99B8C5;
  margin-bottom:0;
  float:left;
  width:620px;
  padding:10px 10px 5px 10px;
}

div#playlist-decider form {
  float:left;
}

div#playlist-decider p#playlist-nav {
  float:right;
  color:#FFF;
}

div#playlist-decider p#playlist-nav a {
  text-decoration:none;
  font-weight:bold;
}

div#playlist-decider p#playlist-nav a:link,
div#playlist-decider p#playlist-nav a:visited {
  color:#FFF;
}

div#playlist-decider p#playlist-nav a:hover,
div#playlist-decider p#playlist-nav a:active {
  color:#EEE;
}

div#container.playlists div#secondary div#item-list {
  clear:both;
}

/* === Play styles === */

div.play .airtime {
  font-weight:bold;
  text-transform:uppercase;
}

#playlist div.play span.song-title {
  font-size: 150%;
}

#item-list.plays {
  float:left;
}

#item-list.plays div.play {
  float:left;
  clear:both;
  width:618px;
}

#item-list div.play div.star-ratings-block {
  padding-top:5px;
}

#playlist div.play div.star-ratings-block {
  color:#333;
}

#item-list div.play .more-link a:link,
#item-list div.play .more-link a:visited,
#item-list div.play .more-link a:hover,
#item-list div.play .more-link a:active {
  font-size:75%;
  padding:4px 4px 2px 4px;
  text-transform:uppercase;
  background:#98B7C3;
  color:#FFF;
  text-decoration:none;
}

#playlist div.play .more-link a:link,
#playlist div.play .more-link a:visited,
#playlist div.play .more-link a:hover,
#playlist div.play .more-link a:active {
  display:block;
  padding-top:5px;
  text-transform:uppercase;
}


/*=== RATING ===*/

.star-ratings-block {
  float:left;
  background:#FFF;
  padding:5px;
  width:220px;
}

.star-ratings-block p.rating-label {
  text-indent:-7140px;
  width:60px;
  height:5px;
  margin:0 0 5px 0;
  padding:0;
}

  .star-ratings-block p.rating-label.average {
    background:url(/chrome/rating/average.gif) no-repeat 0 0;
  }
  
  .star-ratings-block p.rating-label.user {
    background:url(/chrome/rating/user.gif) no-repeat 0 0;
  }
  
  .star-ratings-block p.rating-label.log-in {
    background:url(/chrome/rating/log_in.gif) no-repeat 0 0;
  }

/*  div#primary div#playlist .star-ratings-block p.rating-label.average {
    background:url(/chrome/rating/averageFFF.gif) no-repeat 0 0;
  }
  
  div#primary div#playlist .star-ratings-block p.rating-label.user {
    background:url(/chrome/rating/userFFF.gif) no-repeat 0 0;
  }
*/
  .star-ratings-block .avg-rating {
    width:62px;
    float:left;
  }

  .star-ratings-block .user-rating {
    width:62px;
    float:right;
  }
  

  /* colored backgrounds */
  /* now playing */
  div#primary div#playlist .star-ratings-block .star-rating {
    background: url(/chrome/rating/starsF9F9F9.png) top left repeat-x;
  }
    div#primary div#playlist .star-ratings-block .star-rating li a:hover {
      background: url(/chrome/rating/starsF9F9F9.png) left center;
    }
    div#primary div#playlist .star-ratings-block .star-rating li.current-rating {
      background: url(/chrome/rating/starsF9F9F9.png) left bottom;
    }
    
  /* playlist / song page */
  
  div#item-list .hentry .star-ratings-block {
  }
  
  div#item-list .hentry .star-ratings-block .star-rating {
    background: url(/chrome/rating/starsF9F9F9.png) top left repeat-x;
  }
    div#item-list .hentry .star-ratings-block .star-rating li a:hover {
      background: url(/chrome/rating/starsF9F9F9.png) left center;
    }

    div#item-list .hentry .star-ratings-block .star-rating li.current-rating {
      background: url(/chrome/rating/starsF9F9F9.png) left bottom;
    }

    .star-rating {
        list-style:none;
        margin: 0px;
        padding:0px;
        width: 60px;
        height: 12px;
        position: relative;
    }
    
      * html ul.star-rating {
        margin-top:-10px;
      }

    .star-rating li{
        padding:0px;
        margin:0px;
        /*\*/
        float: left;
        /* */
    }
    .star-rating li a {
        display:block;
        width:12px;
        height: 12px;
        text-decoration: none;
        text-indent: -9000px;
        z-index: 20;
        position: absolute;
        padding: 0px;
    }
    .star-rating li a:hover{
        z-index: 2;
        left: 0px;
        line-height:0;
        border:none;
    }
    .star-rating a.one-star{
        left: 0px;
    }
    .star-rating a.one-star:hover{
        width:12px;
    }
    .star-rating a.two-stars{
        left:12px;
    }
    .star-rating a.two-stars:hover{
        width: 24px;
    }
    .star-rating a.three-stars{
        left: 24px;
    }
    .star-rating a.three-stars:hover{
        width: 36px;
    }
    .star-rating a.four-stars{
        left: 36px;
    }    
    .star-rating a.four-stars:hover{
        width: 48px;
    }
    .star-rating a.five-stars{
        left: 48px;
    }
    .star-rating a.five-stars:hover{
        width: 60px;
    }
    .star-rating li.current-rating {
        position: absolute;
        height: 12px;
        line-height:0;
        display: block;
        text-indent: -9000px;
        z-index: 1;
    }