/* import common libraries */

@import url("reset.css");
@import url("clearfloats.css");
/*@import url("forms.css");*/

/* import finished */

html, body { height: 100%; }

body {
	background: #ffffff url('../gfx/purple-tile.jpg');
	text-align: center;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 12px;
	line-height: 15px;
}

img {border: none;}	

.tagline {margin: 6px 10px 0 0;
	width: 665px;
	height: 23px;
	background-image:url('../gfx/tagline.png');
	background-repeat: no-repeat;
	float: right;
}
	
h1 {font-size: 20px;
	color: #4c0459;
	font-weight: normal;
	margin: 0 0 5px 0;
	}

.h1 {font-size: 20px;
	color: #4c0459;
	font-weight: normal;
	margin: 0 0 5px 0;
	float: left;
	}

h2 {font-size: 16px;
	color: #4c0459;
	font-weight: normal;
	margin: 10px 0 10px 0;
	}

h3 {font-size: 20px;
	color: #674470;
	font-weight: normal;
	margin: 15px 0 10px 0;
	padding-top: 5px;
	border-top: 1px solid #bfa5c6;
	clear: both;}
		
h4 {font-size: 14px;
	/*color: #674470;*/
	color: #4c0459;
	font-weight: normal;
	margin: 10px 0 10px 0;
	clear: both;
}

h4.first { margin-top: 0; }

p {/*color: #674470;*/
	font-size: 13px;
	line-height: 18px;
	margin: 0px 0 15px 0;
	}
.desc {/*color: #674470;*/
	font-size: 12px;
	margin: -8px 0 20px 0;
	font-style: italic;	
	line-height: 14px;}
		
a {color: #4c0459;	text-decoration: none;}

a:hover {text-decoration: underline;}
/* necessary because of reset.css: */
/* maybe this will be my default at some point, but not for now */
ul.basic_list { list-style: disc outside; }
ul.basic_list li { display: block; padding: 0 0 8px 20px; line-height: 1.3em; font-size: 1em; }

/***********************

structured tables

***********************/

table.str { width: 100%; }
table.str, table.str td, table.str th {
	border-collapse: collapse;
	border: 1px solid #fff;
	padding: 4px;
	font-size: 11px;
}
table.str th { background-color: #ed72ac; color: #fff; }
table.str th.divider { background-color: #ed72ac; color: #fff; }
table.str tr { background-color: #dfdfdf; }
table.str tr:hover { background-color: #fff; }


/***********************

general styles

***********************/

.shell {
	margin: 0 auto;
	width: 870px;
	background: transparent url('../gfx/edges.png') repeat-y;
}

.wrapper {
	margin: 0 auto; /* <-- use this if you're not "pushing" */
	text-align: left;
	width: 850px;
	padding-bottom: 20px;
	background: #ffffff url('../gfx/purple-bar.png') repeat-x;
}

.menu { float: left; margin-right: 20px; padding: 12px; border: 1px solid #000; background-color: #343434; color: #fff; width: 140px; max-width: 140px !important; }
.menu * a { color: #fff; }

.content { 	width: 670px; float: left; margin-left: 10px; /*margin-top: 20px;*/ }
/* 515 */

.account_left { float: left; width: 320px; border-right: 1px solid black; margin-right: 20px; padding-right: 20px; margin-left: 20px; }
.account_right { float: left; width: 300px; }

.account_left h3, .account_right h3 { text-align: left; margin-top: 0; padding-top: 0; }

.bottom {
	/*width: 700px;*/
	
	width: 850px;
	margin: 0 auto;
	height: 15px;
	
	background-image: url('../gfx/bottom-edge.png');
	background-repeat: repeat-x;
	/*margin-right:10px; */
}

.border {
	background-image:url('../gfx/nav-hover.jpg');
	background-repeat: repeat-x;
	height: 6px;
	margin: 10px 0 15px;
	clear: both;
}

/***********************

store / cart stuff

***********************/

.cart { width: 515px; /*margin: 0 auto;*/ }
.cart table { width: 515px; max-width: 515px !important; margin: 0 0 12px 0; }
.cart table, .cart th, .cart td { border: 1px solid black; border-collapse: collapse; }
.cart td { padding: 4px; }
.cart td.q { text-align: center; }
.cart td.pr { text-align: right; }
.cart td.crem { width: 20px; max-width: 40px !important; }
.cart th { background: #dfdfdf; font-weight: normal; color: #000; }

.products { float: left; width: 75%; }
.products div { float: left; margin: 0 20px 20px 0; border: 1px solid #afafaf; padding: 8px; text-align: center; width: 230px; line-height: 14px; }
.products div p { line-height: 14px; margin: 0; }
.products div p select { width: 80px; font-size: 10px; }
.products div p span { display: inline-block; width: 80px; font-size: 11px; }

.categories { width: 22%; float: left; margin-right: 1.5%; }
.categories a { float: left; display: block; text-decoration: none; }
.categories a:hover { background-color: #ad4a1b; color: #fff; }
.categories hr { clear: both; border: none 0; height: 1px; border-top: 1px solid #f26522; margin: 4px 4px 4px 0; }

.checkout_breadcrumbs { font-size: 11px; margin-top: 0; }



/***********************

page footer, etc
push height must equal footer height, if using push
also, check notes in .wrapper above

***********************/

.footer { width: 710px; margin: 0 auto; }
.footer p { text-align: center; font-size: 11px; color: #e1d5e4; margin: 10px; }		 


/***********************

sidebar + navigation

***********************/

.sidebar {
	width: 165px;
	float: left;
	}	 
.logo {
	text-align: center;
	margin: 10px 0 20px 32px; 
	}

.nav-div {
	width: 125px;
	background-image:url('../gfx/nav-top.png');
	background-repeat: no-repeat;
	margin-left: 20px;
	padding-top: 10px;
	 }

.nav-div-flush { margin-left: 0; }
	
.nav-bottom {
	background-image:url('../gfx/nav-bottom.png');
	background-repeat: no-repeat;
	height: 6px;
	width: 125px;
	margin-top: 5px;}	 	

.nav {
	margin: 0px;
	padding: 0;
	list-style-type: none; }

.nav a {
	color: #4c0459;
	text-decoration: none;
	}
	
.nav li {
   margin-bottom: 2px;
	}

li.subcat { padding-left: 8px; font-size: 11px; }

.nav a {
   color: #4c0459;
   display: block;
   width: 115px;
   height: 17px;
   font-size: 12px;
   padding-left: 10px;
   padding-top: 3px;
	}

.nav a:hover {
	background-image:url('../gfx/nav-hover.jpg');
	background-repeat: repeat-x;
	text-decoration: none;
	}

.nav .current {	background-image:url('../gfx/nav-hover.jpg');
	background-repeat: repeat-x;
	text-decoration: none;}

/***********************

top icons

***********************/
	
.icons {
	width: 60px;
	height: 40px;
	float:right;
	text-align: center; 
	margin: 10px 5px 0 5px;
	}

.icons p {
	margin-top: 0px;}

.icons a {
	font-size: 10px;
	text-decoration: none;
	color: #674470;
	}		

.icons a:hover {
	font-size: 10px;
	text-decoration: underline;
	}	
.phone a {
	background: url('../gfx/phone.png');
	background-repeat: no-repeat;
	display: block;
	width: 24px;
	height: 25px;
	margin: 0 auto;
	}
.phone a:hover {
	background: url('../gfx/phone.png');
	background-position: -24px 0;
	}
.view-cart a {
	background: url('../gfx/cart.png');
	background-repeat: no-repeat;
	display: block;
	width: 35px;
	height: 25px;
	margin: 0 auto;
	}
.view-cart a:hover {
	background: url('../gfx/cart.png');
	background-position: -35px 0;
	}

/***********************

search bar

***********************/

.search {
	height: 25px;
	margin: 5px 10px 10px 0;
	float: right;
	}
.search-left {
	background-image: url('../gfx/search-left.png');
	border: none;
	background-repeat:no-repeat;
	float: left;
	width: 137px;
	height: 20px;
	padding-top: 2px;
	padding-left: 10px;
	font-size: 12px;
	color: #674470;
	}
.search-right {
	background-image: url('../gfx/search-right.png');
	border: none;
	background-repeat:no-repeat;
	float: left;
	width: 24px;
	height: 20px;
	padding: 0;}

/***********************

breadcrumbs

***********************/

.breadcrumbs {height: 25px;
	margin: 10px 10px 5px 0;
	float: left;
	}
.crumb {font-size: 10px;
	color: #674470;
	}
.crumb a {font-size: 10px;
	color: #bfa5c6;
	}
.crumb a:hover {
	text-decoration: underline;
	color: #674470;
	}

.currentcrumb {
	font-size: 10px;
	text-decoration: underline;
	color: #674470;
	}	


/***********************

items

***********************/

.item {
	width: 130px;
	padding: 10px;
	border: 1px solid #bfa5c6;
	margin: 0 15px 15px 0;
	float: left;
	text-align: center;
	/*height:270px;*/
	}

.item-name {font-size: 11px;
	width: 125px;
	height: 1.3em;
	text-align: left;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 0px;
	overflow: hidden;
	 }
.item-name a {
	text-decoration: none;
	color: #674470;
	}

.item-name a:hover {
	text-decoration: underline;
	}

.item-image {
	width: 125px;
	height: 125px;
	margin: 0 auto; padding: 0;
	border: 1px solid #dfdfdf;
	}

.item-price {font-size: 11px;
	color: #674470;
	/*width: 150px; */
	text-align: center;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0px;
	 }

.qty {
	width: 150px;
	height: 25px;
	margin: 0 auto;
	margin-top: 5px;
	padding: 0px;
	}

.qty-left {width: 150px; float: left; font-size: 10px;}

.qty-right, {float: left; margin: 0px;}
.qty-center {
	text-align:center; 	
	height:23px;
	/*width:100%; */
	margin-top:10px;
	float:left;
	}
.item-price input.add_to_cart {
	background: url('../gfx/add-to-cart.png');
	background-repeat: no-repeat;
		width: 33px;
	height: 24px;
	border: 0;
}
.qty-right input.add_to_cart, {
	background: url('../gfx/add-to-cart.png');
	background-repeat: no-repeat;
	
	width: 33px;
	height: 24px;
	border: 0;
	margin-left:10px;
	}
	
.qty-right input.add_to_cart{
	display: block;
}


.qty-center input.add_to_cart:hover, .qty-right input.add_to_cart:hover {
	background:url('../gfx/add-to-cart.png');
	background-repeat: no-repeat;
	background-position: -33px 0;
	border: 0;
	}

.item-qty {
	font-size: 11px;
	width:150px; 
	
	color: #674470;
	text-align: center;
	padding-top: 2px;
	margin: 0 auto;
	 }
.text-prod{
	width:15px; 
	float:left; 
}
.dropit{
	width:20px;
	float:left;
	margin-left:30px;
}
/***********************

single item

***********************/

.single-item {
	padding: 10px;
	border: 1px solid #bfa5c6;
	margin: 0 15px 0 0;
	float: left;
	text-align: center;
	width: 375px;
	max-width: 375px;
	}
.thumbs {
	width: 95px;
	border: 1px solid #bfa5c6;
	text-align: center;
	float: left;
	padding: 5px 0 5px 0;
	}
.thumbs img {padding: 5px;}	

.item-description {margin-left: 20px;}	

.view-items {
	float: left;
	height: 25px;
	margin: 10px 0 0 0;
	color: #674470;
	}

.view a {
	font-size: 11px;
	color: #bfa5c6;
	text-decoration: none;
	}	
	
.view a:hover {
	color: #674470;
	text-decoration: underline;}
	

/***********************

cart

***********************/

table {
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom: 10px;
	width: 515px;
	}

.cart table {
	margin:0 0 12px;
	max-width:515px !important;
	}

.cart table, .cart th, .cart td {
	border:1px solid #bfa5c6;
	border-collapse:collapse;
	padding: 5px;
	}

.cart th  {font-size: 11px; color: #674470; background-image: url('../gfx/nav-hover.jpg'); background-repeat: repeat;}
.cart td {font-size: 12px; color: #4c0459; }
.q {text-align: center;}
.pr {text-align: right;}

/***********************

form

***********************/

.form-border {
	padding: 15px;
	border: 1px solid #bfa5c6;
	margin: 10px 0 15px 0;
	float: left;
	background-color:#e1d5e4;
	min-width: 90%;
	 }

form label, .form {
	color: #674470;
	font-size: 13px;
	width: 115px;
	display:block;
	float:left;
	}	 
	
.select {
	font-size:12px;
	color: #674470;
	margin-left: 5px;}	

.buttons {
	background-image:url('../gfx/nav-hover.jpg');
	background-repeat: repeat;
	height: 25px;
	margin: 0px;
	border:1px solid #bfa5c6;
	color:#674470;
	font-size:12px;
	text-align: center;
	}	

.checkbox {
	width: 25px;
	text-align: center;}
	
.checkbox input {
	border: none;}	
	
.form-box {width: 160px;}

.captcha {
	margin-bottom:5px;
	margin-top:5px;}
	
input, select, checkbox, textarea {
	background:#fff none repeat scroll 0 0;
	border:1px solid #bfa5c6;
	color:#674470;
	}

input[type=text], input[type=password] {
	width: 160px;
}

.nav-div input[type=text], .nav-div input[type=password] { width: 120px; }
input.quantity_input { width: 20px; text-align: center; }
input.search-left { width: 137px; }

.submit {font-size: 10px;
	font-weight: bold;
	padding: 4px;
	margin-top: 15px;
	background-image: url('../gfx/nav-hover.jpg');
	background-repeat: repeat;}	

input.disabled-formfield, select.disabled-formfield { 
	background:#e1d5e4 none repeat scroll 0 0;
	border:1px solid #c5b0ca;
	color: #e1d5e4;
}

label.disabled-formfield {
	color: #c5b0ca;
}

/***********************

miscellaneous

***********************/

/* need to do something better than this...: */
.bigger, .bigger p { font-size: 1.3em; line-height: 1.2em; }

.break { padding: 8px; text-transform: uppercase; background-color: #fff; border: 1px solid #b4d3e1; text-align: center; margin-bottom: 12px; }

.pagination { border: 1px solid #3baee0; background-color: #fff; padding: 8px; font-size: 10px; margin-bottom: 12px; }

.req { color: #ff0000; }

.clickable { cursor: pointer; }
.boldish { font-weight: 700; font-size: 1.2em; }
.alert { color: #ff0000; }
.alertok { color: #8dc63f; }
.hidden { display: none; }

p.error, span.alert {
	background: transparent url('../gfx/icons/delete.png') no-repeat top left;
	padding: 2px 0 0 20px;
	min-height: 16px;
	display: block;
	margin: 1px 0;
}


p.success, p.error { margin-bottom:15px; background-color: #ff9696; border: 1px solid #ff0000; background-position: 4px 4px; color: #fff; padding: 4px 4px 4px 24px; font-size: 14px; }
p.success { background-color: #96ff96; border: 1px solid #00ff00; }

p.success, span.alertok {
	background: url('../gfx/icons/accept.png') no-repeat top left #96FF96;
	padding: 0px 0 0 20px;
	min-height: 16px;
	display: block;
	margin: 1px 0;
	margin-bottom:15px;
}
.msg { font-size: 9px; font-style: italic; }

.nav-div p.error, .nav-div span.alert, .nav-div p.success, .nav-div span.alertok { font-size: 11px; line-height: 12px; }


/*

#big_poppa {
	border: 2px solid black;
	background: #dbeeff url('/gfx/altbg_fade_hover.jpg') repeat-x;
	color: #121212;
	font-family: tahoma, arial, sans-serif;
	position: absolute;
	z-index: 100;
	text-align: center;
}

#big_poppa p {
	margin: 0;
	padding: 12px;
	font-size: 18px;
	line-height: 14px;
	font-weight: bold;
}

#big_poppa_close {
	font-size: 12px;
	font-weight: normal;
	padding: 4px;
	height: 20px;
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
}

*/
.clear-it{clear:both;}