@charset "ISO-8859-1";
/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
* {margin:0;padding:0;} 

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

body {
	background-image: url(../images/bg_body.jpg);
	background-position: center;
	background-repeat: repeat-y;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

h1 {
	font-size: 16px;
	font-weight: bold;
	color: #00509e;
	margin-bottom: 20px;
}

h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

p {
	margin-bottom: 8px;
}

/* -----------------------------------------  LINKS    -------------------------------------------- */

a:link, a:visited {
	text-decoration: underline;
	color: #00509e;
	font-weight: bold;
}

a:hover, a:active {
	text-decoration: underline;
	color: #7797c4; 
	font-weight: bold;
}

a.back:link, a.back:visited {
	display: block;
	float: left;
	width: 60px;
	text-decoration: none;
	text-align: right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 26px;
	padding-right: 10px;
	background: url(../images/arrow_blue_back.gif) no-repeat left bottom;
	background-color: #ECECEC;
	color: #333;
}
a.back:hover, a.back:active {
	display: block;
	float: left;
	width: 60px;
	text-decoration: none;
	text-align: right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 26px;
	padding-right: 10px;
	background: url(../images/arrow_blue_back.gif) no-repeat left bottom;
	background-color: #7797c4;
	color: #fff;
}

a.next:link, a.next:visited {
	display: block;
	float: right;
	width: 60px;
	text-decoration: none;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 26px;
	background: url(../images/arrow_blue_next.gif) no-repeat right bottom;
	background-color: #ECECEC;
	color: #333;
}
a.next:hover, a.next:active {
	display: block;
	float: right;
	width: 60px;
	text-decoration: none;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 26px;
	background: url(../images/arrow_blue_next.gif) no-repeat right bottom;
	background-color: #7797c4;
	color: #fff;
}



/* -----------------------------------------  CLASSES  -------------------------------------------- */

.clear { margin: 0;	padding: 0;	height: 1px; clear: both; display: block; overflow: hidden; }

.headertitel {
	display: block;
	float: left;
	width: 400px;
	padding-left: 172px;
	padding-top: 22px;
	font-size: 22px;
	font-weight: bold;
}

.blue {
	color: #00509e;
	/*color: #7797c4;*/
}

.headersubtitel {
	display: block;
	float: left;
	width: 700px;
	font-size: 11px;
	padding-left: 172px;
	color: #00509e;
}

.ctitel1 {
	color: #000;
	font-weight: bold;
}

.ctitel2 {
	color: #00509e;
}

.inputcontact {
	width: 180px;
	padding-left: 2px;
	padding-right: 2px;
	border: 1px solid  #7797c4; 
}

.textareacontact {
	width: 300px;
	padding: 2px;
	border: 1px solid  #7797c4; 
}

.buttoncontact {
	width: 120px;
	margin-left: 186px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #00509e;
	border: none;
	color: #fff;
	font-weight: bold;
	text-align:	left;
}

ul.supermac {
	padding-left: 40px;
}

ul.supermac li {
	list-style-image: url(../images/lisupermac.gif);
}

.backnext {
	width: 200px;
	float: right;
	padding-top: 50px;
}

.test {
	background-color: #00509e;
}

.tdpictitel {
	width: 144px;
	background-image: url(../images/borderrond.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 10px;
	padding-top: 4px;
	color: #fff;
	background-color: #00509e;
}

.tdpictitel img {
	display: block;
	float: left;
	padding-top: 3px;
	padding-left: 4px;
	padding-right: 4px;
}

.tdpictitel span {
	display: block;
	width: 114px;
	float: left;
	border-bottom: 1px solid #fff;
}

.tdwit {
	background-color: #FFF;
}

/* -----------------------------------------  DIVS     -------------------------------------------- */

#main {
	min-height: 400px;
	background-image: url(../images/header.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	padding-bottom: 74px; /* must be same height as the footer */
}

#header {
	width: 970px;
	margin: 0 auto;
	height: 216px;
}

#talen {
	width: 60px;
	height: 60px;
	float: right;
}

#inhoud {
	width: 970px;
	margin: 0 auto;
}

#inhoudrechts {
	min-height: 400px;
	width: 766px;
	float: right;
	padding-left: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
}

#fotolinks {
	width: 190px;
	float: left;
	padding-bottom: 20px;
}

#fotolinks img {
	padding-bottom: 10px;
}

#contactlinks {
	width: 178px;
	float: left;
	padding: 10px;
	border: 1px solid #00509e;
	font-size: 11px;
}

#tekst {
	width: 510px;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

#footer {
	position: relative;
	margin-top: -74px; /* negative value of footer height */
	height: 74px;
	clear:both;
} 

#footertext {
	width: 960px;
	margin: 0 auto;
	text-align: center;
	font-size: 9px;
	padding-top: 20px;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* --------------------- scroller ----------------------------- */

#scrollerwrap {
	position: relative;
	height: 70px;
	width: 715px;
	overflow: hidden;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #00509e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #00509e;
	float: left;
}
#scroller {position: relative; height: 70px; width:750px;}
#scroller img {
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
	float: left;
	clear: none;
	border: none;
}

/* -----------------------------------------  MENU     -------------------------------------------- */

#menu {
	position:relative;
	width: 200px;
	float: left;
	margin-left: 50px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	text-align: left;
	padding: 1px 1px 0 1px;
}

#menu li {
	margin:0;
	padding:0;
	list-style:none;
}
#menu li {display:inline;}
#menu ul ul {
	position:absolute;
	left:-9999px;
}
#menu ul#toplevel {
	position:absolute; 
	left:0; 
	top:0;
}

#menu a {
	display: block;
	font: normal 11px verdana,arial,sans-serif;
	color: #000;
	line-height: 22px;
	text-decoration: none;
	padding: 0 30px 0 10px;
	background-color: #ECECEC;
	margin-bottom: 0px;
	border-bottom: 2px solid #fff;
} 
#menu li a.level1 {
	background: url(../images/arrow_blue.gif) no-repeat right bottom;
	background-color: #ECECEC;
}

#menu li a:hover {
	background-color: #7797c4; 
	color: #fff;
} 
#menu li:hover > a {
	background-color: #7797c4; 
	color: #fff;
}

#menu ul li:hover > ul {
	left: 100%;
	margin-top: -23px;
	margin-left: -1px;
}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}

/* ---------------------- interlinie webdesign ----------------------------*/

#interlinie {
	margin: 0 auto;
	width: 970px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 9px;
	font-family:Arial, Helvetica, sans-serif;
}

.interlinie {
	color: #333;
}

a.interlinie:link, a.interlinie:visited {
	text-decoration: none;
	font-weight: normal;
	color: #00509e;
	font-size: 9px;
}
a.interlinie:hover, a.interlinie:active {
	text-decoration: none;
	color: #7797c4; 
	font-size: 9px;
}