﻿/* Jquery UI Overrides
----------------------------------------------------------- */

/*This fixes the jquery ui issue where the month selection dropdown in IE8 automatically collapses when trying to select a month*/
.ui-widget select {
    font-family: inherit;
}

.ui-widget-content {
    color: inherit;
}

/* General Page Styles
-----------------------------------------------------------*/
tr {
    font-size: 13px;
}

.italic {
    font-style: italic;
}

.strong {
    font-weight: bold;
}

/* Details and Form Entry Styles Styles
-----------------------------------------------------------*/
.form-input-grouping, .form-input-grouping-padded-bottom, .form-input-grouping-narrow {
    background: #F1F1F1;
    border: 1px solid #D5D5D5;
}

    .form-input-grouping .actions {
        margin-left: 158px;
        margin-top: 6px;
    }

        .form-input-grouping .actions div {
            margin-top: 25px;
        }

    .form-input-grouping-padded-bottom th, .form-input-grouping th, .form-input-grouping-narrow th {
        background: #F1F1F1;
    }

.date-text-input, .value-range-input {
    background: #FFF;
    border: 1px solid #CDCDCD;
    color: #222;
}

select {
    background: #FFF;
    border: 1px solid #CDCDCD;
    color: #222;
}

.column-data-container {
    border-bottom: 1px solid #CDCDCD;
}

.total-line .editor-field {
    border-top: 1px solid #CDCDCD;
}

.editor-label {
    color: #929292;
    font-size: 15px;
    font-weight: bold;
}

.form-text-input, .editor-field input[type="text"], .editor-field input[type="tel"], .editor-field input[type="number"], .editor-field input[type="password"], .editor-field textarea, .editor-field input[type="email"], .editor-field input[type="url"], .editor-field-larger input[type="password"] {
    color: #222;
    background: #FFF;
    border: 1px solid #CDCDCD;
}

.upload-editor .editor-label {
    font-size: inherit;
}

.editor-field .field-note {
    color: grey;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    margin: 4px;
    width: auto;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    top: 12px;
}

select:disabled, option:disabled, select[disabled] > option, keygen:disabled {
    color: graytext;
    cursor: auto;
}

.permanent-required-field-asterix:after,
.required-field-asterix:after,
.required-field-asterix-clear:after {
    font-weight: bold;
    color: red;
    padding-left: 5px;
    content: "*";
}

.required-field-asterix-clear:after {
    color: transparent;
}

/* Button Styles
-----------------------------------------------------------*/
.button {
}

.primary-button,
.secondary-button {
    font-size: 13px;
    font-family: 'Open Sans';
}

.primary-button {
    background-color: #65B1D0; /* older browsers*/
    background: -moz-linear-gradient(top, rgba(101,177,208,1) 0%, rgba(68,162,197,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(101,177,208,1)), color-stop(100%,rgba(68,162,197,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(101,177,208,1) 0%,rgba(68,162,197,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(101,177,208,1) 0%,rgba(68,162,197,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(101,177,208,1) 0%,rgba(68,162,197,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(101,177,208,1) 0%,rgba(68,162,197,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65b1d0', endColorstr='#44a2c5',GradientType=0 ); /* IE6-9 */
    border: 1px solid #4299b7;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(59, 149, 187, 1);
    text-align: center;
    text-decoration: none;
    line-height: 25px;
    outline: 1px solid #347ec3;
    box-shadow: 1px 1px #347ec3;
    padding: 0px 6px;
    margin-left: 11px;
    display: inline-block;
    box-sizing: border-box;
}

    .primary-button:disabled {
        background: #c5dae8;
    }

.secondary-button {
    background-color: rgb(254,254,254); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(218,218,218,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,254,1)), color-stop(100%,rgba(218,218,218,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(218,218,218,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(218,218,218,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(218,218,218,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(254,254,254,1) 0%,rgba(218,218,218,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#dadada',GradientType=0 ); /* IE6-9 */
    border: 1px solid #d2d2d2;
    color: #505050;
    text-shadow: 0px 1px 0px rgba(242, 242, 242, 1);
    text-align: center;
    text-decoration: none;
    line-height: 25px;
    outline: 1px solid #bfbfbf;
    box-shadow: 1px 1px #bfbfbf;
    padding: 0px 6px;
    margin-left: 11px;
    display: inline-block;
    box-sizing: border-box;
}

    .secondary-button:disabled {
        background: #cecece;
    }

.disabled-link {
    text-decoration: underline;
    color: gray;
}

.link-as-primary-button {
    background: -webkit-linear-gradient(#5695c0, #4b89b2); /* For Safari */
    background: -o-linear-gradient(#5695c0, #4b89b2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#5695c0, #4b89b2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#5695c0, #4b89b2); /* Standard syntax */
    background-color: #5695c0; /* older browsers*/
    color: #ffffff;
    border-bottom: 1px solid #add7ff;
    outline: 1px solid #347ec3;
    -moz-box-shadow: #347ec3, 1px 1px;
    -webkit-box-shadow: #347ec3, 1px 1px;
    box-shadow: 1px 1px #347ec3;
    text-decoration: none;
    padding: 7px 0;
    display: block;
}

input[type=submit].styled-as-link,
input[type=button].styled-as-link,
button.styled-as-link {
    background: none;
    border: none;
    margin: auto;
    padding: 0;
}

    input[type=submit].styled-as-link:hover,
    input[type=button].styled-as-link:hover,
    button.styled-as-link:hover,
    .link-with-no-href {
        cursor: pointer;
    }

/* List Page Styles
-----------------------------------------------------------*/
.hover-table tr:nth-child(odd), .display-table tr:nth-child(odd) {
    background-color: #F1F1F1;
}

/*Used for IE8*/
.hover-table tr.odd, .display-table tr.odd {
    background-color: #F1F1F1;
}

.hover-table tbody tr:hover {
    background-color: #D8D8D8;
}

.hover-table tbody tr[data-link]:hover {
    cursor: pointer;
}

.hover-table tbody tr:not([data-link]) {
    cursor: default;
}

.hover-table th, .hover-table th label,
.hover-table th a, .hover-table th a {
    color: #232323;
    font-family: Arial;
    font-size: 16px;
}

.hover-table thead {
    border-bottom: solid 1px #CACACA;
}

.page-size-selector a {
    color: #5397c5;
}

.page-size-selector span {
    color: #727272;
}

.page-number {
    text-align: center;
}

.page-number-active {
    background-color: #5397c5;
    color: white;
}

.page-navigation a {
    text-decoration: none;
    color: #5397c5;
}

.page-navigation span {
    color: #727272;
}

.page-number a {
    text-decoration: none;
    color: #232323;
}

.page-number:hover {
    background-color: #5397c5;
}

    .page-number:hover a:hover {
        color: white;
        text-decoration: none;
    }

.page-number-selectable {
    background-color: #F1F1F1;
}

.list-result-selected {
    position: relative;
}

    .list-result-selected:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        opacity: 0.5;
        transition: opacity 0.5s linear;
    }

.alert-asterix {
    font-weight: bold;
    color: red;
}

/* Alert Message Styles
-----------------------------------------------------------*/
.alert-title {
    font-weight: bold;
}

.alert-text,
.alert-text p {
    color: #b84543;
}

.error-alert-message,
.validation-summary-errors {
    background: #f2dedf;
    border: 1px solid #e7b3b5;
    color: #b84543;
    padding-left: 15px;
    padding-right: 15px;
}

    .error-alert-message p {
        color: #b84543;
    }

.validation-summary-errors {
    margin-bottom: 1em;
}

    .validation-summary-errors ul:before {
        color: #b84543;
        content: "Validation Errors";
    }

    .validation-summary-errors li:first-child {
        margin-top: 0.5em;
    }

    .validation-summary-errors li {
        color: #b84543;
        font-weight: normal;
        list-style-type: none;
    }

.minor-alert-message, .minor-static-message {
    background: #f3eed1;
    border: 1px solid #f1d29f;
    color: #e0962f;
    padding-left: 15px;
    padding-right: 15px;
}

    .minor-alert-message p, .minor-static-message p {
        color: #e0962f;
    }

.success-message {
    background: #e0efd8;
    border: 1px solid #b1d1ad;
    color: #468848;
    padding-left: 15px;
    padding-right: 15px;
}

    .success-message p {
        color: #468848;
    }

.information-message {
    background: #daecf8;
    border: 1px solid #add0e3;
    color: #3787ad;
    padding-left: 15px;
    padding-right: 15px;
}

    .information-message p {
        color: #3787ad;
        text-align: left;
    }

    .information-message .throbber {
        background-image: url("images/throbber.gif");
    }

.prompt-message {
    background: #F3EED1;
    border: 1px solid #E2A047;
    color: #E2A047;
}

    .prompt-message p {
        color: #E2A047;
    }


/*We want the throbber to be preloaded as sometimes the it is displayed on naviagating from a page, at which point nothing will be loaded */
.throbber-pre-load {
    background: url("images/throbber.gif") no-repeat -9999px -9999px;
}

/* Page specific headers
-----------------------------------------------------------*/
.page-specific-header {
    border-bottom-color: #cbcbcb;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
}

    .page-specific-header .more-details-links {
        font-weight: normal;
        font-size: 11px;
    }

/* Accordion Page Styles
-----------------------------------------------------------*/

.accordion-section .section-header {
    cursor: pointer;
}

.section-header h2 {
    color: #232323;
    border: solid 1px #CACACA;
    background-color: #F1F1F1;
}

.accordion-section .section-header:before {
    background: url(images/collapsed-accordion-section.png) #F1F1F1 center no-repeat;
    border: solid 1px #CACACA;
    border-right: none;
    font-family: Arial;
}

.accordion-section .section-header:hover h2 {
    color: #CDCDCD;
}

.accordion-section.expanded-section h2 {
    color: #232323;
}

.accordion-section.expanded-section .section-header:before {
    background: url(images/expanded-accordion-section.png) #F1F1F1 center no-repeat;
}

.accordion-section.expanded-section .section-header:hover h2 {
    color: #CDCDCD;
}

.section-content {
    border: solid 1px #CACACA;
    border-top: none;
}

.top-border-only {
    border-top: 1px solid #cacaca;
}

.section.read-only .section-header h2 {
    background: none;
}

.section.multi-part-form {
    border-bottom: solid 1px #CACACA;
    background-color: #F1F1F1;
}

    .section.multi-part-form .section-content {
        border-bottom: none;
    }

.grey-background-color {
    background-color: rgb(241, 241, 241);
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #e7b3b5 !important;
    background-color: #f2dedf !important;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
    line-height: normal;
}

.validation-summary-valid {
    display: none;
}

.error {
    color: red;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
.adjacentTables {
    clear: none;
    float: left;
    margin: 0;
    padding: 0.5cm;
}

.displayFieldsInPairs {
    max-width: 65em;
}

    .displayFieldsInPairs .editor {
        display: inline-block;
    }

    .displayFieldsInPairs .editor-label {
        width: 12em;
        margin: 0.5em;
    }

    .displayFieldsInPairs .editor-field {
        width: 17em;
        margin: 0.5em;
    }

.buttons {
    clear: both;
    float: left;
}

.navlinks {
    clear: both;
    float: left;
}

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;
}

.editor-field input[readonly] {
    color: GrayText;
}

input[readonly] {
    color: GrayText;
}

.ui-tooltip {
    width: 300px;
    z-index: 101;
}

.new {
    display: none;
}

.dependent-field-group .editor {
    display: inline-block;
    vertical-align: top;
}

.dependent-field-group .dependent-fields .editor-label {
    width: 15em;
}

.dependent-field-group .dependent-fields {
    display: inline-block;
    vertical-align: top;
}

    .dependent-field-group .dependent-fields .editor {
        display: block;
    }


.inline-fields .editor {
    display: inline-block;
}

    .inline-fields .editor .editor-label {
        width: auto;
    }

.dependent-field-group .dependent-fields.inline-fields .editor {
    display: inline-block;
}

.dependent-field-group .dependent-fields .inline-fields .editor {
    display: inline-block;
}

.dependent-field-group .dependent-fields .inline-fields .editor-label {
    width: auto;
}

input.simple-list {
    width: 5em;
}

tbody tr:first-child .notFirstRow {
    display: none;
}

.tree-group {
    margin-left: 20px;
}

.upper-case input, input.upper-case {
    text-transform: uppercase;
}

.lower-case input, input.lower-case {
    text-transform: lowercase;
}

/* Styles for lists
-----------------------------------------------------------*/
th {
    background: #FFF;
    height: 50px;
    text-align: left;
}

    th.asc, th.desc {
        font-weight: bold;
    }

tr.template {
    display: none;
}

/* Styles for details
-----------------------------------------------------------*/

.details {
    display: inline-block;
    max-width: 705px;
}

    .details .display-label {
        display: inline-block;
        width: 130px;
        font-weight: bold;
        vertical-align: top;
    }

    .details .display-field {
        display: inline-block;
        width: 200px;
    }

ul.navlinks {
    list-style: none;
    padding: 0px;
}

    ul.navlinks li {
        display: inline;
    }

        ul.navlinks li:after {
            content: " | ";
        }

        ul.navlinks li:last-child:after {
            content: "";
        }

        ul.navlinks li.backLink:before {
            content: "\003c";
        }

/* Generic styles
-----------------------------------------------------------*/

div.header h2 {
    float: left;
}

div.header .backlink {
    float: right;
}

.scrolling-list {
    overflow-y: auto;
}

ul.scrolling-list {
    border: 1px solid #dbdbdb;
}

div.rowNeon {
    margin: 1em 0;
}

    div.rowNeon div {
        display: inline;
        margin-right: 2em;
        min-width: 10em;
    }

.pixel-border {
    border: 1px solid #d5d5d5;
}

/* Export Helper 
 --------------------------------------------------------------*/

.export-options ul {
    display: inline-block;
}

.export-options li {
    display: inline-block;
}

/* Autocomplete
 --------------------------------------------------------------*/

ul.ui-autocomplete {
    list-style: none;
    z-index: 101;
    max-height: 300px;
    overflow: auto;
    padding-left: 5px;
}

    ul.ui-autocomplete li {
        margin: 4px 0;
    }

        ul.ui-autocomplete li div {
            text-decoration: none;
            color: #666;
        }

.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-state-focus, .ui-autocomplete .ui-state-hover {
    border: none;
    background: #F1F1F1;
    background-image: none;
    color: #222222;
    margin: 0;
}

/*  Styles for details pages - need to be moved when decision 
    made by Marketing
 --------------------------------------------------------------*/
.scrolling-list-option {
    font-family: "Open Sans";
    font-size: 12px;
    line-height: 10px;
    padding: 5px;
}

ul.scrolling-list li {
    font-family: "Open Sans";
    font-size: 10px;
    line-height: 10px;
    border-bottom: solid 1px #D9D9D9;
}

    ul.scrolling-list li:last-child {
        border: none;
    }

.hover-note {
    width: 1em;
    height: 1em;
    background-color: red;
    display: inline-block;
}

.pending-change-in-progress {
    cursor: progress;
}

.pending-change {
    cursor: wait;
    position: relative;
}

    .pending-change:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        opacity: 0.5;
        transition: opacity 0.5s linear;
        z-index: 100;
    }

div.horizontal-rule {
    background-color: #B8B8B8;
}

#creditAdminSelectAllNoneCheckBox {
    font-size: 11px;
}

#formCreditAdmin .section-content {
    padding: 15px;
}

#formCreditAdmin .resultList {
    max-height: 200px;
    overflow-y: scroll;
}

/*----------------Cookie Policy------------------------------------------------*/
#cookie-policy-table td, #cookie-policy-table th, #cookie-policy-table tr {
    border: 1px black;
    border-style: solid;
    padding: 10px;
    line-height: 15px;
}

#hyperlink-cells {
    vertical-align: top;
}

.italic-text {
    font-style: italic;
}