/* =RESET
=------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}

/* =GENERAL
--------------------- */
body{
	position:relative;
	background:#1d1d1d url(images/bg-body.jpg) repeat top left;
	
	color:#5d5d5d; 
	font-family:Arial, Helvetica, sans-serif;
}
	 
strong{ font-weight:700; }
em{ font-style:italic; }

/* Clear Fix Hack - add  class="fixed"  to div's that have floated elements in them */

.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
	.fixed{display:block;}
	/*  \*/
	.fixed{min-height:1%;}
	* html .fixed{height:1%;}
	
/* =LAYOUT
--------------------- */
#line-top{
	 position:absolute; left:0; top:53px; height:2px; 
	 background:url(images/bg-line-top.jpg) repeat-x top left;   
}

ul#container{
	position:absolute; top:75px; left:0px;
	
	height:500px; /* ! height must be the same with the height of the pictures you will be using */
	padding:25px 0;

	background-color:#ffffff;  
	list-style:none;  
}
	
	ul#container li{}
	
		/* =NAVIGATION
		--------------------- */
		ul#container li.navigation{ 
			position:relative; float:left; 
			height:500px;  /* ! height must be the same with the height of the pictures you will be using */
			width:300px; 
			margin-right:25px; 
			background-color:#EDEFF0; 
		}
	
			#logo{ 
				position:absolute; top:48px; left:18px; 
			}
			
			ul#nav{ 
				position:absolute; top:188px; left:0;
				width:292px; height:47px; 
				padding:14px 0 0 15px; 
				background:url(images/bg-nav.png) no-repeat top right;
				list-style-type:none;
			}
				
				ul#nav li{ 
					float:left; 
					padding:13px 0 0 8px; 
					color:#ffffff; 
				}
				
				ul#nav li a{ 
					font-size:15px; color:#ffffff;
					text-decoration:none; letter-spacing:-0.5px; 
				}
				
				ul#nav li a:hover { color:#fff; text-decoration:underline; }
				ul#nav li a.active{ color:#fff; text-decoration:underline; }
			
			ul#nav-galleries{ 
				position:absolute; left:75px; top:300px;
				_left:60px;  _top:290px; /* IE6 Hack */
				
				list-style: inside; list-style-type:none;  
			}
			
				ul#nav-galleries li{ height:28px; }
				
				ul#nav-galleries li a{ 
					color:#8b8989;
					font-size:24px; letter-spacing:-2px;  
					text-decoration:none; text-transform:uppercase; 
				}
				
				ul#nav-galleries li a:hover { color:#000; }
				ul#nav-galleries li a.active{ color:#000; }
				
		/* =PHOTO
		--------------------- */		
		ul#container li.photo{ 
			float:left; position:relative; margin-right:25px; 
			height:500px; /* ! height must be the same with the height of the pictures you will be using */
		}
		
			ul#container li .photo-description{ 
				position:absolute; left:0; bottom:25px;  padding:10px 30px;
				background:url(images/bg-photo-description.png) repeat top left;
				color:#fff; font-size:16px; font-weight:700; 
			}
		
		/* =TEXT
		--------------------- */
		ul#container li.text{ 
			float:left; position:relative;  overflow:hidden; 
		 	margin-right:25px; width:270px; 
			height:425px; padding: 45px 30px 30px 30px; /* ! height must be height of the pictures - paddin-top - padding-bottom */ 
			background-color:#EDEFF0; font-size:14px; line-height:22px;
		}
							  
		ul#container li.service{ padding-top:0; height:470px; }	
		ul#container li.service img{ margin-bottom:25px; }				  
	
			ul#container li.text h1{ 
				margin-bottom:15px; font-size:30px; letter-spacing:-2px;
			}
			
			ul#container li.text h2{ 
				margin-bottom:15px; font-size:25px; letter-spacing:-1px;  
			}
			
			ul#container li.text blockquote{ 
				margin-bottom:15px; padding:5px 25px 0 45px;
				background: url(images/bg-quote.jpg) no-repeat top left;
				font-style:italic;  
			}
			
			ul#container li.text p { margin-bottom:15px; }
			ul#container li.text ul{ margin-bottom:15px; list-style: inside; }
			ul#container li.text a { color:#0085CF; }
			 								
		/* =ENDING
		--------------------- */	
		ul#container li.ending{ 
			 position:relative; float:left; 
			 margin-right:0; 
			 width:80px; height:500px;  
			 background-color:#EDEFF0; 
		}	
	
#line-bottom{ 
	position:absolute; 
	left:0; top:646px; height:2px; 
	background:url(images/bg-line-bottom.jpg) repeat-x top left; 
}


/* =OTHER
--------------------- */
	
	/* =SOCIAL-MEDIA
	--------------------- */
	ul#social-media{ list-style:none; }
	ul#social-media li{ display:inline; }			
			
	/* =CONTACT-FORM
	--------------------- */
	form{}
	
		form p{
			clear:both; margin-bottom:0;
			text-indent:0px;
		}
		
		label{ width:150px; }
		
		input, textarea{
			width:250px; border:1px solid #ccc; 
			padding:5px; background-color:#fff; 
		}
		
		textarea{ height:78px; }
		
		.btn{ margin-left:133px; width:120px; }	
		
		#formstatus{ font-size:11px;  font-weight:bold; }
		
		.formstatuserror{ color:#FF0000; }
		.formstatusok	{ color:#00CC33; }
					
	/* =HOVER-NAVIGATION
	--------------------- */
	#arrows
	{
		position:fixed; top:602px; left:68px; 
		width:90px; height:30px;
		 
		/* IE6 Hack  as position fixed is not supported */
		_position: absolute;
		_top: expression( ( 602 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
		_left: expression( ( 68 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );

	}
	
		#arrows ul{ margin:0; padding:0; list-style:none; }
		#arrows ul li{ display:inline; margin:0; padding:0; width:20px; height:20px; }
		
		#arrows ul li a{ 
			overflow:hidden; float:left; display:block;  margin-right:5px; width:20px; height:20px; 
			cursor:pointer; text-indent:-9000px;
		}
		
		#arrows ul #left a{ background: url(images/bg-arrow-left.png) no-repeat top right; }
		#arrows ul #right a{ background:  url(images/bg-arrow-right.png) no-repeat top left; }