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

author: Chris Sparshott
website: www.e-scaped.co.uk
email: chris@e-scaped.co.uk

use of conditional comments have been used throughout site, therefore several styles have been filtered into appropriate IE6/IE7 CSS documents - notes have been made next to relevant css rules

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

Sets default margin and padding

-------------------------------------------------------------------*/
html, body, * {
	margin:0;
	padding:0;
}
div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td, textarea {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	border:none;
}
/* ------------------------------------------------------------------

 Sets default fonts 

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

body {
	background:url(../images/shared/body-bg.jpg) top left repeat-x;
	color:#888;
	font-size:12px;
	line-height:16px;
}
h1, h2, h3, h4, h5, h6 {
	/*color:#003366;*/
	color:#17507F;
}
h1 {
	font-size:21px;
	font-weight:lighter;
}
h2 {
	font-size:19px;
	font-weight:lighter;
}
h3 {
	font-size:17px;
	font-weight:lighter;
	margin:30px 0 5px 0;
}
h4, h5, h6 {
	font-size:15px;
}
p {
	margin:0 0 10px 0;
}
b {
	font-weight:lighter;
	color:#666;
	font-style:oblique;
}
/* ------------------------------------------------------------------

Sets font-style and font-weight to normal

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

address, caption, cite, code, dfn, var {
	font-style: normal;
	font-weight: normal;
}
/* ------------------------------------------------------------------

Removes border from fieldset and image

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

fieldset, img {
	border: 0;
}
/* ------------------------------------------------------------------

Link styles

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

a, a:link, a:visited {
	color:#0099FF;
	text-decoration: none;
	outline: none;
}
a:hover, a:active {
	color: #ff6600;
}
/* ------------------------------------------------------------------

Form elements

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

input, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
}
/* ------------------------------------------------------------------

Generic classes

-------------------------------------------------------------------*/
.hr {
	height:100px;
	width:940px;
	clear:both;
	background:url(../images/shared/hr.gif) no-repeat 0 50px;
}
.hr.portfolio {
	height:100px;
	width:940px;
	clear:both;
	background:url(../images/shared/hr.gif) no-repeat 0 40px;
}

.floatLeft {
	float: left !important;
}
.floatRight {
	float: right !important;
}
.clearBoth {
	clear: both;
}
.noMargin {
	margin:0 !important;
}
.noTopMargin {
	margin-top:0 !important;
	}

ul {
	list-style:none;
	margin:15px 0;
}
ul.bullet {
	list-style:disc;
	margin:15px 0 15px 15px;
	list-style-position:outside;
}
ul.nested {
	margin:0;
}
ul.nested li {
	margin:0 0 0 15px;
	padding:0;
	list-style:inside circle !important;
}
ol {
	margin:15px 0 15px 0;
	list-style-position:inside;
}
/* ------------------------------------------------------------------

Generic Form styles

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

form.genericForm {
	width:400px;
}
label {
	float:left;
	margin:5px 0;
	color:#999;
}
input.textField {
	float:right;
	width:180px;
	border:1px solid #999;
	background:#fff;
	margin:5px 0;
	padding:3px;
	color:#999;
}
textarea {
	float:right;
	width:180px;
	height:125px;
	border:1px solid #999;
	background:#fff;
	margin:5px 0;
	padding:3px;
	color:#999;
}
select {
	float:right;
	width:188px;
	border:1px solid #999;
	background:#fff;
	margin:5px 0;
	color:#999;
}
/* ------------------------------------------------------------------

Sticky Footer

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

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {
	height: 100%;
}
body > #wrap {
	height: auto;
	min-height: 100%;
}
#main {
	padding-bottom:30px; /* must be same height as the footer */
	width:960px;
	margin:auto;
}  
#footer {
	position: relative;
	margin:-30px auto 0 auto; /* negative value of footer height */
	height: 30px;
	clear:both;
}
/* CLEAR FIX*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

div#aboveFooter {
	height:80px;
	width:960px;
}

p.learnCSS {
	float:left;
	margin-right:60px;
}

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

every page styles

-------------------------------------------------------------------*/
div#wrap {
	/*background:url(../images/shared/main-content-top-gradient.jpg) repeat-x 0 251px;*/
	position:relative;
	z-index:2;
}
div.wrapper {
	width:960px;
	margin:auto;
	clear:both;
}
div#header {
	height:60px;
	width:960px;
}
/*#footer {
	background:url(../images/shared/footer-bg.jpg) repeat-x bottom left;
	font-size:11px;
	z-index:2;
	height:372px;
}*/
div#footer div.wrapper {
	height:30px;
	position:relative;
	z-index:3;
}
div#header h2#escapingH2 {
	height:35px;
	width:113px;
	float:left;
}
div#header h2#escapingH2 a {
	text-indent:-9999px;
	background:url(../images/shared/logo.jpg) no-repeat;
	height:35px;
	width:113px;
	display:block;
}
div#header h2#servicesH2 {
	text-indent:-9999px;
	background:url(../images/shared/header-services.jpg) no-repeat;
	height:35px;
	width:285px;
	float:right;
}
ul#nav {
	width:503px;
	height:32px;
	margin:8px 0 0 0;
	padding:0;
	float:left;
}
ul#nav li a {
	float:left;
	display:block;
	height:32px;
	text-indent:-9999px;
	background-image:url(../images/shared/nav.gif);
	background-repeat:no-repeat;
}
ul#nav li#home a {
	width:83px;
	background-position:0 0;
}
ul#nav li#home a:hover {
	background-position:0 -32px;
}

ul#nav li#web a {
	width:125px;
	background-position:-84px 0;
}
ul#nav li#web a:hover {
	background-position:-84px -32px;
}

ul#nav li#seo a {
	width:67px;
	background-position:-210px 0;
}
ul#nav li#seo a:hover {
	background-position:-210px -32px;
}

ul#nav li#prices a {
	width:83px;
	background-position:-278px 0;
}
ul#nav li#prices a:hover {
	background-position:-278px -32px;
}

ul#nav li#contact a {
	width:121px;
	background-position:-362px 0;
}
ul#nav li#contact a:hover {
	background-position:-362px -32px;
}

h2#title {
	text-indent:-9999px;
	float:left;
}
h2#title a {
	width:365px;
	height:119px;
	display:block;
	background:url(../images/shared/header-title-3.gif) no-repeat top left;
}
h2#quickContactH2 {
	width:286px;
	height:40px;
	text-indent:-9999px;
	background:url(../images/shared/quick-contact.gif) no-repeat top left;
	float:right;
}

form#quickContact {
	width:285px;
	height:150px;
	float:right;
	margin-top:13px;
	position:relative;
	background:url(../images/shared/quick-contact-form.jpeg) no-repeat -8px -12px;
}
form#quickContact label {
	float:left;
	width:85px;
	height:21px;
	color:#fff;
	font-size:11px;
	line-height:20px;
	text-indent:10px;
}
form#quickContact input, form#quickContact textarea  {
	color:#66ccff;
}

form#quickContact label.label {
	background:none;
	margin:2px 0;
}
form#quickContact label.enquiryLabel {
	background:none;
	margin:2px 0;
}
form#quickContact input.text {
	background:none;
	height:14px;
	width:190px;
	float:right;
	position:relative;
	top:5px;
	padding-top:1px;
	padding-right:5px;
	padding-left:5px;
	font-size:11px;
}

form#quickContact textarea {
	background:none;
	height:62px;
	width:192px;
	float:right;
	position:relative;
	top:2px;
	padding:4px 3px 0 5px;
	border:0;
	margin:0;
	font-size:11px;
	overflow:auto;
}
form#quickContact input.submit {
	position:relative;
	top:-27px;
	left:-3px;
}

div#mainContent {
	position:relative;
}

img#monitor {
	position:absolute;
	z-index:100;
	top:-148px;
	left:417px;
}
/* ------------------------------------------------------------------

=column styles

-------------------------------------------------------------------*/
div.threeColumn {
	width:280px;
	height:auto;
	float:left;
	margin-top:70px;
}
div.threeColumn a {
	margin-bottom:60px;
}
div.columnBorder {
	width:50px;
	height:225px;
	float:left;
	margin-top:70px;
	background:url(../images/shared/column-border-line.png) no-repeat 24px -20px;
}

/*div.threeColumn.noMargin {
	margin:0;
}*/

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

=index page styles

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

/*body#index ul#nav li#home a {
	background-position:0px -32px;
}*/

body#index div.threeColumn div.text {
	height:185px;
}


body#index div.threeColumn#leftColumn h2 {
	text-indent:-9999px;
	width:263px;
	height:26px;
	margin-bottom:10px;
	background:url(../images/shared/qualified-web-designer.png) no-repeat;
}
body#index div.threeColumn#leftColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:260px;
	height:38px;
	background:url(../images/shared/view-my-certificate.png) no-repeat;
}


body#index div.threeColumn#middleColumn h2 {
	text-indent:-9999px;
	width:267px;
	height:20px;
	margin-bottom:16px;
	background:url(../images/shared/websites-that-work.gif) no-repeat;
}
body#index div.threeColumn#middleColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:265px;
	height:35px;
	margin:-8px 0 0 0;
	background:url(../images/shared/what-makes-a-website-work.gif) no-repeat;
}


body#index div.threeColumn#rightColumn h2 {
	text-indent:-9999px;
	width:275px;
	height:26px;
	margin-bottom:10px;
	background:url(../images/shared/useful-links.gif) no-repeat;
}
body#index div.threeColumn#rightColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:265px;
	height:38px;
	margin-top:-17px;
	background:url(../images/shared/follow-me-on-twitter.gif) no-repeat;
}


/*----------  portfolio  -------------*/
body#index h1.portfolioHeader {
	width:448px;
	height:38px;
	text-indent:-9999px;
	background:url(../images/portfolio/bespoke-website-designs.gif) no-repeat;
	margin:0 0 30px 330px;
}

body#index div.threeColumn.left h2 {
	text-indent:-9999px;
	width:280px;
	height:26px;
	margin-bottom:16px;
}
body#index div.threeColumn.left div.portfolioDescription {
	height:307px;
}
body#index div.threeColumn.left a {
	position:relative;
	left:50px;
	top:-20px;
	z-index:1 !important;
}
body#index div.threeColumn.left a img {
	height:36px;
	width:150px;
	position:relative;
	top:20px;
	left:-50px;
	z-index:2 !important;
}


body#index div.twoColumn {
	width:610px;
	height:380px;
	float:left;
}
body#index div.twoColumn img.largeImage {
	border:1px solid #dedede;
	padding:8px;
	background:#f2f2f2;
	float:left;
}
body#index div.twoColumn div.thumbnails img {
	border:1px solid #dedede;
	padding:8px;
	background:#f2f2f2;
}
body#index div.twoColumn div.thumbnails {
	float:right;
	width:140px;
	height:380px;
}
body#index div.twoColumn div.thumbnails img {
	margin-bottom:25px;
}


body#index div.threeColumn.left h2.portfolioRDS {
	background:url(../images/portfolio/rds-window-cleaning.gif) no-repeat;
}
body#index div.threeColumn.left h2.portfolioCSCS {
	width:282px;
	background:url(../images/portfolio/cscs-plumbing-and-heating.png) no-repeat;
}
body#index div.threeColumn.left h2.portfolioEscaped {
	background:url(../images/portfolio/e-scaped-website-design.gif) no-repeat;
}

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

=seo page styles

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

body#seoBody ul#nav li#seo a {
	background-position:-210px -32px;
}

body#seoBody div.threeColumn div.text {
	width:auto;
	height:160px;
}


body#seoBody div.threeColumn#leftColumn h2 {
	text-indent:-9999px;
	width:253px;
	height:27px;
	margin-bottom:10px;
	background:url(../images/shared/higher-ranking-position.gif) no-repeat;
}
body#seoBody div.threeColumn#leftColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:200px;
	height:35px;
	background:url(../images/shared/about-organic-seo.gif) no-repeat;
}


body#seoBody div.threeColumn#middleColumn h2 {
	text-indent:-9999px;
	width:262px;
	height:24px;
	margin-bottom:10px;
	background:url(../images/shared/higher-earning-potential.gif) no-repeat;
}
body#seoBody div.threeColumn#middleColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:274px;
	height:38px;
	background:url(../images/shared/earning-potential.gif) no-repeat;
}


body#seoBody div.threeColumn#rightColumn h2 {
	text-indent:-9999px;
	width:262px;
	height:24px;
	margin-bottom:10px;
	background:url(../images/shared/seo-from-30.gif) no-repeat;
}
body#seoBody div.threeColumn#rightColumn ul.bullet {
	margin:-10px 0 0 0;
}
body#seoBody div.threeColumn#rightColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:238px;
	height:33px;
	margin:9px 0 0 0;
	background:url(../images/shared/seo-price-list.gif) no-repeat;
}
/* ------------------------------------------------------------------

=web design page styles

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



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

=sendmail page styles

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

body#sendmail h1 {
	text-indent:-9999px;
	width:265px;
	height:25px;
	margin-bottom:10px;
	background:url(../images/shared/thanks-for-your-enquiry.gif) no-repeat;
}
body#sendmail div.threeColumn div.text {
	height:110px;
}
body#sendmail a.icon {
	width:215px;
	height:57px;
	display:block;
	text-indent:-9999px;
	background:url(../images/shared/back-to-previous-page.gif) no-repeat;
}

body#sendmail form#quickContact input, body#sendmail form#quickContact textarea {
	visibility:hidden;
}


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

=prices page styles

-------------------------------------------------------------------*/
body#pricesPage ul#nav li#prices a {
	background-position:-278px -32px;
}

body#pricesPage div.threeColumn#leftColumn h2 {
	text-indent:-9999px;
	width:263px;
	height:26px;
	margin-bottom:10px;
	background:url(../images/prices/services-and-prices-list.gif) no-repeat;
}
body#pricesPage div.threeColumn div.text {
	height:150px;
}

body#pricesPage div.threeColumn#leftColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:248px;
	height:38px;/*height + margin bottom must equal 36px*/
	background:url(../images/prices/view-services-and-prices.gif) no-repeat;
}


body#pricesPage div.threeColumn#middleColumn h2 {
	text-indent:-9999px;
	width:237px;
	height:27px;
	margin-bottom:9px;/*height + margin bottom must equal 36px*/
	background:url(../images/prices/bespoke-or-template.gif) no-repeat;
}
body#pricesPage div.threeColumn#middleColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:274px;
	height:36px;
	background:url(../images/prices/web-design-prices-and-info.gif) no-repeat;
}


body#pricesPage div.threeColumn#rightColumn h2 {
	text-indent:-9999px;
	width:275px;
	height:20px;
	margin-bottom:16px; /*height + margin bottom must equal 36px*/
	background:url(../images/prices/your-website-findable.gif) no-repeat;
}
body#pricesPage div.threeColumn#rightColumn a.icon {
	display:block;
	text-indent:-9999px;
	width:263px;
	height:31px;
	background:url(../images/prices/seo-monthly-prices-and-info.gif) no-repeat;
}

body#pricesPage h1 {
	text-indent:-9999px;
	width:900px;
	height:25px;
	margin-bottom:11px;
	background:url(../images/prices/for-businesses-to-stand-out.gif) no-repeat;
	}
	
	
body#pricesPage h2.templatePrices {
	text-indent:-9999px;
	width:926px;
	height:26px;
	margin-bottom:10px;
	margin-top:100px;
	background:url(../images/prices/template-websites.gif) no-repeat;
	}