/* CALENDARS AND DATE HANDLING *************************/
// Note that most of the hcal classes are set via the hcal.js script.

.hcal_tables {
  .outOfRange, .notInMonth { opacity: 0.4 }

  table tr td { background: transparent; font-weight: normal; padding:0 }
  thead th { text-align: center }
  td {
    .calDayLabel { 
      padding: 0.25em; 
      text-align: center;  
      border-radius: 1em; 
      display: block; 
      color: $inverse
    }
    &.has_events .calDayLabel { font-weight: bold; }
    &.calDayToday .calDayLabel { background: $accent; }
  }
}

// small calendars
#small-calendar {
  .events, .longDays, .calEventDesc  { display: none }
  table { 
    font-size: 85%; 
    td.has_events {
      .calDayLabel { background: $base_alt2; }
      .events { position:relative; }
    }
    td:hover .events {
      display: block; 
      position: absolute;
      z-index: 1000; 
      background: $base;
      border: 1px solid $accent;
      width: 180px;
      margin-left: -90px;
      font-size: 10px; 
      padding: 2px 4px;
      text-align: left;
      // IE9 has an issue with box shadow inside tables with border-collapse set (all of them). This fixes it.
      border-collapse: separate;
    }
  }
}

// big calendars
#big-calendar {
  .abbrDays, .datebox, .eventDetails { display: none }
  td {
    border: 1px solid $base_alt; 
    height: 90px; 
    width: 14.2857%; 
    padding: 0 .5em .5em; 
    .calDayLabel {
      float: right; 
      margin-left: 0.25em
    }
    .event { font-size: 70%; 
      &:hover .eventDetails {
        background: $base;
        // IE9 has an issue with box shadow inside tables with border-collapse set (all of them). This fixes it.
        border-collapse: separate;
        border:1px solid $accent;
        display: block; 
        font-size: 10px; 
        padding: 2px 4px;
        position: absolute;
        text-align: left;
        width: 180px;
        z-index: 1000; 
      }
    }
  }
}

// Dateboxes  
.event_times {
  clear: left;
  float: left; 
  width:70px; 
  .datebox + .hide + .datebox { border-left: 0 }  
}
.datebox {
  background: $base_alt2; 
  border: 1px solid lighten($base_alt2, 5%);
  float: left; 
  position: relative; 
  text-align: center; 
  width: 70px; 
  span {
    display: block; 
    color: $inverse_alt; 
    line-height: 1em
  }
  .d, .mo, .w { font-size: 10px; }
  .w, .mo {
    text-shadow:none;
    text-transform: uppercase;
  }
  .w, .d { font-weight: bold }
  .w {
    background:$inverse_alt;
    color:$base;  
  }
  .d {
    font-size:2.5em; 
    padding-left:10px;
    text-align: center;
  }
  .mo {
    position: absolute; 
    width:4em; 
    left: -1em; 
    bottom: 2em; 
    text-align: left; 
    @include rotate(-90);
  }
}
.event_info {
  margin: 0 0 2em 90px;
   h2, h3, p { margin: 0 }
  .org {display:inline; padding-right:1em}
}
