/* Exquisite-Cookware.php */

/* --- Cascading Style Sheets - 5.8.1 User Manual - Pages 155-172 ---
On the ecommerce templates we use cascading style sheets (css) to allow you to easily manage the font and hyperlink properties. In the root of your web you will have a file typically called style.css and on each page a link to it like this <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">. 

The parameters are pretty clear, any hex value will suffice for the color and if you require an underline when the cursor passes over a link, change "none" to "underline". Note that some browsers, notably Netscape 4x will ignore the hover option.

-- More Information Below --
*/



/* --- This is the text of the navigation box in the template (Home, Product Index, Order Status, View Cart, Customer Service) --- */
.navigationtext {
font-family: Arial, helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
text-align: center; 
vertical-align:bottom; 
}

/* --- This is the bullets between the text in the navigation box in the template (Home, Product Index, Order Status, View Cart, Customer Service) --- */
.navigationtextbullets {
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
text-align: center; 
vertical-align:bottom; 
color: #009900;
}


#menu { 
width: 129px;
 }

#menu ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	margin:0px;
}

#menu a
{
	display: block;
	padding: 2px;
	width: 129px;
	
	
}

#menu a:link, #menuitems a:visited
{
	color: #333333;
	text-decoration: none;
	font-weight:400;
}

#menu a:hover
{
background-color: #;

font-weight:bold;
}


body {
margin: 8px;
padding: 0px;
font-family: Verdana, helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #FFFFFF;
text-align: left;
}

table {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
text-align: left;
color: #000;
}


A:link {
	color: #000000;
	text-decoration: none;
}

A:visited {
	color: #333333;
	text-decoration: none;
}

A:active {
	color: #000000;
	text-decoration: none;
}

A:hover {
	color: #0077ff;
	text-decoration: none;
}

A.dark:link {
	color: #666666;
	text-decoration: none;
}

A.dark:visited {
	color: #666666;
	text-decoration: none;
}

A.dark:active {
	color: #666666;
	text-decoration: none;
}

A.dark:hover {
	color: #003366;
	text-decoration: none;
}

TD {
	font-size: 12px;
	font-family : Verdana;
}

P {
	font-size: 12px;
	font-family : Verdana;
}

TD.dark {
	font-size: 12px;
	font-family : Tahoma;
	color : #666666;
}

P.dark {
	font-size: 11px;
	font-family : Verdana;
	color : #666666;
}

TD.smaller {
	font-size: 11px;
	font-family : Tahoma;
	color : #000000;
}

P.smaller {
	font-size: 11px;
	font-family : Verdana;
	color : #000000;
}

HR {
	color : #003366;
	height : 1px;
}

TD.leftbg {
	background-image: url(images/leftbg.gif);
	font-size: 11px;
	font-family : Tahoma;
	color : #000000;
	width:130px;
}

TD.leftbg2 {
background-image: url(images/leftbg2.gif);
}

TD.nnleft {
background-image: url(images/nnleft.gif);
font-size: 11px;
font-family : Tahoma;
color : #000000;
}

TD.nnright {
background-image: url(images/nnright.gif);
font-size: 11px;
font-family : Tahoma;
color : #000000;
}

TD.bottomlinks { background-image: url(images/bottomlinks.gif); font-size: 13px; font-family : Tahoma; color : #000000; font-weight: bold; }

TD.lefttablebg {
background-image: url(images/lefttablebg.gif);
width: 24px;
}

TD.rightbg {
background-image: url(images/rightbg.gif);
width: 24px;
}

TD.bottombg {
background-image: url(images/bottombg.gif);
}

/* --- All Links in the Store --- */

A.ectlink:link { 
color: #333;
text-decoration: none; 
} 
A.ectlink:visited {
color: #333; 
text-decoration: none; 
}
A.ectlink:active { 
color: #333; 
text-decoration: none; 
}
A.ectlink:hover { 
color: #0066FF; 
text-decoration: none; 
}

/* --- Product Name on Product Page --- */

div.prodname {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

/* --- Color and Weight of the Price Font (not the word "Special:" --- */

SPAN.price 
{ 
font-family: Verdana, helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #CC0000;
}


/* --- Color and Weight of "Special:" (before price) for proddetails.php --- */

div.prodprice {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #CC0000;
}

/* --- Color and Weight of "Special:" (before price) for proddetails.php --- */

div.detailprice {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #CC0000;
}

/* --- List Price for products.php (doesn't affect the proddetails.php) --- */
div.listprice {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #999999;
	text-decoration: line-through; 
}


/* --- List Price for proddetails.php --- */

div.detaillistprice {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #999999;
	text-decoration: line-through; 
}

/* --- Alignment for image on proddetails.php --- */

td.detailimage {
vertical-align: top;
}


/* --- Table and Cell Background ---
Set the table and cell background properties in the files search / tracking / order status / checkout via CSS classes. From version 5.7.0 this was extended to include emailfriend.php
*/

TABLE.cobtbl
{ 
background-color: #BBBBBB;
}
 
TD.cobhl
{ 
background-color: #DDDDDD; 
}

TD.cobll
{ 
background-color: #EEEEEE; 
color : #000000; 
}

/* --- Changing the font of the page numbers --- */

P.pagenums 
{ 
font-size: 12px; 
font-family : Verdana; 
}

/* --- Change the appearance of the page number currently being viewed--- */

SPAN.currpage {
color: #CC0000; 
font-weight: bold; 
}

/* --- This change makes the buy button line up with the quantity box--- */

.buybutton
{ 
vertical-align:top;
 }
 
/* --- Category Name, Description and Image ---
P.catname: The alignment of the category name 
P.catdesc: The alignment of the category description
IMG.catimage: The properties of the category image 
TD.catimage: The alignment of the category image 
TD.catname: The alignment of the category name 
TD:catnavigation: the alignment of the top category navigation
*/

P.catname { 
text-align: center; 
margin-top: 10px; 
margin-bottom: 0px; 
vertical-align:top; 

}

P.catdesc { 
margin-top: 0px; 
margin-bottom: 4px; 
vertical-align:top; 
}

IMG.catimage { 
border:0px; 
border-thickness: 1px; 
border-color: #000; 
border-style: solid; 
vertical-align:top;
}

TD.catimage { 
vertical-align:middle; 
}
TD.catname { 
vertical-align:bottom; 
text-align: center; 
}

TD.catnavigation { 
vertical-align:top; 
text-align: left; 
}

/* --- Product Options on Product Page --- */

span.prodoption {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

/* --- Product Options on Product Detail Page --- */

span.detailoption {
text-align: center;
font-family: Verdana, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

/* --- Product Options Font --- */

SELECT.prodoption { 
font-size: 11px; 
font-family : Verdana; 
color : #000000;
}

/* --- Top Product Navigation --- 
It changes the format of the top product navigation eg. Home >> Product. 
*/

td.prodnavigation { 
font-size: 11px; 
font-family : Verdana; 
color : #000000;
}

P.prodnavigation { font-size: 11px; 
font-family : Verdana; 
color : #000000;
}


.topsearchpanel { 
font-size: 11px; 
font-family : Arial, helvetica, sans-serif; 
text-align: right;
font-weight: bold;
color : #000000;
}


.toplinetext {
background-color: #009900;
text-align: center;
color: #FFFFFF; 
font-size: 10px; 
font-family: face = Arial, Helvetica, sans-serif
}

/* This section is for the Dynamic Category Menu - Pop-Out Version */
	
/* ul.ectmenu-mensa - Custom Test */
	.ectmenu-mensa {
	color: #CC0000;
	}
	
   /* ul.ectmenu1 - The properties of the vertical home categories */
	ul.ectmenu1 {
	list-style: none;
	border:0px solid;
	color: #CC0000
	font-family: Arial, helvetica, sans-serif;
	font-size: 10px;
	padding:0px;
	background-color: #EEEEEE;
	}
	
	/* li.ectmenu1 - The properties of the categories without sub categories */
	li.ectmenu1 {
	font-family: Arial, helvetica, sans-serif;
	font-size: 12px;
color: #660099;
	border: 1px solid #DDDDDD;
	padding:4px;
	background-color:#EEEEEE;
	}
	
	/* li.ectmenu1 a - The link properties */
	li.ectmenu1 a{
	display:block;
	padding:4px;
	color: #660099;
	}
	
	/* li.ectmenu1 a:hover - The mouse over properties */
	li.ectmenu1 a:hover{
	background-color: #DDDDDD;
	color: #0066FF;
	}

	/* li.ectmenuhassub1 a - The properties of the category links which spawn sub-categories */
	li.ectmenuhassub1 a{
	display:block;
	padding:4px;
	font-weight: bold;
	color:#000000
	/* background-image:url(images/arrow.gif); */
	}
	
	/* li.ectmenuhassub1 a:hover - The mouse over properties of the category links which spawn sub-categories */
	li.ectmenuhassub1 a:hover{
	display:block;
	padding:4px;
	/* background-image:url(images/arrowov.gif); */
	background-color: #DDDDDD;
	color: #0066FF;
	}
	
		/* .shiboriswatchtext - For Shibori Tablecloth Swatches */
	.shiboriswatchtext {
	font-size: 9px;
	font-weight: bold;
	margin:0 auto; text-align:center;
	}
	



/* --- ADDITIONAL INFORMATION ---
In version 4.9.0 we added some new classes which are specific to the product detail page:

div.detailid: The properties of the text "Product ID" 
div.detailname: The properties of the product name on the product detail page 
div.detaildiscounts: The properties of the discounts text for the product detail page
td.detailimage: The alignment of the product image on the product detail page 
img.prodimage: The properties of the product image 
div.detaildescription: The properties of the text in the long product description
span.detailoption: The properties of the product options on the product detail page
div.detailprice: The properties of the price on the product detail page 
div.detailcurrency: The properties of the alternative currencies on the product detail page

The product page

In version 4.9.0 we added some new classes which are specific to the product page:

div.prodid: The properties of the text "Product ID" 
div.prodname: The properties of the product name on the product page 
div.proddiscounts: The properties of the discounts text for the product page 
td.prodimage: The alignment of the product image on the product page 
img.prodimage: The properties of the product image 
div.proddescription: The properties of the text in the short product description
span.prodoption: The properties of the product options on the product page 
div.prodprice: The properties of the price on the product page 
div.prodcurrency: The properties of the alternative currencies on the product page

In version 5.1.3 we added the possibility of editing the list price display, typically people would want to center the text like this:

div.listprice {
text-align: center; 
}

Please note that the strikethrough and font color are set in vsadmin/inc/languagefile.php
For the product detail page the class would be div.detaillistprice and was added in version 5.2.6

Editing the cart thumbnail image
Version 5.4 saw the introduction of adding a thumbnail image to the cart. 
This has its own class: 

img.cartimage { 
width: 100px;
border:1px; 
}

Extra image classes
There are two classes associated with the extra images. This for example will control the formatting of the text "1 of 5"

span.extraimage{ 
color: #CC0000; 
} 

and this just for the first number 

span.extraimagenum{
color: #000; 
}

Giant images

The text associated with the giant image has two classes 

.giantimgname{ 
background-color:blue; 
}

will give the product name a blue background 

.giantimgback{ 
background-color:yellow;
}

will give the "Back to product page" text a yellow background.


Email and thanks page receipts

These are the classes associated with the email receipt

.receiptbody - the background color of the email receipt 
.receiptoption - the background color of the product option row 
.receipthr - the horizontal rule 
.receipthl - the highlighted product row
.reciptheading - the header row

For example:

.receiptbody{background-color:#FFF6F2;} 
.receiptoption{background-color:#FFE6E6;} 
.receipthr{height: 0;border-width: 1px 0 0 0;border-style: solid;border-color: #9EBE25;}
.receipthl{background-color:#FDD6E8;} 
.receiptheading{background-color:#980048;color: #FFFFFF;font-weight:bold; }


Product search filter
To show the product filter text with green text and a green border around a gray box:

td.prodfilter { 
color: #44BA04; 
font-weight:bold; 
}

input.prodfilter { 
border: 1px solid #44BA04; 
background-color: #EDEDED; 
}

*/