@charset "UTF-8";

/**
 * CSS rules for the datepicker that ships with Zen. The datepciekr system can be found
 * here: https://github.com/arian/mootools-datepicker/
 *
 * @author Yorick Peterse
 * @since    0.2
 */
.datepicker
{
    background:    #fff;
    border-radius: 5px;
    border:        5px solid #ddd;
    cursor:        move;
    display:       block;
    height:        285px;
    margin-top:    5px;
    padding:       5px;
    position:      absolute;
    width:         270px;

    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
}

    /* The datepicker's header */
    .datepicker .header
    {
        background:   #eee;
        height:       40px;
        position:     relative;
    }
        .datepicker .header .title
        {
            font-size:  14px;
            margin:     0px auto;
            padding:    10px 0px 5px 0px;
            text-align: center;
        }
        .datepicker .header .title:hover
        {
            text-decoration: underline;
        }

        .datepicker .header .previous, .datepicker .header .next
        {
            cursor:     pointer;
            display:    block;
            font-size:  24px;
            height:     10px;
            padding:    2px 5px 5px 3px;
            position:   absolute;
            top:        -1px;
            width:      10px;
        }

        .datepicker .header .previous
        {
            left:  5px;
        }

        .datepicker .header .next
        {
            right: 5px;
        }

        .datepicker .header .closeButton
        {
            display: none;
        }

    .datepicker .body
    {
        height:    255px;
        overflow:  hidden;
        position:  relative;
    }

        .datepicker .body .titles .day
        {
            font-weight: bold;
        }

        /* Grid showing all available days for the current month */
        .datepicker .body .days .day, .datepicker .body .months .month,
        .datepicker .body .years .year
        {
            cursor:     pointer;
            float:      left;
            margin:     2px;
            padding:    5px;
            text-align: center;
            width:      24px;
        }

        .datepicker .body .months .month, .datepicker .body .years .year
        {
            margin:  10px 10px 10px 0px;
        }

        .datepicker .body .days .today
        {
            font-weight:     bold;
            text-decoration: underline;
        }

        .datepicker .body .days .selected
        {
            border:     1px solid #ccc;
            margin:     1px;
        }

        .datepicker .body .days .day:hover, .datepicker .body .months .month:hover,
        .datepicker .body .years .year:hover
        {
            text-decoration: underline;
        }

        .datepicker .body .days .day.otherMonth
        {
            color: #ccc;
        }

        /* Field containing the form elements to edit the hours/minutes for a date */
        .datepicker .body .time .hour, .datepicker .body .time .minutes,
        .datepicker .body .time .separator, .datepicker .body .time .ok
        {
            min-width:  100px;
            position:   absolute;
            text-align: center;
            width:      100px;
        }

        .datepicker .body .time
        {
            margin-top: 10px;
        }

        .datepicker .body .time .hour
        {
            left: 7px;
        }

        .datepicker .body .time .minutes
        {
            left: 147px;
        }

        .datepicker .body .time .separator
        {
            font-size:    24px;
            font-weight:  bold;
            left:         128px;
            min-width:    10px;
            width:        10px;
        }

        .datepicker .body .time .ok
        {
            left: 80px;
            top:  55px;
        }