/*IWP Product specific stylesheet to customise look of common stylesheet*/
/*All CSS in this file must be product specific only.*/
/*Copyright 2011. CASCAiD Ltd.  All Rghts Reserved.*/


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

/*  01 General Configuration
    02 Colours
    03 Structural Divisions
    04 Menu Systems
    05 Content
    06 Guidance and Feedback
    07 Tooltips and Popups
    08 Utilities
    09 Question and Answer Sections
    10 Login and Registration
    11 Media Viewer
    12 Action Plan



/* 01 GENERAL CONFIGURATION ------------------------------ */
body {
    background-color: transparent;
    color: #333;
    overflow-x: hidden;
}

    body.popupBody {
        background-color: White;
    }

    .selectedJacs a {
    font-weight: bold;
}

@font-face {
    font-family: Dax;
    src: url("../SharedContent/fonts/DaxWeb.eot");
    src: url("../SharedContent/fonts/DaxWeb.eot") format("eot"), url("../SharedContent/fonts/DaxWeb.woff") format("woff");
}

h1,
h2 {
    font-family: Dax, Helvetica, Verdana, Sans-Serif;
}

button {
    font-family: Helvetica, Verdana, Sans-Serif !important;
}

/* 02 COLOURS --------------------------------------------------- */

ul.tabbedNavigation li.selected a,
.bookViewPage h3,
ul#contacts a,
div.userWorkflowChooser a,
div.subnavPanel p,
div.suitableForYouSections h3,
.questionset p span,
.careerArticleLink,
ul.heArticleList .careerArticleLink,
.glossary,
.hesearch h2,
#courselist h2,
h2.caseStudyTitle,
p.sortby label,
.sideNav a:hover,
.institutionAddress a,
ul.configGuidancePanel li a,
#notes h2,
div.buyAd a,
a.moreArticlesButton {
    color: #BA0000;
}

ul.subnav li.current,
ul.subnav li:hover,
div.suitableForYouSections a.largeTextButton:hover,
span.filtervalue a,
a.largeTextButton:hover {
    background-color: #BA0000;
}

ul.subnav li.current,
ul.subnav li:hover,
.glossary,
div.userWorkflowChooser,
div.loginPanel {
    border-color: #BA0000;
}



/* 03 STRUCTURAL DIVISIONS --------------------------------------------- */

#wrapper {
    background: url(../images/wrapperBg.png) top left repeat-x;
}

#container.login #content,
#container.welcome #content {
    background: white url(../images/welcomeBg.jpg) bottom center no-repeat;
    width: 900px;
    min-height: 460px;
}

#header {
    border-bottom: 1px solid #CE3F3C;
    height: 83px;
}

#headingBar {
    height: 50px;
    padding: 0 30px 0 0;
    margin: -50px -30px 0;
    background: url(../images/contentH1.png) top left repeat-x;
}

#content {
    float: left;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    width: 810px;
    box-shadow: 0 0 5px #fff;
    margin-top: 50px;
    min-height: 500px;
}

    #content h1 {
        font-size: 1.8em;
        line-height: 1.6em;
        font-weight: normal;
        color: white;
        float: right;
    }

    #content h2 {
        padding-bottom: 1em;
    }

.welcome #content {
    width: 900px;
}

.mySteps #content {
    background-color: #F7F7F7;
}

    .mySteps #content h1 {
        margin-bottom: 0;
    }

.aboutMe #content {
    background-color: #F7F7F7;
}

    .aboutMe #content h1 {
        margin-bottom: 0;
    }

.exploreFuture #content h3 {
    clear: left;
}


/*Footer*/
#footer {
    color: grey;
    width: auto;
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
}

.copyright {
    float: left;
    margin-left: 90px;
}

.sponsorLogos {
    float: right;
}

    .sponsorLogos img {
        margin-left: 10px;
    }


/* 04 MENU SYSTEMS ---------------------------------------------*/

/*Homepage workflow menu*/

div.userWorkflowChooser,
div.loginPanel {
    float: right;
    background-color: White;
    -moz-border-radius: 0 0 12px 12px;
    border-radius: 0 0 12px 12px;
    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1), inset 0 3px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 1px rgba(255,255,255,1), inset 0 3px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 1px rgba(255,255,255,1), inset 0 3px 2px rgba(0,0,0,.2);
    border-width: 2px;
    border-style: solid;
    border-top: none;
    padding: 0 0 20px;
}

div.userWorkflowChooser {
    width: 460px;
}

    div.userWorkflowChooser h2 {
        margin: 0;
        padding: 20px 10px 20px 20px;
    }

    div.userWorkflowChooser > div > ul > li {
        border-top: 1px solid #E0E0E0;
        min-height: 25px;
        float: none;
        list-style-position: outside;
        padding: 0 10px 0 20px;
    }

        div.userWorkflowChooser > div > ul > li:hover {
            background: #E5E5E5 url("../SharedContent/images/grads.png") repeat-x scroll 0 -98px;
        }

    div.userWorkflowChooser a {
        padding: 5px 40px 5px 0;
        margin: 0;
        display: block;
        font-size: 1.1em;
        line-height: 2em;
        font-weight: normal;
    }

/*Home navigation Level 1*/

#navMenu {
    margin-top: 55px;
}

    #navMenu li {
        padding-bottom: 6px;
    }

    #navMenu > ul > li > a > span {
        background: url(../images/menuIcons.png) 0 0 no-repeat;
        height: 20px;
        padding-top: 60px;
    }

    #navMenu > ul > li > a {
        background-color: white;
        border: 2px solid white;
        color: #8A93A4;
        font-size: 0.85em;
        text-align: center;
        -webkit-box-shadow: 0 0 5px rgba(255,255,255,.7);
        -moz-box-shadow: 0 0 5px rgba(255,255,255,.7);
        box-shadow: 0 0 5px rgba(255,255,255,.7);
        margin: 5px 0 0 6px;
    }

    #navMenu .mySteps span {
        background-position: 0 0 !important;
    }

    #navMenu .aboutMe span {
        background-position: 0 -100px !important;
    }

    #navMenu .exploreFuture span {
        background-position: 0 -200px !important;
    }

    #navMenu .actionPlan span {
        background-position: 0 -300px !important;
    }

    #navMenu .jobs span {
        background-position: 0 -400px !important;
    }

    #navMenu .information span {
        background-position: 0 -500px !important;
    }

    #navMenu .hesearch span {
        background-position: 0 -600px !important;
    }

    #navMenu .jobs span {
        background-position: 0 -400px !important;
    }

    #navMenu .adviserComments span {
        background-position: 0 -700px !important;
    }

    #navMenu li.mySteps {
        margin-bottom: 20px;
    }

.mySteps #navMenu li.mySteps a,
.aboutMe #navMenu li.aboutMe a,
.exploreFuture #navMenu li.exploreFuture a,
.actionPlan #navMenu li.actionPlan a,
.jobs #navMenu li.jobs a,
.information #navMenu li.information a,
.hesearch #navMenu li.hesearch a {
    background-color: #8A93A4;
    border-color: #8A93A4;
    color: white;
}

.welcome #navMenu {
    display: none;
}


/*Home navigation Level 2*/

div.subnavPanel {
    margin: 0 -30px 15px;
    padding: 11px 30px;
    background: White url("../SharedContent/images/grads.png") repeat-x scroll 0 -1840px;
    min-height: 80px;
    position: relative;
}

    div.subnavPanel p {
        font-weight: bold;
    }

ul.subnav {
    min-height: 20px;
    padding: 10px 0;
}

    ul.subnav li {
        float: left;
        height: 28px;
        padding: 0;
        border: 1px solid #7F8693;
        background: #CDCFD4 url("../SharedContent/images/grads.png") repeat-x scroll 0 -1802px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin: 0 5px 5px 0;
        font-size: 0.9em;
        color: #333333;
        line-height: 28px;
        text-align: center;
        padding: 0;
    }

        ul.subnav li a {
            padding: 0 5px;
            text-decoration: none;
            height: 28px;
            display: block;
            line-height: 28px;
            color: #333333;
        }

        ul.subnav li.complete {
            background-color: #818895;
            color: White;
            font-weight: bold;
            border-color: #818895;
        }

        ul.subnav li.current {
            color: White !important;
            font-weight: bold;
        }

            ul.subnav li.current a,
            ul.subnav li:hover a,
            ul.subnav li:hover span {
                color: White;
            }

#sectionsToReviewButtons {
    float: right;
    top: 10px;
    right: 10px;
    position: absolute;
}

    #sectionsToReviewButtons p {
        text-align: right;
        padding-right: 10px;
        color: #219600;
    }

    #sectionsToReviewButtons ul.subnav li:hover,
    #sectionsToReviewButtons ul.subnav li.current {
        background-color: #219600;
        border-color: #219600;
    }

.aboutMeComplete .completeContent p {
    padding-bottom: 1em;
}

.aboutMeComplete .completeContent a {
    float: left;
}

/*My steps navigation*/

ul.workflowprogress li {
    border: none;
    background-image: url("../images/myStepsNavigation.png");
    background-position: left -160px;
    background-repeat: no-repeat;
    background-color: #E8E9EA;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0 0 0 11px;
    height: 30px;
}

    ul.workflowprogress li span {
        display: block;
        background-image: url("../images/myStepsNavigation.png");
        background-position: right -110px;
        background-repeat: no-repeat;
        padding: 0 20px 0 10px;
        height: 30px;
    }

    ul.workflowprogress li:first-child {
        background-position: left -110px;
    }

        ul.workflowprogress li:first-child span {
            padding-left: 0;
        }

    ul.workflowprogress li:last-child span {
        background-position: right -160px;
        padding-right: 10px;
    }

    ul.workflowprogress li.current {
        background-color: #219618;
        background-position: left -60px;
    }

        ul.workflowprogress li.current:first-child {
            background-position: left -10px;
        }

        ul.workflowprogress li.current span {
            background-position: right -10px;
        }


/*Utility Control Bar*/

#utilityControlBar {
    padding: 6px 0 4px 20px;
    height: 38px;
    z-index: 9;
    position: relative;
}

/*Toggle Buttons*/
div.filters.toggleButtons {
    float: left;
    padding: 0 !important;
    border: none;
    margin-top: 7px;
}

    div.filters.toggleButtons li {
        min-height: 24px;
    }

.toggleButtons li {
    background: none !important;
    border: none !important;
    float: left;
    height: 24px !important;
}

.toggleButtons a {
    padding: 3px 10px !important;
    font-size: 0.9em !important;
    background: url("../SharedContent/images/grads.png") repeat-x scroll 0 -110px #E5E5E5 !important;
    min-width: 100px !important;
}

    .toggleButtons a.selected {
        background-color: #7C879B !important;
    }

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

/*Tabbed navigation*/

ul.tabbedNavigation li {
    margin-right: 6px;
}

    ul.tabbedNavigation li a {
        background-color: #7C879B;
        background-position: 0 -465px;
        padding: 0 8px;
    }

.leftColumn .editButton {
    margin-top: 0;
    padding: 10px;
}

.planner {
    padding-top: 40px;
}

    .planner .gapAnalysis {
        margin-top: -30px;
    }

/*Error messages*/
.swLinkError {
    padding: 10px;
    margin: 10px;
}

.swLinkDetails {
    padding: 10px;
    margin: 10px;
}

/* 05 CONTENT SECTIONS ---------------------------------------------------*/

/*Content Section*/

ul.tableView,
.sectionMenu ul,
div.filterMenu,
.loginBox {
    border-color: #A6A6A6;
}

ul.tableView {
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #D8DBDF;
}

    ul.tableView li:first-child {
        -moz-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
    }

    ul.tableView li:last-child {
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
    }

    ul.tableView > li {
        background: #F2F4F7 url("../SharedContent/images/grads.png") repeat-x 0 -1585px !important;
        min-height: 60px;
        padding: 10px;
        position: relative;
        padding-bottom: 17px;
    }

.askAspects ul.tableView > li,
.askSkills ul.tableView > li,
.hesearch ul.tableView > li,
.reviewAspects ul.tableView > li,
.reviewSkills ul.tableView > li {
    min-height: 30px;
    height: auto;
}

.asklevels ul.tableView > li,
.askhealth ul.tableView > li,
.strain ul.tableView > li,
.popupContent ul.tableView > li {
    min-height: 20px;
}

ul.aspectListView li {
    position: relative;
    padding-left: 10px;
}

    ul.aspectListView li select {
        float: none;
        position: absolute;
        right: 10px;
        top: 10px;
    }

.suitableForYouSections ul.aspectListView li {
    width: 500px;
    padding-right: 220px;
}

    .suitableForYouSections ul.aspectListView li span {
        float: none;
        display: inline;
        width: 490px;
        margin: 0;
        line-height: 1em;
    }

ul.heArticleList {
    -moz-border-radius: 0 0 10px 10px;
    -ms-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;    
    background-image: none;
}

ul.heArticleList li:first-child {
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

ul.heArticleList li:nth-child(2n+1),
    ul.genArticleList li:nth-child(2n+1) {
        background: none !important;
    }

div.comment ul.list1 li {
    background: none !important;
}

ul.tableView > li {
    border-left: 1px solid #D8DBDF;
    border-right: 1px solid #D8DBDF;
}

ul.genArticleList {
    margin-top: 30px;
}

/*Types of link*/


.careerArticleLink {
    font-weight: bold;
    margin-left: 10px;
}

.hesearch .careerArticleLink {
    margin-left: 0;
}

.planner .careerArticleLink {
    font-weight: normal;
    color: #191919 !important;
}

.miniCareerList p.linkButtons {
    margin-left: -0.8em !important;
    margin-top: 1em;
}

.mediaViewerLink {
    border: 5px solid #7F8693;
    max-width: 80px;
    max-height: 60px;
    margin-right: 0;
}

a.showCommentLink {
    color: #A0A0A0;
}

.mediaViewerLink:hover {
    cursor: pointer !important;
}

.mediaViewerLink img {
    max-width: 80px;
    max-height: 60px;
}

div.actionButtons {
    margin: 3px 0 0;
    display: inline;
    padding: 3px 1px;
}

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

div.statusIcons {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: 0;
}

ul.genArticleList .careerArticleLink {
    color: #758195 !important;
}

ul.heArticleList li {
    position: relative;
}

/*Career article lists*/
ul.careerArticleList p {
    line-height: normal;
    min-height: 60px;
    padding: 10px 10px 0;
}

.altTitleCaption {
    margin-left: 10px;
    line-height: 1.5em;
}

div.matchlistentry {
    position: relative;
}

div.matchlistimage {
    float: left;
}

    div.matchlistimage .mediaViewerLink {
        float: none !important;
    }

div.matchlistcareer {
    float: left;
}

ul.careerArticleList {
    margin-top: 10px;
}

div.toggleButtons {
    height: 24px;
}

    div.toggleButtons ul {
        margin: 0 25%;
    }

/*Compare Careers*/

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

    p.compareSection.statusIcons span {
        margin-top: -15px;
    }

/* Career Details*/

div.pageTitleBlock h2 a span span {
    display: inline !important;
}

div.pageTitleBlock h2 .careerArticleLink {
    background-position: right -5px !important;
}

div.bookViewPage,
div.altTitleList {
    padding: 0 20px;
}

.tooltipPopupContent div.bookViewPage {
    padding: 0;
}

ul#contacts a {
    margin-left: 10px;
}


.popupContent ul.list1 {
    margin-left: 1em;
}

    .popupContent ul.list1 li {
        padding-left: 0.5em;
    }

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

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

.hesearch span.columnhead1, #courselist span.columnhead1 {
    width: 545px;
}

.statusIcons p div {
    display: inline;
}

.sideNav li {
    width: 260px;
}

    /*Side nav*/
    .sideNav li,
    .sideNav li a,
    .sideNav li.selected,
    .sideNav li.selected a {
        background-image: url(../images/careerDetailsSectionTab.png);
    }


/*Case studies*/
#content h2.caseStudyTitle {
    padding: 0 20px;
}

h2.caseStudyTitle {
    font-family: helvetica, Arial, Sans-Serif !important;
    font-weight: normal;
}

.caseStudy div.photo,
#caseStudy div.photo {
    float: right;
}

.caseStudy h3 {
    font-size: 1.3em;
    color: Black !important;
}

.popupContent #caseStudy h2,
.popupContent #caseStudy h3 {
    border: none;
}

.popupContent #caseStudy h3 {
    color: Black !important;
    font-size: 1.3em;
}

.popupContent #caseStudy div.bookViewPage {
    padding: 0;
}

/*Case Study Thumb View*/

div.thumbView {
    min-height: 90px;
    border: 1px solid #B3B7BE;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    -ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    -moz-border-radius: 0 0 12px 12px;
    -webkit-border-radius: 0 0 12px 12px;
    -ms-border-radius: 0 0 12px 12px;
    border-radius: 0 0 12px 12px;
    margin-top: -26px;
    width: 100%;
}

.popupContent div.thumbView {
    width: 800px;
}

.tooltipPopupContent div.thumbView {
    width: 613px;
}

.caseStudy .pageTitleBlock {
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
}

div.thumbView h2 {
    padding: 1em 1em 0 1em !important;
    margin: 0;
}

/* Used for on Real Lifes tab when there are mutliple casestudies for a career */
ul.thumbView li {
    float: right;
    display: block;
    width: 70px;
    height: 70px;
    text-align: center;
    background: url("../SharedContent/images/grads.png") repeat-x scroll 0 -1400px #FCFCFC;
    border: 1px solid #B3B7BE;
    border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    margin: 5px;
    padding: 10px;
    margin: 10px;
}

    ul.thumbView li img {
        width: 70px;
    }

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

    ul.thumbView li:hover {
        background-color: #E9EBF0;
        background-image: none;
    }

        ul.thumbView li:hover a {
            text-decoration: underline;
        }

/*Bar chart*/
div.barchart {
    background: White url(../images/barchartBg.png) repeat -3px 3px;
    border: 1px solid #A6A6A6;
    padding: 10px 20px 20px;
    width: auto;
}

/* Alt Title Captions */

div.altTitleCaption {
    float: left;
    font-size: 0.7em;
    margin: -22px 100px 0px 400px;
}

/*HE Courses*/
.bookViewPage.heCourses h3 {
    color: White !important;
}

/* 06 GUIDANCE AND FEEDBACK SECTIONS ---------------------------------------------------*/

/*Guidance panel*/

#guidance {
    padding: 0;
    display: none;
}

    #guidance div.guidanceBubble {
        border-color: #0946B7;
        background-color: #2B79E9;
        color: white;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-position: 10px -1190px;
        padding-bottom: 40px;
    }

div.guidanceBubble {
    position: relative;
    z-index: 1;
}

#guidance a.guidanceButton {
    margin-right: -10px;
    background: url("../SharedContent/images/buttonIcons.png") no-repeat scroll -8px -2508px;
    width: 34px;
    height: 34px;
}

    #guidance a.guidanceButton span {
        display: none;
    }

a.guidanceButton span.selected,
a.notesButton span.selected {
    background-color: #ccc;
    background-image: url("../SharedContent/images/buttonIcons.png");
    background-repeat: no-repeat;
    background-position: -9px -2509px !important;
}

a.notesButton span.selected {
    background-position: -9px -2709px !important;
}

a.guidanceLink {
    color: #0946B7;
    margin-right: 50px;
}

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

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

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

        .guidanceNavigationPanel a span {
            display: none;
        }

#guidance a.guidanceButton,
a.closeNotesButton {
    display: none;
}

ul.configGuidancePanel {
    margin: 10px 30px;
}

/*Suitable for you comments*/

div.suitableForYouSections h3 {
    padding-bottom: 0.2em;
}

div.suitableForYouMainComment.skillsSection {
    border-top: 2px dotted black;
    margin-top: 0;
    padding-top: 1em;
    padding-right: 20px;
    clear: both;
}

    div.suitableForYouMainComment.skillsSection div {
        margin: 0 0 0 60px;
    }

        div.suitableForYouMainComment.skillsSection div.subcomment {
            margin-left: 0;
            padding-right: 0;
        }

    div.suitableForYouMainComment.skillsSection > span {
        margin-bottom: -70px;
    }

    div.suitableForYouMainComment.skillsSection p {
        padding-bottom: 0.2em;
    }

div.suitableForYouMainComment.strainSection div {
    margin: 0 !important;
    padding-right: 0 !important;
}

div.suitableForYouMainComment.strainSection h3 {
    font-weight: bold;
}

h3.suitableForYouMainComment .matchIcon {
    margin-top: -10px;
}

.suitableForYouSections ul.aspectListView li {
    background-color: #F2F4F7 !important;
    border-bottom: 2px solid #FFF;
    height: 26px;
}

.suitableForYouSections ul.tableView > li {
    min-height: auto;
    list-style: none;
}

.suitableForYouSections h3:hover {
    cursor: pointer;
}

.suitableForYouSections .qualLevel select {
    right: 45px;
    top: 12px;
}

div.suitableForYouSections > h3:first-of-type, div.suitableForYouSections h3.sfylevel {
    border-top: 1px dotted #333333;
    margin-top: 10px;
}

div.sfylikes h3, .skillsSection .suitableForYouSections h3 {
    font-size: 1.1em;
    border: none !important;
}

div.sfylikes, div.sfylevel, div.sfyhealth, div.sfystrain {
    padding-bottom: 20px;
}

p.suitableForYouMainComment {
    font-size: 1.1em;
}

.suitableForYouMainComment em {
    display: block;
    font-size: 0.9em;
    font-weight: normal;
    font-style: normal;
    padding-top: 5px;
}

.suitableForYouSections h4 {
    font-size: 1em;
    margin: 0.5em 0;
}

.sfylikes h4, .skillsSection h4 {
    margin-bottom: 0;
}

/* Comments */

.strain #selectOptions a.showCommentLink {
    margin-left: 10px;
}

a.showCommentLink {
    background-position: -3px -1395px !important;
    padding: 0;
    width: 24px;
    height: 24px;
    clear: both;
}

#selectOptions a.showCommentLink {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
}

/*MAtchlist error message*/

.matchlist p.validationMessage {
    padding: 20px 10px !important;
}

/*Dashboard Pages*/

div.progressPanel {
    border: 1px solid #D8DBDF;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 30px 10px 0;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}

    div.progressPanel h2 {
        font-family: Helvetica, Verdana, Arial, Sans-Serif;
    }

/*Status Icons*/
a:hover span.matchcat_1 {
    background-position: -60px 0 !important;
}
/*V Good*/
a:hover span.matchcat_2 {
    background-position: -60px -60px !important;
}
/*Good*/
a:hover span.matchcat_3 {
    background-position: -60px -120px !important;
}
/*Fair*/
a:hover span.matchcat_4 {
    background-position: -60px -180px !important;
}
/*Questionable*/
a:hover span.matchcat_5 {
    background-position: -60px -240px !important;
}
/*Poor*/
a:hover span.matchcat_6 {
    background-position: -60px -300px !important;
}
/*Talent*/
a:hover span.matchsubcat2_1 {
    background-position: -60px -360px !important;
}
/*VG Skill*/
a:hover span.matchsubcat2_2 {
    background-position: -60px -420px !important;
}
/*G Skill*/
a:hover span.matchsubcat2_3 {
    background-position: -60px -480px !important;
}
/*Fair Skill*/
a:hover span.matchsubcat2_4 {
    background-position: -60px -540px !important;
}
/*Questionable Skill*/
a:hover span.matchsubcat2_5 {
    background-position: -60px -600px !important;
}
/*Poor Skill*/


/*Help pages*/

#help_page h1 {
    padding-bottom: 30px;
}

/* 07 TOOLTIPS AND POPUPS SECTIONS ---------------------------------------------------*/

/*Tooltips*/

.ui-tooltip-default .ui-tooltip-content {
    color: White !important;
    border: 2px solid #0946B7;
    background-color: #1676EC;
}

div.ui-tooltip-titlebar {
    display: none;
}

.fullwidth {
    max-width: 1000px;
}

    .fullwidth .ui-tooltip-content {
        border-color: #7B879C;
        background-color: #7B879C;
    }

/*Popups*/
div.tooltipPopupContent {
    background-color: white;
    padding: 10px 0 10px 20px;
    min-height: 500px;
    z-index: 100000;
}

    div.tooltipPopupContent div.pageTitleBlock.smallTitle {
        width: 645px;
        margin: 10px 0 25px;
    }

        div.tooltipPopupContent div.pageTitleBlock.smallTitle h2 {
            height: 50px;
        }

/*Colorbox*/

#cboxClose {
    top: 0px;
    right: 0px;
    bottom: auto;
    width: 32px;
    height: 32px;
    background: url(../SharedContent/images/controlsLarge.png) 0 0 no-repeat !important;
    margin: 10px;
}

    #cboxClose:hover {
        background-position: 0 -32px !important;
    }

#cboxLoadedContent {
    margin-bottom: 0;
}

.popupHeader,
.editorHeader {
    background-position: 0 -13px !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

    .popupHeader h2 {
        height: 56px;
        line-height: 56px;
        padding-left: 20px;
        text-align: left;
    }

div.popupContent {
    overflow: auto !important;
    max-height: 384px;
    height: 384px;
}

#popupWrapper.openMediaPopup div.popupContent {
    overflow: auto !important;
    max-height: 504px;
    height: 504px;
    padding: 0;
}

.popupContent .validationMessage + p {
    padding-bottom: 0;
}

.popupContent fieldset p.backButton {
    margin-top: 10px;
}


/*Email form popup*/

#emailForm div {
    padding: 0 10px 10px 10px;
}

/* 08 UTILITIES ---------------------------------------------------*/

/*Filters*/

div.filters {
    margin: 20px 0 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    div.filters ul {
        border: none;
    }

    div.filters > ul > li {
        padding: 0 5px;
        border: 1px solid #ccc;
    }

        div.filters > ul > li:first-child {
            -moz-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
        }

    div.filters li.open label {
        color: #616C7D;
        font-weight: bold;
    }

span.filtervalue:hover {
    background-image: none;
}

div.filters li.lastFilter {
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

div.filterbody {
    margin-bottom: 0;
}

li.lastFilter div.filterbody {
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

div.filters li.clearFilter {
    border: none;
    background-color: transparent !important;
}

div.filters input.searchBox {
    width: 590px;
    margin-right: 10px;
}

/*Pagination*/
.pagination a {
    padding: 2px;
}

.pagination {
    float: left;
    clear: none;
    background-color: transparent;
    padding-top: 10px;
    width: 780px;
    text-align: center;
}

    .pagination span.selected {
        background-color: #7C879B;
        border-color: #666666;
        border-width: 1px;
    }

.hesearch .pagination {
    float: none;
    text-align: right;
}

.pagerBottom {
    border-top: none;
}

/*Notes*/

#notes li textarea {
    width: 740px;
}

/* 09 QUESTION AND ANSWER SECTIONS ---------------------------------------------------*/

/*Question Carousel*/
.questionset p {
    color: #333333;
    font-size: 1em;
    min-height: 80px;
    float: left;
    width: 290px;
}

    .questionset p span {
        font-size: 1.3em;
        text-shadow: 0 1px 1px #BBBBBB;
        display: block;
    }

.aboutMe ul.tableView > li {
    background-color: #fff;
}

.mySteps ul.tableView > li {
    background-color: #fff;
}

ul.buttonAnswerList li fieldset {
    margin: 0;
    box-shadow: none;
}

/*Aspect buttons */

ul.buttonAnswerList fieldset button span {
    display: block;
    color: black;
    font-weight: normal;
    height: 34px;
    padding: 5px 0;
}

ul.buttonAnswerList fieldset button:hover span {
    text-decoration: underline;
}

ul.buttonAnswerList fieldset button {
    padding: 80px 0 0 0;
    margin-left: 5px;
    text-shadow: 0 1px 1px #BBBBBB;
}

ul.buttonAnswerList fieldset button {
    background-image: url(../images/answerButtons.png);
}

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

/*Ask Strain*/

#selectOptions ul.tableView > li {
    padding: 15px !important;
}

.strain #selectOptions select,
.popupContent #selectOptions select {
    position: relative;
    right: auto;
    float: right;
    margin-right: 30px;
}

#selectOptions > p:first-child {
    padding: 16px;
    margin-top: -36px;
}


/*Progress Indicator*/

span.progressBar {
    background: #B70310 url(../SharedContent/images/grads.png) left -1280px repeat-x;
    border-color: #A3010C;
}

p.progressIndicator {
    color: #B70310;
    padding-bottom: 0;
}

/*Review Lists*/
.reviewaspects ul.aspectListView li, .reviewskills ul.aspectListView li, .popupContent .reviewaspects li {
    margin: 5px 0;
    border-bottom: none;
}



/*Select Optopns list*/
p + fieldset#selectOptions {
    margin-top: 15px;
}


/*Firefox 3 fix*/

.buttonAnswerList li > label + div {
    display: inline;
}


/* 10 LOGIN AND REGISTRATION SECTIONS ---------------------------------------------------*/

/*Login and register*/

div.loginPanel {
    width: 410px;
    float: right;
    padding: 0 30px 20px;
}

.welcome #guidance,
.login #guidance {
    margin: 0;
    width: 400px;
}

.login #guidance {
    float: left;
    background-color: transparent !important;
    padding: 0;
}

.login .guidanceNavigation {
    display: none;
}

.login #guidance a.guidanceButton {
    display: none;
}

.loginBox p.floatR {
    float: none;
    margin: 20px 0 20px 20px;
    text-align: right;
}

.loginBox li input {
    position: absolute;
    right: 0;
    left: auto;
}

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

.loginBox li img {
    top: 12px;
    left: auto;
    right: -25px;
}

.loginBox li.terms input {
    left: auto;
    left: 0;
    top: 10px;
}

.loginBox li.terms label {
    padding-left: 25px;
    display: block;
}

.login .guidanceBubble li {
    padding-bottom: 10px;
}

/*Profile Page */
.aboutMe .userDetails {
    width: 500px;
}

/*Customer terms and conditions pages*/

.manager-ts-and-cs {
    margin-top: 30px;
}

.manager-ts-and-cs-iframe-holder {
    margin: 30px 0 30px 0;
}

    .manager-ts-and-cs-iframe-holder iframe {
        width: 100%;
        height: 400px;
    }

.manager-ts-and-cs-header {
    margin: 30px 0 30px 0;
}

.manager-ts-and-cs-statement {
    width: 400px;
}

.manager-ts-and-cs-error {
    color: red;
}

.manager-ts-and-cs-next-steps li {
    padding-bottom: 20px;
}


/* 11 MEDIA VIEWER ---------------------------------------------------*/

/*Inline mediaviewer*/

div.mediaViewer,
div.videoViewer {
    background-color: #A0A9B7;
    float: left;
    margin-bottom: 20px;
}

    div.mediaViewer ul.tabbedNavigation {
        margin: -30px 0 0 0;
    }

    div.videoViewer h4 {
        color: White;
        padding-bottom: 10px;
        font-weight: normal;
        font-size: 1em;
    }

/*Media viewer*/

.popupContent .pageTitleBlock {
    width: 99%;
    margin-top: 0;
}

    .popupContent .pageTitleBlock h2 {
        border-bottom: none;
        height: 50px;
    }

    .popupContent .pageTitleBlock p.floatR {
        padding: 0;
        margin: -10px 5px 0 0;
    }

.popupContent ul.tabbedNavigation {
    padding: 0;
}

    .popupContent ul.tabbedNavigation li {
        margin-right: 0;
        padding: 0 0 0 10px;
    }

.mediaViewer .nivo-caption p {
    font-weight: normal;
}

/* 12 ACTIONPLAN SECTION ---------------------------------------------------*/

/*Action plan*/

.topCareers .planner > .sectionheader ul.careerArticleList {
    border: none !important;
}

    .topCareers .planner > .sectionheader ul.careerArticleList li {
        border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        background: url("../images/ActionPlanH3Shadow.png") no-repeat scroll right -50px #E4E6EA;
        border: 1px solid #7C879B;
        margin-bottom: 10px;
    }

.topCareers h3 {
    border-color: #BD0000;
    background-color: #F0CCCC;
    color: black;
}

.topCareers .handle {
    background-color: #BD0000 !important;
}

.gapList ul li {
    background-color: #EEF0F4;
    border-color: #7E8693;
    margin: 10px -1px;
}

.topCareers .planner > .sectionheader h3 {
    background-color: #7C879B;
    border-color: #7C879B;
    color: White;
}

.careerChoicesHeader h3 {
    background-color: #BD422D !important;
    border-color: #BD1700 !important;
}

/*Top skills*/
.topSkillsList li {
    padding: 0 30px;
}

/*Skills to improve*/
.skillsToImprove h3 {
    border-color: #7E8693;
    background-color: #EEF0F4;
    color: black;
    text-shadow: none;
}

.skillsToImprove .handle {
    background-color: #7E8693;
}

.gapList a.addToActionPlan span {
    display: none;
}

.gapList a.addedToActionPlan span {
    display: none;
}

.gapList ul li a.addToFavourite,
.gapListCareerView a.addToFavourite {
    background: url("../sharedcontent/images/buttonIcons.png") no-repeat scroll -10px -860px !important;
    width: 26px;
    height: 26px;
}

    .gapList ul li a.addedToActionPlan,
    .gapListCareerView a.addToFavourite.addedToActionPlan {
        background: url("../sharedcontent/images/buttonIcons.png") no-repeat scroll -10px -910px !important;
    }

/*Other favourites*/
.topCourses h3 {
    background-color: #8A3A8E;
    border-color: #59195B;
    color: white;
}

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

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

.topCourses .planner .section .entryitem .handle {
    background-position: -8px -1440px;
}

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

.topCourses .entryitem:first-child .section .entryitem h3 {
    background-color: #F2D1CB;
    border-color: #E7A396;
    height: 40px;
    line-height: 40px;
    padding: 0 !important;
}

.topCourses .entryitem:first-child .section .entryitem .handle {
    height: 48px;
    background-position: -8px -1450px;
}

.topCourses .entryitem:first-child .section .entryitem p.sectionexpander {
    height: 40px;
}

.topCourses .entryitem:last-child .section .entryitem h3 {
    height: 40px;
    line-height: 40px;
    padding: 0 !important;
}

.topCourses .entryitem:last-child .section .entryitem p.sectionexpander {
    height: 40px;
}

.topCourses .planner .entryitem:last-child .section .entryitem .handle {
    background-position: -8px -1450px;
    height: 48px;
}

.topCourses .planner .entryitem:first-child .section div.delete,
.topCourses .planner .entryitem:last-child .section div.delete {
    margin-top: 12px;
}

.topSkills h3 {
    background-color: #BD422D;
    border-color: #BD1700;
}

.planner table tbody.ui-sortable {
    width: 829px;
}

.planner.notes td.apTitle {
    width: 150px;
}

.topSkills .planner li a {
    cursor: default;
}

.subjects .planner span.handle {
    background-position: -6px -955px;
}

.adviser-dialogue-message-waiting {
    background-color: mistyrose;
}

.adviser-dialogue-input {
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
}

.adviser-dialogue {
    margin-top: 50px;
}

.adviser-dialogue-content {
    margin: 30px;
}

.adviser-dialogue-date {
    margin: 30px 30px 0 0;
    text-align: right;
    font-weight: bold;
}

.adviser-dialogue li {
    padding: 20px;
}

.adviser-dialogue-you-sent {
    background: #EEEEEE;
}

.adviser-dialogue-they-sent {
    background: #DDDDDD;
}

.adviser-dialogue-new {
    background: mistyrose;
}

/*html parsing bug fix*/
ul#contacts ol li, ul#resources ol li {
    list-style: none outside none !important;
}

ul#contacts ol {
    padding: 0 0 1em 0;
}


/* Not found page */
.not-found-message, .error-page-message {
    padding: 10px;
}

    .not-found-message h1, .error-page-message h1 {
        font-size: 1.6em !important;
        line-height: 1em !important;
        font-weight: normal !important;
        color: black !important;
        float: none !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .not-found-message p, .error-page-message p {
        font-size: 1em;
    }


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