/*BARCHART STYLES*/
.q-graph
{
	position: relative;
	width: 140px;
	height: 120px;
	margin: 0.3em 4em 0.5em 4.5em;
	padding: 0;
	background: #ffffff;
	border: 1px solid #777777;
	list-style: none;
	border-right: solid 1px #ccc;
	border-top: solid 0px;
}
.q-graph ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
.q-graph li
{
	position: absolute;
	bottom: 0;
	width: 130px;
	z-index: 2;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}
.q-graph li.bar
{
	width: 18px;
	border: 0px solid #336699;
	border-bottom: none;
	color: #336699;
}

.q-graph li.bar a
{
	display: block;
	height: 100%;
	overflow: hidden;
}
.q-graph li.bar a:hover
{
	background-color:#003388;
}
.q-graph li.bar:hover
{
	color:#003388;
}
.q-graph li .label
{
	position: absolute;
	bottom: -15px;
	left: 0px;
}
.q-graph li.first
{
	left: 20px;
	background: #336699;
}
.q-graph li.second
{
	left: 60px;
	background: #336699;
}
.q-graph li.third
{
	left: 100px;
	background: #336699;
}
.q-graph .ticks
{
	width: 140px;
	height: 120px;
	z-index: 1;
}
.q-graph .ticks .tick
{
	position: relative;
	border-top: 1px dotted #ccc;
	width: 140px;
}
.q-graph .ticks .tick p
{
	position: absolute;
	right: 100%;
	top: -0.87em;
	margin: 0 0.5em 0 0.5em;
	width:80px;
	text-align:right;
}
.q-graph .ticks .tick p .y-axis-label
{
	color:#777777;
}
/*RIGHT ALIGNED LABELS*/
.q-graph.small
{
	width: 100px;
	height: 85px;
	margin: 0.3em 4em 0.5em 0em;
	font-size:0.8em;
}
.q-graph.small li .label
{
	position: absolute;
	bottom: -15px;
	left: -2px;
}
.q-graph.small li.first
{
	left: 8px;
	background: #336699;
}
.q-graph.small li.second
{
	left: 41px;
	background: #336699;
}
.q-graph.small li.third
{
	left: 74px;
	background: #336699;
}
.q-graph.small .ticks
{
	width: 100px;
	height: 85px;
}
.q-graph.small .ticks .tick
{
	width: 100px;
}
.q-graph.small .ticks .tick p
{
	left: 100%;
	text-align:left;
	line-height:1.2em;
}