table, td { font:87% Arial, Helvetica, sans-serif; }
table{width:100%;border-collapse:collapse;margin: 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#679bcb; color:#fff;}
td { background: #e5f1f4; vertical-align: middle; text-align: center; font-weight: 600; font-size: 1.1em; }

/* tablecloth styles */
.Zone { vertical-align: middle; text-align: center; }
.Zone h3 { font-size: 22px; width: 108px; position: relative; }
tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}

th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styling to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}

@media (max-width:700px) {
	.Zone h3 { width: auto; }
}