.star{
	display: inline-block;
}
.rating{

	width:80px;

	height:16px;

	margin:0 0 0px 0;

	padding:0;

	list-style:none;

	clear:both;

	position:relative;

	background: url(../images/star-matrix.gif) no-repeat 0 0;

}



ul.rating li {

	cursor: pointer;

 /*ie5 mac doesn't like it if the list is floated\*/

	float:left;

	/* end hide*/

	text-indent:-999em;

}

ul.rating li a {

	position:absolute;

	left:0;

	top:0;

	width:16px;

	height:16px;

	text-decoration:none;
	
	margin:auto;
	
	transition:none;

	z-index: 200;

}

ul.rating li.one a {left:0}

ul.rating li.two a {left:16px;}

ul.rating li.three a {left:32px;}

ul.rating li.four a {left:48px;}

ul.rating li.five a {left:64px;}

ul.rating li a:hover {

	z-index:2;

	width:80px;

	height:16px;

	overflow:hidden;

	left:0;	
	
	text-decoration:none;
	
	margin:auto;
	
	transition:none;

	background: url(../images/star-matrix.gif) no-repeat 0 0

}

ul.rating li.one a:hover {background-position:0 -96px;}

ul.rating li.two a:hover {background-position:0 -112px;}

ul.rating li.three a:hover {background-position:0 -128px}

ul.rating li.four a:hover {background-position:0 -144px}

ul.rating li.five a:hover {background-position:0 -160px}

/* end rating code */

h3{margin:0 0 2px 0;font-size:110%}



/* Static rating */



.ratingStatic{

	width:80px;

	height:16px;

	margin:0 0 0px 0;

	padding:0;

	list-style:none;

	clear:both;

	position:relative;

	background: url(../images/star-matrix.gif) no-repeat 0 0;

}



ul.ratingStatic li {

	cursor: pointer;

 /*ie5 mac doesn't like it if the list is floated\*/

	float:left;

	/* end hide*/

	text-indent:-999em;

}

ul.ratingStatic li a {

	position:absolute;

	left:0;

	top:0;

	width:16px;

	height:16px;

	text-decoration:none;

	z-index: 200;

}



ul.ratingStatic li.one a {left:0}

ul.ratingStatic li.two a {left:16px;}

ul.ratingStatic li.three a {left:32px;}

ul.ratingStatic li.four a {left:48px;}

ul.ratingStatic li.five a {left:64px;}





/* add these classes to the ul to effect the change to the correct number of stars */

.nostar {background-position:0 0}

.onestar {background-position:0 -16px}

.twostar {background-position:0 -32px}

.threestar {background-position:0 -48px}

.fourstar {background-position:0 -64px}

.fivestar {background-position:0 -80px}



/* ---- tool tip ---- */



.ratingStatic .tooltip {

  font-family: "Gill Sans", Impact, sans-serif;

  font-size: 12px;

  background: #0390FA;

 /*  bottom: 100%; */

  color: #fff;

  display: block;

  left: -5px;
  
  top:30px;

  margin-bottom: 7px;

  opacity: 0;

  padding: 7px;

  position: absolute;

  width: 90px;

  -webkit-transform: translateY(10px);

     -moz-transform: translateY(10px);

      -ms-transform: translateY(10px);

       -o-transform: translateY(10px);

          transform: translateY(10px);

  -webkit-transition: all .25s ease-out;

     -moz-transition: all .25s ease-out;

      -ms-transition: all .25s ease-out;

       -o-transition: all .25s ease-out;

          transition: all .25s ease-out;

  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

}



/* This bridges the gap so you can mouse into the tooltip without it disappearing */

.ratingStatic .tooltip:before {

  bottom: -10px;

  content: " ";

  display: block;

  height: 10px;

  left: 0;

  position: absolute;

}  



/* CSS Triangles - see Trevor's post */

.ratingStatic .tooltip:after {

  border-left: solid transparent 10px;

  border-right: solid transparent 10px;

  border-bottom: solid #0390FA 10px;

  top: -10px;

  content: " ";

  height: 0;

  left: 50%;

  margin-left: -13px;

  position: absolute;

  width: 0;

}



.ratingStatic:hover .tooltip {

  opacity: 1;

  pointer-events: auto;

  -webkit-transform: translateY(0px);

     -moz-transform: translateY(0px);

      -ms-transform: translateY(0px);

       -o-transform: translateY(0px);

          transform: translateY(0px);

}





/* --- tooltip for message --- */



.msgtooltip {

  font-family: "Gill Sans", Impact, sans-serif;

  font-size: 12px;

  background: #0390FA;

  bottom: 100%;

  color: #fff;

  display: block;

  left: -5px;

  margin-bottom: 15px;

  opacity: 0;

  padding: 7px;

  position: absolute;

  width: 90px;

  -webkit-transform: translateY(10px);

     -moz-transform: translateY(10px);

      -ms-transform: translateY(10px);

       -o-transform: translateY(10px);

          transform: translateY(10px);

  -webkit-transition: all .25s ease-out;

     -moz-transition: all .25s ease-out;

      -ms-transition: all .25s ease-out;

       -o-transition: all .25s ease-out;

          transition: all .25s ease-out;

  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

}



/* This bridges the gap so you can mouse into the tooltip without it disappearing */

.msgtooltip:before {

  bottom: -10px;

  content: " ";

  display: block;

  height: 10px;

  left: 0;

  position: absolute;

}  



/* CSS Triangles - see Trevor's post */

.msgtooltip:after {

  border-left: solid transparent 10px;

  border-right: solid transparent 10px;

  border-top: solid #0390FA 10px;

  bottom: -10px;

  content: " ";

  height: 0;

  left: 50%;

  margin-left: -13px;

  position: absolute;

  width: 0;

}