/*
 * Active style sheet for Mozilla (or similar) generated at 26/06/2025 13:59:30.
 */

/* 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 print styles used by all browsers */

/* PAGE STRUCTURE
-------------------------------------------------------------------------------------------- */
body { text-align: left; }

body div {text-align: left;}


/* HEADER CONTENT
-------------------------------------------------------------------------------------------- */
#JedPrintHeader
{
	height: 70px;
}
#JedPrintHeaderTitle
{
	font-size: 170%;
	font-weight: bold;
}

#JedPrintHeader p
{
	margin-top: .75em;
}

#JedPrintHeaderImage
{
	width: 70px;
	margin-right: 30px;
	float: left;
}
#headerstrap a { display: none; }
#headersearch, #headerleft { display:none; }


/* GENERAL STYLES
-------------------------------------------------------------------------------------------- */
body
{
	color: black; background: white;
}
input.button, input.deletebutton { display: none; }
h1 { font-size: 150%; margin: 1em 0 1em 0; }
h2 {clear: both;  margin: 1em 0 1em 0; }
h3 {font-size:100%;}
h3 {margin-left: 2em;}
p {margin-left: 2em; line-height: 150%; }

ul { list-style-type: disc; margin-left: 2em; }
li p {margin-left: 0;}
#content div.descbox, #content div.demodescbox {margin-left: 2em;}


/* don't show links to previous pages */
#content a.backlink {display:none;}

/* Markup for text we only want available to screenreaders */
.forscreenreaders {display: none;} 

/* Hide the pop-ups when printing */
.popup
{
	display: none;
}


/* MAIN CONTENT AREA
-------------------------------------------------------------------------------------------- */
#contentwrap { text-align: center; }


/* HOME PAGE NAVIGATION
-------------------------------------------------------------------------------------------- */
ul.menu li a { display: none; }
#nav a, #nav_lower a { display: none; }
ul.menu li a span { display: none; }
ul.menu { text-align: center; }


/* HOME PAGE - BOTTOM
-------------------------------------------------------------------------------------------- */
#homebottom div.left { display: none; }


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

/* QUIZ NAVIGATION
-------------------------------------------------------------------------------------------- */
ul.menu_quiz li a, #nav_quiz a { display: none; }
ul.menu_quiz li img { float: none; display: block; }

/* Quiz Start
-------------------------------------------------------------------------------*/
#quizstart img.icon { display: none; }
#quizstart div.indent { margin-left: 0px; }
#quizstart ul.typeofquiz { margin-left: 0px; }
#quizstart div.indent p { margin-left: 0px; }

/* Quick Quiz Section/ Big Quiz Section
-------------------------------------------------------------------------------*/
#quickquizsection, #quizindepthsection, #quiztrailquestion
{
	position: relative;
}

img.quizsectionicon 
{
	position: absolute; top: 0; left: 0;
}

#quickquizsection div.indent, #quizindepthsection div.indent, #quiztrailquestion div.indent
{
	margin-left: 100px;
}


/* Quiz question pages
-------------------------------------------------------------------------------*/
#quizform label
{
	display: block;
	padding: 1px 2px;
	margin-left: 21px;
	text-indent: -24px;
}
* html #quizform label
{
	margin-left: 17px;
	text-indent: -23px;
}

/* styles for Money & Pensions questions within the Ideal Job section */
#quizform fieldset.importancebar table label {text-indent: 0;}

/* My Jed Record 
-------------------------------------------------------------------------------*/
#myjed h3 {margin-left: 0;}

#myjed div.demodescbox, #myjed div.descbox {margin-left: 0;}

#myjedrecordquizanswersgraphcontent {page-break-inside:avoid;}


/* JOBS A-Z MENU
-------------------------------------------------------------------------------------------- */

#joblist ul#alpha_menu {margin-left: 0px;}
#joblist p {margin-left: 0px;}

/* Results lists (quiz, search, case studies etc.)
------------------------------------------------------------------------*/
p.divider { display: none; }

/* Suppress the "all levels" search links as they are meaningless in a printed situation */
span.alllevelssearch { display: none; }


/* JOB DESCRIPTION PAGE
-------------------------------------------------------------------------------------------- */
/* Menu */
#job_menu { display: none; }

/* Detailed info Submenu
-------------------------------------------------------------------------------------------- */
#jobdetailmenutabs {display: none;}	
#jobtrainingmenutabs {display: none;}	

/* Job description page - general
-------------------------------------------------------------------------------------------- */
#details
{
	text-align:left;
	margin: 0px;
	padding: 0px;
}

#details table
{margin-left: 2em;}

#details div.deconfuse {margin-left: 2em;}
#details div.deconfuse p, #details div.deconfuse h3 {margin: 0;}

#details ul, #details ul.addresses { margin-left: 2em;}


/* Job description page (Job.aspx) 
---------------------------------- */

/* More information page (Job.aspx) 
---------------------------------- */
/* Format the list of tutor links */
#details .JobPrintPreview ul.tutorlinks
{
	list-style: none;
}

/* Format the list of contacts */
#details .JobPrintPreview dl.contacts
{
	list-style: none;
	margin-left: 2em;
}
#details .JobPrintPreview dt {margin: 0 0 0.2em 2em;}
#details .JobPrintPreview dd {margin: 0 0 0.75em 2em;}

/* Job pay page (JobPay.aspx)
--------------------------------*/
.jobpaygraph
{
	text-align: left;
}

.jobpaygraph .jobpaygraphcaption 
{
    color: #333333;
    margin-left: 2em;
    margin-bottom: 1em;
}


/* Job Groups
-------------------------------------------------------------------------------*/
#jobgroups div.left, #jobgroups div.right
{
	width: 100%;
	float: none;
	padding-right: auto;
	margin-bottom: 20px;
}


/* Video case studies
-------------------------------------------------------------------------------*/
#videocasestudies div.left, #videocasestudies div.right
{
	width: 100%;
	float: none;
	padding-right: auto;
}

/* Glossary, JobAdsWhy
-------------------------------------------------------------------------------*/

#glossarydefinition ul, #jobadswhy ul, #jobpaymore, #notindemomode /* bigger indents are needed on Printout */
{
	margin: 0 0 10px 71px;
}

/* Help Pages
-------------------------------------------------------------------------------------------- */
div#help_details { text-align:left; margin: 0px; padding: 0px; }
#help_menu { display: none; }


/* FOOTER CONTENT
-------------------------------------------------------------------------------------------- */
div#footer { display: none; }


/* Additional for print
-------------------------------------------------------------------------------------------- */
p.printfooter { font-size: 80%; text-align: left; margin-left: 0; }	
#printfooter { clear: both; }


@Media screen {

/* Print Preview - JobPrintPreview.aspx
-------------------------------------------------------------------------------------------- */
div.printpreviewbuttons
{width: 100%;
	background-color: #CCCCCC;
	padding: 5px;
	border-bottom: white 3px outset;
	border-top: white 3px outset;}
div.printpreviewbuttons p {margin: 0px;}

input.printbutton
{
		font-weight: bold;
	color: white; 
	background-color: #293380;
	border: 3px double white;
	padding: 2px;
	cursor: pointer;
	font-size:90%;
	width: 5em;

}
input.printbutton:hover
{
	background-color: #FFCA08;
	border: 3px double white;
	color: #293380; 
}

}

/* End of the all-browser print 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 print styles used only by Mozilla and derivatives (e.g. Firefox) */

/* Print Preview - JobPrintPreview.aspx
-------------------------------------------------------------------------------------------- */
@Media screen 
{
	input.printbutton {
	border: 3px double white;


}

input.printbutton:hover
{
	
	border: 3px double white;

}

#details div h3.picturecaption, #details div h4.picturecaption
{
	width: auto;
}

}

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

/* End of the Mozilla print styles */