@charset "UTF-8";
/* CSS Document ORIGINEEL*/

body {
	background-color: #FFFFFF;
	font-family: "Trebuchet MS", "Lucida Sans", Arial;
	color: #FFFFFF;
	font-size: 100%;
}
* {margin: 0em;
padding: 0em}

#wrapper {/*deze box omhult alles*/
	position: relative;
	width: 62.4em;
	margin-top: -1.25em;
	margin-left:auto;
	margin-right:auto;
			}
#tekstdeel {
	width: 50.5em;
	height: 34.375em;
	float: right;
}

#logokolom {/*deze box bevat de rode kolom met het logo. Hij komt op alle pagina's terug en kan eventueel later worden voorzien van knoppen, links of contactinformatie. De rode kolom is even lang als het background image. */
	position: absolute;
	left: 0em;
	top: 0em;
	background-color: #B32317;
	padding: 0em;
	width: 11.9em;
	height: 34.375em;/*waarom lukt het niet om deze kolom mee te laten rekken met de rechterkolom?*/
	border-style: none;
	margin: 0em;
}
#logokolom  img  {
	position: absolute;
	left: 3.5em;
	top: 3.125em;
	border-style: none;
}
#adres {
	position: absolute;
	top: 27.3em;
	left: 1.6em;
	margin: 0em;
	padding: 0em;
	border-style: none;
	width: 11.75em;}
#adres li {	font-size: 80%;
list-style-type: none;
/*	list-style-image: none;
	color: #000000; 
	font-size: 80%;
	font-weight: bold;
	text-decoration: none;
	font-family: "Copperplate Gothic Light", "trebuchet MS", "Lucida Sans", Arial;
	text-transform: none;
letter-spacing: 0.1em;*/
}
#logo {
	height: 7em;
	width: 4.75em;
}

#img{border-style: none;}
#plaat {
	height: 34.375em;
	width: 50.5em;
}
#balk {
	height: 2em;
	width: 50.5em;
}

#links {/*deze box is de centrale ruimte bestemd voor tekst. Hij kan door de transparante ondergrond onder het plaatje uitlopen. Niet helemaal ideaal, maar het ziet er aanvaardbaar uit en zo blijven witte letters leesbaar*/
	position: absolute;
	top: 9.4375em;
	left: 11.27em;
	width: 33em;
	margin: 0.625em;
	border: 0em;
	height: auto;
	background-image: url(../images/1zwartepixel.png);
	background-repeat: repeat;
	padding-top: 1em;
	padding-right: 1.875em;
	padding-bottom: 1em;
	padding-left: 2.5em;
	z-index: 10;
	}
#links li {/*de lijst in de linkertekstkolom*/
	list-style-position: outside;
	list-style-image: none;
	font-style: normal;
	font-size: 90%;
	color: #ffffff;
	list-style-type: circle;
	padding-top: 0em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-left: 0.3125em;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 1em;
}
#links  ul  {
	padding-top: 0.625em;
	padding-right: 0em;
	padding-bottom: 0.625em;
	padding-left: 0em;
}

#menu {/*deze box is de wrapper van de navigatiebalk. Hij zorgt ervoor dat de navigatiebalk geen ongewenst gedrag vertoont.*/
	text-decoration: none;
	position:absolute;
	top: 8.0625em;
	left: 11.9em;/*hiermee plaats je de achtergrondplaat*/
	width: 50.5em;
	height: 2em;
	margin: 0em;	
}	
#menu li {
	list-style-type: none;
	list-style-image: none;
	font-size: 73%;
	font-weight: bold;
	text-decoration: none;
	font-family: "Copperplate Gothic Light", "trebuchet MS", "Lucida Sans", Arial;
}	
#menu a:link {	color: #000000;	text-decoration:none;}
#menu a:visited {	color: #000000;	text-decoration:none;}
#menu a:hover {color: #ffffff;	text-decoration:none;}
#menu a:active {	color: #ffffff;	text-decoration:none;
}

ul#navigatie {
	position: absolute;
	top: -1em; /*beinvloedt ook hoogte menu*/
	left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 1.2em;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 1.2em;
}

ul#navigatie li {
	position: relative;
	float: left;
	padding-right: 1em;/*was 0, daarna 1em*/
	padding-left: 0em;/*was 0.25, daarna 0em*/
	margin-left: 0em;/*was 0.8*/
	margin-right: 1em;
	margin-top: 1.1em;/*hoogte van menuopties in witte balk, kan eventueel met de helft worden verlaagd voor menuopties op 2 regels*/
	margin-bottom: 1em;
	padding-top: 1.1em;/*niet aankomen, werkt samen met margin bottom bij #navigatie li ul*/
	z-index: 110;
}
#knop1, #knop2, #knop3, #knop4, #knop5, #knop6, #knop7 {
	width: 7.em;
	float: left;
	margin-left: /*was 2.375*/2em;
	margin-right:/*was -1.75*/-1em;
	position: relative;
	}
#navigatie li ul {
	position: absolute;
	left: -625em;
	margin-bottom: 1em;/*combi van margin-bottom, padding-bottom en bottom is nodig voor werkende links, werkt samen met de margin van #navigatie li li en moet daar niet te veel van afwijken*/
	bottom: 0.5em;/**/
	padding-bottom: 0.5em;
	z-index: 100;
	}
ul#navigatie li li {
	width: 16em;
}

#navigatie li li {
	background-image: ;
	background-repeat: repeat;
	padding-top: 0em;
	padding-right: 0em;
	padding-bottom: 0.38em; /*nodig voor linkwerking en juiste hoogte submenu icm negatieve margin bottom*/
	padding-left: 0.4em;/*was 0.25em nodig voor linkwerking*/
	margin-top: -0.4em;
	margin-right: 0em;
	margin-bottom: 0.5em;/*moet iets hoger zijn dan padding bottom, nodig voor linkwerking, maar veroorzaakt ook het streepje in de backgroundimage*/
	margin-left: -0.4em;
	font-size: 85%;
	text-decoration: none;
	font-family: "Copperplate Gothic Light", "trebuchet MS", "Lucida Sans", Arial;
	color: #B32317;
	}	

#navigatie li li a:hover {	color: #ffffff;	text-decoration:none;}
#navigatie li:hover ul ul {	left: -625em;}
#navigatie li:hover ul {left: 0em; /*was 0.4 voor uitlijnen submenu boven hoofdmenu, nu opgelost met padding left 0.4 bij #nav li li*/}

h1 {
	font-size: 100%;
	color: #ffffff;
	font-style: normal;
	font-weight: bold;
}
h1 a {/*de link heeft dezelfde kleur (en hover) als de h1. Omdat ze onafhankelijk van elkaar reageren geeft dat een mooi effect.*/
	color: #B32317;
	text-decoration: none;}
h1 a:visited {color: #B32317;}
h1 a:hover {color: #006600;}

h2 {/*op dit moment alleen in gebruik voor de rechtertekstkolom*/
	font-size: 120%;
	text-transform: none;
	color: #B32317;/*rood*/
	text-align: center;
	line-height: normal;

}
h2:hover {    color: #006600;}/*als je over de H2 heen gaat met de muis verandert de rode kleur in groen*/
h2 a {/*de link heeft dezelfde kleur (en hover) als de h2. Omdat ze onafhankelijk van elkaar reageren geeft dat een mooi effect.*/
	color: #B32317;
	text-decoration: none;}
h2 a:visited {color: #B32317;}
h2 a:hover {    color: #006600;}

p  {line-height: normal;
	font-style: normal;
	font-size: 90%}
p a {
	text-decoration: underline;
	color: #FFFFFF;
	font-size: 90%
}
ul {text-decoration: none;	color: #FFFFFF;	/*font-size: 90%;*/}
li {text-decoration: none;	font-size: 90%;}


li a {text-decoration: none; color: #ffffff;}
li a:link {color: #FFFFFF;	}
li a:visited {color: #FFFFFF;	}
li a:hover {color: #FFFFFF;	}
li a:active {color: #FFFFFF;	}


#rechts{/*in deze box zit de Mech-foto*/
	position: absolute;
	top: 10.062em;
	left: 49.3em;
	height: 30em;
	width: 12em;
	border: 0em;
	z-index: 10;
	margin: 0em;
	padding: 0em;}	
#mech {
	height: 26.06em;
	width: 13.1em;
	padding-top: 0em;
	padding-left: 0em;
	margin-top: 0em;
	margin-left: 0em;
}
#wit {/*rechterbox met witte letters*/
	position: absolute;
	top: 9.4375em;
	left: 48.8em;
	height: 30em;
	width: 11.5em;
	border: 0em;
	z-index: 10;
	/*background-image: url(images/1wittepixel.png);
	background-repeat: repeat;*/
	margin-top: 0.625em;
	margin-right: 0.75em;
	margin-bottom: 0.625em;
	margin-left: 0.75em;
	padding-top: 1em;
	padding-right: 0.75em;
	padding-bottom: 0.825em;
	padding-left: 0.59em;
}
#wit p {
	font-style: normal;
	color: #FFFFFF;
	font-size: 90%;}
	
#witplus{
position: absolute;
	top: 9.4375em;
	left: 48.52em;
	height: 30em;
	width: 11.76em;
	border: 0em;
	z-index: 10;
	background-image: url(../images/1zwartepixel.png);
	background-repeat: repeat;
	margin-top: 0.625em;
	margin-right: 0.75em;
	margin-bottom: 0.225em;
	margin-left: 0.75em;
	padding-top: 2em;
	padding-right: 0.69em;
	padding-bottom: 0.225em;
	padding-left: 0.69em;}

#scarlatti/*middenbox met witte letters op zwarte transparante achtergrond voor scarlatti*/ {
	position: absolute;
	top: 9.4375em;
	left: 22.7em;
	height: 21em;
	width: 13.7em;
	border: 0em;
	z-index: 10;
	background-image: url(../images/1zwartepixel.png);
	background-repeat: repeat;
	margin-top: 0.625em;
	margin-right: 0.1em;
	margin-bottom: 0.625em;
	margin-left: 0.4em;
	padding-top: 1em;
	padding-right: 0.1em;
	padding-bottom: 1.825em;
	padding-left: 0.3em;
}
#witplus p {
	font-style: normal;
	color: #FFFFFF;
	font-size: 90%;}
#zwart/*rechterbox met zwarte letters, witte transparante achtergrond, nog niet in gebruik*/ {
	position: absolute;
	top: 9.4375em;
	left: 48.5em;
	height: 30em;
	width: 12em;
	border: 0em;
	z-index: 10;
	background-image: url(../images/1wittepixel.png);
	background-repeat: repeat;
	margin-top: 0.625em;
	margin-right: 0.75em;
	margin-bottom: 0.625em;
	margin-left: 0.75em;
	padding-top: 2em;
	padding-right: 0.69em;
	padding-bottom: 0.825em;
	padding-left: 0.69em;
}
#zwart p {
	color: #000000;
	font-size: 90%;
}

#rood{/*rechterbox indexpagina*/
	position: absolute;
	top: 9em;
	left: 49em;
	height: 30em;
	width: 11.8em;
	border: 0em;
	z-index: 10;
	/*background-image: url(images/1wittepixel.png);
	background-repeat: repeat;*/
	margin-top: 0.26em;
	margin-right: 0em;
	margin-bottom: 0.65em;
	margin-left: 0em;
	padding-top: 1.4em;
	padding-right: 0em;
	padding-bottom: 0.825em;
	padding-left: 0.5em;
}

.wit {/*voor adresblokje*/
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-family: "Copperplate Gothic Light", "trebuchet MS", "Lucida Sans", Arial;
	color: #FFFFFF;
	text-align: justify;
	letter-spacing: 0.1em;
	line-height: 1.3em;
}

.zwart {/*voor adresblokje*/
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-family: "Copperplate Gothic Light", "trebuchet MS", "Lucida Sans", Arial;
	color: #000000;
	text-align: justify;
	letter-spacing: 0.1em;
	line-height: 1.3em;
}

.witregel {
	padding-top: 0.625em;
}
#copy {/*voor copyright regel op homepage*/
	color: #006600;
	vertical-align:bottom;
	text-align:right;
	padding: 0.15em 0 0 0;
	margin: 0;
	width: 100%;
	height: 1.25em;
	font-weight: normal;
	font-size: 70%;
}
/*hieronder alles voor contactformulier:*/
table {
	font-family: "Trebuchet MS", "Lucida Sans", Arial;/* overulet de font-type die mogelijk staat in de stylesheet van de browser */
    font-size: 100%; /* overulet de font-size die mogelijk staat in de stylesheet van de browser */
	width: 33em;  /* tabel schaalt mee met fontgrootte door gebruik vam em (maat hoofdletter M) */
	border: 0; /* altijd border ingeven: waarde 0 als je geen borders wenst. Overrulet border die mogelijk staat in stylesheet van browser. */
	border-collapse: collapse; /* voorkomt dubbele borders binnenin tabel. Altijd ingeven, ook als border op 0 staat tbv correcte weergave in sommige browsers. */
}
td {
	vertical-align: top;  /* tekst staat bovenin cel */
	padding: 0.2em; /* ruimte tussen inhoud van de kop-cel en de rand */
	border: 0; /* altijd border ingeven: waarde 0 als je geen borders wenst. Overrulet border die mogelijk staat in stylesheet van browser. */
}
.form input {
	font-size: 90%;
	font-family: "Trebuchet MS", "Lucida Sans", Arial;
	width: 22em;
	border: 1px solid #CCCCCC;
}
.form textarea {
	font-size: 90%;
	font-family: "Trebuchet MS", "Lucida Sans", Arial;
	width: 22em;
	border: 1px solid #CCCCCC;
	height: 6.3em;
}
.form input#verzenden, .form input#wissen {
	width: 6em;
}