@import url('prettyPhoto.css');

/*
		studiofabryka.pl
		mc, gardens, 12 aug 2011
*/






/*
		--- 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, li { 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; }







/*
		--- BASIC
*/

body {
	font-family: Georgia, times, serif;
	background: url(../images/bg.jpg) top no-repeat;
}

#content {
	margin: 0 auto;
	width:990px;

	#top {
		background: url(../images/content-top.png) top no-repeat;
		height:30px;
		.fullFloat;
	}

	#middle {
		background: url(../images/content-middle.png) top repeat-y;
		min-height:500px;
		.fullFloat;
	}

	#bottom {
		background: url(../images/content-bottom.png) top no-repeat;
		height:54px;
		.fullFloat;
	}
}

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

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


/* colors */

@brand-green: #006838;
@dark-green: #324600;
@brand-orange: #ff7e22;
@light-orange: #edbe87;
@border: #9ba15d;









/*
		--- Header
*/

#logo {
	float:left;
	margin:15px 0 0 18px;
}

.slogan {
	float:right;
	margin:5px 25px 0 0;
}

header {
	.fullFloat;
	height:78px;
	background: url(../images/border.png) bottom no-repeat;

	nav {
		float:right;
		clear:right;
		width:610px;
		margin:8px 8px 0 0;

		li {
			float:left;
			position: relative;
			border-left: 1px solid @light-orange;
			line-height:1.7em;
			padding:0 10px;

			a {
				font-weight:bold;
				font-style:italic;
				font-size:14px;
				color:@brand-green;
				background: url(../images/bullet.png) 10px 5px no-repeat;
				padding:4px 10px 4px 30px;

				.border(15px);
			}
		}

		li:first-child {border:0;}

		a:hover, .hit a {
			background-color: @brand-green;
			color: #fff;
		}

		.subopen {
			color:white;
			background-color: @brand-green;
			border-radius: 15px 15px 0 0;
			-moz-border-radius: 15px 15px 0 0;
			-webkit-border-radius: 15px 15px 0 0;
		}

		.lvl2 {
			display:none;
			width:180px;
			position: absolute;
			top:26px; left:0;
			z-index:100;
			background:@brand-green;
			.border(15px);

			li {
				width:100%;
				padding:0;
				border-left:0;
				border-top:1px solid @dark-green *2;
			}

			li:first-child {border:0;}

			a {
				background: none;
				color: white;
				font-size:12px;
				padding:0 10px;
				width:160px;
				float:left;
				font-weight:normal;
				.border(0px);
			}

			li:first-child a {
				border-radius:15px 15px 0 0;
				-moz-border-radius:15px 15px 0 0;
				-webkit-border-radius:15px 15px 0 0;
			}

			li.last a {
				border-radius:0 0 15px 15px;
				-moz-border-radius:0 0 15px 15px;
				-webkit-border-radius:0 0 15px 15px;
			}

			a:hover {
				background: @brand-orange;
				color: @brand-green;
			}

		}
	}

}






/*
		--- Article
*/

article {
	.fullFloat;
	margin:18px;
	width:955px;
}

#slideouter {
	border:1px solid @border;
	float:left;
	margin-right:10px;
	width:475px; height:453px;
	.border;
}

#slideshow {
	float:left;
	position: relative;
	overflow: hidden;
	width:469px; height:447px;
	border:3px solid white;
	background:white;
	.border;

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



h1 {
	color: @brand-green;
	font-weight:bold;
	font-style:italic;
	font-size:23px;
	padding-bottom:.5em;
}

h4 {
	color: @brand-green;
	font-weight:bold;
	font-style:italic;
	font-size:14px;
	padding:.3em 0;
}



p, #main ul, td {
	font-size:13px;
	line-height:1.4em;
	color: @dark-green;
	padding-bottom:1em;
}

td {padding:10px;}

#main ul li {
	background: url(../images/bullet.png) 0 2px no-repeat;
	margin-left:25px;
	padding-left:23px;
}

p a, td a {
	color: @brand-green;
	text-decoration: underline;

	&:hover {color: @dark-green *2;}
}










/*
		--- Gallery
*/

.sub .gallery {
	li {margin-left:8px;}
	li:first-child {margin:0;}

	ul {margin-bottom:8px;}
}

.gallery {

	li {
		float:left;
		margin-left:6px;
	}

	ul {
		float:left;
		margin-bottom:7px;
	}

	li:first-child {margin:0;}

	a {
		float:left;
		.border;
		border:1px solid @border;
	}

	img {
		float:left;
		.border;
		border:2px solid white;
	}
}

.currentTextHolder {
	font:normal 12px/1.1 Tahoma, arial, sans-serif;
	margin-right:8px !important;
	color: #999;
}

.gi {
	li {
		width:228px;
		margin-left:12px !important;
	}

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

	ul {margin-bottom: 20px !important;}

	strong {
		width:100%;
		float:left;
		padding-top:5px;
		text-align:center;
		color:@brand-green;
		font-style:italic;
		font-size:14px;
	}
}






/*
		--- bottom
*/

#realizacja {
	float:right;
	margin:25px 10px;
	color:#333;

	strong {
		float:left;
		padding:0 5px 0 0;
		font:normal 11px/1.3 tahoma, sans-serif;
	}
}








/*
		--- Formularz
*/

#contact-form {
	width:460px;
	float:left;
	margin-top:20px;
	}
	fieldset {
		float:left;
		width:60%;
	}
	fieldset:first-child {width:40%;}
	.subject {display:none;}
	label {
		float:left;
		width:100%;
		margin:3px 0;
		}
		label span {
			float:left;
			width:100%;
			color: @dark-green;
			font-size:12px;
			padding:3px;
		}

		label input, textarea {
			float:left;
			width:90%;
			padding:3px 6px;
			border:1px solid @brand-orange*1.5;

			.border(5px);
		}

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

		form button {
			float:left;
			background:#FE620F;
			color: #fff;
			font-size:13px;
			font-weight:bold;
			padding:5px 10px;
			.border(5px);
		}

		form #error,
		form #ok {
			display:none;
			float:left;
			padding:7px 10px;
			.border(5px);
			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;
		}



.narrow {
	width:465px;
	float:left;
}