body{
    background-image: url('board-background.png');

    margin: 0;padding: 0;
}
header{
    padding: 20px;
}
header img{
    text-decoration: blink;
    width: 310px;
    position: fixed;
}
header h3{
    font-size: 0px;
}
#sozial{
    float: right;
    width: 100px;
}
main{
    display: block;min-height: 100%;padding: 40px 20px;margin: auto;
}
footer{
    width: 320px;padding: 10px;
    position: fixed;bottom: 0px;right: 0;
    text-align:center;
}
footer a{
    color: #ff0000;
    cursor: pointer;
    text-decoration: none;
}
footer a:hover{
    color: #000;
}
#nav{
    position: fixed;left: -330px;
    width:301px;height:100%;padding: 10px;
    background-image: linear-gradient(to right, #D9D8D6 30%, #C9C8C6 90%);
    border: 1px solid #BCB1C9;
    border-radius: 0 10px 0 0;
    box-shadow: 5px 5px 5px #888;
}
#nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#nav ul li a {
    display: block;
    width: 80%; margin: 15px 5px;padding: 10px;
    background: #fff;
    font-weight: bold;color: #000;text-decoration: none;
    border: 1px solid #BCB1C9;
    cursor: pointer;
    box-shadow: 5px 5px 5px #888;
}
#nav ul li a:hover {
    background-image: linear-gradient(to right, #C9C8C6 30%, #D9D8D6 90%);
    color: #fff;
}

/*Bedienfeld*/
#workingsurface{
    display: block;height: 100%;width: 300px;padding: 10px;
    position: fixed;left: 0;top: 100px;
    background-image: linear-gradient(to right, #D9D8D6 30%, #C9C8C6 90%);
    border: 1px solid #BCB1C9;
    border-radius: 0 10px 0 0;
    box-shadow: 5px 5px 5px #888;
    text-align: center;
}
#lettertwo{
    display: none;
}
#letterthree{
    display: none;
}
.pu,.pu2,.pu3,.delt,.delt3,#ld,#ld3,.leerz,.umbruchz,#menu,#menuclose,#switsch1,#switsch2,#switsch3,#switsch4,#switsch5,#switsch6{
    width: 30px;height: 30px;margin:2px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    border-right:1px solid #848484;
    border-bottom:1px solid #848484;
    cursor: pointer;
    background: #fff;
    font-family: Arial;text-align: center;font-size: 15px;color: #000;
    box-shadow: 1px 1px 1px #888;
    border-radius: 0 0 5px 5px;
}
.pu:hover,.pu3:hover,.delt:hover,.delt3:hover,#ld:hover,#ld3:hover,.leerz:hover,.umbruchz:hover,#menu:hover,#menuclose:hover,#switsch1:hover,#switsch2:hover,#switsch3:hover,#switsch4:hover,#switsch5:hover,#switsch6:hover{
    border-left:1px solid #848484;
    border-top:1px solid #848484;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-shadow: 2px 2px 2px #ccc inset;
}
#gr{
    margin: 35px 0 0;
    float: left;
    width: 149px;
}
#gr pre ,#kl pre{
    margin: -10px 0 0;
}
#kl{
    margin: 35px 0 0;
    float: right;
    width: 149px;
}

.xxx,.delt,.delt3,.leerz{
    width: 50px;
}
#info{
    text-align: left;
}
#switsch1,#switsch2,#switsch3,#switsch4,#switsch5,#switsch6{
    width: 80px;
    float: right;
}
#menu,#menuclose{
    display: block;float: left;
    width: 30px;height: 30px;
    margin-left: 10px;
    background: url('image/menu.png') no-repeat #fff;
}
textarea{
    width: 260px;height: 75px;
    padding: 10px;
    font-size: 12px;
    border: 3px double #CCCCCC;
    resize:none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 5px 5px 5px #888 inset;
}
/*Ausgabe*/
#ausgabe{
    margin:0 0 0 360px;padding: 10px;
}
.siebens{
    float: left;
    width: 52px;height: 92px;
    background: url('7s.png') no-repeat center center;
    position: relative;
}
.leer{
    float: left;
    width: 52px;height: 92px;
}
.umbruch{
    clear: both;
    width: 100%;height: 10px;
}
.a{
    width: 52px;height: 12px;
    background: url('adg.png') no-repeat center center;
    position: absolute;left:0;top: 0;
}
.d{
    width: 52px;height: 12px;
    background: url('adg.png') no-repeat center center;
    position: absolute;left:0;bottom: 0;
}
.g{
    width: 52px;height: 12px;
    background: url('adg.png') no-repeat center center;
    position: absolute;left:0;top: 40px;
}
.b{
    width: 12px;height: 52px;
    background: url('bcef.png') no-repeat center center;
    position: absolute;right:0;top: 0;
}
.c{
    width: 12px;height: 52px;
    background: url('bcef.png') no-repeat center center;
    position: absolute;right:0;bottom: 0;
}
.e{
    width: 12px;height: 52px;
    background: url('bcef.png') no-repeat center center;
    position: absolute;left:0;bottom: 0;
}
.f{
    width: 12px;height: 52px;
    background: url('bcef.png') no-repeat center center;
    position: absolute;left:0;top: 0;
}
.punkt{
    width: 12px;height: 15px;
    background: url('bcef.png') no-repeat bottom center;
    position: absolute;right:0;bottom: 6px;
}
#az{
    position: fixed;right:20px;bottom: 40px;z-index: 100;
    width: 120px;
}
#az div{
    margin: auto;
}