/*
--------------------------------------------------------------------------------------------------
 Title:			Basic Styles
 Created on: 	17-12-2007
 Author:     	Roberto De Vivo
 Client:		Stichting VanBoeijen
 Project:		Project Subsite System
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------
 =global
 =content
 =news 
 =navigation 
 =misc 
 =options 
 =fontSize
 =search
 =breadCrumbs
 =paging 
 =Print 
 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Menu Background			#ce0d41	(red, also link- and headercolor)
 =2 Wave Dark				#4f5651	(brown grey)
 
 =3 Content background		#fff	(white, also menu font color and Wave light color) 
 =4 Content text			#252826	(dark grey)
 
 =5 Backgroundtext			#b7b7b7	(light grey) 

*/

@media screen 
{
	/*********************************************************************************************/
	/* =global		  							                                      			 */
	/*********************************************************************************************/
	body 
	{
		height:					auto;

		font-family: 			Arial, sans-serif;
		font-size:				12px;
		line-height:			1.8em;
		
	/*	background-color:		#fff;	 =3 */
		background-position:	center top;
		background-repeat:		repeat-y;
	/*	background-image:		url(http://roberto.vincis/VanBoeijen%20Subsite/colorschemes/1/images/background_overfill.gif); */
	}
	
		#totalContainer
		{
			height:					32px;
			
			width:					768px;
			margin:					0 auto;
			
			background-position:	left bottom;
			background-repeat:		no-repeat;
		/*	background-image:		url(http://roberto.vincis/VanBoeijen%20Subsite/colorschemes/1/images/background_lines.gif); */
		}
		*>#totalContainer
		{
			min-height:				560px;
			height:					auto;
		}

	.hide 
	{
		display:				none;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	h1
	{
		margin-bottom:			0.5em;
		margin-left:			11px;
		
	/*	color:					#ce0d41;	 =1 */
		font-size:				2em;
		font-weight:			bold;
	}
	
		h2
		{
		/*	color:					#ce0d41;	 =1 */
			font-size:				1.4em;
			font-weight:			bold;
		}
		
			h3
			{
			/*	color:					#4f5651;	 =2 */
				font-size:				1.1em;
				font-weight:			bold;
			}
	
	ul
	{
	}
	
		li
		{
			padding-left:			14px;

		/*	background-image:		url(http://roberto.vincis/VanBoeijen%20Subsite/colorschemes/1/images/bullet_arrow_generic.gif); */
			background-position:	2px 6px;
			background-repeat:		no-repeat;
		}
		
	a
	{
	/*	color:					#ce0d41;	 =1 */
		text-decoration:		underline;
	}
	
		a:hover
		{
		/*	color:					#4f5651;	 =2 */
			text-decoration:		underline;
		}
		
	/* =content*/
	#content
	{
		clear:			both;
		display:		inline;
		float:			right;
		
		width:			539px;		/* 557px - 2x9px */
		margin:			0 20px 0 0;
		padding:		48px 9px 27px 9px;		
	}
	
	/*********************************************************************************************/
	/* =news 									                                      			 */
	/*********************************************************************************************/
	#news
	{
		margin-top:		13px;
		padding-top:	13px;
		
	/*	border:			1px solid #4f5651;		 =2 */
	}
	
		#news h2
		{
			margin:			0 11px 0 11px;
			padding:		0;
		}
	
		#news ul
		{
		}
		
			#content #news li
			{
				margin:			0;
				padding:		3px 0 10px 0;
				
				background-image:		none;
			}

				#news h3
				{
					margin:			0 11px 0 11px;
					padding:		0;
				}
				
					#news h3 a
					{
					/*	color:					#252826;	 =4 */
						text-decoration:		none;
					}
					
						 #news h3 a:hover
						{
						/*	color:					#4f5651;	* =2 */
							text-decoration:		underline;
						}
				
				#news li p
				{
					margin-bottom:		0;
				}
				
					 #news li p a
					{
						font-weight:		normal
					}
					
	/*********************************************************************************************/
	/* =navigation 								                                      			 */
	/*********************************************************************************************/	
	#navigation
	{
		float:				right;
		
		width:				191px;
		margin-top:			-200px;		/* height of dynamic photo*/
			
	/*	color:				#b7b7b7;	 =5 */
		font-size:			0.9em;
		font-weight:		bold;
		text-align:			left;
	}
	
		#navigation ol
		{
			margin-right:	10px;
		}
	
			#navigation ol li
			{
				padding-left:		14px;
				
				background-image:	none;
			/*	background-color:	#ce0d41;	 =1 */
			}
	
				#navigation ol li a
				{
					display:			block;
					
					padding:		1px;
					
				/*	color:				#fff;	 =3 */
					font-weight:		bold;
					text-decoration:	none;
				}
		
					#navigation ol li a:hover
					{
						text-decoration:	underline;
					}
	
					/* =selected */
					#navigation ol .selected a
					{
						margin-left:		-8px;
						padding:			0 0 0 8px;
						
					/*	color:				#b7b7b7;	=5 */
						
					/*	border:				1px solid #fff;		 =3 */
					}
					
						#navigation ol .selected li a, #navigation ol li a
						{
							padding:		1px;
							
						/*	color:			#fff;	 =3 */

						/*	border:			1px solid #ce0d41; 	=1 */
						}
		
	/*********************************************************************************************/
	/* =misc 											                                		 */
	/*********************************************************************************************/
	#dynamicPhoto
	{
		float:				right;
		display:			inline;
		
		width:				557px;
		height:				200px;
		margin:				0 20px 0 1px;
							
		background-repeat:		no-repeat;
		background-position:	top left;
	}
	
	#logo
	{
		display:			block;
		float:				right;
		
		width:				290px;

		text-align:			right;
	}
	
		#logo img
		{
			float:			right;
			
			max-height:		60px;	/* if ppl don't resize corrrectly we will do it for them (IE6 doens't accept this) */
			max-width:		260px;	/* if ppl don't resize corrrectly we will do it for them (IE6 doens't accept this) */
			
			margin:			10px 20px 10px 10px;
		}
		
	#lastUpdate
	{
		margin-top:		5px;
		
	/*	color:			#b7b7b7;	 =5 */
		text-align:		right;
	}
		
	/*********************************************************************************************/
	/* =options 								                                      			 */
	/*********************************************************************************************/
	#options
	{
		width:				557px;	/* 768px - 211px*/
		height:				80px;
		padding-left:		211px;
		
	/*	background-color:	#ce0d41;	 =1 */
	}
	*>#options
	{
		height:				auto;
		min-height:			80px;
	}
	
		/* =fontSize*/
		#fontSize 
		{
		/*	color:			#fff;		 =3 */
			font-size:		0.9em;
		}
		
			#fontSize a
			{
			/*	color:			#fff;		 =3 */
				text-decoration:	none;
			}
			
				#fontSize a:hover
				{
				/*	color:			#fff;		 =3 */
					text-decoration:	underline;
				}
		
			#fontSize dt, #fontSize dd
			{
				display:	inline;
				float:		left;
				
				margin-right:	13px;
				
				font-weight:	normal;
			}
			
	/*********************************************************************************************/
	/* =search	 							                                      			 */
	/*********************************************************************************************/	
	#search
	{
		padding:		11px 0 3px 0;
		font-size:		0.9em;
	}
	
		#search label
		{
			float:			left;
		
		/*	color:			#fff;		/* =3 */	
			font-weight:	bold;
		}
	
		#search input
		{
			float:			left;
			
			height:			1.2em;	/* height:	13px; */
			width:			11em;	/* width:	122px;*/
			margin:			2px 1px 5px 9px;
			padding:		2px 5px 2px 5px;
			
		/*	color:			#4f5651;	 =2 */
			font-size:		1em;
			
		/*	border:			1px solid #4f5651;	/* =2 */
		}
		
			#search input:focus
			{
				margin:			1px 0 4px 8px;

				border:			2px solid #46e52e;
			}
		
		#search .button
		{
			float:			left;
			
			height:			1.8em;	/* height:	19px;*/
			
			width:			3.3em;
			margin:			2px 0 5px 13px;
			padding:		3px 5px 2px 5px;

		/*	color:			#fff;	 =3 */
			font-size:		8pt;
			font-weight:	normal;
			line-height:	1.2em;
			
			/*	background-color:		#ce0d41;	 =1 */
			
			/*	border:			1px solid #fff; 	 =3 */
		}
	
			#search .button:focus
			{
				margin:			2px 0 5px 13px;
	
			/*	border:			1px solid #fff; 	 =3 */
			}
	
	
	/*********************************************************************************************/
	/* =breadCrumbs 							                                      			 */
	/*********************************************************************************************/
	#breadCrumbs
	{
		position:			absolute;
		top:				300px;
		
		margin-left:		211px;
		width:				520px;
		
	/*	color:				#252826;	 =4 */
		font-size:			0.9em;
		font-weight:		bold;
	}
	
		#breadCrumbs strong
		{
			display:			inline;
			float:				left;
			
			height:				1.2em;
			width:				6em;
			
		/*	color:				#252826;	 =4 */
			font-size:			1em;
			line-height:		120%;
		}
	
		#breadCrumbs ul
		{
			height:				1.2em;
			width:				440px;
			
			margin:				0 0 0 7px;
		}
		
			#breadCrumbs li
			{
				display:			inline;
				float:				left;
	
				height:				1.2em;
				margin:				0;
				padding:			0 0 0 4px;
			
				line-height:		120%;

				background-image: 	none;
				white-space:		nowrap;
			}
			
				#breadCrumbs a
				{	
					display:			block;
		
					width:				10px;
					height:				1.2em;
					
					margin:				0;
					padding:			0 10px 0 0;
					
				/*	color:				#ce0d41;	 =1 */
					font-weight:		bold;
					line-height:		120%;
					text-decoration:	underline;
					
				/*	background-image:	url(http://roberto.vincis/VanBoeijen%20Subsite/images/general/bullet_breadcrumb.gif); */
					background-repeat:	no-repeat;
					background-position: right 4px;
				}
				*>#breadCrumbs a /* IE 6 fix */
				{
					min-width:			10px;
					width:				auto;
				}
				
					#breadCrumbs a:hover
					{
					/*	color:					#4f5651;	=2 */
						text-decoration:		underline;
					}
					
	/*********************************************************************************************/
	/* =paging  							                                      				 */
	/*********************************************************************************************/
	#containerPaging
	{
		clear:				both;
		float:				left;
		
		margin-top:			13px;
		margin-left:		13px;
	}
	
	#containerPaging ul
	{
		margin:				0 0 7px 0;
	}
	
		#totalContainer #containerPaging ul li
		{
			float:				left;
			
			padding:			0;
			margin:				0 7px 7px 0;
			
			background-image:	none;			
		}
		
		#containerPaging ul li p
		{
			padding:		3px 14px 4px 2px;
		}
		
			#containerPaging ul li p strong
			{
				font-weight: 		bold;
			}
		
			#totalContainer #containerPaging ul li a
			{
				display:		block;
				
				width:			20px;
				padding:		2px 2px 4px 2px;
	
			/*	color:			#252826;	=4 */
				text-align:		center;
				
			/*	background-color:	#fff;	=3 */
				
			/*	border:			1px solid #252826;	 =4 */
			}
			*>#totalContainer #containerPaging ul li a
			{
				min-width:		20px;
				width:			auto;
			}
			
			#totalContainer #containerPaging ul .selectedPageNumber 
			{
				width:			20px;
				min-width:		20px;
				padding:		2px 2px 4px 2px;
	
			/*	color:			#fff;		=3 */
				text-align:		center;
				
			/*	background-color:	#ce0d41;	=1 */
				
			/*	border:			1px solid #ce0d41;	=1 */
			
			}
			*>#totalContainer #containerPaging ul .selectedPageNumber 
			{
				min-width:		20px;
				width:			auto;
			}
			
				#totalContainer #containerPaging ul li a:hover
				{
				/*	color:				#fff;		=3 */
					text-decoration:	none;
					
				/*	background-color:	#4f5651;	=2 */
					
				/*	border:			1px solid #4f5651;	=2 */
				}
				
	 #pageBackButton
	 {
	 	float:				right;
	
		padding-right:		11px;
	
		font-size: 			1em;
		line-height: 		1.5em;
	 	text-align:			right;

	 }
}

/*********************************************************************************************/
/* =Print 									                                      			 */
/*********************************************************************************************/
@media print
{
	.hide, #navigation, #breadCrumbs, #search, #fontSize
	{
		display:			none;
		visibility:			hidden;
	}
	
	body 
	{
		font-family: 			Arial, sans-serif;
		font-size:				12px;
		line-height:			1.8em;
	}
	
	a
	{
		color:					#000;
		text-decoration:		underline;
	}
	
	a img
	{
		border:					none;
	}
	
	#content h2, #content h3, #content p
	{
		margin-left:		0;	/* override */
	}
}