/* Calendar Popup */
.date-field a {
  vertical-align:middle;
  margin-top:0px;
}
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: 2px solid #333;
}
form.f div.calendar-header {
	text-align:center;
}
form.f div.calendar-header {
  height: 20px;
  background-color: #ccc;
  color: #000;
}

form.f div.calendar-header a {
  display:inline-block;
  padding: 0 3px;
  text-decoration: none;
}

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

form.f div.calendar-header span {
  text-align: center;
  font-size: 12px;
  display:inline-block;
  padding: 0 10px;
}

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: 12px;
  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: 12px;
  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;
}

.calendar-cells a.enabled:hover {
	background:#eee;
}

@media handheld, only screen and (max-width: 500px) {

  form.f div.calendar {
    left: 15%;
  }

}