@charset "utf-8";

@import "style.overwrite";
@import "style.shop";

/** VARS ***********************************************************************
_______________________________________________________________________________*/

@cFont	: #848587;
@cGrey	: #f0f0f0;
@cBlue	: #28b9dc;
@cGreen	: #8cbb19;

@cLine	: #87888b;
@cError	: #ffbdbd;

@path	: '../images/layout/';
@base	: 960px;

@font-face {
	font-family: 'Questrial'; font-style: normal; font-weight: 400;
	src: url(http://themes.googleusercontent.com/static/fonts/questrial/v4/MYWJ4lYm5dbZ1UBuYox79D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.questrial-font(@bold: 400, @size: 18px, @lineheight: normal, @color: @cFont, @transform: none, @deco: none)
{
	font: @bold @size~"/"@lineheight 'Questrial', Arial, Helvetica, Sans-serif; color: @color;

	text-decoration: @deco; text-transform: @transform;
}


/** ROOT ***********************************************************************
_______________________________________________________________________________*/

html { height: 100%; overflow: auto; }

body#top
{
	height: 100%;
	font: normal 12px/1.5 Arial, Sans-serif; color: @cFont;
	background: #fff url("@{path}bg-body.png") scroll repeat 0 0;
}


/** GRID ***********************************************************************
_______________________________________________________________________________*/

#wrapper
{
	margin: 0 auto -160px; min-height: 100%; height: auto !important; height: 100%;

	header { height: 92px; background-color: #fff;

		&>div { .base(); position: relative; }

		#logo, #logo-ico { position: absolute; /*top: 21px; left: 75px;*/ left: 0; top: 15px; } #logo-ico { top: 23px; left: 0; }

		#order-data { position: absolute; right: 0; top: 63px; font-weight: bold; }

		#basket { position: absolute; right: 0; height: 50px; min-width: 210px; padding: 10px;
			background-color: @cGrey; border-radius: 0 0 3px 3px;

			.knop-blauw { width: 80px;

				&#show-register, &#do-logout { margin-right: 10px; }
			}

			.goto-cart, #count, #amount { position: absolute; left: 10px; /*bottom: 10px;*/ bottom: 8px; }
			#count  { bottom: 4px; left: auto; right: 120px; color: @cBlue; }
			#amount { bottom: 4px; /*left: 120px;*/ left: auto; right: 10px; }
		}

		#user-welcome { position: absolute; right: 240px; top: 12px; font-size: 11px; color: #e7e7e7; }

		#language { position: absolute; top: 25px; right: 240px;

			a { font-size: 11px; text-decoration: none; text-transform: uppercase; //.questrial-font(400, 14px, 31px, @cLine, uppercase);

				//.transition(color);

				&:hover, &.active { color: @cBlue; }
				&:first-child { background: none; }
			}
		}

		form[name="frm-search"] { position: absolute; top: 45px; right: 240px; }
	}

	nav[role="navigation"] { height: 74px; //text-align: center;
		background-color: @cGrey;

		&>div { .base(); display: table; padding-top: 43px; }

		a { display: table-cell; width: 10%;
			background: url("@{path}ico-li.png") scroll no-repeat 0 center;
			.questrial-font(400, 14px, 31px, @cLine, uppercase); text-align: center;

			.transition(color);

			&:hover, &.active { color: @cBlue; }
			&:first-child { background: none; }
		}
	}

	#banner { .base();

		img { display: block; margin: 0; }

		.cycle-slideshow, .cycle-slideshow * { box-sizing: border-box; }

		.cycle-pager { position: absolute; bottom: 10px; z-index: 500; width: 100%; height: 16px; overflow: hidden; text-align: center;

			span { display: inline-block; width: 20px; height: 20px; line-height: 18px; text-align: center;
				font-size: 50px; color: @cGrey; cursor: pointer;

				&.cycle-pager-active { color: @cBlue;}
			}
		}
		.cycle-pager > * { cursor: pointer;}
	}

	#content { .base(); padding: 20px 0; overflow: hidden;

		#page {

			&.block { width: 470px; margin-bottom: 20px;

				img { display: block; }

				a.register-pro { display: block; padding: 10px 30px;
					font-size: 18px; line-height: 23px; color: #fff; text-decoration: none; text-transform: uppercase;
					background: @cBlue url("@{path}arrow-right-white-big.png") scroll no-repeat 407px center;
				}
			}

			&.page-form { float: right; width: 450px; margin-top: 30px; padding: 10px;
				background-color: @cBlue; color: #fff;
			}
		}

		#form { float: left; width: 470px;

			section { background-color: #fff; border: 10px solid @cGrey; }
		}

		#hot { float: right; width: 470px; margin: 0 0 20px 20px;

			section { height: 254px; background-color: #fff; overflow: hidden;

				.product-item { margin: 0 0 0 10px;

					&:first-child { margin-left: 0; }
				}
			}
		}

		#find, #newsletter { float: right; width: 210px; padding: 10px;
			background-color: #fff;

			section { height: 125px; background-color: @cLine;
				color: #4a4a4a;

				h2 { color: #fff; padding-bottom: 5px; line-height: 20px; }
			}
		}
		#newsletter { clear: both; margin-left: 10px;

			section { background-color: @cBlue; }
		}

		#brands { width: 470px;

			section { overflow: hidden;

				a { width: 150px; float: left;

					img { width: 148px; border: 1px solid #f0f0f0; border-top-color: #fff; border-bottom-color: #fff; }

					&:first-child img, &:last-child img { border-color: #fff; }
				}
			}
		}

		#search-result {

			article { overflow: hidden; padding: 10px;
				background-color: #fff;

				div { display: table-cell; }

				a.knop-blauw { float: right; }

				h3 { line-height: 21px; }

				&:first-child { border-top: none !important; }
			}
		}
	}

	#push { height: 160px; }
}

footer
{
	.base(); height: 160px; position: relative; background-color: @cGrey; line-height: 1.4;

	#copy { position: absolute; right: 20px; bottom: 24px;

		img { display: block; }
	}

	#address { position: absolute; left: 20px; bottom: 20px; }

	#social { position: absolute; /*left: 225px; bottom: 20px;*/right: 20px; bottom: 109px;

		a { /*float: left; margin-right: 10px;*/ }
		a img { display: block; }
	}

	//#newsletter { position: absolute; left: 225px; bottom: 75px; }

	#payments { width: 200px; position: absolute; left: 490px; bottom: 20px;

		img { float: left; margin: 5px 5px 0 0; }
	}

	#footer-nav { width: 300px; position: absolute; left: 225px; /*bottom: 71px;*/bottom: 20px;

		a { display: block; font-weight: bold; text-transform: uppercase; text-decoration: none; }
	}
}


/** DEFINED ********************************************************************
_______________________________________________________________________________*/

.blauw { color: @cBlue !important; }
.grijs { color: @cGrey !important; }
.groen { color: @cGreen !important; }

h1 { font-size: 20px; color: #85868a; text-transform: uppercase; line-height: 24px; }
h2 { font-size: 14px; text-transform: uppercase; }
h3 { font-size: 12px; color: @cBlue; text-transform: uppercase; }

.ronde-hoeken { border-radius: 3px; }

input, textarea, select, button
{
	/*height: 21px; line-height: 21px; border: none; background-color: @cGrey;*/ .ronde-hoeken;
}
textarea { height: auto; padding: 3px 5px 5px 5px; line-height: normal; }

.knop-blauw, .knop-blauw:hover, .knop-blauw:visited { display: inline-block; padding: 0 10px; .ronde-hoeken; //border-radius: 3px;
	background-color: @cBlue; color: #fff !important; line-height: 20px; text-decoration: none; text-transform: uppercase; cursor: pointer;

	line-height: 21px; //same as input fields!

	&.next { padding-right: 23px; background: @cBlue url("@{path}arrow-right-white.png") scroll no-repeat right center; }
	&.prev { padding-left:  23px; background: @cBlue url("@{path}arrow-left-white.png")  scroll no-repeat left  center; }
}


.block { //width: 470px;

	h1 { padding: 0 0 5px 10px; }
	//h2 { color: #fff; }

	section { padding: 10px; background-color: @cGrey;  }
}


/** FANCYBOX *******************************************************************
_______________________________________________________________________________*/

#fancybox-outer, #fancybox-content { background-color: transparent; }

.my-fancy { overflow: hidden; min-width: 300px; padding: 25px 25px; background-color: @cBlue; color: #fff; .ronde-hoeken; //border-radius: 3px;

	h2 { padding-bottom: 15px; text-transform: none; }

	//form { /*padding: 25px 25px; color: #fff;*/ }

	fieldset { border: none; }

	legend, p.legend { font-size: 16px; font-weight: bold; text-transform: uppercase; }

	p { margin: 0 0 5px;

		&.buttons { width: 300px; margin: 10px 0 0 0; padding-left: 150px; overflow: hidden; }
		&.legend  { width: 300px; margin: 0; padding-left: 150px; line-height: normal; }
		&.error	  { width: 300px; margin: 5px 0; padding-left: 150px; color: #7ed5ea; }
		&.end	  { clear: both; margin: 0; padding-top: 20px; font-weight: bold;

			a { cursor: pointer; text-decoration: underline; }
		}
	}

	label { /*display: inline-block;*/ width: 140px; padding-right: 10px; text-transform: uppercase; text-align: right;

		&.error { width: auto; padding: 0; color: #229bb8; line-height: 21px; text-transform: none; } //&.after, &.error { width: auto; } //&.error { /*color: #ffbdbd;*/ line-height: 21px; }
	}

	input, select { width: 300px; border-radius: 0;
		background-color: #7ed5ea; color: #fff;

		&::-webkit-input-placeholder { color: #f2fbfd; }
		&:-moz-placeholder			 { color: #f2fbfd; } //firefox 18-
		&::-moz-placeholder			 { color: #f2fbfd; } //firefox 19+
		&:-ms-input-placeholder		 { color: #f2fbfd; } //ie 10 > no alpha so lighter color
		&.placeholder				 { color: #f2fbfd; } //IE 9-
	}

	.knop-blauw { background-color: #fff; color: @cBlue !important; border-radius: 0;
		//padding-left: 5px; padding-right: 5px;
	}

	button { width: auto; /*height: 20px; padding: 0 10px;*/ border-radius: 0;
		background-color: #fff; color: @cBlue; text-transform: uppercase;

		//height: 21px; line-height: 21px; //same as input fields!
	}
}

#fancybox-close { width: 30px; height: 30px; top: -15px; right: -15px;
	background: transparent url("@{path}fancy-close.png") scroll no-repeat 0 0;
}

/*#delete-cart-item, #add-to-whishlist, #add-to-cart { min-width: 200px; padding: 15px;

	a {	float: right;

		&.no, &.stay { float: left; }
	}
}*/


/** FORM ***********************************************************************
_______________________________________________________________________________*/

form {

	p { margin-bottom: 10px; position: relative;

		&.captcha { margin: 0; }

		label { width: 115px; line-height: 21px;

			&.error { width: auto; position: absolute; top: 0; right: 5px; color: #f00; line-height: 21px; }
		}

		input[type="submit"] { width: auto; border: none; }
	}
}

form[name="frm-search"] { position: relative;

	input { width: 250px; height: 25px; padding: 0 25px 0 5px;
		background-color: @cGrey;
	}

	button { position: absolute; right: 0; width: 25px; height: 25px; padding: 0;
		background: url("@{path}ico-search.png") scroll no-repeat center center;
	}

	label.error { position: absolute; right: 255px; line-height: 25px; }
}

#find, #newsletter {

	section { padding-bottom: 5px; }

	form { margin-top: 5px; position: relative;

		input { padding: 0 18px 0 5px; }

		button { position: absolute; right: 0; width: 18px; /*height: 21px;*/ padding: 0;
			background: url("@{path}arrow-right.png") scroll no-repeat center center;
		}

		span.error { display: block; min-height: 5px; color: #fff; /*color: @cError; position: absolute; right: 18px; top: 20px; z-index: 1; color: #fff; white-space: no-wrap;
			background: #f00 /*url("@{path}arrow-right.png") scroll no-repeat center center*; border-radius: 5px;*/

			div { padding: 0; /*padding: 0 5px; line-height: 21px;*/ }
		}
	}

}

#form form, form[name="forgot-password"], form[name="form1"] {

	label { width: 130px; padding-right: 10px; text-align: right;

		span { color: @cBlue; }

		&.error, &.after { width: auto; padding: 0; }
	}

	input[type="text"], input[type="password"], select, textarea { width: 290px; /*background-color: #e9f8fb;*/ }

	button { width: auto; margin-left: 140px; padding-right: 23px;
		background: @cBlue url("@{path}arrow-right-white.png") scroll no-repeat right center;
	}

	.checks-multiple label.after { margin-right: 25px;

		&:last-child { margin-right: 0; }
	}
}
form[name="forgot-password"] button { margin-left: 0; }
form[name="form1"] button { float: right; margin-left: 0; }


/** PRODUCTS *******************************************************************
_______________________________________________________________________________*/

#product-categories { overflow: hidden;

	a { float: left; width: 184px; height: 30px; margin: 0 10px 10px 0; padding-bottom: 10px;
		background: #fff url("@{path}gradient-categories.jpg") scroll repeat-x 0 0;
		.questrial-font(400, 14px, 30px, #87888b); text-align: center;

		&:hover, &.active { background-image: none; color: #fff; }
		&:nth-child(5n) { margin-right: 0; }
	}
}

#product-list { /*width: 960px;*/ padding: 0 10px; overflow: hidden;
	background-color: #fff;
}

.product-item { display: block; float: left; width: 220px; margin: 10px 20px 10px 0;
	line-height: 14px;

	&>div { padding: 10px; position: relative;
		background-color: @cGrey; transition: background-color 0.1s linear;

		img.promo { position: absolute; top: -5px; right: -5px; z-index: 1; padding-bottom: 0;

			&.has-promo { right: 43px; }
		}

		a { text-decoration: none;

			img { display: block; width: 200px; height: 170px; padding-bottom: 5px; }

			span { color: @cBlue; text-transform: uppercase; }
		}

		p { height: 28px; }

		div { height: 24px; margin-top: 3px; padding-top: 3px; border-top: solid 1px @cLine;
			position: relative;

			a.add-to-basket { display: block; width: 25px; height: 20px; position: absolute; bottom: 0;
				background: url("@{path}ico-basket-add.png") scroll no-repeat center center; cursor: pointer;
			}

			.price { position: absolute; bottom: -3px; right: 0;
				font-size: 18px; /*font-weight: bold;*/ color: #4a4a4a; line-height: 18px;

				&.old { bottom: 14px; font-size: 11px; color: @cBlue; line-height: normal; text-decoration: line-through; }
			}
		}
	}

	&:hover, &.active { color: #fff;

		&>div { background-color: transparent;

			span { color: #fff;

				&.old { color: #fff; }
			}

			div { border-color: #fff;

				a.add-to-basket { background-image: url("@{path}ico-basket-add-active.png"); }
			}
		}
	}

	&:nth-child(4n) { margin-right: 0; }
}

#product-detail {
	background-color: @cGrey; border: solid 10px #fff; overflow: hidden;
	position: relative;

	figure { float: left; width: 500px; margin: 10px;

		img { display: block; width: 500px; height: 425px; }
	}

	img.promo { position: absolute; top: 2px; left: 424px; z-index: 1; }
	img.has-promo { left: 340px; }

	&>div { float: right; width: 400px; margin: 10px; padding-bottom: 85px;
		font-size: 11px;

		h1 { padding-bottom: 15px; color: @cBlue;

			span { color: @cFont; }
		}
		h3 { font-size: 11px; }
	}

	a.add-to-basket { position: absolute; bottom: 10px; right: 10px; padding: 1px 35px 2px 10px; font-size: 13px;
		background: @cBlue url("@{path}ico-basket-add-active.png") scroll no-repeat right center;
	}

	.price { position: absolute; bottom: 45px; right: 10px;
		font-size: 28px; color: #4a4a4a; line-height: 20px;

		&.old { /*bottom: 79px;*/bottom: 70px; font-size: 15px; color: @cBlue; line-height: 15px; text-decoration: line-through; }
	}

	.quantity, .kind { position: absolute; bottom: 10px; left: 530px;
		text-transform: uppercase;

		label { width: 50px; font-size: 11px; }

		input, select { width: 40px; height: 24px; margin-right: 5px; padding: 0;
			/*background-color: @cBlue;*/ font-size: 13px; /*color: #fff;*/ text-align: center;
		}
	}
	.kind { bottom: 45px;

		select { width: auto; padding: 3px 3px 3px 0; }
	}

	.stock { position: absolute; /*bottom: 80px;*/bottom: 70px; left: 530px;
		color: @cGreen; font-weight: bold; line-height: 12px;
	}
}