/* --------------------------------------------------
-----------------------------------------------------
	
	Domain: sutherland.chicodev.com
	Stylesheet: /ui/styles/main.php
	Author: Brent White - ChicoWebDesign.com
	Version: June 01 2009
	
-----------------------------------------------------
-------------------------------------------------- */

/* --------------------------------------------------
GLOBAL
-------------------------------------------------- */

* {
	outline: none;
	margin: 0;
	padding: 0;
	}
html {
	
	}
body {
	background: #000000 url(/ui/public/image/layout/body.gif) no-repeat 0 0;
	padding: 15px 0 0;
	font-family: Arial;
	font-size: 12px;
	}
a {
    color: #669934;
    text-decoration: none;
	}
	a:hover {
		color: #669934;
		text-decoration: underline;
		cursor: pointer;
		}
img {
	display: block;
	}
/* --------------------------------------------------
GENERAL
-------------------------------------------------- */
.clear {
	clear: both;
	}
	br.clear {
		display:		block !important;
		height:			0 !important;
		line-height:	0 !important;
		font-size:		0 !important;
		}
/* --------------------------------------------------
HEADER
-------------------------------------------------- */
#header {
	background: #000;
	min-width: 980px;
	width: 100%;
	height: 170px;
	border: solid #631010;
	border-width: 1px 0;
	}
	h1#header-logo {
		position: relative;
		top: 20px;
		left: 25px;
		background: url(/ui/public/image/layout/sutherland-landscape-logo.gif) no-repeat 0 0;
		width: 393px;
		height: 128px;
		}
		h1#header-logo a {
			display: block;
			line-height: 128px;
			text-indent: -9999px;
			overflow: hidden;
			}
/* --------------------------------------------------
CONTENT
-------------------------------------------------- */
#content {
	width: 960px;
	}
	/* --------------------------------------------------
	CONTENT -- LEFT COLUMN
	-------------------------------------------------- */
	#left-column {
		width: 255px;
		float: left;
		padding: 40px 10px 0 0;
		}
		/* --------------------------------------------------
		CONTENT -- LEFT COLUMN -- NAVIGATION
		-------------------------------------------------- */
		#navigation {
			display: block;
			width: 240px;
			padding: 0 0 0 15px;
			}
			#navigation li {
				display: block;
				display: inline-block;
				list-style: none;
				width: 240px;
				}
				#navigation li a {
					display: block;
					display: inline-block;
					background: url(/ui/public/image/layout/navigation-icon.png) no-repeat 0 0;
					width: 215px; 
					font-size: 14px;
					font-weight: bold;
					text-transform: uppercase;
					line-height: 16px;
					color: #fff;
					padding: 5px 0 4px 25px;
					}
					#navigation li a:hover {
						text-decoration: none;
						color: #669934;
						}
				#navigation li ul {
					width: 215px;
					padding: 0 0 16px 25px;
					}
					#navigation li ul li {
						width: 211px;
						border: solid #631010;
						border-width: 0 0 0 4px;
						}
						#navigation li ul li a {
							background: none;
							width: 191px;
							font-weight: normal;
							text-transform: capitalize;
							color: #669934;
							padding: 3px 0 0 20px;
							}
							#navigation li ul li a:hover {
								color: #fff;
								}
							#navigation li ul li.active a {
								background: url(/ui/public/image/layout/navigation-active.png) no-repeat 0 0;
								width: 201px;
								font-weight: bold;
								padding-left: 10px;
								color: #669934;
								cursor: default;
								}
					#navigation li ul li ul,
					#navigation li ul li ul * {
						display: none;
						}
		/* --------------------------------------------------
		CONTENT -- LEFT COLUMN -- DIVIDER
		-------------------------------------------------- */
		.divider {
			display: block;
			background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0;
			width: 255px;
			height: 10px;
			margin: 15px 0;
			}
	/* --------------------------------------------------
	CONTENT -- RIGHT COLUMN
	-------------------------------------------------- */
	#right-column {
		position: relative;
		background: url(/ui/public/image/layout/right-column.png) repeat-y 0 0;
		width: 674px;
		float: left;
		padding: 40px 0 40px 20px;
		overflow: hidden;
		}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- HEADING
		-------------------------------------------------- */
		h1#heading {
			display: block;
			position: absolute;
			top: 147px;
			left: 25px;
			z-index: 10;
			background: #000;
			width: 624px;
			height: 48px;
			padding: 0 20px;
			font-weight: normal;
			font-size: 28px;
			line-height: 48px;
			}
		 p.note {
		 	color: #669934;
		 	font-size: 10px;
		 	}
		/* --------------------------------------------------	
		BANNER
		-------------------------------------------------- */
		#banner-wrapper {
			position: relative;
			height: 165px;
			margin: 0 0 20px 0;
			}
			#banner-wrapper.home {
				height: 255px;
				}
			#banner {
				background: #000;
				width: 664px;
				height: 150px;
				overflow: hidden;
				border: solid 5px #631010;
				}
				#banner-wrapper.home #banner {
					height: 240px;
					}
				#banner-loader {
					display: none;
					}
				#banner a.banner-link {
					display: block;
					}
					#banner a.banner-link img {
						border: none;
						}
				
				#banner-navigation {
					position: absolute;
					bottom: 0;
					left: 0;
					background: #631010;
					width: 674px;
					height: 3px;
					border-top: solid 2px #000;
					}
					#banner-navigation .banner-images {
						float: right;
						height: 3px;
						}
						#banner-navigation .banner-images li {
							display: block;
							float: left;
							background: #000;
							height: 3px;
							padding: 0 0 0 5px;
							}
							#banner-navigation .banner-images li a {
								display: block;
								float: left;
								background: #631010;
								width: 10px;
								height: 3px;
								text-indent: -9999px;
								overflow: hidden;
								}
								#banner-navigation .banner-images li.selected a {
									background: #fff;
									}
				#banner #caption {
					position: absolute;
					background: #000;
					bottom:10px;
					left: 5px;
					width: 624px;
					height: 20px;
					padding: 10px 20px;
					overflow: hidden;
					}
					#banner.home #caption {
						top:5px;
						left: 440px;
						width: 190px;
						height: 200px;
	 					padding: 20px;
						}
					#banner #caption h1,
					#banner #caption h2,
					#banner #caption h3,
					#banner #caption h4,
					#banner #caption h5,
					#banner #caption h6 {
						font-size: 14px;
						font-style: italic;
						font-weight: bold;
						color: #669934;
						padding: 0 0 20px 0;
						}
					#banner #caption p,
					#banner #caption a {
						font-size: 12px;
						line-height: 18px;
						color: #fff;
						}
					#banner #caption a {
						font-weight: bold;
						text-decoration: none;
						}
						#banner #caption a:hover {
							text-decoration: underline;
							}
				#banner .pagination {
					display: none;
					}

		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- HEADINGS
		-------------------------------------------------- */
		#right-column h1,
		#right-column h2,
		#right-column h3,
		#right-column h4,
		#right-column h5,
		#right-column h6 {
			color: #ffffff;
			font-weight: normal;
			}
		#right-column h1 {
			font-size: 24px;
			}
			#right-column h1 span {
				color: #631010;
				}
		#right-column h2 {
			font-size: 14px;
			line-height: 24px;
			}
		#right-column h3 {
			font-size: 16px;
			line-height: 24px;
			}
		#right-column h4 {
			font-size: 14px;
			line-height: 22px;
			}
		#right-column h5 {
			font-size: 14px;
			line-height: 22px;
			}
		#right-column h6 {
			font-size: 14px;
			line-height: 22px;
			}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- PARAGRAPH
		-------------------------------------------------- */
		p {
			color: #ffffff;
			font-size: 14px;
			line-height: 18px;
			padding: 10px 0;
			}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- HOME MODULE
		-------------------------------------------------- */
		ul#home-module {
			padding: 30px 0 0 0;
			}
			ul#home-module li.home-module-column {
				position: relative;
				list-style: none;
				float: left;
				width: 192px;
				min-height: 135px;
				height: auto !important;
				height: 135px;
				padding: 0 0 35px 30px;
				}
				ul#home-module li.home-module-column a.view {
					display: block;
					position: absolute;
					bottom: 0;
					right: 0;
					background: url(/ui/public/image/layout/view-all.gif) no-repeat 0 0;
					width: 70px;
					height: 26px;
					font-family: Georgia;
					font-size: 12px;
					line-height: 26px;
					color: #ffffff;
					text-align: right;
					}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- CONTENT HEADING
		-------------------------------------------------- */
		#content-heading {
			display: block;
			background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0;
			color: #fff !important;
			font-size: 18px;
			line-height: 30px;
			height: 30px;
			margin: 0 0 20px 0;
			padding: 0 20px;
			}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- BREADCRUMBS
		-------------------------------------------------- */
		#breadcrumbs {
			padding: 0 0 10px;
			}
			#breadcrumbs li {
				list-style: none;
				float: left;
				font-size: 14px;
				line-height: 18px;
				color: #669934;
				padding: 0 10px 0 0;
				text-transform: capitalize;
				}
				#breadcrumbs li a {
					display: block;
					float: left;
					font-size: 14px;
					line-height: 18px;
					color: #669934;
					text-transform: capitalize;
					font-weight: bold;
					}
					#breadcrumbs li a:hover {
						color: #ffffff;
						text-decoration: none;
						}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- PAGINATION
		-------------------------------------------------- */
		.pagination {
			
			}
			.pagination p {
				float: left;
				}
			.pagination ul {
				float: right;
				}
				.pagination ul li {
					list-style: none;
					float: left;
					font-size: 14px;
					color: #669934;
					padding: 0;
					}
				.pagination li a {
					display: block;
					float: left;
					font-size: 14px;
					color: #669934;
					border-right: solid 1px #631010;
					padding: 0 6px;
					}
					.pagination li a span {
						color: #631010;
						}
					.pagination li a:hover {
						color: #ffffff;
						text-decoration: none;
						}
					.pagination li.active a,
					.pagination li a.active {
						color: #ffffff;
						cursor: default;
						}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- PRODUCT BROWSE
		-------------------------------------------------- */
		ul#product-browse {
			padding: 20px 0;
			}
			ul#product-browse li {
				list-style: none;
				float: left;
				width: 168px;
				height: 280px;
				text-align: center;
				}
				ul#product-browse li a {
					display: block;
					width: 145px;
					height: 194px;
					color: #ffffff;
					font-weight: bold;
					font-size: 14px;
					}
					ul#product-browse li a img {
						background: #631010;
						padding: 5px;
						border: none;
						}
					ul#product-browse li a em {
						display: block;
						padding-top: 20px;
						text-transform: uppercase;
						font-style: normal;
						}
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- PRODUCT DESCRIPTION
		-------------------------------------------------- */
		#product-details {
			padding: 30px 0 0 0;
			}
			#product-details .left-column {
				float: left;
				width: 355px;
				padding: 0 15px 0 0;
				}
			#product-details .left-column h2#title {
				color: #631010;
				font-size: 20px;
				}
			#product-details .left-column ul.value {
				border: solid #631010;
				border-width: 1px 0;
				margin: 0 0 0 0;
				padding: 0 0 10px ;
				}
				#product-details .left-column ul.value li {
					clear: both;
					display: block;
					display: inline-block;
					list-style: none;
					width: 355px;
					color: #ffffff;
					}
					#product-details .left-column ul.value li strong,
					#product-details .left-column ul.value li em {
						display: block;
						float: left;
						width: 172.5px;
						padding: 0 0 0 5px;
						font-weight: normal;
						font-style: normal;
						}
					#product-details .left-column ul.value li span {
						display: block;
						border-bottom: solid 1px #631010;
						height: 18px;
						font-weight: bold;
						font-size: 10px;
						line-height: 18px;
						text-transform: uppercase;
						}
			#product-details .right-column {
				float: left;
				width: 303px;
				overflow: hidden;
				}
				#product-images li {
					float: left;
					padding: 0 10px 10px 0;
					}
				#product-images a {
					display: block;
					float: left;
					background: #631010;
					padding: 5px;
					overflow: hidden;
					}
					#product-images a img {
						border: none;
						}
						
		/* --------------------------------------------------
		CONTENT -- RIGHT COLUMN -- PRODUCT DESCRIPTION
		-------------------------------------------------- */
		#product-description {
			padding: 20px 0 0 0;
			}
			#product-description .left-column {
				float: left;
				width: 259px;
				padding: 0 10px 0 0;
				}
				#product-description .left-column a {
					display: block;

					float: left;
					padding: 10px;
					background: #523017;
					}
					#product-description .left-column a img {
						border: none;
						}
			#product-description .right-column {
				float: left;
				width: 394px;
				padding: 0 0 0 10px;
				}
			#product-description .right-column p {
				font-size: 14px;
				margin: 0 0 20px;
				}
			#product-description .right-column fieldset,
			#product-description .right-column fieldset legend {
				border: none;
				color: #ffffff;
				font-size: 18px;
				}
			#product-description h3,
			#product-description .right-column fieldset strong {
				font-size: 14px;
				}
			#product-description .right-column fieldset div {
				padding: 10px 0;
				}
				#product-description .right-column fieldset div .input {
					padding: 3px;
					border: solid 1px #8e6f5d;
					}
				#product-description .right-column fieldset .submit,
				#product-description .right-column fieldset div a {
					float: left;
					margin: 0 20px 0 0;
					width: 132px;
					height: 35px;
					}
					#product-description .right-column fieldset div a img {
						border: none;
						width: 132px;
						height: 35px;
						}
			#product-description h3 {
				font-size: 14px;
				padding: 20px 0 0 0;
				}
				#product-description .product-thumbnails li {
					list-style: none;
					float: left;
					width: 131px;
					}
					#product-description .product-thumbnails li a {
						display: block;
						float: left;
						padding: 10px;
						background: #523017;
						width: 110px;
						height: 148px;
						}
						#product-description .product-thumbnails li a img {
							border: none;
							}
			#product-description .product-navigation {
				padding: 40px 0 0 134px;
				}
				#product-description .product-navigation li {
					list-style: none;
					float: left;
					background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0;
					margin: 0 5px 0;
					width: 110px;
					height: 30px;
					}
					#product-description .product-navigation li a {
						display: block;
						float: left;
						width: 110px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						color: #fff;
						text-transform: uppercase;
						}
					#product-description .product-navigation li.prev a {
						background: url(/ui/public/image/layout/product-prev.gif) no-repeat 24px 50%;
						}
					#product-description .product-navigation li.next a {
						background: url(/ui/public/image/layout/product-next.gif) no-repeat 80px 50%;
						}

/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
#footer {
	padding: 100px 0 0 0;
	}
	#footer-logo {
		background: url(/ui/public/image/layout/sutherland-landscape-footer.png) no-repeat 0 0;
		width: 197px;
		height: 68px;
		text-indent: -9999px;
		overflow: hidden;
		}
		#footer ul {
			padding: 10px 0 0 0;
			}
			#footer ul li {
				display: inline;
				list-style: none;
				color: #669934;
				font-size: 12px;
				line-height: 26px;
				white-space: nowrap;
				padding: 0 50px 0 0;
				}
				#footer ul li strong {
					color: #ffffff;
					font-weight: normal;
					}

.input,
.textarea {
	padding: 3px;
	border: none;
	background: #fff;
	}
.required { 
	color: red;
	}
input.long {
	width: 50%;
	}
textarea.long {
	width: 50%;
	}
fieldset, .form-status {
	border: none;
	background: none;
	padding: 5px;
	color: #fff;
	}
	fieldset legend {
		display: none;
		}
	fieldset div { 
		padding: 2px;
		}
		fieldset div label {
			cursor: pointer;
			float: left;
			width: 150px;
			color: #fff;
			}

ul.manufacturers {
	padding: 0;
	margin: 0;
	}
	ul.manufacturers li {
		list-style: none;
		float: left;
		margin: 0;
		padding: 0 20px 10px 0 !important;
		height: 50px;
		line-height: 50px;
		}
		ul.manufacturers li a {
			background-position: 0 -50px;
			background-repeat: no-repeat;
			display: block;
			text-indent: -3000px;
			font-size: 0;
			width: 120px;
			height: 50px;
			}
			ul.manufacturers li a:hover {
				background-position: 0 0;
				}
		ul.manufacturers a.allanblock {
			background-image: url(/ui/public/image/logos/allanblock.gif);
		}
		ul.manufacturers a.anchor {
			background-image: url(/ui/public/image/logos/anchor.gif);
		}
		ul.manufacturers a.aquascape {
			background-image: url(/ui/public/image/logos/aquascape.gif);
		}
		ul.manufacturers a.basalite {
			background-image: url(/ui/public/image/logos/basalite.gif);
		}
		ul.manufacturers a.belgard {
			background-image: url(/ui/public/image/logos/belgard.gif);
		}
		ul.manufacturers a.calstone {
			background-image: url(/ui/public/image/logos/calstone.gif);
		}
		ul.manufacturers a.eldorado {
			background-image: url(/ui/public/image/logos/eldorado.gif);
		}
		ul.manufacturers a.keystone {
			background-image: url(/ui/public/image/logos/keystone.gif);
		}
		ul.manufacturers a.landw {
			background-image: url(/ui/public/image/logos/lwstone.gif);
		}
		ul.manufacturers a.pavestone {
			background-image: url(/ui/public/image/logos/pavestone.gif);
		}
		ul.manufacturers a.realstone {
			background-image: url(/ui/public/image/logos/realstone.gif);
		}
		
ul.tabs li {
	float: left;
	list-style: none;
	padding: 20px 8px 0 0;
	}
	ul.tabs li a {
		background-image: url(/ui/public/image/layout/calculator.jpg);
		background-repeat: no-repeat;
		display: block;
		height: 34px;
		background-color: #000;
		line-height: 34px;
		padding: 0 10px 0 50px;
		text-decoration: none;
		border-style: solid;
		border-color: #28351c;
		border-width: 1px 1px 0 1px;
		width: 70px;
		}
	ul.tabs li a:hover,
	ul.tabs li a.active {
		background-color: #28351c;
		}
		ul.tabs li a.rectangle { background-position: 10px 0; }
		ul.tabs li a.triangle { background-position: 10px -68px; }
		ul.tabs li a.circle { background-position: 10px -34px; }		
		ul.tabs li a:hover.rectangle, ul.tabs li a.active.rectangle { background-position: 10px -102px; }
		ul.tabs li a:hover.triangle, ul.tabs li a.active.triangle { background-position: 10px -170px; }
		ul.tabs li a:hover.circle, ul.tabs li a.active.circle { background-position: 10px -136px; }		
#tab-cont {
	border: 1px solid #28351c;
	padding: 15px;
	display: block;
	float: none;
	clear: both;
	}
	#tab-cont input {
		padding: 3px;
		border: none;
		}
	#tab-cont span.desc {
		display: block;
		clear: left;
		width: 120px;
		float: left;
		}
#rectangle {
	width: 100%;
	background: url(/ui/public/image/layout/rectangle.jpg) no-repeat 100% 50%;
	}
#circle {
	width: 100%;
	background: url(/ui/public/image/layout/circle.jpg) no-repeat 100% 50%;
	}
#triangle {
	width: 100%;
	background: url(/ui/public/image/layout/triangle.jpg) no-repeat 100% 50%;
	}
	
#site_by {
	width: 133px;
	height: 30px;
	display: block;
	background: url(/ui/public/image/layout/cwd-tag.gif) no-repeat 0 0;
	text-indent: -3000px;
	}
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	background: url(/ui/public/image/lightbox/loading.gif) no-repeat 50% 45%;
	position: absolute;
	height: 100%;
	width: 100%;
	}
	#lightbox-loading img {
		display: none;
		}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}