/* backgrounds, pixel-based values (dimensions, spacing), positioning, alignment, containment */

/* 1-0 General Layout */

/* 2-0 Subscribe Form */

/* 3-0 Product Gallery */

/* 4-0 Contact Form */


/* ================================================== */
/* 1-0 General Layout */

/* in order of appearance within HTML code */

html {
	background: #e6e6e6 url(/images/bg.png) center top no-repeat;
}
body {
	margin: 30px auto 0;
	overflow: auto;				/* contains any floated children */
	width: 880px;
}

div#banner {
	background: url(/images/bg_banner.png) center top no-repeat;
	height: 140px;
}


div#nav {
	overflow: auto;				/* contains any floated children */
	width: 880px;
}

div#nav ul {
	overflow: auto;				/* contains any floated children */
}
	
	div#nav ul li {
		float: left;
		overflow: auto;			/* contains any floated children */
		width: 220px;			/* specific value for floated element */
	}
		
		div#nav ul li a {
			display: block;
			height: 27px;
			width: 220px;
		}
		
			div#nav ul li a.link-home {
				background: url(/images/bg_nav_home.png) left top no-repeat;
			}
			
			div#nav ul li a.link-bath {
				background: url(/images/bg_nav_bathware.png) left top no-repeat;
			}
			
			div#nav ul li a.link-outd {
				background: url(/images/bg_nav_outdoor_lighting.png) left top no-repeat;
			}
			
			div#nav ul li a.link-cont {
				background: yellow url(/images/bg_nav_contact_us.png) left top no-repeat;
			}
			
			div#nav ul li a:hover, 
			body#page-home div#nav ul li a.link-home, 
			body#page-bath div#nav ul li a.link-bath, 
			body#page-outd div#nav ul li a.link-outd, 
			body#page-cont div#nav ul li a.link-cont	{	/* you-are-here links */
				background-position: 0 -27px;
			}

			
div#masthead {
	width: 880px;
}


div#content {
	background: #fff;
	border: #b3b3b3 solid 1px;
	border-top: 0px;
	float: left;
	padding: 20px 49px;
	width: 780px;
}

	div#content p#breadcrumb {
		margin-left: 10px;
	}
	
	div#content div#col-wide {
		display: inline;		/* fix for IE6 double-margin bug */
		float: left;
		margin: 0 10px;
		width: 540px;
	}
	
	div#content div#col-narrow {
		display: inline;		/* fix for IE6 double-margin bug */
		float: left;
		margin: 0 10px;
		width: 200px;	
	}
	
div#footer {
	border-bottom: #b3b3b3 solid 1px;
	clear: both;
	height: 28px;
	line-height: 28px;
	margin-bottom: 50px;
	overflow: hidden;			/* contains any floated children */
	padding: 0 50px;
	
}
	div#footer ul {
		display: inline;		/* fix for IE6 */
		float: left;
	}

		div#footer ul  li {
			display: inline;
		}
		
			div#footer ul li a {
				margin-left: 30px;
			}
		
	div#footer  p {
		float: right;
	}
	
/* ================================================== */
/* 2-0 Subscribe Form */ 

/* in order of appearance within HTML code */

form#subscribe-form {
	overflow: auto;				/* contains any floated children */
	width: 200px;					/* same width of div#col-narrow */
}

	form#subscribe-form input {
		border: #b3b3b3 solid 1px;
		width: 196px;
	}
	
	form#subscribe-form input#subscribe {
		background: #999;
		color: #fff;
		float: right;
		width: 96px;
	}
	
	form#subscribe-form input#subscribe:focus, 
	form#subscribe-form input#subscribe:hover {
		background: #000;
		cursor: pointer;
	}
	
	form#subscribe-form input#subscribe:active {
		background: #ffd300;
		color: #000;
	}

	
/* ================================================== */
/* 3-0 Product Gallery */

/* in order of appearance within HTML code */

ul#product-gallery {
	overflow: hidden;			/* contains any floated children */
}

	ul#product-gallery li {
		display: inline;		/* fix for IE6 double-margin bug */
		float: left;
		margin: 0 10px 10px; 
		overflow: hidden;
		width: 112px;
	}

	
/* ================================================== */
/* 4-0 Contact Form */

/* in order of appearance within HTML code */

form#contact-form {
	overflow: hidden;			/* contains any floated children */
	width: 540px;				/* same as div#col-wide */
}

	form#contact-form div.col-left {
		display: inline;		/* fix for IE6 double-margin bug */
		float: left;
		margin-right: 20px;
		width: 200px;
	}
	
		form#contact-form div.col-left p input {
			border: #b3b3b3 solid 1px;
			width: 200px;
		}
		
		form#contact-form div.col-left p input:active, 
		form#contact-form div.col-left p input:focus {
			border-color: #000;
		}
		
	
	form#contact-form div.col-right {
		display: inline;		/* fix for IE6 double-margin bug */
		float: left;
		width: 320px;	
	}
	
		form#contact-form div.col-right p.city-state {
			float: left;
		}
		
		form#contact-form div.col-right p.cleared {
			clear: both;
		}		
		
			form#contact-form div.col-right p input {
				border: #b3b3b3 solid 1px;
				width: 316px;	/* div.col-right minus 4px */
			}
			
			form#contact-form div.col-right p input:active, 
			form#contact-form div.col-right p input:focus {
				border-color: #000;
			}
		
			form#contact-form div.col-right p input#city {
				margin-right: 10px;
				width: 200px;
			}
			
			form#contact-form div.col-right p input#stat {
				width: 100px;
			}
			
			form#contact-form div.col-right p input#post {
				margin-right: 10px;
				width: 100px;
			}
			
			form#contact-form div.col-right p input#coun {
				width: 200px;
			}
			
			form#contact-form div.col-right p input#clear, 
			form#contact-form div.col-right p input#submit {
				width: auto;
			}		
		
			form#contact-form div.col-right p  textarea {
				border: #b3b3b3 solid 1px;
				width: 314px;	/* border is slightly wider in some browsers, hence the slightly smaller width than inputs in same column */
			}
			
			form#contact-form div.col-right p  textarea:active, 
			form#contact-form div.col-right p  textarea:focus {
				border-color: #000;
			}
			
	form#contact-form p.buttons {
			text-align: right;
	}
	
		form#contact-form p.buttons input {
			border: #b3b3b3 solid 1px;
			width: 100px;
		}
		
		form#contact-form p.buttons input#submit {
			background: #999;
			color: #fff;
		}
		
		form#contact-form p.buttons input#submit:focus, form#contact-form p.buttons input#submit:hover, 
		form#contact-form p.buttons input#clear:focus, form#contact-form p.buttons input#clear:hover		{
			background: #000;
			color: #fff;
			cursor: pointer;
		}
		
		form#contact-form p.buttons input#submit:active, 
		form#contact-form p.buttons input#clear:active {
			background: #ffd300;
			color: #000;
		}