@import url('css/reset.css');
@import url('css/font/stylesheet.css');
@import url('fancybox/fancy.css');

/*
		studiofabryka.pl
		mc, Kornel Maliczak, 4 sty 2012
*/






/*
		--- classes, constants
*/

.full {
	position:relative;
	width:100%;
	float:left;
}

.radius(@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

::-moz-selection {color: #fff; background: #2d2515;}
::selection {color: #fff; background: #2d2515;}

body {
	font-family: Tahoma, arial, sans-serif;
	color:@color1;
}

.font {font-family: 'SakkalMajallaRegular'; font-weight:normal;}
.font2 {font-family: 'SakkalMajallaBold'; font-weight:normal;}

@color1: #302a25;
@color2: #954a0e;
@color3: #443311;
@color4: #fff6e3;



/*
		--- Basic
*/

.home .ba-caption {display:none;}

header, article, footer {.full;}

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

body { background: @color4 url(images/bg.jpg) top no-repeat; }
.sub { background: @color4 url(images/sub-bg.jpg) top no-repeat; }



/*
		--- Typografia
*/

.sub .sections {
	h1, h2, h3, h4, h5 {
		.font2;
		text-transform: uppercase;
	}

	h1 {
		padding:0 0 15px 0;
	}

	h2, h3, h4, h5 {
		margin:.5em 0;
	}

	h1 {font-size:30px;}
	h2 {font-size:27px;}
	h3 {font-size:24px;}
	h4 {font-size:21px;}
	h5 {font-size:18px;}

	p, ul, ol {
		font-size:12px;
		line-height:1.4em;
		padding-bottom:1em;
	}

	li {padding:2px 0;}

	ul li {
		list-style:square outside;
		margin-left:35px;
	}

	ol li {
		list-style: decimal outside;
		margin-left:35px;
	}

	ol li ol li {
		list-style: lower-latin outside;
		margin-left:20px;
	}

	a {
		color:@color2;
		text-decoration: underline;
		&:hover {color:@color3;}
	}
}



/*
		--- Header
*/

.logo {
	float:left;
	margin:5px 0 0 25px;
}

header {

	margin-top:20px;

	nav {
		float:right; clear:right;
		margin:15px 15px 0 0;
		position: relative;
		z-index:1000;

		li {float:left; height:48px; position:relative;}

		li:first-child a {border-left:0;}
		.last a {border-right:0;}

		a {
			text-shadow: 0 2px 2px #000;
			display:block;
			float:left;
			padding:3px 16.5px 1px;
			font-size:18px;
			line-height:1.5em;
			color:@color4;
			text-transform: uppercase;
			.font;

			transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-webkit-transition: all .2s ease-in-out;
		}

		.current > a, a:hover {
			background: #191511;
			box-shadow: 0 0 12px #000 inset;
		}

		.sub-open > a {
			background: #685946;
			box-shadow: none;
		}

		.lvl2 > .last > a {border:0;}

		.lvl2 {
			position: absolute;
			top:30px; left:0;
			z-index:100;
			width:170px;
			background: #685946;

			li {
				clear:left;
				width:170px;
				height: 25px !important;
			}

			a {
				height:25px !important;
				padding:0;
				width:100%;
				border-left:0;
				border-right:0;
				line-height:1.7em;
				border-bottom:1px solid #0f0d0b;
				text-shadow:0 1px 1px #3c3328;
				box-shadow: none;
				color: @color4;
				font-size:15px;
				text-indent:10px;

			}

			a:hover {background: #43382c; color:white;}
			.sub-open > a {
				background: #4f4335 !important;
			}
		}

		.lvl3 {
			position: absolute;
			top:0; right:-170px;
			width:170px;
			background: #4f4335;

			a {border-bottom:1px solid @color3;}

			.last > a {border:0;}
		}
	}
}

.slider-overlay {
	position: absolute;
	top:84px; left:26px;
	padding:10px;
	height:280px; width:150px;
	z-index:20;
	background: url(images/white80.png);
	box-shadow:65px 0 65px white inset;
	border-left:1px solid #efefef;

	.font;
	text-transform:uppercase;

	h4 {
		color:@color2;
		font-size:21px;
	}

	ul {padding-bottom:28px;}

	li {
		.font2;
		font-size:16px;
		padding-left:12px;
		list-style: none outside;
		background: url(images/small-arrow.png) 0 5px no-repeat;
	}

	p {
		.font2;
		font-size:18px;
	}

}

.slider {
	width:945px;
	height:310px;
	float:left;
	overflow: hidden;
	background: url(images/slider-bg.jpg) bottom no-repeat;
	padding:1px;
	margin:20px 0 0 22px;
	position: relative;

	.panel {
		float:left;
		border-left:3px solid white;
		overflow:hidden;
		width:138px;
		height:298px;
		background: white;

		img {float:left;}
	}

	.panel:first-child {
		width:513px;
		border-left:3px solid white;
	}

	.last {border-right:3px solid white;}
}

.sub header {height:90px;}





/*
		--- Article
*/

article {
	width:940px;
	background: white url(images/articlebottombg.jpg) bottom no-repeat;
	padding:0 25px 35px;
}

.home .main {
	float:left;
	width:500px;

	h1 {
		text-transform:uppercase;
		font-size:25px;
		padding-bottom:7px;
		.font2;
	}

	p {
		font-size:12px;
		line-height:1.3em;
	}
}

.ba-box {
	float:left;
	margin:9px 0 0 25px;

	h3 {
		.font2;
		font-size:18px;
		text-transform: uppercase;
		padding-bottom:5px;
	}
}

.home .ba {
	float:left;
	width:194px;
	height:125px;
	position: relative;

	img {
		position: absolute;
		top:0; left:0;
	}
}

.ba-mask,
.ba-bg {
	position: absolute;
	top:0; left:0;
}

.ba-mask {z-index:20; border-right:2px solid white;}

.more {
	float:right;
	clear:both;
	font-size:11px;
	color:@color1;
	padding:3px 15px 3px 0;
	background: url(images/more-arrow.png) right no-repeat;
	&:hover {
		color:@color2;
	}
}

.info {
	float:right;
	margin:25px -25px 0 0;
}

.bgimg {
	position: absolute;
	top:0; left:23px;
	z-index:10;
}




.sections {
	float:left;
	position: relative;
	z-index:20;
	width:666px;
	margin:25px;
	padding:25px;
	background: url(images/white80.png);
	border:1px solid #e4ddd6;
	min-height:300px;
}

.sub article {padding-bottom:60px;}




/*
		--- Footer
*/

footer {
	position:fixed;
	bottom:0; left:0;
	z-index:500;
	width:100%;
	height:28px;
	background: #FFF6E3;
	padding-top:10px;
}

.noFixed {
	position: relative;
	float:left;

}

footer ul {
	float:left;
	height:28px;

	a {
		color:@color4;
		text-align:center;
		font-size:10px;
		line-height:2.8em;
		text-transform: uppercase;
		float:left;
		margin:0 3px;
		padding:0 15px;
		width:auto; height:28px;
		background: #2E2823;
		box-shadow: 0 5px 10px #4C443D inset;

		border-radius:3px 3px 0 0;
		-moz-border-radius:3px 3px 0 0;
		-webkit-border-radius:3px 3px 0 0;

		transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-webkit-transition: all .2s ease-in-out;

		&:hover {
			margin-top:-5px;
			height:33px;
		}
	}
}

footer li {float:left;}



.madeby {
	float:right;
	margin:0;

	img {float:left;}

	strong {
		color: @color1;
		font-weight:normal;
		font-size:10px;
		float:left;
		margin:3px 3px 0 0;
	}
}







/*
		--- Gallery
*/

.gallery {
	float:left;
	width:100%;
	margin:15px 0 0 0;

	ul {
		margin:0 !important;
		padding:0 !important;
		width:102%;
		float:left;
	}

	li {
		list-style:none !important;
		float:left;
		margin:0 0 15px 15px !important;
		position: relative;
		padding:0 !important;
		position: relative;
		overflow: hidden;
	}

	a {
		float:left;
		display:block;
	}

	img {
		border:0;
		padding:0;
		float:left;
		border:0;
		display:block;
		border:1px solid @color4;

		opacity:.9;
		filter:alpha(opacity=90);

		transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-webkit-transition: all .3s ease-in-out;


	}

	a:hover img {
		opacity:1;
		filter:alpha(opacity=100);
	}

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

.gi {

	li {
		width:322px;
	}

	img {
		max-width:320px;
		border:1px solid @color1;
	}

	strong {
		float:left;
		width:100%;
		font-size:16px;
		text-align:left;
		color:@color1;
		padding:3px 0 0 0;
	}
}






/*
		--- other
*/

table {
	margin:15px auto;
	border-collapse:separate;
	border-spacing:2px;

	td {
		padding:5px !important;
		border:1px solid #ccc;
		font-size:12px;
	}

	td p {padding:0 !important;}
}

#main ul li {
	list-style:disc inside;
	margin-left:20px;
}

#main ol li {
	list-style:decimal inside;
	margin-left:20px;
}









/*
		--- Formularz
*/

.form {
	border-top:1px dashed #ccc;
	float:left;
	margin-top:15px;
	padding-top:15px;
	width:100% !important;

}

#contact-form {
	width:99%;
	padding-bottom:15px;
	}
	fieldset:first-child {width:40%;}
	fieldset {
		float:left;
		width:60%;
	}
	.subject {display:none;}
	label {
		float:left;
		width:100%;
		margin:3px 0;
		}
		label span {
			float:left;
			width:100%;
			color: @color1 *1.5;
			font-size:12px;
			padding:3px;
		}

		label input, textarea {
			float:left;
			width:90%;
			padding:3px 6px;
			border:1px solid #ccc;
		}

		textarea {
			width:97%;
			height:110px;
		}

		#contact-form button {
			float:right;
			background: @color2;
			color: white;
			font-size:13px;
			font-weight:bold;
			padding:5px 10px;
			cursor:pointer;

			transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;

			&:hover {
				background: @color2 /1.2;
				box-shadow: 0 0 6px @color1 inset;
			}
		}

		form #error,
		form #ok {
			display:none;
			float:left;
			padding:7px 10px;
			background: #ff0000;
			margin-left:5px;
			color: #fff;
			font-weight:bold;
			font-size:13px;
		}

		form #ok {background: #1fac06;}

		.error-input {
			border:1px solid #ff0000;
			background: #ffe1e1;
		}

.mapa {
	float:right;
	margin-bottom:15px;

	small {
		font-size:10px;
		color:@color1;

		a {
			color: @color2 !important;
			&:hover {color:@color2 /2 !important;}
		}
	}
}









/*
		--- download
*/

#download {
	float:left;
	width:99% !important;
	margin-top:15px;
	padding-top:5px;
	border-top:1px dashed #ccc;

	li {
		float:left;
		clear:left;
		padding:3px 0;
		margin-left:20px;
		padding-left:20px;
		list-style:none !important;
		background: url(images/download.png) 0 4px no-repeat;
	}

	a {
		font-size:12px;
		color: @color1 !important;

		&:hover {
			text-decoration:none;
			color: @color3 !important;
		}
	}

	.typPliku {color:@color3;}
}





/*
		--- paginator
*/

#pages-container {
	float:left;
	width:100%;
	#pages {
		float:left;
		width:100%;
		text-align: center;
		padding:0 !important;

		* {
			font-size:12px;
			display:inline;
			float: none !important;
		}

		a, span {
			padding:0 5px;
		}

		a {cursor:pointer;}
	}
}

.jPag-current {color: #999;}








/*
		--- sortowalna tabela z menu
*/


.menu table {
	border-collapse: collapse;
}

.menu td {
	padding:5px;
	border:0;
	border-top: 1px dashed #d9c4ae;
}

.menu .even td {
	background: #f2ebdf;
}

.menu tr td:first-child,
.menu .prices {text-align:center;}

.menu tr:first-child td {border:0;}

.sort tr:hover td {
	color: white;
	background: @color3;
}

thead th {
	color:@color2;
	font-weight:bold;
	font-size:13px;
	text-align:left;
	border: 1px solid #d9c4ae;
	padding:3px 20px 3px 5px;
	background: url(images/table-unsort.gif) right no-repeat;
	cursor:pointer;
}

thead th.notsorted {
	background: none;
	cursor: text;
}

th.headerSortUp {
    background-image: url(images/table-asc.gif);
    background-color: #fef7ed;
}

th.headerSortDown {
    background-image: url(images/table-desc.gif);
    background-color: #fef7ed;
}

table.sort {
	width:85%;
	margin:10px auto;
}

.sort .item0 {width:22px;}
.sort .item1 {width:160px;}
.sort .item2 {width:300px;}







/*
		--- style dla podstrony BA
*/

.ba .sections {width:835px !important;}


.sub .ba {
	width:835px;
	height:577px;
	margin:0 0 70px 0;
}

.ba-caption {
	position: absolute;
	bottom:0; left:0;
	z-index:100;
	padding:8px 5px;
	width:825px;
	background: url(images/white80.png);
	.font2;
	text-align:center;
	font-size:21px;
	text-transform: uppercase;
}