/* ====================================================================

Autoinside
Grupa Pff
http://pff.pl/

Michał Krupa
m.krupa@pff.pl

November 2009

==================================================================== */




/* --------------------------
1. GLOBAL
---------------------------*/

	/* --------------------------
	1.1 CSS Reset
	---------------------------*/

		html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		}
		
		:focus {
		outline: 0;
		}
		
		body {
		line-height: 1;
		color: black;
		background: white;
		}
		
		ol, ul {
		list-style: none;
		}
		
		table {
		border-collapse: separate;
		border-spacing: 0;
		}
		
		caption, th, td {
		text-align: left;
		font-weight: normal;
		}
		
		blockquote:before, blockquote:after,
		q:before, q:after {
		content: "";
		}
		
		blockquote, q {
		quotes: "" "";
		}
		
		b, strong {
		font-weight: bold;
		}
		
		i, em {
		font-style: italic;
		}

	/* --------------------------
	1.2 General styles
	---------------------------*/	
	
		body {
		font: 62.5%/1.6 Tahoma, Arial, Helvetica, Verdana, sans-serif;
		}
		
		img {
		display: block;
		border: 0;
		}
		
		label[for] {
		cursor: pointer;
		}
		
		input, select, option, textarea {
		vertical-align: middle;
		}
			input.img, select.img {
			width: auto !important;
			height: auto !important;
			border: 0 !important;
			background: none !important;
			}
		
		/* hidden elements */	
		.h, div.hr hr {
		position: absolute;
		top: -9900px !important;
		left: 0;
		display: block;
		width: 1px;
		height: 1px;
		overflow: hidden;
		text-indent: -9990px;
		font-size: 1px;
		}
		
		/* floats clear */
		.clear {
		clear: both;
		font-size: 1px;
		visibility: hidden;
		}
	
/* --------------------------
2. BASE
---------------------------*/

	body {
	background: #E1DEDE;
	color: #000;
	}

/* --------------------------
3. BASIC LAYOUT
---------------------------*/

	body {
	}	
		a:link,
		a:visited {
		color: #8B0204;
		text-decoration: underline;
		}
		a:hover,
		a:active {
		color: #500103;
		text-decoration: underline;
		}
					
		input, textarea, select {
		background: #fff;
		border: 1px solid #cdcdcd;
		color: #aaa;
		font: 1em/1.6 Arial, Helvetica, sans-serif;
		}	
			input, textarea {
			padding: 5px 10px;
			}
				input:focus, textarea:focus {
				border-color: #777;
				color: #333;
				}
				
			input {
			width: 112px;
			line-height: 1.5em;
			}
			select {
			font-size: 1.2em;
			}
			input.img, select.img {
			padding: 0;
			}

	/* --------------------------
	3.1 Header
	---------------------------*/
	
		#header {
		background: url(img/header/bg.png) 50% 77px no-repeat #fff;
		border-bottom: 1px solid #C4BCBC;
		}
			#header-inner {
			position: relative;
			width: 959px;
			margin: 0 auto;
			padding: 38px 0 0;
			background: url(img/header/bg-inner.jpg) 50% 100% no-repeat;
			}

		/* --------------------------
		3.1.1 Logo
		---------------------------*/
		
			#logo {
			float: left;
			display: inline;
			width: 225px;
			height: 44px;
			overflow: hidden;
			margin: 20px 0 0 20px;
			font-size: 1em;
			font-weight: normal;
			}
				#logo a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				color: #000;
				font-size: 3.5em;
				line-height: 44px;
				text-align: center;
				text-decoration: none;
				}
				
				#logo .r {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/logo.png) no-repeat;
				}

		/* --------------------------
		3.1.2 Main search
		---------------------------*/
			
			#mainSearch {
			position: absolute;
			left: 0;
			bottom: -9px;
			width: 317px;
			height: 53px;
			background: url(img/header/mainsearch/bg.png) no-repeat #E1DEDE;
			}				
				#mainSearch p {
				height: auto;
				overflow: hidden;
				padding: 8px 0 0 7px;
				}
								
				#mainSearch #f_s_query {
				float: left;
				display: inline;
				width: 211px;
				padding: 10px;
				background: url(img/header/mainsearch/input-bg.png) no-repeat #fff;
				border: none;
				font-size: 1.2em;
				}
					#mainSearch #f_s_query:focus {
					color: #000;
					}
					
				#mainSearch input.img {
				float: left;
				display: inline;
				}

		/* --------------------------
		3.1.3 Contact
		---------------------------*/
			
			#contact {
			float: right;
			display: inline;
			width: 298px;
			height: auto;
			overflow: hidden;
			padding: 0 0 0.3em;
			font-size: 1.4em;
			}
				#contact h2 {
				margin: 0 0 1.6em;
				font-weight: bold;
				}
				
				#contact p {
				float: left;
				display: inline;
				width: 45%;
				padding: 0 4% 0 0;
				}
							
	/* --------------------------
	3.2 Content
	---------------------------*/
	
		#content {
		background: url(img/content/bg.png) repeat-x;
		}
			#content-inner {
			width: 959px;
			margin: 0 auto;
			padding: 8px 0 0;
			}

		/* --------------------------
		3.2.1 Main navigation & user & cart box
		---------------------------*/
		
			#navUserCartBox {
			position: relative;
			clear: both;
			height: 51px;
			margin: 0 0 11px;
			background: url(img/content/navusercart/bg.png) no-repeat #717477;
			font-size: 1.1em;
			}
				#navUserCartBox #cart-ico {
				position: absolute;
				right: -8px;
				top: -16px;
				width: 62px;
				height: 73px;
				overflow: hidden;
				background: url(img/content/navusercart/cart.jpg) no-repeat;
				font-size: 1px;
				line-height: 1px;
				}

			/* --------------------------
			3.2.1.1 Main navigation
			---------------------------*/
			
				#mainNav {
				float: left;
				display: inline;
				width: 635px;
				height: auto;
				overflow: hidden;
				padding: 14px 0 0;
				font-size: 1.3em;
				}
					#mainNav li {
					float: left;
					display: inline;
					height: 24px;
					margin: 0 9px 0 20px;
					line-height: 24px;
					}					
						#mainNav a {
						position: relative;
						display: block;
						height: 24px;
						overflow: hidden;
						}
							#mainNav a:link,
							#mainNav a:visited {
							color: #fff;
							text-decoration: none;
							}
							#mainNav a:hover,
							#mainNav a:active {
							color: #fff;
							text-decoration: underline;
							}
							
							#mainNav .r {
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							width: 100%;
							height: 100%;
							background: 0 0 no-repeat;
							}
							
					#mainNav #mn-home {
					width: 105px;
					}
						#mainNav #mn-home .r {
						background-image: url(img/content/navusercart/mainnav/home.png);
						}
					#mainNav #mn-about {
					width: 37px;
					}
						#mainNav #mn-about .r {
						background-image: url(img/content/navusercart/mainnav/about.png);
						}
					#mainNav #mn-delivery {
					width: 58px;
					}
						#mainNav #mn-delivery .r {
						background-image: url(img/content/navusercart/mainnav/delivery.png);
						}
					#mainNav #mn-payment {
					width: 66px;
					}
						#mainNav #mn-payment .r {
						background-image: url(img/content/navusercart/mainnav/payment.png);
						}
					#mainNav #mn-warsaw {
					width: 126px;
					}
						#mainNav #mn-warsaw .r {
						background-image: url(img/content/navusercart/mainnav/warsaw.png);
						}
					#mainNav #mn-signin {
					width: 71px;
					margin-left: 18px;
					}
						#mainNav #mn-signin .r {
						background-image: url(img/content/navusercart/mainnav/signin.png);
						}
					#mainNav #mn-signout {
					width: 60px;
					margin-left: 18px;
					}
						#mainNav #mn-signout .r {
						background-image: url(img/content/navusercart/mainnav/signout.png);
						}

			/* --------------------------
			3.2.1.2 User box
			---------------------------*/
			
				#userBox {
				float: left;
				display: inline;
				width: 110px;
				margin: 7px 10px 0 23px;
				}

			/* --------------------------
			3.2.1.3 Cart
			---------------------------*/
			
				#cart-inner {
				float: left;
				display: inline;
				width: 120px;
				margin: 7px 0 0 0;
				}
					#cart-inner .toCart {
					padding-right: 12px;
					background: url(img/embellishments/arr-right-red.gif) 100% 60% no-repeat;
					}	
		
		/* --------------------------
		3.2.2 Main content
		---------------------------*/
		
			#mainContent {
			float: right;
			display: inline;
			width: 706px;
			padding: 1em 0 0 20px;
			font-size: 1.1em;
			background: url(img/content/maincontent/bg-top.png) 0 0 no-repeat #fff;
			}	
				#mainContent-bot {
				clear: both;
				width: 726px;
				height: 10px;
				overflow: hidden;
				margin: 0 0 0 -20px;
				background: url(img/content/maincontent/bg-bot.png);
				font-size: 1px;
				line-height: 1px;
				}
						
				#mainContent .stock-full {
				color: #639600;
				}
				#mainContent .stock-medium {
				color: #f90;
				}
				#mainContent .stock-few {
				color: #c00;
				}
				#mainContent .stock-empty {
				color: #999;
				}

			/* --------------------------
			3.3.2.1 Headers
			---------------------------*/
				
				#mainContent h2 {
				position: relative;
				overflow: hidden;
				margin: 0.7em 0 0.8em;
				color: #000;
				font-size: 1.2em;
				font-weight: bolder;
				line-height: 1.2em;
				}
					#mainContent h2 .r {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					}
					
					#mainContent h2.head-najnowsze-produkty {
					width: 148px;
					height: 14px;
					text-transform: uppercase;
					}
						#mainContent h2.head-najnowsze-produkty .r {
						background: url(img/content/headers/najnowsze-produkty.png) no-repeat;
						}
					
					#mainContent h2.head-produkty {
					width: 56px;
					height: 14px;
					}
						#mainContent h2.head-produkty .r {
						background: url(img/content/headers/produkty.png) no-repeat;
						}
					
					#mainContent h2.head-powiazane-produkty {
					width: 122px;
					height: 14px;
					}
						#mainContent h2.head-powiazane-produkty .r {
						background: url(img/content/headers/powiazane-produkty.png) no-repeat;
						}
					
					#mainContent h2.head-zamowienie {
					width: 74px;
					height: 14px;
					}
						#mainContent h2.head-zamowienie .r {
						background: url(img/content/headers/zamowienie.png) no-repeat;
						}
					
				#mainContent h3 {
				color: #000;
				font-size: 1em;
				font-weight: bolder;
				}


			/* --------------------------
			3.3.2.2 Buttons
			---------------------------*/
			
				#mainContent .button-arrUp,
				#mainContent .button-arrDown {
				position: relative;
				display: block;
				width: 23px;
				height: 23px;
				overflow: hidden;
				background: #ccc;
				color: #222;
				line-height: 23px;
				text-align: center;
				}
					#mainContent .button-arrUp .r,
					#mainContent .button-arrDown .r {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					}
					#mainContent .button-arrUp .r {
					background: url(img/buttons/arrup.png) no-repeat;
					}
					#mainContent .button-arrDown .r {
					background: url(img/buttons/arrdown.png) no-repeat;
					}
							

		/* --------------------------
		3.2.3 Navigation
		---------------------------*/
		
			#navigation {
			display: inline;
			width: 233px;
			}

			/* --------------------------
			3.3.3.1 Submenu
			---------------------------*/
			
				#navigation #submenu {
				padding: 0 0 10px;
				background: url(img/content/navigation/submenu/bg-bot.png) 0 100% no-repeat #7F8285;
				font-size: 1.2em;
				}
					#navigation #submenu h3 {
					position: relative;
					height: 47px;
					overflow: hidden;
					color: #fff;
					font-size: 1.2em;
					line-height: 47px;
					text-transform: uppercase;
					}
						#navigation #submenu h3 .r {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						width: 100%;
						height: 100%;
						background: url(img/content/navigation/submenu/header.png);
						}
						
					#navigation #submenu li {
					border-top: 1px solid #ADB0B4;
					}
						#navigation #submenu li a {
						display: block;
						padding: 0.75em 10px 0.75em 20px;;
						background: url(img/content/navigation/submenu/level1-bg.png) repeat-x #75787B;
						color: #fff;
						font-weight: bolder;
						}
							#navigation #submenu li a:link,
							#navigation #submenu li a:visited {
							text-decoration: none;
							}
							#navigation #submenu li a:hover,
							#navigation #submenu li a:active {
							text-decoration: underline;
							}
						
						#navigation #submenu li li {
						}
							#navigation #submenu li li a {
							padding-top: 0.4em;
							padding-bottom: 0.4em;
							background: none;
							color: #000;
							font-weight: normal;
							}
								#navigation #submenu li li.first-item a {
								padding-top: 0.7em;
								background: url(img/content/navigation/submenu/level2-bg.png) repeat-x;
								}							
							
		/* --------------------------
		3.2.4 Allegro
		---------------------------*/
							
			#allegro {
			clear: both;
			margin: 2.5em 0 0 233px;
			}
				#allegro .reviews a {
				position: relative;
				display: block;
				height: 68px;
				overflow: hidden;
				background: #000;
				color: #fff;
				font-size: 2em;
				}
					#allegro .reviews .r {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					background: url(img/content/allegro/reviews.jpg) no-repeat;
					}
							
		/* --------------------------
		3.2.5 Footer
		---------------------------*/
		
			#footer {
			height: auto;
			overflow: hidden;
			margin: 1.8em 0 0 233px;
			padding: 1.8em 0;
			border-top: 1px solid #B6B3B3;
			font-size: 1.1em;
			}				
				#footer a {
				font-weight: bolder;
				}
				
				#footer p {
				float: left;
				display: inline;
				}
					#footer p span {
					padding: 0 0 0 26px;
					background: url(img/embellishments/slash-grey.gif) 12px 60% no-repeat;
					}
					
					#footer p span.first-item {
					padding-left: 0;
					background: none;
					}	
				
				#footer ul {
				float: right;
				display: inline;
				}
					#footer ul li {
					display: inline;
					padding: 0 0 0 1em;
					}
						#footer ul li a {
						color: #000;
						font-weight: normal;
						}
							#footer ul li a:link,
							#footer ul li a:visited {
							text-decoration: none;
							}
							#footer ul li a:hover,
							#footer ul li a:active {
							text-decoration: underline;
							}
			

/* --------------------------
4. MAIN CONTENT LAYOUTS
---------------------------*/

	/* --------------------------
	4.1 Items overview
	---------------------------*/
	
		.itemsOverview {
		height: auto;
		overflow: hidden;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		border-top: 1px solid #ccc;
		padding: 1em 0 2em;
		}
			.itemsOverview .item {
			position: relative;
			float: left;
			display: inline;
			width: 156px;
			margin: 2em 0 0 20px;
			}
				.itemsOverview .oddItem {
				clear: left;
				margin-left: 0;
				}
			
				.itemsOverview .item .pic {
				position: relative;
				margin: 0 0 0.5em;
				border: 1px solid #cecece;
				}
				
				.itemsOverview .item h3 {
				line-height: 1.3em;
				}
					.itemsOverview .item h3 a:link,
					.itemsOverview .item h3 a:visited {
					color: #000;
					text-decoration: none;
					}
					.itemsOverview .item h3 a:hover,
					.itemsOverview .item h3 a:active {
					color: #8C0305;
					text-decoration: underline;
					}
					
				.itemsOverview .item p {
				}
					.itemsOverview .item p strong {
					color: #8C0305;
					}

	/* --------------------------
	4.2 Categories list
	---------------------------*/
	
		.categoriesList {
		margin: 0 0 2em;
		padding: 0.6em 8px 1.5em;
		border-bottom: 1px solid #e6e6e6;
		}
			.categoriesList ul {
			height: auto;
			overflow: hidden;
			}
				.categoriesList li {
				float: left;
				display: inline;
				width: 150px;
				margin: 0.1em 18px 0.1em 0;
				}
					#content .categoriesList li a:link {
					color: #6b6b6b;
					}
					#content .categoriesList li a:visited {
					color: #888;
					}
					#content .categoriesList li a:hover,
					#content .categoriesList li a:active {
					color: #222;
					}				

	/* --------------------------
	4.3 Item details
	---------------------------*/
	
		.itemDetails {
		padding: 2.5em 0 1.5em;
		border-top: 1px solid #ccc;
		}					
			.itemDetails .info {
			float: right;
			display: inline;
			width: 217px;
			margin: 0 0 1.5em;
			}
				.itemDetails .info h3 {
				position: relative;
				overflow: hidden;
				margin: 0 0 1em;
				}
					.itemDetails .info h3 .r {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					}

				.itemDetails .info .details {
				margin: 0 0 3em;
				padding: 2em 0 0;
				border-top: 1px solid #ccc;
				background: url(img/embellishments/gradient.png) 0 1px repeat-x;
				}				
					.itemDetails .info .details h3 {
					width: 69px;
					height: 16px;
					}
						.itemDetails .info .details h3 .r {
						background: url(img/content/maincontent/itemdetails/headers/details.png) no-repeat;
						}
						
					.itemDetails .info .details ul {
					}
						.itemDetails .info .details ul li {
						padding: 0.4em 0;
						}

				.itemDetails .info .color {
				margin: 0 0 3em;
				padding: 2em 0 0;
				border-top: 1px solid #ccc;
				background: url(img/embellishments/gradient.png) 0 1px repeat-x;
				}				
					.itemDetails .info .color h3 {
					width: 84px;
					height: 14px;
					}
						.itemDetails .info .color h3 .r {
						background: url(img/content/maincontent/itemdetails/headers/color.png) no-repeat;
						}
						
					.itemDetails .info .color select {
					width: 192px;
					color: #222;
					}

				.itemDetails .info .order {
				border-top: 1px solid #ccc;
				background: url(img/embellishments/gradient.png) 0 1px repeat-x;
				}	
					.itemDetails .info .order .price {
					padding: 0.8em 10px 0.8em 16px;
					font-size: 1.6em;
					}	
						.itemDetails .info .order .price strong {
						color: #8B0204;
						}
					
			.itemDetails .pics {
			float: left;
			display: inline;
			width: 476px;
			margin: 0 0 1.5em;
			}
				.itemDetails .pics .pic {
				position: relative;
				margin: 0 0 0.5em;
				border: 1px solid #cecece;
				text-align: center;
				}
					.itemDetails .pics .pic img {
					display: inline;
					vertical-align: middle;
					}
					
				.itemDetails .pics .thumbs {
				height: auto;
				overflow: hidden;
				}
					.itemDetails .pics .thumbs li {
					float: left;
					display: inline;
					margin: 0 0 0.5em 4px;
					border: 1px solid #cecece;
					}
						.itemDetails .pics .thumbs li.first-item {
						margin-left: 0;
						}
				
			
			.itemDetails .description {
			clear: both;
			padding: 1em 0 0;
			border-top: 1px solid #ccc;
			background: url(img/embellishments/gradient.png) 0 1px repeat-x;
			}
				.itemDetails .description h3 {
				position: relative;
				width: 86px;
				height: 14px;
				overflow: hidden;
				margin: 2em 0 1em;
				}
					.itemDetails .description h3 .r {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					background: url(img/content/maincontent/itemdetails/headers/description.png) no-repeat;
					}
					
				
	/* --------------------------
	4.4 Text block
	---------------------------*/
	
		.textBlock {
		padding: 1em 24px 1em 0;
		border-top: 1px solid #ccc;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		}		
			.textBlock p {
			margin: 1em 0;
			}

	/* --------------------------
	4.5 Pageing
	---------------------------*/
	
		.pageing {
		height: auto;
		overflow: hidden;
		padding: 2em 24px 1em 0;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		border-top: 1px solid #ccc;
		}			
			.pageing ul {
			float: right;
			display: inline;
			}
				.pageing li {
				float: left;
				display: inline;
				margin: 0 0 0 3px;
				color: #444;
				font-weight: bolder;
				}
					.pageing li.hellip {
					padding: 0.7em 4px;
					}
					
					#content .pageing li a,
					#content .pageing li strong {
					display: block;
					padding: 0.7em 12px;
					}
						#content .pageing li a {
						background: #E7E8E9;
						}				
							#content .pageing li a:link,
							#content .pageing li a:visited {
							color: #444;
							text-decoration: none;
							}
							#content .pageing li a:hover,
							#content .pageing li a:active {
							color: #000;
							text-decoration: underline;
							}
							
						#content .pageing li strong {
						background: #000;
						color: #8B0204;
						}
					
					.pageing li.prev a,
					.pageing li.next a {
					background-color: #000 !important;
					}
						#content .pageing li.prev a:link,
						#content .pageing li.prev a:visited,
						#content .pageing li.next a:link,
						#content .pageing li.next a:visited {
						color: #8B0204;
						}
						#content .pageing li.prev a:hover,
						#content .pageing li.prev a:active,
						#content .pageing li.next a:hover,
						#content .pageing li.next a:active {
						color: #fff;
						}
						
	/* --------------------------
	4.6 Sorting criteria
	---------------------------*/
	
		.sortCriteria {
		float: right;
		display: inline;
		height: 2.4em;
		margin: -3em 5px 0 0;
		}
			#content .sortCriteria h3 {
			float: left;
			display: inline;
			margin: 0.3em 2em 0 0;
			}
			
			.sortCriteria ul {
			float: left;
			display: inline;
			padding: 0.1em 0 0;
			}
				.sortCriteria li {
				float: left;
				display: inline;
				padding: 0 19px 0 0;
				font-weight: bolder;
				text-transform: lowercase;
				}
					.sortCriteria li span,
					.sortCriteria li a {
					float: left;
					display: inline;
					margin: 0.2em 0 0 3px;
					}						
						.sortCriteria li span {
						margin-right: 0.5em;
						}
						
						.sortCriteria li a.button-arrUp,
						.sortCriteria li a.button-arrDown {
						margin-top: 0;
						}						
						.sortCriteria li span.r {
						float: none;
						display: block;
						margin: 0;
						}

	/* --------------------------
	4.7 Order plan
	---------------------------*/
	
		#orderPlan {
		height: auto;
		overflow: hidden;
		padding: 2em 24px 2em 18px;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		border-top: 1px solid #ccc;
		}
			#orderPlan li {
			position: relative;
			float: left;
			display: inline;
			height: 15px;
			overflow: hidden;
			margin: 0 0 0 44px;
			font-size: 0.9em;
			}
				#orderPlan #step1 {
				margin-left: 0;
				}
			
				#orderPlan li .r {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: 0 0 no-repeat;
				}
					#orderPlan li.activeStep .r {
					background-position: 0 -15px;
					}
				
				#orderPlan #step1 {
				width: 81px;
				}
					#orderPlan #step1 .r {
					background-image: url(img/content/maincontent/order/steps/step1.png);
					}
				#orderPlan #step2 {
				width: 95px;
				}
					#orderPlan #step2 .r {
					background-image: url(img/content/maincontent/order/steps/step2.png);
					}
				#orderPlan #step3 {
				width: 112px;
				}
					#orderPlan #step3 .r {
					background-image: url(img/content/maincontent/order/steps/step3.png);
					}
				#orderPlan #step4 {
				width: 107px;
				}
					#orderPlan #step4 .r {
					background-image: url(img/content/maincontent/order/steps/step4.png);
					}
				#orderPlan #step5 {
				width: 73px;
				}
					#orderPlan #step5 .r {
					background-image: url(img/content/maincontent/order/steps/step5.png);
					}

	/* --------------------------
	4.8 Order details
	---------------------------*/
	
		.orderDetails {
		}
			.orderDetails label {
			vertical-align: middle;
			}
				.orderDetails label strong {
				text-decoration: underline;
				}
			
			.orderDetails input.img {
			margin-left: -2px;
			}
			
			#mainContent .orderDetails p {
			margin: 0.7em 0 0;
			}
		
			.orderDetails .payment,
			.orderDetails .delivery {
			padding: 2em 24px 1.5em 18px;
			background: url(img/embellishments/gradient.png) 0 1px repeat-x;
			border-top: 1px solid #ccc;
			}
				.orderDetails .payment h3,
				.orderDetails .delivery h3 {
				position: relative;
				overflow: hidden;
				margin: 0 0 1.5em;
				}
					.orderDetails .payment h3 .r,
					.orderDetails .delivery h3 .r {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					}
					
					.orderDetails .payment h3 {
					width: 97px;
					height: 15px;
					}
						.orderDetails .payment h3 .r {
						background: url(img/content/maincontent/order/headers/payment.png) no-repeat;
						}
					.orderDetails .delivery h3 {
					width: 127px;
					height: 15px;
					}
						.orderDetails .delivery h3 .r {
						background: url(img/content/maincontent/order/headers/delivery.png) no-repeat;
						}
				
				.orderDetails .payment ul,
				.orderDetails .delivery ul {
				margin: 0.7em 0 0;
				}
					.orderDetails .payment ul li,
					.orderDetails .delivery ul li {
					display: inline;
					padding: 0 2em 0 0;
					}

	/* --------------------------
	4.9 Customer details
	---------------------------*/
	
		.customerDetails {
		height: auto;
		overflow: hidden;
		padding: 2em 24px 1.5em 18px;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		border-top: 1px solid #ccc;
		}
			.customerDetails h3 {
			position: relative;
			width: 95px;
			height: 11px;
			overflow: hidden;
			}
				.customerDetails h3 .r {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				background: url(img/content/maincontent/order/headers/customer.png) no-repeat;
				}
			
			.customerDetails .customerType {
			clear: both;
			padding: 1.5em 0;
			}
				#content .customerDetails .customerType label {
				float: none;
				padding: 0 15px 0 5px;
				}
				
				#content .customerDetails .customerType input.img {
				float: none;
				margin: 0 0 0 -2px;
				}
				
			.customerDetails .personal {
			float: left;
			width: 302px;
			}
			.customerDetails .address {
			float: left;
			width: 345px;
			}			
				.customerDetails p {
				height: auto;
				overflow: hidden;
				padding: 0.3em 0;
				}		
					.customerDetails label {
					float: left;
					display: inline;
					padding: 6px 0 0;
					}
						.customerDetails .personal label {
						width: 75px;
						}
						.customerDetails .address label {
						width: 90px;
						}
				
					#content .customerDetails input {
					float: left;
					display: inline;
					width: 165px;
					padding-top: 6px;
					padding-bottom: 6px;
					}
				
					#content .customerDetails select {
					float: left;
					display: inline;
					width: 180px;
					margin: 5px 0;
					}
						#content .customerDetails select:focus {
						border-color: #999;
						}
			
			.customerDetails span {
			float: left;
			display: inline;
			padding: 6px 15px;
			}
					
			#content .customerDetails #f_order_info_building {
			width: 40px;
			margin-right: 34px;
			}
			#content .customerDetails #f_order_info_apartment {
			width: 45px;
			}
			.customerDetails #f_order_info_state {
			margin: 4px 0 0;
			padding: 0;
			}

	/* --------------------------
	4.10 Buttons
	---------------------------*/
	
		#mainContent .formButtons {
		clear: both;
		height: auto;
		overflow: hidden;
		padding: 1.5em 24px 0.5em 0;
		background: url(img/embellishments/gradient.png) 0 1px repeat-x;
		border-top: 1px solid #ccc;
		}
			#mainContent .formButtons .right {
			float: right;
			margin: 0 5px 0 0;
			}
			#mainContent .formButtons .left {
			float: left;
			margin: 0 0 0 5px;
			}