/*
--------------------------------------------------------------------------------------------------
 Title:		Frontpage 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 
{
	/*********************************************************************************************/
	/* =Containers	  									                               			 */
	/*********************************************************************************************/

	#containerMain
	{
		float:					left;
		font-size:				0.9em;
		width:					776px;
	}
	
		#containerMain a
		{
			color:					#000;
		}
		
			#containerMain a:hover
			{
				color:					#00a3de;
			}


		#containerLeftColumn
		{
			float:					left;
			width:					310px;
			height:					174px;
		
			margin:					6px 5px 10px 0;
			padding:				0;
		}
		*>#containerLeftColumn
		{
			margin:					6px 10px 10px 0;
			min-height:				179px;	
			height:					auto;
		}
		
			.headerTitleLeft
			{	
				width:					290px;
				
				
				color:					#fff;
				font-weight:			bold;
				
				padding:				0 0 0 20px;
				
				background-color:		#349f36;
				
				background-image:		url('../../images/general/icon_submenu_item5_hover.gif');	
				background-position:	5px 6px;
				background-repeat:		no-repeat;
			}
			
				.headerTitleLeft a, .headerTitleLeft a:hover
				{
					color:					#fff!important;
				}
			
			#containerLeftColumn ul
			{
				
				margin:					0 0 0 5px;
				font-size:				0.95em;
			}
			
				#containerLeftColumn ul li 
				{
					margin:				0 0 10px 0;
				}
					#containerLeftColumn ul li span
					{
						display:				block;
						width:					310px;
						font-weight:			bold;
						clear:					both;
					}
					
					#containerLeftColumn ul li p
					{
						margin:					0;
						padding:				0;
					}
					
					#containerLeftColumn ul li  a.readmore
					{
						color:					#00a3de;
					}
					
		
		#containerMiddle
		{
			float:					left;
			width:					212px;
			height:					174px;
			
			margin:					6px 10px 10px 0;
			padding:				0 0 0px 0;
		}
		*>#containerMiddle
		{
			min-height:				179px;	
			height:					auto;
		}
		
			.headerTitleMiddle
			{	
				width:					192px;
				
				color:					#fff;
				font-weight:			bold;
				
				padding:				0 0 0 20px;
				
				background-color:		#000;
				
				background-image:		url('../../images/general/icon_submenu_item6_hover.gif');	
				background-position:	5px 6px;
				background-repeat:		no-repeat;
			}
			
			#containerMiddle ul
			{
				margin:					0 0 0px 5px;
				font-size:				0.95em;
			}
			
				#containerMiddle ul li
				{
					padding:				0 0 0 16px; 
					margin:					0 0 0px 0;
					background-image:		url('../../images/general/icon_black.gif');	
					background-position:	0px 6px;
					background-repeat:		no-repeat;
				}
				
			#containerMiddle span
			{
				display:				block;
				font-size:				0.95em;
				padding:				0 0 0 16px;
				margin:					3px 0 10px 20px;
				
				background-image:		url('../../images/general/icon_black.gif');	
				background-position:	0px 6px;
				background-repeat:		no-repeat;
			}
			
				#containerMiddle span a
				{
					font-weight:			normal;
					text-decoration:		underline;
				}
				
		
			#containerMiddle ul.LotOfViews li
			{
				background-image:			none;
			}
		#containerMiniCalendar
		{
			float:					left;
			width:					213px;
			height:					174px;
			
			margin:					6px 10px 10px 0;
			padding:				0 0 0px 10px;
	
			border-left:			1px solid #00a3de;
		}
		*>#containerMiniCalendar
		{
			min-height:				179px;	
			height:					auto;
		}
		
			.headerTitleCalendar
			{	
				width:					193px;
				
				color:					#fff;
				font-weight:			bold;
				
				padding:				0 0 0 20px;
				
				background-color:		#00a3de;
				
				background-image:		url('../../images/general/icon_submenu_item4_hover.gif');	
				background-position:	5px 6px;
				background-repeat:		no-repeat;
			}
			
			#containerMiniCalendar ul
			{
					font-size:				0.95em;
					padding:				0 0 0 5px;
			}
				
				#containerMiniCalendar ul li
				{
					margin:					0 0 10px 0;
				}
				
				#containerMiniCalendar ul li .date
				{
					font-size:				0.95em;
				}
				

	#containerRightColumn
	{
		float:					left;
		display:				inline;
		width:					156px;
		height:					292px;
		font-size:				0.9em;
		margin:					6px 0 0 0;		
	}
	*>#containerRightColumn
	{
		min-height:				298px;	
		height:					auto;
	}
	
		#headerTitleRight
		{
			width:					156px;
			height:					19px;
			
			text-align:				center;
			
			font-weight:			bold;
			color:					#fff;
			background-color:		#000;
		}
		
		#containerNewsLetter
		{
			width:					146px;
			height:					45px;
			
			padding:				10px 5px 0 5px;
			margin:					1px 0 10px 0;
			
			background-color:		#dededd;
		}
			#containerNewsLetter .cm_input
			{
				width:				143px;
				font-size:			1.0em;
				border:				1px solid #000;
			}
			
			#containerNewsLetter .cm_button
			{
				margin:				5px 0 0 0;
			}
		
		#headerWeather
		{
			width:					156px;
			height:					19px;
			
			text-align:				center;
			
			font-weight:			bold;
			color:					#fff;
			background-color:		#00a3de;
		}
		
		#containerWeather
		{
			width:					146px;
			height:					85px;
			
			margin:					1px 0 10px 0;
			padding:				0 5px 5px 5px;
			
			background-color:		#ccedf9;
		}
		*>#containerWeather
		{
			min-height:				85px;
			height:					auto;
		}
		
			#containerWeather dt
			{
				font-weight:			bold;
				color:					#00a3de;
			}
			
			#containerWeather dd
			{
				margin:					0 0 5px 0;
			}
		
		#headerPoll
		{
			width:					156px;
			height:					19px;
			
			text-align:				center;
			
			font-weight:			bold;
			color:					#fff;
			background-color:		#349f36;
		}
		
		#containerPoll
		{
			width:					146px;
			height:					80px;
			
			margin:					1px 0 10px 0;
			padding:				5px;
			
			background-color:		#cde7cd;
		}
		*>#containerPoll
		{
			min-height:				80px;
			height:					auto;
		}
		
			#containerPoll #pollButton
			{
				height:				27px;
			}
		
			#containerPoll #pollButton .cm_button
			{
				float:					right;
				margin:					5px 5px 2px 0;
			}
			
			#containerPoll #containerAnswers
			{
				margin:					10px 0 0 0;
			}
			
				#containerPoll ul#containerAnswers li p
				{
					font-weight:			bold;
				}
		
		
		
	
	
	ul#containerBanners
	{
		float:					left;
		width:					776px;
		height:					101px;
	}
	
		ul#containerBanners li
		{
			float:					left;
			width:					258px;
			height:					101px;
		}
		
		ul#containerBanners li#banner1, ul#containerBanners li#banner2
		{
			width:					232px;
			border-right:			1px solid #000;
			margin:					0 26px 0 0;
		}
		
			ul#containerBanners li img
			{
				float:					left;
			}
			
			ul#containerBanners li span 
			{
				display:				block;
				float:					left;
				width:					100px;
				
				padding:				0 0 0 10px;
				
				font-weight:			bold;
				font-size:				1.1em;
			}
		
		ul#containerBanners li#banner1 img, ul#containerBanners li#banner2 img, ul#containerBanners li#banner3 img
		{
			width:		96px;
			height:		101px;
		}

}


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

	.headerTitleLeft
	{
		font-weight:			bold;
		font-size:				1.1em;
	}
	
	.headerTitleMiddle, .headerTitleCalendar
	{
		font-weight:			bold;
		font-size:				1.1em;
		
		margin:					20px 0 0 0;
	}
	
	a.readmore
	{
		display:				block;
		margin:					0 0 20px 0;
	}
}

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