/* Microwarehouse Styles

Site:
	www.microwarehouse.co.uk

Authors:
	Adam Clark
	Paul Morrison
	Karoline Flis

Created:
	28 October 2008

Document Sections:
	01:	Reset
	02:	Body Setup
	03:	Structure (Basic Layout)
	04:	Float Clearing
	05:	Links
	06:	Typography
	07:	Classes
	08:	Lists and Definitions
	09:	Tables
	10:	Forms
	11:	Misc HTML Tags
	12:	Header
	13:	Navigation
	14:	Breadcrumbs
	15:	Error, Warnings, Success, Noscript
	16:	Folders
	17:	Sidebar
	18:	Footer
	19:	Tabs
	20:	Jump Menu
	21:	Pagination
------------------------------------ */
@charset "utf-8";


/* 01. Reset (Eric Meyers Reset)
-------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button, /*textarea,*/ 
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }


/* 02. Body Setup
-------------------------------------------------- */
body { font: 75%/150% Helvetica, Arial, sans-serif; background: #900 url("/ui/body-bg.gif") fixed repeat-x left top; color: #666; }
body.no-sidebar #body-wrap { background-image: none; } /* Single Column, Sidebar Off (Body) */
body.no-sidebar #container { float: none; margin: 0; } /* Single Column, Sidebar Off (Container) */
body.no-sidebar #content { margin: 0; } /* Single Column, Sidebar Off (Content) */


/* 03. Structure (Basic Layout)
-------------------------------------------------- */
#site { margin: 0; }
#header { margin: 0; background: #FFF url("/ui/stripe-top.gif") repeat-x left top; padding-top: 15px; }
#masthead { margin-bottom: 0.5em; }
#container-wrap { background: #FFF; border-top: 5px solid #CCC; }
#container-wrap,
#container { margin: 20px; }
#content-crowbar { float: right; width: 100%; margin: 0 0 0 -240px; }
#content { margin: 0 0 0 240px; }
#sidebar { float: left; width: 220px; }
#footer { clear: both; }


/* 04. Float Clearing (Without Structural Markup, see http://www.positioniseverything.net)
-------------------------------------------------- */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.clr,
.clear { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }


/* 05. Links
-------------------------------------------------- */
a, a:link { color: #b95e27/*#C63*/; text-decoration: underline; }
a:visited { color: #555/*#C63*/; } 
a:hover, a:focus, a:active { text-decoration: none; }
a:active { outline: none; }

a.skip { position: absolute; top: 0; left: -1000px; z-index: 10; font-size: 1.3em; }
a.skip:focus, a.skip:active { position: absolute; top: 0.7em; left: 1em; text-decoration: underline; padding: 0.6em; border: 1px solid #000; background: #F60; color: #FFF; font-weight: bold; }


/* 06. Typography
-------------------------------------------------- */
/*
h1, h2, h3, h4, h5, h6 { color: #000; padding: 0; margin: 0.7em 0 0; font-weight: normal; line-height: 150%; }
h1 { font-size: 2.3em; line-height: 125%; letter-spacing: 2px; text-transform: uppercase; font-weight: bold; }
h2 { font-size: 1.70em; padding-bottom: 0.25em; margin-bottom: 0.25em; }
h3 { font-size: 1.55em; }
h4 { font-size: 1.25em; font-weight: bold; }
h5 { font-size: 1.05em; font-weight: bold; }
h6 { font-size: 0.95em; font-weight: bold; }
*/
h1, h2, h3, h4, h5, h6 { color: #000; padding: 0; margin: 1.5em 0 0; font-weight: normal; line-height: 150%; }
h1 { font-size: 2em; margin-top: 0.3em; margin-bottom: 0.4em; line-height: 125%; }
h2 { font-size: 1.70em; padding-bottom: 0.25em; margin-bottom: 0.25em; }
h3 { font-size: 1.55em; }
h4 { font-size: 1.25em; font-weight: bold; }
h5 { font-size: 1.05em; font-weight: bold; }
h6 { font-size: 0.95em; font-weight: bold; }
p { margin: 0 0 1.62em; line-height: 1.62; }
p.preamble,
p.postable { font-size: 1.35em; }
strong, b { font-weight: bold; }
dfn { font-weight: bold; font-style: normal; }
em, i { font-style: italic; font-weight: normal; }
big { font-size: 155%; line-height: 125%; }
small { font-size: 90%; font-weight: normal; }
sub, sup { font-size: 10px; font-weight: normal; }
kbd, code, tt { font: bold 100% "Courier New", Courier, monospace; color: #666; }
cite { display: block; margin: 0.7em 0; font-style: italic; font-weight: normal; color: #000; font-size: 12px; }
blockquote { font-size: 1.3em; line-height: 160%; font-style: italic; color: #999; margin: 0.5em 3em; }
blockquote p { margin: 1em 0; }
acronym, abbr { cursor: help; }


/* 07. Classes
-------------------------------------------------- */
.black { color: #000; }
.blue { color: #C90; }
.green { color: #000; }
.red { color: #F00; }
a.red { color: #F00; }
.orange { color: #F60; }
.price { color: #F00; font-weight: bold; }

.highlight { color: #FFF; background-color: #333; }
.subdued { color: #888; }
.disabled { color: #CCC; }

.block { display: block; }
.hide { display: none; }
.no-show, .noshow { position: absolute; left: -999em; top: -999em; }

.left { float: left; }
.right { float: right; }

.text-centre { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }


/* 08. Lists and Definitions
-------------------------------------------------- */
li { /*list-style: inside;*/ padding-left: 0; margin-left: 1.5em; }
li ul, li ol { margin: 0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: square; }
ol { list-style-type: decimal; }


li.social { list-style: none; margin: 0.35em 0; } /* social bookmark submits */
li.social a { padding-left: 22px; }
li.facebook a { background: url("/ui/icons/social/facebook.gif") no-repeat left center; }
li.myspace a { background: url("/ui/icons/social/myspace.gif") no-repeat left center; }
li.reddit a { background: url("/ui/icons/social/reddit.gif") no-repeat left center; }
li.stumbleupon a { background: url("/ui/icons/social/stumbleupon.gif") no-repeat left center; }
li.digg a { background: url("/ui/icons/social/digg.gif") no-repeat left center; }
li.delicious a { background: url("/ui/icons/social/delicious.gif") no-repeat left center; }


dl#left {float: left; margin:0 1.5em 0 0; }


dl { margin: 0 0 1.5em 0;  }
dt { font-weight: bold; color: #000; }
dt, dd { margin: 0; line-height: 1.62; }
dd a { font-wieght: bold; }

dl.features { font-size: 1.2em; }


/* 09. Tables (still need 'cellspacing="0"' in the markup)
-------------------------------------------------- */
table { border-collapse: collapse; border-spacing: 0; margin: 0 0 1.5em; width: 100%; clear: both; text-align: left; color: #555 }
caption { color: #000; font-size: 1.2em; text-transform: capitalize; padding: 0.5em; text-align: right; margin: 1.5em 0 0.5em; font-weight: bold; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; padding: 0 0 5px 0; }
thead, tfoot { color: #000; font-size: 1.2em; }
 
thead tr,
tfoot tr { background: transparent none; }
thead th { border-bottom: 2px solid #CCC; background: transparent none; }
tfoot th { border-top: 2px solid #CCC; }
tbody {  }

tr {  }
tr.section th,
tr.heading th { font-size: 1.35em; border-top: 2px solid #000; background: #EEE url("/ui/th.gif") repeat-x left center; }

th, 
td { padding: 0.5em; border-bottom: 1px solid #DDD; }
tr.odd th,
tr.odd td { background-color: #EDF3FE; }

th, caption { font-weight: bold; text-align: left; }
th { font-weight: bold; color: #000; }
td.centre { text-align: center; }

table.comparison th { background: #EEE; color: #000; }
table.comparison th,
table.comparison td { padding: 0.5em; border: 1px solid #BBB; }
table.comparison td.shared-values { background: #F5F5F5; text-align: center; }

/* Recommended DIV / Table
-------------------------------------------------- */
div#recommended { background: #F0F5EF; border: 1px solid #999; margin-bottom: 3em; }
#recommended h4 { color: #FFF; background: #999 url("/ui/recommended-h4-bg.gif") repeat-x left center; margin: 0; font-size: 1.38em; text-align: center; text-transform: uppercase; padding: 0.5em; font-weight: bold; }
#recommended table { color: #666; margin: 0; }
#recommended table thead th { background: #FFF/*#DCE9DA*/; border-bottom-width: 1px; }
#recommended tr { border: 0; }
#recommended table th,
#recommended table td { border-bottom-color: #999; }
#recommended img.thumbnail { border: 1px solid #999; background: #F4F8F3; padding: 3px; }
#recommended td.desc a.more { background: transparent url("/ui/icons/more-arrow-black.png") no-repeat right center; }
#recommended a { color: #000; }

#recommended a.add { display: block; padding: 0; margin: 0 auto; width: 130px; height: 30px; background: transparent url("/ui/buttons/add-to-basket-sprite.gif") no-repeat left top; }
#recommended a.add:hover { background-position: 0 -30px; }


/* 10. Forms
-------------------------------------------------- */
p.important { margin-bottom: 2em; font-weight: bold; }
p.important em { color: #C00; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

form h6,
form legend { font-size: 1.4em; margin: 0 0 1em; padding: 0.25em; border-bottom: 3px solid #DDD; }
form h6 small { display: block; }
/*legend { display: none; }*/

form p.note { margin-left: 140px/*170px*/; font-size: 90%; color: #333; margin-bottom: 0.25em; }

form fieldset { margin: 1em 0; padding: 1em; border: 1px #BBB solid; border-color: #BBB #666 #666 #BBB; }
form fieldset.no-border { border: none; padding: 0; }
form fieldset.left, form fieldset div.form-left { float: left; width: 45%; }
form fieldset.right  { float: right; width: 45%; }
form fieldset div.form-right { float: left; width: 50%; }
form fieldset.clr { float: none; clear: both;  }
form fieldset.confirm-order,
form fieldset.important { border: 2px solid #6DB457; border: none; padding: 0; margin: 0 0 1em; }
form fieldset.confirm-order h6,
form fieldset.important h6 { color: #6DB457; display: none; }
form fieldset.account-signup { border: 2px solid #6DB457; background: #F9FCF8/*#EFF4FA*/; }
form fieldset.account-signup h6 { border-bottom-color: #CCE3C4; }

form legend,
form fieldset div { padding: 0.5em 0; }
form fieldset.confirm-order div.controlset { padding: 0.3em 0; }
form div input { vertical-align: middle; }
form div { clear: both; }

form label, 
form span.label { margin-right: 10px; padding-right: 10px; width: 120px/*150px*/; display: block; float: left; text-align: right; position: relative; }
form span.label-wide {  }
form label.error, 
form span.error { color: #C00; }
form span.error {display: block; margin: 3px 0 0 0; padding: 2px; width: auto; font-weight: bold; }
form label em, 
form span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }

form input, 
form textarea,
form select { font-size: 1.2em; font-weight: bold; }
form textarea { font-family: Arial, Helvetica, Verdana, sans-serif; }

form input.small, 
form textarea.small,
form select.small { font-size: 1.0em; font-weight: normal; }

form input.error { border-color: #C00; background-color: #FEF; }
form input:focus,
form input.error:focus, 
form textarea:focus { background-color: #FFC; border-color: #FC6; }

form div.controlset { clear: both; margin: 0.5em 0; }
form fieldset.confirm-order div.controlset { margin: 0; }
form div.controlset label, 
form div.controlset input { display: inline; float: none; text-align: left; }
form div.controlset div { margin-left: 140px/*170px*/; clear: none; }
form div.controlset div * { vertical-align: middle; }
form div.buttonrow { margin-left: 140px/*170px*/; }

p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }

form p.caveat { margin: 0 0 1em; }
p.caveat { color: #666; }
p.caveat span { /*border-bottom: 2px solid #CCC; padding-bottom: 2px;*/ }
p.caveat em { font-size: 120%; font-weight: bold; color: #C00; }

span.notes { font-size: 90%;}

form dl.delivery-details { margin-left: 140px/*170px*/; }

#contactForm {width: 95%; border: 0;}



/* 11. Misc HTML Tags
-------------------------------------------------- */
hr { background: #DDD; color: #DDD; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; }


/* 12. Header
-------------------------------------------------- */
#header {  }
#logo,
.my-basket,
.my-account,
#quick-search { float: left; margin: 0 10px; }
.my-basket { padding-bottom:1em;}

#logo { width: 180px; }

.my-account { width: 200px;  }
	.my-account dt { color: #000; }
	.my-account dt a { text-decoration: none; color: #000; padding-left: 16px; background: transparent url("/ui/icons/my-account.gif") no-repeat left center; }
	.my-account dt a:hover,
	.my-account dt a:focus { text-decoration: underline; }
	.my-account dd { margin: 0; }
	.my-account dd a { color: #000; }

.my-basket { width: 200px; }
	.my-basket dt { color: #000; }
	.my-basket dt a { text-decoration: none; color: #000; padding-left: 22px; background: transparent url("/ui/icons/my-basket.gif") no-repeat left center; }
	.my-basket dt a:hover,
	.my-basket dt a:focus { text-decoration: underline; }
	.my-basket dd { margin: 0; }
	.my-basket dd a { color: #000; }

#quick-search { width: 300px; float: right; }
	#quick-search fieldset { margin: 0; padding: 0; border: none; vertical-align: middle; }
	#quick-search label { display: none; }
       #quick-search input { vertical-align: middle; }
	#quick-search input.text {  }
	#quick-search input.button {  }


/* 13. Navigation
-------------------------------------------------- */
#navigation { }

#main-nav, #main-nav ul { float: left; width: 100%; list-style: none; line-height: 1em; background: #CCC url(/ui/main-nav-bg.gif) repeat-x; font-weight: normal; padding: 0; margin: 0; text-transform: uppercase; }
#main-nav li.home { margin: 0 0 0 0.5em; }
#main-nav a { color: #000; text-decoration: none; }
#main-nav a:hover,
#main-nav a:focus { text-decoration: underline; background: #DDD; }
#main-nav li { float: left; padding: 0; margin: 0; font-size: 1.5em; }
#main-nav li a { display: block; line-height: 1.5em; padding-left: 0.5em; padding-right: 0.5em; border-right: 1px solid #DDD;}

#catalogue-nav, #catalogue-nav ul { float: left; width: 100%/*36em*/; list-style: none; line-height: 1; background: #000; font-weight: bold; padding: 0; margin: 0; }
#catalogue-nav a { display: block; color: #FFF; text-decoration: none; padding: 0.75em; margin: 0; }
#catalogue-nav a:hover,
#catalogue-nav a:focus { color: #FFF; }
#catalogue-nav li { float: left; padding: 0; margin: 0; /*width: 10em;*/ }
#catalogue-nav li.Clearance { margin-left: 0.5em; }
#catalogue-nav li.wizard { border-top: 1px solid #999; }
#catalogue-nav li.wizard a { color: #000; }
#catalogue-nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; width: 13.9em; font-weight: normal; margin: 0; padding: 0.5em 0; border: 1px solid #000; /*border-top-width: 3px;*/ background: #FFF; }
#catalogue-nav li li { padding: 0; margin: 0; /*width: 13em;*/ float: none; display: block; }
#catalogue-nav li ul a { padding: 0.25em 0.5em; line-height: 1.15; display: block; color: #444; }
#catalogue-nav li ul a:hover { color: #000; text-decoration: underline; }
#catalogue-nav li ul ul { margin: -1.75em 0 0 14em; }
#catalogue-nav li:hover ul ul, 
#catalogue-nav li:hover ul ul ul, 
#catalogue-nav li.sfhover ul ul, 
#catalogue-nav li.sfhover ul ul ul { left: -999em; }
#catalogue-nav li:hover ul, 
#catalogue-nav li li:hover ul, 
#catalogue-nav li li li:hover ul, 
#catalogue-nav li.sfhover ul, 
#catalogue-nav li li.sfhover ul, 
#catalogue-nav li li li.sfhover ul { left: auto; }
#catalogue-nav li:hover, 
#catalogue-nav li.sfhover { background: #900; }
#catalogue-nav li li:hover, 
#catalogue-nav li li.sfhover { background: transparent none; }


/* 14. Breadcrumbs
-------------------------------------------------- */
p.breadcrumbs { margin: 0.5em 0 1em; color: #777; background: #F3F3F3; /*display: block;*/ border: 1px solid #DDD; padding: 0.5em; }
p.breadcrumbs a { color: #000; text-decoration: none; padding-right: 3px; padding-left: 3px; /*background: url("/ui/icons/breadcrumb.gif") no-repeat right center;*/ }
p.breadcrumbs a.home { padding-left: 0; /* reset breadcrumb link padding */ }
p.breadcrumbs a:hover { text-decoration: underline; }
p.breadcrumbs strong { padding-left: 3px; }


/* 15. Errors/Success/Noscript
-------------------------------------------------- */
.message { border: 1px solid #4FB9C1; background: #99D6DB; padding: 10px; margin: 0 0 1.5em; }
.message.good { border-color: #229322; background: #86D958; }
.message.bad { border-color: #D29C34; background: #F5DC63; }
.message div.inner { padding: 1em 1.5em; font-size: 12px; color: #000; text-align: left; min-height: 30px; background: #FFF; }
.message div.inner h3 { font-size: 1.45em; font-weight: bold; margin: 0.5em 0; display: block; border: none; color: #1D4B50; }
.message.good div.inner h3 { padding: 0 0 0 25px; background: transparent url("/ui/icons/tick.png") no-repeat left center; color: #229322; }
.message.bad div.inner h3 { padding: 0 0 0 25px; background: transparent url("/ui/icons/error.png") no-repeat left center; color: #000; }
.message div.inner p { margin: 0 2em 1.5em 0; }
.message div.inner ul { margin-left: 20px; }
.message div.inner ul li {  }
.message div.inner a.large { line-height: 40px; font-size: 18px; font-weight: bold; }
.message div.inner a { font-weight: bold; }

.noscript { background-color: #FFC; padding: 1em; border: 1px solid #9D9B57; margin: 0 0 1em; }
.noscript h4 { margin: 0 0 0.25em; color: #C03; }
.noscript p { margin: 0; }


/* 16. Folders (Catalogue and Showcase)
-------------------------------------------------- */
.folders { margin: 1em 0 2em; clear: both; }
.folders .folder.catalogue { float: left; width: 24.5em; height: 10.5em; border: 1px solid #DDD; border-color: #DDD #AAA #AAA #DDD; margin: 1em 1em 0 0; /*background: url("/ui/stripe-top-monochrome.gif") repeat-x left top;*/ } /* main folder catalogue menu */
.folders .folder.catalogue.type-b { height: 14.7em; } /* new height for folder: type-b */
.folder.catalogue img { float: left; margin-left: 10px; margin-right: 10px; }
.folder.catalogue h2 { margin: 1em 0 0; padding: 0 10px 0 0; font-size: 1.15em; font-weight: normal; border: none; color: #999; }
.folder.catalogue h2 a { font-weight: bold; color: #000; text-decoration: none; }
.folder.catalogue h2 a:hover,
.folder.catalogue h2 a:focus { color: #000; text-decoration: underline; }
.folder.catalogue h3 { margin: 0 0 0.5em; padding: 0.3em; font-size: 1.25em; font-weight: normal; border: none; background: #333 url("/ui/catalogue-folder-bg.gif") repeat-x left center; color: #FFF;  }
.folder.catalogue h3 a { font-weight: bold; color: #FFF; text-decoration: none; }
.folder.catalogue h3 a:hover,
.folder.catalogue h3 a:focus { color: #FFF; text-decoration: underline; }
.folder.catalogue p { margin-left: 120px; padding: 0 10px 0 0; }
.folder.catalogue p a:hover,
.folder.catalogue p a:active { color: #000; }

/* Special form label resets for item page
-------------------------------------------------- */
form #model label,
form #accessory label,
form .acc label { margin-right: 0; padding-left: 5px; width: auto; display: inline; float: none; text-align: left; position: relative; }

.showcase-folders { margin: 1em 0 2em; clear: both; }

.catalogue-folder,
.showcase-folder { width: 280px; height: 11em; border: 1px solid #DDD; border-color: #DDD #999 #999 #DDD; margin: 0.5em 1em 0.5em 0; float: left; }
.catalogue-folder h2,
.showcase-folder h2 { margin: 0 0 0.5em; padding: 0; font-size: 1.2em; font-weight: bold; border: none; }
.catalogue-folder h2 a,
.showcase-folder h2 a { display: block; padding: 0.25em; background-color: #EEE; color: #000; }
.catalogue-folder h2 a:hover,
.showcase-folder h2 a:hover { color: #FFF; background: #900; }
.catalogue-folder a.image,
.showcase-folder a.image { margin: 0; width: 110px; /*height: 100%;*/ float: left; text-align: center; }
.folder-details { width: 150px; height: 100%; float: right; margin-right: 15px; }
.folder-details p { margin: 0 0 0.75em; /*font-size: 1.12em;*/ }


	/* "Back to..." folder in sidebar */
	.folders .folder.back { width: 220px; margin: 0.5em 0; } /* folder in sidebar, "back to" catalogue menu */
	.folder.back img { float: left; margin-left: 0/*10px*/; margin-right: 10px; }
	.folder.back h3 { margin: 0; padding: 0; font-size: 1.05em; font-weight: normal; border: none; color: #999; }
	.folder.back h3 a { font-weight: bold; color: #444; }
	.folder.back h3 a:hover,
	.folder.back h3 a:focus { color: #666; }
	.folder.back p { margin: 0 0 0.8em 60px/*75px*/; padding: 0 10px 0 0; font-size: 0.97em; color: #888; }
	.folder.back p a { color: #777; }

/* 16 b. Folders (Popular Cats)
-----------------------------------------------------*/
#popular-categories {  }
.popular-category { border: 1px solid #DDD; border-color: #CCC #999 #999 #CCC; margin: 0 1em 1em 0; float: left; width: 15em; height: 30em; }
.popular-category h2 { font: 1.35em/1.8em arial; margin: 0.2em; padding: 0; text-align: center; background: transparent url("/ui/caption.gif") no-repeat 0 0; }
.popular-category h2 span { display: block; background: transparent url("/ui/caption.gif") no-repeat -1826px -29px;}
.popular-category h2 a span { color: #FFF; text-decoration: none; display: block; }
.popular-category h2 a:hover span { color: #C63;}
.popular-category img { display: block; float: none; width: 100px; height: 75px; margin: 0.3em auto; padding-bottom: 0.5em; border-bottom: 1px solid #DDD; }
.popular-category ul { margin: 0.5em 0; list-style: none; }


/* 17. Sidebar
-------------------------------------------------- */
#sidebar dt { margin: 0.75em 0 0.1em; line-height: 130%; }
#sidebar dt a { color: #000; text-decoration: none; }
#sidebar dt a:hover { text-decoration: underline; }
#sidebar dd { margin: 0; font-size: 0.92em; line-height: 136%; }
#sidebar dd,
#sidebar dd a { color: #666; text-decoration: none; }
#sidebar dd a:hover { color: #000; text-decoration: underline; }

#sidebar h2 { font: 1.35em/1.8em arial; font-weight: bold; color:#FFF; padding: 0 0 0 1.35em; background: transparent url(/ui/caption-sidebar.gif) no-repeat;}


/* 18. Footer
-------------------------------------------------- */
#footer { clear: both; /*border-top: 3px solid #DDD;*/ margin: 0 1em; padding: 0.5em 0; /*border-bottom: 10px solid #F60;*/ }
#footer ul { width: 100%/*800px*/; margin: 0 auto; padding: 0; }
#footer li { float: left; text-align: left; display: block; width: 23.5%/*200px*/; margin: 0.2em 0; padding: 0; }
#footer dl { width: 22%/*220px*/; margin: 0 1%/*10px*/ 0.5em; /* based on 3 columns */ float: left; }
#footer dt { color: #FFF; font-size: 1.2em; margin: 0.5em 0 0.3em; }
#footer dd { margin: 0.2em 0; color: #FFF; }
#footer a { margin: 0; color: #FFF/*#666*/; text-decoration: none; }
#footer a:hover { text-decoration: underline; color: #FFF; }
#footer p { clear: both; /*width: 800px;*/ margin: 0.3em auto 1em; color: #FFF; }
#footer p a { color: #FFF; font-weight: bold; }


/* 19. Tabs (jQuery)
-------------------------------------------------- */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { 
/* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide { display: none; }
}

/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav { display: none; }
}

/* Skin */
ul.tabs li { background-image: none; padding: 0; }
.ui-tabs-nav { font-size: 1.1em; }
.ui-tabs-panel { /*font-size: 1.1em;*/ }
.ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 4px; }
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; }
.ui-tabs-nav li { float: left; margin: 0 0 0 0.3em/*1px*/; min-width: 7em/*84px*/; /* be nice to Opera */ }
.ui-tabs-nav a, .ui-tabs-nav a span { display: block; padding: 0 1em/*10px*/; background: url("/ui/tab.gif") no-repeat; }
.ui-tabs-nav a { margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; color: #888/*#27537a*/; font-weight: bold; line-height: /*1.2em*/1.8em; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */ outline: 0; /* prevent dotted border in Firefox */ }
.ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; color: #000; }
.ui-tabs-nav a span { width: 5.5em/*64px*/; /* IE 6 treats width as min-width */ min-width: 5.5em/*64px*/; height: 1.5em/*18px*/; /* IE 6 treats height as min-height */ min-height: 1.5em/*18px*/; padding-top: 6px; padding-right: 0; }
*>.ui-tabs-nav a span { /* hide from IE 6 */ width: auto; height: auto; }
.ui-tabs-nav .ui-tabs-selected a span { padding-bottom: 1px; }
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { background-position: 100% -150px; }
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { background-position: 100% -100px; }
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {  background-position: 0 -50px; }
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { background-position: 0 0; }
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; }
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; text-decoration: underline; }
.ui-tabs-panel { border-top: 1px solid #333/*#999 #97a5b0*/; padding: 1em 0; background: #FFF; /* declare background color for container to avoid distorted fonts in IE while fading */ }
.ui-tabs-loading em { padding: 0 0 0 20px; background: url("/ui/loading.gif") no-repeat 0 50%; }

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ display: inline-block; }
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ display: inline-block; }


/* 20. Jump Menu (Document Summary and Skip Menu)
-------------------------------------------------- */
.document-summary { border: 1px solid #CCC; border-top-width: 3px; overflow: hidden; clear: both; width: 660px; margin: 0.7em auto 1.5em; padding-bottom: 5px; }
.document-summary h6 { text-transform: uppercase; padding: 0.5em 0 0.5em 1em; margin: 0; background-color: transparent; font-weight: bold; color: #454545; font-size: 85%; }
.document-summary ul { padding: 0; margin: 0 0 0 1em; clear: both; }
.document-summary ul li { margin: 0; width: 50%; float: left; display: inline; }
.document-summary ul li a { font-size: 90%; }


/* 21. Pagination
--------------------------------------------------*/
.pagination { color: #666; margin: 1.5em 0; text-align: center; font-size: 1.3em; line-height: 2em; }
.pagination a { font-weight: bold; }
.pagination .pagelinks a { padding: 0.3em 0.5em 0.3em 0.3em; border: 1px solid #CCC; border-width: 0 1px 0 0; }
.pagination .pagelinks a.current { font-weight: normal; text-decoration: none; cursor: default; }
.pagination .pagelinks a.last { border: none; }
.pagination .previous-page, .pagination .next-page { /*border: 1px solid #CCC;*/ }
.pagination .previous-page { padding: 0.3em 0.5em 0.3em 1.4em; margin: 0 0 0; background: transparent url("/ui/icons/pagination-previous.gif") no-repeat 5% 50%; }
.pagination .next-page { padding: 0.3em 1.4em 0.3em 0.5em; margin: 0; background: transparent url("/ui/icons/pagination-next.gif") no-repeat 95% 50%; }


/* Compare Table
-------------------------------------------------- */
#compare { background: transparent; color: #555; }
#compare thead th { background: #FFF /*url("/ui/th.gif") repeat-x left center*/; border-bottom: 2px solid #CCC; }
#compare th { color: #000; }
#compare tr { background: transparent; }
#compare tr.no-background { background-image: none; }
#compare tr.special { background: #FFF url("/ui/th.gif") repeat-x left center; /*background-color: #D8EEF3;*/ }
#compare a.add { display: block; padding: 0; margin: 0 auto; width: 125px; height: 30px; background: transparent url("/ui/buttons/add-to-basket-sprite.gif") no-repeat left top; }
#compare a.add:hover { background-position: 0 -30px; }
#content #compare label { display: inline; padding-left: 0; margin-left: 0; white-space: nowrap; }

#compare th a.sort { padding-right: 12px; /*color: #666;*/ color:#b95e27; }
a.sort-ascending { background: transparent url("/ui/icons/sort-arrow-up.gif") no-repeat right center; }
a.sort-ascending:hover { background-image: url("/ui/icons/sort-arrow-down-black.gif"); }
a.sort-descending { background: transparent url("/ui/icons/sort-arrow-down.gif") no-repeat right center; }
a.sort-descending:hover { background-image: url("/ui/icons/sort-arrow-up-black.gif"); }
a.sort-none { background: transparent url("/ui/icons/sort-arrow-up.gif") no-repeat right center; }
a.sort-none:hover { background-image: url("/ui/icons/sort-arrow-down-black.gif"); }

table .desc h3 { margin: 0 0 0.2em; font-size: 1.25em; }
table .desc h3 a { font-weight: bold; color: #000; text-decoration: none; }
table .desc h3 a:hover,
table .desc h3 a:focus { text-decoration: underline; }


/* Refine Search
-------------------------------------------------- */
#refine-search {  }
/*#refine-search h3 { font-size: 1.4em; margin: 0 0 0.5em; font-weight: bold; }*/

#refine-search h3 { font-size: 1.2em; color: #000; border: none; font-weight: bold; background: transparent url("/ui/expand.gif") no-repeat left center; padding: 7px 7px 7px 20px; margin: 0; cursor: pointer; }
#refine-search h3:hover { text-decoration: underline; }
#refine-search h3.active { background: transparent url("/ui/collapse.gif") no-repeat left center; text-decoration: underline; }
#refine-search ul { margin: 0.5em 0; list-style: none;  }
#refine-search li { color: #888; list-style: none; }
#refine-search li strong { color: #000; font-size: 1.15em; }
#refine-keywords { width: 100% }


/* Basket Table
-----------------------------------*/
table#basket {  }
table#basket th { color: #000; }
table#basket th a { color: #000; }
table#basket input { vertical-align: middle; margin-right: 2px; height: 30px; padding: 0; line-height: 30px; float: none; display: inline; }
table#basket input.update-quantity { text-align: center; border: 1px solid #CCC; width: 2.5em; }
table#basket .add { white-space: nowrap; font-weight: bold; }
table#basket tfoot tr td { border: 0; }
table#basket tfoot tr.bg-light-gray { background: #DDD; }
table#basket tfoot .bg-light-yellow { background: #FF9; }
table#basket tfoot tr td.border-left { border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; font-weight: bold; color: #000; }
table#basket tfoot tr td.border-right { border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; }

a.delete-basket-item { display: block; width: 30px; height: 30px; background: transparent url("/ui/buttons/delete.gif") no-repeat left top; text-indent: -9999px; }
a.delete-basket-item:hover { background: transparent url("/ui/buttons/delete-small.gif") no-repeat left top; }


/* Payment Options (Basket Page)
-----------------------------------------------------*/
#payment-options { margin: 0.5em 0 1em 0; float:right; clear: both;}
#payment-options .pay { float: left; margin: 0.5em; }
.pay input { height: 30px; display: block; }
.pay.pay-by-card form,
.pay.pay-by-card input { width: 120px; }
.pay.pay-on-account form,
.pay.pay-on-account input { width: 140px; }
.pay.edit-quote form,
.pay.edit-quote input { width: 105px; }
.pay.create-quote form,
.pay.create-quote input { width: 110px; }
.pay.requisition-account form, 
.pay.requisition-account input { /*width: 170px;*/ }
.pay.requisition-card form,
.pay.requisition-card input { width: 150px; }


/* Item Product ( Original Ragamuffin' )
-------------------------------------------------- */
#item-form { width: 100%; margin: 1em 0;  }
#item-details { float: right; width: 100%; margin: 0 0 0 -240px; }
#item-details  li { list-style: none; }

#item-pricing { margin: 0 -240px 0 0; float: left; width: 100%; }
#item-pricing li { margin: 0.4em 240px; padding: 0; }
#item-pricing li label { margin: 0.4em 0 0; text-align: left; display: inline; float: none; position: static; }
#item-pricing li label#item-quantity { /*reset standard forms*/ width: auto; margin-right: 0; text-align: left; float: none; display: inline; }
#item-pricing li input#quantity-top { width: auto; }
#item-pricing li input#add-item-to-basket {  }

#item-pricing .VAT { display: block; }
#item-pricing .big { font-size: 1.7em; font-weight: bold; }
#item-pricing #yourprice .big { font-size: 1.2em; }
#item-pricing #yourprice .block { display: block; margin: 0.3em 0; }
#item-pricing #yourprice .notsobig { font-size: 1.2em; font-weight: bold; }
#item-pricing dt { font-weight: bold; }
#item-pricing dd { margin: 0.5em 0; }

.excVAT {font-size: 0.7em; line-height: 0em; }

#item-information { width: 200px; float: right; text-align: right; margin: 0; }
#item-information li { padding: 0; }

form#item-form div#item-image { clear: none; }
#item-image { /*display: block;*/ float: left; width: 200px; margin-bottom: 2em; }
#item-image img { width: 200px; height: 150px; }


/* Item Product (New Bits)
-------------------------------------------------- */
#item-form { width: 100%; }
.item { padding: 0 0 1.5em; }
.item div { clear: none; }

.item-information { width: 100%; float: right; margin: 0 0 0 -440px; /* fluid container for ".item-features" */ }
.item-features { margin: 0 0 0 440px; }
.item-features h2 { margin-top: 0; }
.item-features p { font-size: 1.05em; }
.item-features p strong { color: #000; }

.item-pricing { float: left; width: 420px; /* container for ".item-purchase" and "item-media" */ }
.item-purchase { float: right; width: 180px; /* contains pricing info, quantity field and add-to-basket button*/ }
.item-purchase ul { margin: 0; padding: 0; list-style: none; }
.item-purchase li { margin: 0; padding: 0.25em 0; }
.item-purchase li label { margin: 0.4em 0 0; text-align: left; display: inline; float: none; position: static; }
.item-purchase li label#item-quantity { /*reset standard forms*/ width: auto; margin-right: 0; text-align: left; float: none; display: inline; }
.item-purchase li input#quantity-top { width: auto; }

.item-media { float: left; width: 220px; margin: 0; text-align: center; /* should contain image, jCarousel gallery and videos */ }



/* Kits Table (Item Page)
---------------------------------- */
table#kits { margin: 0.25em 0 3em; background: transparent none; }
table#kits tr { background: transparent none; }
table#kits .kit-save { display: block; }
table#kits img { margin: 0.25em 0; }
table#kits td * { vertical-align: middle; }
table#kits a { text-decoration: none; }


/* Multiple Kits List
--------------------------------*/
div.kit-list { clear: both; }
div.kit-list table caption { font-weight: bold; text-align: left; padding: 5px 8px; }
div.kit-list table tbody { border-bottom: 1px solid #CCC; }
div.kit-list th { text-align: left; white-space: normal; }
div.kit-list td { text-align: left; }
div.kit-list tr.kit-group { cursor: pointer; }
div.kit-list table tr.kit-group th,
div.kit-list table tr.kit-group-first th { background: #EEE url("/ui/multiple-kit-bg.gif") repeat-x left center; border-top: 1px solid #333; }
div.kit-list table tr.kit-group th strong { display: block; padding-left: 22px; background: transparent url("/ui/icons/expand.gif") no-repeat left center; color: #666; }
div.kit-list table tr.kit-group th.collapse strong { background: transparent url("/ui/icons/collapse.gif") no-repeat left 50%; color: #000; }




/* Save Message
-------------------------------------------------- */
.save-message { margin: 0 0 1.5em; padding: 1em; border: 2px solid #E60; background: #FFC; }
.save-message h3 { margin: 0; font-size: 1.1em; color: #900; font-weight: bold; }
.save-message h3 a { font-weight: bold; line-height: 150%; display: block; }
.save-message p { margin: 0.5em; }


/* Accessory Table form Resets
-------------------------------------------------- */
form #accessory label, form #model label,
form .acc label { margin-right: 0; padding-left: 5px; width: auto; display: inline; float: none; text-align: left; position: relative; }


/* Sidebar Quick View
-------------------------------------------------- */
.quick-details ul { list-style: none; margin: 0.5em 0; }
	.quick-details li { margin: 0.25em 0; }
	.quick-details li img { margin: 0.75em 0; }


/* Basket Options (Basket Page)
-------------------------------------------------- */
.basket-option { margin: 0.5em 0; border-bottom: 1px solid #DDD; padding-bottom: 1em; }
	.basket-option img { float: left; margin-left: 0; margin-right: 10px; width: 67px; height: 50px; }
	.basket-option h3 { margin: 0; padding: 0; font-weight: bold; border: none; color: #999; font-size: 1.1em; }
	.basket-option h3 a { font-weight: bold; color: #444; text-decoration: none; }
	.basket-option h3 a:hover,
	.basket-option h3 a:focus { color: #666; }
	.basket-option p { margin: 0 0 0.8em 77px; padding: 0 10px 0 0; color: #888; }
	.basket-option p a { color: #000; }



/* Order Status - Capitalized because of :translations, do NOT alter case
---------------------------------------------------*/
.order { margin: 0 0 4em; }
.order h2 { padding: 0.3em; }
.order h2 em { font-style: normal; background: #000; color: #FFF; padding: 0.2em; text-transform: uppercase; }
.order table { width: 100%; }
.order table th,
.order table td strong { color: #000; font-size: 1.12em; }
.order table thead td { border: 1px solid #CCC; }

.order a.Cancelled, 
.order a.Processing, 
.order a.Dispatched, 
.order a.Received { padding-left: 20px; background-color: transparent; background-repeat: no-repeat; background-position: left center; }
.order a.Cancelled { color: #F02; background-image: url("/ui/icons/order-cancelled.gif") }
.order a.Processing { background-image: url("/ui/icons/order-processing.gif") }
.order a.Dispatched { color: #093; background-image: url("/ui/icons/order-dispatched.gif") }
.order a.Received { color: #666; background-image: url("/ui/icons/order-received.gif") }

table.order { margin: 2em 0; }
table.order th { vertical-align: middle; padding: 0.5em; color: #333; }
table.order td { padding: 0.5em; }
table.order td.desc { width: 50%; }
table.order .prod_name { width: 25%; }


/* Miscellaneous 
-----------------------------------------------------*/
#help .article { margin: 0 0 1em; padding: 0.5em; border: 1px solid #DDD; border-color: #DDD #AAA #AAA #DDD; }
#help .article h2 { padding: 0.75em; margin: 0; font-size: 1.8em; color: #900; display: block; }
#help .article { margin: 0 0 1em; /*background: #FFF url("/ui/articlebox_bg.gif") bottom right no-repeat;*/ padding: 0; width: 100%; }

ul#search-categories { float: left; border: 1px dotted #ccc; padding: 0.5em; }
ul#search-categories li { display: inline; }

.addinfo-address { float: left; width: 48%; margin: 1em 0;}
fieldset#addinfo-address { margin:1em 0; }
#address-results { float: left; width: 48%; }


div#ajaxNode { position: absolute; width: 200px; padding-bottom: 10px; background: transparent url("/ui/jargon-tail.gif") no-repeat bottom left; z-index: 1000000; /*filter: alpha(opacity:90); KHTMLOpacity: 0.9; MozOpacity: 0.9; opacity: 0.9;*/ }
div#ajaxNode div { padding: 3px 5px; }
div#ajaxNodeTitle { background: #990000; margin: 0px; }
div#ajaxNodeText { background: #FFF; border: 2px solid #990000; }
div#ajaxNodeTitle h3 { margin: 0px 0px 1px 0px; color: #FFF; }

/* Table Accessories/Compatibles
------------------------------------------------------------*/

table#accessory, table#model { width: 100%; border-collapse: collapse;  margin: 1.2em 0;}
table#accessory td, table#model td  { padding: 8px 5px; }
table#accessory td.desc h2, table#model td.desc h2 { font-size: 1.1em; margin-bottom: 2px; }
table#accessory td.desc, table#model td.desc { width: 50%; }
table#accessory tr, table#model tr { border-bottom: 1px solid #cfcfcf; }

/* Hotlamp iFrame
------------------------------------------------------------*/
#frmConfigurator { margin: 0 0 2em 0; }