﻿/*>>>>>>>>>>>>>>>>>>>>>>>>>>> S U B B O X <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

REMEMBER THIS SearchSubBox can be made to be a diffrent colour to the other SearchSubBox's as 
the SearchSubBox is store din a folder called "CSWebSupport/SearchSubBox/"

The sub box is used on most items and is the standard box type block used on the shopping cart. 

The bar is made up of many elements to provide the end user with a degree of image felxibility

The title   ¦   SearchSubBoxLeft40            ¦   SearchSubBoxFill40                                        ¦                           ¦
            ¦   SearchSubBoxLeft7x40.png      ¦ SearchSubBoxFill40.png                                      ¦ SearchSubBoxGradChange30x40.png ¦SearchSubBoxRight7x40.png
goes on     ¦ 7 px (w) 40 px (h)        ¦ Repeat x 40 px (h)                                    ¦  40px (h) Repeat          ¦ 7 px (w) 40 px (h)
this row    ¦                           ¦       T I T L E                                       ¦                           ¦
            --------------------------------------------------------------------------------------------------------------------------------
                                                For ease of use background images are
                                                used to colour fill the table
            
Side bars   ¦SearchSubBoxLeftSideImage        ¦                                                                                   ¦ SearchSubBoxRightSideImage ¦

            --------------------------------------------------------------------------------------------------------------------------------
            ¦   SearchSubBoxLeft40            ¦   SearchSubBoxFill40            ¦                           ¦
            ¦   SearchSubBoxBottomLeft7x10.png¦ SearchSubBoxBottomLeftFill.png  ¦SearchSubBoxBottomMid50x10.png   ¦SearchSubBoxBottomRightFill.png  ¦SearchSubBoxBottomRight7x10.png
            ¦ 7 px (w) 10 px (h)        ¦ Repeat x 40 px (h)        ¦                           ¦40px (h) Repeat            ¦ 7 px (w) 40 px (h)
            ¦                           ¦                           ¦                           ¦                           ¦
            -------------------------------------------------------------------------------------------------------------


THE FOLLOWING ARE THE ----- SUB BOX -----  BLOCKS*/
/* These are used if you would lkie to break down the page */

/*This image is used on the SearchSubBoxes Left Hand Side image 40px high 7px Wide
REMEBER YOU CAN CHANGE THE SIZE of the images and boxes in the this CSS! */

.SearchSubBoxLeft40
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxLeft7x40.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:40px;
	width:7px;
}

/*This is used as an "over image" this is so if you want to add images over backgrounds you can
This maps over the background above. TO AVOID CONFUSION the OVER images are stored in the OVER 
folder!*/

.OverSearchSubBoxLeft40
{
    PADDING-RIGHT: 0px; 
    background-repeat:no-repeat;
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:40px;
	width:7px;
}


/*This image is used on the SearchSubBoxes to provide the fill across 40px high 7px Wide*/
.SearchSubBoxFill40
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxFill40.png);
	background-repeat:repeat-x;
	
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:40px;
	/*Font details - see span as well */
	font-family : arial, sans-serif; 
    font-size : 14px; 
    font-weight:bold;
    color : #FFFFFF; 
    text-align:left;
    vertical-align:middle;
    speak:normal;

}

/*If you would like to provide a colour gradient or image change this is 40px h and 30px wide*/
/*!!!! REMEMBER
If you dont wish for a gradient change then you just carry on with the fill image therough this box and
*/

.SearchSubBoxGradChange40
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxGradChange30x40.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:40px;
	width:30px;
}

/*This is the OVER IMAGE for the SearchSubBoxGradChange40 */

.OverSearchSubBoxGradChange40
{
    PADDING-RIGHT: 0px; 
    background-repeat:no-repeat;
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:40px;
	width:30px;
}

/*If you change the gradient on the change box then you can use this to fill the remaining right hand side in*/
.SearchSubBoxRightFill40
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxRightFill40.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:40px;
	width:10px;
}

.OverSearchSubBoxRightFill40
{
    PADDING-RIGHT: 0px; 
    background-repeat:repeat-x;
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:40px;
	width:10px;
}


/*This is the right hand side*/
.SearchSubBoxRight40
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxRight7x40.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:40px;
	width:7px;
}
.OverSearchSubBoxRight40
{
    PADDING-RIGHT: 0px; 
    background-repeat:no-repeat;
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:40px;
	width:7px;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  S I D E  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*USED ON THE SIDES */
/*You have a side pannel to the box 7px wide that repetes you can use this to place images down the side of the box if you wish*/
.SearchSubBoxLeftSideImage
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxLeftSideImage.png);
	background-repeat:repeat-y;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	width:7px;
}
.OverSearchSubBoxLeftSideImage
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	width:7px;
}

/*You have a side pannel to the box 7px wide that repetes you can use this to place images down the side of the box if you wish*/
.SearchSubBoxRightSideImage
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxRightSideImage.png);
	background-repeat:repeat-y;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}
.OverSearchSubBoxRightSideImage
{
    PADDING-RIGHT: 0px; 
	background-repeat:repeat-y;
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	width:7px;
}


/*This is used at the bottom of the SearchSubBox unit it is a bar that runs along the base, this is the left hand side of that bar*/
.SearchSubBoxBottomLeft
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxBottomLeft7x10.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:10px;
	width:7px;
}

.OverSearchSubBoxBottomLeft
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:10px;
	width:7px;
}

/*Varible used to fill the bottom L E F T of the SearchSubBox*/

.SearchSubBoxBottomLeftFill
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxBottomLeftFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:10px;
}

.OverSearchSubBoxBottomLeftFill
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:10px;
	width:auto;

}


/*If you would like a gradiented change then this allows for that. */
.SearchSubBoxBottomMid
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxBottomMid50x10.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:10px;
	width:50px;
}

.OverSearchSubBoxBottomMid
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:10px;
	/*This width should be 50px but there is an issue with rendering in IE so has become 0px - Mark */
	width:50px;
}


/*Varible used to fill the bottom R I G H T of the SearchSubBox*/

.SearchSubBoxBottomRightFill
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxBottomRightFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:10px;
}

.OverSearchSubBoxBottomRightFill
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:10px;
	width:auto;
}


/*This is the bottom right image - if you had a diffrent colour right vertical bar then you can have the gradient change along the bottom as well */ 
.SearchSubBoxBottomRight
{
	background-image : url(images/CSWebSupport/SearchSubBox/SearchSubBoxBottomRight7x10.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	height:10px;
	width:7px;
}

.OverSearchSubBoxBottomRight
{
    PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	BORDER-BOTTOM-STYLE: none;
	height:10px;
	width:7px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> S U B B O X    F O N T     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*Other fonts at the end of the CSS */

/*F O N T - used for the SearchSubBoxTitles section (the headers) */
.SearchSubBoxTitle {
font-family : arial, sans-serif; 
font-size : 14px; 
font-weight:bold;
color : #FFFFFF; 
text-align:left;
vertical-align:middle;
speak:normal;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> T A B L E       B A C K G R O U N D     <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*The SearchSubBox allows for certian tables to have background colours as images, or repeating images if required set here.*/


/*This is used on the background of the SEARCH box. */
/*This is used as the main search box, it i used to set the images etc*/
.MainSearchBox
{
    background-image:url(images/CSWebSupport/SearchSubBox/BackGround/SearchSubBoxBackGround.png);
    background-repeat:repeat;
        /*Font details are also carried here */
    font-family : arial, sans-serif; 
    font-size : 12px; 
    font-weight:bold;
    color : #315191; 
    vertical-align:middle;
    speak:normal;   
}

/*This is used on sub headers (your details / your job title / your address)  CRProfile.ascx / 
CRAddresses.ascs / CRAdress.aspx components etc */

.TdSearchSubBoxSubHeader
{
    background-image:url(images/CSWebSupport/SearchSubBox/BackGround/SearchSection.png);
    background-repeat:repeat;
      /*Font details are also carried here */
    text-align:left;
    font-family : arial, sans-serif; 
    font-size : 12px; 
    font-weight:bold;
    color : #315191;
    vertical-align:middle;
    speak:normal;

}

/*This style is used as the main background colour to the content */

.TdSearchSubBoxSubContent
{
    background-image:url(images/CSWebSupport/SearchSubBox/SearchSubBoxBackGrounds/SearchSubBoxTdSubContent.png);
    background-repeat:repeat;
        /*Font details are also carried here */
    text-align:left;
    font-family : arial, sans-serif; 
    font-size : 12px; 
    font-weight:bold;
    color : #315191; 
    vertical-align:middle;
    speak:normal;
}


/* This style is used in cells where RIGHT / CENTRE alaignment is required, it is identical to the above 
style apart form the alignment being removed (hence it being called No Alignment = NoAli */

.TdSearchSubBoxSubContentNoAli
{
    background-image:url(images/CSWebSupport/SearchSubBox/SearchSubBoxBackGrounds/SearchSubBoxTdSubContent.png);
    background-repeat:repeat;
        /*Font details are also carried here */
    font-family : arial, sans-serif; 
    font-size : 12px; 
    font-weight:bold;
    color : #315191; 
    vertical-align:middle;
    speak:normal;
}




/*used for the terms and conditions */
H1.menusmalltc {
font-family : arial, sans-serif; 
font-size : 10px; 
text-align : right; 
vertical-align:middle;
color : #325191; 
padding : 0; 
margin : 0; 
} 

/*This is used when the :nbsp; chr is used, what it does is apply a standard font to the character*/

.SearchSubBoxSubSpacer
{
      /*Font details are also carried here */
    text-align:left;
    font-family : arial, sans-serif; 
    font-size : 6px; 
    font-weight:bold;
    color : #000000; 
    vertical-align:middle;
}

