@charset "UTF-8";
/* CSS Document */

/* ----------------------------------
			header
-----------------------------------*/
#header {
	background: #fff url(../graphics/spacer_top.gif) no-repeat top;
	padding:20px 0;
	position:relative;
}
#logo {
	margin:0 30px;
}
#cart {
	position:absolute;
	top:20px;
	right:20px;
}
/* ----------------------------------
			mainNav
-----------------------------------*/
#mainNav {
	height:20px;
	width:710px;
	margin:0 20px;
	background-color:#fff;
	background: #da8c22 url(../graphics/nav_right.gif) no-repeat right;
	position:relative;
}
#mainNav span#swoop {
	position:absolute;
	top:0;
	left:0;
}
#mainNav ul {
	padding:0;
	margin:0;
	white-space:normal;
	font-size:1.1em;
	float:left;
	padding-left:120px;
	
}
#mainNav li {
	display: inline;
	list-style-type: none;
	float:left;
	padding:0;
	margin:0;
}
#mainNav a { 
	padding:0;
	line-height:20px;
	clear:none;
	display:block;
	float:left;
	color:#da8c22;
	width:50px;
}
#mainNav a:link, #mainNav a:visited {
	color:#fff;
	text-decoration: none;
}
#mainNav a:hover, #mainNav a.on {
	color:#564e3b;/*dark blue*/
	text-decoration: none;
}
#mainNav li a {text-indent:-9000px; background-color:transparent;}

#mainNav li#about a {background:url(../graphics/nav_story.gif) no-repeat left; width:92px;}
#mainNav li#about a:hover, #mainNav li#about.on a
{background:url(../graphics/nav_story_on.gif) no-repeat left;}


#mainNav li#collection a {background:url(../graphics/nav_collection.gif) no-repeat left; width:105px;}
#mainNav li#collection a:hover, #mainNav li#collection.on a
{background:url(../graphics/nav_collection_on.gif) no-repeat left;}

#mainNav li#news a {background:url(../graphics/nav_news.gif) no-repeat left; width:103px;}
#mainNav li#news a:hover, #mainNav li#news.on a
{background:url(../graphics/nav_news_on.gif) no-repeat left;}

#mainNav li#faq a {background:url(../graphics/nav_faqs.gif) no-repeat left; width:59px;}
#mainNav li#faq a:hover, #mainNav li#faq.on a
{background:url(../graphics/nav_faqs_on.gif) no-repeat left;}

#mainNav li#order a {background:url(../graphics/nav_order.gif) no-repeat left; width:61px;}
#mainNav li#order a:hover, #mainNav li#order.on a
{background:url(../graphics/nav_order_on.gif) no-repeat left;}

#mainNav li#friends a {background:url(../graphics/nav_friends.gif) no-repeat left; width:70px;}
#mainNav li#friends a:hover, #mainNav li#friends.on a
{background:url(../graphics/nav_friends_on.gif) no-repeat left;}

#mainNav li#sale a {background:url(../graphics/nav_sales.gif) no-repeat left; width:60px;}
#mainNav li#sale a:hover, #mainNav li#sale.on a
{background:url(../graphics/nav_sales_on.gif) no-repeat left;}

/* ----------------------------------
			footer
-----------------------------------*/
#footer {
	background:#fff url(../graphics/spacer_bottom.gif) no-repeat bottom;
	margin:0;
	padding:20px 0 10px 0;
	text-align:center;
}
#footer p {
	font-size:10px;
	margin:8px 0;
}
#footerNav {
	background: #da8c22 url(../graphics/img_footer_bg.gif) no-repeat right;
	width:710px;
	height:20px;
	margin:0 20px;
	padding:0;
}
#footerNav p {
	margin:0;
}
#footerNav a {
	color:#fff;
	padding:0 10px;
	line-height:20px;
	border-right:1px solid #efad53;
}
#footerNav a.last {
	border-right:none;
}
/* ----------------------------------
			forms
-----------------------------------*/
.loginBox {
	padding:10px;
	background-color:#ddeef2; 
	border:1px solid #6488b2;
	text-align:center;
	margin:20px;
	width:200px;
}
.loginBox a {
	display:block;
	width:185px;
	height:40px;
	background:url(../graphics/btn_wholesale.gif) no-repeat left;
}
.loginBox a:hover {
	background:url(../graphics/btn_wholesale_over.gif) no-repeat left;
}
.loginBox a p {text-indent:-9000px; background-color:transparent; margin:0;}
.form fieldset {border:none; margin:0; padding:0;}
.form {padding:15px; background-color:#ddeef2; border:1px solid #6488b2;}
.form p {display:block; clear:both; margin:0; padding:0;}
.form label{
color:#6488b2;
float: left;
 /*width of left column*/
width: 80px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.form select {
width:200px;
border:1px solid #6488b2;
padding:1px;
color:#405b6d;
float:left;
}
.form input {
width:200px;
border:1px solid #6488b2;
padding:1px;
color:#405b6d;
float:left;
}

.form input.img {
	margin:0;
	width:24px;
	height:24px;
	cursor:pointer;
	float:left;
	border:none;
	padding-left:20px;
}