/*  -----------------------------------------------------------------
    Styles prefixed with a '#' apply to unique elements with the
    specified id, whereas those prefixed with a '.' represent a style
    class that may apply to multiple elements.
    -----------------------------------------------------------------
*/



/*  -----------------------------------------------------------------
    Top-level div that contains everything
    -----------------------------------------------------------------
*/
#everything
{
}

#container {
	width: 916px;
	background-color: #FFFFFF;
	border: 8px solid #FFFFFF;
}

#homepageText {
	clear: both;
}

/*  -----------------------------------------------------------------
    Majority of textual elements
    -----------------------------------------------------------------
*/
DIV,
P,
TD,
PRE {
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 13px;
}

/*  -----------------------------------------------------------------
    Images
    -----------------------------------------------------------------
*/
IMG {
	border: 0;
}

/*  -----------------------------------------------------------------
    Drop-down lists
    -----------------------------------------------------------------
*/
SELECT {
	font-size: 10px;
	margin: 4px;
}

/*  -----------------------------------------------------------------
    Field labels used in tables
    -----------------------------------------------------------------
*/
.tablelabel,
.itemFieldLabelTD,
.detailFieldLabel {
	text-align: right;
	color: #666666;
	white-space: nowrap;
}

.detailFieldValue {
    text-align: left;
}

.pageLink {
	text-align: center;
	vertical-align: top;
	color: #666666;
}

.tablecontent {
}

#contactCaption,
#registerCaption {
	font-weight: bold;
}

.paypalAddButton,
.normalAddButton,
.pageButton,
.quickSearchButton,
.cartButton,
.button {
	font-size: 10px;
	margin: 4px;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #CCCCCC;
	cursor: pointer;
}

/* ============================= id divs and classes within the template =======================================
   (note that elements with borders should have IE hasLayout property by setting a dimension
    - see http://www.satzansatz.de/cssd/onhavinglayout.html)
*/
#header {
}

#body {

}

#banner {
	float: right;
	background-color: #FFFFFF;
}

#bannerImg {

}

#businessName {
	font-size: 24px;
	text-align: right;
}

#introduction {
	font-size: 14px;
	font-weight: bold;
	text-align: right;
}

#topNav {

}

#topNavList {
	padding: 0;
	color: #00fff;
	white-space: nowrap;
	list-style-type: none;
	margin-bottom: 8px;
}

.topNavItem {
	white-space: nowrap;
}

.topNavLink {
	color: #666666;
	text-decoration:none;
	white-space: nowrap;
}

.topNavLink:hover {
	color: #000000;
}

#searchCatCustomNav {
	clear: both;
}

#viewCart {
	float: left;
}

#quickSearch {
	float: left;
	margin-right: 24px;
}

#categoryNav {
	float: left;
}

#customPageNav {
	float: left;
}

#categoryLabel {
	font-weight: bold;
	color: #666666;
	clear: both;
	margin-top: 8px;
	margin-bottom: 8px;
}

#bodyText {
}

#footer {
	text-align: center;
	padding: 4px;
	color: #666666;
}

#footer A {
	color: #333333;
}

body {
	margin: 0px;
	clear: both;
	background-color: #F5F5F5;
	background-image: url(image/body_bk.jpg);
	background-repeat: repeat-x;
}

/* .itemListPage, */
.cleared {
	clear: both;
}

/* ============================= homepage ===================================================================
*/
#specialOffers {
	text-align: center;
	width: 97%;
	border: 1px solid #CCCCCC;
	padding: 8px;
	text-align: left;
}

#specialOffers a {
	color: #666666;
}

.specialOffer {
	margin: 4px;
	padding: 4px;
	float: left;
	height: 200px;
	width: 150px;
	text-align: center;
	border: 4px solid #FFFFFF;
}

.specialOffer a:hover {
	text-decoration: none;
}

.specialOffer:hover {
	cursor: default;
	border-color: #666666;
}

.specialOfferCaption {
	font-size: 14px;
	white-space: nowrap;
	color: #666666;
	font-weight: bold;
}

.specialOfferPrice {
	font-size: 14px;
	font-weight: bold;
}

.specialOfferPicture {
	font-size: 14px;
	font-weight: bold;
	margin-top: 8px;
}

/* ============================= category stuff ===================================================================
*/
#categoryInfo {
	border: 1px dotted;
	padding: 8px;
	width: 97%;
}

.subcatBox {
	display: table;
	clear: bottom;
}

.subcatBox .subcatLink {
	text-decoration: underline;
}

.subcatLink,
.subcatlink {
	color: #666666;
	font-weight: normal;
}

.subcatLink img {
	float: left;
	border: 0;
}

#categoryInfoPicture {
}

#categoryInfoTitle {
	font-size: 24px;
}

#categoryInfoDescription {
	color: #51543D;
	margin-bottom: 12px;
}

/* ============================= items ===================================================================
*/
.itemTableOuter td {
	width: auto;
}

.itemTableOuter {
	border: 4px solid #CCCCCC;
	width: auto;
	float: left;
	margin: 8px;
}

.itemTableOuter:hover {
	border: 4px solid #999999;
	cursor: default;
}


.itemTableOuter {
	width: 400px;
	height: 250px;
}

.itemTableInner {
	width: auto;
}

.itemTablePictureTD {
	padding: 12px;
}

.detailTable {
	border: 1px dotted #333333;
	margin: 4px;
	padding: 8px;
}

.cartOptions {
	background-color: #F3F3F3;
	padding: 2px;
	border: 1px solid #999999;
}

.categoriesDropdown {
    color: #000000;
	font-size: 10px;
	background-color: #FFCCFF;
	margin: 4px;
}

.customPageDropdown {
    color: #000000;
	font-size: 10px;
	background-color: #FFCCFF;
	margin: 4px;
}
.searchInput {
	border: 4px solid #C8D0CB;
}

#subCategoriesLabel {
	display: none;
}

#subCategories {
	float: left;
	text-align: left;
}