body {
    
    font-family: calibri, verdana, arial, helvetica;
    font-size: 15px;
    margin: 10px;
    margin-top:30px;
}

.top_menu {
    position:relative;
    display:inline-block;
    padding: 2px 10px;
    border-right: solid 1px orange;
    box-sizing: border-box;
}

.top_menu a {
    cursor: pointer;
}

.top_menu .sub_menu {
    display: none;
}

.top_menu:hover .sub_menu {
    display: block;
}
.sub_menu {
    position:absolute;
    left:-8px;
    top:20px;
}

.sub_menu .menu_item {
    padding: 2px 10px;
    border-top: solid 1px orange;
    border-bottom: solid 1px orange;
    background-color: lightyellow;
    white-space: nowrap;
}
.sub_menu .menu_item a {
   text-decoration: none;
   color: black;
}

.sub_menu .menu_item:hover {
    cursor: pointer;
    color: white;
    background-color: orange;
}

.sub_menu .menu_item:hover a {
   text-decoration: none;
   color: white;
}


.staticCell td, .staticCell th {
    display: table-cell;
}

.otherCell td, .otherCell th {
    display: none;
}

.popupTitle {
    background-color:orange; padding-right:5px; cursor: move;
}

.popupContent {
    padding:5px;
}

.closeBtn {
    background-color: red; color: white; font-weight: bold; cursor: pointer;
}
.preview {
    position:absolute; top:0px; left:0px; z-index:20; width:120px; height:120px;
}

.ex {
    width:135px; border:solid 1px orange; margin:2px; padding: 0px 5px; box-sizing:border-box; 
}
.A1  img {
    position:absolute; top:0px; left:0px;
}

.A2  img {
    position:absolute; bottom:0px; left:0px;
}

.B1  img {
    position:absolute; top:0px; right:0px;
}

.B2  img {
    position:absolute; bottom:0px; right:0px;
}


.cell div div{
    
    position:absolute; 
    z-index:30; width:60px; height:60px; border: solid 1px rgb(235,235,235);
    
}
.A1 .cell div{
    top:0px; left:0px; 
}
.A2 .cell div{
    top:60px; left:0px; 
}
.B1 .cell div{
    top:0px; left:60px; 
}
.B2 .cell div{
    top:60px; left:60px; 
}
.xplTree {
    padding-left:20px;
    cursor: pointer;
}

.addText {
    color:  rgb(0,128,255);
    font-weight: normal;
    font-size: 8px;
    z-index: 50;
    position: relative;
    top: 0px;
    width: 55px;
    text-align: right;
    
}


.tab {
    background-color: rgb(220,220,220);
    display:inline;
    padding: 2px 10px;
    margin-right: 1px;
    cursor: pointer;
}

.tabHigh {
    background-color: orange;
    color: rgb(255,255,255);
    display:inline;
    padding: 2px 10px;
    margin-right: 1px;
    border-top: solid 2px orange;
    font-weight: bold;
    cursor: pointer;
}

.boxContent {
    background-color: rgb(255,255,255);
    padding: 2px 10px;
}

.boxItem {
    border: solid 1px orange;
    border-top: solid 2px orange;
    position: absolute; right: 10px; left:10px;
    z-index: 10;
    
}

.th {
    background-color: rgb(220,220,220);
    padding: 2px 10px;
    text-align: center;
    border: solid 1px white;
    white-space: nowrap;
}

.ImgPreview {
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.closeButton {
    background-color: red;
    cursor: pointer;
    border: solid 1px white;
    color: white;
    font-weight: bold;
    padding: 2px;
}

.half {
    width:130px;
}


.exercise {
    border:solid 1px orange;
    /*height:140px;*/
    width:140px;
    text-align: left;
    padding: 1px;
    font-weight:bold;
}

.exLabel {
    border-bottom:solid 1px white;
    /* border-top:solid 1px white; */
    text-align: left;
    background-color: rgb(220,220,220);
    width:136px;
    height: 20px;
}

.button {
    background-color: orange;
    font-weight: bold;
    padding: 2px 5px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

.moveLeft {
    
    float: left;
    

}

.moveRight {
    float: right;
    
}

#bg {
    min-height: 100%;        /*  Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen  */
    min-width: 1024px;
    width: 100%;             /*  Die Regeln, welche für die Skalierung sorgen  */
    height: auto;
    position: fixed;         /*  Die Positionierung  */
    top: 0;
    left: 0;
    z-index: -100;
}

#footer {
    position: fixed; right: 0px; left:0px;
    bottom: 0px; height:20px;
    background-color: rgb(192,96,0);
    color: white;
    padding: 2px 10px;
}

#top {
    position: absolute; right: 0px; left:0px;
    top: 0px; height:20px;
    background-color: rgb(192,96,0);
    color: white;
    padding: 2px 10px;
}

#middle {
    position: absolute; right: 0px; left:0px;
    top: 30px; bottom:30px;
    overflow: auto;
}

#footer {
    position: absolute; right: 0px; left:0px;
    bottom: 0px; height:20px;
    background-color: rgb(192,96,0);
    color: white;
    padding: 2px 10px;
}



.help {
    border: solid orange 1px;
    background-color: rgb(255,255,220);
    padding: 3px;
    cursor: pointer;
}

img.help {
    display: none;
}

.error {
    color: red; font-weight: bold;
}

.readonly {
    background-color: rgb(220,220,220);
}

input.error {
    background-color: lightpink;
}
/*input {
    width:95%;
}*/