/*
** NOTE ABOUT STYLING
** There are two colours used for the styling of the ResourceLink brand.  
** Dark Blue #0339AC and Light Blue #7DA8EF
** If you want to change the colour scheme do a find and replace for these colours
*/

BODY {
    color: #0339AC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

IMG {
    border: 0px;
}

textarea {
	resize: none;
}

input[type='text'], input[type='password'], select, textarea {
    border:1px solid #576073;
}

/*Light Blue main channel that holds all content*/
div#main {
    background-image: url(../images/hrback.gif);
    background-repeat: repeat;
    border: 1px solid #7DA8EF;
    font-size: small;
    min-height: 100%;
    min-width: 710px;
    padding: 4px;
}

div#imageAlignment{
    float: left;
    width: 125px;
}

div#textAlignment{
    float: inherit;
}

div#error, .error {
    color: red;
    font-size: x-small;
    font-style: italic;
    font-weight: bold;
    height: 8px;
    padding: 0.25em 0.25em 0.25em 1em;
}

/*Places the logon channel on the page*/
div#loginBar {
    background-color: #FFFFFF;
    border: 1px solid #7DA8EF;
    float: right;
    padding: 0px;
    text-align: right;
}

/*Places the directory channel on the page*/
div#directoryBar {
    background-color: #E5EBF7;
    border: 0.01em solid #7DA8EF;
    margin-right: 1em;
    float: right;
    padding: 0.2em;
    text-align: right;
    height: 75px;
}

div#directoryBar form, div#directoryBar img {
    margin: 0.25em;
}

#directory {
    border-left: 0.1em solid #0339ac;
    border-right: 0.1em solid #0339ac;
    border-bottom: 0.1em solid #0339ac;
    font-size: small;
    width: 99%;
    margin-left: 0em;
    margin-right: 0em;
    margin-top: 0em;
    clear: left;
}

.searchBack {
    background-color: #E5EBF7;
}

.empDetails {
    font-weight: bold;
}

.empTitleBar {
    background-color: #E5EBF7;
    font-size: small;
    font-weight: bold;
    line-height: 1.5em;
}

#selectedPane {
    background-color: #E5EBF7;
    min-height: 3em;
    height: 100%;
    padding: 0.5em;
    margin: 0px;
}

#selectedDetails {
    background-color: #FFFFFF;
    border-bottom: 0.1em solid #0339ac;
    border-left: 0.1em solid #0339ac;
    border-right: 0.1em solid #0339ac;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-right: 0em;
    width: 99%;
    clear: left;
}

.selectedDetailsTab {
    background-color: #FFFFFF;
}

.history {
    font-size: xx-small;
}

.detailTitle {
    font-size: small;
    font-weight: bold;
}

.detailText {
    font-size: small;
    padding-left: 1em;
}

.email {
    font-size: small;
    text-decoration: underline;
}

.directoryHover {
    background-color: #cccccc;
}

.directoryHoverBack {
    background-color: #000000;
}

/*Places current date  on the page*/
div#loginDate {
    float: right;
    margin-top: 0px;
}

div#leftLogo {
    background-image: url(../images/slogan.gif);
    background-repeat: no-repeat;
    height: 75px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 440px;
}

div#warningMessage {
    border: 2px solid red;
    width: 99%;
    padding: 4px;
    margin: 0px;
    background-color: #FB9BAD;
}

/**
Used to space and distiguish between confirmation and alert messages
with mutliple submissions (e.g. Bulk holiday authorisation)
See confirmation.xsl / _confirmationsAndAlerts template
**/
.confirmationMessage {
    margin: 1em;
}

.alertMessage {
    margin: 1em;
    color: red;
}

.warningField {
    border: 1px solid red;
    width: 99%;
    padding: 4px;
    margin: 4px;
    background-color: #FEC5C9;
}

div#rightSlogan {
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
}

/*Places page content on the page*/
div#pageContent {
    margin-top: 10px;
    margin-bottom: 10px;
}

div#pageButtons {
    clear: both;
    line-height: 1.5em;
    margin-right: 1em;
    text-align: right;
}

div#topPageButtons {
    clear: both;
    line-height: 1.5em;
    text-align: right;
}

div#topPageButtons_tableDiv {
    float: right;
}

@-moz-document url-prefix() {
    div#topPageButtons_tableDiv {
        float: right;
    }
}

div#topPageButtons_tableInnerDiv {
    display: inline-block;
    float: left;
    text-align: right;
}

div#pageButtonLeft {
    line-height: 1.5em;
    margin-right: 1em;
    text-align: left;
}

/*Places copyright message on the page*/
div#pageCopyright {
    font-size: xx-small;
    text-align: right;
}

/*Places powered by Concerto image on the page*/
div#concertoLogo {
    margin-top: 0px;
    float: right;
    background-image: url(../images/concertoLogo.gif);
    background-repeat: no-repeat;
    width: 212px;
    height: 34px;
}

/* Style used for homepage channels */
div#channelBody {
    border: 1px solid #0339AC;
    font-size: small;
    margin-left: 1em;
    margin-right: 1em;
    min-height: 85px;
    padding: 4px;
    text-align: left;
    overflow-y: hidden !important;
}

/*Style used for ALL other channels*/
div#channelBodyWhite {
    background: #FFFFFF;
    border: 1px solid #0339AC;
    font-size: small;
    margin-left: 1em;
    margin-right: 1em;
    min-height: 85px;
    padding: 4px;
    text-align: left;
}

div#channelBodyWhiteNoPad {
    border: 1px solid #0339AC;
    font-size: small;
    padding: 0px;
    background: #FFFFFF;
    text-align: left;
}

div#pad {
    padding: 5px;
}

/*warning class for expenses */
.warning {
    background-color: red;
    border: 1px solid #0339AC;
}

/* links in login bar */
.loginLink {
    font-size: xx-small;
}

/*Background colour of all form section headers*/
.formSectionBackground {
    background: #7DA8EF;
    font-weight: bold;
}

/*Form Section Background*/
.sectionBackground {
    background: #E7F0FE;
    text-align: left;
}

/*Style used for ALL other channels-table equivalent*/
.channelBodyWhite {
    border: 1px solid #0339AC;
    font-size: small;
    padding: 4px;
    background: #FFFFFF;
    text-align: left;
}

/*Channels for the module homepages to show statuses*/
.channelBodyLight {
    border: 1px solid #7DA8EF;
    font-size: small;
    padding: 4px;
    background: #FFFFFF;
    width: 100%;
    text-align: left;
}

/*help channels on forms*/
.formchannelBodyLight {
    border: 1px solid #7DA8EF;
    font-size: small;
    padding: 4px;
    background: #FFFFFF;
    text-align: left;
}

.channelBodyWhiteNoPad {
    border: 1px solid #0339AC;
    font-size: small;
    padding: 0px;
    background: #FFFFFF;
    text-align: left;
}

.channelText {
    font-size: small;
}

.smallText {
    font-size: x-small;
}

.channelTextBold {
    font-weight: bold;
}

.pageBackground {
    background-image: url(../images/hrback.gif);
    background-repeat: repeat;
}

.displayOnlyField {
    background-color: #EAEAEA;
    border: 1px;
}

A {
    background: transparent;
    color: #0339AC;
    cursor: pointer !important;
    font-weight: bold;
    text-decoration: none !important;
}

A:hover {
    color: #7DA8EF;
    text-decoration: underline;
}

A.title {
    background: transparent;
    color: #0339AC;
    cursor: pointer !important;
    font-weight: bold;
    text-decoration: none !important;
}

A.title:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

FORM {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.button {
    background: transparent;
    color: #0339AC;
    font-weight: bold;
    cursor: pointer !important;
}

.treeNode {
    border: 0px;
    font-size: x-small;
    overflow: hidden;
    padding: 0px;
    font-weight: bold;
    background: none transparent scroll repeat 0% 0%;
    color: #0339ac;
    margin: -2px 0px -2px 0px;
}

.buttonOn {
    /*text-decoration : underline;*/
    cursor: pointer !important;
    color: #7DA8EF;
    font-weight: bold;
}

.buttonOff {
    text-decoration: none !important;
    color: #0339AC;
    font-weight: bold;
}

input.button, input.buttonOn, input.buttonOff {
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    text-align: center;
}

.channelBody {
    border: 1px solid #0339AC;
    font-size: small;
    padding: 4px;
}

.channelBackground {
    background: #6B96E4;
}

.channelForeground {
    background: #FFFFFF;
}

.channelDynamicTitle {
    font-weight: bold;
    color: #0339AC;
    font-size: medium;
    font-variant: small-caps;
}

.channelDynamic {
    font-weight: bold;
    color: #FFFFFF;
    font-size: small;
    background: #6B96E4;
}

.channelDynamicBack {
    background: #FFFFFF;
}

.channelTitle {
    color: #0339AC;
    font-size: small;
    font-weight: bold;
}

.channelTitleLarge {
    color: #0339AC;
    font-size: medium;
    font-weight: bold;
}

/* module heading */
.moduleHeading {
}

#moduleHeading {
    display: inline-block;
    width: 100%;
}

.moduleImage {
    width: 123px;
    height: 85px;
    float: left;
}

.moduleTitle, .moduleText {
    color: #0339AC;
    font-size: small;
}

.moduleText {
    float: inherit;
}

.moduleTitle {
    font-size: medium;
    font-weight: bold;
    line-height: 1.5em;
}

/* total titles and values for forms*/
.totalTitle {
    background: #0339AC;
    color: white;
    font-size: small;
    font-weight: bold;
    padding: 1px;
}

.totalValue {
    background: white;
    border: 1px solid #0339AC;
    color: #0339AC;
    font-size: small;
    font-weight: bold;
    padding: 1px;
}

.grandValue {
    background: white;
    border: 1px solid #0339AC;
    color: #0339AC;
    font-size: medium;
    font-weight: bold;
    padding: 1px;
}

/* date picker */
.DatePicker {
    background: #FFFFFF;
    border: 1px solid #0339AC;
    color: #0339AC;
    text-align: center;
}

.DatePickerHdr {
    background: #0339AC;
}

.DatePickerHdrBtn {
    background: #7DA8EF;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    text-align: center;
}

.DatePickerBtn {
    background: #FFFFFF;
    border: 1px solid #0339AC;
    color: #0339AC;
    cursor: pointer;
    text-align: center;
}

.DatePickerBtnSelect {
    background: #7DA8EF;
    color: white;
    cursor: pointer;
}

/* calendar */
.calendar {
    overflow: auto;
}

.calendar table {
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
}

.calendar table th {
    background-color: #0339ac;
    border: 1px solid white;
    color: white;
    font-size: xx-small;
    padding: 0.25em;
}

.calendar table thead th.calHead {
    border-bottom: 1px solid gray;
}

.calendar table th.calNav {
    text-align: center;
}

.calendar table th.calNavMulti {
    border-left: 0;
    border-right: 0;
    text-align: center;
}

.calendar table thead th input {
    background-color: #0339ac;
    border: 1px solid white;
    color: white;
    font-size: xx-small;
    margin: 0 0.25em;
    padding: 0.1em;
}

.calendar table tfoot th.calHead {
    border-top: 1px solid gray;
}

.calendar table tbody td {
    border: 1px solid gray;
    padding: 0;
    vertical-align: top;
}

.calendar table tbody td.calRowTitle {
    font-size: x-small;
    padding: 0.25em;
    padding-right: 0.5em;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.calendar table tbody td hr {
    border: 0;
    display: block;
    height: 4px;
    margin: 2px 0;
    padding: 0;
}

.calendar table tbody td hr.hidden {
    visibility: hidden;
}

.calendar hr.hidden {
    clear: both;
    visibility: hidden;
}

/* brandable elements */
.calWeekend {
    background-color: #92b6ff;
}

.calWeekday {
    background-color: #eff2fb;
}

.calToday {
    background-color: #0339ac;
}

.calLegend {
}

.calLegendKey {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    width: 16em;
}

.calLegendSubKey {
    display: none;
}

.warningMessage {
    background: none repeat scroll 0 0 #FEC5C9;
    border: 1px solid red;
    float: left;
    padding-left: 2px;
    width: 87.5%;
}

.warningFontColor {
   color: #ff0000;
}

.lineSpacing {
    padding-bottom: 10px;
    padding-top: 10px;
}
/* Questionnaires */
.questionnaireTable {
    width: 100%
}
/*.quesTitle {
	font-size: x-large;
	font-weight: bold;
}
.quesNotes {
	border: 2px solid #7da8ef;
	margin-bottom: 1em;
	margin-top: 1em;
	padding: 0.5em;
}
.quesSection {
	border: 1px solid #7da8ef;
	margin-bottom: 0.75em;
	margin-top: 0.75em;
}
.quesSectionTitle {
	background-color: #7da8ef;
	color: #0339ac;
	font-weight: bold;
	padding: 0.3em;
}
.quesSectionBody {
	border: 1px solid #7da8ef;
	padding: 1em;
}
.quesSectionNotes {
	border: 1px solid #7da8ef;
	padding: 0.5em;
}
.question {
	margin-bottom: 0.75em;
	margin-top: 0.75em;
}
.quesPrompt {
	clear: left;
	float: left;
	width: 35%;
}
.quesEntry {
	margin-left: 40%;
}
.quesHelp {
	color: #0339AC;
	font-style: italic;
	padding-top: 0px;
}
.quesError {
	color:red;
	font-style: italic;
	height:10px;
}
 */
/* Lists */
.list {
    clear: both;
}

.listTitle {
    background-color: #7da8ef;
    color: #0339ac;
    font-weight: bold;
    padding: 0.3em;
}

.listBody {
    border: 2px solid #7da8ef;
    border-top: none;
    padding: 0.3em;

}

.listBody .listData {
    height: 10em;
    overflow: auto;
}

div#list_courseSearchResults_body.listBody div#list_courseSearchResults_data.listData    {
    height: 18em;
    overflow: auto;
}

.listScroll {
    border: none !important;
    width: 1.2em;
}

.listHilite {
    background-color: #e7f0fe;
    border: 1px solid #0339ac;
    font-weight: bold;
}

.list table {
    width: 99%;
}

.list tbody {
    /* this only gets used by Mozilla */
    max-height: 8em; /* should be ~2em less than .listBody height */
    overflow: auto;
    width: 98%;
}

.list th {
    border-bottom: 1px solid #0339ac;
    text-align: center;
}

/**
Used in lists with selectable items.
**/

.selectionListButtons {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 1em;
}

.selectionListButtons .selectionListSelectionButtons {
    float: left;
}

.selectionListButtons .selectionListSubmissionButtons {
    float: right;
    left: -1em;
}

.moduleLinks {
    background-color: #e5ebf7;
    border: 1px solid #7da8ef;
    float: right;
    margin: 0.25em;
    min-width: 10em;
    padding: 0.25em;
    text-align: right;
}

.moduleLinks li {
    list-style-type: none;
}

.moduleLinks a {
    font-weight: normal;
}

h1 {
    font-size: medium;
    font-weight: bold;
}

.buttonBack {
    background-color: #FFFFFF;
}

th {
    /*text-align: left;*/
}

/* highlight DIVs and TABLEs for debugging 
DIV {
	border: 1px solid gray !important;
}
TABLE, TD {
	border: 1px solid red !important;
	vertical-align: top;
}
*/
TABLE, TD {
    vertical-align: top;
}

.fieldError {
    font-style: italic;
    color: red;
    font-size: xx-small;
}

#weekTab {
    /*border: 0.05em solid #0339ac;*/
    border-left: 0.1em solid #0339ac;
    border-right: 0.1em solid #0339ac;
    border-top: 0.1em solid #0339ac;
    border-bottom: 0.1em solid #0339ac; /*width: 13%;*/
    padding: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    float: left;
    text-align: center;
}

#weekTabSelected {
    /*border: 0.05em solid #0339ac;*/
    border-left: 0.1em solid #0339ac;
    border-right: 0.1em solid #0339ac;
    border-top: 0.1em solid #0339ac; /*width: 13%;*/
    padding: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0em;
    float: left;
    text-align: center;
}

#comments {
}

#authorisationNotes {
}

#expenseClaimHeader td {
    padding-left: 1em;
}

#mileageClaimSummary td {
    padding-left: 1em;
}

.mileageClaimLabel {
    padding-right: 1em;
    font-weight: bold;
}

.accommodationTotal {
    display: inline;
}

.tableWidthBorder {
    border: 0;
    width: 100%;
}

.sectionBackgroundSpacing {
    border: 0;
    cellpadding: 0;
    cellspacing: 4em;
    width: 100%;
}

.columnWidthThirtythree {
    width: 33%;
}

.columnWidthSixtySeven {
    width: 67%;
}

.loginFields {
    width: 83px;
}

.additionalPayClaimSelect select {
    width: 100%;
}

.buttonSuppressSpace {
    float: left;
}

.buttonSuppressSpaceOne {
    float: right;
}

.expensesListSummary {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/** Ensure that blank pages are not thrown due to floating objects. */
@media print {
    .expensesListSummary {
        clear: both;
    }
}

@-moz-document url-prefix() {
 .buttonSuppressSpaceOne {
      display: table;
 }
}
@-moz-document url-prefix() {
 .buttonSuppressSpaceTwo {
     display: table-row;
 }
}

@-moz-document url-prefix() {
 .buttonSuppressSpace {
      display: table-cell;
      font-size: small;
 }
}
.plusMinusButton {
    font-size: medium;
    width: 40px;
}

.rightAlign {
    float: right;
    border: 0;
    padding: 2px;
    border-collapse: collapse;
}

.leftAlignTopButton {
    text-align: left;
}

.rightAlignTopButton {
    text-align: right;
}

.centerAlignTopButton {
    text-align: center;
}

.tableWidthTopButton {
    margin-left:6px;
    width: 100%;
}

.expensesAlertImage {
    background: url('../images/alert.gif') no-repeat;
    padding-bottom: 8px;
}

.expensesWarningLayout,
.expensesLayout {
    width: 100%;
}

.btnDisabled .linkButton {
    background: transparent;
    color: #cccccc !important;
    text-decoration: none;
    border: 0;
    padding: 0;
}

.btnDisabled .buttonOn, .btnDisabled .buttonOff {
    background: transparent;
    color: #cccccc !important;
    text-decoration: none;
    font-weight: normal;
    border: 0;
    padding: 0;
}

.clearfix {
    clear: both;
    line-height: 1px;
}

.datepickerSet {
    position: relative;
    display: inline-flex;
}

.datepickerSet input, .datepickerSet img {
    vertical-align: middle;
}

.pdrDateSpace {
    padding-right: 15px;
}

.payslipInfo {
    background: transparent;
    border: 0 !important;
    cursor: pointer;
    padding: 2px 0;
}

.payslipInfo:focus {
    outline:0;
}