body {
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #ffffff;
font-family: Arial;
}



    .image-container {
      position: relative;
      display: inline-block;
    }

    .image-container img {
      width: 100%;
      display: block;
      border-radius: 8px;
    }

    .remove-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: rgba(255, 0, 0, 0.8);
      color: white;
      border: none;
      padding: 4px 8px;
      font-size: 12px;
      cursor: pointer;
      border-radius: 12px;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }

    .image-container:hover .remove-btn {
      opacity: 1;
    }

div#main {position: absolute; left: 200px; top: 0px; }
div#adsense {position: absolute; left: 60px; top: 0px; }
div#music {position: absolute; left: 0px; top: -50px;}
div.submenu {position: absolute;
							left: 400px;
							top: 400px;
							width: 150px;
							height: 150px;
							z-index:-2; }

td.blokwit{background-color:white;}
td.blokzwart{background-color:black;text-decoration: none; color: white;}
img {border:none;}
td.blokzwart {height:150px;width: 150px;}
td.blokwit {height:150px;width: 150px;}

img.blokzwart {height:150px; width: 150px}
img.blokwit {height:150px; width: 150px}
img.balk {width: 600px;}
div.content {
						background-color: white; 
						border-style: solid;
						border-width: 2px;
						margin: 0 0;
						}
						
td.menu { 	border-style: solid;
						border-width: 2px;
						border: 2px outset grey;
						background-color: #aaaaaa;
						text-align: center;
						height: 30px;
						width: 146px;
						padding-top: 5px }
a.menu {color: black;}
a.menu:hover {text-decoration: none;color: white}

p,h1,li,td {font-family: Arial;list-style-type: square; vertical-align: middle;}
.af {color:red;}
a {text-decoration: none; color: gray}
a:hover {text-decoration: underline overline; color: #222222}
p,li,td {font-size:12px;}
P:first-letter { float: none; font-size: 250%; font-weight: bold;}
h1 {font-size: 16px;}
h3 {font-size: 12px; font-weight:bold; text-align:middle;}
p.citaat, td.citaat {font-family: Times New Roman; font-size:11px; font-style: italic;text-align:right;}
p.citaat:first-letter {font-size: 100%;};
div#kalenderdiv td {text-decoration: none; color: grey}
div#kalenderdiv a {text-decoration: none; color: black}
div#kalenderdiv a:hover {text-decoration: underline overline; color: #222222}
table.prijslijst {width: 100%;}
td.prijs {text-align: right;}

.labelcel {
 color: white;
 background-color: black;
 width: 300px;
}

.veldcel input {
 width: 250px;
 background-color: white;
 color: black;
 border: 1px solid black;
 margin-right: 0px;
} 

 #formulier table {
 background-color: black;
 color: #000000;
 width: 596px;
 border: 1px solid black;
 border-collapse: collapse;
}

#formulier td {
 border: 1px solid black;
 padding-left: 0px;
}
#formulier h2 {
	color: white;
}
#formulier textarea {
 background-color: white;
 color: black;
 width: 250px;
 border: 1px solid black;
 margin-right: 0px;
}

.button {
 background-color: white;
 color: black;
 font-family:Arial;
 font-weight:bold;
 border:1px solid;
 margin-left: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 width:80px;
}

#urlframe {
	width: 100%;
	height: 800px;

}
@media only screen and (max-width: 1000px) {
  /* For mobile phones: */
  body {
    background-color: lightgreen;
  	width: 100%;
  	font-size:40px;
  }
  p, li, td {
    font-size: 30px;
}
}

.smarthomebutton {
	width: 100px;
}

.input-hidden {
  position: absolute;
  left: -9999px;
}

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
  border: 1px dashed #444;
  width: 150px;
  height: 150px;
  transition: 500ms all;
}

/* input[type=radio]:checked + label>img {
  transform: 
    rotateZ(-10deg) 
    rotateX(10deg);
}*/

.slidecontainer {
  width: 50%; /* Width of the outside container */
}

/* The slider itself */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}