/**
    this file brutally overrides Tapestry default datepicker styling by making them more specific by adding the body selector
    The original tapestry styling is still injected into the page. It would be nice to have this removed
*/
@media screen {
    body .datePickerContainer {
        background-color: transparent;
        -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
        -moz-border-radius: 7px;
        -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
        -webkit-border-radius: 7px;
        font-size:10px;
        width:auto;
    }

    body .datePickerContainer thead tr {
        background-color: transparent; /* to be removed when legacy styling has been removed */
        height: auto;
    }

    body .calendarContainer {
        /* border:1px solid #566f8f;*/
    }

    body .calendarBodyContainer {
        width:100%; /* needed for the explode effect (explain?) */
        background: #EEEEEE url('') top left repeat-x;
        border: 1px solid #C2C2C4;
    }

    body .calendarBodyContainer thead tr td {
        color: #333333;
        font: bold 1em Verdana,Arial,Helvetica,sans-serif;
        text-align:center;
        padding:0.25em;
        background: silver url('') bottom left repeat-x;
    }

    body .calendarBodyContainer tbody tr td {
        color: black;
        font: normal 1em Verdana,Arial,Helvetica,sans-serif;
        text-align:center;
        padding:0.4em;
        background: url('') top right repeat-y;
        cursor:pointer;
    }

    body .calendarBodyContainer tbody tr td:hover {
        background-color: #316AC5 !important;
        color: white !important;
    }

    body .monthWrapper {
        padding-bottom: 0px;
        background: transparent url('') bottom left repeat-x;
    }

    body .monthContainer {
        width:100%;
    }
    
    body .monthLabelContainer {
        text-align: center;
        font: bold 1em Verdana,Arial,Helvetica,sans-serif;
        background: url("../../images/panel/panel-h.gif") repeat-x scroll 0 0 transparent !important;
        color: #333333;
        padding: 8px 0.25em 7px;
    }
    
    body .monthCurve {
        width: 6px;
    }

    body .monthCurveTL {
        background: url("../../images/panel/panel.png") no-repeat scroll 0 0 transparent !important;
    }

    body .monthCurveTR {
        background: url("../../images/panel/panel.png") no-repeat scroll right -30px transparent !important;
    }


    body .yearWrapper {
        background: transparent url('') top left repeat-x;
        padding-top: 0px;
    }

    body .yearContainer {
        width:100%;
    }

    body .yearContainer td {
        background: url("../../images/panel/panel-h.gif") repeat-x scroll 0 -7px transparent;
        height: 21px;
    }

    body .yearContainer .yearLabel {
        margin:0;
        padding: 2px 0px;
        color: black;
        font: bold 1em Verdana,Arial,Helvetica,sans-serif;
        text-align:center;
    }

    body .curveBL {
        background: url("../../images/panel/panel.png") no-repeat scroll left -66px transparent !important;
        width: 6px !important;
        padding:0;
        margin:0;
    }

    body .curveBR {
        background: url("../../images/panel/panel.png") no-repeat scroll right -96px transparent !important;
        width: 6px !important;
        padding:0;
        margin:0;
    }


    body .previousMonth {
        background-color: #E1E1E1 !important;
    }

    body .previousMonthDisabled {
        background-color:#a4a5a6 !important;
        cursor:default !important
    }
    body .currentMonth {
        background-color: white !important;
    }

    body .currentMonthDisabled {
        background-color:#bbbbbc !important;
        cursor:default !important
    }
    body .nextMonth {
        background-color: #E1E1E1 !important;
    }
    body .nextMonthDisabled {
        background-color:#a4a5a6 !important;
        cursor:default !important;
    }

    body .currentDate {
        text-decoration:underline;
        font-style:italic;
    }

    body .selectedDate {
        background-color: white !important;
        color: #316AC5 !important;
        font-weight: bold !important;
    }

    body .yearLabel .selectedYear {
        padding: 2px 5px;
        background-color: #C2C2C4 !important;
        -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
    }

    body .nextYear, body .previousYear {
        cursor:pointer;
        padding: 2px 5px;
    }

    body .nextYear {
        margin:0 0 0 0.55em;
    }

    body .previousYear {
        margin:0 0.55em 0 0;
    }
    
    body .nextYear:hover, body .previousYear:hover {
        background-color: #DDDDDD;
        -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
    }    

    body .incrementControl {
        cursor:pointer;
        width:1em;
    }

    body .increase {
        float:right;
    }

    body .decrease {
        float:left;
    }

    body .lastColumn {
        background-image:none !important;
    } 

    body .calendarContainer td {
        padding-left:0px;
        padding-right:0px;
    }

}