/* CSS Document */

@font-face {
    font-family: 'DINProRegular';
    src: url('../../includes/fonts/dinpro-regular-webfont.eot');
    src: url('../../includes/fonts/dinpro-regular-webfont.eot?#iefix') format('eot'),
         url('../../includes/fonts/dinpro-regular-webfont.woff') format('woff'),
         url('../../includes/fonts/dinpro-regular-webfont.ttf') format('truetype'),
         url('../../includes/fonts/dinpro-regular-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'NiveaBookItalicRegular';
    src: url('../../includes/fonts/niveabooita-webfont.eot');
    src: url('../../includes/fonts/niveabooita-webfont.eot?#iefix') format('eot'),
         url('../../includes/fonts/niveabooita-webfont.woff') format('woff'),
         url('../../includes/fonts/niveabooita-webfont.ttf') format('truetype'),
         url('../../includes/fonts/niveabooita-webfont.svg#webfontEWmt96HC') format('svg');
    font-weight: normal;
    font-style: normal;

}


#main h1, #main h2, ul#buckets li a, #callbackform h2, #callbackform table tr, #loft-conversions-nav .topline, #sidebar #about-nav .topline, #sidebar #contact-nav .topline {
	font-family: NiveaBookItalicRegular;
}

#navigation ul li a, ul#dropDown-loft-conversions {
	font-family: DINProRegular;	
}

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background: url(../../images/layout/bodyBg.jpg) top repeat-x #ececec;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #0000FF;
	text-decoration: underline;
	outline: none;
}

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

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.3em;
	font-weight: normal;
	color: #ac514b;
}

h2 {
	font-size: 1.9em;
	font-weight: normal;
	color: #ac514b;
}

h3 {
	font-size: 1.3em;
	font-weight: normal;
	color: #666;
}

/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
}

	#index #contentContainer {
		width: 960px;
		border-top: 700px solid #fff;
	}
	
	#contentContainer {
		border-top: 588px solid #fff;	
	}
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 580px;
			padding: 25px 10px 10px 10px;
		}
		
			#main p {
				margin: 10px 0px 10px 0px;
				font-size: 1.2em;
				line-height: 20px;
			}
			
			#main a {
				color: #a74640;	
			}
			
			#main ul {
				font-size: 1.2em;
				padding: 3px 0px;
			}
			
				#main ul li {
					padding: 4px 0px 4px 30px;
					list-style: none;
					background: url(../../images/misc/tick.gif) left center no-repeat;
				}
					#main ul li a {
						color: #a74640; 
					}
				
					#main ul li span {
						color: #af5a55;	
					}
					
						#main strong {
							color: #a74640;	
						}
						
		#index #main ul#index-list .index-a,
		#index #main ul#index-list .about-a,
		#index #main ul#index-list .gallery-a,
		#index #main ul#index-list .testimonials-a,
		#index #main ul#index-list .contact-a {
			display: none;	
		}
				
		.contact #main {
			width: 960px;
		}
		
		.contact img#contact-quote {
			position: absolute;
			top: 625px;
			right: 40px;	
		}

/* 
/CTA Styles
--------------------------------------------------------------- */
		
		#sidebar {
			float: right;
			width: 310px;
			padding-top: 30px;
		}
		
			#sidebar #sidebar-free-design {
				background: url(../../images/layout/sidebar-free-design.jpg);
				width: 292px;
				height: 38px;	
				padding: 95px 0px 0px 8px;
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 1.6em;
				color: #65965c;
				margin-bottom: 20px;
			}
			
				#sidebar-quote {
					margin-bottom: 20px;	
				}
			
				.quote #sidebar-quote {
					display: none;
					margin-bottom: 20px;	
				}
		
		#loft-conversions #sidebar #loft-conversions-nav {
			display: block;	
		}
			
		#sidebar #loft-conversions-nav {
			margin-bottom: 15px;	
			width: 300px;
			background: url(../../images/layout/callbackBg.jpg);
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			border: 0px solid #c8c7c2;	
			display: none;
		}
		
		#sidebar #loft-conversions-nav .topline {
			font-size: 2.2em;
			font-weight: normal;
			color: #ac514b;
			padding: 10px 0px 0px 20px;
		}
		
			#sidebar #loft-conversions-nav ul {
				padding: 5px 0px 20px 20px;
				list-style: none;
				color: #a74640;
			}
			
				#sidebar #loft-conversions-nav ul li {
					background: url(../../images/layout/subnav-list.gif) left no-repeat;
					padding: 1px 0px 1px 20px;
					
				}
				
					#sidebar #loft-conversions-nav ul li a {
						font-size: 1.1em;
						font-style: italic;
						color: #000;	
						text-decoration: none;
					}
					
						#sidebar #loft-conversions-nav ul li a:hover {
							color: #ac514b;
						}
						
						
		#about #sidebar #about-nav {
			display: block;	
		}
			
		#sidebar #about-nav {
			margin-bottom: 15px;	
			width: 300px;
			background: url(../../images/layout/callbackBg.jpg);
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			border: 0px solid #c8c7c2;	
			display: none;
		}
		
		#sidebar #about-nav .topline {
			font-size: 2.2em;
			font-weight: normal;
			color: #ac514b;
			padding: 10px 0px 0px 20px;
		}
		
			#sidebar #about-nav ul {
				padding: 5px 0px 20px 20px;
				list-style: none;
				color: #a74640;
			}
			
				#sidebar #about-nav ul li {
					background: url(../../images/layout/subnav-list.gif) left no-repeat;
					padding: 1px 0px 1px 20px;
					
				}
				
					#sidebar #about-nav ul li a {
						font-size: 1.1em;
						font-style: italic;
						color: #000;	
						text-decoration: none;
					}
					
						#sidebar #about-nav ul li a:hover {
							color: #ac514b;
						}
			
		#bottom-cta {
			padding-top: 20px;
			width: 620px;
			height: 170px;	
		}
		
		#bottom-cta #bottom-cta-left {
			float: left;
		}
		
			#gallery #bottom-cta-left {
				display: none	
			}
			
		#bottom-cta #bottom-cta-right {
			float: right;
			background: url(../../images/layout/bottom-cta-right.jpg);
			width: 300px;
			height: 150px;	
		}
		
			#gallery #bottom-cta-right {
				float: left;	
			}
		
			#bottom-cta #bottom-cta-right p.click-here {
				font-size: 1.2em;
				padding: 20px 0px 0px 165px;
			}
			
				#bottom-cta #bottom-cta-right p.click-here a{
					color: #4e6da2;
				}
		
			#bottom-cta p {
				padding: 55px 0px 0px 80px;	
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 2.3em;
				color: #506993;
			}
			
		#mainrunner-bottom-CTA {
			background: url(../../images/layout/mainrunner-bottom-cta.jpg);
			width: 960px;
			height: 90px;
			position: absolute;
			top: 499px;	
		}
		
			#mainrunner-bottom-CTA p {
				padding: 34px 0px 0px 85px;	
				font-size: 2.0em;
				font-family: Georgia, "Times New Roman", Times, serif;
				color: #42634a;
				font-style: italic;
			}
			
/* Gallery Styles
--------------------------------------------------------------- */	

	#galleryContainer {
		padding-left: 10px;	
	}
	
	#galleryContainer img { 
		padding: 3px; 
	}
		
/* Buckets Styles
--------------------------------------------------------------- */

ul#buckets {
	position: absolute;	
	top: 518px;		
	left: 0px;
	z-index: 100;
	list-style: none;
}

	ul#buckets li {
		width: 320px;
		float: left;
		height: 155px;
	}
	
		ul#buckets li a {
			float: left;
			width: 300px;
			height: 57px;
			display: block;
			font-size: 1.8em;
			text-decoration: none;
			color: #a74640;
			padding: 125px 0px 0px 20px;
		}
		
			ul#buckets li a span {
				display: block;
				color: #3f3f3f;	
				font-size: 0.6em;
				padding-left: 10px;
			}
		
			ul#buckets li a.loft-conversions {
				background: url(../../images/layout/loft-conversions-bucket.jpg);
			}
	
			ul#buckets li a.garage-conversions {
				background: url(../../images/layout/garage-conversions-bucket.jpg);
			}
			
			ul#buckets li a.quote {
				background: url(../../images/layout/quote-bucket.jpg);
			}
	
				ul#buckets li a:hover {
					color: #7d7d7d;
				}
				
			#bucketsBg {
			width: 960px;
			height: 201px;
			position: absolute;
			top: 499px;
			z-index: 10;
			left: 0px;
			background: url(../../images/layout/bodyBg.jpg) 0px -518px repeat-x;	
			}
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 960px;
	height: 94px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
}

	#logo {
		width: 170px;
		height: 94px;
		float: left;
	}
	
	#cta-top-right {
		width: 780px;
		float: right;
		padding: 20px 10px 0px 0px;
		text-align: right;
		height: 74px;
		font-size: 1.4em;
		background: url(../../images/layout/bodyBg.jpg);
		font-family: Georgia, "Times New Roman", Times, serif;
		color: #a74640;
	}
	
		#cta-top-right span {
			font-size: 1.3em;
		}
	
		#cta-top-right .phone {
			font-size: 2.0em;
		}

/* Main Image Styles
--------------------------------------------------------------- */

#imgmain {
	z-index: 10;
	position: absolute;
	top: 147px;
	left: 10px;
}

/* Mainrunner Styles
--------------------------------------------------------------- */

#mainrunner {
	position: absolute;
	top: 147px;
	height: 352px;
	width: 960px;
	background: url(../../images/layout/mainrunnerBg.jpg);	
}

	#mainrunner #right-div {
		position: absolute;
		height: 352px;
		width: 300px;
		right: 10px;
		background: url(../../images/layout/right-divBg.jpg);	
	}
	
		#mainrunner #right-div p.top {
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 2.3em;	
			color: #434343;
			text-align: center;
			padding: 17px 0px 0px 0px;
		}
		
		.bedroom-conversions #mainrunner #right-div p.top,
		.dormer-conversions #mainrunner #right-div p.top,
		.bathroom-conversions #mainrunner #right-div p.top,
		.garage-conversions #mainrunner #right-div p.top,
		.loft-conversion-design #mainrunner #right-div p.top {
			font-size: 2.1em;	
		}
			

		
		.bathroom-conversions #mainrunner #right-div p.top {
			font-size: 2.1em;
		}
		
		.bedroom-conversions #mainrunner #right-div p.top {
			font-size: 2.1em;
		}
		
		.contact #mainrunner #right-div p.top {
			padding: 17px 0px 0px 0px;	
		}
		
		.about #mainrunner #right-div p.top,
		.faq #mainrunner #right-div p.top {
			font-size: 1.7em;	
			padding: 17px 0px 0px 0px;
		}
		
			#mainrunner #right-div p.content {
				position: absolute;
				top: 56px;
				left: 35px;
				color: #434343;
				text-align: center;
				width: 230px;
			}
			
				#mainrunner #right-div p.phone {
					position: absolute;
					top: 180px;
					left: 80px;
					text-align: center;
					font-size: 1.7em;
					color: #434343;
					font-family: Georgia, "Times New Roman", Times, serif;
				}
				
					#mainrunner #right-div p.phone span {
						display: block;
						color: #b05c56;	
					}
				
					#mainrunner #right-div p.email {
						position: absolute;
						top: 250px;
						left: 60px;
						font-size: 1.7em;	
						color: #434343;
						text-align: center;
						font-family: Georgia, "Times New Roman", Times, serif;
					}
					
						#mainrunner #right-div p.email span {
							display: block;
							color: #b05c56;	
						}
		
		#mainrunner #right-div ul {
			padding: 8px 0px 0px 60px;	
		}
		
			#mainrunner #right-div ul li {
				background: url(../../images/misc/mainrunner-list.gif) left bottom no-repeat;
				list-style: none;
				padding: 12px 0px 0px 0px;
			}
			
				#mainrunner #right-div ul li a {
					color: #a84640;
					text-decoration: none;
					font-family: Georgia, "Times New Roman", Times, serif;
					font-style: italic;
					font-size: 1.3em;
					padding: 0px 0px 0px 30px;	
				}
				
					#mainrunner #right-div img {
						position: absolute;
						top: 175px;
						left: 25px;
					}

/* Horizontal Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 960px;
	height: 53px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 94px;
	background: url(../../images/layout/navBg.jpg);
}

	#navigation ul {
		margin: 0px;
		padding: 12px 0px 0px 10px;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
			float: left;
			background: url(../../images/layout/navBg-li.jpg) right;
			padding-right: 8px;
		}
			  
			#navigation ul li a {
				float: left;
				background: #00216b;
				color: #434343;
				text-decoration: none;
				height: 21px;
				padding: 2px 12px 0px 18px;
				font-size: 1.1em;
				letter-spacing: -1px;
				background: url(../../images/layout/navBg-a.jpg) left;
				text-transform: uppercase;
			}

				#navigation ul li a.contact-a {
					border-right: none;
				}

				#navigation ul li a:hover {
					color: #ae191c;
				}
				
		#navigation ul li.dropDown {
			padding-right: 15px;
			background: url(../../images/layout/navBg-li-arrow.jpg) no-repeat right;	
		}
		
			#loft-conversions #navigation ul li.loft-conversions-a,
			#about #navigation ul li.about-a,
			#contact #navigation ul li.contact-a {
				background: url(../../images/layout/navBg-li-arrow-on.jpg) no-repeat right;	
			}
		
/* Drop Down Styles
--------------------------------------------------------------- */
				
	ul#dropDown-loft-conversions,
	ul#dropDown-about,
	ul#dropDown-contact {
		position: absolute;
		width: 140px;
		top: 135px;
		left: 90px;
		z-index: 1000;
		list-style: none;
		display: none;
	}
	
		ul#dropDown-about {
			left: 630px;
			width: 87px; 
		}
		
		ul#dropDown-contact {
			left: 843px;
			width: 100px;
		}
		
		ul#dropDown-loft-conversions li,
		ul#dropDown-about li,
		ul#dropDown-contact li {
			float: left;
			width: 135px;
			
		}	
			ul#dropDown-loft-conversions li a,
			ul#dropDown-about li a,
			ul#dropDown-contact li a {
				padding: 10px 20px 10px 20px ;
				color: #434343;	
				float: left;
				width: 96px;
				text-decoration: none;
				text-transform: uppercase;
				display: block;
				text-align: center;
				background: #E1E1D7;
				border: 2px solid #c8c7c2;
 				-moz-border-radius: 20px;
				border-radius: 20px;
				-webkit-border-radius: 20px;
			}
			
				ul#dropDown-about li a {
					padding: 10px 8px 10px 8px ;
					width: 67px;	
				}
				
				ul#dropDown-contact li a {
					padding: 10px 8px 10px 8px ;
					width: 80px;	
				}
			
			ul#dropDown-loft-conversions li a:hover,
			ul#dropDown-about li a:hover,
			ul#dropDown-contact li a:hover {
				color: #ae191c;	
			}
	


/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	width: 100%;
}

#footer {
	clear: both;
	width: 960px;
	color: #333;
	margin: 0px auto 20px auto;
	padding: 10px 0px 10px 0px;
	font-size: 1.2em;
	background: url(../../images/layout/footerBg.jpg);
	border: 2px solid #c8c7c2;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	
}

	#footer .index-a,
	#footer .contact-a {
		display: none;
	}

	#footer h2 {
		color: #a74640;
		padding: 3px 5px;
		font-size: 1.4em;
		font-family: Georgia, "Times New Roman", Times, serif;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #333;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #a74640;
			text-decoration: underline;
		}

/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-services {
		float: left;
		width: 220px;
		margin: 0px 0px 0px 50px;
	}
	
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 230px;
				padding: 3px 5px;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 220px;
	}
	
		#footer #footer-areas ul {
			float: left;
			width: 150px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 130px;
			padding: 3px 5px;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-address {
		float: left;
		width: 180px;
	}
		
		#footer #footer-address p {
			line-height: 20px;
			padding: 3px 5px;
		}
				
/* Footer Help & Advice
--------------------------------------------------------------- */	

	#footer #footer-help {
		float: right;
		width: 155px;
		margin: 0px 50px 0px 0px;
		
	}
	
		#footer #footer-help p.validLinks {
			flaot: left;
			clear: both;	
		}
		
			#footer #footer-help ul li {
				float: left;
			}
					
			#footer #footer-help ul li a {
				float: left;
				width: 155px;
				padding: 3px 5px;
			}
		
		#footer #footer-help p {
			line-height: 20px;
			padding: 3px 5px;
		}
		
		#footer #footer-help .bottomLink {
			margin-bottom: 5px;
		}
		
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		width: 960px;
		float: left;
		margin:30px 0px 0px 0px;
		text-align: center;
	}
	
		#footer #footer-bottom span {
			color: #a74640;
		}

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}