
.pie 
{
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  background-image: url(../images/slices.gif);
}

.size100 {
  background-position: -570px 0;
}

.size95 {
  background-position: -540px 0;
}

.size90 {
  background-position: -510px 0;
}

.size85 {
  background-position: -480px 0;
}

.size80 {
  background-position: -450px 0;
}

.size75 {
  background-position: -420px 0;
}

.size70 {
  background-position: -390px 0;
}

.size65 {
  background-position: -360px 0;
}

.size60 {
  background-position: -330px 0;
}

.size55 {
  background-position: -300px 0;
}

.size50 {
  background-position: -270px 0;
}

.size45 {
  background-position: -240px 0;
}

.size40 {
  background-position: -210px 0;
}

.size35 {
  background-position: -180px 0;
}

.size30 {
  background-position: -150px 0;
}

.size25 {
  background-position: -120px 0;
}

.size20 {
  background-position: -90px 0;
}

.size15 {
  background-position: -60px 0;
}

.size10 {
  background-position: -30px 0;
}

.size0 {
  background-position: 0px 0;
}

.percent 
{
  margin: 0.4em 0 0 2.4em;
  font-size: 12pt;
  font-weight: 600;
  color: #8DC63F;
}

.nameField
{
	font-style: italic;
}

.graph
{
	padding-left: 55px;
}

#example
{
  background: #FFF;
}



#q-graph {position: relative; width: 600px; height: 300px;
  margin: 1.1em 0 3.5em; padding: 0;
  background: #DDD url(fade-light.png) repeat-x;
  border: 2px solid gray; list-style: none;
  font: 9px Helvetica, Geneva, sans-serif;}
#q-graph ul {margin: 0; padding: 0; list-style: none;}
#q-graph li {position: absolute; bottom: 0; width: 150px; z-index: 2;
  margin: 0; padding: 0;
  text-align: center; list-style: none;}
#q-graph li.qtr {height: 298px; padding-top: 2px;
  border-right: 1px dotted #C4C4C4; color: #AAA;}
#q-graph li.bar {width: 60px; border: 1px solid; border-bottom: none; color: #000;}
#q-graph li.bar p {margin: 5px 0 0; padding: 0;}
#q-graph li.sent {left: 13px; background: #DCA url(fade-dark.png) repeat-x;
  border-color: #EDC #BA9 #000 #EDC;}
#q-graph li.paid {left: 77px; background: #9D9 url(fade-dark.png) repeat-x;
  border-color: #CDC #9B9 #000 #BFB;}
#q-graph #q1 {left: 0;}
#q-graph #q2 {left: 150px;}
#q-graph #q3 {left: 300px;}
#q-graph #q4 {left: 450px; border-right: none;}

#q-graph #ticks {width: 600px; height: 300px; z-index: 1;}
#q-graph #ticks .tick {position: relative; border-bottom: 1px solid #BBB; width: 600px;}
#q-graph #ticks .tick p {position: absolute; left: 100%; top: -0.67em; margin: 0 0 0 0.5em;}