/*Common Stylesheet provides the main building blocks for products*/
/*Add specific product stylesheet to customise*/
/*All CSS in this file must be common across ALL products*/
/*Copyright 2011. CASCAiD Ltd.  All Rghts Reserved.*/

/* CONTENTS ------------------------------------------------ */

/*  01 General Configuration
    02 Structural Divisions
    03 Error Messages and Feedback
    04 Question and Answer Sections
    05 Match and Submatch Icons
    06 Buttons and Menus
    07 Pagination
    08 Notes Section
    09 Login and Registration
    10 Search and Filters
    11 Lists
    12 Links and Styles
    13 Guidance and Feedback
    14 Tabulated Data
    15 Forms
    16 Action Planner
    17 Gap Analysis
    18 Tooltips and Popups
    19 Media Viewer
    20 Career Details
    21 HE Search Section



/* 01 GENERAL CONFIGURATION ------------------------------ */
/*Resets*/
body,
ul,
li,
h1,
p,
ul,
li,
fieldset {
    margin: 0;
    padding: 0;
}

li {
    list-style: none inside none;
}

a span span {
    display: none !important;
}

a img {
    border: none;
}

/*Fonts style and color*/
body {
    font-family: helvetica, Arial, Verdana, Sans-Serif;
}

input,
textarea {
    font-family: helvetica, Arial, Verdana, Sans-Serif;
    color: #323332;
}

address {
    font-style: normal;
}

a {
    color: black;
}

/*Headings*/
h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

h4 {
    margin: 0;
}


/*Floats*/
.clear {
    clear: both;
}

.floatR {
    float: right;
}

/* 02 STRUCTURAL DIVISIONS --------------------------------------------- */
#wrapper {
    width: 100%;
    height: 100%;
    z-index: 1;
}

#container {
    width: 960px;
    margin: 0 auto;
    min-height: 600px;
}

#header {
    position: relative;
    background-color: white;
    z-index: 10;
}

#content {
    padding: 0 30px 30px;
    position: inherit;
    float: left;
    background-color: White;
    min-height: 460px;
    z-index: 1;
    color: #333;
}

#footer {
    height: 50px;
    clear: both;
    width: 220px;
    margin: 0 auto;
    color: #7E7F82;
    font-size: 12px;
}

    #footer a {
        display: block;
        width: 110px;
        height: 50px;
        float: left;
        text-decoration: none;
    }

        #footer a span {
            visibility: hidden;
        }

/* 03 ERROR MESSAGES AND FEEDBACK --------------------------------------------- */

/*Saving dialogs and visual indication*/
.save_box {
    z-index: 1000;
    display: inline;
}

.loader_bg {
    vertical-align: middle;
}

#update_progress {
    z-index: 1000;
    position: absolute;
    display: none;
    text-align: center;
    vertical-align: middle;
    padding-top: 20px;
    overflow: hidden;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: Gray;
}

.ui-notification-titlebar a,
.ui-notification p {
    display: none;
}

.ui-autocomplete-loading {
    background: white url('../images/ui-anim_basic_16x16.gif') right center no-repeat;
}

/*Weblink Errors*/
a.webLinkErrorPageLink {
    color: #BC0404;
    font-size: larger;
}

/*Error messages*/
p.validationMessage,
div.validationMessage div div {
    padding: 0 0 10px !important;
    color: #C10000 !important;
    font-size: 1em !important;
    font-weight: bold !important;
}

.errorText {
    color: #BA0000;
    font-weight: bold;
}

/* 04 QUESTION AND ANSWER SECTIONS --------------------------------------------- */

/*Aspect and Skills Buttons*/

ul.buttonAnswerList,
#selectOptions .tableView {
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #7E8693;
    border-top-width: 2px;
}

    ul.buttonAnswerList li {
        padding: 10px !important;
    }

        ul.buttonAnswerList li:first-child,
        #selectOptions .tableView li:first-child {
            -moz-border-radius: 9px 9px 0 0;
            border-radius: 9px 9px 0 0;
        }

        ul.buttonAnswerList li:last-child,
        #selectOptions .tableView li:last-child {
            -moz-border-radius: 0 0 9px 9px;
            border-radius: 0 0 9px 9px;
        }

    ul.buttonAnswerList .comment {
        margin: 0 -10px;
    }

.aspects ul.buttonAnswerList > li,
.skills ul.buttonAnswerList > li {
    min-height: 130px;
}


ul.buttonAnswerList li fieldset {
    float: right;
    margin: -95px 0 0 0;
}

.questionset p {
    width: 36%;
    padding: 0;
    font-size: 1.4em;
    color: #C1000A;
    margin: 0;
    min-height: 90px;
    text-shadow: 0px 0px 1px #bbb;
}

ul.buttonAnswerList fieldset button {
    float: left;
    width: 90px;
    height: 114px;
    background: url(../images/answerButtons.png) -6px -8px no-repeat; /*lvm match*/
    margin-left: 10px;
    cursor: pointer;
    border: none;
    color: transparent;
}

    ul.buttonAnswerList fieldset button span {
        display: none;
    }

    ul.buttonAnswerList fieldset button.button4 {
        background-position: -6px -128px;
    }
    /*like match*/
    ul.buttonAnswerList fieldset button.button5 {
        background-position: -6px -248px;
    }
    /*dnm match*/
    ul.buttonAnswerList fieldset button.button6 {
        background-position: -6px -368px;
    }
    /*dislike match*/
    ul.buttonAnswerList fieldset button.button7 {
        background-position: -6px -488px;
    }
    /*dvm match*/
    ul.buttonAnswerList fieldset button.button11 {
        background-position: -6px -608px;
    }
    /*vg skill*/
    ul.buttonAnswerList fieldset button.button10 {
        background-position: -6px -728px;
    }
    /*g skill*/
    ul.buttonAnswerList fieldset button.button9 {
        background-position: -6px -848px;
    }
    /*f skill*/
    ul.buttonAnswerList fieldset button.button8 {
        background-position: -6px -968px;
    }
    /*p skill*/
    ul.buttonAnswerList fieldset button:hover {
        background-image: url(../images/answerButtonsHover.png);
    }

    ul.buttonAnswerList fieldset button.selected {
        background-image: url(../images/answerButtonsHover.png) !important;
        border: none !important;
    }

/*Select Optopns list*/
#selectOptions input {
    float: left;
    margin: 2px 10px 0 6px;
}

#selectOptions label {
    padding-right: 0;
}

    #selectOptions label div {
        display: inline;
    }

#selectOptions ul li.selected {
    background-color: #E0F0F5 !important;
    background-position: 0 -1060px !important;
    font-weight: bold;
}

/*Question Progress Bar */

span.progressGraph {
    display: block;
    height: 6px;
    background: #58595B url(../images/grads.png) left -1120px repeat-x;
    border: 1px solid black;
    border-radius: 4px;
    -moz-border-radius: 4px;
    position: relative;
    margin: 15px auto 0;
}

span.progressBar {
    display: block;
    height: 4px;
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border: 1px solid black;
}

p.progressIndicator {
    font-weight: bold;
    text-align: center;
    padding: 15px;
    color: #7C879B;
}

div.progressIndicator {
    text-align: center;
}

/*Bar Chart*/

div.barchart table td img {
    vertical-align: text-top;
    height: 18px;
    margin-right: 5px;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}

td.DislikeVeryMuch img {
    background-color: #914094;
}

td.Dislike img {
    background-color: #ED5A2F;
}

td.DoesNotMatter img {
    background-color: #ACB6C7;
}

td.Like img {
    background-color: #ABC63E;
}

td.LikeVeryMuch img {
    background-color: #63B6CE;
}

td.Key img {
    background-color: #FCA326;
}

/* 05 MATCH AND SUBMATCH ICONS --------------------------------------------- */

/*Status Icons in matchlist*/
div.statusIcons {
    float: right;
    margin-top: -75px;
}

    div.statusIcons p {
        padding-top: 0;
    }

    div.statusIcons a,
    div.statusIcons span {
        float: left;
    }

    div.statusIcons a {
        margin-left: 8px;
    }

.statusIcons a,
.statusIcons a span,
.statusIcons span,
.matchIcon {
    width: 60px;
    height: 60px;
    display: block;
}

    .statusIcons a span,
    .statusIcons span,
    .matchIcon {
        background: url(../images/statusIcons.png) 0 0 no-repeat;
    }

span.matchcat_2 {
    background-position: 0 -60px !important;
}
/*Good*/
span.matchcat_3 {
    background-position: 0 -120px !important;
}
/*Fair*/
span.matchcat_4 {
    background-position: 0 -180px !important;
}
/*Questionable*/
span.matchcat_5 {
    background-position: 0 -240px !important;
}
/*Poor*/
span.matchcat_6 {
    background-position: 0 -300px !important;
}
/*Talent*/
span.matchcat_99 {
    background-position: 0 -10020px !important;
}
/*NA*/
span.matchsubcat2_1 {
    background-position: 0 -360px !important;
}
/*VG Skill*/
span.matchsubcat2_2 {
    background-position: 0 -420px !important;
}
/*G Skill*/
span.matchsubcat2_3 {
    background-position: 0 -480px !important;
}
/*Fair Skill*/
span.matchsubcat2_4 {
    background-position: 0 -540px !important;
}
/*Questionable Skill*/
span.matchsubcat2_5 {
    background-position: 0 -600px !important;
}
/*Poor Skill*/
span.matchsubcat2_99,
span.matchsubcat2_-1 {
    background-position: 0 -10020px !important;
}
/*NA*/

span.matchText, span.classText {
    background: none !important;
}

/*Status Icons submatch classifications*/

p.statusIcons span.Classification_25,
p.statusIcons span.Classification_26 {
    background-position: 0px -660px !important;
}
/*Top Salary*/

p.statusIcons span.Classification_23,
p.statusIcons span.Classification_24 {
    background-position: 0px -720px !important;
}
/*Middle Salary*/

p.statusIcons span.Classification_21,
p.statusIcons span.Classification_22 {
    background-position: 0px -780px !important;
}
/*Low Salary*/

p.statusIcons span.Classification_301 {
    background-position: 0px -900px !important;
}
/*HE Courses*/
p.statusIcons span.Classification_301_false {
    background-position: 0px -840px !important;
}

.Classification_9 {
    background-position: 0px -960px !important;
}
/*Progression*/
.Classification_9_false {
    background-position: -60px -960px !important;
}

/*StatusIcon add to actionplan*/
.statusIcons a.addToFavourite {
    background: url(../images/statusIcons.png) 0 -1020px no-repeat !important;
    width: 60px !important;
    height: 60px !important;
}

    .statusIcons a.addToFavourite:hover {
        background-position: -60px -1020px !important;
    }

    .statusIcons a.addToFavourite.addedToActionPlan {
        background-position: 0 -1080px !important;
    }

        .statusIcons a.addToFavourite.addedToActionPlan:hover {
            background-position: -60px -1080px !important;
        }

/* 06 BUTTONS AND MENUS ------------------------------------------------ */

/*Add to favourite buttons*/

a.addToFavourite {
    width: 30px;
    height: 30px;
    display: block;
    background: url(../images/buttonIcons.png) !important;
}

a.addToFavourite {
    background-position: -10px -1060px !important;
}

    a.addToFavourite:hover {
        background-position: -10px -1110px !important;
    }

    a.addToFavourite.addedToActionPlan {
        background-position: -10px -1160px !important;
    }

        a.addToFavourite.addedToActionPlan:hover {
            background-position: -10px -1210px !important;
        }

    a.addToFavourite span {
        display: none;
    }

/* Blacklist buttons */
a.simpleButton.addToBlackList span {
    width: 30px;
    height: 30px;
    display: block;
    background: url(../images/buttonIcons.png) -10px -3060px no-repeat !important;
}


a.simpleButton.removeFromBlackList span {
    width: 30px;
    height: 30px;
    display: block;
    background: url(../images/buttonIcons.png) -10px -3114px no-repeat !important;
}


/*Action Buttons*/

div.actionButtons {
    background-color: #DEE0E4;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    height: 22px;
    padding: 4px 0 4px 4px;
    float: left;
    margin: -40px 0 5px 70px;
}

.actionButtons a {
    background: url("../images/gradientBg.png") repeat-x scroll left top #D8DBDF !important;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #A6A6A6;
    padding: 1px 8px 1px 2px;
    font-size: 0.8em;
    text-decoration: none;
    margin: 0 5px;
    width: auto;
}

    .actionButtons a span {
        padding-left: 17px;
        background: url("../images/actionButtons.png") no-repeat 0 -2px;
    }

    .actionButtons a.addToFavourite span {
        display: inline;
    }

    .actionButtons a:hover {
        background: #356BB6 url("../images/gradientBg.png") repeat-x scroll left top !important;
        color: White;
    }

    .actionButtons a.addedToActionPlan span {
        background-position: -300px -2px;
    }

    .actionButtons a:hover span,
    .actionButtons a.addedToActionPlan:hover span {
        background-position: -600px -2px;
    }

    .actionButtons a.addToCompare span {
        padding-left: 18px;
        background: url("../images/actionButtons.png") no-repeat 0 -66px;
    }

    .actionButtons a.addToCompare.addedToActionPlan span {
        background-position: -300px -66px;
    }

    .actionButtons a.addToCompare:hover span,
    .actionButtons a.addToCompare.addedToActionPlan:hover span {
        background-position: -600px -66px;
    }

    .actionButtons a.addToCompare span {
        padding-left: 18px;
        background: url("../images/actionButtons.png") no-repeat 0 -66px;
    }

    .actionButtons a.addToBlackList span {
        background-position: 0 -102px;
    }

    .actionButtons a.addToBlackList:hover span,
    .actionButtons a.removeFromBlackList:hover span {
        background-position: -600px -102px;
    }

    .actionButtons a.removeFromBlackList span {
        background-position: -300px -102px;
    }


.information div.actionButtons {
    float: right;
    margin: -23px 0 0 0;
}

.information div.actionButtons {
    background-color: transparent;
}

/*Button Structure*/
ul.buttons li {
    list-style: none outside none;
    float: left;
    position: relative;
}

ul.buttons .menu li {
    float: none !important;
}

.buttons a {
    text-decoration: none;
    color: #101010;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.3);
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
    background: #E5E5E5 url(../images/grads.png) 0 -103px repeat-x;
    margin-left: 12px;
    display: block;
    height: 32px;
    width: 32px;
    cursor: pointer;
    position: relative;
}

    .buttons a:hover {
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.7);
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.7);
        box-shadow: 0 0 2px rgba(0,0,0,.7);
        background-color: #999;
    }

    .buttons a span {
        background: url(../images/buttonIcons.png) -10px -10px no-repeat;
        display: block;
        padding: 5px;
        height: 22px;
        width: 22px;
        line-height: 1.2em;
    }

.editButton a span,
.editButton input,
input.editButton,
a.editButton,
.actionPlan a#button,
input.cancelButton,
.cancelButton a span {
    background: #BC0404 url(../images/grads.png) 0 -1280px repeat-x;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #494546 !important;
    padding: 4px 10px;
    color: White;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 -1px #333;
    width: 0;
    width: auto;
    overflow: visible;
    cursor: pointer;
}

.loginBox .editButton a span,
.loginBox .editButton input {
    padding: 5px 10px;
}

.editButton a,
a.editButton {
    text-decoration: none;
}

.smallButton {
    font-size: 0.8em !important;
}

a.editButton:hover,
.editButton a:hover,
.editButton a:hover span,
.editButton input:hover,
input:hover.editButton,
input:hover.cancelButton {
    background-position: 0 -490px;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.redButton a span,
a.redButton {
    background-color: #581B59;
}

a.forgotten {
    color: #BC0404;
    font-size: 0.8em;
}

input.cancelButton {
    background-color: #999 !important;
}

/*Back Button*/
p.backButton {
    padding: 10px 0;
}

    p.backButton input {
        margin: 0 !important;
    }

.backButton a {
    background: transparent url(../images/guidanceBtn.png) no-repeat 10px -310px !important;
    padding: 0 0 0 33px;
    float: left;
    color: #101010;
    text-decoration: none;
    cursor: pointer;
    width: auto !important;
    border: none;
    box-shadow: none;
    margin-left: 0 !important;
}

    .backButton a:hover {
        background-position: 10px -510px !important;
        box-shadow: none;
    }

    .backButton a span {
        display: block;
        width: auto !important;
        background: transparent url(../images/guidanceBtn.png) no-repeat right -209px !important;
        padding: 5px 15px 5px 5px;
        padding-right: 15px !important;
        margin: 0;
        height: 22px;
        line-height: 1.2em;
    }

    .backButton a:hover span {
        background-position: right -410px !important;
        text-decoration: underline;
    }

/*Career article more articles controls*/

span.articleProgressLabel {
    font-weight: bold;
    margin: 10px -10px 0px;
    padding: 10px;
    clear: both;
    display: block;
    text-align: center;
}

a.moreArticlesButton {
    margin: 10px -10px 0px;
    padding: 10px;
    clear: both;
    display: block;
    text-align: center;
    background-color: White;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

    a.moreArticlesButton:hover {
        text-decoration: none;
    }

/* Profile Bar Buttons*/
#profileBar a {
    margin-left: 0px;
}

#profileBar li:first-child a {
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
    width: auto;
}

#profileBar a.dropDownNavLink {
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left-color: white;
}

#profileBar li:first-child a span {
    width: auto;
    min-width: 80px;
    padding-left: 30px;
    padding-right: 10px;
}

#profileBar a.dropDownNavLink span {
    background-position: -10px -60px;
}

/* App buttons*/
.guidanceButton span {
    background-position: -10px -160px !important;
}

.alertButton span {
    background-position: -10px -210px !important;
}

.notesButton span {
    background-position: -10px -260px !important;
}

.pdfButton span {
    background-position: -10px -410px !important;
}

.saveButton span {
    background-position: -10px -460px !important;
}

.printButton span {
    background-position: -10px -2810px !important;
}

.mainSiteButton span {
    background-position: -9px -3168px !important;
}


/*Link Buttons*/

.linkButtons a {
    background: url(../images/buttonIcons.png) no-repeat -10px -360px;
    padding: 10px 10px 10px 35px;
    text-decoration: none;
    color: #333333;
    font-weight: normal;
    font-size: 0.8em;
}

h3.linkButtons a {
    padding-top: 7px;
    font-weight: normal;
}

h3.linkButtons {
    margin-bottom: 20px !important;
}

.linkButtons a.add, .linkButtons a.delete, .linkButtons a.edit {
    padding: 6px 0 6px 30px;
}

    .linkButtons a.add:hover, .linkButtons a.delete:hover, .linkButtons a.edit:hover {
        text-decoration: underline;
    }

.linkButtons a.add {
    background-position: -10px -862px;
}

.linkButtons a.delete {
    background-position: -10px -910px;
}

.linkButtons a.addToUCAS {
    background-position: -10px -762px;
}

.linkButtons a.removeFromUCAS {
    background-position: -10px -812px;
}


/*Inline edit buttons*/

.actionEditButtons a,
div.delete a {
    background: url("../images/buttonIcons.png") no-repeat scroll -15px -1518px transparent;
    text-decoration: none;
    color: Black;
    padding-left: 23px;
    font-size: 0.8em;
}

.actionEditButtons a {
    line-height: 1.8em;
}

    .actionEditButtons a:hover {
        text-decoration: underline;
    }

    .actionEditButtons a.delete,
    div.delete a.delete {
        background-position: -15px -967px;
    }

    .actionEditButtons a.complete {
        background-position: -15px -1567px;
    }

.completed .actionEditButtons a.complete {
    background-position: -15px -1620px;
}

div.delete a.delete {
    display: block;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    background-position: -15px -965px;
}

    div.delete a.delete:hover {
        background-position: -15px -1015px;
    }

    div.delete a.delete span {
        display: none;
    }


/*Toggle Buttons*/

.toggleButtons a {
    border: 1px solid #666666 !important;
    color: #666666;
    font-size: 0.8em !important;
    padding: 5px 10px !important;
    background: url("../images/grads.png") repeat-x scroll 0 -107px #E5E5E5;
    font-weight: bold !important;
    text-shadow: none !important;
    min-width: 50px !important;
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
}

.toggleButtons li {
    float: left;
    list-style: none;
}

    .toggleButtons li:first-child a {
        -moz-border-radius: 5px 0 0 5px !important;
        border-radius: 5px 0 0 5px !important;
    }

    .toggleButtons li:last-child a {
        -moz-border-radius: 0 5px 5px 0 !important;
        border-radius: 0 5px 5px 0 !important;
    }

.toggleButtons a:hover {
    background-color: #999;
    color: #000;
}

.toggleButtons a.selected, .toggleButtons a.selected:hover {
    background-color: #595A5C !important;
    background-position: 0 -1100px !important;
    color: White !important;
    cursor: default;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

/*Profile bar*/

#profileBar {
    position: relative;
    float: right;
    margin: 20px;
    z-index: 10;
}

#profileMenu {
    width: 160px;
}

/*Generic Menu */
div.menu {
    top: 40px;
    right: 0;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid white;
    position: absolute;
    background-color: white;
    z-index: 1000;
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.7);
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,.7);
    box-shadow: 0 3px 5px rgba(0,0,0,.7);
}

    div.menu h2 {
        text-align: center;
        margin: 0;
        padding: 10px 0 5px;
        text-shadow: 0px 1px 2px #fff;
    }

    div.menu a {
        font-size: 1em;
        display: block;
        padding: 10px;
        height: 20px;
        background: none;
        border: none;
        box-shadow: none;
        width: auto !important;
        float: none;
    }

        div.menu a:hover {
            background-color: #F2F4F7;
        }

/*Print menu*/

#printMenu {
    width: 180px;
}

    #printMenu a {
        margin-left: 0;
    }

/*Home Navigation Menu Level 1*/
#navMenu {
    float: left;
    overflow: hidden;
    z-index: 100 !important;
    width: 90px;
}

    #navMenu li {
        list-style-position: outside;
    }

    #navMenu > ul > li > a {
        min-height: 80px;
        width: 80px;
        padding: 0;
        -moz-border-radius: 10px 0 0 10px;
        border-radius: 10px 0 0 10px;
        display: block;
        text-decoration: none;
    }

        #navMenu > ul > li > a > span {
            display: block;
            cursor: pointer;
        }

/*Tabbed Navigation*/

ul.tabbedNavigation {
    height: 40px;
    margin-left: 20px;
}

    ul.tabbedNavigation li {
        margin-right: 10px;
        float: left;
    }

        ul.tabbedNavigation li a {
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            text-decoration: none;
            text-shadow: 0px -1px 0px #333;
            background: #7F8693 url(../images/grads.png) 0 -450px repeat-x;
            color: White;
            border: 1px solid #B3B7BE;
            border-bottom: none;
            -moz-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
            padding: 0 15px;
        }

        ul.tabbedNavigation li.selected a {
            background-color: White;
            color: #7B879C;
            text-shadow: none;
            -webkit-box-shadow: 0 -2px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 -2px 2px rgba(0,0,0,.2);
            box-shadow: 0 -2px 2px rgba(0,0,0,.2);
            text-align: left;
        }

        ul.tabbedNavigation li a:hover {
            color: White;
            background-image: none;
        }

        ul.tabbedNavigation li.selected a:hover {
            color: #7B879C;
        }

    ul.tabbedNavigation.mediaNav {
        width: 400px;
        margin-left: 40px;
    }

/*Notification badges*/

span.notificationBadge {
    width: 16px !important;
    height: 16px !important;
    background: url("../images/buttonIcons.png") no-repeat scroll -17px -2467px !important;
    color: White;
    font-weight: bold !important;
    font-size: 10px;
    padding: 0 !important;
    text-align: center;
    position: absolute;
    top: -5px;
    right: -8px;
    line-height: 15px !important;
}

/* 07 PAGINATION ------------------------------------------------ */

/*Pagination layout*/
.pagination {
    text-align: left;
    margin: 0;
    padding: 15px 15px 3px;
    color: #7E8693;
    font-weight: bold;
    font-size: 1em;
    clear: both;
    background-color: #D8DBDF;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

div.filters + div .pagination {
    border-radius: 0;
}

.pagination a {
    color: #A6A6A6;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #A6A6A6;
    border-bottom: none;
    padding: 3px 6px;
    background-color: White;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

    .pagination a:hover {
        color: #333333;
        border-color: #333333;
    }

.pagination span.selected {
    text-shadow: 0 1px 1px rgba(0,0,0,1);
    background: #7E8693 url(../images/gradientBg.png) top left no-repeat;
    color: White;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 1em;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    border: 2px solid #7E8693;
    border-bottom: none;
}

/*Pager position*/
.pagerBottom {
    border-top: 1px solid #7E8693;
    padding: 2px 20px 15px;
    -moz-border-radius: 0;
    border-radius: 0;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

    .pagerBottom a, .pagerBottom span.selected {
        -moz-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
        border-bottom: 1px solid #7E8693;
        border-top: none;
        margin-top: 1px;
    }

    .pagerBottom span.selected {
        border-color: #7E8693;
        font-size: 1em;
    }

.centered {
    text-align: center;
    padding-top: 10px;
}

.pagination.centered {
    background-color: transparent !important;
}

/*Digg style for heSearch*/

.hesearch .pagination {
    text-align: right;
    padding: 10px 20px !important;
}

    .hesearch .pagination a, .hesearch .pagination span.selected {
        border: 1px solid #7E8693;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 0.9em;
    }

    .hesearch .pagination span.selected {
        font-weight: bold;
        font-size: 1em;
    }

    .hesearch .pagination a:hover {
        border-color: #004889 !important;
    }


/* 08 NOTES SECTION ------------------------------------------------ */

#notes {
    display: none;
}

    #notes div.planner {
        padding: 20px 20px 0 !important;
        border: 10px solid #D8DBE1;
        border-top: 0;
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
    }

    #notes h2 {
        padding: 0;
        margin: 0;
    }

    #notes li input {
        width: 550px;
        vertical-align: middle;
    }

    #notes li textarea {
        display: block;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 2px 5px;
        width: 770px;
        border: 1px solid #A6A6A6;
        margin: 10px 0 20px;
    }

    #notes li {
        list-style-position: outside;
    }

a.closeNotesButton {
    background: url("../images/buttonIcons.png") no-repeat scroll -8px -2508px;
    display: block;
    width: 34px;
    height: 34px;
    float: right;
    margin: -10px -10px 0 0;
}

    a.closeNotesButton span {
        display: none;
    }

span.noteCreationDate {
    font-weight: bold;
    padding-right: 20px;
}

#notes div.linkButtons {
    padding: 10px 20px;
    margin: 10px -20px 0;
    background: url("../images/overlayPale.png") repeat top left;
}


/* 09 LOGIN AND REGISTRATION PAGES ------------------------------------------------ */

/*Login menu*/
.login #navMenu {
    height: 430px;
    -moz-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #999999;
    border-right: none;
    width: 424px;
    left: 0;
}

.login #guidance {
    margin: 0 30px;
}

.loginBox {
    border: none !important;
    margin-top: 20px !important;
}

    .loginBox h2 {
        color: #BC0404;
        padding: 0 0 15px 0 !important;
        margin: 0;
    }

    .loginBox.newUser h2 {
        color: #581B59;
        border-top: 1px solid #999999;
        padding-top: 20px !important;
    }

    .loginBox ul {
        padding-bottom: 0px;
    }

    .loginBox.newUser ul {
        padding-bottom: 20px;
    }

    .loginBox p {
        color: #808080;
        font-size: 1em;
    }

        .loginBox p.floatR {
            float: none;
            margin: 20px 0 20px 240px;
        }

    .loginBox li {
        list-style: none outside none;
    }

        .loginBox li input {
            position: absolute;
            left: 210px;
        }

            .loginBox li input[type="password"],
            .loginBox li input[type="text"] {
                width: 225px;
            }

        .loginBox li img {
            position: absolute;
            left: 450px;
        }

        .loginBox li.editButton input {
            top: 0;
        }

    .loginBox table {
        margin: 10px 0 20px;
    }

        .loginBox table td {
            padding: 5px 0;
        }

            .loginBox table td input {
                margin-right: 10px;
            }

    .loginBox .editButton span,
    .editButton input,
    input.editButton {
        color: White !important;
    }

a.backtologin {
    margin-right: 30px;
}

.loginBox select {
    width: 212px !important;
    height: 28px !important;
}

/* 10 SEARCH AND FILTERS ------------------------------------------------ */
/*Filter menu*/

div.filters ul, div.subjectSelection {
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    border: 1px solid #D8DBDF;
}

div.filters ul {
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.filters li {
    list-style: none outside none;
    border-top: 1px solid #CCCCCC;
    padding: 5px;
    background: #E8E8E8 url("../images/grads.png") repeat-x scroll 0 -1585px;
    min-height: 28px;
}

    div.filters li.clearFilter {
        background: transparent;
        border: none;
    }

    div.filters li#searchBy {
        padding: 10px;
        -moz-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
    }

div.filters a {
    text-shadow: 0 -1px #333333;
    color: #581B59;
    padding: 5px 15px;
    font-size: 1.1em;
    line-height: 1.2em;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #C1000A;
    text-decoration: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

div.filters .clearFilter a {
    float: right;
    color: White;
    background-color: #356BB6;
    font-size: 0.8em;
    padding: 4px 10px;
    line-height: 1.4em;
    margin: 15px 0;
}

div.filters a:hover {
    background-position: 0 -490px;
}

div.filters li input[type="submit"] {
    font-size: 0.9em;
}

div.filters li input {
    vertical-align: middle;
}

div.filters .filterbody,
div.filters .clearFilter {
    display: none;
}

div.filters .open .filterbody {
    display: block;
}

div.filters .filterbody p {
    padding-bottom: 10px;
}

div.filters label.filterName {
    color: #4D4D4D;
    font-weight: bold;
    padding: 5px 5px 5px 30px;
    line-height: 2em;
    background: url(../images/buttonIcons.png) -10px -660px no-repeat;
}

div.filters li.open label {
    background-position: -10px -710px;
    color: black;
}

div.filterbody {
    display: block;
    padding: 15px 15px 15px 30px;
    background-color: White;
    border-top: 1px solid #D9D9D9;
    margin: 5px -5px 5px;
}

div.filters select {
    min-width: 350px;
}

span.filtervalue {
    padding-right: 10px;
    color: #7B879C;
}

    span.filtervalue a {
        background: url(../images/buttonIcons.png) -15px -2415px no-repeat;
        box-shadow: none;
        border-radius: 5px;
        -moz-border-radius: 5px;
        color: White;
        font-size: 0.9em;
        font-weight: bold;
        padding: 2px 5px 2px 20px;
    }

        span.filtervalue a:hover {
            background-position: -15px -2415px;
            text-shadow: 0 1px #333333;
            background-color: #7B879C;
            border-color: #7B879C;
        }

.filterbody td input {
    margin-right: 10px;
}

input.searchBox {
    width: 560px;
    background: url(../images/buttonIcons.png) -13px -1413px no-repeat;
    padding: 4px 4px 4px 30px !important;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: White;
}

div.filters a.openPopupUpdate {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: url(../images/linkDecoration.png) -3px -1396px no-repeat;
    box-shadow: none;
    display: block;
    float: right;
}

    div.filters a.openPopupUpdate span {
        display: none;
    }

.filterbody span table {
    width: 100%;
}

/*Types of work filters*/

ul.categorycounts {
    float: right;
    margin-right: 20px;
    border: none !important;
}

    ul.categorycounts li {
        background: url(../images/TOWMatchIcons.png) 0 -5px no-repeat;
        border: none;
        float: left;
        padding: 0 0 0 30px;
        width: 20px;
        height: 20px;
        min-height: auto;
        color: #BA0000;
        font-weight: normal;
    }

        ul.categorycounts li span {
            display: none;
        }

        ul.categorycounts li.matchcat_2 {
            background-position: 0 -35px;
        }

        ul.categorycounts li.matchcat_3 {
            background-position: 0 -65px;
        }

        ul.categorycounts li.matchcat_4 {
            background-position: 0 -95px;
        }

        ul.categorycounts li.matchcat_5 {
            background-position: 0 -125px;
        }

        ul.categorycounts li.total {
            color: Black;
            background: none;
            width: 60px;
            font-weight: bold;
            text-align: right;
        }

/* 11 LISTS ------------------------------------------------ */

/*Career article list*/

ul.careerArticleList li div:first-child {
    width: auto;
}

ul.careerArticleList p {
    min-height: 55px;
    line-height: 3em;
    padding: 10px 0;
}

ul.tableView,
.sectionMenu ul,
div.filterMenu,
.loginBox {
    border-top: 2px solid #7E8693;
    padding: 0;
    margin: 0;
    background-color: white;
}

.userDetails .loginBox {
    background-color: inherit;
}

ul.tableView {
    clear: both;
}

    ul.tableView li {
        list-style: none outside none;
        border-bottom: 1px solid #ABB6C8;
        padding: 0 10px;
        background: #F2F4F7;
    }

    /*General Article List */

    ul.tableView.genArticleList li {
        min-height: 24px;
        background: none repeat scroll 0 0 white;
        border: medium none;
        font-size: 0.95em;
        padding: 10px;
    }

ul.genArticleList {
    font-size: 1.1em;
}

    ul.genArticleList li:nth-child(2n+1) {
        background: none repeat scroll 0 0 #F2F2F2;
    }

    ul.genArticleList .careerArticleLink {
        background: none repeat scroll 0 0 transparent;
        color: #914094;
        font-size: 1em;
    }

ul.generalArticles li {
    min-height: 50px;
}

    ul.generalArticles li p {
        margin: 1em 0;
    }

/*Review Lists*/

ul.aspectListView li {
    padding: 10px 20px;
    height: 30px;
}

    ul.aspectListView li span {
        float: left;
        line-height: 1.5em;
    }

    ul.aspectListView li select {
        float: right;
        width: 200px;
    }

    ul.aspectListView li:nth-child(even) {
        background-color: #F2F4F7;
    }

.aspectListView li.responseValue_7, .aspectListView li.responseValue_8 {
    background-color: #EFE2EF !important;
}
/*Dislike very much & unskilled */
.aspectListView li.responseValue_6, .aspectListView li.responseValue_9, .strainList li.responseValue_19 {
    background-color: #F7E5E5 !important;
}
/*Dislike & some skill*/
.aspectListView li.responseValue_5, .strainList li.responseValue_20 {
    background-color: #ECEDEF !important;
}
/*Does not matter*/
.aspectListView li.responseValue_4, .aspectListView li.responseValue_10, .strainList li.responseValue_18 {
    background-color: #E4F4DA !important;
}
/*Like & skilled*/
.aspectListView li.responseValue_3, .aspectListView li.responseValue_11 {
    background-color: #E0F0F5 !important;
}
/*Like very much & highly skilled*/
.aspectListView li.responseValue_17 {
    background-color: #FEF1DA !important;
}

/*Compare Careers List*/

ul.compareCareerList li {
    width: 270px;
    float: left;
    margin: 0 5px 5px;
    padding: 0;
}

    ul.compareCareerList li div.compareCareerItem {
        border: 10px solid #CCCCCC;
        border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 10px;
    }

    ul.compareCareerList li ul.standardList li {
        border: none;
        padding: 5px 10px;
        margin: 0 0 0 2em;
        list-style: disc outside none;
        font-size: 0.8em;
        width: auto;
        float: none;
    }

        ul.compareCareerList li ul.standardList li a {
            text-decoration: none;
        }

    ul.compareCareerList li h3 {
        padding: 15px 0;
        text-align: center;
        margin: -10px -10px 10px;
        font-size: 1em;
        border-bottom: none;
        background: #BC0404 url("../images/grads.png") repeat-x 0 -15px;
        color: White;
    }

    ul.compareCareerList li h4 {
        padding: 20px 0 0 1em;
    }

    ul.compareCareerList li div.photo {
        width: 210px;
        padding: 10px;
        margin: 0;
    }

        ul.compareCareerList li div.photo img {
            width: 210px;
        }

.compareSection.statusIcons span {
    float: left;
}

p.compareSection {
    min-height: 60px;
    padding: 0;
    margin-right: -15px;
    font-size: 0.95em;
}

.compareSection.statusIcons, .careerFacts .statusIcons {
    padding: 15px 0;
    min-height: 30px;
    line-height: normal;
}

    .compareSection.statusIcons span, .careerFacts .statusIcons span {
        float: left;
        margin-top: -15px;
    }

p.statusIcons.matchcat1 {
    color: #BC0404;
}

p.statusIcons.matchcat2 {
    color: #622D67;
}

p.statusIcons.matchcat11 {
    color: #000;
}

p.statusIcons.matchcat12 {
    color: #4876C4;
}

ul.compareCareerList div.actionButtons {
    margin: 0;
    float: none;
    background-color: transparent;
    text-align: center;
    height: 18px;
    padding: 10px;
}

    ul.compareCareerList div.actionButtons.deleteCareer {
        padding: 0;
        height: 30px;
        margin-bottom: -2px;
    }

        ul.compareCareerList div.actionButtons.deleteCareer a {
            border-radius: 15px 15px 0 0;
            -moz-border-radius: 15px 15px 0 0;
            padding: 0;
            margin: 0 auto;
            border-width: 10px;
            border-color: #ccc;
            border-bottom: none;
            background: #ccc url("../images/buttonIcons.png") no-repeat scroll -16px -967px !important;
            width: 18px;
            height: 18px;
            display: block;
        }

            ul.compareCareerList div.actionButtons.deleteCareer a:hover {
                background-position: -16px -1017px !important;
                background-color: #CCCCCC !important;
            }

            ul.compareCareerList div.actionButtons.deleteCareer a span {
                display: none;
            }

/* 12 LINKS AND STYLES ------------------------------------------------ */

/*Links*/

.careerArticleLink {
    font-size: 1.1em;
    text-decoration: none;
    padding: 10px 35px 10px 0;
    background: url(../images/linkDecoration.png) right -10px no-repeat;
}

    .careerArticleLink:hover, .careerArticleInstitutionLink:hover {
        text-decoration: underline;
    }

.mediaViewerLink {
    display: block;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    border: 3px solid #7E8693;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: White;
}

    .mediaViewerLink:hover {
        cursor: default;
    }

    .mediaViewerLink img {
        border: none;
    }

.userAdded {
    color: #346CB8;
    font-weight: bold;
}

.glossary {
    color: #7B879C;
    text-decoration: none;
    border-bottom: 1px dashed #7B879C;
}

/*Article Bullet Styles*/

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

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

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

/* Alt Title Captions */

.altTitleCaption {
    display: block;
    font-size: 0.8em;
}

    .altTitleCaption span {
        font-weight: bold;
    }

/* 13 GUIDANCE AND FEEDBACK ------------------------------------------------ */

/*Comments*/
div.comment {
    padding: 15px 40px;
    font-size: 0.8em;
    display: none;
    font-weight: normal !important;
}

.comment div {
    display: none;
}

div.comment li {
    list-style: disc inside none;
    padding: 5px 0 !important;
    border: none !important;
    background: none;
}

div.comment h3 {
    margin-top: 0;
    color: #346CB8;
}

div.comment p {
    width: auto !important;
    padding: 0 0 5px 0 !important;
    margin: 0;
}

.collapsable h3 {
    cursor: pointer;
    background: url(../images/linkDecoration.png) 0 -195px no-repeat !important;
    padding-left: 30px !important;
    margin-left: -8px !important;
}

    .collapsable h3.collapsableHidden {
        background-position: 0 -95px !important;
    }

a.showCommentLink {
    cursor: pointer;
    background: url(../images/linkDecoration.png) -2px -197px no-repeat !important;
    color: #7F8693;
    font-size: 0.9em;
    padding: 5px 0 5px 28px;
    display: block;
    font-weight: normal !important;
}

a.hideCommentLink {
    background-position: 0 -297px !important;
}

a.showCommentLink:hover {
    text-decoration: none;
    font-style: normal;
}

/*Guidance panel*/

#guidance {
    padding: 30px 0 30px;
    background-color: White;
}

.welcome #guidance,
.loginPage #guidance {
    padding-bottom: 30px;
    position: absolute;
    width: 400px;
    z-index: 10;
    margin: 0px 30px;
    background-color: transparent !important;
}

#guidance div.guidanceBubble {
    border: 2px solid #ED7710;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #FEEDCD url(../images/guidanceBg.png) no-repeat 10px 10px;
    padding: 20px 20px 50px 80px;
    font-size: 1em;
    font-weight: bold;
    min-height: 40px;
    position: relative;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.8);
    box-shadow: 0 0 3px rgba(0,0,0,.8);
}

li.hiddenGuidance {
    display: none;
}

#guidance a.closeGuidance {
    margin: 0;
    padding: 5px;
    position: absolute;
    right: 5px;
    bottom: 0;
    text-decoration: none;
    background: none !important;
}

    #guidance a.closeGuidance span {
        background: none !important;
    }

#guidance #guidanceText {
    padding-right: 10px;
}

a.guidanceLink {
    background: url(../images/guidanceBtn.png) no-repeat right -100px;
    float: right;
    padding-right: 24px;
    color: #fff;
    text-shadow: 0 -1px 0 #999;
    text-decoration: none;
    font-size: 1.1em;
    margin: 5px 0 0 -10px;
    cursor: pointer;
}

    a.guidanceLink span {
        background: url(../images/guidanceBtn.png) no-repeat 0px -0px;
        display: block;
        width: auto;
        height: 40px;
        line-height: 40px;
        padding: 4px 20px;
    }

    a.guidanceLink.left {
        float: left;
        padding: 0 0 0 24px;
    }

    a.guidanceLink:hover {
        text-decoration: underline;
    }

.guidanceNavigationPanel {
    position: absolute;
    bottom: 0px;
    right: 5px;
    width: 50px;
}

    .guidanceNavigationPanel a {
        display: block;
        width: 20px;
        height: 30px;
        margin-left: 5px;
        background: url("../images/buttonIcons.png") no-repeat -15px -2610px;
        float: left;
    }

        .guidanceNavigationPanel a.nextGuidance {
            background-position: -15px -2660px;
            float: right;
        }

        .guidanceNavigationPanel a span {
            display: none;
        }

/*CareerPlan in-plan guidance */

.sectionheader #guidance div {
    border: none !important;
    background: none !important;
    color: #333 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}

/*Configurable Guidance Panel*/

ul.configGuidancePanel li {
    list-style: disc outside none;
    padding: 5px;
}

    ul.configGuidancePanel li a:hover {
        text-decoration: none;
    }

/*Suitable for you comment*/

h3.suitableForYouMainComment {
    padding-left: 60px;
    font-weight: normal;
}

    h3.suitableForYouMainComment p:first-child {
        font-weight: bold;
    }

    h3.suitableForYouMainComment span {
        float: left;
        margin: -15px 0 0 -60px;
    }

p.suitableForYouMainComment {
    padding-left: 60px;
}

div.suitableForYouSections.subcomment {
    margin: 0;
    padding: 0px 20px 20px 60px;
}

div.suitableForYouSections {
    margin: 20px;
    padding-bottom: 10px;
    clear: both;
    min-height: 60px;
}

    div.suitableForYouSections h3 {
        color: #581B59;
        margin: 0;
        padding-top: 1em;
        border-top: 1px dotted #333;
        clear: both !important;
    }

        div.suitableForYouSections h3:first-child {
            border-top: none;
        }

    div.suitableForYouSections p {
        margin: 0;
        padding-bottom: 0.5em;
        clear: both;
    }

    div.suitableForYouSections ul li {
        list-style: disc inside none;
    }

div.lastSection {
    border-bottom: none;
}

    div.lastSection div {
        clear: both;
        padding-top: 10px;
    }

        div.lastSection div li {
            list-style: disc inside;
        }

div.suitableForYouSections table {
    width: 100%;
    border: 1px solid #ccc;
    margin: 10px 0 20px;
}

    div.suitableForYouSections table th,
    div.suitableForYouSections table td {
        text-align: left;
        padding: 10px;
    }

    div.suitableForYouSections table th {
        background: url("../images/grads.png") repeat-x scroll 0 -1400px #A6ACB6;
    }

a.largeTextButton,
button.largeTextButton {
    padding: 10px;
    border: 2px solid #333;
    color: white;
    background: #7E8694 url("../images/grads.png") repeat-x scroll 0 -1280px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0px -1px 1px #000000;
    text-align: center;
    display: block;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

button.largeTextButton {
    font-size: 1em;
}

.exploreFuture a.largeTextButton {
    float: right;
    min-width: 250px;
    margin-bottom: 1em;
}

div.suitableForYouSections a.largeTextButton:hover {
    background-color: #581B59;
}

div.suitableForYouSections ul.selectHealthIssues {
    clear: right;
    padding-top: 10px;
}

    div.suitableForYouSections ul.selectHealthIssues li {
        list-style: disc inside;
        padding: 5px 0;
    }

        div.suitableForYouSections ul.selectHealthIssues li a {
            text-decoration: none;
            color: Black;
        }



/* 14 TABULATED DATA ------------------------------------------------ */

/*Column Headers*/

.columnHeaders {
    padding: 10px 5px 0;
    height: 30px;
}

.hesearch .columnHeaders, #courselist .columnHeaders {
    border-bottom: 2px solid #7E8693;
    color: #7E8693;
    background-color: #D8DBDF;
    clear: both;
}

.columnHeaders span {
    display: block;
    float: left;
    height: 30px;
    line-height: 0.9em;
    color: #666666;
    font-weight: bold;
}

.match .columnHeaders {
    float: right;
    margin-top: -40px;
}

#courselist .columnHeaders {
    float: none;
    margin-top: 0;
}

.match .columnHeaders span {
    width: 68px;
    text-align: center;
    font-size: 0.7em;
}

.hesearch .columnHeaders span,
#courselist .columnHeaders span {
    font-size: 0.8em;
    line-height: 1em;
    text-align: left;
}

.hesearch span.columnhead1,
#courselist span.columnhead1 {
    width: 605px;
    padding-left: 5px;
}

.hesearch span.columnhead2,
#courselist span.columnhead2 {
    width: 110px;
}

.hesearch span.columnhead3,
#courselist span.columnhead3 {
    width: 100px;
    text-align: right;
}

/* 15 FORMS ------------------------------------------------ */

fieldset {
    border: none;
    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.5);
    -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.5);
    box-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

    fieldset ul {
        padding: 0 0 15px;
    }

    fieldset li {
        position: relative;
        padding: 10px 0;
    }

        fieldset li select,
        .popupContent li select {
            position: absolute;
            right: 0;
            padding: 3px;
        }

.standardForm fieldset li {
    padding: 15px 0;
}

    .standardForm fieldset li select,
    .standardForm fieldset li input[type="text"] {
        float: right;
        width: 150px;
    }

    .standardForm fieldset li input[type="text"] {
        width: 400px;
        padding: 5px;
        border: 2px solid #A9A9A9;
    }

.listForm fieldset li {
    padding: 5px 0;
}

label {
    cursor: pointer;
}

select, input, textarea {
    font-size: 0.8em;
    color: #323332;
}

    input[type="radio"],
    input[type="checkbox"] {
        padding: 0;
    }

    input[type="radio"],
    input[type="checkbox"],
    input[type="submit"] {
        cursor: pointer;
    }

        input[type="radio"] + label,
        input[type="checkbox"] + label {
            padding-right: 50px;
        }

            input[type="checkbox"] + label:last-child {
                padding-right: 0;
            }

    select,
    input[type="text"],
    input[type="password"],
    .editActionPanel textarea {
        padding: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
        border: 1px solid #A6A6A6;
    }

select {
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


/*Date Picker widget*/
#datepicker {
    float: right;
    width: 200px;
}

    #datepicker p.editButton {
        float: right;
    }

        #datepicker p.editButton a span {
            float: left;
            text-align: center;
        }

.ui-datepicker {
    width: auto !important;
}

/*Edit in place panel*/

#popupWrapper.editActionPanel {
    display: none;
}

#colorbox #popupWrapper.editActionPanel {
    display: block;
}

#popupWrapper.editActionPanel h2,
.gapList h2 {
    text-align: center !important;
}

.editActionPanel label {
    font-weight: bold;
    display: block !important;
    padding: 5px 0;
}

    .editActionPanel label span {
        font-weight: normal;
    }

.editActionPanel fieldset p {
    padding-top: 15px;
}

.editActionPanel textarea {
    background: none !important;
    width: 97% !important;
}

.editActionPanel .largeTextButton {
    width: 150px;
    display: block;
}

.popupContent textarea#action {
    min-height: 75px;
}

/* 16 ACTION PLANNER ------------------------------------------------ */

/*Planner design*/

#content.actionPlan {
    background-color: #F7F8F9;
}

.actionPlan .leftColumn {
    width: 800px;
    padding-top: 25px;
}

.actionPlan ul.tabbedNavigation {
    margin-left: 0;
}

    .actionPlan ul.tabbedNavigation li a {
        border-color: #CCCCCC;
    }

.actionPlan .editButton a#button {
    background-color: #356BB6;
}

    .actionPlan .editButton a#button:hover {
        background-image: none;
    }

    .actionPlan .editButton a#button.down {
        background-color: #1D891B;
    }

.planner {
    border: 1px solid #CCCCCC;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    background-color: White;
    padding: 20px 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

    .planner .planner {
        border: medium none;
        box-shadow: none;
        padding: 0;
    }

    .planner h3 {
        background: #64B3CD url(../images/ActionPlanH3Shadow.png) right -70px no-repeat;
        border: 1px solid #64B3CD;
        margin: 0 -1px;
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 34px !important;
        color: White;
        font-size: 1.1em;
        font-weight: normal;
        text-shadow: 0 -1px 0 #666666;
    }

        .planner h3.articleLinkPlanner {
            text-shadow: none;
        }

    .planner .section {
        display: none;
    }

div.sectionheader {
    margin-bottom: 20px;
}

.planner p.sectionexpander {
    display: block;
    float: left;
    font-size: 0;
    overflow: hidden;
    text-decoration: none;
    width: 35px;
    height: 40px;
    cursor: pointer;
    background: url(../images/buttonIcons.png) -5px -1905px no-repeat;
}

.planner div.delete {
    float: right;
    margin: 12px 10px 0 0;
}

.hiddenView {
    display: none !important;
}

.planner .sectionexpanded {
    display: block;
}

.planner p.sectionexpander.sectionexpanded {
    background-position: -5px -1855px;
}

.planner .sectionexpanded .sectionheader h3 {
    color: #333;
    font-weight: normal;
}

div.apItem > table thead {
    height: 40px;
}

div.apItem > table > th {
    color: #689FB1;
    font-size: 0.75em;
    padding: 10px 5px;
}

.planner th {
    text-align: left;
    font-size: 0.8em;
    color: #689FB1;
    height: 30px;
}

.section p.linkButtons {
    padding: 10px 0;
}

#APSection1 ul.linkButtons {
    padding: 0 30px;
}

    #APSection1 ul.linkButtons li {
        list-style: none outside;
        padding-top: 10px;
    }

p.noEntries {
    padding: 10px 25px;
    margin: 0 0 0 10px;
    font-size: 0.9em;
}

.planner .careerArticleLink {
    font-size: 1em;
    background-image: none;
    padding: 10px 0;
    font-weight: normal;
}

.apActionTable tr.completed td {
    background-color: #EEF0F4;
    color: #99A1AC;
}

.apActionTable tr.completed ul.actionEditButtons li.edit,
.apActionTable tr.completed ul.actionEditButtons li.delete {
    display: none !important;
}

.apActionTable tr.completed ul.actionEditButtons {
    visibility: visible !important;
}

/*Action table*/

table.apActionTable th {
    color: #9AA1AC;
    background: #EEF0F4 url("../images/ActionPlanH3Shadow.png") -15px top no-repeat;
    border-bottom: 1px solid #D5DAE3;
    padding: 0 10px;
}

td.apAction, td.apDeadline, td.apTitle {
    border-bottom: 1px solid #D5DAE3;
    border-right: 1px solid #D5DAE3;
    background-color: White;
}

td.apDeadline {
    width: 80px;
}

    td.apDeadline p {
        background: url(../images/statusIcons.png) 0 -1140px no-repeat;
        padding: 22px 10px 5px;
        font-size: 0.75em;
        line-height: 1em;
        text-align: center;
        color: #9F3618;
        width: 40px;
        height: 30px;
        margin: 0 auto;
    }

td.apAction,
td.apTitle {
    padding: 10px 0 0 10px;
    vertical-align: top;
}

    td.apAction p,
    td.apTitle p {
        font-size: 0.8em;
        padding-right: 10px;
    }

    td.apTitle span.handle {
        background-color: transparent !important;
        margin: -10px 10px -10px -10px;
    }

/*Action buttons*/
ul.actionEditButtons {
    height: 25px;
    margin: 10px 0 0 -10px;
    width: 100%;
    background-color: #D5DAE3;
    padding: 0 10px 0 0 !important;
}

    ul.actionEditButtons li {
        float: left;
        height: 21px;
        padding: 0 10px;
        margin: 2px 0;
        border-left: 1px solid white;
        list-style: none outside none;
    }

        ul.actionEditButtons li:first-child {
            border: none;
        }

ul.actionEditButtons {
    visibility: hidden;
}

td.apAction:hover ul.actionEditButtons {
    visibility: visible;
}

div.apItem:hover {
    cursor: pointer;
}

.leftColumn .editButton {
    float: right;
    margin-top: -40px;
}

.planner .gapAnalysis {
    margin: 0 10px 15px 15px;
}

    .planner .gapAnalysis a.largeTextButton {
        display: inline-block;
    }

.gapAnalysis a.largeTextButton {
    padding: 5px 15px;
}

    .gapAnalysis a.largeTextButton:hover,
    button.largeTextButton:hover {
        background-color: #BC0404;
    }

/*Top Careers*/
.topCareers h3 {
    border-color: #C99DCB;
    background-color: #E9D8EA;
    color: black;
}

.topCareers .handle {
    background-color: #C99DCB;
}


.topCareers .planner > .sectionheader ul.careerArticleList {
    margin: 10px 0 0 7px;
}

/*Top Skills*/
.sectionheader ul.topSkillsList {
    margin: 10px 0 0 7px;
}

.topSkillsList li {
    border: 1px solid #BD0000;
    background: #F0CCCC url("../images/ActionPlanH3Shadow.png") no-repeat scroll right -70px;
    color: black;
    margin: 0 -1px 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    list-style: none outside none;
}

    .topSkillsList li a {
        text-decoration: none;
    }

/*Section Expanders*/

.skillsToImprove p.sectionexpander,
.topCareers p.sectionexpander,
.notes p.sectionexpander {
    background-position: -5px -1805px;
}

    .skillsToImprove p.sectionexpander.sectionexpanded,
    .topCareers p.sectionexpander.sectionexpanded,
    .notes p.sectionexpander.sectionexpanded {
        background-position: -5px -1755px;
    }


/*Subjects*/
.subjects div.sectionheader, .topCourses div.sectionheader, .topSkills div.sectionheader, .topCareers .planner > .sectionheader {
    margin: 0 0 10px -7px;
    padding-bottom: 10px;
    background: url(../images/ActionPlanH3Shadow.png) 0 42px no-repeat;
}

div.sectionheader div.sectionheader {
    margin-left: 10px !important;
    background: none;
}

.planner table {
    width: 100%;
}

.subjects table .ui-sortable .sectionheader > table {
    border: 4px solid #58B3CF;
}

.subjects table .ui-sortable-disabled .sectionheader > table {
    border-width: 1px;
}

td.col1 p.sectionexpander {
    background: url(../images/buttonIcons.png) -10px -1805px no-repeat;
}

    td.col1 p.sectionexpander.sectionexpanded {
        background: url(../images/buttonIcons.png) -10px -1755px no-repeat;
    }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {
    background-color: #CEE8F1;
    padding: 0;
    color: #333;
    font-size: 0.9em;
    border-left: 1px solid #58B3CF;
}

.col2, .col3, .col4, .col5 {
    padding: 0 10px !important;
}

.col1 {
    width: 35px;
}

th.col1 {
    width: 45px;
}

.col2 {
    width: 150px;
}

.col4, .col5 {
    width: 140px;
}

.col3 {
    width: 240px;
}

td.col1 {
    border-left: none;
}

.subjectPlanning .col3 {
    width: 400px;
}

.col6, .subjectPlanning .col5 {
    width: 35px;
    padding: 0 !important;
}

.subjects table div.delete {
    margin: 4px 8px 0 0;
}

.ui-sortable td.col1 {
    background-color: #58B3CF;
}

.ui-sortable-disabled td.col1 {
    background-color: #CEE8F1;
}

.planner .ui-sortable h3 {
    border-width: 4px;
}

/*TOP UCAS Specific*/
.topCourses h3 {
    border-color: #59195B;
    background-color: #8A3A8E;
    color: white;
}

.topCourses .planner .section h3 {
    display: block;
}

.topCourses .entryitem:first-child h3 {
    border-color: #BD1700;
    background-color: #BD422D;
}

.topCourses ul.tabbedNavigation li.selected a {
    color: #59195B !important;
}

div.sectionheader div.sectionheader {
    margin-left: 7px !important;
    background: none;
}

.topCourses h3.articleLinkPlanner {
    font-size: 1em;
    height: 50px;
    line-height: 25px;
    padding: 5px 0 !important;
    line-height: 1.5em;
}

    .topCourses h3.articleLinkPlanner, .topCourses h3.articleLinkPlanner .careerArticleInstitutionLink {
        color: #555555 !important;
    }

.careerArticleInstitutionLink {
    text-decoration: none;
}

.topCourses .planner .section .entryitem h3 {
    border-color: #C99DCB;
    background-color: #E9D8EA;
    color: black;
}

.topCourses .planner .section .entryitem:first-child h3 {
    margin-top: 20px;
}

.topCourses .planner .section .entryitem p.sectionexpander {
    background-position: -5px -1805px;
    height: 60px;
}

    .topCourses .planner .section .entryitem p.sectionexpander.sectionexpanded {
        background-position: -5px -1755px;
    }

.topCourses .planner .section .entryitem .handle {
    height: 68px;
    background-position: -5px -1295px;
    background-color: #C99DCB;
}

.topCourses .planner .section div.delete {
    margin-top: 18px;
}

.topCourses .entryitem:first-child .section .entryitem h3 {
    border-color: #E7A396;
    background-color: #F2D1CB;
}

.topCourses .entryitem:first-child .section .entryitem .handle {
    background-color: #E7A396;
}

span.UCASOrder {
    display: block;
    width: 35px;
    height: 66px;
    text-align: center;
    line-height: 60px;
    background: #BD1700 url(../images/grads.png) 0 -10px repeat-x;
    float: left;
    color: White;
    font-weight: bold;
    font-size: 1.3em;
    border: 1px solid #BD1700;
}

.ui-sortable-disabled span.UCASOrder {
    height: 60px;
}

/*Top institutions*/
.topInstitutions h3 {
    border-color: #C99DCB;
    background-color: #E9D8EA;
    color: black;
}

.topInstitutions .handle {
    background-color: #C99DCB;
}

.topInstitutions ul.tabbedNavigation li.selected a {
    color: #59195B !important;
}


/*Sortable Actionplan*/
span.handle {
    display: block;
    width: 35px;
    height: 48px;
    background: url(../images/buttonIcons.png) -8px -1450px no-repeat;
    float: left;
    margin: 0 5px 0 0;
    cursor: move;
}

.ui-sortable-disabled span.handle {
    display: none;
}

.planner .ui-sortable h3 {
    border-width: 4px;
}

.planner .ui-sortable-disabled h3 {
    border-width: 1px;
}

.subjects .planner span.handle {
    height: 40px;
    background-position: -8px -1455px;
}


/* TreeView Component*/
.TreeView {
    clear: both;
    vertical-align: top;
    padding: 2px;
}

    .TreeView .ul {
        list-style: none outside none;
        padding: 0px 0px 0px 20px;
        margin: 0px;
    }

    .TreeView .Ln {
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.line.gif")%>') 0 0 repeat-y;
    }

    /* first or middle node: */
    .TreeView .Mid {
        display: block;
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.mid.gif")%>') left top no-repeat;
        vertical-align: middle;
    }

    /* last node: */
    .TreeView .Last {
        display: block;
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.last.gif")%>') top left no=repeat;
        vertical-align: middle;
    }

    /* root node: */
    .TreeView .Root {
        display: block;
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.top.gif")%>') left top no-repeat;
        vertical-align: middle;
    }

    .TreeView .span {
        background-image: none;
        display: inline-block;
        border: 1px solid transparent;
        margin: 0px;
        padding: 0px 4px 0px 4px;
        cursor: default;
        vertical-align: middle;
    }

    .TreeView .spanedit {
        background-image: none;
        display: inline-block;
        border: 1px none transparent;
        margin: 0px;
        padding: 0px 4px 0px 4px;
        cursor: default;
        vertical-align: middle;
        text-align: center;
    }

    .TreeView .span:hover {
        border: 1px solid #BCBCBC;
        background-color: #EEEEEE;
    }

    /* selected node: */
    .TreeView .Sel {
        border: 1px solid Highlight;
        background-color: Highlight;
        color: HighlightText;
    }

        .TreeView .Sel:hover {
            background-color: Highlight;
            color: HighlightText;
            border: 1px solid #999999;
        }

    .TreeView .Expand {
        vertical-align: top;
        display: inline-block;
        width: 16px;
        min-height: 16px;
        cursor: pointer;
        margin: 2px 4px 0px -20px;
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.plus.png")%>') left top no-repeat;
    }

    .TreeView .Collapse {
        vertical-align: top;
        display: inline-block;
        width: 16px;
        min-height: 16px;
        cursor: pointer;
        margin: 2px 4px 0px -20px;
        background: url('<%=WebResource("Cascaid.Common.TreeView.TreeView.images.minus.png")%>') left top no-repeat;
    }

    .TreeView .div {
        padding: 0px 0px 0px 20px;
        display: inline-block;
    }

.odcContextMenu {
    padding: 2px;
    border: 1px solid #A0A0A0;
    background-color: #F4F4F4;
}

.TreeView .edit {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    border: 1px solid #C0C0C0;
}

.TreeView .cnt {
    vertical-align: middle;
}

.TreeView .myClass {
    border: 1px solid Red;
    background-color: Yellow;
    color: HighlightText;
}

.entrylist {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

/*Draggable editing*/
.placeholder {
    background-color: #CCCCCC !important;
    display: block;
    height: 40px;
    width: 830px;
    margin-left: 0;
}

/*Minicareer and Feedback lists*/
.miniCareerList ul,
.feedbackList ul {
    padding: 0 0 10px !important;
}

.miniCareerList li {
    padding: 10px 0;
}

.feedbackList li {
    color: #808080;
    padding: 5px 0;
}

/* 17 GAP ANALYSIS ------------------------------------------------ */
/*Gap analysis*/

ul.gapListTabs {
    padding-left: 10px !important;
}

.gapList ul,
.gapListCareerView ul {
    margin: 0 10px !important;
    border: 1px solid #7F8693;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

    .gapList ul li {
        background-color: #CEE8F1;
        border: 1px solid #58B3CF;
        padding: 10px 20px;
        margin: 10px 0;
    }

        .gapList ul li a {
            color: #1A1A1A;
            text-decoration: none;
            cursor: default;
            font-weight: bold;
        }

            .gapList ul li a img,
            .gapListCareerView table img {
                display: none;
            }

            .gapList ul li a.addedToActionPlan,
            .gapList ul li a.addToFavourite,
            .gapListCareerView a.addToFavourite,
            .gapListCareerView a.addedToActionPlan {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 3px;
                right: 5px;
                display: block;
                background: url(../images/statusIcons.png) -20px -1400px;
                no-repeat;
                cursor: pointer;
            }

            .gapList ul li a.addedToActionPlan,
            .gapListCareerView a.addedToActionPlan {
                background-position: -20px -1640px !important;
            }

.gapListCareerView .apItem p {
    margin: 0 !important;
}

.gapListCareerView li.listItem {
    padding: 0 !important;
    margin: 20px 0 !important;
}

.gapListCareerView table {
    width: 100%;
}

    .gapListCareerView table th {
        background-color: #EFF7FA;
        padding: 8px 15px;
        font-weight: normal;
        font-size: 0.9em;
        border: 1px solid #CCCCCC;
    }

    .gapListCareerView table td {
        width: 50%;
        vertical-align: top;
    }

        .gapListCareerView table td td div {
            padding: 8px 35px 8px 15px;
            position: relative;
            font-size: 0.9em;
            font-weight: bold;
        }

        .gapListCareerView table td td {
            color: #43899E;
            width: 100%;
            border: 1px solid #CCCCCC;
            border-top: 1px solid white;
        }

.gapListCareerView .listItem .apItem p {
    height: 20px;
    padding: 10px 15px;
    background-color: #DEC5DE;
    border: 1px solid #914094;
}

    .gapListCareerView .listItem .apItem p a {
        color: #333;
        font-weight: bold;
        background: url("../images/buttonIcons.png") no-repeat scroll -20px -1365px transparent;
        padding-left: 20px;
    }

.gapListCareerView .listItem .apItem.collapsed p a {
    background-position: -20px -1415px;
}

.gapList .popupContent p {
    margin-bottom: 20px;
}


/* 18 TOOTLIPS AND POPUPS ------------------------------------------------ */

/*Tooltips*/
.ui-tooltip-content {
    padding: 10px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/*Popups*/
#popupWrapper {
    min-height: 442px;
    background-color: white;
}

.popupHeader,
.editorHeader {
    background: url("../images/grads.png") repeat-x scroll 0 -5px transparent;
    padding: 20px 30px;
    margin-bottom: 10px;
    border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    box-shadow: 0 2px 5px #999999;
    text-shadow: 0 -1px 0 #111111;
}

    .popupHeader h2 {
        color: white;
        margin: 0;
        font-weight: normal;
        text-align: center;
        text-shadow: 0 -1px 0 #333333;
    }

        .popupHeader h2 span {
            display: block;
            font-weight: bold;
        }

.popupContent {
    background-color: white;
    padding: 10px 0;
    position: relative;
}

    .popupContent h2,
    .popupContent h3 {
        margin: 0 0 15px;
        padding: 15px 20px 2px;
        border-bottom: 1px solid #A6A6A6;
    }

    .popupContent ul {
        margin: 0;
    }

    .popupContent li {
        list-style-position: outside;
        position: relative;
        padding: 0 20px;
    }

    .popupContent ul.tabbedNavigation {
        padding-left: 20px;
    }

    .popupContent p {
        padding: 0 20px 20px 20px;
    }

    .popupContent ul.aspectListView li {
        padding: 10px 0 10px 20px;
    }

    .popupContent span.aspectQuestion {
        display: block;
        width: 550px;
        float: left;
    }

    .popupContent .aspectListView select {
        margin: 0 10px 0 0;
    }

    .popupContent ul.aspectListView {
        padding-bottom: 20px;
    }

    .popupContent .largeButton {
        position: absolute;
        bottom: 0;
        right: 20px;
        padding: 0;
    }

    .popupContent a.glossary {
        border-bottom: none !important;
        color: Black !important;
        cursor: text;
        text-decoration: none;
    }

    .popupContent #utilityControlBar li {
        padding: 0;
    }

/*Small Popup*/

#popupWrapper.smallPopup {
    height: 424px;
}

.smallPopup h2 {
    text-align: center;
}

.smallPopup ul {
    padding-left: 1em;
}

.smallPopup li,
.smallPopup p {
    font-size: 0.9em !important;
}


.red {
    background-color: #CF4D4D !important;
}

.redHeader {
    background-color: #BC0404;
}

a.thickbox {
    text-decoration: none !important;
}

#cboxTitle {
    display: none;
}

/*Tooltips*/

/*Tooltip colours*/

.ui-tooltip-default .ui-tooltip-content {
    color: White !important;
    background-color: #2276EC;
    border-color: #2276EC;
}

.ui-tooltip-glossary .ui-tooltip-content {
    font-weight: normal;
    color: white;
    background-color: #BA0000 !important;
    border-color: #BA0000 !important;
}

.ui-tooltip-glossary p {
    padding-bottom: 10px !important;
}

/*Modal Default tooltip*/

.ui-tooltip-modal .ui-tooltip-titlebar {
    background-color: #BF0100 !important;
    border-color: #BF0100 !important;
    color: White !important;
    font-size: 2em;
    line-height: 1em;
    padding: 10px 35px 10px 10px;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.ui-tooltip-modal .ui-tooltip-content {
    background-color: #fff !important;
    border-color: #BF0100 !important;
    -moz-border-radius-topleft: 0 !important;
    -moz-border-radius-topright: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    color: #333 !important;
    font-weight: normal;
}

.ui-tooltip-modal .ui-tooltip-titlebar .ui-state-default {
    right: 10px;
}

.ui-tooltip-modal .ui-tooltip-content .guidanceLink {
    margin: 0 0 10px 0;
}

/* 19 MEDIA VIEWER ------------------------------------------------ */

/*Career Details media viewer*/

div.mediaViewer {
    width: 468px;
    height: 235px;
    background: url(../images/mediaViewer.png) no-repeat;
    padding: 25px 48px 40px;
}

    div.mediaViewer.mediaVideo {
        height: 275px;
        background-image: url(../images/mediaViewerVideo.png);
    }

    div.mediaViewer div.showPhoto {
        background-color: White;
        border: 3px solid white;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 280px;
        height: 210px;
    }

    div.mediaViewer #slider {
        width: 474px !important;
        height: 210px !important;
    }

/* Nivoslider styles */

.mediaViewer .nivoSlider {
    background: #fff url(../images/nivo-loading.gif) no-repeat 50% 50%;
    width: 515px;
    height: 280px;
}

    .mediaViewer .nivoSlider img {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        border: 5px solid white !important;
    }

    .mediaViewer .nivoSlider a {
        border: 0;
        display: block;
    }

.mediaViewer .nivo-controlNav {
    position: absolute;
    left: 10%;
    bottom: -35px;
}

    .mediaViewer .nivo-controlNav a {
        display: block;
        width: 22px;
        height: 22px;
        background: url(../images/nivo-bullets.png) no-repeat;
        text-indent: -9999px;
        border: 0;
        margin-right: 3px;
        float: left;
    }

        .mediaViewer .nivo-controlNav a.active {
            background-position: 0 -22px;
        }

.mediaViewer .nivo-directionNav a {
    display: block;
    width: 25px;
    height: 200px;
    background: url(../images/nivo-arrows2.png) no-repeat 0 50%;
    text-indent: -9999px;
    border: 0;
    top: 0px;
}

.mediaViewer a.nivo-nextNav {
    background-position: 100% 50%;
    right: -42px;
    padding-right: 20px;
}

.mediaViewer a.nivo-prevNav {
    left: -47px;
    padding-left: 20px;
}

.mediaViewer .nivo-caption {
    background-color: white;
    left: 305px;
    width: 160px;
    height: 210px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

    .mediaViewer .nivo-caption p {
        color: black;
        font-size: 0.9em;
        padding: 15px;
        font-weight: bold;
    }

    .mediaViewer .nivo-caption a {
        color: #fff;
        border-bottom: 1px dotted #fff;
    }

        .mediaViewer .nivo-caption a:hover {
            color: #fff;
        }

div.photo p {
    padding: 10px 0 0;
    min-height: 60px;
}

/*Video Viewer*/

div.videoViewer {
    width: 508px;
    height: 280px;
    padding: 20px 8px 45px 48px;
    background: url(../images/mediaViewerVideo.png) top left no-repeat;
}

div.videoPlayList {
    width: 100px;
    padding: 10px;
    height: 248px;
    overflow: auto;
    float: left;
    background-color: #111;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border: 1px solid #111;
    margin-left: -5px;
}

    div.videoPlayList ul {
        overflow: hidden;
    }

    div.videoPlayList li {
        border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border: 1px solid #7B879C;
        background-color: White;
        margin: 0 0 10px;
        padding: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
        text-align: center;
    }

        div.videoPlayList li:hover {
            background-color: #E4E6EA;
        }

    div.videoPlayList a {
        font-size: 0.75em;
    }

        div.videoPlayList a:hover {
            text-decoration: none;
        }

        div.videoPlayList a span {
            display: block;
        }

/* 20 CAREER DETAILS ------------------------------------------------ */

/* Career Details*/

div.pageTitleBlock {
    width: 100%;
    height: 120px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #B3B7BE;
    background: #E6E9EE url(../images/grads.png) 0px -1400px repeat-x;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    margin: 25px 0;
}

.library div.pageTitleBlock,
.information div.pageTitleBlock {
    height: auto;
}

div.pageTitleBlock h2 {
    color: #333333;
    margin: 0;
    padding: 10px 20px 20px 20px;
    text-shadow: 0 1px 1px #ffffff;
    height: 46px;
}

.pageTitleBlock #utilityControlBar {
    margin: -65px 20px 0 0;
    float: right;
}

    .pageTitleBlock #utilityControlBar a.addToFavourite span {
        background: url("../images/buttonIcons.png") -10px -1060px no-repeat;
    }

    .pageTitleBlock #utilityControlBar a.addToFavourite.addedToActionPlan span {
        background: url("../images/buttonIcons.png") -10px -1160px no-repeat;
    }

.bookView {
    padding: 10px !important;
    font-size: 0.8em;
    line-height: 1.1em;
}

.bookViewPage > p,
.bookViewPage div p,
.bookViewPage li {
    font-size: 1em;
    line-height: 1.3em !important;
}

.bookViewPage > p,
.bookViewPage div p,
.bookViewPage ul {
    padding-bottom: 0.5em;
}

.bookViewPage h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    font-weight: normal;
    color: #7B879C;
}

.bookViewPage li {
    list-style: disc inside none;
}

.bookViewPage .filters {
    margin-bottom: 1em;
}

.aboutMe .bookViewPage h3,
.aboutMe div.pageTitleBlock li.selected a,
.aboutMe .sideNav a:hover {
    color: #47899D;
}

.aboutMe .sideNav li.selected {
    background-position: right -98px;
}

ul.altTitleList li {
    list-style: disc inside;
}

div.crciIcons {
    display: inline;
}

    div.crciIcons img {
        vertical-align: middle;
    }


/*Career details side nav*/
div.sideNav {
    float: right;
    margin: 0 -38px 100px 20px;
}

.sideNav li {
    list-style: none inside none;
    width: 250px;
    padding: 5px 0 0 0;
    margin-bottom: 2px;
    background: url(../images/careerDetailsSectionTab.png) -288px top no-repeat;
}

    .sideNav li a {
        display: block;
        font-size: 0.95em;
        text-decoration: none;
        color: #7F8693;
        text-align: right;
        font-weight: bold;
        min-height: 30px;
        line-height: 28px;
        padding: 0 30px 5px 5px;
        background: url(../images/careerDetailsSectionTab.png) -288px bottom no-repeat;
    }

.sideNav a:hover {
    color: #68236A;
}

.sideNav li.selected {
    background: url(../images/careerDetailsSectionTab.png) 0 top no-repeat;
    padding: 5px 0 0 0;
    margin-right: 0;
}

    .sideNav li.selected a {
        color: White;
        text-shadow: 0 -1px 0 #111111;
        cursor: default;
        background: url(../images/careerDetailsSectionTab.png) 0 bottom no-repeat;
    }

        .sideNav li.selected a:hover {
            color: White !important;
        }

/*Contacts list*/
ul#contacts > li,
ul#resources > li {
    list-style: disc outside !important;
    margin-left: 1em;
}

ul#contacts ul,
ul#resources ul {
    padding: 0;
    margin: 0;
}

    ul#contacts ul li,
    ul#resources ul li {
        list-style: none outside none;
    }


/* 21 HE SEARCH SECTION ------------------------------------------------ */

/*HE Article List*/
.hesearch h2, #courselist h2 {
    font-weight: normal;
    color: #7B879C;
    padding-bottom: 15px !important;
}

.hesearch ul li h3,
.hesearch ul li h4 {
    font-weight: bold;
    font-size: 1em;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

    .hesearch ul li h3 a, .hesearch ul li h4 a, .institutionTitle a {
        color: #333333;
    }

    .hesearch ul li h3 a, .hesearch ul li h4 a, .institutionTitle a, ul.heArticleList a.careerArticleLink {
        text-decoration: none;
    }

        .hesearch ul li h3 a:hover, .hesearch ul li h4 a:hover, .institutionTitle a:hover, ul.heArticleList a.careerArticleLink:hover {
            text-decoration: underline;
        }

.hesearch .filters, #courselist .filters {
    margin-bottom: 30px;
}

    #courselist .filters ul {
        padding-bottom: 0;
    }

ul.heArticleList {
    border: none;
}

    ul.heArticleList .careerArticleLink {
        background: none;
        color: #914094;
        font-size: 1em;
        padding-right: 5px !important;
    }

    ul.heArticleList li {
        background: white none;
        border: none;
        padding: 10px 10px 0 10px;
        min-height: 35px;
    }

    ul.heArticleList li ul li {
        padding-left: 20px;
    }

    ul.heArticleList > li {
        font-size: 0.95em;
    }

    ul.heArticleList li ul {
        margin: 0 -10px;
    }

    ul.heArticleList li:nth-child(odd) {
        background: #F2F2F2 none;
    }

    ul.heArticleList li p {
        margin: 0;
        float: left;
        width: 75%;
        padding: 0;
    }

        ul.heArticleList li p.institutionTitle {
            clear: left;
            float: none;
            padding-top: 2px;
        }

p.sortby {
    text-align: right;
    margin: -45px 0 10px 0;
    padding: 0 !important;
}

    p.sortby label {
        font-size: 0.9em;
        color: #7B879C;
    }

    p.sortby select {
        margin-left: 10px;
    }

.heArticleList div.statusIcons {
    margin-top: -7px;
}

.jacs {
    float: left;
}

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

.parentCategorised li {
    list-style: none outside none;
}

.parentCategorised ul.heArticleList .careerArticleLink {
    font-size: 1em;
    font-weight: normal;
}

.heArticleList a.addToFavourite {
    display: block;
    float: right;
    /*margin-top: -5px;*/
}

.parentCategorised h4 {
    padding: 20px 10px !important;
    margin: -10px -10px 0 !important;
    background-color: White !important;
}

.popupContent ul#contactdetails li {
    font-weight: bold;
    padding-bottom: 10px;
}

    .popupContent ul#contactdetails li em {
        display: block;
        padding: 3px 0;
        font-style: normal;
        font-weight: normal;
    }

/*Show UCAS Institution Popup*/

.institutionAddress a:hover {
    text-decoration: none;
}

/*HE Courses in careers*/

.heCourses h3 {
    background: url("../images/buttonIcons.png") no-repeat scroll -10px -1305px #7C879B;
    border: 1px solid #7C879B;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.3em;
    padding: 8px 30px;
}

/*------------------ END OF CSS -------------------------*/