<!--
/* 
====================================================================

	Nico van Veenendaal webdesign & -development
	www.nicovanveenendaal.nl | info@nicovanveenendaal.nl
          
	Project: Maatschap voor Communicatie
	Datum: 15-03-2011

====================================================================
*/

* {
	margin: 0;
	padding: 0;
}
body, html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #ccdc00;
}

	#top {
		width: 100%;
		background: #FFFFFF url('img/top_bg.png') repeat-x;
		text-align: center;
	}
		#base {
			width: 837px;
			margin: 0 auto;
			text-align: left;
			background: #FFFFFF;
		}
			#page {
				position: relative;
			}
	#extra {
		width: 823px;
		margin: 24px auto 0 auto;
		padding: 0 24px 0 0;
		font-size: 9px;
		text-align: right;
		color: #909f19;
	}
	
		#extra a {
			color: #909f19;
			text-decoration: none;
		}
		
			#extra a:hover {
				text-decoration: underline;
			}
	

/* ========== COMMON STYLES */

a.more {
	font-size: 11px;
	height: 12px;
	color: #666666;
	padding: 0 16px 0 0;
	text-decoration: none;
	background: url('img/but_moreLink.png') right 1px no-repeat;
}
	a.more:hover {
		background-position: right -23px;
		color: #9aab16;
	}
	
.bold {
	font-weight: bold;
}

		
/* ========== HEADER */

#header {
	position: relative;
	height: 98px;
}
	#logo {
		position: absolute;
		top: 14px;
		left: 16px;
		background: url('img/logo_mvc.png') no-repeat;
	}
		#logo a {
			display: block;
			line-height: 999px;
			width: 270px;
			height: 43px;
			overflow: hidden;
		}

	#slogan {
		position: absolute;
		top: 25px;
		right: 18px;
	}
		#slogan h2 {
			font-size: 16px;
			font-weight: normal;
			letter-spacing: 0.05em;
			color: #999999;
		}
		
		
/* ========== MAINNAV */

#mainNav {
	position: absolute;
	width: 100%;
	height: 24px;
	bottom: 0;
	background: #201c3e url('img/mainNav_bg.png') repeat-x;
	z-index: 99;
}

	#mainNav ul {
		white-space: nowrap;
		margin: 0 0 0 8px;
	}
		#mainNav li {
			list-style-type: none;
			display: inline;
			margin: 6px 0 0 8px;
			float: left;
		}
			#mainNav li a {
				height: 18px;
				width: auto;
				display: block;
				overflow: hidden;
				color: #FFFFFF;
				text-decoration: none;
				letter-spacing: 0.05em;
				padding: 0 6px;
				float: left;
				font-size: 11px;
			}
			*+html #mainNav li a {
				width: auto;
			}
			*html #mainNav li a {
				width: auto;
			}
			#mainNav li a:hover {
				color: #FFFFFF;
				background: #69677E url('img/mainNav_hover_bg.png') repeat-x;
			}
			#mainNav li.active a, #mainNav li.active a:hover {
				color: #000000;
				background: #FFFFFF;
			}

			/* CORNERS */

			#mainNav li div {
				position: relative;
			}
				#mainNav li .lt, #mainNav li .rt {
					position: absolute;
					width: 4px;
					height: 4px;
				}
				#mainNav li .lt { top:0px; left:0px; background: url('img/mainNav_lt.png') no-repeat; }
				#mainNav li .rt { top:0px; right:0px; background: url('img/mainNav_rt.png') no-repeat; }
				
				*html #mainNav li .lt, *html #mainNav li .rt { 
					display: none;
				}


/* ========== SUBNAV */

#subNav {
	width: 800px;
	font-size: 11px;
}
	#subNav ul {
		white-space: nowrap;
		margin: 0 0 0 7px;
	}
		#subNav li {
			width: auto;
			list-style-type: none;
			display: inline;
			float: left;
			margin: 2px 1px;
		}
			#subNav li div {
				position: relative;
			}

				#subNav li a {
					padding: 1px 6px 2px 6px;
					color: #000000;
					letter-spacing: 0.04em;
					text-decoration: none;
					display: block;
				}
				#subNav li a:hover {
					background: #e1e1e1;
				}
				#subNav li.active a {
					color: #FFFFFF;
					background: #c0cf00;
				}
				
				/* CORNERS */
				
				#subNav li .lt, #subNav li .rt, #subNav li .lb, #subNav li .rb {
					position: absolute;
					width: 3px;
					height: 3px;
				}
				#subNav li .lt { top:0px; left:0px; background: url('img/subNav_lt.png') no-repeat; }
				#subNav li .rt { top:0px; right:0px; background: url('img/subNav_rt.png') no-repeat; }
				#subNav li .lb { bottom:0px; left:0px; background: url('img/subNav_lb.png') no-repeat; }
				#subNav li .rb { bottom:0px; right:0px; background: url('img/subNav_rb.png') no-repeat; }
				
				*html #subNav li .lt, *html #subNav li .rt, *html #subNav li .lb, *html #subNav li .rb { 
					display: none;
				}
	
				
			#page {
				padding: 16px 16px 0 16px;
			}
			
			
/* ========== VISUALS */

#visual {
	position: relative;
	float: left;
	width: 602px;
	height: 249px;
	overflow: hidden;
	margin: 0 0 16px 0;
}
#visualWide {
	position: relative;
	float: left;
	width: 100%;
	height: 249px;
	overflow: hidden;
	margin: 0 0 16px 0;
}

embed#visualWide {
	margin: 0;
}


/* ========== CONTENT */

#content {
	position: relative;
	width: 550px;
	float: left;
	margin: 0 0 8px 16px;
}
.full #content {
	width: 100%;
}
	#content h1 {
		font-size: 22px;
		font-weight: normal;
		color: #9aab16;
		margin: 0 0 8px 0;
	}
	#content h2 {
		font-size: 18px;
		font-weight: normal;
		color: #9aab16;
		margin: 0 0 4px 0;
	}
	#content h3 {
		font-size: 12px;
		font-weight: bold;
		color: #9aab16;
		margin: 0 0 2px 0;
	}
	#content p, .full #content {
		font-size: 12px;
		line-height: 16px;
		color: #000000;
		margin: 0 0 16px 0;
	}

	#content a {
		color: #666666;
	}
	#content a:hover {
		color: #9aab16;
	}
	
	
	#content ul {
		font-size: 12px;
		list-style: none;
		margin: 0 0 16px 0;		
	}
		#content li {
			line-height: 16px;
			padding: 0 0 4px 9px;
			background: url('img/arrow.png') 0 3px no-repeat;
		}
		
#personalContent {
	position: relative;
	width: 100%;
	background: #f3f3f3;
	padding: 9px 9px 1px 9px;
}
*+html #personalContent {
	margin: 0 0 9px 0;
}


/* ========== SIDEBAR */

#sideBar {
	position: relative;
	width: 200px;
	float: right;
}
	#sideBar span {
		display: none;
	}
	.sideContent {
		position: relative;
		float: right;
		width: 194px;
		font-size: 11px;
	}
	
	
	.projectManager {
		position: relative;
		float: right;
		width: 194px;
		margin: 0 0 9px 0;
		background: #e7e7e7;
	}
		.projectManagerText {
			font-size: 11px;
			color: #666666;
			padding: 9px;
		}
		.projectmanagerBtn {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background: url('img/projectmanager_btn.png') 175px bottom no-repeat;
		}
		.projectmanagerBtn a {
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
			line-height: 999px;
		}
		
	.moreNav {
		position: relative;
		clear: both;
		float: right;
		width: 100%;
		text-align: right;
		list-style-type: none;
		margin: 0 0 9px 0;
	}
	
	#sideBar dl {
		font-size: 11px;
		margin: 0 0 16px 0;
	}
		#sideBar dt {
			font-size: 18px;
			font-weight: normal;
			color: #9aab16;
			margin: 0 0 4px 0;
		}
		#sideBar dd {
			line-height: 15px;
			padding: 0 0 3px 4px;
			background: url('img/arrow.png') 0 4px no-repeat;
		}
			#sideBar dd a {
				color: #666666;
			}
			#sideBar dd a:hover {
				color: #9aab16;
			}
		

/* ========== SIDEFUNCTIONS */

#sideFunctions {
	position: relative;
	float:right;
	width: 194px;
}

	#friendContainer {
		height: 24px;
		overflow: hidden;
	}

			#sideFunctions a {
				width: 174px;	/* -20px padding */
				height: 19px;	/* -5px padding */
				display: block;
				padding: 5px 0 0 20px;
				font-size: 11px;
				color: #999999;
				text-decoration: none;
				background: url('img/but_moreLink.png') 4px -18px no-repeat;
				cursor: hand;
				cursor: pointer;
			}
			#sideFunctions a:hover {
				background-position: 4px 6px;
				background-color: #f4f4f4;
			}
			
			.friendForm {
				background: #f4f4f4;
				padding: 8px;
			}
				.errors {
					border: 1px solid #CC0000;
					padding: 4px;
					font-size: 11px;
					color: #cc0000;
				}
				.friendForm label {
					width: 176px;
					font-size: 11px;
					color: #999999;
				}
				.friendForm input, .friendForm textarea {
					width: 176px;
					height: 16px;
					border: 1px solid #CCCCCC;
					font-size: 11px;
					color: #666666;
					margin: 1px 0 5px 0;
				}
				.friendForm textarea {
					height: 71px;
				}
				input.friendSubmit {
					border: 0;
					background: transparent url('img/projectmanager_btn.png') right 3px no-repeat;
					text-align: right;
					padding: 0 14px 0 0;
					cursor: hand;
					cursor: pointer;
				}


/* ========== FORM */

.form fieldset {
	border:none;
}
	.form label {
		width: 100px;
		display: inline-block;
		text-align: right;
		padding: 0 6px 0 0;
	}
	.form input {
		margin: 6px 0 0 0;
		width: 200px;
	}
	.form input.small {
		width: 75px;
	}
	.form input.radio {
		width: 20px;
	}
	
	.form .button {
		position: relative;
		float: right;
		height: 16px;
		border: none;
		text-align: center;
		padding: 2px 12px;
		background: #999999;
	}
		#content .form .button a,
		#content .form .button a:hover {
			color: #333333;
			font-weight: bold;
			text-decoration: none;
		}
		
		.form .button .ls,
		.form .button .rs {
			position: absolute;
			top: 0;
			height: 20px;
			width: 4px;
		}
		
		.form .button .ls { left:0; background: url('img/button_left.png') no-repeat; }
		.form .button .rs { right:0; background: url('img/button_right.png') no-repeat; }
		
		
/* ========== NEWSLETTER */

#newsletter {
	margin: 40px 0 20px 0;
}
	#newsletter label {
		width: 75px;
		display: inline-block;
		text-align: right;
	}
	#newsletter input {
		width:300px;
		border: 1px solid #cccccc;
		margin: 10px 0 0 0;
	}
	#newsletter div {
		margin-left: 75px;
		display: inline;
	}
		#newsletter div label {
			text-align: left;
			margin: 10px 0 0 0;
		}
		#newsletter .radio {
			width: 16px;
			margin: 10px 0 4px 0;
			border: none;
		}
	#newsletter .submit {
		width: 82px;
		height: 20px;
		border: none;
		margin: 0 0 0 35px;
		background: url('img/btn_bevestig.gif') no-repeat;
	}
	
.archive {
	position: relative;
	width: 194px;
	padding: 6px 0 0 6px;
	background: #e7e7e7;
}
	.archive dl {
		margin: 0 0 0 0;
		padding: 0 0 8px 0;
	}


/* ========== CAROUSEL */

#carouselContainer {
	position: relative;
	float: left;
	width: 398px;
	height: 249px;
	background: #e1e1e1;
	margin: 0;
	padding: 0;
	
}


/* ========== OVERVIEW-ITEM */

.overview {
	padding: 0 0 40px 0;
}
	.overviewItem {
		position: relative;
		float: left;
		width: 534px;
		height: 120px;
		margin: 0 0 9px 0;
		background: #f9f9f9;
	}
		.overviewImage {
			float: left;
			width: 184px; /* was 194px */
			height: 120px;
			overflow: hidden;
		}
		.overviewIntro {
			float: left;
			width: 310px;	/* -18px padding */
			height: 108px;	/* -12px padding */
			font-size: 11px;
			line-height: 14px;
			padding: 3px 6px 6px 12px;
			overflow: hidden;
		}
		.overviewBtn a {
			position: absolute;
			width: 534px;
			height: 120px;
			display: block;
			overflow: hidden;
			line-height: 999px;
			left: 0;
			background: #cc0000 url('img/projectmanager_btn.png') 515px bottom no-repeat;
		}


	.full .overviewItem {
		width: 390px;
		margin: 0 9px 9px 0;;
	}
		.full .overviewIntro {
			width: 182px;	/* -18px */
		}
			.full #content .overviewItem h2 {
				font-size: 12px;
				font-weight: bold;
				line-height: 17px;
				margin: 0 0 4px 0;
			}
		.full .overviewBtn a {
			width: 390px;
			background: url('img/projectmanager_btn.png') 373px bottom no-repeat;
		}


		/* ----- PAGE-NAVIGATION */

		#ditto_pages {
			float: left;
			width: 534px;
			text-align: center;
			padding: 5px 0 20px 0;
		}
		.full #ditto_pages {
			width: 781px;
		}

			a.ditto_page {
				font-size: 11px;
				color: #666666;
				margin: 6px 4px;
			}
			span.pages {
				margin: 9px 0 0 0;
			}
				span.ditto_currentpage {
					font-size: 11px;
					font-weight: bold;
					margin: 0 4px;
				}

			span.btnPrev {
				position: absolute;
				margin: 4px 0 0 -24px;
			}
			span.btnNext {
				position: absolute;
				margin: 4px 0 0 12px;
			}
			span.btnNext b, span.btnPrev b {
				display: none;
			}
				.ditto_previous_link, .ditto_previous_off, .ditto_next_link, .ditto_next_off {
					width: 12px;
					height: 12px;
					display: block;
					overflow: hidden;
					line-height: 999px;
				}
				.ditto_previous_link { background: url('img/but_prev.png') no-repeat; }
				.ditto_previous_link:hover { background-position: 0 -12px; }
				.ditto_previous_off { background: url('img/but_prev.png') 0 -24px no-repeat; }
				.ditto_next_link { background: url('img/but_next.png') no-repeat; }
				.ditto_next_link:hover { background-position: 0 -12px; }
				.ditto_next_off { background: url('img/but_next.png') 0 -24px no-repeat; }


/* ========== ANKEILERS */

#ankeilersHome {
	float: right;
	width: 407px;
	height: 387px;
	list-style-type: none;
}
#ankeilersSideBar {
	float: right;
	width: 203px;
	list-style-type: none;
	margin: 0;
}
*+html #ankeilersSideBar {
	margin-bottom: 9px;
}
	.ankeiler {
		position: relative;
		float: left;
		display: inline;
		width: 194px;
		height: 120px;
		margin: 0 0 9px 9px;
		overflow: hidden;
	}
		.ankeilerBtn {
			position: absolute;
			width: 194px;
			height: 120px;
			background: url('img/ankeiler_btn.png') 180px 106px no-repeat;
		}
			.ankeiler a {
				width: 194px;
				height: 120px;
				display: block;
				line-height: 999px;
				overflow: hidden;
			}
			
		.ankeilerIntro {
			position: absolute;
			width: 100%;
			height: 120px;
		}
			.ankeilerImage {
				position: absolute;
			}
			.ankeilerIntro .ankeilerContent {
				position: absolute;
				width: 184px;	/* -10px padding */
				height: 120px;
				padding: 5px;
				top: 85px;
				background: url('img/overlayAnkeiler.png');
			}
				.ankeilerHeader {
					position: relative;
					height: 30px;
				}
					.ankeilerIntro h2 {
						position: absolute;
						font-size: 11px;
						color: #FFFFFF;
						bottom: 5px;
					}
				.ankeilerIntro {
					font-size: 10px;
					color: #FFFFFF;
				}


/* ========== TAGS */
								
#tags {
	position: relative;
	width: 382px;	/* -16px padding */
	float: left;
	line-height: 20px;
	padding: 12px 8px 0 8px;
}
	#tags a {
		color: #666666;
		text-decoration: none;
	}
	#tags a:hover {
		color: #a6b302;
	}
	#tags .tagCloudSmall {
		font-size: 12px;
	}
	#tags .tagCloudMiddle {
		font-size: 16px;
	}
	#tags .tagCloudBig {
		font-size: 20px;
	}
	#tags div {
		position: absolute;
		top: 114px;
		right: 0;
	}


/*
============================== FOOTER
*/

#footer {
	position: relative;
	width: 837px;
	margin: 0 auto;
	height: 76px;
	background: #e0ea66;
}

	#footer iframe {
		position: absolute;
		width: 847px;
		height: 76px;
		border: none;
		background: transparent;
		left: -5px;
	}

		#footer .lb, #footer .rb {
			position: absolute;
			width: 13px;
			height: 13px;
			overflow: hidden;
		}
		#footer .lb {
			left: 0;
			bottom: 0;
			background: url('img/bottom_lb.png') no-repeat;
		}
		#footer .rb {
			right: 0;
			bottom: 0;
			background: url('img/bottom_rb.png') no-repeat;
		}


/*
============================== METACONTAINER
*/

#metaContainer {
	position: relative;
	width: 805px;
	color: #909f19;
	font-size: 10px;
	margin: 6px auto;
}
	#metaContainer span {
		position: absolute;
	}
	#metaContainer ul {
		position: absolute;
		right: 0;
	}
		#metaContainer li {
			display: inline;
			padding: 0 4px;
			border-right: 1px solid #909f19;
		}
		#metaContainer li.last {
			border: none;
		}
			#metaContainer li a {
				color: #909f19;
				text-decoration: none;
			}
			#metaContainer li a:hover {
				text-decoration: underline;
			}


.caseSelector {
	position: absolute;
	top: -4px;
	right: 16px;
	font-size: 12px;
}
optgroup {
	font-style: normal;
}


/*
============================== CORNERS
*/

.corner .lt, .corner .rt, .corner .lb, .corner .rb {
	position: absolute;
	width: 8px;
	height: 8px;
	overflow: hidden;
}
.corner .lt { top:0;left:0;background:url('img/small_lt.png') no-repeat; }
.corner .rt { top:0;right:0;background:url('img/small_rt.png') no-repeat; }
.corner .lb { bottom:0;left:0;background:url('img/small_lb.png') no-repeat; }
.corner .rb { bottom:0;right:0;background:url('img/small_rb.png') no-repeat; }

/* ie6 fix */
*html .corner .rt, *html .corner .rb { right: -1px; }
*html .corner .lt { background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://mvc.nicovanveenendaal.nl/assets/templates/mvc/img/small_lt.png',sizingMethod='image'); }
*html .corner .rt { background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://mvc.nicovanveenendaal.nl/assets/templates/mvc/img/small_rt.png',sizingMethod='image'); }
*html .corner .lb { background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://mvc.nicovanveenendaal.nl/assets/templates/mvc/img/small_lb.png',sizingMethod='image'); }
*html .corner .rb { background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://mvc.nicovanveenendaal.nl/assets/templates/mvc/img/small_rb.png',sizingMethod='image'); }


#container .lt, #container .rt, #container .lb, #container .rb {
	position: absolute;
	width: 5px;
	height: 5px;
	overflow: hidden;
}
#container .lt { top:0;left:0;background:url('img/carousel_lt.png') no-repeat; }
#container .rt { top:0;right:0;background:url('img/carousel_rt.png') no-repeat; }
#container .lb { bottom:0;left:0;background:url('img/carousel_lb.png') no-repeat; }
#container .rb { bottom:0;right:0;background:url('img/carousel_rb.png') no-repeat; }

	
/*
============================== CLEARFIX
*/

* html .clearfix {
	height: 1%;
}
html[xmlns] .clearfix {
	display: block;
}
.clearfix {
	display: inline-block;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


-->