@import url('common.css');
@import url('callouts.css');

/*
Action Envelope
- Created: 11/12/07
*/

#content {
	padding: 0 11px 0 22px;
}
	#customCreator {
		padding: 0 0 30px 0;
	}
		#aCol {
			width: 757px;
			float: left;
		}
		#aCol img.header {
		}
			#tabs {
				width: 747px;
				padding: 12px 0 0 0;
				overflow: hidden;
			}
			#tabs ul.togglers {
				width: 745px;
				list-style: none;
				background: url(../img/bg/repeat.border.gif) repeat-x 0 35px;
				overflow: hidden;
			}
			#tabs ul.togglers li {
				height: 36px;
				display: inline;
				float: left;
			}
			#tabs ul.togglers li a {
				height: 36px;
				padding: 0 0 0 15px;
				background: url(../img/tab/tab.custom.envelope.png) no-repeat -1px 2px;
				*background-position: expression((this.parentNode==this.parentNode.parentNode.firstChild) ? "0 2px" : "-1px 2px");
				float: left;
				display: block;
				line-height: 36px;
				font-size: 1.1em;
				font-weight: bold;
				text-decoration: none;
				color: #666;
				cursor: pointer;
			}
			#tabs ul.togglers li:first-child a {
				background-position: 0 2px;
			}
			#tabs ul.togglers li a b {
				height: 36px;
				padding: 0 0 0 23px;
				display: block;
				line-height: 36px;
				font-size: 1.2em;
				font-weight: bold;
				text-decoration: none;
				letter-spacing: -1px;
				float: left;
				background-position: 0 9px;
			}
			#tabs ul.togglers li a span {
				width: 15px;
				height: 36px;
				background: url(../img/tab/tab.custom.envelope.png) no-repeat right 2px;
				float: left;
			}
			#tabs ul.togglers li a:hover {
				color: #0657ad;
			}
			#tabs ul.togglers li a:hover b {
				background-position: 0 -91px;
			}
			#tabs ul.togglers li a.active, #tabs ul.togglers li a.active:hover {
				background-position: 0 -46px !important;
				color: #f60;
			}
			#tabs ul.togglers li a.active span, #tabs ul.togglers li a.active:hover span {
				background-position: right -46px;
			}
			#tabs ul.togglers li a.active b, #tabs ul.togglers li a.active:hover b {
				background-position: 0 -291px;
			}
			#tabs ul.togglers li a.enabled {
				color: #0657ad;
			}
			#tabs ul.togglers li a.enabled b {
				background-position: 0 -141px;
			}
			#tabs ul.togglers li a.disabled {
				cursor: default;
			}
			#tabs ul.togglers li a.disabled:hover {
				color: #666;
			}
			#tabs ul.togglers li a.disabled:hover b {
				background-position: 0 9px;
			}

			#tabs .content {
				width: 100%;
				background: url(../img/rc/customCreator/bg.gif) repeat-y 0 0;
			}
			#tabs .content .tabs {
				padding: 18px 0 10px 0;
			}
				/* tabs commons */
				#tabs .content .tabs .header {
					padding: 0 0 10px 0;
					border-bottom: 1px solid #d7d7d7;
				}
				#tabs .content .tabs .header h1 {
					width: 250px;
					font-size: 2em;
					color: #f60;
					float: left;
				}
				#tabs .content .tabs .next {
					height: 21px;
					padding: 0 28px 0 0;
					background: url(../img/btn/custom.next.gif) no-repeat top right;
					line-height: 21px;
					*line-height: 19px;
					overflow: hidden;
					text-decoration: none;
					color: #666;
					float: right;
				}
				#tabs .content .tabs .next span {
					height: 21px;
					padding: 0 0 0 15px;
					background: url(../img/btn/custom.next.gif) no-repeat top left;
					cursor: pointer;
					overflow: hidden;
					float: left;
				}
				#tabs .content .tabs .next span span {
					padding: 0;
					display: inline;
					background: none;
					float: none;
					color: #333;
				}
				#tabs .content .tabs .back {
					height: 21px;
					padding: 0 15px 0 0;
					background: url(../img/btn/custom.back.gif) no-repeat top right;
					line-height: 21px;
					*line-height: 19px;
					overflow: hidden;
					text-decoration: none;
					color: #666;
					float: right;
				}
				#tabs .content .tabs .back span {
					height: 21px;
					padding: 0 0 0 25px;
					background: url(../img/btn/custom.back.gif) no-repeat top left;
					cursor: pointer;
					overflow: hidden;
					float: left;
				}
				#tabs .content .tabs .back span span {
					padding: 0;
					display: inline;
					background: none;
					float: none;
					color: #333;
				}
				#tabs .content .tabs .next:hover, #tabs .content .tabs .next:hover span span, #tabs .content .tabs .back:hover, #tabs .content .tabs .back:hover span span{
					color: #f60;
				}
				#tabs .content .tabs .next {
					margin: 5px 0 0 0;
				}
				#tabs .content .tabs .back {
					margin: 5px 10px 0 0;
				}
				#tabs .content .tabs a.customize {
					height: 21px;
					padding: 0 28px 0 0;
					background: url(../img/btn/custom.next.gif) no-repeat top right;
					line-height: 19px;
					*line-height: 19px;
					overflow: hidden;
					text-decoration: none;
					color: #0657ad;
					float: left;
				}
				#tabs .content .tabs a.customize b {
					height: 21px;
					padding: 0 0 0 15px;
					background: url(../img/btn/custom.next.gif) no-repeat top left;
					cursor: pointer;
					font-size: 1em;
					overflow: hidden;
					float: left;
				}
				#tabs .content .tabs h2 {
					margin: 0 0 15px 0;
					font-size: 1.3em;
					color: #009aec;
				}
				#tabs .content .tabs h3 {
					padding: 20px 0 15px 0;
					font-size: 1.6em;
					color: #0a86e4;
				}
				#tabs .content .tabs h3 span {
					color: #d7d7d7;
				}
				#tabs .content .tabs select {
					border: 1px solid #7f9db9;
					color: #666;
					font-size: 1.1em;
				}
				
				#tabs .content .tabs .tab {
					/*display: none;*/
				}
				#tabs .content .tabs .tab.active {
					display: block !important;
				}
				
				#tabs .radio {
					width: 12px;
					height: 12px;
				}
				
				/* tabs */
				#size {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#size .tabContent {
					padding: 24px 0 0 0;
				}
				#size .tabContent .aCol {
					width: 244px;
					float: left;
				}
				#size .tabContent .bCol {
					width: 438px;
					background: url(../img/bg/creater.size.right.png) no-repeat 0 0;
					float: left;
				}
				#size .bCol .sizeSelection {
					padding: 18px 0 0 25px;
				}
					#size select.standardSize {
						width: 250px;
					}
					#size fieldset {
						padding: 0 0 10px 0;
						clear: both;
						overflow: hidden;
					}
					#size label {
						width: 50px;
						float: left;
						line-height: 18px;
					}
					#size select.small {
						width: 50px;
						margin: 0 10px 0 0;
						float: left;
					}
				#size .btm {
					padding: 50px 0 0 0;
					overflow: hidden;
				}
				
				#windows {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#windows .tabContent {
					padding: 14px 0 0 0;
				}
				#windows .row {
					padding: 15px 0 15px 0;
					border-top: 1px solid #d7d7d7;
					*border-top: expression((this == this.parentNode.firstChild) ? 'none' : '1px solid #d7d7d7');
				}
				#windows .row:first-child {
					border: none;
				}
				#windows .row h2 span {
					color: #f60;
				}
				#windows ul {
					width: 100%;
					list-style: none;
				}
				#windows ul li {
					float: left;
				}
				#windows ul li img {
					margin: 0 auto 10px auto;
				}
				#windows ul li fieldset .radio {
					margin: 5px 0 0 0;
					float: left;
				}
				#windows ul.numbOfWindow li fieldset {
					height: 22px;
					padding: 0 0 0 6px;
					background: #e2eff8;
				}
				#windows ul.numbOfWindow li fieldset label {
					padding: 0 0 0 5px;
					font-size: 1.2em;
					font-weight: bold;
					color: #009aec;
					float: left;
					line-height: 22px;
					white-space: nowrap;
				}
				#windows ul.numbOfWindow li {
					width: 128px;
					padding: 0 13px 0 0;
				}
				#windows ul.position li fieldset {
					height: 22px;
					padding: 0 0 0 8px;
					background: #e2eff8;
				}
				#windows ul.position li fieldset label {
					padding: 0 0 0 5px;
					font-size: 1.0em;
					color: #7594ae;
					float: left;
					line-height: 22px;
					white-space: nowrap;
				}
				#windows ul.position li {
					width: 98px;
					padding: 0 15px 0 0;
					*padding: expression((this == this.parentNode.firstChild) ? '0': '0 0 0 15px');
				}
				#windows p {
					margin: 5px 0 0 0;
					font-size: 1.2em;
					color: #333;
				}
				#windows ul.position li p {
					margin: 0;
					padding: 5px 0;
					font-size: 1em;
					color: #4a4a4a;
				}
				#windows div.customize {
					padding: 0 0 20px 0;
				}
				#windows div.customize .body {
					width: 100%;
				}
				#windows div.customize h4 {
					margin: 0 0 10px 0;
					font-size: 1.3em;
					color: #333;
				}
				#windows div.customize .dimension {
					width: 180px;
					float: left;
					border-right: 2px solid #e7e7e7;
				}
				#windows div.customize .dimension fieldset {
					padding: 0 0 10px 0;
					clear: both;
					overflow: hidden;
				}
				#windows div.customize .dimension label {
					width: 50px;
					float: left;
					line-height: 18px;
				}
				#windows div.customize select.small {
					width: 50px;
					margin: 0 10px 0 0;
					float: left;
				}
				#windows div.customize .position {
					width: 485px;
					padding: 0 0 0 15px;
					float: left;
				}
				#windows div.customize .position .aCol {
					width: 215px !important;
					padding: 0 10px 0 0;
					float: left;
				}
				#windows div.customize .position .bCol {
					width: 230px !important;
					float: left;
				}
				#windows div.customize .position fieldset {
					padding: 10px 0 0 0;
				}
				#windows div.customize .position fieldset label {
					width: 50px;
					float: left;
				}
				#windows div.customize .position fieldset .radio {
					width: 12px;
					height: 12px;
					margin: 1px 5px 0 0;
					float: left;
				}
				#windows .btm {
					padding: 50px 0 0 0;
					overflow: hidden;
				}

				#paperType {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#paperType .tabContent {
					padding: 14px 0 0 0;
				}
					#colorWidget .tbar {
						padding: 0 0 0 10px;
					}
					#colorWidget .tbar a {
						padding: 0 10px 0 10px;
						font-size: 1.3em;
						float: left;
						font-weight: bold;
						color: #009aec;
						text-decoration: none;
						border-left: 2px solid #d7d7d7;
						*border-left: expression((this == this.parentNode.firstChild) ? 'none' : '2px solid #d7d7d7');
					}
					#colorWidget .tbar a.active {
						color: #666;
						text-decoration: underline;
					}
					#colorWidget .tbar a.active:hover, #colorWidget .tbar a.active:active {
						text-decoration: none;
					}
					
					#colorWidget .tbar a:first-child {
						border: none;
					}

					/* 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;
					}
						#colorSets {
							width: 20000px;
						}
						#colorSets ul.colorSet {
							list-style: none;
							float: left;
						}
						#colorSets ul.colorSet li {
							height: 155px;
							padding: 0 12px 0 0;
							float: left;
						}
						#colorSets ul.colorSet li img {
							width: 71px;
							height: 71px;
							padding: 1px;
							border: 1px solid #d7d7d7;
							margin: 0 0 10px 0;
						}
						#colorSets ul.colorSet li a, #colorSets ul.colorSet li div {
							width: 73px;
							display: block;
							text-align: center;
						}
						#colorSets ul.colorSet li a:hover img, #colorSets ul.colorSet li div:hover img {
							border-color: #ffa900;
						}
						#colorSets ul.colorSet li fieldset {
							padding: 4px 0;
							background: #e2eff8;
						}
						
							#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: 600px;
								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;
							}
				#paperType textarea {
					width: 675px;
					margin: 10px 0 0 0;
					padding: 2px;
					height: 50px;
					overflow: auto;
					border: 1px solid #95b3c9;
				}
				#paperType .btm {
					padding: 20px 0 0 0;
					overflow: hidden;
				}

				#sealingMethod {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#sealingMethod .tabContent {
					padding: 14px 0 0 0;
				}
				#sealingMethod .row {
					padding: 10px 0 10px 0;
				}
				#sealingMethod ul {
					width: 100%;
					list-style: none;
				}
				#sealingMethod ul li {
					width: 128px;
					padding: 0 38px 0 0;
					float: left;
				}
				#sealingMethod ul li img {
					margin: 0 auto 10px auto;
				}
				#sealingMethod ul li fieldset .radio {
					margin: 5px 0 0 0;
					float: left;
				}
				#sealingMethod ul li fieldset {
					height: 22px;
					padding: 0 0 0 6px;
					background: #e2eff8;
				}
				#sealingMethod ul li fieldset label {
					padding: 0 0 0 5px;
					font-size: 1.2em;
					font-weight: bold;
					color: #009aec;
					float: left;
					line-height: 22px;
					white-space: nowrap;
				}
				#sealingMethod .btm {
					padding: 170px 0 0 0;
					overflow: hidden;
				}

				#printingOpts {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#printingOpts .tabContent {
					padding: 10px 0 0 0;
				}
				#printingOpts .row {
					padding: 15px 0 15px 0;
					border-top: 1px solid #d7d7d7;
					*border-top: expression((this == this.parentNode.firstChild) ? 'none' : '1px solid #d7d7d7');
					position: relative;
				}
				#printingOpts .row:first-child {
					border: none;
				}
				#printingOpts ul {
					width: 100%;
					list-style: none;
				}
				#printingOpts ul li {
					width: 128px;
					padding: 0 20px 0 0;
					float: left;
				}
				#printingOpts ul li img {
					margin: 0 auto 10px auto;
				}
				#printingOpts ul li fieldset .radio {
					margin: 5px 0 0 0;
					float: left;
				}
				#printingOpts ul li fieldset {
					height: 22px;
					padding: 0 0 0 6px;
					background: #e2eff8;
				}
				#printingOpts ul li fieldset label {
					padding: 0 0 0 5px;
					font-size: 1.2em;
					font-weight: bold;
					color: #009aec;
					float: left;
					line-height: 22px;
					white-space: nowrap;
				}
				#printingOpts ul li fieldset label span {
					color: #666;
				}
				#printingOpts .row p.note {
					font-size: 1.1em;
					letter-spacing: -1px;
					position: absolute;
					left: 320px;
					bottom: 0px;
				}
				#printingOpts .options fieldset {
					padding: 0 15px 0 0;
					float: left;
				}
				#printingOpts .options fieldset img {
					float: left;
				}
				#printingOpts .options fieldset label {
					padding: 0 10px 0 0;
					line-height: 18px;
					float: left;
				}
				#printingOpts .options .radio {
					margin: 4px 5px 0 0;
					float: left;
				}
				#printingOpts .btm {
					padding: 125px 0 0 0;
					overflow: hidden;
				}

				#quantity {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#tabs .content .tabs #quantity .header h1 {
					width: 200px;
				}
				#quantity .tabContent {
					padding: 10px 0 0 0;
				}
				#quantity .tabContent .header {
					padding: 10px 0 10px 0 !important;
				}
				#quantity .row {
					padding: 15px 0 0 0;
					border-bottom: 1px solid #d7d7d7;
					position: relative;
				}
				#quantity fieldset {
					padding: 0 0 10px 0;
				}
				#quantity fieldset fieldset {
					float: left;
				}
				#quantity fieldset label {
					padding: 0 10px 0 0;
					font-size: 1.1em;
					line-height: 22px;
					float: left;
				}
				#quantity fieldset h3 {
					padding: 0 20px !important;
					float: left;
				}
				#quantity select {
					width: 80px;
					margin: 2px 0 0 0;
					border: 1px solid #7f9db9;
					color: #666;
					font-size: 1.1em;
					float: left;
				}
				#quantity .date {
					padding: 5px 0 0 0;
					clear: both;
				}
				#quantity .date select {
					margin: 0 10px 0 0;
					float: left;
				}
				#quantity .date select.small {
					width: 50px;
				}
				#quantity .date select.medium {
					width: 70px;
				}
				#quantity textarea {
					width: 675px;
					margin: 10px 0 10px 0;
					padding: 2px;
					height: 70px;
					overflow: auto;
					border: 1px solid #95b3c9;
				}
				#quantity .submit {
					margin: 0 auto;
					display: block;
				}
				#quantity .btm {
					padding: 10px 0 0 0;
					overflow: hidden;
				}

				#contact {
					padding: 0 32px 0 33px;
					overflow: hidden;
				}
				#contact .tabContent {
					padding: 10px 0 10px 0;
				}
				#contact .form {
					padding: 0 0 10px 115px;
				}
				#contact .row {
					padding: 0 0 10px 0;
				}
				#contact fieldset {
					width: 260px;
					float: left;
				}
				#contact fieldset.medium {
					width: 180px;
				}
				#contact fieldset.small {
					width: 77px;
				}
				#contact fieldset.state {
					width: 175px;
				}
				#contact label {
					padding: 0 0 5px 0;
					font-size: 1.1em;
					display: block;
				}
				#contact label span {
					color: #f20;
				}
				#contact fieldset input.text {
					width: 208px;
					font-size: 1.2em;
				}
				#contact fieldset.medium input.text {
					width: 160px;
				}
				#contact fieldset.small input.text {
					width: 75px;
				}
				#contact fieldset.small select {
					width: 65px;
					height: 17px;
					border: 1px solid #bfc7cc !important;
				}
				#contact select#custom_state {
					width: 160px;
					padding: 2px;
					border: 1px solid #bfc7cc !important;
					color: #595959;
				}
				#contact textarea {
					width: 465px;
					margin: 10px 0 0 0;
					padding: 2px;
					height: 70px;
					overflow: auto;
					border: 1px solid #bfc7cc;
					font: normal 1.1em Verdana, Arial, Helvetica, sans-serif;
				}
				#contact .submit {
					margin: 0 auto;
					display: block;
				}

			
		#aCol .footer {
			padding: 25px 0 0 5px;
		}
		#aCol .footer .aCol {
			width: 350px;
			float: left;
		}
		#aCol .footer .bCol {
			width: 340px;
			float: left;
		}
		#aCol .footer h1 {
			margin: 0 0 10px 0;
			font-size: 1.2em;
		}
		#aCol .footer ul {
			padding: 0 0 0 15px;
			list-style: outside disc;
		}
		#aCol .footer ul li {
			margin: 0 0 5px 0;
			font-size: 1.2em;
			clear: both;
		}
		#aCol .footer p {
			margin: -3px 0 0 0;
			font-size: 1.2em;
			line-height: 20px;
		}


		#bCol {
			width: 190px;
			float: left;
		}
			#yourEnvelope {
				padding: 0 19px 0 14px;
				background: url(../img/bg/customEnvelope.png) no-repeat 0 0;
			}
			#yourEnvelope .header {
				padding: 14px 0 10px 0;
			}
			#yourEnvelope .content {
				padding: 19px 0 0 0;
				border-bottom: 1px solid #d7d7d7;
				color: #666;
			}
			#yourEnvelope .content img {
				margin: 0 auto 15px auto;
				clear: both;
			}
			#yourEnvelope .content p {
				font-size: .9em;
			}
			#yourEnvelope .content ul {
				width: 100%;
				list-style: none;
			}
			#yourEnvelope .content ul li {
				padding: 0 0 0 25px;
				clear: both;
			}
			#yourEnvelope .content ul li {
				background-position: 0 -150px;
			}
			#yourEnvelope .content ul li p {
				line-height: 15px;
			}
			#yourEnvelope .content ul li p b {
				font-size: 1.3em;
			}
			#yourEnvelope .content ul li a {
				width: 39px;
				height: 15px;
				background: url(../img/icon/customCreator/edit.png) no-repeat 0 0;
				display: block;
				overflow: hidden;
				text-indent: -999px;
				float: right;
			}
			.one {
				background: url(../img/ls/circle.one.gif) no-repeat 0 0;
			}
			.two {
				background: url(../img/ls/circle.two.gif) no-repeat 0 0;
			}
			.three {
				background: url(../img/ls/circle.three.gif) no-repeat 0 0;
			}
			.four {
				background: url(../img/ls/circle.four.gif) no-repeat 0 0;
			}
			.five {
				background: url(../img/ls/circle.five.gif) no-repeat 0 0;
			}
			.six {
				background: url(../img/ls/circle.six.gif) no-repeat 0 0;
			}