/* --------------------------------------------------------------------- */
/* University Training Booking System style.                             */
/* --------------------------------------------------------------------- */

/* Smallest common mobile phones */
html { min-width: 320px; }
body { min-width: 320px; }


/* *************************************************************** */
/* General layout.                                                 */
/* *************************************************************** */

/* Classes for simple CSS properties */
.clear { clear: both; }
.nowrap { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.inline-block { display: inline-block; }
.auto-width { width: auto; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.float-right { float: right; }

/* Versions of the above that only apply in mobile mode */
@media screen and (max-width: 767px) {
    .mobile-clear { clear: both; }
    .mobile-nowrap { white-space: nowrap; }
    .mobile-pre-wrap { white-space: pre-wrap; }
    .mobile-inline-block { display: inline-block; }
    .mobile-auto-width { width: auto; }
    .mobile-bold { font-weight: bold; }
    .mobile-italic { font-style: italic; }
    .mobile-left { text-align: left !important; }
    .mobile-right { text-align: right !important; }
    .mobile-center { text-align: center !important; }
    .mobile-float-right { float: right; }
}

/* Versions of the above that only apply in desktop mode (and when printing) */
@media print, screen and (min-width: 768px) {
    .desktop-clear { clear: both; }
    .desktop-nowrap { white-space: nowrap; }
    .desktop-pre-wrap { white-space: pre-wrap; }
    .desktop-inline-block { display: inline-block; }
    .desktop-auto-width { width: auto; }
    .desktop-bold { font-weight: bold; }
    .desktop-italic { font-style: italic; }
    .desktop-left { text-align: left !important; }
    .desktop-right { text-align: right !important; }
    .desktop-center { text-align: center !important; }
    .desktop-float-right { float: right; }
}

/* Revert to the standard plain text style (e.g., in a heading) */
.plain {
    color: #171717;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
}
@media screen and (max-width: 767px) {
    .plain {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Adjust the padding in Project Light notifications */
div.campl-notifications-container { padding: 10px 60px 10px 30px; }
@media screen and (max-width: 639px) {
    div.campl-notifications-container { padding: 10px 0px; }
}

/* Override Project Light's styling of code blocks */
code {
    border: none;
    font-size: inherit;
    padding: 0px 2px;
}

/** -------------------------------------------------------------
 * Z-index ordering for the site.
 */
div.cb-left-navigation               { z-index: 100; }
a.cb-left-navigation-control         { z-index: 110; }
div.cb-left-navigation.shown         { z-index: 120; }
a.cb-left-navigation-control.shown   { z-index: 130; }
li.campl-nav-tabs-more               { z-index: 200; }
div.cb-venue-map-container           { z-index: 300; }
div.cb-venue-map                     { z-index: 300; }
div.cb-map-btns                      { z-index: 310; }
div.cb-map-btn                       { z-index: 320; }
.js div.campl-local-navigation       { z-index: 400; }
.js div.campl-local-navigation li ul { z-index: 410; }
div.campl-global-header              { z-index: 500; }
div.ui-datepicker                    { z-index: 600 !important; }
ul.ui-autocomplete                   { z-index: 700; }
div#tooltip                          { z-index: 800; }

/** -------------------------------------------------------------
 * A general-purpose table, simulating Project Light tables by
 * combining the behaviour of campl-table + campl-table-bordered +
 * campl-table-condensed + campl-table-striped.
 *
 * Hover effects are deliberately disabled.
 */
.utbs-table {
    border-bottom: 2px solid #28828a;
    border-right: 1px solid #e4e4e4;
    border-collapse: separate;
    margin-bottom: 18px;
    width: 100%;
}
.lt-ie8 .utbs-table {
    border-collapse: collapsed;
}
.utbs-table.auto-width {
    width: auto;
}

.utbs-table th,
.utbs-table td {
    padding: 4px 5px;
    vertical-align: top;
}
@media screen and (max-width: 767px) {
    .utbs-table th,
    .utbs-table td {
        line-height: 24px
    }
}

.utbs-table thead:first-child tr:first-child th,
.utbs-table thead:first-child tr:first-child td,
.utbs-table tbody:first-child tr:first-child th,
.utbs-table tbody:first-child tr:first-child td {
    border-top: none;
}

.utbs-table td {
    border-left: 1px solid #e4e4e4;
}

/* Odd/even row striping */
.utbs-table tbody tr:nth-child(odd) td,
.utbs-table tbody tr:nth-child(odd) th {
    background-color: #d2f3e1;
}

/* Odd/even row striping when there is no thead element */
.utbs-table tbody:first-child tr:nth-child(even) td,
.utbs-table tbody:first-child tr:nth-child(even) th {
    background-color: #d2f3e1;
}

.utbs-table tbody:first-child tr:nth-child(odd) td,
.utbs-table tbody:first-child tr:nth-child(odd) th {
    background-color: #fff;
}

/* Table header */
.utbs-table tbody:first-child tr:first-child th {
    background-color: #28828a;
    color: #fff;
}

.utbs-table th {
    background-color: #28828a;
    border-left: 1px solid #d2f3e1;
    color: #fff;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

@media screen and (max-width: 767px) {
    /* Adjust borders when combined with vertical stacking table */
    .utbs-table.vertical-stacking-table { border-left: 1px solid #e4e4e4; }
    .utbs-table.vertical-stacking-table tr { border-top: 1px solid #e4e4e4; }
    .utbs-table.vertical-stacking-table td { border: none; }
}

/* Print style for table */
@media print {
    .utbs-table {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }

    .utbs-table th {
        background-color: #ddd !important;
        border: 1px solid #ccc;
    }

    .utbs-table td {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/** -------------------------------------------------------------
 * Sortable table columns.
 */
table th.sortable {
    padding-left: 0px;
    padding-right: 0px;
    vertical-align: middle;
}

table th.sortable a {
    background-image: url("../images/sortable.png");
    background-position: center right;
    background-repeat: no-repeat;
    color: #fff;
    box-sizing: border-box;
    display: block;
    padding-left: 5px;
    padding-right: 19px;
    width: 100%;
    height: 100%;
}

table th.sorted-asc a {
    background-image: url("../images/sorted-asc.png");
}

table th.sorted-desc a {
    background-image: url("../images/sorted-desc.png");
}

@media print {
    table th.sortable a {
        background-image: none;
        padding-right: 5px;
    }
}

/* Mobile drop-down menu to select the sort order */
div.cb-sort-order {
    display: none;
}

@media screen and (max-width: 767px) {
    div.cb-sort-order {
        box-sizing: border-box;
        display: block;
        float: right;
        height: 22px;
        margin-top: 10px;
        overflow: visible;
        position: relative;
        width: auto;
    }

    div.cb-sort-order-menu {
        background-image: url("../images/less.gif");
        background-position: right 7px;
        background-repeat: no-repeat;
        box-sizing: border-box;
        color: #0072cf;
        cursor: pointer;
        float: right;
        font-size: 12px;
        height: 22px;
        line-height: 18px;
        padding: 2px 12px 2px 5px;
        width: auto;
    }
    div.cb-sort-order.show div.cb-sort-order-menu {
        /*background-color: #28828a;
        color: #fff;*/
        text-decoration: underline;
    }

    div.cb-sort-order table {
        clear: both;
        display: none;
        width: 100%;
    }
    div.cb-sort-order.show table {
        display: table;
    }

    div.cb-sort-order table th {
        background-color: #28828a;
        border: none;
        border-top: 1px solid #91b9a4;
        font-weight: normal;
        padding: 0px;
        text-align: left;
    }
    div.cb-sort-order table th:hover {
        background-color: #106470;
    }

    div.cb-sort-order table th a {
        padding-bottom: 3px;
        padding-top: 3px;
    }
    div.cb-sort-order table th a:hover {
        text-decoration: none;
    }
}

/** -------------------------------------------------------------
 * Allow table striping to be manually overridden (useful when
 * there are rows which span multiple rows, or tables that
 * contain nested tables).
 */
table tbody tr.evenline td { background-color: #d2f3e1 !important; }
table tbody tr.oddline td { background-color: #fff !important; }

/** -------------------------------------------------------------
 * Clickable table cell containing a single link.
 */
table th.link-cell, table td.link-cell {
    padding: 0;
}

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

/** -------------------------------------------------------------
 * Table cells with borders.
 */
table tbody td.top-border    { border-top:    1px solid #e4e4e4; }
table tbody td.right-border  { border-right:  1px solid #e4e4e4; }
table tbody td.bottom-border { border-bottom: 1px solid #e4e4e4; }
table tbody td.left-border   { border-left:   1px solid #e4e4e4; }

/** -----------------------------------------------------------------------
 * A div that causes forms inside it to be displayed inline.
 *
 * This is useful for having multiple buttons on a page, where each button
 * needs its own form in order to get its own URL mapping (e.g., Edit and
 * Delete buttons on a show page).
 */
div.inline-form-actions form { display: inline; }

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

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

/** -------------------------------------------------------------
 * A button the same height as text boxes.
 */
input.cb-input-btn {
    height: 28px;
    line-height: 18px;
    margin-bottom: 9px !important;
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: bottom;
}
@media screen and (max-width: 767px) {
    input.cb-input-btn {
        height: 32px;
        line-height: 22px;
    }
}

/** -------------------------------------------------------------
 * A button styled to look like a link.
 */
input.link {
    background-color: transparent;
    border: none;
    color: #0072cf;
    cursor: pointer;
    font-family: inherit;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

input.link:hover {
    text-decoration: underline;
}

/** -------------------------------------------------------------
 * A general-purpose delete button.
 */
input.cb-delete-btn {
    background-image: url("../images/delete.png");
    background-position: 5px center;
    background-repeat: no-repeat;
    padding-left: 24px;
}

/** -------------------------------------------------------------
 * Common event/course related styles.
 */
.pastEvent {
    color: #333;
    font-style: italic;
}

.pastEvent a {
    color: #447dab;
}

/* Event time of day */
.event-time {
    color: #777;
    font-weight: bold;
    white-space: nowrap;
}

/* Content not visible to unprivileged users */
.non-public:before { color: #aaa; content: "["; font-weight: bold; }
.non-public a      { color: #aaa; }
.non-public:after  { color: #aaa; content: "]"; font-weight: bold; }

table.cb-timetable span.non-public:before,
table.cb-timetable span.non-public a,
table.cb-timetable span.non-public:after {
    color: #888;
}

/* Places available/bookability messages */
span.places {
    font-style: normal;
    font-weight: bold;
}
span.places.fb           { color: #08a; }
span.places.open         { color: #080; }
span.places.available    { color: #080; }
span.places.standby      { color: #a60; }
span.places.full         { color: #900; }
span.places.not-bookable { color: #888; }
span.places.diy          { color: #080; }

/* Cancelled/postponed events */
span.cb-event-cancelled,
span.cb-event-postponed {
    font-style: normal;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    span.cb-event-cancelled,
    span.cb-event-postponed {
        font-size: 14px;
    }
}

span.cb-event-cancelled.large,
span.cb-event-postponed.large {
}

span.cb-course-date-places span.cb-event-cancelled,
span.cb-course-date-places span.cb-event-postponed {
    font-size: 12px;
}

/* Footnote marker (asterisk) -- used for optional sessions,
   all-provider privileges, etc... */
span.cb-footnote {
    color: red;
    font-size: 16px;
    font-weight: bold;
}


/* *************************************************************** */
/* Expandable/collapsable sections (requires JavaScript).          */
/* *************************************************************** */

/* The header line to show/hide a collapsable section */
p.show_section, p.hide_section {
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin: 2px 0px;
    padding: 0px 0px 0px 14px;
}
p.show_section { background: url("../images/more.gif") no-repeat 0 6px; }
p.hide_section { background: url("../images/less.gif") no-repeat 0 6px; }

@media screen and (max-width: 767px) {
    p.show_section, p.hide_section {
        background-position: 0 8px;
        font-size: 16px;
        line-height: 22px;
    }
}

/* An expanded (shown) section */
div.shown_section {
    display: block;
    padding: 5px 0px 0px 14px;
}

/* A collapsed (hidden) section */
div.hidden_section {
    display: none;
}


/* *************************************************************** */
/* A holder for split page layouts which have a secondary content  */
/* div on the left. In desktop mode, if there are tabs above this, */
/* some extra padding is added to make the secondary content line  */
/* up with the first tab.                                          */
/* *************************************************************** */

/* Clear float and define a relative positioning context to allow
   the map to be placed in the top-right corner of this element
   on the event and venue pages */
div.cb-split-page {
    clear: both;
    position: relative;
}

@media screen and (min-width: 768px) {
    div.cb-split-page-with-tabs {
        padding-left: 20px;
    }
}

/* Exception for narrow desktop-mode pages */
@media screen and (min-width: 768px) and (max-width: 920px) {
    div.cb-split-page-with-tabs div.campl-secondary-content.cb-left-navigation {
        margin-left: -20px;
    }
}


/* *************************************************************** */
/* Wiki region for descriptions of course, venue, etc...           */
/* *************************************************************** */

div.wiki_region {
    clear: both;
}

div.wiki_region div.heading, div.wiki_region h2 {
    font-size: 17px;
    font-weight: bold !important;
    color: #106470;
    line-height: 18px;
    margin-bottom: 10px;
    margin-top: 36px;
}
@media screen and (max-width: 767px) {
    div.wiki_region div.heading, div.wiki_region h2 {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 20px;
    }
}

div.wiki_region span.heading {
    color: #106470;
    font-weight: bold;
    margin-right: 0.5em;
    vertical-align: top;
}

div.wiki_region table.toc {
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    margin: 0px 1em 0px 0px;
    padding: 0px 1em 0px 0px;
}

div.wiki_region table.wikitable {
    margin: 1em 1em 1em 0;
    background: #f9f9f9;
    border: 1px #aaa solid;
    border-collapse: collapse;
}

div.wiki_region table.wikitable th, div.wiki_region table.wikitable td {
    border: 1px #aaa solid;
    padding: 0.3em 0.5em;
}

div.wiki_region table.wikitable th {
    background: #f2f2f2;
    text-align: center;
}

div.wiki_region table.wikitable caption {
    margin-left: inherit;
    margin-right: inherit;
    font-weight: bold;
}

div.wiki_region div.page_preview {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 3px 3px 3px 0px #ddd;
    margin: 10px 0px 20px 0px;
    padding: 0.5em;
}

/* Style to show boolean true/false attributes ("YES"/"NO") */
.bool_true {
    font-size: 0.95em;
    font-weight: bold;
    color: #060;
}

.bool_false {
    font-size: 0.95em;
    font-weight: bold;
    color: #800;
}

/* Style to show unset attributes "not set" */
.not_set {
    font-style: italic;
    font-weight: bold;
    color: #600;
}


/* *************************************************************** */
/* Common styling for edit forms.                                  */
/* *************************************************************** */

/* Sections of forms (for large forms) */
ul.cb-form-sections {
    margin-bottom: 20px;
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    ul.cb-form-sections {
        margin-bottom: 30px;
        margin-top: 30px;
    }
}

h2.cb-form-section {
    border-bottom: 2px solid #106470;
}

/* Container div for a single edit field or group of related fields,
   including a label, the fields themselves, any validation error
   messages, and any help text */
div.cb-edit-field-group {
    margin: 20px 0px 0px 0px;
}
@media screen and (max-width: 767px) {
    div.cb-edit-field-group {
        margin-bottom: 40px;
    }

    div.cb-edit-field-group.partial {
        margin-bottom: 20px;
    }
}

div.cb-edit-field-group.error {
    box-shadow: -20px 0px #fee, 20px 0px #fee;
}

div.cb-edit-field-group.error th,
div.cb-edit-field-group.error td {
    background-color: #fee;
}

/* Validation error highlighting on individual fields (only used where there
   are multiple fields in the group, to highlight the invalid one) */
input.error, textarea.error {
    border-color: #b94a48;
    color: #b94a48;
}
select.error {
    color: #b94a48;
}

/* Table to control the layout of the label and the fields */
table.cb-edit-field-table {
    width: 100%;
}

/* The label for the field(s) (to the left of the field(s) in
   desktop mode, and above it/them in mobile mode */
th.cb-edit-field-label {
    border: none;
    padding: 4px 10px 0px 0px;
    text-align: right;
    width: 20%;
}
@media screen and (max-width: 767px) {
    th.cb-edit-field-label {
        display: block;
        padding: 4px 0px 0px 0px;
        text-align: left;
        width: 100%;
    }
}

th.cb-edit-field-label label {
    display: inline;
    font-weight: bold;
    margin-right: 3px;
}

/* Label for required fields */
th.cb-edit-field-label label.required {
    margin-right: 0px;
}
th.cb-edit-field-label label.required:after {
    color: red;
    content: "*";
    font-size: 16px;
    font-weight: bold;
    margin-left: 2px;
    margin-right: -3px;
}

/* Container for the field(s) themselves and any help text and/or
   error messages */
td.cb-edit-field-control {
    padding: 4px 0px;
}
@media screen and (max-width: 767px) {
    td.cb-edit-field-control {
        display: block;
    }
}

td.cb-edit-field-control .campl-help-block {
    margin-bottom: 0px;
}

div.cb-edit-field-group.partial td.cb-edit-field-control {
    border-bottom: 1px dashed #000;
    padding-bottom: 15px;
}
@media screen and (max-width: 767px) {
    div.cb-edit-field-group.partial td.cb-edit-field-control {
        padding-bottom: 25px;
    }
}

/* Hack to prevent auto-width select fields from being > 100% width */
@media screen and (max-width: 600px) { .max-100pc { max-width: 540px; } }
@media screen and (max-width: 590px) { .max-100pc { max-width: 530px; } }
@media screen and (max-width: 580px) { .max-100pc { max-width: 520px; } }
@media screen and (max-width: 570px) { .max-100pc { max-width: 510px; } }
@media screen and (max-width: 560px) { .max-100pc { max-width: 500px; } }
@media screen and (max-width: 550px) { .max-100pc { max-width: 490px; } }
@media screen and (max-width: 540px) { .max-100pc { max-width: 480px; } }
@media screen and (max-width: 530px) { .max-100pc { max-width: 470px; } }
@media screen and (max-width: 520px) { .max-100pc { max-width: 460px; } }
@media screen and (max-width: 510px) { .max-100pc { max-width: 450px; } }
@media screen and (max-width: 500px) { .max-100pc { max-width: 440px; } }
@media screen and (max-width: 490px) { .max-100pc { max-width: 430px; } }
@media screen and (max-width: 480px) { .max-100pc { max-width: 420px; } }
@media screen and (max-width: 470px) { .max-100pc { max-width: 410px; } }
@media screen and (max-width: 460px) { .max-100pc { max-width: 400px; } }
@media screen and (max-width: 450px) { .max-100pc { max-width: 390px; } }
@media screen and (max-width: 440px) { .max-100pc { max-width: 380px; } }
@media screen and (max-width: 430px) { .max-100pc { max-width: 370px; } }
@media screen and (max-width: 420px) { .max-100pc { max-width: 360px; } }
@media screen and (max-width: 410px) { .max-100pc { max-width: 350px; } }
@media screen and (max-width: 400px) { .max-100pc { max-width: 340px; } }
@media screen and (max-width: 390px) { .max-100pc { max-width: 330px; } }
@media screen and (max-width: 380px) { .max-100pc { max-width: 320px; } }
@media screen and (max-width: 370px) { .max-100pc { max-width: 310px; } }
@media screen and (max-width: 360px) { .max-100pc { max-width: 300px; } }
@media screen and (max-width: 350px) { .max-100pc { max-width: 290px; } }
@media screen and (max-width: 340px) { .max-100pc { max-width: 280px; } }

/* Various sizes of textarea */
textarea.cb-40-line { height: 40em; }
textarea.cb-30-line { height: 30em; }
textarea.cb-20-line { height: 20em; }
textarea.cb-15-line { height: 15em; }
textarea.cb-10-line { height: 10em; }
textarea.cb-8-line { height: 8em; }
textarea.cb-6-line { height: 6em; }
textarea.cb-4-line { height: 4em; }

/* Nested table for complex fields */
table.cb-field-struct {
    border: none;
    width: 100%;
}

table.cb-field-struct th {
    border: none;
    font-weight: bold;
    text-align: right;
    width: 1em;
}

table.cb-field-struct th label {
    font-weight: bold;
    margin-right: 5px;
    white-space: nowrap;
}

table.cb-field-struct th label.required:after {
    color: red;
    content: "*";
    font-size: 16px;
    font-weight: bold;
    margin-left: 2px;
    margin-right: 0px;
}

@media screen and (max-width: 767px) {
    table.cb-field-struct td {
        margin-bottom: 10px;
    }
}

/* Validation errors below the field(s) */
div.cb-validation-errors {
    background-image: url("../campl/images/interface/icon-warning.png");
    background-position: center left;
    background-repeat: no-repeat;
    color: #c00;
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 26px;
    padding-left: 40px;
}
@media screen and (max-width: 767px) {
    div.cb-validation-errors {
        background-image: none;
        min-height: none;
        padding-left: 0px;
    }
}

/* Validation errors at the top of the form */
ul.cb-validation-errors li {
    margin-bottom: 9px;
}
@media screen and (max-width: 767px) {
    ul.cb-validation-errors li {
        margin-bottom: 15px;
    }
}

/* Simple options that appear after the save button (inline in
   desktop mode, and on a new line in mobile mode) */
span.cb-save-options {
    margin-left: 10px;
}
@media screen and (max-width: 767px) {
    span.cb-save-options {
        display: block;
        margin-left: 0px;
        margin-top: 10px;
    }
}

/* Preview of wiki text */
div.wiki-textarea textarea {
    margin-bottom: 0px;
}

div.wiki-textarea div.links {
    margin-bottom: 5px;
}

div.wiki-textarea div.links b {
    color: #644;
}

div.wiki-textarea div.preview {
    border: 3px solid #000;
    border-radius: 10px;
    display: none;
    margin-bottom: 10px;
    min-height: 50px;
    position: relative;
}

div.wiki-textarea div.preview div.content {
    padding: 10px;
}

div.wiki-textarea div.preview div.content div.heading:first-child {
    margin-top: 0px;
}

div.wiki-textarea div.preview div.content p:last-child {
    margin-bottom: 0px;
}

div.wiki-textarea div.preview div.content div.no-data {
    color: #ccc;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0px;
    text-align: center;
}

div.wiki-textarea div.preview a.close {
    background-color: #fff;
    background-image: url("../images/close-preview.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    border-radius: 16px;
    color: transparent;
    display: block;
    font-size: 1px;
    height: 32px;
    position: absolute;
    right: -16px;
    top: -17px;
    width: 32px;
}
div.wiki-textarea div.preview a.close:hover {
    background-color: #dde;
}

/* Timepicker fields */
select.timepicker-hour,
select.timepicker-minute {
    width: auto;
}

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


/* *************************************************************** */
/* Headers and footers.                                            */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Provider selection menu.
 */
div.cb-select-provider {
    float: right;
    margin: 15px 15px 15px 0px;
}
@media screen and (max-width: 767px) {
    div.cb-select-provider {
        float: left;
    }
}
div.campl-site-search {
    padding-bottom: 0px;
    padding-left: 0px;
}

div.cb-select-provider a.campl-open-quicklinks {
    display: block;
    height: 32px;
}

div.cb-select-provider span.label-txt {
    box-sizing: border-box;
    display: block;
    float: left;
    height: 32px;
    padding: 0px 8px;
    width: auto;
}

div.cb-select-provider span.label-txt span.label {
    display: block;
    font-weight: bold;
    height: 18px;
    text-align: center;
    white-space: nowrap;
}

div.cb-select-provider span.label-txt span.value {
    color: #aaa;
    display: block;
    font-size: 10px;
    height: 11px;
    line-height: 11px;
    text-align: center;
    white-space: nowrap;
}

div.cb-select-provider span.label-txt span.value span {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (min-width: 780px) { div.cb-select-provider span.label-txt span.value span { max-width: 150px } }
@media screen and (min-width: 790px) { div.cb-select-provider span.label-txt span.value span { max-width: 160px } }
@media screen and (min-width: 800px) { div.cb-select-provider span.label-txt span.value span { max-width: 170px } }
@media screen and (min-width: 810px) { div.cb-select-provider span.label-txt span.value span { max-width: 180px } }
@media screen and (min-width: 820px) { div.cb-select-provider span.label-txt span.value span { max-width: 190px } }
@media screen and (min-width: 830px) { div.cb-select-provider span.label-txt span.value span { max-width: 200px } }
@media screen and (min-width: 840px) { div.cb-select-provider span.label-txt span.value span { max-width: 210px } }
@media screen and (min-width: 850px) { div.cb-select-provider span.label-txt span.value span { max-width: 220px } }
@media screen and (min-width: 860px) { div.cb-select-provider span.label-txt span.value span { max-width: 230px } }
@media screen and (min-width: 870px) { div.cb-select-provider span.label-txt span.value span { max-width: 240px } }

div.cb-select-provider ul {
    background-color: #2a2a2a;
    border-top: 1px solid #000;
    list-style: none;
    margin: 0px;
    position: absolute;
    visibility: hidden;
    width: 250px;
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto;
}

div.cb-select-provider li {
    border-bottom: 1px solid #4b4b4b;
    margin: 0px;
}

div.cb-select-provider li.list-header {
    display: none;
}

div.cb-select-provider li a {
    background-image: url("../campl/images/interface/icon-fwd-btn.png");
    background-position: 6px 13px;
    background-repeat: no-repeat;
    color: #fff;
    cursor: pointer;
    display: block;
    padding: 8px 30px 8px 16px;
    text-decoration: none;
}

div.cb-select-provider li a:hover {
    background-color: #171717;
}

/* Marker for currently selected provider */
div.cb-select-provider li.selected a:before {
    content: '\25cf';
    display: block;
    float: right;
    font-style: normal;
    left: 20px;
    position: relative;
}

/* Unpublished providers */
div.cb-select-provider li.unpublished a {
    color: #a99;
    font-style: italic;
}

/* Mobile view of provider selection menu */
@media screen and (max-width: 767px) {
    div.cb-select-provider {
        margin-left: 15px;
    }

    div.cb-select-provider a.campl-open-quicklinks {
        display: none;
    }

    div.cb-select-provider a.campl-open-menu {
        display: block;
        float: none;
        margin: 0px;
    }

    div.cb-select-provider ul {
        width: 275px;
    }

    div.cb-select-provider li.list-header {
        background-color: #444;
        border-bottom: none;
        color: #eed;
        display: list-item;
        font-weight: bold;
        padding: 10px 0px 10px 10px;
    }

    div.cb-select-provider li a {
        background-position: 10px 17px;
        padding: 12px 40px 12px 20px;
    }

    div.cb-select-provider li.selected a:before {
        left: 25px;
    }
}

/** -------------------------------------------------------------
 * Table for search selector, text field and image button.
 */
div.campl-header-container {
    width: auto;
}

div.campl-search-form-wrapper {
    height: auto;
    padding-left: 0px;
}

table.cb-header-search {
    padding-left: 0px;
}

table.cb-header-search td {
    background: transparent;
    padding: 0px;
    vertical-align: middle;
}

table.cb-header-search td select {
    background-color: #4b4b4b;
    border: 1px solid #777;
    border-radius: 3px;
    color: #fff;
    margin-bottom: 0px;
    padding: 4px;
    width: auto;
}

table.cb-header-search td select option {
    background-color: #4b4b4b;
}

table.cb-header-search td.search {
    padding-right: 14px;
}
div.campl-search-form-wrapper table.cb-header-search td.search {
    width: 100%;
}

table.cb-header-search td.search input {
    margin-bottom: 0px;
    padding-left: 7px;
    width: 100%;
}

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

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

table.cb-page-title-container td.cb-page-title-left p.campl-page-title {
    margin-bottom: 5px;
}

table.cb-page-title-container td.cb-page-title-right {
    padding-left: 20px;
    padding-bottom: 9px;
    text-align: right;
}

@media screen and (max-width: 767px) {
    /* Mobile view - table stacks vertically */
    table.cb-page-title-container td.cb-page-title-left {
        margin-bottom: 16px;
    }

    table.cb-page-title-container td.cb-page-title-right {
        padding-left: 0px;
        text-align: left;
    }
}

@media print {
    table.cb-page-title-container td.cb-page-title-right {
        display: none;
    }
}

/** -------------------------------------------------------------
 * Login details ("You are logged in as..." details).
 */
div.cb-login-details {
    color: #fff;
    margin-bottom: 0px;
}

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

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

div.cb-login-details input[type=submit] {
    background-color: #171717;
    border: 1px solid #888;
    color: #fff;
    font-weight: bold;
    margin: 0px;
    padding: 2px 6px;
}

div.cb-login-details input[type=submit]:hover {
    background-color: #454545;
}

/** -------------------------------------------------------------
 * Header links (mobile view only)
 */
div.cb-header-links {
    display: none;
}
@media screen and (max-width: 767px) {
    div.cb-header-links {
        color: #91b9a4;
        display: block;
    }

    div.cb-header-links a {
        color: #91b9a4;
        font-size: 0.9em;
    }
}

/** -------------------------------------------------------------
 * Admin menu.
 */
@media screen and (min-width: 768px) {
    ul.campl-local-dropdown-menu {
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 80px solid transparent;
        margin-left: -40px;
    }

    /* Prevent the admin menu going too far off the right of the screen */
    .campl-local-navigation li.cb-admin-menu {
        margin-right: 20px;
    }

    .campl-local-navigation li.cb-admin-menu ul {
        width: 175px;
    }
}

/* Additional actions dynamically added to the admin menu */
div.cb-admin-actions {
    background-color: #003a41;
    border-top: 1px solid #106470;
    color: #fff;
    padding: 10px 10px 6px 10px;
}
@media screen and (max-width: 767px) {
    div.cb-admin-actions {
        background-color: #106470;
        border-bottom: 1px solid #0c5963;
        border-top: none;
        padding: 15px 30px 11px 25px;
    }
}

div.cb-admin-actions:hover {
    background-color: #0c5963;
}

div.cb-admin-actions form {
    display: inline;
}

div.cb-admin-actions form input {
    font-size: 12px;
    line-height: 14px;
    padding: 3px 8px;
}
@media screen and (max-width: 767px) {
    div.cb-admin-actions form input {
        font-size: 16px;
        padding: 5px 8px;
    }
}

div.cb-admin-actions form .campl-help-block {
    color: #fff;
}

/** -------------------------------------------------------------
 * Help text in the footer.
 */
p.cb-footer-info { margin-bottom: 3px; }
p.cb-footer-info-last { margin-bottom: 0px; }

@media screen and (max-width: 767px) {
    p.cb-footer-info { margin-bottom: 10px; }
    p.cb-footer-info-last { margin-bottom: 40px; }
}

p.cb-footer-info a { white-space: nowrap; }
p.cb-footer-info-last a { white-space: nowrap; }


/* *************************************************************** */
/* Home page / training provider info pages.                       */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Left-hand navigation menu.
 */
div.cb-left-navigation {
    font-size: 14px;
    line-height: 20px;
    padding: 20px;
}
@media screen and (max-width: 767px) {
    div.cb-left-navigation {
        font-size: 16px;
        line-height: 24px;
    }
}

div.cb-left-navigation div.cb-left-navigation-header {
    font-weight: bold;
    margin-bottom: 10px;
}

div.cb-left-navigation li {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px;
}
@media screen and (max-width: 767px) {
    div.cb-left-navigation li {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
    }
}

div.cb-left-navigation li.active a {
    color: #171717;
    cursor: default;
    font-weight: bold;
}
div.cb-left-navigation li.active a:hover {
    text-decoration: none;
}

div.cb-left-navigation li ul {
    margin-top: 5px;
    margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
    div.cb-left-navigation li ul {
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

/* Make this is a pop-out menu on mobile devices */
a.cb-left-navigation-control {
    display: none;
}

@media screen and (max-width: 767px) {
    div.cb-left-navigation {
        border-right: 1px solid #0c5963;
        border-bottom: 5px solid #0c5963;
        box-shadow: 2px 2px 2px #b0c9ca;
        left: -260px;
        position: absolute;
        width: 250px;
    }

    div.cb-left-navigation.shown {
        left: 0px;
    }

    a.cb-left-navigation-control {
        background-image: url("../images/left-nav-menu.png");
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 28px;
        color: #666;
        display: inline-block;
        font-size: 14px;
        height: 28px;
        left: 20px;
        line-height: 28px;
        margin-bottom: 15px;
        padding-left: 32px;
        position: relative;
        top: 20px;
    }

    a.cb-left-navigation-control.shown {
        background-image: url("../images/close-left-nav-menu.png");
        color: transparent;
        display: block;
        font-size: 1px;
        line-height: 1px;
        padding-left: 0px;
        width: 28px;
    }
    a.cb-left-navigation-control.shown:hover {
        text-decoration: none;
    }
}

/* Additional link to reveal the menu (initially hidden) */
a.cb-show-left-navigation-menu {
    display: none;
}

/** -------------------------------------------------------------
 * Search box on the home/info pages.
 */
div.cb-main-search-box-container {
    margin: 0px auto;
    max-width: 700px;
    padding: 0px;
}

div.cb-main-search-box {
    border: 2px solid #E0E0F0;
    border-radius: 10px;
    margin: 0px 5% 0px 5%;
}
@media screen and (max-width: 767px) {
    div.cb-main-search-box {
        border: none;
        border-radius: 0;
        margin: 0px;
    }
}

div.cb-main-search-box form {
    margin: 25px auto 25px auto;
    padding: 0px 20px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    div.cb-main-search-box form {
        margin: 0px 6px 25px 6px;
        padding: 0px;
    }
}

/** -------------------------------------------------------------
 * The search field and search button.
 */
form.cb-search select {
    width: auto;
}

form.cb-search div.cb-search-box {
    display: inline-block;
    white-space: nowrap;
}

form.cb-search div.cb-search-box input[type=text] {
    width: 260px;
}

@media screen and (max-width: 767px) {
    /* Mobile view - style the submit button as an image button */
    form.cb-search div.cb-search-box input[type=text] {
        border-right-color: none;
        padding-right: 32px;
        width: 320px;
    }

    form.cb-search div.cb-search-box input[type=submit] {
        background-image: url("../campl/images/interface/btn-search-header.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        border: none;
        color: transparent;
        font-size: 1px;
        width: 32px;
        height: 32px;
        margin-left: -32px;
        padding: 0px;
    }
}

@media screen and (max-width: 429px) {
    /* Small mobile view - make the search box full width */
    div.cb-main-search-box {
        width: 100%;
    }

    form.cb-search div.cb-search-box {
        display: block;
        padding-right: 44px;
    }

    form.cb-search div.cb-search-box input[type=text] {
        width: 100%;
    }
}

/** -------------------------------------------------------------
 * Search options below the search fields.
 */
div.cb-search-options .campl-checkbox {
    margin-left: 0px !important;
    margin-right: 10px;
    padding-top: 0px;
}

/** -------------------------------------------------------------
 * Links below the search box.
 */
div.cb-common-links {
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 0.5em;
    text-align: center;
}
@media screen and (max-width: 767px) {
    div.cb-common-links {
        margin-bottom: 40px;
    }
}

div.cb-common-links a {
    white-space: nowrap;
}


/* *************************************************************** */
/* Faceted search (for courses).                                   */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Customised Project Light secondary content div.
 */
.campl-secondary-content {
    background-color: #f8f8f8;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0px 2px #f5f5f5;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .campl-secondary-content {
        border-right: none;
        border-bottom: 1px solid #ddd;
        box-shadow: 0px 3px 3px #eee;
    }
}

/** -------------------------------------------------------------
 * Faceted search options.
 */
div.cb-search-options {
    font-size: 19px;
    line-height: 25px;
    margin-left: -2px;
}

@media screen and (max-width: 767px) {
    div.cb-search-options {
        font-size: 22px;
        line-height: 24px;
    }
}

a.cb-search-clear-options, p.cb-search-clear-options {
    background-color: #e4e4e4;
    border: 1px solid #999;
    color: #171717;
    float: right;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 4px;
    text-decoration: none;
}

@media screen and (max-width: 767px) {
    a.cb-search-clear-options, p.cb-search-clear-options {
        font-size: 14px;
        line-height: 22px;
    }
}

p.cb-search-clear-options { color: #999; }

/* Search facets default to being shown */
.cb-search-facet-header {
    background-image: url("../images/hide.gif");
    background-position: right 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ccc;
    color: #444;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 4px;
}

.cb-search-facet-body {
    position: static;
    visibility: visible;
}

/* Overrides to explicitly show/hide facets */
.cb-search-show-facet { background-image: url("../images/show.gif"); }
.cb-search-hide-facet { background-image: url("../images/hide.gif"); }
.cb-search-facet-shown { position: static; visibility: visible; }
.cb-search-facet-hidden { position: absolute; visibility: hidden; }

/* Individual search options */
.cb-facet-item { margin-right: 6px; }
.cb-facet-item-count { color: #444; }

/* Sub-section with additional search options */
.cb-facet-subsection {
    font-style: italic;
    margin-top: 12px;
    margin-bottom: 4px;
}
@media screen and (max-width: 767px) { .cb-facet-subsection { margin-bottom: 6px; } }

/* Disabled search facets */
.cb-disabled-facet { color: #888; }
.cb-disabled-facet .cb-search-facet-header { color: #888; }
.cb-disabled-facet .cb-facet-item-count { color: #888; }

/* Faceted search results */
.cb-facet-search-results { padding: 20px 0px 0px 20px; }
@media screen and (max-width: 767px) { .cb-facet-search-results { padding-left: 0px; } }

/* Link to clear the search query */
.cb-search-clear-search { color: #666; }
.cb-search-clear-search:visited { color: #666; }
.cb-search-clear-search:hover { color: #666; }
.cb-search-clear-search:active { color: #666; }

/* Date facet table for date range */
table.cb-date-filter-range {
    font-size: 12px;
    margin-left: 18px;
}

table.cb-date-filter-range th,
table.cb-date-filter-range td {
    background-color: transparent;
    border: none;
    text-align: left;
    vertical-align: baseline;
    white-space: nowrap;
}

/** -------------------------------------------------------------
 * Search results (course list).
 */

/* Control to show/hide all course descriptions */
div.cb-course-result-toggle-all {
    margin-bottom: 4px;
    margin-top: -18px;
    float: right;
}
@media screen and (max-width: 767px) {
    div.cb-course-result-toggle-all {
        margin-top: -22px;
    }
}
@media print {
    div.cb-course-result-toggle-all {
        display: none;
    }
}

div.cb-course-result-toggle-all span {
    color: #0072cf;
    cursor: pointer;
}

div.cb-course-result-toggle-all span:hover {
    text-decoration: underline;
}

/* The course list */
div.cb-course-list {
    border-top: 1px solid #ddd;
    clear: both;
    margin-bottom: 50px;
}

div.cb-course-list-item {
    border-bottom: 1px solid #ddd;
}

div.cb-course-result-header {
    cursor: pointer;
    padding: 4px 32px 10px 0px;
}
@media screen and (max-width: 767px) {
    div.cb-course-result-header {
        padding-bottom: 20px;
    }
}
@media print {
    div.cb-course-result-header {
        padding-right: 0px;
    }
}

div.cb-course-result-header:hover {
    background: radial-gradient(#f8f8ff, #fff);
}

/* Controls to show/hide the course description */
span.cb-course-result-toggle-description {
    background-color: #eee;
    background-image: url("../images/show-description.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-model: border-box;
    cursor: pointer;
    display: block;
    float: right;
    height: 22px;
    margin-right: -32px;
    margin-top: 3px;
    width: 22px;
}
@media print {
    span.cb-course-result-toggle-description {
        display: none;
    }
}

div.cb-course-list-item.detailed span.cb-course-result-toggle-description {
    background-image: url("../images/hide-description.png");
}

div.cb-course-result-header:hover span.cb-course-result-toggle-description,
span.cb-course-result-toggle-description:hover {
    background-color: #ddd;
}

/* The course title */
span.cb-course-result-title {
    display: block;
    font-size: 14px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    span.cb-course-result-title {
        font-size: 17px;
    }
}

/* The course date */
span.cb-course-result-date {
    color: #777;
    font-weight: bold;
    margin-right: 12px;
}

span.cb-course-result-date a {
    font-weight: normal;
}

/* Availability of places on the event */
span.cb-course-result-places {
    font-weight: normal;
    white-space: nowrap;
}

span.cb-course-result-status {
    color: #633;
    font-weight: bold;
    margin-right: 12px;
    white-space: nowrap;
}

/* The course description (hidden by defalt) */
div.cb-course-result-description {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #f2f0f4;
    display: none;
    margin: 4px -2px 40px -2px;
    padding: 4px 6px;
}

div.cb-course-list-item.detailed div.cb-course-result-description {
    display: block;
}

/* Details of other course dates (an expand/collapse section) */
div.cb-course-list-item p.show_section { display: none; }
div.cb-course-list-item p.hide_section { display: block; }
div.cb-course-list-item.detailed p.show_section { display: inline-block; }
div.cb-course-list-item.detailed p.hide_section { display: inline-block; }

div.cb-course-list-item.detailed p.show_section,
div.cb-course-list-item.detailed p.hide_section,
div.cb-course-list-item.detailed div.hidden_section,
div.cb-course-list-item.detailed div.shown_section {
    position: relative;
    top: -35px;
}

div.cb-course-list-item div.shown_section { margin-bottom: 36px; }
div.cb-course-list-item.detailed div.shown_section { margin-bottom: -16px; }


/* *************************************************************** */
/* Course timetable.                                               */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Fixed header at the top, to indicate the current day/month
 * group.
 */
div.cb-timetable-fixed-header {
    display: none;
    height: 0px;
    left: 0px;
    line-height: 0px;
    overflow: visible;
    position: fixed;
    text-align: center;
    top: 0px;
    width: 100%;
}

div.cb-timetable-fixed-header div {
    background-color: #ffd;
    border: 1px solid #ccc;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: none;
    cursor: pointer;
    display: inline-block;
    line-height: 18px;
    padding: 0px 10px;
}
@media screen and (max-width: 767px) {
    div.cb-timetable-fixed-header div {
        line-height: 22px;
    }
}
@media print {
    div.cb-timetable-fixed-header div {
        display: none;
    }
}

div.cb-timetable-fixed-header div:hover {
    background-color: #f8f8d8;
}

/** -------------------------------------------------------------
 * Date-range options at the top.
 */
form.cb-timetable-ctrls {
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    margin-bottom: 5px;
    margin-top: 20px;
    padding: 0px 4px;
}
@media screen and (max-width: 767px) {
    form.cb-timetable-ctrls {
        margin-bottom: 10px;
    }
}

/* Selector for the period parameter */
p.cb-timetable-period {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 20px 5px 0px;
    white-space: nowrap;
}

p.cb-timetable-period select {
    font-size: 12px;
    height: 26px;
    margin-bottom: 0px;
    vertical-align: -1px;
    width: auto;
}

/* Container for the remaining date-range controls */
div.cb-timetable-dates {
    display: inline-block;
}
div.cb-timetable-dates.fixed {
    white-space: nowrap;
}

/* Container for the navigation controls (next/prev plus dates shown) */
p.cb-timetable-nav {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 20px 5px 0px;
    white-space: nowrap;
}

/* Container for the buttons/fields to change the start and end dates */
p.cb-timetable-edit-dates {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    margin: 5px 0px;
    white-space: nowrap;
}
@media screen and (max-width: 429px) {
    div.cb-timetable-dates.fixed {
        position: relative;
        width: 100%;
    }
    div.cb-timetable-dates.fixed p.cb-timetable-edit-dates {
        background-color: #f8f8f8;
        box-shadow: -5px 0px 10px 0px #f8f8f8;
        position: absolute;
        right: 0px;
    }
}

/* Buttons that control the timetable options */
a.cb-timetable-btn, span.cb-timetable-btn {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #555;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 12px;
    line-height: 12px;
    min-width: 12px;
    padding: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
a.cb-timetable-btn:hover, span.cb-timetable-btn:hover {
    border-color: #aaa;
    text-decoration: none;
}
a.cb-timetable-btn.disabled, span.cb-timetable-btn.disabled {
    border-color: #ccc;
    color: #999;
    cursor: default;
}
a.cb-timetable-btn.active, span.cb-timetable-btn.active {
    background-color: #ccc;
    border-color: #aaa;
    color: #222;
}

/* The dates shown */
span.cb-timetable-dates-shown {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    vertical-align: middle;
}

/* Date pickers to control the dates shown on the timetable */
input.cb-timetable-date {
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 0px;
    width: 80px;
}

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

/* Admin options */
form.cb-timetable-admin-options label {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0px;
    padding-right: 10px;
}

/* Message about the start of the timetable (e.g., no events today) */
p.cb-timetable-start-msg {
    font-size: 14px;
    line-height: 18px;
    margin: 25px 0px 30px 0px;
}
p.cb-timetable-start-msg.info {
    color: #888;
    font-weight: bold;
}

/** -------------------------------------------------------------
 * Table for the events from a single day or month.
 */
h2.cb-timetable-group {
    font-size: 16px;
    font-weight: bold !important;
    margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
    h2.cb-timetable-group {
        font-size: 18px;
        margin-bottom: 6px;
    }
}

table.cb-timetable {
    border-top: 1px solid #ddd;
    margin-bottom: 40px;
    width: 100%;
}
table.cb-timetable.first-group {
    border-top: none;
}

table.cb-timetable td.last {
    border-bottom: 1px solid #ddd;
}

table.cb-timetable td.time {
    padding: 3px 8px 3px 0px;
    width: 40px;
}

table.cb-timetable td.time span {
    background-color: #444;
    border: 1px solid #444;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0px 4px;
}

table.cb-timetable td.session {
    padding: 0px 0px 0px 2px;
}

table.cb-timetable div.cb-course-list-item.last {
    border-bottom: none;
}

span.cb-timetable-session-number {
    font-size: 12px;
    font-weight: normal;
    margin-right: 12px;
    white-space: nowrap;
}

table.cb-timetable span.cb-course-result-title {
    margin-bottom: 2px;
}

span.cb-timetable-session-times {
    color: #777;
    font-weight: bold;
    margin-right: 10px;
    white-space: nowrap;
}

span.cb-timetable-session-venue {
    color: #666;
    margin-right: 20px;
}

@media screen and (max-width: 767px) {
    table.cb-timetable div.cb-course-result-description {
        margin-left: -55px;
    }
}

/* For sessions that are part of a multi-session event... */
table.cb-timetable td.time div.cb-session-marker {
    background-image: url("../images/multi-session.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    height: 26px;
    width: 40px;
}

/* Links highlighting sessions from the same event */
div.cb-session-link {
    border-color: #999;
    border-bottom-style: solid;
    border-left-style: dashed;
    border-top-style: solid;
    border-width: 0px 0px 0px 3px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 10px;
}
div.cb-session-link.first {
    border-top-width: 3px;
    border-top-left-radius: 8px;
}
div.cb-session-link.last {
    border-bottom-width: 3px;
    border-bottom-left-radius: 8px;
}
div.cb-session-link.mid {
    border-bottom-width: 3px;
    border-left-width: 0px;
    height: 3px;
}
@media print {
    div.cb-session-link {
        display: none;
    }
}

/** -------------------------------------------------------------
 * Links to earlier/later events at the bottom of the page.
 */
div.cb-timetable-next-prev-links {
    position: relative;
    top: -15px;
}
@media print {
    div.cb-timetable-next-prev-links {
        display: none;
    }
}

div.cb-timetable-next-prev-links a,
div.cb-timetable-next-prev-links span {
    background-color: #f1efed;
    display: inline-block;
    font-weight: bold;
    padding: 4px 0px;
    text-align: center;
    white-space: nowrap;
    width: 80px;
}
@media screen and (max-width: 767px) {
    div.cb-timetable-next-prev-links a,
    div.cb-timetable-next-prev-links span {
        font-size: 12px;
        line-height: 18px;
    }
}

div.cb-timetable-next-prev-links a:hover {
    background-color: #ddd;
    text-decoration: none;
}

div.cb-timetable-next-prev-links span {
    color: #aaa;
}


/* *************************************************************** */
/* Themes page.                                                    */
/* *************************************************************** */

div.cb-theme-filters {
    display: inline-block;
    padding: 0px 20px 20px 0px;
    vertical-align: top;
}

div.cb-theme-filters label {
    display: table;
    margin-bottom: 0px;
}

form.cb-left-navigation-search {
    display: block;
    white-space: nowrap;
}

form.cb-left-navigation-search input[type=text] {
    border-right-color: none;
    box-sizing: border-box;
    height: 28px;
    padding-right: 28px;
    width: 100%;
}

form.cb-left-navigation-search input[type=submit] {
    background-image: url("../campl/images/interface/btn-search-header.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    border: none;
    color: transparent;
    font-size: 1px;
    width: 28px;
    height: 28px;
    margin-left: -28px;
    padding: 0px;
}

form.cb-left-navigation-search .cb-search-clear-search {
    font-size: 12px;
    line-height: 18px;
    position: relative;
    top: -9px;
}

@media screen and (max-width: 767px) {
    form.cb-left-navigation-search input[type=text] {
        height: 32px;
        padding-right: 32px;
    }

    form.cb-left-navigation-search input[type=submit] {
        width: 32px;
        height: 32px;
        margin-left: -32px;
    }

    form.cb-left-navigation-search .cb-search-clear-search {
        font-size: 16px;
        line-height: 22px;
    }
}


/* *************************************************************** */
/* Event page.                                                     */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Booking details for the event.
 */
div.cb-booking-details-heading {
    background-color: #28828a;
    border: 1px solid #28828a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    font-weight: bold;
    margin: 0px -4px;
    padding: 1px 0px;
    text-align: center;
}

div.cb-booking-details-heading.register {
    background-color: #865;
    border-color: #865;
}

div.cb-booking-details-heading.third-party {
    background-color: #568;
    border-color: #568;
}

div.cb-booking-details-heading a.cb-booking-details-close {
    background-image: url("../images/close-booking-panel.png");
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent;
    float: right;
    margin-right: 5px;
    text-decoration: none;
    width: 14px;
}

div.cb-booking-details {
    border-bottom: 2px solid #28828a;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #f8f6f4;
    margin: 0px -4px;
    padding: 4px;
}

div.cb-booking-details.register {
    border-bottom-color: #865;
}

div.cb-booking-details.third-party {
    border-bottom-color: #568;
}

div.cb-booking-details a.view {
    font-weight: bold;
    white-space: nowrap;
}
div.cb-booking-details a.book {
    background-color: #4285f4;
    background-image: url("../images/book-place.png");
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid #3e81e5;
    border-radius: 4px;
    color: #fff;
    display: table;
    font-weight: bold;
    margin: 10px auto 12px auto;
    padding: 5px 22px 6px 8px;
}
div.cb-booking-details a.book:hover {
    background-color: #3b77db;
    text-decoration: none;
}
div.cb-book-provisional {
    color: #666;
    display: table;
    font-size: 90%;
    font-weight: bold;
    margin: -12px auto 5px auto;
}
div.cb-booking-details a.wait {
    display: table;
    font-weight: bold;
}
div.cb-booking-details a.register {
}

div.cb-booking-details hr {
    margin: 10px -4px 5px -4px;
    border: none;
    border-top: 1px solid #ccc;
}

/** -------------------------------------------------------------
 * Course dates (other events for the same course).
 */
p.cb-other-dates {
    border-bottom: 2px solid #000;
    font-weight: bold;
    margin-bottom: 8px;
    margin-top: 10px;
}

p.cb-course-past-events {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
    p.cb-course-past-events {
        font-size: 14px;
        line-height: 20px;
    }
}

p.cb-course-dates {
    font-size: 90%;
    font-weight: bold;
    margin-bottom: 4px;
}

ul.cb-course-dates {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ccc;
    list-style: none;
    margin: 0px;
}

ul.cb-course-dates li {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    font-size: 12px;
    line-height: 18px;
    margin: 0px;
    padding: 3px 0px 4px 0px;
}
@media screen and (max-width: 767px) {
    ul.cb-course-dates li {
        font-size: 14px;
        line-height: 20px;
    }
}

ul.cb-course-dates li span.cb-course-date-places {
    float: right;
    margin-left: 10px;
    white-space: nowrap;
}

/** -------------------------------------------------------------
 * Event flag icons in title header (e.g., "beginners event").
 */
div.cb-event-splashes {
    display: block;
    line-height: 20px;
}
@media screen and (max-width: 767px) {
    div.cb-event-splashes {
        margin: 10px 0px 20px 0px;
    }
}

span.cb-event-splash {
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    line-height: 14px;
    height: 16px;
    margin-right: 6px;
    padding: 0px 4px !important;
}
@media print {
    span.cb-event-splash {
        border-color: #000;
    }
}

/* Hack to make this work better on IE (this works on IE 10 and above) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    span.cb-event-splash {
        height: 17px;
    }
}

span.cb-event-splash.beginners     { background-color: #4cb050; }
span.cb-event-splash.intermediate  { background-color: #7e7e50; }
span.cb-event-splash.advanced      { background-color: #b04c50; }
span.cb-event-splash.prerequisites { background-color: #374045; }
span.cb-event-splash.web           { background-color: #9c28b1; }
span.cb-event-splash.loan          { background-color: #795549; }
span.cb-event-splash.buy           { background-color: #f34334; }
span.cb-event-splash.new           { background-color: #3f51b5; }
span.cb-event-splash.updated       { background-color: #673bb7; }
span.cb-event-splash.special       { background-color: #ff9900; }
span.cb-event-splash.extra         { background-color: #00bcd5; }

span.cb-event-splash.charged {
    background-image: url("../images/icon-pound.png");
    background-position: top left;
    background-repeat: no-repeat;
    color: transparent;
}


/** -------------------------------------------------------------
 * Event date below the title (mobile view only).
 */
div.cb-event-date {
    font-weight: bold;
}
@media print, screen and (min-width: 768px) {
    div.cb-event-date {
        display: none;
    }
}

div.cb-event-date div.cb-event-status {
    font-weight: normal;
}

/** -------------------------------------------------------------
 * Course images are only shown at the top of the event page.
 */
div.cb-course-images {
    margin-bottom: -30px;
}
@media screen and (max-width: 767px) {
    div.cb-course-images {
        margin-bottom: -20px;
    }
}

img.course-image, div.cb-course-images img {
    display: none;
}

div.cb-course-images img.course-image {
    display: inline-block;
    width: 250px;
    margin: 0px 20px 20px 0px;
}
@media screen and (max-width: 767px) {
    div.cb-course-images img.course-image {
        width: 200px;
    }
}

/** -------------------------------------------------------------
 * Sessions table (also used on the booking page).
 */
table.cb-session-table {
    margin-top: -10px;
}

table.cb-session-table td.cb-session-number {
    width: 8px;
}

table.cb-session-table td.cb-session-booked {
    text-align: center;
    width: 50px;
}

table.cb-session-table td.cb-session-booked span {
    display: none;
}

/* Footnote text for optional sessions */
div.cb-optional-session-footnote {
    margin-top: -12px;
}

/* Mobile view of the sessions table */
@media screen and (max-width: 767px) {
    table.cb-session-table td.cb-session-number:before {
        content: "Session";
    }
    table.cb-session-table td.cb-session-number {
        font-weight: bold;
        width: auto;
    }
    table.cb-session-table td.cb-session-number:after {
        content: ":";
    }

    table.cb-session-table td.cb-session-booked {
        text-align: left;
        width: auto;
    }
    table.cb-session-table td.cb-session-booked img {
        margin-left: 4px;
        vertical-align: -3px;
    }
    table.cb-session-table td.cb-session-booked span {
        display: inline;
        font-size: 14px;
        margin-left: -2px;
    }
}

/* Hide the map links when printing */
@media print {
    table.cb-session-table td.venue {
        border-right: none;
    }
    table.cb-session-table td.map {
        border-left: none;
    }
    table.cb-session-table td.map * {
        display: none;
    }
}

/** -------------------------------------------------------------
 * Details about which types of email are enabled.
 */
div.sendEmails {
    margin: -10px 0px 10px 20px;
}

div.sendEmails div img {
    margin: 0px 4px 4px 0px;
    vertical-align: -8px;
}


/* *************************************************************** */
/* Embedded map (on event and venue pages).                        */
/* *************************************************************** */

div.cb-venue-map-container {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
}

/* Link to show the map */
a.cb-show-venue-map {
    background-color: #dda;
    background-image: url("../images/show-map.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #dda;
    border-bottom-left-radius: 10px;
    box-sizing: border-box;
    color: #442;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 10px 8px 30px;
    position: absolute;
    right: 0px;
}
@media screen and (min-width: 1200px) {
    a.cb-show-venue-map {
        border-bottom-right-radius: 10px;
    }
}
@media print {
    a.cb-show-venue-map {
        display: none;
    }
}

a.cb-show-venue-map:hover {
    background-color: #cc9;
    border-color: #cc9;
    text-decoration: none;
}

/* Hack to prevent the link clashing with other content */
div.cb-show-venue-map-spacer {
    float: right;
    height: 25px;
    width: 60px;
}
@media screen and (max-width: 767px) {
    div.cb-show-venue-map-spacer.event {
        display: none;
    }
}

/* The div holding the map */
div.cb-venue-map {
    background-color: #ccc;
    border: 4px solid #aaa;
    box-sizing: border-box;
    display: none;
    overflow: hidden;
    position: absolute;
    right: 0px;
}
@media screen and (max-width: 767px) {
    div.cb-venue-map {
        border: none;
    }
}

/* The map itself */
div.cb-venue-map iframe {
    border: none;
    height: 100%;
    width: 100%;
}

/* Fullscreen view of the map */
div.cb-venue-map.full-screen-map {
    border: none;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    width: 100% !important;
    height: 100% !important;
}

/* Buttons on the map (border deliberately overflows to prevent touch
   events leaking through to the map behind on Android, and yes it does
   need to be that thick for that) */
div.cb-map-btns {
    background-color: transparent;
    border: 10px solid transparent;
    position: absolute;
    width: 40px;
    height: 112px;
    right: -10px;
    top: -10px;
}

/* Individual buttons */
div.cb-map-btn {
    background-color: #d5d5f5;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #aac;
    cursor: pointer;
    position: absolute;
    width: 28px;
    height: 28px;
    right: 4px;
}

div.cb-map-btn.close-btn {
    background-image: url("../images/close-map.png");
    top: 4px;
}

div.cb-map-btn.menu-btn {
    background-image: url("../images/map-menu.png");
    top: 40px;
}

div.cb-map-btn.fullscreen-btn {
    background-image: url("../images/fullscreen-map.png");
    top: 76px;
}
div.cb-map-btn.exit-fullscreen-btn {
    background-image: url("../images/exit-fullscreen-map.png");
    top: 76px;
}

/* Hide the fullscreen button when the map already occupies the whole
   screen (the map tries to be at least 768x768px) */
@media screen and (max-width: 767px) and (max-height: 767px) {
    div.cb-map-btns {
        height: 76px;
    }

    div.cb-map-btn.fullscreen-btn {
        display: none;
    }
}

/* The menu to switch between venues on the map */
div.cb-map-menu {
    background-color: #ffd;
    border: 4px solid #aaa;
    display: none;
    padding: 5px 10px 0px 10px;
    position: absolute;
    right: 40px;
    top: 40px;
    width: 200px;
}

div.cb-map-menu li {
    margin-top: 6px;
}

div.cb-map-menu li.active a {
    font-weight: bold;
}


/* *************************************************************** */
/* Event/edit (and create) page.                                   */
/* *************************************************************** */

/* Preview of the event */
div.cb-page-preview {
    border: 3px solid #000;
    border-radius: 10px;
    margin: 20px 0px;
    position: relative;
}
div.shown_section div.cb-page-preview {
    margin: 0px; /* Used on email template page */
}

div.cb-page-preview a.close {
    background-color: #fff;
    background-image: url("../images/close-preview.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    border-radius: 16px;
    color: transparent;
    display: block;
    font-size: 1px;
    height: 32px;
    position: absolute;
    right: -16px;
    top: -17px;
    width: 32px;
}
div.cb-page-preview a.close:hover {
    background-color: #dde;
}

div.cb-preview-heading {
    background-color: #f0f0f0;
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
    box-shadow: 0px 3px 3px 0px #f0f0f0;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 3px;
    padding: 3px 10px 0px 10px;
}

div.cb-preview-warning {
    background-image: url("../campl/images/interface/icon-alert.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    margin-bottom: -10px;
    min-height: 34px;
    padding: 10px 10px 0px 44px;
}

div.cb-preview-body {
    padding: 0px 10px 10px 10px;
}


/* *************************************************************** */
/* Event comparison/merging                                        */
/* *************************************************************** */

span.diff {
    background-color: #faa;
    color: #440;
}


/* *************************************************************** */
/* Event/bookings page.                                            */
/* *************************************************************** */

form.cb-filter-bookings select {
    margin-left: 4px;
}

a.cb-person-link:hover {
    outline: 1px solid #aaa;
}


/* *************************************************************** */
/* Event/attendance page.                                          */
/* *************************************************************** */

table.cb-attendance {
    margin-top: 20px;
}

table.cb-attendance label {
    margin-bottom: 0px;
}

/* Nested session attendance table */
table.cb-attendance table.cb-session-attendance tr { display: table-row; }
table.cb-attendance table.cb-session-attendance td { display: table-cell; }

/* (also used on booking/edit page, where is isn't nested) */
table.cb-session-attendance,
table.cb-session-attendance tr,
table.cb-session-attendance td {
    border: none;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
}


/* *************************************************************** */
/* Event/reports page.                                             */
/* *************************************************************** */

div.cb-report-description {
    margin: 5px 0px 15px 0px;
}


/* *************************************************************** */
/* Booking page.                                                   */
/* *************************************************************** */

/* Booking details */
div.cb-booking {
    background-color: #fffcf6;
    border: 1px solid #ddd;
    box-shadow: 3px 3px 3px #ddd;
    display: block;
    margin: 20px 0px;
    max-width: 560px;
    padding: 8px 10px 0px 10px;
}

time.cb-booking-left, img.cb-booking-left {
    display: block;
    float: left;
    margin: 2px 15px 15px 0px;
}

div.cb-booking-right {
    display: inline-block;
    max-width: 485px;
}

@media screen and (max-width: 640px) { div.cb-booking { max-width: 550px; } div.cb-booking-right { max-width: 475px; } }
@media screen and (max-width: 630px) { div.cb-booking { max-width: 540px; } div.cb-booking-right { max-width: 465px; } }
@media screen and (max-width: 620px) { div.cb-booking { max-width: 530px; } div.cb-booking-right { max-width: 455px; } }
@media screen and (max-width: 610px) { div.cb-booking { max-width: 520px; } div.cb-booking-right { max-width: 445px; } }
@media screen and (max-width: 600px) { div.cb-booking { max-width: 510px; } div.cb-booking-right { max-width: 435px; } }
@media screen and (max-width: 590px) { div.cb-booking { max-width: 500px; } div.cb-booking-right { max-width: 425px; } }
@media screen and (max-width: 580px) { div.cb-booking { max-width: 490px; } div.cb-booking-right { max-width: 415px; } }
@media screen and (max-width: 570px) { div.cb-booking { max-width: 480px; } div.cb-booking-right { max-width: 405px; } }
@media screen and (max-width: 560px) { div.cb-booking { max-width: 470px; } div.cb-booking-right { max-width: 395px; } }
@media screen and (max-width: 550px) { div.cb-booking { max-width: 460px; } div.cb-booking-right { max-width: 385px; } }

/* Event start date. */
time.cb-booking-time {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 2px 2px 3px #ccc;
    display: block;
    height: 67px;
    margin-bottom: 25px;
    position: relative;
    width: 60px;
}

time.cb-booking-time span {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    box-sizing: border-box;
    display: block;
    font-weight: bold;
    position: absolute;
    text-align: center;
    width: 100%;
}

time.cb-booking-time span.day {
    border-bottom: 1px solid #000;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    bottom: 0px;
    color: #222;
    font-size: 12px;
    line-height: 15px;
    height: 16px;
}

time.cb-booking-time span.date {
    color: #666;
    font-size: 28px;
    line-height: 31px;
    height: 31px;
    top: 20px; /* Immediately below month */
}

time.cb-booking-time span.month {
    background-color: #000;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    height: 20px;
    top: 0px;
}

time.cb-booking-time span.year {
    color: #998;
    border: none;
    font-size: 12px;
    line-height: 16px;
    top: 70px;
}

/* Event/course title */
p.cb-booking-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
}
@media screen and (max-width: 767px) {
    p.cb-booking-title {
        font-size: 17px;
        line-height: 24px;
    }
}

/* Venue list */
span.cb-booking-venues {
    display: inline-block;
}

@media screen and (max-width: 767px) {
    span.cb-booking-venues a {
        display: inline-block;
        margin-bottom: 9px;
    }
}

/* Note for provisional bookings / bookings that require approval */
div.cb-booking-note {
    margin-bottom: 40px;
    margin-top: 20px;
    max-width: 30em;
}

/* Links to add the booking to the user's calendar. */
a.cb-add-to-calendar {
    background-image: url("../images/add-to-calendar.png");
    background-position: left center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    color: #000;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    height: 64px;
    padding-left: 70px;
    padding-top: 20px;
}
@media print {
    a.cb-add-to-calendar {
        display: none;
    }
}

div.cb-add-each-to-calendar {
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px 0px;
    max-width: 500px;
    padding: 10px;
}

div.cb-add-each-to-calendar table th,
div.cb-add-each-to-calendar table td {
    border: none;
    padding: 2px 10px 2px 0px;
}

div.cb-add-each-to-calendar table td span {
    white-space: nowrap;
}

div.cb-add-each-to-calendar table td span.date {
    display: inline-block;
    min-width: 120px;
}
@media screen and (max-width: 767px) {
    div.cb-add-each-to-calendar table td span.date {
        min-width: 150px;
    }
}

div.cb-add-each-to-calendar table td span img {
    margin-right: 4px;
}


/* *************************************************************** */
/* Booking/edit (and create) page.                                 */
/* *************************************************************** */

/* Prerequisites and terms and conditions the user must agree to */
div.cb-booking-prerequisites,
div.cb-booking-terms {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px 0px;
    max-height: 200px;
    overflow: auto;
    padding: 10px;
}

div.cb-booking-prerequisites div.heading {
    margin-top: 0px;
}

/* Checkbox to agree to prerequisites and terms and conditions */
div.cb-agree-booking-terms {
    margin-top: 30px;
    max-width: 800px;
}

div.cb-booking-terms-not-agreed {
    background-color: #fee;
    display: inline-block;
    max-width: 800px;
    padding: 10px;
}

div.cb-booking-terms-not-agreed td {
    background-color: #fee;
}

/* Checkboxes to select sessions to book */
label.cb-booking-session {
    display: block;
}

@media screen and (max-width: 767px) {
    label.cb-booking-session {
        margin-top: 4px;
        margin-bottom: 12px;
        padding-left: 24px;
    }

    label.cb-booking-session input[type=checkbox] {
        margin-left: -24px;
    }
}

span.cb-booking-session-time {
    color: #555;
    font-weight: bold;
    white-space: nowrap;
}

/* Link to book all sessions */
a.cb-booking-select-all {
    background-image: url("../images/select_all.gif");
    background-position: center left;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: -1px;
    padding-left: 19px
}

/* Hint for preferred name format */
div.cb-participant-name-hint {
    color: #822;
    font-style: italic;
    font-weight: bold;
    margin-top: 9px;
}


/* *************************************************************** */
/* Venue list/search page.                                         */
/* *************************************************************** */

/* List of venues */
ul.cb-venue-list li {
    margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
    ul.cb-venue-list li {
        margin-bottom: 15px;
    }
}

/* Embedded map links in the venue list */
a.cb-venue-list-show-map {
    background-color: #eee;
    background-image: url("../images/show-map.png");
    background-position: 5px 3px;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: #442;
    display: inline-block;
    font-style: normal;
    font-weight: bold;
    margin-top: -1px;
    padding: 1px 6px 2px 26px;
}
@media screen and (max-width: 767px) {
    a.cb-venue-list-show-map {
        background-position: 5px 5px;
    }
}
@media print {
    a.cb-venue-list-show-map {
        display: none;
    }
}

a.cb-venue-list-show-map:hover {
    background-color: #ddd;
    text-decoration: none;
}

/* Venue map links in the session table (above) */
table.cb-session-table a.cb-venue-list-show-map {
    background-color: #dda;
    background-position: 4px 2px;
    color: #222;
    padding: 0px 4px 1px 24px;
}
@media screen and (max-width: 767px) {
    table.cb-session-table a.cb-venue-list-show-map {
        background-position: 4px 5px;
    }
}

table.cb-session-table a.cb-venue-list-show-map:hover {
    background-color: #cc9;
}

/* External map links in the venue list */
ul.cb-venue-list a.campl-external {
    margin: 0px 2px;
}


/* *************************************************************** */
/* Venue page.                                                     */
/* *************************************************************** */

/* Special styling for the map URL to make it fit on one line */
p.cb-map-url {
    float: left;
    line-height: 21px;
    margin-bottom: 4px;
    margin-right: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    p.cb-map-url {
        line-height: 25px;
    }
}

p.cb-map-url span.heading {
    float: left;
}


/* *************************************************************** */
/* Venue/events page.                                              */
/* *************************************************************** */

/* Date range selection */
table.cb-date-range {
    margin: 0px;
}
@media screen and (max-width: 767px) {
    table.cb-date-range {
        font-size: 12px;
        line-height: 18px;
    }
}

table.cb-date-range td {
    padding-right: 8px;
    vertical-align: baseline;
    white-space: nowrap;
}

table.cb-date-range td input {
    margin-bottom: 0px;
    width: 80px;
}
@media screen and (max-width: 767px) {
    table.cb-date-range td input {
        font-size: 12px;
        height: 18px;
        line-height: 18px;
    }
}

/* The table of events */
table.cb-venue-events-table {
    margin-bottom: 40px;
}


/* *************************************************************** */
/* Venue schedule pages.                                           */
/* *************************************************************** */

/* Table for the venue schedule */
table.cb-schedule {
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-collapse: separate;
    margin: 10px 0px;
}
@media print {
    table.cb-schedule {
        page-break-inside: avoid;
    }
    table.cb-schedule td.th {
        background-color: #ddd !important;
    }
}

table.cb-schedule td {
    background-color: #fff;
    padding: 4px 5px;
}

/* Header cells for the venue names (fixed width links) */
table.cb-schedule td.cb-schedule-venue {
    background-color: #d2f3e1;
    border-left: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    font-weight: bold;
}
table.cb-schedule td.cb-schedule-venue.blank {
    border-left: none;
}

table.cb-schedule td.cb-schedule-venue a {
    display: block;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

/* Tweak the widths to fit the page size and number of venues */
table.cb-schedule td.cb-schedule-venue.v-1 a { width: 900px; }
table.cb-schedule td.cb-schedule-venue.v-2 a { width: 450px; }
table.cb-schedule td.cb-schedule-venue.v-3 a { width: 300px; }
table.cb-schedule td.cb-schedule-venue.v-4 a { width: 225px; }
table.cb-schedule td.cb-schedule-venue.v-5 a { width: 180px; }
table.cb-schedule td.cb-schedule-venue.v-6 a { width: 150px; }
table.cb-schedule td.cb-schedule-venue.v-7 a { width: 127px; }
table.cb-schedule td.cb-schedule-venue.v-8 a { width: 113px; }

@media screen and (max-width: 1040px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 800px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 400px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 267px; }
    table.cb-schedule td.cb-schedule-venue.v-4 a { width: 200px; }
    table.cb-schedule td.cb-schedule-venue.v-5 a { width: 160px; }
    table.cb-schedule td.cb-schedule-venue.v-6 a { width: 133px; }
    table.cb-schedule td.cb-schedule-venue.v-7 a { width: 114px; }
    table.cb-schedule td.cb-schedule-venue.v-8 a { width: 100px; }
}
@media screen and (max-width: 940px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 700px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 350px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 233px; }
    table.cb-schedule td.cb-schedule-venue.v-4 a { width: 175px; }
    table.cb-schedule td.cb-schedule-venue.v-5 a { width: 140px; }
    table.cb-schedule td.cb-schedule-venue.v-6 a { width: 116px; }
    table.cb-schedule td.cb-schedule-venue.v-7 a { width: 100px; }
}
@media screen and (max-width: 840px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 600px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 300px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 200px; }
    table.cb-schedule td.cb-schedule-venue.v-4 a { width: 150px; }
    table.cb-schedule td.cb-schedule-venue.v-5 a { width: 120px; }
    table.cb-schedule td.cb-schedule-venue.v-6 a { width: 100px; }
}
@media screen and (max-width: 740px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 500px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 250px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 167px; }
    table.cb-schedule td.cb-schedule-venue.v-4 a { width: 125px; }
    table.cb-schedule td.cb-schedule-venue.v-5 a { width: 100px; }
}
@media screen and (max-width: 640px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 400px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 200px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 133px; }
    table.cb-schedule td.cb-schedule-venue.v-4 a { width: 100px; }
}
@media screen and (max-width: 540px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 300px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 150px; }
    table.cb-schedule td.cb-schedule-venue.v-3 a { width: 100px; }
}
@media screen and (max-width: 440px) {
    table.cb-schedule td.cb-schedule-venue.v-1 a { width: 200px; }
    table.cb-schedule td.cb-schedule-venue.v-2 a { width: 100px; }
}

/* Labels for hours of day */
table.cb-schedule td.cb-schedule-hour {
    border-top: 1px solid #e4e4e4;
    box-sizing: border-box;
    height: 40px;
    padding-top: 0px;
    text-align: right;
}
table.cb-schedule td.cb-schedule-hour div {
    background-color: transparent;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    position: relative;
    top: -9px;
}
table.cb-schedule td.cb-schedule-hour div span {
    background-color: #fff;
    padding: 0px 4px;
}

/* Special-case: all venues hidden because they don't have bookings */
table.cb-schedule td.cb-schedule-venues-hidden {
    border-left: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    color: #aaa;
    font-size: 24px;
    line-height: 30px;
    max-width: 200px;
    padding: 0px 20px;
    text-align: center;
    vertical-align: middle;
}

/* Cells holding slots for each venue per hour */
table.cb-schedule td.cb-schedule-cell {
    border-left: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    padding: 0px;
}

/* Details of bookings in a particular venue for the day */
div.cb-schedule-day {
    height: 10px;
    left: 0px;
    margin: 0px 2px 0px 2px;
    overflow: visible;
    padding: 0px;
    position: relative;
    top: 0px;
    width: auto;
}

div.cb-schedule-day div
{
    background-color: transparent;
    border: 1px solid #888;
    box-sizing: border-box;
    left: 0px;
    overflow: visible;
    position: absolute;
    width: 100%;
}

div.cb-schedule-day img
{
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}

div.cb-schedule-day p
{
    font-size: 12px;
    margin: 1px;
    position: absolute;
    z-index: 2;
}


/* *************************************************************** */
/* Person page (current bookings).                                 */
/* *************************************************************** */

/* Spacer between venues */
div.cb-venue-spacer {
    height: 0px;
    margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
    div.cb-venue-spacer {
        margin-bottom: 10px;
    }
}


/* *************************************************************** */
/* Person/edit (and create) page.                                  */
/* *************************************************************** */

p.cb-api-password {
    background-color: #fed;
    border: 1px solid #400;
    color: #400;
    display: inline-block;
    font-family: monospace, Courier New;
    font-weight: bold;
    padding: 3px 8px;
}


/* *************************************************************** */
/* Person/training_history page.                                   */
/* *************************************************************** */

div.cb-training-history-filters {
    display: inline-block;
    padding: 0px 20px 20px 0px;
    vertical-align: top;
}

div.cb-training-history-filters:after {
    content: " ";
    display: inline-block;
    height: 1px;
    width: 3em;
}

div.cb-training-history-filters label {
    display: table;
    margin-bottom: 0px;
}


/* *************************************************************** */
/* Person/permissions page.                                        */
/* *************************************************************** */

/** -------------------------------------------------------------
 * Tree view of roles and privileges.
 */
div.role {
    margin-left: 17px;
    margin-top: 3px;
}

div.role img {
    vertical-align: -3px;
}

div.role div.privileges {
    border-left: 2px dotted #ddd;
    margin-left: 24px;
    padding-left: 10px;
}

div.role div.final-privileges {
    padding-left: 36px;
}

div.role div.privileges div.shown_section,
div.role div.final-privileges div.shown_section {
    padding: 5px 0px 10px 15px;
}

div.role div.privileges p,
div.role div.final-privileges p {
    line-height: 20px;
    margin-bottom: 2px;
}
@media screen and (max-width: 767px) {
    div.role div.privileges p,
    div.role div.final-privileges p {
        line-height: 22px;
    }
}

div.role div.privileges img,
div.role div.final-privileges img {
    vertical-align: -4px;
}

/** -------------------------------------------------------------
 * Privilege edit form.
 */
div.edit-all-privs label {
    margin-bottom: 0px;
}

form div.privileges {
    padding-bottom: 3px;
}

form div.privileges p,
form div.privileges div.edit-priv {
    margin-left: 3px;
}


/* *************************************************************** */
/* Reports pages.                                                  */
/* *************************************************************** */

/* Make the title print a little smaller than regular titles,
   since it is often very long */
@media print {
    h1.cb-report-title {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 10px;
        margin-top: -10px;
    }
}

/* Options below the header to customise the report */
div.cb-customise-report {
    margin-bottom: 20px;
    margin-top: -10px;
}
@media print {
    div.cb-customise-report {
        display: none;
    }
}

/** -------------------------------------------------------------
 * Report editing form.
 */
div.cb-report-edit-section {
    background-image: url("../images/icon-arrow-home-menu-orange.gif");
    background-position: 0px 2px;
    background-repeat: no-repeat;
    padding-left: 20px;
}
@media screen and (max-width: 767px) {
    div.cb-report-edit-section {
        background-position: 0px 4px;
        padding-left: 0px;
    }
}

div.cb-report-edit-section p.header {
    display: inline-block;
    margin-right: 5px;
}
@media screen and (max-width: 767px) {
    div.cb-report-edit-section p.header {
        margin-left: 20px;
    }
}

div.cb-report-edit-section p.header label {
    margin-right: 10px;
}

/* Generic table for adding and removing values from a list */
table.cb-add-remove-values {
    width: 100%;
}

table.cb-add-remove-values select {
    margin: 0px;
    width: 100%;
}

table.cb-add-remove-values select[size="10"] {
    height: 160px;
}
table.cb-add-remove-values select[size="18"] {
    height: 280px;
}

table.cb-add-remove-values td {
    width: 50%;
}

table.cb-add-remove-values td.buttons {
    padding: 0px 5px;
    text-align: center;
    vertical-align: middle;
    width: 1em;
}

table.cb-add-remove-values td.buttons input {
    display: block;
    margin: 10px auto;
}
@media screen and (max-width: 767px) {
    table.cb-add-remove-values td.buttons input {
        display: inline-block;
        margin: 5px 0px;
    }
}

/* Hack to attempt to make this layout properly on MS Edge */
@supports (-ms-ime-align:auto) {
    table.cb-add-remove-values { table-layout: fixed; }
    table.cb-add-remove-values td { width: 40%; }
}

/* Mobile view of this table, stacks vertically */
@media screen and (max-width: 767px) {
    table.cb-add-remove-values td {
        display: block;
        width: 100%;
    }

    table.cb-add-remove-values td.buttons {
        padding: 5px 0px;
        width: 100%;
    }
}

/* Custom report filters */
@media screen and (max-width: 767px) {
    div.cb-report-filter {
        border: 1px solid #aaa;
        margin-bottom: 20px;
        padding: 9px 5px 0px 5px;
    }
}

div.cb-report-filter input.error {
    border-color: #b94a48;
    color: #b94a48;
}

div.cb-apply-report-filters {
    margin-bottom: 15px;
}

/* Placeholder while the report is loading (asynchronously) */
p.cb-report-loading {
    background-image: url("../images/spinner.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 256px 256px;
    box-sizing: border-box;
    color: #ccc;
    display: none;
    font-size: 18px;
    height: 256px;
    line-height: 20px;
    margin: 40px 0px;
    padding-top: 118px;
    text-align: center;
    white-space: nowrap;
}

/* Report results table (the actual report data) */
table.cb-report th.row-number {
    text-align: right;
    width: 1em;
}

table.cb-report td.number {
    text-align: right;
}

table.cb-report th.totals {
    background-color: #28828a !important;
}

table.cb-report td.total {
    background-color: #f8f4f0 !important;
    font-weight: bold;
    text-align: right;
}


/* *************************************************************** */
/* Email template page.                                            */
/* *************************************************************** */

li div.email_template pre {
    margin-left: 12px;
}
@media screen and (max-width: 767px) {
    li div.email_template pre {
        margin-left: 15px;
    }
}

div.email_template span.template_tag,
div.email_template span.template_closing-brace {
    color: #6060B0;
    white-space: nowrap;
}

div.email_template span.template_error,
div.email_template span.template_invalid-tag {
    background-color: #fb9;
    color: #6060B0;
    padding: 1px 4px 0px 4px;
    white-space: nowrap;
}

div.email_template span.template_conditional {
    background-color: rgba(230,210,190,0.4);
    border: dashed 1px #888;
    display: block;
    margin: 4px 2px;
    padding: 1px;
}

/* Input fields for an email use fixed width font */
.emailForm input[type=text], .emailForm textarea {
    font-family: monospace, Courier New;
}


/* *************************************************************** */
/* Institution page.                                               */
/* *************************************************************** */

a.cb-download {
    background-image: url("../images/download.gif");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 18px;
}


/* *************************************************************** */
/* Programme problems page.                                        */
/* *************************************************************** */

table.cb-problem-table {
    border: 1px solid #ccc;
    border-collapse: separate;
    margin-bottom: 20px;
}

table.cb-problem-table th {
    background-color: #28828a;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 4px 5px;
    text-align: left;
}

table.cb-problem-table td.event {
    background-color: #d2f3e1;
    background: linear-gradient(#d2f3e1, #e9f9f0);
    border-top: 1px solid #ccc;
    font-weight: bold;
    padding: 4px 5px;
    text-align: left;
}

table.cb-problem-table .date {
    color: #777;
    white-space: nowrap;
}

table.cb-problem-table td.problems {
    border: none;
    padding: 4px 5px;
    text-align: left;
}

table.cb-problem-table td.problems ul {
    margin-bottom: 5px;
    margin-left: 30px;
    margin-top: 2px;
}
@media screen and (max-width: 767px) {
    table.cb-problem-table td.problems ul {
        margin-left: 35px;
        margin-top: 5px;
    }
}

table.cb-problem-table td.session1 {
    white-space: nowrap;
}

table.cb-problem-table td.session2 {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    white-space: nowrap;
}

table.cb-problem-table tr.next td {
    border-top: 1px solid #ccc;
}