.tcalInput { background: url('img/cal.gif') 100% 50% no-repeat; padding-right: 20px; cursor: pointer; } .tcalActive { background-image: url('img/no_cal.gif'); } #tcal { position: absolute; visibility: hidden; z-index: 100; width: 170px; background-color: white; margin-top: 2px; margin-left:100px; padding: 0 2px 3px 2px; border: 2px solid #e0e0e0; border-radius:8px; border:4px solid white; } #tcalControls { border-collapse: collapse; border: 0; width: 100%; } #tcalControls td { border-collapse: collapse; border: 0; padding: 0; width: 16px; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; } #tcalControls th { border-collapse: collapse; border: 0; padding: 0; line-height: 25px; font-size: 10px; text-align: center; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; white-space: nowrap; color:#777; } #tcalPrevYear { background-image: url('img/prev_year.gif'); } #tcalPrevMonth { background-image: url('img/prev_mon.gif'); } #tcalNextMonth { background-image: url('img/next_mon.gif'); } #tcalNextYear { background-image: url('img/next_year.gif'); } #tcalGrid { border-collapse: collapse; border: 1px solid #ddd; width: 100%; } #tcalGrid th { border-bottom:2px solid #ddd; border-collapse: collapse; padding: 3px 0; text-align: center; font-family: Tahoma, Geneva, sans-serif; font-size: 10px; background-color: #4FA600; background-color:#555; color: white; } #tcalGrid td { border: 0; border-collapse: collapse; padding: 2px 0; text-align: center; font-family: Tahoma, Geneva, sans-serif; width: 14%; font-size: 11px; cursor: pointer; color:#777; } #tcalGrid td:hover { background-color:#f0f0f0; } #tcalGrid td.tcalOtherMonth { color: silver; } #tcalGrid td.tcalWeekend { background-color: #e0f4cd; background-color:#eee; } #tcalGrid td.tcalSelected {  background-color: #4FA600; background-color:#555; color:#fff;  border:none; }