#graph *
{
    margin: 0px;
    padding: 0px;
    font-family: verdana;
    font-size: 11px;
}

#graph
{
    width: 500px;
}

#graph .name
{
    background-color: #fff;
    float: left;
    width: 144px;
    border-right: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
    padding-right: 5px; /*BOX PROBLEM !!!*/
}

#graph .bar
{
    width: 350px;
    float: right;
}

#graph .length
{
    background-color: orange;
    height: 11px;
    line-height: 11px;
    font-size: 0px;
    margin-top: 6px;
    width: 0%;
    float: left;
}

#graph .bar span
{
    position: relative;
    top: 3px;
    left: 5px;
}

#graph .clearrecord
{
    clear: both;
}

#graph #legend
{
    margin-left: 150px;
    border-top: 1px solid #000;
}

#graph .years
{
    float: left;
    height: 5px;
    font-size: 5px;
    line-height: 5px;
    background-image: url(/images/line_dark.gif);
    background-position: right top;
    background-repeat: repeat-y;
}

#graph #yearnull
{
    width: 10px;
    float: left;
    background-image: url(/images/line_dark.gif);
    background-position: right top;
    background-repeat: repeat-y;    
    text-align: center;
    margin-left: -10px;
    margin-top: -1px;
}

* html #graph #yearnull
{
    position: relative;
    left: 10px;
}

#graph #yearnull span
{
    margin-top: 6px;
    display: block;
    background-color: #fff;
    position: relative;
    left: 5px;
    line-height: 12px;
}

#graph .years span
{
    position: relative;
    top: 6px;
    margin-left: -12px;
    display: block;
    width: 24px;
    text-align: center;
    background-color: #fff;
}

* html #graph .years span
{   
    line-height: 11px;
    top: 3px;
}

#graph .subyears
{
    background-image: url(/images/line_dark.gif);
    background-position: right top;
    background-repeat: repeat-y;
    width: 20%;
    line-height: 3px;
    font-size: 3px;
    height: 3px;
    float: left;
}

#graph[id] .years
{
    *margin-top: -1px;
}

#graph [id] .years span
{
    *line-height: 11px;
    *top: 3px;
}