body {
    margin-left: 50px;
    margin-top: 10px;
    background-color: #87BAF8
}

table {
    width: 600px;
}


#onscreen {
    background-color: lightgrey;
    border: 6px ridge grey;
}

#onscreenwhite {
    background-color: white;
    border: 6px ridge grey;
}

#onscreenblue {
    background-color: lightblue;
    border: 6px ridge grey;
}

#onscreenpyramide {
    background-color: white;
    border: 6px ridge grey;
}

#onscreenbubble {
    background-color: white;
    border: 6px ridge grey;
}

#onscreenklempner {
    background-color: white;
    border: 6px ridge grey;
    cursor: url('klempner/Bilder/loetlampe.png'),auto;
}

#onscreenpatience {
    background-color: white;
    border: 6px ridge grey;
}

#onscreenpatience32 {
    display: none;
    background-color: white;
    border: 6px ridge grey;
}

#onscreenawerk {
    display: none;
    background-color: white;
    border: 6px ridge grey;
}

#kellervoll {
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        top: 180px;
        left: 620px;
        border: 6px ridge blue;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0, 0, 255, 0.3);
}

#zeitzuende {
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        top: 170px;
        left: 630px;
        border: 6px ridge green;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,255,0, 0.3);
}

#geschafft {
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        top: 300px;
        left: 400px;
        border: 6px ridge green;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,255,0, 0.3);
}

#geschafftor {
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        top: 80px;
        left: 630px;
        border: 6px ridge green;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,255,0, 0.3);
}

#neuegruppevariabel {
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        border: 6px ridge orange;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(255,255,0, 0.5);
}

#geschafftvariabel{
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        border: 6px ridge green;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,255,0, 0.3);
}

#zeitzuendevariabel{
        display: none;
        position: absolute;
        text-align:center;
        font-size: 20px;
        border: 6px ridge green;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,255,0, 0.3);
}

.wwerk {
    display: none;
    width: 20px;
    height: 57px;
    background-color: white;
}

#infovariabel{
        position: absolute;
        text-align:center;
        font-size: 20px;
        border: 6px ridge blue;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(0,0,255, 0.3);
}

#Kollisionsnachricht{
        position: absolute;
        text-align:center;
        font-size: 20px;
        border: 6px ridge red;
        padding: 10px 10px;
        width: 180px;
        height: 60px;
        background-color: rgba(255,0,0, 0.3);