/*
==================================
notes
there are many box/boxhead/boxbody/boxfoot/ definitions that have
many things in common, and only a few differences. these could be consolidated.

should the home styles go in a seperate CSS document?

parent boxes should probably have the background color... to prevent splitting of the footer.

==================================
*/

/*
==================================
zen templates
==================================
(standard zen markup styled to match SWW)

it would be nice if we could ID the content area or page on all templates that are non-sww templates

*/

#content form table input, #content form table select {
	position: relative;
	left: 0;
	top: 0;
	width: auto;
	}

#content table {
	margin: 0;
	padding: 0;
	}
#content table td {
	width: auto;
	margin: 0;
	padding: 0;
	}
td.plainBox {
	text-align: left;
}


td.breadCrumb {
	clear: both;
	margin: 0; padding: 5px 10px 0 8px;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.2;
	color: #442521;
	}

#content td.breadCrumb {
	clear: both;
	margin: 0; padding: 7px 10px 5px 0;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.2;
	color: #442521;
	border-bottom: 1px #E5DEC9 solid;
	}

/* some of the checkout pages use a breadcrumb td class instead of pagenav */
td.breadCrumb a:link { color: #29A4CB; text-decoration: none; }
td.breadCrumb a:visited { color: #29A4CB; text-decoration: none; }
td.breadCrumb a:hover { color: #29A4CB; text-decoration: underline; }
td.breadCrumb a:active { color: #29A4CB; text-decoration: none; }

table img {
	vertical-align: middle;
	}

#content table.centerColumn {
	margin-bottom: 10px;
	font-size: 9pt;
	}

div#main table.centerColumn td {
	padding-left: 10px;
	padding-right: 10px;
	}
#content table.centerColumn td td { /*i.e. nested table cells */
	padding: 0;
}

#content div.boxbody td img {
	margin: 0;
	}

#content td.pageHeading {
	margin: 0;
	background: url(images/dbrntan_middle_boxhead.gif) left top no-repeat;
	padding-top: 3px;
	padding-bottom: 2px;
	min-height: 2px;
	font-size: 1px !important; /* this is a hack for IE.. it won't collapse empty divs */
	}
#content td.plainBoxHeading {
	padding-top: 20px;
	}
#content td.pageHeading h1 {
	margin: 0; padding: 0;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.2;
	color: white;
	font-weight: normal;
	}
/* old version - changed as part of account fixes 01.15.07
td.pageHeading h1 {
	margin: 0 0 8px 0; padding: 0 0 5px 8px;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.2;
	color: #442521;
	font-weight: bold;
	border-bottom: 1px #E5DEC9 solid;
	}*/

#content tr.moduleRow td {
	border-top: 1px #E5DEC9 solid;
	}
#content tr.moduleRowOver td {
	border-top: 1px #E5DEC9 solid;
	background: #ECEDEE;
	}
#content tr.moduleRowSelected td {
	border-top: 1px #E5DEC9 solid;
	background: #F7A42E;
	}


#content tr.orderhistoryrow td {
	padding-top: 20px !important;
	text-align: left !important;
	border-bottom: 1px #E5DEC9 solid;
	}


#content table td h1 {
	padding: 0;
	margin: 15px 0 5px 0;
	text-align: left;
}
#content table td h3 {
text-align: left;
margin: 30px 0 10px 0;
padding: 0 0 5px 0;
font-weight: bold;
font-size: 100%;
border-bottom: 1px #E5DEC9 solid;
}
td.smalltext p {
border-top: 1px #E5DEC9 solid;
margin: 10px 0 20px 0;
padding: 10px 0 0 0;
}

#content table td[align="right"] input, #content table td[align="right"] img[alt="Continue"]  {
	position: relative;
	top: 0; left: -15px;
	background: transparent;
}
a[href="javascript:popupWindow('http://localhost/~jwalton/store/index.php?main_page=popup_search_help')"] {
	margin-right: 15px;
}

span.inputRequirement {
	display: none;
	}
td.inputRequirement {
	padding-right: 13px !important;
	}

#content table div#cartcontrols input {
position: relative;
left: -15px; top: 0;
}



/*
==================================
account -my downloads
==================================
*/
table#mydownloads {
	margin: 0;
	padding: 0;
	}
#mydownloads td {
	position: relative;
	padding: 20px 9px !important;
	border-left: 1px #E5DEC9 solid;
	background: url(images/downloads_bg.jpg) bottom repeat-x;
	width: 50% !important;
	text-align: center;
	}
#mydownloads p {
	text-align: center !important;
	}
#mydownloads td:first-child {
	border-left: none;
	}
	
#mydownloads img {
	}
#mydownloads h1 {
	font-size: 9pt;
	margin: 5px 0 !important;
	padding: 0!important;
	text-align: center !important;
	}
#mydownloads p.purchase {
	margin: 10px 0 0 0;
	padding: 0;
	width: 100%;
	text-align: center;
	}
#mydownloads .purchase img {
	width: auto;
	}


/*
==================================
errors
==================================
*/
div#messageStackError div.boxbody {
	padding: 8px 0 0 0;
	background: url(images/error_bg.gif) top left no-repeat;
	color: white;
	font-weight: bold;
	font-size: 9pt;
	}
div#messageStackError div.boxfoot {
	background: url(images/error_bg.gif) bottom left no-repeat;
	height: 8px;
	}
#messageStackError div.messageStackError {
	padding: 5px 0 5px 25px; margin: 0 10px 0 12px;
	width: 80%;
	background: url(images/error_badge.gif) #F10010 left no-repeat;
	}
img.errorflag {
	position: absolute;
	top: -10px;
	right: -18px;
	margin: 0;
	padding: 0;
	}

/*
==================================
Checkout styles
==================================
*/

#content table.checkout {
	width: 378px;
	margin: 0 0 0 8px; padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9pt;
	background: url(images/dbrntan_middle_boxhead.gif) top left no-repeat;
	}
#content form table.checkout {
	margin-left: 0 !important;
	}

#content table.checkout tbody {
	background: white;
	}
#content table.checkout tr {
	margin: 0; padding: 0;
	clear: both;
	}
#content table.checkout td {
	width: 50%;
	margin: 0; padding: 10px 10px 10px 12px;
	}

#content table.checkout th {
	width: 50%;
	margin: 0; padding: 5px 5px 5px 12px;
	color: white;
	font-size: 11pt;
	font-weight: normal;
	/*letter-spacing: -1px;*/
	text-align: left;
	}
.checkout p {
	margin: 0; padding: 0;
	}

/* this extends/overrides .cart */
table.cartreview {
	}
#content table.cartreview thead tr th {
	padding-left: 12px;
	text-align: left;
	}
#content table.cartreview tr td.productinfo div {
	width: auto;
	}
#content table.cartreview td.productinfo div p {
	width: auto;
	margin: 0 0 0 12px; padding: 0;
	}
div#content table.cartreview tr td {
	border-bottom: none;
	padding-top: 10px; padding-bottom: 10px;
	}
	
/* and some stuff under that */
.cartreview {
	}
div.cartreview .boxbody div {
	position: relative;
	border-top: 1px #E5DEC9 solid;
	padding: 10px 0 10px 12px;
	}
div.cartreview div.boxfoot {
	border-top: none;
	}
.cartreview table {
	/*position: relative;
	left: 210px; top: 0;
	width: 150px;*/
	float: right;
	margin: 0 10px 0 0 !important; padding: 0;
	}

table.subtotal td {
	text-align: right;
	padding-right: 2px !important;
	}
table.subtotal .total td {
	border-top: 1px #E5DEC9 solid;
	font-weight: bold;
	}
#cartreviewedit {
	display: block;
	position: absolute;
	/*left: 12px; top: 10px;*/
	}
a.rowedit {
	position: absolute;
	right: 6px;
	}

/*
==================================
Common form styles
==================================
*/
#content form {
	position: relative;
	width: 378px;
	margin: 0 0 10px 8px; padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10pt;
	}
#content form div.boxhead {
	min-height: 5px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	margin: 0; padding: 4px 0 2px 12px;
	background: url(images/dbrntan_middle_boxhead.gif) top left no-repeat;
	}
#content form div.boxbody {
	width: 100%;
	background: white;
	padding: 10px 0 0 0;
	}
#content form div.boxfoot {
	position: relative;
	left: 0; top: 0;
	width: 100%;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	padding: 7px 0 0 0; margin: 0 0 10px 0;
	text-align: left;
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}
#content form .boxbody div {
	position: relative;
	margin: 0 0 0 12px; padding: 4px 0 10px 0;
	}
#content form .boxbody p {
	margin: 0 0 0 12px; padding: 10px 10px 5px 0;
	font-style: italic;
	font-size: 9pt;
	}
#content form input, #content form select { background-color: #ECEDEE;}
#content form input.checkbox, #content form .multiinput input, #content form .multiinput select { background-color: transparent }

#content form input, #content form select {
	position: absolute;
	left: 118px;
	top: 0;
	width: 228px;
	}

	
#content form textarea {
	width: 348px;
	height: 80px;
	margin: 0 0 0 12px;
	background-color: #ECEDEE;
	}
	
#content form input.small, form select small {
	position: absolute;
	left: 118px;
	top: 0;
	width: 100px;
	}
#content form .note { /* used in conjunction with .small form elements */
	position: absolute;
	left: 243px; top: 4px;
	}
#content form div.multiinput input, #content form div.multiinput select {
	position: relative;
	left: 0; top: 0;
	width: auto;
	margin: 0; padding: 0;
	vertical-align: middle;
	position: relative; top: -1px;
	}
#content form div.multiinput span {
	position: absolute;
	padding: 0; margin: 0;
	left: 118px;
	top: 4px;
	}	
#content form input.submit {
	position: absolute;
	left: 300px; top: 7px;
	width: auto;
	}
#content form .boxfoot a {
	position: absolute;
	left: 130px; top: 7px;
	}
#content form label {
	}

#content form input.checkbox {
	position: relative;
	left: 0; top: 0;
	width: auto;
	margin: 0 0 0 118px;
	}
/*
==================================
write a revew form overrides
==================================
*/
textarea#reviewtext {
	height: 200px !important;
	}


/*
==================================
rating scale
==================================
*/
div.ratingscale input {
	position: static !important;
	width: auto !important;
	height: auto !important;
	vertical-align: middle;
	}



/*
==================================
Account (sonoma key) form overrides
==================================
*/

#content form.account input, #content form.account select, #content form.account textarea { background-color: #E1E5E9;}
#content form.account input.checkbox, #content form.account .multiinput input, #content form.account .multiinput select { background-color: transparent }

#content div.box + form.account { /* account forms that follow checkout boxes - need a little more space */
	margin-top: 15px;
	}

#content form.account {
	margin-bottom: 28px;
	}
#content form.account div.boxhead {
	padding: 10px 0 10px 12px;
	background: url(images/dblue_middle_boxbg.gif) top left no-repeat;
	}
#content form.account div.boxbody {
	background: #1D172B;
	color: white;
	}
#content form.account div.boxfoot {
	font-size: 10pt;
	height: 50px;
	background: url(images/dblue_middle_boxbg.gif) bottom left no-repeat;
	}
#content form.account div.empty {
	height: 4px;
	font-size: 1px;
	}
#content form.account .boxbody p {
	color: white;
	}
#content form.account img.skeyhead {
	position: absolute;
	right: 23px; top: -23px;
	}


/*
==================================
Shopping Cart Styles
==================================
*/

#content table.cart {
	width: 378px;
	margin: 0 0 0 8px; padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9pt;
	background: url(images/dbrntan_middle_boxhead.gif) top left no-repeat;
	}

#content table.cart tbody {
	background: white;
	}
#content table.cart tr {
	margin: 0; padding: 0;
	clear: both;
	}
#content table.cart tr td {
	border-bottom: 1px #E5DEC9 solid;
	}
#content table.cart td {
	width: auto;
	margin: 0; padding: 20px 5px 15px 0;
	}
#content table.cart th {
	width: auto;
	margin: 0; padding: 5px 5px 5px 0;
	color: white;
	font-size: 11pt;
	font-weight: normal;
	/*letter-spacing: -1px;*/
	}

#content table.cart img {
	width: 65px;
	margin: 0;
	float: left;
	}
#content table.cart input {
	width: 3ex;
	}
#content table.cart td.productinfo div {
	width: 200px;
	margin: 0; padding: 0;
	}
td.productinfo div p {
	margin: 0 0 0 70px;
	}
	
table.cart td {
	text-align: center;
	}
table.cart td.total, table.cart th.total {
	text-align: right;
	}
table.cart td.productinfo, table.cart th.productinfo {
	text-align: left;
	width: 100%;
	}

table.cart th {
	text-align: center;
	}
div.cart .boxbody {
	text-align: right;
	padding-bottom: 8px;
	}
div.cart .boxbody .subtotal {
	padding: 8px 5px;
	font-size: 11pt;
	font-weight: bold;
	}
div.cart .boxbody .cartnotes {
	float: left;
	font-size: 8pt;
	text-align: left;
	padding: 8px 0 0 5px;
	}
div#cartcontrols {
	position: relative;
	left: 0; top: 0;
	width: 100%; height: 33px;
	margin: 0 0 45px 10px; padding: 0 0 0 0;
	overflow: visible;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11pt;
	color: #442521;
	}
/* on shopping cart page, override the controls position */
#shoppingcart div#cartcontrols {
	text-align: center !important;
	margin-left: 0 !important;
	}
form div#cartcontrols {
	margin-left: 0 !important;
	}
	
#cartcontrols div {
	margin: 0;
	padding: 7px 0;
	}

/* start of a non-id version of doing this for cart...
div#cartcontrols input {
	width: auto;
	position: static;
	margin: 0 16px 0 0;
	background: transparent;
	}*/

div#cartcontrols input#update, div#cartcontrols img#update {
	position: absolute;
	top: 0; left: 308px;
	width: 68px;
	margin: 0; padding: 0;
	background: transparent;
	}
	
div#cartcontrols input#continueshopping, div#cartcontrols img#continueshopping {
	position: absolute;
	top: 0; left: 128px;
	width: 141px;
	margin: 0; padding: 0;
	background: transparent;
	}
div#cartcontrols input#checkout, div#cartcontrols img#checkout {
	position: absolute;
	top: 0; left: 298px;
	width: 82px;
	margin: 0; padding: 0;
	background: transparent;
	}
div#cartcontrols input#continue, div#cartcontrols img#continue {
	position: absolute;
	top: 0; left: 303px;
	width: 77px;
	margin: 0; padding: 0;
	background: transparent;
	}
div#cartcontrols input#confirm, div#cartcontrols img#confirm {
	position: absolute;
	top: 0; left: 308px;
	width: 72px;
	margin: 0; padding: 0;
	background: transparent;
	}
div#cartcontrols input#searchbtn, div#cartcontrols img#searchbtn {
	position: absolute;
	top: 0; left: 308px;
	width: 69px !important;
	margin: 0; padding: 0;
	background: transparent;
	}

div#cartcontrols input#submit, div#cartcontrols img#submit {
	position: absolute;
	top: 0; left: 308px;
	width: 63px;
	margin: 0; padding: 0;
	background: transparent;
	}
div#cartcontrols input#delete, div#cartcontrols img#delete {
	position: absolute;
	top: 0; left: 290px;
	width: 67px;
	margin: 0; padding: 0;
	background: transparent;
	}



/*
==================================
Reviews
==================================
*/

div.reviews p {
	font-style: italic;
	padding-top: 0;
	}
div.reviews h1 {
	margin-bottom: 0;
	padding-bottom: 0;
	}
div.reviews div.reviewdetails {
	margin: 0 10px 10px 10px; padding: 5px 0 0 0;
	}
div#rightcolumn div.reviews p, div#leftcolumn div.reviews p {
	border-bottom: 1px #E5DEC9 solid;
	}
div.reviewstars {
	width: 100%;
	text-align: center;
	padding: 5px 0;
	}
#content div.reviews {
	border-top: 1px #E5DEC9 solid;
	}
#content div.reviews:first-child {
	border: none; /* the first product doesn't need a border */
	}
div.reviews .date {
	color: #888888;
	}
#content div#reviews div.boxfoot {
	width: 100%;
	min-height: 2px;
	padding: 15px 0 15px 10px; margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}
a.reviewimage {
	float: right;
	margin: 0 10px 10px 10px;
	}
.reviewimage img {
	margin: 0 !important;
	}
img.numstars {
	margin: 5px 0 5px 7px !important;
	vertical-align: middle;
	}



/*
==================================
universal styles
==================================
*/
body {
	margin: 0;
	padding: 0;
	background: #E5DEC9 url(images/body_bkg.gif) top center repeat-y;
	}

#content a:link, #homecontent a:link { color: #29A4CB; font-weight: bold; text-decoration: none; }
#content a:visited, #homecontent a:visited { color: #29A4CB; font-weight: bold; text-decoration: none; }
#content a:hover, #homecontent a:hover { color: #29A4CB; font-weight: bold; text-decoration: underline; }
#content a:active, #homecontent a:active { color: #221513; font-weight: bold; text-decoration: underline; }



h1 {
	font-size: 11pt;
	font-weight: normal;
	color: white;
	/*letter-spacing: -1px;*/
	font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
	margin: 0; padding: 0;
}
.boxbody h1 {
	font-size: 12pt;
	color: #442521;
	font-weight: bold;
	margin: 0 10px 10px 10px; padding: 0;
	}
.boxbody p {
	font-size: 10pt;
	color: #442521;
	margin: 0 10px 0 12px; padding: 10px 0 10px 0; /* if we do it all with margin, we get a gap */
	}
.boxbody ul {
	font-size: 10pt;
	color: #442521;
	margin: 0 10px 0 30px; padding: 10px 0 10px 0; /* if we do it all with margin, we get a gap */
	}


table.minicart {
	width: 100%;
	padding: 4px 0 0 0;
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 9pt;
	line-height: 12pt;
	color: #442521;
	text-align: left;
	}
.minicart a {
	font-weight: bold;
	}
.minicart td.miniprice {
	text-align: right;
	}
.minicart tr.total td {
	color: #F69100;
	font-weight: bold;
	border-top: 1px #E5DEC9 solid;
	}

#whatsnew div.boxbody {
	font-size: 8pt;
	}
td.smallText {
	font-size: 8pt;
	}

div.boxbody img {
	margin: 10px 0 5px 0;
	}

div.boxbody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	/*letter-spacing: 0;*/
	color: #221513;
	}
.boxfoot {
	clear: both;
	}
div.boxbody a {
	color: #221513;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	}
div.boxbody a:link {  }
div.boxbody a:visited {  }
div.boxbody a:hover { color: #29A4CB; text-decoration: underline; }
div.boxbody a:active { color: #221513; }

input {
	margin: 2px;
	}




/*
==================================
main block level layout
==================================
*/
div#main {
	position: relative;
	width: 750px; height: 390px; /*the height of the bkg image */
	margin: 0 auto;
	background: #EAE3D2 url(images/page_bkg.jpg) top left repeat-x;
	}
div#header {
	position: relative;
	width: 100%;
	height: 93px;
	}
div#page {
	position: absolute;
	left: 182px; top: 93px;
	width: 568px;
	margin: 0; padding: 0;
	}
	
div#banner {
	clear: both;
	width: 568px;
	height: 119px;
	margin: 0; padding: 0;
	}
div#usernav {
	clear: both;
	position: relative;
	margin: 0; padding: 10px 0 10px 8px;
	background: #A17752 url(images/brownstripes.png) left bottom repeat-y;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	/*letter-spacing: -1px;*/
	border-top: 1px #9B8574 solid;
	}
#usernav b { font-weight: normal; margin: 0 10px 0 0; }
#usernav a { font-weight: bold; text-decoration: none; color: white; margin: 0 10px 0 0;}
#usernav a#viewcart { position: absolute; right: 0; }
#usernav a em { font-weight: normal; }

/* the box in the brown stripe area on the home page */
#homeusernav div.box {
	position: relative;
	width: 550px;
	margin: 8px 0 0 0; padding: 0;
	}

div#pagenav {
	font-size: 11pt;
	}
div.bottom-pagenav {
	font-size: 9pt;
	}

div#pagenav, div.bottom-pagenav {
	clear: both;
	margin: 0 0 10px 0; padding: 7px 10px 5px 10px;
	font-family: Arial, sans-serif;
	line-height: 1.2;
	color: #442521;
	border-bottom: 1px #E5DEC9 solid;
	}
#pagenav h1, div.bottom-pagenav h1 {
	color: #442521;
	}
#pagenav span, div.bottom-pagenav span {
	margin: 0;
	vertical-align: middle;
	}
/*#pagenav #breadcrumb a { color: #29A4CB; text-decoration: none; }
originally, just breadcrumb a's were blue, etc. I see no reason why all pagenav a's can't have this style
*/

/* see breadCrumb */
#pagenav a:link, div.bottom-pagenav a:link { color: #29A4CB; text-decoration: none; }
#pagenav a:visited, div.bottom-pagenav a:visited { color: #29A4CB; text-decoration: none; }
#pagenav a:hover, div.bottom-pagenav a:hover { color: #29A4CB; text-decoration: underline; }
#pagenav a:active, div.bottom-pagenav a:active { color: #29A4CB; text-decoration: none; }

#pagenav select, div.bottom-pagenav select {
	vertical-align: middle;
	}
#pagenav span.numbernav {
	position: absolute;
	right: 10px;
	}
.bottom-pagenav span.numbernav {
	position: absolute;
	right: 7px;
	}
.numbernav a { color: #29A4CB; text-decoration: none; font-weight: bold; vertical-align: middle; }
.numbernav strong { color: #442521; font-weight: bold; vertical-align: middle; }
.numbernav a img { vertical-align: middle; position: relative; top: -1px; }


div#content {
	position: relative;
	float: left;
	width: 391px;
	margin: 0; padding: 0;
	}
div#tagline {
	width: 350px;
	margin: 0 auto 40px auto;
	padding: 70px 0 0 0;
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #442521;
	text-align: center;
}

#header a#swwmasthead img {
	position: relative;
	left: 14px;
	top: 24px;
	}




/*
==================================
Homepage specific styles
==================================
*/

div#homecontent {
	position: relative;
	float: left;
	width: 565px;
	margin: 0; padding: 0;
	}


div#homeusernav {
	clear: both;
	position: relative;
	margin: 0 0 5px 0; padding: 10px 0 20px 8px;
	background: #A17752 url(images/home_brownstripes.png) left bottom repeat-y;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	/*letter-spacing: -1px;*/
	border-top: 1px #AD9481 solid;
	}
#homeusernav b { font-weight: normal; margin: 0 10px 0 0; }
#homeusernav a { font-weight: bold; text-decoration: none; color: white; margin: 0 10px 0 0;}
#homeusernav a#viewcart { position: absolute; right: 0; }
#homeusernav a em { font-weight: normal; }

/* the box in the brown stripe area on the home page */
#homeusernav div.box {
	position: relative;
	width: 550px;
	margin: 8px 0 0 0; padding: 0;
	}
#homeusernav div.box .boxhead {
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	margin: 0; padding: 4px 0 2px 12px;
	background: url(images/dbrnbrn_home_boxhead.gif) top left no-repeat;
	}
#homeusernav div.box .boxbody {
	width: 100%;
	background: white;
	}
#homeusernav div.box .boxfoot {
	width: 100%;
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whtbrn_home_boxfoot.gif) bottom left no-repeat;
	}
/* end box */

#homeusernav div.boxbody a { /* this is overriding things in the universal styles */
	color: #221513;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
	}
#homeusernav div.boxbody a:link {  }
#homeusernav div.boxbody a:visited {  }
#homeusernav div.boxbody a:hover { color: #29A4CB; text-decoration: underline; }
#homeusernav div.boxbody a:active { color: #221513; }





/* 2 column hompage content area */
#homecontent .homecolumns {
	margin: 0; padding: 0;
	width: 100%;
	}
#homecontent .homecolumns .homecolumnsfoot {
	clear: both;
	margin: 0; padding: 0;
	}

#homecontent .homecolumns div.box {
	position: relative;
	width: 273px;
	padding: 0;
	}
#homecontent .homecolumns div.box .boxhead {
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	margin: 0; padding: 4px 0 2px 12px;
	background: url(images/dbrntan_home_middle_boxhead.gif) top left no-repeat;
	}
#homecontent .homecolumns div.box .boxbody {
	width: 100%;
	background: white;
	margin: 0;
	}
#homecontent .homecolumns div.box .boxfoot {
	width: 100%;
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_home_middle_boxfoot.gif) bottom left no-repeat;
	margin: 0;
	}
.hcleft { float: left; margin: 0; padding: 0; position: relative; left: 8px; } /* yet another IE workaround */
.hcright { float: right; margin: 0; position: relative; right: 7px;}


.homecolumns div.drummer {
	position: relative;
	padding: 5px 0;
	border-top: 1px #E5DEC9 solid;
	}
.homecolumns div.drummer div.player {
	margin: 0 0 0 4px;
	padding: 0;
	}
/*.homecolumns div.drummer object {
	margin: 0 0 0 4px;
	padding: 0;
	}*/
.homecolumns div.drummer h1 {
	font-size: 8pt;
	margin: 0 0 5px 0; padding: 0 0 0 4px;
	width: 140px;
	}
.homecolumns div.drummer p.purchase {
	font-weight: bold;
	font-size: 8pt;
	top: 5px; right: 0;
	width: auto;
	margin: 0; padding: 0;
	}
.homecolumns div.drummer p.purchase a {
	text-transform: uppercase;
	}


/* end homecolumns */




/*
==================================
middle column box styles (should these be revised to be more like the right and left columns?)
==================================
*/
div#description {
	position: relative;
	width: 378px;
	margin: 0 0 10px 8px; padding: 0;
	}
/* note - making boxheads and foots "tall" images (like sidebar boxhead) would allow us to 
put content in the heads! */


/* description box definition */
#description .boxhead {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_small_boxhead.gif) top left no-repeat;
	}
#description .boxbody {
	width: 100%;
	background: white;
	}
#description .boxfoot {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}
#description p {
	margin: 0; padding: 10px;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	font-style: italic;
	}
/* end description box */


/* center column box definition */
#content div.box {
	position: relative;
	width: 378px;
	margin: 0 0 10px 8px; padding: 0;
	/*background: white;*/
	}
	
	#content form div.box {
		margin-left: 0 !important;
		}
	
#content div.box .boxhead {
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	margin: 0; padding: 4px 0 2px 12px;
	background: url(images/dbrntan_middle_boxhead.gif) top left no-repeat;
	}
#content div.box .boxbody {
	width: 100%;
	background: white;
	}
#content div.box .boxfoot {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}
/* end center column box */
	

/* products box definition */
div#products {
	position: relative;
	width: 378px;
	margin: 0 0 0 8px; padding: 0;
	}
#products .boxhead {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_small_boxhead.gif) top left no-repeat;
	}
#products .boxbody, #productdetail .boxbody {
	width: 100%;
	background: white;
	}
#products .boxfoot {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}
/* end products box */


#productdetail .boxhead {
	/*width: 100%; because of the floating details, we have to set this to a exact value. */
	width: 368px;
	min-height: 2px;
	padding: 0 0 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background: url(images/whttan_small_boxhead.gif) top left no-repeat;
	}


#productdetail .boxfoot {
	/*width: 100%; because of the floating details, we have to set this to a exact value. */
	width: 368px;
	min-height: 2px;
	padding: 15px 0 15px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background: url(images/whttan_small_boxfoot.gif) bottom left no-repeat;
	}

div#productdetail {
	width: 378px;
	margin: 0 0 10px 8px; padding: 0;
	background: white;
	}
	
#productdetail h1 {
	font-size: 12pt;
	color: #442521;
	font-weight: bold;
	margin: 0 3px 5px 10px; padding: 8px 0 0 0;
	}
/*#productdetail object { 06.11.06 - possibly becuase of the javascript embed of flash, this stopped working
	margin: 0 0 10px 10px;
	padding: 0;
	border-bottom: 1px #E5DEC9 solid;
	}*/
#productdetail div.player {
	margin: 0 10px 10px 10px;
	padding: 0;
	border-bottom: 1px #E5DEC9 solid;
	}
#productdetail .player img {
	margin: 0;
	}
#productdetail img {
	margin: 0 0 0 10px;
	}
#productdetail .details {
	width: 120px;
	margin: 0 10px 0 5px; padding: 0;
	float: left;
	text-align: center;
	}
#productdetail .details p {
	font-size: 8pt;
	border-bottom: 1px #E5DEC9 solid;
	padding: 0 0 10px 0;
	margin: 10px 0 0 0;
	}
#productdetail .details img {
	margin: 0;
	}
#productdetail .details p.purchase {
	position: relative;
	color: #F69100;
	font-weight: bold;
	font-size: 12pt;
	}
#productdetail .details select {
	width: 100%;
	}



div.product {
	position: relative;
	min-height: 115px;
	margin: 0; padding: 0 0 10px 0;
	font-family: Arial, sans-serif;
	background: white;
	border-top: 1px #E5DEC9 solid;
	}
div.product:first-child {
	border-top: 1px white solid !important; /* no visible border (seperator), but needs the border otherwise things shift around */
	}
.product img {
	/* the img still has 10px of margin around it due to boxbody.img */
	float: left;
	margin: 10px 0 10px 10px !important;
	}
.product .listing-productinfo {
	float: right;
	width: 240px;
	margin: 0; padding: 0 5px 0 0;
	}
.product h1 {
	font-size: 12pt;
	color: #442521;
	font-weight: bold;
	margin: 10px 3px 5px 10px; padding: 0;
	}
.product h1 a:link { color: #442521; }
.product h1 a:visited { color: #442521; }
.product h1 a:hover { color: #29A4CB; }
.product h1 a:active { color: #442521; }

.product p {
	font-size: 8pt;
	color: #442521;
	margin: 0 3px 10px 10px; padding: 0;
	}
.product ul {
	font-size: 8pt;
	color: #442521;
	margin: 0 3px 10px 10px; padding: 0;
	}

.product p.purchase {
	color: #F69100;
	font-weight: bold;
	font-size: 12pt;
	padding: 0;
	margin-bottom: 0 !important;
	}
.product p.purchase img {
	float: none !important;
	vertical-align: middle;
	margin: 0; padding: 0;
	}

/*
==================================
Drummer product listing - extends .product
==================================
*/
#products div.drummer {
	min-height: 10px; /* overriding product min-height */
	}

.drummer p.purchase {
	position: absolute;
	right: 0; top: 10px;
	text-align: right;
	padding: 0 5px 0 0; margin: 0;
	width: 100px;
	}
.drummer p.purchase img {
	position: absolute;
	top: 12px; left: 0;
	}
	
.drummer p {
	margin: 10px 3px 0 10px;
	}
/*.drummer object { 6.11.06 replaced with player div... due to new flash embed
	display: block;
	margin: 0 0 0 10px;
	padding: 0;
	width: 266px; height: 18px;
	}*/
.drummer div.player {
	display: block;
	margin: 0 0 0 10px;
	padding: 0;
	width: 266px; height: 18px;
	}
.drummer .player img {
	position: static;
	top: 0; left: 0;
	margin: 0; padding: 0;
	}
.drummer h1 {
	width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}




/*
==================================
Right column box styles
==================================
*/
#rightcolumn .image {
	width: 100%;
	margin: 0; padding: 0;
	text-align: center;
	}

div#rightcolumn {
	float: right;
	width: 172px;
	margin: 0; padding: 0;
	}
#rightcolumn div.box {
	width: 100%;
	margin: 0 0 10px 0; padding: 0;
	}
	
/* right column boxes description */
#rightcolumn div.box .boxhead {
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/brntan_right_boxhead.gif) top left no-repeat;
	padding: 4px 0 2px 5px;
	}
#rightcolumn div.box .boxbody {
	background: white;
	margin: 0; padding: 0 5px 3px 5px;
	}
#rightcolumn div.box .boxfoot {
	width: 100%;
	min-height: 2px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/brntan_right_boxfoot.gif) bottom left no-repeat;
	}
/* end right column boxes */	

#rightcolumn h2 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 9pt;
	/*letter-spacing: normal;*/
	color: #29A4CB;
	padding: 4px 0 2px 0; margin: 0;
	}
#rightcolumn p {
	font-family: Arial, sans-serif;
	font-size: 9pt;
	color: #442521;
	padding: 0 0 4px 0;
	margin: 0;
	}
#rightcolumn a:link { color: #29A4CB; text-decoration: none; }
#rightcolumn a:visited { color: #29A4CB; text-decoration: none; }
#rightcolumn a:hover { color: #29A4CB; text-decoration: underline; }
#rightcolumn a:active { color: #29A4CB; text-decoration: none; }




#rightcolumn h1 a:link, #leftcolumn h1 a:link { color: white; text-decoration: none; }
#rightcolumn h1 a:visited, #leftcolumn h1 a:visited  { color: white; text-decoration: none; }
#rightcolumn h1 a:hover, #leftcolumn h1 a:hover { color: white; text-decoration: underline; }
#rightcolumn h1 a:active, #leftcolumn h1 a:active { color: white; text-decoration: none; }
/*
==================================
left column box styles
==================================
*/
div#leftcolumn { /* note this does not define a "column" but a single block element */
	width: 180px;
	margin: 0; padding: 30px 0 0 0;
	/*letter-spacing: -1px;*/
	font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
	font-weight: normal;
	color: white;
	}

/* left column boxes definition */
#leftcolumn div.box {
	width: 100%;
	margin: 0 0 2px 0;
	}
#leftcolumn .box div.boxhead {
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	margin: 0; padding: 4px 0 2px 12px;
	background: url(images/dbrntan_left_boxhead.gif) top left no-repeat;
	}
#leftcolumn .box div.boxbody {
	color: #2B1A18;
	background: white;
	margin: 0; padding: 1px 12px 5px 12px;
	/*letter-spacing: normal;*/
	}


#leftcolumn .box div.boxfoot {
	width: 100%;
	min-height: 4px;
	font-size: 1px; /* this is a hack for IE.. it won't collapse empty divs */
	background: url(images/whttan_left_boxfoot.gif) bottom left no-repeat;
	}
/* end left column boxes */



/*
==================================
specific items that appear in leftcolumn
==================================
*/

#leftcolumn #categories .boxbody {
	background: #442521;
	font-size: 14pt;
	font-weight: normal;
	line-height: 1.3;
	color: white;
	}
	

#categories a:link { font-size: 14pt; color: white; text-decoration: none; }
#categories a:visited { font-size: 14pt; color: white; text-decoration: none; }
#categories a:hover { font-size: 14pt; color: #F69100; text-decoration: none; }
#categories a:active { font-size: 14pt; color: white; text-decoration: none; }

#categories .category-subs-selected {
	font-weight: normal;
	}

#leftcolumn #categories .boxfoot,
#leftcolumn #manufacturers .boxfoot {
	background: url(images/dbrntan_left_boxfoot.gif) bottom left no-repeat;
	}

#leftcolumn #manufacturers .boxbody {
	background: #442521;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.3;
	color: white;
	}

#manufacturers a:link { font-size: 11pt; color: white; text-decoration: none; }
#manufacturers a:visited { font-size: 11pt; color: white; text-decoration: none; }
#manufacturers a:hover { font-size: 11pt; color: #F69100; text-decoration: none; }
#manufacturers a:active { font-size: 11pt; color: white; text-decoration: none; }



.newproduct .boxbody {
	text-align: center;
	/*letter-spacing: 0;*/
	font-family: Arial, sans-serif;
	font-size: 8pt;
	margin: 0; padding: 0 0 5px 0;
	}	
#leftcolumn #search {
	text-align: left;
	}
	
#search form {
	text-align: left;
	}

#leftcolumn #search .boxhead {
	background: url(images/blutan_left_boxhead.gif) top left no-repeat;
	}
#leftcolumn #search .boxbody {
	background: #29A4CB;
	text-align: left;
	}
#leftcolumn #search .boxfoot {
	background: url(images/blutan_left_boxfoot.gif) bottom left no-repeat;
	}
#leftcolumn #search input {
	width: 90%;
	}
#leftcolumn #search a {
	color: white;
	}


table.productListing-data td {
  padding: 0 0 10px 0;
  text-align: center;
}
/* all links in productlisting tables should be brown */
div#homecontent table.productListing-data a:link, div#content table.productListing-data a:link { color: #221513; font-weight: normal; text-decoration: none; }
div#homecontent table.productListing-data a:visited, div#content table.productListing-data a:visited { color: #221513; font-weight: normal; text-decoration: none; }
div#homecontent table.productListing-data a:hover, div#content table.productListing-data a:hover { color: #221513; font-weight: normal; text-decoration: underline; }
div#homecontent table.productListing-data a:active, div#content table.productListing-data a:active { color: #221513; font-weight: normal; text-decoration: none; }

/* ALL THE OLD STYLES ARE in oldstyles.css */




/*
==================================
misc
==================================
*/
.nobreak {
	white-space: nowrap;
	}

.clear {
	clear: both !important;
	margin: 0 !important; padding: 0 !important;
	height: 1px !important;
	line-height: 1px !important;
	font-size: 1px !important;
	border: none !important;
	}