body 
{margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial,Helvetica, Verdana, serif;

}

/* main and inner tags are what center page, must be accompanied by doc type tag and following html mark up protocals for that doc type tag*/

#main {
	position: relative;
	top: 0px;
	width:750px;

        margin: auto;
        text-align:left;
        padding:0px 0px 0px 0px;
}

#inner {
	padding: 0px;
}

a.nav {text-decoration: none;
	font-weight: 500;
	display: block;
	text-align: center;
	font-size:9px;
	color: rgb(255,255,255);
	font-family: Arial,Helvetica, Verdana, serif; 
	line-height: 24px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	outline: none;}
a.nav:hover {color: rgb(213,211,209); font-weight: 500;outline: none;}


a.nav2 {text-decoration: none;
	font-weight: 800;
	font-size:11px;
	color: black;
	font-family: Arial,Helvetica, Verdana, serif; 
	line-height: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	outline: none;}
a.nav2:hover {color: rgb(130,130,128); font-weight: 800;outline: none;}

a.nav3 {text-decoration: none;
	font-weight: 800;
	font-size:11px;
	cursor:text;
	color: black;
	font-family: Arial,Helvetica, Verdana, serif; 
	line-height: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	outline: none;}
a.nav3:hover {color: black; font-weight: 800;outline: none;}

a.nav6 {text-decoration: none;
	font-weight: 500;
	color: rgb(130,130,128);
	font-size:9px;
	text-align: left;
	line-height: 13px;
	width:213px;
	padding: 0px 0px 0px 0px;
	outline: none;
	z-index: 5;
}

a.nav6:hover {
	color: rgb(237,185,87);
	text-align: left;
	font-weight: 500;
	width:213px;
	outline: none;
	z-index: 5;
}









/* set the size of the definition list <dl> and add the background image */
#imap {
	display:block; 
	width:0px; 
	height:0px; 
	position:relative; 
	z-index:20;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
	display:block; 
	width:400px; 
	height:0; 
	padding-top:240px; 
	overflow:hidden; 
	position:absolute; 
	left:0; 
	top:0; 
	background:transparent url(../images/beatles_hover.jpg) no-repeat 400px 400px; 
	cursor:default;
}

/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {
	background-position: 0 0; 
	z-index:10;
}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #carbon {left:0px; top:418px; z-index:20;}
#imap #alloy {left:108px; top:418px; z-index:20;}
#imap #stainless {left:215px; top:418px; z-index:20;}
#imap #aluminum {left:325px; top:418px; z-index:20;}
#imap #pipe {left:434px; top:418px; z-index:20;}
#imap #fabrication {left:543px; top:418px; z-index:20;}
#imap #building {left:652px; top:418px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#carbon, #imap a#alloy, #imap a#stainless, #imap a#aluminum, #imap a#pipe, #imap a#fabrication, #imap a#building {
	display:block; 
	width:101px; 
	height:80px; 
	background:transparent url(../images/hover.gif) -100px -100px no-repeat; 
	text-decoration:none; 
	z-index:20;
}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
	display:none;
}

/* move the link background image to position 0 0 when hovered */
#imap a#carbon:hover, #imap a#alloy:hover, #imap a#stainless:hover, #imap a#aluminum:hover, #imap a#pipe:hover, #imap a#fabrication:hover, #imap a#building:hover  {
	background-position:0 0;
}

/* define the common styling for the span text */
#imap a:hover span {
	position:absolute;  
	width:530px; 
	display:block; 
	font-family:arial; 
	font-size:16px; 
	font-weight:800;
	background:none; 
	color:rgb(213,211,209);
	border:none;
	padding:0px;
}

/* the hack for IE pre IE6 - ruins IE 6 though, have hidden
* html #imap a:hover span {width:400px; w\idth:388px;}
*/

/* move the span text to a common position at the bottom of the image map */
#imap a#carbon:hover span {left:215px; top:-28px;}
#imap a#alloy:hover span {left:107px; top:-28px;}
#imap a#stainless:hover span {left:0px; top:-28px;}
#imap a#aluminum:hover span {left:-110px; top:-28px;}
#imap a#pipe:hover span {left:-219px; top:-28px;}
#imap a#fabrication:hover span {left:-328px; top:-28px;}
#imap a#building:hover span {left:-437px; top:-28px;}




























#header_slice {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:175px;
	background-color:rgb(255,255,255);
}

#hm-logo-pic {
	position:absolute;
	left:129px;
	top:44px;
	width:237px;
	height:114px;
}

#ref-guide-link {
	position:absolute;
	left:455px;
	top:153px;
	text-align: left;
	width:150px;
	height:13px;
	z-index:1;
}

#about-link {
	position:absolute;
	left:580px;
	top:153px;
	text-align: left;
	width:100px;
	height:13px;
	z-index:1;
}

#contact-link {
	position:absolute;
	left:655px;
	top:153px;
	text-align: left;
	width:100px;
	height:13px;
	z-index:1;
}





#hm-welder-pic {
	position:absolute;
	left:0px;
	top:173px;
	width:265px;
	height:90px;
}

#hm-large-carbon-pic {
	position:absolute;
	left:374px;
	top:173px;
	width:376px;
	height:209px;
}


#carbon_galvanized_textbox {
	position:absolute;
	left:393px;
	top:290px;
	width:330px;
	height:20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: none;
	z-index:1;
}

.words2 {
	font-size: 20px;
	font-family: Arial,Helvetica, Verdana, serif;
	color: rgb(237,185,87);
	font-weight: 500;
	line-height: 30px;
	text-align: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index:1;	
}


#hm-prods-svcs-pic {
	position:absolute;
	left:0px;
	top:382px;
	width:750px;
	height:36px;
}


#prods_svcs_textbox {
	position:absolute;
	left:15px;
	top:392px;
	width:330px;
	height:20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: none;
	z-index:1;
}

.words1 {
	font-size: 16px;
	font-family: Arial,Helvetica, Verdana, serif;
	color: rgb(130,130,128);
	font-weight: 800;
	line-height: 16px;
	text-align: justify;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index:1;	
}


#hm-small-carbon-pic {
	position:absolute;
	left:0px;
	top:418px;
	width:100px;
	background-image: url(images/hm_small_carbon_pic.jpg)
	height:99px;
	z-index:1;
}

#carbon-text-over {
	position:absolute;
	left:0px;
	top:418px;
	width:100px;
	height:99px;
	z-index:4;
}




#carbon-link {
	position:absolute;
	left:0px;
	top:496px;
	text-align: center;
	width:100px;
	height:11px;
	color:rgb(0,0,0);black;
	z-index:21;
}

#hm-vert-steel-pic-1 {
	position:absolute;
	left:100px;
	top:418px;
	width:9px;
	height:99px;
}

#hm-alloy-pic {
	position:absolute;
	left:109px;
	top:418px;
	width:99px;
	height:99px;
}

#alloy-text-over {
	position:absolute;
	left:0px;
	top:418px;
	width:99px;
	height:99px;
	z-index:10;
}

#alloy-link {
	position:absolute;
	left:109px;
	top:496px;
	text-align: center;
	width:99px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}


#hm-vert-steel-pic-2 {
	position:absolute;
	left:208px;
	top:418px;
	width:8px;
	height:99px;
}

#hm-stainless-pic {
	position:absolute;
	left:216px;
	top:418px;
	width:100px;
	height:99px;
}

#stainless-link {
	position:absolute;
	left:216px;
	top:496px;
	text-align: center;
	width:100px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}

#hm-vert-steel-pic-3 {
	position:absolute;
	left:316px;
	top:418px;
	width:9px;
	height:99px;
}

#hm-aluminum-pic {
	position:absolute;
	left:325px;
	top:418px;
	width:99px;
	height:99px;
}

#aluminum-link {
	position:absolute;
	left:325px;
	top:496px;
	text-align: center;
	width:99px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}

#hm-vert-steel-pic-4 {
	position:absolute;
	left:424px;
	top:418px;
	width:9px;
	height:99px;
}

#hm-pipe-pic {
	position:absolute;
	left:433px;
	top:418px;
	width:101px;
	height:99px;
}

#pipe-link {
	position:absolute;
	left:433px;
	top:496px;
	text-align: center;
	width:101px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}

#hm-vert-steel-pic-5 {
	position:absolute;
	left:534px;
	top:418px;
	width:7px;
	height:99px;
}

#hm-fabrication-pic {
	position:absolute;
	left:541px;
	top:418px;
	width:101px;
	height:99px;
}

#fabrication-link {
	position:absolute;
	left:541px;
	top:496px;
	text-align: center;
	width:101px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}


#hm-vert-steel-pic-6 {
	position:absolute;
	left:642px;
	top:418px;
	width:7px;
	height:99px;
}

#hm-bldg-prods-pic {
	position:absolute;
	left:649px;
	top:418px;
	width:101px;
	height:99px;
}

#bldg-prods-link {
	position:absolute;
	left:649px;
	top:496px;
	text-align: center;
	width:101px;
	height:11px;
	color:rgb(0,0,0);
	z-index:1;
}

#hm-horiz-steel-pic-1 {
	position:absolute;
	left:0px;
	top:515px;
	width:750px;
	height:13px;
}

#footer_slice {
	position:absolute;
	left:0px;
	top:522px;
	width:750px;
	height:77px;
	background-color:rgb(255,255,255);
}

#product_list_footer_textbox {
	position:absolute;
	left:0px;
	top:529px;
	width:750px;
	height:20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: none;
	z-index:1;
}

.words3 {
	font-weight: 500;
	font-size:9px;
	color: rgb(130,130,128);
	font-family: Arial,Helvetica, Verdana, serif; 
	line-height: 13px;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index:1;	
}

#phone_textbox {
	position:absolute;
	left:480px;
	top:580px;
	width:40px;
	height:13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: none;
	z-index:1;
}

.words4 {
	font-weight: 800;
	font-size:11px;
	color: black;
	font-family: Arial,Helvetica, Verdana, serif; 
	line-height: 13px;
	text-align: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index:1;	
}

#phone {
	position:absolute;
	left:500px;
	top:579px;
	text-align: left;
	width:50px;
	z-index:2;
}

#email-link {
	position:absolute;
	left:585px;
	top:579px;
	text-align: left;
	width:50px;
	z-index:2;
}
