/*
 * Reset styles
 */
* {
	padding: 0;
	margin: 0;
}

html {
	overflow-y: scroll;
}

img {
    vertical-align: bottom;
    border: 0;
}


blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: none;
    }

/*
 * Default styles
 */
body {
	font: 75%/1.5em Arial, Helvetica, sans-serif;
	color: #a8a8a8;
	background: #470046;
}

p,
ul,
ol,
dl {
    margin-bottom: 1.5em;
}

p + ul {
    margin-top: -1.5em;
}

ul,
ol {
    padding-left: 1.5em;
}

    ul ul,
    ol ol,
    ul ol,
    ol ul {
        margin-bottom: 0;
    }

dl {
	overflow: hidden;
	width: 100%;
}

	dl dt {
		float: left;
		clear: both;
		width: 25%;
	}
	
	dl dd {
		float: right;
		width: 74.9%;
	}

a {
	color: #a8a8a8;
	text-decoration: underline;
}

h1,
h2 {
	font: normal 2.4em/1em Arial, Helvetica, sans-serif;
	color: #cbcbcb;
	margin: 0 0 1em;
}

h2 {
	font-size: 1.5em;
}

/*
 * Header
 */
#header {
	background: url(../images/background.png) no-repeat 50% 0;
	width: 990px;
	padding-top: 21px;
	margin: 0 auto;
}

	#header .logo {
		display: block;
		width: 144px;
		margin: 0 auto;
	}

/*
 * Navigation
 */
#navigation {
	list-style: none;
	background: url(../images/navigation.png) no-repeat;
	overflow: hidden;
	width: 350px;
	height: 38px;
	padding: 0 181px;
	margin: 20px auto 0;
}

	#navigation li {
		float: left;
		height: 100%;
	}
	
		#navigation li.sfeer { width: 70px; }
		#navigation li.meer { width: 70px; }
		#navigation li.nog-meer { width: 110px; }
		#navigation li.contact { width: 100px; }
	
		#navigation li a {
			display: block;
			position: relative;
			text-indent: -999em;
			width: 100%;
			height: 100%;
		}
		
			#navigation li a span {
				position: absolute;
				top: 0;
				left: 0;
				cursor: pointer;
				width: 100%;
				height: 100%;
			}
		
			#navigation li a:hover,
			#navigation li a.active,
			#navigation li a span {
				background: url(../images/navigation.png) no-repeat;
			}
			
			#navigation li.sfeer a:hover,
			#navigation li.sfeer a.active,
			#navigation li.sfeer a span { background-position: -181px -38px; }
			#navigation li.meer a:hover,
			#navigation li.meer a.active,
			#navigation li.meer a span { background-position: -251px -38px; }
			#navigation li.nog-meer a:hover,
			#navigation li.nog-meer a.active,
			#navigation li.nog-meer a span { background-position: -321px -38px; }
			#navigation li.contact a:hover,
			#navigation li.contact a.active,
			#navigation li.contact a span { background-position: -431px -38px; }

	/* Subnavigation */
	#subnavigation {
		position: absolute;
		top: 150px;
		left: 0;
		right: 0;
		z-index: 10;
		background: url(../images/subnavigation.png) repeat-x;
		min-width: 990px;
		height: 28px;
	}

		/* Subnavigation: meer */
		.meer #subnavigation ul {
			list-style: none;
			background: url(../images/subnavigation-meer.png) no-repeat;
			overflow: hidden;
			width: 714px;
			height: 100%;
			padding: 0;
			margin: 0 auto;
		}
		
			.meer #subnavigation li.meer-kwaliteit { width: 150px; }
			.meer #subnavigation li.meer-mogelijkheden { width: 195px; }
			.meer #subnavigation li.meer-service { width: 135px; }
			.meer #subnavigation li.meer-waar-voor-uw-geld { width: 234px; }
			
				.meer #subnavigation li a:hover,
				.meer #subnavigation li a.active,
				.meer #subnavigation li a span {
					background: url(../images/subnavigation-meer.png) no-repeat;
				}
				
					.meer #subnavigation li.meer-kwaliteit a:hover,
					.meer #subnavigation li.meer-kwaliteit a.active,
					.meer #subnavigation li.meer-kwaliteit a span { background-position: 0 -28px; }
					.meer #subnavigation li.meer-mogelijkheden a:hover,
					.meer #subnavigation li.meer-mogelijkheden a.active,
					.meer #subnavigation li.meer-mogelijkheden a span { background-position: -150px -28px; }
					.meer #subnavigation li.meer-service a:hover,
					.meer #subnavigation li.meer-service a.active,
					.meer #subnavigation li.meer-service a span { background-position: -345px -28px; }
					.meer #subnavigation li.meer-waar-voor-uw-geld a:hover,
					.meer #subnavigation li.meer-waar-voor-uw-geld a.active,
					.meer #subnavigation li.meer-waar-voor-uw-geld a span { background-position: -480px -28px; }

/*
 * Container
 */
#container {
	background: #fff no-repeat 50% 0;
	min-width: 990px;
}

	/* Content */
	#content {
		position: relative;
		width: 990px;
		height: 400px;
		margin: 0 auto;
	}
	
		#content h1,
		#content h2 {
			visibility: hidden;
		}
		
		#content img {
			border: 1px solid #e8e8e8;
		}

/*
 * Footer
 */
#footer {
	font-size: 0.8em;
	text-align: center;
	color: #6d336c;
	background: url(../images/background.png) no-repeat 50% -150px;
	min-width: 990px;
	padding: 104px 0 50px;
}

	#footer a {
		color: #6d336c;
		text-decoration: none;
	}
	
		#footer a:hover {
			text-decoration: underline;
		}
		
	#footer ul {
		display: inline;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
		#footer ul li {
			display: inline;
		}
		
		#footer ul li:before {
			content: '|';
			color: #5d1a5c;
			padding: 0 0.5em 0 0.3em;
		}
		
			#footer ul li:first-child:before {
				content: '';
				padding: 0;
			}
			
/* Tip */
#content #tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.tip {
	position: absolute;
	z-index: 8;
	cursor: default;
	color: #525252;
	width: 298px;
}
	
	.tip .tip-top {
		background: url(../images/tip.png) no-repeat;
		padding: 9px 0 0;
	}
	
	.tip .tip-content {
		background: url(../images/tip.png) no-repeat 0 100%;
		padding: 0 18px 18px;
	}
	
		.tip .tip-text {
			font-style: italic;
		}