/*
--------------------------------------------------------------------------------------------------
 Title:			Homepage Styles
 Created on: 	16-11-2009
 Author:     	Roberto De Vivo
 Client:		Kap-zones
 Project:		Website
*/

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

	html
	{
		padding:				0;
		margin:					0;
	}
	
	body 
	{
		height:					auto;
		
		color:					#fff	;	/* =1 */
		font-family: 			"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:				0.8em;
		line-height:			1.6em;		/* 24px */
		
		padding:				0;
		margin:					0;
		
		background-color:		#333;		
		background-image:		url(/images/general/background_main.png);
		background-position:	left top;
		background-repeat:		repeat-x;
	}

	input,
	select,
	textarea
	{
		font-family: 			"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:				1em;
	}

		#totalContainer
		{
			position:				relative;
			
			height:					10px;
			min-height:				10px;
			width:					976px;
			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.43em;
		font-weight:				bold;
		margin-bottom:				0.33em;
	}
	
		h2
		{
			clear:						both;
			font-size:					1.18em;
			font-weight:				bold;
		}
		
			h3
			{
				font-size:					1.09em;
				font-weight:				bold;
			}
	
	a
	{
		color:					#fff;	/* =2 */
		text-decoration:		underline;
	}
	
		a:hover
		{
			color:				#ccc;	/* =3 */
		}
		
	#logo
	{
		position:				absolute;
		left:					57px;
		top:					48px;
		
		display:				block;
	}
	
	#bbl
	{
		position:				absolute;
		right:					200px;
		top:					0;
		
		display:				block;
	}
	
	#building
	{
		position:				absolute;
		right:					0;
		top:					43px;
		
		display:				block;
	}
	
	#crew
	{
		position:				absolute;
		left:					0;
		top:					173px;
		display:				block;
	}
	
	#columnLeft
	{
		clear:				both;
		float:				left;
		display:			inline;
		
		width:				325px;
		padding:			0 0 0 27px;
	}
	
	#columnRight
	{
		float:				left;
		display:			inline;
		width:				325px;
		padding:			0 0 0 27px;
	}
	
	#columnFull
	{
		float:				left;
		display:			inline;
		width:				677px;
		padding:			0 0 0 27px;
	}
	
	#address
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		padding:				34px 0 34px 0;
	}
	
	#appointmentOnline img
	{
		display:				block;
		position:				absolute;
		right:					0;
		top:					222px;
	}
	
	
	#ONESTAT_TAG
	{
		display:				block;
		text-indent:			-50000px;
		width:					0;
		height:					0;
		overflow:				hidden;
	}
	
	
	#attention
	{
		position:				absolute;
		left:					86px;
		top:					132px;
		
		width:					164px;
		height:					77px;
		
		background-image:		url(/images/general/letop.gif);
		background-position:	left top;
		background-repeat:		no-repeat;
	}
	/*********************************************************************************************/
	/* =content									      			                          		 */
	/*********************************************************************************************/
	#content
	{
		clear:			both;
		float:			left;
		display:		inline;
	
		padding:		27px 0 54px 0;
		
		margin-top:		172px;
		margin-left:	270px;
	}	
	
		#content h1
		{
		}
	
		#content h2
		{
			clear:					both;
			padding:				13px 0 6px 0;
		}
		
			#content .imageFrontpage h2
			{
				padding:				0;
			}
	
		#content a
		{
			color:					#fff;	/* =6 */
			text-decoration:		underline;
		}
	
			#content a:hover
			{
				color:					#aaa;	/* =2 */
			}
			
		#content img
		{
			display:			block;
		}

	#content p
	{
		margin-bottom:			13px;
	}
	
	#content strong
	{
		font-weight:			bold;
	}
	
	#content em
	{
		font-style:				italic;
	}
	
	#content address
	{
		margin-bottom:			13px;
		font-style:				normal;
	}
	
		#content .imageFrontpage address
		{
			margin-bottom:				0;
		}
	
	#content img
	{
		display:				block;
		
		margin:					0;
		padding:				5px;
		border:					2px solid #ccc;
	}
	
		#content  .imageFrontpage img,
		#content .imageFrontpage a:hover img
		{
			display:				block;
			
			padding:				0;
			margin:					0;
			
			border:					none;
			background-color:		transparent;
		}
	
		#content img.floatRight
		{
			float:					right;
			display:				inline;
			
			margin:					0 0 13px 13px;
		}
		
		#content img.floatLeft
		{
			float:					left;
			display:				inline;
			
			margin:					0 13px 13px 0;
		}
		
		#content a:hover img
		{
			border:					2px solid #eee;
			background-color:		#555;
		}
	
	/*********************************************************************************************/
	/* =showClient								      			                          		 */
	/*********************************************************************************************/
	#showClient
	{
		width:					214px;
		height:					240px;
	}
	
		#showClient a
		{
			display:				block;

			width:					214px;
			height:					240px;
			padding:				0;
			margin:					0;
		}
		
		#showClient img
		{
			display:				block;
			
			width:					214px;
			height:					240px;
			padding:				0;
			margin:					0;
			
			background-position:	50% 7px;
			background-repeat:		no-repeat;
		}
		
			#showClient img.portrait
			{
				background-position:	50% 0;
			}
		
		#showClient p
		{
			margin-top:				-66px;
			width:					214px;
			font-weight:			bold;
			font-size:				1.36em;
			line-height:			1.18em;
			
			text-align:				center;
		}
		
	/*********************************************************************************************/
	/* =appointment								                                      			 */
	/*********************************************************************************************/
	#appointment
	{
		padding-top:				8px;
	}
	
		#appointment dl
		{
			padding-top:			3px;
		}
			
			#appointment dt
			{
				clear:					both;
				float:					left;
				display:				inline;
				
				width:					95px;
			}
			
			#appointment dd
			{
				float:					left;
				display:				inline;
				
				width:					205px;
				font-size:				1.09em;
				
				font-weight:			bold;
			}	
		
	/*********************************************************************************************/
	/* =opening								                                      			 */
	/*********************************************************************************************/		
	#opening 
	{
		padding-top:			3px;
	}
		
		#opening dt
		{
			clear:					both;
			float:					left;
			display:				inline;
			
			width:					190px;
		}
		
		#opening dd
		{
			float:					left;
			display:				inline;
			
			width:					135px;
			font-size:				1.09em;
			
			font-weight:			bold;
		}	

	#lunch
	{
		font-size:				0.9em;
	}

	/*********************************************************************************************/
	/* =productLogo								                                      			 */
	/*********************************************************************************************/
	#productLogo
	{
		clear:					both;
		float:					left;
		display:				inline;
		
		width:					325px;
		height:					35px;
		padding:				8px 0 12px 0;
		margin-top:				5px;
		
		background-image:		url(/images/general/background_products.gif);
		background-position:	left top;
		background-repeat:		no-repeat;
	}
	
		#productLogo img
		{
			float:					left;
			display:				inline;
		}
		
			#productLogo #keune img
			{
				padding-right:			64px;
			}
			
			#productLogo #american img
			{
				padding-right:			64px;
			}
	
	/*********************************************************************************************/
	/* =navigation								                                      			 */
	/*********************************************************************************************/
	#navigation
	{
		position:				absolute;
		left:					270px;
		top:					142px;
		padding:				0;
		width:					600px;
		
		line-height:			1.27em;
	}	

		#navigation li
		{
			float:				left;
			display:			inline;
			
			height:				2px;
			min-height:			2px;
			padding:			0 27px 0 27px;

			color:				#999;	/* =2 */
			font-size:			1.27em;
		}
		*>#navigation li
		{
			height:				auto;
		}
		
			#navigation #home
			{
			}
			
			#navigation #aboutUs
			{
			}
			
			#navigation #contact
			{
			}
			
			#navigation #jobs
			{
			}
		
			#navigation li a
			{
				display:			block;
				
				padding-bottom:		28px;
				
				color:				#999;	/* =2 */
				font-weight:		normal;
			
				text-decoration:	none;
				background-image:	none;
			}
			
				#navigation .selected a:hover,
				#navigation li a:hover
				{
					color:				#333;	/* =3 */
					text-decoration:	none;
					
					background-image:		url(/images/general/backgroun_menu.gif);
					background-position:	50% bottom;
					background-repeat:		no-repeat;
				}
				
				#navigation .selected span,
				#navigation .selected a
				{
					font-weight:		bold;
					color:				#333;	/* =1 */
					font-weight:		bold;
					
					background-image:		url(/images/general/backgroun_menu.gif);
					background-position:	50% bottom;
					background-repeat:		no-repeat;
				}
				
	/*********************************************************************************************/
	/* =photoManage								      			                          		 */
	/*********************************************************************************************/	
	#photoManage h1
	{
		color:						#263d83;
		
		font-size:					2.64em;
		font-weight:				normal;
		margin-bottom:				38px;
		padding-left:				182px;
		padding-top:				134px;
	}
	
	
		#photoManage #currentClient
		{
			float:						left;
			display:					inline;
			
			width:						206px;
			min-width:					206px;

			color:						#aaa;
			margin-left:				15px;
			border:						1px solid #ccc;
			padding:					10px 15px 15px 15px;
			background-color:			#fcfcfc;
		}
		*>#photoManage #currentClient
		{
			width:			auto;
		}
		
			#photoManage #currentClient img
			{
				float:						left;
				display:					inline;
				padding:					4px;
				margin-top:					6px;
				border:						1px solid #888;
				background-color:			#fff;
			}
			
				#photoManage #currentClient p
				{
					clear:						both;
					font-weight:				bold;
					color:						#555;
					margin-top:					8px;
				}
				
		#photoManage #newClient
		{
			float:						left;
			display:					inline;
			
			width:						570px;
			color:						#999;
			margin-right:				15px;
			border:						1px solid #999;
			padding:					10px 15px 15px 15px;
			background-color:			#f5f5f5;
		}

		#photoManage #newClient label
		{
			clear:						both;
			float:						left;
			display:					inline;
			font-weight:				bold;
			margin-top:					12px;
			color:						#777;
		}
		
		#photoManage #newClient #userfile
		{
			clear:						both;
			float:						left;
			display:					inline;
			width:						500px;
		}
	
		#photoManage #newClient #name
		{
			clear:						both;
			float:						left;
			display:					inline;
			width:						500px;
		}
		
		#photoManage #newClient #submit
		{
			margin-top:					15px;
			clear:						both;
			float:						left;
			display:					inline;
			
			font-weight:				bold;
			font-size:					1.36em;

		}
		
		#photoManage #bezig
		{
			position:					absolute;
			left:						300px;
			top:						100px;
			
			font-weight:				bold;
			width:						250px;
			padding:					10px;
			background-color:			#fff;
			
			border:						6px solid #777;
		}
		
			#photoManage  #bezig p
			{
				float:						left;
				display:					inline;
				color:						#333;
				background-color:			#fafafa;
			}
		
			#photoManage #bezig img
			{
				float:						right;
				display:					inline;
				margin-left:				10px;
			}
			
		#photoManage #success
		#content .success
		{
			clear:						both;
			float:						left;
			display:					inline;
			
			margin-left:				300px;
			margin-bottom:				12px;
			
			font-weight:				bold;
			width:						200px;
			padding:					10px;
			color:						#080;
			background-color:			#dfd;
			
			border:						6px solid #2d2;
		}
		
	/*********************************************************************************************/
	/* =Form	  					                                      						 */
	/*********************************************************************************************/		
	#content form
	{
		clear:				both;
		margin-bottom:		0.8em;
		padding:			0;
	}
	
		#content form label
		{
			clear:				left;
			float:				left;
			
			width:				214px;
			padding:			8px 0 0 0;
			
			color:				#fff;
			font-weight:		bold;
		}
		
		#content form input,
		#content form textarea
		{
			float:				left;
			
			font-family: 		"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size:			12px;
			line-height:		1.5em;
			color:				#555;
			
			margin:				6px 2px 2px 2px;
			padding:			0px 8px 4px 8px;
			width:				220px;

			border:				1px solid #828282;
		}
		
			#content form input:focus,
			#content form textarea:focus
			{
				color:				#333;
				
				margin:				4px 0 0 0;
				background-color:	#f5f5f5;
				border:				3px solid #ccc
			}
	
		#content form .button,
		#totalContainer #content form .button:focus
		{
			clear:				both;
			
			background-color:	#f2f2f2;
			color:				#333;
			
			width:				87px;
			margin:				16px 0 16px 213px;
			padding-bottom:		0px;
			
			font-weight:		bold;
		}
		
		#totalContainer #content .error
		{
			font-weight:		bold;
			
			padding:			0 20px 20px 20px;
			width:				400px;
			
			color:				#633;
			background-color:	#ffdddd;	
			border:				2px solid #C22;
		}
		
		
		
	/*********************************************************************************************/
	/* =crewList  					                                      						 */
	/*********************************************************************************************/	
	#crewList
	{
		padding-top:		13px;
		margin-left:		-13px;
	}
	
		#crewList li
		{
			float:			left;
			display:		inline;
			
			width:			122px;
			min-width:		122px;
			height:			100px;
			min-height:		100px;
			padding:		0 13px 26px 13px;
		}
		*>#crewList li
		{
			height:			auto;
			width:			auto;
		}
		
			#crewList li a
			{
				float:			left;
				display:		inline;
				
				width:			90px;
				height:			114px;
			}
			
			#crewList li strong
			{
				clear:			both;
				
				float:			left;
				display:		inline;
				font-weight:	bold;

			}
			
			#crewList li span
			{
				clear:			both;
				
				float:			left;
				display:		inline;
				
				font-size:		0.9em;
				font-style:		italic;
				line-height:	1em;
				

			}
	
}