/*
 * Active style sheet for Mozilla (or similar) generated at 26/06/2025 05:06:36.
 */

/* This section of the stylesheet contains generic styles used by all browsers */

/* Font Awesome Setup
 * -------------------------- */
 /* Have used v 3.2.1 because of it's support for IE6 & IE7! */
@font-face {
  font-family: 'FontAwesome';
  src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Nunito Sans - replaces Proxima Nova */
@font-face {
	font-family: 'Nunito Sans';
	src: url('../Font/NunitoSans-BoldItalic.eot');
	src: url('../Font/NunitoSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../Font/NunitoSans-BoldItalic.woff2') format('woff2'), url('../Font/NunitoSans-BoldItalic.woff') format('woff'), url('../Font/NunitoSans-BoldItalic.svg#NunitoSans-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../Font/NunitoSans-Bold.eot');
	src: url('../Font/NunitoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../Font/NunitoSans-Bold.woff2') format('woff2'), url('../Font/NunitoSans-Bold.woff') format('woff'), url('../Font/NunitoSans-Bold.svg#NunitoSans-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../Font/NunitoSans-Italic.eot');
	src: url('../Font/NunitoSans-Italic.eot?#iefix') format('embedded-opentype'), url('../Font/NunitoSans-Italic.woff2') format('woff2'), url('../Font/NunitoSans-Italic.woff') format('woff'), url('../Font/NunitoSans-Italic.svg#NunitoSans-Italic') format('svg');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../Font/NunitoSans-Regular.eot');
	src: url('../Font/NunitoSans-Regular.eot?#iefix') format('embedded-opentype'), url('../Font/NunitoSans-Regular.woff2') format('woff2'), url('../Font/NunitoSans-Regular.woff') format('woff'), url('../Font/NunitoSans-Regular.svg#NunitoSans-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Resize and position the trademark symbol */
span.tm { font-size: 80%; position: relative; top: -7px; }

body {font-family: 'Nunito Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 100%;}
textarea {color: #333333;}

/* GENERAL STYLES
-------------------------------------------------------------------------------------------- */
a {
	color: #0942B6;
	text-decoration: none;
}

 
a:hover 
{
	color: #D98707;
	text-decoration: none;
}

a img {
	border: none;
}

a.backlink
{
	font-size: 80%;
	background: url(../gfx/2arrowsleft.gif) no-repeat 0 50%;
	padding: 0 0 0 17px; 
}

p, h1, h2, h3, h4, h5, ul {
	margin: 0 0 0.75em 0;
}



.clearboth { clear: both; }

p {
    color: #333333;
}
h1, h2, h3, h4, h5 {
   color: #0D174B;
}	
h1 {
	font-size:100%;
}
h2 {
	font-size:130%;
}
h3 {
	font-size:110%;
}
h4, h5 {
	font-size:100%;
}

/* Adds a blue box round the content */
.bluebox {
	border: 1px solid #B1D6FA;
	clear: both;
	margin: 0 0 10px 0;
	padding: 10px;
}

input.button, input.smallbutton, input.largebutton, input.deletebutton, input.disabledbutton, a.mockbutton, input.testlinkbutton
{
	font-weight: bold;
	color: white; 
	background-color: #293380;
	border: 3px double white;
	padding: 2px;
	cursor: pointer;
	font-size: 90%;
	-webkit-appearance: none; /* Stop iOS trying to display buttons using the native style. */
	-webkit-border-radius: 0; /* Get rid of the rounded corners on iOS. */
}

a.mockbutton, a.deletehunter_mockbutton {padding: 4px; font-family: Verdana, Arial, Helvetica, Sans-Serif;}

a.deletehunter_mockbutton 
{
	background-color: #FF6600;
	font-size: 70%;
	margin-bottom: 5px;
	padding: 2px;
	color: white; 
	font-weight: normal;
	}
/* Also see styles in EveryoneScreen.css for mockbuttons */

input.button:hover, input.smallbutton:hover, input.largebutton:hover, input.deletebutton:hover, input.disabledbutton:hover, 
a.mockbutton:hover, input.testlinkbutton:hover, a.deletehunter_mockbutton:hover
{
	background-color: #FFCA08;
	border: 3px double white;
	color: #293380; 
}



input.largebutton
{
	width: 10em;
}

input.smallbutton, input.disabledsmallbutton, input.deletebutton
{	margin-top: .5em;
	width: 5em;
}

input.disabledbutton, input.disabledsmallbutton
{
	color: #CCCCCC; 
	background-color: #F4F4F4;
}

input.deletebutton 
{
	background-color: #CC0000;
	border: 3px double white;
}

input.testlinkbutton 
{
	background-color: #006666;
	padding: 1px;
	font-size: 80%;
}

hr { border: 1px solid #c7e2fb; }

/*Style for messages about being in demo mode*/
.demobackground {padding: 2px 4px 2px 4px;	border: 1px solid #c7e2fb; background-color: #FFCC66;}
div.demobackground {margin-bottom: 1em;}
div.demobackground ul {margin-left: 2em; list-style-type:disc; }



/*Style for messages about settings having been saved*/
.settingssaved {color: Black; font-weight: normal; background-color: #FFFF99; padding-left: 1em; padding-right: 1em; }

/* Error message styles */
.warning { color: #CC0000; font-weight: bold;}
p.scriptwarning {
	color: #CC0000;
	font-size: smaller;
}

/* Style for affirmative message */
.affirmation {color: Green;}

/* Styles for lists of unavailable jobs */
.unavailable-job-link { color: #999999; }

/* Quiz answer warning - e.g. if you say you have no qualifications and you want to earn loads of money */
.quizanswerwarning
{
	color: #CC0000;
	border: 3px double #B1D6FA;
	clear: both;
	margin: 0;
	padding: 10px;
}

ul, ol {line-height: 140%;}

.footnote, .quizfootnote {font-size: 70%; color: #999999;}
.quizfootnote {margin-left: 10px;}
.jobmatchfootnote {font-size: 80%;}

#content .showingjobsatlevel {font-size: 80%;}

.nowrap
{
    white-space: nowrap;
}

/* HOME PAGE NAVIGATION
-------------------------------------------------------------------------------------------- */
#nav, #nav_lower {width:512px; margin-left: 126px; list-style:none;  margin: auto;}
#nav li, #nav_lower li {float:left; width:128px;}
#content #nav a, #content #nav_lower a {position:relative;  display:block;  height:126px;  width:126px;  margin:0 auto;  line-height:1.3em;  overflow:hidden;  text-decoration:underline; border: none;  }
#content #nav_lower a {height:130px;}
#nav a img, #nav_lower a img {overflow:hidden;  text-decoration:none  }
ul.menu {list-style:none;  margin:0 auto;  padding:0;  }
ul.menu li.last { margin:0;  }
ul.menu li a span {  position:absolute; top:0; left:0;  height:130px;  width:126px;  cursor:pointer;  }
ul.menu li a {  background-position:0px 0px;  background-repeat:no-repeat;  display:block;  height:126px;  width:126px;   border: none; }
ul.menu li a:hover, ul.menu li a:focus, ul.menu li a:active {  background:#F5FDFF;  }
ul.menu li a:hover span, ul.menu li a:focus span, ul.menu li a:active span {  background-position:-126px 0px;  }
ul.menu li a.link1 span {  background-image:url(../gfx/link1-suitsme.jpg);  }
ul.menu li a.link2 span {  background-image:url(../gfx/link2-casestudies.jpg);  }
ul.menu li a.link3 span {  background-image:url(../gfx/link3-jobgroups.jpg);  }
ul.menu li a.link3wow span {  background-image:url(../gfx/link3-wow.jpg);  }
ul.menu li a.link4 span {  background-image:url(../gfx/link4-topten.jpg);  }
ul.menu li a.link5 span {  background-image:url(../gfx/link5-searchjobs.jpg);  }
ul.menu li a.link6 span {  background-image:url(../gfx/link6-myjed.jpg);  }
ul.menu li a.link7 span {  background-image:url(../gfx/link7-searchsubjects.jpg);  }
ul.menu li a.link8 span {  background-image:url(../gfx/link8-factsheets.jpg);  }

/* Sorts out an issue whereby Firefox, IE8 and IE9 moves the first icon on the second row up to the top row, in cases where there are less than 7 icons */

/*#nav li.last {float:none;} -- original 'fix' caused problems with the top-ten icon appearing over the top of the video case studies icon */
#nav_lower li:first-child {clear:both;}


/* HOME PAGE - ON THIS DAY/TREASURE HUNT
-------------------------------------------------------------------------------------------- */

.mainmenubox {
	clear: both;
	margin: 0 auto 6px;
	padding: 5px;
	font-size: 90%;
}

.onthisday {
	background-color: #DDEFFE;
	border: 1px solid #B1D6FA;
	}
.mainmenubox h3 {
	margin: 0;
	text-align: center;
}
.mainmenubox p {
	margin: 0;
	text-align: center;
}
.mainmenubox p.morelink {
	text-align: right;
	padding-right: 10px;
}

/*Treasurehunt*/

.treasure_ready {
	background-color: #B0C4DE;
	border: 2px solid black;
}

.treasure_challenge {
	background-color: #FFD700;
	border: 2px solid black;
}

.treasure_complete {
	background-color: #ADFF2F;
	border: 2px solid black;
}

/* No-JavaScript warning message */
#nojavascriptwarning
{
    background-color: #FFFF99;
	border: 1px solid #B1D6FA;
}
#nojavascriptwarning p
{
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.coronavirus_note {
    clear: both;
    background-color: #FFFF99;
    border: 1px solid #B1D6FA;
    padding: 10px;
    font-size: 90%;
}

/* HOME PAGE - VIDEO VERSION WARNING
-------------------------------------------------------------------------------------------- */

#videoversionwarning 
{
	clear: both;
	margin: 0 auto 6px;
	padding: 5px;
	font-size: 90%;
}
#videoversionwarning p {
	margin: 0;
	text-align: left;
	color: #CC0000;
	display:inline;
}

#videoversionwarning p.morelink 
{
	display:inline;
	margin-left: .5em;
}

#videoversionwarning p.morelink a {
	font-weight: normal;
}

.msie-novid {
	background-color: lightgoldenrodyellow;
}


/* HOME PAGE - BOTTOM
-------------------------------------------------------------------------------------------- */
#homebottom 
{
	position: relative;
	clear: both;
	
	margin: 0 auto;
	padding: 0 0px;
	top: -4px;
	font-size: 90%;
}

#homebottom div.left {
	float: left;
	text-align: left;
	white-space:nowrap;
	padding-bottom: 4px;
}

#homebottom div.right {
	float: right;
	text-align: right;
	padding-bottom: 4px;
}

#homebottom div.demo {
	padding: 2px;
	border: 1px solid #c7e2fb;
	background-color: #FFCC66;
	width: 100%;
	text-align: center;
}

#homebottom div.left a {
	background: url(../gfx/icon-home.gif) no-repeat left center;
	height: 19px;

	padding: 0 0 0 25px;
}


/* Styles for highlighting the licence text when the user's licence has nearly run out */
a.LicenceExpiryMessage { font-weight: normal; background-color: transparent; }
span.LicenceExpiryNotSoon { background-color: transparent; white-space:nowrap; }
span.LicenceExpirySoon { background-color: #FF9900; white-space:nowrap; }
span.LicenceExpiryImminent { background-color: red; white-space:nowrap; }

/* A-Z page JobsAToZ.aspx
-------------------------------------------------------------------------------------------- */
#joblist .icon {float:left;}
#joblist p.instruction {margin-left: 115px;}

#alpha_menu {clear: both;}
#alpha_menu li {  display:inline;  }
#content #alpha_menu a {  position:relative;  float:left;  display:block; border: none;}
#alpha_menu a:hover {  background:transparent;  }
#alpha_menu span {  position:absolute; top:0;  left:0;  width:29px;  height:34px;  cursor:pointer;  }
#alpha a:hover span {  cursor:pointer;  }	

		
 #sbnA:hover span {  background:url(../gfx/jobs_a-z__A_on.gif);}
 #sbnB:hover span {  background:url(../gfx/jobs_a-z__B_on.gif);}
 #sbnC:hover span {  background:url(../gfx/jobs_a-z__C_on.gif);}
 #sbnD:hover span {  background:url(../gfx/jobs_a-z__D_on.gif);}
 #sbnE:hover span {  background:url(../gfx/jobs_a-z__E_on.gif);}
 #sbnF:hover span {  background:url(../gfx/jobs_a-z__F_on.gif);}
 #sbnG:hover span {  background:url(../gfx/jobs_a-z__G_on.gif);}
 #sbnH:hover span {  background:url(../gfx/jobs_a-z__H_on.gif);}
 #sbnI:hover span {  background:url(../gfx/jobs_a-z__I_on.gif);}
 #sbnJ:hover span {  background:url(../gfx/jobs_a-z__J_on.gif);}
 #sbnK:hover span {  background:url(../gfx/jobs_a-z__K_on.gif);}
 #sbnL:hover span {  background:url(../gfx/jobs_a-z__L_on.gif);}
 #sbnM:hover span {  background:url(../gfx/jobs_a-z__M_on.gif);}
 #sbnN:hover span {  background:url(../gfx/jobs_a-z__N_on.gif);}
 #sbnO:hover span {  background:url(../gfx/jobs_a-z__O_on.gif);}
 #sbnP:hover span {  background:url(../gfx/jobs_a-z__P_on.gif);}
 #sbnQ:hover span {  background:url(../gfx/jobs_a-z__Q_on.gif);}
 #sbnR:hover span {  background:url(../gfx/jobs_a-z__R_on.gif);}
 #sbnS:hover span {  background:url(../gfx/jobs_a-z__S_on.gif);}
 #sbnT:hover span {  background:url(../gfx/jobs_a-z__T_on.gif);}
 #sbnU:hover span {  background:url(../gfx/jobs_a-z__U_on.gif);}
 #sbnV:hover span {  background:url(../gfx/jobs_a-z__V_on.gif);}
 #sbnW:hover span {  background:url(../gfx/jobs_a-z__W_on.gif);}
 #sbnX:hover span {  background:url(../gfx/jobs_a-z__X_on.gif);}
 #sbnY:hover span {  background:url(../gfx/jobs_a-z__Y_on.gif);}
 #sbnZ:hover span {  background:url(../gfx/jobs_a-z__Z_on.gif);}
 
/* JobNameSearch.aspx
------------------------ */

#jobnamesearch input {vertical-align: middle;}
#jobnamesearch div.instruction {border-bottom: 1px solid #B1D6FA; padding-bottom: 2px; margin-bottom: 0.5em;}
 
/* QUIZ PAGES
-------------------------------------------------------------------------------------------- */

/* Quiz - In depth start
-------------------------------------------------------------------------------------------- */
#quizpage {
	margin: 10px auto;
	text-align: left;
}

/* Prompt to user to save Jed record */
.quizsaveprompt 
{
    color: Black;
    font-weight: normal;
    background-color: #FFFF99;
    margin-top: 1.25em;
    padding-left: 1em;
    padding-right: 1em;
}


/* QUIZ NAVIGATION
-------------------------------------------------------------------------------------------- */

p.quizquestionsavailable { margin-bottom: 0; }

ul.menu_quiz { list-style:none;  margin:0 auto;  padding:0; }

ul.menu_quiz li a span { position:absolute; top:0; left:0;  height:110px;  width:126px;  cursor:pointer;  }
ul.menu_quiz li a { background-position:0px 0px;  background-repeat:no-repeat;  display:block;  height:126px;  width:126px;  }
ul.menu_quiz li a:hover, ul.menu li a:focus, ul.menu li a:active {  background:#F5FDFF;  }
ul.menu_quiz li a:hover span, ul.menu li a:focus span, ul.menu li a:active span {  background-position:-126px 0px;  }
ul.menu_quiz li a.link1 span {  background-image:url(../gfx/quiz-link1-myideal.jpg);  }
ul.menu_quiz li a.link2 span {  background-image:url(../gfx/quiz-link2-talent.jpg);  }
ul.menu_quiz li a.link3 span {  background-image:url(../gfx/quiz-link3-like.jpg);  }
ul.menu_quiz li a.link4 span {  background-image:url(../gfx/quiz-link4-fav.jpg);  }
ul.menu_quiz li a.link_examlevels span {  background-image:url(../gfx/quiz-link5-exam.jpg);  }

/* Big Quiz start */
#nav_quiz {  list-style:none; margin: 0; padding: 0px; text-align:center; }
#nav_quiz ul {margin: 0; padding: 0px; }
#nav_quiz li { float:left; width: 20%; }

#nav_quiz a { position: relative; display: block; height: 110px; width: 126px; margin: 0 auto; overflow: hidden; text-decoration: underline; text-align: center; }
#nav_quiz a img { overflow: hidden; text-decoration:none; }
#content #nav_quiz a { border: none;}

#quizpage p.suggestions img {vertical-align: middle; margin-right: 10px; }
#quizpage p.suggestions { font-size: 110%; }
#quizpage p.clearboth {margin-top: 1.25em;}
#content #quizpage p.suggestions a.nounderline { border-bottom:none; }


/* Quiz Start & QuizJobResults
-------------------------------------------------------------------------------*/
#quizstart{
	text-align: left;
	margin: 10px;
	
}
#quizstart img.icon, #quizjobresults img.icon {float:left;}
#quizstart div.indent, #quizjobresults div.indent  {margin-left: 115px;}
#quizstart ul.typeofquiz {font-size: 110%; list-style:none; margin-left: 30px;}
#quizstart ul.typeofquiz li {margin-bottom: 0.5em;}

#quizstart ul.typeofquiz li img, #quizstart p.suggestions img {vertical-align: middle; margin-right: 10px; border-bottom: none;}
#quizstart p.suggestions {font-size: 110%; }
#content #quizstart a.nounderline {border-bottom:none;}
#quizstart ul.typeofquiz li span {font-size: 70%;}
#quizstart div.indent p {margin-left: 30px;}

#quizstart .quiztrailcomments
{
    /* The font size is intended to match the progress ("x questions, y answered") in the quizzes listed above.
       The progress text is 70% of the parent's 110% giving an overall text size of 77%. */
    font-size: 77%;
    line-height: 1.4em;
}

/* Quick Quiz Section/ Big Quiz Section
-------------------------------------------------------------------------------*/
#quickquizsection, #quizindepthsection, #quiztrailquestion {
	text-align: left;
	margin: 10px;
	border-bottom: 1px solid #9dccf7;
	padding-bottom: 10px;
}

/* The icon illustrating the current quiz section */
#quickquizsection img.quizsectionicon, #quizindepthsection img.quizsectionicon, #quiztrailquestion img.quizsectionicon {
	float: left;
}


/* A note clarifying some point about the current quiz section (e.g. that disabilities do not contribute towards the quiz score) */
#quickquizsection .quizsectionnote, #quizindepthsection .quizsectionnote, #quiztrailquestion .quizsectionnote
{
	border: 3px double #B1D6FA;
	clear: both;
	margin: 1.25em 0 10px 0;
	padding: 10px;
}

/* For the note half-way down the big-quiz page and at the bottom of that page, 
   we give it a thick solid top border. */
#quizindepthsection .quizsectionnote
{
	border-top: 1em solid #B1D6FA;
}

#quickquizsection label, #quizindepthsection label, #quiztrailquestion label
{
	line-height: 130%;
}

/* styles for Money & Pensions questions within the Ideal Job section */
#quizform fieldset.importancebar {margin-top: 1em; margin-left: 23px;}

#quizform fieldset.importancebar table {border: none; border-collapse:collapse;}
#quizform fieldset.importancebar table td {border: 1px solid black; padding: 2px 5px;}
#quizform fieldset.importancebar table td.importance {background-color: #c7e2fb;}
#quizform fieldset.importancebar table td.selected {background-color: #FFFF99; border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: #FFFF99;}
#quizform fieldset.importancebar table td.importancelabel:hover { background-color: #FFCA08; }

/* Quiz Trail
-------------------------------------------------------------------------------*/

#quiztrailquestion .responseoptions, #quiztrailquestion img.illustration  {float: left;}
#quiztrailquestion fieldset.responseoptions {width: 380px;}

/* Quiz question pages
-------------------------------------------------------------------------------*/

/* General quiz page formatting */
#quizform {
	text-align: left;
	margin: 0 auto;
}

/* General quiz response formatting */
#quizform fieldset {
	border: none;
	margin: 0;
	margin-left: 70px;
	background-repeat: no-repeat;
}

#quizform label {
	display: block;
	padding: 1px 2px;
}


#quizform p.description {
	margin-left: 23px; padding: 2px;
}


/* Specific formatting for responses to subject quiz questions */
#quizform fieldset.subjectresponseoptions label {
	width: 23px;
	float: left;
	text-align: center;
	display: block;
	margin: 0px;
}
#quizform fieldset.subjectresponseoptions label.notdo {
	margin-right: 20px;
}
#quizform fieldset.subjectresponseoptions label {
	cursor: pointer;
}
#quizform fieldset.subjectresponseoptions label.selected,
#quizform p.selected,
#quizform fieldset.examlevelresponseoptions label.selected,
#quizform fieldset.responseoptions label.selected {
	background-color: #FFFF99;
}

/* Specific formatting for responses to importance bar quiz questions */
#quizform fieldset.importancebar label {
	display: inline;
	margin-left: 0;
}

/* Specific formatting for responses to any exam level quiz questions */
#quizform fieldset.examlevelresponseoptions label  
{
    text-indent: -18px;
}

#quizform fieldset.examlevelresponseoptions {
	margin-left: 40px;
}

/* Specific formatting for responses to any other quiz questions */
#quizform fieldset.responseoptions label {
	/*display: block;*/
	margin: 0px;
}


#quizform fieldset.responseoptions label {
    text-indent: -50px;
	cursor: pointer;
}

#quizform fieldset.responseoptions label .description {
	display: none;
}
#quizform fieldset.responseoptions label.selected .description {
	display: inline;
}

#quizform h3.question 
{
	/*position: relative; -- breaks the glossary pop-ups*/
	padding: 5px;
	font-weight: bold;
	font-size: 100%;
	margin-top: 1em;
	margin-bottom: 0px;
}

#quizform div.quizquestion h3.question	{
	background: #c7e2fb;
	color: #0D174B;
	border: 1px solid #fff;
}

#quizform div.quizquestion {
	margin-bottom: 1em;
}

#quizform div.quizquestion p
{
	margin-top: 0.8em;
	margin-bottom: 1.5em;
}

#quizform div.demomode {
	color: #999999;
}

#quizform div.demomode h3.question {
	background: #F4F4F4;
	color: #999999;
	border: 1px solid #CCCCCC;
}

/* fade out images in demomode */
#quizform div.demomode img, div.unavailablebonusbox img
{
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

#quizform fieldset.responseoptions label {
	display: block;
	padding: 1px 4px;
	margin-left: 0px;
}

#quizform fieldset.subjectresponseoptions label {
	display: block;
	padding: 1px 4px;
	margin-left: 4px;
	text-indent: 0px;
}

html>body #quizform fieldset.responseoptions label {
	padding: 3px;
}

#quizform fieldset img, #quizform fieldset input
{
	vertical-align: middle;
}

/* The container for the button used to submit the quiz answers */
#quizform p.submitquizanswersbutton {
	text-align: right;
	margin-top: 10px;
}

/* The container for the button used to submit the quiz answers (on the suits me job page) */
#quizform p.right {
	text-align: right;
	margin-top: 10px;
}


/* Quiz results page (QuizJobResults.aspx)
------------------------------------------------------------------------*/

#quizjobresults h3.morelists {
	margin-bottom: 0;
}

#quizjobresults ul.morelists 
{
	margin-left: 2em;
	/*
	list-style-type: none;
	text-indent: 2em;
*/
}

#quizjobresults ul.morelists li
{
	margin-top: 0.5em;
}

/* Quiz answer graph.
   Shared by the quiz answer summary page (QuizAnswerBreakdown.aspx) and My Jed Record page (MyJedRecord.aspx)
--------------------------------------------------------------------------------------------------------------*/
table.answerbarstable {
    border-collapse:collapse;
    margin-bottom: 0.75em;
}

table.answerbarstable th {
	width: 20%;
	text-align: center;
	padding: 0px;
}
table.answerbarstable td {
	width: 20%;
	text-align: center;
	padding: 0px;
}

table.answerbarstable tr.answerbarsrow td {
	border-bottom: 2px solid #000000;
}

/* Background colours don't print, so we use a 120px wide border so that it displays on screen and prints out nicely too */
table.answerbarstable td div {border: 1px solid #000000; border-bottom: none; padding: 0; margin: auto; margin-top: 1em; width: 120px;}
table.answerbarstable td div div {border: none; padding: 0; margin: 0; width: 0px; overflow:hidden;}

table.answerbarstable .stronglynegativebar div {border-right: 120px solid #FF4242;}
table.answerbarstable .negativebar div {border-right: 120px solid #FF8C18;}
table.answerbarstable .neutralbar div {border-right: 120px solid #CCCCCC;}
table.answerbarstable .positivebar div {border-right: 120px solid #00C600;}
table.answerbarstable .stronglypositivebar div {border-right: 120px solid #39F139;}

table.answerbarstable .graphheading  
{
	font-weight: bold; 
	border: none;
	height: 3em;
	margin-top: 0.5em;
}

/* Results lists (quiz, search, case studies etc.)
------------------------------------------------------------------------*/
p.divider {
	clear: both;
	padding-top: 10px;
	text-align: center;
}

div.descbox, div.demodescbox {
	position: relative;
	border-bottom: 1px solid #B1D6FA;
	border-top: 1px solid #F6FEFF;
	/*clear: both;*/
	text-align: left;
	margin: 0px 0px 0.5em 0px;
	min-height: 57px;
}

div.firstdescbox {
	border-top: 1px solid #B1D6FA;
	padding-top: 10px;
}

div.descbox img.thumb, div.demodescbox img.thumb {position: absolute; right: 0px; top: 0px;}

.star { width: 56px; height: 14px; }
div.descbox .star, div.demodescbox .star 
{
	position: relative;
	top: -5px;
}

div.demodescbox div.jobresultmedialinks,
div.descbox div.jobresultmedialinks 
{
	float: left;
}

#content div.demodescbox div.jobresultmedialinks a,
#content div.descbox div.jobresultmedialinks a 
{
	border: none;
}

div.demodescbox .demovideocasestudy, div.descbox .demovideocasestudy {font-weight: bold; color: #999999;} /* Unavailable CaseStudy */

div.descbox .videocasestudy img, div.descbox .demovideocasestudy img, div.demodescbox .demovideocasestudy img
{
	vertical-align: middle;
	display: block;
}

html>body div.descbox, html>body div.demodescbox {
	margin: 0 auto 10px;
}
div.descbox img.jobthumb {
	border: 1px solid #293380;
	display: block;
}

/*fade out images in demo mode */
div.demodescbox img.jobthumb {
	border: 1px solid #999999;
	display: block;
	opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}
div.descbox h4, div.demodescbox h4 {
	position: relative;
	top: -3px;
	font-size: 110%;
	margin: 0 0 0.25em 0;
	margin-left: 60px;
	padding: 0; 
}
#content div.descbox p, #content div.demodescbox p {	margin: 0 0 .5em 60px; line-height: 120%;}


div.demodescbox p {color: #999999;}


.QuizNavigation {position: relative; margin-bottom: 15px; border-bottom: 1px solid #B1D6FA;border-top: 1px solid #B1D6FA; text-align: center; padding: 5px; width: 100%; font-size: 90%;}
.QuizNavPrevious, .QuizNavNext, .QuizNavFirst, .QuizNavLast, .PageLinks {position: relative; margin: 0 0 0 1em;}
.PageLinksBack, .PageLinksForward {width: 10em; font-family: Arial, Helvetica, Sans-Serif;}

div.descbox div.jobresultdecorations, div.demodescbox div.jobresultdecorations
{
	position: absolute;
	top: 0px;
	right: 2px;
	text-align: right;
	z-index: 1; /* This makes sure that the text-to-speech icon is not hidden behind the tag containing the job name - FB 5646 */
}
div.firstdescbox div.jobresultdecorations
{
	padding-top: 11px;
}

/* JOB DESCRIPTION PAGE
-------------------------------------------------------------------------------------------- */
/* Menu */

#job_menu { float:left;  width:159px;  margin-top:14px;  padding:3px;  background: #7FC1F5 url(../gfx/menu_slice.gif);  border: 1px solid #fff;  font-size:80%;  }
* html #job_menu {margin-top:10px;} /*IE 5 & 6 */
#job_menu li {  list-style-type:none;  line-height:1em;  text-align:left; text-indent: -20px; }

#job_menu li img {margin-right: 4px; vertical-align:middle;}
#job_menu a {  display:block;  width:126px;  margin:5px 3px;  padding:2px 0 2px 24px;  background:#293380;  color:#fff;  text-decoration:none;  border:1px solid #fff;  }
#job_menu a:visited {background:#293380;  color:#fff;}
#job_menu .specialism a { background: #006666; }
#job_menu a span, #job_menu a:visited span {  display:none;  }
#job_menu a:hover, #job_menu a:focus, #job_menu a:active #job_menu .specialism a:hover, #job_menu .specialism a:focus, #job_menu .specialism a:active {color: #293380; background: #FFCA08;}
#content #job_menu a {border-bottom:1px solid #fff; }
/* sets current page state */
#job_menu .current a {
	color: #293380; background: #9DCCF6; border:1px solid #fff; text-decoration:none;
}

#job_menu .current a:link, #job_menu .current a:visited, #job_menu .current a:hover, #job_menu .current a:active {
	color: #293380; background: #9DCCF6;
}


/* Job text regions */
#content div.region
{
    padding-left: 2em;
}



/* Job description page - general Job.aspx
-------------------------------------------------------------------------------------------- */
#details ul, #glossarydefinition ul, #jobadswhy ul, #jobpaymore ul, #jobtransferableskillswhy ul /* By default, lists on the details pages should indent. */
{
	margin: 0 0 10px 34px;
	line-height: 120%;
}

#details ul li, #glossarydefinition ul li, #jobadswhy ul li, #jobpaymore, #jobtransferableskillswhy ul li
{
	margin: 0 0 0.5em;
	
}

#details .JobPrintPreview ul /* bigger indents are needed on JobPrintPreview */
{
	margin: 0 0 10px 71px;
}

#details .JobMoreInformation p.gateway
{
	margin: 0 0 10px 38px;
	text-indent: -38px;
	line-height: 80%;
	
}


#details .JobMoreInformation p.gateway img
{  
    float: none;
    vertical-align: middle;
    margin-right: 4px;
}

#details .JobPrintPreview p.gateway
{
	margin: 0 0 10px 71px;
}

/* Links to Higher Ideas */
#details p.higherideaslink
{
	margin: 0 0 10px 38px;
	text-indent: -38px;
	line-height: 80%;
}
#details p.higherideaslink img
{  
	float: none;
	vertical-align: middle;
	margin-right: 4px;
}
#details .JobPrintPreview p.higherideaslink
{
	margin: 0 0 10px 71px;
	text-indent: 0;
	line-height: 150%;
}
#details .JobPrintPreview p.higherideaslink img
{
	vertical-align: baseline;
	margin-right: 0;
}

#details hr
{
    margin-top: 10px;
    margin-bottom: 10px;
}

/* More Information Pages JobMoreInformation.aspx
-------------------------------------------------------------------------------------------- */

/* Format the list of careers library info */
#details .JobMoreInformation table.careerslibrary {border: none; margin: 0 0 0 36px;}
#details .JobMoreInformation table.careerslibrary td {padding: 0 0 0.5em 1em;}
#details .JobMoreInformation table.careerslibrary td, #details .JobMoreInformation table.careerslibrary th {vertical-align: top;}


/* Format the list of tutor links */
#details .JobMoreInformation ul.tutorlinks
{
	list-style: none;
	margin-left: 38px;
}

#details .JobMoreInformation li
{
	margin-left: 0;
}

#details ul.higherideaslinks {margin-left: 38px;}
#details ul.higherideaslinks li {margin-left: 0;}

/* Format the list of contacts */
#details .JobFindOutMore dl.contacts
{
	list-style: none;
	margin: 0 0 0 32px;
}
#details .JobFindOutMore dt {margin-bottom: 0.2em;}

#details .JobFindOutMore dd {margin-bottom: 0.75em;}

/* #details ul.addresses
{
	list-style: none;
	line-height: 140%;
}
#details ul.addresses h4, #details ul.addresses li p {margin-bottom: 0px;} */

#details img.jobgroupicon {vertical-align:text-bottom;}

p.altjobname {margin-top: 0px;  font-weight: bold; font-style: italic; color: #0D174B; position: relative; top: -5px;}

p.jobid {font-size: 60%; color: #CC6600; text-align: right;}

p.version {font-size: 60%; color: #0D174B;}

#details a.nounderline, #details a.nounderline:hover {border-bottom:none;}

/* Glossary entries are enclosed in <dfn> tags.
   See glossaryhint item in EveryoneScreen.css for the style for the pop-up box.*/
dfn.glossary
{
	font-style: normal; /* font-style: italics; */
	border-bottom: dotted 1px #009933;
	cursor: help;
}

dfn.glossary:hover
{
	background-color:	#FFDDDD;
}

/* 'Pull out' boxes on Description page */

#details div.deconfuse {
	border: 3px double #B1D6FA;
	clear: both;
	margin: 0 1em 0 0;
	padding: 5px;
	width: 170px;
	float: left;
}

#details div.deconfuse p {margin-bottom: 0;}

#details .imageholder {float: right; margin-left: 10px; margin-top: 3px; }

#details span.jobtitle {font-weight: bold; line-height: 120%;}
#details p.firstparagraph:first-letter {font-size: 130%;}

/* Contacts page contact.aspx
-------------------------------------------------------------------------------*/
#contact h3
{
    margin-left: 3em;
}
#contact h4
{
    margin-left: 4em;
}
#contact p.displaynote, #contact p.address, #contact p.weblink 
{
    margin-left: 5em;
}
#contact .weblink .displaynote
{
    display: block;
    margin-left: 1em;
    font-style: italic;
}

p.deep-link-note
{
	display: block;
	margin-left: 5em;
}


/* Glossary definitions
-------------------------------------------------------------------------------*/
#glossarydefinition
{
    background-color: #FFDDDD;
    overflow-y: scroll;
    padding: 0 8px;
    text-align: left;
}

#glossarydefinition h1
{
    font-size: 1.75em;
    margin: 0;
}

#glossarydefinition h2
{
    font-size: 1.25em;
    font-weight: normal;
    margin: 0.5em 0 0.3em 0;
}

.glossary-definition
{
    margin-left: 1em;
}


/* Job Pay More Information Page JobPayMore.aspx
-------------------------------------------------------------------------------*/


#jobpaymore ul  
{
	list-style: disc;
	margin: 0 0 10px 34px;
	line-height: 120%;
}

#jobpaymore ul li
{
	margin: 0 0 0.5em;
	
}


/* Job Description Video page
-------------------------------------------------------------------------------*/

/* Bounding box for the video and related content */
#video 
{
    position: relative;
    width: 100%;
    margin: 0px;
}

/* Reduce the lower margin of the title so that the video is moved up closer to the title */
#video h2 
{
    margin-bottom: 6px;
}
	
/* Place the container for the video */
#video #player 
{
    position: relative;
    float: left;
    text-align: right;
    }

/* Style for the video credits link */
#video #videocredits
{
	text-align: left;
	font-size: smaller;
	position: absolute;
	bottom: 0px;
	margin-bottom: 1.25em;
}

.videoflashmessage, .videoscriptmessage {text-align: left;} /*left align the message about not having flash player */
 
/* Job Description Picture page
-------------------------------------------------------------------------------*/

#details img.jobpicture {position: relative; border: 1px solid #293380;  z-index: 4;}
#details img.jobpicture
{
-moz-box-shadow: 5px 5px 5px #999999; /*Mozilla*/
-webkit-box-shadow: 5px 5px 5px #999999; /*Safari/Chrome*/
box-shadow: 5px 5px 4px #999999; /*CSS3*/
}
#details div.imageholder {position: relative;}
#details div.imageholder div.dropshadow {position: absolute; left: 3px; top: 3px;}

/* Job pictures page
-------------------------------------------------------------------------------*/
/* div.dropshadow is now only used for IE8 and below. IE9+, Firefox and Safari have a drop-shadow on img.jedpicture */

/*drop shadow*/
#details img.jedpicture, #details img.localpicture
{
-moz-box-shadow: 10px 10px 5px #999999; /*Mozilla*/
-webkit-box-shadow: 10px 10px 10px #999999; /*Safari/Chrome*/
box-shadow: 7px 7px 4px #999999; /*CSS3*/

}

#details div.dropshadow {position: absolute;}
#details div.left, #details div.right {position: relative;}

#details div.left img.jedpicture {margin: 0px 0px 0px 15px;}
#details div.right img.jedpicture {margin: 0px 20px 0px 0px;}

#details div.right, #localisingjob div.right {text-align: right;}
#details img.jedpicture, #localisingjob img.jedpicture, #details img.localpicture {position: relative; top:10px; filter:none; z-index: 4; border: 1px solid #293380;}

#details div h3.picturecaption, #details div h4.picturecaption
{
	position: relative;
	color: #0D174B;
	font-weight: bold;
	font-size: 100%;
	padding: 17px 15px 10px 15px;
	
}


* html #details div h3.picturecaption, * html #details div h4.picturecaption
{
	width: 555px;
}

/*localpics*/

#details span.caption, #localisingjobpreview span.caption {position: relative; width: 370px; text-align: left;}

/* Style for the picture credits link */
#details #picturecredits
{
	font-size: smaller;
	text-align: left;
}

#jobpicturecredits li
{
	list-style: none;
}

/* My Jed (JobAnnotations.aspx)
-------------------------------------------------------------------------------*/

#details div.instruction
{
	position: relative;
	float: right;
	width: 60%;

}

#details #hotnotform {
	background-color: #DDEFFE;
	border: 1px solid #B1D6FA;
	padding: 5px;
	width: 35%;
	float: left;
	margin-top: 7px;
	margin-bottom: 16px;
}

/* Reset list styles back to the standard for the hot/not option list. */
#details #hotnotform ul
{
	margin: 0 0 0.75em;
	line-height: 140%;
}

#details #hotnotform input
{
	vertical-align: middle;
}

#details h3.notes {clear:both; margin-top: 1em;}

#details div.notes 
{
	background-color: #DDEFFE;
	border: 1px solid #B1D6FA;
	padding: 5px;
}

#details #hotnotform li {
	list-style-type: none;
	margin-left: 47px;
	text-indent: -50px;
	line-height: normal;
	cursor: pointer;
}

#details #hotnotform li label {
	display: block;
	text-indent: -45px;
}

#details #hotnotform li label.selected {
	background-color: #FFFF99;
}

#details #hotnotform li img {
	vertical-align: middle;
}
		
#details .right {text-align: right;}

#details textarea#usercomments{width: 510px; border: 1px solid #B1D6FA; background: #FFFFCC; padding: 4px;}



/* JobQuizRelevance.aspx 
------------------------------------------------------------------------------*/

#details div.unavailablebonusbox 
{
	background: #F4F4F4; 
	color: #999999; 
	border: 1px solid #CCCCCC;
	clear: both;
	margin: 0 0 10px 0;
	padding: 10px;
}	

#details div.unavailablebonusbox h3, #details div.unavailablebonusbox p  {color: #999999;}

#quizbonusquestionpreamble {font-style: italic;}

/* Styles for the coloured boxes for likes, dislikes and disabilities */

#details div.like, #details div.dislike, #details div.problem {
	 padding: 10px;  margin-bottom: 0.5em;
}

#details div.like {border: 1px solid #339933;}
#details div.dislike {border: 1px solid #FF9933;}
#details div.problem {border: 1px solid #999999;}
#details div.problem ul {list-style: none; text-indent: -34px;}
#details div.problem ul img {margin-right: 10px;}

/* Job "not in demo mode" page (JobNotInDemoMode.aspx)
------------------------------------------------------------------------------*/
#notindemomode hr
{
    margin-top: 10px;
    margin-bottom: 10px;
}


/* CRCI job groups list
------------------------------------------------------------------------------*/

#details ul.jobgrouplist {list-style: none; margin-left: 38px;}
#details ul.jobgrouplist li {margin-left: 0;}
#details ul.otherideas, #details ul.otherideas li {margin-left: 0;} /* when it's listed below all the 'other job ideas' it looks a it ragged, so we tweak it in line*/
#details p.morejobsjobgroup {margin: 1em auto 0.5em auto;}

/* JobPrintSetup
------------------------------------------------------------------------------*/
#details ul.infopages img, #details h3 img  {vertical-align: middle;}
#details ul.infopages, #content ul.pictures {margin-left: 2em; list-style: none; margin: 0 0 0 2em;}
#details ul.infopages ul {margin: 0 0 0 2em; list-style: none; line-height: 100%;}
#details ul.infopages ul li,  #content ul.pictures li {margin: 0;}

/* The section containing the select all/none links. */
#details .selectallinfopages 
{
    font-size: 75%;
    font-weight: normal;
    font-style: italic;
    display: block;
    margin-left: 27px;
}


/* Tutor Options (Configuration.aspx)
-------------------------------------------------------------------------------*/	
#configuration ul {list-style: none; margin: 0px 0px 10px 30px;}
#configuration ul.passwords, #configuration ul.examlevel {list-style: none; margin: 0px 0px 30px 60px;}
#configuration p {list-style: none; margin: 0px 0px 10px 30px;}
#configuration p.instructions {list-style: none; margin: 0px 0px 10px 0px; font-style:italic;}
#configuration p.examlevel {list-style: none; margin: 0px 0px 10px 60px;}
#configuration p.passwords {list-style: none; margin: 0px 0px 0px 30px;}
#configuration p.save {list-style: none; margin: 0px 0px 0px 0px;}
#configuration ul li {margin: 0px; border: 1px solid #F6FEFF;}
/*NB the border on this cures an issue in IE where it was spacing the li items really far apart - no idea why adding a border should cure it, but it does...*/
#configuration input {vertical-align: middle;}
#configuration input#Name {width: 8em;}
#configuration label.block {
	display: block;
	padding: 1px 2px;
	margin-left: 16px;
	text-indent: -18px;
}


#configuration #FontSample {padding: 5px;}
#configuration div.fontsample {border: 1px solid black;}
#configuration h2 {margin: 1em 0 0.5em 0;}
#configuration h3 {margin: 1.25em 0 0.25em 30px;}

#configuration ul img {vertical-align: middle;}

#configuration div.ExtraLinks p {margin: 0.5em 0 0.5em 30px;}

/* Override the normal list styles for the warning list */
#configuration ul.warning li { list-style-type: disc; margin-left: 30px; }

/* ConfigurationTestExtraLink.aspx */

#configurationtestextralink iframe {} /*Doesn't seem to like changing if here - so at top of relevant page*/
#configurationtestextralink p.link {margin-bottom: 0;}
#configurationtestextralink p.description {margin-top: 0;}

/* ConfigurationIndex.aspx
------------------------------------------------------------------------------*/
#configurationindex h2 {
	padding-left: 28px;
	background-position: left center;
	background-repeat: no-repeat;
	margin-top: 2em;
}
#configurationindex .profilesheader { background-image: url(../gfx/icon-profile.gif); }
#configurationindex .passwordheader { background-image: url(../gfx/password.gif);}
#configurationindex .videomessageheader { background-image: url(../gfx/icon-videomessage.gif);}
#configurationindex .treasurehuntheader { background-image: url(../gfx/icon-treasure.gif);}
#configurationindex #backto {margin-left: 0px;}

#configurationindex p {
	margin-left: 28px;
}

#configurationindex p.smallnote {
	margin-left: 56px; font-size: 0.8em; /*indents & reduces size of password & IP segmentation sections*/
}

#configurationindex p.settingssaved {
	margin-left: 0px;
}




/* ConfigurationAll.aspx, Chooseprofile.aspx
------------------------------------------------------------------------------*/
#chooseprofile dl.profilelist, #configurationall dl.jedprofiles
{
	margin: 0px 0px 20px 0px;
	list-style: none;
}

#configurationall dl.jedprofiles, #configurationall a.mockbutton, #configurationall p.startupprofile
{
	margin-left: 2em;
}

#configurationall p.startupprofile select {vertical-align:middle;}
#configurationall p.startupprofile .smallbutton {margin: 0px;}

#chooseprofile dl.profilelist dd, #configurationall dl.jedprofiles dd {
	padding: 0.25em 0 0 28px;
	font-size: 90%;
	margin-bottom: 10px;

}

#chooseprofile dl.profilelist dt a, #configurationall dl.jedprofiles dt a
{
	
	background-repeat: no-repeat;
	background-position: left bottom;
	padding: 0.5em 0 0 28px; /*extra padding added at the top to stop the background gfx disappearing*/

	
}

#chooseprofile dl.profilelist dt, #configurationall dl.jedprofiles dt
{
font-weight: bold;
margin-top: 1.5em;
}


#chooseprofile dl.profilelist dt a.currentprofile, #configurationall dl.jedprofiles dt a.currentprofile {
	background-image: url(../gfx/icon-profile.gif);
}

#chooseprofile dl.profilelist dt a{ /*grey the non-active profile icons out when the user is presented with the list */
	background-image: url(../gfx/icon-profile-grey.gif);
}

#configurationall dl.jedprofiles dt a { /* on the tutor page, we want the icons to be on all the time */
	background-image: url(../gfx/icon-profile.gif);
}


#chooseprofile dl.profilelist dt a:hover, #configurationall dl.jedprofiles dt a:hover {
	background-image: url(../gfx/icon-profile.gif);
}

#configurationall select.profileselect {min-width: 16em; margin: 0 0 0.75em 0;}

#configurationall p.back, #configurationall p.settingssaved {
	margin-left: 0px;
}


/* ConfigurationAdd.aspx
------------------------------------------------------------------------------*/
#configurationadd ul 
{
	font-weight: bold; 
	margin-left: 40px;
}

#configurationadd li
{
	margin-bottom: 1em;
	list-style: none;
}

#configurationadd h2
{
	padding-left: 28px;
	background-position: left center;
	background-repeat: no-repeat;
	background-image: url(../gfx/icon-profile.gif);
}

/* Changetutorpassword.aspx
------------------------------------------------------------------------------*/

#changetutorpassword fieldset {margin-top: 1em; padding-top: 1em; border: none; border-top: 1px solid #B1D6FA}

/* UserDataLoad.aspx
------------------------------------------------------------------------------*/

#userdataload ol {margin-left: 2em;}

/* UserDataLoadConfirm.aspx
------------------------------------------------------------------------------*/

#userdataloadconfirm p.notes {font-size: 80%; border: 1px solid #B1D6FA; background: #FFFFCC url('../gfx/icon-notes.gif') no-repeat 4px 4px; padding: 4px 4px 4px 25px; line-height: 110%;}




/* Home User Voucher Page */
#voucher p.topupcode {font-size: 150%;}

/* Licence Details
-------------------------------------------------------------------------------*/
#licencedetails ul {margin: 0 0 0 30px;}
#licencedetails div.left {float: left; width: 250px; position: relative;}

#licencedetails div.extras {margin-left: 290px; margin-bottom: 20px;}
#licencedetails ul.featureslist li { list-style-type: none; line-height: 90%; margin-bottom: 0.25em;}
#licencedetails ul.featureslist span {margin-left: 31px; font-size: 90%;}
#licencedetails ul.featureslist img {vertical-align: text-bottom;}

#licencedetails hr {clear: both; margin-bottom: 20px;}
#content #licencedetails a.nounderline {border-bottom:none;}
#licencedetails form.jedlink {margin-left: 290px;}
#licencedetails p.licencechange {}

#licencedetails dl {margin: 0px 0px 20px 0px;}
#licencedetails dt {font-weight: bold;}
#licencedetails dd {margin-bottom: 10px;}


.newerversion, .newerversiondetails { color: #CC0000; }
.newerversion { font-weight: bold; }
.newerversiondetails { font-weight: normal; }


/* Exam Levels (MyConfiguration.aspx)
-------------------------------------------------------------------------------*/

#myconfiguration table  {border-collapse: collapse;}
#myconfiguration table th {font-weight: bold; font-size: 90%;text-align: left; padding: 5px; background-color: #c7e2fb;}
#myconfiguration table th span {font-weight: normal; font-size: 80%; display: block; }
#myconfiguration table td {padding: 5px; text-align: center}
#myconfiguration table th,  #myconfiguration table td {border: 1px solid #4C609C; margin: 0px;}
#myconfiguration table th.mainheading {font-weight: bold; text-align: center; background-color: #1766a9; color: White;}
#myconfiguration table tr.save td {font-weight: bold; font-size: 90%;padding: 5px; background-color: #c7e2fb;}
#myconfiguration table tr.save td.cancelbutton {border-right: none;}
#myconfiguration table tr.save td.savebutton {border-left: none;}
#myconfiguration table th.mylevel, #myconfiguration table th.showinjed {width: 7em; text-align: center}



/* My Region (MyRegion.aspx)
-------------------------------------------------------------------------------*/	
#myregion ul {list-style: none; margin: 0px 0px 10px 30px;}



/* Top Ten Jobs
-------------------------------------------------------------------------------*/
#toptenjobs h2 {margin-left: 115px; clear: right;}

#toptenjobs .icon {float:left; z-index: 1; position: relative;}
#toptenjobs div.top {float: left;}
#toptenjobs div p.levels, #toptenjobs div.descbox, #toptenjobs div.demodescbox {margin-left: 115px;}
#toptenjobs form {margin-left: 115px; text-align: left; margin-bottom: 15px;}
#toptenjobs	p.alltoptens {float: left;}
#toptenjobs .button {width: auto}

#toptenjobs div.instruction, #toptenjobs div.preamble, #toptenjobs .demobackground  {
	position: relative;
	text-align: left;
	margin: 0px 0px 10px 115px;
}

#toptenjobs div.instruction 
{
	padding-bottom: 1.5em;
	border: 2px transparent #4C609C; /*Sorts out a bizarre bug in MSIE FB2121*/
	border-bottom: 2px solid #4C609C; 
}

#toptenjobs div.firstdescbox 
{
	border-top: 2px solid #4C609C; 
}


/* Top Ten Jobs all
-------------------------------------------------------------------------------*/
#toptenjobsall ul {font-size: 100%; list-style: disc; 
	margin: 5px 0px 10px 20px; margin-left: 130px;}
#toptenjobsall img.icon {float:left;}


/* My Jed record myjedrecord.aspx
-------------------------------------------------------------------------------*/
#myjed .icon {float:left;}

/* Headings */
#myjed h3.myjedrecordsectiontitle {
	margin-bottom: 0;
	clear: both;
	cursor: pointer; /* manke the expand/contract headings look clickable */
}

/* The link within the section heading that handles showing and collapsing the section */
#myjed h3.myjedrecordsectiontitle a
{
    /* Make the link fill the parent heading */
    display: block;
    width: 100%;
    height: 100%;
    
    /* Suppress the link styling */
    color: inherit;
    border-bottom: none;
    
    /* Add some padding to the link to replace the heading padding suppressed by the show/hidecontent styles */
    padding-bottom: 0.25em;
    
    /* Position the background arrow graphic and indent the text to allow space for it */
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: 28px;
}

/* Suppress the padding in the heading so that the heading link fills the full area of the heading */
#myjed h3.myjedrecordsectiontitle.showcontent, #myjed h3.myjedrecordsectiontitle.hidecontent
{
    padding-bottom: 0;
}

#myjed h3.myjedrecordsectiontitle {
    border: 1px solid #B1D6FA; 
    background-color: #DDEFFE; 
    padding-bottom: 0.25em;
    margin-top: 1em;
    padding-left: 0.5em;
    background-repeat: no-repeat;
	background-position: left center;
	height: 26px;
}
 
/* This bit adds the style for the 'show' arrow */
#myjed div.contracted h3
{
    background-image: url(../gfx/icon-show-blue.gif);
    padding-left: 30px;
}

#myjed div.contracted h3:hover
{
    background-image: url(../gfx/icon-show-orange.gif);
}

/* This bit adds the style for the 'hide' arrow */
#myjed div.expanded h3
{
    background-image: url(../gfx/icon-hide-blue.gif);
    padding-left: 30px;
}
#myjed div.expanded h3:hover 
{
    background-image: url(../gfx/icon-hide-iceblue.gif);
}


#myjed div.contracted div.ReadSpeakerPlayer
{
	display: none;
}


/* Headings within the expanding regions */
#myjed #myjedrecordquizanswerscontent H4 {margin: 0.5em 0 0.5em 0; font-size: 120%;}

/*Expanding region */
#myjed div.expandingbox 
{
    border: 1px solid #B1D6FA;
    padding: 1em 1em 0.75em 1em;
    background-color: #FFFFFF;
}

/*drop shadow*/
#myjed div.expandingbox, #myjed H3.myjedrecordsectiontitle 
{
-moz-box-shadow: 10px 10px 5px #999999; /*Mozilla*/
-webkit-box-shadow: 10px 10px 5px #999999; /*Safari/Chrome*/
box-shadow: 2px 2px 4px #999999; /*CSS3*/
}

@media screen 
{/* In IE8 we only show the drop shadow on screen, if this is printed then it causes the problems in FB11669*/
    #myjed div.expandingbox, #myjed H3.myjedrecordsectiontitle {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; /*IE8 */}
}

/* My quiz answers section */
#myjed dl {margin-bottom: 0;}
#myjed dl.quiz dt {margin: 0 0 0.4em 3em; font-weight: bold;}
#myjed dl.quiz dd {margin: 0 0 0.75em 6em; text-indent: -22px; line-height: 1.1em;}
#myjed dl.quiz img {vertical-align: middle; margin-right: 8px; position: relative; top: -1px;}

/* My job suggestions section */
#myjed div.descbox p.userjobnote
{
	font-size: 80%; 
	border: 1px solid #B1D6FA; 
	background: #FFFFCC; 
	padding: 4px; 
	line-height: 110%;
	margin: 0 0 .5em 60px;
}
        
/* graphic in instructions */        
#myjed img.showarrow {vertical-align: middle;}    
        
/* instructions for saving your Jed record*/
#myjed h3.saverecord {margin-top: 1.5em;}
#myjed ul.saverecord {margin-left: 0; list-style: none; line-height: 1.6em;} /* NB changing the line height affects the position of the icon within it - so don't do it! If you want more space between the list items, adjust the margin top on the li below */
#myjed ul.saverecord li {margin-top: 0.6em;}


/* Icons used on MyJedRecord, UserDataSave, and UserDataLoad */
.jr-icon 
{
  margin-right: 0.4em;
/* With thanks to http://css3buttongenerator.com/ */
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  color: #ffffff;
  padding: 3px 4px 5px 4px;
  text-decoration: none;
  float: left;
  width: 2em;
  height: 1.3em;
  text-align: center;
  font-weight: bold;
  font-size: medium;
}

a .jr-icon:hover 
{
/* With thanks to http://css3buttongenerator.com/ */
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.save-icon:before
{   font-family: "FontAwesome";
    font-size: 1.5em;
    color: #ffffff;
    content: "\f023";   
}

.open-icon:before
{   font-family: "FontAwesome";
    font-size: 1.5em;
    color: #ffffff;
    content: "\f024";
}

/* Tweak the position of the open and save icons within the help */
#help_details .jr-icon {position: relative; float:none; padding: 8px 4px 0px 4px; margin-right: 0.5em; top: 5px;}

/* My Jed record - UserDataSave.aspx
-------------------------------------------------------------------------------*/

#userdatasave .icon {float:left;}
#userdatasave div.indent {margin-left: 115px;}
#userdatasave div.usernamebox, #userdatasave div.titlebox, #userdatasave div.passwordbox, #userdatasave div.notesbox 
{
		background-color: #DDEFFE;
		border: 1px solid #B1D6FA;
		padding: 5px;
		margin-top: 0.5em;
		margin-bottom: 1em;
}


/* Job Subject Search
-------------------------------------------------------------------------------*/
#jobsubjectsearch .icon {float:left;}
#jobsubjectsearch div.subjectlist {margin-left: 115px;}

#jobsubjectsearch div.subjectlist ul {margin: 0;}
#jobsubjectsearch div.subjectlist li {list-style:none; display: block; padding-right: 10px; line-height: 120%; margin-top: 0.25em;}
#jobsubjectsearch div.subjectlist li input {vertical-align: middle;}
#jobsubjectsearch p input.button {margin: .25em 0 0 0;}
	
#jobsubjectsearch label
{
	display:block;
	padding: 1px 2px;

}

html>body #jobsubjectsearch label{
	padding: 3px; 
}
* html #jobsubjectsearch div li {display: inline;}



/* Job Groups - Wow City Map
-------------------------------------------------------------------------------*/

#jobgroupscitymap
{
	width: 788px;
	height: 550px;
	margin-left: 0px;
	margin-top: 0px;
	text-align: left;
}

#jobgroupscitymap img
{
    border: 1px solid #293380;
}

#CityMapBackground, #CityMapOverlay
{
	position: absolute;
    border: 0;
}

/* Make sure the city map overlay appears on top of the background. */
#CityMapBackground
{
    z-index: 0;
}
#CityMapOverlay
{
    z-index: 1;
}

#jobgroupscitymap .showaslist
{
	position: absolute;
	top: 520px;
	width: 788px;
	font-size: 80%;
	text-align: right;
}

#jobgroups p.showasmap 
{
    text-align: right; 	
    font-size: 80%;
    }

.citymaphint
{
	padding: 0px;
	text-align: left;
}

.citymaphinttopleft
{
	background-image: url(../gfx/CityMapTooltipTopLeft.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	height: 15px;
}

.citymaphinttop
{
	background-image: url(../gfx/CityMapTooltipTop.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 15px;
}

.citymaphinttopright
{
	background-image: url(../gfx/CityMapTooltipTopRight.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	height: 15px;
}

.citymaphintleft
{
	background-image: url(../gfx/CityMapTooltipLeft.gif);
	background-repeat: repeat-y;
	background-position: right;
}

.citymaphintcentre
{
	background-color: #FFFF99;
	padding: 3px;
}

.citymaphintright
{
	background-image: url(../gfx/CityMapTooltipRight.gif);
	background-repeat: repeat-y;
	background-position: left;
}

.citymaphintbottomleft
{
	background-image: url(../gfx/CityMapTooltipBottomLeft.gif);
	background-repeat: no-repeat;
	background-position: top right;
	height: 15px;
}

.citymaphintbottom
{
	background-image: url(../gfx/CityMapTooltipBottom.gif);
	background-repeat: repeat-x;
	background-position: top;
	height: 15px;
}

.citymaphintbottomright
{
	background-image: url(../gfx/CityMapTooltipBottomRight.gif);
	background-repeat: no-repeat;
	background-position: top left;
	height: 15px;
}


/* Job Groups - Wow - Job group summaries
-------------------------------------------------------------------------------*/

#jobgroupsummary .crcigraphic {float: left; padding-right: 10px; padding-bottom: 0.5em;}
#jobgroupsummary .showalljobs {font-size: 80%;}
#jobgroupsummary .summary {margin-left: 190px;}
#jobgroupsummary .jobgroupsummaryjobs {clear: both;}

/* Video case studies & Job Groups
-------------------------------------------------------------------------------*/
#videocasestudies .icon, #jobgroups .icon {float:left;}

#videocasestudies p {margin-left: 120px;}
#jobgroups p {margin-left: 115px;}

#videocasestudies .bluebox {clear: none;}

#videocasestudies div.left, #jobgroups div.left {width: 360px;  float: left; padding-right: 20px; clear: both;}
#videocasestudies div.right, #jobgroups div.right {width: 360px;  float: right;}
#videocasestudies div div, #jobgroups div div {margin-bottom: 20px; position: relative;}
#videocasestudies div.left img, #videocasestudies div.right img, #jobgroups div.left img, #jobgroups div.right img {position: absolute; top: 0.5em;}
#videocasestudies div.left h2, #videocasestudies div.right h2, #jobgroups div.left h2, #jobgroups div.right h2 {margin: 0px 0px 5px 54px;}
#videocasestudies div.left p, #videocasestudies div.right p {margin-top: 0px; margin-left: 54px; font-size: 90%;}
#videocasestudies div.left p a, #videocasestudies div.right p a {font-weight: normal;}

#videocasestudy h3, #jobgroup h3, #jobgroupsummary h3 {background: #c7e2fb; padding: 5px; color: #0D174B;}
#videocasestudy h2, #jobgroup h2 {text-align: left; margin-top: 0.5em; padding: 10px 5px; }

#videocasestudy div.descbox h4, #videocasestudy div.demodescbox h4 {width: 490px;}

#videocasestudy .jobgroupicon, #jobgroup .jobgroupicon 
{margin-right: 0.6em; vertical-align: baseline;}




/* On this Day
-------------------------------------------------------------------------------------------- */

#onthisdaytrivia {
	background-color: #DDEFFE;
	border: 1px solid #B1D6FA;
	clear: both;
	margin: 0 auto 6px;
	width: 540px;
	padding: 10px;
}

#onthisdaytrivia h3 {
	text-align: center;
}
#onthisdaytrivia p {
	text-align: left;
}

/* Localising
-------------------------------------- */

/* LocalisingLogon */
/* LocalisingJob.aspx */

#localisingjob a.jedlink {font-size: 90%;}
#localisingjob a.jedlink img {padding-right: 10px;}

#localisingjob div.localinfotext, #localisingjob div.localinfopicture {margin-left: 25px; margin-bottom: 1em;}
#localisingjob div.localinfotext {border: 1px solid #B1D6FA;}
#localisingjob div.localinfotext p {padding: 5px;}

#localisingjob h3, #localisingjob p.addnew {margin-left: 25px;}
#localisingjob p.addnew .mockbutton { width: 15em;}

#localisingjob h4 {background-color: #c7e2fb; padding: 5px; position: relative;}
#localisingjob h4 span.title {display: block; text-align: left; width: 580px;}
#localisingjob h4 span.links {position: absolute; right: 5px;}
#localisingjob div.localinfopicture h4 span.links {top: 5px;}
#localisingjob div.localinfopicture h4 span.links {top: 15px;}
* html #localisingjob h4 span.links {right: 15px;}
#localisingjob h4 img {margin-left: 10px; vertical-align: middle; margin-top: 2px;}
#localisingjob h4 a img {vertical-align: middle; margin-top: 0px;}

#localisingjob h4 a {font-size: 90%;}
#localisingjob h2, #localisingnewtext h2, #localisingedittext h2, #localisingnewpicture h2, #localisingeditpicture h2
{
	position: relative;
	background: #7FC1F5 url(../gfx/menu_slice.gif); padding: 2px 2px 2px 5px; clear: both; border: 1px solid #fff;
}

#localisingjob div.localinfopicture h4
{
	padding: 20px 15px 10px 15px;
}

#localisingjob div.localinfopicture img.localpicture
{
    margin: 0px 0px 0px 15px;
    position: relative;
    top: 15px;
    z-index: 4;
    border: 1px solid #293380;
    -moz-box-shadow: 10px 10px 5px #999999; /*Mozilla*/
    -webkit-box-shadow: 10px 10px 10px #999999; /*Safari/Chrome*/
    box-shadow: 7px 7px 4px #999999; /*CSS3*/
    }


/* LocalisingNewText.aspx */
#localisingnewtext ol {list-style-type:decimal; margin: 0 0 0 60px;}
#localisingnewtext li p {margin-bottom: 0px;}
#localisingnewtext li {margin-bottom: 1em;}
#localisingnewtext #Title {width: 500px;}
#localisingnewtext #Contents {width: 500px;}

/* LocalisingEditText.aspx */
#localisingedittext #Title {width: 500px;}
#localisingedittext #Contents {width: 500px;}

/* LocalisingNewPicture.aspx */
#localisingnewpicture ol {list-style-type:decimal; margin: 0 0 0 60px;}
#localisingnewpicture li p {margin-bottom: 0px;}
#localisingnewpicture li {margin-bottom: 1em;}
#localisingnewpicture #Caption {width: 500px;}

/* LocalisingEditPicture.aspx */

#localisingeditpicture #Caption {width: 500px;}

/* Help and Factsheet Pages
-------------------------------------------------------------------------------------------- */
#help {position: relative;}
#content #help #help_menu a {border-top: 1px solid #4C609C; border-bottom: none; }

#help #help_menu {position: relative; width: 200px;  padding:0px; border: 2px solid #4C609C; font-size: 90%; float: left; z-index: 4;}
#help_menu h2 {background-color: #4C609C; text-align: center; color: White; font-weight: bold; margin: 0px; padding: 5px; }
#help_menu p {text-align: left; margin: 0px; padding: 0px; background-color: #FFE4B2;}
#help_menu p img {height: 15px; width: 15px; vertical-align:middle;}
#help_menu a {position: relative; padding:	2px 2px 5px 5px; display: block; width: auto;}
#help #help_menu a:hover {position: relative; background-color: #FFECC7; color: Black;}

#help img.icon {float: left; padding-right: 10px;}

/* Indent the whole first paragraph if we have an icon in that page */
#help .icon_indent {margin-left: 130px;} /* icon is 120px wide, plus 10px of padding */

#help_menu a.backlink
{
	font-size: 100%;
	background: url(../gfx/2arrowsleft.gif) no-repeat 2px 50%;
	padding: 2px 2px 5px 17px; 
}


#help_menu ul
{
	list-style:				none; 
	margin:					0px; 
	padding:				0px; 
	border:					none;
	padding:				0px;
	text-align: left;
	line-height: 100%;
}

#help_menu ul li 
{
	margin:					0px; 
	color:					black;	
}

#help_menu { border: 10px solid red; }

p { border: 1-px solid green; }

#help_menu ul li a
	{background-color: #c7e2fb; display: block; width: auto;}

/* The right-arrow and down-arrows for the help menu. */

li.expandable a:before, li.expandable span:before  { font-family: "FontAwesome"; font-size: 1em; color: #293380; content: "\f029"; padding-right: 0.5em; }

li.expanded a:before, li.expanded span:before { font-family: "FontAwesome"; font-size: 1em; color: #293380; content: "\f026"; padding-right: 0.5em; }

#help_menu ul ul
{
	list-style:				none; 
	margin-bottom:			0px; 
	margin-top:				0px;
	padding:				0px;
}

#help_menu ul ul li a {background-color: #F6FEFF; padding-left: 20px; display: block; width: auto;}

#help_menu li.activepage {position: relative; padding: 2px 2px 5px 5px; display: block; font-weight: bold; border-top: 1px solid #4C609C;background-color: #FFCC66;}
#help_menu ul ul li.activepage {position: relative; padding-left: 20px;}


#help_menu ul ul ul li a {background-color: #F6FEFF; padding-left: 40px; display: block; width: auto;}

#help_menu ul ul ul li.activepage {position: relative; padding-left: 40px;}


div#help_details{ margin:10px 0 20px 225px;  padding: 0;  text-align:left;}

#help #help_details ul, #help #help_details ol {margin: 0 0 1em 30px;}
#help #help_details li {margin: 0 0 0.75em 0;}

.smallhelp {font-size: x-small;}

img.rocketboy {margin-left: 1em; margin-bottom: 1em;}
img.thinkygirl {margin-right: 1em; margin-bottom: 1em;}


#help table {border: none; border-collapse: collapse; margin-bottom: 1em;}
#help caption {caption-side: top; color: black; padding-bottom: 0.5em; text-align: left;}
#help table th {background-color: #c7e2fb ; border: 1px solid black; padding: 0.25em 1em; text-align: left;}
#help td.ucaspoints, #help th.ucaspoints {font-weight: bold;}
#help table td {border: 1px solid DarkSlateGray; padding: 0.25em 1em;}
#help table.btec th {width: 16.6666%;}
#help table.alevel th {width: 33.3333%;}
#help table.ib th {width: 50%;}
          
#help p.feenotes {font-size: small; margin-top: 2px;}

#help #help_details ul.checklist {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}

#help ul.checklist li {
background-image: url(../gfx/tick-icon.gif);
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 20px;
}

#help .GcseGradeTable td {font-size: 120%;}
#help .GcseGradeTable .height6 {height: 1.5em;}
#help .GcseGradeTable .height8 {height: 2em;}
#help .GcseGradeTable .height9 {height: 2.25em;}
#help .GcseGradeTable .height12 {height: 3em;}

#help .GcseGradeTable .row5 TD, #help .GcseGradeTable .row9 TD {border-top: 2px solid;}

/* Treasure Hunt
-------------------------------------------------------------------------------*/
/* General treasure hunt styles
-------------------------------------------------------------------------------*/
span#treasurehuntname, span#treasurehuntowner, span#treasurehuntdate, span#treasurehuntpassword, span#challengename, 
p#treasurehuntchallengeanswer
{
	 font-weight: bold;
}

/* Main Menu*/

#treasurehuntcontent p#treasurehunttitle {font-weight: bold; }



/* Results page - HuntResults.aspx/HuntTutorDetails.aspx
-------------------------------------------------------------------------------*/
#treasurehunters table.treasurehunterstable {
	padding: 0px; 
	color: gray;
	border-collapse: collapse;
	margin-bottom: 1em;
	font-size: 100%;
}

#treasurehunters table.treasurehunterstable td {padding: 5px 1em;}

#treasurehunters table.treasurehunterstable td.huntername {color: black; font-weight: bold;}

#treasurehunters table.treasurehunterstable tr.current_user_stillhunting {
	background-color: #FFFF99;
}

#treasurehunters table.treasurehunterstable tr.current_user {
	background-color: #ADFF2F;
	 font-weight: bold;
}

#treasurehunters table.treasurehunterstable tr.found_job {
	color: black;
}

/* HuntTutorAnswers.aspx
-------------------------------------------------------------------------------*/

#hunttutoranswers ul
{ margin-left: 2em;
	}

#hunttutoranswers li
{ list-style-type: disc;
	}
	
/* HuntTutorSelect.aspx, HuntSelect.aspx
------------------------------------------------------------------------------*/
#hunttutorselect ul.treasurehunt, #huntselect ul.treasurehunt
{
	list-style: none;
}

#hunttutorselect ul.treasurehunt, #huntselect ul.treasurehunt
{
	margin-left: 2em;
}

#hunttutorselect ul.treasurehunt li, #huntselect ul.treasurehunt li {
	padding: 0.25em 0 0 35px;
	font-size: 90%;

}

#hunttutorselect ul.treasurehunt li span, #huntselect ul.treasurehunt li span{
 padding: 0 0 0 35px;

}

#hunttutorselect ul.treasurehunt li a, #huntselect ul.treasurehunt li a
{
	
	background-repeat: no-repeat;
	background-position: left bottom;
	padding: 0.5em 0 0 35px; /*extra padding added at the top to stop the background gfx disappearing*/

	
}

#hunttutorselect ul.treasurehunt li, #huntselect ul.treasurehunt li
{
margin-top: 1.5em;
}

#hunttutorselect ul.treasurehunt li a, #huntselect ul.treasurehunt li a { 
	background-image: url(../gfx/icon-treasure.gif);
}

#huntselect img {float: left;}
#huntselect div.instructions {width: 610px; margin-left: 120px; padding: 10px; }
#huntselect p.prompt { clear: left; }

/* ConfigurationHuntIPSegmentation
------------------------------------------------------------------------------*/

#configurationhuntipsegmentation {}


/* HuntTutorEdit.aspx
------------------------------------------------------------------------------*/

#hunttutoredit span.tutornotes {font-style: italic;}

/* HuntTutorDetails.aspx
------------------------------------------------------------------------------*/

#hunttutordetails div.details {position: relative; border: 1px solid #B1D6FA; padding: 0.5em;}
#hunttutordetails div.challenge {border: 1px solid #B1D6FA; padding: 0.5em; margin-top: 1em; }
#hunttutordetails div.challenge p.treasure_challenge, #hunttutordetails div.challenge p.treasure_ready {text-align: center; padding: 0.25em;}
#hunttutordetails div.hunters {padding: 0.5em; margin-top: 1em;}


/* HuntTutorSetChallenge.aspx
------------------------------------------------------------------------------*/

#hunttutorsetchallenge dl {margin: 0px 0px 20px 0px;}
#hunttutorsetchallenge dt {font-weight: bold; margin: 0 0 0 25px; text-indent: -19px;}
#hunttutorsetchallenge dd {padding: 0 1em 1em 1em;}
#hunttutorsetchallenge dd, #hunttutordetails div.challenge p.huntchallengetutornote {margin: 0.5em 2em 0 3em;  font-size: 90%; font-weight: bold; color: #293380;}
#hunttutordetails div.challenge p.huntchallengetutornote {margin-bottom: 1em;}
#hunttutorsetchallenge dd span, #hunttutordetails div.challenge p.huntchallengetutornote span {display: block; border: 1px solid #B1D6FA; padding: 0.25em; margin-top: 0.25em; background-color: #DDEFFE; color: #293380; font-weight: normal;}

p#treasurehuntername {
	font-weight: bold;
	font-size: 120%;
}

#content a.huntchallengetutornoteheader {
	border-bottom: 0px;
}



/* Job.aspx
------------------------------------------------------------------------------*/
#details div.treasurefound {margin: 1em 0; min-height: 110px;}
#details div.treasurefound img {float: left;}
#details div.treasurefound div.message  {width: 422px; border: 1px solid black; background-color: #FFFF99; margin-left: 120px; padding: 10px;}
#details div.treasurefound div.message p.welldone {font-weight: bold;}

/* HuntResults.aspx, HuntStart.aspx
------------------------------------------------------------------------------*/

#huntresults div img, #huntstart img {float: left;}
#huntresults div.huntdetails, #huntstart div.instructions {width: 610px; margin-left: 120px; margin-bottom: 1em; padding: 10px; }
#huntresults div.congratulations {border: 1px solid black; background-color: #FFFF99; padding: 0.5em; margin: 1em 0;}

/* HuntJoin.aspx
------------------------------------------------------------------------------*/

#huntjoin input#User, #huntjoin input#Password {width: 20em;}

/* About.aspx, JobVideoCredits.aspx, JobsMediaAvailability.aspx
------------------------------------------------------------------------------*/
#generic dl {margin: 0px 0px 20px 0px;}
#generic dt {font-weight: bold;}
#generic dd {margin-bottom: 10px;}

#generic ul { padding-left: 40px; }

/* Disclaimer page in the help */
p.smallprint {font-size: 50%;} 

/* Results of diagnostics tests in About.aspx */
.diagnostic-failure 
{
    color: #CC0000;
    font-weight: bold;
}

.diagnostic-success
{
    color: green;
}

/* Notes on about.aspx */
#generic dt.notes
{
	font-weight: normal;
	font-style: italic;
}


/* FOOTER CONTENT
-------------------------------------------------------------------------------------------- */


/* Additional for print
-------------------------------------------------------------------------------------------- */
@Media print 
{
	/* This style is not in the "print" stylesheet because we only want it to apply when
	the user is actually printing and not when using the "print" stylesheet to display a
	page on screen (e.g. the job print preview). */
	.non-printable { display: none; }
}




/* ----------------------------------------------------------------------------------------
 * ReadSpeaker styles
 * ---------------------------------------------------------------------------------------- */

.rsfloating 
{
	display: inline !important;
}

span.ttsLineBreaker 
{
	display: block;
}

.ttsWrapper 
{
	position: relative;
}

/* For any h2 or h3 which has a ttsWrapper around it, increase the padding-right to accommodate the player */
#content .ttsWrapper h2, #content .ttsWrapper h3, #content .ttsWrapper h3.picturecaption {
	padding-right: 72px; /* space for the tts player */
}

/* descbox is on the starred job results lists */
div.descbox .ttsWrapper h4, div.demodescbox .ttsWrapper h4 {
	padding-right: 72px; /* space for the tts player */
}

#content .deconfuse .ttsWrapper h3 {
	/* border: 1px solid yellow; */
	padding-right: 0;
}

.deconfuse .ttsWrapper span.deconfuseLineBreaker {
	/* Break the "What's the difference?" line, but only when we are in TTS mode. */
	display: inline-block;
}

.ReadSpeakerPlayer
{
	display: inline;
	position: absolute !important; /* !important because of VideoCaseStudies.aspx */
	top: 2px;
	right: 0;
	width: 65px !important; /* !important because ReadSpeaker writes inline style for this. */	
	/* float: right; float makes no sense with absolute positioning */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.3em;
	margin-top: 2px;
	margin-right: 0px;
	 
	/* border: 1px solid gray; */
}

/* When on a blue bar heading, we need a little more breathing space to the right */
#details .ReadSpeakerPlayer, 
#onthisdaypage .ReadSpeakerPlayer,
#contact .ReadSpeakerPlayer,
#jobadswhy .ReadSpeakerPlayer,
#jobtransferableskillswhy .ReadSpeakerPlayer,
#jobpaymore .ReadSpeakerPlayer, 
#toptenjobs .ReadSpeakerPlayer,
#notindemomode .ReadSpeakerPlayer 
{
	margin-right: 2px;
}

div.descbox .ReadSpeakerPlayer
{
	top: 0; margin-top: 0;
}

/*If the job lists have quiz star ratings, and TTS is enabled, then we move the quiz stars below the TTS icon */
div.hasTTS div.jobresultdecorations {
	top: 2.2em; margin-top: 0;
}

div.hasTTS p.starredjoblist 
{
	padding-right: 60px;
}

.quiztrailform .ReadSpeakerPlayer, .quiztrailform .ReadSpeakerPlayer
{
	display: none; /* hide second player on QuizTrail page */
}

.deconfuse .ReadSpeakerPlayer
{
	/* background-color: Aqua; */
	padding: 0 !important;
	top: -2px;
}

/* When on the picture captions we want the player to appear a bit lower so it aligns with the text */
#details div.left .ReadSpeakerPlayer, 
#details div.right .ReadSpeakerPlayer 
{
margin-top: 17px;
text-align: left;
}

/* ************** player area, expanded ***************************/

/* The expanding area is done by our JavaScript - look for "window.rsConf.ui.player ="
   ReadSpeaker appends that after the play button, but when it does so it wraps it in a DIV like this:
     <div class="rsbtn_exp rsimg rspart">...our javascript inserted stuff...</div>
   So the class names 'rsbtn_exp', 'rsimg', and 'rspart' have to be treated as magic. */


.ReadSpeakerPlayer .rsbtn_exp.rsimg.rspart
{
	background: none;
	float: left;
	display: none;
	position: absolute !important; /* !important because of VideoCaseStudies.aspx */
	top: 0px !important;
	height: 20px !important;
	width: 36px !important; /* If you make this too wide, it goes over the tts bubble to its right */
	
	/* border: 1px solid red; */
}

/**
 * We want the expanding area to be visible only when the player
 * is expanded, hence the .rsexpanded class.
 */
.ReadSpeakerPlayer.rsexpanded .rsbtn_exp.rsimg
{
	display: block;
}

.rsbtn_box 
{
	position: absolute;
}


.rsimg
{
	position: relative;
	background-color: transparent;
	background-image: url(../ReadSpeaker/ReadSpeakerJedSprite.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 0 0;
	float: left;
}

a.rsimg, a.rsimg:hover, a.rsimg:visited
{
	/* no underline of the button links */
	border-bottom: none !important;
	
	/* Prevent the dotted outline when has focus. */
	outline: 0;
}


.rsbtn_text, .rsbtn_btnlabel
{
	/* The text in the readspeaker buttons is for non-CSS devices only (e.g. screen readers) */
	display: none !important;
}

.rsdefloat
{
	float: none;
}


/* ************** player area *********************** */

/* This player class name comes up in three places: 
 * 1) here (below)
 * 2) the class name we give to the player div in our html page
 * 3) the window.rsConf.ui.rsbtnClass= in our javascript
 * All of the above must match. */
.ReadSpeakerPlayer
{

	
	/* border: 1px solid red; */
}


/* ************** speech bubble ********************* */

/* The readspeaker play button. */

.rsbtn_play  /* <- This name is 'magic' - ReadSpeaker javascript looks for it by name. */
{
	width: 24px;
	height: 20px;
	background-position: -1px -1px; /* sprite first column, first row */
	margin-left: 39px; /* This determines the gap between the play button and the speech bubble. */
}

.rsbtn_play:hover
{
	background-position: -1px -22px; /* sprite first column, second row */
}

.rsplaying .rsbtn_play
{
	background-position: -1px -43px; /* sprite first column, third row */
}

/* Our speech bubble hover state (light yellow) is the same whether we are in play mode or not. */


/* **************** The play/pause button ********************* */

/* *** normally *** */

.rsbtn_pause /* <- This name is 'magic' - ReadSpeaker javascript looks for it by name. */
{
	width: 16px;
	height: 20px;
	background-position: -26px -1px; /* sprite second column, first row */
	margin-left: 3px;
}

.rsbtn_pause:hover
{
	background-position: -26px -22px; /* sprite second column, second row */
}


/* *** when playing *** */

/* ReadSpeaker automagically changes div outer class to 'rsplaying' when playing *** */

.rsplaying .rsbtn_pause /* <- Both parts of this name are 'magic' - set by ReadSpeaker. */
{
	background-position: -26px -43px; /* sprite second column, third row */
	margin-left: 3px;
}

.rsplaying .rsbtn_pause:hover
{
	background-position: -26px -64px; /* sprite second column, fourth row */
}


/* ******************* settings button ***************** */

.rsbtn_settings /* <- This name is 'magic' - ReadSpeaker javascript looks for it by name. */
{
	width: 16px;
	height: 20px;
	background-position: -43px -1px; /* sprite third column, first row */
}

.rsbtn_settings:hover
{
	background-position: -43px -22px; /* sprite third column, second row */
}


/* End of the all-browser generic styles */

/* ********************** sentence and word highlighting overload ***************** */

.sync_sent_highlighted 
{
	/* See hlsent at the top of ReadSpeaker.js */
}

.sync_sent_highlighted .sync_word_highlighted
{
	/* See hlword at the top of ReadSpeaker.js */
	/* border-bottom: 3px solid LightGray !important; */
	
}




/* Steve's stuff that we need to find a home for. */
#glossarydefinition p, div.popup p
{
	line-height: 1.5em;
}

p.glossary-more-problem
{
	font-style: italic;
}

/* FB12487 */
div.descbox div.ttsWrapper
{
	margin-left: 60px;
}
/* FB12487 */
div.descbox div.ttsWrapper h4
{
	margin-left: 0;
}


/* No TTS button if it is in the grey-out box that goes over some
   bonus questions when in demo mode. */
.unavailablebonusbox .ReadSpeakerPlayer 
{
	display: none;
}

/* External link icon for any URL that starts with 'http' (which will also catch 'https') 
	FontAwesome, 11pt */
a[href^="http"] {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAMAAAE2x/TlAAAAB3RJTUUH4AUTDyQmeGXlRQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAARnQU1BAACxjwv8YQUAAABaUExURfb+/9nm7WOHqD5pknSVsu32+ZmzyN7r8dzo73eXtImlvsTW4WyOreTv9MfY4+Ht8093nFqAo/P7/Xqatefy9qi+0GmMq0Brk+r0+ElymKK6zcra5VV7n12CpA+ZAm8AAAABdFJOUwBA5thmAAAAfElEQVR42jWOWQLCIAxEn00RuqXSat3w/tc0AZ2fmTcsCYAsUPDAljiJeC4fLyxe1L2HflJND6us3PwN9eJE07sUBlXlKUTjPR/ue7YcWTMztXfvxBQgjHPVKxzeIOn32bbL3Tn+KS+EW+NK1zq2nSfbRWdP3Tk2pWE0/AIYfATx5H2bJwAAAABJRU5ErkJggg==');
	background-color: transparent;
	background-position: center right; 
	background-repeat: no-repeat;
	padding-right: 19px;
}

/* Logo to show on inactive links in disc version when we detect there is no internet available for URL checking */
.nointernet { 
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAIAAAD5fKMWAAAAB3RJTUUH5AIaECgYVnKCIwAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAFCSURBVHjaY/iPAR6+/fzqyw9kESAXKAhkML37/iulY6V91mQgYmBgePTuS2zN/AnL9r7++pMBDIAMIBcoCJRiaZ+/00xHoTLRHSLHzMQoIy545PxdILsgyhlIApUCuUBBOSEeZhZ5y8IoJ2VxASEeDqAcHwebhYHyySsPrtx59uzNhxOX70OULq2PAcoygTAzEwMSkBbg7soPhNgAUdqU4QORQlEHB/w8nApSQhA2kMHHwwlhs2Aq/fLnX/v8HRBTgVy4H0S52VnwKAW6ByhSNnE9XAO6S959+nb17nOIUqAHkP3w/edvBrvMSfdef0SOizsv3j95/wXOBpJALjR2MN0NDE2gkRD2i3efcvvXAbnAwAb5UlVObPeJ664Wmpja/v39t/ngZVmwXyGA8eazt10Ld99+9AprUEKiWYiTDcIFAEZY0529OS8QAAAAAElFTkSuQmCC');
	background-color: transparent;
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 19px;
}

/* Tables used in help pages - also turns up in HI */
table.helppages
{
	border: none;
	border-collapse: collapse;
	font-size: 90%;
}

table.helppages td.rowhead
{
	font-weight: bold;
}

table.helppages tr.headings
{
	background-color: #A5CFF3; 
	font-weight: bold;
}

table.helppages th, table.helppages td
{
	padding: 0.25em !important;
}

div.graphnotice { /* also in UserDataSaveFile.aspx */
	border-top: 1px solid silver;
	padding-top: 1em;
	font-size: 80%;
}
/* This section of the stylesheet contains screen styles used by all browsers */

/* GENERAL STYLES
-------------------------------------------------------------------------------------------- */

/* Adds a blue box round the content */
.bluebox {
	background-color: #DDEFFE;
}

/* General 
-------------------------------------------------------------------------------*/
/* TODO - Liz this would be better done as #contentwrap div {} - ie set the first div within the content, but will need thorough testing once updated */

#mainmenu, #toptenjobs, #myjed, #jobgroups, #jobgroup, #jobsubjectsearch, #generic, #onthisdaypage, #myjobhistory, 
#videocasestudies, #videocasestudy, #configurationlogin, #myconfiguration, #jobsubjectsearchresults,
#quizjobresults, #quizanswersummary, #quizpage, #myjobsbyshortliststate, #mynotes, #configuration, #configurationlogin, #toptenjobsall,
#register, #cookiebouncer, #oldbrowser,
#login, #myregion, #register, #licencedetails, #helppages, 
#localisinglogon, #localisingjobsearch, #localisingjob,
#localisingjobpreview, #localisingnewtext, #localisingnewpicture, #localisingeditpicture, #localisingedittext,
#help, #voucher, #changetutorpassword,
#jobnamesearch, #userdataload, #userdatasave, #configurationall, #configurationadd, #userdataenterpassword, #logout,
#logoutcomplete, #chooseprofile, #joblist, #configurationindex, #configurationvideonag, #configurationrestrictedtutor, #myannotatedjobs, #myjedrecord, #mynotformejobs,
#userdataloadconfirm, #jobpicturecredits, #jobgroupsummary, 
#huntjoin, #huntquit, #huntresults, #huntselect,#huntstart, 
#hunttutoranswers, #hunttutordetails, #hunttutoredit, #hunttutorselect, #hunttutorsetchallenge, #configurationhuntipsegmentation, #contact,
#jobadswhy, #jobtransferableskillswhy, #jobpaymore, #notindemomode, #ofqual-course

{
	text-align: left;
	margin: 10px 2px 10px 18px;
}

#mainmenu {border-top: 0px;}

#logout {margin-top: 2em;}

/* General styles for all the pop-ups */
.popup
{
    position: absolute;
    z-index: 100;
}


/* PAGE STRUCTURE - Be careful when editing this section, contains hacks
-------------------------------------------------------------------------------------------- */
/*  \*/
html, body { height: 100%; }
/*  */
* { padding: 0; margin: 0; }
head+/**/body .fc:after {
	
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

/* mac hide \*/
* html .fc { height: 1%; }
/* End hide */

body {
	background: #F6FEFF;
	color: #333;
	overflow: hidden;
}
* html body {
	margin: 84px 0 30px 0;
	text-align: center;
}

#header, #footer {
	left: 0;
	width: 100%;
}
#header {
	background: #c7e2fb url(../gfx/bg-header-84.gif) center bottom repeat-x;
	height: 84px;
	top: 0;
}

#header a, #footer a {
        font-weight: bold;
    }

#footer {
	background:  url(../gfx/bg-footer.gif) center repeat-x;
	/*background-color removed as was causing a line to show when text size enlarged */
	bottom: 0;
	height: 30px;
}
* html #header, * html #footer { position: absolute; }
html>body #header, html>body #footer { position: fixed; }

#content { overflow: auto; width: 100%; overflow-y: scroll;} /* overflow-y fixes bug 1029 */
* html #content { height: 100%; }
html>body #content { position: fixed; top: 84px; bottom: 30px; }

div.clear {
	clear: both;
	height: 0px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 0px;
}

br.clear {clear: both;}

/* Markup for text we only want available to screenreaders */
.forscreenreaders {position: absolute; top: -5000px; height: 0;}


/* STYLES FOR THE POP-UP LIGHTBOX LINKS
-------------------------------------------------------------------------------------------- */
/* Styles for the lightbox background element */
.lightbox-background {
	/* Make the lightbox background fill the viewport. We slightly overfill the background to fix the occasional gremlin
	   caused by the pop-up navigation menus on the iPhone. */
	position: fixed;
	left: -10%;
	top: -10%;
	width: 120%;
	height: 120%;
	padding: 0;
	margin: 0;
	border: 0;

	/* Set the lightbox background to de-emphasise the background content */
	background-color: gray;
	opacity: 0.5;

	/* Move the lightbox background just behind the foreground */
	z-index: 999;
}

/* Styles for the lightbox foreground element */
.lightbox-foreground {
	/* Position the lightbox foreground, allowing a border around the edge for the background to show through */
	position: fixed;

	left: 1%; /* At narrower sizes we go pretty much edge-to-edge to try to fit variable rate values without line wrapping.
	             On med and wide this gets ignored which is OK coz we can afford to give it a bit more room. */
	width: 98%;

	bottom: 2%;	/* We position the lightbox relative to the bottom of the screen so that the OK button is not obscured by the iPhone's pop-up navigation menu (see FogBugz 11317). */
	height: 96%;

	padding: 0;
	margin: 0;
	border: 0;

	/* Set a default background colour so that the lightbox background does not show through */
	background-color: white;

	/* Move the lightbox foreground in front of everything else */
	z-index: 1000;
}

/* Styles for the lightbox header element */
.lightbox-header {
	/* Position and size the header */
	position: absolute;
	top: 0;
	width: 100%;
	height: 2em;
}

/* Link for closing the lightbox */
.lightbox-header a {
	display: block;
	width: 4.5em;
	line-height: 1;
	margin: 0.5em 0.25em 0.5em auto;
	text-decoration: none;
	font-weight: normal;
}
.lightbox-header a:hover {
	text-decoration: underline;
}
.lightbox-header a:after {
	font-family: "FontAwesome";
	content: "\f022";
}

/* Styles for the lightbox content element */
.lightbox-content {
	/* Position and size the content */
	position: absolute;
	top: 2em;
	bottom: 2.5em;
	width: 100%;

	/* Many of our lightboxes use content in an iframe, but iOS devices will expand iframes to fit
	   their content which can spoil our layout. So we need to specify scrolling behaviour on the
	   iframe container and, to prevent a scroll bar appearing on desktop browsers, we must make
	   the iframe a little smaller than the content container. */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.lightbox-content iframe {
	width: 100%;
	height: 98%;
	border: none;
}

/* Styles for the lightbox footer element */
.lightbox-footer {
	/* Position and size the footer */
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 2.5em;
}

/* Styles for the OK button in the footer */
.lightbox-footer input {
	display: block;
	padding: 0.3em 0; 
	margin: 0 auto;

	/* Make the button nearly full size on smaller screens */
	width: 98%;

}

@media screen and (min-width: 640px)
{
    .lightbox-footer input {
        /* Make the OK button normal size on larger screens */
	    width: 4em;
	    margin-right: 0.25em;
    }
}

/* HEADER CONTENT
-------------------------------------------------------------------------------------------- */
#headerwrap {
	margin: 0 auto;
	text-align: left;
	width: 770px;
}
#headerwrap div {
	float: left;
}

#headerleft {
	width: 196px;
	padding: 5px 0 0 0;
}

#header.higherideas_header #headerleft { /* If the customer has Higher Ideas, we need space for three icons */
    padding: 3px 0 0 0;
}

#headerleft a {
        display: block;
        line-height: 23px;
        height: 22px;
        margin: 0;
        padding: 0 0 0.5em 35px;
        white-space: nowrap;
        font-size: 90%;
        /*width: 196px;*/
}

#header.higherideas_header #headerleft a { /* If the customer has Higher Ideas, we need space for three icons */
    padding: 0 0 3px 35px;
}

        html >body #headerleft a {
	width: 90px;
}

#headerleft a.higherideas {
    background: url(../gfx/higherideas.gif) no-repeat left center;
}

#headerleft a.mainmenu {
	background: url(../gfx/sunset.gif) no-repeat left center;
}

#headerleft a.profiles {
	background: url(../gfx/icon-profile.gif) no-repeat left center;
}

#headerleft a.list {
	background: url(../gfx/icon-return.gif) no-repeat left center;
}

/*Return to App is done in a different way as the icon resides in higher ideas */

#headerleft a.returntoapplication {
	padding-left: 0px;
}

#headerleft a.returntoapplication img {
	vertical-align: middle;
	margin-right: 7px;
}

#headerstrap 
{
	position:relative; 
	color: #0D174B;
	padding: 44px 0 0 0;
	width: 378px;
	margin: 0 auto;
	height: 29px;
}

#headerstrap { position:relative; }/* add to existing styles*/

#headerstrap a {
	position: absolute;
	left: 125px; top: 0; 
	width: 125px; height: 50px;
	display: block;
	color: #000;
	text-decoration: none;
	text-indent: -999em;/* hides text*/
}

#headerstrap h1 
{
	position: absolute;
	color: #0D174B;
	font-weight: bold;
	width: 378px;
	margin: 0px;
	bottom: 0px;
	text-align: center;
}



#headerstrap h1 a {
	position: relative;
	text-indent:0;
	color: #0D174B;
	font-weight: bold;
	width: 378px;
	margin: 0px;
	height: auto;
	left: 0; top:0;
}

#headersearch {
	width: 196px;
	text-align: right;
	z-index: 4;
	font-size: 90%;
}
#headersearch #searchform {
	color: #333;
	float: right;
	margin: 0;
	padding: 9px 0 0 0;
}
#headersearch #searchform p {
	margin: 0;
}
#headersearch #searchform label {
	display: none;
}
#headersearch #searchform input {
	float: left;
	width: 135px;
	margin: 0px;
}
#headersearch #searchform .search_go {
	float: left;
	margin: 0 0 0 8px;
	width: 23px;
	-webkit-border-radius: 0;
}

#headersearch a
{
	position: relative;
	display: inline;
	float: none;
	line-height: 23px;
	height: 22px;
	white-space: nowrap;
	/*width: 120px;*/
	text-align: right;
	margin: 0;
	padding: 0 35px 0.5em 0;
	top: 3px;

}

html>body #headersearch a {
	width: 90px;
}

#headersearch a.history {
	background: url(../gfx/icon-history.gif) no-repeat right center;
}

/* MAIN CONTENT AREA
-------------------------------------------------------------------------------------------- */
#content {
	clear: both;
	padding: 5px 0 2px;
}
#contentwrap {
	margin: 0 auto;
	width: 770px;
}
#contentwrap p {
	line-height: 150%;	
}

#content a, #content table a {
	border-bottom: 1px dashed #FFCC66;
}

#content a:hover, #content table a:hover {
	border-bottom: 1px solid #D98707;
}

/* As used on installed version only.  Spans are turned into A HREF
	by AJAX call as we get the URL for them. */
.contact-link {
	font-style: italic;
}

#content a.lightweight-link {
	font-weight: normal;
}
#content a.no-break {
	white-space:nowrap;
}

#content .demobackground a:hover, #content .demo a:hover {
	background-color: #FFE4B2;
}

#content a.nounderline {
	border-bottom: none;
}

#content a.mockbutton, #content a.deletehunter_mockbutton
{
	border: 3px double white;
	border-bottom: 3px double white;
}

#content a.mockbutton:hover, #content a.deletehunter_mockbutton:hover
{
	border: 3px double white;
	border-bottom: 3px double white;
}

#content #SpeechButton {border-bottom:none;} /*suppress the underline on the tts link */

#content a.helplink
{
    /* De-emphasise normal help links so that "important" help links are emphasised */
    font-weight: normal;
}



/* HOME PAGE - ON THIS DAY/TREASURE HUNT
-------------------------------------------------------------------------------------------- */
.mainmenubox { width: 540px; }

/* HOME PAGE - VIDEO VERSION WARNING
-------------------------------------------------------------------------------------------- */
#videoversionwarning { width: 540px; }


/* QUIZ PAGES
-------------------------------------------------------------------------------------------- */

/* Quick Quiz Section/ Big Quiz Section
-------------------------------------------------------------------------------*/
#quickquizsection div.indent, #quizindepthsection div.indent, #quiztrailquestion div.indent
{
	margin-left: 130px;
}


/* JOB DIRECTORY LISTING A-Z
-------------------------------------------------------------------------------------------- */
#joblist {
	width: 766px;
}

/* Page Headings
-------------------------------------------------------------------------------------------- */

/* dark background colour for Headings */
#details h2
{
	position: relative;
	background: #7FC1F5 url(../gfx/menu_slice.gif); clear: both; border: 1px solid #7FC1F5;
    padding: 2px 2px 2px 5px;
}

#videocasestudy h2, #jobgroup h2 {padding: 5px 0;}


/* Job description page - general
-------------------------------------------------------------------------------------------- */
/*This first section makes the job menu static - ie it doesn't scroll when you scroll the contents */

#jobmenuframe {MARGIN: 0px auto; WIDTH: 770px;}
* html #jobmenuframe {MARGIN: auto; WIDTH: auto;} /* We want to reset these for IE5 */

#jobmenucontent {BOTTOM: 30px; POSITION: fixed; TOP: 84px;  overflow: auto; WIDTH: 188px;}
* html #jobmenucontent {POSITION:relative; text-align: left; BOTTOM: auto; top: auto; width: auto;}

#jobmenucontent {
    font-weight: bold;
}

/* 'w\idth' is an IE5 hack ("Modified Simplified Box Model Hack" or "Tan Hack"), as is the * selector.  
   See http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html etc */

#details
{
	float: left;
	width: 576px;
	margin:10px 0 20px 160px;
	padding: 0 0 0 30px;
	text-align:left;
}



#details h2 span {display: block; background-repeat: no-repeat; background-position: 0% 50%; padding-left: 20px; display: block; }
#details h2 span.thejob {background-image: url(../gfx/jobrecordicon_thejob.gif);}
#details h2 span.pictures {background-image: url(../gfx/jobrecordicon_pictures.gif);}
#details h2 span.video {background-image: url(../gfx/jobrecordicon_video.gif);}
#details h2 span.suitsme {background-image: url(../gfx/jobrecordicon_suits-me.gif);}
#details h2 span.myjed {background-image: url(../gfx/jobrecordicon_myjed.gif);}
#details h2 span.money {background-image: url(../gfx/jobrecordicon_money.gif);}
#details h2 span.where {background-image: url(../gfx/jobrecordicon_where.gif);}
#details h2 span.training {background-image: url(../gfx/jobrecordicon_training.gif);}
#details h2 span.findoutmore {background-image: url(../gfx/jobrecordicon_findoutmore.gif);}
#details h2 span.otherjob {background-image: url(../gfx/jobrecordicon_otherjob.gif);}
#details h2 span.print {background-image: url(../gfx/jobrecordicon_print.gif);}
#details h2 span.local {background-image: url(../gfx/jobrecordicon_local.gif);}



#details div.treasurefound {position: relative; border: 1px solid #F6FEFF;}
#details div.treasurefound a span {background-image: url(../gfx/treasurechestanimated.gif);}
#details div.treasurefound a:hover span {background-image: url(../gfx/treasurechestrollover.gif);}
#details div.treasurefound a span {position: absolute; left: 0px; top: 0px; height: 100px; width: 110px; display: block; background-repeat: no-repeat; background-position: 0% 50%; cursor: pointer;}

/* Background colours for links & dislikes in the Suits me section */

#details div.like {background-color: #CCFFCC; border: 1px solid #339933;}
#details div.dislike {background-color: #EEDD99; border: 1px solid #FF9933;}
#details div.problem {background-color: #DDDDDD; border: 1px solid #999999;}


/* Styles for Job Detail tabs, including training tabs */
#jobdetailmenutabs, #jobtrainingmenutabs {position: relative; width: 576px; height: 2.5em; line-height: 110%; font-size: 80%; margin-bottom: 1em;}
#jobdetailmenutabs h3, #jobtrainingmenutabs h3 {font-size: 100%; font-weight: bold;}

#content #jobdetailmenutabs a, #content #jobtrainingmenutabs a {position: absolute;  display: block; bottom: -1px; height: 2.5em; font-weight: bold; border: 1px solid #3571CC; border-bottom: none; padding: 4px;}
#content #jobdetailmenutabs a {width: 126px;}
#content #jobtrainingmenutabs a {width: 129px; height: 2.5em;}

/* The text for the training tabs is a bit different - we want it bigger and centered */
#content #jobtrainingmenutabs #jobdetailsmenutab1,
#content #jobtrainingmenutabs #jobdetailsmenutab2,
#content #jobtrainingmenutabs #jobdetailsmenutab3,
#content #jobtrainingmenutabs #jobdetailsmenutab4 {padding-top: 0.6em; padding-bottom: 0.7em; height: 1em; font-size: 130%; text-align: center;}

/* Then we want the text for the 'Getting the edge' tab to be more similar to the other non-training tabs - but we want the tabs to be the same size as the other ones on this page - so we style the height of the a in the same way as the other tabs, and add a span where we reduce the taxt and position the text. We force the width so the text goes onto two lines, as this looks better next to the larger text of the other tabs*/
#content #jobtrainingmenutabs #jobdetailsmenutab4 span.title {text-align: left; font-size: 80%; line-height: 1em; position: relative; top: -0.4em; display: block; width: 6em;}

#jobdetailmenutabs a, #jobtrainingmenutabs a {color: #0D174B;}
#jobdetailmenutabs a.current, #jobtrainingmenutabs a.current {background-color: #9DCCF6; z-index: 5;}
#jobdetailmenutabs a:hover, #jobtrainingmenutabs a:hover {background-color: #FFCA08;} 
#jobdetailmenutabs a.current:hover, #jobtrainingmenutabs a.current:hover {background-color: #9DCCF6;} 
#jobdetailmenutabs a span.bevel {position: absolute; width: 10px; height: 10px; top: -1px; right: -1px; background: url(../gfx/tabtopright_blue.gif) no-repeat 100% 0; }
#jobtrainingmenutabs #jobdetailsmenutab3 span.bevel, #jobtrainingmenutabs #jobdetailsmenutab4 span.bevel {position: absolute; width: 10px; height: 10px; top: -1px; right: -1px; background: url(../gfx/tabtopright_blue.gif) no-repeat 100% 0; }

#jobdetailsmenutab1 {left: 5px;}
#jobdetailsmenutab2 {left: 144px;}
#jobtrainingmenutabs #jobdetailsmenutab2 {left: 143px;} /*training tabs butt up to one another */
#jobdetailsmenutab3 {left: 283px;}
#jobtrainingmenutabs #jobdetailsmenutab3 {left: 281px;} /*training tabs butt up to one another */
#jobdetailsmenutab4 {left: 422px;}

/* For the Font Awesome Arrow */
#content #jobtrainingmenutabs #jobdetailsmenutab2 span.icon,
#content #jobtrainingmenutabs #jobdetailsmenutab3 span.icon
{
  position: absolute; 
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 180%;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
  top: 0.35em; left: -0.3em;
  /* color: Orange; */
  z-index: 100;
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf04b;'); /*IE6 & 7*/
  
  /*override styles applied to all spans within tabs*/
  background: none;
}

/* use text-shadow to add a 1px border to the arrow */
#content #jobtrainingmenutabs a span.icon
{
    text-shadow:
    1px 0 0 #0D174B,
    -1px -1px 0 #0D174B,
    -1px 1px 0 #0D174B;
}

/* Add hover colour to the arrow*/
#content #jobtrainingmenutabs a span.icon:hover
{
    color: #FFCA08;
}

/* But no hover when that tab is the current one */
#content #jobtrainingmenutabs a.current span.icon:hover
{
    color: #0D174B;
}

#content #jobtrainingmenutabs #jobdetailsmenutab2 span.icon:before,
#content #jobtrainingmenutabs #jobdetailsmenutab3 span.icon:before 
{
      content: "\f021";
}

#jobdetailmenutabdivider {position: absolute; top: 2.5em; background-color: #9DCCF6; border-top: 1px solid #3571CC; height: 5px; width: 100%;}


/* Styles for the glossary pop-up items 
 * See also around about line 37 of GlossaryTooltips.js 
 * for the actual html of it. */
.glossaryhint
{
	background-color:	#FFDDDD;
	border:				1px solid #444444;

	padding:			8px;
	width:				400px;
	text-align:			left;
}
@media screen and (min-width: 640px)
{
    .glossaryhint
    {
        /* Allow glossary pop-ups to be a bit wider on larger screens */
        width: 400px;
    }
}

.glossaryhint p 
{
    padding: 0;
    margin: 0;
}

.glossaryhr
{
	border-color: Gray;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

p.glossary-factsheet-path
{
	margin-top: 0.5em;
}

/* Styles for the glossary details lightbox */
.glossary-lightbox {
	background-color: #FFDDDD;
	border: 1px solid #444444;
}
@media screen and (min-width: 640px)
{
    .glossary-lightbox
    {
        /* Restrict the lightbox width on larger screens */
        left: 50%;
        width: 400px;
        margin-left: -200px;
    }
}

.glossary-lightbox div#glossarydefinitioncontainer
{
    width: 100%;
    height: 98%;
}

.glossary-lightbox div#glossarydefinition
{
    overflow: hidden;
}

/* Styles for the job notes pop-up items */
.jobnotespopup
{
	background-color:	#FFFFCC;
	border:				1px solid #F4F4F4;
	padding:			8px;
	width:				400px;
	text-align:			left;
}

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


/* Blue Heading backgrounds*/

#jobgroup h2 {position: relative;}
#myconfiguration h2 {position: relative; background: #7FC1F5 url(../gfx/menu_slice.gif); padding: 2px 2px 2px 5px; clear: both; border: 1px solid #fff; width: 100%;}
#toptenjobs h2, #jobgroupsummary h2 {
    position: relative; 
    background: #7FC1F5 url(../gfx/menu_slice.gif); 
    padding: 2px 5px 2px 5px;
    border: 1px solid #fff;
}


    
#jobgroupsummary h2 {margin-top: 2px;}


#onthisdaypage h2, #contact h2, #ofqual-course h2, #jobadswhy h2, #jobtransferableskillswhy h2, #jobpaymore h2, #notindemomode h2 {
    position: relative;
    background: #7FC1F5 url(../gfx/menu_slice.gif);
    padding: 2px 2px 2px 5px;
    clear: both;
    border: 1px solid #fff;
}


/* Job description page (Job.aspx) 
---------------------------------- */
div.deconfuse
{
	background-color: #DDEFFE;
}

/* Job Description Picture page (also Local Info & Local Info preview page)
-------------------------------------------------------------------------------*/

#details div h3.picturecaption, #localisingjobpreview div h3.picturecaption, #details div h4.picturecaption
{
	background: #c7e2fb;
}

/* Job pay page (JobPay.aspx)
--------------------------------*/
.jobpaygraph
{
	margin: 0 5px 0.75em 5px;
	border: solid 1px #CCCCCC;
	background-color: #FFFFFF;
}

.jobpaygraphcaption
{
    font-size: smaller;
    margin: 0 0.5em 0.5em 0.5em;
    text-align: center;
}


/* Job "not in demo mode" page (JobNotInDemoMode.aspx)
------------------------------------------------------------------------------*/
#notindemomode .demomodeexplanation
{
    background-color: #EEEEEE;
}


/* FOOTER CONTENT
-------------------------------------------------------------------------------------------- */
#footer {
	clear: both;
	font-size: 76%;
	
}
#footerwrap {
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;

}
#footerwrap ul {
	list-style: none;
	margin: 0 auto 0;
	padding: 0;
	width: 770px;
	text-align: center;

}
#footerwrap li {
	display: inline;
	margin: 0 25px 0 0;
	padding: 0;
}
#footerwrap li.last {
	margin: 0 !important;
	padding: 0 !important;
}

#footerwrap li a:hover, #footerwrap li a:active { color: #D98707; /*background:#D2ECFE;*/}

#footerwrap a.invalidversionlink { color: #CC0000; }

#footerwrap a.invalidhelplink
{
    color: #CC0000;
}

#footerwrap a.treasure 
{
	padding-left: 20px; 
	background-position: left center;
	background-repeat: no-repeat;
	background-image: url(../gfx/icon-treasure-footer.gif);
	}


/* Additional for print
-------------------------------------------------------------------------------------------- */
.print-only { display: none; }

/* End of the all-browser screen styles */

/* This section of the stylesheet contains generic styles used only by Mozilla and derivatives (e.g. Firefox) */

/*QUIZ*/

#quizform fieldset.responseoptions label {
	display: block;
	padding: 1px 4px;
	margin-left: 0px;
	text-indent: -50px;
}

/* Specific formatting for responses to any exam level quiz questions */
#quizform fieldset.examlevelresponseoptions label {
	text-indent: -18px;
}

#quizform fieldset.responseoptions label {
    text-indent: -48px; }

#quizform fieldset.responseoptions label.selected, #quizform fieldset.subjectresponseoptions label.selected {
	-moz-border-radius: 10px;
}

/*JobAnnotations.aspx - Firefox renders the buttons differently to MSIE - so we need to add a bit 
of extra padding and move the image slightly */


#details #hotnotform li {
	margin-left: 50px;
	text-indent: -50px;
}

#details #hotnotform li img {
	margin-left: 3px;
}
/*JobPictures.aspx - with IE we can use a blurred shaddow. With Firefox we just go for a semi-transparent, but not blurred dropshadow*/


/* End of the Mozilla generic styles */

/* This section of the stylesheet contains screen styles used only by Mozilla and derivatives (e.g. Firefox) */

/*If the header links are positioned the same as MSIE, then they appear below the icon at large font sizes */

/* Added to allow the menu to scroll with a page - to get around a bug where the fixed menu 'jumps off' to the left of the page - se FB4046*/
#jobmenuframe {MARGIN: auto; WIDTH: auto;}
#jobmenucontent {BOTTOM: auto; POSITION: absolute; TOP: 0px;  overflow: auto; width: auto; float: left;}




/* End of the Mozilla screen styles */