/* Start of CMSMS style sheet 'Accessibility and cross-browser tools' */
/* accessibility */

/* 
menu links accesskeys 
*/
span.accesskey {
   text-decoration:none;
}

/* 
accessibility divs are hidden by default 
text, screenreaders and such will show these 
*/
.accessibility, hr {
   position: absolute;
   top: -999em;
   left: -999em;
}

/* 
definition tags are also hidden 
these are also used for menu links    
*/
dfn {
   position: absolute;
   left: -1000px;
   top: -1000px;
   width: 0;
   height: 0;
   overflow: hidden;
   display: inline;
}
/* end accessibility */


/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
  position: absolute;
  left: -5000px;
  width: 4000px;
}

/* make some room for the image */
a.external {
/* css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
  padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
  color: #18507C;
/* background image for the link to show wiki style arrow */
  background: url(images/cms/external.gif) no-repeat 100% 0;
}
a.external:visited {
  color: #18507C; /* a different color can be used for visited external links */

/* 
Set the last 0 to -100px to use that part of the external.gif image for different color for active links 
external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.
*/
  background: url(images/cms/external.gif) no-repeat 100% 0; 
}

a.external:hover {
  color: #052D56;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
  background: url(images/cms/external.gif) no-repeat 100% 0; 
  background-color: #C3D4DF;
}
/* end wiki style external links */


/* clearing */
/* 
clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item.
We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience.
Do not edit if you dont know what you are doing
*/
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */
/* End of 'Accessibility and cross-browser tools' */

/* Start of CMSMS style sheet 'Module: News' */
div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000; 
  background: #FFE9AF; 
}

div#news h2 {
   line-height: 2em;
   background: #fff;
}

.NewsSummary {
    padding: 0.5em 0.5em 1em; /* padding for the news article summary */
    margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
    border-bottom: 1px solid #ccc; 
}

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
 }

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
 }

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
 }

.NewsSummaryMorelink {
  padding-top: 0.5em;
}

#NewsPostDetailDate {
  font-size: 90%;
  margin-bottom: 5px;
  font-weight: bold;
  }

#NewsPostDetailSummary {
   line-height: 150%;
   }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 15px;
  line-height: 150%;
  }

#NewsPostDetailAuthor {

  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

/* 
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/
/* End of 'Module: News' */

/* Start of CMSMS style sheet 'Navigation: Simple - Horizontal' */
/* CSS Document */

/* First level navigation 	*/

#menu_horiz	{
	height: 40x;
	width: 880px;
	margin: 0 0 10px 0;
	padding: 0;
	border: 0;
	}
#menu_horiz ul	{
	height: 40px;
	width: 880px;
	background: transparent url(uploads/images/nav/nav.gif) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}
#menu_horiz ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
#menu_horiz ul li, #menu_horiz a {
	height: 40px;
	display: block;
	}
#menu_horiz li, #menu_horiz li a {
	text-indent: -999em;
	text-decoration: none;
	}
#why a, #residential a, #commercial a, #resources a, #about a, #locate a {
	padding: 0;
	height: 40px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
#why {
	left: 0;
	width: 197px;
	height: 40px;
}
#residential {
	left: 197px;
	width: 135px;
	height: 40px;
}
#commercial {
	left: 332px;
	width: 135px;
	height: 40px;
}
#resources {
	left: 465px;
	width: 135px;
	height: 40px;
}
#about {
	left: 600px;
	width: 135px;
	height: 40px;
}
#locate {
	left: 735px;
	width: 145px;
	height: 40px;
}
#why a:hover {
	background: transparent url(uploads/images/nav/nav.gif) 0 -50px no-repeat;
}
#residential a:hover {
	background: transparent url(uploads/images/nav/nav.gif) -197px -50px no-repeat;
}
#commercial a:hover {
	background: transparent url(uploads/images/nav/nav.gif) -332px -50px no-repeat;
}
#resources a:hover {
	background: transparent url(uploads/images/nav/nav.gif) -465px -50px no-repeat;
}
#about a:hover {
	background: transparent url(uploads/images/nav/nav.gif) -600px -50px no-repeat;
}
#locate a:hover {
	background: transparent url(uploads/images/nav/nav.gif) -735px -50px no-repeat;
}
/* Current Page level navigation */
#why.currentpage, #why.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) 0 -50px no-repeat;
}
#residential.currentpage, #residential.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) -197px -50px no-repeat;
}
#commercial.currentpage, #commercial.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) -332px -50px no-repeat;
}
#resources.currentpage, #resources.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) -465px -50px no-repeat;
}
#about.currentpage, #about.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) -600px -50px no-repeat;
}
#locate.currentpage, #locate.activeparent {
	background: transparent url(uploads/images/nav/nav.gif) -735px -50px no-repeat;
}
/* End of 'Navigation: Simple - Horizontal' */

/* Start of CMSMS style sheet 'Layout: Left subnav + 1 column' */
@charset "UTF-8";
/********************
BASIC LAYOUT
*********************/
body  {
	font: 12px/17px Arial, Helvetica, sans-serif;
	background: #fff url(uploads/images/bkgds/bg_body.gif) top repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #403d3b;
}

#container { 
	font: 12px/17px Arial, Helvetica, sans-serif;
	width: 920px;
	background: #ffffff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#page { 
	margin: 0 20px; /* sets the white side margins */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

/*** Header ***/
#header { 
	background: #ffffff; 
	height: 100px;
	margin: 0;
	padding: 0 15px;
} 

#logo {
	margin: 0 320px 0 0; /* the right margin on this div element creates space for #constant */
}

#logo h1 {
	font-size: 1px; /* reduced font size will be replaced by an image (the logo) */
	margin: 0;
	padding: 20px 0 15px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#logo h1 a {
	background: #ffffff url(uploads/images/logos/logo_hdr.gif) no-repeat top left; /* set your image here */
	display: block;
	height: 65px;  /* adjust according your image size */
	text-indent: -999em;  /* this hides the text */
	overflow: hidden;
	text-decoration: none;  /* old firefox would have shown underline for the link, this explicitly hides it */
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. */
	padding: 0;
}

#constant {
	float: right; /* since this element is floated, a width must be given */
	width: 300px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 0; 
	height: 18px;
	text-align: right;
} 

#topnav {
	padding: 0;
	margin: 0;
}

#topnav p {
	font-size: 10px;
	line-height: 12px;
	margin: 20px 0 0 0;
	padding: 0;
	text-align: right;
}

#topnav p a, #topnav p a:link, #topnav p a:active, #topnav p a:visited {
	text-decoration: none;
	color: #8c411c; 
}

#topnav p a:hover {
	text-decoration: none;
	color: #be5c19; 
}

#search {
	margin: 25px 0 0 0;
	padding: 0;
}

#m3searchinput {
   background: #fff;
}

div#search form input {
	width: 140px;
	background: url(uploads/images/bkgds/bg_search.gif) top left no-repeat;
	border: none;
	vertical-align: middle;
	height: 18px;
	font-size: 10px;
	color: #80776c;
	margin-right: 0;
	padding: 4px 0 0 5px;
}

div#search form input.submit {
	width: 50px;
	background: #8c411c url(none) !important;
	color: #ffffff;
	height: 22px;
	margin-left: 0;
	padding: 0;
}

/*** Sidebar ***/
#sidebar {
	float: left; /* since this element is floated, a width must be given */
	width: 195px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0;
}

/*** Content ***/
#mainContent { 
	margin: 0 0 0 227px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0;
	text-align: left;
} 

#subContent { 
	margin: 0 0 0 30px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0;
	text-align: left;
} 

/*** Footer ***/
#footer { 
	margin-top: 30px; /* some space between content and footer */
	padding: 0 10px 0 227px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: #8c411c; 
} 

#footer p {
	font-size: 10px;
	color: #cca766;
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

#sitemap, #sitemap ul {
	margin: 0;
	padding: 0;
}

#sitemap ul li {
	margin-left: 20px;
	margin-top: 10px;
	list-style: none;
	font-size: 13px;
	font-weight: bold;
}

#sitemap ul li li {
	margin-top: 6px;
	list-style: square;
	font-size: 13px;
	font-weight: normal;
}

#sitemap ul li li li {
	margin-top: 3px;
	font-size: 12px;
}

#sitemap ul li li li li {
	margin-top: 0;
	list-style: disc;
	font-size: 11px;
}

/********************
GENERAL RULES
*********************/
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
	padding-right: 18px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

img	{
	display: block;
	border: 0;
	}

img.inline	{
	display: inline;
	border: 0;
	}

.hidden { /* this class hides elements from view */
	visibility: hidden;
}

/********************
TYPOGRAPHY
*********************/
p, h1, h2, h3, h4, h5, h6, ul, li {
	text-align: left;
}

p {
    margin: 0 0 12px 0; /* some air around p elements */
    padding: 0 15px 0 0;
}

h1, h2, h3, h4, h5 {
   font-weight: normal; 
}

h1 {
    color: #be5c19;
    font-size: 28px;
    line-height: 32px;
    margin: 0 0 10px 0;
    padding-top: 25px;
}

h2 {
    color: #be5c19;
    font-size: 21px; 
    line-height: 24px;
    margin: 10px 0 5px 0;
}

h3 {
    color: #B55414; 
    font-size: 18px;
    line-height: 21px;
    margin: 10px 0 5px 0;
}


h4 {
    color: #B55414; 
    font-size: 15px;
    line-height: 19px;
    margin: 5px 0 5px 0;
}

h5 {
    color: #83817f;
    font-size: 14px;
    line-height: 18px;
    margin: 5px 0 5px 0;
}

h6 {
    color: #83817f; 
    font-size: 12px;
    line-height: 16px;
    margin: 5px 0 5px 0;
}

blockquote {
    margin-left: 20px;
}

strong, b {
    font-weight: bold; /* explicit setting for these */
}

em, i {
    font-style:italic; /* explicit setting for these */
}

.large {
    font-size: 14px;
}

.small {
    font-size: 10px;
}

.orange {
    color: #be5c19;
}

.texture_sml {
    color: #a07538;
    font-size: 10px;
}

.relational {
	color: #986041;
	text-align: right;
}

.relational img {
	display: inline;
}

.intro {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 1em;
	color: #66615e;
}

.quote {
	font-size: 13px;
	line-height: 18px;
	color: #80592d;
    margin-right: 15px;
	padding: 10px 20px;
	border-top: 2px solid #bf9956;
	border-bottom: 2px solid #bf9956;
}

ol li a {
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
}

.expand  {
	line-height: 16px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.expand a:link, .expand a:visited  {
	font-size: 12px;
	font-weight: normal;
	text-decoration: underline;
}

.city  {
	font-size: 13px;
	font-weight: bold;
	color: #9b1f10;
}

/********************
LINKS
*********************/
a:link, a:visited {
    color: #cf2a15;
	text-decoration: none;
}

a:active, a:hover {
	color: #9b1f10;
	text-decoration: none;
}

/********************
TABLES
*********************/
.swatches { 
	width: 635px; 
} 

.swatches tr td { 
	padding: 0;
	vertical-align: top;
} 

.swatches p { 
	font-size: 11px;
	line-height: 13px;
	margin: 0;
	padding: 4px 6px;
} 

.samples { 
	width: 635px; 
	background: #e8e4e0; 
} 

.samples tr td { 
	padding: 0;
	vertical-align: top;
} 

.samples p { 
	font-size: 12px;
	line-height: 14px;
	margin: 0;
	padding: 0 10px 10px 10px;
} 

.samples h3 {
    color: #403d3b; 
    font-size: 16px;
    line-height: 21px;
    font-weight: normal; 
    margin: 0;
}

.samples h4 {
    color: #B55414; 
    font-size: 14px;
    font-weight: bold; 
    margin: 0;
	padding: 10px 10px 5px 10px;
}

.texture {
    color: #a07538; 
}

.chart { 
	width: 635px; 
} 

.chart tr td { 
	padding: 1px 10px;
	vertical-align: top;
} 

.chart tr.header td {
	vertical-align: middle;
	padding: 1px 10px;
	background: #dec89b;
} 

.header h6 {
	color: #883f0f;
    font-weight: bold;
} 

table.illus { 
	width: 635px; 
	margin-bottom: 10px; 
} 

.illus img { 
	text-align:  center; 
	display: inline; 
} 

.illus p { 
	margin-bottom:  0; 
	padding-bottom: 0; 
} 

.illus td, .illus p, .illus h3, .illus h4, .illus h5, .illus h6 { 
	text-align:  center; 
    line-height: 15px;
	padding: 0; 
} 

.illus p { 
    color: #83817f;
} 

/********************
HOME
*********************/
#homeContent { 
	margin: 0; 
	padding: 0;
} 

#main {
	background: #d9cdc0 url(uploads/images/pho/home.gif) top left no-repeat;
	height: 362px;
} 

#intro {
	float: right; /* since this element is floated, a width must be given */
	width: 248px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 0; 
	height: 362px;
	text-align: right;
} 

/*** Gallery ***/
#gallery {
	margin: 0 278px 0 0;
}

#myGallery {
	width: 602px;
	height: 362px;
	z-index:5;
	display: none;
}

.jdGallery {
	overflow: hidden;
	position: relative;
}

.jdGallery img {
	border: 0;
	margin: 0;
}

.jdGallery .slideElement {
	width: 602px;
	height: 362px;
	background-color: #000;
	background-repeat: no-repeat;
}

.jdGallery .loadingElement {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
}

.jdGallery a {
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

/*** Features ***/
#features {
	width: 880px;
	height: 186px;
	margin: 15px 0 0 0; 
	padding: 0;
}
/* End of 'Layout: Left subnav + 1 column' */

/* Start of CMSMS style sheet 'Navigation: Simple - Vertical mod' */
/* CSS Document */

/* Second level+ navigation 	*/

#menu_vert, #menu_vert ul { 
   list-style: none; 
   margin: 0; 
   padding: 0; 
   width: 100%; 
}


/* Styling the basic appearance of the menu elements */
#menu_vert a { 
   border-bottom: 2px solid #fff; 
   display: block; 
   margin: 0; 
   padding: 10px 7px; 
   color: #883F0F;
   text-decoration: none; 
   background: transparent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

#menu_vert li { 
   background-color: #cca766; 
   min-height:1em; /* Fixes IE7 bug*/
}

/* Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */
#menu_vert li.menuactive { 
   background-color: #dec89b; 
   font-weight: bold;
}

#menu_vert ul ul ul li.menuactive { 
   background-color: #fff; 
   font-weight: bold;
}

/* level indents */
#menu_vert ul ul li {
   font-weight: normal;
}

#menu_vert ul ul a {
   padding: 3px 5px 3px 10px;
}

#menu_vert ul ul ul li {
   background-color: #fff; 
   font-weight: normal;
}

#menu_vert ul ul ul a {
   padding: 2px 5px 2px 20px;
}

#menu_vert ul ul ul ul a {
   padding: 2px 5px 2px 30px;
   background-image: url(uploads/images/nav/dash_right.gif); 
   background-position: 20px 5px; 
   background-repeat: no-repeat; 
}

/* Styling the appearance of the third-level active page elements (shows what page in the menu is being displayed) */
#menu_vert ul ul ul li.menuactive { 
   font-weight: bold;
}

/* Styling the basic appearance of the menuparents - here styled the same on hover (fixes IE bug) */
#menu_vert li.menuparent, 
#menu_vert li.menuparent:hover, 
#menu_vert li.menuparenth { 
   background-image: url(uploads/images/nav/arrow_down.gif); 
   background-position: right 9px; 
   background-repeat: no-repeat; 
}


/* Styling the appearance of menu items on hover */
#menu_vert li:hover, 
#menu_vert li.menuh, 
#menu_vert li.menuparenth, 
#menu_vert li.menuactiveh { 
   background-color: #dec89b; 
}

#menu_vert ul ul ul li. a:hover { 
   font-weight: bold;
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#menu_vert li:hover ul, 
#menu_vert ul li:hover ul, 
#menu_vert ul ul li:hover ul, 
#menu_vert li.menuparenth ul, 
#menu_vert ul li.menuparenth ul, 
#menu_vert ul ul li.menuparenth ul { 
   display: block; 
}

/* IE Hack, will cause the css to not validate */
#menu_vert li, #menu_vert li.menuparenth { _float: left; _height: 1%; }
#menu_vert li a { _height: 1%; }
/* End of 'Navigation: Simple - Vertical mod' */