body, input, select
{	font: 16px arial,helvetica,clean,sans-serif;
	margin: 0px;
	background-color: #fff;
}
form#zend 
{	margin: 0;
	padding:0;
	font-size:0;
}
body
{ height: 100%;
  position: relative; 
  padding: 0;
  margin: 0px auto;
  text-align: center;
}

.header {
  display: block;
  text-align: left;
  background-color: #ddd;
  position: relative;
  margin: 0 ;
}
h1
{	font: 24px Helvetica,Arial,sans-serif;
	text-shadow: 2px 1px 0px rgba(0,0,0,0.40);
	margin:0 0 5px 0;
}
h2
{	font: 22px Helvetica,Arial,sans-serif;
	margin:0 0 5px 0;
	color: #f26522;
}
.container
{	max-width: 800px;
	min-width:	300px;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	background-color: #fff;
	position: relative;
	min-height: 100%;
	height: auto;
  }
.keyboard {
 background-color: #A5DECE;
 width: 720px;
 height: 720px;
 overflow: hidden; 
 padding: 2px;
 margin: 0 auto;
  
}

.down, .right, .trans
{ top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: none;
  outline:none;
  text-align: center;
  text-transform: uppercase;
  background-color:transparent;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  font-size: 32px;
  color: #0E4239;
  display:inline-block;
 
}

.down { background-image: url(/images/down.png); }
.right { background-image: url(/images/right.png); }


.gr, .w3, .w2, .l3, .l2, .tl, .tt
{ float: left;
  position: relative;
  width:48px;
  height:48px;
  background-repeat: no-repeat;
  display: inline-table	 ;
  background-size: contain;
  overflow: hidden;
}

.gr { background-image: url(/images/gr.png); }
.w3 { background-image: url(/images/w3.png); }
.w2 { background-image: url(/images/w2.png); }
.l3 { background-image: url(/images/l3.png); }
.l2 { background-image: url(/images/l2.png); }
.tl { background-image: url(/images/tl.png); }
.tt { background-image: url(/images/tt.png); }



input {

}

.x {
max-height:0px;
max-width:100%;
}
.searchbutton {
	position: relative;
	display: inline-block;
    float: left;
    width:50px;
	height:40px;
}
.inputzoek{
	position:relative;
margin-left:0px;
}
.zoekletters {
	position: relative;
	display: inline-block;
    float: left;
    width: 250px;
	height:40px;
}




.content
{	background: #fff;
	width: 100%;
	margin: 10px;
}

.space
{	width: 100%;
	height: 44px;
}

.footer
{	position:absolute;
	width: 100%;
	height: 20px;
	background-color: #ddd;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	bottom: 0px;
	left: 0px;
}

@media (max-width: 738px) {.keyboard{ width:660px; height:660px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:44px; height:44px;} .down, .right, .trans { font-size: 29px;}}
@media (max-width: 678px) {.keyboard{ width:600px; height:600px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:40px; height:40px;} .down, .right, .trans { font-size: 27px;}}
@media (max-width: 618px) {.keyboard{ width:540px; height:540px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:36px; height:36px;} .down, .right, .trans { font-size: 24px;}}
@media (max-width: 558px) {.keyboard{ width:480px; height:480px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:32px; height:32px;} .down, .right, .trans { font-size: 21px;}}
@media (max-width: 498px) {.keyboard{ width:420px; height:420px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:28px; height:28px;} .down, .right, .trans { font-size: 19px;}}
@media (max-width: 438px) {.keyboard{ width:360px; height:360px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:24px; height:24px;} .down, .right, .trans { font-size: 16px;}}
@media (max-width: 378px) {.keyboard{ width:300px; height:300px;} .gr, .w3, .w2, .l3, .l2, .tl, .tt { width:20px; height:20px;} .down, .right, .trans { font-size: 13px;}}