@import url('reset.css');
@import url('slimbox2.css');


/* General --------------------------------------------------------------------------------------------------------------------------------------*/

body {font: 62.5%/1.8em Arial,san-serif; background: url(../images/bg/bg-body.jpg) #e6f1f7 top center repeat-x;}
	p {font-size: 1.2em; line-break: 18em; color: #606665; padding: 0 0 20px 0;}
	a {font-size: 1.2em; color: #c00c00; text-decoration: none;}
	a:hover {text-decoration: none;}
	
	h1 {padding: 0 0 30px 0;}
	
	#content-right ul {padding: 0 0 20px 0;}
	#content-right li {margin: 0 0 0 30px; padding: 0 0 10px 0; font-size: 1.2em; color: #606665; list-style: circle;}

h1#t-welcome {background: url(../images/titles/title-welcome.gif) top left no-repeat; text-indent: -9999px;}
h1#t-profile {background: url(../images/titles/title-profile.gif) top left no-repeat; text-indent: -9999px;}
h1#t-plumbing {background: url(../images/titles/title-plumbing.gif) top left no-repeat; text-indent: -9999px;}
h1#t-hot {background: url(../images/titles/title-hot.gif) top left no-repeat; text-indent: -9999px;}
h1#t-commercial {background: url(../images/titles/title-commercial.gif) top left no-repeat; text-indent: -9999px;}
h1#t-rainwater {background: url(../images/titles/title-rainwater.gif) top left no-repeat; text-indent: -9999px;}
h1#t-contact {background: url(../images/titles/title-contact.gif) top left no-repeat; text-indent: -9999px;}
h1#t-thankyou {background: url(../images/titles/title-thankyou.gif) top left no-repeat; text-indent: -9999px;}


/* Wrapper --------------------------------------------------------------------------------------------------------------------------------------*/

#wrapper {background: url(../images/bg/bg-top.gif) center top no-repeat; }
	#container {width: 940px; margin: auto; background: url(../images/bg/bg-banner.jpg) #fff top center no-repeat;}
		#header {width: 881px; height: 189px; padding: 0 59px 0 0;}
			#logo {width: 158; height: 170px; background: url(../images/logo/logo.jpg) top center no-repeat; float: right;}
		#content {width: 940px;}
			#content-left {width: 247px; padding: 0 0 0 59px; float: left;}
			#content-right {width: 481px; padding: 132px 60px 50px 93px; float: left;}
			

/* Navigation --------------------------------------------------------------------------------------------------------------------------------------*/

ul#nav {width: 247px; height: 223px;}
	ul#nav li {text-indent: -9999px;}
			#home a {width: 247px; height: 40px; background: url(../images/nav/nav-home.jpg) top center no-repeat; display: block;}
			#profile a {width: 247px; height:27px; background: url(../images/nav/nav-profile.jpg) top center no-repeat; display: block;}
			#plumbing a {width: 247px; height:27px; background: url(../images/nav/nav-plumbing.jpg) top center no-repeat; display: block;}
			#hot a {width: 247px; height:27px; background: url(../images/nav/nav-hot.jpg) top center no-repeat; display: block;}
			#commercial a {width: 247px; height:27px; background: url(../images/nav/nav-commercial.jpg) top center no-repeat; display: block;}
			#rainwater a {width: 247px; height: 27px; background: url(../images/nav/nav-rainwater.jpg) top center no-repeat; display: block;}
			#contact a {width: 247px; height: 27px; background: url(../images/nav/nav-contact.jpg) top center no-repeat; display: block;}
			#bottom {width: 247px; height: 27px; background: url(../images/nav/nav-bottom.jpg) top center no-repeat; display: block;}
			
			body#home-page #home a,
			#home a:hover {background-position: 0 -40px;}

			body#profile-page #profile a,
			body#plumbing-page #plumbing a,
			body#hot-page #hot a,
			body#commercial-page #commercial a,
			body#rainwater-page #rainwater a,
			body#contact-page #contact a,
			#profile a:hover,
			#plumbing a:hover,
			#hot a:hover,
			#commercial a:hover,
			#rainwater a:hover,
			#contact a:hover {background-position: 0 -27px;}
			


/* CTA --------------------------------------------------------------------------------------------------------------------------------------*/

#cta {padding: 26px 0 0 0;}
#cta a {width: 204px; height: 59px; background: url(../images/cta/cta-bg.jpg) top center no-repeat; display: block; padding: 43px 21px 0 21px; color: #fff;}
	#cta a:hover {background-position: 0 -102px; color: #5cba4d; }

#van {width: 248px; height: 102px; padding: 20px 0 0 0;}


/* Contact Detail --------------------------------------------------------------------------------------------------------------------------------------*/

#contactdetail {padding: 0 0 70px 0;}
#contactdetail p {padding: 27px 0 0 10px; color: #5190b4; font-size: 1.2em;}
	#contactdetail ul {padding: 0 0 0 10px; color: #5190b4; font-size: 1.2em;}



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

#footerwrapper {width: 940px; margin: auto; padding: 15px 0 15px 0;}
#footer {width: 940px; height: 102px; background: #fff; padding: 15px 0 0 0;}
#footer a {color: #a6a6a6; font-size: 1em;}
#footer a:hover {color: #666666; text-decoration: underline; font-size: 1em;}

	
	#footernav {width: 340px; font-size: 1.1em; color: #999999; text-align: right; padding: 0 60px 0 0; float: right;}
	#footernav li {padding: 0 0 15px 0; color: #a6a6a6;}
	
		
	
	.aflogo {width: 90px; height: 81px; padding: 15px 0 0 60px;}


/* Slimbox --------------------------------------------------------------------------------------------------------------------------------------*/

#galleryshowcase li {float: left; margin: 4px; list-style: none;}
#galleryshowcase img { border: 4px solid #ccc;}


/* Enquiry Form  --------------------------------------------------------------------------------------------------------------------------------------*/

#enquiry li {list-style: none; margin: 0px;}
		input {width: 238px; height: 27px; background: url(../images/form/bg-input.jpg) top center no-repeat; border: none; color: #fff; padding: 5px 5px 0 10px; font-family: Arial; font-size: 1.1em;}
		textarea {width: 238px; height: 113px; background: url(../images/form/bg-textarea.jpg) top center no-repeat; border: none; color: #fff; padding: 10px 5px 0 10px;  font-family: Arial; font-size: 1.1em; overflow: hidden; resize: none;}
		label.error {display: block; padding: 0 0 0 20px;}
		#submitbtn { width: 75px; height: 32px; padding: 0;margin: 0 0 0 3px; display: block;}
	
	#thankyou {width: 200px; float: right; padding: 0 100px 0 0;}