/* 
 ----------------------------------------------------------------------------
  CSS Document - layout.css
 ---------------------------------------------------------------------------- 
*/


/* undo some default styling of common (X)HTML browsers
 * ------------------------------------------------------------------------- */

/* No list-markers by default - must redefine bullets w/ bg graphics */
ul,ol { list-style:none; }

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

/* Remove inconsistent (among browsers) default padding or margin */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }

/* prevent blue linked image borders */
a img,:link img,:visited img,fieldset { border:none; }



/* global elements
 * ------------------------------------------------------------------------- */


/* ----- type selectors ----- */ 
body { 
	background:#231F20 url("../images/bkgd_spacer.jpg") top repeat-x;
	text-align:center; 
	font:12px/20px "Times New Roman", Times, serif;
	color:#4B4C4E;
	font-weight:normal;
	}

blockquote { 
	margin-left:10px; 
	margin-right:10px; 
	}

h1	{ font-size:1.2em; color:#000; }
h2	{ font-size:1.2em; color:#376b95; text-transform:uppercase; }
h3	{ font-size:1.0em; color:#000; font-weight:normal; }

h1 span,h2 span,h3 span	{ display:none; }

a:link,a:visited	{ color:#8F663B; text-decoration:underline; outline:none; }
a:hover,a:active	{ color:#42280D; text-decoration:underline; outline:none; }

/* ----- classes ----- */

div.clear	{ 
	clear:both;
	height:.01em; 
	overflow:hidden; 
	}

p.back-to-top {
	text-align:right;
	display:block;
	padding-right:15px;
	background:url("../images/bullet-back-to-top.jpg") right no-repeat;
	}
	
img.img-left { 
	float:left; 
	margin:2px 10px 10px 0; 
	}
	
img.img-right { 
	float:right; 
	margin:0px 0 10px 25px; 
	}


/* framework
 * ------------------------------------------------------------------------- */

#wrap {
	background:url("../images/bkgd-spacer.jpg") repeat-y;
	width:872px;
	margin:0 auto;
	text-align:left;
	}
	
#masthead {
	position:relative;
	background:url("../images/masthead.jpg");
	height:374px;
	}
	/* index page link within #masthead */		
	#masthead a {	
		position:absolute;
		left:611px;
		width:240px;
		top:48px;
		height:110px; 
		}
	#masthead a span {
		display:none;
		}
	#masthead p { padding:270px 19px 0 632px;}
	
	#masthead p.home { padding:250px 19px 0 632px;}

/* ----- hm-left ----- */

#hm-left {width: 436px; float:left; }

	#hm-left h2 { height: 116px; background:url("../images/hm-hd-left.jpg") no-repeat; }
	
	#hm-left p { margin: 0 30px 8px 36px; }
	
	.btn { background:url("../images/btn-bkgd.jpg") no-repeat; height: 29px; width: 178px; color:#fff; text-transform:uppercase; text-align:center; font-weight:bold; padding-top:3px;}
	
	.btn a:link, .btn a:visited	{ color:#fff; text-decoration:none; }
	.btn a:hover, .btn a:active	{ color:#CFCECC; text-decoration:none; }

/* ----- hm-right ----- */

#hm-right {width: 436px; float:left; }

	#hm-right h2 { height: 116px; background:url("../images/hm-hd-right.jpg") no-repeat; }
		
	#hm-right p { margin: 0 40px 8px 18px; }
	
	
/* ----- divider ----- */

#divider { height: 179px; background:url("../images/divider.jpg") no-repeat; }

	#divider p { padding: 70px 200px 0 120px; text-align:center; color:#000; font-size:1.35em; font-style:italic; line-height:1.5em; }


/* ----- btm-left ----- */

#btm-left {width: 454px; float:left; height:230px; background:url("../images/bkgd-guarantee.jpg") no-repeat; color:#FCFAF7;}
	
	#btm-left p { margin: 67px 18px 8px 191px; ; }


/* ----- btm-right ----- */

#btm-right {width: 418px; float:left; }

	#btm-right h2 { height: 52px; background:url("../images/hdr-care.jpg") no-repeat; }
		
	#btm-right p { margin: 15px 40px 8px 40px;  }


#main {  }
	
	#main p, #main h2 { margin: 0 39px 5px 36px; }
	
	#main h2 { padding-top:10px; }
	
	#main .prod-hdr { padding-top:30px; }
	
	.office { background: url("../images/office.jpg") 0 15px no-repeat; height:294px; }
	

/* ----- about page ----- */

#about-left { width:570px; float:left;}
	
	#about-left p, #about-left h2 { margin: 0 0px 5px 36px; }

#about-right { width:271px; float:left; padding-top:15px;}




	
/* ----- products page ----- */

#p1 { width:154px; float:left; margin-left:36px; }

#p2 { width:645px; float:left; margin-right:37px;}

	#p2 p {margin:0px; }

#p3 { width:398px; float:left; margin:20px 0 0 36px; }

	#p3 p, #p3 h2 {margin:0 15px 8px 0; }
	
	.p3-left { width:198px; float:left; }
	
		.p3-left h3 { padding:0 0 15px 0;}
		
		#p3 .p3-left p { margin:0;}
	
	.p3-right { width:198px; float:left; }
	
		.p3-right h3 { padding:0 0 15px 0;}
		
		#p3 .p3-right p { margin:0;}

	
#p4 { width:398px; float:left; margin:20px 37px 0 0; }
 	#p4 p, #p4 h2 {margin:0 0 8px 15px; }
		
		#p4 .p3-left p, #p4 .p3-left h3 { margin:0 0 0 15px;}
		
		#p4 .p3-right p, #p4 .p3-right h3 { margin:0 0 0 15px;}


#divider-products { height: 131px; background:url("../images/divider-products.jpg") no-repeat; margin: 20px 0 15px; }

	#divider-products p { padding: 43px 250px 0 30px; text-align:center; color:#000; font-size:1.35em; font-style:italic; line-height:1.5em; }
	
	
	

/* ----- contact page ----- */

#c1 { width:455px; float:left; margin:0px; }

#c2 { width:340px; float:left; }

	#c2 p, #c2 h2 {margin:0px; }


#info { width:440px; margin:0 36px 0 36px; padding: 10px 0 10px 0; }

#info-lf { width:177px; float:left; }

	#info-lf p, #info-lf h2 {margin:0 15px 0px 0; }

#info-rt { width:257px; float:left;  border-left:1px solid #595856; }

	#info-rt p, #info-rt h2 {margin:0 0px 0px 25px; }



/* ----- column-left ----- */

#column-left {
	width:290px;
	float:left;
	}
	
	#column-left p, #column-left h1, #column-left h2, #column-left h3, #column-left ul, #column-left dl {
		margin:0 0px 10px 0px;
		}
	#column-left form { margin-left:0px; }
	
	/* single column list */
	#column-left ul { padding-left:5px; }
		#column-left ul li { 
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px; /* pushes text to the right to display bg img */
			}

	/* multi column list */
	#column-left ul { padding-left:5px; } 
		#column-left ul li { 
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px;  /* pushes text to the right to display bg img */
			float:left;
			width:150px;
			line-height:20px; 
			}
	
	/* definition list */
	#column-left dl { padding-left:5px; }
		#column-left dl dt {
			font-weight:bold;
			color:#99CC00;
			}
		#column-left dl dd {
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px;  /* pushes text to the right to display bg img */
			margin-left:5px;
			}
			
/* ----- column-right ----- */

#column-right {
	width:470px;
	float:left;
	}

	#column-right p, #column-right h1, #column-right h2, #column-right h3, #column-right ul, #column-right dl {
		margin:0 0px 10px 0px;
		}
	#column-right form { margin-left:0px; }
	 
	/* single column list */
	#column-right ul { padding-left:5px; }
		#column-right ul li { 
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px;  /* pushes text to the right to display bg img */
			}

	/* multi column list */
	#column-right ul { padding-left:5px; } 
		#column-right ul li { 
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px;  /* pushes text to the right to display bg img */
			float:left;
			width:150px;
			line-height:20px; 
			}
	
	/* definition list */
	#column-right dl { padding-left:5px; }
		#column-right dl dt {
			font-weight:bold;
			color:#99CC00;
			}
		#column-right dl dd {
			background:transparent url("../images/bullet.jpg") 0px 6px no-repeat;
			padding-left:10px;  /* pushes text to the right to display bg img */
			margin-left:5px;
			}
	
/* ----- bottom-wrap ----- */
 
#bottom-wrap {
	background:url("../images/btm-wrap.jpg");
	height:28px;
	clear:both;
	width:100%; /* fix for Safar */
	}

#bottom-wrap-sub {
	background:url("../images/btm-wrap-sub.jpg");
	height:28px;
	clear:both;
	width:100%; /* fix for Safar */
	}



/* header framework
 * ------------------------------------------------------------------------- */

#header-flash { height:300px; } /* sets height for the flash header - REMOVE IF NOT USED */
#active-x {height:300px;}
#header-graphic { height:300px; } /* sets height for all non-flash headers */

	body#index #header-graphic { background:url("../images/header-index.jpg"); }
	body#about #header-graphic { background:url("../images/header-about.jpg"); }
	body#contact #header-graphic { background:url("../images/header-contact.jpg"); }
	body#thankyou #header-graphic { background:url("../images/header-thankyou.jpg"); }
	body#sitemap #header-graphic { background:url("../images/header-sitemap.jpg"); }

/* subhead framework
 * ------------------------------------------------------------------------- */

#subhead { height:116px; padding-bottom:15px; } /* sets height for all subheads */

	body#index #subhead { background:url("../images/subhead-index.jpg") no-repeat; }
	body#pg-about #subhead { background:url("../images/hdr-about-sub.jpg") no-repeat; }
	body#pg-products #subhead { background:url("../images/hdr-products-sub.jpg") no-repeat; }
	body#pg-contact #subhead { background:url("../images/hdr-contact-sub.jpg") no-repeat; }
	body#pg-sitemap #subhead { background:url("../images/hdr-sitemap-sub.jpg") no-repeat; }


/* ----- subhead framework with varying heights ----- */

#subhead-meet-doc {
	height:55px;
	background:url("../images/subhead-meet-doc.jpg") ;
	}


/* footer
 * ------------------------------------------------------------------------- */
 
#footer { width:872px; margin:0 auto; color:#fff;}

#ft-left { width:454px; float:left; text-align:left; }

	#ft-left ul { margin:10px 0 15px 30px; }

	#ft-left li { /* if your li's float, you can adjust border height w/ line-height */
		padding:0 5px 0 7px;
		display: inline;
		border-left: 1px solid #fff;
		}

	#ft-left li.first { border: none; }

#ft-right { width:418px; float:left; text-align:right; }

	#ft-right ul { margin:10px 30px 15px 0; }

	#ft-right li { /* if your li's float, you can adjust border height w/ line-height */
		padding:0 5px 0 7px;
		display: inline;
		border-left: 1px solid #fff;
		}

	#ft-right li.first { border: none; }

.toll { background:url("../images/ft-toll.gif") 0px 1px no-repeat; padding-left:20px; }
.phone { background:url("../images/ft-phone.gif") 0px 1px no-repeat; padding-left:20px; }
.fax { background:url("../images/ft-fax.gif") 0px 1px no-repeat; padding-left:20px;}

#footer a:link, #footer a:visited { color:#fff; }

#footer a:hover, #footer a:active { color:#fff; text-decoration:none; }


/* nav
 * ------------------------------------------------------------------------- */


#nav { width:872px; background:url("../images/nav-bkgd.jpg") no-repeat; height:56px; color:#C3BFB9; text-align:left; text-transform:uppercase; font-size:1.2em; font-weight:bold; }

	#nav ul { margin:0 0 0 30px; padding-top:20px;  }

	#nav li { display:inline; padding-right:25px;}
	
	.call { color:#C3BFB9; }
	.num { color:#E1B586; }
	
	#nav a:link, #nav a:visited { color:#C3BFB9; text-decoration:none; }

	#nav a:hover, #nav a:active { color:#fff; text-decoration:none; }
	
	body#pg-home #nav-01 { color:#fff; }
	body#pg-about #nav-02 { color:#fff; }
	body#pg-products #nav-03 { color:#fff; }
	body#pg-contact #nav-04 { color:#fff; }

	
	


/* coda slider
 * ------------------------------------------------------------------------- */
.gallery { width: 370px; margin-left: 30px;}

.gallery1 { width: 370px; margin-left: 20px;}

noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }


#hm-left .wrapper p { margin:0px; padding:0px; }

#hm-right .wrapper p { margin:0px; padding:0px; }

#stripNav0 {
  display: none;
}

#stripNav1 {
  display: none;
}

.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 0;
			position: relative;
			width: 375px; 
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 200px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			/* border: 5px solid #000;  this is the border. should have the same value for the links */
			margin: auto;
			width: 325px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 175px;
			clear: both;
			/* background: #fff; */
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 400px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #fff;
			text-decoration: none;
			display: block;
			padding:0px;
		}
		
		.stripNav li.tab1 a { background: #60f }
		.stripNav li.tab2 a { background: #60c }
		.stripNav li.tab3 a { background: #63f }
		.stripNav li.tab4 a { background: #63c }
		.stripNav li.tab5 a { background: #00e }
		
		.stripNav li a:hover {
			background: #333;
		}
		
		.stripNav li a.current {
			background: #000;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 30px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 99px;
			width: 16px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("../images/arrow-left.gif") no-repeat center; }
		
		.stripNavR {
			background: url("../images/arrow-right.gif") no-repeat center; }



/**********
* Form classes
********************************************/
#contact-main {
	margin: 0px;
	padding: 15px 0 15px 30px;
	background:#e5e2dd;
	}


#form_holder {
  display: block;
  position: relative;
  width: 340px;
  margin: 0px;
}

#form_holder form {
  width: 100%;
  padding: 0px 0px 5px 0px;
}

#form_holder img.form_header {
  display: block;
  position: relative;
  width: 340px;
  height: 130px;
  margin: 0px 0px 0px 0px;
}

#form_holder .formline {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padleft {
  padding-left: 30px;
}
#form_holder .fieldholder {
  display: block;
  float: left;
  width: 340px;
}

#form_holder .formline label {
  display: block;
  padding-left: 30px;
  color:#000;

}

#form_holder .fieldholder h2 {
  padding-left: 30px;
}

#form_holder .formline label span {
  color: #8F663B;
}

.textfield {
  display: block;
  width: 80%;
  height:18px;
  padding: 4px;
  vertical-align: middle;
  margin: 0 0 4px 30px;
  border:1px solid #181E21;
  background-color:#fff !important; /* to prevent highlighting by Google Toolbar */
}

#form_holder .formline .required {
  border: solid 1px #8F663B;
}

#form_holder .fieldholder div {
  float: left;
  width: 50%;
}

#form_holder .fieldholder div .textfield {
  width: 60%;
}

#form_holder .formline select.state {
  margin-left: 20px;
  width: 100px;
}

#form_holder .formline select.fullfield {
  margin-left: 20px;
  width: 80%;
}

#form_holder .formline textarea {
  margin-left: 30px;
  width: 278px;
  background-color:#fff !important; /* to prevent highlighting by Google Toolbar */
  border:1px solid #181E21;
}

input.submit {
  display: block;
  float: left;
  width: 80px;
  height: 30px;
  padding-bottom:8px;
  background: url(../images/submit-btn.gif) no-repeat 0 0;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  border: none;
  text-transform:uppercase;

}


#thanks-img { background:url(../images/thank-you-img.jpg) no-repeat; width:338px; height:140px; margin-top:7px; }

