@import url(../contentStyles.css);


/* Layout
========================================================================================== */
html {
	height: 100%;
	margin-bottom: 1px;
}
body {
	background: #8B8A81 url(../../Images/bg.gif) repeat-x 0 0;
	padding-bottom: 100px;
}
#wrap {
	width: 970px;
	margin: 40px auto 10px;
	background: #FFF;
	padding-bottom: 10px;
}
.head {
	position: relative;
	width: 970px;
	float: left;
	height: 95px;
}
div.menu {
	clear: both;
}
div.main {
	margin: 0 15px;
	clear: both;
	width: 940px;
}
div.nav {
	float: left;
	width: 180px;
	margin-right: 10px;
}
div.content {
	float: left;
	width: 558px;
}
div.side {
	float: right;
	width: 180px;
	overflow: hidden;
}
div.foot {
	clear: both;
	text-align: center;
	border-top: solid 10px #FFF;
}
ul.footer {
	width: 970px;
	margin: 10px auto;
}
ul.footer li {
	float: left;
	width: 45%;
	padding: 0 10px;
	list-style: none;
	font-size: 0.687em;
}
ul.footer li, ul.footer a {
	color: #FFF;
	text-decoration: none;
}
ul.footer a span {
	color: #ECB328;
}


.feature {
	margin: 10px 0;
	display: block;
}
.feature input {
	margin: 5px;
}

#Basket a.btn, #Checkout a.btn, #Checkout div.btn a, .btnYellow {
	background: #F0A800 url(../../Images/Arr-GoFind.gif) no-repeat center right;
	color: #FFF;
	font-weight: bold;
	padding: 2px 25px 2px 5px;
	font-size: 0.75em;
	border: none;
	text-decoration: none;
	cursor: hand;
	cursor: pointer;
}
a.btn, input.btn {
	cursor: hand;
	cursor: pointer;
}

/* Head
========================================================================================== */
.head h4 {
	background: url(../../Images/Top-slice.png) no-repeat 0 0;
	height: 33px;
	position: absolute;
	top: -33px;
	left: 0;
	width: 970px;
}
.head h4 span {
	position: absolute;
	top: 10px;
	right: 40px;
	color: #FFF;
	font-size: 1em;
	font-weight: bold;
	background: url(../../Images/phone-icon.png) no-repeat left center;
	line-height: 17px;
	padding-left: 30px;
}
.head a.logo, .head h1.logo {
	float: left;
	display: block;
	position: relative;
	width: 308px;
	height: 114px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	top: -25px;
	left: 15px;
	z-index: 99;
}
.head .logo em {
	background: url(../../Images/Logo.gif) no-repeat 0 0;
	position: absolute;
	width: 308px;
	height: 114px;
	top: 0;
	left: 0;
}
.head div.login {
	float: right;
	padding-right: 15px;
}
.head div.login h3 {
	color: #F0A800;
	font-size: 0.812em;
	margin: 5px;
}
.head div.login fieldset {
	background: #F0A800;
	padding: 10px;
	width: 160px;
	overflow: hidden;
}
.head div.login div.btn label {
	color: #FFF;
}
.head div.login div.btn input {
	float: right;
	border: none;
	background: #F0A800;
	overflow: visible;
	font-size: 0.75em;
	color: #FFF;
	font-weight: bold;
}
.head div.login p {
	float: left;
	white-space: nowrap;
	font-size: 0.75em;
	margin: 0;
	padding: 0;
}
.head div.login p a {
	color: #FFF;
	text-decoration: none;
}

/* Site nav and foot
========================================================================================== */
div.menu, div.foot {
	overflow: hidden;
	background: #7C7C7C;
	margin: 10px 0 5px;
	padding: 4px 0;
}
div.menu li, div.foot li {
	list-style: none;
	float: left;
	border-left: solid 1px #EEE;
	margin-right: 10px;
	padding-left: 10px;
}
div.menu li.first {
	border: none;
	margin-left: 5px;
}
div.menu li.first a {
	background: url(../../Images/Home-icon.png) no-repeat center left;
	padding-left: 20px;
}
div.menu li a, div.foot li a {
	font-size: 0.75em;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}
/*div.menu li.delivery {
	float: right;
	width: 170px;
	border: none;
}*/

div.foot li {
	border: none;
	float: none;
	display: inline;
}


/* store nav
========================================================================================== */
div.nav ul {
	overflow: hidden;
}
div.nav li {
	float: left;
	clear: left;
	width: 180px;
	list-style: none;
	margin-bottom: 5px;
	background: #FED378;
}
div.nav li a {
	font-size: 0.75em;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 80px 6px 7px;
	min-height: 28px;
	height: auto !important;
	height: 28px;
	display: block;
	background: url(../../Images/nav/Handtools.gif) no-repeat right center;
	zoom: 1;
}
div.nav li.handtools a {
	background-image: url(../../Images/nav/Handtools.gif);
}
div.nav li.homeleisure a {
	background-image: url(../../Images/nav/EngineeringAuto.gif);
}
div.nav li.uncategorisedlines a {
	background-image: url(../../Images/nav/Handtools.gif);
}
div.nav li.workweartoolstoragesafety a {
	background-image: url(../../Images/nav/SafetyClothing.gif);
}
div.nav li.decoratingproducts a {
	background-image: url(../../Images/nav/Decorating.gif);
}
div.nav li.hardwareproductsconsumables a {
	background-image: url(../../Images/nav/FixingsHardware.gif);
}
div.nav li.powertools a {
	background-image: url(../../Images/nav/PowerTools.gif);
}
div.nav li.drillbitsandholesaws a {
	background-image: url(../../Images/nav/Drillbits.gif);
}
div.nav li.gardentools a {
	background-image: url(../../Images/nav/Gardening.gif);
}
div.nav li.merchandising a {
	background-image: url(../../Images/nav/Shopping-Basket.gif);
}
div.nav li.powertoolaccessories a {
	background-image: url(../../Images/nav/PowerToolAcc.gif);
}
div.nav li.christmaspromotion a {
	background-image: url(../../Images/nav/Christmas.gif);
}

/* level 2 */
div.nav li ul {
	border: solid 1px #AFAFAF;
	border-top: none;
	padding: 5px 0;
}
div.nav li ul li {
	width: 100%;
	margin: 0;
}
#wrap div.nav li ul li a {
	padding: 3px 4px;
	height: auto;
	min-height: 0;
	font-size: 0.687em;
	font-weight: normal;
	color: #333;
	background: none;
}
#wrap div.nav li ul li.on a {
	background: #F0A800;
}


/* Category Nav
========================================================================================== */
.shopNav {
	clear: both;
}
.shopNav .search h3, .shopNav .search img {
	display: none;
}
.shopNav .search div {
	float: left;
	clear: none;
}
.shopNav .search fieldset {
	width: auto;
}
.shopNav .search div.btn {
	position: static;
	float: right;
}
.shopNav .search input, .shopNav .search select {
	width: 200px;
	margin-right: 15px;
	display: inline;
}
.shopNav .search input.btnYellow {
	padding-top: 1px;
	padding-bottom: 1px;
}

.shopNav h1 {
	background-color: #F0A800;
	color: #FFF;
	font-size: 1.4em;
	padding: 25px 30px 25px 160px;
	margin: 0 0 3px;
	position: relative;
	zoom: 1;
}
.shopNav h1 em {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 98px;
	width: 150px;
	background: url(../../Images/headers/hammer-img.png) no-repeat bottom left;
}
div.handtools h1 em {
	background-image: url(../../Images/headers/Handtools.png);
}
div.homeleisure h1 em {
	background-image: url(../../Images/headers/HomeLeisure.png);
}
div.uncategorisedlines h1 em {
	background-image: url(../../Images/headers/Handtools.png);
}
div.workweartoolstoragesafety h1 em {
	background-image: url(../../Images/headers/Safety.png);
}
div.decoratingproducts h1 em {
	background-image: url(../../Images/headers/Decoratting.png);
}
div.hardwareproductsconsumables h1 em {
	background-image: url(../../Images/headers/Hardware.png);
}
div.powertools h1 em {
	background-image: url(../../Images/headers/Power-tools.png);
}
div.drillbitsandholesaws h1 em {
	background-image: url(../../Images/headers/DrillBits.png);
}
div.gardentools h1 em {
	background-image: url(../../Images/headers/Gardening.png);
}
div.merchandising h1 em {
	background-image: url(../../Images/headers/Handtools.png);
}
div.powertoolaccessories h1 em {
	background-image: url(../../Images/headers/Power-tool-accessories.png);
}
div.christmaspromotion h1 em {
	background-image: url(../../Images/headers/Handtools.png);
}

.shopNav .navWrap {
	background: #2B2B2B;
	zoom: 1;
}

.shopNav ul.crumbs {
	background: url(../../Images/BreadcrumbBar.png) repeat-x bottom left;
	padding: 4px 10px 17px;
	list-style: none;
	overflow: hidden;
	margin: 0 0 -14px;
	position: relative;
	z-index: 2;
	clear: both;
	zoom: 1;
}
.shopNav ul.noRanges {
	margin: 0;
	padding-bottom: 4px;
}
.shopNav ul.crumbs li {
	color: #FFF;
	font-weight: bold;
	font-size: 0.75em;
	margin-right: 7px;
	margin-bottom: 5px;
	float: left;
	background: url(../../Images/BreadcrumbArrow.png) no-repeat left center;
	padding-left: 13px;
	white-space: nowrap;
}
.shopNav ul.crumbs li a {
	color: #FFF;
	text-decoration: none;
	white-space: nowrap;
}

.shopNav div.ranges {
	border: solid 1px #AFAFAF;
	border-top: none;
	padding: 10px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: #FED378; /* url(../../Images/SubMenuBreak.gif) repeat-y 190px 0;*/
	zoom: 1;
}
.shopNav div.ranges ul {
	list-style: none;
	overflow: hidden;
	float: left;
	width: 158px;
	padding: 2px 10px;
}
.shopNav div.ranges li {
	margin: 5px 0;
	float: left;
	clear: left;
	font-size: 0.687em;
	color: #000;
	width: 97%;
}
.shopNav div.ranges li a {
	color: #000;
	text-decoration: none;
	background: url(../../Images/BreadcrumbArrow.png) no-repeat 3px 3px;
	padding-left: 15px;
	display: block;
}
.shopNav div.ranges li.on {
	background: #F0A800 url(../../Images/Arr-GoFind.gif) no-repeat 3px 3px;
	padding-left: 15px;
	width: 90%;
}


div.logos img {
	display: block;
	margin: 5px auto;
}


/* Search
========================================================================================== */
.search {
	background: url(../../Images/Search-bg.gif) no-repeat 0 0;
	padding: 5px 10px;
	position: relative;
	margin-bottom: 5px;
	zoom: 1;
}
.search h3 {
	color: #FFF;
	font-size: 1.125em;
}
.search img {
	position: absolute;
	bottom: 0;
	right: -5px;
}
.search fieldset {
	width: 200px;
	position: relative;
	zoom: 1;
}
.search input {
	padding: 1px;
}
.search input, .search select {
	border: solid 1px #CCC;
}
.search fieldset div.btn {
	position: absolute;
	top: 0;
	left: 215px;
}
.search fieldset div.btn input {
	padding: 0;
	border: none;
	position: relative;
	top: 1px;
}


/* home
========================================================================================== */
.banner {
	margin-bottom: 5px;
}


/* Newsletter
========================================================================================== */
.newsletter {
	border: solid 1px #7C7C7C;
	padding: 10px;
	margin: 10px 0;
	clear: both;
	background: url(../../Images/Email-BG.gif) repeat-x 0 0;
}
.newsletter h3 {
	color: #F0A800;
	font-size: 0.812em;
}
.newsletter p {
	margin: 10px 0;
	color: #7C7C7C;
	font-size: 0.687em;
}



/* Basket Status
========================================================================================== */
.basket {
	width: 179px;
}
.basket h3 {
	font-size: 0.75em;
	background: #7C7C7C url(../../Images/nav/Shopping-Basket.gif) no-repeat left center;
}
.basket h3 a {
	color: #FFF;
	text-decoration: none;
	padding: 10px;
	display: block;
}
.basket h3 strong {
	padding-right: 5px;
	font-size: 0.75em;
}
.basket ul {
	border: solid 1px #AFAFAF;
	border-top: none;
	background: #FED378;
	margin-bottom: 10px;
	overflow: hidden;
}
.basket li {
	float: left;
	clear: left;
	border-bottom: solid 1px #AFAFAF;
	padding: 5px;
	width: 168px;
}
.basket li img {
	float: left;
	border: none;
}
.basket li h4, .basket li h5 {
	font-size: 0.625em;
	margin: 5px 0;
	float: right;
	clear: right;
	width: 100px;
	text-align: right;
}
.basket li a {
	text-decoration: none;
	color: #333;
}
.basket li a.btn {
	font-size: 0.625em;
	float: right;
	clear: right;
	white-space: nowrap;
}

.basket li.checkout {
	padding: 10px;
	border: none;
	width: 158px;
}
.basket li.checkout a {
	color: #000;
	display: block;
	padding: 2px 25px 2px 10px;
	font-size: 0.75em;
	font-weight: bold;
	text-align: right;
	background: #F0A800 url(../../Images/Arr-GoFind.gif) no-repeat center right;
}


/* Basket Page
========================================================================================== */
#Basket table {
	border-collapse: collapse;
}
#Basket th, #Basket td {
	font-size: 0.75em;
	padding: 5px;
}
#Basket th {
	color: #333;
}
#Basket tbody td {
	border: solid 1px #C6C6C6;
}
#Basket td.SubTotal, #Basket td.Discount, #Basket td.Postage, #Basket td.Total {
	text-align: right;
	font-weight: bold;
}

#Basket a.btn {
	font-size: 1em;
}
#Basket .Plus, #Basket .Minus {
	text-decoration: none;
	padding: 2px 4px;
	font-weight: bold;
}
#Basket .Plus {
	color: Green;
}
#Basket .Minus {
	color: #990000;
}
#Basket .Checkout {
	padding-top: 20px;
}

#Basket .pnlShipping, #Basket .pnlVoucher {
	padding: 7px;
	margin: 5px 0;
	overflow: hidden;
}
#Basket .pnlShipping {
	background: #F1E3C2;
}
#Basket .pnlVoucher {
	background: #EDEDED;
}
#Basket .pnlShipping h4, #Basket .pnlVoucher h4 {
	font-size: 0.812em;
	color: #333;
	margin: 0 0 5px;
}
#Basket .pnlShipping p, #Basket .pnlVoucher p {
	font-size: 0.75em;
	color: #333;
	float: left;
	width: 60%;
}
#Basket .pnlShipping input, #Basket .pnlVoucher input {
	float: right;
}
#Basket .pnlShipping a.btn, #Basket .pnlVoucher a.btn {
	clear: both;
	float: right;
	white-space: nowrap;
	margin-top: 5px;
}

#Basket input.btnCheckout, #Checkout div.btnConfirm a {
	margin-left: 20px;
	background: #000;
	float: right;
	font-size: 1em;
}

#Checkout div.btnConfirm a {
	font-size: 0.812em;
}


/* Checkout
========================================================================================== */
#Checkout {
	font-size: 0.9em;
}
/*#Checkout label {
	font-size: 0.75em;
	font-weight: bold;
}*/

#Checkout h2 {
	float: right;
	font-size: 0.812em;
}
#Checkout fieldset {
	margin: 10px 0;
	padding: 20px;
	border: solid 1px #989898;
	float: left;
	width: 515px;
}
#Checkout h3 {
	font-size: 1em;
	color: #353535;
	margin: 0 0 20px;
}
#Checkout h4 {
	font-size: 0.812em;
	color: #353535;
	margin: 10px 0;
}
#Checkout fieldset div, #Checkout div.btn {
	clear: both;
	overflow: hidden;
	margin: 10px 0;
}
#Checkout div label {
	float: left;
	width: 150px;
	text-align: right;
	font-size: 0.75em;
	font-weight: bold;
	margin-right: 10px;
}
#Checkout div input, #Checkout div select {
	float: left;
	width: 250px;
	border: solid 1px #353535;
}
#Checkout div input.btn {
	border: none;
	float: none;
	width: auto;
}
#Checkout div textarea {
	clear: both;
	width: 100%;
	margin-top: 10px;
	border: solid 1px #353535;
}

#Checkout div.btn {
	float: right;
}
#Checkout div.btnLeft {
	clear: none;
	float: left;
}
#Checkout div.btn input {
	width: auto;
	border: none;
}

#Checkout div.chk input, #Checkout div.chk label {
	float: none;
	width: auto;
	border: none;
	margin-right: 5px;
}




/* thumbs
========================================================================================== */
.thumbs {
	margin: 10px 0;
	clear: both;
}
.thumbs table {
	border-collapse: collapse;
}
.thumbs td {
	border: solid 1px #C6C6C6;
	padding: 10px 10px 20px;
	width: 165px;
}
.thumbs a {
	display: block;
	color: #333;
	text-decoration: none;
	text-align: center;
}
.thumbs h3 {
	font-size: 0.687em;
	margin: 10px 0 0;
}
.thumbs h2 {
	background: #7C7C7C url(../../Images/Header-Bar.gif) no-repeat 0 0;
	color: #FFF;
	margin: 0;
	padding: 3px 10px;
	font-size: 0.812em;
}


/* product Thumbs
========================================================================================== */
#products {
	margin: 10px 0;
	clear: both;
	border: solid 1px #C6C6C6;
}
#products .thumbs {
	margin: 0;
}
#products h2 {
	margin: 10px 10px 25px;
	font-size: 1.125em;
	background: none;
	color: #333;
	padding: 0;
}
#products table {
	border: none;
	width: 100%;
}
#products td {
	border-style: solid none none;
	width: auto;
	text-align: left;
	padding: 10px;
	position: relative;
}
#products th {
	font-size: 0.75em;
	text-align: left;
	padding: 5px 10px;
}
#products table .price {
	text-align: right;
}

#products h3 {
	font-size: 0.875em;
}
#products a {
	text-align: left;
}

#products .price strong {
	font-size: 1.1em;
	float: right;
}
#products .price em {
	font-size: 1.3em;
	float: right;
	clear: right;
	font-style: normal;
	font-weight: bold;
	color: #900;
	margin-top: 10px;
}
#products a.more {
	text-decoration: underline;
	float: right;
	margin: 10px 0 0;
	background: url(../../images/btn-more-details.gif) no-repeat center right;
	padding: 10px 25px 10px 0;
	white-space: nowrap;
}

/* Home page
========================================================================================== */
#offers h4 {
	color: #900;
	font-style: italic;
	text-transform: uppercase;
	margin: 5px 0;
	font-size: 0.75em;
	text-align: center;
}
#offers p a {
	text-decoration: none;
	color: #666;
	display: block;
	margin: 5px 0;
}
#offers p strong {
	display: block;
	color: #900;
	text-align: center;
	margin: 5px 0;
}
#offers p em {
	text-align: center;
	font-style: normal;
	font-size: 0.8em;
}


/* Forms
========================================================================================== */
div.bespokeForm {
	border: 2px solid #EEEEEE;
	clear: both;
	margin: 20px 0;
	overflow: hidden;
	padding: 20px;
}
div.bespokeForm div div {
	overflow: hidden;
	padding: 5px 0;
	position: relative;
}
div.bespokeForm div label {
	font-weight: bold;
	margin: 5px;
}
div.bespokeForm div label em {
	color: #990000;
	font-weight: bold;
	left: 5px;
	position: relative;
}
div.bespokeForm div label, div.bespokeForm div input, div.bespokeForm div select, div.bespokeForm div textarea {
	color: #333333;
	display: block;
	font-size: 0.687em;
	width: 200px;
}
div.bespokeForm div select {
	width: 180px;
}
div.bespokeForm div textarea {
	width: 98%;
}
div.bespokeForm div.btn input {
	float: right;
	width: auto;
}

/* product
========================================================================================== */
#product {
	margin: 10px 0;
	border: solid 1px #C6C6C6;
	padding: 20px;
	overflow: hidden;
	clear: both;
}
#product h1 {
	margin: 0 0 25px;
}
#product div.images {
	margin: 0 0 25px;
	float: left;
	width: 335px;
}
#product div.images p {
	text-align: center;
	padding: 10px 0;
	margin: 0;
	font-weight: bold;
	clear: both;
}

#product div.images a {
	float: left;
	border: solid 1px #C6C6C6;
	display: block;
}
#product div.images ul {
	margin: 10px 0;
}
#product div.images li {
	list-style: none;
	float: left;
	margin: 0 4px;
	overflow: hidden;
}
#product div.desc {
	font-size: 0.687em;
	clear: both;
}
#product div.desc p {
	font-size: 1em;
}
#product div.details {
	float: right;
	width: 160px;
}
#product div.details h4 {
	color: #990000;
	font-size: 1.125em;
	margin: 20px 0;
	text-align: center;
}
#product div.details h4 strong {
	color: #333333;
	display: block;
	font-size: 0.8em;
}
#product div.details h4 em {
	font-size: 1.2em;
	font-style: normal;
	font-weight: bold;
	color: #900;
	margin-top: 10px;
	display: block;
}
#product div.details p.excVat {
	font-size: 0.687em;
	margin: 5px 0;
}
#product p.dispatch {
	margin: 10px 0;
	text-align: center;
	color: Green;
}
#product div.quantity {
	margin: 10px 0;
	overflow: hidden;
}
#product div.quantity label {
	width: 80px;
	float: left;
	font-size: 0.75em;
	font-weight: bold;
	text-align: right;
	margin-right: 10px;
}
#product div.quantity input {
	float: left;
	width: 35px;
}
#product input.btn {
	float: right;
	font-size: 1em;
	margin: 10px 0 20px;
}


/* Paging
========================================================================================== */
div.paging {
	background: #2B2B2B;
	margin: 10px 0;
	overflow: hidden;
	text-align: center;
	font-size: 0.687em;
	color: #FFF;
	padding: 5px;
	clear: both;
}
div.paging a {
	color: #FFF;
}


/* Forms
========================================================================================== */
fieldset.moveLbls label, fieldset.moveLbls input, fieldset.moveLbls select {
	display: block;
	font-size: 0.75em;
	width: 100%;
	margin: 5px 0;
}
fieldset input, fieldset select, fieldset textarea {
	border: solid 1px #8E8D8D;
	color: #666;
	font-size: 0.687em;
}
#wrap fieldset div.btn input, #wrap div.bespokeForm div input.btn {
	width: auto;
	float: right;
	border: none;
}

fieldset.form {
	padding: 10px;
	margin: 10px 0;
	border: solid 1px #C6C6C6;
}
fieldset.form div {
	overflow: hidden;
	margin: 10px 0;
	clear: both;
}
fieldset.form label {
	float: left;
	width: 150px;
	font-size: 0.75em;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
}
fieldset.form input {
	float: left;
	width: 150px;
}


/* Manager Buttons
========================================================================================== */
.pnlParaBtns {
	text-align: right;
	margin: 5px 0;
	float: left;
}
.pnlParaBtns select {
	position: relative;
	top: -4px;
}
.pnlParaBtns br {
	display: none;
}
.SiteHeader {
	float: right;
	margin: 5px 0;
}


.pnlConfirm {
	clear: both;
	padding: 40px;
	text-align: center;
}
.paraControls {
	clear: both;
	margin-left: 20px;
}
.paraControls a {
	font-size: 0.75em;
	color: #999;
	text-decoration: none;
}

.secondary .paraControls {
	display: none;
}