/* 
    Document   : calendar
    Created on : 11/07/2013, 3:11:20 PM
    Author     : Rhys
    Description:
        Purpose of the stylesheet follows.
*/

.calendar-head {
    text-align: center;
    margin:0 0 .5em;
}

    @media only screen and (max-width:650px) {

        .calendar-head>h2>span {
            display:block;
            margin:.5em;
        }

    }

    .calendar-current-date {
        font-size: 1.5em;
        margin:0 .25em;
    }

        .calendar-current-year {
            font-weight:normal;
        }

.calendar-day {
    border-top: 7px solid #ccc;
    padding: .5em 0 0;
    margin-bottom: 1.5em;
    vertical-align: top;
    overflow: hidden;
}

    @media only screen and (min-width:650px) {

        .calendar-day {
            display: inline-block;
            vertical-align: top;
            position: relative;
            width: 14.28%;
            margin:0 0 .75em 0;
        }

    }

    .calendar-past {
        border-color: #eee;
    }

    .calendar-today {
        border-color: #000;
    }

    .calendar-sat {
        margin-right: 0;
    }

    .calendar-day>header {
        margin:0 0 .25em;
    }

        @media only screen and (min-width:650px) {
            .calendar-day>header {
                border-bottom: 1px solid #ddd;
                margin:0 0 .75em;
            }
        }

        .calendar-today>header {
            border-color:#000;
        }

        .calendar-past>header h3 {
            color:#999;
        }

    @media only screen and (max-width:650px) {

        .calendar-slider {
            position:static !important;
        }

    }
    @media only screen and (min-width:650px) {

        .calendar-day-events {
            float:left;
            height: 10em;
            overflow:auto;
        }
        
    }

        .event {
            position:relative;
        }

            .calendar-past .event {
                opacity:.75;
            }

            @media only screen and (max-width:650px) {

                /* Override JS added positions if this is list mode */
                .event {
                    top:0 !important;
                }
            }

            /* Pastel colours for the event title boxes. Mainly skipped the pink/purple spectrum */
            .event-number-0 {background-color: #fe9c9c; }
            .event-number-1 {background-color: #ffb47f; }
            .event-number-2 {background-color: #ffe97f; }
            .event-number-3 {background-color: #dfff7f; }
            .event-number-4 {background-color: #7efcf3; }
            .event-number-5 {background-color: #7fd4ff; }
            .event-number-6 {background-color: #d5cdff; }
            .event-number-7 {background-color: #ffc4e6; }
            .event-number-8 {background-color: #65ff9f; }
            .event-number-9 {background-color: #fbff56; }
            .event-number-10 {background-color: #ef87d9; }

            /* We only want to hide multiple day event titles if this is the wide calendar view */
            @media only screen and (min-width:650px) {
                .event.multiple-day a:hover { text-decoration:none; }
                .event-number-0.multiple-day h4 {color: #fe9c9c;}
                .event-number-1.multiple-day h4 {color: #ffb47f; }
                .event-number-2.multiple-day h4 {color: #ffe97f; }
                .event-number-3.multiple-day h4 {color: #dfff7f; }
                .event-number-4.multiple-day h4 {color: #7efcf3; }
                .event-number-5.multiple-day h4 {color: #7fd4ff; }
                .event-number-6.multiple-day h4 {color: #d5cdff; }
                .event-number-7.multiple-day h4 {color: #ffc4e6; }
                .event-number-8.multiple-day h4 {color: #65ff9f; }
                .event-number-9.multiple-day h4 {color: #fbff56; }
                .event-number-10.multiple-day h4 {color: #ef87d9; }
            }

        .view-event, .event-description .cancel {
            display:block;
            padding:.25em;
            text-decoration:none;
        }

            .view-event h4 {
                font-size:1.35em;
                font-weight:normal;
                word-wrap:break-word;
                margin:0;
            }

                @media only screen and (min-width:650px) {

                    .view-event h4 {
                        font-size:.9em;
                    }

                }

                .view-event .event-time {
                    display:block;
                    font-size:.8em;
                    font-weight:bold;
                }

    .event-description {
        line-height:1.3;
        font-size:1.1em;
    }

        @media only screen and (min-width:650px) {

            .event-description {
                float:left;
                height:11.76em; /* 10/.85 (font-size) */
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
                box-sizing:border-box;
                padding:0 .5em;
                font-size:.85em;
                overflow: auto;
            }

        }

        .event-description .cancel {
            background: #eee;
            color: #666;
            margin:0 0 .5em;
            padding:.525em .4em;
            line-height: 1;
        }

        .event-description footer {
            margin:.5em 0 0;
        }

            .event-description .book-now {
                display:block;
                text-align: right;
                font-weight:normal;
                box-shadow:none;
            }

        .event-description h4 {
            margin:0 0 .25em;
        }

        .event-description h5 {
            margin:.75em 0 .2em;
        }

        .events-calendar .hidden {
            display: none;
        }

            @media only screen and (min-width:650px) {
                .calendar-day-events.hidden {
                    display:block;
                    visibility:hidden;
                }
            }