/* --------------------------------------------------------------------- */
/* Some fixes for the Project Light style.                               */
/* --------------------------------------------------------------------- */

/**
 * Since we're not using the Myriad Pro fonts from Typekit, don't use font
 * weights of 200 or 300 (lighter than normal) because they don't render
 * clearly on some browsers (e.g. Firefox on some platforms).
 */
blockquote p,
.campl-carousel-content p,
.campl-highlight-date,
.campl-homepage-content h2,
.campl-light-heading,
.campl-main-content-sub-column h2,
.campl-nav-pills,
.campl-nav-tabs,
.campl-page-header h1,
.campl-page-subtitle,
.campl-page-sub-title h2,
.campl-page-title,
.campl-primary-cta,
.campl-secondary-content h2,
.campl-slide-caption-txt,
.campl-sub-title,
h1,
legend {
    font-weight: normal;
}

h2,
h3,
h4,
h5,
h6,
.campl-btn,
.campl-global-footer h3,
.campl-global-navigation,
.campl-global-navigation-container,
.campl-global-navigation-header-container,
.campl-local-footer h3,
.campl-teaser-title {
    font-weight: normal !important;
}

/**
 * Don't allow words to be broken inside pre-formatted sections. Possibly
 * there are some situations where we might want to allow this, but it
 * doesn't seem like a sensible default.
 */
pre { word-break: normal; }

/**
 * Don't use "display: block" for labels, since that makes them 100% width,
 * causing a clickable region (with a pointer-style cursor) to span the
 * entire width of the page, which doesn't look good.
 */
label { display: table; }

/**
 * apps.css sets the width of all form legends to 50%, which causes them
 * to wrap long text in an ugly way. Restore the default of 100%.
 *
 * Also turn off the float left introduced by apps.css, which causes the
 * vertical spacing between the legend and the fist .campl-control-group
 * div to collapse. 
 */
legend { float: none; width: 100%; }

/**
 * Fix the pagination div to allow for the fact that sometimes the list
 * of page links wraps. This is far from perfect, but it is better than
 * overwriting the element below the pagination div.
 */
.campl-pagination { height: auto; }
.campl-pagination li { display: inline-block; }
.lt-ie8 .campl-pagination li { display: inline; }

/**
 * Useful extensions to the Project Light style. These allow block-level
 * elements to be displayed only on mobile or only on desktop devices.
 */
.campl-mobile-only { display: none; visibility: hidden; }
.campl-desktop-only { display: block; visibility: visible; }

@media (min-width: 768px) {
    .campl-mobile-only { display: none; visibility: hidden; }
    .campl-desktop-only { display: block; visibility: visible; }
}

@media (max-width: 767px) {
    .campl-mobile-only { display: block; visibility: visible; }
    .campl-desktop-only { display: none; visibility: hidden; }
}

/**
 * Option to override the alignment of the pagination element to make it
 * display on the left.
 */
.campl-pagination-left { text-align: left; }

/**
 * Another useful extension to the Project Light style - a notification
 * that doesn't have the close button.
 */
.campl-notifications-panel-noclose {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    margin-bottom: 20px;
    position:relative;
    -moz-box-shadow: 0 2px 1px 0 #eee;
    -webkit-box-shadow: 0 2px 1px 0 #eee;
    box-shadow: 0 2px 1px 0 #eee;
}
.campl-notifications-panel-noclose p {
    padding-top:5px
}

/**
 * Another extension to the Project Light style - tabs that are positioned
 * on the right.
 */
.campl-nav-tabs { padding-right: 20px; }
.campl-nav-tabs li.right { float: right; }

.campl-dev-content {
   background-image: url('../images/test-site-bg.gif');
   background-color: #fff;
}
/**
 * Some additional tweaks to the Project Light style to make it look better
 * in this application.
 */
.campl-page-header .campl-content-container {
    padding-top: 15px;
    padding-bottom: 5px;
}
.campl-page-header .campl-breadcrumb {
    padding-bottom: 8px;
}
.campl-page-title {
    font-size: 30px;
    line-height: 38px;
}

h1 { font-size: 25px; }
h2 { font-weight: normal; }
@media (max-width: 767px) { .campl-nav-tabs { padding-left: 20px; } }

/* Footer layout tweaks */
.campl-footer-navigation { height: 40px; }
.campl-footer-navigation .campl-footer-info { padding: 0 20px; }
@media (max-width: 767px) {
    .campl-footer-navigation { height: auto; }
    .campl-footer-navigation .campl-footer-info { padding-bottom: 30px; }
}


/* --------------------------------------------------------------------- */
/* Expandable/collapsable sections (requires suitable javascript)        */
/* --------------------------------------------------------------------- */

p.cam-show-section {
    background: url("../images/more.gif") no-repeat 0% 40%;
    color: #003366;
    cursor: pointer;
    display: table;
    margin: 2px 0px;
    padding: 0px;
    white-space: nowrap;
}
p.cam-show-section a { margin-left: 14px; }

p.cam-hide-section {
    background: url("../images/less.gif") no-repeat 0% 40%;
    color: #003366;
    cursor: pointer;
    display: table;
    margin: 2px 0px;
    padding: 0px;
    white-space: nowrap;
}
p.cam-hide-section a { margin-left: 14px; }

div.cam-shown-section {
    display: block;
    margin: 5px 0px 0px 14px;
    border: 1px solid white; /* Fixes layout issue on Firefox */
}

div.cam-hidden-section {
    display: none;
}


/* --------------------------------------------------------------------- */
/* Style the jQuery UI date picker button.                               */
/* --------------------------------------------------------------------- */

button.ui-datepicker-trigger {
    background-color: transparent;
    background-image: url("../images/calendar_icon.png");
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    color: transparent;
    height: 28px;
    margin: 0px;
    padding: 0px;
    width: 28px;
}

/* jQuery UI overrides */
.ui-menu-item {
    background: #eed !important;
    list-style-image: none !important;
}
.ui-state-highlight {
    border: 1px solid #dad55e !important;
    background: #fffa90 !important;
    color: #777620 !important;
}
.ui-state-active, .ui-state-hover {
    background: #09d !important;
    border: 1px solid #07d !important;
    color: #fff !important;
    font-weight: normal !important;
}
.ui-datepicker-clear, .ui-widget-content .ui-state-default {
    font-weight: bold !important;
}


/* --------------------------------------------------------------------- */
/* Password management CSS.                                              */
/* --------------------------------------------------------------------- */

.nowrap { white-space: nowrap; }
.right { text-align: right !important; }
.auto-width { width: auto; max-width: 100%; }
.auto-height { height: auto; }
.float-left { float: left; }
.no-right-padding { padding-right: 0; }
.no-bottom-padding { padding-bottom: 0 !important; }
.display-none { display: none; }

/* Disable Internet Explorer's password reveal in favour of ours */
::-ms-reveal, ::-ms-clear { display: none !important; }

/* Vertical stacking table, without borders */
@media (max-width: 767px) {
    table.pw-vertical-stacking-table tr { display: block; }
    table.pw-vertical-stacking-table td { display: block; }
}

/* Borderless table */
table.no-border td, table.no-border th { border: none; }

/** -----------------------------------------------------------------------
 * Table for the page title and login details in the header.
 */
table.pw-page-title-container {
    margin-bottom: 5px;
    width: 100%;
}

table.pw-page-title-container td {
    background-color: transparent;
    padding: 0;
    vertical-align: bottom;
}

table.pw-page-title-container td.pw-page-title-left { white-space: nowrap; }
table.pw-page-title-container td.pw-page-title-right { padding-left: 20px; }

@media (max-width: 767px) {
    table.pw-page-title-container { margin-bottom: 0px; }
    table.pw-page-title-container td.pw-page-title-left { margin-bottom: 20px; }
    table.pw-page-title-container td.pw-page-title-right { padding-left: 0; }

    p.campl-page-title { line-height: 36px; }
}

/* The page title itself, adapted to various screen sizes */
@media (max-width: 460px) { p.campl-page-title { font-size: 29px; line-height: 35px; } }
@media (max-width: 434px) { p.campl-page-title { font-size: 28px; line-height: 34px; } }
@media (max-width: 428px) { p.campl-page-title { font-size: 27px; line-height: 35px; } }
@media (max-width: 410px) { p.campl-page-title { font-size: 26px; line-height: 34px; } }

/** -----------------------------------------------------------------------
 * Page header ("You are logged in as..." details).
 */
.pw-login-details {
    color: #fff;
    text-align: right;
}

.pw-login-details a {
    border: 0;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.pw-login-details a:hover { text-decoration: underline; }

.pw-login-details a.pw-login {
    background-color: #171717;
    border: 1px solid #888;
    display: inline-block;
    margin: 5px 0 0 5px;
    padding: 2px 5px;
    text-decoration: none;
}

.pw-login-details a.pw-login:hover {
    background-color: #454545;
    text-decoration: none;
}

@media (max-width: 767px) {
    .pw-login-details { text-align: left; }
    .pw-login-details a { margin-right: 5px; }
    .pw-login-details span { margin-right: 5px; }
    .pw-login-details a.pw-login { margin: 5px 0 0 0; }
}

/** -----------------------------------------------------------------------
 * List of contacts that a message (email or text message) was sent to.
 */
.pw-message-contacts {
    display: inline-block;
    vertical-align: top;
}

/** -----------------------------------------------------------------------
 * Links to administrative actions for privileged users.
 */
.pw-admin-links {
    float: right;
    font-size: 14px;
    font-weight: normal;
    padding: 7px 0px;
    white-space: normal;
}

.pw-admin-links a { color: #0072cf; }
.pw-admin-links a:visited { color: #0072cf; }

/* Similar plain links for use elsewhere */
a.plain { color: #0072cf; }
a.plain:visited { color: #0072cf; }

/** -----------------------------------------------------------------------
 * Help text styles.
 */
.pw-inline-help {
    color: #555;
    margin-left: 5px;
}

.pw-help-block {
    margin-top: -16px;
    margin-bottom: 20px;
}

.pw-radio-help-block {
    margin-left: 16px;
}

.pw-raven-passwd-help {
    margin: -16px 0 20px 0;
}

/** -----------------------------------------------------------------------
 * Password strength indicator.
 */
input.pw-field-with-strength {
    float: left;
    margin-right: 10px;
}

.pw-strength {
    display: none;
    float: left;
}

.pw-strength-value {
    border: 1px solid black;
    font-size: 14px;
    font-weight: bold;
    height: 18px;
    line-height: 18px;
    text-align: center;
    width: 130px;
}

.pw-strength-comment {
    font-size: 13px;
    position: absolute;
    text-align: center;
    width: 130px;
}

@media (max-width: 767px) {
    .pw-strength-value {
        font-size: 18px;
        height: 24px;
        line-height: 24px;
        width: 170px;
    }

    .pw-strength-comment {
        font-size: 16px;
        position: static;
        width: 170px;
    }
}

.pw-debug-strength td {
    max-width: 200px;
}

/** -----------------------------------------------------------------------
 * Pwned password warning.
 */
.pw-warning {
    background-image: url(../campl/images/interface/icon-alert.png);
    background-position: 0px 3px;
    background-repeat: no-repeat;
    color: #800;
    display: none;
    float: left;
    font-size: 14px;
    margin-left: 20px;
    margin-top: -6px;
    height: 34px;
    overflow: visible;
    padding-left: 32px;
    width: 240px;
}
@media (max-width: 767px) {
    .pw-warning {
        background-position: 0px 23px;
        box-sizing: border-box;
        clear: both;
        float: none;
        font-size: 16px;
        height: auto;
        margin: 0px;
        padding: 20px 0px 20px 32px;
        width: 410px;
    }
}
@media (max-width: 449px) {
    .pw-warning {
        width: 100%;
    }
}

/** -----------------------------------------------------------------------
 * Further information about pwned passwords.
 */
div.pw-info h1, div.pw-info h2 {
    margin-bottom: 15px;
}

div.pw-info p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}

div.pw-info ul {
    margin-left: 20px;
}

div.pw-info li {
    line-height: 20px;
    margin-bottom: 20px;
}

div.pw-info li p {
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    div.pw-info p {
        font-size: 16px;
        line-height: 22px;
    }

    div.pw-info li {
        line-height: 22px;
    }
}

/** -----------------------------------------------------------------------
 * Password generator.
 */
input.pw-field-with-generator {
    margin-bottom: 3px;
}

.pw-generator {
    clear: both;
    margin-bottom: 20px;
}

.pw-generated-passwd {
    background-color: #f2f2e2;
    border: 1px solid #ccc;
    padding: 6px;
}

.pw-generated-passwd tt {
    display: block;
    font-size: 130%;
    font-weight: bold;
    margin: 5px;
    text-align: center;
}

.pw-hide-generated-passwd {
    background:url(../campl/images/interface/btn-close-panel.png) 0 0 no-repeat;
    float: right;
    width:23px;
    height:23px;
}

/** -----------------------------------------------------------------------
 * New password confirmation.
 */
input.pw-field-with-confirmation {
    float: left;
    margin-right: 10px;
}

.pw-confirmation {
    display: none;
    float: left;
    width: 130px;
    white-space: nowrap;
}

.pw-confirmation p {
    float: left;
}

@media (max-width: 767px) {
    .pw-confirmation {
        width: 170px;
    }
}

/** -----------------------------------------------------------------------
 * Password change request status.
 */
div.pw-change-status {
    white-space: nowrap;
}

div.pw-change-status .pw-change-status-icon {
    line-height: 16px;
    vertical-align: 1px;
}

div.pw-change-status .pw-change-status-help {
    margin-right: 20px;
}

div.pw-change-status .pw-hidden-client {
    color: #444;
    font-style: italic;
}

/** -----------------------------------------------------------------------
 * Self-service recovery.
 */
.pw-security-question {
    font-size: 120%;
}

.pw-security-question-other {
    display: none;
}

.pw-recovery-wait {
    font-size: 40px;
    padding: 20px 0px;
}

.pw-recovery-information {
    background-color: #eee;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
    padding: 5px 10px;
    margin-bottom: 20px;
}
.pw-recovery-information h2 {
    color: #444;
    font-weight: bold !important;
}

/** -----------------------------------------------------------------------
 * Table of attributes.
 */
.pw-attrs-table {
    border: none;
    margin-bottom: 10px;
}

.pw-attrs-table th, .pw-attrs-table td {
    border: none;
    padding: 4px 10px 4px 0px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
}

/** -----------------------------------------------------------------------
 * Audit table.
 */
.pw-audit-table {
    margin-bottom: 5px;
}

/** -----------------------------------------------------------------------
 * Search page.
 */
.pw-cancelled-people {
    margin: -8px 0 20px 0;
}

/** -----------------------------------------------------------------------
 * Table of people.
 */
.pw-person-table {
    clear: both;
    min-width: 30%;
    width: auto;
}

.pw-person-table th, .pw-person-table td {
    padding: 4px 10px 4px 5px;
}

.pw-person-table th.pw-link, .pw-person-table td.pw-link {
    padding: 0;
}

.pw-person-table th.pw-link a, .pw-person-table td.pw-link a {
    display: block;
    padding: 4px 10px 4px 5px;
}

.pw-plainlink { color: #171717 !important; text-decoration: none !important; }

/** -----------------------------------------------------------------------
 * Table of institutions.
 */
.pw-inst-table {
    clear: both;
    min-width: 50%;
    width: auto;
}

.pw-inst-table th, .pw-inst-table td {
    padding: 4px 10px 4px 5px;
}

.pw-inst-table th.pw-link, .pw-inst-table td.pw-link {
    padding: 0;
}

.pw-inst-table th.pw-link a, .pw-inst-table td.pw-link a {
    display: block;
    padding: 4px 10px 4px 5px;
}

/** -----------------------------------------------------------------------
 * Password resetters.
 */
.pw-nested-table .right {
    padding-left: 10px;
}

textarea.autocomplete-person {
    width: 90%;
    height: auto;
}

/** -----------------------------------------------------------------------
 * Check passwords page.
 */
textarea.pw-check-passwords {
    width: 80%;
    height: 200px;
}

div.pw-check-password-results {
    background-color: #e5e5e5;
    border: 1px solid #ddd;
    display: inline-block;
    font-family: monospace;
    padding: 4px;
    width: auto;
}
div.pw-check-password-results.correct {
    background-color: #e5ffe5;
}
div.pw-check-password-results.incorrect {
    background-color: #ffe5e5;
}

/** -----------------------------------------------------------------------
 * YAML configuration.
 */
.yaml-config-value {
    color: #00f;
}

/** -----------------------------------------------------------------------
 * A nested table designed to fill a regular table cell.
 */
.pw-nested-table {
    border: none;
    width: 100%;
}

.pw-nested-table td {
    background-color: transparent !important;
    border: none;
    padding: 0;
}

/** -----------------------------------------------------------------------
 * Smaller buttons for pages that aren't forms.
 */
.pw-small-btn {
    padding: 2px 8px 3px 8px;
}

.pw-tiny-btn {
    font-size: 12px;
    line-height: 14px;
    margin: 0;
    padding: 1px 4px 1px 4px;
}

/** -----------------------------------------------------------------------
 * A button the same height as text boxes.
 */
.pw-input-btn {
    height: 28px;
    line-height: 18px;
    margin-bottom: 9px !important;
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    .pw-input-btn {
        height: 32px;
        line-height: 22px;
    }
}

/** -----------------------------------------------------------------------
 * Radio button styling.
 */
.pw-radio { margin-bottom: 5px; padding-left: 18px; }
.pw-radio input { margin: 3px 0px 3px -18px; vertical-align: -1px; }

/** -----------------------------------------------------------------------
 * Messages.
 */
.pw-no-next-prev-message { color:#a99; }

.pw-message-container { padding: 10px 60px 10px 30px; }

.pw-info-message {
    background-color: #edc;
    border: 1px solid #886;
    display: table;
    margin: 20px 0;
    padding: 6px;
}

/** -----------------------------------------------------------------------
 * Table cell style to allow/encourage long words to be wrapped, and limit
 * the width of this table column.
 *
 * For a vertically stacked table, disable the maximum width.
 */ 
td.pw-wraplong {
    max-width: 20em;
    word-wrap: break-word;
}

@media (max-width: 767px) {
    table.campl-vertical-stacking-table td.pw-wraplong {
        max-width: none;
        word-break: break-all;
        word-wrap: break-word;
    }
}

/** -----------------------------------------------------------------------
 * Status of a password resetter's training on the password resetters
 * management page.
 */
.pw-resetter-trained { background-color: #6f6 !important; }
.pw-resetter-untrained { background-color: #f66 !important; }
.pw-resetter-will-need-retraining { background-color: #ea4 !important; }

/** -----------------------------------------------------------------------
 * Left and right table captions.
 */
.pw-caption-left { float: left; margin-bottom: 2px; }
.pw-caption-right { float: right; margin-bottom: 2px; }

/** -----------------------------------------------------------------------
 * Password reset token generator.
 */
.pw-token-field {
    float: left;
    margin-right: 10px;
    margin-bottom: 3px !important;
}

.pw-token-validation {
    display: none;
    float: left;
}

.pw-token-validation p {
    float: left;
}

.pw-token-generator {
    clear: both;
    margin-bottom: 20px;
    width: 350px;
}

.pw-token-generator-issued {
    display: inline;
    margin-bottom: 0;
}

.pw-token-overlay {
    background: #666;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

/** -----------------------------------------------------------------------
 * Printable preview of password reset token.
 */
.pw-token-container {
    background: #fff;
    position: absolute;
    width: 148mm;   /* A6 paper width */
    height: 105mm;  /* A6 paper height */ 
}

.pw-hide-token-preview {
    background:url(../campl/images/interface/btn-close-panel.png) 0 0 no-repeat;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 23px;
    height: 23px;
}

.pw-token-container iframe {
    border: none;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    width: 118mm;   /* A6 paper width (148mm), minus 15mm margins */
    height: 75mm;   /* A6 paper height (105mm), minus 15mm margins */
    top: 15mm;  /* Centred in A6 container */
    left: 15mm; /* Centred in A6 container */
}

.pw-print-token {
    position: absolute;
    bottom: 5px;
    right: 6px;
}

@media print {
    .pw-token-overlay {
        background: #fff;
    }

    .pw-token-container {
        width: 118mm;   /* A6 paper width (148mm), minus 15mm margins */
        height: 75mm;   /* A6 paper height (105mm), minus 15mm margins */
        top: 0 !important;
        left: 0 !important;
    }

    .pw-hide-token-preview {
        display: none;
    }

    .pw-token-container iframe {
        top: 0;
        left: 0;
    }

    .pw-print-token {
        display: none;
    }
}