/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/


/******************** Gradient declarations ********************/
.gren-lrg {
    /*background: rgb(238,238,238); 
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 
    background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); */
    background: #eee url(../content/gradient_gren_900.jpg) 50% 50% repeat-x;
}

.gren-med {
    background: #eee url(../content/gradient_medium.jpg) 50% 50% repeat-x;
}

.gren-500 {
    background: #eee url(../content/gradient_gren_500.jpg) 50% 50% repeat-x;
}

.nerg-lrg {
    background: #eee url(../content/gradient_nerg_large.jpg) 50% 50% repeat-x;
}

.gryw-lrg {
    background: #f6be2c url(../content/gradient_gryw_900.jpg) 50% 50% repeat-x;
}

.grtt-lrg {
    background: #f5bf2d url(../content/gradient_medium_header.jpg) 50% 50% repeat-x;
}

.plain-background {
    background-color: #eee;
}

.inner-header {
    background-image: none;
    background-color: #eadfb3;
}

.inner-footer {
    background-image: none;
    background-color: #eadfb3; /*#F5BF2D;*/
}

.tt-hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

.icon-info-1 {
    width: 36px;
    float: left;
    position: relative;
    top: -10px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-none {
    float: none;
}

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

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

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.w_35 {
    width: 35px !important;
    max-width: 35px !important;
}

.w_85 {
    width: 85px !important;
    max-width: 85px !important;
}

.w_115 {
    width: 115px !important;
    max-width: 115px !important;
}

/******************** global theming ********************/
body {
    font-size: 10pt;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0px 0 5px;
    padding: 0;
    color: #696969;
    height: 100%;
    min-height: 100%;
    background-color: #58595D;
    overflow-y: auto; /*scroll*/
    overflow: -moz-scrollbars-vertical;

    touch-action: manipulation !important;
    -ms-touch-select: none;
}

#main h2 {
    text-align: center;
    border-bottom: 1px solid #aaa;
    color: #444A51;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0;
    margin: 0px 0px 5px 0px;
    padding: 6px 0px 9px 0px;
    text-transform: uppercase;
    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
}

    #main h2.bottom {
        -moz-border-radius: 0px 0px 20px 20px;
        -webkit-border-radius: 0px 0px 20px 20px;
        border-radius: 0px 0px 20px 20px;
        border-top: solid 1px #aaa;
        border-bottom: none;
        margin-bottom: 0px !important;
    }

#leave-request-results-pane .description.APPROVED {
    color:green;
}

#leave-request-results-pane .description.DECLINED,
#leave-request-results-pane .description.CANCELLED {
    color:red;
}

#leave-request-results-pane .description.REQUESTED {
    color:orange;
}


#main .button,
.imagebutton,
#main .radion,
#availability-edit .button,
.ui-dialog-content .button {
    display: inline-block;
    border: solid 1px #AAA;
    -moz-box-shadow: 1px 1px 2px #ccc inset;
    box-shadow: -1px -1px 2px #ccc inset;
    height: 32px;
    padding-left: 30px !important;
    line-height: 30px;
    padding-right: 5px !important;
    font-weight: bold;
    font-family: Arial;
    font-size: 10pt;
    text-transform: uppercase;
    color: #666;
    text-shadow: 1px 1px 1px #EEE, -1px -1px 1px #CCC;
    background-color: rgb(238, 238, 238);
    background: url('../content/buttons.png') 0px 4px no-repeat scroll; /* Old browsers */
    background: url('../content/buttons.png') 0px 4px no-repeat scroll, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#main .plain-button {
    display: inline-block;
    border: solid 1px #AAA;
    -moz-box-shadow: 1px 1px 2px #ccc inset;
    box-shadow: -1px -1px 2px #ccc inset;
    height: 32px;
    padding-left: 10px !important;
    line-height: 30px;
    padding-right: 10px !important;
    font-weight: bold;
    font-family: Arial;
    font-size: 10pt;
    text-transform: uppercase;
    color: #666;
    text-shadow: 1px 1px 1px #EEE, -1px -1px 1px #CCC;
    background-color: rgb(238, 238, 238);
    background: url('../content/buttons.png') 0px 4px no-repeat scroll; /* Old browsers */
    background: url('../content/buttons.png') 0px 4px no-repeat scroll, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

#main .radion {
    padding-left: 10px !important;
}

.imagebutton {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#main .button:hover,
#availability-edit .button:hover {
    -moz-box-shadow: -1px -1px 2px #ccc inset;
    box-shadow: 1px 1px 2px #ccc inset;
    cursor: pointer;
    color: #d59f1d;
    background: url('../content/buttons.png') 0px 4px no-repeat scroll; /* Old browsers */
    background: url('../content/buttons.png') 0px 4px no-repeat scroll, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_dddddd_1x100.png) 50% 50% repeat-x; /* Chrome10+,Safari5.1+ */
}

#main .button.disabled:hover,
#availability-edit .button.disabled:hover {
    -moz-box-shadow: 1px 1px 2px #ccc inset;
    box-shadow: -1px -1px 2px #ccc inset;
    cursor: default;
    color: inherit;
    background: url('../content/buttons.png') 0px 4px no-repeat scroll; /* Old browsers */
    background: url('../content/buttons.png') 0px 4px no-repeat scroll, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
}

#availability-edit .button.disabled:hover {
    cursor:not-allowed;
}


.no-multiplebgs #main .button:hover, .no-multiplebgs #availability-edit .button:hover {
    background: url('../content/buttons.png') 0px 4px no-repeat scroll;
}

#main .radion:hover, #main .radion.end:hover {
    -moz-box-shadow: -1px -1px 2px #ccc inset;
    box-shadow: 1px 1px 2px #ccc inset;
    cursor: pointer;
    color: #d59f1d;
}


/*was prefixed with: #main*/
.plainButton,
.slimPlainButton {
    display: inline-block;
    border: solid 1px #AAA;
    -moz-box-shadow: 1px 1px 2px #ccc inset;
    box-shadow: -1px -1px 2px #ccc inset;
    padding-left: 10px;
    line-height: 2.25em;
    padding-right: 10px;
    font-weight: bold;
    font-family: Arial;
    font-size: 10pt;
    text-transform: uppercase;
    color: #666;
    text-shadow: 1px 1px 1px #EEE, -1px -1px 1px #CCC;
    background-color: rgb(238, 238, 238);
    background: url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.slimPlainButton {
    height: 25px;
    line-height: 1.5em;
    text-transform: none;
    padding-right: 10px;
    padding-right: 10px;
}

    .plainButton:link,
    .plainButton:visited,
    .slimPlainButton:link,
    .slimPlainButton:visited {
        color: #666;
        text-decoration: none;
    }

    /*was prefixed with: #main*/
    .plainButton:hover,
    .slimPlainButton:hover {
        -moz-box-shadow: -1px -1px 2px #ccc inset;
        box-shadow: 1px 1px 2px #ccc inset;
        cursor: pointer;
        color: #d59f1d;
        background: url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_dddddd_1x100.png) 50% 50% repeat-x; /* Chrome10+,Safari5.1+ */
    }

    .plainButton.disabled,
    .slimPlainButton.disabled {
        text-shadow: 1px 1px 1px #cccccc, -1px -1px 1px #CCC;
        -moz-box-shadow: 1px 1px 2px #999999 inset;
        box-shadow: -1px -1px 2px #999999 inset;
        background: none;
        background-color: #b2b2b2;
        cursor: default;
    }

        .plainButton.disabled:hover,
        .slimPlainButton.disabled:hover {
            color: inherit;
        }

.plainButton.opaque {
    display: inline-block;
    border: solid 1px #AAA;
    -moz-box-shadow: 1px 1px 2px #ccc inset;
    box-shadow: -1px -1px 2px #ccc inset;
    padding-left: 10px;
    line-height: 2.25em;
    padding-right: 10px;
    font-weight: bold;
    font-family: Arial;
    font-size: 10pt;
    text-transform: uppercase;
    color: #666;
    text-shadow: 1px 1px 1px #EEE, -1px -1px 1px #CCC;
    background-color: rgb(238, 238, 238);
    background: url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    opacity: 0.5;
}

.plainButton.disabled.opaque:hover {
    cursor: not-allowed;
}

.ui-dialog-buttonpane .ui-button.disabled {
    color: silver;
    cursor: default;
}

.ui-widget-header.ui-dialog-titlebar button.ui-dialog-titlebar-close span.ui-button-text {
    display: none !important;
}

.no-multiplebgs #main .button, .no-multiplebgs #main .radion, .no-multiplebgs #availability-edit .button, .no-multiplebgs .ui-dialog-content .button, .no-multiplebgs #main .button:hover, .no-multiplebgs #main .radion:hover, .no-multiplebgs #availability-edit .button:hover, .no-multiplebgs .ui-dialog-content .button:hover {
    background: url('../content/buttons.png') 0px 4px no-repeat scroll;
    background-color: rgb(238, 238, 238);
}

#main .button.disabled, #availability-edit .button.disabled {
    color: #ccc !important;
    cursor: not-allowed;
}

#main .button.back {
    background-position: 0px -35px, 50% 50%;
}

.no-multiplebgs #main .button.back {
    background-position: 0px -35px;
}

#main .button.back:hover {
    background-position: 0px -71px, 50% 50%;
}

#main .button.back.disabled {
    background-position: 0px -1406px, 50% 50%;
}

    #main .button.back.disabled:hover {
        background-position: 0px -1406px, 50% 50%;
    }

.no-multiplebgs #main .button.back:hover {
    background-position: 0px -71px;
}

.no-multiplebgs #main .button.back.disabled {
    background-position: 0px -1406px;
}

    .no-multiplebgs #main .button.back.disabled:hover {
        background-position: 0px -1406px;
    }

#main .button.next {
    background-position: 0px -107px, 50% 50%;
}

    #main .button.next:hover {
        background-position: 0px -143px, 50% 50%;
    }

    #main .button.next.disabled {
        background-position: 0px -1441px, 50% 50%;
    }

        #main .button.next.disabled:hover {
            background-position: 0px -1441px, 50% 50%;
        }

.no-multiplebgs #main .button.next {
    background-position: 0px -107px;
}

    .no-multiplebgs #main .button.next:hover {
        background-position: 0px -143px;
    }

    .no-multiplebgs #main .button.next.disabled {
        background-position: 0px -1441px;
    }

        .no-multiplebgs #main .button.next.disabled:hover {
            background-position: 0px -1441px;
        }

#main .button.next.right {
    background-position: right -107px, 50% 50%;
    padding-left: 5px !important;
    padding-right: 30px !important;
}

.no-multiplebgs #main .button.next.right {
    background-position: right -107px;
}

#main .button.next.right:hover {
    background-position: right -143px, 50% 50%;
}

.no-multiplebgs #main .button.next.right:hover {
    background-position: right -143px;
}

#main .button.next.right.disabled {
    background-position: right -1441px, 50% 50%;
}

    #main .button.next.right.disabled:hover {
        background-position: right -1441px, 50% 50%;
    }

#main .button.edit {
    background-position: 0px -178px, 50% 50%;
}

    #main .button.edit:hover {
        background-position: 0px -215px, 50% 50%;
    }

.no-multiplebgs #main .button.edit {
    background-position: 0px -178px;
}

    .no-multiplebgs #main .button.edit:hover {
        background-position: 0px -215px;
    }

#main .button.password {
    background-position: 0px -251px, 50% 50%;
}

    #main .button.password:hover {
        background-position: 0px -287px, 50% 50%;
    }

#main .button.onboarding-task {
    background-position: 0px -917px, 50% 50%;
}

    #main .button.onboarding-task:hover {
        background-position: 0px -1079px, 50% 50%;
    }

.no-multiplebgs #main .button.password {
    background-position: 0px -251px;
}

    .no-multiplebgs #main .button.password:hover {
        background-position: 0px -287px;
    }


.no-multiplebgs #main .button.onboarding-task {
    background-position: 0px -917px;
}

    .no-multiplebgs #main .button.onboarding-task:hover {
        background-position: 0px -1079px;
    }

#main .button.save {
    background-position: 0px -320px, 50% 50%;
}

    #main .button.save:hover {
        background-position: 0px -356px, 50% 50%;
    }

    #main .button.save.disabled:hover {
        background-position: 0px -320px, 50% 50%;
    }

.no-multiplebgs #main .button.save {
    background-position: 0px -320px;
}

    .no-multiplebgs #main .button.save:hover {
        background-position: 0px -356px;
    }

#main .button.message {
    background-position: 0px -387px, 50% 50%;
}

    #main .button.message:hover {
        background-position: 0px -423px, 50% 50%;
    }

.no-multiplebgs #main .button.message {
    background-position: 0px -387px;
}

    .no-multiplebgs #main .button.message:hover {
        background-position: 0px -423px;
    }

#main .button.break {
    background-position: 0px -459px, 50% 50%;
}

    #main .button.break:hover {
        background-position: 0px -495px, 50% 50%;
    }

    #main .button.break.disabled:hover {
        background-position: 0px -459px, 50% 50%;
    }

#availability-edit .button.leave {
    background-position: 0px -459px, 50% 50%;
    width: 180px;
}

#availability-edit .button.leave:hover {
    background-position: 0px -495px, 50% 50%;
}

#availability-edit .button.leave.disabled:hover {
    background-position: 0px -459px, 50% 50%;
}

.calendar-edit #btnEnableTouch {
    position: absolute; 
    left: 15px; 
    top: 5px; 
    font-size: 15px;
}
.calendar-edit #btnEnableTouch span {
    border-bottom:none;
}
.calendar-edit #btnEnableTouch.touch-enabled {
    color: darkorange;
}

.no-multiplebgs #main .button.break {
    background-position: 0px -459px;
}

    .no-multiplebgs #main .button.break:hover {
        background-position: 0px -495px;
    }

#main .button.clock {
    background-position: 0px -537px, 50% 50%;
}

    #main .button.clock:hover {
        background-position: 0px -573px, 50% 50%;
    }

.no-multiplebgs #main .button.clock {
    background-position: 0px -537px;
}

    .no-multiplebgs #main .button.clock:hover {
        background-position: 0px -573px;
    }

/* Green Tick */
#main .button.tick {
    background-position: 0px -802px, 50% 50%;
}

    #main .button.tick:hover {
        background-position: 0px -802px, 50% 50%;
    }

.no-multiplebgs #main .tick {
    background-position: 0px -802px;
}

    .no-multiplebgs #main .tick:hover {
        background-position: 0px -802px;
    }

/* Red Cross  */
#main .button.cross {
    background-position: 0px -881px, 50% 50%;
}

    #main .button.cross:hover {
        background-position: 0px -881px, 50% 50%;
    }

.no-multiplebgs #main .cross {
    background-position: 0px -881px;
}

    .no-multiplebgs #main .cross:hover {
        background-position: 0px -881px;
    }

/* Detail  */
#main .button.detail {
    background-position: 0px -953px, 50% 50%;
}

    #main .button.detail:hover {
        background-position: 0px -1111px, 50% 50%;
    }

.no-multiplebgs #main .detail {
    background-position: 0px -953px;
}

    .no-multiplebgs #main .detail:hover {
        background-position: 0px -1111px;
    }

/* Magnify glass  */
#main .button.magnifyglass {
    background-position: 0px -1509px, 50% 50%;
}

    #main .button.magnifyglass:hover {
        background-position: 0px -1539px, 50% 50%;
    }

.no-multiplebgs #main .magnifyglass {
    background-position: 0px -1509px;
}

    .no-multiplebgs #main .magnifyglass:hover {
        background-position: 0px -1539px;
    }

#main .button.geoloc {
    background-position: 0px -616px, 50% 50%;
}

    #main .button.geoloc:hover {
        background-position: 0px -651px, 50% 50%;
    }

.no-multiplebgs #main .button.geoloc {
    background-position: 0px -616px;
}

    .no-multiplebgs #main .button.geoloc:hover {
        background-position: 0px -651px;
    }

#main .button.prefer {
    background-position: 0px -687px, 50% 50%;
}

    #main .button.prefer:hover {
        background-position: 0px -722px, 50% 50%;
    }

#availability-edit .button.prefer {
    background-position: 0px -687px, 50% 50%;
}

    #availability-edit .button.prefer:hover {
        background-position: 0px -722px, 50% 50%;
    }

.no-multiplebgs #availability-edit .button.prefer {
    background-position: 0px -687px;
}

    .no-multiplebgs #availability-edit .button.prefer:hover {
        background-position: 0px -722px;
    }

#availability-edit .button.prefer.disabled:hover {
    color: #ccc;
    cursor: not-allowed;
    background-position: 0px -687px !important;
}

#availability-edit .button.avail {
    background-position: 0px -765px, 50% 50%;
}

    #availability-edit .button.avail:hover {
        background-position: 0px -802px, 50% 50%;
        color: #5A5;
    }

.no-multiplebgs #availability-edit .button.avail {
    background-position: 0px -765px;
}

    .no-multiplebgs #availability-edit .button.avail:hover {
        background-position: 0px -802px;
        color: #5A5;
    }

#availability-edit .button.avail.disabled:hover {
    color: #ccc;
    cursor: not-allowed;
    background-position: 0px -765px !important;
}

#availability-edit .button.unavail {
    background-position: 0px -844px, 50% 50%;
}

    #availability-edit .button.unavail:hover {
        background-position: 0px -880px, 50% 50%;
        color: #A55;
    }

.no-multiplebgs #availability-edit .button.unavail {
    background-position: 0px -844px;
}

    .no-multiplebgs #availability-edit .button.unavail:hover {
        background-position: 0px -880px;
        color: #A55;
    }

#availability-edit .button.unavail.disabled:hover {
    color: #ccc;
    cursor: not-allowed;
    background-position: 0px -844px, 50% 50% !important;
}


#main .button.add, .ui-dialog-content .button.add {
    background-position: 0px -918px, 50% 50%;
}

    #main .button.add:hover, .ui-dialog-content .button.add:hover {
        background-position: 0px -1080px, 50% 50%;
    }

    #main .button.add.disabled {
        background-position: 0px -918px, 50% 50%;
    }

        #main .button.add.disabled:hover {
            background-position: 0px -918px, 50% 50%;
        }

.no-multiplebgs #main .button.add, .ui-dialog-content .button.add {
    background-position: 0px -918px;
}

    .no-multiplebgs #main .button.add:hover, .ui-dialog-content .button.add:hover {
        background-position: 0px -1080px;
    }

    .no-multiplebgs #main .button.add.disabled {
        background-position: 0px -918px;
    }

        .no-multiplebgs #main .button.add.disabled:hover {
            background-position: 0px -918px;
        }

#main .button.bin, .ui-dialog-content .button.bin {
    background-position: 0px -953px, 50% 50%;
}

    #main .button.bin:hover, #main .button.bin.active, .ui-dialog-content .button.bin:hover {
        background-position: 0px -1111px, 50% 50%;
    }

    #main .button.bin.disabled:hover {
        background-position: 0px -953px, 50% 50%;
    }

.no-multiplebgs #main .button.bin, .ui-dialog-content .button.bin {
    background-position: 0px -953px;
}

    .no-multiplebgs #main .button.bin:hover, #main .button.bin.active, .ui-dialog-content .button.bin:hover {
        background-position: 0px -1111px;
    }

#main .button.bin.active {
    color: red;
}

#main .plainButton.active {
    color: red;
}

#main .button.dollar-sign {
    background-position: 0px -989px, 50% 50%;
}

    #main .button.dollar-sign:hover {
        background-position: 0px -1144px, 50% 50%;
    }

    #main .button.dollar-sign.disabled:hover {
        background-position: 0px -989px, 50% 50%;
    }

.no-multiplebgs #main .button.dollar-sign {
    background-position: 0px -989px;
}

    .no-multiplebgs #main .button.dollar-sign:hover {
        background-position: 0px -1144px;
    }

#main .button.document-arrow-back {
    background-position: 0px -1020px, 50% 50%;
}

    #main .button.document-arrow-back:hover {
        background-position: 0px -1176px, 50% 50%;
    }

    #main .button.document-arrow-back.disabled:hover {
        background-position: 0px -1020px, 50% 50%;
    }

.no-multiplebgs #main .button.document-arrow-back {
    background-position: 0px -1020px;
}

    .no-multiplebgs #main .button.document-arrow-back:hover {
        background-position: 0px -1176px;
    }

#main .button.printer {
    background-position: 0px -1050px, 50% 50%;
}

    #main .button.printer:hover {
        background-position: 0px -1206px, 50% 50%;
    }

    #main .button.printer.disabled:hover {
        background-position: 0px -1050px, 50% 50%;
    }

.no-multiplebgs #main .button.printer {
    background-position: 0px -1050px;
}

    .no-multiplebgs #main .button.printer:hover {
        background-position: 0px -1206px;
    }

#main .button.search {
    background-position: 0px -1510px, 50% 50%;
}

    #main .button.search:hover {
        background-position: 0px -1540px, 50% 50%;
    }

.no-multiplebgs #main .button.search {
    background-position: 0px -1510px;
}

    .no-multiplebgs #main .button.search:hover {
        background-position: 0px -1540px;
    }

#main .button.cross {
    background-position: 0px -881px, 50% 50%;
}

    #main .button.cross:hover {
        background-position: 0px -880px, 50% 50%;
    }


/*************** general image only button styles ***********************/

.imagebutton {
    padding: 0px 5px !important;
}

    .imagebutton.disabled {
        border: solid 1px #AAA;
        -moz-box-shadow: 1px 1px 2px #999999 inset;
        box-shadow: -1px -1px 2px #999999 inset;
        background: url('../content/buttons.png') 0px 4px no-repeat scroll;
        background-color: #b2b2b2;
        cursor: default;
    }

    /* PLUS / ADD */
    .imagebutton.plus.small {
        background-position: -2px -1329px, 50% 50%;
    }

        .imagebutton.plus.small:hover {
            background-position: -2px -1370px, 50% 50%;
        }

        .imagebutton.plus.small.disabled {
            background-position: -2px -1329px, 50% 50%;
        }

            .imagebutton.plus.small.disabled:hover {
                background-position: -2px -1329px, 50% 50%;
            }

    /* PENCIL / EDIT */
    .imagebutton.pencil.small {
        background-position: -1px -179px, 50% 50%;
    }

        .imagebutton.pencil.small:hover {
            background-position: -1px -216px, 50% 50%;
        }

        .imagebutton.pencil.small.disabled {
            background-position: -1px -179px, 50% 50%;
        }

            .imagebutton.pencil.small.disabled:hover {
                background-position: -1px -179px, 50% 50%;
            }

    /* BIN / DELETE */
    .imagebutton.bin.small {
        background-position: -2px -953px, 50% 50%;
    }

        .imagebutton.bin.small:hover {
            background-position: -2px -1111px, 50% 50%;
        }

        .imagebutton.bin.small.disabled {
            background-position: -2px -953px, 50% 50%;
        }

            .imagebutton.bin.small.disabled:hover {
                background-position: -2px -953px, 50% 50%;
            }

    /* GRN TICK / AUTHORISE */
    .imagebutton.tick.small {
        background-position: -2px -802px, 50% 50%;
    }

        .imagebutton.tick.small:hover {
            background-position: -2px -801px, 50% 50%;
        }

        .imagebutton.tick.small.disabled {
            background-position: -2px -802px, 50% 50%;
        }

            .imagebutton.tick.small.disabled:hover {
                background-position: -2px -802px, 50% 50%;
            }

    /* RED CROSS / UNAUTHORISE */
    .imagebutton.cross.small {
        background-position: -2px -881px, 50% 50%;
    }

        .imagebutton.cross.small:hover {
            background-position: -2px -880px, 50% 50%;
        }

        .imagebutton.cross.small.disabled {
            background-position: -2px -881px, 50% 50%;
        }

            .imagebutton.cross.small.disabled:hover {
                background-position: -2px -881px, 50% 50%;
            }

    /* COMMENTS BUBBLE */
    .imagebutton.comments.small {
        background-image: url(../content/speech_bubble_icon.png);
        background-position: 6px 6px;
    }

        .imagebutton.comments.small:hover {
            background-position: 6px 7px;
        }

    /* ARROW LEFT */
    .imagebutton.arrow-left.small {
        background-position: -2px -35px, 50% 50%;
    }

        .imagebutton.arrow-left.small:hover {
            background-position: -2px -70px, 50% 50%;
        }

    /* ARROW RIGHT */
    .imagebutton.arrow-right.small {
        background-position: -2px -107px, 50% 50%;
    }

        .imagebutton.arrow-right.small:hover {
            background-position: -2px -142px, 50% 50%;
        }

    /* CALENDAR ICON */
    /*.imagebutton.calendar-view.small {
        position: relative;
        top: 11px;
        background: url(../content/icon_calendar.png) 3px 5px no-repeat, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    }
    .imagebutton.calendar-view.small:hover {
        position: relative;
        top: 11px;
        background: url(../content/icon_calendar_hover.png) 3px 5px no-repeat, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    }*/

    /* LIST ICON */
    .imagebutton.list-view.small {
        position: relative;
        top: 11px;
        background: url(../content/icon_list.png) 3px 5px no-repeat, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
    }

        .imagebutton.list-view.small:hover {
            position: relative;
            top: 11px;
            background: url(../content/icon_list_hover.png) 3px 5px no-repeat, url(../content/jquery-ui-1.11.4.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% 50% repeat-x;
        }

    /* HOUR GLASS / SEARCH */
    .imagebutton.search.small {
        background-position: -2px -1510px, 50% 50%;
    }

        .imagebutton.search.small:hover {
            background-position: -2px -1540px, 50% 50%;
        }
    /*-----------------------------------------------------------------------*/

    /* PAPER CLIP / ATTACHMENT ICON */
    .imagebutton.attachment.small {
        background-color: rgb(238, 238, 238);
        background-image: url(../content/attach_24.png);
        background-position: 0px 3px;
    }

        .imagebutton.attachment.small:hover {
            background-position: 0px 4px;
        }

        .imagebutton.attachment.small.disabled {
            background-color: #b2b2b2;
        }

            .imagebutton.attachment.small.disabled:hover {
                background-position: 0px 3px;
            }


#main .radion {
    padding-left: 10px;
    background-position: bottom left;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

#main a.radion.selected {
    color: #034AF3;
}

#main .radion.end {
    -moz-border-radius: 0px 20px 20px 0px;
    -webkit-border-radius: 0px 20px 20px 0px;
    border-radius: 0px 20px 20px 0px;
}

#main .radion.start {
    -moz-border-radius: 20px 0px 0px 20px;
    -webkit-border-radius: 20px 0px 0px 20px;
    border-radius: 20px 0px 0px 20px;
}

#main .radion.whole {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

#main .radion.start.selected, #main .radion.end.selected {
    box-shadow: 0px 1px 2px #ccc inset;
    -moz-box-shadow: 0px 1px 2px #ccc inset;
}

#main .centering-outer {
    width: 100%;
    height: 100%;
    display: table;
    overflow: hidden;
    position: relative;
}

#main .centering-mid {
}

#main .no-messages {
    padding-top: 3em;
    text-align: center;
    font-size: 5em;
    text-transform: uppercase;
    text-shadow: 0.02em 0.02em 4px white, -0.02em -0.02em 3px black;
    color: #AAA;
}

.ajax-loader-bar {
    background: url("../content/ajax-loader.gif") transparent no-repeat center center;
    height: 20px;
}



/******************** component styles ********************/
.shadow {
    -moz-box-shadow: 4px 4px 10px #888;
    box-shadow: 4px 4px 10px #888;
}

.shadow-sml-ins {
    -moz-box-shadow: -1px -1px 3px #aaa inset;
    box-shadow: -1px -1px 3px #aaa inset;
}

.rnd-lrg {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.rnd-lrg-top {
    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
}


.rnd-lrg-top-left {
    -moz-border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    border-radius: 20px 0 0 0;
}

.rnd-lrg-top-right {
    -moz-border-radius: 0 20px 0 0;
    -webkit-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;
}

.rnd-lrg-btm {
    -moz-border-radius: 0px 0px 20px 20px;
    -webkit-border-radius: 0px 0px 20px 20px;
    border-radius: 0px 0px 20px 20px;
}

.rnd-med {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.rnd-med-top {
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.rnd-med-top-left {
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}

.rnd-med-top-right {
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

.rnd-med-btm-right {
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;
    border-radius: 0 0 10px 0;
}

.rnd-med-btm-left {
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
}

.rnd-sml {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.border-thin {
    border: solid 1px #aaa;
}

.fixed {
    font-family: courier, courier new, monaco, monospace;
}

.small {
    width: 28px;
}

.short, .chiko {
    width: 4em;
}

.date {
    width: 6em;
}

.tiny {
    width: 1em;
}

.medium {
    width: 16em;
}

.large {
    width: 30em;
}

.x-large {
    width: 40em;
}

.disabled-text {
    color: GrayText;
}

.numeric-data {
    text-align: right !important;
}

.w30 {
    width: 30px;
}

.w50 {
    width: 50px;
}

.w70 {
    width: 70px;
}

.w80 {
    width: 80px;
}

.w90 {
    width: 90px;
}

.w95 {
    width: 95px;
}

.w100 {
    width: 100px;
}

.w110 {
    width: 110px;
}

.w130 {
    width: 130px;
}

.w150 {
    width: 150px;
}

.w160 {
    width: 160px;
}

.w180 {
    width: 180px;
}

.w190 {
    width: 190px;
}

.w200 {
    width: 200px;
}

.w220 {
    width: 220px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w350 {
    width: 350px;
}

.w400 {
    width: 400px;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

/* Styles for padding & margin shortcuts
-----------------------------------------------------------*/

.p_0 {
    padding: 0px !important;
}

.p_1 {
    padding: 1px !important;
}

.p_2 {
    padding: 2px !important;
}

.p_3 {
    padding: 3px !important;
}

.p_4 {
    padding: 4px !important;
}

.p_5 {
    padding: 5px !important;
}

.p_6 {
    padding: 6px !important;
}

.p_7 {
    padding: 7px !important;
}

.p_8 {
    padding: 8px !important;
}

.p_9 {
    padding: 9px !important;
}

.p_10 {
    padding: 10px !important;
}

.p_15 {
    padding: 15px !important;
}

.p_20 {
    padding: 20px !important;
}

.p_30 {
    padding: 30px !important;
}

.pt_0 {
    padding-top: 0px !important;
}

.pt_1 {
    padding-top: 1px !important;
}

.pt_2 {
    padding-top: 2px !important;
}

.pt_3 {
    padding-top: 3px !important;
}

.pt_4 {
    padding-top: 4px !important;
}

.pt_5 {
    padding-top: 5px !important;
}

.pt_6 {
    padding-top: 6px !important;
}

.pt_7 {
    padding-top: 7px !important;
}

.pt_8 {
    padding-top: 8px !important;
}

.pt_9 {
    padding-top: 9px !important;
}

.pt_10 {
    padding-top: 10px !important;
}

.pt_15 {
    padding-top: 15px !important;
}

.pt_20 {
    padding-top: 20px !important;
}

.pb_0 {
    padding-bottom: 0px !important;
}

.pb_1 {
    padding-bottom: 1px !important;
}

.pb_2 {
    padding-bottom: 2px !important;
}

.pb_3 {
    padding-bottom: 3px !important;
}

.pb_4 {
    padding-bottom: 4px !important;
}

.pb_5 {
    padding-bottom: 5px !important;
}

.pb_6 {
    padding-bottom: 6px !important;
}

.pb_7 {
    padding-bottom: 7px !important;
}

.pb_8 {
    padding-bottom: 8px !important;
}

.pb_9 {
    padding-bottom: 9px !important;
}

.pb_10 {
    padding-bottom: 10px !important;
}

.pb_15 {
    padding-bottom: 15px !important;
}

.pb_20 {
    padding-bottom: 20px !important;
}

.mt_0 {
    margin-top: 0px !important;
}

.mt_1 {
    margin-top: 1px !important;
}

.mt_2 {
    margin-top: 2px !important;
}

.mt_3 {
    margin-top: 3px !important;
}

.mt_4 {
    margin-top: 4px !important;
}

.mt_5 {
    margin-top: 5px !important;
}

.mt_6 {
    margin-top: 6px !important;
}

.mt_7 {
    margin-top: 7px !important;
}

.mt_8 {
    margin-top: 8px !important;
}

.mt_9 {
    margin-top: 9px !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt_15 {
    margin-top: 15px !important;
}

.mt_20 {
    margin-top: 20px !important;
}

.mt_30 {
    margin-top: 30px !important;
}

.mb_0 {
    margin-bottom: 0px !important;
}

.mb_2 {
    margin-bottom: 2px !important;
}

.mb_3 {
    margin-bottom: 3px !important;
}

.mb_4 {
    margin-bottom: 4px !important;
}

.mb_5 {
    margin-bottom: 5px !important;
}

.mb_6 {
    margin-bottom: 6px !important;
}

.mb_7 {
    margin-bottom: 7px !important;
}

.mb_8 {
    margin-bottom: 8px !important;
}

.mb_9 {
    margin-bottom: 9px !important;
}

.mb_10 {
    margin-bottom: 10px !important;
}

.mb_15 {
    margin-bottom: 15px !important;
}

.mb_20 {
    margin-bottom: 20px !important;
}

.mb_30 {
    margin-bottom: 30px !important;
}

.ml_0 {
    margin-left: 0px !important;
}

.ml_1 {
    margin-left: 1px !important;
}

.ml_2 {
    margin-left: 2px !important;
}

.ml_3 {
    margin-left: 3px !important;
}

.ml_4 {
    margin-left: 4px !important;
}

.ml_5 {
    margin-left: 5px !important;
}

.ml_6 {
    margin-left: 6px !important;
}

.ml_7 {
    margin-left: 7px !important;
}

.ml_8 {
    margin-left: 8px !important;
}

.ml_9 {
    margin-left: 9px !important;
}

.ml_10 {
    margin-left: 10px !important;
}

.ml_15 {
    margin-left: 15px !important;
}

.ml_20 {
    margin-left: 20px !important;
}

.ml_30 {
    margin-left: 30px !important;
}

.mr_0 {
    margin-right: 0px !important;
}

.mr_1 {
    margin-right: 1px !important;
}

.mr_2 {
    margin-right: 2px !important;
}

.mr_3 {
    margin-right: 3px !important;
}

.mr_4 {
    margin-right: 4px !important;
}

.mr_5 {
    margin-right: 5px !important;
}

.mr_6 {
    margin-right: 6px !important;
}

.mr_7 {
    margin-right: 7px !important;
}

.mr_8 {
    margin-right: 8px !important;
}

.mr_9 {
    margin-right: 9px !important;
}

.mr_10 {
    margin-right: 10px !important;
}

.mr_15 {
    margin-right: 15px !important;
}

.mr_20 {
    margin-right: 20px !important;
}

.mr_30 {
    margin-right: 30px !important;
}

/******************** Existing Styles ********************/
a:link {
    color: #034af3;
    text-decoration: none;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1e6cff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}



header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

.summary h3 {
    margin: 20px;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#header {
    padding-bottom: 30px;
}

header, #header {
    position: relative;
    margin-bottom: -5px;
    color: #000;
    padding: 0;
}

    header h1, #header h1 {
        font-weight: bold;
        padding: 5px 0;
        margin: 0;
        color: #fff;
        border: none;
        line-height: 2em;
        font-size: 32px !important;
        text-shadow: 1px 1px 2px #111;
    }

#main {
    padding: 30px 30px 30px 30px;
    background-color: #FFFFFF;
}

footer,
#footer {
    background-color: #fff;
    color: #999;
    padding: 20px 0;
    text-align: center;
    line-height: normal;
    margin: 10px 0 30px 0;
    font-size: .9em;
}

.ui-ellipsis {
    overflow: hidden;
    white-space: nowrap;
}

.ui-ellipsis-helper {
    display: inline !important;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    list-style: none;
    margin-bottom: 10px;
    float: right;
    margin: 0;
    padding: 2px;
}

    ul#menu li {
        float: right;
        position: relative;
        z-index: 5;
        background-color: #1e1c1d;
        cursor: pointer;
    }

        ul#menu li:last-child {
            border-radius: 0.9em 0em 0em 0.9em;
            -webkit-border-radius: 0.9em 0em 0em 0.9em;
            -moz-border-radius: 0.9em 0em 0em 0.9em;
        }

        ul#menu li:first-child {
            border-radius: 0em 0.9em 0.9em 0em;
            -webkit-border-radius: 0em 0.9em 0.9em 0em;
            -moz-border-radius: 0em 0.9em 0.9em 0em;
        }

        ul#menu li:hover {
            z-index: 6;
        }

    ul#menu a {
        display: block;
        background-color: #1e1c1d;
        color: #fff;
        text-decoration: none;
        padding: 0em 0.5em;
        font-size: 0.8em;
        font-family: Helvetica, Sans-Serif;
        font-weight: bold;
        line-height: 1.8em;
        border-radius: 0.9em;
        -webkit-border-radius: 0.9em;
        -moz-border-radius: 0.9em;
        font-variant: small-caps;
        line-height: 24px;
        text-transform: uppercase;
        white-space: nowrap;
    }

        ul#menu a:hover {
            background-color: #f9cf2b;
            color: #ff0000;
            text-decoration: none;
        }

    ul#menu ul {
        background: #000;
        background: rgba(0, 0, 0, 0);
        list-style: none;
        position: absolute;
        width: auto;
        left: -9999px;
    }

        ul#menu ul li {
            padding-top: 1px;
            float: none;
        }

    ul#menu li:hover ul {
        left: -50px;
    }

    ul#menu li:hover a {
        background-color: #f9cf2b;
        color: #ff0000;
    }

    ul#menu li:hover ul a {
        background-color: #1e1c1d;
        color: #fff;
    }

    ul#menu li:hover ul li:hover a {
        background-color: #f9cf2b;
        color: #ff0000;
    }

    ul#menu ul li:first-child {
        border-radius: 0.9em 0.9em 0em 0em;
        -webkit-border-radius: 0.9em 0.9em 0em 0em;
        -moz-border-radius: 0.9em 0.9em 0em 0em;
    }

    ul#menu ul li:last-child {
        border-radius: 0em 0em 0.9em 0.9em;
        -webkit-border-radius: 0em 0em 0.9em 0.9em;
        -moz-border-radius: 0em 0em 0.9em 0.9em;
    }

    ul#menu .subitems.reports {
        margin-left: -155px !important;
        min-width: 220px;
    }

    ul#menu .subitems.admin {
        margin-left: -72px;
        min-width: 130px;
    }


.tt-menu-lhs {
    float: left;
    width: 855px;
    margin: -5px 0 0 10px;
    font-size: 15px;
}

    .tt-menu-lhs .lbl-employee-name {
        width: 120px;
        max-width: 120px;
        min-width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 0;
    }

.tt-menu-rhs {
    margin: 4px 35px 0 0;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
/*fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}*/

textarea {
    min-height: 75px;
    border: 1px solid silver;
}

    textarea:disabled {
        background-color: rgb(235, 235, 228);
    }

input[type="text"],
input[type="password"],
input[type="datetime"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    font-size: 1em;
    padding: 0px;
}

/* TABLE
----------------------------------------------------------*/

table {
    border-collapse: collapse;
    width: 100%;
}

    table td {
        padding: 5px;
    }

    table th {
        padding: 6px 5px;
        text-align: left;
        background-color: #f5bf2d;
        border: solid 1px #f5bf2d;
    }

    table tr.alternate {
        background-color: #ffffff;
    }

    table tr.selected {
        background-color: #FFE066;
    }

/* MISC  
----------------------------------------------------------*/
.elipsis {
    white-space: nowrap;
    overflow: hidden;
    width: 190px;
    display: block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.clear {
    clear: both;
    float: none !important;
}

.clearleft {
    clear: left;
    float: none !important;
}

.error {
    color: Red;
}

.font-red {
    color: red !important;
}

nav,
#menucontainer {
    margin-top: 15px;
    text-align: right !important;
}

.nav .dropdown-menu a {
    text-align: right !important;
}

div#title {
    display: block;
    width: auto;
    text-align: left;
}

#logindisplay {
    padding-top: 5px;
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: #E0E0E0;
    clear: both;
}

    #logindisplay a {
        display: inline-block;
        margin-bottom: -5px;
        width: 87px;
        height: 0px;
        overflow: hidden;
        padding-top: 21px;
        background: url('../content/logout.png') no-repeat scroll top right;
    }

        #logindisplay a:hover {
            background-position: bottom right;
        }


.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

.login {
    display: block;
    padding: 0px 14px;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
}

    .login .field-validation-error {
        display: block;
    }

.loginMessage {
    margin: 0px 10px;
}

.login .validation-summary-errors li {
    list-style: none;
    margin-left: -20px;
    font-weight: normal;
}

.login fieldset {
    border: none;
    width: 100%;
}

    .login fieldset .field {
        display: block;
        width: 100%;
        padding-bottom: 10px;
    }

    .login fieldset .editor-label {
        width: 265px;
    }

.login input[type="submit"],
.login input[type="button"] {
    font-size: 1.0em;
    padding: 0px 20px !important;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000 !important;
    background-color: #ffeeee !important;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
    margin: 1em 0 0 0;
}

.display-field,
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

    .text-box.multi-line {
        height: 6.5em;
    }

.tri-state {
    width: 6em;
}


/* _Layout */

#divMainHeader {
    width: auto;
    height: 156px;
    min-width: 600px;
    background-image: url('new-header-bg.png');
    background-repeat: no-repeat;
    margin-bottom: 15px;
}

#logo {
    margin: 5px 0px 0px 30px;
    border: 0px;
}

#customlogo {
    float: right;
    margin: 5px 30px 0px 0px;
}

.empty-layout {
    padding:20px;
}

.empty-layout .logo-container{
    display:block;
    text-align:center;
    margin-bottom:15px;
}

.empty-layout #logo {
    margin: 0px;
    border: 0px;
}

.empty-layout #customlogo {
    margin: 0px;
}


#expand {
    background: #FFD373;
    height: 10px;
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
    vertical-align: top;
    font-size: 7px;
}

/******************** Logon dialog *************************/

.ui-dialog .logon.sessionmessage {
    font-size: 10pt;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: dimGray;
    margin-top: 10px;
}

.ui-dialog fieldset.logon {
    color: dimGray;
    border: 0px;
    padding: 0px;
}

.ui-dialog .logon.errormessage {
    color: red;
    font-weight: bold;
}

/******************** Home/Landing Page ********************/
div.home {
    height: auto;
}

.home div {
    float: left;
}

.home .content {
    border: solid 1px #aaa;
    padding: 0px 0px 10px 0px;
    width: 550px;
    min-height: 400px;
}

.home .sideBar {
    border: 1px solid #aaa;
    width: 350px;
    float: right;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 12px;
    height: 637px;
}

.home .system-messages {
    margin-top: 30px;
    padding-bottom: 0px;
    width: 550px;
    min-height: 155px;
    font-family: Tahoma;
}

.home .no-system-messages {
    display: block;
    font-size: 3.5em;
    color: #CCC;
    font-family: Tahoma,Geneva,sans-serif;
    text-transform: capitalize;
    margin: 20px 0px 25px 60px;
}

.home .system-messages-disabled {
    display: inline-block;
    font-size: 3.5em;
    color: #CCC;
    font-family: Tahoma,Geneva,sans-serif;
    text-transform: capitalize;
    margin: 35px 0px 25px 35px;
}


.home .system-message {
    padding-top: 5px;
    padding-left: 15px;
}

    .home .system-message a {
        color: #437B99;
        width: 450px;
        display: block;
    }

.home .roster-summary {
    margin-top: 30px;
    padding-bottom: 15px;
    width: 550px;
    min-height: 175px;
    font-family: Tahoma;
}

    .home .roster-summary .tt-row {
        padding: 5px 10px;
        border-bottom: 1px dashed gray;
    }

        .home .roster-summary .tt-row .date {
            font-size: 12px;
            font-weight: bold;
            color: Black;
        }

        .home .roster-summary .tt-row .time {
            font-size: 11px;
            font-weight: bold;
        }

        .home .roster-summary .tt-row .left {
            width: 100px;
            float: left;
        }

        .home .roster-summary .tt-row .right {
            width: 425px;
            float: right;
        }

        .home .roster-summary .tt-row .unconfirmed img {
            position: relative;
            top: 3px;
            left: -5px;
        }

        .home .roster-summary .tt-row .unpublished img {
            position: relative;
            top: 3px;
            left: -5px;
        }

    .home .roster-summary .no-data {
        float: none;
        text-align: center;
        font-size: 3.5em;
        color: #CCC;
        font-family: Tahoma,Geneva,sans-serif;
        margin: 40px 0px 25px 0px;
    }

.home .leave-summary {
    margin-top: 30px;
    padding-bottom: 15px;
    height: auto;
    min-height: 175px;
    font-family: Tahoma;
}

    .home .leave-summary hr {
        margin: 5px 0 0 0;
    }

    .home .leave-summary .header {
        float: none;
        padding: 5px;
        text-align: justify;
    }

        .home .leave-summary .header .item {
            float: none;
            margin-left: 15px;
            display: inline-block;
            vertical-align: top;
        }

        .home .leave-summary .header .tt-label {
            font-weight: bold;
            color: Black;
            max-width: 275px !important;
            display: inline-block;
            height: 15px;
        }

        .home .leave-summary .header .value {
            padding-left: 2px;
            vertical-align: top;
        }

    .home .leave-summary .tt-row {
        padding: 5px 10px;
        border-bottom: 1px dashed gray;
    }

        .home .leave-summary .tt-row .date {
            font-size: 12px;
            font-weight: bold;
            float: none;
            padding: 0;
            margin: 0;
        }

        .home .leave-summary .tt-row .time {
            font-size: 11px;
            font-weight: bold;
        }

        .home .leave-summary .tt-row .left1 {
            width: 100px;
            float: left;
            text-align: left;
        }

        .home .leave-summary .tt-row .left2 {
            width: 100px;
            float: left;
            min-height: 28px;
            text-align: left;
        }

        .home .leave-summary .tt-row .right {
            width: 125px;
            float: right;
            min-height: 28px;
        }

    .home .leave-summary .no-data {
        float: none;
        text-align: center;
        font-size: 3.5em;
        color: #CCC;
        font-family: Tahoma,Geneva,sans-serif;
        margin: 20px 0px 15px 0px;
    }


#main .home div.no-messages {
    padding-top: 4em;
    color: #ccc;
    font-size: 4em;
    text-shadow: none;
}

.sideBar .new-message {
    background-color: transparent;
    padding: 10px 0px 0px 15px;
    width: 95%;
}

.sideBar .date,
.system-messages .date {
    float: right;
    color: #101010;
    font-weight: bold;
    font-size: 10px;
    margin-right: 10px;
    width: 70px;
    text-align: right;
    height: 24px;
}

.system-messages .date {
    display: run-in;
}

.system-messages .button {
    margin-top: -10px;
}

.new-message a:link {
    text-decoration: none;
}

.new-message .sender {
    display: inline-block;
    width: 13em;
    color: #000000;
}

.new-message .message-body {
    clear: both;
    display: block;
    width: auto;
    margin-right: 10px;
}

.new-message a {
    text-decoration: none;
}

    .new-message a:link,
    .new-message a:visited,
    .new-message a:hover,
    .new-message a:active {
        color: #437B99;
    }

.messages-container {
    overflow: auto;
    height: 500px;
}

.sideBar .more-messages {
    float: right;
    margin: 5px 15px 10px 0px;
}

.system-messages .more-messages {
    float: right;
    margin: 25px 15px 10px 0px;
}

.home .profile-image {
    padding: 0px;
    margin: 7px;
}

.home .profile-container {
    margin: 20px 10px 10px 15px;
}

.grey-border {
    padding: 1px;
    border-style: solid;
    border-color: Gray;
    margin: 5px;
    float: left;
    text-align: left;
    color: Black;
}

.column div {
    clear: both;
    display: block;
}

.column {
    padding-right: 20px;
    margin-left: 5px;
}

    .column.data {
        float: right;
        color: #0e0e0e;
    }

        .column.data div {
            float: right;
            text-align: right;
        }

.profile .details {
    border: solid 1px #aaa;
    margin-top: 20px;
    padding: 10px;
    display: block;
    width: 350px;
    min-height:170px;
    line-height: 1.8em;
}

.details .stats {
    width: 340px;
    color: #292929;
}

.details .contact {
    width: 340px;
    color: #292929;
}

.profile {
    margin-bottom: 5px;
}

.profile-alerts {
    height: auto;
    width: 515px;
    margin-left: 15px;
    padding: 10px 20px;
}

    .profile-alerts .button {
        margin-top: 5px;
    }

    .profile-alerts div {
        line-height: 1.8em;
        color: Black;
        float: none;
        display: inline-block;
        width: 100%;
    }

        .profile-alerts div.change-password,
        .profile-alerts div.update-details {
            display: inline;
            margin-right: 5px;
        }

    .profile-alerts .info {
        background-image: url("infoicons.png");
        background-repeat: no-repeat;
        padding-left: 20px;
        width: 20px;
    }

    .profile-alerts .alert {
        background-position: -10px center;
    }

    .profile-alerts .info {
        background-position: -10px center;
    }



/******************** Password edit screen ********************/
#password-edit p {
    width: 350px;
    margin: auto;
    display: block;
    font-size: 1.2em;
}

#ChangePasswordForm {
    width: 350px;
    margin: auto;
    display: block;
    font-size: 1.2em;
}

    #ChangePasswordForm .fields-container {
        padding-left: 75px;
    }

    #ChangePasswordForm input {
        padding: 5px;
    }

#ChangePassword {
    margin: 20px 0;
}

#ChangePasswordForm .validation-summary-errors,
#ChangePasswordForm ul {
    width: 350px !important;
}

#ChangePasswordForm .validation-summary-errors,
#ChangePasswordForm ul {
    font-size: 14.5px;
}

#ChangePasswordForm ul {
    list-style-type: none;
    padding: 0;
}

#password-edit .password-form.header {
    display: table;
    width: 100%;
}

    #password-edit .password-form.header > div {
        display: table-cell;
        vertical-align: middle;
    }

#password-edit .password-form .col {
    width: 30%;
}

#password-edit .password-form .col-middle {
    width: 350px;
}

#password-edit .password-form div.keyboard-choice {
    vertical-align: top;
    padding-top: 25px;
}

#password-edit .password-form .keyboard-choice > div {
    display: inline-block;
    cursor: pointer;
}

/******************** Messages List ********************/
#messages .msgUnread {
    color: red;
    font-style: italic;
}

#messages {
    min-height: 517px;
    position: relative;
    padding-bottom: 45px;
}

#messages table {
    overflow: hidden;
    table-layout: fixed;
    background: transparent;
    border-collapse: collapse;
    border: none;
    white-space: nowrap;
}

#messages tr {
    height: 30px;
    border-bottom: solid 1px #aaa;
}

#messages th {
    text-align: center;
    background: transparent;
    text-transform: uppercase;
    padding: 5px;
    vertical-align: top;
}

#messages th.archive {
    display: inline-block;
    width: 70px;
}

#messages tr.message-row:hover, .shift-bidding .message-row:hover + tr.conflict-row, .shift-bidding .shift-bidding-day tr.message-row:hover, .bid-manager-shift-table .shift-row:hover, .bid-manager-bid-table .bid-row:hover, .timesheet-authorisation-summary tbody tr:hover {
    background: rgba(230,230,80,0.4);
}

#messages td, #messages th {
    border: none;
}

#messages td a {
    height: 100%;
}

#messages td.archive {
    display: inline-block;
    width: 70px;
    text-align: center;
}

#messages td.sender a {
    display: inline-block;
    width: 110px;
}

#messages td.preview {
    overflow: hidden;
}

#messages td.preview a {
display: inline-block;
width: 520px;
overflow: hidden;
}

#messages td.preview a:visited {
    color: #034AF3;
}

#messages td.date {
    display: inline-block;
    width: 160px;
    text-align: center;
}

#messages h2 span {
    position: relative;
    left: 40px;
}

#messages h2 .filters {
    display: inline;
    float: right;
    margin-right: 10px;
}

#main .calendar h2 .filters {
    display: inline;
    float: left;
    position: absolute;
    left: 150px;
    vertical-align: top;
    text-align: left;
}

#main .calendar h2 .filters #showAllAvailability {
    width: 30%;
    text-align: center;
}

#main .calendar h2 .filters #showRecurringAvailability {
    width: 70%;
    text-align: center;
    display: block;
    float: right;
}

#main .calendar h2 .filters #showRosters {
    margin-top: 2px !important;
    width: 100%;
    text-align: center;
}

#messages h2 .filters .radion, #main .calendar h2 .filters .radion, #main .timesheet-authorisation .filters .radion {
    height: 18px;
    line-height: 15px;
    font-size: 10px;
    vertical-align: top;
}

#messages h2 .filters .radion.end, #main h2 .filters .radion.end, #main .timesheet-authorisation .filters .radion.end {
}

#messages h2.bottom {
    height: 43px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

#messages h2 .button.back {
    float: left;
    margin-left: 10px;
}

#messages h2 a.button.next {
    float: right;
    margin-right: 10px;
}

/******************** Message View *********************/
#message .message-body {
    margin: 20px;
}

#message .button {
    float: left;
    margin-left: 10px;
}

#message .read, #message .received {
    margin-left: 370px;
    width: 250px;
}

#message .read {
    margin-bottom: 10px;
}



/************* New Message Dialog *******************/
/*
#message #newMessageDialog {
    position: relative;
    width: 400px;
    margin: 0px auto 20px;
    padding: 10px;
}

#messages #newMessageDialog {
    margin: 20px auto;
}

#message #newMessageDialog table {
    border: none;
}
*/
#messages table {
    table-layout: auto;
}

#messages #showNewMessageForm {
    position: absolute;
    float: left;
    left: 370px;
}

#message {
    position: relative;
}

    #message #showReplyMessageForm {
        position: absolute;
        right: 10px;
        bottom: 15px;
        float: right;
    }

    #message #replyToMessage {
        float: right;
        top: -30px;
        position: relative;
        margin-right: 10px;
    }

#newMessageDialog {
    margin: 15px 0px;
}

    #newMessageDialog #newMessage-leftcol,
    #newMessageDialog #newMessage-rightcol,
    #newMessageDialog #newMessage-bottom,
    #newMessageDialog #recipients-container {
        float: left;
        position: relative;
    }

    #newMessageDialog #newMessage-leftcol {
        width: 220px;
        padding: 5px 20px 0 10px;
    }

    #newMessageDialog #newMessage-rightcol {
        width: 630px;
    }

    #newMessageDialog #recipients-container {
        margin-bottom: 10px;
    }

        #newMessageDialog #recipients-container #arrows {
            padding-top: 100px;
            height: 110px;
        }

    #newMessageDialog #newMessage-bottom {
        width: 800px;
    }

    #newMessageDialog h3 {
        margin: 0;
        padding: 10px;
        font-size: 1.1em;
    }

    #newMessageDialog label {
        font-weight: bold;
    }

    #newMessageDialog #newMessage-leftcol .ddl-container {
        clear: both;
    }

    #newMessageDialog #Message {
        resize: none;
        width: 895px;
        height: 120px;
    }

    #newMessageDialog #newMessage-bottom #buttons {
        margin-top: 10px;
    }

/******************* Unsorted ********************/
.comments {
    background-image: url('speech_bubble_icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

.no-comments {
    background-image: url('disabled-speech_bubble_icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

td.approve {
    background-image: url('tick.gif');
    background-repeat: no-repeat;
    background-position: center;
}

td.approved {
    background-image: url('disabled-tick.png');
    background-repeat: no-repeat;
    background-position: center;
}

.read a {
    color: dimgray !important;
}

div.shift-bidding {
    display: inline-block;
    position: relative;
}

span.rostered-event {
    font-weight: bold;
}



/**********************Employee View/Edit ***************/
.block h2 {
    width: 100%;
}

.employee-details input[type="submit"] {
    float: right;
    margin-right: 30px;
}

.employee-details .block, .shift-details .block {
    float: left;
    /*width :48%;*/
    height: auto;
    margin: 0px 0px 20px 0px;
    clear: none;
    padding-bottom: 10px;
}

    .employee-details .block .tt-row {
        margin-left: 10px;
    }

.employee-details div.blockright {
    float: right;
}

.employee-details .display-label {
    width: 100px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: dimgray;
    padding-left: 10px;
    font-weight: bold;
    display: inline-block;
    margin-top: 0px;
}

.employee-details .display-field.no-border {
    width: 320px;
    border: none;
}

.employee-details .display-field {
    display: inline-block;
    color: #333;
    border-bottom: dashed 1px #AAA;
    min-width: 320px;
}

    .employee-details .display-field input[type="text"] {
        width: 290px;
    }

.ui-datepicker-trigger {
    cursor: pointer;
}

.employee-details .display-field input.hasDatepicker {
    width: 100px;
}

.employee-details .left-col,
.employee-details .right-col {
    float: left;
    position: relative;
    width: 470px;
}

.employee-details.view .tt-row {
    cursor: pointer;
}

.employee-details div.pending {
    margin-bottom: 25px;
}

    .employee-details div.pending div {
        text-align: center;
        color: Red;
        padding-top: 15px;
        padding-bottom: 20px;
    }

.employee-details .note {
    color: Red;
}

    .employee-details .note.requires-approval {
        float: right;
        padding-top: 5px;
        margin-right: 20px;
    }

#Detail_PhoneExt, #Detail_Phone {
    display: block;
}

#main .employee-details a.button.edit {
    margin-left: 40px;
}

/******************Clocking **************************/
#clocking .button {
    height: 51px !important;
    line-height: 51px !important;
}

    #clocking .button.clock {
        background-position: 0px -525px, 50% 50%;
    }

        #clocking .button.clock:hover {
            background-position: 0px -561px, 50% 50%;
        }

.no-multiplebgs #clocking .button.clock {
    background-position: 0px -525px;
}

    .no-multiplebgs #clocking .button.clock:hover {
        background-position: 0px -561px;
    }

#clocking .button.break {
    background-position: 0px -447px, 50% 50%;
}

    #clocking .button.break:hover {
        background-position: 0px -483px, 50% 50%;
    }

.no-multiplebgs #clocking .button.break {
    background-position: 0px -447px;
}

    .no-multiplebgs #clocking .button.break:hover {
        background-position: 0px -483px;
    }

#clocking .button.add {
    background-position: 0px -905px, 50% 50%;
}

    #clocking .button.add:hover {
        background-position: 0px -905px, 50% 50%;
    }

.no-multiplebgs #clocking .button.add {
    background-position: 0px -905px;
}

    .no-multiplebgs #clocking .button.add:hover {
        background-position: 0px -905px;
    }

#clocking .button.next {
    background-position: 0px -96px, 50% 50%;
}

    #clocking .button.next:hover {
        background-position: 0px -132px, 50% 50%;
    }

.no-multiplebgs #clocking .button.next {
    background-position: 0px -96px;
}

    .no-multiplebgs #clocking .button.next:hover {
        background-position: 0px -132px;
    }

#clocking .button.next.disabled {
    background-position: 0px -1441px, 50% 50%;
}

    #clocking .button.next.disabled:hover {
        background-position: 0px -1441px, 50% 50%;
    }

.no-multiplebgs #clocking .button.next.disabled {
    background-position: 0px -1431px;
}

    .no-multiplebgs #clocking .button.next.disabled:hover {
        background-position: 0px -1431px;
    }

#clocking .button.next.disabled {
    background-position: 0px -1431px, 50% 50%;
}

    #clocking .button.next.disabled:hover {
        background-position: 0px -1431px, 50% 50%;
    }

#clocking .button.save {
    background-position: 0px -310px, 50% 50%;
}

    #clocking .button.save:hover {
        background-position: 0px -344px, 50% 50%;
    }

#clocking .button.tick {
    background-position: 0px -792px, 50% 50%;
}

    #clocking .button.tick:hover {
        background-position: 0px -792px, 50% 50%;
    }

.no-multiplebgs #clocking .tick {
    background-position: 0px -792px;
}

    .no-multiplebgs #clocking .tick:hover {
        background-position: 0px -792px;
    }

#clocking .button.cross {
    background-position: 0px -871px, 50% 50%;
}

    #clocking .button.cross:hover {
        background-position: 0px -871px, 50% 50%;
    }

.no-multiplebgs #clocking .cross {
    background-position: 0px -871px;
}

    .no-multiplebgs #clocking .cross:hover {
        background-position: 0px -871px;
    }

#clocking .button.save {
    background-position: 0px -309px, 50% 50%;
}

    #clocking .button.save:hover {
        background-position: 0px -344px, 50% 50%;
    }

    #clocking .button.save.disabled:hover {
        background-position: 0px -308px, 50% 50%;
    }

.no-multiplebgs #clocking .button.save {
    background-position: 0px -309px;
}

    .no-multiplebgs #clocking .button.save:hover {
        background-position: 0px -344px;
    }

/********************Timesheet View/Edit ***********/
.timesheet tbody > tr {
    font-family: Helvetica,Sans-Serif;
    font-size: 0.8em;
}



    .timesheet tbody > tr:hover {
        background-color: #EDEDED;
        color: Red;
        border-style: double;
        line-height: 2em;
        cursor: pointer;
    }

    .timesheet tbody > tr:hover {
        background-color: #EDEDED;
        color: blue;
        border-style: double;
        line-height: 2em;
        cursor: pointer;
    }

.timesheet div {
    float: left;
    background-color: #EDEDED;
    color: Black;
}

.timesheetEditRow {
    width: 720px;
    padding-top: 5px;
}

.timesheet textarea {
    height: 2em;
    width: 250px;
    font-size: 1em;
    text-align: right;
}

.timesheet input[type="text"] {
    border: 1px solid #ccc;
    padding: 2px 10px 2px 0px;
    font-size: 1em;
    color: #444;
    width: 100px;
}

.timesheet select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1em;
    color: #444;
}

.timesheet input[type="submit"] {
    font-size: 1em;
    padding: 0px;
}

.timesheet-row-edit tbody > tr:hover {
    background-color: #EDEDED;
    color: black;
    border-style: none;
    line-height: 1em;
    cursor: pointer;
    border-style: none;
    line-height: 1.4em;
}

.timesheet-row-edit {
    background-color: #EDEDED;
    color: black;
    width: 100%;
    border-style: none;
    line-height: 1.4em;
    cursor: pointer;
    border-style: none;
}

table.timesheet-review,
form.timesheet-review {
    width: 918px;
    margin: 10px;
}

.timesheet-edit textarea {
    resize: none;
}

/*******  Roster Grid  ******************************************************************/









/*************Timesheet grid **********************/

.grid-monthday {
    text-align: right;
    font-size: 9px;
    float: right;
}

.shift-time {
    white-space: nowrap;
    padding-bottom: 5px;
}

#submit, #submit-bids {
    float: right;
    padding-right: 10px;
    padding-bottom: 10px;
}


/***********************************Shift Bidding********************************************/
.shift-bidding {
    display: inline-block;
}

    .shift-bidding tr.conflict-row td {
        cursor: default;
    }

    .shift-bidding .no-messages {
        padding-bottom: 3em;
    }

        .shift-bidding .no-messages .details {
            font-size: 0.4em;
        }

            .shift-bidding .no-messages .details .nextmonth {
                color: #EEAA44;
                text-shadow: -0.02em -0.02em 3px #EEE044;
            }

    .shift-bidding .table /*a div table not a table element...*/ {
        float: left;
        display: table;
        padding: 5px 15px 5px 5px;
    }

    .shift-bidding .date-group {
        cursor: default;
    }

    .shift-bidding.manager .bid-group, .dategroup h2 {
        cursor: pointer;
    }

    .shift-bidding table {
        border: none;
        table-layout: auto;
        width: 870px;
    }

    /*#shift-bidding td {
    width: 20px;
}

    #shift-bidding td + td {
        width: 200px;
    }

        #shift-bidding td + td + td {
            width: 290px;
        }

            #shift-bidding td + td + td + td {
                width: 100px;
            }

                #shift-bidding td + td + td + td + td {
                    width: 100px;
                }

                    #shift-bidding td + td + td + td + td + td {
                        width: 100px;
                    }

                        #shift-bidding td + td + td + td + td + td + td {
                            width: 100px;
                        }

#shift-bidding .col1 {
    width: 20px;
}

#shift-bidding .col2 {
    width: 210px;
}

#shift-bidding .col3 {
    width: 55px;
}

#shift-bidding .col4 {
    width: 120px;
}

#shift-bidding .col5 {
    width: 120px;
}

#shift-bidding .col6 {
    width: 120px;
}

#shift-bidding .col7 {
    width: 120px;
}*/

    .shift-bidding .bid {
        overflow: visible;
        position: relative;
    }

    /*.shift-bidding .bid-image {
    position: absolute;
    right: 25px;
    top: -22px;
}*/

    .shift-bidding td.bid-conflicts {
        padding: 0px;
    }


    /*#shift-bidding td.bid-conflicts td.col1 { width: 20px; }
#shift-bidding td.bid-conflicts td.col2 { width: 183px; }
#shift-bidding td.bid-conflicts td.col3 { width: 210px; }
#shift-bidding td.bid-conflicts td.col4 { width: 120px; }
#shift-bidding td.bid-conflicts td.col5 { width: 120px; }
#shift-bidding td.bid-conflicts td.col6 { width: 120px; }*/

    .shift-bidding .option {
        display: table-row;
    }

    .shift-bidding .search-form td {
        padding: 0px;
    }

    .shift-bidding .search-form {
        margin: 10px;
    }

    .shift-bidding select.medium {
        width: 225px;
    }

input.date-picker {
    width: 6em;
}

input[data-val-date] {
    width: 6em;
}

.display-block {
    display: inline-block;
}

.submit-search {
    margin: 5px;
}

.bid-summary {
    display: none;
    border: Red solid 1px;
    width: 95.5%;
    margin: 2px 20px;
}

    .bid-summary .hint {
        margin-left: 20px;
    }

.shift-bidding .summary {
    display: none;
    overflow: visible;
    white-space: nowrap;
    padding-left: 20px;
    padding-bottom: 2px;
    color: Black;
}

.shift-bidding tr.conflicting {
    background-color: #f69b7f;
}

.shift-bidding .column {
    display: table-column;
}

.shift-bidding .legend {
    padding-right: 5px;
}

.shift-bidding .bullet {
    display: inline-block;
    border: 20px thick #f69b7f;
    height: 10px;
    width: 10px;
    background-color: #f69b7f;
}

.shift-bidding .legend {
    float: left;
    padding-left: 20px;
}


.shift-bidding .searchButton {
    float: right;
    padding-top: 10px;
}

#submit-swaps {
    display: none;
}

#submit-bids {
    float: right;
    padding-right: 10px;
    padding-bottom: 10px;
}



.shift-bidding .date-group td {
    /*	border-top : 1px solid black;*/
    background-color: #FFD373;
    border-bottom: 10px solid white;
    font-family: Sans-Serif;
}



.shift-bidding th {
    background-color: transparent;
    height: 0px;
    line-height: 0px;
    border-style: none;
}

.shift-bidding td {
    border-bottom: none;
    border-top: none;
}

.shift-group {
    display: none;
}

.shift-bidding .collapsed {
    display: inline;
}

.shift-bidding .expanded {
    display: none;
}

    .shift-bidding .collapsed:hover, .shift-bidding .expanded:hover, .shift-bidding-day tbody tr:hover, .shift-bidding-day .request {
        cursor: pointer;
    }

.shift-bidding .content-arrows {
    display: inline-block;
    padding-left: 48%;
    width: 52%;
    cursor: pointer;
}


.shift-bidding .manager .shift-group table {
    background-color: #EDEDED;
}

span.rostered-event {
}

.bid-manager input.hasDatepicker {
    width: 90px;
}

.bid-manager-table {
    width: auto;
}

.shift-bidding table, .shift-bidding td {
    border: none;
}

.shift-bidding .manager .date-group td {
    background-color: #FFD373;
    border-bottom: none;
    border-top: 5px solid white;
    font-family: Sans-Serif;
    color: #696969;
}

table.bid-manager-shift-table {
    margin: 0 10px;
    width: 895px;
}

table.bid-manager-bid-table {
    width: 100%;
    border: none;
}

/*889BD6 B6BED6 FFD373  */

.shift-bidding .manager tr.bid-row {
    background-color: #D3E1E8;
}

.shift-bidding .manager .basic-table {
    border-collapse: collapse;
}

.shift-bidding .shift-bidding-day {
    padding: 10px;
    margin: 20px;
    font-size: 12px;
}

    .shift-bidding .shift-bidding-day .date {
        height: 30px;
        font-size: 1.5em;
        text-decoration: underline;
        width: 300px;
    }

    .shift-bidding .shift-bidding-day .date-diff {
        color: Red;
    }

        .shift-bidding .shift-bidding-day .date-diff:hover {
            font-style: italic;
            cursor: help;
        }

.shift-bidding {
    min-width: 938px;
}

.bid-list-for-day {
    width: 916px;
    font-size: 12px;
    margin: 10px;
}

#contact-details-container div {
    display: inline-block;
    vertical-align: top;
    padding: 5px;
}

.shift-bidding-table div.grid-shift-container {
    width: 865px;
}

.bid-manager-shift-table div.grid-shift-container {
    width: 888px;
}

.shift-bidding div.k-widget.k-grid .k-grid-header {
    padding: 0 !important;
}

.shift-bidding div.k-widget.k-grid .k-grid-content {
    height: auto !important;
    overflow-y: visible;
}

.shift-bidding .k-grid a:link,
.shift-bidding .k-grid a:visited {
    color: #2e2e2e;
}

/********************   Availability Calendar   ********************/
#availability .header {
    text-align: center;
    position: relative;
    border-bottom: 1px solid #aaa;
    color: #444A51;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
}

    #availability .header h2,
    #availability .header h5 {
        border-bottom: none;
        padding: 0;
        margin: 0;
    }

    #availability .header .filters .radion {
        height: 22px;
        line-height: 20px;
        font-size: 10px;
    }

    #availability .header .employeeSelectList select {
        max-width: 250px;
        margin-bottom: 10px;
    }


#availability.calendar {
    cursor: default;
}

#availability .cell {
    border: solid 1px #CCC;
}

#availability.calendar h2, .shift-bidding h2 {
    position: relative;
}

    #availability.calendar h2.by-employee {
        height: auto;
        line-height: 2em;
        position: relative;
    }

    #availability.calendar h2 span.edit.button {
        margin-right: 1em;
        position: absolute;
        right: 130px;
    }

    #availability.calendar h2 span.employeeSelectList {
        font-size: 0.75em;
        margin-right: 1em;
        position: absolute;
        right: 0px;
    }

    #availability.calendar h2 span.legend.button {
        position: relative;
        left: 0px;
    }

    #availability.calendar h2 a.back.button, .shift-bidding h2 a.back.button {
        margin-left: 1em;
        position: absolute;
        left: 0px;
    }

    #availability.calendar h2 a.next.button, .shift-bidding h2 a.next.button {
        margin-right: 1em;
        position: absolute;
        right: 0px;
        top: 5px;
    }

#availability.calendar .body table {
    border: none;
    width: 935px;
    margin-bottom: 1em;
}

#availability.calendar table th {
    background: transparent;
    border: none;
}

#availability.calendar table td {
    border: none;
    width: 130px;
    height: 100px;
}

#availability.calendar .days div {
    font-size: 1.8em;
    border-radius: 0px;
    font-variant: small-caps;
    text-align: center;
    border-bottom: solid 2px #aaa;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
}

#availability.calendar div.cell.grayout {
    background: rgba(170,170,170,1); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
    -moz-box-shadow: 0px 0px 3px #999 inset;
    box-shadow: 0px 0px 3px #999 inset;
}

#availability.calendar div.cell.blackout {
    background: rgba(102,102,102,1); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(62,62,62,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(62,62,62,1)), color-stop(100%,rgba(102,102,102,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(62,62,62,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(62,62,62,1) 0%,rgba(102,102,102,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(62,62,62,1) 0%,rgba(102,102,102,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(62,62,62,1) 0%,rgba(102,102,102,1) 100%); /* W3C */
    -moz-box-shadow: 0px 0px 3px #999 inset;
    box-shadow: 0px 0px 3px #999 inset;
    color: #fff;
}

#availability.calendar div.cell.selected {
    background: rgba(180,180,180,1); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(180,180,180,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,180,180,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(180,180,180,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(180,180,180,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(180,180,180,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(180,180,180,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    -moz-box-shadow: 0px 0px 3px #999 inset;
    box-shadow: 0px 0px 3px #999 inset;
}

    #availability.calendar div.cell.selected .day {
        text-shadow: 0.02em 0.02em 0.02em #aaa, -0.02em -0.02em 0.02em #ddd;
    }

.calendar .cell {
    cursor: pointer;
    position: relative;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 120px;
}

#availability.calendar div.cell.holiday {
    background-image: url('../content/lockouts.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    border-color: #dbdb00;
}

#availability.calendar .cell .times {
    color: #777;
    position: absolute;
    padding: 4px;
    margin-left: 2px;
    line-height: 1.65em;
    font-weight: bold;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#availability.event-availability .cell .times {
    line-height: 1.35em;
}

#availability.calendar .cell .times div {
    padding-left: 2px;
    height: 20px;
}

    #availability.calendar .cell .times div.no-overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 115px;
    }

    #availability.calendar .cell .times div.action-type {
        margin-left: 27px;
        width: 92px;
        padding-right: 2px;
    }

    #availability.calendar .cell .times div.avail-time {
        padding-left: 27px;
        width: 115px;
    }

    #availability.calendar .cell .times div.event-description {
        height: 60px;
        overflow: hidden;
    }

    #availability.calendar .cell .times div.event-description-more {
        float: right;
        padding-top: 4px;
        color: blue;
        text-shadow: none;
        font-weight: normal;
    }

.blockouts-tooltip {
    max-width: 800px;
}

#availability.calendar .cell:hover .day {
}

#availability.calendar div.cell.weekend .day,
#availability.calendar div.cell.blackout.weekend .day,
#availability.calendar div.cell.grayout.weekend .day {
    color: #C99;
}

#availability.calendar div.cell.selected.weekend .day,
#availability.calendar div.cell.blackout.weekend .day,
#availability.calendar div.cell.grayout.weekend .day {
    text-shadow: 0.02em 0.02em 0.02em #A77, -0.02em -0.02em 0.02em #EBB;
}

#availability.calendar div.cell.grayout.grayout-maxed .message {
    color: red;
    font-weight: bold;
}

#availability.calendar div.cell .message .multiple-blockouts {
    color: white;
}

#availability.calendar .cell.overlap .day {
    color: #B8B8B8;
    text-shadow: none;
}

#availability.calendar .cell.overlap.selected .day {
    color: #B8B8B8;
    text-shadow: none;
}

#availability.calendar div.cell.overlap.selected.weekend .day {
    color: #C99;
    text-shadow: none;
}

#availability.calendar .cell.selected .times, #availability.calendar .cell.blackout .times {
    color: #FFFFFF;
    text-shadow: none;
}

#availability.calendar .cell .times .AVAIL, .AVAIL {
    background: url('../content/availicons16.png') 4px 3px no-repeat;
    /*text-shadow: 0 0 8px #4C4;*/
}

#availability.calendar .cell .times .UNAVAIL, .UNAVAIL {
    background: url('../content/availicons16.png') 4px -23px no-repeat;
    /*text-shadow: 0 0 8px #C44;*/
}

#availability.calendar .cell .times .PREFERRED, .PREFERRED {
    background: url('../content/availicons16.png') 4px -49px no-repeat;
    /*text-shadow: 0 0 8px #CC4;*/
}

#availability.calendar .cell .times .LEAVE, .LEAVE {
    background: url('../content/availicons16.png') 4px -49px no-repeat;
    /*text-shadow: 0 0 8px #88E;*/
}

#availability.calendar .cell .times .EVENT {
    background: url('../content/icons/famfamfam/calendar.png') 4px 3px no-repeat;
    padding-left: 25px;
    display: inline-block;
    /*text-shadow: 0 0 8px #88E;*/
}

    #availability.calendar .cell .times .EVENT span {
        width: 90px;
        max-width: 90px;
        min-width: 90px;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 1.3em;
        white-space: nowrap;
    }

#availability.calendar .cell .times .more-events {
    color: blue;
}

    #availability.calendar .cell .times .more-events span:hover {
        text-decoration: underline !important;
    }

#events-dialog .strong {
    font-weight: bold;
}

#availability.calendar .cell .message {
    top: 75px;
    position: absolute;
    margin-left: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100px;
}

    #availability.calendar .cell .message.more {
        font-weight: bold;
        font-style: italic;
    }

#notices #availability span.calendar.LEAVE {
    background: url('../content/buttons.png') 0px -1285px no-repeat;
    padding-top: 20px;
    padding-left: 30px;
}

#availability.calendar .cell .times .LEAVE.APPROVED {
    background: url('../content/buttons.png') 0px -1240px no-repeat;
}

#availability.calendar .cell .times .LEAVE.REQUESTED {
    background: url('../content/buttons.png') 0px -1270px no-repeat;    
}

#availability.calendar .cell .times .LEAVE.CANCELLATION-REQUESTED {
    background: url('../content/cancel_leave_request.png') no-repeat;
}

#availability.calendar .cell .times .LEAVE.DECLINED,
#availability.calendar .cell .times .LEAVE.CANCELLED {
    background: url('../content/buttons.png') 0px -1300px no-repeat;
}


#availability.calendar .cell .times .more-requests {
    position: relative;
    top: 45px;
    left: 60px;
}

#availability.calendar .cell .day.ofweek {
    text-align: right;
    font-size: 4em;
    line-height: 2em;
}

#availability.calendar .cell .day {
    color: #CCC;
    font-size: 5em;
    font-weight: bold;
    text-align: right;
    line-height: 1.2em;
    text-shadow: -0.02em -0.02em 0.02em #aaa, 0.02em 0.02em 0.03em #ddd;
    margin-right: 5px;
    padding-top: 0.3em;
}

.no-multiplebgs #availability.calendar .cell.blackout {
    background-image: url('../content/lockouts.png');
    background-position: 94px 67px;
    background-repeat: no-repeat;
    border-color: #1e1e1e;
    color: #CCC;
}

.no-multiplebgs #availability.calendar .cell.grayout {
    background-image: url('../content/lockouts.png');
    background-position: -54px 67px;
    background-repeat: no-repeat;
    border-color: #747474;
    color: #CCC;
}

.roster-item-p {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.3em;
    white-space: nowrap;
}

div.calendar .roster-item {
    font-weight: normal;
}

div.calendar .more-shifts {
    position: absolute;
    bottom: 3px;
    left: 5px;
    width: 100%;
    font-weight: normal;
    line-height: 1.3em;
}

div.calendar .roster-item.info div {
    background-image: url('info.png');
    background-repeat: no-repeat;
    background-position: top right;
    height: 80px;
}

/* Availability Legend styles */
.availabilitylegend {
    width: 100%;
}

    .availabilitylegend fieldset {
        display: inline;
        width: 45%;
        height: 70px;
        line-height: 1.5em;
        border-radius: 5px;
        -moz-border-radius: 5px;
    }

        .availabilitylegend fieldset.availinfo {
            float: left;
        }

        .availabilitylegend fieldset.lockouts {
            float: right;
        }

    .availabilitylegend .info {
        padding-left: 25px;
    }

/* END Availaibility Legend styles */

/* Availability Edit Dialog */

.avheader {
}

.calendar-edit .ui-widget-header.ui-dialog-titlebar {
    background: none;
    padding: 5px 0px 5px 0px;
    border: none;
    color: #000;
    font-variant: small-caps;
    text-align: center;
    font-size: 1.5em;
    color: #696969;
    text-shadow: 1px 1px 1px #CCC;
}

    .calendar-edit .ui-widget-header.ui-dialog-titlebar span {
        float: none;
        border-bottom: solid 2px #CCC;
    }

    .calendar-edit .ui-widget-header.ui-dialog-titlebar a {
        display: none;
    }

    .calendar-edit .ui-widget-header.ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-text {
        display: none;
    }

.calendar-edit.ui-dialog form.ui-dialog-content {
    overflow: hidden;
}

.calendar-edit fieldset {
    background: #E5E5E5;
    font-variant: small-caps;
    font-family: "Trebuchet MS";
    border: solid 2px #CCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    width: 440px;
    padding: 0 0 0.5em 1em !important;
    margin-bottom: 20px;
}

    .calendar-edit fieldset.comment {
        width: 445px;
    }

        .calendar-edit fieldset.comment textarea {
            width: 290px; /* Fixes FF textarea size */
            resize: none;
        }

.calendar-edit legend {
    text-align: left;
    background: #EEE;
    border-radius: 5px;
    -moz-border-radius: 5px;
    border: solid 2px #CCC;
    color: #696969;
    text-shadow: 1px 1px 1px #CCC;
    font-size: 1.4em !important;
    padding: 3px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 2px !important;
}

.calendar-edit .balances hr {
    margin: 5px 0 0 0;
}

.avbutton.disabled {
    color: #DDD;
    cursor: default;
}

.avbutton.avail {
    background: #8E8 url('../content/availbuttons.png') no-repeat scroll 110px 0px;
    border-color: #4C4;
}

.avbutton.prefer {
    background: #EE8 url('../content/availbuttons.png') no-repeat scroll 110px -42px;
    border-color: #CC4;
}

.avbutton.unavail {
    background: #E88 url('../content/availbuttons.png') no-repeat scroll 110px -85px;
    border-color: #C44;
}

.avbutton.leave {
    background: #88E url('../content/availbuttons.png') no-repeat scroll 110px -127px;
    border-color: #44C;
}

.avbutton.leaveadvance {
    text-align: left;
    margin-top: 5px;
    margin-left: 10px;
}

.leavetypes {
    width: 220px;
    margin-left: 20px;
    margin-top: 8px;
}

.avbuttons {
    text-align: center;
}

    .avbuttons fieldset.buttons {
        margin-bottom: 0px;
    }

    .avbuttons.primary {
        float: left;
        text-align: left;
        display: inline-block;
    }

        .avbuttons.primary .leavehours {
            float: left;
            text-align: left;
            margin: 11px 3px;
        }

            .avbuttons.primary .leavehours .tt-label {
                display: inline-block;
                width: 130px;
            }

            .avbuttons.primary .leavehours .value {
                display: inline-block;
                width: 60px;
                text-align: right;
            }

                .avbuttons.primary .leavehours .value.total,
                .avbuttons.primary .leavehours .value.totalValue {
                    border-top: 1px solid gray;
                }



    .avbuttons.comment {
        float: right;
    }

    .avbuttons.leave {
        width: 865px;
    }

    .avbuttons .button.leave {
        display: inline-block !important;
        margin-top: 3px;
    }

#availability-dates {
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #666666;
}

table.aveditor {
    width: 910px;
    border: none;
    table-layout: fixed;
    margin-bottom: 10px;
}

    table.aveditor th {
        padding: 3px 0px 3px 0px;
        font: 1.1em "Helvetica";
        font-weight: bold;
        text-align: left;
        border: none;
        background: transparent;
    }

.avselector {
    height: 30px;
    padding: 0px;
    cursor: pointer;
}

table.aveditor div.avselector.start {
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    margin-left: 1px;
}

table.aveditor div.avselector.end {
    border-radius: 0px 7px 7px 0px;
    -moz-border-radius: 0px 7px 7px 0px;
    margin-right: 1px;
}

    table.aveditor div.avselector.end.start {
        border-radius: 7px;
        -moz-border-radius: 7px;
    }

table.aveditor td {
    width: 15px;
    padding: 0px;
    border: none;
}

.avselector.inactive {
    background: #eee !important;
    border-left: 1px solid #ddd !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    cursor: default;
}

    .avselector.inactive.end {
        border-right: 1px solid #ddd !important;
    }

.avselector.AVAIL {
    background: #4c4;
    border-left: 1px solid #292;
    border-top: 1px solid #292;
    border-bottom: 1px solid #292;
}

    .avselector.AVAIL.selected {
        background: #292;
        border-color: #161;
        border-left: none;
    }

    .avselector.AVAIL.end {
        border-right: 1px solid #292;
    }

.avselector.PREFERRED {
    background: #cc4;
    border-left: 1px solid #992;
    border-top: 1px solid #992;
    border-bottom: 1px solid #992;
}

    .avselector.PREFERRED.selected {
        background: #992;
        border-color: #661;
        border-left: none;
    }

    .avselector.PREFERRED.end {
        border-right: 1px solid #992;
    }

.avselector.UNAVAIL {
    background: #c44;
    border-left: 1px solid #922;
    border-top: 1px solid #922;
    border-bottom: 1px solid #922;
}

    .avselector.UNAVAIL.selected {
        background: #D22;
        border-color: #611;
        border-left: none;
    }

        .avselector.UNAVAIL.selected.start {
            border-left: 1px solid #611;
        }

    .avselector.UNAVAIL.end {
        border-right: 1px solid #922;
    }

.avselector.LEAVE {
    background: #88E;
    border-left: 1px solid #449;
    border-top: 1px solid #449;
    border-bottom: 1px solid #449;
}

    .avselector.LEAVE.selected {
        background: #449;
        border-color: #116;
        border-left: none;
    }

    .avselector.LEAVE.end {
        border-right: 1px solid #449;
    }

    .avselector.disabled {
    height: 30px;
    padding: 0px;
    cursor: not-allowed !important;
}


.avbuttons .buttons .leave-fromdate,
.avbuttons .buttons .leave-todate {
    float: left;
    text-align: left;
    width: 200px;
    margin: 8px 5px 10px 0;
}

.avbuttons.primary .leavetypes-container {
    float: left;
    width: 210px;
}

.avbuttons.primary .button-container {
    float: left;
    width: 185px;
    margin: 5px;
    padding-left: 10px;
    border-left: 1px dashed silver;
}

.avbuttons .buttons .leavetypes {
    margin: 10px 0px;
}

.availability-details .dateSelect {
    text-align: left;
}

    .availability-details .dateSelect select {
        margin-top: 10px;
    }

/* END Availability Edit Dialog */

.bid-list-for-day h2 {
    line-height: 1em;
}

    .bid-list-for-day h2:hover {
        cursor: pointer;
    }

/***********************************Event Availability Calendar*******************************************************/



.availability-grid tbody td.soft.full {
    /*background-image:url('availabilitycell_a.png');
 	background-repeat:repeat-x;*/
    background-image: url('availabilitycell_full.png');
    background-repeat: no-repeat;
}

.availability-grid tbody td.soft.part {
    background-image: url('availabilitycell_partial.png');
    background-repeat: no-repeat;
    /*	background-image:url('availabilitycell_p.png');
 	background-repeat: repeat-x;*/
}

.availability-grid tbody td.soft.none {
    background-image: url('availabilitycell.png');
    background-repeat: repeat-x;
}

.availability-grid tbody td.full .cell {
    -webkit-box-shadow: inset 0px 0px 5px 2px green;
    box-shadow: inset 0px 0px 5px 2px green;
}

.availability-grid tbody td.part .cell {
    -webkit-box-shadow: inset 0px 0px 5px 2px #F5BF2D;
    box-shadow: inset 0px 0px 5px 2px #F5BF2D;
}

.availability-grid tbody td.none .cell {
    -webkit-box-shadow: inset 0px 0px 5px 2px #C70038;
    box-shadow: inset 0px 0px 5px 2px #C70038;
}

.availability-grid .active {
    table-layout: fixed;
}

.availability-grid .grid-monthday {
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
}

.availability {
    float: left;
    width: 20px;
    height: 20px;
}

.availability-grid {
    margin-bottom: 90px;
    border-top-style: none;
}

    .availability-grid td {
        width: 120px;
        vertical-align: top;
    }

    .availability-grid thead td {
        background-color: #FFD373;
        border-top-style: none;
        /*	background-color : #CDE1EC;*/
        text-align: center;
        font-weight: bold;
    }

    .availability-grid .cell-row {
        display: table-row;
    }

    .availability-grid .cell-header {
        display: table-row;
    }

    .availability-grid .event-description {
        width: inherit;
        padding-top: 2px;
        margin-top: 2px;
        cursor: pointer;
        max-width: 110px;
    }

.availability-cell {
    width: 120px;
    height: 6em;
    color: black;
    font-size: 0.8em;
    line-height: 1em;
    font-family: Helvetica,Sans-Serif;
    display: table;
}

.availability-grid .date {
    background-color: #FFD373;
}

#availability .availability-grid .cell .times div {
    padding-left: 12px;
}

#availability .availability-grid .cell .times {
    text-shadow: 0px 1px 2px #FFF;
    font-size: 1em;
}


/****************** Availability Details *********************************/

.availability-details {
    display: inline-block;
    height: auto !important;
    overflow: auto;
    max-width: 910px;
}

    .availability-details .options {
        display: inline-block;
        padding: 20px 0px 0px 10px;
        min-width: 600px;
        background-color: #FFF1A2;
    }

    .availability-details .option-list {
        display: table;
        float: left;
        padding-left: 7%;
        width: 100%;
    }

    .availability-details .option-name {
        display: table-cell;
        width: 75px;
        padding-bottom: 20px;
        vertical-align: top;
    }

    .availability-details .option-value {
        display: table-cell;
        padding-bottom: 10px;
    }

    .availability-details .part,
    .availability-details .none,
    .availability-details .full {
        display: none;
    }


    .availability-details input {
        font-size: 10px;
        color: black;
    }

    .availability-details .hasDatepicker {
        width: 100px;
    }

    .availability-details select {
        width: 200px;
        font-size: 10px;
        color: black;
    }

    .availability-details textarea.unavailable-reason {
        min-height: 90px;
        width: 230px;
        /*margin-left : 25px;*/
        resize: none;
    }


.event-details {
    width: auto;
    color: Black;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    padding: 0px;
    margin: 0px;
    background-color: #CCEEF4;
}

    .event-details input {
        margin: 0px 10px 0px 7px;
    }


    .event-details span {
        margin-left: 15px;
    }

    .event-details table {
        border: none;
        margin-top: 0px;
        padding-top: 0px;
        width: 100%;
    }

    .event-details tr {
        width: 100%;
    }


        .event-details tr.unavailable {
            background-color: #E8EEF4;
            color: #696969;
        }


    .event-details table td {
        border-style: none;
        width: 100%;
    }

div.jquery-dialog-availability {
    font-size: 1em;
    background: white;
}

.availability-details input[type="text"].time {
    width: 100px;
}

.availability-details select.time {
    width: 100px;
}


/**************************Timesheet Authorisation *****************************/



.timesheet-authorisation .review-link {
    text-align: center;
    width: auto;
    margin: 10px 0 10px 30px;
}

.timesheet-authorisation-summary {
    margin: 10px;
    width: 918px;
}

.timesheet-review label {
    padding: 0 5px 0 0;
}

#timesheet-review .button {
    margin: 0px 0px 10px 10px;
}

.timesheet-review input,
.timesheet-authorisation-summary input {
    margin: 0 5px 0 0;
}

    .timesheet-authorisation-summary input.small,
    .timesheet-review input.small {
        width: 2em;
    }

    .timesheet-authorisation-summary input.short,
    .timesheet-review input.short {
        width: 8em;
    }

#timesheet-review h2 {
    line-height: 22px;
}

    #timesheet-review h2 .button {
        float: left;
    }

.timesheet-authorisation .periods {
    margin: 15px 0 0 30px;
}

.timesheet-review tbody > tr {
    font-size: 1em;
    height: 43px;
}

.timesheet-authorisation-summary tbody td {
    border: none;
}

.right-align {
    float: right;
    text-align: right;
    padding: 5px;
}


.left-align {
    float: left;
    text-align: left;
    padding: 5px;
}

.float-container {
    display: inline-block;
    width: 100%;
}

.add, .edit, .new, .view, .approve, .comments {
    cursor: pointer;
}

.visible {
    display: block;
}

.hidden {
    display: none !important;
}

/* TipTip CSS - Version 1.2 */

#tiptip_holder {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

    #tiptip_holder.tip_top {
        padding-bottom: 5px;
    }

    #tiptip_holder.tip_bottom {
        padding-top: 5px;
    }

    #tiptip_holder.tip_right {
        padding-left: 5px;
    }

    #tiptip_holder.tip_left {
        padding-right: 5px;
    }

#tiptip_content {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgb(25,25,25);
    background-color: rgba(25,25,25,0.92);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 3px #555;
    -webkit-box-shadow: 0 0 3px #555;
    -moz-box-shadow: 0 0 3px #555;
}

#tiptip_arrow, #tiptip_arrow_inner {
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    height: 0;
    width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
    border-top-color: #fff;
    border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
    border-bottom-color: #fff;
    border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
    border-right-color: #fff;
    border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
    border-left-color: #fff;
    border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
    margin-top: -7px;
    margin-left: -6px;
    border-top-color: rgb(25,25,25);
    border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
    margin-top: -5px;
    margin-left: -6px;
    border-bottom-color: rgb(25,25,25);
    border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -5px;
    border-right-color: rgb(25,25,25);
    border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -7px;
    border-left-color: rgb(25,25,25);
    border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #tiptip_content {
        padding: 4px 8px 5px 8px;
        background-color: rgba(45,45,45,0.88);
    }

    #tiptip_holder.tip_bottom #tiptip_arrow_inner {
        border-bottom-color: rgba(45,45,45,0.88);
    }

    #tiptip_holder.tip_top #tiptip_arrow_inner {
        border-top-color: rgba(20,20,20,0.92);
    }
}


/** Rostering Select Box**/

.rostering-container {
    width: 500px;
    margin: auto;
}

#rosterSelect .table {
    width: 270px;
    margin: 0 auto;
}

.rostering-select .tt-row {
    display: table-row;
    white-space: nowrap;
}

.rostering-select .full-row {
    display: block;
    background-color: #CDE1EC;
    color: #437B99;
    font-size: medium;
    padding: 10px;
    margin-bottom: 20px;
}

.rostering-select .option-name {
    display: table-cell;
    width: 80px;
    padding: 10px 10px 10px 50px;
    color: #437B99;
    font-weight: bold;
}

.rostering-select .option-value {
    display: table-cell;
    padding: 10px 20px 10px 10px;
    width: auto;
}


.table .button-row {
    padding: 20px;
    margin: auto;
    text-align: center;
}

    .table .button-row > input[type="submit"] {
        width: 150px;
        height: 40px;
    }

/** RosterBuilder **/

#roster-builder-body #toolbar {
    padding: 3px 0px 3px 3px;
}

    #roster-builder-body #toolbar #subActions {
        display: none;
        margin-right: 0px;
        margin-top: 0px;
        padding: 10px;
        background-color: #BABABA;
        border-radius: 10px 10px 10px 10px;
    }

#roster-builder-body .rostering-icon {
    height: 16px;
    width: 16px;
    display: inline-block;
    z-index: 0;
    right: 0px;
}

#roster-builder-body .rostering-icon.conflicts {
    background: url('../content/RosterIcons.png') no-repeat 0px 0px;
    right: 17px;
    bottom: -1px;
}

#roster-builder-body .rostering-icon.confirmed {
    background: url('../content/RosterIcons.png') no-repeat 0px -14px;
}

#roster-builder-body .rostering-icon.declined {
    background: url('../content/RosterIcons.png') no-repeat 0px -32px;
}

#roster-builder-body .rostering-icon.offered {
    background: url('../content/RosterIcons.png') no-repeat 0px -48px;
}

#roster-builder-body .rostering-icon.unconfirmed {
    background: url('../content/RosterIcons.png') no-repeat 0px -64px;
}

#roster-builder-body .rostering-icon.nonattended {
    background: url('../content/Icons/famfamfam/date_delete.png') no-repeat;
}

#roster-builder-body .rostering-icon.alert {
    padding: 0px;
    margin: 0px;
    background: url('../content/icons/exclamation.png') no-repeat 0px 0px;
    right: 34px;
}

#roster-builder-body .rostering-icon.readonly {
    background: url('../content/icons/lock_delete.png') no-repeat 0px 0px;
    left: 0px;
}

#roster-builder-body .rostering-icon.plannershift {
    background: url('../content/icons/flag_red.png') no-repeat 0px 0px;
    left: 18px;
}

#roster-builder-body .rostering-icon.missing-qualifications {
    background: url('../content/icons/mandatory.png') no-repeat 0px 0px;    
    position: relative;
    top: 1px;
}



#roster-builder-body #toolbar #save-template {
    border-radius: 0px 5px 5px 0px;
    position: relative;
    left: -5px;
    padding-left: 5px;
    padding-right: 5px;
    background-position: -100px, 50% 50%;
}

#roster-builder-body #toolbar #undo {
    border-radius: 5px 0px 0px 5px;
    margin-right: -6px;
    padding-right: 5px;
}

#roster-builder-body #toolbar #redo {
    border-radius: 0px 5px 5px 0px;
}

#roster-builder-body #toolbar #apply-template {
    border-radius: 5px 0px 0px 5px;
}

#roster-builder-body #subActions .btn-group.group-left {
    border-radius: 5px 0px 0px 5px;
    margin-right: -1px;
    padding-right: 10px;
}

#roster-builder-body #subActions .btn-group.group-right {
    border-radius: 0px 5px 5px 0px;
}

#roster-builder-body #subActions .ml_7 {
    margin-left: 7px;
}


#roster-builder-body #roster-container {
    padding: 5px 20px 20px 20px;
}

#roster-builder-body .roster-table {
    width: 100%;
    border: none;
}

#roster-builder-body .roster-table tr.tt-row {
    border-top: solid 1px #ccc;
    height: 60px;
}

#roster-builder-body .roster-table tr.tt-row.missing-role td.role,
#roster-builder-body .roster-table tr.tt-row.missing-role td.total {
    background-color: firebrick;
    color: white;
}

    #roster-builder-body .roster-table td {
        border: none;
        min-width: 90px;
        max-width: 100px;
    }
    #roster-builder-body .roster-table td div {
        word-wrap:break-word;
    }

        #roster-builder-body .roster-table td.total {
            border: none;
            min-width: 20px;
        }

            #roster-builder-body .roster-table td.total span {
                white-space: nowrap;
                display:block;
            }

        #roster-builder-body .roster-table td.role .add-row {
            position: absolute;
            bottom: -5px;
            right: 5px;
            font-size: 35px;
            color: #BBB;
            text-shadow: 0px 0px 4px #222;
        }

            #roster-builder-body .roster-table td.role .add-row:hover {
                color: #F5BE2B;
                text-shadow: 1px 1px 1px #FDEC78;
                cursor: pointer;
            }

            #roster-builder-body .roster-table td.role .add-row.disabled:hover {
                color: #BBB;
                text-shadow: 0px 0px 4px #222;
                cursor: default;
            }

            #roster-builder-body .roster-table td.role .show-row-menu {
            position: absolute;
            bottom: -5px;
            right: 5px;
            font-size: 35px;
            color: #BBB;
            text-shadow: 0px 0px 4px #222;
        }

            #roster-builder-body .roster-table td.role .show-row-menu:hover {
                color: #F5BE2B;
                text-shadow: 1px 1px 1px #FDEC78;
                cursor: pointer;
            }

            #roster-builder-body .roster-table td.role .show-row-menu.disabled:hover {
                color: #BBB;
                text-shadow: 0px 0px 4px #222;
                cursor: default;
            }



    #roster-builder-body .roster-table .deletable {
        cursor: crosshair !important;
    }

    #roster-builder-body .roster-table .selectable {
        cursor: crosshair !important;
    }

    #roster-builder-body .roster-table .deletable:hover {
        opacity: 0.4;
    }

    #roster-builder-body .roster-table .selectable:hover {
        opacity: 0.4;
    }

    #roster-builder-body .roster-table .selectable.selected {
        opacity: 0.3;
        border: 1px solid yellow;
    }

        #roster-builder-body .roster-table .selectable.selected.role {
            opacity: 1;
        }

#roster-builder-body #refreshBtn {
    padding-left: 0px;
    cursor: pointer;
}

.role-select ul {
    padding: 0px;
    margin-bottom: 0px;
}

.role-select li {
    list-style: none;
    cursor: pointer;
    margin-left: 10px;
    padding-bottom: 10px;
}

    .role-select li .box {
        height: 18px;
        width: 18px;
        display: inline;
        float: left;
        border: 1px solid black;
    }

    .role-select li .rolename {
        padding-left: 30px;
    }

    .role-select li:hover {
        font-weight: bold;
    }

        .role-select li:hover .box {
            border: solid 2px #EA4;
            height: 16px;
            width: 16px;
        }

.roster-loading-modal,
.loading-ondemand-modal,
.roster-saving-modal {
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    font-weight: bold;
}

.roster-week-highlight span, .roster-week-highlight a {
    color: #EA4 !important;
    border-color: #EA4 !important;
}

.roster-loading-modal .ajax-loader-bar {
    margin-top: 10px;
}

#roster-builder-body .roster-table td.role {
    width: 100px;
    position: relative;
    /*display:block;*/
    height: 55px;
}

    #roster-builder-body .roster-table td.role label {
        height: 55px;
        min-width: 90px;
        padding: 0px 5px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        cursor: inherit;
        font-size: 12px;
        white-space: normal;
    }

#roster-builder-body .roster-table tfoot tr {
    border-top: solid 1px #ccc;
    height: 40px;
}

#roster-builder-body td {
    text-align: center;
}

#roster-builder-body .roster-table tbody td.cell {
    width: 120px;
}

    #roster-builder-body .roster-table tbody td.cell.shift,
    .employee-select tr[employeeid],
    .employee-name,
    .template-select li {
        cursor: pointer;
        padding-left: 5px;
    }

#roster-builder-body .roster-table tbody td .shift-name,
#roster-builder-body .roster-table tbody td .shift-detail {
    max-width: 90px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roster-builder-body .roster-table tbody td .published-status {
    font-size: 11px;
    font-style: italic;
}

#roster-builder-body .roster-table tbody td .shift-symbols {
    height: 16px;
    max-height: 16px;
    margin-top: 1px;
    margin-bottom: -2px;
    overflow: hidden;
}

#roster-builder-body .roster-table tbody td.cell.shift.disabled {
    cursor: default;
}

.template-select li:hover {
    outline: solid 2px #EA4;
}

.employee-select tr[employeeid]:hover {
    background: rgba(238, 170, 68, 0.5);
}

#roster-builder-body .roster-table tbody td.cell,
#roster-builder-body tr[data-role="dummy"] td.role {
    cursor: cell;
}

    #roster-builder-body .roster-table tbody td.cell.disabled {
        cursor: default;
    }

.employee-name.selected,
.template-select li.selected,
.employee-select tr.selected {
    background: rgba(238, 170, 68, 0.5);
}

.template-select ul {
    list-style: none;
}

#roster-builder-body .roster-table tbody td.cell,
#roster-builder-body .roster-table td.role,
#roster-builder-body .dummy-roster-table tbody td.cell,
#roster-builder-body .dummy-roster-table td.dummy-role,
#roster-builder-body .foot td.total,
#roster-builder-body td.day-header {
    border-right: solid 1px #ccc;
}

#roster-builder-body .dummy-roster-table .dummy-role,
#roster-builder-body .dummy-roster-table .day-header {
    width: 120px;
}

#roster-builder-body .dummy-roster-table .dummy-role,
#roster-builder-body .dummy-roster-table .dummy-total {
    border-bottom: solid 1px #ccc;
}

.shift-edit td {
    vertical-align: top;
}

.employee-select .employee-name.problem {
    border-bottom: solid 2px rgba(255, 0, 0, 0.3);
}

.employee-select .employee-phone, .employee-select .employee-mobile {
    width: 85px;
}

.employee-select .employee-phrs {
    width: 20px;
}

.employee-select {
    table-layout: fixed;
}

    .employee-select td {
        word-wrap: break-word;
    }

        .employee-select td.alert, .employee-select td.code {
            width: 20px;
        }

    .employee-select #employeelist.shrink {
        height: 75%;
        overflow-y: scroll;
        margin-bottom: 10px;
    }

    .employee-select #notices {
        display: none;
        border: solid 1px rgba(255, 0, 0, 0.6);
        height: 20%;
        overflow: hidden;
    }

        .employee-select #notices.active {
            display: block;
        }

#conflicts, #notices #availability {
    margin: 10px;
}

#notices #availability {
    clear: left;
}

    #conflicts > span, #notices #availability > span {
        float: left;
    }

    #notices #conflicts > div, #conflicts .count, #notices #availability > div {
        float: right;
    }

    #notices #availability .calendar {
        padding-left: 20px;
        height: 20px;
        background-position: left center;
    }

#notices #conflicts .count {
    cursor: pointer;
}

/**************Google Maps ****************/

#see-position {
    margin-bottom: 10px;
}

#map-image {
    height: 35px;
    vertical-align: middle;
    margin-left: 5px;
}

#geo-map {
    height: 280px;
    width: 640px;
}

#geo-log {
    background-color: red;
    color: white;
    padding: 5px;
    border-radius: 5px;
    visibility: hidden;
}

/************ jquery timeedit *******/
.time-edit {
    border: 1px solid #CCC;
    background-color: white;
    color: inherit;
    width: auto;
    display: inline-block;
}

.focus {
    background-color: Highlight;
}

.time-edit .hh {
    padding-left: 3px;
}

.time-edit .unit {
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

.time-edit .tt {
    width: 2em;
}


/************ end jquery timeedit *******/

/*********** jquery timepicker ************/

.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

    .ui-timepicker-div dl dt {
        height: 25px;
        margin-bottom: -25px;
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 65px;
    }

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

/********* end jquery timepicker *********/


/******** timesheet-authorisation *********/

#main .timesheet-authorisation .search-form .button, #main .timesheet-authorisation .timesheet-entries table .button {
    padding-left: 21px;
}

#main .timesheet-authorisation .button.small, .ui-dialog-content .button.small {
    padding-left: 16px;
    height: 25px;
    padding-right: 0px;
    width: 6px;
}

#main .timesheet-authorisation .button.edit.small {
    background-position: -2px -182px, 50% 50%;
}

    #main .timesheet-authorisation .button.edit.small:hover {
        background-position: -2px -218px, 50% 50%;
    }

#main .timesheet-authorisation .button.authorise.disabled.small {
    background-position: -2px -1479px, 50% 50%;
}

    #main .timesheet-authorisation .button.authorise.disabled.small:hover {
        background-position: -2px -1479px, 50% 50%;
    }

#main .timesheet-authorisation .button.authorise.small {
    background-position: -2px -805px, 50% 50%;
}

    #main .timesheet-authorisation .button.authorise.small:hover {
        background-position: -2px -805px, 50% 50%;
    }

#main .timesheet-authorisation .button.unauthorise.small {
    background-position: -2px -884px, 50% 50%;
}

    #main .timesheet-authorisation .button.unauthorise.small:hover {
        background-position: -2px -884px, 50% 50%;
    }

.ui-dialog-content .button.bin.small {
    background-position: -2px -955px, 50% 50%;
    padding-left: 21px;
}

    .ui-dialog-content .button.bin.small:hover {
        background-position: -2px -1113px, 50% 50%;
        padding-left: 21px;
        cursor: pointer;
    }

#main .timesheet-authorisation .button.unauthorise.disabled.small {
    background-position: -2px -1479px, 50% 50%;
}

    #main .timesheet-authorisation .button.unauthorise.disabled.small:hover {
        background-position: -2px -1479px, 50% 50%;
    }

#main .timesheet-authorisation .button.authorise {
    background-position: 0px -802px, 50% 50%;
    margin: 5px;
}

    #main .timesheet-authorisation .button.authorise:hover {
        background-position: 0px -802px, 50% 50%;
        margin: 5px;
    }

#main .timesheet-authorisation .button.unauthorise {
    background-position: 0px -844px, 50% 50%;
    margin: 5px;
}

    #main .timesheet-authorisation .button.unauthorise:hover {
        background-position: 0px -880px, 50% 50%;
        margin: 5px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.edit.small {
    background-position: -2px -182px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.edit.small:hover {
        background-position: -2px -218px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.authorise.disabled.small {
    background-position: -2px -1479px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.authorise.disabled.small:hover {
        background-position: -2px -1479px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.authorise.small {
    background-position: -2px -805px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.authorise.small:hover {
        background-position: -2px -805px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.unauthorise.small {
    background-position: -2px -884px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.unauthorise.small:hover {
        background-position: -2px -884px;
    }

.no-multiplebgs .ui-dialog-content .button.bin.small {
    background-position: -2px -955px;
    padding-left: 21px;
}

    .no-multiplebgs .ui-dialog-content .button.bin.small:hover {
        background-position: -2px -1113px;
        padding-left: 21px;
        cursor: pointer;
    }

.no-multiplebgs #main .timesheet-authorisation .button.unauthorise.disabled.small {
    background-position: -2px -1479px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.unauthorise.disabled.small:hover {
        background-position: -2px -1479px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.authorise {
    background-position: 0px -802px;
    margin: 5px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.authorise:hover {
        background-position: 0px -802px;
        margin: 5px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.unauthorise {
    background-position: 0px -844px;
    margin: 5px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.unauthorise:hover {
        background-position: 0px -880px;
        margin: 5px;
    }

#main .timesheet-authorisation .button.plus.small {
    background-position: -2px -1331px, 50% 50%;
    padding-left: 21px;
}

    #main .timesheet-authorisation .button.plus.small:hover {
        background-position: -2px -1372px, 50% 50%;
        padding-left: 21px;
    }

.no-multiplebgs #main .timesheet-authorisation .button.plus.small {
    background-position: -2px -1331px;
    padding-left: 21px;
}

    .no-multiplebgs #main .timesheet-authorisation .button.plus.small:hover {
        background-position: -2px -1372px;
        padding-left: 21px;
    }

#main .timesheet-authorisation .search-form select.medium {
    width: 8em;
}

#main .timesheetTable input.small {
    width: 3em;
}

#main .timesheet-authorisation .timesheet-entries table, #main .timesheet-authorisation .shift-details table {
    width: 100%;
}

#main .timesheet-authorisation .timesheet-entries {
    margin-top: 2em;
    padding: 10px;
}

.timesheet-authorisation .timesheetTable tr.selected {
    background-color: #ddd;
}

.timesheet-authorisation .shift-details select.medium, .timesheet-authorisation .addShiftDetails select.medium, .addShiftDetails .sd_StartDate {
    width: 8em;
}

.timesheet-authorisation .shift-details .block {
    float: left;
    width: 435px;
    height: auto;
    margin: 20px 0px 20px 20px;
    clear: none;
}

.timesheet-authorisation .shift-details .blockright {
    margin: 20px 20px 20px 0px;
}

.timesheet-authorisation .shift-details .right-float {
    float: right;
}

.timesheet-authorisation #kioskLogContainer {
    height: 300px;
    overflow: hidden;
}

.timesheet-authorisation #kioskLog {
    overflow: auto;
    height: 255px;
}

.timesheet-authorisation #EditDetailsContainer {
    height: 300px;
    overflow: hidden;
}

.timesheet-authorisation .shift-details {
    position: absolute;
    top: 0px;
    width: 938px;
    visibility: hidden;
}

.timesheet-authorisation .ta-comments {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    max-height: 50px;
}

#EditDetails .sd_StartDate, .timesheet-authorisation #SelectedDate {
    width: 6em;
}

#EditDetails .rosteredShiftError {
    font-size: 14px;
    color: red;
    margin: 0px 20px 0px 20px;
}

.timesheet-authorisation .TimesheetOptionsButton {
    padding: 0px;
}

    .timesheet-authorisation .TimesheetOptionsButton span {
        display: none;
    }

.timesheet-authorisation li.imageNav, .timesheet-authorisation li.imageNav, .timesheet-authorisation li.imageNav a.TimesheetOptionsButton:hover {
    background: none;
}

    .timesheet-authorisation li.imageNav a.TimesheetOptionsButton {
        border: none;
    }

    .timesheet-authorisation li.imageNav a.unavailable {
        color: #bbb;
    }

.timesheet-authorisation .timesheetListSelector {
    float: left;
}

.timesheet-authorisation .addShiftDetails, .timesheet-authorisation .addShiftDetails #submitNewTimesheet {
    float: right;
}

.timesheet-authorisation .filters {
    margin-left: 20px;
    margin-top: 20px;
}

.timesheet-authorisation .addButtonContainer {
    float: left;
    margin: 20px 0px 0px 20px;
}

.timesheet-authorisation .sf-menu a.button {
    padding-left: 30px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

    .timesheet-authorisation .sf-menu a.button span.sf-sub-indicator {
        display: none;
    }

.timesheet-authorisation #EditDetails .NoShowMenu .shiftType {
    cursor: pointer;
}

.timesheet-entries tr.ModelRow.conflicting-timesheet {
    background-color: #F39A9A;
    color: black;
}

    .timesheet-entries tr.ModelRow.conflicting-timesheet.selected {
        background-color: #EC6F6F;
    }

.timesheet-entries .bid-summary {
    margin: 10px 20px;
}

#main .timesheet-authorisation .timesheetTable td {
    padding: 0px 2px;
}

.timesheet-authorisation #SelectColumns {
    margin-top: 30px;
}

.timesheet-authorisation .timesheetTableContainer {
    overflow: auto;
}

.timesheet-authorisation #timesheetValidationMessages {
    list-style-type: none;
}
/******** end timesheet-authorisation *********/

/******** leave-authorisation ******************/
#leaveAuthorisation #LeaveFilters {
    padding-left: 10px;
}

#leaveAuthorisation #LeaveFilters,
#leaveAuthorisation #leave-list,
#leaveAuthorisation #leave-list-ajax,
#leaveAuthorisation #StatisticsFilters,
#leaveAuthorisation #statistics-list,
#leaveAuthorisation #statistics-list-ajax {
    position: relative;
}

    #leaveAuthorisation #leave-list .k-grid {
        width: 99%;
        margin: 5px auto;
    }

#leaveAuthorisation #statistics-list {
    min-height: 100px;
}

#leaveAuthorisation .leaveAuthorisationGap {
    height: 40px;
    width: 100%;
}

#leaveAuthorisation .statistics-list {
    width: 99%;
    margin: 5px auto;
}

#leaveAuthorisation .leave-list,
#leaveAuthorisation .table-footer {
    width: 100%;
}

#leaveAuthorisation .statistics-list .k-header {
    border-right: solid 1px #c5c5c5;
}

#leaveAuthorisation .leave-list th,
#leaveAuthorisation .statistics-list th {
    border: none;
}

#leaveAuthorisation .leave-list tr td:last-child,
#leaveAuthorisation .statistics-list tr td:last-child {
    border-right-width: 1px;
}

#leaveAuthorisation .statistics-list tfoot {
    border-top: 1px solid silver;
    background-color: #e3e3e3;
}


#main .confirm-list {
    width: 670px;
    table-layout: fixed;
}

#leave-list-ajax,
#statistics-list-ajax {
    position: relative;
    left: 450px;
    display: none;
    width: 100px;
    padding-top: 70px;
}

#leaveAuthorisation input[type="text"],
#leaveAuthorisation select {
    font-size: 1em !important;
    margin-bottom: 5px;
    margin-right: 15px;
    padding: 5px;
}

#leaveAuthorisation .processedFilters {
    padding: 5px 0 5px 0;
    float: left;
    width: 240px;
}

#leaveAuthorisation #addLeaveDateControl {
    float: right;
    width: 380px;
    min-height: 26px;
    position: relative;
    z-index: 10;
    padding: 10px 0 10px 10px;
}

#leaveAuthorisation .leave-fromdate,
#leaveAuthorisation .leave-todate {
    float: left;
    padding-right: 10px;
    padding-top: 4px;
}

    #leaveAuthorisation .leave-fromdate input,
    #leaveAuthorisation .leave-todate input {
        width: 90px;
    }

#leaveAuthorisation #close-container {
    float: left;
    padding: 0;
}

#leaveAuthorisation #add-container {
    float: right;
    padding: 5px 5px 0 0;
}

#leaveAuthorisation #dateControl {
    float: left;
    padding: 5px 10px 10px 100px;
    max-width: 590px;
}

.statistics-header {
    width: 100%;
    min-height: 20px;
    padding: 6px 0 6px 5px;
    text-align: center;
    background-color: #F5BF2D;
    border: solid 1px #F5BF2D;
    font-weight: bold;
}

.statistics-subheader {
    padding: 10px;
    font-weight: bold;
    line-height: 21px;
    vertical-align: middle;
}

    .statistics-subheader input[type="text"] {
        font-size: 1em;
        width: 80px;
    }

    .statistics-subheader input[type="checkbox"] {
        margin: 0 1px 0 15px;
    }

.statistics-column-header {
    padding: 5px 0;
    height: 20px;
    font-weight: bold;
    text-align: center;
}

.statistics-measure {
    font-weight: bold;
    width: 170px;
}

.statistics-cell {
    text-align: center;
}

#leaveAuthorisation-modal-content .textline {
    float: left;
    position: relative;
    width: 550px;
    padding-top: 15px;
}

#leaveAuthorisation-modal-content .radiobuttons-container {
    float: left;
    position: relative;
    width: 120px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 30px;
}

#leaveAuthorisation-modal-content #Comments {
    resize: none;
}

#leaveAuthorisation-modal-content #button-container {
    width: 180px;
    position: relative;
    float: right;
    padding: 0 10px 10px 0;
    margin: 0;
}

.leave-request-detail-container {
    clear: both;
}

    .leave-request-detail-container table {
        max-width: 995px;
    }

        .leave-request-detail-container table td {
            padding: 10px;
            border-right: 1px solid #eee;
        }


            .leave-request-detail-container table td.max150 {
                max-width: 150px;
            }

            .leave-request-detail-container table td.max180 {
                max-width: 180px;
            }

            .leave-request-detail-container table td.comments-cell {
                max-width: 130px;
                border-right: none;
            }

.leave-request-detail {
    padding: 10px 5px;
    min-height: 36px;
}

    .leave-request-detail.alternate {
        background-color: #ffffff;
    }

    .leave-request-detail div {
        float: left;
        position: relative;
        /*background-color: inherit;*/
    }
/******** end leave-authorisation ******************/

/****** tablesorter *******/
table.tablesorter {
    font-size: 9pt;
    width: 100%;
    text-align: left;
}

    table.tablesorter thead tr .header {
        background-image: none;
        background-repeat: no-repeat;
        background-position: center bottom;
        cursor: pointer;
    }

    table.tablesorter thead tr .headerSortUp {
        background-image: url(../content/asc.gif);
    }

    table.tablesorter thead tr .headerSortDown {
        background-image: url(../content/desc.gif);
    }

    table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
        background-color: #F5CF68;
    }
/****** end tablesorter *******/

#divSupportMsg {
    font-size: 1.3em;
    color: #666;
}


.sales-budget .headers {
    text-align: center;
}

.sales-budget input.hasDatepicker {
    width: 90px;
}

.sales-budget .button.search {
    width: 100px;
    text-align: right;
}

.sales-budget .button.printer {
    width: auto;
    text-align: right;
}


/**[start]************** Attendance Summary ******************/
.attendance-summary {
}

    .attendance-summary .inner-header {
        background-color: #eadfb3;
    }

    .attendance-summary table {
        border: none;
        table-layout: auto;
        width: 870px;
    }

    .attendance-summary th {
        border-style: none;
    }

        .attendance-summary th a {
            color: dimGray;
            text-decoration: none;
        }

            .attendance-summary th a:hover {
                color: #034AF3;
            }

    .attendance-summary td {
        border-bottom: none;
        border-top: none;
    }

        .attendance-summary td.late {
            color: red;
        }

        .attendance-summary td.early {
            color: green;
        }

    .attendance-summary .search-form #StartDate {
        width: 6em;
    }

    .attendance-summary .search-form select {
        width: 200px;
    }


/**[end]*************** Attendance Summary ******************/




/* Time Editor control */
div.time-editor-container {
    width: 65px;
    display: inline-block;
}

    div.time-editor-container input.time-editor {
        width: 47px;
    }

    div.time-editor-container .ui-datepicker-trigger {
        display: inline;
        position: relative;
        top: -3px;
        left: 2px;
        cursor: pointer;
    }

    div.time-editor-container.disabled .ui-datepicker-trigger {
        cursor: not-allowed !important;
    }

    div.time-editor-container.warning {
        border: 1px solid orange;
    }

    div.time-editor-container.error {
        border: 1px solid red;
    }

input.time-editor.invalid {
    border-color: Red;
    color: Red;
}





/**[start]************** Employee Change Approval ******************/
.employee-change-approval .tt-container {
    padding: 5px 15px;
}

    .employee-change-approval .tt-container .hide {
        display: none;
    }

    .employee-change-approval .tt-container .no-data {
        text-align: center;
    }

    .employee-change-approval .tt-container hr.split {
        margin: 20px 0 10px 0;
    }

    .employee-change-approval .tt-container .search-form {
        width: 100%;
    }

        .employee-change-approval .tt-container .search-form select {
            width: 220px;
        }

    .employee-change-approval .tt-container .item-summary hr {
        margin: 10px 0px 10px 0px;
    }

    .employee-change-approval .tt-container .item-summary > .summary-group {
        display: inline-block;
        padding-right: 20px;
        width: 295px;
    }

    .employee-change-approval .tt-container .item-summary .summary-label {
        display: inline-block;
    }

    .employee-change-approval .tt-container .item-summary > .controls {
        float: right;
        display: inline-block;
        position: relative;
        top: 2px;
        right: 10px;
    }

    .employee-change-approval .tt-container .item-summary .item-detail {
        margin-top: 15px;
    }

        .employee-change-approval .tt-container .item-summary .item-detail .display-panel {
            float: left;
            width: 550px;
            min-height: 100px;
            margin-right: 10px;
        }

        .employee-change-approval .tt-container .item-summary .item-detail .display-panel.onboarding {
            width: 515px;
        }

            .employee-change-approval .tt-container .item-summary .item-detail .display-panel .header {
                padding: 10px;
                height: 65px;
                font-weight: bold;
            }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .header h5 {
                    padding: 0;
                    margin: 0 0 5px 0;
                }

            .employee-change-approval .tt-container .item-summary .item-detail .display-panel .content {
                padding: 10px;
            }

            .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row {
                height: 33px;
                line-height: 33px;
                border: 0px solid green;
            }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .fieldname {
                    display: inline-block;
                    width: 112px;
                    height: 32px;
                    overflow: hidden;
                    border: 0px solid red;
                    position: relative;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .fieldfrom {
                    display: inline-block;
                    width: 165px;
                    height: 32px;
                    overflow: hidden;
                    border: 0px solid red;
                    position: relative;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .fieldto {
                    display: inline-block;
                    width: 165px;
                    height: 32px;
                    overflow: hidden;
                    border: 0px solid red;
                    position: relative;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .onboarding {
                    width: 335px !important;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .takefrom {
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    overflow: hidden;
                    border: 0px solid red;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .display-panel .tt-row .taketo {
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    overflow: hidden;
                    border: 0px solid red;
                }


        .employee-change-approval .tt-container .item-summary .item-detail .editor-panel {
            float: left;
            width: 340px;
            min-height: 100px;
            margin-bottom: 15px;
        }

        .employee-change-approval .tt-container .item-summary .item-detail .editor-panel.onboarding {
            width: 375px;
        }

            .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .header {
                padding: 10px;
                height: 65px;
                font-weight: bold;
            }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .header h5 {
                    padding: 0;
                    margin: 0 0 5px 0;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .header a {
                    float: right;
                }

            .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .content {
                padding: 10px;
            }

            .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .tt-row {
                height: 33px;
                line-height: 33px;
            }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .tt-row .fieldname {
                    width: 95px;
                    height: 32px;
                    display: inline-block;
                    overflow: hidden;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel.onboarding .tt-row .fieldname {
                    width: 130px;
                }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .tt-row .fieldvalue {
                    width: 150px;
                    display: inline-block;
                    vertical-align: top;
                }

                    .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .tt-row .fieldvalue input,select {
                        width: 215px;
                        line-height: normal;                       
                    }

                    .employee-change-approval .editor-panel .tt-row .fieldvalue input,
                    .employee-change-approval .editor-panel .tt-row .fieldvalue select {
                        font-size: 1em;                       
                    }

                    .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .tt-row .fieldvalue select:disabled {
                        background-color: rgb(235, 235, 228);
                    }

            .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .controls {
                margin: 15px 0 0 0;
                text-align: right;
            }

                .employee-change-approval .tt-container .item-summary .item-detail .editor-panel .controls .save {
                    margin-right: 7px;
                }

/**[end]---------------- Employee Change Approval ------------------*/

.keypinpad-widget {
    z-index: 99999 !important;
}

.keypinpad-widget .ui-widget-header.ui-dialog-titlebar {
    display: none;
    /*
    background:none;
    padding:5px 0px 5px 0px;
    border:none;
    color:#000;
    font-variant:small-caps;
    text-align:center;
    font-size:1.5em;
    color:#696969;
    text-shadow:1px 1px 1px #CCC;
    */
}

.keypinpad-widget .ui-widget-header.ui-dialog-titlebar span {
    float: none;
    border-bottom: solid 2px #CCC;
}

.keypinpad-widget .ui-widget-header.ui-dialog-titlebar a {
    display: none;
}

.keypinpad-widget input.key-pin-pad-inputbox,
.keypinpad-widget input.key-pin-pad-passwordbox {
    margin-top: 15px;
    font-size: 35px;
    height: 58px;
    width: 600px;
}

.keypinpad-widget .key-pin-pad-textareabox {
    display: block;
    margin-top: 15px;
    height: 80px;
    width: 600px;
}

.keypinpad-widget .input-container {
    width: 820px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid silver;
}

.keypinpad-widget .keyboard-choice {
    float: right;
    margin-top: -100px;
}

.keypinpad-widget .keyboard-choice img {
    cursor: pointer;
}

/********** Payslip ******************/
.payslip-list,
.payslip-pagelinks {
    margin: 20px;
    font-size: 16px;
}

.payslip-list {
}

.payslip-pagelinks {
    padding-left: 5px;
}

.payslip-list thead tr td {
    font-weight: bold;
    font-size: 1.05em;
}


/************* PayslipImport ************************/

.payslipimport-wizard {
    padding: 20px;
}

.payslipimport-fileupload {
    padding-bottom: 20px;
}

.payslipimport-wizard td {
    vertical-align: top;
}

.payslipimport-wizard table .col2 input {
    width: 130px;
}

#payslipimport-matchedemplist, #payslipimport-unmatchedpagelist, #payslipimport-unmatchedemplist {
    width: auto;
    height: 300px;
    border: 2px solid #ccc;
    overflow-y: scroll;
}

.payslipimport-wizard thead td {
    background-color: #FFD373;
    border-top-style: none;
    font-weight: bold;
}

/*********** FingerVeinRegistration ************/

#fingervein-registration {
    color: #333333;
}

    #fingervein-registration #employee-filter {
        padding: 10px;
    }

#employee-management #employee-filter {
    padding: 5px;
}

#employee-management .searchfield, #employee-management input {
    margin: 0px;
}

#fingervein-registration #employee-list-ajax {
    margin: 20px 0 20px 400px;
    display: none;
}

#fingervein-registration .alert {
    color: #a00000;
}

#fingervein-registration a#inline {
    display: none;
}

#FingerVeinRegistration-container {
    width: 640px;
}

#fingervein-registration select {
    font-size: 1.01em;
}

#fingervein-registration #employee-filter input {
    padding: 5px;
}

.dlg-refresh-current-page-warning {
    padding: 20px 15px;
    text-align: center;
}

.ui-button-icon-primary.ui-icon.ui-icon-closethick {
    border-bottom: none !important;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button, .input-type-button {
    padding: .4em .4em !important;
}

.employee-search-dialog-toolbar,
.incident-search-dialog-toolbar {
    text-align: right;
}

#dlgIncidentSearch form.frm-incident-search .date-range {
    width: auto !important;
    margin-left: 10px;
}

#dlgIncidentSearch form.frm-incident-search .date-to {
    width: 40px !important;
    text-align: center;
    margin-right: 0;
}

#dlgIncidentSearch form.frm-incident-search .k-datepicker .k-input {
    border-bottom: 1px solid silver !important;
}

.k-grid-content {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.roster-builder .tt-row td label {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.role-select li .rolename {
    max-width: 280px;
    /*white-space: nowrap;*/
    overflow: hidden;
    /*text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;*/
}

.k-grid .incomplete {
    color: red;
}

.k-state-selected .k-state-disabled {
    color: #fff;
}

#leave-list .k-grid-content tbody, #leave-list .k-grid-content tbody tr {
    width: 100%;
}

.ui-dialog.ui-widget.ui-widget-content span.warning {
    color: red;
}

/************** Sales Budget Grid *************/

#GridSalesBudgetItem {
    width: 99%;
    margin: 5px auto;
}

    #GridSalesBudgetItem .k-textbox, #GridSalesBudgetItem .k-invalid {
        border: 1px solid #ccc;
        padding: 0px;
        font-size: 1em;
        color: #444;
    }

    #GridSalesBudgetItem a.k-button {
        color: #2e2e2e;
    }

        #GridSalesBudgetItem a.k-button[disabled] {
            color: #9f9e9e;
        }

/************** NOTIFICATIONS BAR **************/

.notificationsBar {
    color: #777777;
    display: inline;
    position: relative;
    left: 150px;
}

    .notificationsBar a {
        color: #777777;
    }

    .notificationsBar .fs0 {
        position: relative;
        font-size: 20px;
        margin-right: 7px;
    }

    .notificationsBar .jewelCount {
        position: absolute;
        right: -7px;
        top: -15px;
    }

    .notificationsBar .jewelCount-number {
        border-radius: 2px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        background-clip: padding-box;
        -webkit-border-radius: 2px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
        -webkit-background-clip: padding-box;
        display: inline-block;
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 10px;
        -webkit-font-smoothing: subpixel-antialiased;
        line-height: normal;
        background-color: #dc0d17;
        background-image: -webkit-linear-gradient(#fa3c45, #dc0d17);
        color: #fff;
        min-height: 13px;
        padding: 1px 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
    }

#langSelect {
    display: inline;
    font-size: 10pt;
}

#langSelect a {
    color: #777;
    text-decoration: none;
}

.mt_1 {
    margin-top: 1px !important;
}

.mt_2 {
    margin-top: 2px !important;
}

.mt_3 {
    margin-top: 3px !important;
}

.mt_4 {
    margin-top: 4px !important;
}

.mt_5 {
    margin-top: 5px !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt_15 {
    margin-top: 15px !important;
}

.mt_20 {
    margin-top: 20px !important;
}

.mt_30 {
    margin-top: 30px !important;
}

.mb_1 {
    margin-bottom: 1px !important;
}

.mb_2 {
    margin-bottom: 2px !important;
}

.mb_3 {
    margin-bottom: 3px !important;
}

.mb_4 {
    margin-bottom: 4px !important;
}

.mb_5 {
    margin-bottom: 5px !important;
}

.mb_10 {
    margin-bottom: 10px !important;
}

.mb_15 {
    margin-bottom: 15px !important;
}

.mb_20 {
    margin-bottom: 20px !important;
}

.mb_30 {
    margin-bottom: 30px !important;
}

.ml_1 {
    margin-left: 1px !important;
}

.ml_2 {
    margin-left: 2px !important;
}

.ml_3 {
    margin-left: 3px !important;
}

.ml_4 {
    margin-left: 4px !important;
}

.ml_5 {
    margin-left: 5px !important;
}

.ml_10 {
    margin-left: 10px !important;
}

.ml_15 {
    margin-left: 15px !important;
}

.ml_20 {
    margin-left: 20px !important;
}

.ml_30 {
    margin-left: 30px !important;
}

.mr_1 {
    margin-right: 1px !important;
}

.mr_2 {
    margin-right: 2px !important;
}

.mr_3 {
    margin-right: 3px !important;
}

.mr_4 {
    margin-right: 4px !important;
}

.mr_5 {
    margin-right: 5px !important;
}

.mr_10 {
    margin-right: 10px !important;
}

.mr_15 {
    margin-right: 15px !important;
}

.mr_20 {
    margin-right: 20px !important;
}

.mr_30 {
    margin-right: 30px !important;
}

.pt_1 {
    padding-top: 1px !important;
}

.pt_2 {
    padding-top: 2px !important;
}

.pt_3 {
    padding-top: 3px !important;
}

.pt_4 {
    padding-top: 4px !important;
}

.pt_5 {
    padding-top: 5px !important;
}

.pt_10 {
    padding-top: 10px !important;
}

.pt_15 {
    padding-top: 15px !important;
}

.pt_20 {
    padding-top: 20px !important;
}

.pt_30 {
    padding-top: 30px !important;
}

.pb_1 {
    padding-bottom: 1px !important;
}

.pb_2 {
    padding-bottom: 2px !important;
}

.pb_3 {
    padding-bottom: 3px !important;
}

.pb_4 {
    padding-bottom: 4px !important;
}

.pb_5 {
    padding-bottom: 5px !important;
}

.pb_10 {
    padding-bottom: 10px !important;
}

.pb_15 {
    padding-bottom: 15px !important;
}

.pb_20 {
    padding-bottom: 20px !important;
}

.pb_30 {
    padding-bottom: 30px !important;
}

.pl_1 {
    padding-left: 1px !important;
}

.pl_2 {
    padding-left: 2px !important;
}

.pl_3 {
    padding-left: 3px !important;
}

.pl_4 {
    padding-left: 4px !important;
}

.pl_5 {
    padding-left: 5px !important;
}

.pl_10 {
    padding-left: 10px !important;
}

.pl_15 {
    padding-left: 15px !important;
}

.pl_20 {
    padding-left: 20px !important;
}

.pl_30 {
    padding-left: 30px !important;
}

.pr_1 {
    padding-right: 1px !important;
}

.pr_2 {
    padding-right: 2px !important;
}

.pr_3 {
    padding-right: 3px !important;
}

.pr_4 {
    padding-right: 4px !important;
}

.pr_5 {
    padding-right: 5px !important;
}

.pr_10 {
    padding-right: 10px !important;
}

.pr_15 {
    padding-right: 15px !important;
}

.pr_20 {
    padding-right: 20px !important;
}

.pr_30 {
    padding-right: 30px !important;
}

.pos-rel {
    position: relative !important;
}

.top_1 {
    top: 1px;
}

.top_2 {
    top: 2px;
}

.top_3 {
    top: 3px;
}

.top_4 {
    top: 4px;
}

.top_5 {
    top: 5px;
}

.cell .info-container {
    position: relative;
    display: inline-block;
}

.bold {
    font-weight: bold;
}

#leave-list td {
    vertical-align: top;
}

.col_wrap_100 {
    max-width:100px;
    word-wrap:break-word;
}