/* letters and mounument vally */
/*
Page Container layout:
   
body
	div#wrap
		div#pageBody
			div#header
				div#headerWrap
					div#headerLogo
					div#headerRight
						div.headerLinks
				div#topNavigation
				div#subNavigation
				div#search
				div#breadcrumb
			div#main.threeColumn
				div#column1
					div#sidebarheader
					div#leftNavigation
						ul.level1

				div#column2
					div#grayBoxRight
						div#column2_module1
											
				div#column3
					div#blueBoxRight
						div#column4_module1

				div#column4
					div.hdrTxt2

			div#footer
				div#footerBrd1
				div#footerBrd2
				div#footerBrd3
				div#footerNav
				div.footerCopyrt


					
Column Widths

767 = 1 + 765 + 1 (grey border on sides of header & content section)
765 = 1 + 763 + 1 (white border on sides of content section)

1 column
763

2 columns (product detail, search results, product list)
763 = 170 + 5 + 588

3 columns
763 = 170 + 423 + 170

763 = 170 + 5 + //211 + 5 + 386

4 columns
763 = 170 + 5 + //211 + 5 + 211 + 5 + 170
				
*/

/* Font Definitions */
body { font-family: verdana; font-size: .8em }

div,h,p,ul,li,a,table,td,dl,pre,code { font-family: verdana }

#headerLogo a { font-family: "times new roman"; font-size: 3em; font-weight: bold; font-style: italic; color: firebrick; text-decoration: none }
#headerLogo a:hover { color: red }

#headerRight { color: firebrick; font-weight: bold; }
.headerLinks { color: firebrick; font-size: .8em; font-weight: bold; }
.headerLinks a:link { color: firebrick; text-decoration: none }
.headerLinks a:visited { color: firebrick; text-decoration: none }
.headerLinks a:hover { color: red; text-decoration: none }

#column1 #leftNavigation { font-size: 1em }

#leftNavigation a { text-decoration: none; display: block; font-weight: bold; font-size: 1.5em }
#leftNavigation a:link { color: darkblue }
#leftNavigation a:visited { color: darkblue; }
#leftNavigation a:hover { color: purple; }
#leftNavigation a.active_lnk { color: #blue; font-weight: bold; }

#column1 #rightNavigation { font-size: 1em }

#rightNavigation a { text-decoration: none; display: block; font-weight: bold; font-size: 1.5em }
#rightNavigation a:link { color: gold }
#rightNavigation a:visited { color: gold }
#rightNavigation a:hover { color: silver }
#rightNavigation a.active_lnk { color: silver; font-weight: bold; }

#footer { color: firebrick; font-size: .8em; }
.footerNav { color: firebrick; }
.footerNav a:link { color: firebrick; text-decoration: none }
.footerNav a:visited { color: firebrick; text-decoration: none }
.footerNav a:hover { color: red; text-decoration: none }

.footerCopyrt { font-size: .9em }

.siteLinks a:link { color: firebrick; text-decoration: none }
.siteLinks a:visited { color: firebrick; text-decoration: none }
.siteLinks a:hover { color: #cc6600; text-decoration: none }

.topLinks a:link { color: firebrick; text-decoration: none }
.topLinks a:visited { color: firebrick; text-decoration: none }
.topLinks a:hover { color: #cc6600; text-decoration: none }

.zoomLinks a:link { color: #000 }
.zoomLinks a:visited { color: #000 }
.zoomLinks a:hover { color: #cc6600 }


/*-----------------------------------------------------*/

body {
  background: #D66F34 url(../images/bison.jpg) ;
  padding: 6px 0 0 0; 
  /* auto center - L & R marigns: auto, set min width, center text to fix IE */
  margin:0 auto 10px auto; 
  text-align: center;  
  min-width: 767px;
}

form { margin: 0; padding: 0 }
select { width: 166px; font-family: verdana; }
select.wideSelect { width: 200px; font-family: verdana; }

/* Layout Containers */
#wrap { 
  width: 765px;
  text-align: left; /* counter-acts body centering for IE */
  margin: 0 auto 0 auto; /* mozilla & opera need auto L & R for centering */
  background-color: #fff;
  border-top: 1px solid silver; 
  border-left: 1px solid silver; 
  border-right: 1px solid silver;
}
#pageBody { 
  height: 100%; 
  text-align: left; 
  margin-left: 0; 
  padding: 0; 
}

#header { width: 100%; background-color: moccasin; /*border-bottom: 1px solid #174ca8*/ }

#headerWrap { width: 100%; height: 56px; margin: 0 auto 0 auto; text-align: center; position: relative; }

#headerLogo { width: 520px; margin: .5em 0 0 1em; text-align: left; position: relative; text-align: left; position: relative; float: left}
#headerRight { position: relative; float: right; width: 210px; text-align: right; }

.headerLinks { padding: 6px 10px 4px 0 }

#topNav { height: 101px; width: 100%; background: #fff; border-top: 2px solid gold; border-bottom: 2px solid yellow; text-align: center; }
#topNav ul { list-style: none; margin: 0 auto 0 auto; padding: 0; width: 720px }
#topNav li { width: 134px; height: 101px; background: url(../images/buckle_btn_134.jpg); margin: 0 5px 0 5px; float: left; text-align: center; }
#topNav li a { width: 134px; height: 101px; line-height: 101px; font-size: .9em; color: firebrick; text-decoration: none;  display: block; font-weight: bold; }
#topNav li a:hover { color: #cc6600 }

#subNav { height: 18px; width: 100%; border-bottom: 2px solid gold; text-align: center;	background-color: gold; 
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=yellow, EndColorStr=gold); 
}
#subNav ul { list-style: none; margin: 0 auto 0 auto; padding: 0; width: /*475px*/ 570px }
#subNav li { width: 84px; height: 18px; margin: 0 5px 0 5px; float: left; text-align: center; }
#subNav li a { width:84px; height: 18px; line-height: 18px; font-size: .9em; color: firebrick; text-decoration: none;  display: block; font-weight: bold; }
#subNav li a:hover { color: #996600; background: #F4E084 }

#main { background-color: #fff; height: 100%; border-right: 1px solid #fff; border-bottom: 4px solid #fff; border-left: 1px solid #fff; clear: both; }

.offset.threeColumn { padding: 0 170px 0 170px; }
.offset.oneColumn { padding: 0; }

#footer { display: block; height: 40px; background-color: #DBB271; text-align: center; margin: 0 1px 0 1px; clear: both }

/* oneColumn liquid column3 */
.oneColumn #column1 { display: none }
.oneColumn #column3 { width: 100%; display: block; text-align: center; background-color: #fff; float: left; }
.oneColumn #column4 { display: none }

/* threeColumn liquid column3 */
.threeColumn #column1 { width: 170px; margin-left: -170px; background: #fff; float: left }

.threeColumn #column3 { width: 100%; display: block; text-align: center; background-color: #fff; float: left; }
.threeColumn .mainFeatureWrap { display: block }

#mainFeatureHead { font-size: 3.5em; color: #3399ff; font-weight: bold; height: 66px; }
#mainFeatureImage { border: 14px outset purple; width: 282px; height: 250px; margin: 0 auto 0 auto }

#welcomeWrap { margin: 4px 0 4px 0; background-color: #ccffcc }
.welcomeHead { color: red; font-size: 3em; font-weight: bold; }
.welcomeBody { color: red; font-size: 2em; }

.threeColumn #column4 { width: 170px; margin-right: -170px; text-align: center; background: #fff; float: left }

.grayBoxRight { text-align: right; background-color: #eaeaea }
.blueBoxRight { text-align: right; background-color: #ecf6ff }

.footerNav { padding: 4px 0 6px 0; }
.footerCopyrt { margin-bottom: 8px }

/* Class and ID Selectors - All elements except layout containers */

#leftNavigation {
  background-color: pink;
  width: 170px;
}
#leftNavigation ul { list-style: none; margin: 0; padding: 0; }
#leftNavigation li { margin: 2px 2px 2px 2px; display: block; }
#leftNavigation a { background-color: white; width: 150px; display: block; padding: 2px 0 2px 16px }

#rightNavigation {
  background-color: gold;
  width: 170px;
}
#rightNavigation ul { list-style: none; margin: 0; padding: 0; }
#rightNavigation li { margin: 2px 2px 2px 2px; }
#rightNavigation a { background-color: #336666; width: 166px; display: block; padding: 2px 0 2px 0px }

.spc2 { height: 2px; font-size: 2px; clear: both }
.spc4 { height: 4px; font-size: 4px; clear: both }
.spc6 { height: 6px; font-size: 6px; clear: both }
.spc8 { height: 8px; font-size: 8px; clear: both }
.spc10 { height: 10px; font-size: 10px; clear: both }
.vert4pad { margin: 4px 0; }
.bottom4pad { margin-bottom: 4px; }
.bottom8pad { margin-bottom: 8px; }
.clearMe { clear: both }
.font8 { font-size: .8em }
.font9 { font-size: .9em }
.textLeft { text-align: left }
.textCenter { text-align: center }
.textRight { text-align: right }
.floatLeft { float: left }
.floatRight { float: right }
.margin4 { margin: 4px }
.margin8 { margin: 8px } 
.padLR4 { padding: 0 4px 0 4px }
.padR4 { padding: 0 4px 0 0 }
.bgBrownRed { width: 100%; background-color: #6A2721; 
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#C3524F, EndColorStr=#6A2721);  
}
.bgFirebrick { width: 100%; background-color: firebrick; 
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#C66060, EndColorStr=firebrick);  
}
.bgLtBrown { width: 100%; background-color: #B63936; 
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#C46462, EndColorStr=#B63936);  
}
.bgBronze { width: 100%; background-color: #99723B; 
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#BA9766, EndColorStr=#99723B);  
}

.seeMore { margin-top: 3px }
.seeMore a:link { color: #99723B; text-decoration: none }
.seeMore a:visited { color: #99723B; text-decoration: none }
.seeMore a:hover { color: firebrick; text-decoration: none }
.price { color: red; font-size: 14px; font-weight: bold }
.quantInput { text-align: right; font-size: .9em; width: 15px }
.addInputs { padding-right: 90px; }
.addBtn { background: firebrick; width: 78px; font-size: .9em; font-weight: bold; color: #eaeaea; cursor: pointer }

/*
4 + 156 + 4 + 175 = 339
275 + 112 = 387

147 + 240 = 387
4+ 146 + 4 + 185 = 339
*/
#r1c1 { width: 349px; height: 170px; margin: 2px 2px 4px 3px; float: left; text-align: left; 
border-right: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver
}
#r1c2 { width: 400px; height: 170px; margin: 2px 3px 4px 2px; float: left; text-align: left; 
border-right: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver
}

#r2c1 { width: 400px; height: 180px; margin: 4px 2px 2px 3px; float: left; text-align: left; 
border-right: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver
}
#r2c2 { width: 349px; height: 180px; margin: 4px 3px 2px 2px; float: left; text-align: left; 
border-right: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver
}

#heading22 { color: #fff; /*background: #6A2721;*/ text-align: left; line-height: 22px; font-weight: bold; text-indent: 8px }
.headerList { text-align: center; color: #cc6600; font-size: 1.7em; font-weight: bold }
.infoHeading { color: red; font-weight: bold; font-size: 1.5em; margin-bottom: 4px }

/* Page/Module Specific Styles */
.badgeLinks { width: 270px; text-align: left; font-size: .9em }
.listWrap640 { width: 640px; margin: 0 auto 0 auto }
.ques { font-weight: bold }
.badgeInfo { background: #f3eee2; font-size: .85em; padding: 4px 8px 4px 8px }
ol ol li { list-style-type: lower-alpha }

.listWrap749 { width: 749px; padding: 0 6px 0 6px }
.wrap729 { width: 729px; padding: 0 16px 0 16px; margin: 16px 0 16px 0 }
ol ol li { list-style-type: lower-alpha }

.listBlock { width: 749px; margin: 2px 0 4px 0; float: left; text-align: left; 
border-right: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver
}

.listBlockSimp { width: 749px; margin: 2px 0 4px 0; float: left; text-align: left }

.favLinks { margin: 6px 0 6px 0 }

.helpHead { font-size: 14px; font-weight: bold; color: #cc2721 }
.helpBlock { padding: 10px }

.letter {
	margin: 0 3px;
	padding: 3px 3px 0 3px;
}