/* CSS Document 
	Mesher Supply Home Page Style Sheet
	
	Scott Hoffman
	June, 2006


*/

/* Zero all margins by default */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	/* Body style defaults */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #999999;
	background-color: #999999;
	text-align: center;
}


/* Utility classes used in various places */ 
.leftimage {
	/* Float left */
	float: left;
	margin: 0 10px 20px 0;
	border: 1px solid #000000;
}

.rightimage {
	/* Float right */
	float: right;
	margin: 0 0 20px 15px;
	border: 1px solid #000000;
	width: 150px;
}

.clearit {
	/* Clear floats (both left and right) */
	display: block;
	clear: both;
}

.container {
	/* A container to fit inside a div so it fills to the bottom */
	width: 99% ;
	float: right ;
}

/* End of classes */



/* ID selectors */
#wrapper {
	/* Wrapper for the entire page.  Set to 785px for 800px wide screen */
	width: 785px;
	margin:10px auto;
	border: 1px solid #000000;
	text-align: left;
}


#banner {
	/* The Mesher Banner */
	height: 130px;
	background-image:url(../images/topbanner.jpg) ;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
}


#leftcol {
	width: 120px;
	float: left;
	margin-top: 10px;
	padding-right: 20px;
	padding-left: 5px ;
	background-image: url(../images/leftcol-bg.jpg) ;
	background-repeat:repeat-y ;
	text-align: center ;
	color: #000000
}

	#leftcol h1 {
		font-size:14px ;
		padding-bottom: 5px ;
	}
	
	#leftcol #nav2 {
		/* Left column for navigation	200px wide */
		border-bottom: 1px solid #000000;
		text-align: left ;
	}
	
		#leftcol #nav2 ul {
			padding: 0;
			margin: 0;
			background-color: transparent ;
			list-style-type: none;
			border: 1px solid #000000;	
			font-size: 90% ;
	}
		
			#leftcol #nav2 ul li {
				display: inline;
				padding: 0;
				margin: 0;
			}
			
				#leftcol #nav2 ul li a {
					background-color: #D4DAF2;
					border-bottom: 1px solid #000000;
					color: #000000;
					display: block;
					padding: 4px 0 6px 4px;
					text-decoration: none; 
					height: 1%;  /* Hack to make IE treat this correctly */
				}
				
					#leftcol #nav2 ul li a:hover, #leftcol #nav2 ul li a:focus {
						background-color: #003366;
						border-right: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						color: #ffffff;
					}


			
#content {
	/* Main content area.  Margin set to right of left-column navigation */
	margin-left: 120px;
	margin-bottom: 20px;
	margin-top: 10px ;
	padding-bottom: 20px ;
	background-color:#FFFFFF ;
}

	.image-b {
		float:right;
		border: 2px solid #BBE0F4;
		margin-left: 5px ;
	}
	
	.part {
		background-color: #FFFFFF;
		font-weight: bold;
		text-transform: uppercase;
		background-color:#FFFFFF ;
	}
	
	.price {
		font-weight: bold;
		color: #FF0000;
		background-color:#FFFFFF ;
	}
	
	.list-price {
		color: #666666;
		text-decoration: line-through;
		background-color:#FFFFFF ;
	}

	#content h1{
		color: #4D045E;
		padding: 0px;
		margin-right: 5px;
		margin-left: 10px;
		text-align: center;
		font-style: italic;
		font-size: 200%;
		border-width: medium;
		border-style: none none solid;
	}
	
	#content h2{
		color: #003366;
		padding: 0;
		margin: 20px;
		font-size: 150%;
		text-align: center;
	}
	
	#content h3{
		color: #4D045E;
		padding: 0;
		margin: 20px;
		font-size: 120%;
		text-align: left;
	}
	
	#content h4{
	color: #003366;
	padding: 0;
	margin: 20px;
	font-size: 100%;
	text-align: left;
	font-weight: bold;
	}
	
	#content p{
		color: #000000;
		text-align: left;
		padding-right: 20px;
		padding-bottom: 10px;
		padding-left: 10px;
	}
	
	#content ul li {
		color:#000000;
		margin-bottom: 10px;
		margin-left: 50px;
	}

	#content #left {
	float:left;
	padding-left: 15px;
	width: 300px;
	padding-right: 3px;
	border-style: none;
	background-color: #FFFFFF;
	font-size: 120%;
	vertical-align: middle;
	}
	
		#content #left p{
			color: #000000;
			text-align: center;
			padding-bottom: 5px;
		}
	
	#content .left-nar {
	float:left;
	padding-left: 15px;
	width: 300px;
	padding-right: 3px;
	border-style: none;
	background-color: #FFFFFF;
	font-size: 100%;
	text-align: left ;
	}
	
	#content #right {
		margin-left: 340px;
		padding-left: 3px ;
		padding-right: 20px ;
		border-style: none;
		background-color: #FFFFFF ;
	}

		#content #right p{
			color: #000000;
			text-align: left;
			padding: 10px ;
		}

	#content #right2 {
	margin-left: 340px;
	padding-left: 3px;
	margin-right: 10px;
	border-style: double none none;
	background-color: #FFFFFF;
	border-width: thick;

	}
	
		#content #right2 p{
	color: #000000;
	text-align: center;
	padding: 2px;
	padding-right: 10px ;
	border: 2px none #000000;
		}

#nav1 {
	border-bottom: 1px solid #FFFFFF;
	padding-bottom: 5px;
	background-color: #4D045E;
	color: #FFFFFF;
	font-size: 120%;
	text-align: center;
	width: 785px;
	font-style: italic;
}

	#nav1 ul {
		padding: 0;
		padding-top: 5px ;
		margin: 0;
		background-color: #4D045E;
	}

		#nav1 ul li {
			display: inline;
			padding: 0;
			margin: 0;
		}
		
			#nav1 ul li a {
				color: #FFFFFF;
				background-color: #D4DAF2;
				border-bottom: 1px solid #000000;
				color: #000000;
				padding: 0 25px 0 25px;
				text-align: center;
				text-decoration: none ;
				width: 9em;
			} 
			
				#nav1 ul li a:hover, #nav1 ul li a:focus{
						background-color: #003366;
						border-right: 1px solid #ffffff;
						border-bottom: 1px solid #ffffff;
						color: #ffffff;
				}
	
#footer {
	margin-top: 20px ;
	height: 75px;
	color:#000000;
	background: url(../images/footer-bg.jpg);
}	

	#footer h1 {
		font:Verdana, Arial, Helvetica, sans-serif ;
		font-size:18px ;
		text-align: center ;
		font-style:italic ;
	}
	
	#footer ul {
		background-color: transparent;
		border: 1px solid #000000;
		list-style: none;
		border-style: none;	
	}

		#footer ul li {
	padding-left: 10px;
	margin: 0;

		}