/*>>>>>>>>>>>>>>>>>>>>>>>>>>> S U B B O X <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

REMEMBER THIS SUBBOX can be made to be a diffrent colour to the other SUBBOX's as 
the subbox is store din a folder called "CSWebSupport/SubBox/"

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   ¦   SubBoxLeft40            ¦   SubBoxFill40                                        ¦                           ¦
            ¦   SubBoxLeft7x40.png      ¦ SubBoxFill40.png                                      ¦ SubBoxGradChange30x40.png ¦SubBoxRight7x40.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   ¦SubBoxLeftSideImage        ¦                                                                                   ¦ SubBoxRightSideImage ¦

            --------------------------------------------------------------------------------------------------------------------------------
            ¦   SubBoxLeft40            ¦   SubBoxFill40            ¦                           ¦
            ¦   SubBoxBottomLeft7x10.png¦ SubBoxBottomLeftFill.png  ¦SubBoxBottomMid50x10.png   ¦SubBoxBottomRightFill.png  ¦SubBoxBottomRight7x10.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*/

/*F O N T - used for the SubBoxTitles section (the headers) */

/*This is used when the :nbsp; chr is used, what it does is apply a standard font to the character*/

.SubBoxSubSpacer
{
      /*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;
}
.generictext 
{
	font-family : arial, sans-serif; 
	text-align : left; 
	font-size : 14px; 
	color : #325191; 
} 

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>   S U B B O X    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.SubBox div
{
	text-align:left;
	font-size:10px;
	color:#315191;
}

.SubBox table
{    
	border-style: none;
	border-width: 0px;
	padding: 0px;
	margin: 0px;
	border-spacing: 0px;
}

.SubBox table.TableSubBox
{
	background-image:url(images/SubBox/SubBoxBackGrounds/SubBoxBackGround.png);
    background-repeat:repeat;
}

.SubBox tr.SubBoxHeader
{
	vertical-align:middle;
}

/*Main Header of the sub box*/
.SubBox tr.SubBoxHeader td.SubBoxLeft
{
	background-image : url(images/SubBox/SubBoxLeft7x40.png);
	background-repeat:no-repeat;
	height:40px;
	width:7px;
}

.SubBox tr.SubBoxHeader td.SubBoxLeftFill
{
	background-image : url(images/SubBox/SubBoxLeftFill.png);
	background-repeat:no-repeat;
	height:40px;
	width:1px;
}

.SubBox tr.SubBoxHeader td.SubBoxFill
{
	background-image : url(images/SubBox/SubBoxFill40.png);
	background-repeat:repeat-x;
	height:40px;
	vertical-align:middle;
	text-align:left;
}

.SubBox tr.SubBoxHeader span.SubBoxTitle 
{
	font-size : 14px;
	font-weight:bold;
	color : #FFFFFF;
	text-align:left;
	vertical-align:middle;
	speak:normal;
}

.SubBox tr.SubBoxHeader td.SubBoxRightFill
{
	background-image : url(images/SubBox/SubBoxRightFill.png);
	background-repeat:repeat-x;
	height:40px;
	width:30px;
}

.SubBox tr.SubBoxHeader td.SubBoxRight
{
	background-image : url(images/SubBox/SubBoxRight7x40.png);
	background-repeat:no-repeat;
	height:40px;
	width:7px;
}

/*Main Content Row of sub box*/
.SubBox tr.SubBoxContent
{
}
.SubBox td.SubBoxTopLeft
{
	background-image : url(images/SubBox/SubBoxLeftSideImage.png);
	background-repeat:repeat-y;
	width:7px;
	height:7px;
}
.SubBox td.SubBoxTopContent
{
	background-image : url(images/SubBox/SubBoxBackGrounds/SubBoxContentBack.png);
	background-repeat:repeat;
	height:7px;
}
.SubBox td.SubBoxTopRight
{
	background-image : url(images/SubBox/SubBoxRightSideImage.png);
	background-repeat:repeat-y;
	width:7px;
	height:7px;
}

.SubBox tr.SubBoxContent td.SubBoxLeft
{
	background-image : url(images/SubBox/SubBoxLeftSideImage.png);
	background-repeat:repeat-y;
	width:7px;
}

.SubBox tr.SubBoxContent td.SubBoxContent
{
	background-image : url(images/SubBox/SubBoxBackGrounds/SubBoxContentBack.png);
	background-repeat:repeat;
}

.SubBox tr.SubBoxContent td.SubBoxRight
{
	background-image : url(images/SubBox/SubBoxRightSideImage.png);
	background-repeat:repeat-y;
	width:7px;
}

/*Bottom footer of the sub box*/
.SubBox tr.SubBoxFooter
{
}

.SubBox tr.SubBoxFooter td.SubBoxBottomLeft
{
	background-image : url(images/SubBox/SubBoxBottomLeft7x10.png);
	background-repeat:no-repeat;
	height:10px;
	width:7px;
}

.SubBox tr.SubBoxFooter td.SubBoxBottomLeftFill
{
	background-image : url(images/SubBox/SubBoxBottomLeftFill.png);
	background-repeat:repeat-x;
	height:10px;
}

/*If you would like a gradiented change then this allows for that. */
.SubBox tr.SubBoxFooter td.SubBoxBottomMid
{
	background-image : url(images/SubBox/SubBoxBottomMid50x10.png);
	background-repeat:no-repeat;
	height:10px;
	width:30px;
}

.SubBox tr.SubBoxFooter td.SubBoxBottomRightFill
{
	background-image : url(images/SubBox/SubBoxBottomRightFill.png);
	background-repeat:repeat-x;
	height:10px;
	width:10px;
}

/*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 */ 
.SubBox tr.SubBoxFooter td.SubBoxBottomRight
{
	background-image : url(images/SubBox/SubBoxBottomRight7x10.png);
	background-repeat:no-repeat;
	height:10px;
	width:7px;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> E N D   S U B B O X    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> I N N E R    S U B B O X    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*These are used for inner sub boxes these are boxes with simple header and content structures
unlike the main subboxes which provide more graphice design configuration. These Inner boxes
are designed mainily to be used within a sub box but can be used outside if required*/
/*This is the default style for all inner sub boxes that do not have a defined ID style*/
/*
Header:                                      BoxHeader
        |--------------|--------------------------------------------------------|------------|
		|TopLeft       |                    TopContent                          |TopRight    |
        |--------------|--------------------------------------------------------|------------|
		|Left          |      Content (<HeaderTemplate></HeaderTemplate>)       |Right       |
        |--------------|--------------------------------------------------------|------------|
		|BottomLeft    |                  BottomContent                         |BottomRight |
        |--------------|--------------------------------------------------------|------------|

Content Body:                                Content
        |--------------|--------------------------------------------------------|------------|
		|TopLeft       |                    TopContent                          |TopRight    |
        |--------------|--------------------------------------------------------|------------|
		|Left          |     Content (<ContentTemplate></ContentTemplate>)      |Right       |
        |--------------|--------------------------------------------------------|------------|
		|BottomLeft    |                  BottomContent                         |BottomRight |
        |--------------|--------------------------------------------------------|------------|
		
*/
.InnerBox div
{
	text-align:left;
	font-size:12px;
	color:#315191;
}

.InnerBox table
{
	border-style: none;
	border-width: 0px;
	padding: 0px;
	margin: 0px;
	border-spacing: 0px;
}

.InnerBox tr.BoxHeader
{
	background-image:url(Images/SubBox/SubBoxBackGrounds/SubBoxTdSubHeader.png);
	background-repeat:repeat;
	font-size:14px;
	font-weight:bold;
}
.InnerBox tr.BoxHeader td
{
}
.InnerBox span.InnerBoxTitle 
{
	font-family : arial, sans-serif; 
	text-align : left; 
	font-size : 14px; 
	font-weight:bold;
    color : #325191; 
}
.InnerBox tr.BoxHeader td.Left
{
	background-image:url(Images/SubBox/SubBoxBackGrounds/SubBoxTdSubHeader.png);
	background-repeat:repeat;
	width:7px;
}

.InnerBox tr.BoxHeader td.Right
{
	background-image:url(Images/SubBox/SubBoxBackGrounds/SubBoxTdSubHeader.png);
	background-repeat:repeat;
	width:7px;
}

.InnerBox tr.Content
{
	background-image:url(Images/SubBox/SubBoxBackGrounds/SubBoxTdSubContent.png);
	background-repeat:repeat;
}

.InnerBox td.TopLeft
{
	width:7px;
	height:7px;
}
.InnerBox td.TopContent
{
	height:7px;
}
.InnerBox td.TopRight
{
	width:7px;
	height:7px;
}

.InnerBox td.Left
{
	width:7px;
}
.InnerBox td.Content
{
}
.InnerBox td.Right
{
	width:7px;
}

/**/
.InnerBox td.BottomLeft
{
	width:7px;
	height:7px;
}
.InnerBox td.BottomContent
{
	height:7px;
}
.InnerBox td.BottomRight
{
	width:7px;
	height:7px;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> E N D    I N N E R    S U B B O X    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/