/*
--------------------------------------------------------------------------------------------------
 Title:			Homepage Styles
 Created on: 	20-07-2009
 Author:     	Roberto De Vivo
 Client:		Gemeente Oldenzaal
 Project:		Website
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------
 =global
 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1		Default 		#0c226b	(Dark Blue)
 =2		Default MO		#8178a0	(Light Dark Blue)
 =3		Binnenstad		#9b2c98	(Magenta)
 =4		Woon Leef		#f39800	(Orange)
 =5		Bedrijvigheid	#008fc2 (Blue)
 =6		Toerisme		#97be0d	(Green)
 =7		Samen Oldenzaal	#e52b38	(Old Red)
 =8		Tool button MO	#fed300	(Yellow)

 ***** Standard Module colours *****
 =10	Newshead text	#777	(medium gray)
 =11	Shortcuts		#999	(medium light gray)
 =12	date			#b2b2b2	(light gray)
 =13	body text		#333	(dark grey)
 =14	calendar alt	#f5f5f5	(ultra light gray)
 =15	body background #fff	(white)

*/

@media screen 
{
	/*********************************************************************************************/
	/* =global		  							                                      			 */
	/*********************************************************************************************/

	html
	{
		padding:				0;
		margin:					0;
	}
	
	body 
	{
		height:					auto;
		
		color:					#0c226b;	/* =1 */
		font-family: 			Arial, Helvetica, sans-serif;
		font-size:				11px;
		line-height:			1.56em;		/* 25px */
		
		padding:				0;
		margin:					0;
		
		background-color:		#fff;		/* =15*/

	}

	input, select
	{
		font-family: 			Arial, Helvetica, sans-serif;
		font-size:				1em;
	}

		#totalContainer
		{
			position:				relative;
			
			height:					300px;
			min-height:				300px;
			width:					980px;
			margin:					0;
			padding:				0 0 10px 0;
		}
		*>#totalContainer
		{
			height:					auto;
		}
		
	.hide 
	{
		display:				block;
		position:				absolute;
		left:					-9999px;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	
	h1
	{
	}
	
		h2
		{
		}
		
			h3
			{
			}
	
	a
	{
		text-decoration:		underline;
	}
	
		a:hover
		{
		}
	
	#printHeader
	{
		display:				none;
	}

	
	/*********************************************************************************************/
	/* =mainContainer									      			                       	 */
	/*********************************************************************************************/
	#mainContainer
	{
		float:					left;
		display:				inline;
		width:					780px;	/*690 + 40 */
	}

				
	/*********************************************************************************************/
	/* =Header									      			                          		 */
	/*********************************************************************************************/
	#header
	{
		position:				relative;
		width:					730px;	/*690 + 40 */
		
		height:					462px;
		z-index:				0;
	}

	#dynamicImage,
	#dynamicImage img
	{
		position:				relative;
		display:				block;

		width:					596px;
		height:					421px;
		margin:					0;
		padding:				0;
		
		border:					0 solid transparent
	}
	
		#dynamicImage img
		{
			position:				absolute;
			left:					0;
			top:					0;
			
			z-index:				799999;
		}
		
	#header #logo
	{
		position:				absolute;
		left:					220px;
		top:					97px;
		display:				block;
		
		width:					467px;
		height:					364px;
		margin:					0;	/*	419-69*/
		padding:				0;
		
		background-repeat:		no-repeat;
		background-position: 	left top;
		
		background-image:		url(/sjablonen/1/images/general/overlay/logo/default_large.png);
		
		z-index:				899999;
	}
	
		#header #logo img
		{
			position:				absolute;
			left:					220px;
			top:					97px;
			display:				block;
			
			width:					467px;
			height:					364px;
			margin:					0;	/*	419-69*/
			padding:				0;
		}
	
	#header #slogan
	{
		position:				absolute;
		left:					451px;
		top:					238px;
			
		width:					200px;
		height:					238px;
		margin:					0;
		background-repeat:		no-repeat;
		background-position: 	left top;
		
		z-index:				999999;
	}

	/*********************************************************************************************/
	/* =content									                                      			 */
	/*********************************************************************************************/	
	#content
	{
		float:					left;
		width:					690px;
		
		height:					30px;
		min-height:				30px;
		margin-top:				-8px;
		padding:				0 0 13px 43px;

		/*font-size:				0.91em;*/	/* 10px */
		line-height:			1.29em;	/* 21 px */
	}
	*>#content
	{
		height:					auto;
	}

		#content li
		{
			float:					left;
			display:				inline;
			
			width:					136px;
			height:					64px;
			min-height:				64px;
		}
		*>#content li
		{
			height:					auto;
		}

			#content h2 a span
			{
				display:				block;
				
				text-indent: 			-5000px;	/* remove text */
				
				margin:					0 0 5px 0;
				
				background-repeat:		no-repeat;
				background-position: 	left bottom;
			}
			
				#content h2 a:hover span
				{
					background-position: 	left top;
					cursor:					pointer;
				}
			
				/* Section parts */
				#binnenstad 
				{
					margin-top:				6px;
				}
				
					#binnenstad h2 a span
					{
						width:					108px;
						height:					16px;
						
						background-image:		url(/sjablonen/1/images/general/link_binnenstad.gif);
					}
				
				#woon 
				{
					margin-top:				13px;
				}
				
					#woon h2 a span
					{
						width:					127px;
						height:					38px;
						margin-bottom:			3px;
						
						background-image:		url(/sjablonen/1/images/general/link_woon_leef.gif);
					}
				
				#bedrijvigheid 
				{
					margin-top:				45px;
				}
				
					#bedrijvigheid h2 a span
					{
						width:					124px;
						height:					19px;
						margin-bottom:			3px;
						
						background-image:		url(/sjablonen/1/images/general/link_bedrijvigheid.gif);
					}
				
				#toerisme 
				{
					margin-top:				45px;
				}
				
					#toerisme h2 a span
					{
						width:					91px;
						height:					16px;
						margin-bottom:			6px;
						
						background-image:		url(/sjablonen/1/images/general/link_toerisme.gif);
					}
				
				#samenOldenzaal 
				{
				}
				
					#samenOldenzaal h2 a span
					{
						width:					99px;
						height:					35px;
						margin-bottom:			6px;
						margin-left:			3px;
						
						background-image:		url(/sjablonen/1/images/general/link_samen_oldenzaal.gif);
					}
					
					#content #samenOldenzaal p
					{
						padding:			0 20px 0 3px;
					}
			
			#content li p
			{
				padding:			0 20px 0 0;
			}
	/*********************************************************************************************/
	/* =sideBar									      			                          		 */
	/*********************************************************************************************/
	#sideBar
	{
		float:					left;
		display:				inline;
		
		width:					196px;
		padding:				0;
	}
	
	#sideBar #bnr
	{
		display:				block;
		padding-bottom:			6px;
	}
	
	#digiLoket
	{
		float:					left;
		display:				block;
		width:					155px;
		height:					166px;
		margin:					14px 0 20px 0;
		padding:				5px 10px 10px 10px;
		background-image:		url(/sjablonen/1/images/general/bgDigiLoket.png);
		background-repeat:		no-repeat;
	}
	
		#digiLoket h2
		{
			font-weight:		bold;
		}
		
			#digiLoket h2 a
			{
				text-decoration:		none;
				color: 					#0C226B;
			}
			
				#digiLoket h2 a:hover
				{
					text-decoration:		underline;
				}
		
		#digiLoket a.header
		{
			float:					left;
			display:				block;
			clear:					both;
			width: 					150px;
			height:					57px;
			margin:					5px 0 0 0;
			text-indent:			-4000px;
			background-image:		url(/sjablonen/1/images/general/headerLoket.png);
			background-repeat:		no-repeat;
			font-size:				0.9em;
		}
		
		
		#digiLoket ul
		{
			float:				left;
			display:			block;
			clear:				both;
			margin:				0 0 4px 3px;
		}
		
			#digiLoket ul li
			{
				width:			150px;
			}
		
				#digiLoket ul li a
				{
					color: 					#0C226B;
					text-decoration:		none;
				}
		
		#digiLoket ul li a:hover,
		#digiLoket a.more:hover
		{
			text-decoration:		underline;
		}
		
		#digiLoket a.more
		{
			float:				left;
			display:			block;
			clear:				both;
			padding:			0 0 0 3px;
			color: 				#0C226B;
			font-weight:		bold;
			text-decoration:	underline;
			font-size:			0.85em;
			width:				150px;
		}
		
			#digiLoket a.more:hover
			{
				color:			#8178a0;
			}
	
	#mostAsked h2,
	#spotlight h2
	{
		float:					left;
		display:				block;
		width:					165px;
		height:					16px;
		
		color:					#0c226b;
		font-weight:			bold;
		line-height:			1.3em;
		padding:				2px 0 0 10px;
		margin:					0 0 3px 0;
		
		background-image:		url(/sjablonen/1/images/general/bgHeaderGeneral.gif);
		background-repeat:		no-repeat;
	}
	
	#mostAsked ul, 
	#spotlight ul 
	{
		margin:					0 0 20px 0;
	}
	
		#mostAsked ul li,
		#spotlight ul li
		{
			width:					165px;
			padding:				0 0 2px 10px;
		}
		
			#mostAsked ul li a,
			#spotlight ul li a
			{
				color:				#0c226b;
				text-decoration:	none;
			}
			
				#mostAsked ul li a:hover,
				#spotlight ul li a:hover
				{
					color:				#8178A0;
					text-decoration:	none;
				}
				
		#spotlight .readMore,
		#mostAsked .readMore
		{
			font-weight:		bold;
		}
			
	/*********************************************************************************************/
	/* =tools									      			                          		 */
	/*********************************************************************************************/
	#tools
	{
		/*padding:				32px 0 24px 0;*/
		padding:				32px 0 4px 0;
	}
	
		/* =QuickLinks */
		#quickLinks
		{
			width:					175px;
			height:					16px;
			min-height:				16px;
			margin:					0;
			padding:				16px 0 0 0;
		}
		*>#quickLinks 
		{
			height:					auto;	
		}
		
			#quickLinks li
			{
				float:					left;
				display:				inline;
				
				width:					175px;
				height:					16px;
				min-height:				16px;
				margin:					0;
				padding:				0 0 2px 10px;
				
				font-weight:			bold;
				
				background-image:		url(/sjablonen/1/images/general/bullet_sidebar.gif);
				background-repeat:		no-repeat;
				background-position: 	2px 7px;
			}
			*>#quickLinks li
			{
				height:					auto;	
			}

				#quickLinks li a
				{
					color:					#0c226b;	/* =1 */
					text-decoration:		none;
				}
				
					#quickLinks li a:hover
					{
						color:					#8178a0;	/* =2 */
					}

				
				#quickLinks .infodesk,
				#quickLinks .contact,
				#quickLinks .organisatie,
				#quickLinks .politiek,
				#quickLinks .home
				{
					padding:				13px 0 0 0;
					margin:					0;
					background-image:		none;
				}

					#quickLinks .infodesk a ,
					#quickLinks .organisatie a ,
					#quickLinks .politiek a ,
					#quickLinks .home a ,
					#quickLinks .contact a
					{
						display:				block;
				
						width:					165px;
						height:					16px;
						
						line-height:			1.3em;
						
						margin:					0;
						padding:				0 0 0 10px;

						background-image:		url(/sjablonen/1/images/general/button_digitaal_loket.gif);
						background-repeat:		no-repeat;
						background-position: 	left top;
					}
			
					#quickLinks .contact a
					{
						background-image:		url(/sjablonen/1/images/general/button_contact.gif);
					}
					
					#quickLinks .organisatie a
					{
						background-image:		url(/sjablonen/1/images/general/button_organisatie.gif);
					}
					
					#quickLinks .politiek a
					{
						background-image:		url(/sjablonen/1/images/general/button_politiek.gif);
					}
					
					#quickLinks .home a
					{
						background-image:		url(/sjablonen/1/images/general/button_home.gif);
					}
					
						#quickLinks .infodesk a:hover,
						#quickLinks .organisatie a:hover,
						#quickLinks .politiek a:hover,
						#quickLinks .home a:hover,
						#quickLinks .contact a:hover
						{
							color:					#fed300;	/* =8 */
							
							background-position: 	left bottom;
						}
						
	/* =generalOptions */
	#generalOptions
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		width:					98px;
		padding-top:			12px;
		
		/*font-size:				0.91em;*/	/* 10px */
	}

		#generalOptions li 
		{
			float:					left;
			display:				inline;
			
			height:					13px;
			min-height:				13px;
			padding:				0;
			margin:					0;
		}
		*>#generalOptions li 
		{
			height:					auto;
		}
		
			#generalOptions li a
			{
				display:				block;
		
				width:					78px;	/* 98 - 18 */
				height:					13px;
				min-height:				13px;
				margin:					2px 0 2px 0;
				padding:				0 2px 0 18px;
				
				line-height:			1.36em;
				
				color:					#0c226b;	/* =1 */
				text-decoration:		none;
				
				background-repeat:		no-repeat;
				background-position: 	1px top;
			}
			*>#generalOptions li a
			{
				height:					auto;
			}
			
				#generalOptions li a:hover
				{
					color:					#8178a0;	/* =2 */
					text-decoration:		underline;
					
					background-position: 	1px bottom;
				}
		
			#generalOptions .fontSize a
			{
				background-image:		url(/sjablonen/1/images/general/link_bullet_letters_vergrot.gif);
			}
			
			#generalOptions .readAloud a
			{
				background-image:		url(/sjablonen/1/images/general/link_bullet_voorlezen.gif);
			}
			
			#generalOptions .highContrast a
			{
				background-image:		url(/sjablonen/1/images/general/link_bullet_contrast.gif);
				display:				none;
			}

	/* =languages */
	#languages
	{
		float:					left;
		display:				inline;
		
		width:					98px;
		padding-top:			12px;
		
		/* font-size:				0.91em;*/	/* 10px */
	}

		#languages li 
		{
			float:					left;
			display:				inline;
			
			height:					13px;
			min-height:				13px;
			padding:				0;
			margin:					0;
		}
		*>#languages li 
		{
			height:					auto;
		}
		
			#languages li a
			{
				display:				block;
		
				width:					78px;	/* 98 - 18 */
				height:					13px;
				min-height:				13px;
				margin:					2px 0 2px 0;
				padding:				0 2px 0 18px;
				
				line-height:			1.36em;
				
				color:					#0c226b;	/* =1 */
				text-decoration:		none;
				
				background-repeat:		no-repeat;
				background-position: 	left top;
			}
			*>#languages li a
			{
				height:					auto;
			}
			
				#languages li a:hover
				{
					color:					#8178a0;	/* =2 */
					text-decoration:		underline;
					
					background-position: 	left bottom;
				}
		
			#languages .german a
			{
				background-image:		url(/sjablonen/1/images/general/link_bullet_deutsch.gif);
			}
			
			#languages .english a
			{
				background-image:		url(/sjablonen/1/images/general/link_bullet_english.gif);
			}
			

	/*********************************************************************************************/
	/* =quickSearch								                                      			 */
	/*********************************************************************************************/	
	#quickSearch
	{
		margin:					0 0 11px 0;
		padding:				0;
		
		height:					16px;
		min-height:				16px;
		white-space:			nowrap;
	}
	*>#quickSearch
	{
		height:					auto;
	}

		#quickSearch legend
		{
			display:			none;
		}
		
		#quickSearch label
		{
		}
		
		#quickSearch #qs_kw_or
		{
			float:					left;
			display:				inline;
			
			margin:					0;
			padding:				2px 0 0 10px;
			height:					16px;
			width:					97px;		/* 175 - 20 -10 */			
			
			color:					#8178A0;	/* =1 */
			font-size:				1em;
			font-weight:			normal;

			background-image:		url(/sjablonen/1/images/general/quickSearchBox.gif);
			background-repeat:		no-repeat;
			background-position: 	left top;
			border:					0px solid #fff;
		}
		
				
			#quickSearch #qs_kw_or:focus
			{
			}
		
		#quickSearch .button
		{
			float:					left;
			display:				inline;
			
			height:					18px;
			width:					67px;
			margin:					0;
			padding:				0;
			
			line-height:			1px;
			font-size:				1px;
			
			text-indent: 			-5000px;	/* remove text */

			background-image:		url(/sjablonen/1/images/general/quickSearchButton.gif);
			background-repeat:		no-repeat;
			background-position: 	right top;
			background-color:		transparent;
			
			border:					medium none;
			overflow:				hidden;
			cursor:					pointer;
		}

			*>#quickSearch .button:hover
			{
				background-position: 	right bottom;
			}
	
	/*********************************************************************************************/
	/* =news									                                      			 */
	/*********************************************************************************************/	
	#news
	{
		float:					left;
		display:				inline;
		
		width:					644px;
		min-height:				30px;
		margin:					30px 0 0 0;
	}
	*>#news
	{
		height:					auto;
	}
	
		#news h2 a
		{
			padding:				0 0 12px 0px;
			
			font-weight:			normal;
			font-size:				1.74em;
			line-height:			1.18em;
			color:					#0c226b;	/* =1 */
			text-decoration:		none;
		}
		
			#news h2 a:hover
			{
				color:					#8178a0;	/* =2 */
				text-decoration:		underline;
			}

	#news ul
	{
		float:				left;
		width:				312px;
		margin:				6px 20px 0 0;
	}
	
	#news ul.lastColumn
	{
		margin-right:		0px;
		
	}

		#news li
		{
			width:					312px;	
			height:					16px;
			min-height:				16px;
			margin:					0;
			padding:				0 0 9px 0;
		}
		*>#news li
		{
			height:					auto;
		}
		
			#news li span,
			#moreNews li span
			{
				color:				#b1b1b1;		
			}
		
			#news li h3,
			#moreNews li h3,
			#moreNews .readMore
			{
				font-weight:			bold;
				font-size:				1.2em;
				line-height:			1.18em;
			}
			
				#news li h3 a,
				#moreNews li h3 a,
				#moreNews .readMore
				{
					color:					#0c226b;	/* =1 */
					text-decoration:		none;
				}
				
					#news li h3 a:hover,
					#moreNews li h3 a:hover,
					#moreNews .readMore:hover
					{
						color:					#8178a0;	/* =2 */
						text-decoration:		underline;
					}
			
			#news li p
			{
				/*font-size:				0.91em;*/	/* 10px */
				line-height:			1.29em;	/* 21 px */
				margin:					0;
				padding:				0;
			}
		
			#news li a img
			{
				float:					left;
				display:				inline;
				
				margin:					5px 8px 0 0;
			}
		
		#news .lastItem 
		{
		}
		
			#news .lastItem p
			{
			}
			
			#news li .readMore
			{
				float:					none;
				font-weight:			bold;
				color:					#0c226b;	/* =1 */
				text-decoration:		none;
			}
			
				#news .readMore:hover
				{
					color:					#8178a0;	/* =2 */
					text-decoration:		underline;
				}
				
		#news .readMore
		{
			float:					right;
			font-weight:			bold;
			color:					#0C226B;
		}

	
	/*********************************************************************************************/
	/* =moreNieuws										                                      	 */
	/*********************************************************************************************/	
	
	#moreNews			
	{
		float:					left;
		width:					300px;
		margin:					58px 0 0 28px;
	}
	
		#moreNews ul
		{
			float:					left;
			width:					320px;
			margin:					0 0 13px 0;
		}
		
			#moreNews ul li
			{
				float:					left;
				height:					10px;
				padding:				0 0 10px 0;
				width:					320px;
			}
			*>#moreNews ul li
			{
				min-height:				10px;
				height:					auto;
			}
				
			#moreNews .readMore	
			{
				font-weight:			normal;		
			}
				
	/*********************************************************************************************/
	/* =footerShortCuts 								                                      	 */
	/*********************************************************************************************/	
	#footerShortCuts 
	{
		clear:					both;
		
		height:					10px;
		min-height:				10px;
		padding:				0 0 0 43px;
		
		font-size:				0.92em;
	}
	*>#footerShortCuts 
	{
		height:					auto;
	}
	
		#footerShortCuts li
		{
			float:					left;
			display:				inline;
			
			padding:				2px 0 0 13px;
			margin:					0;
			min-height:				4px;
			height:					4px;
			
			line-height:			1.17em;			/* =14px */
			
			background-image:		url(/sjablonen/1/images/general/bullet_shortcuts.gif);
			background-repeat:		no-repeat;
			background-position:	5px 6px;		
		}
		*>#footerShortCuts li
		{
			height:					auto;
		}
		
		#footerShortCuts .rss,
		#footerShortCuts .twitter,
		#footerShortCuts .facebook
		{
			padding:				0;
			
			background-image:		none;
		}
		
			#footerShortCuts .twitter,
			#footerShortCuts .facebook
			{
				margin:			0 7px 0 0;
			}
			
			
		
		#footerShortCuts .lastItem
		{
		}
		
			#footerShortCuts a
			{
				display:				block;
				
				margin:					0;
				padding:				0;
				
				font-weight:			normal;
				color:					#0c226b;	/* =1 */
				text-decoration:		none;
			}
			
				#footerShortCuts a:hover
				{
					color:					#8178a0;	/* =2 */
					text-decoration:		underline;
				}
}

@media print
{
	/*********************************************************************************************/
	/* =print 																   * /	
	/*********************************************************************************************/
	
	#header,
	#pageIndex,
	#navigation,
	#options,
	#sideBar,
	#footerShortCuts,
	#path,
	.hide 
	{
		display:			none;
	}
	
	
	#printHeader
	{
		display: 					block;
		padding:					0 0 20px 0;
		margin:						0 0 20px 0;
		border-bottom:				1px solid #ccc;	
	}
	
	body 
	{
		height:					auto;
		
		color:					#0c226b;	/* =1 */
		font-family: 			Arial, Helvetica, sans-serif;
		font-size:				11px;
		line-height:			1.56em;		/* 25px */
		
		padding:				0;
		margin:					0;
		
		background-color:		#fff;		/* =15*/
	}
	
}	
