body {font-family: Arial, Gadget, sans-serif; background-color:#fff; }
	.tableFixHead { overflow-y: auto; height: 600px; }
	thead {position: sticky; top: 0; background:white; z-index:15;}
/*###############################################################################
  #  Top & main body div so that things appear to scroll underneath it
  ###############################################################################*/
    .scroll-underneath-div { position:fixed; background:inherit; top:0px; left: 0px; width: 100%; overflow:hidden; z-index:10;}
	.scroll-under-div {width: 100%; z-index: 5; overflow:hidden; background:inherit; }
	.scroll-under-div-with-scroll {width: 100%; z-index: 5; background:inherit; }
    .left-hand-buttons-div {position: fixed; width:110px; top: 120px; left: 0px;  float:left;}

/*###############################################################################
  #  Display the horizontal menu if enough space otherwise dropdown menu (by id)
  ###############################################################################*/
	@media screen and (min-width: 0px) and (max-width: 1270px) {
	  #top-left-logo-div{ display: block; }
	  .header-logo{ display: block; }
      .header-logon { left: 200px; }
	  #main-menu-bar-div{ display: none; }
	  #main-menu-drop-div{ display: block; }
	}
	@media screen and (min-width: 1270px) {
	  #top-left-logo-div{ display: none; }
	  .header-logo{ display: none; }
      .header-logon { left: 0px; }
	  #main-menu-bar-div{ display: block; }
	  #main-menu-drop-div{ display: none; }
	}

/*###############################################################################
  #  Top left hand corner logo styling
  ###############################################################################*/
    .header-logo {position: fixed;  left: 0; top: 0; }
	
/*###############################################################################
  #  Display the logon on one line if enough space 
  #  IE8 displays all three pictures so need to be able to ignore this
  ###############################################################################*/
    .Hide_if_IE8 { display: none; }
	#IE8_header_logon {position: fixed;  left: 200px; top: 0; width: 500px; height:110px; }
	#IE8_scroll_under_div { margin-top:110px; }
	#IE8_scroll_underneath_div { height:110px; position:fixed; background-color: inherit; top:0px; left: 0px; width: 100%; overflow:hidden; z-index:10; }
	#IE8_prev_next_button_div { top:110px; }
	a img { border:none; }
	  
	.jump_to_anchor { margin-top:-110px; padding-top:110px; display: block; visibility:hidden;}	
	.jump_to_exam_anchor { margin-top:-200px; padding-top:200px; display: block;}	

	@media screen and (min-width: 0px) and (max-width: 600px) {
      .header-logon {position: fixed;  top: 0; width: 230px; }
      .scroll-underneath-div { height:110px; }
	  .scroll-under-div { margin-top:115px;}
	  .scroll-under-div-with-scroll { margin-top:115px;}
      .prev-next-button-div { top:110px; }
    }
	@media screen and (min-width: 600px) and (max-width: 700px) {
      .header-logon {position: fixed; top: 0; width: 300px; }
      .scroll-underneath-div { height:100px; }
	  .scroll-under-div { margin-top:105px;}
	  .scroll-under-div-with-scroll { margin-top:105px;}
	  .prev-next-button-div { top:100px; }
    }
	@media screen and (min-width: 700px) {
      .header-logon {position: fixed; top: 0; width: 500px; }
      .scroll-underneath-div { height:90px; }
	  .scroll-under-div { margin-top:95px;}
	  .scroll-under-div-with-scroll { margin-top:95px;}
	  .prev-next-button-div { top:90px; }
	}
	
/*###############################################################################
  #  Click here for help styling
  ###############################################################################*/
	.login-help { font-size: 11px; line-height:9px; color: #0064b6;}
    .login-help a { color: #0064b6; text-decoration: none; }
    .login-help a:hover, .login-help a:focus { text-decoration: underline; }
	.login-help span { display: inline-block; vertical-align: top; line-height: normal; }
	
/*###############################################################################
  #  Display the information as side by side cells table if page wide enough otherwise 
  #  display as cells bove each other
  ###############################################################################*/
	@media screen and (min-width: 0px) and (max-width: 750px) {
	  .side-by-side-cells-div{ display: none; }
	  .above-each-other-cells-div{ display: block; }
	}
	@media screen and (min-width: 750px) {
	  .side-by-side-cells-div{ display: block; }
	  .above-each-other-cells-div{ display: none; }
	}
	div.two-cell-table td.spacer { width:40px; }
	
/*###############################################################################
  #  Display the relevant sized picture
  ###############################################################################*/
	@media screen and (min-width: 1000px) {
	  .image1350-div{ display: block; }
	  .image1000-div{ display: none; visibility: hidden;}
	  .image500-div{ display: none; visibility: hidden;}
	}
	@media screen and (min-width: 500px) and (max-width: 1000px) {
	  .image1350-div{ display: none; visibility: hidden;}
	  .image1000-div{ display: block; }
	  .image500-div{ display: none; visibility: hidden;}
	}
	@media screen and (min-width: 0px) and (max-width: 500px) {
	  .image1350-div{ display: none; visibility: hidden;}
	  .image1000-div{ display: none; visibility: hidden;}
	  .image500-div{ display: block; }
	}
	
/*###############################################################################
  #  Drop down menu styling
  ###############################################################################*/
	.drop-item {display: block; float: left; color: #0064b6; font-size: 13px; font-weight: 800; text-transform:uppercase; letter-spacing:0px; }
	a.drop-item-link, a.drop-item-link:visited, a.drop-item-link:active {padding-right:20px !important; padding-left:20px !important; text-decoration:none; color: #0064b6; }
	a.drop-item-link:hover, a.drop-item-link:focus {background: #bebebe; color: #0064b6; }
	.menu-item .horizontal-ul, .menu-item-large .horizontal-ul {display:none; visibility: hidden; opacity:0; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; }
	.menu-item:hover .horizontal-ul, .menu-item-large:hover .horizontal-ul, .menu-item:focus .horizontal-ul, .menu-item-large:focus	.horizontal-ul {display:block; visibility: visible; opacity: 1; }
	button.drop-item-link, button.drop-item-link:visited, button.drop-item-link:active {background: white; border:0; color: #0064b6; font-size: 13px; font-weight: 800; text-transform:uppercase; letter-spacing:0px; width:200px; text-align:center; height:30px; vertical-align:middle;}
	button.drop-item-link:hover, button.drop-item-link:focus {background: #bebebe; color: #0064b6; }
	
/*###############################################################################
  #  Normal menu styling
  ###############################################################################*/
	.current-menu-item {border-top:5px solid #0064b6;}
	.noncurrent-menu-item {border-top:5px solid #fff;}
	.menu-item-large {display: inline; display:block; float:right; color: #0064b6; font-size: 24px; font-weight: 800; text-transform:uppercase; letter-spacing:0px;}
	.menu-item {display: inline; display:block; float:right; color: #0064b6; font-size: 13px; font-weight: 800; text-transform:uppercase; letter-spacing:0px;}
    /*display:inline gets rid of the breaks after the menu item and display:block makes whole of the a tag clickable*/
    .menu-item:hover, .menu-item-large:hover, .menu-item:focus, .menu-item-large:focus {border-top:5px solid #0064b6;}
    a.menu-item-link, a.menu-item-link:visited, a.menu-item-link:hover, a.menu-item-link:focus, a.menu-item-link:active {padding-right:20px !important; padding-left:20px !important; line-height:50px;vertical-align:middle; text-decoration:none; color: #0064b6; }
	button.menu-item-link, button.menu-item-link:visited, button.menu-item-link:hover, button.menu-item-link:focus, button.menu-item-link:active {background: transparent; border:0; color: #0064b6; font-size: 13px; font-weight: 800; text-transform:uppercase; letter-spacing:0px; width:100px; text-align:center; height:50px; vertical-align:middle;}
	button.menu-item-link-no-width, button.menu-item-link-no-width:visited, button.menu-item-link-no-width:hover, button.menu-item-link-no-width:focus, button.menu-item-link-no-width:active {background: transparent; border:0; color: #0064b6; font-size: 13px; font-weight: 800; text-transform:uppercase; letter-spacing:0px; text-align:center; vertical-align:middle;}
	
/*###############################################################################
  #  Generic menu div styling (for both drop down and normal)
  ###############################################################################*/
	.horizontal-menu-bar-div {position: fixed; right: 0; top: 0;}
	.horizontal-menu-drop-div {position: fixed; right: 0; top: 0; width:250px;}
    .horizontal-ul {list-style-type: none; padding-right: 0px; margin: 0px; }
    /*list-style-type: none; Removes the bullets.  margin and padding remove browser default setting*/
	
/*###############################################################################
  #  Full width images / Float right image
  ###############################################################################*/
	.full-width-image { width: 100%; min-width: 100%; height: auto; width: auto\9; /* ie8 bug fix*/ }
	.float-right-image { float: right; margin: 0 0 10px 10px; }
	
/*###############################################################################
  #  Input Fields
  ###############################################################################*/
    #show_dots{-webkit-text-security: disc; -moz-text-security:circle; text-security:circle;} /*can use text input so not autofill but hide text*/
  
    input[type=text], input[type=email], input[type=password], select {margin: 5px; padding: 0 10px; width: 100px; height: 25px; color: #404040; background: white; border: 1px solid; border-color: #c4c4c4 #d1d1d1 #d4d4d4; border-radius: 2px; outline: 5px solid #eff4f7; -moz-outline-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); }
    input[type=text]:focus, input[type=email]:focus, input[type=password]:focus , select:focus {border-color: #7dc9e2; outline-color: #dceefc; outline-offset: 0; }
    textarea {margin: 5px; padding: 0 10px; width: 150px; height: 50px; color: #404040; background: white; border: 1px solid; border-color: #c4c4c4 #d1d1d1 #d4d4d4; border-radius: 2px; outline: 5px solid #eff4f7; -moz-outline-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); }
	.wide { width:400px; }
	.wide800 { width:800px; }
	.wide600 { width:600px; }
	.wide500 { width:500px; }
	.wide200 { width:200px; }
	.wide100 { width:100px; }
	.height100 { height:100px; }
	.height200 { height:200px; }
	.height300 { height:300px; }
    textarea:focus {border-color: #7dc9e2; outline-color: #dceefc; outline-offset: 0; }
	input[type=submit], .input-button { padding: 0 18px; height: 25px; font-size: 12px; font-weight: bold; color: #527881; text-shadow: 0 1px #e3f1f1; background: #cde5ef; border: 1px solid; border-color: #b4ccce #b3c0c8 #9eb9c2; border-radius: 16px; outline: 0; 
	  -webkit-box-sizing: content-box; 
	  -moz-box-sizing: content-box; box-sizing: content-box; 
	  background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef); 
	  background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef); 
	  background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);  
	  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef); 
	  -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15); }
	.blue-input-button { padding: 0px 18px; height: 25px; text-align: center; vertical-align: middle; font-size: 12px; font-weight: bold; color: white; text-shadow: 0 1px #e3f1f1; background: #2d8cff; border: 1px solid; border-color: #2d8cff; border-radius: 16px; outline: 0; 
	  -webkit-box-sizing: content-box; 
	  -moz-box-sizing: content-box; box-sizing: content-box; 
	  -webkit-box-shadow: inset 0 1px #2d8cff, 0 1px 2px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 1px #2d8cff, 0 1px 2px rgba(0, 0, 0, 0.15); }
	input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus, .input-button:hover, .input-button:active, .input-button:focus {border-color: black;}
	.input-a-href-button { padding: 5px 18px 0px 18px; height: 20px; font-size: 12px; font-weight: bold; color: #527881; text-shadow: 0 1px #e3f1f1; background: #cde5ef; border: 1px solid; border-color: #b4ccce #b3c0c8 #9eb9c2; border-radius: 16px; outline: 0; 
	  -webkit-box-sizing: content-box; 
	  -moz-box-sizing: content-box; box-sizing: content-box; 
	  background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef); 
	  background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef); 
	  background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);  
	  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef); 
	  -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15); }
	.plain-text-button { border: none; background-color: #fff;  margin: 0; color: grey; font-size: 100%; font-weight: 400; text-align: left;}
	.plain-text-button-black { border: none; background-color: #fff;  margin: 0; color: black; font-size: 100%; font-weight: 400; text-align: left;}
	.plain-text-button-lightblue { border: none; background-color: #ADD8E6;  margin: 0; color: black; font-size: 100%; font-weight: 400; text-align: left;}
	.plain-text-button-lightred { border: none; background-color: #ffcccc;  margin: 0; color: black; font-size: 100%; font-weight: 400; text-align: left;}
	.plain-text-button-transparent { border: none; background-color: transparent; outline: none; margin: 0; color: black; font-size: 100%; font-weight: 400; text-align: left;}
	.plain-text-button-selectedred { border: none; background-color: #f00;  margin: 0; color: white; font-size: 100%; font-weight: 700; text-align: left;}
	.plain-text-button-selected { border: none; background-color: #00f;  margin: 0; color: white; font-size: 100%; font-weight: 700; text-align: left;}
	.plain-text-button:hover, .plain-text-button-black:hover, .plain-text-button-transparent:hover, .plain-text-button-lightblue:hover, .plain-text-button-lightred:hover, .plain-text-button-selected:hover, .plain-text-button-selectedred:hover, .plain-text-button:focus, .plain-text-button-black:focus, .plain-text-button-selected:focus, .plain-text-button-selectedred:focus, .input-a-href-button:hover, .input-a-href-button:focus {background-color: lightgrey; color: black; }
	
/*###############################################################################
  #  Tooltip for when hover over some blue text in the training screen
  ###############################################################################*/
    div.tooltip {outline:none; display: inline-block; position: relative;}
    div.tooltip strong {line-height:30px;}
    div.tooltip:hover, div.tooltip:focus {text-decoration:none;} 
    div.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top: 30px; margin-left:-150px; width:300px; line-height:16px; font-weight: normal;} 
/*    div.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; width:300px; line-height:16px; font-weight: normal;}  */
/*    div.tooltip:hover span, div.tooltip:focus span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0; } */
    div.tooltip:hover span, div.tooltip:focus span{ display:inline; position:absolute; color:blue; border:1px solid #DCA; background:#fffAF0; }
    .callout {z-index:20;position:absolute;top:10px;border:0;left:-12px;} 
/*    .callout {z-index:20;position:absolute;bottom: 100%;border:0;left:-12px;} */
    /*CSS3 extras*/
    div.tooltip span { border-radius:4px; box-shadow: 5px 5px 8px #CCC; }

/*###############################################################################
  #  accordion i.e. when click something data descends below rather than reload
  ###############################################################################*/
    input.accordion { display:none; }
    label.accordion { display: block; cursor: pointer; }
    label.accordion:hover { font-weight: bold; }
	.accordioncontent { background: #E2E5F6; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 3px; }
    /* label.accordion { display: block; padding: 8px 22px; margin: 0 0 1px 0; cursor: pointer; background: #6AAB95; border-radius: 3px; 
	                  color: #FFF; transition: ease .5s; } */
    /* label.accordion:hover { background: #4E8774; } */
	/* .accordioncontent { background: #E2E5F6; padding: 10px 25px; border: 1px solid #A7A7A7; margin: 0 0 1px 0; border-radius: 3px; } */
	input.accordion + label.accordion + .accordioncontent { display: none; }
    input.accordion:checked + label.accordion + .accordioncontent { display: block; }

	
  /*###############################################################################
  #  Standard styles on a page
  ###############################################################################*/
    .margin20 {margin-left:20px;}
	.hangingindent20 {padding-left: 20px; text-indent: -20px; }
	.hangingindent25 {padding-left: 25px; text-indent: -25px; }
    .section-title { color: #0064b6; font-size: 150%; font-weight: 800; text-transform:uppercase; letter-spacing:0px; } 
    a.section-title { color: #0064b6; font-size: 150%; font-weight: 800; text-transform:uppercase; letter-spacing:0px; text-decoration:none;} 
	a.section-title:hover, a.section-title:focus {background: #bebebe; }
	.subsection-title { color: black; font-size: 100%; font-weight: 800; text-transform:uppercase; letter-spacing:0px; } 
	.subsection-title-grey { color: grey; font-size: 100%; font-weight: 800; text-transform:uppercase; letter-spacing:0px; } 
	.section-text { color: grey; font-size: 100%; font-weight: 400; }
	.section-text-black { color: black; font-size: 100%; font-weight: 400; }
	.white-text { color: white; }
	.blue-rectangle-link { background-color: #0064b6; display: inline-block; line-height:50px; height: 50px; text-align: centre; padding-right: 20px; padding-left: 20px; vertical-align: middle; text-decoration: none;}
	.vertical-spaced-list li { margin: 0 0 5px 0; }
	.slightly-narrow-div { margin-left: 5%; margin-right: 5%; }
	.vertical-table td { vertical-align: top; }
	.mymsggreen {color: white; background-color: limegreen; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
    mymsggreen {color: white; background-color: limegreen; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	a.mymsggreen {color: white; background-color: limegreen; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	.mymsgblue {color: white; background-color: blue; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
    mymsgblue {color: white; background-color: blue; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	a.mymsgblue {color: white; background-color: blue; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
    .mymsgred {color: white; background-color: red; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
    mymsgred {color: white; background-color: red; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	a.mymsgred {color: white; background-color: red; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	.mymsgpurple {color: white; background-color: purple; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
    mymsgpurple {color: white; background-color: purple; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	a.mymsgpurple {color: white; background-color: purple; font-family: Arial Black, Gadget, sans-serif; font-size: 100%;}
	.centre-align {text-align:center;}
	.right-align {text-align:right;}
	.left-align {text-align:left;}
	.v-centre-align {vertical-align:center;}
	.v-middle-align {vertical-align:middle;}
	.v-top-align {vertical-align:top;}
    .v-bottom-align {vertical-align:bottom;}

/*###############################################################################
  #  Table styling
  ###############################################################################*/
   table.CurvedCorner { border:1px solid black; border-spacing: 0px; table-layout:fixed; width:100%; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} /* overflow:hidden; border-collapse: collapse; */
   table.CurvedCorner tr:first-child td:first-child { -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; }
   table.CurvedCorner tr:first-child td:last-child { -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px; }
   table.CurvedCorner tr:last-child td:first-child { -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px; }
   table.CurvedCorner tr:last-child td:last-child { -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px; }
   table.CurvedCorner td { border:1px solid black; padding:0px; color: black; font-weight: 200;} 
   table.myTablenoborders { border:0px; border-spacing: 0px; border-collapse: collapse; width:100%;}
   table.myTablenoborders td { border:none; padding:5px; } 
   table.myTableborders { border:1px solid black; border-spacing: 0px; border-collapse: collapse;}
   table.myTableborders td { border:1px solid black; padding:0px; } 
   tr.border_bottom td { border-bottom:1pt solid black; } 
   tr.border_top td { border-top:1pt solid black; } 
   table.WrapText td { word-wrap:break-word; }
 
/*###############################################################################
  #  Footer styling
  ###############################################################################*/
    .footer { background-color: DarkGray; color: Gray; font-size: 75%; font-weight: 400; padding-left: 5%; }