/*
--------------------------------------------------------------------------------------------------
 Title:			Basic Styles
 Created on: 	22-04-2008
 Author:     	Rinse van Dijk
 Client:		Gemeente Harlingen
 Project:		Internet 2008
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------
 =General styles
 =Classes (general) 
 =Classes (general form fields)    
 =Classes (used for cleanHTML, clean_html.xsl)       
 =Containers    
 =Paging styles
 =Print styles 
 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Headers & Hyperlinks			#00a3de
 =2 Hyperlink hover			#00a3de


 =3 Blauw					#00a3de
 =4 Licht Blauw				#ccedf9
 =5 Groen					#349f36
 =6 Donkergrijs/zwart			#1f1a17

*/
@media screen 
{
	/*********************************************************************************************/
	/* =General styles                                                                 			 */
	/*********************************************************************************************/

	body 
	{
		width:					100%;
		height:					100%;
		
		padding:				0;
		margin:					0;		
		
		font-family: 			Arial, Verdana, Helvetica;

		line-height:			150%;
		
		color:					#000;
		background-color:		#ccc;
		
		font-size:				0.8em;
	}

	img 
	{
		border: 				none;
		
		padding:				0;
		margin:					0;
	}
	
	form 
	{
		padding:				0;
		margin:					0;
	}
	
	a 
	{		
		font-weight:			bold;				
		text-decoration:		none;
		
		color:					#00a3de;
	}
	
		a:hover 
		{
			text-decoration:		underline;
			color:					#00a3de;
		}
	
	ul
	{
		padding:				0;
		margin:					0;
	}
		
		ul li
		{
			padding:				0;
			margin:					0;
		
			background-image:		none;
		}
		
	ol
	{
		padding:				0;
		margin:					0;
		list-style-type: 		decimal;
	}
	
		ol li
		{
			display:			list-item;  /* work around for IE ordered list bug */ 
			padding:			0;
			margin-left:		27px;
			height:				auto;
		}
		
		
	hr 
	{	
		clear:					both;
		
		height:					1px;
		width:					100%;
		
		background-color:		#2a2d2f;
		color: 					#2a2d2f;
		
		border:					none;
	}
	
	h1 
	{
		padding:				0 0 15px 0;
		margin:					0;
		
		font-size:				1.5em;
		font-family: 			Arial, Verdana, Helvetica;
		font-weight:			bold;
		line-height:			100%;
					
		color:					#00a3de;		
	}
	
	
	h2 
	{
		padding:				0 0 2px 0;
		margin:					0;
		
		font-size:				1.2em;
		font-family: 			Arial, Verdana, Helvetica;
		line-height:			100%;
					
		color:					#00a3de;		
	}
	
	
	h3 
	{
		padding:				0;
		margin:					0px 0px 1px 0px;
		
		font-size:				1.0em;
		font-family: 			Arial, Verdana, Helvetica;
		line-height:			100%;
			
		color:					#00a3de;				
	}
	
	p
	{
		font-size:				1.0em;
	}
	
	strong
	{
		font-weight:			bold;
	}

	.tableRowOdd
	{
		background-color: 		#eee;
	}
	
	.flag
	{
		margin-right:			4px;
	}
	
	.newsArchive
	{
		margin-left:			10px;
	}	
	
	
	/*********************************************************************************************/
	/* =Classes (general)                                                              			 */
	/*********************************************************************************************/	

	
	.containerInvisible, .onzichtbaar, .hide, .invisible
	{
		display:				none;
	}
	
	.inputText
	{		
		width:					96px;
		
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				1.0em;
				
		color:					#b2b2b2;
		border:					solid 1px #b2b2b2;	
		padding:				1px 0px 1px 4px;	
	}
	
	.inputText_quickSearch
	{
		float:					left;
		width:					100px;
		
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				1.0em;
		
		color:					#000;
		background-color:		#FFF;
		border:					1px solid #000;	
		padding:				2px 0px 1px 4px;	
					
	}
	
	
	.searchButton
	{
		float:					right;
		margin:					0 5px 0 0;
	}
	
	.floatLeft
	{
		float:					left;
	}
	
	#containerForm table.floatRight
	{
		float:					right;
		width:					10px;
		margin-left:			10px;
		border:					0px;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	.anchr
	{
		font-weight:			normal;
		color:					#2a2d2f;
		background-image: 		none;
	}

	
	
	/*********************************************************************************************/
	/* =Classes (general form fields)                                                            */
	/*********************************************************************************************/	
	.formField
	{
		clear:					both;
		padding:				0;
		margin:					0px 0px 10px 0px;
	}
	
	.formFieldLeft
	{
		float:					left;
		width:					110px;
	}
	
	.formFieldIcons ul
	{
		width:					200px;
		
		padding:				0px 0px 0px 114px;
		margin:					0;	
	}
		
	.formFieldIcons ul li
	{
		clear:					both;
		
		list-style:				none;
	}
	
	.formFieldIcons ul li div
	{
		float:					left;
		
		width:					50px;
		height:					25px;
	}	
	
	.readmore
	{
		display:				block;
		padding:				0 0 0 13px;
				
		background-image:		url('/sjablonen/1/images/general/icon_readmore.gif');	
		background-position:	0 5px;
		background-repeat:		no-repeat;			
	}
	
	/*********************************************************************************************/
	/* =Classes (editor form fields)                                                        	 */
	/*********************************************************************************************/	
	.cm_input
	{	
		height:					15px;		
		
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				0.9em;
		padding:				0 0 0 2px;
		
		color:					#2a2d2f;
		
		background-color:		#FFFFFF;
		border:					solid 1px #b2b2b2;		
	}
	
	.cm_select
	{			
		height:					21px;		
				
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				0.9em;
		
		color:					#2a2d2f;
		
		background-color:		#FFFFFF;
		border:					solid 1px #b2b2b2!important;
	}
	
	.cm_textarea
	{		
		/* overflow-y:				auto; */
		
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				0.9em;
		
		color:					#2a2d2f;
		
		padding:				3px;
				
		background-color:		#FFFFFF;
		border:					solid 1px #b2b2b2;
	}
	
	.cm_radio
	{
		width:					15px;
		height:					15px;
		
		padding:				0;
		margin:					0px 5px 0px 0px;
			
		font-family: 			Arial, Verdana, Helvetica;
		font-size:				8pt;		
	}
	
	.cm_button
	{
		font-size:				0.9em; 
		margin:					0 0 0 7px;
		color:					#000;
		cursor:					pointer;
	}
	
	.cm_fieldset
	{
		margin:					10px 0 0 0;
	}
	
	.inputRadio
	{
		margin:					2px 5px 0px 0;
	}
	

	/*********************************************************************************************/
	/* =Classes (used for cleanHTML, clean_html.xsl)                                             */
	/*********************************************************************************************/
	table.border1, table.border2, table.border3
	{
		border-top:				1px solid #ccc;
		border-right:			1px solid #ccc;
	}
	
	table.border1
	{
		border-width:			1px;
	}
	
	table.border2
	{
		border-width:			2px;
	}
	
	table.border3
	{
		border-width:			3px;
	}
	
	td.border1, td.border2, td.border3
	{
		border-bottom:			1px solid #ccc;
		border-left:			1px solid #ccc;
	}
	
	td.border1
	{
		border-width:			1px;
	}
	
	td.border2
	{
		border-width:			2px;
	}
	
	td.border3
	{
		border-width:			3px;
	}

	.ial
	{
		float:					left;
	}
	
	.iar
	{
		float:					right;
	}
	
	.highlight
	{
		background-color:		#AE83BB;
	}
	
	.underline
	{
		text-decoration:		underline;
	}
	
	#containerPrintLogo
	{
		display:				none;
	}
	
		/* =Custom styles */
	.-------UITLIJNING-------
	{
	}
	
	.rechtsUitlijnen
	{
		float:					right;
	}
	
	.linksUitlijnen
	{
		float:					left;
	}
	

	/*********************************************************************************************/
	/* =Containers                     		 							 						 */
	/*********************************************************************************************/
	#containerAll
	{
		margin:					10px auto;
		padding:				0 0 10px 0;	/* under padding for IE7 en IE6 */	
		width:					952px;
		height:					575px;
	}
	*>#containerAll
	{
		min-height:				575px;
		height:					auto;
	}

	#containerTotal
	{
		float:					left;
		padding:				5px 10px 5px 10px;
		margin:					0 0 10px 0;	/* under padding only for FF */
		*margin:				0; /* to correct margin for IE7 and IE6 */
		background-color:		#fff;
	}
	
	
		#containerTop
		{
			float:					left;
			width:					932px;
			height:					202px;
		}
		
			#containerLogo
			{
				float:					left;
				width:					311px;
				height:					197px;
				margin:					0 0 5px 0;
				background-repeat:		no-repeat;
				
			}
						
				#containerOverlay
				{
					width:					311px;
					height:					197px;

					filter: 				progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/sjablonen/1/images/general/overlay.png');					
					background-repeat:		no-repeat;
					
					z-index:				2;
				}
				
				*>#containerOverlay
				{
					filter:					none;
					background-image:		url('/sjablonen/1/images/general/overlay.png');		
				}
				
					#containerOverlay a
					{
						position: 				relative; /* fix non-clickable links above filters */
						display:				block;
						
						width:					311px;
						height:					197px;
					}
		
			#containerShortCutsAndSearch
			{
				float:					left;
				width:					621px;
				height:					20px;
			}
			
				ul#containerShortCuts
				{
					float:					right;
					height:					20px;
				}
				
					ul#containerShortCuts li
					{
						float:					left;
						margin:					0 0 0 6px;
						color:					#00a3de;
					}
					
						ul#containerShortCuts li a
						{
							font-size:			0.9em;
							font-weight:		normal;
							margin:				0 6px 0 0;
						}
						
							ul#containerShortCuts li a:hover
							{
								color:				#000;
								text-decoration:	none;
							}
			
				
				
				ul#containerPrintAndSend
				{
					float:					right;
					width:					58px;
					height:					17px;
					
					padding:				3px 0 0 12px;
			
					background-color:		white;
					overflow:				hidden;
				}
					ul#containerPrintAndSend li
					{
						float:					left;
						margin:					0 9px 0 0;	
					
					}
				
				
				
				#containerSearch
				{
					float:					right;
					width:					156px;
					height:					21px;
			
					background-color:		black;
					overflow:				hidden;
				}
			
			#containerTopText
			{
				float:					left;
				width:					432px;
				height:					152px;
				
				padding:				30px 15px 0 18px;
			
				background-color:		white;
				
				overflow:				hidden;
			}
			
				#containerTopText h1
				{
					color:					#000;
				}
			
			
			ul#containerPageLinks
			{
				float:					left;
				width:					156px;
				height:					140px;
			
				background-color:		white;
				
				margin:					18px 0 0 0;
				
				border-top:				1px solid #00a3de;
			}
			
				ul#containerPageLinks li
				{
					border-bottom:			1px solid #00a3de;
					padding:				0 0 1px 0;
					float:					left;
					width:					100%;
				}
					
					ul#containerPageLinks li a
					{
						color:					#000;
						font-size:				0.9em;
						font-weight:			normal;
						padding:				0 0 0 16px;
					}
					
						ul#containerPageLinks li a:hover
						{
							color:					#00a3de;
							font-weight:			none;
							text-decoration:		none;
						}
						
				ul#containerIcons
				{
					float:					left;
					width:					156px;
					height:					24px;
					
				}
									
					ul#containerIcons li
					{
						float:				right;
						padding:			0 1px 0 0;
					}
					
							
		#containerMenuContact
		{
			float:					left;
			display:				inline;
			width:					155px;
			height:					86px;
			overflow:				hidden;
		}
		
		#containerMenuContact .title
		{
			margin:					0;

			height:					17px;
			background-color:		#000000;
			line-height:			16px;
			
			color:					#FFFFFF;
			text-align:				center;
		}
		
		#containerMenuContact .content
		{
			height:					59px;
			padding:				5px;
			
			font-size:				0.85em;
			line-height:			130%;
			overflow:				hidden;
			
			background-color:		#dededd;
		}
		
			#containerMenuContact a
			{
				font-weight:			normal;
				color:					#000;
				text-decoration:		underline;
			}
			
				#containerMenuContact a:hover
				{
					color:					#00a3de;
				}	

				
	/* =Stylen mailtoafriend */	
	
	#mailfriendform .cm_fieldset
	{
		float:			left;
		border:			1px solid #b2b2b2;
		width:			490px;
	}
	
	#mailfriendform .cm_textarea
	{
		width:			300px;
	}
	
	#mailfriendform legend
	{
		color:			#00a3de;
		font-weight:	bold;
	}
	
	#mailfriendform .fieldRow
	{
		clear:				both;
		height:				25px;
		min-height:			25px;
		padding:			2px 0 0 0;
	}
	*>#mailfriendform .fieldRow
	{
		height:			auto;
	}
	
	
		#mailfriendform .fieldLabel
		{
			float:		left;
			width:		120px;
			padding:	0 0 0 10px;
		}
		
		.fieldContent
		{
			float:		left;
		}
	
	
	#mailfriendform .submitbutton
	{
		font-size:		11px;
	}
	
	#mailfriendform .fieldRowExtraInfo
	{
		margin:			20px 0 30px 0;
	}			
				
				
	/*************************************************************************************************/
	/* =Paging styles                                              									 */
	/*************************************************************************************************/			
		
	#containerPaging
		{
			float:					left;
			clear:					both;
			padding:				0;
			margin:					5px 0 0 0;
			font-size:				0.9em;
		}
		
			#containerPaging ul
			{		
				padding:				0;
				margin:					0;
			}
			
				#containerPaging ul li
				{
					float:					left;
						
					height:					16px; /* ff fix */
					*height:				15px; /* only read by IE */
					width:					17px;
					padding:				1px 0 0 0!important;	/* ff fix */
					*padding:				2px 0 0 0!important;	/* only read by IE */
					margin:					0 5px 0 0;
					
					list-style:				none;
					text-align:				center;
					
					line-height:			100%;
					
					background-color:		#ffffff;
					background-image:		none!important;
					
					border:					1px solid #00a3de;
					
					overflow:				hidden;
				}
				*>#containerPaging ul li
				{
					min-width:				17px;
					width:					auto;
				}
				
				
					#containerPaging ul li a
					{
						display:				block;
						height:					17px;
						width:					17px;
						color:					#00a3de;
					}
					*>#containerPaging ul li a
					{
						min-width:				17px;
						width:					auto;
					}
					
						#containerPaging ul li:hover a
						{
							color:					#000;
							text-decoration:		none;
						}
				
					#containerPaging ul li:hover
					{
						border:					1px solid #000;		
					}
					
						#containerPaging ul li a:hover
						{
							color:					#000;
							text-decoration:		none;
						}
						
				
			
			#containerPaging .selectedPageNumber
			{
				font-weight:			bold;
			
				color:					#fff;
				background-color:		#00a3de;
						
				border-color:			#00a3de;
			}
			
				#containerPaging .selectedPageNumber:hover	
				{
					border:					1px solid #00a3de;
				}
}

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

	#containerShortCutsAndSearch, #containerPageLinks, #containerIcons, #adxmenu, #containerBanners, #containerRightColumn
	{
		display:		none;
	}
	
	#containerPrintLogo
	{
		padding:				0 0 20px 0;
		margin:					0 0 20px 0;
		border-bottom:			1px solid #000;
	}
	
	#containerTopText
	{
		border-bottom:			1px solid #000;
		padding:				0 0 10px 0;
		margin:					0 0 30px 0;
	}
	
		#containerTopText h1
		{
			color:				#000;
		}
	
	body 
	{
		width:					100%;
		height:					100%;
		
		padding:				0;
		margin:					0;		
		
		font-family: 			Arial, Verdana, Helvetica;

		line-height:			150%;
		
		color:					#000;
		background-color:		#ccc;
		
		font-size:				0.8em;
	}

	img 
	{
		border: 				none;
		
		padding:				0;
		margin:					0;
	}
	
	form 
	{
		padding:				0;
		margin:					0;
	}
	
	a 
	{		
		font-weight:			bold;				
		text-decoration:		none;
		
		color:					#00a3de;
	}
	
		a:hover 
		{
			text-decoration:		underline;
			color:					#00a3de;
		}
	
	ul
	{
		padding:				0;
		margin:					0;
	}
		
		ul li
		{
			padding:				0;
			margin:					0;
		
			background-image:		none;
		}
		
	ol
	{
		padding:				0;
		margin:					0;
		list-style-type: 		decimal;
	}
	
		ol li
		{
			display:			list-item;  /* work around for IE ordered list bug */ 
			padding:			0;
			margin-left:		27px;
			height:				auto;
		}
		
		
	hr 
	{	
		clear:					both;
		
		height:					1px;
		width:					100%;
		
		background-color:		#2a2d2f;
		color: 					#2a2d2f;
		
		border:					none;
	}
	
	h1 
	{
		padding:				0 0 15px 0;
		margin:					0;
		
		font-size:				1.5em;
		font-family: 			Arial, Verdana, Helvetica;
		font-weight:			bold;
		line-height:			100%;
					
		color:					#00a3de;		
	}
	
	
	h2 
	{
		padding:				0 0 2px 0;
		margin:					0;
		
		font-size:				1.2em;
		font-family: 			Arial, Verdana, Helvetica;
		line-height:			100%;
					
		color:					#00a3de;		
	}
	
	
	h3 
	{
		padding:				0;
		margin:					0px 0px 1px 0px;
		
		font-size:				1.0em;
		font-family: 			Arial, Verdana, Helvetica;
		line-height:			100%;
			
		color:					#00a3de;				
	}
	
	p
	{
		font-size:				1.0em;
	}
	
	strong
	{
		font-weight:			bold;
	}

	.tableRowOdd
	{
		background-color: 		#eee;
	}
	
	.flag
	{
		margin-right:			4px;
	}
	
	.newsArchive
	{
		margin-left:			10px;
	}
	
	
	
}

/*************************************************************************************************/
/* =Handheld styles                                         									 */
/*************************************************************************************************/
@media handheld 
{
}