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

AkDruk
Grupa Pff
http://pff.pl/

Grzegorz Jaworek
grzegorz.jaworek@gmail.com

September 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.2.1 Main navigation
				3.1.2.2 Main search
		3.2 Content
			3.2.1 Headers
			3.2.2 Main content
				3.2.2.1 Boxes
				3.2.2.2 Buttons
			3.2.3 Navigation
				3.2.3.1 Boxes
				3.2.3.3 Submenu
			3.2.4 Sidebar
				3.2.4.1 Boxes
				3.2.4.2 Login form
				3.2.4.3 User box
				3.2.4.4 Shopping cart
			3.2.5 Footer
				3.2.5.1 Footer navigation
	4. MAIN CONTENT LAYOUTS
		4.1 Items overview
		4.2 Items list
		4.3 Item details
		4.4 Text block
		4.5 Bread crumbs
		4.6 Pageing
		4.7 Sorting criteria
		4.8 Order plan
		4.9 Order details
		4.10 Customer details
		4.11 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, 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 {
	background: #EFEBEA url(img/bg.jpg) 50% 0 no-repeat;
	color: #5D5752;
	}

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

	body {
	}	
		a:link, a:visited {
		color: #503D6A;
		text-decoration: underline;
		}
		a:hover, a:active {
		color: #503D6A;
		text-decoration: underline;
		}
		
		input, textarea, select {
		background: #fff;
		border: 1px solid #DBDADA;
		color: #2E1C47;
		font: 1em/1.6 Tahoma, Arial, Helvetica, sans-serif;
		}	
			input, textarea {
			padding: 5px 7px;
			}
				input:focus, textarea:focus {
				color: #666;
				}
				
			input {
			width: 104px;
			line-height: 1.5em;
			}
			select {
			color: #555;
			font-size: 1.2em;
			}
			input.img, select.img {
			padding: 0;
			}

	/* --------------------------
	3.1 Header
	---------------------------*/
	
		#header {
		width: 980px;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		}

		/* --------------------------
		3.1.1 Logo
		---------------------------*/
		
			#logo {
			width: 210px;
			height: 54px;
			margin: 20px 0 0 35px;
			overflow: hidden;
			font-size: 1em;
			font-weight: normal;
			}
				#logo a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				color: #56308C;
				text-indent: -1000px;
				font: 2em/20px Tahoma, Arial, Helvetica, sans-serif;
				text-align: center;
				text-decoration: none;
				background: url(img/logo.png) no-repeat;
				}

		/* --------------------------
		3.1.2 Top navigation
		---------------------------*/
		
			#topNav {
			clear: both;
			float: left;
			width: 980px;
			padding-bottom: 3px;
			margin-top: 20px;
			background: url(img/bg.gif) 50% 100% no-repeat;
			}
		
			/* --------------------------
			3.1.2.1 Main navigation
			---------------------------*/
				
				#mainNav {
				float: left;
				width: 918px;
				padding: 1em 30px;
				font-size: 1.2em;
				line-height: 2.2em;
				background: #FFF;
				border-color: #D7CEC5;
				border-style: solid;
				border-width: 1px 1px 0;
				}
					#mainNav li {
					float: left;
					padding: 0 17px;
					border-left: 1px solid #D0ADD2;
					}
						#mainNav li.first-item {
						padding-left: 0;
						border: 0;
						}
					
						#mainNav li a {
						font-weight: bold;
						float: left;
						}
							#mainNav li a:link,
							#mainNav li a:visited {
							color: #503D6A;
							text-decoration: none;
							}
							#mainNav li a:hover,
							#mainNav li a:active {
							color: #8E75B0;
							text-decoration: underline;
							}
							
							#mainNav li.active a {
							color: #8E75B0;
							font-weight: bolder;
							}
				
			/* --------------------------
			3.1.2.2 Main search
			---------------------------*/
				#mainSearch {
				float: left;
				clear: left;
				display: inline;
				background: #D3B6D8;
				position: relative;
				left: -5px;
				padding: 10px;
				width: 180px;
				}							
					#f_s_query {
					width: 105px; 
					margin-right: 15px;
					}
		
	/* --------------------------
	3.2 Content
	---------------------------*/
	
		#content {
		width: 966px;
		margin: 1em auto 0;
		font-size: 1.1em;
		background: #FFF;
		border-color: #D7CEC5;
		border-style: solid;
		border-width: 1px 1px 0;
		padding: 6px 6px 0;
		}
			#content-wrapper {
			float: left;
			display: inline;
			width: 763px;
			padding: 0 0 2em;
			}
				.wideContent #content-wrapper {
				float: right;
				display: block;
				width: 100%;
				}

		/* --------------------------
		3.2.1 Headers
		---------------------------*/
		
			#mainContent h2,
			#navigation h3,
			#sidebar h3 {
			color: #130427;
			font-size: 1.3em;
			font-weight: bold;
			margin: 0 0 0.5em;
			margin: 0 0 0.5em;
			height: 38px;
			padding: 0 20px;
			background: url(img/h3.gif) 0 0 repeat-x;
			line-height: 35px;
			}
			
			a.see-more {
			font-size: 0.9em;
			float: right;
			margin: -35px 10px 0;
			color: #E7A4F5;
			}
				a.see-more:link,
				a.see-more:visited {
				color: #E7A4F5;
				text-decoration: none;
				}
				a.see-more:hover,
				a.see-more:active {
				color: #E7A4F5;
				text-decoration: underline;
				}
			
			#mainContent h3 {
			color: #56308C;
			font-weight: bold;
			}
				#mainContent .itemsList h3,
				#mainContent .itemDetails h3,
				#mainContent .textBlock h3 {
				font-size: 2em;
				}
				#mainContent .itemsList .item h3 {
				font-size: 1.091em;
				}
				#mainContent .orderDetails h3, 
				#mainContent .customerDetails h3 {
				color: #56308C;
				font-size: 1.4em;
				}
				#mainContent .orderDetails h4 {
				color: #56308C;
				font-weight: bold;
				font-size: 1.1em;
				}
				#mainContent .pageing h3,
				#mainContent .sortCriteria h3 {
				color: #56308C;
				}
				
				#mainContent h3 a:link,
				#mainContent h3 a:visited {
				color: #56308C;
				text-decoration: none;
				}
				#mainContent h3 a:hover,
				#mainContent h3 a:active {
				color: #56308C;
				text-decoration: underline;
				}
			
		/* --------------------------
		3.2.2 Main content
		---------------------------*/
		
			#mainContent {
			float: right;
			display: inline;
			width: 560px;
			}
				.wideContent #mainContent {
				width: 750px;
				}
				
			/* --------------------------
			3.2.2.1 Boxes
			---------------------------*/
			
				#mainContent .box {
				clear: both;
				padding-bottom: 1em;
				}
					#mainContent .box .box-in {
					padding: 0 0 1em;
					}
						.wideContent #mainContent .box .box-in {
						}
					#mainContent .box .order-form {
					padding: 0 0 1em;
					width: 650px; 
					margin: 0 auto;
					}
						
			/* --------------------------
			3.2.2.2 Buttons
			---------------------------*/
			
				#mainContent .button-arrUp,
				#mainContent .button-arrDown,
				#mainContent .button-arrLeft,
				#mainContent .button-arrRight {
				position: relative;
				display: block;
				overflow: hidden;
				text-align: center;
				}
					#mainContent .button-arrUp,
					#mainContent .button-arrDown {
					width: 16px;
					height: 16px;
					line-height: 16px;
					}
					#mainContent .button-arrLeft,
					#mainContent .button-arrRight {
					width: 16px;
					height: 16px;
					line-height: 16px;
					}
					
					#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%;
					background: url(img/buttons/arrows.gif) no-repeat;
					}
					#mainContent .button-arrUp .r {
					background-position: 0 0;
					}
					#mainContent .button-arrDown .r {
					background-position: 100% 0;
					}
					#mainContent .button-arrLeft .r {
					background-position: 0 100%;
					}	
					#mainContent .button-arrRight .r {
					background-position: 100% 100%;
					}
					
					
		/* --------------------------
		3.2.3 Navigation
		---------------------------*/
		
			#navigation {
			float: left;
			display: inline;
			width: 190px;
			}
				
			/* --------------------------
			3.2.3.1 Boxes
			---------------------------*/
			
				#navigation .box {
				clear: both;
				margin-bottom: 0.8em;
				}
		
			/* --------------------------
			3.2.3.3 Submenu
			---------------------------*/
					
				#submenu {
				}					
					#submenu ul {
					}
						#submenu li {
						background: url(img/navigation/bg.jpg) 0 0 no-repeat;
						}
							#submenu li a {
							display: block;
							padding: 8px 5px 7px 32px;
							background: url(img/embellishments/arr.gif) 15px 0 no-repeat;
							font-size: 1.3em;
							line-height: 22px;
							height: 22px;
							font-weight: bold;
							color: #381E5A;
							}
								#submenu li a:link,
								#submenu li a:visited {
								color: #381E5A;
								text-decoration: none;
								}
								#submenu li:hover a,
								#submenu li a:hover,
								#submenu li a:active {
								color: #381E5A;
								text-decoration: none;
								background-position: 15px -37px;
								}
								
						#submenu li ul {
						display: none;
						margin: 0 2px 0 15px;
						padding: 0 15px 2px;
						background: #F1F1F1;
						}
							#submenu li.expanded ul {
							display: block;
							}
							#submenu li.collapsed ul {
							display: none;
							}
							#submenu ul li li {
							background: url(img/embellishments/border-dash-horizontal.gif) 0 0 repeat-x;
							}
							#submenu li ul li.first-item {
							background-image: none;
							}
								#submenu li ul li a {
								display: block;
								padding: 5px 5px 3px 16px;
								height: auto;
								background-position: 5px -81px;
								font-size: 1.1em;
								line-height: 22px;
								font-weight: bold;
								color: #503D6A;
								}
									#submenu li ul li a:link,
									#submenu li ul li a:visited {
									color: #503D6A;
									text-decoration: none;
									background-position: 5px -81px;
									}
									#submenu li ul li:hover a,
									#submenu li ul li a:hover,
									#submenu li ul li a:active {
									color: #503D6A;
									text-decoration: underline;
									background-position: 5px -81px;
									}
	
		/* --------------------------
		3.2.4 Sidebar
		---------------------------*/
		
			#sidebar {
			float: right;
			display: inline;
			width: 189px;
			padding: 0 0 2em;
			}
				
			/* --------------------------
			3.2.4.1 Boxes
			---------------------------*/
			
				#sidebar .box {
				clear: both;
				margin-bottom: 0.8em;
				color: #503D6A;
				}					
					#sidebar .box .box-in {
					padding: 0 15px 1em;
					}
					
					#sidebar .box p {
					margin: 0 0 0.3em;
					font-size: 0.95em;
					}
					
					#sidebar .box ul {
					font-size: 0.909em;
					padding: 0 0 0 10px;
					font-size: 1em;
					}
									
					#sidebar .box ol {
					font-size: 0.909em;
					list-style: decimal inside;
					font-size: 1em;
					}
						#sidebar .box li a {
						font-weight: normal;
						color: #2E1C47;
						}
							#sidebar .box a:link,
							#sidebar .box a:visited {
							color: #2E1C47;
							text-decoration: none;
							}
							#sidebar .box a:hover,
							#sidebar .box a:active {
							color: #2E1C47;
							text-decoration: underline;
							}
						#sidebar .box-in ul li {
						margin: 0.2em 0;
						}
							#sidebar .box-in ul li a {
							padding: 0 0 0 15px;
							background: url(img/embellishments/arr.gif) 0 -90px no-repeat;
							color: #503D6A;
							}
								#sidebar .box-in ul li a:link,
								#sidebar .box-in ul li a:visited {
								color: #503D6A;
								text-decoration: underline;
								}
								#sidebar .box-in ul li a:hover,
								#sidebar .box-in ul li a:active {
								color: #503D6A;
								text-decoration: none;
								}
		
			/* --------------------------
			3.2.4.2 Login form
			---------------------------*/
			
				#loginForm {
				}
					#loginForm .inputs {
					float: left;
					display: inline;
					width: 126px;
					}					
						#loginForm .inputs input {
						width: 99px;
						margin: 0 0 3px;
						}
						
					#loginForm .signin {
					float: right;
					display: inline;
					width: 28px;
					}				
						#loginForm .signin  input {
							margin: 10px 0 0;
						}
						
					#loginForm .signup,
					#loginForm .forget {
					clear: both;
					padding: 0;
					}
						#loginForm a {
						padding: 2px 10px;
						background: url(img/embellishments/arr.gif) 0 -88px no-repeat;
						font-size: 0.909em;
						font-weight: normal;
						color: #503D6A;
						}
						#loginForm .signup a {
						font-weight: bolder;
						}
							#loginForm a:link,
							#loginForm a:visited {
							color: #503D6A;
							text-decoration: none;
							}
							#loginForm a:hover,
							#loginForm a:active {
							color: #503D6A;
							text-decoration: underline;
							}
		
			/* --------------------------
			3.2.4.3 User box
			---------------------------*/
			
				#userBox {
				margin: 0 0 2px;
				}
			
								
			/* --------------------------
			3.2.4.4 Shopping cart
			---------------------------*/
			
				#cart {
				color: #503D6A;
				margin: 0 0 2px;
				background: url(img/content/sidebar/cart.gif) 100% 100% no-repeat;
				}	
					#cart-in {
					padding: 0 14px 0.5em;
					font-size: 1.22em;
					min-height: 80px;
					}
						
						#cart ul {
						margin: 0.5em 0 0;
						font-size: 0.909em;
						}
							#cart li {
							margin: 0.7em 0;
							}
								#cart li a {
								padding: 0 0 0 15px;
								background: url(img/embellishments/arr.gif) 0 -132px no-repeat;
								color: #503D6A;
								font-weight: bolder;
								}
									#cart a:link,
									#cart a:visited {
									color: #503D6A;
									text-decoration: underline;
									}
									#cart a:hover,
									#cart a:active {
									color: #503D6A;
									text-decoration: none;
									}
									
			/* --------------------------
			3.2.4.4 Contact
			---------------------------*/
			
				#userContact {
				color: #503D6A;
				margin: 0 0 8px; 
				position: relative;
				background: url(img/content/sidebar/contact.gif) 100% 100% no-repeat;
				height: 150px;
				overflow: hidden;
				}	
					#sidebar #userContact .box-in {
					position: absolute;
					right: 2px; 
					bottom: 1px;
					width: 90%;
					padding: 6px 5% 2px;
					background: url(img/content/sidebar/trans.png) 0 0 repeat;	
					}	
						#userContact .box-in p {
						font-size: 0.94em;
						font-weight: bolder;
						color: #56308C;
						margin: 0;
						padding: 0;
						}	
						#userContact .box-in strong {
						font-size: 1.2em;
						display: block;
						padding: 0 10px;
						color: #2E1C47;
						}	
						#userContact .box-in a {
						font-size: 1.2em;
						display: block;
						padding: 0 10px;
						color: #2E1C47;
						}						

		
		/* --------------------------
		3.2.5 Footer
		---------------------------*/
		
			#footer {
			clear: both;
			margin: 0 -7px;
			color: #2E1C47;
			padding: 0.7em 1em 2em;
			font-size: 1em;
			background: #EFEBEA url(img/bg.gif) 50% 0 no-repeat;
			}
				#footer a {
				font-weight: bolder;
				}
					#footer a:link,
					#footer a:visited {
					color: #2E1C47;
					text-decoration: none;
					}
					#footer a:hover,
					#footer a:active {
					color: #2E1C47;
					text-decoration: underline;
					}
				
				#footer p {
				margin: 0.3em 0;
				}
					#footer p.studio {
					font-size: 1em;
					text-transform: lowercase;
					}
					
			/* --------------------------
			3.2.5.1 Footer navigation
			---------------------------*/
				
				#footNav {
				float: right;
				padding: 0.7em 0;
				font-size: 0.97em;
				line-height: 1em;
				}
					#footNav li {
					float: left;
					padding: 0 5px;
					border-left: 1px solid #2E1C47;
					}
						#footNav li.first-item {
						padding-left: 0;
						border: 0;
						}
					
						#footNav li a {
						float: left;
						font-weight: normal;
						}
							#footNav li a:link,
							#footNav li a:visited {
							color: #2E1C47;
							text-decoration: none;
							}
							#footNav li a:hover,
							#footNav li a:active {
							color: #2E1C47;
							text-decoration: underline;
							}
							
							#footNav li.active a {
							color: #2E1C47;
							}

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

	/* --------------------------
	4.1 Items overview
	---------------------------*/

		#mainContent .itemsOverview {
		height: auto;
		overflow: hidden;
		}
			#mainContent .itemsOverview .item {
			height: auto;
			overflow: hidden;
			margin: 1em 5px 0;
			width: 154px;
			height: 228px;
			display: inline;
			float: left;
			padding: 1em 10px;
			border: 1px solid #EEEAE6;
			text-align: center;
			overflow: hidden;
			}			
				#mainContent .itemsOverview .pic {
				margin: 0 auto;
				height: 147px;
				}
					#mainContent .itemsOverview .pic img {
					margin: 0 auto;
					}
				
				#mainContent .itemsOverview .description {
				margin: 1em 0 0;
				width: 154px;
				line-height: 1.1em;
				}
					#mainContent .itemsOverview .description h3 {
					margin: 0 0 0.3em;
					color: #5D5752;
					font-size: 1.2em;
					font-weight: normal;
					}
						#mainContent .itemsOverview .description h3 a {
						color: #5D5752;
						}
					
					#mainContent .itemsOverview .description .types {
					margin: 1em 0 0.6em;
					color: #5D5752;
					}
					
					#mainContent .itemsOverview .description .details {
					clear: both;
					height: auto;
					overflow: hidden;
					padding: 1em 0 0;
					}
						#mainContent .itemsOverview .description .details .price {
						float: left;
						display: inline;
						margin: 0.16em 0 0;
						color: #56308C;
						}
							#mainContent .itemsOverview .description .details .price del {
							color: #d5d5d5;
							font-size: 1.273em;
							text-decoration: line-through;
							}
							#mainContent .itemsOverview .description .details .price strong {
							color: #56308C;
							font-size: 1.6em;
							}
						
						#mainContent .itemsOverview .description .details .buttons {
						float: right;
						display: inline;
						text-align: right;
						line-height: 1.6em;
						}
						
							#mainContent .itemsOverview .description .details .buttons li {
							float: right;
							display: inline;
							margin: 0;
							font-size: 0.8em;
							}
								#mainContent .itemsOverview .description .details .buttons li a {
								padding: 0;
								color: #56308C;
								}

	/* --------------------------
	4.2 Items list
	---------------------------*/
	
		#mainContent .itemsList {
		height: auto;
		overflow: hidden;
		}
			#mainContent .itemsList .item {
			height: auto;
			overflow: hidden;
			margin: 1em 5px 0;
			width: 154px;
			height: 228px;
			display: inline;
			float: left;
			padding: 1em 10px;
			border: 1px solid #EEEAE6;
			text-align: center;
			overflow: hidden;
			}			
				#mainContent .itemsList .pic {
				margin: 0 auto;
				height: 147px;
				}
					#mainContent .itemsList .pic img {
					margin: 0 auto;
					}
				
				#mainContent .itemsList .description {
				margin: 1em 0 0;
				width: 154px;
				line-height: 1.1em;
				}
					#mainContent .itemsList .description h3 {
					margin: 0 0 0.3em;
					color: #5D5752;
					font-size: 1.2em;
					font-weight: normal;
					}
						#mainContent .itemsList .description h3 a {
						color: #5D5752;
						}
					
					#mainContent .itemsList .description .types {
					margin: 1em 0 0.6em;
					color: #5D5752;
					}
					
					#mainContent .itemsList .description .details {
					clear: both;
					height: auto;
					overflow: hidden;
					padding: 1em 0 0;
					}
						#mainContent .itemsList .description .details .price {
						float: left;
						display: inline;
						margin: 0.16em 0 0;
						color: #56308C;
						}
							#mainContent .itemsList .description .details .price del {
							color: #d5d5d5;
							font-size: 1.273em;
							text-decoration: line-through;
							}
							#mainContent .itemsList .description .details .price strong {
							color: #56308C;
							font-size: 1.6em;
							}
						
						#mainContent .itemsList .description .details .buttons {
						float: right;
						display: inline;
						text-align: right;
						line-height: 1.6em;
						}
						
							#mainContent .itemsList .description .details .buttons li {
							float: right;
							display: inline;
							margin: 0;
							font-size: 0.8em;
							}
								#mainContent .itemsList .description .details .buttons li a {
								padding: 0;
								color: #56308C;
								}
						
	/* --------------------------
	4.3 Item details
	---------------------------*/
	
		#mainContent .itemDetails {
		float: left; 
		width: 100%; 
		clear: both;
		background: url(img/embellishments/border-dash-vertical.gif) 178px 0 repeat-y;
		}			
			#mainContent .itemDetails h3 {
			margin: 0 0 0.3em;
			}
				
			#mainContent .itemDetails .info {
			float: left;
			display: inline;
			width: 165px;
			text-align: center;	
			}
				#mainContent .itemDetails .info .pageing {
				clear: both;
				height: auto;
				overflow: hidden;
				margin: 0 auto;
				padding: 0 5em;
				color: #56308C;
				}
					#mainContent .itemDetails .info .pageing ul {
					width: 100%;
					}
						#mainContent .itemDetails .info .pageing li.prev {
						float: left;
						}		
						#mainContent .itemDetails .info .pageing li.next {
						float: right;
						}	
							#mainContent .itemDetails .info .pageing li.prev a{
							float: left;
							padding: 0;
							}
							#mainContent .itemDetails .info .pageing li.next a {
							float: right;
							padding: 0;
							}
				#mainContent .itemDetails .info a.pic {
				display: block;
				padding: 0 0 0.5em;
				}
					#mainContent .itemDetails .info a.pic img {
					margin: 0 auto;
					}
						
			#mainContent .itemDetails .description {
			float: right;
			display: inline;
			width: 370px;
			padding: 0 0 1em;
			line-height: 1.8em;
			}
				#mainContent .itemDetails .description h3 {
				margin: 0 0 0.3em;
				color: #56308C;
				font-size: 1.3em;
				}		
				
			#mainContent .itemDetails .attributes {
				margin: 0 0 0.5em;
			}
				#mainContent .itemDetails .attributes li {
				background: url(img/embellishments/border-dash-horizontal.gif) 0 100% repeat-x;
				padding: 2px 0;
				}
				
			#mainContent .box-bot {
			clear: both;
			height: 1px;
			margin: -1px 0 0;
			float: left; 
			width: 100%;
			font-size: 0;
			line-height: 0;
			background: url(img/embellishments/border-dash-horizontal.gif) 0 100% repeat-x;
			}
							
			#mainContent .itemDetails .actions {
			margin: 1.5em 0 0;
			float: left; 
			width: 100%;
			padding: 0;
			text-align: left;
			}
				#mainContent .itemDetails .actions li {
				padding: 0.7em 10px;
				float: left;
				width: 145px;
				clear: both;
				background: url(img/embellishments/border-dash-horizontal.gif) 0 0 repeat-x;
				}
					#mainContent .itemDetails .actions li.price {
					color: #000;
					font-size: 1.2em;
					font-weight: bolder;
					}
						#mainContent .itemDetails .actions li.price span {
						color: #56308C;
						}
					#mainContent .itemDetails .actions li.quantity {
					}
						#mainContent .itemDetails .actions li.quantity select {
						width: 130px;
						margin: 0.3em 0.6em;
						}
					#mainContent .itemDetails .actions li.toCart {
					padding: 1px 0 0;
					width: 165px;
					}
						#mainContent .itemDetails .actions li.toCart a.toCart {
						padding: 8px 8px 8px 30px;
						text-align: center;
						display: block;
						text-decoration: none;
						color: #56308C;
						font-size: 1.2em;
						font-weight: bold;
						background: #EEEAF3 url(img/buttons/actions.gif) 14px 8px no-repeat;
						}
							#mainContent .itemDetails .actions li.toCart a.toCart:link,
							#mainContent .itemDetails .actions li.toCart a.toCart:visited {
							text-decoration: none;
							background-color: #EEEAF3;
							}
							#mainContent .itemDetails .actions li.toCart a.toCart:hover,
							#mainContent .itemDetails .actions li.toCart a.toCart:active {
							text-decoration: none;
							background-color: #C08CA5;
							}
					#mainContent .itemDetails .actions li.prices {
					color: #130427;
					padding: 0.7em 5px;
					width: 155px;
					}
						#mainContent .itemDetails .actions li.prices span {
						display:block;
						}
						#mainContent .itemDetails .actions li.prices span.title {
						padding: 0 0 1em;
						}
					#mainContent .itemDetails .actions li.print,
					#mainContent .itemDetails .actions li.compare	{
					padding: 1px 0 0;
					width: 165px;
					}
						#mainContent .itemDetails .actions li.print a.print,
						#mainContent .itemDetails .actions li.compare a.compare {
						padding: 8px 8px 8px 30px;
						text-align: center;
						display: block;
						text-decoration: none;
						color: #130427;
						font-size: 1.2em;
						font-weight: bold;
						}
						#mainContent .itemDetails .actions li.print a.print {
						background: #FFF url(img/buttons/actions.gif) 14px -192px no-repeat;
						}
						#mainContent .itemDetails .actions li.compare a.compare {
						background: #FFF url(img/buttons/actions.gif) 14px -92px no-repeat;
						}
							#mainContent .itemDetails .actions li.print a:link,
							#mainContent .itemDetails .actions li.print a:visited,
							#mainContent .itemDetails .actions li.compare a:link,
							#mainContent .itemDetails .actions li.compare a:visited {
							text-decoration: none;
							}
							#mainContent .itemDetails .actions li.print a:hover,
							#mainContent .itemDetails .actions li.print a:active,
							#mainContent .itemDetails .actions li.compare a:hover,
							#mainContent .itemDetails .actions li.compare a:active {
							text-decoration: underline;
							}
							#mainContent .itemDetails .actions li.print a.print:hover,
							#mainContent .itemDetails .actions li.print a.print:active,
							#mainContent .itemDetails .actions li.compare a.compare:hover,
							#mainContent .itemDetails .actions li.compare a.compare:active {
							background-color: #C08CA5;
							text-decoration: none;
							}
						#mainContent .itemDetails .actions li.compare span {
						display:block;
						float: left; 
						padding: 0.4em;
						}
						#mainContent .itemDetails .actions li.compare .items {
						clear: both;
						padding: 0.4em;
						}
						#mainContent .itemDetails .actions li.compare .items li {
						padding: 0; 
						margin: 0; 
						width: 33%; 
						background: none; 
						text-align: center; 
						float: left; 
						clear: none;
						}
				

	/* --------------------------
	4.4 Text block
	---------------------------*/
	
		#mainContent .textBlock {
		}
			#mainContent .textBlock h3 {
			padding: 0 1em;
			color: #56308C;
			text-decoration: underline;
			font-size: 1.3em;
			}
			
			#mainContent .textBlock p {
			padding: 1em 1em 0.2em;
			}

	/* --------------------------
	4.5 Bread crumbs
	---------------------------*/
	
		#mainContent .breadCrumbs {
		margin: 0.6em  2em 1em;
		text-align: left;
		}
			#mainContent .breadCrumbs a {
			padding: 0 5px 0 7px;
			background: url(img/embellishments/crumb.gif) 0 50% no-repeat;
			font-size: 10px;
			color: #000;
			}
				#mainContent .breadCrumbs a:link,
				#mainContent .breadCrumbs a:visited {
				color: #000;
				text-decoration: none;
				}
				#mainContent .breadCrumbs a:hover,
				#mainContent .breadCrumbs a:active {
				color: #000;
				text-decoration: underline;
				}
			#mainContent .breadCrumbs a.home {
			background: none;
			padding-left: 0;
			font-weight: bold;
			text-transform: uppercase;
			color: #56308C;
			}
				#mainContent .breadCrumbs a.home:link,
				#mainContent .breadCrumbs a.home:visited {
				color: #56308C;
				text-decoration: none;
				}
				#mainContent .breadCrumbs a.home:hover,
				#mainContent .breadCrumbs a.home:active {
				color: #56308C;
				text-decoration: underline;
				}

	/* --------------------------
	4.6 Pageing
	---------------------------*/
	
		.pageing {
		clear: both;
		height: auto;
		overflow: hidden;
		margin: 0.5em 0;
		color: #56308C;
		}
		.pageing-bottom {
		height: auto;
		overflow: hidden;
		margin: 1.5em 0.5em 0;
		padding: 1.2em 0 0;
		background: url(img/embellishments/border-dash-horizontal.gif) 0 0 repeat-x;
		}
		.pageing-top {
		height: auto;
		overflow: hidden;
		margin: 0 0.5em 0.5em;
		padding: 0 0 1.2em;
		background: url(img/embellishments/border-dash-horizontal.gif) 0 100% repeat-x;
		}
			#content .pageing h3 {
			float: left;
			display: inline;
			padding: 0 1em 0 0;
			}
			
			.pageing ul {
			float: left;
			display: inline;
			}
				.pageing li {
				float: left;
				display: inline;
				padding: 0 7px;
				border-left: 1px solid #9b9b9b;
				}
					.pageing li.first-item {
					padding-left: 9px;
					}
					.pageing li.first-item,
					.pageing li.prev,
					.pageing li.next {
					border: none;
					}
					
					.pageing li a {
					font-weight: bolder;
					}
					
					.pageing li.prev,
					.pageing li.next {
					padding: 0;
					}					
						.pageing li.prev a,
						.pageing li.next a {
						position: relative;
						display: block;
						width: 16px;
						height: 16px;
						overflow: hidden;
						margin: 3px 0 0;
						}
							.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: url(img/buttons/arrows.gif) 100% 0 no-repeat;
							}
							.pageing li.next a .r {
							background: url(img/buttons/arrows.gif) 100% 100% no-repeat;
							}

	/* --------------------------
	4.7 Sorting criteria
	---------------------------*/
	
		.sortCriteria {
		height: auto;
		overflow: hidden;
		margin: 0.5em;
		color: #56308C;
		}
			#content .sortCriteria h3 {
			float: left;
			display: inline;
			padding: 0 1em 0 0;
			}
			
			.sortCriteria ul {
			float: left;
			display: inline;
			}
				.sortCriteria li {
				float: left;
				display: inline;
				padding: 0 12px 0 0;
				text-transform: lowercase;
				}
					.sortCriteria li span,
					.sortCriteria li a {
					float: left;
					display: inline;
					margin: 0 0 0 3px;
					}
						.sortCriteria li a {
						margin-top: 0.182em;
						}
						.sortCriteria li span {
						margin-right: 3px;
						}
										
						.sortCriteria li span.r {
						float: none;
						display: block;
						margin: 0;
						}
			
	/* --------------------------
	4.8 Order plan
	---------------------------*/
	
		#mainContent #orderPlan {
		height: 135px;
		margin: 0 0 3.5em;
		}
			#mainContent #orderPlan li {
			position: relative;
			float: left;
			display: inline;
			height: 20px;
			padding: 60px 0 0;
			width: 20%;
			overflow: hidden;
			margin: 25px 0 0 0;
			font-size: 0.9em;
			color: #56308C;
			text-align: center;
			}			
				#mainContent #orderPlan li .r {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: url(img/content/steps.gif) 50% -500px no-repeat;
				}				
				#mainContent #orderPlan .step1 .r {
				background-position: 50% 0;
				}
				#mainContent #orderPlan .step2 .r {
				background-position: 50% -100px;
				}
				#mainContent #orderPlan .step3 .r {
				background-position: 50% -200px;
				}
				#mainContent #orderPlan .step4 .r {
				background-position: 50% -300px;
				}
				#mainContent #orderPlan .step5 .r {
				background-position: 50% -400px;
				}
				#mainContent #orderPlan .disabledStep .r {
				background-position: 50% -500px;
				}
				#mainContent #orderPlan .activeStep {
				font-weight: bolder;
				}
		
	/* --------------------------
	4.9 Order details
	---------------------------*/
	
		.orderDetails {
		height: auto;
		overflow: hidden;
		margin: 1em 0 0;
		padding: 0 0 1em;
		background: url(img/embellishments/border-dash-horizontal.gif) 0 100% repeat-x;
		}			
			.orderDetails .payment,
			.orderDetails .delivery,
			.orderDetails .coupon {
			float: left;
			display: inline;
			background: url(img/embellishments/border-dash-vertical.gif) 0 0 repeat-y;
			}
				.orderDetails .payment {
				width: 165px;
				margin: 0 11px 0 0;
				background: none;
				padding-left: 1.5em;
				}
				.orderDetails .delivery {
				width: 170px;
				margin: 0 9px 0 0;
				padding-left: 35px;
				}
				.orderDetails .coupon {
				width: 200px;
				padding-left: 35px;
				}
					
				#mainContent .orderDetails h3 {
				margin: 0 0 0.2em;
				}
				
				.orderDetails ul {
				margin: 0 0 1em;
				}
					.orderDetails li {
					margin: 0.5em 0;
					}
				
				#mainContent .orderDetails p {
				margin: 0.5em 0;
				}
			
				.orderDetails label {
				vertical-align: middle;
				}
				
				.orderDetails input.img {
				margin: 1px 0 0;
				}
				
				.orderDetails input#f_order_coupon {
				width: 174px;
				margin: 0.5em 0 0;
				background:  url(img/br.gif) 0 0 no-repeat;
				}

	/* --------------------------
	4.10 Customer details
	---------------------------*/
	
		.invoice {
		padding: 1.5em;
		background: #EEEAF3;
		}
			.invoice input { 
			width: auto; 
			margin: 0;
			}
			.invoice label { 
			width: auto; 
			margin: 0 1em;
			}
		
		.customerDetails {
		height: auto;
		overflow: hidden;
		margin: 0 0 1em;
		padding: 1em 0 0;
		background: url(img/embellishments/border-dash-horizontal.gif) repeat-x;
		}						
			.customerDetails .personal,
			.customerDetails .address {
			float: left;
			display: inline;
			width: 42%;
			margin: 0 8% 0 0;
			}
			
			.customerDetails p {
			height: auto;
			clear: both;
			overflow: hidden;
			padding: 0.3em 0;
			}		
				.customerDetails label {
				float: left;
				display: inline;
				padding: 6px 0 0;
				}
				
				.customerDetails input {
				float: right;
				display: inline;
				width: 164px;
				background:  url(img/br.gif) 0 0 no-repeat;
				}
				.customerDetails select {
				float: right;
				display: inline;
				width: 180px;
				margin: 5px 0 0;
				}
				.customerDetails p.left {
				width: 154px;	
				float: left;
				clear: none;
				}
				.customerDetails .right {
				margin-right: -80px;
				margin-left: 20px;
				float: right;
				width: 150px;
				float: left;
				clear: none;
				}
				.customerDetails p.left input,
				.customerDetails p.right input  {
				width: 45px;
				}
	/* --------------------------
	4.11 Form buttons
	---------------------------*/
	
		.formButtons {
		height: auto;
		overflow: hidden;
		margin: 1em 0 0;
		padding: 1em 0 0;
		text-align: center;
		background: url(img/embellishments/border-dash-horizontal.gif) repeat-x;
		}
			.formButtons .left {
			float: left;
			display: inline;
			width: auto;
			border: 0;
			font-size: 1.4em;
			color: #56308C;
			font-weight: bold;
			}
			.formButtons .right {
			float: right;
			display: inline;
			width: auto;
			border: 0;
			font-size: 1.4em;
			color: #56308C;
			font-weight: bold;
			}
				.formButtons .right:hover,
				.formButtons .left:hover {
				color: #130427;
				cursor: pointer;
				}
			.formButtons a.cancel {
			display: inline;
			width: auto;
			border: 0;
			font-size: 0.9em;
			padding-right: 10px;
			background: url(img/embellishments/cancel.gif) 100% 4px no-repeat;
			color: #130427;
			font-weight: bold;
			}
				.formButtons a:link,
				.formButtons a:visited {
				color: #130427;
				text-decoration: none;
				}
				.formButtons a:hover,
				.formButtons a:active {
				color: #56308C;
				text-decoration: underline;
				}

	/* --------------------------
	4.12 Related
	---------------------------*/

		#mainContent .related {
		height: auto;
		float: left;
		width: 100%;
		overflow: hidden;
		clear: both;
		margin: 0.7em 0 0;
		}
			#mainContent .related .item {
			height: auto;
			overflow: hidden;
			margin: 1em 5px 0;
			width: 154px;
			height: 228px;
			display: inline;
			float: left;
			padding: 1em 10px;
			border: 1px solid #EEEAE6;
			text-align: center;
			overflow: hidden;
			}		
				#mainContent .related  h3 {
				margin: 0 1em;
				color: #000;
				font-size: 1.2em;
				font-weight: bold;
				}
					#mainContent .related  h3 a {
					color: #5D5752;
					}	
				#mainContent .related .pic {
				margin: 0 auto;
				height: 147px;
				}
					#mainContent .related .pic img {
					margin: 0 auto;
					}
				
				#mainContent .related .description {
				margin: 1em 0 0;
				width: 154px;
				line-height: 1.1em;
				}
					#mainContent .related .description h3 {
					margin: 0 0 0.3em;
					color: #5D5752;
					font-size: 1.2em;
					font-weight: normal;
					}
						#mainContent .related .description h3 a {
						color: #5D5752;
						}
					
					#mainContent .related .description .types {
					margin: 1em 0 0.6em;
					color: #5D5752;
					}
					
					#mainContent .related .description .details {
					clear: both;
					height: auto;
					overflow: hidden;
					padding: 1em 0 0;
					}
						#mainContent .related .description .details .price {
						float: left;
						display: inline;
						margin: 0.16em 0 0;
						color: #56308C;
						}
							#mainContent .related .description .details .price del {
							color: #d5d5d5;
							font-size: 1.273em;
							text-decoration: line-through;
							}
							#mainContent .related .description .details .price strong {
							color: #56308C;
							font-size: 1.6em;
							}
						
						#mainContent .related .description .details .buttons {
						float: right;
						display: inline;
						text-align: right;
						line-height: 1.6em;
						}
						
							#mainContent .related .description .details .buttons li {
							float: right;
							display: inline;
							margin: 0;
							font-size: 0.8em;
							}
								#mainContent .related .description .details .buttons li a {
								padding: 0;
								color: #56308C;
								}