/*************************************************
                     GRAPH
*************************************************/

.graph {
    list-style-type:none;
    margin:1em 0;
    padding:1em;
    width:500px;
    border:3px solid #666;
}

.graphtitle {
    clear:both;
    font-weight:bold;
    font-size:1.1em;
    display:block;
    width:100%;
    border-bottom:1px solid #666;
    margin:0;
    padding:1em 0;
}

.graphlegend {
    clear:both;
    border-top:1px solid #666;
    margin:0;
    padding:0;
}

.graph .color0 {
    background-color:#ebe8d0;
}

.graph .color1 {
    background-color:#d36e04;
}

.graph .color2 {
    background-color:#a3d09f;
}

.graph .color3 {
    background-color:#dfd1d1;
}

.graph .color4 {
    background-color:#e5f2fb;
}

.graph .color5 {
    background-color:#fcfffb;
}

.graph .color6 {
    background-color:#900;
}

.graph .color7 {
    background-color:#cfbfa5;
}

.graph .color8 {
    background-color:#cf304f;
}

.graph .color9 {
    background-color:#43304f;
}

.graphlegend span {
    display:block;
    margin:1em 0;
    font-weight:bold;
    font-size:1.05em;
}

.graphlegend li {
    letter-spacing:0.3em;
    padding:0.5em;
    display:inline;
    margin:0 0.5em 0 0;
}

.graphhorizontal ul, .graphvertical ul, .graphlegend ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.graphvertical ul {
    height:inherit;
}

/*______________HORIZONTAL BARS______________*/

.graphhorizontal {
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
}

.graphhorizontal li {
    position:relative;
    width:100%;
    padding:1% 0;
    margin:0;
    clear:both;
    vertical-align:middle;
}

.graphhorizontal li span {
    position:absolute;
    width:15%;
    left:0;
    line-height:2.5em;
}

.graphhorizontal li li {
    text-align:right;
    display:block;
    margin:0 1% 0 16%;
    padding:0;
    line-height:2.5em;
    border-bottom:1px solid #eee;
}

.graphhorizontal .graphborder {
    border-bottom:1px dotted #666;
}

/*______________VERTICAL BARS______________*/

.graphvertical {
    width:100%;
    height:300px;
    position: relative;
    margin:0;
    padding:0;
    list-style-type:none;
}

.graphvertical li {
    position:absolute;
    bottom:0;
    height:100%;
    padding:0;
    margin:0;
    vertical-align:top;
}

.graphvertical li span {
    position:absolute;
    left:0;
    bottom:-2em;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    line-height:2.5em;
}

.graphvertical li li {
    position:absolute;
    padding:0;
    border-right:1px solid #eee;
    display:block;
    text-align:center;
    bottom:0;
}

.graphvertical .graphborder {
    border-right:1px dotted #666;
}