/* ----------- Body Styles ----------------------- */

ul, li, p, h1, h2, h3, table, img {
	margin: 0;
	padding: 0px;
	border: none;
	list-style-type: none;
}

body {
	margin: 0;
	padding: 0;
	font: 14px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	line-height: 1.5em;
	color: #666;
	background: #ccc;
	background-image:url(/images/background_bg.gif);
	background-position:top center;
	background-repeat:repeat-y;
}

hr {
	display: none;
	clear: left;
}

p {
	margin-bottom: 10px;
}

.price {
	font-weight: bold;
	color: #333;
	font-size: 21px;
	font-family: Garamond, Adobe Garamond, Georgia, Palatino, serif;
}

#warning {
	border: #ccc solid 1px;
	background: #FEFAD8;
	padding: 5px 5px 5px 5px;
	margin-bottom: 5px;
	margin-left:5px;
	line-height: 20px;
	font-weight: bold;
	width: 90%;
}

#success {
	border: #ccc solid 1px;
	background: #E0FFD7;
	padding: 5px 5px 5px 5px;
	line-height: 20px;
	font-weight: bold;
}

/* ----------- Links ----------------------------- */

a {
	color: #336;
	text-decoration: none;
} 

a:visited	{
	color: #336;
}

a:active {
	color: #336;
} 
a:hover {
	color: #669;
	text-decoration: underline;
}

/* ----------- Tables ---------------------------- */

.table {
border-width:1px;
border-style:solid;
border-color:#aaa;
margin-bottom: 10px;
width: 100%;
border-collapse: collapse;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}

.table tr td {
padding: 5px;
text-align: center;
border-bottom: 1px solid #aaa;
}

.table tr td.left {
text-align: left;
border-bottom: 1px solid #aaa;
}

.table tr td.right {
text-align: right;
border-bottom: 1px solid #aaa;
}

.title td {
color: #999;
background: #f3f3f3;
border-bottom: 1px solid #aaa;
}

.pastdue {
font-weight: bold;
color: #600;
}

.row-shade {
	background: #e8e8e8;
}

.row-subtotal {
	background: #ccc;
	font-weight: bold;
	color: #333;
}

.row-shipping {
	background: #f0f0f0;
	font-weight: bold;
}

.row-tax {
	background: #f0f0f0;
	font-weight: bold;
}

.row-offer {
	background: #f0f0f0;
}

.row-total {
	background: #ccc;
	font-weight: bold;
	color: #333;
}

td em {
display: block;
}


/* ----------- Headings -------------------------- */

h1 {
	font: 21px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	text-transform: uppercase;
	margin-bottom: 8px;
	padding-bottom: 1px;
	color: #336;
}

h2 {
	border-bottom: 1px solid #ccc;
	font: 18px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	text-transform: uppercase;
	margin-bottom: 10px;
	padding-bottom: 1px;
	color: #336;
}

h3 {
	margin-bottom: 3px;
	padding-bottom: 1px;
	border-bottom: 1px dashed #999;
	font-size: 12px;
	font-weight: normal;
	color: #c7b16c;
}

/* ----------- Product Display ------------------- */

div.series_list {
	width: 490px;
	clear: both;
}

div.list_image {
	float: left;
	width: 144px;
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
	position:relative;
}

div.list_image span {
	width: 32px;
	height: 32px;
	display: block;
	position: absolute;
	top:1px;
	left: 10px;
	background: url(/images/new_icon.png) no-repeat;
}

div.list_image span2 {
	width: 48px;
	height: 32px;
	display: block;
	position: absolute;
	top:1px;
	left: 10px;
	background: url(/images/retired_icon.png) no-repeat;
}

div.list_image span3 {
	width: 42px;
	height: 34px;
	display: block;
	position: absolute;
	top:1px;
	left: 10px;
	background: url(/images/sale_icon.png) no-repeat;
}

div.list_image img {
	border: #ccc solid 1px;
}
  
div.list_image p {
   text-align: center;
}


.cart_image img {
   border: #666 solid 1px;
}

#series {
	width: 490px;
	margin: 0px 10px 10px 0px;
	padding: 0px 0px 10px 20px;
	float: left;
}

.important_red {
	color: #900;
}

#series-col {
	clear:both;
	float: center;
	text-align: left;
}

/* ----------- Navigations ----------------------- */

#nav {
	width: 436px;
	float: left;
	text-align:center;
	margin-bottom: 15px;
}

#nav-about
{
	height: 70px;
	width: 95px;
	overflow: hidden;
	background: url(/images/nav1.gif) top left no-repeat;
	display: block;
	margin-left: auto;
	margin-right: 6px;
	float: left;
}

#nav-about:hover
{
	background-position: bottom left;
}

#nav-beads
{
	height: 70px;
	width: 107px;
	overflow: hidden;
	background: url(/images/nav2.gif) top left no-repeat;
	display: block;
	margin-left: auto;
	margin-right: 6px;
	float: left;
}

#nav-beads:hover
{
	background-position: bottom left;
}

#nav-build
{
	height: 70px;
	width: 104px;
	overflow: hidden;
	background: url(/images/nav3.gif) top left no-repeat;
	display: block;
	margin-left: auto;
	margin-right: 6px;
	float: left;
}

#nav-build:hover
{
	background-position: bottom left;
}

#nav-contact
{
	height: 70px;
	width: 111px;
	overflow: hidden;
	background: url(/images/nav4.gif) top left no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;
	float: left;
}

#nav-contact:hover
{
	background-position: bottom left;
}

#nav-search {
	height: 70px;
	width:305px;
	padding-left: 15px;
	padding-top: 10px;
	background-image:url(/images/nav_bg.gif);
	background-position:top left;
	background-repeat:repeat-x;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

#pagination {
	padding: 5px 15px 5px 15px;
	clear:both;
	float: center;
	text-align: right;
	margin-bottom: 15px;
}

.pagination-num a {
	border: #ccc solid 1px;
	padding: 3px 5px 3px 5px;
}

.pagination-num a:hover {
	background-color:#e8e8e8;
}

.pagination-this {
	border: #ccc solid 1px;
	background-color: #336;
	color: #fff;
	padding: 5px;
}

/* ----------- Forms ---------------------------- */

.select-box {
	background: #e8e8e8;
}

.input-box {
	background: #e8e8e8;
	border: #ccc solid 1px;
}

.input-box-missing {
	background: #FEFAD8;
	border: #ccc solid 1px;
}

.submit-button {
	clear: both;
}

form {
	margin: 0;
}

#info_box {
	border: #ccc solid 1px;
	width: 280px;
	margin-bottom: 5px;
	margin-left: 20px;
	padding: 5px 20px 5px 20px;
}

#wide_box {
	border: #ccc solid 1px;
	width: 90%;
	text-align:center;
	padding: 5px 20px 5px 20px;
}

/* ----------- Progress Bar ----------------- */

#progress_bar {
	clear: both;
	text-align: center;
	margin-left: 6px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
}

#progress_bar li {
	background: #ccc;
	float: left;
	padding: 13px 17px 7px 17px;
	margin-bottom: 10px;
	color: #aaa;
	background-image:url(/images/checkout_notdone.gif);
	background-position:top center;
	background-repeat:repeat-x;
	border-left: 2px solid #fff;
}

#progress_bar li.done {
	background: #333;
	color: #999;
	padding: 13px 17px 7px 17px;
	background-image:url(/images/checkout_done.gif);
	background-position:top center;
	background-repeat:repeat-x;
}

#progress_bar li.active {
	background: #e8e8e8;
	color: #000;
	padding: 13px 17px 7px 17px;
	background-image:url(/images/checkout_active.gif);
	background-position:top center;
	background-repeat:repeat-x;
}

/* ----------- Header / Footer Styles --------------------- */

#header {
	width: 100%;
	background-color: #fff;
	margin-top: 4px;
	margin-bottom: 2px;
	background-image:url(/images/header_bg.gif);
	background-position:top left;
	background-repeat:no-repeat;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
}

#header a {
	color: #fff;
	text-decoration: none;
} 

#header a:visited	{
	color: #fff;
}

#header a:active {
	color: #fff;
}
 
#header a:hover {
	color: #fff;
	text-decoration: underline;
}

#header p {
	color: #fff;
}

#footer {
	width:100%;
	margin-bottom: 20px;
	height:27px;
	background-image:url(/images/footer_bg.gif);
	background-position:top left;
	background-repeat:repeat-x;
	clear: both;
}

#footer p {
	text-align: center;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	padding-top: 8px;
}

#footer a {
	color: #fff;
	text-decoration: none;
} 

#footer a:visited	{
	color: #fff;
}

#footer a:active {
	color: #fff;
}
 
#footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ----------- Mailing List Front ---------------- */

#mailing_box {
	background-color: #94966c;
	background-image:url(/images/mailing_bg.gif);
	background-position:top left;
	background-repeat:no-repeat;
	height: 228px;
	width:319px;
}

#mailing_box h1 {
	font: 18px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	padding-top: 10px;
	padding-left: 15px;
	margin: 0px;
	color: #fff;
}

#mailing_box p {
	font: 14px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	color: #fff;
	padding-top: 15px;
	padding-left: 15px;
	line-height: 1em;
}

#mixmatchbox {
	background-color: #94966c;
	background-image:url(/images/mailing_bg.gif);
	background-position:top left;
	background-repeat:no-repeat;
	height: 228px;
	width:319px;
}

#mixmatchbox h1 {
	font: 18px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	margin: 0px;
	color: #fff;
}

#mixmatchbox a {
	font: 18px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	padding-left: 15px;
	margin: 0px;
	color: #fff;
}

#mixmatchbox a:visited {
	font: 18px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	padding-left: 15px;
	margin: 0px;
	color: #fff;
}

#mixmatchbox p {
	font: 14px Garamond, Adobe Garamond, Georgia, Palatino, serif;
	color: #fff;
	padding-left: 15px;
	line-height: 1em;
}

/* ----------- Cart Styles ----------------------- */

#cart-rightcol {
	width: 210px;
	float: right;
	text-align:left;
}

#cart-leftcol {
	margin-right: 225px;
	text-align:left;
}

/* ----------- Structural Styles ----------------- */

#container {
	width:760px;
	margin:0 auto 0 auto;
	background-color: #fff;
}

#content {
	float: center;
}

#prod_image {
	width: 330px;
	padding-left: 5px;
	padding-right: 25px;
	text-align:center;
}

#prod_detail {
	width: 375px;
	float: right;
	margin-right:10px;
	margin-top: 15px;
	text-align:left;
}

#inspired_image {
	width: 440px;
	padding-left: 5px;
	padding-right: 25px;
	text-align:center;
}

#inspired_detail {
	width: 275px;
	float: right;
	margin-right:10px;
	margin-top: 15px;
	text-align:left;
}

#headnav {
	position: relative;
	right: 30px;
	top: 28px;
	float: right;
	text-align: center;
}

#splitcol_right {
	width: 45%;
	float: left;
	margin-left: 25px;
}

#splitcol_left {
	width: 45%;
	float: left;
	margin-left: 15px;
}

#leftpiccol {
	width: 310px;
	float: left;
}

#lftnav {
	width: 420px;
	float: left;
}

#rightcol {
	width: 320px;
	float: right;
	text-align:left;
}

#innerright {
	padding-top:20px;
	padding-right: 10px;
	margin-left: 3px;
}

#leftcol {
	margin-right: 320px;
	text-align:left;
}

#innerleft {
	padding-left: 15px;
	padding-right: 25px;
}

#leftcol p {
	padding-left: 10px;
}

#leftcontent {
	position: relative;
	left:0px;
	width:235px;
	text-align:center;
	float:left;
}
		
#centercontent {
	position: relative;
	left:5px;
	width:235px;
	text-align:center;
	float:left;
}

#rightcontent {
	position: relative;
	left:15px;
	width:235px;
	text-align:center;
	float:left;
}

#leftnav {
	width: 225px;
	padding-left:10px;
	float: left;
}

#leftnav ul li a {
	display: block;
	padding: 3px 4px 3px 4px;
	color: #336;
	text-decoration: none;
	width: 190px;
}

#leftnav ul li a:hover {
	background-color: #336;
	color: #fff;
}

#fullcol {
	clear:both;
	float: center;
	text-align: left;
}

#single-col {
	padding-left: 15px;
	padding-right: 15px;
	clear:both;
	float: center;
	text-align: left;
}

#imghead {
	height:315px;
	text-align:center;
}

#smimghead {
	height:200px;
	text-align:center;
}

/* commented backslash hack v2 \*/
* html #leftcol {
height: 1%; /* Lendering bug fix for IE6.0 */
}
/* end hack */

/* ----------- Lightbox Effects --------------*/

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}