@charset "utf-8";
/* CSS Document */
/* ==========================================================================================
Title:		Triad Industrial Supply (default stylesheet)
Date: 		November 2007
Author: 	Dan Trewartha, LRS Web Services
Document:	style.css

DOCUMENT ORGANIZATION:
	-1.0 HTML Elements
	-2.0 Layout Structure
		-2.1 Home Page
		-2.2 Sub Pages
			-2.2.1 Left Column - Sidebar
			-2.2.2 Right Column - Content
	-3.0 Navigation
	-4.0 Branding
	-5.0 Address Bar
	-6.0 Content
		-6.1 Home Page Content
		-6.2 Sub Page Content
	-7.0 Copyright
	-8.0 Misc

DOCUMENT ARRANGEMENT:
	-Order of appearance in HTML

ATTRIBUTE PROPERTY ORDER:
	-Dimentions (width; height; line-height; vertical-align;)
	-Backgrounds (color; image; repeat; position;)
	-Box Model (margin; border; padding;)
	-Positioning (display; position; float; clear; z-index; direction; overflow; visibility;)
	-Misc (list-style; outline; cursor;)
	-Font (color; family; size; style; weight;)
	-Text (align; indent; decoration; transform; white-space;)

ATTRIBUTE LAYOUT:
	selector {
		property: value;
	}

COLOR PALETTE:
	-Content background:;
	-Main font:#4e4b3c;
	-Link:#001c47;
	-Link hover:#001c47;
	-Link visited:#001c47;
	-<strong>:;
	-<em>:;
	-<h1>:;
	-<h2>:#001c47;
	-<h3>:#001c47;
	-<h4>:;
	-<h5>:;
	-nav link:#fff;
	-nav link hover:#fff;
	-nav link visited:#fff;
	
========================================================================================== */





/* ==========================================================================================
=1.0: HTML ELEMENTS - (Any non-specific html tag)
========================================================================================== */

/* Zero out the page, and all elements within it */
*, html, body{
	margin:0;
	border:0;
	padding:0;
}

/* Set defaults for html document */
html{					
	width:100%;
	height:100%;
	color:#4e4b3c;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* Add background to body (applies to all pages) */
body{
	width:100%;
	background:url(/images/b-PageDefault.jpg);
}

/* Main heading on home page */
h1{
	display:none;
}
h2{
	color:#001c47;
	font-size:1.91em;
	font-weight:bold;
}

/* Default paragraph */
p{	
	color:#4e4b3c;
	font-weight:normal;
	line-height:1.25em;
}

/* Default link */
a, a:visited{	
	color:#001c47;
	font-weight:bold;
	text-decoration:none;
	outline:none; /* <-- this hides the border from an active link */
}

/* Default link hover */
a:hover{
	text-decoration:underline;
}

/* Hide border from any images with hyperlinks */
a img{
	border:0;
	display:block;
}





/* ==========================================================================================
=2.0: LAYOUT STRUCTURE
========================================================================================== */


	/* ======================================================================================
	=2.1: HOME PAGE
	====================================================================================== */
	.page-home{
		width:944px;
		margin:0 auto;
		padding:0 0;
		background:url(/images/b-Homepage.gif) no-repeat;	
	}
	.content-home{
		width:886px;
		height:389px;
		margin:0 9px;
		padding:14px 20px 18px 20px;
	}
	
	/* 1st type of content box used on site, only used on "Welcome to Triad" on homepage */
	.box-1{
		width:865px;
		height:144px;
		margin:0 0 12px 0;
		padding:10px;
	}
	
	/* 2nd type of content box, used for three content boxes on home page */
	.box-2{
		width:265px;
		height:193px;
		padding:10px;
		display:inline;
		float:left;
	}

	
	/* ======================================================================================
	=2.2: SUB PAGES
	====================================================================================== */
	.page-sub{
		width:944px;
		margin:0 auto;
		padding:0 0;
		background:url(/images/b-Subpage.gif) no-repeat;
	}
	.content-sub{
		width:886px;
		margin:0 9px;
		padding:14px 20px 18px 20px;
		background:url(/images/b-ContentArea.gif) repeat-y -9px 0;
	}
	
	
		/* ======================================================================================
		=2.2.1: LEFT COLUMN - SIDEBAR
		====================================================================================== */
		
		/* column to contain sidebar */
		.col-1{
			width:234px;
			padding-bottom:20px;
			display:inline;
			float:left;
		}
		
		/* 3rd type of content box, used in sub page side bar */
		.box-3{
			width:214px;
			height:75px;
			padding:10px;
			float:none;
		}
		
		
		/* ======================================================================================
		=2.2.2: RIGHT COLUMN - CONTENT
		====================================================================================== */
		
		/* column to contain content */
		.col-2{
			width:636px;
			float:right;
		}
		
		/* 4th type of content box, used for most content on subpages */
		.box-4-content{
			width:586px;
			margin:0 0 0 0;
			padding:17px 25px;
			background:url(/images/b-Content.gif) repeat-y;
			display:block;
		}
		
		/* Div above content box, creates top of box */
		.box-4-top{
			width:636px;
			height:10px;
			margin:0 0 0 0;
			padding:0 0 0 0;	
			background:url(/images/b-Content-Top.gif) no-repeat 0 0;
			display:block;
			line-height:10px;
		}
		
		/* Div below content box, creates bottom of box */
		.box-4-bottom{
			width:636px;
			height:10px;
			margin:0 0 0 0;
			padding:0 0 0 0;
			background:url(/images/b-Content-Bottom.gif) no-repeat 0 0;
			display:block;
			line-height:10px;
		}

		
		
		
		
/* ==========================================================================================
=3.0: NAVIGATION
========================================================================================== */

/* div to hold navigation list */
.nav{
	height:33px;
	margin:0 9px;
	color:#fff;
}
.nav ul{
	height:33px;
	margin:0 0 0 451px;
	list-style:none;
}
.nav ul li{
	height:33px;
	padding:0 0 0 15px;
	background-repeat:no-repeat;
	display:block;
	float:left;
}
.nav ul li a, .nav ul li a:visited{
	padding:10px 0 0 19px;
	background-repeat:no-repeat;
	display:block;
	color:#fff;	
	font-size:.916em;
	font-weight:normal;
	text-decoration:none;
	vertical-align:middle;
}
.nav ul li a:hover{
	background-position:0 -38px;
	text-decoration:underline;
}
#n0-home a{
	background-image:url(/images/n0-Home.gif);
}
#n0-aboutUs a{
	background-image:url(/images/n0-aboutUs.gif);
}
#n0-products a{
	background-image:url(/images/n0-products.gif);
}
#n0-greenProducts a{
	background-image:url(/images/n0-greenProducts.gif);
}
#n0-contactUs a{
	background-image:url(/images/n0-contactUs.gif);
}





/* ==========================================================================================
=4.0: BRANDING
========================================================================================== */
/* Div to hold banner image on home page */
.branding-home{
	width:926px;
	height:194px;
	margin:0 9px;
}

/* Div to hold banner images on sub pages */
.branding-sub{
	width:926px;
	height:153px;
	margin:0 9px;
}





/* ==========================================================================================
=5.0: ADDRESS BAR
========================================================================================== */
/* Div to hold address bar on home page - below branding */
.address-home{
	width:926px;
	height:37px;
	background-image:url(/images/b-Home-AddressBar.gif);
	margin:0 9px;
}
.address-home p{
	color:#b4cdd7;
	font-size:1.08em;
	font-weight:bold;
	padding:10px 20px 0 0;
	text-align:right;
	display:block;
}

/* Div to hold address bar on sub page - below branding */
.address-sub{
	width:926px;
	height:37px;
	background-image:url(/images/b-Sub-AddressBar.gif);
	margin:0 9px;
}
.address-sub p{
	color:#b4cdd7;
	font-size:1.08em;
	font-weight:bold;
	padding:10px 20px 0 0;
	text-align:right;
	display:block;
}





/* ==========================================================================================
=6.0: CONTENT
========================================================================================== */


	/* ======================================================================================
	=6.1: HOME PAGE CONTENT
	====================================================================================== */
	.box-1 h2{
		line-height:24px;
		padding:16px 0 16px 13px;
		color:#001c47;
		font-size:2em;
		font-weight:bold;
	}
	.box-1 p{
		width:660px;
		margin:0 0 0 13px;
	}
	
	/* ID for "Welcome to Triad" box on home page */
	#welcome{
		background-image:url(/images/b-Home-welcome.gif);
	}
	.box-2 h2{
		line-height:21px;
		padding:8px 0 13px 10px;
		color:#001c47;
		font-size:1.75em;
		font-weight:bold;
	}
	.box-2 p{
		width:118px;
		margin:0 0 0 10px;
	}
	
	/* ID for "Get to know Triad" box on home page */
	#getToKnow-home{
		background-image:url(/images/b-Home-GetToKnow.gif);
		margin:0 15px 0 0;
	}
	
	/* ID for "Our Products" box on home page */
	#products-home{
		background-image:url(/images/b-Home-Products.gif);
		margin:0 0 0 0;
	}
	
	/* ID for "Green Products" box on home page */
	#greenProducts-home{	
		background-image:url(/images/b-Home-GreenProducts.gif);
		margin:0 0 0 15px;
	}


	
	/* ======================================================================================
	=6.2: SUB PAGE CONTENT
	====================================================================================== */
	.box-3 h4{
		padding:6px 0 0 6px;
		color:#001c47;
		font-size:1.33em;
		font-weight:bold;
	}
	.box-3 h4 a{
		font-size:1em;
	}
	.box-3 p{
		width:118px;
		margin:0 0 0 6px;
		font-size:.91em;
		color:#4e4b3c;
	}
	.box-3 a{
		font-size:1.0em;
	}
	
	/* ID for "Get to know Triad" box on sub pages */
	#getToKnow-sub{
		background-image:url(/images/b-Sub-GetToKnow.gif);
		margin:0 0 15px 0;
	}
	
	/* ID for "Products" box on sub pages */
	#products-sub{
		background-image:url(/images/b-Sub-Products.gif);
		margin:0 0 15px 0;
	}

	/* ID for "Green Products" box on sub pages */
	#greenProducts-sub{
		background-image:url(/images/b-Sub-GreenProducts.gif);
		margin:0 0 0 0;
	}
	
	/* 1st type of paragraph, used for most content paragraphs */
	p.type1{
		margin-bottom:22px;
	}
	
	/* 2nd type of paragraph, used for last paragraph in content on "About Us" page */
	p.type2{
		margin-bottom:85px;
	}
	
	/* 3rd type of paragraph, used on products pages */
	p.type3{
		margin:0;
	}
	h3.productName{
		font-size:1.25em;
		color:#001c47;
		text-transform:uppercase;
		font-weight:bold;
		margin:-2px 0 5px 0;
	}
	img.productLogo{
		width:217px;
		height:59px;
		margin:10px 0 10px 25px;
		display:block;
		float:right;
	}
	
	
	
	
	
/* ==========================================================================================
=7.0: COPYRIGHT
========================================================================================== */
.copyright{
	width:944px;
	height:44px;
	background-image:url(/images/b-Footer.gif);
}
.copyright p{
	padding:17px 0 0 70px;
	font-size:.916em;
	color:#848977;
}
.copyright a{
	font-size:1em;
	color:#848977;
	font-weight:normal;
}

.copyright a:link{
	font-size:1em;
	color:#848977;
	font-weight:normal;
}




/* ==========================================================================================
=8.0: MISC
========================================================================================== */
/* div to clear */
div.clear{
	height:0;
	clear:both;
	display:block;
}

/* div used for horizontal dividers */
div.divider{
	width:100%;
	height:1px;
	line-height:1px;
	background:url(/images/Horizontal-Divider.gif) repeat-x;
	margin:15px 0;
	border:0;
	padding:0;
}

/* link classes for the "More ->" links on home and sub pages */
a.more-home{
	background:url(/images/b-link.gif) no-repeat 33px 2px;
	margin:2px 0 0 0;
	padding:0 8px 0 0;
	display:block;
}
a.more-sub{
	background:url(/images/b-link-sub.gif) no-repeat 33px 3px;
	padding:0 8px 0 0;
	display:block;
}