﻿#content { background: url(images/order-theme-bg.png) 0 111px repeat-x; padding-top: 111px; }
	#content .header { width: 952px; padding: 16px; position: relative; left: -16px; }

h1 {
	color: white; font-size: 22px; position: relative;
	padding: 22px 16px 25px 28px; overflow: hidden;
	background: url(images/order-location-sprites.png) 2px 25px no-repeat; }
	h1 small { display: block; position: absolute; top: 16px; right: 16px; overflow: hidden; }
		h1 small span, h1 small strong { 
			float: left; width: 69px; padding: 20px 0 0 0;
			background: url(images/order-location-sprites.png) 0 -81px no-repeat;
			text-align: center; font-size: 12px; color: #fbdff7; }
		h1 small strong { color: white; }
			h1 .basket  { background-position:    0px -80px; }
			h1 .bonus   { background-position:  -69px -80px; }
			h1 .details { background-position: -138px -80px; }
			h1 .confirm { background-position: -207px -80px; }
			h1 .process { background-position: -276px -80px; }
			h1 strong.basket  { background-position:    0px -135px; }
			h1 strong.bonus   { background-position:  -69px -135px; }
			h1 strong.details { background-position: -138px -135px; }
			h1 strong.confirm { background-position: -207px -135px; }
			h1 strong.process { background-position: -276px -135px; }

			h1.giftcard .design   { background-position:    0px -80px; }
			h1.giftcard .checkout { background-position:  -69px -80px; }
			h1.giftcard .print    { background-position: -413px -80px;  }
			h1.giftcard strong.design   { background-position:    0px -135px; }
			h1.giftcard strong.checkout { background-position:  -69px -135px; }
			h1.giftcard strong.print    { background-position: -413px -135px; }

			/* In russia we skip the bonus step */
			.c-ru h1 .details { background-position: -69px -80px; }
			.c-ru h1 .confirm { background-position: -138px -80px; }
			.c-ru h1 .process { background-position: -345px -80px; }
			.c-ru h1 strong.details { background-position: -69px -135px; }
			.c-ru h1 strong.confirm { background-position: -138px -135px; }
			.c-ru h1 strong.process { background-position: -345px -135px; }

.pad { background: white; overflow: hidden; padding: 16px; margin-right: 16px; }
.contentBox { float: left; width: 706px; margin-right: 16px; display: inline; }

/* Confirmation page */
#confirm { }
	#process .inner, #confirm .inner { padding: 0; }
	#confirm .errors .inner { 
		background: #f2f2f2 url(images/order-icon-error.png) 16px 14px no-repeat;
		padding: 16px 16px 16px 64px; }
		#process .summary, #confirm .summary { float: left; width: 275px; padding: 16px; }
			#process .summary p, #confirm .summary p { margin: 8px 0 8px 16px; font-size: 11px;}
			#process .summary strong, #confirm .summary strong { display: block; font-size: 14px; }
		#confirm .details { float: left; width: 586px; padding: 16px; }
			#confirm .details h3 { display: none; }
			#confirm table { margin-bottom: 16px; }
				#confirm table thead th { border-width: 1px 0 1px 0; }
				#confirm table thead.campaign th { border-width: 0 0 1px 0; padding-top: 8px; }
				#confirm table .name { padding: 4px 3px 2px 8px }
					#confirm table thead .name { border-width: 1px 0 1px 1px; }
				#confirm table .total { padding: 4px 8px 2px 3px }
					#confirm table thead .total { border-width: 1px 1px 1px 0; }
				#confirm table tfoot td, #confirm table tfoot th { background: #f2f2f2; font-size: 14px; }
		#confirm .confirm { border: 1px solid #d6d6d6; border-width: 0 1px 1px 1px; background: #f2f2f2; padding: 16px 16px 16px 327px; }
			#confirm .confirm label { margin: 8px 0; display: block; }

/* Process page */
#process {}
	#process .payment { float: left; width: 586px; padding: 16px; }
	#process .payment div { border: 1px solid #d6d6d6; border-width: 2px 0 1px 0; background: white; }
		#process .payment h2 { margin: 0 0 16px 0; font-size: 16px; font-weight: bold; }
		#process .payment div dl { background: #f2f2f2; padding: 10px 0; margin: 1px 0; }
			#process .payment dl dd { display: inline; font-weight: bold; font-size: 14px;}
			#process .payment dl dt { display: inline; padding: 0 0 0 16px;  }
		#process .payment .providers { border: 1px solid #d6d6d6; border-width: 0 0 1px 0; overflow: hidden; padding: 16px 16px; }
		#process .payment .providers form input { 
			float: left; width: 41px; height: 40px; border: none; text-indent: -1000px; overflow: hidden;
			margin-right: 8px; background: url(images/order-payment-sprites.png) 0 0 no-repeat; cursor: pointer; }
			#process .payment .providers .solo input { background-position: 0 0; }
			#process .payment .providers .op input { background-position: 0 -40px; }
			#process .payment .providers .pop input { background-position: 0 -80px; width: 160px }
			#process .payment .providers .sampo input { background-position: 0 -120px; width: 60px; }
			#process .payment .providers .credit input { background-position: 0 -160px; width: 125px; }
			#process .payment .providers .ascredit input { background-position: 0 -200px; width: 474px; }
			#process .payment .providers .aswebmoney input { clear: left; background-position: 0 -240px; width: 191px; }
			#process .payment .providers .tapiola input { background-position: 0 -280px; }
			#process .payment .providers .hb input { background-position: 0 -320px; width: 123px; }
			#process .payment .providers .spankki input { background-position: 0 -360px; width: 80px; }
			#process .payment .providers .aab input { background-position: 0 -400px; width: 43px; }
		#process .payment p { margin: 16px 0 0 0; }
 #process .complete { background: white; margin-bottom: 16px; }
	#process .errors .inner,
	#process .complete .inner { 
		background: #f2f2f2 url(images/order-icon-complete.png) 16px 14px no-repeat;
		padding: 16px 16px 16px 64px; }
	#process .errors .inner { background-image: url(images/order-icon-error.png); }
	#process .complete h3 { border: none; font-weight: bold; margin: 0 0 4px 0; }
	#process .status { margin: 16px; }

/* Details page */
#details {}
	#details h3 { 
		font-size: 14px; margin: 0 0 1px 0; padding-bottom: 2px;
		border-bottom: 2px solid #d2d2d2; }
	#details label { display: block; padding: 0 6px; margin: 0 0 6px 0; }
	#details label.inline { display: inline; }
	#details label.trigger { margin: 0; }
	#details .foldout span label, #details .foldout div label { margin: 6px 0 6px 0; }

	#details fieldset div { padding-left:45px; }
	#details fieldset.account,
	#details fieldset.additional { border-top: 1px solid #e6e6e6; margin-top: 16px; }

	#details #firstName, #details #lastName { width: 181px; }
	#details #address, #details #comment { width: 468px; }
	#details #company, #details #email { width: 305px; }
	#details #password, #details #password-confirm { width: 181px }
	#details #country { width: 140px; }

	#details fieldset	div div { padding: 0 }	
	#details .giftcardWidget .field input { width: 35px; }
		#details .giftcardWidget p { width: 618px; }
		#details .giftcardWidget .fields { }
		#details .giftcardWidget .status { padding: 5px 0 5px 40px; background: url() 10px 50% no-repeat; }
			#details .giftcardWidget .status.wait { background-image: url(images/order-giftcard-wait.gif); }
			#details .giftcardWidget .status.invalid { background-image: url(images/order-giftcard-invalid.gif); }
			#details .giftcardWidget .status.valid { background-image: url(images/order-giftcard-valid.gif); }

	#details #newUserMessage {
		padding: 10px 16px 16px 143px; border-bottom: 1px solid #e6e6e6;
		background: url(images/order-icon-new.png) 61px 14px no-repeat;}
		#details #newUserMessage h3 { border: none; font-weight: bold; margin: 0 0 4px 0; color: #84a342; }
	#details #registeredUserMessage {
		position: relative; background: #f2f2f2; padding: 16px 16px 16px 45px; zoom: 1; }
		#details #registeredUserMessage h3 { display: none; }
		#details #registeredUserMessage a { background: white; border: 1px solid #d6d6d6; padding: 4px 10px; position: absolute; top: 16px; right: 16px; }
		
/* Bonus selection page */
#bonus {}
	#bonus .errors  { margin-bottom: 16px; }
	#bonus .errors .inner { 
		background: #f2f2f2 url(images/order-icon-error.png) 16px 14px no-repeat;
		padding: 16px 16px 16px 64px; }
	#bonus .summary { margin-bottom: 16px; }
		#bonus .summary .inner { overflow: hidden; padding: 16px; }
		#bonus .summary h2, #bonus .summary li { 
			float: left; display: block; width: 76px; overflow: hidden; text-indent: -1000px;
			background: url(images/order-bonus-sprites.png) 0 5px no-repeat; }
		#bonus .summary h2 { height: 65px; margin: 0 30px 0 15px; }
		#bonus .summary li { width: 185px; background-position: 100% -55px; padding: 0 35px 0 0; width: 150px; }
			#bonus .summary li.total { padding-right: 0; background: none; }
			#bonus .summary li.current { background-position: 100% -115px }
			#bonus .summary li span { display: block; border: 1px solid #d9d9d9; text-indent: 0; text-align: center; padding: 10px 0; }
				#bonus .summary li strong { display: block; font-size: 22px; font-weight: normal; color: #808080; }
		#bonus .summary .info { 
			padding: 2px 10px 2px 35px; margin: 6px 0; 
			background: url(images/order-bonus-sprites.png) 10px -183px no-repeat; }
	#bonus .productList {  }
		#bonus .productList tfoot th, #bonus .productList tfoot td { 
			padding: 4px; background: #f2f2f2; border: none; 
			font-size: 14px; font-weight: bold; color: #7b9c34; }
		#bonus .productList tfoot td { padding-right: 3px; text-align: right; }
		#bonus .productList tfoot th { text-align: right; }
		#bonus .productList .button input { cursor: pointer; width: 16px; height: 16px; display: block; text-indent: -1000px; overflow: hidden; }
	#bonus .selection .fixed { background: url(images/shadow-9mcol.png) bottom left no-repeat; padding-bottom: 16px; }
	#bonus .bonusPool { 
		margin: 16px 0 0 0; overflow: hidden; width: 706px;
		border: 1px solid #d9d9d9; border-width: 1px 0 0 1px; }
		#bonus .bonusPool h3 { display: none; }
		#bonus .bonusPool form { 
			float: left; width: 319px; padding: 16px; position: relative;
			border: 1px solid #d9d9d9; border-width: 0 1px 1px 0;
			border-left: 1px solid white; font-size: 14px; }
			#bonus .bonusPool form span { 
				display: block; float: left; width: 85px; height: 85px; position: relative; overflow: hidden; } 
				#bonus .bonusPool form span img { display: block; position: absolute; left: -22px; top: -22px; }
			#bonus .bonusPool form strong { padding-left: 101px; font-weight: normal; display: block; }
			#bonus .bonusPool form em { padding-left: 101px; margin: 4px 0; display: block; color: #bc1aa6; }
			#bonus .bonusPool form .button { 
				margin-left: 101px; width: 120px; cursor: pointer; position: absolute; right: 16px; bottom: 16px;
				padding: 4px 20px 4px 40px; display: block; border: none; color: white;
				background: url(images/order-button-sprites.png) 0 -94px no-repeat; }
			#bonus .bonusPool form.disabled .button { 
				background-position: 0 -126px; cursor: default; }

/* Basket listing page */	
#basket {}
	#basket thead.campaign .title th { padding-top: 8px; }
	#basket tbody.notification td { padding-left: 10px; }	
	
/* Order form listing page */	
#form {}
	#form .pad { zoom: 1; }
	#form #floater .fixed { top: 8px; }
	#form .productList tbody tr:hover td { background: #e5f3ff; }
	#form .productList tbody tr:hover td.name { background-image: -webkit-gradient(linear, left top, right top, color-stop(0,#fff), color-stop(1,#e5f3ff));  background-image: -moz-linear-gradient(left right, 0% #fff, 100% #e5f3ff); }
	#form .productList tbody td.name { padding-left: 10px; }
	#form .productList tbody tr:hover td.thumbnail { background: white; }
	#form .productList thead th.sort { font-size: 13px; text-align: right; }
	#form .productList .seriesHeader th { font-weight: bold; padding-top: 8px; }

/* Giftcard design */

.button input { background: none; border: none; padding: 0 }	

/* 
		Specific elements 
*/

.bonusBumpers { margin: 1em 0 0 0; border: 1px solid #acacac; background: #b9d779; padding: 4px; }
	.bonusBumpers .inner { border: 6px solid #fefefe; background: #f2f2f2 url(images/order-bonus-logo-medium.png) 7px 6px no-repeat; padding: 10px 7px 10px 50px; font-size: 14px; }

/* Dog eared box; common */
.dogEarBox { margin: 0 0 10px 0; width: 100%; }
	.dogEarBox h2 { 
		margin: 0; font-size: 14px; font-weight: bold; color: #bc1aa6; padding: 6px 8px 4px 12px;
		background: url() top left no-repeat; }
		.col3 .dogEarBox h2 { background-image: url(images/order-dogear-3col-bg.png); }
		.col4 .dogEarBox h2 { background-image: url(images/order-dogear-4col-bg.png); }
		.col4 .dogEarBox h2.section { background-image: url(images/order-dogear-plain-4col-bg.png); }
	.dogEarBox .content { border: 1px solid #b2b2b2; background: white; padding: 2px; }

/* Account bar; common */
#account {
	border-bottom: 1px solid #d9d9d9; overflow: hidden; width: 100%;
	background: white url(images/order-account-bg.gif) bottom left repeat-x; }
	#account h3 { font-size: 14px; font-weight: bold; color: #84a342; margin: 0 0 4px 0; }
	#account h4 { margin: 0; }
	#account p { margin: 0; }
	#account .col { float:left; padding: 16px 16px 2016px 16px; margin: 0 0 -2000px 0; }
	#account .login { 
		width: 599px; padding-left: 80px; 
		background: url(images/order-icon-login.png) 16px 16px no-repeat; }
		#account form .error { display: block; font-weight: normal; }
		#account form .button { border: 2px outset; }
		#account form .reminder { font-size: 11px; margin: 2px 0 0 2px; display: block; }
		#account form label span { display: none; }
		#account form label input { width: 150px; }
	#account .info { border-left: 1px solid #d2d2d2; }
		#account .info strong { display: block; }
	#account .details { width: 484px; }
		#account .details .avatar { float: left; }
		#account .details .inner { padding-left: 64px; }
	#account .groups { 
		float: left; padding-left: 80px; margin-bottom: -2000px;
		border-left: 1px solid #d2d2d2;
		background: url(images/order-icon-group.png) 16px 16px no-repeat; }
		#account .groups a { 
			padding-left: 15px; color: #bc1aa6;
			background: url(images/order-icons.png) 0 -32px no-repeat; }

/* Recommendations box */
.recommendations { margin-top: 16px; }
	.recommendations h3 {	border-bottom: 2px solid #d2d2d2; margin-bottom: 4px; }
	.recommendations ul	{ overflow: hidden; width: 713px; margin: 0 -20px 0 5px; padding: 10px 0; }
		.recommendations li	{ float: left; width: 210px; margin-right: 20px; }
			.recommendations li p { 
				display: block; float: left; width: 118px; }
			.recommendations li .ordering { 
				display: block; float: right; width: 78px; 
				text-align: center; border: 1px solid #d6d6d6; }
			.recommendations li strong { display: block; }
			.recommendations li img { margin: 2px 0; }
			.recommendations li em { 
				display: block; padding: 2px; color: #bc1aa6;
				border: 1px solid #d6d6d6; border-width: 1px 0; }
			.recommendations li .button { 
				display: block; height: 20px; padding: 1px; }
				.recommendations li .button input { 
					color: white; cursor: pointer; width: 100%; display: block; height: 20px; 
					background: transparent url(images/catalog-icons.gif) repeat-x scroll 0 -50px }

/* Product listings */
.productList {}
	.productList .charges td { border-top: 3px solid #f2f2f2; padding: 5px 10px; }	
		.productList .charges td.total { padding-right: 3px; }

/* Navigational buttons */
.orderActions {
	margin: 16px 0 0 0; overflow: hidden; }
	.orderActions .button { 
		display: block; border: 2px solid white; 
		background: #f2f2f2 url(images/order-button-sprites.png) 0 -31px no-repeat; }
		.orderActions .button input { display: block; padding: 0 8px 0 25px; height: 26px; }
	.orderActions .return { float: left; border: 1px solid #d2d2d2; }
	.orderActions .continue { float: right; border: 1px solid #b2b2b2; }
		.orderActions .continue .button { background-position: 100% 0; border-color: white; }
			.orderActions .continue .button input { padding: 0 25px 2px 8px; color: white; font-weight: bold; }

/* Floating summary column */
#summaryFloater { width: 214px; margin: 0 0 16px 0; float: right; }
	#summaryFloater .info { border: 1px solid #d9d9d9; padding: 1px; background: white; }
		#summaryFloater .info .content { padding: 10px 6px; }
		#summaryFloater .info h3 { font-size: 14px; } 
#summary { font-size: 11px; }
	#summary .order { background: #f2f2f2; padding: 8px 8px; }
		#summary .sum { font-size: 12px; font-weight: bold; }
			#summary .sum strong { font-size: 20px; margin: 4px 0; font-weight: normal; color: #bc1aa6; display: block; }
		#summary .summary p { font-size: 11px; padding-top: 0; margin: 0; }
		#summary .bonus { 
			margin: 2px 0; padding: 8px 0 8px 42px; 
			background: #f2f2f2 url(images/order-icons.png) 8px -48px no-repeat; }
			#summary .bonus p { display: none; }
			#summary .bonus strong { font-weight: bold; font-size: 12px; }
		#summary .actions { padding: 0; }
			#summary .actions .button {
				display: block; width: 100%; border: none;
				background: url(images/order-button-sprites.png) 100% -62px no-repeat; height: 26px; }
			#summary .actions .button input { display: block; width: 100%; height: 26px }
			#summary .actions .continue { background-position: 100% 0; }
			#summary .actions .return { background-position: 0 -31px; }
			#summary .actions .continue input { color: white; font-weight: bold; }
				
/* Floating giftcard column */
.giftcard #floater { width: 296px; margin: 0 0 16px 0; float: right; }
.giftcard .contentBox { width: 624px; }

.giftcard form.standard fieldset {
	padding: 2px; margin: 0;
	background: #f2f2f2; }
	.giftcard form #fld_type { width: 112px }
	.giftcard form #fld_theme,
	.giftcard form #fld_message { width: 246px }
	.giftcard form #fld_title,
	.giftcard form #fld_customerName,	
	.giftcard form #fld_customerEmail,
	.giftcard form #fld_deliveryTo { width: 241px }
	.giftcard form #toPayTotal span { font-size: 15px; color: #1a1a1a; margin: 0 8px; display: block; }
	.giftcard form .info { margin: 8px 8px 3px 8px; padding: 12px 0 0 0; border-top: 1px solid white; }

.giftcard .preview { border: 1px solid #B2B2B2; }
	.giftcard .preview h3 { border-bottom: 1px solid #B2B2B2;	padding: 2px; background: #f2f2f2; }
		.giftcard .preview h3 span { display: block; background: white; padding: 2px 6px; }
	
	.giftcard .complete div { margin: 8px 0; padding: 8px; border-top: 1px solid #d9d9d9; }
	.giftcard .complete .thankYou { 
		background: url(images/order-icon-complete.png) 8px 8px no-repeat; 
		padding: 2px 0 10px 50px; border-top: none; }
	.giftcard .complete .thankYou h2 { font-size: 28px; color: #84b915; margin-bottom: 4px; }
	.giftcard .complete .thankYou p { font-size: 15px; font-weight: bold; }
	.giftcard .complete .details h3 { font-size: 13px; font-weight: bold; }
	.giftcard .complete .details p { margin: 0.5em 0 0 0; }
	.giftcard .complete .details small { font-size: 11px; }
	.giftcard .complete .print { text-align: center; padding: 16px 8px 8px 8px;}
	.giftcard .complete .print a { 
		background: url(images/order-icon-print.png) top left no-repeat; 
		padding: 4px 0 8px 30px; font-size: 14px; font-weight:bold; }

.giftcardActions { margin: 16px 0 0 0; overflow: hidden; }
	#floater .giftcardActions { margin: 0; background: #f2f2f2; }
	.giftcardActions .button { 
		display: block; border: 2px solid white; 
		background: #f2f2f2 url(images/order-button-sprites.png) 0 -31px no-repeat; }
		.giftcardActions .button input { display: block; padding: 0 8px 0 25px; height: 26px; }
	.giftcardActions .continue .button { background-position: 100% 0; border-color: white; border-width: 2px 0 0 0; }
		.giftcardActions .continue .button input { width: 100%; padding: 0; color: white; font-weight: bold; }
	.giftcardActions .return { float: left; border: 1px solid #d2d2d2; }
		.giftcardActions .return .button input { }

	.paymentProviders.small { width: 268px; text-indent: -1000px; overflow: hidden; display:block; margin: 12px; }
		.paymentProviders.small span { 
			display: block; overflow: hidden; float: left; text-indent: -1000px; 
			width: 30px; height: 30px; margin-right: 4px;
			background: url(images/order-payment-sprites-small.png) 0 0 no-repeat; }
			.paymentProviders.small .solo { background-position: 0 0; }
			.paymentProviders.small .op { background-position: 0 -30px; }
			.paymentProviders.small .pop { background-position: 0 -60px; width: 125px; }
			.paymentProviders.small .sampo { background-position: 0 -90px; width: 45px; }
			.paymentProviders.small .credit { background-position: 0 -120px; width: 94px; }
			.paymentProviders.small .assist { background-position: 0 -150px; width: 200px; height: 60px; }
			.paymentProviders.small .tapiola { background-position: 0 -210px; }
			.paymentProviders.small .hb { background-position: 0 -240px; width: 123px; }
			.paymentProviders.small .spankki { background-position: 0 -270px; width: 80px; }
			.paymentProviders.small .aab { background-position: 0 -300px; width: 32px; }

