/* callde.co.uk main style sheet */

/* ******************************************************************************************************** */
/*	Common styles for whole site																			*/
/* ******************************************************************************************************** */

/* Font sizes are set as percentages so vary the % value to increase or decrease the font */
/* Colours: #FFFFFF is white, #000000 is black, #EEEEE is very light grey */  

body {
	background-color: #FFFFFF;
	color: #000000;
	font-size: 100% ;
	font-family: Verdana, Arial, "Lucida Grande", sans-serif;
	margin: 0;									/* use whole screen */
	padding: 0;									/* use whole screen */
	min-width: 900;							/* introduce scroll bars when width goes below this value. Above this, content squashes if wider than window */
}

img {
	border-style: none;							/* Never put borders around images even when they are links */
}

h1, h2 {										
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight: normal;
	line-weight: 1em;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #0B0B61;
}

/* ******************************************************************************************************** */
/*	Page Header and Site Menu at top of page																*/
/* ******************************************************************************************************** */

#header_logo, #header_menu, #container {
	max-width: 1500px;							/* set to avoid centre becoming too wide on wide screen PCs */
}

#header_logo {
	background-color: #FFFFFF;
	text-align: center;
	padding: 0px;
}

#header_menu {
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	text-align: center;
	font-size: 75%;
	margin-top: 0px;
	margin-bottom: 0px;
}

ul.topmenuul {
	list-style-type: none;
}

li.topmenuli {
	display: inline;
}
li.topmenuli a { 
	width:100px;
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bold;
	background:#0000AA;
	padding:5px;
	margin: 5px;
}

li.topmenuli a:hover{
	background:#58ACFA;
}

/* *************************************************************************************************************** */
/*	Styles for overall container (everything below headers) and central content (in between leftmenu and rightads) */
/* *************************************************************************************************************** */

#container {
	background-color: #FFFFFF;
	position: relative;							/* this is required to keep other absolute divs in place, eg leftmenu BUT DOES NOT WORK IN IE6 so see next line */
	zoom: 1;									/* this is required to make IE6 display the left menu in the right place */
}

#decontent {									/* note that this div is not absolutely positioned */
	margin-top: 0px;
	margin-right: 190px;
	margin-bottom: 0px;
	margin-left: 190px;							/* keep this in sync with leftmenu width. Should be leftmenu width +15 */
	text-align: center;	
	z-index: 2;									/* a higher indexed object will display on top of a lower indexed object but does not seem to work */
}

/* ******************************************************************************************************** */
/*	Styles for left hand menu bar																			*/
/* ******************************************************************************************************** */

#leftmenu {										/* this is for the menu bar on the left of the screen */
	position: absolute;							/* position the menu at a fixed place in container */
	left: 0;									/* extreme left of container */
	top: 0;										/* extreme top of container */
	width: 175px;								/* if this changes, change #content margin to be the same +15 */
	background-color: #FFFFFF;					/* very light grey */
	border-top: 0px;
	border-right: 1px solid #FFFFFF; 			/* border around menu bar */
	border-bottom: 1px solid #FFFFFF; 			/* border around menu bar */
	border-left: 1px solid #FFFFFF; 			/* border around menu bar */
	padding-right: 5px;							/* keep this fairly small otherwise will cause menu bar to overlap main content */
	z-index: 4;									/* keep this on top. a higher indexed object will display on top of a lower indexed object but does not seem to work */
}

#leftmenu ul {
    list-style-type:none;						/* remove the bullets */
    margin-top: 20px;							/* move the menu down a bit from the header */
/*  margin-left: 5px; */						/* see leftmenu li setting. */
}

#leftmenu p.grouping {
	margin-left: -10px;							/* Unless a negative value is used, IE and ffox indent too far to the right.  */
	white-space: nowrap;						/* Stop menu items wrapping around if menu bar too narrow and looking messy */
	font-size: 80% ;			
	margin-top: 10px;							/* Space out each menu item */
	margin-bottom: 0px;
}

#leftmenu li a {
	color:#000000;
	font-size: 65% ;			
	margin-left: -10px;							/* Unless a negative value is used, IE and ffox indent too far to the right.  */	
	font-weight: bold;
}

#leftmenu li a:link, a:visited {	
	text-decoration: none;						/* remove the underlines from menu links */
}

#leftmenu li a:hover {
	color:#3000A4;								/* Blue. Change the menu item colour while mousing over the menu */
	background: #58ACFA;						/* Highlight the menu item link while mousing over the menu */
}

/* ******************************************************************************************************** */
/*	Styles for right hand ads bar																			*/
/* ******************************************************************************************************** */


#rightads {										/* this is for the adverts on the right of the screen */
	overflow: hidden;
	position: absolute;							/* position the ads at a fixed place in container */   /* **** but this makes the rightside float OVER the content **** */
	right: 0;									/* extreme right of container */
	top: 0;										/* extreme top of container */
	margin-top: 20px;							/* set a margin at top of bar */
	margin-right: 20px;
	width: 160px;								/* set a suitable width for the advert images */
	text-align: center;	
	z-index: 1;									/* keep this underneath. a higher indexed object will display on top of a lower indexed object but does not seem to work */
}

#rightnoads {									/* this is for the column on the right of the screen on category & search pages where there are no ads*/
	overflow: hidden;
	position: absolute;							/* position the menu at a fixed place in container */   /* **** but this makes the rightside float OVER the content **** */
	right: 0;									/* extreme right of container */
	top: 0;										/* extreme top of container */
	margin-top: 20px;							/* set a margin at top of bar */
	width: 1px;									/* set a minimim width as this is just a placeholder */
	text-align: center;	
	z-index: 1;									/* keep this underneath. a higher indexed object will display on top of a lower indexed object but does not seem to work */
}

/* ******************************************************************************************************** */
/*	Main front (index) Page styles (may not be used)														*/
/* ******************************************************************************************************** */

p.front {
	color: #AAAAAA;								/* Light Grey */
	font-size: 100% ;
	margin-top: 50px;
	margin-bottom: 50px;	
}

#frontfooter {									/* this is for the footer at the bottom of the main screen */
	margin: 0 190px;			
	background-color: #ADDFFF;					/* Light Blue */
	border: 1px solid #151B54;					/* Navy Blue */
	text-align: center;
	font-size: 65%;
}

/* ******************************************************************************************************** */
/*	Styles for Central Area of Category List Page including search page										*/
/* ******************************************************************************************************** */

#decatcontent {									/* note that this div is not absolutely positioned */
	margin-left: 200px;  						/* keep this in sync with leftmenu width. */
	margin-right: 100px;
	text-align: center;	
	z-index: 2;									/* a higher indexed object will display on top of a lower indexed object but does not seem to work */
}

p.decatbanner {									/* Ad banner at top of page */
	margin-top: 0px;
	margin-bottom: 15px;
	text-align: center;
}

table.catfilter {								/* This is for the filter area on the category page */
	color: #0404B4;
	font-size: 75%;
	text-align: left;
	vertical-align: middle;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background: #CBDAFF;
	margin: 0;
	padding: 0px 5px 5px 5px;
}

h3.catfilterh {									/* Filter - 'search in xyz category' */			
	font-size: 150%;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	text-align: left;
	vertical-align: top;
}
td.catfiltertd1 {								/* Filter - search in xyz category (unused for now as element is an h3 (see above))*/
	color: #000000;
	font-size: 150%;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	padding-bottom: 20px;
}
td.catfiltertd2 {								/* Filter - tip on searching */	
	color: #000000;
	font-size: 85%;
	font-weight: normal;
	text-align: right;
	vertical-align: bottom;
	padding-bottom: 10px;
	margin-top: 0px;
	padding-top: 0px;
}
td.catfiltertd3 {								/* Filter - select list headers */	
	color: #0000FF;
	font-size: 100%;
	font-weight: normal;
	text-align: left;
	vertical-align: bottom;
	padding-bottom: 0px;
	margin-top: 0px;
	padding-top: 0px;
}

select {										/* Filter - drop down lists for category filter and searches */
	font-style: normal;
	font-size: 7pt;
	font-family: Arial, Helvetica;
}

td.catfiltertd4 {								/* Filter - Free email quotation */
	color: #0000FF;
	font-size: 90%;
	font-weight: normal;
	text-align: right;
	vertical-align: middle;
	padding-bottom: 10px;	
}

td.catfiltertd4 a {								/* Filter - Free email quotation link */		
	font-size: 120%;
	font-weight: bold;
}
td.catfiltertd5 {								/* Filter - select cell */
	color: #0000FF;
	font-size: 75%;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
	padding-bottom: 10px;	
}
td.catfiltertd6{								/* Filter - cell with go/clear/sort images */
	color: #0000FF;
	font-size: 75%;
	font-weight: normal;
	text-align: right;
	vertical-align: middle;
	padding-bottom: 10px;	
}

table.cattable {								/* This is for the table showing the returned list of products in a category, eg dishwashers */
	padding: 0;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border-style: outset;
	border-color: #EEEEFF;
	border-width: 1px;
}
td.cattableth, td.cattabletd, td.cattabletdmo, td.cattabletdpr {		/* Thiese are the rows for the list of products in a category, eg dishwashers*/
	border-style: inset;
	border-color: #EEEEFF;	
	border-width: 1px;
	padding: 6px 6px 6px 12px;
	color: #000080;
	font-size: 75%;
	font-weight: normal;
	text-align: left;
}
td.cattableth {									/* This is the header row for the list of products in a category, eg dishwashers*/
	font-weight: bold;
	font-size: 75%;
	text-align: left;
}
td.cattabletdmo, td.cattabletdpr {				/* This is the detail row for the list of products in a category, eg dishwashers*/
	font-weight: bold;
	color: #0000FF;
}
td.cattabletd p {								/* Category repeated with different font in Make cell */
	font-size:75%;
	padding:0;
	margin:0;
	font-weight: normal;
}
td.cattabletdpr p {								/* Special offer highlighted in red in Price cell */
	color: #FF0000;
	padding:0;
	margin:0;
}
td.cattabletd:hover, td.cattabletdmo:hover, td.cattabletdpr:hover  {	/* This is the detail row for the list of products in a category, eg dishwashers*/
	background: #CEE3F6;						/* Light Blue. Highlight the cell while mousing over the menu */
}

/* ******************************************************************************************************** */
/*	Product Category and Detail Page Styles																	*/
/* ******************************************************************************************************** */

#catfooter {									/* this is for the footer at the bottom of the category listing screens */
	background-color: #FFFFFF;
	color: #000000;
	text-align: center;
	font-size: 90%;
	margin-left: 50px;
	margin-right: 50px;
}
p.catspares {					
	color: #000080;
	font-size: 90% ;
	margin-top: 20px;
	margin-bottom: 40px;	
}
p.catfoot {
	color: #000080;
	font-size: 80% ;
	margin-top: 20px;
	margin-bottom: 20px;	
}
p.homelinks, p.secureordering, p.freequote, p.resrights {
	color: #224466;
	font-size: 80% ;
	margin-top: 20px;
	margin-bottom: 20px;	
}
p.homelinks a {
	color: #0000FF;
}

/* ******************************************************************************************************** */
/*	Product Detail Page Styles																				*/
/*	Style names are all prefixed with 'dp_' for 'detail page'												*/
/* ******************************************************************************************************** */

p.dp_producthdr {								/* Header above content area  */
	color: #000000;							
	font-size: 150%;
	font-weight: normal;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: bold;
	font-family: arial, verdana, sans-serif;
	text-decoration: underline;
}

h1 {								/* h1 Header above content area  */
	color: #000000;							
	font-size: 150%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 900;
	font-family: arial, verdana, sans-serif;
	text-decoration: underline;
}

h2 {								/* h2 Under Image  */
	border-top: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-left: 1px solid #C1DAD7;
	color: #0404B4;
	font-size: 70%;
	font-weight: bold;
	vertical-align: top;
}



table.dp_productinfo {							/* Whole Product Detail Content  */
	padding: 5px 5px 5px 5px;
	color: #0404B4;
	font-size: 100%;
	font-weight: normal;
	text-align: center;
}

/* ******************************************************************************************************** */

td.dp_manulogo {								/* Manufacturer's Logo - Top Left Cell */	
	border-top: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-left: 1px solid #C1DAD7;
	color: #0404B4;
	font-size: 85%;
	vertical-align: top;
}
p.dp_manuspof {
	color: #A41539;
	font-size: 110%;
	font-weight: bold;
	
}

p.dp_manulogo, p.dp_simrellink {
	color: #000080;							  
	font-size: 85%;
	font-weight: bold;
}

}

p.dp_sitemaplink {
	color: #000080;							  
	font-size: 50%;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
}

/* ******************************************************************************************************** */

td.dp_ourprice {								/* Our Price - Whole Top Right Cell - defined in main product page */
	border-top: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	color: #000000;
	font-size: 100%;
	font-weight: bold;
	font-style: normal;
}

td.dp_ourpricetx {								/* Our Price cell - actual price -  Top Right Cell - defined in defindourprice.asp */
	color: #A41539;
	font-size: 250%;
	font-weight: bold;
	font-style: normal;
	margin-top: 10px;
	padding-top: 10px;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

p.dp_ourpricep {								/* ** not used ** Our Price paragraph - actual price -  Top Right Cell */
	color: #0000FF;
	font-size: 150%;
	font-weight: bold;
	font-style: normal;
	margin-top: 10px;
	margin-bottom: 10px;
}

td.dp_competpr {								/* Our Price call - Competitor price in Top Right Cell */
	color: #184AA6;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
}

td.dp_oursave {									/* Our Price call - Our Saving in Top Right Cell */
	color: #A41539;
	font-size: 110%;
	font-weight: normal;
	font-style: normal;
}

td.dp_prcheck {									/* Our Price cell - Date last checked in Top Right Cell */
	color: #A4A4A4;
	font-size: 60%;
	font-weight: normal;
	font-style: normal;
}

p.dp_features {									/* Features table - Lower Top Right Cell */
	color: #000000;							
	font-size: 75%;
	font-weight: bold;
	text-decoration: normal;					/* change this to underline if required */
	text-align: left;
	padding-left: 10px;
	margin-bottom: 2px;
}

table.dp_featurestab {							/* Features table - Lower Top Right Cell */
	border-width: 1px;
	border-spacing: 3px;
	border-style: outset;
	border-color: #C1DAD7;
	border-collapse: separate;
	border-style: outset;	
	background-color: white;
	color: #666666;							
	font-size: 75%;
	font-weight: bold;
	font-style: normal;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 8px;
}

td.dp_featurestd {								/* Features table - individual cell - */	
	border-width: 1px;
	padding: 1px;
/*	border-style: inset;  */
	border-color: #C1DAD7;
}

td.dp_featurestd a {								/* Features table - individual cell - */	
	font-weight: normal;
}

/* ******************************************************************************************************** */

p.dp_proddesc {									/* Product description in centre of page */
	color: #000000;						
	font-size: 80%;
	font-weight: normal;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: left;	
}

/* ******************************************************************************************************** */

table.dp_mainprice {							/* Section showing online price and warranty details */
	color: #000000;
	font-size: 100%;
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 5px;
}

td.dp_mainprice {								/* This covers everything in definddata.asp  */
	color: #DDDDDD;
	font-size: 100%;
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 5px;
}

p.dp_mainpricehdr {
	color: #000000;
	font-size: 110%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
}

td.dpmainpricedet {
	color: #0404B4;							
	text-align: center;
}
p.dp_localdel a {
	color: #0000FF;
	font-size: 100%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: underline;
}

table.dp_onemodel {								/* dp_onemodel* are the styles for displaying the models (see also dp_multimodel) */
	border-width: 1px;
	border-spacing: 3px;
	border-style: outset;
	border-color: #0000FF;
	border-collapse: separate;
	border-style: outset;	
	background-color: #CCCCCC;						
	color: #000000;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: normal;
	width: 75%;
}

td.dp_onemodelhdr {
	color: #000000;
	font-weight: bold;
	font-size: 90%;
	padding: 4px;
}

td.dp_onemodeldet {
	font-weight: normal;
	font-size: 90%;
	padding: 4px;
}

td.dp_onemodeldesc {
	color: #0404B4;
	font-weight: normal;
	font-size: 75%;
	padding: 4px;
}

td.dp_onemodelnofind{
	color: #38610B;
	font-weight: normal;
	font-size: 125%;
	padding: 4px;
}

p.dp_infoprompt {
	color: #0404B4;
	font-weight: normal;
	font-style: italic;
	font-size: 75%;
	margin-top: 8px;	
	margin-bottom: 8px;
}

p.dp_stephdr {
	color: #A41539;
	font-weight: bold;
	margin-top: 8px;	
	margin-bottom: 0px;
	text-align: left;
}

p.dp_steptxt {
	color: #000000;
	font-weight: normal;
	font-size: 65%;
	margin-top: 0px	;
	margin-bottom: 8px;
	text-align: left;	
}

p.dp_collect {
	color: #000000;
	font-weight: normal;
	font-size: 90%;
	margin-top: 0px	;
	margin-bottom: 8px;
	text-align: center;	
}

p.dp_backtotop {
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
p.dp_backtotop a {
	font-size: 65%;
	text-decoration: underline;
}

p.dp_backtotop a:visited {
	text-decoration: none;
}

p.dp_delchgtxt {
	color: #0000FF;
	font-weight: bold;
	font-size: 100%;
	margin-top: 0px	;
	text-align: center;	
}
p.dp_delchgprompt {
	color: #000000;
	font-weight: normal;
	font-size: 75%;
	text-align: center;	
}


/* ******************************************************************************************************** */

td.dp_multimodel {									/* this is the cell containing the drop down list where there are multiple models  */
	background: #FFFFFF;
	color: #0404B4;
	font-size: 100%;	
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	border-style: none;	
}

select.dp_multimodelsel {							/* this is for the actual drop down list where there are multiple models - BUT ...  */
	background: #FFFFFF;							/* this whole style is not used for now, instead replaced ith inline styling in definddata */ 
	font-family: monospace;							/* to cater for different browsers handling select lists differently */
	font-size: 75%;									
	text-align: left;
}

/* ******************************************************************************************************** */

table.dp_wtyopttab {								/* warranty options table for all model variations */
	width: 75%;
	border-width: 1px;
	border-spacing: 3px;
	border-style: outset;
	border-color: #0000FF;
	border-collapse: separate;
	border-style: outset;	
	background-color: #CCCCCC;						
	color: #000000;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: normal;
}

td.dp_wtyopthdr {
	color: #000000;
	text-align: left;
	font-weight: bold;
	font-size: 75%;
	padding: 4px;
}

td.dp_wtyoptdet {
	color: #000000;
	text-align: left;
	font-size: 75%;
	padding: 4px;
}

/* ******************************************************************************************************** */

p.dp_addlinfo {								/* Additional Info */
	color: #000000;							
	font-size: 100%;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
	text-align: center;
}

p.dp_spoffers {								/* Special Offers */
	color: #000000;							
	font-size: 75% ;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;
}

p.dp_promos {								/* Manufacturers Promotions */
	color: #000000;							
	font-size: 75% ;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;
}

td.dp_extraimg {							/* Extra Images - Bottom Left Cell */	
	border-top: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-left: 1px solid #C1DAD7;
	padding: 6px 0px 6px 0px;
	color: #0404B4;
	font-size: 90%;
	font-weight: normal;
	text-align: center;
	vertical-align:text-top;
}

td.dp_extrainfo {							/* Extra Information - Bottom Right Cell */
	border-top: 1px solid #C1DAD7;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	color: #000000;							
	font-size: 100% ;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;
	vertical-align: top;
}

p.dp_extrainfop {							/* Extra Information paragraphs - Bottom Right Cell */
	color: #000000;							
	font-size: 100%;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: 10px;
	text-align: center;
}

ul.dp_extrainfoul li {						/* Extra Information Lists - Bottom Right Cell */
    list-style-type:disc;					/* standard bullets */
    margin-top: 0px;						/* space out the list items from each other */
    font-size: 75%;
    color: #000080;
    text-align: left;
}

li.dp_extragrp {							/* This is for different groupings in the list */
    font-size: 90%;
    font-weight: bold;
}

p.dp_relatedhdr a {							/* Similar and Related Items Link Header */
	color: #0000FF;							
	font-size: 100% 
	font-weight: normal;
	text-align: center;
}

p.dp_related, p.dp_relatedimg  {			/* Similar and Related Items */
	color: #000000;							
	font-size: 75% ;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top 20px;
	padding-bottom: 20px;
	text-align: center;
}

p.dp_related a {							/* Similar and Related Items */
	color: #0000FF;							
}

p.dp_spares a {								/* Spares */
	color: #FF0000;
	font-weight: bold;
	font-size: 90% ;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;
}
p.dp_stdlink a {
	color: #0000FF;
	font-weight: normal;
	font-size: 80% ;
}
/* ******************************************************************************************************** */
/*	End																									*/
/* ******************************************************************************************************** */