/* --------------------------------------------------------------

	base.css

	Author: Paul Woods
	Date: Aug 08

	Refactored by Greg Dalrymple
	Date: 20/08/2008

	This is the main stylesheet for the Parfix website.

-------------------------------------------------------------- */

/* --------------------------------------------------------------

    +Reset

-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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,
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;
	vertical-align: baseline;
}

/* --------------------------------------------------------------

    +Default Styles

-------------------------------------------------------------- */

body {
	background: url(/structure/shell-bkgd.gif) repeat-y top center #d1d0d0;
	text-align:center;
	font-size: 62.5%;
	font-family: Verdana, Arial, sans-serif;
	color:#363636;
}

.floatright { float:right; }
.floatleft { float:left; }

/* Links */

a:link { color: #2d41a0; }
a:hover { color: #dd7800; }
a:visited { color: #2d41a0; }
a:visited:hover { color: #dd7800; }

.clear-floats { clear: both; font-size: 1px; height: 0; line-height: 0px; }
.clear-right { clear: right; font-size: 1px; height: 0; line-height: 0px; }

blockquote { background: url(/images/sitefiles/quote.gif) no-repeat; padding: 14px 0 0 14px; }

ul.inline-list { margin: 0; padding: 0; }
ul.inline-list li { float: left; display: inline; }

ul.clean-list { list-style: none; margin: 0 0 1.5em 0; padding: 0; }
ul.clean-list li { list-style: none; }

.orange-box { border:1px solid #c37d1f; background:#fbf4eb; padding:5px; margin: 10px 0 10px 0; padding: 10px;}

.box { border:1px solid #cfcece; background:#f7f7f7; margin-bottom: 12px; padding: 10px; }

.red { color: #CF0C1D; }

.strong, strong { font-weight: bold; }

.center { text-align: center; margin: 0 auto; }

.right { text-align: right; margin: 0 auto; }

/* --------------------------------------------------------------

    +Images

-------------------------------------------------------------- */

img { border: none; }

/* --------------------------------------------------------------

    +Typography

-------------------------------------------------------------- */

p { margin-bottom: 1.5em; }
p, ul, blockquote, dd, dt, table { font-size: 1.1em; line-height: 1.6em; }

dt { margin-bottom: 0.35em; }
dd { margin-bottom: 1.3em; }

ul { margin: 0 0 1.5em 0; padding: 0 0 0 1.5em; }

h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	color: #333;
	font-weight: bold;
	clear: none;
	line-height: 1.6em;
	}

h1 { font-size: 2.3em; margin-bottom: 0.667em; }
h2 { font-size: 1.9em; margin-bottom: 0.8em; color: #2d41a0; }
h3 { font-size: 1.7em; margin-bottom: 0.889em; }
h4 { font-size: 1.5em; margin-bottom: 1.066em;   color: #444; }
h5 { font-size: 1.3em; margin-bottom: 1.2307em; }
h6 { font-size: 1.1em; margin-bottom: 1.5em; }

h1 span, h2 span, h3 span { display: none; }

h2 span.red, h3 span.red { display: inline; }

/* --------------------------------------------------------------

    +Layout

-------------------------------------------------------------- */

#top { width: 989px; margin:0 auto; position:relative; }

#shell { float: left; text-align: left; padding: 10px 10px 0 10px; background: url(/structure/shell-top-bkgd.gif) no-repeat center -10px; margin: 0 0 0 0; position: relative;}
#shell-bottom { background: url(/structure/shell-btm-bkgd.gif) no-repeat top center; height: 45px; }

#page { padding: 12px 12px 0 12px; margin-top: 7px; float: left; }

.col { float: left; margin-right: 12px; padding: 0; }

.last { margin-right: 0; }
.first { margin-left: 0; }

.span-1 { width: 85px; }
.span-2 { width: 182px; }
.span-3 { width: 279px; }
.span-4 { width: 376px; }
.span-5 { width: 473px; }
.span-6 { width: 557px; }
.span-7 { width: 667px; }
.span-8 { width: 764px; }
.span-9 { width: 861px; }
.span-10 { width: 958px; }

/* --------------------------------------------------------------

    +Header

-------------------------------------------------------------- */

#header h2 { margin: 0; }

#topLinks { float: right; }
#topLinks li {
	background-image: url(/graphics/icons/icon-sprite.gif);
	background-repeat: no-repeat;
	padding-left: 28px;
	margin-left: 10px;
	}

#topLinks .delivery { background-position: -2px -2px; }
#topLinks .service { background-position: 0 -65px; }
#topLinks .help { background-position: 0 -34px; }
#topLinks .contact { background-position: 0 -150px; }
#topLinks .about { background-position: 0 -125px; }
#topLinks .basket { background-position: 0 -92px; }
#topLinks .register { background-image: none; }


#logo, #subBanner, #phoneNumbers { float: left; }

#logo { width: 237px; margin-left: 1px; height: 137px;}
#subBanner { width: 396px; padding: 42px 0 0 12px; }
#phoneNumbers { width: 299px; text-align: right; padding: 42px 0 0 0;}

#bannerMessage { font-weight: bold; font-size: 1.4em;}

/* --------------------------------------------------------------

    +Forms

-------------------------------------------------------------- */

.standardForm { border-top: 1px solid #ccc; width: 100%; margin-bottom: 12px; background-color: #e7e7e7; }
.standardFormInner { padding-top: 12px; border-top: 1px solid #ccc; background-color: #fff; }
.standardForm form { width: 100%; }


.standardForm dl { width: 100%; padding: 8px;}
.standardForm dt { float: left; width: 25%; }
.standardForm dd { float: left; width: 75%; }

.standardForm legend {
	font-size: 1.1em;
	padding: 12px 8px;
	font-weight: bold;
	}

.standardForm .largeInput input { width: 300px; padding: 3px; }
.standardForm .mediumInput input { width: 200px; padding: 3px; }

.standardForm .checkbox { width: 25px; }
.standardForm .checkbox-desc { width: 300px; font-size: 1em; }

.standardFormInner table { border-spacing: 0px; width: 100%; }
.standardFormInner table tr.total td { border-top: 1px solid #E7E7E7; }
.standardFormInner table .right { text-align: right; }
.standardFormInner table .bold { font-weight: bold; }


/* --------------------------------------------------------------

    +Settings Bar

-------------------------------------------------------------- */

#settings { background: url(/graphics/parfix-logo-btm.gif) no-repeat top left; background-color:#eae9e9; margin-bottom: 2px; }

p#currenciesLegend { float: left; padding: 7px 0 0 0; margin: 0 10px 0 170px; }

ul#currenciesSelect { float: left; padding: 5px 0 0 0; margin: 0; }
ul#currenciesSelect li { float: left; width: 30px; height: 34px; margin-right: 5px; }
ul#currenciesSelect li a { display: block; width: 30px; height: 34px; background-repeat: no-repeat; background-position: right; }
ul#currenciesSelect li:hover { background-position:left;	}
ul#currenciesSelect li span { display:none; }

ul#vatSelect { float:left; margin:5px 25px 5px 25px; padding:0; }
ul#vatSelect li { text-align:right; margin-bottom:-2px; }

#main-search { float: right; margin-top: 9px; }
#searchBox { width:290px; position: relative;  padding: 5px; font-size: 1.4em; float: left; }
#searchButton { position:relative;  left:-25px; float: left; }

/* --------------------------------------------------------------

    +Main Navigation

-------------------------------------------------------------- */

#nav { margin-bottom: 12px; }

#main-menu ul {
	margin: 0;
	padding:0;
	list-style:none;
	background: url(/structure/main-menu/bkgd-off.gif) repeat-x top #162374;
	height: 34px;
	font-size: 1.1em;
	float: left;
	}

#main-menu ul li { border-width: 0 1px 1px 0; border-color:#fff; border-style:solid; float:left; height:33px; }
#main-menu ul li.last { border-width:0 0 1px 0; }
#main-menu ul li.last a { padding: 6px 21px 6px 21px; }

#main-menu ul li a { font-weight:bold; padding:6px 18px; display:block; color:#fff; text-decoration:none;  }

#main-menu ul li.home a { background: url(/graphics/icons/home.gif) no-repeat 12px 9px; padding: 6px 18px 8px 33px;}
#main-menu ul li.home a:hover,

#main-menu ul li.homeSel a:hover { background: url(/graphics/icons/home-hover.gif) no-repeat 12px 9px; }
#main-menu ul li.homeSel a { background: url(/graphics/icons/home-sel.gif) no-repeat 12px 9px; padding: 6px 18px 8px 33px;}

#main-menu ul li:hover,
#main-menu ul li.sel:hover,
#main-menu ul li.homeSel:hover { background-color:#ffd300; background-image:url(/structure/main-menu/bkgd-on.gif); }

#main-menu ul li:active, #main-menu ul li.sel, #main-menu ul li.homeSel { background-color:#c42121; background-image:url(/structure/main-menu/bkgd-sel.gif); }

#main-menu ul li.sel, #main-menu ul li.homeSel  { border-color:#fff #fff #c42121 #fff; background-image:url(/structure/main-menu/bkgd-sel.gif); }
#main-menu ul li.sel:hover, #main-menu ul li.homeSel:hover { border-color:#fff #fff #ffd300 #fff; }
#main-menu ul li.homeSel { border-color:#fff #fff #fff #fff; }

/* Colours -------------------------------- /
/ green - #26a85c
/ orange - #f0b246
/ blue - #1fa0d7
/ turquiose - #0da8a1
/ purple - #a858b5
/ grey - #737374
/ alt green - #72a311
/ ---------------------------------------- */

#main-menu ul li.sel#Powertools { background-image:url(/structure/main-menu/bkgd-sel.gif); border-bottom-color: #c42121; }
#main-menu ul li.sel#SpecialOffers { background-image:url(/structure/main-menu/bkgd-on.gif); border-bottom-color: #ffd300; }
	#main-menu ul li.sel#SpecialOffers a { color: #000;  }
#main-menu ul li.sel#Handtools { background-image:url(/structure/main-menu/bkgd-sel-blue.gif); border-bottom-color: #1fa0d7; }
#main-menu ul li.sel#Accessories { background-image:url(/structure/main-menu/bkgd-sel-turq.gif); border-bottom-color: #0da8a1; }
#main-menu ul li.sel#Workwear { background-image:url(/structure/main-menu/bkgd-sel-purple.gif); border-bottom-color: #a858b5; }
#main-menu ul li.sel#Fixings { background-image:url(/structure/main-menu/bkgd-sel-orange.gif); border-bottom-color: #d7821f; }
#main-menu ul li.sel#LawnGarden { background-image:url(/structure/main-menu/bkgd-sel-green.gif); border-bottom-color: #26a85c; }

#sub-menu.Powertools { background-color: #c42121; }
#sub-menu.SpecialOffers { background-color: #ffd300; }
#sub-menu.SpecialOffers a { color: #000; }
#sub-menu.Handtools { background-color: #1fa0d7; }
#sub-menu.Accessories { background-color: #0da8a1; }
#sub-menu.Workwear { background-color: #a858b5; }
#sub-menu.Fixings { background-color: #d7821f; }
#sub-menu.LawnGarden { background-color: #26a85c; }


#main-menu ul li:hover a { color:#000; }
#main-menu ul li:active a { color:#fff; }

#sub-menu { background-color: #26a85c; margin: 0; }
#sub-menu ul { margin:0 auto; padding: 7px 0 7px 0; list-style:none; font-size: 1.1em; float: left; }
#sub-menu ul li { float:left; margin: 0 10px 7px 10px; display: inline; }
#sub-menu ul li a { color:#fff; text-decoration:none; }

#sub-menu ul li a:hover {
	text-decoration:underline;
}

/* --------------------------------------------------------------

    +Left col

-------------------------------------------------------------- */

#leftCol h3 { color: #c37d1f; font-size: 1.3em; }
#leftCol h4 { font-size: 1.2em; }

#left-menu { border:1px solid #c37d1f; background:#fbf4eb; }
#content #left-menu ul { list-style:none; margin:10px; }
#left-menu ul li { margin-bottom:10px; }
#left-menu ul li a { font-weight:bold; }
#content #left-menu ul ul { padding:5px; margin:10px -10px; background:#293B96; }
#content #left-menu ul ul.Powertools { background:#c42121; }
#content #left-menu ul ul.SpecialOffers { background:#ffd300; }
#content #left-menu ul ul.Handtools { background:#1fa0d7; }
#content #left-menu ul ul.Accessories { background:#0da8a1; }
#content #left-menu ul ul.Workwear { background:#a858b5; }
#content #left-menu ul ul.Fixings { background:#d7821f; }
#content #left-menu ul ul.LawnGarden { background:#26a85c; }
#left-menu ul ul li { margin:0 10px 0 15px; font-size: 0.9em; }
#left-menu ul ul li a { font-weight:normal; text-transform:none; color:#fff; }

/* --------------------------------------------------------------

    +Right col

-------------------------------------------------------------- */

#rightCol h2 { font-size: 1.3em; color: #333; }
#choose-brand h2 { color: #c37d1f; font-size: 1.3em; }

/* --------------------------------------------------------------

    +Homepage

-------------------------------------------------------------- */

/* --- Main Product Box --- */

.product-box1 { margin: 0 0 12px 0; height: 176Px; color: #fff; background: url(/images/feature-bg.png) repeat-x; padding: 12px; }
.product-box1 h3 { font-size: 1.8em; line-height: 1.2em; font-weight: bold; margin-bottom: 0.2em; width: 340px; }
.product-box1 h3 a { color: #fff; text-decoration: none; }
.product-box1 h3 a:hover { text-decoration: underline; }
.product-box1 h5.price { color: #fff; font-weight: bold; float: left; margin-right: 32px; font-size: 2.2em; margin-bottom: 15px; letter-spacing: -1px; }
.product-box1 h4.description { color: #bbb; font-weight: bold; font-size: 1.2em; width: 340px; }

.product-inner { height: 193px; position: relative; text-align: left; background-repeat: no-repeat;}

.product-image { text-align: right; background-repeat: no-repeat; background-position: top right; margin-right: 10px;}

.product-box1 .price-buy { position: absolute; bottom: 0;  }
.product-box1 .price-buy .buy { margin-top: 10px; }
.product-box1 .price-buy .buy, .price-buy .buy-button, .price-buy .qty { float: left; }
.product-box1 .price-buy .qty { margin-top: -4px; padding: 3px 0;}
.product-box1 .price-buy .qty input { padding: 3px; }
.product-box1 .price-buy .buy-button { margin: -3px 0 0 -10px; }

/* --- Sub Product Box --- */
.product-box2 {
	background: url(/structure/module-bkgd.gif) repeat-x top #cacaca;
	margin: 0 12px 12px 0;
	height:150px;
	padding: 12px;
	width: 248px;
	float: left;
	}

.product-box2 h3 { font-size: 1.5em; font-weight: bold; line-height: 1.4em; }
.product-box2 h4 { font-weight: bold; margin-bottom: 0; }
.product-box2 h2 a:hover { text-decoration: underline; }
.product-box2 h3 { font-size: 1.3em; azimuth: ;-weight: bold; margin-bottom: 0; }
.product-box2 .price-buy { position: absolute; bottom: 0; }
.product-box2 .price-buy .buy, .price-buy .buy-button, .price-buy .qty { float: left; }
.product-box2 .price-buy .qty { margin: 0; padding: 3px 0;}
.product-box2 .price-buy .qty input { padding: 3px; }
.product-box2 .price-buy .buy-button { margin: 0 0 0 5px; position: relative; }

.product-box2 .product-inner { background-position: -10px 23px; height: 153px; position: relative;}

/* --- Choose Brand Area --- */
#choose-brand img { margin-left: -6px; }


#center .module .module-image { float:right; margin:10px 10px; padding:2px; font-size: 1.3em; }

/* Boxes */
.box .price { color:#c10e0e; font-size:1.1em; }
.box .discl { color:#676767; font-size:0.9em; }

.manufacturers-logo { border: 1px solid #fff; margin-bottom: 5px; }

.viewed-product-inner h3 { font-size: 1.1em; }
.viewed-product-inner { background-repeat: no-repeat; position: relative; padding: 12px 0; border-top: 1px solid #ccc; }
.viewed-product-inner .buy-button { margin: 0 0 0 -10px; float: left; position: relative; }

#close-link { float: right; background-color: #ddd; margin: -10px -10px 0 0; padding: 4px 6px; cursor: pointer; }


/* --- slideshow --- */
#slideshow { height: 200px; margin-bottom: 12px; }
ul#slides { margin: 0; padding: 0; list-style: none; }
ul#slides li { height: 200px; position: absolute; width: 557px; }


/* --------------------------------------------------------------

    +Category Pages

-------------------------------------------------------------- */

#categoriesList .category { display: inline; float: left; width:120px; height: 150px; text-align:center; margin:0 25px 30px 0; }
#categoriesList .category.last { margin-right: 0; }
.category .img { height: 100px; vertical-align: bottom;  }
#breadCrumb { margin-bottom: 10px; width:100%; background: #f7f7f7 none repeat scroll 0 0; padding:5px 0; border: 1px solid #cfcece; }
#breadCrumb a { color: #000; text-decoration: none; }
#breadCrumb a:hover { text-decoration: underline; }

h2#categoryName { font-size: 1.6em; }

/* --------------------------------------------------------------

    +Product Listings

-------------------------------------------------------------- */

.pager { margin-bottom: 14px; border-bottom: 1px dotted #ccc; padding-bottom: 14px; }
.product { margin: 0 45px 20px 0; width:250px; float:left; min-height: 180px; border-bottom: 1px dotted #ccc; }
.productInner h3 { font-size: 1.3em;  }
.productPrice { font-size: 1.6em; font-weight: bold; color: #C80D0D; margin-bottom: 5px; }
.productBasket input { float: left; }
.productBasket .addToCartImage { margin-left: -7px; }
.productInner { position:relative; }
.productInner .product-code { position: absolute; top: 110px; right: 0px; width:90px; }
#products { border-top: 1px dotted #ccc; padding-top: 14px;}

.productInnerDetails { height: 100px; }

/* --------------------------------------------------------------

    +Register/Login

-------------------------------------------------------------- */

h3.register-login { font-size: 1.5em; }
table.miniBasketItems th { font-weight: bold; color: #555; }
table.miniBasketItems .qty { padding: 0 8px; }

table.miniBasketSummary th { padding: 5px 0; }


/* --------------------------------------------------------------

    +Basket

-------------------------------------------------------------- */

table.chkt { border-bottom: 1px solid #e7e7e7; }
table.chkt td, table.chkt th { padding: 7px; }
table.chkt th {
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	padding: 12px 7px;
	background-color: #f7f7f7;
	font-weight: bold;
	}

table#totals { text-align: right; float: right; }


/* --------------------------------------------------------------

    +Sections

-------------------------------------------------------------- */

h2.section { font-size: 2.6em; text-transform: none; color: #333; }
h3.cats { color: #CF0C1D; font-size: 1.4em; margin-bottom: 1em; }
#categoriesList h4 { font-size: 1.1em; }

h2#categoryName { float: left; }



/* --------------------------------------------------------------

    +Footer

-------------------------------------------------------------- */

#footer {
	width:100%;
	padding: 0;
	padding-top: 30px;
}

/* --------------------------------------------------------------

    +Brochure

-------------------------------------------------------------- */

.brochure { padding-top: 14px; border-top: 1px solid #ccc; }
.mainBrochureArea #brand { margin-bottom: 14px; float: right; }
.brochureImages { float:left; width: 280px; margin-right: 14px; }
.mainBrochureArea { width: 250px; float: right; }
h2.brochureTitle { font-size: 1.6em; text-transform: none; color: #333; margin-bottom: 0.3em; }
img#mainImage { margin-right: 30px; }

.brochureDetails { border-bottom: 1px solid #ccc; margin: 14px 0; padding: 14px 0 0 0; border-top: 1px solid #ccc; }
.brochureDetails h2 { font-size: 1.6em; }

.prcmtx { border-collapse: collapse; border: 1px solid #ccc; margin-bottom: 12px;}
.prcmtx td, .prcmtx th { padding: 7px; }
.prcmtx td { font-size: 1.4em; font-weight: bold; color: #C80D0D; }
.prcmtx tr.head { background-color: #ccc; font-weight: bold; }

h3#technical { font-size: 1.6em; }
.technical-data { width: 100%; border-collapse: collapse; }
.technical-data tr td { background-color: #f7f7f7; padding:5px 7px; border: 1px solid #ccc;  }
.technical-data th { background-color: #cfcece; padding:5px 7px; }

.instruction {
    padding: 4px;
    margin-bottom: 6px;
    border: 1px dotted #e3de9b;
    background: #fcfae1;
    font-weight: bold;
    }

.error {
background: url(/images/error.gif) no-repeat 12px 12px #FFE6E6;
border: 1px dotted #f3a4a4;
padding: 12px 12px 12px 34px;
margin-bottom: 12px;
}

/* --------------------------------------------------------------

    +Overwrite Styles

    ** Keep these styles at the bottom of the stylesheet **

-------------------------------------------------------------- */

.spacer 					{ clear: both; }
.bold 						{ font-weight: bold; margin: 0; }
.quiet 						{ font-weight: lighter; text-transform: none; letter-spacing: 0;}
.last 						{ margin-right: 0; }
.half 						{ width: 48.5%; margin-right: 15px; }
.left 						{ float: left; }
.italic 					{ font-style: italic; letter-spacing: 0.04em; }

.no-marg { margin: 0; }
.no-pad { padding: 0; }
.marg-right { margin-right: 15px; }
.marg-left { margin-left: 15px; }
.marg-bottom { margin-bottom: 12px; }
.marg-top { margin-top: 12px; }
.marg-all { margin: 12px; }
.pad-bottom { padding-bottom: 12px; }
