@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  height: 100%;
  overflow: hidden; }

body [onunload="unload_UDUTU()"] {
  min-height: 600px;
  min-width: 800px; }

div {
  margin: 0;
  padding: 0; }

img {
  behavior: url("pngbehavior.htc");
  border-style: none;
  height: auto;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  width: auto; }

/* 800x600 template */
.small iframe {
  margin-top: 5px; }

#waterMark {
  height: 0;
  width: 0; }

object#cacheflash {
  height: 0;
  position: absolute;
  width: 0; }

/* navigational and theme elements */
.nav {
  height: 80px;
  overflow: hidden;
  width: 100%; }

.nav .logo {
  margin: 0;
  padding: 0;
  float: left; }

.nav .button {
  float: right; }

.nav .button img {
  margin-right: 10px;
  padding: 0; }

.pageTitle {
  float: left;
  margin: 50px 0 0 10px; }

.infoBar {
  height: 19px;
  line-height: 19px;
  overflow: hidden;
  width: 100%; }

.infoBar .pageNum {
  float: right;
  display: inline;
  margin-right: 10px; }

.infoBar .breadCrumb {
  float: left;
  display: inline;
  margin-left: 10px; }

.contentBody {
  background-position: 0 -20px;
  text-align: left; }

.launchBox {
  position: relative;
  margin: 10px auto;
  padding: 0;
  width: 500px;
  height: auto; }

.launchBox .nav {
  margin-bottom: 10px; }

.launchBox .textHeadline {
  margin: 0 10px 10px; }

.launchBox p {
  margin: 0 10px 10px; }

.launchBtn {
  margin: 0 10px 10px; }

.footer {
  margin: 10px auto;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px; }

/* import css3 mixin's */
/* objects */
.editPanel {
  position: absolute;
  visibility: hidden;
  z-index: 1;
  padding: 5px;
  width: auto;
  top: 30px;
  border: solid 1px #666;
  background-color: #FFF; }

.editPanel p {
  margin: 0 0 5px 0; }

.caption {
  position: relative;
  height: 15px;
  line-height: 15px; }

.caption .editPanel {
  z-index: 20;
  top: -52px !important; }

.image {
  position: absolute;
  text-align: center; }

.image img {
  margin: 0 auto; }

.media {
  text-align: center;
  max-height: 100%;
  max-width: 100%; }

.title {
  margin: 0 0 .5em; }

/* begin panel layout */
#panel,
.panel {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 6px #999999;
  -moz-box-shadow: 2px 2px 6px #999999;
  box-shadow: 2px 2px 6px #999999;
  background-color: #fff;
  border: 2px solid #999;
  left: 0;
  margin: 0 auto;
  min-height: 20%;
  right: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 30%;
  width: 50%;
  z-index: 5000; }

#panel .close-btn,
.panel .close-btn {
  background-image: url(close-btn-bg.gif);
  float: right;
  height: 17px;
  width: 17px; }

#panel .instructions, #panel .feedback,
.panel .instructions,
.panel .feedback {
  clear: right;
  margin-bottom: 1.5em; }

#panel .button,
.panel .button {
  margin: 0 auto;
  text-align: center;
  width: 30%; }

#panel .text,
.panel .text {
  position: relative; }

/* end panel layout */
/* begin button layout */
#advanced .button,
#assessment .button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  overflow: hidden; }

#advanced .button a,
#assessment .button a {
  background-color: inherit;
  background-image: url(assessment_button_bg.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  display: block;
  color: inherit;
  margin: 1px;
  padding: 5px 7px;
  text-decoration: none; }

#advanced .button a:hover,
#assessment .button a:hover {
  background-position: left top; }

#advanced .button.disabled, #advanced .button.disabled a, #advanced .button.disabled a:hover,
#assessment .button.disabled,
#assessment .button.disabled a,
#assessment .button.disabled a:hover {
  background-color: #CCC;
  background-position: left bottom;
  cursor: default; }

#advanced .button.play, #advanced .button.pause,
#assessment .button.play,
#assessment .button.pause {
  width: 40px; }

#advanced .button.play a, #advanced .button.pause a,
#assessment .button.play a,
#assessment .button.pause a {
  background-image: url(assessment_button_bg.png), url(playpause_bg.png);
  background-position: left bottom, center 5px;
  background-repeat: repeat-x, no-repeat; }

#advanced .button.play a span, #advanced .button.pause a span,
#assessment .button.play a span,
#assessment .button.pause a span {
  visibility: hidden; }

#advanced .button.pause a,
#assessment .button.pause a {
  background-position: left bottom, center -35px; }

#advanced .button.play a:hover,
#assessment .button.play a:hover {
  background-position: left top, center 5px; }

#advanced .button.pause a:hover,
#assessment .button.pause a:hover {
  background-position: left top, center -35px; }

.text {
  position: absolute;
  overflow: auto; }

ul, ol {
  margin: 10px 0;
  padding-left: 10px;
  list-style-position: outside; }

ol {
  padding-left: 25px; }

ul {
  list-style-type: square; }

li {
  margin: 0 0 5px 10px; }

.text .textHeadline {
  position: relative;
  margin-bottom: 10px; }

.text .textContent {
  position: relative; }

.infoLinksBox {
  position: absolute;
  overflow: auto; }

.infoLinksBox .text {
  position: relative;
  padding-bottom: 10px;
  width: auto;
  height: auto;
  overflow: visible; }

.infoLinksBox .text .editPanel {
  top: 20px; }

.infoLinksBox .infoLinks {
  position: relative;
  margin-top: 5px;
  border-top: solid 1px #333; }

.infoButtons ul {
  padding: 0;
  list-style: none; }

.infoButtons li.miButton {
  margin: 0 0 10px;
  clear: both; }
  .infoButtons li.miButton a.miButtonLink {
    display: block;
    min-height: 3em;
    padding: .5em; }

.infoEmbed {
  position: absolute;
  overflow: auto; }

.moreInfo {
  background-attachment: fixed; }

.screenName {
  display: inline !important; }

.contentBox, .contentBox2 {
  position: relative;
  margin: 10px;
  padding: 5px 5px 8px 0;
  width: auto;
  height: auto;
  border: solid 1px #666;
  background-color: #FFF; }

.glossaryItem {
  padding-left: 18px;
  margin-top: 3px; }

.group, .screen {
  clear: left;
  padding-left: 10px;
  min-height: 22px; }

.group {
  margin-bottom: 3px;
  height: auto !important;
  height: 22px; }

.group img, .screen img {
  float: left; }

.group a, .group span, .screen a {
  float: left;
  margin: 3px 0 0 3px; }

body.contentBody {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
  margin: 0; }

body.contentBody.moreInfo {
  margin: 0;
  width: 100%; }

form#StudentView {
  height: 100%; }

form#StudentView div[align="center"] {
  margin: 0 0 0;
  height: 80%;
  overflow: hidden; }

@media all and (max-height: 699px) {
  form#StudentView div[align="center"] {
    height: 77%;
    overflow: hidden; } }

form#StudentView iframe {
  height: 100%;
  width: 100%; }

/* position */
.left {
  left: 0;
  margin: 0; }

.right {
  right: 0;
  margin: 0; }

.top {
  top: 0;
  margin: 0; }

.bottom {
  bottom: 0;
  margin: 0; }
.bottom-middle-center
{
	margin-bottom: 200px;
	text-align: center;
}
/* 1024x768 sizes */
.fullWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%; }

.fullWidth .editPanel {
  left: 340px; }

.fullWidth .caption .editPanel {
  left: 410px; }

.imageHalfWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.imageHalfWidth .editPanel {
  left: 114px; }

.imageHalfWidth .caption .editPanel {
  left: 184px; }

.moreInfo .imageHalfWidth {
  margin: 0;
  width: 100%; }

.moreInfo .imageHalfWidth .editPanel {
  left: 122px; }

.moreInfo .imageHalfWidth .caption .editPanel {
  left: 192px; }

.textHalfWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.textHalfWidth .editPanel {
  left: 106px; }

.moreInfo .textHalfWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%; }

.moreInfo .textHalfWidth .editPanel {
  left: 116px; }

.moreInfo .largeContent {
  width: 100%; }

.infoLinksBoxWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.infoLinksBoxWidth.largeContent {
  width: 35%; }

.infoLinksBoxWidth .editPanel {
  left: 90px; }

.infoEmbedWidth {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.infoEmbedWidth.largeContent {
  width: 63%; }

.fullHeight {
  height: 99%;
  margin-top: 1%; }

.halfHeight {
  height: 48%;
  margin-bottom: 1%;
  margin-top: 1%; }

.thirdHeight {
  height: 30%;
  margin-bottom: 1%;
  margin-top: 1%; }

.twothirdHeight {
  height: 63%;
  margin-bottom: 1%;
  margin-top: 1%; }

.quarterHeight {
  height: 22%;
  margin-bottom: 1%;
  margin-top: 1%; }

.threequarterHeight {
  height: 72%;
  margin-bottom: 1%;
  margin-top: 1%; }

.imageRegHeight {
  height: 60%;
  margin-bottom: 1%;
  margin-top: 1%; }

.imageLargeHeight {
  height: 68%;
  margin-bottom: 1%;
  margin-top: 1%; }

.moreInfo .imageLargeHeight {
  height: 75%;
  margin-bottom: 1%;
  margin-top: 1%; }

.textShortHeight {
  height: 28%;
  margin-bottom: 1%;
  margin-top: 1%; }

.minus1Row,
.minus1JumpRow {
  height: 81%;
  margin-bottom: 1%;
  margin-top: 1%; }

.minus2JumpRow {
  height: 68%;
  margin-bottom: 1%;
  margin-top: 1%; }

.singleJumpRow {
  height: 13%;
  margin: 1% 0 0;
  width: 100%; }

.singleJumpRow .jumpTo {
  height: 80%; }

.doubleJumpRow {
  height: 26%;
  margin: 1% 0 0;
  width: 100%; }

.doubleJumpRow .jumpTo {
  height: 30%; }

.jumpTo .editPanel {
  height: auto;
  width: 80%;
  left: 10%;
  top: -5px; }

.jumpTo div {
  height: 100%;
  width: 100%; }

.jumpPanel {
  position: absolute;
  overflow: hidden; }

.jump__btn {
  position: relative;
  display: inline;
  float: left;
  overflow: visible;
  overflow: visible;
  width: 48%;
  margin: 0 1% 2%; }

.jump__link {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 1%; }

.menuPanel {
  position: absolute;
  overflow: hidden;
  counter-reset: menu-counter; }

.menu__btn {
  display: block;
  position: relative;
  width: 100%;
  height: 15%;
  margin: 0 0 1%; }

.menu__link {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 1%; }
  .menu__link--numb {
    padding-left: 2.25em; }
    .menu__link--numb:before {
      content: counter(menu-counter) ".";
      counter-increment: menu-counter;
      display: block;
      width: 1.5em;
      float: left;
      margin-left: -2em;
      text-align: right; }
  .menu__link.jumpToVisited {}
    .menu__link.jumpToVisited:after {
      content: '✔';
      display: block;
      position: absolute;
      top: .25em;
      right: .5em;
      text-decoration: none !important; }

.jumpToDisabled a {
  cursor: default; }

.jumpToPhoto {
  display: block;
  float: left;
  margin: 0; }
  .jumpToPhoto + .jumpToPhoto {
    margin: 0 0 0 16px; }
  .jumpToPhoto--two {
    width: 320px;
    height: 320px; }
    @media all and (min-width: 940px) {
      .jumpToPhoto--two {
        width: 400px;
        height: 400px; } }
  .jumpToPhoto--three {
    width: 240px;
    height: 240px; }
    @media all and (min-width: 940px) {
      .jumpToPhoto--three {
        width: 300px;
        height: 300px; } }
  .jumpToPhoto--four {
    width: 180px;
    height: 180px; }
    @media all and (min-width: 940px) {
      .jumpToPhoto--four {
        width: 208px;
        height: 208px; } }
  .jumpToPhoto div {
    height: 100%;
    width: 100%; }
  .jumpToPhoto .jumpToLink {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    background: #ccc top center no-repeat;
    background-size: cover; }
  .jumpToPhoto .jumpToText {
    display: block;
    margin: 0; }

.narrowJump {
  width: 290px; }

.narrowJump .jumpToLink {
  width: 290px; }

.full {
  height: 100%;
  width: 100%; }

.full object,
.full embed {
  height: 99%;
  width: 100%; }

/* begin common assessment structure */
#assessment {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 99%;
  position: relative; }

#assessment.record {
  height: 80%; }

#buttonrow {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  bottom: 0;
  height: auto;
  left: 0;
  position: absolute; }

#buttonrow #instructBtn {
  float: left; }

#buttonrow #checkBtn {
  float: right; }

#buttonrow #showBtn {
  margin-left: 1%;
  float: right; }

/* background - for catching 'drag and drop' cancels */
#bg {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0; }

/* begin image layout */
.media {
  /* begin template specific layout */ }

.media.full {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  height: 98%;
  margin-bottom: 1%; }

.media.large {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  height: 80%;
  margin-bottom: 1%; }

.media.medium {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 39.66667%;
  height: 60%;
  margin-bottom: 1%; }

.msaudioimage #media1 {
  top: 60px; }

/* end image layout */
/* begin question/options layout */
#questionOptions {
  text-align: left; }

.question, .option {
  margin-bottom: 10px; }

.option a.correct,
.option a.incorrect,
.option a.disabled {
  cursor: default; }

.option p {
  margin-top: 0; }

.audioControl {
  text-align: center; }

.audioControl .audio {
  margin-left: 6px; }

.audioControl .text {
  margin: 0;
  position: relative;
  text-align: center; }

/* begin template specific layout */
/* begin template specific layout */
.multiplechoice .option a {
  background: transparent url(option-bg.png) no-repeat -334px -5px;
  color: inherit;
  display: block;
  min-height: 21px;
  padding-left: 30px;
  text-decoration: inherit; }

.multiplechoice .option a.active:hover {
  background-position: -304px -35px; }

.multiplechoice .option a.selected {
  background-position: -274px -65px; }

.multiplechoice .option a.disabled {
  background-position: -184px -155px; }

.multiplechoice .option a.correct {
  background-position: -244px -95px; }

.multiplechoice .option a.incorrect {
  background-position: -214px -125px; }

.multiplechoice .audioControl {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 39.66667%;
  clear: left;
  height: 10%;
  margin-bottom: 1%; }

.multiplechoice.mc6optionsimage #questionOptions, .multiplechoice.mc4optionsimageaudio #questionOptions {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 56.33333%;
  margin-bottom: 1%;
  height: 80%; }

.multiplechoice.mc4optionsimageaudio #questionOptions {
  float: none;
  position: absolute;
  right: 0;
  top: 0; }

.multiplechoice.mc8options #questionOptions {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%; }

.multiplechoice.mc8options .question {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%; }

.multiplechoice.mc8options .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.multiplechoice.mc4audioimage #questionOptions {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%; }

.multiplechoice.mc4audioimage .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  left: 16.66667%; }

.multiplechoice.mc4audioimage .option .button {
  margin: 0 !important; }

.multiplechoice.mc4audioimage .option > a {
  float: left; }

.mediaselect #questionOptions {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  clear: both;
  margin-bottom: 1%;
  height: 80%;
  text-align: center; }

.mediaselect .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%; }

.mediaselect .option a img {
  border: 2px solid #FFF; }

.mediaselect .option a.selected img,
.mediaselect .option a:hover img {
  border-color: #333; }

.mediaselect .option a.correct img {
  border-color: #090; }

.mediaselect .option a.incorrect img {
  border-color: #F00; }

.mediaselect .option a.disabled img {
  border-color: #FFF;
  opacity: 0.5; }

.mediaselect .audioControl {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 10%;
  margin-bottom: 1%; }

.mediaselect.ms4image .option {
  margin-top: 10%; }

.mediaselect.ms4image .option img {
  margin-bottom: 10px; }

.dragndrop {
  position: relative; }

.dragndrop #questionOptions {
  height: 0%; }

.dragndrop #questionOptions .option {
  position: absolute;
  display: none; }

.dragndrop #questionOptions .option a {
  background: transparent url(option-bg.png) no-repeat -330px -330px;
  display: block;
  height: 18px;
  margin-left: -24px;
  position: absolute;
  width: 24px;
  z-index: -100; }

.dragndrop #questionOptions .option a.correct {
  background-position: -34px -306px; }

.dragndrop #questionOptions .option a.incorrect {
  background-position: -4px -336px; }

.dragndrop #questionOptions .option .drop {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #ddd;
  height: 100%;
  width: 100%; }

.dragndrop #dragOptions {
  height: 0%; }

.dragndrop #dragOptions .button {
  display: none;
  position: absolute; }

.dragndrop #dragOptions .button a {
  display: block;
  height: 100%;
  line-height: 120%;
  padding: 0;
  vertical-align: middle; }

.dragndrop #dragOptions .button.selected a {
  background-position: left top; }

.dragndrop.dd8options #questionOptions .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%;
  height: 8%;
  left: 50%;
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 1px; }

.dragndrop.dd8options #dragOptions .button {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%;
  position: absolute;
  height: 8%;
  margin-top: 1%;
  margin-bottom: 1%; }

.dragndrop.dd5phrases5false #questionOptions .option {
  height: 8%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 100%; }

.dragndrop.dd5phrases5false #questionOptions .option a {
  margin-left: 19%; }

.dragndrop.dd5phrases5false #questionOptions .option .drop {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 18%; }

.dragndrop.dd5phrases5false #dragOptions {
  border-bottom: 1px solid #CCC;
  height: 21.5%; }

.dragndrop.dd5phrases5false #dragOptions .button {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 18%;
  height: 8%;
  margin-top: 1%;
  margin-bottom: 1%; }

.dragndrop.dd8images2false #questionOptions .option, .dragndrop.dd4images4false #questionOptions .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  height: 32%;
  margin-top: 1%;
  margin-bottom: 1%;
  text-align: center; }

.dragndrop.dd8images2false #questionOptions .option a, .dragndrop.dd4images4false #questionOptions .option a {
  margin-left: 0;
  top: 30%; }

.dragndrop.dd8images2false #questionOptions .option img, .dragndrop.dd4images4false #questionOptions .option img {
  max-height: 72%; }

.dragndrop.dd8images2false #questionOptions .option .drop, .dragndrop.dd4images4false #questionOptions .option .drop {
  height: 24%;
  margin-bottom: 3%; }

.dragndrop.dd8images2false #dragOptions, .dragndrop.dd4images4false #dragOptions {
  border-bottom: 1px solid #CCC;
  height: 21.5%; }

.dragndrop.dd8images2false #dragOptions .button, .dragndrop.dd4images4false #dragOptions .button {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 18%;
  height: 8%;
  margin-top: 1%;
  margin-bottom: 1%; }

.dragndrop.dd4images4false #dragOptions .button {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%; }

.dragndrop.dd8images2false #questionOptions .option .drop {
  margin: 0 auto 3%;
  width: 78.26086956521739%; }

.dragndrop.dd8images2false #dragOptions .button {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 18%; }

.dragndrop.dd8images2false #dragOptions .button.dragged {
  margin-left: 3.5%; }

.dragnsort #questionOptions {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 90%;
  text-align: center;
  top: 0; }

.dragnsort #questionOptions .option {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  float: left;
  height: 48%;
  margin-bottom: 2%;
  text-align: center; }

.dragnsort #questionOptions .option img {
  border: 2px solid #FFF;
  max-height: 80%; }

.dragnsort #questionOptions .option .button {
  height: 20%; }

.dragnsort #questionOptions .option .button a {
  display: block;
  height: 100%;
  line-height: 200%;
  padding: 0; }

.dragnsort #questionOptions .active img {
  border-color: #333; }

.dragnsort #questionOptions .active .button a {
  background-position: left top; }

.dragnsort #questionOptions .correct img {
  border-color: #090; }

.dragnsort #questionOptions .incorrect img {
  border-color: #F00; }

.areaselect #questionOptions,
.areaselect #media1.full {
  display: block;
  float: none;
  left: 0;
  right: 0;
  position: absolute;
  height: 76.57657657657658%;
  margin: 1% auto; }

.areaselect #media1 img {
  max-height: none;
  max-width: none; }

.areaselect .option {
  height: 24px;
  position: absolute;
  width: 26px; }

.areaselect .option a {
  background: transparent url(option-bg.png) no-repeat -152px -183px;
  height: 24px;
  position: absolute;
  width: 26px;
  overflow: visible; }

.areaselect .option a:hover {
  background-position: -122px -213px; }

.areaselect .option a.correct {
  background-position: -92px -243px; }

.areaselect .option a.incorrect {
  background-position: -62px -273px; }

.areaselect .option.disabled {
  display: none; }

.areaselect .target {
  background-color: transparent;
  position: absolute; }

.areaselect .target.show {
  border: #06C 2px solid; }

#record {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  clear: both;
  margin-bottom: 1%;
  height: 16%;
  margin-top: 1%;
  text-align: center; }

/* advanced styles */
/* general styles */
#advanced {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 99%;
  margin-top: 1%;
  position: relative; }

#advanced .pageTitle {
  float: none;
  margin: auto; }

#advanced .screen {
  display: none; }

#advanced .screen .media {
  position: relative; }

#advanced li.screen.text {
  list-style: none;
  overflow: visible;
  padding: 0;
  position: relative; }

#advanced.jumpto {
  height: 70%; }

#advanced.jumpto .screen {
  margin-top: 0; }

/* begin template specific layout */
.imagerollover .screen {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  clear: none;
  height: auto;
  margin-top: 5%;
  padding: 0;
  overflow: hidden; }

.imagerollover .screen .media {
  height: 90%;
  width: 100%; }

.imagerollover .screen img {
  float: none; }

.imagerollover .screen.screen2 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 48%; }

.imagerollover .screen.screen3 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 31.33333%; }

.imagerollover .screen.screen4 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%; }

.imagerollover .screen.screen5 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 18%; }

.imagerollover .screen.screen6 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 14.66667%; }

.imagerollover .screen.screen7 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 12.28571%; }

.imagerollover .screen.screen8 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 10.5%; }

.imagerollover .screen .panel {
  display: none; }

.imagerollover .screen .panel.top, .imagerollover .screen .panel.middle, .imagerollover .screen .panel.bottom {
  margin: 0; }

.imagerollover .screen .panel.top {
  top: 1%; }

.imagerollover .screen .panel.middle {
  top: 50%; }

.imagerollover .screen .panel.bottom {
  bottom: 1%; }

.imagerollover .screen .panel.left {
  left: 1%;
  right: auto; }

.imagerollover .screen .panel.center {
  margin-left: auto;
  margin-right: auto; }

.imagerollover .screen .panel.right {
  left: auto;
  right: 1%; }

.imagerollover.jumpto .screen {
  height: 85%; }

.targetrollover #targets,
.targetrollover #media1 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  position: absolute;
  height: 70.132132%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 20%;
  bottom: auto; }

.targetrollover #media1 img {
  max-height: none;
  max-width: none; }

.targetrollover .target {
  position: absolute;
  background-color: rgba(9, 130, 173, 0.33);
  border: 1px solid #0982AD; }

.targetrollover .panel {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  display: none; }

.targetrollover .panel .top, .targetrollover .panel.middle, .targetrollover .panel.bottom {
  margin: 0; }

.targetrollover .panel.top {
  bottom: 100%;
  margin-top: 0 !important; }

.targetrollover .panel.middle {
  top: 50%;
  transform: translate(0, -50%);
  margin-top: 0 !important; }

.targetrollover .panel.bottom {
  top: 100%;
  margin-top: 0 !important; }

.targetrollover .panel.left {
  right: 100%; }

.targetrollover .panel.center {
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  transform: translate(-50%, 0); }

.targetrollover .panel.right {
  left: 100%; }

.targetrollover .panel.middle.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.targetrollover.jumpTo #targets,
.targetrollover.jumpTo #media1 {
  height: 320px;
  width: 640px;
  left: 130px; }

.slideshow .screen {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  width: 98%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 0; }

.slideshow .screen h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

.slideshow .screen .media {
  height: 90%;
  margin: 0; }

.slideshow .screen .media img {
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  float: none; }

.slideshow .screen p.caption {
  margin: 0; }

.slideshow.jumpto .screen {
  height: 85%; }

.slideshow #controls {
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2%;
  height: 70px;
  width: 340px;
  box-shadow: 2px 2px 6px #999;
  -moz-box-shadow: 2px 2px 6px #999;
  -webkit-box-shadow: 2px 2px 6px #999;
  border-radius: 6px; }

.slideshow #controls .status {
  font: normal normal normal 24px/50px Arial, sans-serif;
  float: right;
  margin: 10px; }

.slideshow #controls .button {
  display: block;
  padding: 0;
  position: absolute;
  top: 10px;
  height: 50px;
  width: 70px; }

.slideshow #controls .button a {
  display: block;
  margin: 1px;
  padding: 0;
  height: 48px;
  width: 68px; }

.slideshow #controls .button a span {
  visibility: hidden; }

.slideshow #controls .play a {
  background-position: center 15px;
  background-position: left bottom, center 15px; }

.slideshow #controls .pause a {
  background-position: center -25px;
  background-position: left bottom, center -25px; }

.slideshow #controls .play a:hover {
  background-position: center 15px;
  background-position: left top, center 15px; }

.slideshow #controls .pause a:hover {
  background-position: center -25px;
  background-position: left top, center -25px; }

.slideshow #controls .previous a,
.slideshow #controls .next a {
  background-image: url(playpause_bg.png);
  background-image: url(assessment_button_bg.png), url(playpause_bg.png);
  background-position: center 5px;
  background-position: left bottom, center 5px;
  background-repeat: no-repeat;
  background-repeat: repeat-x, no-repeat; }

.slideshow #controls .previous a {
  background-position: center -72px;
  background-position: left bottom, center -72px; }

.slideshow #controls .next a {
  background-position: center -128px;
  background-position: left bottom, center -128px; }

.slideshow #controls .previous a:hover {
  background-position: center -72px;
  background-position: left top, center -72px; }

.slideshow #controls .next a:hover {
  background-position: center -128px;
  background-position: left top, center -128px; }

.slideshow #controls .previous {
  left: 10px; }

.slideshow #controls .pause,
.slideshow #controls .play {
  left: 90px; }

.slideshow #controls .next {
  left: 170px; }

.slideshow #controls .play,
.slideshow #controls .previous {
  display: none; }

#advanced.slideshow .screen:first-child {
  display: block; }

/*Narration play control*/
div.jp-audio {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 50px;
  filter: alpha(opacity=30);
  opacity: 0.3; }

div.jp-interface {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 100%; }

div.jp-audio div.jp-type-single div.jp-interface {
  height: 50px; }

/* @group CONTROLS */
div.jp-interface ul.jp-controls {
  list-style-type: none;
  margin: 0;
  padding: 0; }

div.jp-audio ul.jp-controls {
  width: 50px;
  padding: 0px 0px 0px 0px; }

div.jp-interface ul.jp-controls a {
  display: block;
  overflow: hidden;
  text-indent: -9999px; }

a.jp-play,
a.jp-pause {
  width: 50px;
  height: 50px; }

a.jp-play {
  background: url("playbutton.png"); }

a.jp-play:hover {
  background: url("playbutton.png"); }

a.jp-pause {
  background: url("");
  display: none; }

a.jp-pause:hover {
  background: url(""); }

div.jp-jplayer audio,
div.jp-jplayer {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 50px;
  height: 50px;
  visibility: hidden; }

#UDUTU_Narration {
	
	position: absolute;
	bottom: 0;
}
  
/* Narrator play control @end */
.accord {
  display: block;
  clear: both;
  margin-bottom: 1em;
  border: 1px solid #666; }
  .accord__title {
    display: block; }
  .accord__link {
    display: block;
    padding: .5em 2em .5em .5em;
    position: relative; }
    .accord__link:after {
      content: '+';
      display: block;
      float: right;
      margin-right: -1em; }
    .accord__link--active:after {
      content: '–'; }
  .accord__panel {
    padding: .5em;
    margin: 0; }
    .accord__panel *:first-child {
      margin-top: 0; }
    .accord__panel *:last-child {
      margin-bottom: 0; }
  .accord__panel + .accord__title {
    border-top: 1px solid #666; }