/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, button, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  line-height: 100%;
  vertical-align: baseline;
  word-wrap: break-word;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1em;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*
  Screen & Print CSS style sheet for The Official Theory Test

  Copyright Imagitech Ltd. ©2025, all rights reserved.

  Copying without permission is a violation of intellectual property rights and is prohibited by law.
*/

:root {
  --rsaWarmRed: #fa4238;
  --rsaOnlineRed: #d60000;
  --rsaOnlineTurquoise: #28a49e;
  --rsaWarmGrey: #524746;
  --rsaMidGrey: #9db0ac;
  --rsaBlack: #000000;
  --rsaWhite: #ffffff;
  
  --rsaSecondaryRed: #990000;
  --rsaSecondaryRedWhite: #fff5f5;
  --rsaSecondaryGreen: #207f10;
  --rsaSecondaryGreenWhite: #f6fef6;
  --rsaSecondaryOrange: #d14600;
  --rsaSecondaryOrangeWhite: #fefefa;
  --rsaSecondaryGrey: #60696c;
  --rsaSecondaryLightGrey: #f2f2f2;
  --rsaSecondaryBlue: #006bb8;
  --rsaSecondaryLightBlue: #ecf7fe;
  --rsaSecondaryLightRed: #ffe8e8;
  --rsaSecondaryLightGreen: #e6f6e1;
  --rsaSecondaryDarkBlue: #003963;
  --rsaSecondaryMidGrey: #dad8dc;
  
  --rsaOnlineRedLighter: #ed1717;
  --rsaSecondaryGreenLighter: #66cc4b;
}

body {
  margin: 0px;
  padding: 0px;
  background: #28a49e;
  background: var(--rsaOnlineTurquoise);
  color: #000000;
  color: var(--rsaBlack);
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3em;
  -ms-high-contrast-adjust: none;
}

a, a:link {
  border-color: #006bb8;
  border-color: var(--rsaSecondaryBlue);
  border-bottom-style: dotted;
  border-bottom-width: 1px;

  color: #006bb8;
  color: var(--rsaSecondaryBlue);
  text-decoration: none;
}

a:hover, a:active {
  text-decoration: none;
  border-bottom-style: solid;
}
@media (hover:none), (hover:on-demand) {
  a:hover, a:active {border-bottom-style: dotted;} /* suppress hover effect on devices that don't support hover fully */
}

a:visited {
  border-color: #003963;
  border-color: var(--rsaSecondaryDarkBlue);
  
  color: #003963;
  color: var(--rsaSecondaryDarkBlue);
}

.button, .button:focus, .button:visited, .button:link, button, button:focus, .buttonList li, .buttonList li:focus {
  margin: 0px 4px 1em 0px;
  padding: 10px 16px 10px 16px;
  min-width: 120px;
  vertical-align: middle;
  
  display: inline-block;
  *zoom: 1; /* trigger hasLayout for IE7 and below */
  *display: inline; /* the star targets only IE7 and below */

  border-radius: 3px;
  border: none;
  background: #d60000;
  background: var(--rsaOnlineRed);

  font-weight: normal;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  color: var(--rsaWhite);
}

.button.defaultButton, .button.defaultButton:focus, .button.defaultButton:visited, button.defaultButton, button.defaultButton:focus, .buttonList li.defaultButton, .buttonList li.defaultButton:focus { 
  font-weight: bold;
}

.button:hover, button:hover, .buttonList li:hover, .buttonList li.defaultButton:hover {
    background: #ed1717;
    background: var(--rsaOnlineRedLighter);
}
@media (hover:none), (hover:on-demand) {
  .button:hover, button:hover, .buttonList li:hover, .buttonList li.defaultButton:hover {
    /* suppress hover effect on devices that don't support hover fully */
    background: #d60000;
    background: var(--rsaOnlineRed);
  }  
}

.button:active, button:active, .buttonList li:active, button.defaultButton:active, .buttonList li.defaultButton:active {
  background: #990000;
  background: var(--rsaSecondaryRed);
}

button.inlineButton, .buttonList li.inlineButton {
  font-size: 14px;
  font-weight: normal;
  margin: -8px 0px -4px 6px;
  padding: 6px 18px 6px 18px;
  min-width: 40px;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 16px;
}

h1, .h1 {
  font-family: 'Ballinger Black', 'Arial Black', sans-serif;
  font-size: 41px;
  font-weight: Normal;
  color: #fa4238;
  color: var(--rsaWarmRed);
}
@media only screen and (max-width: 520px) {
  h1, .h1 {
    font-size: 29px;
  }
}

h2, .h2 {
  font-family: Ballinger, Arial, sans-serif;
  font-size: 31px;
  font-weight: bold;
  color: #28a49e;
  color: var(--rsaOnlineTurquoise);
}
@media only screen and (max-width: 520px) {
  h2, .h2 {
    font-size: 23px;
  }
}

h3, .h3 {
  font-family: Ballinger, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  color: #fa4238;
  color: var(--rsaWarmRed);
}
@media only screen and (max-width: 520px) {
  h3, .h3 {
    font-size: 18px;
  }
}

h4, .h4 {
  font-family: Ballinger, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #28a49e;
  color: var(--rsaOnlineTurquoise);
}

h5, .h5 {
  font-family: Ballinger, Arial, sans-serif;
  font-size: 16px;
  font-weight: Bold;
  color: #000000;
  color: var(--rsaBlack);
}

h6, .h6 {
  font-family: Ballinger, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #000000;
  color: var(--rsaBlack);
}

p, pre {
  line-height: 1.2em;
  margin-bottom: 1em;
}

em {
  font-style: italic;
}

strong, .strong {
  font-weight: bold;
}

sub, .sub {
  vertical-align: sub;
  font-size: 60%;
}

sup, .sup {
  vertical-align: super;
  font-size: 60%;
}

small, .small {
  font-size: 80%;
}

ol {
  padding: 0px 0px 0px  15px;
  margin:  0px 0px 25px 0px;

  line-height: 1.3em;
}

ul {
  padding: 0px 0px 0px  15px;
  margin:  0px 0px 25px 0px;

  line-height: 1.3em;
}

p + ul, p + ol {
  padding: 0px 0px 0px 15px;
  margin:  -0.5em 0px 1.5em 0px;
}

li {
  line-height: 1.3em;
}

ol li {
  margin: 0px 0px 5px 1.5em;
}

ul li {
  margin: 0px 0px 5px 1em;
}

ol > li::marker {
  color: #fa4238;
  color: var(--rsaWarmRed);
  font-weight: bold;
}

ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
ol ol ol ol { list-style-type: lower-greek; }

ol.upperAlpha {list-style-type: upper-alpha;}
ol.upperAlpha ol {list-style-type: decimal;}
ol.upperAlpha ol ol {list-style-type: lower-roman;}
ol.upperAlpha ol ol ol {list-style-type: lower-alpha;}

ol.lowerAlpha {list-style-type: lower-alpha;}
ol.lowerAlpha ol {list-style-type: lower-roman;}
ol.lowerAlpha ol ol {list-style-type: lower-greek;}

ol.upperRoman {list-style-type: upper-roman;}
ol.upperRoman ol {list-style-type: lower-alpha;}
ol.upperRoman ol ol {list-style-type: lower-roman;}

ol.lowerRoman {list-style-type: lower-roman;}
ol.lowerRoman ol {list-style-type: lower-greek;}

ul { list-style-type:square; list-style-image: url("./images/bullet-l1.png"); }
ul ul { list-style-image: url("./images/bullet-l2.png"); } 
ul ul ul { list-style-image: url("./images/bullet-l3.png"); }
ul ul ul ul { list-style-image: url("./images/bullet-l4.png"); }

p {
  margin: 0px 0px 1em 0px;
  text-align: left;
  line-height: 1.3em;
}
p:last-child {margin-bottom: 0px;}

blockquote {
  color: #524746;
  color: var(--rsaWarmGrey);
  font-style: italic;
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #28a49e;
  border-left: 5px solid var(--rsaOnlineTurquoise);
}

img {
  padding: 0px 1em 1em 0px;
  max-width: 100%;
  max-width: calc(100% - 10px);
  -ms-interpolation-mode: bicubic;
  
  /* fix for MacOS/iOS WebKit "Live Text" image selection breaking image maps */
  /* final fix required a transparent image of the same size placed over the image to block Live Text's OCR attempt*/
  -webkit-user-select: none;
  cursor: default;
}

img[usemap] {
  /* fix for WebKit/Blink highlighting image on tap*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

img[usemap], map, area {
  /* fix for iOS long-press breaking image maps */
  -webkit-touch-callout: none;
}

table {
  margin: 0px 0px 15px 0px;
  border-collapse: collapse;
  text-align: center;
  font-size: 16px;
}

td {
  padding: 0.5em;
  background: #ffffff;
  background: var(--rsaWhite);
}

th {
  padding: 0.5em;
  color: #ffffff;
  color: var(--rsaWhite);  
  background: #28a49e;
  background: var(--rsaOnlineTurquoise);
  font-weight: bold;
}

dl {
  padding: 0px;
  margin: 0px 0px 0.75em 0px;

  vertical-align: text-top;
}

ol.index {
  color: #28a49e;
  color: var(--rsaOnlineTurquoise);
  font-size: 20px;
  font-weight: bold;
}

ol.index ul {
  color: #000000;
  color: var(--rsaBlack);
  font-size: 16px;
  font-weight: normal;  
}

ul.noBullet {list-style-type: none;}

li {
  line-height: 1.4em;
  *display:list-item; /* fix for IE 7- list item numbering bug, that causes the number not to increment */
}

li.noListBullet {
  list-style-type: none;
}

p + ul, p + ol {
  margin:  -5px 0px 0.75em 1em;
}

ol li.skip {
  list-style-type:none;
  counter-increment:none;
  margin: 0px;
  padding: 0px;
}

object {
  /* e.g. for Flash video player fallback */
  max-width: calc(100% - 10px);
  max-height: calc(((100vw / 4) * 3) - 18px);
}

audio {
  margin-bottom: 1em;
  min-width: 35%;
}
@media (max-width: 991.98px) {
  audio {
    min-width: 70%;
  }  
}
@media (max-width: 575.98px) {
  audio {
    width: 100%;
  }
}

video {
  max-width: calc(100% - 10px);
  max-height: calc(((100vw / 4) * 3) - 18px);
}


/* CSS body styles */
/* --------------- */

body.imageBody {
  text-align: center;
  background: #ffffff;
  background: var(--rsaWhite);
}

.pageBody {
  margin: 0 auto;
  padding: 0 0 34px 0;
  
  min-width: calc((100vw / 20) * 11);
  max-width: calc((100vh / 20) * 31); /* used to be exactly 3/2, but changed to 31/20 for DTS PC to avoid pillar bars */

  min-height: calc(100vh - 34px);
  
  background: #ffffff url("./images/tapestry-band.png") repeat-x left bottom scroll;
  background: var(--rsaWhite) url("./images/tapestry-band.png") repeat-x left bottom scroll;  
}
@media only screen and (max-width: 1080px) {
  .pageBody {
    min-width: 0;
    max-width: none;
  }
}

.imageBody .pageBody {
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  min-width: 0;
  min-height: 100vh;
  max-width: 100%;
  max-width: 100vw;
  background: #ffffff;
  background: var(--rsaWhite);
}

.pageHeader {
  padding: 16px;
  margin:  0;

  clear: both;
}
.pageHeader h1, .pageHeader .h1
{
  margin-bottom: 0;
}

div.menuBody {
  padding: 0px 0px 1px 0px;
  *padding: 0px 6px 3px 6px; /* IE7- fix to stop text being chopped-off */
  margin:  -1px 16px 16px 16px; /* negative top margin of -1 to work around webkit bug */

  min-height: 42px;

  clear: both;
}

.contentBody {
  scroll-margin-top: 42px;
  margin: 0px 16px 16px 16px;
  clear: both;
}

.imageBody .contentBody
{
  display: inline-block;
  margin: 0;
  padding: 0;
}

.imageBody .contentBody img
{
  margin: 0;
  padding: 0;
  
  max-width: 100%;
  max-width: 100vw;
  
  max-height: 133%;
  max-height: 133vh;
}

.footer {
  margin: 16px 0 0 0;
  padding: 10px 16px;
  background: #f2f2f2;
  background: var(--rsaSecondaryLightGrey);

  font-size: 11px;
  font-weight: bold;
  color: #000000;
  color: var(--rsaBlack);
}

.footer a, .footer a:focus, .footer a:active , .footer a:visited {
  border-color: #000000;
  border-color: var(--rsaBlack);  

  font-weight: normal;
  color: #000000;
  color: var(--rsaBlack);
  
  clear: both;
}

.section {
  margin:  0px 0px 2em 0px;
  clear: both;
}
.section:last-child {
  margin-bottom: 0px;
}

.clearBoth {
  clear: both;
}

p.question{display: block; margin-bottom: 0.5em; padding-left: 2em; text-indent: -1em;}
p.answer + p.question {margin-top: 1.5em;}

p.question::before {
    display: inline-block;
    width: 1em;
    content: "Q.";
    font-weight: bold;
    color: #28a49e;
    color: var(--rsaOnlineTurquoise);
  }

p.answer{display: block; margin-bottom: 0.5em; padding-left: 2em; text-indent: -1em;}

p.answer::before {display: inline-block; width: 1em; content: "A."; font-weight: bold;}


ol.question {margin-left: 0; padding-left: 0; list-style: none; counter-reset: question;}
ol.question li {margin-left: 3em; margin-bottom: 0.5em; padding-left: 0; padding-bottom: 0; counter-increment: question;}

ol.question li::before {display: block; float: left; margin-left: -3em;  font-weight: bold; content: "Q" counter(question);}


dl.questionAndAnswer {margin-left: 0; padding-left: 0; list-style: none; counter-reset: question;}
dl.questionAndAnswer dt, dl.questionAndAnswer dd {margin-left: 3em; margin-bottom: 0.5em; padding-left: 0; padding-bottom: 0;}

dl.questionAndAnswer dt {counter-increment: question; font-weight: bold;}

dl.questionAndAnswer dt::before {display: block; float: left; margin-left: -3em; content: "Q" counter(question);}

dl.questionAndAnswer dd {margin-bottom: 1.5em;}

/* .scrollTarget is IE version */
:target,
.scrollTarget { 
  scroll-margin-top: 48px;
}

/* .scrollTarget is IE version */
.contentBody div:target,
.contentBody div.scrollTarget {
  padding: 8px;
  background: #ecf7fe;
  background: var(--rsaSecondaryLightBlue);
  background: linear-gradient(165deg, #ecf7fe, #ffffff);
  background: linear-gradient(165deg, var(--rsaSecondaryLightBlue), var(--rsaWhite));
}

.ieinitiallinkscrollfix {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  left : 0px;
  top: 0px;
  content: "";
  background: none;
  font-size: 1px;
  line-height: 1px;
  text-decoration: none;
  border-bottom: none;
}

/* single captioned image on its own */
.captionedImage, .captionedImageCentred {
  margin: 0px 0px 1.5em 0px;
  padding: 0px;
  display: block;
  text-align: left;
}
.captionedImageCentred {text-align: center;}

.captionedImage .image, .captionedImageCentred .image {
  width: 100%;
  margin: 0px;
  padding: 0px 0px 1px 0px; /* 1px padding on the bottom to stop IE/Edge showing a vertical scroll bar */
  display: block;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: bottom;
}
.captionedImageCentred .image {
  text-align: center;
}

.captionedImage .image img, .captionedImageCentred .image img {
  margin: 0px;
  padding: 0px;

  max-width: 100%;

  max-height: 100%;
  max-height: 100vh;
}

.captionedImage .image img + img,  .captionedImageCentred .image img + img{
  margin-left: 1em;
}

.captionedImage .caption, .captionedImageCentred .caption {
  margin: 0.75em 0px 0px 0px;
  padding: 0px;
  display: block;
  vertical-align: top;
  text-align: left;
  *line-height: 1.3em; /* IE7- fix to stop text being chopped-off */
}
.captionedImageCentred .caption {text-align: center;}

.captionedImage .caption + .image, .captionedImageCentred .caption + .image {
  margin-top: 0.75em;
}

.captionedImage .image + .image, .captionedImageCentred .image + .image {
  margin-top: 0.75em;
}

.captionedImage > .caption *:last-child, .captionedImageCentred > .caption *:last-child {
  margin-bottom: 0px;
}


/* group of captioned images */

.captionedImageGroup {
  padding: 0px;
  margin: 0px 0px 0px -2em;

  vertical-align: top;

  width: 102%;
  width: calc(100% + 2em);
}

.captionedImageGroup .captionedImage {
  margin-left: 2em;

  display: inline-block;
  *zoom: 1; /* trigger hasLayout for IE7 and below */
  *display: inline; /* the star targets only IE7 and below */

  width: 21.5%; /* default four-wide layout, responsive layouts below */
  width: calc(((100% - 20px) / 4) - 2em);

  text-align: center;
  vertical-align: top;
}

.captionedImageGroup .captionedImage.colspan-2 {
  width: 43%;
  width: calc((((100% - 20px) / 4) * 2) - 2em);
}

.captionedImageGroup .captionedImage.colspan-3 {
  width: 64.5%;
  width: calc((((100% - 20px) / 4) * 3) - 2em);
}

.captionedImageGroup .captionedImage.colspan-4,
.captionedImageGroup .captionedImage.colspan-5 {
  width: 93%;
  width: calc((100% - 20px) - 2em);
}

.captionedImageGroup .captionedImage .image {
  text-align: center;
}

.captionedImageGroup .captionedImage .image img {
  max-height: 40%;
  max-height: 40vh;
}

.captionedImageGroup .captionedImage .caption, .captionedImageGroup .captionedImage .caption p {
  text-align: center;
}



.paragraphtitle
{
  font-weight: bold;
}


/* CSS table styles  */
/* ----------------- */

table {
  display: block;
  overflow-x: auto;
}

table * {
  font-size: 100%;
}

table td, table th{
  vertical-align: middle;
}

table tr td:first-child, table.ruletable tr th:first-child {
  text-align: left;
}

table tr th {
  color: #ffffff;
  color: var(--rsaWhite);
  
  background: #28a49e;
  background: var(--rsaOnlineTurquoise);
}

table tr + tr th {
  color: #ffffff;
  color: var(--rsaWhite);
  
  background: #fa4238;
  background: var(--rsaWarmRed);
}

table tr td {
  border-bottom: 1px solid #28a49e;
  border-bottom: 1px solid var(--rsaOnlineTurquoise);
}
/* CSS simple styles */
/* ----------------- */

.equation {font-family: serif, "Times New Roman"; font-style: italic;}
.serif {font-family: serif, "Times New Roman";}
.sansserif {font-family: sans-serif, Arial;}
.monospace {font-family: "Courier New", Monospace;}  

.fontWeightNormal{font-weight: normal;}

.textAlignLeft{text-align: left}
.textAlignCenter{text-align: center}
.textAlignRight{text-align: right}
.textAlignJustify{text-align: justify}

.textColorRed {
  color: #d60000;
  color: var(--rsaOnlineRed);
}
.textColorGray {
  color: #524746;
  color: var(--rsaWarmGrey);
}

.floatleft {
  float: left;
  clear: left;
}

.floatright {
  float: right;
  clear: right;
}

img.floatright {
  margin-left: 1em;
  margin-right: 0px;
}

@media only screen and (orientation: portrait) {
  .landscapeonly {
    display: none !important;
  }  
}

@media only screen and (orientation: landscape) {
  .portraitonly {
    display: none !important;
  }  
}


/* CSS menu styles */
/* --------------- */

div.menuBody.sticky {
  margin:  0px  auto;
  padding: 0px 16px;

  min-width: calc(((100vw / 20) * 11) - 32px);
  max-width: calc(((100vh / 20) * 31) - 32px); /* used to be exactly 3/2, but changed to 31/20 for DTS PC to avoid pillar bars */

  top: 0px;
  width: 100%;
  width: calc(100% - 32px);

  position: fixed;
  z-index: 1;
}
@media only screen and (max-width: 1080px) {
  div.menuBody.sticky {
    max-width: 100%;
    max-width: calc(100% - 32px);
  }
}
  
div.menuBody .menuTitle {
  display: none;
}

div.pageFooter .menu {
  margin-bottom: 8px;
}

ul.menu {  
  border-bottom: 1px solid #9db0ac;
  border-bottom: 1px solid var(--rsaMidGrey);
}
  
ul.menu:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}

/* turn off list bullets, margins and padding for the menu and all sub-menus */
ul.menu,
ul.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.menu li {
  margin: 0;
  padding: 0;
}

ul.menu {
  background: #ffffff;
  background: var(--rsaWhite);
  
  border-bottom: 1px solid #dad8dc;
  border-bottom: 1px solid var(--rsaSecondaryMidGrey);
}

ul.menu ul {
 padding: 0 16px 16px 16px;
 background: #f2f2f2;
 background: var(--rsaSecondaryLightGrey);
 border-top: 1px solid #dad8dc;
 border-top: 1px solid var(--rsaSecondaryMidGrey);
 
 z-index: 1;
 display: none; 
}

ul.menu ul ul {
 padding: 0px 0px 0px 16px;
 border-top: none;
}

ul.menu > li > ul {
  overflow-y: auto;
}

ul.menu > li {
  margin: 0px 16px 0px 0px;
  padding: 0;
  float: left;
}

ul.menu a {
  display: block;
  font-size: 16px;
  font-weight: bold;  
  border: none;
}

ul.menu a,
ul.menu a:link,
ul.menu a:active,
ul.menu a:visited {
  padding: 8px 0px 8px 0px;  
  color: #60696c;
  color: var(--rsaSecondaryGrey);
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid var(--rsaWhite);
}

ul.menu a:hover,
ul.menu a.hover {
  color: #d60000;
  color: var(--rsaOnlineRed);
}
@media (hover:none), (hover:on-demand) {
  /* suppress hover effect on devices that don't support hover fully */
  ul.menu a:hover,
  ul.menu a.hover {
    color: #60696c; 
    color: var(--rsaSecondaryGrey);
  } 
}

ul.menu a.menuExpanded {
  padding-bottom: 8px;
  color: #d60000;
  color: var(--rsaOnlineRed);
  border-bottom: 4px solid #d60000;
  border-bottom: 4px solid var(--rsaOnlineRed);
}

ul.menu ul a,
ul.menu ul a:link,
ul.menu ul a:active,
ul.menu ul a:visited,
ul.menu ul a:hover,
ul.menu ul a.hover {
  padding: 16px 8px;
  border-top: none;
  border-bottom: 1px solid #dad8dc;
  border-bottom: 1px solid var(--rsaSecondaryMidGrey);
}
@media only screen and (max-height: 520px) {
ul.menu ul a,
ul.menu ul a:link,
ul.menu ul a:active,
ul.menu ul a:visited,
ul.menu ul a:hover,
ul.menu ul a.hover {
    padding: 10px 6px;
  }
}

ul.menu ul a:hover,
ul.menu ul a.hover {
  color: #524746;
  color: var(--rsaWarmGrey);
  background: #dad8dc;
  background: var(--rsaSecondaryMidGrey);
  border-bottom: 1px solid #9db0ac;
  border-bottom: 1px solid var(--rsaMidGrey);
}

ul.menu ul a.menuExpanded {
  color: #524746;
  color: var(--rsaWarmGrey);
}

/* menu icons */
ul.menu a.menuContracted,
ul.menu a.menuContracted:hover,
ul.menu a.menuContracted.hover {
  padding-right: 24px;
  background: url('./images/menu_contracted.png') no-repeat right center;
}

ul.menu a.menuExpanded,
ul.menu a.menuExpanded:hover,
ul.menu a.menuExpanded.hover {
  padding-right: 24px;
  background: url('./images/menu_expanded.png') no-repeat right center;
}

ul.menu a.menuContents {
  padding-left: 24px;
  padding-right: 0;
  background: url('./images/menu.png') no-repeat left center;
}
ul.menu a.menuContents:hover, ul.menu a.menuContents.hover, ul.menu a.menuContents.menuExpanded {
  padding-right: 0;
  background: url('./images/menu_over.png') no-repeat left center;
}
@media only screen and (max-width: 320px) {
  ul.menu a.menuContents,
  ul.menu a.menuContents:Hover,
  ul.menu a.menuContents.hover,
  ul.menu a.menuContents.menuExpanded {
    padding-left: 14px;
    background-position: center center;
    text-indent: -9999px;
    white-space: nowrap; 
    overflow: hidden;
  }
}

ul.menu a.menuTop {
  padding-left: 26px;
  background: url('./images/menu_top.png') no-repeat left center;
}
ul.menu a.menuTop:hover,
ul.menu a.menuTop.hover {
  background: url('./images/menu_top_over.png') no-repeat left center;
}

ul.menu a.menuNext {
  padding-right: 19px;
  background: url('./images/menu_next.png') no-repeat right center;
}
ul.menu a.menuNext:hover,
ul.menu a.menuNext.hover {
  background: url('./images/menu_next_over.png') no-repeat right center;
}
@media only screen and (max-width: 320px) {
  ul.menu a.menuNext,
  ul.menu a.menuNext:Hover,
  ul.menu a.menuNext.hover {
    padding-left: 9px;
    background-position: center center;
    text-indent: -9999px;
    white-space: nowrap; 
    overflow: hidden;
  }
}

ul.menu a.menuPrevious {
  padding-left: 19px;
  background: url('./images/menu_previous.png') no-repeat left center;
}
ul.menu a.menuPrevious:hover,
ul.menu a.menuPrevious.hover {
  background: url('./images/menu_previous_over.png') no-repeat left center;
}
@media only screen and (max-width: 320px) {
  ul.menu a.menuPrevious,
  ul.menu a.menuPrevious:Hover,
  ul.menu a.menuPrevious.hover {
    padding-left: 9px;
    background-position: center center;
    text-indent: -9999px;
    white-space: nowrap; 
    overflow: hidden;
  }
}
  
  
/* Click enlarge table/image styles for mobile) */
/* -------------------------------------------- */

@media only screen and (max-width: 650px) {
  img {max-width: 100%; max-width: calc(100% - 20px); max-height: 95%; max-height: calc(100vh - 20px);}
  img.expanded {max-width: none; max-height: none;}

  .captionedImage .image img.expanded {max-width: none; max-height: none;}
  .captionedImageCentred .image img.expanded {max-width: none; max-height: none;}
}


/* Responsive layouts for videos/flash fall-back */
/* ---------------------------------------------------- */

div.videoContainer_4-3 {
  margin: 0;
  padding: 0;
  position: static;
  overflow: hidden;
  max-width: calc((100vh - 64px) * (4 / 3));
  max-height: calc(100vh - 64px);
}

div.videoContainer_16-9 {
  margin: 0;
  padding: 0;
  position: static;
  overflow: hidden;
  max-width: calc((100vh - 64px) * (16 / 9));
  max-height: calc(100vh - 64px);
}

div.videoContainer_4-3 object, div.videoContainer_16-9 object {
  display: block;
  position: static;
  top: 0;
  left: 0;
}

div.videoContainer_4-3 video, div.videoContainer_16-9 video {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}


/* Responsive column layouts for captioned image groups */
/* ---------------------------------------------------- */

@media only screen and (max-width: 500px) {
  /* single column layout for captioned image group */
  .captionedImageGroup .captionedImage,
  .captionedImageGroup .captionedImage.colspan-2,
  .captionedImageGroup .captionedImage.colspan-3,
  .captionedImageGroup .captionedImage.colspan-4,
  .captionedImageGroup .captionedImage.colspan-5 {
    width: 93%;
    width: calc((100% - 20px) - 2em);
  }
}

@media only screen and (min-width: 500px) {
  /* two column layout for captioned image group */
  .captionedImageGroup .captionedImage {
    width: 42.5%;
    width: calc(((100% - 20px) / 2) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-2,
  .captionedImageGroup .captionedImage.colspan-3,
  .captionedImageGroup .captionedImage.colspan-4,
  .captionedImageGroup .captionedImage.colspan-5 {
    width: 93%;
    width: calc((100% - 20px) - 2em);
  }
}

@media only screen and (min-width: 700px) {
  /* three column layout for captioned image group */
  .captionedImageGroup .captionedImage {
    width: 29%;
    width: calc(((100% - 20px) / 3) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-2 {
    width: 58%;
    width: calc((((100% - 20px) / 3) * 2) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-3,
  .captionedImageGroup .captionedImage.colspan-4,
  .captionedImageGroup .captionedImage.colspan-5 {
    width: 93%;
    width: calc((100% - 20px) - 2em);
  }
}

@media only screen and (min-width: 900px) {
  .captionedImageGroup .captionedImage {
    /* four column layout for captioned image group */
    width: 21.5%;
    width: calc(((100% - 20px) / 4) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-2 {
    width: 43%;
    width: calc((((100% - 20px) / 4) * 2) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-3 {
    width: 64.5%;
    width: calc((((100% - 20px) / 4) * 3) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-4,
  .captionedImageGroup .captionedImage.colspan-5 {
    width: 93%;
    width: calc((100% - 20px) - 2em);
  }
}

@media only screen and (min-width: 1100px) {
  /* five column layout for captioned image group */
  .captionedImageGroup .captionedImage {
    width: 17%;
    width: calc(((100% - 20px) / 5) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-2 {
    width: 34%;
    width: calc((((100% - 20px) / 5) * 2) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-3 {
    width: 68%;
    width: calc((((100% - 20px) / 5) * 3) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-4 {
    width: 85%;
    width: calc((((100% - 20px) / 5) * 4) - 2em);
  }

  .captionedImageGroup .captionedImage.colspan-5 {
    width: 93%;
    width: calc((100% - 20px) - 2em);
  }
}

@media only print
{
  body {
    color: #000000;
    background: #ffffff;
  }

  a, a:link, a:visited, a:active, a:hover, a.hover {
    color: #000000;
    text-decoration: none;
    border-bottom-style: none;
    outline-style: none;
  }
  
  ul,
  ul ul,
  ul ul ul,
  ul ul ul ul {
    list-style-type:square;
    list-style-image: none;
  }
  

  div.pageBody {
    margin:  0;
    padding: 0;
    width: 100%;

    min-width: 0;
    max-width: none;

    background: #ffffff;
  }

  div.pageHeader {
    padding: 0;
    margin:  0px 0px 20px 0px;
  }

  div.contentBody {
    margin: 0 !important;
    padding: 0;
  }

  div.pageFooter {
    padding: 0;
    margin:  20px 0px 0px 0px;

    color: #000000;
    background: #ffffff
  }

  div.pageFooter .menu {
    display: none;
  }

  div.menuBody {
    display: none;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6
  {
    color: #000000;
  }
}