/*
 * Styling your calendar:
 * - This file contains some basic calendar styling.
 * - Visit admin/config/content/availability-calendar/styling to define some more styling.
 * - Finally resort to your theme style sheets to define any requested styling.
 *
 * A calendar is rendered as follows:
 * div#cal-{cid}.cal
 *   div.cal-viewport          ? optional when the viewport functionality is enabled
 *     div.cal-viewport-inner  ? optional
 *       div#cal-{cid}-{year}-{month}.cal-month  * repeated for each month
 *         table
 *           caption           contains month name
 *           thead
 *             tr
 *               th.cal-weekno-header  ? optional, if week notes are enabled, contains 'Nr.'
 *               th            * repeated 7 times, containing short names of the days
 *           tbody
 *             tr[.cal-empty]  * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
 *               th            ? optional, only rendered if week notes are enabled, contains the week note
 *               td.{state}    * repeated 7 times, representing a day in the month, class defines state(s) of that day
 *                 div         ? optional only with no split days, contains day number
 *                 span        ? optional only with split days
 *                   span        contains day number
 */
.cal-month {
  float: left; /* LTR */
  margin: 0 6px 6px;
}

/* - Some themes set the width to 100% and browsers will honor that above the
 *   width of individual columns when using fixed table-layout.
 * - IE7 will always honor that, even without fixed table-layout.
 * So we use both and assure that each column gets its width in the first row.
 */
.cal table {
  table-layout: fixed;
  width: auto;
}

.cal table, .cal th, .cal td {
  margin: 0;
  padding: 0;
}

.cal caption {
  margin: 6px 6px 0;
  padding: 0;
  border-bottom: 1px solid #555;
}

/*
 * Settings to get day number and coloring according to state for split days.
 * - border-width will be defined in the generated css.
 * - border-color will be overruled based on the defined availability states.
 */
.cal td > span {
  display: block;
  position: relative; /* Allows to position inner span w.r.t this span. */
  border-style: solid;
  border-color: transparent;
}

.cal td > span > span {
  position: absolute;
  z-index: 1;
}

/* Allows to highlight a border on hovering (without disturbing the lay-out). */
.cal td > div, .cal td > span > span {
  border: 1px solid transparent;
}


/*
 * Special statuses:
 * cal-other: cells from another month, at the start of end of a calendar month.
 * cal-pastdate: cell for days in the past.
 * cal-today: cell for the current day.
 * cal-selectable: cells that are selectable.
 * cal-selected: cell that has been selected.
 * cal-empty: cell (with colspan=7) for an empty 6th week.
 * cal-error: selectable cell that may not be clicked because a non-clickable
 *   date is between.
 */

/* these selectors need to be stronger than those for the availability states.
 */
.cal th,
.cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
.cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
  background-color: transparent;
  border-color: transparent;
}

.cal td > span {
  border-color: transparent;
}

.cal-other {
  color: #aaa;
}

.cal-today {
  font-weight: bolder;
}

.cal-selected {
  font-weight: bolder;
  font-size: larger;
}

.cal .cal-selected > div, .cal .calselected > span > span {
  border-color: #555;
}

.cal-selectable {
  cursor: pointer;
}

/* Table cells and spans cannot get :focus, so no need to define that pseudo
 * class.
 */
.cal-selectable:hover > div, .cal-selectable:hover > span > span {
  border-color: #555;
}

.cal-error > div, .cal-error > span > span {
  cursor: default;
  background-image: url(icon-error.png);
  background-position: center center;
  background-repeat: no-repeat;
}

/*
 * Key
 */
.keystatus {
  padding-left: 2px; /* LTR */
}

.cal td.keystatus div {
  width: auto;
}

/*
 * View calendar through a viewport, also see availability_calendar.view.js.
 */
.cal-viewport {
  position: relative;
  overflow: hidden;
}

.cal-viewport-inner {
  position: relative;
  top: 0;
  left: 0; /* LTR */
  overflow: visible;
}