/*

Updates:
8-28-08 / cw / updated navSub to add Matrix Panel

*/

/*
Colors:
Magenta: 4f6931
Darker: 4f6931
Lighter: e6e7dd

Graphic Type Treatments: (Refer to Source PSDs and Style Guide)
Graphic Buttons: (Refer to Source PSDs and Style Guide)

HTML text:
Body Copy Header: Arial Bold / 14pt (14px screen) / #4f6931
Body Copy: Arial Regular / 12pt (12px screen) / 20 leading (screen CSS adjustment: ) / #000
Link: Arial Bold / 12pt (12px screen) / 20 leading (screen CSS adjustment: ) / #4f6931
*/

/* SEO */

#home-artisan-logo {
    padding: 214px 0 0 0;
    overflow: hidden;
    background-image: url("/img/artisan_logo_home.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:214px;
}

#home-bottom-tag {
    padding: 165px 0 0 0;
    overflow: hidden;
    background-image: url("/img/home_bottom_tag-new.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:165px;
}

#home-bottom-tag2 {
    padding: 165px 0 0 0;
    overflow: hidden;
    background-image: url("/img/home_bottom_tag-wo.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:165px;
}

#artisan-logo {
    padding: 214px 0 0 0;
    overflow: hidden;
    background-image: url("/img/artisan_logo_sub.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:124px;
}

#subtitle-exteriordesign {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_exteriordesign.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-photogallery {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_photogallery.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-duratech {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_duratech.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-dealers {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_dealer_location.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-inthenews {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_inthenews.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-about {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_about_jh.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-contact {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_contact.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-termsconditions {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_termsconditions.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-privacy {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_privacy.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-contact {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_contact.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-install {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_installation_guide.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-warranty {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_warranty.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}


#subtitle-homeowners {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_homeowners.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-dealer {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_dd.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-builder {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_bc.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

#subtitle-architect {
    padding: 75px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtitle_architect.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:75px;
}

/* start: MAIN ELEMENTS */
body {
	margin: 0;
	padding: 0;
	background: #bfbfbf;
	text-align: center;
}
img, p, h1, h2, ul, li, form, table, tr, td {
	margin: 0;
	padding: 0;
}
img {
	display: block;
	/* prevents extra vert space in IE */
}
img.midButton {
	padding-bottom: 10px;
	/* 
	Keeps buttons closer together, vertically, than a p-tag space. 
	Use only on a button image when another button image is under it.
	When it's the last one, put a paragraph space under it: <p>&nbsp;</p>
	*/
}
h1, h2 {
	color: #4f6931;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 14px;
}
h1 {
	font-weight: bold;
	text-transform: uppercase;
}
h2 {
	font-weight: normal;
}

h2.alt {
	padding-top: 3px;
}

h2.faq {
	padding-bottom: 3px;
}

h1#ns {
	display: none;
}
p {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
}
p a         { font-weight: bold; text-decoration: underline; }
p a:link    { color: #4f6931; }
p a:visited { color: #4f6931; }
p a:hover   { color: #666; text-decoration: none; }
p a:active  { color: #666; text-decoration: none; }

p.reqd {
	font-size: 9px;
}

p.deal {
	color:#4f6931;
}

ol {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
}

/* end: MAIN ELEMENTS */


/* start: TOP-LEVEL CONTAINERS */
#media { margin:0 auto;
	padding:0;
	width: 985px;
	height:50px;
	}
	
#wrap {
	margin: 0 auto;
	padding: 0;
	width: 985px;
	border: 0;
	background: #fff url(img/wrap_bg.gif) left top repeat-y;
	text-align: left;
}

/* home page */
#homeLeft {
	margin: 0;
	padding: 0;
	width: 237px;
	float: left;
	background: #4f6931;
}
#homeRight {
	margin: 0;
	padding: 0;
	width: 748px;
	float: right;
	background: #fff;
}
#homeFlash {
	margin: 0;
	padding: 0;
	width: 748px;
	height: 372px;
}
#homeBottom {
	margin: 0;
	padding: 0;
	width: 748px;
	height: 165px;
	background: #e6e7dd;
}
#homeBottom img {
	float: right;
}
/* /home page */

/* sub pages */
#subLeft {
	margin: 0;
	padding: 0;
	width: 237px;
	float: left;
}
#subRight {
	margin: 0;
	padding: 0;
	width: 748px;
	float: right;
}
#srLeft {
	margin: 0;
	padding: 0;
	width: 553px;
	float: left;
}
#srLeft_in {
	margin: 20px auto;
	padding: 0;
	width: 433px;
}
#srRight {
	margin: 0;
	padding: 0;
	width: 195px;
	float: right;
}
#contactHolder, #chLeft, #chRight {
	margin: 0;
	padding: 0;
}
#chLeft {
	width: 205px;
	float: left;
}
#chRight {
	width: 205px;
	float: right;
}
#chTitle {
	margin-bottom: 10px;
	padding-bottom: 3px;
	border-bottom: 2px solid #e6e7dd;
}
table#forms p {
	line-height: 12px;
}

#chLeftAlt {
	width: 300px;
	float: left;
}
#chRightAlt {
	width: 110px;
	float: right;
}
/* form fields are 205 each  */
table#forms td.mid {
  width: 23px;
}
/* /sub pages */

/* footer */
	#footer {
	clear: both;
	margin: 0;
	padding: 0;
}
#footer.main {
background: #bfbfbf;
height:20px;	
}
#footer p {
	margin: 0;
	padding-top: 15px;
	_padding-top: 7px;
	font-size: 10px;
	line-height: 10px;
}
#footer p a         { font-weight: normal; text-decoration: none; }
#footer p a:link    { color: #000; }
#footer p a:visited { color: #000; }
#footer p a:hover   { color: #4f6931; }
#footer p a:active  { color: #4f6931; }
/* /footer */

/* end: TOP-LEVEL CONTAINERS */


/* start: CONTAINERS: SUB-PAGES: MISC */
#dropCap, #dcLeft, #dcRight {
	margin: 0;
	padding: 0;
}
#dropCap {
	width: 433px;
	height: 59px;
	position: relative;
}
#dcLeft {
	width: 51px;
	position: absolute;
	top: 4px;
	left: 0px;
}
#dcRight {
	width: 377px;
	position: absolute;
	top: 0px;
	left: 56px;
}

#srLeft ul {
	list-style-type: square;
	padding-left: 1.5em;
}
#srLeft li p {
	line-height: 18px;
}

#testimonial {
	margin: 0;
	padding: 0;
	background: #e6e7dd;
	border: 20px solid #e6e7dd;
}
#testimonial p {
	color: #4f6931;
	font-weight: bold;
}
/* end: CONTAINERS: SUB-PAGES: MISC */


/* start: NAVIGATION MODULES */

/* left navigation */
#navHolder {
	margin: 0;
	padding: 0;
	width: 237px;
	height: 292px;
	background: #4f6931;
	position: relative;
}
#nav {
	margin: 0;
	padding: 0;
	width: 237px;
	height: 292px;
	position: absolute;
	top: 14px;
	left: 0px;
}
#nav ul {
	list-style: none;
	float: left;
}
#nav li {
	display: table;
}
#nav li a:hover {
	text-decoration: none;
}
#nav li a {
	float: left;
	height: 22px;
}
#nav li a span {
	display: none;
}
#n1, #n2, #n3, #n4, #n5, #n6, #n7, #n8, #n9, #n10 {
	background: #4f6931 url(img/nav.gif) left top no-repeat;
	width: 237px;
	height: 22px;
	padding-bottom: 5px;
}

#n1  { background-position: 0px -16px; }
#n2  { background-position: 0px -43px; }
#n3  { background-position: 0px -70px; }
#n4  { background-position: 0px -97px; }
#n5  { background-position: 0px -124px; }
#n6  { background-position: 0px -151px; }
#n7  { background-position: 0px -178px; }
#n8  { background-position: 0px -205px; }
#n9  { background-position: 0px -232px; }
#n10  { background-position: 0px -259px; }


#n1:hover, #n1:focus, #n1.on { background-position: 0px -308px; }
#n2:hover, #n2:focus, #n2.on { background-position: 0px -335px; }
#n3:hover, #n3:focus, #n3.on { background-position: 0px -362px; }
#n4:hover, #n4:focus, #n4.on { background-position: 0px -389px; }
#n5:hover, #n5:focus, #n5.on { background-position: 0px -416px; }
#n6:hover, #n6:focus, #n6.on { background-position: 0px -443px; }
#n7:hover, #n7:focus, #n7.on { background-position: 0px -470px; }
#n8:hover, #n8:focus, #n8.on { background-position: 0px -497px; }
#n9:hover, #n9:focus, #n9.on { background-position: 0px -524px; }
#n10:hover, #n10:focus, #n10.on { background-position: 0px -551px; }

/* /left navigation */

/* left navigation with sub-links */
/* 
NOTE: 'leftNavSubs' will also sit inside 
the 'navHolder' div, same as the 'nav' div above 
*/
#leftNavSubs { /* ADJUST */
	margin: 0;
	padding: 0;
	width: 237px;
	height: 315px;
	position: absolute;
	top: 14px;
	left: 0px;
}
#leftNavSubs ul {
	list-style: none;
	float: left;
}
#leftNavSubs li {
	display: table;
}
#leftNavSubs li a:hover {
	text-decoration: none;
}
#leftNavSubs li a {
	float: left;
}
#leftNavSubs li a span {
	display: none;
}
#lns1, #lns2, #lns3, #lns5, #lns6, #lns7, #lns8, #lns9, #lns10, #lns11, #lns12, #lns13, #lns14  {
	background: #4f6931 url(img/nav_subs-new2.gif) left top no-repeat;
	width: 237px;
	height: 22px;
	}
	
/*
#lns11 {
	background: #4f6931 url(img/nav_subs.gif) left top no-repeat;
	width: 237px;
	height: 22px;
}
*/

#lns1  { background-position: 0px -16px; }
#lns2  { background-position: 0px -42px; }
#lns3  { background-position: 0px -62px; }
#lns5  { background-position: 0px -82px; }
#lns6  { background-position: 0px -106px; }
#lns7  { background-position: 0px -126px; }
#lns8  { background-position: 0px -146px; }
#lns9  { background-position: 0px -166px; }
#lns10  { background-position: 0px -186px; }
#lns11  { background-position: 0px -206px; }
#lns12  { background-position: 0px -226px; }
#lns13  { background-position: 0px -246px; }
#lns14  { background-position: 0px -266px; }

#lns1:hover, #lns1:focus, #lns1.on { background-position: -236px -16px; }
#lns2:hover, #lns2:focus, #lns2.on { background-position: -236px -42px; }
#lns3:hover, #lns3:focus, #lns3.on { background-position: -236px -62px; }
#lns5:hover, #lns5:focus, #lns5.on { background-position: -236px -82px; }
#lns6:hover, #lns6:focus, #lns6.on { background-position: -236px -106px; }
#lns7:hover, #lns7:focus, #lns7.on { background-position: -236px -126px; }
#lns8:hover, #lns8:focus, #lns8.on { background-position: -236px -146px; }
#lns9:hover, #lns9:focus, #lns9.on { background-position: -236px -166px; }
#lns10:hover, #lns10:focus, #lns10.on { background-position: -236px -186px; }
#lns11:hover, #lns11:focus, #lns11.on { background-position: -236px -206px; }
#lns12:hover, #lns12:focus, #lns12.on { background-position: -236px -226px; }
#lns13:hover, #lns13:focus, #lns13.on { background-position: -236px -246px; }
#lns14:hover, #lns14:focus, #lns14.on { background-position: -236px -266px; }
/* /left navigation with sub-links */

/* subpage top navigation */
#nstHolder, #navSubtop, #navSubtop ul, #navSubtop li {
	margin: 0;
	padding: 0;
}
#nstHolder {
	width: 200px;
	height: 70px;
	position: relative;
}
#navSubtop {
	width: 200px;
	height: 60px;
	position: absolute;
	top: 10px;
	left: 0px;
}
#navSubtop ul {
	list-style: none;
	float: left;
}
#navSubtop li {
	display: table;
}
#navSubtop li a:hover {
	text-decoration: none;
}
#navSubtop li a {
	float: left;
	height: 13px;
}
#navSubtop li a span {
	display: none;
}
#nst1, #nst2, #nst3 {
	background: url(img/nav_subtop2.gif) left top no-repeat;
	width: 200px;
	height: 13px;
}
#nst1, #nst2 {
	padding-bottom: 9px;
}

#nst1  { background-position: 0px -10px; }
#nst2  { background-position: 0px -32px; }
#nst3  { background-position: 0px -54px; }

#nst1:hover, #nst1:focus { background-position: 0px -76px; }
#nst2:hover, #nst2:focus { background-position: 0px -98px; }
#nst3:hover, #nst3:focus { background-position: 0px -120px; }
/* /subpage top navigation */

/* home right navigation */
#rightNav {
	margin: 0;
	padding: 0;
	width: 748px;
	height: 42px;
}
#rightNav ul  {
	list-style: none;
	float: left;
}
#rightNav li {
	display: inline;
}
#rightNav li a {
	float: left;
	height: 42px;
}
#rightNav li a span {
	display: none;
}
#rightNav li a:hover {
	text-decoration: none;
}
#rn1, #rn2, #rn3, #rn4 {
	background: url(img/nav_right.gif) left top no-repeat;
}
#rn1 { background-position:    0px 0px; width: 186px }
#rn2 { background-position: -186px 0px; width: 188px }
#rn3 { background-position: -374px 0px; width: 187px }
#rn4 { background-position: -561px 0px; width: 187px }
#rn1:hover, #rn1:focus { background-position:    0px  -42px; }
#rn2:hover, #rn2:focus { background-position: -186px  -84px; }
#rn3:hover, #rn3:focus { background-position: -374px -126px; }
#rn4:hover, #rn4:focus { background-position: -561px -168px; }
/* /home right navigation */
/* end: NAVIGATION MODULES */


/* start: PHOTO GALLERY */
/* photo gallery is wider than regular content */
#srLeft_gallery {
	margin: 20px auto;
	padding: 0;
	width: 513px;
}
#gallery {
	margin: 0;
	padding: 10px;
	border: 5px solid #e6e7dd;
	background: #fff;
}
#videoHolder {
	margin: 0;
	padding: 0;
}


/* OLD: gallery navigation */
#galleryNav {
	position: relative;
	margin: 0;
	padding: 0;
	width: 513px;
	height: 30px;
	background: #fff;
}
#galleryNav ul  {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#galleryNav li {
	margin: 0;
	padding: 0;
	display: inline;
}
#galleryNav li a {
	float: left;
	height: 30px;
}
#galleryNav li a span {
	display: none;
}
#galleryNav li a:hover {
	text-decoration: none;
}
#gn1, #gn2, #gn3, #gn4, #gn5 {
	margin: 0;
	padding: 0;
	background: url(img/gallery_nav.gif) left top no-repeat;
}
#gn3 {
	margin-right: 80px;
}
#gn1 { background-position:    0px 0px; width:  85px }
#gn2 { background-position:  -85px 0px; width:  78px }
#gn3 { background-position: -163px 0px; width:  90px }
#gn4 { background-position: -333px 0px; width: 100px }
#gn5 { background-position: -433px 0px; width:  80px }

#gn1:hover, #gn1:focus { background-position:    0px  -30px; }
#gn2:hover, #gn2:focus { background-position:  -85px  -60px; }
#gn3:hover, #gn3:focus { background-position: -163px  -90px; }
#gn4:hover, #gn4:focus { background-position: -333px -120px; }
#gn5:hover, #gn5:focus { background-position: -433px -150px; }
*/


/* changes to photo gallery navigation CSS */
#galleryNav {
	position: relative;
	margin: 0;
	padding: 0;
	width: 513px;
	height: 30px;
	background: #fff;
}

/* NEW */
#gnLeft {
	position: absolute;
	margin: 0; padding: 0;
   top: 0px; left: 0px;
	width: 333px;
	height: 30px;
}
#gnRight {
	position: absolute;
	margin: 0; padding: 0;
   top: 0px; left: 333px;
	width: 180px;
	height: 30px;
}
/* NEW */

#gnRight ul  {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#gnRight li {
	margin: 0;
	padding: 0;
	display: inline;
}
#gnRight li a {
	float: left;
	height: 30px;
}
#gnRight li a span {
	display: none;
}
#gnRight li a:hover {
	text-decoration: none;
}
#gn4, #gn5 {
	margin: 0;
	padding: 0;
	background: url(/img/gallery_nav.gif) left top no-repeat;
}

#gn4 { background-position: -333px 0px; width: 100px }
#gn5 { background-position: -433px 0px; width:  80px }

#gn4:hover, #gn4:focus { background-position: -333px -120px; }
#gn5:hover, #gn5:focus { background-position: -433px -150px; }
/* END: changes to photo gallery navigation CSS */

.ddgallery {
	width: 300px;
	margin: 7px 0 auto 15px;
	padding: 2px;
	background-color: #fff;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}

#galleryContainer { position: relative; width: 483px; height: 440px; }
#galleryText { position: absolute; background:#e6e7dd; top: 400px; left: 0px; width: 483px; height:25px; font-weight: bold; filter: alpha(opacity=80); opacity: .70; text-align:right; }
p.text {color: #4f6931; margin-right:20px; margin-top:4px;}


/* start: FORMS */
#fieldOne {
	width: 205px;
	margin: 2px 0 8px 0;
	padding: 2px;
	background-color: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}
#fieldTwo {
	width: 433px;
	height: 120px;
	margin: 2px 0 8px 0;
	padding: 2px;
	background-color: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}
#dd {
	width: 205px;
	margin: 2px 0 8px 0;
	padding: 2px;
	background-color: #fff;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}

#jumpMenu {
	width: 205px;
	margin: 2px 0 8px 0;
	padding: 2px;
	background-color: #fff;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}


#dd2 {
	width: 430px;
	margin: 2px 0 8px 0;
	padding: 2px;
	background-color: #fff;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #4f6931;
}

/* end: FORMS */


/*
.login {
	width: 180px;
	padding: 2px;
	background-color: #fff;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 10px; 
	font-weight: normal;
	border: 1px solid #5a5824;
}
.loginOne {
	margin: 5px 0 0 0;	
}
.loginTwo {
	margin: 2px 0 0 0;	
}
.button {
	margin: 5px 0 0 0;	
}
*/