/* --------------------------------------------------------------------- */
/* Some fixes and extensions to 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) or 600 (bolder 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 !important;
}

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;
}

.campl-listing-title,
.campl-vertical-breadcrumb {
    font-weight: bold !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: inline-block; }

/**
 * 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 rendering issue for select fields on some versions of Firefox
 * (46.0.1 on MCS Linux).
 */
select {
    padding-bottom: 0px;
    padding-top: 0px;
}

/**
 * The default height of textareas in Project Light is 18px (and 22px in
 * mobile mode), which is just stupid. Override that with something a bit
 * more generally useful.
 */
textarea { height: 9em; }
textarea.campl-input-block-level { height: 9em; }

/**
 * An extra-extra large input field.
 */
.campl-input-xxl {
    width: 400px;
}
@media screen and (max-width: 459px) {
    .campl-input-xxl {
        width: 100%;
    }
}

/**
 * Fix the search button in the header search box so that it doesn't cause
 * the page to be slightly wider than the browser window resulting in a
 * horizontal scrollbar at certain window widths.
 */
.campl-search-input input.campl-search-submit { margin-right: 0px; }

/**
 * Fix alignment problem of radio buttons and checkboxes with their label
 * text in mobile mode.
 */
@media screen and (max-width: 767px) {
    label.campl-radio    input[type=radio]    { margin-top: 3px; }
    label.campl-checkbox input[type=checkbox] { margin-top: 3px; }
}

/**
 * Fix alignment of lists in mobile mode, and don't put such a large gap
 * between list items.
 */
@media screen and (max-width: 767px) {
    ul, ol { margin-left: 18px; }
    li { margin-bottom: 10px; }
}

/**
 * Fix the alignment of text in links inside the vertical breadcrumbs
 * navigation list that is sometimes used on the left-hand side of pages.
 */
ul.campl-vertical-breadcrumb-navigation a,
ul.campl-vertical-breadcrumb-children a {
    background-position: 0px 4px !important;
    display: block;
}

/**
 * In mobile mode, make buttons the same size as primary cta links, since
 * they often appear side-by-side.
 */
@media screen and (max-width: 767px) {
    .campl-btn {
        font-size: 18px;
        line-height: 22px;
    }
}

/**
 * Fix the font size of listing titles in search results in mobile mode, so
 * they are bigger than the main search result text.
 */
.campl-listing-title {
    line-height: 20px;
}
@media screen and (max-width: 767px) {
    .campl-listing-title {
        font-size: 17px;
        line-height: 23px;
    }
}

/**
 * Fix the font size of list items in mobile mode to match other text.
 */
@media screen and (max-width: 767px) {
    li {
        line-height: 22px;
    }
}

/**
 * Fix the positioning of the background image on external links.
 */
a.campl-external {
    background-position: 100% 2px;
}
@media screen and (max-width: 767px) {
    a.campl-external {
        background-position: 100% 5px;
    }
}

/**
 * Disable hover effects in striped tables, since it clashes with the
 * striping.
 */
table.campl-table-striped tbody tr:nth-child(even) td,
table.campl-table-striped tbody tr:nth-child(even) th {
    background-color: #fff;
}

table.campl-table-striped tbody tr:nth-child(odd) td,
table.campl-table-striped tbody tr:nth-child(odd) th {
    background-color: #d2f3e1;
}

/**
 * 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 elements to be
 * displayed only on mobile or only on desktop devices.
 */
@media print, screen and (min-width: 768px) {
    .campl-mobile-only { display: none !important; }
}

@media screen and (max-width: 767px) {
    .campl-desktop-only { display: none !important; }
}

/**
 * Extensions to the Project Light style that were obviously missing, since
 * it has campl-no-top-padding and campl-no-left-padding.
 */
.campl-no-bottom-padding { padding: 20px 20px 0px 20px; }
.campl-no-right-padding { padding: 20px 0px 20px 20px; }

/**
 * 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; }

/**
 * Improve the hover effect of tabs and pills, since apps.css makes the
 * default background colour almost the same as the hover colour. Also make
 * pills consistent with tabs, which apps.css fails to do.
 */
.campl-nav li a:hover { background-color: #ddd; }
.campl-nav-pills > li > a { background-color: #f1efed; }

/**
 * Tabs with no bottom margin. Useful when the content below the tabs has
 * something like a secondary content div.
 */
div.campl-tabs-no-margin ul { margin-bottom: 0px; }

/**
 * 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-header .campl-breadcrumb li {
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.campl-page-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    line-height: 32px;
}

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

/**
 * Menu displaying additional tabs that won't fit horizontally in the space
 * available. This requires the dynamic_tabs.js JavaScript.
 */
li.campl-nav-tabs-more {
    position: relative;
}

li.campl-nav-tabs-more a {
    font-size: 18px;
    font-weight: bold;
    outline: none;
}

ul.campl-nav-tabs-left-menu {
    background-color: #08c;
    position: absolute;
    left: 0px;
    white-space: nowrap;
}

ul.campl-nav-tabs-right-menu {
    background-color: #08c;
    position: absolute;
    right: 2px;
    white-space: nowrap;
}

ul.campl-nav-tabs-left-menu li, ul.campl-nav-tabs-right-menu li {
    display: block;
    margin: 0px;
}

ul.campl-nav-tabs-left-menu li a, ul.campl-nav-tabs-right-menu li a {
    background-color: #f1efed;
    color: #0072CF;
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin-top: 2px;
    padding: 8px 12px;
    text-decoration: none;
}

ul.campl-nav-tabs-left-menu li.active a, ul.campl-nav-tabs-right-menu li.active a {
    background-color: #08c;
    color: #fff;
    cursor: default;
}

/**
 * Input field for selecting files (<input type="file".../>) styled to be
 * consistent with other Project Light buttons. This is quite tricky to
 * achieve, and requires wrapping the input field in 3 nested div's, using a
 * span for the file name label, and some JavaScript to update the label when
 * a file is chosen.
 *
 * The necessary markup structure is
 *
 * <div class="campl-file-input">
 *     <div class="campl-file-input-btn campl-btn">
 *         Choose file
 *         <div class="campl-file-input-btn-holder">
 *             <input type="file".../>
 *         </div>
 *     </div>
 *     <span class="campl-file-input-label">No file chosen</span>
 * </div>
 *
 * User-visible styling (e.g., the campl-btn class) needs to be applied to
 * the second-level nested div.
 *
 * See the <campl:fileInput/> tag.
 */
div.campl-file-input {
    display: inline-block;
}

div.campl-file-input div.campl-file-input-btn {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 5px;
    position: relative;
}

div.campl-file-input div.campl-file-input-btn div.campl-file-input-btn-holder {
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

div.campl-file-input div.campl-file-input-btn div.campl-file-input-btn-holder input[type=file] {
    color: transparent;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0px;
    right: 0px;
}

div.campl-file-input span.campl-file-input-label {
    margin-right: 10px;
}

/**
 * Project Light defines the class "hidden" to mean "display:none;". However,
 * it is useful to use a hidden submit button on forms to define the default
 * form action, and "display:none;" prevents such a button from working, so
 * instead make it mean "displayed, but offscreen". This applies only to
 * submit buttons.
 */
input[type=submit].hidden {
    border: none;
    background: none;
    clip: rect(0 0 0 0);
    color: transparent;
    display: inline-block !important;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    width: 0px;
    height: 0px;
    top: -1000px;
    visibility: visible; /* Necessary for this to work on IE */
}

/**
 * Pure CSS vertical stacking table, requiring no JavaScript. This may be
 * combined with campl-table-bordered to give each row a faint border.
 */
@media screen and (max-width: 767px) {
    table.vertical-stacking-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    table.vertical-stacking-table tr { display: block; }
    table.vertical-stacking-table td { display: block; }

    /* Bordered vertical stacking table */
    table.campl-table-bordered.vertical-stacking-table { border-left: 1px solid #e4e4e4; }
    table.campl-table-bordered.vertical-stacking-table tr { border-top: 1px solid #e4e4e4; }
    table.campl-table-bordered.vertical-stacking-table td { border: none; }

    /* A table cell that acts as a header */
    table td.header { font-weight: bold; }

    /* A table cell to be displayed on the same line as the next one */
    table td.merge-with-next { float: left; margin-right: 10px; }

    /* A table cell prefixed with a label in a data attribute */
    table td[data-label]:before {
        color: #447;
        content: attr(data-label);
        font-style: italic;
        font-weight: normal;
        margin-right: 4px;
        vertical-align: top;
    }
    table td[data-label=""],
    table td[data-label=""]:before {
        display: none;
        padding: 0px;
    }

    /* A table cell that introduces a gap, breaking the border as well, to
       make the table look like 2 tables */
    table td.gap {
        background-color: #fff !important;
        box-shadow: 10px 0px 0px 0px #fff, -10px 0px 0px 0px #fff;
    }
}
@media print, screen and (min-width: 768px) {
    /* A table cell that is as narrow as possible */
    table td.narrow { width: 1em; }
}

/* A table cell with the appearance of a th element */
table td.th {
    background-color: #28828a !important;
    color: #fff;
    font-weight: bold;
}
table td.th a {
    color: #fff;
}

/**
 * Vertical stacking table where each row is displayed as a separate card in
 * the mobile view.
 */
@media screen and (max-width: 767px) {
    table.vertical-stacking-cards thead tr { position: absolute; top: -9999px; left: -9999px; }

    table.vertical-stacking-cards {
        border: none;
    }

    table.vertical-stacking-cards tr {
        border: 3px solid #d2f3e1;
        display: block;
        margin-bottom: 20px;
    }

    table.vertical-stacking-cards td {
        background-color: #fff !important;
        border: none;
        display: block;
    }

    table.vertical-stacking-cards td.header {
        background-color: #d2f3e1 !important;
        font-weight: bold;
        padding-top: 1px;
    }
}

/**
 * Support for wide elements in pages (wider than Project Light's usual
 * maximum page width). See the <campl:wideElement> tag.
 */
@media screen and (min-width: 1178px) {
    .campl-wrap-wide {
        display: table;
        min-width: 1177px;
        width: auto;
    }
}
.campl-main-content-wide h1, 
.campl-main-content-wide h2 {color:#106470 }

/**
 * Print support.
 */
@media print {
    /* Increase the default print margins */
    @page { margin: 1.5cm 0.5cm; }

    /* Elements that shouldn't be printed */
    .noprint { display: none; }

    /* Revert the wide element support above, which doesn't print well */
    .campl-wrap-wide { display: block; }

    /* Override the min-height that apps-custom.js sets on the main content
       div */
    .campl-main-content { min-height: 0px !important; }

    /* Make h1 headings slightly smaller - between the main title size (28px)
       and a h2 heading (17px) */
    h1 { font-size: 21px; line-height: 30px; }

    /* Disable Project Light's link underlining and URL display */
    #content a, #content  a:visited { text-decoration: none; }
    #content a[href]:after { display: none; }

    /* ... and keep the content links blue (but darker) */
    #content a[href] { color: #039 !important; }

    /* Don't print forms with action buttons */
    .campl-form-actions { display: none; }
}