/**********************************************************************************************

	CSS on Sails
	Title: Site Name
	Author: XHTMLized
	Date: September 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Accessibility navigation
			1.3 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	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,
	b, u, i, center,
	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-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	

/* 1.2	Accessibility navigation
-----------------------------------------------------------------------------------------------*/	

	#accessibility-nav {
		position: absolute;
		left: -1000em;
		text-align: left;
	}


/* 1.3	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #fff url(../images/bg-body.png) repeat-x top left;
		font: 62.5% Verdana, Arial, Helvetica, sans-serif;
		text-align: center;
		color: #555 }

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #555;
		text-decoration: none;
	}
	
	a:hover, 
	a:active {
		color: #555;
		text-decoration: underline;
	}
	

/* 1.4	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}

	.clearfix:after{
		display: block;
		content: ".";
		visibility: hidden; 
		clear: both; 
		height: 0 }	

	.clearfix,
	.news-list li{ zoom: 1 }
	
/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.container {
		width: 900px;
		position: relative;
		margin: 0 auto;
		text-align: left;
		font-size: 1.2em;
	}
		
	#header{
		height: 58px;
		padding-top: 34px;
		margin-bottom: 8px;
		position: relative;
		border-bottom: 9px solid #555 }
		
	#content{
		min-height: 390px;
		height: auto !important;
		height: 390px;
		padding-bottom: 50px;
		margin-top: 23px;
		line-height: 17px }
		
	body.home #content{
		margin-top: 0 }	
		
	#content .work-detail,
	#content .news-detail{
		margin-top: -23px;
		margin-bottom: -43px }	
				
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
	#header h1,
	#header a.logo{
		width: 163px;
		height: 51px;
		display: block;
		text-align: left;
		text-indent: -9999em;
		background: url(../images/logo.png) no-repeat }	
		
	#navigation{
		overflow: hidden;
		width: 363px;
		height: 15px;
		position: absolute;
		right: -2px;
		bottom: 0 }	
		
		#navigation li{
			display: inline}
		
		#navigation li a,
		#navigation li a span{
			float: left;
			height: 15px;
			width: 94px;
			position: relative;
			display: block;
			cursor: pointer }
			
			#navigation li a span{
				position: absolute;
				top: 0;
				left: 0 }
				
			#navigation li.menu1 a span{
				background: url(../images/nav-approach.jpg) no-repeat }	
				
		#navigation li.menu2 a,
		#navigation li.menu2 a span{
			width: 73px }
			
			#navigation li.menu2 a span{
				background: url(../images/nav-people.jpg) no-repeat }		
				
		#navigation li.menu3 a,
		#navigation li.menu3 a span{
			width: 61px }
			
			#navigation li.menu3 a span{
				background: url(../images/nav-work.jpg) no-repeat }
				
		#navigation li.menu4 a,
		#navigation li.menu4 a span{
			width: 83px }
			
			#navigation li.menu4 a span{
				background: url(../images/nav-contact.jpg) no-repeat }							
				
		#navigation li.menu5 a,
		#navigation li.menu5 a span{
			width: 52px }
			
			#navigation li.menu5 a span{
				background: url(../images/nav-news.jpg) no-repeat }	
				
		#navigation li a:hover span{
			background-position: 0 -15px }		
	
		#navigation li.active a span,
		#navigation li.active a:hover  span{
			background-position: 0 -30px }				

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	.banner{
		width: 900px;
		height: 390px;
		margin-bottom: 14px;
		position: relative;
		background: url(../images/img-banner-home.jpg) no-repeat }
		
		.banner .banner-overview{
			position: absolute;
			right: 0;
			top: 63px;
			display: block;
			width: 374px;
			height: 131px;
			background: url(../images/bg-banner-home.png) no-repeat;
			color: #fff;
			padding: 20px 22px 17px 25px }
			

	.right-content{
		width: 600px;
		float: right }
		
		.right-content .col{
			width: 300px;
			float: left;
			font-size: 11px }
						
		.right-content .col h2{
			font-size: 13px;
			color: #e9852c;
			margin-bottom: 6px;
			text-transform: uppercase }
			
		.approach .col-box{
			padding:0 10px 15px 46px; }			
		
	body.home .right-content{
		width: 604px;
		margin-right: -4px }
		
	body.smallside .right-content{
		width: 740px }	
		
	.thm-work li{
		height: 122px;
		width: 144px;
		overflow: hidden;
		margin-left: 7px;
		float: left;
		position: relative }	
		
		.thm-work li a:hover img{
			position: absolute;
			top: -122px }
			
	.people-content{
		width: 340px;
		padding-left: 40px;
		float: left;
		color: #000;
		font-size: 11px }
		
		.people-content p,
		.work-content p{
			padding-bottom: 20px }
			
		.people-content h1,
		.work-content h1{
			font-size: 13px;
			color: #e9852c;
			padding-bottom: 3px;
			text-transform: uppercase }	
			
		.people-content h2{
			font-size: 13px;
			color: #555;
			margin-bottom: 25px}	
		
	.people-img{
		width: 311px;
		float: right }			
		
	.client-list{
		width: 574px }
		
		.backto-client{
		font-size: 11px;
		}
		.backto-news{
		font-size: 11px; }
		
		.client-list li{
			display: block;
			float: left;
			width: 181px;
			height: 83px;
			margin:0 0 10px 10px;
			overflow: hidden;
			text-align: center;
			position: relative }
			
			.client-list li img{
				left: -10px;
				position: relative;
				top: 0}

			.client-list li a:hover img{
				position: relative;
				top: -83px;
				left: -10px }	
				
	.breadcrumb{
		border-bottom: 1px solid #e4e4e4;
		margin-bottom: 12px;
		padding: 7px 0 5px 0 }
				
	.work-content{
		width: 196px;
		font-size: 11px;
		color: #000;
		float: left }		
		
		.work-content h1{
			margin-bottom: 15px }
		
	.work-preview{
		width: 500px;
		float: right }
		
	.map{
		width: 497px;
		float: right }	
		
	.news-list li{
		padding: 8px 0;
		overflow: hidden;
		border-bottom: 1px solid #b2b2b2 }
		
	.news-list{
		margin-top: -8px }
		
		.news-content{
			width: 450px;
			float: left;
			font-size: 11px }
		
		.news-detail .news-content{
			width: 410px }	
			
			.news-content p.date{
				color: #000;
				padding-bottom: 0 }

			.news-content h2{
				color: #e9852c;
				font-size: 13px;
				text-transform: uppercase;
				margin-bottom: 5px;
				margin-top: 2px }			
			
			.news-content p{
				padding-bottom: 20px }

		.news-image{
			width: 245px;
			float: right }			
		
		.news-detail .news-image{
			width: 290px }
		
			.news-image img{
				margin-bottom: -3px }
			
/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
	.sidebar{
		width: 275px;
		float: left;
		font-size: 11px }

	body.smallside .sidebar{
		width: 160px }
					
	.sidemodule h3,
	.sidemodule h1{
		font-size: 13px;
		font-weight: bold;
		color: #e9852c;
		margin-bottom: 10px }
		
	.sidemodule h1{
		font-size: 18px;
		text-transform: uppercase }	
		
	.sidemodule a.more{
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 1px  }
	
	.news li{
		padding-bottom: 12px;
		font-size: 11px }

		.news a,
		.news a span,
		.people li a,
		.people li a span{
			display: block }				
	
	.people li {
		padding-bottom: 10px }
		
		.people li a{
			color: #737373 }
			
		.people li a span{
			text-transform: uppercase;
			font-weight: bold }
			
		.people li.active a{
			font-weight: bold;
			color: #555 }	
			
	.work-client h3{
		font-size: 14px;
		text-transform: uppercase;
		color: #555;
		margin-bottom: 15px }
		
	.work-client li{
		padding-bottom: 15px }
		
		.work-client li.active a{ font-weight: bold; color: #000 }				
			
	.address p{
		padding-left: 60px;
		font-size: 13px;
		padding-bottom: 5px;
		line-height: 19px }
		
		.address p strong{
			display: block;
			text-indent: 10px }
			
	.address h1{
		margin-bottom: 35px }	
		
	.archives li{
		margin-bottom: 15px }

		.archives li h3{
			font-size: 14px;
			color: #555;
			margin-bottom: 3px }	
			
		.archives li ul li{
			margin-bottom: 10px;
			padding-right:20px;
			font-size: 11px }		
			
		.archives li ul li.active a{
			font-weight: bold }	
	
/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	
	#footer{
		text-align: center;
		color: #999;
		border-top:1px solid #b2b2b2;
		padding: 8px;
		font-size: 11px }