/*
 * -----Layout CSS-------
 * CSS default project file
 * aab-web - 2009
 * 
 * author: Aram Balakjian
 * date: 28th August 2009
 * 
 * Layout Framework for starting project
 * 
 */
/**********************************
 * 
 *  Utils
 *  
 ********************************/
/**** Reset *****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td { 
	margin: 0; 
	padding: 0; 
}
/* Clear fixes for sticky footer */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {display: inline-block;}
.clearfix {display: block;}
.clear{ clear:both; }
.hidden{ display: none;}
/**********************************
 * 
 *  Core
 *  
 ********************************/
html {
	background: url(../images/AAB_page_bg.png) repeat-x center top;
	height: 920px;
}
	body {
		color: #333;
		font-family: Verdana, Lucida, sans-serif;
	 	font-size: 62.5%;
		height: 100%;
	}
/**********************************
 * 
 *  Containers 
 *  
 ********************************/
#container{
	width: 960px;
	height: 840px;
	margin: 0 auto;
	overflow: hidden;
}	
	#container.js {
		width: 9600px;
		margin: 0;
		height: 920px;
	}
	#ie8ScrollFix{
		width: 460px;
	}
#homeBlock,
#aboutBlock,
#servicesBlock,
#portfolioBlock,
#contactBlock{
	height: 840px;
	float: left;
	width:960px;
	margin-right:960px;
	overflow: visible;	
}	
.js #homeBlock,
.js #aboutBlock,
.js #servicesBlock,
.js #portfolioBlock,
.js #contactBlock{
	margin-top: 86px;
	display:inline;
}

.content{
	height: 520px;
	padding-top: 30px;
}	
/**********************************
 * 
 *  Navbar
 *  
 ********************************/
#navbar {
	width: 960px;
	height: 86px;
	background: url(../images/AAB_navbar_bg.png) repeat-x top left;
	z-index: 20;
	margin: 0 auto;
}
	#navbar.js{
		width: 100%;	
		position:fixed;
		margin: 0;
	}
	#navbar a.logo{ 
		float: left;
		display: block;
		background: url(../images/AAB_logo.png) no-repeat top left;
		width: 330px;
		height: 86px;
	}
		#navbar a.home:hover{
			background-position: 0 -86px;
		}
		#navbar a.home span { 
				display:none;
		}
	/* Menu 1 */
	#navbar ul { 
		list-style:none;
		float: left;
		margin: 23px 0 0 180px;
	}
		#navbar ul li { 		
			float: left;
			margin-top: 4px;
		}
		#navbar ul li a { 
			display: block;
			color: #fff;
			font-size: 14px;
			padding: 11px 0px 14px 40px;
			text-decoration: none;
		}	
			#navbar ul li.current{ 
				margin-top: 0px;
			}	
			#navbar ul li.current a{ 
				color: #c2b2ea;
			}
			#navbar ul li a.section:hover, 
			#navbar ul li a.section { 
				
			}

h2.pageTitle{
	font-size: 18px;
	color: #584980;
	text-align: left;
	font-weight: normal;
}

/**********************************
 * 
 *  Footer
 *  
 ********************************/
.footer { 
 	clear: both; 
	padding-top: 10px;
}
  	.footer p { 
		color: #555;
		float: left;
		font-size: 10px;
		padding: 14px 0 0 0;
		text-align: left;	
		width: 400px;
	}
  	.footer a { 
	   	color: #222; 
	   	text-decoration: none;
	}
		.footer a:hover {
			color: #555;
			text-decoration: underline;
		}
	.footer ul{
		clear: none;
		float: right;
		list-style: none;	
		margin-top: 15px;
	}
		.footer ul li{
			float: left;
		}
			.footer ul li a{
				font-size: 12px;
				padding: 0 5px;
			}
			
/**********************************
 * 
 *  Home Page
 *  
 ********************************/
/* Banner */
#homeBanner{
	width: 958px;
	height: 224px;
	border: 1px solid #355cb4;
	position: relative;
}	
	#homeBanner img{
		position: absolute;
	}
	#homeBanner .slide{
		background: url(../images/AAB_home_banner_01.jpg) no-repeat;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index:8;
		display: none;
	}
	#homeBanner .current{
		display: block;
		z-index:10;
	}
	#homeBanner .top{
		z-index: 11;
	}
	#homeBanner p{
		position: absolute;
		top: 170px;
		left: 240px;
		font-size: 16px;
		color: #555;
		font-weight: normal;
	}
		#homeBanner p span{
			font-size: 24px;
		}
	#homeBanner ul{
		position: absolute;
		top: 200px;
		left: 15px;
		z-index:15;
		list-style: none;
	}
		#homeBanner ul li{
			float: left;
		}
			#homeBanner ul li a{
				display: block;
				width: 10px;
				height: 10px;
				padding: 0 15px 0 0;
				background: url(../images/AAB_showcase_dot.png) no-repeat;
			}
			#homeBanner ul li a:hover,
			#homeBanner ul li a.current{
				background-position: 0 -10px;	
			}
#showcase{
	margin-top: 15px;
}
	#showcase a {
		color: #387dc2;
		width: 308px;
		height: 232px;
		border: 1px solid #355cb4;
		float: left;
		margin-right: 15px;
		position: relative;
		text-decoration: none;
	}
		#showcase a:hover{
			border-color: #584980;
			text-decoration: underline;
		}
		#showcase a.last{
			margin-right: 0;
		}
		#showcase a img{
			border: none;
			position: absolute;
			top: 0;
			left: 0;
		}
		#showcase a span{
			position: absolute;
			top: 200px;
			right: 30px;
			z-index:10;
			font-size: 14px;			
		}
/*
 * Base content
 */
.baseContent{
	clear: left;
	float: left;
	width: 960px;
	height: 235px;
}
.baseBlock{
	width: 280px;
	float: left;
	margin: 0 15px 0 0;
	color: #eddfc9;
	padding: 0 15px; 
}	
.baseBlock h2{
	color: #efefef;
	padding: 0px 0 4px 0;
	font-weight: normal;
	font-size: 16px;
}
	.baseBlockLast{
		margin-right: 0;
	}

#featureList{
	clear: left;
}
	#featureList ul{
		margin-top: 25px;
		list-style: none;
	}
	#featureList h3{
		background: url(../images/AAB_home_tick.png) no-repeat center left;
		padding: 5px 0 7px 35px;
		font-size: 14px;
		font-weight: normal;
		margin-bottom: 7px;
	}
	#homeClientLogos{
		margin-top: 10px;
		margin-left: 20px;
	}
		#homeClientLogos img{
			margin-top: 10px;
		}
	p.quote#quote2{
		margin-top: 20px;
	}
	#contactForm form{
		margin-top: 25px;
	}
			#contactForm textarea{
				height: 45px;	
			}
			#contactForm #message{
				margin: 25px 0 0 0;
			}

			
			
/**********************************
 * 
 *  Portfolio page
 *  
 ********************************/
#portfolioList{
	margin-top: -10px;
}
#portfolioList li{
	width: 470px;
	border: 1px solid #355cb4;
	float: left;
	list-style: none;
	margin: 15px 15px 0 0;
}
#portfolioList li:hover{
	border-color: #584980;
	cursor: pointer;
}
#portfolioList li div.preview{
	margin: 0;
	padding: 0;
}
#portfolioList li div.hover a.visit{
	text-decoration:underline;
}
	#portfolioList li.last{
		margin-right: 0;
	}
	#portfolioList li img{
		float: left;
		margin-top: -5px;
		height: 138px;
	}
	#portfolioList li h3{
		font-size: 14px;
		font-weight: normal;
		color: #584980;
		margin: 15px 0 0 0;
	}
	#portfolioList li p.weDid{
		font-size: 10px;
		color: #444;
		padding-top: 5px;
	}
	#portfolioList li p.description{		
		font-size: 11px;
		color: #444;
		padding: 5px 10px;
		line-height: 16px;
	}
	#portfolioList li a.visit{	
		float: right;
		font-size: 14px;
	color: #4d7cc9;
		padding: 10px 20px 10px 0;
		text-decoration: none;
	}
	#portfolioList li a.visit:hover{
		text-decoration: underline;
	}	
/*
 * Base content
 */	
#portfolioBlock .baseBlock p.released{
	margin-top: 25px;
	text-align: right;
	color:#9788c0;
	font-weight: bold;
}	
	#portfolioBlock .baseBlock p.released span{
		font-weight: normal;
		color:#ededed;	
	}	
#portfolioBlock .baseBlock p.weDid{
	margin-top: 5px;
	color:#9788c0;	
	font-weight: bold;
}	
	#portfolioBlock .baseBlock p.weDid span{
		font-weight: normal;
		color:#ededed;	
	}	
#portfolioBlock .baseBlock img{
	border: 2px solid #9788c0;	
	margin-top: 5px;
}
#portfolioBlock .baseBlock img.large{
	border: none;	
	margin-top: 15px;
}		
/*
 * Hidden Divs
 */
#mask {  
   position:absolute;  
   z-index:99;  
   background-color:#000;  
   display:none;  

}  
.window{
	position: absolute;
	width: 600px;
	height: 400px;
	background: #fff;
	border: 1px solid #584980;
	padding: 10px 20px;
	z-index: 100;
	display: none;
}
	div.window a.close{
		float: right;
	 	display: block;
		height: 18px;
		padding-top: 15px;
		font-size: 16px;
		background: url(../images/AAB_modal_close.png) no-repeat top right;
		padding-right: 40px;
		margin: -20px -30px 0 0;
		text-decoration: none;
	}
	div.window a.close:hover{
		background-position: right -33px;
	}
		div.window h3{
			font-size: 18px !important;
			padding: 0 10px 0 0;	
			color: #4f4273;
			font-weight: normal !important;
		}
			div.window h3 a{
				font-size: 12px !important;
				padding: 0 20px;
				text-decoration: none;	
			}
				div.window h3 a:hover{
					text-decoration: underline;
				}
		div.window p{
			font-size: 11px;
			color: #444;
			padding: 20px 0 0 0;
			line-height: 16px;
		}
		div.window img{
			border: none;		
		}
		div.window h4{
			padding: 20px 20px 0 20px;
		}
			div.window p.testimonial{
				font-style: italic;
				color: #777;
				padding: 10px 20px 10px 20px;
			}
			div.window p.author{
				text-align:right;
				color: #222;
				padding: 0px 20px 5px 20px;
			}
		#portfolioList  div.window img.image{
			float: right !important;
			width: 220px;
		}
/**********************************
 * 
 *  About page / Services Page
 *  
 ********************************/
#aboutBlock .leftColumn,
#servicesBlock .leftColumn,
#aboutBlock .rightColumn,
#servicesBlock .rightColumn{
	width: 445px;
	float: left;
}
#aboutBlock .rightColumn,
#servicesBlock .rightColumn{
	margin-left: 70px;
	position: relative;
	overflow: visible;
}
	#servicesBlock p{
		z-index: 10;
	}
	#aboutBlock p.closerTop{
		padding-top: 20px;
	}
	#aboutBlock p.intro,
	#servicesBlock p.intro{
		font-size: 18px;
		color:#4f4273;
		line-height:24px;
		padding-top: 10px;
	}
	#aboutBlock a.silverstripeLink{
		float: right;
		display: block;
		margin-top: 20px;
		padding-left: 20px;
		font-size: 12px;
	}
#aboutBlock .baseBlock h4,
#servicesBlock .baseBlock h4{
	font-size: 16px;
	font-weight: normal;
	margin-top: 20px;
}
#aboutBlock .baseBlock p,
#servicesBlock .baseBlock p{
	font-size: 11px;
	line-height:14px;
	padding-top: 5px;

}
#aboutBlock .baseBlock img{
	margin: 25px 0 0 40px ;
	width: 180px;
}
#servicesBlock .rightColumn p.first{
	padding-top: 10px;
}
	ul#serviceList{
		list-style: none;
		margin-top: 55px;
	}
		ul#serviceList li{
			background: url( ../images/AAB_tick.png) no-repeat center left;
			height: 35px;
			padding-left: 55px;
			font-size: 16px;
			color: #473f5d;
			margin-top: 15px;
		}
	p#pcAssembly{
		height: 200px;
		width: 350px;
		padding-right: 210px;
		background-position: 250px 60px; 
		z-index: 100;
	}
	p#pcAssembly a.animationLink{
		display: block;
		padding-top: 10px;
	}
	#flashMovie{
		background: url( ../images/AAB_pc_assembly.jpg) no-repeat top left;
		position: absolute;
		top: 315px;
		left:250px;	
		height: 170px;
		width: 310px;
		z-index: -10;
	}
/**********************************
 * 
 *  Contact page
 *  
 ********************************/
#contactBlock img#contactBanner{
	margin-top: 15px;
	border: 1px solid #355cb4;
}
#contactBlock .leftColumn{
	width: 640px;
	float: left;
}
#contactBlock .rightColumn{
	float: left;
	width: 300px;
	margin-left: 20px;
}
	#contactBlock .contactInfo {
		float: left;
		width: 290px;
	}
		#contactBlock span.title{
			float: left;
			width: 58px;
			font-size: 14px;
			line-height: 28px;
		}
		#contactBlock span.info{
			float: left;
			font-size: 18px;
			color:#4f4273;	
			line-height: 28px;
		}
#contactBlock #Form_ContactForm{
	margin-top: 20px;
}
#QuoteFormContainer #message{
	margin-top: 30px;
}
	#quote{
		width:960px;
		float: left;
		margin: 0 15px 0 0;
		color: #eddfc9;
		padding: 0 15px; 
	}
		#Form_QuoteForm{
			margin-top: 10px;		
			width: 940px;
		}
			#Form_QuoteForm #quoteColumn1,
			#Form_QuoteForm #quoteColumn2,
			#Form_QuoteForm #quoteColumn3{
				width: 300px;
				float: left;
				margin-right: 20px;
			}
			#Form_QuoteForm #quoteColumn3{
				margin-right: 0px;
			}
			#Form_QuoteForm fieldset div.field{
				width: 300px;
				margin-top: 10px;
			}
				#Form_QuoteForm fieldset div.dropdown select{
					width: 280px;
				}
				#Form_QuoteForm p.serviceLabel{
					padding: 20px 0 0 0;
					clear: left;
				}
				#Form_QuoteForm p.checkbox{
					float: left;
					width: 130px;
					padding-top: 10px;
				}
				#Form_QuoteForm div.Actions{
					margin: -30px 12px 0 0;
				}