/*

Stylesheet for Studley Roofing
Handwritten by Oliver Coningham (AztecMedia.eu)
http://www.studleyroofing.co.uk/

*/

/* ------------ Toolbox ------------ */

.cleared { clear: both; }
.float-left { float: left; }
.float-right { float: right; }
.textalign-right { text-align: right; }
.hide { display: none; }


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

body {
	background: #666 url('../images/body-bg.jpg') no-repeat top center;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	line-height: 1.5em;
	padding: 20px 0;
	}

#skip { 
	display: block;
	height: 100px;
	margin-top: -100px; 
	}
	
#container {
	margin: auto;
	width: 960px;
	}
	
hr {
	display: none;
	}
	
	
/* ------------ Header ------------ */

#header {
	background: #666 url('../images/header-bg.jpg') no-repeat top left;
	height: 187px;
	padding: 10px 110px 0 110px;
	width: 740px;
	}

#default #header {
	background: #666 url('../images/default-header-bg.jpg') no-repeat top left;
	}

#header h1 a {
	background: url('../images/h1-bg.gif') no-repeat top left;
	display: block;
	height: 83px;
	text-indent: -25000px;
	width: 390px;
	}

#header #tel {
	background: url('../images/tel-bg.gif') no-repeat top left;
	clear: both;
	float: right;
	height: 13px;
	margin: 7px 20px 0 0;
	text-indent: -25000px;
	width: 313px;
	}
	

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

#nav {
	background: url('../images/nav-bg.gif') no-repeat top left;
	clear: both;
	height: 56px;
	margin-top: 10px;
	text-indent: -25000px;
	width: 740px;
	}

#default #nav {
	background: url('../images/default-nav-bg.gif') no-repeat top left;
	}
	
#nav li {
	float: left;
	}

#nav a {
	display: block;
	height: 56px;
	width: 120px;
	}
	
#nav a:hover, #nav .selected {
	background-position: 0 -56px;
	}
	
#nav-home a {
	background: url('../images/nav-home.gif') no-repeat top left;
	}
#nav-services a {
	background: url('../images/nav-services.gif') no-repeat top left;
	}
#nav-clients a {
	background: url('../images/nav-clients.gif') no-repeat top left;
	}
#nav-gallery a {
	background: url('../images/nav-gallery.gif') no-repeat top left;
	}
#nav-contact a {
	background: url('../images/nav-contact.gif') no-repeat top left;
	}
	
	
/* --------------- Content --------------- */

#content {
	background: url('../images/content-bg.gif') repeat-y top center;
	clear: both;
	margin: auto;
	padding: 0 30px 10px 30px;
	width: 700px;
	}
	
#content .column {
	width: 340px;
	}

#content h2 {
	height: 11px;
	margin-bottom: 1.25em;
	text-indent: -25000px;
	width: 350px;
	}

#default #content h2 {
	background: url('../images/default-h2.gif') no-repeat top left;
	}
#services #content h2 {
	background: url('../images/services-h2.gif') no-repeat top left;
	}
#clients #content h2 {
	background: url('../images/clients-h2.gif') no-repeat top left;
	}
#gallery #content h2 {
	background: url('../images/gallery-h2.gif') no-repeat top left;
	}
#contact #content h2 {
	background: url('../images/contact-h2.gif') no-repeat top left;
	}
		
#content .column p {
	margin-bottom: 1.25em;
	}
	
#content .column a {
	color: #040199;
	}
	
#content .column a:hover {
	color: #000;
	}
	

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

#features {
	background: url('../images/features-bg.png') no-repeat top left;
	height: 226px;
	padding: 0 100px;
	width: 760px;
	}

#features-content {
	height: 151px;
	margin: 0 0 35px 30px;
	width: 700px;
	}
	
#features-content li {
	float: left;
	}
		
#features-content a {
	display: block;
	float: left;
	height: 151px;
	margin-right: 10px;
	text-indent: -25000px;
	width: 226px;
	}

#features-content a:hover {
	background-position: 0 -151px;
	}

#feature-services a {
	background: url('../images/feature-services.jpg') no-repeat top left;
	}
#feature-clients a {
	background: url('../images/feature-clients.jpg') no-repeat top left;
	width: 228px;
	}
#feature-gallery a {
	background: url('../images/feature-gallery.jpg') no-repeat top left;
	margin-right: 0;
	}


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

.service {
	background: #9a9071 url('../images/service-bottom.gif') no-repeat bottom left;
	padding-bottom: 10px;
	margin-bottom: 20px;
	}

.service-top {
	background: #9a9071 url('../images/service-top.gif') no-repeat top left;
	height: 10px;
	width: 340px;
	}
	
.service p, .service h3 {
	margin: 0 10px;
	}

.service h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	margin-bottom: 1.25em;
	text-transform: uppercase;
	}
	
.service img {
	float: left;
	margin: 0 10px 10px 10px;
	}
		
	
/* --------------- Footer --------------- */

#footer {
	color: #888;
	font-size: 90%;
	}
	
#footer a {
	color: #fff;
	text-decoration: none;
	}
	
#footer a:hover {
	color: #fff;
	text-decoration: underline;
	}
	
#footer #links {
	margin-left: 50px;
	}