/* --------------------------------------------------------------------------
client:    [Turner Summersbee]	
version:   [1.0]
date:      [17/05/09]
website:   []
-----------------------------------------------------------------------------*/

/* Remove default styles
-----------------------------------------------------------------------------*/
* { margin: 0; padding: 0; border: 0; }

/* (CC) 2004 Tantek Celik. Some Rights Reserved.        */
/*   http://creativecommons.org/licenses/by/2.0         */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link, :visited { text-decoration: none; }

/* no list-markers by default, since lists are used more often for semantics */
ul, ol { list-style: none; }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }

/* whoever thought blue linked image borders were a good idea? */
a img, :link img, :visited img { border: none; }

/* de-italicize address */
address { font-style: normal; }

/* Styles for layout
-----------------------------------------------------------------------------*/
.clear { clear: both; }
.right { float: right; }
.left { float: left; }

/* Default links 
-----------------------------------------------------------------------------*/
a:link, a:visited { color: #c2995f; text-decoration: underline; outline: 0; font-size: 100%; }
a:hover, a:active { color: #9e907d; text-decoration: none; font-size: 100%; }

/* Font specs 
-----------------------------------------------------------------------------*/
h1 { color: #9e907d; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; line-height: 1.4em; font-weight: normal; font-variant: small-caps; margin: 0; padding: 6px 0; }
h2 { color: #9e907d; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.2em; font-weight: bold; margin: 0; padding: 6px 0; }
h3 { }
h4 { }
p { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; line-height: 1.5em; margin: 0 0 8px 0; padding: 0; }
.small-font { font-size: 0.8em; }
.small-caps { font-variant: small-caps; }
.address-small { font-size: 95%; }
.orange { color: #c2995f; }
.grey { color: #524f4a; }
.border-bot, #small_icon4.border-bot { border-bottom: 5px solid #524e49; padding-bottom: 10px; display: block; }

/* 
-----------------------------------------------------------------------------*/
ul, ol { line-height: 1.5em; }
/*
ul.gen { list-style: disc; margin: 0 0 1em 1em; padding-left: 1em; line-height: 1.6em; }
ul.nodisc { margin: 0 0 1em 0; padding-left: 1em; line-height: 1.6em; }
*/

/* 
-----------------------------------------------------------------------------*/
body { background: #524e49; margin: 0; padding: 0; font: 80% Arial, Helvetica, sans-serif; color: #fff; text-align: left; }

/* Page structure
-----------------------------------------------------------------------------*/
div#container { background: #524f4a; width: 940px; margin: 0 auto; padding: 0 10px; }
div#header { background: url(../images/header.jpg) top left no-repeat; width: 940px; height: 100px; padding: 34px 0 0 0; float: left; }
div#main-content { background: #44403a; width: 940px; float: left; }
/* small & large-col used on About page; also on contact & links page with columns switched around */
div#large-col { float: left; width: 590px; padding: 0 20px 10px 20px; } 
div#small-col { float: left; width: 280px; margin: 20px 10px 10px 0; padding: 10px; background: #35312c; }
div#footer { float: left; width: 940px; padding: 10px 0; border-top: 10px solid #fff; background: #35312c; }

/* Navigations (top & bottom)
-----------------------------------------------------------------------------*/
ul#top-nav { width: 920px; padding: 0 10px; display: block; text-align: right; font: 1.0em Arial, Helvetica, sans-serif; }
ul#top-nav li { display: inline; margin-left: 10px; font-variant: small-caps; }
ul#top-nav li a { font-size: 100%; }
ul#top-nav li a:link, ul#top-nav li a:visited { color: #9e907d; text-decoration: none; border-bottom: none; }
ul#top-nav li a:hover, ul#top-nav li a:active, ul#top-nav li a.sel { color: #fff; text-decoration: none; border-bottom: 5px solid #44403a; padding-bottom: 3px; }

/* Footer
-----------------------------------------------------------------------------*/
ul#footer-links-left { width: 580px; float: left; padding: 0 0 0 20px; }
ul#footer-links-right { width: 150px; float: right; padding: 0 20px 0 0; }
li#footer-links1, li#footer-links2, 
li#footer-links3, li#footer-links4 { width: 150px; padding: 0 10px; float: left; border-left: 5px solid #524f4a; min-height: 140px; } /* fix for IE6 as min-height not working in there */
ul.footer-links-breakdown { font-variant: small-caps; }
ul.footer-links-breakdown li a { font-size: 95%; }
ul.footer-links-breakdown li a:link, ul.footer-links-breakdown li a:visited { color: #fff; text-decoration: none; }
ul.footer-links-breakdown li a:hover, ul.footer-links-breakdown li a:active { color: #fff; text-decoration: underline; }


/* INDIVIDUAL PAGES    
-----------------------------------------------------------------------------*/
/* Home page   
-----------------------------------------------------------------------------*/
#home-pg div#main-content-top { margin-left: 30px; margin-right: 20px; width: 360px; float: right; }
#home-pg div#main-content img { float: left; padding: 15px 0 15px 10px; }
#home-pg div#main-content-bottom { width: 920px; margin: 0 10px; border-top: 5px solid #524f4a; border-bottom: 5px solid #524f4a; float: left; }
#home-pg div#main-content-bottom h1 { margin-left: 20px; }
h1.img-text { position: relative; top: 45px; left: -499px; color: #35312c; }
ul#service-1, ul#service-2, ul#service-3, ul#service-4 { width: 440px; float: left; padding-right: 20px; } 
#home-pg div#other-content-bottom { width: 920px; margin: 10px 10px 0 10px; padding: 0 0 10px 0; float: left; } 
ul#certify { width: 280px; background: #35312c; padding: 10px 20px; float: left; }
ul#map-contact { width: 550px; background: #35312c; padding: 10px 20px; float: right; }
li#map { width: 230px; margin: 0; padding: 0 10px 0 0; float: left; background: url(../images/gb_map.gif) bottom right no-repeat; min-height: 230px; list-style: none; }  /* set fixed height for IE6 */
li#form-container { width: 260px; padding: 10px 20px 0 20px; float: right; border-left: 5px solid #524f4a; }
.indent149 { height: 100px; padding: 0 0 10px 149px; background: url(../images/home_trada.gif) top left no-repeat; }

/* About page   
-----------------------------------------------------------------------------*/
#small_icon1 { background: url(../images/icon_small_construction.gif) top left no-repeat; padding: 3px 0 0 30px; }
#small_icon2 { background: url(../images/icon_small_finalfinishes.gif) top left no-repeat; padding: 3px 0 0 30px; }
#small_icon3 { background: url(../images/icon_small_greenoakwood.gif) top left no-repeat; padding: 3px 0 0 30px; }
#small_icon4 { background: url(../images/icon_small_firedoors.gif) top left no-repeat; padding: 3px 0 0 30px; }
#about-pg li#map { width: 270px; } 

/* Services Page   
-----------------------------------------------------------------------------*/
div#main-content-services { width: 920px; margin: 0 10px; border-bottom: 5px solid #524f4a; float: left; }
/*
#gallery { font: 11px verdana,arial,sans-serif; width: 920px; line-height:15px; flaot: left; }
#gallery div.off {color:#000; width: 188px; height:33px; margin-right:2px; line-height:33px; padding:0 20px; float:left; background: #524f4a; border-bottom-color:#000; cursor:pointer; position:relative; z-index:20;}
#gallery div.on {color:#c00; width: 188px; height:33px; line-height:32px; padding:0 20px; float:left; background: #35312c; border-bottom:0; cursor:pointer; margin-top:1px; position:relative; z-index:0;}
div.hide {display:none; width:0; overflow:hidden;}
div.show {clear:left; background: #35312c; width:880px; margin-top:0; top:-1px; padding: 20px 20px; position:relative; z-index:50; line-height:18px;}
div.show img {float:left; margin:0 10px 10px 0;}
.clear {clear:both;}
*/
#services-pg .services_img { float: right; padding: 0; }
#services-pg #construction, #finefinishes, #greenoakwork, #firedoors { background: #35312c; height: 400px; float: left; }
#services-pg .service_thumbs { padding: 0 55px 0 55px; }
#services-pg #services-content-main { margin-left: 10px; margin-right: 20px; width: 250px; float: left; }

/* Contact & Links page   
-----------------------------------------------------------------------------*/
#contact-links-pg div#large-col { float: left; width: 280px; padding: 0 20px 10px 20px; } 
#contact-links-pg div#small-col { float: left; width: 590px; margin: 20px 10px 10px 0; padding: 10px; background: #35312c url(../images/contact_towers_bg.jpg) bottom left no-repeat; }
#contact-links-pg li#map { width: 476px; background-image: none; }
div#contact-details { width: 476px; background: url(../images/gb_map.gif) center right no-repeat; min-height: 230px; } /* set fixed height for IE6 */
#contact-links-pg div#contact-form { width: 450px; float: none; }
#contact-links-pg label { width: 430px; }
#contact-links-pg label span { width: 100px; }
#contact-links-pg label span.mark { width: 20px; }
#contact-links-pg fieldset input, #contact-links-pg fieldset textarea { width: 300px; }
ul.links-list-wrap { padding-top: 10px; } 
img.links-list { float: left; padding-right: 20px; } 


/* Contact form
-----------------------------------------------------------------------------*/
div#contact-form { width: 260px; /*376px;*/ height: auto; padding: 15px 0 0 0; float: left; }
label { width: 240px; /*350px;*/ display: block; margin: 0; padding-bottom: .50em; float: left; }
label span { width: 80px; display: block; float: left; }
label span.mark { width: 20px; text-align: right; float: left; }
fieldset { padding: 5px; overflow: hidden; border: none; }
fieldset input, fieldset textarea { width: 130px; /*220px;*/ border: 1px solid #999; margin: 0; padding: 0; float: right; }
fieldset input:hover, fieldset textarea:hover { border-color: #c2995f; }
fieldset input:active, fieldset input:focus, fieldset textarea:active, fieldset textarea:focus { border-color: #524f4a; }
input#submit { width: 62px; height: 28px; margin: 0 18px 10px 0; float: right; background: #c2995f; }