/*
Website: http://www.cda.eu
Author: Laura Zucchetti
=============================
High contrast version!
=============================
*/

@import url("../base.css");

/*
=============================
ACCESSIBILITY
=============================
*/
#skip_to,
.hidden {height:0;padding:0;}

#skip_to ul,
#skip_to li,
#skip_to a,
.hidden {height:0;padding:0;margin:0;text-indent:-999px;list-style-type:none;display:inline;overflow:hidden;position:absolute;}

/*
=============================
TYPOGRAPHY
NOTES: This sets the main font styles, However some elements are overridden where needed throughout the css file.
=============================
*/

h1, h2, h3, h4, h5, h6 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
h1 {margin:0 0 .5em 0; padding:0; font-weight:normal; font-size:2em; clear:both;}
div.static h1 {color:#FFFFFF;}
h2 {margin:0 0 .4em 0; padding:0; font-weight:normal; font-size:1.4em;}
h3 {font-size:1.25em; font-weight:bold; margin:0 0 .5em 0; padding:0 0 3px 0; border-bottom:solid 1px #330000;}
a, a:link, a:visited {color:#FFFFCC; text-decoration:underline;}
a:hover {text-decoration:none;}
p {margin:0 0 1em 0; padding:0; font-size:1.3em; line-height:1.4em;}
p.intro {font-size:1.6em; line-height:1.4em;}
table {font-size:1em;}
p.caption {margin:.2em 0 2.5em 0; font-style:italic; font-size:1em; padding:0; text-align:right;}
p.btt_btn {margin:2em 0 0 0; clear:both;}
p.btt_btn a {font-size:1em;}
p.table_caption {font-size:1em; text-align:right; font-style:italic;}
table {font-size:100%;}


/*
=============================
Global elements
NOTES: This is the header and the main containing div areas
=============================
*/

.clear {clear:both;height:0;width:0;font-size:0;}
body {font-family:Arial, Helvetica, sans-serif; font-size:70%; background-color:#330000; color:#FFF; padding-bottom:5em; opacity:1;}
#outer {width:954px; margin:auto; text-align:left; background:#663300;}
#header {min-height:147px; position:relative;}
#header img {border:none; position:absolute; top:20px; left:20px;}
#header #site-info {float:right; width:470px; margin-right:16px; padding-top:22px;}
#header #site-info ul li {float:left; width:235px; font-size:1.25em; line-height:1.6em;}

#wrapper {padding:0 18px;}
#wrapper #content {width:725px; float:right; padding-bottom:25px;}
#sidebar {width:165px; float:left; padding-bottom:25px;}

/* 
=============================
BREADCRUMBS
NOTES:
=============================
*/

#breadcrumbs {height:3em;}
#breadcrumbs ul {margin:0; padding:0; list-style-type:none;}
#breadcrumbs ul li {float:left; padding-right:0.5em; line-height:19px; font-size:1em;}
#breadcrumbs li a {text-decoration:none; font-size:1em;}

/*
=============================
SEARCH IN SIDEBAR
NOTES: 
=============================
*/
#galleries{width:720px;}
div.search {margin-bottom:1em;}
div.search input.search {width:122px; height:15px; padding:5px; border:solid 1px #330000; float:left;}
div.search input.go {width:25px; height:28px; color:#FFFFFF; float:right;}
div.search input.searchret {width:200px; height:15px; padding:5px; border:solid 1px #330000; display:block;}
div.search input.goret {width:83px; height:25px; color:#FFFFFF; padding: 10px 0 0 1px;}
#gallery_search{width:160px;float:right;}

/*
=============================
NAVIGATION ONE
NOTES: The top navigation that is full width. Home, Customer care etc
=============================
*/

#navigation {height:20px; padding:8px 0 0 0; margin:0 20px 10px 20px; font-size:1.1em; background:url(../css_images/bg-navigation.gif) repeat-x top left; font-family:"Trebuchet MS";}
#navigation.front {height:20px; padding:8px 0 0 0; margin:0 20px 26px 20px; font-size:1.1em; background:url(../css_images/bg-navigation.gif) repeat-x top left; font-family:"Trebuchet MS";}

ul#main_nav {width:770px; float:left; margin:0; padding:0; list-style-type:none;}
ul#main_nav li {margin:0;padding:0 8px; float:left; list-style-type:none; font-size:1.25em;}
ul#main_nav li.first_nav {padding:0 8px 0 0px;}
ul#task_bar {width:130px; float:right; margin:0; padding:0; list-style-type:none; float:right; text-align:right;}
ul#task_bar li {margin:0; padding:0 8px; display:inline; list-style-type:none; font-size:1.25em;}
ul#main_nav li a,
ul#task_bar li a {color:#FFFFFF; text-decoration:none; font-weight:bold;}
ul#main_nav li a:hover,
ul#task_bar li a:hover {color:#FFFFFF; text-decoration:underline;}
ul#main_nav li.active_nav a,
ul#task_bar li.active_nav a {text-decoration:underline;}

/*
=============================
NAVIGATION TWO
NOTES: This is the sidebav navigation that holds the product range etc
=============================
*/

#sidebar ul {margin:0 0 20px 0; padding:2px 0 0 0; list-style-type:none; position:relative;}
#sidebar ul.extra-info {margin-bottom:125px;}
#sidebar ul li {margin:0; font-size:1.2em; line-height:1.3em;}
#sidebar ul li.last {padding-bottom:1px;}

/*This absolutely positions the 5 year guarante button and replaces the text with an image.*/
#sidebar ul li.btn a {display:block; width:94px; height:95px; position:absolute; top:100px!important; left:32px; background:url(../../css_images/btn-guarantee.gif) no-repeat; text-indent:-999em; outline:none; padding:0; border:none;}
#sidebar a {display:block; padding:.25em; width:154px; border-bottom:1px solid #330000;}

/*This adds the style for the list active text*/
#sidebar li.sn_active_btn a {background-color:#330000;}
/*This adds the style for the extra-info list active text*/
#sidebar ul.extra-info li.sn_active_btn a {background-color:#330000;}
#sidebar a:link, 
#sidebar a:visited {text-decoration:none;}
#sidebar a:hover {background-color:#330000;}
/*Nest one*/
#sidebar li ul {margin:0; background:none;}
#sidebar li ul li {font-size:.9em; line-height:1.1em;}
/*This turns off the style it shouldn't inherit from it's active parent list item*/
#sidebar li ul li a {border:none; background:none!important;}
/*This adds the style for the sub list active text*/
#sidebar li ul li.sn_active_btn a {font-weight:bold;}


/*
=============================
*HOME* LAYOUT

 _______ 
|_______|
|_|_|___|
=============================
*/

div.advert {margin-bottom:1.7em; position:relative;}
div.advert p.ad-button a {display:block; position:absolute; width:139px; height:25px; z-index:100; top:180px; left:29px; background:url(../css_images/btn-dishwashers.jpg) no-repeat; text-indent:-999em; outline:none;}
div.news-scroller {height:23px; padding:7px 9px 0 9px; margin-bottom:1.5em; background:#330000;width:525px;float:left;overflow:hidden;}
div.news-scroller p.hd {float:left; width:8em; margin:0; /*padding-bottom:;*/}
div.news-scroller ul {margin-top:1px;}
div.news-scroller ul li {font-size:1.2em; font-style:italic;line-height:1.4em;}

div.product-focus {margin-left:15px;float:left;height:23px; padding:7px 9px 0 9px; margin-bottom:1.5em; background:#330000;width:147px;}
div.product-focus p.hd {float:left; margin:0; /*padding-bottom:;*/}
div.product-focus img {vertical-align:bottom;margin:0 0 1px 3px;width:10px;height:12px;}

div.home-text {float:right; width:315px; padding:20px;}
div.home-text h1 {font-size:1.6em;}
div.home-text p {line-height:1.5em;}

/*
=============================
PAGING
NOTES: This is the paging bar for product lists - with next/pre and number of product pages etc.
=============================
*/

div.paging {clear:both; min-height:23px; position:relative; padding:7px 9px 0 9px; margin-bottom:1.5em; background:#330000;}
div.paging h2 {float:left; width:7em; color:#FFFFFF; font-size:1.1em; padding:0;}
div.paging ul li {float:left; font-size:1.1em; padding-right:2px;}
div.paging ul li.prev {padding-right:16px;}
div.paging ul li.next {padding-left:16px;}
div.paging ul li.all {padding-left:16px;}
div.paging ul li.compare {position:absolute; right:5px; top:5px;}
div.paging ul li a {text-decoration:underline;}
div.paging ul li a:hover {text-decoration:none;}

/*
=============================
PRODUCT LISTS
NOTES: This is used on most product list. Be careful what you change here as it affects all product boxes inc the larger Hero product on sub caterogy pages
=============================
*/

div.product-list {float:left; margin-bottom:1em;width:365px;overflow:hidden;}
/*This controls product list with 2 cols*/
div.product-list.two {width:365px;}
/*This controls product list with 4 cols*/
div.product-list.four {width:725px;}
/*This controls product list with 2 and 4 cols - There is a min height set in here!! Make sure you update the ie.css if you change this height. Note iE as it 5px more in height */
/*div.product-list ul li {width:168px; border:solid 1px #330000; display:block; position:relative; float:left; margin:0 11px 1em 0; min-height:225px; text-align:center; padding:0 0 1.2em 0; background:#663300;}*/
div.product-list ul li {width:168px; border:solid 1px #330000; display:block; position:relative; float:left; margin:0 11px 1em 0; text-align:center; padding:0 0 10px 0; background:#663300; height: 275px;}
/*This controls product list with 4 cols - has bigger margin*/
div.product-list.four ul li {margin:0 15px 1em 0;}
/*This controls product list with 2 & 4 - This turns off the margin to the right to sit flush with the right side of the page content */
div.product-list.four ul li.end {margin:0;}
/*The following controls the layout inside the list items such as product image, text and compare tickbox etc Applies to all product lists including thelarge hero product on sub-category.*/
div.p-img {margin:1px auto; width:168px; background:#000; height:138px; display: table-cell; vertical-align: middle;}
div.p-img-vert {width:168px;}
div.p-img img {margin:auto; padding:10px;}
div.p-info {background:#663300;}
div.p-info h2 {font-size:1.3em; color:#FFFFFF; text-align:left; margin-bottom:.5em; padding:6px 6px 0 6px; font-weight:normal;}
div.p-info p {margin:0 6px; text-align:left; color:#FFFFFF;}
div.p-info p.code {float:left; padding:0; margin-bottom:.5em;}
div.p-info p.highlight {float:right; background:#BD000D; padding:0 2px; font-size:1em; margin: 0;}
div.p-info p.highlightfront {float:right; background:#BD000D; padding:0 2px; font-size:1em; margin: 0 0 30px 0;}
iv.hero p.highlight {float:right; background:#BD000D; padding:0 2px; font-size:1em; margin: 0;position:absolute;bottom:28px;right:0px;}
div.p-info p.desc {font-size:1em;}
div.p-info fieldset.compare {clear:both; text-align:left; padding:2px; margin: 0 0 25px 0;}
div.p-info fieldset.compare input {vertical-align:middle; display:inline;}
div.p-info fieldset.compare label {color:#FFFFFF; display:inline;}
/*These are the srtipes at the bottoms in different colours*/
p.stripe-one, p.stripe-two {position:absolute; width:156px; bottom:0px; left:0px; margin:0!important; background-color:#330000; padding:2px 6px;}
p.stripe-three {position:absolute; width:156px; bottom:0px; left:0px; margin:0!important; background-color:#330000; padding:2px 6px; color:#FFFFFF; text-align:left;}


/*
=============================
SUB CATEGORIES
NOTES: With Hero product first on the left with 2 Cols to the right and 4 cols of products underneath.

 ___ _ _ 
|___|_|_|
|_|_|_|_|
=============================
*/

#top-products {margin-bottom:1em;}
/*The hero product uses a lot of style from the block above (PRODUCT LISTS) but has a different height and widths etc. What is different is overridden here */
div.hero {width:354px; border:solid 1px #330000; display:block; position:relative; float:left; margin:0 11px 1em 0; min-height:475px; text-align:center; padding:0 0 1.2em 0; background:#663300;}
div.hero div.p-img {margin:1px auto; width:352px; background:#000; height:354px; display: table-cell; vertical-align: middle;}
div.hero div.p-img img {margin:auto; padding:20px;}
div.hero div.p-img div.p-img-vert {width:354px;}
div.hero div.p-img #sccont {margin:auto; padding:20px 10px;}
div.hero div.p-img #sccont #si1, div.hero div.p-img #sccont #si2, div.hero div.p-img #sccont #si3, div.hero div.p-img #sccont #si4 {margin:auto;}
div.hero div.p-img #sccont #si1 img, div.hero div.p-img #sccont #si2 img, div.hero div.p-img #sccont #si3 img, div.hero div.p-img #sccont #si4 img {padding:0;}
div.hero div.p-info h2 {font-size:1.3em; color:#FFFFFF; text-align:left; margin-bottom:.5em; padding:6px 6px 0 6px; font-weight:normal;}
div.hero div.p-info p {width:346px; padding: 4px; margin: 0;}
div.hero div.p-info p.stripe-one {width:340px;}
div.hero div.p-info p.highlight {width:auto;padding: 4px; margin: 0;}
div.hero div.p-info p.stripe-two {/*width:340px; padding: 5px;*/}

/*This controls the 4 products that sit to the right of the main hero image. This is only controlling the margins and the rest comes from PRODUCT LISTS block*/
#top-products div.product-list.two {float:right; width:355px;}
#top-products div.product-list.two li {margin-right:14px;}
#top-products div.product-list.two li.end {margin-right:0;}


/*
=============================
FIND A RETAILER
NOTES: 3 col table with multiple rows
=============================
*/

table.retailer { width: 100%; border-collapse: collapse; margin: 0; border-left: solid 1px #333; border-right: solid 1px #333; border-bottom: solid 1px #333;  }
table.retailerfirst { width: 100%; border-collapse: collapse; margin: 0; border: solid 1px #333; }
table.retailer th,table.retailerfirst th { text-align:left; font-size:1.2em; color:#FFFFFF; padding:5px; vertical-align:top; width: 5%; }
table.retailer td,table.retailerfirst td { border-left: solid 1px #333; padding: 5px; text-align: left; vertical-align: top; width: 75%; }
table.retailer td.col1,table.retailerfirst td.col1 { width: 20%; }

/*
=============================
PRODUCT COMPARISON
NOTES: 4 col table with 3 products to compare
 _ _ _ _ 
|_|_|_|_|
|_|_|_|_|
=============================
*/

table.compare { border-collapse:collapse; margin-bottom:2em;}
table.compare th {text-align:left; font-size:1.3em; color:#FFFFFF; padding:5px; vertical-align:top;}
table.compare tr.alt {background:#330000;}
table.compare td {border-left:solid 1px #333; padding:5px; text-align:center; vertical-align:top;}
table.compare td.col {width:180px;}
table.compare td ul {width:180px;}
table.compare td ul li {display:inline;}
/*This styles the div that holds the product image and details etc. The inner content is using the PRODUCT LISTS block to style it*/
div.p-compare {width:168px; border:solid 1px #282828; display:block; position:relative; margin:0 auto 1em auto; min-height:240px; text-align:center; padding:0 0 1.2em 0; background:#330000;}
p.btn-back a {display:block; background:url(../css_images/btn-back-prod.jpg) no-repeat; width:150px; height:25px; text-indent:-999em; outline:none;}

/*
=============================
PRODUCT DETAIL PAGE
NOTES: The main product page with all product information and cross sells

 ____ __ 
|    |  |
|    |  |
|____|__|
|_|_|_|_|
=============================
*/

#product-col-one {float:left; width:354px; margin-bottom:3em;}
#product-col-one div.hero {margin-bottom:2.5em; min-height:390px; background:#000;}
#product-col-one div.p-info {background:#000;}
/*The shot of the main product is styled by the hero div - same as on the sub category page. However here we have overridden the min-height and background colour*/

/*This styles the list of the product photos*/
ul.product-pics {margin-bottom:2.5em;}
ul.product-pics li {display:inline; padding-right:2px;}

/*This styles the list of the products in different colours*/
ul.variants {margin-bottom:1em; width:365px;}
ul.variants li {width:168px; border:solid 1px #282828; display:block; position:relative; float:left; margin:0 11px 1em 0; min-height:195px; text-align:center; padding:0 0 1.2em 0;}

/*This holds the right col of contents*/
#product-col-two {float:right; width:334px; margin-bottom:3em;}
/*Each list of the product details are contained in a div.details to easily move and control them.*/
div.details {clear:both; margin-bottom:2em;}
div.details.left {float:left; width:150px;}
/*This inner div is for floating some of the details div to the right*/
#product-col-two div.inner {float:right; width:150px;}
/*This puts the bullets onto the text lists.*/
#product-col-two ul li {background:url(../../css_images/bullet.gif) no-repeat 0 6px; padding:0 0 5px 10px; line-height:1.2em; font-size:1.2em;}
/*This takes the bullets off the ones that hold images*/
#product-col-two ul.imgs li {display:inline; padding-right:2px; background:none; padding:0;}


/*
=============================
STATIC PAGES
NOTES: For pages such as about us - 2 col layout. 

 ____ __ 
|    |  |
|____|__|
=============================
*/

.content-img {margin-bottom:2em;}
div.main {float:left; width:402px; margin-bottom:2em;}
div.main ul li {background:url(../../css_images/bullet.gif) no-repeat 0 6px; padding:0 0 5px 10px; line-height:1.2em; font-size:1.1em;}
div.main blockquote {font-size:1.3em; margin:0 0 2em 0;}
div.main p {font-size:1.2em;}

/*Sidebar area*/
div.cta-areas {float:right; width:270px;}

/*Styles the call to action boxes on the about us page*/
div.cta-areas ul li {background:#330000; margin-bottom:2.8em;}
div.cta-areas ul li img a {border:none;}
div.cta-areas ul li h2 {margin:5px; font-size:1.4em;}
div.cta-areas ul li p {font-size:1.1em; margin:5px; padding-bottom:12px;}

/*Styles the call to action boxes on the contact us page. this list needs class="plain" on it*/
div.cta-areas ul li.plain {background:#330000; margin-bottom:2.8em; padding:5px 9px; border-top:solid 1px #666; border-bottom:solid 1px #666;}
div.cta-areas ul li.plain h2 {font-size:1.5em; margin:0 0 .5em 0;}
div.cta-areas ul li.plain p {font-size:1.1em; margin:0 0 .5em 0; padding-bottom:0; line-height:1.2em;}
div.cta-areas ul li.plain dl {width:20em; margin:0 0 .5em 0; min-height:3em;}
div.cta-areas ul li.plain dl dt {width:9em; padding:0; margin:0; line-height:1.5em; float:left; font-weight:normal;}
div.cta-areas ul li.plain dl dd {line-height:1.5em; margin:0; color:#FFFFFF;}

/*
=============================
FORMS 
NOTES: This is for the service call form. Make sure it also has a class of form along with main:  <div class="main form">
=============================
*/

/*These few lines are for the service call form only. Setting widths of the textfields*/
div.main.form .textfield {width:300px;}
div.main.form .textfield.small {width:150px;}
div.main.form .dropdown {width:200px;}
div.main.form .dropdown.small {width:75px;}

/*
The folowing CSS classes are for ALL forms created. You can uses these classes to apply the same look. 
You'll just need to create new CSS for the width's of the text fields or any other custom styles. 
Do not add custom styles here *unless you want ALL form elements to be affected.
*/
.formrow {margin-bottom:1em;}
label {display:block; font-size:1.2em; font-weight:normal; padding:0 0 .3em 0;}
p label {font-size:1.1em;}
.textfield, textarea, .dropdown {border:2px solid #330000; background-color:#FFF; font-size:1.1em; padding:.2em; width:362px;}
input, textarea {display:block;}
textarea {font-size:1.5em;}
input.button {margin:2em 0 0 0;}
div.form em {color:#FFFFCC; font-weight:bold;}
.msg {font-size:1em!important; padding:5px 0;}
.error {color:#FFFFCC; background:#330000;}
.alert label {color:#FFFFCC; font-weight:bold;}
.alert input {border:solid 1px #FF0000; background:#FFFFCC;}
.inline {display:inline;}


/*
=============================
INNER FOOTER
NOTES: This is for the footer that sits in the main content area:
Call us to discuss your individual needs on 01949 862010 or email mydreamkitchen@cda.eu
=============================
*/

#inner-footer {clear:both; width:954px; margin:auto; text-align:left; height:37px; background:#663300}
#inner-footer p {padding:5px 0 0 10px; font-size:1.2em;}
#inner-footer p strong {color:#FFF;}

/*
=============================
FOOTER
NOTES: This is the last footer on the page with the bottom nav in it.
=============================
*/

#footer {clear:both; width:954px; margin:auto; text-align:left; height:20px; padding:8px 0 0 0; margin-bottom:2em; background-color:#330000;}
#footer ul {float:left; list-style-type:none; margin:0; padding:0; width:665px;}
#footer ul li {margin:0; padding:0 5px; display:inline; list-style-type:none; border-right:solid 1px #FFF;}
#footer ul li.first_nav_foot {padding:0 5px 0 0;}
#footer ul li.last_nav_foot {border-right:none;}
#footer ul#author {width:auto; float:right; margin:0; padding:0; list-style-type:none;}
#footer ul#author li {margin:0; padding:0; list-style-type:none; border-right:none;}
#footer a {text-decoration:none; font-size:1em;}
#footer a:hover {text-decoration:underline;}

#footer .footer_logo{float:right;}

a.blacklink { color: #000; font-weight: bold; }

div.main ul li.newsitem { list-style-type: none; background: none; padding: 0;}
div.main ul li.newsitem h3 { border-bottom: 0px; font-size: 0.9em; }
li.jobsitem { list-style-type: none; background: none; padding: 0;}
li.jobsitem h3 { border-bottom: 0px; font-size: 0.9em; }

.hlphdr1, .hlpbdy1 { text-align: left; }
.zoommessage {font-size:0.9em;}

/*Site map  */
#sitemap{overflow:hidden;}
#sitemap div{width:200px;float:left;}
#sitemap div ul{margin:0 0 10px 0;}
#sitemap div ul li.heading{font-weight:bold;}
/* Site map end */

/* product registration */
.hide{display:none;}
.oneline{overflow:hidden;margin:15px 0 0px 0;width:305px;}
.oneline label{float:left;margin:3px 10px 0 0;}
.oneline input{float:left;}
.oneline a{font-size:1.1em;}

.sublabel{font-size:1.2em;width:270px;}
.category_heading{margin-bottom:5px;color:#FFF;}

#add_remove_appliance{margin-bottom:25px !important;margin-bottom:15px;}
.add_appliance , .remove_appliance {margin-bottom:5px;}
.add_appliance a, .remove_appliance a{text-decoration:none;color:#909090;font-weight:bold;}
.add_appliance a img, .remove_appliance a img{margin-right:5px;}
#divide_appliance{margin:20px 0 10px 0;width:306px;border-top:1px dotted #FFF;}
/* product registration */

/* Trade customers login */
#downloadPdf{background-image:url('../../_images/trade/download_pdf_btn.jpg');width:120px;height:25px;}
#downloadExcel{background-image:url('../../_images/trade/download_excel_spreadsheet_btn.jpg');width:205px;height:25px;}
.linkButtons{background-repeat:no-repeat;margin-bottom:10px;}
.linkButtons a{display:block;height:25px;width:auto;}
.incorrectLogin{margin: 5px 0;padding:5px 5px 5px 0px;color:#FF3300;font-weight: bold;}

.tradeContainer{width:auto;overflow:hidden;margin:25px 0 0 0;}
table.trade{width:150px;float:left;margin:0 20px 20px 0;padding:0px;border-top:solid 1px #282828;}
table.trade tr td{padding:3px 3px 10px 3px;border:solid 1px #282828;border-top:none;}

/* Trade customers login */

/* Download user manual */
#register{display:none;}
#manualResult{margin-bottom:30px;display:none;}
#manualResult h2{margin-bottom:0px;padding-bottom:0px;}
#manualResult h5{color:#FFF;font-size:1.2em;}
#manualResult p{font-size:1.3em;}
#manualResult p.info-error{font-size:1.1em;color:#FF3300}
#manualSearchButton{display:none;}
/* Download user manual */