/* imports */
@import url(../Scripts/greybox/gb_styles.css);

/* standard shell template */
html, body 
{
	margin: 0;
	padding: 0px;
	border:0;
}

body
{		
	font-family: Arial;
	font-size: 70%;
	background: #171717 url(../Images/Background.jpg) repeat-x top left;	
	text-align: center;	
	line-height: 16px;
	color: #4C4C4C;
}

.clear{
	clear:both;
	overflow: hidden;
	display: none;
	height: 0px;			
}

/* redefine */
form 
{
	padding: 0px;
	margin: 0px;
	border: 0px;	
}

.standardformfield 
{
	font-family: Arial;
	font-size: 100%;
	color: #424142;
}

a 
{
	color: #008AFF;
	text-decoration: underline;
}

a:hover 
{
	text-decoration: none;	
}

/* construct */
#wrapper 
{
	margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
	margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
	text-align:left; /*** IE Win re-alignment of page if page is centered ***/
	position: relative;	
	width: 900px;		
}

	#wrapper #header 
	{
		width: 900px;
		float: left;
		position: relative;		 
	}
	
		#wrapper #header h1 
		{
			margin: 0px;
			padding: 0px;
			position: absolute;		
			top: 102px;
			left: 16px;	
		}
		
			#wrapper #header h1 a 
			{
				display: block;
				width: 268px;
				height: 180px;
				background: url(../Images/shellGraphics_18.jpg) no-repeat top left;
			}
			
				#wrapper #header h1 a span 
				{
					display: none;
				}
		
		#wrapper #header h2 
		{
			margin: 0px;
			padding: 0px;
			display: none;
		}
		
		#wrapper #header #callus 
		{			
			padding: 0px;			
			width: 283px;
			height: 20px;
			float: right;
			background: url(../Images/shellGraphics_03.gif) no-repeat top left;
			margin: 19px 0px 17px 0px;
		}
		
			#wrapper #header #callus span 
			{
				display: none;
			}	
	
	#wrapper #navigation 
	{
		width: 900px;
		float: left;	
		height: 28px;
		background: url(../Images/shellGraphics_15.gif) no-repeat top right;	 
	}
	
		#wrapper #navigation ul 
		{
			margin: 0px;
			padding: 0px;
		}
		
			#wrapper #navigation ul li 
			{
				list-style-type: none;
				display: inline;
				float: left;
			}
			
				#wrapper #navigation ul li a 
				{
					float: left;
					display: block;
					height: 28px;
				}
				
					#wrapper #navigation ul li.home a 
					{
						background: url(../Images/shellGraphics_07.gif) no-repeat top left;
						width: 75px;
					}
					
					#wrapper #navigation ul li.timberframe a 
					{
						background: url(../Images/shellGraphics_08.gif) no-repeat top left;
						width: 206px;
					}
					
					#wrapper #navigation ul li.ourservices a 
					{
						background: url(../Images/shellGraphics_09.gif) no-repeat top left;
						width: 116px;
					}
					
					#wrapper #navigation ul li.casestudies a 
					{
						background: url(../Images/shellGraphics_10.gif) no-repeat top left;
						width: 117px;
					}
					
					#wrapper #navigation ul li.whyus a 
					{
						background: url(../Images/shellGraphics_11.gif) no-repeat top left;
						width: 93px;
					}
					
					#wrapper #navigation ul li.getquote a 
					{
						background: url(../Images/shellGraphics_12.gif) no-repeat top left;
						width: 111px;
					}
					
					#wrapper #navigation ul li.gallery a 
					{
						background: url(../Images/shellGraphics_13.gif) no-repeat top left;
						width: 79px;
					}
					
					#wrapper #navigation ul li.contactus a 
					{
						background: url(../Images/shellGraphics_14.gif) no-repeat top left;
						width: 101px;
					}
					
						#wrapper #navigation ul li a:hover 
						{
							background-position: bottom left;
						}
					
						#wrapper #navigation ul li a span 
						{
							display: none;							
						}
	
	#wrapper #sitecontainer 
	{
		width: 868px;
		float: left;		 
		background: #FFF;
		padding: 16px;
	}
	
		#wrapper #sitecontainer #leftcolumn 
		{
			width: 268px;
			float: left;
		}
		
			#wrapper #sitecontainer #leftcolumn .leftpanel 
			{
				float: left;
				width: 268px;
				margin-top: 8px;				
			}
			
				#wrapper #sitecontainer #leftcolumn .leftpanel.topitem 
				{
					margin-top: 198px;
				}
			
				#wrapper #sitecontainer #leftcolumn .leftpanel h3 
				{
					margin: 0px;
					padding: 0px;
					width: 268px;
					height: 32px;					
					float: left;
				}	
				
					#wrapper #sitecontainer #leftcolumn .leftpanel h3.timberframesystem 
					{
						background: url(../Images/shellGraphics_21.jpg) no-repeat top left;
					}
					
					#wrapper #sitecontainer #leftcolumn .leftpanel h3.ourservices 
					{
						background: url(../Images/shellGraphics_26.jpg) no-repeat top left;
						height: 27px;
					}
					
					#wrapper #sitecontainer #leftcolumn .leftpanel h3.casestudies 
					{
						background: url(../Images/shellGraphics_28.jpg) no-repeat top left;
						height: 27px;
					}
					
						#wrapper #sitecontainer #leftcolumn .leftpanel h3 span 
						{
							display: none;
						}
					
				#wrapper #sitecontainer #leftcolumn .leftpanel .textarea 
				{
					width: 268px;
					float: left;
					background: url(../Images/shellGraphics_22.gif) repeat-y top left;
				}			
				
					#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext 
					{
						width: 250px;			
						padding: 9px;							
						float: left;	
						background: url(../Images/shellGraphics_24.gif) no-repeat bottom left;
					}
					
						#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext.quoteheight 
						{
							height: 80px;
						}
				
						#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext p 
						{
							width: 250px;			
							padding: 0px;							
							margin: 0px;
							float: left;
						}
						
						#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext .usplist 
						{
							width: 250px;
							float: left;
							margin-top: 15px;
						}
						
							#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext .usplist ul 
							{
								margin: 0px;
								padding: 0px;
							}
							
								#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext .usplist ul li 
								{
									list-style-type: none;
									display: inline;
									float: left;
									font-family: Trebuchet MS;
									font-size: 110%;
									height: 20px;
									line-height: 20px;
									color: #7065AF;
									font-weight: bold;
									background: url(../Images/USP_PurpleTick.gif) no-repeat top right;
									width: 230px;
								}
								
									#wrapper #sitecontainer #leftcolumn .leftpanel .textarea .innertext .usplist ul li.highlight 
									{
										color: #229D05;
										background: url(../Images/USP_GreenTick.gif) no-repeat top right;
									}
						
						/* Quote List */						
						#wrapper #sitecontainer #leftcolumn .leftpanel #quotelist 
						{
							width: 250px;
						}		
							
							#wrapper #sitecontainer #leftcolumn .leftpanel #quotelist .textarea .innertext .quoteitem 
							{
								width: 250px;
								float: left;	
								display: none;						
							}	
							
								#wrapper #sitecontainer #leftcolumn .leftpanel #quotelist .textarea .innertext .quoteitem .casestudyquote 
								{							
									font-family: Trebuchet MS;
									font-size: 170%;
									font-weight: bold;
									color: #625AA4;
									line-height: 30%;
								}
		
		#wrapper #sitecontainer #rightcolumn 
		{
			width: 582px;
			float: left;
			margin-left: 18px;
		}
		
			#wrapper #sitecontainer #rightcolumn #pageimage 
			{
				width: 582px;
				float: left;
				height: 180px;
				overflow: hidden;
			}
			
			#wrapper #sitecontainer #rightcolumn #pagecontent 
			{
				width: 582px;
				float: left;
			}
			
				#wrapper #sitecontainer #rightcolumn #pagecontent h1 
				{
					margin: 25px 0px 0px 0px;
					padding: 0px;
					font-family: Trebuchet MS;
					font-size: 170%;
					color: #7B70B8;
					float: left;
					width: 582px;
					font-weight: normal;
				}
				
				#wrapper #sitecontainer #rightcolumn #pagecontent p 
				{
					margin: 10px 0px 0px 0px;
					padding: 0px;
					width: 582px;
					float: left;
				}
				
				/* Contact Us */
				#wrapper #sitecontainer #rightcolumn #pagecontent .contactheader 
				{
					width: 582px;
					float: left;					
					height: 27px;
					margin-top: 10px;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent .contactheader.mapdirections 
					{
						background: url(../Images/ContactUsHeaders1_01.gif) no-repeat top left;
					}
					
					#wrapper #sitecontainer #rightcolumn #pagecontent .contactheader.enquiryform 
					{
						background: url(../Images/ContactUsHeaders2_01.gif) no-repeat top left;
					}
					
					#wrapper #sitecontainer #rightcolumn #pagecontent .contactheader span 
					{
						display: none;
					}
										
				#wrapper #sitecontainer #rightcolumn #pagecontent #maparea
				{
					width: 582px;
					float: left;					
					background: url(../Images/ContactUsHeaders_02.gif) repeat-y top left;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #maparea #mapinner 
					{
						width: 562px;
						padding: 10px;
						float: left;
						background: url(../Images/ContactUsHeaders_04.gif) no-repeat bottom left;
					}
				
				#wrapper #sitecontainer #rightcolumn #pagecontent #contactform
				{
					width: 582px;
					float: left;					
					background: url(../Images/ContactUsHeaders_02.gif) repeat-y top left;					
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #contactform #contactforminner 
					{
						width: 562px;
						padding: 10px;					
						float: left;
						background: url(../Images/ContactUsHeaders_04.gif) no-repeat bottom left;
					}
			
				/* Why Us Page */
				#wrapper #sitecontainer #rightcolumn #pagecontent .biography 
				{
					width: 582px;
					float: left;		
					margin-top: 15px;			
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent .biography img 
					{
						float: left;
						margin-right: 10px;
						border: solid 2px #DBDAEB;
					}
					
				/* Case Studies and News Page */
				#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container 
				{
					width: 582px;
					float: left;
					margin: 0px;
					padding: 0px;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container li 
					{
						list-style-type: none;
						display: inline;
						float: left;
						width: 582px;
					}
						
						#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container li a 
						{
							display: block;
							width: 570px;
							height: 27px;
							background: url(../Images/CaseStudyGraphics_01.gif) no-repeat top left;
							margin-top: 10px;
							color: #FFF;
							font-family: Trebuchet MS;
							text-decoration: none;	
							font-size: 120%;	
							padding-left: 12px;		
							line-height: 27px;
							font-weight: bold;			
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container li div 
							{
								width: 582px;	
								background: url(../Images/CaseStudyGraphics_02.gif) repeat-y top left;
								height: auto;													
							}
							
								#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container li div .textarea 
								{
									padding: 12px;
									width: 558px;
									background: url(../Images/CaseStudyGraphics_04.gif) no-repeat bottom left;
								}
								
									#wrapper #sitecontainer #rightcolumn #pagecontent #vertical_container li div .textarea img 
									{
										float: right;
										margin: 0px 0px 10px 10px;
										border: solid 2px #EDECF5;
									}
				
				/* Quote Form */
				#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform 
				{
					margin-top: 10px;
					width: 582px;
					float: left;
					background: url(../Images/QuoteForm_02.gif) repeat-y top left;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform h3 
					{
						width: 582px;
						float: left;
						margin: 0px;
						padding: 0px;
						background: url(../Images/QuoteForm_01.gif) no-repeat top left;
						height: 40px;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform h3 span 
						{
							display: none;
						}
					
					#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer 
					{
						width: 554px;
						float: left;
						background: url(../Images/QuoteForm_04.gif) no-repeat bottom left;
						padding: 0px 14px 14px 14px;
						color: #FFF;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .formfield 
						{
							width: 267px;
							float: left;
							margin: 10px 20px 0px 0px;
							font-weight: bold;
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .formfield.nomargin 
							{
								margin-right: 0px;
							}	
							
							#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .formfield input 
							{
								width: 263px;
								font-family: Arial;
								font-size: 100%;
								height: 18px;
								margin: 3px 0px 0px 0px;
								border: solid 0px;
								padding: 4px 0px 0px 4px;																
								background: url(../Images/QuoteField.gif) no-repeat top left;
							}	
							
						#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .formfieldlarge 
						{
							width: 554px;
							float: left;
							margin-top: 10px;
							font-weight: bold;
						}	
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .formfieldlarge textarea 
							{
								width: 550px;
								font-family: Arial;
								font-size: 100%;
								border: solid 0px;
								margin: 3px 0px 0px 0px;
								padding: 4px 0px 0px 4px;		
							}
							
						#wrapper #sitecontainer #rightcolumn #pagecontent #quoteform #quoteformcontainer .submitbutton 
						{
							width: 554px;
							float: left;
							margin-top: 10px;
						}					
				
				/* Services Page */
				#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector 
				{
					width: 582px;
					float: left;
					margin-top: 10px;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector .service 
					{
						width: 582px;
						float: left;
						margin-bottom: 15px;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector .service.divider 
						{
							background: url(../Images/ServiceDivider.gif) repeat-x bottom left;
							padding-bottom: 15px;
						}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector .service a 
						{
							width: 582px;
							float: left;
							display: block;
							text-decoration: none;
							color: #636466;
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector .service a strong
							{
								text-decoration: underline;
								color: #008AFF;
								font-size: 140%;
								line-height: 140%;
								font-family: Trebuchet MS;
							}
							
								#wrapper #sitecontainer #rightcolumn #pagecontent #serviceselector .service a strong:hover 
								{
									text-decoration: none;
								}
				
				/* Home Video Player */			
				#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration 
				{
					margin-top: 10px;
					float: left;
					width: 582px;
					height: 236px;
					background: url(../Images/HomeVideo.gif) no-repeat top left;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #videoplayer 
					{
						width: 243px;
						height: 181px;
						float: left;
						margin: 40px 0px 0px 15px;
						background: #FFF;					
					}
					
					#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo 
					{
						float: left;
						margin: 40px 0px 0px 21px;
						width: 287px;		
						color: #FFF;			
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo a 
						{
							color: #FFF;
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo .downloadfull 
							{
								display: block;
								height: 16px;
								padding-left: 22px;
								line-height: 16px;
								background: url(../Images/MPGIcon.jpg) no-repeat top left;
								font-weight: bold;
							}
							
						#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo .samplephoto 
						{
							width: 73px;
							height: 55px;
							overflow: hidden;
							float: left;
							margin: 14px 13px 0px 0px;
						}
						
						/* Form Fields */
						#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcolone 
						{
							width: 133px;
							float: left;
							font-weight: bold;
							margin: 8px 20px 0px 0px;
						}
							
							#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcolone .formfield 
							{
								width: 133px;
								float: left;
								margin-top: 2px;
							}
							
								#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcolone .formfield input 
								{
									font-family: Arial;
									font-size: 100%;
									width: 133px;
									margin-top: 2px;
								}
								
							#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcolone .submitbutton 
							{
								width: 133px;
								float: left;
								margin-top: 8px;
							} 
						
						#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcoltwo 
						{
							width: 133px;
							float: left;							
							font-weight: bold;
							margin-top: 10px;							
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #videodemonstration #moreinfo #formcoltwo textarea 
							{
								font-family: Arial;
								font-size: 100%;
								width: 133px;
								margin-top: 2px;
								height: 55px;														
							}
				
				/* Photo Gallery */	
				#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery 
				{
					margin-top: 10px;
					float: left;
					width: 582px;					
					background: url(../Images/HomeVideo.gif) no-repeat top left;
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery h3 
					{
						background: url(../Images/GalleryPhotoGallery_01.gif) no-repeat top left;
						width: 582px;
						height: 27px;
						margin: 0px;
						padding: 0px;
						float: left;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery h3 span 
						{
							display: none;
						}
					
					#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext 
					{
						width: 582px;
						float: left;
						background: url(../Images/GalleryPhotoGallery_02.gif) repeat-y top left;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext p 
						{
							padding: 10px;
							width: 562px;
							margin: 0px;
							float: left;							
						}
						
						#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext #photocontainer 
						{
							width: 562px;
							padding: 0px 10px 10px 10px;
							background: url(../Images/GalleryPhotoGallery_04.gif) no-repeat bottom left;
							float: left;
						}
						
							#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext #photocontainer .photo 
							{
								float: left;
								width: 133px;
								height: 100px;
								background: #CCFFCC;
								margin: 0px 10px 10px 0px;
							}
							
								#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext #photocontainer .photo.nomargin 
								{
									margin-right: 0px;
								}
								
								#wrapper #sitecontainer #rightcolumn #pagecontent #photogallery #photogallerytext #photocontainer .photo img 
								{
									border: solid 0px;
								}				
				
				/* Latest News */
				#wrapper #sitecontainer #rightcolumn #pagecontent #latestnews 
				{
					margin-top: 10px;
					float: left;
					width: 582px;
					height: 110px;								
				}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #latestnews h3 
					{
						margin: 0px;
						padding: 0px;
						background: url(../Images/HomeLatestNews_01.gif) no-repeat top left;
						width: 582px;
						height: 27px;
					}
					
						#wrapper #sitecontainer #rightcolumn #pagecontent #latestnews h3 span 
						{
							display: none;
						}
				
					#wrapper #sitecontainer #rightcolumn #pagecontent #latestnews #latestnewstext 
					{
						width: 562px;
						float: left;
						height: 63px;
						background: url(../Images/HomeLatestNews_02.gif) no-repeat top left;
						padding: 10px;
					} 
	
	#wrapper #footer
	{
		width: 900px;
		float: left;
		color: #7065AF;		 
	}
	
		#wrapper #footer ul  
		{
			margin: 11px 0px 11px 11px;
			padding: 0px;
		}		
		
			#wrapper #footer ul li 
			{
				list-style-type: none;
				display: inline;
				color: #7065AF;
				margin-left: 30px;
			}
			
				#wrapper #footer ul li.copyright 
				{
					margin: 0px 33px 0px 0px;
				}
			
				#wrapper #footer ul li a 
				{
					color: #7065AF;
				}