/*

	studiofabryka.pl
	mc, 15 grudnia 2010

*/







/* RESET */

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, img, strong, ul, ol, li, fieldset, form, label, legend, table, tbody, thead tr, th, td, button { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration: none; } header, article, footer, aside, section, nav {display:block;} body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } sup { vertical-align: super; font-size: smaller; } small { font-size:smaller; }





/* kolory bazowe */

@brand-red:		#df0629;
@hover-red:		#c40000;
@border-grey:	#707070;
@border-light:	#ebebeb;
@brand-grey:	#f1f1f1;
@dark-grey:		#2b2b2c;
@txt-color:		#333333;





/* klasy zmienne */

.index (@ival: 10) {

	z-index: @ival;
}



.sekcja {

	position: relative;
	width:990px;
	float:left;
}





/* basic */

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



#bg {

	background: @brand-red;
	position: relative;
	margin-top: 156px;
	width: 100%;
	height: 250px;
	float: left;
	.index;
	}

	#bg-border {

		position: relative;
		border-bottom: 1px solid #707070;
		float:left;
		width:100%;
		height:1px;
		.index;
	}

.radius (@radius: 3px) {

	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

.middle {

	position: relative;
	margin: 0 auto;
	padding:10px 0 0 0;
	width:990px;
	min-height: 620px;
	.index(20);
}

.content {

	background: @brand-grey;
	float:left;
	position: absolute;
	width:100%;
	height: auto;
	.index(20);
}

#bottom {

	background: #fff;
	height:30px;
	.sekcja;
}

a {

	color: @brand-red;
}

a:hover {

		color: @hover-red;
		text-decoration: underline;
	}








/* header */

header {.sekcja;}

#logo {

	float: left;
	margin: 18px 0 0 25px;
}

#logo:hover {

	opacity:.7;
}

#slogan {

	text-transform: uppercase;
	position: absolute;
	top:31px;
	right:27px;
}







/* górna nawigacja */

nav {

	background: @brand-red;
	margin-top:16px;
	height:19px;
	.sekcja;

	ul {float:right; margin-right:12px;}
	li {float:left;}

	a {

		color: #fff;
		line-height:1.2em;
		text-transform: uppercase;
		font-weight:bold;
		padding: 0 15px;
	}

	a:hover {

			background: @hover-red;
			text-decoration: none;
			color: #fff;
		}
}







/* flagi */

#flags {

	position: absolute;
	top:135px;
	left:27px;
	background: url('../images/flags.png') 0 0 no-repeat;
	width: 47px;
	height: 21px;
	.index(30);

	li {

		float:left;
		margin:0 3px 0 0;

		a {

			display: block;
			width:20px;
			height:20px;
		}
	}
}







/* slideshow + topimg */

#slideshow {

	position: absolute;
	top:145px;
	width:334px;
	height:251px;
	overflow:hidden;
}

#topimg {

	float:right;
}









/* article */

article {

	margin:20px 0;
	font-size:11px;
	line-height: 1.3em;
	.sekcja;

	aside {

		float:left;
		margin: 0 40px;

		address {

			font-style: normal;
			position: absolute;
			bottom:0;
			left:20px;
		}

		.baner {

			float: left;
			margin: 15px 0 0 -5px;
		}
	}

	#lid, #main, #gallery {

		float:right;
		width: 656px;

		p {

			margin:0 10px 10px 5px;
		}
	}
}







/* footer */

footer {

	.sekcja;
	padding-bottom:10px;
	border-top: 1px solid @border-grey;

	.baner {

		float:left;
		margin-left:35px;
	}

	#red-label {

		float:right;
		width:656px;
		height:19px;
		margin:3px 0;
		background: @brand-red;
	}

	a {

		float:right;
		clear:right;
		font-size:10px;
		color: #333;
		margin:8px 35px 0 0;

		strong {

			text-transform: uppercase;
		}
	}
}













/* ZMIANA LAYOUTU DLA PODSTRONY */

.sub {

	#bg {

		height: 143px;
		margin-top: 99px;
	}

	#bg-border-t {

		position: absolute;
		top:97px;
		border-top: 1px solid #707070;
		float:left;
		width:100%;
		height:2px;
		.index;
	}

	header {

		height: 270px;
		background: url('../images/subheader.jpg') 0 83px no-repeat;

		#logo {

			float: left;
			margin: 6px 0 0 25px;
		}

		#slogan {

			top:13px;
			right:27px;
		}

		nav {

			margin-top:6px;
		}

		#flags {

			top:280px;
		}

		#slideshow {

			top:89px;
			height:176px;
			width:334px;
			overflow:hidden;
		}
	}

	aside {

		margin: 113px 30px 0 30px;
	}

	#lid, #main, #gallery {

		width: 615px;

		p {

			margin:0 20px 10px 5px;
		}
	}

	h1 {

		text-transform: uppercase;
		font-size:16px;
		color: @txt-color;
		float:left;
		width:500px;
		margin:-33px 0 0 320px;
	}
}











/* if opera */



.opera {

	nav ul {

		margin-top:1px;
	}
}











/*
	ZMIANA LAYOUTU DLA STRONY OFERTY
*/

.oferta {

	#karuzela {
		float:left;
		clear: left;
		width:990px;
		height:320px;
	}

}

.oferta h1 {

	margin-left: 370px;
}








/*
	style galerii
*/

@li-margin: 5px;
@galthumb: 130px;

#gallery li {float:left; margin: @li-margin;}
#gallery img {width: @galthumb;}

#gallery a:hover img {

	opacity: .8;
}





/*
		formularz
*/

/* ------------------------ >  FORM  < ------------------------ */

#kontakt {float:left; clear:left; margin:20px 0; width:94%; border-top:1px dashed #6b6b6b; padding-top:15px;}
#kontakt fieldset {float:left; margin:10px 10px 0 0;}

#kontakt legend {font: bold 12px/1 Arial, sans-serif; float:left; clear:left; color: #cc0000; width:100%;}

#kontakt label, #kontakt input, #kontakt textarea
{
	float:left; clear:left; width:200px; padding:3px;
	font: 12px/1.2 Arial, sans-serif;
}

#kontakt span {clear:left; float:left;}

#kontakt input, #kontakt textarea, #kontakt button
{
	border:1px solid #999; color:#333; background: #fff;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	 border-radius:5px;

	 margin:2px 0;
}
#kontakt .short {width:130px;}
#kontakt img {float:left; margin-left:10px;}

#kontakt textarea {width:340px; height:155px;}

#kontakt button
{
	background: #cc0000;
	color:#fff; font: bold 12px/1 Arial, sans-serif; text-align:center;
	padding:5px 10px;
	float:left;
	cursor:pointer;
	margin-top:5px;
}

#kontakt #item0 {float:left; clear:left; width:98%;}
#kontakt #item2 {width:510px;}


.longlabel {width:340px !important;}
.error-input {background: #ffcece !important; border:1px solid #ff0000 !important;}
strong.error {float:left; width:250px; margin-left: 10px; padding-top:12px; color: #ff0000;}


#opis {

	float:left;
	width:100%;
	text-align:center;
	color: @brand-red;
	font-size:11px;
}