﻿body {
margin: 0; padding: 0;
color: #E85903;
font-size:30px;
font-family: arial, helvetica, arial, sans-serif;
background-color:#B0C4DE;
}


.klokken {
font-size:30px;
font-weight:bold;
background-color:#FFFFFF;
border: 10px solid #ffffff;
text-align:center;
}


@font-face {
     font-family: myFirstFont;
     src: url(digital-7.ttf);
}

.digitaal {
     font-family: myFirstFont;
font-size:80px;
background-image: url("digitale-klok.jpg");
width:240px;
height:135px;
line-height:135px;
} 

.dag {
width:110px;
background-color: #B0C4DE;
margin:5px;
}

.scr {
background-color: #b22222;
border: 1px solid #b22222;
font-weight:bold;
color: white;
}

.tijd {
font-weight:bold;
}

.dr {
font-weight:bold;
font-size:20px;

}

.kaarten {
border: 0px solid #000000;
font-size:18px;
font-weight:bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
cursor:default;
txt-align:center;
width:150px;
}

.nazicht {
border: 0px solid #000000;
font-size:18px;
font-weight:bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
cursor:default;
width:20px;
color: green;
}

.uk {
width:37px;
height:62px;
outline-color: white;
outline-style: solid;
outline-width: 3px;
}

.ukup {
width:37px;
height:62px;
outline-color: green;
outline-style: solid;
outline-width: 3px;
}

.speelplan {
background-color:white;
border: 1px solid #000000;
}

table {
background-color:#ADD8E6;
width:560px;
font-size:14px;
font-family: helvetica, arial, sans-serif;
border: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
border-collapse: collapse;
text-align: left;
cursor:default;
}

td {
padding: 5px;
border: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

tr.a:hover{background-color:#F0F8FF}

.b {
width:33.3333%;
}

.c {
width:80px;
}

.d {
width:100px;
}

.twee {
font-size:24px;
background-color:white;
text-align:center;
}

.drie {
font-size:16px;
background-color:white;
font-weight: bold;
}

.plan {
font-size:16px;
background-color:white;
font-weight: bold;
border: 2px solid #FFFFFF;
}


th {
text-align: center;
padding: 3px;
font-size:18px;
border: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}


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


button {
-webkit-appearance: none;
padding:2px;
font-size:16px;
line-height:20px;
margin-top:2px;
}

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;
}

h2 {
text-align:center;
text-decoration: underline;
font-size:20px;
font-family: arial, helvetica, arial, sans-serif;
}


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 {
float:break;
float:left;
width:100%;
background-color: white;
font-size:12px;
}


#
{
float:left;
width:300px;
height:1150px;

}

#google0{
width:300px;
height:250px;

}


#google1{
width:300px;
height:600px;
}


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




#tekst {
float:left;
width:980px;
padding-top:30px;
padding-left:10px;
padding-bottom:20px;
font-size:18px;
font-family: arial, helvetica, arial, sans-serif;
ackground-color:green;
}

#kaarten {
adding:10px;
width:560px;
ackground-color:green;
}

.links {
text-align:left;
}


#biedverloop {
padding-left:5px;
width:270px;
height:280px;
order: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
float:left;
}



#biedbox {
width:280px;
height:270px;
order: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
float:left;
}



textarea {
margin-top:10px;
width:560px;
background-color: lightblue;
padding:10px;
cursor;default;
font-size:16px;
font-weight:bold;
isabled;
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;

}




#google3 {
float:break;
float:left;
width:100%;
height:290px;
background-color: white;
}

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

#inhoud {
float:left;
padding-top:50px;
width:100%;
background-color: #FFFFFF;
font-size:16px;
font-family: arial, helvetica, arial, sans-serif;
text-align:center;
padding-bottom:50px;
border: 1px solid #000000;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tabtitel {
background-color: #1569C7;
font-size:20px;
font-family: arial, helvetica, arial, sans-serif;
font-weight:bold;
text-align:center;
border: 0px solid #dddddd;
}

.tabinhoud {
float:left;
width:50%;
line-height:20px;
border-collapse: separate;
border-spacing: 10px 10px;
border: 0px solid #dddddd;
}

.tabinhoud2 {
width:90%;
line-height:20px;
border-collapse: separate;
border-spacing: 10px 10px;
border: 0px solid #dddddd;
}
 
 

#overzicht {
margin: auto;
width: 80%;
}



#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: none; color:#000000;}
a.zwart:hover {text-decoration: none; color:#ffffff;}
a.cat {text-decoration: underline; color:#000000;}
a.cat:hover {text-decoration: none; color:#B22222;font-weight:bold; cursor:pointer; }

a.groen {text-decoration: none; color:black;}
a.groen:hover {text-decoration: underline; color:black; }


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: 1930px) {
#kader {width:1500px;}
#google {width:300px;float:left;}
#google0 {width:300px;}
#google1 {width:300px;}
#tekst {width:890px;}
}


@media screen and (max-width: 1420px) {
#kader{width:1200px;}
#tekst {width:590px;}
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 {
float:left;
width:100%;
height:290px;
}
}

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

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

@media screen and (max-width: 820px) {
#kader {width:700px;}
table {width:500px;}
#google {width:130px;}
#google0 {width:130px;}
#google1 {width:130px;}
#tekst {width:560px;}
#url {font-size:30px;}
.menu {width:20%;}
#weg {display:none;}
.tabinhoud {float:break;width:100%;}
}

@media screen and (max-width: 720px) {
#kader {width:600px;}
#google {width:100%;height:105px;padding-top: 0px;}
#google0 {width:100%;height:0px;padding-top: 0px;}
#google0 {display:none;}
#google1 {width:100%;height:104px;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) {
table {width:460px;}
button, input.verloop {width:38px;font-size:16px;}
.bodkeuze {width:100px;font-size:16px;}
.kaart {width:30px;}
textarea {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%;}
 }






