body
{
    margin: 0;
    padding: 0;
    background-color: #FAFAE8;
    font-family: verdana, "Lucida Grande", geneva, sans-serif;
    font-size: 11px;
    color: #333;
    line-height: 16px;    
}


/*HEADER STYLES*/

#masthead
{
    width: 770px;
    height: 65px;
    background-color: #FAFAE8;      
    background-image: url(../images/logo.gif);
    background-repeat: no-repeat;
    background-position: 594px 32px;    
    border-bottom: 1px solid #fff;
}


/*FIR-style technique for logo*/
#masthead a#logo
{
    position: relative;
    background-image: url(../images/logotype.gif);
    background-repeat: no-repeat;
    display: block;
    width: 244px;
    height: 16px;    
    left: 9px;
    top: 42px;
    text-decoration: none; 
}

#masthead span
{
    visibility: hidden;
}

/*FIR-style technique for headers*/
h1
{
    position: relative;
    font-size: 14px;
    color: #B1AA9C;    
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
    height: 12px;    
    border-bottom: 1px solid #B1AA9C;
}

h1#hdrHome{background-image: url(../images/hdr_home.gif);}
h1#hdrPhilosophy{background-image: url(../images/hdr_philosophy.gif);}
h1#hdrProcess{background-image: url(../images/hdr_process.gif);}
h1#hdrBiography{background-image: url(../images/hdr_biography.gif);}
h1#hdrAwards{background-image: url(../images/hdr_awards.gif);}
h1#hdrTestimonials{background-image: url(../images/hdr_testimonials.gif);}
h1#hdrPortfolio{background-image: url(../images/hdr_portfolio.gif);}
h1#hdrContact{background-image: url(../images/hdr_contact.gif);}
h1#hdrClient{background-image: url(../images/hdr_client.gif);}
h1#hdrLinks{background-image: url(../images/hdr_links.gif);}

/*use this on portfolio pages where there are two header images
 - one header image is delivered as background, the other one is inline and 
 positioned with this rule*/
h1.dualHeader img{position:absolute; left: 304px;}

h1 span
{
    visibility: hidden;
}

h2
{
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
}


/*NAV STRIP STYLES*/

#nav
{
    width:770px;
    background-color: #453119;
    margin: 0;
    padding: 0;
    height: 16px;
}

#nav img
{
    border-right: 1px solid #fff;
    cursor: pointer;
}

#nav img.first
{
    margin-left: 10px;
    border-left: 1px solid #fff;
}


/*ALT NAV STYLE FOR NOSCRIPT TAGS*/

#altNav a
{
    padding-right: 5px;
}





/*DYNAMIC MENU DIV STYLES*/
.menu
{
    position: absolute;
    left: -500px;
    top: -2000px;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
}

.menu img
{
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    display: block;
    cursor: pointer;
}

.menu img.spacer
{
    border: none;
}






/*artwork images in each section*/
.pageArt
{
    margin: 0 0 38px 0;
    width:770px;
    height: 190px;
    background-repeat: no-repeat;
    border-top: 1px solid #fff;       
}

.pageArt#home
{
    background-image: url(../images/pageart_home.jpg);
}

.pageArt#philosophy
{
    background-image: url(../images/pageart_philosophy.jpg);
}

.pageArt#portfolio
{
    background-image: url(../images/pageart_portfolio.jpg);
}

.pageArt#contact
{
    background-image: url(../images/pageart_contact.jpg);
}


#portfolioArt
{
    margin: 0 0 1px 0;
    width:770px;
    height: 112px;
    background-repeat: no-repeat;
    border-top: 1px solid #fff;
    background-image: url(../images/pageart_portfolio_small.jpg);       
}






/*CONTENT STYLES*/

#content
{
    margin: 0 0 0 12px;
    padding: 0;
    width: 758px;
    background-color: #FAFAE8;
    overflow: hidden;
    /*border: 1px dashed #000;*/
}


p
{
    width: 600px;
    margin: 0 0 16px 0;
}

#portfolioText p
{
    width: 285px;
    margin: 0 0 16px 0;
}


a
{
    color: #333;   
} 
a:hover
{
    color: #888;
}




ul
{
    padding: 0;
    margin: 0 0 16px 0;    
    list-style: none;
}
ul li
{
/*    background: url(../images/icon_bullet.gif) no-repeat 0 50%;   
    padding-left: 8px;*/
}

blockquote
{
    width: 600px;
    margin: 0 0 19px 0;
    padding: 0;
}

blockquote p
{
    margin: 0;
}

blockquote p.attribution
{
    width: 97%;
    text-align: right;
    margin-top: 6px;
}


div#leftcolumn
{
    float:left;
    width: 490px;
    height: 335px;
    margin-right: 20px;
    overflow: visible;    
}

div#displayTypeHome
{
    position: relative;
    width: 490px;
    height: 335px;
    background: url(../images/display_home.gif) no-repeat 0 0;
}

/*positioned inside display type divs*/
div.learnMore 
{
    position: absolute;        
    margin-right: 0;    
    right: 40px;
    bottom: 10px;
}

div.learnMore a
{
    padding: 3px;
}


/*div#displayTypeHome img
{
    margin-bottom: 16px;
    display: block;
}*/



div#displayTypePhilosophy
{
    position: relative;
    width: 450px;
    height: 140px;
    background: url(../images/display_philosophy.gif) no-repeat 0 0;
}


div#displayTypePortfolio
{
    position: relative;
    width: 490px;
    height: 255px;
    background: url(../images/display_portfolio.gif) no-repeat 0 0;
}




/*div#displayTypePortfolio img
{
    margin-bottom: 16px;
    display: block;
}*/




/*FIR type idea here*/
div#displayTypeHome span, div#displayTypePortfolio span, div#displayTypePhilosophy span
{
    visibility: hidden;
}





div#sideBarHome
{
    margin-top: 4px;
    float: left;
}

div#sideBarHome .pic
{
    margin: 0 0 1px 0;
}
div#sideBarHome .caption
{
    margin: 0 0 16px 0;
}




ul.address
{
    padding: 0;
    margin: 0;
    line-height: 16px;
}

ul.address li.heading
{
    font-weight: bold;    
    margin: 0;
    padding: 0;
}



div#portfolioText
{
    float: left;
    width: 285px;   
    margin-right: 20px;
}

div#portfolioImage
{
    float: left;
    width: 400px;
    margin-top: 5px;
}




/*FORM STYLES*/

form
{
    padding: 0;
    margin: 0;
}

table
{
    margin: 0;
    padding: 0;
}

td
{  
    width: 160px;
    margin: 0;
    padding: 2px 2px 2px 0;    
    font-size: 11px;
    color: #333;
}


td.label
{    
    width: 75px;
}


input.textField
{
    margin: 0;
    padding: 0;
    height: 16px;
    width: 150px;
    border: 1px solid #999;
    background-color: #eee;
}


#loginMessage
{
    visibility: hidden;
}

ul#formFormat
{
    margin: 0;
    padding: 0;
    line-height: 0;    
}

ul#formFormat li
{
    margin-bottom: 8px;
}




/*CSS ROLLOVES ON HOMEPAGE*/
	

div.siteFeatures a 
{     
    margin-bottom: 16px;
    background-repeat: no-repeat;
    background-position: 0 75px; 
    width: 201px; 
    height: 92px; 
    display: block; 
    /*overflow: hidden; /* For nested divs in Safari */ 
}


/*safari needs overflow hidden and IE5 MAC doesn't 
so the following hack is used to turn on overflow:hidden except in IE5 MAC*/

/* IE 5 hack \*/
*div.siteFeatures a {overflow: hidden;} 
/* end hack */

div.siteFeatures a:hover { background-position: 0 58px; } 

div.siteFeatures a#comfort {background-image: url(../images/hmsidebar_comfortcaption.gif);}
div.siteFeatures a#people {background-image: url(../images/hmsidebar_peoplecaption.gif);}
div.siteFeatures a#details {background-image: url(../images/hmsidebar_detailscaption.gif);}


/*FOOTER STYLES*/

#footer
{
    margin: 120px 0 0 10px;
    width: 760px;
    padding: 2px 0 10px 0;
    border-top: 1px solid #B1AA9C;    
}

#footer p
{
    margin: 0;
    font-size: 10px;
    color: #999;
}