/************************************************************************************************/
/* Author:			VINCIS Rinse van Dijk         					                   	  		*/
/* Description:		BASIC stylesheet					                              			*/
/* Site name:		Clientsite Talant						                           	  		*/
/* Date created:	20-01-2010							                               	  		*/
/************************************************************************************************/

/*----------------------------------------------------------------------------------------------*/
/* Colors	                                               										*/
/*----------------------------------------------------------------------------------------------*/
/* 	
/* 	Roze:		#e31a82;
/* 	Paars:		#770d68;
/*	Wit:		#fff;	 	

/************************************************************************************************/
/* Screen styles                                           										*/
/************************************************************************************************/
@media screen 
{
	/********************************************************************************************/
	/* =Global																					*/
	/********************************************************************************************/
	body 
	{
		font-family: 			Verdana, Arial, Helvetica;
		
		font-size:				0.8em;
		line-height:			170%;
		
		margin:					0;
		padding:				0;
	
		color:					#4d4d4d;
	}
	
	input
	{
		font-family: 			Verdana, Arial, Helvetica;
	}
	
	.hide 
	{
		display:				none;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	#printHeader
	{
		display:				none;
	}
	
	h1
	{
		color:					#09266a;	
		font-size:				1.4em;
		font-weight:			bold;
		
		margin-bottom:			0.7em;
	}
	
	h2
	{
		color:					#fff;	
		font-size:				1.0em;
		font-weight:			bold;
		
		margin-bottom:			0.2em;
	}
	
	h3
	{
		color:					#fff;	 
		font-size:				1.0em;
		font-weight:			bold;
		
		margin-bottom:			0.2em;
	}
	
		h3 a
		{
			text-decoration:		none;
		}
		
	
	p
	{
		margin:				0 0 20px 0;
	}
	
	ul
	{
	}
	
		li
		{
		}
		
	a
	{
		color:					#006138;	
		text-decoration:		none;
	}
	
		a:hover
		{
			color:					#fff;	
			text-decoration:		underline;
		}
		
		a:active,
		a:focus
		{
			outline:				0;
		}
		

		
	.cm_button
	{
		float:					left;
		display:				inline;

		height:					20px;
		color:					#fff;
		
		background-color:		transparent;
		
		font-weight:			bold;
		
		margin:					0;

		border:					0;
		
		cursor:					pointer;
	}
	
	.cm_textarea, .cm_input, .cm_select, .cm_multi, .cm_button
	{
		
		color:					#770d68;
		font-family: 			Verdana, Arial, Helvetica;
		font-size:				1.0em;
	}	
	
	
	.readmore
	{
		font-weight:			bold;
		color:					#09266a;
		text-decoration:		none;
		padding:				0 0 0 12px;		
	}
	/********************************************************************************************/
	/* =Containers																				*/
	/********************************************************************************************/		
	
	#allContainer
	{
		position: 				relative;
		display:				block;
		width: 					970px;
		margin:					0px auto;
	}	
	
		#printHeader
		{
			display:				none;
		}
		
		#totalContainer
		{
			width: 					970px;
			/*height:					612px;*/
			padding:				0;
			overflow:				hidden;
		}	

	/*********************************************************************************************/
	/* =topContainer							                                      			 */
	/*********************************************************************************************/	
	
	#topContainer
	{
		float:					left;
		width:					970px;
		height:					160px;
		margin:					0 0 9px 0;
		
		overflow:				hidden;
		
		background-image:		url(/Content/Images/Background/Headers/talant.gif);
		background-repeat:		no-repeat;
	}
	
		/* headers per hoofdstuk */
		#totalContainer .leeg
		{
			background-image:		url(/Content/Images/Background/Headers/leeg.gif);
		}
						
		#totalContainer .talant
		{
			background-image:		url(/Content/Images/Background/Headers/talant.gif);
		}
		
		#totalContainer .wonen
		{
			background-image:		url(/Content/Images/Background/Headers/wonen.gif);
		}
		
		#totalContainer .werken
		{
			background-image:		url(/Content/Images/Background/Headers/werken.gif);
		}
		
		#totalContainer .laatuhoren
		{
			background-image:		url(/Content/Images/Background/Headers/laatuhoren.gif);
		}
		
		#totalContainer .agenda
		{
			background-image:		url(/Content/Images/Background/Headers/agenda.gif);
		}
		
		#totalContainer .vakantie
		{
			background-image:		url(/Content/Images/Background/Headers/vakantie.gif);
		}
		
		#totalContainer .vrijetijd
		{
			background-image:		url(/Content/Images/Background/Headers/vrijetijd.gif);
		}
		
		#totalContainer .recept
		{
			background-image:		url(/Content/Images/Background/Headers/recept.gif);
		}
		
		#totalContainer .ecardversturen
		{
			background-image:		url(/Content/Images/Background/Headers/ecard.gif);
		}
		
		#totalContainer .vrienden
		{
			background-image:		url(/Content/Images/Background/Headers/vrienden.gif);
		}
		
		#totalContainer .leren
		{
			background-image:		url(/Content/Images/Background/Headers/leren.gif);
		}
		
		#totalContainer .nieuws
		{
			background-image:		url(/Content/Images/Background/Headers/nieuws.gif);
		}
		
		#totalContainer .wonenwerkenleren
		{
			background-image:		url(/Content/Images/Background/Headers/wonenwerkenleren.gif);
		}
		
		
		#totalContainer .ietsdoen
		{
			background-image:		url(/Content/Images/Background/Headers/ietsdoen.gif);
		}
		
		#totalContainer .forum
		{
			background-image:		url(/Content/Images/Background/Headers/forum.gif);
		}
		
		
	
		a#closeButton
		{
			float:					right;
			display:				inline;
			width:					40px;
			height:					40px;
			margin:					5px 10px 0 0;
			
			background-image:		url(/Content/Images/General/closeButton.gif);
			background-position:	0 -40px;
			background-repeat:		no-repeat;
		}
		
			a#closeButton:hover
			{
				background-position:	0 0px;
			}
	
		#topNavigation
		{
			float:					left;
			display:				inline;
			width:					698px;
			height:					37px;
			margin:					112px 0 0 12px;
		}
		
			#topNavigation a#backButton
			{
				float:					left;
				display:				block;
				width:					87px;
				height:					32px;
				margin:					4px 8px 0 0;
				background-color:		#ccc;
				background-image:		url(/Content/Images/General/roundCornerLeftArrowWhite.gif);
				background-position:	left top;
				overflow:				hidden;
			}
		
				#topNavigation a#backButton span
				{
					float:					left;
					display:				inline;
					width:					50px;
					height:					16px;
					
					font-size:				1.1em;
					font-weight:			bold;
					color:					#770D68;
					
					padding:				6px 7px 10px 0;
					margin:					0 0 0 30px;
					
					background-color:		#fff;
					background-image:		url(/Content/Images/General/roundCornerRightWhite.gif);
					background-position:	right top;
					background-repeat:		no-repeat;
					
					
				}
				
					#topNavigation a#backButton:hover,
					#topNavigation a#backButton:hover span
					{
						color:					#fff!important;
						background-color:		#770D68!important;
						background-image:		url(/Content/Images/General/roundCornerLeftArrowPurple.gif);
						text-decoration:		none!important;
					}
					
					#topNavigation a#backButton:hover span
					{
						background-image:		url(/Content/Images/General/roundCornerRightPurple.gif);
					}
			
			#topNavigationMiddle
			{
				float:					left;
				width:					561px;
				height:					37px;
			}
		
			#topNavigation ul
			{	
				float:					right;
				display:				block;
				margin:					0;
				padding:				0;
			}
			
				#topNavigation ul li
				{
					float:					left;
					display:				block;
					width:					37px;
					height:					37px;
				}
				
					#topNavigation ul li a#printButton
					{
						float:					left;
						display:				block;
						width:					37px;
						height:					37px;
						
						background-image:		url(/Content/Images/General/printButton.gif);
						background-position:	0 0;
						text-indent:			-5000px;
						font-size:				0px;
					}
					
						#topNavigation ul li a#printButton:hover
						{
							background-position:	0 -37px;
						}

	/*********************************************************************************************/
	/* =middleContainer							                                      			 */
	/*********************************************************************************************/									
						
	#middleContainer
	{
		float:					left;
		width:					970px;
		/*height:					386px;*/
		margin:					0 0 9px 0;
		/*overflow:				hidden;*/
	}
	
		#content
		{
			float:					left;
			position:				relative;
			width:					448px;
			height:					354px;
			padding:				16px;
			margin:					0;
			overflow:				hidden;
			
			color:					#770d68;
			
			background-image:		url(/Content/Images/Background/bgContent.gif);
			background-repeat:		no-repeat;
		}
		
		
			/* subpage fullWidth styles */
			#middleContainer  #content.fullWidth
			{
				width:					938px;
				height:					354px;
				padding:				16px;
				background-image:		url(/Content/Images/Background/bgContentNormal.gif);
			}
			/* end */
		
		
		
			/* overview styles */
			#middleContainer.overview #content
			{
				width:					970px;
				height:					386px;
				padding:				0;
			}
		
			#middleContainer.overview.incPaging #content
			{
				float:					left;
				width:					970px;
				height:					346px;
				margin:					0;
				
				background-image:		url(/Content/Images/Background/bgContentWithPaging.gif);
				background-repeat:		no-repeat;
			}
			
			/* end */
			
			/* thema3 styles */
			#middleContainer.overview #content3
			{
				float:					left;
				width:					480px;
				height:					346px;
				background-color:		#fff;
				overflow:				hidden;
			}
			
			#middleContainer.overview #image.thema3
			{
				float:					right;
				width:					480px;
				height:					346px;
				padding:				0;
				margin:					0;
				
				
				background-image:		url(/Content/Images/Background/bgContentWithPaging.gif);
				background-repeat:		no-repeat;
			}
			
				#middleContainer.overview #image.thema3 #imageOverlay
				{
					float:					left;
					width:					480px;
					height:					346px;
					margin:					0;
							
					background-image:		url(/Content/Images/General/Overlays/imageOverlaySmall.png);
					background-repeat:		no-repeat;
				}
				
			/* end */
			
			
			/* photoPage */
			#middleContainer.photoPage #content
			{
				float:					left;
				width:					448px;
				height:					314px;
				padding:				16px;
				margin:					0;
				
				background-image:		url(/Content/Images/Background/bgContentWithPaging.gif);
				background-repeat:		no-repeat;
			}
			
			
			#middleContainer.photoPage #image
			{
				float:					left;
				width:					448px;
				height:					346px;
				padding:				0;
				margin:					0;
				
				background-image:		url(/Content/Images/Background/bgContentWithPaging.gif);
				background-repeat:		no-repeat;
			}
			
				#middleContainer.photoPage #image #imageOverlay
				{
					float:					left;
					width:					480px;
					height:					346px;
					margin:					0;
					
					background-image:		url(/Content/Images/General/Overlays/imageOverlaySmall.png);
					background-repeat:		no-repeat;
				}
			/* end */
			
			

			/* e-Card */
			
			#middleContainer.ecard #content
			{
				padding:				0;
				width:					480px;
				height:					386px;
				
				background-image:		none;
			}
			
			#middleContainer.ecard #image
			{
				padding:				10px 0 0 0;
				height:					376px;
				background-image:		url(/Content/Images/Background/bgForm.gif);
				background-repeat:		no-repeat;
			}
			
			
			/* form */
			
			#middleContainer.form #content
			{
				float:					left;
				width:					448px;
				height:					354px;
				padding:				16px;
				margin:					0;
				
				color:					#770d68;
				
				background-image:		url(/Content/Images/Background/bgContent.gif);
				background-repeat:		no-repeat;
			}
			
			#middleContainer.form #image
			{
				padding:				10px 0 0 0;
				height:					376px;
				background-image:		url(/Content/Images/Background/bgForm.gif);
				background-repeat:		no-repeat;
			}

		#movie
		{
			float:					right;
			width:					480px;
			height:					386px;
			margin:					0;
		}

		#image
		{
			float:					right;
			width:					480px;
			height:					386px;
			margin:					0;
		}
		
		
			#imageOverlay
			{
				float:					left;
				width:					480px;
				height:					386px;
				margin:					0;
				
				background-image:		url(/Content/Images/General/Overlays/imageOverlayBig.png);
				background-repeat:		no-repeat;
			}
			
			#movie
			{
				float:					right;
				width:					470px;
				height:					376px;
				margin:					0;
				padding:				10px 0 0 10px;
				
				background-image:		url(/Content/Images/Background/bgContent.gif);
				background-repeat:		no-repeat;
			}		
			
				#movie embedded
				{
					
				}
			
		
			#middleContainer.incPaging #image
			{
				float:					right;
				width:					480px;
				height:					346px;
				margin:					0;
				
				background-image:		url(/Content/Images/Background/bgContentWithPaging.gif);
				background-repeat:		no-repeat;
			}
		
			#middleContainer.incPaging.overview #content,
			#middleContainer.incPaging.overview #image
			{
				background-image:			none;
			}		
			
	/*********************************************************************************************/
	/* =overview6 								                                      			 */
	/*********************************************************************************************/	

	.overview6 
	{
		float:					left;
		display:				inline;
		
		position:				relative;
		
		width:					480px;
		height:					108px;
		margin:					0 0px 11px 0;
		overflow:				hidden;
		
		background-color:		#770d68;
		background-image:		url(/Content/Images/General/talant_logo.gif);
		background-repeat:		no-repeat;
		background-position:	right top;
	}
	
		.overview6.odd
		{
			margin:					0 10px 11px 0;
		}
	
		.overview6 .overview6Background
		{
			position:				relative;
			
			z-index:				101;
			
			width:					480px;
			height:					108px;
			
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/Content/Images/General/Overlays/overview6.png);
		}
		
		
			.overview6 .overview6Background div
			{
				width:					456px;
				height:					84px;
				padding:				12px;
			}
			
				#middleContainer .overview6 span,
				#middleContainer ul#reactionList .readMore span 
				{
					font-size:				1.2em;
					font-weight:			bold;
					color:					#fff;
				}
			
				#middleContainer .overview6 h2 a
				{
					display:				block;
					width:					316px;
				
					color:					#fff!important;
					text-decoration:		none;
				}

					#middleContainer .overview6 h2 a:hover
					{
						text-decoration:		none;
					}

				.overview6 img
				{
					z-index:				100;
					
					display:				block;
					position:				absolute;
					right:					0px;
					top:					0px;
				}

			.overview6 .readMore,
			#middleContainer ul#reactionList .readMore 
			{
				display:				block;
				position:				absolute;
				bottom:					12px;
				left:					12px;
			}
				
				.overview6 .readMore span,
				#middleContainer ul#reactionList .readMore span 
				{
					display:				block;
					
					text-indent: 			-5000px;	/* remove text */

					width:					76px;
					height:					24px;
					
					line-height:			1em;		
					
					background-image:		url(/Content/Images/General/bekijkButton.gif);
					background-repeat:		no-repeat;
					background-position: 	0 -24px;
				}
				
					.overview6 .readMore:hover span,
					#middleContainer ul#reactionList .readMore:hover span 
					{
						cursor:					pointer;
						background-position: 	0 -0px;
					}			

	/*********************************************************************************************/
	/* =thema2									                                      			 */
	/*********************************************************************************************/	
	
	.thema2 
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		position:				relative;
		
		width:					480px;
		height:					187px;
		margin:					0 0 12px 0;
		overflow:				hidden;
		
		background-color:		#770d68;
	}
	
		.thema2 .thema2Background
		{
			position:				relative;
			
			z-index:				101;
			
			width:					480px;
			height:					187px;
			
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/Content/Images/General/Overlays/overview2.png);
		}
		
		
			.thema2 .thema2Background div
			{
				width:					456px;
				height:					163px;
				padding:				12px;
			}
			
				#middleContainer .thema2 h2 a,
				#middleContainer .thema2 h2 a:visited
				{
					display:				block;
					width:					250px;
					
					line-height:			140%;
				
					color:					#fff;
					text-decoration:		none;
				}

					#middleContainer .thema2 h2 a:hover
					{
						text-decoration:		none;
					}

				.thema2 img
				{
					z-index:				100;
					
					display:				block;
					position:				absolute;
					right:					0px;
					top:					0px;
				}

			.thema2 .readMore 
			{
				display:				block;
				position:				absolute;
				bottom:					12px;
				left:					12px;
			}
				
				.thema2 .readMore span
				{
					display:				block;
					
					text-indent: 			-5000px;	/* remove text */

					width:					76px;
					height:					24px;
					
					line-height:			1em;		
					
					background-image:		url(/Content/Images/General/bekijkButton.gif);
					background-repeat:		no-repeat;
					background-position: 	0 -24px;
				}
				
					.thema2 .readMore:hover span
					{
						cursor:					pointer;
						background-position: 	0 -0px;
					}

	
	/*********************************************************************************************/
	/* =thema4 									                                      			 */
	/*********************************************************************************************/	

	.thema4 
	{
		float:					left;
		display:				inline;
		
		position:				relative;
		
		width:					480px;
		height:					89px;
		margin:					0 0px 10px 0;
		overflow:				hidden;
		
		background-color:		#fff;
	}
	
		.thema4 .thema4Background
		{
			position:				relative;
			
			z-index:				101;
			
			width:					480px;
			height:					89px;
			
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/Content/Images/General/Overlays/overview4.png);
		}
		
		
			.thema4 .thema4Background div
			{
				width:					456px;
				height:					65px;
				padding:				12px;
			}
			
				#middleContainer .thema4 h2 a
				{
					display:				block;
					width:					316px;
				
					color:					#fff!important;
					text-decoration:		none;
				}

					#middleContainer .thema4 h2 a:hover
					{
						text-decoration:		none;
					}

				.thema4 img
				{
					z-index:				100;
					
					display:				block;
					position:				absolute;
					right:					0px;
					top:					0px;
				}

			.thema4 .readMore 
			{
				display:				block;
				position:				absolute;
				bottom:					12px;
				left:					12px;
			}
				
				.thema4 .readMore span
				{
					display:				block;
					
					text-indent: 			-5000px;	/* remove text */

					width:					118px;
					height:					24px;
					
					line-height:			1em;		
					
					background-image:		url(/Content/Images/General/emailButton.gif);
					background-repeat:		no-repeat;
					background-position: 	0 -24px;
				}
				
					.thema4 .readMore:hover span
					{
						cursor:					pointer;
						background-position: 	0 -0px;
					}


					
	/*********************************************************************************************/
	/* =paging									                                      			 */
	/*********************************************************************************************/					
	
	#middleContainer div.paging2
	{
		float:					left;
		width:					970px;
		height:					30px;
		margin:					10px 0 0 0;
		
		background-image:		url(/Content/Images/Background/bgPaging.gif);
		background-repeat:		no-repeat;
	}	

		#middleContainer div.paging ul
		{
			float:					left;
			height:					27px;
			margin:					0;
			padding:				3px 0 0 420px;
			list-style:				none;
		}
		
			#middleContainer div.paging ul li
			{
				float:					left;
				height:					27px;
				background-image:		none;
				padding:				0;
			}
				#middleContainer div.paging ul li.current, 
				#middleContainer div.paging ul li span,
				#middleContainer div.paging ul li a
				{
					color:					#fff!important;
					font-weight:			bold;
					padding:				0 5px 0 5px;
				}
				
				#middleContainer div.paging ul li.current,
				#middleContainer div.paging ul li span
				{
					text-decoration:		underline;
				}
				
				#middleContainer div.paging ul li a:hover
				{
					color:					#e31a82!important;
					text-decoration:		none;
				}


	/*********************************************************************************************/
	/* =Forum									                                      			 */
	/*********************************************************************************************/	

	a#addNewPost
	{
		position:				absolute;
		right:					10px;
		bottom:					10px;
		width:					114px;
		height:					33px;
		background-image:		url(/Content/Images/General/forumReactButton.gif);
		background-repeat:		no-repeat;
		background-position:	0 top;
		text-indent:			-9999px;
		line-height:			0px;
		font-size:				0px;
	}
	
		a#addNewPost:hover
		{
			background-position:	0 bottom;
		}
		
		
	#reaction
	{
		float:					left;
		width:					448px;
		height:					301px;
		padding:				16px;
		color:					#fff;
		font-size: 				1.0em;
		line-height: 			165%;
		
		background-image:		url(/Content/Images/General/background_reaction.gif);
		background-repeat:		no-repeat;
	}
	
		#reaction a
		{
			font-weight:		bold;
			text-decoration:	underline;
		}
		
		#reaction span
		{
			float:				left;
			clear:				both;
			font-size: 			1.2em;
			width:				100%;
			font-weight:		bold;
		}
		
		#reaction p
		{
			margin:				0;
		}
	
	#reactionPager
	{
		float:					left;
		width:					480px;
		height:					33px;
		margin:					10px 0 0 0;
	}
	
	
	a#previousReaction,
	a#nextReaction
	{
		float:					left;
		width:					120px;
		height:					33px;
		background-image:		url(/Content/Images/General/forumReactionPreviousButton.gif);
		background-repeat:		no-repeat;
		background-position:	0 top;
		text-indent:			-9999px;
		line-height:			0px;
		font-size:				0px;
	}
	
	a#nextReaction
	{
		float:					right;
		background-image:		url(/Content/Images/General/forumReactionNextButton.gif);
	}
	
		a#previousReaction:hover,
		a#nextReaction:hover
		{
			background-position:	0 bottom;
		}
		
	#middleContainer.incPaging #content.editor
	{
		height:					314px;
		  background-image: 	url(/Content/Images/Background/bgContentWithPaging.gif);
	}
	
	#middleContainer ul#reactionList
	{
		float:				left;
		width:				480px;
		height:				346px;
		list-style-type:	none;
		padding:			0;
		margin:				0;
		overflow:			hidden;
		background-color:	#fff;
	}
	
		#middleContainer  ul#reactionList li
		{
			float:				left;
			position:			relative;
			width:				456px;
			height:				84px;
			
			color:				#fff;
			
			list-style-type:	none;
			padding:			12px;
			margin:				0 0 11px 0;
			
			
			background-image:	url(/Content/Images/Background/bgForumReaction.gif);
			background-repeat:	no-repeat;
		}
		
			#middleContainer  ul#reactionList li span
			{
				float:				left;
				clear:				both;
				font-size: 			1.0em;
				width:				100%;
				font-weight:		bold;
			}
			
			#middleContainer  ul#reactionList li p
			{
				font-size:			1.0em;
			}
				
	/*********************************************************************************************/
	/* =bottomContainer							                                      			 */
	/*********************************************************************************************/	
				
	#bottomContainer
	{
		float:					left;
		width:					970px;
		height:					46px;
		margin:					0;
		overflow:				hidden;
		
		background-image:		url(/Content/Images/Background/bg_menu_bar.gif);
		background-repeat:		no-repeat;
	}
		
}




/**************************************************************************************************/
/* =Print styles  	                         											          */
/**************************************************************************************************/
@media print
{

	#topContainer, #bottomContainer, .paging
	{
		display:			none;
	}

	
	body 
	{
		font-family: 			Verdana, Arial, Helvetica;
		
		font-size:				1.0em;
		line-height:			170%;
	
		color:					#770D68;
	}	
	
	
	#printHeader
	{
		margin:					0 0 30px 0;
	}

	h1
	{
		color:					#E31A82;	
		font-size:				1.4em;
		font-weight:			bold;
		
		margin-bottom:			0.7em;
	}
	
	h2
	{
		color:					#E31A82;	
		font-size:				1.2em;
		font-weight:			bold;
		
		margin-bottom:			0.2em;
	}
	
	h3
	{
		color:					#E31A82;	 
		font-size:				1.0em;
		font-weight:			bold;
		
		margin-bottom:			0.2em;
	}

	.overview6,
	.thema2,
	.thema4
	{
		padding:				0 0 30px 0;
		margin:					0 0 30px 0;
		
		border-top:			2px solid #770d68;
	}
}