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

/*
Action Envelope
- Created: 8/23/07
*/

#browse { padding: 0; }

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

#holidayShop {
	padding: 0 16px 45px 16px;
}
	div.rbox {
		width: 100%;
		margin: 0 0 28px 0;
		/*background: url(../img/rc/bColBrowse/bg.rbox.gif) no-repeat bottom left;*/
		background: url(../img/rc/fullColBrowse/bg.rbox.gif) no-repeat bottom left;
	}
	div.rbox .tbar {
		padding: 0 5px 0 17px;
		height: 35px;
		/*background: url(../img/rc/bColBrowse/top.tbar.holiday.png) no-repeat 0 0;*/
		background: url(../img/rc/fullColBrowse/top.tbar.holiday.png) no-repeat 0 0;
		position: relative;
	}
	div.rbox .tbar h1 {
		font-size: 1.5em;
		color: #fff;
		line-height: 35px;
		float: left;
	}
	div.rbox .tbar h1 span {
		color: #feffb0;
		font-size: .92em;
	}

	.rbox a.select {
		height: 20px;
		margin: 7px 17px 0 12px;
		padding: 0 0 0 12px;
		display: inline;
		background: url(../img/btn/select/large.bg.red.png) no-repeat 0 0;
		float: right;
		color: #858585;
		font-size: 1.1em;
		text-decoration: none;
		line-height: 20px;
	}
	.rbox a.select:hover {
		color: #ffa900;
	}
	.rbox a.select span {
		float: left;
		cursor: pointer;
	}
	.rbox a.select img {
		float: left;
		position: relative;
		right: -5px;
	}
	.rbox .pulldown {
		width: 159px;
		position: absolute;
		z-index: 50;
	}
	.rbox .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;
	}
	.rbox .pulldown ul {
		height: 100%;
		list-style: none;
		padding: 0 12px 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');
	}
	.rbox .pulldown ul li {
		border-top: 1px solid #eaeae1;
	}
	.rbox .pulldown a {
		padding: 4px 0;
		height: 16px;
		display: block;
		line-height: 16px;
		cursor: pointer;
		text-decoration: none;
		color: #044577;
		position: relative;
	}
	.rbox .pulldown a:hover {
		background: #f0efef;
		color: #ffa900;
	}
	.rbox .pulldown span {
		color: #666;
	}
	.rbox .pulldown img {
		margin: 0 10px 0 0;
		float: left;
	}
	.rbox .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');
	}
	.rbox div.active .pulldown {
		display: block;
	}
	.rbox .pulldown.color {
		top: 6px;
		right: 14px;
	}


	/* color scroll styles */
	#colorScroll {
		margin: 0 0 4px 0;
		padding: 15px 19px 15px 18px;
		position: relative;
	}
	#colorScroll #overFlow {
		width: 100%;
		padding: 0 0 5px 0;
		overflow: hidden;
	}
	#colorScroll #colorSets {
		width: 10000px;
	}
		#colorSets ul.colorSet {
			list-style: none;
			float: left;
		}
		#colorSets ul.colorSet li {
			height: 120px;
			padding: 0 12px 0 0;
			float: left;
		}
		#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 #f67a00;
		}
		#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: 619px;
				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;
			}
			
	#recommened {
		width: 100%;
	}
	#recommened div.aCol {
		width: 475px;
		float: left;
	}
		#sizeChart {
			width: 453px;
			padding: 0 0 20px 0;
			background: url(../img/rc/bColBrowse/sizeChart.bg.gif) no-repeat bottom left;
			margin: 0 0 20px 0;
		}
		#sizeChart h1 {
			height: 35px;
			padding: 0 0 0 16px;
			font-size: 1.4em;
			line-height: 35px;
			color: #fff;
			background: url(../img/rc/bColBrowse/sizeChart.top.holiday.png) no-repeat 0 0;
		}
		#sizeChart table {
			width: 422px;
			margin: 0 auto;
			border-collapse: collapse;
			text-align: left;
		}
		#sizeChart table col.aCol {
			width: 45%;
		}
		#sizeChart table col.bCol {
			width: 36%;
		}
		#sizeChart table col.cCol {
			width: 19%;
			text-align: center !important;
		}
		#sizeChart table th {
			padding: 20px 0 10px 10px;
			font-weight: bold;
			font-size: 1em;
			border-bottom: 1px solid #efefef;
		}
		#sizeChart table td {
			height: 30px;
			padding: 0 0 0 10px;
			font-size: 1.1em;
			line-height: 30px;
		}
		#sizeChart table td:last-child {
			text-align: center;
		}
		#sizeChart table tr.odd td {
			background: url(../img/rc/bColBrowse/sizeChart.grayRow.gif) no-repeat 0 0;
		}
/******color chart ********/
		#colorGuide {
			width: 190px;
			padding: 0 0 20px 0;
			background: url(../img/rc/fullColBrowse/colorGuide.bg.gif) no-repeat bottom left;
		}
		#colorGuide h1 {
			height: 35px;
			padding: 0 0 0 16px;
			font-size: 1.4em;
			line-height: 35px;
			color: #fff;
			background: url(../img/rc/fullColBrowse/colorGuide.top.holiday.png) no-repeat 0 0;
		}
		#colorGuide table {
			width: 180px;
			margin: 0 auto;
			border-collapse: collapse;
			text-align: left;
		}
		#colorGuide table col.aCol {
			width: 20%;
		}
		#colorGuide table col.bCol {
			width: 80%;
		}
		#colorGuide table td {
			height: 30px;
			padding: 0 0 10px 10px;
			font-size: 1.1em;
			line-height: 30px;
			vertical-align: top;
			border-bottom: 1px solid #cccccc;
			padding-top: 10px;
		}
			#colorGuide table td a {
				text-decoration: none;
				font-size: 1em;
				line-height: 14px;
			}
			#colorGuide table td p {
				font-size: 1em;
				margin: 0 10px 0 0;
				line-height: 14px;
			}
			#colorGuide table td img {
				
			}
		#colorGuide table tr:last-child td {
			border-bottom: none;
		}

/*************** holiday printing chart *************/
		#holidayPrinting {
			width: 453px;
			padding: 0 0 10px 0;
			background: url(../img/rc/bColBrowse/holidayPrinting.bg.gif) no-repeat bottom left;
		}
		#holidayPrinting h1 {
			height: 35px;
			padding: 0 0 0 16px;
			font-size: 1.4em;
			line-height: 35px;
			color: #fff;
			background: url(../img/rc/bColBrowse/sizeChart.top.holiday.png) no-repeat 0 0;
			margin: 0 0 0 0;
		}
		#holidayPrinting table {
			width: 435px;
			_width: 449px;
			margin: 0 auto;
			border-collapse: collapse;
			text-align: left;
		}
		#holidayPrinting table col.aCol {
			width: 220px;
		}
		#holidayPrinting table col.bCol {
		}
		#holidayPrinting table col.cCol {
			width: 40%;
		}
		#holidayPrinting table td {
			height: 30px;
			padding: 0 0 0 10px;
			font-size: 1.1em;
			vertical-align: top;
		}
		#holidayPrinting table td img {
			float: right;
			margin-right: -7px;
		}
		#holidayPrinting table td a {
			font-size: 1em;
			text-decoration: none;
		}
		#holidayPrinting table td h3 {
			font-size: 1.2em;
			font-weight: normal;
			line-height: 1.7em;
			margin: 1em 0;
			color: #333333;
		}
			#holidayPrinting table td h3 span {
				color: #2E770C;
				text-transform: uppercase;
			}
		#holidayPrinting table td p {
			font-size: 1.1em;
		}
		#holidayPrinting table td:first-child {
			padding-left: 6px;
		}
		#holidayPrinting table td:last-child {
			border: none;
		}
		
	#recommened div.bCol {
		width: 222px;
		float: left;
	}
		#featured {
			width: 216px;
		}
		#featured h1 {
			margin: 0 0 12px 0;
			font-size: 1.7em;
			color: #f60;
			line-height: 20px;
		}
		#featured .colA {
			width: 117px;
			float: left;
		}
		#featured .colB {
			width: 99px;
			float: left;
		}
		#featured img {
			margin: 0 0 12px 0;
		}
		#featured h2 {
			margin: 0 0 10px 0;
			font-size: 1.1em;
		}
		#featured ul {
			list-style: none;
		}
		#featured ul li {
			font-size: 1.1em;
			margin: 0 0 6px 0;
		}
			.tagLine {
				padding: 15px 0 0 0;
				margin: 15px 0 0 0;
				border-top: 1px solid #d7d7d7;
			}
		
		#promoButtons {
			padding: 10px 0 1px 0;
		}
		#promoButtons ul {
			list-style: none;
		}
		#promoButtons ul li {
			margin: 0 0 10px 0;
			/*float: left;
			
			_margin: expression((this==this.parentNode.firstChild)?"0":"0 0 0 12px");*/
		}
		#promoButtons ul li a {
			width: 190px;
			height: 100px;
			display: block;
			text-indent: -999px;
			overflow: hidden;
		}
		#promoButtons ul li a.squareEnvelopes {
			height: 83px;
			background: url(../img/btn/squareEnvelopes.png) no-repeat 0 0;
		}
		#promoButtons ul li a.linedEnvelopes {
			background: url(../img/btn/linedEnvelopes.png) no-repeat 0 0;
		}
		#promoButtons ul li a.photoGreetingEnvelope {
			background: url(../img/btn/photoGreetingEnvelope.png) no-repeat 0 0;
		}
		#promoButtons ul li a:hover {
			background-position: 0 -102px;
		}