/* --- helper classes --- */

.offScreen { position: absolute; left: -9999px; text-indent: -9999px; line-height: 0; }

/* --- overLabel --- */	

.jsOverLabelBlur { position: relative; }
	.jsOverLabel { position: absolute; left: -9999px; top: 0; white-space: nowrap /* needed for safari */; overflow: hidden; cursor: default; }
	.jsOverLabelBlur .jsOverLabel { left: 1px; z-index: 1; }
		.jsOverLabelBlur .jsOverLabel span { display: none; }
		

body, p, td, h1, h2, h3, h4, h5, h6, a {
	color: #332c28;
}

p {
	margin-bottom: 1.5em;
}		
		
a:hover, a:focus, a:active {
	color: #837;
}

/* Pijltje voor een web- of e-maillink, bij gastenboek e.d. */
a:link.verderLink , a:visited.verderLink {
	background-image: url(/images/old/ic_verder_blog.gif);
}

a:hover.verderLink, a:focus.verderLink, a:active.verderLink {
	background-image: url(/images/old/ic_verder_blog_a.gif);
}


/* --- layout --- */

div#achter{
	width: 824px;
}

div#container{
	background-image: url(/images/old/achter_container_blog.gif);
}

div#containerTop{
	background-image: url(/images/old/achter_containertop_blog.gif);
}

div#siteContent{
	width: 792px;
	padding-top: 0;
	background: url(/images/old/achter_sitecontent_blog_1.jpg) transparent no-repeat center top;
}

div#siteContent.foto1 { background-image: url(/images/old/achter_sitecontent_blog_1.jpg); }
div#siteContent.foto2 { background-image: url(/images/old/achter_sitecontent_blog_2.jpg); }
div#siteContent.foto3 { background-image: url(/images/old/achter_sitecontent_blog_3.jpg); }
div#siteContent.foto4 { background-image: url(/images/old/achter_sitecontent_blog_4.jpg); }
div#siteContent.foto5 { background-image: url(/images/old/achter_sitecontent_blog_5.jpg); }
div#siteContent.foto6 { background-image: url(/images/old/achter_sitecontent_blog_6.jpg); }
div#siteContent.foto7 { background-image: url(/images/old/achter_sitecontent_blog_7.jpg); }
div#siteContent.foto8 { background-image: url(/images/old/achter_sitecontent_blog_8.jpg); }

	#siteLogo {
		float: left;
		clear: both;
		width: 400px;
		margin: 6px 0 3px 37px;
		padding: 0;
	}

		#siteLogo a {
			display: block;
			float: left;
			clear: both;
			height: 43px;
			margin: 0;
			padding: 17px 0 0;
			background: url(/images/old/ic_home_blog.png) transparent no-repeat 126px 0;
			outline-style: none;
		}

		#siteLogo a:hover, #siteLogo a:focus, #siteLogo a:active {
			background-position: -474px 0;
		}
		
			#siteLogo img {
				display: block;
				margin: 0;
				padding: 0;
				border-style: none;
			}
			
	#blogName, #blogName span, #blogName a {
		position: relative;
		display: block;
		float: left;
		clear: both;
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1.2em;
		color: #883377;
		text-decoration: none;
		margin: 0 177px 0 37px;
		background: url(/images/old/achter_tag_blog.png) transparent no-repeat 0 0;
		outline-style: none;
	}
	
	#blogName a:hover, #blogName a:focus, #blogName a:active {
		text-decoration: underline;
	}
	
		#blogName span, #blogName a {
			left: 25px;
			width: 193px;
			height: 91px;
			margin: 0;
			padding: 29px 45px 0 2px;
			overflow: hidden;
			background-position: 100% 0;
		}
		
		html>body #blogName span, html>body #blogName a {
			width: auto;
			min-width: 193px;
			max-width: 291px;
		}

/* --- inhoud --- */

div#inhoud {
	width: 516px;
	margin-top: 15px;
	padding-left: 18px;
	padding-right: 18px;
}

	
	/* --- blogArticle / blogAuthor --- */
	
	.blogArticle, .blogAuthor, .blogReactie {
		float: left;
		clear: both;
		width: 482px;
		height: 72px;
		padding: 20px 17px 21px;
		background: url(/images/old/achter_article_blog.png) transparent no-repeat left top;
	}

			.blogReactie{
				background: url(/images/old/achter_reactie_blog.png) transparent no-repeat left top;
			}
	
	html>body .blogArticle, html>body .blogAuthor, html>body .blogReactie {
		height: auto;
		min-height: 72px;
	}
	
		.blogArticle h2, .blogAuthor h2 , .blogReactie h2 {
			font-size: 1.65em;
			color: #837;
			margin: 0 0 3px;
			padding: 0;
		}
	
			.blogArticle h2 a {
				text-decoration: none;
				color: #837;
			}
	
			.blogArticle h2 a:hover, .blogArticle h2 a:focus, .blogArticle h2 a:active {
				text-decoration: underline;
			}
			
		.blogAuthor p.imgLeft, .blogAuthor p.imgRight {
			margin-top: 1.5em;
		}
		
		.blogAuthor p.imgLeft, .blogArticle p.imgLeft {
			float: left;
			clear: none;
			padding: 2px 10px 0 0;
		}
			
		.blogAuthor p.imgRight, .blogArticle p.imgRight {
			float: right;
			clear: none;
			padding: 2px 0 0 10px;
		}
		
			.blogAuthor p.imgLeft img, .blogAuthor p.imgRight img {
				display: block;
			}
			
		.blogAuthor dl {
			clear: left;
			margin: 1.5em 0 0;
			padding: 0;
		}
	
		.blogArticle h3, .blogAuthor dt {
			/*float: left;
			clear: left;*/
			font-size: 1.1em;
			color: #837;
			margin: 0 0 3px;
			padding: 0;
			background-image: none;
		}
		
		.blogAuthor dd {
			/*float: left;
			clear: left;*/
			margin: 0 0 1.5em;
		}
		
		.blogArticle .intro {
			margin-top: -0.7em;
		}

		.blogArticle .date, .blogArticle .postInfo, .blogArticle .more, .blogReactie .postInfo{
			color: #837;
			text-decoration: none;
			margin-bottom: 1.5em;
		}
		.blogReactie .postInfo{color:#936; margin-bottom: 0.3em;}
			
		.blogArticle .posted {
			margin-top: 18px;
		}
			
			.blogArticle .posted a, .blogArticle .postInfo a {
				color: #837;
				text-decoration: none;
			}
			
			.blogArticle .posted a:hover, .blogArticle .posted a:focus, .blogArticle .posted a:active,
			.blogArticle .postInfo a:hover, .blogArticle .postInfo a:focus, .blogArticle .postInfo a:active{
				text-decoration: underline;
			}
		
		.blogArticle p {
			margin-bottom: 0;
		}	

/* ~~~~~~~~~ Sidebar ~~~~~~~~~ */

#sidebar {
	position: relative;
	float: right;
	width: 240px;
	height: 580px;
	margin-top: 15px;
	background: url(/images/old/achter_submenu_blog.gif) repeat-x left top;
}

html>body #sidebar {
	height: auto;
	min-height: 580px;
}

/* --- blogNav --- */

#blogNav {
	width: 240px;
	background-color: #d6b4cf;
}
	
	#blogNav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

		#blogNav li {
			margin: 0;
			padding: 0 0 5px;
			border-bottom: 1px solid #c28fb8;
		}
		
			#blogNav h3 {
				font-size: 1.2em;
				font-weight: bold;
				color: #837;
				background-image: none;
				margin-top: 7px;
				padding-left: 24px;
				padding-right: 24px;
			}
		
			#blogNav p {
				margin-bottom: 0;
			}
			
			#blogNav p.noCategories {
				color: #000;
				margin: 0 24px;
				padding: 0 0 5px;
			}
			
			#blogNav li a {
				display: block;
				color: #000;
				text-decoration: none;
				margin: 0 24px;
				padding: 3px 3px 3px 11px;
				background:url(/images/old/achter_submenu_li_bvn.gif) no-repeat -13px 0;
			}
			
			#blogNav .selected a {
				font-weight: bold;
				color: #837;
			}
			
			#blogNav li a:hover, #blogNav li a:focus, #blogNav li a:active {
				text-decoration: underline;
			}
			
			#blogNav li li {
				padding-bottom: 0;
				border-style: none;
			}
	
		#blogNav li.form {
			padding-bottom: 0;
			border-bottom-color: #e0c7db;
		}
		
			#blogNav form {
				float: left;
				clear: both;
				padding: 6px 0 6px 24px;
				background-color: #948;
			}
			
				#blogNav form div {
					float: left;
					clear: both;
					width: 216px;
				}
			
					#blogNav form label {
						display: block;
						font-size: 1.2em;
						font-weight: bold;
						color: #fff;
						width: auto;
						margin-bottom: 3px;
					}
				
					#blogNav form .jsOverLabelBlur label.jsOverLabel {
						left: 4px;
						top: 1px;
						font-size: 1.0em;
						font-weight: normal;
						color: #555;
						white-space: nowrap;
						width: 145px;
					}
				
					#blogNav form input#zkr_words,
					#blogNav form input#siteSearchTerms {
						display: block;
						float: left;
						font-size: 1.0em;
						width: 139px;
						margin: 0 6px 0 0;
						padding: 1px 2px 2px;
						border: 2px solid #848484;
						border-top-color: #fff;
						border-left-color: #fff;
					}
					* html #blogNav form input#zkr_words,
					* html #blogNav form input#siteSearchTerms {
						margin-right: 6px;
					}
					
					#blogNav form input.zoekButton{
						display: block;
						float: left;
						font-size: 1.0em;
						color: #837;
						margin: 0;
						padding: 0 1px 1px;
						background-image: none;
						background-color: #f0f0f0;
						border: 2px solid #848484;
						border-top-color: #fff;
						border-left-color: #fff;
					}
				
	/* --- letterGrootte --- */
	
	div#letterGrootte {
		position: absolute;
		top: -29px;
		padding-top: 0;
	}


/* ~~~~~~~~~ De footer ~~~~~~~~~ */

div#footer, div#footerInner{
	background-image: url(/images/old/achter_footer_blog.gif);
}

	div#footerInner {
		float: left;
		background-image: none;
	}