/*  
Website: J&G Harding Building Services
URL: hardingbuildingservices.co.uk
Description: Style for J&G Harding Building Services website. Burgundy and white.
Version: 1.0
Author: Tom Hare
Author URL: http://www.colourgarden.net
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td{margin: 0; padding: 0; border: 0; line-height: inherit; font-family: inherit; font-size: 100%;}

@font-face{font-family: 'Tuffy'; src: url('/fonts/tuffy.eot'); src: local('?'), url('/fonts/tuffy.woff') format('woff'), url('/fonts/tuffy.ttf') format('truetype'), url('/fonts/tuffy.svg#webfont') format('svg'); font-weight: normal; font-style: normal; font-variant: normal;}

ol, ul{list-style: none;}
ul.list{padding: 0 0 0 20px;}
ul.list li{list-style: disc;}

h1, h2, h3, h4{font-size: 2.25em; color: #444; font-family: Tuffy; font-weight: normal; line-height: 1.15em; letter-spacing: -0.05em; margin: 0 0 15px;}
h2{font-size: 1.4em; font-weight: bold;}
h3{font-size: 2.25em; margin: 0;}
h3 a{text-decoration: none;}
h3 a:hover{text-decoration: underline;}
h4{font-size: 1.4em; margin: 15px 0;}

p{margin: 1.25em 0;}

blockquote{padding: 0 5px 5px 12px; background: url(/img/quote-bg.png) no-repeat 100% 100%;}
.mainContent blockquote{background: none; padding-bottom: 0;}

.hr{display: block; height: 1px; border-top: 1px #ccc dotted; margin: 12px 0;}
.hr hr{display: none;}

a{color: #000;}
a:hover{text-decoration: none;}

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

body{font-family: Arial, Tahoma, Sans-Serif; font-size: 0.8em; line-height: 1.5em; color: #666; padding-top: 120px;}

#head{position: absolute; width: 100%; height: 180px; background: #39242b; top: 0; z-index: 1;}
	#head a.logo{position: absolute; left: 50%; margin-left: -467px; width: 414px; height: 119px; background: url(/img/logo.jpg) no-repeat 0 0; text-decoration: none; text-indent: -9999px;}
	#head ul{position: absolute; top: 45px; right: 50%; margin-right: -495px;}
	#head ul li{float: left;}
	#head ul li a{float: left; font-size: 0.95em; padding: 12px 15px; margin: 0 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #c8c2c4; text-transform: uppercase; font-weight: bold; text-decoration: none; border: 1px transparent solid;}
	#head ul li a:hover, #head ul li.active a{border: 1px #563c45 solid; background: url(/img/nav-bg.gif) repeat-x 0 0; -webkit-box-shadow: 1px 1px 3px #121212; -moz-box-shadow: 1px 1px 3px #121212; box-shadow: 1px 1px 3px #121212;}

#content{position: relative; width: 970px; margin: 0 auto; padding: 5px; background: #fff; z-index: 10; border-top: 7px #523d44 solid; -webkit-box-shadow: 0 0 40px #39242b; -webkit-border-radius: 0 0 15px 15px; -moz-box-shadow: 0 0 40px #39242b; -moz-border-radius: 0 0 15px 15px; -webkit-box-shadow: 0 0 40px #39242b; -webkit-border-radius: 0 0 15px 15px; box-shadow: 0 0 40px #39242b; border-radius: 0 0 15px 15px;}
	#content .mainContent{float: left; width: 675px; padding: 5px 0 15px 25px;}
	#content .internal{padding: 20px 0 15px 25px;}
	#content .sidebar{float: right; width: 225px; padding: 20px 15px; background: #ebebeb; -webkit-border-radius: 0 0 15px; -moz-border-radius: 0 0 15px; border-radius: 0 0 15px;}

#foot-top{position: relative; width: 100%; background: #39242b; margin-top: -50px; padding: 80px 0 20px; color: #c49fb0;}
	#foot-top .left{float: left; position: relative; width: 350px; left: 50%; margin-left: -450px;}
	#foot-top .right{float: right; position: relative; width: 350px; right: 50%; margin-right: -450px; text-align: right;}
	#foot-top a{color: #c49fb0;}
	#foot-top strong{color: #fff;}
#foot-bottom{height: auto; background: #2a1b20; color: #988d91; font-size: 0.85em; padding: 3px 0; text-align: center;}
	#foot-bottom a{color: #988d91;}
	#foot-bottom a:hover{text-decoration: none;}
	
.button{display: block; padding: 7px 10px; line-height: 1.8em; text-decoration: none; color: #fff; text-transform: uppercase; border: 2px #52393f solid; background: #55343f; background: -webkit-gradient(linear, left top, left bottom, from(#653c4e), to(#4a2c36)); background: -moz-linear-gradient(top, #653c4e, #4a2c36); -moz-box-shadow: 1px 1px 2px #666; -webkit-box-shadow: 1px 1px 2px #666; box-shadow: 1px 1px 2px #666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
	.button span{color: #b68a99; margin: 0 0 0 12px; padding: 2px 6px; background: #38232a; border: 1px #4f3840 solid; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em;}
	.button:hover span{background: #24161a; color: #fff;}
	
.slider{position: relative; width: 970px; overflow: hidden; margin: 0 0 15px;}
	.slider .slidesHolder{width: 970px; height: 350px; overflow: hidden;}
	.slider .slidesHolder .slide{float: left; position: relative; z-index: 1;}
	.slider .sliderNav{float: left; position: relative; z-index: 2; width: 100%; text-align: center; background: #ebebeb; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ebebeb)); background: -moz-linear-gradient(top, #fff, #ebebeb); -moz-box-shadow: 0 -2px 3px #999; -webkit-box-shadow: 0 -2px 3px #999; box-shadow: 0 -2px 3px #999; border-bottom: 1px #ddd solid;}
	.slider .sliderNav ul{position: relative; float: left; left: 50%;}
	.slider .sliderNav ul li{position: relative; float: left; right: 50%; border-left: 1px #ddd solid; border-right: 1px #efefef solid;}
	.slider .sliderNav ul li.last{border-right: 1px #ddd solid;}
	.slider .sliderNav ul li a{display: block; outline: none; padding: 20px 30px; text-decoration: none; color: #666; -webkit-transition: color 0.25s; -webkit-transition: background 0.5s;}
	.slider .sliderNav ul li a:hover, .slider .sliderNav ul li.active a{background: #fff; color: #000; -webkit-transition: color 0.25s; -webkit-transition: background 0.5s;}
	.slider .arrow{position: absolute; width: 50px; height: 50px; z-index: 10; text-indent: -9999px; outline: none; top: 50%; margin-top: -65px;}
	.slider .next{right: 15px; background: url(/img/slider-next-prev.png) no-repeat -50px 0;}
	.slider .next:hover{background-position: -50px -50px;}
	.slider .prev{left: 15px; background: url(/img/slider-next-prev.png) no-repeat 0 0;}
	.slider .prev:hover{background-position: 0 -50px;}
	
	.slider .button{position: absolute;}
	.kitchen .button{bottom: 60px; right: 260px;}
	.patio .button{right: 260px; bottom: 50px;}
	.decking .button{top: 150px; right: 220px;}
	.brickwork .button{top: 200px; right: 160px;}
	.bathroom .button{top: 170px; left: 420px;}
	
.csPhotos:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
	.csPhotos li{float: left; margin: 0 10px 0 0;}
	.csPhotos img{vertical-align: bottom; padding: 3px; border: 1px #666 solid;}
	
form.contact label{float: left; width: 100px; margin: 7px 0;}
form.contact input, form.contact textarea{float: left; width: 350px; border: 1px #ccc solid; padding: 5px; margin: 3px 0;}
form.contact input.submit{width: auto; background: #39242b; color: #fff; border: 0; padding: 10px 15px; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
form.contact #recaptcha_widget_div{float: left; margin: 3px 0;}

div.errors{width: 80%; background: #ffe3e3; border: 2px #f1b6b6 solid; margin: 20px 0; padding: 5px 15px;}
div.errors p{margin: 10px 0;}
div.errors li{list-style: disc; margin: 0 0 0 20px;}
div.success{background: #e3ffe8; border-color: #b6f1ca;}