body {
    background: #f0f0f0 none no-repeat;
    background-size: cover;
    color: #151515;
    font-family: Arial, "Arial Unicode MS", Arimo, sans-serif;
    font-size: 16px;
}

.wbt-size {
    width: 1024px;
    height: 672px;
}

button {
    background-color: white;
    border: none;
    padding: 0.4em 1.5em 0.5em 1.5em;
    margin: 0 0.2em;
    min-width: 4em;
    cursor: pointer;
    font-size: 1em;
}

/* button:disabled */
button[disabled],
button[disabled="disabled"] {
    opacity: 0.5;
    cursor: default;
}

button.checked {
    background-color: #151515;
    color: white;
}

button:focus {
    outline: none;
}


/* appstyles*/

#wbt-frame {
    background-color: White;
}

#wbt-appstart {
    width: 20em;
    height: 12em;
    border: 6px solid #005b99;
    background-color: white;
}

#wbt-appstart .inner {
    text-align: center;
    padding: 1em;
}

#wbt-appstart button {
    background-color: #005b99;
    color: white;
}

#wbt-header {
    overflow: hidden;
    background-color: white;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-position: 20px 25px;
    height: 131px;
    border: 1px solid #d3d3d3;
}

#wbt-header .inner {
    margin: 95px 0 0 0;
    white-space: nowrap;
}

#wbt-header .inner .menu {
    background-color: #f3f3f3;
    height: 36px;
}

#wbt-header .inner .menu .menuItem {
    min-width: 0;
    display: inline-block;
    padding: 0 16px;
    margin: 0;
    line-height: 36px;
    background-color: transparent;
    color: #707070;
    border-right: 4px solid white;
    cursor: default;
}

#wbt-header .inner .menu .menuItem:first-child {
    padding-left: 26px;
}

#wbt-header .inner .menu .menuItem.active {
    background-color: #acacac;
    color: white;
    cursor: pointer;
}

#wbt-options-top button {
    min-width: 7em;
}

#wbt-options-top {
    background-color: DeepSkyBlue;
    height: 56px;
}

#wbt-options-top .inner {
    text-align: left;
    padding: 1em 2em;
}

#wbt-content {
    background-color: White;
    width: 1022px;
    border-width: 1px 1px 0 1px;
    border-color: #d3d3d3;
    border-style: solid;
    height: 610px;
    overflow: hidden;
    background:#EBEBEB;
}

#wbt-content iframe {
    border: none; /* don't forget to set the html attribute frameBorder="0" for old IEs */
    width: 1024px;
    height: 610px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#wbt-progress {
    height: 8px;
    overflow: hidden;
    border-width: 0 1px;
    border-color: #d3d3d3;
    border-style: solid;
}

#wbt-progress .bar {
    height:100%;
    width: 100%;

    display:block;
    background-color: #cacaca;
}

#wbt-progress .bar div {
    height: 100%;
    background-color: #005b99;
}

#wbt-options-bottom {
    background: silver url(navi_elem6.png);
    width: 1022px;
    height: 53px;
    border-width: 0 1px 1px 1px;
    border-color: #d3d3d3;
    border-style: solid;
}

#wbt-options-bottom .inner {
    padding: 0;
    margin: 0;
    height: 53px;
    color: #777777;
}

#wbt-options-bottom .left {
    float: left;
    width: 690px;
    height: 53px;
    /*outline: solid 1px lime;outline-offset:-1px;*/
}


#wbt-options-bottom .right {
    float: right;
    overflow:hidden;
    height: 53px;
    text-align: right;
    /*outline: solid 1px red;outline-offset:-1px;*/
}

#wbt-options-bottom button {
    min-width: 0;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    width: 53px;
    height: 53px;
    background-color: transparent;
    color: #a7a7a7;
    font-weight: bold;
}

#wbt-options-bottom .btndelim {
    display: inline-block;
    vertical-align: top;
    width: 2px;
    height: 53px;
    background: transparent url("navi_elem1.png") no-repeat center 0;
}


#wbt-options-bottom button.home {
    background: transparent url(btn_home.png) center center no-repeat;
}

#wbt-options-bottom button.exit {
    background: transparent url("btn_close_inactive.png") center center no-repeat;
}

#wbt-options-bottom button.exit.checked {
    background: transparent url("btn_close_active.png") center center no-repeat;
}

#wbt-options-bottom button.help {
    background: transparent url("btn_hilfe_inactive.png") center center no-repeat;
}

#wbt-options-bottom button.help.checked {
    background: transparent url("btn_hilfe_active.png") center center no-repeat;
}

#wbt-options-bottom button.freeze {
    background: transparent url("btn_pause_inactive.png") center center no-repeat;
}

#wbt-options-bottom button.freeze.checked {
    background: transparent url("btn_pause_active.png") center center no-repeat;
}

#wbt-options-bottom button.audio {
    background: transparent url("btn_audio_active.png") center center no-repeat;
}

#wbt-options-bottom button.audio.checked {
    background: transparent url("btn_audio_inactive.png") center center no-repeat;
}

#wbt-options-bottom button.reload {
    background: transparent url("btn_wiederholen_inactive.png") center center no-repeat;
}



#wbt-options-bottom button.audio.mobile,
#wbt-options-bottom .btndelim.mobile {
    display:none;
}

#wbt-options-bottom button.prev {
    background: transparent url("btn_back_inactive.png") center center no-repeat;
}

#wbt-options-bottom button.next.end {
    background: transparent url("btn_weiter_active.png") center center no-repeat;
}

#wbt-options-bottom button.next.force-end {
    background: transparent url("btn_weiter_active.png") center center no-repeat;
}

#wbt-options-bottom button.next {
    background: transparent url("btn_weiter_inactive.png") center center no-repeat;
}

#wbt-options-bottom .left .breadcrumb {
    display: inline-block;
    vertical-align: top;
    width: 620px;
    overflow: hidden;
    text-align: left;
    margin-left: 10px;
    /*outline: solid 1px red;outline-offset:-1px;*/
}

#wbt-options-bottom .left .delim {
    display: inline-block;
    vertical-align:top;
    width: 16px;
    height: 53px;
    background:transparent url(navi_elem2.png) no-repeat;
}

#wbt-options-bottom .left .delim.page-before{
    background:transparent url(navi_elem3.png) no-repeat;
}
#wbt-options-bottom .left .delim.page-after{
    background:transparent url(navi_elem5.png) no-repeat;
}


#wbt-options-bottom .left .breadcrumb .crumb {
    white-space: nowrap;
    display: inline-block;
    vertical-align:top;
    height:100%;
    padding:18px 5px 0 5px;
    cursor:pointer;
}

#wbt-options-bottom .left .breadcrumb .btndelim {
    margin-right:10px;
}

#wbt-options-bottom .left .breadcrumb .page-title {
    margin:0 -1px; /*chrome shows otherwise lines bewteen segemts */
    background:silver url(navi_elem4.png);
    color:white;
    cursor:default;
}

#wbt-subtitle {
    cursor:default;
    position: absolute;
    display: block;
    top: 1px;
    left: 701px;
    margin: 0;
    padding: 0;
    background:#EBEBEB;
    width: 322px;
    height: 610px;
}

#wbt-subtitle .inner{ 
    position: relative;
    top: 0;
    left: 0;
    width: 322px;
    height: 610px;
    overflow: auto;
}

#wbt-subtitle .inner .mCSB_scrollTools_vertical .mCSB_draggerContainer {
    top: 1em;
    bottom: 1em;
}

#wbt-subtitle .inner .text {
    padding: 30px 25px;
}


#wbt-subtitle .inner .text h1 {
    font-size:20px;
}

#wbt-subtitle .inner .text p {
    font-size:16px;
    line-height:140%;
}

#wbt-menus {
    display: none;
    position: absolute;
    top: 132px;
    left: 1px;
    width: 1022px;
    height: 481px;
}

#wbt-menus > .mask {
    width: 100%;
    height: 100%;
    background-color: Black;
    opacity: 0;
}

#wbt-menus > .menu {
    visibility: hidden;
    overflow: hidden;
    width: 100%;
    height: 0%;
    background-color: #f3f3f3;
    position: absolute; top:0; left: 0;
    transition: visibility 1s,height 1s;
}

#wbt-menus > .menu.open {
    visibility: visible;
    height: 100%;
    z-index: 1;
}

#wbt-menus .menu > button.closer {
    min-width: 0;
    position: absolute;
    top: 2em;
    right: 2em;
    border: 0;
    margin: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    background: transparent url(close_menu.png) 0 0 no-repeat;
}


#wbt-menus > .menu > .content {
    height: 100%;
    display: block;
    width: auto;
    background-color: #acacac;
}

#wbt-glossary .left {
    width: 235px;
    height: 444px;
    border-right: 1px solid;
    float: left;
    overflow: hidden;
}

#wbt-glossary.left .filter {
    margin-left: 20px;
}

#wbt-glossary .left .list {
    padding-top: 20px;
}

#wbt-glossary .left .list .item {
    line-height: 24px;
    padding-left: 20px;
    cursor: default;
}

#wbt-glossary .right {
    width: 640px;
    height: 444px;
    padding-left: 20px;
    overflow: hidden;
}

#wbt-menus .alert {
    visibility: hidden;
    overflow: hidden;
    width: 30em;
    height: 0;
    border: 6px solid #005b99;
    transition: visibility 0.5s,height .5s;
}

#wbt-menus .alert.open {
    height: 8em;
    visibility: visible;
}

#wbt-menus .alert .content {
    height: 8em;
    padding: 1em;
    background-color: white;
    text-align: center;
}

#wbt-menus .alert button {
    background-color: #005b99;
    color: white;
}