/* CSS Document */


/*  basic page stuff  */


body {
		text-align:left;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 125%;
		background: #eee url(/images/bg_greygrad.jpg) repeat-x fixed;
		margin: 0px;
		}
	
a {
		color: #000000;
		text-decoration: underline;
		}
		
a:hover {
		color: #cc0000;
		text-decoration: underline;
		}

p {
		margin-top: 3px;
		margin-bottom: 8px;
		}
		
p.colwidth {
		width: 280px;
		}		
		
form {
	padding:0px;
	margin:0px auto 0px auto;
}

	
/*  the all-important header tags */


h1 {
		font-size:14px;
		padding-top:10px;
		}
		

/*  h2 is the default page title  */	

h2 {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: bold;
		color: #000;
		letter-spacing: .05em;
		margin-bottom: 0px;
		padding-bottom: 10px;
		}

h2 .subhed {
	font-size:14px; 
	padding-left:10px;
}

h2.category {
	color:#FFFFFF; 
	background-color:#444444; 
	padding:7px 0px 5px 8px; 
	margin:0px 0px 0px 0px; 
	font-size:13px; 
	letter-spacing: .07em;
}	

h5 {
		font-family: Helvetica, Arial,  sans-serif;
		font-size: 14px;
		font-weight: bolder;
		clear: both;
		padding-left: 0px;
		margin-bottom: 5px;
		padding-top:6px;
		}

/*  h6 is the page title sub font, if the page title goes longer than one line  */	

h6 {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 19px;
		font-style: normal;
		font-weight: bold;
		color: #000000;
		margin-bottom: 5px;
		letter-spacing: .05em;
		margin-top: 10px;
		padding-top: 0px;
		}

.sub {
		font-size: 20px;
		}

.sup {
	position:relative;
	top:-9px;
/*	font-size-adjust:0.3; */
	font-size:14px;	
	line-height: 0px;
}
	
	
/*  reg is for registered trademark font, meaning smaller, but is used in the site as a tiny font size.  */	
.reg {
		font-size: 10px;
		line-height: 120%;
		}

/*  h3 used on the industry links page only  */

h3 {
		width: 100%;
		background-color: #777777;
		clear: both;
		font-family: Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 0.1em;
		margin-top:30px;
		padding: 2px;
		text-align:center;
		color: #FFFFFF;
		font-size:95%;
		}

/*  this is the gray sub head bar with the top button, currently */

.graysubbar {
		height:16px;
		width: 99%;
		clear: both;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color: #333;
		background-color: #eee;
		font-weight: bold;
		padding: 2px 2px 2px 5px;
		letter-spacing: 1px;
		word-spacing: normal;
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 10px;
		border-top: 1px solid #ccc;
		}		

.topbar  { 
		height:8px;
		margin-top:4px;
		padding-top:0px;
		float:right;
		margin-right:5px;
		}		


h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #eee;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: normal;
	clear: none;
	float: none;
	
	border-top: 1px solid #ccc;
	margin-bottom: 10px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 5px;
		}
		
	
	
/*  CSS page layout IDs */

/*  Borderframe and Frame are used in tandem to create a black box around a white space for the content. had to use two divs because the opencube menus have a bug with css. */
/* 	borderframe creates the one pixel border on the left side  of the frame by using a one pixel gif. frame has a one pixel high by 740 pixel wide background to create the top border */

#borderframe {
		width:740px;
		margin:0px auto 0px auto;
		padding-left: 1px;
		padding-right: 1px;
		padding-bottom: 1px;
		padding-top:0px;
		background: #ccc;
		}


#frame {
		width: 700px;
		background-color: #fff;
		padding: 10px 20px 0 20px;
		text-align:left;
		margin: 0px auto auto auto;
		}
		
/*  div for nav bar content */
#navbar {
		width: 701px;
		margin-right:20px;
		margin-left:0px;
		padding-top: 0px;
		padding-bottom:0px;
		margin-top:0px;
		margin-bottom:0px;
		background: #fff;
		height:67px;
		border-bottom:1px solid #cccccc;
		}

/*  div for breadcrumb and print friendly content */
#subnav {
		width: 700px;
		font-size: 11px;
		clear:left;
		padding-top: 10px;
		padding-bottom: 10px;
		margin:0px;
		}

/*#subnav p {
	padding:0px;
	margin:0px;
}*/

/*  div for breadcrumb and print friendly content for pages that include a PROMO in titlebar */

#subnavpromo {
		font-size: 11px;
		clear:both;
		padding-top: 10px;
		padding-bottom: 0px;
		width:100%;
		}

/*  div for pdf links ALTERED BY TRICIA 3/22/06 */
#subnav .printfriendly {
		background-color: #fff;
		float:right;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 9px;
		color: #666666;
		font-weight: normal;
		height: 17px;
		clear: none;
		}
.printfriendly a:link {
		color: #666666;
}
.printfriendly a:visited {
		color: #666666;
}					


/*  div for h2 tag with product/page title */
#producttitle {
		border-bottom: 1px solid #ccc;
		padding-top: 10px;
		width: 700px;
		margin-bottom:6px;
		clear:both;
		}

/*  div for h2 tag with product/page title that includes PROMO */		
		
#producttitlepromo {
		border-bottom: #ccc 1px solid;
		margin-left: 58px; 
		width:655px; 
		margin-bottom:8px;
		margin-top:0px;
		clear:left;
		}		


/*  reusable layout classes - contentcolumn is for 2-col sections, widecontent is for 100 percent sections) */

/*  content class establishes a container for contentcolumns; somewhat smaller than producttitle div */
.content {
		width:700px;
		float:none;
		margin: 0;
		/* background-image: url(../images/mockup/bg_centergrid.gif); */
		background-repeat: repeat-y;
		}
		
	
.contentcolumn {
		width: 330px;
		padding-top: 10px;
		}

/*  mediumwide is a 400 pixel div which is in between 280 and widecontent */

.mediumwide {
		width: 400px;
		padding-top: 10px;
		padding-bottom: 5px;
		background: #fff;
		}		


/*  mainproductwide stretches across entire length of pagetitle (as wide as page will go but still look good) used for large tables */
.mainproductwide {
		width: 700px;
		}

/*  widecontent is a wide div but still leaves white space  */

.widecontent {
		width: 100%;
		background: #fff;
		}
		
/*  p tags in the wide content will still only take up half of the width */
.widecontent p {
		width: 285px;
		}
/*  p tags in the wide content that are wider and more luxurious  */
.widecontent p.wide {
		width: 570px;
		clear: both;
		}

/*  h4 tags in wide content will still take only half the width */
.widecontent h4{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #eee;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: normal;

		padding: 2px;
		margin: 0px;
		width: 285px;
		}

/*  misc items */

.correction {
	width: 680px;
	font-size: 11px;
	color: #000;
/*	background-color:#eca781;*/
	background-color:#FF9966;
	margin: 10px 0px 5px 0px;
	padding:2px;
	border: 1px solid #752600;
}

.correction td {
	font-size: 11px;
	line-height:125%;
	color: #000;
}

.correctiontext {
	color:#FF6622;
	font-size:10px;
}

.correctiontext a {
	color:#FF6622;
}

.correctiontext a:hover {
	color: #cc0000;
}
		
		
/*  creates list in content column, mainly used in product pages for product features, etc. */

.contentcolumn ul {
		list-style-type: square;
		margin-top: 2px;
		margin-left: 20px;
		padding-left: 0px;
		}

/*  this div is for the nav bar, to get the search form input box to line up correctly.  it uses a background image to look the same on ie and netscape */

div.formplacer {
		float: left;
		clear: none;
		padding-top:0px;
		height: 20px;
		width: 77px;

		} 
		
.searchform {


		height:15px;
		width:74px;
		margin-left:1px;
		margin-right:0px;
		padding:0px;
		margin-top:0px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		border:solid 1px #999999;
		background-color:#eeeeee;


}

/*  for the bottom row of buttons in nav bar */

  div.navcontainertop {
  
		float: left;
		height:36px;
		width: 581px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-top: 6px;
		padding-bottom: 0px;
		border:0px;
		
		
 		}
  
 /*  top row of button in navbar */
    div.navcontainerbottom {
		height:25px;
		margin: 0px;
		padding: 0px;
		width: 581px;
		float: left;
		border:0px;		
	
	  	}


ol {
		list-style-type: decimal;
		text-align: left;
		}

/*  cp is mostly unused - is used on DOT approval page  */
.cp {	
		font-family: Arial, Helvetica, sans-serif;
		border-collapse:collapse; 
		font-size:11px; 
		border:1px solid #dddddd;
		text-transform: none;
		padding: 2px;
		float: none;
		}

.cp td {
	border: 1px #DDDDDD solid;
	padding:4px;
}

.pdf {
	color:#444444;
	font-size:10px;
}


/* LINKS box on product pages */
div.linkbox {
	background-color:#EEEEEE; 
	padding:0px 0px 1px 0px; 
	margin:10px 0px 5px 0px; 
	font-size:95%; 
	border:1px solid #CCCCCC;
}

div.linkbox h4 {
	background-color:#CCCCCC;
	margin:0px 0px 10px 0px
}

div.linkbox ul {
	margin-right:10px;
}


/*  for blocks of text under photos, creates dark grey text */
.photocaption {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		word-spacing: 0.1em;
		color: #666666 ;
		margin-right: 10px;
		}		

/*  misc items - jumper classes formats jump menu currently in right cols of product pages */
.jumper {
		color: #000000;
		margin-bottom: 10px;
		list-style-image: none;
		margin-top: 10px;
		margin-left: 5px;
		font-weight: bold;
		margin-right: 0px;
		padding-top: 1px;
		padding-bottom: 1px;
		padding-right: 1px;
		list-style-type: none;
		width: 100%;
		}

.jumplist {
		list-style-type: square;
		margin-left: 15px;
		}
			

.ul {
		line-height: 1.3em;
		}


/*  wide blurb on product main page */

.productblurb {
		width:100%;
		margin-top:5px;
		margin-bottom:8px;
		}

/*  product photos div is used to display product photos in catalog pages and several other places where groups of photos are needed */

div.productphotos {
		float: left;
		padding: 2px;
		clear: none;
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom:8px;	
		text-align: center;
		}

/* caption text in product photos divs. note that this is diff than photocaption class, as this is intended for labels of one or two words, rather than longer text. */

div.productphotos p {
		margin: 0px;
		clear: none;
		text-align: center;
		width: auto;
		font-size:10px;
		}

/*  attempts to center images in productphotos div */

div.productphotos img {
		margin-right: auto;
		margin-left: auto;	
		margin-bottom:3px;
		}

/*  horzjumpto is the little jump to menus found at the top of certain pages.  */
.horzjumpto {
		font-size: 10px;
		margin: 0px 0px 0px 0px;
		padding: 10px 0px 0px 0px;
		width:280px;
}

.horzjumpto p {
		margin-left: 10px;
		padding-left: 10px;
		width:95%;
		}

.horzjumpto h4 {
		margin-top:10px;
	padding: 2px 0px 2px 5px;
		height:16px;
	width:99%;
	margin-bottom:5px;
}

/*.horzjumpto h4 {
		font-size: 9px;
		width:60px;
		float:left;
		clear:none;
		margin-right:7px;
		font-weight: normal;
		margin-bottom:10px;
		margin-top:4px;
		}*/

/*  these thumbnail div classes are for the main product index pages, i.e. adhesives main page */

div.thumbnail {
		width:130px;
		float: left;
		margin-top: 3px;
		padding-bottom: 0px;
		margin-right: 10px;
		padding-top: 0px;
		padding-right: 0px;
		text-align:center;
		}

/*  note that this class creates a one pixel border around the thumbnail so the border should not be applied in photoshop */
div.thumbnail img {
		margin-top: 4px;
		margin-bottom: 4px;
		/*margin-left:30px;*/
		border: 1px solid #000000;
		}

div.thumbnail p {
		text-align: center;
		padding: 0px;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
		}

div.thumbnail a {
		color:#000000;
		}


/*  footer div and p  */

.footer p {
		clear: both;
		float: none;
		font-size: 9px;
		margin-top: 5px;
		text-align: center;
		}

.footer {
		width: 700px;
		border-top: 1px solid #ccc;
		}

/*  whitespace is a very important class, it creates an empty div that gives whitespace between objects on page, creating uniform whitepsace. by not using an empty p tag you can add or shrink the white space without affecting space around paragraph tags. the other thing this div does is clear both, which seems neccesary for certain css divs to avoid strange spacing effects. */
 
.whitespace {
		clear:both;
	 	height:5px;
		background: #fff;
		}


/* for redesigned product pages -- makes table have the same look as the rest of the page */
.propertytablehed {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #eee;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: normal;
	clear: none;
	float: none;
	
	border-top: 1px solid #ccc;
	margin-bottom: 10px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 5px;
		}

.inputbox {
	float:left;
	font-size:10px;
	vertical-align:top; 
	margin:0px 2px 0px 0px;
	padding:0px;
}


 
/*  bold text class  */
 .bolder {
		font-weight: bolder; 
 		}

p.bolder {
		font-weight: bolder; 
		margin-top: 14px;
 		}
 
/*  div currently used only on the locations page in connect with us  */
 .address {
		width:190px;
		float:left;
		clear: none;
		text-align: center; 
 		}
 
 .address p {
		width:190px;
		font-size: 11px;
		line-height: 180%; 
 		}
	
/* currently used only in jobs pages  */	
		
.jobtitle {
		font-family: Helvetica, Arial,  sans-serif;
		font-size: 15px;
		font-weight: bolder;
		margin-bottom: 10px;
		}

#printhead, #borderframe div#frame div#printhead {

display:none;

}

#printfooter, #borderframe div#frame div#printfooter {

display:none;
}


.thinborder {
	border: 1px #DDDDDD solid;
	border-collapse:collapse;
}

.thinborder td, .thinborder th {
	border: 1px #DDDDDD solid;
	padding:4px;
}

table.kmts, table.ts, .g {
	border:none;
	border-width:0;
}