/*
--------------------------------------------------------------------------------------------------
 Title:			Homepage Styles
 Created on: 	14-10-2008
 Author:     	Roberto De Vivo
 Client:		Vincis
 Project:		Hulpverleningsdienst Fryslân Portaal
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------
 =global
 =misc
 	
 =search	 
 =fontSize
 =shortCuts 
 =news
 =departments	
 
 =Print 
 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Backgound color		#fff	(white)

 =2 Newsbar				#0079c2	(hvd blue)				- also Path bgc
 =3	Search 				#dc192b	(hvd red)
 =4	Path link			#9fcde8	(light hvd blue)
 =5	Link MO				#00589c	(dark hvd blue)
 =6	News text			#c8e2f2	(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:					#777;	/* =10 */
		font-family: 			Verdana, Helvetica, Arial, sans-serif;
		font-size:				11px;
		line-height:			2.1818em;	/* 24px */
		
		padding:				0;
		margin:					0;
		
		background-color:		#fff;	/* =1*/
	}

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

		#totalContainer
		{
			position:				relative;
			
			height:					300px;
			min-height:				300px;
			width:					954px;
			margin:					0 auto;
			padding:				0 11px 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
	{
	}
	
		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;
	}

	#shortCutsFontSizeContainer
	{
		position:				absolute;
		right:					16px;
		top:					7px;
	}
	
	#dynamicImage
	{
		position:				absolute;
		left:					11px;
		top:					89px;
		width:					639px;
		height:					152px;
	}
	
	#contactLink
	{
		display:				block;

		position:				absolute;
		right:					168px;
		top:					89px;
		
		height:					152px;
		width:					157px;
	}
	
				
	/*********************************************************************************************/
	/* =quickSearch	 							                                      			 */
	/*********************************************************************************************/	
	#quickSearch
	{
	
		position:				absolute;
		right:					11px;
		top:					89px;
		
		width:					157px;
		min-width:				157px;
		height:					152px;
		min-height:				152px;
		
		font-size:				1em;
		
		background-color:		#dc192b;	/* =3 */
		background-image:		url(/sjablonen/1/images/general/background_search.gif); 
		background-repeat:		repeat-x;
		background-position: 	left top;
	}

		#quickSearch label
		{
			display:				block;

			margin:					13px 0 10px 29px;
			height:					12px;
			
			line-height:			0.1em;
			text-indent: 			-5000px;	/* remove text */

			background-image:		url(/sjablonen/1/images/general/text/vinden.gif);
			background-repeat:		no-repeat;
			background-position: 	left top;
		}
		
		 #quickSearch #qs_kw_or
		{
			float:					left;
			display:				inline;
			
			margin-left:			16px;
			padding:				2px 8px 0 8px;
			
			height:					16px;
			width:					9.08em;	
			
			color:					#666;
			font-size:				1em;
		}
		*>#quickSearch #qs_kw_or
		{
			width:					9.57em;	
		}
		
		#quickSearch #qs_kw_or
		{
		}
		
			#quickSearch #qs_kw_or:focus
			{
				color:					#87898a;	/* =10 */
			}
		
		#quickSearch .button
		{
			float:					left;
			display:				inline;

			width:					83px;
			max-width:				83px;
			max-height:				22px;
			height:					22px;	
			margin:					14px 0 0 28px;
			*padding-left:			400px;

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

			background-image:		url(/sjablonen/1/images/general/button_zoek.gif);
			background-repeat:		no-repeat;
			background-position: 	left top;
			background-color:		transparent;
			
			border:					medium none;
			overflow:				hidden;
			cursor:					hand;
		}
		*>#quickSearch .button
		{
			cursor:					pointer;
		}
		
			#quickSearch .button:hover
			{
				background-position: 	left bottom;
			}

	/*********************************************************************************************/
	/* =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/1/images/general/icon_rss.gif);
			}
			
	/*********************************************************************************************/
	/* =news									                                      			 */
	/*********************************************************************************************/
	#news
	{

		min-height:				139px;	
		height:					139px;
		width:					954px;
		margin:					212px 0 25px 0;
		padding:				13px 0 0 0;
		
		background-color:		#0079c2;	/* =2 */
		background-image:		url(/sjablonen/1/images/general/background_news.gif); 
		background-repeat:		repeat-x;
		background-position: 	left top;
	}
	*>#news
	{
		height:					auto;
	}
	
		#news h2
		{
			text-indent: 			-5000px;	/* remove text */
			line-height:			140%;
			
			padding:				0 0 12px 0;

			background-repeat:		no-repeat;
			background-position: 	316px 0;
			background-image:		url(/sjablonen/1/images/general/text/nieuws_hvd.gif);
		}
		
		#news ul
		{
			min-height:				10px;
			height:					10px;
		}
		*>#news ul
		{
			height:					auto;
		}
		
			#news ul li
			{
				float:					left;
				width:					276px;
				
				padding:				0 36px 11px 13px;
				
				color:					#c8e2f2;	/* =6 */
			}
			
				#news ul .lastItem
				{
					float:					left;
					width:					276px;
					
					padding:				0 15px 10px 13px;
				}
			
			#news ul li h3
			{
				font-weight:			bold;
				line-height:			1.67em;
				padding-bottom:			2px;
			}
			
			#news ul li a
			{
				color:					#fff;	/* =1 */
			}

				#news ul li a img
				{
					padding:				0 0 0 4px;
				}
				
	/*********************************************************************************************/
	/* =departments								                                      			 */
	/*********************************************************************************************/
	#departments
	{
		padding:				0 0 11px 0;
		width:					954px;
	}
			
		#departments h2
		{
			text-indent: 			-5000px;	/* remove text */
			line-height:			140%;
			
			margin:					0 0 0 13px;
						
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/sjablonen/1/images/general/text/bestaatuit.gif);
		}

		#departments ul 
		{
			clear:					both;
		}
		
			#departments ul li
			{
				float:					left;
				display:				inline;
				
				width:					303px; /* 325 + padding */
				padding:				0 0 0 23px;
				margin:					0;
			}

				/* LOGO */
				#departments ul li .logoImage
				{
					display:				block;
					
					height:					60px;
					padding:				15px 0 8px 0;
				}
				
					#departments ul li .logoImage img
					{
						display:				block;
						
						padding:				0 0 0 43px;
						
						background-repeat:		no-repeat;
						background-position: 	20px 8px;
						background-image:		url(/sjablonen/1/images/general/arrow_logo.gif);	
					}
					
				#departments ul .ghor .logoImage
				{
					height:					68px;
					padding:				7px 0 8px 0;

				}
					#departments ul .ghor .logoImage img
					{
						background-position: 	20px 16px;
					}
					
			/* breedtes blokken */
			#departments ul .brandweer
			{
				width:					275px; /* 314 - 28 -11 */
				padding:				0 28px 0 11px;
			}
			
			#departments .ggd
			{
				background-repeat:		no-repeat;
				background-position: 	left 104px;
				background-image:		url(/sjablonen/1/images/general/background_department.gif);
			}
				
			#departments ul .ghor
			{
				width:					281px; /* 314 - 28 -11 */
				padding:				0 11px 0 22px;
			}
			
			/* about us */
			#departments ul .aboutUs
			{
				width:					281px; /* 314 - 28 -11 */
				padding:				0 11px 0 22px;
			}
			
				#departments ul .aboutUs h3
				{
					padding:			23px 0 4px 0;
					font-size:			1.09em;
					font-weight:		bold;
				}
				
					#departments ul .aboutUs h3 span
					{
						text-indent: 			none;
						
						background-image:		none;
					}
				
				/* logo's */
				#departments ul li h3 span
				{
					display:				block;
					height:					16px;
					
					text-indent: 			-5000px;	/* remove text */
								
					background-repeat:		no-repeat;
					background-position: 	2px 0;
				}
				
				#departments ul .brandweer h3 span
				{
					background-image:		url(/sjablonen/1/images/general/text/nieuws_brandweer.gif);	
				}

				#departments ul .ggd h3 span
				{
					background-image:		url(/sjablonen/1/images/general/text/nieuws_ggd.gif);	
				}
				
				#departments ul .ghor h3 span
				{
					background-image:		url(/sjablonen/1/images/general/text/nieuws_ghor.gif);	
				}

				/* news in list*/
				#departments ul li ul 
				{
					padding:				0;
					margin:					0;
					width:					275px;
				}
	
					#departments ul li ul li
					{
						float:					none;
						display:				list-item;
						
						padding:				3px 0 2px 0;
						margin:					0;
						width:					275px;
						line-height:			1.67em;
					}
					
						#departments ul li ul li span
						{
							float:					left;
							
							width:					3.8em;
							font-weight:			bold;
						}
}


/*********************************************************************************************/
/* =Print 									                                      			 */
/*********************************************************************************************/
@media print
{
	.hide, #shortCutsFontSizeContainer, .logoImage, #contact, #dynamicImage, #quickSearch, #tabs, #departments h2
	{
		display:				none;
		visibility:				hidden;
	}
	
	body 
	{
		font-family: 			Verdana, Helvetica, Arial, sans-serif;
		font-size:				11px;
		line-height:			1.8em;
	}

	.floatCloser
	{
		clear:					both;
	}

	img
	{
		padding:				1px;
		margin:					0 0 12px 0;
		
		border:					1px solid #127983;	/* =1 */
	}
	
	a
	{
		color:					#000;
		text-decoration:		underline;
	}
	
		a img
		{
			border:					none;
		}

}