table.jCalendar th { background: #342c29; color: #fff; font-weight: bold; padding: 7px} table.jCalendar td { background: #6e5a53; color: #000; padding: 5px 7px; text-align: center; border-right: 1px solid #342c29; border-bottom: 1px solid #342c29} table.jCalendar td.other-month { background: #342c29; color: #26201e} table.jCalendar td.today { background: #826f60; color: #000} table.jCalendar td.selected { background: #efdfa4; color: #000} table.jCalendar td.selected:hover { background: #ac9a7a; color: #000} table.jCalendar td:hover, table.jCalendar td.dp-hover { background: #ac9a7a; color: #000} table.jCalendar td.disabled, table.jCalendar td.disabled:hover { background: #ffe6cf; color: #f57402} table.jCalendar td.other-month:hover { background: #342c29; color: #26201e; cursor: default} /* For the popup *//* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */div.dp-popup { position: relative; font-size: 9px; padding: 20px; background: #342c29} div#dp-popup { position: absolute; z-index: 199} div.dp-popup h2 { font-size: 12px; text-align: center; line-height: 170%; color:#FFFFFF}a#dp-close { font-size: 11px; padding: 4px 0; text-align: center; display: block} a#dp-close:hover { text-decoration: underline} div.dp-popup a { color: #ac9a7a; text-decoration: none; padding: 5px 5px} div.dp-popup a:hover { color: #fff1be} div.dp-popup div.dp-nav-prev { position: absolute; top: 2px; left: 4px; width: 100px} div.dp-popup div.dp-nav-prev a { float: left} /* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a { cursor: pointer} div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled { cursor: default} div.dp-popup div.dp-nav-next { position: absolute; top: 2px; right: 4px; width: 100px} div.dp-popup div.dp-nav-next a { float: right} div.dp-popup a.disabled { cursor: default; color: #aaa} div.dp-popup td { cursor: pointer} div.dp-popup td.disabled { cursor: default} a.dp-choose-date { width: 16px; height: 16px; display: block; text-indent: -2000px; overflow: hidden; background: url(../img/icons/calendar.png) no-repeat; position: absolute; top: 35px; left: 6px}a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default} a.dp-choose-date:hover {cursor: pointer} /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */input.dp-applied { width: 140px; float: left} form.main label input.date-pick { width: 53%;}