@charset "UTF-8";
/* CSS Document

Master Style Sheet for University Products

version:		1.0
author:			derek allard
email:			derek@tunnel7.com
website:		http://www.tunnel7.com

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

NOTE: I like to define my sections at the top here so I know what they are.  I can then search the stylesheet for these words to jump to the specific section.  The sections here match up to the work we did on Friday.

SECTIONS
   GLOBAL
   HEADER
   NAVIGATION
   MAIN BODY
   FOOTER
   FORMS
   TABLES
 
COLORS
   Body Background:       #fff
   Main Text:             #666666
   Links:                 #333333
   Brown:                 #996633
   Lines:                 #666666
   Stripe:                #666666
*/
/* ======= GLOBAL STYLES ======= 62.5% */


body {
	font: normal 11px arial, helvetica, sans-serif; /* SETS TO 10PX */
	background: url(../i/bkgr_horiz.gif) repeat-y fixed center center;
	color: #666666;
	margin-bottom: 50px;
}

#wrap {
	width:780px; 
	margin:0 auto;
}


h1 {
	width: 310px;
	}

h2 {
	font-size: 18px;
	color: #996633;
	text-transform: uppercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	text-indent: 20px;
	letter-spacing: 2px;
	padding-bottom: 4px;
	border-bottom: 1px solid #666666; 
	margin: 0 auto;
	/* width: 740px; */
}

#track h2 { /* for track order page */
	width: 740px;
	margin-bottom: 20px;
}

#other h2 { /* to have widths span the entire page and add some margin below - idea is to affect non home / cat / product pages (track order and all) */
	width: 740px;
	margin-bottom: 1em;
}

h3 {
	font: bolder 12px Arial, Helvetica, sans-serif;
	color: #996633;
	text-transform: capitalize;
}

h4 {
	font: bolder 12px Arial, Helvetica, sans-serif;
	color: #ccc;
	padding-top: 15px;
	
}

h5 {
	font: italic 11px Arial, Helvetica, sans-serif;
	color: #996633;
	text-transform: none;
}

h6 {
	/*
	width: 340px; 
	margin: 0 auto;
	margin-top: 25px;
	padding-bottom: 5px;
	*/
	text-indent: -5000px;
	display: block;
	background: url(../i/upifooter.gif) no-repeat;
	width: 340px; 
	margin: 0 auto;
	margin-top: 25px;
	padding-bottom: 5px;
}

a:link, a:visited {
	text-decoration: none;
	color: #666666;
}

a:hover, a:active {
	color: #996633;
}

.bold { 
	font-weight: bold;
}
 
#accessnav { 
	display: none;  
}

.pagination {
width: 200px;
float: right;
margin-right: 15px;
text-align: right;
padding: 5px 0;
}

/* ======= HEADER STYLES ======= */

#head { 
	width: 780px;
 	float: left;
	
}

#head #logo { 
	float: left;
	padding-bottom: 10px;
	padding-left: 3px;
}

#head #metanav {  
	width: 420px;
	float: right;
	padding: 10px 8px 10px 0; /* DECLARE ALL VALUES FOR PADDING IN ONE STATEMENT.  ORDER IS TOP, RIGHT, BOTTOM, LEFT (CLOCKWISE) */ 
	text-align: right;
}

#head #metanav ul li { 
	display: inline; 
}

#metanav li, #metanav p {
	line-height: 17px;
	text-align: right; 
}
#head #metanav p.phone {
color: #996633;
}

/* ======= NAVIGATION STYLES =======

 */	
#nav {
	width: 780px;
	background-color: #a7aaac; /* set this to quick order gray so there are no issues cross broswer at the end of the nav bar */
	float: left;
	border-bottom: 11px solid #996633;
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* width: auto;  IN IE6 THIS WAS CAUSING EACH NAV ITEM TO SPAN THE FULL WIDTH*/
	width: 100px;
	float: left;
	font-weight: normal;
	border-right: 1px solid #666;
}

/* setting specific widths for each ul so IE6 renders consistently */ 

#nav ul.pp { /* product photos */
	width: 75px; 
}

#nav ul.as { /* archival storage */
	width: 73px;
}

#nav ul.cm { /* conservation materials */
	width: 102px;
}

#nav ul.et { /* equipment and tools */
	width: 76px;
}

#nav ul.lp { /* library products */
	width: 75px;
}

#nav ul.ef { /* exhibit furniture */
	width: 75px;
}

#nav ul.cs { /* collectors storage */
	width: 89px;
}

#nav ul.np { /* new products */
	width: 78px;
}

#nav ul.so { /* special offers */
	width: 66px;
}

#nav ul.qo { /* quick order */
	width: 61px;
	border-right: none;
}

#nav a { /* background color, padding, etc of main buttons set here */
	font: normal 11px/16px arial, helvetica, sans-serif;
	display: block; 
	margin: 0;
	padding: 7px;
	color: #fff;
	background: #333;
	text-decoration: none; 
}

#nav a:hover {
	color: #fff;
	background: #666;
}
 
#nav ul.qo a, #nav ul.qo a:hover { /* for quick order gray */
	background-color: #a7aaac;
	font-size: 12px;
	padding: 7px 0px 6px 9px;
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
}

#nav li {
	position: relative; 
}

#nav ul li a { /* sets all nav fonts to normal weight to ensure cross-broswer compatibility */
	font-weight: normal;
}

#nav ul ul {
	position: absolute;
	z-index: 500;
	left: -1px;
	border: 1px solid #a7aaac;
	width: 150px; /* sets the width for all dropdown menus to ensure consistency cross-browser */
}

#nav ul ul a { /* background color, padding, etc of drop down menus (overriding main buttons) set here 
before was: font-weight: bold;
*/
	
	margin: 0;
	padding: 3px 7px;
	color: #666666;
	background: #fff;
	text-decoration: none;
}

#nav ul ul a:hover {
	color: #996633;
	background: #E7E7E7;
}

div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul {
	display: none;
}

div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul {
	display: block;
}


/* ======= MAIN BODY STYLES ======= */
#main {
	width: 740px; /* 780  - 40 (left and right padding) */
	float: left;
	padding: 20px 20px 40px 20px;
	font-size: 12px;
}
/* NOTE: Within this section there will be subsections for the different pages.  I recommend setting styles primarily in the main body styles that will be used across the site.  Use the specific sections below only for those items that require different styling based on their page. */

#catpage #main {
	width: 780px;
	padding: 0;
}

#other #catpage #main { /* overrides definition above on body id's now set to other */
	width: 740px; /* 780  - 40 (left and right padding) */
	float: left;
	padding: 20px 20px 40px 20px;
	font-size: 12px;
}

	
/* Example of targeting an element based on it's position within a containing div */
#main #left {

}

	/* ======= home page styles ======= */
	
	
	#home #main {
		padding: 0; 
		width: 780px;
		font-size: 10px;
	}

	#home #main #sales {
		float: right;
	}

	#home #main #movie {
	float: left;
	width: 578px;
	padding: 5px 0 5px 5px; /* THESE WILL NEED FINE TUNING BUT FORMAT IS HERE */
	z-index: 5;
	}
	
	#home #main #sales {
	width: 187px;
	padding: 5px;
}

	#home #main #sales img {
	padding: 0;
	}
	
	#home #main #featured {
	float: left;
	width: 770px;
	border-top: 1px solid #666666;
	padding: 5px 0px 25px;
	margin: 0px 5px;
	}

	#home #main #featured .box {
	width: 185px;
	padding: 0px 4px;
	border-right: 1px solid #666666;
	float: left;
	height: 210px;
	
	}
	
	#home #main #featured .boxFirst {
	width: 185px;
	padding-right: 4px;
	float: left;
	border-right: 1px solid #666666;
	height: 210px;
	}
	
	#home #main #featured .boxFirst { /* this overrides the previous declaration - this one used as workaround for php code that isn't working to generate unique box classes */
	width: 185px;
	padding: 0;
	margin-right: 3px;
	margin-left: 4px;
	float: left;
	border-right: none;
	height: 210px;
	}

	#home #main #featured .boxLast {
	width: 185px;
	padding-left: 5px;
	float: left;
	height: 210px;
	}

	#featured .box dd, #featured .boxFirst dd, #featured .boxLast dd {
		width: 185px; 
		text-align: center;
	}

	/* ======= contact page styles ======= */

#contact h2.left {
	width: 240px;
	border-bottom: 1px solid #666666;
	float: left;
	}
	#contact h2.right {
	width: 500px;
	border-bottom: 1px solid #666666;
	float: left;
	}
	#contact #left {
	float: left;
	text-align: left;
	list-style-type: none;
	width: 220px;
	padding: 17px 0px 0px 20px;
	margin: 10px 0px 40px 0px;
	}
	#contact #right {
	float: left;
	border-left: 1px solid #666666;
	min-height: 500px;
	margin-top: 10px;
	padding: 10px 0px 0px 10px;
	width: 487px;
	}
	#contact #left ul {padding-bottom: 12px;
	}
	#contact #left h3 {padding-bottom: 4px;
	}
	/* ======= request page styles ======= */

#request h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
		text-indent: 30px;
	}

	#request h3 {
		padding-left: 30px;
	}
 
	#request #left {
		float: left;
		width: 380px;
		border-right: 1px solid #666666;
		padding-top: 20px;
		margin-top: 10px;
	 }
	 
	#request #right {
		width: 250px;
		float: left;
		padding: 20px;  
		margin-top: 10px;
	 }
	
#request #right p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #666666;  
		margin-top: 1em;
	}
	
	#request .errors {
		margin-bottom: 5px;
	}
	
	/* ======= bid and quote styles ======= */

		#bid h2 {
		border-bottom: 1px solid #666666;
		}
		
		#bid h3 {
				text-align: left;
				}
		#bid #bidquote {
			padding: 20px 9px 0px 20px;
			}
			
		#bid #bidquote ul {padding-bottom: 10px;
			}
			
		#bid #bidquote .errors {
			text-align: left;
			width: 100%;
			margin-bottom: 5px;
		}


		/* styles specific for the ship to same as contact checkbox and text */

		#bid #shipTo { 
			text-align: left;
		}

		#bid #shipTo h3 {
			display: inline;
		}

		#bid #main #shipTo p {
			padding-bottom: 0;
			margin-left: 10px;
			display: inline; 
			
		}

		#bid form #shipTo p input {
			 width: auto;
			 padding: 0;
			 margin: 0;
		}

		#bid #shipTo p label { 
			margin-left: 5px;
		}
		
		/* ======= cart styles ======= */
		
		td.fieldname { /* gives space on track order page between label and form field */
			padding-right: 10px;
		}
		

	/* ======= RESOURCES styles ======= */

		
		#resource .arrowup {
		position: relative;
		left: -15px;
		}
		#resource a.arrowup{
	font-weight: normal;
		}
		
			#resource #glossary p {
		padding-top: 5px;
		}
		
		
		#resource h3 {
		text-align: left;
	
				}
				
		#resource #howto, #resource #proforg, #resource #glossary {
		float: left;
		width: 700px;
			padding: 10px 9px 0px 20px;
			}
		
		#resource #howto h3, #resource #proforg h3 {
		font-size: 12px;
		padding-bottom: 5px;
		}
			
			
		#resource #howto a, #resource #proforg a, #resource #glossary a {
	text-decoration: none;
	font-weight: bold;
		}
		
		#resource #howto p, #resource #proforg p {
		padding-bottom: 5px;
		}

#resource ul.links {
	float: left;
	width: 700px;
	padding: 10px 20px;
	font: bolder 11px Arial, Helvetica, sans-serif; 
	color: #996633;
	text-transform: capitalize;
	list-style-type: none;
}
#resource ul.links li {
	display: inline;
	}
	
	#resource #howto .textleft {
	float: left;
	width: 329px;
	margin-right: 20px;}	
	
	#resource #resourcehead {
width: 298px;
float: left;
padding-bottom: 10px;
}
	
#resource #glossary #alphabet {
float: left;
width: 400px;
padding-bottom: 10px;
}

#resource #glossary  #alphabet a {
	text-decoration: underline;
	font-weight: bold;
	color: #996633;
		}
#resource h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
	}
	
#resource #glossary h2 {
	color: #996633;
	width: 710px;
	text-transform: uppercase;
	font: bold 14px Arial, Helvetica, sans-serif;
	text-indent: 0px;
	padding: 2px 0px;
	margin-bottom: 5px;
	margin-top: 10px;
	text-indent: 40px;
	border-bottom: 1px solid #666666;
		}
		
		#resource #glossary h3.gray {
	color: #666666;
	}
#resource #glossary dt.term {
	float: left;
	font-size: 12px;
	padding-left: 40px;
	padding-right: 2px;
	color: #996633;
	font-weight: bold;
		}
#resource #glossary dd {
	padding-left: 40px;
	padding-bottom: 5px;
	}
	
	/* ======= checkout ======= */
	
	#checkout h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
	}
	
	#checkout #steps {
	width: 740px;
	background-color: #C5C8CA;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
	color: #666666;
	} 

#checkout ul#steps {
	list-style: none;
	margin: 0;
	padding: 4px 0;

	}
	
	#checkout #steps li {
	display: inline;
	padding: 4px 13px;
	}
	
	#checkout #steps li.active {
	background-color: #666666;
	color:#FFFFFF;
		font-weight: bold;
	}
	
	
	
	
	#checkout #form h3 {
		font-size: 12px;
		padding-bottom: 5px;
		text-align: left;
		}
		
	#checkout #form {
		float: left;
		width: 710px;
		padding: 10px 8px 0px 20px;
			}
		
	table.viewSubtotal { /* positions the subtotal on the view cart page so that it isn't under the delete icon */ 
		margin-right: 72px;
	}
	
			
		/* ======= customer service, privacy policy styles, international customers, about us ======= */
		

#custservice h2, #ppolicy h2, #intcustomer h2, #aboutus h2 {
		border-bottom: 1px solid #666666;
		width: 740px; 
		margin: 0 auto; 
	}
	
	
#custservice #faq, #ppolicy #faq, #intcustomer #faq, #aboutus #faq {
		width: 710px;
		padding: 10px 9px 0px 20px;
			}
			
#custservice #faq h3, #ppolicy #faq h3, #intcustomer #faq h3 {
		font-size: 12px;
		padding-bottom: 5px;
		}
		
#custserice #faq .textleft, #ppolicy #faq .textleft {
	width: 700px;
	margin-right: 20px;}	
			
			
		#custservice #faq a, #ppolicy #faq a, #intcustomer #faq a, #wholesale #main a, #aboutus #faq a {
	text-decoration: none;
	font-weight: bold;
		}
		
		#custservice #faq p, #ppolicy #faq p, #intcustomer #faq p, #aboutus #faq p {
		padding-bottom: 5px;
		}
		
		#custservice #faqanswers h3, #ppolicy #faqanswers h3, #intcustomer #faqanswers h3 {
				padding-top: 10px;
		}
		
	#custservice .arrowup, #ppolicy .arrowup {
		position: relative;
		left: -15px;
		}
		#custservice a.arrowup, #ppolicy a.arrowup {
	font-weight: normal;
		}
		
		#wholesale #catalog1, #wholesale #catalog2 {
		width: 340px;
		float: left;
		text-align: center;
		padding: 10px 0px 0px 10px;
		}
		
			#aboutus #faq #scott {
		float: left;
		padding-right: 10px;
		padding-bottom: 5px;
		}
		
				#aboutus #faq #building {
		float: right;
		padding-left: 10px;
		padding-top: 5px;
		}
	
	/* ======= quick order styles ======= */
	
	#quick h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
		text-indent: 30px;
		}
		 
	#quick #quickform {
		 padding: 20px;
		 }
		 
	#quick #quickform #main p{
		text-align: left;
		line-height: 16px;
		
		}
	#quick #quickform fieldset {
	border: 1px solid #CCCCCC;
	padding: 5px 0px 5px 10px;
	margin-bottom: 10px;
	}
	
	/* ======= category page styles ======= */

#catpage #category p{
		font-size: 12px;
	}
	
	#catpage #category p a.readmore{
		font-size: 10px;
		font-weight: bold;
		text-transform: uppercase;
	}

#catpage #subnav ul {
		padding-top: 5px; 
		margin-left: 5px; 
		list-style-position: outside;
	}
	
#catpage #subnav ul li {  
		margin-top: 5px;
		border-left: 1px solid #fff; /* border is here as a bug fix for IE browsers - they weren't displaying the arrow if the link wrapped onto second line - for some reason this fixes it */
	}
  
	
#catpage #subnav, #catpage #refine {
		float: left;
		width: 170px;
		padding-right: 10px;
	}

#catpage #refine p { /* adds spacing around the "there are no more refinements" message */
	margin: 10px 5px 0 10px;
}

#catpage #subnav ul li, #catpage #refine ul li {
		font-size: 11px;
		font-weight: normal;
		line-height: 12px;
		text-indent: 0; 
		padding-bottom: 2px;
		padding-left: 14px; 
	}
	

#catpage #subnav .selected {
	background: url(../secure/images/arrow.gif) no-repeat 0 2px;
}

#catpage #subnav .selected a {
	color: #996633;
	text-decoration: underline;
	font-weight: bold;
}

		
#catpage #subnav h3, #catpage #refine h3{
		width: 160px;
		color: #666666;
		font-size: 13px;
		font-weight: normal;
		padding: 15px 0px 15px 20px;
		text-indent: 0px;  
		border-bottom: 1px solid #ccc;
		text-transform: uppercase;
	}
	
#catpage #subnav ul li:hover, #catpage #refine ul li:hover {
		background: url(../i/arrow.gif) no-repeat 0 2px; 
	}
  
div#subnav ul ul,
div#subnav ul li:hover ul ul,
div#subnav ul ul li:hover ul ul {
		display: none;
	}

	
#catpage #refine ul { 
		margin-left: 20px; 
		list-style-position: outside; 
	}

#catpage #refine ul li {
		padding-left: 12px;
		border-left: 1px solid #fff; /* border is here as a bug fix for IE browsers - they weren't displaying the arrow if the link wrapped onto second line - for some reason this fixes it */
	}
 
#catpage #refine h3.nottop {
		border-bottom: none;
		padding-bottom: 0px;
	}
	
#catpage #refine h5{
		color: #666666;
		font-size: 13px;
		font-weight: normal;
		padding: 10px 0px 10px 0px;
		text-indent: 20px;
		text-transform: uppercase;
	}

#catpage #category{
		float: right;
		width: 589px;
		border-left: 1px solid #ccc;
		min-height: 400px;
		padding: 5px 5px 20px 5px;
	}
#catpage #category ul.breadcrumb { 

	padding: 10px 10px 10px 15px; 
 	font: bolder 11px Arial, Helvetica, sans-serif; 
 	color: #996633; 
	text-transform: capitalize; 
	list-style-type: none; 
   } 

     #catpage #category ul.breadcrumb li { 

	display: inline; 
	    }
		

#catpage #category #optionimgcopy p{
		padding: 5px 15px;
	}
	
#catpage #category .catRow {
		float: left;
		border-bottom: 1px solid #ccc;
		padding: 10px 0;
		width: 589px; /* added in v22 to ensure that the row stays the same width in IE6 and IE7*/
	}

#catpage #category .catRowLast {
		float: left;
		border-bottom: 0;
		padding: 10px 0px; 
		width: 589px; /* added in v22 to ensure that the row stays the same width in IE6 and IE7*/
	}


#catpage #category .catimg, 
#catpage #category .catimglast{
		float: left;
		width: 146px;
		height: 140px;
		padding: 10px 0 0px;
		text-align: center; 
		border-right: 1px solid #CCCCCC; 
		margin-bottom: 0px;
	}

#catpage #category .catimg img, 
#catpage #category .catimglast img{
padding-bottom: 5px;
}

#catpage #results {
	/*margin: 10px 15px 0 15px;*/
	padding: 10px 10px 10px 15px; 
 	font: bolder 11px Arial, Helvetica, sans-serif; 
 	color: #996633; 
	text-transform: capitalize; 
	list-style-type: none; 
}

#catpage #category .catimglast {
		border-right: 0;
		width: 146px;
	}
	

#catpage #results p{
		font-weight: bolder;
		font-size: 11px;
	}

#catpage .product{
		float: left;
		width: 560px;
		margin-left: 15px;
		padding-bottom: 10px;
	}

#catpage .product h4 {
	color: #d80000;
}
	
#catpage .product .prodimgContainer {
	float: left;
	padding-right: 20px;
}

#catpage .product .prodimg{
		float: left;
		padding-right: 20px;
	}
	
#catpage #sortform {
width: 200px;
float: left;
margin-left: 15px;
padding: 5px 0;
clear: left;
}
	
	/* ======= product page styles ======= */

#main #product {
float: left;
	}
	#product #top {
	float:left;
	}
#prodpage #product ul.breadcrumb {
	float: left;
	width: 630px;
	padding: 0px 10px 10px 0px;
	font: bolder 11px Arial, Helvetica, sans-serif; 
	color: #996633;
	text-transform: capitalize;
	list-style-type: none;
}
#prodpage #product ul.breadcrumb li {
	display: inline;
	} 
#product #support{
	width: 100px;
	float: right;
	clear: left;
	margin: 0 2px 0 0;
}

#product #prodimg {
float: left;
padding-right: 10px;
width: 300px;
height: 300px;
}

#product img.lrgprodimg {
float: left;
}

#product p.enlarge {
		float: left;
		white-space: nowrap;
	}

#product #top h3 {
float: left;
width: 320px;
color: #666666;

}

#product h4 {
	font-size:10px;
	margin-top: 5px;
	background-color:#FFFFFF;
	width: 90px;
	float: left;
	text-align:center;
	color: #666;
	text-transform: uppercase;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	padding: 3px 10px;
}

#product .product h4 { /* to effect product list titles to match category_searchres_wattr.html */
	font-size:12px;
	margin-top: 5px; 
	width: auto;
	float: none;
	text-align:left;
	color: #666;
	text-transform: none;
	border: none;
	padding: 0;
}

#product h4.firsttab {
	border-bottom: 1px solid #fff;
	position: relative;
	z-index: 3; 
	margin-top: 10px;
}

#product h4.secondtab {
	margin-left: 3px;
	border-bottom: 1px solid #ccc;
	position: relative;
	z-index: 3;
	margin-top: 10px;
}

 

#product #resources h4 {
width: 100%;
text-align: left;
border: none;
padding: 5px 0px;
}
#product #relatedprod h4 {
width: auto;
border: none;
padding-bottom: 0px;
}

#product #relatedprod .related h4 {
	visibility: hidden; 
}

#product h5 {
	width: 320px;
	float: left;
}
#product #productdesc {
min-height: 100px;
}

#product .tabs {
	min-height: 100px;
	float: left;
	width: 406px;
	border: 1px solid #ccc;
	position: relative;
	top: -1px; 
	z-index: 2;
	padding: 10px;
}


#product #productdescnoopt {
min-height: 225px;
}

#product #productdesc, #product #productopt, #product #productdescnoopt {
	float: left;
	width: 406px;
	border: 1px solid #ccc;
	position: relative;
	top: -1px; 
	z-index: 2;
	padding: 10px;
	margin-right: -3px;
}

	

#product #productopt .options {
float: left;
width: 50px;
text-align: center;
}

#product #productopt .options img {
padding: 3px 0;
}

#product #bottom {
float: left;
padding-top: 5px;
}
#product p.added {
padding: 5px 0px;
width: 740px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #996633;
	}


#product #resources {
width: 154px;
float: left;
}
#product #resources ul li {
	float: left;
	display: block;
	}

#product #relatedprod {
	width: 584px;
	float: left;
	padding-bottom: 50px;
}

#product #relatedprod .related, 
#product #relatedprod .relatedfirst {
		float: right;
		width: 116px;
		height: 130px;
		padding-top: 0px;
		text-align: center;  
		margin-top: 0px;
	}

#product #relatedprod .related .border {
	border-left: 1px solid #ccc;
	float: left;
	text-align: center;
	width: 100%;
}

#product #relatedprod .related img, 
#product #relatedprod .relatedfirst img {
padding-bottom: 5px;
padding-top: 10px;
}

#product #relatedprod .relatedfirst {
		border-left: 0;
		width: 116px;
		padding: 0px;
		margin-top: 0px;
	}
	


/* ======= FOOTER STYLES =======
border-right: 1px solid #666666;
	border-left: 1px solid #666666;
	border-bottom: 1px solid #666666;
 */

#footer {
	float: left;
	list-style: none; 
	text-align: center;
	padding-bottom: 25px; 
	}

#footer ul, #footer p {
font-size: 11px;
	width: 780px;
	}

#footer ul li {
	display: inline;
	} 

#stripe {
	width: 780px;
	background-color: #666666;
	} 

ul#stripe {
	list-style: none;
	margin: 0;
	padding: 4px 0;

	}

ul#stripe li {  
	padding: 4px 0;
	}

ul#stripe li a {
	text-decoration: none;
	padding: 4px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF; 
	}

ul#stripe li a:hover {
	background-color: #999999;
	}

 
 

/* ======= FORM STYLES ======= */
/* NOTE: Because there are many forms it may make sense to have subsections here as well like are set up in the main body styles.  Same as above I would set all form elements that will be the same first and then use the subsections to modify as needed */
 
form {

}

	/* ======= search form in head styles ======= */

#metanav form { 
		position: relative;
		padding-top: 2px; 
	}

#metanav form input, #metanav form select {
	font: normal 1em Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	}

#metanav form select {
	color: #000;
}

#metanav form input[type="image"] {
		 position: relative;
		 top: 3px;
	}
	


	/* ======= category page form styles ======= */
 
#catpage #category form select {
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	}

	

/* ======= product page form styles ======= */
	
#product form { 
float:left;
	}
#product #prodchart input.qty { /*changes here in v.23 */
		width: 15px;
		font-size: 12px;
		text-align:center; 
		padding: 0;
		margin: 0;
	}
	#product #prodchart .submit {
	padding: 5px 10px 5px 0px;
	}
	
	/* ======= request form styles ======= */

#request #main form { 
		text-align: right;
		padding-right: 20px;
		margin-top: 20px; 
	}

	#request #main form input { /* sets defined width of input for consistency */
		width: 150px;  
	}

	#request #main form select { /* sets defined width of select for consistency */
		width: 154px;  
	}

	#request #main form input.submit {  
		width: auto;
	}

	#request #main form dt { 
		width: 190px;  
		height: 30px;
		float: left;
	}
	
	#request #main form dt.required {
	font-weight: bold;	
	}
	
	#request #main form dd {
		float: right;
		height: 30px;
		width: 160px;  
	}

	#request #main form dd.radio input, #request #main form dd.radio label { /* to get radio buttons to line up side by side */
		float: left;
		font-size: 10px;
	}

	#request #main form dd.radio input {
		width: auto;
	}

	#request #main form dd.radio label { /* for precise positioning of radio labels */
		padding-top: 3px;
	}

	#request #main form p {
		text-align: left;
		margin-top: .5em;
	}


	#request #main textarea {
		width: 100%;
	}


/* ======= custom products page styles ======= */

#custprod h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
		text-indent: 30px;
	}

	#custprod #left p {
		padding: 0px 20px 0px 30px;
		margin-bottom: 10px;
	}
 
	#custprod #left {
		float: left;
		width: 370px;
		border-right: 1px solid #666666;
		padding-top: 20px;
		margin-top: 10px;
	 }
	 
	 #custprod #middle {
		float: left;
		width: 710px;
		padding-top: 20px;
		padding-left: 30px;
	 }
	 
	 	#custprod #middle p {
		margin-bottom: 10px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
	}
 
	 	#custprod .brown {
		color: #996633;  
	}
	
	#custprod .right {
		width: 340px;
		float: left;
		padding: 20px 0 0 20px;  
		margin-top: 10px;
	 }
	
#custprod .right p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #666666;  
	}

	
		#custprod .right img {
		padding-right: 5px;
		float:left;
		}
	#custprod #left a {
	text-decoration: none;
	font-weight: bold;
		}

	/* ======= wholesale page styles ======= */

#wholesale h2 {
		border-bottom: 1px solid #666666;
		width: 740px; /* 780px - 40 (20px padding on each end) */
		margin: 0 auto; /* centers h2 so padding is equal on both sides */
		text-indent: 30px;
	}

	#wholesale #left p {
		padding: 0px 20px 0px 30px;
		margin-bottom: 10px;
	}
 
	#wholesale #left {
		float: left;
		width: 350px;
		border-right: 1px solid #666666;
		padding-top: 20px;
		margin-top: 10px;
	 }
	 
	 	#wholesale .brown {
		color: #996633;  
	}
	
	#wholesale .right {
		width: 360px;
		float: left;
		padding: 20px 0 0 20px;  
		margin-top: 10px;
	 }
	
#wholesale .right p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		color: #666666;
		padding-bottom: 20px;  
	}
	
#wholesale .right a {	text-decoration: none;
	font-weight: bold;
	}

		#wholesale .right img {
		padding-right: 10px;
		float:left;
		}
	


	/* ======= bid and quote styles ======= */
	
#bid #main form {
	margin-top: 10px;
	text-align: right;
	padding-right: 20px;		
	}
	
#bid fieldset {
	border: 1px solid #CCCCCC;
	padding: 10px 0px 10px 10px;
	margin-bottom: 10px;
	}

#bid .textleft {
	float: left;
	width: 446px;
	}	

#bid .formleft {
	float: left;
	width: 338px;
	}
#bid .formright {
	float: left;
	width: 338px;
	}

#bid #bidform { 
	
	width: 676px;

}

#bid #main form input { /* sets defined width of input for consistency */
		width: 160px;  
	}

#bid #main form select { /* sets defined width of select for consistency */
		width: 165px;  
	}

#bid #main form input.submit {  
		width: auto;
	}

#bid #main form dt { 
		width: 120px;  
		height: 30px;
		float: left;
	}
#bid #main #choices, #bid #main p {
text-align: left;
padding-bottom: 5px;
}

#bid #main dl#choices {
	float: left;
}
 	
#bid #main #choices dt { 
		width: 220px; 
		height: 20px; 
		float: left;
	}
#bid #main #choices dd {
	width: 460px;
		height: 20px; 
		float: left;
	}
#bid #main form dt.required {
	font-weight: bold;	
	}
	
#bid #main form dd {
		float: left;
		height: 30px;
		width: 188px;  
	}

#bid #main #choices dd.radio input, #bid #main #choices dd.radio label { /* to get radio buttons to line up side by side */
		float: left;
		font-size: 12px;
		padding-right: 10px;
	}

#bid #main #choices dd.radio input {
		width: auto;
	}

#bid #main #choices dd.radio label { /* for precise positioning of radio labels */
		padding-bottom: 3px;
	}

#bid #main textarea {
		width: 100%;
	}
	
	#bid #bidform input.item {
		width: 100px;
	}
#bid #bidform input.qty {
		width: 66px;
	}
	#bid #bidform input.descr {
		width: 400px;
	}
	

	/* ======= quick order styles ======= */

	#quick  {

	}

	#quick fieldset {
		border: 1px solid #CCCCCC;
		padding: 10px;
		margin-top: 10px;
	}

	#quick form input.item { 
		width: 190px;
	}

	#quick form input.qty {
		width: 30px;
	}
	
	/* ======= SHIP INFO STYLES ======= */
	#shipinfo #main {
	width: 298px;
	padding: 10px;
	border-bottom: 1px solid #666666;
	}
	
	#shipinfo #wrap {
	width: 320px; 
	border-top: none;
	}
	
	#shipinfo #head {
	width: 300px;
	height: 10px;
	background-color: #333333;
	border-bottom: 4px solid #996633;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	}
	
	#shipinfo ul li {
	padding-bottom: 5px;
	}
	
	#shipinfo ul {
	padding-bottom: 15px;
	}
	
	#shipinfo p {
	padding-bottom: 15px;
	}
	
	#shipinfo .prodname {
	color:#666666;
	}
	

/* ======= TABLE STYLES ======= */

table {

}
#quick #quickform table {
	float: left;
	padding: 10px;
	margin: 10px;
	text-align: left;
}

#quick #quickform table th, #quick #quickform table td {
	padding: 3px;
}

#contact #product table, #contact table {
	line-height: 30px;
	text-indent: 10px;
	text-align: left;
	width: 489px;
}

#contact table thead tr th {
	background-color: #ebe3da;
	padding: 7px 0; 
}
#bid #bidform table {
	float: left;
	padding: 10px;
	
	text-align: left;
}

#bid #bidform table th, #bid #bidform table td {
	padding: 3px 8px;
}

#product table {
width: 699px;
}

#product table#prodorder { /* for order tables */
	width: 740px;
}

#footer table {
	width: auto;
}

#product table thead tr th {
	text-align:left;
	background-color: #ebe3da;
	padding: 4px 10px; 
	}


#product table tr.grouphead {
	background-color: #CCCCCC;
	padding: 0px 10px;
	font-style: italic;
	font-weight: bold;
	color: #666666;
	line-height: 10px;
 }

#product table tbody tr.grouphead td {
	background-color: #ccc; 
}

#product table tr td { /* changes here in v.23 */
	border-bottom: 1px solid #ccc;
	padding: 5px 10px;
	text-align: left; 
	vertical-align: middle;
}

#footer table tr td {
	border-bottom: none;
}

#product table tr td.right, #product table thead tr th.right {
	text-align: right; 
}

#product table img { /* changes here in v.23 */
	margin-top: 0;
	}

#product table tr.addWish td {
		border-bottom: none;
		padding: 5px 0;
	}