/* ========================================================
CATALOGUE STYLES. To be imported to the main catalogue templates; folder, item, kit, search-folder, search-results, etc.
======================================================== */
.explore { font-size: 0.65em; font-weight: normal; color: #888; letter-spacing: normal; }

/* ========================================================
Store Header (Top Level Product Folders/Categories)
======================================================== */
#context-nav a { text-align: center; background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; display: block; color: #000; text-decoration: none; font-size: 11px; padding: 0 5px; margin: 0 4px; font-weight: bold; /*height: 4em;*/ vertical-align: middle; /*line-height: 1.5;*/ }

/* Single-line Items */
#context-nav .projection a, #context-nav .computers a, #context-nav .printers a, #context-nav .networking a, #context-nav .software a, #context-nav .electronics a, #context-nav .communication a, #context-nav .clearance a { line-height: 3.75; }

/* Dual-line Items */
#context-nav span { display: block; }
#context-nav .office-supplies { width: 5.5em; }
#context-nav .data-storage { width: 5.5em; }
#context-nav .latest-deals { width: 5.5em; }
#context-nav .computer-monitors { width: 6.5em; }
#context-nav .computer-peripherals { width: 7em; }
#context-nav .computer-components { width: 7.5em; }
#context-nav .white-domestic-goods, #context-nav .clearance { display: none; }
#context-nav .computer-peripherals a, #context-nav .computer-monitors a, #context-nav .office-supplies a, #context-nav .data-storage a, #context-nav .computer-components a, #context-nav .latest-deals a, #context-nav .white-domestic-goods a { line-height: 1.9; }

/* ========================================================
Banner Slots
======================================================== */
.banner { margin: 0; }
p.slot-rectangle, p.slot-square, p.slot-large, p.slot-wide-rectangle, p.slot-extra-large, p.slot-store { margin-bottom: 20px !important; line-height: 1; }

/* ========================================================
Tables
======================================================== */
.product-listing {  }
.product-listing tfoot th,
.product-listing tfoot td { border: none; }

/* ========================================================
Catalogue Navigation (Sidebar)
======================================================== */
#catnav { border: 1px solid #CCC; }
	#catnav .title { background: url(../ui/bg-stripe.png) 0 50%; color: #000; padding: 0.5em; margin: 0; font-size: 1em; text-transform: uppercase; }
		#catnav .title a { padding: 0; color: #000; }
	#catnav ul { list-style: none; padding: 0; margin: 0; }
		#catnav li { position: relative; margin: 0; padding: 0; }
			#catnav a { border-top: 1px solid #CCC; font-size: 1em; display: block; min-height: 1%; padding: 0.35em 15px 0.35em 0.5em; text-decoration: none; font-weight: bold; }
			#catnav a:hover,
			#catnav a:focus { text-decoration: none; background: url(../ui/catnav-hover.png) no-repeat 200px 50%; }
			#catnav .active a { color: #000; }
			#catnav .clearance a { color: #888; }
			#catnav .sub { margin: 5px 5px 5px 15px; border: none; }
				#catnav .sub a { padding: 0.25em 10px; background: url(../ui/catnav-sub.png) no-repeat left center; border: none; font-size: 1em; font-weight: normal; color: #888; }
				#catnav .sub a:hover, #catnav .sub a:focus { color: #000; text-decoration: underline; }

/* ========================================================
Refine Search (in #sidebar)
======================================================== */
#refine-search-form { width: 220px; height: 30px; margin: 0 0 20px; overflow: hidden; }
	#refine-search-form form { width: 220px; height: 30px; padding: 0; margin: 0; border: none; position: relative; background: url("../ui/bg-refine-search.png") no-repeat left top }
	#refine-search-form label { display: none; }
	#refine-search-form input { background: none; vertical-align: middle; outline: none; border: none; line-height: 28px; height: 28px; }
	#refine-search-form input#refine-keywords { text-indent: 10px; width: 205px; color: #999; }
		#refine-search-form input#refine-keywords:hover { color: #666; }
		#refine-search-form input#refine-keywords:focus { color: #000; }
	#refine-search-form input#refine-search-submit { background: url(../ui/site-search-submit.png) no-repeat center center; width: 16px; position: absolute; right: 10px; opacity: 0.6; }
	#refine-search-form input#refine-search-submit:hover { opacity: 1; }


#refine-search h4 { font-size: 1em; line-height: 1.8; border-top: 1px solid #CCC; background: #E0E0E0 url(../ui/bg-stripe.png) no-repeat 0 50%; color: #000; padding: .25em .5em; margin: 0; }
#refine-search h4, .accordion h4 { cursor: pointer; }
#refine-search h4 span { display: block; background: transparent url("../ui/expand-and-contract.png") no-repeat right -95px; }
#refine-search h4.active span { background: transparent url("../ui/expand-and-contract.png") no-repeat right 5px; }

#refine-search h2 { margin: 0 0 0.6em }
#refine-search .result { color: #666; }
#refine-search ul { list-style: none; margin: 0; padding: .5em; background: url(../ui/refine-search-panel-shadow.png) repeat-x 0 0; border: 1px solid #CCC; }
	#refine-search ul.sub-refinements { border: 0; background: none; }
#refine-search li { position: relative; }
#refine-search li a, .toggleMore { display: block; width: 100%; text-decoration: none; cursor: pointer; }
.toggleMore { color: #006; }
#refine-search li a:hover, #refine-search li a:focus { text-decoration: underline; }
#refine-search .count { position: absolute; right: 0.5em; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; font-size: 10px; line-height: 16px; padding: 0 0.35em; }
#refine-search a .count { color: #999; }
#refine-search a:hover .count, #refine-search a:focus .count { color: #333; text-decoration: none; }

/* ========================================================
Product Reviews (Internal/External)
======================================================== */
h4#external-reviews,
h4#customer-reviews { margin: 1.5em 0 0; font-size: 1.9em; font-weight: normal; }
h4#external-reviews span, 
h4#customer-reviews span { background: #CCC; color: #000; padding: 0.25em; }
.review { margin-bottom: 0.75em; padding-bottom: 0.75em; padding-top: 0.75em; border-top: 1px solid #AAA; }

.pros { padding-left: 20px; background: transparent url("../ui/icons/thumbs-up.gif") no-repeat left center; }
.cons { padding-left: 20px; background: transparent url("../ui/icons/thumbs-down.gif") no-repeat left center; }

/* ========================================================
Upsells
======================================================== */
.upsell { margin: 1em 0 2em; clear: both; }
.upsell { /*float: left;*/ }
.upsell img { float: left; margin: 0 10px 0 0; }
.upsell h5 { margin: 0; padding: 0 10px 0 0; font-size: 1.15em; font-weight: normal; border: none; color: #999; }
.upsell h5 a { font-weight: bold; text-decoration: none; }
.upsell h5 a:hover { text-decoration: none; }
.upsell h5 a small { color: #999; }
.upsell p { margin-left: 77px /* pic width (67px) + pic margin-left (10px) */; padding: 0 10px 0 0; margin-top: 0; font-size: 0.85em; }
.upsell p strong { white-space: nowrap; }
.upsell p a:hover, .upsell p a:active { color: #000; }
.upsell a.add { display: block; padding: 0; margin: 0; width: 70px; height: 40px; background: transparent url("../ui/buttons/sprite/add.gif") no-repeat left top; }
.upsell a.add:hover { background-position: 0 -40px; }

/* ========================================================
Catalogue Folders Display
======================================================== */
.folders { margin: 0; padding: 0; clear: both; }
	.folders .row { padding: 0; margin: 0 0 20px !important; height: 100%; }
	.folder { float: left; display: inline; width: 220px; padding: 0; margin: 0 10px; }
		.folder .inner { border: 1px solid #CCC; }

	.folder h2 { text-transform: uppercase; font-size: 1em; text-align: center; font-weight: normal; border: none; color: #999; display: block; margin: 0; }
              .folder h2 a, .folder h2 a:visited { font-weight: bold; text-decoration: none; color: #000; }
		.folder h2 a:hover, .folder h2 a:focus { color: #000; text-decoration: underline; }
              .folder h2 span { margin: 0 0 1em; line-height: 1; display: block; padding: 0.5em 0; background: #CCC url(../ui/bg-stripe.png) 0 50% no-repeat;  }
		.folder h2 img { display: block; margin: 0 auto 1em; }

		.folder img { display: block; }
		.folder p { margin: 0 10px 10px; color: #777; }
              .folder .sub { min-height: 9.5em; height: auto !important; height: 9.5em; }
		.folder .sub ul { margin: 0 0 1em 1em; padding: 0; list-style: none; }
		.folder .sub li { margin: 0; padding: 0; color: #666; }
	.folder .sub a { background: url(../ui/bullets.png) no-repeat -200px -398px; padding-left: 18px; text-decoration: none; }
		.folder .sub a:hover, .folder .sub a:focus { text-decoration: underline; }

	.root { padding: 0; }


	.folders.brands {  }
		.folders.brands .folder { margin-bottom: 20px; }
		.folders.brands h3 { margin: 0 0 0.25em; }
		.folders.brands h3 img { float: left; margin: 0 10px 10px 0; }
		.folders.brands p { overflow: hidden; margin: 0; }
		.folders.brands .row { margin: 0 0 20px; }


/* ========================================================
Recommended Items
======================================================== */
#recommended-items { margin: 0 0 2em; }
	#recommended-items .recommend { /*height: 20em;*/ background: url("../ui/bg-featured.png") no-repeat left top; padding: 10px 10px 0; }
	#recommended-items .image { text-align: center; margin: 0 0 0.5em; }
	#recommended-items .image img { border: none; }
	#recommended-items h3 { font-size: 1em; margin: 0 0 1em; line-height: 1.5; /*min-height: 3em; height: auto !important;*/ height: 3em; overflow: hidden; /* normally restricted (abbreviated) to one line but a height is required for a the full (variable) description */ }
		#recommended-items h3 a { text-decoration: none; }
	#recommended-items .price { font-weight: bold; position: relative; }
	#recommended-items .price strong { font-size: 1.4em; }

/*
	#recommended-items a.buyme { position: absolute; top: 0; right: 0; line-height: 2; text-decoration: none; display: block; height: 24px; width: 70px; background: url("../ui/recommended-item-btn-bg.gif") no-repeat left top; color: #FFF; text-align: center; }
		#recommended-items a.buyme:hover,
		#recommended-items a.buyme:focus { text-decoration: underline; color: #FF6; }
*/

	#recommended-items a.buyme { position: absolute; top: 0; right: 0; margin: -0.3em 0 0; display: block; width: 90px; height: 30px; text-indent: -999em; background: transparent url(../ui/buttons/buy-now.png) no-repeat 0 0;  }

	.recommend { position: relative; }
	.recommend .sash { display: block; width: 100px; height: 100px; position: absolute; z-index: 50; top: -5px; right: -5px; background: url(../ui/sash/featured.png) no-repeat left top; }
		.recommend .sash span { position: absolute; top: -999em; left: -999em; }


/* ========================================================
Results Sorting
======================================================== */
.sort-both,
.sort-ascending,
.sort-descending,
.sort-none { background: transparent url(../ui/sort.png) no-repeat -85px -8px; padding-left: 14px; } 
.sort-both { background-position: -85px -4px; }
.sort-ascending { background-position: -60px -29px; }
.sort-descending { background-position: -60px -29px; }
.sort-none { background-position: -10px -80px; }