@import url('https://fonts.googleapis.com/css?family=Bitter:400,400i,700');

/* RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

ol,
ul {
    list-style: none;
}

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

caption {
    /*position:absolute;
    left:-9999em;*/
}


/* END RESET */

body {
    color: #333;
    /* padding-bottom:60px; */
    /* IR - Removed on 22 March 2016 as this seems unnecessary
    margin-bottom: 100px; 
    */
}

body,
.mejs-container {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

p {
    line-height: 140%;
    margin: 0 0 1em 0;
    min-height: 18px;
    min-width: 30px;
    display: block;
    clear: both;
}

* html p {
    height: 18px;
}

a {
    /* color: #06c; contrast increased */
    color: #304974;
}

sub {
    position: relative;
    font-size: 80%;
    top: 3px;
    vertical-align: baseline;
}

sup {
    position: relative;
    font-size: 80%;
    bottom: 3px;
    vertical-align: baseline;
}

.access {
    position: absolute;
    left: -9999em;
    width: 1px;
    height: 1px;
    float: left;
}

div.clear {
    clear: both;
    height: 0;
    background: none !important;
}

.main-title {
    font-size: 150%;
    background-color: #464647;
    margin: 0.5em 0 0.8em 0;
    padding-left: 0.4em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1em;
    color: #fff;
    font-family: 'Bitter', sans-serif;
    font-weight: normal;
}

h2 {
    color: #1B2F48;
    font-family: Georgia, Times, serif;
    font-size: 130%;
    font-weight: normal;
    margin: 0.3em 0;
    padding: 0.2em 0;
    width: 100%;
    background-color: #eee;
    border-bottom: 1px dotted #888;
}

a.link_zoom {
    background: url(../images/icon_zoom.gif) top left no-repeat;
    font-size: 85%;
    padding: 0 0 2px 17px
}

a.link_ext {
    background: url(../images/icon_ext_link.gif) center left no-repeat;
    padding: 0 0 0 19px;
}

p.lms_error {
    display: none;
}

p.error,
p.lms_error {
    background: #e6e6e6 url(../images/icon_error.gif) center left no-repeat;
    border: #ccc solid 1px;
    color: #555;
    font-size: 80%;
    line-height: 1em;
    padding: 4px 4px 4px 24px;
    min-height: 0;
    width: 480px;
}

p.lms-error {
    padding-top: 8px;
    padding-bottom: 8px;
    float: left;
    width: 200px;
    margin-bottom: 0;
}

p.lms-confirm {
    background: #EFE url(../images/confirm.gif) center left no-repeat;
    border: #BEB solid 1px;
    color: #000;
    font-size: 80%;
    line-height: 1em;
    padding: 8px 4px 8px 30px;
    margin-bottom: 0;
    min-height: 0;
    width: 200px;
    float: left;
}


/* popup pages */

#topnav {
    background: #eee;
    border-bottom: solid 5px #e18b11;
    width: 100%;
    height: 38px;
    min-width: 0;
}

#topnav h1 {
    padding: 10px 12px;
    color: #304974;
    font-size: 125%;
    font-weight: normal;
    text-shadow: 0 1px 0.4px #F4F4F4;
}

h2.main-title {
    margin-top: 0;
    line-height: 140%;
}


/*****/


/***************************
 /* PARAGRAPH TYPES
 ****************************/

.glossaryTermHeading {
    color: #F63;
}

.sub-heading,
h4 {
    color: #0072C6;
    margin: 0 0 1em 0;
    font-size: 100%;
}

p.nopadding-top {
    margin-top: -1em;
}

p.nopadding-bottom {
    margin-bottom: 0;
}

p.quote,
p.highlight,
p.attention,
div.warning,
p.warning {
    padding: 0.3em 0.5em;
}

p.quote span.quote_start {
    background: transparent url(../images/quote_start.gif) no-repeat top left;
    padding-left: 24px;
    zoom: 1;
}

p.quote {
    background: #cbcbcb url(../images/quote_end.gif) bottom right no-repeat;
    padding-right: 16px;
}

p.highlight {
    background-color: #b2deef;
}

p.attention {
    background-color: #f6dcb4;
}

div.warning,
p.warning {
    background-color: #e2b2cb;
    background-image: url(../images/warning.gif);
    background-position: center left;
    background-repeat: no-repeat;
    text-align: left;
    color: #000;
    margin: 6px 0;
    padding: 6px 6px 6px 32px;
    font-weight: bold;
}

p.para-box-left {
    float: left;
    width: 44%;
    margin: 0.3em 0 1em 0;
    clear: none;
    position: relative;
}

p.para-box-right {
    float: right;
    width: 44%;
    margin: 0.3em 0 1em 0;
    clear: none;
    position: relative;
}

p.quote.para-box-right {
    width: 42%;
}

p.quote.para-box-left {
    width: 42%;
}

p.para-left {
    float: left;
    width: 47%;
    margin: 0.3em 0 0.7em 0;
    clear: none;
}

p.para-right {
    float: right;
    width: 47%;
    margin: 0.3em 0 0.7em 0;
    clear: none;
}

p:first-child {
    margin-top: 0px
}

#Session-Completion img {
    vertical-align: bottom;
}


/***************************
 /* TEXT TYPES
 ****************************/

.instr {
    color: #666666;
    font-style: italic;
}

.caption {
    position: relative;
    font-size: 85%;
    color: #555;
}

.formula {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
}


/***************************
 /* LAYOUT
 ****************************/

div.tab-layout,
div#top_link {
    position: relative;
    width: 980px;
    margin: 32px auto 0 auto;
}

div.tab-layout {
    min-height: 450px;
    padding: 0px 12px 0 12px;
}

div.multi-layout div.tab-layout {
    top: 20px;
    padding-top: 10px;
    margin-top: 0;
}

div.left,
div.right {
    position: relative;
    display: inline;
    min-height: 445px;
    margin: 0;
}

div.right {
    float: right;
}

div.left {
    float: left;
}

div.tab0 div.left {
    width: 980px;
}

div.tab0 div.right {
    width: 0;
}

div.tab1 div.left {
    width: 720px;
}

div.tab1 div.right {
    width: 240px;
}

div.tab2 div.left {
    width: 640px;
}

div.tab2 div.right {
    width: 320px;
}

div.tab3 div.left {
    width: 480px;
}

div.tab3 div.right {
    width: 480px;
}

div.tab4 div.left {
    width: 320px;
}

div.tab4 div.right {
    width: 640px;
}

div.tab5 div.left {
    width: 240px;
}

div.tab5 div.right {
    width: 720px;
}

.invisible {
    visibility: hidden;
}


/***************************
 /* TAB BAR
 ****************************/

div.tab-nav,
div.top-link {
    position: relative;
    width: 980px;
    margin: 10px auto -20px auto;
    z-index: 200;
}

div.tab-nav ul {
    padding: 3px 12px 3px 6px;
    border-bottom: 1px solid #a00054;
}

div.tab-nav ul li {
    display: inline;
    margin: 0;
}

div.tab-nav ul li a {
    background: #a00054;
    border: #a00054;
    solid 1px;
    border-bottom: none;
    text-decoration: none;
    height: 15px;
    padding: 4px 7px;
    color: #fff;
}

div.tab-nav ul li a:hover {
    background: #a00054;
    border-color: #a00054;
    text-decoration: underline;
}

div.tab-nav ul li.tab-on a,
div.tab-nav ul li.tab-on a:hover {
    background: #fff;
    border-color: #a00054;
    border-bottom: 1px solid white;
    border-top: 1px solid #a00054;
    border-left: 1px solid #a00054;
    border-right: 1px solid #a00054;
    color: #000;
    height: 16px;
    padding: 4px 7px;
    font-weight: normal;
    text-decoration: none;
}

#assessmentKey div ul li img {
    vertical-align: middle;
}


/***************************
 /* LINKS
 ****************************/

a.int {
    height: auto;
    padding: 0;
    margin: 0;
}

div.embedImgBorder a.int img {
    border: #06c solid 1px;
    border-top-width: 3px;
}

div.embedImgBorder a.int img,
div.embedImgBorder a.int:hover img {
    filter: alpha(opacity=80);
    opacity: .8;
    padding: 0;
    margin: 0
}

div.embedImgBorder a.int:hover img {
    filter: alpha(opacity=100);
    opacity: 1;
}

div.embedImgBorder a.int.sel img,
div.embedImgBorder a.int.sel:hover img {
    border: 1px solid #1b2f48;
    border-bottom-width: 3px;
    filter: alpha(opacity=100);
    opacity: 1;
}

a.int.sel {
    background-color: #0072C6;
    color: #fff;
    text-decoration: none;
}


/***************************
 /* IMAGES
 ****************************/

div.content-b {
    margin: 0 auto;
    border: solid 1px #555;
}

img.img-content {
    margin: 0.2em auto;
}

img.img {
    display: block;
    margin: 0 auto;
}

img.img-b {
    border: solid 1px #555;
}

img.img-left {
    float: left;
    margin-right: 10px
}

img.img-right {
    float: right;
    margin-left: 10px;
}

img.img-center {
    display: block;
    margin: 0 auto;
}

img.img-align-middle {
    margin: 0;
    vertical-align: middle;
}

img.img-align-bottom {
    margin: 0;
    vertical-align: bottom;
}

img.img-align-top {
    margin: 0;
    vertical-align: top;
}

img.img-align-baseline {
    margin: 0;
    vertical-align: baseline;
}

.img-caption {
    width: 100%;
    margin-top: 0.2em;
}

.img-caption .caption {
    float: left;
    width: 100%;
    font-size: 85%;
    color: #555;
    text-align: left;
}

.zoom {
    float: right;
    text-align: right;
    height: 16px;
}

div.tbl-caption {
    margin-top: 0.2em;
    /* position: relative; */
    font-size: 85%;
    color: #555;
    text-align: left;
}


/***************************
 /* VIDEOS
 ****************************/

.video-sc {
    text-align: center;
    background-color: #eee;
}


/***************************
 /* TABLES
 ****************************/

table.table-content {
    margin: 0 0 0.7em 0;
}

table.table-center {
    margin: 0 auto 0.7em auto;
}

table.table-content th {
    /* background-color: #8BA6C9; increased contrast */
    background-color: #464647;
    border: solid 1px #fff;
    color: #fff;
    font-weight: bold;
    padding: 0.2em 0.5em;
}

table.table-content td {
    background-color: #fff;
    border: solid 1px #CCDCED;
    padding: 0.2em 0.5em;
}

table.table-content caption {
    caption-side: bottom;
    font-size: 85%;
    color: #555;
    text-align: left;
    padding-bottom: 0.4em;
    padding-top: 0.4em;
    margin-top: 0;
    margin-bottom: 0.4em
}

.cell-top {
    vertical-align: top;
}

.cell-middle {
    vertical-align: middle;
}

.cell-bottom {
    vertical-align: text-bottom;
}

.cell-left {
    text-align: left;
}

.cell-center {
    text-align: center;
}

.cell-right {
    text-align: right;
}

.cell-justify {
    text-align: justify;
}


/***************************
 /* LISTS
 ****************************/

ol.ol-content,
ol.ol-alpha-u,
ol.ol-alpha-l,
ol.ol-roman-u,
ol.ol-roman-l {
    list-style: decimal;
    margin: 0 0 0.7em 2.5em;
    padding: 0.3em 0 0.3em 0em;
    font-weight: bold;
}

ol.ol-alpha-u {
    list-style: upper-alpha;
}

ol.ol-alpha-l {
    list-style: lower-alpha;
}

ol.ol-roman-u {
    list-style: upper-roman;
}

ol.ol-roman-l {
    list-style: lower-roman;
}

ul.ul-content {
    padding: 0.3em 0 0.3em 0em;
    margin: 0 0 0.7em 1.8em;
    list-style: disc;
}

ul.ul-content li span,
ol.ol-content li span,
ol.ol-alpha-u li span,
ol.ol-alpha-l li span,
ol.ol-roman-u li span,
ol.ol-roman-l li span {
    font-weight: normal;
    line-height: 1.4em;
}

li {
    line-height: 1.4em;
}

ul.ul-content ul.ul-content {
    list-style: circle;
}

ul.ul-content ul.ul-content ul.ul-content {
    list-style: square;
}


/***************************
 /* QUESTIONS
 ****************************/


/* QUESTION CONTENT BOXES */

div.box,
div.box-collapse {
    margin: 0 0 1.5em 0;
    width: 100%;
}

div.box h3 {
    background: #464647;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    margin: 0 0 0.3em 0;
    padding: 0.2em 0.5em;
}

div.box.box-collapse h3 {
    background: #464647;
    color: #fff;
}

div.box div {
    display: block;
    visibility: visible
}

div.box>div {
    /* added to stop some items such as bullet points wrapping up into the new button area in a feedback column */
    clear: both;
}

div.box.box-collapse div {
    display: none;
    visibility: hidden;
}

div.box div div {
    display: block;
    visibility: visible;
}

div.box h3 a,
div.box-collapse h3 a {
    float: right;
    font-size: 0;
    font-weight: normal;
    height: 13px;
    width: 16px
}

div.box h3.sub-heading {
    /* Added to prevent sub headings within box class getting default styling for h3 */
    color: #0072c6;
    padding: 0;
    background: none;
    margin: 0 0 1em 0;
    font-size: 100%;
}

a.box-show {
    background: url(../images/icon_plus.gif) no-repeat center right
}

a.box-hide {
    background: url(../images/icon_minus.gif) no-repeat center right
}

div.box.box-collapse a.box-show {
    display: block;
    visibility: visible;
}

div.box a.box-show {
    display: none;
    visibility: hidden;
}

div.box.box-collapse a.box-hide {
    display: none;
    visibility: hidden;
}

div.box a.box-hide {
    display: block;
    visibility: visible;
}


/* QUESTION LAYOUT */

div.left,
div.sub_left,
div.right,
div.sub_right {
    position: relative;
    display: inline;
    min-height: 420px;
    margin: 0;
}


/* FIXED HEIGHT OPTIONS */

div.vq1 div.question-stem {
    min-height: 100px;
}

* html div.vq1 div.question-stem {
    height: 100px;
}

div.vq1 table.options {
    height: 340px;
}

div.vq2 div.question-stem {
    min-height: 140px;
}

* html div.vq2 div.question-stem {
    height: 140px;
}

div.vq2 table.options {
    height: 300px;
}

div.vq3 div.question-stem {
    min-height: 180px;
}

* html div.vq3 div.question-stem {
    height: 180px;
}

div.vq3 table.options {
    height: 260px;
}

div.vq1 .table {
    height: 340px;
}

div.vq2 .table {
    height: 300px;
}

div.vq3 .table {
    height: 260px;
}

div.vq1 .table input.table-cell,
div.vq2 .table input.table-cell,
div.vq3 .table input.table-cell {
    /* height: 100%; */ /* Commented out by PS 20/11/18 to resolve alignment issue of radio buttons/checkboxes */
}

div.vq1 caption,
div.vq2 caption,
div.vq3 caption {
    display: none;
}

div.question-stem {
    background: #dddddd;
    /*border:#C4D1E3 solid 1px; */
    border-bottom: none;
    padding: 0.5em 0.5em 0.1em 0.5em;
    margin: 0;
}

div.question-form,
div.question-flash {
    background-color: #eeeeef;
    /* border:#D0E0EE solid 1px; */
    border-top: none;
    border-bottom: none;
    padding: 0.5em 0.5em 0.2em 0.5em;
    margin: 0;
}

* html div.question-form {
    background-image: none;
}

div.question-flash {
    padding: 0
}

.submit-instr {
    text-align: left;
}

.submit-instr .instr {
    margin-top: 6px;
}

.submit-instr .btn2,
.submit-instr .btn2-off {
    margin-top: -6px;
    margin-left: 10px;
}

.submit-bottom {
    background-color: #eeeeef;
    /*border: #CCC solid 1px; */
    border-top: 0 none;
    height: 47px;
}

.submit-bottom .submit {
    margin: 10px;
}

.feedback .question-score {
    /* float: left; */
    margin: 5px 0;
    padding: 8px 0 8px 0;
    /* width: 153px; */
}

.feedback.question-feed.box>div {
    margin-left: 10px;
    margin-right: 10px;
    /* padding-bottom: 10px !important; */
}

.feedback.question-feed.box ol.ol-content,
ol.ol-alpha-u,
ol.ol-alpha-l,
ol.ol-roman-u,
ol.ol-roman-l {
    margin-left: 1.5em;
}

.options {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}

.options .option {
    /* float:left; */
    width: 100%;
    padding-top: 3px;
    border-bottom: 1px solid #CCDCED;
    height: 20px;
}

.options.optionsFeedback .optionLast {
    padding-bottom: 10px;
}

.options.optionsFeedback .option {
    height: auto;
    border-bottom: none;
}

table.options .option {
    float: none;
}

.options thead th {
    /*background-color: #FAFCFE;*/
    border-bottom: 1px solid #CCDCED;
    color: #0072C6;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    height: 2em;
    padding: 0.5em;
}

.options thead th.feedback {
    background-color: transparent;
}

.options .option-num {
    color: #0072C6;
    font-weight: bold;
    width: 22px;
    padding-right: 5px;
    /* float: left; */
}

table.options th.option-num,
table.options td.option-num {
    float: none;
    /* override for tbale layout style */
}

.option-num.table-cell {
    display: table-cell;
}

.options .option-blank {
    width: 0;
    padding: 0;
}

.options .free-input {
    border: none;
}

.options .option-input,
.options .option-input-fixed {
    /* background-color: #FAFCFE; */
    color: #333;
    text-align: center;
    vertical-align: top;
    /* CHANGED BY PS 21.12.16 to fix MRB alignment of ticks and radio buttons */
    /* width: auto; * / Commented out by PS 26.03.18 to fix issue with checkboxes appearing round on IOS devices.*/
    
    float: right;
    padding: 0;
}

.options label {
    /* float:left; */
}

table.options td.option-input {
    float: none;
    /* override for tbale layout style */
}

table.options td.option-input-fixed {
    width: 3em;
    /* override for tbale layout style */
}


/*
table.options td.option-input, table.options td.option-input-fixed {
    background-color: #FAFCFE;
}
*/

.label-access {
    display: none;
    visibility: hidden;
}

.options .option-feed {
    /* float:right; */
    width: 30px;
    text-align: center;
    vertical-align: top;
}

table.options th.option-feed,
table.options td.option-feed {
    float: none;
    /* override for table layout style */
}

.options .submit {
    border-bottom: none;
    text-align: right;
    vertical-align: top;
    height: 2.5em;
}

td.retry {
    text-align: right
}

td.divider {
    background-color: #e3f0fc
}

.free-input textarea,
.free-input div {
    overflow: auto;
    border: solid 1px #CCDCED;
    background-color: #fff;
    color: #444;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 0.2em 0.1em;
    text-align: left;
    height: 170px;
    width: 97%;
    resize: vertical;
}

.free-input div span.keyword {
    background-color: #99FF99;
    font-weight: bold;
    color: #222;
}


/***************************
 /* BUTTONS
 ****************************/

.btn1 {
    cursor: pointer;
    text-align: center;
    display: block;
    min-width: 60px;
    text-decoration: none;
    color: #fff;
}

.btn1 {
    float: right;
    background: #a00054;
}

.btn1 span {
    padding: 3px 5px;
    text-align: center;
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
}

.btn1:hover {
    background-color: #600032;
}

.btn-rsc span div.btn-icon,
div.box-titles a.btn-rsc span div.btn-icon {
    display: inline;
    background: url(../images/button_ext_link.gif) left no-repeat;
    padding: 5px 7px;
}

.btn2,
.btn2-off {
    cursor: pointer;
    text-align: center;
    display: block;
    width: 90px;
    margin: 2px 0;
    text-decoration: none;
    color: #fff;
    float: right;
}

.btn2-medium {
    width: 110px;
}

.btn2-wide {
    width: 170px;
}

.btn2 {
    background: #a00054;
}

.btn2-off {
    background: #CCC url(../images/btn_disabled_border_top.gif) no-repeat top left;
    cursor: default;
}

.btn2 span,
.btn2-off span {
    padding: 3px 1px;
    text-align: center;
    position: relative;
    height: 20px;
    left: 1px;
    top: 1px;
    display: block;
    text-decoration: none;
    color: #fff;
}

.btn2:hover {
    background-color: #600032;
}

.btn2-off:hover {
    background-color: #ccc;
}

.btn2 input,
.btn2-off input {
    border: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    color: #fff;
    background: none;
    font-size: 14px;
    font-weight: normal;
    width: auto;
    padding: 0;
    margin: 0;
}


/***************************
 /* TITLE SCREENS
 ****************************/

table.titles,
.table.titles {
    font-size: 85%;
    margin-bottom: 1.3em;
}

.table.titles {
    margin-bottom: 1em;
}

table.titles th,
table.titles td,
.table-cell.titles {
    text-align: left;
    background: url(../images/border_dotted.gif) bottom repeat-x;
    padding: 0.2em 0.1em 0.4em 0;
}

table.titles th,
.table-cell.table-heading {
    width: auto;
    padding-right: 1em;
    font-weight: bold;
}

div.box-titles {
    margin: 0 0 1em 0;
    width: 100%;
}

div.box-titles h3 {
    background: #eee;
    color: #333;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 0 0 0;
    padding: 0.4em 0.5em;
    font-family: 'Bitter', sans-serif;
}

div.box-titles h3:after {
    height: 0.3em;
    display: block;
    width: 3em;
    background-color: #a00054;
    content: "";
}

div.box-titles div {
    padding: 0.5em;
    background-color: #eee;
}


/* drop shadows for all browsers */

div.tab1 div.box-titles div,
div.tab2 div.box-titles div,
div.tab3 div.box-titles div,
div.tab4 div.box-titles div,
div.tab5 div.box-titles div {
    background-position: bottom left;
    background-repeat: no-repeat;
    padding-bottom: 0.8em
}

div.tab1 div.box-titles div {
    background-image: url(../images/drop_75.gif);
}


/* no drop shadows for ie6 */

* html div.tab1 div.box-titles div,
* html div.tab2 div.box-titles div,
* html div.tab3 div.box-titles div,
* html div.tab4 div.box-titles div,
* html div.tab5 div.box-titles div {
    background-image: none;
}

div.tab1 div.box-titles div div,
div.tab2 div.box-titles div div,
div.tab3 div.box-titles div div,
div.tab4 div.box-titles div div,
div.tab5 div.box-titles div div {
    margin: 0;
    background: none;
}

div.box-titles div div {
    background: none;
}

div.title_left {
    background: none !important;
}

.logos {
    width: 100%;
    height: 445px;
    border-collapse: collapse;
}

.logos .logos-td {
    text-align: center;
    padding: 15px 5px;
}


/***************************
 /* SLIDESHOWS/GALLERIES
 ****************************/

td.slide-td-prev {
    width: 72px;
    text-align: left;
}

td.slide-td-next {
    width: 47px;
    text-align: right;
}

td.slide-td-next a {
    right: 0;
}

a.slide-link,
a.slide-link:active,
a.slide-link:visited,
a.slide-link:link {
    background-color: #CCC;
    color: #06c;
    font-weight: normal;
    margin: 0;
    padding: 1px 5px;
    text-decoration: underline;
}

a.slide-link.slide-on,
a.slide-link:hover {
    background-color: #333;
    color: #fff;
    font-weight: normal;
    margin: 0;
    padding: 1px 5px;
    text-decoration: none;
}

a.slide-prev {
    display: block;
    float: left;
    background: url(../images/slide_nav_left.gif) center left no-repeat;
    color: #06c;
    padding-left: 12px;
    text-align: left;
    text-decoration: underline;
}

a.slide-next {
    display: block;
    float: right;
    background: url(../images/slide_nav_right.gif) center right no-repeat;
    color: #06c;
    padding-right: 12px;
    text-align: right;
    text-decoration: underline;
}

a.slide-prev.slide-nav-off {
    background-image: url(../images/slide_nav_left_off.gif);
    color: #CCC;
    text-decoration: none;
}

a.slide-next.slide-nav-off {
    background-image: url(../images/slide_nav_right_off.gif);
    color: #CCC;
    text-decoration: none;
}

div.gal-nav {
    margin: 5px 0 0 0;
}

div.gal-nav div.slide-control-container {
    width: 100%;
    height: 20px;
    text-align: center;
}

div.gal-nav div.slide-control-container div.slide-counter {
    display: inline;
}

div.gal-sm a,
div.gal-lg a {
    display: inline;
    position: relative;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

div.gal-sm,
div.gal-lg {
    background-color: #fff;
    border: 1px solid #ccc;
    float: left;
    display: inline;
    /*IE7*/
    display: table;
    margin: 0 5px 5px 0;
    width: 48px;
    height: 48px;
}

div.gal-lg {
    height: 90px;
    width: 90px;
}

div.slide-control div img,
div.gal-control div img {
    display: block;
    margin: auto auto auto auto;
}

a.gal-link img,
a.gal-link:active img,
a.gal-link:visited img {
    border: 2px solid #fff;
    filter: alpha(opacity=70);
    opacity: .7;
}

a.gal-link:hover img {
    border: 2px solid #888;
    filter: alpha(opacity=80);
    opacity: .8;
}

a.gal-link.gal-on img {
    border: 2px solid #333;
    filter: alpha(opacity=100);
    opacity: 1;
}

h4.gal-title {
    margin-bottom: 0;
    line-height: 1.4em;
}

p.gal-caption {
    margin-bottom: 0;
}


/* Reflection Styles */

div.reflectAnswer {
    background: #EAF1F8;
    padding: 5px;
    margin-bottom: 8px
}

div.reflectAnswer h4 {
    margin: 0.3em 0 0 0;
}

p#reflectionSumm textarea,
div.reflectAnswer textarea {
    width: 98%;
    height: 70px;
    border: solid 1px #CEDDED;
    color: #444;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 1px;
}

div.reflectAnswer span.instr {
    float: right;
    font-size: 8pt;
    display: none;
}


/* *****************************************************************
/* Glossary Tooltip
/* ***************************************************************** */

a.glossaryTerm,
a.badGlossaryTerm,
.relatedSession,
.reference {
    text-decoration: none;
    border-style: dashed;
    border-width: 0 0 1px 0;
}

.relatedSession .ui-icon {
    display: inline-block;
}

.reference .ui-icon {
    display: inline-block;
}

a.badGlossaryTerm {
    color: #000;
    background-color: red;
    border-color: red;
}


/* e-LfH blue */

.ui-tooltip,
.arrow:after {
    background: #0076c6;
    border: 20px solid #93ABD2;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ui-tooltip {
    padding: 10px 20px;
    color: #fff;
    font-size: 0.8rem;
}


/* Added by PS 16/11/2018 */

.ui-tooltip a {    
    color: #fff;   
}

/* End of adddition */

ol.glossary-definition,
ol.session-reference-definition,
ol.reference-definition {
    list-style-type: decimal;
    margin: 0.4rem 1rem 0.4rem 1rem;
}

.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
    bottom: -20px;
    top: auto;
}

.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    bottom: -16px;
    top: -16px;
    bottom: auto;
    left: -3px;
}

#glossaryTerms ol.ol-content,
#relatedSessions ol.ol-content,
#references ol.ol-content {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}


/* *****************************************************************
/* Mouse cursors / pointers
/* ***************************************************************** */

.moveCursor {
    cursor: move;
}

.defaultCursor {
    cursor: default;
}

.pointerCursor {
    cursor: pointer;
}


/* *****************************************************************
/* Drag Drop CSS
/* ***************************************************************** */

.hotspot-model,
.drag-drop-pairs,
.drag-drop-sorting-order,
.drag-drop-sorting-lists,
.drag-drop-pictures {
    position: relative;
    background-color: #EAF1F8;
}

.drag-drop-pairs,
.drag-drop-sorting-order,
.drag-drop-sorting-lists {
    /* extend the bottom to give the control buttons a background colour */
    padding-bottom: 40px;
}

.drag-drop-pairs ul li,
.drag-drop-sorting-order ul li {
    font-size: 0.8em;
}

.drag-drop-pairs-targets {
    position: relative;
    float: left;
    margin: 10px 0 25px 10px;
    padding: 0px;
}

.drag-drop-pairs-sources {
    position: relative;
    float: right;
    margin: 10px 5px 0 0;
    padding: 5px;
}

.target {
    font-weight: normal;
    font-weight: normal;
    margin: 0 0 5px 0;
}

.target-box {
    background-color: #fff;
    border: dashed 1px #333;
    float: right;
    position: relative;
}

.target .target-label {
    margin-right: 5px;
    float: left;
    text-align: right;
}

.target-assets,
.source-answer-assets {
    margin: 0;
}

li.source,
div.source,
.source-answer {
    background-color: #0072c6;
    color: #fff;
}

li.source,
div.source {
    position: relative;
    margin: 5px auto;
}

.target-assets,
.source-answer-assets {
    float: left;
}

.sourceOuter,
li.source,
.target-box {
    width: 150px;
    height: 50px;
}

.labelOuter {
    height: 50px;
    width: 280px;
}

.sourceOuter,
.labelOuter {
    display: table;
    overflow: visible;
}

.sourceOuter .sourceInner,
.labelOuter .labelInner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
}

.sourceOuter .sourceInner {
    text-align: center;
}

.labelOuter .labelInner {
    text-align: right;
}

.sourceOuter .sourceInner div,
.labelOuter .labelInner div {
    display: block;
}

.hovered {
    background-color: #A1BAD6;
}

.solid-border {
    /*border: 1px solid #333; */
    border: 1px solid #0072c6;
}


/* remove borders on drag and drop boxes */

.source.solid-border {
    /*border: 0; */
    border: 1px solid #0072c6;
}

.dashed-border {
    border: 1px dashed #333;
}

.left-border-only {
    border-width: 0 0 0 1px;
}

.drag-drop-control-btns {
    /*
        position: absolute;
        margin: 40px 0 0 0;
        */
    position: relative;
    right: 10px;
}

.tickInBox,
.crossInBox {
    width: 13px;
    height: 14px;
    position: absolute;
    bottom: 2px;
    right: 5px;
}

.crossInBox {
    width: 14px;
}


/*

.tickInBox {
    background: transparent url('../images/tick.png') no-repeat top left;
}
.crossInBox {
    background: transparent url('../images/cross.png') no-repeat top left;
}

*/

.drag-drop-toggle {
    width: 180px;
    margin: 5px 0 5px 0;
}


/* *****************************************************************
/* Knockout JS Image Hotspots
/* ***************************************************************** */

.hotspot-model {
    padding: 10px 0 10px 0;
}

.hotspot-errors,
.errors {
    margin: 5px;
    padding: 5px;
    border: solid 1px #ff0000;
    background-color: #FC8181;
}

.hotspot-errors p,
.errors p {
    font-size: 1em;
    color: #000
}

.hotspot-settings {
    margin: 10px 0 10px 3px;
}

.hotspot-control,
.hotspot-settings {
    width: 450px;
}

.hotspot-control {
    margin: 0 0 1px 3px;
    background-color: #ffffff;
}

.hotspot-details-link {
    background-color: #74BCE8;
    color: #000;
    font-weight: bold;
    padding: 3px;
    cursor: pointer;
}

.hotspot-details-link a {
    text-decoration: none;
    color: #000;
    text-align: center;
}

.hotspot-details textarea {
    width: 99%;
    resize: none;
}

.hotspot-details {
    display: none;
    padding: 3px;
    border-top-width: 0;
}

.hotspot-details-link,
.hotspot-details {
    border: solid 1px #5187A8;
}

.hotspot-image {
    cursor: pointer;
    margin: 0 auto;
}

.hotspot-coords {
    background-color: #eee;
}


/* *****************************************************************
/* Knockout Drag Drop Sort Order
/* ***************************************************************** */

.sortingOrderLabel {
    text-align: center;
}

.drag-drop-sorting-order {
    padding-top: 10px;
}

.list-sources {
    padding: 0px;
}

.drag-drop-sorting-order ul li.source {
    /* font-size: 0.8em; */
}

.drag-drop-sorting-order li.source,
.drag-drop-sorting-order .sourceOuter {
    width: 190px;
}

.sorting-order-container {
    position: relative;
    margin: 0 auto;
    width: 200px;
}


/* *****************************************************************
   Sorting Lists
   *****************************************************************
*/

.drag-drop-sorting-lists {
    padding-top: 10px;
    overflow: hidden;
}

.drag-drop-sorting-lists .drag-drop-control-btns {
    position: absolute;
    bottom: 10px;
}

.drag-drop-sorting-lists .sourceOuter {
    width: 100%;
}


/* .drag-drop-sorting-lists li.source, */

.drag-drop-targets,
.drag-drop-sources {
    font-size: 0.8em;
}

.drag-drop-sources {
    position: relative;
    float: right;
    margin: 0 5px 0 0;
}

.list-target-section {
    float: left;
    margin: 0 0 0 10px;
}

.list-target-section {
    position: relative;
    float: left;
    margin: 0px;
    /* padding: 0 2px 0 2px;  */
    width: 160px;
}

.list-target-section {}

.list-target-section p {
    text-align: center;
}

.center-list {
    /*position: absolute;
    left: 30%;
    float: none;
    */
    position: relative;
    left: 30%;
    float: left;
}

.center-list>p {
    text-align: center;
}

.list-sources {
    position: relative;
}

ul.list-targets,
ul.correct-answers {
    padding: 0px;
}

.drag-drop-sorting-lists ul.list-targets,
.drag-drop-sorting-lists ul.list-sources {
    min-height: 150px;
    min-width: 150px;
    height: auto !important;
    height: 100px;
}

.drag-drop-sorting-lists ul.list-targets {
    padding-bottom: 100px;
}


/* *****************************************************************
    Image Stacker
   *****************************************************************
*/

.image-stacker {
    margin: 0 auto 10px auto;
    width: 100%;
    /* border: 1px #000 solid; */
}

.image-stack {
    border: 1px #ccc solid;
    padding: 5px;
    margin-bottom: 10px/* Added by PS 28/10/2015 to add a bit of breathing space */
}


/*
.image-stack .current-image img {

	border: 1px #ccc solid;
    padding: 5px;

}
*/

.stacker-controls {
    margin: 10px;
    height: 30px;
}

.stacker-slider {
    width: 50%;
}

.stacker-buttons {
    padding-right: 10px;
    padding-top: 5px;
}

.stacker-fusion-control {}

.stacker-slider,
.stacker-position,
.stacker-fusion-control,
.stacker-buttons {
    float: left;
}

.stacker-slider {
    margin-top: 5px;
}

.stacker-position,
.stacker-fusion-control {
    padding: 5px;
    font-size: 1em;
}

.stacker-position {
    margin-left: 20px;
}

.image-stack {
    float: left;
}


/* *****************************************************************
    D+D Pictures
   *****************************************************************
*/

.drag-drop-pictures {
    /* width: 640px; */
    padding-bottom: 20px;
    position: relative;
}

.drag-drop-pictures-image,
.drag-drop-pictures-image div.drag-drop-targets {
    position: relative;
}

.drag-drop-pictures-image {
    margin-bottom: 15px;
}

.drag-drop-pictures div.drag-drop-sources {
    position: absolute;
    top: 0px;
    right: 0px;
}


/*
.drag-drop-picture-sources .source {
    position: absolute;
    right: 0px;
}
*/

div.drag-drop-pictures div.target {
    position: absolute;
    width: 150px;
    height: 36px;
}

div.drag-drop-pictures div.source {
    width: 150px;
    height: 36px;
}

div.drag-drop-pictures div.source div.sourceOuter,
div.drag-drop-pictures div.target div.target-box {
    width: 150px;
    height: 36px;
}

.drag-drop-pictures .sourceOuter {
    height: 36px;
}

div.drag-drop-pictures div.numbered div.source,
div.drag-drop-pictures div.numbered div.sourceOuter,
div.drag-drop-pictures div.numbered div.target,
div.drag-drop-pictures div.numbered div.target-box {
    width: 36px;
}

div.target .target-box {
    border-style: solid;
    float: none;
}

.selectedDraggable {
    border-width: 1px;
    border-style: dashed;
}

.selectedDraggable .source-answer {
    background-color: #fff;
}

div.drag-drop-pictures div.numbered .tickInBox,
div.drag-drop-pictures div.numbered .crossInBox {
    bottom: 4px;
    right: 0px;
}

.numbered-label .labelOuter {
    width: 150px;
}

.numbered-label .labelInner {
    text-align: left;
    width: 150px;
}

.numbered .source,
.numbered .target {
    font-size: 1.1em;
}

.grey-background,
.numbered .grey-background,
.drag-drop-sources .grey-background {
    background-color: #bbb;
    border: 1px solid #bbb;
    /*
    filter: alpha(opacity=90);
    opacity: 0.9
    */
}

div.source-home {
    position: absolute;
    left: 0px;
    height: 36px;
}


/* *****************************************************************
    Advanced Zoom
   *****************************************************************
*/

#zoomable_image {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}

.slider-controls {
    float: left;
}


/*
#flash_zoom {
    height: 100%;
}
*/


/***************************
 /* Assessment Results
 ****************************/

.div-table a {
    color: #2440B0
}

.results-row.e .results-cell {
    background-color: #DBE7F2;
}

.results-cell {
    float: left;
    /*fix for  buggy browsers*/
    display: table-column;
    width: 220px;
    border-bottom: solid 1px #C1CFE3;
    background-color: #E8EFF7;
    padding: 3px 8px 4px 8px;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
}

.results-cell img {
    vertical-align: middle;
}

.results-cell {
    width: 260px;
}

.results-cell.mark,
.results-cell.total-mark,
.results-cell.total-percentage {
    text-align: center;
    width: 130px;
}

.results-cell.total-mark,
.results-cell.total-percentage {
    font-weight: bold;
}

.results-cell.total-percentage {
    font-size: 1.3em;
    border: solid 2px #93ABD2;
    background-color: #CCDCED;
}

.results-cell.total-percentage div {
    padding: 5px 0 5px 0;
}

.results-cell.empty {
    background-color: : #fff;
    border: none;
}

.results-feedback {
    float: left;
    background: none;
    border: none;
}


/* *****************************************************************
    Subtitles Editor
   *****************************************************************
*/

.caption-editor,
.closed-captions-container {
    width: 100%;
}

.caption-editor input {
    border: solid 1px #000;
    padding: 1px 2px 1px 2px;
}

.caption-editor textarea {
    resize: none;
}

.new-subtitles-file {
    display: none;
    width: 100%;
}

.subtitles {
    clear: both;
    width: 600px;
    height: 180px;
    overflow: auto;
    border: solid 1px #000;
    margin: 10px 0 10px 0;
    width: 100%;
}

.subtitles,
.entry {
    background-color: #eaf1f8;
}

.entry {
    float: left;
    clear: both;
    width: 90%;
    margin: 0px;
    padding: 3px 5px;
    color: #000;
}

.current-entry {
    background-color: #fff;
}

.timespan {
    float: left;
    margin-bottom: 5px;
}


/* *****************************************************************
   MediaElement Captions
   *****************************************************************
*/

.mejs-captions-layer {
    text-align: center;
    line-height: 1.7em;
    font-size: 1.1em;
    /* text-shadow: 1px 1px #FFFFCC; */
    color: #fff;
    z-index: 99;
    /* puts the captions in front of any poster image being displayed in an audio element */
}

.mejs-container-fullscreen .mejs-captions-layer {
    font-size: 2em;
}

.mejs-captions-text {
    padding: 5px;
    /*background: url(background.png);
    background: rgba(20, 20, 20, 0.3);*/
}


/* move audio captions down slightly, but not video captions, moving them a little below the progress bar if it is displayed */

.mejs-audio .mejs-captions-position-hover {
    /* bottom: 30px; */
}


/* *****************************************************************
    Generic Button Classes
   *****************************************************************
*/

.icon {
    padding: 4px 0;
    background-image: url(../images/session_sprites_16.png);
    width: 16px;
    height: 16px;
    display: block;
    float: left;
}

.icon-minus {
    background-position: 0 0;
}

.icon-plus {
    background-position: -16px 0px;
}

.icon-arrow-up {
    background-position: -32px 0px;
}

.icon-arrow-down {
    background-position: -48px 0px;
}

.icon-arrow-left {
    background-position: -64px 0px;
}

.icon-arrow-right {
    background-position: -80px 0px;
}

.icon-circle {
    background-position: -96px 0px;
}

.icon-rotate-clockwise {
    background-position: -113px 0px;
}

.icon-rotate-anti-clockwise {
    background-position: -130px 0px;
}

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: 1;
}


/* *****************************************************************
    jQuery Dialogs
   *****************************************************************
*/

.ui-front {
    z-index: 200;
}


.ui-dialog.custom-ui-widget-content {

    border: none;
    background: #fff;
    color: #222;
}

.ui-dialog-titlebar-close { 
    width: 26px !important; 
    height: 26px !important; 
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
}


.ui-dialog-titlebar-close .ui-icon { 
        height: 26px; 
        width:26px; 
        background: url(../images/dialogCross.gif)  !important; 
        background-repeat:no-repeat; 
        display:block; 
        cursor:pointer; 
} 


.ui-dialog .ui-dialog-titlebar-close {   
    margin: -12px 0 0 0;   
}



/*
.ui-widget-content {
    border: none;
    background: #fff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222;
}

*/

.ui-dialog {
    padding: 0;   
}

.ui-dialog .ui-widget-content {
    border-top: 1px dotted #E28C05;  /* Commented out by PS 16/11/18 */
}


.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 0;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 0;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 0;
}


/* Dark blue background widget header bar */

.ui-dialog .ui-widget-header {
    background: #464647;
    color: #fff;
    border:none;
}

.ui-dialog .ui-widget-content,
.ui-dialog .ui-widget input,
.ui-dialog .ui-widget select,
.ui-dialog .ui-widget textarea,
.ui-dialog .ui-widget button {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    text-align: center;
}


/* Ligth blue / white background */

.ui-dialog .ui-state-default,
.ui-dialog .ui-widget-content .ui-state-default,
.ui-dialog .ui-widget-header .ui-state-default {
    /* border-color: #464647; */
    /* background: #EEEEEF; */
    background: #D5D5D6;
    color: #000000;
    border:none;
}


/* Dark blue background */

.ui-dialog .ui-state-hover,
.ui-dialog .ui-widget-content .ui-state-hover,
.ui-dialog .ui-widget-header .ui-state-hover {
    border-color: #E28C05;
    background: #E28C05;
    color: #000;
}

.ui-dialog .ui-state-focus,
.ui-dialog .ui-widget-content .ui-state-focus,
.ui-dialog .ui-widget-header .ui-state-focus {
    border-color: #003964;
}

.ui-dialog .ui-widget-content p {
    line-height: 140%;
    margin: 0 0 1em;
    min-height: 18px;
    min-width: 30px;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 2px solid #464647;
    
}


/* *****************************************************************
    Table css
   *****************************************************************
*/

.table {
    display: table;
    width: 100%;
    /* width:auto; */
}

.table-cell {
    display: table-cell;
}

.table-cell img {
    vertical-align: middle;
}

.table-row {
    display: table-row;
}

.table-column {
    display: table-column;
}

.table-colgroup {
    display: table-colgroup;
}

.table-rowgroup {
    display: table-rowgroup;
}

.table-header-group {
    display: table-header-group;
}

.table-footer-group {
    display: table-footer-group;
}

.table-caption {
    display: table-caption;
}


/*
div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}*/