/*

		studiofabryka.pl
		mc, 21-01-2014

 */

@import 'config.less';




body {
	background: url(../images/top.jpg) top no-repeat;
	.font;
	font-size: 12px;
	line-height: 1.4em;
	color: @txtcolor;
}

.sub {background: url(../images/subtop.jpg) top no-repeat;}

.top, .bottom {
	float: left;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.bottom {
	background: #f2f2f2;
}

.content {
	width: @width;
	margin: 0 auto;
	position: relative;
}

header, article, footer {
	float: left;
	width: 100%;

	position: relative;
	z-index: 10;
}

body.kontakt {
	.main {
		float: left;
		width: 300px;
	}

	.map {
		float: left;
		margin: 0 15px;

		iframe {
			width: 330px;
			height: 310px;
		}

		a {color: @color1 !important;}
	}

	.form {
		float: right;
	}
}




/* header */

.logo {
	float: left;
	margin: 12px 0;
}

nav {
	float: right;
	margin-top: 35px;

	li, a {
		float: left;
		position: relative;
	}

	.lvl1 > li {
		border-left: 1px solid #e5e5e5;
		padding: 10px 0;
	}

	.lvl1 > li:first-child {border:0;}

	.lvl1 > li > a {
		.fontc;
		color: @color1;
		font-size: 18px;
		padding: 10px;
		margin: 0 3px;
		.transition;
	}

	.lvl1 > .current > a,
	.lvl1 > li > a:hover,
	.lvl1 > .sub-open > a {
		background: @color1;
		color: white;
	}

	.lvl2 {
		display: none;
		position: absolute;
		top:47px; left: 3px;
		width: 180px;
		background: @color1;
		z-index: 50;

		> li {width: 100%;}

		> li > a {
			font-size: 12px;
			color: white;
			padding: 5px 5%;
			width: 90%;
			border-top: 1px solid darken(@color1, 8%);

			&:hover {
				background: darken(@color1, 5%);
			}
		}
	}
}

.stempel {
	float: right;
	margin-right:-130px;
}

.slogan {
	float: left;
	width: 100%;
	text-align: center;
	padding: 20px 0 21px;
	color: white;
	font-size: 27px;
	.fontb;
	text-transform: none;
}

.slider1,
.slider2 {
	float: left;
	background: white;
	height: 311px;
	overflow: hidden;
}

.sub {
	.slider1,
	.slider2 {
		height: 242px;
	}
}

.slider1 {
	margin: 0 4px 0 7px;
	width: 333px;
}

.slider2 {width: 628px;}


/* article */

article {
	padding: 2em 0 1em;
}

.sections {
	float: left;
	width: 636px;
}

aside {
	float: right;
	width: 302px;
}

.home h2, h1, .produkty h2 {
	text-transform: none;
	.fontb;
	font-size: 22px;
	margin: 1em 0 .5em;
	float: left;
	width: 100%;
}

.oferta {
	float: left;
	width: 100%;

	li, li > a, li > sub > a {
		float: left;
		list-style: none;
	}

	li {margin: 0 0 9px 9px;}

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

	li > a, li > sub > a {
		.fontb;
		display: block;
		font-size: 15px;
		color: white;
		text-align: center;
		padding-top:27px;
		height: 44px; width: 152px;
		background: url(../images/ofertabg.jpg) top repeat-x;

		.transition;

		&:hover {
			opacity:.8;
			text-decoration: none;
		}
	}

	.double a {
		padding-top:18px;
		height: 53px;
	}
}

.minigallery {
	float: left;

	ul {
		float: left;
		width: 100%;
	}

	li {
		float: left;
		margin: 0 0 15px 15px;
	}

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

	a {
		.transition;
		&:hover {
			opacity:.9;
		}
	}
}


.arch {
	.fontc;
	font-size: 15px;
	color: @txtcolor;
	float: right;
	padding: 2px 23px 1px 0;
	background: url(../images/more.png) right center no-repeat;
	&:hover {
		opacity:.7 !important;
	}
}

.produkty {
	min-height: 250px;

	h2 {margin:.6em 0; width: auto;}
	.arch {margin-top: 10px;}

	ul {
		float: left;
		width: 100%;

		li, a {float: left;}

		li {
			width: 125px;
			margin-left: 16px;
			text-align: center;
		}

		strong {
			color: @txtcolor;
			.fontb;
			font-size: 13.3px;
		}

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



/* footer */

footer {
	padding: 1.5em 0;

	address {
		float: left;

		font-style: normal;
		color: @txtcolor;
		font-size: 12px;
		.font;

		strong {font-weight: bold;}
		span {margin-left: 1em;}
	}

	ul {
		float: right;

		li, a {
			float: left;
		}

		a {
			text-transform: uppercase;
			color: white;
			font-size: 14px;
			.fontb;

			margin-left: 10px;
			padding-left: 10px;
			line-height: 1em;
			border-left: 1px solid white;
		}

		li:first-child a {border:0;}
	}

	.sitemap {
		float: right;
		clear: right;

		color: white;
		font-size: 14px;
		.fontb;

		margin-top: 10px;
		padding-right: 20px;
		background: url(../images/sitemap.png) right center no-repeat;
	}

	.madeby {
		float: right;

		strong, img {
			float: left;
		}

		strong {
			font-weight: normal;
			font-size: 10px;
			color: #333;
			line-height: 1em;
			margin: 3px 3px 0 0;
		}

		img {.transition;}

		&:hover {
			img {opacity: .8;}
		}
	}
}






/* SUB */

.gallery h3 {
	float: left;
	width: 100%;
	margin: 1em 0 .5em;
	padding-bottom: .5em;
	border-bottom: 1px solid #ddd;
}


.sklep .bottom {background: none;}

.sklep .produkty {
	li {margin-bottom: 1.5em;}

	em {
		.fontb;
		color: @color2;
		font-size: 20px;
		float: left;
		width: 100%;
		margin: 5px 0;

		small {
			.fontc;
			font-size: 13px;
			text-decoration: line-through;
		}
	}
}


.main table {float: left;}

.form {
	width: 100%;

	fieldset {width: 60%;}

	fieldset:first-child {width: 40%;}

	input {width: 90%;}
	textarea {width: 98%;}

	.error, .ok {
		width: 94%;
		padding: 5px 3%;
	}
}



section h3 {
	clear: left;
	width: 100%;
}


.back {
	float: right !important;
	margin: 10px 0;
	color:white;
	padding: 3px 7px 5px;
	line-height: 1em;
	background: @color1;

	strong {font-weight: normal;}

	span {opacity:.7;}
}