/* MONTH PICKER
-----------------------------------------------------------*/

.monthPicker {
    background-color: #FFF;
    border: #BDC7D8 solid 1px;
    height: 16px;
    padding: 2px;
    text-align: center;
}

    .monthPicker a {
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        position: relative;
        opacity: .7;
    }

        .monthPicker a:hover {
            opacity: 1;
        }

        .monthPicker a:before {
            content: "";
            border: 5px solid transparent;
            position: absolute;
            top: 3px;
        }

        .monthPicker a.prev {
            float: left;
        }

            .monthPicker a.prev:before {
                border-right-color: #333;
                left: 0px;
            }

        .monthPicker a.next {
            float: right;
        }

            .monthPicker a.next:before {
                border-left-color: #333;
                right: 0px;
            }

        .monthPicker a.disabled, .monthPicker a.disabled:hover {
            opacity: .2;
            cursor: default;
        }

    .monthPicker span {
        padding: 2px 5px 4px;
        cursor: pointer;
        position: relative;
        top: -2px;
    }

        .monthPicker span:hover {
            border-radius: 2px;
            -moz-border-radius: 2px;
            background-color: #3b5998;
            border: 1px solid transparent;
            color: #FFF;
            box-shadow: 0 0 0 1px #FFF inset;
            font-weight: bold;
        }

        .monthPicker span.disabled {
            color: #ccc;
        }

            .monthPicker span.disabled:hover {
                background: none;
                border: 0;
                border-radius: unset;
                color: #ccc;
                box-shadow: none;
                font-weight: normal;
                cursor: default;
            }

.monthPickerDropDown {
    position: absolute;
    top: 23px;
    display: none;
    z-index: 9999;
    border: 1px solid #CCC;
    border-spacing: 2px;
    box-shadow: 0 0 5px #AAA;
    margin: 0;
    padding: 1.5em 0.3em;
    width: 140px;
    background: #fff;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 20%, #ffffff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #e5e5e5), color-stop(20%, #ffffff), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #e5e5e5 0%, #ffffff 20%, #ffffff 100%);
    background: -o-linear-gradient(top, #e5e5e5 0%, #ffffff 20%, #ffffff 100%);
    background: linear-gradient(to bottom, #e5e5e5 0%, #ffffff 20%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff', GradientType=0 );
}

.monthPickerDropDownInner {
    margin: 0 20px 0 10px;
}

    .monthPickerDropDownInner li {
        height: 1.5em;
    }

        .monthPickerDropDownInner li a {
            float: left;
            width: 95%;
            font-family: Verdana, Sans-Serif;
            color: #333 !important;
            border: solid 1px transparent;
            border-radius: 2px;
            padding: 3px 0 3px 5px;
            margin-bottom: 1px;
        }

            .monthPickerDropDownInner li a:hover {
                background: #dbedf1;
                background: -moz-linear-gradient(top, #dbedf1 0%, #d3edee 40%, #c9e7e9 100%);
                background: -webkit-linear-gradient(top, #dbedf1 0%,#d3edee 40%,#c9e7e9 100%);
                background: linear-gradient(to bottom, #dbedf1 0%,#d3edee 40%,#c9e7e9 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbedf1', endColorstr='#c9e7e9',GradientType=0 );
                border-color: #6482AA !important;
                border: 1px solid #CCC;
                text-decoration: none !important;
                text-shadow: 0 1px 1px #FFF;
                color: #6482AA !important;
            }

    .monthPickerDropDownInner .year a {
        color: #3b5998 !important;
    }

        .monthPickerDropDownInner .year a .bullet {
            background: url(images/bullet3.png) no-repeat 0 4px;
            font-size: 16px;
            padding-left: 10px;
        }

        .monthPickerDropDownInner .year a:hover .bullet {
            background-position: 0 -15px;
        }

        .monthPickerDropDownInner .year a.selected .bullet {
            background: url(images/bullet3.png) no-repeat 0 -30px;
        }

        .monthPickerDropDownInner .year a.selected:hover .bullet {
            background-position: 0 -46px;
        }

        .monthPickerDropDownInner .year a.selected.collapse .bullet {
            background-position: 0 4px;
        }

        .monthPickerDropDownInner .year a.selected.collapse:hover .bullet {
            background-position: 0 -15px;
        }

    .monthPickerDropDownInner .month a {
        font-size: 11px;
        text-indent: 20px;
        padding: 1px;
    }

        .monthPickerDropDownInner .month a.selected {
            color: #333 !important;
            font-weight: bold;
        }