.bargraph {     
          height: 229px; 
          position: relative; 
          background:  url(/images/papergrid.jpg) repeat-x; 
          border-left: 1px solid #d4d4d4;
          margin: 15px auto 50px;
          display: inline-flex;
    }

    .bargraph ul.bars {
        margin: 0; 
        padding: 0; 
        /* getting rid of bullets */
        list-style-type: none;
    }

    .bargraph ul.olympic-watermark {
        background: url(/image/orings.png) no-repeat;
        background-position: 50% 50%;
        height: 122px; /* IE fix */
        z-index: 98; 
    }

    .bargraph ul.euro-watermark {
        background: url(/image/sapphire5.png) no-repeat;
        height: 201px; /* IE fix was 164*/
        background-position: 0 0;
    }
   
    .bargraph ul.stars-watermark {
        background: url(/image/starcoin4.png) no-repeat;
        background-position: 50% 50%;
        height: 174px; /* IE fix */
    }

    div.bargraph div.colorfilter {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.2;  filter:alpha(opacity=20);
        z-index: 97;
    
    }

    div.bargraph div.colorfilter2 {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.4;  filter:alpha(opacity=40);
        z-index: 97;
    
    }

    .bargraph ul.bars li {  
        position: absolute; 
        width: 30px; 
        height: 200px; 
        /*move it up from bottom label*/
        bottom: 29px; 
        padding: 0; 
        margin: 0; 
        background: url(/images/bars200.jpg) no-repeat;
        text-align: center; 
        font-weight: bold; 
        color: white; 
        font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
        font-size: 11px;
        z-index: 99;
    }

   
    .bargraph ul.bars li span {
        position: relative;
        top: -25px;
        color: #7c7c7c;
     }
    .bargraph ul.bars li img {        
           margin: 0; padding: 0;
           position: relative;
           top: -71px;
           left: 0;
    }

    .bargraph ul.bars li span.darkpen {
        color: #515151;
        position: static;
    }
    .bargraph ul.bars li span.whitepen {
        color: red;
    }

    .bargraph ul.bars li.bar1 { left: 21px;  }
    .bargraph ul.bars li.bar2 { left: 94px;  }
    .bargraph ul.bars li.bar3 { left: 167px; }
    .bargraph ul.bars li.bar4 { left: 240px; }
    .bargraph ul.bars li.bar5 { left: 313px; }
    .bargraph ul.bars li.bar6 { left: 386px; }
    .bargraph ul.bars li.bar7 { left: 459px; }
    .bargraph ul.bars li.bar8 { left: 532px; }
    .bargraph ul.bars li.bar9 { left: 605px; }
    .bargraph ul.bars li.bar10 { left: 678px; }
    .bargraph ul.bars li.bar11 { left: 751px; }
    .bargraph ul.bars li.bar12 { left: 824px; }
    .bargraph ul.bars li.bar13 { left: 897px; }

    /* bottom means 100% in background-position */
    .bargraph ul.bars li.bluebar  { background-position: 0px bottom; height:100%; }
    .bargraph ul.bars li.redbar   { background-position: -30px bottom; height:100%; }
    .bargraph ul.bars li.greenbar { background-position: -60px bottom; height:100%; }
    .bargraph ul.bars li.orangebar  {  background-position: -90px bottom; height:100%;}
    .bargraph ul.bars li.grapebar   {  background-position: -120px bottom; }
    .bargraph ul.bars li.purplebar  {  background-position: -150px bottom; }
    .bargraph ul.bars li.crimsonbar {  background-position: -180px bottom; }
    .bargraph ul.bars li.navybar    {  background-position: -210px bottom; }
    .bargraph ul.bars li.goldbar    {  background-position: -240px bottom; }
    .bargraph ul.bars li.tealbar    {  background-position: -270px bottom; }

    .label { list-style-type: none; 
             position: absolute; bottom: 3px; 
             margin: 0; padding: 0; }
    .label li { 
        color: white; 
        text-transform: uppercase; 
        letter-spacing: 0.1em;
        font-size: 9px;
        width: 73px;
       
        float: left;
        text-align: center;
       /*safeguard against a label that is too long - if they type
          that in from the HTML
        */
        overflow: hidden;
        height:15px;
        font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
        line-height: 1.1em;
    }


    ul.y-axis { list-style-type: none; position: absolute; 
                /*
                  positioning the ul box - the box that goes 
                  around the list, 100, 75,... */
                  left: -45px; 
                  width: 40px;
                  text-align: right;
                  bottom: 0;
                  margin: 0; padding: 0; 
    }

    ul.y-axis li:first-child {
         height: 40px;
         line-height: 40px;
    }

    ul.y-axis li { 
        color: #aba8a8;  
        font-size: 12px;
        height: 51px;
        line-height: 51px;
        text-align: right;
                padding-top: 0;
        padding-bottom: 0;
    }

    ul.y-axis li.units {
        position: absolute;
        bottom: 110px;
        right: 20px;
        line-height: 1.2em;
        height: auto;
    }
  /*labeling of the graph*/
  .bargraph  p { 
                position: absolute; 
                left: 0; 
                top: 236px; 
                
                padding: 0; 
                margin:0; 
                text-align: left; 
     
                width: 100%;
                font-family: Verdana, sans-serif;
                font-size: 10px; color: black;
                line-height: 1.3em;
                
              }
   .bargraph p.centered { text-align: center; }
   
   .Grid {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}

.Grid td {

      padding: 5px;

      border: solid 1px #c1c1c1; }

.Grid th
{
    padding: 4px 2px;
    color: #fff;
    background: #333333 url(/Images/grid-header.png) repeat-x top;
    border-left: solid 1px #525252;
    font-size: 0.9em;
}

.Grid .alt {

      background: #fcfcfc url(/Images/grid-alt.png) repeat-x top; }

.Grid .pgr {background: #363670 url(/Images/grid-pgr.png) repeat-x top; }

.Grid .pgr table { margin: 3px 0; }

.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  

.Grid .pgr a { color: Gray; text-decoration: none; }

.Grid .pgr a:hover { color: #000; text-decoration: none; }