/*

		studiofabryka.pl
		mc, 21-01-2014

 */

@import '../fancybox/fancy.css';
@import 'fonts/stylesheet.css';


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


.font {
	font-family: 'open_sansregular';
	font-weight: normal;
	font-style: normal;
}

.fontb {
	font-family: 'open_sans_condensedbold';
	font-weight: normal;
	font-style: normal;
}

.fontc {
	font-family: 'open_sanslight';
	font-weight: normal;
	font-style: normal;
}


.border-radius (@radius) {
	border-radius: @radius;
	-o-border-radius: @radius;
	-ms-border-radius: @radius;
}

.transition (@time: .2s) {
	transition: all @time;
	-o-transition: all @time;
	-ms-transition: all @time;
	-moz-transition: all @time;
	-webkit-transition: all @time;
}
 
@color1:    #ed7d1b;
@txtcolor:  #5b5b5b;
@menucolor: #5b5b5b;

@orange:       #ed7d1b;


@width:     952px;
@list-style: square;




body {
	background: url(../images/bg.jpg) fixed center 151px no-repeat;
	.font;
	font-size: 14px;
	line-height: 21px;
	color: @txtcolor;
}

.bg {
	float: left;
	width: 100%;
	overflow: hidden;
	min-height: 980px;
}

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

header, article, footer {
	float: left;
	width: 100%;

	position: relative;
	z-index: 10;
}

body.kontakt {
	.main {
		float: left;
		width: 260px;
	}

	.map {
		float: left;
		margin: 0 15px;

		iframe {
			width: 330px;
			height: 310px;
		}

		a {color: #ff3300 !important;}
	}

	.form {
		float: right;
	}
}


h1, h2, h3, h4, h5, h6 {
	.font;
	color: darken(@txtcolor, 20%);
}





/* header */

header {z-index: 1000;}

.logo {
	float: left;
	margin: 40px 0 0 0;
	.transition;

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

nav {
	
	position: fixed;
	top:0; left:0;
	width: 100%;
	z-index: 2000;
	height: 151px;
	background: url(../images/top.jpg) top repeat-x;
	.transition;

	.lvl1 > li,
	.lvl1 > li > a {
		float: left;
	}

	.lvl1 {
		float: right;
		margin-top:45px;
	}

	.lvl1 > li {
		list-style: none outside;
	}

	.lvl1 > li > a {
		.font;
		margin: 0 !important;
		padding: 0 15px;
		line-height: 1.4em !important;
		color: @menucolor;
		font-size: 16px;
		text-transform: uppercase;

		.transition;
		text-align: center;

		text-shadow: 0 5px 3px #ddd;

		img {
			.transition(.5s);
			margin: 0 auto;
		}
	}

	.lvl1 > li > a:hover {
		margin-top:5px !important;
		color: lighten(@menucolor, 10%);
		text-shadow: 0 1px 1px #eee;

		img {
			transform: rotate(10deg);
			-o-transform: rotate(10deg);
			-ms-transform: rotate(10deg);
			-moz-transform: rotate(10deg);
			-webkit-transform: rotate(10deg);

			opacity: .8;
			filter:alpha(opacity=80);
		}
	}

	.lvl1 > .current > a {
		color: @orange;

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


.fixed {
	position: fixed;
	top: 210px;
	z-index: 10;
	width: 488px;

	.motto, .info {
		float: left;
		clear: left;
		margin-bottom: 1.8em;
	}

	.motto {
		margin-top: 0;
		width: 430px;

		.topquotes {
			float: left;
			margin: -25px 0 0 0;
		}

		h1 {
			float: left;
			.fontc;
			color: white;
			font-size: 20px;
			line-height: 1.2em;
			margin-bottom: 1em;
			text-transform: none;
			text-align: right;
		}

		h2 {
			float: right;
			text-align: right;
			.font;
			color: white;
			font-size: 26px;
		}

		.bottomquotes {
			float: right;
			margin: 30px -23px 0 4px;
		}
	}

	.info {
		cursor: pointer;
		h2 {
			color: white;
			font-size: 20px;
			text-transform: uppercase;
			margin: 0 0 15px;
			.font;
		}

		p {
			color: white;
			font-size: 14px;
			line-height: 24px;
		}
	}
}

.more {
	float: right;
	font-size: 11px;
	color: @color1;
	padding-right: 23px;
	background: url(../images/more.png) right center no-repeat;
	.transition;

	&:hover {
		padding-right: 25px;
		margin-right: -2px;
		opacity:.9;
	}
}



/* article */

.maincontent {
	float: left;
	width: 100%;
	position: relative;
	z-index: 900;
	background: white;
	margin-top: 578px;
}

article {
	padding: 1.7em 0;
	min-height: 197px;
}


h1 {
	float: left;
	width: 100%;
	text-align: center;
	text-transform: uppercase;

	color: @txtcolor;
	font-size: 20px;
	.font;

	span {
		padding: 0 25px;
		background: white;
		z-index: 20;
		position: relative;
	}
}

hr.undertitle {
	float: left;
	height: 1px;
	border:0;
	width: 100%;
	border-bottom: 1px solid #ccc;

	margin: -10px 0 50px;
	position: relative;
	z-index: 10px;
}


.slideshow {
	.prev, .next {
		position: absolute;
		top: 40%;
		cursor: pointer;
		z-index: 5000;
		.transition;
	}

	.prev {
		left:0;
		&:hover {
			left:-3px;
		}
	}

	.next {
		right:0;
		&:hover {
			right:-3px;
		}
	}

	.slides {
		float: left;
		width: 100%;
	}

	.slide {
		float: left;
		width: 872px !important;
		margin: 0 40px;
	}

	.box {
		float: left;
		width: 187px;
		text-align: center;

		margin: 0 51px;

		&:hover {
			opacity:.8;
		}

		h3 {
			color: #3b3b3b;
			font-size: 14px;
			text-transform: uppercase;
			margin: .5em 0;
		}

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

		.more {
			float: none;
		}
	}

	.slidepager {
		float: left;
		width: 100%;
		margin-top: 10px;
		text-align: center;
		position: relative;
		z-index: 20;

		a {
			font-size: 0px;
			display: inline;
			padding: 10px;
			background: white url(../images/slidepage.png) center center no-repeat;
			.transition(.5s);

			&:hover {
				opacity:.7;
			}
		}

		.activeSlide {
			background: white url(../images/activepage.png) center center no-repeat;
		}
	}

	hr.underpager {
		float: left;
		height: 1px;
		width: 100%;
		border:0;
		position: relative;
		z-index: 10;
		margin: -10px 0 5px;
		border-bottom: 1px solid #ccc;
	}
}




/* footer */

footer {
	float: left;
	width: 100%;
	height: 175px;
	z-index: 1000;
	background: url(../images/bottom.jpg) bottom repeat-x;

	address {
		float: left;
		width: 100%;
		text-align: center;
		font-style: normal;
		color: white;
		font-size: 14px;
		.font;

		margin: 25px 0 40px;

		span, a {
			color: white;
		}

		span {margin: 0 10px;}

		a:hover {text-decoration: underline;}
	}

	.madeby {
		float: right;
		margin: 0 auto;
		//width: 148px;
		display: block;

		strong, img {
			float: left;
		}

		strong {
			font-weight: normal;
			font-size: 10px;
			color: #333;
			line-height: 1em;
			margin: 3px 3px 0 0;
		}

		img {.transition;}

		&:hover {
			img {opacity: .8;}
		}
	}
}





/* other */

section {
	p, ul, ol {
		margin-bottom: 1em;

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

	ul li {
		list-style: @list-style outside;
		margin-left: 30px;
		color: @orange;

		>span.litxt {color: @txtcolor;} 

		ol, ul {padding: .3em 0;}

		ul li {
			margin-left: 20px;
			color: darken(@txtcolor, 20%);

			ul li {
				color: darken(@txtcolor, 50%);
			}
		}
	}

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

		ol, ul {padding: .3em 0;}

		ol li {
			margin-left: 23px;
			list-style: lower-latin outside;
			color: darken(@txtcolor, 20%);

			ul li {
				list-style: @list-style outside;
				color: darken(@txtcolor, 50%);
			}
		}
	}

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

	h2 {font-size: 19px;}
	h3 {font-size: 17px;}
	h4 {font-size: 15px;}
	h5 {font-size: 13px;}
	h6 {font-size: 11px;}
}





/* gallery */

.gallery {

	ul, li, a, img {
		float: left;
	}

	ul {
		clear: left;
		width: 100%;
		margin:0;
	}

	li {
		margin: 0 0 14px 14px;
		list-style: none;
	}

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

	img {
		max-width: 225px;
		border: 1px solid #d9d9d9;
	}

	a {
		.transition;

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



/* list of files to download */

.download {
    float: left;
    
    .plik{
		display:none;
		color: lighten(@txtcolor, 20%);
	}
    a:hover {text-decoration: none;}
}

.type_text {.plik{display: inline;}}

.type_icons {

    li {
    	list-style: none !important; 
    	margin:4px 20px !important;
    }

    a {
		color: @txtcolor !important;
		text-decoration: none !important;
		padding:1px 0 2px 23px;
		background: url(../images/modules/download/page_white.png) 0 0 no-repeat;

		&:hover {color: @color1 !important;}
    }

    // icons
    .pdf {background: url(../images/modules/download/acrobat.png) 0 0 no-repeat;}
    .swf {background: url(../images/modules/download/flash.png) 0 0 no-repeat;}
    .txt, .rtf {background: url(../images/modules/download/text.png) 0 0 no-repeat;}
    .doc, .docx, .odf, .ott, .sxw, .stw {background: url(../images/modules/download/word.png) 0 0 no-repeat;}
    .jpg, .jpe, .jfif, .png, .jpeg, .gif, .tif, .tiff, .ico, .bmp, .raw, .dcs {background: url(../images/modules/download/picture.png) 0 0 no-repeat;}
    .flv, .mov, .mpeg, .avi, .divx {background: url(../images/modules/download/movie.png) 0 0 no-repeat;}
    .ods, .sxc, .xls, .xlt {background: url(../images/modules/download/excel.png) 0 0 no-repeat;}
    .odg, .sxd, .psd {background: url(../images/modules/download/paint.png) 0 0 no-repeat;}
    .cdr, .ai {background: url(../images/modules/download/vector.png) 0 0 no-repeat;}
    .php, .html, .css, .js, .less, .asp, .c {background: url(../images/modules/download/code.png) 0 0 no-repeat;}
    .sql, .db, .dbf, .dbk {background: url(../images/modules/download/database.png) 0 0 no-repeat;}
    .zip, .tar, .gz, .gzip, .rar {background: url(../images/modules/download/zip.png) 0 0 no-repeat;}
    .rb {background: url(../images/modules/download/ruby.png) 0 0 no-repeat;}
    .as {background: url(../images/modules/download/actionscript.png) 0 0 no-repeat;}
    .cf {background: url(../images/modules/download/coldfusion.png) 0 0 no-repeat;}
    .odp, .sxi, .ppt {background: url(../images/modules/download/powerpoint.png) 0 0 no-repeat;}
    .iso, .nrg {background: url(../images/modules/download/dvd.png) 0 0 no-repeat;}

}






/* tables */



@tborder: #ccc;
@table-row-hover: #f9f9f9;
@sorted-highlight: #f5f5f5;



table.centered {
    margin:0 auto 1em;

    th, td {
    	text-align: center;
    }
}

table {
	
    border-collapse: separate;
    border-spacing: 2px;
    margin-bottom:1em;

    td, th {
	   padding:8px;
	   border:solid 1px @tborder;
	   font-size:12px;
	   line-height: 1.5em;

	   p {padding-bottom: 0 !important;}
    }

    th {
	   border:solid 1px lighten(@tborder, 20%);
    }
}

.only-rows {
    border-collapse: collapse;
    border-spacing: 0;

    td, th {
	border:0;
	border-top:solid 1px @tborder;
    }

    th {border:0;}
}

.zebra {
    border-collapse: collapse;
    border-spacing: 0;

    td, th {
	border:0;
	border-top:solid 1px lighten(@tborder, 5%);
    }

    th {background: lighten(@tborder, 10%);}

    .even td {
	background: lighten(@tborder, 18%);
    }

    th {border:0;}
}

.hovered {
    tr:hover td {
	background: @table-row-hover;
    }
}





// sortowalna tabela:

.sort thead th {
	background: url(../images/modules/sorted_tables/table-unsort.png) right no-repeat;
	padding-right:20px;
	text-align: left;
	cursor:pointer;
}

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

th.headerSortUp {
    background-image: url(../images/modules/sorted_tables/table-asc.png) !important;
    background-color: @sorted-highlight !important;
}

th.headerSortDown {
    background-image: url(../images/modules/sorted_tables/table-desc.png) !important;
    background-color: @sorted-highlight !important;
}





/* paginator */

#pages {
  width: 160px;
  float: none;
  margin: 10px auto;
  /*margin: 10px 0 0 173px;*/ }



#pages-container {float: left; width: 100%;}




.jPaginate{
    height:34px;
    position:relative;
    color:#a5a5a5;
    font-size:small;
  width:100%;
}
.jPaginate a {
    line-height:15px;
    height:18px;
    cursor:pointer;
    padding:1px 6px 0;
    margin:1px;
    font-size: 11px;
    float:left;
    color: #333;
}
.jPag-control-back{
  position:absolute;
  left:0;
}
.jPag-control-front{
  position:absolute;
  top:0;
}
.jPaginate span{
    cursor:pointer;
}
ul.jPag-pages {
    float:left;
    /*width:auto !important;*/
    list-style-type:none;
    margin:0;
    padding:0;
}
ul.jPag-pages li {
    float: left;
    padding:0;
    margin:0;
}
ul.jPag-pages li a {
    float: left;
    padding:1px 6px 0;
    color: #777;
}

ul.jPag-pages li a:hover, .jPag-first:hover, .jPag-last:hover {
  background: #ddd;
  opacity:.8;
  filter:alpha(opacity=80);
}

span.jPag-current{
    line-height:15px;
    height:18px;
    cursor:pointer;
    padding: 1px 6px 0 6px;
    margin: 1px;
    font-size: 11px;
    float:left;
    color: white;
    background: #999 !important;
}
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:22px;
    margin:0;
    float:left;
    line-height:18px;
}

ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-previous-img{
    margin: 0;
    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:0;
    font-size:18px;
    width:15px;
    text-align:right;
    color: #555;
}
span.jPag-snext,
span.jPag-snext-img{
    margin:0;
    font-size:18px;
    width:15px;
    text-align:right;
    color: #555;
}
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;
            }






/* forms */


@form-width: 300px;
@inset-padding: 5px;
@form-border-color: #ccc;
@border-size: 1px;
@borders: @border-size solid @form-border-color;

@textarea-height: 115px;

@error-bg: #cc0000;
@ok-bg: #5FA00B;

@submit-padding: 5px;
@submit-color: #fff;



.shadow(@size:5px, @tsx: 0, @tsy: 1px, @tss: 1px) {
	box-shadow: inset 0 0 @size lighten(@form-border-color, 5%);
	text-shadow: @tsx @tsy @tss @form-border-color;
}

.form {width: @form-width;}

.standard-form {
	float: left;
	width: 100%;

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

	fieldset > div {
		float: left;
		width:100%;
		padding: 0 0 .2em;
	}

	span {color: #ff0000;}

	label, input, textarea {
		clear: left;
		float: left;
	}

	input, textarea {
		letter-spacing: 1px;
		padding: @inset-padding;
		border: @borders;

		width: (@form-width - @inset-padding*2);

		.shadow(10px);
		.border-radius(2px);
	}

	input {width:70%;}
	textarea {height: @textarea-height;}

	.error, .ok {
		float: left;
		color: white;
		margin:0 0 3px 0;
		font-size: 12px;
		padding: @submit-padding @submit-padding*2;
		width: @form-width + (@border-size*2) - @submit-padding*4;

		.border-radius(2px);
		display: none;
	}

	.error {background: @error-bg;}
	.ok {background: @ok-bg;}

	button {
		float: right;
		padding: @submit-padding @submit-padding*2;
		background: @color1;
		color: @submit-color;
		font-weight: bold;

		.border-radius(2px);
		cursor: pointer;

		&:hover {
			background: darken(@color1, 10%);
		}
	}

	.star-info {
		float: left;
		font-size: 11px;
	}

	.error-input {
		border:@border-size solid #ff0000 !important;
	}

	input:disabled, textarea:disabled {
		@include opacity(0.7);
		cursor: default;
	}

}







.gotop {
	position: fixed;
	bottom:30px;
	right: 50px;
	z-index: 20000;
	display: none;
}



.hidden {display: none;}
.rozwiniete {
	float: left;
	width: 100%;
	margin-bottom: 3em;
}


.sub article h1 {
	float: left;
	width: @width;
	text-align: left;

	font-size: 32px;
	color: @color1;
	.fontc;

	padding: 13px 0 13px 55px;
	margin-bottom: 1em;


	span {
		padding:0;
		background: none;
	}
}

.sub .undertitle {
	display: none;
}

.polecam article h1 {background: url(../images/polecam.png) 0 0 no-repeat;}
.omnie article h1 {background: url(../images/omnie.png) 0 0 no-repeat;}
.oferta article h1 {background: url(../images/oferta.png) 0 0 no-repeat;}
.referencje article h1 {background: url(../images/referencje.png) 0 0 no-repeat;}
.kontakt article h1 {background: url(../images/kontakt.png) 0 0 no-repeat;}



/* Facebook slider - right */

.fb_slider_right {
	position: fixed;
	top: 150px;
	right:-320px;
	z-index: 1000;
	width: 348px;
	height: 100px;
	overflow: hidden;

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

.fb_slider_right:hover {
	right:0;
	height: 100%;
}

.fb_slider_right .button,
.fb_slider_right iframe {
	float: left;
	background: white;
}