/*------------------------------------------------------------------

project:	Abel Roofing
date created:	3 July 2009
author:	Paul Crawford


-------------------------------------------------------------------*/

@import url("baseforms.css");
@import url("thickbox.css");
@import url("sifr.css");


/*-------------------------------*/
/* Reset
/*-------------------------------*/
*, html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
	margin: 0;
	padding: 0;
	border: 0;
}

* {	line-height: 1.6em; }


/*-------------------------------------------    
    Basic Selectors
-------------------------------------------*/
body {
	font-size: 62.5%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #0a0a0a url('../images/core/bg.gif') top center repeat-x;
	color: #e6e6ea;
}

a { color: #71bbc8; text-decoration: none; }
a:hover, a:focus { color: #01a7c5; text-decoration: underline; }
span.mailto { color: #71bbc8; }  
a.mailto { color: #71bbc8; text-decoration: none;  }  
a.mailto:hover { color: #01a7c5; text-decoration: underline; }  

h1 { font-size: 1.4em; color: #fffafa; margin-bottom: 1em; }
h2 { font-size: 1.3em; color: #bdbdc1; }
h3 { font-size: 1.2em; color: #9d9d9d; }
h4 { font-size: 1.1em; color: #7d7d7d; }
h5 { font-size: 1em; color: #ffffff; }
p, ul, ol { margin-bottom: 1.35em; }
p, ul, ol { font-size: 1.2em; }

ul { list-style-type: square; margin-left: 30px; }

hr {
	border: 0;
	border-bottom: 1px solid #d9d9d9;
	height: 1%;
	margin: 15px 0;
	^margin: 0 0 10px 0; /* IE 7 */
}

strong.stronghome { font-size: 1.4em; color: #fffafa; margin-bottom: 1em; }
h1.h1home         { font-size: 1.2em; color: #fffafa; margin-bottom: 1em; }

/*-------------------------------*/
/* Container
/*-------------------------------*/
#container {
	width: 970px;
	margin: 0 auto;
	padding-bottom: 20px;
}

#container-bg {
	background: url('../images/core/bg_container.gif') top center repeat-y;
}


/*-------------------------------*/
/* Header
/*-------------------------------*/
#header { 
	height: 70px;
	background: url('../images/core/bg_header.gif') 0 0 no-repeat;
	position: relative;
}

#header h1 {
	width: 372px; height: 19px;
	background: url('../images/core/logo_abel.gif') no-repeat;
	text-indent: -9999px;
	position: absolute;
	top: 41px; left: 40px;
}


/*-------------------------------*/
/* Nav
/*-------------------------------*/
#nav {
	width: 387px;
	height: 35px;
	position: absolute;
	top: 35px; right: 11px;
}

#nav ul { 	
	list-style-type: none;
	margin-left: 0;
}

#nav ul li {
	display: block;
	float: left;
}

#nav ul li a {
	float: left;
	overflow: hidden;
	text-indent: -9999px;
	height: 35px;
}

#nav ul li a.home {
	background: url('../images/nav/nav_home.gif') 0 0 no-repeat;
	width: 95px; 
}

#nav ul li a.roofing {
	background: url('../images/nav/nav_roofing.gif') 0 0 no-repeat;
	width: 95px; 
}

#nav ul li a.patios {
	background: url('../images/nav/nav_patios.gif') 0 0 no-repeat;
	width: 95px; 
}

#nav ul li a.contact {
	background: url('../images/nav/nav_contact.gif') 0 0 no-repeat;
	width: 100px; 
}


/* -- Rollover -- */
#nav ul li a:hover.home,
#nav ul li a:hover.roofing,
#nav ul li a:hover.patios,
#nav ul li a:hover.contact {
	background-position: 0 -35px !important;
}

/* -- Active -- */
#nav li a:hover.home, 
body#home #nav li a.home,
body#roofing #nav li a.roofing,
body#patios #nav li a.patios,
body#contact #nav li a.contact {
	background-position: 0 -35px !important;
}



/*-------------------------------*/
/* Content Container
/*-------------------------------*/
#content-container {
	background: url('../images/core/bg_content.gif') 0 0 repeat-y;
}


/*-------------------------------*/
/* Banner
/*-------------------------------*/
#banner {
	background: url('../images/core/bg_banner.gif') 0 0 no-repeat;
	height: 425px;
	padding: 30px 30px 10px 30px;
	position: relative;
	z-index: 10;
}

/* --- roofing --- */
#banner-roofing {
	width: 450px; height: 425px;
	background: url('../images/core/bg_banner_roofing.gif') no-repeat;
	float: left;
	margin-right: 10px;
}

#banner-roofing h2 {
	width: 352px; height: 100px; 
	background: url('../images/titles/titles_abelroofing.png') 0 0 no-repeat;
	text-indent: -9999px;
	margin-left: 25px;
}

#flash-roofing {
	width: 425px; height: 321px;
	margin: 4px 0 0 25px;
}

#button-roofing { 	
	position: absolute;
	bottom: 24px; left: 254px;
	z-index: 90;
}

#button-roofing a {
	width: 206px; height: 24px;
	background: url('../images/core/button_roofing.gif') no-repeat;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
}

#button-roofing a:hover {
	background-position: 0 -24px !important;
}

/* --- patios --- */
#banner-patios {
	width: 450px; height: 425px;
	background: url('../images/core/bg_banner_patios.gif') no-repeat;
	float: left;
}

#banner-patios h2 {
	width: 325px; height: 100px; 
	background: url('../images/titles/titles_abelpatios.png') 0 0 no-repeat;
	text-indent: -9999px;
	margin-left: 13px;
}

#flash-patios {
	width: 425px; height: 321px;
	margin: 4px 0 0 13px;
}

#button-patios { 	
	position: absolute;
	bottom: 24px; right: 262px;
	z-index: 90;
}

#button-patios a {
	width: 194px; height: 24px;
	background: url('../images/core/button_patios.gif') no-repeat;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
}

#button-patios a:hover {
	background-position: 0 -24px !important;
}


/*-------------------------------*/
/* Content
/*-------------------------------*/
#content-box {
	width: 807px;
	margin: 0 30px;
	padding: 20px 53px 58px 50px;
	_padding: 0 53px 58px 50px;
}

#content-box:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* --- left call to action --- */
#left-cta { 
	width: 166px;
	float: left;
}

#phone {
	height: 35px;
	background: url('../images/core/phone.gif') no-repeat;
	text-indent: -9999px;
	margin-bottom: 1.9em;
}

#phone-list ul {
	list-style-type: none;
	margin: 0 0 2em;
}

#phone-list ul li {
	padding: 0 0 0 20px;
}

#phone-list ul li.phone { background: url('../images/core/icon_phone.gif') 0 3px no-repeat; }
#phone-list ul li.fax { background: url('../images/core/icon_fax.gif') 0 3px no-repeat; }
#phone-list ul li.email { background: url('../images/core/icon_email.gif') 0 3px no-repeat; }


/* --- content --- */
#content {
	width: 595px;
	float: left;
	margin-left: 46px;
	padding: 10px 0 0 0;
}


/*-------------------------------*/
/* Footer
/*-------------------------------*/
#footer { 
	height: 84px;
	background: #050505 url('../images/core/bg_footer.gif') bottom center no-repeat;
	padding: 10px 0 0 64px;
	position: relative;
}

#affiliates {
	width: 300px; height: 100px;
	float: left;
	position: relative;
}

.employers {width: 90px; height: 90px; position: absolute; top: -23px; left: 0; }
.hia { width: 42px; height: 42px; position: absolute; top: 0; left: 102px; }
.stratco { width: 111px; height: 42px; position: absolute; top: 0; left: 157px; }
.bluescope{width: 90px; height: 90px; position: absolute; top: -23px; left: 686px; }

#footer-links { 
	width: 280px;
	float: left;
	display: block;
	padding-top: 4px;
}

#footer-links a { color: #878787; text-decoration: none; }
#footer-links a:hover { color: #01a7c5; text-decoration: underline; }

#footer-links p {
	color: #878787;
	font-size: 1.1em;
}

#wflogo {
	width: 66px; height: 21px;
	position: absolute;
	top: 22px; right: 52px;
}


/*-------------------------------*/
/* Inner pages
/*-------------------------------*/
#inner-container {
	background: url('../images/core/bg_banner.gif') 0 0 no-repeat;
	padding: 30px 40px 58px 40px;
}

#inner-banner {
	height: 210px;
	position: relative;
}

/* --- inner roofing --- */
body#roofing #inner-banner h1 {
	width: 352px; height: 100px; 
	background: url('../images/titles/titles_abelroofing.png') 0 0 no-repeat;
	text-indent: -9999px;
	position: absolute;
	top: 0; left: 15px;
}

body#roofing #inner-banner h2 {
	width: 890px; height: 210px;
	background: url('../images/titles/inner_roofing.gif') 0 0 no-repeat;
	text-indent: -9999px;
}

#roofing-images {
	width: 388px; height: 210px;
	position: absolute;
	top: 0; right: 38px;
}

#inner-content-box {
	padding: 0 37px 0 40px;
}

#breadcrumbs {
	width: 523px;
	height: 16px;
	float: left;
}

#breadcrumbs ul { 	
	list-style-type: none;
	margin-left: 0;
}

#breadcrumbs ul li {
	display: block;
	float: left;
}

#breadcrumbs ul li a {
	float: left;
	overflow: hidden;
	text-indent: -9999px;
	height: 14px;
	margin-right: 32px;
}

#breadcrumbs ul li a.new-roofing {
	background: url('../images/nav/nav_newroofing.gif') no-repeat; 
	width: 114px;
}

#breadcrumbs ul li a.re-roofing {
	background: url('../images/nav/nav_reroofing.gif') no-repeat; 
	width: 97px;  
}

#breadcrumbs ul li a.gutters {
	background: url('../images/nav/nav_gutters.gif') no-repeat; 
	width: 69px;
}

#breadcrumbs ul li a.down-pipes {
	background: url('../images/nav/nav_downpipes.gif') no-repeat; 
	width: 106px;
}

#breadcrumbs ul li a.carports {
	background: url('../images/nav/nav_carports.gif') no-repeat; 
	width: 169px;
}

#breadcrumbs ul li a.veranda {
	background: url('../images/nav/nav_veranda.gif') no-repeat; 
	width: 80px;  
}

#breadcrumbs ul li a.gazebo {
	background: url('../images/nav/nav_gazebo.gif') no-repeat; 
	width: 72px;
}

#breadcrumbs ul li a.sunroof {
	background: url('../images/nav/nav_sunroof.gif') no-repeat; 
	width: 124px;
}

/* -- Rollover -- */
#breadcrumbs ul li a:hover.new-roofing,
#breadcrumbs ul li a:hover.re-roofing,
#breadcrumbs ul li a:hover.gutters,
#breadcrumbs ul li a:hover.down-pipes,
#breadcrumbs ul li a:hover.carports,
#breadcrumbs ul li a:hover.veranda,
#breadcrumbs ul li a:hover.gazebo,
#breadcrumbs ul li a:hover.sunroof {
	background-position: 0 -14px !important;
}

#phone-right h3 {
	background: url('../images/core/phone_right.gif') no-repeat;
	width: 200px; height: 16px;
	text-indent: -9999px;
	float: right;
	margin-right: 11px;
}

/* --- inner patios --- */
body#patios #inner-banner h1 {
	width: 352px; height: 100px; 
	background: url('../images/titles/titles_abelpatios.png') 0 0 no-repeat;
	text-indent: -9999px;
	position: absolute;
	top: 0; left: 15px;
}

body#patios #inner-banner h2 {
	width: 890px; height: 210px;
	background: url('../images/titles/inner_patios.gif') 0 0 no-repeat;
	text-indent: -9999px;
}

#patios-images {
	width: 388px; height: 210px;
	position: absolute;
	top: 0; right: 38px;
}

/* --- inner contact --- */
body#contact #inner-banner h2 {
	width: 890px; height: 210px;
	background: url('../images/titles/inner_contact.gif') 0 0 no-repeat;
	text-indent: -9999px;
}

#contact-images {
	width: 388px; height: 210px;
	position: absolute;
	top: 0; right: 38px;
}


/* --- inner content --- */
#inner-content { width: 812px; }

#inner-content h1, 
#inner-content h2, 
#inner-content h3, 
#inner-content h4, 
#inner-content h5 { margin-bottom: 1em; }

#inner-content:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top { margin-top: 35px; }

#title {
	width: 150px;
	float: left;
	margin-top: 35px;
	margin-right: 12px;
}

#title h1 { 
	height: 100px;
	text-indent: -9999px;
}

#title h1.roofing { background: url('../images/titles/new_roofing.gif') no-repeat; }
#title h1.reroofing { background: url('../images/titles/re_roofing.gif') no-repeat; }
#title h1.gutters { background: url('../images/titles/gutters.gif') no-repeat; }
#title h1.down { background: url('../images/titles/down_pipes.gif') no-repeat; }
#title h1.carports { background: url('../images/titles/carports.gif') no-repeat; }
#title h1.veranda { background: url('../images/titles/veranda.gif') no-repeat; }
#title h1.gazebo { background: url('../images/titles/gazebo.gif') no-repeat; }
#title h1.sunroof { background: url('../images/titles/sunroof.gif') no-repeat; }

#left-content {
	width: 648px;
	float: left;
	margin-top: 35px;
}

/* --- gallery --- */
#gallery {
	width: 100%;
	float: left;
	margin-bottom: 2.5em;
}

#gallery ul.gallery-list {
	list-style-type: none;
	margin: 0;
}

#gallery ul li {
	display: inline;
	padding: 0 12px 0 0;
	float: left;
}

#gallery ul li a img {
	border: 4px solid #4c4d51;
}

#gallery ul li a:hover img {
	border: 4px solid #a3a5ad;
}


/*-------------------------------*/
/* Contact
/*-------------------------------*/
#left-column {
	width: 400px;
	float: left;
	margin-top: 35px;
}

#reasons-list {
	width: 330px;
	background-color: #4c4d51;
	padding: 15px;
}

#reasons-list ol {
	margin-left: 2.5em;
}

#right-column {
	width: 380px;
	float: left;
	margin-top: 35px;
	border-left: 1px solid #4c4d51;
	padding-left: 20px;
}