/*
--------------------------------------------------------------------------------------------------
 Title:			Homepage Styles
 Created on: 	29-11-2008
 Author:     	Roberto De Vivo
 Client:		Vincis
 Project:		Talant Corporate Website
 Copyright:  	Vincis B.V. The Netherlands

--------------------------------------------------------------------------------------------------
 Index:
--------------------------------------------------------------------------------------------------

 
--------------------------------------------------------------------------------------------------
 Colors:
--------------------------------------------------------------------------------------------------
 =1 Backgound color		#fff	(white)

 =10	Body text		#777	(medium gray)			- also Resize font
 =11	Shortcuts		#999	(medium light gray)
 =12	Menu underline	#c0c0c0	(light gray)			- also Download-size
 =13	Shortcuts MO	#333	(dark grey)

*/

@media screen 
{
	/*********************************************************************************************/
	/* =global		  							                                      			 */
	/*********************************************************************************************/

	html
	{
		padding:				0;
		margin:					0;
	}
	
	body 
	{
		height:					auto;
		
		color:					#813076;	
		font-family: 			Verdana, sans-serif, Helvetica;
		font-size:				0.78em;
		line-height:			1.33em;	
		
		padding:				0;
		margin:					0;
		
		background-color:		#fff;	
	}

	input,
	select,
	textarea
	{
		font-family: 			Verdana, sans-serif, Helvetica;
	}

		#totalContainer
		{
			position:				relative;
			
			height:					300px;
			min-height:				300px;
			width:					974px;
			margin:					0 auto;
			padding:				0;
		}
		*>#totalContainer
		{
			height:					auto;
		}
		
	.hide 
	{
		display:				block;
		position:				absolute;
		left:					-9999px;
		height:					0;
		width:					0;
	}
	
	.floatCloser
	{
		clear:					both;
	}
	
	h1
	{
		font-size:				1.72em;
		padding:				11px 0 11px 10px;
		font-weight:			bold;
	}
	
		h2
		{
		}
		
			h3
			{
			}
	
	ul
	{
	}
	
		li
		{
		}
	
			li a
			{
				color:					#777;	/* =10 */
				text-decoration:		none;
			}
			
				li a:hover
				{
					color:					#333;	/* =13 */
					text-decoration:		underline;
				}
				
	/*********************************************************************************************/
	/* =misc 											                                		 */
	/*********************************************************************************************/
	#logo span
	{
		z-index:				999;
		display:				block;
		position:				absolute;
		top:					0;
		left:					2px;
		
		text-indent: 			-5000px;	/* remove text */

		width:					234px;
		height:					113px;
		
		line-height:			1em;		
		
		background-image:		url(/Content/Images/general/logo.png);
		background-repeat:		no-repeat;
		background-position: 	left top;
		z-index:				106;
	}
	
	#content
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		width:					776px;	
		height:					10px;
		min-height:				10px;
		padding:				279px 0 0 0;
	}
	*>#content
	{
		height:					auto;
	}
	#sideBar
	{
		float:					left;
		display:				inline;
		
		width:					198px;
		height:					10px;
		min-height:				10px;
		padding:				279px 0 0 0;
	}
	*>#sideBar
	{
		height:					auto;
	}
	
	#explanation
	{
		padding:				0 10px 23px 11px;
		min-height:				102px;
		height:					102px;
	}
	*>#explanation
	{
		height:			auto;
	}

		#explanation a
		{
			color:					#813076;	/* =2 */
			text-decoration:		underline;
		}
		
			#explanation a:hover
			{
				color:					#5c3356;	/* =3 */
				text-decoration:		underline;
			}
			
	/*********************************************************************************************/
	/* =spotlight 								                                      			 */
	/*********************************************************************************************/	
	#spotlight 
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		position:				relative;
		
		width:					381px;
		height:					278px;
		margin-right:			8px;
		
		background-color:		#68085b;
	}
	
		#spotlight #spotlightBackground
		{
			position:				relative;
			
			z-index:				101;
			
			width:					381px;
			height:					278px;
			
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/Content/Images/general/background_spotlight.png);
		}
		
		
			#spotlight #spotlightBackground div
			{
				width:					360px;
				height:					263px;
				
				padding:				11px 4px 4px 17px;
			}
			
				#spotlight h2 a
				{
					display:				block;
					
					width:					188px;
					
					font-weight:			bold;
					
					font-size:				1.24em;
					line-height:			1.24em;
					letter-spacing:			-1px;

					color:					#fff;
					text-decoration:		none;
				}

					#spotlight h2 a:hover
					{
						text-decoration:		underline;
					}

				#spotlight h3
				{
					margin-top:				34px;
					width:					136px;
					
					line-height:			1em;
					font-size:				1.60em;				
				}
					
					#spotlight h3 a
					{
						font-weight:			bold;
						
						color:					#fff;
						
						text-decoration:		none;
					}
					
						#spotlight h3 a:hover
						{
							text-decoration:		underline;
						}
						
				#spotlight p
				{
					margin-top:				32px;
					width:					188px;
					
					color:					#fff;
					font-size:				0.91em;
					line-height:			1.33em;
				}
					
				#spotlight img
				{
					z-index:				100;
					
					display:				block;
					position:				absolute;
					right:					3px;
					top:					2px;
				}

			#spotlight .readMore 
			{
				display:				block;
				position:				absolute;
				bottom:					16px;
				right:					14px;
			}
				
				#spotlight .readMore span
				{
					display:				block;
					
					text-indent: 			-5000px;	/* remove text */

					width:					89px;
					height:					23px;
					
					line-height:			1em;		
					
					background-image:		url(/Content/Images/general/button_readmore_pink.gif);
					background-repeat:		no-repeat;
					background-position: 	0 0;
				}
				
					#spotlight .readMore:hover span
					{
						cursor:					pointer;
						background-position: 	0 -23px;
					}
		
	/*********************************************************************************************/
	/* =news	 								                                      			 */
	/*********************************************************************************************/	
	#news
	{
		position:				relative;
		
		float:					left;
		display:				inline;
		
		width:					360px;
		height:					263px;
		
		padding:				11px 4px 4px 17px;
		
		background-repeat:		no-repeat;
		background-position: 	top left;
		background-image:		url(/Content/Images/general/background_news.gif);
		background-color:		#e2007a;
	}
	
		#news h2 a
		{
			display:				block;
			
			width:					309px;
			
			font-size:				1.24em;
			font-weight:			bold;
			
			line-height:			1.24em;
			letter-spacing:			-1px;
			color:					#fff;
			text-decoration:		none;
		}

			#news h2 a:hover
			{
				text-decoration:		underline;
			}

		#news ul
		{
			padding-top:			24px;
		}
	
			#news ul li
			{
				padding:				6px 16px 10px 0;
				
				color:					#fff;
				font-size:				0.91em;
				line-height:			1.33em;
				
				border-bottom:			1px solid #ed63ae;
			}
			
			#news ul li.lastItem
			{
				border-bottom:			none;
			}
			
				#news ul li span
				{
					display:				block;
					
					font-weight:			bold;
				}
				
				#news ul li a
				{
					color:						#fff;
					text-decoration:			none;
				}
				
					#news ul li a:hover
					{
						text-decoration:			underline;
					}
		
		#news .readAll span
		{
			display:				block;
			position:				absolute;
			bottom:					16px;
			right:					14px;
			
			text-indent: 			-5000px;	/* remove text */

			width:					89px;
			height:					23px;
			
			line-height:			1em;		
			
			background-image:		url(/Content/Images/general/button_readmore_purple.gif);
			background-repeat:		no-repeat;
			background-position: 	0 0;
		}
		
			#news .readAll:hover span
			{
				cursor:					pointer;
				background-position: 	0 -23px;
			}

	/*********************************************************************************************/
	/* =column 								                                      			 */
	/*********************************************************************************************/	
	#column 
	{
		position:				relative;
		
		clear:					both;
		
		width:					198px;
		height:					294px;
		margin-bottom:			11px;
		
		background-color:		#68085b;
	}
	
		#column #columnBackground
		{
			position:				relative;
			
			z-index:				103;
			
			width:					198px;
			height:					294px;
			
			background-repeat:		no-repeat;
			background-position: 	top left;
			background-image:		url(/Content/Images/general/background_column.png);
		}
		
			#column #columnBackground div
			{
				width:					168px;
				height:					279px;
				padding:				11px 17px 4px 13px;
			}
		
			#column h2 a
			{
				display:				block;
				
				font-weight:			bold;
				
				font-size:				1.09em;
				line-height:			1.09em;
				letter-spacing:			-1px;

				color:					#fff;
				text-decoration:		none;
			}

				#column h2 a:hover
				{
					text-decoration:		underline;
				}
				
			#column p
			{
				margin-top:				138px;
				
				line-height:			1em;
				font-size:				1.60em;
				font-weight:			bold;

				color:					#fff;
				
				text-decoration:		none;
			}

				#column p a
				{
					color:					#fff;
					
					text-decoration:		none;
				}

					#column p a:hover
					{
						text-decoration:		underline;
					}

			#column img
			{
				z-index:				102;
				
				display:				block;
				position:				absolute;
				right:					4px;
				top:					2px;
			}

		#column .readMore
		{
			display:				block;
			position:				absolute;
			bottom:					16px;
			right:					14px;
		}
			#column .readMore span
			{
				display:				block;
				bottom:					16px;
				right:					14px;
				
				text-indent: 			-5000px;	/* remove text */

				width:					89px;
				height:					23px;
				
				line-height:			1em;		
				
				background-image:		url(/Content/Images/general/button_readmore_pink.gif);
				background-repeat:		no-repeat;
				background-position: 	0 0;
			}
			
				#column .readMore:hover span
				{
					cursor:					pointer;
					background-position: 	0 -23px;

				}			

	/*********************************************************************************************/
	/* =banner	 								                                      			 */
	/*********************************************************************************************/	
	#banner
	{
		display:				block;
		position:				relative;
		
		width:					198px;
		height:					136px;
		
		overflow:				hidden;
		
	}

		#banner h2
		{
			padding:				11px 0 0 14px;
			width:					160px;
			height:					31px;
			
			font-weight:			bold;
			font-size:				1.24em;
			line-height:			1.24em;
			letter-spacing:			-1px;

			color:					#fff;
		}
		
		#banner img
		{
			display:				block;
			padding-left:			2px;
		}
	/*********************************************************************************************/
	/* =shortCuts 								                                      			 */
	/*********************************************************************************************/	
	#quickMenu
	{
		position:				absolute;
		left:					220px;
		top:					0;
	
		width:					733px;
		height:					37px;
		padding-left:			18px;
		
		color:					#fff;
		
		background-repeat:		no-repeat;
		background-position:	right top;
		background-image:		url(/Content/Images/general/background_shortcutscontain.gif);
		background-color:		#68085b;
	}
	
	#shortCuts 
	{
		float:					left;
		display:				inline;
		
		padding:				0;
		margin:					0;
		height:					37px;
	}
	
		#shortCuts li
		{
			float:				left;
			display:			inline;


			height:				37px;
			margin:				0;
			padding:			0;
		
			line-height:		120%;

			background-image: 	none;
			white-space:		nowrap;
		}
		
			#shortCuts li img
			{
				padding-left:		6px;
				height:				12px;
			}
		
			#shortCuts a
			{	
				display:			block;
				
				min-width:			10px;
				width:				10px;
				height:				26px;
				margin:				0;
				padding:			11px 13px 0 13px;
				
				color:				#fff;	/* =11 */
				font-weight:		bold;
				letter-spacing:		-1px;
				
				background-repeat:		no-repeat;
				background-position:	right top;
				background-image:		url(/Content/Images/general/background_shortcuts.gif);
			}
			*>#shortCuts a
			{
				width:				auto;
			}
			
				#shortCuts a:hover
				{
					color:					#fff;	
					text-decoration:		none;
					
					background-position:	right -37px;
				}
				

			#shortCuts .fontSizeLarge a
			{
				font-size:			1.27em;
			}
		
	/*********************************************************************************************/
	/* =quickSearch	 								                                      		 */
	/*********************************************************************************************/
	#quickSearch div
	{
		float:					right;
		display:				inline;
		position:				relative;
		
		height:					19px;
		width:					111px;
		
		padding:				0 7px 0 24px;
		margin:					8px 8px 0 13px;
		
		background-image:		url(/Content/Images/general/background_searchbox.gif);
		background-repeat:		no-repeat;
		background-position: 	left top;
	}
	
		#quickSearch #query
		{
			width:					111px;
			
			color:					#59084c;
			font-size:				0.91em;
			
			background-color:		transparent;	
			border:					none;
		}
		
		#quickSearch .button
		{
			position:				absolute;
			left:					7px;
			top:					4px;
			
			height:					12px;
			width:					11px;
			
			background-color:		transparent;	
			border:					0 solid transparent;	
			text-transform: 		capitalize; /* needed for IE*/
			
			cursor:					pointer;

			text-indent: 			-5000px;	/* remove text */

			background-image:		url(/Content/Images/general/button_search.gif);
			background-repeat:		no-repeat;
			background-position: 	left top;
			
			overflow:				hidden;
		}

		
			#quickSearch .button:hover
			{
				background-position: 	left -12px;
			}

	/*********************************************************************************************/
	/* =footer	 								                                      			 */
	/*********************************************************************************************/	
	#footer
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		margin-top:				31px;
		
		width:					960px;	/* 794 -7 - 7*/
		padding:				8px 7px 24px 7px;
		
		color:					#a2899f;
		font-size:				0.82em;
		
		border-top:				1px solid #e0cdde;
	}
	
		#footer p
		{
			float:					left;
			display:				inline;
		}
	
		#footer ul
		{
			float:					right;
			display:				inline;
			
			padding-top:			3px;
		}
		
			#footer ul li
			{
				float:					left;
				display:				inline;
				
				padding-left:			20px;
			}
		
		#footer img
		{
			display:				block;
		}
}