calendrical.scss

$background_color:    #FFF;
$text_color:          #000;
$border_color:        #999;
$grey_color:          #999;
$selection_color:     #CCF;
$today_color:         #EEB;
$today_border_color:  #DD6;

.calendricalDatePopup {
  background: $background_color;
  border: solid 1px $border_color;
  padding: 2px;
  text-align: center;
  width: 160px;

  table {
    border-collapse: collapse;
    width: 160px;

    .monthCell {
      padding: 2px 0;
      a {
        display: block;
        float: left;
        line-height: 20px;
      }
      .prevMonth, .nextMonth {
        width: 24px;
      }
      .monthName {
        width: 110px;
      }
    }

    a {
      text-decoration: none;
    }

    th {
      text-align: center;
    }
    
    td {
      text-align: center;
      font-size: 12px;
      padding: 0;
      a {
        display: block;
        color: $text_color;
        padding: 2px 3px;
        &:hover {
          background: $selection_color;
          border: none;
          padding: 2px 3px;
        }
      }
      &.today a {
        background: $today_color;
      }
      &.selected a {
        background: $selection_color;
      }
      &.today_selected a {
        background: $today_color;
        border: solid 1px $today_border_color;
        padding: 1px 2px;
      }
      &.nonMonth a {
        color: $grey_color;
      }
    }
  }
}

.calendricalTimePopup {
  background: $background_color;
  border: solid 1px $border_color;
  width: 110px;
  height: 130px;
  overflow: auto;
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      margin: 0;
      a, a:visited {
        text-indent: 10px;
        padding: 4px;
        display: block;
        color: $text_color;
        text-decoration: none;
      }
      a:hover, &.selected a {
        background: $selection_color;
      }
    }
  }
}
.calendricalEndTimePopup {
  width: 160px;
}