/* ---------------------------
Author: Barry G. White
Author URL: http://www.creativebridge.co.uk
Website: http://www.everlastroofprotection.co.uk
------------------------------ */

/* Colours -------------------
blue (background):	43638d
grey (dark):		231f20
orange:				f99f1f
red:				de1f26
yellow:				fded00
------------------------------ */

/* Eric Meyer's CSS Reset */
/* (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}
ol, ul {list-style: none; margin-bottom: 1em; color: #fff;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/* Global Styles
------------------------------ */
body {background: url() ;}
a img, :link img, :visited img {}

/* Classes */
.gutter {padding: 0 10px;}
.clear {clear: both;}
.float-l {float: left;}
.float-r {float: right;}
.bottom {margin-bottom: 1em;}
.center {text-align: center;}
.large {font-size: 1.6em; margin-top: 1em;}
.small {font-size: 0.9em;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.bold {font-weight: bold;}
.red {color: #de1f26;}

/* Typography
------------------------------ */
body {
	font: small/1.4em helvetica,arial,sans-serif;
	color: #000;
	background: #000;
	}

p, dl {margin: 0 0 1em 0; color: #fff;}
#header dt, #header dd {font-family: verdana,tahoma,arial,sans-serif; text-transform: uppercase; color: #000;}

em {font-style: italic;}
address {font-style: normal; color: #fff;}
acronym {border-bottom: 1px dashed #aaa;}

/* Links */
a {text-decoration: underline; color: #ccc;}
a:active {color: #ccc;}
a:hover {text-decoration: none; color: #ccc;}

:focus {outline: #ccc dotted thin; color: #000;}
#banner h1:focus, #banner h1 a:focus {background: transparent;}

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

/* Blockquotes */
blockquote p {
	margin: 0 20px 0 0;
	font: 1.8em/1.2em "times new roman",georgia,times,serif;
	color: #ccc;
	text-transform: lowercase;
	text-align: right;
	}
cite {
	font: 1em/1.6em tahoma,helvetia,arial,sans-serif;
	color: #ccc;
	float: right;
	}

/* Headings */
h1 {font-size: 2em; line-height: 1em;}
h2 {
	font: 1.6em/1.2em optima,georgia,"times new roman",times,serif;
	color: #fff;
	letter-spacing: 0.1em;
	margin: 70px 0 0 60px;
	}
h3 {font: 1.4em/1.1em optima,georgia,"times new roman",times,serif; color: #fff;}
#roofcoating h3 {margin-bottom: 0.5em;}

/* Image Replacement - headings */
h1 {
	margin: 10px;
	background: url(i/logo.png) no-repeat center;
	height: 101px;
	text-indent: -9999px;
	}
h1 a {display: block; height: 101px;}
h1 a:hover {background: url(i/logo.png) no-repeat center;}

h2 {background-repeat: no-repeat; background-position: left center; text-indent: -9999px;}
#homepage h2 {background-image: url(i/h-welcome.png); width: 372px; height: 24px;}
#roofcoating h2 {background-image: url(i/h-roofcoating.png); width: 134px; height: 24px;}
#services h2 {background-image: url(i/h-services.png); width: 83px; height: 24px;}
#contact h2 {background-image: url(i/h-contact.png); width: 83px; height: 24px;}


/* Layout
------------------------------ */
#wrap {margin: 0 auto; width: 960px;}
#header {float: left; width: 960px;}
#header h1 {float: left; width: 499px;}
#header dl {float: left;}
#container {float: left;}
#content {float: left;}
#nav {margin: 0 0 0 50px;}
#main {float: left; margin: 20px 0 0 0; padding: 0 460px 50px 0;}
#column  {float: right; width: 340px;}
#sidebar {float: left; width: 160px; font-size: 0.8em;}
#footer {clear: both; background: #231f20; color: #fff;}

/* Header
------------------------------ */
#header {background-color: #fff; background-repeat:  no-repeat; background-position: bottom right;}
#homepage #header {background-image: url(i/bg-top-home.jpg);}
#roofcoating #header {background-image: url(i/bg-top-roofcoating.jpg);}
#services #header {background-image: url(i/bg-top-services.jpg);}
#contact #header {background-image: url(i/bg-top-contact.jpg);}

#header dl {margin: 20px 0 10px 20px;}
#header dt, #header dd {line-height: 1.4em; font-size: 0.8em; font-weight: bold;}

/* Navigation
------------------------------ */
#nav li {float: left; margin: 0 1px;}
#nav li, #nav li a {
	width: 110px;
	line-height: 2em;
	display: block;
	background: #000;
	color: #fff;
	text-decoration: none;
	font-family: verdana,tahome,sans-serf;
	font-size: 0.9em;
	text-align: center;
	}
#nav li a:hover, #nav li a.current {background: #de1f26;}

/* Container
------------------------------ */
#container {background-color: #43638d; background-repeat: repeat-x; background-position: top center;}
#homepage #container {background-image: url(i/container-home.png);}
#roofcoating #container {background-image: url(i/container-roofcoating.png);}
#services #container {background-image: url(i/container-services.png);}
#contact #container {background-image: url(i/container-contact.png);}

/* Content
------------------------------ */
#content {background-repeat: no-repeat; background-position: top right;}
#homepage #content {background-image: url(i/bg-home.jpg);}
#roofcoating #content {background-image: url(i/bg-roofcoating.jpg);}
#services #content {background-image: url(i/bg-services.jpg);}
#contact #content {background-image: url(i/bg-contact.jpg);}

/* Column
------------------------------ */
#column img {margin-top: 70px;}
#homepage #column img {border: 1px solid #de1f26;}
#roofcoating #column img {border: 1px solid #f99f1f;}
#services #column img {border: 1px solid #fded00; margin-top: 0;}
#contact #column img {border: 1px solid #fff; margin-top: 1em;}

#services #column ul {margin-left: 15px; list-style: disc;}
#services #column p {margin: 1em 0 0 0;}
#services #column p.last {margin: 1em 0;}
#services #column h3 {margin-top: 1em;}

/* Sidebar
------------------------------ */
#sidebar {margin: 50px 0 0 0;}
#sidebar dt {font-size: 1.4em; margin: 0 0 0.2em 0;}
#sidebar dd {line-height: 1.3em; font-size: 1.1em; padding-left: 10px; background: url(i/bullet.gif) no-repeat left top;}

#contact #sidebar {margin: 20px 0 0 0;}
#sidebar p.hotline {font-size: 1.1em; text-align: center; background: #e31b23; padding: 10px;}
#sidebar p.hotline span {font-size: 2em;}

/* Contact Form
------------------------------ */
form {margin-top: 1em;}
form p {margin: 0 0 0.5em 0;}
input.type, textarea.type {display: block; width: 240px;}
#submit, #submit:focus {cursor: pointer;}

#contact .bold {margin-top: 1em;}

/* Footer
------------------------------ */
#footer {padding: 2em 0; width: 960px; font-size: 0.8em;}
#footer p {margin-bottom: 0; text-align: center;}
#footnav {text-align: center; margin: 0;}
#footnav li {display: inline; margin: 0; padding: 0 0.5em 0 0.3em; border-right: 1px solid #fff;}
#footnav li.plain {border: none; padding: 0 0 0 0.3em;}

/* Popups
------------------------------ */
#popups {background: #43638d;}
#popups h2 {margin: 20px 40px; padding: 0; background: none; text-indent: inherit; color: #43638d;;}
#popups p {margin: 0 40px 1em 40px; color: #000;}
#popups address {color: #000; margin: 1em 30px;}
#popups address a {background: #43638d; padding: 0 0.2em;}
#popups #main {margin: 20px auto; background: #fff; width: 520px; padding: 10px; float: none; border: 5px solid #000;}