/************************************************************************************************/
/* Author:			VINCIS Rinse van Dijk         					                         	*/
/* Description:		BASIC stylesheet					                                     	*/
/* Site name:		GHOR Extranet								                            	*/
/* Date created:	07-04-2010						                                     		*/
/************************************************************************************************/

/*
--------------------------------------------------------------------------------------------------
 Standard Colors:
--------------------------------------------------------------------------------------------------
 =1 Headers					#76a000	(also topgraphic background and hyperlinks)
 =2 Mouse over				#9dbd15	(light green grey)
 
 =3 Content borders			#e8e8e8	(Very light grey) 
 =4 Content text			#333	(dark grey)
 =5 Content light text		#c0c0c0	(light grey) 
 
 =6 Header graphic text		#fff	(white) 
 
--------------------------------------------------------------------------------------------------
 Custon Colors:
--------------------------------------------------------------------------------------------------
Blue						=	#0065a4
Green						=	#008b60
Grey						= 	#666666
Standard text				=	#333333

*/

/************************************************************************************************/
/* SCREEN STYLES																				*/
/************************************************************************************************/
@media screen 
{
	/********************************************************************************************/
	/* =Global																					*/
	/********************************************************************************************/
	body 
	{
		font-family: 			Arial, Verdana, Tahoma, Helvetica;
		font-size:				0.8em;
	
		line-height:			161%;
		background-color:		#4d4d4d;
		color:					#000;
	}
	
	input
	{
		font-family: 			Georgia, Arial, Verdana, Helvetica;
		color:					#666666;
	}
		
	.hide, 
	#printHeader 
	{
		display:				none;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	h1
	{
		color:					#0065a4;	
		font-size:				1.7em;
		font-weight:			bold;
		
		clear:					both;
		margin-bottom:			1.0em;
	}
	
	h2
	{
		color:					#008b60;	
		font-size:				1.5em;
		font-weight:			normal;
		
		margin-bottom:			0.5em;
	}
	
	h3, 
	h3 a
	{
		color:					#008b60;	 
		font-size:				1.0em;
		font-weight:			bold;
		
		margin-bottom:			0.3em;
		text-decoration:		none;
	}
	
		h3 a:hover
		{
			color:					#008b60;	 
		}
	
	p
	{
		/*margin:				0 0 20px 0;*/
	}
	
	ul
	{
	}
	
		li
		{
		}
		
	a
	{
		color:					#008b60;	
		font-weight:			normal;
		text-decoration:		underline;
	}
	
		a:hover
		{
			color:					#0065a4;
		}

		
	.cm_button
	{
		float:					left;
		display:				inline;

		height:					22px;
		
		color:					#fff;
		font-weight:			bold;
		
		margin:					0 10px 0 0;
		border:					none;
		
		background-color:		#0065a4;
		cursor:					pointer;
	}
	
		.cm_button:hover
		{
			background-color:			#008b60;
		}
		
	
	#formNewsletterSubscribe .cm_button
	{
	
	}

	.cm_textarea, .cm_input, .cm_select, .cm_multi, .cm_button
	{
		font-family: 			Georgia, Times New Roman Arial, Verdana, Helvetica;
		font-size:				1.0em;
	}

	#content .readMore, #content .readMore:hover
	{
		float:					left;
		width:					100%;
		font-weight:			bold;
		color:					#bcd600;
		
		text-decoration:		none;
	}
	
	/********************************************************************************************/
	/* =Containers																				*/
	/********************************************************************************************/
	
	#totalContainer
	{
		position:					relative;
		
		margin:						4px auto;
		width:						982px;
		height:						590px;
	
	}
	*>#totalContainer
	{
		min-height:					590px;
		height:						auto;
	}
	
	
	#top 
	{
		float:						left;
		width:						982px;
		height:						36px;
		background-image:			url(/sjablonen/4/images/general/top.jpg);
		background-repeat:			no-repeat;
		background-position:		left bottom;
	}
	
		#top  ul
		{
			float:					right;
			display:				inline;
			margin:					0px 11px 0 0;
			
		}
		
			#top  ul li
			{
				float:					left;
				padding:				0 11px 0 0;
				margin:					0 11px 0 0;
				
				background-image:		url(/sjablonen/4/images/general/seperatorTop.gif);
				background-position:	right 4px;
				background-repeat:		no-repeat;
			}
			
			#top ul li.lastItem
			{
				background-image:			none;
			}
			
				#top  ul li a
				{
					font-size:			0.85em;
					color:				#b2b2b2;
					text-decoration:	none;
				}
				
					#top  ul li a:hover
					{
						text-decoration:	underline;
					}
			
					
	
	
	#middleContainer
	{
		float:						left;
		width:						982px;
		height:						699px;
		background-color:			#fff;
		background-image:			url(/sjablonen/4/images/general/right.jpg);
		background-repeat:			no-repeat;
		background-position:		right 0;
	}
	*>#middleContainer
	{
		min-height:					699px;
		height:						auto;
	}
	
	
		#topContainer
		{
			float:						left;
			width:						982px;
			height:						100px;
		}
		
		
			#logo
			{
				float:					left;
				width:					530px;
				height:					100px;
				
			}
		
			#topContainer  ul li a
			{
				font-size:			0.85em;
				color:				#666666;
				text-decoration:	none;
			}
			
				#topContainer  ul li a:hover
				{
					text-decoration:	underline;
				}
		
			#topContainer #fontSize ul
			{
				margin:					4px 11px 0 0;
			}
			
				#topContainer #fontSize ul li
				{
					background-image:		none;
				}
		
			#topContainer ul
			{
				float:						right;
				display:					inline;
				margin:						4px 0 0 0;
			}
			
				#topContainer ul li
				{
					float:						left;
					padding:					0 8px 0 0;
					margin:						0 8px 0 0;
					background-image:			url(/sjablonen/4/images/general/seperator.gif);
					background-position:		right 4px;
					background-repeat:			no-repeat;
				}
			
			#quickSearch			
			{
				float:					left;
				display:				inline;
				margin:					31px 0px 0 207px;
			}
			
			
				#quickSearch .inputText
				{
					float:						left;
					display:					block;
					border:						0;
					width:						165px;
					height:						25px;
								
					padding:					15px 0 0 15px;
					
					font-size:					1.2em;
					line-height:				90%;
				
					background-image:			url(/sjablonen/4/images/general/quickSearchBox.gif);
					background-repeat:			no-repeat;
				}
				
				#quickSearch .button
				{
					float:						left;
					display:					block;
					border:						0;
					width:						40px;
					height:						40px;
					
					text-indent:				-5000px;
					line-height:				0;
					font-size:					0;
					
					background-image:			url(/sjablonen/4/images/general/quickSearchButton.gif);
					background-repeat:			no-repeat;
					cursor:				pointer;
				}
				
				
		
		#menuContainer
		{
			float:						left;
			width:						982px;
			height:						70px;
			background-image:			url(/sjablonen/4/images/general/bgMenu.png);
			background-repeat:			no-repeat;
		
		}
		
		#entrancesContainer
		{
			float:						left;
			width:						982px;
			height:						235px;
			margin:						20px 0 2px 0;
	
		}
		
			ul#banners
			{
				float:			left;
				display:		block;
			
			}
			
				ul#banners li
				{
					float:				left;
					position:			relative;
					width:				314px;
					height:				220px;
				
					margin:				0 14px 0 4px;
				}
				*>ul#banners li
				{
					margin:				0 14px 0 6px;
				}
				
				ul#banners li#banner3
				{
					width:				309px;
					margin:				0 0 0 5px;
					overflow:			hidden;
				}
				
					ul#banners li img
					{
						float:						left;
						margin:						0 0 0 27px;
						height:						160px;
						width:						259px;
					}
					
					ul#banners li#banner2 img,
					ul#banners li#banner3 img
					{
						float:						left;
						margin:						0 0 0 26px;
					}
					
					
					ul#banners li#banner1 a,
					ul#banners li#banner2 a,
					ul#banners li#banner3 a
				
					{
						position:					absolute;
						left:						0;
						bottom:						0;
						display:					block;
						width:						314px;
						height:						214px;
						
						text-indent:				-5000px;
						line-height:				0;
						font-size:					0px;
						
						background-image:			url(/sjablonen/4/images/general/banner1Overlay.png);
						background-repeat:			no-repeat;
						background-position:		left bottom;
					}
					
					ul#banners li#banner2 a
					{
						background-image:			url(/sjablonen/4/images/general/banner2Overlay.png);
					}
					
					ul#banners li#banner3 a
					{
						background-image:			url(/sjablonen/4/images/general/banner3Overlay.png);
						background-position:		left bottom;
					}
		
		#mainContainer
		{
			float:						left;
			width:						982px;
			height:						289px;
			
			font-size:					0.9em;
			background-image:			url(/sjablonen/4/images/general/bgRightMain.jpg);
			background-repeat:			repeat-y;
			background-position:		right 0;
		}
		*>#mainContainer
		{
			min-height:					289px;
			height:						auto;
		}
		
			#mainContainer h1,
			#mainContainer h2
			{
				float:						left;
				display:					block;
				font-size:					1.5em;
				text-indent:				-5000px;
				margin:						0 0 7px 0;
			}
			
			#mainContainer h1 span,
			#mainContainer h2 span
			{
				font-weight:				bold;
			}
		
			#mainLeft
			{
				float:						left;
				display:					inline;
				width:						243px;
				height:						289px;
	
				margin:						0 0 0 42px;
			}
			
				#mainLeft h1
				{
					width:						243px;
					height:						27px;
					background-image:			url(/sjablonen/4/images/general/text/watIsGHOR.gif);
					background-repeat:			no-repeat;
				}
			
			#mainCenter
			{
				float:						left;
				display:					inline;
				width:						290px;
				height:						289px;
			
				margin:						0 0 0 67px;
			}
			
				#mainCenter h2
				{
					width:						290px;
					height:						27px;
					background-image:			url(/sjablonen/4/images/general/text/organisatiesEnGHOR.gif);
					background-repeat:			no-repeat;
				}
			
			
			#mainRight
			{
				float:						left;
				display:					inline;
				width:						243px;
				height:						289px;
				margin:						0 0 0 60px;
			}
			
				#mainRight h2
				{
					width:						243px;
					height:						27px;
					background-image:			url(/sjablonen/4/images/general/text/GHORNieuws.gif);
					background-repeat:			no-repeat;
				}
				
				#mainRight ul li
				{
					float:			left;
					display:		block;
					clear:			both;
					margin:			0 0 20px 0;
					line-height:	142%;
				}
				
				#mainRight ul li span,
				#mainRight ul li a
				{
					float:				left;
					display:			block;
					width:				243px;
				}
				
				#mainRight ul li span
				{
					color:				#808080;
				}
				
				#mainRight ul li a
				{
					color:				#333333;
					text-decoration:	none;
				}
				
					#mainRight ul li a:hover
					{
						text-decoration:	underline;
					}
		
		
	#bottom
	{
		float:						left;
		
		width:						982px;
		height:						20px;
		background-image:			url(/sjablonen/4/images/general/bottom.jpg);
		background-repeat:			no-repeat;
	}	
	
	


	

}

/************************************************************************************************/
/* =Print styles                                              									*/
/************************************************************************************************/
@media print
{

	#top, #topContainer, #menuContainer, #entrancesContainer, #dynamicImage, #dynamicImageVervolg 
	{
		display:				none;
	}

	body 
	{
		color:					#000;	
		
		font-family: 			Georgia, Arial, Verdana, Helvetica;
		
		font-size:				1.0em;
		line-height:			160%;
	}
	
	
	#right
	{
		margin:					50px 0 0 0;
	}
	
	#printHeader
	{
		display: 					block;
		padding:					0 0 20px 0;
		margin:						0 0 20px 0;
		border-bottom:				1px solid #ccc;	
	}
	
	
	#content h1,
	h1
	{
		color:					#bcd600;	
		font-size:				1.7em;
		font-weight:			bold;
		
		margin-bottom:			0.7em;
	}

	#content h2,
	h2
	{		
		color:					#bcd600;	
		font-size:				1.1em;
		font-weight:			bold;
		
		margin:					0;
		padding:				0;
	}
	
	#content h3,
	h3
	{
		color:					#bcd600;	
		font-size:				1.0em;
		font-weight:			bold;
		
		margin:					0;
		padding:				0;
	}
	
	img
	{
		border:					0;
	}
	
	a
	{
		color:					#008b60;	
		font-weight:			normal;
		text-decoration:		underline;
	}
	
}

