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

SKUTERY-MOTOCYKLE.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 Top navigation
			3.1.3 Main navigation
		3.2 Content
			3.2.1 Headers
			3.2.2 Main content
				3.2.2.1 Buttons
				3.2.2.2 Content box
				3.2.2.3 User
				3.2.2.4 Login
				3.2.2.5 Shopping cart
				3.2.2.6 Banner
			3.2.3 Navigation
				3.2.3.1 Main search
				3.2.3.2 Submenu
				3.2.3.3 Newsletter
				3.2.3.4 Payment
			3.2.4 Footer
	4. MAIN CONTENT LAYOUTS
		4.1 Items overview
		4.2 Items list
		4.3 Related items
		4.4 Item details
		4.5 Text block
		4.6 Pageing
		4.7 Sorting criteria
		4.8 Order plan
		4.9 Order details
		4.10 Customer details
		4.11 Buttons

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




/* --------------------------
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: url(img/bg.png) repeat-x #ededed;
	color: #5c5c5c;
	}

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

	body {
	}		
		input, textarea, select, option {
		background: scroll #fff;
		border: 0;
		color: #a4a4a4;
		font: 1em/1.6 Arial, Helvetica, sans-serif;
		}	
			input, textarea {
			padding: 9px 3px 8px 10px;
			}
				input:focus, textarea:focus {
				color: #111;
				}
				
			input {
			width: 141px;
			background-image: url(img/inputs/bg-154-white.png);
			line-height: 1.5em;
			}
			select {
			padding: 0.2em 0;
			border: 1px solid #d3d3d3;
			font-size: 1.0em;
			}
			input.img, select.img {
			padding: 0;
			}

	/* --------------------------
	3.1 Header
	---------------------------*/
	
		#header {
		position: relative;
		width: 925px;
		height: auto;
		overflow: hidden;
		padding: 2.4em 0 0;
		margin: 0 auto;
		}

		/* --------------------------
		3.1.1 Logo
		---------------------------*/
		
			#logo {
			width: 248px;
			height: 85px;
			overflow: hidden;
			margin: 14px 0 0 42px;
			font-size: 1em;
			font-weight: bolder;
			}
				#logo a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				color: #ff7101;
				font-size: 1.7em;
				}
				
				#logo .r {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/logo.png) 0 0 no-repeat;
				}

		/* --------------------------
		3.1.2 Top navigation
		---------------------------*/
		
			#topNav {
			position: absolute;
			top: 0;
			left: 0;
			width: 925px;
			height: 2.4em;
			background: #000;
			}
				#topNav ul {
				height: auto;
				overflow: hidden;
				margin: 0.3em 0 0;
				border: solid #fff;
				border-width: 1px 0;
				}
					#topNav ul li {
					float: left;
					display: inline;
					border-right: 1px solid #fff;
					font-weight: bolder;
					text-transform: uppercase;
					}
						#topNav ul li a {
						display: block;
						width: 128px;
						text-align: center;
						}
							#topNav ul li a:link,
							#topNav ul li a:visited {
							color: #fff;
							text-decoration: none;
							}
							#topNav ul li a:hover,
							#topNav ul li a:active {
							color: #fff;
							text-decoration: underline;
							}

		/* --------------------------
		3.1.3 Main navigation
		---------------------------*/
		
			#mainNav {
			margin: 7px 0 6px;
			background: url(img/header/mainnav/bg-top.png) no-repeat #1e1e1e;
			font-family: Arial, Helvetica, sans-serif;
			}
				#mainNav ul {
				height: auto;
				overflow: hidden;
				padding: 0 0 2px;
				background: url(img/header/mainnav/bg-bot.png) 0 100% no-repeat;
				}
					#mainNav ul li {
					float: left;
					display: inline;
					font-size: 1.2em;
					font-weight: bolder;
					background: url(img/header/mainnav/item-border.png) 0 0 repeat-y;
					}
						#mainNav ul li.first-item {
						background: none;
						}
										
						#mainNav ul a {
						display: block;
						padding: 13px 28px 13px 29px;
						}
							#mainNav ul li.first-item a {
							padding-left: 40px;
							}
							
							#mainNav ul a:link,
							#mainNav ul a:visited {
							color: #fff;
							text-decoration: none;
							}
							#mainNav ul a:hover,
							#mainNav ul a:active {
							color: #fff;
							text-decoration: underline;
							}
										
	/* --------------------------
	3.2 Content
	---------------------------*/
	
		#content {
		width: 925px;
		margin: 0 auto;
		}

		/* --------------------------
		3.2.1 Headers
		---------------------------*/
			
			#mainContent h2,
			#mainContent div.header,
			#navigation h3 {
			clear: both;
			margin: 0 0 0.4em;
			padding: 10px 5px 10px 22px;
			color: #292929;
			background: 0 100% no-repeat #fff;
			border: 1px solid #d8d8d8;
			}
			
			#mainContent h2,
			#mainContent div.header {
			background-image: url(img/headers/bg-669.png);
			}
			#navigation h3 {
			background-image: url(img/headers/bg-233.png);
			}
			
			#mainContent h2,
			#navigation h3,
			#sidebar h3,
			#mainSearch h3 {
			font-family: Arial, Helvetica, sans-serif;
			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: #292929;
				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: #f90;
				text-decoration: underline;
				}
			
			#mainContent div.header {
			height: auto;
			overflow: hidden;
			padding-right: 22px;
			}
				#mainContent div.header h2 {
				float: left;
				display: inline;
				margin: 0;
				padding: 0;
				background: none;
				border: 0;
				}
			
				#mainContent div.header .more {
				float: right;
				display: inline;
				margin: 0.1em 0 0 10px;
				}
					#mainContent div.header .more a {
					padding: 0 0 0 13px;
					background: url(img/embellishments/arr-orange.gif) 0 60% no-repeat;
					}
		
			#mainContent h3 {
			margin: 0.5em 0;
			color: #292929;
			font-size: 1.1em;
			font-weight: bolder;
			}
				#mainContent h3 a:link,
				#mainContent h3 a:visited {
				color: #292929;
				text-decoration: none;
				}
				#mainContent h3 a:hover,
				#mainContent h3 a:active {
				color: #000;
				text-decoration: underline;
				}
			
		/* --------------------------
		3.2.2 Main content
		---------------------------*/
		
			#mainContent {
			float: right;
			display: inline;
			width: 677px;
			}							
				#mainContent .stock-full {
				color: #5cc00b;
				}
				#mainContent .stock-medium {
				color: #f90;
				}
				#mainContent .stock-few {
				color: #c00;
				}
				#mainContent .stock-empty {
				color: #999;
				}
				
				#mainContent .price {
				text-align: right;
				}
					#mainContent .price del {
					float: left;
					display: inline;
					margin: 0 10px 0 0;
					line-height: 30px;
					}
					
					#mainContent .price strong {
					float: left;
					display: inline;
					height: 30px;
					background: url(img/maincontent/price/bg-left.png) no-repeat #e75303;
					color: #fff;
					font-weight: bolder;
					line-height: 30px;
					}
						#mainContent .price strong span {
						display: block;
						height: 100%;
						padding: 0 11px;
						background: url(img/maincontent/price/bg-right.png) 100% 0 no-repeat;
						}
				
				#mainContent a {
				font-weight: bolder;
				}
					#mainContent a:link,
					#mainContent a:visited {
					color: #3d3d3d;
					text-decoration: underline;
					}
					#mainContent a:hover,
					#mainContent a:active {
					color: #420;
					text-decoration: underline;
					}

			/* --------------------------
			3.2.2.1 Buttons
			---------------------------*/
			
				#mainContent .button-arrUp,
				#mainContent .button-arrDown,
				#mainContent .button-arrLeft,
				#mainContent .button-arrRight {
				position: relative;
				display: block;
				width: 19px;
				height: 19px;
				overflow: hidden;
				line-height: 19px;
				text-align: center;
				background: #e75303;
				color: #fff;
				}
					#mainContent .button-arrUp .r,
					#mainContent .button-arrDown .r,
					#mainContent .button-arrLeft .r,
					#mainContent .button-arrRight .r {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					}
					#mainContent .button-arrUp .r {
					background: url(img/buttons/arr-up.png) no-repeat;
					}
					#mainContent .button-arrDown .r {
					background: url(img/buttons/arr-down.png) no-repeat;
					}
					#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.2.2.2 Content box
			---------------------------*/
			
				#mainContent .contentBox {
				margin: 0 0 7px;
				padding: 2px;
				background: #fff;
				border: 1px solid #d8d8d8;
				}

			/* --------------------------
			3.2.2.3 User
			---------------------------*/
			
				#user {
				height: auto;
				overflow: hidden;
				padding: 1px;
				background: #fff;
				border: 1px solid #d8d8d8;
				}

			/* --------------------------
			3.2.2.4 Login
			---------------------------*/
			
				#loginForm,
				#userBox {
				float: left;
				display: inline;
				width: 334px;
				min-height: 103px;
				padding: 0 19px;
				background: url(img/maincontent/login/bg.png) 0 100% repeat-x #fff;
				}
					#loginForm h3,
					#userBox h3 {
					padding: 0.4em 0;
					color: #292929;
					font: bolder 1.18em Arial, Helvetica, sans-serif;
					}
					
					#loginForm a {
					padding: 0 0 0 25px;
					background: url(img/embellishments/arr-orange.gif) 13px 0.5em no-repeat;
					font-weight: bolder;
					}
					
					#userBox a {
					padding: 0 0 0 15px;
					background: url(img/embellishments/arr-orange.gif) 3px 0.5em no-repeat;
					font-weight: bolder;
					}
					
					#loginForm p {
					float: left;
					display: inline;
					margin: 0 8px 0 0;
					}
						#loginForm #f_l_login,
						#loginForm #f_l_pass {
						width: 122px;
						background-image: url(img/inputs/bg-135-grey.png);
						}
					
					#loginForm .register {
					clear: both;
					float: none;
					display: block;
					padding: 1.2em 0;
					font-size: 0.9em;
					text-align: right;
					}
					
					#userBox .hello {
					font-size: 1.1em;
					}
							
					#userBox ul {
					height: auto;
					overflow: hidden;
					margin: 0.7em 0 0;
					font-size: 0.9em;
					}
						#userBox ul li {
						float: left;
						display: inline;
						width: 50%;
						margin: 0.2em 0 0;
						}						
			/* --------------------------
			3.2.2.5 Shopping cart
			---------------------------*/
			
				#cart {
				float: right;
				display: inline;
				width: 237px;
				min-height: 103px;
				padding: 0 29px;
				background: url(img/maincontent/cart/bg.png) no-repeat #9f3800;
				color: #e8e8e8;
				}
					#cart h3 {
					padding: 0.4em 0;
					color: #292929;
					font: bolder 1.18em Arial, Helvetica, sans-serif;
					}
					
					#cart p {
					margin: 0.7em 0;
					}
					
					#cart a {
					padding: 0 0 0 13px;
					background: url(img/embellishments/arr-orange.gif) 0 0.5em no-repeat;
					font-weight: bolder;
					}
						#cart a:link,
						#cart a:visited {
						color: #fff;
						text-decoration: underline;
						}
						#cart a:hover,
						#cart a:active {
						color: #e8e8e8;
						text-decoration: underline;
						}

			/* --------------------------
			3.2.2.6 Banner
			---------------------------*/
			
				#mainBanner {
				clear: both;
				margin: 0 0 7px;
				}

				#mainBanner #bannerPic {
				position: relative;
				}

			#mainBanner #slideshow-images {
			}
				#mainBanner #slideshow-images .active {
				display: block;
				}
				#mainBanner #slideshow-images .disactive {
				display: none;
				}
				
			#mainBanner #slideshow-controls {
			position: absolute;
			bottom: 20px;
			left: 540px;
			font-size: 0.9em;
			}
				#mainBanner #slideshow-controls li {
				float: left;
				display: inline;
				width: 24px;
				height: 25px;
				overflow: hidden;
				margin: 0 4px 0 0;
				line-height: 25px;
				text-align: center;
				cursor: pointer;
				}
					#mainBanner #slideshow-controls li.disactive {
					background: url(img/mainbanner/item-bg.png);
					color: #fff;
					}
					#mainBanner #slideshow-controls li.active {
					background: url(img/mainbanner/item-active-bg.png);
					color: #fff;
					font-weight: bolder;
					}	


		/* --------------------------
		3.2.3 Navigation
		---------------------------*/
		
			#navigation {
			float: left;
			display: inline;
			width: 235px;
			padding: 2px;
			background: #fff;
			border: 1px solid #d8d8d8;
			}


			/* --------------------------
			3.2.3.1 Main search
			---------------------------*/
			
				#mainSearch {
				margin: 0 0 2px;
				padding: 0.4em 0 1em;
				background: url(img/navigation/mainsearch/bg.png) repeat-x #202020;
				}
					#mainSearch h3 {
					background: none;
					border: none;
					color: #fff;
					}
					
					#mainSearch fieldset {
					padding: 0 23px;
					}
						#mainSearch #f_s_query {
						width: 177px;
						margin: 0 0 0.1em;
						background-image: url(img/inputs/bg-190-black.png);
						}
						
						#mainSearch select {
						width: 190px;
						margin: 0.2em 0 0.1em;
						}
						
						#mainSearch fieldset .button {
						text-align: center;
						}
							#mainSearch .button input.img {
							margin: 0.7em 0 0;
							}
							
			/* --------------------------
			3.2.3.2 Submenu
			---------------------------*/
			
				#navigation .submenu {
				font-size: 1.1em;
				}							
					#navigation .submenu a:link,
					#navigation .submenu a:visited {
					color: #5c5c5c;
					text-decoration: none;
					}
					#navigation .submenu a:hover,
					#navigation .submenu a:active {
					color: #ff6d1e;
					text-decoration: underline;			
					}
					
					#navigation .submenu ul {
					padding: 0.7em 12px 1em;
					}
						#navigation .submenu li {
						border-top: 1px solid #eee;
						}
							#navigation .submenu li.first-item {
							border-top: none;
							}
							
							#navigation .submenu li a {
							display: block;
							padding: 0.6em 0 0.6em 26px;
							background: url(img/embellishments/dot-grey.gif) 12px 1.3em no-repeat;
							}
							
			/* --------------------------
			3.2.3.3 Newsletter
			---------------------------*/
			
				#navigation #newsletter {
				padding: 0 0 0.7em;
				}
					#navigation #newsletter p {
					margin: 1em 0;
					padding: 0 23px;
					}
						#navigation #newsletter p.description {
						font-size: 1.1em;
						}	
						
						#navigation #newsletter input.img {
						margin-top: -1px;
						}
							
			/* --------------------------
			3.2.3.4 Payment
			---------------------------*/
			
				#navigation #payment {
				padding: 0.4em 0;
				}				
							
		/* --------------------------
		3.2.4 Footer
		---------------------------*/
		
			#footer {
			clear: both;
			height: auto;
			overflow: hidden;
			padding: 1.1em 0 2em;
			margin: 0 12px 0 260px;
			}
				#footer a {
				font-weight: bolder;
				}
					#footer a:link,
					#footer a:visited {
					color: #5c5c5c;
					text-decoration: none;
					}
					#footer a:hover,
					#footer a:active {
					color: #000;
					text-decoration: underline;			
					}	
					
				#footer .copyright {
				float: left;
				display: inline;
				width: 300px;
				}
				
				#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;
		margin: 1em 0;
		background: url(img/maincontent/itemsoverview/fauxcolumns.png) 50% 0 repeat-y;
		}
			.itemsOverview .item {
			float: right;
			display: inline;
			width: 300px;
			height: auto;
			overflow: hidden;
			margin: 0 15px 6px;
			}		
				.itemsOverview .oddItem {
				clear: left;
				float: left;
				}
				
				.itemsOverview li.clear {
				margin-bottom: -1px;
				}
					
				.itemsOverview .item .pic {
				float: left;
				display: inline;
				margin: 0 20px 1em 0;
				}
				
				#content .itemsOverview h3 {
				margin-top: 0;
				}
				
				#content .itemsOverview .description {
				text-align: justify;
				}
					
				.itemsOverview .details {
				float: right;
				display: inline;
				padding: 0.6em 0 0;
				}
					.itemsOverview .details .price {
					float: right;
					}
						
					.itemsOverview .details .more {
					clear: both;
					padding: 0.4em 0 0;
					text-align: right;
					}
						.itemsOverview .details .more a {
						padding: 0 0 0 12px;
						background: url(img/embellishments/arr-orange.gif) 0 0.4em no-repeat;
						}

	/* --------------------------
	4.2 Items list
	---------------------------*/
	
		.itemsList {
		margin: 0 15px;
		border-top: 1px solid #eee;
		background: url(img/maincontent/itemslist/fauxcolumns.png) 448px 0 repeat-y;
		}
			.itemsListSubsitutes {
			margin-top: -0.5em;
			margin-bottom: 1.5em;
			border-top: 0;
			}
		
			.itemsList .item {
			height: auto;
			overflow: hidden;
			padding: 2em 0 1em 7px;
			border-bottom: 1px solid #eee;
			}
				.itemsList .item .pic {
				float: left;
				display: inline;
				width: 90px;
				margin: 0 7px 0 0;
				text-align: center;
				}
					.itemsList .item .pic img {
					display: inline;
					}	
				
				.itemsList .item .description {
				float: left;
				display: inline;
				width: 336px;
				margin: 0 7px 0 0;
				}
					#content .itemsList .item .description h3 {
					margin-top: 0;
					}
					
					.itemsList .item .description .more {
					margin: 0.7em 0 0;
					}
						.itemsList .item .description .more a {
						padding: 0 0 0 12px;
						background: url(img/embellishments/arr-orange.gif) 0 0.4em no-repeat;
						}
				
				.itemsList .item .details {
				float: left;
				display: inline;
				width: 173px;
				margin: 0 0 0 19px;
				padding: 0.7em 0 0;
				}
					.itemsList .item .details .price {
					float: left;
					display: inline;
					width: 110px;
					margin: 0.7em 0 0;
					}
						.itemsList .item .details .price del {
						font-weight: bolder;
						}
							
					.itemsList .item .details .stock {
					clear: left;
					float: left;
					display: inline;
					margin: 0.6em 0 0;
					}
								
					.itemsList .item .producer {
					float: right;
					display: inline;
					}

	/* --------------------------
	4.3 Related items
	---------------------------*/
	
		.itemsRelated {
		margin: 0 15px;
		}
			.itemsRelated ul {
			font-size: 1.1em;
			}
				.itemsRelated li {
				border-bottom: 1px solid #eee;
				}
					.itemsRelated li a {
					display: block;
					padding: 0.6em 25px;
					background: url(img/maincontent/itemsrelated/tree-controls.gif) no-repeat;
					}
						.itemsRelated li.collapsed a {
						background-position: 8px 53%;
						}
						.itemsRelated li.expanded a {
						background-position: -642px 53%;
						}
						
					.itemsRelated table {
					width: 100%;
					margin: -2.7em 0 0;
					}
						body.mooTools .itemsRelated li.collapsed table {
						display: none;
						}
						body.mooTools .itemsRelated li.expanded table {
						display: table;
						}
					
						.itemsRelated table .cc {
						width: 54px;
						}
						.itemsRelated table .type {
						width: 63px;
						}
						.itemsRelated table .engine {
						width: 66px;
						}
						.itemsRelated table .year {
						width: 27px;
						}
						
						.itemsRelated table thead tr {
						}
							.itemsRelated table thead tr th {
							padding: 0.5em 0;
							}
							
						.itemsRelated table tbody tr {
						}
							.itemsRelated table tbody tr td {
							background: #eee;
							border-top: 2px solid #fff;
							}
								.itemsRelated table tbody tr td a {
								padding: 0.5em 14px;
								background: none;
								}
									#content .itemsRelated table tbody tr td a:link,
									#content .itemsRelated table tbody tr td a:visited {
									text-decoration: none;
									}
									#content .itemsRelated table tbody tr td a:hover,
									#content .itemsRelated table tbody tr td a:active {
									text-decoration: underline;
									}

	/* --------------------------
	4.4 Item details
	---------------------------*/
	
		.itemDetails {
		height: auto;
		overflow: hidden;
		}			
			.itemDetails .description {
			margin: 0 0 0 20px;
			}
				.itemDetails .pics {
				float: left;
				display: inline;
				width: 177px;
				margin: 0 20px 1em 0;
				}
					.itemDetails .pic {
					height: 175px;
					width: 175px;
					border: 1px solid #fff;
					line-height: 175px;
					text-align: center;
					}
						.itemDetails .pic img {
						display: inline;
						}
						
					.itemDetails ul {
					height: auto;
					overflow: hidden;
					padding: 1em 0;
					}
						.itemDetails ul li {
						float: left;
						display: inline;
						margin: 0 1px;
						border: 1px solid #fff;
						}
			
				.itemDetails .details {
				float: right;
				display: inline;
				width: 179px;
				padding: 1em 0 0;
				margin: 0 0 1em 20px;
				}
					#content .itemDetails .details .price {
					height: auto;
					overflow: hidden;
					margin: 1em 0 0.8em;
					}
						#content .itemDetails .details .price span {
						float: left;
						display: inline;
						line-height: 30px;
						}
						
						#content .itemDetails .details .price del {
						font-weight: bolder;
						margin-left: 10px;
						}
						
						#content .itemDetails .details .price strong {
						background-image:url(img/maincontent/price/bg-left-grey.png);
						}
							#content .itemDetails .details .price strong span {
							background-image:url(img/maincontent/price/bg-right-grey.png);
							}
							
					#content .itemDetails .details .quantity {
					margin: 1em 0 1.5em;
					}
						#content .itemDetails .details .quantity #f_i_quantity {
						width: 37px;
						background-image: url(img/inputs/bg-50-grey.png);
						}
					
				#content .itemDetails .description h2 {
				clear: none;
				padding-left: 0;
				background: none;
				border: 0;
				}
				
				#content .itemDetails .description p {
				line-height: 1.8em;
				text-align: justify;
				}
					
	/* --------------------------
	4.5 Text block
	---------------------------*/
	
		.textBlock {
		padding: 0 14px 1em;
		line-height: 1.7em;
		font-size: 1.1em;
		}
			#content .textBlock h3 {
			margin: 1.6em 0;
			font-size: 1em;
			}
			
			.textBlock p {
			margin: 0 0 1.6em;
			text-align: justify;
			}

	/* --------------------------
	4.6 Pageing
	---------------------------*/
	
		.pageing {
		height: auto;
		overflow: hidden;
		margin: 0 15px;
		padding: 1em 7px 1em;
		}
			#content .pageing h3 {
			float: left;
			display: inline;
			padding: 0 10px 0 0;
			margin: 0;
			}
			
			.pageing ul {
			float: left;
			display: inline;
			}
				.pageing li {
				float: left;
				display: inline;
				padding: 0 7px;
				border-left: 1px solid #bdbdbd;
				}
					.pageing li.first-item,
					.pageing li.prev,
					.pageing li.next {
					border: none;
					}
					
					.pageing li strong {
					color: #5c5c5c;
					}
					
					.pageing li.prev,
					.pageing li.next {
					margin-top: -1px;
					}

	/* --------------------------
	4.7 Sorting criteria
	---------------------------*/
	
		.sortCriteria {
		height: auto;
		overflow: hidden;
		margin: 0 15px;
		padding: 1em 7px 1em;
		border-bottom: 1px solid #eee;
		}
			#content .sortCriteria h3 {
			float: left;
			display: inline;
			padding: 0 10px 0 0;
			margin: 0;
			}
			
			.sortCriteria ul {
			float: left;
			display: inline;
			font-size: 1.1em;
			}
				.sortCriteria li {
				float: left;
				display: inline;
				padding: 0 19px 0 0;
				text-transform: lowercase;
				}
					.sortCriteria li span,
					.sortCriteria li a {
					float: left;
					display: inline;
					margin: 0 0 0 3px;
					}
						.sortCriteria li span {
						margin-right: 3px;
						}
						
						.sortCriteria li a.button-arrUp,
						.sortCriteria li a.button-arrDown {
						margin-top: -1px;
						}						
						.sortCriteria li span.r {
						float: none;
						display: block;
						margin: 0;
						}

	/* --------------------------
	4.8 Order plan
	---------------------------*/
	
		#orderPlan {
		height: auto;
		overflow: hidden;
		margin: 3em 0 4em;
		padding: 10px 1px 0;
		background: url(img/maincontent/order/steps/bg.png) repeat-x;
		}
			#orderPlan li {
			float: left;
			display: inline;
			width: 131px;
			padding: 51px 0 0;
			background: 50% 0 no-repeat;
			text-align: center;
			}
				#orderPlan li.active {
				background-position: 50% -81px;
				font-weight: bolder;
				}
				
				#orderPlan #op-step1 {
				background-image: url(img/maincontent/order/steps/step1.gif);
				}
				#orderPlan #op-step2 {
				background-image: url(img/maincontent/order/steps/step2.gif);
				}
				#orderPlan #op-step3 {
				background-image: url(img/maincontent/order/steps/step3.gif);
				}
				#orderPlan #op-step4 {
				background-image: url(img/maincontent/order/steps/step4.gif);
				}
				#orderPlan #op-step5 {
				background-image: url(img/maincontent/order/steps/step5.gif);
				}

	/* --------------------------
	4.9 Order details
	---------------------------*/
	
		.orderDetails {
		height: auto;
		overflow: hidden;
		margin: 1.5em 0 0.5em;
		padding: 0 0 1em 0;
		background: url(img/maincontent/order/orderdetails/fauxcolumns.png) repeat-y;
		}
			
			.orderDetails .payment,
			.orderDetails .delivery,
			.orderDetails .coupon {
			float: left;
			display: inline;
			width: 180px;
			margin: 0 22px;
			}
				.orderDetails .coupon {
				width: 190px;
				margin-right: 0;
				}
					.orderDetails .coupon p {
					font-size: 1.1em;
					}
					.orderDetails .coupon input.img {
					margin: 0;
					}
					
				#mainContent .orderDetails h3 {
				margin: 0 0 0.3em;
				}
				
				.orderDetails ul {
				margin: 0 0 1em;
				font-size: 1.1em;
				}
					.orderDetails li {
					margin: 0 0 0.4em;
					}
				
				#mainContent .orderDetails p {
				margin: 1em 0 0;
				}
					#mainContent .orderDetails p.info {
					margin: 1em 2px 0;
					background: url(img/maincontent/order/orderdetails/info-bg-top.png) no-repeat #f1eae5;
					}
						#mainContent .orderDetails p.info span {
						display: block;
						padding: 0.8em 13px;
						background: url(img/maincontent/order/orderdetails/info-bg-bot.png) 0 100% no-repeat;
						}
			
				.orderDetails label {
				vertical-align: middle;
				}
				
				.orderDetails input.img {
				margin: 1px 0 0;
				}

	/* --------------------------
	4.10 Customer details
	---------------------------*/
	
		.customerDetails {
		height: auto;
		overflow: hidden;
		margin: 0 11px 2em;
		padding: 1.6em 14px 0;
		}
			.customerDetails .customerType {
			padding: 0 0 2em;
			font-size: 1.1em;
			}
				.customerDetails .customerType input.img {
				margin: 1px 3px 0 0;
				}
				
				.customerDetails .customerType label {
				padding: 0 30px 0 0;
				}
				
			.customerDetails .personal,
			.customerDetails .address {
			float: left;
			display: inline;
			width: 270px;
			margin: 0 30px 0 0;
			}
			
			.customerDetails p {
			height: auto;
			overflow: hidden;
			padding: 0.3em 0;
			}		
				.customerDetails .personal label,
				.customerDetails .address label {
				float: left;
				display: inline;
				width: 81px;
				padding: 6px 0 0;
				font-size: 1.1em;
				}
				
				.customerDetails .personal input,
				.customerDetails .address input {
				float: left;
				}
					.customerDetails input#f_order_info_building,
					.customerDetails input#f_order_info_apartment {
					width: 36px;
					background-image: url(img/inputs/bg-49-white.png);
					}
					
				.customerDetails .personal select,
				.customerDetails .address select {
				margin-top: 5px;
				width: 153px;
				}

	/* --------------------------
	4.11 Buttons
	---------------------------*/
	
		.buttons {
		clear: both;
		height: auto;
		overflow: hidden;
		margin: 1em 11px 0;
		padding: 1em 14px;
		border-top: 1px solid #eee;
		text-align: right;
		}
		
		body.mooTools #navigation .submenu li.expanded ul {
		display: block;
		}
		body.mooTools #navigation .submenu li.collapsed ul {
		display: none;
		}