@import url("common.css");
@import url("browse.css");

/*
Action Envelope
- Created: 7/18/07
*/

img.header {
	margin: 0 0 16px 6px;
}

#color {
	padding: 10px 14px 45px 16px;
}

#color div.header {
	width: 100%;
	position: relative;
	z-index: 1;
}

#color a.select {
	height: 20px;
	padding: 0 0 0 10px;
	display: inline;
	background: url(../img/btn/select/color.bg.gif) no-repeat 0 0;
	float: right;
	color: #858585;
	font-size: 1em;
	text-decoration: none;
	line-height: 20px;
	position: absolute;
	top: 22px;
	right: 22px;
}
#color a.select span {
	padding-right: 18px;
	cursor: pointer;
}
#color a.select:hover {
	color: #ffa900;
}
#color a.select img {
	float: right;
	position: absolute;
	top: 0;
	right: -5px;
}

#color .pulldown {
	width: 159px;
	position: absolute;
}
#color .pulldown .top {
	height: 24px;
	padding: 0 0 0 10px;
	background: url(../img/rc/bColSteps/pulldown/top.png) no-repeat 0 0;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/html/img/rc/bColSteps/pulldown/top.png');
	display: block;
	font-size: 1.1em;
	line-height: 24px;
}
#color .pulldown ul {
	height: 100%;
	list-style: none;
	padding: 0 11px 0 10px;
	background: url(../img/rc/bColSteps/pulldown/bg.png) repeat-y 0 0;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/html/img/rc/bColSteps/pulldown/bg.png');
}
#color .pulldown ul li {
	border-top: 1px solid #eaeae1;
}
#color .pulldown a {
	padding: 4px 0;
	height: 16px;
	display: block;
	line-height: 16px;
	cursor: pointer;
	text-decoration: none;
	color: #044577;
	position: relative;
	background: #fff;
}
#color .pulldown a:hover {
	background: #f0efef;
	color: #ffa900;
}
#color .pulldown span {
	color: #666;
}
#color .pulldown img {
	margin: 0 10px 0 0;
	float: left;
}
#color .pulldown .btm {
	width: 100%;
	height: 9px;
	background: url(../img/rc/bColSteps/pulldown/btm.png) no-repeat 0 0;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/html/img/rc/bColSteps/pulldown/btm.png');
}
#color div.active .pulldown {
	display: block;
}
#color .pulldown.color {
	top: 21px;
	right: 14px;
}

/* color scroll styles */
#colorScroll {
	margin: 0 0 15px 0;
	padding: 5px 20px 15px 19px;
	position: relative;
	background: url(../img/bg/shopByColor.bg.gif) no-repeat bottom left;
}
#colorScroll #overFlow {
	width: 100%;
	padding: 10px 0 5px 0;
	position: relative;
	overflow: hidden;
}
#colorScroll #colorSets {
	padding: 0 0 0 5px;
	width: 20000px;
}
	#colorSets ul.colorSet {
		list-style: none;
		float: left;
	}
	#colorSets ul.colorSet li {
		height: 120px;
		padding: 0 12px 0 0;
		position: relative;
		float: left;
	}
	#colorSets ul.colorSet li div.check {
		width: 25px;
		height: 26px;
		background: url(../img/icon/check.png) no-repeat 0 0;
		_background: none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/html/img/icon/check.png');
		position: absolute;
		top: -5px;
		left: -5px;
	}
	#colorSets ul.colorSet li img {
		padding: 1px;
		border: 1px solid #d7d7d7;
		margin: 0 0 10px 0;
	}
	#colorSets ul.colorSet li a:hover img {
		border: 1px solid #ffa900;
	}
	#colorSets ul.colorSet li.active img, #colorSets ul.colorSet li.active a:hover img {
		position: relative;
		top: -1px;
		left: -1px;
		border: 2px solid #ffa900;
	}
	#colorSets ul.colorSet li.active a {
		color: #ffa900;
		text-decoration: none;
	}
	#colorSets ul.colorSet li a {
		width: 73px;
		display: block;
		text-align: center;
	}
		#scrollBar {
			width: 100%;
			height: 20px;
			margin: 0 auto;
			background: url(../img/scrollbar/bg.scrollBar.gif) repeat-x 0 0;
		}
		#scrollBar #knob {
			display: block;
			width: 60px;
			height: 18px;
			margin: 1px 0 0 0;
			background: url(../img/scrollbar/scrollKnob.gif) no-repeat 0 0;
			cursor: pointer;
		}
		#scrollBar #track {
			width: 639px;
			height: 20px;
			float: left;
		}
		#scrollBar #scrollLeft {
			float: left;
			background: url(../img/scrollbar/scrollLeft.gif) no-repeat 0 0;
			display: block;
			width: 21px;
			height: 20px;
			cursor: pointer;
		}
		#scrollBar #scrollRight {
			float: right;
			background: url(../img/scrollbar/scrollRight.gif) no-repeat 0 0;
			display: block;
			width: 20px;
			height: 20px;
			cursor: pointer;
		}

	h1.header {
		width: 720px;
		height: 31px;
		margin: 0 auto;
		background: url(../img/rc/bColBrowse/rc.header.gif) no-repeat 0 0;
		font-size: 1.2em;
		line-height: 31px;
		color: #fff;
		text-indent: 17px;
		position: relative;
	}
	h1.header .popular {
		height: 20px;
		padding: 0 0 0 5px;
		background: url(../img/icon/popular.png) no-repeat 0 center;
		position: absolute;
		top: 6px;
		right: 20px;
		display: block;
		line-height: 20px;
		font-size: .84em;
		font-weight: normal;
	}

	#itemList {
		width: 720px;
		margin: 0 auto 10px auto;
	}
	#itemList .progress {
		padding: 200px 0 125px 0;
		background: #fff url(../img/icon/progress.gif) no-repeat center center;
		text-align: center;
		font-size: 1.6em;
		color: #333;
		text-indent: 4px;
	}
	#itemList .sort {
		height: 25px;
		margin: 0 0 8px 0;
		padding: 0 0 0 17px;
		background: #f0f0f0;
		overflow: hidden;
		line-height: 23px;
	}
	#itemList .sort a {
		font-size: 1.1em;
		font-weight: bold;
		color: #666;
		padding: 0 11px 0 0;
		text-decoration: none;
	}
	#itemList .sort a.name {
		margin: 0 300px 0 0;
	}
	#itemList .sort a.size {
		margin: 0 68px 0 0;
	}
	#itemList .sort a.color {
		margin: 0 5px 0 0;
		visibility: hidden;
	}
	#itemList .sort a.price {
		margin: 0 0 0 0;
	}
	#itemList .sort a.asc {
		background: url(../img/icon/sorting.asc.gif) no-repeat right 4px;
	}
	#itemList .sort a.desc {
		background: url(../img/icon/sorting.desc.gif) no-repeat right 4px;
	}
	#itemList .sort a:hover, #itemList .sort a.active {
		color: #0f8aeb;
		background-position: right -9px;
	}
	#itemList .item {
		margin: 0 0 7px 0;
		position: relative;
		cursor: pointer;
	}
	#itemList .item .top {
		width: 100%;
		height: 3px;
		background: url(../img/rc/bColBrowse/top.item.gif) no-repeat 0 0;
		overflow: hidden;
	}
	#itemList .item .content {
		width: 100%;
		padding: 5px 0;
		background: url(../img/rc/bColBrowse/bg.item.gif) repeat-y 0 0;
	}
	#itemList .item .btm {
		width: 100%;
		height: 4px;
		background: url(../img/rc/bColBrowse/btm.item.gif) no-repeat 0 -1px;
		overflow: hidden;
	}
	#itemList .item.active .top {
		background: url(../img/rc/bColBrowse/top.item.active.gif) no-repeat 0 0;
	}
	#itemList .item.active .content {
		background: url(../img/rc/bColBrowse/bg.item.active.gif) repeat-y 0 0;
	}
	#itemList .item.active .btm {
		background: url(../img/rc/bColBrowse/btm.item.active.gif) no-repeat 0 -1px;
	}
	#itemList .item.active a {
		color: #F67A00;
		text-decoration: none;
	}
	#itemList .item .thumb {
		width: 89px;
		float: left;
		position: relative;
	}
	#itemList .item .thumb img {
		margin: 0 auto;
	}
	#itemList .item .name {
		width: 280px;
		padding: 3px 20px 3px 10px;
		color: #0657ad;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.3em;
		float: left;
	}
	#itemList .item .name span {
		color: #1e4f62;
		font-size: 10px;
		line-height: 13px;
		font-weight: normal;
		float: left;
	}
	#itemList .item .size {
		width: 122px;
		padding: 5px 0;
		font-size: 1.2em;
		color: #0494e4;
		float: left;
	}
	#itemList .item .color {
		width: 65px;
		padding: 5px 0;
		font-size: 1.2em;
		color: #666;
		float: left;
		visibility: hidden;
	}
	#itemList .item .price {
		width: 125px;
		padding: 5px 0;
		font-size: 1.2em;
		color: #666;
		float: left;
	}
	#itemList .item .price span {
		color: #ff7200;
	}
	#itemList .item .popular {
		width: 19px;
		height: 20px;
		background: url(../img/icon/star.popular.png);
		_background: url(../img/icon/star.popular.gif);
		position: absolute;
		overflow: hidden;
		text-indent: -999px;
		top: -4px;
		left: -3px;
	}
	#itemList .item .new {
		width: 32px;
		height: 20px;
		background: url(../img/icon/new.png);
		_background: url(../img/icon/new.gif);
		position: absolute;
		overflow: hidden;
		text-indent: -999px;
		top: -4px;
		left: -7px;
	}
	#itemList.loading .progress {
		display: block;
	}
	#itemList.loading .item {
		display: none;
	}