/* Calendar Popup */
.date-field a {
  vertical-align:middle;
  margin-top:1px;
}
form.f div.calendar {
  display: inline;
  position: absolute;
  width: 210px;
  -webkit-box-shadow: 0px 0px 2px 1px #ccc;
  -moz-box-shadow: 0px 0px 2px 1px #ccc;
  box-shadow: 0px 0px 2px 1px #ccc; 
    background-color: #fff;
    border: 1px solid #999;
}

form.f div.calendar-header {
  height: 20px;
  line-height:20px;
  background-color: #ccc;
  color: #000;
}

form.f div.calendar-header a {
  display: block;
  float: left;
  width: 20px;
  text-align: center;
  text-decoration: none;
}

form.f div.calendar-header a:hover {
  font-weight: bold;
}

form.f div.calendar-header span {
  display: block;
  float: left;
  width: 130px;
  text-align: center;
  font-size: 0.9em;
}

form.f div.calendar-days {
  line-height: 22px;
  height: 22px;
  background-color: #F2F2F2;
}

form.f div.calendar-days span {
  display: block;
  float: left;
  width: 30px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
}

form.f div.calendar-cells a {
  display: block;
  float: left;
  width: 29px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  font-size: 0.9em;
  color: #000;
  border-left: 1px solid #DDDDDE; /* note: MUST be a 1px border-left */
  border-top: 1px solid #DDDDDE;  /* note: MUST be a 1px border-top */
}

form.f div.calendar-cells a.other-month:hover {
  background-color: #F2F2F2;
}