/* ===== <style> ===== */

/* ===== [ johncsanders.com ] ===== */


/* --- body  //////////////////////////////////////////////////////////////////////////////////////// */  
body {
  color: #000000;
  background: #685F45 url(../img/bg.gif) repeat top left;
  margin: 22px 0px 22px 0px;
  padding: 0px;
  text-align: center;
  font-family: verdana, arial, helvetica, geneva, sans-serif;
  }
  

/* --- page borders ///////////////////////////////////////////////////////////////////////////////// */
#outerborder {
  margin: 0 auto;
  text-align: left;
  padding: 9px;
  border: 1px solid #000;
  background-color: #fff;
  width: 769px; /* for IE5/Win */
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 749px; /* actual value */
  }}
html>body #outerborder {
  width: 749px; /* be nice to Opera */
  }


#innerborder {
  margin: 0 auto;
  text-align: left;
  padding: 12px;
  background-color: #CBC28F;
  width: 749px; /* for IE5/Win */
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 725px; /* actual value */
  }}
html>body #innerborder {
  width: 725px; /* be nice to Opera */
  }  
    

/* --- top table (main table)  ////////////////////////////////////////////////////////////////////// */ 
table#toppart {
  border: 1px solid #787358;
  background-color: #fff;
  }
td#side {
  background-color: #FFFFD0;
  background: #FFFFD0 url(../img/bg_tagline.gif) no-repeat bottom center;
  }
#logo {
  margin-top: 20px;
  }
  
body.home table#toppart {
  margin-bottom: 13px;
  }  
body.home td#main img {
  margin: 0;
  border: none;
  }

/* --- navigation /////////////////////////////////////////////////////////////////////////////////// */
#nav {
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  width: 194px;
  overflow: hidden;
  }
#nav li {
  margin: 0;
  padding: 0;
  width: 194px;
  height: 30px;
  overflow: hidden;
  list-style: none;
  }
#nav a {
  width: 190px;
  text-decoration: none;
  display: block;
  padding: 30px 0 0 0;
  margin: 0;
  height: 0px !important;
  height /**/:30px; /* for IE5/Win only */
  }
#nav a:hover, #nav a:active {
  background-position: 50% -30px;
  border: 0px solid #fff; /* hack for mozilla */
  }
#nav_home a {  
  background: #FFFFD0 url(../img/nav_home.gif) no-repeat top center;
  }
#nav_kitchens a {  
  background: #FFFFD0 url(../img/nav_kitchens.gif) no-repeat top center;
  }     
#nav_interiors a {  
  background: #FFFFD0 url(../img/nav_interiors.gif) no-repeat top center;
  } 
#nav_exteriors a {  
  background: #FFFFD0 url(../img/nav_exteriors.gif) no-repeat top center;
  }
#nav_buildingprocess a {  
  background: #FFFFD0 url(../img/nav_buildingprocess.gif) no-repeat top center;
  }  
#nav_beforeafter a {  
  background: #FFFFD0 url(../img/nav_before.gif) no-repeat top center;
  }  
#nav_aboutus a {  
  background: #FFFFD0 url(../img/nav_aboutus.gif) no-repeat top center;
  }
#nav_testimonials a {  
  background: #FFFFD0 url(../img/nav_testimonials.gif) no-repeat top center;
  }
#nav_contactus a {  
  background: #FFFFD0 url(../img/nav_contactus.gif) no-repeat top center;
  }   

body.home #nav_home a,
body.kitchens #nav_kitchens a,
body.interiors #nav_interiors a,
body.exteriors #nav_exteriors a,
body.beforeafter #nav_beforeafter a,
body.buildingprocess #nav_buildingprocess a,
body.aboutus #nav_aboutus a,
body.testimonials #nav_testimonials a,
body.contactus #nav_contactus a {
  background-position: 50% -30px;
  border:0px solid #fff; /* hack for mozilla */
  }

 
/* --- main content area //////////////////////////////////////////////////////////////////////////// */
td#main {
  background: #CBC28F url(../img/bg_main.gif) repeat top left;
  }
body.interiors td#main, body.exteriors td#main, body.kitchens td#main {
  height: 410px;
  }
  
td#main img {
  margin: 15px;
  border: 1px solid #35342F;
  }
  
#mainwrapper {
  text-align: left;
  padding: 30px 20px 20px 20px;
  }


#mainwrapper img.right {
  margin: 8px 0px 8px 8px;
  border: none;
  }
#mainwrapper img.left {
  margin: 8px 12px 8px 0px;
  border: none;
  }  
    
#main p, #main td {
  font-size: 12px;
  line-height: 150%;
  color: #303030;
  }
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  }
#main h1 {
  font-size: 120%;
  font-weight: normal;
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #787358;
  }   
#main h2 {
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  color: #787358;
  margin-top: 30px;
  }
 
 /* Contact form */
 #main td.errormsg {
   color: #CC0000;
   }

/* --- bottom part ////////////////////////////////////////////////////////////////////////////////// */  
#bottompart {
  text-align: left;
  margin: 0 auto;
  padding: 4px;
  border: 1px solid #787358;
  background-color: #fff;
  width: 723px; /* for IE5/Win */
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 713px; /* actual value */
  }}
html>body #bottompart {
  width: 713px; /* be nice to Opera */
  }  

body.interiors #bottompart, body.exteriors #bottompart, body.kitchens #bottompart {  
  overflow: auto;
  height: 125px;
  margin-top: 10px;
  }
    
  
/* --- home bottom ////////////////////////////////////////////////////////////////////////////////// */ 
td#bot_interiors, td#bot_exteriors, td#bot_process {
  border-right: 4px solid #fff;
  }
table#homebottom td {
  background-color: #FFFFD0;
  }
table#homebottom a:hover {
  display: block;
  background: #FFFFB8;
  }
  
  
/* --- thumb scroller  ////////////////////////////////////////////////////////////////////////////// */   
#thumbscroller {
  background: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
  height: 100px;
  }
body.interiors #thumbscroller {
  width: 2740px;
  }
body.exteriors #thumbscroller {
  width: 1830px;
  }
body.kitchens #thumbscroller {
  width: 2200px;
  }  
#thumbscroller img {
  margin: 2px;
  padding: 0;
  border: 1px solid #000;
  }
#bottompart {
  scrollbar-base-color: #CBC28F;
  } 
  
/* --- gallery page tools /////////////////////////////////////////////////////////////////////////// */  
#pagetools {
  text-align: center;
  margin-left: 200px;
  padding-top: 10px;
  font-size: 12px;
  color: #787358;
  }
#pagetools a {
  color: #787358;
  margin: 0 5px 0 5px;
  }
#pagetools a:link {
	 text-decoration: none;
	 background-color: transparent;
	 }
#pagetools a:visited {
	 text-decoration: none;
	 background-color: transparent;
	 }	   
#pagetools a:hover {
	 text-decoration: none;
	 background-color: transparent;
	 color: #000;
	 }	 
#pagetools a:active {
	 text-decoration: none;
	 background-color: transparent;
	 }  


/* --- before and after ///////////////////////////////////////////////////////////////////////////// */ 
div.bawrapper {
  text-align: center;
  }
div.bawrapper p {
  margin-top: 0px;
  padding-top: 0px;
  }  
span.bastyle {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 130%;
  font-weight: normal;
  text-decoration: none;
  color: #787358;
  }


div#mainwrapper img.bathumb {
  padding: 0px;
  margin: 0px 20px 0 0;
  vertical-align: middle;
  }
a.balink {
  display: block;
  width: 100%;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 130%;
  font-weight: normal;
  text-decoration: none;
  color: #787358;
  }
a.balink:link {
	 text-decoration: none;
	 background-color: transparent;
	 }
a.balink:visited {
	 text-decoration: none;
	 background-color: transparent;
	 }	   
a.balink:hover {
	 text-decoration: none;
	 background-color: #D5CDA4;
	 color: black;
	 }	 
a.balink:active {
	 text-decoration: none;
	 background-color: transparent;
	 }  

	 
a{
  font-weight: normal;
  text-decoration: none;
  color: #787358;
  }
a:link {
	 text-decoration: none;
	 background-color: transparent;
	 }
a:visited {
	 text-decoration: none;
	 background-color: transparent;
	 }	   
a:hover {
	 text-decoration: none;
	 color: black;
	 }	 
a:active {
	 text-decoration: none;
	 background-color: transparent;
	 }	 
	 
	 

/* --- about //////////////////////////////////////////////////////////////////////////////////////// */  
div#mainwrapper img.aboutimg {
  border: none;
  margin: 0;
  padding: 30px 0 0 0;
  }

  
/* --- credits ////////////////////////////////////////////////////////////////////////////////////// */   
body.credits a {
  color: #000;
  }
body.credits a:link {
	 text-decoration: underline;
	 background-color: transparent;
	 }
body.credits a:visited {
	 text-decoration: underline;
	 background-color: transparent;
	 }	   
body.credits a:hover {
	 text-decoration: none;
	 background-color: transparent;
	 }	 
body.credits a:active {
	 text-decoration: underline;
	 background-color: transparent;
	 } 
	 
	 
/* --- block quotes  //////////////////////////////////////////////////////////////////////////////// */ 
#mainwrapper blockquote {
  width: 390px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background: transparent url(../img/bg_quote1.gif) no-repeat top left;
  }
#mainwrapper blockquote p.quote {
  font-size: 105%;
  letter-spacing: -1px;
  line-height: 1.2em;
  color: #787358;
  font-style: italic;
  margin: 10px 0px 0px 10px;
  padding: 0px 15px 11px 0px;
  background: transparent url(../img/bg_quote2.gif) no-repeat top right;
  }  
 #mainwrapper blockquote p.author {
  font-size: 90%;
  color: #787358;
  margin: 0;
  padding: 0;
  }
#mainwrapper blockquote a {
  display: block;
  width: 100%;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
  background-color: transparent;
  }

  
#mainwrapper div.testi {
  margin: 0px;
  padding: 0px 0px 0px 40px;
  background: transparent url(../img/bg_quote1.gif) no-repeat top left;
  border-bottom: 1px solid #D5CDA4;
  }
 #mainwrapper div.testi p.signed {
  font-size: 100%;
  color: #787358;
  font-family: Georgia, "Times New Roman", Times, serif;
  }  
   
  
  
/* --- footer  ////////////////////////////////////////////////////////////////////////////////////// */  
#footer {
  font-size: 10px;
  color: #C3BFB2;
  }
#footer a {
  color: #C3BFB2;
  }
#footer a:link {
	 text-decoration: underline;
	 background-color: transparent;
	 }
#footer a:visited {
	 text-decoration: underline;
	 background-color: transparent;
	 }	   
#footer a:hover {
	 text-decoration: none;
	 background-color: transparent;
	 }	 
#footer a:active {
	 text-decoration: underline;
	 background-color: transparent;
	 }  
  
  
	 
/* ===== </style> ===== */