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

Sanaa
Grupa Pff
http://pff.pl/

Michał Krupa
michal@procommerce.lodz.pl

July 2009


TABLE OF CONTENT:

	1. GLOBAL
		1.1 CSS Reset
		1.2 General styles
	2. BASE
	3. BASIC LAYOUT
		3.1 Headers
		3.2 Buttons
		3.3 Header
			3.3.1 Logo
			3.3.2 Shopping cart
		3.4 Main banner
		3.5 Main navigation
		3.6 Content
			3.6.1 Main content
			3.6.2 Navigation
				3.6.2.1 Submenu
				3.6.2.2 Contact
			3.6.3 Sidebar
				3.6.3.1 Main search
				3.6.3.2 Login form
				3.6.3.3 User box
		3.7 Footer
			3.7.1 Copyright
			3.7.2 Auhor
	4. MAIN CONTENT LAYOUTS
		4.1 Stories overview
		4.2 Items overview
		4.3 Item details
		4.4 Featured items
		4.5 Text block
		4.6 Categories
		4.7 Breadcrumbs
		4.8 Pageing
		4.9 Order plan
		4.10 Order details
		4.11 Customer details
		4.12 Form 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
---------------------------*/

	body {
	padding: 40px 0;
	background: url(img/bg.jpg) 50% 0 #CFCEB6;
	}
	
	#shadow {
	width: 969px;
	margin: 0 auto;
	background: url(img/shadow/bg.png) 0 7px repeat-y #fff;
	}
	#wrapper {
	width: 969px;
	margin: 0 auto;
	padding: 4px 0 0;
	background: url(img/shadow/bg-top.png) no-repeat;
	color: #555;
	}
	
	#shadow-bottom {
	width: 969px;
	height: 7px;
	overflow: hidden;
	margin: 0 auto;
	font-size: 1px;
	line-height: 1px;
	background: url(img/shadow/bg-bot.png) no-repeat;
	}

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

	body {
	}	
		a:link, a:visited {
		color: #B70000;
		text-decoration: underline;
		}
		a:hover, a:active {
		color: #530000;
		text-decoration: underline;
		}
		
		input, textarea, select {
		background: #fff;
		border: 1px solid #e2e2e2;
		color: #b9b9b9;
		font: 1em/1.6 Arial, Helvetica, sans-serif;
		}	
			input, textarea {
			padding: 6px 5px 6px 10px;
			}
				input:focus, textarea:focus {
				color: #555;
				}
				
			input {
			width: 137px;
			line-height: 1.5em;
			}
			select {
			color: #555;
			font-size: 1.2em;
			}
			input.img, select.img {
			padding: 0;
			}

	/* --------------------------
	3.1 Headers
	---------------------------*/
	
		#cart h3,
		#mainContent h2,
		#mainContent div.header,
		#navigation h3,
		#sidebar h3 {
		margin: 1em 0;
		color: #6d553b;
		font: bolder 1.272em Georgia, "Times New Roman", Times, serif;
		}
			#cart h3 a:link,
			#mainContent h2 a:link,
			#navigation h3 a:link,
			#sidebar h3 a:link,
			#cart h3 a:visited,
			#mainContent h2 a:visited,
			#navigation h3 a:visited,
			#sidebar h3 a:visited {
			color: #6d553b;
			text-decoration: none;
			}
			#cart h3 a:hover,
			#mainContent h2 a:hover,
			#navigation h3 a:hover,
			#sidebar h3 a:hover,
			#cart h3 a:active,
			#mainContent h2 a:active,
			#navigation h3 a:active,
			#sidebar h3 a:active {
			color: #530000;
			text-decoration: underline;
			}
			
			#mainContent h2,
			#mainContent div.header {
			clear: both;
			padding: 0 23px;
			}
					
			#mainContent div.header {
			height: auto;
			overflow: hidden;
			font-size: 1em;
			}
				#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.2em 0 0 10px;
				font: 0.91em Tahoma, Arial, Helvetica, sans-serif;
				}
					#mainContent div.header .more a {
					padding: 0 0 0 12px;
					background: url(img/embellishments/point-grey.gif) 0 65% no-repeat;
					text-transform: lowercase;
					}
	
		#mainContent h3 {
		margin: 0.6em 0;
		color: #2e2419;
		font-size: 1.091em;
		font-weight: bolder;
		}
			#mainContent h3 a:link,
			#mainContent h3 a:visited {
			color: #2e2419;
			text-decoration: none;
			}
			#mainContent h3 a:hover,
			#mainContent h3 a:active {
			color: #000;
			text-decoration: underline;
			}

	/* --------------------------
	3.2 Buttons
	---------------------------*/
	
		#wrapper .button {
		display: block;
		height: 25px;
		background: url(img/buttons/bg-brown.png) no-repeat;
		line-height: 22px;
		}
			#wrapper .button:link,
			#wrapper .button:visited {
			background-color: #B09C83;
			background-position: 100% 0;
			color: #fff;
			text-decoration: none;
			}
			#wrapper .button:hover,
			#wrapper .button:active {
			background-color: #84725B;
			background-position: 100% -25px;
			color: #fff;
			text-decoration: underline;
			}
			
			#wrapper .button span {
			display: block;
			height: 25px;
			padding: 0 15px;
			background: url(img/buttons/bg-left-brown.png) repeat-y;
			}

	/* --------------------------
	3.3 Header
	---------------------------*/
	
		#header {
		overflow: hidden;
		margin: 0.5em 31px 1.1em;
		}

		/* --------------------------
		3.3.1 Logo
		---------------------------*/
		
			#logo {
			float: left;
			display: inline;
			width: 254px;
			height: 82px;
			overflow: hidden;
			font-size: 1em;
			font-weight: normal;
			}
				#logo a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				color: #000;
				font: 5em/82px Georgia, "Times New Roman", Times, serif;
				text-decoration: none;
				}
				
				#logo .r {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/logo.png) no-repeat;
				}
								
		/* --------------------------
		3.3.2 Shopping cart
		---------------------------*/
		
			#cart {
			float: right;
			display: inline;
			width: 222px;
			min-height: 74px;
			margin: 1em 0 0;
			padding: 0 0 0 117px;
			background: url(img/header/cart/bg.png) no-repeat;
			color: #888;
			}
				#cart h3 {
				font-size: 1.4em;
				margin-bottom: 0.5em;
				}
					
				#cart ul {
				margin: 0.1em 0 0;
				}
					#cart ul li {
					display: inline;
					padding: 0 12px 0 0;
					}
						#cart ul a {
						padding: 0 0 0 12px;
						background: url(img/embellishments/point-grey.gif) 0 60% no-repeat;
						text-transform: lowercase;
						}
		
	/* --------------------------
	3.4 Main banner
	---------------------------*/
		
		#mainBanner {
		min-height: 204px;
		margin: 0 31px;
		padding: 47px 48px 0 432px;
		background: url(img/mainbanner/bg.jpg) no-repeat #CFCDB5;
		color: #454545;
		}
			#wrapper .mainBanner-short {
			min-height: 111px;
			padding-left: 352px;
			background-image: url(img/mainbanner/bg-short.jpg); 
			}
		
			#mainBanner h3 {
			margin: 0 0 0.6em -32px;
			color: #9e8a73;
			font: 3.6em/0.95em Georgia, "Times New Roman", Times, serif;
			}
				#mainBanner h3 span {
				margin: 0 0 0 69px;
				display: block;
				color: #6d553b;
				font-size: 1.194em;
				}
				
			#mainBanner p {
			margin: 0.5em 0 0;
			}
			
			#mainBanner .more {
			float: right;
			display: inline;
			}
		
	/* --------------------------
	3.5 Main navigation
	---------------------------*/
		
		#mainNav {
		height: auto;
		min-height: 40px;
		overflow: hidden;
		margin: 0 31px 0.8em;
		padding: 17px 0 5px 18px;
		background: url(img/mainnav/bg.jpg) -1px 100% no-repeat #CFCDB5;
		color: #454545;
		}
			#mainNav li {
			float: left;
			display: inline;
			margin: 0 2px 0 3px;
			font: bolder 1.2em/2em Georgia, "Times New Roman", Times, serif;
			}
				#mainNav li a {
				display: block;
				padding: 0 10px;
				}
					#mainNav li a:link,
					#mainNav li a:visited {
					background: none;
					color: #1f1204;
					text-decoration: none;
					}
					#mainNav li a:hover,
					#mainNav li a:active {
					background: #6D553B;
					color: #fff;
					text-decoration: none;
					}
		
	/* --------------------------
	3.6 Content
	---------------------------*/
	
		#content {
		height: auto;
		overflow: hidden;
		margin: 0 31px;
		background: url(img/content/faux-columns.gif) repeat-y;
		}
			#content-wrapper {
			float: left;
			display: inline;
			width: 736px;
			background: url(img/content/wrap-bg.png) 100% 0 no-repeat;
			}
			
		/* --------------------------
		3.6.1 Main content
		---------------------------*/
		
			#mainContent {
			float: right;
			display: inline;
			width: 513px;
			margin: 0 2px 0 0;
			font-size: 1.1em;
			}
				#mainContent h2,
				#mainContent div.header {
				margin: 2em 0 1.5em;
				}
			
		/* --------------------------
		3.6.2 Navigation
		---------------------------*/
		
			#navigation {
			float: left;
			display: inline;
			width: 218px;
			font-size: 1.1em;
			}
				#navigation h3 {
				padding-left: 20px;
				}
		
			/* --------------------------
			3.6.2.1 Submenu
			---------------------------*/
			
				#navigation .submenu {
				font-size: 1.091em;
				}
					#navigation .submenu li {
					}
						#navigation .submenu li.collapsed {
						background: url(img/content/navigation/submenu/collapsed-bg.png) repeat-x #B0AF8E;
						}
						#navigation .submenu li.expanded {
						background: url(img/content/navigation/submenu/expanded-bg.png) repeat-x #B0AF8E;
						}
						
						#navigation .submenu li a {
						display: block;
						padding: 12px 36px 11px 20px;
						font-weight: bolder;
						}
							#navigation .submenu li a:link,
							#navigation .submenu li a:visited {
							color: #2E2419;
							text-decoration: none;
							}
							#navigation .submenu li a:hover,
							#navigation .submenu li a:active {
							color: #000;
							text-decoration: underline;
							}
							
							#navigation .submenu li.collapsed a {
							background: url(img/content/navigation/submenu/collapsed-arrow.png) 184px 50% no-repeat;
							} 
							#navigation .submenu li.expanded a {
							background: url(img/content/navigation/submenu/expanded-arrow.png) 184px 50% no-repeat;
							}
							
						#navigation .submenu ul {
						margin: 0 17px 0 20px;
						padding: 0 0 0.91em;
						}
							#navigation .submenu ul li {
							border-bottom: 1px solid #AAA891;
							}
								#wrapper #navigation .submenu ul li a {
								padding: 2px 8px;
								font-weight: normal;
								background: url(img/embellishments/arr-pink.gif) 169px 55% no-repeat;
								}
									#navigation .submenu ul li a:link,
									#navigation .submenu ul li a:visited {
									color: #555;
									text-decoration: none;
									}
									#navigation .submenu ul li a:hover,
									#navigation .submenu ul li a:active {
									color: #222;
									text-decoration: underline;
									}
		
			/* --------------------------
			3.6.2.2 Contact
			---------------------------*/
			
				#contact {
				line-height: 2em;
				}
					#contact .mail {
					padding-left: 17px;
					background: url(img/icos/mail.gif) 0 50% no-repeat;
					}
					#contact .phone {
					padding-left: 17px;
					background: url(img/icos/phone.gif) 0 50% no-repeat;
					}
					
					#contact .more {
					float: left;
					display: inline;
					margin: 1em 0;
					}
			
		/* --------------------------
		3.6.3 Sidebar
		---------------------------*/
		
			#sidebar {
			float: right;
			display: inline;
			width: 170px;
			padding: 0 0 190px;
			background: url(img/content/sidebar/bg.jpg) 50% 100% no-repeat;
			font-size: 1.1em;
			}
				#sidebar h3 {
				padding-left: 18px;
				}
				
			/* --------------------------
			3.6.3.1 Main search
			---------------------------*/
				
				#mainSearch {
				padding: 8px;
				background: url(img/content/sidebar/mainsearch/bg.png) repeat-x #B0AF8E;
				}					
					#mainSearch p {
					margin: 0 0 0.7em;
					}
						#mainSearch input {
						float: left;
						}
						
						#mainSearch #f_s_query {
						width: 110px;
						background: url(img/content/sidebar/mainsearch/input-bg.png) 130px 50% fixed no-repeat #fff;
						border-right: 0;
						}
					
					#mainSearch .advanced {
					clear: both;
					padding: 1em 7px 0 0;
					font-size: 0.909em;
					text-align: right;
					}
						#mainSearch .advanced a {
						padding: 0 16px 0 0;
						background: url(img/embellishments/arr-pink.gif) 100% 55% no-repeat;
						text-transform: lowercase;
						}
							#mainSearch .advanced a:link,
							#mainSearch .advanced a:visited {
							color: #555;
							text-decoration: underline;
							}
							#mainSearch .advanced a:hover,
							#mainSearch .advanced a:active {
							color: #222;
							text-decoration: underline;
							}
		
			/* --------------------------
			3.6.3.2 Login form
			---------------------------*/
			
				#loginForm {
				padding: 0 0 0 8px;
				}
					#loginForm .inputs {
					float: left;
					display: inline;
					width: 123px;
					}					
						#loginForm .inputs input {
						width: 106px;
						margin: 0 0 3px;
						}
						
					#loginForm .signin {
					float: right;
					display: inline;
					width: 32px;
					margin: 17px 0 0;
					}
						
					#loginForm .signup {
					clear: both;
					padding: 0.7em 0 0;
					font-size: 0.91em;
					}
						#loginForm .signup a {
						padding: 0 0 0 12px;
						background: url(img/embellishments/point-grey.gif) 0 65% no-repeat;
						text-transform: lowercase;
						}
		
			/* --------------------------
			3.6.3.3 User box
			---------------------------*/
			
				#userBox {
				padding: 0 0 0 9px;
				color: #6D553B;
				}
					#userBox p {
					margin: 0 0 0.2em;
					}
					
					#userBox ul {
					font-size: 0.909em;
					}
						#userBox li a {
						padding: 0 0 0 12px;
						background: url(img/embellishments/point-grey.gif) 0 65% no-repeat;
						text-transform: lowercase;
						}
		
	/* --------------------------
	3.7 Footer
	---------------------------*/
	
		#footer {
		clear: both;
		height: auto;
		overflow: hidden;
		margin: 0 31px;
		padding: 1.2em 0 2.5em;
		background: url(img/footer/border-top.gif) repeat-x;
		font-size: 1.1em;
		}
		
		/* --------------------------
		3.7.1 Copyright
		---------------------------*/
			
			#copyright {
			float: left;
			display: inline;
			width: 450px;
			}
				#copyright a:link,
				#copyright a:visited {
				color: #555;
				text-decoration: none;
				}
				#copyright a:hover,
				#copyright a:active {
				color: #222;
				text-decoration: underline;
				}
							
		/* --------------------------
		3.7.2 Auhor
		---------------------------*/
		
			#author {
			float: right;
			display: inline;
			width: 450px;
			text-align: right;
			text-transform: lowercase;
			}
				

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

	/* --------------------------
	4.1 Stories overview
	---------------------------*/
	
		#mainContent .storiesOverview {
		margin: 0 23px 1.5em;
		}
			#mainContent .storiesOverview .story {
			margin: 1.8em 0 0.2em;
			}
				#mainContent .storiesOverview .story .date {
				margin: 0 0 -2em;
				color: #888;
				font-size: 0.91em;
				text-align: right;
				}
				
				#mainContent .storiesOverview .story h3 {
				margin-top: 0;
				padding: 0 10em 0 0;
				}
				
				#mainContent .storiesOverview .story p {
				line-height: 1.8em;
				margin: 1.2em 0;
				}

	/* --------------------------
	4.2 Items overview
	---------------------------*/
	
		#mainContent .itemsOverview {
		height: auto;
		overflow: hidden;
		margin: 0 0 0 23px;
		}
			#mainContent .itemsOverview .item {
			float: left;
			display: inline;
			width: 244px;
			margin: 0.6em 0 0.5em 1px;
			overflow: hidden;
			background: url(img/content/maincontent/itemsoverview/description-bg.png) 100% 0 no-repeat;
			}
				#mainContent .itemsOverview .oddItem {
				clear: left;
				}
				
				#mainContent .itemsOverview .pic {
				float: left;
				display: inline;
				width: 105px;
				height: 131px;
				/*background: url(img/content/maincontent/itemsoverview/pic-bg.png) no-repeat;*/
				text-align: center;
				}
					#mainContent .itemsOverview .pic img {
					display: inline;
					margin: 2px 0 0;
					vertical-align: middle;
					border: 1px solid #D2D1BA;
					}
				
				#mainContent .itemsOverview .description {
				float: right;
				display: inline;
				width: 120px;
				margin: 0 6px 0 0;
				}
					#mainContent .itemsOverview .description h3 {
					margin-top: 0.1em;
					}
					
					#mainContent .itemsOverview .description p {
					margin: 1em 0;
					}
					
					#mainContent .itemsOverview .description .more {
					float: left;
					display: inline;
					margin: 0;
					}
					
						
	/* --------------------------
	4.3 Item details
	---------------------------*/
	
		#mainContent .itemDetails {
		}
			#mainContent .itemDetails .pics {
			margin: 0 23px;
			}
				#mainContent .itemDetails .pic {
				margin: 0 0 0.7em;
				text-align: center;
				}
					#mainContent .itemDetails .pic img {
					display: inline;
					border: 3px solid #CFCEB6;
					}
					
				#mainContent .itemDetails ul {
				margin: 0 0 0.7em;
				text-align: center;
				}
					#mainContent .itemDetails li {
					display: inline;
					padding: 2px;
					}
						#mainContent .itemDetails li img {
						display: inline;
						border: 1px solid #D1D0B9;
						}
						
			#mainContent .itemDetails .description {
			margin: 1em 23px;
			}
			
			#mainContent .itemDetails .details {
			height: auto;
			overflow: hidden;
			margin: 1em 0;
			padding: 1em 23px;
			background: url(img/content/maincontent/itemdetails/details-border-top.gif) repeat-x;
			}
				#mainContent .itemDetails .details .price {
				float: left;
				display: inline;
				width: 330px;
				font-size: 0.91em;
				}
					#mainContent .itemDetails .details .price strong {
					padding: 0 0 0 7px;
					color: #b70000;
					font-size: 1.8em;
					vertical-align: middle;
					}
				
				#mainContent .itemDetails .details .buttons {
				float: right;
				display: inline;
				margin: 2px 0 0;
				}
		
	/* --------------------------
	4.4 Featured items
	---------------------------*/
	
		#mainContent .featuredItems {
		padding: 0 13px 1em;
		background: url(img/content/maincontent/featureditems/border-bottom.gif) 0 100% repeat-x;
		}
			#mainContent .featuredItems .item {
			height: auto;
			overflow: hidden;
			margin: 0 0 1.1em;
			}
				#mainContent .featuredItems .item .pic {
				}
					#mainContent .featuredItems .item-picLeft .pic {
					float: left;
					display: inline;
					width: 250px;
					}
					#mainContent .featuredItems .item-picRight .pic {
					float: right;
					display: inline;
					width: 250px;
					}
					
				#mainContent .featuredItems .item .description {
				}
					#mainContent .featuredItems .item-picLeft .description {
					float: right;
					display: inline;
					width: 216px;
					margin: 0 14px 0 7;
					}
					#mainContent .featuredItems .item-picRight .description {
					float: left;
					display: inline;
					width: 201px;
					margin: 0 7 0 7px;
					}
					
					#mainContent .featuredItems .item .description h2 {
					font-size: 3.273em;
					font-weight: normal;
					margin: 0.3em 0;
					padding: 0;
					}
					
					#mainContent .featuredItems .item .description p {
					margin: 1em 0;
					}
					
					#mainContent .featuredItems .item .description .more {
					margin: 1.3em 0;
					font: bolder 1.364em Georgia, "Times New Roman", Times, serif;
					}
						#mainContent .featuredItems .item-picLeft .description .more {
						text-align: right;
						}
						#mainContent .featuredItems .item-picRight .description .more {
						text-align: left;
						}

	/* --------------------------
	4.5 Text block
	---------------------------*/
	
		#mainContent .textBlock {
		margin: 1em 23px;
		}			
			#mainContent .textBlock p {
			line-height: 1.7em;
			margin: 0 0 1.4em;
			}
			
	/* --------------------------
	4.6 Categories
	---------------------------*/
	
		#mainContent .categories {
		margin: 1em 23px;
		}
			#mainContent .categories h3 {
			margin-bottom: 1.5em;
			color: #6D553B;
			font-size: 1em;
			}
			
			#mainContent .categories p {
			font-weight: bolder;
			}
			
			#mainContent .categories select {
			width: 200px;
			margin: -1px 0 0 5px;
			}
			
	/* --------------------------
	4.7 Breadcrumbs
	---------------------------*/
	
		#mainContent .breadCrumbs {
		margin: 1.2em 23px 1.4em;
		color: #6D553B;
		}

	/* --------------------------
	4.8 Pageing
	---------------------------*/
	
		.pageing {
		height: auto;
		overflow: hidden;
		margin: 0 23px;
		padding: 1em 0 2em;
		}
			#content .pageing h3 {
			float: left;
			display: inline;
			padding: 0 25px 0 0;
			margin: 0;
			color: #6D553B;
			font-size: 1em;
			}
			
			.pageing ul {
			float: left;
			display: inline;
			}
				.pageing li {
				float: left;
				display: inline;
				padding: 0 7px;
				border-left: 1px solid #555;
				}
					.pageing li.first-item,
					.pageing li.prev,
					.pageing li.next {
					border: none;
					}
					
					.pageing li strong {
					color: #555;
					}
					
					.pageing li.prev,
					.pageing li.next {
					margin-top: 2px;
					padding: 0;
					}					
						.pageing li.prev a,
						.pageing li.next a {
						position: relative;
						display: block;
						width: 13px;
						height: 13px;
						overflow: hidden;
						}
							.pageing li.prev a .r,
							.pageing li.next a .r {
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							width: 100%;
							height: 100%;
							overflow: hidden;
							background: 0 0 no-repeat;
							}
							
							.pageing li.prev a .r {
							background-image: url(img/content/maincontent/pageing/previous.png);
							}
							.pageing li.next a .r {
							background-image: url(img/content/maincontent/pageing/next.png);
							}
			
	/* --------------------------
	4.9 Order plan
	---------------------------*/
	
		#mainContent .orderPlan {
		margin: 1.2em 23px 1.4em;
		color: #6D553B;
		}
			#mainContent .orderPlan span {
			padding-left: 25px;
			background: url(img/content/maincontent/order/order-plan-arrow.gif) 6px 50% no-repeat;
			}

	/* --------------------------
	4.10 Order details
	---------------------------*/
	
		.orderDetails {
		height: auto;
		overflow: hidden;
		padding: 0 23px 1.6em;
		background: url(img/content/maincontent/order/border.gif) 0 100% repeat-x;
		}
			.orderDetails .payment,
			.orderDetails .delivery,
			.orderDetails .coupon {
			float: left;
			display: inline;
			}
				.orderDetails .payment {
				width: 155px;
				margin: 0 10px 0 0;
				}
				.orderDetails .delivery {
				width: 120px;
				margin: 0 10px 0 0;
				}				
				.orderDetails .coupon {
				width: 155px;
				}
					
				#mainContent .orderDetails h3 {
				margin: 0 0 0.7em;
				color: #6D553B;
				font-size: 1em;
				}
				
				.orderDetails ul {
				margin: 0 0 1em;
				}
					.orderDetails li {
					margin: 0 0 0.1em;
					}
				
				#mainContent .orderDetails p {
				margin: 0.7em 0 0;
				}
			
				.orderDetails label {
				vertical-align: middle;
				}
				
				.orderDetails input.img {
				margin: 1px 0 0;
				}

	/* --------------------------
	4.11 Customer details
	---------------------------*/
	
		.customerDetails {
		height: auto;
		overflow: hidden;
		padding: 1em 0 1.6em 23px;
		background: url(img/content/maincontent/order/border.gif) 0 100% repeat-x;
		}				
			.customerDetails .personal {
			float: left;
			display: inline;
			width: 220px;
			}
			
			.customerDetails .address {
			float: right;
			display: inline;
			width: 240px;
			}
			
			.customerDetails p {
			height: auto;
			overflow: hidden;
			padding: 0.3em 0;
			}		
				.customerDetails label {
				float: left;
				display: inline;
				padding: 5px 0 0;
				color: #6D553B;
				font-weight: bolder;
				}
					.customerDetails .personal label {
					width: 84px;
					}
					.customerDetails .address label {
					width: 94px;
					}
				
				.customerDetails input {
				float: left;
				display: inline;
				width: 105px;
				}
					
				.customerDetails select {
				margin-top: 5px;
				width: 121px;
				}

	/* --------------------------
	4.12 Form buttons
	---------------------------*/
	
		.formButtons {
		height: auto;
		overflow: hidden;
		padding: 1em 23px;
		}
			.formButtons .left {
			float: left;
			display: inline;
			}
			.formButtons .right {
			float: right;
			display: inline;
			}		
			
/* --------------------------
5. DYNAMIC ACTIONS
---------------------------*/

	/* --------------------------
	5.1 Submenu
	---------------------------*/
		
		body.mooTools #navigation .submenu li.expanded ul {
		display: block;
		}
		body.mooTools #navigation .submenu li.collapsed ul {
		display: none;
		}