/* WSZYSTKO */

* { 
	padding:0;
	margin:0;
	outline: none;
}



@font-face { 
	font-family: 'Museo500';
	src: url('fonts/Museo500-Regular.otf');
}

@font-face { 
	font-family: 'Museo300';
	src: url('fonts/Museo300-Regular.otf');
}

body,html {
	width: 100%;
	font-family: "Museo300Regular", Verdana, Helvetica, "Lucida Sans Unicode", "Lucida Grande", "Loma", Arial, sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #CCCCCC;
	overflow-x: hidden;
}

body {
	background: url(../grafika/szum.png) repeat #1a1a1a;
}

a {
	color: #97b506;
	text-decoration: none;
}

/* MENU */

header {
	background: url(../grafika/tlo-menu.png) repeat-x;
	height: 94px;
	width: 100%;
	position: relative;
	display: block;
}

#menu {
	width:960px;
	height: 77px;
	margin:0 auto;
	background: url(../grafika/tlo-podmenu.png) no-repeat center top;
	position: relative;
	font-family: "Museo500Regular", "Museo500", "Lucida Sans Unicode", "Lucida Grande", "Loma", Helvetica, Arial, sans-serif;
	z-index: 10;
}

header span.light {
	background: url(../grafika/light.png) no-repeat center top;
	display: block;
	width: 1337px;
	height: 94px;
	position: absolute;
	left: 50%;
	margin-left: -668px;
}

#menu ul {
	position: absolute;
	left: 500px;
	top: 35px;
	list-style:none;
}

#menu ul li {
	float:left;
	width: 92px;
	height: 27px;
	padding-top: 10px;
	text-align: center;
}

#menu ul li a, #lang {
	color: #878787;
	text-decoration: none;
}

#menu ul li a:hover, #lang:hover {
	color: #EDE9E9;
	text-shadow: 0 1px 1px #000;
}

#menu ul li.active {
	color: #EDE9E9;
}

#menu ul li.active a {
	color: #EDE9E9;
	text-shadow: 0 1px 1px #000, 0 0 25px #fff !important;
}

#lang {
	position: absolute;
	top: 5px;
	right: 20px;
	font-size: 11px;
}

/* STRONA NAJWŻNIEJSZE ELEMENTY */

#tresc, #tresc-onas, #portfolio-tresc, #kontakt-tresc, #oferta-tresc {
	width: 960px;
	height: 780px;
	margin: 0 auto;
	position: relative;	
	background: url(../grafika/swiatlo-gora.jpg) no-repeat top;
}
 
/*************************/ 
/*    STRONA GŁÓWNA      */
/************************/

/* SPLASH */

#logo {
	width:218px;
	height:46px;
	position: absolute;
	top: 20px;
	left:10px;
	background: url(../grafika/logo.png) no-repeat;
}

#splash-container {
	background-color: #0c0c0c;
	width: 100%;
	height: 412px;
	font-family: "Museo300Regular", "Museo300", "Lucida Sans Unicode", "Lucida Grande", "Loma", Helvetica, Arial, sans-serif;
	border-bottom: 1px solid #131313;
}

#splash {
	width: 960px;
	height: 412px;
	margin: 0 auto;
	background: url(../grafika/splash-tlo.jpg) no-repeat center center;
	position: relative;
}

#laptop {
	width:542px;
	height:301px;
	background: url(../grafika/laptop.png) no-repeat;
	position: absolute;
	left:15px;
	top: 50px;
	overflow:hidden; 
}

#witaj {
	width: 272px;
	height: 102px;
	position:absolute;
	right: 50px;
	top: 50px;
	background: url(../grafika/witaj.png) no-repeat;
}

#splash-tekst {
	width: 299px;
	height: 116px;
	position: absolute;
	right: 23px;
	top: 170px;
	font-size: 13px;
	line-height: 18px;
}

#splash a.portfolio {
	width: 293px;
	height: 123px;
	position: absolute;
	right: 70px;
	top: 260px; 
}


/* CO JAK DLACZEGO */

span.separator, span.separator2 {
	width: 940px;
	height: 2px;
	position: absolute;
	left: 10px;
	top: 17px;
	display:block;
	background: url(../grafika/separator.png) no-repeat;
}

span.separator2 {
	top: 360px;
}

#cojakdlaczego {
	position: absolute;
	top: 50px;
	left: 20px;
	width: 259px;
	height: 31px;
	background: url(../grafika/cojakdlaczego.png) no-repeat;
}

#cojakdlaczego-tekst {
	position: absolute;
	top: 100px;
	left: 20px;
	width: 370px;
	font-size: 14px;
}

/* CO ROBIMY */

#corobimy {
	background: url(../grafika/ramka-mozliwosci.png) no-repeat;
	width: 506px;
	height: 285px;
	position: absolute;
	top: 40px;
	right: 15px;
}

#corobimy div {
	position: absolute;
	width: 235px;
	height: 105px;
}

#corobimy div span {
 display:block;
 position: absolute;
 font-size: 12px;
 font-family: Verdana, Arial, sans-serif;
 line-height: 14px;
}

#corobimy div.cr-grafika { top: 30px; left: 20px; }
#corobimy div.cr-kodowanie { top: 30px; left: 250px; }
#corobimy div.cr-cms { top: 150px; left: 20px; }
#corobimy div.cr-ciecie { top: 150px; left: 250px; }

#corobimy div span.ico { top: 40px; left: 10px; }
#corobimy div.cr-grafika span.ico { background: url(../grafika/grafika_ikonka.png); width: 55px; height: 51px; }
#corobimy div.cr-kodowanie span.ico { background: url(../grafika/kodowanie_ikonka.png); width: 57px; height: 47px; }
#corobimy div.cr-cms span.ico { background: url(../grafika/CMS_ikonka.png); width: 44px; height: 51px; }
#corobimy div.cr-ciecie span.ico { background: url(../grafika/ciecie_ikonka.png); width: 60px; height: 55px; }

#corobimy div span.header { top: 10px; left: 80px; }
#corobimy div.cr-grafika span.header { background: url(../grafika/grafika_napis.png); width: 62px; height: 16px; }
#corobimy div.cr-kodowanie span.header { background: url(../grafika/kodowanie_napis.png); width: 97px; height: 16px; }
#corobimy div.cr-cms span.header { background: url(../grafika/CMS_napis.png); width: 38px; height: 16px; }
#corobimy div.cr-ciecie span.header { background: url(../grafika/ciecie_napis.png); width: 53px; height: 19px; }

#corobimy div span.opis { top: 35px; left: 80px; color: #939292; }

/* KROK PO KROKU */

#krokpokroku {
	display: block;
	position: absolute;
	top: 390px;
	width: 220px;
	height: 24px;
	left: 365px;
	background: url(../grafika/krokpokroku_napis.png);
}

#krokpokroku-lista {
	position: absolute;
	left: 20px;
	top: 445px;
	width: 920px;
	list-style:none;
}

#krokpokroku-lista li {
	width: 220px;
	height: 168px;
	float: left;
	background: url(../grafika/krokpokroku_box.png) no-repeat;
	margin-right: 10px;
	position: relative;
}

#krokpokroku-lista li span.arrow {
	position: absolute;
	display: block;
	top: 55px;
	left: 200px;
	background: url(../grafika/arrow-big.png) no-repeat;
	z-index: 10;
	width: 53px;
	height: 41px;
}

#krokpokroku-lista li h1 {
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	top: 33px;
	left: 31px;
	text-shadow: 2px 2px 2px #000;
	color: #fff;
}

#krokpokroku-lista li span.opiskroku {
	font-size: 12px;
	position: absolute;
	top:59px;
	left: 70px;
	text-shadow: 1px 1px 1px #000;
	font-family: Verdana,Helvetica, Arial, sans-serif;
	color: #949393;
	line-height: 15px;
	z-index: 20;
}

#krokpokroku-lista li span.ico {
	position: absolute;
	left: 12px;
	top: 59px;
}

#krokpokroku-lista li.kpk-spotkanie span.ico { background:url(../grafika/spotkanie_ikonka.png) no-repeat; width: 64px; height: 61px; }
#krokpokroku-lista li.kpk-burzamozgow span.ico { background:url(../grafika/burza_mozgow_ikonka.png) no-repeat; width: 67px; height: 66px; }
#krokpokroku-lista li.kpk-projektowanie span.ico { background:url(../grafika/projektowanie_ikonka.png) no-repeat; width: 67px; height: 67px; }
#krokpokroku-lista li.kpk-wdrazanie span.ico { background:url(../grafika/wdrazanie_ikonka.png) no-repeat; width: 70px; height: 65px; }

/*************************/ 
/*  EOF STRONA GŁÓWNA    */
/************************/

/* O NAS */

#tresc-onas {
	height: 800px;
	background: none;
}

#tresc-onas div.fabula {
	width: 960px;
	height: 218px;
	overflow: hidden;
	margin: 40px 0 40px 0;
}

#tresc-onas div.fabula img.lime {
	float: right;
	margin-right: 25px;
	margin-top: 15px;
	width: 138px;
	height: 147px;
}

#tresc-onas div.fabula h1 {
	background: url(../grafika/fabula.png) no-repeat left top;
	width: 141px;
	height: 28px;
	margin-left: 25px;
}

#tresc-onas div.fabula span.fabula-tekst {
	display: block;
	width: 720px;
	float:left;
	margin-left: 28px;
	margin-top: 20px;
}

#tresc-onas span.separator-onas {
	width: 940px;
	height: 2px;
	margin-left: 25px;
	display:block;
	background: url(../grafika/separator.png) no-repeat;
}

#tresc-onas div.obsada {
	width: 965px;
	height: 318px;
	overflow: hidden;
	padding-top: 40px;
}

#tresc-onas div.obsada h1 {
	background: url(../grafika/obsada.png) no-repeat left top;
	width: 156px;
	height: 29px;
	margin-left: 25px;
}

#tresc-onas div.obsada div.pracownik {
	float: left;
	width: 412px;
	height: 142px;
	background: url(../grafika/Box.png) no-repeat;
	margin: 20px 15px 0 0;
	padding: 25px;
	position: relative;
}

#tresc-onas div.obsada div.pracownik span.zdjecie {
	width: 104px;
	height: 144px;
	display: block;
}

#tresc-onas div.obsada div.pracownik span.imienazwisko {
	display: block;
	width: 100%;
	height: 25px;
	position: absolute;
	top: 22px;
	left: 150px;
}

#tresc-onas div.obsada div.pracownik span.stanowisko {
	display: block;
	width: 100%;
	height: 20px;
	position: absolute;
	top: 52px;
}

#tresc-onas div.obsada div.pracownik span.info {
	display: block;
	width: 290px;
	height: auto;
	position: absolute;
	top: 76px;
	left: 150px;
	font-size: 13px;
	color: #939292;
	line-height: 17px;
}

/* O NAS - PRACOWNICY */

#pracownik-kklosowski { margin-left: 25px !important; }
#pracownik-tomelan { margin-right: 0 !important; }

#pracownik-kklosowski span.zdjecie { background: url(../grafika/kamil_picture.png) no-repeat; }
#pracownik-tomelan span.zdjecie { background: url(../grafika/tomek_picture.png) no-repeat; }

#pracownik-kklosowski span.imienazwisko { background: url(../grafika/kamil_klosowski.png) no-repeat; }
#pracownik-tomelan span.imienazwisko { background: url(../grafika/tomek_omelan.png) no-repeat; }

#pracownik-kklosowski span.stanowisko { background: url(../grafika/programista_webmaster.png) no-repeat; left: 158px; }
#pracownik-tomelan span.stanowisko { background: url(../grafika/grafik_designer.png) no-repeat; left: 220px; }


/* PORTFOLIO */

#portfolio-tresc {
	margin-top: 60px;
	height: 750px;
	background: none;
}

#portfolio-tresc h1 {
	background: url(../grafika/wpoprzednich.png) no-repeat;
	width: 400px;
	height: 30px;
	margin-left: 30px;
}

#portfolio-tresc div.portfolio {
	margin-left: 15px;
	margin-top: 30px;
	height: 382px;
	width: 920px;
	background: url(../grafika/portfolio_box.png) no-repeat;
	padding: 30px 20px 30px 20px;
}

#portfolio-tresc div.portfolio div.portfoliomodul {
	border: 4px solid #403f3f;
	width: 272px;
	height: 112px;
	margin-right: 20px;
	float:left;
	position: relative;
	margin-bottom: 90px;
}

#portfolio-tresc div.portfolio div.portfoliomodul img {
	z-index: 10;
}

#portfolio-tresc div.portfolio div.portfoliomodul span.badge { 
	position: absolute;
	display: block;
	left: -8px;
	bottom: 8px;
	width: 84px;
	height: 29px;
	z-index: 200;
}

#portfolio-tresc div.portfolio div.portfoliomodul span.tytul { 
	position: absolute;
	display: block;
	left: 0;
	bottom: -30px;
	width: 280px;
	height: 20px;
	color:#eeeded;
	font-weight: bold;
	font-size:14px;
}

#portfolio-tresc div.portfolio div.portfoliomodul span.opis { 
	position: absolute;
	display: block;
	left: 0;
	bottom: -75px;
	width: 280px;
	height: auto;
	color:#767575;
	font-size: 13px;
}

#portfolio-tresc div.portfolio div.web span.badge { background: url(../grafika/web_badge.png) no-repeat; }
#portfolio-tresc div.portfolio div.kod span.badge { background: url(../grafika/kod_badge.png) no-repeat; }
#portfolio-tresc div.portfolio div.design span.badge { background: url(../grafika/design_badge.png) no-repeat; }

#portfolio-tresc div.portfolio div.portfoliomodul:hover {
	border: 4px solid #727272;
	cursor: pointer;
}

/* PORTFOLIO - STRONY WYKONANE / MODUŁY */

#portfolio-pansam { margin-right: 0 !important; }

/* OFERTA */

#oferta-tresc h1 {
	color:#97B506;
	font-family:Museo;
	font-weight:normal;
	padding-top:80px;
	text-align:center;
}

/* KONTAKT */

#kontakt-tresc {
	background: none;
	margin-top: 60px;
}

#kontakt-tresc h1 {
	background: url(../grafika/skontaktujsie.png) no-repeat;
	width: 200px;
	height: 30px;
	margin-bottom: 20px;
	margin-left: 30px;
}

#kontakt-tresc a:hover {
	border-bottom: 1px dashed #97b506;
}

#kontakt-tresc div.kontakt {
	margin-left: 30px;
}

/* FOOTER */

footer {
	height: 166px;
	width: 100%;
	background: url(../grafika/stopka-tlo.png) repeat-x;
	position: relative;
	display:block;
}

#obrazek {
	background: url(../grafika/stopka-obrazek.png) no-repeat;
	width: 1166px;
	left: 50%;
	margin-left: -583px;
	position: absolute;
	bottom: 0;
	height: 313px;
	z-index: 20;
}

footer ul.footer-menu {
	position: absolute;
	width: 460px;
	top: 48px;
	left: 50%;
	margin-left: -230px;
	list-style:none;
	z-index: 50;
	display: block;
}

footer ul.footer-menu  li {
	margin-right: 24px;
	padding-right: 24px;
	background: url(../grafika/sep-menu.png) no-repeat right bottom;
	float: left;
}

footer ul.footer-menu  li:last-child {
	margin-right: 0;
	padding-right: 0;
	background: none;
}

footer ul.footer-menu  li a {
	color:#3a3a3a;
	text-decoration: none;
}

footer ul.footer-menu  li a:hover {
	color: #e3e3e3;
}

#social {
	position: absolute;
	bottom: 24px;
	left: 50%;
	margin-left: -120px;
	background: url(../grafika/social/social_background.png) no-repeat;
	width: 226px;
	height: 53px;
	z-index: 50;
}

#social ul {
	position: absolute;
	left: 13px;
	top: 13px;
	width: 220px;
	height: 29px;
	list-style:none;
}

#social ul li {
	margin-right: 6px;
	float:left;
}

#social ul li a {
	opacity: 0.8;
	width: 29px;
	height: 29px;
	display: block;
}

#social ul li a:hover {
	opacity: 1;
}

#social ul li.twitter a { background: url(../grafika/social/twitter-ikonka.png) no-repeat; }
#social ul li.blip a { background: url(../grafika/social/blip-ikonka.png) no-repeat; }
#social ul li.facebook a { background: url(../grafika/social/facebook-ikonka.png) no-repeat; }
#social ul li.goldenline a { background: url(../grafika/social/goldenline-ikonka.png) no-repeat; }
#social ul li.linked-in a { background: url(../grafika/social/linked_in-ikonka.png) no-repeat; }
#social ul li.grono a { background: url(../grafika/social/grono-ikonka.png) no-repeat; }

/* FLOW TOOLS */

.overlay {
	display:none;	
	width:745px;		
	padding:35px;
	font-size:11px;
}

.overlay .close {
	background-image:url(../grafika/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

div.overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
}
	
div.overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
}
	
div.black h2 {
		color:#fff;
}