/* 
####################################################################
CSS PRODUCTS PAGE POPOUT SIDE BAR MENUS
I see you looking at my code.... 
So, I commented it heavily so you can understand what
is going on... enjoy!
####################################################################
*/
#product_listing {
	height:132px; 
	width:132px; 
	position:relative;
}
/* top level */
#product_listing ul {
	margin:0; 
	padding:0; 
	list-style:none; 
	white-space:nowrap; 
	text-align:left; 
	padding:1px 1px 0 1px; 
	background:#fff;
}
#product_listing li {
	margin:0; 
	padding:0; 
	list-style:none;
	display:inline;
}
/* second level */
#product_listing ul ul {
	position:absolute; 
	left:-9999px;
}
/* not sure yet on this */
#product_listing ul#toplevel {
	position:absolute; 
	left:0; 
	top:0;
}
/* all links */
#product_listing a { 
	display:block; 
	font: 12px "Palatino Linotype", "Book Antiqua", Palatino, serif; 
	color:#000; /* black */ 
	line-height:25px; /* original value: 22px */
	text-decoration:none;
	padding:0px 20px 0 10px; /* TOP RIGHT BOTTOM LEFT */
} 
/* flyout section
this section places the arrow to the right and center
*/
#product_listing li a.fly {
	background: url(http://www.thearchnc.com/site_2010/arrow.gif) no-repeat right center;
}
/* hover styles for all the links in the top level LI 

*/
#product_listing li a:hover {
	background-color:#0C6; 
	color:#0C6;
} 

/* child selector
this is the hover style for ALL the list options
*/
#product_listing li:hover > a {
	background-color:#94a99a; /* light turquoise */ 
	color:#fff;
}

/* this is for an invalid or not in use link
basically if there is no page for this section,
i want it to look different
so we do that.  

it also allows for a different background when hovered over.
*/
#product_listing li > a.invalid {
	color: #999;
}
#product_listing li:hover > a.invalid {
	background-color: #CCC;
	color:#333;
}

/* these are all the flyout menus, for every nested
list as far down as it goes down and out
*/
#product_listing ul li:hover > ul {
	left:100%;
	/* setting this from -23 to -1 to see if I can pop it up UNDER the other menu */
	margin-top:-23px; 
	/* setting this from -1 to -131 to see if I can pop it up UNDER the other menu */
	margin-left: -1 px;
	border: 1px solid #8b8b8b;
	background-color: #E6E6E6;
	/* 
	added some shadows underneath the boxes
	for progressive enhancement  here's how
	it works for those who don't know:
	horizonal vertical blur color */
	box-shadow: 2px 2px 8px #888; /*everyone else */
	-webkit-box-shadow: 2px 2px 8px #888; /* safari/google */
	-moz-box-shadow: 2px 2px 8px #888; /* mozilla */
	/*
	now add some transparency, because
	darn it, its cool
	this only works for the most modern browsers
	but for those who see it, it looks awesome
	remember, this is just a HINT of transparency
	by lowering the numbers you can see through more
	of the background
	*/
	filter:alpha(opacity=93);
	-moz-opacity:0.93;
	-khtml-opacity: 0.93;
	opacity: 0.93;
}

/*########################################################################
##########################################################################
*/
#featured_sale {
	background-color: #913e16;
	color: white;
	text-decoration: none;
	font: bold .8em/.8em "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #555;
	padding: 6px; 
}
#all_products {
	/* this is the div for the products */
	height: 600px;
	width: 450px;
	/* allow anything beyond the edge to scroll
	like a frame but smarter and cleaner
	*/
	overflow: auto;
	
}
#finishes,#flooring,#forno,#tiles,#counters,#wood,#accents,#woven,#gifts {
	padding: 4px;
}
	
.product {
	float: left;
	margin: 0 5px -2px 5px;
	width: 90px;	
}
.product img {
	border: 1px solid #41493A;
}
.product p {
	text-align: left;
	font-size: .85em;
}
.product a {
	text-decoration:none;