@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.noselect
{
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

h4
{
    width: 75%;
    text-align: center;
    font-family: 'Droid Sans Mono';
    font-weight: normal;
    color: white;
    font-size: 14px;
    margin: 0 auto 1em auto;
    padding: 1em;
    background: #b63642;
}

h5
{
    font-size: 1em;
    font-weight: bold;
}

p
{
    text-align: center;
    font-family: 'Droid Sans Mono';
    margin: 3em auto 1em auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #414141;
    background: #f4f4f4;
}

.left-align
{
    text-align: left;
}

.right-align
{
    text-align: right;
}

//////////////////////////////////

@clndr-border: 1px solid #000;

.cal1
{
    margin: 30px auto;
    max-width: 600px;
    font-family: 'Droid Sans Mono';
    font-size: 14px;

    .clndr
    {
        .clndr-controls
        {
            .clearfix;
            width: 100%;
            position: relative;
            margin-bottom: 10px;

            .month
            {
                float: left;
                width: 33%;
                text-align: center;
            }

            .clndr-control-button
            {
                float: left;
                width: 33%;

                &.rightalign
                {
                    text-align: right;
                    width: 34%;
                }
                .clndr-next-button
                {
                    cursor: pointer;
                    .noselect;
                    &:hover { background: #ddd; }
                    &.inactive
                    {
                        opacity: 0.5;
                        &:hover
                        {
                            background: none;
                            cursor: default;
                        }
                    }
                }
                .clndr-previous-button
                {
                    cursor: pointer;
                    .noselect;
                    &:hover { background: #ddd; }
                    &.inactive
                    {
                        opacity: 0.5;
                        &:hover
                        {
                            background: none;
                            cursor: default;
                        }
                    }
                }
            }
        }

        .clndr-table
        {
            table-layout: fixed;
            width: 100%;

            .header-days
            {
                height: 30px;
                font-size: 10px;
                background: #0D70A6;

                .header-day
                {
                    vertical-align: middle;
                    text-align: center;
                    border-left: @clndr-border;
                    border-top: @clndr-border;

                    color: #fff;

                    &:last-child
                    {
                        border-right: @clndr-border;
                    }
                }
            }

            tr
            {
                height: 85px;

                td
                {
                    vertical-align: top;
                }

                .day
                {
                    border-left: @clndr-border;
                    border-top: @clndr-border;
                    width: 100%;
                    height: inherit;

                    &:hover { background: #eee; }

                    &.today, &.my-today
                    {
                        background: #9AD6E3;
                        &:hover { background: darken(#9AD6E3, 10%); }
                        &.event
                        {
                            background: mix(#B4E09F, #9AD6E3);
                        }
                    }

                    &.event, &.my-event
                    {
                        background: #B4E09F;
                        &:hover
                        {
                            background: darken(#B4E09F, 10%);
                        }
                    }

                    &.inactive, &.my-inactive
                    {
                        background: #ddd;
                    }

                    &:last-child
                    {
                        border-right: @clndr-border;
                    }

                    .day-contents
                    {
                        box-sizing: border-box;
                        // width: 100%;
                        // height: 100%;
                        padding: 8px;
                        font-size: 12px;
                        text-align: right;
                    }
                }

                .empty, .adjacent-month, .my-empty, .my-adjacent-month
                {
                    border-left: @clndr-border;
                    border-top: @clndr-border;
                    width: 100%;
                    height: inherit;
                    background: #eee;

                    &:hover { background: #ddd; }

                    &:last-child
                    {
                        border-right: @clndr-border;
                    }
                }

                &:last-child
                {
                    .day, .my-day
                    {
                        border-bottom: @clndr-border;
                    }

                    .empty, .my-empty
                    {
                        border-bottom: @clndr-border;
                    }
                }
            }
        }
    }
}

@box-size: 25px;

.cal2
{
    max-width: 177px;
    margin: 30px auto;

    font-family: 'Droid Sans Mono';

    .clndr
    {
        .clndr-controls
        {
            display: block;
            .clearfix;
            width: 100%;
            margin-bottom: 3px;

            .clndr-previous-button
            {
                float: left;
                width: 10%;
                text-align: left;
                cursor: pointer;
                .noselect;
                &:hover
                {
                    background-color: #f4f4f4;
                }
            }
            .month
            {
                float: left;
                width: 80%;
                text-align: center;
            }
            .clndr-next-button
            {
                float: left;
                width: 10%;
                text-align: right;
                cursor: pointer;
                .noselect;
                &:hover
                {
                    background-color: #f4f4f4;
                }
            }
        }

        .clndr-grid
        {
            text-align: center;
            border: 1px solid #FF4545;
            .clearfix;

            .header-day
            {
                float: left;
                width: @box-size;
                height: @box-size;
                // padding-top: 5px;
                background: #FF4545;
            }

            .day
            {
                float: left;
                width: @box-size;
                height: @box-size;

                &.event
                {
                    background-color: #B4E09F;
                }

                &.today
                {
                    background-color: #E3C57F;
                }
                &.selected
                {
                    background-color: #E37FD6;
                }
                &.inactive{
                    color: gray;
                }
            }

            .empty, .adjacent-month
            {
                float: left;
                width: @box-size;
                height: @box-size;
                background: #ddd;
            }
        }

        .clndr-today-button
        {
            width: 100%;
            text-align: center;
            cursor: pointer;
            &:hover
            {
                background-color: #ddd;
            }
        }
    }

    .multi-month-controls
    {
        .quarter-button
        {
            display: inline-block;
            width: 25%;

            &:hover
            {
                cursor: pointer;
                background-color: #f4f4f4;
            }
        }
    }
}

.cal2 .day.inactive
{
    background-color: #aaa;
}

.cal3
{
    max-width: 354px;
    margin: 0 auto;

    font-family: 'Droid Sans Mono';

    .cal
    {
        float: left;
        width: 177px;
    }

    .clndr
    {
        .clndr-controls
        {
            display: block;
            .clearfix;
            width: 100%;
            margin-bottom: 8px;

            &.top
            {
                margin-bottom: -22px;
                position: relative;
                z-index: 1;
            }

            .clndr-previous-button
            {
                float: left;
                width: 10%;
                text-align: left;
                cursor: pointer;
                .noselect;
                &:hover
                {
                    background-color: #f4f4f4;
                }
            }
            .month
            {
                text-align: center;
                width: 80%;
                margin: 0 auto;
            }
            .clndr-next-button
            {
                float: right;
                width: 10%;
                text-align: right;
                cursor: pointer;
                .noselect;
                &:hover
                {
                    background-color: #f4f4f4;
                }
            }
        }

        .clndr-grid
        {
            text-align: center;
            border: 1px solid #FF4545;
            .clearfix;

            .header-day
            {
                float: left;
                width: @box-size;
                height: @box-size;
                // padding-top: 5px;
                background: #FF4545;
            }

            .day
            {
                float: left;
                width: @box-size;
                height: @box-size;

                &.event
                {
                    background-color: #B4E09F;
                }

                &.today
                {
                    background-color: #E3C57F;
                }
            }

            .empty, .adjacent-month
            {
                float: left;
                width: @box-size;
                height: @box-size;
                background: #ddd;
            }
        }

        .clndr-today-button
        {
            width: 100%;
            text-align: center;
            cursor: pointer;
            &:hover
            {
                background-color: #ddd;
            }
        }
    }

    .multi-month-controls
    {
        .quarter-button
        {
            display: inline-block;
            width: 25%;

            &:hover
            {
                cursor: pointer;
                background-color: #f4f4f4;
            }
        }
    }
}

.clndr-next-button, .clndr-previous-button, .clndr-next-year-button, .clndr-previous-year-button
{
    .noselect;

    &.inactive
    {
        opacity: 0.5;
        cursor: default;
    }
}