/*
--------------------------------------------------------------------------------------------------
 Title:			Subpage Styles
 Created on: 	21-10-2008
 Author:     	Roberto De Vivo
 Client:		Vincis
 Project:		Hulpverleningsdienst Fryslân - Ramp Subsite
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------

 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Backgound color		#fff	(white)

 =2 Newsbar				#173d7e	(ggd blue)				- also Path bgc
 =3	Search 				#d42e14	(ggd red)
 =4	Path link			#b0bdd11(light ggd blue)
 =5	Link MO				#112e5f	(dark ggd blue)
 =6	News text			#cdd5e3	(ultra light blue)

 =10	Body text		#777	(medium gray)			- also Resize font
 =11	Shortcuts		#999	(medium light gray)
 =12	Menu underline	#c0c0c0	(light gray)			- also Download-size
 =13	Shortcuts MO	#333	(dark grey)

*/

@media screen 
{
	/*********************************************************************************************/
	/* =global		  							                                      			 */
	/*********************************************************************************************/

	html
	{
		padding:				0;
		margin:					0;
	}
	
	body 
	{
		height:					auto;
		
		color:					#333;	/* =10 */
		font-family: 			Arial, sans-serif, Helvetica;
		font-size:				11px;
		line-height:			2.1818em;	/* 24px */
		
		padding:				0;
		margin:					0;
		
		background-color:		#fff;	/* =1*/
	}

	input, select
	{
		font-family: 			Arial, sans-serif, Helvetica;
	}

		#totalContainer
		{
			position:				relative;
			
			height:					300px;
			min-height:				300px;
			width:					953px;
			margin:					0 auto;
			padding:				0 0 0 11px;
			/*background-color:		#f8f;*/
		}
		*>#totalContainer
		{
			height:					auto;
		}
		
	.hide 
	{
		display:				none;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	.readMore
	{
		color:					#c43525;	/* =4 */
		font-weight:			bold;
		font-size:				0.82em;	/* 9px */
		text-decoration:		none;
	}
	
		.readMore:hover
		{
			color:					#de762d;	/* =5 */
			text-decoration:		underline;
		}
	
	h1
	{
		margin-left:			11px;
		
		font-size:				1.72em;	/* 16px*/ 
		font-weight:			bold;
		line-height:			150%;
		color:					#173d7e;	
	}
	
		h2
		{
		}
		
			h3
			{
			}
	
	ul
	{
	}
	
		li
		{
		}
	
			li a
			{
				color:					#777;	/* =10 */
				text-decoration:		none;
			}
			
				li a:hover
				{
					color:					#333;	/* =13 */
					text-decoration:		underline;
				}
				
	/*********************************************************************************************/
	/* =misc 											                                		 */
	/*********************************************************************************************/
	#logo
	{
		display:				block;
		padding:				13px 0 0 13px;
	}

	#shortCutsFontSizeContainer
	{
		position:				absolute;
		right:					16px;
		top:					7px;
	}
	
	#dynamicImage
	{

		position:				absolute;
		left:					11px;
		top:					89px;
		width:					643px;
		height:					152px;
	}
		
	#content
	{
		float:					left;
		display:				inline;
		
		margin:					229px 0 0 5px;
		padding:				26px 26px 26px 0;
		width:					612px;
		overflow:				hidden;
	}
	
	#sideBar
	{
		float:					left;
		display:				inline;

		width:					310px;
		margin-top:				229px;

		padding-top:			26px;
	}
	
		#sideBar h2
		{
			margin-left:			27px;
			
			font-size:				1.72em;	/* 16px*/ 
			font-weight:			bold;
			line-height:			150%;
			color:					#173d7e;
			padding-bottom:			3px;			
		}

	#explanation
	{
		position:			absolute;
		right:				0;
		top:				89px;

		height:				98px;
		min-height:			98px;
		width:				261px;
		min-width:			261px;
		
		padding:			27px;

		font-size:			1em;
		line-height:		1.8em;
		color:				#fff;

		background-color:	#D42E14;
		background-image:	url(/sjablonen/3/images/general/background_search.gif);
		background-position:left top;
		background-repeat:	repeat-x;
	}

		#explanation h2
		{
			font-weight:		bold;
			font-size:			1.45em;
			padding-bottom:		3px;
		}

	/*********************************************************************************************/
	/* =fontSize								                                      			 */
	/*********************************************************************************************/
	#fontSize
	{
		float:					left;
		display:				inline;

		margin-top:				-3px;
		
		white-space:			nowrap;
	}
	*>#fontSize
	{
		height:					auto;
		width:					auto;
	}

		#fontSize li
		{
			display:			inline;
			float:				left;

			height:				1.2em;
			margin:				0;
			padding:			0;
		
			line-height:		100%;

			background-image: 	none;
			white-space:		nowrap;
		}
		
			#fontSize a, #fontSize div
			{
				float:					left;
				display:				inline;
				
				width:					10px;
				height:					1em;
				
				margin:					0;
				padding:				0 8px 0 8px;

				color:					#777;	/* =10 */	
				text-decoration:		none;
			}
			*>#fontSize a, #fontSize div
			{
				height:					auto;
				min-width:				10px;
				width:					auto;
			}

				#fontSize a:hover
				{
					color:					#333;	/* =13 */
					text-decoration:		underline;
				}

			#fontSize div /* not selectable */
			{
				color:					#c0c0c0;	/* =12 */
			}

			#fontSize .upsize
			{
			}

			#fontSize .downsize
			{
			}

			/* aAA vergroting */
			#fontSize span
			{
				text-transform:			lowercase;
				font-size:				1.36em;	/* 15px */
			}

				#fontSize span span
				{
					font-size:				0.73em;	/* 11px */
				}

					#fontSize span span span
					{
						font-size:				0.82em;	/* 9px */
					}

	/*********************************************************************************************/
	/* =shortCuts 								                                      			 */
	/*********************************************************************************************/	
	#shortCuts 
	{
		float:					left;
		display:				inline;
		
		padding:				0;
		margin:					0;
		
		font-size:				0.82em;	/* 9px */
	}
	
		#shortCuts li
		{
			display:			inline;
			float:				left;

			height:				1.2em;
			margin:				0;
			padding:			0;
		
			line-height:		120%;

			background-image: 	none;
			white-space:		nowrap;
		}
		
			#shortCuts a
			{	
				width:				10px;
				height:				1.2em;
				
				margin:				0;
				padding:			0 10px 0 10px;
				
				color:				#999;	/* =11 */
			}
			*>#shortCuts a /* IE 6 fix */
			{
				min-width:			10px;
				width:				auto;
			}
			
				#shortCuts a:hover
				{
					color:					#333;	/* =13 */
					text-decoration:		underline;
				}
				
			/* RSS */
			#shortCuts .rss a
			{
				display:				block;
				text-indent: 			-5000px;	/* remove text */
				
				width:					12px;
				height:					12px;
				padding:				0;
							
				background-repeat:		no-repeat;
				background-position: 	0 0;
				background-image:		url(/sjablonen/3/images/general/icon_rss.gif);
			}

				
	/*********************************************************************************************/
	/* =options				 		       	                    								 */
	/*********************************************************************************************/
	#totalContainer #options
	{
		clear:					both;
		float:					left;
		
		min-width:				300px;
		width:					300px;
		padding:				10px 0 38px 11px;
		
		font-size:				0.82em;
	}
	
	#totalContainer #options li
	{
		float:					left;
		display:				inline;
		
		padding:				0 44px 0 17px;			
	}
	
		#totalContainer #options li a
		{
			color:					#c0c0c0;	/* =12 */
			text-decoration:		none;
			font-weight:			bold;
		}
		
			#totalContainer #options li a:hover
			{
				color:					#333;	/* =13 */
				text-decoration:		underline;
			}

			#totalContainer #options a:hover span
			{
				cursor:					hand;
			}
			*>#totalContainer #options a:hover span
			{
				cursor:					pointer;
			}
			
			#totalContainer #options span
			{
				display:				block;
				height:					16px;
				
				text-indent: 			-5000px;	/* remove text */
							
				background-repeat:		no-repeat;
				background-position: 	2px 2px;
			}

			#totalContainer .print		
			{
				background-image:		url(/sjablonen/3/images/general/icon_print.gif); 
				background-position:	0 0;	
				background-repeat:		no-repeat;	
			}
			
				#totalContainer .print span
				{
					width:					30px;
					background-image:		url(/sjablonen/3/images/general/text/print.gif);	
				}
				
			#totalContainer .mail
			{
				background-image:		url(/sjablonen/3/images/general/icon_mail.gif); 
				background-position:	0 0;	
				background-repeat:		no-repeat;		
			}
	
				#totalContainer .mail span
				{
					width:					72px;
					background-image:		url(/sjablonen/3/images/general/text/doorsturen.gif);	
				}

	/*********************************************************************************************/
	/* =Errors & Warnings				  			                                      				   */
	/*********************************************************************************************/
				
		#content span.m2f_fail , #content span.m2f_success, #content span.notfound_404, #content span.error, #content span.warning
		{	
			display:				block;
			margin:					32px 0 32px 0;
			width:					80%;
			padding: 				13px 0 13px 80px;
			height:					38px;
		
			color: 					#f00;
			font-weight:			bold;
		
			border:					solid 2px #f00;
		}	
		
		#content span.m2f_fail
		{
			background: 			url(/sjablonen/3/images/general/m2f_fail.png) no-repeat 8px 8px #FFE0E1;
		}
		
		#content span.m2f_success
		{
			background: 			url(/sjablonen/3/images/general/m2f_success.png) no-repeat 8px 8px #FFE0E1;
		}
		
		#content span.notfound_404
		{
			background: 			url(/sjablonen/3/images/general/notfound_404.png) no-repeat 8px 8px #FFE0E1;
		}
		
		#content span.error
		{
			background: 			url(/sjablonen/3/images/general/error.png) no-repeat 8px 8px #FFE0E1;
		}
		
		#content span.warning
		{
			background: 			url(/sjablonen/3/images/general/warning.png) no-repeat 8px 8px #FFE0E1;
		}
		
		
	
	/*********************************************************************************************/
	/* =Paging									                                     			 */
	/*********************************************************************************************/
	#totalContainer .paging
	{
		float:				left;
		padding:			0;
		margin:				13px 0 0 0;
	}
	
		#totalContainer .paging li
		{
			float:				left;
			display:			block;
			
			
			padding:			0;
			margin:				0 8px 0 0;
			
			color:				#000;	/* =102 */
			line-height:		1.2em;
			
			background-image:	none;
		}
		
			#totalContainer .paging li a
			{
				display:			block;
				
				padding:			6px;
				
				color:				#000;	/* =100 */
				text-decoration:	none;
			}
			
				#totalContainer .paging li a:hover
				{
					padding:			6px 6px 4px 6px;
					
					color:				#16216c;			/* =100 */
									
					border-bottom:		2px solid #bcd600;	/* =100 */
					
					background-color:	#f5f5f5;		/* =104 */
				}
		
		#totalContainer .paging .info
		{
			padding:			6px 6px 6px 0;
			margin-right:		26px;
		
			color:				#999;	/* =102 */
		}
		
		#totalContainer .paging .inBetween
		{
			padding:			6px;
		
			color:				#b2b2b2;	/* =103 */
		}
		
		#totalContainer .paging .currentPage span
		{
			display:			block;
			
			padding:			6px;
			
			color:				#fff;	/* =105 */
			font-weight:		bold;
			
			background-color:	#16216c;	/* =101 */					
		}
		
		/* First and last pagenumber*/
		#totalContainer .paging .firstItem
		{
		}
		
		#totalContainer .paging .lastItem
		{
		}
		
		/* Next previous selectors*/
		#totalContainer .paging .previousPage a,
		#totalContainer .paging .nextPage a,
		#totalContainer .paging .previousPage a:hover,
		#totalContainer .paging .nextPage a:hover,
		#totalContainer .paging .previousPage.noPreviousPage,
		#totalContainer .paging .nextPage.noNextPage
		{
			padding:				2px 0 2px 0;
			border-bottom:			none;
			
			background-color:		transparent;
		}
	
		#totalContainer .paging .previousPage a span,
		#totalContainer .paging .nextPage a span,
		#totalContainer .paging .previousPage.noPreviousPage span,
		#totalContainer .paging .nextPage.noNextPage span
		{
			display:				block;

			width:					20px;
			height:					20px;
			
			margin:					0;
			padding:				0;

			text-indent: 			-5000px;	/* remove text */

			background-image:		url(/sjablonen/4/images/general/navigation_small.gif);
			background-repeat:		no-repeat;
			background-position: 	left top;
			background-color:		transparent;
			
			border:					medium none;
			overflow:				hidden;

			cursor:					pointer;
		}
		
			/* previous */
			#totalContainer .paging .previousPage a span
			{
				float:					left;
				display:				inline;
				
				background-position: 	left top;
			}
			
				#totalContainer .paging .previousPage a:hover span
				{
					background-position: 	left -20px;
				}
				
					#totalContainer .paging .previousPage.noPreviousPage span
					{
						background-position: 	left -40px;
					}
				
			/* next */
			#totalContainer .paging .nextPage, #totalContainer .paging .previousPage
			{
				width:				20px;
				border:				none;
			}
			
			
			#totalContainer .paging .nextPage a span
			{
				float:					right;
				display:				inline;
				
				background-position: 	-20px top;
			}
			
				#totalContainer .paging .nextPage a:hover span
				{
					background-position: 	-20px -20px;
				}
				
					#totalContainer .paging .nextPage.noNextPage span
					{
						background-position: 	-20px -40px;
					}

	/*********************************************************************************************/
	/* =path 							            		                          			 */
	/*********************************************************************************************/
	#path
	{
		position:				absolute;
		left:					0;
		top:					241px;
		
		width:					941px;

		height:					30px;
		margin-left:			11px;
		padding-left:			12px;
		
		font-size:				1em;
		
		background-color:		#173d7e;	/* =2 */
		background-image:		url(/sjablonen/3/images/general/background_path.gif); 
		background-repeat:		repeat-x;
		background-position: 	left top;
	}

	
		#path strong
		{
			display:				none;
		}
	
		#path ul
		{
			height:					1.2em;
			margin:					10px 0 0 0;
		}
		
			#path li
			{
				display:				inline;
				float:					left;
	
				height:					1.2em;
				margin:					0;
				padding:				0 0 0 4px;
			
				color:					#b0bdd1;	/* =4 */
				line-height:			120%;

				background-image: 		none;
				white-space:			nowrap;
			}
			
				#path a
				{	
					display:				block;
		
					width:					10px;
					height:					1.2em;
					
					margin:					0;
					padding:				0 10px 0 0;
					
					color:					#b0bdd1;	/* =4 */
					line-height:			120%;
					text-decoration:		none;
					
					background-image:		url(/sjablonen/3/images/general/bullet_path.gif);
					background-repeat:		no-repeat;
					background-position:	right 4px;
				}
				*>#path a /* IE 6 fix */
				{
					min-width:				10px;
					width:					auto;
				}
				
					#path a:hover
					{
						text-decoration:		underline;
					}


	/*********************************************************************************************/
	/* =campaign								                                      			 */
	/*********************************************************************************************/
	#campaign
	{
		float:					left;

		width:					310px; 
		padding:				0;
		margin:					0;
	}
	
	
		#campaign li
		{
			position:				relative;
			float:					left;
			display:				inline;
			
			margin:					0;
			padding:				0 0 12px 0;
			
			width:					310px;
			height:					60px;
		}
			
				#campaign li img
				{
					display:				block;
					
					height:					60px;
					width:					310px;
					margin:					0;
				}
				
				#campaign li a
				{
					display:				block;
					position:				absolute;
					
					left:					0;
					top:					0;
					
					padding:				5px 10px 0 110px;
					width:					190px;
					height:					55px;
					
					color:					#333;	/* =10 */
					font-weight:			bold;
					text-decoration:		none;
					font-size:				1.09em;
					
					background-repeat:		no-repeat;
					background-position: 	left top;
				
					background-image:		url(/sjablonen/3/images/general/background_campagne.png);
				}
				
					#campaign li a:hover
					{
						color:					#555;
						text-decoration:		underline;
						cursor:					pointer;
					}


					
	/*********************************************************************************************/
	/* =navigation								                                     			 */
	/*********************************************************************************************/
	#navigation
	{
		position:				absolute;
		left:					11px;
		top:					287px;
	
		padding:				0;
		height:					100px;
		width:					197px;
		
		/*background-color:		#f0f;*/
	}
	*>#navigation
	{
		min-height:				100px;
		height:					auto;
	}
		#navigation li
		{
			padding:				16px 13px 8px 13px;
			
			line-height:			1.415em;
			
			background-image:		url(/sjablonen/3/images/general/background_underline.gif); 
			background-repeat:		repeat-x;
			background-position:	bottom left;
		}
		
			/* level 1 */
			 #navigation ul
			{
				padding:				6px 0 6px 0; 
			}
			
				#navigation ul li
				{
					padding:				0; 
					background-image:		none;
				}
		
					#navigation ul li a						
					{
						display:				block;
						
						padding:				4px 0 0 32px;
	
						color:					#777; /*=10 */
	
						text-decoration:		none;
						
						background-image:		url(/sjablonen/3/images/general/bullet_list.gif); 
						background-repeat:		no-repeat;
						background-position:	19px 10px;
					}
	
						#navigation ul li a:hover					
						{
							color:					#173d7e; /* =2 */
							text-decoration:		underline;
						}			
					
						#navigation ul .selectedPath a, #navigation ul .selected a
						{
							color:					#112e5f; /* =5 */
							font-weight:			bold;
							
							background-image:		url(/sjablonen/3/images/general/bullet_selected.gif); 
						}
					
					ul#navigation li.selected span
					{	
						font-weight:				bold;
						font-size:					1.1em;
						color:						#183d7e;
					}
					
			/* level 2 */
			#navigation ul .selectedPath ul, #navigation ul .selectedHasChildren ul
			{
				padding:				11px 0 11px 30px; 
			}
			
				#navigation ul .selectedPath ul li, #navigation ul .selectedHasChildren ul li
				{
					display:				block;
					
					padding:				0 0 0 13px;
					
					background-image:		url(/sjablonen/3/images/general/bullet_list.gif); 
					background-repeat:		no-repeat;
					background-position:	0 10px;
				}
				
				#navigation ul .selectedPath ul .selected
				{
					background-image:		url(/sjablonen/3/images/general/bullet_selected.gif); 
				}
		
					#navigation ul .selectedPath ul li a, #navigation ul .selectedHasChildren ul li a						
					{
						padding:				0;
						
						color:					#777; /*=10 */
						font-weight:			normal;
						text-decoration:		none;
						background-image:		none;
					}
	
						#navigation ul .selectedPath ul li a:hover, #navigation ul .selectedHasChildren ul li a:hover				
						{
							color:					#173d7e; /* =2 */
							text-decoration:		underline;
						}			
					
							
						 #navigation ul .selectedPath ul .selected a, #navigation ul .selectedPath ul .selectedPath a
						{
						color:					#112e5f; /* =5 */
							font-weight:			bold;
						}
	
	
			/* level 3 */
			#navigation ul .selectedPath ul .selectedPath ul, #navigation ul .selectedPath ul .selectedHasChildren ul
			{
				margin-top:				0;
				
				padding:				11px 0 11px 30px; 
			}
			
				#navigation ul .selectedPath ul .selectedPath ul li, #navigation ul .selectedPath ul .selectedHasChildren ul li
				{
					display:				block;
					padding:				0 0 0 13px;
					
					background-image:		url(/sjablonen/3/images/general/bullet_list.gif); 
					background-repeat:		no-repeat;
					background-position:	0 10px;
				}
				
				#navigation ul .selectedPath ul .selectedPath ul .selected
				{
					background-image:		url(/sjablonen/3/images/general/bullet_selected.gif); 
				}
		
					#navigation ul .selectedPath ul .selectedPath ul li a, #navigation ul .selectedPath ul .selectedHasChildren ul li a						
					{
						padding:				0;
						
						color:					#777; /*=10 */
						font-weight:			normal;
						text-decoration:		none;
					}
	
						#navigation ul .selectedPath ul .selectedPath ul li a:hover, #navigation ul .selectedPath ul .selectedHasChildren ul li a:hover				
						{
							color:					#173d7e; /* =2 */
							text-decoration:		underline;
						}			
					
						
						 #navigation ul .selectedPath ul .selectedPath ul .selected a,  #navigation ul .selectedPath ul .selectedPath ul .selectedPath
						{
							color:					#112e5f; /* =5 */
							font-weight:			bold;
						}
}