@charset "UTF-8";

/* CSS Document */

/* ------------ Generic --------------- */


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

img { border: none; }

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

a:hover { outline: none; color: #2196dc; text-decoration:underline; }

body { font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; background:url(images/bg.jpg) repeat-x top }

#wrap { width: 1000px; margin: 0 auto; }

/* ------------ Header --------------- */


#header { width: 1000px; height: 107px; }

#nav { width: 960px; height: 28px; background: url(images/nav.jpg) no-repeat top; margin: 0 auto; position: relative; }

#nav ul { position: absolute; bottom: -2px; width: 600px; }

#nav li { display: inline; font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; }

#nav li a { color:#FFF; text-decoration: none; display: block; padding: 0 28px; float: left; }

#nav li a:hover { color: #f48e20; text-decoration: none; }

#feature { width: 960px; height: 289px; margin: 0 auto; }

/* ------------ Body --------------- */


h1, h2 { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1.4em; color:#FFF; padding: 143px 0 0 20px; text-transform: uppercase; }

h3 { padding: 15px 20px 0 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #2196dc; line-height: 1.6em; font-weight: bold; }

.hone { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 1.4em; color:#FFF; padding: 30px 0 0 20px; }

p { padding: 15px 20px 0px 20px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; }

.blue { color: #2196dc; font-weight: bold; }

.htwo { padding: 15px 20px 0 20px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #2196dc; line-height: 1.6em; font-weight: bold; text-transform: none; }

.head { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1.4em; color:#FFF; padding: 143px 0 0 20px; line-height: normal; text-transform: uppercase; }

.shadow { width: 234px; background: url(images/shadow.jpg) repeat-y; float: left; }

.gradient { width: 234px; background: url(images/gradient.jpg) no-repeat bottom; float: left; padding-bottom: 20px; }

#col1header { width: 234px; height: 164px; background: url(images/plumber.jpg) no-repeat; }

#col1 { width: 234px; padding: 10px 0 0 17px; float: left; padding-bottom: 20px; }

#col2header { width: 234px; height: 164px; background: url(images/heating.jpg) no-repeat; }

#col2, #col3 { width: 234px; padding: 10px 0 0 10px; float: left; padding-bottom: 20px; display: inline; }

#col3 h3 a { padding-left: 20px; color: #2196dc; }

#col2 ul { padding: 15px 20px 0px 30px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; }

#col2 li { list-style-type: square; padding-top: 10px; }

#areas ul { padding: 15px 20px 0 20px; margin: 0; list-style-type: none; }

#areas li { padding-top: 0; display: inline; }

#areas li.area { color: #2196dc; font-weight: bold; }

#col3header { width: 234px; height: 59px; background: url(images/col3.jpg) no-repeat; }

#col4header { width: 234px; height: 59px; background: url(images/col4.jpg) no-repeat; }

#col4 { width: 251px; padding: 10px 0 0 10px; float: left; padding-bottom: 20px; }

#col5header { width: 234px; height: 164px; background: url(images/cooker-repair.jpg) no-repeat; }

#col6header { width: 234px; height: 164px; background: url(images/central-heating-repairs.jpg) no-repeat; }

#col7header { width: 234px; height: 164px; background: url(images/central-heating-engineers.jpg) no-repeat; }

#col8header { width: 234px; height: 164px; background: url("images/engineers tools.jpg") no-repeat; }

/* ------------ More Info Button --------------- */

.info a { width: 88px; height: 28px; display: block; background: url(images/info.jpg) top left no-repeat; margin: 15px 0 0 20px; }

.info a:hover { background-position: bottom left; }

/* ------------ Two Col --------------- */

#twocol { width: 475px; float: left; padding: 0 0 20px 20px; }

#twocol p { padding: 10px 0 2px 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; }

#twocol h1 { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 1.4em; color: #2196dc; padding: 10px 0 0 0; }

#twocol ul { padding: 15px 20px 0px 30px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; }

#twocol li { list-style-type: square; padding-top: 5px; }

#twocol a { padding: 10px 0 2px 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #2196dc; line-height: 1.6em; }

/* ------------ Right Col --------------- */

#contact { margin: 20px 0 0 20px; }

#contact p { font-size: 2em; padding: 15px; font-weight: bold; }

#contact input { margin-bottom: 10px; }

#contact select { margin-bottom: 10px; }

#submit { width:68px; height: 28px; background: url(images/submit.jpg) no-repeat top left; border: 0; cursor: pointer; clear: both; }

#submit:hover { background-position: bottom left; }

#map { width: 191px; height: 365px; margin: 10px 0 0 20px; }

iframe { border: #ccc 1px solid; }

/* ------------ Sitemap --------------- */



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


#footer { width: 968px; height: 123px; background:url(images/footer.jpg) no-repeat top #1276b1; clear: left; margin: 0 auto; padding-top: 10px; }

#footer p { padding-top: 1px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; text-align: center; color: #FFF; line-height: 1.3em; }

#footer ul { display:block; font-size:1.1em; margin:10px auto; text-align:center; width:900px; }

#footer li { border-right: 1px solid #000; display: inline; color: #FFF; padding: 0 7px 0 5px; }

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

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

#additional { width: 968px ; color:#999; text-align: center; background: url(images/footerbg.jpg) repeat-y top; margin: 0 auto; padding: 0; }

#additional ul { display:block; font-size:1.1em; margin: 0 auto; text-align:center; width:900px; }

#additional li { border-right: 1px solid #000; display: inline; color: #FFF; padding: 0 7px 0 5px; }

#additional a { color:#09F; text-decoration: none; }

#additional a:hover { color:#09F; text-decoration: none; }

/* ------------ Quote --------------- */

.quote { width: 193px; float: left; margin: 40px 20px 10px 20px; display: inline; }

.quote p { padding: 10px 0 0 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; clear: left; }

.quoteitalic { padding: 0; font-size: 1em; font-family: Helvetica, Arial, sans-serif; color: #2196dc; line-height: 1.6em; font-style:italic; }

.quoteend { float: right; margin: 0 20px; }

.news { padding: 5px 20px 0px 20px; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #000; line-height: 1.6em; }

.divide { width: 193px; height: 15px; border-bottom: 1px dotted #999; margin: 0 20px; }

.dividenews { width: 193px; height: 15px; border-bottom: 1px dotted #999; }

/* ------------ Quote --------------- */
.linkbox { background-color:#CCCCCC; border:thin dotted #FFFFFF; padding: 4px 10px 10px 10px; margin-top: 10px; }

.resources { padding: 15px 20px 0 0; font-size: 1.1em; font-family: Helvetica, Arial, sans-serif; color: #2196dc; line-height: 1.6em; font-weight: bold; text-transform: none; }