body { font-family: "Courier"; font-size: 20px; background-color: gray}
button { min-width: 30px; height: 20px; background-color: white; color: black; border: 1px solid black; font-family: "Courier"}
h1 { position: absolute; left: 330px; width: 550px; top: 0px; text-align: center}

.kantonlabel { width: 48%; height: 40px; float: left; border:1px solid black}

#buttonok { min-width: 50px; height: 30px; background-color: white; color: black; border: 2px solid black; font-size:30px}
#buttons { position: absolute; left: 900px; width: 260px; top:20px; border: 1px; text-align:right } 
#cantonlist	{ position: absolute; left: 10px; top:20px; width: 300px; height: 640px; border: 0px solid black}
#console { position: absolute; left: 900px; top:60px; width: 260px; height: 520px; border: 1px solid black; overflow: scroll}
#map  { position: absolute; left: 330px; top:0px; width: 550px }
#regeln  { position: absolute; left: 10px; top:600px; width: 90% }
#staendemehrbar  { position: absolute; left: 330px; top:450px; width: 550px }
#volksmehrbar  { position: absolute; left: 330px; top:510px; width: 550px }

#stja, #vlja{ width: 24%; height: 20px; background-color: hsl(120,100%,50%); float:left; border:1px solid black}
#stjap, #vljap { width: 24%; height: 20px; background-color: hsl(120,25%,75%); float:left ; border:1px solid black}
#stneinp, #vlneinp { width: 24%;height: 20px; background-color: hsl(0,25%,75%); float:left; border:1px solid black}
#stnein, #vlnein{ width: 24%;height: 20px; background-color: hsl(0,100%,50%); float:left; border:1px solid black}
#stlegend, #vllegend { clear:left;  text-align: center; width:96%}



@media all and (max-device-width:600px) 
{
	h1, #map, #staendemehrbar, #volksmehrbar, #buttons, #cantonlist, #console, #regeln { position: static; width: 100%; top:0px; left:0px}
	
	

	
}