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

/*
		studiofabryka.pl
		mc, przedszkole nr 2 koscian, 19 gru 2011
*/




[sr-only] {display: none !important;}

/*
		--- 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: #fff; background: #4a6f82;}
::selection {color: #fff; background: #4a6f82;}

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

.font {font-family: 'CrescentNormal'; font-weight:normal;}

@color1: #6d6d6d;
@color2: #fc8a23;
@color3: #fc8a23;



/*
		--- Basic
*/

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

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

body { background: #5bb1d4 url(images/bg-repeater.jpg) top repeat-x; }
.bg { background: url(images/bg.jpg) top no-repeat; }



/*
		--- Header
*/

.home .top {
	height: 380px;
	background-image: url(images/chmury.png);
	background-repeat: repeat-x;
	background-position: top;
}

.sub .top {
	height:310px;
	background-image: url(images/chmury.png);
	background-repeat: repeat-x;
	background-position: top right;
}

.logotypes {
	position: absolute;
	top:-162px; left:-10px;
	z-index:50;

	width:524px; height:162px;
	background: url(images/logos-bg.png) 0 0 no-repeat;

	.logo1 {
		float:left;
		margin:5px 15px 0 15px;
	}
	.herbpl {
		float: left;
		margin: 25px 10px 0 0;
	}
	.logo2 {
		float:left;
		margin:21px 0 0 0;
	}

	.logo1, .logo2 {display: none;}
}

.sub .logotypes {
	.logo1 {
		float:left;
		margin:5px 25px 0 28px;
	}

	.herbpl {
		float: left;
		margin: 15px 10px 0 0;
	}
	.logo2 {
		float:left;
		margin:11px 0 0 0;
	}

	background: url(images/logos-bg.png) 0 -25px no-repeat;

	//width:451px; height:139px;
	//background: url(images/sub-logos-bg.png) 0 0 no-repeat;
}

.klocki {
	position: absolute;
	top:95px; left:0;
	z-index:30;
}

.sub .klocki {
	position: absolute;
	top:40px; left:0;
	z-index:30;
}

.slideshow {
	float:right;
	margin-right:-105px;
	overflow: hidden;
	width:599px; height:392px;
	position: relative;
	z-index:40;
}

.sub .slideshow {
	float:right;
	margin-right:-105px;
	width:420px; height:238px;
}

.home #smok {
	position: absolute;
	top:180px; left:190px;
	z-index:20;
	width: 193px; height:151px;
	background: url(images/smok-anim.png);
}

#deklaracja {
	position: absolute;
	top:30px; right:290px;
	z-index:99;
	width: 136px; height:41px;
	background: url(images/deklaracja.png);
	transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#deklaracja a {
	position: absolute;
	width: 136px; height:41px;
}

#deklaracja:hover {
	transform: rotate(5deg);
}

.sub #smok {
	z-index:20;
	position: absolute;
	top:130px; left:170px;
	width: 193px; height:151px;
	background: url(images/smok-anim.png);
}

#balony {
	position: absolute;
	top:200px; left:450px;
	z-index:10;

	width:73px; height:113px;
	background: url(images/balony.png) 0 0 no-repeat;
}

.sub #balony {
	top:80px; left:430px;
}

.bigfatclouds {
	position: absolute;
	z-index:50;
	bottom:0; left:0;
	width:100%;
	height:194px;
	background-image: url(images/middle-bg.png);
	background-repeat: repeat-x;
	background-position: top;
}


.grupy {
	position: absolute;
	top:273px; right:-10px;
	z-index:200;
	width:700px;

	h3 {
		.font;
		float:left;
		color: #265996;
		font-size:21px;
		margin:60px 10px 0 0;
		text-transform: uppercase;
	}

	a {
		float:left; position: relative;
		transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-webkit-transition: all .3s ease-out;

		&:hover {
			background-position: 0 5px;
		}
	}

	.grupa-1 {background: url(images/krasnale.png) 0 0 no-repeat; width: 69px; height:99px; margin-top:2px;}
	.grupa-2 {background: url(images/puchatki.png) 0 0 no-repeat; width: 79px; height:104px; margin:14px 5px 0 -3px;}
	.grupa-3 {background: url(images/zajaczki.png) 0 0 no-repeat; width: 76px; height:108px; margin-top:7px;}
	.grupa-4 {background: url(images/biedronki.png) 0 0 no-repeat; width: 70px; height:100px; margin:-5px 3px 0 5px;}
	.grupa-5 {background: url(images/bocianki.png) 0 0 no-repeat; width: 78px; height:98px; margin:7px 5px 0;}
	.grupa-6 {background: url(images/motylki.png) 0 0 no-repeat; width: 71px; height:101px; margin-top:5px;}
	.grupa-7 {background: url(images/wiewiorki.png) 0 0 no-repeat; width: 73px; height:100px; margin:0 5px 0 0;}
}

.sub .grupy {
	top:203px;
}





/*
		--- middle
*/

.middle {
	background: white;
	min-height:400px;
	z-index:190;
}

article {padding-top:20px;}

.nav {
	float:left;
	width:220px;

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

	li {
		float:left;
		clear:left;
		width:100%;
	}

	.lvl1 > li.current > a,
	.lvl1 > li:hover > a {
		background: url(images/menu-lvl1-hover.png) 0 0 no-repeat;
		color:white;
	}

	.lvl1 > li > a {
		.font;
		color: #265996;
		font-size:21px;
		line-height:1.6em;
		padding:0 0 0 22px;
		float:left;
		display: block;
		width:164px; height:36px;
		background: url(images/menu-lvl1-bg.png) 7px 11px no-repeat;
	}

	.lvl2 {
		margin:0 0 5px 38px;
		width:150px;
	}

	.lvl2 > li > a {
		color: #265996;
		font-size:12px;
		font-weight:bold;
		//float:left;

		&:hover {color: #cc0000;}
	}

	.lvl2 > li {
		list-style: disc outside;
		font-size:12px;
		line-height:1.3em;
		color: #cc0000;
	}
}

.sections {
	float:left;
	width:485px;

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

.sub .sections {
	float:left;
	width:720px;

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

.home{
	section, .col {
		h1, h2, h3 {
			color: #cc0000;
			.font;
		}

		h4 {
			.font;
			font-size:24px;
			color: #cc0000;
			margin-bottom:5px;
			text-shadow:2px 2px 1px #d8d8d8;
		}
	}
}

.home section, .home .col {
	h1 {font-size:30px; margin-bottom:.2em;}
	h2 {font-size:36px; margin: .6em 0 .2em;}
	h3 {font-size:30px; margin-bottom:.2em;}
}

.newsarch h4 {
		.font;
		font-size:24px;
		color: #cc0000;
		margin-top:0 !important;
		margin-bottom:5px !important;
		text-shadow:2px 2px 1px #d8d8d8;
	}
	.main > img {
		float:left;
		margin-right:10px;
		border:4px solid #FFAA00;

		.border(10px);
	}

	.back {
		float:right;
		margin:.5em 0;
		.font;
		font-size:18px;

		transition: padding .2s;
		-o-transition: padding .2s;
		-moz-transition: padding .2s;
		-webkit-transition: padding .2s;

		&:hover {padding-right:5px;}
	}

.sub .sections {
	h1 {
		font-size:30px;
		margin:.3em 0 .5em 0;
	}

	h1, h2, h3, h4, h5 {
		.font;
		color:#cc0000;
	}

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

	p, ul, ol {padding-bottom:1em;}

	section ul li {
		list-style-image: url(images/li-bullet.png);
		list-style-position: outside;
		margin:0 0 5px 35px;
	}

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

	a {color: #265996; &:hover {color: #163458;}}

	.lid > img {
		float:left;
		margin-right:10px;
		.border(10px);
		border:5px solid #FFAA00;
	}
}

.main, .news, .col {
	p, ul {
		font-size:14px;
		line-height:1.5em;
		color:#444;
	}
}

.news {
	float:left;
	width:100%;
	margin:0 0 5px 0;
	img {
		float:left;
		.border(20px);
		margin:5px 5px 30px 0;
		padding:8px 10px 5px 6px;
		background: url(images/news-img-bg.png) 0 0 no-repeat;
	}

	p {padding-bottom:.5em !important;}

	h4 {margin:.2em 0 !important;}

	small {
		color: #444;
		font-size:9px;
	}
}

.more {
	float:right;
	margin:.2em 0;
	color:#cc0000;
	font-size:14px;
	.font;
	padding-right:14px;
	background: url(images/more.png) right no-repeat;

	&:hover {
		color:#950000;
	}
}

.news-arch {
	background: url(images/arch.png) 0 2px no-repeat;
	font-size:14px;
	color:#265996;
	.font;
	padding:4px 0 4px 22px;

	&:hover {
		color:#16355a;
	}
}

.arch {

	.news {
		border-top:1px dashed #ccc;
		padding:5px 0;
	}
}



.col {
	float:left;
	width:200px;
	margin-left:35px;

	.atuty {
		float:left;
		margin-bottom:15px;

		li {
			list-style-image: url(images/li-bullet.png);
			list-style-position: outside;
			margin:0 0 5px 20px;
		}
	}

	.gallery-info {
		img {
			float:left;
			.border(20px);
			padding:13px 10px 10px 9px;
			background: url(images/gal-min-bg.png) 0 0 no-repeat;
			margin-bottom:5px;
		}
	}
}




/*
		--- footer
*/

.bottom {
	height:177px;
	background: url(images/bottom-bg.jpg) top no-repeat;
}

.madeby {
	float:right;
	margin:145px 0 0 0;

	img {float:left;}

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







/*
		--- Gallery
*/

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

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

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

		width:169px;
	}

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

	a {
		float:left;
		display:block;
	}

	img {
		border:0;
		padding:0;
		float:left;
		border:0;
		display:block;

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

		width:163px;
		.border(10px);
		border:3px solid #FFAA00;
	}

	a:hover img {
		opacity:.8;
		filter:alpha(opacity=80);
	}

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

.gi {
	li {width:200px;}
	img {width:auto;}

	a {float:left; clear: both;}

	strong {
		float:left;
		width:100%;
		line-height: 1.3em;
		padding:3px 0;
		font-size:12px;
		text-align:center;

		color: #265996;
		font-size: 12px;
		font-weight: bold;
	}

	span {
		float:left;
		line-height: 1.3em;
		font-size:11px;
		text-align: left;
		color: #999;
		padding:2px 7px;
	}
}






/*
		--- 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:right;
	margin-top:15px;
	padding-top:15px;
	width:622px;

}

#contact-form {
	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 *1.5;
			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 {
	float:left;
	margin-top:10px;
	padding-top:5px;
	border-top:1px dashed #ccc;

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

	a {
		font-size:16px;
		color: @color1 !important;
		font: normal 13px/1.25 Tahoma, arial, sans-serif;

		&:hover {
			color: #fc8a23 !important;
		}
	}

	.typPliku {color:#999;}
}





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









/* paginator */

#pages-container {
	float: right;
	width: 375px;
	background: white;
	box-shadow: 0 1px 0 rgba(0,0,0,.1);
}

.jPaginate{
    height:34px;
    position:relative;
    color:#a5a5a5;
    font-size:small;
	width:100%;
}
.jPaginate a {
    line-height:34px;
    height:34px;
    cursor:pointer;
    padding: 0 10px !important;
    margin:0 2px;
    float:left;
	text-decoration: none !important;
}
.jPag-control-back {
	position:absolute;
	left:0px;
}
.jPag-control-front{
	position:absolute;
	top:0px;
}
.jPaginate span {
    cursor:pointer;
}
ul.jPag-pages{
    float:left;
    list-style-type:none;
    margin:0px 0px 0px 0px;
    padding:0px;
}
ul.jPag-pages li{
    display:inline;
    float:left;
    padding:0px;
    margin:0px;
}
ul.jPag-pages li a {
    float:left;
    padding:2px 5px;
}
span.jPag-current {
    cursor:default;
    font-weight:normal;
    line-height:34px;
    height:34px;
    padding: 0 10px;
    margin:0 2px;
    float:left;
}
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-next,
span.jPag-sprevious,
span.jPag-snext,
ul.jPag-pages li span.jPag-previous-img,
ul.jPag-pages li span.jPag-next-img,
span.jPag-sprevious-img,
span.jPag-snext-img{
    height:34px;
    margin:0 2px;
    float:left;
    line-height:26px;
}

ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-previous-img{
    margin:2px 0px 2px 2px;
    font-size:12px;
    font-weight:bold;
    width:10px;

}
ul.jPag-pages li span.jPag-next,
ul.jPag-pages li span.jPag-next-img{
    margin:2px 2px 2px 0px;
    font-size:12px;
    font-weight:bold;
    width:10px;
}
span.jPag-sprevious,
span.jPag-sprevious-img{
    margin:2px 0px 2px 2px;
    font-size:18px;
    width:15px;
    text-align:right;
}
span.jPag-snext,
span.jPag-snext-img{
    margin:2px 2px 2px 0px;
    font-size:18px;
    width:15px;
     text-align:right;
}
ul.jPag-pages li span.jPag-previous-img{
    background:transparent url(../images/previous.png) no-repeat center right;
            }
ul.jPag-pages li span.jPag-next-img{
    background:transparent url(../images/next.png) no-repeat center left;
            }
span.jPag-sprevious-img{
    background:transparent url(../images/sprevious.png) no-repeat center right;
            }
span.jPag-snext-img{
    background:transparent url(../images/snext.png) no-repeat center left;
            }








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