@import url('fonts/open-sans.css');
/* Less Variablen für z.B. Farben, Abmessungen */
/* Less Variablen für z.B. Farben, Abmessungen */
/*@color-standard: #004688;*/
/*@menuitem-background-color-active: #D9D9D9;*/
/* Less Variablen nur für das basiclayout.less */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  video {
    -webkit-filter: brightness(108.5%);
  }
}
video {
  width: 100% !important;
  height: auto !important;
  -webkit-position: fixed;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateY(0);
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1);
}
.LayerModule video {
  position: initial;
}
ol,
ul {
  margin: 0;
}
li {
  margin: 3px 0px 3px 0px;
  padding: 0;
}
/* old
ol, ul, li {
        margin: 0;
        padding: 0;
}
*/
.hide_element img,
.hide_element div {
  /* IE8 opacity Workaround */
  filter: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: normal;
}
body {
  background-color: #999999;
  /* background-color: #fafafa; */
  font-size: 13px;
  /*line-height: normal;*/
  line-height: 1.07;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container-fluid {
  max-width: 980px;
  min-width: 980px;
  margin: 0 auto;
}
.container {
  /*max-width: @container-width;*/
}
.no_user_select {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
.user_select {
  cursor: default;
  -webkit-touch-callout: initial;
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
  -webkit-user-drag: initial;
  -khtml-user-drag: initial;
  -moz-user-drag: initial;
  -o-user-drag: initial;
  user-drag: initial;
}
#viewport {
  position: absolute;
  right: 20px;
  left: 20px;
  top: 10px;
  bottom: 70px;
  /*overflow:hidden;*/
  z-index: 0;
}
/* container */
#distance {
  position: relative;
  width: 1px;
  /* height:50%; */
  /* margin-bottom:-333px; */
  height: 0px;
  margin-bottom: 0px;
  float: left;
}
#container {
  overflow: hidden;
  position: absolute;
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  max-width: 980px;
  width: 980px;
  height: 645px;
  clear: left;
  background-color: #fff;
  z-index: 1;
  /* Safari/Chrome bug, layers on lower end of stage vanish, if scale has special values, that's why overflow:hidden is not possible with safari-browser */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
/** 
 *	header
 */
#header {
  position: relative;
  width: 980px;
  height: 70px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  /* background:#ddd no-repeat center top; */
  background: #ffffff url(../img/header.jpg) no-repeat center top;
  background-size: 100% auto;
}
#header #modulheadline,
#header #modulsubheadline {
  position: absolute;
  left: 20px;
  /* width:700px;*/
}
#header #modulheadline {
  top: 18px;
}
#header #modulsubheadline {
  top: 20px;
}
/**
 *	content and contentData
 *	contentData as container to load the charts into
 */
#content {
  position: relative;
  top: 0px;
  left: 0px;
  /* overflow:hidden; */
  height: 575px;
  width: 940px;
}
#contentDataHolder,
#contentData,
#contentLayer {
  position: relative;
  top: 0px;
  left: 0px;
  /* overflow:hidden; */
  height: inherit;
  width: inherit;
}
#contentData {
  position: absolute;
  z-index: 5;
}
#contentLayer {
  position: absolute;
  z-index: 5;
}
#iPadPush2StartLayer {
  background: url("../img/trans1x1.gif") repeat scroll 0% 0% transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 999;
  display: none;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#canvasStage {
  float: left;
  z-index: 5;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
#canvasSyncVideo {
  float: left;
  z-index: 5;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
/**
 *	player with navigation
 */
#subtitlearea {
  display: none;
  position: absolute;
  top: 645px;
  left: 20px;
  right: 20px;
  min-height: 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  text-align: left;
  color: #ffffff;
  z-index: 2;
  padding: 5px;
  background-color: #555555;
  border: solid 2px #eeeeee;
  border-radius: 5px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
/**
 *	player with navigation
 */
#playercontainer {
  background: url("../img/trans1x1.gif") repeat scroll 0% 0% transparent;
  z-index: 99;
  position: absolute;
  bottom: 0px;
  left: 20px;
  right: 20px;
  height: 80px;
  /* border:1px solid black; */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
#playerarea {
  display: none;
  background: url("../img/trans1x1.gif") repeat scroll 0% 0% transparent;
  z-index: 110;
  position: absolute;
  bottom: 0px;
  left: 20px;
  /*right:20px;*/
  height: 66px;
  /*width: @container-width - 65 - 500;*/
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
#playeronly {
  position: absolute;
  top: 0px;
  left: 0px;
}
#playerarea #player {
  position: relative;
  top: 16px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
#blocker {
  z-index: 99;
  position: absolute;
  top: -10px;
  height: 76px;
  width: 100%;
  cursor: pointer;
}
/**
 *  progressslider
 */
#playerarea #progressslider {
  position: relative;
  top: 0px;
  float: left;
}
#playerarea #progressslider #btn_playerhandle {
  position: absolute;
  display: none;
  top: -30px;
  left: 198px;
  width: 50px;
  height: 40px;
  background: transparent url(../img/btn_handle.png) no-repeat left top;
  background-color: #222222;
}
#playerarea #progressslider #thumbline {
  position: absolute;
  top: 0px;
  /* right:10px; */
  width: 400px;
  height: 0px;
}
#playerarea #progressslider #thumbline #thumb {
  z-index: 6;
  cursor: pointer;
  position: absolute;
  top: 5px;
  left: 0px;
  width: 16px;
  height: 16px;
  background-image: url("../img/btn_thumb.png");
  /* background-image: url("../img/btn_thumb_big.png");*/
  margin-left: -8px;
}
#playerarea #progressslider #progress {
  position: absolute;
  top: 10px;
  height: 6px;
  width: 400px;
  background-color: #555555;
}
#playerarea #progressslider #progress #progressline {
  height: 6px;
  width: 0px;
  color: #000;
}
/*
#player:hover {
        opacity:1;
}
*/
#player ul {
  list-style: none;
}
#player ul li {
  margin: 0;
  width: 50px;
  height: 50px;
  float: left;
  background-color: #222222;
}
#player ul li a {
  display: block;
  width: 50px;
  height: 50px;
  margin-right: 2px;
}
#player ul li a.active {
  background-color: #111111;
}
#player ul li.display {
  font-size: 12px;
  font-weight: bold;
  color: #dddddd;
  text-align: center;
}
#player ul li.display div.display_time {
  padding-top: 9px;
}
.tooltipp {
  position: absolute;
  z-index: 20;
  background-color: #11aff1;
  /* hier gibts was zu aendern */
  color: #eeeeee;
  padding: 2px 6px;
  display: none;
  font-size: 11px;
  /* rundungsprobleme zwischen Chrome und Firefix */
  line-height: 1.07;
}
/**
 *  Player Buttons
 */
.playerbtn:hover {
  background-color: #111111 !important;
}
#btn_menu {
  background: transparent url(../img/btn_menu.png) no-repeat left top;
}
#btn_back {
  background: transparent url(../img/btn_back.png) no-repeat left top;
}
#btn_forward.btn_normal {
  background: transparent url(../img/btn_forward.png) no-repeat left top;
}
#btn_forward.btn_active {
  background: url(../img/btn_forward_ani.gif) no-repeat left top;
}
#btn_playstop.btn_play {
  background: transparent url(../img/btn_play.png) no-repeat left top;
}
#btn_playstop.btn_play_active {
  background: url(../img/btn_play_ani.gif) no-repeat left top;
}
#btn_playstop.btn_stop {
  background: transparent url(../img/btn_stop.png) no-repeat left top;
}
#btn_audiotext {
  background: transparent url(../img/btn_audiotext.png) no-repeat left top;
}
#btn_print {
  background: transparent url(../img/btn_print.png) no-repeat left top;
}
#btn_imprint {
  background: transparent url(../img/btn_imprint.png) no-repeat left top;
}
#btn_glossary {
  background: transparent url(../img/btn_glossary.png) no-repeat left top;
}
#btn_abbreviation {
  background: transparent url(../img/btn_abbreviation.png) no-repeat left top;
}
#btn_subtitle {
  background: transparent url(../img/btn_subtitle.png) no-repeat left top;
}
#btn_search {
  background: transparent url(../img/btn_search.png) no-repeat left top;
}
#btn_sitemap {
  background: transparent url(../img/btn_sitemap.png) no-repeat left top;
}
#btn_help {
  background: transparent url(../img/btn_help.png) no-repeat left top;
}
#btn_notes {
  background: transparent url(../img/btn_notes.png) no-repeat left top;
}
#btn_bookmarks {
  background: transparent url(../img/btn_bookmarks.png) no-repeat left top;
}
/**
 *	fonts 
 */
body {
  font-family: 'Open Sans', X-LocaleSpecific, sans-serif;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#header h1 {
  font-size: 20px;
  line-height: 20px;
  color: #8a8a8a;
  /* text-shadow:#000 2px 2px 2px; */
}
#header h2 {
  font-size: 14px;
  line-height: 14px;
  color: #007a43;
  /* text-shadow:#000 2px 2px 2px; */
}
#header h1 {
  /* font-weight:bold; */
}
/**
 *	menu
 */
#menu {
  position: absolute;
  left: 10px;
  top: 120px;
  width: auto;
  /*min-width:@menu-width;*/
  min-width: 200px;
  height: auto;
  z-index: 100;
  display: none;
}
#menuhead {
  padding: 0;
  position: relative;
  left: 5px;
  width: 380px;
  height: 20px;
  /* background-color:rgba(0, 0, 0, .95); */
  background-color: #666666;
  color: #000;
}
#menuhead h3 {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  padding: 0px 0 0 10px;
  line-height: 20px;
}
#menubody {
  position: relative;
  width: auto;
  height: auto;
  left: 4px;
  padding: 0 0 0 0;
  max-height: 470px;
  overflow-y: auto;
  overflow-x: hidden;
}
#menubody ul {
  padding: 0;
}
#menubody ul li a {
  display: block;
  width: auto;
  font-size: 12px;
  line-height: 2;
  color: #000;
  text-decoration: none;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: solid 1px #aaa;
}
#menubody ul li a.menumainitem {
  /*font-weight:bold;*/
  background-color: #dddddd;
}
#menubody ul li a.menusubitem {
  background-color: #eeeeee;
}
#menubody ul li a.menumainitem_active {
  background-color: #ffffff;
  font-weight: bold;
}
#menubody ul li a.menusubitem_active {
  /*color:@text-color-standard;*/
  background-color: #ffffff;
}
#menubody ul.submenu {
  display: none;
}
#menubody ul {
  list-style: none;
}
ul.mainmenu li {
  padding: 0;
  margin: 0 !important;
  white-space: nowrap;
}
/**
 * search overlay
 */
ul#fwpSearchResults {
  list-style: none;
}
ul#fwpSearchResults li {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0em !important;
}
ul#fwpSearchResults li:before {
  content: none !important;
}
ul#fwpSearchResults li a {
  display: block;
  width: auto;
  line-height: 2;
  color: #000;
  text-decoration: none;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: solid 1px #aaa;
}
/**
 * overlay for audiotext, imprint and the excursions
 */
#audiotextoverlay,
#textoverlay {
  position: absolute;
  z-index: 100;
  height: unset !important;
}
#excursionoverlay {
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 999;
}
#audiotextoverlay,
#textoverlay,
#excursionoverlay {
  /*background-color:rgba(255, 255, 255, .95);*/
  background-color: #fff;
  /* Commerzbank Farbe @color-standard */
  display: none;
  border: 1px solid #666666;
  max-width: 100%;
}
.textoverlayhead,
.excursionoverlayhead {
  background-color: #666666;
  color: #ffffff;
}
.textoverlayhead h3,
.excursionoverlayhead h3 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  padding: 0px 10px 0 10px;
  line-height: 30px;
  margin: 0px;
}
.textoverlaycontent,
.excursionoverlaycontent {
  overflow: hidden;
  /* background-color:#f2f2f2; */
}
.textoverlaybody,
.excursionoverlaybody {
  /*background-color:#f2f2f2; */
  padding: 0px 10px 0px 10px;
  overflow: auto;
}
#textoverlayhead {
  position: relative;
  left: 5px;
  width: 455px;
  height: 30px;
}
#excursionoverlayhead {
  position: relative;
  width: 938px;
  height: 30px;
}
#textoverlayhead,
#excursionoverlayhead {
  background-color: #000;
  color: #fff;
}
#textoverlayhead h3,
#excursionoverlayhead h3 {
  font-weight: bold;
  color: #fff;
  padding: 0 0 0 14px;
  line-height: 30px;
  margin: 0;
}
#textoverlaybody {
  position: relative;
  width: 462px;
  height: 222px;
  /* top:30px;*/
  left: 4px;
  background-color: #f2f2f2;
}
#excursionoverlaybody {
  position: relative;
  width: 930px;
  height: 480px;
  /* top:30px; */
  left: 4px;
  background-color: #f2f2f2;
}
#textoverlaytext {
  position: absolute;
  left: 10px;
  top: 4px;
  width: 400px;
  height: 205px;
  font-size: 12px;
}
#excursionoverlaytext {
  position: absolute;
  left: 10px;
  top: 4px;
  width: 860px;
  /*    height:414px; */
  font-size: 12px;
}
#excursionoverlay .contenttoscroll {
  width: 860px;
  height: auto;
  background-color: #f2f2f2;
  padding-top: 12px;
}
#excursionoverlay #scrollbar {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 30px;
  height: 425px;
  background-color: #f2f2f2;
}
#textoverlay .contenttoscroll,
#excursionoverlay .contenttoscroll {
  background-color: #f2f2f2;
  padding-top: 12px;
  height: auto;
}
#textoverlay #scrollbar,
#excursionoverlay #scrollbar {
  background-color: #f2f2f2;
}
#excursionoverlay #scrollbar #scrollbtn {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 80px;
  background-color: #d8d8d8;
  cursor: move;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#textoverlay .contenttoscroll {
  width: 380px;
  height: auto;
}
#textoverlay #scrollbar {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 30px;
  height: 205px;
  background-color: #f2f2f2;
}
#scrollbtn {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 80px;
  background-color: #d8d8d8;
  cursor: move;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/* alt
#closebtn {
    position:absolute;
    right:15px;
    top:16px;
    width:15px;
    height:14px;
    background:transparent url(../img/btn_close.png) no-repeat left top;
    cursor:pointer;
        z-index:100;
}
*/
#closebtn {
  float: right;
  cursor: pointer;
  z-index: 100;
}
#textoverlay ul,
#excursionoverlay ul {
  /*
    list-style-type:square;
    */
}
#textoverlay ul li,
#excursionoverlay ul.type_blank_line li {
  /*
    padding: 0 0 12px 10px;
    text-indent: -0.6em;
    */
}
#textoverlay ul li:before,
#excursionoverlay ul.type_blank_line li:before {
  /*content:"- ";*/
}
/* when scorm is activated */
#scormcontinuescreen {
  width: 300px;
  margin: 40px auto;
  padding-left: 36px;
}
#bgScormcontinuescreen {
  display: none;
  position: fixed;
  _position: absolute;
  /* hack for internet explorer 6*/
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 999;
}
/* Excursionsareale werden mit dem Pointer-Cursor versehen */
.div_excursion {
  cursor: pointer;
}
/* OET Standard CSS Properties */
/* angepasst an stageeditor.css line-height */
.imgcontent {
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
  height: inherit;
  width: inherit;
}
.btncontent {
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
  height: inherit;
  width: inherit;
}
.acccontent {
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
  height: inherit;
  width: inherit;
}
.LayerModule,
.AccModule,
.lay2 .content,
.layer .content,
.oet_btn .content,
.oet_acc .acccontent {
  /* rundungsprobleme zwischen Chrome und Firefix */
  line-height: 1.07;
}
.lay2 .content,
.layer .content,
.oet_acc .acccontent {
  height: inherit;
}
/* Safari: z-index auf important setzen */
.popover {
  z-index: 1010 !important;
}
/* Chrome: Layers over video, images (animated) won't be visible at special scales */
.VideoModule,
.ImageModule,
.LayerModule,
.ButtonModule,
.oet_subtitle {
  /* -webkit-transform: translateZ(0); */
  -webkit-backface-visibility: hidden;
  /* -moz-backface-visibility: hidden; */
  /* -webkit-transform: translate3d(0, 0, 0); */
  /* -moz-transform: translate3d(0, 0, 0); */
}
/* Chrome: Overlays over Image are not visible at special scales */
.excursionbacklinkarea {
  -webkit-backface-visibility: hidden;
  /*-webkit-transform: translateZ(0);*/
}
/* Safari: Layers over video, images (animated) won't be visible at special scales */
/*.VideoModule, .ImageModule {*/
.VideoModule {
  position: fixed;
}
/* MS IE11 position must be static again, Safari hack destroys layout */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .VideoModule {
    position: static !important;
  }
}
@media screen and (-ms-high-contrast-adjust: auto), (-ms-high-contrast-adjust: none) {
  .VideoModule {
    position: static !important;
  }
}
/* Untertitel */
.oet_subtitle {
  left: -20px;
  right: 0px;
  height: auto;
  bottom: 0px;
  text-align: center;
  z-index: 1 !important;
}
.oet_subtitle.onstage {
  z-index: 999 !important;
}
.oet_subtitle > .content {
  width: 100%;
  padding: 5px 10px;
  font-size: 28px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: 0px solid #bbb;
  display: inline-block;
  /* rundungsprobleme zwischen Chrome und Firefix */
  line-height: 1.07;
  vertical-align: bottom;
}
.oet_subtitle > .content span {
  vertical-align: middle;
}
/* no line break in select2 list results */
.select2-results li {
  white-space: nowrap;
}
/* FWP Overlays / CKE Templates Styles Standard */
.global_overlay_wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
.global_overlay_wrapper .exercise_errormsg_header {
  position: relative;
}
.global_overlay_wrapper .exercise_errormsg_text {
  position: relative;
  top: 0px;
}
.gow_noboxshadow {
  box-shadow: none !important;
  border: 1px solid #666666 !important;
}
.gow_border2px {
  border: 2px solid #666666 !important;
}
.gow_border5px {
  border: 5px solid #666666 !important;
}
.global_overlay_header {
  position: absolute;
  top: 0px;
  height: 30px;
  left: 0px;
  right: 0px;
  line-height: 20px;
  padding-left: 15px;
  padding-top: 10px;
  background-color: #666666;
  color: #fff;
  font-size: 22px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.global_overlay_header #closebtn {
  margin-right: 15px;
  font-size: 20px;
  transform: scale3d(1.4, 1.1, 1);
  position: unset;
  top: unset;
  right: unset;
}
.global_overlay_body {
  position: absolute;
  top: 39px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  padding-left: 15px;
  padding-top: 10px;
  background-color: #fff;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.menu_overlay_header {
  position: relative;
  top: 0px;
  height: 24px;
  left: 0px;
  right: 0px;
  line-height: 16px;
  padding-left: 10px;
  padding-top: 10px;
  background-color: #666666;
  color: #fff;
  font-size: 19px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.menu_overlay_header #closebtn {
  margin-right: 15px;
  font-size: 17px;
  transform: scale3d(1.4, 1.1, 1);
}
.menu_overlay_body {
  position: relative;
  top: 0px;
  left: 0px;
  height: auto;
  right: unset;
  overflow: hidden;
  padding-left: 0px;
  padding-top: 4px;
  padding-bottom: 0px;
  padding-right: 4px;
  margin-right: 4px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.indi2_overlay_body {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
