/* CONTENTS

    GENERAL
    - color glossary
    - general

    MY ACCOUNT
    - my account/dealer menu (shopcustadmin.asp)
    - my account login, regular or forced
    - general my account page, like update password or join mailing list

    SHOP
    - product page (main.asp, common, main_util.asp, main_template*.asp), 
    includes page header, brands table, category table, page navigation and more

    ADMIN
    - admin login (al.asp)
    - price sheet results, bulk upload, bulk email util
    - typical admin page, like news

    UNIDENTIFIED STUFF
    for possible deletion

*/

/**
* GENERAL
***/

/* color glossary

    FRONT-END:
        red (in header): #cf0013
        black (background): #000000
        off-white (text): #d3d3d3
        red (links): #cc3333
        off-white (link hover): #d3d3d3

    STORE AND ADMIN:
        darker grey (header background): #c9c9c9
        black (header text): #000000
        lighter grey (data background): #f0f0f0 (same as xTabelRowColor in shop$colors.asp)
        black (data text): #000000
        red (links): #cc3333
        pink (link hover): #f48273
        off-white (errors): #d3d3d3 (same as xfont in config db table and ErrorFontStart in shop$colors.asp)

*/

/* general */
#shopcontent hr 
{
    margin: 0px 25px;
    background-color: Transparent;
    color: #c9c9c9;
}
.shopInfoMsg
{
    margin: 80px 20px;
    font-weight: bold;
    text-align: center;
}
.shopInfoMsg a { font-weight: normal; }

#admin table,
#shop table
{
    font-size: inherit;
}

/*****
* MY ACCOUNT
*   also used for admin->configuration (shopa_config.asp, etc.)
*****/

/* my account/dealer menu (shopcustadmin.asp) */
.AdminMenuTable {}
.AdminMenuTable th
{
	padding: 3px 5px 3px 5px;
	text-align: center;
	background-color: #C9C9C9;
	color: #000000;
}
.AdminMenuTable td
{
	padding: 3px 5px 3px 5px;
	text-align: left;
	background-color: #f0f0f0;
	color: #000000;
}

/* my account login (regular or forced) */
.TableDefLogin
{
    font-size: inherit;
	background-color: #f0f0f0; /* matches xTabelRowColor */
	color: #000000;
    border: solid 3px #c9c9c9;
}
.TableDefLogin td
{
	padding: 3px 5px 3px 5px;
}

/* general my account page, like update password or join mailing list 
*     also used for some admin pages, like homepage specials and bulk e-mila utility
*     also used during shopping, on enter-address page
*/
.TableDef
{
    font-size: inherit;
	background-color: #000000;
    border: solid 3px #c9c9c9;
}
.TableDef th
{
	padding: 3px 5px 3px 5px;
	font-weight: bold;
	background-color: #c9c9c9;
	color: #000000;
}
.TableDef td
{
	padding: 3px 5px 3px 5px;
	text-align: left;
	background-color: #f0f0f0;
	color: #000000;
}
.TableColumn
{
	text-align: left;
	color: #000000;
}

/*****
* SHOP
*****/

/* shop submenu */
#shopSubMenu
{
    float: left;
    padding: 0px;
	margin: 0px;
	width: 940px;
	font-family: Arial, Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    list-style: none;
    background-color: black;
	color: #ff3333;
}
#shopSubMenu li
{
    float: left;
    display: block;
    margin: 0px 0px 0px 25px;
    padding: 8px 0px 8px 22px;
	color: #ff3333;
	background: transparent url(../layoutimages/subMenuBullet.gif) no-repeat 0px 8px;
}
#shopSubMenu li a,
#shopSubMenu li a:hover, #shopSubMenu li.menu_highlite a, #shopSubMenu li.menu_highlite a:hover 
{
	text-decoration: none;
}
#shopSubMenu li a:hover, 
#shopSubMenu li.menu_highlite a, #shopSubMenu li.menu_highlite a:hover, 
#shopSubMenu li.menu_start_highlite a, #shopSubMenu li.menu_start_highlite a:hover 
{ 
    color: white;
}
form#frmSearch
{
    margin: 0px;
    padding: 0px;
}
form#frmSearch input.SearchTerms
{
    margin: 0px;
	padding: 0px 0px 0px 3px;
	color: white;
	background-color: #646464;
	border: none;
}

/* product page (main.asp, common, util_main.asp, util_template*.asp)
* (page title, brands table, specials table, category table, product table, page navigation) 
*/

.ProdPageTitle /* indicates if page contains brand, category, search results */
{
    clear: both;
    margin: 0px 0px 0px 24px;
    font-size: 16px;
    font-weight: bold;
	text-transform: uppercase;
    color: #000000;
}
.BrandTitle /* brand portion of ProdPageTitle */
{
    color: #cc3333;
}
.allbrands, .allbrands a /* "see all brands", "see all products for this brand" */
{
    font-size: 14px;
    font-weight: bold;
    color: #cc3333;
}
#shopcontent .allbrands a:hover {color: Black; }
.shopByLabel /* labels: by brand, by category, specials */
{
    margin: 0px;
    padding: 10px 0px 5px 0px;
    width: 100%;
    font-size: small;
    font-weight: bold;
    text-align: center;
}
.ErrorMessage { color: black; font-weight: bold; } /* same as xfont and ErrorFontStart */

.ShopTable
{
    clear: both;
    width: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small;
    text-align: center;
    color: #333333;
}
.ShopTable table
.ShopTable table td
{
    font-size: inherit;
}

.BrandTable
{
    width: 160px;
    font-size: inherit;
    background-color: #f0f0f0;
    border: solid 1px black;
}
.BrandTable td
{
	padding: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small;
	text-align: left;
}
td.BrandHighlight {}
td.BrandHighlight a {}

.SpecialsTable
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    border-collapse:collapse;
}
.SpecialsTable td
{
    margin: 0px;
	padding: 10px 5px 10px 5px;
    width: 20%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small;
	text-align: left;
	vertical-align: top;
    border: solid 1px #b3b3b3;
}
.specialtitle 
{
   	width: 100%;
    display: block;
    line-height: 1.3em;
	font-weight: bold;
	text-align: left;
	background-color: #F0F0F0;
	color: #000000;
}
.specialimage 
{ 
    display: block; 
    margin: 3px 0px;    
    padding: 0px;
    width: 100%; 
    text-align:center;
}
.specialname 
{ 
    font-weight: bold;
    text-align: left;
}
.specialtext 
{ 
    color: #282828;
    text-align: left;
}
.specialmore 
{ 
    font-weight: bold;
    text-align: left;
}

.CategoryTable
{
    width: 100%;
    border-collapse: collapse;
}
.CategoryTable td
{
	padding: 10px 5px 10px 5px;
    width: 20%;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small;
	text-align: center;
    border: solid 1px #b3b3b3;
}

.ProductTable 
{ 
    text-align: left;
	background-color: #f0f0f0;
    color: #333333;
    border: solid 1px #cc3333;
}
.ProductTable td 
{
    padding: 0px 10px 10px 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small;
    border: solid 1px #cc3333;
}
.ProductTable img 
{
    border: solid 1px #cc3333;
}
.ProductName, a:link.ProductName
{   
    font-weight: bold;
    font-size: larger;
}
.ProductRetail 
{   
    font-size: 11px;
    font-style: italic;
}
.ProductPrice 
{   
    font-size: 11px;
}
.ProductUOM
{   
    font-size: 10px;
}
.mriProductTitle
{
    display: inline-block;
    margin: 0px 0px 8px 0px;
    padding: 0px;
    width: 100%;
    text-transform: uppercase;
    font-size: larger;
    font-weight: bold;
    color: #cc3333;
}
.mriProductColor
{
    display: inline-block;
    margin-top: 8px;
    width: 100%;
    text-transform: uppercase;
}
td.XSell 
{
    background-color: #f0f0f0;
    color: #000000;
}
.ProductTable .dealerLoginBtn 
{ 
    font-size: 11px; 
}    

/***
* ADMIN
***/

/* admin login (al.asp) */
.AdminTable 
{
    font-size: inherit;
}
.AdminTable th, .AdminTable th b
{
	padding: 3px 5px 3px 5px;
    background-color: #c9c9c9;
    color: #000000;
}
.AdminTable td, .AdminTable td b
{
	padding: 3px 5px 3px 5px;
	text-align: left;
	background-color: #f0f0f0;
	color: #000000;
}

/* price sheets and bulk update admin */
div#shopcontent #bulkUpdate,
div#shopcontent #priceSheetResults 
{
    padding: 0px 0px 0px 25px;
    text-align: left;
}
div#shopcontent table.BulkImportFileTable
{
    margin-right: 20px;
    font-size: inherit;
    text-align: left;
	background-color: #000000;
	border: solid 1 #000000;
}
div#shopcontent table.BulkImportFileTable th
{
	padding: 5px 3px 5px 3px;
	background-color: #C9C9C9;
	color: #000000;
}
div#shopcontent table.BulkImportFileTable td 
{
	padding: 5px 3px 5px 3px;
	background-color: #F0F0F0;
	color: #000000;
}



/* bulk email admin */
div#shopcontent div#bulkEmailUtils
{
    padding: 25px;
}

/* typical admin page, like news */
/* four parts: EditDisplayHeader, DisplayHeaderMenu, ReportTable, PageNavTable */
.EditDisplayHeader 
{
	border: solid 1px #000000;
}
.EditDisplayHeader th, .EditDisplayHeader th b
{
	padding: 3px 5px 3px 5px;
	text-align: center;
    background-color: #c9c9c9;
    color: #000000;
    border-bottom: solid 1px black;
}
.EditDisplayHeader td, .EditDisplayHeader td b
{
	padding: 3px 5px 3px 5px;
	background-color: #f0f0f0;
	color: #000000;
}
.EditDisplayFooter td, .EditDisplayFooter td b {}

.DisplayHeaderMenu 
{
	border: solid 1px #000000;
}
.DisplayHeaderMenu td, .DisplayHeaderMenu td b
{
	padding: 3px 5px 3px 5px;
	background-color: #f0f0f0;
	color: #000000;
}

.ReportTable /* also used by my account->review previuos orders */
{
	border: solid 1px #000000;
}
.ReportTable th, .ReportTable th b
{
	padding: 3px 5px 3px 5px;
	font-size: smaller;
	font-weight: normal;
    background-color: #c9c9c9;
    color: #000000;
    border-bottom: solid 1px #000000;
}
.ReportTable td, .ReportTable td b
{
	padding: 3px 5px 0px 5px;
    text-align: left;
	background-color: #f0f0f0;
	color: #000000;
}

.PageNavTable {}
#shopcontent .PageNavTable td, #shopcontent .PageNavTable td b
{
	padding: 3px 5px 3px 5px;
    font-weight: normal;
	color: #000000;
}
#shopcontent .PageNavTable td a
{
	padding: 3px 5px 3px 5px;
}

/* excel downlaods */
#excelDownloadMenuContent 
{
    padding: 30px;
    width: 100%;
    text-align: left;
}
#excelDownloadMenuContent table.MenuGroup
{
    margin-left: 0px;
    margin-right: 0px;
    width: 90%;
}
#excelDownloadMenuContent input.excelDLButton
{
    display: inline-block;
    margin: 2px 3px 0px 0px;
    padding: 0px;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    overflow: visible;
    color: #cc3333;
    background: transparent;
    border: none;
    cursor: pointer;
}

