/* CSS Document */


/* =CONTENTS
----------------------------------------------------------------------------


=BODY
declatartons for general site layout

=LOGO
The logo appearance on every page

=UTILS
The small menu at the top of the screen

=THREE COLUMNS
The code that holds the three colums in place

=CENTRE
The parent for all the content in the centre column

=FEATURED
The featured product section


----------------------------------------------------------------------------*/


/* =BODY
----------------------------------------------------------------------------*/
body{
font-family:			Verdana, Arial, Helvetica, sans-serif;
font-size:				small;
}

img{
border:					none;
border-style:			none;
}

.wrapper{
width:					800px;
margin-left:			auto;
margin-right:			auto;
}

a{
text-decoration:		none;
}

a:hover{
text-decoration:		underline;
}

.bold{
font-weight:			bold;
}

.floatRight {
float:					right;
margin-right:			50px;
}

.oneColMiddle p{
width:					370px;
}

.continueShopping a{
color:					#a10b0b;
text-align:				right;
width:					370px;
}

.item{
width:					450px;
}

.centre #error, .centre #info{
margin-left:			-20px;
}

.centre #error{
color:					#FF0000;
}

.centre #info{
color:					#0000FF;
}


.product_details_table_no_bottom_border th{
font-weight:			lighter;
}

.product_details_table_no_bottom_border .header{
font-weight:			bold;
}

.product_details_table_no_bottom_border{
text-align:				left;
width:					430px;
}



.order_admin_item_address td{
width:					180px;
text-align:				left;
}

.order_admin_item_address th{
font-weight:			bold;
width:					220px;

}


/* =LOGO
----------------------------------------------------------------------------*/


.top h1{
background:				url(images/eclecticsounds2.gif) no-repeat top left;
width:					300px;
height:					64px;
text-indent:            -5000px;
margin-bottom:			0px;
position:				relative;
left:					50%;
margin-left:			-400px;
}


/* =STRAPLINE
----------------------------------------------------------------------------*/

.top h2{
font-style:				italic;
margin:					-40px 0px 20px 120px;
position:				relative;
left:					50%;
font-family:			Georgia, "Times New Roman", Times, serif;

}




/* =UTILS
----------------------------------------------------------------------------*/

.top .utils{
width:					680px;
position:				relative;
left:					50%;
margin-left:			-340px;
margin-bottom:			0px;
padding-bottom:         0px;
}

.top .utils li{
float:					right;
padding-left:           15px;
list-style:				none;
}

.top .utils li a{
color:					#a10b0b;
display:				block;
}

/* =MENUs
----------------------------------------------------------------------------*/

.mainMenu, .subMenu{
float:					left;
width:					760px;
list-style:				none;
}

.mainMenu li, .subMenu li{
float:					left;
}


.mainMenuWrap{
height:					28px;
width:					100%;
background:				url(images/mainMenuBackground.gif);
float:					left;
}

.subMenuWrap{
background-color:		#dfdfdf;
height:					28px;
width:					100%;
float:					left;
}



/* =Main Menu
----------------------------------------------------------------------------*/



.mainMenu{
height:					28px;
margin-bottom:			0px;
margin:                 0px;
width:					800px;
position:				relative;
left:					50%;
margin-left:			-400px;
}

.mainMenu li{
background:				url(images/menuBreaker.gif) no-repeat top right;
padding:                5px 15px 5px 15px;
}

.mainMenu a{
color:					#FFF;
}

.mainMenu #first{
margin-left:			-40px;
}

/* =MAIN MENU =CURRENT PAGE
----------------------------------------------------------------------------*/

/* The grey "page your on" menu button here is using an attribute selector to bar IE6 from using it */


.mainMenuWrap .mainMenu li[class="selected"] a{
background:				url(images/mainMenuOn.gif) repeat-x;
display:				block;
padding:                5px 15px 5px 15px;
margin:					-5px -13px 0px -15px;
height:					35px;
color:					#000;
}






/* =Sub Menu
----------------------------------------------------------------------------*/



.subMenu{
padding:                5px 0px 5px 0px;
margin-top:				0px;
margin-left:			auto;
margin-right:			auto;
position:				relative;
left:					50%;
margin-left:			-400px;
width:					800px;
}

.subMenu li{
padding:                0px 15px 0px 15px;
}

.subMenu a{
color:					#a10b0b;
}


/* =CENTRE
----------------------------------------------------------------------------*/

.centre .categoryHeading{
background:				url(images/blackBanner.gif);
width:					467px;
height:					42px;
color:					#FFF;
font-weight:			500;
padding-top:            10px;
padding-left:           10px;
margin-bottom:			0px;
}

.centre .productHeading{
font-size:				medium;
}




.price{
color:					#a11111;
text-align:				center;
}

a{
color:					#000;
}





/* =CENTRE =FEATURED
----------------------------------------------------------------------------*/

.featured{
background:				url(images/FeaturedBackGround.gif) repeat-x;
height:					120px;
width:					477px;
margin-top:				0px;
}

.featured img{
float:					left;
width:					94px;
margin:					12px;
}

.featuredText{
float:					left;
width:					357px;
}

.featuredText .price{
width:					100%;
}


.centre .featured h2, .centre .featured h3{
font-weight:			lighter;
color:					#FFF;
float:					left;
width:					100%;
}



.featured h2{
font-size:				xx-large;
margin-top:				6px;
margin-bottom:			0px;
}

.featured p{
float:					left;
}

.featured a{
color:					#FFF;
}

.featured h3 span{
font-size:				small;
color:					#FFF;
}

.featured h3{
margin:					0px;
}

.featured .price{
font-size:				large;
text-align:				left;
padding-bottom:         0px;
margin-bottom:			0px;
}

.featured .buyItNow{
float:					right;
text-indent:            -5000px;
margin:					-23px 20px 0px 0px;
padding-bottom:         0px;

}

.featured .buyItNow a{
background:				url(images/featuredBuyOff.gif);
width:					51px;
height:					20px;
display:				block;

}

.featured .buyItNow a:hover{
background-image:		url(images/featuredBuyOver.gif);
}
 
/* =CENTRE =TABLE
----------------------------------------------------------------------------*/

.productListings table{
width:					477px;
border:					0px;
padding:                0px;
margin:					-1px 0px 0px 0px;
border-collapse:		collapse;
border-color:			#878787;
}

.conditionColumn, .priceColumn{
width:					90px;
}


.results_count_info{
font-size:				smaller;
text-align:				right;
vertical-align:			top;
padding-right:           12px;
}

.pageable_links{
text-align:				center;
}

.pageLinks{
height:					5px;
}

.pageLinks p{
margin:					0px;
padding:                0px;
}

/* =CENTRE =LISTINGS =TABLE =HEADER
----------------------------------------------------------------------------*/

.productListings table .listingsTableHeader tr{
height:					40px;
background:				url(images/redBar.gif) repeat-x;
}

.productListings table thead tr{
height:					40px;
background:				url(images/redBar.gif) repeat-x;
}


.listingsTableHeader th{
color:					#FFF;
text-align:				center;
font-weight:			lighter;
}

.productListings table thead th{
color:					#FFF;
text-align:				center;
font-weight:			lighter;
}




.listingText h4{
font-size:				1.0em;
}

.listingText h5{
font-size:				0.8em;
margin-bottom:			0px;
padding-bottom:         0px;
}

.productListings table thead .descriptionColumn{
border-left:			1px solid #fff;
border-right:			1px solid #fff;
}

.listingsTableHeader .descriptionColumn{
border-left:			1px solid #fff;
border-right:			1px solid #fff;
}


/* =CENTRE =LISTINGS =ROWS
----------------------------------------------------------------------------*/

/* =PAGEINATED RESULTS - 1 2 3 4 5 6 > 
----------------------------------------------------------------------------*/

.centre .productListings .pageLinks tr{
height:					20px;
}

/*
----------------------------------------------------------------------------*/


.productListings table tr{
height:					94px;
border-left:			0px;
border-right:			0px;
}

.productDescription{
border-right:			1px solid #878787;
border-bottom:			1px solid #878787;
}

.productListings tr td{
border-bottom:			1px solid #878787;
}

.productListings .basketOptions td{
border-bottom:			none;
}



.productDescription img{
float:					left;
width:					64px;
margin:					15px;
}

.productDescription h4{
margin:					15px 0px 0px 0px;
}

.productDescription h5{
margin:					0px;
}

.productDescription p{
font-size:				smaller;
margin-right:			5px;
}

.productCondition{
font-size:				small;
text-align:				center;
}

/* =CENTRE =LISTINGS 
----------------------------------------------------------------------------*/

.oddListing{
background:				#f4f4f4;
}

.evenListing{
background:				#FFF;
border-top:				1px solid #878787;
border-bottom:			1px solid #878787;
}

.oddListing .buyItNow, .evenListing .buyItNow{
text-indent:            -5000px;
margin:					0px 0px 0px 20px;
}

.oddListing .buyItNow a, .evenListing .buyItNow a{
width:					51px;
height:					20px;
display:				block;
text-align:				center;
}

.oddListing .buyItNow a{
background:				url(images/featuredBuyOff.gif);
}

.evenListing .buyItNow a{
background:				url(images/buyOnWhiteOff.gif);
}

.oddListing .buyItNow a:hover{
background-image:		url(images/featuredBuyOver.gif);
}

.evenListing .buyItNow a:hover{
background:				url(images/buyOnWhite.gif);
}

/* =RIGHT =BASKET
----------------------------------------------------------------------------*/




.basketTitle{
margin:					0px;
padding:                0px;
}

.basketTitle a{
background:				url(images/basketHeader.gif);
text-indent:            -5000px;
width:					153px;
height:					23px;
margin-top:				15px;
margin-bottom:			0px;
display:				block;
}

.basket{
background:				url(images/basketCentreBG.gif) repeat-y;
margin-top:				0px;
padding-right:			12px;
}

.basket table{
margin-left:			6px;
margin-top:				0px;

}

.basket p{
border-collapse:		collapse;
margin:					0px;
padding:                5px;
}

.basketDeleteCross a{
background:				url(images/DeleteCross.gif);
height:					13px;
width:					13px;
display:				block;
font-size:				9px;
text-indent:            -5000px;
}

.basketProductName a{
font-size:				smaller;
color:					#a11111;
}

.basketProductSplitter{
background:				url(images/basketProductSplitter.gif);
width:					124px;
}

.basket .price{
float:					right;
padding-right:          3px;
}

.basketTotalRow{
background-color:		#f4f4f4;
color:					#000;
}

.basketTotalRow p{
margin:					2px;
padding:                0px;
}
.basket .basketTotalRow .price{
color:					#000;
}


.basketExpandRow a{
color:					#a11111;
background:				url(images/RedArrowOnWhite.gif) center right no-repeat;
padding-right:          24px;
padding-left:           3px;

}

.basketCheckout a{
background:				url(images/checkoutButtonOff.gif);
width:					130px;
height:					19px;
display:				block;
text-indent:            -5000px;
margin:					2px 0px 0px 0px;
padding:                0px;
}

.basketCheckout a:hover{
background:				url(images/CheckoutButtonOver.gif);
}

.basketFoot{
background:				url(images/checkoutBackgroundBottom.gif);
height:					20px;
width:					153px;
margin:					0px;
padding:                0px;
}

/* =LEFT =SEARCH
----------------------------------------------------------------------------*/


.searchTitle{
margin:					0px;
padding:                0px;
}

.searchTitle a{
background:				url(images/searchBanner.gif);
text-indent:            -5000px;
width:					157px;
height:					22px;
margin-top:				17px;
margin-bottom:			0px;
display:				block;
}

.searchResults a{
text-decoration:		underline;
}

.searchResults{
margin-left:			15px;
margin-top:				5px;
width:					120px;
}

.product_hit_breadcrumbs a:hover{
text-decoration:		none;
}


.searchResults .product_hit, .searchResults .product_hit a{
color:					blue;
text-decoration:		underline;
}

.searchResults .product_hit, .searchResults .product_hit a:hover{
text-decoration:		none;
}

.search{
background:				url(images/searchMiddle.gif) repeat-y;
padding-top:			5px;
padding-bottom:         5px;

font-size:				xx-small;
}

.search table{
margin:					0px 0px 0px 14px;
padding:                0px;
border-collapse:		collapse;
}


.search .searchBox{
width:					9em;

border-style:			solid;
border-width:			1px;
border-color:			#000;

}

.search .go{
width:					51px;
height:					20px;

float:					right;
}

.searchFoot{
background:				url(images/searchBottom.gif) top left no-repeat;
width:					157px;
height:					15px;
}


/* =LEFT =BROWSE =STAFF
----------------------------------------------------------------------------*/

.browseTitle{
margin:					0px;
padding:                0px;
}

.browseTitle a, .staffBox a{
text-indent:            -5000px;
width:					157px;
height:					23px;
margin:					5px 0px -1px -1px;
display:				block;
}

.staffBox{
margin:					16px 0px 0px 1px;
}

.content .left ul{
margin:					0px 0px 0px 25px;
padding:                5px 0px 0px 0px;
list-style:				none;
}

.content .left ul a{
text-decoration:		underline;
color:					blue;
}

.content .left ul a:hover{
text-decoration:		none;
}

.browseTitle a{
background:				url(images/browseBanner.gif);
}

.staffBox a{
background:				url(images/staffInterfaceBanner.gif);
}


.browse, .staff{
background:				url(images/browseMiddle.gif) repeat-y;
width:					157px;
}


.browse .browse_root{
font-weight:			bold;
}

.browse p, .staff p{
padding:                0px;
margin:					0px;
font-size:				smaller;
width:					130px;
margin-left:			15px;
padding-top:            7px;
}

.browseFoot, .staffFoot{
background:				url(images/browseBottom.gif);
width:					157px;
height:					18px;
}

.staffFoot{
margin-bottom:			-10px;
}

/* =LEFT =BROWSE =RESULTS
----------------------------------------------------------------------------

=CHANGE?
These styles were taken directly from rich.css for the HTML he created in the
browse box.

----------------------------------------------------------------------------*/


.browse a{
text-decoration:	underline;
}

.browse a:hover{
text-decoration:	none;
}

.browse_root {
font-size:10px;
}

.browse_current{
font-size:			12px;
font-weight:		bold;
margin-left:		20px;
}

.browse_parent{
font-weight:		bold;
margin-left:		6px;
}

.browse_children{
margin-left:		25px;
}


/* =FOOTER
----------------------------------------------------------------------------*/

.footer{
background-color:	#f4f4f4;
width:				100%;
height:				28px;
float:				left;
margin-top:			20px;
margin-bottom:		20px;
border-top:			solid 1px #878787;
border-bottom:		solid 1px #878787;
}

.footerMenu{
margin-top:			6px;
margin-left:		35px;
}

.footerMenu{
list-style:			none;
}

.footerMenu li{
float:				left;
padding-right:      22px;
}



/* =HOME
----------------------------------------------------------------------------*/

.centre .homeHeadline{
font-size:			x-large;
}

.centre .homeSubHeading{
font-size:			large;
color:				#a11111;
margin:				0px 0px 15px 0px;
}

.centre .homeTable h3{
font-size:			small;
margin:				2px;
}

.centre .homeTable h4{
font-size:			x-small;
margin:				0px;
}

.centre .homeTable .price{
margin:				0px 0px 15px 0px;
text-align:			left;
}

/* =ONE COLUMN CONTENT
----------------------------------------------------------------------------*/

.oneColumnContent{
float:				left;
margin-left:		-5px;
margin-top:			2px;
}

.oneColumnContent .productListings table{
width:					100%;
border:					0px;
padding:                0px;
margin:					-1px 0px 0px 0px;
border-collapse:		collapse;
border-color:			#878787;
}

.oneColumnContent .conditionColumn, .priceColumn{
width:					20%;
}

.oneColMiddle ol li{
width:					350px;
display:				list-item; /*HACK This help IE6/7 remember how to count lists again after setting li width */
}


.oneColTop{
height:					0px;
width:					470px;
background:				url(images/oneColTop.gif) no-repeat;
font-family:			Georgia, "Times New Roman", Times, serif;
font-size:				XX-large;
font-style:				italic;
font-weight:			lighter;
margin-top:				10px;
padding-top:            10px;
padding-bottom:         10px;
padding-left:           20px;
margin-bottom:			0px;
}

.oneColMiddle{
width:					460px;
padding-left:           30px;

padding-top:            30px;
background:				url(images/oneColMiddle.gif) repeat-y;
}

.oneColFooter{
width:					490px;
background:				url(images/oneColFooter.gif) no-repeat;
height:					62px;
margin-top:				-20px;
}

/* =MY =ACCOUNT
----------------------------------------------------------------------------*/

.oneColTop span a{
font:					Arial, Helvetica, sans-serif;
font-size:				small;
color:					#a10b0b;
}

.admin_table{
width:					433px;
border-collapse:		collapse;
}

.admin_table td{
text-align:				center;
}

.odd{
background:				#F4F4F4;
}

.admin_table th{

background:				#000;
color:					#FFF;

padding-right:          4px;

text-align:				center;

}

/* =BASKET PAGE
----------------------------------------------------------------------------*/




.basketTable .productDescription{
border-left:			1px solid #878787;
border-right:			1px solid #878787;
}

.basketTable{
float:					left;
}

.productListings table .basketHeading{
height:					40px;
background:				url(images/redBar.gif) repeat-x;
}

.basketHeading th{
color:					#FFF;
text-align:				center;
font-weight:			lighter;
}

.oneColumnContent table{
margin:					0px;
padding:                0px;
}

.oneColumnContent .productListings table .basketOptions{
height:					40px;
}


.oneColumnContent .productListings table .basketTotals{
height:					20px;
text-align:				right;
border-top:				1px solid #fff;
border-bottom:			1px solid #fff;
background:				#f4f4f4;
}

.oneColumnContent .productListings table .totalsTable{
width:					700px;
}

.totalsPrice{
text-align:				right;
padding-right:			15px;	
}

.oneColumnContent .productListings table .basketOptions a{
color:					#a10b0b;
}

.basketOptions .basketCheckout{
float:					right;
margin-top:				10px;

}

.basketOptions .continueShopping{
float:					left;
margin-top:				10px;
}

.oneColumnContent .productListings .updateBasket{
text-align:				right;
color:					#a11111;
background:				url(images/RedArrowOnWhite.gif) center right no-repeat;
padding-right:          26px;
padding-left:           3px;
}

.oneColumnContent .productListings .continueShopping{
color:					#a11111;
background:				url(images/RedArrowOnWhiteLeft.gif) center left no-repeat;
padding-left:          16px;
}


.productDescriptionCol{
width:					300px;
}

.format{
width:					60px;
text-align:				center;
border-left:			1px solid #878787;
border-right:			1px solid #878787;
}

.quantity{
border-right:			1px solid #878787;
width:					60px;
}

.priceCol{
width:					60px;
}

.priceCol, .quantityCol, .productDescriptionCol, .formatCol{
border-right:			1px solid #FFF;
}

.oddListing .delete, .evenListing .delete{
text-indent:            -5000px;
margin:					0px 0px 0px 20px;
}

.oddListing .delete a, .evenListing .delete a{
width:					51px;
height:					20px;
display:				block;
text-align:				center;
}

.oddListing .delete a{
background:				url(images/DeleteGreyOff.gif);
}

.evenListing .delete a{
background:				url(images/deleteWhiteOff.gif);
}

.oddListing .delete a:hover{
background-image:		url(images/deleteGreyOver.gif);
}

.evenListing .delete a:hover{
background:				url(images/deleteWhiteOver.gif);
}


.quantity{
width:					1em;
text-align:				center;
}

.quantityLabel{
margin-left:			5px;
}

.oneColumnContent .productDescription{
border-left:			#FFF;
border-top:				#FFF;
border-bottom:			#FFF;
}

/* =PRODUCT PAGE
----------------------------------------------------------------------------*/

.productPage{
background:				url(images/productBacker.gif) repeat-x;
width:					477px;
height:					206px;
}

.productPage img{
height:					175px;
width:					175px;
margin:					16px;
float:					left;

}

.productPage .featuredText{
float:					left;
width:					270px;
margin-top:				5px;
}

.centre .productPage h2, .centre .productPage h3{
font-weight:			lighter;
color:					#000;
float:					left;
width:					100%;
}



.productPage h2{
font-size:				1.5em;
margin-top:				6px;
margin-bottom:			0px;
}

.productPage p{
float:					left;
}

.productPage a{
color:					#000;
}



.productPage h3{
margin:					0px;
font-size:				small;
}

.productPage .price{
font-size:				xx-large;
text-align:				left;
padding: 	            0px;
margin:					0px;
width:					270px;
}

.productPage .freeDelivery{
text-align:				left;
width:					270px;
margin:					0px;
}

.productPage .buyItNow{
width:					270px;
text-indent:            -5000px;
margin:					5px 0px 5px 0px;
padding-bottom:         0px;
}

.productPage .artist{
margin:					0px;
width:					270px;
}

.productPage .availability{
width:					270px;
margin:					3px 0px 0px 0px;
padding:                0px;
font-size:				0.8em;
}

.productPage .buyItNow a{
background:				url(images/featuredBuyOff.gif);
width:					51px;
height:					20px;
display:				block;

}

.productPage .buyItNow a:hover{
background-image:		url(images/featuredBuyOver.gif);
}



.productPageHeading{
background:				url(images/header2ProductPage.gif) repeat-x;
height:					21px;
color:					#FFFFFF;
font-weight:			lighter;
padding-top:            4px;
padding-left:           4px;
margin:					0px;
width:					473px;
font-size:				small;
}

.productPageHeading a{
color:					#FFF;
}

.productDetails{
float:					left;
}

.trackListings{
border-collapse:		collapse;
width:					477px;
margin-top:				5px;
text-align:				left;
}

.productDetails .homeTable{
margin-top:				20px;
}


/* =ADMIN PAGES =MANAGEMENT PAGES
----------------------------------------------------------------------------

=CHANGE?
The following CSS is for the admin pages codes by Rich. The HTML in the pages
needs to be sorted out to make it compliant and semantic. The following CSS
rules are to make the pages work short term, long term the pages HTML needs
to be changed, along with the CSS.

--------------------------------------------------------------------------*/

.bold{
width:				100%;
}

#ordersHeader{
background-color:	#f4f4f4;
height:				20px;
width:				500px;
}



.centreAndRight .centre .productTable{
width:				477px;
}













/* =THREE COLUMNS
----------------------------------------------------------------------------*/

.admin .content{
width:					1000px;
}

.admin .centre{
width:					684px;

}

.admin .centreAndRight{
width:					843px;
}

.admin .product_details_table_no_bottom_border{
width:					630px;
}

.admin .wrapper{
width:					1000px;
}

.admin .footerMenu{
margin-left:			120px;
}

.content{
width:					800px;
margin:					0 auto;
text-align:				left;
}

.left{
width:					157px;
float:					left;
}

.centreAndRight{
float:					right;
width:					643px;
}

.centre{
float:					left;
width:					484px;
padding-left:           2px;
}

.right{
float:					right;
width:					157px;

}

.footer{
clear:					both;
}