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


/*
		studiofabryka.pl
		mc, globes, 23 lis 2011
*/






/*
		--- classes, constants
*/

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

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

::-moz-selection {color: white; background: #336699;}
::selection {color: white; background: #336699;}

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

.font-r {font-family: 'BankGothicLtL2Light'; font-weight: normal; text-transform: uppercase; }
.font-m {font-family: 'BankGothicMdBTMedium'; font-weight: normal; text-transform: uppercase; }


/* colors */

@color1: #333333; /* text, ciemny szary*/
@color2: #333; /* nagłówki */
@color3: #336699; /* dodatki - niebieski */
@color4: #1c3855; /* hovery */






/*
		--- Basic
*/

header, article, footer, .top, .bottom {.full;}

.home .top {
	background: white url(images/topbg-home.jpg) top no-repeat;
	min-height:696px;
}

.sub .top {
	background: white url(images/topbg-sub.jpg) top no-repeat;
	min-height:573px;
}

.bottom {
	background: white url(images/footer.jpg) top no-repeat;
	min-height:300px;
}

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







/*
		--- Typography
*/

#lid {margin-top:-5px;}

h1, h2, nav a {
	.font-r;
}

h1 {font-size:28px;}
h2 {font-size:23px; font-weight: normal !important;}
h3 {font-size:19px;}

section {

	h2:first-child, h3:first-child, h4:first-child, h5:first-child {
		margin-top:0;
	}

	h2, h3, h4, h5 {
		margin:1em 0 .5em;
		color:@color3;
		text-transform: none;
		font-family: Tahoma, arial, sans-serif;
	}
	h2 {font-size:20px; font-weight:bold;}
	h3 {font-size:18px; font-weight:normal;}
}

h4, h5 {
	color: @color3;
}
h4 {font-size:15px;}
h5 {font-size:13px;}

article a {color:@color3;}
article a:hover {color:@color4;}

article p, article ul, article ol {
	font-size:12px;
	line-height:1.3em;
	padding:0 0 1em 0;
}

article ul li {
	margin-left:30px;
	list-style: disc outside;
}
article ol li {
	margin-left:35px;
	list-style: decimal outside;
}

.slideshow {
	.font-m;
	color:@color3;

	strong {font-size:45px; float:left; width:100%; text-align:left;}
	span {font-size:30px; float:right; width:100%; text-align:right;}
}



nav .lvl1 > li > a {
	font-size:16px;
	color:@color1;
}

nav .lvl2 > li > a {
	font-size:14px;
	color: white;
}

nav .lvl3 a {
	font-size:12px;
	color: white;
}





/*
		--- Header
*/

header {height:420px;}
.sub header {height:290px;}

.logo {
	float:left;
	clear:left;
	margin-top:30px;
}

.slideshow {
	width:460px;
	height:75px;
	float:left;
	clear:left;
	overflow:hidden;
	margin:30px 0 50px 0;
}

nav {
	float:right;
	margin-top:30px;
}

.sub nav {
	float:right;
	margin-top:20px;
}

nav .lvl1 > li {
	float:left;
	margin:0 5px;
}

nav .lvl1 {
	.sub-open {
		a {background: #333; color:white;}
	}
}

nav li {
	position: relative;
}

nav .lvl1 > li > a {
	padding:3px 8px;
}

nav .lvl1 > li > a:hover,
nav .lvl1 > li.current > a {
	color: @color3;
	background: white;
}

nav .lvl2 {
	position: absolute;
	top:20px;
	left:0;
	width:190px;
	background: #333;

	li {
		float:left;
		clear:left;
	}

	> li > a {
		padding:5px;
		float:left;
		clear:left;
		width:180px;
		border-top:1px solid #1a1a1a;

		&:hover {
			background:@color3;
		}
	}

	> .sub-open a {background: #444;}
}

nav .lvl3 {
	position: absolute;
	top:0;
	right:-160px;
	width:160px;

	li {
		float:left;
		clear:left;
	}

	a {
		padding:6px 5px;
		float:left;
		clear:left;
		width:150px;
		background: #444 !important;
		border-top:1px solid #303030;

		&:hover {
			background:@color3 !important;
		}
	}
}




/*
		--- Article
*/

aside {float:right;}
aside {
	width:409px;
	margin-left:21px;
}

.sub aside {
	width:204px;
	margin-left:0;
}

section {
	float:left;
	width:525px;

	img {float:left; margin-right:10px;}
}

.sub section {
	width:750px;
}

section > h1,
aside h2 {
	padding-bottom:3px;
	margin-bottom:10px;
	border-bottom:1px solid #c2d1e1;
}

#news {
	width:194px;
	float:left;
}

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

	small {font-size:9px;}

	h3 {margin-bottom:.5em; color: @color3; font-size:15px;}

	p {
		padding-bottom:.3em;
	}
}

.more {
	float:right;
	font-size:11px;
	padding-right:1em;
	background: url(images/arrow.jpg) right 2px no-repeat;
}

.newsarch {
	float:left;
	font-size:11px;
	margin-top:5px;
	padding:5px 0 5px 20px;
	background: url(images/arch.jpg) 0 4px no-repeat;
}

.sub #news {
	width:750px !important;
	h3 {margin-top:.2em !important;}

	.news {margin-bottom:1.5em;}
}

address {
	border-top:1px solid #c2d1e1;
	float:left;
	font-style:normal;
	font-weight:bold;
	color:@color3;
	margin-left:18px;
	margin-top:26px;

	p {
		font-size:14px;
		margin:0 0 17px 58px;
	}

	p:first-child {margin-top:10px; margin-bottom:10px;}
}

.sub address {font-weight:normal; p {margin-left:50px;}}





/*
		--- footer
*/


.madeby {
	float:right;
	margin:10px 0 0 0;
	color: white;

	img {float:left;}

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







/*
		--- Gallery
*/

.gallery {
	margin-top:15px;
	float:left;

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

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

	img {
		float:left;
		border:0;
		padding:0;
	}

	a:hover img {
		opacity:.9;
		filter:alpha(opacity=90);
	}

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

.gi {

	strong {
		position: absolute;
		bottom:0px;
		left:0;
		width:100%;
		font-size:12px;
		text-align:center;
	}

	li {height:100px;}
}






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

	tr:first-child td {
		font-weight:bold;
		border:1px solid #aaa;
	}

	tr:hover td {background: white;}
}

#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;
	width:96%;
	margin-top:15px;
	padding-top:15px;

}

#contact-form {
	float:right;
	width:100%;
	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;
			font-size:12px;
			padding:3px;
		}

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

			.border(5px);
		}

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

		#contact-form button {
			float:right;
			background: @color2;
			color: white;
			font-size:13px;
			font-weight:bold;
			padding:5px 10px;
			.border(5px);
		}

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

		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 {
	margin:10px 0;
	float:left;
	padding-top:10px;
	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.jpg) 0 4px no-repeat;
	}

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

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

	.typPliku {color:#999;}
}




/*
		--- Akordeon na głównej
*/

.home #main h2 {
	color:white;
	font-weight:normal;
	font-size:14px !important;
	background: @color3;
	padding:5px;
	cursor: pointer;

	.border(3px);

	&:hover {
		background: @color3 /1.1;
	}

	em {
		float:right;
		font-size:12px;
		color:#8EB9E5;
		font-style: normal;
	}
}

.home #main div {
	background: #f5f5f5;
	padding:5px;
	.border(3px);
}





/* formularz rejestracyjny */

form.full {
	fieldset {width: 100%;}

	input {width: 50%;}

	.medium {width: 30%;}
	.short {width: 12%;}
	.vshort {width: 5%;}

	span {
		width: 190px;
		border-bottom: 1px dashed #eee;
	}

	.longlabel, .fc {
		span {border:0; width: auto;}
	}

	.longlabel {margin-top: 1em;}

	.checkboxes {
		
		margin:1em 0;

		input {
			float: left;
			width: auto;
			margin-right: 5px;
		}
	}

	.important {
		color: #336699;
	}

	h4 {
		float: left;
		width: 100%;
		font-size: 14px;
		margin:1em 0;
	}

	.hidden {display: none;}
}




a[href="Szkolenia.html"] {
	color: #477FB7 !important;
}