﻿/********************************************************************

	Color's and graphics (colors-graphics.css) - 
		overrides for preceeding stylesheets:
			layout.css
			content-format.css
			mega-menu.css

	Contents (remember in CSS order matters - a lot!
	
			 Standard elements 
			 Division control, i.e 2 and 3 columns created by 
			 	cuss
			 Div related - the box that lists relevant links
			 General utility styles suc as .no-dec and more 
			 
**********************************************************************/
	

/********************************************************************
	 O V E R R I D E S   F O R  L A Y O U T . C S S
**********************************************************************/

/* BOX 4 ********************************************************************************************************************************/

/* inner CSS *//**/
.box4-4		{ background: url('../graphics/box4_4.jpg') repeat-y right top; 	} /* right vertical side of the bar */
.box4-8		{ background: url('../graphics/box4_8.jpg') repeat-y left top;  }		 /* left vertical side of the bar */
.box4-5		{ background: url('../graphics/box4_5.jpg') no-repeat right bottom; }
.box4-7		{ background: url('../graphics/box4_7.jpg') no-repeat left bottom; }

	/* Top corners and border */
	/* Top bar and right corner */
.bt4 			{ height:46px; 	margin:0px 0px 0px 30px; 			background:url('../graphics/box4.png') no-repeat 100% 0; }
	/* Top bar left corner only */
.bt4 div		{ 
	height:46px; 	left:-30px; width:30px; 			background:url('../graphics/box4.png') no-repeat 0 0;
   position:relative; font-size:0;line-height:0;
}
 
	/* Bottom corners and border */
	/* Bottom bar and right corner */
.bb4			{ height:36px; 	margin:0px 0px 0px 30px; 			background:url('../graphics/box4.png') no-repeat 100% 100%; }
	/* Bottom bar left corner only */
.bb4 div {
	  height:36px; 	left:-30px; width:30px; 			background:url('../graphics/box4.png') no-repeat 0 100%; 
	  position:relative;   font-size:0; line-height:0;
}

/* Left border */
.i14 { padding:0px 0px 0px 9px;	background:url('../graphics/box4_l.png') repeat-y 0 0; }

/* Right border */
.i24 { padding:0px 9px 0px 0px;	background:url('../graphics/box4_r.png') repeat-y 100% 0; }

/* -------------------------- footer styles --------------------- */
#page-footer-content									{color: #271104;}
#page-footer-content p								{color: #271104;}
#page-footer-content a								{color: #333333;  text-decoration: none; }
#page-footer-content a:visited					{color: #333333;  text-decoration: none; }
#page-footer-content a:hover						{color: #000000;  text-decoration: underline; }
#page-footer-content a:active						{color: #000000;  text-decoration: none; }

/* ---------------------  css heading image -----------------------*/
/*icons*/
#icons a:visited						{color: #303F28;}
#icons a:hover							{color: #57563C;}
#icons a:active						{color: #303F28;}
 
/* -------------------------- Global styles --------------------- */
input									{color: #34391c;}
a:visited 							{color:gray;}
a:hover 								{color:red;}

/* FONT STYLES ***************************************************************************************/
input.button:active 		{border-color: #28292D;}
button:active 				{border-color: #28292D;}
input.button.primary:active {border-color: #28292D;}

/* footer styles - do not edit */
#page-footer {
	width: 100%;	padding: 0px; background: url('../graphics/footer_bg.jpg') repeat-x center top;
}
.clear {
	min-width:990px; max-width:1280px; margin-left:auto; margin-right:auto; clear:both; height:0px;
}

/******************************************************* */
.box4-6 { background: url('../graphics/box4_6.jpg') repeat-x left bottom; }
.box4-5 { background: url('../graphics/box4_5.jpg') no-repeat right bottom; }
.box4-7 { background: url('../graphics/box4_7.jpg') no-repeat left bottom; }
.box4-1									{background: none;}

/* BOX 4 ********************************************************************************************************************************/
/*********************************************************************************************************************************/

/*********************************************************************************************************************************/
/* BOX 1 ***************************************************************************************************************************/

/* inner CSS *//**/
.box1-inner			{ background: url('../graphics/box1_0.jpg'); min-height:20px; } 					/* fills whole box with brown. */
.box1-2				{ background: url('../graphics/box1_2.jpg') repeat-x left top; vertical-align:top; } /* 200px high vertical gradient fill from top, overlays .box1-inner */
.box1-6				{ background: url('X../graphics/box1_6.jpg') repeat-x left bottom; } /* horizontal brown band, appears to do nothing */
.box1-4				{ background: url('../graphics/box1_4.jpg') repeat-y right top; }    /* Adds border to right side and covers up the right side of gradient fill */
.box1-8				{ background: url('../graphics/box1_8.jpg') repeat-y left top; }	/* Adds border to left side and covers up the left side of gradient fill */
.box1-5				{ background: url('X../graphics/box1_5.jpg') no-repeat right bottom;  } /* Duplicate of box1_4 */
.box1-7				{ background: url('X../graphics/box1_7.jpg') no-repeat left bottom; }		 /* Duplicate of box1_8 */
/*
	.box1-3			{ background: url('../graphics/box1_3.jpg') no-repeat right top; vertical-align:top; }  Restoresd right-side gradient with right border 
	.box1-1			{ background: url('../graphics/box1_1.jpg') no-repeat left top;  vertical-align:top; padding:0px; } Restoresd left-side gradient with left border 
*/
.box1-1				{ background: url('../graphics/box1_2.jpg') repeat-x left top; vertical-align:top; } /* 200px high vertical gradient fill from top, overlays .box1-inner */

	/* Top corners and border */
.bt 					{height:36px; 	margin:0px 0px 0px 30px; 			background:url('../graphics/box1.png') no-repeat 100% 0; }
.bt div 				{height:36px; 	left:-30px; width:30px; 			background:url('../graphics/box1.png') no-repeat 0 0; position:relative; font-size:0;line-height:0;}



 
	/* Bottom corners and border */
.bb 					{height:36px; 	margin:0px 0px 0px 30px; 			background:url('../graphics/box1.png') no-repeat 100% 100%; }
.ORIGINAL_bb div 	{height:36px; 	left:-36px; width:30px; 			background:url('../graphics/box1.png') no-repeat 0 100%; position:relative;   font-size:0; line-height:0; }
.bb div 				{height:36px; 	left:-39px; width:39px; 			background:url('../graphics/box1.png') no-repeat 0 100%; position:relative;   font-size:0; line-height:0;}

	/* Left border shadow  */
.i1 					{padding:0px 0px 0px 9px;							background:url('../graphics/box1_l.png') repeat-y 0 0; }
	/* Right border shadow */
.i2 					{padding:0px 9px 0px 0px;							background:url('../graphics/box1_r.png') repeat-y 100% 0; }

	/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 					{background:url('../graphics/box1_bg.png');}

.xbox1-content h3	{color: #271104; 	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 	font-size:16px; margin: 0px 0px 0px 0px; 	padding:12px 0px 13px 22px;	font-weight:normal;}
.box1-content		{color: #271104;	font-family:"Trebuchet MS", Geneva, sans-serif;	font-size:12px;	margin: 0px 0px 0px 0px;	padding:0px 10px 10px 15px;	min-height: 100px;	vertical-align: top;}

.box1-content a:visited		{color: #271104; 	text-decoration:underline;}
.box1-content a:hover		{color: #000000; 	text-decoration:none;}
.box1-content a:active		{color: #271104; 	text-decoration:underline;}

.box-simple-brown {
		background-color:  white ;
		border: 1px solid #845119; /* #eac884 */
	  	padding: 2px;
		margin-right: auto; margin-left: auto; text-align: left;
		margin: 6px 10px 6px 10px;
}
.box-simple-brown>div { margin-top: 1em; margin-bottom: 1em; }
.box-simple-brown p {margin: 0.3em 1em 0.3em 1em ; padding: 0; font-size: 76%; line-height:normal; color:#845019 }
.box-simple-brown p span { color: red; font-weight: bold; }

/* Shadow created by nested div. First used on buy now page for Guarantee
   then for the top box on in the right colum.
*/
.box-dbl-shadow {
		background-color:  white ;
		border: 			1px solid #845119; /* #eac884 */
	  	padding: 		1px;
		width: 			80%;
		margin-right: auto; margin-left: auto;
		text-align: 	left;
/*		margin: 6px 0px 6px 10px; */
		margin-top: 	20px;
}
.box-dbl-shadow > div { position: relative; top: -1px; left: -1px; padding: 0.1em; background-color: white; }
.box-dbl-shadow > div > div { margin-top: 1em; margin-bottom: 1em; }
.box-dbl-shadow p {margin: 0.3em 1em 0.3em 1em ; padding: 0; font-size: 76%; line-height:normal; color:#845019 }
.box-dbl-shadow p span { color: red; font-weight: bold; }



/*.whatsnew-rightcol  { margin-top: 0.5em; }*/
.whatsnew-rightcol .box1-content h3 { position:relative; top: -18px; left: 8px; margin: 0; padding: 0; font-size:120%; } /*  left: 76px;*/
.whatsnew-rightcol .box1-content h4 { margin: 0em 0 0.3em 0; text-align: center; padding:  0em 0 0 0;  font-weight: bold;} /* Date   */
.whatsnew-rightcol .box1-content h5 { margin-bottom: 0; margin-top: 0; padding: 0; font-weight: bold; } /* item header*/

/* BOX 1 ***************************************************************************************************************************/
/*********************************************************************************************************************************/

	/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	background-color: black; /*transparent url(/tools/img/tooltip/black_arrow.png);*/
}

/* ****************************************
		For the ZOOM search box
******************************************/
input.search_text {
	height: 18px;
	font-size: 120%;
   color:#050;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;
}

/********************************************************************
	 O V E R R I D E S   F O R  C O N T E N T - F O R M A T . C S S
**********************************************************************/
p 					{ color: #000000; }
	

/********************************************************************
			 Division control, i.e 2 and 3 columns created by css
**********************************************************************/

.div_half_right p, 			.div_half_left p,
.div_half_right a:link, 	.div_half_left a:link,
.div_half_right a:hover, 	.div_half_left a:hover,
.div_half_right a:visited, .div_half_left a:visited
{ 
	 color: maroon;
}

/********************************************************************
			Two column (tc) elements, section, header, item
			 (Though these are used --Oct-2011 - in the sitmap.htm)
**********************************************************************/
.sitemap-links { color: #663300; }

.img-title-top-center { color: #000000; }
.item-description:first-line { color: #996600; }

		/****************************************************************************/
		/*	 STYLES FOR       E X P A N D I N G   &   C L O S I N G   B L O C K S    */
		/****************************************************************************/
		
.expand_ctrl_dc {	
	background:		url('../graphics/expand-plus.png') no-repeat left center;
	padding-left: 	20px;
}
.expand_ctrl_do {
  	background:		url('../graphics/expand-minus.png') no-repeat left center;
 	padding-left: 	20px;
}

.rightcolTextTop {
		background-color:	#8b4513;
		border-color: 		#8b4513;
}
.rightcolTextTop p {
		color: white;
}
