/*
--------------------------------------------------------------------------------------------------
 Title:			Homepage Styles
 Created on: 	21-10-2008
 Author:     	Roberto De Vivo
 Client:		Vincis
 Project:		Hulpverleningsdienst Fryslân - GGD Subsite
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------
 =global
 =misc
 	
 =search	 
 =fontSize
 =shortCuts 

 =informationBlock
 =news
 =moreNews
 =faq	
 =aboutUs 
 =campaign
 =advertising	
 =otherSites
 
 =Print 
 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Backgound color		#fff	(white)

 =2 Newsbar				#173d7e	(ggd blue)				- also Path bgc
 =3	Search 				#d42e14	(ggd red)
 =4	Path link			#b0bdd1(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:					#777;	/* =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:					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:					#112e5f;	/* =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;
		padding:				3px 0 0 3px;
	}

	#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;
		
		padding:				0;	
		height:					152px;	
		width:					158px;
	}
	
	/*********************************************************************************************/
	/* =search	 								                                      			 */
	/*********************************************************************************************/	
	#quickSearch
	{
	
		position:				absolute;
	/*	right:					5px; */
		right:					11px;
		
		top:					89px;
		
		width:					157px;
		min-width:				157px;
		height:					152px;
		min-height:				152px;
		
		font-size:				1em;
		
		background-color:		#d42e14;	/* =3 */
		background-image:		url(/sjablonen/2/images/general/background_search.gif); 
		background-repeat:		repeat-x;
		background-position: 	left top;
	}*>#quickSearch
	{
		right:					11px;
	}

		#quickSearch label
		{
			display:				block;

			margin:					13px 0 10px 29px;
			height:					12px;
			
			line-height:			0.1em;
			text-indent: 			-5000px;	/* remove text */

			background-image:		url(/sjablonen/2/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/2/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/2/images/general/icon_rss.gif);
			}
			
	/*********************************************************************************************/
	/* =informationBlock						                                      			 */
	/*********************************************************************************************/
	#informationBlock
	{
		min-height:				139px;	
		height:					139px;
		width:					954px;
		margin:					190px 0 25px 0;
		padding:				13px 0 0 0;
		
		background-color:		#173d7e;	/* =2 */
		background-image:		url(/sjablonen/2/images/general/background_news.gif); 
		background-repeat:		repeat-x;
		background-position: 	left top;
	}
	*>#informationBlock
	{
		height:					auto;
	}


		#informationBlock  h3 a
		{
			font-weight:			bold;
			color:					#fff;
			text-decoration:		none;
		}
		
			#informationBlock  h3 a:hover
			{
				text-decoration:		underline;
			}
		
		#informationBlock  ul li a
		{
			color:					#cdd5e3;	/* =6 */
		}
		
			#informationBlock  ul li a:hover
			{
				color:					#fff;	/* =1 */
			}

			#informationBlock div a img
			{
				padding:				0 0 0 4px;
			}
				
	/*********************************************************************************************/
	/* =news											                               			 */
	/*********************************************************************************************/
	#news
	{
		float:					left;
		width:					276px;
		
		padding:				0 36px 0 13px;
		
		color:					#cdd5e3;	/* =6 */
	}

		#news  h2
		{
			margin:					0 0 3px 0;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/actueel.gif);
		}

	/*********************************************************************************************/
	/* =moreNews										                               			 */
	/*********************************************************************************************/
	#moreNews
	{
		float:					left;
		width:					276px;
		
		padding:				0 36px 0 13px;
		
		color:					#cdd5e3;	/* =6 */
	}
	
		#moreNews h2 a span
		{
			display:				block;
			
			margin:					0 0 3px 0;
			height:					24px;
	
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/overignieuws.gif);
			
			cursor:					hand;
		}
		*>#moreNews h2 a span
		{
			cursor:					pointer;
		}
		
		#moreNews	 ul
		{
		}
		
				
			#moreNews ul li
			{
				float:					left;
				display:				block;
				width:					276px;
				margin:					0 0 5px 0;
				line-height:			160%;
			}
		
			#faq li
			{
				position:				relative;
				padding:				4px 0 4px 0;	
				
				line-height:			1.415em;
			}
			
				#moreNews li span
				{
					float:					left;
					display:				block;
					
					margin:					0 8px 0 0;
					
					font-weight:			bold;
					color:					#fff;	/* =1 */
				}
				
				#moreNews li a
				{
					float:					left;
					display:				block;
				
					width:					238px;
					color:					#fff;	/* =1 */
			
				}

				
	/*********************************************************************************************/
	/* =faq										                                      			 */
	/*********************************************************************************************/
	#informationBlock #faq
	{
		float:					left;
		
		width:					276px;
		
		padding:				0 15px 0 0;
	}
	
		#faq h2 span
		{
			display:				block;
			margin:					0 0 3px 13px;
			
			height:					24px;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/veelgesteldevragen.gif);
			cursor:					hand;
		}
		*>#faq h2 a span
		{
			cursor:					pointer;
		}
		
		#faq ul
		{
			padding:				0;	
		}
		
			#faq li
			{
				position:				relative;
				padding:				4px 0 4px 13px;	
				
				line-height:			1.415em;
				
				background-image:		url(/sjablonen/2/images/general/bullet_news.gif); 
				background-repeat:		no-repeat;
				background-position:	0px 10px;
			}

	/*********************************************************************************************/
	/* =aboutUs 								                                      			 */
	/*********************************************************************************************/	
	
	#aboutUs
	{
		float:					left;
		width:					276px;
		
		padding:				0 23px 0 13px;
	}

		#aboutUs  h2
		{
			margin:					0 0 3px 0;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/watdoetggd.gif);
		}
		
			#aboutUs a img
			{
				padding:				0 0 0 4px;
			}
			
	/*********************************************************************************************/
	/* =campaign								                                      			 */
	/*********************************************************************************************/
	#campaign
	{
		float:					left;

		width:					186px; 
		padding:				0;
		margin:					0;
	}
	
		#campaign h2 span
		{
			display:				block;
			
			margin:					0 0 3px 26px;
			height:					24px;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/campagnes.gif);
			cursor:					hand;
		}
		*>#campaign h2 a span
		{
			cursor:					pointer;
		}
		
		#campaign div
		{
			position:				relative;
			display:				block;
			
			margin:					0;
			padding:				0 0 24px 0;
			
			width:					184px;
			height:					60px;
		}
			
				#campaign div img
				{
					display:				block;
					
					height:					60px;
					width:					184px;
					margin:					1px 0 0 0;
				}
				
				#campaign div a
				{
					display:				block;
					position:				absolute;
					left:					0;
					top:					0;
					
					padding:				5px 4px 0 68px;
					width:					112px;
					min-height:				56px;
					height:					56px;
					
					color:					#777;	/* =10 */
					font-weight:			bold;
					text-decoration:		none;
					/*letter-spacing:		-0.07em; */
					
					background-repeat:		no-repeat;
					background-position: 	left -1px;
					*background-position: 	left top; /* only read by IE */
					
					filter:					progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sjablonen/2/images/general/background_campagne.png', sizingMethod='scale');
				}
				*>#campaign div a
				{
					height:					auto;
					
					background-image:		url(/sjablonen/2/images/general/background_campagne.png);
					filter:					none;
				}
				
					#campaign div a:hover
					{
						color:					#333;
						text-decoration:		none;
						cursor:					hand;
					}
					*>#campaign div a:hover
					{
						cursor:					pointer;
					}
					
	/*********************************************************************************************/
	/* =advertising								                                      			 */
	/*********************************************************************************************/	
	#advertising
	{
		float:					left;
		
		width:					282px;	/* 120 + 120 + 21 + 19 */
		height:					196px;	/* 60 + 60 + 24 +24  + 30*/
		padding:				0 19px 0 0;

		background-repeat:		no-repeat;
		background-position: 	right 22px;
		
		background-image:		url(/sjablonen/2/images/general/background_advertising.gif);
	}
	
		#advertising h2
		{
			margin:					0 0 3px 22px;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/onderdeaandacht.gif);
		}
		
		#advertising li
		{
			float:				left;
			padding:			0 0 24px 21px;
		}
		
			#advertising li	img
			{
				display:			block;
			}
			
	/*********************************************************************************************/
	/* =otherSites								                                      			 */
	/*********************************************************************************************/	
	#otherSites
	{
		float:					left;
		width:					126px;
		padding:				0 0 0 28px;
	}
	
		#otherSites h2
		{
			margin:					0 0 3px 0;
			height:					27px;
			
			text-indent: 			-5000px;	/* remove text */
						
			background-repeat:		no-repeat;
			background-position: 	0 0;
			
			background-image:		url(/sjablonen/2/images/general/text/hulpverleningsites.gif);
		}
		
		#otherSites li
		{
			display:				block;
			padding:				20px 0 10px 0;
		}
}


/*********************************************************************************************/
/* =Print 									                                      			 */
/*********************************************************************************************/
@media print
{
	.hide, #shortCutsFontSizeContainer, .logoImage, #contact, #dynamicImage, #quickSearch, #tabs
	{
		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;
		}

}
