/*************************************************************************************
	Site:		Bear Necessities Online

	Author:		Jeffrey Siegel

	Contents:
	==============
	1:: Global Style
	2:: Layout Styles
	3:: Header Styles
	3A:: Footer Styles
	4:: Navigation Styles
	5:: Content Styles
		5.1:: Product Info
	6:: index.php Image Styles
	7:: Tools Column Styles
		7.1:: Subcategory Display 
		7.2:: Mini Shopping Cart 
		7.3:: Checkout Progress Bar   
	8:: Display order classes
	9:: Account - Address Book Display Styles
	10:: From osCommerce Stylesheet.css
	
--------------------------------------------------------------------------------------

	Colors:
	==============
	Standard Link                     #CC0000 (Deep Red)
	
	H1/Heading                        #990000 (Dark Red/Maroon)
	H2/Subheadings                    #000000 (Black)
	
	Input Requirement                 #FF0000 (Bright Red)
	
	Box:
		Border                          #DDDDDD (Light Gray)
		Background                      #FFF5F5 (Ultra-Light Pink)
	
	Body Background                   #D1D1D1 


	
*************************************************************************************/

/*************************************************************************************
		1::			Global Styles
*************************************************************************************/
* {
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:11px;
		font-weight:normal;
}

body {
		padding:0;
		margin:0;
		text-align:center;
		background-image:url(images-index1/backgroundLower.gif); 
		height:100%}

img {border:none}

a {text-decoration:none; color:#CC0000;}
	a:hover {text-decoration:underline;}

b {font-weight:bold}

.heading {font-size:14px; font-weight:900; text-align:left; padding-bottom:5px;}/* for headings which are not block elements*/
h1 {font-size:18px; color:#990000; font-weight:bold; text-align:left; padding:5px 0; margin:0px;}
h2 {font-size:14px; font-weight:bold; text-align:left; margin-bottom:0px;}
h3 {font-size:12px; font-weight:bold; text-align:left; padding:0px; margin:0px;}

.floatLeft{float:left}
.floatRight{float:right}


.box {border:solid 1px #DDDDDD; background:#FFF5F5; padding:10px 15px;}
.inputRequirement {color: #FF0000; }
.addressLabel {padding:5px 20px 5px 0; font-size:1.2em;}

form {z-index:-1;}
table {border:0px; border-collapse:collapse;}

.clearingBox {width:100%; height: 1%; clear:both; float:none;}

input.email { font-size:9px; color:#000000; height:12px; width:150px; background-color:#FFFFFF; border-width:1px;}

/*************************************************************************************
		2::		Layout Styles
*************************************************************************************/


.body {	
		width:752px;
		height:auto;
		margin:0 auto;
		padding:0 24px;
		text-align:center;
		background:#D1D1D1 url(images-index1/backgroundUpper.gif) repeat-y center;
		overflow:hidden;
}
		
.footer{	
		width:800px;
		text-align:center;
		margin:0 auto;
		padding-bottom:40px;
}


#specialProducts{
		width:528px;
		height:auto; 
		margin:0 0 -2000px 0;
		padding:10px 12px 2020px 11px; 
		text-align:left; 
		float:left; 
}

#toolsColumn{
		width:184px;
		height:auto; 
		float:left;
		background:url(images-index1/leftShadow.gif) left repeat-y;
		padding: 0 5px 2020px 12px; 
		margin:0 0 -2000px 0;
}	

/*************************************************************************************
		3::			Header Styles
*************************************************************************************/
#header {
		width:752px; 
		height:100px;
		color:#DDDDDD; 
		font-size:9px; 
		text-align:left;
		background-repeat:no-repeat; 
		background-color:#666666; 
		position:relative;
		overflow:hidden;
}
	
#logo{
		position:absolute;
		bottom:15px; 
		left:12px; 
		z-index:1;
}

#title{
		position:absolute; 
		bottom:35px; 
		left:175px;
}

#accountBar{position:absolute; right:12px; bottom:9px; text-align:left; z-index:12; color:#000000; }
	#accountBar a {color:#EEEEEE; font-size:14px; font-weight:bold;}
	#accountBar a:hover{color:#FFFFFF}
	#accountBar ul{display:inline; list-style-type:none; margin:0px; padding:0px;}
		#accountBar ul li{display:inline; list-style-position:inside; list-style:none; border-left:1px solid #EEEEEE; padding:0px 1em; margin:3px 0; font-size:9px;}
		#accountBar ul li.firstListItem{border:0px;}
		#accountBar ul li.customerName{border:0px; font-weight:bold; font-size:11px; margin:0px;}

#searchFunction{position:absolute; right:0px; top:1em; z-index:1; width:200px; height:3em;}
	#searchFunction form{}
	#searchFunction input{position:absolute; top:0;}
		#searchFunction input#keywords{left:12px; width:175px;}
		#searchFunction input#searchButton{left:120px; top:2em;}
	#searchFunction #advancedSearch{position:absolute; left:12px; top:2em;}
	#searchFunction a{color:#EE0000;}
	#searchFunction a:hover{color:#FF0000;}


#infoBar{ 
		position:absolute; 
		width:100%; 
		height:30px; 
		bottom:0px; 
		background:url(images-index1/infoBarBackground.gif) repeat-x bottom #FF0000;
}

#breadcrumb{
		display:inline; 
		position:absolute; 
		bottom:5px; 
		left:15px; 
		color:#000000; 
		z-index:1;
}
	#breadcrumb a{color:#F4F4F4;}


/*************************************************************************************
		3A::			Footer Styles
*************************************************************************************/

#footerAds{
		width:752px;
		height:100px;
		padding:0 24px;
		background:url(images-index1/backgroundUpper.gif) repeat-y center;
}
	#footerAds a:hover{
			color:#FFFFFF;
			text-decoration:none;
	}

	#footerAds a:hover h3{
			color:#FFFFFF;
	}
	#footerAds h3{
			color:#EEEEEE;
			font-weight:900;
			margin:0;
			font-size:18px;
	}
	#footerAds ul{
			background:#333333;
			height:26px;
			margin:0;
			padding:0;
			border-top:solid 2px #FFFFFF;
			text-align:left;
	}
	#footerAds ul li{
			float:left;
			list-style:none;
	}
	#footerAds ul li a{
			height:90px;
			width:225px;
			padding:0 12px;
			margin:10px 0 0 0;
			border-left:2px groove #000000;
			display:block;
			background:#333333;
			color:#EEEEEE;
			font-size:12px;
	}
	#footerAds ul li a img{
			max-height:90px;			
	}
	#footerAds ul li a.first{
			width:226px;
			border-left:none;
	}
		
#bodyFooter{
		width:800px;
		height:32px;
		background:url(images-index1/footerBackground.gif) center bottom no-repeat;
		margin-bottom:40px;
}

/*************************************************************************************
		4::			Navigation Styles
*************************************************************************************/
.suckertreemenu{clear:both; height:3em; padding-bottom:2px;}

.suckertreemenu ul{
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
		height:auto;
		overflow:visible;
}

	/*Top level list items*/
	.suckertreemenu ul li{
			position: relative;
			display: inline;
			float: left;
			background-color: #999999; /*overall menu background color -JSS*/
			z-index:10;
	}

		/*Top level menu link items style*/
		.suckertreemenu ul li a{
				display: block;
				width: 70px; /*Width of top level menu link items -JSS*/
				height: 2.5em;
				overflow:hidden;
				padding: 1px 6px;
				border: 1px solid white;
				border-left-width: 0;
				text-decoration: none; text-align:center;
				font-size:12px; font-weight:bold;
				color: #F6F6F6;
		}
	
		/*1st sub level menu*/
		.suckertreemenu ul li ul{
				left: 0;
				position: absolute;
				top: 1em; /* no need to change, as true value set by script */
				display: block;
				visibility: hidden;
				height:100%;
				overflow:visible;
				z-index:100;
		}
			/*last 1st level submenu*/
			.suckertreemenu ul li ul.last{ left:-92px;}

			/*Sub level menu list items (undo style from Top level List Items)*/
			.suckertreemenu ul li ul li{
			display:list-item;
			float: none;
			}

				/* Sub level menu links styles */
				.suckertreemenu ul li ul li a{
						display: block;
						width: 160px; /*width of sub menu levels*/
						height:auto;
						color: white;
						text-decoration: none; text-align:left;
						padding: 1px 5px;
						border: 1px solid #ccc;
				}
				.suckertreemenu ul li a:hover{ background-color:#333333;color:#FFFFFF; text-decoration:none;}
					.suckertreemenu ul li ul li a.lastSubMenu{ text-align:right;}



/*************************************************************************************
		5::			Content Styles
*************************************************************************************/

.productThumb {width:122px; height:160px; text-align:center; float:left; padding:0 5px 10px 5px; overflow:hidden; border:0px dotted #999999;}
	.productThumb a{color:#555555; font-size:11px; font-weight:bolder; text-align:center; text-decoration:none; }
	.productThumb a:hover{color:#CC0000; text-decoration:none }
	.productThumb .price {margin-right:5px; text-align:right; color:#555555; font-size:11px; font-weight:normal;}
	.productThumb img{ background:#FFFFFF; padding:0px; margin:10px; border:dotted 1px #CCCCCC; text-decoration:none; }


#productSearch{float:left; width:180px; height:100%; padding:10px 10px 10px 10px; background:#E6E6E6}
	#searchForm{float:left; position:relative; text-align:left; z-index:0;}


#bottomAdSection{float:left; width:752px; height:74px; background:url(images-index1/bottomAdBackground.gif) no-repeat #999999; color:#FFFFFF; }

#bottomAdSection a{display:block; text-decoration:none; float:left; color:#FFFFFF; font-size:14px; font-weight:bold; cursor:pointer}					
#bottomAdSection a:hover{text-decoration:underline;}
#storeLocationAd{ float:left;
					width:188px; height:54px; padding:7px 0px 13px; text-align:center; margin-right:3px;}
#customProductsAd{ float:left;
					width:223px; height:66px; padding:4px 12px; margin-right:3px; line-height:1.25em;}
#verizonAd{ float:left;
					width:267px; height:28px; padding:46px 0px 0px 12px;}


.boldNumber{font-size:11px;}

/*  5.1::		Product Info
------------------------------------------------------------------------------------*/
#productBigImage{
		width:328px;
		text-align:center;
		padding-top:4px;
		float:left;
}

	#productBigImage a:hover{
			text-decoration:underline;
	}
		
		#productBigImage a img{
				display:block;
				margin:0 auto;
		}
		
		#productBigImage a:hover img{
				text-decoration:none
		}

#productAttributes .attribute{
		float:left;
		padding:0 2px 0 0;
}


/*************************************************************************************
		6::			index.php Image Styles
*************************************************************************************/
#imageContent{background:url(images-index1/graduationProcession.jpg) #000000 no-repeat;
				font-size:12px; color:#FFFFFF;
				width:752px; height:223px;
				padding:0 0 5px 0;
				float:left;  overflow:hidden;}
#imageContent h1{color:#FFFFFF; margin-top:5px;}
/*#imageContent div{background:url(images-index1/blueTransBackground.gif) repeat; border:solid #8ca5e4 1px;
				margin: 10px auto 10px 40px; padding:5px; width: 400px;

}
*/

.categories { 
		width:528px;
		border-bottom:2px #000000 groove;
}

	.categories a{
			color:#AAAAAA;
			font-weight:bold; 
			text-decoration:none;
			font-size:14px;
			float:left;
			width:176px;
			text-align:center;
			margin: 10px 13px;
	}
		.categories a:hover{color:#CC0000; text-decoration:none}
	
	.categories img{
			width:150px;
			height:150px;
	}

/**************************************************************************************
		7::   Tools Column Styles
**************************************************************************************/
.toolsHeading {
		display:block; 
		color:#990000; 
		font-size:18px; 
		font-weight:bold; 
		text-decoration:none; 
		margin-left:2px;
}
	a:hover .toolsHeading{color:#FF0000;}

/* 	7.1::		Subcategory Display
-------------------------------------------------------------------------------------*/
#subcategoryDisplay{
		text-align:left;
		font-size:14px;
}

	#subcategoryDisplay ul{
			list-style:none;
			margin:0;
			padding:0;
	}
		#subcategoryDisplay li{
				font-size:12px;
				font-weight:bold;
				border-bottom:#EAEAEA 1px dashed;
				padding:2px 5px;
		}

			#subcategoryDisplay li a{
					font-size:12px;
					color:#555555;
					display:block;
					padding:2px 5px;
					margin:-2px -5px;					
					/*font-weight:bold;*/
}

			#subcategoryDisplay li a:hover{
					color:#CC0000;
					text-decoration:none;
					background:#EFEFEF;
					padding:2px 15px;					
			}			


/* 	7.2::		Mini Shopping Cart 
-------------------------------------------------------------------------------------*/
#miniCartInfo{
		text-align:left; 
		width:100%; 
		height:102px; 
		padding:10px 0; 
		margin-top:5px; 
		background:url(images-index1/bearNecessitiesShoppingBag.gif) no-repeat right top;
}

	#miniCartInfo a:hover{text-decoration:none;}

		#miniCartInfo a:hover #viewYourCartLink{ visibility:visible;}
		#miniCartInfo a:hover #cartItems{color: #FF0000;}
		#miniCartInfo a:hover #cartTotal{ font-weight:bold;}

	#miniCart table{text-align:left; clear:both;}
		#miniCart table a:hover{ text-decoration:underline;}


#viewYourCartLink{
		color:#000000; 
		visibility:hidden; 
		text-decoration:underline; 
		display:block; 
		width:109px; 
		text-align:center; 
		margin-left:2px;
}

#cartItems{font-weight:bold; color:#000000;}

#cartItems, #cartTotal{
		padding:0px 10px 5px; 
		text-align:left; 
		font-size:14px; 
		display:block;
}

.cartTitle{padding:5px; color:#000000; font-size:12px;}
a:hover .cartTitle{color:#000000; text-decoration:none;}

#checkoutButton{margin:0 15px;}

/*  7.3::		Checkout Progress Bar   
---------------------------------------------------------------------------------------*/
#checkoutProgressBar{text-align:left; width:100%; padding-top:10px;}

#checkoutProgressBar a{
		display:block;
		width:80px;
		height:27px;
}

#checkoutProgressBar ul{
		list-style-type:none; 
		margin:0; 
		padding:0;
}

#checkoutProgressBar li{
		height:27px; 
		margin:0 0 0 5px; 
		background-repeat:no-repeat;
}

.shippingBarComplete a:hover{background:url(images-index1/shippingBarOver.gif)}
.paymentBarComplete a:hover{background:url(images-index1/paymentBarOver.gif)}

.shippingBar {background:url(images-index1/shippingBar.gif)}
.shippingBarCurrent {background:url(images-index1/shippingBarCurrent.gif)}
.shippingBarCurrentAddress {background:url(images-index1/shippingBarCurrentAddress.gif)}
.shippingBarComplete {background:url(images-index1/shippingBarComplete.gif)}
.shippingBarSuccess {background:url(images-index1/shippingBarSuccess.gif)}

.paymentBar {background:url(images-index1/paymentBar.gif)}
.paymentBarCurrent{background:url(images-index1/paymentBarCurrent.gif)}
.paymentBarCurrentAddress {background:url(images-index1/paymentBarCurrentAddress.gif)}
.paymentBarComplete {background:url(images-index1/paymentBarComplete.gif)}
.paymentBarSuccess {background:url(images-index1/paymentBarSuccess.gif)}

.confirmBar {background:url(images-index1/confirmBar.gif)}
.confirmBarCurrent {background:url(images-index1/confirmBarCurrent.gif)}
.confirmBarComplete {background:url(images-index1/confirmBarComplete.gif)}
.confirmBarSuccess {background:url(images-index1/confirmBarSuccess.gif)}

.successBar {background:url(images-index1/successBar.gif)}
.successBarCurrent {background:url(images-index1/successBarCurrent.gif)}
.successBarComplete {background:url(images-index1/successBarComplete.gif)}
.successBarSuccess {background:url(images-index1/successBarSuccess.gif)}


/**************************************************************************************
		8::		Display order classes (account.php, account_history_info.php, checkout_confirmation.php)
**************************************************************************************/
table.orderDisplayTable{ width:100%; border-collapse:separate; border-spacing:0px;}

	table.orderDisplayTable th {color:#FFFFFF; background:#333333; font-weight:bold; font-size:1.2em; text-align:left;}
		table.orderDisplayTable th.right {text-align:right; font-size:0.9em;}

	table.orderDisplayTable td.address {padding:0 15px;}
	
	table.orderDisplayTable tr {background:#FFFFFF; vertical-align:top;}
		table.orderDisplayTable tr.odd {background:#FFFFFF}
		table.orderDisplayTable tr.even {background:#EEEEEE}

table.productsTable {border-bottom:1px solid #333333;}
/**************************************************************************************
		9::		Account - Address Book Display Styles (address_book.php)
**************************************************************************************/
.addressBook {
		border:#DDFFDD 1px solid;
		width:100%;
}


.addressBook a{text-align:right;}
/**************************************************************************************
		10::		From osCommerce Stylesheet.css
**************************************************************************************/
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; vertical-align:top;}
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
.messageTable {width:75%; margin:5px 11%;}
.messageTable img{padding-top:2px;}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor:pointer; }
.moduleRowSelected { background-color: #E9F4FC; }