/* Globals */
* {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
}
	
body {
	width: 980px;
	margin: 6px auto 12px;
	font: normal 75% Verdana, sans-serif;
	background: white;
}

pre {
	white-space: pre-wrap;
}

hr {
	display: none; /* Just used for CSS-less separation of data */ 
}

p {
	margin-bottom: 1.42em;
	line-height: 1.33em;
}



/* Layout */

#header {
	margin-bottom: 16px;
}

	#quicknav {
		overflow: auto;
		margin-bottom: 13px;
		font-size: 1.1em;
		color: black;
	}
		#quicknav a,
		#quicknav span {
			font-weight: bold;
			color: #8C2277;
			text-decoration: none;
		}
			#quicknav a:hover {
				text-decoration: underline;
				color: #c70b00;
			}
			#quicknav span {
				color: #1c72d2;
			}
			

		#home {
			float: left;
		}
			#home a,
			#home span {
				margin: 0 17px;
			}
			#home a:first-child,
			#home span:first-child {
				margin-left: 10px;
			}

		#login {
			float: right;
		}

	#title {
		clear: both;
		border-top: 2px dotted #7f7f7f;
		border-bottom: 2px dotted #7f7f7f;
		padding: 7px 0 5px 0;
		background: url(/images/mocca_header.jpg) no-repeat 0 7px;
	}
		#title a img {
			padding-left: 255px;
			border: 0;
		}



#body {
	margin-bottom: 32px;
}


#footer {
	clear: both;
	width: 100%;
	overflow: auto;
	border-top: 2px dotted #7f7f7f;
	padding-top: 12px;
	font-size: 0.92em;
	color: #909090;
}
	#footer a {
		text-decoration: none;
		color: #909090;
	}
		#footer a:hover {
			text-decoration: underline;
			color: #c70b00;
		}

	#footer span {
		float: left;
	}
	#footer span#contact {
		float: right;
		text-align: right;
	}



/* Site navigation */

#sitenav {
	float: left;
	width: 230px;
	margin: 0 20px 32px 0;
	font-size: 0.92em;
}

	#sitenav h3,
	#sitenav h3 a {
		display: block;
		width: 230px;
		height: 28px;
	}
		#sitenav h3 span {
			display: none;
		}

	#sitenav #cultuureducatie h3,
	#sitenav #cultuureducatie h3 a {
		background-image: url(/images/menu/cultuureducatie.gif);
	}
	#sitenav #over-mocca h3,
	#sitenav #over-mocca h3 a {
		background-image: url(/images/menu/over-mocca.gif);
	}
	#sitenav #bijeenkomsten h3,
	#sitenav #bijeenkomsten h3 a {
		background-image: url(/images/menu/bijeenkomsten.gif);
	}
	#sitenav #voor-scholen h3,
	#sitenav #voor-scholen h3 a {
		background-image: url(/images/menu/zoeken-aanbod.gif);
	}
	#sitenav #voor-aanbieders h3,
	#sitenav #voor-aanbieders h3 a {
		background-image: url(/images/menu/aanmelden.gif);
	}
	
	#sitenav #voor-aanbieders ul {
		border-bottom: 1px solid #FF8B35;
	}
	
	#sitenav li {
		width: 230px;
		overflow: hidden;
		list-style: none;
	}
		#sitenav li a,
		#sitenav li span {
			display: block;
			border-top: 1px solid white;
			padding: 7px 10px 8px 19px;
			text-decoration: none;
		}
		
		#sitenav li a.selected,
		#sitenav li span {
			background-color: white;
			color: black;
		}

	#sitenav li li a,
	#sitenav li li span {
		padding-left: 32px;
	}
					


/* Content */

#content {
	display: table;
	min-width: 480px;
	max-width: 730px;
}
	#content.external {
		margin: 0 auto;
	}

#content h1 {
	clear: both;
	min-width: 457px;
	margin-bottom: 20px; /* see {#content h1 + div.intro} */
	padding: 4px 10px 6px 13px;
	font-size: 1.25em;
	font-weight: normal;
	background-color: #c70b00;
	color: white;
}
	#content * + h1 {
		margin-top: 10px;
	}

	#content h1 + div.intro {
		margin: -20px 0 20px; /* see {#content h1} */
		padding: 10px 10px 10px 13px;
		background-color: #ef534a;
		color: white;
	}
		#content div.intro p:last-child {
			margin-bottom: 0;
		}

#content h2 {
	margin: 32px 0 4px 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.42em;
	color: #c70b00;
}
	#content h2 + span.date {
		display: block;
		margin-bottom: 1em;
		font-size: 0.92em;
		color: #76b7e8;
	}

#content li {
	line-height: 1.33em;
}
	#content ul li {
		list-style: square;
		margin-left: 13px;
	}
	#content ol li {
		margin-left: 20px;
	}

#content img {
	float: right;
	margin: 0 0 20px 20px;
}
	#content h2 + img {
		margin-top: 32px;
	}

#content a:link {
	text-decoration: none;
	color: #1c72d2;
}
	#content a:visited {
		text-decoration: none;
		color: #005ba1;
	}
	#content a:hover {
		text-decoration: underline;
		color: #c70b00;
	}



/* Button-style links */

#content a.button {
	display: -moz-inline-box;
	display: inline-block;
	margin-bottom: 32px;
	padding: 4px 13px;
	text-decoration: none;
	background-color: #aeadad;
	color: white;
}

#content .item a.button  { 
	margin-bottom: 4px;
}

#content a.button:hover {
	text-decoration: none;
	background-color: #ac130a;
	color: white;
}


/* Rating stars / bar graph */

.rating {
	background: url(/images/sterren_geen.gif) repeat-x;
	float: left;
	height: 16px;
	margin-right: 6px;
	width: 80px;
}
	#widgets .rating {
		float: none;
	}
	
	.zoek-aanbieder-resultaat .rating,
	.zoek-project-resultaat .rating {
		display: inline-block;
		float: none;
		*float: left;
		vertical-align: -20%;
	}
	
	.rating div {
		background: url(/images/sterren.gif) repeat-x;
		height: 16px;
	}
		.rating div span {
			display: none;
		}


#content .graph {
	font-size: 93%;
	text-align: right;
	width: 12em;
}
	#content .graph .bar {
		background: #c70b00;
		border: 1px solid #d4d2d4;
		margin: 0 0 3px;
		text-align: left;
	}
		#content .graph .bar div {
			background: #a3c32e;
			height: 10px;
		}

	#content .graph .yes {
		float: left;
	}



/* News & Newsletter items */

#content .item {
	clear: both;
	overflow: auto;
	margin-top: 14px;
	_zoom: 1;
}
	#content .item:target {
		padding-top: 10px;
	}
	
	#content .item h2 {
		margin-top: 0;
	}