body {background: #221E1F; margin: 2px 0 0 0;}

/* Site central wrapper*/
#wrapper {margin: auto; width: 770px; color: #FFF; font-family: Verdana, Arial, sans-serif; font-size: x-small; padding: 5px 0 0 0;}

/* Main nav */
#mainNav {color: #999; float: right;}
#mainNav a, #mainNav a:visited {text-decoration: none; color: #999;}
#mainNav a:hover, #mainNav a:focus {text-decoration: none; color: #FFF;}
#mainNav ul li {display: inline; list-style: none; border-left: 1px solid #57575A; padding: 90px 15px 0 6px; float: left;}
#mainNav ul li.current {color: #57575A;}

/* Top gold bar */
#bar {height: 27px; background: #76715C; border-top: 1px solid #FFF; border-bottom: 2px solid #FFF; position: absolute; top: 0; left: 0; width: 100%;}
#bar h1 {margin-left: -9999px;} /*hide banner heading - included for searcg engine optimisation */

/* Logo placement */
.logo {float: left; margin-top: 24px; clear: right;}

/* site heading styles */
h1, h2, h3, h4 {font-family: Times New Roman, Times, serif; color: #76715C; font-weight: 100; letter-spacing: 3pt; font-size: x-small; margin: 0 0 40px 0;}
h3.homePics {letter-spacing: 2pt; color: #FFF; width: 300px; padding: 7px 5px 8px 10px; margin: -32px 0 0 0; background: #76715C; position:  absolute; text-align: left; font-size: medium;}
h3.contentStyle, h4 {color: #FFF; margin: 0; font-family: Verdana, Arial, sans-serif; letter-spacing: 1pt;}

/* Main content wrapper */
#content {margin: 0 0 0 167px; line-height: 1.75em; clear: left; font-size: 1em;  color: #A9A9AC;}
#content a, #content a:visited {color: #A9A9AC; text-decoration: none;}
#content a:hover, #content a:focus {color: #FFF; text-decoration: none;}
#content p.pTop {background: none; margin: 20px 0 0 0; padding-bottom: 0; clear: both;}

/* Content columns */
.leftColumn, .leftColumnHome {float: left; width: 250px; margin: 0 0 30px 0;}
.leftColumnHome {padding-top: 30px; width: 275px;}

#rightColumn, #rightColumn2, #rightColumnPic {float: right; width: 270px; margin: 0 15px 30px 0; padding: 15px 0 0 0;}
#rightColumn {padding-top: 30px;}
#rightColumn2 {text-align: left; padding: 0;}
#homePic {margin: 0 12px 0 0;}
#homePic img {margin: 0 0 5px 0; border: 1px solid #57575A;}
#homePic img.thumbNail {margin: 5px 0 0 5px; border: 1px solid #57575A; float: right;}
#homePic img.thumbNail:hover, #rightColumn img.thumbNail:focus {border: 1px solid #FFF;}

/* Footer bar */
#foot {margin: 0 0 10px 167px; line-height: 1.75em; font-size: 1em; color: #57575A; clear: both; width: 600px;}
#foot br {display: none;}
#foot span {margin: 0 0 0 10px; padding: 0;}
#foot a, #foot a:visited {color: #57575A; text-decoration: none;}
#foot a:hover, #foot a:focus {color: #FFF; text-decoration: none;}
/* sneaky credit and link:) */
#wrapper .hiddenCredit {margin-left: -9999px;}

/* PAGE SPECIFIC STYLES */
/* HOME */
.standFirst {font-size: 140%; font-weight: 100; line-height: 1.5em; margin: 0 15px 15px 0;}

/* Contact page */
fieldset {border: none; margin: 0; padding: 0;}
label {display: block; margin: 15px 0 3px 0;}
input, textarea {width: 99%; border: 1px solid #76715C; background: #76715C; font-family: Verdana, Arial; font-size: x-small; padding: 3px;}
input:focus, textarea:focus {background: #CCC;}
textarea {height: 150px;}
input.send {width: auto; margin: 10px 0 0 0;}
.mugShot {padding: 0; border-bottom: 10px solid #76715C; float: left; margin: 5px 15px 20px 0;}
#wrapper .block {display: block;}

/* FAQS */
.faqColumn {float: left; width: 375px; margin: 0 0 30px 0;}
.faqColumn h4 {color: #FFF; font-size: 1em; margin-top: 20px;}
.faqColumn p {padding-bottom: 25px; background: url(images/icon.gif) no-repeat bottom left;}
#rightColumnPic {text-align: left; padding: 60px 0 0 0; width: 170px;}
#rightColumnPic img {border-bottom: 10px solid #76715C;}
#rightColumnPic p {border-bottom: 5px solid #76715C; padding: 0 0 10px 0;}
#rightColumnPic p.quote, #rightColumnPic p.fullQuote {font-size: 1.5em; line-height: 2em; font-style: italic; color: #76715C; font-family: Times New Roman, Times, serif; font-weight: lighter; letter-spacing: 1px;}
#rightColumnPic p.fullQuote {border-top: 5px solid #76715C; padding: 10px 0 10px 0;}

/* TESTIMONIALS */
.columnThree, .columnThreeMiddle {width: 175px; float: left; margin-bottom: 40px;}
.columnThreeMiddle {margin: 0 30px 0 30px;}
p.barTop {border-top: 10px solid #76715C; padding: 10px 0 0 0;}
p.barTopBottom span {color: #FFF;}
p.barBottom {border-bottom: 2px solid #76715C; padding: 0 0 10px 0;}
p.barTopBottom, p.barTopBottomFolio {border-bottom: 2px solid #76715C; border-top: 2px solid #76715C; padding: 10px 0 10px 0; margin-bottom: 40px;}
p.barTopBottomFolio {margin-right: 20px;}
.testimonialColumn {float: left; width: 375px; margin: 0 0 30px 0;}
.testimonialColumn h4 {color: #FFF; font-size: 1em; margin-top: 20px;}

/* PORTFOLIO */
#thumbNail {margin: 0 0 30px 0; clear: both; float: none; padding: 0;}
#thumbNail img {float: left; margin: 0 18px 18px 0; border: 1px solid #76715C; padding: 0;}
#thumbNail img.current, #thumbNail img:hover {float: left; margin: 0 18px 18px 0; border: 1px solid #FFF; padding: 0;}
/*#thumbNail img:hover {border: 1px solid #FFF;}*/
.mainPhoto img {float: left;  margin: 29px 18px 29px 0; border: 1px solid #76715C; padding: 0;}
.beforeAfterPhoto img {float: left;  margin: 29px 5px 29px 0; border: 1px solid #76715C;}
.mainPhoto, .beforeAfterPhoto { border: 1px solid #221E1F;}/* nasty hack for IE 7 - to stop the thums jumping on hover */
.mainPhoto p {width: 180px; height: 237px; float: left; clear: right; margin: 30px 0 45px 0; padding: 10px 0 0 0;  border-bottom: 3px solid #666; border-top: 10px solid #666;}
.mainPhoto strong {margin: 0 0 5px 0; display: block;}

/* Flash Intro */
.flash {width: 770px; height: 400px; margin: 0 0 50px 0; clear: both;}
.flashAlt {width: 603px; height: 400px; margin: 0 0 50px 167px; clear: both;}


/* CLEAR FIX */
/* Clear Fix - to ensure that div wrapper expand to wrap their contence */
#thumbNail:after, barTopBottom:after, .columnThree:after, .columnThreeMiddle:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#thumbNail, barTopBottom, .columnThree, .columnThreeMiddle {display: inline-block;}
/* Hides from IE-mac \*/
* html #thumbNail, * html .barTopBottom, * html .columnThree, * html .columnThreeMiddle {height: 1%;}
#thumbNail, .barTopBottom, .columnThree, .columnThreeMiddle {display: block;}
/* End hide from IE-mac */

/* For testing 
#wrapper div {border: 1px solid #FFF;}*/