body { font-size:20pt; font-family:verdana; margin:20pt; background-color:#ffffff; color:#000000; }
table { border-collapse: collapse; width: 100%; }
tr:nth-child(even) { background-color: #fdfdfd; }
tr:hover { background-color: #f5f5f5; }
th { font-size:10pt; }
td { text-align:center; border:1px solid black; }
select { font-size: 20pt; background-color:#eeeeee; color:#222222; }
option,optgroup { font-size: 20pt; }
input { text-align:center; font-size: 40pt; background-color:#eeeeee; color:#222222; }
label { font-size:12pt; }
.ueberschrift { text-align:center; font-size:24pt; color:#0069B3; padding:4pt; font-weight:bold; }
.hinweis { font-size: 8pt; color:#0069B3; text-align:center; padding:2pt; }
th.rotate,th.rotate_begin {
  height: 100px;
  white-space: nowrap;
  border:0 solid black;
}

th.rotate > div {
	display: inline-block;
 transform:rotate(315deg) translate(-17px, 34px);
-webkit-transform:rotate(315deg) translate(-17px, 34px);
-moz-transform:rotate(315deg) translate(-17px, 34px);
-ms-transform:rotate(315deg) translate(-17px, 34px);
-o-transform:rotate(315deg) translate(-17px, 34px);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  width: 20px;
  text-align:left;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 0; }
th.rotate_begin > div {
	display: inline-block;
 transform:rotate(315deg) translate(-40px, 12px);
-webkit-transform:rotate(315deg) translate(-40px, 12px);
-moz-transform:rotate(315deg) translate(-40px, 12px);
-ms-transform:rotate(315deg) translate(-40px, 12px);
-o-transform:rotate(315deg) translate(-40px, 12px);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  width: 20px;
  text-align:left;
}
th.rotate_begin > div > span {
  border-bottom: 1px solid #999999;
  padding: 0; }
 td.rotate {
  height: 200px;
  white-space: nowrap;
  border:0 solid black;
}

td.rotate > div {
	display: inline-block;
 transform:rotate(270deg) translate(-60px, 0px);
-webkit-transform:rotate(270deg) translate(-60px, 0px);
-moz-transform:rotate(270deg) translate(-60px, 0px);
-ms-transform:rotate(270deg) translate(-60px, 0px);
-o-transform:rotate(270deg) translate(-60px, 0px);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  width: 30px;
  text-align:left;
}
td.rotate > div > span {
  border-bottom: 0px solid #ccc;
  padding: 10px;
  font-size: 16pt; }
.verbrauch { font-size:16pt; }
.ausgabe { display:block; text-align:center; font-size:20pt; color:#0069B3; background-color:#ffffff; position:absolute; top:10px; left:0px; width:100%; padding:2pt; font-weight:bold; z-index:3; }
.plusbutton { font-size:40pt; background-color:green; color:#eeeeee; font-weight:bold; width:130pt; height:120pt; }
.minusbutton { font-size:40pt; background-color:#c30000; color:#eeeeee; font-weight:bold; width:70pt; height:120pt; }
.feldbutton { width:70pt; text-align:center; font-size:20pt; height:120pt; }
.submitbutton { width:100pt; height:24pt; background-color:#0069B3; color:#eeeeee; font-weight:bold; font-size:10pt; }
/* remove standard-styles */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  width: 100%
} 

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}
input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}
input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}