#cal { background-color: #fff; padding: .2em; font-size: 12px; border: 1px solid #000; }
#cal th { border-bottom: 1px solid #000; text-align: center; vertical-align: middle; }
#cal td.blank { padding: .25em; vertical-align: middle; text-align: center; color: #fff; background-color: #fff; }
#cal td.day { padding: .25em; background-color: #fff; text-align: right; vertical-align: middle; cursor: default; }
#cal td.selected { background-color: #d4d5d8; }

#cal div.month { text-align: center; padding: .25em 0; background-color: #d4d0c8; }
#cal div.year { text-align: right; }
#cal div.year span.current { font-weight: bold; }
#cal div.month span.current { cursor: pointer; }
#cal div.year span.next, #cal div.year span.previous { cursor: pointer; color: #777; }
#cal div.month span.next, #cal div.month span.previous { cursor: pointer; color: #777; }
#cal div.month img { vertical-align: middle; }

#month { font-size: 12px; cursor: default; margin-top: .2em; border: 1px solid #000; }
#month ul { padding: 0; margin: 0; }
#month li { list-style-type: none; padding: 0; margin: 0; background-color: #fff; padding: .2em .75em; color: #000; text-align: center; }
#month li.current { font-weight: bold; }
#month li.hover { background-color: #000; color: #fff;}

.control { cursor: pointer; }
form label { font-weight: bold; }
form div.field { padding: 5px 10px; }