table.chart {
  border-collapse: collapse;
}

table.chart td, table.chart th {
  padding: 0;
  height: 25px;
  background: transparent;
}

table.chart div {
  padding: 3px;
  border: solid 1px gray;
  margin-left: 10px;
  margin-right: 10px;
  background: #efefef;
}

table.chart div.h { text-align: center; border-bottom: 0; font-weight: bold; color: white; background: gray}
table.chart div.note { font-style: italic; text-align: center; border: 0; color: gray; background: transparent; position: relative; top: -0.5em}

table.chart td.b { background: url(/images/chart/b.gif) center middle no-repeat; }
table.chart td.t { background: url(/images/chart/t.gif) center middle no-repeat; }
table.chart td.rb { background: url(/images/chart/rb.gif) center middle no-repeat; }
table.chart td.trbl { background: url(/images/chart/trbl.gif) center middle no-repeat; }
table.chart td.trl { background: url(/images/chart/trl.gif) center middle no-repeat; }
table.chart td.bl { background: url(/images/chart/bl.gif) center middle no-repeat; }
table.chart td.tb { background: url(/images/chart/tb.gif) center middle no-repeat; }
table.chart td.tbl { background: url(/images/chart/tbl.gif) center middle no-repeat; }

table.chart .dl { border-left: dotted 1px #aaa }
table.chart .dr { border-right: dotted 1px #aaa }
table.chart .dt { border-top: dotted 1px #aaa }
table.chart .db { border-bottom: dotted 1px #aaa }
table.chart .dlr { border-right: dotted 1px #aaa; border-left: dotted 1px #aaa }
table.chart .drl { border-right: dotted 1px #aaa; border-left: dotted 1px #aaa }

table.chart tr.dt td, table.chart tr.dt th { border-top: dotted 1px #aaa }
table.chart tr.db td, table.chart tr.db th { border-bottom: dotted 1px #aaa }