html,body { margin:0; padding:0; background-color:#ffffff; }

body {font-family:Verdana, sans-serif; font-size:12px; text-align:left;}
/*body {font-smooth:always; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased;}*/

a:link, a:visited {text-decoration:none;}
a:hover, a:active {text-decoration:underline;}

td                {vertical-align:top;}

/* text */
/*  font-weight:600; */

.text-brown-h0      {color:#4C1900; font-family:Verdana, sans-serif; line-height:120%; font-size:36px; text-shadow:1px 0px #CCCCCC;}

.text-grey-h0       {color:#a7a9a0;	font-family:Verdana, sans-serif; line-height:120%; font-size:36px; text-shadow:0px 0px #FFFFFF;}

.text-brown-h1      {color:#4C1900; font-family:Verdana, sans-serif; line-height:120%; font-size:24px; text-shadow:1px 0px #CCCCCC;}

.text-grey-h1       {color:#a7a9a0;	font-family:Verdana, sans-serif; line-height:120%; font-size:24px; text-shadow:0px 0px #FFFFFF;}

.text-brown-large   {color:#4C1900; font-family:Verdana, sans-serif; line-height:120%; font-size:18px; text-shadow:1px 0px #CCCCCC;}
.text-brown-large a {color:#4C1900}

.text-grey-large    {color:#a7a9a0; font-family:Verdana, sans-serif; line-height:120%; font-size:18px; text-shadow:0px 0px #FFFFFF;}
.text-grey-large  a {color:#a7a9a0;}

.text-brown-med     {color:#4C1900;	font-family:Verdana, sans-serif; line-height:140%; font-size:14px; text-shadow:1px 0px #CCCCCC;}
.text-brown-med   a {color:#4C1900;}

.text-grey-med      {color:#a7a9a0;	font-family:Verdana, sans-serif; line-height:140%; font-size:14px; text-shadow:0px 0px #FFFFFF;}
.text-grey-med    a {color:#a7a9a0;}

.text-brown-small   {color:#4C1900;	font-family:Verdana, sans-serif; line-height:140%; font-size:12px; text-shadow:1px 0px #DDDDDD;}
.text-brown-small a {color:#4C1900;}

.text-grey-small    {color:#a7a9a0;	font-family:Verdana, sans-serif; line-height:140%; font-size:12px; text-shadow:0px 0px #FFFFFF;}
.text-grey-small a  {color:#a7a9a0;}

/* layout */

#outer {            /* includes header and navbar, but not footer */    
  width:1000px;    
  margin-left:auto;    
  margin-right:auto;    
  padding:0px;    
  /*min-height:750px; */
  position:relative;
} 

/* nav bar */

.navtext a {
  color:white;
	font-family:Verdana, sans-serif;
	font-size:12px;
  font-weight:bold;
}
#navs  {color:#4C1900;}  /* color of selected item (use ID so it overrides .navtext) */
#navsd {color:#4C1900;}  /* color of selected dropdown item (use ID so it overrides .navtext) */

#navbar {
	position:absolute;  /* nail it at top right */
  top:0;
  right:0;
  list-style:none;
  margin:0;
  padding:0;
}
#navbar li {
  float:right;
	position:relative;  /* to allow absolute in dropdwon */
}
#navbar a {
  display:block;
  /*width:80px;*/
  /*height:0px;*/
  padding:16px 10px 20px 10px;
  text-align:center;
  text-decoration:none;
}
#navbar a:hover, #navbar a:active{  /* highlight the item we are hovering over */
  background-color:#AAAAAA;
}

/* dropdown items - any ul nested within navbar ul will follow these rules */
#navbar ul {
	margin:0;
	padding:0;
	background:#FFFFFF;               /* needed to make dropdown work properly in IE */
	background:rgba(255,255,255,0);   /* but make it transparent in other browsers */
	list-style:none;
	position:absolute;
	left:-9999px;                     /* hide off-screen when not needed */
}

#navbar ul li{
  float:none;       /* so li's align vertically on both sides */
	padding-top:1px;  /* gap between items */
}

#navbar ul a{       /* anchors within dropdown li's */
	white-space:nowrap; 
  text-align:left;
  /*display:block;
  padding:16px 10px 20px 10px;*/
}
#navbar li:hover ul { /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#navbar li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#AAAAAA;
}
#navbar li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#navbar li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#888888;
}

/* main box containing logo in left-box and content in #content-box */

#main {
	width:1000px;
	margin-top:50px;
  float:left; /* to make it same height as content-box */
  clear:both; /* clear floats of header */
	background-color:#4C1900; /* so space below left-box is filled */
}

#left-box {
	width:160px;
	background-color:#4C1900;
}

#content-box {  /* main page content box */
  padding:30px 150px 50px 50px; /* margins for content */
	width:640px;  /* 1000 - 160 (left-box) - 200 (padding) */
	float:right;
  min-height:640px;
	/*background-color:white;*/
  background:white url('pcb1.png') repeat-y right top;
  position:relative;  /* so we can use position:absolute; inside it */
}

#content-box-wide {  /* version of content-box with smaller left&right padding for wider text */
	width:740px;  /* 1000 - 160 (left-box) - 100 (padding) */
	float:right;
  min-height:640px;
	background-color:white;
  position:relative;  /* so we can use position:absolute; inside it */
  padding:30px 30px 30px 50px; /* margins for content */
}

/* ben experiments in layout, adding photo on right */

#text-box {
	width:440px;  /* 1000 - 160 (left-box) - 300 (image-box) - 100 (padding) */
	float:right;
  min-height:640px;
	background-color:white;
  position:relative;  /* so we can use position:absolute; inside it */
  padding:30px 50px 50px 50px; /* margins for content */
}

#image-box {
  min-height:640px;
	width:300px;
	float:right;
	background-color:white;
}

/* content */

#home-defs {
  /*background-color: pink; *debug*/
  text-align:left;
}

#home-main {
	margin-top:80px;
  text-align:center;
}

#home-body {
	margin-top:80px;
  text-align:center;
}

#home-call {
	float:right;
	margin-top:180px;
  text-align:center;
}

#page-title {
  /*background-color: pink; *debug*/
  text-align:left;
}

#page-body {
	margin-top:30px;
  text-align:justify;
}

#page-ps {
  /*background-color: green; *debug*/
  position:absolute;
  bottom:30px;
}

#about-body {
  /*background-color: blue;   *debug*/
  margin-top:30px;
  /*margin-bottom:30px; * leave space for #page-ps */
  text-align:justify;
}

#principles-body {
  /*background-color: blue;   *debug*/
	margin-top:30px;
  text-align:justify;
}

#services-body {
	margin-top:30px;
  margin-bottom:30px; /* leave space for #services-nav */
  text-align:justify;
}

#services-ul {
	margin-left:50px;
	list-style:disc;
}
#services-ul a {
	display:block;
	padding:10px;
	text-decoration:none;
}
#services-ul a:hover{
	background:#EEEEEE;
}

/* nav buttons at bottom of services pages */
#services-nav {       
  /*background-color: green; *debug*/
  position:absolute;
  bottom:30px;
	width:640px;    /* same as #content-box, for IE */
  width:inherit;  /* doesn't work in IE */
}
#services-nav .snleft { text-align:left;}
#services-nav .snright{ text-align:right; float:right;}
#services-nav a {     /* button design */
	border:1px solid #dcdcdc;
  -moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
  -moz-box-shadow:0px 1px 0px 0px #ffffff inset;
	-webkit-box-shadow:0px 1px 0px 0px #ffffff inset;
	box-shadow:0px 1px 0px 0px #ffffff inset;

/*  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
*/
  background: #ededed; /* Old browsers */
  background: -moz-linear-gradient(top, #ededed 0%, #dfdfdf 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* W3C */

  display:inline-block;
	color:#777777;
	font-family:Verdana, sans-serif;
	font-size:12px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
#services-nav a:hover {   /* change color gradient when hover */
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
#services-nav a:active {  /* depress button when clicked */
	position:relative;
	top:1px;
}


#terms-body {
	margin-top:30px;
  text-align:justify;
}

#contact-details {
	margin-top:50px;
}

/* debug in contact2.html */
#contact-table {
	margin-top:30px;
}
#contact-table table{color:red; padding-top:20px;}
/*#contact-table table td {color:blue;}*/
#contact-table table td:first-of-type {color:green;}


#directions-title {
  text-align:left;
  display: inline-block;
}
#directions-title-right {
  float:right;
  text-align:right;
  display: inline-block;
}
#directions-body {
	margin-top:30px;
  text-align:justify;
}

#company-details-body {
	margin-top:30px;
  text-align:justify;
}

/* footer */

#footer_strip {
	width:100%;
	height:50px;
	background-color:#4C1900;
  clear:both;
  position:relative;
	top:50px;
}

#footer{    
  width:1000px;   
  margin-left:auto;    
  margin-right:auto;  
  padding-top:10px;
}
#footer .leftfoot { text-align:left}
#footer .rightfoot{ text-align:right; width:300px; float:right}

#footer .footertext {
	color:#a7a9a0;
	font-family:Verdana, sans-serif;
	font-size:10px;
}
#footer .footertext a   {color:#a7a9a0;}