* {margin:0;padding:0;}

body{
text-align:center;
font:12px/1.4 Verdana,sans-serif;
padding:5px;
}

#out{
width:770px;
text-align:left;
margin:0 auto;
}
h1{
text-align:center;
font:normal  27px/1 normal Arial.sans-serif;
color:#555;
font-weight:normal;
}
div{
margin: 20px auto;
}

/*----------------graphs*/
.graph{
width:536px;
height:134px;
background:transparent url(/prx/000/http/cssing.org.ua/examples/graphs/s-graph.gif) no-repeat 0 0;
position:relative;;
}
.graph li {
float:left;
}
.graph li {
display:block;
width:28px;
position:absolute;
bottom:21px;
left:30px;
border:1px solid #000;
border-bottom:0;
text-align:center;
}
#a1 li{background:#FE0000;}
#a2 li{background:#FF9801;}
#a3 li{background:#3366FF;}
#a4 li{background:#FFFE03;}
.graph li span{
position:absolute;
top:-20px;
width:30px;
left:0;
}
h3{font-weight:bold;color:#2855AA;font-size:15px;margin:1em 0;font-family: Arial,sans-serif;}
.graph li span{font-size:11px;}
.graph li.b1{left:32px;}
.graph li.b2{left:64px;}
.graph li.b3{left:96px;}
.graph li.b4{left:128px;}
.graph li.b5{left:160px;}
.graph li.b6{left:192px;}
.graph li.b7{left:224px;}
.graph li.b8{left:256px;}
.graph li.b9{left:288px;}
.graph li.b10{left:320px;}
.graph li.b11{left:352px;}
.graph li.b12{left:384px;}
.graph li.b13{left:416px;}
.graph li.b14{left:448px;}
.b-graph {
width:532px;
height:297px;
background:transparent url(/prx/000/http/cssing.org.ua/examples/graphs/b-graph.gif) no-repeat 0 0;
position:relative;;
}
.b-graph ul{
position:absolute;
bottom:18px;
left:37px;
list-style:none;
}
.b-graph ul li{
width:30px;
_height:0;
margin:0;
position:relative;text-align:center;
line-height:1px;
font-size:1px;
}
.b-graph ul li span{
display:none;
}
.b-graph ul li span.view{
display:block;
color:#fff;
left:auto;
font-size:11px;
height:20px;
}
.c1{background:#FE0000}
.c2{background:#FF9801}
.c3{background:#00CCFF}
.c4{background:#FFFF01}
.c5{background:#FF6700}
.c6{background:#DB1E60}
.b-graph ul.e2{left:72px;}
.b-graph ul.e3{left:107px;}
.b-graph ul.e4{left:142px;}
.b-graph ul.e5{left:177px;}
.b-graph ul.e6{left:212px;}
.b-graph ul.e7{left:247px;}
.b-graph ul.e8{left:282px;}
.b-graph ul.e9{left:317px;}
.b-graph ul.e10{left:352px;}
.b-graph ul.e11{left:387px;}
.b-graph ul.e12{left:422px;}
.b-graph ul.e13{left:457px;}
.b-graph ul.e14{left:492px;}
ul.leg{margin-left:33px;margin-top:15px;list-style:none;}
ul.leg span{
height:15px;
font-size:15px;line-height:15px;
width:15x;
padding:3px;

}