.catprods {
	font-size: 12px;
}
.catprods .header_row {
	border-bottom: 1px solid #685674;
	/* Set clear to both to ensure header row gets it's own line */
	clear: both;
}
	.catprods .header_row a {
		text-decoration: none;
	}
	.catprods .header_row a:hover {
		text-decoration: none;
		color: #000000;
	}
	
.catprods #sort {

}	
	.catprods #sort a {
		border: 1px solid #ECECEC;
		float: left;
		margin: 3px;
		padding: 3px;
	}
		.catprods #sort a#current {
			border: 1px solid #685674;
		}
		.catprods #sort a:hover {
			background-color: #ECECEC;
			border: 1px solid #685674;
		}
.catprods .product_span_links {
	border-top: 1px solid #9b8e89;
	text-align: center;
	line-height: 24px;
	padding-top: 5px;
}
.catprods span.product_span_link {
	border: 1px solid #685674;
	font-weight: bold;
	margin: 3px;
	padding: 3px;
}
.catprods a.product_span_link {
	/* Chances are you'll want to set this to background color. Otherwise the page is too busy */
	border: 1px solid white;
	margin: 3px;
	padding: 3px;
}
.catprods a.product_span_link:hover {
	border: 1px solid #685674;
	color: #655654;
	text-decoration: none;
}

/* From here on, the settings are divided based on whether we are doing list or tiles */

/* ***********************************
	PRODUCT LIST
   *********************************** */

.catprods table#product_list {
	/* Add a border to the table around all the tiles. */
	border: 1px solid #ECECEC;	
}
.catprods #product_list td {
	/* Set borders on the product's cell */
	border: none;
	/* Padding of the cell */
	padding: 10px;
}
.catprods #product_list .product_name {
	font-size: 14px;
	font-weight: bold;
	/* Alignment of the product name (left/center/right) */
	text-align: left;
}
.catprods #product_list .price {
	font-weight: bold;
}
/* Format the table cell in which the image resides */
.catprods #product_list .image {
	background-color: none;
	/* Align the image and the 'more info' text (if applicable) */
	text-align: center;
	/* Width of the cell */
	width: 155px;
}
	/* Format the image itself */
	.catprods #product_list .image img {
		
	}
	/* Remove underlining. Leave this in. It's a good idea to have a rollover color for the 'more info' link */
	.catprods #product_list .image a {
		text-decoration: none;
	}
		.catprods #product_list .image a:hover {
			color: #000000;
			text-decoration: none;
		}

/* ***********************************
	PRODUCT TILES
   *********************************** */

.catprods #product_tiles .product_name {
	font-size: 18px;
	font-weight: bold;
	float: left;
}
.catprods #product_tiles .price {
	font-weight: bold;
}
.catprods table#product_tiles  {

}
.catprods #product_tiles td {
	/* Padding of the cell */
	padding: 10px;
}
/* Use this to format the product images that are in a tile format. This affects a div that the image is in. Add borders/margins. */
.catprods #product_tiles .image_tile a {
	/* This background color looks really good if it matches a consistent bgcolor in the images */
	/* Border around the container of the images */
	border: none;
	/* Height of the box that the image resides in */
	/* They are both defined because IE has a bad line-height interpretation */
	/* Ensure the height includes the borders. */
	line-height: 100px;
	height: 100px;
	/* Use the margin to keep the image container away from other elements */
	/* To center the image container, use 0px auto */
	margin: 0px auto;
	/* Alignment of the image */
	text-align: center;	
	/* We need to turn off any underlining, leave this in. */
	text-decoration: none;
	/* Width of the box that the image resides in */
	width: 100px;
}
	.catprods #product_tiles .image_tile a:hover {
		/* Specify a new border if you'd like a border hightling effect */
		border: none;		
		/* We need to turn off any underlining, leave this in. */
		text-decoration: none;
	}
/* Use this to format the image itself */	
	.catprods #product_tiles .image_tile img {
		border: 1px solid #685674;
		vertical-align: middle;		
	}



/* Use this to add a border or background to each product */
/* You can also use this to change the font of the product's cell. */
.catprods .productrow {
	text-align: right;
	background-color: #ECECEC;
}