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

MALYCIUSZEK.PL
Grupa Pff
http://pff.pl/

Michał Krupa
michal@procommerce.lodz.pl

June 2009


TABLE OF CONTENT:

	1. GLOBAL
		1.1 CSS Reset
		1.2 General styles
	2. BASE
	3. BASIC LAYOUT
		3.1 Header
			3.1.1 Logo
			3.1.2 Shopping cart
		3.2 Main navigation
		3.3 Banner
		3.4 Content
			3.4.1 Headers
			3.4.2 Main content wrapper
			3.4.3 Main search
			3.4.4 Main content
				3.4.4.1 Buttons
			3.4.5 Navigation
				3.4.5.1 Submenu
			3.4.6 Sidebar
				3.4.6.1 Login
				3.4.6.2 Sizes
				3.2.6.3 Recommend to a friend
			3.2.7 Bottom navigation
			3.2.8 Footer
	4. MAIN CONTENT LAYOUTS
		4.1 Items overview
		4.2 Item details
		4.3 Text block
		4.4 Bread crumbs
		4.5 Pageing
		4.6 Order plan
		4.7 Order details
		4.8 Customer details
		4.9 Buttons
		4.10 How to

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


 

/* --------------------------
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;
		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
---------------------------*/

	html {
	}

	body {
	background: #fff;
	color: #848484;
	}

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

	body {
	}		
		input, textarea, select, option {
		background: no-repeat #d5dfe1;
		border: 0;
		color: #768487;
		font: 1em/1.6 Arial, Helvetica, sans-serif;
		}	
			input, textarea {
			padding: 13px 3px 11px 10px;
			}
				input:focus, textarea:focus {
				color: #111;
				}
				
			input {
			width: 170px;
			background-image: url(img/inputs/bg-183.png);
			line-height: 1.5em;
			}
			select {
			font-size: 1.2em;
			}
			input.img, select.img {
			padding: 0;
			}
			
			
		a:link,
		a:visited {
		color: #7593a2;
		text-decoration: underline;
		}	
		a:hover,
		a:active {
		color: #557280;
		text-decoration: underline;
		}

	/* --------------------------
	3.1 Header
	---------------------------*/
	
		#header {
		width: 978px;
		height: auto;
		overflow: hidden;
		margin: 0 0 0 140px;
		background: url(img/header/bg.png) no-repeat;
		}

		/* --------------------------
		3.1.1 Logo
		---------------------------*/
		
			#logo {
			float: left;
			display: inline;
			width: 352px;
			height: 40px;
			overflow: hidden;
			margin: 27px 0 0 0;
			font-size: 1em;
			font-weight: bolder;
			}
				#logo a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				color: #4D6672;
				font-size: 3em;
				}
				
				#logo .r {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/logo.png) 0 0 no-repeat;
				}
			
		/* --------------------------
		3.1.2 Shopping cart
		---------------------------*/
		
			#cart {
			float: right;
			display: inline;
			width: 220px;
			min-height: 74px;
			margin: 14px 0 0;
			padding: 4px 0 0 89px;
			background: url(img/header/cart/bg.png) no-repeat;
			}
				#cart h3 {
				color: #000;
				font-size: 1.3em;
				font-weight: bold;
				}
				
				#cart p {
				margin: 0.2em 0;
				}
				
				#cart .browse {
				padding: 0 0 0 4px;
				}
					#cart .browse a {
					padding: 0 0 0 11px;
					background: url(img/embellishments/arr-pink.gif) 0 60% no-repeat;
					text-transform: lowercase;
					}

	/* --------------------------
	3.2 Main navigation
	---------------------------*/
	
		#mainNav {
		width: 1118px;
		height: 58px;
		background: url(img/mainnav/bg.png) 100% 0 no-repeat;
		}
			#mainNav ul {
			height: auto;
			overflow: hidden;
			margin: 0 0 0 140px;
			}
				#mainNav ul li {
				float: left;
				display: inline;
				margin: 19px 0 0;
				font-size: 1.2em;
				font-weight: bolder;
				}					
					#mainNav ul a {
					position: relative;
					display: block;
					height: 19px;
					overflow: hidden;
					}
						#mainNav ul a:link,
						#mainNav ul a:visited {
						color: #000;
						text-decoration: none;
						}
						#mainNav ul a:hover,
						#mainNav ul a:active {
						color: #3d583d;
						text-decoration: underline;
						}
						
						#mainNav ul a .r {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						width: 100%;
						height: 100%;
						}
							#mainNav ul a:link .r,
							#mainNav ul a:visited .r {
							background: 0 0 no-repeat;
							}
							#mainNav ul a:hover .r,
							#mainNav ul a:active .r {
							background: 0 -19px no-repeat;
							}
						
						#mainNav ul #mn-home {
						width: 142px;
						}
							#mainNav ul #mn-home .r {
							background-image: url(img/mainnav/home.png);
							}
						#mainNav ul #mn-novelties {
						width: 108px;
						}
							#mainNav ul #mn-novelties .r {
							background-image: url(img/mainnav/novelties.png);
							}
						#mainNav ul #mn-special {
						width: 116px;
						}
							#mainNav ul #mn-special .r {
							background-image: url(img/mainnav/special.png);
							}
						#mainNav ul #mn-contact {
						width: 102px;
						}
							#mainNav ul #mn-contact .r {
							background-image: url(img/mainnav/contact.png);
							}
						#mainNav ul #mn-delivery {
						width: 108px;
						}
							#mainNav ul #mn-delivery .r {
							background-image: url(img/mainnav/delivery.png);
							}
						#mainNav ul #mn-licence {
						width: 122px;
						}
							#mainNav ul #mn-licence .r {
							background-image: url(img/mainnav/licence.png);
							}
						#mainNav ul #mn-cart {
						width: 98px;
						}
							#mainNav ul #mn-cart .r {
							background-image: url(img/mainnav/cart.png);
							}

	/* --------------------------
	3.3 Banner
	---------------------------*/
	
		#banner {
		width: 1118px;
		height: 305px;
		background: url(img/banner/bg.jpg) 100% 0 no-repeat;
		}
							
	/* --------------------------
	3.4 Content
	---------------------------*/
	
		#content {
		width: 1118px;
		background: url(img/content/bg.png) repeat-x #ebf0f1;
		font-size: 1.1em;
		}		
			#content-inner {
			height: auto;
			overflow: hidden;
			margin: 0 0 0 140px;
			padding: 12px 0 0;
			background: url(img/content/bg-top.png) 100% 0 no-repeat;
			}

		/* --------------------------
		3.4.1 Headers
		---------------------------*/
			
			#mainContent h2,
			#mainContent div.header,
			#navigation h3,
			#sidebar h3,
			#mainSearch h3 {
			clear: both;
			margin: 0.8em 0 0.4em;
			padding: 8px 0 20px 60px;
			color: #000;
			background: url(img/headers/orange01.png) no-repeat;
			}
			
			#mainContent h2,
			#navigation h3,
			#sidebar h3,
			#mainSearch h3 {
			font-size: 1.18em;
			font-weight: bold;
			}
				#mainContent h2 a:link,
				#navigation h3 a:link,
				#sidebar h3 a:link,
				#mainContent h2 a:visited,
				#navigation h3 a:visited,
				#sidebar h3 a:visited {
				color: #000;
				text-decoration: none;
				}
				#mainContent h2 a:hover,
				#mainContent h2 a:active,
				#navigation h3 a:hover,
				#navigation h3 a:active,
				#sidebar h3 a:hover,
				#sidebar h3 a:active {
				color: #557280;
				text-decoration: underline;
				}
			
			#mainContent div.header {
			height: auto;
			overflow: hidden;
			}
				#mainContent div.header h2 {
				float: left;
				display: inline;
				margin: 0;
				padding: 0;
				background: none;
				}
			
				#mainContent div.header .more {
				float: right;
				display: inline;
				margin: 0.5em 0 0 10px;
				font-size: 0.9em;
				}
					#mainContent div.header .more a {
					padding: 0 0 0 11px;
					background: url(img/embellishments/arr-pink.gif) 0 60% no-repeat;
					}
				
				#content #navigation h3 {
				background-image: url(img/headers/green01.png);
				}
				#content #mainSearch h3 {
				background-image: url(img/headers/blue01.png);
				}
				#content #sidebar #loginForm h3,
				#content #sidebar #userBox h3 {
				background-image: url(img/headers/pink01.png);
				}
				#content #sidebar #sizes h3 {
				background-image: url(img/headers/grey01.png);
				}
				#content #sidebar #recommend h3 {
				background-image: url(img/headers/red01.png);
				}
				#content #mainContent .head-special {
				background-image: url(img/headers/orange02.png);
				}
				#content #mainContent .head-novelties {
				background-image: url(img/headers/green02.png);
				}
				#content #mainContent .head-recommend {
				background-image: url(img/headers/blue02.png);
				}
				#mainContent h2.head-size {
				background-image: url(img/headers/orange03.png);
				}
		
			#mainContent h3 {
			margin: 0.5em 0;
			color: #666;
			font-size: 1.1em;
			font-weight: bolder;
			}
				#mainContent h3 a:link,
				#mainContent h3 a:visited {
				color: #666;
				text-decoration: none;
				}
				#mainContent h3 a:hover,
				#mainContent h3 a:active {
				color: #557280;
				text-decoration: underline;
				}

		/* --------------------------
		3.4.2 Main content wrapper
		---------------------------*/
		
			#mainContentWrap {
			float: right;
			display: inline;
			width: 683px;
			margin: 0 12px 3em 0;
			}

		/* --------------------------
		3.4.3 Main search
		---------------------------*/
		
			#mainSearch {
			height: auto;
			overflow: hidden;
			margin: 0 0 1.3em;
			}
				#mainSearch h3 {
				float: left;
				display: inline;
				}
				
				#mainSearch fieldset {
				padding: 1em 0 0 13px;
				}				
					#mainSearch p {
					float: left;
					display: inline;
					}
						#mainSearch input.img {
						margin: 2px 0 0 1px;
						}
						
						#mainSearch .advanced {
						margin: 1.2em 0 0 23px;
						font-size: 0.9em;
						}
							#mainSearch .advanced a {
							padding: 0 0 0 15px;
							background: url(img/embellishments/arr-pink.gif) 0 60% no-repeat;
							}

		/* --------------------------
		3.4.4 Main content
		---------------------------*/
		
			#mainContent {
			float: left;
			display: inline;
			width: 457px;
			padding: 0 0 2em;
			}
				 .mainContentWide #mainContent {
				width: 457px;
				}
				
				#mainContent .stock-full {
				color: #639600;
				}
				#mainContent .stock-medium {
				color: #f90;
				}
				#mainContent .stock-few {
				color: #c00;
				}
				#mainContent .stock-empty {
				color: #999;
				}

			/* --------------------------
			3.4.4.1 Buttons
			---------------------------*/
			
				#mainContent .button-arrLeft,
				#mainContent .button-arrRight {
				position: relative;
				display: block;
				width: 18px;
				height: 18px;
				overflow: hidden;
				line-height: 18px;
				text-align: center;
				background: #da6198;
				color: #fff;
				}
					#mainContent .button-arrLeft .r,
					#mainContent .button-arrRight .r {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					}
					#mainContent .button-arrLeft .r {
					background: url(img/buttons/arr-left.png) no-repeat;
					}
					#mainContent .button-arrRight .r {
					background: url(img/buttons/arr-right.png) no-repeat;
					}

		/* --------------------------
		3.4.5 Navigation
		---------------------------*/
		
			#navigation {
			float: left;
			display: inline;
			width: 235px;
			margin: 0 0 0 9px;
			}

			/* --------------------------
			3.4.5.1 Submenu
			---------------------------*/
			
				#navigation .submenu {
				padding: 0 20px;
				background: url(img/navigation/submenu/bg-top.png) no-repeat #fff;
				}	
					#navigation .submenu .submenu-bottom {
					height: 9px;
					margin: 0 -20px;
					overflow: hidden;
					background: url(img/navigation/submenu/bg-bot.png) no-repeat;
					font-size: 1px;
					line-height: 1px;
					}
							
					#navigation .submenu a:link,
					#navigation .submenu a:visited {
					color: #666;
					text-decoration: none;
					}
					#navigation .submenu a:hover,
					#navigation .submenu a:active {
					color: #000;
					text-decoration: underline;			
					}
					
					#navigation .submenu h4 {
					font-size: 1em;
					font-weight: bolder;
					padding: 1em 0 0.5em;
					}
						#navigation .submenu h4.boys {
						color: #7593a2;
						}
						#navigation .submenu h4.girls {
						color: #be4a83;
						}
					
					#navigation .submenu ul {
					padding: 0 0 0.5em;
					}
						#navigation .submenu li {
						border-bottom: 1px solid #ebf0f1;
						}
							#navigation .submenu li a {
							display: block;
							padding: 0.4em 0 0.4em 15px;
							background: url(img/embellishments/arr-pink.gif) 0 0.9em no-repeat;
							}

		/* --------------------------
		3.4.6 Sidebar
		---------------------------*/
		
			#sidebar {
			float: right;
			display: inline;
			width: 184px;
			}	
				#loginForm,
				#userBox,
				#sizes,
				#recommend {
				margin: 0 0 1.7em;
				padding: 0 0 1em 2px;
				border-bottom: 1px solid #d3dbdc;
				}
					#loginForm h3,
					#userBox h3,
					#sizes h3,
					#recommend h3 {
					margin-left: -2px;
					}

			/* --------------------------
			3.4.6.1 Login
			---------------------------*/
			
				#loginForm,
				#userBox {
				}
					#loginForm a,
					#userBox a {
					padding: 0 0 0 15px;
					background: url(img/embellishments/arr-pink.gif) 0 0.5em no-repeat;
					font-weight: bolder;
					}
					
					#loginForm p {
					height: auto;
					overflow: hidden;
					margin: 0.3em 0;
					}
						#loginForm label {
						float: left;
						display: inline;
						font-weight: bolder;
						padding: 0.7em 0 0;
						}						
						#loginForm #f_l_login,
						#loginForm #f_l_pass {
						float: right;
						display: inline;
						width: 128px;
						background-image: url(img/inputs/bg-141.png);
						padding-top: 11px;
						padding-bottom: 10px;
						}
						
					#loginForm p.button {
					margin: 0.7em 0;
					text-align: center;
					}
					
					#loginForm .register {
					font-size: 0.9em;
					text-align: center;
					}
							
					#userBox ul {
					margin: 0.5em 0 0.7em;
					font-size: 0.9em;
					}
						#userBox ul li {
						margin: 0.2em 0 0;
						}

			/* --------------------------
			3.4.6.2 Sizes
			---------------------------*/
			
				#sizes {
				}
					#sizes p {
					margin: 0 0 0.7em;
					}
					
					#sizes .howto {
					}
						#sizes .howto a {
						position: relative;
						display: block;
						width: 56px;
						height: 66px;
						margin: 0 auto;
						overflow: hidden;
						}
							#sizes .howto a .r {
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							width: 100%;
							height: 100%;
							background: url(img/buttons/jpg.png) no-repeat;
							}
								
			/* --------------------------
			3.2.6.3 Recommend to a friend
			---------------------------*/
			
				#recommend {
				}					
					#recommend p {
					height: auto;
					overflow: hidden;
					margin: 0.7em 0;
					}
						#recommend label {
						float: left;
						display: inline;
						font-weight: bolder;
						padding: 0.7em 0 0;
						}						
						#recommend #f_r_mail {
						float: right;
						display: inline;
						width: 128px;
						background-image: url(img/inputs/bg-141.png);
						padding-top: 11px;
						padding-bottom: 10px;
						}
						
					#recommend p.button {
					text-align: center;
					}
							
							
		/* --------------------------
		3.2.7 Bottom navigation
		---------------------------*/
		
			#bottomNav {
			position: relative;
			top: -2.5em;
			clear: both;
			height: auto;
			overflow: hidden;
			padding: 1em 0 1.5em 285px;
			margin: 0 0 -2.5em;
			background: url(img/content/bg-bot.png) 100% 100% no-repeat;
			font-size: 0.9em;
			}
				#bottomNav ul {
				}
					#bottomNav li {
					float: left;
					display: inline;
					background: url(img/embellishments/pipe-grey.png) 0 50% no-repeat;
					padding: 0 19px 0 21px;
					text-transform: lowercase;
					}
						#bottomNav li.first-item {
						background: none;
						padding-left: 3px;
						}							
							
		/* --------------------------
		3.2.8 Footer
		---------------------------*/
		
			#footer {
			clear: both;
			width: 686px;
			padding: 1.1em 0 4.2em;
			margin: 0 0 0 425px;
			font-size: 1.1em;
			}		
				#footer .copyright {
				float: left;
				display: inline;
				width: 400px;
				color: #000;
				font-size: 1.1em;
				}
					#footer .copyright a {
					font-weight: bolder;
					}
						#footer .copyright a:link,
						#footer .copyright a:visited {
						color: #000;
						text-decoration: none;
						}
						#footer .copyright a:hover,
						#footer .copyright a:active {
						color: #333;
						text-decoration: underline;			
						}
				
				#footer .author {
				float: right;
				display: inline;
				width: 280px;
				margin: 0 6px 0 0;
				text-align: right;
				}
					#footer a {
					font-weight: bolder;
					}

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

	/* --------------------------
	4.1 Items overview
	---------------------------*/
	
		.itemsOverview {
		height: auto;
		overflow: hidden;
		}
			.itemsOverview .item {
			float: right;
			display: inline;
			width: 225px;
			margin: 0 0 7px;
			background: #fff;
			}		
				.itemsOverview .oddItem {
				clear: left;
				float: left;
				}
				
				.itemsOverview li.clear {
				margin-bottom: -1px;
				}
				
				#content .itemsOverview h3 {
				margin: 0.8em 14px 0;
				}
					
				.itemsOverview .item .pic {
				}
					.itemsOverview .item .pic img {
					margin: 4px auto;
					}
					
				.itemsOverview .details {
				width: 217px;
				height: 34px;
				margin: 0 auto 4px;
				background: url(img/maincontent/itemsoverview/details-bg.png) #cfd6d7;
				}
					.itemsOverview .details .price {
					float: left;
					display: inline;
					line-height: 34px;
					margin: 0 0 0 18px;
					color: #fff;
					font-size: 1.1em;
					font-weight: bolder;
					}
						.itemsOverview .details .price .oldPrice {
						color: #666;
						font-size: 0.8em;
						font-weight: normal;
						}
						
					.itemsOverview .details .more {
					float: right;
					display: inline;
					line-height: 34px;
					margin: 0 0 0 18px;	
					padding: 0 11px;	
					background: url(img/maincontent/itemsoverview/details-border.png) 0 0 repeat-y;
					font-size: 0.9em;
					font-weight: bolder;
					}
						.itemsOverview .details .more a {
						padding: 0 0 0 15px;
						background: url(img/embellishments/arr-pink.gif) 0 0.4em no-repeat;
						}

	/* --------------------------
	4.2 Item details
	---------------------------*/
	
		.itemDetails {
		}
			#mainContent .itemDetails .itemDetailsHeader {
			background: #fff;
			padding: 6px 19px;
			}
				#mainContent .itemDetails .itemDetailsHeader h3 {
				float: left;
				display: inline;
				}
				#mainContent .itemDetails .itemDetailsHeader p.categories {
				float: right;
				display: inline;
				margin: 0.6em 0;
				}
				
				#mainContent .itemDetails .itemDetailsHeader .pic {
				clear: both;
				padding: 1em 0 0;
				}
					#mainContent .itemDetails .itemDetailsHeader .pic img {
					margin: 0 auto;
					}
					
			#mainContent .itemDetails .thumbs {
			padding: 0.5em 0;
			text-align: center;
			}
				#mainContent .itemDetails .thumbs li {
				display: inline;
				}
					#mainContent .itemDetails .thumbs img {
					display: inline;
					border: 3px solid #fff;
					}
					
			#mainContent .itemDetails .attributes {
			height: auto;
			overflow: hidden;
			padding: 1em 0;
			}
				#mainContent .itemDetails .attributes li {
				float: left;
				display: inline;
				width: 216px;
				margin: 0 0 0 12px;
				padding: 0.1em 0;
				}
							
			.itemDetails .description {
			padding: 1em 12px;
			border-top: 1px solid #d3dbdc;
			line-height: 1.8em;
			}
				.itemDetails .description p {
				margin: 0 0 0.5em;
				}
							
			.itemDetails .details {
			clear: both;
			width: 451px;
			height: 34px; 
			background: url(img/maincontent/itemdetails/details-bg.png) no-repeat #d3dbdc;
			}
				.itemDetails .details .price {
				float: left;
				display: inline;
				margin: 0 29px 0 19px;
				line-height: 34px;
				}
					.itemDetails .details .price strong {
					color: #92115f;
					font-size: 1.2em;
					}
					
				.itemDetails .details .options {
				float: left;
				display: inline;
				margin: 0 0 0 20px;
				line-height: 34px;
				}
					.itemDetails .details .options select {
					margin: -2px 0 0 5px;
					background: #fff;
					border: 1px solid #ccc;
					font-size: 1em;
					}
					
				.itemDetails .details .buy {
				float: right;
				display: inline;
				padding-left: 2px;
				background: url(img/maincontent/itemdetails/details-border.png) no-repeat;
				}

	/* --------------------------
	4.3 Text block
	---------------------------*/
	
		.textBlock {
		padding: 1.5em 19px 0.5em;
		line-height: 1.7em;
		background: #fff;
		color: #666;
		}
			.textBlock p {
			margin: 0 0 1.6em;
			}

	/* --------------------------
	4.4 Bread crumbs
	---------------------------*/
	
		.breadCrumbs {
		padding: 0 0 1em 11px;
		border-bottom: 1px solid #d3dbdc;
		}
			.breadCrumbs strong,
			.breadCrumbs a {
			padding: 0 3px;
			}

	/* --------------------------
	4.5 Pageing
	---------------------------*/
	
		.pageing {
		height: auto;
		overflow: hidden;
		margin: 1em 0;
		padding: 0 0 0.6em;
		}
			#content .pageing h3 {
			float: left;
			display: inline;
			padding: 0 12px 0 14px;
			margin: 0;
			color: #848484;
			font-size: 1em;
			font-weight: bolder;
			}
			
			.pageing ul {
			float: left;
			display: inline;
			}
				.pageing li {
				float: left;
				display: inline;
				padding: 0 7px;
				background: url(img/embellishments/pipe-darkgrey.png) 0 50% no-repeat;
				}
					.pageing li.first-item {
					background: none;
					}
					
					.pageing li strong {
					color: #cb7075;
					}		
						
					.pageing li.prev,
					.pageing li.next {
					background: none;
					padding: 0;
					margin-top: 0.1em;
					}

	/* --------------------------
	4.6 Order plan
	---------------------------*/
	
		#orderPlan {
		margin: 1.5em 0 0;
		font-size: 1.2em;
		font-weight: bolder;
		}
			#orderPlan li {
			margin: 0 0 4px;
			padding: 0.1em 0 0.1em 13px;
			border-left: 7px solid #d5dfe1;
			}
				#orderPlan li.active {
				border-color: #cb7075;
				color: #000;
				}

	/* --------------------------
	4.7 Order details
	---------------------------*/
	
		.orderDetails {
		height: auto;
		overflow: hidden;
		margin: 1.5em 0 0;
		padding: 0 0 1em 0;
		}
			#mainContent .orderDetails h3 {
			margin: 0 0 1em;
			color: #848484;
			font-size: 1em;
			}
			
			.orderDetails .payment,
			.orderDetails .delivery {
			float: left;
			display: inline;
			margin: 0 0 0 14px;
			}
				.orderDetails .payment {
				width: 206px;
				}
				.orderDetails .delivery {
				width: 216px;
				}
				
				#mainContent .orderDetails p {
				margin: 1em 0 0;
				}
			
				.orderDetails label {
				vertical-align: middle;
				}
				
				.orderDetails input.img {
				margin: 1px 0 0;
				}
			
				.orderDetails ul {
				margin: 0 0 1em;
				}
					.orderDetails li {
					margin: 0 0 0.4em;
					}

	/* --------------------------
	4.8 Customer details
	---------------------------*/
	
		.customerDetails {
		height: auto;
		overflow: hidden;
		padding: 1.6em 15px 0;
		border-top: 1px solid #d3dbdc;
		}
			.customerDetails p {
			height: auto;
			overflow: hidden;
			padding: 0.2em 0;
			}		
				.customerDetails label {
				float: left;
				display: inline;
				width: 85px;
				padding: 11px 0 0;
				font-weight: bolder;
				}
				
				.customerDetails input {
				float: left;
				}
					#f_order_info_building,
					#f_order_info_apartment {
					width: 50px;
					margin: 0 38px 0 0;
					background-image: url(img/inputs/bg-63.png);
					}

	/* --------------------------
	4.9 Buttons
	---------------------------*/
	
		.buttons {
		clear: both;
		height: auto;
		overflow: hidden;
		margin: 1.5em 0;
		padding: 1em 5px;
		border-top: 1px solid #d3dbdc;
		font-size: 0.9em;
		}
			.buttons .left {
			float: left;
			display: inline;
			}
			.buttons .right {
			float: right;
			display: inline;
			}
			
			.buttons .back {
			padding: 2px 0 2px 30px;
			background: url(img/buttons/arr-left.png) 0 50% no-repeat;
			}				
			.buttons .next {
			padding: 2px 30px 2px 0;
			background: url(img/buttons/arr-right.png) 100% 50% no-repeat;
			}
				.buttons .back:link,
				.buttons .back:visited,
				.buttons .next:link,
				.buttons .next:visited {
				color: #768487;
				text-decoration: none;
				}
				.buttons .back:hover,
				.buttons .back:active,
				.buttons .next:hover,
				.buttons .next:active {
				color: #000;
				text-decoration: underline;
				}

	/* --------------------------
	4.10 How to
	---------------------------*/
	
		body.howto {
		background: #d3d7da;
		}
			body.howto #mainContent {
			float: none;
			display: block;
			width: 390px;
			margin: 0 auto;
			padding: 10px 30px;
			}
				body.howto #mainContent h2 {
				width: 100px;
				margin: 0 auto;
				}
				
				body.howto #mainContent h3 {
				margin: 2em 0;
				color: #000;
				font-size: 1.3em;
				text-align: center;
				}
				
				body.howto #mainContent .pic {
				padding: 0 0 1em;
				}
					body.howto #mainContent .pic img {
					margin: 0 auto;
					}
					
				body.howto #mainContent ul {
				font-size: 1.2em;
				}