/* =Typography
--------------------------------------------------------------*/
body {font: 75% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}


/* =Basic Layout
--------------------------------------------------------------*/
#wrapper {
	position:relative;
	width: 775px; 
	margin:0 auto;
	}

#main {
	width: 775px; 
	clear:left;
	overflow: hidden;
	background: url("../img/bg-main.gif") repeat-y right;
	border-top: 5px solid #fff;
	}

#sidebar {
	width: 195px; 
	float: left;
	}

#content {
	width: 580px; 
	float: left;
	}

/* Used on "normal" pages -but really, what is "normal?"  It's all relative -or subjective.  
   This is for static pages, that's what I mean by "normal." */
.content_buffer {
	padding:25px 25px 5px 25px;
	}


/* =Nav
--------------------------------------------------------------*/
.mainmenu {background: #069; z-index: 10;}
/*.add_menushadow {background: url(menushadow.gif) repeat-x top left;}
#browseby {font-size:10px; border-bottom:none !important;padding-left:0px;}*/


li#search_li {
	background: #069 url("../img/bg-searchbox.gif") no-repeat bottom left !important;
	margin:0;padding:0;
	/*line-height:40px;*/
	}
input#searchquery {
	margin:15px 5px 15px 15px;
	padding:1px;
	display:inline !important;
	}
#search_btn {
	margin:15px 15px 15px  0 ;
	display:inline !important;
}
/* Darkest backgrounds */
li#topnav1 { background: url("../img/bg-topnav2-left.jpg") top left; }
li#topnav2 { background: url("../img/bg-topnav2.jpg") top left; }
li#topnav3 { background: url("../img/bg-topnav2.jpg") top left; }


/* all lists */
#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 20px;
	}

/*So the whole li is a link*/
#nav a {
	display: block;
	width: 184px; 
	text-decoration:none;
	padding-left:5px;
	color:#fff;
	}



/* all list items */
#nav li { 
	float: left;
	border-right:1px solid white;
	border-bottom:1px solid white;
	border-left:1px solid white;
	width: 184px; /* width needed or else Opera goes nuts */
	text-align:left;
	position: relative;
	}


/* Only the top level list */
li.mainmenu	{
	height:30px;
	line-height:1px;
	text-align:center;
	}

li.mainmenu a {text-align:center;}

li.mainmenu a:hover {}

 /* second-level lists */
#nav li ul {
	position: absolute;
	background: #E0DCCF;
	width: 174px;
	text-align:left;
	left: -999em;  /*using left instead of display to hide menus because display: none isn't read by screen readers */
	}

/* Makes store section stick for cart pages */
#nav #topnav1 ul.secondlevel { left: auto; }


li.mainmenu li a {text-align:left;}

#nav li ul a {color:#000;line-height:25px;}

#nav li ul a:hover {
	/*background:#f5f5f5;*/
	background-color: #E0DCCF;
	color:#000;
	}

#nav li a.extendable {
	background: url("../images/beige_arrow.gif") no-repeat right center;
	}
#nav li a.extendable:hover {
	background: #E0DCCF url("../images/brown_arrow.gif") no-repeat right center;
	}

/* third-and-above-level lists */
#nav li ul ul { 
	margin: -23px 0 0 183px;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	}

#nav #topnav1 ul li{background:#F4F0E6;}
#nav #topnav2 ul li{background:#E0DCCF;/*#89a6d5*/}

/* This could have worked, only the bg of the _a is being used for the extendable arrow
#nav #blabla_a {background:#f5f5f5 url(../img/menushadow.gif) top repeat-x;}
#nav #blabla_a:hover {background:#ffc url(../img/menushadow-hover.gif) top repeat-x;}
*/

a.leftnav {
}