/* Minification failed. Returning unminified contents.
(799,2): run-time error CSS1031: Expected selector, found '/'
(799,2): run-time error CSS1025: Expected comma or open brace, found '/'
(806,14): run-time error CSS1030: Expected identifier, found '.'
(806,22): run-time error CSS1031: Expected selector, found ')'
(806,22): run-time error CSS1025: Expected comma or open brace, found ')'
(813,16): run-time error CSS1030: Expected identifier, found '.'
(813,24): run-time error CSS1031: Expected selector, found ')'
(813,24): run-time error CSS1025: Expected comma or open brace, found ')'
(2899,19): run-time error CSS1035: Expected colon, found 'h2'
(3524,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3525,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3526,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3527,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3528,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3529,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3531,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3532,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3533,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3534,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3536,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3537,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3558,16): run-time error CSS1039: Token not allowed after unary operator: '-menu-border-width'
(3558,47): run-time error CSS1039: Token not allowed after unary operator: '-color-default'
(3559,26): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg'
(3566,17): run-time error CSS1039: Token not allowed after unary operator: '-menu-padding'
(3567,20): run-time error CSS1039: Token not allowed after unary operator: '-menu-min-height'
(3569,26): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg'
(3570,15): run-time error CSS1039: Token not allowed after unary operator: '-color-default'
(3576,26): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg'
(3578,17): run-time error CSS1039: Token not allowed after unary operator: '-menu-list-padding'
(3579,20): run-time error CSS1039: Token not allowed after unary operator: '-menu-min-height'
(3586,15): run-time error CSS1039: Token not allowed after unary operator: '-menu-item-width'
(3608,22): run-time error CSS1039: Token not allowed after unary operator: '-color-careerfam'
(3613,15): run-time error CSS1039: Token not allowed after unary operator: '-color-careerfam'
(3616,26): run-time error CSS1039: Token not allowed after unary operator: '-color-careerfam'
(3619,26): run-time error CSS1039: Token not allowed after unary operator: '-color-careerfam'
(3627,22): run-time error CSS1039: Token not allowed after unary operator: '-color-careers'
(3642,22): run-time error CSS1039: Token not allowed after unary operator: '-color-email'
(3647,15): run-time error CSS1039: Token not allowed after unary operator: '-color-email'
(3650,26): run-time error CSS1039: Token not allowed after unary operator: '-color-email'
(3653,26): run-time error CSS1039: Token not allowed after unary operator: '-color-email'
(3666,22): run-time error CSS1039: Token not allowed after unary operator: '-color-subject'
(3670,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subject'
(3673,26): run-time error CSS1039: Token not allowed after unary operator: '-color-subject'
(3683,22): run-time error CSS1039: Token not allowed after unary operator: '-color-general'
(3689,15): run-time error CSS1039: Token not allowed after unary operator: '-color-general'
(3693,26): run-time error CSS1039: Token not allowed after unary operator: '-color-general'
 */
/*
Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013
*/
.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.

    More Info : http://www.quirksmode.org/css/box.html
  */
  -webkit-box-sizing: border-box; /* webkit */
     -moz-box-sizing: border-box; /* firefox */
          box-sizing: border-box; /* css3 */
}

.select2-container .select2-choice {
    display: block;
    height: 26px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(top, #fff 0%, #eee 50%);
}

.select2-container.select2-drop-above .select2-choice {
    border-bottom-color: #aaa;

    border-radius: 0 0 4px 4px;

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
    background-image: linear-gradient(top, #eee 0%, #fff 90%);
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
    margin-right: 42px;
}

.select2-container .select2-choice > .select2-chosen {
    margin-right: 26px;
    display: block;
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.select2-container .select2-choice abbr {
    display: none;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 24px;
    top: 8px;

    font-size: 1px;
    text-decoration: none;

    border: 0;
    background: url('select2.png') right top no-repeat;
    cursor: pointer;
    outline: 0;
}

.select2-container.select2-allowclear .select2-choice abbr {
    display: inline-block;
}

.select2-container .select2-choice abbr:hover {
    background-position: right -11px;
    cursor: pointer;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: 9999;
    top: 100%;

    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    border-top: 0;

    border-radius: 0 0 4px 4px;

    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.select2-drop-auto-width {
    border-top: 1px solid #aaa;
    width: auto;
}

.select2-drop-auto-width .select2-search {
    padding-top: 4px;
}

.select2-drop.select2-drop-above {
    margin-top: 1px;
    border-top: 1px solid #aaa;
    border-bottom: 0;

    border-radius: 4px 4px 0 0;

    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
            box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}

.select2-drop-active {
    border: 1px solid #5897fb;
    border-top: none;
}

.select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid #5897fb;
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;

    border-left: 1px solid #aaa;
    border-radius: 0 4px 4px 0;

    background-clip: padding-box;

    background: #ccc;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
    background-image: linear-gradient(top, #ccc 0%, #eee 60%);
}

.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    background: url('select2.png') no-repeat 0 1px;
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;

    position: relative;
    z-index: 10000;

    white-space: nowrap;
}

.select2-search input {
    width: 100%;
    height: auto !important;
    min-height: 26px;
    padding: 4px 20px 4px 5px;
    margin: 0;

    outline: 0;
    font-family: sans-serif;
    font-size: 1em;

    border: 1px solid #aaa;
    border-radius: 0;

    -webkit-box-shadow: none;
            box-shadow: none;

    background: #fff url('../../Images/select2.png') no-repeat 100% -22px;
    background: url('../../Images/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('../../Images/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../Images/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../Images/select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
}

.select2-drop.select2-drop-above .select2-search input {
    margin-top: 4px;
}

.select2-search input.select2-active {
    background: #fff url('../../Images/select2-spinner.gif') no-repeat 100%;
    background: url('../../Images/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('../../Images/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../Images/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../Images/select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.select2-dropdown-open .select2-choice {
    border-bottom-color: transparent;
    -webkit-box-shadow: 0 1px 0 #fff inset;
            box-shadow: 0 1px 0 #fff inset;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    background-color: #eee;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
    background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
    background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
    background-image: linear-gradient(top, #fff 0%, #eee 50%);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    border: 1px solid #5897fb;
    border-top-color: transparent;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
    background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
    background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
    background-image: linear-gradient(bottom, #fff 0%, #eee 50%);
}

.select2-dropdown-open .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
    filter: none;
}
.select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -18px 1px;
}

/* results */
.select2-results {
    max-height: 200px;
    padding: 0 0 0 4px;
    margin: 4px 4px 4px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.select2-results ul.select2-result-sub {
    margin: 0;
    padding-left: 0;
}

.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }

.select2-results li {
    list-style: none;
    display: list-item;
    background-image: none;
}

.select2-results li.select2-result-with-children > .select2-result-label {
    font-weight: bold;
}

.select2-results .select2-result-label {
    padding: 3px 7px 4px;
    margin: 0;
    cursor: pointer;

    min-height: 1em;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

.select2-results .select2-highlighted {
    background: #3875d7;
    color: #fff;
}

.select2-results li em {
    background: #feffde;
    font-style: normal;
}

.select2-results .select2-highlighted em {
    background: transparent;
}

.select2-results .select2-highlighted ul {
    background: #fff;
    color: #000;
}


.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
    background: #f4f4f4;
    display: list-item;
}

/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
    color: #666;
    background: #f4f4f4;
    display: list-item;
    cursor: default;
}
.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
    display: none;
}

.select2-more-results.select2-active {
    background: #f4f4f4 url('../../Images/select2-spinner.gif') no-repeat 100%;
}

.select2-more-results {
    background: #f4f4f4;
    display: list-item;
}

/* disabled styles */

.select2-container.select2-container-disabled .select2-choice {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
    background-color: #f4f4f4;
    background-image: none;
    border-left: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
    display: none;
}


/* multiselect */

.select2-container-multi .select2-choices {
    height: auto !important;
    height: 1%;
    margin: 0;
    padding: 0;
    position: relative;

    border: 1px solid #aaa;
    cursor: text;
    overflow: hidden;

    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
    background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
    background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
    background-image: linear-gradient(top, #eee 1%, #fff 15%);
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-container-multi .select2-choices {
    min-height: 26px;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.select2-container-multi .select2-choices li {
    float: left;
    list-style: none;
}
.select2-container-multi .select2-choices .select2-search-field {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 5px;
    margin: 1px 0;

    font-family: sans-serif;
    font-size: 100%;
    color: #666;
    outline: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: transparent !important;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
    background: #fff url('../../Images/select2-spinner.gif') no-repeat 100% !important;
}

.select2-default {
    color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
    padding: 3px 5px 3px 18px;
    margin: 3px 0 3px 5px;
    position: relative;

    line-height: 13px;
    color: #333;
    cursor: default;
    border: 1px solid #aaaaaa;

    border-radius: 3px;

    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #e4e4e4;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
    cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
    background: #d4d4d4;
}

.select2-search-choice-close {
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    right: 3px;
    top: 4px;

    font-size: 1px;
    outline: none;
    background: url('../../Images/select2.png') right top no-repeat;
}

.select2-container-multi .select2-search-choice-close {
    left: 3px;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
    background-position: right -11px;
}

/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    padding: 3px 5px 3px 5px;
    border: 1px solid #ddd;
    background-image: none;
    background-color: #f4f4f4;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
    background: none;
}
/* end multiselect */


.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}
/* Retina-ize icons */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)  {
  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
      background-image: url('../../Images/select2x2.png') !important;
      background-repeat: no-repeat !important;
      background-size: 60px 40px !important;
  }
  .select2-search input {
      background-position: 100% -21px !important;
  }
}

/* Careerscape Online Core Style Sheet */
/*
 * Mobile-first responsive design approach:
 * - Base styles are for mobile devices (up to 767px)
 * - 768px breakpoint for tablets and small desktops
 * - 1024px breakpoint for larger desktops
 *
 * Note: Make sure to include this viewport meta tag in your HTML:
 * <meta name="viewport" content="width=device-width, initial-scale=1.0">
 */

/* Preload critical background images to prevent timing issues */
body::before {
  content: '';
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  background-image: url(../images/submenucf-top.png), url(../images/submenucf-bottom.png),
    url(../images/submenucs-top.png), url(../images/submenucs-bottom.png), url(../images/submenugi-top.png),
    url(../images/submenugi-bottom.png), url(../images/submenuma-top.png), url(../images/submenuma-bottom.png),
    url(../images/submenusl-top.png), url(../images/submenusl-bottom.png), url(../images/bg-subjectlinks.jpg);
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}

/*  redefined html tags  - - - - - - - - - - - - - - - - - - - - - - -*/

body {
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 82.5%;
  background-color: white;
  color: black;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 160%;
  margin: 0;
  padding: 0;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
}

h2 {
  font-size: 150%;
  margin: 0;
  padding: 0;
  color: #000;
}

h3 {
  font-size: 130%;
  margin: 0;
  padding: 1em 0 0.3em 0;
}

h1,
h2,
h3 {
  font-weight: normal;
}

h4,
h5 {
  font-size: 110%;
  margin: 0;
  padding: 0.5em 0;
}

h5 {
  font-size: 100%;
  font-weight: bold;
  margin: 0;
  padding: 0.2em 0;
}

a {
  color: black;
}

a:hover {
  text-decoration: none;
}

ul {
  margin: 0;
}

p {
  padding: 0.5em 0;
  margin: 0;
}

p.clear {
  clear: both;
  visibility: hidden;
  padding: 0;
  margin: 0;
  font-size: 4px;
}

.hidden {
  display: none;
}

table {
  margin: 15px 25px;
  padding: 0;
  border: 1px solid black;
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

ul.liststyle1 li,
ul.liststyle2 li {
  list-style-image: url(../images/linkbullet-dash.gif) !important;
  list-style-position: outside !important;
  list-style-type: disc !important;
}

ul.liststyle2 li {
  padding-bottom: 0.5em !important;
}

p.instructiontext img {
  vertical-align: middle;
  padding: 0 !important;
}

#container {
  max-width: 768px;
  border-bottom: none;
  margin: 0 auto;
  box-shadow:
    inset 8px 0 8px -8px rgba(0, 0, 0, 0.15),
    inset -8px 0 8px -8px rgba(0, 0, 0, 0.15),
    0 8px 8px -8px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 8px 8px;
  padding: 0 10px;
}

@media (min-width: 1024px) {
  #container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
  }
}

#content {
  padding-top: 10px;
  width: 100%;
  max-width: 768px;
}

@media (min-width: 1024px) {
  #content {
    max-width: 1024px;
  }
  #content ul {
    height: auto;
  }
  /* Logout bar styling moved to conditional rules below */
}

/* IE6 hack to fix double float display bug - - - - - - - - - - - - - - - - - - - - - - - - - -*/
*html #leftcol,
*html #options,
*html #contentleftcol,
*html #contentrightcol,
*html #pagemenu,
*html #allcareersmenu,
*html #instructions {
  display: inline !important;
}
*/

/* Hide logout bar by default, only show when timeout element exists */
#logoutbar {
  display: none !important;
}

#content:has(.timeout) ~ #logoutbar,
#logoutbar:has(~ #content .timeout) {
  display: block !important;
}

/* Apply logout bar styling only when it's visible (timeout exists) */
@media (min-width: 1024px) {
  #content:has(.timeout) ~ #logoutbar,
  #logoutbar:has(~ #content .timeout) {
    background: url(../images/headerbranding_1024.png) no-repeat center top;
    background-size: cover;
    height: 120px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
  }
}

/* Logout Bar - - - - - - - - - - - - - - - - - - - - - - - -*/

#logoutbar img {
  position: absolute;
  margin: 15px 0 0 20px;
  max-width: 200px;
  height: auto;
}

#logoutbar h1 {
  position: absolute;
  width: 100%;
  max-width: 400px;
  top: 65px;
  right: 30px;
  color: white;
  font-size: 1em;
  text-align: right;
}

/* 02_menu page specific */

#content.landing {
  margin-top: -39px;
  padding-top: 30px;
  /* Mobile-first grid layout */
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

#content.landing p {
  color: white;
  padding: 8px 10px;
  margin: 0;
}

#content.landing > div,
#contact,
#careerselector,
#subjectlinks,
#careerfamilies,
#highered,
#generalinfo,
.video-grid {
  float: none;
  width: auto;
  margin: 0;
  padding: 10px 5px 0;
}

@media (min-width: 768px) {
  #content.landing {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  #content.landing {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      'careerselector careerfamilies generalinfo subjectlinks'
      'careerselector careerfamilies generalinfo highered';
    gap: 18px;
    align-content: start;
    align-items: start;
  }

  #content.landing > div {
    display: flex;
    flex-direction: column;
    height: auto !important;
    max-height: none !important;
  }

  /* Ensure grid items have consistent heights */
  #careerselector,
  #careerfamilies,
  #generalinfo {
    display: flex;
    flex-direction: column;
    min-height: 500px;
  }

  /* Make the fourth column items stack properly with equal heights */
  #subjectlinks,
  #highered {
    display: flex;
    flex-direction: column;
    min-height: 250px;
  }

  #content.landing a {
    width: 100%;
    box-sizing: border-box;
  }

  /* Define grid areas for specific positioning */
  #careerselector {
    grid-area: careerselector;
  }

  #subjectlinks {
    grid-area: subjectlinks;
  }

  #careerfamilies {
    grid-area: careerfamilies;
  }

  #highered {
    grid-area: highered;
  }

  #generalinfo {
    grid-area: generalinfo;
  }
}
#careerfamilies,
#generalinfo {
  padding-bottom: 18px;
}

#careerselector h2,
#subjectlinks h2,
#careerfamilies h2,
#highered h2,
#generalinfo h2 {
  padding: 12px 18px 8px 18px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: normal;
  color: #000;
  background: none;
  border-radius: 12px 12px 0 0;
  letter-spacing: 0.01em;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#careerselector ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
}
#subjectlinks ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #7fc7e7 0%, #176ca0 100%);
}
#careerfamilies ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #ffd180 0%, #e89a2b 100%);
}
#highered ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #bba6d1 0%, #5a2d7a 100%);
}
#generalinfo ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #ffb3b3 0%, #b71c1c 100%);
}

#careerselector ul li,
#subjectlinks ul li,
#careerfamilies ul li,
#highered ul li,
#generalinfo ul li {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

#careerselector {
  background: linear-gradient(to bottom, #66b266 0%, #29a429 100%);
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 32px;
  margin-top: 0 !important;
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}
#subjectlinks {
  background: linear-gradient(to bottom, #67b3cc 0%, #1fa0cb 100%);
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 32px;
  margin-top: 0 !important;
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}
#careerfamilies {
  background: linear-gradient(to bottom, #e5b266 0%, #ff9900 100%);
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 32px;
  margin-top: 0 !important;
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}
#highered {
  background: linear-gradient(to bottom, #987f98 0%, #6a3a6a 100%);
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 32px;
  margin-top: 0 !important;
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}
#generalinfo {
  background: linear-gradient(to bottom, #eb7171 0%, #ff3333 100%);
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 32px;
  margin-top: 0 !important;
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}

#careerselector ul li a,
#subjectlinks ul li a,
#careerfamilies ul li a,
#highered ul li a,
#generalinfo ul li a {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.4em 25px 0.8em 45px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  line-height: 1.2;
  background-repeat: no-repeat;
  background-position: 15px center;
}

#careerselector ul li a:hover,
#subjectlinks ul li a:hover,
#careerfamilies ul li a:hover,
#highered ul li a:hover,
#generalinfo ul li a:hover {
  background-color: #256900;
  color: white;
}
#careerselector ul li a {
  background-color: #94c994;
  color: #256900;
  white-space: nowrap;
}
/* - - - - - - -Customised for Subject Links - - - - - - - - -*/

#subjectlinks ul {
  background: none !important;
}

#subjectlinks ul li a {
  background-color: #8dc9de;
  color: #006289;
}

#subjectlinks ul li a:hover {
  background-color: #006289;
}

/* - - - - - - -Customised for Career Families - - - - - - - - -*/

#careerfamilies ul {
  background: none !important;
}

#careerfamilies ul li a {
  background-color: #f2ca8e;
  color: #964d06;
}

#careerfamilies ul li a:hover {
  background-color: #964d06;
}

/* - - - - - - -Customised for Higher Education - - - - - - - - -*/

#highered ul {
  background: none !important;
}

#highered ul li a {
  background-color: #af99af;
  color: #663366;
  white-space: nowrap;
}

#highered ul li a:hover {
  background-color: #663366;
}

/* - - - - - - -Customised for General Information - - - - - - - - -*/

#generalinfo h2 {
  background: none !important;
  padding-top: 12px !important;
  margin-top: 0 !important;
}

#generalinfo ul {
  background: none !important;
}

#generalinfo ul li a {
  background-color: #f39494;
  color: #94000e;
}

#generalinfo ul li a:hover {
  background-color: #94000e;
}

#logoutbar strong {
  color: #ffff00;
  background-color: transparent;
}

#logoutbar p {
  margin: 0;
  padding: 0;
  right: 30px;
  top: 5px;
  position: absolute;
  color: #007bbc;
}

a#logoutbtn,
a#helpcentralbtn,
a#editdetailsbtn {
  padding: 0.4em 0 0.4em 1em;
  margin-left: 1em;
  color: #007bbc;
  background-color: inherit;
  border-left: 1px solid #007bbc;
}

a#editdetailsbtn {
  font-weight: bold;
}

/* main nav div - - - - - - - - - - - - - - - - - - - - - - - -*/

#mainnav {
  height: 200px;
  position: relative;
  width: 100%;
  /* Add background image for all screen sizes */
  background: url(../images/headerbranding_1024.svg) 0px 0px no-repeat;
  background-size: 1024px auto;
  z-index: 10;
}

#content {
  z-index: 3;
  position: relative;
}

#mainnav h1 {
  padding: 6px;
  color: white;
  position: relative;
  top: 106px;
}

#mainnav ul {
  height: 40px;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  position: absolute;
  top: 104px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: calc(100% - 20px);
  margin: 0;
  box-sizing: border-box;
}

#mainnav.careerfamilies {
  background-position: 0 -1405px;
  background-color: transparent;
}

/* Mobile-first: Default background-position for generalinfo.education */
#mainnav.generalinfo.education {
  background-position: 0 -2352px;
  background-color: transparent;
}

@media (min-width: 1024px) {
  #mainnav.generalinfo.education {
    background-position: 0 -2347px;
  }
}
#mainnav.business {
  background-position: 0 -1404px;
  background-color: transparent;
}

/* Tablet and larger screens */
@media (min-width: 768px) {
  #mainnav {
    background-position: 0 8px;
  }

  #logoutbar img {
    margin: 20px 0 0 40px;
  }

  #logoutbar h1 {
    top: 75px;
    right: 60px;
  }

  #logoutbar p {
    right: 60px;
    top: 15px;
  }

  #mainnav ul {
    right: 60px;
    width: auto;
    max-width: calc(100% - 120px);
    flex-wrap: nowrap;
  }

  #mainnav h1 {
    padding-left: 80px;
  }

  /* Specific positioning adjustments for different mainnav classes on tablet */
  #mainnav.generalinfo.education h1,
  #mainnav.generalinfo h1,
  #mainnav.careers h1,
  #mainnav.business h1,
  #mainnav.myarticles h1,
  #mainnav.joblist h1 {
    top: 106px;
  }
}

#mainnav.careers {
  background-position: 0 -700px !important;
  background-color: transparent;
}
#mainnav.generalinfo {
  background-position: 0 -2343px !important;
  background-color: transparent;
}

#mainnav.myarticles {
  background-position: 0 -3053px;
  background-color: transparent;
}

/* #logoutbar {
  display: none;
}
 */
/* Large desktop screens */
@media (min-width: 1024px) {
  #mainnav ul {
    right: 90px;
    max-width: calc(100% - 180px);
  }

  #logoutbar img {
    margin: 25px 0 0 60px;
  }

  #logoutbar h1 {
    top: 85px;
    right: 90px;
  }

  #logoutbar p {
    right: 90px;
    top: 20px;
  }

  #mainnav h1 {
    padding-left: 100px;
  }

  /* Ensure all mainnav classes have consistent positioning on desktop */
  #mainnav.generalinfo.education h1,
  #mainnav.generalinfo h1,
  #mainnav.careers h1,
  #mainnav.business h1,
  #mainnav.myarticles h1,
  #mainnav.joblist h1 {
    top: 100px;
  }
}

* html #mainnav ul li a#myarticlesBtn {
  width: 80px;
}

* html #mainnav ul li#homeBtn a {
  width: 45px;
}

#mainnav li {
  /* Mobile defaults */
  flex: 0 0 auto;
  min-width: 0;
  font-size: 100%;
  padding: 0;
}

#mainnav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  /* Mobile defaults */
  margin: 3px 2px;
  padding: 3px 8px;
  font-size: 85%;
  text-align: center;
  height: auto;
  white-space: nowrap;
}

/* Tablet and larger screens */
@media (min-width: 768px) {
  #mainnav li {
    flex: none;
    font-size: 120%;
    padding: 0px;
  }

  #mainnav ul li a {
    height: 20px;
    text-align: right;
    margin: 6px 22px 0 10px;
    padding: 7px 0 0 35px;
    font-size: inherit;
  }
}

#mainnav ul li a:hover {
  text-decoration: underline;
  color: white;
}

/* Footer - - - - - - - - - - - - - - - - - - - - - - - -*/

#footer {
  height: 30px;
  padding: 8px 10px;
  color: white;
  margin: -2px -10px 0 -10px;
  clear: both;
}

#footer p {
  font-size: 95%;
  padding: 0;
  margin: 4px 30px;
  color: #007bbc;
  text-align: right;
}

#footer a {
  color: white;
  background-color: inherit;
}

img#lulogo {
  visibility: hidden;
}

/* Careers page rebranding - - - - - - - - - - - - - - - - - -  -*/

body div.careers #logoutbar {
  background-color: #009900;
}

/* Career Families page rebranding - - - - - - - - - - - - - - - - - -  -*/

body div.careerfamilies #logoutbar {
  background-color: #964d06;
}

/* Subject Links page rebranding - - - - - - - - - - - - - - - - - -  -*/

body div.subjectlinks #logoutbar {
  background-color: #62b4ce;
}

/* General Info page rebranding - - - - - - - - - - - - - - - - - -  -*/

body div.generalinfo #logoutbar {
  background-color: #94000e;
}
/* My Articles page rebranding - - - - - - - - - - - - - - - - - -  -*/

#logoutbar.myarticles {
  background-color: #2f28a3;
}

/* menu pages specific - - - - - - - - - - - - - - - - - - - - - - - -*/

#pagemenu,
#allcareersmenu {
  width: 100%;
  max-width: 318px;
  padding: 20px 0 20px 0;
  margin-left: 18px;
  flex: 0 0 auto;
  order: 1;
}

#pagemenu h2,
#allcareersmenu h2,
#pagemenu h4 {
  padding: 18px 15px 3px 23px;
  margin: 0;
}

#pagemenu ul,
#allcareersmenu ul,
#menulistfilters,
form#emailForm,
form#logoutForm {
  margin: 0;
  list-style-type: none;
  padding: 2px 15px 25px 23px;
}

#pagemenu ul li {
  color: black;
  padding: 0;
  margin: 0;
}

#pagemenu ul li a {
  display: block;
  width: 100%;
  max-width: 270px;
  padding: 0.1em;
  color: #333333;
}

#pagemenu ul li a:hover {
  color: white;
  background-color: #333333;
}

#pagemenu h4 {
  padding-bottom: 0.8em;
}

#instructions {
  width: 100%;

  padding: 30px 0 0 0;
  background: none;
  margin-right: 30px;
  line-height: 1.3em;
  flex: 1 1 auto;
  order: 2;
  text-align: center;
}

#instructions p {
  padding: 0 10px 10px 15px;
  text-align: left;
  margin: 0px 53px;
}

#instructions img {
  padding: 30px 15px 15px 15px;
  display: block;
  margin: 0px 53px;
  max-width: 100%;
  height: auto;
  width: auto;
}

.error {
  font-weight: bold;
  color: red;
}

/* Logout page specific - - - - - - - - - - - - - - - - - - - - - - - -*/

body div.confirmlogout #content {
  background: url(../images/bg-subjectlinks.jpg) top no-repeat;
  contain: layout;
}

body div.confirmlogout #pagemenu {
  contain: layout style;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body div.confirmlogout #pagemenu h4 {
  background: url(../images/submenugi-top.png) top center no-repeat;
  background-size: contain;
  color: #006499;
  min-height: 50px !important;
  height: 50px;
  padding-top: 18px;
  display: block;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  contain: layout;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body div.confirmlogout #pagemenu h4::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

form#logoutForm {
  background: url(../images/submenugi-bottom.png) bottom center no-repeat;
  background-size: contain;
  min-height: 50px !important;
  height: auto;
  padding-bottom: 50px !important;
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

form#logoutForm::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* Email page specific - - - - - - - - - - - - - - - - - - - - - - - -*/

input.emailbtn {
  margin: 10px 10px 0 0;
}

input.emaildonebtn {
  margin: 10px 10px 23px 130px;
}

/* glossary specific - - - - - - - - - - - - - - - - - - - - - - - -*/

#glossary {
  background-color: #e6f5e6;
  padding: 10px;
  margin-top: 1.5em;
}

#glossary h3 {
  padding: 0 0 0.5em 0;
}

#glossary dl {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#glossary dl dt {
  padding-bottom: 0;
  font-weight: bold;
}

#glossary dl dd {
  color: black;
  margin: 0;
  padding-bottom: 0.7em;
}

#glossary dl dd a {
  color: black !important;
}

/*
Overriding the Prototip styles for the Glossary tooltips. This gives a bland,
neutral, boring grey-based style. Override the relevant bits in the
page-specific stylesheet in order to give a more page-specific look if required.
 */

.prototip .careerscape {
  width: 300px;
  border: 1px solid;
  border-color: #444444;
}

.prototip .careerscape .toolbar {
  font-weight: bold;
  background: #aaaaaa;
  color: #444444;
}

.prototip .careerscape .title {
  padding: 5px 5px 0 5px;
}

.prototip .careerscape .content {
  padding: 5px;
  background: #dddddd;
  color: black;
}

/* Prototip rebranding - - - - - - - - - - - - - - - - - - - - - - -*/

.careers .prototip .careerscape {
  border-color: #256900;
}

.careers .prototip .careerscape .toolbar {
  background: #e6f5e6;
  color: #009900;
}

.careers .prototip .careerscape .content {
  background: #e6f5e6;
}

.careerfamilies .prototip .careerscape {
  border-color: #964d06;
}

.careerfamilies .prototip .careerscape .toolbar {
  background: #ffebcd;
  color: #ff9900;
}

.careerfamilies .prototip .careerscape .content {
  background: #ffebcd;
}

.subjectlinks .prototip .careerscape {
  border-color: #006289;
}

.subjectlinks .prototip .careerscape .toolbar {
  background: #e6f5fa;
  color: #0099cc;
}

.subjectlinks .prototip .careerscape .content {
  background: #e6f5fa;
}

.generalinfo .prototip .careerscape {
  border-color: #94000e;
}

.generalinfo .prototip .careerscape .toolbar {
  background: #ffebeb;
  color: #ff3333;
}

.generalinfo .prototip .careerscape .content {
  background: #ffebeb;
}

/*

/*Button icons */
#mainnav ul li a,
#furtheroptions ul li a,
#highered a,
#careerselector a,
#careerfamilies a,
#subjectlinks a,
#generalinfo a {
  background-image: url(../images/icons.png);
  background-repeat: no-repeat;
}

/** html #mainnav ul li a,
* html #furtheroptions ul li a,
* html #highered a,
* html #careerselector a,
* html #careerfamilies a,
* html #subjectlinks a,
* html #generalinfo a {
    background-image: url(../images/icons.gif);
}*/

#mainnav ul li a {
  background-position: -10px -13px;
}

#mainnav ul li a#myarticlesBtn {
  background-position: -10px -63px;
}

ul li a,
#highered a {
  background-position: 0px -110px;
}

ul li#relatedarticles a,
ul li#relatedcareers a {
  background-position: 0px -160px;
}

ul li#casestudy a {
  background-position: 0px -210px;
}

ul li#email a {
  background-position: 0px -260px;
}

ul li#addToBookmarks a {
  background-position: 0px -310px;
}

ul li#addFromBookmarks a {
  background-position: 0px -1010px;
}

ul li#pdf a {
  background-position: 0px -1060px;
}

ul li#word a {
  background-position: 0px -1111px;
}

#careerselector ul li a {
  background-position: -750px -460px;
}

#careerselector ul li#multicareer a {
  background-position: -750px -510px;
}

#careerfamilies ul li a {
  background-position: -750px -564px;
}

#careerfamilies ul li#creative a {
  background-position: -750px -610px;
}

#careerfamilies ul li#service a {
  background-position: -750px -660px;
}

#careerfamilies ul li#tech a {
  background-position: -750px -710px;
}

#subjectlinks ul li a {
  background-position: -750px -760px;
}

#subjectlinks ul li#vocational a {
  background-position: -750px -810px;
}

#highered ul li a {
  background-position: -750px -110px;
}

#generalinfo ul li a {
  background-position: -750px -861px;
}

#generalinfo ul li#employment a {
  background-position: -750px -910px;
}

/* Start Northern Ireland */
#generalinfo ul li#careers a {
  background-position: -750px -1010px;
}

#generalinfo ul li#barometer a {
  background-position: -750px -1012px;
  white-space: nowrap;
}

#generalinfo ul li#careers a:hover {
  background-position: -750px -1059px;
}
/* End Northern Ireland */

#generalinfo ul li#lifestyle a {
  background-position: -750px -960px;
}

#mainnav ul li a:hover {
  background-position: -410px -13px;
}

#mainnav ul li a#myarticlesBtn:hover {
  background-position: -410px -63px;
}

ul li a:hover,
#highered a:hover {
  background-position: -400px -110px;
}

ul li#relatedarticles a:hover,
ul li#relatedcareers a:hover {
  background-position: -400px -160px;
}

ul li#casestudy a:hover {
  background-position: -400px -210px;
}

ul li#email a:hover {
  background-position: -400px -260px;
}

ul li#addToBookmarks a:hover {
  background-position: -400px -310px;
}

ul li#addFromBookmarks a:hover {
  background-position: -400px -1010px;
}

ul li#pdf a:hover {
  background-position: -400px -1060px;
}

ul li#word a:hover {
  background-position: -403px -1111px;
}

#careerselector ul li a:hover {
  background-position: -400px -460px;
}

#careerselector ul li#multicareer a:hover {
  background-position: -400px -510px;
}

#careerfamilies ul li a:hover {
  background-position: -400px -560px;
}

#careerfamilies ul li#creative a:hover {
  background-position: -400px -610px;
}

#careerfamilies ul li#service a:hover {
  background-position: -400px -660px;
}

#careerfamilies ul li#tech a:hover {
  background-position: -400px -710px;
}

#subjectlinks ul li a:hover {
  background-position: -400px -760px;
}

#subjectlinks ul li#vocational a:hover {
  background-position: -400px -810px;
}

#generalinfo ul li a:hover {
  background-position: -400px -860px;
}

#generalinfo ul li#employment a:hover {
  background-position: -400px -910px;
}

#generalinfo ul li#lifestyle a:hover {
  background-position: -400px -960px;
}

body div.careers #content,
body div.careerfamilies #content,
body div.subjectlinks #content,
body div.generalinfo #content,
body div.myarticles #content,
body div.confirmlogout #content,
body div.email #content {
  margin-top: -39px;
}

/*Submit buttons*/
input[type='submit'],
input[type='button'] {
  border: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0px 0px 10px #999;
  -webkit-box-shadow: 0px 0px 10px #999;
  box-shadow: 0px 0px 10px #999;
  cursor: pointer;
  background-color: #006499;
  padding: 1px 10px 2px;
  color: white;
}

input[type='submit']:hover,
input[type='button']:hover {
  -moz-box-shadow: 5px 5px 10px #999;
  -webkit-box-shadow: 5px 5px 10px #999;
  box-shadow: 5px 5px 10px #999;
}

body div.confirmlogout input[type='submit'] {
  border-color: #006499;
  background-color: #62b4ce;
}

body div.confirmlogout input[type='submit']:hover {
  background-color: #006499;
}

body div.multisearch input[type='submit'] {
  border-color: #039a03;
  background-color: #80cc80;
}

body div.multisearch input[type='submit']:hover {
  background-color: #039a03;
}

#content.confirmlogout {
  min-height: 450px;
}

/*Print PDF*/

#pdfoptions {
  padding: 0 35px;
}

#pdfoptions h4 {
  clear: both;
}

#pdfoptions ul {
  padding: 0;
}

#pdfoptions li {
  list-style: none inside none;
  display: inline-block;
  vertical-align: top;
}

#pdfdetails ul {
  padding-bottom: 15px;
}

#pdfdetails li {
  display: block;
}

#pdfstyle li {
  width: 104px;
  height: 130px;
  overflow: hidden;
  padding: 5px;
  margin: 0 5px 5px 0;
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}

#pdfstyle label {
  display: block;
  background: url(../images/careerPdfPreviews.png) -20px 10px no-repeat;
  font-size: 1em;
  width: 190px;
  height: 280px;
  cursor: pointer;
  position: absolute;
  top: 8px;
  left: 25px;
}

#pdfstyle li:hover {
  border-color: black;
  -moz-box-shadow: 0px 0px 10px #999;
  -webkit-box-shadow: 0px 0px 10px #999;
  box-shadow: 0px 0px 10px #999;
}

label.pdfLarge {
  background-position: -320px 10px !important;
}

label.pdfContemporary {
  background-position: -620px 10px !important;
}

label.pdfClassic {
  background-position: -920px 10px !important;
}

label.pdfEasy {
  background-position: -1220px 10px !important;
}

.caseStudyStyle #pdfstyle label {
  background-image: url(../images/caseStudyPdfPreviews.png);
}

.articleStyle #pdfstyle label {
  background-image: url(../images/articlePdfPreviews.png);
}

input#viewpdf {
  width: 90px !important;
  height: 40px;
}

/* Migration Fixes*/
/*#contentrightcol p {
    white-space: pre-wrap;
}*/

/*#contentrightcol ul {
    margin-left: -3em;
    margin-bottom: 1em;
}

    #contentrightcol ul li {
        margin-left: 3em;
    }*/

.glossary-highlight {
  text-decoration: none;
  border-bottom: 1px dashed;
  font-style: italic;
}

.careers .glossary-highlight {
  color: #256900;
}

.subjectlinks .glossary-highlight {
  color: #006289;
}

.generalinfo .glossary-highlight {
  color: #ff3333;
}

.careerfamilies .glossary-highlight {
  color: #ff9900;
}

#content.no-background {
  background-image: none !important;
}

.select2-container-multi {
  width: 240px;
}

#hecourselist.he-search,
#careerslist.mini-match {
  padding-top: 30px;
  min-height: 450px;
  margin-left: 0;
}

#hecourselist.he-search li,
#careerslist.mini-match li {
  list-style: none;
}

#leftcol.he-search,
#leftcol.mini-match {
  display: block;
  float: left;
}

.prefiltered-jacs-reset {
  display: inline !important;
  padding-left: 1em !important;
}

.prefiltered-jacs-reset:hover {
  color: black !important;
  background: white !important;
}

.careerArticleLink {
  font-weight: bold;
}

.courseType,
.entryYear {
  color: #7b879c;
  font-size: 0.95em;
}

#menulistfilters.he-search li.he-search-filter,
#menulistfilters.mini-match li.mini-match-filter {
  padding-top: 10px;
}

#menulistfilters.he-search label,
#menulistfilters.mini-match label {
  font-weight: bold;
}

.he-search .instructiontext,
.mini-match .instructiontext {
  margin-left: 30px;
  width: 300px;
}

#content.he-search,
#content.mini-match {
  margin-top: -39px;
}

.spinner {
  padding: 50px 50px 0 160px;
}

.init-spinner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 0;
  padding: 50px 0 150px 330px;
}

.select2-search-choice-close {
  width: 12px !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 18px !important;
  margin: 3px 0 3px 5px !important;
  color: #333 !important;
}

.contact .organisation {
  font-weight: bold;
}

.contact .description {
  font-weight: normal;
  font-style: italic;
}

/* Login */
#pagetitle.login {
  background: #4c8a9e;
  width: 100%;
}

#pagetitle.login h1 {
  width: 100%;
  max-width: 414px;
  height: 30px;
  padding: 7px 0 3px 50px;
  color: #fff;
}

#content.login {
  background-image: url(../images/loginbranding_1024.jpg);
  padding: 39px 0 0;
  min-height: 300px;
}

.login #instructiontext {
  width: 100%;
  max-width: 210px;
  font-size: 110%;
}

.login #instructiontext a {
  color: #007bbc;
}

.login #loginforms {
  width: 100%;
  max-width: 430px;
  padding-right: 60px;
  padding-bottom: 10px;
}

.loginBox,
.newUser {
  background: url(../images/fieldset-bg.gif) -2240px top no-repeat;
  width: 100%;
  max-width: 340px;
  padding: 20px;
}

.registration fieldset {
  padding-left: 50px;
}

.registration fieldset:first-child {
  background-position: -3070px top !important;
  padding-bottom: 0;
}

.registration .loginBox {
  width: 100%;
  max-width: 390px;
  background-position: -3070px bottom;
}

.newUser {
  background-position: -2660px bottom;
  padding-top: 0;
}

.newUser h2 {
  border-top: 2px solid #007bbc;
  padding-top: 15px;
  color: #333;
}

.validationMessage {
  color: #cd002b;
  margin-left: 130px;
  display: inline-block;
  padding-bottom: 10px;
  width: 200px;
}

.validationMessage.emailPdf {
  margin-left: 0;
  width: 260px;
}

a.forgotten {
  color: #007bbc;
}

#loginforms label,
#userdetails label {
  width: 120px;
  padding: 6px 0;
  display: inline-block;
  vertical-align: top;
}

#loginforms label,
#loginforms h2 {
  color: #007bbc;
  font-weight: bold;
}

#loginforms ul {
  padding-left: 0;
}

.loginBox input,
.loginBox select,
.newUser input {
  width: 200px;
  margin-left: 10px;
}

.loginBox select {
  width: 204px;
}

#loginforms fieldset li {
  display: block;
  width: 100%;
  position: relative;
  padding-bottom: 1em;
  margin: 0;
  list-style: none inside;
  border: 0 none;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  line-height: 1.2em;
  text-align: left;
}

#loginforms .editButton input[type='submit'],
#loginforms .editButton input[type='button'] {
  width: auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.3em 0.8em;
  margin-left: 120px;
}

.login .submit {
  border: 1px solid black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0px 0px 10px #999;
  -webkit-box-shadow: 0px 0px 10px #999;
  box-shadow: 0px 0px 10px #999;
  cursor: pointer;
  background-color: #006499;
  padding: 0.3em 0.8em;
  color: white !important;
}

input[readonly] {
  background-color: lightgray;
  cursor: not-allowed;
}

.terms {
  margin-left: 120px;
  width: 200px;
}

.terms input[type='checkbox'] {
  width: auto;
  margin: 0 5px 0 0;
}

.terms label {
  display: block !important;
  width: 350px !important;
  margin-bottom: 20px;
}

.weblink-error {
  padding: 50px;
}

.weblink-error h1 {
  font-weight: bold;
  color: #007bbc;
}

.timeout {
  text-align: center;
  padding: 50px;
  margin: 0 auto;
}

.timeout h1 {
  font-weight: bold;
  color: #00486f;
  padding-right: 50px;
  margin-bottom: 12px;
}
.timeout a {
  border: 1px solid black;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0px 0px 10px #999;
  -webkit-box-shadow: 0px 0px 10px #999;
  -ms-box-shadow: 0px 0px 10px #999;
  box-shadow: 0px 0px 10px #999;
  cursor: pointer;
  background-color: #006499;
  padding: 1em;
  color: white !important;
  text-decoration: none;
  width: 110px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
.style-bold {
  font-weight: bold;
}

.style-italics {
  font-style: italic;
}

#contentrightcol ul {
  padding-top: 0.5em !important;
}

.list1,
.list2 {
  list-style-image: url('../images/bulletdash.gif') !important;
}

.list1,
.list2,
.list3 {
  list-style: disc outside none;
  margin-left: 1em;
}

.list2 li {
  padding-bottom: 0.5em;
}

/* Print Styles */
@media print {
  #contentrightcol.generalinfo,
  #contentrightcol.careerfamilies,
  #contentrightcol.subjectlinks {
    width: 100% !important;
  }

  #contentleftcol.generalinfo,
  #options.generalinfo,
  #mainnav.generalinfo,
  .generalinfo #helpcentralbtn,
  .generalinfo #logoutbtn,
  #contentleftcol.careerfamilies,
  #options.careerfamilies,
  #mainnav.careerfamilies,
  .careerfamilies #helpcentralbtn,
  .careerfamilies #logoutbtn,
  #contentleftcol.subjectlinks,
  #options.subjectlinks,
  #mainnav.subjectlinks,
  .subjectlinks #helpcentralbtn,
  .subjectlinks #logoutbtn {
    display: none !important;
  }

  .generalinfo #articletitle,
  .careerfamilies #articletitle,
  .subjectlinks #articletitle {
    padding-top: 50px !important;
  }
}

/*  Login */
.editProfileSubmit {
  margin-left: 50px !important;
  margin-right: 20px !important;
  width: 100px !important;
  height: 26px !important;
}

.editProfileCancel {
  width: 100px !important;
  height: 26px !important;
}

/* Angular UI extras */
.nav,
.pagination,
.carousel a {
  cursor: pointer;
}
/* Chat box */
.career-page {
  width: 200px !important;
  position: relative;
  bottom: 8px;
}

.link-box {
  width: 300px;
  padding: 15px;
  margin-left: 18px;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.link-box-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.link-box-time {
  font-size: 14px;
  color: #666;
}

.spacer {
  margin-top: 8px;
}
#pagemenu,
#allcareersmenu {
  width: 318px;
  background-color: white;
  border: 2px solid green;
  border-radius: 0 15px 0 15px;
}

/* Mobile-first responsive design breakpoints */

/* Small screens - mobile (up to 767px) - base styles already defined above */

/* Medium screens - tablet and small desktop (768px and up) */
@media (min-width: 768px) {
  #pagemenu ul li a {
    width: 270px;
  }

  .login #instructiontext {
    width: 210px;
  }

  .login #loginforms {
    width: 430px;
  }

  .loginBox,
  .newUser {
    width: 340px;
  }

  .registration .loginBox {
    width: 390px;
  }
}


  #pagemenu,
  #allcareersmenu {
	  margin-top:15px;
    max-width: none;
    width: 318px;
  }

  #instructions {
    float: right;
    padding: 30px 0 0 0;
    background: none;
    margin-right: 30px;
    line-height: 1.3em;
  }


/* Mobile-specific adjustments */
@media (max-width: 767px) {
  #mainnav {
    height: 200px;
  }

  /* Force consistent positioning for ALL mainnav classes on mobile */
  #mainnav h1,
  #mainnav.generalinfo.education h1,
  #mainnav.generalinfo h1,
  #mainnav.careers h1,
  #mainnav.business h1,
  #mainnav.myarticles h1,
  #mainnav.joblist h1 {
    top: 99px !important;
    position: relative !important;
  }

  #mainnav ul,
  #mainnav.generalinfo.education ul,
  #mainnav.generalinfo ul,
  #mainnav.careers ul,
  #mainnav.business ul,
  #mainnav.myarticles ul,
  #mainnav.joblist ul {
    position: relative !important;
    top: 60px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
  }

  #mainnav ul li a {
    padding: 6px 12px 6px 50px;
    margin: 4px 3px;
    font-size: 90%;
    background-position: 3px -15px;
  }

  /* Hide background images for landing section on mobile to prevent duplication */
  #careerselector ul li a,
  #subjectlinks ul li a,
  #careerfamilies ul li a,
  #highered ul li a,
  #generalinfo ul li a {
    background-image: none !important;
    padding-left: 25px !important;
  }

  #content.landing {
    margin-top: -68px;
  }

  #pagemenu,
  #allcareersmenu {
    margin-left: 0;
    margin-bottom: 20px;
    width: 45%;
    min-width: 280px;
  }

  #instructions {
    margin-right: 0;
    width: 50%;
    min-width: 300px;
  }

  .login #instructiontext,
  .login #loginforms {
    margin-bottom: 20px;
  }

  .login #loginforms {
    padding-right: 0;
  }
}

#content:not(.landing) {
  top: -47px;
}

/* Responsive adjustments for he-search and mini-match layouts on small screens */
@media (max-width: 767px) {
  #content.he-search,
  #content.mini-match {
    min-width: 100% !important;
    overflow-x: auto !important;
  }

  #leftcol.he-search,
  #leftcol.mini-match {
    width: 300px !important;
    margin-right: 15px !important;
  }

  #careerslist.mini-match {
    width: 350px !important;
  }
}

/* Ensure #options doesn't interfere with he-search/mini-match layouts */
#content.he-search #options,
#content.mini-match #options {
  display: none !important;
}

h2.contact_service {
  white-space: normal !important;
  word-break: break-word;
  padding: 20px 15px 0 !important;
  font-size: 1.25rem;
}

ul a.no_icon {
  background-image: none !important;
}
#contact {
  text-align: center;
}
.bold {
  font-size: 1.2em;
  font-weight: bolder;
}

.bold-underline {
  font-size: 1.2em;
  font-weight: bolder;
  text-decoration: underline;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 25px;
}

@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.video-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.video-item img {
  width: 100%;
  cursor: pointer;
}

.video-title {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #333;
}
.video-title a {
  color: #1a0dab;
  text-decoration: underline;
  display: inline-block;
}

.video-title a:hover {
  text-decoration: none;
}

.box-text {
  background: none !important;
  color: #fff !important;
  white-space: nowrap;
  text-decoration: underline !important;
}

.no-nav {
  pointer-events: none;
  cursor: default;
}

#contact-service {
  text-align: center;
}

#contact-service a,
#contact-service p,
#contact-service .text-center {
  text-align: center;
  justify-content: center;
  margin: 0.2em auto;
  display: block;
  width: auto;
}

#contact-service a.no-nav {
  font-weight: bold;
  font-size: 1.15rem;
  padding: 12px 18px 8px 18px;
  margin: 0;
  background: none;
  border-radius: 12px 12px 0 0;
}

#contact-service a.box-text {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 0.6em 15px;
  margin: 0.3em auto;
  border-radius: 6px;
  font-weight: normal;
  text-decoration: none;
}

#contact-service a.box-text:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #000;
}

#contact-service .text-center p {
  padding: 0.2em 0;
  margin: 0.1em auto;
}

#contact-service a.no-bg {
  background: none;
  color: #fff;
  font-weight: bold;
  padding: 0.8em 15px;
  text-decoration: underline;
}

#contact-service a.no-bg:hover {
  color: #ccc;
}

.text-center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.bold-underline {
  font-weight: bold;
  text-decoration: underline;
}

/* Prevent #options and #leftcol from collapsing on small screens */
#options,
#leftcol {
  float: left;
  display: block;
  box-sizing: border-box;
}

#options {
  width: 100%;
  margin-right: 2%;
  border-width: 2px;
  border-style: solid;
  border-top-right-radius: 8px;
  padding: 2px;
}

#leftcol {
  width: 68%;
}

/* Keep #leftcol and #careerslist layout fixed regardless of screen size */
#leftcol,
#careerslist {
  float: left !important;
  display: block !important;
  /* Articles page specific */

  /* Career Families branding - - - - - - - - - - - - - - - - - - - - - - -*/

  .careerfamilies h2#articletitle {
    background: url(../images/articletitlebg-cf.gif) 0 center no-repeat;
    padding: 10px 0 0 30px;
    margin: 10px 0 0 80px;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .careerfamilies #contentrightcol {
    margin: 0 auto;
    grid-column: 2;
    grid-row: 2 / -1;
    padding: 10px;
  }
  @media (min-width: 1024px) {
    .careerfamilies #contentrightcol {
      width: 645px;
    }
  }

  .careerfamilies #contentrightcol h3 {
    color: #964d06;
  }

  .careerfamilies #contentrightcol a {
    color: #ff9900;
  }

  .careerfamilies #options,
  .careerfamilies #contentleftcol {
    width: 265px;
    margin: 0 0 0 25px;
    grid-column: 1;
    grid-row: 2;
  }

  .careerfamilies #articlebuttonlist ul li {
    background: url(../images/linkbullet-careerfamilies.gif) left center no-repeat;
  }

  .careerfamilies #articlebuttonlist ul li a {
    color: #964d06;
  }

  .careerfamilies #furtheroptions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .careerfamilies #furtheroptions ul li {
    padding-bottom: 0.3em;
  }

  .careerfamilies #furtheroptions ul li a {
    display: block;
    width: 206px;
    background-color: #f2ca8e;
    border-top: 1px solid #964d06;
    border-bottom: 1px solid #964d06;
    margin: 2px;
    padding: 0.5em 0 0.5em 45px;
    text-decoration: none;
    font-size: 100%;
    font-weight: bold;
    color: #964d06;
  }

  .careerfamilies #furtheroptions ul li a:hover {
    background-color: #964d06;
    color: white;
  }

  .careerfamilies #glossary {
    background-color: #fff5e6;
  }

  .careerfamilies span.glossaryItemName,
  .careerfamilies #glossary dl dt {
    color: #ff9900;
  }

  body.careerfamilies div.vidframe {
    padding: 12px;
    background: url(../images/vidframe-18.gif) center left no-repeat !important;
  }

  /* Subject Links branding - - - - - - - - - - - - - - - - - - - - - - -*/

  /* Subject Links page grid layout */
  #content.subjectlinks {
    display: grid !important;
    grid-template-columns: 265px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 20px;
    padding: 0 25px;
    max-width: none;
  }

  /* Subject Links title spans both columns at the top */
  .subjectlinks h2#articletitle {
    background: url(../images/articletitlebg-sl.gif) 0px center no-repeat;
    padding: 10px 0 0 30px;
    margin: 10px 0 0 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .subjectlinks #contentrightcol {
    grid-column: 2;
    grid-row: 2 / -1;
    width: 430px;
    padding-bottom: 30px;
  }

  .subjectlinks #contentrightcol a {
    color: #0099cc;
  }

  .subjectlinks #contentrightcol h3 {
    color: #006289;
  }

  .subjectlinks #options {
    grid-column: 1;
    grid-row: 2;
    width: 265px;
    background: url(../images/articlemenutop-sl.png) top center no-repeat;
    margin-top: 15px;
    margin-bottom: 0;
  }

  .subjectlinks #contentleftcol {
    grid-column: 1;
    grid-row: 3;
    width: 265px;
    align-self: start;
    margin-top: 0;
    margin-bottom: 15px;
  }

  .subjectlinks #articlebuttonlist ul {
    list-style-type: none;
  }

  .subjectlinks #articlebuttonlist ul li {
    background: url(../images/linkbullet-subjectlinks.gif) left center no-repeat;
    font-size: 110%;
    padding: 0.3em;
    margin-left: 3px;
    list-style-position: outside;
  }

  .subjectlinks #articlebuttonlist ul li a {
    color: #006289;
  }

  .subjectlinks #furtheroptions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .subjectlinks #furtheroptions ul li {
    padding-bottom: 0.3em;
  }

  .subjectlinks #furtheroptions ul li a {
    display: block;
    width: 209px;
    background-color: #8dc9de;
    border-top: 1px solid #006289;
    border-bottom: 1px solid #006289;
    margin: 2px;
    padding: 0.5em 0 0.5em 45px;
    text-decoration: none;
    font-size: 100%;
    font-weight: bold;
    color: #006289;
  }

  .subjectlinks #furtheroptions ul li a:hover {
    background-color: #006289;
    color: white;
  }

  .subjectlinks #glossary {
    background-color: #e6f5fa;
  }

  .subjectlinks span.glossaryItemName,
  .subjectlinks #glossary dl dt {
    color: #0099cc;
  }

  .subjectlinks .vidframe {
    padding: 12px;
    background: url(../images/vidframe-18red.gif) center left no-repeat;
  }

  /* General Info branding - - - - - - - - - - - - - - - - - - - - - - -*/

  /* General Info page grid layout */
  #content.generalinfo {
    display: grid !important;
    grid-template-columns: 265px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 20px;
    padding: 0 25px;
    max-width: none;
  }

  /* General Info title spans both columns at the top */
  .generalinfo h2#articletitle {
    background: url(../images/articletitlebg-gi.gif) 0 center no-repeat;
    padding: 10px 0 0 30px;
    margin: 10px 0 0 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .generalinfo #contentrightcol {
    grid-column: 2;
    grid-row: 2 / -1;
    width: 430px;
    padding-bottom: 30px;
  }
  @media (min-width: 1024px) {
    .generalinfo #contentrightcol {
      width: 645px;
    }
  }

  .generalinfo #contentrightcol h3 {
    color: #94000e;
  }

  .generalinfo #contentrightcol a {
    color: #ff3333;
  }

  .generalinfo #options {
    grid-column: 1;
    grid-row: 2;
    margin-top: 15px;
    margin-bottom: 0;
  }

  .generalinfo #contentleftcol {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
    margin-bottom: 15px;
  }

  .generalinfo #contentleftcol img {
    max-width: 260px;
  }

  .generalinfo #articlebuttonlist ul li {
    background: url(../images/linkbullet-generalinfo.gif) left center no-repeat;
  }

  .generalinfo #articlebuttonlist ul li a {
    color: #94000e;
  }

  .generalinfo #furtheroptions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .generalinfo #furtheroptions ul li {
    padding-bottom: 0.3em;
  }

  .generalinfo #furtheroptions ul li a {
    display: block;
    width: 207px;
    background-color: #f39494;
    border-top: 1px solid #94000e;
    border-bottom: 1px solid #94000e;
    margin: 2px;
    padding: 0.5em 0 0.5em 45px;
    text-decoration: none;
    font-size: 100%;
    font-weight: bold;
    color: #94000e;
  }

  .generalinfo #furtheroptions ul li a:hover {
    background-color: #94000e;
    color: white;
  }

  .generalinfo #glossary {
    background-color: #ffebeb;
  }

  .generalinfo span.glossaryItemName,
  .generalinfo #glossary dl dt {
    color: #ff3333;
  }
}

/* Ensure container is wide enough for side-by-side layout */
#content.he-search,
#content.mini-match {
  min-width: 800px !important;
  max-width: none !important;
}

#leftcol.he-search,
#leftcol.mini-match {
  float: left !important;
  display: block !important;
  width: 350px !important;
  min-width: 300px !important;
  margin-right: 20px !important;
  position: relative;
  top: 58px;
}

#careerslist.mini-match {
  float: left !important;
  display: block !important;
  width: 380px !important;
  min-width: 350px !important;
}

/* Ensure container clears floats */
#content.he-search::after,
#content.mini-match::after {
  content: '';
  display: table;
  clear: both;
}

#pagemenu,
form#logoutForm {
  contain: layout style;
  will-change: auto;
}

/* Help page specific - - - - - - - - - - - - - - - - - -  -*/

#content.help {margin-top: -39px;}

#content.userguide {margin-top: -39px;}

#help {
	margin: 10px 25px 25px 25px;
}

#help h2 {
	background: url(../images/helptitlebg.gif) left top no-repeat;
	height: 40px;
	padding: 10px 0 0 35px;
	margin-bottom: 15px;
}

#help h2 a {
	color: black;
}

#help h3, #help h4, #help a {
	color: #006499;
}

#help h3 {
	padding-top: 0;
}


#help h4 {
	padding-bottom: 0.3em;
}

#help p {
	padding: 0 0 0.5em 0;
}

#help p.underline {
	border-top:	1px solid #CCE0EB;
	margin-top: 15px;
}

#help ul {
	list-style-position: outside;
	padding: 0 0 0 25px;
}

#help li {
	padding: 0 0 0.5em 0;
}

ul#pagelinks {
	list-style-type: none;
	margin-left: -10px;
}

ul#pagelinks li {
	font-size: 1.2em;
	padding: 0.3em;
	background: url(../images/linkbullet-help.gif) left center no-repeat;
}	

ul#pagelinks li a {
	color: #006499;
	padding-left: 0.7em;
}

dfn {
	border-bottom: 1px dashed;
	color: #006499;
}

span.link {
	color: #006499;
	text-decoration: underline;
}
/* 01_branding page specific */

#logoutbar.start {
    background: #80B2CC url(../images/introheaderbranding.jpg) no-repeat;
    height: 100px;
    margin: 0;
    padding: 0;
}

#content.start {
    background: url(../images/introbranding.jpg) no-repeat;
}

div.introcontent {
    width: 332px;
    padding: 50px 15px 3em 15px;
    background: none;
    margin-left: 370px;
    min-height: 270px;
}

    div.introcontent h2 {
        background: url(../images/loginfieldsetbg.png) top center no-repeat;
        margin: 0 -15px -15px -15px;
        padding: 1em;
    }

div.introcontentbottom p {
    padding: 0.7em 1.3em;
}

div.introcontentbottom {
    height: 15em;
    margin: 0 -2em;
    padding: 0 1em 1em 1em;
    background: url(../images/loginfieldsetbg_bottom.png) bottom center no-repeat;
}

div.introcontent ul {
    padding-left: 35px;
    list-style-type: none;
}

    div.introcontent ul li {
        float: left;
        color: white;
        padding-left: 30px;
        list-style-position: outside;
        list-style-type: none;
    }

a#userguidebtn, a#startbtn {
    display: block;
    width: 94px;
    color: #006289 !important;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    background: url(../images/userguidebtn.png) top center no-repeat;
    padding: 70px 0 0 0;
    margin: 0;
    text-decoration: none;
}

a#startbtn {
    background: url(../images/startbtn.png) top center no-repeat;
}

a#userguidebtn:hover {
    background-image: url(../images/userguidebtn_f2.png);
}

a#startbtn:hover {
    background-image: url(../images/startbtn_f2.png);
}

/* Alert dialog */
.alertdialog p {
    font-size: 2.0em;
    margin: 50px;
}

.alertdialog input[type=button] {
    display: block;
    width: 80px;
    margin: 0 auto;
    margin-bottom: 30px;
    float: none !important;
    padding: 8px;
}


/* All Careers and Multi-Selector page specific */

#logoutbar.joblist {
  background-color: #009900;
}

#mainnav.joblist {
  background-position: 0 -230px;
  background-color: transparent;
}

#content.joblist {
  background-image: url(../images/bg-careerselector-1024w.svg);
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
}

#content.joblist p.instructiontext {
  padding: 0 40px 25px;
  font-size: 1.1em;
}

#leftcol.joblist {
  float: left;
  width: 354px;
}

#pagemenu.joblist {
  padding-bottom: 10px;
}

#tow ul {
  margin: 0;
  padding: 0;
}

#tow ul li {
  margin: 10px 0;
  padding: 0;
}

#tow select {
  margin: 5px 0;
  width: 270px;
}

#tow label {
  font-weight: bold;
  padding: 0.5em 0;
}

#allcareersmenu ul li {
  display: inline;
  padding-bottom: 5px;
}

#allcareersmenu ul li#showall {
  display: block;
  width: 250px;
}

#allcareersmenu ul li a {
  color: #333333;
  padding: 3px 7px;
}

#allcareersmenu ul li a:hover {
  color: white;
  background-color: #256900;
  border: 1px solid black;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 1px 3px;
  margin: 1px 3px;
}

ul#careerslist {
  list-style-type: none;
  margin-top: 22px;
}

ul#careerslist li {
  margin: 0.1em;
}

ul#careerslist li a {
  padding: 1px 18px;
  color: #333333;
  display: block;
  width: 320px;
}

ul#careerslist li a:hover {
  color: white;
  background-color: #256900;
}

a.videoavailable {
  background: url(../images/videoicon.gif) left no-repeat;
}

a.videoavailable:hover {
  background: url(../images/videoicon-f2.gif) left no-repeat;
}

/*────────────────────────────────────────────────────────────────*/
/* 1) Define your theme colors & common vars up front           */
/*────────────────────────────────────────────────────────────────*/
:root {
  --color-default:     #62b4ce;
  --color-careers:     #40b340;
  --color-careerfam:   #964d06;
  --color-email:       #256900;
  --color-subject:     #006289;
  --color-general:     #94000e;

  --menu-border-width: 2px;
  --menu-bg:           #fff;
  --menu-padding:      18px 15px 12px 23px;
  --menu-min-height:   50px;

  --menu-list-padding: 2px 15px 25px 23px;
  --menu-item-width:   240px;
}

/*────────────────────────────────────────────────────────────────*/
/* 2) Shared layout & menu styling                               */
/*────────────────────────────────────────────────────────────────*/
#content {
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

#content.generalinfo {
  display: grid !important;
  grid-template-columns: 265px 1fr;
  grid-template-rows:    auto auto 1fr;
  gap: 20px;
}

#pagemenu {
  border: var(--menu-border-width) solid var(--color-default);
  background-color: var(--menu-bg);
  box-sizing: border-box;
}

#pagemenu h2,
#pagemenu h4 {
  margin: 0;
  padding: var(--menu-padding);
  min-height: var(--menu-min-height);
  box-sizing: border-box;
  background-color: var(--menu-bg);
  color: var(--color-default);
}

#pagemenu ul,
form#emailForm,
.bottom-frame {
  background-color: var(--menu-bg);
  margin-top: 0;
  padding: var(--menu-list-padding);
  min-height: var(--menu-min-height);
  box-sizing: border-box;
}

#pagemenu ul li a {
  padding: 4px 15px;
  display: block;
  width: var(--menu-item-width);
}

#pagemenu ul li a:hover {
  color: #fff;
}

/*────────────────────────────────────────────────────────────────*/
/* 3) Theme overrides (hook into the #content’s own class)       */
/*────────────────────────────────────────────────────────────────*/

/* Career Families */
#content.careerfamilies {
  background-image: url(../images/bg-careerfamilies-1024w.svg);
  display: grid;
  grid-template-columns: 265px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  padding: 0 25px;
}
#content.careerfamilies #pagemenu,
#content.careerfamilies #options {
  border-color: var(--color-careerfam);
  margin-top:15px;
}
#content.careerfamilies #pagemenu h2,
#content.careerfamilies #pagemenu h4 {
  color: var(--color-careerfam);
}
#logoutbar.careerfamilies {
  background-color: var(--color-careerfam);
}
#content.careerfamilies #pagemenu ul li a:hover {
  background-color: var(--color-careerfam);
}

/* Careers (only options had a custom color before) */
#content.careers {
  /* if you ever want a bg here, set it */
}
#content.careers #options {
  border-color: var(--color-careers);
}

/* Email Families */
#content.email {
  background-image: url(../images/bg-careerselector-1024w.svg);
  margin-top: -1px;
  height: 100vh;
}
#mainnav.email {
  background-position: 0 -229px;
  background-color: transparent;
}
#pagemenu.email,
#options.email {
  border-color: var(--color-email);
}
#pagemenu.email h2,
#pagemenu.email h4,
.top-frame.email {
  color: var(--color-email);
}
#logoutbar.email {
  background-color: var(--color-email);
}
#pagemenu.email ul li a:hover {
  background-color: var(--color-email);
}

/* Subject Links */
#content.subjectlinks {
  background-image: url(../images/bg-subjectlinks-1024w.svg);
}
#mainnav.subjectlinks {
  background-position: 0 -935px;
  background-color: transparent;
}
#pagemenu.subjectlinks,
#options.subjectlinks {
  border-color: var(--color-subject);
}
#pagemenu.subjectlinks h2,
#pagemenu.subjectlinks h4 {
  color: var(--color-subject);
}
#pagemenu.subjectlinks ul li a:hover {
  background-color: var(--color-subject);
}

/* General Info */
#content.generalinfo {
  background-image: url(../images/bg-generalinfo-1024w.svg);
}

#content.generalinfo #pagemenu,
#content.generalinfo #options {
  border-color: var(--color-general);
  margin-top:15px;
}

#content.generalinfo #pagemenu h2,
#content.generalinfo #pagemenu h4 {
  color: var(--color-general);
}

#content.generalinfo #pagemenu ul li a:hover {
  background-color: var(--color-general);
}

/*────────────────────────────────────────────────────────────────*/
/* 4) Video icon link                                            */
/*────────────────────────────────────────────────────────────────*/
a.videoavailable {
  background: url(../images/videoicon-18.gif) left no-repeat;
}
a.videoavailable:hover {
  background: url(../images/videoicon-18-f2.gif) left no-repeat;
}
.generalinfo a.videoavailable {
  background-image: url(../images/videoicon-18red.gif);
}
.generalinfo a.videoavailable:hover {
  background-image: url(../images/videoicon-18red-f2.gif);
}

/* Career Details + Article + Case Study page specific */

/* General Content - - - - - - - - - - - - - - - - - - - - - - -*/

#content.casestudy {
  margin-top: -39px;
}

#logoutbar.careers {
  background-color: #009900;
}

#mainnav.careers {
  background-position: 0 -300px;
  background-color: transparent;
}

h2#careertitle,
h2#articletitle {
  background: url(../images/careertitlebg.gif) 60px center no-repeat;
  height: 40px;
  margin: 10px 0 0 25px;
  padding: 5px 0 0 0;
}

h2#casestudytitle {
  margin: 15px 0;
  color: #256900;
  width: 400px;
}

h2#careertitle img,
h2#articletitle img {
  padding: 0 30px 0 0;
  vertical-align: middle;
}

#content.careers #contentrightcol {
  grid-column: 2;
  grid-row: 2 / -1;
  padding-bottom: 30px;
}

#content.careers #contentrightcol h3 {
  color: #256900;
}

#content.careers #contentrightcol a {
  color: #009900;
}

#content.careers #contentrightcol ul {
  list-style-position: outside;
  padding: 0 0 0 2em;
}

#content.careers #contentrightcol li {
  padding: 0 0 0.5em 0;
}

ul#contacts li {
  padding-bottom: 1.2em;
}

ul#contacts li ul li {
  list-style-position: outside;
  list-style-type: none;
  margin-left: -2em;
  padding: 0.3em 0 0.1em 0;
}

li#crcialternative,
li#clcialternative {
  list-style-type: none;
}

li#crcialternative ul li,
li#clcialternative ul li {
  padding-bottom: 0;
}

#relatedjoblinks h3,
#casestudylinks h3 {
  padding-bottom: 0.5em;
}

ul#jobLinks,
ul#caseLinks,
ul#artLinks,
ul#mainJobLinks,
ul#minorJobLinks {
  list-style-type: none;
  padding-left: 0;
}

div.vidframe.careers {
  padding: 12px;
  background: url(../images/vidframe.gif) center left no-repeat;
}

/* Page Nav and Photos - - - - - - - - - - - - - - - - - - - - - - -*/

/* Careers page grid layout */
#content.careers {
  display: grid !important;
  grid-template-columns: 265px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  padding: 0 25px;
  max-width: none;
}

/* Career title spans both columns at the top */
#content.careers h2#careertitle,
#content.careers h2#articletitle {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 10px 0 0 0;
}

#content.careers #options {
  grid-column: 1;
  grid-row: 2;
  margin-top: 15px;
  margin-bottom: 0;
}

#content.careers #contentleftcol {
  grid-column: 1;
  grid-row: 3;
  background: url(../images/careerdetailsmenu-bottom.gif) bottom center no-repeat;
  align-self: start;
  margin-top: -20px;
  margin-bottom: 15px;
}

#content.careers #contentleftcol img {
  background: url(../images/careerdetailsphotobg.gif) top center no-repeat;
  width: 210px;
  margin: 0 0 0 7px;
  padding: 17px 20px 10px 20px;
}

#content.careers #contentleftcol p.photocaption {
  background: url(../images/careerdetailsphotobg.gif) bottom center no-repeat;
  width: 200px;
  margin: -10px 0 10px 7px;
  padding: 5px 25px 15px 25px;
}

#content.careers #contentleftcol h3 {
  padding: 15px;
}

#articlebuttonlist ul {
  list-style-type: none;
  padding: 15px;
}

#articlebuttonlist ul li {
  font-size: 110%;
  padding: 0.3em;
  margin-left: 3px;
  background: url(../images/linkbullet-careerdetails.gif) left center no-repeat;
  list-style-position: outside;
}

#articlebuttonlist ul li.audio {
  background: url(../images/audiolinkbtn.gif) left center no-repeat;
  margin-left: -8px;
  padding-left: 15px;
}

#articlebuttonlist ul li a {
  color: #256900;
  padding-left: 0.7em;
  display: block;
}

#content.careers #furtheroptions ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content.careers #furtheroptions ul li {
  padding-bottom: 0.3em;
}

#content.careers #furtheroptions ul li a {
  display: block;
  width: 192px;
  background-color: #94c994;
  border-top: 1px solid #256900;
  border-bottom: 1px solid #256900;
  margin: 2px;
  padding: 0.5em 0 0.5em 45px;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #256900;
}

#content.careers #furtheroptions ul li a:hover {
  background-color: #256900;
  color: white;
}

#content.careers #furtheroptions ul li#hecourselink a {
  background-color: #af99af;
  border-top: 1px solid #663366;
  border-bottom: 1px solid #663366;
  color: #663366;
}

#content.careers #furtheroptions ul li#hecourselink a:hover {
  background-color: #663366;
  color: white;
}

a.audio {
  font-size: 1.1em;
  font-weight: bold;
  background: url(../images/audiobtn.gif) left center no-repeat;
  padding: 0.5em 0 0.5em 35px;
  line-height: 2.5em;
}

#glossary dl dt {
  color: #009900;
}

/*Case Study*/
img.casestudy {
  background: transparent url(../images/image-casestudy-bg.gif) no-repeat scroll left top;
  margin-left: -5px;
  margin-top: -9px;
  padding: 23px;
}

/* Articles page specific */

/* Career Families branding - - - - - - - - - - - - - - - - - - - - - - -*/

.careerfamilies h2#articletitle {
  background: url(../images/articletitlebg-cf.gif) 0 center no-repeat;
  padding: 10px 0 0 30px;
  margin: 10px 0 0 80px;
  grid-column: 1 / -1;
  grid-row: 1;
}

.careerfamilies #contentrightcol {
  margin: 0 auto;
  grid-column: 2;
  grid-row: 2 / -1;
  padding: 10px;
}


.careerfamilies #contentrightcol h3 {
  color: #964d06;
}

.careerfamilies #contentrightcol a {
  color: #ff9900;
}

.careerfamilies #options,
.careerfamilies #contentleftcol {
  width: 265px;
  grid-column: 1;
  grid-row: 2;
}

.careerfamilies #articlebuttonlist ul li {
  background: url(../images/linkbullet-careerfamilies.gif) left center no-repeat;
}

.careerfamilies #articlebuttonlist ul li a {
  color: #964d06;
}

.careerfamilies #furtheroptions ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.careerfamilies #furtheroptions ul li {
  padding-bottom: 0.3em;
}

.careerfamilies #furtheroptions ul li a {
  display: block;
  width: 206px;
  background-color: #f2ca8e;
  border-top: 1px solid #964d06;
  border-bottom: 1px solid #964d06;
  margin: 2px;
  padding: 0.5em 0 0.5em 45px;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #964d06;
}

.careerfamilies #furtheroptions ul li a:hover {
  background-color: #964d06;
  color: white;
}

.careerfamilies #glossary {
  background-color: #fff5e6;
}

.careerfamilies span.glossaryItemName,
.careerfamilies #glossary dl dt {
  color: #ff9900;
}

body.careerfamilies div.vidframe {
  padding: 12px;
  background: url(../images/vidframe-18.gif) center left no-repeat !important;
}

/* Subject Links branding - - - - - - - - - - - - - - - - - - - - - - -*/

/* Subject Links page grid layout */
#content.subjectlinks {
  display: grid !important;
  grid-template-columns: 265px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  padding: 0 25px;
  max-width: none;
}

/* Subject Links title spans both columns at the top */
.subjectlinks h2#articletitle {
  background: url(../images/articletitlebg-sl.gif) 0px center no-repeat;
  padding: 10px 0 0 30px;
  margin: 10px 0 0 0;
  grid-column: 1 / -1;
  grid-row: 1;
}

.subjectlinks #contentrightcol {
  grid-column: 2;
  grid-row: 2 / -1;
  padding-bottom: 30px;
}

.subjectlinks #contentrightcol a {
  color: #0099cc;
}

.subjectlinks #contentrightcol h3 {
  color: #006289;
}

.subjectlinks #options {
  grid-column: 1;
  grid-row: 2;
  width: 265px;
  margin-top: 15px;
  margin-bottom: 0;
}

.subjectlinks #contentleftcol {
  grid-column: 1;
  grid-row: 3;
  width: 265px;
  align-self: start;
  margin-top: 0;
  margin-bottom: 15px;
}

.subjectlinks #articlebuttonlist ul {
  list-style-type: none;
}

.subjectlinks #articlebuttonlist ul li {
  background: url(../images/linkbullet-subjectlinks.gif) left center no-repeat;
  font-size: 110%;
  padding: 0.3em;
  margin-left: 3px;
  list-style-position: outside;
}

.subjectlinks #articlebuttonlist ul li a {
  color: #006289;
}

.subjectlinks #furtheroptions ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.subjectlinks #furtheroptions ul li {
  padding-bottom: 0.3em;
}

.subjectlinks #furtheroptions ul li a {
  display: block;
  width: 209px;
  background-color: #8dc9de;
  border-top: 1px solid #006289;
  border-bottom: 1px solid #006289;
  margin: 2px;
  padding: 0.5em 0 0.5em 45px;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #006289;
}

.subjectlinks #furtheroptions ul li a:hover {
  background-color: #006289;
  color: white;
}

.subjectlinks #glossary {
  background-color: #e6f5fa;
}

.subjectlinks span.glossaryItemName,
.subjectlinks #glossary dl dt {
  color: #0099cc;
}

.subjectlinks .vidframe {
  padding: 12px;
  background: url(../images/vidframe-18red.gif) center left no-repeat;
}

/* General Info branding - - - - - - - - - - - - - - - - - - - - - - -*/

/* General Info page grid layout */
#content.generalinfo {
  display: grid !important;
  grid-template-columns: 265px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  padding: 0 25px;
  max-width: none;
}

/* General Info title spans both columns at the top */
.generalinfo h2#articletitle {
  background: url(../images/articletitlebg-gi.gif) 0 center no-repeat;
  padding: 10px 0 0 30px;
  margin: 10px 0 0 0;
  grid-column: 1 / -1;
  grid-row: 1;
}

.generalinfo #contentrightcol {
  grid-column: 2;
  grid-row: 2 / -1;
  padding-bottom: 30px;
}


.generalinfo #contentrightcol h3 {
  color: #94000e;
}

.generalinfo #contentrightcol a {
  color: #ff3333;
}

.generalinfo #options {
  grid-column: 1;
  grid-row: 2;
  margin-top: 15px;
  margin-bottom: 0;
}

.generalinfo #contentleftcol {
  grid-column: 1;
  grid-row: 3;
  margin-top: 0;
  margin-bottom: 15px;
}

.generalinfo #contentleftcol img {
  max-width: 260px;
}

.generalinfo #articlebuttonlist ul li {
  background: url(../images/linkbullet-generalinfo.gif) left center no-repeat;
}

.generalinfo #articlebuttonlist ul li a {
  color: #94000e;
}

.generalinfo #furtheroptions ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.generalinfo #furtheroptions ul li {
  padding-bottom: 0.3em;
}

.generalinfo #furtheroptions ul li a {
  display: block;
  width: 207px;
  background-color: #f39494;
  border-top: 1px solid #94000e;
  border-bottom: 1px solid #94000e;
  margin: 2px;
  padding: 0.5em 0 0.5em 45px;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #94000e;
}

.generalinfo #furtheroptions ul li a:hover {
  background-color: #94000e;
  color: white;
}

.generalinfo #glossary {
  background-color: #ffebeb;
}

.generalinfo span.glossaryItemName,
.generalinfo #glossary dl dt {
  color: #ff3333;
}

/* My articles page specific - - - - - - - - - - - - - - - - - -  -*/

#content.myarticles {
	background: url('../images/bg-myarticles-1024w.svg') no-repeat;
    margin-top: -10px;
	height:100vh;
}

#pagemenu.myarticles h2 {
/*     background: url(../images/submenuma-top.png) top center no-repeat; */
    color: #2F28A3;
}

#bookmarkslist {

    margin: 0;
    padding: 0px 25px 25px 25px;
}

    #bookmarkslist h4 {
        padding: 0.5em 0 0.2em 0;
        color: #000000;
        background: none;
    }

    #bookmarkslist ul {
        list-style-type: none;
        padding: 0 0 0.5em 0;
    }

        #bookmarkslist ul li a {
            display: block;
            width: 270px;
            padding: 0.1em;
            color: #333333;
        }

        * html #bookmarkslist ul li a {
            width: 200px;
        }

            #bookmarkslist ul li a:hover {
                color: white;
                background-color: #2F28A3;
            }

ul#jobBookmarks li a, ul#articleBookmarks li a, ul#caseStudyBookmarks li a {
    padding: 1px 18px;
    color: #333333;
    display: block;
    width: 240px;
}

    ul#jobBookmarks li a:hover, ul#articleBookmarks li a:hover {
        color: white;
        background-color: #2F28A3;
    }

a.videoavailable {
    background: url(../images/videoicon-25.gif) left no-repeat;
}

    a.videoavailable:hover {
        background: url(../images/videoicon-25-f2.gif) left no-repeat;
    }

/* Customised to work around existing CSS */

.pagination {
    margin: 20px 80px 0 0;
    float: right;

}

    .pagination ul {
        display: inline-block;
        *display: inline;
        /* IE7 inline-block hack */
        *zoom: 1;
        margin-left: 0;
        margin-bottom: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

        .pagination ul > li {
            display: inline;
        }

            .pagination ul > li > a,
            .pagination ul > li > span {
                float: left;
                padding: 4px 12px;
                line-height: 20px;
                text-decoration: none;
                background-color: #ffffff;
                border: 1px solid #dddddd;
                border-left-width: 0;
            }

                .pagination ul > li > a:hover,
                .pagination ul > li > a:focus,
                .pagination ul > .active > a,
                .pagination ul > .active > span {
                    background-color: #f5f5f5;
                }

        .pagination ul > .active > a,
        .pagination ul > .active > span {
            color: #999999;
            cursor: default;
        }

        .pagination ul > .disabled > span,
        .pagination ul > .disabled > a,
        .pagination ul > .disabled > a:hover,
        .pagination ul > .disabled > a:focus {
            color: #999999;
            background-color: transparent;
            cursor: default;
        }

        .pagination ul > li:first-child > a,
        .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-top-left-radius: 4px;
            -moz-border-radius-topleft: 4px;
            border-top-left-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination ul > li:last-child > a,
        .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            border-bottom-right-radius: 4px;
        }

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.pagination-large ul > li > a,
.pagination-large ul > li > span {
    padding: 11px 19px;
    font-size: 17.5px;
}

.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
}

.pagination-small ul > li > a,
.pagination-small ul > li > span {
    padding: 2px 10px;
    font-size: 11.9px;
}

.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
    padding: 0 6px;
    font-size: 10.5px;
}


/* Tooltip */
.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    font-size: 1em;
    line-height: 1.2em;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: visible;
}

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px;
}

.tooltip-inner {
    max-width: 200px;
    padding: 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-color: #000000;
    border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-right-color: #000000;
    border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-left-color: #000000;
    border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #000000;
    border-width: 0 5px 5px;
}


.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

        .modal-backdrop,
        .modal-backdrop.fade.in {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }

.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 670px;
    margin-left: -280px;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

    .modal.fade {
        top: -25%;
        -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
        -o-transition: opacity 0.3s linear, top 0.3s ease-out;
        transition: opacity 0.3s linear, top 0.3s ease-out;
    }

        .modal.fade.in {
            top: 10%;
        }

.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
}

    .modal-header .close {
        margin-top: 2px;
    }

    .modal-header h3 {
        margin: 0;
        line-height: 30px;
    }

.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
    overflow-y: auto;
}

.modal-form {
    margin-bottom: 0;
}

.modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
}

    .modal-footer:before,
    .modal-footer:after {
        display: table;
        line-height: 0;
        content: "";
    }

    .modal-footer:after {
        clear: both;
    }

    .modal-footer .btn + .btn {
        margin-bottom: 0;
        margin-left: 5px;
    }

    .modal-footer .btn-group .btn + .btn {
        margin-left: -1px;
    }

    .modal-footer .btn-block + .btn-block {
        margin-left: 0;
    }

/*
 * qTip2 - Pretty powerful tooltips - v2.2.0
 * http://qtip2.com
 *
 * Copyright (c) 2013 Craig Michael Thompson
 * Released under the MIT, GPL licenses
 * http://jquery.org/license
 *
 * Date: Thu Nov 21 2013 08:34 GMT+0000
 * Plugins: tips modal viewport svg imagemap ie6
 * Styles: basic css3
 */
.qtip {
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;
    max-width: 280px;
    min-width: 50px;
    font-size: 10.5px;
    line-height: 12px;
    direction: ltr;
    box-shadow: none;
    padding: 0;
}

.qtip-content {
    position: relative;
    padding: 5px 9px;
    overflow: hidden;
    text-align: left;
    word-wrap: break-word;
}

.qtip-titlebar {
    position: relative;
    padding: 5px 35px 5px 10px;
    overflow: hidden;
    border-width: 0 0 1px;
    font-weight: bold;
}

    .qtip-titlebar + .qtip-content {
        border-top-width: 0 !important;
    }

/* Default close button class */
.qtip-close {
    position: absolute;
    right: -9px;
    top: -9px;
    cursor: pointer;
    outline: medium none;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

.qtip-titlebar .qtip-close {
    right: 4px;
    top: 50%;
    margin-top: -9px;
}

* html .qtip-titlebar .qtip-close {
    top: 16px;
}
/* IE fix */

.qtip-titlebar .ui-icon,
.qtip-icon .ui-icon {
    display: block;
    text-indent: -1000em;
    direction: ltr;
}

.qtip-icon, .qtip-icon .ui-icon {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}

    .qtip-icon .ui-icon {
        width: 18px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        text-indent: 0;
        font: normal bold 10px/13px Tahoma,sans-serif;
        color: inherit;
        background: transparent none no-repeat -100em -100em;
    }

/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.qtip-focus {
}

/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
.qtip-hover {
}

/* Default tooltip style */
.qtip-default {
    border-width: 1px;
    border-style: solid;
    border-color: #F1D031;
    background-color: #FFFFA3;
    color: #555;
}

    .qtip-default .qtip-titlebar {
        background-color: #FFEF93;
    }

    .qtip-default .qtip-icon {
        border-color: #CCC;
        background: #F1F1F1;
        color: #777;
    }

    .qtip-default .qtip-titlebar .qtip-close {
        border-color: #AAA;
        color: #111;
    }



/*! CASCAiD tooltip style */
.career .qtip-cas {
    background-color: #e0ffcf;
    border-color: #256900;
    border-width: 2px;
    color: #333333;
}

    .career .qtip-cas .qtip-titlebar {
        background-color: #e0ffcf;
    }

    .career .qtip-cas .qtip-icon {
        border-color: #256900;
    }

    .career .qtip-cas .qtip-titlebar .ui-state-hover {
        border-color: #256900;
    }

.subjectlinks .qtip-cas {
    background-color: #dff6ff;
    border-color: #006289;
    border-width: 2px;
    color: #333333;
}

    .subjectlinks .qtip-cas .qtip-titlebar {
        background-color: #dff6ff;
    }

    .subjectlinks .qtip-cas .qtip-icon {
        border-color: #006289;
    }

    .subjectlinks .qtip-cas .qtip-titlebar .ui-state-hover {
        border-color: #006289;
    }

.careerfamilies .qtip-cas {
    background-color: #ffefd8;
    border-color: #FF9900;
    border-width: 2px;
    color: #333333;
}

    .careerfamilies .qtip-cas .qtip-titlebar {
        background-color: #ffefd8;
    }

    .careerfamilies .qtip-cas .qtip-icon {
        border-color: #FF9900;
    }

    .careerfamilies .qtip-cas .qtip-titlebar .ui-state-hover {
        border-color: #FF9900;
    }

.generalinfo .qtip-cas {
    background-color: #ffdede;
    border-color: #FF3333;
    border-width: 2px;
    color: #333333;
}

    .generalinfo .qtip-cas .qtip-titlebar {
        background-color: #ffdede;
    }

    .generalinfo .qtip-cas .qtip-icon {
        border-color: #FF3333;
    }

    .generalinfo .qtip-cas .qtip-titlebar .ui-state-hover {
        border-color: #FF3333;
    }


.qtip-cas .qtip-content {
    padding: .75em;
    font: 14px arial,sans-serif;
}



/* IE9 fix - removes all filters */
.qtip:not(.ie9haxors) div.qtip-content,
.qtip:not(.ie9haxors) div.qtip-titlebar {
    filter: none;
    -ms-filter: none;
}



.qtip .qtip-tip {
    margin: 0 auto;
    overflow: hidden;
    z-index: 10;
}

/* Opera bug #357 - Incorrect tip position
    https://github.com/Craga89/qTip2/issues/367 */
x:-o-prefocus, .qtip .qtip-tip {
    visibility: hidden;
}

    .qtip .qtip-tip,
    .qtip .qtip-tip .qtip-vml,
    .qtip .qtip-tip canvas {
        position: absolute;
        color: #123456;
        background: transparent;
        border: 0 dashed transparent;
    }

        .qtip .qtip-tip canvas {
            top: 0;
            left: 0;
        }

        .qtip .qtip-tip .qtip-vml {
            behavior: url(#default#VML);
            display: inline-block;
            visibility: visible;
        }

#qtip-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

    /* Applied to modals with show.modal.blur set to true */
    #qtip-overlay.blurs {
        cursor: pointer;
    }

    /* Change opacity of overlay here */
    #qtip-overlay div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    }



.qtipmodal-ie6fix {
    position: absolute !important;
}

#logoutbar img {
    margin: 30px 0 0 40px !important;
}

@media print {

    #content {
        margin-top: 0 !important;
    }

    .noPrint {
        display: none !important;
    }

    h2#articletitle {
        padding: 50px 0 0 0 !important;
        margin: 0 !important;
        font-size: 200% !important;
    }

     h2#careertitle {
        font-size: 200% !important;
    }

    .glossary-highlight {
        color: black !important;
    }

    #contentrightcol h3, #contentrightcol h3 a {
        color: black !important;
        font-weight: bold !important;
    }

    #contentrightcol {
        float: none !important;
        width: 100% !important;
        margin: 0 10px 0 10px !important;
        padding: 0 !important;
    }

    a {
        color: black !important;
        font-weight: normal !important;
        text-decoration: none !important;
    }

    #logoutbar, #container, #contentleftcol, #footer, #careertitle, #articletitle {
        background: none !important;
    }

    #footer p {
        font-size: 80% !important;
        color: grey !important;        
    }
}