* { /*Globale reset*/
padding: 0;
margin: 0;
}
body, html {
color: #555555;
font-family: Verdana, Arial, Tahoma, sans-serif;
background: url(grafix/bg_body.jpg) #EDEDED repeat-x;
height: 100%;
text-align: left;
}
body {
font-size: 11px;
line-height: 14px;
text-align: left;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 10px;
}
h1 {
font-size: 14px;
color: #268CE7;
}
.kop {
font-size: 14px;
color: #268CE7;
font-weight: bold;
}
h2 {
font-size: 12px;
color: #353535;
padding-bottom: 10px;
}
td {
font-size: 11px;
line-height: 14px;
}
p {
margin:0;
padding:0;
}
.clear {
clear: both; /*** Clearfix ***/
}
#body { /*** Deze DIV word om het geheel geplaats en dient als een body. Dit is een fix om te voorkomen dat de tekst gecentreerd uitlijnd in het beheer ***/
width: 100%;
text-align: center; /*** Alles word gecentreerd uitgelijnd. Dit is voor het centeren van de Container in IE ***/
min-height: 100%;
height: 100%;

}
#container {
width: 886px;
margin: 0 auto; /*** Hierdoor word deze DIV altijd gecentreerd op het scherm ***/
min-height: 100%;
background:#FFF;
text-align: left; /*** Omdat  in de #body DIV alles gecentreerd word overrulen we dit weer door de text links uit te lijnen in deze container ***/
}
* html #container {
height: 100%;  /*** IE support geen min-height in de plaats daarvoor gebruikt het height als min-height ***/
text-align: left; /*** Omdat  in de #body DIV alles gecentreerd word overrulen we dit weer door de text links uit te lijnen in deze container ***/
}

.tabel
{	background-color: #CDCDCD;
	    cellspacing: 2px;
		 border: 1px;
		margin-left: 0px;
	//margin-right: auto;
 }

.td	{   background-color: #FFFFFF;  text-align: center; }
.tdleft	{   background-color: #FFFFFF;  text-align: left; }
.tdkop	{   background-color: #1F89DF;  text-align: center;  font-weight: bold;  color:  #FFFFFF;   }
.tdkop2	{   background-color: #1F89DF;  text-align: center;  font-style: italic;  color:  #FFFFFF; }

.tabel ul {
margin: 5px 0 5px 5px;
list-style:none;
}

.tabel li {
height:18px;
padding-left:4px;
line-height:18px;
background:url(grafix/bullet.gif) left no-repeat;
}




/*-------------------- Navigatie ----------------------------------------

#siteNavigation {
height: 30px;
}
#siteNavigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#siteNavigation li {
float: left;
list-style: none;
background: url(grafix/navi_knop.jpg) repeat-x;
margin: 0;
padding: 0;
}
#siteNavigation li a:link, #siteNavigation li a:visited, #siteNavigation li a:active {
height: 30px;
line-height: 30px;
background: url(grafix/navi_knop.jpg) repeat-x;
border-right:1px solid #FFF;
display: block;
color: #555555;
text-decoration: none;
font-size: 10px;
width:90px;
text-align:center;
}
#siteNavigation li a:hover {
background: url(grafix/navi_knop_hover.jpg) repeat-x;
}*/

div#siteNavigation {
z-index:100 !important;
height:30px;
}
ul#hoofdmenu {
position:relative;
height:30px;
list-style: none;
z-index: 100;
}
ul#hoofdmenu li {
float:left;
background: url(grafix/navi_knop.jpg) repeat-x;

height: 30px;
line-height: 30px;
width:90px
}
ul#hoofdmenu li a {
display:block;
line-height:30px;
height:30px;
text-decoration: none;
text-align:center;
color: #555555;
font-size:10px;
}
ul#hoofdmenu li a.active {
background: url(grafix/navi_knop_hover.jpg) repeat-x;
}
ul#hoofdmenu li a:hover {
background: url(grafix/navi_knop_hover.jpg) repeat-x;
}
/*------------ Niveau 2------------------------------------------------*/
div#siteNavigation ul#hoofdmenu li ul.submenu {
width:120px !important;
position:absolute;
display:none;

top:30px;
list-style: none;
}
div#siteNavigation ul#hoofdmenu li ul.submenu li {
border-left:none;
width:120px;
background: url(grafix/navi_knop.jpg) repeat-x;
height:20px !important;
position:relative;
}
div#siteNavigation ul#hoofdmenu li ul.submenu li a {

text-align:center;
display:block;
color: #555555;
text-decoration: none;
width:100% !important;
font-size:10px !important;
line-height:20px;
height:20px;
}
div#siteNavigation ul#hoofdmenu li ul.submenu li a:hover {
background: url(grafix/navi_knop_hover.jpg) repeat-x;
height: 20px;
}
div#siteNavigation ul#hoofdmenu li:hover ul.submenu {
z-index:100 !important;
display:block;
}

/*------------ Niveau 3------------------------------------------------*/
div#siteNavigation ul#hoofdmenu li ul.submenu li ul.submenu2 {
width:120px !important;
position:absolute;
display:none;
left:120px;
top:0;
list-style: none;
}
div#siteNavigation ul#hoofdmenu li ul.submenu li ul.submenu2 li {
border-left:none;
width:120px;
background: url(grafix/navi_knop.jpg) repeat-x;
height:20px;

}
div#siteNavigation ul#hoofdmenu li ul.submenu li ul.submenu2 li a {
position:relative;
text-align:center;
display:block;
color: #555555;
text-decoration: none;
width:100% !important;
font-size:10px !important;
line-height:20px;
height:20px;
}
div#siteNavigation ul#hoofdmenu li ul.submenu li ul.submenu2 li a:hover {
background: url(grafix/navi_knop_hover.jpg) repeat-x;
height:20px;
}
div#siteNavigation ul#hoofdmenu li:hover ul.submenu li:hover ul.submenu2 {
z-index:100 !important;
display:block;
}

/*-------------------- Header, kruimelspoor en talen ----------------------------------------*/

#header {
background: url(grafix/bg_head.jpg) no-repeat #FFF;
height: 206px;
}
#logo {
height: 147px;
}
#topbalk {
height: 29px;
line-height:29px;
}
#kruimelspoor {
float: left;
background: url(grafix/icon_kruimelhuis.gif) no-repeat ;
color: #8A8A8A;
font-size: 10px;
padding-left:30px;
height: 29px;
line-height:29px;
border-left:1px solid #FFF;
}
#kruimelspoor a:link, #kruimelspoor a:active, #kruimelspoor a:visited {
color: #555555;
text-decoration: underline;
}
#kruimelspoor a:hover {
text-decoration: none;
}
#talen {
float: left;
width: 128px;
height:29px;
line-height:29px;
padding-left:5px;
padding-top:2px;
}
#flagbuild ul {
list-style: none;
padding: 0;
margin: 0;
}
#flagbuild li {
float: left;
list-style: none;
padding: 0;
margin-left:3px;
}
#flagbuild li img {
border:0;
}
#flagbuild li a:link, #flagbuild li a:visited, #flagbuild li a:active  {
background:url(grafix/bg_flag.jpg) repeat-x;
height: 24px;
line-height: 24px;
width: 24px;
display: block;
color: #0d2474;
text-align: center;
}
#flagbuild li a:hover {
background:url(grafix/bg_flag_hover.jpg) repeat-x;
}

/*-------------------- Content en Column ----------------------------------------*/

#content {
width: 587px;
padding-top:10px;
}
#content p {
padding-bottom: 14px;
}
#content a:link, #content a:active, #content a:visited {
color: #555555;
text-decoration: underline;
}
#content a:hover {
text-decoration: none;
}
.outer {
padding-right: 125px;
}
* html .outer {
padding-left: 100px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */
padding-bottom:45px;
}
.inner {
width: 760px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
.main {
float: right;
width: 600px;
margin-right: -130px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .main {
text-align: left;
}
* html #content {
position: relative;  /*** IE needs this  ***/
text-align: left;
}

/*-------------------- Left Column ----------------------------------------*/

#left {
float: left;
width: 280px;
padding-top:10px;
}
* html #left {
position: relative;  /*** IE needs this  ***/
margin-left: -100px; /*** IE gets this margin. ***/
}

/*-------------------- Box Build ----------------------------------------*/

.box {
width:262px;
background: url(grafix/bg_box.jpg) repeat-x #CFD0CF;
border:1px solid #CFD0CF;
margin-bottom:10px;
font-size:10px;
margin-left:10px;
padding:4px;
}
.box_link {
background: url(grafix/bg_box_link.jpg) repeat-x;
height:18px;
display:block;
width:88px;
line-height:18px;
border:1px solid #0272BC;
text-align:center;
}
.box a:link, .box a:active, .box a:visited {
color: #ffffff;
text-decoration: underline;
}
.box a:hover {
text-decoration: none;
}
.box h1 {
color:#555;
padding:0 0 4px 0;
font-size: 13px;
}
.box ul {
margin:10px 0 10px 0;
list-style:none;
}
.box li {
height:20px;
padding-left:12px;
line-height:20px;
background:url(grafix/bullet.gif) left no-repeat;
}
/*-------------------- Footer ----------------------------------------*/

#footer {
width: 886px;
height: 43px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
margin: 0 auto;
bottom:0;
margin-top: -43px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
line-height: 18px;
clear: both;
background:url(grafix/bg_footer.jpg) repeat-x;
color: #FFF;
}
#footer a:link, #footer a:active, #footer a:hover, #footer a:visited {
color: #FFF;
font-weight: normal;
font-size: 11px;
text-decoration: underline;
}

/*-------------------- Sitemap ----------------------------------------*/
.sitemap {
margin-bottom: 20px;
line-height: 20px;
}
.sitemapmain {
font-weight: bold;
color:#1B2D5F;
text-decoration: none;
}
.sitemap li {
background: url(grafix/li.gif) no-repeat;
list-style: none;
padding-left: 20px;
}
.sitemap li li li {
background: url(grafix/lili.gif) no-repeat;
list-style: none;
padding-left: 20px;
}
/*-------------------- ContactForm ----------------------------------------*/

.form {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 11px;
}
.knop {
background: url(grafix/bg_box_link.jpg) repeat-x;
width: 80px;
height: 18px;
line-height:20px;
border:1px solid #0272BC;
color:#FFF;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size:10px;
cursor: pointer;
border: 0;
}
.input {
border: 1px solid #D9D9D9;
background: #F8F8F8;
width: 200px;
}

/*----------------UPDATE OFFERTE EN CONTACT--------------------*/
.contactBalk	{
	background-color:#268CE7;
	color:#FFFFFF;
	font-weight:bold;
	height:19px;
	padding-left:12px;
	padding-top:3px;
	width:573px;
}

.contactBalkSlide	{
	background-color:#268CE7;
	color:#FFFFFF;
	font-weight:bold;
	height:19px;
	padding-left:12px;
	padding-top:3px;
	width:573px;
	cursor: pointer;
	text-decoration: underline;
}

.contactBalkSlide img	{
	border:medium none;
	float:left;
	height:16px;
	padding-right:10px;
	padding-top:0;
}

.contactTable	{
	margin-top: 10px;
}

.contactTable td 	{
	width: 220px;
}

.formFooter	{
	border-top:1px solid #268CE7;
	margin-bottom:30px;
	padding-top:9px;
	width:573px;
}

.formFooter .sendButton	{
	background-color:orange;
	border:1px solid orange;
	color:#FFFFFF;
	border-collapse: collapse;
	display:block;
	height:20px;
	line-height:20px;
	margin-left:251px;
	text-align:center;
	width:88px;
}

.slideContent	{
	display: none;
}

.contactButton	{
	width:176px;
	background-color:orange;
	height:22px;
	text-align: center;
	color:#ffffff;
	font-weight: bold;
	padding-top: 4px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.contactButton a:link a:visited	{
	color:#ffffff !important;
	text-decoration: none !important;
}

.contactButton a:hover	{
	color:#ffffff !important;
	text-decoration: underline !important;
}