/*----------------------------------------------------------------------------------------
home.css
----------------------------------------------------------------------------------------*/

/* typography
----------------------------------------------------------------------------------------*/
	
/* #content
----------------------------------------------------------------------------------------*/
#content { background: #fff; }
	#content #content_main { padding: 15px 10px 35px 0; }
	
/* .categories
----------------------------------------------------------------------------------------*/
.home_top { margin: 0 0 20px 0; }
.categories {
	float: left;
	width: 171px;
	height: 290px;
	background: url(/html/img/bg/bg_categories_home.gif) no-repeat left bottom;
	margin: 0 0 0 10px;
	display: inline;
}
	.categories .category_content { padding: 12px 0 0 0; }
	.categories .hdr_pop_cat {
		color: #de5400;
		text-transform: uppercase;
		font-size: 1.1em;
		border-bottom: 1px solid #e1e0e0;
		height: 15px;
		background: url(/html/img/hdr/hdr_pop_cat.gif) no-repeat left bottom;
		text-indent: -1000em;
		margin: 0 0 7px 0;
		position: relative;
		left: 8px;
		width: 150px;
	}
	.categories h3 {
		font-size: 1.2em;
		line-height: 1.35;
		font-weight: bold;
		padding: 0 10px 0 0; /*PXP386:static popular categories on home page:6/14/2011:By kinjal 0 45px 0 0 before */
		margin: 0 0 9px 10px;
	}
		.categories h3 a { color: #4B2113; }
	.categories ul { margin: 0 0 11px 0;}
		.categories ul li {
			font-size: 1.1em;
			line-height: 1.9;
			color: #666;
			height: 25px;
			margin: -5px 0;
			padding: 0 10px;
			position: relative;
			z-index: 51;
		}
		.categories ul li.active { background: url(/html/img/bg/bg_cat_hover.gif) repeat-x left top; }
			.categories ul li a { color: #666; }
			.categories ul li.active a,
			#container #wrapper.categories ul li.active a:hover { 
				color: #34789b;
				background: url(/html/img/icon/icon_arrow_right_cat.gif) no-repeat right 4px;
				padding: 0 10px 0 0;
			}
			.categories ul li.active .overlay a,
			#container #wrapper.categories ul li.active .overlay a:hover { 
				background: none;
				padding: 0;
			}
		.categories ul li .overlay {
			background: url(/html/img/bg/bg_overlay_cat_head.png) no-repeat left top;
			_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/html/img/bg/bg_overlay_cat_head.png', sizingMethod='crop');
			_background: none;
			padding: 6px 0 0 0;
			margin: -37px 0 0 0;
			left: 169px;
			width: 257px;
		}
			.categories ul li .overlay .overlay_content {
				background: url(/html/img/bg/bg_overlay_cat_content.png) no-repeat left bottom;
				_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/html/img/bg/bg_overlay_cat_content.png', sizingMethod='scale');
				_background: none;
				zoom: 1;
				padding: 6px 18px 20px 18px;
			}
		.categories ul li .overlay h4 {
			font-weight: bold;
			font-size: 1.0em;
			position: relative;
			margin: 0 0 4px 0;
		}
		.categories ul li .overlay ul { margin: 0; }
			.categories ul li .overlay ul li {
				font-size: 1.0em;
				height: auto;
				padding: 0;
				margin: 0;
			}
		.categories ul li .overlay a { 
			color: #34789b; 
			float: none;
		}
		.categories ul li .overlay ul li em { 
			font-style: normal;
			color: #7b7b7b;
		}
		.categories ul li .overlay ul li a:hover em { color: #666; }
			
/* #flash
----------------------------------------------------------------------------------------*/
#flash {
	width: 760px;
	float: right;
	height: 290px;
}
	
/* .home_slide
----------------------------------------------------------------------------------------*/
.home_slide {
	padding: 0 0 0 10px; 
	position: relative;
}
	.home_slide .hdr_common {
		font-size: 1.6em;
		margin: 0 0 -4px 0;
	}
		.home_slide .hdr_common em {
			font-style: normal;
			color: #848484;
			font-size: .8em;
			margin: 0 0 0 6px;
			font-weight: normal;
		}
	.home_slide .slider {}
		.home_slide .slider .slide_prev { 
			background-image: url(/html/img/btn/btn_slider_home_prev.gif);
			width: 30px;
			height: 162px;
			position: absolute;
			left: 0;
			top: 14px;
			border-top: 1px solid #dedbdb;
			border-bottom: 1px solid #dedbdb;
		}
		.home_slide .slider .slide_next { 
			background-image: url(/html/img/btn/btn_slider_home_next.gif);
			width: 29px;
			height: 162px;
			position: absolute;
			left: 911px;
			top: 14px;
			border-top: 1px solid #dedbdb;
			border-bottom: 1px solid #dedbdb;
		}
		.home_slide .slider .shade {
			width: 40px;
			height: 163px;
			top: 14px;
		}
		.home_slide .slider .shade.left {
			background-image: url(/html/img/bg/bg_slider_shade_left.png);
			_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/html/img/bg/bg_slider_shade_left.png', sizingMethod='image');
			_background: none;
			left: 30px;
		}
		.home_slide .slider .shade.right {
			background-image: url(/html/img/bg/bg_slider_shade_right.png);
			_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/html/img/bg/bg_slider_shade_right.png', sizingMethod='image');
			_background: none;
			left: 871px;
		}
		.home_slide .slider .overflow {
			/* height: 162px; */
			height: 301px;
			padding: 20px 0 0 0;
		}
			.home_slide .slider .overflow .slides { 
			/* height: 162px; */
				height: 301px;
				margin: 14px 0 0 0;
				padding: 0 0 0 29px;
			}
				.home_slide .slider .overflow .slides .slide { width: 940px; }
						.home_slide .slider .overflow .slides ul {
							position: relative;
						}
						.home_slide .slider .overflow .slides ul li {
							height: 162px;
							width: 187px;
							background: url(/html/img/bg/bg_slider_home_product.gif) repeat-x left bottom;
							border-right: 1px solid #dedede;
							border-top: 1px solid #dedbdb;
							border-bottom: 1px solid #dedbdb;
						}
							.home_slide .slider .overflow .slides ul li h4 {
								font-weight: bold;
								font-size: 1.2em;
								text-transform: uppercase;
								margin: 15px 0 0 0;
							}
								.home_slide .slider .overflow .slides ul li h4 a em {
									background: url(/html/img/icon/icon_arrow_right_blue_slider.gif) no-repeat right -39px;
									padding: 0 14px 0 0;
									margin: 0 0 0 14px;
									font-style: normal;
								}
								.home_slide .slider .overflow .slides ul li h4 a:hover em,
								.home_slide .slider .overflow .slides ul li.active h4 a em,
								.home_slide .slider .overflow .slides ul li.active h4 a:hover em { 
									background-position: right 4px; 
									color: #d46300;
								}
								
	/* hover state */
	.home_slide .slider .overflow .slides ul {}
		.home_slide .slider .overflow .slides ul li.active {
			background: url(/html/img/bg/bg_slider_hover.png) no-repeat left bottom;
			_background: url(/html/img/bg/bg_slider_hover_8bit.gif) no-repeat left bottom;
			width: 230px;
			height: 301px;
			/* margin: -15px -27px -15px -15px; */
			margin: -15px -20px -15px -22px;
			margin: 0px -20px -15px -22px\9; /* PXP295: Fix Main page's Top Selling Categories issue on IE(Section was going up when hover over) : 3/21/2011 by Vicky */
			position: relative;
			z-index: 11;
			border: 0;
		}
		.home_slide .slider .overflow .slides ul li.active h4 { 
			margin: 31px 14px 5px 15px;
			padding: 0 0 0 7px;
			background: url(/html/img/bg/bg_slider_item_active.jpg) repeat-x left bottom;
		}
	.home_slide .slider .overflow .slides ul li ul { 
		display: none; 
		border-top: 1px solid #e1e1e1;
		margin: 0 32px;
		padding: 12px 0 0 0;
		position: static;
	}
	.home_slide .slider .overflow .slides ul li.active ul { display: block; }
		.home_slide .slider .overflow .slides ul li ul li {
			font-size: 1.1em;
			float: none;
			width: auto;
			height: auto;
			border: 0;
			background: url(/html/img/bullet/bullet_arrow_gray_slider.gif) no-repeat left 4px;
			padding: 0 0 0 9px;
			position: relative;
			margin: 0 -12px 3px 0;
		}
			.home_slide .slider .overflow .slides ul li ul li a {  }
	

/* .home_btm
----------------------------------------------------------------------------------------*/
.home_btm { 
	padding: 0; 
	height: 385px;
	position: relative;
	z-index: 10;
}
	.home_btm .hdr_diy {
		text-transform: uppercase;
		font-weight: bold;
		font-size: 1.4em;
		color: #de5400;
		background: url(/html/img/hdr/hdr_diy.gif) no-repeat left bottom;
		height: 14px;
		text-indent: -1000em;
		margin: 0 0 11px 0;
	}
	.home_btm .hdr_howto {
		color: #fff;
		font-style: italic;
		font-weight: bold;
		font-size: 1.6em;
		height: 23px;
		width: 150px;
		text-indent: -1000em;
		background: url(/html/img/hdr/hdr_howto.gif) no-repeat left bottom;
	}
	.home_btm .hdr_tip {
		color: #4b2113;
		font-style: italic;
		font-weight: bold;
		font-size: 1.6em;
		height: 23px;
		width: 125px;
		text-indent: -1000em;
		background: url(/html/img/hdr/hdr_tip.gif) no-repeat left bottom;
	}
	.home_btm .modules {
		position: absolute;
		bottom: 0;
		margin: 0 0 0 10px;
		z-index: 1;
	}
		.home_btm .modules .module {
			float: left;
			width: 306px;
			height: 163px;
			margin: 0 10px 0 0;
			position: relative;
			z-index: 1;
		}
			.home_btm .modules .module .module_content { padding: 0 14px; }
		.home_btm .modules .module.left { 
			width: 308px; 
			height: auto;
			margin-top: -19px;
		}
			.home_btm .modules .module.left a {
				display: block;
				width: 308px;
				height: 183px;
				text-indent: -1000em;
				background: url(/html/img/tout/tout_video_library.jpg) no-repeat left bottom;
			}
		.home_btm .modules .module.center {
			background: #6e9aba;
		}	
			.home_btm .modules .module .module_head {
				background: url(/html/img/bg/bg_bars_horiz_gray.gif) repeat-x left bottom;
				padding: 16px 0 3px 0;
				margin: 0 0 6px 0;
			}
				.home_btm .modules .module .module_head .slide_controls { 
					float: right;
					margin: -4px 0 0 0;
					
				}
					.home_btm .modules .module .module_head .slide_controls a {
						float: left;
						width: 19px;
						height: 19px;
						margin: 0 0 0 6px;
						background-repeat: no-repeat;
						background-image: url(/html/img/btn/btn_slider_howto.gif);
					}
					.home_btm .modules .module .module_head .slide_controls a.slide_prev { background-position: left bottom; }
					.home_btm .modules .module .module_head .slide_controls a.slide_next { background-position: right bottom; }
					.home_btm .modules .module .module_head .slide_controls a.slide_prev:hover { background-position: left top; }
					.home_btm .modules .module .module_head .slide_controls a.slide_next:hover { background-position: right top; }
					

				.home_btm .modules .module .module_head h4 { float: left; }
			.home_btm .modules .module.center .slider { height: 95px; }
				.home_btm .modules .module.center .slider .overflow { height: 95px; }
					.home_btm .modules .module.center .slider .overflow .slides { height: 95px; }
						.home_btm .modules .module.center .slider .overflow .slides .slide { width: 283px; }
			.home_btm .modules .module.center .col_a {
				float: left;
				width: 95px;
				margin: 0 12px 0 0;
			}
			.home_btm .modules .module.center .col_b {
				float: left;
				width: 169px;
			}
			.home_btm .modules .module.center h5 {
				font-weight: bold;
				font-size: 1.4em;
				margin: 0 0 2px 0;
			}
				.home_btm .modules .module.center h5 a { color: #c4e6ff; }
				#container #wrapper .home_btm .modules .module.center a:hover { color: #e9f2f9; }
				.home_btm .modules .module.center p { color: #fff; }
					.home_btm .modules .module.center p a { color: #bde1fb; }
		.home_btm .modules .module.right { 
			margin: 0;
			background: url(/html/img/bg/bg_module_totd.jpg) no-repeat left bottom;
		}
			.home_btm .modules .module.right .module_head a { 
				float: right;
				font-size: 1.2em;
			}
			.home_btm .modules .module.right h5 { 
				font-size: 1.4em;
				font-weight: bold;
				color: #424242;
				line-height: 1;
				margin: 0 0 4px 0;
			}
				.home_btm .modules .module.right p.date {
					font-size: 1.1em;	
					color: #989898; 
					margin: 0 0 3px 0;
				}
				.home_btm .modules .module.right h5 em { font-style: normal;}
					.home_btm .modules .module.right h5 em { font-style: normal;}
						.home_btm .modules .module.right h5 em a { color: #424242; }
						#container #wrapper .home_btm .modules .module.right h5 em a:hover { color: #000; }
				
			.home_btm .modules .module.right p { color: #5c5c5c; }
