@font-face {font-family: 'braille';src: url('Binary_v2_by_xchristaox.eot'),url('Binary_v2_by_xchristaox.woff') format('woff'),url('Binary_v2_by_xchristaox.ttf') format('truetype'),url('Binary_v2_by_xchristaox.svg') format('svg');}
pre{display: block;width: 100%;position: fixed;bottom: -10px;}
#braille {
    font-family: braille;letter-spacing: 6px;
    border: 1px dotted #0764B5;
    width: 100%;overflow: auto; min-height: 46px;background-color: #FFFFFF; color: #000000; font-size: 40px;
}
#tools li{
    list-style: none;
    display: inline-block;
}
#tools li a{
    display: block;text-decoration: none;
    width: 140px;height: 30px;margin: 5px;line-height: 28px;
    color: #fff; font-size: 14px;text-align: center;
    background: #0764B5;
}
#tools li a:hover{
    color: #000;
    background: #ccc;
}
.tool {
    width:90%;height: 90%; margin: auto;overflow: auto;overflow-x: hidden;position: relative;
}
#kd_load,#dk_load{max-height:500px;overflow: auto;}
#start {
    display: block;
    width: 850px;
    margin: 0px auto 20px;
}
#hexadiv, #hexadivrgb{
    line-height: 150px;
    text-align: center;
    background: #cccccc;border: 1px solid #000;
}
#bmi_ready{
    height: 60px;padding: 10px;
    text-align: center;
    background: #cccccc;border: 1px solid #000;
}
#html_farbcode input{
    width: 60px;
}
.bmi_tabele, .zeit_tabele {
    width: 100%;margin:auto
    border:1px solid #000;
    border-spacing: 0;
    cursor: pointer;
}
.bmi_tabele th,.zeit_tabele th {
    padding: 0;
    color:#fff; text-align: left;
    background: #0764B5;
}
.bmi_tabele tr:nth-of-type(even) td, .zeit_tabele tr:nth-of-type(even) td{
    background: #ccc;
}
.bmi_tabele tr:hover td, .zeit_tabele tr:hover td{
    color:#fff;
    background: #0764B5;
}
#size{
    padding-left: 16px;
    background: url('img/groesse.png') no-repeat;
    background-position: 5px 8px;
}
#heft{
    padding-left: 18px;
    background: url('img/gewicht.png') no-repeat;
    background-position: 1px 12px;
    background-size: 16px;
}
#gender .male{
    padding-left: 18px;
    background: url('img/male.png') no-repeat;
    background-position: 2px 3px;background-size: 12px;
}
#gender .female{
    padding-left: 18px;
    background: url('img/female.png') no-repeat;
    background-position: 4px 3px;background-size: 8px;
}
.tool{
    padding: 30px;
    background: #F8F8F8;
    margin-bottom: 15px;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
#vorwahlh{
    min-height: 150px;
}
label{
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #888;
    margin-bottom: 15px;
}
input[type="text"],
input[type="number"],
select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border: 2px solid #fff;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
#vorwahld span,#vorwahlh span{
    font-size: 12px;
}
#dk,#kd {
    margin: 0 0 0 -40px;
}
#dk li,#kd li{
    list-style: none;
    display: inline-block;
    cursor: pointer;
}
#dk li a,#kd li a{
    display: inline-block;text-decoration: none;
    width: 30px;height: 30px;margin: 5px;line-height: 28px;
    color: #fff; font-size: 14px;text-align: center;
    background: #0764B5;
}
#dk li a:hover,#kd li a:hover{
    color: #000;
    background: #ccc;
}
#prozentrechner input[type=text]{
    width: 50px;
    text-align: right;
}
#prozentrechner div{
    margin:20px;padding: 10px;
    background: #0764B5;
    color:#fff;
}
#prozentrechner div span{
    float: right;
}
#prozentrechner label{
    color:#fff;
}
#rezeptergebnis table{
    display: none;
}
#rezeptumrechner td.ergebnis{
    text-align: right;
}
#rezeptumrechner table td {
    min-width: 100px;
    margin: 0px;
    padding: 5px;
    border: 1px solid #000;
}
#rezeptumrechner input {
    width: 100px;
}
#druck{
    display: none;
}
#tabel{display: block; width: 600px;height:600px;margin: auto; text-align: center;color: #fff; position: relative;background: green;}
#tabel h1{color: #fff;}
#null{background:url('../../image/kartenhinten.png') green;position: absolute;left: 120px;top:200px;cursor: pointer;}
.ablage,.karten,.ablage2 {display: inline-block;cursor: pointer;}
.ablage,.karten,#null,.ablage2{height: 175px;width: 124px;}
.ablage,.ablage2{background: url('../../image/ablage.png') green;position: absolute;right: 120px;top:200px;}
.ablage2{display: none;}
.karten{background: url('../../image/kartendeck.png') green;position: absolute;left: 120px;top:200px;}
#text{width: 100%; position: absolute;bottom: 0;padding: 5px; text-align: center;color: #fff;}
#one{background-position: -1591px -192px;}

#karo2{background-position: -4px -5px ;}
#karo3{background-position: -136px -5px ;}
#karo4{background-position: -268px -5px ;}
#karo5{background-position: -401px -5px ;}
#karo6{background-position: -533px -5px ;}
#karo7{background-position: -665px -5px ;}
#karo8{background-position: -798px -5px ;}
#karo9{background-position: -930px -5px ;}
#karo10{background-position: -1062px -5px ;}
#karob{background-position: -1194px -7px ;}
#karod{background-position: -1326px -7px ;}
#karok{background-position: -1459px -7px ;}
#karoa{background-position: -1591px -7px;}

#kreuz2{background-position: -4px -192px ;}
#kreuz3{background-position: -136px -192px ;}
#kreuz4{background-position: -268px -192px ;}
#kreuz5{background-position: -401px -192px ;}
#kreuz6{background-position: -533px -192px ;}
#kreuz7{background-position: -665px -192px ;}
#kreuz8{background-position: -798px -192px ;}
#kreuz9{background-position: -930px -192px ;}
#kreuz10{background-position: -1062px -192px ;}
#kreuzb{background-position: -1194px -192px ;}
#kreuzd{background-position: -1326px -192px ;}
#kreuzk{background-position: -1459px -192px ;}
#kreuza{background-position: -1591px -192px;}

#herz2{background-position: -4px -377px;}
#herz3{background-position: -136px -377px;}
#herz4{background-position: -268px -377px;}
#herz5{background-position: -401px -377px;}
#herz6{background-position: -533px -377px;}
#herz7{background-position: -665px -377px;}
#herz8{background-position: -798px -377px;}
#herz9{background-position: -930px -377px;}
#herz10{background-position: -1062px -377px;}
#herzb{background-position: -1194px -377px;}
#herzd{background-position: -1326px -377px;}
#herzk{background-position: -1459px -377px;}
#herza{background-position: -1591px -377px;}

#pic2{background-position: -4px -562px;}
#pic3{background-position: -136px -562px;}
#pic4{background-position: -268px -562px;}
#pic5{background-position: -401px -562px;}
#pic6{background-position: -533px -562px;}
#pic7{background-position: -665px -562px;}
#pic8{background-position: -798px -562px;}
#pic9{background-position: -930px -562px;}
#pic10{background-position: -1062px -562px;}
#picb{background-position: -1194px -562px;}
#picd{background-position: -1326px -562px;}
#pick{background-position: -1459px -562px;}
#pica{background-position: -1591px -562px;}
#genauesalter .zei{
    width:50px;
}
.ausg{
    width:180px;
}

#genauesalter .table{
    width: 350px; margin: auto;
}
#genauesalter table .left{
    text-align: left;
}
#genauesalter table .center{
    text-align: center;
}
#genauesalter td{
    text-align:right;
    
}