#spiel {	
	float: left;	
/*	padding: 1px auto;	*/
	overflow: hidden;
	display: block;
	margin: 1px auto;
}

table,
td {
/*	border: 1px solid;	*/
	padding: 1px;
}

/*	body { 
		margin: 0 auto; 
	}	*/

/*	div.table {
			display: table-caption;
			width: calc(100% - 10px);			
			border: 1px solid blue;	
			padding: 5px;
	}
			
	div.spalte { 
			display: table-cell; 
			border: 1px solid red;	
			width: 	150px;			
			padding: 5px;
	}	*/

#canvas {	
	background-image: url(hground2.png);
}

@media screen and (max-width: 829px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
	height: 100vw;
	width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

#button2 {
	background-image: url(taho.png);
}

#button3 {
	background-image: url(tali.png);
}

#button4 {
	background-image: url(tare.png);
}

#button5 {
	background-image: url(taru.png);
}

button[class^="type"] {
	background-color: #FFF;
	border: 2px solid #006;
	border-radius: 30%;
	color: #000;
	float: left;
	font-size: 100%;
	font-weight: bold;
	height: 50px;
	margin: 5px 3px 2px 0;
	padding: 0.25em 0.25em;
	text-align: center;
	width: 55px;
}

button:focus,button:hover {
  border: 2px solid yellow;
  color: yellow;
}

button.type1 {background: white; }
button.type2 {background: #ea5eff;}
button.type3 {background: beige;}
button.type4 {background: orange;}
button.type5 {background: red;}
button.type6 {background: firebrick;}
button.type7 {background: skyblue;}
button.type8 {background: #6699ff;} /* blue */
button.type9 {background: lime;}
button.type10 {background: #00cc00;} /* green */
button.type11 {background: #99ffcc; }
button.type12 {background: #dfac20;}
button.type13 {
	background: #ea5eff;
	height: 5%;
	width: 5%;
	}
button.type14 {background: beige;}
button.type15 {background: orange;}
button.type16 {background: red;}