/*
 * The main calendar widget.  DIV containing a table.
 */
div.calendar {
  z-index: 3000;
  box-shadow: 2px 2px 5px #999999; }

div.calendar,
div.calendar table {
  background-color: #eeeeee;
  background-color: white;
  border-radius: 5px;
  color: black;
  cursor: default;
  font-family: tahoma, verdana, sans-serif;
  font-size: 11px; }
  div.calendar tr:first-child,
  div.calendar table tr:first-child {
    border-color: #dddddd;
    border-width: 1px 1px 0 1px; }

/*
 * remove border-radius and box-shadow for panelwidget
 */
#panelwidget-calendar.calendar {
  box-shadow: none; }

#panelwidget-calendar.calendar,
#panelwidget-calendar.calendar table {
  background: none;
  border-radius: 0; }

/*
 * Header part -- contains navigation buttons and day names.
 */
div.calendar {
    /*
   * The body part -- contains all the days in month.
   */
    /*
   * The footer part -- status bar and "Close" button
   */
    /*
   * Combo boxes (menus that display months/years for direct selection)
   */ }
  div.calendar .button {
        /*
     * "<<", "<", ">", ">>" buttons have this class
     */
    text-align: center;
    vertical-align: middle;
        /*
     * They are the navigation buttons
     */
    padding: 4px;
    border-bottom: 1px solid white; }
  div.calendar .nav {
    background: #d7dcc6 url(../../../../../../core/asset/js/jscalendar/menuarrow.gif) no-repeat 100% 100%; }
    div.calendar table .wn {
      padding: 2px 3px 2px 2px;
      border-right: 1px solid #cccccc;
      background: #e3eace; }
    div.calendar thead .title {
            /*
       * This holds the current "month, year"
       */
      text-align: center;
      color: black;
      padding: 2px;
      vertical-align: middle;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: 1px solid white; }
    div.calendar thead .headrow {
            /*
       * Row <TR> containing navigation buttons
       */
      background: #d7dcc6;
      color: white; }
      div.calendar thead .headrow .button {
        border-bottom: 1px solid #cccccc; }
    div.calendar thead .daynames {
            /*
       * Row <TR> containing the day names
       */
      background: #e3eace; }
    div.calendar thead .name {
            /*
       * Cells <TD> containing the day names
       */
      border-bottom: 1px solid #cccccc;
      padding: 2px;
      text-align: center;
      text-transform: uppercase;
      color: black; }
    div.calendar thead .weekend {
            /*
       * How a weekend day name shows in header
       */
      color: black;
      text-transform: uppercase; }
    div.calendar thead .hilite {
            /*
       * How do the buttons in header appear when hover
       */
      background-color: white;
      color: black; }
    div.calendar tbody .day {
            /*
       * Cells <TD> containing month days dates
       */
      width: 2em;
      color: black;
      text-align: right;
      padding: 2px 4px 2px 2px;
      border-right: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd; }
      div.calendar tbody .day.othermonth {
        font-size: 80%;
        color: #bbbbbb; }
        div.calendar tbody .day.othermonth.oweekend {
          color: lightsalmon; }
    div.calendar tbody .rowhilite td {
      background: #edf1e0; }
      div.calendar tbody .rowhilite td.wn {
        background: #d0d6be; }
      div.calendar tbody td.hilite {
                /*
         * Hovered cells <TD>
         */
        background: #316ac5;
        color: white; }
        div.calendar tbody td.hilite.weekend {
                    /*
           * Cells showing weekend days
           */
          color: white; }
      div.calendar tbody td.selected {
                /*
         * Cell showing today date
         */
        font-weight: bold;
        padding: 1px 3px 1px 1px;
        background: white;
        color: black; }
      div.calendar tbody td.weekend {
                /*
         * Cells showing weekend days
         */
        color: #999999; }
      div.calendar tbody td.today {
                /*
         * Cell showing selected date
         */
        font-weight: bold;
        color: black;
        background-color: #e3eace; }
      div.calendar tbody td.time {
        padding: 5px 0;
        text-align: center;
        background-color: white; }
        div.calendar tbody td.time .hour,
        div.calendar tbody td.time .minute,
        div.calendar tbody td.time .ampm {
          padding: 0 3px 0 4px;
          border: 1px solid #999999;
          font-weight: bold;
          background-color: white; }
        div.calendar tbody td.time .ampm {
          text-align: center; }
        div.calendar tbody td.time .colon {
          padding: 0 2px 0 3px;
          font-weight: bold; }
        div.calendar tbody td.time .hilite {
          border-color: black;
          background-color: #666666;
          color: white; }
        div.calendar tbody td.time .active {
          border-color: red;
          background-color: black;
          color: green; }
    div.calendar tbody .disabled {
      color: #999999; }
    div.calendar tbody .emptycell {
            /*
       * Empty cells (the best is to hide them)
       */
      visibility: hidden; }
    div.calendar tbody .emptyrow {
            /*
       * Empty row (some months need less than 6 rows)
       */
      display: none; }
    div.calendar tfoot .footrow {
            /*
       * The <TR> in footer (only one right now)
       */
      text-align: center;
      background: #666666;
      color: white; }
    div.calendar tfoot .ttip {
            /*
       * Tooltip (status bar) cell <TD>
       */
      background: white;
      color: #444444;
      border-top: 1px solid #cccccc;
      padding: 4px;
            /*
       * Bugfix for opera to force word wrap an table cell
       */
      width: 223px; }
    div.calendar tfoot .hilite {
            /*
       * Hover style for buttons in footer
       */
      background: #4f8ab4;
      border: 1px solid #24a5c3;
      color: black;
      padding: 1px; }
    div.calendar tfoot .active {
            /*
       * Active (pressed) style for buttons in footer
       */
      background: #88aacc;
      padding: 2px 0 0 2px; }
  div.calendar .combo {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 4em;
    cursor: default;
    background: #d0d6be;
    color: black;
    font-size: 90%;
    z-index: 3000;
    box-shadow: 2px 2px 5px #999999; }
    div.calendar .combo .label,
    div.calendar .combo .label-IEfix {
      text-align: center;
      padding: 2px; }
    div.calendar .combo .label-IEfix {
      width: 4em; }
    div.calendar .combo .hilite {
      background: #e3eace; }
    div.calendar .combo .active {
      background: white;
      font-weight: bold; }