﻿/*******************************************************************
**
**	-= GENERAL NOTES =-
**
**  CLASS STRUCTURE
**  ================
**	There are two 'parent classes' here, Admin and Public.
**	Admin applies to the admin or web management backend pages,
**	Public applies to all the publicly accessible pages i.e.
**  shopping cart, product browser etc. This has been done so we
**  can apply one broad global style to admin and another to public. 	
**
**  Each ShopOMatic component main container will derive from either
**  Admin or Public + it's own class i.e. 
**		<div class="Admin ProductEditor">   or
**		<div class="Public ProductBrowser">
**
**  When you create CSS classes, first make them generic, then 
**  override them for admin or public as desired.
**
**
**  CSS AND SHOPOMATIC CONTROLS
**  ============================
**  Most of the CSS stylable elements within the ShopOMatic controls
**  have class identifers embedded in them. If you need to style
**  an aspect of a control, first look at the source to see if it has
**  a class tag on it.
**
*******************************************************************/

.Public h1
{
	 /*This is here to provide a sensible size for H1 tags.
	font-size: 200%;*/
	/*color: #fff;
	display: inline;
	font-weight: normal;
	vertical-align: middle; */
}

.Admin h1
{
	/* This is here to provide a sensible size for H1 tags. */
	font-size: 15px;
	color: #fff;
	display: inline;
	font-weight: normal;
}

/*******************************************************************
**
**	Admin Styles Apply to Admin Pages
**
*******************************************************************/
.Admin
{
	margin-right: 10px;
	margin-left: 10px;
	font: 12px Verdana, Arial;
	text-decoration: none;
	zoom:1;	 /* This hack stops IE7 jumping content down when divs get too narrow - Rich */
	/* above hack, stopped clean build in VS 2008. */
	/* Above hack builds fine on my machine and has to stay in to stop admin tables 'popping'
		down the page in IE7 when the browser window is resized down in width - Rich */
}

/*******************************************************************
**
**	AdvancedProductEditor Styles
**
*******************************************************************/
.AdvancedProductEditor
{
}

.AdvancedProductEditor .Title
{
	font-size: 18px;
	font-weight: bold;
}

.AdvancedProductEditor .Content
{
	width: 100%;
}

.AdvancedProductEditor .Spacer
{
	height: 38px;
	clear: both;
}

.AdvancedProductEditor .ProductSaveButton
{
	width: 100%;
	text-align: right;
}

.AdvancedProductEditor .LargeImage
{
}

.AdvancedProductEditor .MediumImage
{
}

.AdvancedProductEditor .SmallImage
{
}

.AdvancedProductEditor .row
{
	clear: both; /*display: list-item;*/
	float: left;
	width: 99%;
}
.AdvancedProductEditor .col
{
	float: left;
	width: 100%;
	padding: 2px;
}
.AdvancedProductEditor .ColLabel
{
	float: left;
	width: 130px;
	padding: 2px;
}
.AdvancedProductEditor .ColInput
{
	float: left;
	width: 32%;
	padding: 2px;
}
.AdvancedProductEditor .ColError
{
	float: left;
	width: 32%;
	padding: 2px;
}

.AdvancedProductEditor .WysiwygEditorWrapper
{
	position: relative;
	float: left;
}

.AdvancedProductEditor .SaveButton
{
	text-align: right;
}

/*******************************************************************
**
**	Basket Styles
**
*******************************************************************/
.Basket
{
	padding: 3px;
	margin: 2px;
	min-width: 465px;
}

.Basket .BasketDeliveryTable
{
	width: 100%;
	vertical-align: top;
}

.Basket .BasketDeliveryTableHeader
{
	text-align: left;
}

.Basket .BasketDeliveryTableContentRow
{
	vertical-align: top;
}

.Basket .BasketDeliveryTableDeliveryTitle
{
	font-weight: bold;
	margin-bottom: 5px;
		color:#ffd700;
}

.Basket .BasketDeliveryTableOrderTitle
{
	margin-top: 17px;
	font-weight: bold;
	text-align: left;
	color:#ffd700;
}

.Basket .BasketDeliveryTableOrderTotalContentCell
{
	text-align: right;
	width: 200px;
}

.Basket .EmptyBasket
{
 width:300px;
 margin-left:auto;
 margin-right:auto;	
 color:#fff;
}
	
.Basket .BasketDeliveryTableOrderTotalContentCell .col
{
	text-align: left;
}

.Basket .GenBasketText
{
	color: #fff;
}

.Basket .OrderRunningTotalText
{
	color: #fff;
	line-height: 18px;
}

.Basket .OrderTotalTitle
{
	line-height: 24px;
	font-weight: bold;
}

.Basket .OrderTotalText
{
	border-top: #fff 2px solid;
	font-weight: bold;
	line-height: 24px;
	
}

.Basket .Delivery
{
	width: 230px;
}
.Basket .OrderTotal
{
	border-top: #fff 2px solid;
	width: 190px;
	margin-right: 22px;
		color:#ffff00;
}

.Basket .col
{
	float: left;
	padding: 2px;
}
.Basket .RowTitle
{
	font-weight: bold;
}

.Basket input[type="text"]
{
	border: 1px solid #000;
	text-align: center;
 font-size:0.9em;
	height: 12px;
	vertical-align: top;
	margin-top: 0px;
}

.Basket input[type="select"], submit
{
	border: 1px solid #000;
	vertical-align: top;
}

/*******************************************************************
**
**	CardPayment Styles
**
*******************************************************************/
.CardPayment
{
	width: 100%;
	color:#fff;
}

.CardPayment h1
{
	font-size: 14px;
}

.CardPayment .HeadingTitle
{
}

.CardPayment .ProblemBoxTitle
{
	background-color: #f00;
	padding-top: 2px;
	padding-left: 5px;
	height: 28px;
	vertical-align: middle;
	font-size: 1.0em;
}

.CardPayment .ProblemBoxTitle h1
{
	color:#fff;
}

.CardPayment .ProblemBox
{
	background-color: #5a5a5a;
	padding: 5px;
	font-size: 1.0em;
	border-left: #f00 2px solid;
	border-right: #f00 2px solid;
	border-bottom: #f00 2px solid;
	vertical-align: top;
}

.CardPayment .ColLabel
{
	width: 120px;
	display: -moz-inline-box; /* Ignored by IE */ 
	display: inline-block;  /* Ignored by FF (This forces the width to be imposed when rendering spans) */
	padding: 2px;
}

.CardPayment .ColInput
{
	width: 160px;
	padding: 2px;
}

.CardPayment .ShopOMaticFormBox
{
 width:520px;
	margin-left:auto;
	margin-right:auto;
}

/*******************************************************************
**
**	Cookies Styles
**
*******************************************************************/
.Cookies .NoCookies
{
	width:300px;
	margin-left:auto;
	margin-right:auto;	
}

/*******************************************************************
**
**	Customer Details Styles
**
*******************************************************************/
.CustomerDetails
{
	color:#fff;
}


/*******************************************************************
**
**	DeliveryOptionsEditor Styles
**
*******************************************************************/
.DeliveryOptionsEditor
{
}

.DeliveryOptionsEditor .Spacer
{
	height: 38px;
}

.DeliveryOptionsEditor .Title
{
}

.DeliveryOptionsEditor .Content
{
}

.DeliveryOptionsEditor .TableLeftmostColumn
{
	/* The style for leftmost admin table columns */
	text-align: right;
}

/*******************************************************************
**
**	DeliveryOptionsRegionsTable Styles
**
*******************************************************************/
.DeliveryOptionsRegionsTable
{
	border-right: #000000 1px solid;
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	border-bottom: #000000 1px solid;
	border-collapse: collapse;
}

.DeliveryOptionsRegionsTable .HeaderStyle
{
	vertical-align: top;
	background-color: #32BBCC;
	font-weight: bold;
	color: #F7F7F7;
}

.DeliveryOptionsRegionsTable td
{
	padding: 5px 5px 5px 5px;
	border-left: 0px;
	border-right: 0px;
	text-align: center;
}

/*******************************************************************
**
**	.Net GridView Styles
**
*******************************************************************/
.GridView
{
	/* CssClass applied to all GridView controls  */
	border-right: #000 1px none;
	border-top: #000 1px none;
	border-left: #000 1px none;
	border-bottom: #000 1px none;
	color:#000;
}

.GridView tr
{
	padding: 5px 5px 5px 5px;
}


.GridView td
{
	border-left: 0px;
	border-right: 0px;
	padding: 3px 3px 3px 3px;
}

.GridView input[type="text"]
{
	border-right: #000000 1px none;
	border-top: #000000 1px none;
	border-left: #000000 1px none;
	border-bottom: #000000 1px none;
}

.AlternatingRowStyle
{
	background-color: #F7F7F7;
	vertical-align: top;
}

.EditRowStyle
{
}

.EmptyDataRowStyle
{
}

.FooterStyle
{
	color: #4A3C8C;
	background-color: #32BBCC;
}

.FooterStyle a
{
	color: #F7F7F7;
}

.HeaderStyle
{
	vertical-align: top;
	background-color: #32BBCC;
	font-weight: bold;
	color: #F7F7F7;
}

.HeaderStyle th
{
	padding: 5px 5px 5px 5px;
	border-left: 0px;
	border-right: 0px;
}

.HeaderStyle a
{
	color: #F7F7F7;
}


.PagerStyle
{
	background-color: #32BBCC;
	font-weight: bold;
	color: #F7F7F7;
}

.RowStyle
{
	vertical-align: top;
	background-color: #FFFF99;
}

.SelectedRowStyle
{
	background-color: #738A9C;
	font-weight: bold;
	color: #F7F7F7;
}

/*******************************************************************
**
**	OrderSummary Styles
**
*******************************************************************/
.OrderSummary 
{
	color:#fff;
}

.OrderSummary .ColLabel
{
	color:#aaa;
}


/*******************************************************************
**
**	ProductBrowser Styles
**
*******************************************************************/
.ProductBrowser
{
}

.ProductBrowser .ProductRepeater
{
	width: 100%;
}

.ProductBrowser p
{

  padding: 0px 0px 0px 0px;
  margin-top: 5px;

 margin-bottom:0px;
 /*border-bottom: solid 1px #0ff;
border-top: solid 1px #0ff;
border-left: solid 1px #0ff;
border-right: solid 1px #0ff; 	*/
}

.ProductBrowser strong
{

   margin-bottom: 5px;
  color:#444;
/* border-bottom: solid 1px #0f0;
border-top: solid 1px #0f0;
border-left: solid 1px #0f0;
border-right: solid 1px #0f0; */

}

.ProductBrowser .ProductBlurb h1
{
	margin-top: 3px;
	margin-bottom: 5px;
	color: #9c2c44;
	font-weight: bold;
}

.ProductBrowser .ProductBlurb h2
{
	/*font-weight: normal;
	font-size: 12px;
	color: #696969;
	margin-bottom: 8px;*/
	color:#d19380;
	margin-top: 10px;
	margin-left: 15px;
}

.ProductBrowser hr
{
	height: 1px;
	margin-left: 15px;
	margin-right: 15px;
	color: #d19380;
}


.ProductBrowser .StockLevel
{
	text-align: left;
}

.ProductBrowser .TitleAndBlurbContainer
{
	padding-top: 5px;
}

.ProductBrowser .ProductTitle
{
	font-size: 16px;
	background-color: #d19380;
	color: #fff;
	padding-top: 4px;
	padding-left: 5px;
	height: 24px;
	vertical-align: middle;
}

.ProductBrowser .ProductBlurb
{
}

.ProductBrowser .PictureAndButtonContainer
{
	float: right;
	margin: 0px;
	width: 200px;
	padding-top: 5px;
	padding-left:10px;	
}

.ProductBrowser .PictureContainer
{
}

.ProductBrowser .PictureContainer img
{
	/*width: 100%;*/
}

.ProductBrowser .PriceContainer
{
	text-align: right;
}

.ProductBrowser .ExTax
{
}

.ProductBrowser .IncTax
{
	font-size: 12px;
	font-weight: bold;
	color: #C77963;
}

.ProductBrowser .StockLevel
{
	font-weight: bold;
}

.ProductBrowser .ButtonContainer
{
	text-align: center;
}

.ProductBrowser .InterProductSpacer
{
	clear: both;
	height: 16px;
}

/*******************************************************************
**
**	ProductButton Styles
**
*******************************************************************/
.ProductButton
{
	text-align:center;
}

.ProductButton .ProductButtonPrice
{
	color: #ffff00;
	font-weight:bold;
	font-size:1.4em;
	text-align:center;
	margin-left: 0;
	margin-bottom:12px;
}

/*******************************************************************
**
**	ProductEditor Styles
**
*******************************************************************/
.ProductEditor
{
}

.ProductEditor .Spacer
{
	height: 38px;
}

.ProductEditor .ProductAddButton
{
	text-align: right;
	padding: 5px 0px 5px 0px;
}

/*******************************************************************
**
**	Public Styles Apply to Public Pages
**
*******************************************************************/
.Public
{
	/*font: 11px/12px Verdana, Arial;  This sets the font for all public ShopOMatic controls */
	font-size:1.3em;
}

.Public h1
{
	display: block;/* font-size:16px;  !! Change or remove this for production - Rich*/ 
	font-size: 1.8em;
}

.Public .ColLabel
{
	width: 160px;
	display: -moz-inline-box; /* Ignored by IE */ 
	display: inline-block;  /* Ignored by FF (This forces the width to be imposed when rendering spans) */
	padding: 2px;
	text-align:right;
	padding-right:5px;
}

.Public .ColInput
{
	width: 160px;
	padding: 2px;
}

.Public .ColInputDropDown
{
	width: 164px;
	 margin-left:1px;
}

.Public .ColError
{
	padding: 2px;
}
.Public input[type="select"]
{
	/*!! This is broken - rich */
	width: 250px;
}

.Public input[type="text"], select, submit
{
	border: 1px solid #000;
}

.Public .GridView
{
	/* CssClass applied to all public GridView controls */
	border-right: #000 1px solid;
	border-top: #000 1px solid;
	border-left: #000 1px solid;
	border-bottom: #000 1px solid;
}

.Public .EditRowStyle
{
}

.Public .EmptyDataRowStyle
{
}

.Public .FooterStyle
{
	color: #4A3C8C;
	background-color: #32BBCC;
}

.Public .FooterStyle a
{
	color: #F7F7F7;
}

.Public .HeaderStyle
{
	vertical-align: top;
	background-color: #606060;
	font-weight: bold;
	color: #FFF;
}

.Public .HeaderStyle th
{
	padding: 5px 5px 5px 5px;
	border-right: #000000 0px solid;
	border-top: #000000 0px solid;
	border-left: #000000 0px solid;
	border-bottom: #000000 0px solid;
}

.Public .HeaderStyle a
{
	color: #F7F7F7;
}


.Public .PagerStyle
{
	background-color: #32BBCC;
	font-weight: bold;
	color: #F7F7F7;
}

.Public .Row
{
	margin: 2px 0px 2px 5px;
}

.Public .RowStyle
{
	vertical-align: middle;
	background-color: #FFFF99;
	border-right: #000000 0px solid;
	border-top: #000000 0px solid;
	border-left: #000000 0px solid;
	border-bottom: #000000 0px solid;
}

.Public .AlternatingRowStyle
{
	vertical-align: middle;
	background-color: #f1ebeb;
	border-right: #000000 0px solid;
	border-top: #000000 0px solid;
	border-left: #000000 0px solid;
	border-bottom: #000000 0px solid;
}

.Public .SelectedRowStyle
{
	background-color: #738A9C;
	font-weight: bold;
	color: #F7F7F7;
}

.Public .HeadingTitle
{
	position:relative; /*Re-instate if breaks order summary - Rich */

	line-height: 16px;	/* Fix text cutting problem in IE7, inherits from Public font: */

	color: #fff;
	padding-top: 4px;
	padding-left: 5px;
	height: 24px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.Public .HeadingTitle input[type="submit"]
{
 height:21px;
}

/*******************************************************************
**
**	ShopOMaticFormBox Styles
**
*******************************************************************/
.ShopOMaticFormBox
{

}

/* ## TaxEditor Start ## */
.TaxEditor
{
}

.TaxEditor .Title
{
}

.TaxEditor .Content
{
}

.TaxEditor .AlternatingRowStyle
{
}


/* ## TaxEditor End ## */




.DebugContainer
{
	/* Use this to setup a temporary container div to test component styling */
	border-right: orangered thin dashed;
	border-top: orangered thin dashed;
	border-left: orangered thin dashed;
	border-bottom: orangered thin dashed;	
	width: 478px;
}


.Debug
{
	background-color: #ff33cc;

}


.float
{
	float: left;
}
.spacer
{
	/*clear: both;*/
	height:0px;	/* IE6 Hack by Rich to stop 100% wide elements popping down the page */
}

.ErrorMessage
{
	/* This is used for one line error message labels in the admin system (or wherever appropriate) */
	color: #f00;
}

.RequiredFieldAsterisk
{
	/* Defines the colour of asterisks alongside required fields on forms */
	color: #ff0;
	font-size:1.3em;
}

#content .RequiredFieldAsterisk p
{
	/* Defines the colour of asterisks alongside required fields on forms */
	color: #ff0;
	font-size:0.9em;
}


.Title
{
	font-size: 1.2em;
	font-weight: bold;
	color: #ff1493;
	font-family: MS Trebuchet,Sans-Serif;
	margin-top: 8px;
	margin-bottom: 5px;
}

.TableAndButtonContainer
{
	border-collapse: collapse;
}

.RightJustifiedButtonCell
{
	text-align: right;
	padding: 5px 0px 5px 0px;
}
