body {
margin: 0; padding: 0;
color: #E85903;
font-size:16px;
font-family: arial, helvetica, arial, sans-serif;
background-color:#B0C4DE;
text-align:left;
}

.tabtekst {
font-size:15px;
font-family: arial, helvetica, arial, sans-serif;
text-align:left;
 vertical-align:top;
}


td {
 vertical-align:middle;
 text-align:center;
 font-size:40px;
}

.rred {
 width:90px;
 height:80px;
 border-right: 5px solid red;
 border-bottom: 5px solid yellow;
}

.ored {
 width:90px;
 height:80px;
 border-bottom: 5px solid red;
 border-right: 5px solid yellow;
}

.rored {
 width:90px;
 height:80px;
 border-right: 5px solid red;
 border-bottom: 5px solid red;
}

.r {
 width:90px;
 height:80px;
 border-right: 5px solid yellow;
 border-bottom: 5px solid yellow;
}

.sit {
 width:90px;
 height:80px;
 border-right: 5px solid yellow;
 border-bottom: 5px solid yellow;
 text-align:center;
 font-size:20px;
}


.vb {
 width:450px;
}


#voorbeeld {
 width:450px;
 display: none;
}


.knop {
 width:150px;
margin:4px;
}

#veld {
 width:90px;
 height:80px;
 cursor:default;
}

.rechts {
 width:10px;
 height:80px;
 cursor:pointer;
 border-left: 5px solid yellow;
}

#veldl {
 width:80px;
 height:80px;
 cursor:default;
}

#veldb {
 width:90px;
 height:70px;
 cursor:default;
}

#veldlb {
 width:80px;
 height:70px;
 cursor:default;
}

.onder100 {
 width:90px;
 height:10px;
 cursor:pointer;
 border-top: 5px solid yellow;
}

.onder10 {
 width:10px;
 height:10px;
 border-top: 5px solid yellow;
 border-left: 5px solid yellow;
}

.onder90 {
 width:80px;
 height:10px;
 cursor:pointer;
 border-top: 5px solid yellow;
}



table {
    border-collapse: collapse;

}


form {
width:450px;
margin:0px auto;
}
.boord{
border: 6px solid black;
}










#klaar {
display:none;
}

blockquote {
border: 1px solid #000000;
padding:5px;
}

.spel {
height:35%;
}
.spel1 {
width:80%;
}


.lesfoto {
height:30px;
padding-right:10px;
}
.taaloverzicht {
height:50px;
padding-right:10px;
}



select {
font-size:16px;
margin:10px;
}


button {
padding:1px;
font-size:16px;
line-height:20px;
margin-top:2px;
cursor:pointer;
}

input.verloop {
font-size:20px;
width:60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
cursor:default;
border:1px;
ackground-color:green;
}

input.kl {
font-size:24px;
width:20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
cursor:default;
border:1px;
}

ol {
font-style:italic;
}




#thuis {
margin-top: 15px;
padding-top: 5px;
text-align:right;
color: #000000;
font-size:16px;
font-family: arial, helvetica, arial, sans-serif;
}

#url {
argin: 5px;
padding: 0;
text-align:center;
color: #b22222;
font-size:50px;
font-family: arial, helvetica, arial, sans-serif;
}

#kader {
margin: 0 auto;
width:1600px;
background-color: #ffffff;
}

h1 {
margin: 2px; padding: 0;
font-size:28px;
font-family: arial, helvetica, arial, sans-serif;
padding-left: 15px;
padding-bottom: 15px;
text-align:center;
}

h2 {
margin: 2px; padding: 0;
font-size:20px;
font-family: arial, helvetica, arial, sans-serif;
padding-left: 15px;
padding-bottom: 15px;
text-align:center;
}


h3 {
margin: 0px;
padding-top: 10px;
padding-right: 10px;
width:100%;
height:20px;
font-size:20px;
text-align:center;
}

p {padding-left: 50px;padding-right: 50px;}


li {
margin-left:10px;
padding-left:0px;
}

ul {
padding-left:25px;
}

#tekstvak {

width:100%;
background-color: white;
}

#google1, #google2 {
padding-top: 100px;
float:left;
width:300px;
height:1150px;
}

#tekst {
float:left;
width:1000px;
padding-top:30px;
padding-bottom:10px;
font-size:16px;
font-family: arial, helvetica, arial, sans-serif;
ackground-color:green;
height:1180px;
}



.links {
text-align:left;
}




textarea {
width:280px;
background-color: lightblue;
padding:10px;
cursor;default;
font-size:16px;
font-weight:bold;
border: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
overflow:hidden;
font-family: arial, helvetica, arial, sans-serif;
cursor:default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}




#google3 {
float:break;
float:left;
width:100%;
height:290px;
}

#google4 {
width:100%;
height:280px;
background-color:green;
}


#footer {
float:break;
float:left;
width:100%;
height:30px;
background-color: #B22222;
color:white;
text-align:center;
margin-bottom: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size:16px;
font-family: arial, helvetica, arial, sans-serif;
}

#fotos {text-align:center;}
.foto {width:90%;}

.menu {
float:left;
    width:16.6666%;
    height:30px;
    line-height:30px;
    text-align:center;
    font-family: "Arial Narrow", helvetica, arial, sans-serif;
    font-size:15px;
font-variant: small-caps;
background-color:#b22222;
border: 1px solid #B0C4DE;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 } 

.menu:hover {
background-color:#E89603; 
cursor:pointer;
border: 1px solid #FFFFFF;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



a {text-decoration: none;color:#FFD680;}

a.wit {text-decoration: none; color:white;}
a.wit:hover {text-decoration: none; color:black; }
a.zwart {text-decoration: underline; color:#000000;}
a.zwart:hover {text-decoration: none; color:red;}

a.titel {text-decoration: none; font-weight:bold; color:#000000;}
a.titel:hover {text-decoration: none; color:#B22222;cursor:pointer; }

a.cat {text-decoration: underline; font-weight:bold; color:#000000;}
a.cat:hover {text-decoration: none; color:#B22222;cursor:pointer; }

a.les {text-decoration: underline; color:#000000;}
a.les:hover {text-decoration: none; color:#B22222;cursor:pointer; }


a.cat2 {font-size:12px;text-decoration: none; color:#000000;}
a.cat2:hover {text-decoration: none; color:#B22222;font-weight:bold; cursor:pointer; }


@media screen and (max-width: 1620px) {
#kader {width:1400px;}
#google1 {width:300px;}
#tekst {width:800px;}
}

@media screen and (max-width: 1420px) {
#kader{width:1200px;}
#tekst {width:600px;}
p {padding-left: 20px;padding-right: 20px;}
}

@media screen and (max-width: 1220px) {
#kader {width:1000px;}
#tekst {width:700px;}
#url {font-size:40px;}
.menu {font-size:12px;}
#google2 {
loat:break;
float:left;
width:100%;
height:290px;
}
}

@media screen and (max-width: 1020px) {
#kader {width:900px;}
#google1 {width:300px;}
#tekst {width:600px;}
.menu {font-size:11px;}
}

@media screen and (max-width: 920px) {
#kader {width:800px;}
#google1 {width:160px;}
#tekst {width:640px;}
}

@media screen and (max-width: 820px) {
#kader {width:700px;}
#google1 {width:130px;}
#tekst {width:570px;}
#url {font-size:30px;}
.menu {width:20%;}
#weg {display:none;}
}

@media screen and (max-width: 720px) {
#kader {width:600px;}
#google1 {width:100%;height:100px;padding-top: 0px;}
#tekst {width:100%;padding-top:10px;}
#thuis {font-size:14px;}
#weg2 {display:none;}
.menu {width:25%;}
.links {display:none;}
}

@media screen and (max-width: 620px) {
button, input.verloop {width:38px;font-size:16px;}
.bodkeuze {width:100px;font-size:16px;}
.kaart {width:30px;}
txtarea {width:500px;}
#biedbox, #biedverloop {width:250px;font-size:16px;height:260px;}
#kader, #kaarten {width:500px;}
#url { font-size:20px;}
#google2 {height:100px;padding-top: 0px;}
#google3 {height:100px;}
.menu {font-size:14px;width:50%;}
 }