/*

Stylesheet for Rowsell Roofing
Handwritten by Oliver Coningham (AztecMedia.eu)
http://www.rowsellroofing.com/

*/


/* ------------ Defaults ------------ */

html, body {
	height: 100%;
	}

body {
	background: #780021 url('../images/body-bg.gif') repeat-x top left;
	color: #000;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	line-height: 1.5em;
	}

#skip { 
	display: block;
	height: 100px;
	margin-top: -100px; 
	}
	
#container-1 {
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
	min-height: 100%;
	width: 100%;
	}

#container-2 {
	margin: 0 auto 20px auto;
	width: 800px;
	}
		
.cleared {
	clear: both;
	}
	
hr {
	display: none;
	}


	
.bullet {
	margin-bottom:15px
}

.bullet li {
	text-align: left;
	list-style: none;
	background: url('../images/bullet.gif') no-repeat 0px 2px;
	padding: 1px 0px 1px 20px;
	font-size:95%;
}

.bullet li a {
	background: url('../images/blank.gif') no-repeat 0px 2px;
	color:#000000;
	text-decoration:none
}

.bullet li a:hover {
	color:#7f1a36;
	text-decoration:underline
}

h4 {
	font-size:120%;
	color:#780021;
	margin:20px 0 5px 0
}

h5 {
	font-size:140%;
	color:#780021;
	margin:20px 0 10px 0
}
	
	
	
/* ------------ Branding ------------ */

#branding {
	background: #dedede url('../images/branding-bg.gif') repeat-x top left;
	border-bottom: 1px solid #fff;
	padding-top: 20px;
	width: 100%;
	}
	
#branding-inner {
	margin: auto;
	padding-right: 5px;
	width: 750px;
	}

#default #branding-inner #logo {
	float: left;
	height: 134px;
	width: 194px;
	}
		
#branding-inner h1 a {
	background: url('../images/h1-bg.jpg') no-repeat top left;
	display: block;
	float: left;
	height: 134px;
	text-indent: -25000px;
	width: 194px;
	}
	
#branding-inner h2 {
	background: url('../images/established-bg.gif') no-repeat top left;
	float: right;
	height: 24px;
	margin-top: 20px;
	text-indent: -25000px;
	width: 330px;
	}

#branding-inner #quote-flash {
	background: #dcd8d0 url('../images/quote-bg.gif') no-repeat top left;
	float: right;
	width: 500px;
	}
	
#branding-inner #quote {
	color: #780021;
	float: right;
	padding: 20px 20px 10px 40px;
	width: 440px;
	}
	
#branding-inner blockquote {
	margin-bottom: 1.25em;
	}
	
#branding-inner cite strong {
	font-style: normal;
	}
	
	
/* --------------- Navigation --------------- */
	
#nav {
	clear: both;
	height: 45px;
	margin: 0 0 20px 17px;
	text-indent: -25000px;
	width: 760px;
	}
	
#nav li {
	float: left;
	}

#nav a {
	display: block;
	height: 45px;
	}

#nav a:hover, #nav .selected {
	background-position: 0 -45px;
	}
		
#nav-home a {
	background: url('../images/nav-home.gif') no-repeat top left;
	width: 112px;
	}
#nav-about a {
	background: url('../images/nav-about.gif') no-repeat top left;
	width: 107px;
	}
#nav-services a {
	background: url('../images/nav-services.gif') no-repeat top left;
	width: 107px;
	}
#nav-projects a {
	background: url('../images/nav-projects.gif') no-repeat top left;
	width: 108px;
	}
#nav-customers a {
	background: url('../images/nav-customers.gif') no-repeat top left;
	width: 107px;
	}
#nav-gallery a {
	background: url('../images/nav-gallery.gif') no-repeat top left;
	width: 107px;
	}
#nav-contact a {
	background: url('../images/nav-contact.gif') no-repeat top left;
	width: 112px;
	}

/* ------------ Hero ------------ */

#hero {
	float:left;
	width:760px;
	height:300px;
	background-color:tan;
	margin:0 0 10px 20px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	overflow:hidden
	}

/* ------------ Features ------------ */

#features {
	margin: 20px auto 10px auto;
		width: 760px;
		float:left;
		margin-left:20px
	}

#feature-1, #feature-2 {
	margin-right: 5px;
	}

.feature {
	float: left;
	width: 250px;
	}	

.feature .text {
	color:#780021;
	text-align:right;
	}	
	
.feature h2 {
	height: 40px;
	margin-bottom: 1px;
	width: 250px;
	text-indent: -25000px;

	}

#feature-1 h2 {
	background: url('../images/feature-h2-slate.gif') no-repeat top left;
	}		
#feature-2 h2 {
	background: url('../images/feature-h2-leadwork.gif') no-repeat top left;
	}		
#feature-3 h2 {
	background: url('../images/feature-h2-grp.gif') no-repeat top left;
	}		
		
.feature a {
	display: block;
	height: 149px;
	width: 230px;
	background-position: 0 -169px;
	color:#780021;
	text-align:right;
	padding:10px;
	text-decoration:none;
	line-height:1.3em
	}

#feature-1 a:hover, #feature-1 .selected, #feature-2 a:hover, #feature-2 .selected, #feature-3 a:hover, #feature-3 .selected {
	background-position: 0 0;
	text-decoration:underline
	}
		
#feature-1 a {
	background: url('../images/feature-slate.jpg') no-repeat top left;
	background-position: 0 -169px;
	}		
#feature-2 a {
	background: url('../images/feature-leadwork.jpg') no-repeat top left;
	background-position: 0 -169px;
	}		
#feature-3 a {
	background: url('../images/feature-grp.jpg') no-repeat top left;
	background-position: 0 -169px;
	}		


/* ------------ Content ------------ */

#content-left {
	background: url('../images/content-left.jpg') no-repeat top left;
	float: left;
	height: 469px;
	width: 20px;
	}
#content-right {
	background: url('../images/content-right.jpg') no-repeat top left;
	float: right;
	height: 469px;
	width: 20px;
	}

.subpage #content h2 {
	float: left;
	height: 38px;
	text-indent: -25000px;
	width: 760px;
	}

#about #content h2 {
	background: url('../images/h2-about.gif') no-repeat top left;
	}
#services #content h2 {
	background: url('../images/h2-services.gif') no-repeat top left;
	}
#projects #content h2 {
	background: url('../images/h2-projects.gif') no-repeat top left;
	}
#customers #content h2 {
	background: url('../images/h2-customers.gif') no-repeat top left;
	}
#gallery #content h2 {
	background: url('../images/h2-gallery.gif') no-repeat top left;
	}
#contact #content h2 {
	background: url('../images/h2-contact.gif') no-repeat top left;
	}
#slate #content h2 {
	background: url('../images/h2-slate.gif') no-repeat top left;
	}
#slate #content h2.tiles {
	background: url('../images/h2-tiles.gif') no-repeat top left;
	margin-bottom:10px;
	}
#leadwork #content h2 {
	background: url('../images/h2-leadwork.gif') no-repeat top left;
	}
#grp #content h2 {
	background: url('../images/h2-grp.gif') no-repeat top left;
	}
		
#content-main {
	background: #f5f5f5 url('../images/content-main-bg.jpg') no-repeat bottom left;
	float: left;
	padding: 10px 20px 10px 20px;
	width: 720px;
	}
#content-main p {
	margin-bottom: 1.25em;
	}
	
/*#services #content-main {
	background: #f5f5f5 url('../images/content-services-bg.jpg') no-repeat bottom left;
	}
#content-main a, #recent-projects a {
	color: #780021;
	padding: 3px;
	}
#content-main a:hover, #recent-projects a:hover {
	background-color: #780021;
	color: #fff;
	padding: 3px;
	text-decoration: none;
	}*/

#contact #content-main a {
	color: #780021;
	padding: 3px;
	padding: 3px 3px 3px 0;
	}
	
#contact #content-main a:hover {
	text-decoration:none
	}
				
#column-1 {
	float: left;
	padding-bottom: 15px;
	width: 400px;
	}

#column-1 h2 {
	background: url('../images/column-1-h2.gif') no-repeat top left;
	height: 38px;
	text-indent: -25000px;
	width: 400px;
	}

#column-1 a {
	background: url('../images/column-1-bg.gif') no-repeat top left;
	display: block;
	float: right;
	height: 205px;
	width:400px;
	padding-top:35px;
	color:#000000;
	text-decoration:none
	/*margin: 0 34px 0 0;
	text-indent: -25000px;*/
	}
#column-1 a:hover {
	background-position: 0 -240px;
	text-decoration:underline
	}
	
#column-1 p {
	margin: 1.25em 0 0 40px;
	width: 330px;
	}
		
#column-2 {
	background: url('../images/column-2-bg.gif') no-repeat bottom left;
	float: right;
	width: 400px;
	}	

#recent-projects p {
	height: 125px;
	}
	
#recent-projects {
	height: 125px;
	}
	
#column-2 h2 {
	background: url('../images/column-2-h2.gif') no-repeat top left;
	height: 38px;
	text-indent: -25000px;
	width: 400px;
	}

#column-2 p {
	margin: 1.25em 0 0 30px;
	width: 330px;
	}


/* --------------- About --------------- */

#about-column-left {
	border-right: 1px solid #e9dde0;
	float: left;
	padding-right: 20px;
	margin-top: 1.25em;
	width: 340px;
	}

#about-column-right {
	float: right;
	margin-top: 1.25em;
	width: 340px;
	}


/* --------------- Cusotnmers --------------- */

#customers-column-left {
	border-right: 1px solid #e9dde0;
	float: left;
	padding-right: 20px;
	margin-top: 1.25em;
	width: 340px;
	}

#customers-column-right {
	float: right;
	margin-top: 1.25em;
	width: 340px;
	}

/* --------------- Services --------------- */

#services-column-left {
	border-right: 1px solid #e9dde0;
	float: left;
	padding-right: 20px;
	margin-top: 1.25em;
	width: 340px;
	}

#services-column-right {
	float: right;
	margin-top: 1.25em;
	width: 340px;
	}


#slate-btn a, #leadwork-btn a, #grp-btn a {
	background: url('../images/btn-slate.png') no-repeat top left;
	display:block;
	float:right;
	width:117px;
	height:30px;
	text-indent:-25000px
}

#leadwork-btn a {
	background: url('../images/btn-leadwork.png') no-repeat top left;
}

#grp-btn a {
	background: url('../images/btn-grp.png') no-repeat top left;
}

#slate-btn a:hover, #leadwork-btn a:hover, #grp-btn a:hover {
	background-position: 0 -30px
}



/* --------------- Projects --------------- */
	
#projects-column-left {
	border-right: 1px solid #e9dde0;
	float: left;
	padding-right: 20px;
	margin-top: 1.25em;
	width: 340px;
	}

#projects-column-right {
	float: right;
	margin-top: 1.25em;
	width: 340px;
	}
	
#projects h3 {
	height: 35px;
	margin-bottom: 1.25em;
	text-indent: -25000px;
	width: 300px;
	}

.projects-images {
	margin: 0 0 2.5em 0px;
	}
	
#barn-con-mudford {	background: url('../images/projects/h3-barn-con-mudford.gif') no-repeat top left; }
#barn-con-wincanton { background: url('../images/projects/h3-barn-con-wincanton.gif') no-repeat top left; }
#clarks-village { background: url('../images/projects/h3-clarks-village.gif') no-repeat top left; }
#davis-hall { background: url('../images/projects/h3-davis-hall.gif') no-repeat top left; }
#glove-factory { background: url('../images/projects/h3-glove-factory.gif') no-repeat top left; }
#school-crewkerne { background: url('../images/projects/h3-school-crewkerne.gif') no-repeat top left; }
#brookvale-1 { background: url('../images/projects/h3-brookvale-1.gif') no-repeat top left; }
#brookvale-2 { background: url('../images/projects/h3-brookvale-2.gif') no-repeat top left; }
#mapperton-house { background: url('../images/projects/h3-mapperton-house.gif') no-repeat top left; }
#marchant-school { background: url('../images/projects/h3-marchant-school.gif') no-repeat top left; }
#melplash-church { background: url('../images/projects/h3-melplash-church.gif') no-repeat top left; }
#old-rectory { background: url('../images/projects/h3-old-rectory.gif') no-repeat top left; }
#orangery { background: url('../images/projects/h3-orangery.gif') no-repeat top left; }
#stoke { background: url('../images/projects/h3-stoke.gif') no-repeat top left; }
#priddy { background: url('../images/projects/h3-priddy.gif') no-repeat top left; }
#west-bay { background: url('../images/projects/h3-west-bay.gif') no-repeat top left; }
#shepton-house { background: url('../images/projects/h3-shepton-house.gif') no-repeat top left; }
#sports-pavilion { background: url('../images/projects/h3-sports-pavilion.gif') no-repeat top left; }
#stable-buildings { background: url('../images/projects/h3-stable-buildings.gif') no-repeat top left; }
#marys-church { background: url('../images/projects/h3-marys-church.gif') no-repeat top left; }
#sturminster-newton { background: url('../images/projects/h3-sturminster-newton.gif') no-repeat top left; }
#wardleworth-house { background: url('../images/projects/h3-wardleworth-house.gif') no-repeat top left; }

#projects #next-page a, #projects #previous-page a {
	background: url('../images/btn-next-page.png') no-repeat top left;
	display:block;
	float:right;
	width:117px;
	height:30px;
	text-indent:-25000px
}

#projects #previous-page a {
	background: url('../images/btn-previous-page.png') no-repeat top left;
}

#projects #next-page a:hover, #projects #previous-page a:hover {
	background-position: 0 -30px
}

#projects #page-no {
	width:60px;
	height:26px;
	text-align:center;
	float:right;
	padding-top:4px;
}

			
/* --------------- Footer --------------- */
	
#footer, #push {
	height: 40px;
	}

#footer-inner {
	background: #f0b644 url('../images/footer-inner-bg.gif') no-repeat top left;
	color: #d28a40;
	height: 29px;
	font-size: 90%;
	margin: auto;
	padding: 12px 25px 0 25px;
	width: 710px;
	}

#footer-inner a {
	color: #780021;
	text-decoration: none;
	}
#footer-inner a:hover {
	color: #780021;
	text-decoration: underline;
	}
			
#footer-inner #sub-links {
	float: left;
	}
	
#footer-inner #aztec {
	float: right;
	}