body {
  width: 1000px;
  height: 700px;
  margin: 0;
  font-family: 'fonts/mheelemsans', Arial, Helvetica, "Lucida Grande", sans-serif;
  font-size: 20px;
}

#image-container {
  position: absolute;
  left: 86px;
  top: 62px;
  width: 658px;
  height: 235px;
  overflow:hidden;
  border: none;
}

#lab-model {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 1000px;
  height: 600px;
  overflow:hidden;
  z-index: 1; /* needs to be bigger than iframe's z-index */
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 700px;
  width: 1000px;
  z-index: 100;
}

.modal-popup {
  position: absolute;
  top: 80px;
  left: 22px;
  width: 550px;
  background-color: rgba(98,202,239,0.9);
  padding: 30px;
  border-radius: 50px;
  border: solid 5px rgb(98,202,239);
  box-shadow: 0 0 50px #fff;
  font-size: 1.1em;
}

.button {
  z-index: 4;
  font: bold 20px Arial,sans-serif;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  outline: none;
  cursor: pointer;
  padding: 0.4em 2em 0.5em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  border: 1px solid;
  border-color: #bbbbbb #a2a2a2 #888888;
  background-color: #eee;
  background-image: -moz-linear-gradient(#eeeeee, #d4d4d4);
  background-image: -webkit-linear-gradient(#eeeeee, #d4d4d4);
  background-image: linear-gradient(#eeeeee, #d4d4d4);
  -moz-transition: all 100ms;
  -o-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;
}
.button:hover {
}
.button:active {
  padding: 0.4em 2em 0.4em;
  margin-top: 0.1em;
  border-color: #a2a2a2 #bbbbbb #eee;
  background-image: -moz-linear-gradient(#e1e1e1, #eeeeee);
  background-image: -webkit-linear-gradient(#e1e1e1, #eeeeee);
  background-image: linear-gradient(#e1e1e1, #eeeeee);
  -moz-transition: all 10ms;
  -o-transition: all 10ms;
  -webkit-transition: all 10ms;
  transition: all 10ms;
}

.brand-text {
  position: absolute;
  right: 55px;
  bottom: 2px;
  font-size: 10px;
  font-family: 'fonts/mheelemsans';
  color: #0093b0;
  text-decoration: none;
}

.brand-text span {
  font-weight: bold;
}

.brand-text a {
  color: #0093b0;
  text-decoration: none;
  font-weight: bold;
}

.brand-text a:link
.brand-text a:visited
.brand-text a:hover
.brand-text a:active {
  text-decoration: none;
}



/* accessibility */

.audioButton {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #0485a5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABJElEQVRIie2VW5HDMAxFNUvAyyBlYAiGEgiFYAiFYAiFkGUQCFkGgXD2Y9WO6rht0rj98p3JjOXXkWVZEWlqahIRoANG/jV8ChqAGTgBTuGdGY9AD7ia0KNCe9NHwbFJv7AX6ICkm/lsDDMnmHbUaPjSniVIBwwsNZTCZ8BeozGasajOPg+7ejvlzjyYj2k74Awk0zcC8Sk432zrXIXPJuwBmN8O1r6YnXqRG19rARv1IyIHY/+KyPcnwK+pQqgTcLJz1mb2nuTq7PvVKjaVV5cXWo33PM6eU9BE6tV21l4Fz+yo8EUVMgUk6jM6mrGbN/2SzMb3Sqa/OKxRS48itRXe5/DCHV8cTFWgGRxzjznYl66kFvz6Q1iVsZXh7m0na2raoz/MUOZkJS4ATgAAAABJRU5ErkJggg==");
  right: 30px;
  top: 15px;
  cursor: pointer;
  border-radius: 5px;
}

.audioPause{
  background: #0485a5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAt0lEQVRIie3VUQ2DMBDG8WYGKgEJlYAUJEzCJEzCpFRCJSABCf897EiaW1PI0nYP3Pd2cMmvBO5wzmKxOOeACUh8EkehM7ABT8ALPvVG74Iu2TV6gh54ASsQ1L02sLy/yHci4Av9qHqu1TXYA6s+TKVfw9X6CD/d/Ct8O32axjH4gvA+OmqGU2mGm0fPLfAQPBR6+63MDN+6rcwDfNH4EDjD2f9Qw2DBgjx50nt9BO5LH5vF8ve8ATr1+en3dfnZAAAAAElFTkSuQmCC");
}
.audioButton:focus{
	background-color: #05AFDA;
}
.audioButton:hover{
	background-color: #05AFDA;
}
.button:focus{
	outline:1px solid #4f91fe;
}
[tabindex]:not([tabindex="-1"]):focus{
  outline: 1px solid #498bf9 !important;
 outline-offset: -1px;
outline: -webkit-focus-ring-color auto 5px !important;
}
.popUpText{
  display: inline-block;
}