/*
  joy.css

  ##This file is a heavily modified version of stylesheet.css 
       by Personal Touch Comuting
*/

/* ################### RANDOM ################# */

a { color: black; }
a:hover { color: #76a04a; }
a img { border: none;  /* prevent border around linked images */ }

.imageBorder { border: 3px double green; }

.infoBox { width: 100%; }
.infoBoxHeading { font-weight: bold; }
.infoBoxContents { padding: 5 0 5 0px; }

.pageHeading { font-weight: bold; font-size: 24pt; }

.main, .smallText { font-size: 10pt; }

/* ################### RANDOM ################# */



/* ############ MAIN PAGE LAYOUT ################ */

body {
  background-color: #eeeeee;
  text-align: center;
  font-family: Verdana, Arial;
  font-size: 10pt ! important;
}

#documentContainer {
  width: 760px;
  margin: 0px auto;
  padding-bottom: 10px;
  border: solid green;
  background-image: url(images/palmtreeborder.jpg);
  text-align: left;
}

#mainDocument { width: 640px; margin-left: 120px; }

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#headercontent table {
  font-family: Verdana, Arial;
  font-size: 10pt;
}

.headerItem { width: 25%; text-align: center; }
.headerItem form { margin-top: auto; margin-bottom: auto; }

.headerMenuButton {
  width: 25%;
  margin: 2px;
  padding: 0;
  background-color: green;
  color: white;
  text-align: center;
  vertical-align: middle;
}

.headerMenuButton a { color: white; text-decoration: none; }

#leftcontent {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 1em;
  width: 120px;
}

#centercontent {
  margin-left: 130px;
  margin-right: 10px;
}

#centercontent table tr { width: 100%; }
#centercontent table { float: right; }

.titleImage { width: 490px; text-align: center; }

/* ############ MAIN PAGE LAYOUT ################ */



/* ############## CSS MENUS ################# */

/* -----------------------VERTICAL MENU----------------------------- */

ul.menuVertical {
  width: 100%; 
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-indent: none;
}

ul.menuVertical li {
  position: relative;
  list-style-type: none;
  text-align: center;
}
	
ul.menuVertical li ul {
  position: absolute;
  left: 0; 
  top: 1.2em;
  width: 100%; /* 120px */
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
}

/* Styles for Menu Items */
ul.menuVertical li a {
  display: block;
  color: white;
  background-color: green; /* IE6 Bug */
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menuVertical li { float: left; height: 1%; }
* html ul.menuVertical li a { height: 1%; }
/* End */

/* Hover Styles */
ul.menuVertical li a:hover { 
  color: white;
  background-color: #76a04a;
  text-decoration: none;
}
		
ul.menuVertical li ul li a { padding: 2px 5px; border: 1px solid #ccc;} /* Sub Menu Styles */
		
ul.menuVertical li:hover ul, ul.menuVertical li.over ul { display: block; } /* The magic */


/* -----------------------HORIZONTAL MENU----------------------------- */
ul.menuHorizontal {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul.menuHorizontal li { position: relative; }
	
ul.menuHorizontal li ul {
	position: absolute;
	left: 159px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul.menuHorizontal li a {
	display: block;
	text-decoration: none;
	color: black;
	background: #fef7e5; /* IE6 Bug */
	padding-left: 5px;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul.menuHorizontal li { float: left; height: 1%; }
* html ul.menuHorizontal li a { height: 1%; }
/* End */

ul.menuHorizontal li a:hover { color: #76a04a; } /* Hover Styles */

ul.menuHorizontal li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul.menuHorizontal li:hover ul, ul.menuHorizontal li.over ul { display: block; }

/* ############## CSS MENUS ################# */

/* ################ SHOPPING CART ############## */
#shoppingBagBox {
  width: 120px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center; 
}

#shoppingBagImage {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-right: 5px;
  height: 90px;
  background-image: url(images/shoppingbag.jpg);
  background-repeat: no-repeat;
  background-position: center;
  color: black;
}

#shoppingBagList {
  margin: 0;
  padding: 0px;
  padding-top: 40px;
  list-style: none;
}

#shoppingBagList li { position: relative; }
	
#shoppingBagList li ul {
  position: absolute;
  display: none;
  width: 200px;
  top: 0;
  left: 60px; /* Set 1px less than menu width */
  border: 3px double green;
  background-color: white;
  text-align: left;
  list-style: none;
}

#shoppingBagList li ul li { font-size: 10pt; }

/* Styles for Menu Items */
#shoppingBagList li a {
  display: block;
  text-decoration: none;
  font-size: 24pt;
  color: black;
/*  background-color: green; */  /* IE6 Bug */
}

/* Fix IE. Hide from IE Mac \*/
* html #shoppingBagList li { float: left; height: 1%; }
* html #shoppingBagList li a { height: 1%; }
/* End */

#shoppingBagList li a:hover {  } /* Hover Styles */
#shoppingBagList li ul li a { font-size: 10pt; } /* Sub Menu Styles */
#shoppingBagList li:hover ul, #shoppingBagList li.over ul { display: block; } 

/* ################ SHOPPING CART ############## */



/* ################### PRODUCT LISTING ################# */
#productListingDiv { width: 490px;}
.productListing { width: 480px; }
.productListing-heading { font-weight: bold; text-align: center; }
.productListing-data { text-align: center; }
.productListing-data img { float: left; }
.productListing-odd { }
.productListing-even { }
.productListingImage {
  width: 100px;
  height: 80px;
  border: 3px double green;
}

/* ################### PRODUCT LISTING ################# */

#xsell_products { }
#xsell_products table { float: none; margin-left: 25px; font-size: 10pt; text-align: center; } 

.checkoutBarFrom { font-size: 10pt; }
.checkoutBarCurrent { font-size: 10pt; font-weight: bold; }
.checkoutBarTo { font-size: 10pt; }

#newProductsTable {
  width: 490px;
  font-size: 10pt;
  text-align: center;
}

#categoriesTable { width: 490px; }

#checkoutTable { width: 400px; }
#checkoutTable tr { width: 100%; }

.loginBox { border: 1px solid black; margin: 5px; padding: 5px; font-size: 10pt; }
.boxText { align: center; }

#footer { font-size: x-small; clear: both;}