#court { width: 640px; height: 1080px; margin: 0px; padding: 0; border-collapse: collapse; background: url('virt01_640_portrait_red.png') no-repeat; }
#court td  { margin: 0; padding: 0; width: 10px; max-width: 10px; height: 10px; line-height: 10px; font-family: Consolas, Courier; font-size: 10px; color: #FFF; text-align: center; }
#court td:hover { background-color: #00A2E8; cursor: default; }
#court .txt { font-size: 10px; color: #FFF; text-align: center; }

.t1  { background-color: #0C0; background-image: url('legend_cell_reserved.png'); }
.t2  { background-image: url('legend_cell_booked.png'); }
.dim { background-color: transparent; background-image: none; }
.high { background-color: #FF0000; }
.dim_v { opacity: 0.5; }
.mark { background-image: url('legend_cell_marked.png'); }

/* Tooltip */
#court td:hover { text-decoration: none;}
#court td span { z-index: 10; display: none; padding: 10px; margin-top: 10px; margin-left: 10px; line-height: 1.5em; font-size: 11px; text-align: left; /* Tooltip CSS3 extras */ border-radius: 5px; box-shadow: 2px 2px 4px #000; }
#court td:hover span { display: inline; position: absolute; color: #FFF; background:#444; }

#court_left div:hover { text-decoration: none;}
#court_left div span { z-index: 10; display: none; padding: 10px; margin-top: 10px; margin-left: 10px; line-height: 1.5em; font-size: 11px; text-align: left; /* Tooltip CSS3 extras */ border-radius: 5px; box-shadow: 2px 2px 4px #000; }
#court_left div:hover span { display: inline; position: absolute; color: #FFF; background:#444; }