table
{
	font-size: 14px;
}

table.GridDisplay
{
	background: #e0ffff;
}

table.GridDisplay tr.GridHeader
{
	
	/*background-color: #cccccc;*/
}

table.GridDisplay tr.GridEvenItem
{
	
	/*background-color: #add8e6;*/
}

table.GridDisplay tr.GridOddItem
{
	
	/*background-color: #e0ffff;*/
}

/*This table is used for the _PopularItems.ascx component, setting the background colour here will change the box background colour */
	/*These are used to allow people to set a colour or image as the background on these boxes if they so wish*/
	/*Used to use the colour set, but inview of us using images
    so that the cusotmers can prep the cart through images alone we decided this was a faster way
    hence his is commented out VVVVVVVV*/

table.AdditionalInfo
{
	border-right:0px;
	border-top:0px;
	font-size: 12px;
	border-left:0px;
	border-bottom:0px;
	font-family: Arial, Sans-Serif;
	    /*<<<<<<<<<< Image for background >>>>>>>>>>>>>>>>>*/
	margin:0px;
	border-collapse:collapse;
}

table.AdditionalInfo tr
{
	
}

table.AdditionalInfo td
{
	margin:0px;
	padding:0px;
}

table.AdditionalInfo tr.AddInfoHeader
{
	font-weight: bold;
	font-size: 14px;
	color: #000000;
	background-color: #ffffff
}
table.AdditionalInfo tr.AddInfoItemText
{
	padding:0px;
	margin:0px;
	
}

table.AdditionalInfo tr.MostPopularHead
{
	font-weight: bold;
	font-size: 14px;
	color: #000000;
	background-color: #ffffff
}

table.AdditionalInfo tr.MostPopularBody
{
	background-color: #ffffff;
}

table.ProductsList
{
	font-size: 12px;
	width: 600px;
}

.ProductItemRep
{
	margin:10px;
	padding:0px;
	background-color: #000000;
	vertical-align:top;
}

/*Used on the Search return table ¦ 20090317*/
table.ProductsList table.ProductListItem
{
	font-size: 12px;
	margin: 0px;
	background-color: #ffffff;
}

table.ProductListItem span.ProductListItemName
{
	font-size:14px;
	font-weight:bold;
	color:#FF1908;
}

table.ProductListItem span.ProductListItemTitle
{

}

table.ProductListItem img
{
	width:100px;
	height:auto;
}

table.ProductsList a
{
	color:#000000;
	text-decoration:none;
}

font.ProductExTax
{
	color: #cc0033;
	font-size: 10px;
}

font.ProductIncTax
{
	font-size: 10px;
}

font.ProductAvailable
{
	font-weight: bold;
	color: #339933;
}

font.ProductOutOfStock
{
	font-weight: bold;
	color: #cc0033;
}

font.ProductOnOrder
{
	font-weight: bold;
	color: #cc0033;
}

.ProductDetails
{
	font-size:12px;
	margin:0px;
	padding:0px;
	width:100%;
	vertical-align:top;
	text-align:left;
	
}

table.ProductDetails table
{
	font-size:14px;
	
	color:#002049;
	
}

table.ProductDetails td.ProductName
{
	font-size:25px;
	font-weight:bold;
	text-align:center;
}


table.ProductReview
{
	/*This image forms the background colour to the review cell box! */
	background-image:url(images/CSCommerce/ReviewBox/ReviewBoxBackGroundRepeat.png);
    background-repeat:repeat;
	font-size:12px;
	text-align:left;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	border-collapse:collapse;
		
}

table.ProductReview tr
{
	font-size: 12px;
	
	text-align: left;
}

table.ProductReview td.ReviewTitle
{
	font-size:14px;
	font-weight:bold;
}

table.ProductReviewList
{
    /*This image is used behind the actual comments on the text left in the review box */
    background-image:url(images/CSCommerce/ReviewBox/ReviewBoxTxtBackGroundRepeat.png);
    background-repeat:repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	border-collapse:collapse;

	
}
/*This is the reviewlist this is the EVEN Item background  */
table.ProductReviewList td.GridEvenItem
{
	padding:0px;
	background-image : url(images/CSCommerce/ReviewBox/EvenItemReviewListBackGround.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is the reviewlist this is the ODD Item background  */
table.ProductReviewList td.GridOddItem
{
	padding:0px;
	  background-image:url(images/CSCommerce/ReviewBox/OddItemReviewListBackGround.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	border-collapse:collapse;
}

/*This is the reviewlist this is the EVEN Item background  */
table.ProductReviewList td.UnAppGridEvenItem
{
	padding:0px;
	background-image : url(images/CSCommerce/ReviewBox/EvenItemReviewListBackGround.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is the reviewlist this is the ODD Item background  */
table.ProductReviewList td.UnAppGridOddItem
{
	padding:0px;
	  background-image:url(images/CSCommerce/ReviewBox/OddItemReviewListBackGround.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	border-collapse:collapse;
}

table.ProductReviewList td.GridSepItem
{

}

table.ProductReview span.ReviewName
{
	font-weight:bold;
	font-size:14px;
}

table.ProductReview ReviewComments
{
    padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	border-collapse:collapse;
     
}


/*Used for the shopping cart when the products are on dsplay*/
.CartListHead
{
    background-color: #FEA915;
    border-left: dimgray 1px solid;
    border-right: dimgray 1px solid;
    border-top:dimgray 1px solid;
    border-bottom:dimgray 1px solid;
    color: black;
    font-family: Verdana, Arial;
    font-size: 11px;
    font-weight: bold;
    line-height: 20pt;
    padding-left: 5px
}

.CartListItem
{
    
    border-bottom: dimgray;
    background-color: #FFFFFF;
    border-left: dimgray 1px solid;
    border-right: dimgray 1px solid;

    color: black;
    font-family: Verdana, Arial;
    font-size: 11px;
    padding-left: 5px
}

.CartListItemAlt
{ 
    background-color: #f2f2f2;
    border-bottom: dimgray;
    border-left: dimgray 1px solid;
    border-right: dimgray 1px solid;

    color: black;
    font-family: Verdana, Arial;
    font-size: 11px;
    padding-left: 5px
}

.CartListFooter
{
        border-left: dimgray 1px solid;
    border-right: dimgray 1px solid;
    border-bottom:dimgray 1px solid;
    border-top:dimgray 1px solid;    

    background-color: #FEA915;
    line-height: 10pt
}


a.ListLink
{
	color: blue;
	text-decoration: underline;
}
a:link.ListLink
{
	color: blue;
	text-decoration: underline;
}
a:visited.ListLink
{
	color: blue;
	text-decoration: underline;
}

/*>>>>>>These are the styles for the commerce application<<<<<<<*/

/*Used when we want an invgif to space an item 20090317*/

.InvGifClass
{
	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;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> E N D   H E A D E R <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>   H E A D E R <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*>>>>>These are the headers, aranged left to right 
Top ROW
------------------------------------------------------------------------
|                 |                                    |               |
| TopLeft         |                 Top                |    TopRight   |
|                 |                                    |               |
------------------------------------------------------------------------
|                 |         |                          |               |
| Left            |  Logo   |        Content           |     Right     |
|                 |         |                          |               |
|                 |         |--------------------------|               |
|                 |         |                          |               |
|                 |         |        Search            |               |
|                 |         |                          |               |
------------------------------------------------------------------------
|                 |                                    |               |
| BottomLeft      |               Bottom               |  BottomRight  |
|                 |                                    |               |
------------------------------------------------------------------------
*/

/*This is used on the Table Header Background.aspx, as it repeats in all directions it can 
be used for flood fills or tesalating shapes */
table.TableHeader
{

    width: 960px;
    height:158px;
    border:0px;
    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
	/*background-image:url(images/CSCommerce/Header/HeaderBackGrounds/HeaderTable.png);*/
    background-repeat:no-repeat;
    
}

/*Used for the top row image on the Header.ascx component*/
table.TableHeader tr.TopRow
{
    /*background-image:url(images/CSCommerce/Header/TopBar/iDirres.png);
    background-repeat:no-repeat;*/

	height:30px;
	

}

table.TableHeader tr.TopRow>td.TopLeft
{

}
table.TableHeader tr.TopRow>td.Top
{

}
table.TableHeader tr.TopRow>td.TopRight
{

}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M I D    R O W   H E A D E R <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* M I D D L E   R O W   of Header 

/*Used for the middle row image on the Header.ascx component*/
table.TableHeader tr.MidRow
{


    		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;

}

table.TableHeader tr.MidRow>td.Left
{
		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
	height:85px;

}
table.TableHeader tr.MidRow>td.Logo
{
		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
}
table.TableHeader tr.MidRow>td.Content
{
height:0px;
		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
}
table.TableHeader tr.MidRow>td.Search
{
		height:0px;
		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
}
table.TableHeader tr.MidRow>td.Right
{
width:15px;
		border:0px;
	border-collapse:collapse;
	    margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
}

/* HEADER ------   B O T T O M    - B A R ------ */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

/*Used for the bottom row image on the Header.ascx component*/
table.TableHeader tr.BottomRow
{
	height:33px;
}
table.TableHeader tr.BottomRow>td.BottomLeft
{

	
	height:33px;

		border:0px;
	border-collapse:collapse;

}
table.TableHeader tr.BottomRow>td.Bottom
{

 		border:0px;
	border-collapse:collapse;
}
table.TableHeader tr.BottomRow>td.BottomRight
{

 		border:0px;
	border-collapse:collapse;	
}

/*This is the search table, that is only 40px high, this is 400px wide
so if it is set as a complete image it will act as a back fill to the table */

table.SearchQuery
{
	font-weight: bold;
	font-size: 14px;
	color: #315191;
	font-family: arial, sans-serif;
	height:0px;
	visibility:collapse;
	display:none;
	max-height:0px;
	
	border:0px;
	border-collapse:collapse;
	margin:0px;
    padding:0px;
	padding-left: 0px; 
	padding-right: 0px; 
	padding-top:0px; 
	padding-bottom:0px;
	border-bottom-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	border-top-style:none;
	
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> E N D   H E A D E R <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*Used for the line under the item title on the SearchResults.aspx page 20090317 */
.SearchResultsLineWeb
{
	background-image : url(images/CSCommerce/SearchResultsLineWeb.png);
	/*background-image : url(images/SearchResultsLineWeb.png);*/
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top right;
	height:10px;
}



/*These are the graphics used for the F O O T E R page section, they are only used once.

The bar is split in two, this means it is 80 high with two rows of 40 h 

The title   ¦FooterLeftSideEnd90x30.png  ¦ MainHeaderLeftFill45x40.jpg   ¦ MainHeaderTop40.jpg       ¦MainHeaderTopRight50x40.jpg
goes on     ¦ 90 px (w) 30 px (h)        ¦ 45 px (w) 40 px (h)           ¦  40px (h) Repeat          ¦40px (h) 50px(w)
this row    ¦                           ¦                               ¦   T I T L E               ¦
            -------------------------------------------------------------------------------------------------------------
 
*/

/*This is the left hand side of the bar */
.FooterLeftSideEnd
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterLeftSideEnd90x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: 90px;
}

.FooterLeftSideFill
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterLeftSideFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: auto;
}

.FooterLeftSideOpen
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterLeftSideOpen30x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: 30px;
}

.FooterLeftSideOpenFill
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterLeftOpenFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: auto;
}

.FooterRightSideClose
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterRightSideClose30x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: 30px;
}

.FooterRightSideFill
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterRightSideFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: 20px;
}

.FooterRightSideOpen
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterRightSideOpen30x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: 30px;
}


.FooterRightSideOpenFill
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterRightOpenFill.png);
	background-repeat:repeat-x;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width: auto;
}

.FooterFarRightSideClose
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterFarRightSideClose30x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:left;
    height: 30px;
    width:30px;
}

/*This is the Right hand side of the bar */
.FooterRightSideEnd
{
 	background-position: left center;
	background-image: url(images/CSCommerce/Footer/FooterRightSideEnd90x30.png);
	background-repeat:no-repeat;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top:right;
    height: 30px;
    width: 90px;
}



/*The FOOTER table can have the background colours as an image, or repeating image if required set here.*/



/*This is used on the Table Footer.aspx */
.TableFooter
{
    background-image:url(images/CSCommerce/Footer/FooterTable.png);
    background-repeat:repeat;
}




/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*>>>>>This section is used for the page heads title blocks 

ContentBar      ¦ContentBarFillLeft ¦ ContentBarLeftOpen    ¦ ContentBarText    ¦ ContentBarRightClose    ¦ContentBarFillRight  ¦ContentBarRight
 60px(h)x15w    ¦     (varible)     ¦    Fixed              ¦  (varible)        ¦   Fixed                 ¦   (varible)         ¦  Fixed  
                ¦----------------------------------------------------------------------------------------------------------------------------

*/


/*This is the left hand side of the bar */
.ContentBarLeft
{
 border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top right;
    height: 60px;
    width:1px;
    text-align:left;
}
/*The fill is used between the left side block and the open graphic*/
.ContentBarFillLeft
{
 border-bottom:1px solid   #FF1908;
 	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px;    
    height: 60px;
    width: 0px;
    text-align:left;
}

/*This is the opening part of the bar*/
.ContentBarLeftOpen
{
     border-bottom:1px solid   #FF1908;


	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top right;
    height: 60px;
    width:0px;
    text-align:left;
}

/*This is the image behind the text */
.ContentBarText
{

border-bottom:1px solid   #FF1908; 
font-family : arial, sans-serif; 
text-align : left; 
font-size : 26px; 
font-weight:bold;
color : #FF1908; 
vertical-align : bottom;
letter-spacing : 0.1cm; 
margin-bottom: 0; 
margin-top:0;
}

.ContentBarRightClose
{

 border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
	background-position:top right;
    height: 60px;
    width:15px;
    text-align:left;
}

/*The fill is used between the left side block and the open graphic*/
.ContentBarFillRight
{
 border-bottom:1px solid   #FF1908;
 	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px;    
    height: 60px;
    width:10px;
    text-align:left;
}
.ContentBarRight
{ border-bottom:1px solid   #FF1908;
 
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
    height: 60px;
    width:6px;
    text-align:left;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>> S U B B O X <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
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 ¦

            --------------------------------------------------------------------------------------------------------------------------------
The title   ¦   SubBoxLeft40            ¦   SubBoxFill40            ¦                           ¦
            ¦   SubBoxBottomLeft7x10.png¦ SubBoxBottomLeftFill.png  ¦SubBoxBottomMid50x10.png   ¦SubBoxBottomRightFill.png  ¦SubBoxBottomRight7x10.png
goes on     ¦ 7 px (w) 10 px (h)        ¦ Repeat x 40 px (h)        ¦                           ¦40px (h) Repeat            ¦ 7 px (w) 40 px (h)
this row    ¦                           ¦                           ¦                           ¦                           ¦
            -------------------------------------------------------------------------------------------------------------


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 SubBoxes Left Hand Side image 40px high 7px Wide*/
.SubBoxLeft40
{
    border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This image is used on the SubBoxes to provide the fill across 40px high 7px Wide*/
.SubBoxFill40
{
    border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*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 u just carry on with the fill image therough this box and
*/

.SubBoxGradChange40
{
    border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*If you change the gradient on the change box then you can use this to fill the remaining right hand side in*/
.SubBoxRightFill40
{
    border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}
/*This is the right hand side*/
.SubBoxRight40
{
    border-bottom:1px solid   #FF1908;
	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}



/*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*/
.SubBoxLeftSideImage
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*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*/
.SubBoxRightSideImage
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is used at the bottom of the subbox unit it is a bar that runs along the base, this is the left hand side of that bar*/
.SubBoxBottomLeft
{


	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*Varible used to fill the bottom L E F T of the subbox*/

.SubBoxBottomLeftFill
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}


/*If you would like a gradiented change then this allows for that. */
.SubBoxBottomMid
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*Varible used to fill the bottom R I G H T of the subbox*/

.SubBoxBottomRightFill
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}


/*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 */ 
.SubBoxBottomRight
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> T A B L E       B A C K G R O U N D S    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*The SubBox allows for certian tables to have background colours as images, or repeating images if required set here.*/

/*This is used on the order list page Orderlist.aspx */
.TableSubBoxOrderList
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxOrderList.png);
    background-repeat:repeat;
}

/*This is used on the order list page OrderDetails.aspx */
.TableSubBoxOrderDetail
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxOrderDetails.png);
    background-repeat:repeat;
}

/*This is used on the order list page OrderDetails.aspx as the C O N T R A S T I N G colour/image (if required)*/
/*This is also the contrasting TD at the top of each section!*/
.TableSubBoxOrderDetailConT
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxOrderDetailsCont.png);
    background-repeat:repeat;
}
.SubBoxTdOrderDetailConT
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxTdOrdDetConT.png);
    background-repeat:repeat;
}


/*This is used on the ProductsMain.aspx page - this is the default opening page! */
.TableSubBoxProductsMainDesc
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxCompanyDescription.png);
    background-repeat:repeat;
}

/*This is used on the ProductsDetails.aspx page - this is the product description box! */
.TableSubBoxProductsDetail
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxProductDescription.png);
    background-repeat:repeat;
}

/*This is used on the AddReview.aspx page - this is the ADD review box background */
.TableSubBoxAddReview
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxAddReview.png);
    background-repeat:repeat;
}


/*This is used on the the review (externat to the login) of the shopping cart background */
.TableSubCartReview
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxCartReview.png);
    background-repeat:repeat;
}


/*This is used on the the review of the shopping cart background */
.TableSubCartOrderReview
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxCartOrderReview.png);
    background-repeat:repeat;
}

/*This is used on the Checkout.aspx page - this is the  box background */
.TableSubBoxCheckOut
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxCheckOut.png);
    background-repeat:repeat;
}


/*This is used on the Checkout.aspx page - this is the  box background */
.TableSubBoxPayment
{
    background-image:url(images/CSCommerce/SubBox/SubBoxBackGrounds/SubBoxPayment.png);
    background-repeat:repeat;
}

/*This is used on the _PopularItems.ascx component - this is used on all product pages 
CSS value >>>>>>>    table.AdditionalInfo   <<<<<<(near top) is used for the background 
of the sub box in this case!*/


/*F O N T - used for the SubBoxTitles */
p.SubBoxTitle {
font-family : arial, sans-serif; 
font-size : 14px; 
font-weight:bold;
color : #FFFFFF; 
text-align:left;
vertical-align:middle;
speak:normal;
}

span.SubBoxTitle
{
	font-family: arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	vertical-align: middle;
	text-align: left;
	speak:normal;
}


/*These are the graphics used for the Main opening page section, they are only used once.

The bar is split in two, this means it is 80 high with two rows of 40 h 

The title   ¦MainHeaderTopLeft5x40.png  ¦ MainHeaderLeftFill45x40.png   ¦ MainHeaderTop40.png       ¦MainHeaderTopRight50x40.png
goes on     ¦ 5 px (w) 40 px (h)        ¦ 45 px (w) 40 px (h)           ¦  40px (h) Repeat          ¦40px (h) 50px(w)
this row    ¦                           ¦                               ¦   T I T L E               ¦
            -------------------------------------------------------------------------------------------------------------
            ¦MainHeaderBottom5x40.png   ¦MainHeaderBtmLeftFill45x40.png ¦   MainHeaderBottom40.png  ¦MainHeaderBottomRight50x40.png
            ¦40 px (h) 5 px (w)         ¦45 px (w) 40 px (h)            ¦   40px (h)                ¦40px (h) 50px(w)

*/

/*This is used for the top left image of the main header bar (80px hi) the image is 40px high!*/
.MainHeaderTopLeft
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is used as a repeating image which gives a 45px gap, you can use filler for the left hand side*/
.MainHeaderLeftFill
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is used as a repeating image which goes ALL the way accross the bar*/
.MainHeaderTop
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}
/*This image is used for the top right, it is slighly larger as it allows for some graduation of fade if required.*/
.MainHeaderTopRight
{

	padding-bottom:0px;
	padding-top:0px;
	padding-right:0px;
	padding-left:0px;
	margin:0px; 
}

/*This is the bottom row */

/*Used for the bottom left image */
.MainHeaderBottomLeft
{

}
/*This is used as a repeating image which gives a 45px gap, you can use filler for the Bottom left hand side*/
.MainHeaderBottomLeftFill
{

}

/*Used for the bottom bar, repeates */
.MainHeaderBottom
{

}

/*Bottom right, uses a 50px wide block for changes */
.MainHeaderBottomRight
{

}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> W E B   P A G E   C M S <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*>>>>>These are the headers, aranged left to right 
Top ROW
----------------------------------------------------------------
|                 |                            |               |
| TopLeft         |           Top              |    TopRight   |
|                 |                            |               |
----------------------------------------------------------------
|                 |                            |               |
| Left            |          Content           |     Right     |
|                 |                            |               |
----------------------------------------------------------------
|                 |                            |               |
| BottomLeft      |          Bottom            |  BottomRight  |
|                 |                            |               |
----------------------------------------------------------------
*/

table.CMSWebPageTable
{
	border: 0px;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.CMSWebPageTable tr.TopRow
{
	height:0px;
}

table.CMSWebPageTable tr.TopRow>td.TopLeft
{
	width:15px;
}
table.CMSWebPageTable tr.TopRow>td.Top
{
	/*WARNING: Don't set the width of this cell otherwise it will affect the
	  width of the left and right cells. this cells width is affected by the
	  main content only*/
}
table.CMSWebPageTable tr.TopRow>td.TopRight
{
	width:15px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M I D    R O W <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* M I D D L E   R O W  */

table.CMSWebPageTable tr.MidRow
{
}

table.CMSWebPageTable tr.MidRow>td.Left
{
	width:15px;
}

table.CMSWebPageTable tr.MidRow>td.Content
{
	text-align:left;
}

table.CMSWebPageTable tr.MidRow>td.Right
{
	width:15px;
}

/*  ------   B O T T O M    - B A R ------ */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

table.CMSWebPageTable tr.BottomRow
{
	height:15px;
}
table.CMSWebPageTable tr.BottomRow>td.BottomLeft
{
	width:15px;
}
table.CMSWebPageTable tr.BottomRow>td.Bottom
{
	/*WARNING: Don't set the width of this cell otherwise it will affect the
	  width of the left and right cells. this cells width is affected by the
	  main content only*/
}
table.CMSWebPageTable tr.BottomRow>td.BottomRight
{
	width:15px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>> E N D   W E B   P A G E   C M S <<<<<<<<<<<<<<<<<<<<<<<<<<*/